當前位置:首頁 > 運營推廣

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

時間:2019-08-01 13:11:03來源:運營推廣作者:seo實驗室小編閱讀:85次「手機版」
 

深圳笨笨切圖

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

一、概述

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

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

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

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

注意:區分iOSAndroid的規范

問題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.數據一定要效驗,例如:字符型轉數字型,如果轉換失敗一定要有缺省值; 服務端響應數據是否有效判斷

總結

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

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

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

相關閱讀

分期樂樂黑卡功能淺析:如何提高樂黑卡功能滲透率?

文章對分期樂App進行簡單的探索,通過產品功能的體驗分析中,總結提煉關于提升樂黑卡功能滲透率的幾點思考。希望能夠給你帶來啟發。

匈牙利命名法

匈牙利命名法許多 Windows 程序員都使用“匈牙利標記法”作為變量命名約定。這是為了紀念具有傳奇色彩的微軟程序員 Charles Simo

神圣的NLP!一文理解詞性標注、依存分析和命名實體識別

詞性標注(Part-of-Speech Tagging, POS)、命名實體識別(Name Entity Recognition,NER)和依存句法分析(Dependency Parsing)是自然語言處

北推云科技,淺析網絡口碑打造

網絡口碑打造是指企業在建立品牌的過程中,將口碑與網絡結合起來的一種網絡宣傳模式。傳統的口碑打造,企業通常需要花費大量的精力與

不止于美:淺析信息圖形設計

人在喝完可樂一小時內會有什么反應?高速發展的中國互聯網在一分鐘內會發生些什么事情?美國大選,川普和希拉里的支持率到底有多大差距

分享到:

欄目導航

推薦閱讀

熱門閱讀

三肖必中特l三肖中特期期准免费