她的创始人Dave Morin说新版不久就已经超过150万人下载，而老版一年才突破了100万关口。用户一天内在新版分享的内容超过老版一年的内容。

　　path2.0之后带来的用户量和活跃用户的暴增最大的功臣莫过于界面设计和体验上的不俗表现：
1、产品定位的转变引发UI设计的调整

　　path1.0的时候大家似乎还没有看出她和instagram等等一系列社交软件明显的差异化。path2.0已经将定位清晰表达出来了：和亲密好友分享生活日记的app(Path is the smart journal that helps you share life with the ones you love)。

　　虽然她在可添加好友数量从50暴增到150,但无论是睡眠、起床之类的个人信息分享，强化的timeline feed样式，还是只有昵称没有头像的简约，都传递出她希望和亲密的人分享自己生活日记这一中心。

　　在界面表达上，设计师也传递着这一核心定位：

对比path1.0的图标，2.0在UI上做了日记本隐喻的处理

loading时候，如日记本打开的翻页效果

2、突破ios瓶颈的架构方式

path1.0 vs. path2.0

　　在整个path的改版中，最为惊艳的还是她突破ios的一些制约，创新的一些架构模式。

　　在path1.0时，底部还是采用非常传统的tab导航方式。架构上也普普通通没有新意。

　　由于手机屏幕尺寸和手指碰触的限制，44*44像素的最小触碰尺寸造成了底部导航tab只能放少于等于5个。这对于功能的扩展造成了限制和瓶颈。

　　path2.0完全颠覆了iOS guild line的模式，采用三屏模式（左屏、主屏、右屏）

　　同时架构上凸显了这种方式具有的极好的扩展性。

　　可以假想，path在设计之初也面临添加各种其他动能（比如音乐、地点、和谁在一起、起床睡觉）时候面临，中间的拍照键不好满足的情况。因此，采用这种三屏模式，极简了主页面，主屏仅留下feed展示，和添加功能。将导航放入左侧的屏幕，增加了未来的可扩展性，同时也保证主屏幕清晰的内容：动态展现和添加我的动态，还有最新的消息提醒。

　　她深知对于消息来说，新增的消息才是重点。一方面在主屏底部显示了最新一条消息的摘要和未读消息的数量，另一方面把全部消息收在左屏的activity里面。

3、timeline的影响

　　好吧，path的创始人来自于Facebook，path2.0出场的一刹那我们就看到了Facebook的timeline的影子。Facebook的timeline也出现的在终端上了，和path几乎一模一样。先不去争辩究竟是谁抄袭的谁。path在feed的展示上格外强调时间线的展示方式。

　　在手指拖动屏幕向下滚动的同时，右侧浮现各个feed分享的时间，时钟动态的显示回转，强化了时间线（timeline）。
4、更加直观的表达

　　交互设计中，所见即所得（WYSIWYG）对于用户来说是一种最容易学习的交互模式。

　　新手任务中，用户需要添加个人cover。添加的个人信息，即时的在当前位置表达、编辑信息。之后的展示上也采用一致的布局，让用户非常清晰了解到所输入的内容结果如何，也算是“操作前结果可预知”的体现。

　　社会化网络的两大精髓：表达自我，了解他人，在个性化cover上表现的淋漓尽致。

　　另一个方面是手势的直接表达。path摒弃了除了点击（tap）以外的其他手势。对于滑动显示等其他手势来说，点击（tap）才是最直观的、优于其他操作的手势。

　　主屏左下角的+绝对是亮点。有没有想过为何放在左下角？又为什么采用弧形展开？仅仅是为了追求炫目的效果么？

　　其实对于手势来说，多数人都使用右手为利手，同时使用右手拇指单手操作。那么方便的可触碰区如下图：

右手利手的拇指可触碰区

　　图中的easy区是容易操作的区域，且成弧度展示。对于展开的6种功能平等且易操作的展示。那么path2.0的主操作，放置在左下角，采用弧度展开也有依据的。并且，她在同一个位置展开后，转变为×号，复用位置，节约操作空间。

