淺析app設計:切圖的命名規范與標注說明

7 評論 39435 瀏覽 195 收藏 13 分鐘

寫這篇文章也是總結了以前剛接觸時候遇到的問題,還有來自其他朋友的提問。關于切圖的命名規范給人的第一印象就是全英文,看不懂,讓很多人望而卻步,當你有所了解之后,你就會發現其實沒那么復雜。本文主要為了給想了解命名規范的朋友解解惑。

一、概述

一款產品的落地,必將先經歷過需求分析、產品定位、項目擬定、功能分析、原型設計、再到設計稿輸出,接下來再到開發,切圖、標注是設計與開發需要溝通的步驟之一。

問題1:切圖與標注是什么?

切圖:APP切圖是實現設計效果的重要環節,開發們在實現的過程中需要計算好各個元素的位置,排布,然后再調用我們切好的圖進行填充。其存在是為了程序提高產品的開發效率和團隊協作。

標注:標注能夠幫助其他團隊理解設計頁面的布局關系、模塊大小、顏色與字體規范等等。

注意:區分iOS與Android的規范

問題2:為什么要制定規范?(規范存在的意義)

1、方便修改與迭代

對于項目而言,產品的優化迭代是必要的,除非打算放棄治療。

有很多人對于文檔的命名是這樣的:

遇到突發情況,比如你完成了設計后,突然要你改動哪個icon,你要找起來也是相當麻煩。養成良好的命名習慣很重要,比如可以利用版本命名,亦或時間命名都可以更清晰地標明。

2、方便更快捷查找

對于個人而言,psd文件有時候需要修改,整齊規范的psd文檔是不是在修改圖層的時候更容易找到該圖層呢?

(以上來自網絡,圖層命名沒有固定性)

3、方便設計團隊溝通

如果設計團隊有一套完整的設計規范,那是再好不過。如果沒有這樣完整設計系統,那么我們就得自己通過溝通制定一套規范,才能讓溝通更加高效。建議可以多看看網易、Google、QQ等企業的設計規范進行學習。

4、方便程序開發溝通

曾經與程序溝通過需求,有些程序需要你切好圖,標注好,命名好給他們,有些程序只需要你的設計檔,他們自行切圖標注,所以設計時與開發溝通尤為重要。但是無論如何,規范的命名是最有效的溝通。

二、關于切圖命名與標注的那些事

像以前的設計輸入都是手動輸出,如今有了各種軟件與插件,給設計師提供了更高效與快捷的方式去解決切圖問題。但是軟件只是輔助特性,某些模塊的切圖利用軟件插件并不能切圖滿足程序所需要的尺寸,這時候還是需要人工來切圖。

這里安利下個人工作中使用的應用

標注與切圖工具:

PxCook(像素大廚):是一款pc/mac上的軟件,個人經常使用,具有與ps銜接的切圖,標注也比較方便快捷,還能直接導入psd文檔與圖片,自動識別當前像素比例判斷是什么設備。

Cuttman:是一款運行在ps中的插件,能夠自動將你需要的圖層進行輸出,方便你在pc、ios、Android等端上使用。本人使用過,是比較小也快捷的插件。

Sketch其實在輸出資源這一塊也挺方便,不過個人工作上用的最多還是Photoshop,喜歡的朋友可以自行研究。

*在設計過程中要注意:舊版設計文件千萬別刪!這是很重要的point,希望所有設計同胞重視,千萬別揣摩你的公司上層、領導還是甲方需求,因為你永遠也預料不到他們最終決定會不會就是第一版。(不過這里的前提是,保留還不錯的設計,摒棄掉自己都認為不足的部分)

三、命名規范

命名規范并不是唯一的,工作上需要的命名也不相同,但是唯一的目的就是要清晰。以下的命名規則為工作中較為常用的三種規則,為大家羅列出來。

命名規則——命名也就是需要告訴開發,文件是什么、在哪里、第幾頁、什么狀態。

切圖命名英文縮寫三個原則:

  1. 較短的單詞可通過去掉“元音”形成縮寫
  2. 較長的單詞可取單詞的頭幾個字母形成縮寫
  3. 此外還有一些約定成俗的英文單詞縮寫.

以下三種命名規則供大家參考,具體需求還是要和開發溝通:

1、產品模塊_類別_功能_狀態.png

例:發現_圖標_搜索_點擊狀態

2、場景_模塊_狀態.png

例:登錄_按鈕_默認狀態

3、產品模塊_場景_二級場景_狀態.png

按鈕_個人_設置_默認狀態

名詞解析:

【場景和二級場景】:一般指app的一級頁面與二級頁面。

例如上:個人頁-場景,個人頁里的設置頁-二級場景

【模塊】:一般指頁面中的部分區塊,也有指背景圖。如背景、按鈕、icon都是模塊。

【功能】:一般指的是,頁面或者模塊中,需要操作或點擊的某個點,如上圖,發現頁中的搜索icon。

