企業(yè)做網(wǎng)站淺析網(wǎng)頁(yè)設(shè)計(jì)中扁平化設(shè)計(jì)的趨勢(shì)

發(fā)布：2019-03-13 12:45:47 瀏覽：4675

扁平化設(shè)計(jì)現(xiàn)已被界面設(shè)計(jì)的多個(gè)領(lǐng)域所使用。隨著融合了扁平化設(shè)計(jì)的Windows8等的發(fā)布,許多網(wǎng)站都開始應(yīng)用扁平化的設(shè)計(jì),這一設(shè)計(jì)風(fēng)格將在未來獲得更為廣泛的應(yīng)用。

一、“扁平化設(shè)計(jì)”

1.扁平化設(shè)計(jì)。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展,設(shè)計(jì)多采用扁平化的風(fēng)格。該種設(shè)計(jì)的目標(biāo)在于創(chuàng)造出一種更“平”的界面,形式更加簡(jiǎn)單,思路更加明晰,使得用戶更方便的理解和使用。

扁平化的設(shè)計(jì),追求的是扁平化,排除陰影,應(yīng)用顏色推動(dòng)用戶實(shí)現(xiàn)交互。然而實(shí)際上,是有一定的改變的。當(dāng)然,它也不會(huì)忽視深度這一概念。與之相反,適當(dāng)?shù)奶砑由疃鹊脑啬軌蛲苿?dòng)用戶對(duì)其的認(rèn)識(shí)。日常生活中,扁平化設(shè)計(jì)是非常多的,當(dāng)前最為典型的要屬Win8metro,它不單單是視覺上的扁平化,構(gòu)造也追求扁平化,最終呈現(xiàn)的效果非常好。

2.相通的設(shè)計(jì)原則。

(1)一致性。

通過采取一致性的設(shè)計(jì)形式,為用戶構(gòu)建起相同的心智模型,使得服務(wù)更為易用,改善用戶體驗(yàn)。

(2)對(duì)比。

利用對(duì)色彩等的配比,使相應(yīng)的界面按鍵在感官上與別的按鍵對(duì)比強(qiáng)烈。

(3)布局。

引導(dǎo)用戶隨著設(shè)計(jì)所給定的徑路自發(fā)地前進(jìn),提升其感官平衡性。

(4)減少摩擦力。

不管采用何種風(fēng)格的設(shè)計(jì),都要使其簡(jiǎn)單化,降低用戶實(shí)現(xiàn)目標(biāo)所做的工作,創(chuàng)造通暢的用戶體驗(yàn)。

(5)用戶需求。

多元化的用戶所追求的風(fēng)格也必然是多元化的。時(shí)尚等領(lǐng)域的人們可能更欣賞扁平化風(fēng)格,而別的較為“普通”的群體則更欣賞較為常規(guī)的擬物化風(fēng)格。

二、網(wǎng)頁(yè)整體風(fēng)格設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì),是一種視覺上的語(yǔ)言,較為追求排版與布局,為了獲得最好的視覺特效,要不斷試驗(yàn)布局的合理性,使用戶體驗(yàn)到最優(yōu)的視覺享受。

1.排版布局。

實(shí)行扁平化設(shè)計(jì),首頁(yè)的標(biāo)識(shí)要置于主視覺區(qū),導(dǎo)航等也要盡可能的簡(jiǎn)單化,圖片占到了排版的大部,使得用戶觀察到有趣的環(huán)節(jié)很方便的進(jìn)行選擇,風(fēng)格直觀,圖片的選用也要認(rèn)真斟酌,增強(qiáng)其視覺特效。

2.網(wǎng)頁(yè)的欄目設(shè)計(jì)。

網(wǎng)頁(yè)的欄目是網(wǎng)頁(yè)的重要組成部分,是支撐網(wǎng)頁(yè)內(nèi)容的軀干。扁平化的設(shè)計(jì),能夠幫助用戶更方便地瀏覽網(wǎng)頁(yè),提升用戶的駐留時(shí)限。

3.網(wǎng)頁(yè)的內(nèi)容組織。

新形勢(shì)下,仍然要以內(nèi)容為主,可以說內(nèi)容是網(wǎng)頁(yè)真正的核心構(gòu)成。外觀漂亮固然很好,然而真正能留駐用戶的還得是內(nèi)容。因此,對(duì)內(nèi)容的規(guī)劃是網(wǎng)頁(yè)創(chuàng)建過程中最為重要的一部分。

4.交互動(dòng)畫設(shè)計(jì)。

