最近一直在研究移動端的設(shè)計(jì)，不同于創(chuàng)意稿，側(cè)重于想法，視覺傳達(dá)，較少考慮開發(fā)成本，或者產(chǎn)品需求。要上線的設(shè)計(jì)稿需要嚴(yán)格的視覺規(guī)范，而非單個頁面的展示，是一個整體、統(tǒng)一、成套的系統(tǒng)。需要考慮也比較多，時間，人力，質(zhì)量都必須去考慮。

所以，決定為新的移動端產(chǎn)品做一套視覺規(guī)范。也有以下有幾個好處：

1.對于設(shè)計(jì)或者開發(fā)人員更具指導(dǎo)意義

2.保持產(chǎn)品視覺與交互的統(tǒng)一

3.提高工作效率

…

以下是在寫視覺規(guī)范前一部分對iphone幾個較為典型界面的總結(jié)，一方面是了解蘋果的一些默認(rèn)數(shù)值，另一方面是對視覺規(guī)范有個大體的參考基礎(chǔ)

以iphone5 設(shè)置頁面為基礎(chǔ)

高度

1.狀態(tài)欄+導(dǎo)航欄 高度 128px，1px分割線，共129px，

2.列表內(nèi)小圖標(biāo)大小 58*58px 圓角為12px

3.板塊與板塊之間的間隔為70px（如果狀態(tài)欄+導(dǎo)航欄有1px分割線的話距離為69px）

4.列表高度為86px

字體

iPhone的系統(tǒng)字體，在設(shè)計(jì)稿中最接近的中文字體為黑體-簡 英文寫作Heiti SC 英文字體為helvetica Regular

1.導(dǎo)航字體 中體 樣式：渾厚 34px

2.列表類字體 細(xì)體 樣式：渾厚 34px

邊距

1.上下不限制

2.左右距離手機(jī)屏幕邊緣 左右各30px

3.列表內(nèi)圖標(biāo)上下左右間距30px

以iPhone5通知中頁面為例

板塊說明文字 26px 細(xì)體 渾厚 與板塊距離18px

列表類標(biāo)對一級標(biāo)題說明 24px 細(xì)體 渾厚 與一級文字距離8px

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

以iphone5的APP Store 更新頁面為例

導(dǎo)航上返回/更新的字體 33px 細(xì)體 渾厚 （沒錯就是33px —_—|||） 箭頭與屏幕邊框距離為16px

控件一級菜單欄內(nèi)tab切換 580x58px（包括2px描邊） tab里字體 24px 細(xì)體 渾厚

搜索框 608x56px 圓角12px 搜索框內(nèi)字體size 28px 細(xì)體 渾厚

更新列表內(nèi)icon size 128x128px 圓角30px

列表高度（列表不包括向下1px分割線） 168px 所以icon距離列表20px

列表內(nèi)文字 28px 細(xì)體 渾厚 說明性文字24px 細(xì)體 渾厚

列表內(nèi)部按鈕大小 92x52px 包含2px描邊 字體大小 28px 細(xì)體 渾厚

tabbar下部菜單 高度 98px（包含頂部1px分割線）字體20px 細(xì)體 渾厚

更新通知紅點(diǎn)大小 36x36px 紅點(diǎn)內(nèi)數(shù)字 helvetica Regular 24px

屏幕像素尺寸與物理尺寸

pixels per inch 每英寸上像素點(diǎn)數(shù)量，iphone3gs和iphone4s屏幕大小同為3.5英寸。但是iphone4s是將一個像素分為了4個像素。

也就是說按原本的尺寸設(shè)計(jì)適合只需要建立320x480px的畫布（iphone 3gs），視網(wǎng)膜屏出現(xiàn)以后就是將寬和高都乘以2倍。640x960px（iphone 4s）由于圖片從大放小效果不會受到影響，但從小放大就會出現(xiàn)質(zhì)量偏差，所以設(shè)計(jì)師們會以大尺寸為設(shè)計(jì)標(biāo)準(zhǔn)。這樣適配各個屏幕尺寸比較省時。

開發(fā)者在xcode上開發(fā)的屏幕選擇和設(shè)計(jì)師是不一樣的，他們只需要選擇手機(jī)的物理尺寸即可如下圖：

這里有一個pt的概念，下面是引用 優(yōu)設(shè)網(wǎng) 的一段文字

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）

目前就總結(jié)了這些，基本能夠理解以后，與開發(fā)者合作就比較容易，也能夠很好的進(jìn)行視覺還原的工作！

當(dāng)前標(biāo)題：iOS規(guī)范參考
瀏覽路徑：http://m.2m8n56k.cn/news18/51118.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、標(biāo)簽優(yōu)化、企業(yè)建站、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)