@Yeah秋強(qiáng) ：這段時(shí)間和朋友接了一個(gè)設(shè)計(jì)外包項(xiàng)目，我是交互設(shè)計(jì)師，其他兩個(gè)負(fù)責(zé)視覺(jué)設(shè)計(jì)，第一次組團(tuán)隊(duì)，無(wú)論團(tuán)隊(duì)內(nèi)部還是合作公司那邊，都是邊磨合邊工作，進(jìn)行不是很順利?？目呐雠鲎鐾旰?，回顧這次項(xiàng)目經(jīng)驗(yàn)，有4點(diǎn)經(jīng)驗(yàn)想跟大家分享一下。

設(shè)計(jì)外包三板斧：

1. 甲方應(yīng)該給多少錢(qián)？《說(shuō)說(shuō)設(shè)計(jì)談?wù)勫X(qián)！不可不知的設(shè)計(jì)師接活報(bào)價(jià)公式》
2. 如何讓甲方給錢(qián)？《這才是真相！為什么中國(guó)的甲方都不愿意為設(shè)計(jì)付出高額費(fèi)用？》
3. 如何讓甲方愉快地給錢(qián)：《大牛的7條經(jīng)驗(yàn)！插畫(huà)師在接外包時(shí)都需要注意些什么？》

一、項(xiàng)目需要一張數(shù)據(jù)表

這次算是一個(gè)全新的項(xiàng)目，從零開(kāi)始，但是實(shí)際上第一版出來(lái)的功能已經(jīng)非常多了。產(chǎn)品那邊沒(méi)有一個(gè)完整的功能列表給我，需求也是時(shí)不時(shí)進(jìn)行改動(dòng)。所以，在做設(shè)計(jì)的時(shí)候，總感覺(jué)會(huì)遺漏某些狀態(tài)的變化，所以，針對(duì)這一點(diǎn)，我覺(jué)得可以有一張數(shù)據(jù)表。這張表就是工程師后臺(tái)的數(shù)據(jù)記錄，產(chǎn)品在規(guī)劃功能的時(shí)候就需要把這張表格給羅列出來(lái)，然后在設(shè)計(jì)交互流程的時(shí)候，每進(jìn)行一個(gè)步驟，都需要考慮這個(gè)步驟對(duì)于這個(gè)數(shù)據(jù)表格的影響，然后把這些變化完整地寫(xiě)進(jìn)交互文檔里面。

舉個(gè)例子，由于我們的平臺(tái)是一個(gè)優(yōu)惠券發(fā)放的平臺(tái)，那么這個(gè)時(shí)候涉及到兩個(gè)主體：優(yōu)惠券和領(lǐng)券的人，優(yōu)惠券的數(shù)據(jù)就是一個(gè)數(shù)量的問(wèn)題。不過(guò)對(duì)于領(lǐng)券人，數(shù)據(jù)表有如下：1、未使用的券；2、已使用的券；3、已過(guò)期的券；4、待付款的訂單；5、已付款的訂單；6、已退款的訂單；7、積分；8、返利。

羅列了一下，這些是最主要的數(shù)據(jù)，然后比如說(shuō)訂單的數(shù)據(jù)，因?yàn)橛唵问沁M(jìn)行購(gòu)買優(yōu)惠券的活動(dòng)的，所以訂單的數(shù)據(jù)也會(huì)影響優(yōu)惠券的數(shù)據(jù)。優(yōu)惠券消費(fèi)會(huì)有返積分或者返利，所以，優(yōu)惠券的狀態(tài)也會(huì)影響積分或者返利的數(shù)據(jù)。那么也就是說(shuō)訂單的變化也會(huì)影響積分或者返利。這些數(shù)據(jù)之間關(guān)系錯(cuò)綜復(fù)雜，如果有一張?jiān)敿?xì)的表格，可以把這些變化寫(xiě)進(jìn)交互設(shè)計(jì)文檔里面，我覺(jué)得邏輯會(huì)更加完整，對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)也比較便捷。只是可惜，這些都是做完了才發(fā)現(xiàn)的，所以當(dāng)時(shí)就沒(méi)有做。

二、將功能模塊化

這次的項(xiàng)目是我有史以來(lái)接到的最大的項(xiàng)目，項(xiàng)目功能比較多也比較雜亂，特別是后期加入了一個(gè)支付功能，導(dǎo)致整個(gè)交互邏輯的復(fù)雜度大大增加了。復(fù)雜度變大的壞處有三個(gè)：①難以梳理邏輯；②容易遺忘一些邏輯；③難以恰當(dāng)?shù)仃U述設(shè)計(jì)。針對(duì)這三個(gè)缺點(diǎn)，我在做的過(guò)程中嘗試將功能進(jìn)行模塊化。模塊化的意思是將一些功能進(jìn)行打包，然后只梳理這些功能之間的關(guān)系。梳理完之后，這些功能就形成了一個(gè)整體，然后其他功能只和這個(gè)整體進(jìn)行交互而不和其中的功能進(jìn)行交互。

