@-Deeper ：最近一直在研究移動(dòng)端的設(shè)計(jì)，不同于創(chuàng)意稿，側(cè)重于想法，視覺(jué)傳達(dá)，較少考慮開(kāi)發(fā)成本，或者產(chǎn)品需求。要上線的設(shè)計(jì)稿需要嚴(yán)格的視覺(jué)規(guī)范，而非單個(gè)頁(yè)面的展示，是一個(gè)整體、統(tǒng)一、成套的系統(tǒng)。需要考慮也比較多，時(shí)間，人力，質(zhì)量都必須去考慮。所以，決定為新的移動(dòng)端產(chǎn)品做一套視覺(jué)規(guī)范。也有以下有幾個(gè)好處：
- 對(duì)于設(shè)計(jì)或者開(kāi)發(fā)人員更具指導(dǎo)意義
- 保持產(chǎn)品視覺(jué)與交互的統(tǒng)一
- 提高工作效率
…
以下是在寫(xiě)視覺(jué)規(guī)范前一部分對(duì)iPhone幾個(gè)較為典型界面的總結(jié)，一方面是了解蘋(píng)果的一些默認(rèn)數(shù)值，另一方面是對(duì)視覺(jué)規(guī)范有個(gè)大體的參考基礎(chǔ)。
以iPhone5 設(shè)置頁(yè)面為基礎(chǔ)
高度
- 狀態(tài)欄+導(dǎo)航欄 高度 128px，1px分割線，共129px，
- 列表內(nèi)小圖標(biāo)大小 58*58px 圓角為12px
- 板塊與板塊之間的間隔為70px（如果狀態(tài)欄+導(dǎo)航欄有1px分割線的話距離為69px）
- 列表高度為86px
字體
iPhone的系統(tǒng)字體，在設(shè)計(jì)稿中最接近的中文字體為黑體-簡(jiǎn) 英文寫(xiě)作Heiti SC 英文字體為helvetica Regular
- 導(dǎo)航字體 中體 樣式：渾厚 34px
- 列表類字體 細(xì)體 樣式：渾厚 34px
邊距
- 上下不限制
- 左右距離手機(jī)屏幕邊緣 左右各30px
- 列表內(nèi)圖標(biāo)上下左右間距30px
以iPhone5通知中頁(yè)面為例
- 板塊說(shuō)明文字 26px 細(xì)體 渾厚 與板塊距離18px
- 列表類標(biāo)對(duì)一級(jí)標(biāo)題說(shuō)明 24px 細(xì)體 渾厚 與一級(jí)文字距離8px
- 列表高度（包含1px分割線）100px
以iPhone5的APP Store 更新頁(yè)面為例
- 導(dǎo)航上返回/更新的字體：33px 細(xì)體 渾厚（沒(méi)錯(cuò)就是33px —_—|||）；箭頭與屏幕邊框距離為16px
- 控件一級(jí)菜單欄內(nèi)tab切換：580x58px（包括2px描邊） tab里字體：24px 細(xì)體 渾厚
- 搜索框：608x56px；圓角12px；搜索框內(nèi)字體：28px 細(xì)體 渾厚
- 更新列表內(nèi)圖標(biāo)： 128x128px ；圓角：30px
- 列表高度（列表不包括向下1px分割線）：168px，所以icon距離列表20px
- 列表內(nèi)文字：28px 細(xì)體 渾厚；說(shuō)明性文字：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是將一個(gè)像素分為了4個(gè)像素。
也就是說(shuō)按原本的尺寸設(shè)計(jì)適合只需要建立320x480px的畫(huà)布（iPhone 3gs），視網(wǎng)膜屏出現(xiàn)以后就是將寬和高都乘以2倍。640x960px（iPhone 4s）由于圖片從大放小效果不會(huì)受到影響，但從小放大就會(huì)出現(xiàn)質(zhì)量偏差，所以設(shè)計(jì)師們會(huì)以大尺寸為設(shè)計(jì)標(biāo)準(zhǔn)。這樣適配各個(gè)屏幕尺寸比較省時(shí)。
開(kāi)發(fā)者在xcode上開(kāi)發(fā)的屏幕選擇和設(shè)計(jì)師是不一樣的，他們只需要選擇手機(jī)的物理尺寸即可如下圖：
這里有一個(gè)pt的概念，下面是引用《通俗易懂！超全面的移動(dòng)端尺寸基礎(chǔ)知識(shí)科普指南》的一段文字：
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é)了這些，基本能夠理解以后，與開(kāi)發(fā)者合作就比較容易，也能夠很好的進(jìn)行視覺(jué)還原的工作！
【優(yōu)設(shè)四月人氣教程】
超現(xiàn)實(shí)的微型畫(huà)像教程！
《PS新手教程！手把手教你創(chuàng)建一個(gè)超現(xiàn)實(shí)的微型畫(huà)像》
效果美到爆！
《PS高手教程！教你輕松打造效果美到爆的光照效果》
打造細(xì)膩的黑白效果！
《授人以漁教程！如何打造質(zhì)感細(xì)膩豐富的黑白效果？》
原文地址：deeper29
作者：@-Deeper
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
“優(yōu)設(shè)網(wǎng)uisdc.com“是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量94萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的”福利”嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：
|
