ui界面设计利器低保真原型图怎么制作

通常我们在给一个新项目策划和设计ui界面时,都会先进行一系列的沟通、策划、调研、草图绘制、保真图的制作与设计等。其中,为了提升工作质量并搭建实现用户需求的场景,我们通常都会对低保真原型、高保真原型进行非常认真的制作与设计。那么,低保真图一般是用什么工具来制作与设计的呢?

“保真度”是个概念化的术语,广义上来讲,它可以被定义为:重现某种事物的精确程度。换句话说,原型的保真级别回答了这样一个问题,即原型表述的最终方案到底有多精确?

快速设计的三大流程

-

快速设计的三大流程通常为手绘的低保真原型,axure、proto等工具绘制的layout,加上最终视觉完善度较高的高保真原型。

1.简单的手绘草图原型:通常可以让专业的人士很快验证产品的逻辑是否有问题,流程是否顺畅。

2.axure绘制的低保真原型:可以验证页面布局是否合理,按钮的位置是否顺手。还可以给对互联网产品比较熟悉但没有用过该产品的人进行可用性测试。

3.视觉还原的高保真原型:视觉原型已经是产品最终将呈现出来的形态,可以用于针对目标人群的可用测试。也可以验证产品的功能是否满足了目标用户的需求。

低保真原型的优点

不论产品的类型如何,所有的低保真原型都具备以下几个优点:

//在早期检测和修复主要问题

建立低保真原型可以快速接触到用户的反馈,使我们可以将问题可视化,并解决关于产品的易用性和功能上的核心问题。原型不应该被设计成会影响用户视觉和感知的最终形态(原型通常只是粗略的产品概述),用户通常只是通过他们所看到的提出想法。通过剥离不必要的装饰和设计,我们能够呈现出设计的核心想法和概念。在这个阶段,发现问题是产品最终能够成功的关键。

HigelHeaton顾问写了一篇关键的名为《为何快速原型能够解决用户界面的问题?》的论文,发表在1992年软件原型和进化发展IEE座谈会上。他称快速原型应可以解决大约80%的界面主要问题。在真正满足用户需求的产品设计过程中,低保真原型在一开始就为我们敲响了警钟。

除了帮助我们发现重大问题,低保真原型同样给予了我们解决这些问题的需求与动力。在2012年原型的心理体验研究中,斯坦福和西北大学的研究者们发现“低保真原型…引领我们重新规划失败,以此作为学习机会,培养进步意识并强化对创新能力的信念。”研究结论表明建立低保真原型不仅仅影响最后的产品,也影响着我们在设计进程中的参与程度。

//低保真原型构建起来更加容易且成本更低

不论个人或小组,只需很少或根本不需要专业技能即可构建低保真原型。只要产品和项目目标是清晰明确的,那么低保真原型的重点将不会放在形式或功能上,而是关键点上。接下来我们应把资源放在哪里?哪些地方是应该避免浪费资源的呢?哪些功能对我们的用户来说才是核心关键?这些原始设想本身的方向对了吗?我们是否需要转变方向或拓展其它选项?

//得出反馈以侧重于高层次的概念而不是执行

高保真原型将重心转向了产品的美观程度而不是验证产品的基本假设及核心价值。而外表粗糙的低保真原型从另一方面来说“强制用户去思考核心内容而不是外表”。

//更有迭代的动力和意愿

//易于携带和展示

一些高保真原型需要特殊设备或环境用于展示,而绝大多数低保真原型能够很容易地携带和展示。Rudd指出:“低保真原型易于携带,它们可以在纸上,图表中,或在白板上呈现。”

携带一张纸能有多难?需要任何特殊条件、空间或高级指令吗?纸质低保真原型将我们从技术和便携性的要求中解放出来。

如果你决定使用本文结尾列表中的任何一种软件来构建低保真原型,请考虑在屏幕上显示是否是最好的选择。研究表明,在几种有趣的方式中,纸张比屏幕更容易激励协同工作。诺丁汉大学、萨里大学和剑桥大学EuroParc研发中心的研究员们在三种不同的工作环境下进行了纸张和屏幕如何促进协作的研究,这三种环境分别为:建筑工地,医疗中心以及伦敦地铁的控制室。他们的结论是纸张具有更高的灵活性,使得个人能够以各种方式进行互动与协作。

低保真原型的类型

//2D纸质

SCAD交互设计部门的这种新网页设计低保真原型展示了提升阅读和互动张帖的初步概念

流动新媒体设计团队展示了如何从纸质原型开始,使事物回到本质,专注于重要的事情

两名交互设计专业的学生开了一家名为StickyJots的公司,该公司提供类似故事板的纸质低保真原型套件

//3D模型

