10+年产品经理聊聊产品、测测产品,产品人交流学习成长平台,按 Ctrl+D 收藏我们
留言板 小程序 交流群 关于我

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源

产品设计指南:各类终端原型设计尺寸与布局优化

5月前 685 0

在设计原型时,选择合适的尺寸对于确保用户体验至关重要。本文将为您提供不同设备的设计尺寸参考,并提供实用的布局建议,帮助您快速上手原型设计。

一、各类终端原型设计尺寸标准

以下是一些常见终端的设计尺寸标准,您可以根据这些标准来设置您的原型尺寸。请注意,这些尺寸仅供参考,实际设计时可以根据具体业务需求进行调整。

类型 原型尺寸 内容尺寸 左右留白 顶部栏 底部栏 侧导航
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 无 无

二、设计建议

  1. WEB端网站类系统设计:

    • 将顶部导航、页脚转为母版,以便于后期维护和快速修改。
    • 利用“页面载入时”交互事件,设置对应菜单为选中,实现导航菜单的选中效果。
  2. WEB端中后台系统设计:

    • 将顶部导航和侧导航单独放置在一个页面,其他页面仅保留右侧页面内容。
    • 使用内联框架元件链接对应页面,并为导航添加点击事件,以在内联框架中打开对应页面。
  3. 移动端设计:

    • 将公共组件如状态栏、标题栏背景、底部栏等抽离为母版,统一管理,便于后期修改主题样式。

在工作中,将原型页面组件化,制定交互规范及UI样式规范,有助于团队协作和统一不同项目原型间的规范,提高原型绘制效率和页面开发效率。

三、Axure样式面板操作

Axure9提供页面尺寸功能,方便用户快速设置原型页面尺寸,并提供多种设备尺寸参考,用户可以根据个人喜好选择适合的原型尺寸。

总结

本文提供了各类终端原型的设计尺寸参考,并给出了WEB端和移动端的设计建议。通过合理设置原型尺寸和布局,可以有效提升原型的专业性和实用性。同时,Axure软件的升级为用户提供了更多便利,帮助设计师更高效地完成原型设计。在实际工作中,根据项目需求灵活调整设计尺寸和布局,制定统一的规范,将有助于提高团队的协作效率和项目的成功率。

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
#产品设计指南 #产品设计 #原型设计 
收藏 1
推荐阅读
  • 52设计原则:37.模块化 MODULARITY
  • 52设计原则:49.心智模型 MENTAL MODEL
  • 52设计原则:17.干扰效应 INTERFERENCE EFFECT
  • 52设计原则:02.多功能代价 FLEXIBILITY TRADEOFFS
  • 52设计原则:03.成本-效益原则 COST-BENEFIT
评论 (0)
请登录后发表评论
分类精选
52设计原则:43.正态分布 NORMAL DISTRIBUTION
1303 8月前
52设计原则:13.认知加工层次 DEPTH OF PROCESSING
1234 8月前
52设计原则:44.期望路线 DESIRE LINE
1158 8月前
52设计原则:45.反馈环 FEEDBACK LOOP
1118 8月前
52设计原则:48.信噪比 SIGNAL-TO-NOISE RATIO
1101 8月前
52设计原则:51.满意解决模式 SATISFICING
1095 8月前
52设计原则:50.委员会设计 DESIGNED BY COMMITTEE
1073 8月前
52设计原则:52.非我发明症 NOT INVENTED HERE
1072 8月前
52设计原则:49.心智模型 MENTAL MODEL
1067 8月前
52设计原则:47.功能蔓延 FEATURE CREEP
1051 8月前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
1 如何写出高质量的产品需求文档(PRD),撰写指南PRD模板
2 从“一句话需求”到完整PRD:如何用AI快速构建高效的产品需求文档(附一句话提示词)
3 从0到1掌握竞品分析:全面拆解方法论与实战案例
4 8大B端大厂设计体系:企业数字化转型的核心竞争力(Axure组件库下载)
5 想要用AI做原型设计,没有灵感?没有头绪?这四个产品经理必逛的原型资源社区
6 产品设计指南:各类终端原型设计尺寸与布局优化
7 52设计原则:52.非我发明症 NOT INVENTED HERE
8 52设计原则:51.满意解决模式 SATISFICING
9 52设计原则:50.委员会设计 DESIGNED BY COMMITTEE
10 52设计原则:49.心智模型 MENTAL MODEL
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6
免费影视APP 花式玩客 免费字体下载 产品经理导航 Axure RP 10 免费Axure模板 Axure原型设计 Axure元件库下载 原创Axure模板 申请友联