。

初识作者

2017年那个冬天的图书馆格外让人兴奋。 

那是我第一次看郗鉴的《界与面》，第一次真正的接触UI设计的相关知识，第一次感觉我要在即将逝去的大学生活中再拼一把，第一次兴奋的没睡着，赶紧加了老师的微博，与他私信...

老师告诉我，兴趣是最好的老师，你喜欢设计吗？愿意坚持下去吗？前端和设计你只能深入其中一个哦，如果能做到坚持设计，那我也愿意收你为学生，你考虑一下，也别着急回复我。

我考虑了一天，我选择了设计。从此，我的人生与设计挂上了钩，以用户为中心的设计，是老师交给我的第一个知识，虽然那时还不太懂，但是工作一年后，我已深刻理解其中的含义。

今天，我就要为大家介绍一下，老师耗费一年半时间书写的书籍，全书分为上下两册，《UI设计师入门必读的书》即为UI全书上册。着重写了初入互联网设计行业，大家要知道的行业知识、设计理论、美术史等。

接下来，我们就开始进入重点吧！

互联网设计师

什么是互联网视觉设计师？

UI设计师是什么？UI是User Interface Desin(即界面设计)的简称。这个可以是手机界面，网站界面，软件界面，智能设备等一切人机交互可视化的媒介。

UI设计师的职责是设计供人机交互使用的图形化用户界面，并使界面更加易用和好用。

图形化界面又称为GUI（Graphic User Interface），它具有易用性（Easy to Use）和友好性（Friendly）。易用性，即界面不需要进行复杂思索即可容易使用；友好性，即对用户友好，容易被理解。

互联网公司的产品团队

互联网公司的产品线是一个流水线。互联网产品团队，指的是整个团队围绕一个产品进行打造，并且以设计、开发、完成该产品为目标。按部门分可以将产品团队划分为管理层、产品部、研发部、市场部。

高层（Leader）——>用研团队（User Research，UR）——>产品经理（Product Manager，PM）——>项目经理（Project Manager）——>交互设计师（User Experience Designer）——>互联网视觉设计师或UI设计师（User Interface Designer）——>前端开发（Research and development Engineer，RD）——>后端工程师或程序架构师（Research and Development Engineer，RD）——>测试工程师（QA），运营或市场拓展（BD）

分工合作：

高层找投资，招合伙人；

用户研究的方式有可用性测试、焦点小组、问卷调查、用户访谈、眼动测试、用户画像、用户反馈和大数据分析；

产品经理负责协调整个团队的进程，工作十分复杂，产出一大部分是在沟通与协调上，纯输出文件有PRD、MRD、原型图等；

交互设计师需要产出交互图；

UI设计师需要优化原型图，视觉设计、切图、标注、项目走查、视觉总结；

前端工程师分为网页前端工程师、iOS软件工程师、安卓软件工程师，他们做的都是界面实现，但是所运用到的编程语言却大不相同。

后端工程师需要做数据库的编程；

测试工程师的工作方式有黑盒测试、白盒测试灰度测试；

运营人员的工作是运营项目：运行的具体手段分为渠道运营、内容运营、活动运营、品牌运营等；

维护人员的工作即使维护服务器等；

人力资源的工作是招聘人员，办理离职、福利薪资管理等。

产品设计思维

UED（User Experence Design）用户体验设计的简称。以用户体验为中心，以用户需求为目标而进行的设计。

UCD（User Centered Design），是指在设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。以UCD为核心的设计都时刻高度关注并考虑用户的使用习惯、预期的交互方式、视觉感受等方面的内容。

衡量一个好的以用户为中心的产品设计，有三个维度，即产品的有效性（effectiveness），产品的效率（effciency），用户主观满意度（satisfaction）。

设计师必备的能力

这里不说软件，因为软件永远是辅佐我们设计的工具。

1、根据原型图和PRD文档优化原型图与交互图的交互设计；

2、根据需求完成视觉设计并完成设计规范；

