在设计原型时,选择合适的尺寸对于确保用户体验至关重要。本文将为您提供不同设备的设计尺寸参考,并提供实用的布局建议,帮助您快速上手原型设计。
一、各类终端原型设计尺寸标准
以下是一些常见终端的设计尺寸标准,您可以根据这些标准来设置您的原型尺寸。请注意,这些尺寸仅供参考,实际设计时可以根据具体业务需求进行调整。
类型 | 原型尺寸 | 内容尺寸 | 左右留白 | 顶部栏 | 底部栏 | 侧导航 |
---|---|---|---|---|---|---|
WEB端网站类 | 1920px | 1200px | 360px | 48px | 无 | 无 |
WEB端中后台 | 1920px | 1664px | 24px | 48px | 无 | 208px |
苹果移动端 | 375px | 351px | 12px | 44px | 49px | 无 |
安卓移动端 | 360px | 336px | 12px | 44px | 49px | 无 |
IPAD移动端 | 1024px | 1000px | 12px | 48px | 无 | 无 |
二、设计建议
-
WEB端网站类系统设计:
- 将顶部导航、页脚转为母版,以便于后期维护和快速修改。
- 利用“页面载入时”交互事件,设置对应菜单为选中,实现导航菜单的选中效果。
-
WEB端中后台系统设计:
- 将顶部导航和侧导航单独放置在一个页面,其他页面仅保留右侧页面内容。
- 使用内联框架元件链接对应页面,并为导航添加点击事件,以在内联框架中打开对应页面。
-
移动端设计:
- 将公共组件如状态栏、标题栏背景、底部栏等抽离为母版,统一管理,便于后期修改主题样式。
在工作中,将原型页面组件化,制定交互规范及UI样式规范,有助于团队协作和统一不同项目原型间的规范,提高原型绘制效率和页面开发效率。
三、Axure样式面板操作
Axure9提供页面尺寸功能,方便用户快速设置原型页面尺寸,并提供多种设备尺寸参考,用户可以根据个人喜好选择适合的原型尺寸。
总结
本文提供了各类终端原型的设计尺寸参考,并给出了WEB端和移动端的设计建议。通过合理设置原型尺寸和布局,可以有效提升原型的专业性和实用性。同时,Axure软件的升级为用户提供了更多便利,帮助设计师更高效地完成原型设计。在实际工作中,根据项目需求灵活调整设计尺寸和布局,制定统一的规范,将有助于提高团队的协作效率和项目的成功率。
声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。