App設(shè)計(jì)中,如何更專業(yè)管理設(shè)計(jì)命名系統(tǒng)?

8 評(píng)論 16909 瀏覽 91 收藏 9 分鐘

文章主要是和大家分析如何更好更專業(yè)的去命名及輸出。

我們?cè)谧鲈O(shè)計(jì)的時(shí)候,經(jīng)常接觸到各種文件命名及各種元素命名,有個(gè)良好的命名習(xí)慣能給我們工作帶來(lái)極大的便利,設(shè)計(jì)師之間合作,需要有統(tǒng)一的命名規(guī)范及輸出規(guī)范,這樣才能保證設(shè)計(jì)師之間合作一個(gè)項(xiàng)目命名不會(huì)混亂,同時(shí)輸出資源給開發(fā)能體現(xiàn)我們的專業(yè)性,如果前期命名好了,后期開發(fā)直接調(diào)用資源,就不再需要重新去命名,這樣節(jié)省了開發(fā)兄弟時(shí)間。

這篇文章主要是和大家交流如何更好更專業(yè)的去命名及輸出。由于自己做的項(xiàng)目不能作為分享例子,所以下面我用虛擬概念項(xiàng)目來(lái)舉例說(shuō)明。

項(xiàng)目文件夾命名規(guī)則

當(dāng)我們做一個(gè)新項(xiàng)目的時(shí)候,需要提前把所需工具準(zhǔn)備好,比如建立文件夾系統(tǒng),來(lái)存放我們Project resources。

如上圖就是我平時(shí)做項(xiàng)目時(shí)候的文件夾,當(dāng)然服務(wù)器上也是同樣文件夾,每天都會(huì)更新內(nèi)容上去到,各自負(fù)責(zé)的內(nèi)容模塊就按照需求往里面放內(nèi)容,然后群里通知大家,每個(gè)迭代需求里面都有同樣的文件夾,當(dāng)然并不是每次迭代文件夾都是填滿的,有時(shí)候會(huì)增加一些內(nèi)容進(jìn)來(lái),但是大方向就是這樣走,堅(jiān)持下去然后養(yǎng)成習(xí)慣。

設(shè)計(jì)中畫板的命名

每個(gè)Artboard的命名都有規(guī)則有條理,不能隨意的命名,如果多個(gè)設(shè)計(jì)師合作,那么這樣能保證大家命名風(fēng)格統(tǒng)一。

圖 1 : 大家看了會(huì)有什么感想,如果你把這個(gè)設(shè)計(jì)稿交互給你的合作同事,那么他會(huì)崩潰的,且輸出評(píng)審的時(shí)候,也顯得非常不專業(yè)。

圖2:清晰的場(chǎng)景命名方便設(shè)計(jì)輸出,設(shè)計(jì)師之間協(xié)同工作,及方便后期測(cè)試用例填寫。

命名大原則:產(chǎn)品模塊_場(chǎng)景_二級(jí)場(chǎng)景_狀態(tài)

模塊:指的是產(chǎn)品名稱,比如視頻,音樂(lè),閱讀。如果一個(gè)企業(yè)有多個(gè)產(chǎn)品,那么加上這個(gè)是必須的,方便日后歸檔。

場(chǎng)景和二級(jí)場(chǎng)景:一般指一個(gè)app一級(jí)頁(yè)面和二級(jí)頁(yè)面,一級(jí)場(chǎng)景一般都是主頁(yè)。

狀態(tài):比如popup /totast等等。

功能模塊命名

一個(gè)產(chǎn)品是由多個(gè)功能模塊組成的,那么為了我們?cè)O(shè)計(jì)方便,我會(huì)在sketch里面建立多個(gè)Pages規(guī)整這些模塊。

這里我說(shuō)下臨時(shí)過(guò)程稿,主要是有些方案如果領(lǐng)導(dǎo)當(dāng)時(shí)覺得不好,不要?jiǎng)h掉,把他放在這里面,以備不時(shí)之需。當(dāng)然如果自己都覺得不好,那就直接Delete吧。

ICON命名

ICON命名要求極為嚴(yán)格,涉及到我們切圖給開發(fā),所以我們命名爭(zhēng)取做對(duì),且需嚴(yán)格遵守規(guī)則,那么我們?cè)撊绾稳ッ?/p>

