Tweetbot是Twitter最著名的iOS客户端之一，虽然是收费应用，但却有百万级的下载量和大量的簇拥者。Tweetbot的制作团队Tapbots是一家设计很有独特的机械风格，并靠其设计风格挣钱的公司。大家应该记得在我翻译的《触动人心》一书中，Josh也多次提到了Tapbots公司的产品：Weightbot、Convertbot、Pastebot，全部一致秉承了Tapbots公司的设计风格，尤其是Convertbot，当时能在转制工具满天飞的情况下，能突出重围，标新立异。

2011年初，Tapbots推出了Tweetbot，风靡至今，长盛不衰。在今年2月，Tapbots又推出了Tweetbot 2.0，让我们来看看这款经典的App的设计。

导航结构

我们知道，iPhone应用的主导航结构一般常见分为四种：

1. 平铺导航。比如“天气”应用，使用分页控件（小点），让用户左右滑动来查看不同的页面。
2. 标签栏（Tabbar）导航。比如我们常用的“App Store”应用，下方是五个标签，供用户点击切换页面场景。Tweetbot就是此类。
3. 列表式导航。比如“设置”应用，打开后是一个列表让你选择，以便Drill down。
4. 九宫格导航。比如Facebook上一版本和大众点评都是此类。打开后是类似iPhone主屏那样排列多个图标，每个图标代表一项功能。
5. 层叠式导航。从iPad上Twitter应用开始，设计优秀的应用慢慢开始尝试这种创新性的导航设计。大家最近看到的Path 2就是有类似此类的设计：从左侧可以拉出一个列表式导航，右边可以拉出朋友列表。比起其他的导航结构，这种导航结构更加接近真实的物理感。这种导航结构是最近几年随着iPhone的真实物理感的设计理念才开始流行起来的。

其他还有一些新颖的导航结构也都大多雷同。今年我们就不展开讲诉每种导航的优缺点了，改日再议吧。

很多应用的首页，都会结合多钟主导航结构，来完成导航功能。比如Path 2，首页实际上是列表式导航+层叠式导航的设计方式。（这种方式最近也用烂了，CocoaChina上都有源码了。）

再来看Tweetbot的首页，实际上是以标签栏为主的导航结构。（当然还包含了列表式导航。）大家知道，Tweetbot当时一举成名的其中一项创新设计，就是他的标签栏中，最后两个标签是可以自定义的。相比苹果标签栏多标签的自定义功能来讲，Tweetbot的设计显得巧妙许多。（苹果官方的标签栏只能放置5个标签。在标签多于5个的时候，会自动将最后一个标签变为“更多”，然后将剩下显示不完的标签项全部塞到“更多”里。如果你需要访问其他的标签，你需要点击到“更多”里，然后再选择相应标签。当然，苹果也提供了自定义标签功能，不过大多数用户都不知晓有这样的功能——点击到“更多”里，然后再点击右上角小小的“编辑”按钮，然后再进行拖拽操作。你可以打开你的手机里的iTunes，看看苹果是怎么做的。）

Tweetbot的标签栏最大突出的亮点就是最后两个标签长按会弹出自定义的标签项。这种方式即保留了传统标签栏的样式和交互方式，又巧妙地解决了标准标签栏功能不容易被发现，自定义不方便的问题。

值得另外一提的是Tweetbot的账户管理导航方式非常有意思，即结合了iPad上Popover控件的优势，又使用后退箭头，让用户再账户和设置页面进行详细管理。

消息系统

Tweetbot将消息分为模态和非模态两种消息方式。

非模态消息，即消息弹出后，用户还可以继续操作，无需去手动点击关闭。适合一般性的提醒，反馈。

上图可以看到，左边是成功提示，右边是错误提示。所有非模态提示消息从标题栏下方弹出。包括图标、标题、消息内容三个元素。

模态消息，即消息弹出后，会中断用户当前操作，让用户必须先完成消息确认才可以继续操作。一般用于严重错误或需要用户确认知道的重要通知。

点击反馈设计

Tweetbot几乎所有的点击都有反馈，包含了视觉反馈和声音反馈。

按钮点击

上图是普通按钮的正常（凸起）和按下（下凹）状态。

对于优秀的iPhone应用来说，每个可点击的目标都应该有按下状态的反馈设计。iPhone应用的设计理念就是真实的物理反馈。我们每天都说iPhone用户体验好用户体验好，但是为什么用户体验好，很多人只说得出“用得爽”。其实，iPhone上市时，和以往的手持设备在交互上最大的不同点就是采用了触摸，并且将所有的反馈设计，都尽量参照真实的物理世界中的反馈。例如列表滚动到底部会反弹，例如使用滑动开关而不是勾选框，例如页面翻转到背面的效果等等。所以在iOS乃至现代触屏应用的设计中，都要尽力去参考真实世界中的物理反馈。这就是为什么现在优秀的iOS应用中，常有皮质、纸质等纹理设计。

图标点击

对于按钮，我们大都知道要使用“凹下去”或“变色”来进行反馈。（当然，首选“凹下去”。因为按钮下凹是真实世界中的反馈。）但是有的时候，点击目标是个图标，Tweetbot是如何表现点击反馈的呢？

如上图，我们看到，Tweetbot，同时也是iPhone内置的应用，通常会使用这种外发光的方式来表示图标的点击反馈。就像是生活中的一个高科技产品上的一个平面按钮，按下就会发光。

动画

xCode中有着许多代码和设计工具能够帮助开发者们在iOS设备上实现流畅的动画。流畅的动画可以让用户跟随视线。而且同样在现实生活中，我们看到的物体都是动画呈现的，瞬移只出现在科幻电影里。

模态消息滑出界面

一头栽下，很有掉落的感觉。亮点！

发推时添加图片

点击图片后，Camera Roll向下滑出屏幕，然后选择的图片从右侧滑入，并替换“添加图片”按钮。

总结

Tweetbot是款设计优秀的应用。尤其在导航结构、反馈、动画和声音上有许多亮点。本文只对其中一二做了些阐述。推荐大家可以自己用用，会有不少发现。

译者注：
原文的作者为Windows Phone Design Studio的设计师，虽然话语啰嗦，但是能够感受到许多Windows Phone设计完善过程中的细节。重要的一释疑是业内对Windows Phone开发环境封闭的以讹传讹，至少从app设计角度，Windows Phone的心态是开放的。并致力于提升产品创造的团队效率。思维方式不限于Windows Phone，同样适用于其它平台的产品参与者。

–

这里有一个我在使用的Windows Phone app的设计过程。其中许多设计过程阶段是传统的，我尝试从Windows Phone app特别的视角来阐释。

这篇文章是关于end-to-end的过程，所以会保持其高视角，并在下面的文章里详细的探索每一个步骤。比如，下周我们会从理念与概念开始，关于讲故事（storytelling）、草图（Sketching）、故事板（storyboard）与低保真原型(low fidelity prototype)。这篇文章会是系列内容的轴线。但是并不确定会不会基于反馈重新定义（refine）某些阶段，以及增加更多的示例。

图表自下向上读……

Windows Phone设计过程与其它的网站、移动app或任何设计没有本质不同。所有的设计师重视设计过程，用他们自有的方式调整、完善设计，并改变适用于每一个项目。没有项目是相同的，因此非常重要的是以指南（guidelines）理解设计过程而不是规则（rules）。保持灵活性（flexible）。

理解“设计”，设计不是按快门（one-shot）这类活动。你不能凭借一次尝试既确定设计，而是像创作雕塑作品，有一个迭代过程。艺术家拿到一组大理石，他们不会从细节开始，如眉毛、指甲或者头发。而是第一步先塑造整体的感觉，主要的体感与大块。接着第二步定义更多的特性区块，如手臂、胸、头与腿。随后有第三步、第四部与第五步。达到刻画小细节的程度需要经过许多步骤。用户体验设计同理。你不能从细节开始，最终会让你自食其果。应用程序流程（Application Flow）需要在视觉设计（Visual Design）前定义。我看到过许多类似事情的发生，他们尝试跳过一些步骤走捷径，而缺乏设计探索（design exploration）最终得到的是随后项目中的暴怒。

应用主题（App Theme）

