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

歡迎關注點融設計中心DDC微信公眾號（微信ID：DR_DDC）

隨著互聯網行業的逐漸成熟，用戶體驗設計師也成了炙手可熱的“熱門職業”。近年來，設計專業的高校教育也漸漸從傳統的實體產品設計傾斜或引入用戶體驗的概念。畢業后仍從事設計行業的學生數量大大增加，同時半道出家的設計新人人數也在不斷上升。

小可不才，在此結合自己多年的設計經驗送給設計新人十五字真言：

夯實基本功

夯實基本功

夯實基本功

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

控件學習

△ 各種控件

控件（或部件，widget或control）是一種圖形用戶界面元素，其顯示的信息排列可由用戶改變，例如視窗或文本框。控件定義的特點是為給定數據的直接操作（direct manipulation）提供單獨的互動點。控件是一種基本的可視構件塊，包含在應用程序中，控制著該程序處理的所有數據以及關于這些數據的交互操作。

——https://zh.wikipedia.org/wiki/控件

控件對于設計來說就是搭建時最基礎的積木塊，每種積木塊有著不同的外觀也承載著不同的功能。對于每種控件的深入了解是做設計的前提，最簡的學習方法就是學習windows控件庫（當然也選擇其他平臺控件庫入手學習）。Windows控件庫是我們最熟悉（熟悉到就像一種習慣）的控件，此外，它所覆蓋的范圍也足夠廣泛，在之后的不同控件庫對比之時，也容易觸類旁通。推薦一些參考：《About Face 4:? 交互設計精髓》的第3部分交互細節；UXGuide上的Windows用戶體驗交互設計規范；各平臺的設計規范等等。

在這里推薦一個私藏網站——UXGUIDE，此站由民間個人發起，雖已好久沒有更新，但是現有的內容卻依然有很高的前期學習價值。

首先 – 選擇控件庫

選擇一個控件庫的規范作為教科書進行學習，可以是我這里推薦UXGuide上的Windows用戶體驗交互設計規范（https://developer.microsoft.com），也可以是其他的控件庫。

第二 – 學習控件

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

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

第三 – 填充案例庫

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

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

第四 – 產品界面分析練習

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

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

關于控件庫的學習就先講到這里。

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

作者個人公眾號：LIANG-DESIGN

歡迎關注點融設計中心DDC微信公眾號（微信ID：DR_DDC）：

「優設七月份的交互設計好文」

畫線框圖之前要做哪些事？
《畫線框圖前，交互設計師要做的3件事》

網易云音樂設計師的教程：
《超全面！教你打造美觀清晰易使用的交互文檔》

為AR應用做設計有哪些要注意的？
《現在超火！為AR應用做交互設計時需要思考的3個問題（有彩蛋）》

原文地址：ddc.dianrong

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com