懶洋洋是一款為多倫多華人提供服務的訂餐平臺用戶群一般為學生、白領等對于視覺上追求簡約、舒適產(chǎn)品流程簡易而順暢（英文是用翻譯軟件翻的，如有錯誤，那就算了吧）

其實開始想寫這個文章就像找共鳴這，吐槽一些關于老板什么也不懂，非得讓UI設計師改來改去的事情，想了想還是算了，真的給那些剛步入UI設計或者是準備步入UI設計的小伙伴們一些好的方向或者說打打預防針才比較正經(jīng)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

1. 此屬性列表請對照jQuery EasyUI 1.0.5.  
2.   
3. 屬性分為CSS片段和JS片段。  
4.   
5. CSS類定義：  
6. 1、div easyui-window        生成一個window窗口樣式。  
7.       屬性如下：  
8.                    1)modal:是否生成模態(tài)窗口。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:在面板內(nèi)容中增加一個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:當定義時該面板初始化時處于收縮狀態(tài)。默認false。  
32.                 20)minimized:當定義時該面板初始化時處于最小化狀態(tài)。默認false。  
33.                 21)maximized:當定義時該面板初始化時處于最大化狀態(tài)。默認false。  
34.                 22)closed：當定義時該面板初始化時處于關閉狀態(tài)。默認false。  
35.                 23)href:一個url，加載遠程數(shù)據(jù)并顯示在面板中。  
36.                 24)loadingMessage:當加載遠程數(shù)據(jù)時，在面板中顯示一個消息。默認Loading…  
37.              事件如下:  
38.                  1)onLoad:當遠程數(shù)據(jù)加載完畢后激活。  
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:左側(cè)新位置。  
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參數(shù)設置為true時，面板打開時繞過onBeforeOpen回調(diào)函數(shù)。  
65.                  7)close:當forceClose參數(shù)設置為true時，該面板關閉時繞過onBeforeClose回調(diào)函數(shù)。  
66.                  8)destroy:當forceDestroy參數(shù)設置為true時該面板銷毀時繞過onBeforeDestroy回調(diào)函數(shù)。  
67.                  9)refresh:當href屬性設置后刷新該面板以加載遠程數(shù)據(jù)。  
68.                 10)resize:設置面板的大小和布局。該options對象包含以下屬性:  
69.                      width：新的面板寬度。  
70.                      height：新的面板高度。  
71.                      left：新的面板左側(cè)位置。  
72.                      top：新的面板頂部位置。  
73.                 11)move:移動面板到一個新的位置。該options對象包含以下屬性：  
74.                      left：新的面板左側(cè)位置。  
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      驗證網(wǎng)絡地址。  
90.               3)missingMessage：當文本時出現(xiàn)空時彈出該工具提示，系統(tǒng)有默認[英文]，自定義可覆蓋它。  
91.               4)invalidMessage：當文本內(nèi)容無效后彈出該工具提示，系統(tǒng)有默認[英文]，自定義可覆蓋它。  
92.   
93. 5、ul easyui-tree         生成一個樹形結構。  
94.              屬性如下：  
95.               1)url:一個獲取遠程數(shù)據(jù)的地址。  
96.               2)animate:當展開或折疊節(jié)點時是否定義動畫效果。true[是] false[否] 默認false  
97.              節(jié)點屬性如下：  
98.              1)text:節(jié)點的顯示文本。  
99.              2)id:節(jié)點ID，對于加載遠程數(shù)據(jù)時非常重要。  
100.              3)state:節(jié)點狀態(tài)，'open'或'closed'，默認為'open'。當設置為'關閉'，該節(jié)點包含子節(jié)點，并將遠程站點加載它們(并非觸發(fā)再加載)。  
101.              4)attributes:為節(jié)點添加自定義屬性。  
102.              5)children:以數(shù)組節(jié)點的方式定義一些字節(jié)點。  
103.              事件如下：  
104.                  1)onClick:  
105.                     當用戶點擊一個節(jié)點時激活，該節(jié)點參數(shù)包含如下屬性：  
106.                     id：節(jié)點ID  
107.                     text:節(jié)點文本  
108.                     attributes:節(jié)點自定義屬性。  
109.                     target:目標點擊的DOM對象。  
110.               2)onLoadSuccess:  
111.                    當數(shù)據(jù)成功加載數(shù)據(jù)時激活，該參數(shù)跟jQuery.ajax的'success'函數(shù)效果相同。  
112.               3)onLoadError:  
113.                   當數(shù)據(jù)加載數(shù)據(jù)失敗時激活，該參數(shù)跟jQuery.ajax的'error'函數(shù)效果相同。  
114.              方法如下:  
115.                  1)reload:重新加載樹數(shù)據(jù)。  
116.                  2)getSelected:獲取選中的節(jié)點并返回它，如果沒有選擇節(jié)點將返回null。  
117.                  3)collapse:折疊一個節(jié)點，該目標參數(shù)是該節(jié)點的DOM對象。  
118.               4)expand:展開一個節(jié)點，該目標參數(shù)是該節(jié)點的DOM對象。    
119.               5)append:在一個父節(jié)點追加一些子節(jié)點。  
120.                     param有兩個屬性：  
121.                     parent:DOM對象，把它作為父節(jié)點追加(它們)。  
122.                     data:array，或者節(jié)點數(shù)據(jù)。  
123.               6)remove:刪除它以及它以下的子節(jié)點，該目標參數(shù)是該節(jié)點的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:通過該方法類型請求遠程數(shù)據(jù)。默認post。  
136.                 10)nowrap:當true時，顯示數(shù)據(jù)在同一行上。默認true。  
137.                 11)idField:說明哪個字段是一個標識字段。  
138.                 12)url:一個URL，從遠程站點獲取數(shù)據(jù)。  
139.                 13)loadMsg:當從遠程站點加載數(shù)據(jù)時，顯示一個提示信息。默認"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:當請求遠程數(shù)據(jù)時，也可以發(fā)送額外的參數(shù)。  
148.                 22)sortName:定義哪列可以排序。  
149.                 23)sortOrder:定義列的排列順序，只能是'asc'或'desc'。默認asc。  
150.              Column屬性如下：  
151.                  1)title:該列標題文本。  
152.                  2)field:該列對應的字段名稱。  
153.                  3)width：列寬。  
154.                  4)rowspan:說明該單元格需要多少行數(shù)。  
155.                  5)colspan:說明該單元格需要多少列數(shù)。  
156.                  6)align:說明Column數(shù)據(jù)的對齊方式。'left'，'right'，'center' 都可以使用。  
157.                  7)sortable:當true時，允許該列進行排序。  
158.                  8)checkbox:當true時，允許該列出現(xiàn)checkbox。  
159.              事件如下：  
160.                  1)onLoadSuccess:當遠程數(shù)據(jù)加載成功是激活。  
161.                  2)onLoadError:當遠程數(shù)據(jù)加載發(fā)現(xiàn)一些錯誤時激活。  
162.                  3)onClickRow:當用戶點擊某行時激活，參數(shù)包含：  
163.                     rowIndex: 點擊的行索引，從0開始。  
164.                     rowData: 點擊行時對應的記錄。  
165.                 4)onDblClickRow:當用戶雙擊某行時激活，參數(shù)包含：  
166.                     rowIndex: 點擊的行索引，從0開始。  
167.                     rowData: 點擊行時對應的記錄。  
168.                 5)onSortColumn:當用戶對某列排序時激活，參數(shù)包含：  
169.                    sort:排序字段名稱。  
170.                    order:排序字段類型。  
171.                 6)onSelect:當用戶選擇某行時激活，參數(shù)包含:  
172.                    rowIndex: 點擊的行索引，從0開始。  
173.                    rowData: 點擊行時對應的記錄。  
174.                 7)onUnselect:當用戶取消選擇某行時激活，參數(shù)包含:  
175.                     rowIndex: 點擊的行索引，從0開始。  
176.                     rowData: 點擊行時對應的記錄。  
177.              方法如下：  
178.                  1)options:返回選擇對象。  
179.                  2)resize:重調(diào)大小，生成布局。  
180.                  3)reload:重新加載數(shù)據(jù)。  
181.                  4)fixColumnSize:固定列大小。  
182.                  5)loadData:加載本地數(shù)據(jù)，過去的行會被刪除。  
183.                  6)getSelected:返回第一個選中行的記錄，若未選返回null。  
184.                  7)getSelections:返回選中的所有行，當沒有選擇記錄時將返回空數(shù)組。  
185.                  8)clearSelections:清除所有選項的選擇狀態(tài)。  
186.                  9)selectRow:選擇一行，行索引從0開始。  
187.                 10)selectRecord:通過傳遞一個ID值參數(shù)，選擇一行。  
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面板需要加載遠程數(shù)據(jù)時激活。該參數(shù)跟jQuery.ajax的'success'函數(shù)效果相同。  
202.                  2)onSelect:當用戶選擇一個Tab面板時激活。  
203.                  3)onClose:當用戶關閉一個Tab面板時激活。  
204.              方法如下:  
205.                  1)resize:重繪該Tab容器的布局。  
206.                  2)add:新增加一個Tab面板，該選項參數(shù)是一個配置對象，看Tab面板屬性可獲取更多信息。  
207.                  3)close：關閉該Tab面板，標題參數(shù)顯示你要關閉的對象。  
208.                  4)select:選擇一個Tab面板。  
209.                  5)exists:如果該Tab面板存在即顯示。  
210.              Tab面板屬性如下：  
211.                  1)id:該Tab面板DOM id屬性。  
212.                  2)text:該Tab面板標題文本。  
213.                  3)content:該Tab面板內(nèi)容。  
214.                  4)href:一個URL，加載遠程內(nèi)容以填充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：把該基礎數(shù)據(jù)的值名稱綁定到組合下拉框中[value]。  
234.                  5)textField:把該基礎數(shù)據(jù)的字段名稱綁定到組合下拉框中[text]。  
235.                  6)editable:當True時，可直接在文字域中鍵入文本。默認true。  
236.                  7)url:一個URL，從遠程加載列表數(shù)據(jù)。  
237.              事件如下：  
238.                  1)onLoadSuccess:當遠程數(shù)據(jù)加載成功是激活。  
239.                  2)onLoadError:當遠程數(shù)據(jù)加載發(fā)現(xiàn)一些錯誤時激活。  
240.                  2)onSelect:當用戶選擇一個列表選項時激活。  
241.                  3)onChange:當該字段的值發(fā)生改變時激活。  
242.              方法如下:  
243.                  1)select: 在下拉列表中選擇一個值。  
244.                  2)setValue: 設置指定值到該字段。在'param' 參數(shù)可以是一個字符串或者一個JS對象。注:JS對象包含的屬性對應valueField和TextField兩個屬性。  
245.                  3)getValue: 獲取該字段的值。   
246.                  4)reload:   重新請求遠程列表數(shù)據(jù)。  
247.   
248. 12、select easyui-combotree      生成一個組合樹形框。  
249.             屬性如下：  
250.             1)width:容器寬度，自動列寬。  
251.             2)treeWidth:該樹形下拉框的寬度。  
252.             3)treeHeight:該樹形下拉框的高度。  
253.             4)url:一個URL，從遠程加載樹形數(shù)據(jù)。  
254.              事件如下：  
255.              1)onSelect:當用戶選擇一個樹形節(jié)點時激活。  
256.              2)onChange:當該字段的值發(fā)生改變時激活。  
257.              方法如下:  
258.              1)setValue: 設置指定值到該字段。在'param' 參數(shù)可以是一個樹形節(jié)點ID值或者一個JS對象。注:JS對象包含的屬性對應id和text兩個屬性。  
259.              2)getValue: 獲取該字段的值。   
260.              3)reload:   重新請求遠程列表數(shù)據(jù)。  
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,以從遠程站點加載數(shù)據(jù)。               
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:當點擊菜單項時能在當前瀏覽器窗口顯示不同的網(wǎng)址。  
277.             事件如下:  
278.             1)onShow:激活后顯示菜單。  
279.             2)onHide:激活后隱藏菜單。  
280.             方法如下:  
281.             1)show:在指定的位置顯示一個菜單。該位置上包含兩個參數(shù)：  
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:一個選擇器名稱，用來創(chuàng)建相應的菜單。  
291.             4)duration: 當懸停該按鈕時，定義菜單的持續(xù)顯示時間，單位為毫秒。默認100。  
292.   
293. 16、input easyui-numberbox      生成一個數(shù)字輸入框。  
294.             選項如下:  
295.             1)min:允許的最小值。當輸入值小于最小值時，顯示最小值。  
296.             2)max:允許的最大值。當輸入值大于最大值時，顯示最大值。  
297.             3)precision:分隔符后能的小數(shù)點位數(shù)。整數(shù)默認會追加小數(shù)點位數(shù)。   
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:在屏幕的右下角出現(xiàn)一個消息框。該選項參數(shù)是一個配置對象，它包括：  
340.                 showType:定義消息框顯示的模式，可選值包括:null,slide,fade,show.默認slide.  
341.                 showSpeed: 定義消息框完成顯示的時間。默認600毫秒。  
342.                 width: 定義消息框的寬度。默認250。  
343.                 height:定義消息框的高度。默認100。  
344.                 msg:定義消息框顯示的文本。  
345.                 title: 在消息框面板頭部顯示標題文本。  
346.                 timeout: 如果定義為0,消息框?qū)⒉粫詣雨P閉，除非用戶手動關閉它。如果定義為非0值，消息框會在超時結束時自動關閉它。單位毫秒。  
347.              2)alert:顯示一個打印窗口。它的參數(shù)如下:  
348.                 title: 在頭部顯示標題文本。  
349.                 msg:顯示文本內(nèi)容。  
350.                 icon: 顯示圖標?？蛇x值:error,question,info,warning。  
351.                 fn: 當窗口關閉后觸發(fā)回調(diào)函數(shù)。  
352.              3)confirm:顯示一個包含確定和取消按鈕的確認消息框。參數(shù)包括:  
353.                 title:在頭部顯示標題文本。  
354.                 msg: 顯示文本內(nèi)容。  
355.                 fn(b):回調(diào)函數(shù)，當用戶點擊OK按鈕，返回True,才會處理該函數(shù)，其它按鈕返回false,不處理。  
356.              4)prompt:顯示一個消息框，包含OK和Cancel按鈕并提示用戶輸入一些文本。參數(shù)包括:  
357.                 title:在頭部顯示標題文本。  
358.                 msg:顯示文本內(nèi)容。  
359.                 fn(val):該回調(diào)函數(shù)處理用戶輸入的參數(shù)值。   
360.   
361. 10、 .pagination         生成一個頁碼工具條。  
362.            屬性如下：  
363.             1)total:當分頁條創(chuàng)建后設置的記錄數(shù)。默認1。  
364.             2)pageSize:頁面大小。默認10。  
365.             3)pageNumber:當分頁創(chuàng)建后顯示的頁碼。默認1。  
366.             4)pageList:用戶能更改頁面的大小。您也可以改變該屬性定義的默認大小。默認[10,20,30,50]。  
367.             5)loading:定義是否正在加載。默認false。  
368.             6)buttons:定義自定義按鈕，每個按鈕都包含兩個屬性:  
369.                iconCls: 該CSS類將顯示一個背景圖標。  
370.                handler: 當按鈕點擊時觸發(fā)一個處理函數(shù)。  
371.             7)beforePageText:當輸入組件前顯示一個標簽文本。  
372.             8)afterPageText:當輸入組件后顯示一個標簽文本。  
373.             9)displayMsg:顯示一個頁面信息。  
374.            方法如下:  
375.             1)onSelectPage:當用戶選擇一個新頁面時激活。該回調(diào)函數(shù)包括兩個參數(shù):  
376.                pageNumber: 該新頁面的頁碼。  
377.                pageSize:該新頁面的大小。  

