Material Design設(shè)計文檔的4條訓(xùn)示

0 評論 10405 瀏覽 0 收藏 9 分鐘

Material Design是Google打造的一套新的視覺語言，用來統(tǒng)一它的多種產(chǎn)品。Google發(fā)布material design的概念時，同時發(fā)布了一些文檔，滿足人們對于他們視覺指南的好奇心。

Material Design文檔是一套關(guān)于如何進(jìn)行設(shè)計的優(yōu)質(zhì)資源。

Google的文檔，尤其適合那些想要向行業(yè)引領(lǐng)者學(xué)習(xí)創(chuàng)建視覺美學(xué)的設(shè)計新手。同時也讓經(jīng)驗豐富的設(shè)計師了解Google的思想。這是一份編排精良、經(jīng)過深思熟慮的文檔，為我們帶來了Google的設(shè)計師們的領(lǐng)悟。這份文檔包含了大量的訓(xùn)示。我已經(jīng)通讀一遍，在此想向你分享一些其中的干貨。

通過動效來建立有意義的關(guān)聯(lián)

Material Design大量強(qiáng)調(diào)設(shè)計中的動效和動畫。重要原因之一，是它可以讓用戶清楚看到自己的操作如何對界面產(chǎn)生影響。Google舉了個向相冊添加圖片的例子。如果你看看下面的這個例子就會注意到，上方覆蓋的層有淡入淡出效果。出于兩個目的：清晰與愉悅。首先，它建立了一種視覺層級，用戶認(rèn)為它在界面的上方。盡管這是技術(shù)上實現(xiàn)，并非真實的，因為界面并不分層；但它使用戶以一種更簡單的方法理解界面。這就是清晰。

將它與第二個無過渡、界面突然出現(xiàn)的效果相比。它顯得很突?！@就是建議使用淡入淡出的第二個原因——它也沒有建立任何視覺上的認(rèn)知。新的界面突然出現(xiàn)，用戶的操作和界面的視覺變化有何關(guān)聯(lián)，它沒有給出任何解釋。錯失了一個愉悅用戶的機(jī)會。

With transition

Without transition

“避免生硬的切換。生硬的切換很突兀，讓用戶花大量精力理解其中的過渡?！?a class="ui-link" style="font-style: inherit; color: #58b798;" target="_blank">視覺的連貫性

密切關(guān)注字體

Material Design指南有大篇幅的字體章節(jié)。很明顯，其中精髓是要我們注意字體運用，盡可能提供最佳的閱讀體驗。這可以提升整體的體驗。如此眾多的設(shè)計關(guān)注按鈕這樣的UI細(xì)節(jié)，但是有多少真正兼顧了字體的？這可是我們很少提及的東西。這字體的這個章節(jié)中，你可以看到Google的設(shè)計師為其付出了多少努力。

Standard Styles

“與背景顏色相同的文字難以閱讀，這點很好很理解。不太明顯的一點是，反差太大的字體使人眼花繚亂，不易閱讀。這點在深色背景上尤為顯著?！?/em>標(biāo)準(zhǔn)樣式

像行高和顏色這類是需要特別定義的，為了盡可能給用戶帶來最佳體驗。Roboto字體甚至也被重新定義了，來跨平臺提升它的易讀性。而且，一段文字呈現(xiàn)的方式至關(guān)重大，因為缺口和隔斷使得閱讀更困難。注意去除這些隔斷文字，這大有幫助。

Material Design Typography

運用色彩

多數(shù)人對Material Design的第一印象，是它大膽明亮的配色方案。看看色彩章節(jié)，你會發(fā)現(xiàn)有這么多種顏色。這一點非常棒，有以下幾點原因。首先，大膽的用色可以給Google的界面賦予個性化。創(chuàng)建一套非常妙的配色方案沒什么不妥。這是一次很好的改變，因為iOS7問世時，它的主色是淺灰色系。而且，Google建立這套色彩指南的方式非常清晰，是使用顏色的極佳參考。

