超全面UI基礎(chǔ)設(shè)計(jì)規(guī)范

　　很多剛?cè)胄械腢I設(shè)計(jì)師開始接觸移動(dòng)端UI設(shè)計(jì)的時(shí)候，對(duì)于基礎(chǔ)的界面尺寸規(guī)范可能會(huì)有一定的模糊認(rèn)知，導(dǎo)致做出來的界面往往會(huì)感覺不是那么和諧，卻也不知道怎么去完善和改進(jìn)。
 

　　對(duì)于大多數(shù)的剛?cè)胄姓邅碚f，如果不是有天賦的那種設(shè)計(jì)師，了解常用的一些尺寸規(guī)范和方法，才能更好的形成自己的專業(yè)概念。今天AAA教育郭老師就帶大家了解一下超全面的UI基礎(chǔ)設(shè)計(jì)規(guī)范。
 

　　1、設(shè)計(jì)軟件
 

　　Sketch

 

　　作為現(xiàn)在做UI的主流軟件，sketch不僅操作便利、易于上手，軟件本身也非常輕便，對(duì)于電腦的型號(hào)也沒有很大的要求，當(dāng)然，只要是蘋果電腦即可。除此之外，sketch自身所含括的UI組件和iOS的系統(tǒng)設(shè)計(jì)資源也是非常加分的附加值。
 

　　推薦兩個(gè)網(wǎng)站：https://oursketch.com/ —無論是學(xué)習(xí)Sketch，還是搜插件、找素材，都是一個(gè)寶庫。
 

　　另外一個(gè)網(wǎng)站是https://xclient.info/ —下載各種Mac系統(tǒng)的軟件網(wǎng)站平臺(tái)。
 

　　Photoshop

 

　　無所不能的ps，不管是Mac還是Windows，沒有平臺(tái)的限制，能實(shí)現(xiàn)的效果多樣化。弊端在于，軟件體型太大，在做UI設(shè)計(jì)的時(shí)候?qū)Τ叽鐦?biāo)準(zhǔn)的判定不是很友好。好在，現(xiàn)在網(wǎng)上關(guān)于ps的插件資源已經(jīng)很豐富，不管是切圖還是標(biāo)準(zhǔn)，都有對(duì)應(yīng)都插件，用起來也還是很方便的。
 

　　綜合考慮，有條件的話做UI我還是比較推薦用Mac平臺(tái)。
 

　　2、移動(dòng)端系統(tǒng)的相關(guān)概念
 

　　手機(jī)分辨率：
 

　　每個(gè)手機(jī)屏幕不一樣對(duì)應(yīng)像素大小也不一樣。其實(shí)所有的畫面都是由一個(gè)個(gè)的小點(diǎn)組成的，這一個(gè)個(gè)的小點(diǎn)就稱之為像素。一塊方形的屏幕橫向有多少個(gè)點(diǎn)，豎向有多少個(gè)點(diǎn)，相乘之后的數(shù)值就是這塊屏幕的像素(數(shù)碼相機(jī)的像素也是這么乘積出來的)。
 

　　屏幕尺寸：
 

　　為了方便表示屏幕的大小，通常用橫向像素×豎向像素的方式來表示，例如電腦屏幕中很常見的1024×768像素，以及手機(jī)屏幕中很常見的240×320像素。
 

　　而所謂的4:3、16:9、16:10、21:9這些比值其實(shí)就是分辨率中橫向像素與豎向像素的比值 。
 

　　4：3是我們最初所用的分辨率尺寸比，以前的電腦屏幕幾乎都是4:3;隨后寬屏顯示器出現(xiàn)，16:10開始流行，比較常見的分辨率有1280×800像素。
 

　　比如手機(jī)對(duì)角線的物理尺寸，單位是英寸，iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸)。
 

　　3、界面設(shè)計(jì)基礎(chǔ)規(guī)范——iOS
 

　　屏幕設(shè)計(jì)尺寸
 

　　蘋果手機(jī)采用的是Retina視網(wǎng)膜屏幕，其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，無論是欄高度還是應(yīng)用圖標(biāo)，設(shè)計(jì)師提供給開發(fā)人員的切片大小，前者始終是后者的1.5倍，并分別以@3x和@2x在文件名結(jié)尾命名，程序再根據(jù)不同分辨率自動(dòng)加載@3x或者@2x的切片。

 

　　在開始圖稿的時(shí)候以什么樣的尺寸來建立畫布呢?狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄等，它們的高度又分別是多少呢?別著急，我用一張圖來說明：

 