一、圖標的定義

1. 什么是圖標

圖標是具有明確指代含義的計算機圖形。從功能分類角度分為啟動圖標、應用圖標、功能圖標。

2. 什么是功能圖標

功能圖標是具有指代意義且具有功能標識的圖形，它不僅是一種圖形，更是一種標識，它具有高度濃縮并快捷傳達信息、便于記憶的特性。

二、圖標的種類

• 具象圖標：保持事物本來固有形態(tài)進行優(yōu)化設計。如汽車，輪船，飛機，車票……
• 抽象圖標：不是一個具體的事物，更趨于概念化。如個人中心，空間，模式，最近等。

三、圖標的風格

1. 面性圖標

面性圖標是由一根封閉的線造成了面，面性圖標同樣具有大小、形狀、色彩、肌理等造型元素。直面圖標具有穩(wěn)重、剛毅的男性化特征；曲面具有動態(tài)、柔和的女性化特征。

不透明度圖標

不透明度圖標是通過調(diào)節(jié)圖標的部分面性結構來增加層次感，從配色角度屬于同色系。

△ NO-921

光影圖標

三大面五大調(diào)，通過調(diào)節(jié)面的反光和陰影來增加面性圖標的紋理。在扁平時代的今天保留著微擬物風。

多彩色圖標

