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

相关推荐

  • 如何加入AxureRP模板库会员

    点击边框调出视频工具条会员简介加入AxureRP原型库会员后可以获取社群中的全部元件库及付费原型模板(后续更新免费),节省您画原型70%的时间,聚焦业务逻辑和行业积累才是根本。通过我们的会员群能第一时间获得产品及原型设计方面的解答帮助,同时还有仅对会员开放的私有干货分享不限于产品课程、PRD文档和产品书库等诸多福利。社群服务,量化才有价值1.每两个月提供一份全新的AxureRP项目原型模板,by 三杠;2.免费下载社群中已有的所有干货资...

    2018-03-24
  • 用户体验:网页设计中错误提示的五种设计方法

    每个系统软件在运行的过程中都会出错,可能是用户操作造成的也可能是系统错误。基于这两种情况,如何正确的提示错误信息就显得尤为重要,它直接决定了用户体验的好与坏。一个好的错误提示必备的3条重要法则:清晰地文本提示语放置在正确的位置良好的视觉设计清晰的文本信息1. 错误提示信息应该简明易懂提示信息应该明确的表明发生了什么错误、发生的原因以及解决方法。将你的错误提示信息看作是一次对话,跟用户说人话。确保你的文案是礼貌性的、易于理解的、友好的并且...

    2018-04-07
  • 交互设计 | UX设计想法表达太难?——试试故事版StoryBoard

    UX设计中一些针对用户调研的方法Workshop、Observation、Interview调研结束后需要将调研结果整合反馈单纯以文字去呈现无法将设计信息最大化故事板、线框图等视觉化的信息传达方式直观准确的解决设计问题下面小编将为同学们详细介绍故事板在交互设计作品集创作中的应用及优点,帮助大家在设计过程中能更高效的完成设计想法的交流和沟通。故事板的应用故事板可看作代表镜头的插画,同学们在设计时需要把图像排列在一起,使自己的设计能够故事化...

    2018-03-17
  • 叶云燕:不懂用户体验,没有互联网思维的代理人,迟早会被淘汰!

    第1937期|编发/保险论坛互联网时代,到处都在谈如何用互联网思维做生意。有人用互联网思维卖奶茶,销售额翻倍;有人用互联网思维开理发店,已获得数千万融资;有人用互联网思维卖衣服,年利润过亿;而当我第一次提出要用互联网思维卖保险时,很多人都感到茫然,认为这不过是赶时髦,蹭热点。保险代理人的新机遇事实上,互联网时代的到来,对保险代理人来说是一个前所未有的机遇,它让代理人的品牌形象更加丰满,展业渠道更加多样化。更重要的是,互联网思维的核心是以...

    2018-04-25
  • 酱课程丨交互设计第③期 · 原来交互设计师是这样工作的,和你想的一样吗?

    交互课程第三期来啦!查看前两期点击这里——交互设计第①期 · 这个老师只用一张图,就解决了所有设计专业都会遇到的问题!交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!通过前两期课程,同学们了解了双钻图——一套完整的设计流程指导框架、定义了什么是交互设计、它所涉及到的领域以及与交互设计相关的六大Job titles。现在大家对交互设计已经有了一个大致的理解,设计流程框架也是现成的,下面就要进...

    2018-05-04
  • 【交互体验】让你事半功倍的交互体验自查清单

    点击上方“蓝字”可以订阅哦!小编推荐:刚画完的原型自我感觉良好,当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景,那么这篇文章对你绝对有用。事不宜迟,请看下文。体验清单起因去年底看朋友出国前用‘穷游清单’给自己列清单,她说列的清单可以帮她在出行前检查一下是否有遗漏东西,避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生,是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。在平时设计...

    2018-01-30
  • 交互设计与服务设计视角下,谁才是用户,什么又是产品?

    服务设计,是2017-2018比较火热的一个专业了,相比于交互设计或工业设计,服务设计更关注与利益相关者之间的关系。今年的Aalto New Media 专业的申请中,有明确要求需要根据两篇文章的读后感写一篇Essay(1),其中一篇是“How to Fix Facebook—Before It Fixes Us(2)”,深入阅读之后,有一个明确的观点想和大家分享一下。之前从交互式设计角度或者用户研究角度对于 Facebook 的分析文...

    2018-05-02
  • UED沉思录

    Q:设计前期至输出时常见问题及解决思路以下分享,全是血淋淋的教训积累与总结。当然也是这段时间在AJK优秀Leader的带领下成长出来的。Q:设计师存在的表象问题?设计方案缺乏理论系统化因需求而丧失设计原则页面结构较为混乱,映射设计思路不清晰页面设计细节打磨程度较低页面制作时参数命名不严谨输出适配的兼容欠考虑Q:设计的根本目的是什么?解决问题Q:设计需要具备哪些能力?洞察力「发现身边的好设计」分析力「分析需求、解决痛点的思路」匠人精神「设...

    2018-03-15
  • 中国交互设计“教父”辛向阳老师首次线上分享会来啦

    应集创堂的邀请,中国交互设计“教父”辛向阳老师将在4月20日为大家带来首次线上分享会!辛老师是卡耐基梅隆大学设计哲学博士,是目前很少数在美国获得设计哲学博士、并首个回到中国内地的华人之一。有着跨多个学科的教育和工作背景,包括机械、建筑、平面设计、油画、交互设计以及艺术史。同时,辛老师还是IXDC(交互设计国际大会)大会主席,提出了“交互设计五要素”和“行为逻辑”等交互设计领域的重要理论和方法,并在香港理工大学成功创办了中国首个交互设计专...

    2018-04-17
  • 创先争优|张迪:创业艰难,但梦想会让你永远保有对生活的热爱

    争先创优为全面贯彻党的教育方针,鼓励研究生勤奋学习、自强不息、积极实践、勇于创新,促进优良校风学风建设,培养德、智、体全面发展的高层次复合型人才,学校结合实际,研工部于2017年10月-11月组织开展了重庆大学2016至2017学年度研究生“争先创优”评选。为响应学校号召,UMD研究生网络文化工作室根据工作安排,特推出重庆大学“争先创优”优秀研究生人物志系列活动,从中挑选一批先进研究生代表,通过微博、微信、网站、电子显示屏等网络宣传平台...

    2018-03-01