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