Tag Archives: Iphone

llolli 1.0 release

We release llolli 1.0.
Designer 小气的神.
Llolli is a todo & calendar app.
Designed with love, Llolli is a new experience that will make your life easier.
Features
• Fast to create todo use text, voice, photo.
• Fast to transform between todo and calendar.
• Suggesting you with color base on current todo list.
• Compatible only with Google Calendar for now.
• Reminders.
• A completely redesigned calendar experience for your iPhone.
• Support browse calendar by day, week.
Download from AppStore
llolli_mdongorg
关于这个设计,还有一个很美好的经历。
有一天收到Vivian的信,那是一封《一个关于你的梦》。
穿越时空 🙂

在梦里,我和其他同学是一群进到了一座木头做的高塔春游的孩子。
这座高塔非常大,木板老旧,黑黑的,但十分结实。每一层都有很不一样的风景,住着非常不一样的人。
最初我们在顶层,并且我知道我们将要一路下到底层。
顶层是类似旅游景点的购物中心,非常喧闹拥挤,我挤到一家杂货店门口,门前挂着各种帽子和一串串的各式杯子。(因为在现实生活中我一直想买一个便宜的瓷杯子的缘故)我一眼看到了一个3刀的杯子,心花怒放。刚准备买,此时听到我朋友使劲喊我,快走快走,来不及了!(虽然我也不知道来不及什么)
没来得及付钱,而且我头上还戴着一顶刚刚试戴的帽子,蓝色的蓝猫造型的帽子丑得非常诡异,而他已经拉着我的手开始在人群中狂奔(就像千与千寻里面的白拉着小千飞奔)。
我们一路经过黑暗的甬道,坐过旋转的滑梯,下过陡峭的楼梯,跳过吓人的裂缝。由于梦没有逻辑的缘故,路上我突然得知,小神,你是我这个朋友的亲戚。他说,你不是一直想找他么,我经常去他家的,带你直接去见他好了!他住在塔的八层。
于是终于一切宁静缓和下来。这一层没有人,静静的地面上有绿植和苔藓。听得到水滴的声音。远远的石板路上还能看到各种牌匾,正对着的一个写着“鹅”字的牌匾下,是养鹅的棚子。对,这里我来过,有一点印象。那还是久远之前的另一个梦里的事情了。
黑乎乎的角落里,门缝中漏出一丝光线来,那就是你家了。我还在犹豫该如何敲门,朋友就已经大大咧咧直接掰开了门,对里面叫到,嘿,小神,我们来了。
里面是日式结构,榻榻米上的茶几围坐着好几个人呢,你们起身迎接我朋友,我跟进来的时候不由得害羞地捂住了脸。要做不速之客了呢,而且还是要跟小神说这么令人感到脸红的事情。
在梦里,你穿着一身黑衣服,头发不短,看上去很友善。(有点浦原喜助的赶脚)你笑着问我,有什么问题可以帮我解答呢?我拐着弯说:“在设计里面,借鉴和抄袭的界限是什么呀?” 你笑笑地说,“没那么清晰,可能你觉得是就是吧。” 于是我就很不好意思的说了我借鉴了你棒棒糖设计的这件事,然后你很大度地说:“没有关系呀,很高兴你喜欢~” 当时我们急着走,于是你送我们到了门口。就这样匆匆道别……
接下来我又穿过了黑黑的走廊,穿过了养鹅的地方,回到了熙熙攘攘的顶层,与小贩买帽子和杯子去了……
(梦完)

梦旅程

地点:青岛
设备:Apple iPhone4S
dreamway_0_mdongorg
dreamway_1_mdongorg
dreamway_3_mdongorg

移动界面设计点滴(5)——主功能入口设计 tabbar or grid-based


