移動端設計總結

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

下面就做下關于移動端設計方面的總結！

iPhone使用字體：

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

iOS9中文字體由此前的黑體-簡變更為蘋方黑體

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

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

2.640*11365/5S/5C，IPhone更新，咱們設計也得跟著與時俱進(應該還有人用這個設計尺寸)，進入扁平的時代了；

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

頁面標注（參考）

需要標注的內容有：

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

2.頂部標題欄的背景色值，透明度；

3.標題欄下方以及Tab bar上方其實有一條分割線，需要提供色值；

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

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

因為頁面的種類成千上萬，我想每種頁面都講一下，但是不現(xiàn)實，希望可以舉一反三。

下面的是一個比較普通的首頁頁面，但是基本上一款APP中應該標的元素都有了

一般頁面你需要標注這些地方：

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

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

2.Banner：所有撐滿橫屏的大圖，不需要橫向尺寸，把高度標出了就可以了;

3.菜單圖標：

圖標的大小和圖標的可點擊區(qū)域不一定一致

也就是說，圖標可以做的很小，但是為了保證點擊的準確性和流暢性，工程師可以把可點擊區(qū)域設置的很大，這樣標注和切圖的時候就要注意，標注的是可點擊區(qū)域的大小，切圖切的也是可點擊區(qū)域的大小，也就是用透明區(qū)域去補上，否則圖片會模糊。

在設計的時候就要考慮可點擊區(qū)域的范圍，比如X寶購物車頁面左側的小圈，可點擊區(qū)域要比實際小圈尺寸大很多。

這種類型的圖標需要標注圖標點擊區(qū)域大小，圖標距離屏幕最左最右以及上下的距離。至于圖標的間距，因為有些時候可能設計師不能完全做到1px不差，所以我基本不標，交給工程師讓他們去處理，其實等距排列的圖標不需要標間距，因為工程師還要動態(tài)適應不同的屏幕，標了間距也是白標(還是要和你的搭檔溝通怎么去標注）；

4.模塊間隔：這個位置其實不是太重要，我習慣標注上這里，麻煩能少則少。

5.圖片+文字：這個應該比較常見，只標注一個單位(圖+文)就可以了。

圖片需要標注寬高，因為工程師要設置圖片區(qū)域，從后臺調取，可以這么說，軟件里除了橫屏撐滿的圖，基本上所有的圖片都要標注寬高。

圖片距離上下左右的距離，文字大小顏色，這里的文字其實算兩個控件，標題文字以及說明文字，需要單獨標出。

Tab Bar：

這個位置其實比較特殊，你可以單獨標注圖標大小+文字大??；還可以圖標文字算作一個控件，整個切出來；

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

圖標該切幾套？

舉個例子

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

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

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

圖標觸擊區(qū)域：

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

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

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

文件命名規(guī)范：

字體使用：

關于字體大小的問題

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

標題文字大小28-34px

正文文字大小26-30px

輔助性文字大小20-24px

Tab bar文字大小20px

多了解一些，便于溝通！

文章名稱：移動端設計總結
標題網址：http://muchs.cn/news/162633.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、品牌網站設計、外貿網站建設、定制網站、軟件開發(fā)、網站設計公司

廣告

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