切圖規范

今天整理了下,資料,發現有些東西沒歸檔,丟掉又太可惜了,記下吧

規則:

所有圖片都有 @2x ,@3x

一。

搞一個整體的文件夾,區分業務類型

登陸,注冊,組網,主頁,控制燈,設備管理,語音消息,個人消息

公用:導航,導航的按鈕

二.基本上 App 的切圖可分為下面幾大類:

背景、按鈕、圖示、圖片、照片、TabBar icon 等。

為了讓切圖便於管理,通常會依圖片性質命名,控件類型 _控件名字_狀態(可選)

例如 bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png

1.背景

bg-xxx.png,從整個頁面的大底圖、某個 TableView 的字段底圖、Navigation Bar 的底圖都可算在背景范圍內。

頁面背景

要留意整個畫面的高度,大多數的頁面需要扣除狀態列和 Navigation Bar 高度,如果畫面上有 Tab Bar 的話,底圖尺寸會更小。

2.按鈕的切圖常以 btn-xxx.png 來命名 。App 里的按鈕擁有 4 種屬性,

分別為一般、點擊、不能點擊、選中。

一般(normal):btn-xxx-n.png,最基本的按鈕外觀。

點擊(highlight):btn_xxx_h.png,使用者觸摸螢幕碰到按鈕,為了告知使用者有點擊到而出現的回應提示。

不能點擊(disabled):btn_xxx_d.png,代表App有這功能但使用者無法使用。例如如安裝在iPod上的App有播打電話功能時。

既然不能被點擊干脆直接隱藏的作法也是有的。要直接將按鈕隱藏或是以不能被點擊的狀態呈現需視情況決定。

選中(selected):btn_xxx_s.png,選中出現在有復數選項時,但通常不會把按鈕拿去做復數選項控件,這種按鈕狀態出現的機會不高。

圖片:pic_xxx.png 或是 img_xxx.png。

照片:pho_xxx.png。

圖標: icon_xxx.png

PS.如果是流水號的話,要從 0 開始編號喔!

pho_xxx_0.png? pho_xxx_2.png

TabBar 上的 icon 作法較特殊,雖然它是 icon,

已tab_xxx.png 來表示。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容