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