（续上回）

真的没想到写了8个章节，想参考之前文章的，我把链接给到这里。 

【giszz笔记】产品设计标准流程【7】-CSDN博客

【giszz笔记】产品设计标准流程【6】-CSDN博客

【giszz笔记】产品设计标准流程【5】-CSDN博客

【giszz笔记】产品设计标准流程【4】-CSDN博客

【giszz笔记】产品设计标准流程【3】-CSDN博客

【giszz笔记】产品设计标准流程【2】-CSDN博客

【giszz笔记】产品设计标准流程【1】-CSDN博客

八、交互设计

 1.交互设计的调研

做设计之前，都要调研，不管是对内，还是对外。

交互实际是一个心理学，设计师不但要有理论基础，更需要具备优秀的同理心，能够共情，细腻的体会到不同用户的更舒服和认可的交互方式。

此时要注意的事，如果你有一个强大的金主爸爸，那么请你多去摸摸TA的喜好，或者他所代表的用户群体的操作习惯，不要自以为是，要调研，去共情，不是去给客户上课。如果客户喜欢“一键”达成某个操作，就给他设计成“一键”，或者起码，你要说成这样（开玩笑），。

2.什么是交互设计

交互设计( lnteraction Design )，交互设计是多个对象间的相互影响，如果人操作一台计算机，计算机可以根据人的操作做出提示或反馈，那么这台计算机就是可交互的，人和计算机的交流过程就是交互。这种交互、可交互的概念也适用于人与服务性组织。

交互设计不是单纯的做UI，事实上交互设计、界面设计和视觉传达在系统中都不是独立存在的。交互设计要考虑系统的信息架构和交互流程，是界面设计的基础，而界面设计又需要交互设计和视觉传达的支撑，也是交互设计的最终表现形式，是用户的接入点。视觉传达也是交互设计的实现途径之一，它包括图标、界面等的表现形式，以及用户接触到APP的所有可见方式。

在本系列文章中，交互设计、用户体验设计，是进行区分的。用户体验实际上包括了交互设计，简单的理解，视觉如果是静态的，交互如果是动态的，那么体验就是动静结合的统一感受。客户身心是否舒服，产品的服务目标达到的程度。ISO 9241-210的标准，将用户体验定义为“人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应"。可见一斑。

3.有哪些交互需要考虑

不管是哪种交互，都要以用户为中心。也就是以用户为中心的设计UCD（User Centerd Design），以用户体验为设计决策的中心，强调用户优先的设计模式。

以用户为中心，有一个误区需要指出来，就是产品经理经常认为自己就是用户的代言人。不顾自己和用户的年龄、人生体验的差异。所以新手设计的东西，大部分都是以自己的喜好去带入，不光是代入，甚至还有情绪，这是一定要克服的。千人千面，大家别看长的大同小异，实际内心还是千奇百怪的。

交互的可能情形有如下几种——

• 人机界面UI（User Interface）：人机界面是使用户和系统之间，以人类可以接受的形式进行交互的信息交互媒介。分为硬件和软件两部分。与人类进行信息交互的机器界面，也是人机交互的一部分。其实，我们每天敲打的键盘，字母布局，就是一个典型的交互设计案例，也是一个反人类的失败案例，现在字母的布局，是非常不合理且不符合单词字母出现频率的“大数据”分析结果的。有人做过分析，这些字母的位置，任何一种调换，都会提高打字效率。9宫格打字法，也是一个人机界面UI，而且非常经典和有趣。
• 用户图形界面GUI（Graphical User Interface）：用户图形界面指图形方式显示的，在视觉上更易接受的计算机操作用户界面，它改进了早期计算机的命令行界面，用户可以更好地从视觉上接受信息。大家可能不了解当时“视窗95”这个词，出现以后对计算机界的振动。实际上图形界面很早就有了，只是作为辅助，从来没有如视窗windows系统这样的坚决。
• 命令行界面CLI（Command-line Interface）：命令行界面是指可在用户提示符下键入可执行指令的界面，它通常不支持鼠标，用户他通过键盘输入指令，计算机接收到指令之后，它予以执行。命令行真是挺反人类的，很多参数设计的很奇葩，程序猿们还必须要接受，并且曾经大家以谁能记住更多的命令不查HELP为光荣。现在AI大行其道，以后CLI将大概率变成自然语言沟通模式。
• GUI和CLI是操作电脑系统的两种方式，GUI更直观，但占用计算机资源较多，CLI不太直观，但有些情况下操作更加迅速，例如操作软件时使用的快捷键，就可以说是一种CLI，在软件设计中，常常二者同时存在。
• 网页用户界面WUI（Web User Interface)：网页用户界面指网页风格的用户界面，它可以理解为网页风格用户界面设计。（计算机界有时将无知用户的无知行为造成的故障，把它称作为WUI，我们叫Witless User lgnorance.）这个是大部分产品经理都熟悉的，网页的交互依靠的是各种组件。
• 手持设备用户界面HUI（Handset User Interface）：针对移动终端的界面交互设计——手持设备用户界面交互设计，逐渐发展成为完整的交互设计分支。
• 多通道用户界面MUI（Multimodal User Interface）：多通道用户界面是能够适应目前和未来的计算机系统要求，它可以满足时变媒体，三维操作、非精确及隐含的人机交互。可以综合采用视线、语音、手势等多种交互方式，整合这些渠道捕捉用户的真实意图。
• 自然用户界面NUI（Natural User Interface）：“自然"是相对图形用户界面GUl而言，GUI它是要求用户必须先学习软件开发者，它预先设置好的一些操作。但NUI可以使用户以最自然的语音等方式进行系统的操控，使用NUI的设备不需要键盘或鼠标。