　　除此之外，path2.0在动画效果展示上也极富爱心。loading的翻书动画，图片upload效果，音乐播放的从大到小展示，都让path的体验变得卓越。

　　The End

Thanks for kiwi‘s illustrations.

　我们有时候不能不面对产品出错的时候。无论设计得多么用心，无论做了多少测试，用户仍然会遇到错误和问题。既然出错不可避免，那么如何进行容错性设计才是关键。

　容错性设计就是当错误发生时，人们看到的界面。

　就像对付不该发生的错误一样，容错性设计的关键在于“做好防御”。产品设计者们必须不断寻找可能造成用户困惑和不满的出错点。好的防御性设计决定用户体验的好坏。

　举个例子：

　有没有人注意过进入银行ATM机可以有多少种刷卡方式。答案是八种！而正确进入方式只有一种方式。

　如何从设计上避免用户出错，限制是一种非常必要的方式。

• 限制用户某些交互操作

  SIM卡如果做成一个倒角避免了长方形带来多种插入方式的错误。

三项插座和相应插孔的匹配避免了用户使用两项或其他插座错误的可能。

　置灰是界面上限制某些操作的好方式。

　Flickr的照片上传wizard，防止用户跳过第一步直接进入后面操作，采用置灰的方式。一方面告诉用户这可以进行当前操作，另一方面预示后面还有哪样的操作。

　其次，减少认知困惑也很重要。

• 减少用户认知混淆

　根据已订阅和未订阅的不同，订阅button和退订进行视觉上明显的区分，避免错误操作。

• 合理利用系统反馈

　如果错误不可避免的发生了，合理恰当的提示可以减少用户的挫败感。

　1、提前提示某些操作可能引起错误。

　在输入密码需要区分大小写时，caps lock键打开下作出提示以免出错。

　2、防止用户错误，操作后提示确认。

　在用户点击发送后提示没有输入主题信息，防止用户直接发送无主题邮件。

　3、不仅要反馈出错，更要给用户解答。

　最好能够告诉我，具体错误的原因在哪里，是那句话和字出现的问题。

　4、给予用户适当指引和建议。
         当用户搜人没有结果的时候，引导用户继续查找或者 邀请好友。

　当用户搜索无结果时，智能猜测用户的出错原因或者给予其他引导。

　人非圣贤，孰能无过。用户是产品的上帝，如何通过设计减少用户的出错后的挫败感。错误永远是产品的，宽容用户的错误，不容忍产品的错误。

感谢seven文档的启发。

　　也就是说要asking first, thinking next, design last.

　　先从了解需求开始，之后对需求进行分析，最后再进行设计。

　　需求一般来自产品经理或用研。那么对于设计师来说，对需求进行分析便是第一步，也是非常重要的一步。

　　如何进行需求分析呢？这里介绍偶的一种方法，也或是一种结构化思考的过程。

　　衣柜整理法

　　为啥叫衣柜整理法呢？先留个悬念。我们先来看看从产品拿到的需求是神马样子的吧。

　　比如某天收到产品经理发来的一份需求。这是一个关于使用照片装扮并分享的app。一张excel表里面包含n种功能列表。（老实说功能并不是需求）需求如下：

　　刚看到的时候会不会有点头大。这时候就可以使用＂衣柜整理法＂啦。先想下平时是怎么整理衣柜的。

　　首先，将衣柜里的东西全部取出来，放在床上。

　　然后，将散落在床上的衣服进行分类，比如哪些是秋冬季节穿的衣服，哪些是最近要穿的衣服，把他们在床上整理好。

　　接下来，规划好衣柜的空间，那个地方放内衣，哪个地方挂大衣，哪个地方放运动服等等。然后按照这些规划，让所有衣服各归各位。

　　最后在正确的场合穿合适的衣服。建立了良好的衣柜整理流程，再也不用临出门的时候把衣柜翻个底朝天啦。

　　但是，这些和需求分析有神马关系呢？

