ZAKER内容目录展示界面对比:左为2011年5月24日第一版初稿,右为昨日(2012年11月9日)刚刚发布的最新版本V2.6界面截图。
产品的界面设计,是它用来留住用户的第一道门槛。之前曾报道过阅读应用ZAKER创始人李森和对设计细节的解释,实际上它的具体效果也几经改版。ZAKER总设计师朱剑锋习惯在每版设计图的日期元素中留下线索,2011年5月24日首次成版至今,这款尚属“年轻”的产品经历了18个月的演变过程。
晚于产品的设计师
2011年4月,朱剑锋加入ZAKER时,iPad版已经问世有4个月。ZAKER iPad第一版于2010年12月底上线App Store,但谁知那时的ZAKER其实连个UI设计人员都没有。
ZAKER的开发来自创始人李森和的一个偶然发现。他看到国外的Flipboard能够将资讯以杂志化的方式展现在iPad上,正巧当时负责读览天下杂志电子化,于是兼职带着两个人,一人写后台,一人写iOS前端,一人负责服务器、新闻源等,用时两个多月推出了这款产品。
朱剑锋初到ZAKER首要的工作就是对ZAKER iPad版进行设计优化,同时iPhone版研发也在进行。iPad版的推出是为了赶时间抢先,但到iPhone版时,界面设计与用户体验则成了他们首先考虑的事。
ZAKER主界面初稿设计与最新版本对比
从零开始的界面设计:Metro风、杂志化
ZAKER团队最终定下来的设计方向为:高效、时尚、极简、符合iOS操作特性。具体到实现,朱剑锋决定先从内容的目录展示界面入手。
朱剑锋有4年平面杂志排版基础,加上ZAKER iPad版排版经验,在设计iPhone版时已积累了不少心得。他认为最贴近用户阅读习惯和心理的阅读方式为“F”型,即视觉焦点从左到右、从上到下。为了让可视区域最大化的展示内容,强调信息本身而不是冗余的界面元素,他决定使用Metro的设计风格。
这位设计师有个习惯,如果设计图有日期元素,就会在图中打上当时的日期。2011年5月24日,是这个创业团队认为值得纪念的日子,这一天ZAKER iPhone版正式形成版式。从部分设计初稿中,可以看出目前版本的雏形。
接下来要完成的是主界面和图片模版设计。主界面是一款软件的脸面,也是软件留给用户招牌式的第一印象,因此设计至关重要。参考了大量设计资源后,朱剑锋确定了如下版式:主界面主题配色取互联网普遍使用、大众容易认可的蓝色调,突出频道辅以橘色,后期为了丰富主题色调又增加了粉色和黑色(夜间模式)两种配色方案,供用户自主选择;图片模版设计则延续平面杂志的直观。
主界面、目录界面、图片模版三个主体部分设计完成后,内容页的设计只需采用传统的上下滚动浏览形式,参照上级页面匹配好色调与头部装饰即可。在ZAKER后期的版本更新中,对内容页面的频道名称、标题展示、时间展示、字体等细节逐步优化。
ZAKER图片模板初稿设计与最新版本对比
ZAKER内容页初稿设计与最新版本对比
操作设计:iOS版入乡未随俗
界面基本设计完毕了,操作怎么办?朱剑锋认为操作设计才是最直接影响用户体验的部分,也绝非用户角度看起来那么简单。从哪里进入、如何退出,上下滑动推拉、左右翻的效果,单击、双击、单指、双指的手势功能,手指可操控的范围、单手能做什么操作、左右手操作是否都顺手,还要保持用户的思维逻辑不逆反,涉及细节颇多。
在操作的设计上,朱剑锋对APP设计普遍公认、苹果官方推荐的操作设计标准提出异议。例如,苹果设计标准认为顶部操作栏高度44px,左上角应为返回按钮。ZAKER则取消了顶部工具栏,将其工具按钮换在底部显示。
他认为,实际右手操作中,按到左上角的返回键非常困难,干脆将返回按钮放到底部手指的可控范围,或者采用双击任意位置、下拉等手势操作完成“返回”功能,不一定要很准确的点击按钮。iPhone 5上市后他们暗自得意,因为拉长的屏幕使单手按到左上角显得愈发为难。
纵观整个设计过程,可以看出大到界面确定、小到按钮放置,对一款App来说都举足轻重。虽然视觉冲击只是留住用户的第一步,但能写出来的部分仍是少于产品设计中的实干,这些并不是细节的全部。文末附《创事记》栏目获取的所有ZAKER最初版本设计稿,供从业者与当前版本对比参考。
ZAKER目录展示界面
ZAKER目录展示界面
ZAKER新闻列表界面
ZAKER最早的主题风格
ZAKER图片版式
ZAKER最初的正文页版式
原文标题:阅读应用ZAKER界面设计的前世今生