iPad界面设计案例_图文.doc

在这里分享一篇《牛壹周》设计过程，也许设计师和产品经理们看了会更有共鸣。 一、学习 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 的，为避免误操作，我们需要用户拖动移动一定长度后才确认这是翻页操作。 我 早期的设计中，图标翻转的效果下面还有一句作为噱头的话。如果你用手指拖动页面，会先浮现出图标，下面配上提示文字“再拖??”; 如果你继续拖动页面，图标会完整显示，下面的文字是：“再拖??再拖就是下一篇了哦～”，当用户拖到程序设定的长度，图标变红，然后就翻页了。 翻页提示的设计 实际的情况是这个拖动需要滑动的距离设计得太长