什么是交互设计

. ;. 什么是交互设计 用户界面有两部分的设计：交互设计和视觉设计。在下图中，左边和右边 分别是微信的交互设计和视觉设计。 交互设计 vs. 视觉设计 交互设计的产出物是可交互的低保真原型，设计内容包括： o信息架构； o页面布局； o流程跳转。 . ;. 一、信息架构 信息架构，是为了让用户在使用 APP、软件、网页的时候，能够快速找到 自己需要的信息、资料、功能，并且在使用的过程不会迷路。它有层级、 有逻辑顺序、要能反映信息（功能）的重要程度和关系。 信息架构的组成部分： 1. 组组织织系系统统： 关注如何组织信息。比如小说，按篇幅，可以分为短篇、中篇、长篇；按 年代，可以分为：古代、近代、现代、当代；按题材，可以分为武侠、推 理、历史、言情等等从哪个角度来组织、到底多少层合适，需要设计 者的判断和权衡。比如当当网的商品组织方式： . ;. 组织系统 2. 导导航航系系统统 协助用户了解他在哪个位置，以及可以到何处去。比如微信的功能导航： 微信功能导航 豆瓣的功能导航： . ;. 豆瓣功能导航 3. 搜搜索索系系统统 关注用户如何搜索信息。比如淘宝的搜索： . ;. 搜索系统 4. 标标签签系系统统 关注如何表示信息。我们可以把标签系统理解为如何为信息和它的组织方 式命名。比如我们刚才提到的小说按题材，可以分为武侠、推理、历史、 言情等等，其中的武侠、推理这些就是信息的标签。 一些大型网站，比如淘宝、当当、京东等，设有专门的信息架构师角色。 而大部分的 APP、应用软件中，信息架构由交互设计师设计。1 二、页面布局 页面布局的工作，就是确定每个页面有哪些元素，它们位置、顺序、分组， 要突出什么元素，弱化或隐藏什么元素。、 . ;. 页面布局 在设计布局时，有一个要特别注意的事情，就是尽可能减少父页（所有布 局抽象出来的模板）。比如说 360 安全路由的 APP，它的父页如下，所有 页面布局，都是由这四个模板变化而来。这样的软件，用户在使用时，会 感觉统一、易学。 360 安全路由 三、流程跳转 设计页面之间的跳转逻辑。通过链接、按钮还是手势；单击还是双击；上 划还是下划我们在做可交互的原型时，要尽可能贴近软件的最终效果。 . ;. 流程跳转 交互和视觉的分工 交互设计师在设计页面布局时，为了突出主次，会设计字体大小、间距、 颜色等内容，但这不是最终效果。最终的字体、颜色、图片、图标、大小、 间距等，由视觉设计师确定。 . ;. 交互设计师在设计流程跳转时，会设计过场动画，但这同样不是最终效果。 最终效果由视觉设计师（或动画设计师）确定。 区分交互和视觉有一种快速判断法，那就是 web 工程师平时写的 css 里的 属性和参数，都属于视觉设计的范畴。所以很多公司会多招几个 UI 设计 师，他们不仅仅负责视觉设计，还负责输出 css 样式表。 交互和视觉对人的要求 交互设计和视觉设计对人的要求不同，并且往往越往深入做，这两者所需 的性格、背景和思维方式差别越大。可以简单地理解，交互设计是靠理性 和逻辑驱动，而视觉设计是靠感性驱动。这也是为什么目前的交互设计师 中理工科院的学生占了很大比例。业界也有很多开发工程师转做交互设计 的成功案例。所以做开发，学交互设计有优势。 交互和视觉高度交叉 我上面说，交互设计和视觉设计的分工，也说它们对人的要求不同。这可 能会让大家误以为，这两个角色的工作比较独立，各自负责各自的内容。 交互不用管视觉，视觉不用管交互。 但这是不对的。交互和视觉，是高度交叉的两个领域，无法简单的分隔。 首先，交互设计师一定要有很好的视觉设计的感觉，因为一个页面布局的 好坏，会直接影响视觉的发挥。如果交互设计师导入一个没主次，结构很 . ;. 糟糕的设计给视觉设计师，他只有两个选择，一、降低自己的水平，随便 做一个；二、自己动手，重新设计一个。 其次，交互设计会影响视觉设计，视觉设计也有可能反过来，让交互设计 做修改。举个例子，我们最近正在做的一个功能。 最早的交互设计里没有列表选择功能。后来在视觉设计过程中发现，我们 的窗口大小，如果要保证视频旁边不出现黑边，可能会留很大得空隙，如 果布局满了，又会导致视频出现黑边。一种方式，是把底下的点赞、分享、 评论移上来，放到右边，但这样的排版怎么也不会满意。况且我们这个页 面最核心的目的，是让用户看视频。后来我们想了一下，增加了选集的功 能，虽然这样增加了开发工作量，但是对用户来说，在这页面可以直接导 航到其它视频，使用体验更好，也解决了我们看视频黑边的问题。 . ;. 说这些想要表达的是，我们要时刻注意，自己是在同视觉设计师配合完成 一个作品。我们设计的好坏，会影响他的工作。所以在介入真实项目前， 我们要通过大量的学习+练习，达到准设计师水平。 如何学习交互设计 1. 看 交互设计师需要有好的视觉设计的感觉，需要有基本的审美能力。如何提 升审美能力？只有一种方法，看。 我们要看大量优秀的设计作品。现在有很多平台可以很容易的找到世界上 顶尖的设计师们设计的东西。比如 behance、pinterest、FWA、dribbble 等等如果嫌国外的访问太慢，也可以选择国内的，比如花瓣。 不要只看软件界面，也看看其它领域的设计作品，好的产品、好的建筑、 好的电影海报、好的摄影作品、好的艺术作品。看到喜欢的，把它们收集 起来。 看了后，该怎么判断自己的审美能力有提升呢？ 隔几个月去看看自己前几个月喜欢的东西，当时觉得不错，现在是不是觉 得丑的掉渣？如果是的话，审美水平就在进步。3 还有一种办法，把自己平时喜欢的、会分享的设计，同设计领域的人沟通， 听听他们的意见。一个专业的设计师，不会只说，这个好，那个不好，他 . ;. 们说为什么好，为什么不好，比如这个界面主次不够突出，重点元素没 有强调出来、没有引导用户的视线等等等等 2. 用 我们在 dribble、在花瓣，看的都是单个页面。交互设计不只是设计一个 个页面，它还得把页面串起来。所以看单个页面还不行，我们要用、要体 验实际的产品，看看别人是怎么把一个个页面组合成产品，页面和页面间 的过场是怎样的。 怎么用呢？很简单，我们每个人都有手机或 pad。去下载优秀的 APP，每 个 APP 花 20 分钟，把所有页面、所有功能跑一遍。优秀的 APP 来源，可 以是应用市场每个分类下的 Top20，也可以来自一些优秀的组织、用户推 荐，如最美应用、如知乎上的 APP 推荐等。 我还有一个很诚恳的建议。如果有条件的话，最好买个 MAC。为什么设 计师喜欢用 MAC？我们看几张对比图。 PC 和 MAC 上的 QQ。 . ;. PC 和 MAC 上的应用市场。 . ;. PC 上的精美PPT 模板，和 MAC 上的 keynote 模板。 . ;. MAC 的软件比 PC 的软件优雅太多，完全不在一个 level。如果我们每天看 的、用的都是最好的产品，我们的审美能力自然会提升，对什么是好设计， 什么是坏设计会更敏锐，更有感觉。 3. 想 认知科学研究发现： 世界上最好的象棋选手之间的差距，其实并不是他们思考能 力的差异，或者是否能走出一招妙棋，而是他们熟悉的棋谱 的多寡。 . ;. 做交互设计也是这样，决定交互设计师的设计水平，是在做设计时，设计 师能够想起多少个相似的的设计，并借鉴、组合、改进它们，成为自己的 设计。 我们看了那么多优秀的设计，我们用了那么多优秀的产品，怎么样才能在 需要的时候记起它们呢？认知科学给出的答案很简单，去想，去思考。 一样东西进入我们的大脑，如果我们没有思考过，大脑会认为这个东西没 用，就丢掉它，不存下来。但如果我们仔细思考过它，大脑就会自己做个 判断，认为以后有可能要再度想起它，就把它存下来。 所以不只要看，要用，还要想。 . ;. 比如我们看到这个页面，要想： 1.信息架构是怎样的？有没有层级，有没有逻辑顺序？能不能反映它们的重要程度和 关系？ 2.页面布局是怎样的？它们位置、顺序是怎样的？它是怎么分块的？它是怎么突出主 要任务的？ 3.有没有其它设计亮点，比如好的隐喻，比如视觉怎么营造氛围。 把所有思考结果记录下来。记得多了，形成自己的观点后写成文章，同其 他人分享。 4. 做 . ;. 一开始模仿，在这个过程中，学习工具的使用，把它用熟。 为什么要先把工具用熟呢？道理很简单，如果工具还不熟悉，大脑会把主 要精力都耗费在工具的使用上，根本腾不出空间来思考设计的事。 当工具使用没有任何问题后，做真实的产品设计。 我们可以直接在项目中实践，但大部分人应该没这个条件，那怎么做？ 重新设计现有的产品。比如我们可以重新设计微信，重新设计简书；我们 觉得某个软件设计的不够好，重新设计它。通过这种训练方式，提升设计 技能，达到准设计师的水平。 那么，一个产品（或功能）的设计流程，是怎样的呢？ 1. 明明确确使使用用场场景景 我们经常看到一个被分解后的功能指标项如下： 我要一个远程控制的功能。老师可以控制某个学生的电脑。 如果按照这个需求做的话，在产品首页加一个远程控制的按钮，点一下， 老师可以选择某个学生进行控制，这个功能就设计好了。 但是实际上老师是怎么用的呢？我们和产品经理（或用户）沟通，会发现 老师使用这个功能的场景是： . ;. 1.老师查看屏幕预览图，觉得某个学生可能做的不错，双击查看学生完整的屏幕。发 现学生做的很好，就转播给其他学生看，在这个过程中会协助学生微调作业。 2.学生有问题时，举手请求老师协助，老师在讲台上协助解决问题，（并将这个协助 过程广播给其它同学）。 这就是使用场景。场景非常非常重要。它决定了功能入口放在哪里比较合 适，应该突出它，还是弱化它。它的前一步是什么，下一步是什么。 只有明确了真实的使用场景，才能设计出用户可用的产品。 2. 收收集集素素材材 去前面提到的设计网站，或是平时用的软件商找同类设计来对比和分析， 看看其他人是怎么设计的。比如远程协助，可以看看 QQ 是怎么设计的。 把它的整个流程跑几遍，并且把每个过程截图下来。借鉴它设计好的地方。 . ;. QQ 远程协助 3. 画画草草图图 有了想法以后，在纸上画草图。 草图里面，主要是把每个页面都有哪些功能、元素，摆放顺序定清楚。这 个就是梳理我们设计思路的过程。 . ;. 这个过程一定要有。千万不要一上来就做原型，那会花很多时间在对齐、 排版等等琐碎的事情上，我们也没办法一下子看到全貌，把每个页面都想 清楚了，页面流程怎么跳转都想好了，再搬到 Axure 上。 4. 画画低低保保真真原原型型 把草图搬到 Axure 上。这个过程还会调整，修改。 5. 可可用用性性测测试试，调调整整设设计计 做完动态的、可交互的原型后，找三个用户试用下（不一定要真实的最终 用户，另外，不用太多用户，三个用户就已经能够发现 70%关键问题）， 观察他们在使用的时候会碰到什么问题，找出最关键的问题，进行调整。 这个阶段完成后，就可以提交开发了。 6. 补补充充细细节节设设计计 有一些很细节的流程，我们没办法在一个交互稿里面完全体现，比如页面 内容为空时，怎么办；数据加载出错时，怎么办。这个时候用文档来补充 这些分支流程。我们就像写开发文档一样，把整个软件的所有分支流程、 异常流程都过一遍，记下来，然后提交开发。文档形式不重要，只要能传 递思考结果就行。 . ;. 以上只是一个大概的流程，在实际操做的时候，还会碰到很多问题。有一 些东西我会在后面分享的时候再细讲，还有一些东西，可能就需要大家实 际动手，自己去摸索和沉淀。 总结 看、用、想、做。 最后，我想说的是，我们掌握一个东西，要下很大的功夫，没有捷径可走。 那些想要走捷径的人，往往到最后会发现，绕了一大圈，却什么也没得到。 只有那些脚踏实地一步步前行的人，才有机会走到自己想要到达的地方。 . ;. 【最最能能借借鉴鉴的的经经验验都都是是实实战战出出来来的的】 交互设计起源于网站设计和图形设计，但现在已经成长为一个独立的领域。 现在的交互设计师远非仅仅负责文字和图片，而是负责创建在屏幕上的所 有元素，所有用户可能会触摸，点按或者输入的东西：简而言之，产品体 验中的所有交互。 这篇文章对有兴趣学习更多关于交互设计的知识的人来说是一个很好的起 点。我们将会简要讨论交互设计的历史，相关的指导原则，值得关注的贡 献者，以及有关这个迷人学科的工具。 . ;. 一、什么是交互设计？ 交互设计（IxD）定义了交互系统的结构和行为。交互设计师努力在用户 和用户使用的产品或者服务间创建有意义的关联，不管是从电脑到移动设 备，家用电器或者其他。我们的实践会与世界一同不断发展。”交互 设计协会（IxDA） 从第一台用来容纳静态副本以外的信息的屏幕被设计出来的那天开始，交 互设计就开始了。从按钮，链接到表单的一切都是交互设计的一部分。在 过去的几十年里，有许多相关的书已经出版了，这些书解释了交互设计的 方方面面，并探索了交互设计与体验设计间交叉和重叠的多种方式 交互设计的发展帮助和促进了人和他们所在的环境之间的相互作用。不像 用户体验设计那样占据所有面向用户的系统，交互设计师只关心用户和屏 幕之间的特定相互作用。当然，在实际中从来不会如此清楚地划分开来。 二、常见的交互设计方法 尽管交互设计跨越了无数类型的 Web 和移动应用程序和网站，有一些固 定的方法是所有设计师都可以依赖的。我们将探讨一些比较常见的方法： 目标驱动设计，可用性，五个维度理论，认知心理学和人机界面指南。 1. 目目标标驱驱动动的的设设计计 目标驱动的设计是由艾伦库珀在他的著作囚犯正在逃出庇护：为什么 高科技产品让我们疯狂，如何恢复理智（出版于 1999 年）中推广的。 . ;. 艾伦定义了目标驱动的设计是指把解决问题作为最高优先级的设计过程。 换句话说，目标驱动设计首先关注满足终端用户的具体需求和欲望，而不 同于旧的设计方法只是专注于技术侧上的能力。 今天来看，艾伦提出的一些观点是显而易见的，因为设计师很少会选择设 计完全受制于技术发展约束的交互。然而，其核心的方法是满足最终用户 的需要并想要的，也就是说就这一点对现在和曾经都是一样必要的。 根据艾伦所说的，目标驱动的设计过程，需要作为交互设计师的我们进行 五个思维方式的转变。 . ;. 1）先设计，再编程。换句话说，目标驱动的设计首先要考虑用户如何与 产品交互，而不是以技术因素开始。 2）独立开设计和编程的负责。这其中的必要性是，这样可以使交互设计 师可以尽量拥护用户，而不去担心技术限制。一个设计师应该信任他或她 . ;. 的开发人员来处理技术方面的问题，事实上艾伦建议如此，否则会把设计 师放在利益冲突的位置。 3）设计师要对产品质量和用户满意度负责。虽然利益相关者或客户会有 各自的目标，交互设计师出也对任何在屏幕的另一边的人有责任。 4）为你的产品定义某个特定的用户。这个想法已经发展成为现在用户研 究最通常的东西：角色模型。然而艾伦依旧不断提醒我们要把角色模型关 联回产品，不断问自己：这个用户会在哪里使用这个产品？他或她是谁？ 他或她想要完成什么目标？ 5）结对工作。最后一点是，交互设计师不应该独自完成工作，而应该与 他人协作，艾伦称其为关键的“设计沟通者”。虽然作为设计沟通者的艾伦， 在 1999 年时的设想不过是一个典型的旨在提供营销产品副本的广告文字 撰稿人，但到今天已经设计沟通者扩展到了包括项目经理、内容策略师、 信息架构师等在内的许多其他人。 2. 可可用用性性 . ;. 可用性感觉起来可能是一个模糊的概念，但其核心只是设计师的一个简单 问题“是不是谁都可以轻松使用这个产品呢？“。这个概念在无数的书 籍和网络文章上解释过，我们将回顾一些不同的定义来发现一些共同的主 题和细微的差别： 在艾伦迪克斯，珍妮特芬利，拉塞尔比尔，格里高利阿柏德几个全著的书 人机交互中，可用性被划分成三个原则： 1.易学性：新用户学会在系统中导航的容易程度如何？ 2.灵活性：有多少种方法可以实现用户和系统的交互？ 3.鲁棒性：我们对用户面对他们的操作错误时的支持做得怎么样？ 与此同时，由尼尔森和施耐德曼所解释的可用性是由五项原则构成的： 1.易学性：新用户学会在系统中导航的容易程度如何？ 2.有效性：用户执行任务的速度如何？ 3.记忆性：如果一个用户一段时间没有访问系统，他们对界面的记忆程度如何？ 4.错误度：用户一共犯了多少错误，从错误中恢复的速度如何？ 5.满意度：用户是否喜欢他们所使用的界面，以及他们是否对结果满意？ . ;. 最后，国际标准（ISO 9241）也把可用性这个词也分解成五项原则： 1.易学性：新用户学会在系统中导航的容易程度如何？ 2.可理解性：用户对他们所看到的界面的理解程度如何？ 3.可操作性：用户对界面的控制程度如何？ 4.吸引度：界面在视觉上的吸引程度如何？ 5.易用性的依从性：界面是否遵循了标准？ 显然，在这些解释中，我们能看出构成可用的界面是有一些共同的主题的， 无论一个设计师依据的是哪条原则，在设计任何界面的时候可用性都是一 个重要的考虑方面。 3. 五五维维度度理理论论 在比尔莫格里奇的访谈书籍设计交互中，吉莉安史密斯，一位交互设 计学者，介绍了关于“交互设计语言“的四维空间的概念，。换句话说，这 些维度能够构成交互本身，因此它们最后形成了用户和屏幕之间的沟通。 原来的四个维度是这样的：话语，视觉表征，物体或空间，以及时间。最 近，凯文西尔韦，一位 IDEXX 实验室的资深交互设计师，增加了第五个 维度，行为。 1.一维：话语应该尽量易于用户理解，用这样一种方式表达使信息能够轻松传达给最 终用户。 2.二维：视觉表征一般都是图形或图像，基本上就是指一切非文本的东西。他们应该 适量地被使用，而不是压倒。 3.三维：物理对象或空间指的是物理硬件，无论是鼠标和键盘，或者任何用户能与之 交互的移动设备。 . ;. 4.四维：时间是指用户与前三个维度交互所花费的时间长度。它也包括用户可能的用 来衡量进展的方式，包括声音和动画。 5.五维：凯文西尔韦在他的文章交互设计中的设计中增加了行为这个维度。这是 指用户与系统交互时产生的情绪和反应。 通过使用这五个维度，交互设计师可以非常专注于用户与系统通信和连接 时的体验。 4. 认认知知心心理理学学 . ;. 认知心理学是关于大脑如何工作，以其发生的心理过程的研究。根据美国 心理协会的定义，这些过程包括了“注意力、语言的使用、记忆、感知、 解决问题，创造力和思考”。 虽然心理学是一个非常广泛的领域，认知心理学尤为重视其中的某些关键 的元素，实际上，这可能帮助了交互设计领域的形成。唐诺曼在他的书 日常生活的设计中提到了其中的很多概念。以下只是那些概念中的一 部分： 1）心理模型是指的在用户心中的一幅景像，使他们产生了对特定的交互 或系统的期望。通过学习用户的心智模型，交互设计师可以创建出使用户 有直观感觉的系统。 2）界面隐喻是指利用已知的行为来引导用户产生新的行动。例如，大多 数计算机上的垃圾桶图标都类似于现实中的垃圾桶，这是为了提醒用户做 出预期的行动。 3）功能可见性是指界面元素不仅是为了达到功能而设计出来的，而且也 是为了让它们看起来像是可以达成功能而设计出来的。例如，按钮看起来 像一个可以按的物体，这就是一个功能可见性的设计，使得不熟悉按钮的 人仍能理解如何与之交互。 5. 人人机机界界面面指指南南 . ;. 这部分内容其实有点不恰当，实际上是没有一整套完整的人机界面指南的。 然而，创建人机界面指南背后的理念本身就是一种方法论。准则是由主要 的技术设计企业，包括苹果和安卓、Java 和微软等构建的。他们的目标 都是一样的：用这些建议和推荐来提醒未来的设计师和开发者，这将帮助 他们创建普遍意义上直观的界面和程序。 三、日常任务和可交付成果 . ;. 在整个开发过程中交互设计师是一名关键的球员。他或她从事的一系列的 活动都是项目团队的关键。这些活动通常包括形成设计策略、将关键交互 做成线框图，以及将所有交互建立为产品原型。 1. 设设计计策策略略 虽然这个将会物的界限比较模糊，但有一点是肯定的：一个交互设计师需 要知道自己在为谁设计，以及用户的目标是什么。通常情况下，这些信息 会用户研究员提供。然后，交互设计师在独立或者受到团队中其他设计师 的帮助的情况下，将会评估目标并形成设计策略。好的设计策略将帮助团 队成员对在哪些需要的地方应该发生什么样的交互有一个共同的理解，以 方便用户目标。 2. 关关键键交交互互的的线线框框图图 . ;. 交互设计师在用于激励其设计的设计策略上有了好主意之后，就可以开始 画草图，画出那些可以促进必要交互的界面。交互的妙门藏在细节中：在 这个过程中，有一些专家会直接在纸板上素描，而有些则使用在线应用程 序来帮助他们，而有的则会使用两者的组合。有一些专家会协同工作来创 建这些界面，而有的则独自创建。这一切都取决于交互设计师自己的特定 工作流。 3. 原原型型 根据项目的需要，交互设计师的下一个合乎逻辑的步骤可能涉及到创建原 型。团队制作交互原型有许多不同的方法，比如 html/css 原型，或纸上 原型，在这里，我们不会覆盖广泛的细节。 4. 保保持持流流行行性性 对一个现实中的交互设计师来说，最难的部分是适应工业发展变化的速度。 每一天，新的设计师都可能要在不同的方向上看待媒介。结果便是，用户 也会预期这些新类型的交互会出现在你的网站上。谨慎的交互设计师会响 . ;. 应这种演变，不断探索在线交互以及利用新技术，但是我们总是要记住正 确的交互或技术是最好地满足角色用户的需要的那些，而不只是最新颖或 最令人兴奋的那些。交互设计师还通过在推特上跟随交互设计的思想领袖 （比如下列的著名设计师）并主动推动媒介本身的发展，以保持流行性。 四、著名的设计师 从左到右，从上到下分别是： ALAN COOPER，BILL SCOTT，BRAD FROST，BRENDA LAUREL，BRENDA SANDERSON， . ;. DAN SAFFER，DON NORMAN，KAREN MCGRANE，KIM GOODWIN，MAT MARQUIS， MIKE MONTEIRO，THERESA NEIL，WHITNEY HESS 译者注：此处篇幅过长，因而对设计师作了聚合，可在原文中查看详细个 人说明。 五、工具 交互设计师使用许多不同的工具来完成他们的工作。无论是在一张餐巾纸 上画交互草图，还是向客户展示原型，他们的目标都是一样的：通过对话 来沟通。交互设计师最需要的就是沟通。下面的列表里是一系列用于促进 对话的工具。记住，最终创建的 Web 界面，通常与面向用户的（前端） 技术完成的，比如 CSS / HTML。 1. Balsamiq Mockups . ;. Balsamiq 的界面简单,使用手绘风格元素和 comic sans 字体，使得制作交 互线框图的过程变得简单，可以认为它是一个在线版的纸上原型！ 2. Invision . ;. InVision 是一个免费的网站和移动 App 的原型工具。InVision 旨在通过结 合 Photoshop，Sketch 等其他应用促进沟通。设计师可以上传线框图，并 通过热区来连接它们。客户、利益相关者和他的同事设计可以直接添加评 论，并有实时演示工具 LiveShare。 3. Omnigroup . ;. Omnigraffle 是 OSX 上的交互设计师可以利用的图表软件，用单调的审美 创造的图表软件 Omnigraffle 更关注背后的交互设计而不是设计本身，同 时其也具备许多优秀的模拟功能。 4. Patternry . ;. 没有人愿意浪费时间重新发明轮子。良好的交互设计或代码聚合在一起更 能节省时间和精力,并确保设计的一致性。Patternry 是一种允许团队交互 设计师分享并将其设计和代码资产存储在一个中央位置的工具。 5. Sketch . ;. Sketch 是一种设计工具（Mac），最好用于图标的中高级保真度模型，是 一个 Adobe Photoshop 的一个轻量级替代。 6. Axure . ;. Axure RP 可以说是市场上最好的交互设计工具。比 Balsamiq 拥有更强大 的功能，内置的协作和共享功能，并且能够轻松地实现线框原型。缺点是， 它可能提供了太多，这意味着它有一个缓慢的学习曲线。 7. Uxpin . ;. UXPin 是一个协同设计平台,支持低保真的线框图和高保真的动画原型。设 计师使用 Photoshop 或 Sketch 制作的分层原型可以直接导入，然后从利 益相关者处得到反馈。该工具还包括可用性测试和现场演示功能。 六、协会和组织 不管交互设计师是否属于任何特定的组织，其仍然是一个交互设计者。不 过，找到其他设计师的网络是向他人学习的好方法。这些协会在美国都有， 有一些则是国际性组织。 1）IXDAInteraction Design Association 交互设计协会，其提供了一个讨论交互设计问题的在线论坛。 . ;. 2）AGIAAmerican Institute of Graphic Arts 美国平面艺术学院，组织中的平面设计师更经常地为新媒体设计作品，交 互设计在其中扮演了重要组成部分。 七、书籍 其实相关的交互设计书籍列表可以占掉好多页。在这里，我们缩小成几本 标志性的图书的列表。如果你真的渴望扩大你的图书收藏，可以看看我们 网站搜索用户体验的推荐书集： 从左到右依次是 1.交互设计：创建创新应用和设备(第二版) 2.设计数字时代：如何创建以人为本的产品和服务 3.设计界面 4.交互设计：超越人机交互 . ;. 5.日常生活的设计 Home / PS 教程 . 的按照原型进行而不考虑任何规则，那么很多时候就会产生一些不协调的 结果。设计完之后产品不满意，自己也不满意。 在 UI 设计中其实也存在大量的版式设计原理，如果产品和设计都能对版 式设计有一定的了解，那么设计师拿到原型的时候，评审设计输出稿的时 候大家都能更好地理解对方的设计。以下我总结了几种常见的版式设计原 理，是工作当中做出良好视觉效果的前提。 1. 信息的排布 对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比， 贯穿设计的四大原则。 对齐除了能建立一种清晰精巧的外观，还能方便开发的实现。基于从左上 至右下的阅读习惯，移动端界面中内容的排布通常使用左对齐和居中对齐， 表单填写的输入项使用右对齐。 . ;. 设计和做其他事情一样，也要有轻重缓急之分，不要让用户去找重点/需 要注意的地方，应该让用户流畅地接收到我们想要传达的重要的信息。重 复和对比是一套组合拳，让设计中的视觉元素在整个设计中重复出现既能 增加条理性也可以加强统一性，降低用户认知的难度。那么在需要突出重 点的时候就可以使用对比的手法，例如图片大小的不同或者颜色的不同表 示强调，让用户直观地感受到最重要的信息。 . ;. . ;. 在排布复杂信息的时候，如果没有规则地排布那么文本的可读性就会降低。 组织信息可以根据亲密性的原则，把彼此相关的信息靠近，归组在一起。 如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而 不是多个孤立的元素。这有助于减少混乱，为读者提供清晰的结构。 . ;. 在设计表达的时候，一定要考虑内容的易读性。适当使用图形可以增加易 读性和设计感，而且图形的理解比文字更高效。那些用文字方式表现时显 得冗长的说明，一旦换成可视化的表现方式也会变得简明清晰，可视化的 图形可以将说明/标题/数值这种比较生硬的内容，以比较柔和的方式呈现 出来。 . ;. 2. 图片的使用 App 的页面结构和文本确定之后，就要开始安排图标/按钮/图片的安排了， 这时页面也就从单纯文本的“阅读”型结构调整为“观看”型结构，对于页面 的易读性以及页面整体的效果会产生巨大的影响。页面中图片所占的比率 叫做图版率，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。 提升图版率会有充满活力，使画面有富有感染力的效果。 . ;. 实际中也跟选取图片的元素/色调/表达出来的情感有关系，合适的图片也 能散发出整个应用的气质，直接传达给人“高级”，“平民化”，“友好”等不 同的感觉。 . ;. 在内容比较少但是又想提高版面率的话可以采用一些色块，或者抽象化模 拟现实存在的物件，例如电影票，书本纸张，优惠券，便签等的效果，使 界面更友好也降低空洞的感觉。通过这种方式也可以改变页面所呈现出的 视觉感受，只是这种方法最多改变页面的色调/质感，并不能改改变“阅读” 内容的比例，这点是需要注意的。 . ;. . ;. 3. 颜色的使用 不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界面中 通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽 然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏 /部分按钮/icon/特殊页面等地方出现，会有点晴，定调的作用。统一的主 色调也能让用户找到品牌感的归属，例如网易红/腾讯蓝/京东红/阿里橙等 等。标准色指的是整套移动界面的色彩规范，确定文本/线段/图标/背景等 . ;. 等的颜色。点晴色通常会用在标题文本/按钮/icon 等地方，通常起强调和 引导阅读的作用。 主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准色更 是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之间的选择 上便有不同的方法。第一种是邻近色配色(色相环上邻近的颜色)，这种方 法比较常用因为色相柔和过渡也非常自然。 . ;. 第二种是同色系配色(色相一致，饱和度不同)，主色和点晴色都在统一的 色相上，给用户一种一致化的感受。 第三种是点亮色配色，主色用相对沉