列表的展示方式，在工具類的產(chǎn)品中，類似于萬金油的感覺，但凡遇到同一個(gè)類型多個(gè)對(duì)象的展示界面，用列表總是能夠解決掉，前端處理的快~設(shè)計(jì)上也不需要花費(fèi)太多的心思，可謂是一舉多得~
例如：

然而~列表這種展示方式，正是因?yàn)楹?jiǎn)單，所以存在著一些局限

展示信息的局限

一個(gè)界面最多能展示的列數(shù)是固定的，如果列數(shù)過多，就會(huì)讓整個(gè)界面看起來像北京的地鐵站，滿滿的全是數(shù)據(jù)。為了保持界面的整潔性，設(shè)計(jì)師在處理列表界面時(shí)，務(wù)必會(huì)考慮列間距，展示哪些必要信息等，有時(shí)候甚至?xí)驗(yàn)楸匾畔⒍y以取舍。

在這個(gè)嘈雜的社會(huì)（呵呵~），即便是設(shè)計(jì)師整理匯總了關(guān)鍵的信息，也不能保證能夠直觀的展示對(duì)象中存在的各種信息。（我想強(qiáng)調(diào)直觀這一點(diǎn)，是因?yàn)橹庇^對(duì)于工具類的產(chǎn)品來說，意味著效率）

無法有效的減少用戶的操作路徑。

當(dāng)然，如果對(duì)象內(nèi)部的操作路徑本身就很簡(jiǎn)單，這樣的設(shè)計(jì)也是無可厚非，但是如果對(duì)象內(nèi)部仍然存在著更深入的操作路徑，就需要一種能把內(nèi)部路徑外置的方式來加快用戶的定位。

最近在做（或者說重構(gòu)？）一個(gè)工具類型的產(chǎn)品，刨去產(chǎn)品固有的第一級(jí)和第二級(jí)的菜單，單單“應(yīng)用”這個(gè)對(duì)象的一個(gè)二級(jí)功能，其內(nèi)容就包含了3-4層的結(jié)構(gòu)~（擦來~），也就是說，是一個(gè)對(duì)象包含了多個(gè)對(duì)象，簡(jiǎn)單繪制結(jié)構(gòu)如下：

那么，如果用戶需要查看某次部署的詳細(xì)記錄，他需要應(yīng)用-環(huán)境-具體環(huán)境-歷史記錄-歷史記錄詳情這樣一個(gè)路徑走過來~而就對(duì)象這個(gè)層級(jí)而言，應(yīng)用屬于一級(jí)對(duì)象，多個(gè)環(huán)境屬于二級(jí)對(duì)象，如果所有的對(duì)象都通過列表展示，用戶的確是需要這樣一個(gè)路徑的操作。

面板設(shè)計(jì)的嘗試

之前在做一個(gè)XX的產(chǎn)品的時(shí)候（當(dāng)然也是以應(yīng)用作為一級(jí)對(duì)象）就曾經(jīng)嘗試通過面板的方式多樣化的展示應(yīng)用的內(nèi)容~當(dāng)時(shí)只是想增加應(yīng)用的展示信息（demo比較簡(jiǎn)陋~）

第一次嘗試雖然沒有成功實(shí)現(xiàn)，不過根據(jù)當(dāng)時(shí)同學(xué)們的表現(xiàn)可以看出大家對(duì)這種方式還是挺贊同的。

于是這次，有了第二次嘗試的機(jī)會(huì)，我嘗試把應(yīng)用的關(guān)鍵信息通過面板的方式展示出來，并能夠減少用戶的操作路徑，哪怕只是減少一層。

如下（工作數(shù)據(jù)，所以打了一下碼）：

或者

第一種方式的設(shè)計(jì)參考于

（這種常見于社交類的網(wǎng)站的設(shè)計(jì)，拿來用到工具類型的產(chǎn)品設(shè)計(jì)中感覺也還不錯(cuò)呢~）

第二種設(shè)計(jì)還是基于第一次嘗試的設(shè)計(jì)，進(jìn)行了略微的改造。

而在應(yīng)用中的環(huán)境頁面，也進(jìn)行了類似的改造：

為什么引入這類面板替代列表？

• 直觀，不僅能夠展示應(yīng)用自身的屬性信息，還可以將應(yīng)用中不同功能的關(guān)鍵信息都放置在面板上，用戶可以在不深入到應(yīng)用的前提下獲取更多的信息。
• 快捷，內(nèi)部功能鍵外置，不需要一層層的深入，間接相當(dāng)于快捷入口啦~
• 信息多樣化，面板相對(duì)于列表的優(yōu)點(diǎn)就是展示性強(qiáng)，圖表、數(shù)據(jù)、標(biāo)簽…..在這里都可以嘗試。
• 可塑性強(qiáng)，對(duì)于面板中央這么一大塊的留白，設(shè)計(jì)師可以充分的發(fā)揮自己的優(yōu)勢(shì)來豐富應(yīng)用的展示方式。

但是，面板相比于列表，會(huì)占用較大的空間，導(dǎo)致一個(gè)界面上展示的對(duì)象數(shù)量會(huì)變少~這種情況如何解決？

我想到的是通過視圖的切換來實(shí)現(xiàn)對(duì)象的列表與面板展示方式的切換，就如同mac 文件夾中的視圖選項(xiàng)：

無縫切換看起來也很酷炫呢~

當(dāng)然，不是所有的列表都適合改造成面板，面板適用于：

• 目標(biāo)對(duì)象中有較為復(fù)雜的操作，或者較深的路徑。
• 目標(biāo)對(duì)象的各類信息可以較為簡(jiǎn)單的展示出來。
• 目標(biāo)對(duì)象不宜過多（當(dāng)然如果過多可以通過切換視圖的方式調(diào)整）。
• 目標(biāo)對(duì)象沒有過多的個(gè)性化設(shè)置，關(guān)鍵信息存在共性。

如果只是簡(jiǎn)單的數(shù)據(jù)羅列，那列表當(dāng)然還是首選。

不過在日常的設(shè)計(jì)過程中，這種設(shè)計(jì)方式可以是不是的嘗試下，效果還是不錯(cuò)的~

作者：fengyunzyl

來源：簡(jiǎn)書