如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1. 此属性列表请对照jQuery EasyUI 1.0.5.  
2.   
3. 属性分为CSS片段和JS片段。  
4.   
5. CSS类定义：  
6. 1、div easyui-window        生成一个window窗口样式。  
7.       属性如下：  
8.                    1)modal:是否生成模态窗口。true[是] false[否]  
9.                    2)shadow:是否显示窗口阴影。true[显示] false[不显示]  
10.   
11. 2、div easyui-panel           生成一个面板。  
12.        属性如下:  
13.                  1)title:该标题文本显示在面板头部。  
14.                  2)iconCls:在面板上通过一个CSS类显示16x16图标。  
15.                  3)width:设置面板宽度。默认auto。  
16.                  4)height:设置面板高度。默认auto。  
17.                  5)left:设置面板左边距。  
18.                  6)top:设置面板顶部位置。  
19.                  7)cls:在面板中增加一个Class类。  
20.                  8)headerCls:在面板头部中增加一个Class类。  
21.                  9)bodyCls:在面板内容中增加一个Class类。  
22.                 10)style:在面板中增加一个指定样式。  
23.                 11)fit:当True时设置该面板尺寸适合于它的父容器。默认false。  
24.                 12)border:当定义时显示面板边界。默认true。  
25.                 13)doSize:如果设置为True，该面板将重绘大小，并重建布局。默认true。  
26.                 14)collapsible:当定义时显示可折叠面板的按钮。默认false。  
27.                 15)minimizable:当定义时显示最小化面板的按钮。默认false。  
28.                 16)maximizable:当定义时显示最大化面板的按钮。默认false。  
29.                 17)closable:当定义时显示关闭面板的按钮。默认false。  
30.                 18)tools:自定义工具栏，每个工具都包含两个属性:iconCls、handler。  
31.                 19)collapsed:当定义时该面板初始化时处于收缩状态。默认false。  
32.                 20)minimized:当定义时该面板初始化时处于最小化状态。默认false。  
33.                 21)maximized:当定义时该面板初始化时处于最大化状态。默认false。  
34.                 22)closed：当定义时该面板初始化时处于关闭状态。默认false。  
35.                 23)href:一个url，加载远程数据并显示在面板中。  
36.                 24)loadingMessage:当加载远程数据时，在面板中显示一个消息。默认Loading…  
37.              事件如下:  
38.                  1)onLoad:当远程数据加载完毕后激活。  
39.                  2)onBeforeOpen:当面板打开前激活。  
40.                  3)onOpen:当面板打开后激活。  
41.                  4)onBeforeClose:当面板关闭前激活。  
42.                  5)onClose:当面板关闭后激活。  
43.                  6)onBeforeDestroy:当面板销毁前激活。  
44.                  7)onDestroy:当面板销毁后激活。  
45.                  8)onBeforeCollpase:当面板收缩前激活。  
46.                  9)onCollapse:当面板收缩后激活。  
47.                 10)onBeforeExpand:当面板扩展前激活。  
48.                 11)onExpand:当面板扩展后激活。  
49.                 12)onResize:当面板重绘后激活。  
50.                       width:新建的外部宽度  
51.                       height:新建的外部高度  
52.                 13)onMove:当面板移动后激活。  
53.                      left:左侧新位置。  
54.                      top:顶部新位置。  
55.                 14)onMaximize:当窗口最大化后激活。  
56.                 15)onRestore:当窗口恢复到原来大小时激活。  
57.                 16)onMinimize:当窗口最小化后激活。  
58.              方法如下：  
59.                  1)options:返回options属性。  
60.                  2)panel:返回面板对象。  
61.                  3)header:返回面板头部对象。  
62.                  4)body:返回面板主体对象。  
63.                  5)setTitle:设置头部的标题文本。  
64.                  6)open:当forceOpen参数设置为true时，面板打开时绕过onBeforeOpen回调函数。  
65.                  7)close:当forceClose参数设置为true时，该面板关闭时绕过onBeforeClose回调函数。  
66.                  8)destroy:当forceDestroy参数设置为true时该面板销毁时绕过onBeforeDestroy回调函数。  
67.                  9)refresh:当href属性设置后刷新该面板以加载远程数据。  
68.                 10)resize:设置面板的大小和布局。该options对象包含以下属性:  
69.                      width：新的面板宽度。  
70.                      height：新的面板高度。  
71.                      left：新的面板左侧位置。  
72.                      top：新的面板顶部位置。  
73.                 11)move:移动面板到一个新的位置。该options对象包含以下属性：  
74.                      left：新的面板左侧位置。  
75.                      top：新的面板顶部位置。  
76.   
77. 3、a  easyui-linkbutton                    生成链接类型的按钮。  
78.   
79.        属性如下：  
80.             1)disabled:当True时禁用该按钮。默认false。  
81.             2)plain:当True时显示一个普通效果。默认false。  
82.   
83. 4、input/textarea easyui-validatebox       生成字段验证。  
84.               属性如下：  
85.               1)required:true[必需] false[不必需] 默认false  
86.               2)validType:  
87.                  a、length[a,b] 字段长度控制在a至b之间。  
88.                  b、email       验证Email。  
89.                  c、url      验证网络地址。  
90.               3)missingMessage：当文本时出现空时弹出该工具提示，系统有默认[英文]，自定义可覆盖它。  
91.               4)invalidMessage：当文本内容无效后弹出该工具提示，系统有默认[英文]，自定义可覆盖它。  
92.   
93. 5、ul easyui-tree         生成一个树形结构。  
94.              属性如下：  
95.               1)url:一个获取远程数据的地址。  
96.               2)animate:当展开或折叠节点时是否定义动画效果。true[是] false[否] 默认false  
97.              节点属性如下：  
98.              1)text:节点的显示文本。  
99.              2)id:节点ID，对于加载远程数据时非常重要。  
100.              3)state:节点状态，'open'或'closed'，默认为'open'。当设置为'关闭'，该节点包含子节点，并将远程站点加载它们(并非触发再加载)。  
101.              4)attributes:为节点添加自定义属性。  
102.              5)children:以数组节点的方式定义一些字节点。  
103.              事件如下：  
104.                  1)onClick:  
105.                     当用户点击一个节点时激活，该节点参数包含如下属性：  
106.                     id：节点ID  
107.                     text:节点文本  
108.                     attributes:节点自定义属性。  
109.                     target:目标点击的DOM对象。  
110.               2)onLoadSuccess:  
111.                    当数据成功加载数据时激活，该参数跟jQuery.ajax的'success'函数效果相同。  
112.               3)onLoadError:  
113.                   当数据加载数据失败时激活，该参数跟jQuery.ajax的'error'函数效果相同。  
114.              方法如下:  
115.                  1)reload:重新加载树数据。  
116.                  2)getSelected:获取选中的节点并返回它，如果没有选择节点将返回null。  
117.                  3)collapse:折叠一个节点，该目标参数是该节点的DOM对象。  
118.               4)expand:展开一个节点，该目标参数是该节点的DOM对象。    
119.               5)append:在一个父节点追加一些子节点。  
120.                     param有两个属性：  
121.                     parent:DOM对象，把它作为父节点追加(它们)。  
122.                     data:array，或者节点数据。  
123.               6)remove:删除它以及它以下的子节点，该目标参数是该节点的DOM对象。   
124.   
125. 6、table easyui-datagrid                   生成一个表格。  
126.              属性如下：  
127.                  1)title:该DataGrid面板的标题文本。  
128.                  2)iconCls:一个CSS类，将提供一个背景图片作为标题图标。  
129.                  3)border：当true时，显示该datagrid面板的边框。  
130.                  4)width:面板宽度，自动列宽。  
131.                  5)height:面板高度，自动列高。  
132.                  6)columns:该DataGrid列配置对象，查看column属性可获取更多信息。  
133.                  7)frozenColumns:跟Columns属性相同，但是这些列将会被固定在左边。  
134.                  8)striped:当true时，单元格显示条纹。默认false。  
135.                  9)method:通过该方法类型请求远程数据。默认post。  
136.                 10)nowrap:当true时，显示数据在同一行上。默认true。  
137.                 11)idField:说明哪个字段是一个标识字段。  
138.                 12)url:一个URL，从远程站点获取数据。  
139.                 13)loadMsg:当从远程站点加载数据时，显示一个提示信息。默认"Processing,please wait …"。自定义覆盖。  
140.                 14)pagination:当true时在DataGrid底部显示一个分页工具栏。默认false。  
141.                 15)rownumbers:当true时显示行号。默认false。  
142.                 16)singleSelect:当true时只允许当前选择一行。默认false。  
143.                 17)fit:当true时，设置大小以适应它的父容器。默认false。  
144.                 18)pageNumber:当设置分页属性时，初始化的页码编号。默认从1开始  
145.                 19)pageSize:当设置分页属性是，初始化的页面大小。默认10行  
146.                 20)pageList:当设置分页属性时，初始化页面的大小选择清单。默认[10,20,30,40,50]  
147.                 21)queryParams:当请求远程数据时，也可以发送额外的参数。  
148.                 22)sortName:定义哪列可以排序。  
149.                 23)sortOrder:定义列的排列顺序，只能是'asc'或'desc'。默认asc。  
150.              Column属性如下：  
151.                  1)title:该列标题文本。  
152.                  2)field:该列对应的字段名称。  
153.                  3)width：列宽。  
154.                  4)rowspan:说明该单元格需要多少行数。  
155.                  5)colspan:说明该单元格需要多少列数。  
156.                  6)align:说明Column数据的对齐方式。'left'，'right'，'center' 都可以使用。  
157.                  7)sortable:当true时，允许该列进行排序。  
158.                  8)checkbox:当true时，允许该列出现checkbox。  
159.              事件如下：  
160.                  1)onLoadSuccess:当远程数据加载成功是激活。  
161.                  2)onLoadError:当远程数据加载发现一些错误时激活。  
162.                  3)onClickRow:当用户点击某行时激活，参数包含：  
163.                     rowIndex: 点击的行索引，从0开始。  
164.                     rowData: 点击行时对应的记录。  
165.                 4)onDblClickRow:当用户双击某行时激活，参数包含：  
166.                     rowIndex: 点击的行索引，从0开始。  
167.                     rowData: 点击行时对应的记录。  
168.                 5)onSortColumn:当用户对某列排序时激活，参数包含：  
169.                    sort:排序字段名称。  
170.                    order:排序字段类型。  
171.                 6)onSelect:当用户选择某行时激活，参数包含:  
172.                    rowIndex: 点击的行索引，从0开始。  
173.                    rowData: 点击行时对应的记录。  
174.                 7)onUnselect:当用户取消选择某行时激活，参数包含:  
175.                     rowIndex: 点击的行索引，从0开始。  
176.                     rowData: 点击行时对应的记录。  
177.              方法如下：  
178.                  1)options:返回选择对象。  
179.                  2)resize:重调大小，生成布局。  
180.                  3)reload:重新加载数据。  
181.                  4)fixColumnSize:固定列大小。  
182.                  5)loadData:加载本地数据，过去的行会被删除。  
183.                  6)getSelected:返回第一个选中行的记录，若未选返回null。  
184.                  7)getSelections:返回选中的所有行，当没有选择记录时将返回空数组。  
185.                  8)clearSelections:清除所有选项的选择状态。  
186.                  9)selectRow:选择一行，行索引从0开始。  
187.                 10)selectRecord:通过传递一个ID值参数，选择一行。  
188.                 11)unselectRow:取消选择一行。  
189.   
190. 7、div easyui-tabs                         生成一个tab容器。  
191.              属性如下：  
192.                  1)width:容器宽度，自动列宽。  
193.                  2)height:容器高度，自动列高。  
194.                  3)idSeed:该根id衍生成标签面板DOM id属性。默认0  
195.                  4)plain：当true时，该Tab渲染不使用容器背景图片。默认false  
196.                  5)fit:当true时，设置该Tab大小以适应它的父容器。默认false  
197.                  6)border:当true时，显示该Tab边框。  
198.                  7)scrollIncrement:  
199.                  8)scrollDuration:  
200.              事件如下：  
201.                  1)onLoad:当一个ajax Tab面板需要加载远程数据时激活。该参数跟jQuery.ajax的'success'函数效果相同。  
202.                  2)onSelect:当用户选择一个Tab面板时激活。  
203.                  3)onClose:当用户关闭一个Tab面板时激活。  
204.              方法如下:  
205.                  1)resize:重绘该Tab容器的布局。  
206.                  2)add:新增加一个Tab面板，该选项参数是一个配置对象，看Tab面板属性可获取更多信息。  
207.                  3)close：关闭该Tab面板，标题参数显示你要关闭的对象。  
208.                  4)select:选择一个Tab面板。  
209.                  5)exists:如果该Tab面板存在即显示。  
210.              Tab面板属性如下：  
211.                  1)id:该Tab面板DOM id属性。  
212.                  2)text:该Tab面板标题文本。  
213.                  3)content:该Tab面板内容。  
214.                  4)href:一个URL，加载远程内容以填充Tab面板。  
215.                  5)cache:当true时，缓存Tab面板，当href 属性设置后有效。默认true  
216.                  6)icon:增加一个CSS class图标以显示在Tab面板的标题旁。  
217.                  7)closable:当true时，该Tab面板将显示可关闭按钮，点击能关闭该Tab面板。默认false  
218.                  8)selected:当true时，该Tab面板将被选中。默认false  
219.                  9)width:面板宽度，自动列宽。  
220.                 10)height:面板高度，自动列高。  
221.   
222. 8、div menu-sep              生成一个菜单分隔线。  
223.   
224. 9、a easyui-splitbutton         生成一个菜单列。  
225.   
226. 10、div easyui-accordion        生成手风琴式下拉框。继承自panel  
227.   
228. 11、select easyui-combobox       生成一个组合下拉框。  
229.              属性如下：  
230.                  1)width:容器宽度，自动列宽。  
231.                  2)listWidth:该组合下拉框的宽度。  
232.                  3)listHeight:该组合下拉框的高度。  
233.                  4)valueField：把该基础数据的值名称绑定到组合下拉框中[value]。  
234.                  5)textField:把该基础数据的字段名称绑定到组合下拉框中[text]。  
235.                  6)editable:当True时，可直接在文字域中键入文本。默认true。  
236.                  7)url:一个URL，从远程加载列表数据。  
237.              事件如下：  
238.                  1)onLoadSuccess:当远程数据加载成功是激活。  
239.                  2)onLoadError:当远程数据加载发现一些错误时激活。  
240.                  2)onSelect:当用户选择一个列表选项时激活。  
241.                  3)onChange:当该字段的值发生改变时激活。  
242.              方法如下:  
243.                  1)select: 在下拉列表中选择一个值。  
244.                  2)setValue: 设置指定值到该字段。在'param' 参数可以是一个字符串或者一个JS对象。注:JS对象包含的属性对应valueField和TextField两个属性。  
245.                  3)getValue: 获取该字段的值。   
246.                  4)reload:   重新请求远程列表数据。  
247.   
248. 12、select easyui-combotree      生成一个组合树形框。  
249.             属性如下：  
250.             1)width:容器宽度，自动列宽。  
251.             2)treeWidth:该树形下拉框的宽度。  
252.             3)treeHeight:该树形下拉框的高度。  
253.             4)url:一个URL，从远程加载树形数据。  
254.              事件如下：  
255.              1)onSelect:当用户选择一个树形节点时激活。  
256.              2)onChange:当该字段的值发生改变时激活。  
257.              方法如下:  
258.              1)setValue: 设置指定值到该字段。在'param' 参数可以是一个树形节点ID值或者一个JS对象。注:JS对象包含的属性对应id和text两个属性。  
259.              2)getValue: 获取该字段的值。   
260.              3)reload:   重新请求远程列表数据。  
261.   
262. 13、body[div] easyui-layout      生成一个布局。  
263.             属性如下：  
264.             1)title:该面板标题文本。  
265.             2)region:定义布局面板的位置，包含下列值:north,south, east, west, center。  
266.             3)border:当True时显示布局面板的边框。默认为True。  
267.             4)split: 当True时显示一个分割符以使用户改变面板的尺寸。默认false。  
268.             5)icon:一个图标CSS类，在面板头部显示一个图标。   
269.             6)href:一个URL,以从远程站点加载数据。               
270.   
271. 14、div easyui-menu        生成一个菜单。  
272.             属性如下：  
273.             1)zIndex: Menu z-index样式。注释：z-index 属性设置元素的堆叠顺序。   
274.             2)left:菜单左起位置。默认0。  
275.             3)top: 菜单顶部位置。默认0。  
276.             4)href:当点击菜单项时能在当前浏览器窗口显示不同的网址。  
277.             事件如下:  
278.             1)onShow:激活后显示菜单。  
279.             2)onHide:激活后隐藏菜单。  
280.             方法如下:  
281.             1)show:在指定的位置显示一个菜单。该位置上包含两个参数：  
282.                 left:新的左起位置。  
283.                top:新的顶部位置。  
284.             2)hide:隐藏一个菜单。  
285.   
286. 15、a easyui-menubutton       生成一个菜单按钮。   
287.             属性如下：  
288.             1)disabled:当True时禁用该按钮。默认false。  
289.             2)plain:当True时显示一个普通效果。默认false。  
290.             3)menu:一个选择器名称，用来创建相应的菜单。  
291.             4)duration: 当悬停该按钮时，定义菜单的持续显示时间，单位为毫秒。默认100。  
292.   
293. 16、input easyui-numberbox      生成一个数字输入框。  
294.             选项如下:  
295.             1)min:允许的最小值。当输入值小于最小值时，显示最小值。  
296.             2)max:允许的最大值。当输入值大于最大值时，显示最大值。  
297.             3)precision:分隔符后能的小数点位数。整数默认会追加小数点位数。   
298.   
299.   
300. JS定义：  
301. 1、 .window            生成一个window窗口。  
302.   
303. 2、 .tree                  生成一个树形结构。  
304.   
305. 3、 .datagrid           生成一个表格。  
306.   
307. 4、 .combobox        生成一个组合下拉框。  
308.   
309. 5、 .combotree       生成一个组合树形框。  
310.   
311. 6、 .dialog               生成一个对话框。它继承自window  
312.       私有属性如下：  
313.                  1)title:该对话框标题文本。默认"New Dialog"。  
314.                  2)collapsible:当True时可显示折叠按钮。默认false。  
315.                  3)minimizable:当True时可显示最小化按钮。默认false。  
316.                  4)maximizable:当True时可显示最大化按钮。默认false。  
317.                  5)resizable:当True时能重绘对话框大小。默认false。  
318.                  6)toolbar:该工具栏置于对话框的顶部，每个工具栏包含:text, iconCls, disabled, handler等属性。  
319.                  7)buttons:这个按钮置于对话框的底部，每个按钮包含:text, iconCls, handler等属性。  
320.   
321. 7、 .draggable          生成一个可自由拖动的块。  
322.       属性如下:  
323.               1)handle:选择"#id"进行拖动。  
324.               2)disabled:当True时停止自由拖动。默认false。  
325.               3)edge:开始拖动拖动块时的宽度。默认0。  
326.               4)axis:当拖动块移动时定义轴，可选值是'v'或者'h',当超出'v'和'h'的方位时将设置为null。  
327.      事件如下：  
328.                  1)onStartDrag:当目标对象开始拖动时激活。  
329.                  2)onDrag:在拖动期间激活。返回false将不会实际拖动它(的位置)。  
330.                  3)onStopDrag:当目标对象停止拖动时激活。  
331.   
332. 8、 .linkbutton          生成一个链式按钮。  
333.   
334. 9、 .messager           生成一个消息框。  
335.              选项如下：  
336.                  1)ok:显示确定按钮文本。  
337.                  2)cancel:显示取消按钮文本。   
338.              方法如下:  
339.              1)show:在屏幕的右下角出现一个消息框。该选项参数是一个配置对象，它包括：  
340.                 showType:定义消息框显示的模式，可选值包括:null,slide,fade,show.默认slide.  
341.                 showSpeed: 定义消息框完成显示的时间。默认600毫秒。  
342.                 width: 定义消息框的宽度。默认250。  
343.                 height:定义消息框的高度。默认100。  
344.                 msg:定义消息框显示的文本。  
345.                 title: 在消息框面板头部显示标题文本。  
346.                 timeout: 如果定义为0,消息框将不会自动关闭，除非用户手动关闭它。如果定义为非0值，消息框会在超时结束时自动关闭它。单位毫秒。  
347.              2)alert:显示一个打印窗口。它的参数如下:  
348.                 title: 在头部显示标题文本。  
349.                 msg:显示文本内容。  
350.                 icon: 显示图标。可选值:error,question,info,warning。  
351.                 fn: 当窗口关闭后触发回调函数。  
352.              3)confirm:显示一个包含确定和取消按钮的确认消息框。参数包括:  
353.                 title:在头部显示标题文本。  
354.                 msg: 显示文本内容。  
355.                 fn(b):回调函数，当用户点击OK按钮，返回True,才会处理该函数，其它按钮返回false,不处理。  
356.              4)prompt:显示一个消息框，包含OK和Cancel按钮并提示用户输入一些文本。参数包括:  
357.                 title:在头部显示标题文本。  
358.                 msg:显示文本内容。  
359.                 fn(val):该回调函数处理用户输入的参数值。   
360.   
361. 10、 .pagination         生成一个页码工具条。  
362.            属性如下：  
363.             1)total:当分页条创建后设置的记录数。默认1。  
364.             2)pageSize:页面大小。默认10。  
365.             3)pageNumber:当分页创建后显示的页码。默认1。  
366.             4)pageList:用户能更改页面的大小。您也可以改变该属性定义的默认大小。默认[10,20,30,50]。  
367.             5)loading:定义是否正在加载。默认false。  
368.             6)buttons:定义自定义按钮，每个按钮都包含两个属性:  
369.                iconCls: 该CSS类将显示一个背景图标。  
370.                handler: 当按钮点击时触发一个处理函数。  
371.             7)beforePageText:当输入组件前显示一个标签文本。  
372.             8)afterPageText:当输入组件后显示一个标签文本。  
373.             9)displayMsg:显示一个页面信息。  
374.            方法如下:  
375.             1)onSelectPage:当用户选择一个新页面时激活。该回调函数包括两个参数:  
376.                pageNumber: 该新页面的页码。  
377.                pageSize:该新页面的大小。  

