淺析app設計:切圖的命名規范與標注說明
寫這篇文章也是總結了以前剛接觸時候遇到的問題,還有來自其他朋友的提問。關于切圖的命名規范給人的第一印象就是全英文,看不懂,讓很多人望而卻步,當你有所了解之后,你就會發現其實沒那么復雜。本文主要為了給想了解命名規范的朋友解解惑。
一、概述
一款產品的落地,必將先經歷過需求分析、產品定位、項目擬定、功能分析、原型設計、再到設計稿輸出,接下來再到開發,切圖、標注是設計與開發需要溝通的步驟之一。
問題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、產品模塊_類別_功能_狀態.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 工程師閱讀。
- java代碼中不出現中文,最多注釋中可以出現中文
- 局部變量命名、靜態成員變量命名 只能包含字母,單詞首字母除第一個外,都為大寫,其他字母都為小寫
- 常量命名 只能包含字母和_,字母全部大寫,單詞之間用_隔開
- 圖片盡量分拆成多個可重用的圖片
- 服務端可以實現的,就不要放在客戶端
- 引用第三方庫要慎重,避免應用大容量的第三方庫,導致客戶端包非常大
- 處理應用全局異常和錯誤,將錯誤以郵件的形式發送給服務端
- 圖片的處理
- 使用靜態變量方式實現界面間共享要慎重
- Log(系統名稱模塊名稱接口名稱,詳細描述)
- 單元測試(邏輯測試、界面測試)
- 不要重用父類的handler,對應一個類的handler也不應該讓其子類用到,否則會導致message.what沖突
- activity中在一個View.OnClickListener中處理所有的邏輯
- strings.xml中使用%1$s實現字符串的通配
- 如果多個Activity中包含共同的UI處理,那么可以提煉一個CommonActivity,把通用部分叫由它來處理,其他activity只要繼承它即可
- 使用button+activitgroup實現tab效果時,使用Button.setSelected(true),確保按鈕處于選擇狀態,并使activitygroup的當前activity與該button對應
- 如果所開發的為通用組件,為避免沖突,將drawable/layout/menu/values目錄下的文件名增加前綴 18.數據一定要效驗,例如:字符型轉數字型,如果轉換失敗一定要有缺省值; 服務端響應數據是否有效判斷
總結
以上是總結了切圖的命名規范與標注,之后再詳談切圖規范。
其實管理文件也是門學問,它能讓你省下沒必要耗費的時間與精力。溝通也是能夠幫助你更好地與團隊,不同部門更高效地推進項目的開展。
每個公司都有自己的命名和輸出模式的,以上是和大家交流下自己工作中的方法和心得,希望對于大家有所幫助。如果覺得以上有什么補充的,歡迎大家留言告知,不勝感激。
作者:JaylonG 一位對產品有著濃厚興趣的UI/UX設計師。
本文由 @Jaylon 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自PEXELS,基于CC0協議
我覺得自動標注切圖的話,摹客就很好用?!缸詣?手動」的標注方式,可以幫助設計師輕松交付設計稿。
除了基礎的多選標注、百分比標注等標注方式,摹客還可以將某個圖層設置為百分比參照,當鼠標點擊、hover設計圖上的其他圖層,會自動以該區域作為參照計算百分比,查看百分比標注更準確更便捷。
999
感謝分享
視頻英文拼寫錯誤了。。
好的,非常感謝
產品經理也要知道這些規則嗎
你的問題其實見仁見智的,掌握更多的產品相關知識,能夠更好地與設計、程序部門調和溝通,但是并不是強制產品就必須要會設計,會代碼