3、根据技术的需求完成切图、标注、命名PSD、设计动效等工作；

4、有时负责运营设计、企业形象设计以及公司内部的平面设计等职责。

好的UI的标准是好用、功能清晰、好看、好实现

好用：以用户为中心

功能清晰：Don't make me think.

好看：满足用户画像群的审美、达到需求方的目的、比要求完成的更美、审美教育义务

好实现：可以实现、必须考虑对载体效率和性能的影响、可以根据实现角度进行调整。

我们要知道的美术基础与美术史

任何分类的设计师都需要一定的美术基础，甚至也要具备一定的手绘能力。不过对于UI设计师，只需要掌握一定的美术知识再勤加练习即可。

那么，UI设计师掌握了美术知识并可以手绘出具一定水平的作品，对其有什么好处？

在草稿阶段的优势：构思设计时，只需要拿出笔和纸，手绘出脑海中思考的图形即可。

在提案中的优势：避免上司因为对电脑图形设计某些设计的不满于而影响对整体感官的评价，今儿进而避免提案被全盘否定，同时设计师也可以有充分的时间完成细节。

在原型图中的优势：手绘原型图可以给人们提供更多的思考空间。

在实际项目中的优势：手绘插画，以增强视觉冲击感，为用户带来全新的体验。

美术中的三大基本关系：结构关系、素描关系、色彩关系

结构关系：物体的透视和形状（平视、一点透视、两点透视、三点透视）

素描关系：三大面五大调（三大面，黑、白、灰；五大调，灰面、亮面、明暗交界线、反光、投影）

色彩关系：三原色，指色彩中不可再分解的三种基本颜色。黑白灰属于无彩色。色彩三原色（红、黄、蓝），屏幕三原色（红、绿、蓝）加色模式，印刷三原色（青、品红、黄）减色模式。

来自Google图片

色彩的三属性：色相、饱和度、亮度

互补色：180度；对比色：120度~180度；邻近色：90度；同类色：15度以内。

色彩与光源的关系：固有色、光源色、环境色

简史

设计工匠时期（巴洛克、洛可可）

工艺美术运动（哥特）

德意志工业同盟（包豪斯、简洁设计）

现代主义设计（无印良品、SONY等）

其他现代风格：拟物风格、扁平设计风格、波普艺术、蒸汽波艺术、赛博朋客风、蒸汽朋克风、孟菲斯设计风格...

设计师要懂得版式基础

平面构成：点、线、面

排版中的元素：图片、文字、按钮、图标、视频

字体：族类、字族、字重

族类，无衬线字体、衬线字体、手写体、梦幻字体族、等宽字体族；

字族，正常、窄体、斜体、粗体、粗斜体、黑体等；

字重，Thin、Light、Regular、Book、Bold、Black、Heavy，粗细变化

排版的CRAP原则：对比、重复、对齐、亲密性

用户浏览定律：从左往右、从上到下、从大到小、从重到轻、狩猎式、S曲线

图标设计的技巧

来自Google图片

图标定义：指有明确含义的图形视觉语言。也称为icon或Picto

产品图标：设计界面时体现品牌调性和特性的图标。

文字风格（爱奇艺、知乎、淘宝等）；

正负形与隐喻风格（抖音、Keep、ofo等）

折纸风格（Calendar、Snapseed、会声会影等）

填充图标风格（Lucking、Tinder、Youtube、Twitter等）

线性风格（Airbnb爱彼迎、VUE等）

LOWPOLY风格（潮自拍、潘通色、人人等）

微渐变风格（每日优鲜、陌陌、全民K歌等）

卡通风格（开心消消乐、映客、BOO！等）

系统图标：担负一定功能和含义的图标。

填充图标、线性图标、圆角图标、尖角图标、断线图标、双调图标、动态图标

图标的设计方法：矢量图形+布尔运算+贝济埃曲线

实际应用

标签栏图标，苹果和安卓APP的底部，一般会有一个放置重要功能的常驻栏。

