交互设计学习心得

一、了解交互设计

交互设计是定义、设计人造系统行为的一种设计，就是指设计师对产品和它的使用者之间的互动机制进行分析、预测、定义、规划、描述和探索的过程。交互设计关注以人为本的用户需求，以产品可用性和用户体验为目标。

交互设计的工作着眼于用户界面信息架构、业务逻辑流程设计，需要定义信息架构，梳理结构流程、功能拓扑，明确页面跳转逻辑，补充产品功能的细节定义，简化操作流程等等，最后输出相关的设计稿，包括线框图、流程图、原型、交互动效和交互说明文档等。

二、设计工具

1.Sketch

简单易用，上手难度低。也是近几年最流行的 UI 设计软件。线框图和视觉稿样样精通，同时还可以配合移动端的 App 提前预览设计稿。但是只有苹果电脑能使用。

1.1. Sketch 是一款适用于所有设计的矢量绘图应用。目前在网页，APP以及图标设计等应用广泛。

1.2. Sketch容易理解并上手简单。文字默认的间距非常舒服，排版功能强大，对于绝大多数的界面设计，Sketch 都能替代Adobe Photoshop，Illustrator。

1.3. Sketch插件库非常丰富，能够顺利帮助我们高效快速的完成工作。

2.Figma

Free, Online UI Design Tool & Software For Teams | Figma

 

2.1.Figma是新兴的一款设计工作，是一款类似 Sketch 或 XD 的 UI 设计工具，figma可以基于 web操作，不限制系统，无论是 macOS、windows都可以用。简言之也只要有电脑，有浏览器，有网就能开、就能用，软件都不用下，省内存。

2.2.Figma 不怎么消耗本地资源，所以可以节省很多资源用来做其他的工作。

2.3.团队协作非常方便，只需要分享一个链接，就可以同时观看，而且是实时的，可以进行监视。

2.4.Figma有手机端，也是实时预览，相当方便。

3.MasterGO-蓝湖旗下开发的一款软件

产品原型交互设计平台,在线UI/UX界面设计软件工具-Mastergo官网

 

3.1. 有着Figma的大部分优点，同样也是一款不用下载、不受设备和平台的限制的设计工具，支持多人在线协同设计，只要有电脑，有网就可以工作的工具，只需要一个链接解决原型、设计、交付全流程;实时共享整个项目，提高工作效率。

3.2. 完全中文版，这是要好于Figma的一个亮点，对于我这种英语渣渣来说真的很友好。

4.即时设计（被誉为国内版Figma）

即时设计 - 可实时协作的专业 UI 设计工具 (js.design)

 

4.1.同样有着figma和MasterGo的优点，也是国内服务器部署，可保证稳定访问。

4.2.功能界面、帮助文档、更新介绍，完美中文支持，保证快速了解上手。

4.3.即时设计同时支持了 XD 文件的导入、Sketch 文件的导入和导出，而且还原度较高，均可保留图层可编辑性。

5.Axure

Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool

是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图原型和规格说明文档 作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理  。

6. Xmind

Xmind (2023) & 移动版 | XMind 8 Pro | Xmind思维导图中文官网

Xmind 的优点就是大、全。主流平台都支持，所以不用担心和其他用户共享文件的问题，同时支持各式各类的图形模式。可以说 Xmind 不仅仅能画脑图，各种商业用图都能够画。最重要的是，免费，使用学习成本低。入门首选。

三、设计流程

1、产品需求和用户研究

收集目标用户的产品使用习惯、需求、情感和心理等等，形成一份完整的分析报告。

2、架构设计

根据客户需求出一个整体的设计架构，包括页面风格、界面交互，确定过后，即可开始设计原型图。

3、设计原型图

这个阶段就是结合之前所有的需求和建议，用原型图的形式将页面呈现出来。完成原型图后也需要提交审核，有问题需要再次进行修改或微调。

4、对接开发

定稿原型图提交开发，需要对接一些设计上的细节问题，并说明界面交互的需求。没问题就可以上线。

四、总结

真正做好设计绝非一朝一夕之事，更多的来源于日常设计中的刻意练习，对观点的思考，对项目的总结。