产品设计的一些方法
在交互设计中比较常用的一些设计方法总结归纳，阐述如何将交互设计原则应用到产品设计当中，保证设计的合理性。
# 产品设计常用工具
前言
企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
#自然
在行为的执行中，利用行为分析、人工智能、传感器、元数据等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。
在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实的产品体验。
#确定
保持克制： 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。
面向对象的方法： 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版。
模块化设计： 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。
一、亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
#纵向间距关系
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是『基础间距』。
增加元素示例
通过增加『分割线』来拉开层次。
# 横向间距关系
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
在一个组件内部，元素的横向间距也应该有所不同。
二、对齐
正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
# 文案类对齐
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
# 表单类对齐
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
# 数字类对齐
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
三、对比
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
# 主次关系对比
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。突出的方法，不局限于强化重点项，也可以是弱化其他项。
在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
『通过』和『驳回』都使用次按钮，系统保持中立。
# 总分关系对比
通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
# 状态关系对比
通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
常见类型有『静态对比』、『动态对比』。静态对比示例
用不同颜色点，来表明不同状态。
动态对比示例
鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。
四、重复
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
# 重复元素
重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
线条重复
设计要素重复
文案格式重复
五、直截了当
『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
# 页内编辑
单字段行内编辑
当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。单击编辑示例
状态一：普通的浏览模式，不区分可编辑行和不可编辑行；
状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；
状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
文字链/图标编辑示例
状态一：在可编辑行附近出现文字链/图标；
状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。
多字段行内编辑
在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。
编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。
# 利用拖放
拖放列表
只能限制在一个维度（上/下或者左/右）进行拖放。
状态一：鼠标悬停该行时，出现可移动的『图标』；
状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；
状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。
拖放图片/文件
状态一：鼠标悬停该行时，出现可移动的『图标』；
状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；
状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。
六、足不出户
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
变化盲视（Change Blindness） ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
心流（Flow） ：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
# 覆盖层
二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤销』即可。
用户点击『删除』后，直接操作；出现 Message 告知用户操作成功，并提供用户『撤销』的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再『撤销』。
推荐示例
特例：在执行某些无法『撤销』的操作时，可以点击『删除』后，出现 Popconfirm 进行二次确认，在当前页面完成任务。
不推荐示例
滥用 Modal 进行二次确认，就像『狼来了』一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。
详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。
使用『悬停』激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层。
输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
鼠标『点击』图标触发；鼠标『点击』悬浮层以外的其他区块后，直接保存输入结果并退出。
# 嵌入层
列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
# 流程处理
长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。
渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
七、简化交互
如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
距离越长，所用时间越长；目标越大，所用时间越短。
# 实时可见工具
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
实时可见工具示例 --摘自知乎
状态一：在文案中出现一个相对明显的点击区域；
状态二：鼠标悬停时，鼠标『指针』变为『手型』，底色发生变化，邀请用户点击。
状态三：鼠标点击后，和未点击前有明显的区分。
# 悬停即现工具
如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
鼠标悬停时，出现操作项。
# 开关显示工具
如果某些操作只需要在特定模式时显示，可以通过开关来实现。
用户点击『修改』后，Table 中『文本』变成『输入框』，开启编辑功能。
# 可视区域 ≠ 可点击区域
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
当悬浮在 ID 所在的文字链单元格时，鼠标『指针』随即变为『手型』，单击即可跳转。
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
鼠标移入按钮附近，即可激活 Hover 状态。
八、提供邀请
很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
# 静态邀请
指通过可视化技术在页面上提供引导交互的邀请。
引导操作邀请：
一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
白板式邀请：
文本邀请
未完成邀请
漫游探索邀请：
是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。
在用户首次登录时出现少量『探索点』，当用户点击『我知道了』，能快速切换到下一个探索点。
# 动态邀请
指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。
悬停邀请：
在鼠标悬停期间提供邀请。
鼠标『悬停』时，出现『选择此模板』的按钮。
鼠标『悬停』整个卡片时，可被点击部分变为蓝色的『文字链』。
九、巧用过渡
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
# 在视图变化时保持上下文
滑入与滑出：可以有效构建虚拟空间。
传送带：可极大地扩展虚拟空间。
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
十、即时反应
『即时反应』的重要性体现在交互之后立即给出反馈。
就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
# 查询模式
自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
# 反馈模式
实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。
进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。 常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。
十一、产品级色彩体系
产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
# 品牌色的应用
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。
# 功能色
功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。
# 中性色
产品中性色的定义需要考虑深色背景以及浅色背景的差异。
