網(wǎng)站設(shè)計

Website development

用騰訊高手總結(jié)的設(shè)計流程，輕松應(yīng)對大型項目！

發(fā)布時間：2017-01-12 12:08:41

設(shè)計輕松應(yīng)對大型項目.png

面對雙11、春節(jié)等有計劃的大型節(jié)日 or 突發(fā)緊急的設(shè)計項目，該用哪些不同的方法應(yīng)對？騰訊ISUX 的設(shè)計師蟈蟈總結(jié)了自己的工作流程，春節(jié)馬上就到了，提前學(xué)起來，到時工作才不慌。

前言：

工作需求每天都有，但總有一些冥冥之中會被更多人關(guān)注，如實事熱點、周年慶典、大版本發(fā)布、熱門合作等，那這些被更多關(guān)注的項目是否就是傳說中的大型項目呢？視覺設(shè)計師在這樣的項目中，又該如何發(fā)揮自己大的作用，找到自己的定位，保證高質(zhì)量高效率的完成項目呢？

uisdc-isux-20170111-1

項目需求中，往往會根據(jù)產(chǎn)品功能的優(yōu)先級、重要程度、工作量級、影響效應(yīng)范圍、資源投入量等維度來對其進行項目級別的評判，如該項目需求能對團隊、產(chǎn)品、品牌（甚至企業(yè)和社會）造成重要影響意義的，都可被認定為大型項目（重要項目）。也因其對團隊、產(chǎn)品的意義區(qū)別于日常需求，所以相較于平常而言定會受到更多的關(guān)注和期待。視覺設(shè)計師作為輸出線的中間環(huán)節(jié)，需要環(huán)扣上下游的整體協(xié)作，且作為用戶瀏覽的媒體介質(zhì)的設(shè)計者和輸出者，在這之中的作用不可忽視。

由于之前有幸參與了幾次團隊較大型項目需求的設(shè)計，對設(shè)計師在類似項目中的定位與協(xié)作方式積淀了自己的一些感悟和收獲，在此和大家分享一下！

大型項目類別

一般情況下，大型項目可按時間劃分為兩種：計劃型與緊急、突發(fā)型。

1. 計劃型

有可預(yù)見性，如傳統(tǒng)節(jié)日、周年慶典、年中/年終大促，或有計劃的大型改版、新產(chǎn)品發(fā)布等，準備時間相對充沛，且時間可彈性調(diào)整。整體設(shè)計目標以博人眼球、刺激高轉(zhuǎn)化率或品牌的品質(zhì)宣傳為主。

uisdc-isux-20170111-2

時間充沛的前提下，對輸出的精度和效果自然需要更高的要求，這時我們須在日常需求的流程基礎(chǔ)上增加更多的流程細節(jié)，如前期的腦暴、更多次的評審、擴大范圍的體驗反饋等，以此篩選出高質(zhì)量的輸出，達到大家對大型項目應(yīng)有的預(yù)期。

當項目確定執(zhí)行，可在立項之前預(yù)先做些準備工作：

日積月累：

傳統(tǒng)節(jié)日與年終活動等都會定時定期出現(xiàn)，設(shè)計素材和靈感可在平日里有計劃的搜集和積累，不要等到節(jié)日到來時急急忙忙去搜索、苦想。屆時如有相同需求的設(shè)計師在同一時間做同樣的設(shè)計，容易不約而同、撞稿、不出新意。（也許你會說，那只能怪你自己設(shè)計沒有創(chuàng)意，但我會說，相同節(jié)日、相同地域、相同訴求、相同文化背景的前提下，你冥思苦想出來的創(chuàng)意以為獨一無二卻根本不能排除被撞稿的可能性。而你平日的靈感累積點卻能比當前情境下，在創(chuàng)新點上有所區(qū)分、關(guān)注的側(cè)重也可能不同而更有趣且更廣泛，這樣的積累再回看也許能帶給你更多的方向參考。

（Ps：養(yǎng)成良好的分類習(xí)慣，在需要時它也可以是你的加速度。）

分類方法：《15G的素材怎么管？手把手教你打造一個低管理成本的素材庫》

春節(jié)特供素材：《春節(jié)特供中文字體！10款年味十足的書法字體打包免費下載》

uisdc-isux-20170111-3

項目信息

確定項目新信息，如項目背景、目標、合作團隊、可投入的資源、宣傳力度預(yù)估還有項目時間等。計劃型大項目，一般都存在往年的延續(xù)或ft 性質(zhì)的合作小組，所以這些基本信息都可以從以往案例中搜集到或者通過產(chǎn)品、運營同學(xué)了解到。還需要重點了解的是：項目重要決策人的方案偏重方向等，如果方向錯了，那將會帶來全盤被推翻的風(fēng)險。