一、图标的定义

1. 什么是图标

图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。

2. 什么是功能图标

功能图标是具有指代意义且具有功能标识的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。

二、图标的种类

• 具象图标：保持事物本来固有形态进行优化设计。如汽车，轮船，飞机，车票……
• 抽象图标：不是一个具体的事物，更趋于概念化。如个人中心，空间，模式，最近等。

三、图标的风格

1. 面性图标

面性图标是由一根封闭的线造成了面，面性图标同样具有大小、形状、色彩、肌理等造型元素。直面图标具有稳重、刚毅的男性化特征；曲面具有动态、柔和的女性化特征。

不透明度图标

不透明度图标是通过调节图标的部分面性结构来增加层次感，从配色角度属于同色系。

△ NO-921

光影图标

三大面五大调，通过调节面的反光和阴影来增加面性图标的纹理。在扁平时代的今天保留着微拟物风。

多彩色图标

多彩色给人很酷炫的感觉，从明度角度还是要提取深浅的颜色来代表图标的黑白灰。

△ Kyle Anthony Miller

2. 线性图标

线性图标是通过粗细一致的线条绘制，高度概括出来的图标，既能让人赏心悦目，又给用户带来创造和应用的乐趣。

圆角图标

圆角图标给人以亲和力，也有柔软，软弱的一面。在图标设计越来越精美的今天，圆角图标的应用行业已经越来越广泛。比如女性，母婴，儿童，旅游……

