AXure交互设计指南

一、什么是原型

原型是用线条和图形描绘出的产品框架，原型设计对产品的各版块、界面和元素进行的合理性排序过程，需要综合考虑产品目标、功能需求场景、用户体验等因素。

你了解线框图和原型的过去、现在与将来吗？https://www.uisdc.com/wireframing-prototyping-history ，学习此网站知识，能够帮助我们对未来原型的发展趋势有一个好的预期。

二、原型的重要性

产品方案输出流程

原型设计在整个产品方案输出流程中处于最重要的位置，有着承上启下的作用。原型设计之前需求或是功能信息都相对抽象，原型设计的过程就是将抽象信息转化为具象信息的过程，之后的产品需求文档（PRD）是对原型设计中的版块、界面、元素及它们之间的执行逻辑进行描述和说明。原型最大的好处在于，它可以有效地避免重要元素被忽略，也能够阻止你作出不准确不合理的假设。一个可用可交互的原型可以帮助开发和设计人员从不同的维度上来规划和设计产品，是帮助网站与APP设计最终完成标准化和系统化的最好手段。所以说，原型设计的重要性无可替代。

读完以上内容，但是不防在读读该链接的，看看你是否了解什么才是正在的原型：https://www.uisdc.com/importance-of-prototyping

三、原型的特征

1、沟通思路：原型是需求和功能的具象化表达，可以辅助产品经理与需求方、交互、UI和技术的沟通产品思路，看到网站或者APP发布之后会是怎么样运作的，看看它能否带来预期中的体验。

2、可参考性：一个可交互的原型基本上能够像最终完成的产品那样运行，你可以对它进行操作，原型则会给予相应的反馈，使用者可以随之明白它的运作方式，寻求解决特定问题的方案。

3、节约成本：当设计和开发流程中有了原型之后，将会节省很多时间，降低成本。原型相较于UI稿来说修改更方便，而且能提高产品经理的功能设计在评审阶段返工的工作效率。

4、设计原则：原型的目标在于清楚的表达产品的设计理念和功能的执行逻辑，能够达到这个目标的原型都是合格的，在设计的过程中不要为过份的追求“高保真”而浪费不必要的时间，在时间和能力有限的情况下，尽可能做到高保证可以帮助我们尽可能的完善功能细节。

四、线框图、原型和视觉稿的区别

（一）线框图（Wireframe）

主要特点：

1、呈现主体信息群

2、勾勒出结构和布局

3、用户交互界面的主视觉和描述

详细解释：

线框图是一种低保真的静态图形，它勾勒出布局轮廓，但是缺少细节。可以把线框图理解为设计图的骨干与核心，它承载着最终产品所有重要的部分。绘制线框图，重点是「快」，可以使用手绘稿或用相关原型工具进行制作。

何时使用：

线框图主要用于产品前期头脑风暴或需求沟通讨论阶段，非正式场合的团队内部交流等。用来激发思考和讨论，收集需求反馈等。

（二）原型（Prototyping）

主要特点：

1、包含完整的产品功能与交互流程

2、能够模拟最终产品的功能和交互

3、用于产品开发前期进行用户体验测试

详细解释（重点，尽可能模拟高保真）：

原型应该尽可能模拟最终产品，交互则应该精心模块化，尽量在体验上和最终产品保持一致。但是原型背后的逻辑不要依赖交互形式。减少制作原型的成本，加快开发速度。

何时使用：

原型常用于做潜在用户测试。在正式介入开发阶段前，以最接近最终产品的形式考量产品可用性。原型的直观和易懂倒使它成为最高效的设计文档。

（三）视觉稿（Mockup）

主要特点：

1、表达信息框架，静态演示内容和功能

2、帮助团队成员以视觉的角度审阅项目

详细解释：

视觉稿是高保真的静态设计图。通常来说，视觉稿就是视觉设计的草稿或终稿。在视觉稿定稿前，应与团队成员进行多方沟通和确认，以免造成沟通不足造成后期的返工。

何时使用：

视觉稿主要用于开发阶段收集用户反馈，同时帮助团队成员以视觉的角度审阅项目。

（四）总结对比

五、交互原型设计工具介绍

InVision是一款设计原型交互的工具。使用InVision可以很好的实现团队之间的协作，也便于收集反馈意见。它可以让你将静态的网页，移动app设计图快速的变成可以点击，具有交互效果的动态原型。让你的设计“活”起来。

