在IPAD平板电脑上进行界面设计 规范

在这里分享一篇《牛壹周》设计过程，也许设计师和产品经理们看了会更有共鸣。

真人网https://www.360docs.net/doc/fc2979183.html, 网上收集。

一、学习

iPad出来不久，我们便觉得这样的神器简直就是为用户体验设计而生——精致的显示，优秀的交互，简单的操作，让使用没有门槛，充满无限可能——于是我们决定进军这个陌生的领域。

学习是第一步，于是有人开始看Stanford的视频教程，有人开始安装xCode，有人开始研究HTML5，而我，则开始学习苹果4月3号出的那份官方指南《iPad Human Interface Guidelines》。

6月27号的成都UCD书友会，官方主题正好是《移动设备的交互和设计》，于是我把前一阵子的学习的心得和领悟做了份演示文稿，跟参会的书友们进行了分享和交流。

iPad用户体验设计指导性原则

在这份文档里，苹果提出了几个重要的设计原则。

首先，在iPad上侧重的是内容和交互，而不是UI。

作为设计师，几乎我们本能的就会醉心于一些华丽的UI界面而忘了用户本身是来干什么的。为了让用户关注内容本身并在交互的过程中尽量少受干扰，所以我们需要淡化程序UI，弱化界面控件、让信息更扁平化(让上下层级可以在同一界面中自如切换)，限制一个视图内的任务复杂度、淡化文件管理、使用最少的模态对话框、只有在需要时才提醒用户??

然后，是内容形式上富有真实感。

iPad上自带的iBooks、Note以及Google Map都是很好的例子。苹果给出的解释是：程序显示和现实生活越相似，用户就越容易理解、操作并喜欢。可以使用动画进一步增强真实感觉，东纵的真实感比外观更为重要，要符合物理规律。

最后，是充分利用设备性能和特性。

iPad是今年1月27号才发布的全新设备，除了具有普通数码设备的硬件指标和性能参数之外，还具有很多诸如重力和加速度感应、多点触控、手势识别等人机交互新特性。如何把这些交互手段通过设计结合到你的作品中，会是个有趣的挑战。

总之，上帝的归上帝，凯撒的归凯撒。

二、设计

牛博网阅读器的想法，6月初就提出来了，但要做成什么样子，大家脑子里还是一片混沌。

6月12号，竞总出了份iPad牛博网阅读器低保真模型，有横板和竖版两种模式。它看起来有些象网页，又有些象RSS阅读器，还有些象iPad上的Mail程序——大家都是菜鸟，看到这样的设计，也无法判断这样的设计到底是好，还是坏。后来因为其他项目上的事情一忙，这份原型也就沉没了。

竞总的设计原型概览

6月底的时候，我开始着手设计。因为本身就是设计师，视效上没有障碍，涉及的页面也不是很多，所以

一开始就在PS下面画图了。

网站设计多了，一上来还是传统思路在作祟，结果才设计了个开头就茫然了：心想如果设计成这个样子，还不如人家直接在iPad上用Safari浏览器打开牛博网来看呢??

用做网站的思路来设计iPad应用完全是死路一条

好吧，摒弃网站思路，做减法后我设计了目录页和内文页，设想应该有按文章索引、按人物索引、RSS订阅和设置这些功能??显然，这是个平庸的设计，但其实没关系，很多东西都是这样，刚开始的时候很糗，但至少有了讨论的基础。

第一版目录页

第一版内文页

团队的Daily Meeting上，大家给了很多好的建议。S拿出一本《南方人物周刊》，说其实应该做成这个样子——首先，它应该是一本杂志，阅读习惯上应该象在阅读一本书而不是浏览一个网站;然后，它应该是一本期刊，时效性比书本高，但比网站和blog低;内容质量和阅读体验和书相当，比网站有更多的个性，更少的噪音。

