APP設(shè)計(jì)規(guī)范是啥?

“設(shè)計(jì)規(guī)范,啥造锅?”第一次看到這個(gè)高大上的名詞撼唾,我是一臉懵逼的,然后我就開啟了自己強(qiáng)大的搜索與歸納技能。

規(guī)范多半在產(chǎn)品1.0版本之后才會(huì)誕生哥蔚。對于設(shè)計(jì)師而言倒谷,規(guī)范很重要的意義在于解決效率問題,但同時(shí)也在一定程度上扼殺了設(shè)計(jì)師的創(chuàng)造力糙箍。

原來就是界面&圖標(biāo)的尺寸渤愁,字體的大小,顏色深夯。具體現(xiàn)在整理如下:


設(shè)計(jì)稿輸出尺寸與分辨率對照表


像素分辨率&邏輯分辨率
Sizes of iPhone UI Elements

[推薦閱讀]

Sketch 如何用一套設(shè)計(jì)稿較快速地做 iOS 和 Android 兩個(gè)版本 app抖格? (我在實(shí)際工作中遇到的問題,得到了解答)

APP UI設(shè)計(jì)及切圖規(guī)范 (說得很完整)

【750*1334】iPhone6的原型規(guī)范如下:

1咕晋、界面尺寸布局:滿屏尺寸750x1334px

2雹拄、高度電量條高度40px,導(dǎo)航欄高度88px掌呜,標(biāo)簽欄高度98px滓玖;

3、各區(qū)域圖標(biāo)大小導(dǎo)航欄圖標(biāo)44px质蕉,標(biāo)簽欄圖標(biāo)50px势篡;

4、各區(qū)域文字大小電量條文字22px模暗,導(dǎo)航欄-文字32px殊霞,標(biāo)簽欄字20px;

5汰蓉、常用的文字大斜炼住:32px,30px顾孽,28px祝钢,26px,24px若厚,22px拦英,20px;

6测秸、常用的顏色:背景淺灰色#f2f2f2,文字深黑色#323232疤估,邊框色深灰#CCCCCC灾常;

7、常用可點(diǎn)擊區(qū)域的高度:88px铃拇;

8钞瀑、單行文字的背景框的高度:88px,雙行則為:176px慷荔,三行則為:264px雕什;

9、常用間距:親密距離:20px显晶;疏遠(yuǎn)距離:30px贷岸,其它距離:10px,44px等磷雇;

10偿警、按鈕和文本框,原型圖做成直角的唯笙,圓角半徑是多少螟蒸,由Ui來設(shè)計(jì);

11睁本、這種情況尿庐,需要修改原型忠怖。單個(gè)頁面的邏輯流程圖或用戶學(xué)習(xí)使用時(shí)間呢堰,超過其它頁面平均數(shù)的3倍以上;

交互設(shè)計(jì)——原型尺寸規(guī)范? (基于IPhone6的設(shè)計(jì)規(guī)范實(shí)例)

Android篇

界面尺寸

android的尺寸眾多凡泣,建議使用分辨率為720x1280 的尺寸設(shè)計(jì)枉疼。這個(gè)尺寸720x1280中顯示完美,在1080x1920 中看起來也比較清晰鞋拟;切圖后的圖片文件大小也適中骂维,應(yīng)用的內(nèi)存消耗也不會(huì)過高。

狀態(tài)欄高度:50 px

導(dǎo)航欄高度:96 px

標(biāo)簽欄高度:96 px

Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵贺纲,把功能鍵移到了屏幕中航闺,當(dāng)然高度也是和標(biāo)簽欄一樣的:96 px

內(nèi)容區(qū)域高度為:1038 px (1280-50-96-96=1038)

圖標(biāo)尺寸

圖標(biāo)尺寸

【Notice】Android設(shè)計(jì)規(guī)范中, 使用的單位是dp猴誊, dp在安卓機(jī)上不同的密度轉(zhuǎn)換后的px 是不一樣的潦刃。

字體尺寸

字體尺寸

Android 上的字體為:谷歌自己的字體 Droid sans fallback ,與微軟雅黑很像懈叹。(5.0的簡繁字體換了簡繁思源黑體的Google版)

顏色值

Android顏色值取值為十六進(jìn)制的值 比如一綠色的值乖杠, 給開發(fā)的值為 #5bc43e


IOS篇

界面尺寸

IOS界面尺寸

圖標(biāo)尺寸

IOS圖標(biāo)尺寸

字體

iPhone 上的字體英文為: HelveticaNeue;

中文澄成,Mac下用的是黑體-簡胧洒,Win下則為華文黑體畏吓;

所有字體要用雙數(shù)字號。

百度用戶體驗(yàn)部對app字體的小調(diào)查

顏色值

給予IOS開發(fā)的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時(shí)也要根據(jù)開發(fā)的習(xí)慣卫漫,有時(shí)也用十六進(jìn)制)


發(fā)現(xiàn)了神奇的網(wǎng)站:Stylify Me ?填入網(wǎng)站 URL菲饼,自動(dòng)生成對應(yīng)頁面的“Style Guide”并提供 PDF 文件保存。

[拓展文章]:

入行用戶體驗(yàn)設(shè)計(jì)汛兜,規(guī)范是一切的開始

老生常談:關(guān)于合格 UI 設(shè)計(jì)師需要知道的那些事兒 ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末巴粪,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子粥谬,更是在濱河造成了極大的恐慌肛根,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件漏策,死亡現(xiàn)場離奇詭異派哲,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)掺喻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進(jìn)店門芭届,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瘟仿,“玉大人丰涉,你說我怎么就攤上這事∩O眩” “怎么了即硼?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵逃片,是天一觀的道長。 經(jīng)常有香客問我只酥,道長褥实,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任裂允,我火速辦了婚禮损离,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘绝编。我一直安慰自己僻澎,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布十饥。 她就那樣靜靜地躺著窟勃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪绷跑。 梳的紋絲不亂的頭發(fā)上拳恋,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天,我揣著相機(jī)與錄音砸捏,去河邊找鬼谬运。 笑死隙赁,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的梆暖。 我是一名探鬼主播伞访,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼轰驳!你這毒婦竟也來了厚掷?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤级解,失蹤者是張志新(化名)和其女友劉穎冒黑,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體勤哗,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡抡爹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了芒划。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片冬竟。...
    茶點(diǎn)故事閱讀 38,569評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖民逼,靈堂內(nèi)的尸體忽然破棺而出泵殴,到底是詐尸還是另有隱情,我是刑警寧澤拼苍,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布笑诅,位于F島的核電站,受9級特大地震影響映屋,放射性物質(zhì)發(fā)生泄漏苟鸯。R本人自食惡果不足惜同蜻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一棚点、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧湾蔓,春花似錦瘫析、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至桃序,卻和暖如春杖虾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背媒熊。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工奇适, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留坟比,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓嚷往,卻偏偏與公主長得像葛账,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子皮仁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評論 2 348

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