在IPAD平板电脑上进行界面设计的规范与技巧

设计文章 / 业界分享 | 2011-03-19 | 来源:牛壹周 | 发布者: mobileui

2010年7月30号，《牛壹周》在App Store上架，截止到我写这篇blog，下载量破千，排名暂列中国地区免费程序TOP榜第11位，新闻类第2位。

几天前，Shawn写了篇超有爱的blog――《牛壹周》顺产记，从开发的角度跟大家分享了《牛壹周》的生产过程，比较适合程序员和开发者阅读；在这里我想写一写《牛壹周》设计过程，也许设计师和产品经理们看了会更有共鸣。

一、学习

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的，为避免误操作，我们需要用户拖动移动一定长度后才确认这是翻页操作。我早期的设计中，图标翻转的效果下面还有一句作为噱头的话。如果你用手指拖动页面，会先浮现出图标，下面配上提示文字”再拖⋯⋯”；如果你继续拖动页面，图标会完整显示，下面的文字是：”再拖⋯⋯再拖就是下一篇了哦～”，当用户拖到程序设定的长度，图标变红，然后就翻页了。