交互设计

在很多人眼里，Google的产品一直与优雅设计无关。但现在，搜索巨人比其他互联网巨头都懂得如何打造一款设计优雅的软件（互联网）产品，如果你不相信这个判断，不妨放下你对苹果产品的钟爱，做个深呼吸，好，现在我们来对比一下Google与苹果在移动操作系统的设计：Android vs iOS。

前段时间UIMAX团队在做“新浪新闻客户端用户画像项目”时，用研人员访谈用户的过程中，发现一个这样的问题：多数用户完全没注意到过页面上的“长按可排序或删除”这段文字，反馈“不知道可以对新闻频道进行排序” 设计师…

鸿影：一份设计文档 的 结构大概可以分成Background项目背景、Schedule排期、History版本历史记录、Information Architecture信息架构分析（包括Site Map、Experience Map、Flow等）、Framework框架设计、Wireframe线框图和Mockup视觉稿等。取决于实际项目的情况，部分内容可以省略，也可以 加入更多，比如Storyboard故事板，Prototype可交互原型等。

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

在上篇《APP界面设计风格》确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧！

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

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 不能像我们在物理中那样来衡量。能指和所指是语言学上的一对概念，能指意为语言文字的声音，形象；所指则是语言的意义本身。按照语言学家或者哲学家们的划分，人们试图通过语言表达出来的东西叫”所指”，而语言实际传达出来的东西叫”能指”。

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

最近在阅读Bill Scott和Theresa Neil 所著的《Web界面设计》，其中上下文工具一章给我留下深刻的印象，下面我将结合部分实例来回顾一下主要的内容。

在公司工作，任何职业都不可能单兵作战，协作是永恒的主题，而每一个需求和任务的实现，都是各方通力合作的成果。作为交互设计师，除了做好自己的设计工作之外，还需要花费大量的时间与产品、运营、客户端开发、前端开发、后端开发一起协作和沟通。

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

举个简单的例子，一个人字写得很好看，但他一定能写好文章吗？一个作家字写得极丑，但人家书写的好啊！所以人家才能成作家。

“删除每个页面上一半的文字，然后把剩下的文字再去掉一半。”（《Don’t make me think》中Krug可用性第三定律）“先假定所有内容都是视觉噪音，除非你证明它们不是。”（《Don’t make me think》）“点击多少次都没关系，只要每次点击都是无须思考，明确无误的选择。”（《Don’t make me think》中Krug可用性第二定律》）

已经使用了近两年的荔枝FM，身为一个产品经理，一直对荔枝FM的使用逻辑和交互体验感到费解，所以今天就小试牛刀！

先说Android平台，自从material design面世以来，市场上很多Android app在设计上参差不齐。可能由于设备及用户使用习惯等各种原因，大多数app都还在以Android 4.0的规范在做设计，当然也有很多app为了省事，直接从iOS上照搬过来。因此，真正以MD为设计基础的应用并不多。下面是一些整体的框架记录，更为详细的交互细节以后再说。

写这篇文章最初的想法是来自我看过的一篇关于汉字与英文阅读习惯差异的文章，可惜现在想起来的时候已经找不到那篇文章了（有知道的人请务必私信我）。

设计师和理发师其实有点像，理发师基本分为三种：一种是只会搞基础发型的，比如寸头、中规中矩的长发、老太太卷头等；一种是只会剪流行发型的（这种发型师还很容易 摇身一变成为造型大师，告诉你你应该改变，应该剪目前最流行的某款发型，但实际上可能是他只擅长这款发型）；还有一种是最可遇不可求的，他根据你的脸型、 性格等，用最简单的手法量身设计发型，让顾客的气质度立刻得到提升。

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