△ Stephen Andrew Murrill

直角图标

直角图标给人以锐利，坚强，果断，不拖泥带水的一面。让人眼前一亮的是魅族系统Flyme6 里面的图标它就是用的直角，给人明快干净的感觉。真正更好的诠释它内在含义的非京东金融里的图标了 ，投资理财的时候需要人们果断作出判断。理财有风险，投资需谨慎。直角的感觉让人当机立断，不拖泥带水，快买快出。如果用圆角就感觉柔一点，感觉做事优柔寡断。所以一下子在金融领域被做成了标杆式的功能图标。

断点图标

断点图标是点线面演化的一种产物。在最开始UI兴起的时候，设计师们不满足于单线条的功能图标，通过点线面增加形式感。最早新浪体育运用到这一风格，算是还是很不错的一种风格。很遗憾只留在了我的记忆力，网上并没有找到之前的设计。

△ Catalin Mihut

高光式图标

高光式图标是传统绘画的产物，我们在传统绘画的时候往往最后一笔都是添加高光，起到画龙点睛的效果。高光式的功能图标采用里细外粗的规律，和断点式功能图标差不多一个年代的产物。在不断扁平不断简洁的今天，也不会感觉那最后一笔也是多余的。

△ Udisk6353

不透明度图标

不透明度图标是调节图标的部分结构的不透明度来增加图标的层次。色彩上面跟双色图标是一样的，只不过从配色角度属于同色系的范畴。

