在互動和原型這個工作中，元件絕對是常用而且能明顯提升工作效率的一種方式。這篇文章，作者從兩個案例出發，為我們解析了元件設計這個流程，相信會對大家的工作有非常大的幫助。
元件是設計師常用且基礎的知識點，随着軟體設計和開發越來越成熟，已經延伸出很多的類型，能否正确合理的使用也是衡量互動設計水準的一個标準。
文章裡理論知識比較少，我想說點比較實用的東西，給大家解惑。是以關于基本的控件/元件類型的基礎知識不做過多說明，理論和實踐相輔相成，理論知識大家可以去優秀平台學習并吸收，但實踐需要帶入更多的思考。
一、厘清控件群組件
控件可以了解為平台系統定義的某種形式，嚴格意義上來說，控件的專業叫法為“原生控件”，不過大家都習慣性的順口說“控件”，這樣會更簡單點。
元件從字面了解就是組裝而成，在技術層面，代碼是需要封裝的，那被封裝在一起，就可以形成元件，能自定義内容，名稱等。
原生控件相比較元件，顆粒感更細，一個元件可以包含多個控件，單個控件也可以作為元件。可以使用一個簡單的例子來闡述他們的關系，控件就好比是藥材，那麼藥方就可以了解成是一個元件。如果還不能了解，那可以用更具體的案例來說明下；
如下圖是使用者登陸流程中的一個互動元件，該元件由兩種原生控件來組成，輸入框和按鈕，這樣結合就構成“賬号輸入”的元件；
再如下圖，單獨的輸入框控件也可以成為一個獨立的“賬号輸入”元件；
以上兩個例子，說明了元件可以由單一或多個的控件類型進行組成。
如何去定義元件的構成，其實還需要結合具體的設計需求，上面第一個元件給賬号修改增加一個按鈕的控件，讓使用者可以通過按鈕清除所有的字段，讓使用者直接重新輸入，通過手動和按鈕操作的兩種方式去進行賬号修改，第二個元件僅支援手動鍵入進行修改。通過增加了清除的互動方式，元件的構成就會有不一樣的設計方式。
二、再深入聊下元件
各平台基本都有自己獨立的設計體系，有自己定義的元件群組件庫，學習元件要了解它分為基礎元件和業務/進階元件兩種類型。
基礎元件是一種底層元件，例如輸入框、按鈕、單選框；其特點是比較獨立單一，通用性很強，适應各種業務場景；
業務元件是一個基礎元件集合而成的大元件，也可以叫進階元件，是複合型的區塊元件，主要是針對解決業務問題；
如下截圖是flomo筆記用用的網頁版本，以它的首頁為例；頁面按照左右結構類型區分，可以定義為兩個大的業務元件，由淺入深，可以再細分，得到再定義更多的業務元件：
這裡，我以“釋出筆記”的元件具體說明下，它是怎麼組成來解決業務問題的。
首先我們拆解下組成部分：文本内容，工具按鈕（添加标簽和圖檔、文本編輯、快速引用等三種類型），釋出按鈕。
使用者釋出筆記的行為主要為文字輸入-内容編輯-釋出完成；結合使用者行為群組件設計，解決了使用者輸入文本内容，給筆記歸納，增加圖檔，修改文本樣式，快速引用，最終進行釋出的問題。産品在疊代過程中，我們會發現更多的需求，業務元件就要通過再優化幫使用者解決實際問題。
三、學做元件管理
結合自己的學習和設計經驗，我把元件相關的内容和知識整理定義為元件管理，包括元件的樣式定義、元件群組件庫設計、搭建、沉澱優化應該都算是它的組成部分。
元件群組件庫作用，和基本概念我就不做過多描述了（畢竟市面上關于這些内容已經有很多了），我想從小的點去做深度思考，講點有用的東西，呈現給大家。
元件群組件庫首先一定是遵循和圍繞着設計的原則、理念、目标去構思，如蘋果的《人機互動指南》裡面提到的系統設計三大主旨（清晰、遵從、層次）和六大原則（完整性、一緻性、直接性，回報感、隐喻性、控制感），安卓系統《材料設計1，2》中提到的三大原則（材料就是隐喻、大膽，生動，有意、運動提供意義）。還有國内b端最權威的螞蟻設計體系Ant design，從設計價值觀延伸設計原則，進而思考設計模式。
這裡可以總結，平台在創造設計标準時，思考的方向都會不一樣，是以系統遵循什麼，沒有統一的模式，況且這些名詞本身就很抽象，這需要設計師們去思考應該把平台系統設計成什麼樣。這确實很依賴和考驗設計師各方面的綜合能力，是以元件設計和搭建，它并不是某一個人的事，而是整個團隊的任務。
元件群組件庫的設計和搭建過程中，需要了解系統平台，是蘋果端還是安卓、web端，不同的系統設計的差異性很大，對應系統的控件類型我們也要很熟練的掌握。
例如安卓一直保留的原生的底部導航欄的操作控件（傳回、首頁、菜單），反觀蘋果最早出現在底部的HOME鍵，随着硬體設計的更新，實體按鈕的作用已經完全被互動手勢操作替代，根據設計準則，可以先設計出确定的初版元件樣式，然後設計師們要熟悉項目業務，深挖每個功能中的不同業務場景，并設計出對應的業務元件；這樣設計師最終對于目前元件進行整合分類，做出版本的元件庫。
元件群組件庫是設計和開發相結合的，設計師呈現頁面上的子產品是直覺的，但都是技術人員進行底層代碼拼接的再封裝而成的，有規模的公司一般都會做成開源的元件庫。去提升項目人員之間的協作效率，複用率高，節省成本。如下圖是Ant design裡面的部分按鈕元件的樣式和代碼示範，作為國内獨一檔的免費學習的設計體系網站。如果大家能夠從頭到尾研究一遍，相信對你建構元件群組件庫有十分大的幫助。
最後元件群組件庫的優化疊代是貫穿整個産品設計的生命周期的，從搜集元件需求、思考元件優化、設計元件優化方案、驗收更新元件群組件庫；
搜集元件需求
項目角度：設計師開發過程中遺漏的、新的業務場景中發現的元件問題，設計和開發者評審讨論出來的包括影響協作效率的，不合理的問題；使用者體驗：産品中的使用者回報的功能體驗不好，使用時體驗差的子產品；外部借鑒：團隊人員從優秀的組建案例中發現的可借鑒的需求；
思考元件優化
思考方向1：設計師可以查閱資料，研究優秀的元件平台，從成熟的産品中檢視同類的元件設計案例；或者和開發者、設計師進行深度交流，得到有用的建議；
思考方向2：結合業務場景，最好能夠将應用場景窮舉梳理出來，具體到某個的功能，考慮該功能裡存在的每一個場景中，元件需要有什麼樣的狀态和變化；
設計元件優化方案
設計師根據以上步驟完成元件優化的分析之後，可以相對應的設計元件優化方案，組織開發人員一起多次的評審，大家一起去讨論完善，最終技術人員再進行元件代碼的開發和封裝；元件設計優化，設計師要注意在既定的設計原則下合理優化，要保留分析材料和思考過程，進行有理有據的評審論證；
驗收更新元件群組件庫
當開發人員将元件樣式通過代碼落地之後，優化中的元件方案需要帶入到實際功能場景中進行測試檢查，驗證組建優化的是否符合預期，在優化過程中，可以用一張《組建優化表》進行記錄，可以友善項目人員追蹤和檢視。
四、元件設計的應用和思考
元件的設計本質上也是為了解決某種特定場景的問題。例如提示彈窗，為了讓使用者在操作過程中有回報提示，提示中又可以通過解決某種場景問題，選擇讓使用者進行操作或者不操作，是以平台設計出這種彈窗元件，即模态和非模态彈窗類型。下面通過兩個例子，結合功能和場景具體分析産品應該如何做元件設計。
案例1：支付寶“商家轉賬功能”元件設計
我們去商店購買東西使用支付寶支付的過程中，可以通過掃描商家二維碼，進行轉賬交易，轉賬支付的流程主要包括輸入數額，選擇支付方式，确認支付；因為每個流程中的元件都十分複雜，我們僅拿其中一個流程，對使用者操作過程中涉及的元件進行拆解說明；輸入金額和添加備注流程：頁面的元件主要是使用者資訊文本，輸入框、備注元件、鍵盤控件，彈框元件；這個流程包括2個行為事件，4個大的業務場景；
行為事件一：使用者在商店通過掃碼商家二維碼，分别兩次給商家轉賬20000和100000元的金額
業務場景1：使用者沒有輸入任何金額
業務場景2：使用者轉賬輸入的金額沒有超過限制
業務場景3：使用者轉賬輸入的金額超過最大限制
業務場景123主要應用金額輸入框元件，輸入框元件根據使用者操作行為，會有不一樣的設計，使用者沒有任何操作，輸入框内有預設文案提示“輸入付款金額”，使用者輸入金額後，計算機關超過‘百’，數字金額上方會有機關提示，同時顯示删除按鈕，支援删除，重新輸入，業務場景2中根據金額輸入範圍定義了産品業務規則，再細分出三種場景，不同範圍内的金額，可以對應的元件設計方案解決确認轉賬确認問題；
（1）當輸入金額範圍在1-50000，進入新頁面，通過點選按鈕元件，進行轉賬确認
（2）當輸入金額範圍在50000-99999，在目前頁面使用模态彈框元件，進行轉賬确認
（3）當輸入金額範圍在100000-999999，進入新頁面，重新輸入框内輸入轉賬金額，進行确認，若兩次金額不一緻，出現彈窗提示使用者操作。
當輸入的金額超過限制後，彈框元件配合進行超限的toast提示。
通過拆解行為事件1，我們細分出了3個業務場景，通過運用輸入框、鍵盤、和toast彈窗，它們互相關聯解決了輸入金額産生的各種問題；
無金額輸入時，輸入框能給予使用者提示，這是比較常見的輸入框元件設計，預置提示文本；
輸入金額未超出限制，輸入框中會帶入計量機關，這就是元件設計的細微之處。
轉賬金額是一個關聯自己财産的行為操作，應當是需要謹慎的，是以計量機關也是在使用者輸入過程中出現，給使用者一個提示，沒有任何打斷操作的意思。
出現的時機很适合，再加上輸入的文本數字已經足夠醒目，能夠提示使用者輸入有足夠的準确度。如果沒有加入這個字段，确實也不影響使用者操作，但這種雙重衡量的方式，潛意識裡會讓自己輸入的更放心，不怕自己有誤差；這就是元件設計給使用者帶來的驚喜感。
金額超出限制後，通過元件toast提示“付款金額超限”，第一提示框元件很好的限制鍵盤的數字輸入，避免使用者無效輸入；第二toast提示框的觸發時機設計，這裡的方案是當輸入金額超百萬，按數字鍵盤的時候就會給予提示，而不是等使用者輸入完之後，再去按确認鍵的時候，彈出來提示金額超限。
行為事件二：使用者點選備注按鈕，添加轉賬資訊。
業務場景4：确認完成輸入金額後，給商戶添加備注資訊，20個字以内；
輸入轉賬金額後，文字鍵盤上方出現備注按鈕，點選彈出備注資訊彈窗，在彈窗的輸入框中寫備注資訊。
其實添加備注，可以在頁面中使用文本框，可為何去使用彈窗中增加輸入框，确認之後再展示到頁面中呢？
輸入金額和添加備注的行為的優先級來看，備注資訊應該是比較低的，資訊的展示的重要性也比較低。首先如果使用文本框，和輸入框的元件層級在同一級，使用者的關注點會被幹擾，是以使用不突出的文字按鈕元件進行差別，另外備注文字按鈕出現的觸發條件也是因為有輸入金額這個動作，是以備注的資訊展示在産品設計中就是很弱。而且在彈窗輸入框中也提示了備注資訊20個字以内，有這樣的資訊規則，彈窗元件比文本框更适合短文本的資訊錄入，這樣和金額輸入框元件能夠被區分。
轉賬是涉及财産安全的業務，是以元件的設計除了解決不同場景下使用者體驗問題（及時回報、合理提示、增加驚喜、操作友善），還要處理核心的業務問題（保證使用者的财産問題）。
案例2：“高清晰度體驗引導使用者付費功能”的元件設計
最近在做智慧電視項目時，産品經理提出在播放器頁面，做一個“非會員使用者可以體驗視訊高清晰度“的需求，主要目的是為了引導使用者體驗高清晰，提升使用者的會員充值率。
這裡就通過解析如何通過元件設計解決這個問題；
首先我們結合業務規則有以下兩點
（1）：該視訊内容資源是付費試看還是免費
（2）：高清晰度體驗時間，單次内容高清晰度體驗時間，累計高清晰度體驗總時間
考慮到使用者在全屏播放器，需要盡量少的對使用者觀影降低幹擾，是以在設計時，利用提示框的元件，針對不同場景狀态，對元件進行設計優化。
使用者觀看付費影片，因為試看提示，通過操作按鈕鍵，是以高清晰度體驗的提示，通過提示文案來引導，避免按鍵操作沖突，元件設計如下圖；
在體驗過程中，播放器單次高清晰度體驗時間會有狀态變化，即正在體驗-将要結束-已結束，元件設計如下圖：
累計體驗總時間結束後，再次進入到播放器，元件設計變為提示使用者該片有高清晰度，元件設計如下圖：
使用者觀看免費影片，因為片源免費，沒有其他場景下的按鍵沖突，是以高清晰度體驗的提示，通過提示“文案+按鈕”來引導，元件設計如下圖；
體驗過程中，播放器單次高清晰度體驗時間也有狀态變化，即正在體驗-已結束，元件設計如下圖：
累計體驗總時間結束後，再次進入到播放器，元件設計變為提示使用者該片有高清晰度，并可以點選操作，元件設計如下圖：
在提示元件設計整個過程中，考慮了使用者會員身份、視訊資源付費類型、高清晰度體驗時間等等因素，要持續保持使用者能夠觸達會員充值的頁面，是以在不同的情況下，始終保留遙控器按鍵可以操作，引導他們付費，雖然頻繁的提示可能讓使用者反感，但最終功能上線後，也确實拿到了一定的成果，提示元件設計讓使用者付費充值率有很大的提升。
五、總結
元件設計的解析到這裡就告一段落了。
帶大家回顧下文章的内容，主要有四點，第一點通過例子解釋了控件群組件的差別，第二點介紹了基礎和業務元件，第三點講解了如何進行元件管理的内容，第四點通過兩個具體的案例講解了元件設計在實際産品中的應用和我的一些思考；總結以上幾點，元件設計一定不能脫離使用者場景和産品業務。在這個基準下思考元件設計才會有最優解。
專欄作家
Q什伍，公衆号：說說體驗設計，人人都是産品經理專欄作家。2022年度優秀作者，低調内斂互動設計師一枚。
本文原創釋出于人人都是産品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基于CC0協定。
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。