我們都知道在UI設(shè)計(jì)中配色占據(jù)著極其重要的地位，良好的配色會(huì)提升產(chǎn)品的用戶(hù)體驗(yàn)度，更會(huì)吸引更多潛在用戶(hù)的目光。當(dāng)然一款產(chǎn)品配色體系的建立是一個(gè)極其繁瑣的過(guò)程，礙于篇幅這里無(wú)法展開(kāi)來(lái)說(shuō)。這篇文章南京萬(wàn)和UI設(shè)計(jì)培訓(xùn)只是主要來(lái)探討一下如何確定產(chǎn)品的主體配色風(fēng)格：是白底黑字還是黑底白字？

　　影響配色的因素

　　一款產(chǎn)品配色風(fēng)格的確定是要綜合多方面因素，在配色方案制定的初始階段，我們應(yīng)該考慮以下幾個(gè)方面：

　　易讀性

　　屏幕背景色的選擇會(huì)對(duì)內(nèi)容的易讀性產(chǎn)生極大的影響，這是產(chǎn)品用戶(hù)體驗(yàn)中我們最看重的一部分。因?yàn)槲覀冎饕ㄟ^(guò)眼睛來(lái)獲取信息，如果這款產(chǎn)品的屏幕內(nèi)容我都無(wú)法看清，那么就沒(méi)有繼續(xù)使用下去的欲望了。特別是對(duì)于以文字為主體的app或網(wǎng)站來(lái)說(shuō)，糟糕的易讀性會(huì)導(dǎo)致用戶(hù)忽視重要的信息，而且增加了用戶(hù)的閱讀成本。用戶(hù)必須耗費(fèi)很大的精力才可以獲取信息。所以說(shuō)即使你的產(chǎn)品在其他方面做得很出色，易讀性的缺乏會(huì)致使你損失大量用戶(hù)。

　　適配

　　無(wú)論是設(shè)計(jì)一個(gè)app頁(yè)面還是網(wǎng)頁(yè)，我們要記住用戶(hù)會(huì)在不同的設(shè)備下使用我們的產(chǎn)品。在高分辨率屏幕下一些很酷炫的效果在低分辨率的屏幕下就會(huì)很“臟”，原有的效果無(wú)法體現(xiàn)出來(lái)。所以設(shè)計(jì)師應(yīng)該注意產(chǎn)品在不同屏幕下的適配問(wèn)題。當(dāng)然這個(gè)在設(shè)計(jì)的早期構(gòu)思過(guò)程中就應(yīng)該被考慮到，什么樣的版式與配色會(huì)很好的完成適配。比如：卡片式設(shè)計(jì)就可以對(duì)頁(yè)面內(nèi)容進(jìn)行分割重組來(lái)適應(yīng)不同的屏幕?？ㄆ旧磉€具有很強(qiáng)的伸縮性，可大可小。卡片式設(shè)計(jì)可以在不同大小的屏幕中仍保持視覺(jué)風(fēng)格的統(tǒng)一。

　　使用場(chǎng)景

　　在我們選擇適當(dāng)?shù)呐渖桨负捅尘邦?lèi)型時(shí)，需要考慮的另一個(gè)因素就是用戶(hù)的使用場(chǎng)景。例如在自然光的投射下，黑色背景會(huì)產(chǎn)生反射效果，特別是平板電腦和智能手機(jī)的屏幕，這會(huì)影響用戶(hù)對(duì)屏幕內(nèi)容的閱讀。從另一個(gè)方面說(shuō)，在光線不好的條件下，暗色背景的導(dǎo)航對(duì)用戶(hù)來(lái)說(shuō)更加合適。所以對(duì)于不同的使用場(chǎng)景，顏色組合，對(duì)比度和陰影的使用，設(shè)計(jì)師應(yīng)該足夠的考慮。

　　視覺(jué)層次

　　同一個(gè)頁(yè)面中內(nèi)容有著不同的優(yōu)先級(jí)順序，有的內(nèi)容很重要或者我們希望用戶(hù)首先看到，這類(lèi)優(yōu)先級(jí)高的內(nèi)容我們?cè)谠O(shè)計(jì)的時(shí)候就應(yīng)該著重表現(xiàn)。我們可以通過(guò)色彩搭配來(lái)建立頁(yè)面的視覺(jué)層次，凸顯用戶(hù)真正需要關(guān)注的信息。模糊效果是我們衡量頁(yè)面視覺(jué)層次的一項(xiàng)重要測(cè)試工具。

　　模糊效果可以幫助我們發(fā)現(xiàn)頁(yè)面的視覺(jué)重心，了解用戶(hù)的目光是否放在我們希望被關(guān)注的內(nèi)容上。方法其實(shí)很簡(jiǎn)單，我們只要將圖片導(dǎo)入進(jìn)Photoshop，并對(duì)圖片進(jìn)行高斯模糊處理，強(qiáng)度為5-10px。就像上圖一樣，模糊處理后頁(yè)面，模擬的就是用戶(hù)第一眼看到頁(yè)面的場(chǎng)景：用戶(hù)對(duì)頁(yè)面整體布局會(huì)有一種大致上的認(rèn)識(shí)，但是不會(huì)注意到具體細(xì)節(jié)。如果模糊狀態(tài)下的頁(yè)面我們找不到任何重點(diǎn)，那么就意味著我們要重新做出一些調(diào)整了。

　　配色步驟

　　明確定位產(chǎn)品的目標(biāo)

