Ui設計規(guī)范（ui設計規(guī)范尺寸）

大家好！今天讓小編來大家介紹下關于Ui設計規(guī)范的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內優(yōu)秀的企業(yè)，服務客戶遍布全球各地，相關業(yè)務請撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

• 1、手機UI設計的基本規(guī)范

• 2、UI設計的三大要素是什么？天津UI設計培訓

• 3、UI設計標注有哪些規(guī)范?

• 4、UI界面設計規(guī)范有哪些？

一、手機UI設計的基本規(guī)范

大家都知道手機采用的：一個是蘋果的iOS系統(tǒng)，另一個就是谷歌公司的安卓系統(tǒng)。華為的鴻蒙系統(tǒng)雖然早就上線，但是還沒有真正運用在手機移動端上，小阿在這里期待著，希望有一天也能寫“華為‘鴻蒙系統(tǒng)’的界面尺寸規(guī)范。”

這兩者之間有一個明顯的區(qū)別就是iOS系統(tǒng)是非開源的，簡單來說就是不能別隨意改動的，連圖標都是必須帶圓角的，對交互設計師很友好的。

而安卓系統(tǒng)就是開源的，界面可以隨意改動，尺寸也沒有特別的規(guī)范，圖標、尺寸成千上萬種，根據(jù)手機品牌不同，形狀也不同，對于交互設計稍微有那么些許不友好。

那我們就來看看安卓和iOS的具體有哪些界面規(guī)范。

一、iOS界面規(guī)范

首先蘋果分為兩種尺寸，一種是中碼比如6s、7、8等，這種我們一般切圖命名為@2X。還有一種就是Plus版本，這種一般切圖命名為@3X。

蘋果6s 的尺寸750px * 1334px，6s Plus的尺寸就是1242px * 2208 px。兩者之間的關系就是1.5倍，怎么說呢，就是6s之類的手機想要變成Plus，我們設計師稍微想要偷懶一下設計，只需要整體擴大1.5倍，比如圖標。

來分析一下界面的尺寸規(guī)范：

首先是狀態(tài)欄，就是信號電池欄的高度為40px。導航欄部分，就是“設置”欄高度為88px。

而下邊的底部欄（導航欄）高度則為98px。

注意這三種尺寸是規(guī)定比較死的。我們做開發(fā)遇到Plus版把以上尺寸等比例擴大1.5倍就可以了。剩下的中間空白部分，我們就可以任意填充內容，Banner或者圖標？

☆ 關于圖標部分

蘋果的圖標極具有美感，完全符合柵格黃金比例，所以看起來十分協(xié)調。因為都是使用的網(wǎng)格進行規(guī)范化設計，所以一整套圖標都保持著高統(tǒng)一性。

整個點擊圖標最小不能小于44px，一般大小為58px，圓角為12px,但是我們習慣取為整數(shù)60px,就會非常的標準。為什么一定有最小的控制呢？因為我們手指有一個觸碰面呀~低于上述的寬度，就可能碰不到。一定要非常注意用戶的使用感受哦。

☆ 關于分割線部分

注意分割線不是一條線，是一個寬度為1px的矩形，而且顏色多為灰色。

☆ 關于板塊與板塊之間

板塊與板塊之間的灰色條間隔是30-70之間，一般來說取整數(shù)。iOS系統(tǒng)采取了70 px,有利于減輕用戶的閱讀負擔。列表的高度一般高于88 px，列表與列表之間的距離是10px-30px,太小會有碰撞。作為UI設計師，這一點是要考慮的是吧？

☆ 關于列表中的尺寸規(guī)范以及字體要求

☆ 關于左右間隔的安全區(qū)域

這個安全區(qū)域又稱之為留白邊距，iOS的原生態(tài)頁面【設置】頁面的邊距是30px,根據(jù)不同產品有不同的調整，寬度一般在16px--30px浮動，最大的特點就是數(shù)值全是偶數(shù)。

☆ 關于切換按鈕的尺寸

☆ 關于字體

