UI設計師必收！同行總結可即刻上手的iOS規範參考

土豆網同步更新：http://www.tudou.com/plcover/VHNh6ZopQ4E/

 

使用HTML 建立Mac OS App 視頻教程。

官方QQ羣:

(1)App實踐出真知 434558944

(2)App學習交流 452180823

 

百度網盤同步：http://pan.baidu.com/s/1jG1Q58M

分享  [中文紀錄片]互聯網時代                 http://pan.baidu.com/s/1qWkJfcS

簡直了，必須推薦給大家看看！HTML開發Mac OS App 視頻教程 （分享自 @土豆 ） O網頁連接

 

@-Deeper：最近一直在研究移動端的設計，不一樣於創意稿，側重於想法，視覺傳達，較少考慮開發成本，或者產品需求。要上線的設計稿須要嚴格的視覺規範，而非單個頁面的展現，是一個總體、統1、成套的系統。須要考慮也比較多，時間，人力，質量都必須去考慮。因此，決定爲新的移動端產品作一套視覺規範。也有如下有幾個好處：

1. 對於設計或者開發人員更具指導意義

2. 保持產品視覺與交互的統一

3. 提升工做效率 
   …

如下是在寫視覺規範前一部分對iPhone幾個較爲典型界面的總結，一方面是瞭解蘋果的一些默認數值，另外一方面是對視覺規範有個大致的參考基礎。

以iPhone5 設置頁面爲基礎

高度

1. 狀態欄+導航欄 高度 128px，1px分割線，共129px，

2. 列表內小圖標大小 58*58px 圓角爲12px

3. 板塊與板塊之間的間隔爲70px（若是狀態欄+導航欄有1px分割線的話距離爲69px）

4. 列表高度爲86px

字體

iPhone的系統字體，在設計稿中最接近的中文字體爲黑體-簡 英文寫做Heiti SC 英文字體爲helvetica Regula r

1. 導航字體 中體 樣式：渾厚 34px

2. 列表類字體 細體 樣式：渾厚 34px

邊距

1. 上下不限制

2. 左右距離手機屏幕邊緣 左右各30px

3. 列表內圖標上下左右間距30px

以iPhone5通知中頁面爲例

1. 板塊說明文字 26px 細體 渾厚 與板塊距離18px

2. 列表類標對一級標題說明 24px 細體 渾厚 與一級文字距離8px

3. 列表高度（包含1px分割線）100px

以iPhone5的APP Store 更新頁面爲例

1. 導航上返回/更新的字體：33px 細體 渾厚（沒錯就是33px —_—|||）；箭頭與屏幕邊框距離爲16px

2. 控件一級菜單欄內tab切換：580x58px（包括2px描邊） tab裏字體：24px 細體 渾厚

3. 搜索框：608x56px；圓角12px；搜索框內字體：28px 細體 渾厚

4. 更新列表內圖標： 128x128px ；圓角：30px

5. 列表高度（列表不包括向下1px分割線）：168px，因此icon距離列表20px

6. 列表內文字：28px 細體 渾厚；說明性文字：24px 細體 渾厚

7. 列表內部按鈕大小92x52px ，包含2px描邊，字體大小28px 細體 渾厚

8. tabbar下部菜單：高度 98px（包含頂部1px分割線）；字體20px 細體 渾厚

9. 更新通知紅點大小： 36x36px 紅點內數字 helvetica Regular 24px

屏幕像素尺寸與物理尺寸

pixels per inch 每英寸上像素點數量，iPhone3gs和iPhone4s屏幕大小同爲3.5英寸。可是iPhone4s是將一個像素分爲了4個像素。

也就是說按本來的尺寸設計適合只須要創建320x480px的畫布（iPhone 3gs），視網膜屏出現之後就是將寬和高都乘以2倍。640x960px（iPhone 4s）因爲圖片從大放小效果不會受到影響，但從小放大就會出現質量誤差，因此設計師們會以大尺寸爲設計標準。這樣適配各個屏幕尺寸比較省時。

開發者在xcode上開發的屏幕選擇和設計師是不同的，他們只須要選擇手機的物理尺寸便可以下圖：

這裏有一個pt的概念，下面是引用 《通俗易懂！超全面的移動端尺寸基礎知識科普指南》 的一段文字：

 

1倍：1pt=1dp=1px（mdpi、iPhone 3gs）

1.5倍：1pt=1dp=1.5px（hdpi）

2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）

3倍：1pt=1dp=3px（xxhdpi、iPhone 6）

4倍：1pt=1dp=4px（xxxhdpi）

目前就總結了這些，基本可以理解之後，與開發者合做就比較容易，也可以很好的進行視覺還原的工做！