你一直在做你最新的設(shè)計(jì)項(xiàng)目，客戶已經(jīng)批準(zhǔn)了你精心創(chuàng)造的數(shù)字概念?，F(xiàn)在是時(shí)候把這些設(shè)計(jì)變成現(xiàn)實(shí)了，你有一個(gè)開發(fā)人員排隊(duì)去做那件事。

你的任務(wù)完成了，對(duì)吧?不完全是。你要確保你的開發(fā)人員有最好的開端，以便創(chuàng)建你想象的網(wǎng)站。

安排一次與開發(fā)人員面對(duì)面的會(huì)議，討論項(xiàng)目的細(xì)節(jié)和目標(biāo)，這將有助于調(diào)整您的期望，并使概念背后的意圖更加清晰。很有可能他們會(huì)問你一些問題，要求你提供一些你還沒有想到的東西!

這也不是一件一勞永逸的事情，隨著項(xiàng)目的進(jìn)展，開發(fā)人員會(huì)遇到一些問題或需求。選擇一個(gè)可以輕松討論的溝通渠道將極大地幫助你們。

注釋你的概念

開發(fā)人員可能看起來像魔術(shù)師，他們給你的網(wǎng)站帶來生活，但他們不是千里眼!在需要高級(jí)功能的地方注釋你的概念，可以減少歧義，更有可能使你的酷，古怪的想法成為現(xiàn)實(shí)。如果這是一個(gè)特別不尋常的特性，您可能想要找到一個(gè)做類似事情的網(wǎng)站或代碼沙箱的例子。

這是一個(gè)Figma的注釋工具的例子，用來為開發(fā)者做注釋。

Figma和Sketch都有注釋功能，使注釋更加簡單，也允許多方注釋。如果要處理pdf文件，還可以通過adobeacrobat使用注釋工具。

指定基本知識(shí)

現(xiàn)代前端開發(fā)的基礎(chǔ)是干巴巴的。有些人可能會(huì)爭辯說，關(guān)于代碼的思考是非常枯燥的，但是我們并不是在討論這個(gè)問題——在這里，dry代表不要重復(fù)自己。大多數(shù)開發(fā)人員會(huì)從定義變量開始處理項(xiàng)目:什么顏色，字體大小，網(wǎng)格列…任何可以重用的東西!好的、一致的設(shè)計(jì)遵循同樣的原則——盡管這是一個(gè)很難開始的習(xí)慣。

提示:如果在項(xiàng)目開始時(shí)就采用這種心態(tài)，那么定義變量總是會(huì)更容易!

顏色

制作一個(gè)樣式指南，指定你在設(shè)計(jì)中使用的顏色。想想它們的邏輯應(yīng)用，以幫助路標(biāo)顯示它們作為變量是如何工作的——例如，你在段落文本、超鏈接和背景中使用了什么顏色?您是否考慮過用顏色來傳達(dá)狀態(tài)信息，比如成功、警告和錯(cuò)誤?

字體

你在你的項(xiàng)目中使用過哪些字體?你使用的字體大小是否一致?如果您還沒有，可以考慮一個(gè)基于比例的類型規(guī)模—我喜歡使用ModularScale來幫助您。

基本的HTML元素

想想這些基本的html標(biāo)簽的通用樣式:

按鈕和鏈接呢?當(dāng)鼠標(biāo)懸停、聚焦(使用鍵盤上的tab鍵)或禁用時(shí)，它們應(yīng)該做什么?

表單、字段和輸入

表單字段應(yīng)該是什么樣子的?提交表單時(shí)是否需要進(jìn)行驗(yàn)證檢查?復(fù)選框和單選按鈕怎么樣?

你不可能完全覆蓋所有的可能性——讓你的開發(fā)人員使用一些常識(shí)來填補(bǔ)空白，并在他們有任何問題時(shí)向他們提供幫助。用John Maxwell和你阿姨家辦公室墻上的貼紙的話來說，團(tuán)隊(duì)合作讓夢想成真。

