配色/圖標(biāo)什么的是基礎(chǔ)嗎？

之前一直沒(méi)有太多關(guān)注過(guò)如何定義一個(gè) APP 的配色，或者如何畫(huà)一個(gè)漂亮的 icon。曾經(jīng)的上級(jí)指示都是這些基礎(chǔ)對(duì)商業(yè)的不可量化。于是我在思考一個(gè)問(wèn)題，就是沒(méi)有直觀商業(yè)價(jià)值的設(shè)計(jì)要素都失去了意義變成了所謂基礎(chǔ)的事情嗎？

半年前面試字節(jié)的時(shí)候，面試官問(wèn)了我有關(guān)配色的定義，細(xì)節(jié)到為什么是這個(gè)色值。當(dāng)時(shí)十分震驚于這么細(xì)節(jié)的問(wèn)題，之后我就想起了之前有位朋友給我發(fā)送過(guò)一份有關(guān)支付寶「藍(lán)」的定義 pdf，洋洋灑灑幾十頁(yè)就是為了解釋他們?yōu)樯队眠@個(gè)有點(diǎn)臟的藍(lán)色#108ee9 當(dāng)主色。

所以其實(shí) APP 的配色/圖標(biāo)與主品牌是一脈相承的，它是品牌的延續(xù)與象征。它以最直觀的態(tài)度傳達(dá)給用戶，這個(gè)產(chǎn)品以及品牌的調(diào)性，并以此建立最強(qiáng)有力的視覺(jué)識(shí)別性。所以我覺(jué)得它是可以有條件地展示在我們?cè)O(shè)計(jì)方案里的，但一定注意它的篇幅和表達(dá)的方式，維度在品牌傳達(dá)這一層就對(duì)了。

至于如何展示和定義你的 APP 配色，一般 2 類情況。

1. 在品牌主視覺(jué)配色基礎(chǔ)上的適配

這種情況一般適用品牌主視覺(jué)方案已經(jīng)設(shè)計(jì)完畢，APP 端作為延續(xù)。這個(gè)時(shí)候一般注意配色從 CMYK 模式到 RGB 的轉(zhuǎn)換，所以作為 APP 的配色，具體色值上可以稍作調(diào)整，使它更適配于 LED 屏的用戶感知與舒適度。

另外可以使用透明度進(jìn)行色彩分階段，一般從 0-100% 分為 10 階就足夠我們?nèi)粘＝缑嬖O(shè)計(jì)使用了。

2. 0-1定義APP配色

這種情況下我們從感性和理性 2 個(gè)角度去定義顏色。

從感性的角度分析：情緒板應(yīng)該大家都熟知的了，根據(jù)不同的行業(yè)和用戶定位得到相應(yīng)的關(guān)鍵詞。對(duì)應(yīng)不同的關(guān)鍵詞再搜集對(duì)應(yīng)的圖片，從圖片和自然感知中提煉出主色。

從理性的角度分析：我們把色彩分為對(duì)比色、近似色、復(fù)合色、單一色、三角對(duì)立色和漸變色六種。根據(jù)產(chǎn)品的類型和定位，我們決定使用什么樣的配色。比如一個(gè)年輕大學(xué)生專用的社交型 APP，我們可能就傾向更多地使用對(duì)比色這樣的撞色得到更多潮流與青春的味道。

至于圖標(biāo)的話我就更不用多說(shuō)了，大家肯定都記得那些非?；A(chǔ)的繪制圖標(biāo)的法則。個(gè)人認(rèn)為圖標(biāo)也不太需要放一個(gè)單獨(dú)的篇幅去展示，除非它有一些新奇有趣的亮點(diǎn)。

界面框架，只是框架而已嗎？

在之前的文章中有寫(xiě)過(guò)，匹配產(chǎn)品定位的界面框架一旦輸出，對(duì)整個(gè) APP 之后的迭代與功能設(shè)計(jì)都有很直接的影響。定義整體的UX 框架方案，是實(shí)踐設(shè)計(jì)目標(biāo)與策略的過(guò)程，基本圍繞著這 3 個(gè)出發(fā)點(diǎn)：匹配產(chǎn)品定位、滿足業(yè)務(wù)拓展性、符合舒適度美學(xué) 。

1. 定義整體框架

