網站改版分析：阿裡資訊站升級的項目總結

　　序：

　　2年前，剛入職阿裡還沒轉正就有幸參與了資訊改版項目，那可是我的產品處女秀，出演視覺設計師一角，當時拿到手的就已經是一份未上色的黑白稿以及一份飛機稿。不知道監制是誰，也不知道導演是誰，更不知道其他演員是誰，老板說交給我了，就糊裡糊塗的出演了。跌跌撞撞演出7.8個版本就拿去讓需求方選了，最後也是蠻順利的選了一版。然後再優化再改改，也在那一周每天熬到個11點，最後在約定時間之前，交給負責後期的前端同學，然後，然後就上線了。。。當時的感受是：原來產品設計就是這樣的啊。。上線之後，不盡人意，很多東西和我想象的還是有點距離。

　　2個月前，也滿了2周年，我似乎發現我與“2”這個數字非常有緣，回頭在看看，原來我從來都不曾離開社區。這次我又接到了資訊升級的任務，意料之中，經過2年的滾打，我早想改他了，礙於“沒有資源”，幸好行巅有眼開了金口，要求資訊要更專業更海量更權威!於是乎，我就又一次出演了資訊升級項目!這次的出演真是感觸頗深了，雖然仍然是出演視覺設計師一角，但是要讓最後的作品能接近完美的出現在眾人面前，光只做好自己的本職是完全不夠的，當然在這個過程當中，如果你也遇到了像小帥和狒狒這種出色的監制，也是可以省去非常多的時間，比如我可以不用花太多時間去糾結數據問題，打點問題，也不用想著如何去重復解釋這裡為什麼要這樣演的問題等等…盡管如此，也不代表我出了做好視覺，其他都不用管了，否則，視覺設計師就永遠都是美工了：不想做監制的演員都不是好導演!不想做PM的體驗設計師不是好產品經理!被復制了無數版本的名言用在很多地方都是很有效的。也為了更豐富自己的歷練和對項目的了解，很多事仍然要親力親為，盡管最後仍然有很多細小的問題暴露出來，但是回頭想想，如果什麼都不做，最後暴露出來的問題會更多，雖然沒有做到心目中的完美，但是至少離“完美”又近了一步。

　　項目總流程：

　　*黃點所點之處都是我在這個項目流程中參與的環節。

　　①體驗關鍵指標：這裡是項目前期小帥的專業方法論提及的5個維度，聽過分享的同學應該都知道H-E-A-R-T：

　　②六度分析：這裡提到的六度分析和人與人之間關系的六度關系不一樣，簡單先解釋一下這裡的六度分析是一種分布式、一體化、幫助使用者對問題進行系統化分析的思考方式。

　　這裡做簡單解釋，具體詳情請關注李龍的分享或者咨詢本人，聯系旺旺：lilong4174

　　項目前期小帥非常給力，取了資訊的數據進行分析並分享給PD，運營以及前端，為之後項目進行以及產品的規劃打了扎實的基礎。用戶調研這裡分了2部分，一部分是和小帥一起參與的對資訊資深用戶進行的訪談，另外一個部分對我針對專業人士(公司內部人員：老板，PD，運營，設計師，開發)進行的簡單訪問。這2部分人員的調研加起來就產生了之後的信息模塊推導而出的信息架構(交互稿)和最後情緒版分析產生的最終稿。那作為整個項目的主演視覺設計師，在這個項目總結中具體就說說對於情緒版分析到視覺稿的產出過程，後期前端跟進注意事項以及回顧項目最初需要考慮的問題三方面情況。好，文章過半，接下來才真走入重點…

　　一：情緒版分析到視覺稿的產出過程

　　情緒版：