iOS系統(tǒng)的字體是蘋方字體，字體的顏色和粗細也大有講究，標題等文字就是粗體，一些說明文字等就是淺色非加粗體。常常用文字的粗細體來區(qū)分重要信息和次要信息，進行信息層級的劃分。字體顏色很少采用純黑色，一般用的是深灰色和淺灰色。

主標題的字體大小設置一般是32-36左右，加粗居中。列表中的文字就要小一些，字體大小為30，不會加粗。輔助性字體大小一般24-26。說明文字一般不會小于22，最小設置為20，再小就看不到啦。另外需要注意的一點是所有的字號設置都必須為偶數(shù)，上下級內容字號極差關系為2-4號。

關于蘋果界面的小部分尺寸規(guī)范就介紹到這里，下期再做安卓界面的尺寸介紹。

作為UI設計師，一定要具體掌握界面的大小尺寸來適應美學觀點，讓人感覺協(xié)調舒適，能在有效的范圍內極快吸引用戶的注意力。

二、安卓界面規(guī)范

眾所周知，安卓系統(tǒng)是開源的，國內又有超多的手機廠商，小米、魅族、華為、oppo、三星等，每一個品牌有屬于自己的UI設計規(guī)范，但是我們主要分析UI界面尺寸規(guī)范。

1、字體

安卓系統(tǒng)中文采用的是思源黑體，英文字體為robot字體。

只使用偶數(shù)單位 24 pt，28 pt，36 pt等字體大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？

講圖標之前先來分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次數(shù)值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系統(tǒng)專用的長度單位，設備獨立像素的意思。不同設備有不同的顯示效果,這個和設備硬件有關。多為圖標使用，文字則用sp(放大像素)，主要用于字體顯示best for textsize。

px是像素的意思， 不同設備顯示效果相同。

安卓各屏幕密度關系如下：

3、圖標

不同手機品牌的圖標的標志是不一樣的，對應不同大小屏幕的尺寸如下：

系統(tǒng)圖標的尺寸：

快捷圖標的尺寸：

應用圖標的尺寸：

4、應用欄的尺寸

從左到右依次是：① 應用欄高度：56dp；應用欄左右內邊距為16dp；應用欄圖標上下左內邊距為16dp；應用欄標題左內邊距為72dp；應用欄標題下邊距：20dp；

②應用欄高度為128dp；

③操作欄高度為56dp；標題欄高度：80dp；標題欄底部內邊距：8dp；描述區(qū)域高度：72dp；描述區(qū)底部內邊距：16dp。

5、列表高度

垂直邊框、水平外邊距、邊框左右外邊距各16dp；帶有圖標或者頭像的內容有72dp的左邊距。

垂直邊距

①狀態(tài)欄：24dp；②工具欄：56dp；③子標題：48dp；④列表項：72dp

垂直邊框、水平外邊距、邊框左右外邊距各16dp；帶有圖標或者頭像的內容有72dp的左邊距。

垂直邊距

①狀態(tài)欄：24dp；②工具欄：56dp；③標題和列表項：48dp；④子標題：48dp；⑤內容區(qū)域間距離為8dp

6、切圖

上周我們講到iPhone 6與iPhone 6 Plus約是1.5的關系，而xhdpi的Android手機屏幕與xxdpi的屏幕剛好是1.5倍的關系，所以iPhone 6 Plus和xxhdip也可以共用一套切圖，掌握好尺寸關系，能讓工作變得簡單很多。

7、界面適配

安卓多屏幕支持的基礎是它能夠管理應用程序的布局和位圖可繪制對象的渲染以適當?shù)姆绞綄Ξ斍捌聊慌渲玫哪芰ΑＴ撓到y(tǒng)處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放位圖可繪制在屏幕密度正確呈現(xiàn)您的應用程序在每個屏幕的配置，來優(yōu)化用戶界面設計，帶來更良好的用戶體驗。

如何做到安卓界面適配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的關系；明白實際密度和系統(tǒng)密度的關系，dp、sp、px的區(qū)別；明白dp與px的轉換。這里不做過多闡述，后期寫一篇具體的~

