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