Gmail界面改版了，層級簡單 信息克制

Sponsor

前言：本文介紹了B端產品設計的重要性，尤其是介于B端和C端之間的產品如郵箱，需要簡潔好看且有用。通過對比國內郵箱和Gmail的設計，作者總結了Gmail的設計思路，包括層級簡單、信息克制、隱藏操作和重點明確等方面，認為國產郵箱可以借鑒這些思路。作者強調，在B端產品設計上，應該多學習海外大廠的經驗，以提高競爭力。

很多人覺得B端不用簡潔好看，方便就行，功能堆砌也沒關系。

但B端這個概念本來就是模糊的，尤其是遇到郵箱這種介于B和C之間的產品，簡潔好看還是有用的。

去年底Gmail來了個設計改版，更向標準的?Material Design 3?靠攏了：

于是我順便研究了一下他們的UI，并拿來和國內的郵箱對比。

不得不說，Google的設計還是很厲害的，一下子就把國內競品比下去了。

當然，咱們也不能過于貶低國內大廠，畢竟這也是因為郵箱這東西在國內用的少，不是啥特別重要的產品。

但這個對比還是很有意義的，因為郵箱這種產品非常標準化，而且算是介于B端和C端之間。

所以郵箱產品能夠很容易橫向對比出設計上的差異，尤其對B端很有借鑒價值。

雖然海內外用戶在習慣上有差異，但不得不說，在Google等海外大廠的B端經驗還是明顯領先于我們。

還沒追上別人時，就多跟人學學，總好過閉門造車。

接下來我就直接講講，Gmail有哪些好的設計思路，是國產郵箱以及很多其它B端產品值得借鑒的——整理了6點。

P.S. 本次主要用網易、QQ和新浪郵箱作為對比，第一個我用的比較少，另外2個是有一直在用的。

1.層級簡單

網易和新浪郵箱都有一個首頁，用來展示數據和……毫不相關的東西。

但是QQ郵箱和Gmail都沒有這個首頁。

2.信息克制

相比Gmail，國產郵箱多出了不少信息，例如郵箱名稱：

其次，是這些其它應用或付費功能的入口。這玩意兒其實Gmail也有，不過只有三四個圖標。

批量操作也有一堆按鈕，這些其實必須先勾選才能操作，否則就報錯

Gmail默認不展示這些批量操作，勾選后才會出現：

國產郵箱特別喜歡展示數字信息，在各種地方告訴你有幾封郵件，今天幾封、昨天幾封、多少未讀……

相比之下，Gmail展示等數字就要少很多：

3.隱藏操作

Gmail功能絕對不比任何一款國產郵箱少，但因為設計師很會隱藏操作，所以顯得比較簡潔。

例如前面說過的批量操作，就是一個例子。

除此之外，還有不少。

其實Gmail左側的導航項比國產郵箱還多，但是大部分被折疊了。

而國產郵箱很少用這種處理方式，一級菜單就一定要展示出來。

還有Gmail的郵箱列表懸停時，操作圖標會遮住日期和部分文字，讓右側圖標更加清晰：

而國產郵箱也基本沒有這種處理方式，懸停后只會疊加操作，不會覆蓋或替換：

4.重點明確

Gmail一眼看去，就知道主要操作有兩個——寫郵件和搜索：

而國產郵箱哪怕刻意要找哪里可以寫郵件，也是不容易：

這只是一個非常簡單的例子，其實整個界面上，Gmail的重點就是要更明確些。

為什么會有這樣的差異，主要有2方面原因——色彩克制和尺寸差異。

尺寸上，Gmail刻意加大了寫郵件按鈕和搜索框的尺寸，使其明顯有別于其它元素。

Gmail對顏色是非?？酥频?，除了選中態的高亮色外，整個界面的色彩并不多。

而國產郵箱的組件尺寸都相差不大，顏色又很多，而且很多色彩都不會用在重要信息上。

例如QQ郵箱，左導航一半以上的圖標都是有顏色的，郵件列表每行的收件人頭像和標記已讀圖標也有顏色，左下角還有一個廣告卡片。

網易郵箱左導航有幾個色彩圖標和紅點，郵件列表上也有一個標記已讀的圖標，但最干擾的還是開通會員的黃色按鈕和廣告banner：

新浪郵箱呢，最搶眼的是右上角的壁紙，以及郵件列表的分類標簽，以及右下角的滾動廣告：

5.輕量操作

國產郵箱點擊寫信，都會打開一整個郵件編輯頁面。

Gmail老早以前是這樣，現在早換成這種快捷小窗口了，能收起來，也能放大：

P.S.注意底部有個寫信窗口最小化了。

還有就是郵件編輯頁面，咱們現實點說，誰寫郵件會搞一堆花里胡哨的樣式的？一般就是普通文字，頂多加個標題、粗體和列表，也就差不多了。

而國產的郵件編輯頁面，都喜歡在頂部整一大堆樣式功能，看著心里發怵，感覺不編輯一下格式就該發郵件了：

而Gmail卻把這些簡化并放在底部：

6.反饋清晰

到這里，就是細節對決了。

Gmail幾乎所有可操作區域都有懸停效果，而且效果還很清晰：

而國產郵箱很多圖標懸停效果不明確，或者根本沒有懸停效果：

關于這種懸停效果，其實是一種設計趨勢，之前我發文討論過：好多按鈕懸停不變色了，這是大勢所趨？

Gmail還有一個令我驚訝的細節：圖標懸停后不是都有氣泡說明嗎？這個說明一般都會延遲一點出現，以免對不需要說明的用戶產生干擾。

這個延遲是Gmail和國產郵箱都有的，但差別是，Gmail如果有一排圖標放在一起，那么第一次出現氣泡時會延遲，后面的都會改為立即出現。

仔細看上圖，一個一個懸停時，氣泡都延遲了。而一個接一個懸停時，只有第一個氣泡會延遲，后面都立即出現。

而國產郵箱并沒有這么一個判斷機制，每個圖標的說明氣泡都要等待相同的時間。

這種層次的細節，必須要有系統性的設計規劃才能做出，真是讓人不得不佩服！

這些差異，確實是國內B端產品也常見的

B端產品擺脫不了功能太多的負擔，這樣對維護UX帶來更大的挑戰。

面對這種挑戰，我們有兩種選擇：

一是以好用就行為原則，放任功能堆砌，美其名曰這都是客戶需要的。

二是是盡力維持界面信息的有效簡潔，功能越多，就越要了解其優先級和使用場景，這樣才能進行合理取舍。

第一種肯定是最簡單的，不需要啥水平都能做到。

第二種做好了很出彩，但要做好很難。水平不夠硬要做的話，可能效果更糟，還不如擺爛。

哪種選擇才是最優解？沒有絕對答案，這肯定是因人而異的。

這就好比現代年輕人的困惑——內卷還是躺平？卷有卷的好處，躺也有躺的好處。

不同的境遇讓我們做出不同的選擇，最終導致不同的結局。

你想怎樣選擇呢？

來源：體驗進階（ID：Advanced_UX）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。