谷歌的 10 個(gè)“Material Design”設(shè)計(jì)要點(diǎn)(下)
編輯導(dǎo)讀:如今,谷歌可以說是科技領(lǐng)域最大、最具有影響力的公司之一。正因?yàn)槿绱?,它們的?shù)字產(chǎn)品設(shè)計(jì)會(huì)對(duì)整個(gè)行業(yè)產(chǎn)生巨大的影響,成為人們競相模仿的榜樣。在該公司的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í)刻,它們常被用來激起用戶的情感,或烘托一種喜悅的氣氛,從而塑造產(chǎn)品或品牌在用戶心中的形象。以下場合適合使用?Hero sounds:慶祝用戶進(jìn)行了某項(xiàng)操作;歡迎用戶使用新的應(yīng)用程序或體驗(yàn);確認(rèn)用戶成功使用某款產(chǎn)品?!豆雀杪曇粼O(shè)計(jì)指南》
聲音可以被用來傳遞成功、成就或獲得回報(bào)等信息。谷歌指南中提到,Hero sounds出現(xiàn)的次數(shù)不應(yīng)該頻繁,否則無法突出其重要性。通過在同樣的環(huán)節(jié)提供同樣的聲音特效,久而久之用戶會(huì)將這種提示音與成就感掛鉤,從而增加對(duì)產(chǎn)品的粘性。如每成功更新一次應(yīng)用程序就會(huì)出現(xiàn)慶祝的聲音特效,或者每次待辦事項(xiàng)標(biāo)記為完成后就會(huì)出現(xiàn)慶祝的提示音。
不管我們是否注意到這一點(diǎn),我們所聽到的產(chǎn)品的聲音與自己的感覺都是相掛鉤的。無論是手機(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)。用戶可以通過觸覺提示來嘗試、學(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)錦上添花。
7. 通過動(dòng)圖表達(dá)獨(dú)特的風(fēng)格、塑造個(gè)性化品牌體驗(yàn)
圖片來自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)程可以平滑過渡,使用起來非常便捷。當(dāng)一個(gè)好習(xí)慣完成時(shí),還會(huì)出現(xiàn)彩屑動(dòng)畫飛舞的特效,加強(qiáng)用戶的滿意度。
簡言之,動(dòng)圖可以應(yī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法被識(shí)別,而超過1秒的動(dòng)畫則會(huì)造成一種延遲感,讓用戶感到不舒服。”
通過動(dòng)圖及產(chǎn)生的動(dòng)畫效果(如切換)可以改善用戶體驗(yàn),同時(shí)保證可以迅速找到需要的版面,而不被其他信息干擾。但如果動(dòng)圖及切換畫面的過程增加了不必要的等待時(shí)間,又不能改善體驗(yàn),那么這種環(huán)節(jié)就沒有必要存在。
8. 通過圖像進(jìn)行交流,并區(qū)分和突出產(chǎn)品特性
圖片來自Bribble|制圖Elena Petkovska
我們或多或少都有這樣的體驗(yàn):打開一個(gè)界面,里面充斥著太多文字和太少的圖像。在用戶體驗(yàn)設(shè)計(jì)中,展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產(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)?!豆雀鑸D像設(shè)計(jì)指南》
APP里的插圖和所有的視覺元素一樣重要,好的圖片可以讓用戶界面更加生動(dòng),使用戶體驗(yàn)更加完善。恰當(dāng)?shù)膱D片還能展示品牌風(fēng)格,成為無聲的“故事講述者”。
我們應(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)品的像素密度
圖片來自Material
用戶界面設(shè)計(jì)中應(yīng)該關(guān)注產(chǎn)品的像素密度,讓界面可以適應(yīng)不同的屏幕?!豆雀柘袼孛芏仍O(shè)計(jì)指南》
像素密度(PPI)是用來衡量每物理英寸的像素?cái)?shù)。另一個(gè)常用的單位是DP(Density-independent pixels,有時(shí)候簡稱為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。
10. 考慮設(shè)計(jì)在線/離線狀態(tà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)意來設(shè)計(jì)在線、離線兩種模式。
谷歌瀏覽器在離線頁面提供恐龍游戲就是一個(gè)著名的例子(在谷歌瀏覽器連網(wǎng)的過程中,離線畫面會(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)行更深入地探索。
原文作者:Danny Sapio,原文標(biāo)題“10 Key Takeaways from Google’s Material Design Guidelines”
譯者:Michiko
本文由 @神譯局 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
你的8.第一張配圖怎么那么像ios的設(shè)計(jì)