ui設(shè)計規(guī)范大全：ui的界面設(shè)計規(guī)范

時間：2023-10-04 06:36:01 | 來源：網(wǎng)站運營

時間：2023-10-04 06:36:01 來源：網(wǎng)站運營

ui設(shè)計規(guī)范大全：ui的界面設(shè)計規(guī)范：ui設(shè)計規(guī)范大全：ui的界面設(shè)計規(guī)范你了解嗎？很多新人在開始做移動端UI設(shè)計的時候，往往對界面的一些尺寸規(guī)范不是十分清楚，很多時候都是憑借自己的感覺和經(jīng)驗去繪制界面，心里并沒有一個清晰的概念，導(dǎo)致做出來的頁面總是不那么盡如人意。下面這篇ui設(shè)計規(guī)范大全：ui的界面設(shè)計規(guī)范值得你看看。本文整理匯總了2020年最新的界面設(shè)計（iOS系統(tǒng)）中常用的一些UI尺寸規(guī)范大全以及ui設(shè)計語言和原則，如控件間距、適配、標(biāo)注、切圖等，設(shè)計師在設(shè)計時并不一定要嚴(yán)格遵守，但對這些規(guī)范應(yīng)有所了解，并融會貫通。

閱讀本文至少花3杯咖啡的時間，你做好準(zhǔn)備了嗎？




iOS系統(tǒng)

-




01.

-

界面設(shè)計尺寸及欄高度






















目前主流的iOS設(shè)備主要有iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸），它們都采用了Retina視網(wǎng)膜屏幕，其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，無論是欄高度還是應(yīng)用圖標(biāo)，設(shè)計師提供給開發(fā)人員的切片大小，前者始終是后者的1.5倍，并分別以@3x和@2x在文件名結(jié)尾命名，程序再根據(jù)不同分辨率自動加載@3x或者@2x的切片。




通過上面的講解和圖示我們了解了iPhone不同設(shè)備的物理尺寸，那么他們的像素分辨率又是多少呢？也就是說我們用Photoshop做設(shè)計新建畫布應(yīng)該設(shè)置多大呢？另外，iOS應(yīng)用中的欄，包括狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄等，它們的高度又分別是多少呢？（注意：iOS嚴(yán)格規(guī)定了各個欄的高度，這個是必須遵守的）通過下面的表格和圖示來為你解答上面的問題。













注意：在進行iphone x設(shè)計的時候我們依然可以采用熟悉的iphone 7的設(shè)計尺寸作為模板，只是高度增加了290px，設(shè)計尺寸為750*1624（@2x）。注意狀態(tài)欄的高度由原來的40px變成了88px，另外底部要預(yù)留68px的主頁指示器的位置。




























02.

-

邊距和間距







在移動端頁面的設(shè)計中，頁面中元素的邊距和間距的設(shè)計規(guī)范是非常重要的，一個頁面是否美觀、簡潔、是否通透和邊距間距的設(shè)計規(guī)范緊密相連，所以說我們有必要對它們進行了解。





全局邊距




全局邊距是指頁面內(nèi)容到屏幕邊緣的距離，整個應(yīng)用的界面都應(yīng)該以此來進行規(guī)范，以達到頁面整體視覺效果的統(tǒng)一。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。










在實際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設(shè)計語言，常用的全局邊距有32px、30px、24px、20px等等，當(dāng)然除了這些還有更大或者更小的邊距，但上面說到的這些是最常用的，而且有一個特點就是數(shù)值全是偶數(shù)。




以iOS原生態(tài)頁面為例，“設(shè)置”頁面和“通用”頁面都是使用的30px的邊距。










再以微信和支付寶為例，他們的邊距分別是20px和24px。










通常左右邊距最小為20px，這樣的距離可以展示更多的內(nèi)容，不建議比20還小，否則就會使界面內(nèi)容過于擁擠，給用戶的瀏覽帶來視覺負擔(dān)。30px是非常舒服的距離，是絕大多數(shù)應(yīng)用的首選邊距。




