有没有纠结过在设计产品的过程中是使用低保真原型还是高保真原型?两者有哪些区别?分别在什么时候使用最合适?

在这篇文章中,和大家一起讨论低保真原型和高保真原型之间的主要差异,最恰当的使用时机以及两种原型的案例分析。

 1.什么是低保真原型?

低保真原型是在纸上画的的草图或原型,也可以是在电脑上设计的产品页面。低保真原型的作用是表现产品中最重要的用户流程和功能所涉及的页面关系。

在设计低保真前,我们会先进行用户研究并收集一系列产品需求,这些工作做完后,接下来就要考虑产品的功能。

基本功能和信息架构

在设计的早期阶段,我们都不希望陷入页面版式、图像和渐变之类的细节中,相反我们需要展示的是产品的核心功能、信息架构以及页面间的流程。

我们首先要概述页面的一些基本情况,这些设计可以帮助用户完成主要目标并满足每个功能的基本要求。

基本的布局和元素

除了信息架构和流程外,低保真还有助于定义产品UI的基本布局,例如确定页面元素和各部件的尺寸、位置以及页面中留白的使用情况。

 2.什么是高保真原型?

高保真原型展示的细节比低保真更深入细致,高保真原型是尽可能接近最终产品的样式。高保真原型具有与低保真相同的流程和信息架构,也会展示更多的细节和页面关系。

进阶的页面设计

高保真原型的目标是对最终产品的讨论,包括在最终产品中看到的所有内容,例如产品的颜色、渐变、阴影、图形以及排版等。

进阶的互动原型和功能

高保真原型会近一步展示产品的动效情况,比简单点击原型更进阶,例如展示页面的滚动效果、手风琴菜单、下拉列表、拖放等动效。

高保真原型还可能包含页面上移动的图形和动画,或者用户可以操作的元素,还包含例如错误消息和表单设计的验证等,以及在其他各种页面尺寸上存储和再现数据的能力。

3.什么时候使用低保真原型?

头脑风暴

低保真原型适合快速的头脑风暴,并向客户、开发和项目参与者演示设计想法,适合将一些早期的用户测试集成到产品设计中。

获得开发的认可

通过展示原型,开发能够在一开始就告知我们的某些设计在技术上是否可行,避免了花费大量时间来设计需求交稿时却被告知某些功能不能实现的情况。

进行早期用户测试

产品是为用户而准备的,所以在设计早期阶段对他们进行测试很有意义。

例如,当朝着高保真原型设计时,我们会添加许多额外的细节和次要功能,如果在这个过程中,发现产品的某个核心功能在早期阶段被忽略了,导致产品存在可用性缺陷怎么办?

在低保真原型设计阶段,撤消和修改设计要容易得多。向用户展示低保真原型有助于在做更进阶的设计需求前把握关键的功能,更好地定义流程、信息架构以及UI布局。

始终以低保真开始

低保真度原型不仅有助于设计师集思广益地思考想法,还有助于与客户保持联系。通过向总监清晰地展示低保真原型而不是简单地谈论自己将要做的事情,有利于避免繁琐的返工。

 4.什么时候使用高保真原型?

产品需要提供尽可能好的用户体,制作高保真原型可以确保从产品经理到UX设计师,每个人都能把握产品的方向。

基本功能实现后

基本功能实现是指流程和页面完成后,至少在核心功能需求方面满足了用户的基本目标。通过低保真我们会知道需要设计的页面原型,以及每个页面的基本布局,接下来就可以进行高保真的制作。

测试更高级的交互时

当开始设计或测试更复杂的交互和功能时,应该使用高保真原型。我们需要确保原型中的大多数交互动效都是直观的,可以为用户带来价值甚至趣味性。

把设计移交给开发时

高保真原型设计可以让开发更容易将产品用代码写出来,不需要太多的想象空间。这样做不仅减少了错误和返工,还减少了在写代码上花费的时间,从而减少了将产品推向市场所花费的时间。

 5.低保真原型案例分析 

▲ 网页使用很少的颜色来突出基本功能,例如菜单选项、我的连接等,其余部分都是灰色的,这样就可以忽略细节只专注于产品的主要功能。

▲ 利用纸质版原型来表现产品的低保真,包括剪贴画、草图、色块等。这样做能快速演示基本的页面流程和功能,通过不断的迭代来细化这些功能和流程,提升产品体验。

▲ 当你想让用户注意到产品的核心功能,即图二中公司在地图上的位置时,可以在低保真中把地图更详细地表现出来,弱化其他元素的设计。

▲ 在软件中完成的低保真,元素的间距、位置以及尺寸的大小会比纸质版更明确,这种原型也是进入高保真迭代前的样子。

6.高保真原型案例分析 

▲ 一款航班预订产品的高保真原型,用户可以选择城市、日期、添加乘客等功能。这个例子展示了高保真原型在将最终产品交付给开发之前应该表现得多么接近。

▲ 这个高保真电商页面具有轮播功能,用户可以来回浏览所提供的产品范围。同时它还具有其他交互功能,例如可扩展的汉堡菜单,以及吸引用户注意的按钮。低保真原型通常不会涉及太多细节,仅具备基本的可点击性。

▲ 苹果手表的高保真原型不仅显示了原型可能达到的真实程度,而且还表明原型不必局限于手机、平板或网站页面。

▲ 高保真通常意味着带有色彩,耐克网站的原型完美体现了这个概念。页面具有强烈的颜色、阴影和渐变,以及真实的互动、文案、价格和产品图像等。