有了这个定位，设计也就有了方向，牛读器从此变成了《牛壹周》，开始有了典型的杂志封面，开始有了内文的两栏设计，交互上也去掉了纵向滚屏而采用了横向翻页。

第二版封面(我们团队简称CCW，于是戏称自己是山寨传媒CCVV)

目录页设计第二版

内文页设计第二版

在视效框架基本定型，代码上的难点也基本突破的时候，我和Shawn就好象分别从两头开始掘进海底隧道的两只工程队，开始合龙——然后，也才尴尬地发现——有些视效在设计的时候忽略了动态时候的效果，有些交互则会消耗太多系统资源导致无法平滑过渡。而且在模拟器中看到的效果和实际真机运行还是存在一定差距。

文章翻页设计中遇到的问题是个典型的例子。现在文章翻页是需要即时loading的，为避免误操作，我们需要用户拖动移动一定长度后才确认这是翻页操作。我早期的设计中，图标翻转的效果下面还有一句作为噱头的话。如果你用手指拖动页面，会先浮现出图标，下面配上提示文字“再拖??”;如果你继续拖动页面，图标会完整显示，下面的文字是：“再拖??再拖就是下一篇了哦～”，当用户拖到程序设定的长度，图标变红，然后就翻页了。

翻页提示的设计

实际的情况是这个拖动需要滑动的距离设计得太长了??如果你紧握iPad边缘用大拇指完成操作，很可能会

造成韧带拉伤。当然，经过实际真机调试后我们决定删除那些文字，然后问题就解决了。

在Shawn的博文中也提到过，更有效的设计方法，其实应该是界面的视觉设计有个大概以后就应该和交互仿真同时进行并快速迭代，这个时候做设计的不要考虑太多细节上的修饰;做开发的不要着急实现后面的功能——做一个可以运行在真机上的界面原型可以更早地暴露问题并快速改进。

三、细节

神在细节间，魔鬼也是。

团队奉行37教(我们喜欢https://www.360docs.net/doc/fc2979183.html,这种精悍的团队)，行事原则就是 Geting Real，不过这也让我们在快速迭代中很难做到细节的尽善尽美。

就拿牛一周的图标来说吧。

7月8号的时候，Shawn说：“妖怪，给我个牛一周的icon吧，我要72X72和256X256两种大小。”

于是我迅速地山寨了一个(好吧，你没猜错，克隆的原型是NBA的芝加哥公牛队LOGO)，然后继续其他的设计。

费总说：Ei~看起来怎么这么眼熟呢?

等到7月10号比较空闲的时候，我花了些时间来做icon的精细化设计——在Illustrator下拉渐变网格，并尝试各种造型组合。当大家看到那个魔爪版的时候，Mak说：“牛长的不是蹄子么??”小龙替我解释道：“妖总画的其实是大菠萝(Diablo)。”

《牛壹周》icons不同版本尝试

牛壹周icon定妆照

那几天正好在看《独唱团》，用手在封面的牛皮纸和微微泛黄的内文纸上摩挲，感觉很有feel——想到iPad 设计指导中所提到的“内容形式上富有真实感”的设计原则，就在封底和内页分别加上了牛皮纸和新闻纸

的质感。

Loading页和封底

内文页设计第三版

为了让人有场景代入的真实感，让人觉得这就是一本杂志，我也改进了横屏时的设计——修改前两边多出的部分本来只是个背景平铺;改进后加入了桌面、台布和咖啡杯——就好象在家，用一本杂志，享受一个很惬意的下午。

封面竖屏设计

早期的封面横屏设计，只是简单的旋转缩放然后居中

修改后的设计，增强了场景代入感

如果你在内文页轻轻点击一下，下面会推出一列Preview缩略图。这个部分的设计其实也费了一番思量和讨论，团队内部争论也比较激烈。

最早的想法是拿作者的头像作为索引，一来这样区分度比较明显，二来其实我们最关注的还是人本身。最早的效果，也不过是在下面浮上来一个半透明的层，然后显示人像照片。