咸宁诰谇保险股份有限公司

扁平化設(shè)計(jì)現(xiàn)已被界面設(shè)計(jì)的多個(gè)領(lǐng)域所使用。隨著融合了扁平化設(shè)計(jì)的Windows8等的發(fā)布, 許多網(wǎng)站都開始應(yīng)用扁平化的設(shè)計(jì), 這一設(shè)計(jì)風(fēng)格將在未來(lái)獲得更為廣泛的應(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, 它不單單是視覺(jué)上的扁平化, 構(gòu)造也追求扁平化, 最終呈現(xiàn)的效果非常好。
2.相通的設(shè)計(jì)原則。
(1) 一致性。
通過(guò)采取一致性的設(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ì), 是一種視覺(jué)上的語(yǔ)言, 較為追求排版與布局, 為了獲得最好的視覺(jué)特效, 要不斷試驗(yàn)布局的合理性, 使用戶體驗(yàn)到最優(yōu)的視覺(jué)享受。
1.排版布局。
實(shí)行扁平化設(shè)計(jì), 首頁(yè)的標(biāo)識(shí)要置于主視覺(jué)區(qū), 導(dǎo)航等也要盡可能的簡(jiǎn)單化, 圖片占到了排版的大部, 使得用戶觀察到有趣的環(huán)節(jié)很方便的進(jìn)行選擇, 風(fēng)格直觀, 圖片的選用也要認(rèn)真斟酌, 增強(qiáng)其視覺(jué)特效。
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)容為主, 可以說(shuō)內(nèi)容是網(wǎng)頁(yè)真正的核心構(gòu)成。外觀漂亮固然很好, 然而真正能留駐用戶的還得是內(nèi)容。因此, 對(duì)內(nèi)容的規(guī)劃是網(wǎng)頁(yè)創(chuàng)建過(guò)程中最為重要的一部分。
4.交互動(dòng)畫設(shè)計(jì)。
(1) 鼠標(biāo)停駐圖片之上, 呈現(xiàn)其所屬信息。
(2) 點(diǎn)、線的交互設(shè)計(jì), 通過(guò)拖動(dòng)點(diǎn), 構(gòu)成多樣化的圖形。在邏輯層面, 也削減了繁瑣的層次, 更加簡(jiǎn)單大方。
5.首頁(yè)。
其表現(xiàn)的是網(wǎng)頁(yè)的第一形象, 是用戶視覺(jué)停駐的重點(diǎn), 人們最為關(guān)心的內(nèi)容需要在首頁(yè)體現(xiàn)出來(lái)。通過(guò)扁平化設(shè)計(jì), 排除多余的選項(xiàng), 將標(biāo)識(shí)、導(dǎo)航平鋪式地放在首頁(yè), 使用戶一覽無(wú)余。在感官上, 去除了漸變等效果。為了獲得最好的視覺(jué)效果, 還要不斷試驗(yàn)整體上的配置, 使用戶獲得順暢的視覺(jué)感受。
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)航的使用在于方便用戶使用, 使其在使用過(guò)程中不會(huì)迷路, 而且能迅速地找到感興趣的內(nèi)容。通過(guò)扁平化設(shè)計(jì), 去除導(dǎo)航的漸變等, 只是用色彩當(dāng)作背景, 其上是導(dǎo)航的說(shuō)明。
8.文本。
當(dāng)人們談到網(wǎng)頁(yè)易用性的時(shí)候, 常常會(huì)提到界面 (UI) 、按鍵等的設(shè)計(jì)。然而文字才是網(wǎng)頁(yè)的重要內(nèi)容, 它蘊(yùn)含了多種對(duì)使用者有用的信息。網(wǎng)頁(yè)首先要有能吸引用戶的內(nèi)容才是最重要的。通過(guò)扁平化設(shè)計(jì), 將相關(guān)的文字內(nèi)容進(jìn)行區(qū)分, 方便用戶選擇。
9.圖片。
它也是網(wǎng)頁(yè)上非常重要的構(gòu)成, 圖片的選擇及效果會(huì)對(duì)網(wǎng)頁(yè)造成非常大的影響。全新的設(shè)計(jì)將更有助于圖片的呈現(xiàn), 將通過(guò)更少的裝飾來(lái)展現(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è)來(lái)說(shuō), 特定文字的使用不多。當(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)烈的視覺(jué)沖擊。對(duì)于圖片的色彩的選用與網(wǎng)頁(yè)的配搭也要注意, 對(duì)于網(wǎng)頁(yè)的整體風(fēng)格, 選擇不一樣的顏色所呈現(xiàn)出的效果不同, 能夠影響到使用者的感受。而且在輔色之中, 可選擇相似的, 如此看起來(lái)會(huì)較為一致, 更具層次感。