Be For Web - UI http://www.beforweb.com/taxonomy/term/43 en 显而易见的,易达易用的,可达可用的 http://www.beforweb.com/node/770 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-comment-mistake-error-user-experience-design-ui-interface-product.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>上次更新像是好久好久之前了,凉爽的十一假期什么的,裹着帽衫窝在灯下听着Nirvana写着西雅图什么的。依稀记得接下来便是日复一日的晴朗天气,阳光从早到晚肆无忌惮的倾泻在这个魔怔的城市,气温稳步攀升,仿佛即将入夏。烦躁与不安,一切都太亮了。</p> <p>想起来这些日子还是有些什么值得念叨一下的样子,除了天气。</p> <p>上周五,和结识了二十年,并且十三年没有见面的老朋友一起呆了一个下午。想起来仍然恍恍惚惚的做梦一样。吃了顿汉堡王,好像当初在天津一边扯淡一边逛滨江道一样,贯穿了整个南京路,然后在人民公园找了个僻静的角落,玩了一会他刚刚在乐器展花了十二万买到的古典琴。我自然不是古典流,甜美清澈的声音到我手里简直是糟蹋;多数时候看着他弹着那些我叫得上名叫不上名的曲子,头脑中还会时不时的闪回出十三年前在天津一起jam布鲁斯的情景。</p> <p>再回溯到上周日,烦躁的翻看朋友圈时突然立志接下来的一周不看不po。这一周里还真有那么几次产生过欲望,于是筛掉那些过于情绪化的没什么意义的东西,把一些可能会在一周后也就是今天仍想发的东西记录了下来,要么一会更新掉博客之后一并发去好了。指<a class="lightbox" href="http://beforweb.com/sites/default/files/s/c7210-weixin.jpg" rel="lightbox">C7210个人小号</a>,不是<a class="lightbox" href="http://beforweb.com/sites/default/files/s/qrcode-beforweb.jpg" rel="lightbox">Beforweb订阅号</a>呢。上一句话&ldquo;指...呢&rdquo;是没有任何实际意义纯粹打广告的废话。</p> <p>然后我们进入本周译文吧,小文一篇,最近不敢上篇幅了,周末越发忙碌。忙什么呢?忙写代码写app。<a href="http://www.beforweb.com/node/768" target="_blank">之前那篇念叨</a>里提到的莫名其妙把&ldquo;做个自己的小app&rdquo;写到了下半年个人发展目标里的便是这个了。典型的自己挖坑自己跳。整天的,除了码字就是码代码,设计师的情怀呢。下面进入译文。</p> <!--break--><h3> 显而易见的,易达易用的,可达可用的</h3> <p>界面设计工作当中的很多纠结来自于怎样在这三者之间进行权衡。对于不同的功能与内容,如果拿捏不清它们各自的特点及适宜的呈现方式,那么你便很难打造出具有整体性的产品设计方案。</p> <h4> 显而易见的</h4> <p>话说回来,难道&ldquo;明显&rdquo;不是所有功能都应该具备的基本特征吗?恩,除非你的产品足够简单到只做一件事,就像曲别针那样,否则你没办法使所有东西都具有相同的视觉优先性并全部以明显的形式呈现出来。纠结的地方就在这里,对于稍复杂的产品,你必须决定哪些东西应该始终保持显而易见,哪些需要相对易用,而又有哪些只要确保可用即可。无论是产品整体,还是某个功能模块或某个界面,它能做的事情越复杂,你在这方面需要做的决策就越多。</p> <p>这种权衡并不完全等同于功能优先级的划分。我们在产品设计流程中习惯于将功能分为高、中、低优先级,但这种分级本身无法直接解决&ldquo;哪些元素需要始终保持显而易见&rdquo;这个问题。此外,功能优先级当中也不包含&ldquo;成本&rdquo;方面的信息,而这一信息却是设计师在权衡决策时必须要考虑到的要素之一。</p> <p>使某个元素始终保持显而易见,这是需要成本的,你没法让所有元素都显性的呈现,因为你和用户所持有的资源都是有限的。所谓&ldquo;成本&rdquo;和&ldquo;资源&rdquo;,不是指钱,当然严格来讲这些现实当中的物质资源可以在很大程度上左右设计决策 - 我主要指设备屏幕规格和平台特性、用户在典型情境当中的注意力持久度和理解能力等等这些方面的因素。</p> <p>从成本的角度讲,使某个元素保持显而易见是很贵的,因为你同时必须让其他某些东西变得不那么显而易见,否则便不具对比性,而且界面空间无法支持。一山难容二虎 - 每个界面,或是每个由屏幕框架所限定的界面可视区域当中,通常只存在唯一一个最为显性的元素占据统治地位。</p> <p>显而易见是要自始至终的。人们始终要执行的那些任务所对应的功能,那些在任务流程当中一直起着作用的信息,需要自始至终以最明显的方式呈现出来。这里通常包括产品最核心最本质的那些功能与内容。</p> <h4> 易达易用的</h4> <p>对于那些人们时常会用到,但并非自始至终持续需要的功能与信息,应当通过易于触达和记忆的形式提供到用户。在这样的大体原则之下,一切具体情况都取决于实际产品及目标用户的特质。在设计产品时试着识别哪些功能属于&ldquo;自始至终&rdquo;为用户所需,哪些是&ldquo;时常&rdquo;被用到。这事说起来容易,实践当中却没有很具体的标准,并且很容易引发内部争论。无论怎样,最终的划分结果将决定着实际界面当中哪些元素可以持续占据明显的统治位置,而哪些元素保持在易达易用的层面即可。</p> <h4> 可达可用的</h4> <p>最后是那些只需确保可达可用的功能,也就是人们时而或很少用到的东西。它们无需占据太多的舞台空间,用户在需要的时候能够找到并正常使用即可。</p> <p>虽然不如前两者那么重要,但这类功能应对起来有时还是蛮棘手的。通常情况下,归属于这一类别的功能相比于那些需要以&ldquo;显而易见&rdquo;或是&ldquo;易达易用&rdquo;的方式进行呈现的功能来说要多出很多很多,所以在实际当中,与其考虑怎样对它们进行收归隐藏,不如从设计层面反向驱动产品侧,想想有哪些是根本没必要存在的。</p> <h4> 辨别的意义</h4> <p>要尽量准确的辨别出哪些功能需要保持显而易见,哪些需要确保易达易用,又有哪些只需可达可用,这不是一件轻松的事情,需要你在大量的实践当中根据产品和用户的实际情况进行深入思考,同时,用研工作及内部讨论等等也是必不可少的。这是个持续学习并实践的过程。</p> <p>不过,一旦清晰的辨别出各项产品功能对于目标用户的实际意义,你便能从新的维度来思考界面设计,而不只是局限在对于功能优先级的认知范围内。接下来,产出更加符合实际需求,更具整体性的设计方案便是自然而然的了。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 18 Oct 2015 07:09:15 +0000 C7210 770 at http://www.beforweb.com http://www.beforweb.com/node/770#comments 怎样为Apple Watch打造应用体验 http://www.beforweb.com/node/585 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-apple-watch-ui-ux-app-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>贫嘴张大民的幸福生活,一个月里看的第二遍了,酸甜苦辣,嬉笑怒骂,难言。</p> <p>依稀记得在4岁左右全家搬出了大杂院,住进了楼房,约么是1987年吧;从南开附近折腾到了天拖。天拖,就是马志明的《纠纷》里那个丁文元上班的地方,天津拖拉机厂;现在这么想起来,还真有股子老工业的味道,那时则完全无感。无论平房还是楼房,炉子和暖气都是好东西,2003年举家搬来南方之后,心里总觉得缺两样东西,一是暖气二是煎饼果子嘎巴菜。</p> <p>人整天奔命图惜点什么呢,年头越多,越发现,值得珍惜却再也没机会珍惜的东西正在变多。</p> <p>闲话先说到这吧,眼看着天晚了。又来聊Apple Watch了;原文作者做了一些很赞的app概念稿,总结了一些想法。还是那句话,在设计规范和实际产品发布之前一切都是浮云;大家就当热身。下面进入译文。</p> <p>过不了多久,我们就要为一种新设备的体验设计操心了 - Apple Watch。最近,我(英文原文作者)决定在日常工作之外花些时间尝试些新东西,于是打造了一套<a href="http://watch.janlosert.com">我们常用的app在Apple Watch上的界面概念稿</a>。在此过程中,我逐渐开始了解怎样为Apple Watch打造应用体验,在此分享给各位。废话不多说,我们一起来看看吧。</p> <!--break--><h3> 重大挑战</h3> <p>这款设备,真的真的很小。对于我们多年来为手机打造的各种界面元素来说,1.5寸的屏幕确实太小了。这就意味着你需要移除大部分&ldquo;多余&rdquo;的东西,只保留最重要的部分。</p> <p><img alt="01-apple-watch-ux-ui-user-experience-design.png" src="/sites/default/files/images/201411-2/01-apple-watch-ux-ui-user-experience-design.png" style="width: 600px; height: 450px;" /></p> <p class="figure-caption">1.5寸款Apple Watch与信用卡对比图</p> <h3> 怎样传达上乘体验</h3> <p>只聚焦在那些适于Apple Watch使用情境的核心功能上。交互流程必须只包含少量的点击或轻扫 - 复杂的功能没有意义,别忘了用户口袋里还有iPhone,那才是为繁琐的任务流程准备的。每屏只传达一个单元或少量成组的信息,通过优雅且有意义的转场动效将信息与界面衔接起来,让用户经由少量点击或轻扫手势即可完成任务 - 这些都是在Apple Watch上打造上乘体验的关键要素。(推荐阅读:<a href="http://www.beforweb.com/node/558" target="_blank">Apple Watch UI动效解析</a>)</p> <p>不妨结合以上几点看看Cuberto设计的披萨预订应用:</p> <p><img alt="02-apple-watch-ux-ui-user-experience-design.gif" src="/sites/default/files/images/201411-2/02-apple-watch-ux-ui-user-experience-design.gif" style="width: 600px;" /></p> <p class="figure-caption"><a href="https://d13yacurqjgara.cloudfront.net/users/4859/screenshots/1737233/cuberto_applewatch_pizzaapp.gif">浏览GIF图片(5.5M)</a></p> <p>如你所见,以图为主,文字为辅的方式对于如此小屏的设备来说也是极其重要的,因为屏幕上没有足够的空间去展示更多的文字,用户也很难在典型情境中投入阅读。</p> <h3> 适合Apple Watch的应用形态</h3> <p>查看通知是最典型的用例之一,例如来自社交平台的&ldquo;赞&rdquo;或是评论等等,让我简单的看一眼就能知道自己发的推产生了多大的响应,完全不需要把iPhone从口袋里掏出来。</p> <p>一些服务类的应用也可以藉由Apple Watch变得更加有用。例如在Watch版的Uber中,你通过轻轻的触击即可召唤司机。或是设想一下走在路上,通过麦当劳或星巴克的Watch应用快速点一份和昨天一样的套餐并自动支付,到达门店后提货即可。</p> <p>提醒和闹钟类的应用在Watch上也有着自己的发挥空间。面向Apple Watch进行设计时,&ldquo;一次聚焦在一件事上&rdquo;的思路变得尤为重要。设想一下你抬手瞥了一眼Watch,上面显示着&ldquo;记得电话妈妈!&rdquo;或是&ldquo;给女朋友买戒指!&rdquo;一类你之前设置过的提醒信息 - 简单迅速的获取一条信息,就是这样;需要后续操作的话也要保持聚焦,例如说一句&ldquo;给Carl发条消息:我要迟到了&rdquo;,信息被发送出去,任务完成。</p> <p>正如苹果在发布会上所展示的,随手画些图形然后发送出去的想法倒是不错,不过我个人不是很喜欢,主要是交互选形式的问题。界面太小了,还有按钮在上面,也许很难用手指在上面画些什么。</p> <h3> 不适合Apple Watch的应用形态</h3> <p>个人来说,我没看出在Watch上查看银行账户的合理性和必要性;倒是时间、未接来电提醒、脉搏信息、来自社交平台的通知等等才是真的需要。我将Watch看做是通往小信息小互动的桥梁,这些都是不需要把iPhone从口袋里掏出来就能做的事情。也许是因为真正的产品还没上市,我个人对于在手表上阅读Twitter主页或是Facebook时间轴还是表示怀疑态度。我不知道为什么要在Watch上一屏读一条推,而不是拿出手机一屏看七条。</p> <p>基本上,任何超过三屏的内容量对于Watch来说都是复杂的。</p> <h3> 关于界面设计</h3> <p>现有的应用怎样从设计上适配Apple Watch?我挺严肃的看待这个问题,尝试着向用户传达最优体验。于是,前面给大家看到的那些常用app的Watch版概念稿就是成果。当然,所有这些仅供讨论。</p> <p><img alt="03-apple-watch-ux-ui-user-experience-design.png" src="/sites/default/files/images/201411-2/03-apple-watch-ux-ui-user-experience-design.png" style="width: 600px; height: 366px;" /></p> <p>为一种你不曾尝试、甚至还未上市的设备平台进行设计,这确实不是一件容易的事。一方面,没有Skala Preview这样的工具为你提供帮助。我在Photoshop中设计界面时,使用分割视图和智能对象,让其中一个窗口模拟界面在Watch屏幕上的表现。同时我还用到了<a href="https://dribbble.com/shots/1719044-Apple-Watch-Free-Template-PSD">Francesco Scalambrino创建的模板</a>,并简单编辑了一下,将其背景中的智能对象替换成了实际Watch图片中截取出来的背景,以便展示更高质量的设计方案。这里是<a href="https://www.dropbox.com/s/ilu3pdcunrvklio/Apple_Watch_template-edited-by-JAN-LOSERT.psd.zip?dl=0">我自己编辑过的模板</a>。</p> <p>我从<a href="https://www.behance.net/gallery/20459365/Apps-for-Apple-Watch-GUI-PSD">自己制作的那些概念稿</a>中挑出3个来大家近距离看一下。</p> <h3> Yahoo News</h3> <p>Yahoo设计团队的获奖作品,我觉得在Apple Watch上的表现也会不错。加载之后,你会看到几组新闻列表,在各自的类别中点击一下就可以收听最新的新闻的朗读版本,通过横向轻扫的手势可以切换新闻类别,从商业到科技,你可以随时随地在Apple Watch上获取头条消息。当然,最理想的还是有专门的播音员来朗读消息,而不是机械化的语音。</p> <p><img alt="04-apple-watch-ux-ui-user-experience-design.gif" src="/sites/default/files/images/201411-2/04-apple-watch-ux-ui-user-experience-design.gif" style="width: 600px; height: 450px;" /></p> <p class="figure-caption"><a href="https://d262ilb51hltx0.cloudfront.net/max/800/1*_21WdQf5DhRnQgeN-tpcxw.gif">浏览GIF图片(17M)</a></p> <h3> Shazam</h3> <p>这是我自己最喜欢的一稿,我也非常期待着看到Shazam将来为Apple Watch打造的官方版本。这是一款典型的&ldquo;随需而用&rdquo;的产品 - 听到一首不错的曲子?你不必拿出手机,抬起手在Watch上点击一下,稍候片刻便能知道相关信息,就是这样 - 启动、等待、看到结果。</p> <p><img alt="05-apple-watch-ux-ui-user-experience-design.gif" src="/sites/default/files/images/201411-2/05-apple-watch-ux-ui-user-experience-design.gif" style="width: 600px;" /></p> <p class="figure-caption"><a href="https://d262ilb51hltx0.cloudfront.net/max/800/1*6OWl0x5Vx_T-7r-gTxnHSA.gif">浏览GIF图片(19M)</a></p> <h3> Skype</h3> <p>我砍掉了所有的附加功能,只保留了阅读消息和通话。我所设想的流程是这样的:在Watch上看到一条通知:&ldquo;Hi Jan,我们该电话聊聊了,打给我吧&rdquo;;然后我点击回复,按住&ldquo;与对方聊天&rdquo;,在对话框中选择语音对话;或者,我也可以快速回复一条语音信息&ldquo;抱歉伙计,一小时以后吧&rdquo;。</p> <p><img alt="06-apple-watch-ux-ui-user-experience-design.gif" src="/sites/default/files/images/201411-2/06-apple-watch-ux-ui-user-experience-design.gif" style="width: 600px;" /></p> <p class="figure-caption"><a href="https://d262ilb51hltx0.cloudfront.net/max/800/1*1UWoaw0FIt9yi8qdrmt3qg.gif">查看GIF图片(28M)</a></p> <p>显然,还有很多问题等待着答案。举个例子,对于语音,我们都知道在大街上对Siri讲话是什么感觉,虽然已经逐渐习惯,但仍然怪怪的。接下来,我们要对着自己的手腕子说话吗?有点动作片明星的感觉。</p> <p>另外有谁好奇过怎样在Apple Watch上的联系人列表中显示名字吗?相信很多人都看过苹果官方的演示视频,在联系人界面中,每个人的名字都只有4个字母;不知实际当中他们是怎样进行处理的。</p> <p><img alt="07-apple-watch-ux-ui-user-experience-design.png" src="/sites/default/files/images/201411-2/07-apple-watch-ux-ui-user-experience-design.png" style="width: 600px;" /></p> <h3> 小结</h3> <p>就是这样,这些就是我在尝试着为Apple Watch进行设计的一周之后总结出的一些想法。我个人很享受这项挑战,不过我目前来说还不是很确定自己喜欢这款产品,真的要对着手腕说话?说到这里我倒是想起我朋友在iPad发布之后问的问题:怎么在这种设备上使用语音?</p> <p>我想,过不许久,世界各地的设计师和开发者们就将向我们展示他们的各种想法,我们的世界将再一次被改变。我已经为那样的生活做好了准备。</p> <p>大家觉得呢?</p> <p>Apple Watch预计在2015年初期上市,售价$349起。苹果计划在本月(2014年11月)发布WatchKit SDK,届时开发者们就可以先玩起来了。</p> <p>你准备买一块Apple Watch吗?</p> <div class="embed"><article id="node-571" class="node node-related-books" about="/node/571" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/苹果的产品设计之道-创建优秀产品-服务和用户体验的七个原则-埃德森/dp/B00E11HAKC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="苹果的产品设计之道" src="/sites/default/files/images/products/78.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/苹果的产品设计之道-创建优秀产品-服务和用户体验的七个原则-埃德森/dp/B00E11HAKC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">苹果的产品设计之道</a></h4> <p><a href="http://www.amazon.cn/苹果的产品设计之道-创建优秀产品-服务和用户体验的七个原则-埃德森/dp/B00E11HAKC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">国际知名设计公司LUNAR设计公司总裁John Edson结合自己多年的设计经验,深入苹果公司内部,对苹果公司的大量设计师和领导层进行了深度的采访,提炼和总结出了苹果公司在产品设计领域所遵循的七大原则...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/171" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 16 Nov 2014 07:45:31 +0000 C7210 585 at http://www.beforweb.com http://www.beforweb.com/node/585#comments 关于动效 - 要潜移默化,还是要引人注目? http://www.beforweb.com/node/578 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-comment-mistake-error-user-experience-design-ui-interface-product.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周日下午,天气好的又有些不真实。</p> <p>电视里编辑部的故事在哇啦哇啦放着,恍惚之间回想着小学3年级每天中午回家自己用电饭锅热热午饭,然后把碗和盘子放在方凳子上搬到电视前面一边看一边吃的样子。我几乎记得这二、三十年间所有的事情。</p> <p>&ldquo;投入蓝天,你就是白云;投入白云,你就是细雨...&rdquo;,多好的歌词儿。现在想来,那个时候,人所行事,大多是认真和真诚的,没那么多浮夸和杂念;经历过八、九十年代,也算有幸。</p> <p>扯哪去了?自己觉得没头没脑说了很多,看看却也只有两段字,大约是想到那些就开始做起白日梦好像自己回到了小时候一样,以至于感到时间过去了很久。说正事儿吧?关于界面动效的话题;算的上是大道理。下面进入正文。</p> <p>看完这篇文章之后,你也许会意识到,你在各种应用里看到的所有动效,其中有80%可能是不恰当的,或是根本没必要存在的。</p> <!--break--><p>本质上讲,应用界面是在显示屏的2D框架当中为我们呈现更广阔的2D甚至是3D世界的。在现实生活中,如果你把锤子放在抽屉里,那么它就在那里,你知道拉开抽屉就能看到。而在手机里,如果一个元素移出屏幕,它就不再&ldquo;存在&rdquo;了。所以,要把应用设计的更加&ldquo;符合直觉&rdquo;,很重要的一点就是尽量让界面元素以用户在现实生活中熟悉的方式进行运动。</p> <p>一直以来,我设计应用,苦心研究各种应用,读书,在网上消费内容...经验告诉我,各类界面中的动效大体可以分为两类:</p> <ul> <li> 潜移默化的动效</li> <li> 引人注目的动效</li> </ul> <h3> 潜移默化的动效</h3> <p>你用Facebook吗?当然。先不要打开Facebook的应用,告诉我:当你在feed界面里上下滚屏时,除了内容以外,还有什么元素在移动吗?仔细想想...</p> <p>答案就是:当然有了呗。</p> <p><img alt="01-movement-design-motion-animation-mobile-app-ui-ux.gif" src="/sites/default/files/images/201410-2/01-movement-design-motion-animation-mobile-app-ui-ux.gif" /></p> <p>这么一说,也许有的人才意识到,内容滚动时,顶部的搜索栏会自动收起;其实是挺明显的交互,意图就是在用户浏览内容时提供更多的可视空间。看上去很简单的事情,但妙就妙在用户也许根本不会注意到这一点。</p> <p>这就是&ldquo;潜移默化的动效&rdquo;的经典范例:<strong>对于我的操作行为,界面元素能够以非常符合直觉的、甚至是不会让我注意到的方式进行响应。</strong></p> <p>(前方高能)</p> <p>Achvr应用则是一个反例。在Facebook中,当我的手指上移5像素时,顶部搜索栏也会上移5像素,这种对应关系让我感觉正是自己的动作使搜索栏逐渐隐藏起来。而在Achvr当中,一个很小的滚屏操作就会导致内容产生大幅度的移动,交互体验非常不符合预期。在Facebook中,我们几乎不会留意到界面本身的变化,而在Achvr里,我的注意力则被迫集中到了界面交互上。</p> <p><img alt="02-movement-design-motion-animation-mobile-app-ui-ux.gif" src="/sites/default/files/images/201410-2/02-movement-design-motion-animation-mobile-app-ui-ux.gif" /></p> <p>要知道,在上面两张图片当中,我的手指移动距离是相同的。</p> <p>刷屏用...</p> <p>刷屏用...</p> <p>刷屏用...</p> <p>刷屏用...</p> <p>刷屏用...</p> <p>刷屏用...</p> <p>刷屏用...</p> <h3> 这是什么情况?</h3> <p>Apollo Robbins在<a href="https://www.youtube.com/watch?v=GZGY0wPAnus">TED</a>上为我们演示了扒手行窃的过程,并讨论了为什么我们的大脑每次只能聚焦在很少的事物上,例如演讲台上的聚光灯。</p> <p><img alt="03-movement-design-motion-animation-mobile-app-ui-ux.gif" src="/sites/default/files/images/201410-2/03-movement-design-motion-animation-mobile-app-ui-ux.gif" /></p> <p>我们来做个小实验:看看你的iPhone主界面左下角是哪个应用?现在就试试,看看是否和你记忆中的一致。</p> <p>然后把手机放起来,同时也不要看任何其他设备,告诉我,现在几点?</p> <p>实际上在前面看手机的过程里你至少能看到两次时间,但你很可能完全没有注意到。</p> <p><strong>简单的、符合直觉的日常事物通常会被大脑所忽略,因为它很难在其中发现什么有意思的或是值得惊讶的东西</strong>。另一方面,你现在的注意力仍然会被上面那张图左下角闪烁的小方块所吸引,对吧?因为它所处的情境并不符合我们的直觉,你不理解这个东西为什么会一直在那闪烁,因此你的大脑会将注意力放在上面。</p> <p>所以,当我们在Facebook中滚屏时,由于搜索栏隐藏的过程完全符合我们在移动手指时的操作直觉,我们通常难以注意到这一点;而Achvr的内容在移动时大大超出了我们在潜意识中对操作结果的预期,所以感觉很突兀。</p> <p>有时,你不希望用户注意到某些东西,而有些时候正相反。这也引出了我们要讨论的第二类动效:</p> <h3> 引人注目的动效</h3> <p>也许你已经猜到了,这类动效的主旨就是引导用户将注意力集中到某个地方,譬如一些你希望用户注意到的新功能。</p> <p><img alt="04-movement-design-motion-animation-mobile-app-ui-ux.gif" src="/sites/default/files/images/201410-2/04-movement-design-motion-animation-mobile-app-ui-ux.gif" /></p> <p>上面的动画图片演示的是Animoto Video Maker应用,我最喜欢用它来演示这类用以聚焦注意力的动效。为了避免使用新手教程一类累赘的东西,Animoto力图打造极其简单移动的界面,并通过动效来吸引用户的注意力,诠释操作方法。当用户进入上图演示的界面,突然看到面板在弹跳,便很难不去试着点开它看个究竟。</p> <p><img alt="05-movement-design-motion-animation-mobile-app-ui-ux.gif" src="/sites/default/files/images/201410-2/05-movement-design-motion-animation-mobile-app-ui-ux.gif" /></p> <p>上图演示的是Jink应用的介绍界面。你的目光注意到哪里了?自然是动效。人们通常不会留意新应用的介绍界面,但我在Jink当中真的留意了。很多应用都试着让用户在这些界面里读一些简介文字,但Jink只是把文字作为诠释动画演示的辅助信息。</p> <h3> 结论</h3> <p>&ldquo;天啊,看看我实现了怎样的效果!&rdquo;几乎每个新开发者都会这样讲。这种感觉确实不坏,但也是很危险的。一开始你还不知道怎样呈现一个UI元素,突然间你可以让所有的东西都很炫酷的移来移去了。很久以前我也是这样的,而且如今也时常会陷入这种欲望当中。但是,我们必须时刻记得,你刚刚实现的漂亮动效,未必是真正必要的。记得考虑以下几点:</p> <ol> <li> <strong>你有能力让UI元素动起来,不代表你应该这样做</strong>。</li> <li> <strong>多数动效会天然的归类到&ldquo;引人注目的动效&rdquo;行列当中</strong>,这就意味着它们很容易将用户的注意力从那些真正重要的元素让移开。如果你不能确定某个动效是真正必要的,还是去掉吧。</li> <li> 如果有些东西必须动起来,<strong>问问你自己,这里的内容或功能是需要潜移默化的发生变化,还是需要用户立刻注意到?</strong></li> <li> 找一个资深开发人员,问问他们的看法。你的朋友们如果知道这东西是你做的,通常会倾向于告诉你它真的很不错;但开发人员知道这些动效是怎样实现出来的,他们不会被表面的炫酷或创新所影响。</li> <li> 试着观察产品在实际情境中的表现。我强烈建议,不要只观察那些优秀的应用,糟糕的产品同样值得解读。好的应用能告诉你哪些东西可以为用户带来价值,差劲的应用可以让你知道哪些方式是根本行不通的。</li> <li> &ldquo;潜移默化的动效&rdquo;比&ldquo;引人注目的动效&rdquo;要难设计的多,记得多花些心思去钻研分析。</li> </ol> <h3> 等下,关于...</h3> <p>你也许会说,那些传统的动效,例如界面的层级递进、变色、弹出、放大缩小等等,都是不同风格的动效呢,怎么会只能分为两类?我同意,这些动效每一个都可以单独拎出来探讨探讨,但我同样相信,从大体上讲,动效主要就是用来做两件事的:</p> <ul> <li> 以符合直觉的方式对用户的行为进行反馈响应。</li> <li> 吸引用户的注意力。</li> </ul> <p>所以,以后我们都可以试着从这两个方向出发,来观察观察我们平时见到的各种应用产品是怎样打造动效的;针对这两方面的目标,其设计方案是否合理并值得学习。</p> <div class="embed"><article id="node-273" class="node node-related-books" about="/node/273" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/图灵交互设计丛书-设计师要懂心理学-魏因申克/dp/B00COG458G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="设计师要懂心理学" src="http://beforweb.com/sites/default/files/images/products/17.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/图灵交互设计丛书-设计师要懂心理学-魏因申克/dp/B00COG458G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">设计师要懂心理学</a></h4> <p><a href="http://www.amazon.cn/图灵交互设计丛书-设计师要懂心理学-魏因申克/dp/B00COG458G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书以创造直观而又有吸引力的设计为宗旨,讨论了设计师必须知道的100个心理学问题,每个问题短小精悍,片刻即可读完,让人轻松地理解设计背后的心理学动机...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/172" typeof="skos:Concept" property="rdfs:label skos:prefLabel">动效</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 19 Oct 2014 06:47:25 +0000 C7210 578 at http://www.beforweb.com http://www.beforweb.com/node/578#comments Apple Watch应用设计预热(1) http://www.beforweb.com/node/569 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-apple-watch-watchkit-app-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>我想的挺好:既然假期要好好照顾喵,哪里都去不了,便安心在家做事,看书,玩游戏;这也是若干年来的传统。然后就倒下了。也许保持平日的规律还不会有问题,一旦放假有了更多时间让自己休息吧,反而挂了。</p> <p>这不是一篇正经的更新。所谓&ldquo;设计预热&rdquo;,其实就是收集的一些概念设计而已。我不喜欢概念稿,这是真的;最让我反胃的就是从前那些充满科幻气息的Apple Watch概念稿。话说那种东西倒真是有很多人点赞,难怪本尊发布之后反倒被各种吐槽了。说着说着又来劲了;之前在&ldquo;<a href="http://www.beforweb.com/node/558" target="_blank">Apple Watch UI动效解析</a>&rdquo;一文中已经聊过一些自己的看法了,不多说了。</p> <p>有朋友要问了那你现在为嘛要看概念稿了呢?主要是硬件概念设计里面无聊的YY太多太多,而眼下要看的这些Apple Watch应用概念设计则主要是你我这样的第三方应用设计师根据目前苹果放出的展示进行的摸索,不至于过分的空中楼阁。</p> <p>恩,下面就只有图片没有文字了。5个比较完整的设计展示。再叨咕一句,苹果官方尚未放出任何关于Apple Watch的设计规范,概念设计中的优点槽点请自行判断;纯当看热闹也无妨。</p> <!--break--><h3> Health Connect</h3> <p><a href="https://www.behance.net/gallery/19887211/HealthConnect-App-for-Apple-Watch-"><img alt="01-apple-watch-app-ui-ux-user-experience-interfface-design.jpg" src="/sites/default/files/images/201410-1-applewatch/01-apple-watch-app-ui-ux-user-experience-interfface-design.jpg" style="width: 600px; height: 5327px;" /></a></p> <h3> Second Wind</h3> <p><a href="https://www.behance.net/gallery/19835051/Second-Wind-for-Apple-Watch"><img alt="02-apple-watch-app-ui-ux-user-experience-interfface-design.jpg" src="/sites/default/files/images/201410-1-applewatch/02-apple-watch-app-ui-ux-user-experience-interfface-design.jpg" style="width: 600px; height: 7786px;" /></a></p> <h3> Gmail</h3> <p><a href="https://www.behance.net/gallery/19900337/Gmail-Apple-Watch-Concept"><img alt="03-apple-watch-app-ui-ux-user-experience-interfface-design.png" src="/sites/default/files/images/201410-1-applewatch/03-apple-watch-app-ui-ux-user-experience-interfface-design.png" style="width: 600px; height: 3635px;" /></a></p> <h3> Whatsapp</h3> <p><a href="https://www.behance.net/gallery/19721003/Whatsapp-Apple-watch"><img alt="04-apple-watch-app-ui-ux-user-experience-interfface-design.jpg" src="/sites/default/files/images/201410-1-applewatch/04-apple-watch-app-ui-ux-user-experience-interfface-design.jpg" style="width: 600px; height: 6630px;" /></a></p> <h3> Skype &amp; Viber</h3> <p><a href="https://www.behance.net/gallery/19824643/Apple-Watch-with-Skype-and-Viber"><img alt="05-apple-watch-app-ui-ux-user-experience-interfface-design.png" src="/sites/default/files/images/201410-1-applewatch/05-apple-watch-app-ui-ux-user-experience-interfface-design.png" style="width: 600px; height: 17694px;" /></a></p> <div class="embed"><article id="node-571" class="node node-related-books" about="/node/571" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/苹果的产品设计之道-创建优秀产品-服务和用户体验的七个原则-埃德森/dp/B00E11HAKC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="苹果的产品设计之道" src="/sites/default/files/images/products/78.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/苹果的产品设计之道-创建优秀产品-服务和用户体验的七个原则-埃德森/dp/B00E11HAKC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">苹果的产品设计之道</a></h4> <p><a href="http://www.amazon.cn/苹果的产品设计之道-创建优秀产品-服务和用户体验的七个原则-埃德森/dp/B00E11HAKC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">国际知名设计公司LUNAR设计公司总裁John Edson结合自己多年的设计经验,深入苹果公司内部,对苹果公司的大量设计师和领导层进行了深度的采访,提炼和总结出了苹果公司在产品设计领域所遵循的七大原则...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/171" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch</a></li></ul> Sat, 04 Oct 2014 12:41:52 +0000 C7210 569 at http://www.beforweb.com http://www.beforweb.com/node/569#comments 关于Apple Watch的字体设计 http://www.beforweb.com/node/561 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-apple-watch-ui-font-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>十月二日晚间11点,刚看掉教父2,现在是甲方乙方,脑子有点转不过来。</p> <p>当然译文不是一边看片子一边做的;之前就做好;假期,大家两便,看些小文。其实说小也真不算是小事儿,苹果在新设备里使用新字体。恩,仍然是Apple Watch方面的话题。直接进入正文吧;btw,各位假期愉快。</p> <p>市面上关于Apple Watch的各种评价仍在继续,不过透过一个小小的设计元素,我们也许能瞥见库比蒂诺的那些家伙在UI方面的新策略:开发新字体。</p> <p>虽然苹果有过开发字体的历史,不过近20年来,他们主要依赖的还是Helvetica系,即使在新的iPhone及桌面系统中也是如此。但Apple Watch却带来了一套由苹果自己全新开发的、尚未知名的无衬线字体;正如<a href="http://www.apple.com/cn/watch/technology/#familiar">官网</a>中所讲:&ldquo;我们甚至专门开发了一种更易阅读的新字体。&rdquo;</p> <!--break--><p>那么,苹果为什么突然间又开始自己开发字体了?字体设计师兼字体授权公司FontShop的创始人<a href="http://spiekermann.com/">Erik Spiekermann</a>认为,&ldquo;他们不这样做才怪&rdquo;。首先,对苹果来说,创建新字体远比购买授权要划算的多。&ldquo;即使每台设备只需付一美分的授权费,对于那么大的数量级来说也是一笔可观的开销,这足够你好好设计开发一款自己的字体了。&rdquo;</p> <p>此外,要为一款特定的设备寻找一套最适合的字体,这也许是更加困难的事情。毕竟,市面上没有哪款字体是专门为你的设备量身定制的。过去,苹果一直宣称由于良好的易读性而采用Helvetica,但这个解释未必站得住脚。Helvetica的著名之处在于它那中世纪现代风格的味道;它并不是为如今的小屏幕设备而设计的。Spiekermann更是认为,对于苹果在移动设备中所设置的字号来说,Helvetica几乎是体现不出什么价值的。</p> <p>而Apple Watch字体(姑且这么叫)生来就只针对于一件事:让文字在如此微小的屏幕上更加易读。它的设计在很大程度上借鉴了<a href="https://www.myfonts.com/fonts/linotype/din-next">DIN系</a>,这是一种在易读性和空间利用率方面都很不错的字体。魏玛时期的德国将该字体用在公路与铁路的指示牌上,而后人则向其字形中增加了更多的弧形,以更加适应数码设备的特性。略具讽刺意味的是,Apple Watch字体和安卓自带的Roboto也很相似。&ldquo;看来他们两家的团队都在寻找具有某种特性的字体风格,并且殊途同归了&rdquo;<a href="http://typographica.org">Typographica</a>的Stephen Coles这样说。</p> <p><img alt="01-s-apple-watch-type-design.jpg" src="/sites/default/files/images/201409-1/01-s-apple-watch-type-design.jpg" style="width: 600px; height: 337px;" /></p> <p>苹果自己打造字体的另外一个因素也许在品牌方面。&ldquo;这也是我对他们使用Helvetica字体的另一个质疑&mdash;&mdash;它并不属于苹果的品牌体系,任何人都可以效仿。&rdquo;Spiekermann说。自己定制开发的字体则不会有这方面的问题,虽然它不像苹果自己的另外一款字体<a href="http://gizmodo.com/the-best-typeface-apple-ever-had-1625325454">Chicago</a>那样的特色鲜明。</p> <p>我们有理由听听Spiekermann谈论苹果字体方面的话题&mdash;&mdash;因为苹果本身就在听。Spiekermann与Jony Ive熟识已久,并且时不时的接到苹果打来的征询字体使用建议的电话。他还在今年7月收到了苹果的offer,推测是去带一个新的字体设计团队。不过Spiekermann拒掉了这份offer(&ldquo;我不想让自己的退休生活被工作毁掉&rdquo;,他这样解释)。他说苹果确实在打造自家字体这件事上变得认真起来,为了向所有的用户传递更出色的产品体验。</p> <div class="embed"><article id="node-565" class="node node-related-books" about="/node/565" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/%E5%AD%97%E4%BD%93%E4%BC%A0%E5%A5%87-%E5%BD%B1%E5%93%8D%E4%B8%96%E7%95%8C%E7%9A%84Helvetica-%E6%8B%89%E6%96%AF%E2%80%A2%E7%BC%AA%E5%8B%92/dp/B00AEJ8D24/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="字体传奇:影响世界的Helvetica" src="/sites/default/files/images/products/75.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/%E5%AD%97%E4%BD%93%E4%BC%A0%E5%A5%87-%E5%BD%B1%E5%93%8D%E4%B8%96%E7%95%8C%E7%9A%84Helvetica-%E6%8B%89%E6%96%AF%E2%80%A2%E7%BC%AA%E5%8B%92/dp/B00AEJ8D24/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">字体传奇:影响世界的Helvetica</a></h4> <p><a href="http://www.amazon.cn/%E5%AD%97%E4%BD%93%E4%BC%A0%E5%A5%87-%E5%BD%B1%E5%93%8D%E4%B8%96%E7%95%8C%E7%9A%84Helvetica-%E6%8B%89%E6%96%AF%E2%80%A2%E7%BC%AA%E5%8B%92/dp/B00AEJ8D24/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">这是一本关于传奇字体Helvetica的图文书。书中通过大量从未出版过的珍贵资料,以开阔的视野呈现了字体Helvetica所历经的社会、文化甚至于跨时代的演变过程,还普及了关于字体的通俗知识,以及世界范围内广为流传的字体特征...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/171" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/173" typeof="skos:Concept" property="rdfs:label skos:prefLabel">字体</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Thu, 02 Oct 2014 15:03:53 +0000 C7210 561 at http://www.beforweb.com http://www.beforweb.com/node/561#comments Apple Watch UI动效解析 http://www.beforweb.com/node/558 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-apple-watch-ux-app-design-ui-m.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>快到十一假期了。我讨厌十一假期,和讨厌中秋一样讨厌。从去年开始的。</p> <p>要倒假期,只休个周六;那么姑且把今天当做一个加班的周六好了,明天是周日。又有什么不同呢,骗自己骗的还这么站不住脚。</p> <p>于是周五晚间把更新做掉;开始关注Apple Watch。爱这东西,有拥有欲。看到那么多&ldquo;丑&rdquo;、&ldquo;没设计感&rdquo;、&ldquo;没有特色&rdquo;、&ldquo;没创新&rdquo;一类的评论,无论当时心情多差的时候都会笑出来;你们以为苹果会把Watch做的像网上那些充满各种科技感的无聊的概念设计那样吗?这是和人体关联极致密切的最个人化的设备,什么叫个人化?就是它要依附于你的个性你的特质而存在;科技感?未来感?极客?拜托,那样人反而成为陪衬了好吗?我想要的是风格中性而工艺考究、毫不张扬却值得信赖的东西,而Apple Watch就是这样的东西。</p> <p>不多扯了,还不到10点就有点困了;今晚我要稍微多喝一点点;走吧。文中的GIF图片较大,需等。</p> <p>看过Apple Watch的keynote之后,我们惊讶于其UI体验当中所包含的大量动效。也许是出于渲染效率和电量消耗等方面的考虑,Apple Watch的UI本身相当简约,没有过多的视觉元素;这也使得其中所包含的各种转场动效成为提升使用体验的关键要素之一。</p> <p>此外我们还会发现,苹果向我们展示的不只是少数几个所谓的&ldquo;标准动效&rdquo;,实际上几乎每个界面当中的动效都是针对其特定的内容形式所打造的;这也体现出了苹果在其交互设计方面所下的功夫。</p> <!--break--><p>为了将这些复杂的动效研究清楚,我们把演示视频当中展示的一些典型动效截取了下来,在本文中稍作分析。首先必须做个免责声明:在2015年Apple Watch正式发售之前,我们无法确定它们的最终形式会是怎样;一切以目前官方给到的演示为准。</p> <h3> 打开和退出应用</h3> <p><img alt="apple-watch-ui-animations-ux-design.gif" src="/sites/default/files/images/201409-1/01-apple-watch-ui-animations-ux-design.gif" /></p> <p>打开应用时的放大动效与iOS7的方式类似,比较值得注意的是,在应用图标与界面本身交叉渐变的过程当中,界面的矩形区域始终与图标的圆形区域保持契合,同步放大。在此过程当中,其他的图标彼此逐渐远离的效果很像星球大战电影里超光速推进时的视效;想到苹果提到的&ldquo;应用星系(app galaxy)&rdquo;这个概念了。</p> <p>目前我们还无从了解的是,如果你点击的不是屏幕中央的应用图标,那么情况会是怎样。被点击的图标会首先移动到屏幕中央然后再放大吗?或是直接从所在的位置放大?</p> <p>退出的动效与打开时相反,界面缩小淡出,应用自身的图标以及周围的&ldquo;邻居们&rdquo;又逐渐汇集到一起。</p> <p><img alt="apple-watch-ui-animations-ux-design.gif" src="/sites/default/files/images/201409-1/02-apple-watch-ui-animations-ux-design.gif" /></p> <h3> 接听来电</h3> <p><img alt="apple-watch-ui-animations-ux-design.gif" src="/sites/default/files/images/201409-1/03-apple-watch-ui-animations-ux-design.gif" /></p> <p class="figure-caption">向下平移的效果来自于keynote演示本身,不包含在UI动效当中。</p> <p>接听电话的过程很简单,不过所包含的运动元素还不少:点击后,绿色的接听按钮缩小,静音按钮在同一位置放大呈现,界面顶部出现音量控制,&ldquo;incoming call&quot;提示变为通话计时,同时底部的上拉提示条下移消失。也许你注意到了,这个过程中所有的动效都是不同的,每个元素都以各自的方式呈现或消失。</p> <h3> 回复消息</h3> <p><img alt="apple-watch-ui-animations-ux-design.gif" src="/sites/default/files/images/201409-1/04-apple-watch-ui-animations-ux-design.gif" /></p> <p class="figure-caption">向上平移的效果来自于keynote演示本身,不包含在UI动效当中。</p> <p>收到消息时,原本的表盘界面会向后隐退;同时,带有短消息图标、发送人姓名及&ldquo;messages&rdquo;标题的提示会自下而上的滑入界面,静止前有轻微的弹跳效果。经过一段时间(或点击后?),提示中的文字内容上移淡出,短消息图标缩小并移至左上角,同时消息正文及&ldquo;回复&rdquo;按钮自下而上滑入界面。</p> <p>&ldquo;回复&rdquo;按钮被点击之后会略微缩小淡出,注意这里没有反弹恢复原样的效果。然后整个信息放大淡出,之前隐退到后面的表盘界面以y轴为中心向后翻转(flip),同时包含了各种回复选项的界面翻转至最前方。</p> <p>概念上讲这套动效确实够复杂。收到消息提示后为什么要让表盘界面模糊的隐退到后方(类似iOS7中通过毛玻璃表现内容与上下文环境的层次关系?),唤出回复界面时为什么要通过翻转的方式实现?也许是以为内前两个提示性质的界面并不属于某个特定的应用环境,只有进行回复时才算进入了正式的应用当中。挺有意思的组合运用方式,期待看到更多这样的例子。</p> <h3> 查看日历</h3> <p><img alt="apple-watch-ui-animations-ux-design.gif" src="/sites/default/files/images/201409-1/05-apple-watch-ui-animations-ux-design.gif" /></p> <p>在日历中打开特定日期行事表的转场方式倒是和安卓蛮像的。点击当前日期,圆角矩形的指示符会轻微的缩小淡出,然后恢复原样,接下来界面开始切换,日历界面向左滑出,行事表界面放大渐入。切换过程中,右上角的当前时间不发生任何变化。</p> <p>不知道点击非当前日期的话(没有当日指示符),会有怎样的响应样式体现在日期数字上。</p> <h3> 删除邮件</h3> <p><img alt="apple-watch-ui-animations-ux-design.gif" src="/sites/default/files/images/201409-1/06-apple-watch-ui-animations-ux-design.gif" /></p> <p class="figure-caption">向左平移的效果来自于keynote演示本身,不包含在UI动效当中。</p> <p>在某条邮件上向左侧轻扫,展开情境菜单。点击其中的垃圾桶图标,会使其高亮并缩小,然后反弹恢复原样。高亮的过程似乎与&ldquo;点击推远&rdquo;的感觉有些矛盾,不过这样做或许是因为这里的图标本身就已经蛮暗了的缘故。</p> <p>点击垃圾桶图标之后,这条邮件会右移恢复原状,然后淡出,同时下方的邮件列表覆盖上来。或许这种模式在将来会成为内容列表上的标准行为?</p> <h3> 健康应用的选择</h3> <p><img alt="" src="/sites/default/files/images/201409-1/07-apple-watch-ui-animations-ux-design.gif" /></p> <p class="figure-caption">向左平移的效果来自于keynote演示本身,不包含在UI动效当中。</p> <p>在健康应用中选择跑步,接下来的转场动效分为两个阶段。首先,被选中的跑步按钮会略微缩小并闪烁一次,作为对点击的响应;同时其他按钮会依次淡出消失。然后跑步按钮下滑至底部,同时变色、放大并改变标题为&ldquo;开始&rdquo;,在此过程中,其他内容元素依次淡入呈现;数字是例外它会自下而上从某个隐藏的层面背后滑入界面。</p> <h3> 结论</h3> <p>假设我们目前看到的这些就是Apple Watch正式发售时带给我们的,那么我们能得到的结论就是...这里面真的用到了很多动效。任何一个界面元素在发生状态变化时总是伴随着滑动、放大缩小、渐入或淡出等动效。</p> <p>可以说,当前这套风格属于某种折中的设计决策,其中的每种动效都是针对特定的时间、界面空间及上下文环境的,力求最准确的体现出特定情境中的交互过程。&ldquo;情境化&rdquo;是这里的关键:通过优化每个界面、每个环节当中的交互体验,来弥补极端有限的屏幕尺寸所带来的缺陷;牺牲了全局统一性,换来了在任何一个特定的界面环境中提供最合适的交互模式。如果将Apple Watch和Android Wear做以对比,我们会发现它们在这方面的策略相当不同;后者力求最普遍适用的全局统一交互模式,但代价就是产生了更多的步骤和点击。</p> <p>具体汇总一下Apple Watch当中的交互要点:</p> <ul> <li> 界面元素对点击的响应方式多种多样。通常会产生缩小的效果,像是被按下去一样,但接下来是否恢复原状要看具体情况。</li> <li> 动效形式&ldquo;有针对性的不统一&rdquo;。同样,在同一个界面中的不同元素也会有各自的运动方式。</li> <li> 不强调&ldquo;对称&rdquo;。例如在某些类型内容中,新元素进入界面的方式与旧元素离开的方式不同;不过在某些情况下新旧元素只是通过简单的交叉渐变来更替。</li> <li> 右上角的时间看来是最&ldquo;静态&rdquo;的信息了。它出现在很多界面的相同位置,并且在界面发生切换时保持不动。不过具体哪些界面需要显示时间,哪些不需要,目前看上去还没有明确的规则。</li> <li> 目前看来导航系统的设计原则还不是很严格,譬如在不同的界面中导航到下一级的方式会有所不同。如果是底部有页码指示符(点点点)的界面,通常是通过左右滑动来浏览内容;而某些界面的左上角会用来放置返回上级界面的链接;同样,目前这些都不是100%确定的规则。</li> <li> 滑动和放大/缩小过程中的加速动效看上去有正弦曲线的特性,在结束前通常还包括弹跳效果。</li> </ul> <p>总而言之,Apple Watch在应用界面设计方面打破了很多常规的东西,接下来将要面对的挑战似乎也不少;他们对动效的关注程度强烈到你根本无法去忽视。看上去在将来设计应用时,只加入&ldquo;一点点&rdquo;动效的策略很难行得通,譬如最基本的滑动或淡入淡出一类;你可能需要押上全部筹码来做好这件事。这不太容易,因为业界里真正在这方面有深入研究的设计师可能不是很多。你不能随便的在这里或那里做些装饰;动效需要明确的目的性,需要针对特定的应用和界面环境进行设计。要找到最合适的模式,你也许需要通过原型进行大量的尝试和迭代。</p> <p>苹果所面临的挑战之一,就是怎样保持生态圈的高品质标准。一方面,他们不能让将来运行在Apple Watch上的应用带给用户糟糕混乱的体验,另一方面他们又确实需要通过一些优秀的应用来传递出Watch的价值。十万款应用当中有五千个Twitter客户端和成百上千的烂应用&mdash;&mdash;这不是苹果需要的&mdash;&mdash;他们更需要1000个品质优秀、创意丰富、满足独特需求的好应用。所以我个人感觉,将来的应用审核标准会比眼下iOS方面要严格很多,审核条件中也许会包括&ldquo;需要提供精美的动效,以提供上乘的体验&rdquo;这样的规则。当然,这纯属猜测,我们仍需要等上至少几个月才能见到官方的设计开发规范。</p> <div class="embed"><article id="node-395" class="node node-related-books" about="/node/395" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/苹果首席设计师-乔纳森传-利恩德·卡尼/dp/B00H3VQHEW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="乔纳森传" src="/sites/default/files/images/products/69.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/苹果首席设计师-乔纳森传-利恩德·卡尼/dp/B00H3VQHEW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">乔纳森传</a></h4> <p><a href="http://www.amazon.cn/苹果首席设计师-乔纳森传-利恩德·卡尼/dp/B00H3VQHEW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">从用户的角度来思考设计初衷、追求简洁、钟爱白色、提高科技产品的亲和力,这些都是乔纳森灌输给苹果公司设计部门的新元素。他致力于将设计与生产过程相结合,并结合自己对于设计的理解,形成了独有的乔纳森式的设计理念...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/news" typeof="skos:Concept" property="rdfs:label skos:prefLabel">时讯</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/171" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/172" typeof="skos:Concept" property="rdfs:label skos:prefLabel">动效</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Fri, 26 Sep 2014 13:50:30 +0000 C7210 558 at http://www.beforweb.com http://www.beforweb.com/node/558#comments 收集的一些音乐类App设计参考(1) http://www.beforweb.com/node/553 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-music-player-audio-app-ui-ux-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周五晚间,啤酒威士忌什么鬼的也下去了一些的样子。</p> <p>听着Layla,满满的爱意却无法触及的无力与无奈,说是Eric Clapton最牛掰的作品也不为过。</p> <p>这周应该没有正经的周末译文了;前面几天插播了两篇关于汉堡包图标A/B测试的段子,其实相关话题还没完,今天临时乱入一篇设计参考资源。说&ldquo;篇&rdquo;,也谈不上,只是一些图片而已,我不高兴在Pin或花瓣里直接做,拿来自己这里心里踏实。都是音乐类App的设计,与当前所做的事情相关,没有多少普世参考性,不喜误入吧,先说个抱歉了。</p> <!--break--><p>点击图片进入相应的Dribbble页面。</p> <p><a href="https://dribbble.com/shots/1606302-Smusic?list=tags&amp;tag=player&amp;offset=126"><img alt="" src="/sites/default/files/images/201408-5/smusic.jpg" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1605627-Voxium-Player-for-IOS-7-Skins?list=tags&amp;tag=player&amp;offset=128"><img alt="voxium-player-for-ios-7_-skins.jpg" src="/sites/default/files/images/201408-5/voxium-player-for-ios-7_-skins.jpg" style="width: 600px; height: 450px;" /></a></p> <p><a href="https://dribbble.com/shots/1597417-Music?list=tags&amp;tag=player&amp;offset=153"><img alt="" src="/sites/default/files/images/201408-5/musicplayerapp.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1567539-Neo-futurista-Player?list=tags&amp;tag=player&amp;offset=223"><img alt="" src="/sites/default/files/images/201408-5/neo_player.jpg" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1563466-Noisie?list=tags&amp;tag=player&amp;offset=242"><img alt="" src="/sites/default/files/images/201408-5/dribbble.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1557415-Smart-Gestures?list=tags&amp;tag=player&amp;offset=260"><img alt="" src="/sites/default/files/images/201408-5/player_animation.gif" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1642619-Scratch-Track-Sound?list=tags&amp;tag=music&amp;offset=105"><img alt="" src="/sites/default/files/images/201408-5/sound.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1644110-Music-radio-player-UI?list=tags&amp;tag=music&amp;offset=70"><img alt="" src="/sites/default/files/images/201408-5/player-ui.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1644391-Els-amics-de-les-arts?list=tags&amp;tag=music&amp;offset=68"><img alt="" src="/sites/default/files/images/201408-5/amics.jpg" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1630273-Music-Player?list=tags&amp;tag=player&amp;offset=60"><img alt="" src="/sites/default/files/images/201408-5/temp.jpg" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1638988-Android-Podcast-App?list=tags&amp;tag=player&amp;offset=38"><img alt="" src="/sites/default/files/images/201408-5/snappper.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/892445-Musix-app?list=searches&amp;tag=ios_music&amp;offset=6"><img alt="" src="/sites/default/files/images/201408-5/musix_2x.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1114707-FREE-PSDs-iGravertical-Screen-Layers-iOS-7-Screen-Converter?list=searches&amp;tag=ios_music&amp;offset=7"><img alt="" src="/sites/default/files/images/201408-5/igravertical.jpg" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/799352-Listn/attachments/81272"><img alt="" src="/sites/default/files/images/201408-5/LISTN-my-profile2.jpg" style="height: 369px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1372849-FM-Radio-UI?list=searches&amp;tag=ios_music&amp;offset=11"><img alt="" src="/sites/default/files/images/201408-5/fm-radio.png" style="width: 600px; height: 450px;" /></a></p> <p><a href="https://dribbble.com/shots/1309449-YouRadio?list=searches&amp;tag=ios_music&amp;offset=30"><img alt="" src="/sites/default/files/images/201408-5/shot.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1549755-8tracks-Featured-Tracks?list=searches&amp;tag=ios_music&amp;offset=41"><img alt="" src="/sites/default/files/images/201408-5/preview.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1031146-Untitled-iOS-Social-App?list=searches&amp;tag=ios_music&amp;offset=46"><img alt="" src="/sites/default/files/images/201408-5/render_black22.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1345888-Cassette-albums?list=searches&amp;tag=ios_music&amp;offset=58"><img alt="" src="/sites/default/files/images/201408-5/mediabox_albums.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1428381-Cassette-songs-list?list=searches&amp;tag=ios_music&amp;offset=80"><img alt="" src="/sites/default/files/images/201408-5/cassette-songs.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/813968-Listn-Share-screen?list=searches&amp;tag=ios_music&amp;offset=59"><img alt="" src="/sites/default/files/images/201408-5/listn-share.jpg" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/805717-Listn-Feed?list=searches&amp;tag=ios_music&amp;offset=63"><img alt="" src="/sites/default/files/images/201408-5/retina-listn-feed.jpg" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1192534-Encore-iOS-aplication-demo-GIF?list=searches&amp;tag=ios_music&amp;offset=72"><img alt="" src="/sites/default/files/images/201408-5/encore.gif" /></a></p> <p><a href="https://dribbble.com/shots/1249898-Music-Player-Side-Menu?list=searches&amp;tag=ios_music&amp;offset=82"><img alt="" src="/sites/default/files/images/201408-5/radio_4.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1521263-Music-App?list=searches&amp;tag=ios_music&amp;offset=85"><img alt="" src="/sites/default/files/images/201408-5/music_app.jpg" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1309345-Snippit-Adding-a-new-post?list=searches&amp;tag=ios_music&amp;offset=109"><img alt="" src="/sites/default/files/images/201408-5/1.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1425409-Music-player?list=searches&amp;tag=ios_music&amp;offset=111"><img alt="" src="/sites/default/files/images/201408-5/mp1.png" style="height: 450px; width: 600px;" /></a></p> <p><a href="https://dribbble.com/shots/1164217-Music-App?list=searches&amp;tag=ios_music&amp;offset=164"><img alt="" src="/sites/default/files/images/201408-5/music_app_latest.jpg" style="height: 450px; width: 600px;" /></a></p> <div class="embed"><article id="node-301" class="node node-related-books" about="/node/301" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/图灵交互设计丛书-亲爱的界面•让用户乐于使用-爱不释手-Lukas-Mathis/dp/B00A6MIPNG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="亲爱的界面:让用户乐于使用、爱不释手" src="http://beforweb.com/sites/default/files/images/products/47.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/图灵交互设计丛书-亲爱的界面•让用户乐于使用-爱不释手-Lukas-Mathis/dp/B00A6MIPNG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">亲爱的界面:让用户乐于使用、爱不释手</a></h4> <p><a href="http://www.amazon.cn/图灵交互设计丛书-亲爱的界面•让用户乐于使用-爱不释手-Lukas-Mathis/dp/B00A6MIPNG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书主要介绍如何设计出具有可用性的应用程序和网站,不但让用户乐于使用,而且令其爱不释手。作者详细介绍了如何将可用性融入设计、测试及开发的各个流程,如何优化设计过程、把握设计重点、提高设计效率...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/news" typeof="skos:Concept" property="rdfs:label skos:prefLabel">时讯</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/170" typeof="skos:Concept" property="rdfs:label skos:prefLabel">音乐</a></li></ul> Fri, 22 Aug 2014 15:10:53 +0000 C7210 553 at http://www.beforweb.com http://www.beforweb.com/node/553#comments 夏日清凉福利 - Sketch免费设计资源汇总 http://www.beforweb.com/node/519 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/logo-icon-sketch-app-design-ux-ui.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周一晚间,插播个资源帖吧。标题呼应去年8月的<a href="http://www.beforweb.com/node/245" target="_blank">夏日清凉福利 - iOS7免费设计资源汇总</a>。那篇也不错呀,那些资源放到现在也仍很适用。</p> <p>恩今次的黄钻就是Sketch 3喽;汇总了20个Sketch的免费模板资源,例如iOS7(+)系统界面及元素、应用界面mockup、iPhone及iPad机身、比较新的Yosemite等等,请各位使用Sketch的同学按需索取,自行下载吧。</p> <p>对于Sketch还不是很了解的朋友,可以参考之前的&ldquo;<a href="http://www.beforweb.com/node/474" target="_blank">优雅之钻 - Sketch 3带来的新变化</a>&rdquo;稍作了解。</p> <!--break--><h3> Teehan+Lax iPhone iOS7(+)界面元素模板</h3> <p>作者Teehan+Lax,可用于个人及商业用途。</p> <p><a href="http://www.teehanlax.com/tools/iphone-sketch-app/"><img alt="gui.jpg" src="/sites/default/files/images/201406-4/gui.jpg" style="width: 550px; height: 334px;" /></a></p> <h3> iOS7(+)界面模板</h3> <p>作者Erica Jaclyn Stein,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1339289-Free-Fully-Editable-GUI-Content-Views-for-iOS-7"><img alt="mobile.jpg" src="/sites/default/files/images/201406-4/mobile.jpg" style="width: 550px; height: 392px;" /></a></p> <h3> iOS7(+)应用设计模板</h3> <p>作者Riza Saydam,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1305743-Ak-ll-Vatanda-free-sketch-download"><img alt="gui2.jpg" src="/sites/default/files/images/201406-4/gui2.jpg" style="width: 550px; height: 404px;" /></a></p> <h3> iOS7(+)应用设计模板</h3> <p>作者Murat Mutlu,包括PSD及Sketch格式,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1469985-Marvel-Resources-Free-PSDs-and-Sketch-files"><img alt="marvel.jpg" src="/sites/default/files/images/201406-4/marvel.jpg" style="width: 550px; height: 407px;" /></a></p> <h3> iOS7(+)音乐应用界面设计模板</h3> <p>作者Andreea Nicolaescu,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1578577-Music-Player"><img alt="music.jpg" src="/sites/default/files/images/201406-4/music.jpg" style="width: 550px; height: 404px;" /></a></p> <h3> iOS7(+)应用设计模板</h3> <p>作者Riza Saydam,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1567511-Profile-Screen-free-sketch-download"><img alt="profile.jpg" src="/sites/default/files/images/201406-4/profile.jpg" style="width: 550px; height: 389px;" /></a></p> <h3> iOS7(+)登录界面设计模板</h3> <p>作者Riza Saydam,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1554633-Login-Screen-free-sketch-download"><img alt="login.jpg" src="/sites/default/files/images/201406-4/login.jpg" style="width: 550px; height: 402px;" /></a></p> <h3> iOS7(+) Blueprint iPhone iPad线框模板</h3> <p>作者Rojcyk,可用于个人用途。</p> <p><a href="http://www.rojcyk.com/blueprint/"><img alt="blueprint.jpg" src="/sites/default/files/images/201406-4/blueprint.jpg" style="width: 550px; height: 368px;" /></a></p> <h3> iPhone 5/5s 线框模板</h3> <p>作者Tariq Abuirshaid,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1525160-iPhone-5-5s-Wireframe"><img alt="iphone2.jpg" src="/sites/default/files/images/201406-4/iphone2.jpg" style="width: 550px; height: 401px;" /></a></p> <h3> iPhone 5s 线框模板</h3> <p>作者Gavin Anthony,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1532293-iPhone-5S-Wireframe"><img alt="iphone4.jpg" src="/sites/default/files/images/201406-4/iphone4.jpg" style="width: 550px; height: 402px;" /></a></p> <h3> iPhone 5c机身模板</h3> <p>作者Jisi Guo,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1530916-iPhone-5c-Sketch-Freebie"><img alt="iphone.jpg" src="/sites/default/files/images/201406-4/iphone.jpg" style="width: 550px; height: 392px;" /></a></p> <h3> iPad机身模板</h3> <p>作者Clifton Lin,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1486077-iPad-App-Showcase-Template"><img alt="ipad.jpg" src="/sites/default/files/images/201406-4/ipad.jpg" style="width: 550px; height: 375px;" /></a></p> <h3> Twitter for OS X Yosemite</h3> <p>作者Dmitry Novikov,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1582831-Twitter-for-Yosemite-sketch-freebee"><img alt="twitter-for-yo.jpg" src="/sites/default/files/images/201406-4/twitter-for-yo.jpg" style="width: 550px; height: 373px;" /></a></p> <h3> OS X Yosemite</h3> <p>作者Danny Giebe,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1582874-Yosemite-for-Sketch"><img alt="yosemite.jpg" src="/sites/default/files/images/201406-4/yosemite.jpg" style="width: 550px; height: 361px;" /></a></p> <h3> Safari OS X Yosemite</h3> <p>作者Kuswanto,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1580979-Safari-OS-X-Yosemite-Sketch-File"><img alt="safari.jpg" src="/sites/default/files/images/201406-4/safari.jpg" style="width: 550px; height: 293px;" /></a></p> <h3> Safari OS X Yosemite</h3> <p>作者Nishank Khanna,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1581582-Yosemite-Safari-in-Sketch-Freebie"><img alt="browser.jpg" src="/sites/default/files/images/201406-4/browser.jpg" style="width: 550px; height: 353px;" /></a></p> <h3> iOS7(+)图标</h3> <p>作者Erica Jaclyn Stein,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1529304-iOS-7-Icons-Natives-and-Basics-for-Sketch-app"><img alt="ios7.jpg" src="/sites/default/files/images/201406-4/ios7.jpg" style="width: 550px; height: 342px;" /></a></p> <h3> 图标集</h3> <p>作者Christian,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1582227-Sketch-icons"><img alt="rect.jpg" src="/sites/default/files/images/201406-4/rect.jpg" style="width: 550px; height: 360px;" /></a></p> <h3> Nexus 5 机身模板</h3> <p>作者Tristan Remy,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1525519-Nexus-5-Sketch-3-Template-Free-download"><img alt="nexus2.jpg" src="/sites/default/files/images/201406-4/nexus2.jpg" style="width: 549px; height: 384px;" /></a></p> <h3> Nexus 5 线框模板</h3> <p>作者Tristan Remy,可用于个人用途。</p> <p><a href="https://dribbble.com/shots/1357646-Nexus-5-Wireframe-UI-sketch-freebie"><img alt="nexus.jpg" src="/sites/default/files/images/201406-4/nexus.jpg" style="width: 550px; height: 368px;" /></a></p> <div class="embed"><article id="node-265" class="node node-related-books" about="/node/265" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iPhone用户界面设计典型实例" src="http://beforweb.com/sites/default/files/images/products/09.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone用户界面设计典型实例</a></h4> <p><a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书通过10名在Apple Store中名列前茅的应用设计师和开发者的现身说法,为我们揭开了应用设计开发的神秘面纱。从本书中,读者不仅能学习到设计过程中的许多经验,更重要的是能够对应用成功的关键因素有全新的理解&mdash;&mdash;其最终取决于创意、人性化的界面带来的用户体验...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/news" typeof="skos:Concept" property="rdfs:label skos:prefLabel">时讯</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/142" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS7</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/143" typeof="skos:Concept" property="rdfs:label skos:prefLabel">素材</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/144" typeof="skos:Concept" property="rdfs:label skos:prefLabel">图标</a></li></ul> Mon, 30 Jun 2014 15:02:03 +0000 C7210 519 at http://www.beforweb.com http://www.beforweb.com/node/519#comments 案例学习 - 关于VSCO Cam的可用性测试 http://www.beforweb.com/node/498 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/logo-icon-s-vsco-cam-app-iphone-ux-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周末好时光,寂静似温床。初夏虽无暑,啤酒却清凉。</p> <p>好诗。把一堆乱七八糟的东西浓缩成20个字;古人的情怀比起如今140个字的世界来说更加不扯淡。</p> <p>记得高一那年夏天,大约是1999年的这个时候,要选择接下来学文还是学理;一直认定自己内心更加适合学文,而且当时一个关系不错的喜欢Nirvana又会弹钢琴的姑娘选了文科...但是按&ldquo;寻常路&rdquo;的思维来说又没道理不学理,男生,数理化还算过的去(后来证明其实过不太去),记性又不太好,不适合背大段大段的东西...做决定之前的那一天相当纠结。最终还是选了学理,于是在悲惨和抑郁中度过了中学时期的最后两年。</p> <p>不follow自己的内心,大约就是这样的结局哦?话说今天的更新,属于比较&ldquo;特定&rdquo;的情况,关于照片处理应用的话题;个人工作方面的关系吧;普世性也许不是很强。不管了啊,进入正文了。</p> <p>Visual Supply公司出品的VSCO Cam是一款时尚并强大的移动端照片处理应用,无论在App Store还是Google Play都有着4.5星的优异战绩。VSCO有一大批忠实的用户群,而且他们的Grid(应用内置与在线的照片流)当中有着很多我所见过的最美的照片。在2014年5月,他们成功融得4000万美元的投资。</p> <!--break--><h3> 可用性测试的目标</h3> <p>通过6个基本任务识别出VSCO当中的可用性问题及痛点。其中的3个任务直接来源于App Store的小编所撰写的简述:</p> <blockquote><p>Visual Supply公司的这款摄影应用为摄影师及业余爱好者带来了大量令人惊叹的工具。无修饰的界面设计风格能帮你更加轻松的为照片使用滤镜,调整曝光,并与他人分享你的创作。</p> </blockquote> <p>为了测试这些关键功能,我找来5名拥有不同背景的移动用户,进行了一次&ldquo;地下&rdquo;可用性测试。我对于这5名被测的要求很简单:他们是iPhone或安卓手机用户,熟悉摄影方面的一些基本常识(例如滤镜、裁剪、曝光等),并且不曾使用过VSCO Cam应用。</p> <h3> 测试任务</h3> <ol> <li> 拍一张照片。</li> <li> 为照片添加滤镜。</li> <li> 裁剪照片。</li> <li> 调整照片的曝光。</li> <li> 从手机相册中添加一张照片。</li> <li> 将照片分享到社交网络中。</li> </ol> <h3> 分析</h3> <p>我让被测用户在他们的手机上下载并打开VSCO Cam,然后使用我自己的手机拍摄测试时的情况。测试结束后,我会重新观看这些视频,并将从中发现的关键信息记录在贴纸上。</p> <p><img alt="01-vsco-cam-ux-design-usability-test.png" src="/sites/default/files/images/201406-1/01-vsco-cam-ux-design-usability-test.png" style="width: 506px; height: 799px;" /></p> <p>如上图所示,矩阵顶部横向各单元(橘色贴纸)代表每个被测用户,左侧纵向各单元(蓝色贴纸)代表不同的测试任务,其余的彩色贴纸代表不同被测在完成各个任务时的顺利程度。</p> <p>接下来我们看看具体的测试结果。需要说明一下,在下面的图片当中,绿色箭头指向的是正确的操作流程,红色箭头代表被测进行的错误操作。(图片中的说明文字较小,点击图片可查看大图;在移动设备上可以浏览<a href="http://beforweb.com/node/498/">原文页面</a>查看大图)</p> <p>推荐阅读:<a href="http://www.beforweb.com/node/188" target="_blank">移动应用可用性测试的实践经验总结</a></p> <h3> 任务1:拍照</h3> <p><a href="/sites/default/files/images/201406-1/001-vsco-cam-ux-design-usability-test.png" rel="lightbox"><img alt="001-vsco-cam-ux-design-usability-test.png" src="/sites/default/files/images/201406-1/001-vsco-cam-ux-design-usability-test.png" style="width: 620px; height: 327px;" /></a></p> <p class="figure-caption">点击图片查看大图</p> <p>全部成功!每名被测都在VSCO Cam当中顺利的完成了拍照任务。很不错的一个开始。</p> <h3> 任务2:为照片添加滤镜</h3> <p>我们从这里开始遇到问题,没有任何一名被测在初次尝试时顺利的完成任务。在照片选择界面中,他们不断点击着错误的图标,如下图左侧的三个红色箭头所示。</p> <p><a href="/sites/default/files/images/201406-1/002-vsco-cam-ux-design-usability-test.png" rel="lightbox"><img alt="002-vsco-cam-ux-design-usability-test.png" src="/sites/default/files/images/201406-1/002-vsco-cam-ux-design-usability-test.png" style="width: 620px; height: 218px;" /></a></p> <p class="figure-caption">点击图片查看大图</p> <p>实际上,要正确的完成这个任务,用户首先需要选择一张照片,此时界面底部会出现编辑菜单,点击其中第二个编辑图标即可添加滤镜,如上图中间的绿色箭头所示。用户初次使用时不了解这一点,他们会直接尝试界面当中默认可见的各种操作。</p> <p>不过,一旦用户了解了滤镜的入口,选中了某个滤镜(如上图右侧所示,此时任务2完成),下一步动作就相对明显多了,因为在这里他们只有两件事情可做:</p> <ol> <li> 再次点击之前所选的滤镜缩略图,调整滤镜效果参数。</li> <li> 点击底部处于收起状态的菜单栏。</li> </ol> <h3> 任务3和4:裁剪照片并调整曝光</h3> <p>被测用户在上一个任务的最后一步,点击底部处于收起状态的菜单栏,展开菜单栏,此时障碍再次出现。这里共产生5次误操作,其中的4次会造成任务流程中断;有的被测会尝试点击&ldquo;撤销操作&rdquo;按钮,有的会点击&ldquo;恢复原图&rdquo;按钮,此外还有点击确认和取消操作的情况。而只有点击菜单栏中的扳手按钮,才可以展开新的功能菜单,在这里能找到裁剪与曝光调整功能。</p> <p><a href="/sites/default/files/images/201406-1/003-vsco-cam-ux-design-usability-test.png" rel="lightbox"><img alt="003-vsco-cam-ux-design-usability-test.png" src="/sites/default/files/images/201406-1/003-vsco-cam-ux-design-usability-test.png" style="width: 620px; height: 327px;" /></a></p> <p class="figure-caption">点击图片查看大图</p> <h3> 任务5:从手机相册中添加一张照片</h3> <p><a href="/sites/default/files/images/201406-1/004-vsco-cam-ux-design-usability-test.png" rel="lightbox"><img alt="004-vsco-cam-ux-design-usability-test.png" src="/sites/default/files/images/201406-1/004-vsco-cam-ux-design-usability-test.png" style="width: 620px; height: 327px;" /></a></p> <p class="figure-caption">点击图片查看大图</p> <p>这个任务对于被测用户的困难程度超出想象。正确的操作方式是点击带有&ldquo;+&rdquo;符号的灰色大按钮,如上图左侧绿色箭头所示。但这个按钮在界面中的对比度过低,而且&ldquo;+&rdquo;很难让用户明确的了解其功能。被测用户的注意力会被顶部和底部的几个更加明亮的图标所吸引,并点击尝试。</p> <p>另外也有些被测用户指出,在周围都是白色亮图标的界面环境中,那么暗的一个灰色按钮,感觉上像是不可用或不可点击的意思。</p> <h3> 任务6:将照片分享到社交网络中</h3> <p><a href="/sites/default/files/images/201406-1/005-vsco-cam-ux-design-usability-test.png" rel="lightbox"><img alt="005-vsco-cam-ux-design-usability-test.png" src="/sites/default/files/images/201406-1/005-vsco-cam-ux-design-usability-test.png" style="width: 620px; height: 327px;" /></a></p> <p class="figure-caption">点击图片查看大图</p> <p>经过前面5个任务的折腾,被测用户已经对每个界面有了更多的认知,对应用整体也更加熟悉了。此外由于分享按钮的图标本身表意也很明确,所以多数用户还算可以相对轻松的找到这个功能所在,并完成任务。</p> <p>除非有内部数据,否则我们很难判断有多少实际用户在初次上手之后会像我们做测试这样有充足的时间去尝试,在试图使用基本功能并遇到挫折后又会有多少耐心去继续使用。</p> <h3> 两个关键问题</h3> <h4> 问题1:VSCO Cam的操作流程是非线性的,对新手用户缺少必要的引导和提示。</h4> <p>对于VSCO Cam来说,所面对的设计挑战之一,就是怎样让新用户尽快上手这样一款功能丰富但流程非线性的应用。</p> <p>正如App Store中所介绍的那样,VSCO Cam的用户群范围还是很广泛的;但无论是专业人士还是摄影爱好者,从上手VSCO Cam的那刻起,他们都是&ldquo;新手用户&rdquo;。繁多而强大的功能一方面造就了这样一款有价值的应用,一方面也会因为复杂度的问题而产生负面影响。困难就在于通过怎样的方式让新手用户尽快熟悉操作并留下来,而不是沮丧的离开。</p> <p>与Instagram及其他一些相对简单的摄影类应用相比,VSCO Cam的非线性流程允许多个用例并行存在。与传统的&ldquo;拍照、做图、分享&rdquo;不同,这款应用允许用户通过不同的参数,经由多种流程来达到目标。</p> <p>在测试过程中,有一名被测用户尝试了29次才完成了一个任务。我鼓励他进行发声思维,把感受通过语言表达出来,并假设我不在场。结果这名被测用户说:</p> <blockquote><p>&ldquo;说实话,如果真能假设你不在这里,我只会砸烂这个应用,扔掉它。&rdquo;</p> </blockquote> <h4> 改进建议</h4> <p>提供一些幻灯片风格或其他形式的新手引导,帮助新用户尽快了解最关键的界面与功能。</p> <p><img alt="006-vsco-cam-ux-design-usability-test.gif" src="/sites/default/files/images/201406-1/006-vsco-cam-ux-design-usability-test.gif" style="width: 248px; height: 526px;" /></p> <p>虽然有点累赘,但如果做的得当,功能就会变得一目了然,这是值得的。在设计新手引导时,要遵从当前的一些最佳实践模式,允许用户随时退出教学引导,并提供入口,使他们将来还可以访问到这些引导内容。</p> <p>推荐阅读:<a href="http://www.beforweb.com/node/478" target="_blank">重新思考移动应用的新手教学模式</a>、<a href="http://www.beforweb.com/node/427" target="_blank">关于移动应用的新手引导设计</a></p> <p>如今,VSCO Cam的官方博客上有一些教学视频,但应用本身却没有提供。</p> <p>所以,他们也许可以尝试在应用内部给出一些针对核心功能的简要引导,例如拍照、使用滤镜和分享等等;对于更多相对次要的功能,博客上的教学视频仍可派上用场。</p> <h4> 问题2:界面的视觉层次不合理</h4> <p>我们回顾一下任务2和5(为照片添加滤镜、从手机相册中添加一张照片)。这两个环节中,新手用户的认知负荷骤增,他们所面对的是各种图标形式的功能选项,界面没能通过合理的层级关系来告诉用户哪些功能与当前环节的主要目标最为相关。</p> <p><img alt="007-vsco-cam-ux-design-usability-test.gif" src="/sites/default/files/images/201406-1/007-vsco-cam-ux-design-usability-test.gif" /></p> <h4> 改进建议</h4> <p>降低顶部两个白色图标在界面当中的对比度。这两个图标,一个负责筛选照片,一个负责切换照片列表视图模式,均属于特定情况下有可能用到的辅助功能,与用户当前最重要的图片编辑类目标关联都不大。</p> <p>而底部两个按钮虽然在视觉权重上很高,但也有高的道理,一个是全局菜单,一个是拍照界面入口,所以可以不去管它们。</p> <p>而对于用来从系统相册添加照片的&ldquo;+&rdquo;按钮,则可以试着提升对比度,至少不再是这种容易让人理解为&ldquo;不可点击&rdquo;的样式。</p> <h3> 小结</h3> <p>当然,这些建议都是来自我个人的,所基于的也只是有5名被测参加的可用性测试。我更想有机会能看看VSCO Cam的真实数据,以验证我所发现的问题。无论怎样,对于一款移动应用来说,不断的发现问题、提出假设、迭代、验证&mdash;&mdash;这个循环是不可或缺的。</p> <div class="embed"><article id="node-289" class="node node-related-books" about="/node/289" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/妙手回春-网站可用性测试及优化指南-克鲁格/dp/B003XM3TF0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="妙手回春:网站可用性测试及优化指南" src="http://beforweb.com/sites/default/files/images/products/34.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/妙手回春-网站可用性测试及优化指南-克鲁格/dp/B003XM3TF0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">妙手回春:网站可用性测试及优化指南</a></h4> <p><a href="http://www.amazon.cn/妙手回春-网站可用性测试及优化指南-克鲁格/dp/B003XM3TF0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">作者Steve Krug继畅销书Don't Make Me Think后推出的又一力作。书中详细阐述了一种简化的网站可用性测试方法,让任何人都能够尽早并频繁地对其网站、应用程序和其他产品进行可用性测试,从而将最严重的可用性问题消灭在萌芽状态...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/37" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性测试</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 07 Jun 2014 09:43:37 +0000 C7210 498 at http://www.beforweb.com http://www.beforweb.com/node/498#comments 那些小处见大的设计细节(10) http://www.beforweb.com/node/494 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-eye-blue-detail-design-ux-ui-interaction-visual-experience-user.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>有的老小伙伴要去霓虹国,有的老小伙伴正在生宝宝,有的老小伙伴正在香港兴许还在琢磨着去霓虹国的小伙伴会不会帮他带手办;不知还有些什么小伙伴在看着什么电影吃着什么美食逛着什么街血着什么拼。想到这些觉得蛮开心的不知道为什么。</p> <p>这周末公事私事缠身,着实没有时间做文章的更新了,便零七八碎的拼些小时间出来做一期小处见大。哦蛮久没有做过了,一直以来关注的LittleBigDetails也没太多新货了;倒是在想,接下来继续做的时候还可以挖些他家的旧货出来,虽然那些蛮早以前的App或Web服务可能已经有过多次改版了,但是那些细节当中的设计精髓毕竟不会随着时间的推移而褪色。</p> <p>那这次就开始了;发现有不少是Google的;今天也花了不少时间研究Glass,有兴趣的同学也可以翻翻之前的两篇文章,&ldquo;<a href="http://beforweb.com/node/493" target="_blank">Google Glass日常交互体验</a>&rdquo;以及&ldquo;<a href="http://beforweb.com/node/458" target="_blank">为智能眼镜而设计</a>&rdquo;。走起。</p> <!--break--><p><strong>1.Etsy</strong> - 评论输入框底部的提示文字会鼓励用户发表评论,并且会随着单词数量的变化而改变文案,例如&ldquo;至少再说点吧&rdquo;、&ldquo;好诶,继续!&rdquo;。</p> <p><img alt="01-detail-ux-ui-user-experiece-web-app-design.png" src="/sites/default/files/images/201405-4/01-detail-ux-ui-user-experiece-web-app-design.png" style="width: 500px; height: 253px;" /></p> <p><strong>2.MailChimp</strong> - 统计报告页面中,将鼠标悬停在地图当中的不同国家上,气泡提示当中的鼓励内容会以该国家的语言读音呈现。</p> <p><img alt="02-detail-ux-ui-user-experiece-web-app-design.gif" src="/sites/default/files/images/201405-4/02-detail-ux-ui-user-experiece-web-app-design.gif" style="width: 500px; height: 361px;" /></p> <p><strong>3.Shopping UK</strong> - 购物清单当中的商品数量超过10个后,界面底部的购物篮图标会变成购物车的样式。</p> <p><img alt="03-detail-ux-ui-user-experiece-web-app-design.gif" src="/sites/default/files/images/201405-4/03-detail-ux-ui-user-experiece-web-app-design.gif" style="width: 320px; height: 568px;" /></p> <p><strong>4.Google Drive</strong> - 在文档中选择一段文字并创建链接,系统会将选中的文字作为关键词,自动搜寻相关的文档或网站,为用户提供选择建议。</p> <p><img alt="04-detail-ux-ui-user-experiece-web-app-design.png" src="/sites/default/files/images/201405-4/04-detail-ux-ui-user-experiece-web-app-design.png" style="width: 446px; height: 324px;" /></p> <p><strong>5.MailChimp</strong> - 使用了定制化的下拉菜单,会根据当前页面所处的位置而选择向上还是向下展开列表,例如当下拉菜单控件距离窗口底部较近时,菜单会向上展开。</p> <p><img alt="05-detail-ux-ui-user-experiece-web-app-design.png" src="/sites/default/files/images/201405-4/05-detail-ux-ui-user-experiece-web-app-design.png" style="width: 380px; height: 215px;" /></p> <p><strong>6.Chrome</strong> - 开发工具(&ldquo;审查元素&rdquo;)的设置当中,十六进制色值的范例代码是&ldquo;DAC0DE&rdquo;,即&ldquo;the code&rdquo;。</p> <p><img alt="06-detail-ux-ui-user-experiece-web-app-design.png" src="/sites/default/files/images/201405-4/06-detail-ux-ui-user-experiece-web-app-design.png" style="width: 437px; height: 240px;" /></p> <p><strong>7.EA SPORTS</strong> - 页面导航栏的背景色值即为&ldquo;#EAEAEA&rdquo;。(我以前做Web设计时遇到需要在#EEE范围里选取色彩的时候,往往会选择&ldquo;#E3E3E3&rdquo;,而回避&ldquo;#EAEAEA&rdquo;,因为喜欢E3游戏展,厌恶EA。EA毁掉了很多收购到手的好游戏;其slogan&ldquo;EA,challenge everything.&rdquo;已被玩家改为&ldquo;EA,fuck up everything.&rdquo; - 译者C7210注)</p> <p><img alt="07-detail-ux-ui-user-experiece-web-app-design.jpg" src="/sites/default/files/images/201405-4/07-detail-ux-ui-user-experiece-web-app-design.jpg" style="width: 500px; height: 330px;" /></p> <p><strong>8.Google&nbsp;</strong>- 搜索一部未上映的电影时,上映日期信息旁边会出现&ldquo;提醒我&rdquo;按钮,点击后,Google Now中会建立一条提醒事项。</p> <p><img alt="08-detail-ux-ui-user-experiece-web-app-design.png" src="/sites/default/files/images/201405-4/08-detail-ux-ui-user-experiece-web-app-design.png" style="width: 500px; height: 593px;" /></p> <p><strong>9.Google</strong> - 气象预报当中的风力强度信息会通过不同尺寸的箭头一目了然的展示出来。</p> <p><img alt="09-detail-ux-ui-user-experiece-web-app-design.png" src="/sites/default/files/images/201405-4/09-detail-ux-ui-user-experiece-web-app-design.png" style="width: 500px; height: 435px;" /></p> <p><strong>10.Stripe</strong> - 比特币支持系统的测试页面中,邮件输入框中的范例邮箱是&ldquo;<a href="mailto:satoshi@example.com">satoshi@example.com</a>&rdquo;,即比特币的发明人中本聪(Satoshi Nakamoto)。</p> <p><img alt="10-detail-ux-ui-user-experiece-web-app-design.png" src="/sites/default/files/images/201405-4/10-detail-ux-ui-user-experiece-web-app-design.png" style="width: 500px; height: 431px;" /></p> <p><strong>11.Amazon</strong> - 打印邮寄标签时,页面中会贴心的提供一个&ldquo;没有打印机?发给朋友&rdquo;按钮,以便没有打印机的用户发送给朋友帮忙打印。</p> <p><img alt="11-detail-ux-ui-user-experiece-web-app-design.png" src="/sites/default/files/images/201405-4/11-detail-ux-ui-user-experiece-web-app-design.png" style="width: 600px; height: 128px;" /></p> <div class="embed"><article id="node-424" class="node node-related-books" about="/node/424" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/一键下单-杰夫•贝佐斯与亚马逊的崛起-理查德•勃兰特/dp/B00APE1GOU/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="一键下单-杰夫•贝佐斯与亚马逊的崛起" src="/sites/default/files/images/products/70.jpg" style="width: 70px; height: 103px;" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/一键下单-杰夫•贝佐斯与亚马逊的崛起-理查德•勃兰特/dp/B00APE1GOU/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">一键下单</a></h4> <p><a href="http://www.amazon.cn/一键下单-杰夫•贝佐斯与亚马逊的崛起-理查德•勃兰特/dp/B00APE1GOU/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">亚马逊让在线购物变得如此简单和方便,以至客户根本不用多费心思。这种理念可用它每个页面都有的那个&ldquo;一键下单&rdquo;来概括。书中记述了贝佐斯从电脑黑客到改变世界的企业家这一过程,回顾了亚马逊在其带领下走向辉煌的点点滴滴...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <p><strong>12.CircleCI</strong> - 文本框被聚焦后,原来的占位提示文字会通过动效上移,一方面让位于用户输入的文字,一方面成为该文本框的标题。</p> <p><img alt="12-detail-ux-ui-user-experiece-web-app-design.gif" src="/sites/default/files/images/201405-4/12-detail-ux-ui-user-experiece-web-app-design.gif" style="width: 333px; height: 493px;" /></p> <p><strong>13.TED</strong> - 在视频页面向下滚屏时,视频会缩小到顶部固定栏当中保持播放状态。</p> <p><img alt="13-detail-ux-ui-user-experiece-web-app-design.png" src="/sites/default/files/images/201405-4/13-detail-ux-ui-user-experiece-web-app-design.png" style="width: 507px; height: 599px;" /></p> <p><strong>14.Grand ST.</strong> - 退订邮件订阅后,他们会邀请你通过社交网络平台继续保持关注。</p> <p><img alt="14-detail-ux-ui-user-experiece-web-app-design.jpg" src="/sites/default/files/images/201405-4/14-detail-ux-ui-user-experiece-web-app-design.jpg" style="width: 320px; height: 569px;" /></p> <p><strong>15.iOS </strong>- 在系统相机里拍摄全景照片时,界面当中的提示文字会根据拍摄对象的明亮程度而动态的增加或移除阴影效果,以确保文字始终清晰可见。</p> <p><img alt="15-detail-ux-ui-user-experiece-web-app-design.jpg" src="/sites/default/files/images/201405-4/15-detail-ux-ui-user-experiece-web-app-design.jpg" style="width: 320px; height: 568px;" /></p> <div class="embed"><article id="node-341" class="node node-related-books" about="/node/341" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/微交互-细节设计成就卓越产品-美-Dan-Saffer/dp/B00FS2ZR80/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="微交互:细节设计成就卓越产品" src="http://beforweb.com/sites/default/files/images/products/68.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/微交互-细节设计成就卓越产品-美-Dan-Saffer/dp/B00FS2ZR80/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">微交互:细节设计成就卓越产品</a></h4> <p><a href="http://www.amazon.cn/微交互-细节设计成就卓越产品-美-Dan-Saffer/dp/B00FS2ZR80/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书讨论了一种不同的思维方式:撇开壮观宏大、由上而下的设计,重视自底向上、精心构思的细节。这些小地方是设计师最擅长的地方,举手之劳,就能立杆见影。这是改变世界的另一种方式:在看似无关紧要的时刻释放令人心动的体验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/151" typeof="skos:Concept" property="rdfs:label skos:prefLabel">小处见大的设计细节</a></li></ul> Sat, 24 May 2014 12:34:06 +0000 C7210 494 at http://www.beforweb.com http://www.beforweb.com/node/494#comments