　　通過上面的圖片應(yīng)該可以大致了解蘋果手機(jī)的各個(gè)型號(hào)的尺寸，在用sketch的時(shí)候，推薦使用375 * 667的尺寸;導(dǎo)出切圖的時(shí)候加后綴@2x和@3x，即是原始尺寸的2倍和3倍圖。
 

　　在用photoshop的時(shí)候，畫布就建成750 * 1334尺寸的。導(dǎo)出切圖的時(shí)候加后綴@2x和@3x，和sketch不一樣的是，導(dǎo)出的是原始尺寸和3倍尺寸圖。
 

　　字體使用規(guī)范導(dǎo)航文字 34-38px標(biāo)題文字 28-34px正文文字 26-30px輔助文字 20-24pxTab bar文字 20px
 

　　當(dāng)然，這個(gè)不是硬性的使用規(guī)定，要根據(jù)產(chǎn)品屬性酌情設(shè)定，另外需要注意的一點(diǎn)是所有的字號(hào)設(shè)置都必須為偶數(shù)，上下級(jí)內(nèi)容字號(hào)極差關(guān)系為2-4號(hào)。關(guān)于字體：在iOS 9推出之前設(shè)計(jì)師普遍采用華文黑體、思源、冬青等字體進(jìn)行設(shè)計(jì)，iOS 9推出了蘋果自己的字體——蘋方!自此之后蘋方字體被廣泛應(yīng)用于移動(dòng)端設(shè)計(jì)中。
 

　　關(guān)于字體顏色和是否加粗：字體的顏色設(shè)置我們一般很少用純黑色，一般用深灰色和淺灰色、細(xì)體和粗體(注意要用字體本身的字重，不能用PS的加粗功能)來區(qū)分重要信息和次要信息，進(jìn)行信息層級(jí)的劃分。

 

　　APP應(yīng)用圖標(biāo)尺寸
 

　　APP應(yīng)用圖標(biāo)，建議使用1024*1024尺寸去做，逐級(jí)縮小去應(yīng)用到各種場(chǎng)景中。SKetch已經(jīng)提供了IOS和Android系統(tǒng)的APP尺寸圖標(biāo)模板，直接使用就可以了。

 

　　切圖規(guī)范
 

　　當(dāng)界面設(shè)計(jì)定稿之后，設(shè)計(jì)師需要對(duì)圖標(biāo)進(jìn)行切片提供給開發(fā)工程師，通常我們只需要對(duì)icon進(jìn)行切圖即可，文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的，例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果。
 

　　在這里安利一個(gè)網(wǎng)站：藍(lán)湖，它是一款產(chǎn)品文檔和設(shè)計(jì)圖的共享平臺(tái),幫助互聯(lián)網(wǎng)團(tuán)隊(duì)更好地管理文檔和設(shè)計(jì)圖。
 

　　可以在線展示Axure,自動(dòng)生成設(shè)計(jì)圖標(biāo)注,與團(tuán)隊(duì)共享設(shè)計(jì)圖,展示頁面之間的跳轉(zhuǎn)關(guān)系?？梢灾苯釉诠倬W(wǎng)下載插件安裝即可使用，方便設(shè)計(jì)師和開發(fā)人員、產(chǎn)品經(jīng)理之間的有效溝通。

 

　　切圖輸出規(guī)范
 

　　蘋果官方提供的能準(zhǔn)確點(diǎn)擊的最小點(diǎn)擊區(qū)域：88 * 88，單位px。小于這個(gè)范圍也可以點(diǎn)擊，但是點(diǎn)擊不靈敏，體驗(yàn)較差。對(duì)于比這個(gè)范圍小的可點(diǎn)擊按鈕，周圍需要用透明區(qū)域填充后再輸出切圖。

 

　　非功能性切圖，比如列表圖標(biāo)、說明圖標(biāo)等，按統(tǒng)一規(guī)格的最小尺寸切。這些無實(shí)際功能的圖標(biāo)，按照統(tǒng)一規(guī)格的尺寸來切，而且最好保證尺寸為偶數(shù)。

 

　　按鈕輸出的時(shí)候要注意的是不同狀態(tài)下的情況要分開說明。

 

　　切圖命名規(guī)范
 

　　設(shè)計(jì)師切圖是直接給開發(fā)人員使用的，所以要按照一定的格式命名能減輕溝通成本，命名方式盡量清晰;
 

