设计指南

交互原型设计指南能让你快速认识和了解什么是交互原型,以及对各类常用交互原型设计工具介绍。其中还整理了主流的交互原型设计Axure的各类使用实践总结和经验分享,同时包含大量交互实例演示及应用,还有超多实用工具和素材分享,是在原型设计方面入门和进阶的最佳指导指南。

展示图片:点击下载  /  查看演示

一、什么是原型

    原型是用线条和图形描绘出的产品框架

    原型设计对产品的各版块、界面和元素进行的合理性排序过程,需要综合考虑产品目标、功能需求场景、用户体验等因素。

    • 延伸阅读:你了解线框图和原型的过去、现在与将来吗?

二、原型的重要性

    产品方案输出流程:

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

    • 延伸阅读:等等,原型设计的重要性你真的明白么?

三、原型的特征

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

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

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

原型的目标在于清楚的表达产品的设计理念和功能的执行逻辑,能够达到这个目标的原型都是合格的,在设计的过程中不要为过份的追求“高保真”而浪费不必要的时间。

    • 延伸阅读:阿里干货!如何培养正确的原型设计思维?

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

1)线框图(Wireframe)

主要特点:

  • 1、呈现主体信息群
  • 2、勾勒出结构和布局
  • 3、用户交互界面的主视觉和描述

详细解释:

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

何时使用:

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

主要特点:

  • 1、包含完整的产品功能与交互流程
  • 2、能够模拟最终产品的功能和交互
  • 3、用于产品开发前期进行用户体验测试

详细解释:

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

何时使用:

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

3)视觉稿(Mockup)

主要特点:

  • 1、表达信息框架,静态演示内容和功能
  • 2、帮助团队成员以视觉的角度审阅项目

详细解释:

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

何时使用:

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

4)总结对比

    • 延伸阅读:涨姿势!聊聊线框图、原型和视觉稿的区别

    • 延伸阅读:你知道线框图和原型有啥区别吗?

    • 延伸阅读:30张设计师的手绘网页草图(原型图/框架图)

五、常用交互元素及组件

    • 延伸阅读:Web前后端交互原型通用元件库

六、轻量线框图设计工具介绍

1)Wireframe

  • 平台:Web
  • 适用:网页和移动端
  • 难度:
  • 网址:https://wireframe.cc/
  • WireFrame.cc是国外的在线线框图设计工具,是一款极简主义的线框图、原型图绘制的应用,不仅易用而且界面漂亮。操作简单、直观,输出物也非常吸引人。一般而言,不使用颜色会让读者着重于思考页面的设计逻辑而不是页面的设计美感。重点在于产品布局的构建,交互的完成即可。所以wireframe 一般线框图和原型图都是黑、灰和白三种颜色为好就行。

2)Moqups

  • 平台:Web
  • 适用:网页和移动端
  • 难度:★★★
  • 网址:https://moqups.com
  • 是一个非常好的、免费的HTML5应用,通过它可以创建可爱朴素的线框图、实体模型和UI概念。该程序使用起来非常简单,并且有内置的模板可以直接使用(模板包括单选按钮、链接、图像占位符、文本框以及滑块等)。它还提供了iPhone和iPad模板,以及iOS相关的按钮、提示框、picker、菜单、开关以及键盘等。你可以设置网格的尺寸,并预览和分享你的线框图。Moqups提供了一个很有用的功能就是对齐网格,可以使对象精准对齐。

3)Balsamiq

  • 平台:Mac/Ios
  • 适用:网页和移动端
  • 难度:
  • 网址:https://balsamiq.com
  • Balsamiq Mockups是产品设计师绘制线框图或产品原型界面的利器。在产品设计的需求阶段,低保真的线框图或者草图设计介于产品流程设计与高保真DEMO设计之间,在Balsamiq Mockups出现之前,流程图可以使用Visio,高保真DEMO可以使用Axure,但我们并没有好用的草图设计工具;在产品设计管理中,我们通常在产品的业务流程和数据流转已经相当明确时才开始进一步考虑产品的结构层和框架层,虽然此时纸、笔、白板都是非常简单方便的交流工具,但是他们的最大劣势就是——很难将有价值的原型保存下来。Balsamiq Mockups的出现完美的解决了这个问题。