△ Laura Reen

双色图标

双色图标在实际应用中非常广泛，也是很百搭的那种。一种可以有彩色跟无彩色结合，有彩色的颜色可以是企业色，可以是代表行业或者产品的颜色跟无彩色黑色相结合。一种是主体色跟点缀色组合而成的双色，但使用时要考虑到当前界面中的配色不宜过多，多了就容易花。

△ stay

线面结合图标

线面结合图标也是一种很出彩的风格，线是高度概括的图标，这时候面更多的是充当装饰点缀的作用。面的表现方式也有很多种，可以是单色的，渐变色的，也可以像 MBE风格那样提取主体结构形成的面，也可以提取图标里面有闭合路径所形成的面。这种风格应用也非常广泛。

△ Ted Kulakevich

△ Prakhar Neel Sharma

结构图标

结构图标算比较有争议性的图标，结构图标是我们学绘画的时候老师要我们起形，要开始绘画结构，对基础的三大面五大调有很好的理解。现在结构图标正好相反，比如对于一个具像图标，我们要分析出它的每一笔每一画，看清每一个结构，然后用固定的形式来表现出来。固定的形式可以像优酷图标的相交结构点，可以像上海玛娜花园一笔一个颜色，等等。

一笔画图标

一笔画图标是难度系数比较高的一种风格，也是我非常喜欢的一种风格，当才开始流行断点图标的时候，锤子设计师欧阳念念就提出了一笔画图标的概念，当时也是有争议的一种图标。当网易云音乐也出了这种图标后就更具有说服力。一般也很难驾驭，也基本都能做出来，但是视觉上看上去很舒服还是要有深厚的功底。

logo类图标

logo 类图标跟一笔画算是同等级别难度的，需要图标足够精致到可以直接拿来当应用图标，乃至于 logo。这种在app中屈指可数。最为经典的就当属网易云音乐的 logo 了，其实它也属于一笔画图标，同时又用做了 logo，它的含金量可想而知。

情感化图标

情感化图标是提取人的五官跟图标相结合具有拟人化的图标，这种拟人化的场景模仿人在真实场景的应用。QQ 的底部图标通过五官方向大小移动变化很好的表现出当前场景。QQ 开了先河，相信后续会有很多情感化图标出现，会有它的一席之地。