如果你想更有创意,并用3D模型与用户互动,这里有几种有趣的选项可供选择。随着设计思想中实用方法论的传播,使用纸板,泡沫塑料,木材,塑料,粘土和积木变得越来越流行。

AshleyCostanzo为HealthyMade公司开发了这款3D低保真模型:将新鲜的食材和食谱打包成一个健康午餐计划,本产品回答了一个问题,“我们如何给有需要的人提供更加健康的食品选择?”

商业折纸是日立公司开发的一种折纸原型法,方便服务和系统的设计。它是在企业内部开发的,但最终引吸了其它机构的注意。纸张被折成各种物件以完善原型系统并与之互动。

乐高企管智慧游戏(LEGOSERIOUSPLAY)被用于促进创新和提升经营业绩。该游戏套件可用于建立业务和服务体验的低保真原型。例如LiquidAgency机构就使用这种方法建立问题——答案的原型,“我们期望提供何种类型的医疗保健?这将会使我们的现在与未来有所区别吗?”

草图原型、低保真、高保真三大原型的设计技巧

//草图原型的设计技巧

草图原型主要目的是为了验证设计的流程。在过程中可以贴上一些目标场景在原型下方,这样能营造一个比较贴近真实情况的思考氛围,将大家都引导到用户的角度来思考。还可能从场景中发现一些之前没有想到的细节问题,同时可以避免产品人员以及设计师在设计过程凭空为用户臆想出来许多不切实际的需求。

//低保真原型设计技巧

低保真原型主要由交互人员输出。在按钮的布局、整体页面的信息构架方面已经比较精细了,可以用ae制作一些复杂的动效与开发人员沟通。在方案评审时和产品人员讨论是否有功能缺失、与开发人员讨论交互效果实现的成本是否过高。通常一些特殊状态与错误提示都是标示在低保真原型设计稿中。

//高保真原型设计技巧

高保真原型是与最终装到手机上的效果相同的原型,通常我们也叫做视觉稿。高保真原型只是没有经开发人员实现的图片,而现在我们有了许多工具可以为高保真原型添加页面跳转效果与一些简单的交互效果。在这里大概给大家推荐几个:国外用的比较多的是invisionapp.com,国内用的比较多的是墨刀

以上提到的三个原型设计技巧未涉及到手工制作类的。

更多低保真原型图制作工具及入门方法指南

1.定义你的目标:你要展示什么?

你希望展示哪些特点给你的用户?列出两到三个你的低保真原型中包含的核心功能。在接下来的步骤中,我们将确保这些功能不会被遗忘。

你可以使用类似下面的简单表格列出你的功能:

下面列表中有一些可借鉴的示例核心功能和补充功能:

2.定义你的方法:你要如何展示?

你将决定何种低保真原型最适合你的项目。你要快速建立起怎样的原型以帮助用户传递有价值的反馈?如何简单地展示并测试你的设想,且投入最少的资源?寻找尽可能简单的方法,并不断询问自己一个问题:是否有更为简单的展示方法?直到找到一个可行的方法来描绘你的产品功能。

基于以下几个因素找出适合你原型的细节程度:

原型的目标用户

用户是否能够基于你提供的原型提出有意义的反馈?该原型是否需要一定的细致程度以令用户理解?

你可以获得怎样的资源?

灵活性对于低保真原型是至关重要的。当你的想法形成时想想看在你周边的可使用的工具和资源。有创造力地用聪明的方式使用你现有的东西。

用以下方式去思考:

注:以上展示原型为MartaFioni为appFoursquare设计的支付界面解决方案

还在苦苦找寻适合你项目的原型方法?下面有一些建议:

下载这张图片并将它挂在你办公室显眼的地方,它将作为一种动力,使你将低保真原型作为你设计中一以贯之的部份。

3.执行:展示你的原型

别一开始就被“我在XX方面的技能不够好”的心态打败了。低保真原型不在于你的模型看起来多复杂,它只需要形成对产品未来形态的交流。记住,不在乎形式和功能,只在乎关键点。

来自不同设计领域的低保真原型样本:

尝试以下数字软件和模拟工具以加快你的原型设计速度:

4.测试:将如何评估你的原型?

抛弃“用户肯定会讨厌这种粗糙的原型”的想法。向用户解释原型的限制是很正常的,也是符合预期的。引导用户理解项目的目标,并提出探讨性的问题。如有帮助的话,在展示原型之前准备一份简短的指南,列出一些你想要在会议期间提出的问题。并写一份简介,你可以读出来以帮助用户理解他们看到的是什么。以下有一些问题类型:

关于感知到的好处

“通过这个概念产品你能看出来它能为你提供的关键性的好处是什么呢?”“从你今天看到的这些功能来看,哪项功能会令你使用这款产品?”“哪项功能会使你想要使用本产品却在原型中没有看到呢?”