▲ 一款3D打印机产品的高保真原型,显示了页面可交互的程度,用户可以在打印3D产品时看到最终产品的真实动画。页面中的图形有着清晰的细节,感觉像是产品的最终版本。

最后

低保真和高保真原型之间的区别在于涉及的细节程度。在设计过程中,实际上不用太纠结于保真情况,先仔细考虑在每个阶段需要满足哪些设计目标再选择合适的原型,这样更实用。

慢慢来比较快,希望对你有帮助~

低保真原型vs高保真原型,哪一种更适合你的设计?相关推荐

  1. 一篇文章搞懂「低保真原型与高保真原型」

    在当今快速成长的产品行业中,用户体验(UX)设计变得越来越重要.很明显,以设计为导向的公司相对于其他公司更有竞争力."原型"对创造成功的用户体验至关重要. 但是对许多产品团队来说, ...

  2. 人力资源管理系统、OA、行政管理系统、考勤管理、资产管理、车辆管理、绩效管理、员工管理、招聘、入职、离职、转正、加班、调休、企业OA系统、axure原型、rp源文件、web端后台管理原型、高保真原型

    人力资源管理系统.OA.行政管理系统.考勤管理.资产管理.车辆管理.绩效管理.员工管理.招聘.入职.离职.转正.加班.调休.企业OA系统.axure原型.rp源文件.web端后台管理原型.高保真原型 ...

  3. 原型和高保真原型对比

  4. axure低保真原型_如何在Google表格中创建低保真原型

    axure低保真原型 Google Sheets is a spreadsheet, just like Microsoft Excel. Google表格是一个电子表格,就像Microsoft Ex ...

  5. 一篇文章带你摸清高保真、低保真原型间的区别

    在当今快速成长的产品行业中,用户体验变得越来越重要. 而"原型"对创造成功的用户体验至关重要. 那么在产品设计中,我们应当选择低保真原型还是高保真原型?两种原型的使用场景又是什么? ...

  6. 如何优雅的用Axure绘制高保真原型心得分享

    去年一直想写的Axure小技巧分享,终于还是动手写了,今天主要给大家分享关于axure高保真原型的一些东东. 本文核心内容点: - 啥是高保真原型?(附简单说明原型) - Axure可以画出什么水准的 ...

  7. 高保真原型、动画引导、用户登录、巡检任务、维保任务、用户中心、历史记录、帮助中心、清除缓存、任务抽检、扫描二维码、待办事项、账号设置、客服信息、交互说明、手机端、小程序、app原型、BIM信息综合管理

    手机端(微信小程序)高仿真原型.动画引导.用户登录.巡检任务.维保任务.用户中心.历史记录.帮助中心.清除缓存.任务抽检.扫描二维码.待办事项.账号设置.客服信息.交互说明.手机端.小程序.app原型 ...

  8. Axure整合ElementUI元件、蚂蚁金服元件,制作高保真原型

    Axure是个非常不错的原型制作工作(在软件管理等应用市场基本上都可以下载到),使用过的用户可能都知道,该工具本身的元件并不是十分好看,往往做出来的界面客户都会觉得很low,即使原型定下来之后,界面还 ...

  9. UI设计中的高保真和低保真

    低保真一般用Axure Rp产出,高保真分两种,带交互的或不带交互的. 不带交互的高保真直接根据低保真用PS产出即可. 带交互的,需要 PS产出后,再切图,再使用Axure RP与低保真结合产出高保真 ...

最新文章

  1. 数据通信技术(七:RIP路由水平分割配置)
  2. Heartrate:一个牛逼的工具,Python执行实时可视化
  3. BZOJ 4066: 简单题
  4. 【渝粤教育】21秋期末考试标准的研制与编制★10003k1
  5. 智能硬件开发怎么做?机智云全套自助式开发工具助力高效开发
  6. 用友华表Cell组件/插件注册
  7. MFC控件自适应调整大小
  8. 【机器学习】树及其组合算法(一)(Bagging,Boosting,GBDT,XGboost,Adaboost,随机森林)
  9. RabbitMQ数据丢失
  10. VUCA时代,3招让项目计划管理更科学有序!
  11. cpu和内存占用过高,但是任务管理器中的进程占用的内存和cpu看不出来
  12. 【Nav2中文网】三、导航相关概念
  13. 计算机桌面图标快捷键,windows7打开计算机的快捷键是什么
  14. android+后台自动更新+上架,Android增量自动更新
  15. angular路由模拟微信页面切换和页面之间的传值
  16. OSChina 周四乱弹 —— 如果你追到我,我就和你……
  17. office2007各组件全面介绍
  18. 5GC architecture N1、N2、N3、N4、N6等接口
  19. 【自定义】抢妹子大作战
  20. 真北敏捷 | 策略思维,超越原生感受

热门文章

  1. Tomcat服务器端口修改
  2. 人脸识别+深度学习,水平远超人类大脑!
  3. 量子计算机的内存有多大,人类大脑的容量有多大,相当于多少G的内存?答案你都不敢相信...
  4. 女生要不要去北航学计算机,在北航读书有个女朋友是种怎样的体验?
  5. GPRS手机+笔记本电脑无线上网
  6. 上传文件时,文件名中文乱码
  7. 七牛云 阿里云图片存储 新增套餐 分页 定时任务Quartz(作业:编辑和删除功能)
  8. 使用京东云免费云主机搭建CentOS
  9. 使用CSS实现首行缩进效果
  10. Linux下导入导出 MySQL 数据库表结构数据