設(shè)計(jì)師需要盡可能早且有效的利用產(chǎn)品定位和產(chǎn)品生命周期，去進(jìn)行設(shè)計(jì)目標(biāo)推導(dǎo)與對(duì)應(yīng)的策略定制。那么具體的0-1設(shè)計(jì)方案如何思考？有哪些要點(diǎn)值得出現(xiàn)在作品集里？

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

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

半年前面字節(jié)的時(shí)候，面試官問了我有關(guān)配色的定義，細(xì)節(jié)到為什么是這個(gè)色值。當(dāng)時(shí)十分震驚于這么細(xì)節(jié)的問題，之后我就想起了之前有位朋友給我send過一份有關(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)有力的視覺識(shí)別性。所以我覺得它是可以有條件的展示在我們?cè)O(shè)計(jì)方案里的，但一定注意它的篇幅和表達(dá)的方式，維度在品牌傳達(dá)這一層就對(duì)了。

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

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

這種情況一般適用品牌主視覺方案已經(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)。

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

在之前的文章中有寫過，匹配產(chǎn)品定位的界面框架一旦輸出，對(duì)整個(gè)APP之后的迭代與功能設(shè)計(jì)都有很直接的影響。定義整體的UX框架方案，是實(shí)踐設(shè)計(jì)目標(biāo)與策略的過程，基本圍繞著這3個(gè)出發(fā)點(diǎn)：

1. 匹配產(chǎn)品定位；
2. 滿足業(yè)務(wù)拓展性；
3. 符合舒適度美學(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)買效率，那么展示效率與功能分區(qū)就顯得尤為重要，它就更適合一個(gè)相對(duì)緊湊的卡片式為主的框架設(shè)計(jì)。

其次從微觀的角度來(lái)說(shuō)，遍地就都是細(xì)節(jié)了。舒適度美學(xué)這一說(shuō)，其實(shí)難免有些抽象，我們把它轉(zhuǎn)為相對(duì)合理一些的落地原理就會(huì)清晰很多，像大家熟知的間距4倍數(shù)原理、對(duì)齊原則等等。但是這些微觀的內(nèi)容不建議大家放到方案展示里，因?yàn)樗]有針對(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)配置”模塊之間的差別。

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

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

（2）“運(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ì)與開發(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)配置的。比如：常見的banner、彈窗、熱門推薦專題等。

在0-1的設(shè)計(jì)方案中，更推薦大家展示“運(yùn)營(yíng)配置”模塊的內(nèi)容與解析，因?yàn)?-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)…etc，以及一系列在實(shí)踐中很好應(yīng)用來(lái)解釋設(shè)計(jì)方案的理論支撐比如5W1H、GSM與五度分析…etc。這些數(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)完成我們的方案思考過程展示。

那些你在完成踐行設(shè)計(jì)策略完成設(shè)計(jì)目標(biāo)時(shí)獲得的數(shù)據(jù)指標(biāo)要提前預(yù)知，養(yǎng)成習(xí)慣之后，你就可以快速輕松的嗅到哪里有可以做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)注？

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

篇幅有限，下一節(jié)，我們把視覺規(guī)范和組件庫(kù)這個(gè)大工程單獨(dú)抽出來(lái)聊聊，剛好分享大家一個(gè)利用sketch library進(jìn)行高效的團(tuán)隊(duì)組件庫(kù)同步的神方法。

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

本文由 @NaNa 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議