1、樹形選框和穿梭框的區別？

有同學問我：樹形選框和穿梭框有什么區別？

其實這兩種組件方案都可以解決 “處理多種選項” 的問題，兩者的不同點如下：

樹形選框

單一列表的樹形選框，其特點為：

1. 通常適用于選項少的場景，不需要頻繁上下滾動鼠標查看，選擇后的選項結果一目了然。

2. 在頁面中占的空間小，也可以放置在下拉菜單中使用。

3. 一般更強調關聯性和層級性。比如權限與角色之間的關聯；角色與角色之間的上下級關系和權限包含關系。

穿梭框

雙列列表的穿梭框，其特點為：

1. 用直觀的方式在兩欄中移動元素，完成選擇行為。一列為源列表，一列最終被構建的項目列表，用戶可以看到兩個列表中的項目并進行操作，“數據源” 和 “結果” 清晰可見。

2. 占用更多空間，可以展示選項的更多信息，也可以包含更多結構，但左右兩列的選項結構須保持一致。

3. 一般強調權限是用于 “給予” 而不是 “復制” ，比如可以用于描述：一個權限從 A 手中轉到 B 手中，B 擁有權限的同時，A 不再具備權限。

大家可以對應業務場景，選擇更適合的組件。

2、按鈕的狀態設計

有同學對我說，他看到有的平臺按鈕的狀態分為鼠標 “懸?！?、“點擊” 和 “按下” 三個樣式；有的平臺的按鈕 “點擊” 和 “按下” 的狀態一致。所以按鈕的狀態是根據什么來做定義的呢？是不是越全面越好呢？

1. 按鈕狀態的設計理念

其實關于按鈕的狀態分類，在能夠給用戶基本操作反饋的前提下，并沒有絕對的好壞之分。平臺之間出現這些差別的原因是由設計系統的設計理念和風格來決定。

舉個例子，下圖是一個比較夸張的案例：某個組件系統的設計理念是【盡可能模仿真實世界中的交互狀態】，圖中按鈕模仿的就是真實世界中的物理按鈕反饋狀態，但由于頁面上的二維世界不具備三維世界中的“海拔/高度”的概念，所以更多是通過改變或增加顏色、動效、投影等，對按鈕進行“高度”的體現。

對于真實世界的按鈕，有一些關鍵的大按鈕，在按下去之后會有一種 “咔嗒” 的碰觸感，意在告訴用戶你已經成功按下了按鈕，這對應到二維世界，就是圖中按鈕的“點擊“的效果。

而物理世界的按鈕在按完之后雖然會彈回到原位，但很有可能是慢慢恢復到原位，也很有可能是不會回到 100% 的原位，比原位稍微矮一些，所以圖中點擊后的狀態相比于默認狀態就缺少了按鈕下邊緣的厚度感，或者是顏色變得更淺 / 更深，以此來體現差異。

以上所說的組件設計風格，是一種擬真的設計風格。也有一些公司的設計語言，可能是扁平化，追求極簡主義，所以會省略這當中的過程，只傳達給用戶最干脆、直接的反饋。

因此組件的狀態效果，在能夠給用戶明確基本操作反饋的前提下，并不是 “對錯” 或 “好壞” 的問題，而是由根據產品定位、功能特性和產品用戶的行為偏好等因素來定的設計理念所決定的。

2. 組件狀態是不是越全面越好？

這個問題最重要的判斷標準是：業務 / 產品是否需要。在業務組件庫搭建的初期，一定是以業務為主，“從業務中來，到業務中去” 。當你的業務中對于同一個組件有大、中、小的尺寸需求時，你再做規定也并不晚。這樣的好處是：

• 做好的尺寸規定直接運用到業務中，有現成的檢驗場景；
• 不至于白費功夫，做了一大堆的尺寸分類和說明但無處應用；
• 盡可能減少設計師在查找和使用組件時的多種選項干擾。

另外要注意，如果做了多種尺寸，你需要詳細的規范每一種尺寸可以使用的場景和注意事項，避免誤用和混用。

很多時候并不是內容越全越好。“全” 但不好用，也會帶來新的問題。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》工作經驗｜ B 端產品組件設計細節及經驗分享（六）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務