新手轉(zhuǎn)向資深的必經(jīng)之路——交互文件命名的最詳細(xì)規(guī)范(上)

2 評(píng)論 12987 瀏覽 110 收藏 10 分鐘

經(jīng)過(guò)一期帶團(tuán)隊(duì)的體驗(yàn),閣主發(fā)現(xiàn)文件命名有點(diǎn)讓人抓狂,實(shí)在忍不住更新一篇文章去說(shuō)說(shuō)這其中大家約定俗成的規(guī)則,不僅包括切圖命名規(guī)則,還包括文件整理規(guī)范。之前樓主有整理過(guò)簡(jiǎn)單的,貌似不夠用,今天再來(lái)具體說(shuō)說(shuō)。

文件整理的好處

閣主在說(shuō)一件事的時(shí)候,喜歡將原因或者自己的經(jīng)歷先交代出來(lái),那樣大伙也看得更明白,知道為什么要這樣做。

剛工作的時(shí)候,為了省事,于是將所有的圖層都隨意擺放(針對(duì)的是sketch軟件進(jìn)行講解的,Photoshop的應(yīng)用同理),有時(shí)候?qū)嵲谑翘嗔司瓦M(jìn)行群組,英文叫g(shù)roup,有點(diǎn)像昨天在群里發(fā)的開(kāi)源項(xiàng)目的源文件的樣子。如下圖

可后來(lái),漸漸發(fā)現(xiàn),這樣隨意的做法在做方案的過(guò)程中看似節(jié)約了時(shí)間,實(shí)際上是浪費(fèi)了時(shí)間

為什么這么說(shuō)呢?因?yàn)樽鳛樵O(shè)計(jì)師,基本上沒(méi)有一稿過(guò)的情況出現(xiàn),方案都是同PM、同部門其他設(shè)計(jì)師、開(kāi)發(fā)商量后一步步定下來(lái)的,所以反復(fù)更改的情況肯定存在,并且可能拿出以前版本的文件進(jìn)行參考。那么對(duì)于文件來(lái)說(shuō),總是需要尋找、選定、更改各個(gè)版本號(hào)以及各個(gè)圖層,如果時(shí)間一直浪費(fèi)在尋找上面,真心劃不來(lái),無(wú)意義。

于是針對(duì)個(gè)人來(lái)說(shuō)整理好單個(gè)文件以及項(xiàng)目組的文件,是一件非常重要的事情,它提高了你的時(shí)間利用率。

后來(lái),進(jìn)了更大更規(guī)范的公司,所接觸的項(xiàng)目就更多了。于是文件的管理,從個(gè)人查找自己的,變成了自己去查找團(tuán)隊(duì)的,以及團(tuán)隊(duì)查找團(tuán)隊(duì)公共的文件,有時(shí)候還要跨項(xiàng)目進(jìn)行公用功能塊,那就意味著有的文件是公用的。這樣看來(lái),文件管理也更加規(guī)范也更加重要,你能想象所有人像無(wú)頭蒼蠅一樣到處亂撞去找文件,并且從各個(gè)雜亂的圖層中找出某個(gè)圖層進(jìn)行修改的情況嗎?

再者,有的軟件非常依賴于sketch文件的整理,比方說(shuō)動(dòng)效原型的軟件Flinto,sketch里面的圖層按照什么規(guī)則進(jìn)行陳列,利用sketch的插件導(dǎo)入到Flinto的時(shí)候,它就會(huì)長(zhǎng)成什么樣。如下圖,左邊是sketch的圖層順序,右邊為Flinto的圖層順序。

軟件這樣設(shè)計(jì)的好處就是,很方便在sketch修改好文件之后進(jìn)行導(dǎo)出。如果你的同事做的sketch雜亂無(wú)章,那么這項(xiàng)工作就必須由你自己來(lái)進(jìn)行承擔(dān),那感覺(jué)真的是很想罵人。但反過(guò)來(lái)也是一樣,你自己的sketch文件不整理好,也會(huì)給別人帶來(lái)困擾,久而久之,別人也不太喜歡跟你合作。

當(dāng)咱們將工作的場(chǎng)景放出來(lái)進(jìn)行回顧的時(shí)候,就知道自己應(yīng)該怎么做了。

文件夾的整理方法

一般用一個(gè)大的文件夾作為一個(gè)項(xiàng)目最原始的管理,還是拿千尋租房的項(xiàng)目來(lái)打比方。首先大的文件夾取名為該項(xiàng)目的名字“千尋租房”。首先閣主先針對(duì)有多個(gè)版本需要管理,并且UI和UX都需要進(jìn)行接觸的工作內(nèi)容進(jìn)行說(shuō)明。文件整理方式如下圖。

