详解Path 20的UI设计.docx
- 文档编号:8004086
- 上传时间:2023-01-27
- 格式:DOCX
- 页数:12
- 大小:1.91MB
详解Path 20的UI设计.docx
《详解Path 20的UI设计.docx》由会员分享,可在线阅读,更多相关《详解Path 20的UI设计.docx(12页珍藏版)》请在冰豆网上搜索。
详解Path20的UI设计
如Path的创始人DaveMorin所说,Path的第二个阶段是要让人们在人生道路上“抓住所有体验”(capturealltheexperiences)。
这款目前的私密社交应用王者,在半年前对于UI系统的重新设计可谓是惊煞旁人。
其人性化的设计理念与简洁到极点的设计风格可以说是一本教科书,以至于虽然吸引了大批模仿者但是——在这一派风格中——始终无出其右者。
以下是一篇关于Path2.0的UI系统的分析,从“个人页面”、“他人页面”、“分享机制”三个角度点评了Path2.0在UI设计上的亮点,附议大量配图,非常的详尽,各位工作中对UI设计有一定涉猎的读者一定不可以错过。
*该文源自网络上传播的一份PDF文件,互动中国尝试寻找原作者未果,如果您是该文章的版权拥有者,请随时通过网页最下方的通讯方式与我们联系。
Path2.0——移动社交网络应用说明
移动社交网络:
移动社交网络Path发布第二代了!
Google曾打算一亿美元收购Path遭拒,可见非常牛。
安装完成后,只需简单填写个人信息,你就可以开始你的Path之旅啦!
如Path的创始人DaveMorin所说,Path的第二个阶段是要让人们在人生道路上“抓住所有体验”(capturealltheexperiences)。
Path2的UI设计相当出色。
向右滑动会出现设置页,向左滑动会出现添加好友页(可通过通讯录、Facebook添加,或通过邮件邀请),向上向下滑动后,会出现一个时间轴(timeline),方便地提示你当前查看的Path(即自己或好友的分享)是何时发出的。
最核心的是左下角的红白色加号按钮,点击后会出现6类功能,依次是:
照片、和谁在一起、当前地点、在听的音乐、在想的事情、以及睡眠,使用起来得心应手,十分方便。
你不仅可以和Path好友分享,还能把你的分享发布到Facebook或Foursquare等网站上。
和之前版本相比,Path2从侧重照片分享走向“分享一切”、好友上限从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个),这个页面排版直观而易于操作。
(文章来源:
,由最新发型网负责整理)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 详解Path 20的UI设计 详解 Path 20 UI 设计
![提示](https://static.bdocx.com/images/bang_tan.gif)