4.深入理解交互设计的必要性

交互设计作为设计的分支，要遵从设计伦理。交互设计实现技术对人的可用、易用，带来愉悦，更强调理解人，理解人如何体验事物。不止局限于人和产品、界面，比如当你去博物馆时，人与展品、标识的互动也可以说是交互。

从上图可以看到，在技术发展的早期，人们是无暇顾及更多人的体验的，因为重点要考虑的是制造的难度和成本。存储用的是磁带，打孔，省点资源更实惠，用户也都是专业人士，要求学习和掌握晦涩的使用方法，那时谁敢矫情。随着商业的发展，技术的进步，开始关注用户的心智，更多的设计和交互理论诞生，用户体验也自然越来越好。

一切都是在发展，矛盾无处不在，比如文章开头提到的“一键”，这个著名的交互需求，实际是——用户对产品简单易用的美好追求，和流程复杂度以及设计能力的矛盾。这也是用户的心理，是现阶段产品设计的主要矛盾。所以市场人员和产品经理，多学会说这个词，汇报时往往能抓住用户的眼球。

交互设计带来用户的愉悦，甚至反向促进技术的进步。

著名的“摇一摇”，就是硬件、软件、交互、商业模式融合的成功案例。

5.定义你的设计系统

设计系统，简单理解包括设计原则、设计语言、组件和模式。（后面有空，专门来写交互设计，先不展开。）

不管你是否意识到，每个人，每个组织，都有自己的设计系统。比如登录页面，你一闭眼是不是就想到原型图了。也许不如雅虎那么完备，早在2006年，雅虎就提出了完整的设计系统。定义了自己的组件，交互方式，设计原则。设计和技术实现能力，进行了完整的匹配。迅速提升设计人员的工作效率，成为标准化、工业化的输出产品设计文档的样板。

我的建议是每个人都该有自己交互设计的三板斧，一个公司更应该有自己的交互设计标准和知识库。这提现你们公司的文化，理念，对于保持产品的调性，有重要的作用。

这里个人比较推崇原子化设计方式。

原子 Atoms：为页面构成的基本元素。例如文字、颜色、图标等。

分子 Molecules：由原子构成的简单 UI 组件。例如，一个标签，搜索框，图标共同打造了一个搜索框组件。

组织 Organisms：由原子及分子组成的相对复杂的 UI 组织，例如商品列表、内容卡片等 。

模版 Templates：将 UI 内容进行布局，形成基础的页面结构，也可以称之为原型。

页面 Pages：将实际内容（图片、文字等）进行填充，从而形成高保真页面。

按照这个逻辑来构思，进一步对组件的合作、交互的动作框架进行分析，就是一套标准的交互设计成果了。

此外，比较建议的是，基于二八原则来说，大部分人遇到的都是设计表单的场景，应该对表单的交互有一套自己的专门的模式。

九、用户体验优化

用户体验是用户在使用一个产品或系统过程中的全部感受，包括情感、信仰、喜好认知印象、生理和心理反应、行为和成就等各个方面，是一个侧重用户感受的概括型词语。

进行到这里，我们已经获得了一套基本完备的产品设计文档了，并且，恭喜你，我们还通过内部和外部的评审，再苛刻的用户，我们也能搞定，不是吗。

此时，最好能从头到尾，再过一遍整个设计过程，对产品的细节，再进行一些推敲，一是防微杜渐，看看有没有隐藏的坑，漏掉的信息，二是回过头来，优化一些整体的用户体验。

也许你很无奈，项目的工期不允许你这么做，或者你已经精疲力尽，时间有，但是能量没有了。那好吧，在迭代中，去优化吧，不用担心。

十、前端编码

交给美工和前端同学吧！他们会切图，生成简单的页面，前端同学搭建合理的框架，再加上一些他们所能达到的更友好的控件，注意不要让他们由于能力不足，而随意修改你的设计。

十一、开发！

其实在第十步，前端开发时，或者更早，后端的同学们就在设计接口了。接口也要有评审的过程，往往和数据库同步设计和评审。评审时，建议要求产品也听，一回生，二回熟，产品逐渐也能理解接口的含义，特别是发现表单数据项有错、交互流程中丢失状态或者信息的情况。后端同学的逻辑写起来，往往还是挺快的，定义好里程碑，写好测试用例，准备迎接激动人心的上线过程了。

后续的技术开发标准流程，有机会再梳理和探讨。

本话题暂时完结，感谢您的观看。