TreeMind树图在线AI思维导图
当前位置:树图思维导图模板IT互联网分析方法/模型Web产品原型尺寸遵循设计规范思维导图

Web产品原型尺寸遵循设计规范思维导图

  收藏
  分享
免费下载
免费使用文件
U77418911 浏览量:12022-09-18 21:19:25
已被使用0次
查看详情Web产品原型尺寸遵循设计规范思维导图

Web产品原型尺寸遵循设计规范,明确产品所在容器、容器决定产品边界、确定最终原型尺寸、画出原型尺寸

树图思维导图提供 Web产品原型尺寸遵循设计规范 在线思维导图免费制作,点击“编辑”按钮,可对 Web产品原型尺寸遵循设计规范  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:1a5f657c8cd726ce01489b2b0df9dfaf

思维导图大纲

Web产品原型尺寸遵循设计规范思维导图模板大纲

明确产品所在容器

对于产品经理来说,只要能够理解“自己的产品是显示在相应容器内部并且依赖容器展示界面和功能”这个概念就可以了

容器决定产品边界

默认状态下的可展示区域,就是PM经理需要 遵循的原型尺寸

最大的展示区域,往往接近屏幕分辨率

如果容器支持缩放大小,意味着需要考虑原型 在不同大小展示区域下的布局效果

最小的展示区域,往往是默认的原型尺寸

部分产品可以缩放得更小,此时展示左上区域 或者页面模块按一定规则缩小

确定最终原型尺寸

Web网页端产品的最佳原型尺寸可以采用宽度1200px,高度自适应

Web网页端产品,是放在浏览器这个容器里面的

原型尺寸可以采用浏览器的默认展示区域,此时接近于屏幕分辨率

为保证自己的电脑可以查看完整的原型,所以Web产品原型尺寸需要小于当前的分辨率1440*900px(可在电脑配置中进行调整)

为保证项目的设计&开发&测试等,可以查看完整的原型,所以需要考虑下屏幕分辨率,比如有个1280*800px

当产品最终供所有用户查看,需要兼顾大部分用户的屏幕分辨率,通过查询当前电脑屏幕分辨率分布情况来查询出主流屏幕的最小宽度1280px

考虑到左右两侧可能还会放置广告位以及返回顶部等按钮,原型宽度最好小于1280px

画出原型尺寸

Web网页端插屏的两种样式效果

页面宽度1200px,内容1200px;相对浏览器居中对齐;如果小于1200px则显示靠左部分

页面宽度无限大,内容1200px;相对浏览器 居中对齐;如果小于1200px则显示靠左部

画出指定宽度原型

从默认元件库拖动“矩形1”到画布位置(0,0),修改宽度为1200px,高度根据需求而定

点击空白区域,右侧边栏切换到样式,根据需要设置页面排列为“靠左对齐”或者保持“居中对齐”(Axure9.0默认居中对齐,Axure8.0默认靠左对齐)

点击“预览”按钮,然后在浏览器中查看效果

画出无限宽度原型

同时选择所有元件,右键点击“转换为动态面板 ”

点击该动态面板,命名为“顶部导航”,勾选“100%宽度(仅浏览器中有效)”,填充颜色设为#F2F2F2或者其他颜色

双击该动态面板进入,然后选择矩形,填充颜色设为同上,线段边宽修改为0

点击“预览”按钮,然后在浏览器中查看效果

相关思维导图模板

数据服务商的类型与功能思维导图

树图思维导图提供 数据服务商的类型与功能 在线思维导图免费制作,点击“编辑”按钮,可对 数据服务商的类型与功能  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:033bce95b9b293cd9538387b10b4a2b7

机械零件设计公差与配合思维导图

树图思维导图提供 机械零件设计公差与配合 在线思维导图免费制作,点击“编辑”按钮,可对 机械零件设计公差与配合  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:7b246fed00966a976f21d5ce93b904ff