多彩色給人很酷炫的感覺，從明度角度還是要提取深淺的顏色來代表圖標的黑白灰。

△ Kyle Anthony Miller

2. 線性圖標

線性圖標是通過粗細一致的線條繪制，高度概括出來的圖標，既能讓人賞心悅目，又給用戶帶來創(chuàng)造和應用的樂趣。

圓角圖標

圓角圖標給人以親和力，也有柔軟，軟弱的一面。在圖標設計越來越精美的今天，圓角圖標的應用行業(yè)已經(jīng)越來越廣泛。比如女性，母嬰，兒童，旅游……

△ Stephen Andrew Murrill

直角圖標

直角圖標給人以銳利，堅強，果斷，不拖泥帶水的一面。讓人眼前一亮的是魅族系統(tǒng)Flyme6 里面的圖標它就是用的直角，給人明快干凈的感覺。真正更好的詮釋它內(nèi)在含義的非京東金融里的圖標了 ，投資理財?shù)臅r候需要人們果斷作出判斷。理財有風險，投資需謹慎。直角的感覺讓人當機立斷，不拖泥帶水，快買快出。如果用圓角就感覺柔一點，感覺做事優(yōu)柔寡斷。所以一下子在金融領域被做成了標桿式的功能圖標。

斷點圖標

