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

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

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

　　1、設(shè)計軟件
 

　　Sketch

 

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

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

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

　　Photoshop

 

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

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

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

　　手機分辨率：
 

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

　　屏幕尺寸：
 

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

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

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

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

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

　　屏幕設(shè)計尺寸
 

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

 

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

 

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

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

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

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

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

 

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

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

 

　　切圖規(guī)范
 

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

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

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

 

　　切圖輸出規(guī)范
 

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

 

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

 

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

 

　　切圖命名規(guī)范
 

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

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

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

　　屏幕設(shè)計尺寸
 

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

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

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

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

　　當屏幕密度為MDPI(160DPI)時，1dp=1px
 

　　當屏幕密度為MDPI(160DPI)時，1sp=1px

 

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

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

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

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

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

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

　　字體使用規(guī)范
 

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

　　英文字體：Roboto
 

　　注意：安卓的字號單位是SP
 

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

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

 

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

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

 

　　設(shè)計標注、切圖：
 

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

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

 

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

　　5.總結(jié)
 

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