淺析app設(shè)計:切圖的命名規(guī)范與標注說明

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

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

一、概述

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

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

切圖:APP切圖是實現(xiàn)設(shè)計效果的重要環(huán)節(jié),開發(fā)們在實現(xiàn)的過程中需要計算好各個元素的位置,排布,然后再調(diào)用我們切好的圖進行填充。其存在是為了程序提高產(chǎn)品的開發(fā)效率和團隊協(xié)作

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

注意:區(qū)分iOS與Android的規(guī)范

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

1、方便修改與迭代

對于項目而言,產(chǎn)品的優(yōu)化迭代是必要的,除非打算放棄治療。

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

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

2、方便更快捷查找

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

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

3、方便設(shè)計團隊溝通

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

4、方便程序開發(fā)溝通

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

二、關(guān)于切圖命名與標注的那些事

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

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

標注與切圖工具:

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

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

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

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

三、命名規(guī)范

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

命名規(guī)則——命名也就是需要告訴開發(fā),文件是什么、在哪里、第幾頁、什么狀態(tài)。

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

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

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

1、產(chǎn)品模塊_類別_功能_狀態(tài).png

例:發(fā)現(xiàn)_圖標_搜索_點擊狀態(tài)

2、場景_模塊_狀態(tài).png

例:登錄_按鈕_默認狀態(tài)

3、產(chǎn)品模塊_場景_二級場景_狀態(tài).png

按鈕_個人_設(shè)置_默認狀態(tài)

名詞解析:

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

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

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

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

【狀態(tài)】:一般指當前切圖的狀態(tài)區(qū)分,像按鈕的話,有默認狀態(tài)、點擊時狀態(tài)、按下狀態(tài)、不可點擊狀態(tài)等,網(wǎng)頁上按鈕還有懸停狀態(tài)。

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

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

四、基本命名規(guī)范一覽

名詞命名:

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

操作命名:

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

狀態(tài)命名:

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

五、題外話-Android編碼規(guī)范建議18條

分享來自網(wǎng)絡知識。 適合手機app設(shè)計師和android 工程師閱讀。

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

總結(jié)

以上是總結(jié)了切圖的命名規(guī)范與標注,之后再詳談切圖規(guī)范。

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

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

 

作者:JaylonG 一位對產(chǎn)品有著濃厚興趣的UI/UX設(shè)計師。

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

題圖來自PEXELS,基于CC0協(xié)議

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

    來自四川 回復
  2. 999

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

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

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

      來自臺灣 回復
  5. 產(chǎn)品經(jīng)理也要知道這些規(guī)則嗎

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

      回復