編輯導(dǎo)讀：如今，谷歌可以說(shuō)是科技領(lǐng)域最大、最具有影響力的公司之一。正因?yàn)槿绱耍鼈兊臄?shù)字產(chǎn)品設(shè)計(jì)會(huì)對(duì)整個(gè)行業(yè)產(chǎn)生巨大的影響，成為人們競(jìng)相模仿的榜樣。在該公司的UI&UX（用戶界面&用戶體驗(yàn)）設(shè)計(jì)指南中，設(shè)計(jì)師們提到了10條原則，不管是iOS還是安卓系統(tǒng)都同樣適用。在這篇文章中，作者從這10條指南出發(fā)，加上自己的經(jīng)驗(yàn)和相關(guān)案例，在設(shè)計(jì)方面為大家提供一些建議，希望對(duì)大家設(shè)計(jì)產(chǎn)品有幫助。

6. 利用聲音和觸感喚起用戶的情感

這里的聲音特指“Hero sounds”，用于襯托一些喜慶的、重要的高光時(shí)刻，它們常被用來(lái)激起用戶的情感，或烘托一種喜悅的氣氛，從而塑造產(chǎn)品或品牌在用戶心中的形象。以下場(chǎng)合適合使用 Hero sounds：慶祝用戶進(jìn)行了某項(xiàng)操作；歡迎用戶使用新的應(yīng)用程序或體驗(yàn)；確認(rèn)用戶成功使用某款產(chǎn)品。——《谷歌聲音設(shè)計(jì)指南》

聲音可以被用來(lái)傳遞成功、成就或獲得回報(bào)等信息。谷歌指南中提到，Hero sounds出現(xiàn)的次數(shù)不應(yīng)該頻繁，否則無(wú)法突出其重要性。通過(guò)在同樣的環(huán)節(jié)提供同樣的聲音，久而久之用戶會(huì)將這種提示音與成就感掛鉤，從而增加對(duì)產(chǎn)品的粘性。如每成功更新一次應(yīng)用程序就會(huì)出現(xiàn)慶祝的聲音，或者每次待辦事項(xiàng)標(biāo)記為完成后就會(huì)出現(xiàn)慶祝的提示音。

不管我們是否注意到這一點(diǎn)，我們所聽(tīng)到的產(chǎn)品的聲音與自己的感覺(jué)都是相掛鉤的。無(wú)論是手機(jī)發(fā)出的“叮咚”的消息提示音，還是MacBook的廢紙簍在清空時(shí)發(fā)出的揉紙的聲音，都在某種程度上影響著我們的情緒，也幫助我們更加了解用戶界面上發(fā)生的一切。

觸覺(jué)可以和聲音配合使用，也可以單獨(dú)使用。舉個(gè)例子，在手機(jī)黑屏的時(shí)候，觸覺(jué)是唯一一種可以對(duì)用戶提供反饋的方式。和其他配合使用時(shí)，觸覺(jué)應(yīng)該強(qiáng)有力、傳達(dá)愉悅的情緒。——《安卓觸覺(jué)設(shè)計(jì)指南》

除了聲音之外，觸覺(jué)設(shè)計(jì)（如震動(dòng)）也是一種刺激感覺(jué)的好方法，可以為用戶提供更加完整的體驗(yàn)。用戶可以通過(guò)觸覺(jué)提示來(lái)嘗試、學(xué)習(xí)使用某一款產(chǎn)品。在有了不同的觸覺(jué)體驗(yàn)后，我們將會(huì)對(duì)產(chǎn)品的某些功能有更加深入的了解。

舉個(gè)例子，如果某個(gè)用戶通過(guò)APP進(jìn)行付款，但在付款過(guò)程中出現(xiàn)了錯(cuò)誤。這時(shí)候APP會(huì)進(jìn)行一連串緊張、短促的震動(dòng)，對(duì)用戶進(jìn)行錯(cuò)誤反饋。當(dāng)用戶熟悉了這種震動(dòng)模式之后，下一次再感受到這種震動(dòng)，就會(huì)立刻知道付款出現(xiàn)了問(wèn)題。

產(chǎn)品設(shè)計(jì)師很容易忽略聲音和觸覺(jué)這兩個(gè)板塊，而過(guò)度專注于畫(huà)面。但這兩個(gè)板塊卻也扮演著非常重要的效果，可以為用戶體驗(yàn)錦上添花。

7. 通過(guò)動(dòng)圖表達(dá)獨(dú)特的風(fēng)格、塑造個(gè)性化品牌體驗(yàn)

圖片來(lái)自Material

動(dòng)圖可以增加用戶的好感，在互動(dòng)中為用戶增加個(gè)性化體驗(yàn)，也可以表現(xiàn)品牌獨(dú)特的風(fēng)格。——《谷歌手勢(shì)設(shè)計(jì)指南》