這里我先說(shuō)一些禁忌(安卓)

  1. 命名里面切記誤帶空格;如btn?_Home_new album。
  2. 不允許帶后綴數(shù)字;如@1,@2,@3的后綴不允許出現(xiàn),我發(fā)現(xiàn)好多設(shè)計(jì)師都這樣做,這個(gè)絕對(duì)不標(biāo)準(zhǔn);如btn_home_add@2,開發(fā)拿到資源會(huì)全部重新命名。如果我們遵守開發(fā)規(guī)則,那么切圖資源他們可直接調(diào)用。
  3. 命名里面不允許夾帶大小寫;如icon?_Home_search。

因?yàn)榘沧块_發(fā)用java去寫編寫的,java本身就有命名要求, 有空格資源是無(wú)法識(shí)別的。也不允許有大小寫,除非是java本身文件。不允許有數(shù)字,可用字母去代替數(shù)字。

 

設(shè)計(jì)中的組的命名

如果自己團(tuán)隊(duì)有完整的設(shè)計(jì)系統(tǒng),那么很好,直接調(diào)用控件。如果沒有這樣完整設(shè)計(jì)系統(tǒng),那么我們就得自己嚴(yán)格要求自己,把每個(gè)頁(yè)面的控件樣式命名清晰易懂。

各平臺(tái)開發(fā)都是由控件堆疊而成的,所以我們需熟悉我們所用的控件,然后直接用控件命名組。

Layer命名

圖層命名也需要掌握其中的技巧,掌握規(guī)律,文本用text,控件就用控件來(lái)命名如分割線(section divide),彈窗(popupup),列表(list),圖片(image),下拉列表(spinner),banner,loadingpage,bution,checkbox,radiobution等等,這里避免直接使用group命名,這樣顯得非常隨意。

資源輸出大原則

切圖資源輸出是非常重要的一個(gè)環(huán)節(jié),我們必須細(xì)心,且有一套好的方法,下面我來(lái)介紹下我目前使用的方法。

目前我們所切的就三套圖,分別是4倍,3倍和2倍,目前1倍圖手機(jī)基本快淘汰了,所以忽略。(設(shè)計(jì)稿直接用的2k屏設(shè)計(jì)的)。

把所有頁(yè)面的icon都放在一個(gè)畫板里面。共用的選出來(lái),放在一起,單獨(dú)輸出一個(gè)文件夾。其他的切圖對(duì)應(yīng)的可以直接排列好,然后輸出到三個(gè)目錄。

為什么要單獨(dú)把三個(gè)大小給算出來(lái)呢,估計(jì)好多人不理解,這樣能保證每個(gè)目錄上的icon都是清晰的,沒有虛邊。如果直接用sketch的自動(dòng)導(dǎo)出三套切圖,很難保證每個(gè)資源都是清晰的,目前安卓市場(chǎng)上,部分app產(chǎn)品的圖標(biāo)都不太清晰,不管是什么原因,我們先保證自己切圖資源是OK的。

那么如何快速計(jì)算大小?可以用這個(gè)工具 :

假如icon的大小是96px(4倍圖)。需輸出資源大小分別是4倍、3倍、2倍。

如果需要3倍圖,就是3/4=0.75=75%。

那就是96的75%倍等于72px 就得到3倍圖了,2倍圖方法一樣縮小50%。

好啦就到這里了,每個(gè)公司都有自己的命名和輸出模式,我這里只是和大家交流下一些方法和心得。

 

作者:Tony,微信公眾號(hào):洞見設(shè)計(jì),人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng),簡(jiǎn)歷指導(dǎo),每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn),擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì),關(guān)注【洞見設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

本文由 @TONY 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. ??????????

    回復(fù)
    1. 瑜兒

      回復(fù)
  2. 專業(yè)

    回復(fù)
  3. bution?button?

    來(lái)自上海 回復(fù)
  4. 總結(jié)得很贊????

    回復(fù)
  5. ??

    來(lái)自廣東 回復(fù)
  6. 剛問(wèn)了安卓開發(fā)的同事,他說(shuō)圖片資源文件是可以用數(shù)字的,并沒有說(shuō)不允許有數(shù)字?

    來(lái)自廣東 回復(fù)
    1. 噢,不好意思,我沒有說(shuō)清楚,是不能后綴有

      回復(fù)