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

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

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

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

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

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

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

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

2. 0-1定義APP配色

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

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

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

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

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

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

1. 定義整體框架

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

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

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

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

△ 多說無益，直接上最終的效果圖，方便大家參考

2. 具體容器解析

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

「端上固定」模塊

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

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

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

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

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

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

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

如何展示亮點設(shè)計？

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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