還有一種是不留邊距，通常被應(yīng)用在卡片式布局中圖片通欄顯示，比如站酷APP（當(dāng)然站酷APP也進行了改版，首頁已經(jīng)采用了不通欄的卡片式設(shè)計）。這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個圖文的內(nèi)容本身，其視覺流在向下瀏覽時因為沒有留白的引導(dǎo)被圖片直接割裂，造成在圖片上停留更長時間。

























卡片間距




在移動端頁面設(shè)計中卡片式布局是非常常見的布局方式，至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來界定，通常最小不低于16px，過小的間距會造成用戶的緊張情緒，使用最多的間距是20px、24px、30px、40px，當(dāng)然間距也不宜過大，過大的間距會使界面變得松散，間距的顏色設(shè)置可以與分割線一致，也可以更淺一些。





以iOS（750*1334px）為例，設(shè)置頁面不需要承載太多的信息，因此采用了較大的70px作為卡片間距，有利于減輕用戶的閱讀負擔(dān)，而通知中心承載了大量的信息，過大的間距會讓瀏覽變得不連貫和界面視覺松散，因此采用了較小的16px作為卡片的間距。










下面來看一下微信的卡片間距設(shè)置的是多少，以及顏色值。










注：卡片間距和顏色值是直接截圖測量和吸取的，可能不十分準(zhǔn)確





繼續(xù)舉例，下面的兩張截圖分別是巨劃算（卡片間距20px）和拼多多（卡片間距16px）的首頁截圖，這種電商類的APP因為需要承載大量的信息，所以一般間距設(shè)置的都比較小。











總結(jié)：卡片間距的設(shè)置是靈活多變的，一定要根據(jù)產(chǎn)品的氣質(zhì)和實際需求去設(shè)置，平時也可以多截圖測量一下各類APP的卡片間距都是怎么設(shè)置的，看的多了并融會貫通，卡片間距設(shè)置自然會更加合理，更加得心應(yīng)手。





內(nèi)容間距





一款A(yù)PP除了各種欄（狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄）和控件icon就是內(nèi)容了，內(nèi)容的布局形式多種多樣，這里不去探討內(nèi)容具體應(yīng)該如何去布局，我們來說一說內(nèi)容的間距設(shè)置問題。





先來介紹一下格式塔原則中的一個重要的原則就是鄰近性，格式塔鄰近性原則認(rèn)為：單個元素之間的相對距離會影響我們感知它是否以及如何組織在一起，，互相靠近的元素看起來屬于一組，而那些距離較遠的則自動劃分組外，距離近的關(guān)系緊密。來看下圖，左圖中的圓在水平方向比垂直距離近，那么，我們看到了4排圓點，而右圖則看成4列。










在UI設(shè)計中內(nèi)容布局時，一定要重視鄰近性原則的運用，比如在下面這款輕芒閱讀APP的主界面中，每一個應(yīng)用名稱都遠離其他圖標(biāo)，與對應(yīng)的圖標(biāo)距離較近，保持親密的關(guān)系，也讓用戶的瀏覽變得更直觀，如果應(yīng)用名稱與上下圖標(biāo)距離相同，就分不出它是屬于上面還是下面，從而讓用戶產(chǎn)生錯亂的感覺。










再來看一個案例，日日煮APP，上面圖片與文字較近，下面圖片與文字較遠，所以我們清晰的知道文字是屬于上面的圖片的。










03.

-

內(nèi)容布局




在APP的設(shè)計中內(nèi)容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。




列表式布局




列表式布局方式非常普遍，隨便打開一個APP，基本都存在這種布局方式，其布局形式的特點在于能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動的手勢能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。




以我們最常用的微信和QQ為例，其“信息”頁面都是采用的列表式布局，在采用這種布局形式的時候要注意列表舒適體驗的最小高度是80px，最大的高度要視內(nèi)容的多少而定。










繼續(xù)舉例，自如（列表高度110px）和唯品會（列表高度106px）的列表式布局。










卡片式布局