斷點圖標是點線面演化的一種產(chǎn)物。在最開始UI興起的時候，設計師們不滿足于單線條的功能圖標，通過點線面增加形式感。最早新浪體育運用到這一風格，算是還是很不錯的一種風格。很遺憾只留在了我的記憶力，網(wǎng)上并沒有找到之前的設計。

△ Catalin Mihut

高光式圖標

高光式圖標是傳統(tǒng)繪畫的產(chǎn)物，我們在傳統(tǒng)繪畫的時候往往最后一筆都是添加高光，起到畫龍點睛的效果。高光式的功能圖標采用里細外粗的規(guī)律，和斷點式功能圖標差不多一個年代的產(chǎn)物。在不斷扁平不斷簡潔的今天，也不會感覺那最后一筆也是多余的。

△ Udisk6353

不透明度圖標

不透明度圖標是調(diào)節(jié)圖標的部分結構的不透明度來增加圖標的層次。色彩上面跟雙色圖標是一樣的，只不過從配色角度屬于同色系的范疇。

△ Laura Reen

雙色圖標

雙色圖標在實際應用中非常廣泛，也是很百搭的那種。一種可以有彩色跟無彩色結合，有彩色的顏色可以是企業(yè)色，可以是代表行業(yè)或者產(chǎn)品的顏色跟無彩色黑色相結合。一種是主體色跟點綴色組合而成的雙色，但使用時要考慮到當前界面中的配色不宜過多，多了就容易花。

