如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
当别人问你什么是交互设计时，你又一脸懵逼了。本篇文章就来好好聊聊什么是交互设计
工作了很多年，却依然说不出何为交互设计。一说道理，大家都懂，但是当别人问你什么是交互设计时，你又一脸懵逼了。为什么会这样呢？因为我们没有自己去总结，没有形成自己的知识库。
交互设计，它由IDEO的一位创始人比尔•莫格里奇在1984年一次设计会议上提出，他一开始给它命名为“软面（Soft Face）”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interaction Design”――交互设计。
首先，我们来看看权威方对交互设计的定义：
交互设计协会(The Interaction Design Association (IxDA))解释如下：
交互设计师以创造有用且实用的产品及服务为宗旨。以用户为中心作为设计的基本原理，交互设计的实际操作必须建立在对实际用户的了解之上：包括他们的目标、任务、体验、需求等等。以用户为中心的角度出发，同时努力平衡用户需求、商业发展目标和科技发展水平之间的关系，交互设计师为复杂的设计挑战提供解决方法，同时定义和发展新的交互产品和服务。
百度定义如下：
交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求。
唐纳德诺曼给出的定义：
重点关注人与技术的互动。目标是增强人们理解可以做什么，正在发生什么，以及已经发生了什么。交互设计借鉴了心理学、设计、艺术和情感等基本原则来保证用户得到积极的、愉悦的体验。
首先要知道什么是交互
交互，及沟通交流，发生互动关系。比如人和人之间的交互就比较好理解，最经典的一幕可以用孙悟空智斗金角大王、银角大王。金角大王说：孙行者，我叫你一声你敢答应吗？然后，金角大王就叫：孙行者。孙悟空回答：爷爷在此。就这样，孙悟空就被收进去了。这就是一个简单的交互。
再比如，我们每天上班，到公司和同事打招呼。你说：“早上好呀”，同事回答“早”。这也是一个常见的交流互动。
人和人之间的交互比较好理解，那人和机器呢？其实也是非常好理解的。我们都忘不了微信推出的摇一摇功能，打开摇一摇，摇动手机，就会出现“咔咔”的声音，然后加载，搜寻出一个和你同时在摇的人。其实，我们和任何机器之间的发生互动关系，都是属于交互。往更广的意义上说，如果失去了交互，地球将不再运转，将毫无生机。现在，智能时代已经到来，我们除了研究人和人、机器、产品、环境、服务、系统等之间的关系，还要研究机
器和人、机器、产品、环境、服务、系统之间的关系。
总之，当人（或机器）和事物（无论是人、机器、产品、服务、系统、环境等等）发生双向的信息交流和互动，就是一种交互行为。
其次，我们来聊聊设计
聊设计之前，我们要先说说艺术，原研哉老师对设计和艺术的描述非常精辟，下面就引用他的话。
艺术说到底是个人意愿对社会的一种表达，其起源带有非常个人化的性质，所以只有艺术家自己才知道其作品的来源。这种玄虚性使得艺术“很酷”。当然，解读艺术家生成的表达有多种方式。非艺术家通过对艺术的有趣阐释与艺术互动，欣赏之，评论之，在展览中对艺术进行再创作，或把艺术当做一种知识资源使用。
而设计，则基本上不是一种自我表达，它源于社会。设计的实质在于发现一个很多人都遇到的问题，然后试着去解决的过程。由于问题的根源在社会内部，除了能从设计师的视角看问题外，每个人都能理解解决问题的方案和过程。设计就是感染，因为其过程所创造的启发，是基于人类在普遍价值和精神上的共鸣。（来源，原研哉，设计中的设计）
通过上述的描述，我们不难发现，设计主要表现在发现问题–解决问题。而交互设计就是发现和解决人（或机器）和事物（包括人、机器、产品、服务、系统、环境等等）之间的互动关系问题。
所以说，交互设计的范围是非常广的，和各个学科都有涉及，我们可以通过下面的图来看看交互设计和各个领域之间的关系。
那交互设计主要是做什么工作呢？
作为交互设计师，也应该好好问问自己这个问题。通常，外界的人就认为我们就是画画原型，或者有时候画画UI，而我们通常就是这么做的，所以也不得不让人们这么想。而现在大多数交互设计就是指移动端、网页端的交互设计。
那么交互设计的核心竞争力是什么呢？对于很多公司来说，其实是没有交互设计这个岗位的，交互的工作就由产品经理和UI设计师各自分担了。现在产品经理基本都掌握了原型技能，而且产品经理通常在做需求移交的时候已经把交互表达的很清楚了。而且很多UI设计师能力较强一点的，在做设计的时候都会考虑到交互。如果交互设计师在公司就只做做原型，那么，你就会被取代。
那么交互设计的工作内容到底包含哪些呢？《用户体验要素》这本书很好的说明了这些内容。本书把用户体验要素分五个层级：战略层、范围层、结构层、框架层、表现层。不同层级，表示着你的不同能力，引用一下大众点评高级交互设计经理范怡的一张图，比较形象的描绘了交互设计的能力范畴和价值。
怎么样，看到这些是不是有一点点觉悟了呢。如果想做好一名交互设计师，就应该扩大自己的能力范围，提升自身价值。怎样做好交互设计呢？如何运用设计原理来做交互设计呢，我们下篇来聊聊唐纳德罗曼老师书里的交互设计6要素：示能、意符、约束、映射、反馈、概念模型。
原文地址：站酷
作者：Luyeelin
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
新人设计师可能都会遇到这样的问题：在设计一个复杂需求的时候，各种场景、可能性在脑中来回乱窜，常常觉得逻辑不够严密。设计完成后，又被各方质疑，提出各种异常场景，导致频繁修改，缝缝补补。本文将和大家分享下解决以上问题的小方法。本文就以「企业内部权限分配平台」的需求为案例，整理了之前处理复杂需求的一些思路。讲讲在交互设计的过程中，如何避免以上两种情况，让我们的工作更好地服务用户，体现价值。
首先，我想任何设计师在设计产品的时候第一步都是理解需求，这包括了需求的目标背景、角色场景、产品逻辑等，不同的需求侧重点会不同。以「企业内部权限分配平台」的需求为例，目标背景和角色都比较简单，但是一般涉及权限的产品，背后的逻辑就会很复杂，场景情况也很多。
和产品沟通，和用户沟通，甚至网上找资料，都是理解需求的一些好方法。比如本次设计的需求是关于权限分配，这一篇《网易高手：角色权限设计的100种解法》的文章，就很好地帮助我理解权限分配背后的设计逻辑。
包括理解需求内的专有名词，为其建立特殊的标识样式，也是帮助自己、团队、用户更好地理解产品需求的一种方式。
△ 名词解释
我们在最初思考需求的时候，肯定会从场景/问题出发，思考怎么去解决这个问题，是以「人」的思维来思考这个问题的，这是必然的，也是正确的。但此时我们的思维是散点式的，例如当我们想到权限分配的需求时，可能会说：这次我们要新增一个「岗位」的概念，让权限和岗位绑定，不要和人绑定。对了，还有人员离职这个问题困扰业务很久了，我们这次要在人员离职的时候进行……
所以，在最初的需求框架确定后，我得到的是这样两段文字：
看上去已经非常全面了，但由于我们是散点式地收集需求，很多时候可能还是会有遗漏，或者说错误关联了内在逻辑，导致一些逻辑冲突、漏洞。
此时，我们需要将我们的思维从「散点式收集」转为「结构化梳理」。从需求说明里抽丝剥茧，我们可以得到：
各个对象之间的关系又是怎样呢？我们把所有的对象两两组合，再把没有关系的删掉。
也就是：
这个具体的业务逻辑并不重要，不需要去费心理解，重要的是这样一种结构化思考的方法，可以应用在后续各种各样的设计中。
对象间的关联，再和我们刚才梳理的人物、操作相结合，就可以还原成一系列的需求描述：「角色」可以在「A对象」下「操作」「B对象」，例如：超级管理员可以在部门下新增岗位。
至此，我们已经可以建立「需求→功能对应表」：
其中，红色部分都是在之前散点式的需求罗列中没有考虑到的功能点，通过结构化的梳理，我们可以提前把它们都一一补齐。
这个过程可以减少我们最小颗粒功能点的遗漏，避免在做完大部分设计后，突然发现遗漏了某个功能，任务时间点又已经到了，慌慌忙忙地加功能，就可能会影响整体的设计思路和框架。
完成了功能点的整理归纳后，就可以开始我们的界面设计了。在最初的界面设计中，这三点需要做减法：
当然，可以先把可能存在的异常、细节都记录下来，以便后续补充。
比如，在人员权限分配的界面结构中，分为三个大模块：
在有了界面框架和功能对应表后，我们做设计会变得比较简单，按照之前整理的「需求→功能对应表」，把每个小颗粒的功能细节填充到界面框架内即可。
当主流程设计完毕之后，我们就要开始做加法了，在之前，我们一直是用一种纯理性的视角来完成我们的设计，保持纯理性的设计会有两个问题：
例如，纯从逻辑思维角度你能想到在一个企业里有人是没有任何部门归属的吗？然而现实中就存在这样的情况──外包人员。不结合实际场景，我们也不知道用户一天需要处理多少次重复操作，目前的设计对他是否足够便捷。
作为一个企业内部权限分配平台，我们可以把部⻔、岗位、人员等对象作为初始线索，站在不同的用户使用角度，沿着线索去全面地思考场景，修改功能。有一些实在难以理解的业务，找用户聊聊也是一个好方法。
很快，我们就找到了下面这些特殊场景。
1. 人员变动
处理方法：行政架构自动同步，红点待办。
我们与 OA 系统数据打通，自动形成四类待办红点：人员新增、人员离职、行政部门新增、行政部门删除。
这样 HR 就不需要重复做新人员的添加操作，只需要业务管理员把 OA 内无法覆盖的人员岗位设定好就可以，也不会出现遗漏的情况。
2. 高管兼职
例如某位高管：本身为 A 部门负责人，临时兼任 B 部门负责人，那么当他不再负责 B 部门时，该如何处理他的岗位？离职？转岗？似乎都不合适。
处理方法：新增岗位移除功能。
3. 外包人员
了解到现实情况中，外包人员是没有部门归属的，但是实际上他们肯定也有自己负责的业务范围和岗位，在初始化时如何安置没有部门的人？
处理方法：新增一个部门，叫做「无岗位人员」，并且标红作为待办，提醒操作者去处理这些「无岗位人员」。
4. 人员离职/转岗
在进行功能设计整合时，我考虑是否「人员离职」应该叫「人员删除」更系统化？是否可以直接整合为一个「人员编辑」的功能，将离职、转岗的操作合并？（实际上这2个功能操作起来确实比较相似）
处理方法：最终我依然保留了「人员离职」、「人员转岗」的功能，因为这样更场景化，用户清晰地知道自己当前该操作什么。
目前对一个人进行离职操作的路径是：找到原部门→找到岗位→找到人→处理离职，而我们的企业有 2500+ 员工，对于离职操作者 HR 来说，这个路径是否现实？是否快捷？
处理方法：新增搜索功能，直接搜索人名→处理离职，这个功能也方便了其他找人的场景。
5. 更多
诸如此类的考虑还有很多，例如新建部门的时候是否会有空部门，在企业进行组织架构重组时是否会有大批量的人员、组织变动，进而需要有批量操作等等。找到最初的线索，站在用户的角度沿着线索思考，进行全局扫描，就会发现很多需要做加法的地方，发现的方式可以是观察、访谈、思考等任何方式。
在已经保证了主流程的简洁、清晰后，再用全局扫描的方式去搜集特殊场景，给我们的设计做加法，可以保证我们整体的设计框架是清晰可用的，而特殊场景是散落在骨干上的各种小分支。
如果我们可以做到，对所有的主干场景、分支场景了然于心，并且有自己的优先级考虑，那么对于项目成员、用户提出的质疑，我们也有足够的理由来证明自己设计的合理性。
当然，场景基本考虑全面后，还有最后一步，就是统一交互，完善细节，这一步也是设计上的加法。
以上，就是一个针对复杂需求的加减设计法案例，总结来说有四个大步骤：
所以，交互设计师是需要理性和感性的结合，要有抽丝剥茧，提炼总结的能力，也要有贴近用户关注情感的细腻。把自己的工作规范化，减少无效付出，也是我们的一种能力。希望本篇文章对新人设计师有一些帮助，也欢迎大家一起探讨交流。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一位高管在餐巾纸上画了一个新的主页原型来演示她使用和喜欢的网站。一个开发人员晚上在公司呆到很晚，并添加了一个他认为很酷的新功能。或者产品经理坚持采用与竞争对手相同的设计模式。
如果这些故事听起来很熟悉，那么你并不孤单。大多数设计师都会收到这种“帮助”。
你的第一直觉可能是以平淡无奇的方式回应“不”。但是，一个用户体验建议是否来自一个关键的利益相关者或项目周边的人，应该仔细处理。在您做出反应之前，请考虑以下步骤：
你的第一反应可能是利索地对对方说“不”。但是，无论UX建议是来自关键的利益相关者还是项目的外围人员，都应该仔细地处理它。在你做出回应之前，考虑以下步骤:
第一步是将消除自己的主观意识；你可能拥有丰富的设计经验，但不排除会有更好的想法。不要仅仅因为它是在PowerPoint文件而不是Photoshop原型中呈现，所以不要认为一个想法是坏的。
观点的多样性可以更有效的构思：即使提出建议的人缺乏设计知识，他们可能会有不同的专业知识或经验，并且可能会为您正在尝试解决的问题带来宝贵的不同视角。
你如果像设计的上帝一样扼杀了他人的创造力，最终会导致更糟糕的结果。
不加考虑就无情地否定别人的想法会阻碍人们在未来提出其他（有价值的）想法。即使一个想法对你来说显然是错误的，但请记住，这个人也试图让设计变得更好，尽管他可能对“更好”的含义有不同的看法。通过允许他们：
您可能会发现，虽然提出的解决方案并不合适，但需要解决的问题很重要。
问问这个人他的设计理念想要达到什么目标。他在考虑不同的用户群或业务需求吗？继续问“什么？”和“为什么？”（可能以不同的方式），直到你明白他考虑的问题及思考方式是什么。
确定建议和问题和好处。即使是一个坏主意也有一些好处。
例如，在大屏幕版本的网站上使用汉堡包菜单不利于用户轻松找到导航。这是不使用它的一个非常重要的原因。然而，桌面上的汉堡也有一个视觉上吸引人、整洁的标题。确认想法的成本和收益，以便更准确地评估权衡，可以通过不同的方法牺牲或实现哪些目标。
考虑举行设计原型会议（一个设计原型会议是短，会议期间，团队成员迅速协作和草图设计，以探索和分享的设计思路广阔的多样性），一起观看用户研究视频，或举办其他类型的用户体验工作坊，以便这个想法的支持者可以继续为这项想法解释。
解释一下，现在做一个设计决定意味着跳过构思、研究和用户反馈。在理想的情况下，转向设计思维过程，为所解决的问题找到正确的解决方案。
根据您对目标用户及其任务的了解程度，确定一个想法的优缺点可能需要:
论证该想法的成本可能会由于潜在的用户混淆，而导致的用户体验问题，以及诸如可能延迟发布其他更重要功能的开发计划中断等后勤问题。要评估大量想法，请使用对其进行优先级排序。
如果您评估确定不应该实施该想法，您可以以积极的方式拒绝。
承认其贡献
你不必着急全盘否定，但不要愚蠢的全去试一遍。找到您相信的有关他们建议的真实或有效的内容，并将其标注出来。这可能是这样的：
由于这些短语之后都会出现“but”，因此请确保您在所提出的观点中是真实的。否则，说它们根本不值得。
分享您的评估理由
当人们投入足够的时间来提出建议时，就是帮助他们学习更多关于用户体验的知识，并在整个团队中传播更多用户体验知识的理想时机。利用这些时间，交流你评估的理由，而不是仅仅告诉他们一个“不”。
1. “这种设计对于[persona type]用户可能有意义，因为他们需要[此功能]。但是我们的主要角色可能会有这个问题，因为[原因]。“
2. “听起来你想要解决与重要用户任务相关的[特定客户投诉]。确定信息的优先顺序可能会有所帮助，但要使其更大，颜色不同可能会导致横幅失明。我想在第二天做一些调查，并提出一些替代解决方案的原型。“
考虑提供原型，案列，设计原则，模式或研究发现，以帮助他们理解为什么一个设计可能会导致问题，以及为什么不同的设计会更好地工作。把每一次互动都看作是灌输贡献者设计理念的机会——这是对未来的一种投资。
当客户或强大的同事发出特定请求（或要求）时，即使您给出了解释，也很难说“不”。但这并不意味着你应该放弃自己的观点并同意有害的建议。相反，与他们讨论如何将想法背后的目标和资源结合在一起，而不必直接实施。
合气道是一种试图和平解决冲突的武术，它依靠转弯和枢轴等动作来融合对立的能量。同样的原则可以应用于处理围绕设计的冲突：与其直接拒绝一个想法，不如同意继续探索这个建议，而不是明确地承诺实现它。
建议召开一次工作会议，在会上你可以提出既能获得同样好处又能避免成本的选择。例如，你可以说:
比优雅地转移坏主意更好的方法是主动引导合作进入更有效的轨道。您可以通过在结构化的、战略性的时间（例如预定的研讨会）寻求输入，最大限度地利用每个人的贡献。这种主动的方法减少了在无法有效评估或合并意外更改请求时感到意外的可能性。
每个人都对设计都自己的看法，这使得UX设计师的工作充满挑战。有些人总喜欢在界面中添加一些令人困惑的元素，比如原型、这会影响产品开发进度（可能包含UX迭代），以及那些喜欢设计（甚至认为自己是设计师）但缺乏任何真正的UX设计专业知识的人。
但是，如果您与您的合作者进行深入交流，向他们灌输设计理念并引导他们发挥自己的长处，这种“设计帮助”的多样性将是一种宝贵的资产。
最有成效的用户体验设计师在设计过程中会和许多人合作。他们与各种团队成员和主要利益相关者讨论业务目标，发展机会和约束，优先级，要求和设计理念。这些人来自许多职能团体；具有不同的UX专业知识，想法和思考。
要想成为一名优秀的用户体验设计师并创作出优秀的设计作品，培养必要的沟通技巧来利用这些信息来源和输入是必不可少的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
是能点还是不能点呢？”这是当用户在面对一些操作按钮时，大脑中所迟疑的问题。
按钮越多，做决定的时间就越长。用户必须仔细看每个按钮，才能确定哪个是他们需要的。对于按钮的任何不确定性，都可能会导致他们不敢操作或误操作。
设计师可以把按钮的优先级设计的更加直观以减少这样的情况发生。当用户注意到哪个按钮与他们的任务目标更契合时，就能帮助他们快速做出决定。这篇文章就是介绍一些这样的设计技巧，通过简单的调整使得按钮变得更加直观有效。
在App中，一个常见错误就是按钮的排列顺序偏离了用户的阅读习惯。他们将优先级最高的按钮放在最前面，期望用户能首先注意到它。但其实只要按钮足够突出，视觉分量够重，用户就会注意到它，而无视它的排列顺序。
按钮顺序不是为了提供可视性，而是为了要提率。在最前面放高优先级的按钮会导致用户自上而下的阅读习惯被打断，看到按钮后还会继续阅读下面的文字，然后再回过头来找前面的按钮进行操作。
不要让用户返回再次检查按钮，而是让他们以自然的阅读习惯看完所有的内容后，按视觉比重快速进行选择。
通过将优先级高的按钮放在底部，让它处于视觉阻力最小的路径上，这使得这个按钮可以更有效率的被点击。此外，底部位置是手指最容易达到的区域，这进一步提高了效率。
App上的另一个错误是只使用文字来表示按钮。设计师使用文字按钮来表示优先级较低的操作。但是对于用户来说，这是一个糟糕的选择，因为纯文本没有一个按钮的外观，这可能导致用户会忽略了这些操作。
纯文本按钮会让用户迟疑到底是按钮还是内容，从而造成混淆。这种不确定性可能会导致他们直接跳过这些按钮。
纯文本按钮不仅让人感到疑惑，在操作上也不容易点击。将文本内容放在按钮框中，可以使得按钮更容易被点击和注意到。
与纯文本相比，描边形式的按钮是降低优先级的更好方法。它们使每个选项都易于识别，以便用户能选择他们所期望的目标。
高优先级的按钮应该是最容易被识别到的，它是直接指向用户最需要的目标操作。如果不确定优先级，请考虑哪些操作会使得用户朝着目标前进，哪些操作会使得用户回退。
在这个例子中，”付款”具有更高的优先级，因为它顺应着用户的目标流程。但不大清楚”查看购物车”还是”继续购买”的优先级是如何。
“查看购物车”操作让用户查看已经在购物车的商品，然后继续结账。”继续购物”操作将用户带回到远离结账的产品页面。
通过思考这些操作，可以清楚的看到”查看购物车”具有中等优先级，而”继续购物”具有较低的优先级。判断的理由是哪些操作使用户朝着他们的目标前进，哪些操作使他们远离目标。
前进的操作总是会比回退的操作优先级更高，因此，它们应该被设计地有更强的视觉重量和更高的颜色对比度。
颜色是一种增加按钮权重的有效方法，因为它从文本颜色中脱颖而出，吸引了用户的注意力。当按钮的颜色与文本的颜色相同时，提示性就没有那么强了。为优先级更高的按钮使用不同的颜色来辅助用户进行快速决策。
如果对每个不同优先级按钮使用相同的颜色，用户将不知道哪个优先级更高。而使用不同的颜色只会让用户更加困惑，不知道这些颜色到底意味着什么。不仅如此，每个按钮使用不同颜色，还会让视觉权重重新变得一样。
秘诀就在于使用相同的色相颜色，但改变饱和度和亮度就能改变这个按钮的优先级了，使得它比高优先级的按钮更轻。现在按钮的视觉比重有了区分，一下子就变得清晰了很多。
为了增加对比度，可以使用反色。在主按钮的深色背景上使用浅色文本，而在中等优先级按钮上使用浅色文本。这样就使得高优先级的按钮具有最亮的文本和最强的对比度。
用之前说的几个方法，已经足以区分优先级，但还可以做的更好。每个按钮设计的越直观，让用户的思考就越少。
在每个按钮文本上使用相同的粗细以表示相同的重量，最好根据优先级不同去强调不同的文本。尝试改变文本的粗细，优先级越高的按钮使用最粗体，而优先级的文本则不加粗，这样，按钮文本也有了不同的优先级，用户在阅读这些文字内容的时候就能感知到。
在这个例子中，我把”付款”这个按钮文字使用了粗体，使它变得更加醒目和明亮。”查看购物车”使用了半粗体，”继续购物”使用了中等。所以，按钮文本此时也有了一定的视觉权重。”查看购物车”中的”3项”没有加粗，因为它是补充信息，不代表具体的操作。
最后一个技巧是一种更加全面的思考，它将使按钮可供盲人使用。色盲的人是无法通过颜色来区分按钮的视觉重量的，他们还需要清晰的视觉符号。
给高优先级的按钮加上一个图标能够起到强调作用而与其他按钮区分开。当用户浏览时，他们往往更关注视觉元素而不是文本。使用图标按钮的方式能够确保引起用户足够的注意力而快速选择到高优先级的按钮。
如果删除了颜色和外框，用户仍然能够识别付款按钮，图标与文本一样，也能够起到说明的作用。
如果用户要花很长时间在操作按钮上，或者按钮的点击率很低，那就可能是按钮设计的不够直观。如果遇到了这样的情况，请尝试使用文中所说的这些技巧来优化操作按钮，或许你将会在前后版本中看到非常大的差异。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
通过点击、滑动、滚动和键盘快捷键来交互的日子吗？它们不再是唯一的交互方式,一起来了解一下~
还记得浏览网页时，只能通过点击、滑动、滚动和键盘快捷键来交互的日子吗？而现在，它们不再是唯一的交互方式，当苹果推出第一款iPhone时，多点触控技术成为了主流，用户们了解到，他们不仅可以在界面上指向、轻点还可以捏合、展开和滑动。手势成为新的操作方式。
一、UI中手势的力量
手势非常自然和直观，他们与真实世界反应类似。
对于使用手势，这里有三个主要的理由：
● 干扰少
App内，手势控制使用地越多，在屏幕上出现的按钮就越少，这样可以留出更多空间给更有价值的内容。这使得app以内容为重点，并让用户在没有障碍，或者在分心的情况下也能进行最重要的操作。
● 使用简单
一个手势一旦被用户发现和学习使用就会让用户在体验感到愉悦，而且手势可以减少步骤，来达到提高交互体验的目的。例如，当你需要删除一些项目时，用“一次点击删除一个”的方式的很浪费时间的，但是如果使用“滑动一下，删除一个”的滑动手势，就更简单快速，让用户更加愉悦。
● 无缝交互
虽然按钮看起来对于触发响应更加有用，但手势具有更大的潜力，使内容的交互更加直观。
二、手势的缺点
但同时，手势也存在难规范、易混淆等缺点。
● 增加用户负担
大多数手势学起来或者记起来不自然也不简单。举个例子，在大多数APP，一个手指的手势就对应一件事，用两个手指做一个同样的手势意味着另外一件事，其他对应事件的手势还有很多。
● 缺乏反馈
在大多数情况下，手势不会留下任何路径记录。这意味着，如果做一个手势但没有得到反应或者得到错的反应，这样就只能获得很少的信息或者不能获得有帮助的信息去解释为什么这么做。
● 缺乏一致性
大多数手势在app中还不是标准统一的。他们对于用户不总是显而易见的。甚至一个简单的滑动手势，在众多邮箱app内的邮件项目中也有着不同的工作方式。例如，在Apple Mail 中，删除一个未读项目，你应该向左滑动这个没有打开的邮件，然后界面会出现选项来删除这个项目。在Gmail里，向左滑动可以把邮件标记为未读状态。
三、手势成为移动端UI成功的关键
1.如何选择好的手势
如果你的界面里要使用手势，那你就必须要去了解你所在的市场以及你的目标用户会去使用的app。要尝试在你的app里使用和它们相同类型的手势。这样，你不仅基于你的目标市场的用户的行为优化了你的界面，还让用户从一开始就能舒适的使用你的app。
2.手势教学
虽然每个移动端app都必定会用到手势，但是要让用户很自然的就能知道如何操作(使用什么手势可以干什么)却一个挑战。可触摸的界面提供了很多条件来使用自然的手势，例如轻点、滑动和捏合来完成任务，但是不同于图形界面的操作，手势的交互用户往往是看不到的。
因此，要让用户能发现手势是很重要的。你需要确保你提供了正确的线索----通过视觉引导来帮助用户更容易的发现如何与界面进行交互。
3.如何在情境中教育用户
教程和演示的做法相当流行。在许多app中加入教程意味着要想用户显示一些说明内容来介绍界面。然而，UI教程不是介绍app的核心功能的最优雅的式。
良好执行的UI手势总是可以在易于实现视觉提示和渐进式披露的游戏中找到。这显而易见，最好的游戏可以使人们随着时间的推移来学习到技巧，而不是靠指导他们。例如，PuddingMonster 的游戏机器完全基于手势，但是他们允许用户得到基础的信息，他们不需要做很多的猜测。他们可以展示动画场景，让用户马上知道要做什么。
四、使用动效来传达手势
手势总是与移动app中的动效相关联。动效在维护用户体验中起着非常重要的作用。作为设计师，你可以利用动效来传达出用户可以进行某个操作。当动效与手势一致时，用户就会意识到自己与该物体正在相互作用。
动效在向用户提供视觉反馈上是非常重要的。没有动效，用户就不能获得足够的信息反馈，不能确定他们是不是成功地完成了手势动作。
这里有三种流行的基于动效来帮助用户学习手势。
第一种：动效视觉提示
显示一个在执行某个操作时如何和某一个界面元素进行交互的预览。它的目的是在手势和操作之间建立联系。例如下图中的这个游戏app是完全基于手势操作的，这个app让用户不用去猜测就能知道该如何操作。用动画来传达功能信息能立即让用户清晰的知道该怎么做。
第二种：内容的梳理
内容梳理是通过微妙的视觉线索来暗示用户进行手势操作。例如下图中卡片的展示，它表明这张卡的背后还存在着其他的卡片，这清晰的表明了可以滑动卡片。
第三种：功能可见性
你可以让你界面里的某些元素具有很明显的可供性来让用户知道这个是可以进行某种操作的。例如下图中点击相机icon后锁屏就会从下往上弹起，展示出在下面的相机功能。
五、总结
手势是一种强大的互动模式。移动设备已经从砖块发展到由我们手指驱动的复杂计算器。触摸和手势交互在使移动体验更加简便有趣方面，有很大的潜力。
设计一款移动端的app一定要思考手势设计。手势应该起到协调和节约时间的作用。为了设计一个有意义的手势，你应该规定一个动作以及与其配套的一个手势。提供反馈意见也非常重要，对于可能要进行的行动要有明确提示，并进行手势的引导。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
好的UI设计师应该是理论结合实践，好的理论是指导实践，所以今天我带来了这一篇文章。讲讲什么是黄金ux七大定律以及它们如何在UI中的运用。
费兹定律（fitts’law) 是心理学家 paul fitts 所提出的人机界面设计法则，主页定义了游标移动到目标之间的距离，目标的大小和所花费的时间之间的关系。
定律内容是从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小
用数学公式表示为 时间T=a+blog2(D/W+1)
用这张图来说明，当d(起始点到目标之间的距离）越长，使用者所花费的时间越多；而当w（目标物平行于运动轨迹的长度）越长，则花费的时间越少，使用的效能也比较好。
我们来看新浪微博的转发功能，因为随着功能的复杂性，转发功能包含了下一层级三个子功能，分别为快转，转发，分享。这个转发icon一触发，在很近的距离，3个点击目标也设计的很大这样容易很快的操作，利用费兹定律，提升了用户的效能。
当你走近一家餐厅，你看着琳琅满目的菜品是不是无从下手。在生活日常中你会对各种各样的选择而困扰，其实有时候不是你的问题，而是对方给予你的选择太多。
Hick’s Law (席克定律)中说道：“一个人面临的选择（n）越多，所花费做出决定的时间（T)就越长。
用数学公式表达为 RT=a+b log2(N)
划重点
当选择增加时，我们做决定的时间就会相应增加
如果在你的服务，产品中“时间就是关键”，应该将做决定的选项减少到最少，以减少所需反应的时间，降低犯错的概率。也可以对选项进行同类分类和多层次分布，提高用户的使用效果。
奥卡姆剃刀原则也被称为：“简单有效原理“，由14世纪哲学家，圣方济修士奥卡姆.威廉（William ofOccam)提出。这个原理告诫人们“不要浪费较多东西去做用较少东西也可以做好的事情。”笔者认为和后来包豪斯密斯.凡德罗提出的：“少就是多”有异曲同工之妙。
一个简洁的网站能让用户快速找到他们所找到的东西，当你在销售产品时候尤为关键。如果你的网站充斥着很多无关紧要的东西。比如小弹窗，无用链接。用户会因为不能快速找到自己想要的东西而关闭网站。
合理的使用奥卡姆剃刀原则，能更好的传达你想要表达的内容，更容易吸引广告投放者，给访客带来更好的用户体验。
泰思勒定律又被称为：“复杂不灭定律”
中心思想是：“每一个程序都有必然有其与生俱来，无法缩减的复杂度，唯一的问题，就是谁来处理它。”
泰思勒定律定律认为每个过程都有其固有的复杂性，存在一个临界点，超过这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。
从手机的演变过程来看，智能手机简化了物理操作按键，通过技术手段降低了手机操作的复杂度，尤其是复杂的交互手势操作，杂度的降低是通过大量的技术和资金投入解决，体现了复杂守恒定律。
1956年乔治米勒对短时间记忆能力进行了定量研究，他发现人类大脑最好的状态能记忆含有7（±2）项信息块，在记忆里5-9项信息后人的大脑后开始出错。
防错原则是通过设计来将过失降低到最小化。该原则及时地告诉用户哪里操作错了。比如在填写表单时，系统给出及时地报错提示；重要、谨慎的操作，系统通常会有二次确认；为用户提供撤销的机会；为用户提供纠错的机会
接近法则是格式塔理论中我们最熟悉的，也最常运用的一项法则。当对象离的太近时候，意识会觉得它们是相关的
我们来看看利用接近法则在移动端的案例，相同的模块这两款app都用空间间隙来做出了区分，让人在移动的场景更能快速的寻找想要的信息。
在UI设计中，不仅仅是为了美观的界面，更要有有理有据，在设计时应该学会运用这些法则，不仅可以让你的界面更专业，同时也更有说服力。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Material Design 响应式布局栅格适应屏幕尺寸和方向，确保布局的一致性。
Material Design 布局栅格由三个元素组成：列、间距和边距。
内容放置在包含列的屏幕区域中。
列宽是使用百分比而不是固定值来定义的，以允许内容灵活地适应任何屏幕大小。网格中显示的列数由查看屏幕的断点范围（预定屏幕大小的范围）确定，无论是移动设备，平板电脑还是其他尺寸的断点。
间距是列之间的空间，它们有助于分离内容。
间距在每个断点范围内的值是固定的。为了更好地适应屏幕，间距宽度可以在不同的断点处改变。更宽的间距更适合大屏幕，因为它们在列之间创建了更多的空白。
边距是内容和屏幕左右边缘之间的空间。
边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕，边距宽度可以在不同的断点处改变。更宽的边距更适合更大的屏幕，因为它们在内容的周边创建了更多的空白。
可以调整布局栅格以满足您的产品和各种设备尺寸的需求。
可以调整间距以在布局的列之间创建更多或更少的空间。
可以调整页边距，以在内容和屏幕边缘之间创建或多或少的空间。页边距对每个断点使用固定值。
正文副本可读性的理想长度是每行40-60个字符。
在同一断点内，间距和边距宽度可以彼此不同。
Material Design布局栅格可以被水平滚动的触摸UI自定义。列、间距和边距从左到右排列，而不是从上到下排列。屏幕的高度决定水平栅格中的列数。
在非触控和web平台，水平滚动的UI并不常见。
可以定位水平栅格以适应不同的高度，从而为顶部的app栏或其他UI区域留出空间。
断点是具有特定布局要求的预定屏幕大小的范围。在给定的断点范围内，布局将根据屏幕大小和方向进行调整。
Material Design基于以下列结构提供响应式布局。使用4列，8列和12列栅格的布局可用于不同的屏幕、设备和方向。
每个断点范围决定每个显示大小的列数、建议的边距和间距。
弹性栅格
弹性栅格使用可缩放和调整内容大小的列。弹性栅格的布局可以使用断点来确定布局是否需要显著更改。
固定栅格
固定栅格使用固定大小的列，具有流体边距，以在每个断点范围内保持内容不变。固定栅格的布局只能在指定的断点处更改。
UI（用户界面）区域
布局由多个UI区域组成，例如侧面导航，内容区域和应用栏。这些区域可以显示操作、内容或导航目标。UI区域应跨设备保持一致，同时适应不同屏幕尺寸的不同断点。
为了提高设备之间的熟悉度，为桌面设计的UI元素应该以与移动UI一致的方式进行组织。
永久UI区域
永久UI区域是可以在响应栅格之外显示的区域，如导航抽屉。这些地区不能重叠。
持久UI区域
持久性UI区域是可以随时根据命令显示的区域，或者它们可以保持可见。它们可以打开或关闭，出现或消失。当它们出现时，它们会压缩内容和栅格。
当持久性UI区域可见时，其可见性不受与屏幕上其他元素交互的影响。
临时UI区域
临时UI区域暂时出现，当它们出现时，它们不会影响响应式栅格。当它们可见时，可以通过点击其区域中的项目或其区域外的任何空间来隐藏它们。
当UI区域可见时，其他屏幕元素不是交互式的。
原型
原型是结构化布局，为布局、分层和阴影提供一致的方法。它们是一个起点，旨在在进行修改以满足产品的特定需求。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
随着折叠屏手机的发布，我们看到未来手机的形态可能会朝着柔性手机方向发展，那么，让我们来思考一件事：如何在折叠屏手机上做交互设计呢？最近三星、华为和柔宇各发布了一款折叠屏手机，它可以把一台8英寸的平板电脑通过折叠的方式变成一台方便携带的6英寸手机。折叠屏手机属于新的手机品种，也是我目前最看好的手机形态之一（未来手机的形态应该是柔性手机，现在已知有柔性电路板的存在了）。通过几天的观察和思考，我认为折叠屏手机有以下好处：
以上基于「展开」态的想法，在折叠状态下还有一些不错的想法供大家思考。
华为在MWC2019上演示了一个名叫「镜像智拍」的功能，它可以让被拍摄的人实时看到拍摄效果，并调整面部表情与姿势。用自己最了解的角度及构图使得拍摄事半功倍，妹子们再也不用担心自己的男朋友把自己拍得很丑了。
在折叠状态时可以把背面当做一个附加的交互空间，实现一些简单的交互操作，例如打吃鸡游戏时我们可以考虑在背面屏幕增加一些手势操作进行8倍镜的缩放，这种背部触控方式并不是什么新鲜事，在2011年索尼旗下的掌上型游戏机 PSV 已经在背部增加了电容式多点触控面板。
除了附加的交互空间，我们真的可以把它当做第二块屏幕进行使用。在平时我们可以通过两块屏幕同时运行两个不同的应用程序，例如我们可以用主屏幕玩游戏，在加载游戏时翻转屏幕刷个微博，操作起来十分方便。
折叠屏当然不只有展开和折叠两个状态，还有翻折状态，它区别于传统手机和平板的独立状态。最直接的效果就是它可以不需要支架就立在桌面上，实现中远距离的自拍；同时它可以进行多角度拍摄，成为制作 VR 内容的利器。在玩法上，翻折状态可以通过两面屏幕的不同内容引入多人互动的概念，但这种应用场景比较难想象。
相比外折叠设计，内折叠设计玩法相对较少，在这里我只想到了任天堂NDS 的概念：在翻折状态时它就是两块独立屏幕，它可以独立显示不同的内容，例如上屏显示内容，下屏显示操作区域，打游戏时翻折状态明显要比其他状态舒服。
个人观点：从以上案例来看，外折叠设计在交互和玩法上都比内折叠设计好，未来很有可能以外折叠设计为主。
当折叠屏从小屏模式转变成大屏模式时不应该只是画面的等比例变大，而是要考虑响应式布局设计。
描述响应式设计最著名的一句话就是「Content is like water。如果将屏幕看作容器，那么内容就像水一样」。在以前响应式设计更多用在PC Web设计上，但现在手机也应该考虑响应式设计，以下是设计时需要考虑的细节。
它不是简单的响应式设计。从上文得知，「展开」态时要考虑是平板模式还是双屏幕模式，如果是平板模式，那么内容应该在一个整体里；若是双屏幕模式则可以考虑不同屏幕展示不同内容。设计时需要根据实际需求和场景进行模式选择。
考虑通过 Fragment（片段）来设计。Fragment 是 Android3.0提出的 API，出现的初衷是为了 UI 更灵活地适应大屏幕的平板电脑。以下是 Android 对 Fragment 的官方介绍：「Fragment 表示 Activity 中的行为或用户界面部分。您可以将多个 Fragment 组合在一个 Activity 中来构建多窗格 UI，以及在多个 Activity 中重复使用某个 Fragment。（ Activity 可以理解为一个页面，Android 开发中最重要的概念之一）」
参考微软的 UWP 设计概念。UWP 即 Windows 10中的 Universal Windows Platform（Windows 通用应用平台）。UWP 应用的理念并不是为某一个终端而设计，而是同一套代码和设计可以在所有 Windows 10设备上运行，包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。
它的响应式设计的设计技巧包括以下6点：
调整位置：你可以改变 UI 元素在不同屏幕上的位置。比如下面这个例子：为了确保同时展示两个元素，在手机上我们必须采用纵向滚动界面，而在平板电脑上，我们可以调整框架的位置，变为横屏滚动界面。如果你用网格设计这些位置，你也可以不改变内容框架，但其他 UI 元素可以使用响应式设计。
调整尺寸：你可以通过调整空白和 UI 元素的尺寸来优化框架，比如下面这个例子，可以通过简单的增大内容框架尺寸来提升大屏幕的阅读体验。
调整顺序：通过调整 UI 元素的顺序和方向，优化内容显示效果。举个例子，在大屏上运行时，可以再添加一栏，并且加入分类列表，这些都是合理的。这个例子展示了在手机上使用一栏纵向滚动，而在平板上使用两栏横向滚动的优化。
展现：你可以基于屏幕的真实大小，设备支持的功能，特定的情况或者屏幕方向展示界面。下图是媒体播放器的例子，小屏幕上这些按钮通常是被删减的，但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比手机上的有更多的功能。
换位：这项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面这个例子是导航菜单：小屏幕上他是隐藏在汉堡菜单中纵向排列的，但是在大屏幕上，更大的 Tab 是更好地选择。
改变结构：你可以为特定的设备优化特定的结构。下面这个例子就是两种不同的接合结构。
以上6点引用了Windows 开发人员中心 《Design Basics：Responsive design 101 for UWP apps》
考虑用户翻转折叠屏幕时的场景和动机是什么，从而优化现有界面及交互流程，举几个例子。
以 RPG 游戏为例。当玩家使用小屏模式时我们可以收起所有功能界面，使游戏的沉浸感更强；当玩家采用大屏模式时，我们可以认为玩家需要获取更多信息，这时候把聊天、装备等相关功能界面展示出来。
当用户在微信里查看定位信息有新消息提醒时，手机变成大屏模式时应该同时存在地图界面和聊天界面。
相关注意事项
Google 在2018年11月就宣布了对折叠屏的支持，包括多窗口支持、不重启适配等等。如果想要在折叠屏手机上设计良好的用户体验，必须考虑以下两个方面：生命周期管理以及转场动效。
生命周期管理
目前大部分手机应用为了有更流畅的体验会做适量的生命周期管理，例如退出页面时会释放相关内存。因此设计师在设计折叠屏交互时要考虑哪些页面不能被销毁，一定要让用户进行展开、折叠等操作， 应用任务不中断重启，产品可以自动适应各种屏幕下的静态布局规格。
转场动效
从目前 Google 公布的新版 Android系统来看，已经可以做到当折叠/展开设备的时候，页面、内容从一个屏幕自然地切换至另一个屏幕。设计师在设计时应该基于 Google 的技术规范考虑内容、组件等模块的转场效果。
参考案例：
华为基于HUAWEI Mate X发布的折叠屏官方适配方案，相关链接：https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
