從程序角度，目前的項(xiàng)目經(jīng)驗(yàn)看。發(fā)現(xiàn)一些問題，以及程序和美術(shù)對接的痛點(diǎn)
- 由于沒有統(tǒng)一的設(shè)計(jì)和規(guī)劃，導(dǎo)致UI樣式過多，打開資源目錄，可以看到大量類似的資源，僅有細(xì)微的不同。(內(nèi)容底、按鈕底、標(biāo)題底圖、分割線、進(jìn)度條、圖片數(shù)字等等)。
- 美術(shù)給過來示意圖，程序每次都要花時(shí)間去找那些通用的UI元素對應(yīng)的圖片位置。
- 需求變更，比如在個(gè)人空間新加了一個(gè)家族圖標(biāo)；給過來的示意圖有時(shí)候會發(fā)現(xiàn)所以其他元素的位置都變了（細(xì)微的位置偏移，導(dǎo)致蒙上去對不齊）。
所以出了這個(gè)規(guī)范，希望能提升美術(shù)和程序的對接效率。（這只是一個(gè)單純的出圖規(guī)范，不涉及UI統(tǒng)一設(shè)計(jì)和規(guī)劃方面的內(nèi)容，這是主美在一個(gè)項(xiàng)目設(shè)計(jì)之初應(yīng)考慮好的。）
命名
命名很重要，務(wù)必重視。
- 原則是一定要有意義的命名，最好是英文。并且保持統(tǒng)一規(guī)范。
為什么要使用好的命名：
- 好的命名能讓人一眼就了解圖片的用途，減輕理解的壓力
- 能保持美術(shù)與程序圖片名字一致，后期替換圖片，或者資源復(fù)用，程序可以很方便的找到。（如果美術(shù)隨意命名，程序在使用時(shí)可能會改名，導(dǎo)致兩邊不一致）
- 提高美術(shù)與程序的溝通效率
想要命一個(gè)好名字有時(shí)候確實(shí)傷腦筋，會花費(fèi)些時(shí)間；但是能提高整體效率，對美術(shù)同學(xué)而言也是一種提高。
關(guān)于命名的幾點(diǎn)建議
- 一般的UI元素命名規(guī)則：模塊_用途。例：首充界面背景 FirstRecharge_Bg;結(jié)算界面橫幅 Summary_Baner;
- 如果同類圖片有多個(gè)，則根據(jù)顏色、尺寸、品質(zhì)等特征來區(qū)分。例：Common_Button_Red,Common_Button_Blue;
Skill_Magnet,Skill_Magnet_Small;
AppIcon_64、AppIcon_72、AppIcon_128;（這里64、72、128表示圖片尺寸）
Skin_NameBg_1、Skin_NameBg_2(1、2表示品質(zhì))； - 如果是圖標(biāo)類，例如金幣圖標(biāo) Icon_Gold；鉆石圖標(biāo) Icon_Diamond;
- 如果設(shè)計(jì)時(shí)考慮到以后會復(fù)用，最好在命名里體現(xiàn)出來。例如下拉框背景：Common_Dropdown_Bg;下拉框選中底圖：Common_Dropdown_Select。
- 盡量用英文，但找不到合適的英文單詞或者用英語感覺更難理解時(shí)，可酌情使用中文或者拼音。總之一個(gè)原則就是規(guī)范，易懂。
切圖
- 背景圖不帶透明通道，且尺寸在2880X1440（適配18：9的屏幕）
- 圖標(biāo)類的圖尺寸盡量為2的次冪
-
圖片應(yīng)該以主體內(nèi)容居中,而不是以整個(gè)內(nèi)容居中。
比如按鈕下邊有陰影,那么切圖時(shí)上面也要留出和陰影相同的空白像素，使按鈕在圖片內(nèi)居中。否則每次制作按鈕，按鈕上的文字都得向上偏移幾個(gè)像素，完全沒必要。
這類圖常見的有按鈕、頭像框、氣泡框等 - 盡量復(fù)用（UI框、按鈕、進(jìn)度條、分割線、圖片數(shù)字等）
從用戶體驗(yàn)的角度講，習(xí)慣界面統(tǒng)一的風(fēng)格和少數(shù)的規(guī)矩，要比看起來好看更加重要，因?yàn)閁I設(shè)計(jì)的最終目的在于用戶體驗(yàn)和操作習(xí)慣的養(yǎng)成，而非看起來好看。
從程序的角度講，要盡量控制包體的大小和內(nèi)存的占用。 - UI的元素（背景框、其他內(nèi)容框），盡量設(shè)計(jì)成九宮格。
- 文字規(guī)格（顏色、字號）要有統(tǒng)一的規(guī)范。
- 示意圖中如果有通用UI元素，要標(biāo)識名稱以便程序查找
- 如果是舊界面的變更修改，新的示意圖最好是在舊示意圖的基礎(chǔ)上改，只動需要動的地方。
過幾天會再出一個(gè)給程序看的UI對接規(guī)范。
