這篇譯文來自Invision團(tuán)隊(duì)免費(fèi)提供的系列課程：設(shè)計(jì)師如何與開發(fā)者合作。本系列的第一篇請(qǐng)查看：

設(shè)計(jì)師如何與開發(fā)者合作（一）：什么是為開發(fā)而設(shè)計(jì)？

設(shè)計(jì)是如何與開發(fā)者合作（二）：從哪里開始？需要詢問開發(fā)者的問題

在上一節(jié)中，我們學(xué)到了一些在開始設(shè)計(jì)之前你必須詢問開發(fā)者的問題。隨著設(shè)計(jì)過程的推進(jìn)，溝通要進(jìn)一步進(jìn)行。所謂“好”的產(chǎn)品與“偉大”的產(chǎn)品之間的差異，很大程度上取決于你有沒有在設(shè)計(jì)與開發(fā)過程中與開發(fā)者好好溝通。

在這一篇文章中，我們將告訴你在設(shè)計(jì)過程中你需要詢問開發(fā)者哪些問題，以及在團(tuán)隊(duì)協(xié)作過程中需要注意的事項(xiàng)。

問題5：我可以在mockup中使用示例數(shù)據(jù)或內(nèi)容嗎？

所有的數(shù)據(jù)和內(nèi)容都被你（設(shè)計(jì)師）嚴(yán)格控制的mockup往往看起來很棒。你可以使用漂亮的股票圖像，使用完美的數(shù)字符，有趣的文本塊。雖然這有助于你在展示提案時(shí)看上去絕對(duì)“完美”，但是這樣的設(shè)計(jì)與實(shí)際上線的設(shè)計(jì)往往是有差距的。

如果可以的話，設(shè)計(jì)中最好使用真實(shí)的數(shù)據(jù)，這樣做大有好處。你需要理解你的設(shè)計(jì)時(shí)機(jī)上線后將有怎樣的效果。比如說用戶提供了模糊的圖像，賬戶名稱使用了2個(gè)姓氏等等，以及許多用戶在操作時(shí)可能產(chǎn)生的情況。

如果說你的網(wǎng)站變化的部分較少，比如說是銷售網(wǎng)站或者登錄頁，盡量保存好之前設(shè)計(jì)過的所有版本文件。

對(duì)于會(huì)動(dòng)態(tài)生成內(nèi)容的網(wǎng)站，這里有一些方法可以產(chǎn)生“真實(shí)”的內(nèi)容:

如果你的產(chǎn)品是一個(gè)全新的品牌，模擬盡可能多的用戶可能會(huì)提供的內(nèi)容

-從競(jìng)品的網(wǎng)站上找到樣本。（在mockup階段“借鑒”競(jìng)品是沒有問題的）。

-創(chuàng)建一個(gè)團(tuán)隊(duì)賬號(hào)，并試著上傳運(yùn)行不同的內(nèi)容，包括圖片，文字等等。

-創(chuàng)建用戶畫像，使用虛構(gòu)的用戶名、故事背景、典型場(chǎng)景等構(gòu)建。即便用戶暫時(shí)不存在，這仍然有助于從不同的視覺生成賬戶和數(shù)據(jù)。

-如果已經(jīng)有數(shù)據(jù)了，要求開發(fā)人員提供數(shù)據(jù)給你。

在我的職業(yè)生涯早期，我重新設(shè)計(jì)了某個(gè)已經(jīng)擁有數(shù)據(jù)的網(wǎng)站。我就是簡(jiǎn)單地逛逛網(wǎng)站，隨便選幾個(gè)用戶，把之前網(wǎng)站上有的數(shù)據(jù)Copy過來用在我的mockup中。

雖然這可能比你用自己編的數(shù)據(jù)好，但這也不是最好的。因?yàn)槟銜?huì)下意思地去選擇那些會(huì)讓你的設(shè)計(jì)看起來更好的賬戶。

如果說你可以要求開發(fā)者從數(shù)據(jù)庫中找一些賬號(hào)和序列出來，那么相對(duì)于你自己選擇的內(nèi)容，你的設(shè)計(jì)真正上線時(shí)將會(huì)更加靈活和有力。

我喜歡詢問的一些問題有：

以下這些元素對(duì)應(yīng)最長(zhǎng)有多少字符？最短有多少字符？一般是多少字符？

-個(gè)人或企業(yè)名稱

-標(biāo)題

-說明

- 要點(diǎn)

記住，你不僅僅要為最長(zhǎng)或最短的數(shù)據(jù)設(shè)計(jì)相應(yīng)的距離，你也需要明白一般情況下數(shù)據(jù)有多長(zhǎng)。這一點(diǎn)非常重要，因?yàn)檫@代表著你的產(chǎn)品在大多數(shù)時(shí)候的狀態(tài)。你需要為最長(zhǎng)和最短的情況進(jìn)行相應(yīng)的設(shè)計(jì)，但無論如何，處于一般狀態(tài)時(shí)，應(yīng)該是你的設(shè)計(jì)看起來最棒的時(shí)候。

占比最大的幾種上傳圖像尺寸是多少？它們各占多少百分比？

圖片和影響的尺寸很大程度上決定你的布局。如果圖像尺寸是由用戶自己上傳的照片所決定的，那么就是一個(gè)巨大的挑戰(zhàn)了。

如果說你打算使用縮略圖或者裁剪圖像的方式，那你需要明白一般用戶上傳的尺寸大小，來讓這樣的設(shè)定更適合用戶。

為開發(fā)而設(shè)計(jì)更多時(shí)候是去做一種理智而艱難的決策。

問題6：你希望我在開發(fā)過程中的參與程度有多高？

這是一個(gè)意味深長(zhǎng)的問題。因?yàn)槟阆胍拇鸢甘恰昂芏唷?。最好早點(diǎn)明確這個(gè)問題，避免之后的沖突。

具體來說，如果你有前端開發(fā)經(jīng)驗(yàn)，你會(huì)寫HTML和CSS嗎？開發(fā)者們會(huì)喜歡自己寫完代碼，然后讓你去挑出他們代碼中的細(xì)節(jié)錯(cuò)誤？

如果你自己不親自寫代碼，那么沒隔多久你來檢查一次開發(fā)成果？我見過大多數(shù)的開發(fā)者不把自己看作也不想成為設(shè)計(jì)師。如果說有組織清晰的設(shè)計(jì)檢驗(yàn)，能夠幫助開發(fā)人員，并且避免后期的評(píng)審中被這些問題拖后腿。

記住你所做的這一切的目標(biāo)是讓開發(fā)者可以放松地詢問你的問題或意見，而不是為了讓你去挑他們工作的錯(cuò)誤。每個(gè)項(xiàng)目中都會(huì)有一些不知道由哪一方來負(fù)責(zé)的問題，針對(duì)這些問題，同時(shí)考慮你的專業(yè)意見和代碼庫會(huì)幫助想出更好的解決方案。

通用的法則：描述你希望實(shí)現(xiàn)的行為，而不是你認(rèn)為可以實(shí)現(xiàn)它的技術(shù)。

我之前已經(jīng)強(qiáng)調(diào)過這點(diǎn)了。沒有人喜歡被告訴如何做好自己的工作（作為設(shè)計(jì)師你也不喜歡被客戶教導(dǎo)如何設(shè)計(jì)吧？）尤其是被那些沒有他們專業(yè)的人教導(dǎo)。你很容易找到你想要實(shí)現(xiàn)的效果或頁面的范例，有時(shí)你會(huì)抑制不住地用你那些所謂的專業(yè)知識(shí)去告訴開發(fā)者要怎么實(shí)現(xiàn)這些效果。我卻你還是不要這么做，你只需要告訴他們你希望實(shí)現(xiàn)什么樣的行為或效果就行了。

在IPhone和IPad還沒有出世之前，基本上所有的網(wǎng)站動(dòng)畫都是由Flash來構(gòu)建的（當(dāng)然你也應(yīng)該知道現(xiàn)在Flash快要絕跡了）。但在Flash還占據(jù)Web端動(dòng)畫的絕對(duì)王者地位時(shí)，其實(shí)已經(jīng)存在很多別的實(shí)現(xiàn)動(dòng)畫的方式，并且它們可能其實(shí)會(huì)更適合你的項(xiàng)目。

而在當(dāng)時(shí)，我發(fā)現(xiàn)因?yàn)樽约簺]有使用正確的語言而與開發(fā)者產(chǎn)生了很多政治。比如我曾經(jīng)說：“讓我們使用Flash來實(shí)現(xiàn)經(jīng)驗(yàn)的導(dǎo)航跳轉(zhuǎn)和Hover動(dòng)畫”。這實(shí)在太糟糕了。我其實(shí)應(yīng)該這樣說：“我希望導(dǎo)航可以有這個(gè)動(dòng)畫效果，有什么辦法可以做到這一點(diǎn)，并且不會(huì)影響代碼的完整性？”

所以你應(yīng)該做的事描述清楚你想要有的最終效果和你為什么希望實(shí)現(xiàn)它（比如）動(dòng)畫可以使得用戶更加愉悅，從而讓產(chǎn)品脫穎而出。）之后讓開發(fā)者們自己去決定是用什么樣的技術(shù)來實(shí)現(xiàn)它。

任何優(yōu)秀的開發(fā)者都會(huì)喜歡挑戰(zhàn)。讓他們明白你想要實(shí)現(xiàn)這個(gè)效果的意義，他們就會(huì)更加愿意幫助你達(dá)成它。而結(jié)果就是一個(gè)更好的網(wǎng)站和更好的代碼。

采用這篇文章提到的技巧，你應(yīng)該能夠更好地與開發(fā)者處好關(guān)系了。接下來的課程會(huì)告訴大家?guī)椭鷮?shí)現(xiàn)響應(yīng)式布局和友好的代碼的具體技術(shù)，敬請(qǐng)期待。

小結(jié)

我可以在mockup中使用示例數(shù)據(jù)或內(nèi)容嗎？

對(duì)于新產(chǎn)品：

-從競(jìng)爭(zhēng)對(duì)手的網(wǎng)站采集樣本數(shù)據(jù)

-動(dòng)員團(tuán)隊(duì)創(chuàng)建多個(gè)賬號(hào)

-創(chuàng)建Persona

對(duì)于現(xiàn)在產(chǎn)品的再設(shè)計(jì)：

-開發(fā)者可否從數(shù)據(jù)庫中抽取一些樣本出來？

-最長(zhǎng)的數(shù)據(jù)有多長(zhǎng)？最短的數(shù)據(jù)有多短？通常情況下數(shù)據(jù)有多長(zhǎng)？

-用戶上傳圖片的最常見尺寸是多少？

我在開發(fā)過程中的參與程度需要有多高？

-我需要寫HTML/CSS嗎？

-開發(fā)過程中的哪個(gè)階段我可以查看目前成果，從而發(fā)現(xiàn)設(shè)計(jì)問題并提出建議？

-我們和開發(fā)者可以一起對(duì)一些不好劃分權(quán)責(zé)的問題進(jìn)行決策嗎？

盡可能讓Mockup接近真實(shí)產(chǎn)品上線后的樣子。建立合理的工作流程，讓你和開發(fā)者可以更好地相處合作。