懒洋洋是一款为多伦多华人提供服务的订餐平台用户群一般为学生、白领等对于视觉上追求简约、舒适产品流程简易而顺畅（英文是用翻译软件翻的，如有错误，那就算了吧）

其实开始想写这个文章就像找共鸣这，吐槽一些关于老板什么也不懂，非得让UI设计师改来改去的事情，想了想还是算了，真的给那些刚步入UI设计或者是准备步入UI设计的小伙伴们一些好的方向或者说打打预防针才比较正经。

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

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，优化安全性等等。