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

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