我们从应用主题开始。这个是第一个可能产生分歧的点。我只是知道应用主题对于创建接下来的阶段非常重要。我注意到当开始app设计过程我们通常有两个选择。1，已经有一个我们想做的、非常清晰的idea；2，我们有一个目标，基于现有的API与Web Service。但两个途径在我看来都是错的。如果你有一个清晰的idea，你知道你决定了自己与团队的解决方案，但还没有通过探索验证。如果你决定创建一个app基于现有的API或者Web Service，你会最变成另外一个Twitter、Yelp！或者Foursquare 客户端或者另一个从Yahoo获取数据的股票软件！金融或者另外一个从CNN获得内的RSS聚合器……从Marketplace上搜索CNN你就知道我正在说什么。即使这些app有好的体验。相信我，他们无法突围或者为用户做出贡献。不要想APIs或者RSS Feeds。想想用户体验。所以替代的思路是”哇哦……CNN的RSS Feed是可用利用的“ ”我们如何为用户在获得最新与关联且重要的新闻的体验做出贡献？”尽快思考这些，越早为自己与团队打开一个新世界的探索。不再是RSS阅读器，现在你有一个更高的目标，史诗般的任务来帮助用户获得更多关联且重要的新闻。因为对象是宽广的，解决方案是不具体的，这才是想要的点。你保持开放，所以你会探索并拥有革新的idea。替代基于APIs的思考，而基于体验思考，如跑步体验、进餐体验、航行体验，询问自己与团队，你如何为你的用户做出贡献提升体验。注意这并不是必要地意味着解决全部的体验……它意味着只是解决X或Y部分的体验，用户趋向难以发现的地方或者你看到一个机会可以帮助用户发挥全部潜能。在随后的开发过程中，你会选择你会选择API或RSS Feed从任何源，但是起点一定不是技术解决方案。最流行的Twitter或Foursquare客户端都是成功的因为它们将体验放在第一位——而不是API。

现在如果你已经有客户端的app服务于特定的产品服务，或你正在移植iPhone或Android app到Windows Phone，请做好准备，针对主题进行重新定义（refine）。在许多的情况下，受制于预算或委托人，你需要直接跳到信息架构（Information architecture）阶段。然而真诚地说，即便由委托人雇佣你移植一个iPhone/Android app到Windows Phone，请依然做好主题、理念与信息架构的重定义准备。事实上这不是一个坏消息，一旦你进入了信息架构与交互设计（Interation Design）阶段，会得到最好的Metro设计语言：Pivots、Panoramas、App Bar、List View、Typography、布局与动画。当从其它平台移植app，你的工作会变成：1，理解这些平台上的当前信息架构，并用Metro翻译它们到正确的屏幕、内容视图与导航。基本的事情是理解当从iPhone与Android迁移时，你不能迁移UI。你迁移的信息架构。通过思考与实践，你会预防错误的转化过程……如当人们尝试从iPhone迁移返回按钮（通常是屏幕左上角的按钮）到Windows Phone……你在Windows Phone上不需要一个屏幕上的返回按钮，因为我们有一个硬件的返回按钮。所以，遵循思考“迁移IA”比“迁移UI”要更合适。

理念与概念（Ideation & Concept）

现在你有一个主题或者任务，到了为其产生idea的时间~理念与概念阶段非常有趣！——就像是在玩游戏。头脑风暴（Brain storming）的游戏，草图游戏讲与讲故事的游戏。在这个部分有三个关键阶段：1，头脑风暴；2，探索；3，合并（Consolidation）。概况来说，在头脑风暴阶段你产生了大量的idea，在探索阶段你详细分析与研究许多idea（但不是全部），在合并阶段你决定哪些idea会继续向前变成app一部分。只有少数的idea会存活。

完全自由的头脑风暴

这个阶段的目标是产生关联任务的大量idea，如“贡献酒店预订的体验”。想象力（Imagination）、妄想（delusion）与古怪（craziness）是在这个点上都是好的技巧。让自己有玩的心态，思路跳出思维框架。有需多具体的头脑风暴练习如Subject+Verbs+Objects与扩展思路的Alternate Worlds、Impossible Scenarios与In Other‘s Shoes。我们会在下一篇文章讨论所提到的技术。这些游戏你可以与团队一起参与，如果你是独立开发者你可以跟朋友一起参与。这个阶段的目标不是强迫你疑虑“你如何build或编写这个或那个”。也不是关于这些东东长什么样。它是关于产生idea的。在接下来的几个阶段，这些idea会落地执行。后面，就像我们知道的，有百万个非常好的idea，但是只有一个或者两个会被恰当执行，并且成功。

探索分析/审查/测试（Exploration Dissect/Inspect/Test Ideas）

在探索阶段你会得到头脑风暴中脱颖而出的idea，并需要了解更多关于这些idea的内容。你可以通过分析、审查与测试来达到目的。这个点idea刚刚出生，它们就是孩子，没有完全的发展或成熟。然而这些idea只是头脑风暴的一部分，也许许多疯狂的idea在头脑风暴过程中已经灭了——但是有一些依然存在。你可以肯定会发现你或团队中其它人会坚信、接受并深深爱上这些idea——他们的孩子。我冒险地说这不是好事情，但同时，你需要爱上已经确定的idea，这样你就可以把其它idea推得远远儿的。有些时候idea需要发展来完全的证明。如果你太快地放弃了一个idea，也许你会失去一个好的机会。幸运的是这个阶段我们有4个非常有用的工具，允许我们探索我们的idea并发现优秀的种子：草图、故事板、简易原型与讲故事。这些工具帮助开发人员与设计人员针对idea进行测试。

拥有草图能力可以帮助你维持更多的抽象概念。故事板可以帮助你像接近皮克斯或梦工厂动画师一样讲故事。你使用手绘与故事板展现idea的用户体验情景，如何通过app来提供帮助与做出贡献。这是一个可视化的方式。原型是一个全新世界可以探索，当前重心在简易原型。这里有几种方式：一个是通过纸张、便条、卡片与胶带建立模拟原型。你可以通过手动粘贴到画布上测试情景（scenarios） 来传达交互。这类简易模型需要一个向导与测试用户。这听起来像是落伍的活动。但是它真的不是……它是非常严肃的。你会惊讶，你能在一张简易原型上用15~60分钟而不需要花一分钱，就可以收到许多反馈。在进一级的设计过程阶段不会使用简易原型，但在这个点，这是最佳选择。另外一个做简易原型的方式是使用Expression Blend（或者是Powerpoint或者其它的交互工具）。这个是Design Studio的Jared Potter第一次向我展示的复合数模技术。简单的说，你在纸上画草图、拍照、载入图像到Expression Blend，在头部的可点击区域增加透明按钮并关联导航栏。Done！他称这个是15分钟简易原型技术，我们会在下一篇文章中讲得更多。

整合产生决策 （Consolidation Make Decisions）
从头脑风暴开始得到许多idea，经历自己与团队的探索……在这里需要整合，非常好的idea会脱颖而出。这是一个决定哪一个idea会进入app的过程。有不同的练习会帮助你的团队缩减列表与基于优先级排序列表。这里的目标是移除尽可能多的不明确信息。这时，idea比起概念阶段进一步进化，并引发更多的用户情景（user scenarios）或者信息情景（information scenarios）。你需要带到下一个阶段的是一个基于优先级的情景列表。

信息架构（Information Architecture）

信息架构阶段的目标是定义信息、任务与彼此之间的关系。用户所拥有的数字体验：信息与信息利用的潜力——使用信息来帮助决策、获得关于某些事情的知识、产生信息。

信息架构是一个完整的学科。信息架构的目标是制定信息规则。

在理念与概念阶段产生的用户情景包括不定型的信息，如名字、日期、价格、图像、温度范围-在信息架构阶段你会带着不定型的信息并传递为结构化的信息。一次尝试是不可能完成的，它需要经历多个过程。

我们有两个非常有用的工具可以帮助我们定义信息框架：应用程序流程表单（Application Flow charts）与低保真原型（Low Fidelity Prototyping）。

所以在信息架构进行第一次尝试，并通过创建Flow charts进行测试。这里有不同成熟度等级，主要是从任务流程到具体屏幕+内容视图+导航表单。记得经典软件工程的Flow charts吗？这就是app flow charts，它只是一个可视化术语，我们专注在用户流程（user flow）、体验（experience）与交互设计（Interaction design）。一旦你拿到一个flow chart，你就可以尝试讲述用户情景（user scenarios）的故事。你会获得反馈与idea，用来重定义信息架构，并返回完善AI文档。这时你可以反复通过创建较高仿真的flow chart进行测试。flow charts渐渐地变得详细，从简单的任务flow到屏幕展示内容视图、导航。我不称之为高端的flow charts线框图（wireframes），确切的说是低保真框架。

另外一个工具是低保真原型（low fidelity prototypes）。在这个点纸质原型依然有用，因为低成本。无论如何，flow charts会渐渐地更高保真。你需要打印这些app flow chart并把类似的放在一起（不再是草稿、而是打印材料）或使用Jared在Expression Blend的原型技术，用拍摄的原型图像替代，把app flow程序呈现在屏幕上。