形式非常靈活。其特點在于，每張卡片的內(nèi)容和形式都可以相互獨立，互不干擾，所以可以在同一個頁面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨立存在的，其信息量可以相對列表更加豐富。




在使用卡片式布局的時候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣，有些是淺灰色偏藍等。










雙欄卡片的布局形式，比較常見于以圖片信息為主導(dǎo)的App。例如一些商城的商品陳列頁面。這種形式與卡片式類似，但它能在一屏里顯示更多的內(nèi)容，至少4張卡片。同時，由于分開左右兩欄的顯示，用戶可以更加方便地對比左右兩欄卡片的內(nèi)容。










04.

-

界面圖片設(shè)計比例




在UI設(shè)計中，對于圖片的尺寸和比例沒有嚴(yán)格的規(guī)范，設(shè)計師往往憑借經(jīng)驗和感覺設(shè)置一個看起來不錯的尺寸，但事實上我們是有章可循的。運用科學(xué)的手段設(shè)置圖片的尺寸，可以獲得最優(yōu)的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。




這些比例不無根據(jù)，它們都和圖片尺寸有關(guān)。16:9 是根據(jù)人體工程學(xué)的研究，發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個長寬比例為16:9的長方形，4:3 是勾三股四弦五，在攝影中非常常見……。










05.

-

建立統(tǒng)一風(fēng)格的圖標(biāo)




在應(yīng)用界面的設(shè)計中，功能圖標(biāo)不是單獨的個體，通常是由許多不同的圖標(biāo)構(gòu)成整個系列，它們貫穿于整個產(chǎn)品應(yīng)用的所有頁面并向用戶傳遞信息。




一套APP圖標(biāo)應(yīng)該具有相同的風(fēng)格，包括造型規(guī)則、圓角大小，線框粗細，圖形樣式和個性細節(jié)等元素都應(yīng)該具有統(tǒng)一的規(guī)范。













通過分析以上三組圖標(biāo)可以得出：他們具有統(tǒng)一的色彩，統(tǒng)一的圓角大小，統(tǒng)一的線框粗細，那綜合起來也就是具有統(tǒng)一的風(fēng)格，給用戶高度統(tǒng)一的視覺體驗。




06.

-

APP版式設(shè)計規(guī)范




版式設(shè)計又叫做版面編輯，即在有限的版面空間里，將版面的構(gòu)成要素如文字、圖片、控件等根據(jù)特定的內(nèi)容進行組合排列。一個優(yōu)秀的排版要考慮到用戶的閱讀習(xí)慣和設(shè)計美感，在UI設(shè)計中版面設(shè)計的原則有哪些呢？




對齊




對齊是貫穿版式設(shè)計的最基礎(chǔ)，最重要的原則之一，它能建立起一種整齊劃一的外觀，帶給用戶有序一致的瀏覽體驗。













對稱




對稱是宇宙間的設(shè)計哲學(xué)，是對立統(tǒng)一規(guī)律的本質(zhì)屬性，呈現(xiàn)出一種和諧自然的美，在應(yīng)用界面的設(shè)計中，引導(dǎo)頁設(shè)計、注冊登錄輸入框和按鈕等無一不是對稱的設(shè)計。










分組




物以類聚，人以群分。分組是將同類別的信息組合在一起，直觀的呈現(xiàn)在用戶的面前，這樣的設(shè)計能夠減少用戶的認(rèn)知負擔(dān)，在移動端界面的設(shè)計中最常見的分組方式就是卡片，為用戶選擇提供專注而又明確的瀏覽體驗。













07.

-

界面文字設(shè)計規(guī)范




文字是APP中最核心的元素，是產(chǎn)品傳達給用戶的主要內(nèi)容，所以說文字在APP的設(shè)計中是非常重要的，那么，文字的字體如何選擇，字號如何設(shè)定，是否加粗，顏色如何設(shè)置？




在一款A(yù)PP中字號范圍一般在20-36之間（@2x）,當(dāng)然iOS 11中出現(xiàn)了大標(biāo)題的設(shè)計，字號還是要根據(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ū)分重要信息和次要信息，進行信息層級的劃分。