Brain-Storming

有了前面兩項的資料后，就可以組織頭腦風(fēng)暴了。這里不要忽視設(shè)計之外的產(chǎn)品、開發(fā)哥哥的意見哦，如果可以的話，請更多的召集設(shè)計之外的同學(xué)，產(chǎn)品、開發(fā)雖然都不是設(shè)計出身，但是想法是沒有界限的，說不定哪一個爆點就能刺激你的靈感，迸發(fā)好的方案，也能讓你從不同角度了解產(chǎn)品和用戶喜好，會有意外的收獲。

比腦暴還好用的靈感聚合法：《哎喲，這里發(fā)現(xiàn)一個比頭腦風(fēng)暴還靠譜的創(chuàng)意產(chǎn)生方法！》

確定立項時，需要確定的東西更多當然也更細，所以不要慌亂，讓我們來做一個清晰的流程規(guī)劃吧：

第一步：確認工作量，預(yù)留人力資源

繪制內(nèi)容結(jié)構(gòu)框架分布圖，按職能拆分需交付的頁面，越精確越好。如一些功能頁面現(xiàn)有可復(fù)用，可免去交互、視覺輸出的頁面，需清晰標記，并同步UI開發(fā)同學(xué)可預(yù)先開始搭建工作。為后段大工作量留存更多時間。

uisdc-isux-20170111-4

第二步：排優(yōu)先級，時間預(yù)估

根據(jù)拆分的頁面任務(wù)，考慮設(shè)計的先后順序。大項目頁面數(shù)量較多，不可能一次性輸出全部的設(shè)計方案，時間上即使有預(yù)留也不可讓下游環(huán)節(jié)干等，人力資源足夠的前提下設(shè)計方案可以并行，人力緊張的情況下建議分批次輸出，讓下游同學(xué)可以盡早展開工作，可讓項目時間更充裕。

第三步：確認上線時間，確認各交付時間節(jié)點

確認上線時間后，根據(jù)各職能評估的完成時間，制作清晰的交付時間表格，（也可以是我們排期時常用的甘特圖）并同步整個項目團隊。每個環(huán)節(jié)需要確立明確接口人，負責(zé)在每個交付節(jié)點標記需要上游產(chǎn)生的交付物和信息，并且確認交付情況，設(shè)計側(cè)一定要確立主視覺，把控整個視覺輸出的品牌統(tǒng)一性與設(shè)計質(zhì)量審核。

下圖是之前一次大促時的交付時間表格：（可看到表格中需要交付的12個任務(wù)分項，與每個任務(wù)的交付時間，各任務(wù)的責(zé)任人、接口人等前面提到的重要信息。每個任務(wù)人員的時間是各自串聯(lián)的，保證其可執(zhí)行性）

uisdc-isux-20170111-5

（也可以選擇甘特圖，也是以圖表的方式通過活動列表和時間刻度表示出特定項目的活動順序與持續(xù)時間?；臼且唤M線條圖，橫軸表示時間，縱軸表示項目或分工，線條表示在整個期間上計劃和實際的活動完成情況。它直觀地表明任務(wù)計劃在什么時候進行，及實際進展與計劃要求的對比。管理者由此可便利地弄清一項任務(wù)（項目）還剩下哪些工作要做，并可評估工作進度。辦公軟件中一般可在條形圖工具中插入并自動生成，大家這個應(yīng)該用的較多就不賣丑了）

uisdc-isux-20170111-6

第四步：在交付時間節(jié)點前，安插方案評審環(huán)節(jié)

交互和視覺階段，建議至少安排各兩次（及以上）評審環(huán)節(jié)，評審能確立方案的可行性，重要的是可以避免后期的不必要返工。主視覺風(fēng)格決定了整個項目想要帶傳達給用戶的感受，所以風(fēng)格是重點審核部分，記得動用立項前期準備的腦暴資料哦！ps：作為視覺設(shè)計師，要不忘設(shè)計的態(tài)度，時刻提醒自己，除了眼前的這個方案一定還存在一個更好的方案，時間允許的前提下不妨再對自己狠一點，過程雖然痛苦，但結(jié)果往往會帶來驚喜?。?/span>

第五步：視覺走查與跟進

設(shè)計方案完成后，在UI和前端開發(fā)階段，視覺走查必不可少，即使再有經(jīng)驗的設(shè)計師也不可能把所有情況都考慮到，所以在開發(fā)過程中補充一些細節(jié)是在所難免的，當然這樣的情況能避免是理想的。因項目的重要性質(zhì)，至少安排兩次（或更多次）走查，確保視覺還原度。當然走查完畢后仍要繼續(xù)跟進，確保方案真實落地且被嚴格執(zhí)行。

