产品产品经理@产品

这不是Axure教程!(一)初步认识软件

2018-03-31  本文已影响467人  我是王嘉译

Axure是每个产品经理的工作利器,或许一个产品经理可以不用,但一定知道它。

我使用Axure已有一段时间,但一直概念零散,未曾形成一份完整体系,到头到尾,这个软件到底能实现什么呢?在什么情况下有什么技巧呢?更好的绘制步骤是什么呢?

因此我根据自身理解写下这个系列文章,于我自身算是总结经验,亦作同行分享交流。

文章的重点不会是某个功能的具体使用,因为基础功能都不难且已有很多教程,我会更倾向于系统性理解和实战技巧

一、Axure绘图结构和产品结构

设计一款产品之前,产品经理一定都会梳理一份产品结构或大纲,一般对应了产品的一级菜单,例如微博APP的一级结构分为【首页、消息、发现、我】,在【我】的功能页面,又细分多个和个人设置相关的其他二级设置,比如【好友、关注、相册、会员】等。

那么在使用Axure绘图时的页面结构,也建议和产品结构保持一致,这样做一方面有助于自己整理汇总,也有助于你在讲解或演示时让观看者理解。

画图要点

如上图所示,我们画图时除了结构一致,还需要命名一致,而且Axure建议使用英文命名。如果单词不会可使用翻译,但一定要养成好习惯,后期就会越来越熟练。

二、画图界面

整体来讲,Axure是一款入门容易,但精通不易的软件。既然说入门容易,也就是你打开它你就可以开始画图了,不需要任何人教你,不需要看教程。如下图

软件默认界面6区域

打开软件后就自动新建了一个文件,通常可见六个区域,从左到右从上到下,依次功能是

1)页面:可添加页面,形成和产品结构一致的页面结构,类似文档目录

2)元件库:页面所有内容都是元件组成,从元件库选择一个元件,拖入画图区即可。软件已内置高频元件,我们也可以自制元件。

3)母版:类似PPT的母版,可以用于多个页面,提高效率的不二法宝。

4)画图区:任意拖放、对齐、旋转、隐藏。。。选择一个元件或多个元件,你想做什么都可以。

5)检视页面:分为属性、说明、样式。在【样式】里设置每个元件的颜色、对齐、背景色等,和Word的文字处理类似。在【属性】里设置元件的交互,比如鼠标点击时、旋转时、选中时等各种条件下的交互响应。

6)概要页面:此区域显示页面所有元件,可在此处快速选择元件,也可按不同方式查看元件,例如查看已命名元件、查看隐藏元件、按从上到下排序显示灯

三、命名

绘图时我们需要对元件取名字,但一个原型可能有上千个元件,不可能每一个都命名,所以建议的命名规则是:

1、页面必须命名,和产品结构一致

2、有交互的元件必须命名

3、按照元件类型在命名时加上核心词

例如按钮名为【ButtonLogin】表示登陆按钮,【TagKeyWord】表示关键词标签。这样一看名字就能知道元件的主要功能。多个同类型元件,名称也类似,可以在加上序号,例如Button01,Button02。

上面的命名规则还有个好处,我们的前端攻城狮也会涉及到变量或对象的命名,方式也离不开这三种,保持一致,方便大家。

四、原型预览

原型绘制中建议一边画图一边预览,既能让你实时看见最新效果,也能提前检验错误。

预览的三方式

预览分为三种方式,视情况选择适合的方式即可

一)预览:

快捷键,F5或者按菜单提示。本地预览,只能在你的电脑上某个浏览器预览。

二)共享:

利用Axure官方服务器,发布一个在线版本,这种方式会生成一个链接,把链接发给其他人就可以多人观看,适用于更新后。

三)生成HTML文件:

把Axure文件生成html文件,把生成后的文件发给其他人,适用于把文件发给没有安装Axure的人观看。

五、自适应视图

自适应视图,顾名思义它可以避免变形,实现让你的原型自动适应屏幕大小,但在此之前我们有必要先了解两个关于分辨率的概念。

分辨率对照表

● 物理分辨率:决定任何一块屏幕的最高分辨率,并且不可改变。常见各类手机、平板或电视屏幕都有这个值,例如iPhone X的分辨率1125px × 2436px,一个iPhone X的分辨率不会超过这个值。

● 逻辑分辨率:根据算法从物理分辨率得到的理论数值。很早之前,这两个分辨率的数值相等。随着技术发展,物理分辨率达到了逻辑分辨率的3倍。所以我们用物理分辨率除以3可以得到一个屏幕的逻辑分辨率。iPhone X的物理分辨率是375pt × 812pt @3x。

区分这两个概念的重点在于,你想要你的原型适应哪些屏幕,那就在Axure软件菜单【项目-自适应视图】中添加这个屏幕的逻辑分辨率。

接下来生成原型时,还需要在【生成HTML - 移动设备 - 包含视口标签】勾选。因为软件默认生成预览文件时不勾选。

经过以上两个设置,你只需画一份原型,即可让适配过的屏幕正常显示界面,而不会变形。

— — — — 系 列 目 录 — — — —

这不是Axure教程!(一)初步认识

这不是Axure教程!(二)素材获取

这不是Axure教程!(三)流程与标注

这不是Axure教程!(四)元件六要素与用例

这不是Axure教程!(五)变量与函数

这不是Axure教程!(六)动态面板之一:属性和动效

这不是Axure教程!(六)动态面板之二:经典实践

这不是Axure教程!(七)强大的中继器__1

— — — — 目  录  完 — — — —

上一篇下一篇

猜你喜欢

热点阅读