/《U一点·料》读书笔记：05交互设计师说话之道 — 2019年5月26日SUN/
大纲
基本 -> 进阶 -> 经验
01 原则与基本类型
* 使设计观点可视化（承载着想法和方案）
方案“可视化”，怎么去和他人用理解成本最低的方式去说明方案
* 减少沟通成本（有效沟通）
* 易于项目追溯（交互稿的版本管理）
* _内容和形式上，易于理解， 利于协同_
原则
1. 易于理解
* 有效清晰地传递出你的思考和方案想法 是交互稿的核心
* 输出文档在搭建和梳理以及表达的形式上要是 易理解的 （对此有多个的切入点）
* 在输出的设计稿中融入需求分析、项目目标拆解等思考过程（说明文字，用更容易理解的交互流程来让阅读者快速理解方案）::- 延迟转账::
2. 利于协同
* 说到协同第一要考虑合作对象是谁？
[image:973E62DA-6931-46B4-972A-FF73A1297210-444-0002765797A67F4E/845FDE4A-1617-4B48-8EFB-5FCBEE3C9665.png]
* 怎么做到让所有人都能理解透彻呢？ 不太可能。 圈出联系紧密的几个角色 -> 产品、设计、开发
* 保证交互稿中的内容可以让多个角色获取到 他们需要的信息 （了解他们需要什么）
基本类型
线框图和原型是在不同设计阶段用到的两种不同的表达手法
1. 线框图（Wireframe）
线框图是设计师或者需求方对于产品的一种快速的、静态的、清晰的表达手段。用于项目前期的讨论和沟通，给项目成员间或者和客户沟通时提供一个大致的概念和讨论方向，以便快速地理解和及时地提出自己的建议。
线框图需要达到以下三个目标：
■ 能界定页面的大致结构和布局；
■ 能清晰表达内容信息的展示位置；
■ 能包含界面的主体交互元素。
线框图一般不会过多地要求细节和华丽度，在内容的真实性上也不会有过高的要求，但必须能表达你的设计思考和方案。主要以黑灰线框和简单的块面及占位符来组成整个线框图。
2. 低保真线框图
手绘在一张纸上呈现简易的界面布局和关键的注释。视觉和前端开发即可开始下个阶段的工作，交互设计师则继续完善方案细节和状态的补充。（并行）常用的画线框图的工具有Balsamiq Mockups，Axure，PPT，Sketch等。
3. 原型（Prototype）
原型比线框图更接近产品最终的形态，它用作对用户进行可用性测试和项目的设计输出。项目早期的原型测试能够及时地发现问题和漏洞，节省后续的开发投入成本。原型是可交互的，并且尽可能接近最终的产品界面的高保真设计稿。也是我们本章常提及的大家普遍的交互输出物。
02 进阶版输出物
将需求方提出的 项目需求 和 已有的数据 加以整理、分析，经过发散的创造性思维创新和严谨的逻辑论证后，得到了逐渐成熟的交互产物。设计师对项目前、中、后三个 阶段全程思考和创新的跟踪与记录 ，并且根据 项目的重要程度（A+、A、B、C层级） 来确定项目交互阶段需要产出的内容范围。
[image:E972E5EB-715C-4125-B303-9CA067C5305B-444-000277EA39E0A6B4/IMG_0051.JPG]
[image:B6E9D757-930A-4A4C-8B70-75A4D6670CA8-444-000277E98D1E1BDE/IMG_0042.JPG]
/一个设计师对于输出物的层次把控和逻辑要求，能体现和大致还原出他的专业与深度/
怎么体现你的专业度？
1. 层层递进的文档逻辑
* 要让人从阅读目录开始就对你的设计推导过程和方案有初步的认识与信任，如何组织输出物里的内容是其中的关键。
* 构建交互输出目录，可以根据项目类型确定组织方式，初步确定架构和页面量多少。1）按修改版本组织：适用重点 单页面型 项目，如网站首页、行业频道等。2）按产品层级关系组织：适用整体平台类项目 3）按操作流程组织 ：适用于业务流程型项目，如下单付款、会员开通等项目。4）按参与人员组织：适用多个交互设计师共同完成的项目，如项目共建。
2. 元思考
* 在项目接手时，设计方案开始之间，设计师对于这个项目原始的需求分析，对目标用户诉求的理解等思考发散的过程我们称为设计元思考。也可以归纳为做设计方案前必须搞明白的三个问题：
::1）为什么要做这个？（目标）::
::2）这个需求针对的用户群是什么？（用户）::
::3）什么场景下会使用到这个功能？（场景）::
/迷茫的时候回来想想这几个问题/
[image:6FCEC7C2-BF45-4349-A78B-0D1132A6DB5E-444-00027841B5F540C8/4491558919213_.pic.jpg]
* 支撑五导家推导过程的是 大量的设计分析和数据梳理 。我们会运用到竞品分析、眼动测试、问卷调研数据分析等方法，让我们在设计过程中更深入地探清用户的痛点和诉求，让我们能在更好地为用户解决问题的过程中，明确设计在其中发力的关键点。我们将这部分思考的过程放进我们的交互输出文档中，让我们的思考过程从神秘的黑盒变成理性透明的白盒，帮助别人信任我们的设计方案和推导结论，建立良好的合作关系。
[image:B898C12D-1C2C-4535-85AF-2ADDFA9D5375-444-00027870B503F17C/IMG_0054.JPG]
* 信息架构规划图 - 大型网站的初步架构，梳理信息架构图，方便进行后期交互输出。
* 在设计大部分的电子商务网站首页、行业频道或者网站搭建等类型的项目中，经常会用到信息架构规划图的设计思考表达方法，即用::图形化的方式::来描述出产品清晰的信息构架。考验业务理解、目标用户场景设定、产品的全局观把控等能力的要求就越高。
* 对项目全局信息架构有一定深入的了解后，我们会根据信息的优先层次、用户的关键路径和业务逻辑信息来设计我们页面信息的架构规划图。其包含以下两个关键点：
1）界面主体的布局和框架，比如搜索框位置、主体导航框架、产品坑位、页面区块划分等。
2）用户视觉流的规划，比如一个频道页面、页面的重点信息的传达、用户对于信息认知的过程。
*任务流程图和页面流程图*
* 流程图是将一些具有特定逻辑关系的步骤和过程，用图形化的形式表达，让其他人能快速理解。任务流程图和页面流程图是两种不同用途的表达过程与步骤的形式。
* 任务流程图：常常以一个用户角色完成项目中从开始到结束的所有任务的流程图。其中包括各种用户角色之间，用户与产品界面之间，前端界面和后端数据之间在任务流程中的过程和关系的表达。
原型和状态说明
（1）原型方案
这是整个交互输出物的关键内容，可以包含的内容有页面交互方案、区块交互方案、页面响应方案等。以及对页面每个元素的状态的说明和动效说明。设计师可以从整体到局部、从常态到动态来制作交互原型。
原型可以分为页面静态和动效保真两种形式。大部分的项目均采用页面静态的方式完成交互输出，创新性或者需要向上级汇报的项目，我们可以使用以动效保真形式的demo展示。目前使用率比较高的Axure和Sketch都能满足这两种形式的需求。
::（2）状态注释::
* 思考全面 -> 注释是否清晰明了、是否完整周全、是否可行？？？
* 完整状态注释包括：
■ 默认/常态：默认的一些信息和选择是否真正地满足了用户大部分的需求。一个精心设计的产品界面默认状态是产品良好转化的开端。就像好的产品不需要说明书一样，一切开始得就是如此顺其自然。
■ 用户交互状态：包括按钮hover状态、下拉形式、点击跳转形式等。
■ 信息内容值：包括常态值、极限值、范围值、错误值、零信息值等。
■ 交互反馈：如点击操作反馈、手势反馈、hover反馈、错误反馈、无输入反馈、智能反馈、成功提示、提示说明层级等。
单页面的状态注释一般建议跟随在交互方案的旁边，就近输出，浏览方案时能比较清晰地对比查看。(注意版本记录）
03 好的经验与习惯
- 给文档命名：项目名称-版本号-设计师-日期
- 栅格，保证交互稿中的字号、间距尽量符合视觉要求，以免给视觉造成不必要的困扰。
一屏展示：
1）页面的重点内容是否在第一屏有展示？
2）你的页面能否让用户感知到下面的内容更精彩？
1）使用设备的分辨率；
2）浏览器类型和版本；
3）使用设备的系统：PC还是Mac。
一屏线高度=分辨率高度-浏览器高度-系统top bar高度（OS）
举个简单例子：统计数据显示你的产品目标用户大部分使用的是Mac Pro，分辨率是1680×1020。
浏览器是chrome。一屏线高度：1020-24（top bar高）-94（浏览器高）=902px
- 组件和控件
略
原型控件库是一个收集和积累的过程。建议你按照自己所需和所负责的产品线打造一套属于自己的交互控件库。步骤很简单：
把常用的控件（行动按钮、下拉菜单、tab等）、图标icon、注释标记等制作成Axure（.rplib文件）或者收集到网络上分享出的优质控件库，加载到你的部件库里（widgets），在制作交互原型时，直接调用所需控件即可，以提升原型输出的效率。
（1）视觉化
::使用黑白灰来表达页面层级和逻辑::。
■如果在设计过程中，内容尚未确定，建议使用占位符代替；
■如果需要后续视觉深入，建议在旁边标注或者用文字的形式描述，会更加贴切；
■如果是一些常用控件，建议你就趁当下建立自己的控件库，一劳永逸。
04 最后
输出物代表你说话
网友评论