扁平化設計初學者指南
2017.06.29
過guo去qu，網wang站zhan設she計ji師shi將jiang重zhong點dian放fang在zai展zhan示shi自zi己ji的de技ji能neng和he設she計ji作zuo品pin，炫xuan耀yao那na些xie酷ku炫xuan的de插cha圖tu和he動dong畫hua，希xi望wang能neng夠gou經jing驗yan訪fang問wen者zhe。後hou來lai，潮chao流liu轉zhuan向xiang了le擬ni物wu設she計ji，試shi圖tu將jiang真zhen實shi的de生sheng活huo展zhan示shi在zai屏ping幕mu上shang，具ju有you逼bi真zhen的de紋wen理li、陰影和真實的物體特征。
後來，扁平化設計出現，並推翻了這些“人工的”設計技巧，轉而開始追求更加簡化的、經jing典dian的de數shu字zi化hua審shen美mei。盡jin管guan這zhe種zhong以yi用yong戶hu為wei中zhong心xin的de網wang站zhan設she計ji風feng格ge已yi經jing出chu現xian了le多duo年nian，但dan仍reng然ran很hen受shou歡huan迎ying。所suo以yi如ru果guo你ni還hai不bu了le解jie扁bian平ping化hua設she計ji到dao底di是shi什shen麼me，本ben文wen可ke以yi助zhu你ni一yi臂bi之zhi力li。
扁平化設計是一種簡約的設計方法，強調實用性。這種設計具有幹淨、空間開闊、邊緣清晰、色彩明亮、二維插圖等特點。
微軟是首批在自己的界麵應用扁平化設計的公司之一。扁平化設計並沒有使用把真實的物體（比如日曆）轉化為一個小小的逼真插圖，而是用簡單的的圖標來識別不同的應用。
扁平化設計並不需要將真實生活應用到界麵中，而是清晰地區分了技術與實物的界線。
簡約不等於無聊
扁bian平ping化hua設she計ji中zhong，裝zhuang飾shi性xing元yuan素su被bei視shi作zuo不bu必bi要yao的de雜za亂luan。如ru果guo某mou個ge元yuan素su沒mei有you功gong能neng性xing，那na就jiu是shi對dui用yong戶hu體ti驗yan的de一yi種zhong幹gan擾rao。這zhe是shi扁bian平ping化hua設she計ji強qiang調tiao簡jian約yue的de原yuan因yin。
但是，沒有華麗的設計並不意味著這種風格是無聊的。明亮的、對dui比bi強qiang烈lie的de色se彩cai讓rang插cha圖tu和he按an鈕niu從cong背bei景jing中zhong脫tuo穎ying而er出chu，很hen容rong易yi就jiu能neng抓zhua住zhu人ren們men的de視shi線xian，並bing引yin導dao用yong戶hu的de注zhu意yi力li。簡jian約yue圖tu像xiang同tong時shi也ye有you助zhu於yu突tu出chu扁bian平ping化hua設she計ji的de功gong能neng性xing。
快速掌握
比起複雜的插圖，簡單的圖像能夠更快速地傳達信息。圖標類的圖像可以表示通用的動作或者目的，大家都能輕鬆了解。
上圖中的雲計算指南使用了平麵圖形和圖解的組合來展示在工作中使用雲的各種優勢。圖像的簡單性使得用戶可以輕鬆理解信息。
你能從中得到什麼
扁平化設計回歸到了設計作為功能性工具的基礎。網站的優劣應以功能好壞而論，而不是以外觀而論。
這種原始功能性將網站的重點放在了用戶體驗上，因此采用了扁平化設計的網站通常能夠獲得來自用戶的積極反饋。
怎麼做
扁平化設計的要點，是所有設計元素均應遵循一個原則，那就是簡約。
鮮明的純色代替解說細節將不同的功能區分開來，無襯線字體為插圖提供幹淨清晰的補充；文本簡明扼要；UI元素比如按鈕和鏈接等清晰而明顯。
所有的內容均應圍繞同個目標進行設計，來打造一個視覺性和功能性都很棒的網站。下麵給大家介紹幾個扁平化設計的例子。
上圖中的旅行計劃應用設計來自印尼用戶界麵（User interface，UI）設計師Bady。用戶可以根據套餐和預算輕鬆下單預定航班。一切都清晰明了，設計很大程度上依賴於顏色和圖標。航班搜索的UI非常明顯。
上(shang)圖(tu)中(zhong)的(de)天(tian)氣(qi)應(ying)用(yong)用(yong)戶(hu)界(jie)麵(mian)設(she)計(ji)表(biao)明(ming)扁(bian)平(ping)化(hua)設(she)計(ji)即(ji)使(shi)不(bu)使(shi)用(yong)亮(liang)色(se)也(ye)能(neng)成(cheng)功(gong)。清(qing)晰(xi)的(de)圖(tu)像(xiang)和(he)大(da)號(hao)的(de)字(zi)體(ti)能(neng)夠(gou)輕(qing)易(yi)地(di)將(jiang)用(yong)戶(hu)的(de)注(zhu)意(yi)力(li)引(yin)到(dao)天(tian)氣(qi)情(qing)況(kuang)上(shang)麵(mian)，而(er)這(zhe)恰(qia)好(hao)也(ye)是(shi)用(yong)戶(hu)需(xu)要(yao)的(de)內(nei)容(rong)。
在zai開kai展zhan扁bian平ping化hua設she計ji時shi，請qing確que保bao圍wei繞rao簡jian約yue和he以yi用yong戶hu為wei中zhong心xin這zhe兩liang個ge重zhong點dian設she計ji每mei個ge方fang麵mian，以yi確que保bao用yong戶hu界jie麵mian的de統tong一yi。能neng夠gou成cheng功gong地di堅jian持chi這zhe一yi點dian，用yong戶hu將jiang會hui十shi分fen欣xin賞shang網wang站zhan的de功gong能neng性xing。
後來，扁平化設計出現，並推翻了這些“人工的”設計技巧，轉而開始追求更加簡化的、經jing典dian的de數shu字zi化hua審shen美mei。盡jin管guan這zhe種zhong以yi用yong戶hu為wei中zhong心xin的de網wang站zhan設she計ji風feng格ge已yi經jing出chu現xian了le多duo年nian，但dan仍reng然ran很hen受shou歡huan迎ying。所suo以yi如ru果guo你ni還hai不bu了le解jie扁bian平ping化hua設she計ji到dao底di是shi什shen麼me，本ben文wen可ke以yi助zhu你ni一yi臂bi之zhi力li。
什麼是扁平化設計？
Windows 8曾處於平麵設計趨勢的前沿
扁平化設計是一種簡約的設計方法，強調實用性。這種設計具有幹淨、空間開闊、邊緣清晰、色彩明亮、二維插圖等特點。
微軟是首批在自己的界麵應用扁平化設計的公司之一。扁平化設計並沒有使用把真實的物體（比如日曆）轉化為一個小小的逼真插圖，而是用簡單的的圖標來識別不同的應用。
扁平化設計並不需要將真實生活應用到界麵中，而是清晰地區分了技術與實物的界線。
簡約不等於無聊
扁bian平ping化hua設she計ji中zhong，裝zhuang飾shi性xing元yuan素su被bei視shi作zuo不bu必bi要yao的de雜za亂luan。如ru果guo某mou個ge元yuan素su沒mei有you功gong能neng性xing，那na就jiu是shi對dui用yong戶hu體ti驗yan的de一yi種zhong幹gan擾rao。這zhe是shi扁bian平ping化hua設she計ji強qiang調tiao簡jian約yue的de原yuan因yin。
但是，沒有華麗的設計並不意味著這種風格是無聊的。明亮的、對dui比bi強qiang烈lie的de色se彩cai讓rang插cha圖tu和he按an鈕niu從cong背bei景jing中zhong脫tuo穎ying而er出chu，很hen容rong易yi就jiu能neng抓zhua住zhu人ren們men的de視shi線xian，並bing引yin導dao用yong戶hu的de注zhu意yi力li。簡jian約yue圖tu像xiang同tong時shi也ye有you助zhu於yu突tu出chu扁bian平ping化hua設she計ji的de功gong能neng性xing。
快速掌握
比起複雜的插圖，簡單的圖像能夠更快速地傳達信息。圖標類的圖像可以表示通用的動作或者目的，大家都能輕鬆了解。
擬物設計和扁平化設計的區別是顯而易見的。大的純色塊更容易抓住人們的注意力，圖標的意義也更容易被理解。
Xero的雲計算指南使用了扁平化設計，讓信息更清晰易懂
上圖中的雲計算指南使用了平麵圖形和圖解的組合來展示在工作中使用雲的各種優勢。圖像的簡單性使得用戶可以輕鬆理解信息。
你能從中得到什麼
扁平化設計回歸到了設計作為功能性工具的基礎。網站的優劣應以功能好壞而論，而不是以外觀而論。
這種原始功能性將網站的重點放在了用戶體驗上，因此采用了扁平化設計的網站通常能夠獲得來自用戶的積極反饋。
怎麼做
扁平化設計的要點，是所有設計元素均應遵循一個原則，那就是簡約。
鮮明的純色代替解說細節將不同的功能區分開來，無襯線字體為插圖提供幹淨清晰的補充；文本簡明扼要；UI元素比如按鈕和鏈接等清晰而明顯。
所有的內容均應圍繞同個目標進行設計，來打造一個視覺性和功能性都很棒的網站。下麵給大家介紹幾個扁平化設計的例子。
Tripfinder
色彩和圖標讓信息更清晰
上圖中的旅行計劃應用設計來自印尼用戶界麵（User interface，UI）設計師Bady。用戶可以根據套餐和預算輕鬆下單預定航班。一切都清晰明了，設計很大程度上依賴於顏色和圖標。航班搜索的UI非常明顯。
天氣預報應用
扁平化設計不是必須使用亮色
上(shang)圖(tu)中(zhong)的(de)天(tian)氣(qi)應(ying)用(yong)用(yong)戶(hu)界(jie)麵(mian)設(she)計(ji)表(biao)明(ming)扁(bian)平(ping)化(hua)設(she)計(ji)即(ji)使(shi)不(bu)使(shi)用(yong)亮(liang)色(se)也(ye)能(neng)成(cheng)功(gong)。清(qing)晰(xi)的(de)圖(tu)像(xiang)和(he)大(da)號(hao)的(de)字(zi)體(ti)能(neng)夠(gou)輕(qing)易(yi)地(di)將(jiang)用(yong)戶(hu)的(de)注(zhu)意(yi)力(li)引(yin)到(dao)天(tian)氣(qi)情(qing)況(kuang)上(shang)麵(mian)，而(er)這(zhe)恰(qia)好(hao)也(ye)是(shi)用(yong)戶(hu)需(xu)要(yao)的(de)內(nei)容(rong)。
在zai開kai展zhan扁bian平ping化hua設she計ji時shi，請qing確que保bao圍wei繞rao簡jian約yue和he以yi用yong戶hu為wei中zhong心xin這zhe兩liang個ge重zhong點dian設she計ji每mei個ge方fang麵mian，以yi確que保bao用yong戶hu界jie麵mian的de統tong一yi。能neng夠gou成cheng功gong地di堅jian持chi這zhe一yi點dian，用yong戶hu將jiang會hui十shi分fen欣xin賞shang網wang站zhan的de功gong能neng性xing。
