相信大家對(duì)于 ui設(shè)計(jì)非常的感興趣吧。接下來(lái)就讓我們一起來(lái)看看app ui設(shè)計(jì)規(guī)范的相關(guān)的內(nèi)容吧，相信大家看完之后，將會(huì)有非常大的收獲的，大家還在等什么呢？下面就讓我們一起全面的認(rèn)識(shí)一下吧。

　　　一、UI設(shè)計(jì)

　　UI設(shè)計(jì)(或稱界面設(shè)計(jì))是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)，也叫界面設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)說(shuō)的UI設(shè)計(jì)是虛擬UI，UI即User Interface(用戶界面)的簡(jiǎn)稱。

　　好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

　　（圖片來(lái)自網(wǎng)絡(luò)）

　　二、app ui設(shè)計(jì)規(guī)范

　　1、Android篇

　　標(biāo)注規(guī)范：

　　畫(huà)布大小：以720 x 1280分辨率為準(zhǔn)進(jìn)行標(biāo)注。

　　字體：按照像素標(biāo)注，只使用 24 pt，28 pt，36 pt 和 44 pt 的字體，并pt 值除以 2 作為 sp 數(shù)值交給工程師。

　　顏色：按照實(shí)際的顏色值標(biāo)注，Android顏色值取值為十六進(jìn)制的值 比如一綠色的值， 給工程師的值為 #5bc43e。

　　間距：每個(gè)主要的控件必須標(biāo)注出來(lái)，各種邊距必須標(biāo)注清楚。所有尺寸的 px 值除以2作為 dp 數(shù)值交給工程師。

　　切圖：

　　統(tǒng)一采用Png格式

　　部分需要做適配的圖片需要制作.9格式

　　圖片優(yōu)化：

　　圖片壓縮優(yōu)化

　　ICON 可采用PNG 8

　　支持完全透明和完全不透明兩種效果和256色

　　需要高清的可采用 PND24/32

　　切圖命名:

　　每個(gè)頁(yè)面按照設(shè)計(jì)高保真分目錄：hdpi(480 *800)xhdpi(720 *1080) xxdpi(1080 *1920)。

　　依圖片性質(zhì)命名。例如 bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png等。

　　設(shè)計(jì)圖單位：像素72dpi。在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)來(lái)設(shè)計(jì)，比較方便預(yù)覽效果，一般用640 *1136或者750 *1334的尺寸來(lái)設(shè)計(jì)，現(xiàn)在iPhone6和plus出來(lái)后有很多人會(huì)使用6的設(shè)計(jì)效果。

　　Ps：作圖的時(shí)候確保都是用形狀工具(快捷鍵：U)畫(huà)的，這樣更方便后期的切圖或者尺寸變更。

　　2、iOS篇

　　標(biāo)注規(guī)范：

　　畫(huà)布大小：以@2x圖以640/750為寬度尺寸為基準(zhǔn)標(biāo)注。

　　字體：按照640/750寬尺寸中的像素進(jìn)行標(biāo)注。

　　顏色：按照實(shí)際的顏色值標(biāo)注，iOS顏色值取 RGB各顏色的值比如某個(gè)色值，給予IOS程序員的色值為 R:12 G:34 B:56給出的值就是 12,34,56(有時(shí)也要根據(jù)程序員的習(xí)慣，有時(shí)也用十六進(jìn)制)。

　　間距：每個(gè)主要的控件必須標(biāo)注出來(lái)，各種邊距必須標(biāo)注清楚。

　　切圖：

　　統(tǒng)一采用Png格式

　　以640/750寬分辨率為@2x輸出三套尺寸：@1x @2x @3x

　　圖片優(yōu)化：

　　圖片壓縮優(yōu)化

　　ICON 可采用PNG 8

　　支持完全透明和完全不透明兩種效果和256色

　　需要高清的可采用 PND24/32

　　（圖片來(lái)自網(wǎng)絡(luò)）

　　切圖命名:

　　每個(gè)頁(yè)面按照設(shè)計(jì)高保真分目錄：@1x @2x @3x。

　　在文件名中需要區(qū)分是幾倍圖，例如: [email protected]。

　　狀態(tài)欄(status bar)：就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40px

　　導(dǎo)航欄(navigation)：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁(yè)面間的跳轉(zhuǎn)按鈕，其高度為：88px

　　主菜單欄(submenu，tab)：類(lèi)似于頁(yè)面的主菜單，提供整個(gè)應(yīng)用的分類(lèi)內(nèi)容的快速跳轉(zhuǎn)，其高度為：98px

　　內(nèi)容區(qū)域(content)：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁，其高度為:734px

　　至于我們經(jīng)常說(shuō)的iPhone5/5s的640*1136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到910px。

　　app ui設(shè)計(jì)規(guī)范有什么？以上就是我們?yōu)楦魑慌笥褌冋淼膬?nèi)容，想必大家看完之后，都沒(méi)有什么疑問(wèn)了吧。總之，希望大家可以參考上面的內(nèi)容。