圖片也要做的命名規範

Image for post
Image for post

應該很多人都說過這個話題,但是都是偏工程師的命名規則為主,再來團隊合作最需要的就是簡單易懂的命名規範。

一,設計師的圖檔命名

製作命明規範的好處

Image for post
Image for post
錯誤的做法

大部分設計師都會這樣的命名,包括剛開始自己也是會使用這樣的方式,如果當發生突發狀況想要其中一個版本的一個小元件,要找起來也是非常麻煩。

養成良好的命名習慣是很重要的,可以利用版本命名,或者是時間命名都可以更加清楚明白。

2.容易找出檔案

在修改檔案的時候,整齊規範的原始檔是不是在修改圖層的時候更容易找到該圖層

Image for post
Image for post
未來CSS命名設為原始黨檔案與結構

3.方便設計團隊溝通

制定一套規範,讓溝通更加效率。

Image for post
Image for post
來源:https//dribbble.com/shots/2941059-Rollbox-Style-Guide

4.方便程式開發溝通

有些工程師需要設計師切好圖,標註好,命名好給他們,有些工程師只需要你的設計檔,他們自行切圖標注,所以設計時與開發溝通非常重要。但是無論如何,規範的命名是最有效的溝通。

Image for post
Image for post
開發製作流程

二,命名規範

切圖命名規則 - 需要告訴開發,文件是什麼,在哪裡,第幾頁,什麼狀態。

模組_類別_功能_狀態

Image for post
Image for post
製作的製作的製作的Airbnb為範例

頁面_模塊_狀態

Image for post
Image for post
製作的製作的製作的Airbnb為範例

三,命名規則

名詞:

  • nav(navbar):導航選單
  • tab(tabbar):標籤
  • btn(button):按鈕
  • img(image):圖片
  • del(delete):刪除
  • msg(message):訊息
  • icon:圖標
  • content:內容
  • left / center / right:左 / 中 / 右
  • logo:商標
  • banner:廣告
  • link:連結
  • user:使用者
  • note:註釋
  • bar :進度條
  • profile:個人資料
  • ranked:排名
  • light:亮
  • dark:黑暗

操作:

  • back:返回
  • edit:編輯
  • download:下載
  • collect:收藏
  • comment:評論
  • play:播放
  • pause:暫停
  • pop (popupup):彈跳出
  • audio:音訊
  • video:影片
  • login:登入
  • register:註冊
  • refresh:更新

狀態:

  • disabled:無法點擊
  • highlight:點擊時
  • default:默認
  • normal:一般
  • pressed:按下
  • slide:滑動
  • primary:主要
  • success:成功
  • warning:警告
  • danger:危險
  • info:信息
  • error:錯誤
  • muted:靜音

四,分享

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store