△ stay

線面結合圖標

線面結合圖標也是一種很出彩的風格，線是高度概括的圖標，這時候面更多的是充當裝飾點綴的作用。面的表現(xiàn)方式也有很多種，可以是單色的，漸變色的，也可以像 MBE風格那樣提取主體結構形成的面，也可以提取圖標里面有閉合路徑所形成的面。這種風格應用也非常廣泛。

△ Ted Kulakevich

△ Prakhar Neel Sharma

結構圖標

結構圖標算比較有爭議性的圖標，結構圖標是我們學繪畫的時候老師要我們起形，要開始繪畫結構，對基礎的三大面五大調(diào)有很好的理解?，F(xiàn)在結構圖標正好相反，比如對于一個具像圖標，我們要分析出它的每一筆每一畫，看清每一個結構，然后用固定的形式來表現(xiàn)出來。固定的形式可以像優(yōu)酷圖標的相交結構點，可以像上海瑪娜花園一筆一個顏色，等等。

一筆畫圖標

一筆畫圖標是難度系數(shù)比較高的一種風格，也是我非常喜歡的一種風格，當才開始流行斷點圖標的時候，錘子設計師歐陽念念就提出了一筆畫圖標的概念，當時也是有爭議的一種圖標。當網(wǎng)易云音樂也出了這種圖標后就更具有說服力。一般也很難駕馭，也基本都能做出來，但是視覺上看上去很舒服還是要有深厚的功底。

logo類圖標

logo 類圖標跟一筆畫算是同等級別難度的，需要圖標足夠精致到可以直接拿來當應用圖標，乃至于 logo。這種在app中屈指可數(shù)。最為經(jīng)典的就當屬網(wǎng)易云音樂的 logo 了，其實它也屬于一筆畫圖標，同時又用做了 logo，它的含金量可想而知。

情感化圖標

情感化圖標是提取人的五官跟圖標相結合具有擬人化的圖標，這種擬人化的場景模仿人在真實場景的應用。QQ 的底部圖標通過五官方向大小移動變化很好的表現(xiàn)出當前場景。QQ 開了先河，相信后續(xù)會有很多情感化圖標出現(xiàn)，會有它的一席之地。

3. 如何轉(zhuǎn)換線性圖標與面性圖標？

線性的閉合路徑的圖形變面性圖標，閉合路徑里面的線條反白，重要的關聯(lián)結構線反白，讓面性圖標透氣；線性的不閉合路徑的圖形變面性圖標，應適當?shù)脑黾泳€的粗度來達到視覺上的平衡。

△ Jory Raphael

△ Sebo

4. 如何去創(chuàng)造新的圖標風格

繪畫結構＋點線面＋色彩，繪畫結構可以清晰的分析出事物的主體結構，勾勒出主體輪廓，對創(chuàng)造新的圖標風格有很大幫助。繪畫結構選的角度是人很熟知的角度，比如正面，盡量不要選擇帶有透視角度進行設計。點線面是設計的基礎，通過從點線面角度去構思會獲得更多的靈感。色彩方面可以是企業(yè)色、行業(yè)色、主題色、點綴色等等。（圖design by Ted-Kulakevich and Graphéine ）

