原型设计规范

对于应用,无论是手机、平板、汽车、穿戴、电视或是桌面电脑,也不管是 Android / Chrome OS、iOS / Mac OS、Ubuntu 或是 Windows 等平台;对于网站,无论是移动网站,还是标准网站,也不管是 Chrome、Firefox、Safari、Opera 或是 Edge 等浏览器,我们在有了产品的需求和构想之后,通常会使用 Axure 等原型设计工具进行设计。但 Axure 的设计工具的画布可以让你自由的发挥,无论布局位置,还是屏幕尺寸。所以,每个使用的人都会根据自己的喜爱,画出大小不一的原型出来,包括起始位置和界面元素的介绍等。
这在一个人使用工具时,没有任何问题,大家都可以发挥自己的个性来快速的表达。但是,如果在团队或社区中这样,我们就很难达到设计上的通用性和一致性,特别是在希望将一些设计的组件或构建块抽取出来,形成通用的元件库的时候,如果大家共享的元件库,都是根据不同的屏幕尺寸来设计的,就会出现互相不能共用的情况。
为了解决此类问题,让各位产品经理、产品设计师等能快速进行产品的原型构建,同时能互相共享通用的元件库、示例、经验,或是其它资源,现提出一些统一的约定和建议性的参考规范,希望大家共同遵循。

应用部分

Android 原型设计屏幕像素
穿戴(iOS):156 x 195(4:5,参考屏幕:1.65 英寸)
穿戴(Android):180 x 180(9:16,参考屏幕:1.65 英寸)
手机(iOS):375 x 667(参考屏幕:4.7 英寸)
手机(Android):360 x 640(9:16,参考屏幕:5.5 英寸)
汽车:768 x 576(4:3,参考屏幕:7.9 英寸)
平板:768 x 576(4:3,参考屏幕:9.7 英寸)
电脑:1280 x 800(8:5,参考屏幕:13.3 英寸)
电视:1280 x 720(16:9,参考屏幕:55 英寸)

网站部分

原型设计屏幕像素
移动网站(iOS):375 x 667(+)
移动网站(Android):360 x 640(+)(参考屏幕:5.5 英寸)
标准网站:1200 x 900(+)(参考屏幕:7.9/9.7/13.3/55 英寸)
遗留网站:960 x 768(+)(仅针对遗留系统,全新网站不建议采用此参考标准)
通常情况下,平板和标准网站应支持响应式网页设计(RWD),包括横竖屏自适应,并建议移动网站进行单独设计。
如果你在使用后,有什么意见或建议,请在本页面下方的评论中给我留言,感谢你的使用。

发表评论