3. 如何转换线性图标与面性图标？

线性的闭合路径的图形变面性图标，闭合路径里面的线条反白，重要的关联结构线反白，让面性图标透气；线性的不闭合路径的图形变面性图标，应适当的增加线的粗度来达到视觉上的平衡。

△ Jory Raphael

△ Sebo

4. 如何去创造新的图标风格

绘画结构＋点线面＋色彩，绘画结构可以清晰的分析出事物的主体结构，勾勒出主体轮廓，对创造新的图标风格有很大帮助。绘画结构选的角度是人很熟知的角度，比如正面，尽量不要选择带有透视角度进行设计。点线面是设计的基础，通过从点线面角度去构思会获得更多的灵感。色彩方面可以是企业色、行业色、主题色、点缀色等等。（图design by Ted-Kulakevich and Graphéine ）

四、图标的特性

1. 统一性

大小的统一

在网页设计中图标的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移动端iOS规范中在2倍图下最适合人点击的区域大小为48*48px，iOS功能图标其他尺寸为48加或减4的倍数；安卓android 功能图标其他尺寸为48加或减8的倍数。为什么 iOS 是4的倍数，一个数除以2倍图在乘以3倍图要是偶数最小的数为4；为什么安卓android 是8的倍数，安卓开发中最小的单位是1dp,1dp=2px，同时也要满足一个数除以2倍图在乘以3倍图要是偶数最小的数为4，所以安卓要是8的倍数。在很多带有色块的图标，不仅要保证色块44*44pt的大小统一，也要保证里面色块里面的功能图标的大小统一。

风格的统一

风格上面已经归纳的很全了，直角图标和圆角图标基础上可以添加一个其他风格，如双色风格；但是剩余的其他风格最好就不要两两相加，不然就会给用户感觉很容易乱，也不够简洁，主次不明。

规范的统一

视觉的规范

为什么我们再同样的大小区域去绘制正方形、圆形、三角形，虽然符合了大小统一的特性，但是从视觉上还是不能看上去很均衡？这就需要我们规范化的去绘制图标，安卓android 规范里给出了图标的绘制方法。

圆角的规范

2. 简洁性

简洁性不单单体验在图标的简洁，还要体现在从创意到实际落地的简洁。在使用软件 ai 或者 sketch 的时候绘制基础图形不要出现小数点和基数，多用偶数。

3. 层次明确

图标具有可点击性和标识性。可点击性就会有点击前、点击时、点击后三种状态，主流底部标签栏会在点击前使用线性图标，点击时和点击后使用面性图标；也有使用颜色来区分。

4. 延展性

图标的延展性之前在图标的风格也讲到，好的图标可以直接当应用图标或者 logo 来使用。同时好的图标还可以通过点线面动效变化做下拉加载动画。

五、如何学会合理的设计功能图标？

1. 头脑风暴

头脑风暴看似一个不知道怎么解释的词，简单的说就是多动脑子，越用越活。头脑风暴不单单是这里用到，是所有设计师做设计之前必备工作。头脑风暴完你会觉得你的设计思路会很宽，然后就是要合理的分析每个的可行度，完成的工作量，自己当前设计的水平是否可以有效完成。其实很多设计师能有效的搜索到自己想要的东西也算是头脑风暴的一种，虽然你不会想出很多点子但还是很明确的知道自己想要什么，一定注意不要直接拿来主义，还是要通过平时的练习掌握更多的风格。为以后头脑风暴想出的很多点子能很好的实践出来。比如以旅游为主体进行头脑风暴，这个就能想到很多很多。

2. 搜集资料

搜集资料的时候要很好的提取关键词，直接从 iconutopia、iconfont、iconfinder、iconmonstr 搜索获取灵感。具象的事物可以看看该事物好的品牌公司的产品，品牌公司的工业设计相对较好，对后面提取元素也会有很大的帮助。也可以通过提取好的关键词，翻译成英文，再到国外的网站追波、be搜上一搜看看。搜索到的素材和元素一定要再设计，不能拿来直接用。

3. 提取元素

提取元素又归结到绘画结构中去了，绘画好的看到具象事物，心里默默打开一个灯，三大面五大调，光影关系都有了。不是很理解的还是多练习吧。具象图标就是提取主要轮廓线，保留可要可不要的元素，到最后的时候做统一删减；抽象图标有时候确实没有一点的思路的时候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找，找到了合适的还要进行 redesign。有想法后选择一种图标风格这样的绘制效率会很快。

4. 规范化

上面元素提取好后，需要开始选择一种图标风格进行绘制。开始绘制的时候不要过于追求图标的风格，还是要从图标本身出发快速的绘制好。等全部绘制好了突然想换一种图标风格也是很快的，水到渠成。可能刚开始很难在规范化的框框里直接就提取元素开始绘制，那就只能先绘制要你想要创意的元素图标，全部画好后在统一的规范里面再绘制一遍。规划化的目的就是让图标统一，任何两个图标拿出来从视觉大小、风格都是一个统一的整体。

5. 加减法

一套图标绘制好了之后还是在放在一起看一下整理的感觉，最后通过加减法适当的修修补补，对于视觉上看上去过于繁琐的图标要保留大轮廓的同时减少结构达到视觉平衡；对于确实很简单但有没办法添加任何的东西元素来增加的为它做加法的时候是否可以放大，来增加它的视觉丰满感。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1.总结

任何人都抵挡不了时间的力量，你可以斥责它的无情，也可以赞美它的给予，在这个成长的历程中，我们寻找的不是时间给我们带来了什么，而是这个过程中我经历了什么。后者，才是我们需要深思并感恩的。

与「用户体验」一样，许多人会评判一个产品用户体验的好与差。但是「好」与「差」只是整体上的一种结论，普通人可以说这两个字。但作为设计师，必须懂得在体验过程中，知晓哪里好与哪里差，更要知道为什么好为什么差。

就好像评书似的，真正读过某本书的人，不会单纯的说：「这本书太好/烂了」。他一定会有一种感悟，哪怕只是一句话。

既然是为了提升「用户体验」，就得与用户一起进行体验的走查，才能有根据的进行优化。

一般我们会建立一种用户体验路径，其目的是为了了解用户的动机、关注点和需求点。所以为了提升用户体验，就必须邀请用户参与体验路径的设计过程。

用户在使用一款产品时，他们中的大多数只是为了完成某个任务，所以在这个过程中，也许用户只使用了部分功能，也可能使用了所有功能。

因此，不要将体验路径的设计限制在特定的产品或功能服务上，要理解完整的用户体验路径，针对性的进行走查，与用户一起提升产品易用性。

一、让用户参与产品设计流程

真实的用户体验路径需要通过不同用户的参与互动，不管是一对一的讨论或焦点小组，都需要大量的数据才能得出真实的结论。

任何没有基于研究报告的尝试、假设、数据，都将使它在很大程度上只是理论性的。所以我们一定要通过不同用户的不同体验结论，客观的进行分析路径中的哪一环可以继续优化。