在最后你会有一个独立的IA文档，包括组织化的信息、可靠的成组flow charts与基于app flow的低保真原型。

我注意到的一件事情是，创建Windows Phone Design Process chart后，它在IA文档接近35%的高度，占有同样高度的是Interaction Design（下一阶段）。这些chart不代表在项目中占有同样的时间，但是我要说它着实正确的思考了IA应有的时间。如果你明确IA，会更加游刃有余。

最近的几个星期，我们有一篇特别的文章会关于Windows Phone apps的信息框架。

交互设计（Interaction Design）

我们已经定义了信息架构，也就是说目标用户可以使用这些信息。现在我们开始针对性制作用户界面。

交互设计是什么：创建一组用户界面与用户体验元素，用来验证良好的信息架构与用户完成信息关联的任务。我们希望在这个阶段达到的效果是传递信息与任务最大化的潜力发生。即使IA可能是刚刚完善，如果交互设计不能完全执行，这时信息中发生的事情就不会完全正确地在app中体现、用户也不能完成他们想要的任务。

依照我的观点，交互设计默认是信息与任务的过滤器（filter）。它定义的不是信息也不是任务，而是一个工具。交互设计（或用户界面）是在用户与信息之间的中间人。用其它的方式描述，用户界面（交互设计的最终形式）应该是从有罪直到证明无罪，我想这个概念关联了许多Metro法则要点：信息是展示的核心，不是用户界面。它是决定一个好（坏）设计定义的重要因素，无关用户界面层是薄、无形或者笨重。我们不谈论视觉设计，只是交互设计：用户基于现在发生的关系如何面对信息与任务交互。

如果我们没有一个Windows Phone Metro设计语言可用，这时我们需要从零开始弄明白交互隐喻。在未来的文章里我会谈论如何推动Metro，并给出一些idea与如何基于Metro革新，这篇文章里会重点定义交互设计与开箱即用（out-of-box）的Windows Phone Metro设计语言。

设计模式（Design Patterns），可靠的帮助翻译信息架构到Metro控件。信息架构与任务会赋予Pivots、Pages与Panoramas以生命。信息层与架构会赋予内容视图（Content Views）以生命。信息与信息、任务与任务、信息与任务的关系会赋予导航栏（Navigation）以生命。IA文档的所有内容会翻译到明确的Windows Phone控件中。最后不会出现歧义。

让我们回顾，基于IA文档，选择Windows Phone已有的设计模式，例如：search、maps、email、playlists或people hub的Contact cards。这时，如你没有找到一个完整的设计模式，或者根本不能满足你的IA需求。那么你可以定制一个接近或者创建全新的设计模式。当定制或创建自有设计模式，你有三个好的工具：1，Windows Phone设计网格；2，不同尺寸标准的Typography来传达结构化信息；3，Metro控件。当然，这三个不是所有你可以可用的武器，但它们是最基本的。相信Windows Phone用户体验指导（UX Guidelines）会cover到你的安排。

我提议通过设计模式来设计Windows Phone app。这不是唯一的设计Windows Phone Metro app的方式。像我们前面提到的，我们会在随后的文章里谈论关于推动Metro的设计模式，但在这篇文章重心在Windows Phone Metro语言设计。如果我们明确，从我的观点，我们可以创建自有的设计模式，可能一点都不像Metro控件库只是隐喻接近（但仍然基于Metro设计法则）。

你可以在Photoshop format（ListView_PSD.psd）找到许多列表视图设计模式，全景板图（Panorama_PSD.psd）以及其它控件。我们会延伸更多的内容。

经过选择设计模式，定制并创建设计模式，你基本上设计了app。听起来很简单！其实不是，事实上只是选择了正确的设计模式，定制了它们的工作区块。我发现Windows Phone设计工作室投入了超过2年加工与展开Windows Phone体验与UI。设计模式是非常灵活与广泛的。经过在Windows Phone Design Day回顾将近200个app，我相信它们当中90%使用已有的设计模式与定制设计模式。当我开始我在设计工作室的工作，我对Metro并不熟悉，我的印象是它很漂亮但所有app都看起来很像。现在我在这里写给你的是关于再利用（re-using）已有的设计模式设计整个app做出改变？是的！我印象里6个月前，在Windows Phone中所有的都是Pivot与Panorama时代。但是我发现经过6个月，许多Windows Phone app比仅使用一个Pivot或Panorama更丰富。所有的事情是相通的。这三种类型的屏幕依次主导了app中无限量布局的可能性。这是app之间区别的地方。定制Panorama面板的可能性、Pivot页面的无限量。Windows Phone app使用的Metro设计语言可以非常丰富与独特。像“如果背景不是黑色就不是Metro”的迷信不是真的。请查看Mike K的这篇文章或者Core77的Windows Phone设计辩论。

其中一件重要的事情是以不同的格式生产大量设计模式：Photoshop、Illustrator、Expression Design与XAML。现在，市面上没有大量的设计模式，所以推荐使用手机当前的内置，同时我们这边也在大量工作更多的格式将会投入使用。

返回开始，设计模式的选择、定制与创造阶段会呈现在线框图（Wireframes）。线框图是灰度图。不是色彩的！没有品牌……也没有panorama背景！这些线框图理想情况下是由Expression Design、Visio、Photoshop与Illustrator创建（提醒我们应该提供Visio格式的设计模式）。

我们已经准备转移到下一个交互设计阶段：定义动画风格与UI控件规格。实际上，这些概念会跟随之前选择的设计模式。最后，设计模式在这个语境（context）是交互设计模式，而不只是视觉设计模式。

动画风格会帮助我们基于线框图指明，会有动画出现在从A到B屏幕的转化过程（旋转风格），何时显示列表项目的详细内容（飞出飞入Continuum）。动画是Windows Phone app的重要部分，所以我们设计使用的动画风格的要点规格时会非常挑剔。与此同时，UI控件规格同样需要基于线框图，所以开发人员知道当创建一个app时，键盘类型需要基于输入的用户体验。或者当有通知（notifications），我们需要显示内容A、B、C通知消息内容的规则，通知在哪里会带你进入app。对于Loaders会发生同样的事情……我们需要一个%的loader还是一个等待光标？

在这个阶段的最后，针对完整的app，会有可靠的一组线框图，由开箱即用的定制与自主创建的设计模式驱动。这些线框图会包括动画风格与UI控件规格。准备下一阶段：视觉设计！

视觉设计（Visual Design）

目前为止，你会想：什么，到最后才有视觉设计？！。像我之前提到的，设计过程（任何事物）不是线性的。要是像我一样，我会开启Expression Design（你可能会使用Photoshop或Illustrator）我会把额外的事情丢一边并开始工作，我喜欢这样，用我喜欢的工具并开始app设计。没有草稿、没有线框图，只是漂亮或纯粹的视觉震撼！——许多视觉设计师想的就是这个味儿（就像工程师直接跳到Visual Studio开始敲代码！）

我必须承认比起一个交互设计师我更是一个视觉设计师。我肯定会依靠它看起来如何引导自己，所以我在项目的初期被视觉设计所吸引，但是我必须控制自己并记住有一个设计过程如何我跳过了，我的设计最终会非常漂亮但是不能忠实地表现app如何工作的信息架构与交换设计需求。也就是说，我们知道看起来受欢迎与我们都做过在过程的早期被客户询问发送给他们app的设计。明确开始的视觉设计是徒劳无功（虽然有些客户喜欢说要的就是这个）但是更像是“售卖设计”。

尽管我们喜欢信息架构与交互设计，为用户、商业决策制定者或市场管理者，然而一图胜于千张AI（an image is worth a 1000 pages of IA）。一组漂亮的Windows Phone app会帮助人们购买这个app与产生更多购买，给团队boss的进度报告会看起来漂亮。其实就是这样。所以当IA没有完全确定或交互设计被定义时，视觉设计引导人们在项目早期，最好的想象并最终实现。许多次人们会想这个愿景是最终的产品。但事实不是，这只是试图展示了我们方向在哪里。问题既是团队或客户信奉这个早期的视觉设计做为方向。期望应该被规定，这样在随后项目中就不会失望，因为它后于IA与交互设计，你可以完全的认识到视觉设计。

所以，现在我们有IA与交互设计明确时间来做许多有趣的视觉设计活动，像定义调色板（color palette），设计自定义图标、背景、整合品牌到我们的体验与设计live tiles。

