東東導(dǎo)讀：常在河邊走哪有不濕鞋的，比喻環(huán)境對(duì)人的影響！做了五年的產(chǎn)品就算不刻意的去學(xué)習(xí)，也多少耳濡目染的了解其它角色的“語(yǔ)言”！

常在河邊走哪有不濕鞋的，比喻環(huán)境對(duì)人的影響！做了五年的產(chǎn)品就算不刻意的去學(xué)習(xí)，也多少耳濡目染的了解其它角色的“語(yǔ)言”！

下面就做下關(guān)于移動(dòng)端設(shè)計(jì)方面的總結(jié)！

iPhone使用字體：

iOS9使用的西文字體由Helvetica Neue變更為San Francisco,

iOS9中文字體由此前的黑體-簡(jiǎn)變更為蘋(píng)方黑體

現(xiàn)在常用的幾種設(shè)計(jì)尺寸

1.640*9604時(shí)代的尺寸，剛接觸APP設(shè)計(jì)用的是這個(gè)尺寸，擬物盛行的時(shí)代(現(xiàn)在用這個(gè)尺寸設(shè)計(jì)的應(yīng)該比較少了吧)；

2.640*11365/5S/5C，IPhone更新，咱們?cè)O(shè)計(jì)也得跟著與時(shí)俱進(jìn)(應(yīng)該還有人用這個(gè)設(shè)計(jì)尺寸)，進(jìn)入扁平的時(shí)代了；

3.750*13346目前我做設(shè)計(jì)稿的設(shè)計(jì)尺寸，IPhone6的尺寸，向下可以適配4，5，向上可以適配6 plus；我記得IP6推出后，我問(wèn)總監(jiān)應(yīng)該用什么尺寸設(shè)計(jì)，他說(shuō)用IP6的吧，好適配，切出來(lái)就是@2x了，改一改上下都能照顧到。

頁(yè)面標(biāo)注（參考）

需要標(biāo)注的內(nèi)容有：

1.文字需要提供：字體大小(px),字體顏色；

2.頂部標(biāo)題欄的背景色值，透明度；

3.標(biāo)題欄下方以及Tab bar上方其實(shí)有一條分割線(xiàn)，需要提供色值；

4.內(nèi)容顯示區(qū)域的背景色(如果是全部頁(yè)面白色，那就和工程師說(shuō)一句就行)；

5.底部Tab bar的背景色值。

因?yàn)轫?yè)面的種類(lèi)成千上萬(wàn)，我想每種頁(yè)面都講一下，但是不現(xiàn)實(shí)，希望可以舉一反三。

下面的是一個(gè)比較普通的首頁(yè)頁(yè)面，但是基本上一款A(yù)PP中應(yīng)該標(biāo)的元素都有了

一般頁(yè)面你需要標(biāo)注這些地方：

所有元素統(tǒng)一距離屏幕最左24px(全局性的數(shù)據(jù)可以直接和工程師溝通，也可以標(biāo)注，推薦標(biāo)注出來(lái))

1.標(biāo)題欄：背景色，標(biāo)題欄文字大小，文字顏色(不再贅述)；

2.Banner：所有撐滿(mǎn)橫屏的大圖，不需要橫向尺寸，把高度標(biāo)出了就可以了;

3.菜單圖標(biāo)：

圖標(biāo)的大小和圖標(biāo)的可點(diǎn)擊區(qū)域不一定一致

也就是說(shuō)，圖標(biāo)可以做的很小，但是為了保證點(diǎn)擊的準(zhǔn)確性和流暢性，工程師可以把可點(diǎn)擊區(qū)域設(shè)置的很大，這樣標(biāo)注和切圖的時(shí)候就要注意，標(biāo)注的是可點(diǎn)擊區(qū)域的大小，切圖切的也是可點(diǎn)擊區(qū)域的大小，也就是用透明區(qū)域去補(bǔ)上，否則圖片會(huì)模糊。

在設(shè)計(jì)的時(shí)候就要考慮可點(diǎn)擊區(qū)域的范圍，比如X寶購(gòu)物車(chē)頁(yè)面左側(cè)的小圈，可點(diǎn)擊區(qū)域要比實(shí)際小圈尺寸大很多。