面對現(xiàn)實，當(dāng)有太多色調(diào)可供選擇時，顏色的確可以很嚇人。雖然Google提供了廣闊的顏色選擇范圍，它也提供了如何使用的指南。Google開篇顯而易見地陳述了：限制你的顏色選擇，有需要時使用多種深淺變化，并且明智地使用輔助色。

Material Color

“我們非常鼓勵在界面中大面積、大膽地運用色彩。界面中不同元素承擔(dān)配色的不同部分。工具欄和更大的色塊會使用主色。這是APP的主要顏色。狀態(tài)欄使用更深色調(diào)的主色?！?UI配色應(yīng)用

全部都?xì)w結(jié)為易用性

Material Design文檔的最后章節(jié)似乎有著至高的重要性。易用性與可用性章節(jié)提及了大量問題，設(shè)計師在設(shè)計APP或界面時需要全面考慮。這章的作用在于，提醒你設(shè)計無論如何都要易用。

“當(dāng)所有人——不論殘疾與否——都能夠瀏覽、理解和使用一個產(chǎn)品來完成他們的目標(biāo)時，這個產(chǎn)品就是可用的。真正成功的產(chǎn)品，對于盡可能廣的用戶群體都是可用的?！?a class="ui-link" style="font-style: inherit; color: #58b798;" target="_blank">可用性

這份文檔向你提出了幾個嚴(yán)肅的問題，你的產(chǎn)品沒有聲音、色彩或者屏幕時，如何做到可用。一個殘疾用戶能輕松使用你的產(chǎn)品嗎？

文檔的這一章探討了導(dǎo)航、易讀性、用戶和反饋的一些細(xì)節(jié)，讓你清楚了解你的產(chǎn)品的關(guān)注點應(yīng)該在哪里。如果你通讀一遍，你會發(fā)現(xiàn)剛才指出的那些問題顯而易見，例如確保最小屏幕元素點擊區(qū)域是48×48像素，不至于太小，使一般的人類手指可以對它進(jìn)行操作。有一些則更具體，比如確保鏈接都有恰當(dāng)且有意義的標(biāo)題。

“讓鏈接有意義。每個鏈接的指向是否清晰？類似“點擊這里”這樣的常見鏈接文字，并不能解釋鏈接指向何處。把目的地放入鏈接自身當(dāng)中。對于“點擊這里”有個更好的解決辦法，是使用具體的鏈接，比如“設(shè)備選項”。有些無障礙模式讓用戶只看到鏈接，忽略其他內(nèi)容，為了使導(dǎo)航更加有效?！?/em>

隨著科技產(chǎn)品用戶人數(shù)的激增，關(guān)注易用性至關(guān)重要。看到material design文檔貢獻(xiàn)了一整章來探討易用性和可用性，真是大快人心，它提醒我們，產(chǎn)品——不論是什么——對所有類型的用戶都要是可用的。

結(jié)論

我支持你深入研究Material Design文檔，這是免費的在線文檔。其中有非常棒的建議和干貨。對于設(shè)計新手和有興趣學(xué)習(xí)界面設(shè)計的人來說，它是一件學(xué)習(xí)工具。對于經(jīng)驗豐富的、想要先睹為快行業(yè)引領(lǐng)者設(shè)計思維的設(shè)計師而言，它也在刷新著他們的理解。

原文鏈接；

#專欄作家#

可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專欄作家，UI/UX設(shè)計師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技?，F(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中。或許不是一名優(yōu)秀的設(shè)計師，至少是個快樂的設(shè)計師。

轉(zhuǎn)載請保留上述作者信息并附帶本文鏈接

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
可樂橙
喜歡素凈與樸實，現(xiàn)居杭州
126篇作品 1964047總閱讀量
07-186639 瀏覽
關(guān)于產(chǎn)品匯報，這個領(lǐng)導(dǎo)這么看
02-162595 瀏覽
5年做出4個品類冠軍！速食賽道如何靠小紅書投放保持持續(xù)增長？
10-242118 瀏覽
從財務(wù)角度做競品分析
05-102641 瀏覽
美食賬號月銷萬單，7大類型揭曉
04-252030 瀏覽
做自有業(yè)務(wù)太久后，我都不會做乙方了！
評論
評論請登錄
  1. 目前還沒評論，等你發(fā)揮！