一般一個(gè)項(xiàng)目會(huì)涉及到以下幾個(gè)內(nèi)容的整理:

  • 01 Wireframe即low-fi(低保真效果圖)文件的地址;
  • 02 Visual Flow是Hi-fi(高保真效果圖)地址;
  • 03 UI Kits是圖片資源輸出的地址(比如說(shuō)icon);
  • 04 Documents并不是產(chǎn)品文檔,而是APP里面需要的一些文檔,比方說(shuō)《服務(wù)條款》等;
  • 05 App icon即APP的icon在各個(gè)平臺(tái)上需要的尺寸圖和它的源文件,尺寸常備1024x1024px,512x512px,167x167px,152x152px,120x120px,80x80px,58x58px(可以參考相關(guān)iOS規(guī)范);
  • 06 Video Templates是有視頻文件的情況下放置視頻;
  • 07 AppStoreScreenShot專門為screenshot(即用來(lái)簡(jiǎn)介APP功能的頁(yè)面,需要上傳到各個(gè)APP的發(fā)布平臺(tái))進(jìn)行準(zhǔn)備的,因?yàn)榘沧科脚_(tái)實(shí)在太多了,有時(shí)候每個(gè)平臺(tái)規(guī)定的尺寸還不太一樣,所以專門為它怎被一個(gè)文件夾;
  • 08 Lauch Card因?yàn)樵赨I層面上需要耗費(fèi)的時(shí)間比較多,一般在改版的時(shí)候放在比較靠后的需求,所以也可以單列出來(lái)。

而作為設(shè)計(jì)師,接觸最多的就是01,02,03,所以講他們?nèi)齻€(gè)放在最前面,這也是給文件夾進(jìn)行編序的原因,所以看到從01到08,序列號(hào)是按照它們使用的頻率和重要程度來(lái)進(jìn)行排序的。

為什么不將03進(jìn)行版本的區(qū)分?因?yàn)橥粋€(gè)APP,從1.0改版的2.0的時(shí)候,icon可能延續(xù)了部分1.0版本的內(nèi)容,所以部分是公用的,如果再在上面進(jìn)行分類,反而程序員進(jìn)行查找的時(shí)候要去翻多個(gè)子文件夾,反而不太方便。設(shè)計(jì)師只要告訴程序員所用圖片的名字,程序員可以直接根據(jù)單個(gè)的icon路徑,直接在里面進(jìn)行提取。當(dāng)然這也只是其中的一種解決方案。

每個(gè)版本又可以進(jìn)行功能塊進(jìn)行子文件夾的分類,比方說(shuō)上圖中的這一部分。

Archive是用來(lái)放歷史文件的,對(duì)于設(shè)計(jì)師來(lái)說(shuō)歷史文件是不能丟的,說(shuō)不準(zhǔn)哪一天老板就說(shuō)“還是改回第一版吧~”你懂得~

以上是針對(duì)工作內(nèi)容綜合性比較強(qiáng)的同學(xué)進(jìn)行設(shè)計(jì)的文件整理方式。倘若有的同學(xué)工作內(nèi)容比較集中,比方做單做UI或者單做UX的,那么文件的整理方式也可以進(jìn)行如下進(jìn)行整理。因?yàn)閮?nèi)容比較單一,所以只需要進(jìn)行版本號(hào)進(jìn)行區(qū)分也行。

文件夾的命名方式是“項(xiàng)目名+版本號(hào)”。比方說(shuō)1.0版本的千尋租房項(xiàng)目,那么命名就是“千尋租房1.0”,如果有平級(jí)的2.0版本,就在它平行的下面再建一個(gè)文件夾叫“千尋租房2.0”。那么無(wú)論找什么版本的文件都一目了然。

Sketch文件的命名以及它的圖層的整理

1. Sketch的命名規(guī)則

Sketch的命名如上圖可以看出,“項(xiàng)目名字功能塊版本號(hào)_修改日期”,比方說(shuō)在5月5日做的千尋租房1.0版本的首頁(yè),那么它的命名就是“千尋租房_index_1.0_0505”。加上日期是為了方便別人和自己查看哪個(gè)是最新的版本,有時(shí)候在查找歷史文件時(shí)也能起到幫忙回憶的作用。

還有一點(diǎn)就是一般做項(xiàng)目的時(shí)候會(huì)給項(xiàng)目取一個(gè)英文的代號(hào)(特別是在跨國(guó)項(xiàng)目中,方便不同文化的人進(jìn)行溝通),所以,在sketch命名中也多用英文進(jìn)行命名。(英文不好的,用Google翻譯或者有道翻譯都是不錯(cuò)的選擇,據(jù)閣主經(jīng)驗(yàn),三個(gè)月之后自己就習(xí)慣了)

文章太長(zhǎng)分兩天更新,明天內(nèi)容更重要,將更新Sketch的Artboard(畫板)命名和Layer(圖層)命名、Symbol(組件)的命名、導(dǎo)出圖片的處理方式等等干貨,以及整理文件的思路總結(jié)~敬請(qǐng)期待~

相關(guān)閱讀

新手轉(zhuǎn)向資深的必經(jīng)之路——交互文件命名的最詳細(xì)規(guī)范(下)

專欄作家

Sophiallg,微信公眾號(hào):Sophia的玲瓏閣,人人都是產(chǎn)品經(jīng)理專欄作家。一枚愛(ài)折騰,愛(ài)健身的交互設(shè)計(jì)妹紙。

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

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

    來(lái)自廣東 回復(fù)