當(dāng)我們談?wù)搩?yōu)秀的產(chǎn)品設(shè)計時,我們常常會被 Dribbble 上那些炫酷的新事物、設(shè)計趨勢、微交互和概念圖所吸引。但關(guān)鍵在于:一些最好的經(jīng)驗教訓(xùn)來自于每天被數(shù)百萬人使用的真實產(chǎn)品。
Gmail 的移動收件箱就是其中之一。
它并不浮夸,也不刻意贏得設(shè)計獎項。但它抓住了基本要素——清晰的視覺效果、高效的交互以及以用戶為先的決策,讓電子郵件收發(fā)變得輕松便捷。無論你是設(shè)計師、創(chuàng)始人還是產(chǎn)品人員,研究 Gmail 如何處理收件箱都能讓你受益匪淺。
讓我們來分析一下。

1. 從主頁預(yù)覽附件
Gmail 不會強迫你打開郵件查看對方發(fā)送的文件。如果有附件,它會立即顯示在收件箱預(yù)覽中,方便你即時查看和點擊。
重要性:在移動設(shè)備上,每一次點擊都至關(guān)重要。為用戶提供訪問重要內(nèi)容的快捷方式,可以節(jié)省時間并減少用戶挫敗感。這小小的改進,卻帶來了巨大的可用性提升。
要點:思考用戶最想從列表視圖中的項目中獲得什么,并將其直接呈現(xiàn)。不要埋沒好東西。

2. 清晰區(qū)分已讀和未讀
這是最簡潔、精妙且有效的用戶體驗示例之一:Gmail 會用加粗的主題行和更高的對比度來顯示未讀郵件。就是這樣。沒有彩色圓點,沒有圖標(biāo)。只是巧妙地運用了字體排印。
工作原理:它可以立即掃描。你甚至不需要思考就能看到未讀郵件。
設(shè)計洞察:視覺重量 > 視覺混亂。如果簡單的對比度和字體樣式就能達到效果,就不要添加新元素。

3. 自動整理收件箱標(biāo)簽
主要功能、社交功能、推廣功能。Gmail 會將您收到的大量郵件自動分類,方便您管理。這不僅自動化,還能幫您減輕壓力。
為什么這樣做很明智:收件箱超載是真實存在的。Gmail 通過無需用戶輸入即可對內(nèi)容進行分類,為用戶提供了喘息的空間,并幫助他們確定優(yōu)先級。
產(chǎn)品團隊的經(jīng)驗:不要只展示內(nèi)容,還要精心策劃。智能默認設(shè)置和自動化可以減少決策疲勞。

4. 內(nèi)聯(lián)關(guān)鍵信息提取
以截圖中的 Under Armour 郵件為例。Gmail 會提取預(yù)計送達日期,并直接顯示在收件箱預(yù)覽中。無需點擊、滾動或搜索。
巧妙之處:它甚至在用戶打開郵件之前就解答了他們的疑問。這才是效率,這才是信任。
學(xué)習(xí)要點:如果你的產(chǎn)品能夠檢測日期、狀態(tài)、摘要等關(guān)鍵信息,就不要隱藏它。把它拿出來,在最有用的地方展示。

5. 簡潔且內(nèi)容豐富的層次結(jié)構(gòu)
Gmail 的收件箱界面功能豐富:頭像、發(fā)件人、主題、時間戳、預(yù)覽、標(biāo)簽、圖標(biāo)。但絲毫不會讓人感覺雜亂。
怎么做到的?巧妙地使用間距、字體大小、對齊方式和填充,創(chuàng)造出賞心悅目的視覺節(jié)奏。
設(shè)計要點:你可以展示大量內(nèi)容,但又不會讓人感到不知所措。關(guān)鍵在于層次和空間的留白。

從現(xiàn)實世界的用戶界面中學(xué)習(xí),而不僅僅是概念
這個 Gmail 細分只是UXSnaps上的眾多專題之一——UXSnaps 是一個免費網(wǎng)站,可以對成功產(chǎn)品背后的 UI 模式進行逆向工程。
每一個細分都直接取材于真實的產(chǎn)品屏幕,并附有快速實用的課程,助您輕松應(yīng)用。沒有專業(yè)術(shù)語,沒有空談,只有敏銳的洞察力。
如果您真的想提高自己的設(shè)計技能,那就從這里開始吧。