安卓的界面規(guī)范就講到這里，要明白設計界面規(guī)范的意義是確保設計的統(tǒng)一性與合理性，規(guī)范維護的是項目的統(tǒng)一，為了項目利益最大化，高效化。所以作為UI設計師的我們，如果一點設計規(guī)范不遵守，全靠自己想當然，那就別發(fā)給前端人員啦，他也看不懂。

所以作為UI設計，必須要要遵守設計規(guī)范，這樣才能做到設計有道可尋，希望以上回答對你了解手機界面設計規(guī)范有所幫助。

二、UI設計的三大要素是什么？天津UI設計培訓

UI設計包括以下幾個要素：

想要成為一名及格的設計師并不簡單，需要有足夠的耐心和興趣來支持，最好在學習之前先來做一個小測試→點擊測試我適不適合學設計

一、色彩

色彩是絕大多數(shù)設計給用戶傳遞的最顯著的視覺元素之一，是藝術表現(xiàn)的要素之一，不同的色彩對用戶有著不同的感受和體驗。色彩從來都不是越多越好，通常配色方案當中，色彩數(shù)量要控制在3種左右，設計師根據(jù)色彩對人們心理的影響，合理地加以運用，通過創(chuàng)建配色方案，系統(tǒng)地對品牌和UI界面的色彩進行管理，這確保了品牌和UI在色彩的運用上保持著高度的一致。

二、速度

或許很多的UI設計師會覺得UI設計知識一種用戶界面的問題，與網(wǎng)頁的響應速度無關，若你也有這樣的想法，就大錯特錯了，要知道UI的定義就是用戶界面英文單詞的縮寫。UI的最終目標就是提升用戶體驗，而提升頁面相應速度則是用戶體驗中必須要注意的東西，所以，從某種意義上來說，這種想法是錯誤的，對UI設計師而言，頁面響應速度同樣是開發(fā)過程中需要考慮的重點。

三、對比度

元素之間的差異往往能夠借助對比度凸顯，創(chuàng)建富有層次的視覺結構，讓內容的可讀性更強，讓信息更容易被用戶所理解和吸收。對比強烈的元素讓用戶輕松地注意到構成對比的元素，創(chuàng)造自然的視覺模式和用戶流程，而對比度的重要性之所以如此之高，很大程度上是因為它廣泛的適用性和顯著的實用性，在控制對比度時，你需要明確對比度經(jīng)常所涉及的元素類型和屬性。

四、美觀

美觀，其實也就是整體UI設計的美觀程度，整體界面設計的越景美，越好看，用戶也就越愛不擇手。關于這個問題，天津網(wǎng)站建設認為就如今的形式來說，質感”是提高美觀度的一個秘密武器。在UI設計中加入“質感”，這會讓你的站點更加不同，更加完美?？傊痪湓挘好篮玫氖挛锟偸菚屓诵纳裣蛲?，而如何增加網(wǎng)頁的美觀度，是UI設計師著重考慮的要點。

五、內容

只有內容還源源不夠，內容本身必須要足夠的精彩，靈活運用對比與調和、對稱與平衡及留白等方法，通過空間、文字、圖形之間的相互關系，建立整體均衡狀態(tài)，產生和諧的美感。如：在界面設計中應用對稱原則是，太過均衡有時會使頁面顯得呆板，但若加入一些富有動感的文字、圖形，或采用夸張的手法來表現(xiàn)內容，往往達到意想不到的效果。

六、主體

不同頁面設計針對不同的消費群體和對象，因此需要采用不同的形式，通常情況下，好的網(wǎng)頁把圖形表現(xiàn)手法和有效的布局與通信結合起來。為了做到網(wǎng)頁主題鮮明突出，要點明確，設計者需按照客戶的要求，以簡單明確的畫面來體現(xiàn)出網(wǎng)頁的主題，使用一切方法和技巧充分表現(xiàn)出網(wǎng)頁的個性，從而使網(wǎng)頁主題鮮明，特點突出。

七、細節(jié)