動(dòng)圖是我自己設(shè)計(jì)的產(chǎn)品Confetti中一個(gè)非常重要的因素，這是一款運(yùn)動(dòng)追蹤APP，是為那些追蹤自己生活習(xí)慣的用戶設(shè)計(jì)的。在設(shè)計(jì)這款產(chǎn)品時(shí)，我希望可以為用戶創(chuàng)造出一種滿足感，鼓勵(lì)他們培養(yǎng)好習(xí)慣。在這款A(yù)PP中，我大量使用切換功能，通過(guò)不同的手勢(shì)，界面或進(jìn)程可以平滑過(guò)渡，使用起來(lái)非常便捷。當(dāng)一個(gè)好習(xí)慣完成時(shí)，還會(huì)出現(xiàn)彩屑動(dòng)畫(huà)飛舞的，加強(qiáng)用戶的滿意度。

簡(jiǎn)言之，動(dòng)圖可以應(yīng)用于不同的場(chǎng)景，通過(guò)過(guò)渡和變化的吸引用戶。

動(dòng)圖可以強(qiáng)化兩種元素之間的聯(lián)系，實(shí)現(xiàn)快速切換，迅速解決特定的任務(wù)。動(dòng)圖可以讓用戶專注于眼下最重要的事，不被其他因素所干擾。——《谷歌手勢(shì)設(shè)計(jì)指南》

在2020年，你的產(chǎn)品可以在一秒之內(nèi)激怒用戶。正如塔拉斯·斯凱斯基（Taras Skytski）在《用戶體驗(yàn)設(shè)計(jì)中動(dòng)畫(huà)使用的終極指南》中指出的那樣：“眾多研究發(fā)現(xiàn)，界面動(dòng)畫(huà)的最佳速度在200到500毫秒之間。這一數(shù)字是通過(guò)研究人類大腦運(yùn)行機(jī)制所得出的。100毫秒及以下的動(dòng)畫(huà)因?yàn)樗俣忍潭鵁o(wú)法被識(shí)別，而超過(guò)1秒的動(dòng)畫(huà)則會(huì)造成一種延遲感，讓用戶感到不舒服。”

通過(guò)動(dòng)圖及產(chǎn)生的動(dòng)畫(huà)效果（如切換）可以改善用戶體驗(yàn)，同時(shí)保證可以迅速找到需要的版面，而不被其他信息干擾。但如果動(dòng)圖及切換畫(huà)面的過(guò)程增加了不必要的等待時(shí)間，又不能改善體驗(yàn)，那么這種環(huán)節(jié)就沒(méi)有必要存在。

8. 通過(guò)圖像進(jìn)行交流，并區(qū)分和突出產(chǎn)品特性

圖片來(lái)自Bribble｜制圖Elena Petkovska

我們或多或少都有這樣的體驗(yàn)：打開(kāi)一個(gè)界面，里面充斥著太多文字和太少的圖像。在用戶體驗(yàn)設(shè)計(jì)中，展示畫(huà)面比閱讀文字效果更好。用戶不希望通過(guò)閱讀來(lái)理解一款產(chǎn)品，而是希望通過(guò)圖像對(duì)一款產(chǎn)品進(jìn)行直觀的視覺(jué)理解。

你所選擇的圖像應(yīng)該能夠清晰地展示產(chǎn)品特點(diǎn)，不管是用戶自己上傳的圖片，專業(yè)攝影師的圖片，還是插畫(huà)風(fēng)格的圖片，它們都應(yīng)該能直觀展示產(chǎn)品外觀，反應(yīng)產(chǎn)品的特點(diǎn)。——《谷歌圖像設(shè)計(jì)指南》

APP里的插圖和所有的視覺(jué)元素一樣重要，好的圖片可以讓用戶界面更加生動(dòng)，使用戶體驗(yàn)更加完善。恰當(dāng)?shù)膱D片還能展示品牌風(fēng)格，成為無(wú)聲的“故事講述者”。

我們應(yīng)當(dāng)有目的地使用圖像，作為總體內(nèi)容的補(bǔ)充而非替代。照片或者插圖最好能夠傳達(dá)足夠的信息，如產(chǎn)品外形、風(fēng)格，APP的用途，狀態(tài)等。媒體界有這么一句話：一張圖片抵得上1000個(gè)字。你可以在Unsplash、Pexels、Adobe Stock等網(wǎng)站上找到高質(zhì)量的圖片。

9. 關(guān)注產(chǎn)品的像素密度

圖片來(lái)自Material

