移動端（蘋果）視覺設計規範ios篇

移動端（蘋果）視覺設計規範ios篇

來自專欄好的UI設計與產品經理

移動端視覺設計規範ios

基本概念了解

1、屏幕尺寸/手機尺寸計算方法

2、分辨度？

3、屏幕密度

4、單位認識：px/dp/sp

界面設計尺寸（適配）

標註尺寸

字體（中英文默認字體）

桌面iocn尺寸（不同界面)

各尺寸界面狀態欄/導航欄/底欄高度

文件命名和後綴

尺寸換算

點9介紹

和開發合作會出現的問題

這裡邊的內容講一部分，只講ios部分，Android部分有機會再分享，如果兩個規範放在一起講，可能會有很多不明白的地方，有點暈，所以今天只完成ios篇

首先看下ios規範界面，如下圖，ios5

6之前的界面設計基本上都屬於擬物化的圖標設計，發現沒，ios5的，那現在是ios11，從ios6起，所有的界面，圖標都是扁平化為主的，因為扁平化圖標它最大的特點就是

我們只關注它的功能，它是什麼就是什麼，我點開就去使用，我不會在，當我打開一個界面的時候，我覺得這個圖標很漂亮，很吸引人，我就忘記我要幹什麼了或是耽誤了做事情的時間，基本不太現實 所以這是現在的特點

首先說一下基本概念的了解

1、屏幕尺寸，我們所了解的屏幕尺寸並不是整個機器實際的外輪廓的大小，而是能夠顯示內容區域的對角線，明白沒，是它的內屏顯示，對角線大小，現在ios有4.7的、5.5的尺寸

想一下，蘋果公司能不能出再大屏幕的手機？

可以，沒問題

因為現在屏幕技術都是一樣的，只不過是大小而已，那為什麼在設計的時候，蘋果公司沒有設計一款特別大的手機效果呢？

跟大家說一下，最大的問題在於， 如果是咱們普通的手機，我們可以單手操控，現在看下自己的手機，不論是左手還是右手操控，其實你一個手可以控制整個屏幕的絕大部分面積，假設這個屏幕再大，就變成了雙手操控

所以我們在設計時，要考慮到用戶單手操控的範圍，不要用雙手，你可以想像一下，我單手操控的時候，我一隻手玩手機，一隻手可以做其他的事情，你坐地鐵或者公交時是不是要把著扶手呀，那你另外一隻手也可以操控，如果是平板呢?

那你只能是挎著欄杆來操作，所以一定要注意手機是單手操控的，平板是雙手操控的；

屏幕尺寸在5.5左右的，基本上已經是一個偏上限的尺寸了，並不是說技術能力不到，而是手沒有那麼大，沒辦法來控制。 手小不建議用plus

尺寸及解析度

首先看一下，iphone最早期的一個屏幕尺寸，320*480，單位是像素（px）

再往右看，慢慢的往上升，640*960， 是原尺寸的2倍 ，所以我們把最原始的320*480叫一倍圖，後邊的640*960、640*1136、以及750*1334這三個尺寸都歸類為2倍圖，明白沒，最後的這個尺寸1080*1920它可以是第一個尺寸的三倍左右

所以ios手機系統，我們在設計時只做三大系統就可以

一倍的、二倍的、三倍的

750*1334（px）是什麼樣的手機屏幕呢？

6、7、8它正常4.7尺寸的，那1080*1920（px）就是所有5.5 plus的尺寸，320*480（px）呢？

現在市面上這種一倍圖手機尺寸的基本沒有了，可以說是真的沒有了，因為它尺寸是在太小了，大家想一下，硬體能跟得上嗎？肯定跟不上，所以它沒辦法在市面上存活。

現在最小的存儲空間（ios)都是32GB，蘋果7出現16GB的就沒有了，最小是32GB，所以大家發現，為什麼有這麼大屏幕尺寸

第一 系統佔用的空間比較大

