移動app界面設(shè)計規(guī)范色彩篇

1、移動app界面設(shè)計規(guī)范色彩篇色彩在我們的界面設(shè)計中，是一個很讓人頭疼的事情。無論是設(shè)計大神還是設(shè)計新手，都是需要制定一套屬于自己的配色方案或配色計劃色彩,從當(dāng)代建筑、路標(biāo)、人行橫道以及運(yùn)動場館中獲取靈感，由此引發(fā)出大膽的顏色表達(dá)激活了色彩，與單調(diào)乏味的周邊環(huán)境形成鮮明的對比。強(qiáng)調(diào)大膽的陰影和高光。引出意想不到且充滿活力的顏色。調(diào)色板調(diào)色板以一些基礎(chǔ)色為基準(zhǔn)，通過填充光譜來為、和環(huán)境提供一套完整可用的顏色。基礎(chǔ)色的飽和度是0Red500#e51c23500#e51c23600#dd191d700#d01716800林4141100#b0120aA200#ff5177A400#ff2d6fA700

2、#600032Pink500#e91e63500#e91e63600#d81b60700#c2185b800#ad145700#880e4fA200#ff4081A400#f50057A700#c51162DeepPurple500#673訪7300#9575cd400#7e57c2500#673ab7600#5e35b1700#512da8800#4527aG900If311b92A200#7c4dffA400#651fffA700#62002Indigo500船f51b5300#7986cb400#5c6bc0500劇51b5600#2949ab700#303f9f800#28359390

3、0#1a237eA200#536dfeA400OdSafeA700#204ffeLhghtBlue500#03a9f4500#03a9f4600#039be5700#0288dl800#0277bd900#01579bA700#0091eaCyan500#00bcd450#e0f7fa100#b2ebf2200SOdeea3004ddOe140026c6da500#00bcd4600#00acc170D#0097a7800扒）0838f900#006064Al00#84ffffA200A400me5ffA70000b8d4Green500#259b2450#d0f8ce100#a3e*9a42

4、00京72d572300#421x141400#2baf2b500#259b24600#0a8f08700#0a7e078D0#056f00900#0d5302Al00a2f78dA200#5af158A400#14e715A700#12c700LightGreen500#8bc34a800#558b2f900*33691eYellowAmber500#ffeb3b500#ffc10750#fffde750#iff8e1100#iff9c41Q0#ffecb3200新ff59d2Q0ffe082300rfffi76300新fd54f400ffee58400#ffca28500#ffeb3b50

5、0#ffc107600#fdd835600#ffb300700#fbcO2d700#ffaOOO800新9a825300#ff&fOO900新57f17900寺ff6fOOAl00移ffff8dA100ffe57fA200PffffOOA200#ffd740A400ffeaOOA400#ffc400A700#ifd600A700#ffabOODeepOrange500新f5722500新f5722600#f4511e700ffe64a19800#d84315900#bf360cA400#ff3dOOA700#dd2cX)Brown500#795548300#a1887f400#8d6e6350

6、0#795548600#6d4c41700#5d40378004e342e900#3e2723BlueGrey500#607d8b400#7S909c500607d8t)600#546e7aTOO#455a64SDO#37474f900#263238顏色使用選擇你的調(diào)色板限制顏色的數(shù)量，在眾多基礎(chǔ)色中選出三個色度以及一個強(qiáng)調(diào)色。強(qiáng)調(diào)色用于后背，可有可無。PrimaryIndigo500#3F1B55003F51G5700鞘3Q3F9FAccent-PinkA200FF4081FallbackAl00#FF0DABA400#F50057為灰色的文字、圖標(biāo)和分隔線加上值為了有效地傳達(dá)信息的視覺層次

7、，應(yīng)該使用深淺不同的文本。對于白色背景上的文字，標(biāo)準(zhǔn)值為（）。視覺層次偏低的次要文字，應(yīng)該使用（#0的值。而像正文和標(biāo)簽中用于提示用戶的文字，視覺層次更低，應(yīng)該使用（）的值。其它元素，如圖標(biāo)和分隔線，也應(yīng)該具有黑色的值，而不是實(shí)心顏色，以確保他們能適應(yīng)任何顏色的背景。對于彩色背景上白色或黑色文字，可以通過表格中的調(diào)色板找到合適的色彩對比度和值。我們十分鼓勵在中的大塊區(qū)域內(nèi)使用醒目的顏色。中不同的元素適合主題中不同的色彩。工具欄和大色塊適合使用飽和度50的0基礎(chǔ)色，這也是你應(yīng)用的主要顏色。狀態(tài)欄適合使用更深一些的飽和度的基礎(chǔ)色。j12：3U=InboxTodavSummerBBQ4toAle兒S

8、ummerBBQ4toAle兒ScottJennifer-Awdang.WishBrunchthisweekend?AliCcnnors-IlbeinyourncighborhoGd.ProjectPrioritiesDescriptionOOuiOuiSandraOOuiOuiSandraAdanns-youhaveParisreca.LabelNcmeBirthdayGiftTrevoiHansen-HhvennyilIhsBirthdayGiftTrevoiHansen-HhvennyilIhschumDuedateFebruary20,2014強(qiáng)調(diào)色鮮艷的強(qiáng)調(diào)色用于你的主要操作按鈕以及組件，如開關(guān)或滑片。左對齊的部分圖標(biāo)或章節(jié)標(biāo)題也可以使用強(qiáng)調(diào)色。jft*12趙IAlifCjft*12趙IAlifCnnors(650)555-1234Mobile(323)555-67的WorkSettingsYj12:30XBasicsSearchEngineGQQgkSavePasswordsAutofiIIIFaririsoGoogleAppsAdvancedEnglish(US)VoiceSearchEnglish(US)備用強(qiáng)調(diào)色如果你的強(qiáng)調(diào)色相對于背景色太深或者太淺，默認(rèn)的做法是選擇一個更淺或者更深的備用顏色。如果你的強(qiáng)調(diào)色無