你是否知道有一个有关设计的经典对话关于是否开发人员应该做设计？自始至终，对于这点我认为一个开发人员即使没有正式在设计方面训练可以成功的做到。信息架构是一个系统化与结构、逻辑驱动的学科。我个人认为开发人员有正确的思维模式明确IA。交互设计需要更多的体验，这是交互设计在过程中擅长的地方，但是一个开发人员沿着设计模式，我想他肯定可以做正确。这个阶段的挑战在于当前的设计模式缺乏与恰当的工具来实现方法、挑战，这增加对没有正式设计训练的人们的困难程度。最后，视觉设计阶段，我想你最好雇佣训练有素的图形视觉设计师。虽然有相当数量的设计教程与有版权的图标、图像与其它元素，但它与雇佣一个训练有素的设计师绝不一样。我希望我们可以在后面的文章，提供给开发人员许多实用的技巧，将基于素材的视觉设计元素变得更好。

Redlines and Greenlines

什么是Redlines？什么又是greenlines？！简单的问题。他们是交互体验的蓝图。就像是建筑的蓝图，你可以在上面看到楼梯平面图、侧视图、建筑正面，通过标注尺寸，门有多大、窗户有多大、墙的厚度、水管通道经过的地方、电源出口坐标、楼梯有多高、楼梯采用的材质、涂料颜色等等……在交互设计我们同样有我们的蓝图称作红线。我不确定为什么它们是红色而不是品红……但是我们想是因为红色是经常看到的颜色，容易跳出来，所以UI标识尺寸容易读。屏幕上的redlines显示了一个app不同屏幕，顶部不同成串的测量。这些数字定义了外边距（margin）、内边距（padding）、元素的大小与短暂元素如状态栏。为什么我们需要redlines？我通过Expression Blend就可以解决问题！

很久前在设计过程中我们没有Expression Blend。我知道这会引发一个很长的讨论，所以我在个系列保留了对这个设计工具的细节。我会说不管怎样，对于设计师控制UI到不论谁拿到XAML格式的UI，redlines都是最好的表现技巧。这个人可能叫做整合者，另外一个用XAML或Blend的设计师或开发人员。不论是什么情况，拿到设计与设计app的人不是同一个人。团队仍然可以工作。所以这个人需要一个方式用XAML产生UI与redlines帮助实现。通过redlines就没有歧义，但是如果这个按钮是30×150像素，距离屏幕左边24像素，距离顶部427像素，这时这些尺寸就是位置。不需要讨论。在过去，没有redlines，设计师会设计网站并转换JPG素材（不要使用JPG、只用PNG、没有压缩）给其他人产生HTML与CSS。这个过程会破坏设计，结果会与最初想象不同。Redlines表现了“契约”，一个当事人双方都同意写好的文档！我们会在未来的文章讨论更多的redlines与如何创建。

Greenlines是什么？Windows Phone设计工作室定义为触摸区域。需要按钮会说，10像素的直径，但是它们的点击区域会是20像素（便于用户点击）。Greenlines指明这些点击区域，不论它们匹配的物体大小。Greenlines与Redlines传递不同的信息。

最后（The End）

这个是一个高视角的流程总览，在下面的一周，我们会从细节开始。

下一篇： 理念与概念 ideation&Concept

讨论头脑风暴（brainstorming）方法，草图（sketching）、简易原型（paper prototyping）与讲故事（storytelling）。

在Stockholm的Windows Phone Design Day期间的Q&A环节，Stockholm本地的交互设计师Petter Sifver提了一个问题，关于Windows Phone app bar上的icon，想知道为什么icon的周围会有圆圈。Petter友好地在其博客上为分享了他围绕设计阐述的观点。

–

我们看到的是Button，而不是icon。——从字面上。在这些Button内部都有小icon。微软提供的开箱即用（out-of-the-box）的Metro设计语言有一致性接近“button like”（可意会的按钮）控件。不论它是一个Push Button, Toggle Button, Command Button或者媒体播放Buttons或者icon button——button在Windows Phone的Metro语言里有一个边框，来定义边界。所以icon buttons在app bar是朴素地遵循了同样的语言——我理解它们可能造成困惑的原因是，我注意到当我们谈论icon时，我们会经常表述在圆圈里的内容并称它们是icons。当我们谈论icon我们会表述它们像icon（没有圆圈——即便如此，99%的它们被当icon buttons来使用）。

Saliency概念是正确的，而在我们的Metro button设计语言中有例外设计。
这样做是在保持一致性。称呼他们button或icon从字面看起来很接近，但是有着非常大的区别。我们使用button用来交互，使用icon传达一个单项的信息。例如，在电话应用在call history list界面中紧挨着calls使用带有电话icon的button——它们是button，不是icon。

另外一个使用icon buttons例子是在文字消息应用——当你希望增加一个新的联系人并发送一条文字消息，你得到一个带有加号icon的小button，同样的，它是一个button——不只是一个icon。你会发现我们不会使用icon作为button。它已经通过加号icon吸引了人去使用——我知道我被建议了。回到开始，正确的接近windows Phone的Metro设计是使用icon button。

现在我们看一下我们如何使用icon。例如在状态栏中，它们是确确实实的通知icon，并且没有使用圆圈（它们不是button）。

我们使用icon做为图形，它们提供给用户单项的信息（它们是不可交互的，因此不是button）。例如在电子邮件应用我们使用小icon（不是button）与用户交流。当有附件在一封邮件里，这时它会成为高优先级邮件（标记）。

所有这些，我希望明确，我们在Windows Phone Design Day所谈轮到——Metro在做两件事情：Metro设计法则与Metro设计语言。Metro法则是设计支撑。Metro设计语言建立在法则之上，是在实体UI元素、动画、排版、构图与其它交互方向中的证明途径。

Metro设计语言由三件事情所定义：Windows Phone的native应用（邮箱应用、文字消息应用、people hub、本地搜索等等）；第二，Windows Phone UX Guidelines；第三，控件库与其它Windows Phone SDK & Silverlight Toolkit的可用资源（所有的三项彼此之间会保持一致性）。开发人员与设计人员可以使用Metro设计语言，这会成功地为Windows Phone建立精巧美观、引人注目与一致性的体验。

Metro法则是优先的，它凌驾于任何语言，所以设计人员可用自由的探索法则，并且通过非主流的方式被你所证明。我们也乐意看到这些事情发生。Metro原则允许无限的探索与进化。这里我们给一些思路…从Swiss Design Style的课程中读一些文章。这描述了许多Swiss设计背后的理念（Metro的根源在它，也可以称为International Typographic Style）——阅读其中的海报与印刷媒体设计。然而，许多这些海报、设计与Metro设计语言并不相像，但是这不意味着做为一个设计人员不能探索其它的表达法则的途径。

情绪版这种方法在国外的应用已经有一定的历史了，它诞生于上世纪的非信息时代，通常参与者被要求从日常的报刊杂志中挑选出符合“某种心情意境或关键词”的图片，把图片减下来，然后粘贴在一起。但时代在变，如今我们正经历着信息爆炸的网络时代——google、百度各种图片搜索引擎的进入了我们的生活；Shutter Stock、全景图等国内外专业图片素材网站的异军崛起——这不得不让我思考，“情绪版”这种方法是不是也能感受一下党中央的号召，“与时俱进”一下呢？

在今年10月份的安卓客户端设计研究的项目中，我们组织用户参与尝试了这个研究方法，并且对该方法的操作实施细节与分析过程进行了一些小小的改良。希望通过这边文章，与大家分享一下整个方法的流程。

1 传统意义上，情绪版的定义和意义

MOOD BOARD（情绪版），是指对要设计的产品以及相关主题方向的的色彩，图片，影像或其他材料的收集，从而引起某些情绪反应， 以此作为设计方向或者是形式的参考。帮助设计师明确视觉设计需求，用于提取配色方案、视觉风格、质感材质，以指导视觉设计，为设计师提供灵感。

2 传统情绪版的操作方法

2.1 首先，综合用户研究结果、品牌/营销策略、内部讨论等方式明确体验关键词，可以得出体验关键词（Experience Keywords）。通常，这也会是一个商业决定。

2.2 其次，可邀请用户、设计人员或决策层参与一段时间的素材收集工作。通常会从日常接触的报刊杂志中选取并粘贴到一起。

2.3 再次，会针对每个人的情绪版收集起来，配合以定性的访谈，了解选择图片的原因，挖掘更多背后的故事和细节。

2.4 最后，将素材图按照关键词聚类，提取色彩、配色方案、机理材质等特征，作为最后的视觉风格的产出物。

3 改良版MOOD BOARD

在安卓客户端视觉风格研究中所尝试的方法流程——

3.1 第一步，原生关键词。

与传统操作方法（上一段所介绍的2.1）没有差异。

3.2 第二步，衍生关键词。