08.

-

設(shè)計適配




iOS主流設(shè)備的分辨率分別是640x1136px（@2x）（iPhone SE）、750 x1334px（@2x）（iPhone 6s/7/8）、1242x2208px（@3x）（iPhone 6s/7/8 Plus）、1125x2436px（@3x）／750x1624px（@2x）（iPhone X）。




在設(shè)計設(shè)計中設(shè)計師需要設(shè)計一套基準(zhǔn)設(shè)計圖來達到適配多個分辨率的目的，我們可以選擇中間尺寸750 x1334px作為基準(zhǔn)，向下適配640x1136px，向上適配1242x2208px和750x1624px／1125x2436px。













750x1334向下適配640x1136




由于750x1334px和640x1136px兩個尺寸的界面都是2倍的像素倍率，因此它們的切片大小是相同的，即系統(tǒng)圖標(biāo)、文字和高度都無需適配，需要適配的是寬度。




為了讓大家了解適配的原則，我們以文字描述和圖示的方式進行750x1334px到640x1136px的界面推導(dǎo)。




繪制一個750x1334px的設(shè)計圖，這是最常見的首頁設(shè)計圖，從上至下分別是狀態(tài)欄、導(dǎo)航欄、首焦圖、主要入口、分割、列表。













下面開始進行適配，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率，界面的圖標(biāo)、文字大小等都是相同的，所以我們不需要改變圖像大小，只需將畫布大小改成 640x1136px即可，然后再改變橫向元素的間距以達到適配的目的。




首先打開750x1334px的設(shè)計稿，執(zhí)行Command+Alt+C（改變畫布大小的快捷鍵），鼠標(biāo)左鍵單擊“定位”的左上角的格子，設(shè)置寬高為640和1136，點擊“確定”。













改變畫布大小之后，設(shè)計稿的右邊和下邊都被裁切（上面左圖中半透明蒙版覆蓋區(qū)域），畫布縮小成640x1136px。




上面左圖裁切到右圖適配完成，做了如下調(diào)整。




1）導(dǎo)航欄右邊的圖標(biāo)向左移動保持和原來的右邊距一致，標(biāo)題居中。




2）首焦圖高度除以1.17（750／640=1.17得到）后居中，寬度640px。




3）主要入口右邊的圖標(biāo)向左移動保持和原來的右邊距一致，各圖標(biāo)的間距等寬。




750x1334向上適配1242x2208




由于750x1334px界面是2倍的像素倍率，而1242x2208px是3倍的像素倍率，也就是說1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍，所以我們在進行適配的時候直接將界面的圖像大小變?yōu)樵瓉淼?.5倍，然后調(diào)整畫布大小為1242x2208px，最后調(diào)整界面圖標(biāo)和元素的橫向間距的大小完成適配。




上面說了整體思路，下面我們來說說具體怎么適配。




首先對750x1334px的畫布執(zhí)行Command+Alt+I命令（調(diào)整圖像大小），單位設(shè)置為百分比，寬高設(shè)置為150%，點擊“確定”，調(diào)整之后的畫布大小為1125x2001px。













緊接著對1.5倍之后的1125x2001px界面執(zhí)行Command+Alt+C（調(diào)整畫布大小），鼠標(biāo)單擊“定位”左上角的格子，調(diào)整寬高為1242和2208px，點擊“確定”。














上面左圖拓展畫布到右圖完成適配做了如下調(diào)整。




1）導(dǎo)航欄右邊的圖標(biāo)向右移動保持和原來的右邊距一致，標(biāo)題居中。




2）首焦圖的高度乘以1.65（1242/750=1.65得到）后居中，寬度1242px。




3）主要入口右邊的圖標(biāo)向右移動和原來的右邊距一致，各圖標(biāo)的間距等寬。




注：分割線仍是1px。




750x1334向上適配1125x2436px（@3x）




