目录

一.图标设计

二.UI中的珊格系统

三.提升自身的稀缺性

---

图标设计

一.设计图标有三个原则：可识别性、统一性、品牌差异性 

二.图标设计方法

1.矢量图形二.通过photoshop中的钢笔工具、sktech绘制的图形，即矢量图形。它们是计算机记录一个快点到另一个瞄点的方向、位置都是相对的、放大和缩小不受影响而像素图形记录每个点的色彩。

 2.布尔运算是通过数学逻辑推演法，主要有数学逻辑的联合、相交、相减等数学计算变成新的造型。布尔运算的核心就是两个形状的关系：即Union（并集）、intersection（交集）和subtraction（差集，包括A-B和B-A两种）。分别有合并形状、减去顶层形状、与形状区域相交、排除重叠形状

 3.贝塞尔曲线用于二维图形的数学曲线。诞生主要是为了汽车的主体设计绘制图形的，贝塞尔曲线是绘制矢量图形时的重要工具，我们是用钢笔工具画出所有图形一般来说都是贝塞尔曲线组成。贝塞尔曲线由瞄点和线段组成。一般来说，二维平面软件都有贝塞尔曲线，钢笔工具、增加瞄点、删除瞄点、转换点工具，这些都是平面软件的标配 

4.应用图标 标题栏图标ios和安卓底部有2-5个tab栏。每个图标平分整个tab栏宽度，底部会有22px（11px）的文字注释。如果图标释义比较清晰，标签栏图标尺寸应该是60px（30px） 

5.导航栏图标ios顶部区域称为Navigation bar 导航栏。导航栏左右有图标，如果是二级页面，左侧一般是返回图标。安卓也有类似的设计。要保证所有导航栏的图标大小和风格是一致的。如果以i6/7/8尺寸设计界面，那么导航栏图标的尺寸大概是44px（22px） 

6.金刚区图标在淘宝京东会发现中间有6-8个图标。可是圆形，也可是不规则形状。这个区域在苹果和安卓规范里并没有，属于设计师自创的规范。大多采用阴刻图标，色彩的视觉聚焦，在加上识别性强的图标，会使得在购买行为的从大脑中提取图标信息，根据图标去选购商品 

三.图标类别

线性、填充、面型、扁平、手绘风格、拟物 

四.图标尺寸和属性

在ios或安卓，则按照平台规范即可。如web或者练习用的话，则：16*16、24*24、32*32… 

五.让图标更和谐

使用同一种风格的图标，并保持你的风格的元素一致，比如用多粗的线条，用多大的圆角，是否统一大小等等。并使用同一套色版 

六.完成一套图标所需要准备的点

1.选择正确的主题

2.选择哪些图标来画（多找灵感和头脑风暴） 

3.找到每个图标的最佳语义符号（灵感） 

4.草图的重要性（不要直接上软件 有了想法后 应选择适合你的最佳图标。万事开头难） 

（1）直接上软件会让你直接陷入那个想法 可先粗略画一画草图 草图阶段多尝试会让你的图标更趋进完美   

（2）草图则是你的灵感集 永远带着你的草图本 随时记录下灵感 同时能让你回顾之前的作品      

（3）草图会节省你的时间，比在ai上尝试新的风格会花多你两倍的时间  

（4）草图流程：第一部分类似头脑风暴 ，把刚才的想法和icon全部简单的画出来，这一步检查对于同一个图标哪个最好。第二部分决定了哪个草图看起来更好之后进入下一步—画具体的草图（网点本）用正方形做边界，细化它，在此阶段尝试使用基本图形，这是尝试找到你的最佳构造的最好方式。 

七.将你的图标的所有元素完美对齐 

区分图标的好与坏的一个重要元素就是对齐和间距。正确的对齐和精确的间距也很重要。一致的元素同时使用一致的间距和对齐也同样重要的原因：保证一套图标的一致性、看上去更专业、平衡的图标更有吸引力 

八.着色技巧

（1）一切都取决了你的图标会被用在哪？谁是你的目标人群？（2）取决于你想要的风格你可以使用单色，一个颜色不同色度。或者选择一个配好不同颜色的色板。获取灵感：colourlovers 或者adobe color

---

UI中的栅格系统

定义：以规则的网络阵列来指导规范界面的版面布局以及信息分布。（根据一定的逻辑，在界面中绘画一个个小格子，然后将内容摆在这一个个小格里组合起来） 

一.为什么要使用栅格？ 

1.逻辑性很多时候你会没办法解释为什么这个按钮100px，这个导航750px，越是细节越无法解释，但是商业设计是逻辑性解决问题的设计方式。通过栅格的使用，这些尺寸都可以完美的解释。 

2.站在山上设计师除了本身视觉工作外，还需要是否能落地，实现方式，是否规范，复用性是否高，性价比是否高这些问题有一定高度的认知。栅格可以间接推动这些问题。 

3.更有道理设计师可以使用网格让画面更加有条理，让内容可读性变高。高速校准元素在画面内的位置，让画面更加平衡。让版面更加有层次，模块化的管理元素。 

 二.栅格涉及的基本词 

1.最小单位 栅格系统的最小单位是界面的单位基础。通常情况，pc最小单位为10，移动端最小单位是3、4、5。定义了最小单位后，递进的单位就用最小单位的倍数。注意：需要结合具体工作来决定最小单位，目标是解决问题。 

 2.屏幕总宽度： 在做内容设计之前需要设定一个屏幕尺寸，这个尺寸将是规范整体布局的尺寸以及规范不同设计师协作统一的一个尺寸。（在定设计稿时的屏幕总宽度需要考虑大致的内容，以及市面上屏幕使用的占比，和不同屏幕尺寸适配是否方便。）常规尺寸：960、1280、1440 