第六步：上線前內(nèi)部體驗

雖然有測試同學(xué)，但是他們在功能上可以保證體驗的流暢性，而設(shè)計展示與體驗還是需要更多雙眼睛一起參與完成的，上線前的仔細才會讓上線后的頁面更加分！

第七步：移動端展示的校驗

包括移動端的性能體驗與圖片、文字的展示，其中需要分享到社交媒體所需要的傳播圖片準備，響應(yīng)式的匹配等

uisdc-isux-20170111-7

計劃型時間較為充裕，所以步驟分的可以細致些。

拿騰訊云的周年活動為例，每一年的9月9日定會為周年籌劃一次較大的促銷回饋活動，在此之前自己會有意識的針對周年、慶典、促銷等關(guān)鍵字保存一些可激發(fā)靈感的素材，如配色、繪圖等。在距離周年2個月時，會主動征詢產(chǎn)品和運營同學(xué)對今年周年慶的一些籌劃方案，與大致的啟動時間，在確保今年籌劃的量級基礎(chǔ)上，評估自己從容完成項目設(shè)計的時間，并給與產(chǎn)品同學(xué)時間預(yù)留的建議。

在實際項目開始時，拆分并確定此次周年慶的會場數(shù)量，按照往年慣例會在周年慶之前推出一個活動預(yù)熱頁面，而主會場會存在一個抽獎模塊，其他則是一些固定行業(yè)分會場的頁面，那么即可確認視覺需要輸出的頁面?zhèn)€數(shù)為6個，抽獎涉及到的通知彈窗5個。那么按9月9日上線的deadline，即可往前倒推頁面的交付時間點。其中預(yù)熱與正式會場必然要保持一致的設(shè)計風(fēng)格，那么這6個頁面中，預(yù)熱與主場館首頁是需要主視覺來設(shè)計完成的，而行業(yè)會場可以由其他設(shè)計同學(xué)根據(jù)主視覺風(fēng)格延展就好，可確認下來視覺的人力需要2-3人，因為提前籌備所以時間預(yù)留較為充沛，那么主視覺+輔助視覺各一個即可很好的完成。之后即可和交互、UI開發(fā)、開發(fā)同學(xué)評估完成所需時間，后做出可執(zhí)行的時間表格，并嚴格按照時間節(jié)點交付，就能完美的engding上線啦。

活動頁面中為費時的要數(shù)首屏頭圖的設(shè)計了，既占據(jù)了重要的篇幅，又牽控著主要的元素風(fēng)格，所以當活動主題確認后，交互同學(xué)搭建線框圖的同時，就可以著手首屏的設(shè)計了。這樣能給自己預(yù)留更多的設(shè)計時間，也能給自己嘗試更多方案的機會。關(guān)于首屏的功能，大多數(shù)情況下主要用于品牌打造，展示使用，并沒有后臺或操作等功能，如時間并沒有這么充裕的情況下，可先將內(nèi)容框架設(shè)計完成交由下游開始重構(gòu)工作，首屏設(shè)計可暫由占位符替代，上線前更換即可。

2. 緊急、突發(fā)型

突發(fā)型項目，沒有相應(yīng)的準備時間，在接到通知那一刻起，就已完成立項。需要做的是分秒必爭的馬上投入到項目執(zhí)行中去。項目目標是確保短時間內(nèi)搶急上線，但即使是時間緊迫，合作流程與各環(huán)節(jié)的交付節(jié)點是絕不可被省略的。還有前期的功能討論設(shè)計師也好不要缺席，無論是否晦澀難懂，都能在一定程度上幫助理解產(chǎn)品，也能減少在設(shè)計過程中的溝通成本，了解產(chǎn)品定位，任務(wù)流程各個方面。做到這樣才能在緊亂的場景下讓團隊有序的合作，環(huán)環(huán)相扣而不生差亂。

設(shè)計合作流程

拆分任務(wù)頁面 —— 標記設(shè)計與開發(fā)可并行頁面——并確認設(shè)計優(yōu)先級——確認上線時間并倒推各職能環(huán)節(jié)交付時間節(jié)點（交付時間包含方案修改校驗）——分配執(zhí)行人員、環(huán)節(jié)接口人——嚴格執(zhí)行

交付時間節(jié)點

（下圖為并行時間節(jié)點分配圖）

uisdc-isux-20170111-8