关于积极和消极的反应

“从1到5来衡量的话,你有多喜欢这个设想?”“为什么?”

关于意识

“看完今天这款概念产品,令你印象最深刻的是什么?”“你还记得哪些?”

关于比较优势

(如你向用户展示了超过两个以上版本的原型,询问他们哪种版本最好)“哪个版本最吸引你?”

关于情绪反应

“这个概念产品令你感觉如何?”(通过列出情绪列表来帮助用户——高兴、沮丧、生气、兴奋、无聊等等,或画出描述这些情绪的面部插画。让用户选择一个或以上的被你的原型触发的情绪选项。)

关于使用意向

“从1到5来衡量的话,如果今天看到的这款概念产品最终被开发出来,你有多想要使用它?”“为什么?”

普通反馈

“如你感到有任何可以改进这个设计的地方,请随意更正和修改并注释出来。”

5.学习:展示完毕,接下来如何?

收集用户的反馈并找出他们对该原型相似的评价,建立一个亲和图以识别出最常见的建议。结合这些反馈用于建立一个在细节上有更完善的外观和更好用户体验的高保真原型。根据需要,募集尽可能多的用户重复测试。

THE END
1.移动端UI界面设计——以手机APP“食秀”为例.docx移动端UI界面设计——以手机APP“食秀”为例.docx 35页内容提供方:瀚海文化 大小:1.75 MB 字数:约2万字 发布时间:2024-11-20发布于广东 浏览人气:0 下载次数:仅上传者可见 收藏次数:0 需要金币:*** 金币 (10金币=人民币1元)移动端UI界面设计——以手机APP“食秀”为例.docxhttps://max.book118.com/html/2024/1024/6035042051010235.shtm
2.新鲜活力!13组美食APP界面设计优优教程网UI界面优化实例!16条设计黄金原则帮你学会改版 本文的 UI 界面通过 16 次改版优化一点点变好,这 16 次优化也是在做 UI 时所需要遵循的设计原则,记得收藏并用到自己的项目里,用上才算真正学到。 UI设计设计原则阅读5.7w 查看详情 简介 评论 这https://uiiiuiii.com/inspiration/1616612122.html
3.降食谱APP界面设计menma1997健康食谱APP界面设计 menma1997 成都/设计爱好者/4年前/824浏览 版权 可能感兴趣的人 下次默认收起 澎湃果合互动 北京| 设计爱好者 创作45粉丝787 Post_大千影业 杭州| 设计爱好者 创作48粉丝22365 _序_ 北京| 设计爱好者 创作7粉丝2327 MrReese 深圳| 设计爱好者https://www.zcool.com.cn/work/ZNDMyODMwMTI=.html
4.美食菜谱app手机界面图片免费下载美食菜谱app手机界面素材千图网为您找到163张美食菜谱app手机界面相关素材,千图网还提供美食菜谱app手机界面图片,美食菜谱app手机界面素材, 美食菜谱app手机界面模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/meishicaipuappshoujijiemian.html
5.50个设计简约的移动APPUI设计作品吉他APP 个人简介手机版 Keroessa 启动页、Step By Step 界面设计 家庭智能 APP APP 注册和登录页 家居Ios App Minimal Weather App 简约日程安排 APP 界面 IPhone时间 APP 计算器 APP 食谱、食品类 UI设计 钱包类 APP Onboarding Illustrations Popped – Music Served Simple http://www.360doc.com/content/16/0509/23/32637212_557697145.shtml
6.酒店饭店食谱菜单系统在线点餐移动APP系统界面设计UI工具包Wala爱给网提供海量的UI(海外)资源素材免费下载, 本次作品为jpg 格式的酒店饭店食谱菜单系统在线点餐移动APP系统界面设计UI工具包 Wala Food Boxes, 本站编号41539283, 该UI(海外)素材大小为174m, 该素材已被下载:9次, 更多精彩UI(海外)素材,尽在爱给网。 浏览本次作品的您可能还对 ui素材ui工具包 感兴趣。 https://www.aigei.com/item/jiu_dian_fan_di_15.html
7.APP界面设计下载排行榜我图网APP界面设计下载排行榜榜单,为您提供了过去一年最受欢迎的APP界面设计作品合集,快来看看是否符合您的心意吧,找APP界面设计作品就上我图网https://www.ooopic.com/paihang-1-5501.html
8.美食/餐厅/外卖点餐类APP界面设计合集2019.8.26 APP UI 美食点评类APP应用UI设计套件 Food Restaurant App Kit 2017.7.6 APP UI 美食应用 UI 套件 Food application ui kit 50 screen 2019.1.27 APP UI 美食主题APP应用UI套件 Foodnow – Sketch Mobile UI Kit 2019.7.16 APP UI 食物烹饪食谱美食类APP应用UI界面设计模板素材 Food Cooking https://www.iamxk.com/collection/601416/
9.苹果iOS人机交互界面开发指南我们曾经介绍过《iPhone应用界面设计指南》,我们将介绍iPhone应用界面设计指南的一个章节——《苹果iOS应用人机交互界面开发指南》。 我们曾经介绍过《iPhone应用界面设计指南》,我们将介绍iPhone应用界面设计指南的一个章节——《苹果iOS应用人机交互界面开发指南》。 https://mobile.51cto.com/hot-246659.htm
10.菜谱APP源码和设计报告csdn菜谱app菜谱APP源码和设计报告 《移动互联开发》 课程作业 学院: 班级: 学号: 姓名: 日期: 设计要求(提交文档时需删除): 1.本课程设计作为《Android 程序设计》的期末考查内容。 2.任务安排: (1)确定内容:11月3日前将确定内容,雷同内容进行微调(功能,实习,界面)。https://blog.csdn.net/qq_39154376/article/details/128160580
11.matlabgui界面设计总结正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流分享)交流和讨论的时候,发现很多新加入群的朋友们,问的最多的问题就是“主流手机界面设计尺寸做多大”?APP设计尺寸规范,知道多少呢?25学堂的老谭应广https://www.shuzhiduo.com/topic/matlabgui%E7%95%8C%E9%9D%A2%E8%AE%BE%E8%AE%A1%E6%80%BB%E7%BB%93/
12.订餐界面订餐界面图片订餐界面订餐界面设计素材红动中国素材网提供11个订餐界面订餐界面图片、订餐界面订餐界面素材、订餐界面订餐界面背景、订餐界面订餐界面模板、订餐界面订餐界面海报等PS素材下载,包含PSD、AI、PNG、JPG、CDR等格式源文件素材,更多精品订餐界面订餐界面设计素材下载,就来红动中国,最后更新于2023https://so.redocn.com/jiemian/b6a9b2cdbde7c3e6b6a9b2cdbde7c3e6.htm
13.全屏界面服务体验UX/UI设计规范应用开发App开发 App开发概述 App设计(公版卡片) App设计(线上开发H5) 线上开发H5 管理UI资源库 App设计(线下开发H5) 准备工作 开发UI界面 开发H5功能(Wi-Fi/Combo) 开发H5功能(BLE) 页面配置 多端适配 产品配置 功能调测 使用调测助手调测H5功能 使用智慧生活App调测H5功能 接入运https://device.harmonyos.com/cn/docs/devicepartner/DevicePartner-Guides/uxdesign-service-full-0000001227598901
14.下厨房App的体验创新作者:王安琪,班级:数字媒体艺术艺术,课程:界面设计方法/交互设计方法研究,指导:余永海。 如今在“互联网+”的深入和移动互联网高速发展的大环境之下,美食与人们的距离越来越短,订餐外卖app和生鲜电然商带来了新的一波“懒人经济”。然而即便是已经在“懒人经济”盛行的今天,仍然有很多的人愿意走进厨房,自己烹饪美食。https://www.jianshu.com/p/4450ff97db19
15.设计了解如何确定 App 的风格,并针对各种情境来调整你的语气。 WWDC24 视频 SF Symbols 6 的新功能 了解新的“晃动”、“旋转”和“呼吸”动画预设如何帮助你让界面更为生动。 WWDC24 设计文章 关于设计的幕后故事 看看Devin Davies 如何调配出美味食谱 App“Crouton” https://developer.apple.com/cn/design/
16.你手机里有哪些堪称神器的APP软件?如果你想消除时常皱眉而产生的皱纹…不如试下这款APP… 3、【鲨鱼记账】 来不及解释了!反正【鲨鱼记账】是比较好一款让我真正养成记账习惯的APP! 这款APP的界面设计非常简单,打开APP,首先看到的就是不忍直视的流水账单… 点击下方“加号”,你就可以记录各项支出或收入了,各种收支的分类也非常详细: 跟【潮汐】一https://baikecom.cn/show-481353.html
17.成都东软学院设计者:李雅文 设计说明: 卡路里app界面设计配色以绿色为主,淡黄色为辅,加入粉色蓝色等色彩点缀,突出绿色健康活泼的氛围,以IP延展插画的形式进行视觉效果的呈现,可爱有趣,符合年轻用户群体的审美,拉近与用户之间的距离。APP食品图标也采用了插画风格的设计,风格统一。卡路里app主要功能为专属定制食谱,拍照识别食物热量以https://da.nsu.edu.cn/2023/EDCF9C8F-0461-4019-923F-1C09A8503C15.html