用戶界面設(shè)計(jì)中應(yīng)該關(guān)注產(chǎn)品的像素密度，讓界面可以適應(yīng)不同的屏幕。——《谷歌像素密度設(shè)計(jì)指南》

像素密度（PPI）是用來(lái)衡量每物理英寸的像素?cái)?shù)。另一個(gè)常用的單位是DP（Density-independent pixels，有時(shí)候簡(jiǎn)稱為DIP）。像素密度=屏幕寬度或高度（以像素為單位）/屏幕寬度或高度（以英寸為單位）。

在設(shè)計(jì)界面時(shí)，我們不應(yīng)該只關(guān)注像素，還應(yīng)該關(guān)注不同設(shè)備的像素密度。這樣可以讓我們?cè)谧鲈O(shè)計(jì)時(shí)保證元素適當(dāng)縮放，以適應(yīng)不同屏幕的尺寸。

舉個(gè)例子，我們現(xiàn)在有一個(gè)按鈕素材資源，大小為200 x 50 px。在一個(gè)160ppi的屏幕上可以原畫(huà)顯示；在一個(gè)320ppi的屏幕上它就會(huì)擴(kuò)大成400 x 100 px，相當(dāng)于原始素材的兩倍大。

通過(guò)以上例子我們可以了解，在像素密度不同的屏幕上，素材呈現(xiàn)的狀態(tài)是不一樣的。在實(shí)際應(yīng)用中，素材可以會(huì)被放大三倍甚至四倍，如果素材不夠清晰，就會(huì)在拉大后虛掉。這就需要我們?cè)谶x擇素材時(shí)格外謹(jǐn)慎，嘗試在不同設(shè)備上打開(kāi)并檢查。

素材密度如何適應(yīng)屏幕尺寸？舉個(gè)例子，iPhone XS Max的屏幕是414 x 896 pt，注意這里的尺寸是物理尺寸pt，而非像素。如果以像素為單位計(jì)算，那么它的屏幕是1242 x 2688 px。所以當(dāng)我們?yōu)閕Phone XS Max設(shè)計(jì)應(yīng)用產(chǎn)品時(shí)，我會(huì)首先考慮用414 x 896 pt的素材，然后在輸出素材時(shí)將其乘以3。

10. 考慮設(shè)計(jì)在線/離線狀態(tài)

圖片來(lái)自Material

離線狀態(tài)可以讓用戶知道這款應(yīng)用程序沒(méi)有連接網(wǎng)絡(luò)。如果你的產(chǎn)品有一些功能需要聯(lián)網(wǎng)使用，你最好能向用戶明確顯示連線狀態(tài)。——《谷歌離線設(shè)計(jì)指南》

離線訪問(wèn)功能是設(shè)計(jì)師經(jīng)常忽略、對(duì)用戶體驗(yàn)影響卻非常重要的一環(huán)。雖然有些功能離線也可以使用，但是在能聯(lián)網(wǎng)的時(shí)候，最好還是主動(dòng)提示用戶，推薦他們連接網(wǎng)絡(luò)。

如果有可能的話，要提前告知用戶下載相關(guān)信息，以便脫機(jī)訪問(wèn)。最常見(jiàn)的例子就是Spotify等音樂(lè)應(yīng)用程序，它允許用戶下載歌曲，以便在沒(méi)有網(wǎng)絡(luò)的時(shí)候也能繼續(xù)聽(tīng)歌。

假如你的產(chǎn)品不像Spotify或者Netflix那樣需要下載具體內(nèi)容，你可以發(fā)揮創(chuàng)意來(lái)設(shè)計(jì)在線、離線兩種模式。

谷歌瀏覽器在離線頁(yè)面提供恐龍游戲就是一個(gè)著名的例子（在谷歌瀏覽器連網(wǎng)的過(guò)程中，離線畫(huà)面會(huì)出現(xiàn)一只霸王龍，按空格鍵或者向上的箭頭就能控制霸王龍——譯者注）。這個(gè)小游戲填補(bǔ)了用戶等待連線的時(shí)間，將消極體驗(yàn)轉(zhuǎn)變成了積極體驗(yàn)。

11. 總結(jié)

我希望這份設(shè)計(jì)指南可以為你提供一些想法。除了谷歌的設(shè)計(jì)指南之外，我們還可以在IEM Carbon、Zendesk Garden、Workday Canvas等網(wǎng)站找到關(guān)于用戶界面和用戶體驗(yàn)的設(shè)計(jì)指導(dǎo)，在這一領(lǐng)域進(jìn)行更深入地探索。

文章來(lái)源：人人都是產(chǎn)品經(jīng)理           作者：Danny Sapio           譯者：Michiko

藍(lán)藍(lán)設(shè)計(jì)( www.0391cbd.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)