大家好，我是绛青。上周我为大家分享的UI设计入门知识不仅得到了很多小伙伴的认可，居然还得到了作者本人——郗鉴老师的肯定和鼓励，这让我感到有些意外，当然更多的是开心。
谢谢那些支持我并给我鼓励的小伙伴，尤其是读书组的小伙伴，是你们让我更加有动力去坚持做这件事。
看过上一篇文章的小伙伴们，想必对互联网设计师、设计中的美术基础知识以及平面设计知识体系都有了一定的了解，并且也知道了如何运用在平时的工作中。
刚认识我的小伙伴可能对这些知识还不够了解，那我建议您把上一篇文章看一遍或者直接购买郗鉴老师出版的《UI设计师入门必读的书》进行阅读，我相信你肯定会有所收获的。
图片来自：Jane先先先生
那么今天，我将继续为大家分享这本书里的另外三个知识要点：
- 1.图标设计的技巧；
- 2.设计师应当了解的交互知识；
- 3.设计师必须掌握的法律常识。
01
图标设计的技巧
提到图标，相信很多人都非常的熟悉。图标，也称为Icon或Picto，是指有明确含义的图形视觉语言。因为其形式的多种化和表现方式的丰富化，使得它被广泛运用于人们的生活中。
而UI设计中的图标，可以分为带有品牌属性和特性的产品图标以及有功能指示作用的系统图标。
接下来，就让我来为大家介绍这两种图标的风格和设计方法。
（1）产品图标
产品图标是设计师在设计界面时体现品牌调性和特性的图标。通过产品图标，用户可以粗略感知这个产品主要是做什么的。
例如，ofo的产品图标是字母ofo的组合，同时也是一辆自行车，暗示这款产品是共享单车的App;又如，微信的产品图标是两个对话气泡，暗示这是一款社交App等等。
产品图标的风格
因为每个用户的手机上都装了很多App，于是如何把产品图标设计得好看并且容易被人记住就成了非常重要的任务。
要想让你的产品图标在众多App中脱颖而出被用户记住，那你就需要了解以下这些设计风格：
文字风格：文字是最直白的信息，而且不容易被曲解。需注意的是，要选择符合气质的字体，并做一定的变化。
这类风格的产品图标有：小红书、支付宝、爱奇艺...
正负形与隐喻风格：用正负形和隐喻来设计图标，会使图标更加耐人寻味。
这类风格的产品图标有：百度外卖、ofo、Keep...
折纸风格：折纸的效果会让人感觉很立体，所以很多产品选择折纸效果（比较扁平的手法）来设计产品图标。
这类风格的产品图标有：美拍、Snapseed、有道云笔记...
填充图标风格：使用填充图标风格进行图标设计也是非常合适的，因为填充图标风格具有简洁性和识别性强的特点。
这类风格的产品图标有：菜鸟裹裹、瑞幸咖啡、站酷...
线性风格：根据目前设计流行趋势，很多产品图标都热衷于采用扁平化的设计风格，而线性风格的图标就是非常流行的形式之一（不过，需要特别注意的是不可太细。太细会导致在手机上浏览时显得非常尖锐，不易点击。）。
这类风格的产品图标有：网易云音乐、爱彼迎、VUE...
LOWPOLY风格：这类风格的图标因本身造型的独特性，会让它在众多图标中显得非常吸引眼球。但是这类图标也有它的问题，例如容易失去细节等等。
这类风格的产品图标有：如美妆相机、潮自拍、潘通色...
微渐变风格：微渐变也是产品图标设计中非常常见的表现手法，因为它能用轻微的渐变表现出图片的深度。
这类风格的产品图标有：平行世界、陌陌、腾讯视频...
卡通风格：卡通风格的产品图标给用户的好感度一般都比较高，可以说，它是一种各个年龄层都能接受的风格。
这类风格的产品图标有：唱吧、QQ、王者荣耀...
图标的网格和参考线
看到这里，大家对产品图标的设计风格也有了一定的了解了。同时，细心的小伙伴应该也观察到了，无论图标内的形状怎么变化，图标整体看上去是非常舒服的，视觉重心也很稳。这是为什么呢？这里就需要用到图标的网格和参考线来作为设计的辅助了。
网格在很多软件中都有，例如在PS中选择“视图”→“显示”→“网格“即可开启网格。
当然需要的话，也可以选择去下载第三方设计的参考线模板，如Meternal Design的参考线模板就有正方形、圆形、圆形与长方形结合的等不同形式。
如果对齐模板中的形状，即可得到面积相等的长方形、正方形、圆形，这对构建视觉上面积相等的图标是非常有益的。
网格和参考线
（图片来源：郗鉴）
不同形状的网格布局
（图片来源：郗鉴）
在网格的辅助下可以设计出视觉上大小均衡的图标
（图片来源：郗鉴）
苹果启动图标和安卓启动图标的尺寸
关于苹果启动图标的尺寸，苹果官方为开发者提供了一套模板，我们直接去官网HIG下载这套资源拿来用就好了。
Template-AppIcons-iOS文件
（图片来源：郗鉴）
安卓启动图标的尺寸同样需要很多尺寸，主流需求是1024X1024px、512pX512px、144X144px、96X96px、72X72px、48X48px这六种。
是不是觉得很复杂，不过不用担心，因为郗鉴老师早已为我们做好了一个模板。
安卓图标模板
（图片来源：郗鉴）
（2）系统图标
除了产品图标，我们还需要了解一种图标，那就是系统图标。
系统图标指的是担负一定功能和含义的图形，它需要像文字一样易于理解，所以表达方式一般都不会太复杂。
例如微信底部的四个图标”微信“”通讯录“”发现“”我“就采用了比较简洁的线性风格，做到有趣多样的同时，又保证了图标的可识别性。
和产品图标类似，系统图标的风格也有很多种，下面就一一为大家介绍系统图标的风格。
填充图标：填充图标是以面为主要变现形式的图标。
作者：Docker星
线性图标：线性图标的表现形式是线条，在系统图标中通常由统一粗细的的线条组成。
作者：Docker星
圆角图标：无论是线性图标还是填充图标，在图标的边角处使用圆角的都是圆角图标风格。
使用这类风格的好处就是让人觉得很温柔，很友好，所以很多产品都喜爱使用。
图片来源：UI中国
尖角图标：与圆角图标风格类似，不同的地方就是尖角风格的图标在边角处都是使用尖角的。
这样做的好处是让人感觉有棱角，并且给人正式的感觉，银行、办公等App使用比较多。
作者：黑马青年
断线图标：断线图标其实是线性图标的一种风格变化，它的特点就是在线条中出现断口。
制作断线图标时，需要遵守以下四个规则：1） 断线开口只有一个，否则图标会无法识别；2）断线位置不应在中心线上；3）断线开口尽量在转折处；4）断线不应过于琐碎。
作者未知
双调图标：双调的图标的外形还是线性图标，但是用透明度很高的的同类色填充到线性图标内部空间。
图片来源：UI中国
动态图标：动态图标是可以让用户看到有趣的动态效果的，为用户大大增加了趣味性。
作者未知
（3）图标的设计方法
既然大家已经了解了产品图标和系统图标的含义及风格，那么现在就让我们去学习一下图标的设计方法。
首先，图标的绘制一般都是用矢量图形，因为矢量图形具有文件小、随意放大或缩小都不虚的特点。当然也有用像素图形去绘制的，其特点是变化多端、颜色丰富、细节多。
今天我们主要了解的是用矢量图形绘制图标的方法。
用矢量图形绘制图标有两种方法：布尔运算和贝济埃曲线。
布尔运算：布尔运算的核心就是两个形状的关系，即Union（并集）、Intersection（交集）和Subtration（差集，包括B-A和A-B两种）。在PS中，布尔运算被翻译成合并形状、减去顶层形状、与形状区域相交和排除重叠形状。
布尔运算中不同的运算模式
（图片来源：郗鉴）
贝济埃曲线：简单来说，一切使用使用钢笔工具画出来的图形都算是贝济埃曲线。它由锚点和线段组成，单击锚点会出现两个手柄，一个控制前端线条的走向，另一个控制后端线条的走向。
贝济埃曲线绘制方法
（图片来源：郗鉴）
系统图标一般常用于App的底部标签栏（也可称为Tab栏）、顶部导航栏以及放置很多分类的”金刚区“。
当用于Tab栏时，图标的尺寸应尽量控制在60px（30pt）左右；当用于导航栏时，图标的尺寸以44px（22pt）左右为宜。
02
设计师应当了解的交互知识
可能有些小伙伴会问，交互设计是指什么？
交互设计（Interaction Design）也被称为IXD。交互设计建立了人与计算机便捷沟通的通道，它的目标是创造可用性和用户体验俱佳的产品。
而用户体验（User Experience）是用户使用产品的心理和感受，用户体验体现了产品设计以人为本的设计精神。
在上一篇文章中，我们也提到了用户体验设计（UED）和用户中心设计（UCD）的概念与含义，但是要想一个产品被人喜欢，那么我们就要去研究用户，去了解用户的心声。
图片来源于网络
（1）用户研究的七种方法
① 用户画像：根据产品的调性和用户群体，用户研究团队可以设计一个用户的模型，这种研究方式被称为用户画像。它是由带特征的标签组成的，为的是可以更好的理解谁在使用这个产品。
② 用户访谈：邀约用户回答产品的相关问题并记录，做出后续分析。一般分为结构式访谈（根据提前写好的问题结构）、半结构式访谈（一半根据问题一半讨论）、开放式访谈（较为深入的的交流，双方都有主动探讨权）这三种。需注意的是，用户不能是从事互联网的专业人士，也不能提出诱导性的问题，更不能使用专业术语。
③ 问卷调查：依据产品列出需要了解的问题，制成文档让用户回答，可分为纸质问卷调查和网络问卷调查。
④ 焦点小组：一般由6~12人组成，由一名专业人士主持，依据访谈提纲引导小组成员各抒己见，并记录分析。
⑤ 可用性测试：通过筛选不同用户群体对产品进行操作，同时观察人员在一旁观察并记录，在软件开发的前期不适用这个方法。
⑥ 眼动测试：使用特殊的设备眼动仪追踪用户使用产品时眼睛聚焦在哪里，盲区在哪里。
⑦ 用户反馈和大数据分析：根据市场提供的反馈和数据得出客观的判断与合理的推测。
（2）用户需求分析
要做一个好的产品，我们仅仅只掌握了用户研究的方法是不够的，我们还需要考虑用户的使用场景，切实的了解他们真正的需求。
产品中的用户使用场景表格如下图所示：
（图片来源：郗鉴）
移动端的操作手势
众所周知，PC端（电脑端）目前主要还是依靠鼠标进行操作的。而移动端与PC端不同，因为移动端是使用手指来操作界面的。
一般来说，手指点触区域的最小尺寸是7mm X 7mm，拇指最小尺寸为9mmX9mm。也就是说，在2倍图中为88px（或44pt）。
移动端常用手势一般有这几种：
单点触碰（Tap）：点击用于选择一个元素，类似鼠标的左键，是最常用的手势。
拖曳（Drag）：点击某个元素然后拖曳进行移动，与现实生活中移动物体的类似。
快速拖曳（Flick）：速度很快的拖曳操作。
滑动（Swipe）：水平或垂直方向的滑动，如翻阅相册和电子书的手势。
双击（Double-Click）：快速点击一个物体两次，通常会在放大、缩小操作中使用。
捏（Pinch）：两根手指向内捏时，被捏的物体会变小，通常在缩小操作中使用。
扩展（Stretch）：两根手指向外推，被操作的物体会向外拉伸，元素相应放大，通常在放大操作中使用。
长按（Touch and Hold）：手指点击并按住时会激发另一个操作，就像朋友圈长按相机图标可只发文字。
移动端常用手势图
（图片来源：郗鉴）
（3）关于格式塔心理学
“格式塔”源自德语”Gestalt“，意味”整体“”完形“的意思。
格式塔心理学认为，人们在观察事物的时候会自动脑补出一些逻辑和含义，使观察对象变成一个完整的、整体的、常见的形状。
接近律（Law of Proximity）：人们认知事物时，会依靠它们的距离判断它们之间的关系，两个元素越近关系就越强。
A组和B组因为接近律而产生不同的阅读顺序
（图片来源：郗鉴）
相似律（Law of Similarity）：认知事物时，刺激要素（如大小、色彩、形状等要素）相似的元素人们倾向于把它们联合在一起或者认为它们是一个种类。
相似的元素暗示它们属于一个种类
（图片来源：郗鉴）
闭合律（Law of Closure）：就算没有外形的约束，人们也会自动把图形闹不完整。
左图中我们会认为是圆形有缺口而不是一条曲线；右图中我们会认为是圆形被三条线截断了而不是四个图形
（图片来源：郗鉴）
连续律（Law of Continuity）：在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线，也就是视觉的惯性。
熟练运用连续律的流氓软件
（图片来源：郗鉴）
成员特性律（Law of Membership Charracter）：集体中某一个元素特殊的一些刺激元素从而使其更加突出。
突出的外形暗示它与其他元素有不同的功能
（图片来源：郗鉴）
（4）情感化设计
情感化设计是指在抓住用户注意力、诱发情绪反应来提高执行行为的可能性的设计。
情感化设计有三个水平，分别是本能水平、行为水平、反思水平，三者是递进关系的。
本能水平：这个阶段的设计就是刺激用户的感官体验，会比较重视设计外形。
行为水平：这个阶段会比较重视使用的乐趣和效率。一个优秀的行为水平设计会包括功能、易懂性、可用性和物理感觉这四个方面。
反思水平：反思水平的设计与用户的长期感受有关，这种水平的设计建立了品牌感和用户的情感投射。这个阶段会非常重视自我形象、个人满意和情感记忆。
情感化设计的三个水平
（图片来源：郗鉴）
马斯洛需求层次理论将人的需求分为：生理需求、安全需求、社交需求、尊重需求和自我实现需求五个层次。
（5）交互设计八大原则
当我们了解了产品五要素（产品设计的维度问题）、格式塔心理学（用户如何认知的问题）、情感化设计（如何让用户满意的问题）后，我们还需要了解很多交互原则，也就是接下来要讲的交互八大定律。
费茨定律：距离越短、目标越大，那么光标到达目标就越快。
希克定律：一个人面临的选择越多，所需要做出决定的时间就越长。
7±2法则：人的记忆广度为5~9个单位。
泰斯勒定律：产品固有的复杂性存在一个临界点，超过这个临界点过程就不能再进行简化，只能将这种复杂性转移。
放错原则：一个表单是需要填写完毕后方可提交的，减少错误操作带来的灾难。
奥卡姆的剃刀法则：产品功能不可过于繁琐，应该保证简洁和工具化。
防呆原则：每个页面应强调一个重要的功能而不应让用户做选择题。
防止不耐烦原则：如果需要用户等待载入信息，一定要有一个情绪化的设计提示，避免用户产生焦虑。
03
设计师必须掌握的法律常识
相信大部分设计师在工作中或多或少有过这样的经历：不小心用了一张没有获得授权的素材、为领导处理过一个印章的电子图片等等。这些行为乍一看好像不会带来什么不利的后果，但当收到一封律师函的时候就会追悔莫及。
为了防止设计师在不知不觉中侵犯了别人的知识产权，我们都有必要去了解下面这些知识。
图片来源于网络
（1）抄袭-借鉴-致敬
从著作权法来看，”抄袭“可以是拆解为”违法-复制“，是可能被起诉的；”借鉴“可以拆解为”合法-演绎“；”致敬“可以拆解为”基于思考-演绎“。
”借鉴“和”致敬“的前提都是需要经过思考的，是对前作进行解构或跨领域的创作。
（2）版权意识
关于版权，设计师在工作中要特别注意的就是这些版权：字体版权、图片版权、IP版权、公共版权以及肖像版权这五种。
字体版权
如果大家做设计，需要字体而又不想侵权时可以考虑以下三种方法：
① 使用免费字体，例如思源、Roboto、站酷高端黑、站酷快乐体、旁门正道标题体、郑庆科黄油体、站酷意大利体等字体。
② 使用平台免费字体。
③ 购买版权。
图片版权
同样的，如果需要使用一些图片做设计时，具体的解决有以下三个：
① 自己拍摄。
② 寻找免费版权素材。
③ 购买收费版权。例如站酷平台的海洛创意就提供了大量价格低廉的高质量图片素材。
（3）社会劳动法，保护你我他
不是每个设计师都能遇到一个好的公司，总有人会在工作中遇到不讲理的公司。
当你很不幸的在一个公司中遇到了如下情况时，请立即申请劳动争议仲裁来保护我们的合法权益。
如果你遇到了这些情况，请立即申请劳动争议仲裁：1）不按时发放工资；2）随意扣除工资；3）离职后不开离职证明；4）未缴纳社会保险；5）未缴纳个人所得税；6）未签订劳动合同。
04
结尾
这就是我今天要分享给你们的另外三个知识要点：
- 1.图标设计的技巧；
- 2.设计师应当了解的交互知识；
- 3.设计师必须掌握的法律常识。
最后，给每一位热爱设计以及想要学设计却还在犹豫的小伙伴们说一句：如果你想做、喜欢做，那就去做吧！永远不要怀疑自己，也不要低估自己，你的努力会让你遇到更优秀的自己！
我个人崇尚的进步法则：1）到死方休的梦想；2）总不满意的自我评价；3）愈挫愈勇的学习精神。
分享是最好的学习，我是绛青，感谢你的阅读。
网友评论