传统的iPhone Android应用主界面功能入口是基于tabbar的设计,区别无非是tabbar的位置是top or bottom。(我们甚至还看到了针对这个位置的讨论,当然两者都有其设计的意义)
而随着产品功能的不断加入,会出现tabbar的空间不能满足需求的情况,你知道iPhone 默认只预留了5个位置(more并不是一个好的设计),在保证主功能可视与可点击的情况下,Android也摆脱不了tabbar设计受限的情况。
是的,我们需要改变这一个传统的设计。或许你在许多应用上已经有所体验——基于grid的设计。
首先,我们再重新回到前面的讨论,tabbar究竟出现了什么问题?综合来看,主要为以下几点

  • 无法满足一次展示全部功能或者更低操作成本下展示的需求。
  • tab切换存在不同tab执行重叠任务的可能,对于用户专注某一flow任务产生障碍。
  • 对操作本身的消极设计,增加误操作的可能性,也成为在单一任务执行时的视觉噪声。

grid-based的设计是如何解决上述的设计?

  • 在一个页面中允许加入大量的icon入口,并通过页面滑动轻松完成对功能的浏览。
  • 结合清晰丰富的功能入口,专注单一功能的流程设计。
  • 页面上更少视觉与可点击元素的加入,更clean的设计。

如何进一步的完善grid-based设计?

  • 我们在windowsPhone找到了答案——live tiles。它承载了更多的信息传达,而不只是icon。
  • 专注单一功能的核心flow,不要妄图在单一任务的操作过程中提供其它功能入口。
  • 随时终止并回到主功能入口的可能。

即便我们在上述的文中将tabbar批判的体无完肤,然而grid-based本身也不是完美主义,面临的挑战在于

  • 页面层次变深,对flow设计提出更高的要求。
  • 如果应用的主要功能不超过5个或者仅是单一功能,你并不需要这样一个扩展性极强的设计。

走完上述的文字,隐约察觉这其实是metro与iPhone/Android的碰撞。我想说,metro是一次设计思维的变革,它使得人们开始归回信息本身,任务被更自然的执行,而不再游离在冗余的页面元素。
在随后的几个月,你也会看到我们参与实现的应用——X。

移动界面设计点滴(2)——Flow大局观

Mobile UI design tips—— the overall view of flow
在移动设计中,我们需要完善的功能flow,对它认知的价值使得flow在整个设计开发过程中始终走在前面。完善的flow不仅令功能产品更加易用,带来良好的用户体验,与此同时,也有助于提升开发效率,不到位的flow将带来设计与开发的反复,使团队蒙受损失。
良好的移动产品flow标准有三

  • end to end
  • 清晰
  • 整合

所谓end to end是指功能根据需求设计需要符合所在平台的特性,完整的考虑到用户如何在任何场景下使用操作及完成任务,提供因为有效或无效操作而带来的反馈帮助信息。
清晰是指整个设计中不会造成用户的疑惑,符合平台特性易于理解的设计。通常但凡清晰的功能,即使需要付出更多次的操作,value还是高于稍显混乱的设计,虽然后者简化了用户的操作。

整合
,在前一篇《移动界面设计点滴(1)——减少空间占用》的一文有所涉及,受限于移动产品的诸多条件,合理的归纳使得产品使用更为流畅。这与清晰并不矛盾,重在调和。
下面以前些时间已经release的一个功能模块作为示例,展示如何设计一个良好的flow。

案例简析
功能目标:通过列表快速定位城市。
该功能从属于Map视图,图标以形象的道路指向标示。
在mockup中的功能主UI,显示支持的国家;
点击任意国家进入以首字母排列的城市列表;
点击任意城市,自动切入到Map视图并转向相应的可视地区。
主UI左上角提供Back键,预留回退。
在此,有两种设计思路。另一则是使用IPhone自带的Pickers控件,将国家列表横向置于上方,城市列表纵向置于UI下方。
它的优势在于可以在一屏中解决所有的问题。
但为了更好的使用Pickers,你需要加入更多的诸如Supported City等提示信息以区分两个Pickers,以及顶部的Done Cancel按钮,以完善flow。
这使得用户需要更多的时间来熟悉操作,这不是我们想要看到的。

站在用户的高度,你将更理解设计。