做ui設(shè)計(jì)并不只是將自己的想法實(shí)現(xiàn)這么簡單，我們?cè)谠O(shè)計(jì)時(shí)，還需要遵循各種設(shè)計(jì)規(guī)范，那么為什么UI設(shè)計(jì)規(guī)范很重要？iosui設(shè)計(jì)界面尺寸如何規(guī)范呢？一起跟faceui來了解一下吧。

　　UI設(shè)計(jì)

　　UI設(shè)計(jì)（或稱界面設(shè)計(jì)）是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)常用的UI設(shè)計(jì)是虛擬UI，UI即User Interface(用戶界面)的簡稱。

　　好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

ui設(shè)計(jì)界面尺寸如何規(guī)范（圖片來自網(wǎng)絡(luò)）

　　為什么UI設(shè)計(jì)規(guī)范很重要

　　保證平臺(tái)統(tǒng)一性

　　統(tǒng)一性是交互設(shè)計(jì)的一個(gè)基本原則，在一個(gè)長期迭代多人合作的項(xiàng)目中，不同的設(shè)計(jì)師會(huì)負(fù)責(zé)不同的模塊，每個(gè)人都有各自的思路，就有可能會(huì)對(duì)相同的元素做出了不同的方案，對(duì)于用戶來說容易造成困惑，對(duì)品牌整體形象的建設(shè)也沒有好處。所以對(duì)于較大型的產(chǎn)品，最好有設(shè)計(jì)規(guī)范來定義基本的元素，幫助眾多設(shè)計(jì)師一起做出有統(tǒng)一性的產(chǎn)品。

　　提升團(tuán)隊(duì)工作效率

　　對(duì)于同一個(gè)基本元素，如果沒有設(shè)計(jì)規(guī)范，交互設(shè)計(jì)師需要設(shè)計(jì)一次交互方式，視覺設(shè)計(jì)師需要設(shè)計(jì)一次外形，UI開發(fā)同學(xué)需要開發(fā)一次，每個(gè)不同的設(shè)計(jì)師遇到這個(gè)元素時(shí)都可能重新設(shè)計(jì)一遍。但如果有了設(shè)計(jì)規(guī)范，只需設(shè)計(jì)一次，團(tuán)隊(duì)中任何一個(gè)設(shè)計(jì)師需要用的時(shí)候直接拿來用就可以了，也不需要再進(jìn)行視覺和開發(fā)，極大的提升了效率。

　　打磨細(xì)節(jié)體驗(yàn)

　　在整理每個(gè)元素的規(guī)范時(shí)，設(shè)計(jì)師都需要對(duì)其場景、狀態(tài)考慮清楚。在整理的過程中，經(jīng)常會(huì)發(fā)現(xiàn)一些以前沒注意到的問題，并進(jìn)行優(yōu)化。把一個(gè)小元素單獨(dú)拎出來仔細(xì)考量，寫成一篇完整規(guī)范的過程，其實(shí)就是在打磨細(xì)節(jié)的過程。

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

　　目前主流的 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è)計(jì)師提供給開發(fā)人員的切片大小，前者始終是后者的1.5倍，并分別以@3x和@2x在文件名結(jié)尾命名，程序再根據(jù)不同分辨率自動(dòng)加載@3x或者@2x的切片。

ui設(shè)計(jì)界面尺寸如何規(guī)范（圖片來自網(wǎng)絡(luò)）

ui設(shè)計(jì)界面尺寸如何規(guī)范（圖片來自網(wǎng)絡(luò)）

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

ui設(shè)計(jì)界面尺寸如何規(guī)范

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

ui設(shè)計(jì)界面尺寸如何規(guī)范（圖片來自網(wǎng)絡(luò)）

ui設(shè)計(jì)界面尺寸如何規(guī)范（圖片來自網(wǎng)絡(luò)）

ui設(shè)計(jì)界面尺寸如何規(guī)范（圖片來自網(wǎng)絡(luò)）

　　關(guān)于iosui設(shè)計(jì)界面尺寸如何規(guī)范的問題就為大家介紹這么多，這些也只是一些經(jīng)驗(yàn)之談，更多的還是需要我們實(shí)際體驗(yàn)操作才能不斷進(jìn)步。想要了解更多相關(guān)內(nèi)容，也可長期關(guān)注faceui。