<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>后时代&#187; 改版</title>
	<atom:link href="http://www.houshidai.com/tag/revision/feed" rel="self" type="application/rss+xml" />
	<link>http://www.houshidai.com</link>
	<description></description>
	<lastBuildDate>Fri, 11 Oct 2019 03:37:37 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4.1</generator>
		<item>
		<title>Path 2.0 UI设计改版</title>
		<link>http://www.houshidai.com/product/path-ui.html</link>
		<comments>http://www.houshidai.com/product/path-ui.html#comments</comments>
		<pubDate>Fri, 04 Jan 2013 14:00:10 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[产品]]></category>
		<category><![CDATA[UI设计]]></category>
		<category><![CDATA[应用]]></category>
		<category><![CDATA[手机]]></category>
		<category><![CDATA[改版]]></category>
		<category><![CDATA[社交网络]]></category>
		<category><![CDATA[移动互联网]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=6780</guid>
		<description><![CDATA[Path 2.0的UI系统设计改版的分析，从“个人页面”、“他人页面”、“分享机制”三个角度点评了Path2. [...]]]></description>
			<content:encoded><![CDATA[<p>Path 2.0的UI系统设计<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/revision" title="查看 改版 中的全部文章" target="_blank">改版</a></span>的分析，从“个人页面”、“他人页面”、“分享机制”三个角度点评了Path2.0在<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/uidesign" title="查看 UI设计 中的全部文章" target="_blank">UI设计</a></span>上的亮点：</p>
<p><img class="alignnone size-full wp-image-6781" title="Path-UI" src="http://www.houshidai.com/wp-content/uploads/2013/01/Path-UI.jpg" alt="" width="600" height="220" /></p>
<p><span id="more-6780"></span></p>
<p>Path的创始人Dave Morin说，Path的第二个阶段<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/revision" title="查看 改版 中的全部文章" target="_blank">改版</a></span>是要让人们在人生道路上“抓住所有体验”(capture all the experiences)。这款目前的私密社交<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/application" title="查看 应用 中的全部文章" target="_blank">应用</a></span>王者，其人性化的设计理念与简洁到极点的设计风格可以说是一本教科书，以至于虽然吸引了大批模仿者但是——在这一派风格中——始终无出其右者。</p>
<p>据美国科技博客TechCrunch报道，Path创始人戴夫·∙莫林(Dave Morin)在接受采访时表示，用户一天内在新版Path分享的内容超过老版Path一年的内容内容更新率达到每秒12次新版Path每日活跃用户数在两周半的时间内实现了30倍的增长，上演了从1万人到30万人的完美蜕变外界传言新版Path每日下载量达到10万次，但莫林对此未予证实。自新版Path推出以来，已有超过150万人下载，莫林对这⼀一结果相当满意。老版Path用了一年时间才突破了用户100万人的关口。</p>
<p>回首2011年2月第一代Path发布时的情形。</p>
<p>这是一个拥有 50 人好友上限的 Social <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/application" title="查看 应用 中的全部文章" target="_blank">应用</a></span>。</p>
<p>Wired 这样评价 Path：“…posting on Path is not an act of broadcasting or self-promotion, but sharing a moment with someone who really knows you.” (不是广播，不是自我推销，Path 是将生活瞬间和真正认识你的人分享。)</p>
<p>它运用了反社交的产品概念。</p>
<p>50人小圈子的概念来源于亲近关系在互联网社交中的稀缺性，因此 Path 鼓励人们将重要时刻分享给私密的圈子。这种概念有其成功的一面，用户们的确在斟酌交友的对象；而失败的一面在于，这个力求小众的产品果不然地遇到了用户量不大的问题。</p>
<p><img src="https://qm7l7g.dm1.livefilestore.com/y1pzmtN2vTGJSsiD_Ga5CigEgVOUsMJMq3xZPLJPHTwNQm6tj-0Pp2ZAH-ZY1kk_lWdUG6ur2Mvw2Q73gFOM-IvtgcVMDMsL1BS/path-web.jpg?psid=1" alt="" /></p>
<p>Path2.0——移动<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/socialnetworks" title="查看 社交网络 中的全部文章" target="_blank">社交网络</a></span><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/application" title="查看 应用 中的全部文章" target="_blank">应用</a></span>说明</p>
<p>移动<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/socialnetworks" title="查看 社交网络 中的全部文章" target="_blank">社交网络</a></span>：Google曾打算一亿美元收购Path遭拒，如今移动社交网络Path发布第二代了！Path 2的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/uidesign" title="查看 UI设计 中的全部文章" target="_blank">UI设计</a></span>相当出色。向右滑动会出现设置页，向左滑动会出现添加好友页（可通过通讯录、Facebook添加，或通过邮件邀请），向上向下滑动后，会出现一个时间轴(timeline)，方便地提示你当前查看的Path(即自己或好友的分享)是何时发出的。最核心的是左下角的红白色加号按钮，点击后会出现6类功能，依次是：照片、和谁在一起、当前地点、在听的音乐、在想的事情、以及睡眠，使用起来得心应手，十分方便。你不仅可以和Path好友分享，还能把你的分享发布到Facebook或Foursquare等网站上。</p>
<p>和之前版本相比，Path 2从侧重照片分享走向“分享一切”、好友上限从50人增加到150人、长途旅行以后，Path还会自动利用位置功能帮你发布“已达某地”信息（可在设置里关掉）。</p>
<h2>总体分析此应用结构：</h2>
<h3><strong>导航title有3种：</strong></h3>
<blockquote><p><strong></strong>以“path” 为titlebar文字的首页</p>
<p>以人名为titlebar的个人主页</p>
<p>以地址、歌手名、发布时间为titlebar文字的信息详情页</p></blockquote>
<p>没返回按钮，而是在按钮上以title文字作为导航，也比较清楚的指导用户上一级是哪个页面。另外，工具栏缩略成一个“+”图标，以动态有趣的方式展示，也是其交互一大亮点。</p>
<p><strong>初次进入没有登录前的引导页面，拖到最底部效果：</strong></p>
<p><img title="0.1" src="http://www.damndigital.com/wp-content/uploads/2012/05/0.1.jpg" alt="" width="720" height="537" /></p>
<blockquote><p><strong>亮点1：拖动过程中，遇到有信息的地方，都会浮动动态显示该信息的发布时间。</strong></p></blockquote>
<h3><strong>注册页面，登录页面：</strong></h3>
<p>注册页面输入信息很多，故设计上规避了传统的输入框的样式，而是采用了笔记本条纹栏的样式，以简化视觉元素；在性别和年龄的设置上，采用小一号的字体，弱化展示也节省了页面是所有信息在键盘上方都能完全显示，方便注册输入。</p>
<p><img title="0.2" src="http://www.damndigital.com/wp-content/uploads/2012/05/0.2.jpg" alt="" width="720" height="537" /></p>
<p><strong>注册后选择头像，设置名字：</strong></p>
<p><img title="0.3" src="http://www.damndigital.com/wp-content/uploads/2012/05/0.3.jpg" alt="" width="720" height="379" /></p>
<p><strong>登录过程页面，登陆成功-path首页：</strong></p>
<p><img title="0.4" src="http://www.damndigital.com/wp-content/uploads/2012/05/0.4.jpg" alt="" width="720" height="530" /></p>
<blockquote><p><strong>亮点2：点击左下角的“+”图标，从下至上弧形展开操作图标，“+”图标变为“x”图标；点击每个图标，都会以放大渐隐该图标的动态来进入当前信息发布操作页面。长按页面任意位置或“x”图标，则旋转收回所有的图标还原为默认的收起样式。</strong></p></blockquote>
<p><img title="0.5" src="http://www.damndigital.com/wp-content/uploads/2012/05/0.5.jpg" alt="" width="720" height="530" /></p>
<h3><strong>个人主页：</strong></h3>
<p><strong></strong>注意和path首页的区别，首页有“+”发布各类信息的浮动按钮，而个人主页没有；另外个人主页只有自己发布的信息，故线左侧没有发布人头像。如下，左图是个人首页，右图是path主页。</p>
<blockquote><p><strong>亮点3：首页和个人主页的页面左侧都有一条竖线，每条信息都有一个节点，代表发布当前信息用户的交互人/发布的信息类别。</strong></p>
<ul>
<li>线的节点上是头像，则表示与此人的交互信息，比如好友对某人的评论，加为某人好友，和他在一起等。若同时添加多个好友，则头像图标会动态轮换展示这几个好友的头像。</li>
<li>为空白点则代表自己的普通行为，如加好友，个人信息的设置，说一句话等。</li>
<li>月亮代表睡觉，太阳代表起床，音乐图标代表听到音乐，地点图标代表当前地点发布。</li>
<li>加深的点，表示设置当前城市。</li>
</ul>
</blockquote>
<p>图标设计简洁易识别，色彩亦能体现其功能区别，虽然图标一堆，却没有繁杂感。</p>
<p><img title="0.6" src="http://www.damndigital.com/wp-content/uploads/2012/05/0.6.jpg" alt="" width="720" height="530" /></p>
<blockquote><p><strong>亮点4：点击首页title左侧的menu图标，和title右侧的好友图标，则分别朝右、朝左滑开当前页面展示如下左图，右图，再次点击图标则按原路滑动收回至首页。</strong></p></blockquote>
<p><img title="0.7" src="http://www.damndigital.com/wp-content/uploads/2012/05/0.7.jpg" alt="" width="720" height="264" /></p>
<p>设置-修改保存cover图片的等待过程，收取提示信息的设置图标，以灰色/亮色来表示是否收取。（再次提醒图标设计）注销采用红色按钮，以起警示作用</p>
<p><img title="0.8" src="http://www.damndigital.com/wp-content/uploads/2012/05/0.8.jpg" alt="" width="720" height="353" /></p>
<p>初次使用定位，则将个人定位至当前城市，如下图为西安市，展示最近访问的当地人，及总数。搜索不到地址时，提示创建该位置的弹层</p>
<p><img title="0.9" src="http://www.damndigital.com/wp-content/uploads/2012/05/0.9.jpg" alt="" width="720" height="530" /></p>
<p>点击他人头像进入他人主页，若不是好友，则显示如下左图，加好友过程如下：</p>
<p><img title="1.0" src="http://www.damndigital.com/wp-content/uploads/2012/05/1.0.jpg" alt="" width="720" height="355" /></p>
<h3><strong>加好友成功后，好友的主页：</strong></h3>
<p><img title="1.1" src="http://www.damndigital.com/wp-content/uploads/2012/05/1.1.jpg" alt="" width="720" height="530" /></p>
<p>因为自定义了cover图片（可以理解为网页banner背景吧），每个人的主页都可能效果不同。</p>
<p><strong>查看他人的图片信息详情：</strong></p>
<p>信息的详情页面都有最近访客的头像展示，若某访客在此信息上发表了表情，则在头像上展示该表情。</p>
<ul>
<li>点击图片则全屏展示：若为横向图片，则旋转至横向全屏展示，再次点击图片则旋转收回至原页面；竖向图片则放大至全屏并朝上滑动至页顶，再次点击则朝下收回并缩小至列表样式。</li>
<li>长按图片则弹出save选项弹层。</li>
</ul>
<p><img title="1.2" src="http://www.damndigital.com/wp-content/uploads/2012/05/1.2.jpg" alt="" width="720" height="530" /></p>
<p><strong>音乐信息查看：</strong></p>
<p>点击音乐信息，则弹出音乐操作选项：查看该歌手音乐（右下图）、从itunes下载歌曲</p>
<p><img title="1.3" src="http://www.damndigital.com/wp-content/uploads/2012/05/1.3.jpg" alt="" width="720" height="530" /></p>
<p><strong>查看当前地点签到信息，发布表情交互：</strong></p>
<p>长按自己所发布的信息的右侧表情按钮，则弹出操作层如下：弹层包含发布表情，删除该信息，评论的快捷方式，以及被几个好友查看的记录。</p>
<p><img title="1.4" src="http://www.damndigital.com/wp-content/uploads/2012/05/1.4.jpg" alt="" width="720" height="355" /></p>
<h3>发布信息：</h3>
<p>所有的发布信息页面除了发布心里话之外，发布图片/音乐/和谁一起的第一步是到相应功能的选择图片/音乐/好友，选择完毕则到了“post”发布页面：</p>
<p><strong>thought发布页面：</strong></p>
<p>左下角的锁图标，表示仅对自己可见；右下角是分享至其他应用的按钮。若未绑定则提示绑定。</p>
<p><img title="1.5" src="http://www.damndigital.com/wp-content/uploads/2012/05/1.5.jpg" alt="" width="720" height="530" /></p>
<p><strong>选择地点/好友/音乐页面：</strong></p>
<p><img title="1.6" src="http://www.damndigital.com/wp-content/uploads/2012/05/1.6.jpg" alt="" width="720" height="354" /></p>
<p><strong>选择当前地点/好友/音乐后的post发布页面：</strong></p>
<p><img title="1.7" src="http://www.damndigital.com/wp-content/uploads/2012/05/1.7.jpg" alt="" width="720" height="354" /></p>
<p>最多可以展示with的4个好友（可以选择超过4个，但是此处头像只展示4个），这个页面排版直观而易于操作。</p>
<p>Path 2.0 <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/uidesign" title="查看 UI设计 中的全部文章" target="_blank">UI设计</a></span><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/revision" title="查看 改版 中的全部文章" target="_blank">改版</a></span>。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/product/path-ui.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
