為什么會這樣？

 

菜心覺得還是思維問題，沒有一個屬于自己的系統(tǒng)性的做事方法！

 

這里介紹一下我個人做事的思考路徑，供大家參考。

 

當我拿到一個需求后，我會迅速把需求進行拆解，將其分為三類：

 

1.搬磚類

2.優(yōu)化類

3.創(chuàng)新類

 

什么意思？

 

下面結合最近剛做的社區(qū)模塊來依次介紹這三個類別的意思。

 

先來簡單說下項目背景：

騰訊動漫app有一個社區(qū)模塊，是推進粉絲、作者互動的地方，以前只有作者可以發(fā)帖，現在我們要對普通用戶也開放權限，當然，這是功能上面的訴求，對于視覺方面，經過設計側和產品側的討論，我們一致認為當前的頁面不夠活潑、好玩，與我們的目標用戶定位不符，比如目前的部分頁面如下：

 

 

當了解了項目背景與需求后，就像前文所說，我會立刻將整個需求拆分為三類：搬磚類、優(yōu)化類、創(chuàng)新類。

 

1.搬磚類：

意思是指不用思考，直接搬用控件，改改文案即可的內容，例如一個頁面的導航欄，只是文字有變化，直接套用控件即可，這一類的執(zhí)行是不需要思考的。

 

下圖就是做需求中搬運的部分控件：

 

2.優(yōu)化類

這一類屬于基礎性優(yōu)化，需要簡單的思考和基礎理論進行支撐，比如說大家耳熟能詳的親密性、統(tǒng)一性、視覺流等等，舉個例子：社區(qū)原版帖子的樣式是這樣的：

 

 

最大問題就是整體信息不夠聚焦，比較松散，但這只是現象，作為設計師，不能僅僅停留在現象層面，而是要根據現象進行解析，并最終根據理論給出解決方案。

 

比如我認為導致信息松散的原因有三個：

 

2.1 信息間距不講究

根絕親密性原則，內容內部間距一定要比內容與邊界的間距小，因為內容本身是一個整體，更加親密，如圖：

 

 

所以我會認為一般情況下，間距1會大于間距2，并且盡量讓間距1和2都分別保持一樣的大小，這樣會讓整體間距更加統(tǒng)一。

 

有了這樣的理論之后，我們會發(fā)現原版的頁面間距其實是有很大問題的：

 

 

首先違反親密性原則，紅色間距沒有大于藍色間距，其次間距的種類過多并且沒有規(guī)律。

 

2.2.空間利用不合理

看下圖我們很容易發(fā)現，紅色和藍色區(qū)域都很空曠：

 

 

那何不把兩部分內容重新整合，比如把時間和昵稱放在一起，點贊評論和標簽放在一起，這樣就可以節(jié)省一行空間，移動端寸土寸金?。?/p>

 

2.3.圖標按鈕不精致

最后就是精致度的問題了，比如點贊評論的圖標、關注的按鈕，都可以優(yōu)化。

 

在以上三點理論的支撐下，優(yōu)化的結果取下：

 

 

以上就是基礎優(yōu)化的一個例子，是設計師必須要掌握的。

 

當搬磚類與優(yōu)化類的內容做完之后，其實基本框架內容已經完成，如果你是面對非常趕的項目，這時已經可以將視覺稿輸出給開發(fā)，并與你后面的創(chuàng)新類設計同步進行，這也是我將需求分層執(zhí)行的主要原因之一。

 

3.創(chuàng)新類

這一類是體現設計師能力的關鍵，因為前面兩類，大部分設計師都可以做到，如果想給自己的價值形成壁壘，就必須要做一些獨特的東西。

 

當然，在做之前還是要先理清思路，其實在做創(chuàng)新類設計執(zhí)行之前無非就是做好兩件事：提煉主題與挖掘觸點。

 

3.1  提煉主題

還是以這次社區(qū)改版來舉例，改版背景簡單來說就是讓社區(qū)的用戶活躍起來，讓社區(qū)看起來更加熱鬧、有趣。

 

接下來我們要做的事情就是：

 

 

于是我通過剛才所述背景提煉出創(chuàng)意類主題：“讓社區(qū)動起來！”

在這樣的主題下，還可以發(fā)揮自己的技能小優(yōu)勢——動效。（雖然我不是專業(yè)的動效設計師，但通過項目來自我成長這項技能也是一件不錯的事情）
 

 

3.2  挖掘觸點

有了主題之后，我們就需要去挖掘可以發(fā)揮創(chuàng)意的觸點了，最開始可能找的不全或者不準，沒關系，在執(zhí)行的過程可以調整修改。

最終我本次改版發(fā)揮創(chuàng)意的主要觸點有以下幾個地方：

 

 

這里挑幾個主要的給大家展示一下：

 

3.2.1  個人名片背景墻

 

頁面如下：
 

 

 

這里頂部的卡片后面有個背景墻，目前不開放用戶自定義，官方會提供一些模版，所以這里是一個發(fā)揮空間很大的觸點。

我將模版類型分為三類：

 

 

其中第一類就是呼應我們主題的——“讓社區(qū)動起來”。這里也有一些小的創(chuàng)意細節(jié)，用自家的吉祥物形象就不多說了，這是保持品牌性的一個方法，另外一個就是，形象的微動效會與頭像產生一些關聯，比如我們的黑子親親頭像：

 

我們的黑子看了美女頭像害羞了：

 

以上就是第一個創(chuàng)意觸點——個人名片背景墻。

 

3.2.1  彈框彩蛋頁

這個彈框的背景如下：當你的帖子被贊數到達500個以上，系統(tǒng)就會出現一個提示，告訴你“你很屌，你的帖子收到了萬人崇拜”。

作為一個彩蛋頁面，可以從兩個方面出發(fā)，要么給福利、要么畫面有趣讓用戶開心一下，毋庸置疑我們走的是第二個路線，這對設計師就有點考驗了，因為很容易做不好就變成類似一個廣告彈框的東西。

 

最后通過無數次的修改得到了下面這樣一個頁面：

 

 

如果大家有興趣，之后可以單獨寫個關于這個動效創(chuàng)意和執(zhí)行的過程，本期由于篇幅原因就不過多闡述了。

除了上面這些還有很多創(chuàng)意點動效，比如神評論的出現方式：
 

 

 

發(fā)帖入口的動效：

 

 

 

等等吧。

 

當然，我們的很多動效都是只動一次的，這樣既可以保證趣味性，又不會過多的去打擾用戶。

 

總結

最后看一下社區(qū)主要頁面的總預覽圖：

 

 

當一個看起來很大很難的需求給到我們的時候，不用害怕，只要有條理的拆解分析，就一定可以把它做好，或許中間可能會遇到不同的困難，但團隊或身邊那么多前輩，多問多探討嘛，一點點的答案就出了，哈哈哈！

 

以上就是我個人對需求拆解的一點方法經驗，希望可以對大家有所啟發(fā)。

 

部分素材取自團隊畫手veles（p哥）

 

 

作者：菜心