【狀態】:一般指當前切圖的狀態區分,像按鈕的話,有默認狀態、點擊時狀態、按下狀態、不可點擊狀態等,網頁上按鈕還有懸停狀態。

注意:所有命名只能為小寫英文字母,不要為了好看或者像平時打英語一樣,首字母是大寫之類的,也不可以為中文,不然對于開發來說,是沒有意義的,因為他們還是得自己再改一遍。

注意:ios切圖需要在命名后加上@2x、@3x后綴名,安卓的切圖不需要加,不過有些安卓開發需要切圖后綴加上尺寸。

四、基本命名規范一覽

名詞命名:

  • bg(backgrond): 背景
  • nav(navbar):導航欄
  • tab(tabbar):標簽欄
  • btn(button):按鈕
  • img(image):圖片
  • del(delete):刪除
  • msg(message):信息
  • icon:圖標
  • content:內容
  • left/center/right:左/中/右
  • logo:標識
  • login:登錄
  • register:注冊
  • refresh:刷新
  • banner:廣告
  • link:鏈接
  • user:用戶
  • note:注釋
  • bar:進度條
  • profile:個人資料
  • ranked:排名
  • error:錯誤

操作命名:

  • close:關閉
  • back:返回
  • edit:編輯
  • download:下載
  • collect:收藏
  • comment:評論
  • play:播放
  • pause:暫停
  • pop:彈出
  • audio:音頻
  • video:視頻

狀態命名:

  • selected:選中
  • disabled:無法點擊
  • highlight:點擊時
  • default:默認
  • normal:一般
  • pressed:按下
  • slide:滑動

五、題外話-Android編碼規范建議18條

分享來自網絡知識。 適合手機app設計師和android 工程師閱讀。

  1. java代碼中不出現中文,最多注釋中可以出現中文
  2. 局部變量命名、靜態成員變量命名 只能包含字母,單詞首字母除第一個外,都為大寫,其他字母都為小寫
  3. 常量命名 只能包含字母和_,字母全部大寫,單詞之間用_隔開
  4. 圖片盡量分拆成多個可重用的圖片
  5. 服務端可以實現的,就不要放在客戶端
  6. 引用第三方庫要慎重,避免應用大容量的第三方庫,導致客戶端包非常大
  7. 處理應用全局異常和錯誤,將錯誤以郵件的形式發送給服務端
  8. 圖片的處理
  9. 使用靜態變量方式實現界面間共享要慎重
  10. Log(系統名稱模塊名稱接口名稱,詳細描述)
  11. 單元測試(邏輯測試、界面測試)
  12. 不要重用父類的handler,對應一個類的handler也不應該讓其子類用到,否則會導致message.what沖突
  13. activity中在一個View.OnClickListener中處理所有的邏輯
  14. strings.xml中使用%1$s實現字符串的通配
  15. 如果多個Activity中包含共同的UI處理,那么可以提煉一個CommonActivity,把通用部分叫由它來處理,其他activity只要繼承它即可
  16. 使用button+activitgroup實現tab效果時,使用Button.setSelected(true),確保按鈕處于選擇狀態,并使activitygroup的當前activity與該button對應
  17. 如果所開發的為通用組件,為避免沖突,將drawable/layout/menu/values目錄下的文件名增加前綴 18.數據一定要效驗,例如:字符型轉數字型,如果轉換失敗一定要有缺省值; 服務端響應數據是否有效判斷

總結

以上是總結了切圖的命名規范與標注,之后再詳談切圖規范。

其實管理文件也是門學問,它能讓你省下沒必要耗費的時間與精力。溝通也是能夠幫助你更好地與團隊,不同部門更高效地推進項目的開展。

每個公司都有自己的命名和輸出模式的,以上是和大家交流下自己工作中的方法和心得,希望對于大家有所幫助。如果覺得以上有什么補充的,歡迎大家留言告知,不勝感激。

 

作者:JaylonG 一位對產品有著濃厚興趣的UI/UX設計師。

本文由 @Jaylon 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我覺得自動標注切圖的話,摹客就很好用?!缸詣?手動」的標注方式,可以幫助設計師輕松交付設計稿。
    除了基礎的多選標注、百分比標注等標注方式,摹客還可以將某個圖層設置為百分比參照,當鼠標點擊、hover設計圖上的其他圖層,會自動以該區域作為參照計算百分比,查看百分比標注更準確更便捷。

    來自四川 回復
  2. 999

    來自廣東 回復
  3. 感謝分享

    來自河北 回復
  4. 視頻英文拼寫錯誤了。。

    來自北京 回復
    1. 好的,非常感謝

      來自臺灣 回復
  5. 產品經理也要知道這些規則嗎

    回復
    1. 你的問題其實見仁見智的,掌握更多的產品相關知識,能夠更好地與設計、程序部門調和溝通,但是并不是強制產品就必須要會設計,會代碼

      回復