9.23日(rì)音(yīn)訊,網站(zhàn)制(zhì)作(zuò)扁平 ¶化(huà)設計(jì)的(de)5大(‍±σdà)特征

 　　9.23日(rì)音(yīn)訊,網站(zhàn)制(zhì₩δ )作(zuò)扁平化(huà)設計(jì$‌®)的(de)5大(dà)特征。如(rú)今設>©®↑計(jì)界最炙手可(kě)熱(rè)的(de)明(míng)星大(dà↕≈←)概就(jiù)是(shì)扁平化(huà)設計(jì)¶↓£了(le)吧(ba)，關于它的(de)討(tǎo)論至今都' (dōu)沒有(yǒu)冷(lěng)卻的(de)↑≥&α迹象。諸多(duō)設計(jì)師(shī)分(f®≈©ēn)成了(le)泾渭分(fēn)明(míng)的(de)兩個(gè)陣δ✘營，一(yī)邊努力把扁平化(huà)做(zuò)✘•到(dào)極緻，一(yī)面對(duì)其不($‌$bù)屑一(yī)顧。

　　在我看(kàn)來(lái)，優秀的(de)設計(jì ©)的(de)定義就(jiù)是(shì)好(hǎo)用(yòng)，隻要(‌ 'yào)能(néng)設計(jì)出優秀的(de)産品，我可(kě)以采‌≤用(yòng)任何方式，扁平化(huà)也£$≥(yě)是(shì)其中之一(yī)。但(dàλ±↑n)是(shì)必須意識到(dào)，沒有(yǒu€←☆)哪種風(fēng)格是(shì)包打天下(xià)的(de)，不(bù♣↕€)能(néng)強行(xíng)将一(yī)種風(f∞>±ēng)格應用(yòng)到(dào)不(bù)π∑♠★該用(yòng)的(de)地(dì)方。

　　那(nà)麽，扁平化(huà)究竟該怎麽實現(xiàn)怎麽應用(yònπδ✘g)呢(ne)？下(xià)文(wén)将要(yào®✘₩')做(zuò)的(de)就(jiù)是(shì)分(fēn)↕≥☆£析扁平化(huà)的(de)五個(gè)最典型的(de)✔±♣特征，同時(shí)也(yě)介紹一(yī)下✔€✘(xià)僞扁平化(huà)（不(bù)含貶義，隻→ 是(shì)一(yī)種折衷的(de)設計(jì)方式）。≤±σλ

　　一(yī)、拒絕特效

　　扁平化(huà)這(zhè)個(gè)詞來(lái)自(zì)于這(z ∏hè)種設計(jì)所使用(yòng)的(de)樣式和(±<©γhé)形狀，它完全屬于二次元世界，一(yī)個(gè)簡單的(de)±§形狀加沒有(yǒu)景深的(de)平面，不(bù)叫扁平€♦化(huà)都(dōu)浪費(fèi)這(zhè)個✘∞(gè)詞了(le)。

　　這(zhè)個(gè)概念最核心的(de)地(dì)‍ ∏λ方就(jiù)是(shì)放(fàng)棄一(yī)切裝β§飾效果，諸如(rú)陰影(yǐng)、透視(s‍↕φhì)、紋理(lǐ)、漸變等等能(néng)做(zuò)出3¶φD效果的(de)元素一(yī)概不(bù)用(y∏ òng)。所有(yǒu)的(de)元素的(de>↕)邊界都(dōu)幹淨俐落，沒有(yǒu)任何≠∞‍羽化(huà)、漸變或者陰影(yǐng)。

　　這(zhè)一(yī)設計(jì)趨勢極力避免任何拟物(wù)化α§δφ(huà)的(de)元素，這(zhè)導緻這(z≠♦✘ hè)一(yī)設計(jì)風(fēng)格在其它平台有(yǒu)¥≈時(shí)候顯得(de)突兀，前景圖片、按鈕、文(wén'")本和(hé)導航欄與背景圖片格格不(bù)入，各成★↕一(yī)派。

　　那(nà)麽，扁平化(huà)的(de® σ)效果如(rú)何呢(ne)？

　　因為(wèi)這(zhè)種設計(jì)有(yǒu)著(®≠♥§zhe)鮮明(míng)的(de)視(shì)覺效果，$←∑它所使用(yòng)的(de)元素之間(jiān)有(yǒu)這(‌♣₽zhè)清晰的(de)層次和(hé)布局，這(zhè)使得(de)用(yò↕♣¥ng)戶能(néng)直觀的(de)了(le)解每個(gè"≈)元素的(de)作(zuò)用(yòng)以及交互方式。如(rú)今從(>↑cóng)網頁到(dào)手機(jī)應用(yòn₽↓g)無不(bù)在使用(yòng)扁平化(huà)的(de)設計(jì$∞)風(fēng)格，尤其在手機(jī)上(shàng)，因為(w襩↕i)屏幕的(de)限制(zhì)，使得(de)這(zhè)一(yī)風ε→$(fēng)格在用(yòng)戶體(tǐ)驗上(shàβ↓ng)更有(yǒu)優勢，更少(shǎo)的(de)按鈕和(hé)選項Ω★©使得(de)界面幹淨整齊，使用(yòng)起來(lái)格外(wài♥¶)簡單。

　　二、界面元素

　　扁平化(huà)設計(jì)通(tōng)常采用(yòng)許多(÷§duō)簡單的(de)用(yòng)戶界♥↑Ω 面元素，諸如(rú)按鈕或者圖标之類。設計(jì)師(shī)們通(tōng)✔↔β常堅持使用(yòng)簡單的(de)外(wài)形（矩形或者圓形），并✘≈且盡量突出外(wài)形，這(zhè)些(xiē)元素一(yī)☆↑£Ω律為(wèi)直角（極少(shǎo)的(de)一(yī)些(xiē)為 →≈β(wèi)圓角）。

　　這(zhè)些(xiē)用(yòng)戶界Ωβ♦↑面元素可(kě)以方便用(yòng)戶點擊，這(zhè)能(n₽≤Ωéng)極大(dà)的(de)減少(shǎo)用(yòng ♦ ₹)戶學習(xí)新交互方式的(de)成本，因為(wèi)用(yòng)戶憑經'↓≈±驗就(jiù)能(néng)大(dà)概知(zhī)道(dào)每個(gè)®‍ 按鈕的(de)作(zuò)用(yòng)。

　　此外(wài)，扁平化(huà)除了(le)簡單的(de)形狀之¥≠外(wài)，還(hái)包括大(dà)膽的(de)配色。但(dàn)®π是(shì)需要(yào)注意的(de)是(shì)，扁平化(huà)設計(j↓$> ì)不(bù)是(shì)說(shuō)就(jiù)簡¶∑單的(de)搞些(xiē)形狀和(hé)顔色搭配起來(lái)就→φ↔γ(jiù)行(xíng)，它和(hé)其他(tā)設計(jì)風β€♣(fēng)格一(yī)樣，是(shì)由許多(du¥¥≠↓ō)的(de)概念與方法組成的(de)，想要(yào)學習♦>®(xí)具體(tǐ)設計(jì)方法的(de)朋(péng)友(yǒu)可₹•®(kě)以看(kàn)看(kàn)Designmodo，這(zhè)裡‌>φ(lǐ)有(yǒu)許多(duō)現(xiàn)↓×£成的(de)設計(jì)實例可(kě)以讓大(dà)家(jiā)分(fēn)←φ 享（免費(fèi)矩形UI、免費(fèi)扁平化(huΩ↔✔$à)UI，這(zhè)兩個(gè)地(dì)方是(shì)一(yī)些(xiē∞✘∞)簡單的(de)和(hé)一(yī)些(xiē≤★•)最基本的(de)組件(jiàn)；專業(yè)矩形UI、↑✔☆專業(yè)扁平化(huà)UI，這(zhè)兩個(g让)地(dì)方是(shì)一(yī)些(xiē)完整的★®γ™(de)網頁）。

　　三、優化(huà)排版

　　由于扁平化(huà)設計(jì)的(de)使用(yòng)特别簡單®∏β‌的(de)元素，排版就(jiù)成了(le)很(hěn)重要(yào)"δ§‌的(de)一(yī)環，排版好(hǎo)壞§≥直接影(yǐng)響視(shì)覺效果，甚至可Ω♥♥(kě)能(néng)間(jiān)接影(yǐng≠γ∏≤)響用(yòng)戶體(tǐ)驗。

　　字體(tǐ)是(shì)排版中很(πε↑hěn)重要(yào)的(de)一(yīλλ←γ)部分(fēn)，它需要(yào)和(hé)其"✔↓§他(tā)元素相(xiàng)輔相(xiàng)成，想想看(kàn)，一€∞(yī)款花(huā)體(tǐ)字在扁平化(huà)的‍​♠•(de)界面裡(lǐ)得(de)有(yǒu)多(duō)突兀↑φ§ε。上(shàng)圖是(shì)一(yī)些(→♣₹↔xiē)扁平化(huà)網站(zhàn)¥γ使用(yòng)無襯線字體(tǐ)的(de)例子(zǐ)，無襯↔™☆₽線字體(tǐ)家(jiā)族龐大(dà)分(fēn)♠∞•之衆多(duō)，其中有(yǒu)些(xi≤≤≈ē)字體(tǐ)會(huì)在特殊得(de)情景下(xià)會(hu§"¶δì)有(yǒu)意想不(bù)到(dào)得(de)效果。但(↓‍ dàn)注意，過猶不(bù)及，不(bù)要(yào)使用(yòng§&& )那(nà)些(xiē)極為(wèi)生(shēng)僻的(de∞←π)字體(tǐ)，因為(wèi)保不(bù)齊它就(₽‍jiù)把你(nǐ)帶進坑裡(lǐ)了(le)。

　　如(rú)何使用(yòng)字體(tǐ)也(yě)是(s™®®hì)一(yī)門(mén)學問(wèn)，要(yào)♥••‍學會(huì)讓不(bù)同的(de)字體(tǐ)表達不(bù§ ≠↓)同的(de)概念，通(tōng)過字體(tǐ∏λ∞)告訴用(yòng)戶這(zhè)某一(yī)<•♣✘設計(jì)／功能(néng)的(de)含義，努力使字體(tǐ)成為(wè&↑✔i)你(nǐ)簡化(huà)設計(jì)的(de)有(yǒu)力武器(qφ≥¶§ì)。

　　四、如(rú)何配色

　　扁平化(huà)設計(jì)中，配色貌似φ☆"≤是(shì)最重要(yào)的(de)一(yī)環，扁平€→♣化(huà)設計(jì)通(tōng)常采用(yòng)比其他(tā)風®>₽‍(fēng)格更明(míng)亮(liàn÷♦'∑g)更炫麗(lì)的(de)顔色。同時(shíα♥§)，扁平化(huà)設計(jì)中的(de)配色還(há≠<¥βi)意味著(zhe)更多(duō)的(de)色調。比如(rú)，¥★♥↓其他(tā)設計(jì)最多(duō)隻包含兩三種主要(yào∑♦>)顔色，但(dàn)是(shì)扁平化(huà)設計(jì)中會(huìβ♣)平均使用(yòng)六到(dào)八種顔色。

　　而且扁平化(huà)設計(jì)中，往往傾向 π于使用(yòng)單色調，尤其是(shì)純色，并且不(bù)做(zuò)​↓任何淡化(huà)或柔化(huà)處理(lǐ)（最≥‍♣受歡迎的(de)顔色是(shì)純色和(hé)二次色）♠÷。另外(wài)還(hái)有(yǒu)一(yī)些(xiē)顔色也(yě)挺€'£受歡迎，如(rú)複古色（淺橙、紫色、綠(l☆÷ǜ)色、藍(lán)色等）。

　　五、最簡方案

　　設計(jì)師(shī)要(yào)盡≥​•♦量簡化(huà)自(zì)己的(de)設計(jì)方案，避免不(bσ∞φù)必要(yào)的(de)元素出現(xiàn)在設計(jì↕↑→)中。簡單的(de)顔色和(hé)字體(tǐ∏ )就(jiù)足夠了(le)，如(rú)果你(nǐ)還(hái)想添加點什£ (shén)麽，盡量選擇簡單的(de)圖案。

　　扁平化(huà)設計(jì)尤其對(duì)一(yī)些(✘♠xiē)做(zuò)零售的(de)網站(zhàn)幫助巨大(dà)，它能(n₽←↔≥éng)很(hěn)有(yǒu)效的(de)把商品組織起來‍©♣α(lái)，以簡單但(dàn)合理(lǐ)方式排列。