定义 组件 原则 更多设计规范的相关教程：案例实操！从零开始教你构建产品颜色规范前言这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。阅读文章 > 一、如何「理解」交互规范说起设计规范，大家应该都不陌生，一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用：产品设计：保障产品内不同模块的设计一致性，同时提高不同设计师间的设计、协作效率研发开发：通过定义的标准规范，提高流程、组件的复用率，提高整体开发效率用户使用：让用户能够在产品全局感受到统一且完整的体验，降低使用成本和学习难度而一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成，在全局原则的指导下，侧重不同的维度和内容分别展开规范的定义，最后再合到一起形成一份完整的设计规范。从用户体验要素来看，视觉主要是在「表现层」「框架层」进行规范的统一，主要包括：形、色、字、构、质、动 六个层面。而交互角度相对抽象，主要针对于产品的「结构层」「框架层」入手，定义统一的交互规范，指导页面、流程搭建和组件使用规则。包括：全局原则、页面布局、通用流程、标准组件、文案规范。整体维度呈“从抽象到具体的总分关系”，不仅对产品的各个维度都有具体的交互指导，而且不仅能保证长期使用，避免重复返工；同时也便于囊括后续的迭代内容。而这些内容，就是我们通常定义的交互规范，也是交互参与定义设计规范的发力点。有了对于基本认识和搭建框架之后，我们来详细聊聊如何定义交互规范具体内容。二、不同阶段应该定义哪些交互规范？产品有不同发展阶段，设计规范同样也有，不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多，保证投入产出比最大化；同时也要构建一个合理的规范迭代思路。产品探索初期：该阶段的产品核心目标是「验证产品或商业模型」，业务需求都是小步快跑、频繁迭代。产品处于从 0 到 1 的野蛮生长状态，存在着“先满足功能，再优化体验”的情况，导致该阶段的产品体验往往不太过关。搭建目的：通过定义原则，梳理关键页面和流程，搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断；从页面到流程，又能对应设计参照标准；同时业务可以在规定的框架下发展，不仅让产品体验的根基牢固，而且不会限制功能设计自由。搭建范围：「全局原则」「页面布局」「通用流程」产品稳定发展期：该阶段的产品基本形态已稳定，也形成了初步的模型结构。后续迭代是在现有结构的基础上，进行增加或优化功能。虽然探索期定义了产品原则、布局和流程，但探索期产品的自由生长，会导致不少设计细节不一致，从而影响了产品整体的体验和效率。搭建目的：通过回溯整理过往设计，沉淀优化成完整的交互规范。再根据规范统一产品体验，进一步优化流程和效率， 让整个产品体验达到相对稳定的状态。搭建范围：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」三、如何「定义」交互规范1. 定义交互规范的原则与行业通用的设计规范（如 TDesign、AntDesign）“大而全”“通用”的特质不同，一般团队内构建的设计规范都是源于某一个产品或业务，主要的特点是“专精”。专注于「业务」本身，主要是「团队内成员使用」，追求的是投入产出比最大化。基于此背景，当我们在定义「交互规范」时，有三点原则：原则一：保持规范的业务性。设计规范既要贴合业务场景归纳完整，同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划，尽量富有前瞻性，这样定义的规范不仅能覆盖当前需要，同时后续也能更好地迭代。原则二：保持规范的专注性。有的放矢，明确内容优先级，避免盲目追求大而全和形式主义。对于优先级高（覆盖面广、复用率高）的关键内容重点描述；优先级低（逻辑简单、认知一致）的内容可简要描述，避免事无巨细降低效率。原则三：保持规范的生长性。设计规范不是一成不变，而是跟随业务发展不断迭代完善的，所以需要阶段性的回顾规范。遇到规范未能覆盖或无法指导设计的地方，及时修订同步团队，避免墨守成规，固步自封。最后，还有一点建议：在定义规范时，可以站在前人肩膀，适度参考行业设计规范，能复用用的直接参考，具有业务特性的再集合业务综合考虑，使整个规范制定效率更高，科学性、指导性更强。在找到自己当前所属的产品阶段、明确要建立哪些设计规范后，具体应该如何进行落地执行呢？建议从以下 4 个步骤入手。2. 第一步：定义规范分类如上文中提到，一个完整的交互规范分为：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」五个维度，但每个维度具体含有哪些内容，都是不一样的。仍然需要根据实际业务需要去定义，这样才能尽量保证没有遗漏，也更好为下一环节评估工作量。通用的做法有两种：方式一：整理业务场景下不同的页面、流程等，并进行抽象合并。「全局原则」「页面框架」和「通用流程」具有强业务导向，可以采用此方式。以「页面布局」为例，就需要将关键页面按统一颗粒度收集（按层级或按场景等）。方式二：参考行业通用规范的定义，先罗列完整，再根据产品实际业务需要进行增删改。「标准组件」「文案规范」已经在行业内有了不少科学的目录和沉淀，可以采用此方式，例如下图组件的梳理。最后可产出如下图的规范分类和具体内容。（可以列的不是很全，后续补充具体部分内容时持续维护这张表。）3. 第二步：确定分工排期有了具体内容作为依据，便可以根据此进行排期分工。分工原则：推荐按规范分类进行分工，一个大的分类由一人负责，保证专注性。同时团队交互最好都能参与，保证后续对规范更好的沿用。排期原则：「定义规范」和「输出需求」两者经常要并行处理，此时提高效率，控制投入产出比就很重要了，我们需要明确优先级，先做什么后做什么。有 3 个思路可以综合参考：并行的思路：在定义完「全局原则」后，剩下的页面、流程、组件、文案都可考虑并行定义，彼此之间没有明确的依赖项。迭代的思路：近期有迭代的版本，如：即将改版的模块、反馈较多体验较差的模块，其中涉及到的页面框架、组件可优先定义。复用的思路：某些典型页面、典型流程、典型组件涉及面广，许多需求的设计都将借鉴参考，亦可优先抽象定义。4. 第三步：统一撰写原则设计规范是由不同的设计师一起合作完成，所以我们尽量在一开始，就需要统一规范的撰写和展现形式。以此提高后续合并的效率，同时又能保证其阅读体验，让其它使用者能够更好遵循。对此，我们定义了几个关键原则：目录完整：高效检索，快速让使用者找到需要的内容。原则清晰：抽象的内容往往含有许多概念和原则，需要让使用者先理解再参考，才能保证后续使用正确、举一反三多图少字：没有人喜欢看字，图片更容易吸收搭配案例：让使用者更好的代入场景，理解和使用规范。5. 第四步：定义具体规范 前面铺垫了许多流程性的内容，就像我们日常输出设计需求一样，大家或多或少在工作中都有遇到过。接下来，将重点聊聊，我们具体的内容应该如何定义。依然分成 5 个环节一一讲解。① 全局原则目标：明确影响整站各个模块、各个页面设计的原则和规范，指导我们后续各种规范的定义和设计。而全局原则也分两种，设计原则和业务原则两种。设计原则：每个完整的设计规范都需要包含的内容，如：设计价值观、设计准则。看似相对务虚的东西，实则影响后续整个设计方向。这个部分需要和产品经理、视觉同学结合产品的定位和发展共同提炼。具体定义方式可参考：你为什么需要设计原则？https://zhuanlan.zhihu.com/p/246430795业务原则：源自实际业务本身产生的问题，行业内没有标准定义。需要具体问题具体分析，推导出具体目标，最后再统一制定规范解决业务问题。举一个实际的例子便于理解：全局 Z 轴定义明确问题：整站层级高度没有统一定义，导致不同控件间相互遮挡，没有统一规则。需要定义全局 Z 轴规范，统一不同场景、页面、组件的高度。梳理借鉴：统一梳理相关场景、页面、组件，明确需要定义的范围。再查找行业规范，有无参考借鉴。（如 Z 轴定义，可参考 Material Design）定义规范：最后通过最具代表性的场景进行展示全局原则没有维度高低之分，例如可能全局涉及到的「右键菜单」也能被定义成全局原则。不必盲从行业交互规范内庞大且抽象的原则。只要能够实际解决你业务的需要，能够覆盖整站各个部分，都可以纳为全局原则。② 页面框架目标：梳理整站所有关键页面，整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考。页面框架的搭建一般由四个步骤组成：第一步，收集页面：根据早期定义的规范分类，收集展示所有相同层级的页面。这些在定义规范分类时，应该已收集完成。第二步，框架布局：提取共性，搭建框架和布局，明确页面大的区域划分和结构。（TDesign 布局详细指南）第三步，功能分区：基于框架布局，细化区域内具体的业务功能属性，如：导航区、操作区等。这部分是页面框架内最接地气最具指导性的内容，同时也是最难定义的。主要原因如下：定义太细，担心缺乏前瞻性限制后续设计：定义越细灵活度就低，后续改动和限制性就越高。为避免这种问题，推荐在定义关键页面时，按输出设计稿的思路：整理「信息架构」定义「功能分区」，这样后续拓展性和前瞻性更高定义太粗，无法定义出明确的功能分区，担心缺乏实际指导意义：同一区域有些页面展示操作，有些展示导航。从规范角度好像不应该，但实际套在各个业务内却又合理。当遇到这种无法达成一致的情况时，建议就不定义具体的“功能分区”，避免因为盲目追求统一而限制实际设计。而可以采用“穷举举例”的方式，将该布局下可承载的内容均展示出来，既可以起到参考意义，又能供后续沿用达到统一的效果。第四步，加入案例：将刚刚定义的布局框架与功能分区，与实际案例完整结合，便于后续理解和沿用。③ 通用流程目标：梳理整站所有流程，对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用。“可复用的流程”是指：在多个场景下，不改变其原有业务逻辑的情况下能够“既插既用”。例如：登录注册流程、扫码关注流程、分享流程等等。往往一个通用流程中，不同的步骤亦可以打散，重新拼装成不同的流程，以适配具体的场景使用。下面就举一个具体的例子：注册流程。一般完整的注册流程如下，通过不同的入口触发后进入，通过一定步骤后注册成功。当业务有了进一步需求，需要通过插件快捷登录时，步骤便可以重新组合，再适配具体的场景。对于设计师要做的，就是识别具体的通用流程有哪些，并将其给「步骤化」串联起来。当有新的需求来的时候，判断能直接复用，还是需要重新组装，亦或是新增步骤。而这样拼装的思维，恰好对应了研发搭建流程时的思路。通用流程对于他们就是将不同的步骤进行组合起来。当遇到不同场景时，再以搭积木的方式进行拼装。而具体的搭建步骤也是由两个步骤组成：1.第一步，收集流程；2.第二步，抽象步骤。具体方式上面已提到，就不过多赘述。④ 标准组件目标：将产品内使用过的组件整理成“标准组件”，统一定义规则，让后续设计和研发时能直接调取组件，提高设计和研发效率。其实行业中已经有很多通用组件，可以快速调用。但由于不同业务的复杂度不一样，也会生成自己独特的业务定制组件。同时，产品持续在迭代，也很难能抽出时间单独定义组件。故基于这个背景，结合“需求设计流程”和“组件整理流程”，有两种高效定义标准组件的方式。方式一：调用行业通用组件第一步，业务设计确定基本逻辑。第二步，挑选行业通用组件，增加业务规则。（一般开发在搭建产品初期时，便会选择一家行业组件进行使用，而组件也仅能在这家提供的组件中挑选）第三步，视觉根据全局视觉原则，设计新的样式。第四步，将交互规则、视觉样式合并，统一成标准组件。基础规则直接引用行业组件已定义的内容，场景规则按需补充。方式二：业务定制组件第一步，进行正常的业务设计。交互根据需求搭建原型，视觉设计具体样式。第二步，判断组件是否通用，是否可复用到其它场景。例如：分享对话框，不同的内容分享都能够用得到，像这种就是可抽象成标准组件的典型案例。第三步，定义标准组件规范。简单的组件展示具体样式即可，团队内设计师基本认知一致，无需重新学习。而复杂的组件为保证后续的正确复用，建议包括以下内容：1）更新日志：因为组件是变动最多的规范，需要明确具体的版本和改动点2）组件定义：简要介绍用途和使用规则，如对话框定义：必须是用户主动触发时才出现、主要使用在二次确认场景需用户确认后才消失等。3）组件结构：介绍组件构成、功能分区、分区定义，详细展示不同分区内具体信息和对应规则。4）使用场景：详细区分多种场景下不同的使用方式，明确给予使用指导5）设计方案：备选，如果比较复杂的组件且涉及到流程中的关键环节，建议可以考虑复制一个完整的设计方案嵌入其中，便于团队成员理解沿用。第四步，跟研发沟通，封装成标准组件。这一步是非常关键也是重要的一步，这将大大提高我们后续的组件复用率，降低重复性走查的耗时。推荐使用 CoDesign-设计规范功能点击体验 CoDesign 小程序，上传「组件库」后能够按目录自动生成规范文档，同时将自动标注和切图，大大提高研发开发标准组件的效率。⑤ 文案规范目标：将产品内各个场景内文案进行整理，帮助业务更准确表达意图，让设计师更好沿用，同时让用户感受到一致的产品风格。文案就像“产品对用户说的话”，不同的人说话方式可能并不一样，没有绝对的对错。但清晰明了的语言表述，让用户更容易理解；符合产品气质的语气，能拉近产品与用户的距离；统一的文案描述，又能让用户在整站一致的语境下体验产品。需要定义的内容，包括但不限于以下 3 个部分：语言：语言是指我们通过什么样的规则来组合文字，让它形成一种惯用的表达方式。例如语句简洁明了，不过度修饰，避免重复描述，使用简洁清晰的语序，帮助用户快速理解；例如用词精准易懂，使用简单、易于用户理解的词汇，避免使用专业术语，或过于口语化的表述。单纯说规则可能太虚了，在实际定义规范时，还要如下图所示，加上实际案例示意避免误解。语气：语气是可以体现产品气质和风格，定义时要结合全局原则内的设计价值观，明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时：俏皮的文案可能是：网络开小差，请稍等一下而正经的文案可能是：网络异常，稍后重试。书写规则：主要包括常用词汇的书写方式，例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等。以及易错的词汇短语示意，例如「账号还是帐号」、「登陆还是登录」等。这是团队设计师最容易沿用遵循的，也是接地气的部分。具体使用指南：以上「语言」「语气」「书写规则」3 个部分，是构成全局文案的基础规范。如果有充足时间的团队，可以考虑再结合实际业务，分别定义不同场景和组件下具体的使用指南。如下图：最后再附上各个行业内定义文案规范例子，供大家参考：B 端产品文案指南：https://www.yuque.com/linyecx/dragonAntDesign 文案规范：https://ant.design/docs/spec/copywriting-cnClarity Design 文案规范：https://design.teambition.com/doc/introduction国家标点符号用法：http://www.moe.gov.cn/ewebeditor四、如何「推进」交互规范定义完交互规范，后续将考虑如何将其顺利的推进落地。本文罗列几个推进时重点需要注意的事项。1. 团队评审，达成一致规范的定义不是一个人的事情，而是一个团队事情，它将关系到每个后续每个人的设计产出。所以在制定规范期间，应该定期在团队中进行设计评审。这不仅是评审设计好坏的过程，更是让团队达成一致、大家更深入了解如何使用规范的过程。注意，参与评审的人不止是设计师，当然也包括具体的业务开发，很多时候我们会得到新的思路和启发。2. 善用工具，沉淀规范规范搭建的过程中，有很多痛点：组件库需要多人参与维护和创建，容易造成冲突内容丢失；同时沉淀规范文档时，需要图片逐一复制、粘贴到文档内，更新时又要重复一遍这样的操作。而这些问题，使用 CoDesign 设计规范功能，就可以有效的解决提高效率。首先组件库支持多人同时维护，差量更新；其次组件库上传后，可以自动生成/更新规范文档，避免反复编写文档，整体提效；最后当组件库有新版本时，会自动提醒团队内其他成员进行更新，保障团队设计一致性。3. 运用规范，指导设计搭建规范的过程其实也是整体设计走查的过程，我们会发现有些设计可能有体验问题，或不符合规范。每当这个时候，我们就需要对这些设计进行标记。在规范定义完成之后，迭代排期优化线上的设计。而在实际设计使用过程中，可能又会发现规范无法满足的地方，此时又可以展开新一轮的提炼和总结，再反哺规范，形成正向循环促使设计和规范不断完善。五、写在最后在前言的时候就有提到「交互规范」只是整体规范中的一部分，最终是需要与视觉合并成一份统一的设计规范，指导后续具体的设计。具体的合并方式，在定义的章节内已有提到，就不再赘述。最后，我一直认为好的设计规范是提高设计效率，引导设计方向，而不是因为设计规范而局限了具体业务的设计，如果这样，还不如不去定义。欢迎关注作者「腾讯CDC体验设计」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/global-interactive-specification-formulation
视觉 原则 内容 B 端产品主要是 Web 端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。格式塔主要包括 7 个基本原则：用超多案例，帮你学会经典格式塔理论的7个视觉原则格式塔理论为界面设计准则提供的相关的基础理论和原理支撑，一起来了解下吧！阅读文章 > 今天我们就来总结下，格式塔原理在 B 端产品中是如何应用的？接近性原则我们先看 2 张截图，分别是不同分辨率下的界面效果。可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。相似性原则相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。闭合性原则IBM、苹果的 Logo 设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。在 UI 设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。连续性原则用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体，而是理解为两组信息。在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。简单对称原则通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。特别是 B 端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。主体与背景原则主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。而 B 端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。共同命运原则共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少，我没有找到合适的案例解释这个原理。在移动端产品中有些应用案例。比如 iOS 系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。总结虽然 B 端产品没有 C 端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。今天的分享就到这里了。如果有更好的案例，欢迎评论区留言分享给大家~近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/apply-gestalt-theory-to-product
用户 原则 尼尔森 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。尼尔森博士分析了两百多个可用性问题而提炼出的十项通用型原则，它是产品设计与用户体验设计的重要参考标准，值得每个交互设计师理解与思考。今天把尼尔森设计原则结合一些产品案例进行总结：用超多App 案例，帮你掌握尼尔森十大原则谈到我们生活中的那些产品和服务，它们常伴于我们左右，影响着我们的生活，与我们处处相关联，同样的这些产品也会影响我们的感受，我们常常在使用时会感到喜悦，也偶尔会在使用另一些产品时会感到不舒服，这些感受都是由产品和服务的体验直接决定的。阅读文章 > 原则一：状态可见性原则系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。沟通是所有关系的基础，无论人还是设备。产品应该通过在合理时间内的适当反馈，向用户通知正在发生的事情或者当前的状态。用户知道系统在做什么用户知道自己在什么位置用户知道下一步操作应该去往哪里产品名称：抖音体验说明：图一是抖音用户双击点赞后的反馈图，图二是抖音收藏成功后的提示图解释说明：利用提示语、icon 图标等方式告知用户自己的操作“成功”；图三，手机信号出现问题加载失败的时候也会告知状态。告知的方式有很多，除了图中的图标、文字等，还有声音、震动、动效等方式。原则二：环境贴切原则软件系统应该使用用户熟悉的语言、文字、语句，或者其他用户熟悉的概念，而非系统语言。软件中的信息应该尽量贴近真实世界，让信息更自然，逻辑上也更容易被用户理解。产品名称：豆瓣 FM解释说明：音乐唱片切换播放的交互行为虚拟现实场景中翻唱片。利用现实生活中的一些行为作为设计元素进行隐喻，很大程度上降低用户学习成本同时激发用户的使用兴趣。设计师在设计的过程中不要轻易自主创作手势交互，表现形式也最好借鉴现实生活的图形符号，以免增加用户认知和学习成本。原则三：用户可控原则用户常常会误触到某些功能，我们应该让用户可以方便的退出。这种情况下，我们应该把“紧急出口”按钮做的明显一点，而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方，这个叫做临界效应；所以最好支持撤销/重做功能。产品名称：微信解释说明：用户可控性原则需要用户在操作过程可以自由的导航和退出、对于不可逆转的操作可以有提示，需要用户二次确认。如图一用户可以自由导航，进入内页后返回按钮或者右滑手势可以返回；同时图二，点击“看看”按钮，再次点击可以进行取消收藏；图三中，对于用户的误操作或者说是不可逆转的行为，有弹出框提示。原则四：一致性原则对于用户来说，同样的文字、状态、按钮，都应该触发相同的事情，遵从通用的平台惯例；也就是，同 一用语、功能、操作保持一致。产品名称：微信阅读解释说明：一致性原则在视觉、结构、行为交互、反馈层面都有所体现，微信阅读的交互行为在期刊和书籍阅读上做了区分。所有的书籍采用左右滑动翻页；期刊才有上下滚动方式翻页。同时视觉上统一品牌色，文章的字体排版也一致，便于用户识别。这就是为什么 UED 部门都要有自己的交互规范与视觉规范要遵守的原因。原则五：防错原则比一个优秀错误提醒弹窗更好的设计方式，是在这个错误发生之前就避免它。可以帮助用户排除一些容易出错的情况，或在用户提交之前给他一个确认的选项。在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。产品名称：微信在进行危险操作或者不可逆转操作的时候有提示，如上图第一张的弹出框提示；错误预防的另外一个方法是利用一些视觉元素引起用户注意 ，提供警示作用，如上图的右图。原则六：识别好过记忆通过把组件、按钮及选项可见化，来降低用户的记忆负荷。用户不需要记住各个对话框中的信息。软件的使用指南应该是可见的，且在合适的时候可以再次查看。产品名称：夸克解释说明：识别好过记忆是指让用户减少识别记忆时间。图中夸克中的按钮采用可视化的表现形式，加以文字来辅助，让用户对信息一目了然。图标的形象比较扁平，虚拟现实生活的物品，或者其他 APP 的 icon 变形。PART2，展示用户常用或最近的历史记录，帮助用户记忆。原则七：灵活高效原则灵活高效原则旨在使用户更快捷的使用产品，让用户在最短的路径下最快实现目标。这需要对用户的使用场景、使用流程进行深度挖掘。汽车油门—新手用户常常看不见，而且对于高手来说可以通过它快速与汽车互动。这样的系统可以同时满足有经验和无经验的用户。允许用户定制常用功能。产品：腾讯会议点开腾讯会议 APP，首页展示如下图所示。根据用户参会的场景进行分类，常用的会议场景包括：加入提前预定好的会议、即时性快速开始会议、个人提前预定会议，以及在线下会议室并且需要马上进行无线投屏。四个场景分别对应：加入会议、快速会议、预定会议、无线投屏四个功能。四个功能分类，全面覆盖用户开会最常用的几个场景。同时，直接把几个场景功能进行区分，方便用户快速选择自己适合的功能，灵活高效，节约不必要的交互流程。原则八：优美且简约原则对话中的内容应该去除不相关的信息或几乎不需要的信息。任何不相关的信息都会让原本重要的信息更难被用户察觉。产品名称：多抓鱼解释说明：多抓鱼是 C2B2C 的电商平台，链接买卖双方，但是多抓鱼的框架、布局、视觉等各方面都很简洁。框架层：首页（浏览二手书）、卖书（一键扫码免费上门取书）、购物车、个人中心。简单明了，突出核心功能。同时多抓鱼的买书界面（图 2），图文形式简单的介绍卖书流程，一个按钮可以扫码卖书；个人中心中悬浮按钮可以直接写书评。界面布局与视觉干净简洁，减少视觉干扰项。首页的书籍列表，仅仅展示折扣、书名、豆瓣评分、价格几个关键字段，点进内页才有更多评价和介绍。总体来说多抓鱼的设计在各个方面都做的很简洁、清新，也符合文艺小青年的目标人群原则九：容错原则错误信息应该使用简洁的文字（不要用代码），指出错误是什么，并给出解决建议。也就是在用户出错时如何为出错的用户提供及时正确的帮助呢？即要帮助用户识别出错误，分析出错误的原因再帮助用户回到正确的道路上。如果真的不能帮助用户从错误中恢复，也要尽量为用户提供帮助让用户损失降到最低。产品名称：百度浏览器解释说明：在进行信息填写等一些操作行为的时候，需要使用到这个原则。如图一在用户填报信息前会有提示性信息防止用户填写失误、在用户填写的信息不符合要求的时候会有提示性信息描写哪里有问题。这个原则在一些填报银行卡等安全行为的时候也常用到，系统自动把需要注意的事项给用户，使用户防止出错。原则十：人性化帮助原则即使系统不适用帮助文档是最好的，但我们也应该提供一份帮助文档。任何帮助信息都应该可以方便地搜索到，以用户的任务为核心，列出相应的步骤，但文字不要太多。产品名称：KEEP解释说明：如上图中，用户初次使用 KEEP 课程的时候，会有相关提示进行行为引导；下图的添加设备的流程，每页的步骤引导用户进行选择，找到自己想添加的设备进行添加，引导用户将行为串行。并且最后一个 KEEP 链接小米设备的步骤，给用户进行提示。从而总结最常用的帮助与引导原则的方式有：采用一次性的提示信息、常驻的提示性信息、流程引导、帮助信息等若有收获，就点个赞吧！用超多案例，帮你掌握尼尔森十大设计原则（上）对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。阅读文章 > 用超多案例，帮你掌握尼尔森十大设计原则（下）对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/nielsen-design-principles-4
原则 尼尔森 的是 之前写过一篇《零基础如何成为交互设计师？聊聊我的学习三步法！》，通过该方法，我们可以对交互设计有个整体的了解，比如，知道了交互设计师的工作流程、需要掌握的技能、交互设计师的日常产出等等。零基础如何成为交互设计师？聊聊我的学习三步法！背景介绍我是从测试被动转交互的（转岗原因不是这次的重点，就不在这里描述了），以前工作的公司是家小公司，没有所谓的交互设计岗位，所有我对交互设计一窍不通，以至于画了一段时间的线框图之后，依然没有找准个人定位，走了不少弯路，浪费了不少时间。阅读文章 > 可是，纸上得来终觉浅，绝知此事要躬行，在我们了解那么多的理论知识，知道了交互设计师需要掌握的众多技能后，又该从哪里开始，该如何快速掌握这些理论，并应用于实际工作之中呢？还记得上高中那会，有一种英语练习题叫做“各个击破”，比如我在“完形填空”方面比较薄弱，那么就买一本完形填空的练习题，每天晚上睡觉前练习 2~3 篇；又或者我在“阅读理解”方面比较薄弱，那么就买一本阅读理解的练习题，用同样的方式去练习，这种有针对性的练习就叫做“各个击破”，我当时的英语成绩就是通过这种方法提升上来的，练习效果可谓是立竿见影。既然这种方法效果很好，我们可不可以把它应用在“交互设计技能”的掌握上呢？答案是肯定的。下面，我就以交互设计原则为例，讲述一下，在了解了这些设计原则之后，怎么做才能更快的掌握这项技能，实现各个击破。首先，总结“设计原则全家桶”交互设计原则有很多，为了能够更快、更全面的掌握这项技能，我们需要将设计原则进行汇总，整合为“设计原则全家桶”（总结方法我就不在这里赘述了，感兴趣的同学可以查看上文）。这里我汇总了四个常用的设计原则，古腾堡原则、格式塔原则、尼尔森十大可用性原则、交互设计 5 大原则（这里简单说明一下，本来是交互设计 7 大原则，其中“接近性原则”在格式塔原则中已包含，“防错原则”在尼尔森原则中也已包含，所有我把这两个原则去掉了，一来可以简化原则，二来可以减轻记忆负担）。我们可以通过提取关键词的方式，把这些原则的“主要内容、在设计中的应用”通过“关键词+图片”的形式提炼出来，然后汇总为“设计原则全家桶”。（全家桶相关文章见文末）其次，强化练习“设计原则全家桶”就像是武功秘籍，有了武功秘籍，我们还需要勤加练习才能掌握，可是，该怎么练习呢？如果手上有项目的话，可以通过项目实战进行巩固。如果手上没有项目，我们该怎么进行巩固呢？我的方法是，找几款常用的产品，然后对这些产品进行分析，分析这些产品，都应用了哪些设计原则，它们是如何应用这些原则的，有没有不符合设计原则的地方，不符合设计原则地方背后的设计目的又是什么？下面，我以淘宝 APP 为例，来简单说一下该如何强化我们学习到的这些设计原则。我们先来看下淘宝首页都应用了哪些设计原则？顶部导航栏只有“订阅、推荐”2 个 tab 页面，底部导航栏有“首页、逛逛、消息、购物车、我的淘宝”5 个版块，这两个导航栏应用到了交互设计 5 原则中的“米勒定律”，也就是 72 原则。签到、会员码、搜索栏等，应用的是“格式塔–主题/背景原则”，即当主题和背景重叠时，人们倾向于把大的元素当做背景，把小的元素当做主题。所以“签到、会员码、搜索栏等”被看做为主题，而后面灰色的部分被当做了背景；同样的，我们再看常用功能栏，后面的白色卡片会被当做背景，而中间的功能图标被当做主题。再看下面的产品展示区，应用的是“格式塔–闭合性原则”，因为手机屏幕有限，无法展示全部的内容，所以最下面仅展示了部分图片，以提示用户下方还有更多的内容。继续向上滑动，可以看到这里的图片摆放样式采用了“格式塔-对称性原则”，而且这里对展示样式进行了优化，采用了瀑布流的样式，可以防止视觉疲劳，展示效果更胜一筹。点击首页上方的搜索框，进入搜索页面，搜索框下方展示了历史搜索数据，且按用户的搜索信息倒序排列，最后搜索的内容展示在最前面，很明显这里使用的是“尼尔森-灵活高效原则”。再来看产品详情页，该页面使用了“古腾堡原则”，最重要的两个信息（产品信息、购买按钮），一个展示在左上，一个展示在右下；其他信息分别展示在中间、右上及左下方位置。同时这里也使用了“交互设计 5 大定律中的费茨定律”，把“购买”按钮放在距离用户手指最近的位置，并占据底部导航栏三分之一的面积，这样的设计，既方便了用户的操作，又提升了产品的购买率，一举两得。淘宝关于其他原则的应用示例还有很多，比如淘宝首页的“下拉刷新松手刷新正在刷新”，应用的是“尼尔森–状态可见原则”；用户购买商品后发现不合适，可以申请退货或换货，应用的是“尼尔森–用户可控原则”；淘宝客服功能，可以在线为用户答疑解惑，应用的是“尼尔森-的人性化原则”，等等，这里我就不再一一举例了。强化练习的目的就是为了加深记忆，形成条件反射。以后，不管是做竞品分析，还是自己设计原型，就能快速想到这些设计原则。遵循这些原则，即使我们没有太多的实战经验，也可以设计出符合基本规范的原型图，减少低级错误的可能性。最后，实战练习武功秘籍我们已经练习的差不多了，可是威力如何还需要进一步的检验。如何检验学习的效果呢，那就是通过项目实战。《刻意练习》中作者说“人的学习受到情景的制约或促进，你要学习的东西将应用在什么情境中，那么你就应该在什么样的情境中学习这些东西。比如，你要学习编程，就应该在 GitHub 里学习，因为你以后编程就是通过 GitHub”。同样的，我们想掌握交互设计原则，那么就需要在交互设计中学习，也就是结合实际项目进行实践。这里我通过一个实际案例，来简单介绍一下，在实际项目中该如何应用这些原则。现在有个功能优化的需求，给“党费缴纳”增加一个“待缴费用户查询以及发送短信提醒”的功能，那么我们在设计原型的时候会应用到哪些设计原则呢？先看原型图，下面这两个页面应用到了“状态可见、接近性、相似性、奥卡姆剃刀原则、一致性原则，以及古腾堡原则”。其中，查询记录为空和查询记录不为空，应用到了“尼尔森–状态可见原则”；查询条件（快速查询、精确查询）和下面的查询结果，应用的是“格式塔–接近性原则”；查询结果中，人们倾向于把“选择框、姓名、联系方式”联系在一起，这里应用的就是“格式塔–相似性原则”。快速查中的“近一月、近三月、近半年”快捷操作按钮，应用的是“奥卡姆剃刀原则中的减少用户操作次数，给出合理选项原则”；再看有查询结果的这个页面，这个页面和手机通讯录页面是不是很相似？所以这里应用的是“尼尔森–一致性原则”；还有右下角的「发送短信提醒」按钮，应用的是“古腾堡原则”。我们再看下面两个页面，这两个页面主要应用的是“尼尔森–状态可见原则”，当点击用户前面的按钮时，左下角会实时显示“已选中 xx 项”，然后点击「发送短信提醒」按钮时，会弹出“发送成功”的 toast 提示。上面考虑的都是正常的情况，假如用户未选择任何选项，直接点击了「发送短信提醒」按钮，这个时候该怎么处理呢？这时“尼尔森–容错原则”就派上用场了，增加一个“请选择您要提醒的用户”toast 提示就可以啦。总结《刻意练习》的作者告诉我们，“1 万小时定律”是个伪命题，学习需要讲究方法，同时也是有方法可寻的。通过“总结归纳强化练习项目实战”的方式，我们就可以将交互设计必备的技能在较短的时间内各个击破。设计原则全家桶参考链接：用超多案例，帮你掌握交互设计心理学的古腾堡原则写在前面在平时的设计过程当中，你是否有这样的疑惑？阅读文章 > 近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 用超多案例，带你学会经典的尼尔森十大交互设计原则Jakob Nielsen（雅各布·尼尔森）的十大交互设计原则。阅读文章 > 万字雄文！超多案例帮你读懂交互设计7大定律在交互设计领域，有很多经过时间检验过的定律及法则，来作为设计的指导原理，它能够帮助产品设计者对界面上的各种视觉元素进行合理评估，从而发现一些使用过程中的可用性问题，还可以根据这些法则从界面的维度来改善操作效率和使用满意度。阅读文章 > 用超多实例，解析「交互设计七大定律」在设计中的应用（上篇）交互设计之父阿兰·库珀说过这样一句话：“除非有更好的选择，否则就遵从标准”。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/master-design-principles
用户 这一 原则 编者按：在做设计的时候，设计师到底要遵循哪些设计原则？我们曾经有过很多相关的文章，不过这一篇，有些不一样。这篇文章出自资深 B 端 UI/UX 设计师 Taras Bakusevych ，他对于产品、视觉、体验设计上，都有深入的钻研，而这些钻研是实实在在的项目喂出来的实战经验。Taras 的这篇文章所挑选的 10 个设计原则能够帮你更好地做好设计，具体往下看：设计原则是构成任何良好产品设计基础的各种考虑因素。您可以在网上找到许多列出各种原则的文章，但它们往往缺乏我们日常遇到的产品的具体示例。这里有十个原则可以帮助您创建更实用、更有效和更身临其境的设计。1、灵活性/可用性 权衡原则随着系统灵活性的增加，系统的可用性会降低。灵活的设计让产品具备更多的功能，满足更广泛的需求，但这回让执行和实现这些功能的效率普遍被降低，并且效率会低于专用的工具。在平衡产品的灵活性和实用性的时候，请深入剖析用户的实际需求，以及用户本身的学习能力和成长性，以及发生改变的可能性。在复杂度、可用性、使用时长和投资需求方面，灵活的产品，通常意味着巨大的成本。正如我们所知道的那样，Adobe Photoshop 被设计师、平面设计师、艺术家、摄影师和创意人士广泛使用。随着 Photoshop 每个版本都会更新大量的功能集，不断扩展它的用例范畴，它的用户界面变得越来越灵活也越来越复杂。与 Photoshop 不同，Figma 是专门为 UI 设计而构建的，它的功能集就显得非常精简，无需太多培训即让用户可充分利用好它简约的界面，开始设计。如何用好这一法则：当无法清晰预测目标受众的需求时，让产品保持尽可能大的灵活性。但是，不要忘记为用户提供智能的初始设置，并且要提供开箱即用的解决方案。每个新功能都会增加产品的复杂性，所以需要确定各个功能的优先级，并缩小范围。专注于关键产品，围绕核心的价值点。每个新版本都尝试改进现有功能集，而不仅仅是添加新功能。 限制相同需求的替代方案的数量，设计更具规范性的用户界面。2、美即好用效应用户倾向于认为美观的设计更实用。我们倾向于相信看起来更好的产品用起来也更好 ——即使它们实际上并没有那么好用。1995 年，在测试 ATM 机的 UI 的时候，测试了它的 26 种变体，测试过程中要求 252 名研究参与者对每种设计的易用性和美感吸引力进行评分。研究人员 Masaaki Kurosu 和 Kaori Kashimura 发现，用户对于 UI 的易用性的评估，会强烈地受到界面的美感的影响。在下面的案例当中，GAP网站的页面报错给予的信息非常有用，它不会使用用户不熟悉的错误代码（如 404 ）并列出错误发生的可能原因。此外，该页面使用明确的号召性用语，并且提供联系方式。与平淡无奇的 Gap 页面相反，皮克斯的 404 页面专注于在这种压力大的情况下，用有趣的插画和文案唤起用户积极的情绪。他们使用更丰富的视觉和俏皮的角色，试图让你会心一笑。如何用好这一法则：渴望创造美学设计。用户更有可能想要尝试视觉上吸引人的产品，并且他们对小问题更有耐心。因此，这是值得投入时间和金钱的。美在旁观者的眼中。对您来说可能在美学上令人愉悦的东西对您的目标受众来说可能并不相同。投资于研究和测试。在您的设计中，请参考吸引力偏差、黄金比例、计数偏差和三分法则等原则来影响美学。3、容错原则好的设计应该帮助用户避免错误，并在错误发生时，帮助用户最大限度地减少错误所造成的负面影响。我们是人类，因此，我们会犯各种错误：当用户采取行动并得到意想不到的结果时，比如拼写错误，又比如由于知识空白或对情况的错误评估，或者由于注意力不集中，记忆力下降。亚马逊搜索可帮助购物者获得他们想要的结果，即使输入错误。当检测到拼写错误时，系统将显示更正的搜索词的结果。Gmail 也会利用许多方法使其界面具有更强的纠错能力。发送电子邮件时，应用程序会制造一个微小的刻意延迟，让用户有机会在改变主意时取消它。或者当邮件正文中提到「附件」的情况下，发送时会提醒用户邮件中需要包含附件，以防用户忘记。如何用好这一法则：避免错误的最佳方法，是创建具有良好可供性的设计，模拟出事物的物理特性，引导用户正确使用和交互。提供可逆性的功能，建立「安全网」—— 借助可逆的操作防止灾难性错误。确保用户在执行重要且不可逆转的操作之前，进行确认。关于可供性设计：那些很熟悉但又叫不出名字的设计法则：功能可供性Affordance 这个设计概念至今没有统一的中文译法。阅读文章 > 4、稀缺性原则当产品或服务供不应求或者经常处于稀缺状态时，它们就会变得更受欢迎。品牌经常会使用稀缺性原则来说服人们购买产品，很少有原则能比稀缺更有效地促使人类采取行动。许多生理现象促成了这种原理发挥效应。害怕错过（FOMO）——担心自己错过可以使自己的生活更美好的信息、事件、经历或感觉。甚至有整个类别的产品都被称为「韦伯伦商品」 ——这种商品的需求随着价格的上涨而增加，因为它具有独特的性质，可以作为身份象征，因而具有极强的吸引力。在大多数旅行预订网站（例如KAYAK Booking）上，列表中都会显示一个注释，即仅以特定价格留下几个座位/房间/物品。新的HYT手表限量 5 块，是经典的「韦伯伦商品」，由于独特的设计和体验，它可能以 2-3 倍的成本价成交，甚至会出现更高的溢价。如何用好这一法则：根据产品或服务的性质，可以采用各种策略来制造稀缺性：-向「特权」用户组提供的独家信息-向「特权」用户组的相对更多访问权限-突出产品或者项目数量有限-出现产品供应突然下降的局面-向客户传达了高要求的明确指示如果没有仔细考虑后果，促使用户迅速采取行动，可能会给企业带来巨大的短期收益，但其中许多策略通常被认为是「黑暗的用户体验」，从长远来看可能会损害品牌忠诚度。5、信噪比原则在用户界面或通讯过程中，相关信息与不相关信息的比率，就是信噪比。人机交互在本质上是信息的传输和接收，任何过度设计的样式或信息，以低效或不恰当的方式呈现，都会降低信号质量，换句话说，就是增加设计的「噪声」。高信噪比（高有效信息，低噪音）是任何 UX 设计师理应追求的关键目标。干扰有效信息传递的原因有很多：缺乏层次结构、信息过载、高度风格化的排版和图表、不清晰的图标和不适当的视觉效果等。下面的范例当中，我们看到了 3 个具有不同噪声比的电商 APP 的主页示例。Aliexpress 应用程序设法显示大量信息、链接和号召性用语。不幸的是，这与明亮的用户界面和华丽的背景相结合会导致过多的噪音，几乎不可能专注于特定的事情。如何用好这一法则：确定关键用户的目标以及用户做出决策所需的基本信息，保持设计足够简单。平衡设计中每个元素的大小、对比度和视觉重量。使用文字排版、颜色建立清晰的视觉层次结构，并将重点放在应该传达给用户的信息上。6、80/20 原则80/20原则也被称为帕累托原理，它反映出任何大型系统中的大部分影响都是由低百分比的变量引起的，这个比例不一定是精准的 80:20 。你可以看到这个原则几乎无处不在。尽管 80/20 原则在经济学中经常使用，这一概念在 UI 设计、质量控制和工程当中有广泛的应用。这里有些例子：80% 的产品只会被用到 20% 的功能80% 的错误是由 20% 的组件引起的公司 80% 的收入来自 20% 的客户80% 的进步来自 20% 的关键努力80% 的想法将来自 20% 的人iOS 计算器应用程序充分利用了 80/20 规则。在默认纵向模式下，界面所呈现的功能，是大部分用户会用到的计算器功能。不常用的功能在横向模式下才会呈现出来。如何用好这一法则：利用数据分析来优化您的设计工作。比如找到对应公司收入的 80% 的 20% 的客户，他们在 80% 的时间内所使用的 20% 的功能，从这些关键性的部分入手，而不是让团队漫无目标地将大部分时间平摊到所有功能在研究、设计和测试上。始终关注设计研究测试的投资回报比，用户消耗时间和结果之间的回报比例。关于 80/20 原则，这篇文章有更加深入的探讨：资深设计师是怎样用「帕累托原则」做设计决策的？编者按：这篇文章出自设计和用户体验设计机构 NNGroup，作者为 Evan Sunwall，主要探讨的是「帕累托原则」也就是我们所熟悉的 80/20 原则。阅读文章 > 7、MAYA 原则当产品的设计足够的前卫新颖，但是仍然在用户的接受范畴以内，它最有可能获得商业的成功。在新鲜的、独特的设计灵感刺激下，所诞生的原创性的设计在各种层面上都是被重视的。话虽如此，经验研究都表明一件事情，人们更喜欢熟悉的体验。熟悉感给我们一种控制感和安全感。「如果解决方案所呈现的和用户习惯、日常规范有太大的偏离，普罗大众的品味不一定真的准备好接受这种超越他们认知的解决方案。」Raymond Loewy — 著名工业设计师，可口可乐瓶、壳牌石油标志等设计者谷歌眼镜是一个大胆的尝试，它真实地将世界推向未来。它的营销活动在很多层面上有炒作的因素，同时也引起了相当多的批评，很多人对其价格、安全性和隐私性表示担忧。同时，谷歌眼镜似乎缺乏「酷」的因素。《财富》杂志将诺基亚 7280 列为 2004 年最好的产品之一。虽然它的设计受到了很多人的称赞，甚至有一些狂热的追随者，但总体来说销量并不理想。如何用好这一法则：如果你必须解释你的设计，或者它需要大量的培训和「帮助」文档来支撑，那么你的设计过于激进或过于复杂。尽量创造几乎不需要进行解释的设计。了解你的目标受众的能力范畴、学习速度和成长能力。逐步推进设计，使用渐进式方法，让产品达到最终愿景。8、沉浸式体验当用户不再有意识地关注「真实」世界，并且完全沉浸在创造出的体验中，这时的精神集中状态就是「沉浸」。当我们玩游戏、从事迷人的任务、跳舞时，可能会体验到这种忘我的沉浸感。这种伴随着愉悦感的感知，通常表现为时间感（感觉时间过的很快）的改变或自我意识的丧失。这些元素有时候可以彼此独立出现，但只有组合起来才能构成所谓的「心流」状态。Pokemon Go 是一款 在 2019 年席卷全球的游戏，它是通过游戏化、讲故事并且结合 AR 创造身临其境体验，它是「沉浸感」的最佳范例之一，在游戏过程中，玩家会完全沉浸在抓住「宝可梦」而完全忘我。在游戏上线 200 天内，玩家在这款游戏上的花销破纪录地达到了十亿美元。IKEA Place 让用户可以在自己家啊中虚拟放置真实比例的 3D 模型，结合最新的 AR 技术和宜家的智能家居解决方案，你可以以前所未有的方式体验宜家的产品。如何用好这一法则：深入构建环境设计，最大限度地减少让用户分心的东西，提升控制感，并提供有效的反馈。为用户提供明确定义的目标，和可以克服的挑战。利用 VR/AR/MR/XR 在虚拟世界中放置内容并促进交互，消除内容与其用户之间的抽象感，建立直接的联接。9、GIGO 原则GIGO 原则是 「Garbage in, garbage out」的缩写，直译就是「垃圾进，垃圾出」，这是一个计算机领域的术语，意识是系统输出的质量，取决于系统输入的质量。该原则出现的时间早于现代计算机诞生，但是现代计算机和产品设计都是遵循这一原则的。计算机遵循着严格的逻辑运行，良好的输入信息，是良好的输出内容的先决条件，而错误的输入通常会导致错误的输出结果。「垃圾」的类型多种多样，可能是完全不沾边的输入内容，比如在护照栏填上了电话号码，也可能是手滑出错，比如输入名字的时候拼写错误。在 Airbnb 上发布居住体验的内容的时候，系统提供了一套严格但有有详细指导的引导流程，它确实有助于改进平台上的内容并增加内容的一致性。对图像质量要求，也有字数限制和预览，这些都是帮助用户创建最具吸引力的内容的机制中的一小部分。如何用好这一法则：设计良好的可供性，借助约束以避免错误。启用预览、确认和自动更正等机制，最大程度地减少内容质量问题。在进行用户研究或访谈时，选择正确的样本。问正确的问题。确保你的问题没有偏见、混淆或预设和假设。10、成本效益原则只有当产出等于或大于成本的时候，某件事情才值得做。用户的时间、精力、投入和其他资源构成基础的成本，用户会拿这个成本，来和服务、产品以及所获得的潜在收益进行比较。产品团队经常使用成本收益原则来评估与新功能的财务回报，并确定功能的优先级。与许多其他初创公司一样， App Nuri 为用户提供一组金钱奖励。而其他投资类产品，如Robinhood，则会赠送股票给用户，以吸引用户在他们那里开户。优先级矩阵可帮助团队审视每个功能带来的价值，以及交付它所需的工作量。如何用好这一法则：专注于简化流程，并最大限度地减少平台中每个任务的工作量。不要将让利益相关者或设计师觉得兴奋的功能误认是为对客户有价值的功能。焦点小组和可用性测试将帮助你找出真正有价值的东西。如果您想了解更多关于各种设计原则的信息，请查看 William Lidwell、Kritina Holden 和 Jill Butler 的《通用设计原则》。更多出自设计师 Taras Bakusevych 的文章：一个UI按钮的自我修养编者按：一个合格的 UI 按钮到底需要具备什么样的素质？阅读文章 > 资深UI设计师搞定输入框和表单的20个秘诀编者按：这篇文章来自资深设计师 Taras Bakusevych，长期从事金融和企业类数字产品的设计，在表单设计领域造诣精深。阅读文章 > 资深 UI 设计师搞定按钮和选框的14个秘诀编者按：这篇文章来自资深设计师 Taras Bakusevych，他长期从事金融和企业类数字产品的设计，在表单和控件设计领域造诣精深。阅读文章 > 顶部导航 vs 侧边导航，到底哪种更好用？桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题，如今这也是 B 端设计中绕不开的一个设计问题。阅读文章 > 设计师必知的20个幻灯片实用设计技巧很多时候，设计师需要在公开场合借用幻灯片演示设计作品，或者给客户展示最新的设计方案，又或者是需要在文章当中，展示作品，选取配图。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/10-design-principles-needed
落霞与孤鹜
表哥
飞翔的企鹅
