译文

首屏设计的7个技巧，它们并不复杂，却能帮你的首图设计更上一层楼。

趋势大多是这样，兴衰随着时间的推移快速的变化。

空状态，或称零数据状态，很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下，因为从表现上来看，空状态给人的感觉就是临时性的，有些微不足道。“用户会尝试多个同类app，然后在接下来的3到7天内决定其中的哪些不合适。对于’像样的’app，一旦用户决定保留超过7天，那么将会比较长久的存留下去。成功的关键在于怎样使产品在这3到7天当中保持与用户的良好互动。” Ankit Jain – Quettra“很多时候，人们放弃一款产品的原因其实都是我们可控的，例如他们无法一目了然的看出与你的app产生互动之后能给他们带来什么好处。” – Patrick Mckenzie

随着时代和技术的发展，网页设计 的流程正悄无声息地发生着巨大的变化。精准具体的设计交付列表不再是网页设计 的唯一标准，静态页面设计在整个设计流程中所占的比重也逐步降低，正如同Stephen Hay所说，我们所设计的不再是单纯的页面，而是包含诸多组件的一整个系统。

在这篇文章中，来自UXPin（一款用户体验设计的应用程序）的Chris Bank为我们带来了最近在现代互联网和移动应用中出现的一些优秀的用户界面模式，并将通过实例展示如何将这些出色的UI设计模式应用到其他的网站和应用中。

当谈及用户体验 相关的文档之时，线框图和原型相关的文档无疑是其中最重要的。但值得注意的是，用户体验 所涵盖的范畴不止于此，它们也仅仅只是个开始。实际上，我们发现还有四份文档也是日常用户体验 设计中极其实用的文档。这四种文档的诞生，是为了帮设计人员更容易了解用户，更方便作出争取的设计决策，打造优秀的设计和成功的产品。

注：“可读性”是说动画绘制者如何定义动画的精准度，用来清晰而容易地理解正在发生的事情。例如：不可读=不清楚发生的事情很易读=它非常清楚，立刻能懂弹跳背后的物理理论：球刚开始被放开的时候，它有一个相对缓慢的速度。在重力的作用下，球的速度持续增长，直到接触地面的那一刻速度达到最大。地面给球反作用力，使它以几乎相同的速度反弹回去。当球移动时，两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放，这使得球随着升高逐渐减低速度，直到它耗费掉所有的反作用力，最终到达反弹的最高点。它在顶部停留一微秒，直到重力把它拉下来，使它像之前一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的步骤，这样我们就可以重新创造它。注：不要羞于“照搬”大自然。你的观众会更快地与动画关联起来，从而更容易读懂动画。注意：这一术语有可能与其它术语混淆。如果你正在阅读传统的卡通书，例如迪斯尼的《生命的幻象》或《动画师的生存工具》，那么这些书会告诉你，当一个物体开始减速然后加速时，这一过程被称为渐慢(ease-out)，因为它的姿态在“缓慢输出”。但是，在软件产业（CSS动画，Adobe Edge等），这一过程被称为渐快(ease in)！我不确定这一不同之处是怎么来的，但是不幸的是，这就是它的形成过程。所以，当你在阅读一篇文章时，而这篇文章把它们把“渐快”称为“渐慢”，那么不要觉得困惑。看一眼你所在的网站你就懂了:D。时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :  34
0.2  :  68
0.3  : 102
0.4  : 136
0.5  : 170时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :   2
0.2  :  10
0.3  :  36
0.4  :  87
0.5  : 170注意：你会在软件中看到更多用于设置缓冲的选项，例如二次的、三次的、四次的等等。它们只是缓和程度更高的选择，但是概念是相同的。只需记住——缓和的程度越高，你就会得到更多的缓和度。并不是规则，只是工具（There are no rules. Only tools）- Glenn Vilppu

交互设计 从来都不是简单的事情。可靠的交互通常需要借助对用户行为的深入分析，然后有针对性的精心策划。可是随着新的技术和新的交互模式的不断涌现，事情就变得不是那么容易了。

控件作为组织界面最基础的元素，相信大家都不会陌生，今天想谈谈这个不起眼的话题。文章从现实的控件过渡到软件界面，再用三大输入法的控件作为实际案例解说，全文干货满满，来收！扩大词汇量有助于提高你在某种语言上的表达能力，扩大「设计词汇量」可以帮助你更好地进行设计。但要记住，界面设计真正的艺术在于：解决正确的问题。

