目標設備(手機、PC、平板等)原型圖尺寸規范技巧(一)

0 評論 2768 瀏覽 30 收藏 6 分鐘

不管原型設計是低保真,高保真,都是滿足客戶的視覺體驗,畢竟好看的東西,客戶都會多看幾眼,可能就這幾眼,就能覺得你的設計是否滿足客戶的需求,提高客戶的滿意度。

所謂的規劃其實就是定規矩,按照一定的標準執行,這里面包含的東西就很多,比如顏色、布局以及元素規范等。

但需要知道的是:

原型圖不像UI那樣,確定到每一個像素;

那么原型圖的規范其實就是一種約定俗成,并沒有一概而論,必須怎樣怎樣。

而這個規范只是看起來是規范,實際上不用嚴格按照規范來。

畫原型圖需要考慮時間、效率,如果每一個步驟都按照規范來,會浪費太多的時間,我們需要再方案的產出上投入大量的精力,不要完全浪費在細枝末節上,畢竟只要UI設計師和程序猿能看懂就行,對,能懂就行。

這些規范只是讓我們有一個標準,你可以借鑒一下,作為一個參考。

原型圖規范-原型圖尺寸

不管是手機端、PC端、平板、車機等不同的產品業態,最大的區別是尺寸。

我們不需要每個尺寸都設計一遍,完全沒有必要,至于適配那就讓程序猿頭疼吧。

那么我們設計的時候,能不能有一個規范呢?

接下來,我給大家一個參考:

1. 手機端

針對手機端,我們只需要控制寬度即可,高度不夠的時候,繼續加大高度就行。

手機首屏尺寸為:375*667px

這個規范尺寸是iPhone8的尺寸,你同樣也可以使用其他常用的手機端尺寸,這個沒有固定的限制。

只有這個尺寸,在原型設計中,用的比較多,畢竟產品經理火的那幾年就是這個尺寸火,哈哈,然后就一直沿用的如今。

我是比較建議用這個尺寸,目前市面上有名的原型軟件,比如axure、摹客、墨刀等的組件都是按照這個尺寸去做的,適配的也比較好。

除了這個尺寸外,還有一些尺寸,比如:

iPhone系列:

  • iPhone4/4S:640*960
  • iPhone5/5S/SE:640*1136
  • iPhone6/6S/7/8:750*1334
  • iPhone6 Plus/6S Plus/7 Plus/8 Plus:1080*1920
  • iPhoneX/XS/11 Pro:1125*2436
  • iPhone XR/11:828*1792
  • iPhone XS Max/11 Pro Max:1242*2688

iPad系列:

  • iPad 2/Mini 1/Mini 2:768×1024
  • iPad 3/4/Air/Mini 3/Mini 4:1536×2048
  • iPad Air 2/Air 3/Pro 9.7:1536×2048
  • iPad Pro 10.5:1668×2224
  • iPad Pro 11:1668×2388
  • iPad Pro 12.9:2048×2732

Android手機:

  • 720p:720×1280
  • 1080p:1080×1920
  • 2K:1440×2560
  • 4K:2160×3840

Android平板:

  • 7寸:600×1024
  • 10寸:800×1280

2. PC端

原型尺寸建議為:1440*900

目前電腦使用最多的屏幕是1920*1080,對于原型尺寸1440的寬度,正好左邊顯示原型圖,右側寫需求描述,在屏幕上正好展示出原型圖+需求描述,不用左右滑動來看。

3. 平板端

平板端原型尺寸:1024*768

注意:平板的原型尺寸是1024*768,其中狀態欄高度20px,標題欄高度44px,鍵盤的高度是313px,底部tab欄高度49px。

除了上述的尺寸外,還有:

  • iPad Pro 12.9:2048*2732(12.9英寸)
  • ipad Pro 10.5:1668*2224(10.5英寸)
  • ipad : 1536*2048(9.7英寸)
  • ipad mini4:1536*2048(7.9英寸)

以上部分就是針對pc端、手機端和平板端的尺寸信息,具體選擇何種尺寸,根據公司的產品決定。

本文由 @盛粒工作室 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!