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

0 評(píng)論 10556 瀏覽 0 收藏 9 分鐘

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

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

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

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

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

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

With transition

Without transition

“避免生硬的切換。生硬的切換很突兀,讓用戶(hù)花大量精力理解其中的過(guò)渡。”視覺(jué)的連貫性

密切關(guān)注字體

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

Standard Styles

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

像行高和顏色這類(lèi)是需要特別定義的,為了盡可能給用戶(hù)帶來(lái)最佳體驗(yàn)。Roboto字體甚至也被重新定義了,來(lái)跨平臺(tái)提升它的易讀性。而且,一段文字呈現(xiàn)的方式至關(guān)重大,因?yàn)槿笨诤透魯嗍沟瞄喿x更困難。注意去除這些隔斷文字,這大有幫助。

Material Design Typography

運(yùn)用色彩

多數(shù)人對(duì)Material Design的第一印象,是它大膽明亮的配色方案??纯瓷收鹿?jié),你會(huì)發(fā)現(xiàn)有這么多種顏色。這一點(diǎn)非常棒,有以下幾點(diǎn)原因。首先,大膽的用色可以給Google的界面賦予個(gè)性化。創(chuàng)建一套非常妙的配色方案沒(méi)什么不妥。這是一次很好的改變,因?yàn)閕OS7問(wèn)世時(shí),它的主色是淺灰色系。而且,Google建立這套色彩指南的方式非常清晰,是使用顏色的極佳參考。

面對(duì)現(xiàn)實(shí),當(dāng)有太多色調(diào)可供選擇時(shí),顏色的確可以很?chē)樔恕km然Google提供了廣闊的顏色選擇范圍,它也提供了如何使用的指南。Google開(kāi)篇顯而易見(jiàn)地陳述了:限制你的顏色選擇,有需要時(shí)使用多種深淺變化,并且明智地使用輔助色。

Material Color

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

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

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

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

這份文檔向你提出了幾個(gè)嚴(yán)肅的問(wèn)題,你的產(chǎn)品沒(méi)有聲音、色彩或者屏幕時(shí),如何做到可用。一個(gè)殘疾用戶(hù)能輕松使用你的產(chǎn)品嗎?

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

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

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

結(jié)論

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

原文鏈接;

#專(zhuān)欄作家#

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!