在这个研究中，我们对传统情绪版流程进行了一些改变，允许参与者使用图片搜索引擎和素材网站查找图片的。但是，如果仅通过单纯对原生关键词的搜索，很容易导致不同参与者提供的图片素材出现同质化的问题。所以，在搜索图片之前，插入了“衍生关键词”这个步骤。我们要求参与者首先头脑风暴画出关键词的思维导图（如下图）。一方面，合理地引导调研对象发散思路，另一方面，也在过程中深挖原生关键词在他们心中的定义。

衍生关键词诞生访谈：

• 自由发散问题——看到“简洁”你想到了什么？
• 引导发散问题——如果“简洁”是一种颜色，你觉得是什么？为什么？如果“简洁”是一种食物，你觉得是什么？为什么？如果“简洁”是……

3.3 第三步，图片搜索，提取图片生成情绪版。

在这阶段，要求用户使用“原生关键词”和“衍射关键词”，通过网络渠道，收集了大量的对应的素材图并配合定性访谈。

3.4 第四步，衍生关键词的分析——分维诠释

在生成情绪版的同时，用研将所有“衍生关键词”按照三个维度去分类整理。这个过程的目的是帮助项目组成员从用户的角度去理解“抽象关键词”的“具象诠释”。所有的关键词可按照以下三个维度分类——

• 视觉映射
• 心境映射
• 物化映射

3.5 第五步，对情绪版进行“色彩分析”和“质感分析”

很多传统的情绪版调研方法可能在情绪版生成后就结束了，这种做法很可能导致研究和最后的设计产出的脱节。因为，设计者们往往停留在自己的主观消化和感触中，再开展设计，缺少较客观的度量方法。在这次的调研中，我们最终生成的产出物之一是相应的配色方案。

电子化的情绪版对后期的“色彩分析”也是比较方便。

一方面，我们将情绪版在PS中进行高斯模糊，再使用颜色滴管提取大色块。当然，现在已经有很多用户配色方案提取的网站和软件，这样更事半功倍。

另一方面，结合衍生关键词的分析结果，讲情绪版中较高频物化纹理和材质提取出来。

NUI不是一个新名词。
只是经历近年的一些新产品，有了更贴切的感受。
特别是消费电子终端界面CLI、GUI、NUI的变化。在桌面端，对象通常是显示固定的屏幕，设计师专注于键鼠驱动下的视觉效果。到了移动端，拥有更多传感器与交互方式，便携使得移动设备不限时空，传统专注于固定场景与操作的设计思路不合时宜。
NUI的概念恰好touch到这一变化（并不局限于消费移动设备）。
设计亦不存在创新，只是发现。

社区 http://nuigroup.com/forums
Wikipedia NUI定义 http://en.wikipedia.org/wiki/Natural_User_Interface
自然用户界面自然在哪儿 http://blog.sina.com.cn/s/blog_4caedc7a0102dzpk.html
NUI视频集(proxy)http://vimeo.com/channels/nui

概念

“自然用户界面”（NUI）是下一个的人机交互（MMI/HCI）的模式转变。基于传统的人类本能的交互模式，如触觉、视觉、声音、运动和较高的认知功能，如表达、理解和记忆。自然用户界面的目的，是利用了一种沟通方式，更广泛的权力，利用有广泛技能的人才，通过传统的物理相互作用收益。

笔记

作为一个学科；NUI目标在于探索研究受到自然启发的计算技术，另一层面，尝试根据信息处理与交互模型理解我们周围的世界。通过它们的学习我们复制真实世界的环境，利用新兴科技与传感技术，获得在物理与数字客体间更精确与优化的交互。

从经验来定义自然交互：人们自然地沟通是经由手势、表情、运动，通过观察与操作物理客体来探索世界；主要假设是他们应该被允许与技术的交互，如同与日常真实世界的交互。自然用户界面的特色是一种新的建筑美学，关于如何在物理空间伴随人类感官，迁移计算到真实世界、创建沉浸式体验。

Shneiderman（1983）解释了用户控制的核心思想，包括：

可视的客体与操作
迅速的、可逆的、渐增操作
通过直接、使人感兴趣的可视化操作，替代复杂的命令语言语法

相关的关键字与领域