第二 現在市面上能幫助我們生活的APP也越來越多，你下載安裝肯定需要一定的存儲空間，所以這就導致了以前16G的或者8G的已經在這市面上消失掉了。未來在慢慢的發展，32G也可能會被剔除，就像16G淘汰的狀態一樣

ipad界面尺寸

1024*768 2048*1536

這裡邊，剛才所強調的尺寸是整個的屏幕設計尺寸，但是我們在設計的過程當中，解析度它永遠都是72像素/英寸，單位只有72像素/英寸，沒有72像素/厘米

雖然說，現在ios手機系統相對比較規範，一倍圖、二倍圖、三倍圖

思考時間：為什麼會有一倍圖、二倍圖、三倍圖的區分，怎麼去理解的。

剛才也說了ios很規範，有三個尺寸，那我們在設計時，到底用哪個尺寸呢？

用750*1334尺寸，二倍圖尺寸來做，有什麼好處呢？

---

向上兼容、向下兼容比較方便， 想一下

以前在PS里放圖片的時候或者是插素材時，都一定要把這個素材最大化，那麼它最大了最後，往下縮小清晰可見，但是從一個小圖往大圖放，就會虛化，那為什麼還要這麼做呢？

和大家強調一點，這個750*1334的二倍圖除了在ios機器上向上向下兼容比較方便之外，還有另外一個好處就是與Android手機適配也比較容易，因為Android手機里有個尺寸界面，720*1280（px）

這兩者之間的尺寸差別不大，所以也是用於這個目的，簡單說，就是適配兼容

OK 接下來說下界面的組成元素

界面當中第一個所說的就是狀態欄，ios與Android狀態欄是一樣的，裡面涵蓋的裡面極為相似，

信號、運營商（中國移動、中國聯通、中國電信、鐵通現在沒有了) 中間的是時間， 右側則是電量、藍牙、鎖定屏幕、定位、時鐘等一系列的輔助功能。

記住這個單詞：Status Bar ，它的高度是40px，寬度呢？ 那自然是750px啦

問題來了 狀態欄什麼顏色的？

白色？黑色？灰色？

都不是

跟大家說下，狀態欄沒顏色，它是透明的，它會以你APP導航欄的顏色為主，有一些電商軟體是以BANNER圖的效果為主。重點：狀態欄無色

接著往下繼續：導航欄

以微信為例，大家每天都會用的東西，微信的導航欄就在狀態欄之下，最左邊有微信兩個字，右側則是搜索與「+」核心功能展示點，發起群聊、添加好友、掃一掃然後才是收付款、幫助與反饋。

提一點要求，在打開你常用的APP時，除了玩之外，一定要看清楚它裡邊的設計，深層次的去想，為什麼把這個功能放在最這個部位，你要去引導自己怎麼去想這個問題，這也是做APP項目時，做更大的一個引導。

導航欄一般是顯示當前界面的名稱，包含相應的功能或者頁面的跳轉按鈕

當你打開微信進入的時候，它的左側只有微信兩個字，沒有返回，因為它只是當前首頁，當我打開一個小夥伴的聊天內容，左側就會出現返回鍵，通過「返回」到上一層級去操作，