　　其实，这五个步骤对应着需求分析的五个水平流程：收集、处理、组织、回顾、行动。

step1.收集：清空衣柜

　　这个就像是之前例子说的excel的需求列表。包含所有功能，没有逻辑和次序的摆在一起，很像摊在床上的衣服。

step2.处理：为衣物分类

　　之后，将衣服进行分类叠放，每类一叠。就像把需求进行分类。比如上面的例子，我们可以根据用户任务流程画出简图：

　　把各个需求按照这几项归位。比如：拍照、选择相片属于创建类的；添加胡子、眼镜、套装等等属于装扮类的；而分享到微博、而或是设为手机联系人头像都属于分享处理类。

step3.组织：将分类的衣服重新储存

　　把衣服按照衣柜不同区域的格子进行放置。就好比把不同功能要素放在不同的页面下。

　　这个阶段也可以仔细分析：

　　应该划分为几个页面？每个页面主要是做什么的？应该放置哪些功能点比较合适。

　　防止出现＂看哪里有地方插空放button＂的囧。

　　同时，可以按照功能的优先级和重要程度再次进行分析。根据任务流、视觉流进行线框简图的放置。

step4.回顾：对衣物放置寻找是否清晰

　　回顾下分类和衣物放置是否合理？上下前后位置是否容易理解？

　　就像需求的功能点是否分配合理？主任务流程是否流畅，符合用户心理预期。
step5.最后，行动：选择最佳方案

　　重新检视，进行任务和操作的细化。开始高保真线框的设计制作。
就这样，和衣柜整理一样简单的完成了需求分析~利用结构化抽屉思维，慢慢的你会发现再复杂的需求，拆分下来都不会太难~

　　又到了换季了，一起整起吧~

特别鸣谢＜小强升职记＞的作者邹鑫给予灵感。

　　就像走在商场中，面对玲琅满目的产品，你似乎很难找到一两款绝对同质化的大品牌：

　　各式的服装，NIKE的衣服是运动的，但也不会和做户外运动的哥伦比亚冲突。都是做化妆品，Fancl打出“无添加”没有防腐剂也收获了一群喜爱天然的用户…..

　　定位的核心在于用户为什么选这个产品而不是那款产品，重要的就在于产品差异化和时间点的“先到先得”。

　　定位的好处在于不仅在用户心中形成：可预期的期待和不可替代的品牌依赖。定位在产品产生过程中也帮助整个团队理解，并对产品目标达成共识，方便向整个团队传播产品概念。

　　产品定位想来容易，说起来难。用一句话涵盖产品的意义不是易事。很多时候，人们会把产品宣传口号理解为她的定位。的确，在很多时候，产品口号很好的说明了产品的特质。比如：淘宝的“淘我喜欢”很好的向用户传递了她是一个上网购物的网站。百度的“百度一下，你就知道”也很好的说明了这是一款搜索产品。

　　但是，这些就叫产品定位吗?

　　先看下ios guidline中对一个照片案例的定位说明：

　　一个为业余摄影爱好者设计的，简单易用的图片管理程序。

　　可以看出这里包含了用户角色（业余摄影爱好者）、产品特色（简单易用）、产品功能（图片管理程序）。

　　一个合理的产品定位应包含：产品的使用者、产品特点（差异化存在意义）、产品的核心功能点。

　　所以在产品头脑风暴的设计前期，产品经理和交互设计师，包含用研着力与把产品是什么？不是什么？的产品定位说清楚。

　　这样，无论迭代时间多长，多少boss的意见和对于新功能的添加都会有所依据。“产品定位”像一个标尺、规范衡量和分析需求的合理性。

　　以instagram为例，她是一款为业余摄影爱好者，拍摄、分享照片的app。

　　对于她来说，拍摄、滤镜处理、赞、评论都是核心功能需要添加，至于要不要添加保存他人照片或者云相册则不是核心功能点，应该再考量。

　　既然分析出明确的产品定位后，那么如何分析需求呢？以instagram为例：

