axure element元件_产品经理基础知识构成之原型设计工具axure(2)

上一节我们讲了axure在开始着手画原型之前需要做的五步：

1.梳理产品功能等级

2.梳理产品功能结构

3.将产品流程图文字化

4.将产品功能说给开发和需求方听

5.将当前产品进行核心提炼并做版本规划

这一节我们来总结归纳一些axure的使用技巧，能否快速的设计原型，首先我们得熟悉快捷键：

1.ctrl+shift+a【截图屏幕】

2.ctrl+v【粘贴】

3.ctrl+d【选中元件复制】

4.ctrl+鼠标点选元件【多选】

5.ctrl+G【组合元件】

6.ctrl+向上箭头或者向下【移动元件图层】

7.ctrl+shift+向上箭头或者向下【移动元件图层至底层或顶层】

8.ctrl+s【保存】

9.ctrl+z【撤销动作】

10.ctrl+shift+z【重做】

其他的快捷键我就不一一列举，只要掌握好这些快捷键足矣，剩下的菜单栏找一下可以挨个试试效果。

其次，我们要来介绍的是视觉规范。其实这个视觉规范倒不是我自己想出来的，我是在看sketch的设计模版时，觉得这个东西的确需要规范一下，避免对设计师造成影响。想深入了解的同学，可以下载sketch研究一下他的移动端、网页端的各种尺寸规范。

sketch模版规范

在这里我简单说说我平时用的一些设计规范：

1.web设计的主题body部分宽度不超过1200,主体部分居中对齐

2.移动端设计一律用目前最大手机屏幕的尺寸

3.设计时一定要用辅助线来对齐和对齐分布

这些属于视觉规范，方便我们在设计的时候就考虑了整体的功能分布情况

在axure9中提供的模版规范

目录结构的规范：

1.单页面功能产品块尽量在一个界面画清楚所有功能状态，并用箭头链接跳转去向，在线上写清楚条件

2.单个系统模块不用建文件夹级别的目录，用图层结构来分清楚各种情况，如图：

模块化的层级结构

3.多系统模块交互设计时，要使用目录结构呈现产品结构和大纲，如图：

系统化的目录结构

最后一个是色彩规范，很多同学在一个开始的时候特别纠结高保真和低保真的问题，说是高保真或者上色的原型会影响到设计。我个人一直习惯用高保真去设计，要是设计师本身就有色彩和设计规范，那组件和元件设计上就简单了，如果没有的话，我建议是直接用element ui提供的原型组件或者axure提供的自带组件来设计。

element组件

因为大多数前端开发现在都是用的vue+element ui的组件来设计后台，这样的话很多时候都不需要设计这一环，而且前台的一些界面，因为有标准的组件规范，不至于有太大的设计出入。顶多是一些设计风格、色彩搭配上的变化，重点是图像的美化。

但是大多少情况我们需要干一些事情，只是各种文字的色彩变化，避免大家在实际工作中对现有系统的小改动画原型太繁琐，这里我讲点小技巧：前端样式调试，我一般愿意用火狐调试，因为是中文。例如：我们现在要改几个原型上面的文字，我们在火狐浏览器上右键，点击检查元素。

例如只是改个常用网站几个字，只要在调试窗口中直接改完截图就行，避免再画原型，通过这个功能你甚至都能知道后台逻辑接口是怎么写的，哪些数据请求快还是慢。但是目前只是利用这个来截图画原型比较省事，主要就是在用一些组件的时候，你可以完全自己调试。

例如Element ui中的文字大小、色彩，宽高等等，举个例子：

这个是Element ui的icon图标

一般我也是懒得找和用，都直接在上面调试完大小和文字颜色然后截图出来用，省去了在axure查找还要不能停的写字对齐的问题。

然后把英文名改成自己想要的，再放到axure里面就可以用了，懂前端知识的产品这个操作起来就很简单了，所以一般建议在画原型之前就和开发说好用统一的前端组件，这样大家协作起来也非常简单。element ui之所以设定这种前端规范和开源自己的组件，其实也是为了大家合作起来比较省心，避免设计师过于自我表现，而忽略了整体设计规范。

关于axure的常见技巧我就说到这里，下一小节我们开始将xmind zen的工具学习和使用。

xmind鱼骨图