4)MockFlow

  • 平台:Web
  • 适用:网页和移动端
  • 难度:★★
  • 网址:https://mockflow.com
  • MockFlow是一款为传统软件以及富互联网应用软件制作产品原型的在线工具,友好而强大。MockFlow是一款类似于Axure的产品原型制作工具,唯一不同的是,它是完全基于Web浏览视窗的产品。MockFlow提供了与Balsamiq Mockups基本相似的功能,甚至更丰富的组件。虽然其元件定制化不够强大,但其提供的元件库默认样式却非常适合用来做商业产品原型的搭建。MockFlow有一个让用户爱不释手的功能是模板,可以设置基于任何页面的模板来进行新的页面设计。

5)PowerMockup

  • 平台:Windows/Mac
  • 适用:网页和移动端
  • 难度:★★
  • 网址:https://www.powermockup.com/
  • 如果你想把Microsoft PowerPoint转换成一个线框图工具,这个附加工具将会相当有用。一个新的面板将会添加到PP窗口中,它使你可以使用展示在面板中的一些线框图元素和图标。可以通过拖拽把它加到幻灯片中。PowerMockup和所有最新版的Microsoft Office兼容,包括Office 2013。你可以花费$60购买该线框图工具,供单用户使用。

6)Cacoo

  • 平台:Windows/Mac
  • 适用:网页和移动端
  • 难度:★★
  • 网址:https://www.powermockup.com/
  • 如果你想把Microsoft PowerPoint转换成一个线框图工具,这个附加工具将会相当有用。一个新的面板将会添加到PP窗口中,它使你可以使用展示在面板中的一些线框图元素和图标。可以通过拖拽把它加到幻灯片中。PowerMockup和所有最新版的Microsoft Office兼容,包括Office 2013。你可以花费$60购买该线框图工具,供单用户使用。

    • 延伸阅读:20款优秀的移动产品原型和线框图设计工具

    • 延伸阅读:30个非常有用的线框图模板和线框图工具

七、Axure软件基本介绍

1)Axure / 元件类型介绍

2)Axure/常用功能介绍

3)Axure/常用元素实例

4)Axure/动态交互实例

5)Axure/常用设计分辨率推荐

特别提示:

       在发布移动设备原型时,如果需要在移动设备上查看原型,请在发布/生成html/移动设备进行相关配置,需要将“包含视口标签”选项勾选上,其它项请根据需要设置。

6)Axure / 创建自己的元件库

1、元件库作用

  • 多人协作时使用同一元件库,可以保证风格一致
  • 可以引入外部元件,方便使用且能提升设计效率

2、元件库的创建及使用

  • 在元件处可以创建元件库和载入元件库
  • 页面名称为元件名称
  • 文件名称为元件组名称

3、将元件库放到Axure的Library目录下并载入后,下次打开Axure会自动加载,放置到其他目录下需要每次手动载入才可以。

    • 特别提示:

       在发布移动设备原型时,如果需要在移动设备上查看原型,请在发布/生成html/移动设备进行相关配置,需要将“包含视口标签”选项勾选上,其它项请根据需要设置。【注:axure9此提示忽略】

