1、樹形選框和穿梭框的區(qū)別？
有同學(xué)問我：樹形選框和穿梭框有什么區(qū)別？
其實這兩種組件方案都可以解決 “處理多種選項” 的問題，兩者的不同點如下：
樹形選框
單一列表的樹形選框，其特點為：
1. 通常適用于選項少的場景，不需要頻繁上下滾動鼠標(biāo)查看，選擇后的選項結(jié)果一目了然。
2. 在頁面中占的空間小，也可以放置在下拉菜單中使用。
3. 一般更強調(diào)關(guān)聯(lián)性和層級性。比如權(quán)限與角色之間的關(guān)聯(lián)；角色與角色之間的上下級關(guān)系和權(quán)限包含關(guān)系。
穿梭框
雙列列表的穿梭框，其特點為：
1. 用直觀的方式在兩欄中移動元素，完成選擇行為。一列為源列表，一列最終被構(gòu)建的項目列表，用戶可以看到兩個列表中的項目并進(jìn)行操作，“數(shù)據(jù)源” 和 “結(jié)果” 清晰可見。
2. 占用更多空間，可以展示選項的更多信息，也可以包含更多結(jié)構(gòu)，但左右兩列的選項結(jié)構(gòu)須保持一致。
3. 一般強調(diào)權(quán)限是用于 “給予” 而不是 “復(fù)制” ，比如可以用于描述：一個權(quán)限從 A 手中轉(zhuǎn)到 B 手中，B 擁有權(quán)限的同時，A 不再具備權(quán)限。
大家可以對應(yīng)業(yè)務(wù)場景，選擇更適合的組件。
2、按鈕的狀態(tài)設(shè)計
有同學(xué)對我說，他看到有的平臺按鈕的狀態(tài)分為鼠標(biāo) “懸?！薄ⅰ包c擊” 和 “按下” 三個樣式；有的平臺的按鈕 “點擊” 和 “按下” 的狀態(tài)一致。所以按鈕的狀態(tài)是根據(jù)什么來做定義的呢？是不是越全面越好呢？
1. 按鈕狀態(tài)的設(shè)計理念
其實關(guān)于按鈕的狀態(tài)分類，在能夠給用戶基本操作反饋的前提下，并沒有絕對的好壞之分。平臺之間出現(xiàn)這些差別的原因是由設(shè)計系統(tǒng)的設(shè)計理念和風(fēng)格來決定。
舉個例子，下圖是一個比較夸張的案例：某個組件系統(tǒng)的設(shè)計理念是【盡可能模仿真實世界中的交互狀態(tài)】，圖中按鈕模仿的就是真實世界中的物理按鈕反饋狀態(tài)，但由于頁面上的二維世界不具備三維世界中的“海拔/高度”的概念，所以更多是通過改變或增加顏色、動效、投影等，對按鈕進(jìn)行“高度”的體現(xiàn)。
對于真實世界的按鈕，有一些關(guān)鍵的大按鈕，在按下去之后會有一種 “咔嗒” 的碰觸感，意在告訴用戶你已經(jīng)成功按下了按鈕，這對應(yīng)到二維世界，就是圖中按鈕的“點擊“的效果。
而物理世界的按鈕在按完之后雖然會彈回到原位，但很有可能是慢慢恢復(fù)到原位，也很有可能是不會回到 100% 的原位，比原位稍微矮一些，所以圖中點擊后的狀態(tài)相比于默認(rèn)狀態(tài)就缺少了按鈕下邊緣的厚度感，或者是顏色變得更淺 / 更深，以此來體現(xiàn)差異。
以上所說的組件設(shè)計風(fēng)格，是一種擬真的設(shè)計風(fēng)格。也有一些公司的設(shè)計語言，可能是扁平化，追求極簡主義，所以會省略這當(dāng)中的過程，只傳達(dá)給用戶最干脆、直接的反饋。
因此組件的狀態(tài)效果，在能夠給用戶明確基本操作反饋的前提下，并不是 “對錯” 或 “好壞” 的問題，而是由根據(jù)產(chǎn)品定位、功能特性和產(chǎn)品用戶的行為偏好等因素來定的設(shè)計理念所決定的。
2. 組件狀態(tài)是不是越全面越好？
這個問題最重要的判斷標(biāo)準(zhǔn)是：業(yè)務(wù) / 產(chǎn)品是否需要。在業(yè)務(wù)組件庫搭建的初期，一定是以業(yè)務(wù)為主，“從業(yè)務(wù)中來，到業(yè)務(wù)中去” 。當(dāng)你的業(yè)務(wù)中對于同一個組件有大、中、小的尺寸需求時，你再做規(guī)定也并不晚。這樣的好處是：
- 做好的尺寸規(guī)定直接運用到業(yè)務(wù)中，有現(xiàn)成的檢驗場景；
- 不至于白費功夫，做了一大堆的尺寸分類和說明但無處應(yīng)用；
- 盡可能減少設(shè)計師在查找和使用組件時的多種選項干擾。
另外要注意，如果做了多種尺寸，你需要詳細(xì)的規(guī)范每一種尺寸可以使用的場景和注意事項，避免誤用和混用。
很多時候并不是內(nèi)容越全越好?！叭?nbsp;但不好用，也會帶來新的問題。
原文鏈接：長弓小子（公眾號）
作者：元堯
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》工作經(jīng)驗｜ B 端產(chǎn)品組件設(shè)計細(xì)節(jié)及經(jīng)驗分享（六）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)