墨刀是一款最好用ios原型设计工具，它图形处理功能相当丰富，能快速构建移动应用原型与线框图，云端保存，实时手机预览，多种手势及页面切换特效支持，全球114个国家超过10万名设计师的选择，并且墨刀(MockingBot)对开放项目永久免费！使用墨刀可以非常方便的创建页面间链接，墨刀独创的拖拽链接方式，让页面间的链接关系清晰呈现眼前，要创建页面间链接，只需要选中要链接的组件，然后拖动组件右侧的小圆圈到目标页面就可以了。

Axure RP是美国Axure Software Solution公司旗舰产品，是一款专业的原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。这是一款非常专业的工具, 但是学习成本也非常高。如果你是一位专业的交互设计师，并且需要设计复杂的交互，你可以使用这款工具。

以上三款交互原型设计工具，个人比较推荐近年热门的来的磨刀和AXURE。

六、AXURE用户设计分辨率推荐

七、AXURE相关实用技巧整理

★ 需要重复使用的元件，建议创建成母版使用。如果修改了母版，所以页面中的母版元件将会被同步修改；

★ 使用外部元件可以提升原型设计的效率，建议将常用的元件整理成一套自用的元件库；

★ 建议使用组合功能对多个元件进行整合，方便移动和调整尺寸，组合支持部分常用交互和属性设置；

★ 对于隐藏的元件，在需要显示时注意添加一条置于顶层的用例，以防止元件层级太低被覆盖；

★ 对于一些不需要移动的元件可以将其锁定，以免移动其他元件时将不需要移动的移动了；

★ 使用单选按钮时将单选按钮设置为选项组，选项组名称相同的单选项中只能有一个被选中；

★ Axure中有自带一些形状的如箭头、三角形、圆形等，在右侧的“元件属性与样式”中可以进行设置；

★ 交互样式的使用，在元件的右键属性中有交互样式，可以设置选中、悬浮时的效果；

★ “元件提示”可实现鼠标移入时显示元件提示的内容；

★ 文本输入框的提示效果：“在输入框中显示提示内容，获取焦点时隐藏输入内容”可通过“提示文字功能”实现；

★ 动态面板如果没有勾选了“自动调整为内容尺寸”则需要设置显示滚动条，不然超过动态面板尺寸的将显示不全；

★ 动态面板的禁用和选中，将动态面板设置为选中、取消选中、切换选中或禁用则动态面板中的元件都会处于选中、取消选中、切换选中状态或禁用。利用这个特性可以做复选框的切换选中效果；

★ 同一个元件上可以添加多个交互用例，如果一个按纽或动作会触发多种不同交互状态，例如：用户多状态判断提示等。建议将多种交互状态用例同时加在对应的按纽和动作上，并用对应的交互状态对按纽或动作命名，

★ 同一个元件上的多个交互用例执行是有先后顺序的，所以有时候如果你的语句设置都没有问题，但是怎么也出现不了应有的效果，请检查一下你的语句防止是否有问题。

★ Axure支持对图片进行裁剪、拼接，同时你也可以将元件转化为图片。

★ 动态面板点击时显示，再次点击时隐藏的效果实现方法是：切换动态面板的可见性；

★ 动态面板的“固定到浏览器”属性可以将动态面板始终固定在页面中某个位置；

★ 复制元件后注意修改元件说明；

★ 按住Ctrl+拖动可以平行复制元件；

★ 按住Ctrl+上下左右箭头可以快速移动元件；

★ 使用辅助线可以帮助你快速的进行界面的布局；

★ 可以在右下角的“元件管理”处控制元件的可见状态，如果元件不可见时，全选整个界面并复制是选择不上的不可见元件的，粘贴后发现会丢失，所以要复制整个界面时需要保证元件处于可见状态，才不会丢元件；

★ 预览时页面在浏览器中居中的方法是：在页面样式中设置页面排列。但是设置了页面排列后预览时发现仍没有在浏览器中居中，则可能的原因是：原型中有元件的宽度超过了浏览器的宽度；

★ 内联框架设置默认页面的方法为：双击内联框会弹出界面链接设置或在内联框中右键点击“框架目标页面”；

★ 打开生成的Html文件中的start.html可以看到站点导航，点击站点导航处的小箭头后可以将有交互事件的元件进行标识；

★ 如果需要将多个项目进行整合时，采用直接导入项目而不是复制界面，导入时可以导入页面、母版、变量等所有相关内容，而复制只能复制界面内容不能复制变量，可能会导致效果丢失；

★ 对于添加打开链接的用例，如果选择在新窗口新标签中打开后，新窗口中将不显示站点地图；

★ 如果在原型设计过程中软件或系统统意外崩溃，而文件又没有来得及保存的话，可以通过文件-从备份中恢复找回最新的版本，在自动恢复设置中可以设置自动备份的时长；

