隨著互聯(lián)網(wǎng)行業(yè)的逐漸成熟，用戶體驗設計師也成了炙手可熱的“熱門職業(yè)”。近年來，設計專業(yè)的高校教育也漸漸從傳統(tǒng)的實體產(chǎn)品設計傾斜或引入用戶體驗的概念。畢業(yè)后仍從事設計行業(yè)的學生數(shù)量大大增加，同時半道出家的設計新人人數(shù)也在不斷上升。小可不才，在此結(jié)合自己多年的設計經(jīng)驗送給設計新人十五字真言：夯實基本功!夯實基本功!夯實基本功!

扎實的基石乃高樓之保證。設計之路亦是如此。以用戶體驗設計新人為例，一般來講，必須修煉的基本功，即本自學包包括但不限于：控件庫；操作流程；信息架構(gòu)等。

本系列名曰設計新人自學包，可供用戶體驗新人自主學習，在掌握了所有自學包的內(nèi)容之后，可以輕松拿下初級設計師崗面試中的設計技能考核的部分。本文將就第一部分控件學習進行深入講解。

各種控件

控件（或部件，widget或control）是一種圖形用戶界面元素，其顯示的信息排列可由用戶改變，例如視窗或文本框?？丶x的特點是為給定數(shù)據(jù)的直接操作（direct manipulation）提供單獨的互動點。控件是一種基本的可視構(gòu)件塊，包含在應用程序中，控制著該程序處理的所有數(shù)據(jù)以及關(guān)于這些數(shù)據(jù)的交互操作?！猦ttps://zh.wikipedia.org/wiki/控件

控件對于設計來說就是搭建時最基礎的積木塊，每種積木塊有著不同的外觀也承載著不同的功能。對于每種控件的深入了解是做設計的前提，最簡的學習方法就是學習windows控件庫（當然也選擇其他平臺控件庫入手學習）。Windows控件庫是我們最熟悉（熟悉到就像一種習慣）的控件，此外，它所覆蓋的范圍也足夠廣泛，在之后的不同控件庫對比之時，也容易觸類旁通。推薦一些參考：《About Face 4:? 交互設計精髓》的第3部分交互細節(jié)；UXGuide上的Windows用戶體驗交互設計規(guī)范；各平臺的設計規(guī)范等等。在這里推薦一個私藏網(wǎng)站——UXGuide，此站由民間個人發(fā)起，雖已好久沒有更新，但是現(xiàn)有的內(nèi)容卻依然有很高的前期學習價值。

首先,選擇控件庫

選擇一個控件庫的規(guī)范作為教科書進行學習，可以是我這里推薦UXGuide上的Windows用戶體驗交互設計規(guī)范，也可以是其他的控件庫。

第二, 學習控件

撰寫每一類控件的詳細交互規(guī)范和細節(jié)設計說明。這一步其實就是自學記筆記，不同的設計規(guī)范中對于控件的定義方式不盡相同，有些言簡意賅有些更偏向于編程實現(xiàn)有些有些是可怕的裹腳布。你可以選擇你認為對設計有強指導幫助的部分進行強化學習。何為強指導幫助，即在你不確定如何選擇控件或該控件需要設計幾套狀態(tài)的時候，你一看這些內(nèi)容就可以基于此給出一個可用版本的設計。

以我當年的自學筆記之進度條為例

第三,填充案例庫

案例庫需要你廣泛收集不同產(chǎn)品的界面案例，從中提取分析windows控件在產(chǎn)品中的應用規(guī)范，大多數(shù)的時候案例是正面的，而有時候你會發(fā)現(xiàn)，一些產(chǎn)品上對控件的使用卻是個扎扎實實的反面案例。在收集案例的時候，建議以正面案例為主，以正三觀，分析為何在此處使用該控件，是否符合規(guī)范，是否可以用其他的控件代替以及為什么。除去一眼即明的控件樣式，很多的產(chǎn)品界面的控件已經(jīng)有了很多風格化的變種，然而刨去變異，每一個控件依然可以劃歸到基礎控件類目中。如果不行，那就回過頭去鞏固第二步。

依然是我的筆記截圖，當時在游戲公司實習，所以案例都是游戲啦

第四,產(chǎn)品界面分析練習

在完成了上述三步之后，找一些優(yōu)秀產(chǎn)品進行界面分析，就某一具體界面進行思考：該界面使用了哪些控件，哪些控件組合，有沒有更好的組合可以代替現(xiàn)有的組合。

以上圖的注冊界面為例，在這個所有人都很熟悉的界面上，出去文本，包括了：A-鏈接（使用模式：任務鏈接）；B、C-文本輸入框；D-命令按鈕；E-復選框（使用模式：單個選項）；F-鏈接（使用模式：導航鏈接）；G-命令按鈕（使用模式：標準命令按鈕）

關(guān)于控件庫的學習就先講到這里。

在所有的自學任務中，控件庫的學習和整理可能是最枯燥的事，一個控件可能就會耗費幾小時甚至更久，然而，它所帶來的技能成長也是最立竿見影的（自我設計時有最基本的依據(jù)；討論細節(jié)時有最基本的理據(jù)；看其他設計師不爽時，可以拷問ta最基本的根據(jù)；也可以隨口冒出一些術(shù)語偶爾裝裝逼等等等等）。同時，你也建成了一個自己的控件資源庫，可以隨時填充進去你覺得有意思的設計案例，以做未來設計之參考。

作者： ?Clara

來源：點融設計中心DDC （公眾號ID：DR_DDC）

本文由 @點融設計中心DDC ?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。