在講安卓設(shè)計(jì)規(guī)范之前我們先來看看一下的問題:
*規(guī)范是什么?
*規(guī)范的目的是什么团搞?
*怎樣進(jìn)行規(guī)范?
規(guī)范是什么
規(guī)范:意指明文規(guī)定或約定成俗的標(biāo)準(zhǔn)多艇÷呖郑或是按照標(biāo)準(zhǔn),規(guī)范的要求進(jìn)行操作峻黍,使某一行為或某一活動(dòng)達(dá)到或是超越規(guī)定的標(biāo)準(zhǔn)复隆。
也就是說規(guī)范通過制定一些規(guī)定與約束(如字體大小,界面尺寸姆涩,圖標(biāo)大小等)使某一行為(如項(xiàng)目開發(fā)昏名,組件庫的組件等)達(dá)到標(biāo)準(zhǔn)。
制定規(guī)范的目的是確保設(shè)計(jì)的統(tǒng)一性與合理性阵面。規(guī)范維護(hù)的是項(xiàng)目的統(tǒng)一轻局,而不是設(shè)計(jì)師個(gè)人的設(shè)計(jì)。想一想在公司里样刷,除了設(shè)計(jì)仑扑,前有產(chǎn)品經(jīng)理,后有程序員置鼻,還有用戶镇饮,你做的東西都是要交給他們的。產(chǎn)品經(jīng)理看你的設(shè)計(jì)是否展現(xiàn)了她的需求(設(shè)計(jì)內(nèi)容是否包括前期討論的內(nèi)容)箕母,程序員問你要各種切圖(圖標(biāo)储藐、組件、布局嘶是、間距钙勃、字體大小等),用戶看你的設(shè)計(jì)(顏色聂喇,圖標(biāo)使用的大小范圍等)辖源,如果設(shè)計(jì)師完全沒有規(guī)范,全憑自己的“天馬行空”設(shè)計(jì)出來的東西希太,是會(huì)帶來很大的麻煩的克饶,舉個(gè)簡單的例子,切圖規(guī)范誊辉,如果你的命名只有自己能看懂矾湃,那你就不要發(fā)給程序員了吧~因?yàn)榘l(fā)給他他也找不到哪個(gè)是哪個(gè),這個(gè)圖標(biāo)應(yīng)該放在哪里堕澄。你所做的設(shè)計(jì)是為了公司項(xiàng)目服務(wù)的邀跃,是為了客戶服務(wù)的霉咨,所以你設(shè)計(jì)的東西就得滿足項(xiàng)目中其他職位(產(chǎn)品經(jīng)理、程序員)使用的需求坞嘀,以及符合用戶的使用習(xí)慣躯护。所以規(guī)范是為了項(xiàng)目利益最大化惊来,高效化而在團(tuán)隊(duì)中制定成的約定丽涩。
不同的規(guī)范雖然內(nèi)容不同但是包含的內(nèi)容其實(shí)是差不多的,通常包括布局裁蚁,顏色矢渊,圖標(biāo),組件枉证,字體這幾個(gè)方面矮男。接下來我們就來看看安卓中常見的設(shè)計(jì)規(guī)范,相信學(xué)習(xí)了之后室谚,以后項(xiàng)目里的設(shè)計(jì)規(guī)范你都很清楚了毡鉴,在設(shè)計(jì)中多加注意就行。一個(gè)產(chǎn)品設(shè)計(jì)完成之后秒赤,進(jìn)行設(shè)計(jì)規(guī)范制作也是對項(xiàng)目總結(jié)的一個(gè)方法猪瞬。能注意規(guī)范且會(huì)制定規(guī)范。
1.界面尺寸
在進(jìn)行app設(shè)計(jì)的時(shí)候入篮,我們都會(huì)先建畫布大小陈瘦,當(dāng)然是根據(jù)安卓界面尺寸來建立的。安卓手機(jī)那么多潮售,不必每一個(gè)都記住痊项。只要記住一兩個(gè),懂得之間的換算關(guān)系就行了酥诽。
目前安卓端主流尺寸主要是@1.5x鞍泉,@2x以及@3x,記住下面三個(gè)就夠用了肮帐。
@1.5x? ? 480x854 /540x960
@2x? ? ? 720x1280(這是我最常用的界面尺寸)
@3x? ? ? 1080x1920
考考你塞弊,那@1x是多少呢?
除了知道界面尺寸外泪姨,還得知道狀態(tài)欄游沿,導(dǎo)航欄,菜單欄的高度是多少肮砾,設(shè)計(jì)時(shí)建立好相應(yīng)的參考線诀黍。
建議取用720×1280 這個(gè)尺寸,這個(gè)尺寸 720×1280中顯示完美仗处,切圖后的圖片文件大小也適中眯勾,應(yīng)用的內(nèi)存消耗也不會(huì)過高枣宫。
2.系統(tǒng)圖標(biāo)
對于圖標(biāo)其實(shí)在規(guī)范上面有很多要注意的,比如圖標(biāo)大小吃环,圖標(biāo)設(shè)計(jì)也颤,圖標(biāo)切圖規(guī)范,這里就重點(diǎn)講圖標(biāo)大小郁轻,之后會(huì)再講圖標(biāo)設(shè)計(jì)規(guī)范翅娶。
3.字體
安卓系統(tǒng)中,中文使用的是谷歌思源骑篙,英文使用的是Roboto蜕提。思源字體,是一種非襯線字體靶端,Adobe稱思源體為Source Han Sans,Google稱思源體為Noto Sans CJK. 思源體包含7個(gè)自重谎势,也就是7中不同粗細(xì)的字體。
對于字體或許在設(shè)計(jì)過程中你會(huì)選用其他字體杨名,但是需要注意你所用的字體是否利于用戶閱讀脏榆,是否舒服等問題。
4.字體大小
對于字體的大小镣煮,在界面設(shè)計(jì)過程中姐霍,需要統(tǒng)一,比如所有正文是統(tǒng)一大小典唇,所有標(biāo)題是統(tǒng)一大小镊折。
不同風(fēng)格的字體大小,給人的感覺也是不同的介衔,我們要學(xué)會(huì)靈活應(yīng)用恨胚。安卓文字單位是sp,以下文字是按照@1x倍率來規(guī)范的
5.設(shè)計(jì)單位
在安卓中升熊,標(biāo)注距離一般用dp,標(biāo)注文字用sp绸栅,而知之間的換算關(guān)系為:
1dp=(屏幕ppi/160)px
不清楚單位的级野,可以去找上一篇文章了解px pt sp dp ppi。
6.切圖規(guī)范
Android開發(fā)需要的設(shè)計(jì)交付物至少要有:高保真UI圖粹胯,標(biāo)注蓖柔,切圖
這是最后辰企,也是最重要的一點(diǎn),因?yàn)槟闼械膱D是要交到程序員的手里的况鸣,他寫的程序達(dá)不到你想要的效果可能就是他看不懂你給他的規(guī)范~
1.切圖尺寸必須為雙數(shù)
2.單像素的圖會(huì)出現(xiàn)邊緣模糊的情況
3.命名需要規(guī)范
基本上 App 的切圖可分為下面幾大類:背景牢贸、按鈕、圖示镐捧、圖片潜索、照片、TabBar icon 等愤估。
一般命名規(guī)范可以為:
前綴:位置 組件 用途
后綴:狀態(tài)
如用btn-xxx.png 來命名 帮辟。App 里的按鈕擁有 4 種屬性速址,分別為一般normal玩焰、點(diǎn)擊highlight、不能點(diǎn)擊disabled芍锚、選中(selected)昔园。
但不追求精致與完整度的話,只出一般屬性按鈕圖檔就可以了并炮。如果是點(diǎn)擊(hightlight)狀態(tài)就可以命名為:btn- cancel-hightlight.png? 表示取消按鈕點(diǎn)擊時(shí)圖標(biāo)默刚。
就算不是按照很嚴(yán)格的規(guī)范來命名,至少能讓程序員知道你這個(gè)圖標(biāo)是在那種情況下使用的圖標(biāo)逃魄,這就需要設(shè)計(jì)師跟程序員很好的溝通荤西,方便整個(gè)團(tuán)隊(duì)的開發(fā),提高團(tuán)隊(duì)的開發(fā)效率