Favicons通常被認(rèn)為是瀏覽器標(biāo)簽欄中出現(xiàn)在網(wǎng)站標(biāo)題左側(cè)的小圖標(biāo)。如今，你網(wǎng)站上的favicon的應(yīng)用已經(jīng)非常廣泛了，出現(xiàn)在谷歌搜索結(jié)果和應(yīng)用瓷磚中。還有額外的主題選項(xiàng)，比如可以定制谷歌Chrome Android瀏覽器欄的顏色。

使用像realfavicongenerator這樣的生成器站點(diǎn)，可以讓你在做決定時(shí)不那么痛苦，允許你上傳所需的特定圖形，為Windows Metro tiles和macOS Safari pins創(chuàng)建圖標(biāo)的輪廓，并將所有內(nèi)容打包到易用的文件和代碼中。

壓縮你的照片

沒有人希望在慢速連接或使用數(shù)據(jù)計(jì)劃時(shí)加載20MB的圖像——提前計(jì)劃并縮小圖像尺寸，使它們可以用于web的生產(chǎn)，這是有好處的。如果你擔(dān)心圖像壓縮會(huì)損害你的圖像質(zhì)量，不用擔(dān)心——在質(zhì)量嚴(yán)重受損之前，你可以使用圖像壓縮。

首先降低圖像分辨率——對(duì)于批處理作業(yè)，我使用Adobe Photoshop的圖像處理器腳本將圖像縮小到適合1920 x 1200像素。

另外,如果你在一個(gè)靜態(tài)的項(xiàng)目中工作,將使用特定的圖像只在特定的地方——你可以使用你的設(shè)計(jì)軟件(幾乎所有主流UI軟件允許你做這個(gè)現(xiàn)在)出口你的圖片在2 x支持設(shè)備與高像素密度大小。

我還將我的圖像顏色配置文件轉(zhuǎn)換為SRGB，以確保大多數(shù)現(xiàn)代顯示類型的一致性(這是可選的)

然后，我將新縮小的圖片以80%的質(zhì)量在imageOptim上運(yùn)行。一般情況下，我的目標(biāo)是將我的圖片壓縮到300kb以下——如果有任何圖片壓縮后仍然明顯超過這個(gè)目標(biāo)，我將再次以70%的質(zhì)量運(yùn)行這些圖片(盡管我不推薦低于這個(gè)水平)。

別忘了你也可以為png做這個(gè)!在imageOptim中啟用PNGCrush可以讓你顯著減少png的大小…不過要準(zhǔn)備好，這需要一段時(shí)間。

使您的向量svg易于使用

如果您的設(shè)計(jì)包含使用vector軟件創(chuàng)建的圖形或插圖，則可以在web上作為SVG文件使用。通常，這些文件會(huì)比jpg或png小得多。您可以導(dǎo)出圖形在大多數(shù)(如果不是所有)矢量軟件在這種格式。

您還可以選擇使用imageOptim或SVGOMG壓縮SVG代碼而不犧牲質(zhì)量。您的開發(fā)人員可能已經(jīng)使用了一個(gè)腳本，該腳本在處理用于生產(chǎn)的站點(diǎn)時(shí)自動(dòng)執(zhí)行此操作，因此有必要提前詢問一下。

檢查你的執(zhí)照

如果你使用的是高級(jí)字體，確保你已經(jīng)購買了webfont許可證，這樣你就可以把正確的文件交給開發(fā)者。我建議早做而不是晚做——盡管不經(jīng)常，偶爾web版本的字體會(huì)有與桌面版本略有不同的邊框，這讓開發(fā)人員在以后的工作中非常痛苦。

如果你一直在使用庫存照片的樣本(或者如果你一直在瘋狂地從谷歌圖片中找到任何你能找到的)，確保在你上線之前一切都是干凈的。確保你購買了授權(quán)的照片，如果你想使用某些照片需要署名，讓開發(fā)者知道這一點(diǎn)。