Axure实践第二讲

Axure实践第二讲---如何有效的在工作中引入原型·页面枝干·添枝加叶·画龙点睛在近期的产品需求开发过程中,我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中,原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略:产品与原型的一节课。一、功能结构图(页面枝干)1.切入点是功能结构图(自顶向下)从大的方向上去划分几个大的模块类型,适用于业务功能较为单一且业务逻辑处理流程较为简单,如在做市商系统构...

Axure实践第二讲

---如何有效的在工作中引入原型

 

·页面枝干

·添枝加叶

·画龙点睛

 

    在近期的产品需求开发过程中,我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中,原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略:产品与原型的一节课。

一、功能结构图(页面枝干)

1.  切入点是功能结构图(自顶向下)

从大的方向上去划分几个大的模块类型,适用于业务功能较为单一且业务逻辑处理流程较为简单,如在做市商系统构建的过程中

(一)将做市商划分为两个大的类型:期权做市商、期货做市商;

(二)根据经验,将功能划分为配置管理、查询功能。

(三)随后根据《需求申请书》中的内容,将各个功能点归纳到上述大的模块下。

优势:可复用性强,基本思路与模板思路一致,提取可用的用户需求模型,就可以快速的规划功能结构图。

劣势:由于划分是按照模板进行划分,所以功能的名称以及分类可能并不会体现出精细化,更多的是一种泛义上的定义。

2.  切入点是详细功能(自底向上)

由细小的功能,去分类和划分,这样工作可以一开始就从用户的《需求申请书》进行入手。

(一)将《需求申请书》通读后,将可以整理出的功能点,整理为功能点列表;

(二)将功能列表进行分类整理,这个时候可以采用Visio工具或者思维导图工具对上述的功能列表进行分类,分组。

(三)分组的过程可以更加定制化一点,相关联的功能可以尝试有机的组合,而不是通过原有的相似性进行划分,强调的是功能模块之间的关联。

优势:可以自由的去关联功能,不局限于传统的导航形式,可以体现功能模块间的内部关联。

劣势:不太容易把握导航设计的级别,分类太细致,可能会引起导航的深度太深,从而在使用上增加操作路径。

样例:

                           

Axure实践第二讲

图例1-1     (采用自顶向下方式绘制)

完成功能结构图以后,基本上页面以一种怎样的导航形式展示,以一种怎样的关系进行页面关联,应该就可以了然于胸。

设计导航结构原型,两种设计方式:(横向导航、左侧导航),这两种方式符合现代的阅读习惯,所以常见的导航栏设计都来自于这两种:

Axure实践第二讲

图例1-2    横向导航

Axure实践第二讲

图例1-3    左侧导航

    当然也有很多情况,出现二级导航时两者进行混合使用,这里就不再详细描述。

    Axure技巧时间:

页面布局的一些常用的小技巧:

1.  使用页面的居中功能,可以使界面看起来更加整齐;

2.  在页面功能中定义自己的样式,如所有页面统一的背景色,这个不是太建议使用,可以将居中作为模板纳入。

3.  为了不影响UI后期的颜色调配,可以开启黑白颜色模式作为交付产物,如下图1-4和图1-5:

Axure实践第二讲

图例1-4    无彩色交付原型

Axure实践第二讲

图例1-5    彩色原型

二、核心数据信息化(添枝加叶)

页面导航完成后,聚焦页面展示的内容,这个才是页面的核心内容,主要内容源来源可以取自于需求分析的结论,目前的业务系统主要数据源大多数采用表格、表单进行组织,也有部分采用数据可视化技术,对数据展示进行优化,以下对于这两部分的内容进行讲解:

1.  表格、表单

通过表格展示(图1-6)的数据列,可以根据需求调研结果或者需求申请书中进行概括,基本就是要确定页面展示的数据列,筛选输入表单。

确定内容后,随后确定使用的控件,基本就是“输入框”、“下拉窗格”、“多选窗格”、“单选框/复选框”、按钮这些基础控件。

而表格内容,则是设定表头,列表中的内容后,使用表格方式进行展示即可。早期的Web开发中,基本只有数据,所以表格给人的第一感觉就是excel一般的压抑,全部都是文字,而随着移动端的崛起,表格被赋予了新的生命力,图文混排(图1-7)这种形式得到了很大程度上的推广。

Axure实践第二讲

图例1-6   图文混排的样板

Axure实践第二讲

图例1-7   图文混排的样板

另外,利用图文混排将列表的的布局通常可以以九宫格的状态进行组织:

Axure实践第二讲

图例1-8   列表

Axure实践第二讲

图例1-9   九宫格

2.  数据可视化表达

原有的数据表示方式通过表格表示,一方面是页面的篇幅会比较长,另一方面,无法直观的辨别数据的趋势以及某些流程的进展,所以除了专业化的业务数据是给专业人士进行计算分析外,引入了“Dashboard”的概念,对数据的展示形式进行改进,常见的有折线图、饼图。目前可以支持的主要就是这两种类型的图表,网络上有制作好的图表原型Axhub Charts,有兴趣的同事可以去看一下。

