扁平化設計現已被界面設計的多個(gè)領(lǐng)域所使用。隨著(zhù)融合了扁平化設計的Windows8等的發(fā)布, 許多網(wǎng)站都開(kāi)始應用扁平化的設計, 這一設計風(fēng)格將在未來(lái)獲得更為廣泛的應用。
一、“扁平化設計”
1.扁平化設計。隨著(zhù)網(wǎng)絡(luò )技術(shù)的發(fā)展, 設計多采用扁平化的風(fēng)格。該種設計的目標在于創(chuàng )造出一種更“平”的界面, 形式更加簡(jiǎn)單, 思路更加明晰, 使得用戶(hù)更方便的理解和使用。
扁平化的設計, 追求的是扁平化, 排除陰影, 應用顏色推動(dòng)用戶(hù)實(shí)現交互。然而實(shí)際上, 是有一定的改變的。當然, 它也不會(huì )忽視深度這一概念。與之相反, 適當的添加深度的元素能夠推動(dòng)用戶(hù)對其的認識。日常生活中, 扁平化設計是非常多的, 當前最為典型的要屬Win8metro, 它不單單是視覺(jué)上的扁平化, 構造也追求扁平化, 最終呈現的效果非常好。
2.相通的設計原則。
(1) 一致性。
通過(guò)采取一致性的設計形式, 為用戶(hù)構建起相同的心智模型, 使得服務(wù)更為易用, 改善用戶(hù)體驗。
(2) 對比。
利用對色彩等的配比, 使相應的界面按鍵在感官上與別的按鍵對比強烈。
(3) 布局。
引導用戶(hù)隨著(zhù)設計所給定的徑路自發(fā)地前進(jìn), 提升其感官平衡性。
(4) 減少摩擦力。
不管采用何種風(fēng)格的設計, 都要使其簡(jiǎn)單化, 降低用戶(hù)實(shí)現目標所做的工作, 創(chuàng )造通暢的用戶(hù)體驗。
(5) 用戶(hù)需求。
多元化的用戶(hù)所追求的風(fēng)格也必然是多元化的。時(shí)尚等領(lǐng)域的人們可能更欣賞扁平化風(fēng)格, 而別的較為“普通”的群體則更欣賞較為常規的擬物化風(fēng)格。
二、網(wǎng)頁(yè)整體風(fēng)格設計
網(wǎng)頁(yè)設計, 是一種視覺(jué)上的語(yǔ)言, 較為追求排版與布局, 為了獲得最好的視覺(jué)特效, 要不斷試驗布局的合理性, 使用戶(hù)體驗到最優(yōu)的視覺(jué)享受。
1.排版布局。
實(shí)行扁平化設計, 首頁(yè)的標識要置于主視覺(jué)區, 導航等也要盡可能的簡(jiǎn)單化, 圖片占到了排版的大部, 使得用戶(hù)觀(guān)察到有趣的環(huán)節很方便的進(jìn)行選擇, 風(fēng)格直觀(guān), 圖片的選用也要認真斟酌, 增強其視覺(jué)特效。
2.網(wǎng)頁(yè)的欄目設計。
網(wǎng)頁(yè)的欄目是網(wǎng)頁(yè)的重要組成部分, 是支撐網(wǎng)頁(yè)內容的軀干。扁平化的設計, 能夠幫助用戶(hù)更方便地瀏覽網(wǎng)頁(yè), 提升用戶(hù)的駐留時(shí)限。
3.網(wǎng)頁(yè)的內容組織。
新形勢下, 仍然要以?xún)热轂橹? 可以說(shuō)內容是網(wǎng)頁(yè)真正的核心構成。外觀(guān)漂亮固然很好, 然而真正能留駐用戶(hù)的還得是內容。因此, 對內容的規劃是網(wǎng)頁(yè)創(chuàng )建過(guò)程中最為重要的一部分。
4.交互動(dòng)畫(huà)設計。
(1) 鼠標停駐圖片之上, 呈現其所屬信息。
(2) 點(diǎn)、線(xiàn)的交互設計, 通過(guò)拖動(dòng)點(diǎn), 構成多樣化的圖形。在邏輯層面, 也削減了繁瑣的層次, 更加簡(jiǎn)單大方。
5.首頁(yè)。
其表現的是網(wǎng)頁(yè)的第一形象, 是用戶(hù)視覺(jué)停駐的重點(diǎn), 人們最為關(guān)心的內容需要在首頁(yè)體現出來(lái)。通過(guò)扁平化設計, 排除多余的選項, 將標識、導航平鋪式地放在首頁(yè), 使用戶(hù)一覽無(wú)余。在感官上, 去除了漸變等效果。為了獲得最好的視覺(jué)效果, 還要不斷試驗整體上的配置, 使用戶(hù)獲得順暢的視覺(jué)感受。
6.網(wǎng)頁(yè)標識。
標識在網(wǎng)頁(yè)上的應用應盡量地放在特定位置。大多數情況下是將其放于左上方, 這也是大部分網(wǎng)頁(yè)的選擇。
7.導航。導航的使用在于方便用戶(hù)使用, 使其在使用過(guò)程中不會(huì )迷路, 而且能迅速地找到感興趣的內容。通過(guò)扁平化設計, 去除導航的漸變等, 只是用色彩當作背景, 其上是導航的說(shuō)明。
8.文本。
當人們談到網(wǎng)頁(yè)易用性的時(shí)候, 常常會(huì )提到界面 (UI) 、按鍵等的設計。然而文字才是網(wǎng)頁(yè)的重要內容, 它蘊含了多種對使用者有用的信息。網(wǎng)頁(yè)首先要有能吸引用戶(hù)的內容才是最重要的。通過(guò)扁平化設計, 將相關(guān)的文字內容進(jìn)行區分, 方便用戶(hù)選擇。
9.圖片。
它也是網(wǎng)頁(yè)上非常重要的構成, 圖片的選擇及效果會(huì )對網(wǎng)頁(yè)造成非常大的影響。全新的設計將更有助于圖片的呈現, 將通過(guò)更少的裝飾來(lái)展現圖片, 同時(shí)這也對圖片的質(zhì)量提出了更高的要求。
三、網(wǎng)頁(yè)設計的優(yōu)化
1.頁(yè)面設計的優(yōu)化。
對于圖片的選用必須審慎, 要使其與網(wǎng)頁(yè)的風(fēng)格想搭配, 增強用戶(hù)對其的觀(guān)感, 進(jìn)而獲得積極的引導作用。并且在頁(yè)面上也要加上一定的交互設計, 使其表現的更具親切感。
2.交互設計的優(yōu)化。
(1) 按鍵的設計:要追求更易選擇, 更加突出, 更為協(xié)調。
(2) 圖片的表現形式:突出簡(jiǎn)單易操作。
(3) 各頁(yè)面間的跳轉:指向性更加明確, 能夠流暢地轉換。
3.文字設計。
對于網(wǎng)頁(yè)來(lái)說(shuō), 特定文字的使用不多。當前, 較為常用的是微軟雅黑, 它要比宋體更寬一些, 且使得筆畫(huà)往周?chē)鷵? 表現的更加飽滿(mǎn), 該類(lèi)字體更易呈現出漢字線(xiàn)的觀(guān)感, 進(jìn)而方便用戶(hù)的閱讀, 也給其中加上了線(xiàn)的設計感。
4.色彩的配搭。
網(wǎng)頁(yè)設計的優(yōu)化, 要注意對色彩的選擇, 假如網(wǎng)頁(yè)的色彩非常鮮艷, 就很能夠吸引人們的目光, 會(huì )給使用者強烈的視覺(jué)沖擊。對于圖片的色彩的選用與網(wǎng)頁(yè)的配搭也要注意, 對于網(wǎng)頁(yè)的整體風(fēng)格, 選擇不一樣的顏色所呈現出的效果不同, 能夠影響到使用者的感受。而且在輔色之中, 可選擇相似的, 如此看起來(lái)會(huì )較為一致, 更具層次感。