扁平化設(shè)計(jì)與拓展[文檔資料]

扁平化設(shè)計(jì)與拓展 本文檔格式為 WORD,感謝你的閱讀。 一、扁平化 Flat design，譯為扁平化設(shè)計(jì)。扁平化設(shè)計(jì)就是摒棄了一切干擾用戶閱讀內(nèi)容本質(zhì)的修飾效果，比如陰影、透視、紋理、漸變和任何 3D 效果。通過抽象、簡(jiǎn)化、符號(hào)化的設(shè)計(jì)元素，干凈利落的展現(xiàn)所要呈現(xiàn)的內(nèi)容與信息；界面設(shè)計(jì)采用極簡(jiǎn)抽象、矩形色塊、大字體；交互設(shè)計(jì)在于功能的本身使用，去掉了冗余的界面和交互。使用戶的關(guān)注點(diǎn)能停留在應(yīng)用所傳遞的信息本身，就好像 Windows Phone 最初想要做到的那樣： “ 聚焦信息本身 ” 而不是應(yīng)用本身。 二、扁平化設(shè)計(jì) 為什么要進(jìn)行扁平化設(shè)計(jì)？這是因?yàn)槲覀兊男枨蟓h(huán)境在發(fā)生變化。以前我們沒有 ipad、沒有智能手機(jī)這類智能移動(dòng)設(shè)備，只有桌面電腦，所以扁不扁平化似乎沒有那么重要。現(xiàn)在我們有著多種智能設(shè)備，需要在各個(gè)場(chǎng)景各個(gè)設(shè)備上隨時(shí)切換，這樣就需要有一種新的設(shè)計(jì)理念即扁平化設(shè)計(jì)。 扁平化設(shè)計(jì)是一種極簡(jiǎn)主義美學(xué)，附以明亮柔和的色彩，最后配上粗重醒目，而風(fēng)格又復(fù)古的字體。扁平化設(shè)計(jì)簡(jiǎn)化了諸如按鈕、圖標(biāo)一類的界面元素。 1.不添加效果 摒棄一切裝飾效果，諸如凹凸、陰影、斜角、漸變、材質(zhì)等能做出 3D 效果的元素。所有元素的邊界都干凈利落，沒有任何羽化、漸變或者陰影。微軟的 Metro 風(fēng)格用戶界面就是一種典型的扁平化，沒有陰影、高光、漸變和紋理的修飾，取而代之的是平面化的色塊與突出的文字信息。 這種設(shè)計(jì)有著鮮明的視覺效果，它所使用的元素之間有著清晰的層次和布局，使得用戶能直觀了解每個(gè)元素的作用以及交互方式。如今從網(wǎng)頁到手機(jī)應(yīng)用無不在使用扁平化的設(shè)計(jì)風(fēng)格，尤其在手機(jī)上，因?yàn)槠聊坏南拗?，使得這一風(fēng)格在用戶體驗(yàn)上更具優(yōu) 勢(shì)，更少的按鈕和選項(xiàng)使得界面干凈整齊，使用起來格外簡(jiǎn)單。 2.界面元素 扁平化設(shè)計(jì)通常采用許多簡(jiǎn)單的用戶界面元素，諸如按鈕或者圖標(biāo)之類。設(shè)計(jì)師通過觀察和了解對(duì)象的本質(zhì)，進(jìn)行巧妙的取舍，使用簡(jiǎn)單的外形（矩形或者圓形），在沒有更多特效裝飾的情況下清楚的表達(dá)內(nèi)容，在界線與輪廓的高對(duì)比下，表現(xiàn)出物體的美感。 這些用戶界面元素可以方便用戶點(diǎn)擊，用戶憑經(jīng)驗(yàn)就能大概知道每個(gè)按鈕的作用，極大地減少用戶學(xué)習(xí)新交互方式的成本。 3.優(yōu)化排版 由于在扁平化設(shè)計(jì)中使用的都是極簡(jiǎn)的元 素，排版就成了很重要的一環(huán)，排版好壞直接影響視覺效果，甚至可能間接影響用戶體驗(yàn)。 由于界面更加簡(jiǎn)潔，字體在排版中就顯得非常重要，使用字體幫你創(chuàng)建期望的風(fēng)格和基調(diào)。一種新奇的字體作為設(shè)計(jì)元素將會(huì)發(fā)揮極其重要的作用。 4.注重色彩 扁平化設(shè)計(jì)中，通常采用比其他風(fēng)格更明亮更鮮艷的顏色，而且傾向于使用單色調(diào)，尤其是純色，并且不做任何淡化或柔化處理。同時(shí)，扁平化設(shè)計(jì)中的配色要使用更多的色調(diào)。比如，其他設(shè)計(jì)最多只包含兩三種主要顏色，但是扁平化設(shè)計(jì)中會(huì)平均使用六到八種顏色。 醒目明 亮的顏色能夠增加視覺元素的趣味性；單色調(diào)的配色方案，可以選擇一些具有生氣的顏色，然后在色調(diào)上進(jìn)行調(diào)整，增強(qiáng)色彩之間對(duì)照感，提高辨識(shí)度。 三、扁平化設(shè)計(jì)的拓展 在保持扁平化設(shè)計(jì)的基礎(chǔ)上，增加一點(diǎn)效果和美感，使其成為一種獨(dú)特的效果。比如，在簡(jiǎn)單的按鈕旁加一點(diǎn)點(diǎn)漸變或陰影，從而使這種風(fēng)格成為其特色，產(chǎn)生出一種扁平化設(shè)計(jì)的變種。這種設(shè)計(jì)要比單純的扁平化更具有適用性和靈活性，用戶也喜歡這種稍微圓滑一點(diǎn)的設(shè)計(jì)方式。 1.長(zhǎng)投影 長(zhǎng)投影即延伸投影，一般都是 45 度角的陰影從圖標(biāo)中延伸 出來，投影一般為物體的 2.5 倍大，陰影也是扁平的，無漸變、明暗和衰退。 2.陰影式 陰影式和長(zhǎng)投影不同之處在于長(zhǎng)投影是 “ 投影 ” ，而這種帶陰影的效果能夠給圖標(biāo)增加一種層次感和立體感。 3.漸變式 漸變式其漸變也是扁平的，為扁平化設(shè)計(jì)增加一種精致感。 四、扁平化交互設(shè)計(jì) 隨著各種智能設(shè)備的多樣性和普及化，交互界面需要更容易適應(yīng)其變化，扁平化的交互界面要比其他樣式更容易處理。在扁平化設(shè)計(jì)模式之前，我們一直都在強(qiáng)調(diào)交互的易用性和良好的用戶體驗(yàn)感。接下來，我 們來探討一下扁平化的交互設(shè)計(jì)： 1.減少結(jié)構(gòu)層級(jí) 結(jié)構(gòu)層級(jí)就是交互步驟，讓用戶用最少的步驟來完成任務(wù)，就是要求層級(jí)結(jié)構(gòu)的扁平。 針對(duì)智能移動(dòng)設(shè)備，能否直接把網(wǎng)頁上的結(jié)構(gòu)搬上去，顯然不行。由于移動(dòng)設(shè)備的限制，主界面的廣度大大減弱，而深度更為明顯。在桌面電腦上可以用各種導(dǎo)航方式表現(xiàn)出層級(jí)結(jié)構(gòu)，讓用戶不迷路。但在移動(dòng)設(shè)備上，由于顯示區(qū)域有限，只能采用不斷的 “ 返回 ” 方式，增加了操作的繁瑣。那么怎樣才能在移動(dòng)設(shè)備上減少結(jié)構(gòu)層級(jí)、精簡(jiǎn)交互步驟。 1）并列信息 將并列的信 息顯示在同一個(gè)界面中，減少頁面的跳轉(zhuǎn)。比如：以前什么天氣、郵件等應(yīng)用，都必須到具體的應(yīng)用里才能看到，而 windows8 在同一個(gè)界面中都展示出來了。 2）快捷方式 在任意界面只要向下滑動(dòng)都能從屏幕頂部呼出一個(gè)快捷菜單。 層級(jí)結(jié)構(gòu)的減少，用戶不需要一層一層地進(jìn)入設(shè)置進(jìn)行操作，提高效率的同時(shí)也使結(jié)構(gòu)變得清晰。 3）顯示關(guān)鍵信息 比如在線購(gòu)電影票，除了顯示影院、影片名稱之外，還能顯示出最低票價(jià)、余下場(chǎng)次、是否可以購(gòu)票等關(guān)鍵信息，這樣就不需要逐個(gè)查看影院信息了，加快了 購(gòu)買效率。 由于智能移動(dòng)設(shè)備沒有足夠的空間來展示路徑，如果沒有清晰的層級(jí)關(guān)系，就可能使用戶迷失方向，甚至要進(jìn)入深層次的信息才能找到想要的，這時(shí)更應(yīng)該做的是減少信息的深度。 2.表達(dá)方式直白、準(zhǔn)確 如果你的功能不能讓用戶一眼就看明白，還需要解釋的話，那么這個(gè)功能就失敗了。通過減少按鈕和選項(xiàng)，讓使用更簡(jiǎn)潔，用直觀的表達(dá)方式，讓使用更準(zhǔn)確，不用再為這里要怎么操作而苦惱。 例：搖一搖，用戶的本能反映，不需要任何解釋，只要拿著手機(jī)晃動(dòng)就能實(shí)現(xiàn)這個(gè)功能。 3.信息直觀、 有序 在大數(shù)據(jù)時(shí)代，如何從這些數(shù)據(jù)里找到自己想要的，尤其是在小屏幕設(shè)備上展示，更需要減少過度繁雜元素的交互界面設(shè)計(jì)，讓信息更直觀的展現(xiàn)。 在大數(shù)據(jù)狀態(tài)下，通過 “ 分類！分類！分類！ ” 方式降低數(shù)據(jù)的使用難度，讓用戶能根據(jù)清晰的分類快速找到自己需要的東西。 4.一致性 現(xiàn)在的用戶已經(jīng)習(xí)慣了在多場(chǎng)景下運(yùn)用多平臺(tái)設(shè)備，一旦用戶學(xué)會(huì)了界面中某個(gè)部分的操作，他們很快就能知道如何在其他設(shè)備上進(jìn)行操作。這就需要功能的一致性、平臺(tái)之間的無縫銜接，比如： QQ 應(yīng)用軟件。 五、扁平化 設(shè)計(jì)的局限性 盡管在應(yīng)用和網(wǎng)頁設(shè)計(jì)中越來越多人開始使用扁平化設(shè)計(jì)，但這并不意味著它就是無懈可擊的。 首先，像以往任何一種設(shè)計(jì)趨勢(shì)一樣，它也可能會(huì)因?yàn)橐恍┰O(shè)計(jì)師的心血來潮和不經(jīng)大腦被濫用，在扁平化設(shè)計(jì)時(shí)出現(xiàn)偏差，那將直接影響應(yīng)用的可用性。 其次，扁平化去除了特效，界面中的每個(gè)