設計師需要盡可能早且有效的利用產品定位和產品生命周期，去進行設計目標推導與對應的策略定制。那么具體的0-1設計方案如何思考？有哪些要點值得出現在作品集里？

一、配色/圖標什么的是基礎嗎？

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

半年前面字節的時候，面試官問了我有關配色的定義，細節到為什么是這個色值。當時十分震驚于這么細節的問題，之后我就想起了之前有位朋友給我send過一份有關支付寶“藍”的定義pdf，洋洋灑灑幾十頁就是為了解釋他們為啥用這個有點臟的藍色#108ee9當主色。

所以其實APP的配色/圖標與主品牌是一脈相承的，它是品牌的延續與象征。它以最直觀的態度傳達給用戶，這個產品以及品牌的調性，并以此建立最強有力的視覺識別性。所以我覺得它是可以有條件的展示在我們設計方案里的，但一定注意它的篇幅和表達的方式，維度在品牌傳達這一層就對了。

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

1. 在品牌主視覺配色基礎上的適配

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

另外可以使用透明度進行色彩分階段，一般從0-100%分為10階就足夠我們日常界面設計使用了。

2. 0-1定義APP配色

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

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

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

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

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

在之前的文章中有寫過，匹配產品定位的界面框架一旦輸出，對整個APP之后的迭代與功能設計都有很直接的影響。定義整體的UX框架方案，是實踐設計目標與策略的過程，基本圍繞著這3個出發點：

1. 匹配產品定位；
2. 滿足業務拓展性；
3. 符合舒適度美學 。

1. 定義整體框架

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

舉個栗子，就是在定義平臺框架的時候要考慮這個框架與容器是不是同時適用于底下的子業務線，同時當這個框架到了H5、小程序、PC的時候需要做哪些適配調整，是否都可以很好的進行兼容適配。

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

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

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

2. 具體容器解析

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

（1）“端上固定”模塊：

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

（2）“運營配置”模塊：

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

我們可以這樣來區分“運營配置”模塊類型。

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

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

在0-1的設計方案中，更推薦大家展示“運營配置”模塊的內容與解析，因為0-1是個以拉新為主的階段，運營顯得尤為重要，所以我們的設計需要側重考慮整體的運營效率與轉化。

三、如何展示亮點設計？

在我們概述完大部分的整體思考路徑與設計方案后，我們需要由面到點，從全局提煉細節，突出自己的設計方案亮點。而如何提煉這個亮點呢？是挑一個我設計的最好看的界面呢？還是直接放最復雜的那個流程？以下是推薦選擇的亮點設計：

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

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

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

那些你在完成踐行設計策略完成設計目標時獲得的數據指標要提前預知，養成習慣之后，你就可以快速輕松的嗅到哪里有可以做A/B test、進行埋點數據比對的地方了。

2. 影響上中下游環節的設計case

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

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

四、規范與組件庫的定義真的備受關注？

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

篇幅有限，下一節，我們把視覺規范和組件庫這個大工程單獨抽出來聊聊，剛好分享大家一個利用sketch library進行高效的團隊組件庫同步的神方法。

如果還有需要更基礎更流程性一些的0-1實踐指導文，可以參考我之前寫的那篇大全：UX項目0到1的正確開啟方式。

本文由 @NaNa 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議