首先我們從宏觀角度分析，一方面產(chǎn)品的業(yè)務(wù)線處于什么情況，是相對(duì)獨(dú)立的業(yè)務(wù)主線產(chǎn)品（舉例：拉勾）？還是平臺(tái)級(jí)產(chǎn)品（里面包含了許多垂直的業(yè)務(wù)線，舉例淘寶）？如果是平臺(tái)級(jí)產(chǎn)品在整體框架設(shè)計(jì)時(shí)就需要考慮跨端跨業(yè)務(wù)的框架拓展型。

舉個(gè)例子，就是在定義平臺(tái)框架的時(shí)候要考慮這個(gè)框架與容器是不是同時(shí)適用于底下的子業(yè)務(wù)線，同時(shí)當(dāng)這個(gè)框架到了 H5、小程序、PC 的時(shí)候需要做哪些適配調(diào)整，是否都可以很好地進(jìn)行兼容適配。

另一方面，整體框架設(shè)計(jì)的類型是否符合設(shè)計(jì)目標(biāo)。舉個(gè)例子，無(wú)框式超大留白的框架設(shè)計(jì)雖然看上去很厲害，但在大部分商業(yè)產(chǎn)品中它的實(shí)用性卻非常低的。假設(shè)說(shuō)我們今天需要做一個(gè)電商類的 app，設(shè)計(jì)目標(biāo)是希望能夠提升業(yè)務(wù)轉(zhuǎn)化以及購(gòu)買(mǎi)效率，那么展示效率與功能分區(qū)就顯得尤為重要，它就更適合一個(gè)相對(duì)緊湊的卡片式為主的框架設(shè)計(jì)。

其次從微觀的角度來(lái)說(shuō)，遍地就都是細(xì)節(jié)了。舒適度美學(xué)這一說(shuō)，其實(shí)難免有些抽象，我們把它轉(zhuǎn)為相對(duì)合理一些的落地原理就會(huì)清晰很多，像大家熟知的間距 4 倍數(shù)原理、對(duì)齊原則等等。但是這些微觀的內(nèi)容不建議大家放到方案展示里，因?yàn)樗](méi)有針對(duì)單個(gè)方案的特殊性，更像一種大眾共識(shí)。

△ 多說(shuō)無(wú)益，直接上最終的效果圖，方便大家參考

2. 具體容器解析

我們特地把單獨(dú)的容器部分拿出來(lái)解析，是因?yàn)樽远x容器是展示核心業(yè)務(wù)最主要思考呈現(xiàn)，同時(shí)還可以配合運(yùn)營(yíng)做很多提升業(yè)務(wù)效率的配置。在做具體設(shè)計(jì)的時(shí)候，我們需要區(qū)分「端上固定」模塊和「運(yùn)營(yíng)配置」模塊之間的差別。

「端上固定」模塊

顧名思義就是開(kāi)發(fā)端上需要寫(xiě)死的模塊。寫(xiě)死的模塊意味著，無(wú)論一個(gè)配圖還是一句文案，也只有開(kāi)發(fā)童鞋修改后通過(guò)發(fā)版才能實(shí)現(xiàn)內(nèi)容變更。一般適用于相對(duì)固定的產(chǎn)品功能以及 UGC 用戶生產(chǎn)內(nèi)容。比如：拉勾上傳簡(jiǎn)歷功能、斗魚(yú)的直播間列表。

「運(yùn)營(yíng)配置」模塊

相對(duì)「端上固定」，「運(yùn)營(yíng)配置」就不需要跟著發(fā)版，可以隨時(shí)后臺(tái)上傳替換模塊內(nèi)的內(nèi)容，適用于需要 PGC 生產(chǎn)的內(nèi)容。說(shuō)到這里很多童鞋可能馬上就聯(lián)想到 banner，彈窗的運(yùn)營(yíng)位了，但其實(shí)除了這些之外還有很多容器模塊是需要靈活配置為「運(yùn)營(yíng)配置」模塊才能更有效地提升運(yùn)營(yíng)業(yè)務(wù)價(jià)值。

我們可以這樣來(lái)區(qū)分「運(yùn)營(yíng)配置」模塊類型。

一種是純運(yùn)營(yíng)配置模塊，即設(shè)計(jì)與開(kāi)發(fā)輸出框架、定好配置字段限制之后，運(yùn)營(yíng)可以獨(dú)立完成后臺(tái)配置的。比如：資訊 app 0-1 前期的資訊列表內(nèi)容。

