详解Path 2.0的UI设计

如Path的创始人Dave Morin所说， Path的第二个阶段是要让人们在人生道路上“抓住所有体验”(capture all the experiences)。这款目前的私密社交应用王者，在半年前对于UI系统的重新设计可谓是惊煞旁人。其人性化的设计理念与简洁到极点的设计风格可以说是一本教科书，以至于虽然吸引了大批模仿者但是——在这一派风格中——始终无出其右者。

以下是一篇关于Path 2.0的UI系统的分析，从“个人页面”、“他人页面”、“分享机制”三个角度点评了Path2.0在UI设计上的亮点，附议大量配图，非常的详尽，各位工作中对UI设计有一定涉猎的读者一定不可以错过。

*该文源自网络上传播的一份PDF文件，互动中国尝试寻找原作者未果，如果您是该文章的版权拥有者，请随时通过网页最下方的通讯方式与我们联系。

Path2.0——移动社交网络应用说明

移动社交网络：移动社交网络Path发布第二代了！Google曾打算一亿美元收购Path遭拒，可见非常牛。安装完成后，只需简单填写个人信息，你就可以开始你的Path之旅啦！如Path的创始人Dave Morin所说， Path的第二个阶段是要让人们在人生道路上“抓住所有体验”(capture all the experiences)。

Path 2的UI设计相当出色。向右滑动会出现设置页，向左滑动会出现添加好友页（可通过通讯录、Facebook添加，或通过邮件邀请），向上向下滑动后，会出现一个时间轴(timeline)，方便地提示你当前查看的Path(即自己或好友的分享)是何时发出的。最核心的是左下角的红白色加号按钮，点击后会出现6类功能，依次是：照片、和谁在一起、当前地点、在听的音乐、在想的事情、以及睡眠，使用起来得心应手，十分方便。你不仅可以和Path好友分享，还能把你的分享发布到Facebook或Foursquare等网站上。

和之前版本相比，Path 2从侧重照片分享走向“分享一切”、好友上限从50人增加到150人、长途旅行以后，Path还会自动利用位置功能帮你发布“已达某地”信息（可在设置里关掉）。

总体分析此应用结构：

导航title有3种：

以“path” 为titlebar文字的首页

以人名为titlebar的个人主页

以地址、歌手名、发布时间为titlebar文字的信息详情页

没返回按钮，而是在按钮上以title文字作为导航，也比较清楚的指导用户上一级是哪个页面。另外，工具栏缩略成一个“+”图标，以动态有趣的方式展示，也是其交互一大亮点。

初次进入没有登录前的引导页面，拖到最底部效果：

亮点1：拖动过程中，遇到有信息的地方，都会浮动动态显示该信息的发布时间。

注册页面，登录页面：

注册页面输入信息很多，故设计上规避了传统的输入框的样式，而是采用了笔记本条纹栏的样式，以简化视觉元素；在性别和年龄的设置上，采用小一号的字体，弱化展示也节省了页面是所有信息在键盘上方都能完全显示，方便注册输入。

注册后选择头像，设置名字：

登录过程页面，登陆成功-path首页：

亮点2：点击左下角的“+”图标，从下至上弧形展开操作图标，“+”图标变为“x”图标；点击每个图标，都会以放大渐隐该图标的动态来进入当前信息发布操作页面。长按页面任意位置或“x”图标，则旋转收回所有的图标还原为默认的收起样式。

个人主页：

注意和path首页的区别，首页有“+”发布各类信息的浮动按钮，而个人主页没有；另外个人主页只有自己发布的信息，故线左侧没有发布人头像。如下，左图是个人首页，右图是path主页。

亮点3：首页和个人主页的页面左侧都有一条竖线，每条信息都有一个节点，代表发布当前信息用户的交互人/发布的信息类别。

• 线的节点上是头像，则表示与此人的交互信息，比如好友对某人的评论，加为某人好友，和他在一起等。若同时添加多个好友，则头像图标会动态轮换展示这几个好友的头像。
• 为空白点则代表自己的普通行为，如加好友，个人信息的设置，说一句话等。
• 月亮代表睡觉，太阳代表起床，音乐图标代表听到音乐，地点图标代表当前地点发布。
• 加深的点，表示设置当前城市。

图标设计简洁易识别，色彩亦能体现其功能区别，虽然图标一堆，却没有繁杂感。

亮点4：点击首页title左侧的menu图标，和title右侧的好友图标，则分别朝右、朝左滑开当前页面展示如下左图，右图，再次点击图标则按原路滑动收回至首页。

设置-修改保存cover图片的等待过程，收取提示信息的设置图标，以灰色/亮色来表示是否收取。（再次提醒图标设计）注销采用红色按钮，以起警示作用

初次使用定位，则将个人定位至当前城市，如下图为西安市，展示最近访问的当地人，及总数。搜索不到地址时，提示创建该位置的弹层

点击他人头像进入他人主页，若不是好友，则显示如下左图，加好友过程如下：

加好友成功后，好友的主页：

因为自定义了cover图片（可以理解为网页banner背景吧），每个人的主页都可能效果不同。

查看他人的图片信息详情：

信息的详情页面都有最近访客的头像展示，若某访客在此信息上发表了表情，则在头像上展示该表情。

• 点击图片则全屏展示：若为横向图片，则旋转至横向全屏展示，再次点击图片则旋转收回至原页面；竖向图片则放大至全屏并朝上滑动至页顶，再次点击则朝下收回并缩小至列表样式。
• 长按图片则弹出save选项弹层。

音乐信息查看：

点击音乐信息，则弹出音乐操作选项：查看该歌手音乐（右下图）、从itunes下载歌曲

查看当前地点签到信息，发布表情交互：

长按自己所发布的信息的右侧表情按钮，则弹出操作层如下：弹层包含发布表情，删除该信息，评论的快捷方式，以及被几个好友查看的记录。

发布信息：

所有的发布信息页面除了发布心里话之外，发布图片/音乐/和谁一起的第一步是到相应功能的选择图片/音乐/好友，选择完毕则到了“post”发布页面：

thought发布页面：

左下角的锁图标，表示仅对自己可见；右下角是分享至其他应用的按钮。若未绑定则提示绑定。

选择地点/好友/音乐页面：

选择当前地点/好友/音乐后的post发布页面：

最多可以展示with的4个好友（可以选择超过4个，但是此处头像只展示4个），这个页面排版直观而易于操作。

来源： http://www.damndigital.com/archives/56371

© 推荐 for 互联网的那点事, 2012. | Permalink | No comment | Add to del.icio.us
Post tags: UI设计

你可能也喜欢：
微软谈设计：苹果风格太掉价 Metro UI是哲学 (@wpmind)	社会化网络用户界面（UI）的9个重要特征 (@socialbeta)	智能电视UI设计那些事儿	产品UI设计流程	40个UI设计工具和资源
无觅

Feed enhanced by Better Feed from Ozh