B端視覺 | 項目里全是表格頁該怎么做加分設計?

9 評論 10025 瀏覽 125 收藏 13 分鐘

表格頁面是B端項目中最重要的頁面類型,以項目實用角度來講,使用相同樣式的表格開發起來成本很低,效率很高。但是,站在設計師的立場,表格足不了作品集包裝的規格,或者挑剔的甲方和領導的評審。下面這篇文章作者就為我們講解了如何進行表格優化。趕緊看看吧。

即使我們使用正確的標準和方法完成了表格的設計,依舊會產生一個問題,就是整個項目的所有表格頁面似乎都長得一樣!尤其在表格占據項目 80% 以上比例的時候,整個項目看起來似乎只有 “一種” 頁面,觀感特別不好。

如果以項目實用角度來講,使用相同樣式的表格開發起來成本很低,效率很高的,只要對應的場景下用戶使用起來不覺得有問題,那全是表格就沒有什么不合理的地方。

但是,站在設計師的立場,所有頁面都是復制粘貼的形式即使能滿足項目落地需求,也滿足不了作品集包裝的規格,或者挑剔的甲方和領導的評審(沒有設計感)

B端視覺 | 項目里全是表格頁該怎么做加分設計?

所以,作為設計師必須要具備更多樣的表格頁面設計思路,以應對評審和最終作品集輸出的場景。所以這篇要站在政治不正確的角度出發,不再思考體驗和價值,完全就是圍繞設計師“保命”方式展開。

這次的分享,就圍繞怎么優化表格頁的設計展開,下面是一個基礎的表格案例,我們會用它來完成一系列的調整演示。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

一、表格的優化

表格頁面本身可以優化的內容是不少的,在我們切換表格頁面都是類型之前,首先要在固有基礎上做努力。
可以調整的內容包含3種:

  • 增加頁面模塊
  • 優化篩選模塊
  • 豐富表格組件

1. 增加頁面模塊

這個功能說起,有時候一些枯燥、簡單的頁面是很難做出設計感的,設計元素過少就很難有施展的余地,所以需要人為去增加一點細節。

雖然模塊、字段通常是需要根據業務需求制作的,但不代表設計師不能根據自己的想法去提出一些新的需求建議,尤其是在優化自己的作品集時。

例如增加和功能關聯性不大的數字統計模塊,和地圖相關的場景中增加地圖模塊,針對層級篩選的側邊樹狀選擇欄,或者和本頁面相關的其它模塊。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

B端視覺 | 項目里全是表格頁該怎么做加分設計?

2. 優化篩選模塊

讓篩選和頁面樣式結合的更合理一點。最基礎也最簡單的篩選就是獨立一個模塊來放置篩選選項和矩形框,我們可以打破這種形式,一方面優化選項數量,另一方面可以將它們和表格組件進行合并。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

B端視覺 | 項目里全是表格頁該怎么做加分設計?

3. 組件自身的優化

也是頁面最關鍵的因素。如果真的有關注過表格的樣式,就應該知道表格的每個細節都可以成為設計點。包括表頭、分割線、斑馬紋、堆疊、字段對比、字段樣式、操作列、交互反饋等等。

即使是一個本身很枯燥的表格,我們也根據想要實現的效果,適當的增減對應的字段信息,來達到指定的效果。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

以評審和作品集的角度來看,表格頁面需要盡量能輸出一些有 “設計感” 的樣式出來,不然免不了被指出或者低看。所以掌握越多的設計思路,就能帶給我們越多的收益。

二、列表形式應用

除了表格本身的樣式拓展和優化,還必須關注一個問題,就是表格頁面并不是一定要做表格!我們不是只能用表格的形式來呈現數據信息的,還有別的選項可以用。
第一個選項,就是轉換成列表的形式。

這是很多人都會搞混的兩種形式,表格是指使用橫縱坐標來劃分單元格排布內容的形式,而列表則是依序排列同級信息的方式,沒有固定的樣式。

B端的表格本質上也是列表的一種,只是列表并不是只能當表格,還可以當卡片,當圖標,當畫板,當圖冊來展示。這是非常關鍵的認知,決定了我們怎么在表格的基礎上轉換出其它的樣式。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

首先我們就說基礎列表模式,和表格比較起來最大的區別,就是一個數據編組下的字段不用放進單元格內,無法直接用表頭對數據進行辨識和排序。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

而優點是字段信息不用再使用這么固化的模式,可以更自由的進行組合和排版,在一些不需要大量進行表頭排序控制的頁面中,往往使用體驗更佳。

