Be For Web - 一致性 https://beforweb.com/taxonomy/term/109 en 图文版 WWDC 设计分会:基础设计原理 - 可见性与一致性 https://beforweb.com/node/1050 <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="https://beforweb.com/sites/default/files/article-thumbs/icon-logo-wwdc-2019-apple-s.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>幻想一个家。在 store 里观察着顾客,渐渐就开始自顾自地被家装和物件吸引着而开始出神了。每个人的脸上都洋溢着幸福与期待,每个人都值得拥有爱与美好。这是个旅途。一个叫做命运的茫茫旅途。</p> <p>继续上期主题,即 2017 年 WWDC 之&ldquo;基础设计原理&rdquo;设计分会,演讲人是 Apple Evangelist 团队的 Mike Stern。在上期当中,我们了解了导航与反馈,错过的朋友不妨回看;今天的话题聚焦于&ldquo;可见性&rdquo;与&ldquo;一致性&rdquo;。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201908/0-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <h3> 可见性</h3> <p>可见性与&ldquo;反馈&rdquo;有着密切的关联。如果无法被人们所见,再好的反馈机制都是徒劳的。</p> <p><img alt="" src="/sites/default/files/images/201908/50-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>清晰可见的内容元素与界面控件可以极大地提升设计的易用性。</p> <p><img alt="" src="/sites/default/files/images/201908/51-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>想想看可见性对于汽车来说有多么重要。仪表盘的信息密度极高,通过文字、数字、指针、指示灯、状态标识等形式,将当前的状态与警示信息一目了然地呈现在你的面前。</p> <p><img alt="" src="/sites/default/files/images/201908/52-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>所有这些信息都是直接可见的。纵使在感知上有些密集,但对于驾车来说却非常必要,因为你无需转头甚至是转身去其他地方寻找这些信息,它们都一览无余地呈现在你面前。如果为了简洁而将一部分信息默认隐藏起来,或是置于其他位置,导致重要的信息被忽略,那么车辆的易用性和安全性都将遭受到损害。</p> <p><img alt="" src="/sites/default/files/images/201908/53-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>对于 app 来说也是同理。例如在&ldquo;邮件&rdquo;中,未读徽标提供了非常有用的状态信息。</p> <p><img alt="" src="/sites/default/files/images/201908/54-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>如果将这些徽标隐藏起来,界面的复杂度会有所降低,看上去的确会整洁一些。然而这样会极大地破坏易用性,因为人们将不得不进入一个个邮件详情页当中进行确认,才能获取到原本由徽标提供的状态信息;这样的互动非常低效和乏味。</p> <p><img alt="" src="/sites/default/files/images/201908/55-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>因此,要将重要的状态信息呈现在尽可能高的信息层级当中,使人们无需付出额外成本即可一目了然地获取。</p> <p>再来看看时钟 app 的 tab 栏。</p> <p><img alt="" src="/sites/default/files/images/201908/56-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>如果将所有这些导航项隐藏到汉堡包菜单当中,那么人们将很难一目了然地发现时钟 app 所提供的其他实用功能。</p> <p><img alt="" src="/sites/default/files/images/201908/57-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>不过显然,可见性当中也存在着权衡的问题,因为过高的信息密度及界面复杂度会降低人们获取信息和制定决策的速度,特别是当人们还不那么熟悉你产品的时候。因此,我们通常需要结合其他因素通盘考虑。</p> <h3> 一致性 Consistency</h3> <p>舟车劳顿,我已经等不及想要入住酒店了。不过趁大家都还在车上,我们还有一个极其重要的设计原理需要进行讨论,这就是一致性。</p> <p><img alt="" src="/sites/default/files/images/201908/59-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>简而言之,一致性的主旨在于通过相似的设计方式满足相似的设计需求。</p> <p>如果你曾开过车,那么你应该会熟悉于汽车内部各种通用的指示符号,例如门锁、车窗、燃油、车灯、电池、机油等等。</p> <p><img alt="" src="/sites/default/files/images/201908/60-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>同样,你也会对一系列通用术语的定义了如指掌,例如驻车、前进、倒档等等。</p> <p><img alt="" src="/sites/default/files/images/201908/61-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>汽车设计的一致性还体现在各种控件的布局当中,例如刹车在左,油门在右。</p> <p><img alt="" src="/sites/default/files/images/201908/62-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>一致性极大地提升了车辆的易用性;反之,破坏了这些通用规则的设计方式将严重损害驾乘体验。所有的汽车都遵守着同一套设计规则,包括标识与术语定义,控件的布局等等。受益于高度一致的设计,我们无需在每次驾驶不同车辆的时候都重新进行学习。<br /> ​</p> <p><img alt="" src="/sites/default/files/images/201908/64-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>一致性原理看上去显而易见,然而实践起来却并非易事。你必须始终有意识地考虑到这一原则,并且理解应该与怎样的标准保持一致。你需要全面地考虑到当人们打开你的 app 时,他们的预期是怎样的。这些预期,在很大程度上可能和他们以往使用其他 app 的经验有关。</p> <p><img alt="" src="/sites/default/files/images/201908/65-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>那么你该如何了解人们使用其他 app 的情况?这确实很难,人们可能使用过各种类型的 app,你无从知晓;但既然这些 app 同属于相同的系统平台,那么你也应该关注于平台本身的设计惯例,譬如图标与词条的定义,导航系统的设计模式,包括典型的任务流程等等。</p> <p>关于这个话题,我来为各位举一个最典型的例子。在 iOS 当中,我们使用下图所示的图标来表达&ldquo;行动&rdquo;的意思;而且在多数时候,&ldquo;行动&rdquo;所指代的是&ldquo;分享&rdquo;功能。</p> <p><img alt="" src="/sites/default/files/images/201908/66-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>但很多 app 会使用不同的图标来代表这一行为,如下图所示。这个图标确实很常见,特别是在网页或其他平台当中。</p> <p><img alt="" src="/sites/default/files/images/201908/67-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>这是个很棒的图标,它本身的设计没有任何问题;问题在于这个图标对于 iOS 平台的用户来说并不符合认知习惯。很多设计师为了保持多平台的一致性而选择在 iOS 当中使用这个图标;初衷是好的,但对于 iOS 来说却并非正确的设计决策。</p> <p><img alt="" src="/sites/default/files/images/201908/68-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>从目标受众的角度考虑问题,采用他们最熟识的设计方式,这才是上策。长此以往,你的 app 对于用户来说会变得越发友好与易用。</p> <p>当然,我们总会有冲动去做一些打破规则的事情;而且坦诚来讲,这绝非坏事。我们总该去尝试新的想法,否则何谈创新。但对于图标、文本这类简单的设计元素而言,所谓的&ldquo;创新&rdquo;在更多的时候只会给人们造成不必要的麻烦。因此,除非你有足够强大的理由,否则依照规则进行设计,确保与平台之间的一致性,才是上策。</p> <p><img alt="" src="/sites/default/files/images/201908/69-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>关于一致性,我还有最后一点需要强调,即&ldquo;内部一致性&rdquo;。你的 app 不仅需要与其所在的系统平台保持设计一致性,同时在 app 内部,视觉风格及行为模式也需要保持统一,例如每个界面当中同一种类的设计元素都应该有着一致的外观,app 全局所用到的字体及颜色也应该有着明确的数量与规则。</p> <p><img alt="" src="/sites/default/files/images/201908/71-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>内部一致性可以提升 app 的整体性与内聚性。当所有元素都和谐有序地整合在一处,整体体验也将得到提升。</p> <p><img alt="" src="/sites/default/files/images/201908/72-essential-design-principles.png" style="width: 620px; height: 362px; border: none;" /></p> <p>作为设计师,遵从一致性的设计原理需要我们具备良好的自我控制与约束能力;大大小小每一个设计决策都需要意图明确。</p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 600px; height: 154px;border:none;" /></p> </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/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/192" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计原则</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</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/109" typeof="skos:Concept" property="rdfs:label skos:prefLabel">一致性</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/298" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可见性</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Tue, 13 Aug 2019 14:31:20 +0000 C7210 1050 at https://beforweb.com https://beforweb.com/node/1050#comments 清晰、高效、一致、美观 - 关于设计原则的优先级排序 https://beforweb.com/node/824 <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="https://beforweb.com/sites/default/files/article-thumbs/icon-logo-design-ux-ui-inspiration.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>首先,向在<a href="http://www.beforweb.com/node/823" target="_blank">上一篇念叨</a>当中留言评论过的所有朋友真挚的说一声谢谢。你们说的话,无论长短,我都认真读过,就不一一回复了;感谢你们对我的鼓励,以及对这个博客一直以来的关注。</p> <p>所以我仍是要努力继续才可以。依旧是坐在公司的茶水间,对着被搁置在角落里的圣诞树、桌足球台和一柜子企鹅,写着这些字。耳边也依然是中岛美嘉的&ldquo;曾经我也想过一了百了&rdquo;。对的,上一篇的评论当中也有些朋友提到这首歌,看到你们说起的时候,我觉得很暖。</p> <p>暖或冷,关于这些,其实我已经,不知该怎样在这里描述了。说起来也真是莫大的自我嘲讽,当有着爱人日复一日陪伴在我身旁的时候,我在文字当中所能表述出来的只有自欺欺人的孤独的意识流,那么善于在本不孤独的温暖状态下营造一个真空的世界。而当两个人的世界真的只剩下一人的时候,我却,不知该怎样描述这种冷寂和绝望了。</p> <p>&ldquo;如果明天想要有所改变,现在就必须开始变&hellip;我都知道,我都知道,可是啊...&rdquo;</p> <p>好吧,怎样讲,也终于完成了自春节之后的第一篇译文。本不算长的一篇文章,却做的好艰难。在家,在咖啡厅,在公司的茶水间,努力去寻找能让自己安心平复哪怕一会会去打几个字的时间和空间,才终于完成掉。至少,完成了。</p> <!--break--><p><img alt="00-cover-user-experience-design-principles.jpg" src="/sites/default/files/images/201604-1/00-cover-user-experience-design-principles.jpg" style="width: 600px; height: 450px;" /></p> <p>有关注过我微博的朋友大约知道我最近开始做企业组的产品了,所以对于Salesforce一类的产品和团队也开始留意起来。之前被推荐了这篇文章,也可能有助于自己所在团队的建设发展,所以拿来做。当然,文中对于设计工作的思考和实践方式绝不仅限于企业产品范围。不多说了,进入译文吧。</p> <p>我们在Salesforce的产品设计团队当中有个不成文的规矩:无论谁拿出一份什么清单 - 功能列表、研究报告,或者哪怕只是体恤衫名录 - 无论什么,只要是清单的形式,肯定会有人出来问一句:&ldquo;<strong>按优先级排过序吗?</strong>&rdquo;</p> <p>有时是习惯性的,有时是认真的,但是相信我,在这样一个团队里,没人愿意像新手一样执行任何一份未经优先级排序的清单。</p> <p>我们自己有时也会拿这事出来开开玩笑,但平心而论,优先级思维模式确实是值得你去执着的,因为我们要做的事情太多,而能做的事情又太过有限。重点清晰的优先级模型代表着严谨的决策过程,正如方向明确的路基一样能够为整个团队带来行之有效的行动指引。</p> <p>所以很自然,我们在为Salesforce Lightning平台制定基本设计原则的时候,同样会按照优先级原则对它们进行排序。若干基本设计原则之间的权重关系是否明确,这对于我们的产品设计决策来说非常重要。</p> <h3> 设计之旅</h3> <p>Lightning是Salesforce的新体验平台,面向最大化的生产效率进行设计,可以由我们的客户及合作伙伴更加自由的进行扩展。在打造Lightning的过程当中,我们同时创建了<a href="https://www.lightningdesignsystem.com/">Salesforce Lightning设计系统</a>,用于演示怎样在Lightning平台当中创建和使用页面组件。</p> <p><img alt="01-user-experience-design-principles.png" src="/sites/default/files/images/201604-1/01-user-experience-design-principles.png" style="width: 600px; height: 439px;" /></p> <p>这样一套复杂的设计系统绝非信手拈来。整个Lightning平台历经数年的打造,而最初的设计工作也是从一片混乱迷茫当中艰难起步的。</p> <p>我们和客户进行交流,收集用例,勾勒功能流程,通过线框稿与产品及工程师团队进行快速协作。我们采用着任何设计团队都轻车熟路的这样一套工作模式来推动着流程向前发展,最初的进程还算稳定。</p> <p>然而,当我们开始提升设计方案的保真度时,一些始料不及的问题开始暴露出来了。我们越来越多的开始问自己:</p> <p>&ldquo;这两个东西看上去不太一致,会给用户带来困扰吗?&rdquo;</p> <p>作为设计师,我们很在意一致性。指出问题是容易的,难的是怎样解决。而且,即便我们排除了当前所有不一致的地方,又怎能确保在全局范围内真正解决了问题呢。我们越发感到缺乏某种能够将问题上升一个层面去加速决策的设计框架。我们需要某种方式让团队中的所有人都能领会到正确的设计意图,让大家无论在全局还是细节层面都能保持在同一方向上前行。我们需要经过优先级排序的基本设计原则来指导我们的设计沟通及决策制定。</p> <h3> 设计原则</h3> <p>我们着手归纳一些对于我们的客户、产品以及设计师本人来说最为重要的基本设计原则。</p> <p><img alt="02-user-experience-design-principles.jpg" src="/sites/default/files/images/201604-1/02-user-experience-design-principles.jpg" style="width: 600px; height: 450px;" /></p> <p>最终,我们提炼出了四点最核心的原则,以帮助我们塑造设计思维,进而对具体的方案进行评判,做出正确的设计决策。</p> <h4> 清晰</h4> <p>消灭歧义,帮助人们更准确的理解和使用产品。</p> <h4> 高效</h4> <p>让流程更顺畅,更智能化。优化功能逻辑,预判需求,让人们使用的更加轻松快捷。</p> <h4> 一致</h4> <p>对于相同的问题,提供相同的解决方案,减轻用户的认知及记忆负荷,使界面操作方式更符合直觉。</p> <h4> 美观</h4> <p>细心打磨界面外观,让人们感到我们的产品值得他花费时间与精力去使用。</p> <p><img alt="00-user-experience-design-principles.png" src="/sites/default/files/images/201604-1/00-user-experience-design-principles.png" style="width: 600px; height: 213px;" /></p> <h3> 对设计原则进行排序</h3> <p>列出了最基本的设计原则,接下来该对它们进行优先级排序了。&ldquo;美观&rdquo;是否比&ldquo;清晰&rdquo;更加重要?优先考虑&ldquo;一致&rdquo;还是&ldquo;高效&rdquo;?我们进行了一次思考实验:如果将每一条原则各自发挥到极致,那么它们彼此之间将产生怎样的影响作用?以下是我们得出的结论。</p> <p><strong>清晰</strong>对我们来说是体验当中的重中之重。用户需要在足够清晰的界面环境中完成任务,达成目标。如果我们能确保用户一次又一次成功的完成目标,我们就能赢得他们的信任与忠诚。所以我们将&ldquo;清晰&rdquo;放在第一位。</p> <p><strong>高效</strong>是我们与客户进行沟通时听到的最多的一个词。我们几乎想把它放在第一位了。但当我们将这一要素尽可能放大时,却也看到了问题。命令行模式对于专家用户来说是最为高效的工具,但对普通用户来讲就太过高深了。如果将&ldquo;高效&rdquo;推向极致,很大一部分用户会被吓到,他们在操作过程中只会不断的出错,对于用户来说这是一种高昂的成本。所以我们将&ldquo;高效&rdquo;排在第二位。</p> <p><strong>一致性</strong>对于确立设计模式、打造符合直觉的产品体验来说极其重要。但如果过分的追求一致,系统将永远得不到进化的机会。为适时适用的设计创新保留一定的空间,不要为了追求一致性而牺牲更加重要的东西。所以我们将其放在第三位。</p> <p><strong>美观</strong>,对于设计师来说固然重要,但绝非体验的核心要素。对于产品,特别是企业类型的产品,完成目标任务永远是第一位的。很多所谓美观的产品设计实际使用起来便会令人感到乏味无聊,看上去精彩绝伦的用户界面在很多时候会难以认知和记忆。美观是提升体验、激发愉悦的重要手段,但对于我们来说,不可能将它的重要性排在其他任何设计原则之前。</p> <h3> 实战运用</h3> <p>接下来,我们在讨论设计方案的时候便开始运用这套经过优先级排序的设计原则进行指导。在设计过程中,我们也不断提醒着自己聚焦于清晰、高效、一致和美观的体验目标。在进行设计评审时,这套原则及其权重分配方式同样适用。当遇到需要进行多方面权衡的复杂状况时,设计原则的优先级次序也可以帮助我们做出明确的决策。在与其他相关团队进行协作的时候,我们也会宣讲和运用这套原则框架,来确保设计方案沟通工作的顺利进行。</p> <p>如今,这套优先级原则不仅能够在UX团队内部发挥重要的作用,同时也在整个公司当中开始产生影响力,无论是产品还是marketing团队,都开始运用这套原则来辅助决策的制定。</p> <p>作为设计师,我们的目标就是在打造产品设计方案的时候更加自如有效的运用这套设计原则。当所有这些体验要素都能合理的、有机的整合在一起发挥效用的时候,我们才能说自己真的打造出了可以为用户所爱的产品。</p> <p>好设计就是好生意(&ldquo;Good design is good business&quot; - Thomas Watson,IBM)。</p> </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/109" typeof="skos:Concept" property="rdfs:label skos:prefLabel">一致性</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/192" 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> Mon, 04 Apr 2016 09:10:02 +0000 C7210 824 at https://beforweb.com https://beforweb.com/node/824#comments 关于iOS7当中“编辑”与“新增”按钮的布局问题 https://beforweb.com/node/451 <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="https://beforweb.com/sites/default/files/article-thumbs/icon-logo-ios-7-human-interface-design-guideline-document-ui-ux-apple.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>放假便该有放假的样子,哪怕只有一天;书也看得,电视也看得,游戏也玩得,博客也做得,还不止一篇;之前发掉<a href="http://www.beforweb.com/node/458" target="_blank">关于智能眼镜应用设计的文章</a>,以及一篇<a href="http://www.beforweb.com/node/460" target="_blank">腾讯ISUX招聘信息</a>,今天看到一篇小文,就趁天气好时做一下;不消多看,留意便好的一些东西,其实是在平时工作中常会遇到的小问题。下面进入译文。</p> <p>初次使用iOS7的时候,我便有些受挫的感觉,其中最典型的问题包括大家所质疑的&ldquo;这是按钮还是普通文字?&rdquo;,&ldquo;这个按钮可点击吗?&rdquo;一类。在接下来的几个月里,我又逐渐发现细节当中更多的体验问题,例如&ldquo;编辑&rdquo;与&ldquo;新增&rdquo;按钮的布局。</p> <p>接下来我们来看看这个问题在以下几款iOS自带应用当中的体现:</p> <!--break--><ul> <li> 照片</li> <li> 音乐</li> <li> 通讯录</li> <li> 电话</li> <li> 备忘录</li> <li> 提醒事项</li> </ul> <p>你不用花多大力气就能注意到&ldquo;编辑&rdquo;与&ldquo;新增&rdquo;按钮的位置甚至是文案在这些应用当中的不统一之处;详见以下截屏中的黄圈标注。</p> <p><img alt="01-ios7-ui-design-edit-add.jpg" src="/sites/default/files/images/201404-2/01-ios7-ui-design-edit-add.jpg" style="width: 640px; height: 480px;" /></p> <p class="figure-caption">电话 vs. 照片</p> <p><img alt="02-ios7-ui-design-edit-add.jpg" src="/sites/default/files/images/201404-2/02-ios7-ui-design-edit-add.jpg" style="width: 640px; height: 480px;" /></p> <p class="figure-caption">音乐应用内部</p> <p><img alt="03-ios7-ui-design-edit-add.jpg" src="/sites/default/files/images/201404-2/03-ios7-ui-design-edit-add.jpg" style="width: 640px; height: 480px;" /></p> <p class="figure-caption">同样是音乐应用,&ldquo;编辑&rdquo;在左,编辑模式内的&ldquo;新增&rdquo;在右,&ldquo;完成&rdquo;在中间</p> <p><img alt="04-ios7-ui-design-edit-add.jpg" src="/sites/default/files/images/201404-2/04-ios7-ui-design-edit-add.jpg" style="width: 640px; height: 480px;" /></p> <p class="figure-caption">&ldquo;新增&rdquo;在浏览全部标签页的底部,&ldquo;完成&rdquo;在右</p> <p><img alt="05-ios7-ui-design-edit-add.jpg" src="/sites/default/files/images/201404-2/05-ios7-ui-design-edit-add.jpg" style="width: 640px; height: 480px;" /></p> <p class="figure-caption">备忘录 vs. 提醒事项(在备忘录中,&ldquo;新增&rdquo;从&ldquo;+&rdquo;变为&ldquo;New&rdquo;)</p> <p><img alt="06-ios7-ui-design-edit-add.jpg" src="/sites/default/files/images/201404-2/06-ios7-ui-design-edit-add.jpg" style="width: 640px; height: 480px;" /></p> <p class="figure-caption">通讯录 vs. 查找我的朋友(在&ldquo;查找我的朋友&rdquo;中,&ldquo;新增&rdquo;从&ldquo;+&rdquo;变为&ldquo;Add&rdquo;)</p> <p><img alt="07-ios7-ui-design-edit-add.jpg" src="/sites/default/files/images/201404-2/07-ios7-ui-design-edit-add.jpg" style="width: 640px; height: 480px;" /></p> <p class="figure-caption">Facetime中,在不同的tab界面中,&ldquo;新增&rdquo;与&ldquo;编辑&rdquo;在相同的位置</p> <p><img alt="08-ios7-ui-design-edit-add.jpg" src="/sites/default/files/images/201404-2/08-ios7-ui-design-edit-add.jpg" style="width: 640px; height: 480px;" /></p> <p class="figure-caption">股票 vs. 语音备忘录(股票中的&ldquo;新增&rdquo;在左,语音备忘录中的&ldquo;编辑&rdquo;在中间)</p> <p>确实,每个应用本就不同,它们各自有各自的功能,但&ldquo;编辑&rdquo;与&ldquo;新增&rdquo;按钮的布局是否应该更谨慎的规划和权衡,以体现全局层面的体验统一性。</p> <p>或是因为每个应用都是各自单独设计的,因而忽略了不同应用间的交互模式差异?</p> <p>要打造上乘的用户体验,移除任何可能出现的交互摩擦力都是很重要的。用户使用应用总要付出学习成本,历经初期的学习曲线之后,他们便可以依赖由&ldquo;经验&rdquo;建立起的心智模型与期望,在接下来的使用过程中更有效率。</p> <p>而在&ldquo;坏&rdquo;的体验中,&ldquo;学习&rdquo;将失去意义。一旦&ldquo;编辑&rdquo;和&ldquo;新增&rdquo;这两个全局通用的按钮在同一个系统下的不同应用中位置变的随机起来,用户便无法对它们的位置建立起值得依赖的心智模型。</p> <p>所以,每次用户想要执行&ldquo;编辑&rdquo;或&ldquo;新增&rdquo;的操作时,他们都要首先花时间去寻找这个功能到底在哪;甚至更坏的,他们本该根据以往的习惯直接去点击某个角落里的按钮,而在一个缺乏统一性的环境里,他们会强迫自己停下已经开始的点击动作;交互流畅性被破坏的程度可见一斑。</p> <p>这事也许听上去琐碎的不值一提,有人会说要确认按钮的位置只会花上几毫秒的时间而已;但是设想一下,数以亿计的用户,如果每个人在每次使用这些应用时都需要浪费这么多时间...严谨的设计应当在帮助人们解决问题的同时尽最大可能的降低人们的认知负荷,对于能否帮助用户节约时间和精力进行细之又细的关注。</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="/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/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/109" typeof="skos:Concept" property="rdfs:label skos:prefLabel">一致性</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/36" 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> Mon, 07 Apr 2014 07:27:00 +0000 C7210 451 at https://beforweb.com https://beforweb.com/node/451#comments 应用推广站点的最佳设计实践及优秀范例 https://beforweb.com/node/177 <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="https://beforweb.com/sites/default/files/article-thumbs/icon-logo-app-store-iphone-ios-application-idea-design-development-marketing-success.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>眼下正用电视放着上周的Slash末日之爱现场。是的,周二,本小博主去现场看了,也在<a href="http://weibo.com/c7210">微博</a>上发了些照片。这是我等了将近20年的Live,真正来到眼前时却有些不大敢相信是真的了,当时唯有靠不停的摇着喊着跳着跟周围的人挤着才能提醒自己真的是身临其境了。不过后果就是接下来的几天脖子都直不起来,多多少少有些没精神。对我来说这辈子必看的现场还真不是很多,活到30岁算是实现了第一个也是最重要的一个。好吧,说正事儿喽,今次是关于App推广站点的话题。</p> <p>这里进入译文。人们对于应用产品的需求总是没够的,毕竟,这些小东西可以让我们的生活变的更加简单快捷,它们帮助我们记住事情,寻找信息,发现身边的事物,结交各种有意思的人。</p> <p>应用类产品迅猛而持续的发展趋势无需多言,当人们需要一款软件时,无论是用在iPhone、安卓,还是在MacBook上,他们通常都会面对非常多的选择。应用在让人们的生活变的更轻松的同时,也越来越容易被创建。</p> <p>要打造一款成功的应用,你需要做的再也不只限于产品自身的设计与开发,营销推广方面的工作同样是非常重要的,其中最典型的做法就是创建产品推广页面或minisite,向人们介绍你的产品。曾几何时,所谓的&ldquo;介绍&rdquo;就是告诉人们这个产品是个什么东西,你为什么需要它,等等等等,和其他传统行业的产品介绍网站没有多大区别。不过在我(英文原文作者)看来,这里还是有些很关键的区别和技巧的。本文中,我将和大家分享五点应用推广页的最佳设计实践,以及若干非常不错的设计范例。</p> <!--break--><h3> 1.别只依赖截屏,要展示人们怎样使用产品</h3> <p>确实,在应用推广页面中使用实际界面截图是很流行的做法,毕竟人们在下载之前希望看到它的具体情况,包括长的什么样子,以及在实际当中是怎样工作的。</p> <p>问题在于,这些图片即使再漂亮,也只能展示界面的面貌,有时它们容易给人们留下太多的想象空间。如果条件允许,不要只依赖这些截屏,试着搭配一些真实的人使用该产品时的图片。</p> <p>举个栗子,除了游戏之外,应用产品通常都是用来解决实际生活中的各种问题的。所以,与其单纯的展示界面,不如尝试展示用户在典型情境中使用应用的样子,让访问着了解你的产品是在怎样的环境中如何帮人们更加轻松的解决问题的。如果你宣称自己的产品可以帮助人们找到附近最棒的餐馆,不妨通过一系列图片展示一个典型而完整的用例,让人们一下子就能了解你的产品能够切实帮他们解决怎样的实际问题。</p> <h3> 2.像产品着陆页那样,在折线以上明示&ldquo;行为召唤&rdquo;</h3> <p>设计良好的着陆页(landing page)在传达信息和提升转化率方面是很有效的。着陆页一方面会向目标用户传达产品的关键信息,一方面还要促使他们产生转化行为。</p> <p>对于应用推广页面来说也是同样的道理,我们的目的就是让人们知情并且成为用户。你要确保在首屏,即折线以上,简短明确的向访问者呈现最关键的信息,同时提供&ldquo;行为召唤&rdquo;或相关入口。</p> <p>另外,信息内容和行为召唤当中的内容风格会对转化效果产生重要的影响&mdash;&mdash;要时刻记得产品的目标用户是怎样的群体,要说他们的语言。如果你的产品是面向职业医师的,那么在内容风格上就不要表现出像是在客厅中和好朋友聊天那样。</p> <p>相关阅读:<a href="http://beforweb.com/node/171">行为召唤之后是什么?</a></p> <h3> 3.讲故事,而不只是功能描述</h3> <p>在介绍内容方面,仅仅呈现功能列表或规格参数的效果是很有限的,其实我们还有很多其他的方式可以选择。不要让情况变成大家都在功能特色列表上拼命的你争我夺,而忽略了通过最符合用户目标的方式来展示产品。</p> <p>试着通过讲故事的方式呈现产品的价值。所谓&ldquo;讲故事&rdquo;,就是要与目标用户及市场建立情感层面的关联。如果产品的目标用户是那些自由设计师,那么与其翻来覆去的干巴巴的强调你的产品可以帮助他们找到多少客户,不如从他们的角度出发,表达出你对他们在寻找客户时所承受的压力的理解,而你的产品又能带来怎样的关怀。</p> <p>这种方式可以有效的抓住目标用户的痛点,唤起他们情感上的共鸣,促使他们更加自主的去了解你的产品。而且这样的情感关联一旦建立,便很难被打破,除非你自己搞砸了。</p> <p>相关阅读:</p> <ul> <li> <a href="http://beforweb.com/node/181">八个小方法,帮你成为更具同理心的设计师</a></li> <li> <a href="http://beforweb.com/node/103">为产品赋予人格 - 情感化设计的组成要素及实践案例</a></li> </ul> <h3> 4.保持简短,条理清晰</h3> <p>我们说的是互联网,是移动应用;在这里,你没有足够的时间和空间去絮絮叨叨的陈述和表达,用户也没有足够的时间和耐心去阅读冗长的信息。很多统计都会提到,你通常只有5秒甚至更少的时间来通过文字信息抓住用户的注意力。</p> <p>对于文字内容,要精炼,再精炼,并以项目列表(bullet list)的方式条理清晰的呈现出来,迅速解释产品的价值。没人喜欢在网上阅读(那我的博客怎办呢?译者C7210注),如果他们想一大段一大段的读文字,他们会看书;如果他们想要得到某个应用,他们只想尽快了解并得到它。另外,列表形式的内容更利于人们快速扫描并获取信息。</p> <h3> 5.视觉风格与应用本身保持一致</h3> <p>要确保推广站点与应用产品在设计语言与美学风格上保持统一。一方面是由于品牌识别方面的原因,另一方面也可以帮助目标用户在实际使用之前对应用产品的定位与风格产生预先认知。如果你的推广网站在视觉风格上非常简约和干练,那么目标用户就会对应用产品本身产生同样的期许。</p> <p>对于游戏类应用,人们自然期望得到轻松、快乐、有趣的体验。作为产品整体体验的一个环节,推广站点自身的风格也要向这个方向靠拢;对于其他类型的应用产品来说也是同理。</p> <p>相关阅读:<a href="http://beforweb.com/node/127">移动应用的视觉美学 - 谈三款拥有高收入的应用产品</a></p> <h3> 一些优秀的设计范例</h3> <h4> Drip</h4> <p>Drip是一款Mac上的桌面端应用,帮助人们更方便快捷的上传文件。他们的推广页面非常简洁,一句话概括了产品的用途,然后一步步的逐渐引导你了解其特性,并完成下载。</p> <p><img alt="01-drop-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/01-drop-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Duet</h4> <p>用户可以通过Duet发起事件并邀请他人参与,当对方接受邀请后,大家可以通过Duet保存与事件相关的照片、视频等作为共同的回忆。在Duet的页面上有一个很棒的视频,不仅对应用进行了介绍,而且通过讲故事的方式让人们更直观的了解了Duet的价值,为有需求的潜在用户建立了有效的需求关联。</p> <p><img alt="02-duet-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/02-duet-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Flow</h4> <p>大字标题,只包含三条关键信息的特色功能介绍,iPhone、iPad、MacBook整合使用的图片,这些元素让你进入Flow的推广站点之后,可以在非常短的时间内了解到这款多平台产品的用途。</p> <p><img alt="03-flow-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/03-flow-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h3> Infomatic</h3> <p>如果你没有太多时间甚至是内容来组织创建App的推广站点,那么Infomatic的设计方案也许可以为你提供一些参考。页面风格简洁而现代,产品介绍仅由两个单词及两屏的截图组成,你还可以在非常显著的位置了解到应用的价格并点击获取。值得一提的是,从视觉表达方式的角度来看,用于社会化推广的元素在整个页面中是为数不多的抢眼元素之一。</p> <p><img alt="04-Infomatic-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/04-Infomatic-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Jobs</h4> <p>这款应用可以帮助求职者基于地理位置等维度,更方便的从<a href="http://www.authenticjobs.com/">Authentic Jobs</a>的数据源中获取职位信息。他们的网站在视觉风格上与应用本身很好的保持了一致性,内容的层次和布局很合理,不过我个人感觉再有个&ldquo;故事&rdquo;就更棒了,毕竟他们的产品确实很适合通过这种形式展示功能特色。</p> <p><img alt="05-jobs-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/05-jobs-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Mosaic</h4> <p>摄影爱好者们可以通过这款应用(及其提供的服务)将iPhone中的照片印刷为精美的实体剪贴簿。他们的推广站点中,产品简介、实物图片、行为召唤等都集中在折线之上,你也可以滚动页面,查看更详细的产品特性介绍。</p> <p><img alt="06-Mosaic-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/06-Mosaic-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Nizo</h4> <p>Nizo提供的产品用来帮人们研究他们关注的目标市场。必须承认,当你打开他们的页面后,很难了解他们要表达什么东西,不过这不是问题:他们展示的文案是一系列技术与功能术语,并且只是面向于他们的目标用户的。在这种情况下,没有相关的&ldquo;故事&rdquo;是可行的,因为他们很清楚自己的用户,清楚自己的产品就是为这部分特定的人群打造的。</p> <p><img alt="07-nizo-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/07-nizo-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Ballpark</h4> <p>Ballpark的站点与前面介绍过的Flow很类似,无论是设计风格还是信息布局:清晰直白的标题,多平台展示等等,不过最大的区别在于Ballpark将行为召唤放置在了更加明显的区域。</p> <p><img alt="08-Ballpark-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/08-Ballpark-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Hipvite for TechCrunch</h4> <p>Hipvite的做法与多数竞争对手有所区别:当其他产品都在拼命向TechCrunch发邮件希望得到介绍机会的时候,Hipvite为自己制作了一个独特的推广站,在内容头部直接求关注,希望可以通过这种方式吸引到TC的注意力。</p> <p><img alt="09-Hipvite-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/09-Hipvite-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Plover</h4> <p>又一个简洁干净的页面,你需要知道的重要信息都在折线以上,包括应用的用途、如何得到它,就这么简单。之后才是实际截屏和更多的特色介绍,你可以根据自己的需要继续浏览。</p> <p><img alt="10-Plover-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/10-Plover-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Listing Scout</h4> <p>这也是一款多平台应用,用来帮助房产商更好的进行销售工作。我个人很喜欢这个站点的原因之一就是他们把行为召唤放在了非常显著的位置,而且下面的详细介绍也不是简单的通过功能列表的形式平铺直述的,而是以更加贴近房产销售人员实际工作方式的形式呈现的。</p> <p><img alt="11-Listing-Scout-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/11-Listing-Scout-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h4> Strava</h4> <p>Strava面向的是那些具有或向往健康生活风格的群体,准确的说它的产品形态是社区网站外加一个能够跟踪生活健康状态的移动应用。在其网站头部的轮播当中,每一个图片位都提供了免费注册的入口,而图片当中的内容则是对他们产品的介绍。这种形式在空间利用率方面的表现不错,即在显著的位置提供了产品简介和行为召唤,同时又在折线以上通过图片轮播来展示了产品特色,包括他们希望带给用户的健康气质。</p> <p><img alt="12-Strava-app-iphone-android-landing-page-websites-ux-ui-design.jpg" src="/sites/default/files/images/201305-1/12-Strava-app-iphone-android-landing-page-websites-ux-ui-design.jpg" /></p> <h3> 更多范例</h3> <ul> <li> <a href="http://webdesignledger.com/inspiration/21-beautiful-iphone-app-websites">21个漂亮的iPhone App网站</a></li> <li> <a href="http://mobileorchard.com/30-amazing-and-inspirational-app-landing-pages/">30个App着陆页创意</a></li> </ul> <h3> 总结</h3> <p>应用推广站点的设计思路还是很直白的,你要达到宣传产品、树立品牌形象的目的,同时必须确保这些对于目标用户群来说是具有明确意义的。需要不断提醒自己的是,这不是为了设计网站而设计网站,我们需要通过它来达到吸引目光、促进转化、推广产品的最终目标。</p> </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/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/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/134" typeof="skos:Concept" property="rdfs:label skos:prefLabel">行为召唤</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/116" typeof="skos:Concept" property="rdfs:label skos:prefLabel">情感化设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/109" 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> Sat, 11 May 2013 10:30:04 +0000 C7210 177 at https://beforweb.com https://beforweb.com/node/177#comments 你的产品需要设计规范吗? https://beforweb.com/node/165 <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="https://beforweb.com/sites/default/files/article-thumbs/icon-logo-style-guide-design-guidelines-ui-ux-interaction.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>明天就是春节了叭。现在这些话是在2月8日晚间写下的,先给各位拜年喽。陆陆续续的几乎下了两天的雪,现在看看窗外,谈不上银妆素裹,却也黑白分明。雪在夜晚的时候确实显得比白天要白亮一些呢,嗯?</p> <p>不知春节假期里还有多少朋友会看看文章什么的;我自己来说,除了一两件比较重要的、可能占据每天很多时间的事情以外,剩下就只想看书和玩老游戏了。玩老游戏,这可是假期的特别节目,尤其是春节假期;此传统可以追溯到高中的时候,印象里那时年三十晚上是以玩街机模拟器为主,The Punisher啊恐龙快打啊一类;而如今所谓的老游戏基本就是使命召唤1到4了。</p> <p>闲话念叨到这,进入正文,关于设计规范、风格指南的话题。就我个人的经历来说,从零开始创建设计规范其实不是易事,包括公司和产品的实际情况、规范的目的、面向的使用者、开工的时间点等等因素都是需要充分考虑的,而且很容易在过程当中跑偏,产出一些并没有实际参考价值的、单纯为了规范而创建的规范。接下来我们一起看看这篇译文,看看作者的一些看法和建议,还有一些不错的范例。走起。</p> <p>不是所有的网站或移动应用都需要设计规范。你表弟的博客就未必需要,你邻居自己搭建的用来卖猫草的小电商网站也不那么需要,当然这也要看他能卖掉多少,能做到多大规模。</p> <!--break--><p>通常,只有那些需要维护专业形象和品牌一致性的产品才真正需要设计规范(或是风格指南一类的说法)。不要把这事儿想的太容易,真正意义上的设计规范需要你花费大量的时间成本去创建并持续维护,所以在决定动手之前,最好确认一下你的产品是否真的需要设计规范,它所需要投入的成本是否能够被接受。</p> <h3> 什么是设计规范?</h3> <p>在确认是否需要设计规范之前,我们首先应该明确一下设计规范到底是什么。简单的说,它就是一份由很多范例组成文档(电子文档、印刷文档或HTML文件等),用来描述和展示你的产品应该具有怎样的外观和交互方式。它就是一份指南,让你在创建和更新网站或应用时知道在什么地方使用怎样的风格标准。设计规范可以帮助你了解一些典型的问题包括&ldquo;这里应该使用怎样的配色?&rdquo;、&ldquo;H1标题要用多大的字号?&rdquo;、&ldquo;这部分文字内容应该左对齐还是两侧对齐?&rdquo;等等。</p> <p><a href="http://styleguide.yahoo.com" target="_blank"><img alt="01-yahoo-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/01-yahoo-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p class="figure-caption"><a href="http://styleguide.yahoo.com">The Yahoo! Style Guide</a></p> <h3> 你需要设计规范吗?何时需要?</h3> <p>答案取决于你的产品类型,以及设计规范的使用者会有哪些。这里所说的使用者包括设计师、开发人员、内容创建者等角色。搞清楚&ldquo;规范的使用者是谁&rdquo;,这非常重要&mdash;&mdash;很多管理人员或设计师会告诉你,如果我们创建一份设计规范,它会在接下来很长一段时间内帮助团队节省大量的时间,叭啦叭啦;但实际情况是,你们很有可能在投入了巨大的时间与人力成本去做这件事之后,却发现这份规范当中的内容对团队里的任何一个职能类型都没有很大的参考价值;最坏的情况是,无论设计师还是开发人员,他们压根就不会去看它。</p> <p>&ldquo;时间&rdquo;也是一个重要的因素。如果你们当前正忙于新产品的设计开发,那么显然无法抽出足够的时间去做规范方面的事情。设计规范是一项长期投资,如果眼下不确定自己有足够的资源可以投入,那么就不要去做,但你可以从现在开始为此做些准备,在新产品的设计开发过程中留意那些有可能写入设计规范的方方面面,将它们作为素材搜集起来,到创建规范的时候加以整理。</p> <p>你也可以试着回答如下这些问题,如果其中大部分的答案都是肯定的,那么你可以考虑创建一份设计规范了:</p> <ul> <li> 你是否想节省脑细胞?</li> <li> 你是否希望在产品中落实良好的用户体验?</li> <li> 你是否觉得有必要在产品的设计方面保持一致性?</li> <li> 除了当前的网站或应用之外,你的品牌和产品在将来是否延续性和扩展性?</li> <li> 是否有第三方合作者会用到你的品牌元素?</li> <li> 你的产品当中是否会有频繁而规律的内容更新?</li> <li> 在自己的团队之外是否有第三方的内容提供者?</li> <li> 你的产品是否有提供给第三方设计师与开发人员的API接口?</li> <li> 你是否准备以公司的形式长期维护当前产品或是继续开发新产品?</li> <li> 你是否就职于一家大公司?</li> </ul> <p><a href="http://developer.netflix.com/files/API_Naming_and_Logo_Guidelines.pdf" target="_blank"><img alt="02-netflix-api-design-library-style-guide-guidelines-ui-user-experience.jpg" src="/sites/default/files/images/201302-2/02-netflix-api-design-library-style-guide-guidelines-ui-user-experience.jpg" /></a></p> <p class="figure-caption"><a href="http://developer.netflix.com/files/API_Naming_and_Logo_Guidelines.pdf">Netflix的API规范</a>(pdf)</p> <h3> 怎样创建设计规范?</h3> <p>如果你确定自己需要一份设计规范,那么怎样着手进行创建呢?正如前面提到的,这也要取决于你的产品和团队的实际情况。有可能你只需要为自己创建设计规范,这时它更像是一种备忘或归纳,那么你就没必要做的非常细致,也不需要在表现形式上花费太多时间;而多数情况下,设计规范是面向产品系列及大中型团队的,这时你就必须在个各方面都深入的进行,同时保证必要的细节。</p> <p>我列了两个清单,分别是&ldquo;包含哪些内容?&rdquo;和&ldquo;还需要些什么?&rdquo;。其中第一个清单里列出了设计规范当中通常需要涉及到的内容,后者则包括了你有可能需要进行额外处理的内容。当然,这两份清单并不是标准摸板一类的东西,你只需要在创建规范时结合自己的实际情况对这些要点加以考虑。</p> <h4> 包含哪些内容?</h4> <h5> 品牌元素</h5> <p>给出官方logo和标准配色方案的定义及范例,介绍logo在全彩、黑白或不同背景色等状况下的使用方式,提供标准配色的HEX及RGB值,另外也可以提供logo文件的下载,包括.png、.jpg甚至是.ai或.psd文件。</p> <h5> 文字</h5> <p>对页头、段落、引用、标签、表单标题等任何有可能出现格式化文字的地方进行规范定义,包括字体、字号、行高、字间距等方面。</p> <h5> 布局</h5> <p>定义不同的区块和元素在界面当中的位置,还有它们彼此之间的关系。对于那些在全局范围内普遍适用的外间距(margin)、内边距(padding)、网格模式等规则也要作以说明;另外,有些元素会根据界面环境的不同产生相应的变化,这些也需要在规范中也要进行说明,最好可以搭配图片进行展示。</p> <h5> 链接和按钮</h5> <p>定义链接和按钮的视觉风格,为不同模块中的链接以及不同类型表单中的按钮提供色值及图例。这个过程也有可能帮助你对一些过于复杂的界面进行简化。</p> <h5> 导航</h5> <p>定义各级导航的视觉风格及交互方式,特别是对于那些具有层级关系的导航项来说,要完整的展示出嵌套关系及展开方式。</p> <h5> 视觉继承</h5> <p>定义页头、标题、段落、图片等元素是怎样在视觉上保持关联性的,提供必要的图例,并通过文字描述出视觉继承关系对于整个产品的外观气质的影响作用。</p> <h5> 图片与图标</h5> <p>对内容和界面元素当中的图片及图标进行定义,包括文件类型、尺寸、文件大小、比例、风格等方面。内容中是否会有特色图片?正文中的图片是左右浮动还是居中?是否有一套特定的图标素材?</p> <h5> UI标准</h5> <p>定义不同的UI元素所对应的交互模式,以及它们的视觉表现形式,例如在哪些情况下使用复选框(check box)或单选按钮(radio button)。可以试着将网站涉及到的所有类型的UI元素都陈列出来,提供图例及前端代码。</p> <h5> 表单和验证</h5> <p>定义表单的整体风格及元素布局,对表单涉及到的功能流程进行描述;定义表单的验证规则以及各种有可能出现的错误提示等。</p> <p><a href="http://www.w3.org/Consortium/Legal/logo-usage-20000308" target="_blank"><img alt="03-w3c-design-library-style-guide-guidelines-ui-user-experience.jpg" src="/sites/default/files/images/201302-2/03-w3c-design-library-style-guide-guidelines-ui-user-experience.jpg" /></a></p> <p class="figure-caption"><a href="http://www.w3.org/Consortium/Legal/logo-usage-20000308">W3C - logo的使用规范</a></p> <h4> 还需要些什么?</h4> <h5> 多元化</h5> <p>有时你也许需要面向不同的使用者创建不同版本的规范。例如,对于某些类型的网站来说,有着不同级别和权限的内容创建者与管理人员,最有效的做法是针对不同的角色提供特定的规范指导;当然你也可以将完整版本的规范面向不同职能的人员进行订制性的简化。</p> <h5> 目标任务</h5> <p>为了使相关配合部门在大方向上达成默契,你也许需要在设计规范中结合具体内容对整个的产品目标及阶段性的工作任务加以描述,这也可以让大家充分理解规范的必要性,理解一致化的表现风格及用户体验对产品策略的推动作用。</p> <h5> 代码</h5> <p>根据设计规范所面向的人员范围的实际情况,可以考虑将前端代码标准及最佳实践模式配合图例进行展示,包括HTML、CSS、JavaScript等。</p> <h5> 文件规范</h5> <p>你也许需要面向所有的内容创建者制订文件使用方面的规范,包括文件类型限定、命名规则、版本号更新方式等。从长远的角度来看,这样可以避免很多琐碎的潜在问题。</p> <h5> 内容标准</h5> <p>面向内容的创建者及管理者,你也有必要在规范中对人工生成的内容进行格式化的定义,例如正文内容的长度、标题的字符数等等。另外对于内容的基调,提交与编辑操作的流程、版权处理方式等等也要作以具有实际指导意义的说明。</p> <h5> 评论和论坛</h5> <p>如果你的产品为用户提供了评论功能,或是开设了相关的论坛,那么你同样需要对这些方面的管理进行规范。例如,评论内容的审核标准是什么,怎样回复用户的评论,怎样处理负面内容,在哪些情况下需要关闭评论功能等等。</p> <h5> 可下载、可打印</h5> <p>如果你通过在线的方式创建的设计规范,那么要尽量确保相关人员可以将它下载或打印出来,方便离线使用。不过这里也存在一个问题,就是在更新规范的时候无法对他人手中的离线版本进行同步处理。这种情况下可以尝试通过邮件通知的方式加以弥补。</p> <h5> 做的漂亮些</h5> <p>既然是设计规范,那么其自身的外观形象也是很重要的。在时间允许的情况下尽量多的使用图片范例,即保证内容形式上的丰富,也能对设计开发人员更有直观的参考价值。从某种程度上讲,设计规范也是产品整体质量和形象的一个组成部分。当然,如果涉及规范只是供内部设计开发使用,不涉及第三方合作的话,那么在资源和成本上进行充分的控制也是合理的,譬如一个内部wiki系统就可以满足最基本的需求<a class="eLink" href="http://beforweb.com">。</a></p> <h3> 参考范例</h3> <p>最后我们来看一些设计规范的实际范例;这些实例主要展示了设计规范在品牌元素的使用规则方面起到的作用。</p> <p><a href="https://developer.apple.com/softwarelicensing/agreements/pdf/mac_logo_gdlns.pdf" target="_blank"><img alt="04-mac-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/04-mac-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://newsroom.cisco.com/dlls/2006/CiscoLogoGuidelines.pdf" target="_blank"><img alt="05-cisco-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/05-cisco-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://developer.android.com/distribute/googleplay/promote/brand.html"><img alt="06-android-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/06-android-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://features.mapquest.com/"><img alt="07-mapquest-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/07-mapquest-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://railslogo.com/" target="_blank"><img alt="08-rails-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/08-rails-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://dev.mysql.com/common/logos/mysql-sun-brand-usage-guidelines.pdf" target="_blank"><img alt="09-mysql-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/09-mysql-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://www.info.gov.za/otherdocs/2005/identity/index.html" target="_blank"><img alt="10-southafrica-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/10-southafrica-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://blog.mozilla.org/press/media-library/" target="_blank"><img alt="11-mozilla-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/11-mozilla-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://issuu.com/bondo/docs/skype_brand_book_-_look?mode=embed&amp;documentId=081126144540-63ceb3433ffe4a79aacf4f93d029fcb0&amp;layout=grey" target="_blank"><img alt="12-skype-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/12-skype-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://www.energystar.gov/index.cfm?c=logos.pt_guidelines" target="_blank"><img alt="13-energystar-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/13-energystar-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://www.gatech.edu/comm/offerings/brandmanagement.html" target="_blank"><img alt="14-gatech-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/14-gatech-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://www.intel.com/intel/legal/tmusage2.htm" target="_blank"><img alt="15-intel-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/15-intel-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://support.google.com/customsearch/bin/answer.py?hl=en&amp;answer=70312&amp;topic=1717072&amp;ctx=topic" target="_blank"><img alt="16-google-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/16-google-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> <p><a href="http://www.scribd.com/doc/214200/ebay-brand-guidelines" target="_blank"><img alt="17-ebay-design-library-style-guide-guidelines-ui-user-experience.png" src="/sites/default/files/images/201302-2/17-ebay-design-library-style-guide-guidelines-ui-user-experience.png" /></a></p> </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/125" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计规范</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</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/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/109" typeof="skos:Concept" property="rdfs:label skos:prefLabel">一致性</a></li></ul> Sat, 09 Feb 2013 04:50:06 +0000 C7210 165 at https://beforweb.com https://beforweb.com/node/165#comments 移动应用的空状态界面设计 https://beforweb.com/node/158 <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="https://beforweb.com/sites/default/files/article-thumbs/icon-logo-ios-iphone-mobile-app-ux-ui-design-empty-states-emotion.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;的赶脚,一些需要上手开始做的事也准备&ldquo;过年假期里再开始搞叭&rdquo;这样;自己的一些项目、理想中的作品集、一些要读的书、一些想玩的游戏...大体都是这样,其实我眼下把这篇发布出来之后就拿出几个小时把想做的事情猛做一通也不是不可以,但似乎总是想寻找一个大部头的时间;不知是否是拖延症的借口;实际上我不认为自己有这毛病,真的。打住,我们进入今天的正文,关于移动应用的空状态界面设计;虽然文中的示例都是iPhone应用,不过道理应该与平台甚至设备类型无关。(btw,用微信的朋友们可以添加一下Beforweb了呗,点击侧边栏头上第二个图标就会出现二维码)</p> <p>&ldquo;空状态&rdquo;是指移动应用界面在没有内容或数据时呈现出的状态。长久以来,空状态界面一直是被忽视的,因为设计师们通常会将全部精力集中在怎样更好的呈现内容和数据上,只有开发人员才会比较频繁的与这类相对&ldquo;意外&rdquo;的状态打交道。也正是因为这样的原因,空状态界面留给用户的印象大体上就是晦涩难懂的文案以及缺乏视觉设计风格。</p> <p>要想打造完美的整体体验,作为设计师,我们不能放过任何一个用户有可能接触到的界面状态。空状态界面大致包括三种类型:初次使用、用户清空数据、出错。下面,我们就来一同了解一下这三种情境所对应的相关创意要素与注意事项。</p> <!--break--><h3> 1.初次使用</h3> <p>应用在初次加载时留给用户的第一印象是非常重要的。你的一部分用户也许已经通过其他同类产品建立起了心智模型及预期,他们会非常敏感的从一开始就将你的应用与他们已经熟悉的那些进行对比;而另外一些用户可能完全没有同类产品的使用经验,他们就像一张空白的花布,等待着惊喜或失望。无论哪种情况,差劲的第一印象所造成的损害都是很难弥补的。</p> <p>如果用户下载了你的应用并完成了注册,那么这几乎可以代表他们已经知道你的产品是做什么用的,但未必清楚具体怎样使用。对于某些类型的应用来说,初次登录之后是没有任何数据内容的,这也正是充分利用界面空间为用户提供新手指引的好机会。你可以告诉用户为什么当前没有内容、怎样创建或获取内容;在这个环节中,不妨试着融入一些能够体现产品个性的情感化元素,这可以使用户进入一种较为轻松的上手状态,引发他们积极正面的情感,同时也能给他们留下不错的第一印象。</p> <p>看看<a href="https://itunes.apple.com/cn/app/buffer-for-twitter-facebook/id490474324?mt=8">Buffer</a>、<a href="https://itunes.apple.com/cn/app/timehop/id569077959?mt=8">Timehop</a>和<a href="https://itunes.apple.com/cn/app/dropbox/id327630330?mt=8">Dropbox</a>是怎么做的叭。值得一提的是,Buffer与Dropbox的空状态界面与他们各自的Web端页面(<a href="http://bufferapp.com">bufferapp.com</a>以及<a href="https://www.dropbox.com/login">dropbox的登录页</a>)在引导与插图等方面都使用了相同风格的视觉元素,这也体现出了他们的产品与品牌形象在不同平台上的良好一致性。</p> <p><img alt="01-buffer-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/01-buffer-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <p class="figure-caption">buffer</p> <p><img alt="02-timehop-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/02-timehop-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <p class="figure-caption">Timehop</p> <p><img alt="03-dropbox-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/03-dropbox-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <p class="figure-caption">Dropbox(真的很暖心的赶脚,我喜欢 - 译者<a href="http://weibo.com/c7210">C7210</a>)</p> <div class="embed"><article id="node-262" class="node node-related-books" about="/node/262" 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应用-乔什•克拉克/dp/B005R36I6U/?_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/06.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_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应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书会告诉你如何从iPhone的角度来思考和理解应用设计,使你明白怎样去综合思考设计、心理、文化、人体工程和可用性问题。在书中,你会看到大量的真实应用的设计实例和思考过程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 2.用户清空数据</h3> <p>想想邮件或信息的收件箱,多数时候是满的叭,里面有几百封未读邮件也不奇怪。不过不同类型的用户有着不同的需求和用法,有些人确实会阅读其中的大部分内容。</p> <p>不管你是哪类用户,其实我们在心里或多或少都会有将&ldquo;待处理对象&rdquo;归零的欲望(回想一下你看到App Store图标右上角的待更新应用数量图标时的赶脚)。从这个角度讲,将待处理信息进行归零其实是一种没有太多实际意义但却很容易花费时间精力进行操作的任务,有时人们做这件事只是出于那一点点强迫症。这种时候,不妨给他们一点正面的情绪回馈,在空状态界面中给这些用户一点小小的&ldquo;回报&rdquo;。</p> <p>下面我们来看看<a href="https://itunes.apple.com/cn/app/sparrow/id492573565?mt=8">Sparrow</a>、<a href="https://itunes.apple.com/us/app/gmail-email-from-google/id422689480?mt=8">Gmail</a>以及iOS原生的邮件客户端在这方面的做法。</p> <p>当邮件被清空之后,Sparrow会在界面中展示一个传统&ldquo;收件箱&rdquo;的图标,下面的标题是&ldquo;零邮件&rdquo;,形象、干净、简单,多少可以让人产生一点没有多大实际意义的成就感。</p> <p><img alt="04-sparrow-inbox-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/04-sparrow-inbox-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <p>Gmail则在这种最基本的做法之上又进了一步,他们的设计师在空收件箱页面中放了一个微笑着的太阳,通过对人类情绪的模仿,为产品赋予了人格,使用户从情感上感受到愉悦。而且他们在文案的处理上也很贴心:&ldquo;你当前没有邮件要处理了,开心的享受这一天叭!&rdquo;</p> <p>在这里强烈推荐阅读&ldquo;<a href="http://beforweb.com/node/103">为产品赋予人格 - 情感化设计的组成要素及实践案例</a>&rdquo;一文。</p> <p><img alt="05-gmail-inbox-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/05-gmail-inbox-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <div class="embed"><article id="node-303" class="node node-related-books" about="/node/303" 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/B007HWLYSQ/?_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/49.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_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/B007HWLYSQ/?_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> <p>而相比之下,iOS自带的邮件应用就缺乏这方面的积极回馈了,用户在这个空状态界面中很容易产生疑虑:我是否已经真的清空了收件箱,还是我的网络连接有问题?或是别的什么状况导致我看不到收件箱里的其他邮件?任何一点疑虑都会导致认知上的负担,进而影响产品的整体体验。</p> <p><img alt="06-mail-inbox-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/06-mail-inbox-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <h3> 3.出错</h3> <p>&ldquo;出错&rdquo;多数是由网络连接的中断引起的。可以试着在这种情况下提供一些更有用的或是更具亲和力的内容,而不是一堆丑陋的出错信息。让用户在非常规用例中看到你的设计,他们就会感知到当前的状况是在可预计范围之内的,从而放松下来。</p> <p>接下来我们对比一下<a href="https://itunes.apple.com/cn/app/chrome/id535886823?mt=8">Chrome</a>、<a href="https://itunes.apple.com/cn/app/opera-mini-web-browser/id363729560?mt=8">Opera Mini</a>和Safari这三款浏览器在这方面的表现叭。</p> <p>Chrome提供了大量的、似乎只有技术人员才看得懂的出错信息;普通用户甚至不会有兴趣花时间在移动设备上阅读这样的内容。</p> <p><img alt="07-chrome-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/07-chrome-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <p>Opera Mini只提供了一个模态对话框一样的控件,整个风格看上去非常生硬,不过文案相对简单易懂了些。</p> <p><img alt="08-opera-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/08-opera-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <p>而Safari的处理方式则漂亮了很多,它通过简单直白的语言向用户解释了当前的状况,整个界面的视觉风格似乎是有意在柔化&ldquo;出错&rdquo;所带来的负面效应。当发生网络连接问题时,人们很容易产生非常消极的感受,这种情况下,最不该做的就是通过大段晦涩的文字以及生硬的视觉风格来加剧用户的焦虑感。</p> <p><img alt="09-safari-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/09-safari-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <p>当然,出错的情况不止会发生在浏览器当中。再次以Gmail的iPhone客户端为例,他们同样使用了情感化的元素来呈现出错信息&mdash;&mdash;一个看上去不那么开心的小云朵&mdash;&mdash;似乎应用自身也很理解用户当前的感受。</p> <p><img alt="10-gmail-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/10-gmail-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <p>相比之下,Instagram和Youtube的反馈方式在态度上略显消极。</p> <p><img alt="11-instagram-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/11-instagram-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <p><img alt="12-youtube-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" src="/sites/default/files/images/201302-1/12-youtube-error-iphone-ios-mobile-app-ui-ux-empty-state-design.jpg" /></p> <h3> 总结</h3> <p>其实,无论你的产品是否需要网络连接,或者它根本就不是iOS应用,这当中的一些基本道理都是相通的:留意那些用户无法获取任何内容的状态,给用户某种形式的反馈<a class="eLink" href="http://beforweb.com">。</a>我们进一步将本文内容抽象为三条简单的设计原则:</p> <ol> <li> <strong>没有数据时,引导用户创建内容</strong>。</li> <li> <strong>思考目标用户在使用产品时的心理与目标</strong>。他们是否会频繁的清空数据?如果是的话,进行相应的设计;你甚至可以准备一些不同的空状态内容来随机展示。</li> <li> <strong>发生错误时,不要让用户进一步焦虑</strong>。通过你的设计弱化用户心中的负面感受,降低他们对坏状况的感知。</li> </ol> <div class="embed"><article id="node-291" class="node node-related-books" about="/node/291" 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/贴心设计-打造高可用性的移动产品-美-Jakob-Nielsen%E3%80%80Raluca-Budiu/dp/B00DQ3HLKK/?_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/36.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/贴心设计-打造高可用性的移动产品-美-Jakob-Nielsen%E3%80%80Raluca-Budiu/dp/B00DQ3HLKK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">贴心设计:打造高可用性的移动产品</a></h4> <p><a href="http://www.amazon.cn/贴心设计-打造高可用性的移动产品-美-Jakob-Nielsen%E3%80%80Raluca-Budiu/dp/B00DQ3HLKK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点关注移动设备上的可用性,并涵盖了构建移动战略、为小屏幕设计、移动写作、可用性对比和展望未来等主题。书中内含228张高清全彩图片以表明观点...</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="/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/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/116" typeof="skos:Concept" property="rdfs:label skos:prefLabel">情感化设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/114" typeof="skos:Concept" property="rdfs:label skos:prefLabel">反馈</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/73" typeof="skos:Concept" property="rdfs:label skos:prefLabel">引导</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/109" typeof="skos:Concept" property="rdfs:label skos:prefLabel">一致性</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 02 Feb 2013 08:17:13 +0000 C7210 158 at https://beforweb.com https://beforweb.com/node/158#comments 关于扁平化界面风格的设计美学讨论 https://beforweb.com/node/142 <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="https://beforweb.com/sites/default/files/article-thumbs/icon-logo-flat-interface-design-metro-style-Skeumorphism-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>似乎真的没发生什么,也就是玛雅人过了个年。本周的更新如约和大家见面,视觉方面的一篇悠悠闲闲的小文章,关于扁平化与拟物化风格的讨论。</p> <p>我个人对这方面的话题是蛮关注的,偶尔在<a href="http://weibo.com/c7210">微博</a>上弱弱的念叨两句,也会有不少朋友来发表各自的看法,确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的,其中有些比较公允务实,有些则比较偏颇;所谓偏颇,也就是片面表达某种风格一定比某种风格更好,以及好在哪里。说真的,都有一定的道理,都能看出发表论调的设计师的思考和激情。</p> <p>有人说了你怎么这么没节操呢,你到底觉得哪种好呢?我要说的是叭,在我看来这个事情里的的确确不应该存在哪个强于哪个的争议,因为它根本就不是个非黑即白非美即丑泾渭分明的问题;脱离了实际产品的上下文环境,脱离了产品功能与目标用户群类型之间的关联,所谓好与不好的命题压根就不成立。</p> <p>说的具体些,远的不讲,单说<a class="eLink" href="http://beforweb.com">Beforweb</a>这边的视觉风格,除了每篇文章的图标以外,可以说是彻彻底底的扁平化了(当然,细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框,这个不算数...),但如果有人说我是扁平风格的卫道者的话,我会很不开心,因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面,最典型的包括语音备忘录、iBooks、iPad里的日历等等,它们的界面让我觉得亲切自然,让我可以在冰冷的电子设备当中找到现实生活的真实感,就这么简单。</p> <!--break--><p>下面这些截图来自我平常自娱自乐时会用到的一些音乐方面的iOS或OS X应用。它们的功能的确非常棒,我着实在这些东西上花掉不少钱,但如果它们的界面没有采用如此逼真的拟物化设计,如果他们只是干巴巴的功能和数据陈列或是Metro风,我是绝不会在它们身上花半毛钱的。</p> <p><img alt="a-amplitube-ipad-interface-irig.jpg" src="/sites/default/files/images/201212-3/a-amplitube-ipad-interface-irig.jpg" style="width: 640px; height: 381px;" /></p> <p><img alt="b-s-amplitube-ipad-record.jpg" src="/sites/default/files/images/201212-3/b-s-amplitube-ipad-record.jpg" style="width: 640px; height: 319px;" /></p> <p><img alt="c-2-logic-pro-amp-designer-pedalboard.jpg" src="/sites/default/files/images/201212-3/c-2-logic-pro-amp-designer-pedalboard.jpg" style="width: 640px; height: 400px;" /></p> <p>之前看到过一句话,大意是,Metro风格让人看到未来,而拟物化则让人感觉像是回到家里一样。说的挺不错的;人不可能一直呆在家里,也无法始终飘逸洒脱的在外面寻求新鲜与未来感。我喜欢听真人使用真实乐器演奏的音乐,但这不妨碍我偶尔听听电子的东西。</p> <p>今天自己念叨的有点多了,我们还是进入译文的正文叭。作者从扁平化风格出发,慢慢引出了相对&ldquo;公允&rdquo;的看法,我个人觉得比那些单纯强调某种风格的文章要有点意思。走着。</p> <p>如今,关于&ldquo;扁平化&rdquo;与&ldquo;拟物化&rdquo;孰优孰劣的争论在圈子里此起彼伏的。我(英文原文作者)个人总是会被极简设计所吸引,所以扁平化的界面设计风格确实是我的菜。</p> <h3> 什么是扁平化设计</h3> <p>在实际当中,&ldquo;扁平化设计&rdquo;一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更&ldquo;平&rdquo;的界面。</p> <p><img alt="01-layervault-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/01-layervault-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 334px;" /></p> <p>Layervault的设计师Allen Grinshtein曾经在HackerNews的一篇文章当中说:</p> <blockquote><p>&ldquo;长久以来,网站的界面风格似乎都在遵从着同一种设计美学,大家都在用斜面、渐变、阴影一类的效果来突出界面元素的质感。对于设计师们来说,制作这类&lsquo;可爱&rsquo;的元素简直变成了行规甚至是荣誉。不过对于我们,以及为数不多的其他一些设计师来说,这种惯用的方式并非一定正确。&rdquo;</p> </blockquote> <p>去<a href="http://layervault.com/">Layervault</a>看上几眼,四处转转,你会发现他们所追求的这种于简约当中体现出的视觉美感。看到我们一直以来习惯了的那些视觉风格正在越来越多的网站和移动应用产品中被潜移默化的颠覆着,也是蛮有意思的事情。下面是其他一些例子:</p> <h4> Squarespace</h4> <p><img alt="02-squarespace-new-version-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/02-squarespace-new-version-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" /></p> <p>新版的<a href="http://www.squarespace.com/">Squarespace</a>几乎完全采用了扁平化的视觉风格,只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下你就会发现,其实他们的产品在功能逻辑上还是蛮复杂的,但这一切都隐含在简约直白的界面背后,你真的可以从中隐约感受到其设计团队付出的心血。</p> <p>相关阅读:<a href="http://beforweb.com/node/57">简洁至上的Web设计 - 创意要素及设计技巧</a></p> <div class="embed"><article id="node-298" class="node node-related-books" about="/node/298" 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/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="一目了然:Web和移动应用设计通识方法(第2版)" src="http://beforweb.com/sites/default/files/images/products/44.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">一目了然:Web和移动应用设计通识方法(第2版)</a></h4> <p><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书深入阐述了如何设计出简单易用的基于Web的软件,以帮助读者理解、掌握显性设计的精髓。作者从软件开发初期谈起,一直到软件设计后期,分析诸多案例并论证了自己的见解或设计原则...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> Facebook</h4> <p><img alt="03-facebook-homepage-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/03-facebook-homepage-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 334px;" /></p> <p>另外一个大家所熟悉的例子就是Facebook了。</p> <blockquote><p>&ldquo;Facebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外,其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色,至少我们可以说这种设计风格对于Facebook来说是完全适用的。&rdquo; - <a href="http://ianstormtaylor.com/">Ian Storm Taylor</a>(Segment.io)</p> </blockquote> <h4> Rdio</h4> <p><img alt="04-rdio-player-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/04-rdio-player-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 334px;" /></p> <p>Rdio最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格,你很难找到使用了阴影、渐变等效果的界面元素。</p> <p>相关阅读:<a href="http://beforweb.com/node/85">最小化可用性设计</a></p> <h4> Nest</h4> <p><img alt="05-nest-product-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/05-nest-product-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 334px;" /></p> <p>我曾经作为前端工程师参与过<a href="http://www.nest.com/">Nest</a>的网站开发,现在依然记得他们的设计师对扁平风格的热情追求。在他们的网站中,实际的产品及相关的应用环境照片作为&ldquo;真实&rdquo;元素融入到扁平风格的媒介载体(网站本身)当中,虚实结合,让访问者可以很容易的将注意力聚焦在产品上,而不会被网站界面上的视觉元素所干扰。</p> <h4> Beforweb</h4> <p><a class="eLink" href="http://beforweb.com">本小站</a>乱入...译者<a href="http://weibo.com/c7210">C7210</a>注</p> <div class="embed"><article id="node-297" class="node node-related-books" about="/node/297" 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/B004I91HCY/?_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/43.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/简约至上-交互式设计四策略-科尔伯恩/dp/B004I91HCY/?_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/B004I91HCY/?_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> <h3> 对拟物化的逆袭</h3> <p>正如20世纪建筑界当中的极简主义运动,扁平化设计风格的逐渐兴起也可以被看作是对多年以来过度设计、过度雕琢的界面风格的逆袭;尤其是最近一段时间,苹果一直以来的拟物风格被诟病的蛮犀利的。</p> <p><img alt="06-apple-ios-ipad-ical-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/06-apple-ios-ipad-ical-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 436px;" /></p> <p>Wikipedia对拟物化(&ldquo;<a href="http://zh.wikipedia.org/wiki/%E4%BB%BF%E5%88%B6%E5%93%81">仿制品</a>&rdquo;、&ldquo;<a href="http://en.wikipedia.org/wiki/Skeuomorph">Skeuomorph</a>&rdquo;)的定义是:</p> <blockquote><p>原有物件中某些必需的形式在新的设计中已不再必要,但新设计仍模仿旧有形式,以使新的外观让人感觉熟悉和亲切。</p> </blockquote> <p>举个例子,我们通常会为界面当中的按钮添加渐变和投影效果,因为现实当中的按钮就是具有这些视觉特征的,即使这些效果对于界面元素的功能来说没有任何实际意义。又譬如有些天气方面的应用会使用温度计的形式来展示气温;在现实世界中,这种实体的存在是必需的,而在应用软件当中,温度计的形象则纯粹是装饰性的。</p> <p>日历应用当中皮革质地的设计元素是必需的吗?如果按钮上不使用3D质感,用户是否还知道它们可以被点击?有多少装饰性的元素是真正必要的?</p> <blockquote><p>&ldquo;在现实生活中,当按钮被按下时,你可以清楚的感受到它的弹性,但在桌面设备或移动设备的显示屏上,你无法感觉到这种物理回馈。看上去是实体的东西却无法让人感受到实体本该具有的反馈效应,至少对我来说这是一种很蹩脚的、不符合预期的体验。&rdquo; - Allan Yu (svpply / eBay)</p> </blockquote> <p>相关阅读:<a href="http://beforweb.com/node/92">从iOS到Metro - 重新设计应用的交互模式</a></p> <h3> 形式服务于功能</h3> <p>20世纪建筑界的极简主义运动当中提出了一些著名的口号,包括&ldquo;形式服务于功能(form follows function)&rdquo;、&ldquo;少即是多(less is more)&rdquo;等等,直到今天我们依然会谈到这些。此外,我个人非常喜欢米开朗基罗在被问到他是怎样创作大卫雕像时回答的:</p> <blockquote><p>&ldquo;很简单。我只要凿去多余的石头,留下有用的。&rdquo;</p> </blockquote> <p>对于界面设计来说,也是同样的道理;37signals的家伙们在这方面的本事是有目共睹的。要在实际当中卓有成效的实现扁平化风格的设计美学,作为设计师,我们本质上最需要关注的是产品功能如何运作,而不仅仅是考虑视觉呈现方面的问题。</p> <h3> 扁平还是拟物?只是个选择的问题</h3> <p>至少我没有见到任何研究报告表明拟物风格的按钮会带来更多的点击量。的确,有足够多的理论和实践结论可以证明在视觉上能产生更强对比效果的交互元素可以更好的引起用户的注意,但我相信,在某些上下文环境中,一个扁平化的橘色按钮所带来的对比效应会高于具有凸起质感的按钮。所以,上下文,也就是具体产品的具体界面环境,是这里的一个关键要素。我们来看看其他设计师的一些看法:</p> <blockquote><p>&ldquo;这件事和时装时尚有些类似。当某种风格被全面普及之后,作为设计师,要想脱颖而出,你就得反其道而行之。&rdquo; - Cemre G&uuml;ng&ouml;r (Branch)</p> </blockquote> <blockquote><p>&ldquo;如果有人告诉你&lsquo;拟物化是不好的设计&rsquo;,这就相当于在说&lsquo;紫色是丑陋的颜色&rsquo;,没有任何意义。&rdquo; - Sacha Greif</p> </blockquote> <blockquote><p>&ldquo;为什么要在没有任何实际证据的情况下贬低某种设计风格,同时抬高另外一种?忽略产品的实际功能与整体体验而单纯追求某种设计风格,这并不是一件令人兴奋和愉悦的事。&rdquo; - Geoff Steams (YouTube)</p> </blockquote> <h3> 设计的好坏不是&ldquo;美学&rdquo;可以决定的</h3> <p>对设计风格的选取最终还是要取决于具体产品的实际情况。在我个人看来,相比于拟物化而言,扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。</p> <p>无论采用怎样的风格,优秀的界面设计都需要遵从一些共通的设计原则:</p> <h4> 一致性</h4> <p>通过具有一致性的设计模式及视觉风格,为用户建立起完整一致的心智模型,使产品更加易用,提升整体体验。</p> <h4> 对比</h4> <p>通过对配色、尺寸和布局的调整,使可点击的界面元素在视觉上与其他元素形成鲜明的对比。</p> <h4> 布局</h4> <p>可以尝试使用960gs一类的网格布局为界面设定视觉规范,使用户的视线可以跟随内容本身所界定出的路径自然的移动,增强界面的视觉平衡。</p> <h4> 层级化</h4> <p>最重要的东西要比相对次要的东西更容易被看到。关于这个话题我可以写一整篇文章出来,简单的说,就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素,而将其他操作元素置于次要位置,这可以使界面得到最有针对性的优化和简化。</p> <blockquote><p>&ldquo;我个人的经验是,无论扁平化还是拟物化都没什么所谓,最重要的是界面能够让用户在最短的时间内清楚的识别出信息和功能的层级关系,并且很容易的知道接下来应该做什么。&rdquo; - Caroline Keem</p> </blockquote> <h4> 目标用户</h4> <p>不同类型的用户所青睐的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格,而其他更加&ldquo;普通&rdquo;的用户则更容易接受相对传统的拟物化界面。</p> <h4> 反馈</h4> <p>当点击行为发生时,要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式,例如在用户执行操作后,使用旋转图标提示用户系统正在进行响应。</p> <p>推荐阅读:<a href="http://beforweb.com/node/98">为用户的成功操作提供正面反馈</a></p> <h4> 降低&ldquo;摩擦力&rdquo;</h4> <p>无论采用怎样的视觉风格,都要使界面尽量简化,减少用户完成目标所需执行的操作,打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本,增加功能的复杂度,进而降低转化率。</p> <p>相关阅读:<a href="http://beforweb.com/node/143">表单设计与转化率的提升</a></p> <h4> 鼓励探索</h4> <p>了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能,并开始向&ldquo;高级用户&rdquo;的阶段进发时,要为他们的探索和学习行为进行必要的指引与&ldquo;奖励&rdquo;回馈。</p> <h4> 原型</h4> <p>无论风格如何,界面形式都取决于实际的功能。好的设计方案离不开产品前期的规划工作,特别是通过草图或线框原型进行的探索。识别出最核心的用例需求,使用原型不断尝试和验证,为接下来的界面设计工作打下坚实的基础。</p> <blockquote><p>&ldquo;扁平化风格的逐渐盛行固然有它的道理,但本质上它只是设计美学当中的一种;与仿古、高光、金属质感、木质等视觉效果相同,对视觉风格的选择必须以良好的信息架构及交互模式为基础。&rdquo; - Mike Cuesta (carecloud)</p> </blockquote> <p>推荐阅读:</p> <ul> <li> <a href="http://beforweb.com/node/24">产品早期的原型设计与用户测试</a></li> <li> <a href="http://beforweb.com/node/124">移动应用设计案例 - 打造初创型产品的用户体验</a></li> <li> <a href="http://beforweb.com/node/100">十个方法,让你的线框原型更具沟通能力</a></li> </ul> <div class="embed"><article id="node-277" class="node node-related-books" about="/node/277" 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/B00AX1MC3Y/?_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/21.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_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/B00AX1MC3Y/?_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="/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/129" typeof="skos:Concept" property="rdfs:label skos:prefLabel">扁平化</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/130" 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/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel">简约设计</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/109" typeof="skos:Concept" property="rdfs:label skos:prefLabel">一致性</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 22 Dec 2012 15:10:33 +0000 C7210 142 at https://beforweb.com https://beforweb.com/node/142#comments 怎样为网站创建风格指南(style guide) https://beforweb.com/node/88 <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="https://beforweb.com/sites/default/files/article-thumbs/create-website-style-guide-ui-design-2-2.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>旅途归来,一切安好。五天很短暂,回想起来基本只有将就算是蓝色的大海和天空,还有白花花的沙滩;有兴趣的朋友可以到<a href="http://weibo.com/c7210">我的微博</a>中看看风景照什么的。</p> <p>还好,回来之后并没觉得无法适应惯常生活一类,它们之间的区别只是&ldquo;状态1&rdquo;与&ldquo;状态2&rdquo;这样;把该做的事情立刻开始做起来吧,心里会安一些。之前一篇是&ldquo;<a href="http://beforweb.com/node/86">iOS Wow体验 - 第六章 - 交互模型与创新的产品概念</a>&rdquo;的前半部分。今天插播小文一篇,怎样为网站创建风格指南。进入正文,锵锵锵。</p> <p>什么是风格指南?简单的说,就是一份告诉你如何讲故事的文档。它确立了一些标准,例如怎样撰写文案、怎样排版、怎样打造视觉元素和交互方式等等。风格指南源自于印刷领域,例如报刊(看看<a href="http://www.guardian.co.uk/styleguide">卫报的风格指南</a>);在Web领域,它同样体现出了巨大的价值。</p> <p>无论是传统印刷,还是互联网,最关键的都是&ldquo;内容&rdquo;。风格指南的最终目标就是让内容以清晰并且一致的视觉风格呈现出来。<a href="http://www.bbc.co.uk/gel">BBC的全球体验语言</a>(Global Experience Language,GEL)就是网站风格指南的绝佳范例。不妨通过页面右侧的&ldquo;Download GEL Web Styleguide&rdquo;下载一份PDF文档来稍作了解先。</p> <!--break--><p><img alt="bbc-Global-Experience-Language-GEL" src="/sites/default/files/images/201206/bbc-Global-Experience-Language-GEL.png" style="width: 500px; height: 246px;" /></p> <h3> 关于系统的故事</h3> <p>好的风格指南看上去就像是网站的自传,它能够让其他人与之进行互动,从而进一步了解并扩展这个网站。风格指南应该包含相关人员在网站项目过程中所积累的知识与经验,并以直白的方式描述出来;它在设计系统的层面上诠释了项目过程中的各种设计思路,使团队中的其他设计师,或是将来的团队,能够更好的了解项目,展开工作。</p> <p>也许你会想,作为设计师,这些难道不是我们在本能当中应该了解的吗,何必搞到文档中呢?在实际工作中,设计师不可能包揽所有的事情,例如商业研究、内容策略、用户体验、技术开发、QA、部署等方面的工作需要涉及到的人员和团队也许会有很多,你要在恰当的环节将文档交付给对应的合作部门,使他们在必要的时候可以更加准确的了解网站产品的特性。</p> <p>通常,在网站的界面设计工作结束之后,交互设计师与视觉设计师就该展开风格指南方面的工作了。看看你是否熟悉下面这样的情景:你们已经在Photoshop或Fireworks当中打造了完美的视觉稿,每个像素都很到位,行间距控制的不错,配色即合理又富有含义。很棒,接下来应该将设计稿交付给前端开发了;你准备怎样就方案中的每个细节元素与开发人员进行沟通呢?回想一下你们在设计过程中作出的各种重要的设计决策,那些背景的不透明度为60%、拥有一像素浅灰色边框的容器,那些像素级精确的padding与margin设定...所有这些,你们应该以怎样的方式与开发人员进行交流,才能让他们了解到这些重要的细节呢?</p> <p><img alt="design-style-guide-grid-web-page" src="/sites/default/files/images/201206/design-style-guide-grid-web-page.jpg" style="width: 500px; height: 279px;" /></p> <h3> 一致性</h3> <p>在设计过程中,我们也许要作出成百上千个大大小小的设计决策,任何一个明显或隐蔽的元素当中都有可能蕴含着特定的意义,并对页面整体的用户体验造成影响。要将所有这些细节都落实到文档中,那样所花费的时间也许会超过设计过程本身;项目组恐怕难以承受这样的成本。</p> <p>风格指南不需要对每个设计元素当中每个像素进行说明,我们要做的是总结出一系列通用的设计原则,使项目中的相关人员理解和领会。这种相对抽象化的做法也可以使你的设计思想和意图得到体现。</p> <p>&ldquo;一致性&rdquo;是界面当中的所有元素都应当具有的普遍特质,作为设计体系的一部分,它们都应该体现出一致的设计思想。当人们使用不同类型的设备访问你的站点时,保持视觉风格及体验的一致也是很重要的。</p> <p>正像Nathan Borror在2009年发布的一篇<a href="http://nathanborror.com/posts/2009/oct/25/interface-harmony/">关于界面协调性的文章</a>当中所说:&ldquo;良好的界面一致性是不会被用户所注意到的。&rdquo;换句话讲,良好的界面协调性所带来的美妙体验会让用户在不知不觉当中产生愉悦的感受。</p> <p>我(英文原文作者)通常会在风格指南当中借用这篇文章当中介绍的&ldquo;界面协调性画布&rdquo;这一方式,将项目所涉及的所有典型设计元素同时呈现在一张画布当中,包括它们各自不同的状态,以及对应的代码片段。</p> <p><img alt="interface-harmony-canvas" src="/sites/default/files/images/201206/interface-harmony-canvas.jpg" style="width: 500px; height: 450px;" /></p> <p>这种方式同时可以帮助我们建立一套相对自由的设计模式库。诚然,不同项目当中的视觉设计风格会有所变化,但基于这些项目所抽象出来的模式却可以保持相对统一。</p> <p>别等到项目进行到后期才开始风格指南方面的工作,你完全可以在设计过程当中一点点的将逐渐成熟的界面风格标准添加到文档当中。在创建界面元素的同时就对它们在一致性与标准化等方面的特质进行认真的思考,这是很好的习惯。</p> <p><a href="/sites/default/files/images/201206/interface-style-guide-overlay.jpg" rel="lightbox"><img alt="interface-style-guide-overlay" src="/sites/default/files/images/201206/interface-style-guide-overlay.jpg" style="width: 500px; height: 301px;" /></a></p> <p class="figure-caption">DrupalCon Chicago官方网站的风格指南,关于全局网格及界面布局的部分。</p> <h3> 重在交流</h3> <p>作为设计师,我们时常会陷入设计的细节当中难以自拔;记得提醒自己,设计的本质在于传递信息,也就是交流;&ldquo;设计方案&rdquo;这个整体也是对某种宏观问题的回应。我们同样要站在一个较高的层面上,以交流为目的来创建风格指南,阐述设计决策及其背后的思路。</p> <p>简单的讲,我们应该以那些&ldquo;大&rdquo;元素作为起点来创建风格指南,在接下来的过程中逐渐进行细化。可以说,如果你能够在设计流程进入到细节阶段之前让自己对于那些全局层面的元素保持思考,那么接下来的设计工作也会变的非常从容和协调。其实这样的过程听上去有些像CSS(cascading style sheets)的原理。所谓的层叠样式表,关键在于从宏观结构到微观细节的层叠。所以如果你愿意的话,也可以将风格指南叫做&ldquo;层叠风格指南&rdquo;。</p> <p><a href="/sites/default/files/images/201206/website-style-guide-tiles.jpg" rel="lightbox"><img alt="website-style-guide-tiles" src="/sites/default/files/images/201206/website-style-guide-tiles.jpg" style="width: 500px; height: 277px;" /></a></p> <h3> 创建层叠化的风格指南</h3> <p>回想一下CSS的工作方式。如果你在样式表比较靠前的位置定义了某种全局元素的默认样式属性,那么这些设定就会被与之相关的子级元素所继承,直到你为某些特定的元素添加了更加具体的样式属性。同样的道理,在风格指南中,我们会从最普通的、最具普遍代表性的元素出发,逐渐为细节元素增加具体的规则。</p> <p>道理说了不少,接下来,我们将了解一下创建风格指南的基本步骤与流程。</p> <h4> 1.概述</h4> <p>对项目的简单陈述,包括项目目标及解决方案的介绍。在这部分内容中,你有机会就一些大方向问题与其他成员进行沟通,让他们了解整个项目的重心及着眼点在哪里。同时你还可以对网站所需要具有的风格气质、基调、内容策略进行简要的描述。</p> <h4> 2.布局</h4> <p>页面设计所使用的网格系统、基本的布局情况、页面模块的定位规则等。你要对一些全局性的页面元素的定位进行描述,还有相关的留白规则等。一些典型页面的线框原型也要作为图例出现在这部分内容中。</p> <h4> 3.品牌识别</h4> <p>包括配色方案、全局性的品牌图片、品牌图片的使用规则及约束等内容。</p> <h4> 4.文字排印</h4> <p>介绍网站所使用的文字排印方案,包括字体风格、选取这些字体的理由等。这里还要通过一些具有代表性的具体图示来介绍字体风格与页面上下文环境之间的关系。</p> <h4> 5.导航</h4> <p>全局主导航、二级导航、下拉菜单、分类词条的文字链接、搜索...任何能够帮助用户在站点中进行导航操作的元素都可以归纳到这部分内容中。从这里开始,我们就要逐渐进入细节层面了。导航元素在不同状态下的链接色、背景色等属性的定义也要在这里详细的描述出来,使开发人员能够一目了然。</p> <h4> 6.HTML元素</h4> <p>一些典型元素的HTML标签使用规则,包括标题元素(h1,h2,h3...)、有序列表、无序列表、按钮、表单、字段集(fieldset)、表格等。这份规则清单不需要事无巨细,但要尽量使其具有较高的综合性和代表性;必要的时候可以与前端开发人员配合完成这部份内容。</p> <h4> 7.媒体文件</h4> <p>包括图片、音频或视频文件的使用情景、尺寸限制、显示比例、缓存设置等方面的规则。</p> <h4> 8.其他资源</h4> <p>这部分内容所涉及到的对象基本都属于细节层面了,那些无法归入以上七个类别的、定制化程度比较高的设计元素都可以放在这里。例如,在某些特定的情况下不同模块的呈现方式应该发生怎样的变化,侧边栏的广告规则,搜索出错的处理方式,评论列表的呈现规则,照片集的浏览方式等等。通常,在这一部分内容中,我们可以摸索并归纳出一些复用性较高的设计模式。</p> <h4> 9.界面协调性画布</h4> <p>将以上这些内容汇总到一张大画布中。所谓画布,可以是图片格式,当然最好是HTML页面的形式,因为这样可以更加灵活的承载文案和HTML或CSS代码方面的内容,使前端开发人员可以直接根据页面元素的设计规则来使用对应的代码片段。另外,将所有涉及到视觉风格的内容都放在同一张画布中,也可以使设计师能够很容易的对页面元素在整体上的协调性进行检视。</p> <h4> 10.UX文档</h4> <p>这部分内容的命题确实不小,其中需要包括项目进行到目前为止所产出的交付物,例如站点地图、线框原型、高保真原型、用研文档等。这些产品早期的交付物可以在接下来的设计与开发流程中对功能、视觉、交互方式的定义起到重要作用。</p> <h3> 使用风格指南</h3> <p>创建风格指南只是第一步,使它在实际工作中发挥价值才是最重要的。将指南附在项目管理工具中,或是邮件给项目组相关的人员;如果你不确定哪些人是真正&ldquo;相关&rdquo;的,那么让项目leader或是产品经理来做这件事也好。总之,我们要通过风格指南来实现的目标是团队协作,让大家一起付出努力来完成项目。</p> <p>将风格指南交付给团队成员之后,记得时常在项目的重要环节中谈起这份指南的重要性,使它逐渐成为工作流程甚至是产品文化的一部分。</p> <p>我得承认一点,有时候我确实觉得风格指南这东西有点乏味,没关系,至少我们不能以此作为借口而不去创建它。请相信一点,风格指南对于设计流程以致整个项目的成功会起到关键性的作用。</p> <div class="embed"><article id="node-268" class="node node-related-books" about="/node/268" 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/UX最佳实践-提高用户体验影响力的艺术-Helmut-Degen/dp/B00C1X9FY6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="UX最佳实践:提高用户体验影响力的艺术" src="http://beforweb.com/sites/default/files/images/products/12.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/UX最佳实践-提高用户体验影响力的艺术-Helmut-Degen/dp/B00C1X9FY6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">UX最佳实践:提高用户体验影响力的艺术</a></h4> <p><a href="http://www.amazon.cn/UX最佳实践-提高用户体验影响力的艺术-Helmut-Degen/dp/B00C1X9FY6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书分享了包括Google、Yahoo!、西门子、SAP、腾讯在内的数十家世界一流企业在用户体验领域积累的宝贵经验和最佳实践,内容中更多的是在阐述如何通过用户体验实践来提升用户体验的影响力,以及如何通过用户体验来催化整个组织取得成功...</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/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/108" typeof="skos:Concept" property="rdfs:label skos:prefLabel">风格指南</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/68" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计模式</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/109" 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, 17 Jun 2012 05:25:52 +0000 C7210 88 at https://beforweb.com https://beforweb.com/node/88#comments