CNG iPad版设计:how it sucks & how it can be better » Helicopter ...

《中国国家地理》(下称CNG)应该是国内{dy}家推出iPad版杂志的,内容十分优秀,但不知是否乃试用版,交互和视觉有待大量改善。不然个人觉得真不太值得付费购买哦。

首先介绍一下CNG的基本属性:

  • 横版阅读,不支持竖版
  • 有背景音乐
  • 与内容的互动:可点击某些区域弹出图片或文字,可点区域上会有一个闪烁点
  • 手势交互:左右滑动翻页;双击开/关菜单
  • 菜单包括:返回首页;开/关音乐;帮助


1. 交互设计的不足

(1)翻页只能通过滑动,不能点击。

滑动虽然有仿真感,但手指的工作量比单击即能翻页要大,再加上横版的设计,会让人潜意识滑动更长的长度。有的app只支持滑动不支持单击翻页,是因为将单击作为开/关菜单的手势(如Popular Mechanics、WIRED),但CNG开/关菜单需要双击。这就导致不仅翻页累,开/关菜单也累。

iBooks是既支持滑动也支持单击翻页的,但它的菜单开关同样是单击(双击是放大的触发动作)。细节在于,单击到底触发翻页还是开/关菜单?

据不xx科学计算,对于iBooks格式图书(下图),单击页边空白处自然触发翻页,而在进入文字区域一个手指位以内亦然。再往中间移动,则触发菜单开/关。

PDF阅读利器GoodReader,同样是单击触发菜单开/关,但触发区域更偏中间,也就是说手指要移动更远的距离。相比起来,iBooks在更多情况下能保证手指跨度最小地完成翻页或启动菜单的任务。总而言之,CNG在翻页上应该有所改进,增加单击翻页。

(2)不合理的菜单

双击后,弹出如下菜单——

顶上那条Welcome to CNG,毫无意义。谁到了这一步会需要welcome呢?可能体验版阉割了一些菜单项?否则的话,可以直接砍掉顶上这条bar~~

页数跳转采用的是打横的滑竿。而我们知道,对于横版阅读,双手大部分情况抓着两条短边,手掌要移动到中间去做滑动操作、且滑动距离又比竖式相对长(起码在感觉上),整个动作幅度大,实在累。而如果是打竖的滑竿,基本上只需手指做短距离操作。

底部bar的{dy}个icon是home键,但心理期望是pop-up目录。一般来讲,电子书或杂志都会提供两种模式的页面导航。一种是纲要式,一种是页面陈列式。

WIRED的两种页面导航——

Popular Mechanics的两种页面导航,赏心悦目

回到CNG,底部bar的音乐符号,是背景音乐的开关。但我们都会习惯说,点击关闭之后图标会变成静音状。{zh1}一个心,作为icon,{dy}反应是favorite或者like,谁知道是打开一个帮助页……!?

那么,如果重新设计CNG的菜单,该怎么弄好呢?重新设计icon是首要的,而且对于横版,一大优势是可以加入icon的文字说明并可塞入更多icon~~~因此还有必要对功能进行分组。电子书或杂志的菜单选项大概包括——

导航组:页面导航;纲要导航;页码跳转
社交组:分享到(SNS);微博;邮件
评价组:like/favorite;收藏;打分
功能组:调整字号;调整亮度;开关音乐;搜索;帮助

菜单选项4、5个足矣,更多细分选择可藏在pop-up里。像是Good Reader的菜单有10个菜单项,我尽管天天用也至今记不全它们都是些什么。

(3)让人疲累的双击

双击一般是放大的手势。但在CNG里,弹出、放大图片的手势是单击,关闭弹出、放大的图片又变成双击了!而且习惯上来讲,关闭弹出层要么点击一个X,要么单击弹出层以外的地方(变暗区)。单击弹出、双击关闭,还真是很罕见。

(3)局促的轻挥

由于版面主体是图片,导致文字只能挤在一个豆腐块里,每页几乎都要在各个小豆腐块里用手指滚屏看文字。由于区域有限,一不小心就滚过头,感觉难控制。

2. 视觉设计

(1)图文排版杂乱

优秀的摄影图片,本来是CNG一大吸引人之处,但是那些排版各异的文字豆腐块,极大地影响了图片的观感。

如此美的照片,恨死了那堆文字。

上文已有提及在文字豆腐块里做滚屏操作很不舒服,而且这些豆腐块的视觉设计也缺乏一致性,有的大有的小,有的有边有的无边,有的有底色、有的没有,有的边框颜色与底图有冲突……品质感大打折扣。

白底的、圆角的——

其实,图片都很美,但是图文一结合就大煞风景。解决方案可以有两种:

  • 图 文分离。可以采用横版里有竖版的方式。即先往下、再翻页(用户翻页时向下滚屏把文字显示出来,再做翻页操作才是真正的翻页,类似Popular Mechanics做法)。当然这种交互有风险。另一种方式是图文交错,一页图一页文,这样文字扩展性更好,只不过会跟图片有所脱节。
  • 文字豆腐块默认隐藏,点击出现。这种方式类似我个人超爱的Guardian Eyewitness每日一图——

    让 人xx沉浸在摄影作品本身的美丽之中,没有任何多余干扰。这时候你会觉得用iPad看图是多么爽啊!!!!这就是他妈的用户体验。而在轻点之后,开启菜 单,且作品的介绍性文字会在左下角显示出来,直角透明层、白色文字,简洁美丽。再点一下show pro tip,小浮层做360度水平翻转,显示出拍摄技巧——

(2)颜色杂乱

在首页,文字至少以7种颜色与5种字体肆虐,以至于我想圈出那个写错了的发行日期(2009年……),都不知道还能用什么颜色才能使之凸显出来。

总而言之……

CNG有着很优秀的内容,它理应得到更好的展现,从而发挥iPad作为阅读平台的体验价值。

Leave a Reply

郑重声明:资讯 【CNG iPad版设计:how it sucks & how it can be better » Helicopter ...】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——