1
所有命名全部為小寫英文字母
在程序員的代碼里只有小寫的英文字母,如果你給出的命名全是中文的,那么他們是一定會更改的,所以命名全部用小寫的英文字母是*基本的規則。有些人會覺得寫這么多英文太麻煩,但其實為了自己專業能力的提高,這種規范的命名方式是必須要經歷的過程,當你習慣了這樣的命名方式后,你的成就感會油然而生。
2
命名格式
一個大型項目會分很多模塊,每個模塊由不同的設計師來獨立完成,還有人會專門管理公共的組件,如tabbar、navbar等等,這種情況下就會分為兩種切圖,一種是通用類型的切圖,還有一種就是各個模塊特有的切圖。
通用切片命名格式:
組件_類別_功能_狀態@2x.png
舉例:tabbar_icon_home_default@2x.png(對應中文:標簽欄_圖標_主頁_默認@2x.png)
模塊特有切圖命名規則:
模塊_類別_功能_狀態@2x.png
舉例:mail_icon_search_pressed@2x.png(對應的中文為:郵件_圖標_搜索_默認@2x.png)
我們的原則就是清晰的表達出切片的具體內容并且沒有重復的名稱。(要注意,命名中不能含有空格)
3
常用英文單詞
如果所有命名都寫為全稱,名字就會特別長,所以我們可以將一些常用的英文單詞進行縮寫,減少工作成本與開發代碼資源。至于怎么縮寫,只要整個團隊能夠達成共識并且輸出一份縮寫清單,任何縮寫規則都是可以的。
下面提供一些命名時常用的英文單詞列表:
bg(backgrond 背景)
nav(navbar 導航欄)
tab(tabbar 標簽欄)
btn(button 按鈕)
img(image 圖片)
del(delete 刪除)
msg(message 提示信息)
pop(pop up 彈出)
icon(圖標)
selected(選中)
disabled(不可點擊)
default(默認)
pressed(按下)
back(返回)
edit(編輯)
content(內容)
?
交互規范
以下幾點交互常識:
簡化操作:能一步完成的交互就不要分兩步。
用戶習慣:大部分用戶都有固化思維,我們作為設計師應該尊重數據,尊重用戶選擇。
減少干擾:減少界面元素的不確定因素,方便用戶快速找到自己想要的。
快速響應:加快用戶讀取的響應速度,能夠避免從遠程取數據的,就盡量避免。
界面友好:除了根據需求提供視覺解決方案以外,在設計的過程中適當地加入一些小細節使交互界面更加友好是設計師的職責所在。
圖片處理規范
1
圖片統一性
1)圖片色調色溫需統一,例如一個嬰兒產品的首頁,整體需要搭配暖色調的圖片,這樣看上去整體才比較統一舒服。
2)圖片比例需統一,例如一個賣貨的產品詳情頁,在同一屏的欄目中(頁面)所出現的產品或者人物,比例就需要有一個統一的大小比例,這樣看上去才比較統一舒服。
2
圖片細節處理
1)圖片精度不夠(這里所說的精度不是說DPI分辨率需要300哦,那是做高精度印刷輸出時才需要的,而在電腦及手機上的圖片DPI分辨率為72即可,另外輸出圖片時需適當壓縮一下圖片的大小)、雜色太多可以使用PS內置的CR濾鏡處理。
2)圖片尺寸建議統一為偶數值,方便前端技術人員開發。
3)圖片邊緣避免與白色背景融合,可以在邊緣位置加色。
4)為了配合標題字體,圖片可以局部調亮或調暗。
?
動效規范
無論是現在經常看到的企業/品牌H5宣傳頁面、移動端啟動頁,還是曾經紅極一時的首頁動畫,都需要用到動效效果。會做點動效會給我們加分不少,尤其是做一些加載動畫,這是我們經常會遇到的需求。
做動效時,我們需要注意以下幾點:
1)不論你的動畫有多好看、多吸引眼球,如果成本太高或者過于復雜都是無法落地的,所以我們要遵循簡單實用的原則來進行設計,千萬不要過度設計。
2)任何交互動作所導致的狀態都需要考慮正常狀態與異常狀態。拿加載動畫來說,我們需要考慮加載成功的反饋與加載失敗的反饋,并將之注明在輸出規范中。
3)動效使用的工具:可以PS做一些動態表情,用AE做一些加載動畫,頁面之間的交互動效可以使用Flinto、Principle等。