与用户的交流沟通是其中的关键，在用户的帮助下，你很容易找到可提升的体验点。

因为，用户情绪的波动和心情的愉悦、满足、怀疑、失望以及懊悔的表现是无法在报告中准确反映出来的，所以设计师要重视这些用户反馈，包括这些互动的场景可以使设计师产生共鸣，通过同理心来设计并优化功能。

然而，没有任何产品或功能服务能够满足过程中的所有用户需求，所以，要深入了解每一个阶段出现的需求点，因为它们都会衍生出不同的因素，这使我们能够理解产品如何更好的服务于用户的生活。

同样，没有任何灵丹妙药能积极地改变用户体验，而是通过与用户的持续接触。也许你会说很难进行与用户直接的对话，所以你通过客服回访、用户反馈等方式收集信息也未尝不可。

可能到这里你还没有完全明白其中的道理，下面我举个例子详细说明。

二、拆解 – 用户体验之旅

让我们来举一个旅游平台的例子，这个平台是供于各种各样的人和商务旅行者使用的，其中包括了航班、酒店、出租车租赁等在内的度假套餐。

为了让各位深入了解体验路径，以及更好地了解我们的用户，让我们对旅行者的体验路径也做一个拆解。如下图：

这个路径将全面地了解用户的想法、感受和行为，因为他们会经历不同的阶段，帮助填补我们路径中的空白点，帮助我们更好的进行产品的设计。

1. 计划旅行

在计划旅行时，设计师认为用户的想法是什么？

• 目的：休息、假期、出差；
• 目的地的候选名单，检查距离和到达目的地的时间；
• 出行方式选择：飞机、火车、巴士、游轮、自驾；
• 查看酒店位置与评论好坏；
• 评估旅行成本（如航班、酒店等费用）；
• 可取消功能（如已订的航班、酒店等）。

2. 用户角度

通过与用户的走查、回访、反馈，可以帮助我们了解用户内心真实的想法，帮助我们增强以及简化用户的体验方式。

• 在条件允许的情况下，提供尽可能多的价格；
• 经常出差的人会为了飞机上的最佳座位而自愿增加费用；
• 出来旅行的家庭想要知道目的地有哪些有趣的儿童活动；
• 显示符合用户自定义预算的旅行套餐；
• 帮助用户估算旅行成本；
• 给出评价信息，可供用户评判（朋友、预订平台、Facebook等）。

3. 特殊情况

产品是否有处理特殊情况的功能？

• 由于个人原因，推迟了旅行计划；
• 目的地天气或其他情况不利。

我们是否可以帮助用户更好地应对这些情况？通过及时提供有关目的地天气状况、备选旅行计划或建议类似目的地的信息等。

那么通过第一个内容的拆解，我们就可以发现，这个点能做的功能就有很多。而且这些功能还能排列优先级，设计师能主动进行推进，提升设计师自身的价值。功能走查的重要性相信各位也看出来了。下面继续。

1. 完成预订

是时候确定目的地、日期、旅行方式和停留地点了。（依然是设计师角度）

• 设计有序、直观的预订体验；
• 安全流畅的付款流程，包括多种支付渠道的选择；
• 旅行模式的确认细节，包括驾驶方向和帮助热线电话号码；
• 酒店确认：房间详情和热线电话。

2. 用户角度

• 直接能从航空公司/酒店确认信息，这样会比旅行社确认更具价值；
• 目的地指南（视频、天气、穿着、提示、要做的事情、文化等）；
• 建议的旅行路线；
• 紧急求助热线（如果客户在预订过程中拨打电话，呼叫应该能及时取得联系）。

3. 特殊情况

• 预订未确认，付款已处理。

1. 出行与酒店

设计师考虑的用户需求。

• 舒畅的旅行体验（飞行准时等）；
• 入住酒店，快速办理手续；
• 干净，方便，光线充足的房间（特别是床，洗手间）；
• 体验当地的美食和文化；
• WiFi 覆盖；
• 干净整洁的出租车等交通工具；
• 与家人和朋友实时分享照片；
• 合理的分配时间。

2. 用户角度

• 主动跟踪用户的行程，确保一切顺利（发送提醒，与酒店确认）；
• 目的地指南（事件、当地交通、天气、衣服、提示、要做的事情等）；
• 当地餐厅/购物券/优惠等。

3. 特殊情况

• 航班延误或取消；
• 紧急的医疗情况；
• 信用卡透支。

1. 旅程与归来

旅途中的回忆和收获。

• 在脸书/ Instagram / Twitter / WhatsApp 上共享更新和照片；
• 与家人和朋友分享经验；
• 回忆当地的美食；
• 经验与旅游前的期望不相符，过度炒作；
• 航班和酒店服务；
• 评论旅程的整体情况。

2. 用户角度

• 提醒携带基本药物；
• 帮助预支旅行预算；
• 关于外汇转换；
• 当地医疗建议、

3. 特殊情况

• 剩下的钱如何兑换；（如国外游）
• 退款；
• 行李丢失。

通过以上的拆解说明，可见体验路径对于功能设计的重要性，各位设计师一定不要主观认为「你就是用户」，而是结合用户需求进行分析，设计出更合理的功能。

小结

设计师要不断完善用户的体验路径模式，因为它会一直发展，将产品优化的越来越好，而不仅仅是停留在：「这个产品我做完了」的想法上。

所以为什么说用户体验是一种过程？因为它始终在不断变化，所以作为设计师也要持续的自我增值，才能跟上产品迭代、时代发展的步伐。

用户体验是一种过程，而不是结果

众所周知，系统的更新是为了增强系统的稳定性，优化流畅性，有的则是优化了续航，修复BUG，优化安全性等等。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

#@author Q群542110741 # -*- coding:utf-8 -*- import requests from lxml import etree

header = { 'User-Agent':'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:60.0) Gecko/20100101 Firefox/60.0', 'Host':'soccer.hupu.com', 'Referer':'https://soccer.hupu.com/'}
i = 0 while 1: #构建循环页面翻页 url = 'https://soccer.hupu.com/home/latest-news?league=世界杯&page=' i += 1 #获取json数据，一页20个 html = requests.get(url+str(i),headers=header).json()['result'] for info in html:
        time_r = info['time']#发布时间 title = info['title']#标题 url_r = info['url']#新闻链接 origin = info['origin']#来源 print(title)
        print('发布时间:',time_r,' '*5,'来自：',origin)
        head = header
        head['Host'] = 'voice.hupu.com'#更改header中Host参数 html_r = requests.get(url_r,headers=head)#获取新闻详情 html_r.encoding = 'utf-8'#编码格式指定 #获取div下的所有文本 datas = etree.HTML(html_r.text).xpath('//div[@class="artical-content-read"]')[0].xpath('string(.)').strip()
        print('\n'+'内容：'+'\n'*2,datas,'\n') #可由用户手动退出循环 if input('任意键继续，“q”退出') in ['q', 'Q']:
            exit()
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

    