四、圖標的特性

1. 統(tǒng)一性

大小的統(tǒng)一

在網(wǎng)頁設計中圖標的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移動端iOS規(guī)范中在2倍圖下最適合人點擊的區(qū)域大小為48*48px，iOS功能圖標其他尺寸為48加或減4的倍數(shù)；安卓android 功能圖標其他尺寸為48加或減8的倍數(shù)。為什么 iOS 是4的倍數(shù)，一個數(shù)除以2倍圖在乘以3倍圖要是偶數(shù)最小的數(shù)為4；為什么安卓android 是8的倍數(shù)，安卓開發(fā)中最小的單位是1dp,1dp=2px，同時也要滿足一個數(shù)除以2倍圖在乘以3倍圖要是偶數(shù)最小的數(shù)為4，所以安卓要是8的倍數(shù)。在很多帶有色塊的圖標，不僅要保證色塊44*44pt的大小統(tǒng)一，也要保證里面色塊里面的功能圖標的大小統(tǒng)一。

風格的統(tǒng)一

風格上面已經(jīng)歸納的很全了，直角圖標和圓角圖標基礎上可以添加一個其他風格，如雙色風格；但是剩余的其他風格最好就不要兩兩相加，不然就會給用戶感覺很容易亂，也不夠簡潔，主次不明。

規(guī)范的統(tǒng)一

視覺的規(guī)范

為什么我們再同樣的大小區(qū)域去繪制正方形、圓形、三角形，雖然符合了大小統(tǒng)一的特性，但是從視覺上還是不能看上去很均衡？這就需要我們規(guī)范化的去繪制圖標，安卓android 規(guī)范里給出了圖標的繪制方法。

圓角的規(guī)范

2. 簡潔性

簡潔性不單單體驗在圖標的簡潔，還要體現(xiàn)在從創(chuàng)意到實際落地的簡潔。在使用軟件 ai 或者 sketch 的時候繪制基礎圖形不要出現(xiàn)小數(shù)點和基數(shù)，多用偶數(shù)。

3. 層次明確

圖標具有可點擊性和標識性。可點擊性就會有點擊前、點擊時、點擊后三種狀態(tài)，主流底部標簽欄會在點擊前使用線性圖標，點擊時和點擊后使用面性圖標；也有使用顏色來區(qū)分。

4. 延展性

圖標的延展性之前在圖標的風格也講到，好的圖標可以直接當應用圖標或者 logo 來使用。同時好的圖標還可以通過點線面動效變化做下拉加載動畫。

五、如何學會合理的設計功能圖標？

1. 頭腦風暴

頭腦風暴看似一個不知道怎么解釋的詞，簡單的說就是多動腦子，越用越活。頭腦風暴不單單是這里用到，是所有設計師做設計之前必備工作。頭腦風暴完你會覺得你的設計思路會很寬，然后就是要合理的分析每個的可行度，完成的工作量，自己當前設計的水平是否可以有效完成。其實很多設計師能有效的搜索到自己想要的東西也算是頭腦風暴的一種，雖然你不會想出很多點子但還是很明確的知道自己想要什么，一定注意不要直接拿來主義，還是要通過平時的練習掌握更多的風格。為以后頭腦風暴想出的很多點子能很好的實踐出來。比如以旅游為主體進行頭腦風暴，這個就能想到很多很多。

2. 搜集資料

搜集資料的時候要很好的提取關鍵詞，直接從 iconutopia、iconfont、iconfinder、iconmonstr 搜索獲取靈感。具象的事物可以看看該事物好的品牌公司的產(chǎn)品，品牌公司的工業(yè)設計相對較好，對后面提取元素也會有很大的幫助。也可以通過提取好的關鍵詞，翻譯成英文，再到國外的網(wǎng)站追波、be搜上一搜看看。搜索到的素材和元素一定要再設計，不能拿來直接用。

3. 提取元素

提取元素又歸結到繪畫結構中去了，繪畫好的看到具象事物，心里默默打開一個燈，三大面五大調(diào)，光影關系都有了。不是很理解的還是多練習吧。具象圖標就是提取主要輪廓線，保留可要可不要的元素，到最后的時候做統(tǒng)一刪減；抽象圖標有時候確實沒有一點的思路的時候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找，找到了合適的還要進行 redesign。有想法后選擇一種圖標風格這樣的繪制效率會很快。

4. 規(guī)范化

