手機(jī)客戶端UI設(shè)計(jì)規(guī)范模版(原創(chuàng)技巧)

1、問題：UI設(shè)計(jì)師的視覺設(shè)計(jì)工作中，一半是效果設(shè)計(jì)，另外一半是切圖切圖再切圖，調(diào)整調(diào)整再調(diào)整的過程。在給與視覺資源的時(shí)候，往往會(huì)碰到這樣的問題：比如有個(gè)公共的title bar重新修改后，需要跟負(fù)責(zé)每個(gè)模塊的開發(fā)人員都通知一遍；再比如有個(gè)列表項(xiàng)的字號(hào)或色值重新定義后，需要去查看是否還有同類型的其他頁面的列表項(xiàng)也要跟著改過來。重復(fù)的勞動(dòng)工作不僅浪費(fèi)時(shí)間，也顯得你和開發(fā)人員沒有一點(diǎn)默契可言。舉個(gè)例子，如下，tab bar的樣式和每個(gè)標(biāo)題的顏色和字號(hào)需要重新設(shè)計(jì)調(diào)整，而同時(shí)有三個(gè)開發(fā)人員會(huì)用到tabbar資源，以及統(tǒng)一的字號(hào)顏色。設(shè)計(jì)師當(dāng)然要保證同功能的bar都保持一樣，但代價(jià)就是將改動(dòng)說明重復(fù)三遍：

2、A童鞋呀，這個(gè)bar的樣式變了，bar標(biāo)題的顏色字號(hào)也變了；B童鞋呀，這個(gè)bar的樣式變了，bar標(biāo)題的顏色字號(hào)也變了；C童鞋呀，這個(gè)bar的樣式變了，bar標(biāo)題的顏色字號(hào)也變了.解決辦法：如何做到一拖三的效果呢？筆者在此分享淡定應(yīng)對(duì)多個(gè)開發(fā)人員共同向你尋求資源的困境，并能統(tǒng)一管理調(diào)配這些資源。（1）明確資源有哪些？建立資源庫(kù)；（2）定義模塊。對(duì)模塊進(jìn)行分類并定義，比如我分的大類有7個(gè)，包括：background/bar/list/control/tag/content/operate list，原則：（1）對(duì)于公共模塊要做到不重復(fù)也不遺漏，不然就失去定義模塊的意義，比如一個(gè)客戶端中有關(guān)lis

3、t的樣式可能就有好幾種，一行的、兩行的、三行的等等，都要查漏補(bǔ)缺；（2）每個(gè)模塊中盡量保證字號(hào)色值、左右上下間距都包含，因?yàn)殚_發(fā)人員找到對(duì)應(yīng)的公共模塊后，可以迅速獲悉這幾個(gè)方面的信息，迅速開發(fā)。再次聲明以上規(guī)范好處（對(duì)比以前每個(gè)頁面進(jìn)行標(biāo)注的做法）：（1）即視覺調(diào)整的工作量大概可節(jié)省一半。即一個(gè)設(shè)計(jì)師對(duì)應(yīng)一個(gè)統(tǒng)籌資源的開發(fā)人員，當(dāng)有一個(gè)小的變動(dòng)（如title bar的樣式或字體顏色）時(shí)，不用所有人員都通知一遍，直接聯(lián)系該開發(fā)人員即可；（2）視覺設(shè)計(jì)師交接時(shí)，可以減少溝通成本；（3）加強(qiáng)了同一類型設(shè)計(jì)部件的統(tǒng)一性。設(shè)計(jì)師也會(huì)大意的時(shí)候，即在同一類型的設(shè)計(jì)部件中，設(shè)置了不同的參數(shù)，導(dǎo)致設(shè)計(jì)效果圖本身不統(tǒng)一；最后談一下該規(guī)范