版式设计对于新手来说往往会给人无从下手的感觉，作为平面设计师，该如何做好排版，设计好版式。这里总结出八种漂亮版式设计的八个实用技巧。

渐变这一视觉趋势，在最近几年里可谓如日中天。很多平平淡淡的设计，将平涂改为渐变，立刻就能增加醒目感。

• 虽说渐变是一个有效的元素，但为什么我们的渐变，还是和大神们的渐变有区别？
• 我们应该怎样做出渐变的质感？
• 为什么说用色才是渐变的精髓？

今天我们就来和大家聊聊渐变这个话题，深入了解我们似乎以为自己懂了的渐变，我们将和大家一起分析渐变配色中，利用色彩不同特性之间的对比来用色，以及一些简单的操作小技巧。比如快速生成一个色轮，以及简单的利用混合工具来配出渐变配色的色彩。

渐变是在色彩上的一个相对缓慢的过渡，我们的视觉会随着这个渐变的过渡而产生一种流动感，而这种流动感全凭在色彩上发生的种种变化。是的，我们的重点来了，就是这个变化，需要我们今天深入去加以了解。

谈到变化，我们自然会想到这个变化的范围。如果拿出我们的色轮来看，我们就会发现色轮上的变化范围有大有小，当两个色彩距离较近时，我们可以说他们是邻近色，这时难以发现他们的区别，直至我们的肉眼无法分辨。这时候可以说变化范围较小。

当两个色彩距离180，在色轮上呈相对，我们可以说这时的色彩变化是最大的，于是也就产生了最强烈的对比。很多撞色的情况，也是在这种对比下发生的。我们通常会把这对颜色称为互补色。

当然，实际的情况比这要稍微复杂一点，我们一起来看下。

一、色相对比

刚刚大家可以发现，这个色轮上的色彩的一个特点是什么？只有色相的变化。没错，我们平时也已经习惯了，只用色相来区分色彩。所以，今天要讲的第一个对比，也就是色相的对比。

色相的对比，在色轮上就能很直观的表现。例如红色和黄色这一段，截取过来以后，就变为了红 – 黄渐变。利用色环就能很轻松的实现色相的渐变。距离越远，渐变色的对比也就越大，互补色之间的对比达到了极值，比如红 – 蓝渐变的对比就大过红 – 黄渐变。

这里首先教给大家一个快速生成色轮的小技巧，这个技巧不需要利用网上的图片或工具。现做现用，很方便。

1. 小技巧：快速生成色轮

STEP 01

让我们先用这个自定义形状工具画出一个圆环。

STEP 02

然后在圆环里填充色彩，这里我们运用一个渐变叠加。

渐变叠加的叠加方式为角度渐变，渐变色这里选用「色谱」，没有找到这个渐变的小伙伴记得要追加色谱。

这时做出的色轮，在色彩上饱和度达到最大值。因此也能表现最强烈的色相对比。目前比较流行的渐变色是明度偏高，饱和度居中的渐变，也像这样的糖果色，因此这时大家可以利用调整图层「色相/饱和度」来增加明度或降低饱和度。

2. 高能提醒：别被参数骗了

可能很容易被初学者忽略的是，我们在 PS 里的色彩（HSB）这个参数里看下，一般来说H-色相，S-饱和度，B-明度，这里的情况和我们在色彩学里学到的 HSB 有点小差异。

色相这里没有问题，但是饱和度和明度，尤其是饱和度上面，大家可以看到一般来说饱和度时，色彩是慢慢失去色度，也就是呈现灰色，但是在软件里把 S 这个值调到最小呈现出是白色；还有另一个属性：明度，最大的明度，应该是白色，在软件里的 B 这个参数调到最高时，并不是白色。

在 PS 里，只有把色彩放到「色相/饱和度」这个工具里，才会看到和我们书里的概念表现一致的特性。

3. 工具不同，渐变也就不同

运用色环配出的渐变色和直接利用渐变工具配出的渐变色还有差别的，最重要是体现在颜色的过渡上。如果是用渐变工具选择了左边绿色，右边紫色的渐变色，在中间出现的过渡色就表现出一种发灰的色彩。如果所选用的两端的颜色是在色环上距离有定的角度，就会出现这种灰色。这是因为两种颜色彼此混合所造成的。有些情况下，确实是需要这样过渡的，这就直接用渐变工具来做渐变。

另外一个情况就是不希望色彩发灰，这时需要用到色环，在色环上根据所需要的渐变过渡来选取不同的色彩配置。

可以看出来，尽管没有饱和度、明度的变化，色彩仍然是彼此之间所表现的特质都很独特，所以基本上利用色相对比，就能配出非常优秀的渐变作品。

一般来说，渐变本身就足够吸引人，有渐变参与的情况下，我个人的建议是色彩不要太多，尽量少元素，整体风格倾向极简，这时最能发挥渐变色这种特质的魅力。

这个案例中的渐变过渡，中间的这个红色和蓝色的渐变就是用渐变工具做出来的，两边的渐变都是取用了色环上的渐变过渡，可以看到色彩上两边的渐变中的色相更多，更饱满，饱和度和明度都没有丧失，而中间的渐变在红蓝之间的过渡出现了饱和度较低的紫灰色。

二、色温对比

色温是什么？色温更多是色彩对人的主观的心理因素的影响。虽说是主观，但是大家的整体倾向还是比较类同。比如蓝色清凉，红色温暖。

所以，把色环上的色彩根据主观温度进行一个划分，就有了我们经常听说的暖色和冷色。冷暖色虽然无法用属性值来进行衡量，但是却在色彩中发挥不小的作用。

1. 获得平衡感

渐变中加入色温这个属性，这个游戏就会更好玩。一般来说，为了达到配色平衡，我们的配色中需要冷暖进行平衡，这里的平衡并非是1：1的严格配比，而是彼此渗透，双方根据位置、面积、形状等等元素的共同参与，共同实现一个版面的平衡。当然，这不是件容易的事，但这是我们配色中的方向之一。

回到我们的色温对比，要体现在渐变中，就是要有冷色和暖色的参与。一般来说，在比较简单的过渡性双色渐变里，一个冷色一个暖色是非常常见的表达方式。还是拿刚刚那个案例来看，左边两个配色就是冷暖的过渡，而右边的配色相对来说偏暖，当然相比之下，洋红色还是比橙色会更偏冷一些。

2. 绿色和紫色：冷暖不定

冷暖色的对比都是在同一个版面内的一个动态对比，尤其对于绿色和紫色这个范围内的色彩来说的话更是如此。比如绿色，在和蓝色搭配的时候，由于蓝色是绝对的冷色，所以绿色就表现出暖色的特质；而绿色如果和橙色搭配，橙色又是绝对的暖色，所以绿色又表现出冷色的特性。紫色也是同样的情况，和蓝色搭配它偏向暖色，而和橙色搭配时它又是偏冷的。

