《UI》界面設(shè)計(jì)如何配色

1.界面使用品牌色兔仰,可強(qiáng)化品牌曝光度

當(dāng)下手機(jī)APP層出不窮茫负,數(shù)不勝數(shù);大家都熟知每家公司每個(gè)產(chǎn)品或品牌斋陪,想要樹立認(rèn)知度需提前設(shè)立自身品牌色朽褪,形成視覺印象,無論在APP无虚,網(wǎng)站缔赠,Logo,VIS中保持色調(diào)一致更易彰顯品牌特色和強(qiáng)化品牌的曝光度友题。

多處突出品牌色

2.界面使用基礎(chǔ)輔助色??

如灰白黑等嗤堰,為簡(jiǎn)化設(shè)計(jì),突出界面內(nèi)容度宦,達(dá)到有效的傳播踢匣。

注意:因顏色數(shù)量有限,大公司先入為主戈抄,如藍(lán)色的支付寶离唬,綠色的微信,紅色的京東划鸽,橙色的淘寶等输莺,故有時(shí)通過品牌色難以被想起戚哎,不如根據(jù)產(chǎn)品內(nèi)容調(diào)性決策。與海報(bào)廣告視覺設(shè)計(jì)不同嫂用,UI界面是需長(zhǎng)久被使用型凳,內(nèi)容結(jié)構(gòu)簡(jiǎn)單明了易于操作才是首要。


黑白灰的基礎(chǔ)色

3.善于控制界面中的顏色數(shù)量

注意:一個(gè)界面的顏色最好不超過3種嘱函,可選擇同色系之間微弱調(diào)整甘畅,通過漸變鄰近色選擇;電商首頁不同色彩的icon時(shí)往弓,選擇同一個(gè)色相內(nèi)不同色系疏唾,保證視覺統(tǒng)一,尤其注意顏色視覺上是否和諧不跳躍亮航,個(gè)別性突出化荸实。


多彩搭配

4.不同狀態(tài)下配色技巧

界面是用于操作幫助用戶完成任務(wù)匀们,過程會(huì)牽涉各個(gè)狀態(tài)按鈕提示等缴淋。例如按鈕的不可點(diǎn)擊狀態(tài)/可點(diǎn)擊狀態(tài)/點(diǎn)擊中狀態(tài)等,采用相同顏色的不同透明度作為區(qū)分泄朴。

如紅色是警示重抖,綠色代表通過,保持和日常習(xí)慣一致的提示色彩減少用戶誤操作祖灰。

5.界面中字體顏色的選擇

常規(guī)字體顏色多用#222222? #333333? #666666? #999999钟沛,根據(jù)界面內(nèi)容主次層級(jí)設(shè)置不同字號(hào)大小顏色的差異性,讓界面視覺上清晰整潔局扶,不含含糊糊模棱兩可恨统。

注意:一般界面設(shè)計(jì)大家多避免使用#000000的純黑色,屬于約定俗成的默契三妈,但感性的設(shè)計(jì)更多是實(shí)際情況而定畜埋,例如最新版IOS11便使用純黑色字體,所以本位所說大部分屬于經(jīng)驗(yàn)主義內(nèi)容畴蒲,仍需要我們打破常規(guī)進(jìn)行創(chuàng)新悠鞍。

但實(shí)際工作中無法肆意妄為做界面,則需要在日常練習(xí)中不斷嘗試各種概念稿模燥,改版界面咖祭,讓想法無拘束放飛,在實(shí)際項(xiàng)目中加入的微創(chuàng)新蔫骂,都是來源于日常的不斷積累和思考么翰。


IOS11風(fēng)格界面

6.文字字體的排版

文字字體常規(guī)大小為10,12辽旋,13浩嫌,14,15,17(在375px1倍圖情況下的尺寸)

文字無論大小顏色區(qū)分固该,都是對(duì)文字信息層級(jí)的區(qū)分锅减,保證界面內(nèi)容的可讀性,主題明確伐坏。但一界面不宜使用過多顏色大小的字體怔匣,在設(shè)計(jì)初始應(yīng)設(shè)定標(biāo)題,內(nèi)容桦沉,導(dǎo)航每瞒,次級(jí)導(dǎo)航,提示字符等常規(guī)字體樣式纯露,才能使界面視覺更統(tǒng)一剿骨。