與蘋果之前發(fā)布的iOS設(shè)備相比，iPhone X的像素分辨率發(fā)生了變化，為1125x2436px（@3x），在實際工作中為了方便向上和向下的適配，我們?nèi)匀豢梢赃x擇熟悉的iPhone 7（750x1334px）的尺寸作為模版進行設(shè)計，只是高度增加了290px；設(shè)計尺寸為：750x1624px（@2x）。設(shè)計完成之后將設(shè)計稿的圖像大小拓展1.5倍即可得到1125x2436px（@3x）尺寸的設(shè)計稿。




在適配的時候需要注意，狀態(tài)欄由之前的40px增加到88px，標(biāo)簽底部預(yù)留68px用于放置主頁指示器，如下圖所示。










關(guān)于主頁指示器的適配涉及到兩種情況：底部出現(xiàn)標(biāo)簽欄、工具欄等操作設(shè)計時，需要將底色下延68px并填充原有顏色，這樣的處理可以讓底部設(shè)計更佳簡潔舒適，沒有功能操作時，頁面底部不需要填充顏色，只需蓋住主頁指示器即可。










對于大多數(shù)采用瀑布流的頁面來說，僅僅是屏幕高度上的變化，可以無視。但對于如：新手引導(dǎo)頁、音樂播放器等需要單屏顯示的界面就需要重新布局。










09.

-

切圖規(guī)范




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













輸出切片




先將設(shè)計稿中的圖標(biāo)重新排列在一張新的畫布中，保證同樣尺寸的圖標(biāo)間距相同，這樣做的好處是為圖標(biāo)建立一個控件庫，有利于圖標(biāo)的整理。




給每一個圖標(biāo)建立好參考線之后，用PS自帶的切片功能，沿著建立好的每個圖標(biāo)的參考線畫框即可，注意最后要輸出PNG格式的切片（PNG格式擁有更多的顏色和細節(jié)并且支持透明）。




在具體操作時首先要將畫布背景色去掉，讓畫布變成透明，做好切片后執(zhí)行“文件-存儲為Web所用格式，在對話框中選擇PNG格式，點擊“存儲”即可。













注：圖中標(biāo)簽欄圖標(biāo)的底色塊是為了保證統(tǒng)一的切片尺寸，可以根據(jù)色塊建立參考線，具體切圖時要將色塊去掉。




切片命名




切片命名的通用規(guī)范是，界面_功能_狀態(tài).png。名稱應(yīng)使用英文命名，不要使用數(shù)字或者符號作為開頭，使用下劃線進行連接，例如一個首頁處于正常狀態(tài)下的按鈕命名是 home_btn_nor@2x.png。其中界面首頁是home、空間按鈕是btn、狀態(tài)正常是normal。為了命名的正確性，設(shè)計師需要先和合作的開發(fā)工程師進行溝通確認(rèn)。




10.

-

設(shè)計稿標(biāo)注




當(dāng)界面設(shè)計定稿之后，設(shè)計師需要對界面進行標(biāo)注給開發(fā)工程師在還原界面時進行參考。借助一些專業(yè)的標(biāo)注工具有利于我們提高工作效率，常用的標(biāo)注工具有Mark Man或PX Cook。




在一份設(shè)計稿中需要標(biāo)注的內(nèi)容是文字的字號大小、粗細、顏色、不透明度；界面的背景顏色、不透明度；各個圖標(biāo)、列表、文字之間的間距。










界面標(biāo)注的作用是給開發(fā)工程師提供參考，因此在標(biāo)注之前需要和開發(fā)工程師進行溝通，了解他們的工作方式，標(biāo)注完成之后宣講你的注意事項，以更快捷高效的完成工作，并且最大限度的完成視覺高的還原。




以上包括界面尺寸、控件間距、版式設(shè)計規(guī)范、文字設(shè)計規(guī)范、設(shè)計適配、標(biāo)注、切圖等等一些列的移動端UI設(shè)計規(guī)范。




設(shè)計語言

-




在做設(shè)計語言之前我們先要建立設(shè)計原則，以及設(shè)計原則下面的設(shè)計關(guān)鍵詞，通過設(shè)計關(guān)鍵詞推導(dǎo)出對應(yīng)的視覺表現(xiàn)手法，也就是通常我們所說的，形，色，字，構(gòu)，質(zhì)。