用起来其实也很简单，如果你的配色中发现整体感觉偏冷，就增加暖色。如果太暖，那就增加冷色调。如果整体的配色看不出哪里不对劲，但总觉得色彩有点奇怪，就先看看色温是不是实现了平衡。

三、明度对比

再增加一个属性，渐变这个游戏又增加难度了，明度这个属性表现为颜色的明暗程度，明度引入了另一个性质：光。其实我们平时看到的色彩就是因为有了光，才有了颜色。但是一般来说我们会把光简单归属于「发光」这个行列。事实上，由于光线的折射，我们视网膜接受到光的波长，才产生了色彩。那么光线的强烈与否，就会影响这个颜色的表现。

明度的对比，是所有颜色属性当中，最容易被觉察到的。我们可以简单来看，我们的素描就是利用明暗来表现物体，黑白灰能毫不费力表现现实中光的感觉。所以在配色中，有了明暗对比，是一个很好表现色彩感染力的元素。

1. 表现立体感

即使明度相同，我们的色彩明暗程度（从主观感受来说），也是不一样的。比如相同明度的黄绿色和紫色，在明暗表现上，黄绿色明显更亮，更靠前。如果让这两个色彩之间发生渐变关系，这样的表现就很像左上角有光渗入进这块平面中。如果进一步降低的紫色的明度，这时，明度的对比就更为强烈。这时很适合表现出某种立体感。

当然，我们的色彩并非一定要有立体感才能生动，有些配色大师，会刻意去弱化立体感，所以会尽量避免明暗的对比。但是，作为初学者，一定要知道明暗对比，懂得在适当的情况下拿来使用。

尤其是在同色系或者邻近色色系的渐变里，明度对比是一个增加立体表现力的方式。有些时候，平涂的方式看起来呆板单调，利用同色系渐变就能很好解决这个问题。两个色彩之间可以非常近似，即便如此，还是和平涂有差别。有了光的感觉就要随时注意受光的方向，在整个画面里保持全局光，所谓全局光，换个简单的说法就是大家都在同一光源照射下。

我们可以再和大家演示一下，例如这里有两个圆，这两个圆都是填充为紫 – 绿渐变，这时的紫和绿是同样的明度。这里注意，就算是同样明度，两个颜色在直观的感觉上，明暗程度也是有差别的，比如绿色会稍微亮一点。这时打开渐变工具，在后边的绿色这一端色彩，将它的明度调高，这时大家会发现，右边这个圆就变为了一个球体。

2. 从黑白灰开始

明度渐变还是增加作品细腻程度的一个方法，我们和大神的差距，也许真有可能就是一处小小的明暗关系的不同。别忘了，明度对比对整体效果所发生的影响是最大的，但也是我们最容易忽略的，有时候一旦有了颜色，我们的焦点都在色调和色度上。但其实所有的配色，比如我们做设计，一开始总是从黑白灰开始做起，先配置好明度，然后再开始根据明度来选择用色。

有了对明度的把握，我想我们对色彩的把握才能上升到新的层次，否则，我们在一堆色彩里，很容易迷失方向。

四、色度对比

这里说的色度，也被叫饱和度，有的书上也叫彩度，拿我们日常用语讲就是鲜艳程度。色度对比越强，尤其是色轮上的互补色，在他们色度都达到最大时，会撞出最大的火花，产生最强烈的效果。

有时候这种高彩度的配色用在动感很强的设计中，看上去活力四射。但这种互补色之间也会发生彼此互斥的关系，造成整个版面的凌乱，所以要非常谨慎的对待色度。

空气透视 – 空间感的塑造

色度对比最常见的就是用在空间感的塑造上，大家都知道，色度越高，在视觉上会制造一种「更近」的效果。

举例来说吧，我们这里可以画一个梯形，这个梯形用渐变来填色。如果用单色，大家一定感觉不出空间感。如果我们采用渐变，使得同一个颜色，比如紫红色，在这个梯形上，由上到下做一个渐变，这个渐变中两端的色彩，在色度上有差距。那这时就能体现出一个慢慢延伸到远方的感觉。甚至还能有种暴露在空气中，被空气弱化的视觉效果。这个也运用在插画中，也被叫做空气透视。

色彩浓度的强弱对比，和其他的色彩的属性相结合，配色就变得更复杂。但是通常来说，配色并没有标准答案。所以导致很多人在配色的时候，都是依靠一种感觉在操作。其实感觉的确是一个最直接的选色方法之一，但是并不是唯一的方式。大家如果对色彩有更深入的了解以后，就会慢慢理解感觉层面下的更有趣的东西。这个也是经验积累。

在饱和度这一环，PS 里如果觉得不是很靠谱，就像我之前和大家提过，那么大家可以进入到 AI 里，利用 AI 的混合工具来生成不同的色阶。例如我们在这里用一个高饱和度的红色和一个低饱和度的蓝色相搭配。应该说，这两端的色彩既有饱和度的对比，也有色调和明度的对比，还有色温的对比，应该说是对比是非常丰富的。所以，这一条矩形，用在背景色上，我个人感觉不是太合适。如果是做成一些特殊的效果，还是不错，比如设计字体的时候做笔画造型，或者做装饰的线条。

最后一个我们要略提一下，就是透明度的对比。尽管透明度不是标准的颜色属性中的一种，但是在我们软件操作当中，透明度是相当实用的。渐变的色彩，我们可以改变其中一个色彩的透明度，比如降低到0，那么一端的色彩消失不见，这样最容易造成一种浓雾的效果。

这个插画，是在设计我自己的个人网站时做的，其中这些背景中的立方体的某些块面，就是采用某一端降低透明度的效果。有一种在云端的感觉。

五、两个渐变配色网站推荐

1. Grabient

网站链接：https://www.grabient.com/

这个网站的工具很好用，我当时在群里推荐的时候，有人问我说这个和 PS 里的渐变工具有什么区别。我在刚刚其实已经和大家讲过，PS里的颜色的设置是有一些和我们的色彩理论不太符合的地方，但是这个渐变工具就完全符合我们对色彩属性的了解。所以在这里可以进行调试，再确定渐变的值，最后放到 PS 里用。

2. WebGradients

网站链接：https://webgradients.com/

这个网站，我相信大家应该不会陌生，好多地方都推荐过，这个渐变色是可以作为背景色来使用的。大家可以看到这上面大部分的渐变的明度都比较高，比较浅。过渡也非常细腻。这一点大家可以拿来当作自己配色的参考。

这两个工具以外，还有很多其他好用的工具我就不一一演示了，这是我用的比较多，而且觉得还挺实用的两个网站。

写在最后

其实色彩和音乐的感觉是最接近的，每个色彩对应每个音调，那经过组合以后就能表现出一定的情感。通常你也很难说，哪一首音乐是最好听的，因为每个人喜欢的音乐风格都不一样。但是总有那么一些歌是广为流传成为经典的。

所以要学会渐变，首先应该是了解色彩。我们不可能通过一篇文章就能完成学习，肯定是希望以这篇文章作为一个启发点，大家可以从中找到自己的学习的方向。