(1)鼠標(biāo)停駐圖片之上,呈現(xiàn)其所屬信息。

(2)點(diǎn)、線的交互設(shè)計(jì),通過拖動(dòng)點(diǎn),構(gòu)成多樣化的圖形。在邏輯層面,也削減了繁瑣的層次,更加簡(jiǎn)單大方。

5.首頁(yè)。

其表現(xiàn)的是網(wǎng)頁(yè)的第一形象,是用戶視覺停駐的重點(diǎn),人們最為關(guān)心的內(nèi)容需要在首頁(yè)體現(xiàn)出來。通過扁平化設(shè)計(jì),排除多余的選項(xiàng),將標(biāo)識(shí)、導(dǎo)航平鋪式地放在首頁(yè),使用戶一覽無余。在感官上,去除了漸變等效果。為了獲得最好的視覺效果,還要不斷試驗(yàn)整體上的配置,使用戶獲得順暢的視覺感受。

6.網(wǎng)頁(yè)標(biāo)識(shí)。

標(biāo)識(shí)在網(wǎng)頁(yè)上的應(yīng)用應(yīng)盡量地放在特定位置。大多數(shù)情況下是將其放于左上方,這也是大部分網(wǎng)頁(yè)的選擇。

7.導(dǎo)航。導(dǎo)航的使用在于方便用戶使用,使其在使用過程中不會(huì)迷路,而且能迅速地找到感興趣的內(nèi)容。通過扁平化設(shè)計(jì),去除導(dǎo)航的漸變等,只是用色彩當(dāng)作背景,其上是導(dǎo)航的說明。

8.文本。

當(dāng)人們談到網(wǎng)頁(yè)易用性的時(shí)候,常常會(huì)提到界面(UI)、按鍵等的設(shè)計(jì)。然而文字才是網(wǎng)頁(yè)的重要內(nèi)容,它蘊(yùn)含了多種對(duì)使用者有用的信息。網(wǎng)頁(yè)首先要有能吸引用戶的內(nèi)容才是最重要的。通過扁平化設(shè)計(jì),將相關(guān)的文字內(nèi)容進(jìn)行區(qū)分,方便用戶選擇。

9.圖片。

它也是網(wǎng)頁(yè)上非常重要的構(gòu)成,圖片的選擇及效果會(huì)對(duì)網(wǎng)頁(yè)造成非常大的影響。全新的設(shè)計(jì)將更有助于圖片的呈現(xiàn),將通過更少的裝飾來展現(xiàn)圖片,同時(shí)這也對(duì)圖片的質(zhì)量提出了更高的要求。

三、網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)化

1.頁(yè)面設(shè)計(jì)的優(yōu)化。

對(duì)于圖片的選用必須審慎,要使其與網(wǎng)頁(yè)的風(fēng)格想搭配,增強(qiáng)用戶對(duì)其的觀感,進(jìn)而獲得積極的引導(dǎo)作用。并且在頁(yè)面上也要加上一定的交互設(shè)計(jì),使其表現(xiàn)的更具親切感。

2.交互設(shè)計(jì)的優(yōu)化。

(1)按鍵的設(shè)計(jì):要追求更易選擇,更加突出,更為協(xié)調(diào)。

(2)圖片的表現(xiàn)形式:突出簡(jiǎn)單易操作。

(3)各頁(yè)面間的跳轉(zhuǎn):指向性更加明確,能夠流暢地轉(zhuǎn)換。

3.文字設(shè)計(jì)。

對(duì)于網(wǎng)頁(yè)來說,特定文字的使用不多。當(dāng)前,較為常用的是微軟雅黑,它要比宋體更寬一些,且使得筆畫往周圍撐,表現(xiàn)的更加飽滿,該類字體更易呈現(xiàn)出漢字線的觀感,進(jìn)而方便用戶的閱讀,也給其中加上了線的設(shè)計(jì)感。

4.色彩的配搭。

網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)化,要注意對(duì)色彩的選擇,假如網(wǎng)頁(yè)的色彩非常鮮艷,就很能夠吸引人們的目光,會(huì)給使用者強(qiáng)烈的視覺沖擊。對(duì)于圖片的色彩的選用與網(wǎng)頁(yè)的配搭也要注意,對(duì)于網(wǎng)頁(yè)的整體風(fēng)格,選擇不一樣的顏色所呈現(xiàn)出的效果不同,能夠影響到使用者的感受。而且在輔色之中,可選擇相似的,如此看起來會(huì)較為一致,更具層次感。