7)Axure / 相关实用技巧整理

  • ★  需要重复使用的元件,建议创建成母版使用。如果修改了母版,所以页面中的母版元件将会被同步修改;
  • ★  使用外部元件可以提升原型设计的效率,建议将常用的元件整理成一套自用的元件库;
  • ★  建议使用组合功能对多个元件进行整合,方便移动和调整尺寸,组合支持部分常用交互和属性设置;
  • ★  对于隐藏的元件,在需要显示时注意添加一条置于顶层的用例,以防止元件层级太低被覆盖;
  • ★  对于一些不需要移动的元件可以将其锁定,以免移动其他元件时将不需要移动的移动了;
  • ★  使用单选按钮时将单选按钮设置为选项组,选项组名称相同的单选项中只能有一个被选中;
  • ★  Axure中有自带一些形状的如箭头、三角形、圆形等,在右侧的“元件属性与样式”中可以进行设置;
  • ★  交互样式的使用,在元件的右键属性中有交互样式,可以设置选中、悬浮时的效果;
  • ★  “元件提示”可实现鼠标移入时显示元件提示的内容;
  • ★  文本输入框的提示效果:“在输入框中显示提示内容,获取焦点时隐藏输入内容”可通过“提示文字功能”实现;
  • ★  动态面板如果没有勾选了“自动调整为内容尺寸”则需要设置显示滚动条,不然超过动态面板尺寸的将显示不全;
  • ★  动态面板的禁用和选中,将动态面板设置为选中、取消选中、切换选中或禁用则动态面板中的元件都会处于选中、取消选中、切换选中状态或禁用。利用这个特性可以做复选框的切换选中效果;
  • ★  同一个元件上可以添加多个交互用例,如果一个按纽或动作会触发多种不同交互状态,例如:用户多状态判断提示等。建议将多种交互状态用例同时加在对应的按纽和动作上,并用对应的交互状态对按纽或动作命名,
  • ★  同一个元件上的多个交互用例执行是有先后顺序的,所以有时候如果你的语句设置都没有问题,但是怎么也出现不了应有的效果,请检查一下你的语句防止是否有问题。
  • ★  Axure支持对图片进行裁剪、拼接,同时你也可以将元件转化为图片。
  • ★  动态面板点击时显示,再次点击时隐藏的效果实现方法是:切换动态面板的可见性;
  • ★  动态面板的“固定到浏览器”属性可以将动态面板始终固定在页面中某个位置;
  • ★  复制元件后注意修改元件说明;
  • ★  按住Ctrl+拖动可以平行复制元件;
  • ★  按住Ctrl+上下左右箭头可以快速移动元件;
  • ★  使用辅助线可以帮助你快速的进行界面的布局;
  • ★  可以在右下角的“元件管理”处控制元件的可见状态,如果元件不可见时,全选整个界面并复制是选择不上的不可见元件的,粘贴后发现会丢失,所以要复制整个界面时需要保证元件处于可见状态,才不会丢元件;
  • ★  预览时页面在浏览器中居中的方法是:在页面样式中设置页面排列。但是设置了页面排列后预览时发现仍没有在浏览器中居中,则可能的原因是:原型中有元件的宽度超过了浏览器的宽度;
  • ★ 内联框架设置默认页面的方法为:双击内联框会弹出界面链接设置或在内联框中右键点击“框架目标页面”;
  • ★  打开生成的Html文件中的start.html可以看到站点导航,点击站点导航处的小箭头后可以将有交互事件的元件进行标识;
  • ★  如果需要将多个项目进行整合时,采用直接导入项目而不是复制界面,导入时可以导入页面、母版、变量等所有相关内容,而复制只能复制界面内容不能复制变量,可能会导致效果丢失;
  • ★  对于添加打开链接的用例,如果选择在新窗口新标签中打开后,新窗口中将不显示站点地图;
  • ★  如果在原型设计过程中软件或系统统意外崩溃,而文件又没有来得及保存的话,可以通过文件-从备份中恢复找回最新的版本,在自动恢复设置中可以设置自动备份的时长;
  • ★  把当前的页面转化为图片。这个功能可以解决你原型中文字的字体或者大小或者换行等在浏览器中预览的一系列问题;
  • ★  在页面属性中设置草图效果可以生成手绘风格的线框图效果;
  • ★  有时我们需要把整个站点的结构用树形图呈现出来,Axure为此提供了一个快捷的方法:在页面区域对准你希望生成树形图的主干点右键,选择 “生成流程 图”,就能自动生成图表形式的站点地图。点击图表上的每个控件,就会去到对应的页面;
  • ★  在发布时可以在发布设置中自定义Logo和标题,在生成的原型文件导航中就能显示添加的Logo和标题;
  • ★  Axure支持原型导入和合并功能,在生成时可以选择全部和部分生成;
  • ★  许多初学者总是很随意地去添加Axure的文本款控件。而当你框架布局完成后,就会产生过多的文本款需要推拽到框架内。这样的文本框累赘会浪费你许多时间。而且对于同个框架内的文本对象会增加很多,也就是说会使得设计过程复杂化。
  • ★  不要使用动态面板做简单的交互。动态面板是个强大的工具,可以用来设计任何需要多状态显示的页面内容。但也很容易增加复杂性,最好不要依赖到复杂的动态面板。
  • ★  养成为组件和动态面板命名的习惯,可以节省很多原型的维护时间成本;

8)Axure / 原型设计经验总结

  • 了解相关平台的特性和规范
  • 学习总结用户体验设计经验
  • 了解最新的视觉和交互趋势
  • 完整清晰的传达功能及交互过程
  • 表达清楚的视觉层级逻辑
  • 避免纠结复杂的交互效果实现
  • 避免纠结复杂的交互效果实现
  • 用页面导航结构去构建信息架构
  • 遵循统一的页面命名规范标准尽量
  • 标记第一屏的高度
  • 严格遵守栅格规范
  • 提升可读性,保持合理的布局及间距
  • 不要使用截图

八、Axure / 项目中的注意事项

  • 养成保存多个版本的习惯
  • 原型的发布、分享、查看
  • 不同阶段输出不同类型的原型
  • 输出需求文档的一些建议

暂无评论

暂无评论...