详解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个),这个页面排版直观而易于操作。


9 Comments

Have Your Say »

Required

Required, never published