1、用户角色（Persona）：Persona文档（控制在2~5个）通常需要包含你的目标用户。作为Persona中的虚构的角色，它的属性和特征是 基于产品研究和用户定位来设定的，用作后续设计过程中所面对的“理想用户”，本质上，它就是一个占位符。作为人物设定，其中会包含个人信息，远不止于年龄 和收入信息这么简单。Persona 文档的目标是利用角色来验证你的目标用户是如何感受如何看待你的设计的。
2、移情地图（Empathy Map）：它像是一个轻量级的Persona文档，在资源短缺时间紧的状况下，可以使用这个文档。Empathy Map 将 Persona 中的角色的个性和性格部分移除了，更加专注于用户在特定情况下的感受。
3、用户剧本（User Scenario）：如果Persona 是帮你设计了一个故事中的角色，那么User Scenario 就是故事的剧本。用户剧本通常是围绕着一个特定目标来设计的。比如说，第二天是母亲节，要为母亲预订一份礼物。目标很明确，要达成目标，用户需要点击几次 按钮，走哪些流程，需要多长时间，如何在过程中融入情感，贯穿始终。对整个用户流程有了预判之后，设计师对于UI和UX的设计就有了把握。
4、用户地图（Customer Journey Map）：这份文档同上门的用户剧本很像，但是它比起前者跨度更大，贯穿体验设计始终。设计人员可以对产品的背景有更深入的了解才能更好地设计，而产品投 入使用之后也不是最终结束，这也是跨度如此之大的原因所在。用户旅图将会涵盖角色信息、用户剧本和移情地图的全部信息。这么设定并不是要让用户旅图成为一 个大杂烩，而是要将用户性格和用户流程、交互过程结合到一起来看待问题，每个阶段不同环节，都牵涉到不同的情绪和情感。Affordance 是 James J. Gibson 造出来的一个词，Gibson 是20世纪最重要的认知心理学家之一，他的生态学式视知觉论和直接知觉为认知心理学开辟了新的领地。affordance 是 afford (提供、给予、承担)的名词形式，环境的 affordance 是指这个环境可提供给动物的属性，无论是好的还是坏的，所以我认为“可供性”是一个合适的翻译。Gibson 用来解释 affordance 的例子是这样的：如果一块地表面接近水平（而不是倾斜的），接近平整的（而不是凸起或凹陷的），以及充分延伸的（与动物的尺寸相关），如果地表面的物质是 坚硬的（与动物的重量相关），我们可称它为基底、场地或地面，它是可以站上去的（stan-on-able），可让四足或两足动物保持竖直姿势，它是可以 行走（walk-on-able）和跑动（run-over-able）的，它不像水表面或沼泽表面之于一定重量的动物那样是可陷入的（sink- into-able）。列出的四项属性——水平、平整、延伸和坚硬——它们是这个表面的物理属性，如果以物理中使用的度量衡去衡量它们的话，但是对于特定 动物的支撑可供性，它们必须与动物关联上才可以被衡量，它们不是抽象的物理属性，它们是为所指动物特定的，与动物的姿势和行为相关，所以 affordance 不能像我们在物理中那样来衡量。能指和所指是语言学上的一对概念，能指意为语言文字的声音，形象；所指则是语言的意义本身。按照语言学家或者哲学家们的划分，人们试图通过语言表达出来的东西叫”所指”，而语言实际传达出来的东西叫”能指”。

“优秀的设计是隐形的。优秀的界面设计会细到亚原子级的微观字体（文字的精确定义）、看不见的宏观文字布局（文字的运用方式）、还有由交互设计和信息架构组成的隐形世界。最少的输入，最丰富的输出，界面设计师都致力于使用户花费最少的注意力。就像字体设计师与工程师那样，我们并不会试图找到完美的解决方案，但会寻找最佳的两全之策。”

移动优先的设计策略将使产品拥有高度任务驱动的体验。用户可以将注意力聚焦在需要完成关键任务上，而不会被传统桌面产品中过多的无关因素所干扰。

“想清楚一点，你的智能手表应用为何存在，既然有iPhone应用。”“设计师：理解用户的体验，精确把握介入时机。”“如果你只能描述你所设计的功能，而不是相对应的时刻，那你还有很多事情要做。”

译者语：本文是我在Smashing Magazine看到的一篇关于如何在移动应用设计中运用微动效的译文。初次翻译文章，很多词句用的可能不太妥当，在这里给大家作揖了！knock knock……

Terry Cao是UXPin（一款线框图与原型制作APP）的内容策略专家。要了解如何掌握现在交互设计的艺术，可以参考免费的电子书籍《Interaction Design Best Practices》。这本书中含AirBnB、 Google、 Apple、Etsy 以及其他诸多公司的30多余交互案例。“Modality Interactivity对用户来说更有说服力。因为这使用户在浏览网站的时候更有趣，更吸引他们，并且帮助用户对网站信息产生更积极的态度。” 一位来自罗伯特·莫里斯大学的通讯系助理教授Jeeyun Oh如是说，“交互（Interactivity）通过让用户更深层次地理解网站信息而更具说服力。”欲更多地了解现代交互设计的艺术，可以阅读《Interaction Design Best Practices》一书。

编者按：今天@励定洲 这篇译文开门见山，从搜索框的可见性、范围搜索、局部搜索、高级搜索以及输入五个方面聊聊如何设计出一个特别好用的搜索功能，内附大量实例（想知道谷歌搜索有哪个交互不好吗），结合实践，深入浅出，帮你掌握在线搜索的这五个方面。

本文是移动原型工具Proto.io的设计团队8月份在自家博客上发表的一篇“软文”，通过与移动设计界大牛们的对话，帮助大家了解在进行移动设计时应该特别注意的禁忌，顺便推了一下Proto这个工具。大家可以回顾一下自己团队的应用正在触犯哪些禁忌，想必会有点意思。读完本文，相信你能找到优化自家移动应用设计的方向。

如何打造一款看起来非常惊艳的应用，我想大家应该有所了解，借助有趣的故事、流畅的流程和令人难忘的视觉设计就好。但是仅有这些并不够，你需要拿出一些真正能打动用户心灵，产生情感联系的东西，让他们感受到应用真正鲜活的一面。

2012年6月，我在CNN.com工作时，接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性，数据的可视化，可变形的画布，以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时，CNN.com首次上线了响应式体验站点，同时，我也第一次面临响应式体验设计。