身在中小團(tuán)隊(duì),如何快速制作有效的UI設(shè)計(jì)規(guī)范?

這是一種簡(jiǎn)單快速制作規(guī)范的方法。

文章內(nèi)容已經(jīng)在公司內(nèi)部得到實(shí)踐,可行性很高。適用中小團(tuán)隊(duì)。

規(guī)范所用素材非工作設(shè)計(jì)界面,但不影響內(nèi)容。

關(guān)于設(shè)計(jì)規(guī)范的好處,這里不詳細(xì)描述。

分析以往痛點(diǎn)

總結(jié):規(guī)范落實(shí)起來難,效果就低很多,溝通成本加大,背離初衷。

問題場(chǎng)景

一家公司有30名設(shè)計(jì)師,4個(gè)前端開發(fā)團(tuán)隊(duì),已有一份PDF規(guī)范,有趣的事情是,設(shè)計(jì)師的設(shè)計(jì)稿間距高度,字號(hào),顏色用法還是很大的個(gè)人習(xí)慣。有時(shí)還是重復(fù)做已有的控件。然后開發(fā)爸爸們,同樣也是,同一個(gè)可以復(fù)用的導(dǎo)航欄,側(cè)邊欄等,都重復(fù)去寫了代碼。小團(tuán)隊(duì)之間,都單獨(dú)有自己的控件庫(kù),在UI驗(yàn)收時(shí)才能去解決,但是這無(wú)形中增加了成本。

我們能否減少這些問題呢,帶著這些疑問,我也摸索出一點(diǎn)小經(jīng)驗(yàn)。這也是我真正想要分享的內(nèi)容。

首先確保團(tuán)隊(duì)已經(jīng)使用Sketch辦公。

為什么用Sketch?關(guān)于這個(gè)問題,誰(shuí)用誰(shuí)知道。主要還是人效方面。沒有接觸過Sketch的朋友可以移到文末,小編準(zhǔn)備了一份教程。

先出設(shè)計(jì)稿還是先出規(guī)范?

對(duì)于大多數(shù)小伙伴來說很疑惑,我也疑惑過,但是,你還沒設(shè)計(jì),怎么知道你真正想要的是什么顏色什么字號(hào)?這里我建議是,部分設(shè)計(jì)稿出來再做規(guī)范,然后慢慢的完善。

你說,公司已經(jīng)有規(guī)范了怎么辦,那可以把規(guī)范換一種方式呈現(xiàn)出來。

規(guī)范制作

這里主要以一個(gè)iOS設(shè)計(jì)稿為主,涉及到安卓的話,如果要精準(zhǔn),也是需要2份設(shè)計(jì)稿和2份設(shè)計(jì)規(guī)范。

這是一份Sketch制作的設(shè)計(jì)稿。

我會(huì)簡(jiǎn)單做一個(gè)設(shè)定:

視覺規(guī)范:

顏色:界面用色/背景用色/文字用色/線條用色

字號(hào):標(biāo)題字/正文字/輔助字

行高

間距

有小伙伴有疑問了,上面的色值那個(gè)c1/c2的代號(hào)是什么意思?

這個(gè)代號(hào)主要是為了方便前端開發(fā)人員建立UI庫(kù),比如,我們?cè)O(shè)計(jì)稿一個(gè)間距是20px,可能在開發(fā)眼里的20px和他所計(jì)算的單位不在一個(gè)頻道。如果以J2來代號(hào)來表達(dá)一個(gè)間距值,那么不管雙方是什么單位,但是至少這個(gè)間距大小呈現(xiàn)出來是一致的。當(dāng)開發(fā)問設(shè)計(jì)人員某個(gè)地方間距是多少,你可以直接告訴他是J2,那么開發(fā)就會(huì)知道,哦,是20dp。

交互樣式:點(diǎn)擊效果。

組件庫(kù):

元素層:按鈕

組件層:可直接復(fù)用

我們把設(shè)計(jì)規(guī)范做完了,如何去使用呢?

需要分2個(gè)方向,一個(gè)是UI,一個(gè)是前端。

設(shè)計(jì)師規(guī)范的使用:

可以直接在sketch上面拷貝樣式,或者直接Command C+V。還可以調(diào)出別的同事的畫板,然后導(dǎo)入到自己的機(jī)子上。

插件名字叫做Sketch Palettes??梢陨暇W(wǎng)搜索,可以下載的。

前端開發(fā)規(guī)范使用:

他們沒有sketch的前提下, 可以借用插件Marketch導(dǎo)出一個(gè)html格式。

導(dǎo)出后用瀏覽器打開index.html

這樣的呈現(xiàn)方式是不是比一個(gè)PDF文件要好呢?左邊是類目,右邊是相關(guān)的屬性。也可以直接下載某些圖標(biāo)。

當(dāng)設(shè)計(jì)規(guī)范建立,開發(fā)人員也建立了自己的UI庫(kù),然后再去推進(jìn)之前剩下沒有統(tǒng)一樣式的小尾巴。

如果以后設(shè)計(jì)稿迭代怎么辦?

只需要做一個(gè)類似的說明文檔即可。方法可以有很多,相信大家可以解決。

本文轉(zhuǎn)自站酷(zcool.com.cn/article/ZNTY1NDYw.html)

作者丨歐巴醬

Meia平臺(tái)(http://meia.me/)上還有更多Sketch教程,感興趣的朋友可以前往網(wǎng)站搜索學(xué)習(xí)哦~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容