《牛壹周》设计过程揭秘.pdfVIP

《牛壹周》设计过程揭秘 2010 年 7月30号，《牛壹周》在 App Store 上架，截止到我写这篇 blog ，下载量破千，排名位列中国 地区免费程序 TOP 榜第 11位，新闻类第 2位。 几天前， Shawn 写了篇超有爱的 blog ――《牛壹周》顺产记，从开发的角度跟大家分享了《牛壹周 》的生产过程，比较适合程序员和开发者阅读；在这里我想写一写《牛壹周》设计过程，也许设计 师和产品经理们看了会更有共鸣。 iPad 出来不久，我们便觉得这样的神器简直就是为用户体验设计而生 —— 精致的显示，优秀的交互 ，简单的操作，让使用没有门槛，充满无限可能 —— 于是我们决定进军这个陌生的领域。 学习是第一步，于是有人开始看 Stanford 的视频教程，有人开始安装 xCode ，有人开始研究 HT ML5 ，而我，则开始学习苹果 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 低；