如何去做？









http://sumaart.com (二維碼自動識別)









根據(jù)原子定律（不懂原子定律同學(xué)可以搜索原子設(shè)計方法）我們從頁面中最細小的元素入手，也可以理解為頁面中無法再拆分的元素開始，它是組成界面最基礎(chǔ)的元素，從最基礎(chǔ)的元素，開始做統(tǒng)一性，本次我將從顏色，字體，網(wǎng)格說起。




顏色













從顏色開始，需要根據(jù)整個頁面中場景進行顏色定義，同樣色彩也需要根據(jù)我們定義的關(guān)鍵詞去推導(dǎo)，在定義顏色過程中，可以參加色彩心理學(xué)原理，以及競品分析：




高品質(zhì)：深色配色，黑白，中性的配色




全球化：深邃紫色，科技藍，自然綠




年輕化：漸變色，馬卡龍撞色




在定義了上述大的色彩原理下，需要對界面中使用場景進行梳理得出下列大概色彩類型：













當(dāng)然也可以定義一些界面中常用漸變色板，現(xiàn)在很多網(wǎng)站也有很多很好看的漸變可以去嘗試。













也可以定義一些圖片上放文字效果，疊加什么顏色，顏色的模式是什么樣的，透明度是多大，這些都可以幫助我們定義好一套色彩體系。




當(dāng)然還有一些很不錯的色板，如果你不知道怎么配色，也不知道當(dāng)下流行色是怎么樣，也可以從這些色板里面選擇一個配色，挑選一些符合你們產(chǎn)品的配色。













▲ https://www.materialui.co/













▲ https://coolors.co/













▲ http://colorsupplyyy.com/app/







字體













字體是界面中用戶看到最多的一些元素，除了定義界面中的字體，同時我們也要定義界面下的字體，包括線下物料宣傳等，在字體選擇上，需要注意：




1.信息傳遞是否足夠清晰，字體也是有情感的，字體表達的情感是否和我們界面中需求是一致的。




2.個性上，有的字體很方正，筆直，有的字體筆劃比較活潑，那么不同字體我們?nèi)绾稳ミx擇，同樣需要在前面大的設(shè)計關(guān)鍵詞下面去設(shè)計。













對于字體選擇，一定要根據(jù)產(chǎn)品關(guān)鍵詞去定義，以上是界面中常用一些英文和中文字體，每種字體雖然大體看差不多，其實每個字體，細看其實有些筆畫上的差異！我個人建議蘋方字體和Helvetica Neue比較通用性更強，中文字體包比較大，特殊產(chǎn)品如果需要有個性化中文字體，需要注意字體大小包處理！




字號




字號是界面中很重要元素，字號大小決定了信息的層次和層次，在扁平化設(shè)計中，字號越來越重要，好的字號設(shè)置能讓界面更加清晰一致性強！相反差的字號會讓界面看起來山寨，關(guān)于字號的選擇，可以遵循iOS的規(guī)范大小，也可以根據(jù)自己產(chǎn)品個性去定義你的字號。




假如你是電商產(chǎn)品，那么你可能需要對價格字體單獨設(shè)置字號，如果你是金融產(chǎn)品，那么對應(yīng)的字號也需要定義好對應(yīng)的大小層級！










▲ 對于特殊字體的處理（375分辨率）













▲ 常用的5種字體節(jié)奏（375分辨率）













▲ 特殊數(shù)字或圖形化字號（375分辨率）




行高




參考3C原理，不明白可以百度搜，英文的行高是字號的1.2倍，但是中英文字體原因，中文字體一般是1.5-2倍之間，我們需要充分考慮不同人群特點，老人，兒童，年輕人，以及使用環(huán)境。













英文的行高一般為字體1.2倍，比如你字號是20號，那么行高24，當(dāng)然也有很多國外設(shè)計師采用黃金比例的行高，比如1.414倍，1.618倍，1.717倍數(shù)等等，行高大小，正如我前面所說，需要充分考慮你整個界面的節(jié)奏，和內(nèi)容以及用戶人群來定義是需要緊湊還是疏密！













