2020-11-19 周周
編輯導(dǎo)讀：如今，谷歌可以說是科技領(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)品有幫助。
這里的聲音特指“Hero sounds”，用于襯托一些喜慶的、重要的高光時(shí)刻，它們常被用來(lái)激起用戶的情感，或烘托一種喜悅的氣氛，從而塑造產(chǎn)品或品牌在用戶心中的形象。以下場(chǎng)合適合使用 Hero sounds：慶祝用戶進(jìn)行了某項(xiàng)操作；歡迎用戶使用新的應(yīng)用程序或體驗(yàn)；確認(rèn)用戶成功使用某款產(chǎn)品?！豆雀杪曇粼O(shè)計(jì)指南》
聲音可以被用來(lái)傳遞成功、成就或獲得回報(bào)等信息。谷歌指南中提到，Hero sounds出現(xiàn)的次數(shù)不應(yīng)該頻繁，否則無(wú)法突出其重要性。通過在同樣的環(huán)節(jié)提供同樣的聲音，久而久之用戶會(huì)將這種提示音與成就感掛鉤，從而增加對(duì)產(chǎn)品的粘性。如每成功更新一次應(yīng)用程序就會(huì)出現(xiàn)慶祝的聲音，或者每次待辦事項(xiàng)標(biāo)記為完成后就會(huì)出現(xiàn)慶祝的提示音。
不管我們是否注意到這一點(diǎn)，我們所聽到的產(chǎn)品的聲音與自己的感覺都是相掛鉤的。無(wú)論是手機(jī)發(fā)出的“叮咚”的消息提示音，還是MacBook的廢紙簍在清空時(shí)發(fā)出的揉紙的聲音，都在某種程度上影響著我們的情緒，也幫助我們更加了解用戶界面上發(fā)生的一切。
觸覺可以和聲音配合使用，也可以單獨(dú)使用。舉個(gè)例子，在手機(jī)黑屏的時(shí)候，觸覺是唯一一種可以對(duì)用戶提供反饋的方式。和其他配合使用時(shí)，觸覺應(yīng)該強(qiáng)有力、傳達(dá)愉悅的情緒?！栋沧坑|覺設(shè)計(jì)指南》
除了聲音之外，觸覺設(shè)計(jì)（如震動(dòng)）也是一種刺激感覺的好方法，可以為用戶提供更加完整的體驗(yàn)。用戶可以通過觸覺提示來(lái)嘗試、學(xué)習(xí)使用某一款產(chǎn)品。在有了不同的觸覺體驗(yàn)后，我們將會(huì)對(duì)產(chǎn)品的某些功能有更加深入的了解。
舉個(gè)例子，如果某個(gè)用戶通過APP進(jìn)行付款，但在付款過程中出現(xiàn)了錯(cuò)誤。這時(shí)候APP會(huì)進(jìn)行一連串緊張、短促的震動(dòng)，對(duì)用戶進(jìn)行錯(cuò)誤反饋。當(dāng)用戶熟悉了這種震動(dòng)模式之后，下一次再感受到這種震動(dòng)，就會(huì)立刻知道付款出現(xiàn)了問題。
產(chǎn)品設(shè)計(jì)師很容易忽略聲音和觸覺這兩個(gè)板塊，而過度專注于畫面。但這兩個(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中，我大量使用切換功能，通過不同的手勢(shì)，界面或進(jìn)程可以平滑過渡，使用起來(lái)非常便捷。當(dāng)一個(gè)好習(xí)慣完成時(shí)，還會(huì)出現(xiàn)彩屑動(dòng)畫飛舞的，加強(qiáng)用戶的滿意度。
簡(jiǎn)言之，動(dòng)圖可以應(yīng)用于不同的場(chǎng)景，通過過渡和變化的吸引用戶。
動(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)畫使用的終極指南》中指出的那樣：“眾多研究發(fā)現(xiàn)，界面動(dòng)畫的最佳速度在200到500毫秒之間。這一數(shù)字是通過研究人類大腦運(yùn)行機(jī)制所得出的。100毫秒及以下的動(dòng)畫因?yàn)樗俣忍潭鵁o(wú)法被識(shí)別，而超過1秒的動(dòng)畫則會(huì)造成一種延遲感，讓用戶感到不舒服?！?/span>
通過動(dòng)圖及產(chǎn)生的動(dòng)畫效果（如切換）可以改善用戶體驗(yàn)，同時(shí)保證可以迅速找到需要的版面，而不被其他信息干擾。但如果動(dòng)圖及切換畫面的過程增加了不必要的等待時(shí)間，又不能改善體驗(yàn)，那么這種環(huán)節(jié)就沒有必要存在。
圖片來(lái)自Bribble｜制圖Elena Petkovska
我們或多或少都有這樣的體驗(yàn)：打開一個(gè)界面，里面充斥著太多文字和太少的圖像。在用戶體驗(yàn)設(shè)計(jì)中，展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來(lái)理解一款產(chǎn)品，而是希望通過圖像對(duì)一款產(chǎn)品進(jìn)行直觀的視覺理解。
你所選擇的圖像應(yīng)該能夠清晰地展示產(chǎn)品特點(diǎn)，不管是用戶自己上傳的圖片，專業(yè)攝影師的圖片，還是插畫風(fēng)格的圖片，它們都應(yīng)該能直觀展示產(chǎn)品外觀，反應(yīng)產(chǎn)品的特點(diǎn)。——《谷歌圖像設(shè)計(jì)指南》
APP里的插圖和所有的視覺元素一樣重要，好的圖片可以讓用戶界面更加生動(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ì)量的圖片。
圖片來(lái)自Material
用戶界面設(shè)計(jì)中應(yīng)該關(guān)注產(chǎn)品的像素密度，讓界面可以適應(yīng)不同的屏幕?！豆雀柘袼孛芏仍O(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的屏幕上可以原畫顯示；在一個(gè)320ppi的屏幕上它就會(huì)擴(kuò)大成400 x 100 px，相當(dāng)于原始素材的兩倍大。
通過以上例子我們可以了解，在像素密度不同的屏幕上，素材呈現(xiàn)的狀態(tài)是不一樣的。在實(shí)際應(yīng)用中，素材可以會(huì)被放大三倍甚至四倍，如果素材不夠清晰，就會(huì)在拉大后虛掉。這就需要我們?cè)谶x擇素材時(shí)格外謹(jǐn)慎，嘗試在不同設(shè)備上打開并檢查。
素材密度如何適應(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。
圖片來(lái)自Material
離線狀態(tài)可以讓用戶知道這款應(yīng)用程序沒有連接網(wǎng)絡(luò)。如果你的產(chǎn)品有一些功能需要聯(lián)網(wǎng)使用，你最好能向用戶明確顯示連線狀態(tài)?！豆雀桦x線設(shè)計(jì)指南》
離線訪問功能是設(shè)計(jì)師經(jīng)常忽略、對(duì)用戶體驗(yàn)影響卻非常重要的一環(huán)。雖然有些功能離線也可以使用，但是在能聯(lián)網(wǎng)的時(shí)候，最好還是主動(dòng)提示用戶，推薦他們連接網(wǎng)絡(luò)。
如果有可能的話，要提前告知用戶下載相關(guān)信息，以便脫機(jī)訪問。最常見的例子就是Spotify等音樂應(yīng)用程序，它允許用戶下載歌曲，以便在沒有網(wǎng)絡(luò)的時(shí)候也能繼續(xù)聽歌。
假如你的產(chǎn)品不像Spotify或者Netflix那樣需要下載具體內(nèi)容，你可以發(fā)揮創(chuàng)意來(lái)設(shè)計(jì)在線、離線兩種模式。
谷歌瀏覽器在離線頁(yè)面提供恐龍游戲就是一個(gè)著名的例子（在谷歌瀏覽器連網(wǎng)的過程中，離線畫面會(huì)出現(xiàn)一只霸王龍，按空格鍵或者向上的箭頭就能控制霸王龍——譯者注）。這個(gè)小游戲填補(bǔ)了用戶等待連線的時(shí)間，將消極體驗(yàn)轉(zhuǎn)變成了積極體驗(yàn)。
我希望這份設(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.alimai.net )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net