2017-1-12 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
來源：莫貝網(wǎng)
前言：工作需求每天都有，但總有一些冥冥之中會(huì)被更多人關(guān)注，如實(shí)事熱點(diǎn)、周年慶典、大版本發(fā)布、熱門合作等，那這些被更多關(guān)注的項(xiàng)目是否就是傳說中的大型項(xiàng)目呢？視覺設(shè)計(jì)師在這樣的項(xiàng)目中，又該如何發(fā)揮自己最大的作用，找到自己的最佳定位，保證高質(zhì)量率的完成項(xiàng)目呢？
項(xiàng)目需求中，往往會(huì)根據(jù)產(chǎn)品功能的優(yōu)先級(jí)、重要程度、工作量級(jí)、影響效應(yīng)范圍、資源投入量等維度來對(duì)其進(jìn)行項(xiàng)目級(jí)別的評(píng)判，如該項(xiàng)目需求能對(duì)團(tuán)隊(duì)、產(chǎn)品、品牌（甚至企業(yè)和社會(huì)）造成重要影響意義的，都可被認(rèn)定為大型項(xiàng)目（重要項(xiàng)目）。也因其對(duì)團(tuán)隊(duì)、產(chǎn)品的意義區(qū)別于日常需求，所以相較于平常而言定會(huì)受到更多的關(guān)注和期待。視覺設(shè)計(jì)師作為輸出線的中間環(huán)節(jié)，需要環(huán)扣上下游的整體協(xié)作，且作為用戶瀏覽的媒體介質(zhì)的設(shè)計(jì)者和輸出者，在這之中的作用不可忽視。
由于之前有幸參與了幾次團(tuán)隊(duì)較大型項(xiàng)目需求的設(shè)計(jì)，對(duì)設(shè)計(jì)師在類似項(xiàng)目中的定位與協(xié)作方式積淀了自己的一些感悟和收獲，在此和大家分享一下！
有可預(yù)見性，如傳統(tǒng)節(jié)日、周年慶典、年中/年終大促，或有計(jì)劃的大型改版、新產(chǎn)品發(fā)布等，準(zhǔn)備時(shí)間相對(duì)充沛，且時(shí)間可彈性調(diào)整。整體設(shè)計(jì)目標(biāo)以博人眼球、刺激高轉(zhuǎn)化率或品牌的品質(zhì)宣傳為主。
時(shí)間充沛的前提下，對(duì)輸出的精度和效果自然需要更高的要求，這時(shí)我們須在日常需求的流程基礎(chǔ)上增加更多的流程細(xì)節(jié)，如前期的腦暴、更多次的評(píng)審、擴(kuò)大范圍的體驗(yàn)反饋等，以此篩選出最高質(zhì)量的輸出，達(dá)到大家對(duì)大型項(xiàng)目應(yīng)有的預(yù)期。
當(dāng)項(xiàng)目確定執(zhí)行，可在立項(xiàng)之前預(yù)先做些準(zhǔn)備工作：
· 日積月累：
傳統(tǒng)節(jié)日與年終活動(dòng)等都會(huì)定時(shí)定期出現(xiàn)，設(shè)計(jì)素材和靈感可在平日里有計(jì)劃的搜集和積累，不要等到節(jié)日到來時(shí)急急忙忙去搜索、苦想。屆時(shí)如有相同需求的設(shè)計(jì)師在同一時(shí)間做同樣的設(shè)計(jì)，容易不約而同、撞稿、不出新意。（也許你會(huì)說，那只能怪你自己設(shè)計(jì)沒有創(chuàng)意，但我會(huì)說，相同節(jié)日、相同地域、相同訴求、相同文化背景的前提下，你冥思苦想出來的創(chuàng)意以為卻根本不能排除被撞稿的可能性。而你平日的靈感累積點(diǎn)卻能比當(dāng)前情境下，在創(chuàng)新點(diǎn)上有所區(qū)分、關(guān)注的側(cè)重也可能不同而更有趣且更廣泛，這樣的積累再回看也許能帶給你更多的方向參考。
（Ps：養(yǎng)成良好的分類習(xí)慣，在需要時(shí)它也可以是你的加速度。）
· 項(xiàng)目信息
確定項(xiàng)目信息，如項(xiàng)目背景、目標(biāo)、合作團(tuán)隊(duì)、可投入的資源、宣傳力度預(yù)估還有項(xiàng)目時(shí)間等。計(jì)劃型大項(xiàng)目，一般都存在往年的延續(xù)或ft性質(zhì)的合作小組，所以這些基本信息都可以從以往案例中搜集到或者通過產(chǎn)品、運(yùn)營同學(xué)了解到。還需要重點(diǎn)了解的是：項(xiàng)目重要決策人的方案偏重方向等，如果方向錯(cuò)了，那將會(huì)帶來全盤被推翻的風(fēng)險(xiǎn)。
· Brain-Storming
有了前面兩項(xiàng)的資料后，就可以組織頭腦風(fēng)暴了。這里不要忽視設(shè)計(jì)之外的產(chǎn)品、開發(fā)哥哥的意見哦，如果可以的話，請(qǐng)更多的召集設(shè)計(jì)之外的同學(xué)，產(chǎn)品、開發(fā)雖然都不是設(shè)計(jì)出身，但是想法是沒有界限的，說不定哪一個(gè)爆點(diǎn)就能刺激你的靈感，迸發(fā)好的方案，也能讓你從不同角度了解產(chǎn)品和用戶喜好，會(huì)有意外的收獲。
第一步：確認(rèn)工作量，預(yù)留人力資源
繪制內(nèi)容結(jié)構(gòu)框架分布圖，按職能拆分需交付的頁面，越越好。如一些功能頁面現(xiàn)有可復(fù)用，可免去交互、視覺輸出的頁面，需清晰標(biāo)記，并同步UI開發(fā)同學(xué)可預(yù)先開始搭建工作。為后段大工作量留存更多時(shí)間。
第二步：排優(yōu)先級(jí)，時(shí)間預(yù)估
根據(jù)拆分的頁面任務(wù)，考慮設(shè)計(jì)的先后順序。大項(xiàng)目頁面數(shù)量較多，不可能一次性輸出全部的設(shè)計(jì)方案，時(shí)間上即使有預(yù)留也不可讓下游環(huán)節(jié)干等，人力資源足夠的前提下設(shè)計(jì)方案可以并行，人力緊張的情況下建議分批次輸出，讓下游同學(xué)可以盡早展開工作，可讓項(xiàng)目時(shí)間更充裕。
第三步：確認(rèn)上線時(shí)間，確認(rèn)各交付時(shí)間節(jié)點(diǎn)
確認(rèn)上線時(shí)間后，根據(jù)各職能評(píng)估的完成時(shí)間，制作清晰的交付時(shí)間表格，（也可以是我們排期時(shí)常用的甘特圖）并同步整個(gè)項(xiàng)目團(tuán)隊(duì)。每個(gè)環(huán)節(jié)需要確立明確接口人，負(fù)責(zé)在每個(gè)交付節(jié)點(diǎn)標(biāo)記需要上游產(chǎn)生的交付物和信息，并且確認(rèn)交付情況，設(shè)計(jì)側(cè)一定要確立主視覺，把控整個(gè)視覺輸出的品牌統(tǒng)一性與設(shè)計(jì)質(zhì)量審核。
下圖是之前一次大促時(shí)的交付時(shí)間表格：（可看到表格中需要交付的12個(gè)任務(wù)分項(xiàng)，與每個(gè)任務(wù)的交付時(shí)間，各任務(wù)的責(zé)任人、接口人等前面提到的重要信息。每個(gè)任務(wù)人員的時(shí)間是各自串聯(lián)的，保證其可執(zhí)行性）
（也可以選擇甘特圖，也是以圖表的方式通過活動(dòng)列表和時(shí)間刻度表示出特定項(xiàng)目的活動(dòng)順序與持續(xù)時(shí)間?；臼且唤M線條圖，橫軸表示時(shí)間，縱軸表示項(xiàng)目或分工，線條表示在整個(gè)期間上計(jì)劃和實(shí)際的活動(dòng)完成情況。它直觀地表明任務(wù)計(jì)劃在什么時(shí)候進(jìn)行，及實(shí)際進(jìn)展與計(jì)劃要求的對(duì)比。管理者由此可便利地弄清一項(xiàng)任務(wù)（項(xiàng)目）還剩下哪些工作要做，并可評(píng)估工作進(jìn)度。辦公軟件中一般可在條形圖工具中插入并自動(dòng)生成，大家這個(gè)應(yīng)該用的較多就不賣丑了）
第四步：在交付時(shí)間節(jié)點(diǎn)前，安插方案評(píng)審環(huán)節(jié)
交互和視覺階段，建議至少安排各兩次（及以上）評(píng)審環(huán)節(jié)，評(píng)審能確立方案的可行性，重要的是可以避免后期的不必要返工。主視覺風(fēng)格決定了整個(gè)項(xiàng)目想要帶傳達(dá)給用戶的感受，所以風(fēng)格是重點(diǎn)審核部分，記得動(dòng)用立項(xiàng)前期準(zhǔn)備的腦暴資料哦！ps：作為視覺設(shè)計(jì)師，要不忘設(shè)計(jì)的態(tài)度，時(shí)刻提醒自己，除了眼前的這個(gè)方案一定還存在一個(gè)更好的方案，時(shí)間允許的前提下不妨再對(duì)自己狠一點(diǎn)，過程雖然痛苦，但結(jié)果往往會(huì)帶來驚喜！）
第五步：視覺走查與跟進(jìn)
設(shè)計(jì)方案完成后，在UI和前端開發(fā)階段，視覺走查必不可少，即使再有經(jīng)驗(yàn)的設(shè)計(jì)師也不可能把所有情況都考慮到，所以在開發(fā)過程中補(bǔ)充一些細(xì)節(jié)是在所難免的，當(dāng)然這樣的情況能避免是最理想的。因項(xiàng)目的重要性質(zhì)，至少安排兩次（或更多次）走查，確保視覺還原度。當(dāng)然走查完畢后仍要繼續(xù)跟進(jìn)，確保方案真實(shí)落地且被嚴(yán)格執(zhí)行。
第六步：上線前內(nèi)部體驗(yàn)
雖然有測(cè)試同學(xué)，但是他們?cè)诠δ苌峡梢员ＷC體驗(yàn)的流暢性，而設(shè)計(jì)展示與體驗(yàn)還是需要更多雙眼睛一起參與完成的，上線前的仔細(xì)才會(huì)讓上線后的頁面更加分！
第七步：移動(dòng)端展示的校驗(yàn)
包括移動(dòng)端的性能體驗(yàn)與圖片、文字的展示，其中需要分享到社交媒體所需要的傳播圖片準(zhǔn)備，響應(yīng)式的匹配等
型時(shí)間較為充裕，所以步驟分的可以細(xì)致些。
( 拿騰訊云的周年活動(dòng)為例，每一年的9月9日定會(huì)為周年籌劃一次較大的促銷回饋活動(dòng)，在此之前自己會(huì)有意識(shí)的針對(duì)周年、慶典、促銷等關(guān)鍵字保存一些可激發(fā)靈感的素材，如配色、繪圖等。在距離周年2個(gè)月時(shí)，會(huì)主動(dòng)征詢產(chǎn)品和運(yùn)營同學(xué)對(duì)今年周年慶的一些籌劃方案，與大致的啟動(dòng)時(shí)間，在確保今年籌劃的量級(jí)基礎(chǔ)上，評(píng)估自己從容完成項(xiàng)目設(shè)計(jì)的時(shí)間，并給與產(chǎn)品同學(xué)時(shí)間預(yù)留的建議。在實(shí)際項(xiàng)目開始時(shí)，拆分并確定此次周年慶的會(huì)場數(shù)量，按照往年慣例會(huì)在周年慶之前推出一個(gè)活動(dòng)預(yù)熱頁面，而主會(huì)場會(huì)存在一個(gè)抽獎(jiǎng)模塊，其他則是一些固定行業(yè)分會(huì)場的頁面，那么即可確認(rèn)視覺需要輸出的頁面?zhèn)€數(shù)為6個(gè)，抽獎(jiǎng)涉及到的通知彈窗5個(gè)。那么按9月9日上線的deadline，即可往前倒推頁面的交付時(shí)間點(diǎn)。其中預(yù)熱與正式會(huì)場必然要保持一致的設(shè)計(jì)風(fēng)格，那么這6個(gè)頁面中，預(yù)熱與主場館首頁是需要主視覺來設(shè)計(jì)完成的，而行業(yè)會(huì)場可以由其他設(shè)計(jì)同學(xué)根據(jù)主視覺風(fēng)格延展就好，可確認(rèn)下來視覺的人力需要2-3人，因?yàn)樘崆盎I備所以時(shí)間預(yù)留較為充沛，那么主視覺+輔助視覺各一個(gè)即可很好的完成。 之后即可和交互、UI開發(fā)、開發(fā)同學(xué)評(píng)估完成所需時(shí)間，最后做出可執(zhí)行的時(shí)間表格，并嚴(yán)格按照時(shí)間節(jié)點(diǎn)交付，就能完美的engding上線啦。
活動(dòng)頁面中最為費(fèi)時(shí)的要數(shù)首屏頭圖的設(shè)計(jì)了，既占據(jù)了重要的篇幅，又牽控著主要的元素風(fēng)格，所以當(dāng)活動(dòng)主題確認(rèn)后，交互同學(xué)搭建線框圖的同時(shí)，就可以著手首屏的設(shè)計(jì)了。這樣能給自己預(yù)留更多的設(shè)計(jì)時(shí)間，也能給自己嘗試更多方案的機(jī)會(huì)。關(guān)于首屏的功能，大多數(shù)情況下主要用于品牌打造，展示使用，并沒有后臺(tái)或操作等功能，如時(shí)間并沒有這么充裕的情況下，可先將內(nèi)容框架設(shè)計(jì)完成交由下游開始重構(gòu)工作，首屏設(shè)計(jì)可暫由占位符替代，上線前更換即可。)
突發(fā)型項(xiàng)目，沒有相應(yīng)的準(zhǔn)備時(shí)間，在接到通知那一刻起，就已完成立項(xiàng)。需要做的是分秒必爭的馬上投入到項(xiàng)目執(zhí)行中去。項(xiàng)目目標(biāo)是確保短時(shí)間內(nèi)搶急上線，但即使是時(shí)間緊迫，合作流程與各環(huán)節(jié)的交付節(jié)點(diǎn)是絕不可被省略的。還有前期的功能討論設(shè)計(jì)師也最好不要缺席，無論是否晦澀難懂，都能在一定程度上幫助理解產(chǎn)品，也能減少在設(shè)計(jì)過程中的溝通成本，了解產(chǎn)品定位，任務(wù)流程各個(gè)方面。做到這樣才能在緊亂的場景下讓團(tuán)隊(duì)有序的合作，環(huán)環(huán)相扣而不生差亂。
· 設(shè)計(jì)合作流程
拆分任務(wù)頁面 —— 標(biāo)記設(shè)計(jì)與開發(fā)可并行頁面——并確認(rèn)設(shè)計(jì)優(yōu)先級(jí)——確認(rèn)上線時(shí)間并倒推各職能環(huán)節(jié)交付時(shí)間節(jié)點(diǎn)（交付時(shí)間包含方案修改校驗(yàn)）——分配執(zhí)行人員、環(huán)節(jié)接口人——嚴(yán)格執(zhí)行
· 交付時(shí)間節(jié)點(diǎn)
（下圖為并行時(shí)間節(jié)點(diǎn)分配圖）
突發(fā)型項(xiàng)目，唯一目標(biāo)是保證最快上線，時(shí)間是唯一的品，所以各環(huán)節(jié)必須串行配合，將頁面交付細(xì)分到模塊，讓每一個(gè)職能都能環(huán)環(huán)相扣，的統(tǒng)籌時(shí)間分配與利用率，真正的與時(shí)間賽跑。時(shí)間緊張，難免需要加班配合，但早晚加班也是有策略的，充分了解上下游的加班習(xí)慣和決策者以及外界實(shí)事時(shí)間點(diǎn)，會(huì)發(fā)現(xiàn)有些需求點(diǎn)未必需要第一時(shí)間返回公司或加班，可以在下一個(gè)流程之后再補(bǔ)齊，如占位的配圖、icon的高清匹配等。
在緊急突發(fā)型項(xiàng)目面前，設(shè)計(jì)師往往會(huì)犯很多本末倒置的錯(cuò)誤，如在非常時(shí)期糾結(jié)哪種配色更好，哪種樣式更搭等等，這些考量在平常也許正是設(shè)計(jì)細(xì)節(jié)的點(diǎn)睛之處，但在當(dāng)前時(shí)間要求下，這些考量就是舍本逐末的表現(xiàn)。
經(jīng)過最近一次微信小程序的項(xiàng)目，從中受益良多，相信很多視覺設(shè)計(jì)師也和我一樣會(huì)情不自禁的關(guān)注了相對(duì)沒有那么重要的細(xì)節(jié)部分，而掩蓋了項(xiàng)目目標(biāo)的重要性。以下是這次項(xiàng)目的一些收獲，或者說是自己面對(duì)與其他日常項(xiàng)目時(shí)不一樣的，需要注意的地方：
· 必須強(qiáng)制轉(zhuǎn)移關(guān)注重點(diǎn)
設(shè)計(jì)師對(duì)美都有一種說不清道不明的執(zhí)著，對(duì)自己設(shè)計(jì)的頁面存在情不自禁的尋求一百分的強(qiáng)迫癥，在突發(fā)型之外的項(xiàng)目中，這本是加分光環(huán)，但在緊急情況下，這樣的完美執(zhí)著無疑似團(tuán)隊(duì)的毒藥，對(duì)項(xiàng)目進(jìn)程有拖滯的危害。項(xiàng)目性質(zhì)決定著上線deadline，如果一味的關(guān)注視覺呈現(xiàn)，只會(huì)拖慢下游進(jìn)度，影響上線目標(biāo)。所以視覺同學(xué)必須強(qiáng)制自己將關(guān)注重點(diǎn)從設(shè)計(jì)感轉(zhuǎn)移至上線目標(biāo)上來，優(yōu)先確保功能的清晰展示，細(xì)節(jié)的設(shè)計(jì)可在迭代中仔細(xì)摸索。
· 提前預(yù)判性
時(shí)間緊迫的項(xiàng)目下，爭分奪秒是必須的，視覺作為中間環(huán)節(jié)，可在交互進(jìn)行階段，提前分析頁面的時(shí)間花費(fèi)分布，預(yù)判可以和交互并行的模塊或頁面，并提前啟動(dòng)設(shè)計(jì)，給自己爭取更多的時(shí)間。
· 優(yōu)先結(jié)構(gòu)框架的設(shè)計(jì)，細(xì)節(jié)內(nèi)容占位預(yù)留
上下游配合，視覺在給自己爭取跟多時(shí)間的同時(shí)，也可盡量多的為下游UI開發(fā)同學(xué)爭取些時(shí)間。例如在頁面中，會(huì)存在模塊陣列或列表等結(jié)構(gòu)，視覺側(cè)工作自然需要將每一個(gè)模塊對(duì)應(yīng)的配圖、控件、文案設(shè)計(jì)好，但是對(duì)于UI開發(fā)同學(xué)來說是需要先搭建這個(gè)陣列的結(jié)構(gòu)，然后在逐一替換模塊細(xì)節(jié)內(nèi)容的。所以視覺同學(xué)可以優(yōu)先只設(shè)計(jì)一個(gè)模塊然后給到下游陣列的結(jié)構(gòu)，UI開發(fā)同學(xué)即可提前展開工作，減輕后期時(shí)間分配上的壓力。
（如下圖所示為常見網(wǎng)頁形態(tài)結(jié)構(gòu)，整個(gè)頁面UI開發(fā)同學(xué)需要得到的其實(shí)是設(shè)計(jì)師確認(rèn)的框架結(jié)構(gòu)，至于里面的圖標(biāo)、banner配圖、抑或是文字內(nèi)容都是可以后面提供的。具體來說，如下圖中，場景切換部分為三分陣列版式，灰色方框?yàn)閳D標(biāo)占位預(yù)留，UI開發(fā)同學(xué)只需要圖標(biāo)占位尺寸即可，圖標(biāo)細(xì)節(jié)和形態(tài)，設(shè)計(jì)師在后面完成整體頁面框架后-上線前補(bǔ)齊即可。）
· 設(shè)計(jì)元素快速復(fù)用
不要過多的糾結(jié)于與眾不同的創(chuàng)新，在設(shè)計(jì)規(guī)范內(nèi)如有類似模塊請(qǐng)優(yōu)先復(fù)用，在保證統(tǒng)一性的前提下確保上線目標(biāo)。因創(chuàng)新存在試錯(cuò)的隱藏屬性，時(shí)間不富足的情況下，沒有辦法保證其高可行性，而已有模塊即使在創(chuàng)新設(shè)計(jì)上減分了，但是卻經(jīng)過了試錯(cuò)的考驗(yàn)，相比之下更能保證上線的安全系數(shù)。
做完一個(gè)項(xiàng)目如果只是增長了項(xiàng)目數(shù)量值是絕對(duì)不夠的，我們還需要對(duì)線上方案進(jìn)行數(shù)據(jù)的回收，針對(duì)項(xiàng)目目標(biāo)的不同側(cè)重，有所針對(duì)的驗(yàn)收數(shù)據(jù)指標(biāo)，以實(shí)際數(shù)據(jù)來驗(yàn)證自己的設(shè)計(jì)在項(xiàng)目中的合理性。計(jì)劃型項(xiàng)目可能在設(shè)計(jì)過程中已被產(chǎn)品、運(yùn)營同學(xué)要求埋點(diǎn)，這時(shí)主要著重將設(shè)計(jì)關(guān)注的部分提煉總結(jié)即可。突發(fā)型可更多關(guān)注功能模塊觸發(fā)區(qū)是否符合點(diǎn)擊預(yù)期、隱藏功能是否被成功指引等方面的點(diǎn)擊數(shù)據(jù)。（公司可提取數(shù)據(jù)的平臺(tái)有tcss.oa.com ,可在UI和開發(fā)階段提前寫入 hotrep 腳本，在數(shù)據(jù)平臺(tái)即可根據(jù) hotrep 標(biāo)記的ID名稱進(jìn)行數(shù)據(jù)量查詢）
當(dāng)然大型項(xiàng)目并不像普通需求那么頻繁，且每一次的場景與需求點(diǎn)、宣傳重點(diǎn)都是不同的，所以每一次項(xiàng)目經(jīng)歷后，都應(yīng)該在完結(jié)時(shí)養(yǎng)成做項(xiàng)目總結(jié)的習(xí)慣，通過數(shù)據(jù)反饋、用戶使用的嘈點(diǎn)與贊點(diǎn)分析自己在設(shè)計(jì)方案中的優(yōu)劣，集成經(jīng)驗(yàn)與教訓(xùn)，搭成自我成長的階石。另外，更多的了解整個(gè)軟件開發(fā)的工作流程以及各個(gè)角色的工作內(nèi)容，再深入些可再酌情了解些項(xiàng)目管理的相關(guān)知識(shí)，這些都可以幫助設(shè)計(jì)師更快的成長，更好的在團(tuán)隊(duì)中發(fā)揮作用。
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net