目標設備(手機、PC、平板等)原型圖尺寸規范技巧(一)
不管原型設計是低保真,高保真,都是滿足客戶的視覺體驗,畢竟好看的東西,客戶都會多看幾眼,可能就這幾眼,就能覺得你的設計是否滿足客戶的需求,提高客戶的滿意度。
所謂的規劃其實就是定規矩,按照一定的標準執行,這里面包含的東西就很多,比如顏色、布局以及元素規范等。
但需要知道的是:
原型圖不像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 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!