【設(shè)計(jì)規(guī)范】IOS平臺(tái)設(shè)計(jì)規(guī)范
時(shí)間：2023-06-05 16:54:02 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-06-05 16:54:02 來源：網(wǎng)站運(yùn)營(yíng)
【設(shè)計(jì)規(guī)范】IOS平臺(tái)設(shè)計(jì)規(guī)范：
今天正式進(jìn)入到UI知識(shí)體系的第二個(gè)系列：設(shè)計(jì)規(guī)范。了解各大平臺(tái)的設(shè)計(jì)規(guī)范是每個(gè)UI設(shè)計(jì)師必經(jīng)的過程。不管是剛?cè)胄械脑O(shè)計(jì)師，還是入行2、3年的設(shè)計(jì)師，如果說這些基本的知識(shí)都不清楚的話，就會(huì)顯得自己不夠?qū)I(yè)。今天說所要講的是IOS平臺(tái)的設(shè)計(jì)規(guī)范，那么它的規(guī)范到底有哪些呢？
一、為什么要了解設(shè)計(jì)規(guī)范？
有人說，我們是設(shè)計(jì)師啊，遵從那么多設(shè)計(jì)規(guī)范，不是限制我們的設(shè)計(jì)么？UI設(shè)計(jì)不是藝術(shù)設(shè)計(jì)，我們需要基于設(shè)備和現(xiàn)有技術(shù)去設(shè)計(jì)。如果你設(shè)計(jì)的再漂亮，再天馬行空，可是技術(shù)實(shí)現(xiàn)不了，那你的設(shè)計(jì)只能是“漂亮的小媳婦而已”，只能自己在家欣賞，帶出去的話就太丟人了。了解設(shè)計(jì)規(guī)范也能在設(shè)計(jì)前期就能避免一些不必要的錯(cuò)誤，極大提高我們的工作率。
二、UI設(shè)計(jì)師需要了解哪些規(guī)范？
在工作中發(fā)現(xiàn)設(shè)計(jì)師在IOS端設(shè)計(jì)中常遇到的規(guī)范問題來自五個(gè)方面：
尺寸、字體、圖標(biāo)、按鈕、命名。01、尺寸：iPhone常見設(shè)備尺寸目前市場(chǎng)上的IOS設(shè)備的尺寸基本上是以下幾種:
5/5C/5S：320x480pt 640X1136px
6/6S/7/7S：375x664pt 640X1136px
6 Plus / 6S Plus / 7 Plus / 7S Plus：414x736pt 1242X2208px
X：375x812pt 1125X2436px
iPhone X是我們?cè)O(shè)計(jì)時(shí)需要關(guān)注的焦點(diǎn)，它首次使用了OLED屏幕，分辨率達(dá)到1125×2436px @3x，PPI達(dá)到了458ppi。上面狀態(tài)欄88px，下面的home觸發(fā)區(qū)域?yàn)?8Px，所以IphoneX的設(shè)計(jì)安全區(qū)域?yàn)?280px。
尺寸：用哪種尺寸適配UI設(shè)計(jì)師在設(shè)計(jì)IOS端應(yīng)用的時(shí)候只需要出一套設(shè)計(jì)稿，所有的設(shè)計(jì)稿尺寸以
750×1334 px來做設(shè)計(jì)稿尺寸。因?yàn)檫@個(gè)尺寸從中間尺寸向上和向下適配的時(shí)候界面調(diào)整的幅度最小，最方便適配。如果你是使用Sketch的話，用1倍圖（375X667pt）來做設(shè)計(jì)；如果你是使用ps的話，以750X1334px來做設(shè)計(jì)。
02、字體：字體和字體大小規(guī)范字體IOS9：中文字體為冬青黑體，英文字體為Helvetica Neue
IOS10、IOS11：中文字體為蘋方(Ping Fang SC Light)，英文字體為San Francisco
我們盡量是選擇高版本的字體去做設(shè)計(jì)，目前悠閑使用IOS11版本的系統(tǒng)字體
大小規(guī)范導(dǎo)航欄標(biāo)題： 32-36PX
標(biāo)題文字： 30-32px
內(nèi)容區(qū)域文字：24-28px
輔助性文字： 20-24px
這只是一個(gè)常見的字體大小規(guī)范，前人經(jīng)驗(yàn)所得，我們還是需要根據(jù)實(shí)際情況來制定規(guī)范
03、圖標(biāo)：圖標(biāo)的設(shè)計(jì)規(guī)范圖標(biāo)的設(shè)計(jì)大?。?/b>我們?cè)O(shè)計(jì)圖標(biāo)的時(shí)候統(tǒng)一在1024X1024的畫板中進(jìn)行制作，當(dāng)使用的時(shí)候等比縮放。
視覺統(tǒng)一：正方形、矩形、圓形、長(zhǎng)方形這幾種情況下的圖標(biāo)需要進(jìn)行一些調(diào)整才能達(dá)到視覺的平衡，具體情況參照上方的圖片示例。
常見的使用尺寸：系統(tǒng)圖標(biāo)常見的使用尺寸為（12px、14px、16px、18px、24px、32px） 業(yè)務(wù)圖標(biāo)常見的使用尺寸為（32px、48px、64px）
系統(tǒng)圖標(biāo)通常用來表示常用的操作，比如：刪除、保存、編輯。也可以用來表示一個(gè)文件或者狀態(tài)。
業(yè)務(wù)圖標(biāo)不同于系統(tǒng)圖標(biāo)，本身不帶有功能性的操作，而是輔助配合文案的一個(gè)抽象化圖形。相較于系統(tǒng)圖標(biāo)，業(yè)務(wù)圖標(biāo)在設(shè)計(jì)的細(xì)節(jié)上更為豐富，使用的尺寸也比較大。
（來自https://ant.design/docs/spec/icon-cn）
04、按鈕：按鈕的狀態(tài)及樣式
小凡發(fā)現(xiàn)很多設(shè)計(jì)師在做手機(jī)端設(shè)計(jì)稿的時(shí)候很多都會(huì)遺漏掉按鈕不同狀態(tài)的設(shè)計(jì)，還有的設(shè)計(jì)師問我，IOS端的按鈕有幾種狀態(tài)。
05、命名：UI設(shè)計(jì)命名規(guī)范
關(guān)于UI命名規(guī)范，這是最基本的，但卻也是非常重要的。規(guī)范的命名可以幫助我們高效的和同事、開發(fā)對(duì)接，提升工作的效率。對(duì)于自己來說，可以幫助后期文件方便的修改、查找、整理；對(duì)于團(tuán)隊(duì)來說，可以加快項(xiàng)目的協(xié)同，提升整體的工作效率；對(duì)于開發(fā)來說，可以節(jié)省大量的時(shí)間成本，加快溝通的效率。
命名規(guī)則：
模塊_類別_功能_狀態(tài).png
例如：home_button_search_default.png
釋義為：主頁_按鈕_搜索_默認(rèn).png
這是我工作中的命名規(guī)則，你也可以更具項(xiàng)目的實(shí)際情況制定其他合適的命名規(guī)則
總結(jié)：
IOS平臺(tái)設(shè)計(jì)規(guī)范：尺寸、字體、圖標(biāo)、按鈕、命名
文章到此就已經(jīng)結(jié)束了，感謝大家的閱讀，如果對(duì)于IOS平臺(tái)規(guī)范還有什么疑問和建議的話，請(qǐng)?jiān)谙路搅粞浴Ｒ矚g迎大家關(guān)注“UI云課堂 ”，獲取PPT教程，接下來小凡會(huì)為大家?guī)砀郩I知識(shí)體系系列的文章內(nèi)容。
關(guān)鍵詞：設(shè)計(jì),規(guī)范,平臺(tái)
在線咨詢