機(jī)構(gòu)組織國(guó)企品牌官網(wǎng)網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)
扁平化設(shè)計(jì)初學(xué)者指南
標(biāo)簽：
網(wǎng)站設(shè)計(jì)扁平化設(shè)計(jì)
2017.06.29
過去，網(wǎng)站設(shè)計(jì)師將重點(diǎn)放在展示自己的技能和設(shè)計(jì)作品，炫耀那些酷炫的插圖和動(dòng)畫，希望能夠經(jīng)驗(yàn)訪問者。后來，潮流轉(zhuǎn)向了擬物設(shè)計(jì)，試圖將真實(shí)的生活展示在屏幕上，具有逼真的紋理、陰影和真實(shí)的物體特征。
后來，扁平化設(shè)計(jì)出現(xiàn)，并推翻了這些“人工的”設(shè)計(jì)技巧，轉(zhuǎn)而開始追求更加簡(jiǎn)化的、經(jīng)典的數(shù)字化審美。盡管這種以用戶為中心的網(wǎng)站設(shè)計(jì)風(fēng)格已經(jīng)出現(xiàn)了多年，但仍然很受歡迎。所以如果你還不了解扁平化設(shè)計(jì)到底是什么，本文可以助你一臂之力。
扁平化設(shè)計(jì)是一種簡(jiǎn)約的設(shè)計(jì)方法，強(qiáng)調(diào)實(shí)用性。這種設(shè)計(jì)具有干凈、空間開闊、邊緣清晰、色彩明亮、二維插圖等特點(diǎn)。
微軟是首批在自己的界面應(yīng)用扁平化設(shè)計(jì)的公司之一。扁平化設(shè)計(jì)并沒有使用把真實(shí)的物體（比如日歷）轉(zhuǎn)化為一個(gè)小小的逼真插圖，而是用簡(jiǎn)單的的圖標(biāo)來識(shí)別不同的應(yīng)用。
扁平化設(shè)計(jì)并不需要將真實(shí)生活應(yīng)用到界面中，而是清晰地區(qū)分了技術(shù)與實(shí)物的界線。
簡(jiǎn)約不等于無聊
扁平化設(shè)計(jì)中，裝飾性元素被視作不必要的雜亂。如果某個(gè)元素沒有功能性，那就是對(duì)用戶體驗(yàn)的一種干擾。這是扁平化設(shè)計(jì)強(qiáng)調(diào)簡(jiǎn)約的原因。
但是，沒有華麗的設(shè)計(jì)并不意味著這種風(fēng)格是無聊的。明亮的、對(duì)比強(qiáng)烈的色彩讓插圖和按鈕從背景中脫穎而出，很容易就能抓住人們的視線，并引導(dǎo)用戶的注意力。簡(jiǎn)約圖像同時(shí)也有助于突出扁平化設(shè)計(jì)的功能性。
快速掌握
比起復(fù)雜的插圖，簡(jiǎn)單的圖像能夠更快速地傳達(dá)信息。圖標(biāo)類的圖像可以表示通用的動(dòng)作或者目的，大家都能輕松了解。
上圖中的云計(jì)算指南使用了平面圖形和圖解的組合來展示在工作中使用云的各種優(yōu)勢(shì)。圖像的簡(jiǎn)單性使得用戶可以輕松理解信息。
你能從中得到什么
扁平化設(shè)計(jì)回歸到了設(shè)計(jì)作為功能性工具的基礎(chǔ)。網(wǎng)站的優(yōu)劣應(yīng)以功能好壞而論，而不是以外觀而論。
這種原始功能性將網(wǎng)站的重點(diǎn)放在了用戶體驗(yàn)上，因此采用了扁平化設(shè)計(jì)的網(wǎng)站通常能夠獲得來自用戶的積極反饋。
怎么做
扁平化設(shè)計(jì)的要點(diǎn)，是所有設(shè)計(jì)元素均應(yīng)遵循一個(gè)原則，那就是簡(jiǎn)約。
鮮明的純色代替解說細(xì)節(jié)將不同的功能區(qū)分開來，無襯線字體為插圖提供干凈清晰的補(bǔ)充；文本簡(jiǎn)明扼要；UI元素比如按鈕和鏈接等清晰而明顯。
所有的內(nèi)容均應(yīng)圍繞同個(gè)目標(biāo)進(jìn)行設(shè)計(jì)，來打造一個(gè)視覺性和功能性都很棒的網(wǎng)站。下面給大家介紹幾個(gè)扁平化設(shè)計(jì)的例子。
上圖中的旅行計(jì)劃應(yīng)用設(shè)計(jì)來自印尼用戶界面（User interface，UI）設(shè)計(jì)師Bady。用戶可以根據(jù)套餐和預(yù)算輕松下單預(yù)定航班。一切都清晰明了，設(shè)計(jì)很大程度上依賴于顏色和圖標(biāo)。航班搜索的UI非常明顯。
上圖中的天氣應(yīng)用用戶界面設(shè)計(jì)表明扁平化設(shè)計(jì)即使不使用亮色也能成功。清晰的圖像和大號(hào)的字體能夠輕易地將用戶的注意力引到天氣情況上面，而這恰好也是用戶需要的內(nèi)容。
在開展扁平化設(shè)計(jì)時(shí)，請(qǐng)確保圍繞簡(jiǎn)約和以用戶為中心這兩個(gè)重點(diǎn)設(shè)計(jì)每個(gè)方面，以確保用戶界面的統(tǒng)一。能夠成功地堅(jiān)持這一點(diǎn)，用戶將會(huì)十分欣賞網(wǎng)站的功能性。
后來，扁平化設(shè)計(jì)出現(xiàn)，并推翻了這些“人工的”設(shè)計(jì)技巧，轉(zhuǎn)而開始追求更加簡(jiǎn)化的、經(jīng)典的數(shù)字化審美。盡管這種以用戶為中心的網(wǎng)站設(shè)計(jì)風(fēng)格已經(jīng)出現(xiàn)了多年，但仍然很受歡迎。所以如果你還不了解扁平化設(shè)計(jì)到底是什么，本文可以助你一臂之力。
什么是扁平化設(shè)計(jì)？
Windows 8曾處于平面設(shè)計(jì)趨勢(shì)的前沿
扁平化設(shè)計(jì)是一種簡(jiǎn)約的設(shè)計(jì)方法，強(qiáng)調(diào)實(shí)用性。這種設(shè)計(jì)具有干凈、空間開闊、邊緣清晰、色彩明亮、二維插圖等特點(diǎn)。
微軟是首批在自己的界面應(yīng)用扁平化設(shè)計(jì)的公司之一。扁平化設(shè)計(jì)并沒有使用把真實(shí)的物體（比如日歷）轉(zhuǎn)化為一個(gè)小小的逼真插圖，而是用簡(jiǎn)單的的圖標(biāo)來識(shí)別不同的應(yīng)用。
扁平化設(shè)計(jì)并不需要將真實(shí)生活應(yīng)用到界面中，而是清晰地區(qū)分了技術(shù)與實(shí)物的界線。
簡(jiǎn)約不等于無聊
扁平化設(shè)計(jì)中，裝飾性元素被視作不必要的雜亂。如果某個(gè)元素沒有功能性，那就是對(duì)用戶體驗(yàn)的一種干擾。這是扁平化設(shè)計(jì)強(qiáng)調(diào)簡(jiǎn)約的原因。
但是，沒有華麗的設(shè)計(jì)并不意味著這種風(fēng)格是無聊的。明亮的、對(duì)比強(qiáng)烈的色彩讓插圖和按鈕從背景中脫穎而出，很容易就能抓住人們的視線，并引導(dǎo)用戶的注意力。簡(jiǎn)約圖像同時(shí)也有助于突出扁平化設(shè)計(jì)的功能性。
快速掌握
比起復(fù)雜的插圖，簡(jiǎn)單的圖像能夠更快速地傳達(dá)信息。圖標(biāo)類的圖像可以表示通用的動(dòng)作或者目的，大家都能輕松了解。
擬物設(shè)計(jì)和扁平化設(shè)計(jì)的區(qū)別是顯而易見的。大的純色塊更容易抓住人們的注意力，圖標(biāo)的意義也更容易被理解。
Xero的云計(jì)算指南使用了扁平化設(shè)計(jì)，讓信息更清晰易懂
上圖中的云計(jì)算指南使用了平面圖形和圖解的組合來展示在工作中使用云的各種優(yōu)勢(shì)。圖像的簡(jiǎn)單性使得用戶可以輕松理解信息。
你能從中得到什么
扁平化設(shè)計(jì)回歸到了設(shè)計(jì)作為功能性工具的基礎(chǔ)。網(wǎng)站的優(yōu)劣應(yīng)以功能好壞而論，而不是以外觀而論。
這種原始功能性將網(wǎng)站的重點(diǎn)放在了用戶體驗(yàn)上，因此采用了扁平化設(shè)計(jì)的網(wǎng)站通常能夠獲得來自用戶的積極反饋。
怎么做
扁平化設(shè)計(jì)的要點(diǎn)，是所有設(shè)計(jì)元素均應(yīng)遵循一個(gè)原則，那就是簡(jiǎn)約。
鮮明的純色代替解說細(xì)節(jié)將不同的功能區(qū)分開來，無襯線字體為插圖提供干凈清晰的補(bǔ)充；文本簡(jiǎn)明扼要；UI元素比如按鈕和鏈接等清晰而明顯。
所有的內(nèi)容均應(yīng)圍繞同個(gè)目標(biāo)進(jìn)行設(shè)計(jì)，來打造一個(gè)視覺性和功能性都很棒的網(wǎng)站。下面給大家介紹幾個(gè)扁平化設(shè)計(jì)的例子。
Tripfinder
色彩和圖標(biāo)讓信息更清晰
上圖中的旅行計(jì)劃應(yīng)用設(shè)計(jì)來自印尼用戶界面（User interface，UI）設(shè)計(jì)師Bady。用戶可以根據(jù)套餐和預(yù)算輕松下單預(yù)定航班。一切都清晰明了，設(shè)計(jì)很大程度上依賴于顏色和圖標(biāo)。航班搜索的UI非常明顯。
天氣預(yù)報(bào)應(yīng)用
扁平化設(shè)計(jì)不是必須使用亮色
上圖中的天氣應(yīng)用用戶界面設(shè)計(jì)表明扁平化設(shè)計(jì)即使不使用亮色也能成功。清晰的圖像和大號(hào)的字體能夠輕易地將用戶的注意力引到天氣情況上面，而這恰好也是用戶需要的內(nèi)容。
在開展扁平化設(shè)計(jì)時(shí)，請(qǐng)確保圍繞簡(jiǎn)約和以用戶為中心這兩個(gè)重點(diǎn)設(shè)計(jì)每個(gè)方面，以確保用戶界面的統(tǒng)一。能夠成功地堅(jiān)持這一點(diǎn)，用戶將會(huì)十分欣賞網(wǎng)站的功能性。
400-6446-365 / 010-64928252
我想要個(gè)更針對(duì)我需求的方案
看過此文章的人也看過
友情鏈接：
也許您需要專業(yè)的服務(wù)，歡迎來電咨詢
您的需求，是我們前進(jìn)最大的動(dòng)力
關(guān)于我們
北京分形科技有限公司成立于2003年，是一家以AI為核心驅(qū)動(dòng)力，提供網(wǎng)絡(luò)品牌策劃、AI互聯(lián)網(wǎng)服務(wù)、WEB3服務(wù)、AI人工智能解決方案的綜合服務(wù)商
我們一直秉承的經(jīng)營(yíng)理念：責(zé)任、熱情、品質(zhì)、包容
主要業(yè)務(wù)范圍：AI互聯(lián)網(wǎng)服務(wù)（網(wǎng)站建設(shè),網(wǎng)站群,短視頻社交平臺(tái),APP,小程序）AI人工智能行業(yè)解決方案（智慧博物館,智慧公園,智慧景區(qū),智慧社區(qū),智慧醫(yī)療,智慧校園,）IoT智能物聯(lián)產(chǎn)品（智能步道,AR太極,AI健身,AI導(dǎo)覽,AI單車,智慧樹）WEB3（區(qū)塊鏈,元宇宙,NFT數(shù)字藏品）