很多設(shè)計(jì)師都會(huì)遇到設(shè)計(jì)中總是猶豫不定,為了1像素1間距糾結(jié)半天埠褪,結(jié)果看起來卻無差別浓利,花費(fèi)時(shí)間界面卻無提升?

其實(shí)有些結(jié)論看似簡(jiǎn)單钞速,似乎讀了便會(huì)做得出驚艷界面贷掖,實(shí)際上手操作時(shí)發(fā)現(xiàn),仍然不知如何選擇渴语,每頁每個(gè)元素都糾結(jié)字號(hào)苹威,顏色,間距的大小驾凶,導(dǎo)致大道理都懂卻仍做不好的后果牙甫。

UI界面在設(shè)計(jì)技法層簡(jiǎn)單易學(xué),無非打字畫框畫線便可调违,個(gè)人感受做界面學(xué)會(huì)設(shè)定規(guī)范窟哺,整理組件,一個(gè)項(xiàng)目做完5頁確認(rèn)大概風(fēng)格后翰萨,此時(shí)需要明確的設(shè)計(jì)各個(gè)元件的規(guī)范脏答。例如:導(dǎo)航欄icon尺寸,功能性icon尺寸亩鬼,文字標(biāo)題殖告,內(nèi)容,標(biāo)簽雳锋,二級(jí)文字黄绩,邊距等,設(shè)定形成組件玷过,往后頁面會(huì)減少無休止的糾結(jié)及混亂爽丹。


sketch組件歸類命名

而界面真正難度在于思考整體布局入口筑煮,內(nèi)容表達(dá)請(qǐng)否清晰,以及icon繪制(整齊統(tǒng)一的icon會(huì)主導(dǎo)性影響整個(gè)界面,這也是分辨設(shè)計(jì)能力高低所在),和界面空白頁配圖小插畫的設(shè)計(jì)掘剪,icon和插畫非一日功夫練成腮郊,最易體現(xiàn)界面細(xì)節(jié)精致度纫溃。所以在UI界面中我們要學(xué)分取舍,安置自己的精力,懂得輕重緩急減少不必要的糾結(jié),把精力安排在真正需要技法的內(nèi)容上软啼。

同時(shí)UI界面一定要學(xué)會(huì)使用插件和組件,例如sketch中的symbol延柠,sketch measure祸挪,程序化批量處理重復(fù)繁瑣的常規(guī)工作。


我是糕小糕贞间,正所謂:書宜雜讀贿条,業(yè)宜精鉆;希望整理的對(duì)你有用榜跌。


?你知道嗎闪唆,你的贊盅粪,會(huì)讓我欣喜若狂


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末钓葫,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子票顾,更是在濱河造成了極大的恐慌础浮,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奠骄,死亡現(xiàn)場(chǎng)離奇詭異豆同,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)含鳞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門影锈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蝉绷,你說我怎么就攤上這事鸭廷。” “怎么了熔吗?”我有些...
    開封第一講書人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵辆床,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我桅狠,道長(zhǎng)讼载,這世上最難降的妖魔是什么轿秧? 我笑而不...
    開封第一講書人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮咨堤,結(jié)果婚禮上菇篡,老公的妹妹穿的比我還像新娘。我一直安慰自己一喘,他們只是感情好逸贾,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著津滞,像睡著了一般铝侵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上触徐,一...
    開封第一講書人閱讀 51,292評(píng)論 1 301
  • 那天咪鲜,我揣著相機(jī)與錄音,去河邊找鬼撞鹉。 笑死疟丙,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的鸟雏。 我是一名探鬼主播享郊,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼孝鹊!你這毒婦竟也來了炊琉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤又活,失蹤者是張志新(化名)和其女友劉穎苔咪,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體柳骄,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡团赏,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了耐薯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片舔清。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖曲初,靈堂內(nèi)的尸體忽然破棺而出体谒,到底是詐尸還是另有隱情,我是刑警寧澤复斥,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布营密,位于F島的核電站,受9級(jí)特大地震影響目锭,放射性物質(zhì)發(fā)生泄漏评汰。R本人自食惡果不足惜纷捞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望被去。 院中可真熱鬧主儡,春花似錦、人聲如沸惨缆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽坯墨。三九已至寂汇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間捣染,已是汗流浹背骄瓣。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留耍攘,地道東北人榕栏。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像蕾各,于是被迫代替她去往敵國(guó)和親扒磁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容