根據(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í)間。
調(diào)色板工具：
http://paletton.com
https://coolors.co/
https://colorhunt.co/
1.2、圖集
(建議:在一個(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ì)高度一致。
