Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >低保真原型vs高保真原型,哪一种更适合你的设计?

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

原创
作者头像
奔跑的小鹿
修改于 2021-05-22 09:23:22
修改于 2021-05-22 09:23:22
1.8K0
举报
文章被收录于专栏:无原型不设计无原型不设计

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

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

 1.什么是低保真原型

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

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

基本功能和信息架构

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

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

基本的布局和元素

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

 2.什么是高保真原型

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

进阶的页面设计

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

进阶的互动原型和功能

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

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

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

头脑风暴

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

获得开发的认可

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

进行早期用户测试

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

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

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

始终以低保真开始

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

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

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

基本功能实现后

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

测试更高级的交互时

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

把设计移交给开发时

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

 5.低保真原型案例分析 

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

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

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

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

6.高保真原型案例分析 

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

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

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

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

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

最后

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
一篇文章带你摸清高保真、低保真原型间的区别
那么在产品设计中,我们应当选择低保真原型还是高保真原型?两种原型的使用场景又是什么?小摹对此都做出了相应的分析,一起来看一下吧!
奔跑的小鹿
2022/02/08
1.7K0
一篇文章带你摸清高保真、低保真原型间的区别
原型设计用得最多的是PS吗?该如何画原型?
在产品开发的前期工作中,产品经理或设计师通常需要进行原型设计工作,创建一个可交互和可视化的原型,以更准确地表达他们的设计构思和想法,并为项目顺利递交给开发人员做好准备。进行原型设计时,使用设计工具来画原型图是最高效的方式。
奔跑的小鹿
2023/07/04
5270
原型设计用得最多的是PS吗?该如何画原型?
每天学点UX|原型设计之前,你需要了解这些
这是一系列关于用户体验设计的教程,针对刚开始学习UI/UX的小白。保证每周一更,希望我的小教程能够帮助你快速入门。如果错误,还望指正。
奔跑的小鹿
2020/03/03
6150
什么才是正确的原型设计?
草图,线框图,设计草稿,高分辨率的可视效果:原型对交互式应用发展的作用是必不可少的。下面跟大家一起探讨一下其中的联系和区别,哪些方式适用于哪些项目。 在电子产品的开发中没有一个最终目的是原型。原型的目标是将想法,功能,内容形象地表达出来,以此得到反馈并改进产品。交互设计中最重要的挑战往往是界面:它应该是友好的,直观的,最好是一目了然的。 在开发的过程中会不断地出现一些必须用原型的方式来解释的问题:用户感知到了什么元素?组件是如何交互的,整个系统背后的逻辑是怎样的?这种逻辑用户是否能快速的理解?操作是否
奔跑的小鹿
2018/03/16
1.2K0
什么才是正确的原型设计?
软件原型设计工具有哪些?
原型设计是将想法转变为设计过程中至关重要的一环。经常有设计师小伙伴可能会问到,“哪个原型设计工具是最好的呢”?实际上这是一种错误的提问方式,尤其是在当下原型工具种类繁多,针对不同需求各有优势的大环境中更加如此。就设计师而言,更在意的应该是“哪个原型设计工具对我现阶段的目标是最好的”?在这里,笔者列出了在3种常见场景下最合适的原型图设计工具的推荐清单,希望对你有所帮助。
奔跑的小鹿
2021/06/02
1.3K0
以“摹客”为例,聊聊产品经理原型设计中的 “道术器”
作为产品经理,在原型设计过程中,掌握其中的“道术器”,对于高阶产品发展有着潜移默化的帮助。
奔跑的小鹿
2022/09/16
9130
以“摹客”为例,聊聊产品经理原型设计中的 “道术器”
为什么我越来越喜欢画低保真原型?
身在这个行业已经三年了,接触了不少的产品经理。最近公司新招了几个产品经理,非常喜欢用高保真原型来讨论方案。刚进公司,他们就励志要好好学习画原型,但是每次谈论完以后,我都为他们捏一把汗,老板和客户一旦不
奔跑的小鹿
2018/03/16
1.5K0
为什么我越来越喜欢画低保真原型?
App项目实战之路(三):原型篇
本来,我是没打算写原型篇的,但考虑到关注我的人中也有部分产品狗,更重要的是,我一直认为,不懂产品设计的程序猿不是优秀的产品经理。而且,应该也有不少程序猿想往产品经理的方向发展的。所以,最后决定献丑了。
Keegan小钢
2018/08/10
1.8K0
App项目实战之路(三):原型篇
原型设计的重要性你真的知道吗?
一个好产品的诞生,必定离不开原型设计。原型设计是整个产品开发中最重要的, 并且确定了整个软件的方向,重要性就和建筑师的设计图一样。 “很难想象一个没有原型的产品是如何诞生的。原型设计的核心目的在于测试
奔跑的小鹿
2018/03/16
1.1K0
原型设计的重要性你真的知道吗?
12345,教你画好线框图
线框图是一种低保真度的设计原型,在去除所有视觉设计细节之下,进行页面结构、功能、内容规划。线框图对于产品的作用就如同建筑蓝图,在项目的初始阶段规定好产品各方面的细节,作为整体项目说明,因为绘制起来简单、快速,也经常用于非正式场合,比如团队内部交流。可以说线框图是产品流程中不可或缺的一部分,那么本文就通过两个定义、三个优点、五步流程、四个技巧、一款工具,来详细介绍线框图。
奔跑的小鹿
2019/01/24
9010
12345,教你画好线框图
强烈推荐!2018最受欢迎的8款产品原型工具
工欲善其事必先利其器。作为一名产品经理,如何才能快速地设计一款产品?一款优秀的产品原型工具必不可少。如何才能选择一款适合自己的原型工具呢?小编特意整理了8款工具以供参考,并从学习曲线,性价比,功能优缺点等方面进行了简单的介绍。希望能够帮助大家挑选一款称心如意的工具,提高工作效率。
奔跑的小鹿
2019/01/24
3.6K0
强烈推荐!2018最受欢迎的8款产品原型工具
原型图+交互设计+UI图,到底啥关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结。
PM吃瓜
2019/08/12
3.4K0
UI设计适合女生学吗?会不会很难?
根据《2019年中国用户体验行业调研报告》显示,从事视觉设计类的女生占比为51.8%,高于男生的48.2%。显然目前看来,身处UI设计岗位上的更多是小姐姐。为什么会出现这种现象呢?
奔跑的小鹿
2020/05/12
8410
产品原型设计该怎么优化?附6个优秀的原型案例
原型设计在产品开发过程中的重要性无需多言,网上也有很多“如何绘制原型”之类的教程。不过,完成原型设计只是成功的第一步,如何在此基础上进一步优化,确保产品在实际开发中更加顺畅、高效,才是原型设计更重要的一步。本文将从5个关键点出发,探讨如何优化原型设计,并分享一些优秀的原型设计案例,希望能帮助你提升原型设计水平~
奔跑的小鹿
2024/09/10
2570
产品原型设计该怎么优化?附6个优秀的原型案例
产品原型在工作推动中重要作用
从早期接触互联网产品相关工作,最初在需求传递的整个流程中,我们将想法页面上形成草图,表现形式上看到的是一系列由图片占位符、文字、线框、按钮等元件组成作为一个静态页面呈现。随着需求传递过程中沟通成本的提升,需求细节的严谨性、在与UI/UE的沟通中,需要对表现层之下按钮、布局、交互和元素的位置,进行优化设计布局,以达到这些元素在页面上的最佳体验效果,让用户在需要的时候,用户如何到达某个页面能快速找到所需位置,并且在他们在当前页面完成任务后,快速给出反馈和需要去的下一个页面这是产品需要思考的路径。
奔跑的小鹿
2022/12/20
6130
产品原型在工作推动中重要作用
4款APP原型设计工具助你搞定移动应用设计!
随着信息化社会的不断发展,不仅手机迭代更新的速度飞快,就连手机里的App 也层出不穷。作为一名UI/UX设计师或产品经理,如何才能设计一款出色的移动App?光有好的创意是不够的,你还需要一款正确的Ap
奔跑的小鹿
2018/06/11
5.6K0
UI设计师是如何工作的?
眼下正值就业的“金九银十”,又有大批新人小伙伴要涌入UI设计这片红海啦。然而在某度搜索“UI设计师”会发现,其实大部分人对这一行并不是十分了解。笔者作为一名正奋斗在一线的UI设计师,给准备入行或已经入行却仍然迷茫的小伙伴们解析一下,UI的工作内容以及流程究竟是怎样的。
奔跑的小鹿
2020/10/27
9810
UI设计师是如何工作的?
知道这10点,你才是真正会画线框图
在让UI设计师产出高保真设计稿之前,产品经理需要绘制线框图,来向UI设计师传递网站布局结构、产品内容、信息化层次、界面功能、用户行为等信息。线框图没有严格的规定或秩序要遵守,但一定要清晰具体地描述布局细节,为设计师提供项目的概述。
奔跑的小鹿
2022/03/16
1.1K0
知道这10点,你才是真正会画线框图
从涂鸦到发布——理解API的设计过程
  英文原文:From Doodles to Delivery: An API Design Process   要想设计出可以正常运行的Web API,对基于web的应用的基本理解是一个良好的基础。但如果你的目标是创建出优秀的API,那么仅凭这一点还远远不够。设计优秀的API是一个艰难的过程,如果它恰巧是你当前的工作任务,那么你很可能会感到手足无措。   不过,优秀的设计绝对是可以实现的。本文所描述的流程将帮助你获得成功,我们将共同研究什么是优秀的设计,以及迭代式的流程如何帮助我们实现这一目标。我们还将叙
逸鹏
2018/04/09
1.4K0
从涂鸦到发布——理解API的设计过程
智能设计新时代:5款强大的AI原型设计工具推荐
随着人工智能生成内容(AIGC)相关研究的突破,人类社会正面临一个全新的转折点。诸如多模态、可控扩散模型和大型语言模型等技术正在直接改变创意设计领域的生产过程。
奔跑的小鹿
2023/06/26
13.4K0
智能设计新时代:5款强大的AI原型设计工具推荐
相关推荐
一篇文章带你摸清高保真、低保真原型间的区别
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档