上面元素提取好后，需要開始選擇一種圖標風格進行繪制。開始繪制的時候不要過于追求圖標的風格，還是要從圖標本身出發(fā)快速的繪制好。等全部繪制好了突然想換一種圖標風格也是很快的，水到渠成。可能剛開始很難在規(guī)范化的框框里直接就提取元素開始繪制，那就只能先繪制要你想要創(chuàng)意的元素圖標，全部畫好后在統(tǒng)一的規(guī)范里面再繪制一遍。規(guī)劃化的目的就是讓圖標統(tǒng)一，任何兩個圖標拿出來從視覺大小、風格都是一個統(tǒng)一的整體。

5. 加減法

一套圖標繪制好了之后還是在放在一起看一下整理的感覺，最后通過加減法適當?shù)男扌扪a補，對于視覺上看上去過于繁瑣的圖標要保留大輪廓的同時減少結構達到視覺平衡；對于確實很簡單但有沒辦法添加任何的東西元素來增加的為它做加法的時候是否可以放大，來增加它的視覺豐滿感。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

1.總結

任何人都抵擋不了時間的力量，你可以斥責它的無情，也可以贊美它的給予，在這個成長的歷程中，我們尋找的不是時間給我們帶來了什么，而是這個過程中我經(jīng)歷了什么。后者，才是我們需要深思并感恩的。

與「用戶體驗」一樣，許多人會評判一個產(chǎn)品用戶體驗的好與差。但是「好」與「差」只是整體上的一種結論，普通人可以說這兩個字。但作為設計師，必須懂得在體驗過程中，知曉哪里好與哪里差，更要知道為什么好為什么差。

就好像評書似的，真正讀過某本書的人，不會單純的說：「這本書太好/爛了」。他一定會有一種感悟，哪怕只是一句話。

既然是為了提升「用戶體驗」，就得與用戶一起進行體驗的走查，才能有根據(jù)的進行優(yōu)化。

一般我們會建立一種用戶體驗路徑，其目的是為了了解用戶的動機、關注點和需求點。所以為了提升用戶體驗，就必須邀請用戶參與體驗路徑的設計過程。

用戶在使用一款產(chǎn)品時，他們中的大多數(shù)只是為了完成某個任務，所以在這個過程中，也許用戶只使用了部分功能，也可能使用了所有功能。

因此，不要將體驗路徑的設計限制在特定的產(chǎn)品或功能服務上，要理解完整的用戶體驗路徑，針對性的進行走查，與用戶一起提升產(chǎn)品易用性。

一、讓用戶參與產(chǎn)品設計流程

真實的用戶體驗路徑需要通過不同用戶的參與互動，不管是一對一的討論或焦點小組，都需要大量的數(shù)據(jù)才能得出真實的結論。

任何沒有基于研究報告的嘗試、假設、數(shù)據(jù)，都將使它在很大程度上只是理論性的。所以我們一定要通過不同用戶的不同體驗結論，客觀的進行分析路徑中的哪一環(huán)可以繼續(xù)優(yōu)化。

與用戶的交流溝通是其中的關鍵，在用戶的幫助下，你很容易找到可提升的體驗點。

因為，用戶情緒的波動和心情的愉悅、滿足、懷疑、失望以及懊悔的表現(xiàn)是無法在報告中準確反映出來的，所以設計師要重視這些用戶反饋，包括這些互動的場景可以使設計師產(chǎn)生共鳴，通過同理心來設計并優(yōu)化功能。

然而，沒有任何產(chǎn)品或功能服務能夠滿足過程中的所有用戶需求，所以，要深入了解每一個階段出現(xiàn)的需求點，因為它們都會衍生出不同的因素，這使我們能夠理解產(chǎn)品如何更好的服務于用戶的生活。

同樣，沒有任何靈丹妙藥能積極地改變用戶體驗，而是通過與用戶的持續(xù)接觸。也許你會說很難進行與用戶直接的對話，所以你通過客服回訪、用戶反饋等方式收集信息也未嘗不可。

可能到這里你還沒有完全明白其中的道理，下面我舉個例子詳細說明。

二、拆解 – 用戶體驗之旅

讓我們來舉一個旅游平臺的例子，這個平臺是供于各種各樣的人和商務旅行者使用的，其中包括了航班、酒店、出租車租賃等在內(nèi)的度假套餐。

為了讓各位深入了解體驗路徑，以及更好地了解我們的用戶，讓我們對旅行者的體驗路徑也做一個拆解。如下圖：

這個路徑將全面地了解用戶的想法、感受和行為，因為他們會經(jīng)歷不同的階段，幫助填補我們路徑中的空白點，幫助我們更好的進行產(chǎn)品的設計。

1. 計劃旅行

在計劃旅行時，設計師認為用戶的想法是什么？

• 目的：休息、假期、出差；
• 目的地的候選名單，檢查距離和到達目的地的時間；
• 出行方式選擇：飛機、火車、巴士、游輪、自駕；
• 查看酒店位置與評論好壞；
• 評估旅行成本（如航班、酒店等費用）；
• 可取消功能（如已訂的航班、酒店等）。