它的高度的88(px）按鈕大小它是44*44的一個區域，在這裡面強調一點，仔細看下圖

44*44的大小，有沒有感覺有這麼大

高度可以有44，寬度有44嗎？ 仔細看下圖左側返回的按鈕圖標，並沒有44，和大家說明

有一些按鈕它是在某個寬度和某個高度能夠滿足我們的操

但是由於它面積太小之後，我們手指的指度觸發不了， 強調一點

Web端跟移動端有一個本質上的區別

第一個在於交互方式不同，網站交互方式藉助的是滑鼠工具，那滑鼠可以精確到多少?

滑鼠可以精確到1像素

移動端呢？我們的工具就是手指

記得在讀初中時，買了個幾百塊的觸屏手機，是用手指甲去點的，到後來朋友買了個智能手機，我搶來玩玩，我以為還是用指甲，結果點啊點，點半天也沒點開，後來才知道用的是指度...

所以大家會發現指度會有一定的範圍，它的面積範圍最少是44*44這樣的一個觸控區，按照我們講Axure的方式它叫做熱區，明白沒, 圖標可以比熱區小，但是它的熱區一定要達到44*44以上的這個面積才能夠被用戶所觸發。

再次強調，因為移動端是用手指來產生交互效果的，手指指度是有一定面積，為了保證用戶能夠觸發，圖標設計的時候可以小一點，但是熱區必須保證44px以上的尺寸

現在屏幕越來越大了，但是為什麼一直還沿用早期的這種44px的傳統呢？

大概是因為有些老的程序員、設計師以及習以為常，成了一個約定俗成的習慣，所以就沒再去改變了。

再來看，微信的那個字體有多大呢？ 34、36、38還可以再大... 也有比這個更小的，

那為什麼還寫34px幹嘛呢？

跟大家說下，它是不是像我們平常去買零食的時候後面有一個正負值，對吧 買的零食後面肯定會告訴你這個正負多少，這都屬於正常的行為；所以看標題大小時，它只是一個範圍值，移動端的設計沒有網頁那麼絕對的規範，它好多效果還是可以以人為本的

好的，接下來再看頂部標籤欄

什麼叫頂部標籤欄呢？

舉例說明：支付寶在狀態欄下面有個掃一掃，還有收錢選項， 這個地方我們可以稱之為頂部標籤欄，但是這個有點不太算，頂部標籤欄高度也可以為88像素，文字大小可以定義成26px，

註：頂部標籤欄不是所有APP都有，88PX也不是一個絕對的值，支付寶那個就比較大

OK，繼續看底部標籤欄，它的作用是什麼呢？

想一下微信底部的標籤欄都是啥呢？

第一項 信息 所有好友、群聊、訂閱號信息 列表狀態

第二項 通訊錄 所有好友列表

第三項 發現

跟大家講一下，賺錢的不在前兩項，在第三項，在發現里有朋友圈，曬朋友圈的目的是什麼？ 增加一股黏性，以及好友之前的互動，除這些之外，

還有 搖一搖，微信剛出來時，搖一搖是特別火的，基本上天天要搖個幾次才甘心，而且現在的搖一搖多了兩項功能，原來好像只能搖附近的人，現在可以識別歌曲、電視，還有遊戲，騰訊的大部分核心在遊戲上，它可以嵌入很多的遊戲內容，達到變現，

第四項 我 這裡面包含了各種設置，密碼、賬號安全等，其中有一個最大的功能，安卓手機用這個是最好的，那就是清除緩存，安卓手機的特點就是越用越卡，這是大家都能看到的問題

所以強調一點，底部標籤它是一個菜單，我們在點擊不同標籤時，就可以進入不同的頁面之間的跳轉，而且是一個功能點的集合，它的整個高度是98px，然後圖標有兩類，像微信APP當中它不僅有圖標還有文字，但是，在有些APP里它是沒有漢字的，全都是圖標，可不可以呢？

肯定是可以的，但是要考慮一點 就是你的圖標辨識度要特別高

它的大小是50*50，這個文字可有可無，建議18px 記住，在移動端里最小給20，上圖是早期做的參考數值，現在應該是20的大小了，如果你在設計時，它的面積佔用太大了，可以考慮把文字去掉。

OK 總結一下： 一共有 狀態欄40px、導航欄88px、底部標籤欄98px，除了這三個，其他多大都已，它沒有絕對值的規範。

講到這裡，有興趣的小夥伴可以打開PS試著做一下

Ctrl+N 新建，直接選擇移動設備，選擇已有的iphone6模板就行

選擇移動工具里的畫板，會有四個加號出來，可以任意的添加畫板，有一些電商APP，如：天貓、京東，它們的首頁很長，你在設計的時候一樣也可以把頁面拉長

建立參考線，可編輯範圍

下篇再分享ios控制項以及字體規範，會有用戶界面素材，打開直接複製粘貼即可編輯

大家知道還有哪些沒有標籤欄的軟體呢？ 歡迎在評論區留言

推薦閱讀：