　　關於情緒版的簡單步驟：體驗關鍵詞(來源於以上提及用戶調研的2部分)→關鍵詞衍生(物化，視覺以及心境的映射)→根據衍生關鍵詞搜索到的圖片→圖片色塊→生成情緒版(詳細可見資訊升級情緒版查看地址：nasAlibabaB2B項目組中文站UED#應用設計組#資訊升級(slide貌似需要翻牆了，就用咱們的服務器吧))

　　結合整個設計經驗來看：其實對於產品本身，尤其是視覺設計師，在要設計之前，設計師就應該在腦海中有一個成形的視覺幻影，而情緒版正是為了這種視覺幻影做的一個很好的論證的方法，也為了視覺評審的時候為說服老板和觀點可能和你不太一致的人找一個比較有效的理由。當然無法產生感覺的時候直接用情緒版也是一個非常有效的方法了。但是切記，沒有事情是絕對的!尤其是像我們這種所謂“喜歡暖色調的中國人”，或許設計一個藍色調或者冷色調的產品需要下定很大的決心以及能說服老板的氣場!而我雖然下定了很大的決心，可是深知氣場不夠強大，因此我也為自己留了一條後路。。。

　　競品分析：

　　在情緒版的最後面加了一個畫面，如下：

　　為了避免老板最後強行要用暖色調的版本，導致情緒版的論證方法部分失效…事實證明，這樣做並非不科學，因為老板的確提了一個坑爹的要求：“在做一版暖色調的吧。。。”“嗯，那好吧。。”最後的結局可想而知。資訊嘛，當然還是要遵循市場規律的，市場規律從何而來，競品分析!這絕對是能和情緒版一起稱作 “答辯雙雄”的證詞!競品分析可以是印證情緒版分析的最後一步，因此最後還是采用了冷色調的視覺版本，也總算讓我如釋重負呼了一口氣。。也總算沒有讓我的情緒版變成坑爹的方法論。很多人可能會在競品分析的時候不知道選擇哪些維度，其實可以根據你要設計的設計稿中去抽取，例如：主色調，圖片占比，是否有背景色，模塊是否有邊框，懸停色，大段落文字色等等，可以用於作為DPL的部分都可是是競品分析的關鍵要素。同理，部分提取要素即使是大部分競品所具有的，有時候老板就是希望某一點不一樣，這種情況也是會發生的，在不破壞整體效果太多的情況下，那就按老板說的去做些嘗試吧，而這種特殊情況有一定的風向，風險不在於是否會破壞視覺效果，而是和前端同學的合作時間點，進入下部分。

　　二：後期前端跟進注意事項

　　小插曲：第一部分的尾聲說到的，老板會對於某個產品有些特殊要求，比如在本次過程中遇到的，其他N多次確認都不算，最後已經確認為最終稿的某個月黑風高的晚上，旺旺一跳，老板說：其他看的都挺不錯，看了好久，字體顏色有點淺不夠聚焦，能否把#444改成#333，當即虎軀一震，脫口而出：最終稿已經確認了啊，進入前端了，在改不太好啊，老板說沒關系啊，改個色值很快的，於是我就只好硬著頭皮找前端改了，第二天，老板又覺得鏈接色有點問題，太灰了啊，要改鏈接色，當時心裡就嘀咕：尼瑪就不能一次性說完嘛，最終稿確認前怎麼都不說啊。。當然沒說出口，於是灰溜溜的找前端又想改啦，前端同學就不開心啦，就說你需求變更啊，幾次了啊，不干啊，找PD啊，不能按時上線你負責嗎，過程很揪心你懂嗎，其實我能理解前端同學改一個色值是小事，過程有些還原度不夠的又補標注重新改，某個小點改了又怕改了之後老板說要改回來，於是自己反省了一會終於經過不懈努力以及堅持說服了老板不改這裡的鏈接色了，即時要改也等項目發布之後提統一需求了。

　　總結幾個點需要在進入前端之前就要確認好的：

　　標注：尤其是統一輸出的標注要詳細，否則之後還原度不夠責任還是你的(有幾個部分要謹慎：導航，面包屑，模塊可編輯區域，字體顏色和大小使用情況，統一類型模塊間距)

　　按鈕：狀態必須在最終稿給前端時候就要補全，別想著前端會來問你要，自己先准備好放頁面上吧

　　懸停：雖然說懸停是個統一規范，但是務必要記住，導航是整個頁面特殊的存在也是使頁面與頁面之間流通的樞紐，有背景色的導航特別要注意，懸停色千萬別說全頁面統一，導航的懸停只加下劃線就夠了。

　　特殊區域：特殊情況必須另做說明，要詳細說明，否則前端就按你的統一規范做了。及時視覺稿上做了效果可能也未必會被發現，還是需要注解。

　　日常跟進：每天抽至少2次去看看前端的設計情況，還原度問題可以當場解決，省去一些麻煩。

　　三：項目最初需要考慮的問題

　　如果是新項目，這個不必太擔心，產品經理在建立需求文檔就會規劃好這系列問題。項目升級或改版，這樣的問題會相對較多，有很多升級或者改版都不是項目原始創建者發起或者推進的，因此在信息的傳遞上會出現一些偏差。那要注意點幾個方面如下：

　　廣告位：在改版之前需要弄清楚整個頁面中哪些位置是本部門的，哪些更新權限是給別的部門的，這些事先一定要在設計之前就做好功課，否則會導致項目上線延期或者上線這塊位置與視覺稿不一致，例如本次資訊改版中首頁與detail都有部分廣告位是屬於北京雅虎負責的，tanx廣告位，還有一塊屬於如影隨形廣告位，這些位置有時候不是時時刻刻都展示出來，有時候只有某個月的幾天時間展示，因此很容易在改版設計的時候忽略。或者會誤以為是屬於本產品所屬部門負責。那目前的解決方案就是在簽約出去的合同之前的廣告位暫時按設計尺寸壓縮或拉長處理，暫時盡可能保持效果不要相差太大，等合同結束後改成設計稿的最終尺寸並及時給到雅虎負責人以後的新尺寸。

　　合作位：資訊detail當中有部分位置給了P4P，同理，由於頁面這塊位置是直接嵌入P4P的代碼，沒有提前一定時間知會P4P我們需要升級換模板樣式，導致上線之後這塊位置