★ 把当前的页面转化为图片。这个功��可以解决你原型中文字的字体或者大小或者换行等在浏览器中预览的一系列问题；

★ 在页面属性中设置草图效果可以生成手绘风格的线框图效果；

★ 有时我们需要把整个站点的结构用树形图呈现出来，Axure为此提供了一个快捷的方法：在页面区域对准你希望生成树形图的主干点右键，选择 “生成流程图”，就能自动生成图表形式的站点地图。点击图表上的每个控件，就会去到对应的页面；

★ 在发布时可以在发布设置中自定义Logo和标题，在生成的原型文件导航中就能显示添加的Logo和标题；

★ Axure支持原型导入和合并功能，在生成时可以选择全部和部分生成；

★ 许多初学者总是很随意地去添加Axure的文本款控件。而当你框架布局完成后，就会产生过多的文本款需要推拽到框架内。这样的文本框累赘会浪费你许多时间。而且对于同个框架内的文本对象会增加很多，也就是说会使得设计过程复杂化。

★ 不要使用动态面板做简单的交互。动态面板是个强大的工具，可以用来设计任何需要多状态显示的页面内容。但也很容易增加复杂性，最好不要依赖到复杂的动态面板。

★ 养成为组件和动态面板命名的习惯，可以节省很多原型的维护时间成本；

AXure交互设计指南相关推荐

firebird 3.0 开发者指南_手机端空间级AR交互设计指南
AR改变了世界的显示方式,给人们带来认知和交互的全新体验. 人们不仅可以通过触屏.语音,而是可以使用手势.肢体等多种模态与机器(如手机.AR眼镜等)进行交互.而机器的输出更是现实和虚拟的叠加融合. A ...
《怦然心动——情感化交互设计指南（修订版）》一第1章为什么要让交互诱人...
本节书摘来自异步社区<怦然心动--情感化交互设计指南(修订版)>一书中的第1章,第1.1节,作者 [美]Stephen P. Anderson,更多章节内容可以访问云栖社区"异步 ...
Axure 交互设计（1）
网页交互原稿制作流程 1.利用Photoshop.九点切图等软件将网页图片进行切片: 2.利用Markman测量标注工具或Photoshop等软件查看图片文本等参考数据: 3.在Axure中进行排版制 ...
交互设计指南 iphone_交互设计：角色创建指南
让我们一起做一个心理实验. 假设您要为客户设计产品或网站,而您正处于流程的开始. 你在想什么? 您是要弄清楚客户喜欢什么 ,一次融入自己的创意,还是想像一下将使用您设计的人? 研究人员最近开始赞扬后者 ...
【读书札记】《怦然心动——情感化交互设计指南》
近期频频有曾经的同学,朋友的朋友托我帮忙给他们做一个站点.我想一个站点嘛,他们要求的也不高,就是简简单单给他们布个局,搞点动态效果,炫一点即可了. 但是随着不断的构思,我越发的感到做一个好的站点,用户 ...
交互设计书单--西南交大课程推荐
学堂在线--西南交通大学,李芳宇老师主讲的<交互设计>课程推荐书单.喜欢交互的小伙伴可以一起交流,我会将自己的笔记整理到自己的专栏. 本人计算机.英语双学士,专注大数据领域技术, 以后会 ...
交互设计专业书籍推荐
曾经随着用户体验概念的不断传入,每一家大型的互联网公司都变得愈发重视自己的设计团队,开始培养独特的创新思想.这些雄心勃勃的计划都需要人才来支撑.然而,中国大学教育的体制长期保持"你懂的&qu ...
交互设计专业书籍推荐（内有部分书籍电子版下载）
整理前言: 什么书籍能帮助交互设计师更好学习交互设计,提升实战能力呢?曾经也读过很多关于交互设计与用户体验的国外书籍,但想针对实战的书籍确实比较少.交互设计是设计学科的一个分支,设计的最高境界为禅意最 ...
移动端超高品质的Axure UI设计/交互设计组件库，几乎涵盖了所有的组件
这套超高品质的Axure UI设计/交互设计组件库,无论是APP原型设计还是小程序设计,都能满足您日常设计所需,关键是能让交互设计稿美美哒,简直是提高工作效率必备文档库,实属移动端设计组件中的顶级资源 ...
写给交互设计新手的信息架构全方位指南
目录什么是信息架构? 通用方法日常工作可以关注的大神常用工具相关书籍什么是信息架构? 信息架构是一个比众多其他领域更难定义的领域.内容策划由内容策划师来完成,交互设计由设计师来完成,而信息 ...

AXure交互设计指南

AXure交互设计指南相关推荐

最新文章

热门文章