淺談扁平化設(shè)計(jì)
隨著互聯(lián)網(wǎng)的高速發(fā)展,我們可以看到質(zhì)感厚重,圖層樣式繁多的網(wǎng)站越來(lái)越少,反之各種輕質(zhì)感,布局大膽、創(chuàng)意新穎、的網(wǎng)站慢慢進(jìn)入了大家的視野,人類發(fā)展至今,人們的審美、時(shí)尚標(biāo)準(zhǔn)總是無(wú)時(shí)無(wú)刻不在改變,互聯(lián)網(wǎng)也是這樣,下面這篇文章將要給大家談?wù)?013網(wǎng)頁(yè)設(shè)計(jì)新風(fēng)向 “扁平化設(shè)計(jì)”(flat design)
什么是扁平化設(shè)計(jì)
這里簡(jiǎn)單介紹下關(guān)于扁平化的概念,所謂“扁平化設(shè)計(jì)”一詞所指的是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺(jué)效果,從而打造出一種看上去更“平”的界面。善于用顏色去鼓勵(lì)用戶探索。
為什么選擇扁平化設(shè)計(jì)
>快速
快速高效是扁平化設(shè)計(jì)的一個(gè)很重要的基因,時(shí)間就是金錢(qián),如何在信息更新如此之快的互聯(lián)網(wǎng)即時(shí)的跟上它的腳步呢 –快速這也是很多互聯(lián)網(wǎng)巨頭們?yōu)槭裁催x擇扁平化設(shè)計(jì)的原因之一。
以我們暢游鹿鼎記官網(wǎng)為例,早期的官網(wǎng)按鈕質(zhì)感較重,圖層樣式較多,很影響加載時(shí)間,根據(jù)統(tǒng)計(jì)頁(yè)面大小在357K。
下圖是我們暢游較最新的鹿鼎記官網(wǎng),明顯可以看到和老版兩者的區(qū)別吧~ 在保證整體視覺(jué)的情況下,盡可能的精簡(jiǎn)圖層樣式,統(tǒng)計(jì)的頁(yè)面大小在214KB。同時(shí)減少頁(yè)面請(qǐng)求的個(gè)數(shù)(每張圖就是一個(gè)請(qǐng)求)從老版的26個(gè)優(yōu)化到14個(gè),優(yōu)化比在40%以上。
>更迭快低成本運(yùn)作
每一次游戲版本更新我們都會(huì)對(duì)應(yīng)對(duì)官網(wǎng)進(jìn)行設(shè)計(jì)改版。采用扁平化設(shè)計(jì),我們可以再最短的時(shí)間內(nèi)更新官網(wǎng),只需要給制作提供相應(yīng)的色值就行,大大的節(jié)省了項(xiàng)目時(shí)間,也方便下次再更新。
>信息突出
上圖是2013年3月份的雅虎國(guó)際首頁(yè)的改版
上圖是facebook概念版
微軟2012年的品牌刷新官網(wǎng)首頁(yè)
Nest
通過(guò)顏色的對(duì)比,大小不同的字號(hào),讓重要的信息放在首要位置,不重要的元素弱化,除了幾個(gè)主要的動(dòng)作按鈕當(dāng)中使用了輕微的斜面效果以外,其他界面元素全部采用扁平風(fēng)格,這樣的設(shè)計(jì)讓訪問(wèn)者可以很容易的將注意力聚焦在品和信息上,而不會(huì)被網(wǎng)站界面上的視覺(jué)元素所干擾。從而突出核心信息和操作。這些都增強(qiáng)了網(wǎng)站的易讀性和可讀性。
>簡(jiǎn)潔清晰
簡(jiǎn)潔的東西總是讓人喜愛(ài)的,在一個(gè)設(shè)計(jì)簡(jiǎn)潔邏輯清晰的網(wǎng)站你能很快找到自己所要的東西,而且能在使用過(guò)程中減少犯錯(cuò)。從而提高用戶體驗(yàn),如下圖:
由于網(wǎng)站比較長(zhǎng),我就只截了一部分,有興趣的同學(xué)可以輸入下面的鏈接地址去網(wǎng)站上去看看。
圖一傳送門(mén):https://layervault.com
圖二傳送門(mén):http://www.rdio.com
圖三傳送門(mén):http://lorenzoverzini.com
圖四傳送門(mén):http://builtbybuffalo.com
如何打造扁平化設(shè)計(jì)
在以往的工作中,我曾參考和研究了很多關(guān)注扁平化的設(shè)計(jì),最后跟大家分享下關(guān)于扁平化設(shè)計(jì)的一些小心得!希望能對(duì)大家有所幫助。
少點(diǎn)再少點(diǎn)
可能大伙剛著手設(shè)計(jì)時(shí),不知道怎么動(dòng)手如何個(gè)減法,元素之間如何取舍,可以先做“加法”,然后一點(diǎn)一點(diǎn)減,多問(wèn)問(wèn)自己這塊是不是一定需要擺放這個(gè)元素,是錦上添花還是畫(huà)蛇添足。
大膽點(diǎn)再大膽點(diǎn)
放任天馬行空的思維奔跑,優(yōu)秀的設(shè)計(jì)是創(chuàng)新。我個(gè)人比較喜歡蘋(píng)果首席設(shè)計(jì)Jony Ive的方法:先打破以前的框架。比如,說(shuō)設(shè)計(jì)一個(gè)飯盒,那他先要把“盒”這個(gè)概念抹去,不要被這個(gè)“盒”所困住思維,只想這個(gè)器皿最佳的使用方式和設(shè)計(jì)形式。比如提到音樂(lè)不要只想到音符或CD要想想有沒(méi)有其他更好的更創(chuàng)新的方式來(lái)呈現(xiàn)它。
細(xì)點(diǎn)再細(xì)點(diǎn)
設(shè)計(jì)中所謂細(xì)節(jié)決定成敗,有時(shí)候一點(diǎn)點(diǎn)行距一點(diǎn)點(diǎn)色值的不相同也會(huì)對(duì)整體視覺(jué)效果照成很大的影響,花時(shí)間微調(diào)細(xì)節(jié)是很有必要的。
酷點(diǎn)再酷點(diǎn)
酷并不是只是視覺(jué),而是更合理的交互方式,由于少了些質(zhì)感,所以顏色也變得尤為重要了,運(yùn)用搭配合理的顏色能起到?jīng)Q定作用,設(shè)計(jì)師完成設(shè)計(jì)后,網(wǎng)站只完成了50%,后期要是能在頁(yè)面上好的互動(dòng)效果,能給整個(gè)網(wǎng)站增色不少。
后記
這里跟大家聊下設(shè)計(jì)在產(chǎn)品中的應(yīng)用,習(xí)慣了做視覺(jué)的設(shè)計(jì)師做產(chǎn)品可能需要適應(yīng)階段,對(duì)產(chǎn)品的理解,主次需求的分析,交互的表現(xiàn)方式,數(shù)據(jù)研究等,做慣了產(chǎn)品設(shè)計(jì)的設(shè)計(jì)師,做純視覺(jué)同樣需要適應(yīng)階段,各種炫酷的表現(xiàn)手法,主次信息的排列,空間層次的拉開(kāi)版面形式的創(chuàng)新,其實(shí)設(shè)計(jì)的好壞不是以視覺(jué)來(lái)評(píng)定,不同產(chǎn)品對(duì)視覺(jué)有著不同的需求,游戲類型的設(shè)計(jì)師,可能需要的是對(duì)色和視覺(jué)表達(dá)要更強(qiáng)一些,也就是你們pm常跟你說(shuō)的我要好看的,用戶有興趣玩的,而產(chǎn)品類的ui設(shè)計(jì)師,更多注重的是設(shè)計(jì)的層級(jí),信息的邏輯,設(shè)計(jì)風(fēng)格的統(tǒng)一、延續(xù)和拓展,也就是pm要求的,信息交代清楚,層級(jí)分明,交互簡(jiǎn)潔明了。
減少用戶的思考,降低用戶學(xué)習(xí)成本,其實(shí)不管任何設(shè)計(jì)師,都是在為用戶服務(wù),都是做用戶體驗(yàn)設(shè)計(jì),同樣的,不管目前流行什么設(shè)計(jì)風(fēng)格,我們都要以自身產(chǎn)品的特點(diǎn)出發(fā),而不是一味的盲從,跟風(fēng),隨波逐流,設(shè)計(jì)師要思考,理性判斷,這樣設(shè)計(jì)會(huì)給公司帶來(lái)更好的收益嗎?能給用戶帶來(lái)更好的體驗(yàn)嗎?而不是一味的追求視覺(jué)表現(xiàn)!對(duì)待扁平化設(shè)計(jì)我們同樣要理性!沒(méi)有任何一種設(shè)計(jì)是萬(wàn)能的,沒(méi)有任何一種設(shè)計(jì)是最好的,只有更合適的!
轉(zhuǎn)載:暢游視覺(jué)設(shè)計(jì)中心
- 目前還沒(méi)評(píng)論,等你發(fā)揮!