為什么會(huì)這樣？
菜心覺(jué)得還是思維問(wèn)題，沒(méi)有一個(gè)屬于自己的系統(tǒng)性的做事方法！
這里介紹一下我個(gè)人做事的思考路徑，供大家參考。
當(dāng)我拿到一個(gè)需求后，我會(huì)迅速把需求進(jìn)行拆解，將其分為三類(lèi)：
1.搬磚類(lèi)
2.優(yōu)化類(lèi)
3.創(chuàng)新類(lèi)
什么意思？
下面結(jié)合最近剛做的社區(qū)模塊來(lái)依次介紹這三個(gè)類(lèi)別的意思。
先來(lái)簡(jiǎn)單說(shuō)下項(xiàng)目背景：
騰訊動(dòng)漫app有一個(gè)社區(qū)模塊，是推進(jìn)粉絲、作者互動(dòng)的地方，以前只有作者可以發(fā)帖，現(xiàn)在我們要對(duì)普通用戶也開(kāi)放權(quán)限，當(dāng)然，這是功能上面的訴求，對(duì)于視覺(jué)方面，經(jīng)過(guò)設(shè)計(jì)側(cè)和產(chǎn)品側(cè)的討論，我們一致認(rèn)為當(dāng)前的頁(yè)面不夠活潑、好玩，與我們的目標(biāo)用戶定位不符，比如目前的部分頁(yè)面如下：
當(dāng)了解了項(xiàng)目背景與需求后，就像前文所說(shuō)，我會(huì)立刻將整個(gè)需求拆分為三類(lèi)：搬磚類(lèi)、優(yōu)化類(lèi)、創(chuàng)新類(lèi)。
1.搬磚類(lèi)：
意思是指不用思考，直接搬用控件，改改文案即可的內(nèi)容，例如一個(gè)頁(yè)面的導(dǎo)航欄，只是文字有變化，直接套用控件即可，這一類(lèi)的執(zhí)行是不需要思考的。
下圖就是做需求中搬運(yùn)的部分控件：
2.優(yōu)化類(lèi)
這一類(lèi)屬于基礎(chǔ)性優(yōu)化，需要簡(jiǎn)單的思考和基礎(chǔ)理論進(jìn)行支撐，比如說(shuō)大家耳熟能詳?shù)挠H密性、統(tǒng)一性、視覺(jué)流等等，舉個(gè)例子：社區(qū)原版帖子的樣式是這樣的：
最大問(wèn)題就是整體信息不夠聚焦，比較松散，但這只是現(xiàn)象，作為設(shè)計(jì)師，不能僅僅停留在現(xiàn)象層面，而是要根據(jù)現(xiàn)象進(jìn)行解析，并最終根據(jù)理論給出解決方案。
比如我認(rèn)為導(dǎo)致信息松散的原因有三個(gè)：
2.1 信息間距不講究
根絕親密性原則，內(nèi)容內(nèi)部間距一定要比內(nèi)容與邊界的間距小，因?yàn)閮?nèi)容本身是一個(gè)整體，更加親密，如圖：
所以我會(huì)認(rèn)為一般情況下，間距1會(huì)大于間距2，并且盡量讓間距1和2都分別保持一樣的大小，這樣會(huì)讓整體間距更加統(tǒng)一。
有了這樣的理論之后，我們會(huì)發(fā)現(xiàn)原版的頁(yè)面間距其實(shí)是有很大問(wèn)題的：
首先違反親密性原則，紅色間距沒(méi)有大于藍(lán)色間距，其次間距的種類(lèi)過(guò)多并且沒(méi)有規(guī)律。
2.2.空間利用不合理
看下圖我們很容易發(fā)現(xiàn)，紅色和藍(lán)色區(qū)域都很空曠：
那何不把兩部分內(nèi)容重新整合，比如把時(shí)間和昵稱放在一起，點(diǎn)贊評(píng)論和標(biāo)簽放在一起，這樣就可以節(jié)省一行空間，移動(dòng)端寸土寸金??！
2.3.圖標(biāo)按鈕不精致
最后就是精致度的問(wèn)題了，比如點(diǎn)贊評(píng)論的圖標(biāo)、關(guān)注的按鈕，都可以優(yōu)化。
在以上三點(diǎn)理論的支撐下，優(yōu)化的結(jié)果取下：
以上就是基礎(chǔ)優(yōu)化的一個(gè)例子，是設(shè)計(jì)師必須要掌握的。
當(dāng)搬磚類(lèi)與優(yōu)化類(lèi)的內(nèi)容做完之后，其實(shí)基本框架內(nèi)容已經(jīng)完成，如果你是面對(duì)非常趕的項(xiàng)目，這時(shí)已經(jīng)可以將視覺(jué)稿輸出給開(kāi)發(fā)，并與你后面的創(chuàng)新類(lèi)設(shè)計(jì)同步進(jìn)行，這也是我將需求分層執(zhí)行的主要原因之一。
3.創(chuàng)新類(lèi)
這一類(lèi)是體現(xiàn)設(shè)計(jì)師能力的關(guān)鍵，因?yàn)榍懊鎯深?lèi)，大部分設(shè)計(jì)師都可以做到，如果想給自己的價(jià)值形成壁壘，就必須要做一些獨(dú)特的東西。
當(dāng)然，在做之前還是要先理清思路，其實(shí)在做創(chuàng)新類(lèi)設(shè)計(jì)執(zhí)行之前無(wú)非就是做好兩件事：提煉主題與挖掘觸點(diǎn)。
3.1 提煉主題
還是以這次社區(qū)改版來(lái)舉例，改版背景簡(jiǎn)單來(lái)說(shuō)就是讓社區(qū)的用戶活躍起來(lái)，讓社區(qū)看起來(lái)更加熱鬧、有趣。
接下來(lái)我們要做的事情就是：
于是我通過(guò)剛才所述背景提煉出創(chuàng)意類(lèi)主題：“讓社區(qū)動(dòng)起來(lái)！”
在這樣的主題下，還可以發(fā)揮自己的技能小優(yōu)勢(shì)——動(dòng)效。（雖然我不是專(zhuān)業(yè)的動(dòng)效設(shè)計(jì)師，但通過(guò)項(xiàng)目來(lái)自我成長(zhǎng)這項(xiàng)技能也是一件不錯(cuò)的事情）
3.2 挖掘觸點(diǎn)
有了主題之后，我們就需要去挖掘可以發(fā)揮創(chuàng)意的觸點(diǎn)了，最開(kāi)始可能找的不全或者不準(zhǔn)，沒(méi)關(guān)系，在執(zhí)行的過(guò)程可以調(diào)整修改。
最終我本次改版發(fā)揮創(chuàng)意的主要觸點(diǎn)有以下幾個(gè)地方：
這里挑幾個(gè)主要的給大家展示一下：
3.2.1 個(gè)人名片背景墻
頁(yè)面如下：
這里頂部的卡片后面有個(gè)背景墻，目前不開(kāi)放用戶自定義，官方會(huì)提供一些模版，所以這里是一個(gè)發(fā)揮空間很大的觸點(diǎn)。
我將模版類(lèi)型分為三類(lèi)：
其中第一類(lèi)就是呼應(yīng)我們主題的——“讓社區(qū)動(dòng)起來(lái)”。這里也有一些小的創(chuàng)意細(xì)節(jié)，用自家的吉祥物形象就不多說(shuō)了，這是保持品牌性的一個(gè)方法，另外一個(gè)就是，形象的微動(dòng)效會(huì)與頭像產(chǎn)生一些關(guān)聯(lián)，比如我們的黑子親親頭像：
我們的黑子看了美女頭像害羞了：
以上就是第一個(gè)創(chuàng)意觸點(diǎn)——個(gè)人名片背景墻。
3.2.1 彈框彩蛋頁(yè)
這個(gè)彈框的背景如下：當(dāng)你的帖子被贊數(shù)到達(dá)500個(gè)以上，系統(tǒng)就會(huì)出現(xiàn)一個(gè)提示，告訴你“你很屌，你的帖子收到了萬(wàn)人崇拜”。
作為一個(gè)彩蛋頁(yè)面，可以從兩個(gè)方面出發(fā)，要么給福利、要么畫(huà)面有趣讓用戶開(kāi)心一下，毋庸置疑我們走的是第二個(gè)路線，這對(duì)設(shè)計(jì)師就有點(diǎn)考驗(yàn)了，因?yàn)楹苋菀鬃霾缓镁妥兂深?lèi)似一個(gè)廣告彈框的東西。
最后通過(guò)無(wú)數(shù)次的修改得到了下面這樣一個(gè)頁(yè)面：
如果大家有興趣，之后可以單獨(dú)寫(xiě)個(gè)關(guān)于這個(gè)動(dòng)效創(chuàng)意和執(zhí)行的過(guò)程，本期由于篇幅原因就不過(guò)多闡述了。
除了上面這些還有很多創(chuàng)意點(diǎn)動(dòng)效，比如神評(píng)論的出現(xiàn)方式：
發(fā)帖入口的動(dòng)效：
等等吧。
當(dāng)然，我們的很多動(dòng)效都是只動(dòng)一次的，這樣既可以保證趣味性，又不會(huì)過(guò)多的去打擾用戶。
總結(jié)
最后看一下社區(qū)主要頁(yè)面的總預(yù)覽圖：
當(dāng)一個(gè)看起來(lái)很大很難的需求給到我們的時(shí)候，不用害怕，只要有條理的拆解分析，就一定可以把它做好，或許中間可能會(huì)遇到不同的困難，但團(tuán)隊(duì)或身邊那么多前輩，多問(wèn)多探討嘛，一點(diǎn)點(diǎn)的答案就出了，哈哈哈！
以上就是我個(gè)人對(duì)需求拆解的一點(diǎn)方法經(jīng)驗(yàn)，希望可以對(duì)大家有所啟發(fā)。
部分素材取自團(tuán)隊(duì)畫(huà)手veles（p哥）
作者：菜心
