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

相关推荐

  • 想为 iPhone X 做交互设计?你需要读这篇文章

    点击上方“CSDN”,选择“置顶公众号”关键时刻,第一时间送达!作者丨NIELS译者丨陈冬【编者按】尽管 iPhone X 采用的全面屏设计方案已经是当下技术的最优解,但其“刘海”却依然引起了众多吐槽,在无法达到真正全面屏之下,为何苹果会选择使用非主流的“刘海”设计,而不是主流的“窄额头”?这是一个仍然在讨论的问题。对于众多的 iOS 工程师及设计师而言,为 iPhone X 进行屏幕适配以及交互设计才是重中之重。对此,本文作者 —— ...

    2018-02-01
  • 程序员如何应对「给我弄个网站吧」的请求?

    点击上方“程序人生”,选择“置顶公众号”第一时间关注程序猿(媛)身边的故事编者按:昨天,我们在这篇《“你是程序员,帮我修个电脑吧” “不会,滚”》的文章中,发起了个投票。结果发现三个选项中,打败「修电脑」,位居榜首最令大家“抓狂”的选项,竟然是「我想要创业,你帮我建个网站吧,就像淘宝那样的,一定很好做吧」。一般,遇到此类情况,我们可以选择两种处理方式:第一种,直怼式。例如:“我给你1000块,你帮我做个淘宝,就和马云的淘宝一样的” “你...

    2018-04-08
  • 深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12
  • 谈谈用户体验与风控的平衡性

    先翻翻旧文从反反鸡汤谈过犹不及从受众目标,再谈过犹不及其实今天是这两篇的引申。之前我说过很多创业者容易犯的错误,过度理想主义,把用户当作好人,我说过一个关键词,不能说坏用户一定很多,可能坏用户真的只有1%,但很可能一个坏用户的破坏,可以抵销一百个好用户的创造,这是很常见的创业的困境,因为很小的疏忽,导致极大的损失。所以,一些毫无经验的创业者,要有这方面的意识,至少思想上要有风控这个概念,要知道如何规避和防范坏的事情,不要过于理想主义。但...

    微信热点 2018-05-04
  • 清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28
  • 【免费试听】成都UI-UE交互设计免费试听课了解一下!

    德阳中公教育官方微信长按关注,了解更多资讯。周一见!周一见!周一见!没错下周一!成都UI-UE交互设计免费试听课开课啦!与其宅在家里浪费时间不如来体验一下UI设计前五天免费试学4月16日--4月20号机会有限,先到先到得哦!UI-UE交互设计是什么?UI-UE交互设计就是指对产品的人机交互、操作逻辑、界面美观的整体设计!为什么要学习UI-UE?人才需求旺盛,成IT行业职位新宠人才缺口大,行业势头发展迅猛虽然UI这么好,但是不仅对人才的需...

    2018-04-11
  • 用户体验才是核心竞争力 英雄互娱《一起来冒险》趣味至上

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)近几年来,随着手游用户增长速度趋于平稳,手游数量的增多,人口红利的优势已经消失殆尽,如何曝光率成为困扰所有开发商的共同难题。在买量成本水涨船高的情况下,靠忠实玩家形成的用户口碑形成病毒传播则成了很多游戏的“制胜法宝”。经过了几年的发展之后,玩家们越来越懂游戏,千篇一律的复刻已经无法提起人们的兴趣,人们有了自己对于游戏的追求,这也是市场上越来越多细分品类游戏成功的主要原因,比如《纪念碑...

    2018-01-30
  • 用户体验给一百分的应用啊!

    “没想到的是,装了这个桌面应用,可以让手机好玩那么多。”这篇推送,小7就个人使用感受来跟你们聊聊,这个桌面应用给我带来的非一般感受吧。这款桌面应用给我的印象就是:它在尽可能地给你的生活做减法。一、将联系人直接生成桌面图标,点击就能直接拨号,这比将数字键设置为紧要联系人来得更加方便快捷吧。我这部手机大部分都用于工作联系,联系得最多的是我的拍档,这里我可以直接她的联系方式设置为图标,将图标放置于第一页,非常方便。二、底部导航栏可以上滑,惊喜...

    2018-03-24
  • 澳洲留学交互设计专业名校有你的菜吗?

    出国留学,去往澳洲留学,澳洲留学交互设计专业名校有你的菜吗?一、澳洲留学交互设计专业的就业前景交互设计师在一些公司的职位列表中通常又被称为用户界面设计师、可用性设计师、用户体验设计师等。例如在淘宝ued团队内部把交互设计师的岗位命名为交互设计工程师,这意味着交互设计师职业定位朝着一专多能的复合型人才方向发展。交互设计的学生在中国的就业领域一般是:大型外企、通讯类企业、手机设计公司、专业的设计公司等。二、开设交互设计专业的澳洲名校1莫纳什...

    2018-04-24
  • Axure RP 8 入门手册 – 第7章

    第7章母版管理第1节母版简介第2节添加/编辑/删除第3节添加母版到页面中第4节从页面中移除母版第5节拖放行为第6节自定义触发事件第7章母版管理第1节母版简介圆儿:小楼欧巴!小楼:圆圆好!圆儿:老师,我就一个圆!小楼:可是我喜欢两个圆啊!圆儿:老师…你正经一点儿好不好嘛!小楼:呃……你想问什么?圆儿:我想问,在做很多个页面的时候,如果每个页面中都有相同的内容,有没有办法不用每个页面都做一次?当然,我知道能够复制粘贴,但是,如果将来再发生改...

    2018-04-25