langzi(langzi汉字是什么)

修正导语langzi：咱们在日常作业或许文娱中经常会用到产品后台langzi，产品后台很多与功用相关的组件，而且不同产品的后台功用也不相同langzi；本文作者共享了关于用Axure画出Web后台产品的顶部导航组件的办法，咱们一同来看一下。

Web后台产品的顶部导航组件用来展现产品称号logo以及用户名和登录退出等要害信息，PM一定要了解并学会它的原型画法。

当咱们画Web后台产品原型页面的时分，首先要考虑的是画出页面的导航组件，然后再画出页面的内容区域；前者存在于大部分页面而且是相同的，后者每个页面都不太相同。

那咱们怎么用Axure画出相似下图的常见顶部导航组件作用，以及怎么在后续的画原型中运用它呢？接下来请检查具体的过程，也能够直接预览顶部导航的原型地址rgewvb.axshare

1）先画导航布景

从默许元件库拖动“矩形1”到画布方位(0,0)，修正尺度为1200*80px。

2）画产品图标

从默许元件库拖动“图片”到画布适宜方位，修正尺度为40*40px。

3）再画产品称号

从默许元件库拖动“三级标题”到画布适宜方位，双击输入产品称号。

4）再画用户名

从默许元件库拖动“文本标签”到画布适宜方位，修正双击输入用户名。

5）再画退出按钮

从默许元件库拖动“文本标签”到画布适宜方位，双击输入退出，修正字体色彩为#0000FF。

6）一起挑选产品图标和产品称号，右键点击“组合”，然后点击该组合，右侧边栏切换到“交互”，点击“新建交互”按钮，挑选触发条件“单击时”，增加动作“翻开链接”，链接到“主页”，点击“确认”按钮。

7）点击“退出”，右侧边栏切换到“交互”，点击“新建交互”按钮，挑选触发条件“单击时”，增加动作“翻开链接”，链接到“登录”，点击“确认”按钮。

8）如需顶部导航相对于屏幕方位不变，则一起挑选相应的元件然后右键点击“转换为动态面板”，然后在右侧边栏“款式”中勾选“固定到浏览器窗口”，水平固定挑选“居中”，点击“确认”按钮。

9）点击“预览”按钮，然后在浏览器中检查原型作用。

顶部导航作为大部分页面都需求用到的通用组件，那么咱们是不是在对应页面都需求画一遍呢？答案是否定的，咱们能够运用Axure的母版特性来完成只画一次，批量应用到所需页面。

10）一起挑选顶部导航的一切元件，右键点击“转换为母版”，然后在弹窗“创立母版”中输入称号“顶部导航”，然后点击“持续”按钮。

11）点击左边“母版”进入相应视图，右键“顶部导航”，点击“增加到页面中…”，然后经过全选和选中子项，结合不选和撤销选中子项来把一切需求顶部导航的页面快速选中，最终点击“确认”按钮。

我们能够依据我这篇文章制造合适自己的顶部导航组件，然后增加到自己的Axure元件库中，后续画Web后台产品原型的时分就能够快速调用。

怎么用Axure画出Web后台产品的面包屑组件

怎么用Axure画出Web后台产品的菜单栏组件

怎么用Axure画出Web后台产品的列表组件：高档交互

浪子，个人微信langzipm，大众号：浪子讲原型(langzisay)。专心于Axure原型规划和产品标准。

本文由 @浪子 原创发布于人人都是产品司理。未经许可，制止转载。

题图来自Unsplash，根据CC0协议。