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

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

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

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

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

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

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