2022-3-8 純純
之前一直沒有太多關注過如何定義一個 APP 的配色，或者如何畫一個漂亮的 icon。曾經的上級指示都是這些基礎對商業(yè)的不可量化。于是我在思考一個問題，就是沒有直觀商業(yè)價值的設計要素都失去了意義變成了所謂基礎的事情嗎？
半年前面試字節(jié)的時候，面試官問了我有關配色的定義，細節(jié)到為什么是這個色值。當時十分震驚于這么細節(jié)的問題，之后我就想起了之前有位朋友給我發(fā)送過一份有關支付寶「藍」的定義 pdf，洋洋灑灑幾十頁就是為了解釋他們?yōu)樯队眠@個有點臟的藍色#108ee9 當主色。
所以其實 APP 的配色/圖標與主品牌是一脈相承的，它是品牌的延續(xù)與象征。它以最直觀的態(tài)度傳達給用戶，這個產品以及品牌的調性，并以此建立最強有力的視覺識別性。所以我覺得它是可以有條件地展示在我們設計方案里的，但一定注意它的篇幅和表達的方式，維度在品牌傳達這一層就對了。
至于如何展示和定義你的 APP 配色，一般 2 類情況。
1. 在品牌主視覺配色基礎上的適配
這種情況一般適用品牌主視覺方案已經設計完畢，APP 端作為延續(xù)。這個時候一般注意配色從 CMYK 模式到 RGB 的轉換，所以作為 APP 的配色，具體色值上可以稍作調整，使它更適配于 LED 屏的用戶感知與舒適度。
另外可以使用透明度進行色彩分階段，一般從 0-100% 分為 10 階就足夠我們日常界面設計使用了。
2. 0-1定義APP配色
這種情況下我們從感性和理性 2 個角度去定義顏色。
從感性的角度分析：情緒板應該大家都熟知的了，根據不同的行業(yè)和用戶定位得到相應的關鍵詞。對應不同的關鍵詞再搜集對應的圖片，從圖片和自然感知中提煉出主色。
從理性的角度分析：我們把色彩分為對比色、近似色、復合色、單一色、三角對立色和漸變色六種。根據產品的類型和定位，我們決定使用什么樣的配色。比如一個年輕大學生專用的社交型 APP，我們可能就傾向更多地使用對比色這樣的撞色得到更多潮流與青春的味道。
至于圖標的話我就更不用多說了，大家肯定都記得那些非常基礎的繪制圖標的法則。個人認為圖標也不太需要放一個單獨的篇幅去展示，除非它有一些新奇有趣的亮點。
在之前的文章中有寫過，匹配產品定位的界面框架一旦輸出，對整個 APP 之后的迭代與功能設計都有很直接的影響。定義整體的UX 框架方案，是實踐設計目標與策略的過程，基本圍繞著這 3 個出發(fā)點：匹配產品定位、滿足業(yè)務拓展性、符合舒適度美學 。
首先我們從宏觀角度分析，一方面產品的業(yè)務線處于什么情況，是相對獨立的業(yè)務主線產品（舉例：拉勾）？還是平臺級產品（里面包含了許多垂直的業(yè)務線，舉例淘寶）？如果是平臺級產品在整體框架設計時就需要考慮跨端跨業(yè)務的框架拓展型。
舉個例子，就是在定義平臺框架的時候要考慮這個框架與容器是不是同時適用于底下的子業(yè)務線，同時當這個框架到了 H5、小程序、PC 的時候需要做哪些適配調整，是否都可以很好地進行兼容適配。
另一方面，整體框架設計的類型是否符合設計目標。舉個例子，無框式超大留白的框架設計雖然看上去很厲害，但在大部分商業(yè)產品中它的實用性卻非常低的。假設說我們今天需要做一個電商類的 app，設計目標是希望能夠提升業(yè)務轉化以及購買效率，那么展示效率與功能分區(qū)就顯得尤為重要，它就更適合一個相對緊湊的卡片式為主的框架設計。
其次從微觀的角度來說，遍地就都是細節(jié)了。舒適度美學這一說，其實難免有些抽象，我們把它轉為相對合理一些的落地原理就會清晰很多，像大家熟知的間距 4 倍數原理、對齊原則等等。但是這些微觀的內容不建議大家放到方案展示里，因為它并沒有針對單個方案的特殊性，更像一種大眾共識。
△ 多說無益，直接上最終的效果圖，方便大家參考
我們特地把單獨的容器部分拿出來解析，是因為自定義容器是展示核心業(yè)務最主要思考呈現，同時還可以配合運營做很多提升業(yè)務效率的配置。在做具體設計的時候，我們需要區(qū)分「端上固定」模塊和「運營配置」模塊之間的差別。
「端上固定」模塊
顧名思義就是開發(fā)端上需要寫死的模塊。寫死的模塊意味著，無論一個配圖還是一句文案，也只有開發(fā)童鞋修改后通過發(fā)版才能實現內容變更。一般適用于相對固定的產品功能以及 UGC 用戶生產內容。比如：拉勾上傳簡歷功能、斗魚的直播間列表。
「運營配置」模塊
相對「端上固定」，「運營配置」就不需要跟著發(fā)版，可以隨時后臺上傳替換模塊內的內容，適用于需要 PGC 生產的內容。說到這里很多童鞋可能馬上就聯想到 banner，彈窗的運營位了，但其實除了這些之外還有很多容器模塊是需要靈活配置為「運營配置」模塊才能更有效地提升運營業(yè)務價值。
我們可以這樣來區(qū)分「運營配置」模塊類型。
一種是純運營配置模塊，即設計與開發(fā)輸出框架、定好配置字段限制之后，運營可以獨立完成后臺配置的。比如：資訊 app 0-1 前期的資訊列表內容。
另一種是運營設計配合模塊，即需要設計配合運營輸出一定的設計圖才可以進行后臺配置的。比如：常見的 banner、彈窗、熱門推薦專題等。
在 0-1 的設計方案中，更推薦大家展示「運營配置」模塊的內容與解析，因為 0-1 是個以拉新為主的階段，運營顯得尤為重要，所以我們的設計需要側重考慮整體的運營效率與轉化。
在我們概述完大部分的整體思考路徑與設計方案后，我們需要由面到點，從全局提煉細節(jié)，突出自己的設計方案亮點。
而如何提煉這個亮點呢？是挑一個我設計的最好看的界面呢？還是直接放最復雜的那個流程？以下是推薦選擇的亮點設計：
1. 完成理論實踐，并可以量化價值的設計case
大家應該都了解，一些和設計息息相關的數據 UV/PV/GMV/ 相關業(yè)務指標等，以及一系列在實踐中很好應用來解釋設計方案的理論支撐比如 5W1H、GSM 與五度分析……這些數據和理論是支撐我們設計更飽滿更有說服力的重要支點。
雖然在 0-1 的項目里，我們基本不太用得上優(yōu)化數據比對（因為產品初期用戶數量少，產品體驗路徑也是一直處于不斷試錯階段），但是我們還是可以借用上文所述的一些方法論或者 A/B test 來完成我們的方案思考過程展示。
那些你在完成踐行設計策略完成設計目標時獲得的數據指標要提前預知，養(yǎng)成習慣之后，你就可以快速輕松地察覺到哪里有可以做 A/B test、進行埋點數據比對的地方了。
2. 影響上中下游環(huán)節(jié)的設計case
除了對業(yè)務提升價值的項目外，我們有時候也需要注意對品牌設計、產品、運營、技術等上中下游造成影響力的設計項目。通常這類設計大部分也都是設計自驅發(fā)起的，能起到提升各方人效和業(yè)務效率的作用。
舉例的話，我能馬上聯想到的就是多方協(xié)作的大型線上組件庫，可以參考阿里的 Ant design、滴滴的魔方，在之后的版本拓展中甚至可以延展成功能更加強大的多方協(xié)作 UX 設計資源中心。
感覺近期面過的 80% 的公司都對組件庫的定義非常關注，所以我們要做的不僅僅只是放一個視覺規(guī)范或者組件庫的全景圖，而需要對組件庫進行拆解。
文章來源：優(yōu)設(土撥鼠) 作者:Nana的設計錦囊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務