　　產(chǎn)品的存在意義就在于可以滿(mǎn)足用戶(hù)的特定需求。比如美食外賣(mài)類(lèi)app解決了用戶(hù)希望足不出戶(hù)又同時(shí)享有美食的需求；微信則解決了用戶(hù)在相隔萬(wàn)里卻又想親密溝通彼此的交流需求；微博滿(mǎn)足了平凡的用戶(hù)同明星在同一個(gè)平臺(tái)卻也可以享有明星般關(guān)注的社交心理需求。我們產(chǎn)品的核心價(jià)值就是為用戶(hù)解決特定的需求，也可以理解為產(chǎn)品的核心競(jìng)爭(zhēng)力就是滿(mǎn)足用戶(hù)的特定需求。因此在開(kāi)始進(jìn)行頁(yè)面設(shè)計(jì)前，應(yīng)該對(duì)我們的產(chǎn)品核心功能定位有一個(gè)足夠的認(rèn)識(shí)。

　　如果你的產(chǎn)品是一個(gè)博客類(lèi)的app或者電子書(shū)，淺色調(diào)的背景或許更加合適一些。因?yàn)檫@類(lèi)產(chǎn)品都是以文字為主導(dǎo)的，內(nèi)容的可讀性占據(jù)用戶(hù)體驗(yàn)的首要位置?？茖W(xué)家通過(guò)實(shí)驗(yàn)研究發(fā)現(xiàn)：深色文字在淺色背景上表現(xiàn)的更好。因?yàn)闇\色會(huì)增加頁(yè)面的空間感，不會(huì)顯得厚重?fù)頂D，用戶(hù)更加容易集中注意力到內(nèi)容中去。

　　反過(guò)來(lái)說(shuō)，如果你的產(chǎn)品需要在視覺(jué)上做到具有很強(qiáng)的吸引力，那么深色調(diào)背景更加適合。因?yàn)樯钌{(diào)背景雖然顯得很厚重，但是因?yàn)槠湮樟隧?yè)面中其他元素的光，更有利于其表現(xiàn)非文字形式的內(nèi)容。因?yàn)楫a(chǎn)品的內(nèi)容不僅僅只和文字相關(guān)，還有圖標(biāo)、圖像、符號(hào)和數(shù)字等都屬于內(nèi)容的范疇。此外，深色背景會(huì)給產(chǎn)品營(yíng)造出一種特有的神秘感和奢華感，可以從更加深的層次來(lái)反映內(nèi)容。

　　定義和分析目標(biāo)用戶(hù)群

　　知道你的用戶(hù)將會(huì)是哪些人，了解他們期望從你的產(chǎn)品中獲得什么，這會(huì)對(duì)你接下來(lái)產(chǎn)品的界面風(fēng)格定位有一個(gè)大方向上的指導(dǎo)。中老年用戶(hù)喜歡淺色背景的界面，因?yàn)閮?nèi)容更加的直觀，導(dǎo)航清晰。年輕人更傾向于深色背景的界面，因?yàn)槠涓拥淖匀慌c時(shí)尚。而青少年用戶(hù)對(duì)于歡快明亮界面是沒(méi)有任何抵抗力的，一些有趣的細(xì)節(jié)設(shè)置也可以很好的吸引低年齡段用戶(hù)的關(guān)注。

　　調(diào)研競(jìng)爭(zhēng)對(duì)手

　　市場(chǎng)上不是只有你這一款產(chǎn)品，你必須要面對(duì)許多同類(lèi)型產(chǎn)品的競(jìng)爭(zhēng)。所以我們要對(duì)市場(chǎng)上同類(lèi)型的產(chǎn)品進(jìn)行調(diào)研，通過(guò)調(diào)研我們可以知道哪些設(shè)計(jì)方案已經(jīng)被競(jìng)爭(zhēng)者所使用，我們應(yīng)該放棄。否則最壞的結(jié)果就是，等到產(chǎn)品已經(jīng)進(jìn)入了測(cè)試階段，即將上線，你才發(fā)現(xiàn)市場(chǎng)上已經(jīng)有了一個(gè)極其類(lèi)似的產(chǎn)品。所以說(shuō)對(duì)市場(chǎng)進(jìn)行調(diào)研在產(chǎn)品研發(fā)早期階段就可以放棄一些過(guò)時(shí)無(wú)用的設(shè)計(jì)方案，避免無(wú)用功。

　　產(chǎn)品測(cè)試

　　在產(chǎn)品測(cè)試階段，我們應(yīng)該在不同分辨率和尺寸的屏幕條件下對(duì)產(chǎn)品進(jìn)行測(cè)試，確保設(shè)計(jì)方案在不同設(shè)備下都可以有相同的用戶(hù)體驗(yàn)。

　　總結(jié)

　　當(dāng)然，拋除以上南京萬(wàn)和UI設(shè)計(jì)培訓(xùn)提到的部分，設(shè)計(jì)師還要做到具體情況具體分析。不同的時(shí)代、不同的技術(shù)支撐，我們的產(chǎn)品具有多種可能性。隨著科技的發(fā)展，智能語(yǔ)音技術(shù)的進(jìn)步，或許我們的設(shè)計(jì)還將考慮技術(shù)因素。想學(xué)UI設(shè)計(jì)的小伙伴們，心動(dòng)就趕快行動(dòng)吧！來(lái)萬(wàn)和開(kāi)始學(xué)習(xí)吧！