Ui設(shè)計(jì)規(guī)范（ui設(shè)計(jì)規(guī)范尺寸）

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

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

文章目錄列表:

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

• 2、UI設(shè)計(jì)的三大要素是什么？天津UI設(shè)計(jì)培訓(xùn)

• 3、UI設(shè)計(jì)標(biāo)注有哪些規(guī)范?

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

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

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

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

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

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

一、iOS界面規(guī)范

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

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

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

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

而下邊的底部欄（導(dǎo)航欄）高度則為98px。

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

☆ 關(guān)于圖標(biāo)部分

蘋果的圖標(biāo)極具有美感，完全符合柵格黃金比例，所以看起來十分協(xié)調(diào)。因?yàn)槎际鞘褂玫木W(wǎng)格進(jìn)行規(guī)范化設(shè)計(jì)，所以一整套圖標(biāo)都保持著高統(tǒng)一性。

整個(gè)點(diǎn)擊圖標(biāo)最小不能小于44px，一般大小為58px，圓角為12px,但是我們習(xí)慣取為整數(shù)60px,就會非常的標(biāo)準(zhǔn)。為什么一定有最小的控制呢？因?yàn)槲覀兪种赣幸粋€(gè)觸碰面呀~低于上述的寬度，就可能碰不到。一定要非常注意用戶的使用感受哦。

☆ 關(guān)于分割線部分

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

☆ 關(guān)于板塊與板塊之間

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

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

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

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

☆ 關(guān)于切換按鈕的尺寸

☆ 關(guān)于字體

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

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

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

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

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

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

1、字體

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

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

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

講圖標(biāo)之前先來分析一下一排英文的意思：

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

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

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

安卓各屏幕密度關(guān)系如下：

3、圖標(biāo)

不同手機(jī)品牌的圖標(biāo)的標(biāo)志是不一樣的，對應(yīng)不同大小屏幕的尺寸如下：

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

快捷圖標(biāo)的尺寸：

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

4、應(yīng)用欄的尺寸

從左到右依次是：① 應(yīng)用欄高度：56dp；應(yīng)用欄左右內(nèi)邊距為16dp；應(yīng)用欄圖標(biāo)上下左內(nèi)邊距為16dp；應(yīng)用欄標(biāo)題左內(nèi)邊距為72dp；應(yīng)用欄標(biāo)題下邊距：20dp；

②應(yīng)用欄高度為128dp；

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

5、列表高度

垂直邊框、水平外邊距、邊框左右外邊距各16dp；帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。

垂直邊距

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

垂直邊框、水平外邊距、邊框左右外邊距各16dp；帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。

垂直邊距

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

6、切圖

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

7、界面適配

安卓多屏幕支持的基礎(chǔ)是它能夠管理應(yīng)用程序的布局和位圖可繪制對象的渲染以適當(dāng)?shù)姆绞綄Ξ?dāng)前屏幕配置的能力。該系統(tǒng)處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放位圖可繪制在屏幕密度正確呈現(xiàn)您的應(yīng)用程序在每個(gè)屏幕的配置，來優(yōu)化用戶界面設(shè)計(jì)，帶來更良好的用戶體驗(yàn)。

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

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

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

二、UI設(shè)計(jì)的三大要素是什么？天津UI設(shè)計(jì)培訓(xùn)

UI設(shè)計(jì)包括以下幾個(gè)要素：

想要成為一名及格的設(shè)計(jì)師并不簡單，需要有足夠的耐心和興趣來支持，最好在學(xué)習(xí)之前先來做一個(gè)小測試→點(diǎn)擊測試我適不適合學(xué)設(shè)計(jì)

一、色彩

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

二、速度

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

三、對比度

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

四、美觀

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

五、內(nèi)容

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

六、主體

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

七、細(xì)節(jié)

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

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

三、UI設(shè)計(jì)標(biāo)注有哪些規(guī)范?

1.尺寸

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

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

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

2.文字

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

3.間距

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

4.顏色

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

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

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

一、字體

                iOS的字體：

                                  中文字體：蘋方 / PingFang SC

                                   CSS：Font-Family：PingFang SC

                                   英文、數(shù)字：Helvetial

               Andioid的字體：

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

                                   英文、數(shù)字：Roboto

二、規(guī)范

            1、  iPhone界面尺寸

2、  iPhone圖標(biāo)尺寸

3、  iPad的設(shè)計(jì)尺寸

4、 iPad的圖標(biāo)尺寸

5、 Andioid的圖標(biāo)尺寸

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

三：小結(jié)

                    iPhone的主流設(shè)計(jì)尺寸：750x1334 px

                                                          1242x2208 px

                    Andioid的主流設(shè)計(jì)尺寸：720x1280 px

                                                           1080x1920 px

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

推薦閱讀：

景觀設(shè)計(jì)和ui設(shè)計(jì)（景觀設(shè)計(jì)和ui設(shè)計(jì)哪個(gè)好）

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

產(chǎn)品設(shè)計(jì)和ui設(shè)計(jì)的區(qū)別（產(chǎn)品設(shè)計(jì)和ui設(shè)計(jì)的區(qū)別在哪）

河濱公園景觀設(shè)計(jì)方案（河濱公園景觀設(shè)計(jì)方案圖）

什么叫內(nèi)涵段子（什么叫內(nèi)涵段子）