web2.0扁平化設(shè)計(jì)技巧
業(yè)界對微軟Windows8操作系統(tǒng)全面采用Metro界面風(fēng)格的作法褒貶不一，但在一切還沒有定論之前，蘋果的iOS和Android 安卓系統(tǒng)卻立即跟進(jìn)，一時(shí)間扁平化設(shè)計(jì)風(fēng)格風(fēng)靡全球。于是一夜之間，好像所有的東西都被拍扁了，網(wǎng)頁、軟件、海報(bào)等各種界面都刮起一陣扁平化的暴風(fēng)。實(shí)際上，扁平化風(fēng)格并不是什么新鮮的事物，早在幾十年前，設(shè)計(jì)界就有極簡風(fēng)格的流行。另外像傳統(tǒng)的平面媒體，比如交通、公共場所指示系統(tǒng)等，也一貫采用的是扁平化的設(shè)計(jì)風(fēng)格。對于設(shè)計(jì)師來說，其實(shí)扁平化風(fēng)格要比傳統(tǒng)的擬物化風(fēng)格更容易實(shí)現(xiàn)，特別是更容易矢量化，這也是為什么當(dāng)前UI設(shè)計(jì)偏愛扁平化風(fēng)格的重要原因，因?yàn)檫@種風(fēng)格可以適應(yīng)在不同分辨率的屏幕之上。當(dāng)然要設(shè)計(jì)出一款精美的扁平化風(fēng)格產(chǎn)品，也不是容易的事情，這需要一些技巧和方法。下面講述的技巧可以有助于設(shè)計(jì)師快速構(gòu)建出美觀的界面元素。
什么是扁平化設(shè)計(jì)
扁平化設(shè)計(jì)是一種極簡主義的美術(shù)設(shè)計(jì)風(fēng)格，通過簡單的圖形、字體和顏色的組合，來達(dá)到直觀、簡潔的設(shè)計(jì)目的。扁平化設(shè)計(jì)風(fēng)格比較常見于傳統(tǒng)媒體，比如雜志、公交指示牌等處。隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的發(fā)展，扁平化設(shè)計(jì)風(fēng)格越來越多應(yīng)用于軟件、網(wǎng)站等人機(jī)交互界面，以迎合使用者對信息快速閱讀和吸收的要求。與扁平化設(shè)計(jì)風(fēng)格相對的是偏向?qū)憣?shí)的擬物化設(shè)計(jì)風(fēng)格。要設(shè)計(jì)出好的扁平化界面，必須拋棄所有擬物風(fēng)格的技巧。我們可以通過一張圖來了解擬物化設(shè)計(jì)的主要特點(diǎn)，把這些特點(diǎn)統(tǒng)統(tǒng)扔掉，就是扁平化設(shè)計(jì)的特征：
極簡的元素
扁平化設(shè)計(jì)追求的是一切極其的簡潔、簡單，反對使用復(fù)雜的、不明確的元素。在設(shè)計(jì)扁平化風(fēng)格界面時(shí)，特別是在圖標(biāo)的設(shè)計(jì)時(shí)，應(yīng)該遵循極簡原則。復(fù)雜的、含義模糊的元素將會(huì)造成使用者的困擾，這與扁平化設(shè)計(jì)風(fēng)格直觀、簡潔的總原則是相違背的。只有采用足夠簡約的設(shè)計(jì)元素，才能達(dá)到最好的展示效果。
貼切的圖標(biāo)
在設(shè)計(jì)圖標(biāo)時(shí)，必須使用與所對應(yīng)功能緊密關(guān)聯(lián)的圖標(biāo)元素，并且這個(gè)元素應(yīng)是通用的、廣為人知的，基本不受地域、種族、文化、語言等因素影響。絕對禁止使用一些定義模糊，寓意不清的元素，或者某些行業(yè)特有的，某些領(lǐng)域?qū)Ｓ玫脑?。比如在下面這張圖中，如果設(shè)計(jì)師要表達(dá)的是“分享”這一功能，那么顯然右側(cè)的圖標(biāo)更具有通用性：
更多的圓角
在產(chǎn)品設(shè)計(jì)中，設(shè)計(jì)師經(jīng)常會(huì)采用圓角設(shè)計(jì)，以防止在產(chǎn)品使用過程中對使用者造成傷害，這種人性化的設(shè)計(jì)深受使用者的歡迎。同樣的道理，在用戶界面設(shè)計(jì)過程中，使用一些圓角圖案，不但會(huì)使設(shè)計(jì)更具親和力，也會(huì)讓使用者更容易接受設(shè)計(jì)者的設(shè)計(jì)意圖。這也符合大眾追求圓潤、圓滿的心理需求，下面的圖例就可以充分表明這一情況：
中性之美
在扁平化設(shè)計(jì)中，色彩的應(yīng)用極為重要。由于拋棄了擬物化設(shè)計(jì)風(fēng)格的漸變、高光等特效，只能使用純色塊來進(jìn)行設(shè)計(jì)，那么在色彩的搭配和選擇上就極有講究。為了能讓使用者舒適的閱讀、使用設(shè)計(jì)者的作品，不造成眼睛疲勞或者其它不適感，設(shè)計(jì)師應(yīng)盡量選擇中性的顏色。也就是說，要避免使用飽和度過高的純色，比如純紅、純綠、純藍(lán)等顏色，因?yàn)檫@些顏色在展示的時(shí)候會(huì)非常刺眼，嚴(yán)重影響使用者的視覺體驗(yàn)。同樣可以通過下面的圖片來對比兩者之間的差異：
鮮明的對比
在色彩的應(yīng)用中，要注意顏色之間的對比，只有通過鮮明的顏色對比，才能迅速抓住使用者的眼球，讓設(shè)計(jì)師的意圖表現(xiàn)的更加明確。通常的技巧是，通過亮度、色溫、對比色、互補(bǔ)色等等手段來實(shí)現(xiàn)顏色的對比，應(yīng)盡量避免使用參數(shù)相近的顏色，這樣的顏色搭配會(huì)使閱讀困難，甚至?xí)斐墒褂谜叩臉O度不適?？梢酝ㄟ^下面的這張圖來體會(huì)其中的奧妙：
字體的選擇
在扁平化設(shè)計(jì)風(fēng)格中，因?yàn)樽非髽O致的簡潔，力求最快速、最直觀的表達(dá)設(shè)計(jì)者的意圖，所以在字體的選擇上，也是以簡潔、清爽為標(biāo)準(zhǔn)。應(yīng)采用通用的、筆劃清晰的字體，避免使用字跡不清的字體，比如草書，特殊字體等，也應(yīng)該避免使用已經(jīng)不再流通的字體，比如古代甲骨文、篆體字等等（特殊用途除外）。對于中文字體來說，諸如雅黑、幼圓或者細(xì)黑等字體都是不錯(cuò)的選擇。英文字體也是同樣的道理，如下圖所示：
善用灰色
黑色、白色和灰色在扁平化設(shè)計(jì)中至關(guān)重要，由于采用了大量的色塊，難免給用戶以眼花繚亂的感覺。所以在有的時(shí)候，設(shè)計(jì)師為了突出重點(diǎn)，可減少色塊的使用，而轉(zhuǎn)由使用一種或者二種主要的顏色來突出主體，其它部門則通過灰色來表達(dá)。由于灰色與任何顏色都不沖突，所以在設(shè)計(jì)時(shí)，巧妙的使用灰色，將起到意想不到的效果。正確的使用灰色，將使主體更明確和突出，更容易被使用者接受。
擬物設(shè)計(jì)的轉(zhuǎn)型
對于原有的擬物設(shè)計(jì)風(fēng)格，如果要向扁平化設(shè)計(jì)轉(zhuǎn)型，那么只需要將原來設(shè)計(jì)風(fēng)格逐一拋棄，分別去除描邊、陰影、漸變、高光等等特效，讓設(shè)計(jì)回歸本原，用最簡潔的幾何圖型和最清晰的顏色來表達(dá)設(shè)計(jì)者的靈感。當(dāng)然扁平化設(shè)計(jì)雖然有許多的優(yōu)點(diǎn)，但也并不是萬能藥，并不是所有場合都適用扁平化設(shè)計(jì)，設(shè)計(jì)師要根據(jù)情況選擇正確的設(shè)計(jì)風(fēng)格，從而達(dá)到最佳的設(shè)計(jì)效果。
與任何平面藝術(shù)一樣，扁平化設(shè)計(jì)也非常注重留白的運(yùn)用，要給使用者充分的呼吸空間。
扁平化設(shè)計(jì)中的排版設(shè)計(jì)同樣非常重要，整齊有序、條理清晰的排列將使設(shè)計(jì)事半功倍。
隨機(jī)文章推薦 收藏本文
- 還沒有評論呢，快搶沙發(fā)~
發(fā)表你的評論吧返回頂部
!評論內(nèi)容需包含中文