https://axhub.im/pro/3320ad07d6897b89/#g=1&p=about

目前据小道消息,Axure正在引入E-charts的支持,相信将来可以引入更多的图表,这个大家可以静候佳音。

另外一种制作图表的方式就是通过Axure中提供的一些简单形状去构建,这里主要说明就是折线图和柱状图。效果如下:

Axure实践第二讲

图例1-10   折线图

使用手绘的方式处理图表,实际上比粘贴一个图片更加美观,而且可以自由的去定义一些交互。缺点就是可能需要花点时间。

Axure技巧时间:

控件使用的一些常用的小技巧:

1.  定义一套控件模板,可以通过拖动的方式快速的引入好看的样式;

2.  将模板定义到工作空间的控件中,更加灵活,但是不能导出;

3.  布局的对齐可以借助参考线、对齐功能,这个功能还是非常重要,不再依赖智能对齐线和目测对齐。

4.  页面内的字体和文字大小采用一个统一的样式,可以让页面更加整齐划一。

5.  Axure原生控件的表格不是太好用,所以建议不再使用该控件。

三、增加交互(画龙点睛)

随着移动端的兴起,交互变成一个炙手可热的词汇,因为人机交互忽然变得无处不在,不在只是存在于上班时,所以用户不能容忍生活中用着手机中优质的交互,但是工作中却要忍受一个糟糕的系统。

对于是否在原型中构建交互,因为目前的原型复用的几率很低,所以如果花很大力气去构建复杂的交互,最后在前端工程师那里得到了否定的答案,确实是一件让人很不开心的一件事情;但是我个人认为交互还是要去做一部分工作的,因为这一部分正是“画龙点睛”的一笔,其实属于一个产品经理的时间其实就是这里。需求和界面都是“用户”拍板的,其实可以糅合自己思想的地方很小,如果真的想提升对于交互的理解,还是一定要去尝试做一个完整的交互原型。因为只有做出来才能真正了解到:这种方式确实是合适、美观、实用的。如果只是停留在想法阶段,那么请一定在原型中做标记说明,毕竟灵感转瞬即逝。

有交互的原型也可以在与前端工程师进行沟通的时候,并不是那么乏味的停留在两个人的脑海(还可能有差异)中,而是生动的展现在两个人的视野(达成一致)中。

这里,我将交互分为两种:

1. 大型交互

大型交互可以理解为面包屑导航、对话框、提示语、文案、页面切换方式,总之这些用户显而易见的人机交互部分都可以称之为大型的交互动作。

这些动作其实还可以归纳为一句话:XX情况下执行XX动作,得到XX结果,也就是千言万语的表达就是要通过一个动作完成表达。

Axure技巧时间:

控件使用的一些常用的小技巧:

1.  页面切换方式,采用两种方式:第一种:建立共有母版的方式,这在页面切换时,除了轻微闪烁,效果也很好;第二种:通过引入动态面板实现。

2.  条件的认定不可以识别中文,所以尽可能用英文。

3.  为了更好的控制元件,一定要对元件进行命名和分组,这样在制作交互动作的时候,可以快速的选择到元件。

2.  微交互

微交互其实是我个人定义了这样一个名词,因为没有找到专业的名词,在PPT动画创作中,有一部分设计师为了让作品更加的贴近真实,做的一些交互动作。

这部分交互动作大部分在网页中可能并不适用,但是如果在原型中引入这个概念,可能也会成为点睛之笔。这些在很多前端框架中已经做了集成,比如交互错误的提示,不再采用之前那种弹窗提示,多数开发者,转而采用在样式表中加入交互,以达到一种轻量级的提示方式。

Axure技巧时间:

控件使用的一些常用的小技巧:

1.  微交互控件建议根据自己的经验做一些元件集成工作,因为制作会比较花费时间;

随后的工作就是根据需求和原型,与用户进行确认后,进入后续的工作,总而言之,原型最大的作用,实际上就是连接了用需的文字和用户的想象,对于需求工作的查漏补缺也是提供了一个操作实体。如果原型工作安排的开发时间并不是太充足,那么一定记得以标注的形式将你想到的想法记录在模型旁边,毕竟灵感转瞬即逝。

 

最后为大家准备的是最近流行的一种编写产品需求的方式“Axure产品需求”:

http://www.pmdaniu.com/storage/11401/5c54bff80e4bdad034860976de104dbf-7376/start.html#g=1&p=首页

这个方式充分肯定了Axure的工具特性,以及当前工作没有特定局限的形式,即使是一个很简单的工具,用的好了依旧不会束缚你的想象力,希望大家能够不囿于工具的简陋,充分放飞自己的想法。

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35919/