這種類(lèi)型的圖標(biāo)需要標(biāo)注圖標(biāo)點(diǎn)擊區(qū)域大小，圖標(biāo)距離屏幕最左最右以及上下的距離。至于圖標(biāo)的間距，因?yàn)橛行r(shí)候可能設(shè)計(jì)師不能完全做到1px不差，所以我基本不標(biāo)，交給工程師讓他們?nèi)ヌ幚?，其?shí)等距排列的圖標(biāo)不需要標(biāo)間距，因?yàn)楣こ處熯€要?jiǎng)討B(tài)適應(yīng)不同的屏幕，標(biāo)了間距也是白標(biāo)(還是要和你的搭檔溝通怎么去標(biāo)注）；

4.模塊間隔：這個(gè)位置其實(shí)不是太重要，我習(xí)慣標(biāo)注上這里，麻煩能少則少。

5.圖片+文字：這個(gè)應(yīng)該比較常見(jiàn)，只標(biāo)注一個(gè)單位(圖+文)就可以了。

圖片需要標(biāo)注寬高，因?yàn)楣こ處熞O(shè)置圖片區(qū)域，從后臺(tái)調(diào)取，可以這么說(shuō)，軟件里除了橫屏撐滿(mǎn)的圖，基本上所有的圖片都要標(biāo)注寬高。

圖片距離上下左右的距離，文字大小顏色，這里的文字其實(shí)算兩個(gè)控件，標(biāo)題文字以及說(shuō)明文字，需要單獨(dú)標(biāo)出。

Tab Bar：

這個(gè)位置其實(shí)比較特殊，你可以單獨(dú)標(biāo)注圖標(biāo)大小+文字大??；還可以圖標(biāo)文字算作一個(gè)控件，整個(gè)切出來(lái)；

我們工程師的習(xí)慣是用整個(gè)的，也就是圖標(biāo)+文字算作一個(gè)ICON，所以我基本不怎么標(biāo)注單獨(dú)的圖標(biāo)(這里可以和你的搭檔去溝通一下，看他是什么開(kāi)發(fā)習(xí)慣)。

圖標(biāo)該切幾套？

舉個(gè)例子

ico_car.pngIPhone2G，3G，3GS使用(好像沒(méi)人用這手機(jī)了吧)

ico_car@2x.pngIPhone4，5，6優(yōu)先加載此尺寸圖片(不是必須使用這個(gè)尺寸，是優(yōu)先加載調(diào)用這個(gè)尺寸)

ico_car@3x.pngIPhone6 plus使用的尺寸

圖標(biāo)觸擊區(qū)域：

IOS人機(jī)指導(dǎo)手冊(cè)里推薦的最小可點(diǎn)擊元素的尺寸是44*44 point(點(diǎn))，在設(shè)備上1 point等于1像素，所以轉(zhuǎn)換成像素就是44*44像素，換算成物理尺寸大概是7mm左右吧（人機(jī)工效學(xué)研究中得出的結(jié)論：用食指操作，觸擊范圍在7mm左右合適；用拇指操作，范圍在9mm左右合適)。據(jù)說(shuō)這個(gè)尺寸下，不容易出現(xiàn)誤操作，誤點(diǎn)擊；小于這個(gè)尺寸，點(diǎn)擊就會(huì)變的有些不太準(zhǔn)確，一向注重用戶(hù)體驗(yàn)的蘋(píng)果公司定義這個(gè)最小點(diǎn)擊尺寸也不是沒(méi)根據(jù)的……

圖片圖標(biāo)的不同狀態(tài)：

每種圖標(biāo)或者圖片如果有不同狀態(tài)，每一種不同的狀態(tài)都需要進(jìn)行切片輸出。

文件命名規(guī)范：

字體使用：

關(guān)于字體大小的問(wèn)題

頂部操作欄文字大小34-38px

標(biāo)題文字大小28-34px

正文文字大小26-30px

輔助性文字大小20-24px

Tab bar文字大小20px

多了解一些，便于溝通！

原文標(biāo)題：Mr_二狗[自修+總結(jié)雜記](méi)移動(dòng)端設(shè)計(jì)

本文作者：Mr_二狗；來(lái)源：簡(jiǎn)書(shū)