详解Path 2.0的UI设计

标签: 产品设计 UI设计 | 发表时间:2012-05-02 21:31 | 作者:P迪
出处:http://www.alibuybuy.com

如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:

你可能也喜欢:

微软谈设计:苹果风格太掉价 Metro UI是哲学 (@wpmind)

社会化网络用户界面(UI)的9个重要特征 (@socialbeta)

智能电视UI设计那些事儿

产品UI设计流程

40个UI设计工具和资源
无觅

Feed enhanced by Better Feed from Ozh

相关 [path ui 设计] 推荐:

详解Path 2.0的UI设计

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

path 3.0 再一次突破 APP 的设计风格

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  path一直是个蛮奇葩的应用,它的每一个大版本都会引发APP设计风格的一次突破,但是,它的产品自身却一直没什么突破.   Ptah 1.0,采用了一个横条的缩略图作为图片Timle的主要表现形式,这种风格让以照片流为主的Timeline显得非常有韵味,后来这个风格被不断模仿;.   path 2.0,采用了抽屉式导航的模式,这种导航风格大大的扩展了APP的可利用空间,同时让核心功能足够突出,底部将所有的功能性操作缩略到一个按钮上,只要你需要,点击一次就可以执行你操作的功能,直到现在,这种抽屉式风格依然是主流模式;.

从Web借鉴UI设计

- - 博客园_首页
  用户体验已经成为衡量应用软件质量的重要标准. 在过去我们可能会惊叹于某个Web应用的华丽界面,现在,随着HTML5的强势登场,各类表现层技术及开发框架的发布,Web与窗体应用的界限正在被逐渐模糊. 虽然技术已经焕然一新,但很多开发人员并不是专业的信息架构师,可能还在使用传统的、平凡的UI设计风格.

UI 设计六要素

- - 人人都是产品经理
UI是User Interface(用户界面)的缩写,我们常常把用户体验挂在嘴边,而UI就是提升用户体验的秘密武器. 友好的用户界面,可以实现用户 与网站或者软件之间更好的交互,让软件的操作变得更加舒适、更加人性化. 可以毫不夸张的说,UI决定了互联网创业的成败. 那么,要如何才能针对自己的实际 情况设计出好的UI呢.

UI精品:网站各种表单UI设计PSD

- - 软矿
网站经常需要用到注册表单、登陆表单、找回密码表单、发邮件表单、订阅表单等. 这些表单看似简单,但一个优秀的网站,这些表单的设计也需要下很多的功夫. 小编最近收集到一套比较完整的网站表单UI设计PSD素材,基本涵盖了网站所需要的表单. 如果你正愁不知道怎么安排你的网站设计项目的表单,这PSD素材或许能给你带些灵感.

40个UI设计工具和资源

- Shell Wang - 译言-电脑/网络/数码科技
来源40 UI Design Tools and Resources - Noupe Design Blog.       用户界面设计在持续的基础上不断成长和演变. 要跟上时代,你需要关注趋势、新资源和正被实施和谈论的新技术. 同时,你也要亲身尝试,并提出原创的见解和应用.       下面列举的这些工具能帮你做到这些.

谈谈Android的一些UI设计

- plidezus - 盒子UI
谈到应用程序设计,对设计师来说,Android就像是房间里的大象. 很多设计师会更希望这是iOS,在那里所有任何人都只需要关心iPhone手机,iPad和App Store. 然后没有人可以忽略Android,它目前已占据智能手机中最大的市场份额,且已经被广泛用于从平板电脑到电子阅读器等各种产品. 总之,谷歌的Android平台正在迅速遍地开花,品牌厂商们很难不注意到.

178个免费的UI 图标设计

- - 紫萝卜 | 所有与设计有关
UI设计教程:界面图标创意设计. 45套网页UI PSD源文件免费下载. 45套网页UI PSD源文件免费下载. 100+高质量的UI设计源文件下载.

五十个UI设计资源网站

- - 畅之部落格
UCD大社区  http://ucdchina.com/. 腾讯WSD  http://wsd.tencent.com/. 腾讯CDC  http://cdc.tencent.com/. 腾讯ISD  http://isd.tencent.com/. 淘宝UED  http://ued.taobao.com/.