2020-11-19 周周
編輯導(dǎo)讀：如今，谷歌可以說是科技領(lǐng)域最大、最具有影響力的公司之一。正因為如此，它們的數(shù)字產(chǎn)品設(shè)計會對整個行業(yè)產(chǎn)生巨大的影響，成為人們競相模仿的榜樣。在該公司的UI&UX（用戶界面&用戶體驗）設(shè)計指南中，設(shè)計師們提到了10條原則，不管是iOS還是安卓系統(tǒng)都同樣適用。在這篇文章中，作者從這10條指南出發(fā)，加上自己的經(jīng)驗和相關(guān)案例，在設(shè)計方面為大家提供一些建議，希望對大家設(shè)計產(chǎn)品有幫助。
這里的聲音特指“Hero sounds”，用于襯托一些喜慶的、重要的高光時刻，它們常被用來激起用戶的情感，或烘托一種喜悅的氣氛，從而塑造產(chǎn)品或品牌在用戶心中的形象。以下場合適合使用 Hero sounds：慶祝用戶進(jìn)行了某項操作；歡迎用戶使用新的應(yīng)用程序或體驗；確認(rèn)用戶成功使用某款產(chǎn)品?！豆雀杪曇粼O(shè)計指南》
聲音可以被用來傳遞成功、成就或獲得回報等信息。谷歌指南中提到，Hero sounds出現(xiàn)的次數(shù)不應(yīng)該頻繁，否則無法突出其重要性。通過在同樣的環(huán)節(jié)提供同樣的聲音，久而久之用戶會將這種提示音與成就感掛鉤，從而增加對產(chǎn)品的粘性。如每成功更新一次應(yīng)用程序就會出現(xiàn)慶祝的聲音，或者每次待辦事項標(biāo)記為完成后就會出現(xiàn)慶祝的提示音。
不管我們是否注意到這一點，我們所聽到的產(chǎn)品的聲音與自己的感覺都是相掛鉤的。無論是手機發(fā)出的“叮咚”的消息提示音，還是MacBook的廢紙簍在清空時發(fā)出的揉紙的聲音，都在某種程度上影響著我們的情緒，也幫助我們更加了解用戶界面上發(fā)生的一切。
觸覺可以和聲音配合使用，也可以單獨使用。舉個例子，在手機黑屏的時候，觸覺是唯一一種可以對用戶提供反饋的方式。和其他配合使用時，觸覺應(yīng)該強有力、傳達(dá)愉悅的情緒?！栋沧坑|覺設(shè)計指南》
除了聲音之外，觸覺設(shè)計（如震動）也是一種刺激感覺的好方法，可以為用戶提供更加完整的體驗。用戶可以通過觸覺提示來嘗試、學(xué)習(xí)使用某一款產(chǎn)品。在有了不同的觸覺體驗后，我們將會對產(chǎn)品的某些功能有更加深入的了解。
舉個例子，如果某個用戶通過APP進(jìn)行付款，但在付款過程中出現(xiàn)了錯誤。這時候APP會進(jìn)行一連串緊張、短促的震動，對用戶進(jìn)行錯誤反饋。當(dāng)用戶熟悉了這種震動模式之后，下一次再感受到這種震動，就會立刻知道付款出現(xiàn)了問題。
產(chǎn)品設(shè)計師很容易忽略聲音和觸覺這兩個板塊，而過度專注于畫面。但這兩個板塊卻也扮演著非常重要的效果，可以為用戶體驗錦上添花。
圖片來自Material
動圖可以增加用戶的好感，在互動中為用戶增加個性化體驗，也可以表現(xiàn)品牌獨特的風(fēng)格?！豆雀枋謩菰O(shè)計指南》
動圖是我自己設(shè)計的產(chǎn)品Confetti中一個非常重要的因素，這是一款運動追蹤APP，是為那些追蹤自己生活習(xí)慣的用戶設(shè)計的。在設(shè)計這款產(chǎn)品時，我希望可以為用戶創(chuàng)造出一種滿足感，鼓勵他們培養(yǎng)好習(xí)慣。在這款A(yù)PP中，我大量使用切換功能，通過不同的手勢，界面或進(jìn)程可以平滑過渡，使用起來非常便捷。當(dāng)一個好習(xí)慣完成時，還會出現(xiàn)彩屑動畫飛舞的，加強用戶的滿意度。
簡言之，動圖可以應(yīng)用于不同的場景，通過過渡和變化的吸引用戶。
動圖可以強化兩種元素之間的聯(lián)系，實現(xiàn)快速切換，迅速解決特定的任務(wù)。動圖可以讓用戶專注于眼下最重要的事，不被其他因素所干擾?！豆雀枋謩菰O(shè)計指南》
在2020年，你的產(chǎn)品可以在一秒之內(nèi)激怒用戶。正如塔拉斯·斯凱斯基（Taras Skytski）在《用戶體驗設(shè)計中動畫使用的終極指南》中指出的那樣：“眾多研究發(fā)現(xiàn)，界面動畫的最佳速度在200到500毫秒之間。這一數(shù)字是通過研究人類大腦運行機制所得出的。100毫秒及以下的動畫因為速度太短而無法被識別，而超過1秒的動畫則會造成一種延遲感，讓用戶感到不舒服。”
通過動圖及產(chǎn)生的動畫效果（如切換）可以改善用戶體驗，同時保證可以迅速找到需要的版面，而不被其他信息干擾。但如果動圖及切換畫面的過程增加了不必要的等待時間，又不能改善體驗，那么這種環(huán)節(jié)就沒有必要存在。
圖片來自Bribble｜制圖Elena Petkovska
我們或多或少都有這樣的體驗：打開一個界面，里面充斥著太多文字和太少的圖像。在用戶體驗設(shè)計中，展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產(chǎn)品，而是希望通過圖像對一款產(chǎn)品進(jìn)行直觀的視覺理解。
你所選擇的圖像應(yīng)該能夠清晰地展示產(chǎn)品特點，不管是用戶自己上傳的圖片，專業(yè)攝影師的圖片，還是插畫風(fēng)格的圖片，它們都應(yīng)該能直觀展示產(chǎn)品外觀，反應(yīng)產(chǎn)品的特點?！豆雀鑸D像設(shè)計指南》
APP里的插圖和所有的視覺元素一樣重要，好的圖片可以讓用戶界面更加生動，使用戶體驗更加完善。恰當(dāng)?shù)膱D片還能展示品牌風(fēng)格，成為無聲的“故事講述者”。
我們應(yīng)當(dāng)有目的地使用圖像，作為總體內(nèi)容的補充而非替代。照片或者插圖最好能夠傳達(dá)足夠的信息，如產(chǎn)品外形、風(fēng)格，APP的用途，狀態(tài)等。媒體界有這么一句話：一張圖片抵得上1000個字。你可以在Unsplash、Pexels、Adobe Stock等網(wǎng)站上找到高質(zhì)量的圖片。
圖片來自Material
用戶界面設(shè)計中應(yīng)該關(guān)注產(chǎn)品的像素密度，讓界面可以適應(yīng)不同的屏幕?！豆雀柘袼孛芏仍O(shè)計指南》
像素密度（PPI）是用來衡量每物理英寸的像素數(shù)。另一個常用的單位是DP（Density-independent pixels，有時候簡稱為DIP）。像素密度=屏幕寬度或高度（以像素為單位）/屏幕寬度或高度（以英寸為單位）。
在設(shè)計界面時，我們不應(yīng)該只關(guān)注像素，還應(yīng)該關(guān)注不同設(shè)備的像素密度。這樣可以讓我們在做設(shè)計時保證元素適當(dāng)縮放，以適應(yīng)不同屏幕的尺寸。
舉個例子，我們現(xiàn)在有一個按鈕素材資源，大小為200 x 50 px。在一個160ppi的屏幕上可以原畫顯示；在一個320ppi的屏幕上它就會擴大成400 x 100 px，相當(dāng)于原始素材的兩倍大。
通過以上例子我們可以了解，在像素密度不同的屏幕上，素材呈現(xiàn)的狀態(tài)是不一樣的。在實際應(yīng)用中，素材可以會被放大三倍甚至四倍，如果素材不夠清晰，就會在拉大后虛掉。這就需要我們在選擇素材時格外謹(jǐn)慎，嘗試在不同設(shè)備上打開并檢查。
素材密度如何適應(yīng)屏幕尺寸？舉個例子，iPhone XS Max的屏幕是414 x 896 pt，注意這里的尺寸是物理尺寸pt，而非像素。如果以像素為單位計算，那么它的屏幕是1242 x 2688 px。所以當(dāng)我們?yōu)閕Phone XS Max設(shè)計應(yīng)用產(chǎn)品時，我會首先考慮用414 x 896 pt的素材，然后在輸出素材時將其乘以3。
圖片來自Material
離線狀態(tài)可以讓用戶知道這款應(yīng)用程序沒有連接網(wǎng)絡(luò)。如果你的產(chǎn)品有一些功能需要聯(lián)網(wǎng)使用，你最好能向用戶明確顯示連線狀態(tài)?！豆雀桦x線設(shè)計指南》
離線訪問功能是設(shè)計師經(jīng)常忽略、對用戶體驗影響卻非常重要的一環(huán)。雖然有些功能離線也可以使用，但是在能聯(lián)網(wǎng)的時候，最好還是主動提示用戶，推薦他們連接網(wǎng)絡(luò)。
如果有可能的話，要提前告知用戶下載相關(guān)信息，以便脫機訪問。最常見的例子就是Spotify等音樂應(yīng)用程序，它允許用戶下載歌曲，以便在沒有網(wǎng)絡(luò)的時候也能繼續(xù)聽歌。
假如你的產(chǎn)品不像Spotify或者Netflix那樣需要下載具體內(nèi)容，你可以發(fā)揮創(chuàng)意來設(shè)計在線、離線兩種模式。
谷歌瀏覽器在離線頁面提供恐龍游戲就是一個著名的例子（在谷歌瀏覽器連網(wǎng)的過程中，離線畫面會出現(xiàn)一只霸王龍，按空格鍵或者向上的箭頭就能控制霸王龍——譯者注）。這個小游戲填補了用戶等待連線的時間，將消極體驗轉(zhuǎn)變成了積極體驗。
我希望這份設(shè)計指南可以為你提供一些想法。除了谷歌的設(shè)計指南之外，我們還可以在IEM Carbon、Zendesk Garden、Workday Canvas等網(wǎng)站找到關(guān)于用戶界面和用戶體驗的設(shè)計指導(dǎo)，在這一領(lǐng)域進(jìn)行更深入地探索。
文章來源：人人都是產(chǎn)品經(jīng)理 作者：Danny Sapio 譯者：Michiko
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com