(0)
交互精选交互精选
上一篇 2018-03-16
下一篇 2018-03-16

相关推荐

  • 画一本满满的Sketch Book,你有这样的执念吗?

    Sketch Book 到底对你意义为何我们收到过,看到过很多位插画师的速写本有随身的不到A5尺寸的也有十分大到A3的像作品集一样也收到过,很多后台询问可以推荐款速写本,可以推荐下用什么笔吗(这个真的,不重要 X3)你会发现,很多ins上国外插画师po出来完稿画作和平日速写本的风格截然不同对,速写本不是一本作品集需要每一页都是完整的,完美的它更像一个瞬时的思考把你的某一点切实地记录下来看看她们的速写本01 Eve尹光芒正在鲸字号 上海实...

    2018-03-26
  • 【原创】交互设计七大标准(7) 奥卡姆剃刀定律(简单有效原理)

    奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)是由14世纪逻辑学家、圣方济各会修士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。这个原理称为“如无必要,勿增实体”,即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”▲ 奥卡姆剃刀原理如果你有两个类似的解决方案,选择最简单的。这些所提到其实就是驭繁于简。把事情变复杂...

    2018-02-22
  • 19.怎样绘制用户体验的地图 | 打造产品思维30讲

    19.怎样绘制用户体验地图来自时间前哨00:0015:06这一节讲用户体验地图和用户故事。用户体验地图就是通过画一张图,用一种讲故事的方式,从一个特定用户的角度出发,记录下他与产品或者服务进行接触、进入、互动的完整过程。开始做产品经理的人容易犯的错误,就是用管理员的视角来规划产品。我经常看到这种全局型的产品设计图,复杂、全面、没重点,这肯定是错的。我一般会告诉这种产品经理,请按照一个用户使用的路径,把这个产品设计图再画一遍。从一开始用户...

    2018-03-20
  • 做你老婆,用户体验真差

    洞见(DJ00123987)——不一样的新闻,不一样的故事,数百万人订阅的微信大号。点击标题下蓝字“洞见”免费关注,我们将为您提供有价值、有意思的延伸阅读。作者:青蓝来源:青蓝(ID: qinglansz)没错,这是一篇真诚的吐槽贴。鉴于各位直男的脑回路和女人差异较大,常常不能正确理解老婆大人的本意,今天我特意以你们最爱的电子产品——手机为例,给你们分析一下老婆们的用户体验。01. 外观差评,后盖鼓起,前屏磨花,说好的金属漆还掉了色。小...

    2018-03-25
  • 像用户体验设计师那样思考

    [国外设计第158期][图片]插画来自Crafticons培养探索未知的心态(持续)学习用户体验是最需要技巧的事情。因为这不是标准教育中的某个正式课题。它总是以某种神秘不可预测面貌示人,直到你在设计、研发、市场推广(或者其他创意领域)中遭遇到用户体验的具体概念。虽然在用户体验方面

    微信热点 2018-04-18
  • 如果你即将面试交互设计,可以参考一下这篇

    交互设计也是设计类,设计类的面试只要看作品说话而已。但是,偶尔有也会有些面试官完全都不理你的作品,然后会问一些比较宽泛的问题,今天的汇总就是主要针对这部分题目。题目大多都能回答,但是偶尔一个题目打过来还是会有点懵,所以事先做好准备会相对比较好。最最重要的当然是介绍你的作品!介绍你的作品!介绍你的作品!(重要事情说三遍)讲的思路就是你从什么地方找到设计的依据,然后做了什么设计。下面就是面试的其他问题:1、自我介绍。答:(自我介绍算是面试的...

    微信热点 2018-03-25
  • Axure RP 7.0软件安装视频教程

    Axure RP 7.0下载地址:链接:https://pan.baidu.com/s/1eTf0W6Y密码:otr5安装中有问题请咨询私人微信:152374906801、找到AxureRP_Pro_Setup.1415607193.exe鼠标右击以管理员身份选择打开2、点击next3、勾选I Agree,然后点击Next4、点击Browse更改安装路径建议安装到除C盘以外的磁盘,可在D盘或者其他盘创建一个文件夹。然后点击Next5、名...

    2018-03-04
  • 解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~一费茨定律(Fitts’ Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. ...

    2018-02-03
  • 用户体验升级:《部落冲突》VS《竞逐之国:毁灭时代》

    原文作者:Om Tandon‘用户体验设计’是电子游戏产品的关键组成部分之一,随着手游产业的发展和智能手机的普及,人们接触的手游越来越多,现有的手游体验对多数玩家来说已经不再陌生。为了在同类产品中建立优势,开发者需要不断实现创新,改进并突破这种体验,从而为用户创造新的价值。与上市时间较长的同类手游《部落冲突》相比,Space Ape的RTS新作《竞逐之国:毁灭时代》在用户体验方面实现了突破。我们将两者的‘首次用户体验’、‘编辑模式&基地...

    2018-03-09
  • 用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26