　　如何在功能和技术的限制下，帮助用户达成目标，则是用户的任务设计。也是交互设计的主要工作内容。

　　需求分析出目标用户和用户使用产品的目的，而产品层面公司和产品经理如何定位战略布局，技术限制等等，对于添加哪种任务则需要交互设计师“设计出来”的。

——写在#2011中国交互设计体验日#

　　人们通常认为苹果是靠iphone卓越的外观设计轻松取得5%的移动市场份额和他人望其项背的利润，但老乔自视苹果是一个缔造优质软件的企业。他曾夸口苹果在软件上的水平要领先业界5年。今年ipad2发布的时候 乔布斯还是没免俗的演示自己开发的应用。老乔让两大软件主要负责人出场并介绍包括iMovie在内的软件产品，并赞赏有加。

　　其实这一切都是老乔在向app store的开发者传递一种信息。利用苹果自带原生app或者推广的app告诉开发者和消费者“标准”，以这些原生app让开发者和用户了解、熟悉交互操作和平台特点。

　　举个栗子：）

• 设计模式

　　设计模式是在为解决特定问题，可以采用常用的一些常规模式。同时，就像ios guildline里面说的，平台模式也可以减少用户的认知负担：“用户喜欢了标准化控件的使用方法和行为，所以他们不必停下来思考该怎么使用他。当面对那些看起来、用起来不符合标准的控件时，用户之前的经验就失效了。”

　　Iphone中的”设置”就很好的解决了某个问题：当我同时对A、B、C…等操作编辑但又不互相影响的时候，就可以采用设置这一模式。

这对于其他app中的设置和其他信息架构起到启发作用。

• 手势

ios guildline对手势的总结

　　手势都是相对应交互操作。比如：右滑动显示删除的手势。很多app都采用这个方法，合理隐藏掉“删除”button。

QQ音乐向右拨动出现“删除”和“分享”有效节省了有限的显示空间。

• 键盘

　　还以小小的键盘为例，在iphone app交互设计中，免不了涉及用户输入时调用相关的键盘。交互设计师提供的交付物最好能够明确表现何时采用合理的键盘,以减少用户输入的需求。
1、拨号键盘

　　顾名思义，用在拨号或者只需要输入数字的地方。

比如：iphone QQ登录或是搜索好友，调用的键盘就是类似拨号的数字键盘。

2、邮箱输入键盘

　　产品的登录和注册少不了填写相关的邮箱。Iphone在联系人信息中就对邮箱使用了非常便利的键盘。

“邮箱键盘”方便输入英文还有@字符。
3、url地址

　　移动互联网的普及让用户输入网址更加便捷。

iphone网址输入时调用键盘

• 图标

　　图标是人机界面对于操作隐喻作用的代表。图形对于操作的表达一个源于共识的认知，比如数字表示顺序、箭头表示方向。还有平台图标的共识。

ios人机界面手册对于部分图标的说明

with的拍照和action不会引起用户迷惑，这些图标保持传达性的同时表现自己的风格。

• 文案

　　“所有用于与用户沟通的产品文案，都需要保证你的用户能够理解。也就是避免使用行业术语，了解目标用户，以判断所使用的文案是否适用于他们。

　　常见的一些用语：返回、设置、保存、分享都是安全语言。

尤其，随着移动app的发展和升温，PC端的产品有逐渐向手机端移植的趋势。如何将一款pc端产品成功移植到手机端，必然要对交互操作进行“再”设计。

• 从pc到iphone的“再”设计

目前来说，需要移植的多为用户量比较大，相对成熟,数据累积丰富的产品。保持原有特色和常用功能让设计师觉得踏实。但麻烦往往也常来源于此：

网站结构层级在pc端往往很深。

但是，移动界面的信息架构往往不适合设计很深的层级。层级深容易让用户迷失，也不好找回主页。

pc端因为有导航和面包屑的辅助，逻辑和轨迹也不难寻找。但是手机屏幕和操作系统限制，多于三级，用户就不再好操作。