這么說(shuō)有點(diǎn)不形象，舉個(gè)例子吧，就說(shuō)電腦吧，電腦可以看成是由顯示器、CPU、內(nèi)存、硬盤(pán)等部件構(gòu)成的，而其實(shí)顯示器里面又是由各種零件構(gòu)成的，顯示器里面的零件就相當(dāng)于我的功能，我所做的就是先把一部分打包成“顯示器”，一部分打包成“CPU”，然后把他們當(dāng)成一個(gè)整體來(lái)考慮。

顯而易見(jiàn)就是，這么做首先每次處理都只是一部分問(wèn)題，邏輯比較容易梳理，也不容易遺忘邏輯。當(dāng)然，更重要的就是表達(dá)的問(wèn)題。如果不進(jìn)行模塊化的話，我真的不知道該如何在一張畫(huà)布上把這些邏輯流程表達(dá)出來(lái)，所以，模塊化之后，我可以在每張畫(huà)布只表達(dá)其中一個(gè)模塊，當(dāng)我把所有模塊都闡述清楚了，整個(gè)項(xiàng)目也就清楚了。

當(dāng)然，除了以上的種種優(yōu)點(diǎn)之外，模塊化還有一個(gè)優(yōu)點(diǎn)就是方便復(fù)用。一些常見(jiàn)的模塊，比如注冊(cè)登錄模塊，消息通知模塊，個(gè)人中心模塊，這些模塊在當(dāng)今的APP里基本都存在，也就是說(shuō)他們的復(fù)用率都比較高。如果在設(shè)計(jì)的過(guò)程中就已經(jīng)將這些功能進(jìn)行模塊化了，之后如果需要設(shè)計(jì)新產(chǎn)品的功能時(shí)，這些模塊就可以直接拿過(guò)來(lái)復(fù)用，省時(shí)省力。這個(gè)省時(shí)省力節(jié)約的是功能規(guī)劃、界面設(shè)計(jì)、邏輯推演等等這些時(shí)間和精力，所以還是相當(dāng)可觀的。

三、定義公共交互

如果說(shuō)前面的模塊化是為以后的設(shè)計(jì)做準(zhǔn)備，那么公共交互這一塊其實(shí)就是貫穿整個(gè)設(shè)計(jì)的過(guò)程。在做設(shè)計(jì)的過(guò)程中，其實(shí)會(huì)發(fā)現(xiàn)很多小流程的處理，之前已經(jīng)做過(guò)了，做過(guò)了我當(dāng)然不會(huì)再畫(huà)一遍，再寫(xiě)一遍邏輯，我一般只會(huì)寫(xiě)“此處XX邏輯參考XX頁(yè)的XX圖”，不過(guò)慢慢地，這些一多，就發(fā)現(xiàn)自己也會(huì)亂掉。當(dāng)出現(xiàn)次數(shù)超過(guò)四次時(shí)，我就每次寫(xiě)那句話都有點(diǎn)不太放心，怕自己引用的那個(gè)地方也是缺省的，所以每次都要把交互稿翻一下，然后才能信心滿滿地寫(xiě)下這句“此處XX邏輯參考XX頁(yè)的XX圖”。

碰巧之前在一家公司遇到過(guò)他們的交互稿，一個(gè)公司的產(chǎn)品那就是相當(dāng)復(fù)雜了，所以他們會(huì)把一些公共的交互給羅列出來(lái)，放在交互稿的前面部分，然后每次引用的時(shí)候就是引用公共交互的東西。我覺(jué)得這個(gè)可以借鑒到小項(xiàng)目的交互稿里面。也就是說(shuō)，交互稿除了一開(kāi)始的說(shuō)明以及后面的線框圖之外，中間再加入一張畫(huà)布“公共交互”，然后把所有出現(xiàn)過(guò)兩次以上的交互都可以總結(jié)到這張圖上，這個(gè)公共交互當(dāng)然是自己一邊做一邊維護(hù)的，不過(guò)想來(lái)，這樣子做，既可以保證自己畫(huà)圖的質(zhì)量和效率，對(duì)于開(kāi)發(fā)來(lái)說(shuō)也是很有裨益的吧。

一些常見(jiàn)的公共交互有：刪除操作、編輯操作、分享操作。只要把這些操作流程在公共交互里完整地寫(xiě)一遍，后面的就可以大膽地復(fù)用這些公共交互了。

四、溝通方式

