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

然而~列表這種展示方式，正是因為簡單，所以存在著一些局限

展示信息的局限

一個界面最多能展示的列數是固定的，如果列數過多，就會讓整個界面看起來像北京的地鐵站，滿滿的全是數據。為了保持界面的整潔性，設計師在處理列表界面時，務必會考慮列間距，展示哪些必要信息等，有時候甚至會因為必要信息而難以取舍。

在這個嘈雜的社會（呵呵~），即便是設計師整理匯總了關鍵的信息，也不能保證能夠直觀的展示對象中存在的各種信息。（我想強調直觀這一點，是因為直觀對于工具類的產品來說，意味著效率）

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

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

最近在做（或者說重構？）一個工具類型的產品，刨去產品固有的第一級和第二級的菜單，單單“應用”這個對象的一個二級功能，其內容就包含了3-4層的結構~（擦來~），也就是說，是一個對象包含了多個對象，簡單繪制結構如下：

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

面板設計的嘗試

之前在做一個XX的產品的時候（當然也是以應用作為一級對象）就曾經嘗試通過面板的方式多樣化的展示應用的內容~當時只是想增加應用的展示信息（demo比較簡陋~）

第一次嘗試雖然沒有成功實現，不過根據當時同學們的表現可以看出大家對這種方式還是挺贊同的。

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

如下（工作數據，所以打了一下碼）：

或者

第一種方式的設計參考于

（這種常見于社交類的網站的設計，拿來用到工具類型的產品設計中感覺也還不錯呢~）

第二種設計還是基于第一次嘗試的設計，進行了略微的改造。

而在應用中的環境頁面，也進行了類似的改造：

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

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

但是，面板相比于列表，會占用較大的空間，導致一個界面上展示的對象數量會變少~這種情況如何解決？

我想到的是通過視圖的切換來實現對象的列表與面板展示方式的切換，就如同mac 文件夾中的視圖選項：

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

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

• 目標對象中有較為復雜的操作，或者較深的路徑。
• 目標對象的各類信息可以較為簡單的展示出來。
• 目標對象不宜過多（當然如果過多可以通過切換視圖的方式調整）。
• 目標對象沒有過多的個性化設置，關鍵信息存在共性。

如果只是簡單的數據羅列，那列表當然還是首選。

不過在日常的設計過程中，這種設計方式可以是不是的嘗試下，效果還是不錯的~

作者：fengyunzyl

來源：簡書