UI知识体系及设计原则

UI基本名词

UI：即User Interface，用户界面。

UI设计不是一个单独的个体，它是指对设备的人机交互，操作逻辑，界面视觉的整体设计。包括图形界面设计GUI(Graphical User Interface)，交互体验设计ID(Iteraction Design)和用户研究设计UE(User Experience).

GUI(Graphical User Interface)：对图形用户界面的视觉设计，用户通过界面像手机发出指令并与之产生交互行为，手机接收到指令产生相应的反馈。

UE/UX(User Experience)：用户体验，用户在使用产品过程中的个人主观感受，UE设计关注用户在使用前，使用过程中，使用后的整体感受，包括用户行为，情感，成就等各个方面，其目的是保证用户对产品的使用体验有正确的预期，了解他们真实的期望和目的，并以此作为产品核心功能设计进行修正，保证其与人机界面之间的协调工作。

ID(Iteraction Design)：交互设计，考虑人，环境与设备的关系和行为，以及传达这种行为的元素设计。交互设计，为了让产品更快易用和高效，让用户在使用产品时感到舒适。

UCD(User Center Design)：用户为中心设计，是一种设计思维模式，强调产品设计过程中，从用户的角度出发来进行设计，让用户成为第一。

UI知识体系

基础美学 ★★☆☆☆

素描、速写、色彩

平面设计  ★★★★☆

布局设计，字体设计，图标设计

设计规范  ★★★★★

界面尺寸，尺寸，系统字体，ui控件，切片输出，标注适配，手势交互，动效

交互设计 ★★★☆☆

产品结构，交互逻辑，用户研究

动效设计 ★★★☆☆

动画脚本，动画运动理论

设计心理学  ★★☆☆☆

设计工具:PS/Sketch/AI/Axure/Ae

辅助工具:ps play/ mark man/ cutter man

UI设计原则

1、清晰

1）内容展示清晰，重要操作摆放位置方便用户操作

2）可带来损害性的操作使用鲜艳醒目的颜色提醒用户，层级之间路径是否被用户感知

3）清晰的界面，让用户看上去一目了然

2、一致性

1）保持界面风格的一致性、结构清晰明朗

2）布局一致，操作流程一致，色调一致，视觉风格一致，控件尺寸一致

3）同样的图标表意相同，不同位置执行同样的操作时使用同样的反馈。符合用户预期

3、直接操作

1）支持多点触摸的界面，用户无需进入应用中就可以在手机主屏幕使用3d touch长按进行超级的操作

2）可通过捏合操作直接放大缩小图片或文本内容，通过上下滑动屏幕浏览网页内容

3）通过拖拽屏幕将一个内容移动至另一个位置上，晃动手机可撤销输入的文本内容

4、及时反馈

1）界面提醒功能，让用户了解反馈信息

2）点击列表或控件时会临时高亮，并在操作过程中持续一段时间，以展示控件被执行的过程

5、美学

1）颜色搭配和谐，图标设计精致

2）设计语言一致，布局结构清晰，视图尺寸舒适，整体视觉规范统一

3）界面质感符合产品气质。设计风格符合用户定位

APP开发过程

App团队成员：产品经理，用户研究，交互设计，ui设计，程序开发人员，测试以及运营团队

完整的开发过程

1、产品经理

采集需求构想开发产品，包括产品功能需求，产品设计需求，了解用户需求，项目期望完成时间和开发预算等，最终输出粗略的原型图。

2、交互设计

产品定位和前期需求确定，交互设计师深入产品原型图，对需求进行修订和完善，定义信息架构和优化操作流程。直接影响产品的业务目标和转化率。

组织页面元素，制作高保真原型图，参与审评，让产品，视觉，开发和测试直观的看到产品的雏形。对原型进行修正改进，做简单的用户测试继续挖掘情感需求。

3、用户研究

明确用户需求点，分析用户行为习惯和痛点，建立用户行为模型，为产品的使用及市场推广活动提供策略支持，帮助设计师制定产品设计方向。

建立产品用户体验监控指标，跟踪和监督用户满意度提升，根据调研结果，提出合理的产品改进或优化建议。

4、视觉设计

交互原型图，页面逻辑是否顺畅(是否和ios规范有冲突)、信息的重点(用户最关心什么)、用户人群，视觉风格和主色调(电商类用暖色系，社交类用冷色系)、布局是否合理(首屏是否可以容下足够的关键信息)、设计语言使用(线性图标还是面形图标)、页面情感化设计(空状态页面如何引导用户)

ui设计师制定设计规范，将视觉稿进行适配，标注，切片交付给开发人员，待程序发测试包后还要进行视觉校验和界面还原

5、程序开发

按照用户需求确定程序功能，并进行模块化设计，按照产品经理分工完成程序编写任务。

6、测试

ui设计师与开发人员密切沟通，宣讲视觉规范，协助视觉还原

7、运营

核心目的让产品占据市场和用户，通过各种推广渠道让产品的装机量，活跃用户数和市场占有率等数据获得提升。