中文常用的行高，一般為字體大小的1.5倍比較合適，當(dāng)然也可以一些簡單的做法，就是字號+4原則，比如你字號是20，你的行高24，字號28，行高32也是可行的，每個團隊可以根據(jù)需求去定義。







字重



















字重，顧名思義就是字體粗細，越來越多的產(chǎn)品需要通過字體粗細來拉開信息層次，當(dāng)下主流趨勢iOS11中也是通過字重來拉開信息層級的，所以在定義字體規(guī)范時候也需要重復(fù)考慮進去什么時候用什么字體。




網(wǎng)格系統(tǒng)














這塊知識相對比較復(fù)雜，我這邊簡單分享下，我想大多數(shù)同學(xué)都經(jīng)歷過這個情況，拿到其他設(shè)計師源文件，間距混亂，一會邊距20，一會24，一會32，特別混亂，原因在于大家間距沒有去詳細定義它的規(guī)則。




看看別人怎么做的？














▲ Airbnb的規(guī)范中，對于間距的定義，沒有像其他規(guī)范那樣，只定義一個最小單位數(shù)值，而是定義了5種彈性間距，8，16，24，48，64在他的全部設(shè)計里面，包括元素和元素之前，圖文之間都是運用這一套間距規(guī)則，保證了整個界面的統(tǒng)一性。













▲ 這是國外運用比較多的8點網(wǎng)格，Airbnb在這個基礎(chǔ)上進行了進一步的簡潔，只保留了8，16，24，48，64













▲ 國外有項數(shù)據(jù)表明，設(shè)計師在運用8為最小單位做設(shè)計時候，一般常用間距有哪些，最后定義了5種常用間距規(guī)則。













所以，我們在規(guī)范時候，一定不要運用太多的間距規(guī)則，否則間距，很難得到控制和統(tǒng)一，建議定幾種間距，你可以是8，16，24，48，64，如果你覺得這些間距不夠用，你也可以添加新的間距規(guī)則進行，但是建議不要太多。




網(wǎng)格設(shè)計策略




1.定最小單位




先定義最小單位，單位越小頁面越緊湊，目前常用比較多的有，4，5，8，假設(shè)我們最小單位是4為倍數(shù)，那我們所有的間距都按照8的倍數(shù)遞增，得到間距規(guī)則，8，16，20，40，60










2.按增量設(shè)計
















http://sumaart.com (二維碼自動識別)







▲ 界面中所有的間距地方，全部運用8，16，20，40，60這幾個原則來做設(shè)計，保證頁面統(tǒng)一性。













▲ 頁面中的元素高度，比如banner高度也是按照間距增量去設(shè)計高度，那么整個頁面就更加有系統(tǒng)性和科學(xué)性。













▲ 在做系統(tǒng)設(shè)計時候經(jīng)常用到的，通過增量來做設(shè)計，希望大家都可以掌握這種間距原則！







圖形













圖形是界面中的靈魂，圖形也是很好傳遞視覺語言很重要的一部分，如何保證圖形一致性，打造界面中視覺記憶點，這個點很大，展開來講很多，包括品牌符號，icon插畫元素一系列等等。




設(shè)計語言是一個很龐大的設(shè)計體系，字體，網(wǎng)格系統(tǒng)，顏色，圖形等等，包括后面定義好原子后，怎么定義組件，再到頁面。文章里借鑒了一些國外設(shè)計語言網(wǎng)站，大家感興趣，也可以從這些網(wǎng)站里學(xué)習(xí)下，看看別人是如何做的。

通過以上內(nèi)容相信大家對ui設(shè)計規(guī)范大全：ui的界面設(shè)計規(guī)范也有一定的了解了，大家有什么問題可以隨時留言評論，看見就會回復(fù)的，評論區(qū)扣1贈送UI設(shè)計入門資料大禮包一份，需要的小伙伴注意嘍~