大量事實證明，一個不注重細節(jié)的人往往都是邋遢的，想要成功很難，尤其是UI設計的過程中，不要小瞧一處圖片優(yōu)化的小角，不要小看圖片一點點的不清晰，就像人的穿著一樣，是會給出印象評分的，所以說細節(jié)決定成敗的同時也決定了你的流量高低。

天津學習UI設計到天琥教育，天琥教育秉承著“做負責任的教育，實現(xiàn)學員價值”的辦學宗旨，依靠設計精英、設計總監(jiān)、藝術院校講師等強大師資陣容和研發(fā)實力，培養(yǎng)獵才計劃、UI設計、室內設計、平面設計、網(wǎng)頁電商設計、營銷推廣、影視制作、C4D設計、PS高級合成等精英人才。

三、UI設計標注有哪些規(guī)范?

1.尺寸

我們要將頁面上有所需要告知尺寸的內容進行標注，例如圖標、圖片、頭像等等。關于尺寸維度的標注我們需要注意的是：有圓角的地方，需要將圓角半徑標出。

對于一些控件，如button、列表，一定要隨時問自己有沒有特殊狀態(tài)，如按壓狀態(tài)、無效狀態(tài)、選中狀態(tài)等等，如果你不標明，開會就會默認沒有這些效果。一般情況下，圖片的尺寸是需要告訴比例的，而不是固定的大小，這樣開發(fā)才能更好的適配，常用的圖片比例有4：3、16：9等。

所以正確的標注方法是給出按鈕兩邊的間距，讓整個按鈕的寬度自適應(當然高度還是要固定的),這樣不論遇到哪種分辨率的尺寸，都能夠保持相同的視覺效果，擴展性極強。

2.文字

文字，需要標注文字的大小、字體、顏色、透明度、行高等等，當然也可以和開發(fā)進行溝通，對一些內容進行刪減。關于文字的標注需要注意的事項：文字有一個很特殊的屬性，就在某些場景下，文字是動態(tài)的，所以這個時候，就需要將極限情況考慮清楚。

3.間距

有人可能會覺得間距和尺寸有些相似，但其實它們有著很大的不同，我們可以這樣理解：尺寸是形容容器的大小，而間距是形容容器之間的距離。間距相對比較簡單，只要標注清晰就不會有太大問題。

4.顏色

需要標注顏色的內容有分割線顏色、背景色、按鈕顏色等等。關于顏色的標注需要注意的事項：切記文字的顏色已經(jīng)歸類到文字屬性里面，不用重復標注，思路一定要保持清晰。

以上就是小編關于UI設計中的標注規(guī)范的分享，希望對大家有所幫助，想要了解更多UI設計相關內容，請關注本平臺，小編會做及時的整理并發(fā)布的，大家注意查看哦!

四、UI界面設計規(guī)范有哪些？

一、字體

                iOS的字體：

                                  中文字體：蘋方 / PingFang SC

                                   CSS：Font-Family：PingFang SC

                                   英文、數(shù)字：Helvetial

               Andioid的字體：

                                  中文字體：思源黑體 / Noto Sans Han

                                   英文、數(shù)字：Roboto

二、規(guī)范

            1、  iPhone界面尺寸

2、  iPhone圖標尺寸

3、  iPad的設計尺寸

4、 iPad的圖標尺寸

5、 Andioid的圖標尺寸

6、Andioid的dp/sp/px換算表

三：小結

                    iPhone的主流設計尺寸：750x1334 px

                                                          1242x2208 px

                    Andioid的主流設計尺寸：720x1280 px

                                                           1080x1920 px

以上就是小編對于Ui設計規(guī)范問題和相關問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。

推薦閱讀：

景觀設計和ui設計（景觀設計和ui設計哪個好）

UI是什么職業(yè)（ui是什么職業(yè)類型）

產品設計和ui設計的區(qū)別（產品設計和ui設計的區(qū)別在哪）

河濱公園景觀設計方案（河濱公園景觀設計方案圖）

什么叫內涵段子（什么叫內涵段子）