前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >低保真原型vs高保真原型,哪一种更适合你的设计?

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

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

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

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

 1.什么是低保真原型

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

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

基本功能和信息架构

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

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

基本的布局和元素

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

 2.什么是高保真原型

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

进阶的页面设计

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

进阶的互动原型和功能

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

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

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

头脑风暴

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

获得开发的认可

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

进行早期用户测试

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

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

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

始终以低保真开始

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

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

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

基本功能实现后

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

测试更高级的交互时

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

把设计移交给开发时

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

 5.低保真原型案例分析 

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

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

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

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

6.高保真原型案例分析 

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

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

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

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

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

最后

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

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

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
一篇文章带你摸清高保真、低保真原型间的区别
那么在产品设计中,我们应当选择低保真原型还是高保真原型?两种原型的使用场景又是什么?小摹对此都做出了相应的分析,一起来看一下吧!
奔跑的小鹿
2022/02/08
1.6K0
一篇文章带你摸清高保真、低保真原型间的区别
产品原型设计该怎么优化?附6个优秀的原型案例
原型设计在产品开发过程中的重要性无需多言,网上也有很多“如何绘制原型”之类的教程。不过,完成原型设计只是成功的第一步,如何在此基础上进一步优化,确保产品在实际开发中更加顺畅、高效,才是原型设计更重要的一步。本文将从5个关键点出发,探讨如何优化原型设计,并分享一些优秀的原型设计案例,希望能帮助你提升原型设计水平~
奔跑的小鹿
2024/09/10
2020
产品原型设计该怎么优化?附6个优秀的原型案例
知道这10点,你才是真正会画线框图
在让UI设计师产出高保真设计稿之前,产品经理需要绘制线框图,来向UI设计师传递网站布局结构、产品内容、信息化层次、界面功能、用户行为等信息。线框图没有严格的规定或秩序要遵守,但一定要清晰具体地描述布局细节,为设计师提供项目的概述。
奔跑的小鹿
2022/03/16
1K0
知道这10点,你才是真正会画线框图
每天学点UX|原型设计之前,你需要了解这些
这是一系列关于用户体验设计的教程,针对刚开始学习UI/UX的小白。保证每周一更,希望我的小教程能够帮助你快速入门。如果错误,还望指正。
奔跑的小鹿
2020/03/03
6060
什么才是正确的原型设计?
草图,线框图,设计草稿,高分辨率的可视效果:原型对交互式应用发展的作用是必不可少的。下面跟大家一起探讨一下其中的联系和区别,哪些方式适用于哪些项目。 在电子产品的开发中没有一个最终目的是原型。原型的目标是将想法,功能,内容形象地表达出来,以此得到反馈并改进产品。交互设计中最重要的挑战往往是界面:它应该是友好的,直观的,最好是一目了然的。 在开发的过程中会不断地出现一些必须用原型的方式来解释的问题:用户感知到了什么元素?组件是如何交互的,整个系统背后的逻辑是怎样的?这种逻辑用户是否能快速的理解?操作是否
奔跑的小鹿
2018/03/16
1.2K0
什么才是正确的原型设计?
线框图?原型图?为何傻傻分不清楚
首先,我们需要搞清楚的一点就是线框图不是真正意义上的原型。许多设计师和产品经理,甚至是经验丰富的设计大牛往往也很容易混肴这些专业术语。什么是线框图?什么是原型?什么时候使用线框图?什么时候使用原型? 我们都看过小说,小说呈现给我们的只是文字表达,由作者赋予的人物形象。我们常常在语文考试中都会这样回答“本文中的人物形象生动、鲜明”,这里的“生动”指的只是我们通过作者的视角想象出来的,我们并没有看过真实的人物。但当这部小说被拍成电影或电视剧,导演根据自己的理解选角,演员们赋予了他们鲜活的生命,这就是原型,小
奔跑的小鹿
2018/03/16
8340
线框图?原型图?为何傻傻分不清楚
关于交互动效视觉设计的些许笔记
3、下拉刷新完成 (下拉刷新效果去掉 同时出现新的内容)
宇相
2018/08/06
6700
关于交互动效视觉设计的些许笔记
原型设计的重要性你真的知道吗?
一个好产品的诞生,必定离不开原型设计。原型设计是整个产品开发中最重要的, 并且确定了整个软件的方向,重要性就和建筑师的设计图一样。 “很难想象一个没有原型的产品是如何诞生的。原型设计的核心目的在于测试
奔跑的小鹿
2018/03/16
1K0
原型设计的重要性你真的知道吗?
为什么我越来越喜欢画低保真原型?
身在这个行业已经三年了,接触了不少的产品经理。最近公司新招了几个产品经理,非常喜欢用高保真原型来讨论方案。刚进公司,他们就励志要好好学习画原型,但是每次谈论完以后,我都为他们捏一把汗,老板和客户一旦不
奔跑的小鹿
2018/03/16
1.5K0
为什么我越来越喜欢画低保真原型?
原型设计用得最多的是PS吗?该如何画原型?
在产品开发的前期工作中,产品经理或设计师通常需要进行原型设计工作,创建一个可交互和可视化的原型,以更准确地表达他们的设计构思和想法,并为项目顺利递交给开发人员做好准备。进行原型设计时,使用设计工具来画原型图是最高效的方式。
奔跑的小鹿
2023/07/04
5080
原型设计用得最多的是PS吗?该如何画原型?
4款APP原型设计工具助你搞定移动应用设计!
随着信息化社会的不断发展,不仅手机迭代更新的速度飞快,就连手机里的App 也层出不穷。作为一名UI/UX设计师或产品经理,如何才能设计一款出色的移动App?光有好的创意是不够的,你还需要一款正确的Ap
奔跑的小鹿
2018/06/11
5.5K0
原型图+交互设计+UI图,到底啥关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结。
PM吃瓜
2019/08/12
3.4K0
交互设计分享:浅谈交互设计的一切
原文出处: 四四四毛 什么是交互设计 用户界面有两部分的设计:交互设计和视觉设计。在下图中,左边和右边分别是微信的交互设计和视觉设计。 交互设计 vs. 视觉设计 交互设计的产出物是可交互的低
wangxl
2018/03/07
1.5K0
交互设计分享:浅谈交互设计的一切
纸上原型是什么?
原型(prototypes)是把系统主要功能和接口通过快速开发制作为“模型”,以可视化的形式展现给用户,用以征求意见,确定需求。同时也应用于开发团队内部,作为讨论的对象和分析、 设计的接口。
葆宁
2022/01/06
9440
纸上原型是什么?
App项目实战之路(三):原型篇
本来,我是没打算写原型篇的,但考虑到关注我的人中也有部分产品狗,更重要的是,我一直认为,不懂产品设计的程序猿不是优秀的产品经理。而且,应该也有不少程序猿想往产品经理的方向发展的。所以,最后决定献丑了。
Keegan小钢
2018/08/10
1.8K0
App项目实战之路(三):原型篇
《软件工程之美》打卡第三周
这是笔者参加极客时间21天打卡行动第三周,三周的时间无间断刚好21天,这21天里我强迫自己每天都要学习半个小时并写100个字的分享,正是这样的自律让我找回以前的那种感觉,真的好久没这样认认真真做一件事情了。话不多说,下面是本周每日学习总结记录:
巫山老妖
2020/02/18
3560
交互工具哪个好用?来看看静电的具体分析~
最近一段时间。很多小伙伴问静电这样一个问题,交互工具要用什么好呢?emmm,这个问题还真的不好回答。因为交互这个词,本身就是一个面儿及其广的词。因此,咱们得分清楚情况,搞清楚自己的需求,这样才能做好交互设计。
用户5009027
2019/05/31
1.2K0
优质产品需求文档(PRD)写作三大原则
在上一篇文章中有介绍,产品经理的两项主要职责包括:对产品机会进行评估,以及对开发的产品进行评估。而定义即将开发上线的产品,则需要借助产品需求文档,来进行产品的特征和功能描述。PRD文档的写作会因公司、团队以及个人习惯而异,没有标准的规范和统一模板,但有三大原则是不可忽略的:文字简练、中低保真、测试验证。本文仅陈述个人对产品需求文档的理解,若有不正确的地方,还望多多指教。 (一)PRD的定义、主要构成及用处 简而言之,产品需求文档(Product Requirement Document),是将商业需求
奔跑的小鹿
2018/03/16
1.9K0
优质产品需求文档(PRD)写作三大原则
软件原型设计工具有哪些?
原型设计是将想法转变为设计过程中至关重要的一环。经常有设计师小伙伴可能会问到,“哪个原型设计工具是最好的呢”?实际上这是一种错误的提问方式,尤其是在当下原型工具种类繁多,针对不同需求各有优势的大环境中更加如此。就设计师而言,更在意的应该是“哪个原型设计工具对我现阶段的目标是最好的”?在这里,笔者列出了在3种常见场景下最合适的原型图设计工具的推荐清单,希望对你有所帮助。
奔跑的小鹿
2021/06/02
1.3K0
UI设计师是如何工作的?
眼下正值就业的“金九银十”,又有大批新人小伙伴要涌入UI设计这片红海啦。然而在某度搜索“UI设计师”会发现,其实大部分人对这一行并不是十分了解。笔者作为一名正奋斗在一线的UI设计师,给准备入行或已经入行却仍然迷茫的小伙伴们解析一下,UI的工作内容以及流程究竟是怎样的。
奔跑的小鹿
2020/10/27
9610
UI设计师是如何工作的?
相关推荐
一篇文章带你摸清高保真、低保真原型间的区别
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档