Axure制作产品原型那点事

针对产品原型的制作工具,当前我们有了更多的选择,每个不同的原型工具有其各自的优势,当然其各自也都有相对于其他工具的不足。因此我们在选择原型工具的时候可以根据对产品原型的最终呈现要求来选择相应的原型工具,有些注重操作便捷,有些注重动效表现,有些注重行为判断等细节表现。尽管其各自有这些不同,但是其各自制作原型的整体思路却有着一定程度的相似,下面将以Axure制作简单登录/欢迎页面原型为例简单讲述制作原型的整体思路。

一:思路分析

产品原型虽然在视觉呈现、真实性能等方面无法与最终产品相比较,但是基本组成元素却相同,都是由静态元素(视觉界面)和动态元素(行为和数据)两部分组成,如图1-1所示:

图1-1

其相互间的关系如图1-2所示:

图1-2

产品原型中,这三个部分各有其相应的角色和任务,视觉界面负责搭建框架,行为负责连接框架,而数据决定如何连接。

二:登录/欢迎页面原型思路分析

2.1 最终效果如图2-1,2-2所示:

图2-1 登录页面
图2-2 欢迎页面

2.2 原型中的思路分析

①视觉界面:如图2-1,2-2所示(登录页面和欢迎页面);

②行为跳转:点击登录进入欢迎页面,点击退出返回到登录页面;

③数据逻辑:登录页面的输入框不能为空,若为空给出相应提示,如图2-3,2-4,2-5所示;同时欢迎页面要显示用户输入的用户名。

图2-3  用户名为空
图2-4 密码为空
图2-5 用户名、密码都为空

三:Axure制作登录/欢迎页面的主要过程�

3.1视觉界面制作:

在演示案例中页面的跳转采用的是动态面板切换方式实现,当然也可采用页面的形式,在此不做多的说明,可各自根据习惯操作。

3.1.1 创建登录/欢迎动态面板,并给该面板设置两个状态(登录页面和欢迎页面),如图3-1所示:

图3-1

3.1.2 进入登录页面面板,绘制视觉界面,并对相应部件进行相应的命名以在后期制作过程中方便查找,并对tips-name和tips-password设置成隐藏,如图3-2所示:

图3-2

同时为了实现上图2-3,图2-4,图2-5中效果,同样在名称和密码两个文本框处采用了动态面板的切换方式,如图3-3,3-4所示:

图3-3
图3-4

名称和密码两个文本框动态面板的state2都是红色边框显示效果(用添加红色矩形框的方式实现视觉效果,如图3-5所示)

图3-5

Tips:所以整个案例中的动态面板结构如图3-6所示

图3-6

3.1.3  进入欢迎页面面板,绘制视觉界面,如图3-7所示

图3-7

3.2 行为跳转+数据逻辑

3.2.1由登录页面到欢迎页面

根据行为跳转条件(两个文本框不可为空)可知存在4种跳转情况,如图3-8所示

图3-8

有图3-8可知,存在4种跳转情况:

情况1:都为空时,显示两个提示;

情况2和3:一个为空时,显示相应为空的提示;

情况4:实现页面跳转,且设置username-input的值为name的值。

情况1,2,3的设置相似,拿情况1做演示,其他两种依次做出相应的调整:

①情况1:当两者都为空时,显示两者的提示。

两者为空指数据逻辑判断(设置如图3-9所示),显示提示为行为跳转结果(设置如图3-10所示),这样单方向(动态面板name和passwords由state1到state2)的设置就已经完成。

图3-9
图3-10

接下来进行反方向设置(动态面板name和passwords由state2到state1),当输入值之后要恢复状态1,所以设置如图3-11,3-12所示(分别在两个动态面板name和passwords下的state2面板部件上设置失去焦点时事件)

图3-11
图3-12

②情况4,当都是非空时,实现页面的调整,同时对欢迎页面中的文本部件进行赋值,以实现上图2-2 欢迎页面效果

此步骤的设置如下图3-13所示

图3-13

3.2.2 由欢迎页面到登录页面

点击退出,返回登录页面,清空登录页面所有数据,且恢复两个输入框的状态为state 1。设置如下图3-14所示

图3-14

这样一个简单地登录/欢迎的简单原型就已经制作完成。

对于产品原型的制作,不论简单复杂与否,其背后的制作思路都是一样,无非对于复杂的原型需要进行更多的设置,所以只要对原型制作思路有了一定的认识,再加上对于工具的熟练掌握,就能够制作出相应的产品原型。

这篇文章希望能够与你一起分享一点自己的心得,谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容