　　推薦采用：種類_位置_功能_狀態(tài)，示例說明：btn_homepage_seach_normal@2x.png，這樣可以一目了然，這是位于首頁，處于正常狀態(tài)的搜索按鈕2倍切圖。不要使用中文、特殊字符，請(qǐng)使用英文、下劃線、數(shù)字對(duì)切圖命名，數(shù)字不要打頭。
 

　　4、界面設(shè)計(jì)基礎(chǔ)規(guī)范——Android系統(tǒng)
 

　　屏幕設(shè)計(jì)尺寸
 

　　如果想一稿適配ios，那就新建720×1280 分辨率72，像素/英寸。如果單獨(dú)設(shè)計(jì)安卓MD新規(guī)范的，那就新建1080×1920 分辨率72，像素/英寸。
 

　　正因?yàn)锳ndroid手機(jī)分辨率多樣，為了保證同一設(shè)計(jì)在不同屏幕密度的手機(jī)上顯示效果一致，Android系統(tǒng)使用了下面兩個(gè)單位：
 

　　dp：android開發(fā)單位，相當(dāng)于比例換算單位。使用該單位，可以保證控件在不同密度的屏幕上按照比例解析顯示成相同視覺效果;
 

　　sp：android開發(fā)文字單位，和dp類似，也是為了保證文字在不同密度的屏幕上顯示相同的效果。
 

　　當(dāng)屏幕密度為MDPI(160DPI)時(shí)，1dp=1px
 

　　當(dāng)屏幕密度為MDPI(160DPI)時(shí)，1sp=1px

 

　　建立圖稿常見一般常用做法：
 

　　直接把ios的設(shè)計(jì)稿照搬過來，只不過狀態(tài)欄，導(dǎo)航欄，標(biāo)簽欄按照安卓的來。
 

　　720 x 1280 設(shè)計(jì)稿尺寸，按照傳統(tǒng)老辦法做的話，狀態(tài)欄高度：48 px，導(dǎo)航欄高度：96 px，標(biāo)簽欄高度：96 px
 

　　最新規(guī)范MD的做法：
 

　　8dp原則 柵格系統(tǒng)的最小單位是8dp，一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。
 

　　如果按照最新的Material Design規(guī)范設(shè)計(jì)的話，可以按照下面官方的規(guī)范。
 

　　字體使用規(guī)范
 

　　中文字體：思源黑體Source Han Sans / Noto(是一個(gè)字體，叫法不同而已)
 

　　英文字體：Roboto
 

　　注意：安卓的字號(hào)單位是SP
 

　　720×1280常見的字體大?。?br />  

　　24px、26px、28px、30px、32px、34px，36px等等。記住是偶數(shù)的，最小字號(hào)20px。

 

　　界面里的小圖標(biāo)常見的尺寸：24px、32px，48px等，記住4的倍數(shù)比較好。
 

　　注意圖標(biāo)的尺寸要統(tǒng)一尺寸，以眼睛觀察為主調(diào)整尺寸看上去一樣。方形的比圓形的看著要大，需要調(diào)整下。

 

　　設(shè)計(jì)標(biāo)注、切圖：
 

　　標(biāo)注的時(shí)候，如果是720×1280尺寸設(shè)計(jì)的，就選對(duì)應(yīng)的xhdpi，如果是1080×1920尺寸設(shè)計(jì)的，就選對(duì)應(yīng)的xxhdpi。
 

　　切圖推薦使用用Cutterman，選中下面所示，根據(jù)需要選擇不同分辨率的導(dǎo)出。輸出支持Android平臺(tái)的各種分辨率大小圖片，比如XXHPDI，XHDPI，HDPI啊之類的，通通自動(dòng)化輸出，為你節(jié)省出更多的時(shí)間。

 

　　至于切圖命名可以參考上面iOS系統(tǒng)的規(guī)范。
 

　　5.總結(jié)
 

　　很多時(shí)候UI的工作輸出后是開發(fā)工程師提供參考，因此最好和和開發(fā)工程師進(jìn)行溝通，了解他們的工作方式，標(biāo)注完成之后宣講你的注意事項(xiàng)，以更快捷高效的完成工作，并且最大限度的完成視覺高的還原。希望我們不僅僅只是一名作圖的設(shè)計(jì)，還是一名懂得交互和產(chǎn)品的好設(shè)計(jì)，多積累多看好的設(shè)計(jì)，才能更大程度提高自身的設(shè)計(jì)功底。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。