突發(fā)型項目，唯一目標是保證快上線，時間是唯一的奢侈品，所以各環(huán)節(jié)必須串行配合，將頁面交付細分到模塊，讓每一個職能都能環(huán)環(huán)相扣，大程度的統(tǒng)籌時間分配與利用率，真正的與時間賽跑。時間緊張，難免需要加班配合，但早晚加班也是有策略的，充分了解上下游的加班習(xí)慣和決策者以及外界實事時間點，會發(fā)現(xiàn)有些需求點未必需要第一時間返回公司或加班，可以在下一個流程之后再補齊，如占位的配圖、icon的高清匹配等。

思考：

在緊急突發(fā)型項目面前，設(shè)計師往往會犯很多本末倒置的錯誤，如在非常時期糾結(jié)哪種配色更好，哪種樣式更搭等等，這些考量在平常也許正是設(shè)計細節(jié)的點睛之處，但在當前時間要求下，這些考量就是舍本逐末的表現(xiàn)。

經(jīng)過近一次微信小程序的項目，從中受益良多，相信很多視覺設(shè)計師也和我一樣會情不自禁的關(guān)注了相對沒有那么重要的細節(jié)部分，而掩蓋了項目目標的重要性。以下是這次項目的一些收獲，或者說是自己面對與其他日常項目時不一樣的，需要注意的地方：

必須強制轉(zhuǎn)移關(guān)注重點

設(shè)計師對美都有一種說不清道不明的執(zhí)著，對自己設(shè)計的頁面存在情不自禁的尋求一百分的強迫癥，在突發(fā)型之外的項目中，這本是加分光環(huán)，但在緊急情況下，這樣的完美執(zhí)著無疑似團隊的毒藥，對項目進程有拖滯的危害。項目性質(zhì)決定著上線deadline，如果一味的關(guān)注視覺呈現(xiàn)，只會拖慢下游進度，影響上線目標。所以視覺同學(xué)必須強制自己將關(guān)注重點從設(shè)計感轉(zhuǎn)移至上線目標上來，優(yōu)先確保功能的清晰展示，細節(jié)的設(shè)計可在迭代中仔細摸索。

提前預(yù)判性

時間緊迫的項目下，爭分奪秒是必須的，視覺作為中間環(huán)節(jié)，可在交互進行階段，提前分析頁面的時間花費分布，預(yù)判可以和交互并行的模塊或頁面，并提前啟動設(shè)計，給自己爭取更多的時間。

優(yōu)先結(jié)構(gòu)框架的設(shè)計，細節(jié)內(nèi)容占位預(yù)留

上下游配合，視覺在給自己爭取跟多時間的同時，也可盡量多的為下游UI開發(fā)同學(xué)爭取些時間。例如在頁面中，會存在模塊陣列或列表等結(jié)構(gòu)，視覺側(cè)工作自然需要將每一個模塊對應(yīng)的配圖、控件、文案設(shè)計好，但是對于UI開發(fā)同學(xué)來說是需要先搭建這個陣列的結(jié)構(gòu)，然后在逐一替換模塊細節(jié)內(nèi)容的。所以視覺同學(xué)可以優(yōu)先只設(shè)計一個模塊然后給到下游陣列的結(jié)構(gòu)，UI開發(fā)同學(xué)即可提前展開工作，減輕后期時間分配上的壓力。

（如下圖所示為常見網(wǎng)頁形態(tài)結(jié)構(gòu)，整個頁面UI開發(fā)同學(xué)先需要得到的其實是設(shè)計師確認的框架結(jié)構(gòu)，至于里面的圖標、banner配圖、抑或是文字內(nèi)容都是可以后面提供的。具體來說，如下圖中，場景切換部分為三分陣列版式，灰色方框為圖標占位預(yù)留，UI開發(fā)同學(xué)只需要圖標占位尺寸即可，圖標細節(jié)和形態(tài)，設(shè)計師在后面完成整體頁面框架后-上線前補齊即可。）

uisdc-isux-20170111-9

設(shè)計元素快速復(fù)用

不要過多的糾結(jié)于與眾不同的創(chuàng)新，在設(shè)計規(guī)范內(nèi)如有類似模塊請優(yōu)先復(fù)用，在保證統(tǒng)一性的前提下確保上線目標。因創(chuàng)新存在試錯的隱藏屬性，時間不富足的情況下，沒有辦法保證其高可行性，而已有模塊即使在創(chuàng)新設(shè)計上減分了，但是卻經(jīng)過了試錯的考驗，相比之下更能保證上線的安全系數(shù)。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7044,0.html

上一篇：如何從你的WordPress文章刪除作者和日期信息

下一篇：隨機數(shù)在CSS

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計
程序設(shè)
計研發(fā)
資料錄
入優(yōu)化
確認交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤
我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理