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

相关推荐

  • 污力传感器——当飞机杯都有了交互体验

    污力传感器入门枕边人这是一个高科技枕头,包含一个指环和一个内置在枕头里的扬声器。当用户带上指环设备将获取用户的心跳。通过智能手机应用控制从而将信号传送到对方枕头内的扬声器中,用户靠到枕头上就仿佛实时听到爱侣的心跳!该枕头还会微微发光哦,是不是更加温馨甜蜜。污力传感器进阶Kissenger它是一款可以将远在千里之外恋人的亲吻传送到面前的装置,是不是听上去晕乎乎的?请收看以下视频:硅胶唇下嵌有高精度力传感器,用以测量吻时嘴唇不同部位的动力,...

    2018-01-30
  • 用户体验设计影响力引起两会代表关注,获业界点赞!

    如今,用户体验设计已成为社会广泛关注的话题,在今年两会上,用户体验设计的影响力也引起了两会代表关注。在今年的两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。设计创新与科技创新互为表里,需要协同发展;从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。用户体验是指用户基于对产品、系统、服务使用或者预期使用的态度和反馈。叶友达解释:“说白了,就是我们在产品的设...

    2018-03-20
  • 静态码限额后,微信支付还能兼顾合规和用户体验吗?

    【新朋友】点击标题下方蓝色字“经济晚报”关注【老朋友】点击右上角,转发或分享本页面内容4月1日,央行关于静态码扫码支付限额500元的新规开始正式实施了,从这天开始,大家通过静态二维码支付的时候每天限额是五百块。你感觉到了不方便吗?新规一出,很多小伙伴们都产生了疑问:以后我扫码支付消费是要被“管制”了吗?如果每天的限额用完却还有扫码支付的需求咋办?新规如何配合?微信支付上线新产品体验针对用户的这些疑问,微信支付和支付宝这两大移动支付巨头给...

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

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

    2018-02-03
  • 交互设计的进阶三重境

    ✨交互设计师的迷茫作为交互设计师,工作几年之后,如果还处在 “从产品接需求输出线框图” 的循环中,或许就会产生一些迷茫:自己的价值和竞争力在哪里?如何突破,进一步提升自己的能力与话语权?迷茫,是因为无法定位自己,寻不得方向,找不到出路。所以,当我们提问该如何提升时,不妨先想一想,【用户体验设计】这座高塔,究竟是个什么模样,而自己又在什么位置。此文中,我根据自己的一些工作经历和理解,将交互设计师的能力成长分出三个阶段:功能完善者、产品推动...

    2018-02-26
  • 同样是券商,为什么你家APP用户体验不好?原来还有这一招...

    券业新力量 | 服务所有券业人的梦想当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放As Long As You Love MeBackstreet Boys - Backstreet's Back导言洞察用户喜好,吸引用户,留住用户,让用户满意,是所有服务业的本质。本文以行为数据切入,从三大方面、两个案例,全方位解析如何利用行为数据提升证券App用户体验。用户体验(User Experience)最早被广泛认知和提及,是在上...

    2018-03-30
  • 我们招人啦:高级UX/UI设计师

    For EN version, clickhere生活在笔驰!想不想为前卫的客户创造出杰出的作品?加入我们紧密团结,具有才华,能吃苦耐劳的大家庭,你将会为不同行业构建最具深刻印象的品牌形象。你将迎接带有刺激和创造性的挑战。你会和一个带有创新思维的团队一起工作,不断地推动自己,让自己继续迈向未知的步伐。有时混乱,但永远是具有想象力的一个过程,我们能够专注于做出一个非凡的设计并将它和乐趣结合到一起。我们需要的高级UX/UI设计师!我们正在寻...

    微信热点 2018-04-05
  • 用户体验设计师越来越流行,难道真的是以前的网页设计师披上了时髦的外衣?【UXRen译】

    Design+体验设计精英人才职前训练营。体验设计出国留学作品集打磨。体验设计国内考研专业培训。体验设计咨询与服务。寒假审校的一篇文章,分享给大家。回答者1:Melanie Polkosky(博士, UX心理学家)啊…有点小怀疑,是不是?我并不认为用户体验设计师就是那些穿着昂贵服装以及拥有良好自我提升技能的网页设计师。实际上,作为一名用户体验研究员兼设计师我可以告诉你,在我20多年的职业生涯中,只有少数的几次的工作是和网页相关的。与普通...

    微信热点 2018-02-28
  • 写在 [ 交互设计小厨房 ] 一周岁

    时光荏苒,感谢无情岁月!感谢大家容忍这个公众号『隔三差五』抽疯式的更新;感谢太太长期战斗在『丧偶式育儿』的第一线;感谢各位『互联网老炮』容忍洒家在微信群里污力十足的飚车;最后还要感谢这个优雅的排比句。当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放金平糖の精の踊り~カチューシャ浜口史郎 - 『ガールズ&パンツァー』オーケストラ・コンサート~Herbst Musikfest 2015~产品厨子的运营总结2017年3月24日,『交...

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

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

    2018-02-22