来自https://www.pinterest.jp/pin/134474738861078766/

导航栏图标：苹果APP的顶部区域称为Navigation Bar，即导航栏

来自https://www.pinterest.jp/pin/585679126513769447/

金刚区图标：这个区域经常有8个图标组成，被称为“8大金刚图标”，金刚区的图标设计风格应该是微扁平、亲拟物的感觉，这样会有更好的点击感。

来自https://www.pinterest.jp/pin/647251777676602631/

必须要了解的交互知识

交互设计建立了人与计算机便捷沟通的通道，它的目标是创造可用性和用户体验俱佳的产品。

web端鼠标点击的最小单位是1px；移动端，手指点触区域最小尺寸7mm*7mm，拇指最小i为9mm*9mm，也即是2倍图中的88px

注意：一般图标没有88px但是为了方便点击，会做成透明区域

操作手势：单点触碰、拖曳、快速拖曳、滑动、双击、捏、扩展、长按。

来自Google图片

格式塔

格式塔心理学认为，人们在观察事物的时候会自动脑补出一些逻辑和含义，使观察对象变成一个完整的、整体的常见的形状。

接近律：人们认知事物时，会依靠它们的距离判断它们之间的关系，两个元素越近就说明它们之间的关系越强。

相似律：认知事物时，刺激要素（如大小、形状、色彩等要素）相似的元素人们倾向于把它们联合在一起或者认为它们是一个种类。

闭合率：就算没有外形的约束，人们也会自动把图形脑补完整。

连续律：在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线，也就是视觉的惯性。

成员特性律：赋予集体中某一个元素特殊的一些刺激元素从而使其更加突出。

格式塔三大记忆律

水平化：指记忆中人们趋向于减少知觉图形小到不规则部分使其对称，或趋向于减少知觉图形中的具体细节；

尖锐化：在记忆中与水平化过程伴随而行的。指在记忆中，人们往往强调知觉图形的某些特征而忽视其他具体细节的过程。有些心理学家认为，人类的记忆特征之一，就是客体中最明显的特征在再现过程中往往被夸大。

常态化：指人们在记忆中，往往根据自己已有的记忆痕迹对知觉图形加以修改，即一般趋向于按照自己认为它似乎应该是什么样子加以修改。

情感化设计

本能水平：重视设计外形。刺激用户感官体验

行为水平：重视使用的乐趣和效率。功能、易懂性、可用性和物理感觉，如记事本app

反思水平：重视自我形象，个人满意，记忆。产品与用户之间的情感纽带，通过互动为用户提供自我形象、满意度、记忆等方面的体验，这样用户可以形成对品牌的认知，培养对品牌的忠诚度。

马斯洛理论将人的需求分为生理需求、安全需求、社交需求、尊重需求和自我实现五个层次。

笔者认为，反思水平设计就是为用户提供归属感、尊重、自我实现。例如Google每逢节日会有一些符合节日化的设计。

来自https://www.pinterest.jp/pin/12666442688784642/

情感化设计的表现

画面、应景、游戏感、冲突、讲故事、隐喻。

交互设计八原则

菲茨定律：光标到达一个目标的时间，与当前光标所在的位置以及目标位置距离D和目标大小S有关。距离越短，目标越大，那么光标到达目标就越快。

时间t=a+b

希克定律：指一个人面临的选择n越多，所需要作出决定的时间t就越长。

反应时间 t=a+b

7±2法则：人类的记忆广度为5~9个单位。

泰思勒定律：产品固有的复杂性存在一个临界点，超过这个临界点过程就不能再简化了，只能将这种复杂性转移。

防错法则：减少错误操作带来的灾难。

奥丁姆的剃刀法则：做产品时功能上不可过于繁琐，应当保证简洁和工具化。

防呆原则：每个页面应强调一个重要的功能而不应让用户做选择题。

防止不耐烦原则：用户是很容易不耐烦的，如果需要用户等待载入信息，一定要有一个情感化设计提示，避免用户产生焦虑。