2025-3-20 天宇 B端ui設(shè)計(jì)文章及欣賞
我們需要了解一下設(shè)計(jì)模式，例如它是什么、什么時(shí)候用、怎么使用，可以讓我們?cè)跊](méi)有參考的情況下，也能設(shè)計(jì)出合理、好用的界面。
把不同的內(nèi)容模塊，放到一組順序排列的面板中，這些面板每一個(gè)都可以折疊、可以展開(kāi)，互不干擾。
你需要在頁(yè)面上顯示大量各種各樣的內(nèi)容，可能包括文本、列表、按鈕、表單控件等，而你又沒(méi)法把它們都顯示在頁(yè)面上。
1、用戶可能一次只需要查看一個(gè)模塊的內(nèi)容。有些模塊比別的模塊更長(zhǎng)或更短，不過(guò)它們的寬度一樣。
2、這些模塊組成了一個(gè)工具箱，或者兩級(jí)菜單，或者包括一些交互式元素的某種結(jié)構(gòu)，這些模塊的內(nèi)容要么彼此相關(guān)，要么彼此類(lèi)似。
3、要注意的是，當(dāng)一個(gè)大模塊打開(kāi)或者打開(kāi)了很多個(gè)模塊的時(shí)候，模塊底部的標(biāo)簽可能會(huì)滾動(dòng)到屏幕或窗口的外面。如果這一點(diǎn)對(duì)用戶來(lái)說(shuō)有問(wèn)題，那就要考慮一下其他的解決方案。
豎向排列這些模塊，并使用對(duì)于用戶來(lái)說(shuō)有意義的排列順序。
例如：QUICK BI 右側(cè)折疊面板，順序是從大到小，從外到內(nèi)。
為每個(gè)模塊選擇一個(gè)簡(jiǎn)短而富描述性的標(biāo)題，并把這個(gè)標(biāo)題放到一個(gè)橫條上，讓用戶可以單擊它來(lái)打開(kāi)或關(guān)閉這個(gè)模塊。
也可以用一個(gè)可以變換方向的三角形圖標(biāo)來(lái)提示打開(kāi)/關(guān)閉的操作：關(guān)閉的時(shí)候向右或向下，打開(kāi)的時(shí)候向上。
一次允許打開(kāi)多個(gè)模塊。
人們?cè)谶@個(gè)問(wèn)題上有一些不同的看法，有的人喜歡一次只能打開(kāi)一個(gè)模塊。不過(guò)根據(jù)經(jīng)驗(yàn)，特別是在各種應(yīng)用里，一次允許打開(kāi)多個(gè)模塊更合適。這樣可以避免一個(gè)之前打開(kāi)的模塊突然消失，這樣會(huì)讓用戶覺(jué)得很粗魯，也很意外:“喂, 那個(gè)菜單哪里去了?之前就在這里的!
當(dāng)用戶在登錄狀態(tài)時(shí)，折疊面板應(yīng)該在多個(gè)操作期間，保持它們各自模塊的打開(kāi)和關(guān)閉狀態(tài)，這點(diǎn)很重要。
如果模塊內(nèi)容需要進(jìn)一步拆分，折疊面板還可以級(jí)聯(lián)使用，不過(guò)這樣看起來(lái)會(huì)有點(diǎn)混亂。 因此只用一個(gè)一級(jí)折疊面板模塊更合適，如果有必要可以采用其他結(jié)構(gòu)代替，比如tab頁(yè)。
把頁(yè)面上的內(nèi)容組合到幾個(gè)不同的區(qū)塊里，每一個(gè)都可以獨(dú)立打開(kāi)或關(guān)閉?？梢噪S意在界面上放置這些區(qū)塊，用戶還可以移動(dòng)它們，形成自己定義的布局。
你正在設(shè)計(jì)一個(gè)桌面應(yīng)用（例如：釘釘、飛書(shū)）或者一個(gè)網(wǎng)頁(yè)應(yīng)用（例如：紛享銷(xiāo)客、ONES），應(yīng)用中會(huì)涉及看板、工作臺(tái)、儀表盤(pán)、數(shù)據(jù)分析等頁(yè)面，你希望用戶對(duì)這些頁(yè)面有一定的控制權(quán)。 這些頁(yè)面應(yīng)該是應(yīng)用中的主頁(yè)面、是用戶會(huì)經(jīng)常查看的頁(yè)面。
在這個(gè)頁(yè)面上，需要顯示大量各種各樣的內(nèi)容，可能包括文本、列表、按鈕、表單控件、圖表等，而你又沒(méi)法把它們都顯示在一個(gè)模塊上。
1、用戶想同時(shí)查看好幾個(gè)模塊。
2、不同的模塊對(duì)每個(gè)用戶來(lái)說(shuō)，有著不一樣的價(jià)值。例如，有些人想看到A、B、C這三個(gè)模塊，而另外一些人可能想看到的是D、E、F。 3、在空間大小方面，各個(gè)模塊差異可能比較大。例如，用戶希望把信息少的模塊縮小。
4、模塊在界面上的位置對(duì)用戶來(lái)說(shuō)很重要。例如，重要的內(nèi)容用戶希望放在前面。
5、有時(shí)候模塊數(shù)量比較多，用戶不希望全部展示出來(lái)。例如：用戶匯報(bào)工作時(shí)不需要這個(gè)模塊，可以把它先移除，匯報(bào)完后，再添加回來(lái)。
6、控制這些模塊的功能可能是一個(gè)工具條，或其他交互式結(jié)構(gòu)的組成部分。
因?yàn)椴煌挠脩絷P(guān)注點(diǎn)也不同，他們希望能自己選擇想看的內(nèi)容。 可以把需要的內(nèi)容放到顯眼的位置，把不需要的東西隱藏起來(lái)。同時(shí)，他們還可以利用“空間記憶”來(lái)記住不同的內(nèi)容在什么位置。
空間記憶：當(dāng)人們需要使用某個(gè)東西時(shí)，經(jīng)常是通過(guò)回憶它們的位置來(lái)尋找它們，而不是它們的名字。 例如：你因?yàn)橛惺峦獬?，需要同事打開(kāi)你的電腦幫你發(fā)一份文件，通常你也說(shuō)一句文件好像再桌面的右邊，這也是利用了空間記憶幫助快速尋找。很多軟件把對(duì)話框的按鈕（確定、取消）放在右下方，有一部分原因也是考慮到用戶的空間記憶依賴(lài)性。
總結(jié)：使用可移動(dòng)的面板可以讓用戶的工作效率更高，工作更舒服。
為每個(gè)模塊提供名稱(chēng)、標(biāo)題欄和默認(rèn)尺寸，并為它們提供合理的默認(rèn)設(shè)置。 讓用戶按自己的喜好在頁(yè)面上移動(dòng)這些模塊，如果可能的話，可以提供拖曳功能。
讓每個(gè)模塊可以通過(guò)簡(jiǎn)單的操作進(jìn)行編輯和隱藏，也可以考慮讓用戶可以徹底移走這些模塊，在標(biāo)題欄上放一個(gè)關(guān)閉按鈕就可以。
可移動(dòng)面板要清晰的體現(xiàn)編輯與預(yù)覽狀態(tài)，如果用戶誤操作打亂模塊順序，需要提供一個(gè)“恢復(fù)默認(rèn)設(shè)置”的按鈕。
把次要內(nèi)容和可選內(nèi)容放到用戶能自己打開(kāi)、收起的面板里。
你需要在頁(yè)面上顯示大量各種各樣的內(nèi)容，可能包括文本、列表、按鈕、表單控件等，而你又沒(méi)法把它們都顯示在頁(yè)面上。 同時(shí)，還可能有一些適用中央舞臺(tái)模式的內(nèi)容需要在視覺(jué)上優(yōu)先處理，需要把面板收起。
1、這些模塊為界面上的主要內(nèi)容提供注釋、修改、說(shuō)明或支持。（例如：WPS右邊的快捷鍵、樣式、幫助、資源）
2、這些模塊可能不是很重要，不需要默認(rèn)展開(kāi)。
3、對(duì)不同的用戶來(lái)說(shuō)，它們的價(jià)值并不一樣。（例如：圖中新手入門(mén)指導(dǎo)，老用戶可能并不需要）
4、甚至對(duì)同一個(gè)用戶來(lái)說(shuō)，這些模塊可能有時(shí)候非常有用，換個(gè)時(shí)間就不一定了。當(dāng) 它們收起的時(shí)候，這些空間最好留給界面上的主要內(nèi)容。
5、這些模塊之間可能彼此沒(méi)有多大關(guān)系。當(dāng)用到Tab和折疊面板時(shí)，這兩個(gè)模式會(huì)把各個(gè)模塊組合到一起，表示它們之間有一些關(guān)聯(lián)，而可收起面板不會(huì)對(duì)內(nèi)容進(jìn)行分組。
把無(wú)關(guān)緊要的內(nèi)容隱藏起來(lái)可以讓界面變得簡(jiǎn)潔。
當(dāng)用戶選擇隱藏某個(gè)模塊時(shí)，只要簡(jiǎn)單地收起這個(gè)模塊就可以了。 它所占用的空間也會(huì)還給主要內(nèi)容。
這也是漸進(jìn)式展開(kāi)原則的一個(gè)例子—只在用戶需要的時(shí)候，需要的地方立即顯示那些隱藏的內(nèi)容。
總的來(lái)說(shuō)，想讓界面保持整潔，通過(guò)對(duì)內(nèi)容進(jìn)行分組和隱藏是非常有效方式。而可收起面板、Tab、折疊面板、可移動(dòng)面板，這4種模式正是有效方式的工具。 如何使用
把內(nèi)容放到一個(gè)單獨(dú)的面板里，讓用戶可以用一次單擊來(lái)打開(kāi)或關(guān)閉這些面板。 可以利用引導(dǎo)性的文字來(lái)表示這里可以展開(kāi)（例如：更多），也可以利用三角形的圖標(biāo)來(lái)表示這里可以展開(kāi)。
當(dāng)用戶關(guān)閉這個(gè)面板時(shí)，把它所占用的空間收起來(lái)，用來(lái)顯示主要內(nèi)容。
也可以在打開(kāi)和關(guān)閉這些面板的時(shí)候加上動(dòng)畫(huà)效果，這樣會(huì)讓打開(kāi)和關(guān)閉時(shí)的過(guò)渡更加平滑。
如果有多個(gè)模塊要用這種方式來(lái)隱藏，可以把這些模塊放在一起，或者用Tab、折疊面板來(lái)組織，還可以把它們分開(kāi)放在主界面上。
如果發(fā)現(xiàn)大部分用戶都打開(kāi)了一個(gè)默認(rèn)為關(guān)閉狀態(tài)的可收起面板，那么應(yīng)該讓它默認(rèn)打開(kāi)。
謝謝大家觀看！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn
