本文，我們將討論4個具體問題，你可以在打開設(shè)計軟件之前詢問開發(fā)團(tuán)隊，以確保你們能更好的配合以及設(shè)計的落地。
問題1：期望以哪種方式交接工作？
我總是喜歡詢問開發(fā)人員習(xí)慣使用哪些程序來交接工作，這直接關(guān)系到我用哪款軟件來切圖標(biāo)注。
我曾多次見過設(shè)計師（包括我自己）對最終交接文檔作出充分假設(shè)，但是當(dāng)真正交接工作時，不得不返工。當(dāng)你完成設(shè)計并開始開發(fā)時，發(fā)現(xiàn)不得不重??新保存或重新設(shè)計并保存成不同格式的文件。
以下是在開始設(shè)計之前需要與開發(fā)團(tuán)隊一起考慮和討論的幾個問題和場景。
應(yīng)該如何準(zhǔn)備文件？
他們喜歡把所有文件都放在同一個文件夾里，還是放在不同的文件夾里？
他們是否愿意收到一個分層的源文件，以便他們從中提取圖像？
如果是這樣的畫，他是哪種類型的源文件？PSD？ai，eps還是分層pdf？Sketch？
他們手里的軟件版本跟你的是否一樣（即他們能否打開它）？
你如何分組和命名這些圖層以便他們快速理解并找到圖層？
他們希望你從 Dreamweaver 或其他 WYSIWYG 編輯器輸出 html 嗎？
如果這是你正常的工作流程，請詢問他們是否適合他們的工作。10次??中有9次他們可能不喜歡這種方法。
從圖形界面程序生成的代碼通常很丑、沒有組織和甚至不可用。根據(jù)我的經(jīng)驗，這種方法通常會降低設(shè)計師和開發(fā)人員的工作效率，因此避免使用圖形界面程序生成代碼。如果您認(rèn)為它是一種選擇，則應(yīng)首先與開發(fā)人員進(jìn)行討論。
是否需要其他說明文件？
你如何計劃記錄原型中不明顯的設(shè)計元素？像顏色代碼，高度/寬度尺寸，字體，字體大小，間距，Alpha值，懸停效果，動效和其他數(shù)據(jù)點(diǎn)等事情必須定義和記錄，以便開發(fā)人員不需要猜測和/或作出假設(shè)。
一些有用的應(yīng)用程序來幫助這個方面：
OmniGraffle。可以很容易地繪制箭頭，添加符號和其他關(guān)鍵點(diǎn)解釋設(shè)計的細(xì)節(jié)。
Avocode。我從來沒有親自使用過這個，但它可以幫助你從 photoshop 或 Sketch 導(dǎo)出顏色，圖像，字體，文本，CSS，尺寸和唯獨(dú)?？梢韵懊嬗懻撨^的許多麻煩。
Inspect?from InVision。Inspect 是另一種令人驚訝的交接工具，具有上述產(chǎn)品中可用的功能組合，如果您使用invision 進(jìn)行原型設(shè)計，則特別有用。我個人迫不及待地想將這添加到我的工作流程中。
問題2：網(wǎng)站是否會使用前端框架構(gòu)建？
有許多流行的框架可以避免從設(shè)計和開發(fā)過程中花費(fèi)很多繁瑣的工作。知道開發(fā)人員正在使用哪個（如果有的話）對于正確設(shè)置您的設(shè)計文檔至關(guān)重要。
許多流行的框架如 Bootstrap 和 960網(wǎng)格 采用12列系統(tǒng)。為什么12列？12是保證可分割性的最小數(shù)字。您可以有12,6,4,3,2或一列均勻間隔的列，這讓你在處理這些限制時可以更輕松地進(jìn)行設(shè)計決策。
根據(jù)這些框架的結(jié)構(gòu)來自預(yù)先設(shè)定的維度。清楚框架的所有數(shù)值，從開始 - 全局填充，列寬度，裝訂線寬度到媒體查詢斷點(diǎn)。
我的設(shè)計中生產(chǎn)中斷，因為我在 SKetch 板上設(shè)置的邊距比 Bootstrap 中設(shè)置的邊距大5px。這對任何人來說都沒有什么樂趣，因為設(shè)計必須重新配置，然后記錄下來解決一個本來不存在的問題。了解該網(wǎng)站將構(gòu)建在哪個框架上，并找出它如何轉(zhuǎn)化為您的圖形布局軟件的畫板或畫布。
“從一開始就知道你的框架尺寸的價值?！?/p>
除了網(wǎng)格之外，許多框架都帶有內(nèi)置的設(shè)計元素，如按鈕、表單工具、提示等等。如果你想修改或者覆蓋這些預(yù)設(shè)風(fēng)格（我比較建議你把它們修改成適合你們的品牌）確保你的開發(fā)人員都知道這一點(diǎn)。
幾乎每次我設(shè)計的輸入表單，都具有特定邊框顏色、半徑和寬度，開發(fā)人員還是會使用框架默認(rèn)值，因為我沒有明確指出修改。
不要指望開發(fā)人員注意到你為達(dá)到更友好的感覺為按鈕精心選擇的2px邊框半徑差異。他們沒有接受過這樣的訓(xùn)練，但他們可以像機(jī)器一樣遵循說明文件。
一些最流行的框架：
Bootstrap
Foundation by Zurb
Pure by Yahoo
Skeleton
Semantic UI
…還有更多
在開始設(shè)計之前知道你應(yīng)該清楚開發(fā)人員喜歡哪種框架。
大多數(shù)框架都有模板資源，你可以輕松通過設(shè)置使其與 Photoshop 或 Sketch 文檔完全匹配。這會讓每個人的生活更輕松，所以請使用他們！
問題3：哪些語言和庫構(gòu)成了開發(fā)環(huán)境，具有哪些限制？
即使你不知道如何自己編寫代碼，你也可以找到一個好的部件或插件。代碼片段隨時可用 - 它們使您的網(wǎng)站的功能比過去幾十年更加便捷。注意：插件并非一成不變。
如果你嘗試為網(wǎng)站找到預(yù)先構(gòu)建的小部件，那很好，而且通常很有幫助。但是，你之前需要做的是找出要在其中搜索的語言。
“在開始設(shè)計之前知道你的開發(fā)者喜歡哪個框架?！?/p>
每個插件或小部件都是用作者選擇的特定編碼語言編寫的。很多時候，一個小部件或插件的編寫語言與網(wǎng)站所在的語言或環(huán)境不匹配，正如你可以想象的那樣，這會導(dǎo)致問題 - 至少會導(dǎo)致開發(fā)人員脾氣暴躁。
如果你的網(wǎng)站在 PHP上運(yùn)行，那么 Ruby 里的天氣應(yīng)用程序?qū)o法工作。一個 WordPress 的幻燈片插件不會在一個建立在 .net 中的網(wǎng)站上實現(xiàn)某些功能。角度加載條模塊在使用 backbone.js 的站點(diǎn)上不會起作用，盡管這兩個模塊都根植于 JavaScript 。
如果你找到的小部件和開發(fā)環(huán)境相匹配，可以用它作為解釋你期望團(tuán)隊行為的案例。你的開發(fā)人員可能會選擇完全按照原樣來實現(xiàn)它，但是向他們提供一個包含代碼的 zip 文件并要求他們“彈出”，就像讓客戶端向你發(fā)送一系列100px 寬的縮略圖并要求你“創(chuàng)建一個那些大幻燈片。“這是放肆的，不可能實現(xiàn)的。
問題4：我們需要支持哪些瀏覽器？
好的，你可能知道，如果你遇到過開發(fā)者，你可能知道 Internet Explorer 是他們存在的禍根。
幸運(yùn)的是，在整個設(shè)計和開發(fā)社區(qū)中，過去困擾在線創(chuàng)作者的瀏覽器差異正在迅速縮小到一小部分違規(guī)者。即使微軟已經(jīng)放棄了 IE 瀏覽器，現(xiàn)在正在所有新計算機(jī)上發(fā)布新版的，友好的標(biāo)準(zhǔn)。
了解你需要支持的傳統(tǒng)瀏覽器可以顯著改變你的設(shè)計決策。以下是一些舊版瀏覽器無法支持的CSS屬性列表?？纯茨闶欠褡⒁獾搅艘环N趨勢。
Border-radius: IE8
text-shadow: IE8, 9, Firefox 2, 3
box-shadow: IE8, Firefox 2, 3
RGBA (color transparency): ie8
Flexbox (more on this later): IE8, 9. Needs adjustments for older versions of Safari and Firefox
Multiple backgrounds: IE8, Firefox 2-3.5
SVG: IE8 (many others for specific things)
CSS Animation: IE8, 9, Firefox 2-4, Safari 3.1 – 3.2
CSS 2D transforms (rotation, scale): IE8, Firefox 2, 3
Media Queries: IE8, Firefox 2, 3
如果你發(fā)現(xiàn)必須支持 IE8 或極其舊版本的 Firefox 和 Safari 時，請考慮如何在沒有附加效果的情況下顯示元素。你所有的圓角都是正方形的，動效是靜止的，陰影不可見等。
希望這些問題能夠幫助您在設(shè)計流程開始時與您的開發(fā)人員建立清晰的溝通渠道。提前知道約束有助于提供一套“規(guī)則”來進(jìn)行設(shè)計和正確決策，可以解決設(shè)計和開發(fā)階段之間發(fā)生的許多問題，即使不是大多數(shù)。