所以,當數據的條目數不是非常龐大,且字段信息過多難以辨識的情況,就可以嘗試使用基礎列表的模式來完成頁面類型的切換。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

B端視覺 | 項目里全是表格頁該怎么做加分設計?

至于基礎列表還能拓展出什么花樣,建議大家多在線上的網站中參考,而不要把目光局限在 B 端產品中。

三、卡片樣式應用

列表的第二種形式,就是卡片樣式類型了,通過卡片化的設計,來實現橫 / 縱向排列而不是只有縱向的排列模式。

卡片的設計具有更強的獨立性,來突出每個對象的特征和信息。同時也因為不受表格本身的限制,卡片的設計也就具有更靈活的發揮空間。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

而在設計卡片的過程中,一定要凸出標題,同時要在卡片中應用比較豐富的字段樣式,而不是僅僅把一堆文字換種排版堆到一個卡片里面。

比如下面是我們根據案例完成的調整:

B端視覺 | 項目里全是表格頁該怎么做加分設計?

B端視覺 | 項目里全是表格頁該怎么做加分設計?

四、畫板模式應用

除了基本的卡片樣式外,還有一種以展示圖片為主的卡片類型 —— 畫板模式。
這在以圖片為主導的數據對象中非常常見,比如少量的新聞、商品、人員、門店對象的管理中,往往圖形的識別效率是遠高于普通表格的。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

而當我們使用畫板模式的時候,就要確保數據中原本就包含易于識別的圖片內容,如果沒有是沒辦法強行使用這種模式的,比如上方的案例中,強行使用圖片效果是不太理想的,因為數據對象沒有能易于識別的圖片對象。

同時,站在作品集角度,如果封面圖片本身質量太差(甚至同類找不出好的),那么使用這種模式的設計效果就不會特別理想,一定要注意。

五、圖標模式應用

最后一種,就是圖標模式的應用了,這在電腦資源管理器中最常見的顯示模式。它和畫板模式類似,但區別是每個數據對象的辨識從獨有的圖片切換成了更有指向性和寓意的圖標。

這種模式適用于資源文件的管理,或者模塊、功能、組件、項目等數據內容的羅列。

B端視覺 | 項目里全是表格頁該怎么做加分設計?

同理,圖標模式的使用得符合圖標識別的特性,如果數據對象本身沒有易于識別或有實際意義的圖標,那么強行使用這種模式的效果也就不會太好。

包括這次我們使用的案例,應用代碼類型、危害等級、風險情況任意一個字段作為展示的圖標,都沒有太大的意義。所以能理解這個意思就可以,我就不在這里展示出來了。

六、結尾

總結起來,以上的“表格”頁面設計思路,本質就是拿到需求以后,思考該頁面適合使用哪種形式展示,是只適合表格還是適合列表。

如果只能用表格,那么在表格的基礎上可以按頁面實際情況做優化。如果適合做列表,那么使用基礎的,還是卡片、畫板、圖標模式。

這種設計的思路和能力是B端設計師必備的能力,雖然不是每個項目都一定得這么輸出,但它能幫助我們打開思路,應對更復雜多樣的設計要求。

作者:酸梅干超人;公眾號:超人的電話亭(ID:Superman_Call)

本文由 @超人的電話亭 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash ,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感覺到3.組件…差不多,后面就有點…

    來自浙江 回復
  2. 牛逼,學習了!

    來自浙江 回復
  3. 從一個表格的基礎樣式,可以延伸出這么多的樣式,大開腦洞了

    來自江蘇 回復
  4. 注意作者文中所說的:“這篇要站在政治不正確的角度出發,不再思考體驗和價值,完全就是圍繞設計師“保命”方式展開。”

    來自四川 回復
    1. 哈哈哈

      來自北京 回復
    2. 哈哈哈,一針見血。。。在實際案例中應該GG了。。。作品集也不敢用,面試官一句“B端的屏效在哪里啊”就不知道怎么回復了。。。

      來自浙江 回復
  5. 假如產品的原型就是第一版,設計為了效果和美觀做成了最后一版的話,根本沒人搭理設計師的設計樣式的,只會說一句你這些需求功能產品都沒給到不會按照設計弄的,吊都沒用完全是為了設計而設計了。

    來自上海 回復
  6. 開發:我的刀在哪里

    來自上海 回復
  7. 優秀的表格能讓需求者更好地分析數據,對產品做出優化

    來自山西 回復