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

2 評論 12979 瀏覽 110 收藏 10 分鐘

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

文件整理的好處

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

剛工作的時候,為了省事,于是將所有的圖層都隨意擺放(針對的是sketch軟件進行講解的,Photoshop的應用同理),有時候實在是太多了就進行群組,英文叫group,有點像昨天在群里發(fā)的開源項目的源文件的樣子。如下圖

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

為什么這么說呢?因為作為設計師,基本上沒有一稿過的情況出現(xiàn),方案都是同PM、同部門其他設計師、開發(fā)商量后一步步定下來的,所以反復更改的情況肯定存在,并且可能拿出以前版本的文件進行參考。那么對于文件來說,總是需要尋找、選定、更改各個版本號以及各個圖層,如果時間一直浪費在尋找上面,真心劃不來,無意義。

于是針對個人來說整理好單個文件以及項目組的文件,是一件非常重要的事情,它提高了你的時間利用率。

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

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

軟件這樣設計的好處就是,很方便在sketch修改好文件之后進行導出。如果你的同事做的sketch雜亂無章,那么這項工作就必須由你自己來進行承擔,那感覺真的是很想罵人。但反過來也是一樣,你自己的sketch文件不整理好,也會給別人帶來困擾,久而久之,別人也不太喜歡跟你合作。

當咱們將工作的場景放出來進行回顧的時候,就知道自己應該怎么做了。

文件夾的整理方法

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

一般一個項目會涉及到以下幾個內容的整理:

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

而作為設計師,接觸最多的就是01,02,03,所以講他們三個放在最前面,這也是給文件夾進行編序的原因,所以看到從01到08,序列號是按照它們使用的頻率和重要程度來進行排序的。

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

每個版本又可以進行功能塊進行子文件夾的分類,比方說上圖中的這一部分。

Archive是用來放歷史文件的,對于設計師來說歷史文件是不能丟的,說不準哪一天老板就說“還是改回第一版吧~”你懂得~

以上是針對工作內容綜合性比較強的同學進行設計的文件整理方式。倘若有的同學工作內容比較集中,比方做單做UI或者單做UX的,那么文件的整理方式也可以進行如下進行整理。因為內容比較單一,所以只需要進行版本號進行區(qū)分也行。

文件夾的命名方式是“項目名+版本號”。比方說1.0版本的千尋租房項目,那么命名就是“千尋租房1.0”,如果有平級的2.0版本,就在它平行的下面再建一個文件夾叫“千尋租房2.0”。那么無論找什么版本的文件都一目了然。

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

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

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

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

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

相關閱讀

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

專欄作家

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

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

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 寫的不錯 :mrgreen:

    來自廣東 回復