正如我一開(kāi)始說(shuō)的，我們是一個(gè)新的團(tuán)隊(duì)，大家彼此之間都沒(méi)有合作過(guò)，也不清楚各自的工作方式，導(dǎo)致在設(shè)計(jì)過(guò)程中會(huì)暴露出很多問(wèn)題。我是交互設(shè)計(jì)師，可能對(duì)于整體的把控會(huì)更加良好一些，視覺(jué)設(shè)計(jì)師天生比較浪漫主義一些，所以一些事情需要我為他們考慮到，如果沒(méi)有考慮到，他們可能就會(huì)耽誤項(xiàng)目的進(jìn)度。

說(shuō)兩點(diǎn)在溝通方式上出現(xiàn)的問(wèn)題，供大家參考一下。

第一點(diǎn)出現(xiàn)在進(jìn)度安排上，在我做完交互稿之后，發(fā)現(xiàn)頁(yè)面的數(shù)量大大超出了預(yù)期，結(jié)果他們一聽(tīng)到就開(kāi)始信心大受打擊。雖然我一直反復(fù)跟他們說(shuō)，增加的頁(yè)面都比較簡(jiǎn)單，但是他們完全都聽(tīng)不進(jìn)去，直到后面他們兩個(gè)人的分工出現(xiàn)了問(wèn)題。所以這時(shí)候我就只能跳出來(lái)做協(xié)調(diào)人。首先當(dāng)然是統(tǒng)計(jì)頁(yè)面的數(shù)量，然后給頁(yè)面分級(jí)，分為“主-次-送”三個(gè)等級(jí)，主要頁(yè)面當(dāng)然是比較復(fù)雜的頁(yè)面，次要頁(yè)面是簡(jiǎn)單頁(yè)面，考慮到有一些頁(yè)面實(shí)在太簡(jiǎn)單了，就當(dāng)作贈(zèng)送給公司的。分級(jí)的好處就是，他們對(duì)于項(xiàng)目的難度有一個(gè)較為良好的認(rèn)識(shí)，壓力沒(méi)有那么大。然后我根據(jù)他們的工作能力（一個(gè)工作經(jīng)驗(yàn)較為豐富，另一個(gè)經(jīng)驗(yàn)稍顯欠缺）、剩余的時(shí)間以及他們之前的協(xié)商結(jié)果，把整個(gè)計(jì)劃表表做出來(lái)，計(jì)劃表一是可以方面地查看進(jìn)度，更加重要的是對(duì)視覺(jué)設(shè)計(jì)師的一種“束縛”，束縛他們的浪漫主義。所以計(jì)劃表一出來(lái)，整個(gè)項(xiàng)目才得以順利實(shí)施下去。

第二點(diǎn)出現(xiàn)在成果交付上，首先就是他們的視覺(jué)稿。他們習(xí)慣用Photoshop作圖，然后也比較隨性，隨性的結(jié)果就是雖然界面看起來(lái)很干凈整潔，但是圖層的管理就一坨shit，各種“組1”、“圖層1”、“方塊1”的命名層出不窮，外人根本沒(méi)法看。你要問(wèn)為什么這會(huì)是溝通的問(wèn)題？因?yàn)槲乙惨獙徍怂麄兊囊曈X(jué)稿，有些小問(wèn)題我自己就改掉了，但是面對(duì)這么雜亂的圖層結(jié)構(gòu)，真的是沒(méi)什么改動(dòng)的欲望。

接著，就是視覺(jué)稿PSD的命名了。我在做交互稿的時(shí)候已經(jīng)將功能模塊化了，每個(gè)模塊都會(huì)有各自的命名和編號(hào)，注意這里的編號(hào)才是最重要的，因?yàn)榭梢苑奖愕鼗厮荨５撬麄冊(cè)诿臅r(shí)候恰恰忘了把這個(gè)編號(hào)加到每一張PSD上，所以后面整理的時(shí)候出了糾紛，還是在我的強(qiáng)烈要求下，他們才全部改了一遍。然后是這么一堆PSD文件，不可能就隨便打個(gè)包吧，至少按每個(gè)模塊建立一個(gè)文件夾吧。然后如果PSD文件有改動(dòng)，要怎么命名吧。這些問(wèn)題都是一開(kāi)始沒(méi)有想到的，也沒(méi)有協(xié)商好，結(jié)果導(dǎo)致合作上出現(xiàn)了問(wèn)題。雖然都是小問(wèn)題的，但是這些都是會(huì)在項(xiàng)目的末尾暴露出來(lái)，說(shuō)實(shí)話，影響最大的其實(shí)是心情，真的是心好累。

「優(yōu)設(shè)八月份人氣最高的好文」

1. 一個(gè)常見(jiàn)問(wèn)題：《為什么你的設(shè)計(jì)作品看上去不夠?qū)I(yè)？》
2. 自學(xué)的正確姿勢(shì)：《光臨摹可不行！平面設(shè)計(jì)師在空余時(shí)間應(yīng)該怎樣自學(xué)？》
3. 大家最喜歡的中文字體：《超實(shí)用！有哪些免費(fèi)的中文字體可以下載？》

原文地址：jianshu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com