如何將設(shè)計(jì)移交給開發(fā)人員

根據(jù)我的個(gè)人經(jīng)驗(yàn)和其他設(shè)計(jì)師的經(jīng)驗(yàn),以下是你應(yīng)該避免的最常見的錯(cuò)誤,以及一些可以幫助你把設(shè)計(jì)文件交給開發(fā)人員的小技巧:

1. 準(zhǔn)備風(fēng)格指南:

1.1、色板:

在開始設(shè)計(jì)之前向開發(fā)人員提供調(diào)色板,可以節(jié)省大大節(jié)省他們創(chuàng)建變量的時(shí)間。

Material Design by Google

調(diào)色板工具:

http://paletton.com

https://coolors.co/

https://colorhunt.co/

1.2、圖集

所有類型的圖標(biāo)都應(yīng)該是相同的大小。

(建議:在一個(gè)方框內(nèi)添加圖標(biāo),這樣無論圖形多大,圖標(biāo)都會(huì)與正方形的大小相同)

免費(fèi)的圖標(biāo):

https://iconmonstr.com/

1.3、字體指南:

在設(shè)計(jì)中始終使用Web字體,桌面字體與Web字體不同,Web Font是專門設(shè)計(jì)用于網(wǎng)頁的字體。Google字體是最大的Web字體開源項(xiàng)目。

為開發(fā)人員預(yù)定義字體大小:

(標(biāo)題1)Heading H1:Roboto Medium 24px Sentence

(正文1)Body 1: Roboto Regular 16px Sentence

(正文2)Body 2: Roboto Regular 14px Sentence

(按鈕)Button: Roboto Medium 14px All Caps

(備注)Caption: Roboto Regular 12px Sentence

(上劃線)Overline: Roboto Regular 10px All Caps

1.4、狀態(tài):

示例-狀態(tài)類型:

(啟用)Enabled button: #6200EE

(禁用)Disabled button: 20% #6200EE

(懸停)Hover Button: 80% #6200EE

(活動(dòng))Active State: 100% #6200EE

2. 原型和文檔:

設(shè)計(jì)原型用于與團(tuán)隊(duì)共享您的設(shè)計(jì),以獲取反饋并與開發(fā)人員共享交互。

原型使開發(fā)人員可以了解設(shè)計(jì)中的交互,動(dòng)畫,手勢和行為。

為開發(fā)人員準(zhǔn)備簡短的文檔,包括無法通過原型共享的細(xì)節(jié),開發(fā)人員必須嚴(yán)格遵守的內(nèi)容,有關(guān)您的設(shè)計(jì)的評(píng)論以及規(guī)格。

例:卡片正文的最大長度應(yīng)該顯示前100個(gè)字符…

原型工具:

Invision

Flinto

Adobe XD

JustInMind

保證“像素完美”:

邊距:元素之間的所有邊距應(yīng)匹配。

填充:與邊距相同的規(guī)則。

圖形:在用戶眼中,非像素完美的圖形往往看起來模糊或像素化。


3.準(zhǔn)備分享:

準(zhǔn)備設(shè)計(jì)文件:

1. 圖層名稱

2. 將他們分組

3.圖標(biāo)名稱、組件

4. 刪除不必要的層

設(shè)計(jì)的移交工具:

允許您輕松地與開發(fā)人員共享規(guī)格、資產(chǎn)、代碼片段的平臺(tái):

Zeplin

Invision

Avocode

Marvel

Supernova

Material Design Gallery


4. 設(shè)計(jì)系統(tǒng):

為了避免這些錯(cuò)誤并更好地理解設(shè)計(jì),以下是最著名的系統(tǒng):

設(shè)計(jì)系統(tǒng)是開放源碼的系統(tǒng),它提供設(shè)計(jì)工具、資源和界面指導(dǎo)方針,供設(shè)計(jì)師和開發(fā)人員隨時(shí)使用。

Google: Material Design

IBM: Carbon Design System

Microsoft: Fluent Design System

5. 總結(jié)

UI設(shè)計(jì)師的工作之一,就是幫助開發(fā)人員的工作變得容易。同時(shí),如果您一直遵循這些技巧,您的設(shè)計(jì)將變得更容易,降低編寫代碼的難度,意味著用戶最終使用的產(chǎn)品和你的設(shè)計(jì)會(huì)高度一致。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容