另一種是運(yùn)營(yíng)設(shè)計(jì)配合模塊，即需要設(shè)計(jì)配合運(yùn)營(yíng)輸出一定的設(shè)計(jì)圖才可以進(jìn)行后臺(tái)配置的。比如：常見(jiàn)的 banner、彈窗、熱門(mén)推薦專題等。

在 0-1 的設(shè)計(jì)方案中，更推薦大家展示「運(yùn)營(yíng)配置」模塊的內(nèi)容與解析，因?yàn)?0-1 是個(gè)以拉新為主的階段，運(yùn)營(yíng)顯得尤為重要，所以我們的設(shè)計(jì)需要側(cè)重考慮整體的運(yùn)營(yíng)效率與轉(zhuǎn)化。

如何展示亮點(diǎn)設(shè)計(jì)？

在我們概述完大部分的整體思考路徑與設(shè)計(jì)方案后，我們需要由面到點(diǎn)，從全局提煉細(xì)節(jié)，突出自己的設(shè)計(jì)方案亮點(diǎn)。

而如何提煉這個(gè)亮點(diǎn)呢？是挑一個(gè)我設(shè)計(jì)的最好看的界面呢？還是直接放最復(fù)雜的那個(gè)流程？以下是推薦選擇的亮點(diǎn)設(shè)計(jì)：

1. 完成理論實(shí)踐，并可以量化價(jià)值的設(shè)計(jì)case

大家應(yīng)該都了解，一些和設(shè)計(jì)息息相關(guān)的數(shù)據(jù) UV/PV/GMV/ 相關(guān)業(yè)務(wù)指標(biāo)等，以及一系列在實(shí)踐中很好應(yīng)用來(lái)解釋設(shè)計(jì)方案的理論支撐比如 5W1H、GSM 與五度分析……這些數(shù)據(jù)和理論是支撐我們?cè)O(shè)計(jì)更飽滿更有說(shuō)服力的重要支點(diǎn)。

雖然在 0-1 的項(xiàng)目里，我們基本不太用得上優(yōu)化數(shù)據(jù)比對(duì)（因?yàn)楫a(chǎn)品初期用戶數(shù)量少，產(chǎn)品體驗(yàn)路徑也是一直處于不斷試錯(cuò)階段），但是我們還是可以借用上文所述的一些方法論或者 A/B test 來(lái)完成我們的方案思考過(guò)程展示。

那些你在完成踐行設(shè)計(jì)策略完成設(shè)計(jì)目標(biāo)時(shí)獲得的數(shù)據(jù)指標(biāo)要提前預(yù)知，養(yǎng)成習(xí)慣之后，你就可以快速輕松地察覺(jué)到哪里有可以做 A/B test、進(jìn)行埋點(diǎn)數(shù)據(jù)比對(duì)的地方了。

2. 影響上中下游環(huán)節(jié)的設(shè)計(jì)case

除了對(duì)業(yè)務(wù)提升價(jià)值的項(xiàng)目外，我們有時(shí)候也需要注意對(duì)品牌設(shè)計(jì)、產(chǎn)品、運(yùn)營(yíng)、技術(shù)等上中下游造成影響力的設(shè)計(jì)項(xiàng)目。通常這類設(shè)計(jì)大部分也都是設(shè)計(jì)自驅(qū)發(fā)起的，能起到提升各方人效和業(yè)務(wù)效率的作用。

舉例的話，我能馬上聯(lián)想到的就是多方協(xié)作的大型線上組件庫(kù)，可以參考阿里的 Ant design、滴滴的魔方，在之后的版本拓展中甚至可以延展成功能更加強(qiáng)大的多方協(xié)作 UX 設(shè)計(jì)資源中心。

規(guī)范與組件庫(kù)的定義真的備受關(guān)注？

感覺(jué)近期面過(guò)的 80% 的公司都對(duì)組件庫(kù)的定義非常關(guān)注，所以我們要做的不僅僅只是放一個(gè)視覺(jué)規(guī)范或者組件庫(kù)的全景圖，而需要對(duì)組件庫(kù)進(jìn)行拆解。

文章來(lái)源：優(yōu)設(shè)(土撥鼠)   作者:Nana的設(shè)計(jì)錦囊



分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)