超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

谷歌的 10 個“Material Design”設(shè)計要點(下)

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)品有幫助。

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

這里的聲音特指“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è)計師很容易忽略聲音和觸覺這兩個板塊,而過度專注于畫面。但這兩個板塊卻也扮演著非常重要的效果,可以為用戶體驗錦上添花。

7. 通過動圖表達(dá)獨特的風(fēng)格、塑造個性化品牌體驗

圖片來自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é)就沒有必要存在。

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

圖片來自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ì)量的圖片。

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

圖片來自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。

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

圖片來自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)變成了積極體驗。

11. 總結(jié)

我希望這份設(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.miumiuwan.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.miumiuwan.com

存檔