安卓設(shè)計(jì)規(guī)范

在講安卓設(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ī)范翅娶。


在設(shè)計(jì)過程中,可以不完全按照這個(gè)大小好唯,但是只要設(shè)計(jì)的圖標(biāo)是相應(yīng)范圍的大小就行了竭沫。

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ī)范的


Ps軟件設(shè)計(jì)基于@2x倍率尺寸炎咖,因此文字都需要x2赃泡,sketch的話一般基于@1x,就直接用就行了乘盼。


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)邊緣模糊的情況

切圖要保證尺寸為雙數(shù)

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ā)效率

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末伍俘,一起剝皮案震驚了整個(gè)濱河市邪锌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌癌瘾,老刑警劉巖觅丰,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異妨退,居然都是意外死亡妇萄,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門咬荷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來冠句,“玉大人,你說我怎么就攤上這事幸乒∨车祝” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵逝变,是天一觀的道長基茵。 經(jīng)常有香客問我奋构,道長,這世上最難降的妖魔是什么拱层? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任弥臼,我火速辦了婚禮,結(jié)果婚禮上根灯,老公的妹妹穿的比我還像新娘径缅。我一直安慰自己,他們只是感情好烙肺,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布纳猪。 她就那樣靜靜地躺著,像睡著了一般桃笙。 火紅的嫁衣襯著肌膚如雪氏堤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天搏明,我揣著相機(jī)與錄音鼠锈,去河邊找鬼。 笑死星著,一個(gè)胖子當(dāng)著我的面吹牛购笆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播虚循,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼同欠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了横缔?” 一聲冷哼從身側(cè)響起铺遂,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎剪廉,沒想到半個(gè)月后娃循,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡斗蒋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年捌斧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泉沾。...
    茶點(diǎn)故事閱讀 39,690評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡捞蚂,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出跷究,到底是詐尸還是另有隱情姓迅,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站丁存,受9級特大地震影響肩杈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜解寝,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一扩然、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧聋伦,春花似錦夫偶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至逾礁,卻和暖如春说铃,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背敞斋。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工截汪, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留疾牲,地道東北人植捎。 一個(gè)月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像阳柔,于是被迫代替她去往敵國和親焰枢。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容