Open Source
开源
Cognitive Science
认知科学
Human Computer Interaction
人机交互
Computer Vision
计算机视觉
Linguistics
语言学
Multi-Touch
多点触控
Design (…)
设计
Artificial Intelligence
人工智能
Brain Hacks
Human Factors
人机工程
Interaction Design
交互设计
Usability
可用性
Information Visualization
信息可视化
DIY (Do it yourself)
DIT (Do it together)
Psychology
心理学
Philosophy
哲学
Physics
物理学
Natural Computation (http://en.wikipedia.org/wiki/Natural_computation)
自然计算

相关的人体传感技术

Voice recognition
声音识别
Finger identification
手指触摸鉴定
Gaze vector
Facial expression
面部表情
Handheld device movement
手持设备动作
Biometrics (body temp, heart rate, skin impedance, pupil size)
生物测定（体温、心率、皮肤抗阻、瞳孔大小）

相关的产品

Apple iPhone
Microsoft Surface
Microsoft Natal
Microsoft Roundtable
Microsoft Windows 7
Amazon Kindle
Reactable
Pulse Pen
Nintendo Wii

原文自http://www.mdong.org/?p=2092

女性消费分享类社区这段时间如火如荼。而在移动互联网方面，有两大潮流，第一个是女性用户的手持设备大量转向iPhone和Android，碎片时间开始被移动设备应用所占据，第二个是手机购物开始兴起，支付宝这几年的移动交易额成倍增长。这两大潮流使得女性消费分享类社区不断移动化。本人在地铁上观察女性移动用户使用手机的情况，除了游戏和微博，剩下大多数都在手机上逛女性消费分享类社区。

目前国内女性消费分享类社区手机应用做得比较好的有美丽说和蘑菇街两家。我注意到美丽说的iOS客户端推出比较早，蘑菇街也是紧随其后。两款应用这段时间的产品设计有了长足的进步，在App Store上，社交类排名都在20名之内，蘑菇街甚至一度冲到了社交类第4名。这几天网上两家因客户端的问题吵得很热闹（这里和这里），我也来凑个热闹，单从产品和体验的角度拿这两款应用做个对比，从中相信各位能在真实案例的解析中学到一些。 我虽和蘑菇街的创始人曾一同共事过一段时间，但无论表扬、批评都应本着专业的角度，对事不对人嘛，呵呵。

vs

产品结构

蘑菇街和美丽说都各有五个标签，功能也基本类似：

首页

vs
蘑菇街的“首页”（左）提供了大Banner横幅，横幅下面给出了不同的分类以便用户选择看衣服、鞋子、包包、饰品或是其他分类。

而美丽说的“首页”（右）却大相径庭，列出的是类似新浪微博的时间线展示。

相比之下，我们可以看出，蘑菇街的想法更倾向于媒体，输出内容。美丽说的思路更倾向于社区，用户自己关注的用户中获得信息。

事实上，消费分享社区的本质更是媒体而不是社区。蘑菇街的浏览方式能给用户尤其是新用户最快获得更多精选内容。也许是美丽说也了解到这个缺点，所以它：

• 让新用户默认关注某些用户。
• 在首页的左上角加入了“封面”按钮，点进去是和蘑菇街首页同样的设计。

可惜这个“封面”页面有点鸡肋：

1. 上面的占据半个屏幕的四个Banner全都是商业目标导向。并不符合用户目标。而蘑菇街相应的Banner是编辑精选的期刊，供用户阅读观看。
2. 这个页面的导航位置相当尴尬。“封面”和“首页”首页有什么差别？为什么应用打开是“首页”不是“封面”？为什么“封面”在标题栏上表现是属于“首页”标签，而点击进去后，标签栏却全部选中？

逛街/热门

vs

蘑菇街的“逛街”和美丽说的“热门”一样，都是用类似Pinterest的图片墙列表方式，将最热、最新的图展示出来。但美丽说多了一条广告条，建议这里可以不用再多此一举。

我的/我

vs

“我（的）”中相当于个人空间，如图，里面集成了和个人账户有关所有信息和设置项。美丽说在这里放上了个人头像的大图，这样个人空间更有“个人”的感觉。而蘑菇街的入口排布更加合理，更多使用标准或类标准的iPhone控件，各位可以很容易发现，蘑菇街的方式很容易让用户找到入口，具有更强的可读性和可用性。而美丽说此处强调自己发过的分享是不符合用户使用场景的。想想用户来个人中心，想来看自己发的分享，这种情况能有多少？

喜欢（蘑菇街）

“我的喜欢”类似收藏夹，里面列出了所有收藏的物件。这个功能点如果用户场景不确定的话，可以建议不用。大多数用户应该是在手机上进行收藏，后续能够在网站上购买。

拍照

vs

“拍照”即发表新分享的途径。

大家看到左边是蘑菇街的界面，使用和Twitter、新浪微博等应用熟悉的界面。下半部分很巧妙地将键盘区域暂时替换成拍照和相册选择选项。右边是美丽说的界面，美丽说更倾向于每页完成一件事，各有千秋，可是页面上文案太多！试想，谁会看这一堆有五种不同字体大小的文案，更别说在公车、地铁上了。而且最后“Let’s Go”的引导很奇怪啊，用户到这个界面，为何又让她们马上去点“一起拍”呢？

拍照后的页面，两个应用差别也很大：

vs

蘑菇街（左）保持了原有界面不变，让用户可选照片分类并立即输入文字；美丽说（右）进入了照片美化界面。虽然美丽说提供了当下时髦的照片美化功能，但翻看了一下美丽说用户上传的图片，绝大多数用户没有使用应用提供的美化功能。也就是说，美丽说的美化流程对大多数用户来说是无用的，却被硬生生地放入了发表分享的流程中，这无疑会降低发表分享的体验。其实每款应用都像是瑞士军刀里的一个工具，用户用完就会关闭，没有必要把自己的应用设计成无所不能的航空母舰，否则到头来可能每一项功能都无法和其他专业应用比拼，而且界面却还更加复杂。

一起拍（美丽说）

一起拍是美丽说特有的功能。致力于打造一个主题拍照社区。这种做法很可取，有的时候用户并不知道她想要什么，或可以做什么。通过这样的产品功能，可以引导用户开始进行有主题的拍照，最后对拍照产生可预期的良性反馈，最后激活用户贡献内容。

交互细节

我们知道，交互设计细节很重要，良好的细节能给用户带来WOW的感觉。一款应用导航设计得好，信息设计得合理，可以称为好应用。但是优秀的应用一定在交互的细节上有所突破。这里再补充提一下两款应用交互细节上做得有好有坏的地方。

蘑菇街点击标签栏标签

蘑菇街点击标签栏标签按钮的时候有一个水波抖动的动画，相当可爱。由于截图不方便，还请喜欢学习应用设计的同学可以亲自体验看看。

点击进入详情页的页面切换动画

vs

两个应用进入详情页的方式有所不同，蘑菇街详情页是由右向左滑入，美丽说的详情页是由下至上滑入。

一般来说，iPhone应用的习惯，Drill-down的页面切换（也就是由父级进入子级页面）使用由右向左滑入的方式（也就是蘑菇街使用的方式）。比如内置的“设置”应用，点击了任何一个分类，分类设置页面会从右侧滑入，比如“联系人”应用也是如此。

而美丽说使用的由下向上滑入一般用于马上完成后就退出的模态页面。比如“邮件”应用中，你选择了一封邮件需要移动，会从下滑出邮箱选择页面。并且，在由下滑出的页面中，标题栏上的离开按钮是不会使用箭头的，文案一般使用“完成”、“取消”、“保存”等矩形按钮。

我们可以知道，这个场景下，滑入的页面应当属于Drill-down。所以该处使用蘑菇街所使用的从右滑入才是较为准确的切换动画。

消息提醒

我们知道，在应用设计过程中，应该尽量减少弹窗的使用。一般只有紧急情况或必须让用户做决策的情况才使用弹窗。蘑菇街在这点控制的比较好。而美丽说应用在多处都会弹窗。比如在拍照分享界面：

这样会打断用户撰写分享的过程。另外，美丽说过多地方充斥着Badge（标记）和推送，在已浏览为主的应用中，过多Badge会影响正常的浏览体验。

新手引导

新手引导很重要！而且，更重要的是它很难设计。我们是自己的产品设计者，每天无限多次使用我们自己设计的产品。而各位注意“您不是您的用户”，用户在使用我们产品的时候，使用方式可能和我们的预期大相径庭。所以新手引导很重要。另外，正是由于我们自己太了解我们自己的用户，所以我们很难能理解新手用户到底需要知道什么，已经知道什么。引导做得少了，用户不会用，不理解，引导多了，用户嫌烦。当然——终极目标是你的设计不需要任何引导，用户就会使用。

不过在还没成为大师之前，新手引导的原则就是给关键任务带上引导。非关键任务就不必多费口舌，待用户成长的时候，她自然会慢慢发现。

我们来看看美丽说的用户引导：

视觉设计

蘑菇街应用设计的色彩比较丰富。界面主要使用绿色和粉色，相互搭配，突出重点。而美丽说只使用了粉色，于是在很多界面上，重点无法突出。

蘑菇街

美丽说

总结

两款应用功能上有些雷同，但对“抄袭”一词，我认为：同类型、同客户群、同样目的的产品，互相不可能没有了解，所以A的产品出现B的元素，B的产品出现A的交互方式，都很正常，真正有价值的是用户的体验，用户关心的是谁能帮她更好地打发时间、获取信息。

三人行必有我师。各位审视别人的应用容易，但实践起来也自有纰漏。很多人经常给我说他看了多少多少款的应用，说什么应用都说“哦！我看过！”，但让其说出个所以然，往往哑言。希望各位看官在看各大应用的过程中，要认真揣摩每一处细节，认真思考，才能提高自己的设计水平。

为什么分享的图形是“心”？不应该是三点网络还是别的什么？？

因为，人在用心分享！用心。

晚上忽然些许感触。一年前的晚上舜日对那个分享定义，略显激动地解释。

不想在这儿考究用户体验抑或是通用习惯，感觉苍白。

只是说，我们有一种态度，让产品设计与生活走得更近。

-

在这篇文章发布的几天里，milk香港版iPhone迭代了一个版本，再次被推送在官方新品推荐以及热门推荐。

几周前，milk香港版Android首次面世，新品热门推荐。

零推广。

-

1.2版本的迭代开发，主要功能是社会化分享。

-

分享的意义

社会化分享，是指在社会化媒体中，基于其分享功能，将信息网络化输入输出，加速组织传播。博客、微博客、WIKI、博客、社交网络、内容社区等，是可以常见到的社会化媒体形式。在国内近两年，社会化分享的传播量又以QQ空间、新浪微博、腾讯微博势头最猛。

社会化媒体最大的特点是赋予了每个人创造并传播内容的能力。

Twitter平等的信息网络，使得每一个独立个体变得真实。

虽然国内的类twitter产品有变质，人与人多了一层等级关系，信息传播也不再充分流畅。但人们依旧乐于低成本的表达自己，传播感兴趣的内容。

最后在这个项目里，我们确定将新浪微博、腾讯微博做为第一批分享通道。

定位与设计探索

milk香港版的前后两个功能版本迭代间隔两个月。

保持良好的迭代节奏、并达成对用户有参与感的互动体验提升，是分享功能的两个产品考量因素。

设计定位

1. 迭代版本的分享功能，需要在视觉交互中引起用户注意。

2. 分享功能的显示与操作方式，沿用已有的设计，减少用户认知成本。

3. 操作流程简化、流畅，层级关系易理解。

功能ux流程探索

简述：入口->（过渡）->分享UI->(过渡)->完成

在当前的UI框架中，我们有三个区域，放置功能入口。分别是：

(点击放大)

头部条，Getit弹出区域，底部条。

头部条

——优点：规范标准设计
——缺点：游离在milk设计之外 不具有一致的美感

Getit弹出区域

——优点：易引起关注
——缺点：增加手势误操作的可能性

底部条

——优点：规范标准设计 易引起关注
——缺点：占用过多空间 增加手势误操作的可能性

权衡的设计，选择Getit弹出区域的非标准设计，统一在已有的信息框架。

这符合用户对第一个版本的认知——弹出区域是被推荐的互动内容。

(点击放大)

如上图，这是一个最终设计的mockups截图罗列。

接下来的分享通道，将提供2个入口，以及允许回退操作的取消按钮。

验证登录，将提供一个webview供用户填写登录。登录失败将停留在这个页面，允许继续尝试，或回退。

登录成功将填写分享信息，详细的分享内容由应用自动填写，包括关联的图像（隐藏）、slogan 、关联的资讯内容，用户可修改。并通过右上角的按钮进行发布。

更多的细节：更换账户的功能集成在该页面，允许用户的快速回退操作。超出140个字符的内容，将红色提示，默认灰色标示。

上传的过程将提供应用状态。并允许因为网络或其它问题的用户回退操作，回退的关闭按钮与提交按钮位置一致，易于理解。

分享成功会提示成功并进入分享前的初始资讯UI，失败将重新回到填写分享信息UI。

通常情况下，用户完成一个分享操作会经历三次操作，分享入口->分享渠道->提交。

视觉设计与交付

将视觉设计与交付合并，是因为沿用了前期版本的设计，不需要探索新的视觉风格，整个过程会十分高效。

保持标识元素的可识别与简约，皮质底纹。

(点击放大)

iPhone资源，基于640×960与320×480分辨率，@2x标识了retina适用的图像。
Android资源，按480×800分辨率导出，以_ad为区分。

(点击放大)

同样针对每个UI的redlines，为开发提供参考。

碎片的设计

默认的API错误alert反馈，只是在debug版本里才会出现。弹框消息提示是个恶心的设计，并且在这个场景里对用户没有帮助。
为什么小按钮没有pressed的状态设计？它们太小巧了，以至于手指按下后，眼睛看不到这个按钮……
应用提交iTunes时的Special设计……更新的应用截图，丰富的颜色与物品。

-

后记

这是第四篇编号为2的系列文章。。。- -。。。太懒鸟。。太不知道说什么鸟。。。多去看书体验生活咯。。

@包季真(宗羲, 老包)

《触动人心：设计优秀的iPhone应用》译者，脉可寻客户端总监，独立电子商务用户体验咨询师。曾供职于大众点评、淘宝网和Diigo，专职的用户体验菜鸟和摄影匠。

1.先简单介绍下自己吧。

我在04年大学时期开始创业，最开始的一年内主要接外包项目，后来开始做一些自主产品，包括手机客户端和当时非常时髦的SNS和RSS Reader。06年底，我们工作室最终被Diigo公司收购。

在这段创业期间，曾和学校的心理学博士后合作过项目，对心理学发生了兴趣，后又逢国内UCD理念兴起，从此走上了交互的道路。

大学除了创业，05年迷上摄影，一直在用摄影去表现生活和意识（我的博客），一开始走的路线就和大家不同。

摄影中的我暗沉、低调和颓废，和现实中的我有着极大的反差。很奇怪，呵呵，我自己也不知道为什么。

2.六年工作中是如何学习交互设计的？遇到过什么困难？

我自学了很多理论知识。刚开始是看书， 后来看了不少博客。早期在设计PK的过程中，大家都觉得我是学院派，理论一大套。后来慢慢通过实践的结合弥补了这一缺陷。另外，在淘宝的时候，认认真真写了一段时间专业文章，组织设计师写了《交互设计实用指南》，提升也很大。

交互这个东西说实话是积累，还要权衡。不但要补充理论知识，多看，还要多实践。我看到很多设计师在这三个方面可能只做到了两点甚至一点，这样的学习方式会遇到瓶颈。

3.交互设计师的缺点是什么？应该如何避免？

我从两方面来说交互设计师最常见的缺点：

一个是外在因素：交互设计师可能过多考虑用户端，对商业和技术考虑欠缺或缺乏基本常识。我们知道，一个产品的三个互相牵制的要素既是：用户、商业和技术。成功的产品必定是三个要素兼备的产品。所以作为优秀的交互设计师，我们也应该去了解商业和技术，这能极大地提升我们的思维高度和沟通能力。

第二个是内在因素：交互设计师可能不了解自己的用户。虽然我们站在用户这端，但往往不了解自己的用户是谁，他们需要什么，他们会怎么做，他们什么时候在什么样的环境中做。很多成功的产品，如果你仔细去观察，就会发现，他们对自己的用户出奇的了解，才铸就了成功。

4.什么样的交互设计师成才最快？或者说交互设计师应该具备什么样的素质？

正如我刚才提到的：补充理论知识，多看别人怎么做，多实践自己动手做。 并在紧密的团队协作，对结果负责的情况下，设计师的成长最快。

5.如何看待交互设计师和产品经理的工作职责和矛盾？

实际上，两个职位的本质都是要把产品做好。所以两者的目标并不矛盾。

刚才我提到产品的三大要素， 用户、商业和技术。交互设计师站在用户的角度，开发人员站在技术的交互，产品经理站在全局+商业的角度，于是难免会有一定的职责冲突。实际上很多时候你会发现争执到最后仅仅是为了抬杠。所以，最重要的是，当矛盾发生时，双方都可以让步，要有结论验证机制。当你（也许是产品经理）在结论验证后发现“你总是对的”，那么今后你也就有了更多话语权。还有一点很重要，谁对结果负责，谁就有拍板权。

6.你做过网页和手机交互设计，这两者之间的有哪些区别？喜欢做网页还是手机交互设计？为什么呢？

最大的不同在于本质上，两者的用户场景有很大不同。进而使得硬件上也有很大不同。虽然两者在不断得接近中，并且未来，网页和手机应用之间的界限也会越来越模糊。手机上的场景更多定位在随时随地、短暂、移动。

个人更喜欢手机交互，因为其挑战更大。网页设计这么多年来已经相对成熟，而手机交互尤其是在国内还处于萌芽状态，大有可为。

7.网页交互设计的知识和经验对你做手机应用程序有帮助吗？

有！相当有帮助。其实交互设计原理是融会贯通的。知其然，并知其所以然，你才能在任何平台上都游刃有余。

8.国内LBS在年初时涌现大量的签到类产品，但用户逐渐对其失去兴趣，而国外的foursquare发展势头良好，如何看待这一现象？

我在产品经理高峰论坛的演讲中提到过这个问题，LBS到底是LBSocial还是LBService。国内很多公司热衷于抄袭，当看到别人都做得时候，屁股坐不住也要跃跃欲试。感觉没个LBS就不好意思和别人打招呼了。

LBS是Service，是服务，是工具，是完成任务的手段，不是目的。 国外每款成功的LBS，必定有它本身的目标所在，他们看准目标，专心在一个焦点上，就有成功的道理。但是国内很多公司仅仅是效仿，常常是“做了再说”。所以没有目标，更别想用户能够有兴趣来使用。

9.什么样的LBS产品有发展前景？

服务的，满足用户需求的，解决用户问题的。

比如大众点评的“附近”功能，通过LBS，帮助用户切实解决找餐馆，找商户难的问题，提供了充足的内容，它是有价值并且有发展前景的。

产品的思路应该从需求出发，然后再回头来看有什么技术能够解决需求。而不是说今天我们要做LBS，然后开个会大家使劲想要做什么LBS呢？这就好像先去家具城随意买了个橱柜，搬回家里，再慢慢想，看是放锅碗瓢盆好还是裘皮大衣好，这明显是不靠谱的。

10.现有的手机交互设计资料非常有限，你是如何学习的？

一开始还是书。最初是HIG。建议每一做手机交互的同学都要认真阅读。后来看到了Josh的《触动人心》，确实“触动人心”了一把，学到了很多。

说实话，应用我可能看的没有某些产品经理多，但是我坚信一样也能做出好产品来。我在前面提到了几点，多看只是其中一点。很多国外应用的设计很有创意，但是每看一款应用，你都要认真去想为什么，而不是看完了事，囫囵吞枣，就像你看很多外语片，你没有基础，看多了也只能习惯听音调，没有更多特别的收获。如果你看完，吃透，并且正确地应用在你的设计中，我相信看一款应用比看十款应用要来得更加有收获。

11.为什么会翻译《触动人心》，翻译过程中最大的收获是什么？

正如你提到的，国内的手机交互资料非常少，国内的应用做得也是参差不齐。我想让国内同行们一起成长，这样大家设计出来的应用才能互相提高，最后收益的是我们自己和所有用户。

12.手机适合执行什么样的操作？你认为什么样的iPhone应用称得上是优秀？

其实最重要的是场景。经过一年多的成长，我们会了解到手机应用要符合断续的时间碎片，要了解应用场景可能是用户正在移动或需要完成某项紧急任务（微任务） 。但是最核心的是，你要了解你目标用户的使用场景。比如阅读应用，可能用户会全身关注，不受干扰地来阅读（睡前的床上），那么你的设计可能就会和其他应用设计千差万别。

一句废话，满足用户需求和期望的iPhone应用就称得上是优秀的应用。谁都知道，说起容易，做起难。

13.为什么会选择创业？

我的骨子里流着创业的血。个人兴趣爱好多，对互联网的方方面面，从服务器、数据库到创业融资都有所了解。我坚信这样的我更适合创业，而不是在大公司里开会，当“革命的螺丝钉”。

在开始分享前，先介绍一下APP Store审核机制中与界面相关的条款。

一、 顺畅的返回及导航设计

在影视作品中，场景与场景之间的过渡，叫做转场。为了使内容的条理性更强、层次的发展更清晰、在场面与场面之间的转换中，需要一定的手法。APP传统的滑动、翻页、水平翻转转场设计，能够给用户过渡切换时很好的视觉引导。此外，对于APP而言，最重要的不是转场的过程，而是如何在场景中的往返，导航切换。明晰的信息架构、便捷导航、一目了然内容分类，简短而不焦虑的转场时间，才是优秀软件所需要具备的品质。

（一）从界面切换时的设计解决转场的等待问题

Favorite TV立方体翻转的设计很有新意，在等待过程中除了“转菊花”和“咖啡杯”，其实我们还可以找出更好的解决方案。

JS对等待进度的设计，让人对“返回键”另眼相看。 转菊花”的位置，返回键的设计除了在外形上有突破外，在功能承载上的突破也是可以借鉴参考的方向。另外，JS对导航的设计也很特别，本来传统的居于界面底端的tab导航栏，可以由一行变成两行，这样减少了一级界面的跳转。

（二）从快捷的返回键解决转场的页面切换问题

转场过程中的等待会造出用户焦虑，进而造出用户流失。复杂层级的应用软件，如果“返回键”的功能设计不好也一样会造出用户在返回过程中的焦虑，导致用户流失。

对于层级复杂的软件，传统的返回键安装到底是返回上一次操作的页面（back），还是返回上一层级（up）？有没有两全其美的方法，做到深度和广度的平衡。个人感觉下面的软件是给出了许多不错的解决方案。

（1）在标题栏设置“返回”按钮

（2）在界面底部设置多个状态的返回按钮

（3）通过手势实现返回操作

（三）从合理的导航设计避免转场

任何时候有一个全局的导航条，能够快捷导航是一个设计理想。但是对于有第三第四第五层级的应用软件来说，在次级页面有个固定的位置摆放全局导航，不免有点影响其它操作任务，爱看给出了解决问题的一个很好思路，可以放置于左侧，通过向右滑屏展开，既不影响子页面的操作任务，又能够解决全局导航问题。

对于一个界面分为两个TAB的设计有时的确让人困惑，UNIQLOOKS在次级导航的设计很有新意，但是前提是次级导航并不是那么的重要，且用户不会平凡切换。

二、 轻巧的移位与重叠设计

交互有一个可怕的定律叫“漏斗法则”，意思是尽量减少操作步骤和界面跳转，每增加一个操作步骤或者界面切换，就有可能流失10％的用户。位移与信息叠加的设计模式，在不跳转的情况下，通过内容移位，能够合理展示更多的信息，扁平化信息架构，在操作者产生交互的地方，就近通过这种方式就完成了轻便的操作。Path、with/、myPANTONE便是通过内容移位与信息叠加的模式来展示信息的比较有趣的软件。

Path位移的动画一直都很顺畅，这是Path体验很棒的地方。

With/的层叠设计和透明效果，让人对界面信息的排布重新思考。

myPANTONE，很成功的地方在于所有的核心功能操作在一个页面既可以完成。除了采用内容位移的设计，界面的合理分层也是避免转场的一个有效手段。

三、 风度的隐藏设计

手机的界面有限，对不影响界面内容的控件，悄悄的帮助用户隐藏，无疑是一个很贴心的操作。这里觉得知乎和PIICTU的导航栏的隐藏设计给自己很好的体验。

另外Recipe Library的搜索框隐藏，就挺有风度的，并且继续上移展示软件名称的设计，能够很好的提升自己的品牌感知。

总而言之，不要因为苹果的用户规范就对自己过于的约束，优秀软件必定带有一定的创新性，清晰的导航，快捷的返回，短暂的等待页面，是每个优秀软件应该具备的品质，我们是为了保障这些品质而作设计，而非为了遵循规范而设计。要不然那便不是设计，而是标准化生产了。

作者：肖志婕

原文链接：http://www.xiaozhijie.com/blog/122/649073.html

当产品相对稳定与可控，小神有愿望快速记录这个项目。

内容涉及小神参与产品设计与执行的过程，由交互/视觉设计层面的需求分析、功能设计与设计执行组成。

与其带入一些工作中的设计技巧，小神更愿意分享其中的设计思想与理念憧憬。

设计之所以不同于美化，是因为前者被赋予了驱动的灵魂。

背景

milk香港版，内部命名”milk mobile”。是香港潮流杂志《milk》在移动新领域的合作尝试。目标设备为主流的中高端便携移动设备，iPhone/iPod touch/Android Phone/WP7…目前iOS版本如期发布，您可以从这里获得最新的版本。其它平台蓄势待发…

在发布后两周中，milk香港版荣得Apple app store的”新品推荐”与”热门推荐”，Lifestyle排位第二。

小神在过去的三个月，从零开始着手milk香港版的设计执行。

设计的生命周期

在展开一项工作时，我们都希望对它在整体上有所控制。

一个相对清晰的timeline使得设计在时间与质量之间平衡，并在恰当的里程碑有所产出，跟随整个项目进展。

milk mobile的设计定义

milk mobile的品牌与内容定位，决定这即是一面向城市快速消费的精神食粮。

它具备几个特质——高时效性、眼球经济、缺乏耐心的。

继而在视觉与操作着力营造如此的氛围：

• 信息传递的高度流畅。
• 信息呈现的节奏感。
• 轻松的操作浏览环境。

探索从Splash screen开始

Splash是用户进入App，直到程序完全可用前，显示的第一个视图。

Splash Screen概念存在的价值

• 品牌识别（权重30%）

当用户通过桌面icon进入milk香港版，会再此传达具有品牌象征的手写milk英文字符。与milk其它产品形象统一，用户得以加深认同感与归属感。

• 必要的数据加载与反馈过程（权重70%）

对于milk香港版而言，splash screen的存在更多承载的是功能层面的需求。
对网络与cache的不同状态产生的scenarios进行处理，并提供良好的反馈。

在iOS Human Interface Guidelines，对Splash的概念有较为详细的阐述，你可以点击这里查看。但并不赞同对Splash Screen的一个定义——Launch Images。

我们所感知到的信息是流动的，图像与其承载的信息也应该在表现上流动，贴近感知。

流动的图像表现上更贴近于animation，iOS从文字示意上误导设计人员并限制了它的可能性。

Launch/Splash是一个无限延展的屏幕空间，不仅是”图像”。

作为跨平台设计，Android对Splash screen的理解，更注重实用性。

If your application has a time-consuming initial setup phase, consider showing a splash screen or rendering the main view as quickly as possible and filling in the information asynchronously. In either case, you should indicate somehow that progress is being made, lest the user perceive that the application is frozen.

Windows Phone 7注重信息传递的效率。绝对效率是应该被真正推崇的，当你不能提供更好的理由使其存在。

Don’t use splash screens for branding. Avoid using splash screens because they may cause users to associate your program with poor performance. Use them only to give feedback and reduce the perception of time for programs that have unusually long load times.

Don’t use animated splash screens. Users often assume that the animated splash screen is the reason for a long load time. Too often, that assumption is correct.

通常，我们尊重平台的design guidelines，它使得你的app与OS融为一体。

milk香港版Splash screen wireframes

基于以上的定义，沉淀设计。文档的细则，受限于NDA将不被分享。但你可以在测试app的过程中，看到不同scenarios下的表现。

• 当无网络无cache状态。

milk香港版不可用，没有数据的App是丑陋的。用户更需要的是一个友好的帮助界面，提供状态反馈与解决方案，在易识别的区域提供异常网络状态与”重试”入口。

• 当有网络无cache状态。

客户端从服务器端取得少量的必要数据，继而无缝过渡。

• 当无/有网络有cache状态。

客户端优先读取cache，弱化用户不需要参与的载入状态信息，并无缝过渡。

受益于尺寸变形动画，milk logo的使用场景由Splash自然转化到app页面。于此同时，渐隐Splash背景与隐藏提示信息。由此结束整个Splash screen。

milk香港版Splash screen的视觉设计与交付

Splash的视觉风格统一于app完整的视觉设计。

黑白为色调，赋予皮革材质，以幽暗的顶部光线渗透全部的元素。致力于简洁但不失细节的表现。（视觉设计将单独成文）

使得用户将视觉重心停留在表现丰富的资讯信息。

针对iPhone的屏幕与app的默认展示方式，需要320×480以及为retina屏幕的640×960两种尺寸的设计（单位px）。

Android有着更广的屏幕设计需求，但从实际的开发实践，我们只保持了480×800的设计资源。这被验证为是体积与质量的最佳妥协方案。

接下来的是其中的一则redlines图像，此类的设计资源为团队的开发人员提供参考，使得整体项目运转顺利。

当时间充裕，执行Flash实现的高仿真模型，更高效的推动沟通，并为开发人员提供参考。

Review设计是一个自我提高的过程，并希望对读到该文的同学有所帮助。