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

相关推荐

  • 瑞昌2018年3.31-4.6一周企业招聘信息及待遇......

    【招聘信息】客服招聘企业:精彩网络科技详细地址:江西省瑞昌市摩恩大厦8楼801岗位要求:女性/中专/技校/1-3年工作经验 /30岁以下职位要求:会办公软件,联系人:范联系电话:18079284619【招聘信息】美容师,学徒招聘企业:汉娜尚妃美容中心详细地址:阳光国际,大唐岗位要求:女性/学历不限/经验不限 /35岁以下职位要求:汉娜尚妃美容中心高薪招聘一、店长2名,底薪2000+提成+业绩+奖金,总工资5000一7000左右二、美容师...

    2018-04-08
  • 被忽视的重彩-交互设计验证

    每次评审,都是一场高效的讨(si)论(bi)大会...届时,需求、设计、开发也会上演争霸对决。作为身经百战的设计师该如何从评审会中顺利脱身,逃离这场没有硝烟的战役呢?小子很高兴地告诉你:你是绝对跑不掉的!定性、定量挖掘数据我们知道产品都有一定的周期性,开发期-成长期-成熟期-衰退期。在不同的产品周期中用户也会随着时间的推移,对产品的使用深度和理解广度有了深浅的层次变化,而不同的时期设计师采用的定性定量研究方法也是不一样的,如:访谈、问卷...

    2018-04-18
  • 坚持梦想选择学UED设计,斩获13K月薪

    达内UI设计,中国UID课程标准制定者当你选择一家餐馆吃饭,你有没有想过是什么让你选择这家餐馆?刚进去的时候,餐馆给你的第一印象是什么?服务员够不够勤快体贴?你是否还想去这家餐馆吃?......这一系列发生在你生活中,你留意或不留意的问题, 就是一个完整的用户体验,这种用户体验设计也称作UED。小王是达内UED学员,经过四个月培训,成功成为一名UED设计师,月薪13k。四个月,她如何实现成功?我毕业后一直在一家公司做产品工作,由于一个偶...

    2018-01-31
  • 100本UI设计/交互设计PDF电子书资源,UI设计师进阶必读书目,还在持续更新哦【024期】

    好素材,不加班今天小编为您精选了【100本UI设计/交互设计PDF电子书】大小:3.07G提供方式:百度网盘获取方式:请查看文章底部部分书籍展示领取素材的方式长按二维码回复:024长按二维码回复:024长按二维码回复:024无需分享直接获取素材热门素材推荐▶UI设计师作品集模板,PSD格式【001期】▶设计项目展示经典范例四套【002期】▶三套2.5D插画设计素材合集【003期】▶C4D设计素材包含建筑【004期】▶100多套欧美网页设...

    2018-05-07
  • 读书会第二期:《用户体验要素》(上)

    《用户体验要素》的作者Jesse James Garrett是美国用户体验咨询公司Adaptive Path的创始人之一,2005年他发表了《Ajax:A New Approach to Web Applications》这篇文章,标志着Ajax的诞生,因此他在又被称为“Ajax之父”。《用户体验要素》的中文版第1版比英文版整整晚了6年,英文版在2001年就出了,国内常见的是2010年出版的中文版第2版,书里的概念在互联网设计界广为流传...

    2018-04-12
  • 百度UED:让上帝讲真话——聊聊用户访谈几个细枝末节的问题

    来源:百度UED由于商业产品的特殊性,我们的用户是我们的客户,就是我们常说的上帝。那么,与上帝沟通需要注意哪些技巧呢?本文所讨论的技巧并非访谈技巧类的“技术流”文章,也非方法论,主要讲获取客户真实情况的访谈准备、数据收集及数据整理过程。我们在做调研时,希望了解上帝沟的目标、需求及行为。但在我们的调研中,往往发现这样的现象:1. 客户不配合我们的调研,不愿意跟我们讲话?2. 客户跟我们聊,却发现,答非所问,无论如何我们都没法在同一个平面对...

    2018-01-31
  • 【18应届报考北师大map用户体验方向】经验分享贴

    BNU学习小组互助互帮,轻松考取北师大,我们团队致力于为报考北师大MAP心理学专业的学弟学妹提供最精准的专业课辅导,官方微信:yanni513351。QQ:2194691060。专业课方面:普心、社会心理学我主要是看书背知识点,这两门课不难理解,看书熟悉内容以后将知识点背熟就可以,另外要通过做题检验自己的程度。测量心理学、实验心理学和统计心理学这三门课注重理解,尤其是统计心理学,要将每个知识点弄懂是什么意思,再做题巩固。而实验心理学重点...

    2018-04-15
  • Excel表格常用快捷键大全之1-10个

    为了小伙伴能更懂Excel 快捷键的具体使用场景,小雅不是单纯的像网上看到的一堆快捷键堆上去就好,做了更详尽的解释,希望大家能喜欢!收藏一下,记住些Excel常用快捷键还是不错的!善用快捷键,新手到高手的蜕变!不废话,进入正题,本篇是1-10个快捷键,后续会陆续为大家呈现更多的Excel快捷键。第一,插入工作表默认情况下,我们新建一个Excel文档,只有3个工作表。3个sheet,即sheet1,sheet2,sheet3。如果这三个s...

    2018-03-17
  • 良好的用户体验不一定是品牌成功的关键

    一项针对品牌魅力的新研究表明,良好的用户体验不一定是成功的关键,因为品牌完整性受损可能会超越公众的看法。 这是对四个市场10,000名消费者的在线调查的结果。这项研究从认知、目的、诚信、慷慨,勇气和交付的六个维度检查了知名品牌。分析表明,与消费者的动态关系是短暂的受欢迎,还是长期的忠诚之间存在的真正区别。乐高式最具实力的品牌,一直让顾客感到满意。相反,FIFA被评为得分最低的品牌。另外,苹果在美国排在前十位,在英国排在第十六位。尽管其创...

    2018-02-26
  • 这场UED界的大会堪比最近最火爆的雄安楼市

    2011年,阿里UED委员会的几位童鞋一商量,想给互联网的UED们一个搭交流学习的场子,就发起了第一届UCAN。如今,UCAN已经从阿里的UED的大团建发展成了国内最热门的设计大会之一。2017届的UCAN今天在阿里巴巴西溪园区召开,小编在现场看到走道都坐着人,800多人的场子,10000人报名,快赶上抢房摇号的阵仗了。报名的观众不但专业齐全,视觉、交互、用研、工程师、产品经理一个不拉,而且来自的公司阵容也很强大,腾讯、百度、亚马逊……...

    2018-02-01