在iphone guildline里对于面包屑也提出尽量勿用的提示。

有人说手机交互是让设计师最能发挥的地方。我觉得没错。交互设计师眼中优雅的产品往往都是“小而简单清晰的“和重视用户使用目的流程的。

美图秀秀iphone我相信出自设计师之手，界面开始就清晰的表达目的和需求：拍照或是处理图片，之后的操作也是一气呵成。

　　手机如果想获得好的体验，最好靠像用户一样不断操作来感受。也就是说，手机交互设计分析不像传统分析从产品已有功能开始，更应该从用户操作目的和流程开始。Iphone似乎先天领略了这个：

    顶部导航采用页面名称+导航（title+nav）的形式。左右倾向后退和前进的跳转，符合用户一步一步处理的规范。也就是层级结构（sitemap）的扁平化。

除此之外，交互操作方式上，虽然触摸屏的手势和pc有一些操作相似的地方，比如点击、拖拽。PC和触摸屏方式也不尽相同。但触摸屏不存在所谓鼠标的悬停（hover）状态，也没有右键点击。

PC常用交互操作与Iphone操作对比

   Iphone有自己的独特手势，比如缩放、拉大多点触碰，长按图标抖动后移动或删除。

iPhone、ipad上手势的总结图

• 对需求的“再”设计

“需求”对于交互，在我理解分为两部分，用户需求和商业需求。

用户需求很好理解，就是用户为什么使用这个产品，为了解决什么问题，用户的使用场景和流程分别是什么？

比如一个用户拍照、装扮并分享的app。流程很简单：

如此而来，分割这些页面，可以通过对流程的梳理。每个页面反复问用来解决什么问题的，会让页面架构逻辑变得清晰。

另一个角度来说，苹果的确是老外的思维，单线条的。ios系统也是一步一步的。顶部为title+nav(页面名称和导航)，导航为表示流程操作的上一步、下一步。不难发现苹果希望流程设计像用户行为一样，符合用户习惯，简单直接。

而现实永远充满着无数的选择，比如，我拍好照片难道不能只保存不分享么？
于是流程演变成：

实际上，产品会更复杂。甚至有更多选择分流。
这就显现ios处理这种多线任务情况的弊端——如何在处理同一个页面下，既满足A又满足B呢？这就会有商业需求分析上的主次之说，哪条才是有倾向性的主线呢？

对于公司来说，分享是会赢得更多粘性、用户的方法。从这个角度来说，分享和保存的重量，明显分享优于保用户个人行为的保存。那么主线就该是：拍照——>装扮——>分享

保存可以作为分享中的辅助支流，放在屏幕中。

当然这个例子只是说明观点，实际分析上，保存作为对用户没有伤害性，完全可以默认保存，之后继续分享。

这里可以看到，商业需求就是公司战略重点，产品利益倾向和方向。一个交互设计师如何断定层级往往来自与他对于商业需求的解决能力。举个简单例子来说明：

拍拍的搜索提示，引导用户的热门搜索

　　把用户看成懒而怕麻烦的。上面的情况尤其对于浏览型无目的的用户来说，具有很强的引导和暗示，也是运营的发力点之一。

如果说design is solving problem.那么，方法永远比困难多，设计如何解决问题和困难的方式也多样。交互设计师如何权衡各要素的层次永远是思考的重点。

• 优雅的降级

用户有在手机上使用这个功能的需要吗？在什么情景下有呢？优先级高么？

PC端的功能未必适合于手机端。我在手机端会有ps图片的需求么？要到什么程度呢？是睫毛的根根分明还是肤色的修饰呢？目的是什么呢？自我欣赏还是让好友看看评价下呢？

所以，这就是涉及到pc端功能优雅的降级问题。

使用功能的目的：什么场合、情景？操作输出物的用途、特点？分享还是自留？

功能间的PK：这个功能数据量、用户在手机端的饥渴度

功能实现程度的考量：手势如何完成操作？能精细到神马程度？

Asking first，thinking first，design last.更有助于思考解决问题。