app設(shè)計(jì)規(guī)范有哪些5點(diǎn)(app設(shè)計(jì)規(guī)范和設(shè)計(jì)指導(dǎo)原則)
APP設(shè)計(jì)規(guī)范指對(duì)APP界面進(jìn)行風(fēng)格統(tǒng)一,對(duì)界面元素的樣式、顏色和大小設(shè)定統(tǒng)一的規(guī)范和使用原則。與設(shè)計(jì)、前端約定好統(tǒng)一的設(shè)計(jì)規(guī)范很重要,約定設(shè)計(jì)規(guī)范可以減少產(chǎn)品、設(shè)計(jì)、前端的溝通成本;可以使界面設(shè)計(jì)整潔、統(tǒng)一,減少界面元素的重復(fù)設(shè)計(jì);可以減少設(shè)計(jì)素材,控制安裝包的大小。
APP設(shè)計(jì)規(guī)范主要包括對(duì)界面布局、背景色、字體顏色大小、界面元素間距、彈層、loading、圖標(biāo)、按鈕常態(tài)點(diǎn)擊態(tài)等進(jìn)行統(tǒng)一的梳理和規(guī)范。
頁面布局和交互規(guī)范上建議安卓、ios盡量統(tǒng)一,這樣可以避免安卓和ios分別設(shè)計(jì)一套稿子。當(dāng)然土豪公司可以忽略這個(gè)建議,安卓和ios分別做專門的設(shè)計(jì)當(dāng)然更好。在中小型項(xiàng)目來看,設(shè)計(jì)資源緊張的話可以考慮安卓和ios用同一個(gè)稿子,分別做相應(yīng)的微調(diào)后輸出適用安卓和ios不同的尺寸要求就可以。
推薦使用mac矢量設(shè)計(jì)工具"sketch"。以ios平臺(tái)的iPhone5的尺寸640*1136px作為標(biāo)準(zhǔn)尺寸設(shè)計(jì)。在界面設(shè)計(jì)完成后可以做相應(yīng)的微調(diào)導(dǎo)出適用ios和安卓尺寸的稿子。這里可以首先統(tǒng)一設(shè)計(jì)稿輸出規(guī)范:
安卓(720*1280px):界面預(yù)覽圖、界面坐標(biāo)圖、標(biāo)準(zhǔn)界面的圖標(biāo)png文件
IOS(640*1136px):界面預(yù)覽圖、界面坐標(biāo)圖、1-3倍圖矢量圖標(biāo)pdf文件
PS:界面坐標(biāo)圖指在設(shè)計(jì)已定稿的界面預(yù)覽圖上標(biāo)注:界面元素的間距、文字的顏色、文字的字號(hào)大小、圖標(biāo)的尺寸、按鈕不同狀態(tài)顏色、按鈕的尺寸等等
標(biāo)準(zhǔn)色規(guī)范:重要、一般、弱。標(biāo)準(zhǔn)色重要:重要顏色中一般不超過3種,這里的例子重要顏色之一紅色需要小面積使用,用于特別需要強(qiáng)調(diào)和突出的文字、按鈕和icon;而黑色用于重要級(jí)文字信息比如標(biāo)題、正文等。標(biāo)準(zhǔn)色一般:都是相近的顏色,而且要比重要顏色弱,普遍用于普通級(jí)信息、引導(dǎo)詞比如提示性文案或者次要的文字信息。標(biāo)準(zhǔn)色較弱:普遍用于背景色和不需要顯眼的邊角信息。
文字是APP主要信息的表現(xiàn),尤其新聞閱讀、社區(qū)APP等制定標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范和良好的排版方式,用戶使用APP也覺得毫無疲勞感,這一點(diǎn)很重要。標(biāo)準(zhǔn)字規(guī)范重要、一般、弱。這里主要規(guī)范標(biāo)準(zhǔn)字的大小,標(biāo)準(zhǔn)字要注意跟上文的標(biāo)準(zhǔn)色進(jìn)行組合突出APP重要的信息和弱化次要的信息。標(biāo)準(zhǔn)字重要:大字號(hào)普遍用于大標(biāo)題、top導(dǎo)航,較小字號(hào)用在分割模塊的標(biāo)題上。標(biāo)準(zhǔn)字一般:主要用在大多數(shù)文字,比如正文。標(biāo)準(zhǔn)字弱:普遍與標(biāo)準(zhǔn)色較弱組合用于輔助性文字如一些次要的文案說明。
APP界面要給人簡潔整齊,條理清晰感,依靠的就是界面元素的排版和間距設(shè)計(jì)。這里間距設(shè)計(jì)還要注意考慮適配不同的屏幕分辨率。一般解決方案有據(jù)屏幕等比放大縮小間距,或者固定某些界面元素的間距,讓其他空間留空拉伸。為了滿足屏幕分辨率較大的設(shè)備,有時(shí)甚至需要改變APP界面的頁面布局。