3.列列=小列+水槽屏幕总宽度为a，被分为n列，可以计算出小列和水槽的宽度。列数n越多，那么排布在版面的内容就越精细，内容越多。通过控制列数，就可以控制版面的留白和呼吸感。

 4.行行与列的概念是互通的，是栅格系统的横向排布依据，但是由于现在设计趋势，网页采用瀑布流或内容不固定的高度的情况，让横向排布变得机动性很高。不过在严谨的后台设计中，合理的运用会让版面元素设计更加有逻辑。 

 5.水槽即小列于小列之间的分割间距，可以帮助分离内容。可根据页面风格设置水槽的宽度，水槽越大则页面留白呼吸感越好。注意：水槽内不可放置任何板块。所以明确水槽的作用就显得尤为重要。

 6.安全边距即栅格以外（内容与屏幕左右边缘之间）内容。让内容可读性提高，美观度提高。注意：安全边距禁止放任何内容，类似平面栅格栏里的出血。 

 7.内容区域即栅格系统汇总，横向的行和纵向的列交叉行程的区域。在这个区域内可根据栅格放置界面内容。可以通过调整行和列的值来控制版面的留白率和呼吸感。 

 三.常用的栅格系统 

 1.960栅格系统是在早期被运用的最广的栅格系统。栅格宽度：960px，12列，每列60px，水槽为20px。内容区域的总宽度为940px（在大型门户网站、电商网站都采用960的栅格）

 2.8pt栅格系统8pt栅格系统，也称8点栅格。基本使用原则是，设计师在设计中需要一致的是用8的倍数来定义元素的尺寸、填充和边距。也就意味着，在开发的世界中任何padding、margin、sizing都是8的倍数 

问题：为什么是八的倍数？答：1.现在不论是ios还是android，应有尽有的物理屏幕尺寸和分辨率，那设计师需要按照那个界面标准去设计？这是则引入“偶数思维”，当我们采用的值是偶数的时候，元素不会因为去适配不同的屏幕而变得模糊。2.选择8，是因为8作为最小单位，退可守进可攻。不会像246这样很碎显得页面分割感很重，也不会像10.12一样在小细节里无法精致把控。可以更有逻辑的方式让元素协调统一，也大大减少了与工程师沟通成本。在每个细节都达到一致和逻辑性，从用户层面也逐渐建立信任感 

 四.如何在设计稿中定义栅格系统？ 

名词：屏幕总宽度W（weight） 安全边距m（margin） 宽列C（column） 水槽g（gutter） 

屏幕总宽度=列宽*列数+（列数-1）+2*安全边距 

屏幕总宽度=（列宽*列数）-安全边距在sketch中使用 

1.网络设置 

在网络设置栅格系统中的最小网络单位 

 2.布局设置 

点开显示中布局设置，设置总宽960px，以及列数、装订线宽度、列宽。还可以更改颜色。 

 五.栅格在设计中应用 

关键：在界面中区块的定义要从列开始到列结束，水槽和安全距离内不可单独使用内容（在栅格内的尺寸大小一定是确定且符合逻辑的） 

 六.如何利用栅格定义间距

布局中，栅格和间距其实是息息相关的，那么两者关系，栅格定义的是布局中大模块的逻辑性定位和排布，那间距定义的是版面中所有细节的间距、步进、适配。以8pt栅格举例，栅格中定义了安全距离、列宽、水槽等基本词的值。都是以8为基本单位然后进行步进，那么在间距中，元素与元素之间也可以定义成8倍数，让整个界面设计富有节奏感，在定义尺寸的时候有非常强的逻辑性支持，在一致性也会很好地达到。

---

提升自身的稀缺性

一.设计能力是基础技巧，只有拥有设计能力+（    ），才能赋予更高的价值

1.设计能力+（整合力）：

行业不断跨界，领域不断变化。我们需持续的整合信息。当下热门“区块链” “大数据” “新零售”等新领域。设计师花一些时间去了解热门行业背景资料、发展趋势、市场需求等信息，并结合自己的设计能力，建立自己新的设计认知，则具备“认知优势”

2.设计能力+（设计感）：

很多设计师总认为自己设计很前沿、很创新、很有美感。好的设计是：设下一个计谋以实现既定目的（米士杰）以让事情得以推进。也就是说优秀的设计总是创造出一种新的解决方案，让事情顺利进行。在求职简历中不需总描述设计作品的创作思路，重点阐述：通过你服务客户的问题诊断，提出了什么解决方案解决了客户什么问题。

3.设计能力+（共情力）：

站在别人的角度思考问题，甚至思考的比别人更深入的能力。当设计作品本身不能不能打动客户，挖掘出能够打动客户的情感说服信息，则设计方案通过机会会大很多。

4.设计能力+（故事性）：

每个商业领袖都是讲故事的高手，乔布斯、马云、把商业讲成谁都能懂的故事…故事性将策划赋予到你的设计上，，策划让设计拥有了更强的生命力和流传性。

5.设计能力+（娱乐性）：

如今是个泛娱乐的时代，骨子里的娱乐性应充分发挥，并以模块化的形式呈现。

6.设计能力+（意义感）：

即目标、愿景。团队管理中，目标管理更具有管理优势。带领和而不同的年轻团队，谁能够激发他们的斗志和工作热情，谁就能创造出战斗力的队伍。所以目标即意义，围绕目标展开管理。