2. 用戶角度

通過與用戶的走查、回訪、反饋，可以幫助我們了解用戶內(nèi)心真實的想法，幫助我們增強以及簡化用戶的體驗方式。

• 在條件允許的情況下，提供盡可能多的價格；
• 經(jīng)常出差的人會為了飛機上的最佳座位而自愿增加費用；
• 出來旅行的家庭想要知道目的地有哪些有趣的兒童活動；
• 顯示符合用戶自定義預算的旅行套餐；
• 幫助用戶估算旅行成本；
• 給出評價信息，可供用戶評判（朋友、預訂平臺、Facebook等）。

3. 特殊情況

產(chǎn)品是否有處理特殊情況的功能？

• 由于個人原因，推遲了旅行計劃；
• 目的地天氣或其他情況不利。

我們是否可以幫助用戶更好地應對這些情況？通過及時提供有關目的地天氣狀況、備選旅行計劃或建議類似目的地的信息等。

那么通過第一個內(nèi)容的拆解，我們就可以發(fā)現(xiàn)，這個點能做的功能就有很多。而且這些功能還能排列優(yōu)先級，設計師能主動進行推進，提升設計師自身的價值。功能走查的重要性相信各位也看出來了。下面繼續(xù)。

1. 完成預訂

是時候確定目的地、日期、旅行方式和停留地點了。（依然是設計師角度）

• 設計有序、直觀的預訂體驗；
• 安全流暢的付款流程，包括多種支付渠道的選擇；
• 旅行模式的確認細節(jié)，包括駕駛方向和幫助熱線電話號碼；
• 酒店確認：房間詳情和熱線電話。

2. 用戶角度

• 直接能從航空公司/酒店確認信息，這樣會比旅行社確認更具價值；
• 目的地指南（視頻、天氣、穿著、提示、要做的事情、文化等）；
• 建議的旅行路線；
• 緊急求助熱線（如果客戶在預訂過程中撥打電話，呼叫應該能及時取得聯(lián)系）。

3. 特殊情況

• 預訂未確認，付款已處理。

1. 出行與酒店

設計師考慮的用戶需求。

• 舒暢的旅行體驗（飛行準時等）；
• 入住酒店，快速辦理手續(xù)；
• 干凈，方便，光線充足的房間（特別是床，洗手間）；
• 體驗當?shù)氐拿朗澈臀幕?
• WiFi 覆蓋；
• 干凈整潔的出租車等交通工具；
• 與家人和朋友實時分享照片；
• 合理的分配時間。

2. 用戶角度

• 主動跟蹤用戶的行程，確保一切順利（發(fā)送提醒，與酒店確認）；
• 目的地指南（事件、當?shù)亟煌?、天氣、衣服、提示、要做的事情等）?
• 當?shù)夭蛷d/購物券/優(yōu)惠等。

3. 特殊情況

• 航班延誤或取消；
• 緊急的醫(yī)療情況；
• 信用卡透支。

1. 旅程與歸來

旅途中的回憶和收獲。

• 在臉書/ Instagram / Twitter / WhatsApp 上共享更新和照片；
• 與家人和朋友分享經(jīng)驗；
• 回憶當?shù)氐拿朗常?
• 經(jīng)驗與旅游前的期望不相符，過度炒作；
• 航班和酒店服務；
• 評論旅程的整體情況。

2. 用戶角度

• 提醒攜帶基本藥物；
• 幫助預支旅行預算；
• 關于外匯轉(zhuǎn)換；
• 當?shù)蒯t(yī)療建議、

3. 特殊情況

• 剩下的錢如何兌換；（如國外游）
• 退款；
• 行李丟失。

通過以上的拆解說明，可見體驗路徑對于功能設計的重要性，各位設計師一定不要主觀認為「你就是用戶」，而是結合用戶需求進行分析，設計出更合理的功能。

小結

設計師要不斷完善用戶的體驗路徑模式，因為它會一直發(fā)展，將產(chǎn)品優(yōu)化的越來越好，而不僅僅是停留在：「這個產(chǎn)品我做完了」的想法上。

所以為什么說用戶體驗是一種過程？因為它始終在不斷變化，所以作為設計師也要持續(xù)的自我增值，才能跟上產(chǎn)品迭代、時代發(fā)展的步伐。

用戶體驗是一種過程，而不是結果

眾所周知，系統(tǒng)的更新是為了增強系統(tǒng)的穩(wěn)定性，優(yōu)化流暢性，有的則是優(yōu)化了續(xù)航，修復BUG，優(yōu)化安全性等等。