科技: 人物 企业 技术 IT业 TMT
科普: 自然 科学 科幻 宇宙 科学家
通信: 历史 技术 手机 词典 3G馆
索引: 分类 推荐 专题 热点 排行榜
互联网: 广告 营销 政务 游戏 google
新媒体: 社交 博客 学者 人物 传播学
新思想: 网站 新书 新知 新词 思想家
图书馆: 文化 商业 管理 经济 期刊
网络文化: 社会 红人 黑客 治理 亚文化
创业百科: VC 词典 指南 案例 创业史
前沿科技: 清洁 绿色 纳米 生物 环保
知识产权: 盗版 共享 学人 法规 著作
用户名: 密码: 注册 忘记密码?
    创建新词条
科技百科
  • 人气指数: 5979 次
  • 编辑次数: 1 次 历史版本
  • 更新时间: 2012-05-03
高兴
高兴
发短消息
相关词条
体验设计活动收敛的11件事
体验设计活动收敛的11件事
情感交互
情感交互
响应式网页设计之年
响应式网页设计之年
交互设计师价值
交互设计师价值
交互设计初体验
交互设计初体验
产品经理必读九步法
产品经理必读九步法
菲兹定律
菲兹定律
移动应用十项设计原则
移动应用十项设计原则
情境化
情境化
Web设计8个趋势
Web设计8个趋势
推荐词条
希拉里二度竞选
希拉里二度竞选
《互联网百科系列》
《互联网百科系列》
《黑客百科》
《黑客百科》
《网络舆情百科》
《网络舆情百科》
《网络治理百科》
《网络治理百科》
《硅谷百科》
《硅谷百科》
2017年特斯拉
2017年特斯拉
MIT黑客全纪录
MIT黑客全纪录
桑达尔·皮查伊
桑达尔·皮查伊
阿里双十一成交额
阿里双十一成交额
最新词条

热门标签

微博侠 数字营销2011年度总结 政务微博元年 2011微博十大事件 美国十大创业孵化器 盘点美国导师型创业孵化器 盘点导师型创业孵化器 TechStars 智能电视大战前夜 竞争型国企 公益型国企 2011央视经济年度人物 Rhianna Pratchett 莱恩娜·普莱契 Zynga与Facebook关系 Zynga盈利危机 2010年手机社交游戏行业分析报告 游戏奖励 主流手机游戏公司运营表现 主流手机游戏公司运营对比数据 创建游戏原型 正反馈现象 易用性设计增强游戏体验 易用性设计 《The Sims Social》社交亮 心理生理学与游戏 Kixeye Storm8 Storm8公司 女性玩家营销策略 休闲游戏的创新性 游戏运营的数据分析 社交游戏分析学常见术语 游戏运营数据解析 iPad风行美国校园 iPad终结传统教科书 游戏平衡性 成长类型及情感元素 鸿蒙国际 云骗钱 2011年政务微博报告 《2011年政务微博报告》 方正产业图谱 方正改制考 通信企业属公益型国企 善用玩家作弊行为 手机游戏传播 每用户平均收入 ARPU值 ARPU 游戏授权三面观 游戏设计所运用的化学原理 iOS应用人性化界面设计原则 硬核游戏 硬核社交游戏 生物测量法研究玩家 全球移动用户 用户研究三部曲 Tagged转型故事 Tagged Instagram火爆的3大原因 全球第四大社交网络Badoo Badoo 2011年最迅猛的20大创业公司 病毒式传播功能支持的游戏设计 病毒式传播功能 美国社交游戏虚拟商品收益 Flipboard改变阅读 盘点10大最难iPhone游戏 移动应用设计7大主流趋势 成功的设计文件十个要点 游戏设计文件 应用内置付费功能 内置付费功能 IAP功能 IAP IAP模式 游戏易用性测试 生理心理游戏评估 游戏化游戏 全美社交游戏规模 美国社交游戏市场 全球平板电脑出货量 Facebook虚拟商品收益 Facebook全球广告营收 Facebook广告营收 失败游戏设计的数宗罪名 休闲游戏设计要点 玩游戏可提高认知能力 玩游戏与认知能力 全球游戏广告 独立开发者提高工作效率的100个要点 Facebook亚洲用户 免费游戏的10种创收模式 人类大脑可下载 2012年最值得期待的20位硅谷企业家 做空中概股的幕后黑手 做空中概股幕后黑手 苹果2013营收 Playfish社交游戏架构

Path 2.0的UI设计 发表评论(0) 编辑词条

目录

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

→如果您认为本词条还有待完善,请 编辑词条

词条内容仅供参考,如果您需要解决具体问题
(尤其在法律、医学等领域),建议您咨询相关领域专业人士。
0

标签: Path 2.0的UI设计

收藏到: Favorites  

同义词: 暂无同义词

关于本词条的评论 (共0条)发表评论>>

对词条发表评论

评论长度最大为200个字符。