APP界面設計之尺寸介紹


1.尺寸以及分辨率

  iPhone的界面尺寸不用多說,640*960是基本OK的,也可以是適應5S的640*1136,馬上iPhone 6也快來了(隨便吐槽一下網上曝的真機諜照,真是丑到離譜...),只要寬度不變都好說。至於像素問題,網頁和移動的UI用72px就可以了,不必糾結。

2.界面基本組成元素

  iPhone的APP界面一般由狀態欄、導航欄、主菜單欄和中間的內容區域組成。因為寬度是固定的,所以設計開發起來很方便。下面我們說說這些“欄”的尺寸吧:

  狀態欄:顯示運營商、信號和電量的區域,高度 40px

  導航欄:顯示當前頁面名稱,包含頁面“返回”等功能按鈕,高度 88px

  主菜單欄:顯示在頁面下方的區域,一般作為分類內容的快遞導航,高度 98px

3.字體大小

  iPhone上的英文字體為:HelveticaNeue,至於中文,一般是冬青黑體或是黑體-簡。有關文字的大小根據不同類型的APP都有不同的定義,但是百度用戶體驗部提供了這樣一份統計資料:閱讀最舒適的長文本大小在32~34px之間,短文本為32px,注釋等提示文本為28px。不管是否同意,至少人家有數據說話,你也可以把覺得好的應用截圖放進PS里對比看,從而調試自己設計的文字大小。

 

 

 

  總之,方法很多,個人的審美也不一樣,有人故意把字做大以突出個性,自己實踐,把數據作為參考,多做幾款應用心中也就有數了,比看再說教程或者說明有用!

 

 

Android篇

1.尺寸以及分辨率

  提到Android的尺寸,讓多少設計和開發抓耳撓腮,數不清的機型和尺寸,重復的適配。這里我們就說些主流的設計尺寸吧,比如480*800、720*128。很長一段時間內,我們都在用480*800,但是安卓手機分辨率的發展眾所周知的越來越大,所以我建議使用720*1280這個尺寸來設計,切圖上可以點9切圖做到所有手機的適配。

2.界面基本組成元素

  與ios的一樣,還是有狀態欄、導航欄和主菜單欄,以720*1280的尺寸來設計,那么狀態欄的高度應為50px,導航欄的高度96px,主菜單欄的高度96px。因為是開源的系統,很多廠家都把安卓系統“玩壞”了,這里的數值也只能作為參考,比如魅族flyme狀態欄是正常的兩倍高,還有很多廠商也在界面上相近辦法。

  Android為了區別於IOS,從4.0開始提出了一套HOLO的UI風格設計風格,鼓勵將底部的主菜單欄放到導航欄下面,從而避免點擊下方材料誤點虛擬按鍵,很多APP的新版中也采用了這一風格,比如微信。就前不久的I/O大會上,最新的Android L正式揭開面紗,宣布了安卓全面進入扁平化時代。

 

3.文字大小

  Android的字體為:Droid sans fallback,這是谷歌自己的字體,與微軟雅黑很像。同樣百度也提供了一份統計數據,但是個人覺得已過期,現在沒有太大意義,因為他們是以480*800的分辨率作為測試,測試結果是閱讀最舒適的長文本為27px,短文本也是27px,注釋備注文本21px。具體還是要大家將做好的界面放到同分辨率的手機上看為准!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM