交互设计

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

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

自从去年google在android新版本Lollipop提出的material design概念后，在世界各地疯狂地掀起一阵material design热。Material design不仅看起来令人惊叹，也是一个前所未有的设计理念。不仅对设计师的影响深大，对开发人员亦是。

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

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

在设计过程中，如何最佳地搭配颜色，诱导用户视线？是不是在为图标选择什么颜色而烦恼，反反复复地尝试，总不能达到想要的效果。是不是总在羡慕“别人家的设计”，而苦于无从下手？其实所有的颜色都有些小规律，今天@Micu设计 就和大家聊一聊“色”。

Material Design（以下简称MD）是Google在Android 5.0发布后主推的ue设计规范，旨在解决Android平台设计风格不统一的问题，其核心理念“材质化”是基于拟物与扁平之间的设计，强调真实世界元素的物理规律与空间关系，既避免了拟物设计的低效问题，又解决了太“扁平”带来的交互层级困惑，个人很认同这种设计理念。本次我们在进行一款孵化型产品－明星App的设计时，也采用了这种设计理念，与大家分享一下实战经验（由于是设计讨论，本次关于这款产品的来龙去脉就先不细表咯）。

注：“可读性”是说动画绘制者如何定义动画的精准度，用来清晰而容易地理解正在发生的事情。例如：不可读=不清楚发生的事情很易读=它非常清楚，立刻能懂弹跳背后的物理理论：球刚开始被放开的时候，它有一个相对缓慢的速度。在重力的作用下，球的速度持续增长，直到接触地面的那一刻速度达到最大。地面给球反作用力，使它以几乎相同的速度反弹回去。当球移动时，两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放，这使得球随着升高逐渐减低速度，直到它耗费掉所有的反作用力，最终到达反弹的最高点。它在顶部停留一微秒，直到重力把它拉下来，使它像之前一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的步骤，这样我们就可以重新创造它。注：不要羞于“照搬”大自然。你的观众会更快地与动画关联起来，从而更容易读懂动画。注意：这一术语有可能与其它术语混淆。如果你正在阅读传统的卡通书，例如迪斯尼的《生命的幻象》或《动画师的生存工具》，那么这些书会告诉你，当一个物体开始减速然后加速时，这一过程被称为渐慢(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

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

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

嗯，让我们从最最基础的说起——像素。你就把他当成一个个五颜六色的小色块.这些小色块们都有一个特定的标记值，比如，RGB值，CMYK值了。当然透明色块也是像素，不过值是零罢了。我们的计算机就是靠识别这些数值来认识颜色的。

设计风格的配色除了要注意男女性的喜好差别，还应该重视通过冷暖色彩+明暗亮度搭配表现给用户的印象和心理感受。详见《色彩在移动APP设计中的应用》

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

说起 Style Guide （即设计规范），大部分人的第一反应就是 Material Design 和 iOS Human Interface Guidelines，我自己就是靠读这两份文档逐渐入门设计领域，国内外的设计师、开发者们自然也是对它们了然于胸。来大公司实习之后，接到的第一个任 务就是维护、优化团队的设计规范网站，同时最近也经常和饿了么、随手记等互联网公司的设计师或产品经理探讨如何沉淀团队的设计。

这事发生在国外，其实真实情况未知。纽约时报出了一篇报道，称亚马逊逼流产员工立刻回来上班，很不人道有没有？

说起输入框，大家都耳熟能详了，今天跟大家谈一谈H5时代的多行输入框！首先一起回顾下输入框在PC端的应用：

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