UI設計規(guī)范202X匯報人：某某某

匯報時間：2025.X.X目錄CONTENTS01.02.03.04.界面設計尺寸及欄高度邊距和間距內(nèi)容布局界面圖片設計比例建立統(tǒng)一風格的圖標APP版式設計規(guī)范界面文字設計規(guī)范設計適配切圖規(guī)范設計稿標注05.06.07.08.09.10.一、邊距和間距在移動端頁面的設計中，頁面中元素的邊距和間距的設計規(guī)范是非常重要的，一個頁面是否美觀、簡潔、是否通透和邊距間距的設計規(guī)范緊密相連，所以說我們有必要對它們進行了解。全局邊距全局邊距是指頁面內(nèi)容到屏幕邊緣的距離，整個應用的界面都應該以此來進行規(guī)范，以達到頁面整體視覺效果的統(tǒng)一。全局邊距的設置可以更好的引導用戶豎向向下閱讀。在實際應用中應該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設計語言，常用的全局邊距有32px、30px、24px、20px等等，當然除了這些還有更大或者更小的邊距，但上面說到的這些是最常用的，而且有一個特點就是數(shù)值全是偶數(shù)。以iOS原生態(tài)頁面為例，「設置」頁面和「通用」頁面都是使用的30px的邊距。再以微信和支付寶為例，他們的邊距分別是20px和24px。通常左右邊距最小為20px，這樣的距離可以展示更多的內(nèi)容，不建議比20還小，否則就會使界面內(nèi)容過于擁擠，給用戶的瀏覽帶來視覺負擔。30px是非常舒服的距離，是絕大多數(shù)應用的首選邊距。還有一種是不留邊距，通常被應用在卡片式布局中圖片通欄顯示，比如站酷APP（當然站酷APP也進行了改版，首頁已經(jīng)采用了不通欄的卡片式設計）。這種圖片通欄顯示的設置方式，更容易讓用戶將注意力集中到每個圖文的內(nèi)容本身，其視覺流在向下瀏覽時因為沒有留白的引導被圖片直接割裂，造成在圖片上停留更長時間。卡片間距在移動端頁面設計中卡片式布局是非常常見的布局方式，至于卡片和卡片之間的距離的設置需要根據(jù)界面的風格以及卡片承載信息的多少來界定，通常最小不低于16px，過小的間距會造成用戶的緊張情緒，使用最多的間距是20px、24px、30px、40px，當然間距也不宜過大，過大的間距會使界面變得松散，間距的顏色設置可以與分割線一致，也可以更淺一些。以iOS（750*1334px）為例，設置頁面不需要承載太多的信息，因此采用了較大的70px作為卡片間距，有利于減輕用戶的閱讀負擔，而通知中心承載了大量的信息，過大的間距會讓瀏覽變得不連貫和界面視覺松散，因此采用了較小的16px作為卡片的間距。微信的卡片間距設置，以及顏色值。下面的兩張截圖分別是巨劃算（卡片間距20px）和拼多多（卡片間距16px）的首頁截圖，這種電商類的APP因為需要承載大量的信息，所以一般間距設置的都比較小。總結(jié)：卡片間距的設置是靈活多變的，一定要根據(jù)產(chǎn)品的氣質(zhì)和實際需求去設置，平時也可以多截圖測量一下各類APP的卡片間距都是怎么設置的，看的多了并融會貫通，卡片間距設置自然會更加合理，更加得心應手。內(nèi)容間距一款APP除了各種欄（狀態(tài)欄、導航欄、標簽欄、工具欄）和控件icon就是內(nèi)容了，內(nèi)容的布局形式多種多樣，這里不去探討內(nèi)容具體應該如何去布局，我們來說一說內(nèi)容的間距設置問題。先來介紹一下格式塔原則中的一個重要的原則就是鄰近性，格式塔鄰近性原則認為：單個元素之間的相對距離會影響我們感知它是否以及如何組織在一起，，互相靠近的元素看起來屬于一組，而那些距離較遠的則自動劃分組外，距離近的關系緊密。來看下圖，左圖中的圓在水平方向比垂直距離近，那么，我們看到了4排圓點，而右圖則看成4列。在UI設計中內(nèi)容布局時，一定要重視鄰近性原則的運用，比如在下面這款輕芒閱讀APP的主界面中，每一個應用名稱都遠離其他圖標，與對應的圖標距離較近，保持親密的關系，也讓用戶的瀏覽變得更直觀，如果應用名稱與上下圖標距離相同，就分不出它是屬于上面還是下面，從而讓用戶產(chǎn)生錯亂的感覺。日日煮APP，上面圖片與文字較近，下面圖片與文字較遠，所以我們清晰的知道文字是屬于上面的圖片的。內(nèi)容布局在APP的設計中內(nèi)容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。列表式布局方式非常普遍，隨便打開一個APP，基本都存在這種布局方式，其布局形式的特點在于能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動的手勢能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。列表式布局以我們最常用的微信和QQ為例，其「信息」頁面都是采用的列表式布局，在采用這種布局形式的時候要注意列表舒適體驗的最小高度是80px，最大的高度要視內(nèi)容的多少而定。自如（列表高度110px）和唯品會（列表高度106px）的列表式布局。形式非常靈活。其特點在于，每張卡片的內(nèi)容和形式都可以相互獨立，互不干擾，所以可以在同一個頁面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨立存在的，其信息量可以相對列表更加豐富。卡片式布局在使用卡片式布局的時候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當然不同產(chǎn)品風格顏色可能不一樣，有些是淺灰色偏藍等。雙欄卡片的布局形式，比較常見于以圖片信息為主導的App。例如一些商城的商品陳列頁面。這種形式與卡片式類似，但它能在一屏里顯示更多的內(nèi)容，至少4張卡片。同時，由于分開左右兩欄的顯示，用戶可以更加方便地對比左右兩欄卡片的內(nèi)容。界面圖片設計比例在UI設計中，對于圖片的尺寸和比例沒有嚴格的規(guī)范，設計師往往憑借經(jīng)驗和感覺設置一個看起來不錯的尺寸，但事實上我們是有章可循的。運用科學的手段設置圖片的尺寸，可以獲得最優(yōu)的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。這些比例不無根據(jù)，它們都和圖片尺寸有關。16:9是根據(jù)人體工程學的研究，發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個長寬比例為16:9的長方形，4:3是勾三股四弦五，在攝影中非常常見……建立統(tǒng)一風格的圖標在應用界面的設計中，功能圖標不是單獨的個體，通常是由許多不同的圖標構(gòu)成整個系列，它們貫穿于整個產(chǎn)品應用的所有頁面并向用戶傳遞信息。A一套APP圖標應該具有相同的風格，包括造型規(guī)則、圓角大小，線框粗細，圖形樣式和個性細節(jié)等元素都應該具有統(tǒng)一的規(guī)范。BAPP版式設計規(guī)范版式設計又叫做版面編輯，即在有限的版面空間里，將版面的構(gòu)成要素如文字、圖片、控件等根據(jù)特定的內(nèi)容進行組合排列。一個優(yōu)秀的排版要考慮到用戶的閱讀習慣和設計美感，在UI設計中版面設計的原則有哪些呢？對齊對齊是貫穿版式設計的最基礎，最重要的原則之一，它能建立起一種整齊劃一的外觀，帶給用戶有序一致的瀏覽體驗。對稱對稱是宇宙間的設計哲學，是對立統(tǒng)一規(guī)律的本質(zhì)屬性，呈現(xiàn)出一種和諧自然的美，在應用界面的設計中，引導頁設計、注冊登錄輸入框和按鈕等無一不是對稱的設計。分組物以類聚，人以群分。分組是將同類別的信息組合在一起，直觀的呈現(xiàn)在用戶的面前，這樣的設計能夠減少用戶的認知負擔，在移動端界面的設計中最常見的分組方式就是卡片，為用戶選擇提供專注而又明確的瀏覽體驗。界面文字設計規(guī)范文字是APP中最核心的元素，是產(chǎn)品傳達給用戶的主要內(nèi)容，所以說文字在APP的設計中是非常重要的，那么，文字的字體如何選擇，字號如何設定，是否加粗，顏色如何設置？在一款APP中字號范圍一般在20-36之間（@2x）,當然iOS11中出現(xiàn)了大標題的設計，字號還是要根據(jù)產(chǎn)品屬性酌情設定。另外需要注意的一點是所有的字號設置都必須為偶數(shù)，上下級內(nèi)容字號極差關系為2-4號。字號使用場景備注36px用在少數(shù)標題如導航標題、分類名稱等32px用在少數(shù)標題如列表店鋪標題等30px用在較為重要的文字或操作按鈕如列表性標題分類名稱等28px用于段落文字如列表性商品標題等26px用于段落文字如小標題模塊描述等24px用于輔助性文字次要的標語等22px用于輔助性文字次要的備注信息等單擊此處添加標題關于字體:在iOS9推出之前設計師普遍采用華文黑體、谷歌思源、冬青等字體進行設計,iOS9推出了蘋果自己的字體——蘋方!自此之后蘋方字體被廣泛應用于移動端設計中。關于字體顏色和是否加粗:字體的顏色設置我們一般很少用純黑色,一般用深灰色和淺灰色、細體和粗體(注意要用字體本身的字重,不能用PS的加粗功能)來區(qū)分重要信息和次要信息,進行信息層級的劃分。單擊此處添加標題內(nèi)容切圖規(guī)范當界面設計定稿之后，設計師需要對圖標進行切片提供給開發(fā)工程師，通常我們只需要對icon進行切圖即可，文字、線條和一些標準的幾何形狀是不需要切圖的，例如搜索框只需要在標注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發(fā)工程師可以用代碼實現(xiàn)這種效果。輸出切片先將設計稿中的圖標重新排列在一張新的畫布中,保證同樣尺寸的圖標間距相同,這樣做的好處是為圖標建立一個控件庫,有利于圖標的整理。01給每一個圖標建立好參考線之后,用PS自帶的切片功能,沿著建立好的每個圖標的參考線畫框即可,注意最后要輸出PNG格式的切片(PNG格式擁有更多的顏色和細節(jié)并且支持透明)。02在具體操作時首先要將畫布背景色去掉,讓畫布變成透明,做好切片后執(zhí)行文件-存儲為Web所用格式,在對話框中選擇PNG格式,點擊「存儲」即可。03注：圖中標簽欄圖標的底色塊是為了保證統(tǒng)一的切片尺寸，可以根據(jù)色塊建立參考線，具體切圖時要將色塊去掉。切片命名切片命名的通用規(guī)范是，界面_功能_狀態(tài).png。名稱應使用英文命名，不要使用數(shù)字或者符號作為開頭，使用下劃線進行連接，例如一個首頁處于正常狀態(tài)下的按鈕命名是home_btn_nor@2x.png。其中界面首頁是home、空間按鈕是btn、狀態(tài)正常是normal。為了命名的正確性，設計師需要先和合作的開發(fā)工程師進行溝通確認設計稿標注當界面設計定稿之后,設計師需要對界面進行標注給開發(fā)工程師在還原界面時進行參考。借助一些專業(yè)