软件工程_04 原型设计
1. 什么是原型设计
在UI设计中,原型设计并非是自己可有可无的工作环节。很多UI设计师存在一个误区,认为原型设计是他人的工作,而自己是负责实现的。事实上,这种想法不利于自己的成长和职业发展。今天设计达人和大家分享原型设计的概念和意义,以及如何做出好的原型设计,希望大家对原型设计有更为全面的认识。
一个好产品,离不开好的原型设计。大到产品的整体架构,小到一个功能点的设计,都起源 于原型设计。UI设计师的未来职业发展方向之一是全链路设计师或者产品设计师,而优秀的原型设计能力就是必备技能之一。
1.1 基础认知
1.1.1 什么是原型
原型是对一个产品的可视化呈现,主要传达一个产品的信息架构、内容、功能和交互方式。
它是产品功能和内容的示意图,一般包括线框图以及交互说明。原型是产品设计初期供整个 团队参考、讨论、评估的主要依据。之前讲过的需求文档也包含对功能和内容的说明,但原 型并不是简单地把需求文档图形化。
如果在需求分析的前期,设计师能够和产品经理等人员一同进行产品定位、竞品分析和用户 研究等工作,再根据研究结果、项目资源等情况来筛选和分析需求,加上自己的思考和设计 方法,把需求转化为设计方案,再细化成线框图和交互说明,最后形成一份能让双方达成共 识的原型文档。那么设计师接下来的工作就会比较顺利地进行下去,并且在团队中的话语权 也会逐步提升。
1.1.2 为什么要画原型
原型具有快速创建、聚焦易用性、修改成本低等不可取代的优势。
快速创建是指设计师不需要考虑太多细节和视觉表现手法,可以快速出图;聚焦易用性是指 将产品设计的重点放到功能的易用性上,不会被视觉设计所干扰;修改成本低,是指线框图 比视觉设计稿更容易、更快速地修改,耗时短,效率高。
对于设计师来说,一个好的设计想法,如果没有清晰、标准的表达方式,其效果会大打折 扣。由于原型可以被快速创建、快速修改的特性,使得产品设计团队能够把多种设计方案种 做直观的对比试验,可以快速地进行可用性测试并直接地获得反馈,轻松修改或者放弃某些 设计方案。
对于项目组来说,原型是项目开发的标准和依据,通过设计原型,项目组人员能够更高地理解产品逻辑,将需求具体化,从而可以量化地评估视觉设计与开发的排期。在这里要注意的 是,原型的使用者不仅仅是视觉设计师和开发工程师,还有测试人员,可能有市场人员、甚 至法务人员等各种不同职能的人员,为了让这么多种不同的角色都能理解你的设计方案,原型务必要表达得直观、清楚、规范。
1.2 进阶理念
1.2.1 从最简单的开始
很多设计师,当接到一个庞大需求的时候,总是没有思路,以至于迟迟不想打开软件。由于 需求太多太复杂,给了设计师太多的压力。其实,万丈高楼平地起,任何复杂的产品,都是 从基本功能开始的。在这里,有一些很简单的步骤,可以让你快速起步:
- 页面上要放置什么功能或内容;
- 排列这些功能的优先级;
- 如何表现这些功能的优先级;
- 依次设计每个部分的具体内容,逐渐增加细节。
1.2.2 不要过分追求精致
设计精致的原型图固然很好,我们都喜欢精细打磨的设计。但是在设计初期,最好不要陷入 作图的细节里,人的注意力是有限的,我们应该重点关注功能的位置、类别、顺序、层次, 页面的逻辑关系。有很多优秀的设计师是使用纸和笔快速开始的,在初始的阶段,最重要的 是想法,而线框图的精致程度,不应当成为这一阶段所追求的目标。
1.2.3 目的是讨论和优化
几年之前,我参加了阿里某产品设计师的一次讲座,他的观点之一就是:在产品设计的前期 不要怕改稿,原型图就是用来修改的。
我相信大部分设计师,都不喜欢改稿,但是我们制作原型的目的就是以此为依据进行讨论、 修改。否则到了视觉设计、甚至到开发阶段再修改,成本会比修改原型大很多。其实设计原 型的阶段,有一大半时间是要花在讨论、评审和优化上,这也是原型设计的意义所在。
1.2.4 人人都要画原型图
一般的产品部门有产品经理、交互设计师、UI设计师这三个角色。当然很多公司没有专职的 交互设计,只有产品经理和UI设计师,UI设计师同时承担着交互设计的工作。
产品经理进行需求确认,交互设计师其实在做一种需求翻译的工作,将产品的商业需求,进 行具象化,并加入一些用户视角,设计线出框图。最后由UI设计师产出高保真视觉图。这三 种角色,在实际工作中,都应该通过画原型图,来优化自己的设计。但是,他们画原型图的 重点是不同的。
作为产品经理,画原型图有时是不可以避免的,产品经理需要通过画原型来细化思路,理清 产品的功能点、内容块和业务流程,帮助自己写好需求文档,以便更好传达自己的需求给其 他人员。还有一些概念性项目,需要根据原型来让老板认可并做决定。
而作为交互设计师,在画原型图是需要重点关注一下几点:
- 目标和流程——根据需求和目标,分析用户的操作流程,并且尽可能地简化操作流程;
- 布局和结构——内容或功能分为几类,应该采用哪种布局,使其更加易用;
- 位置和顺序——各个版块内容应该按照怎样的顺序进行排列,来引导用户的行为;
- 层次和轻重——各版块、内容的层次该怎样区分,优先级应该如何排序。
到了视觉阶段,UI设计师不管接到多么精致的线框图原型,也需要重新进行思考,不要当原 型上色师。我们需要结合目标用户特征、需求以及当下设计趋势,进行产品的风格定位。有 些时候要改变原型的位置和结构,以达到更好的效果。
要注意的是在修改之前,要同产品经理和交互设计师保持沟通,通过一些自己画的视觉原型 图,向他们表达一些视觉设计上的想法,毕竟每个角色都会有自己的知识盲区。当你的修改 意见取得了其他人的认可,就可以根据这一版本的原型,进入视觉设计的阶段。
1.3 设计实践
1.3.1 原型设计的步骤
① 建立控件库
控件是指界面中所有的最小元件。
例如:按钮、图标、文本框、单选框、复选框、开关、图片占位符等控件。
② 建立组件库
组件是一种功能模块,它能够被重复使用,从而提升设计效率,并且可以保持界面的一致性 和规范性。
例如:图文列表、图文卡片、表格、筛选条件、文件上传、系统反馈、弹出框等组件。
③ 绘制流程图
流程图表达的是一个用户的操作过程,通常我们基于普通用户,如果时间和资源允许,也可 以绘制特殊用户的操作流程图。流程图的作用在于梳理和规范流程,在绘制流程图时,我们 要注意逻辑的清晰和完整,每一个流程分支都代表着用户的一个决策节点,需要我们进行深 入地思考和设计。
④ 设计关键页面
例如:首页、详情页、个人中心、设置等页面
⑤ 设计辅助页面
例如:注册登陆页、找回密码等页面
⑥ 设计关键功能故事板
故事板,顾名思义就是讲故事的板子。故事板可以帮助我们将用户角色,使用场景和使用流 程串联起来,将抽象的体验过程具象成图文结合的形式,使团队成员可以通过某个角色来观 察我们关键功能的使用场景,并观察用户的操作的流程,使产品设计师能够对用户体验进行 更直观和深入的挖掘和思考。
故事板三要素:角色、场景、情节。角色要说明包含几类用户群体;场景要说明包括几种使 用场景;情节要说明用户目标、触发事件、行为流程和行为结果。
⑦ 原型注释与交互说明
原型设计文档必须包含清晰的注释和交互说明。控件的不同状态、链接的指向、页面的跳 转、操作的结果、报错信息及其展示方式等交互说明内容,都需要在原型注释中用文字准确 的描述出来。
1.3.2 原型设计的注意事项
我们在做原型设计时,要把原型的阅读者想象成对产品和设计一无所知的人,该怎样图文并茂的展示产品的逻辑和功能,才能够让其通过原型来理解这个产品,需要注意以下几点:
- 使用灰度线框图:颜色和视觉效果会影响大家对易用性的判断;
- 清晰地展示流程:顺畅的操作流程是产品易用性最基本的标准。
- 关键功能要有故事板:角色、场景、情节,使团队人员更快、更好地理解产品。
- 要有注释和说明:图文并茂更能准确传达设计方案与想法。
- 一致性和规范性:优秀原型的元素、组件、页面甚至是文案用语的调性都规范一致的。
以上内容来自zcool(站酷)博主UX_Milk的文章
转载来源:https://www.shejidaren.com/prototype-design-in-ui.html
2. 几款优秀的原型设计工具推荐
2.1 Axure RP
Axure RP是一款专业设计师不容错过的原型设计工具,设计师可以用它快速创建应用软件或Web线框图、流程图、原型和规格说明文档。作为一款专业的设计工具,它能快速、高效的创建原型,但对于新手来说,需要投入较高的学习成本。个人认为,这款软件强大之处在于事件交互上面。至于界面UI效果相对后面介绍的相对较差一些,需要个人一点一点调试。虽然上手难度比较大,但是作为老牌的原型设计工具,个人是最值得推荐的一款工具。
2.2 码前
码前,DevBefore,https://www.devbefore.com。一个人轻松搞定「需求+产品+UI」所有设计工作;只需简单勾选、无需专业技能,零基础使用。
码前DevBefore是是2021年12月份款发布的UI设计平台,到现在才不到半年,这款年轻的原型设计工具有什么特殊呢?
如果说Axure是Photoshop的话,那么码前就是美图秀秀,它们的区别就好像专业的和业余的。Axure优点是专业,但它的缺点也是专业性,因为Axure适合专业的人群使用它,对于小白来说上手难度太大,而码前是一个提供了简洁的风格,有丰富的模板,极简的操作性。
在工程化的角度,码前更全面一些,就如它的名字 “准备好编码前的一切”
一站式在线设计平台——码前可以一站式完成编码前所有设计工作,需求梳理+原型设计+ui设计一个人统统搞定。而Axure一般都是搭配Sketch的,这对windows系统的用户很不友好。
码前免费使用,是互联网产品人提升工作效率的神器,海量需求模板库覆盖各个行业,一键生成产品需求导图,可根据需求在线编辑;需求导图一键生成产品原型,不用为设计原型图而苦恼;在线ui设计,支持Sketch导入,一键切图和标注。
2.3 墨刀
墨刀(https://modao.cc/brand)致力于简化产品制作和设计流程,采用简便的拖拽连线操作,作为一款在线原型设计软件,墨刀支持云端保存,实时预览,一键分享,及多人协作功能,让产品团队快速高效地完成产品原型和交互设计。
墨刀与Axure一样是使用人群特别庞大的工具,操作也简单,还有大量的素材库和模板库,就是价格优点贵,我个人感觉它比Axure操作性更强,上手也比较容易。
2.4 Mockplus
Mockplus(https://user.mockplus.cn/choose-product)也是一个UI设计的一站式平台,有专业版,有协作版,还有UI设计。它的基础版免费使用,操作简单,.上手快, 交互简单(只需拖曳就可以),功能多样,组件资源丰富,预览方式和导出类型多样;有原型演示,可以帮助前端设计师、后端程序员更好地理解你的原型产品。mockplus有组件库和图标库,界面设计较为方便。我个人感觉它比墨刀更容易上手一些,设计原型更容易一些。
当然它也有一些缺陷,比如不支持鼠标悬停,手机预览不是很清楚,日历表组件是静态的,表格功能还需要完善。
总结
工具 | 类型 | 功能 | 素材与模板库 | 协作与分享 | 生产效率 | 价格 | 上手难度 |
---|---|---|---|---|---|---|---|
Axure | 软件 | 强大 | 无 | 支持 | 低 | 适中 | 专业级 |
墨刀 | 网页 | 较强 | 丰富 | 支持 | 较高 | 有免费版和终身版 | 容易 |
Mockplus | 一站式 | 较强 | 丰富 | 支持 | 较高 | 免费 | 容易 |
码前 | 一站式 | 较强 | 较少 | 支持 | 高 | 仅个人版免费版 | 小白级 |
看个这个总结,对于非专业的我来说,还是Mockplus和DevBefore对我比较友好,建议专业的人群还是Axure和墨刀更合适,当然也可以都学学。
3. 基于DevBefore的“高校二手交易平台”原型设计实战(快速构建)
“高校二手交易平台”的原型设计
3.1 快速入门码前
码前的设计界面如图,
在顶部有 需求——原型——UI 的一条龙选项卡。
在左上角有新手指导,可以让你1分钟内上手DevBefore。
3.2 需求梳理
在设计原型之前,我们应该先清晰有哪些需求,或者说我们这个“高校二手交易平台”应当有哪些功能。
DevBefore已经集成了需求梳理这个功能,为了快速设计出一个原型,我们直接用这个工具边分析边梳理需求。我认为,边想边做效率能更高点哦。
我们选择需求梳理,可以看到高校二手交易平台的项目名,双击它:
然后会有弹窗,在这里可以添加功能模块
参考淘宝App,一个交易系统应该有首页、搜索、商品分类、用户、支付、消息等这些最基本的模块。
对于用户,应该有注册/登录模块,二手交易平台用户即是买家又是卖家,所以还应该有个我的闲置,可以上传物品图片、定价等。
当用户点击进入某个商品时,应该有购物车之类的功能,有购买的选项,还有与卖主咨询的功能,为了增加互动性,用户可以在商品下评论。
需求大概就这么多,然后就用需求梳理:
这个是简洁版的,下面这个是其中一部分
右边有导出功能,可以将功能图导出为图片或者pdf
需求分析好后,可以一键生成原型
在原型设计这一栏中就把所有的页面一键生成了。
3.3 设计全局模板
我们可以使用左边的图标和组件设计出下面的模板
这个交易平台的整个网站都会以这个样式为模板。
我们可以克隆该页面,在其基础做修改成新的页面。
拖动这个可以拉长页面高度。
3.4 设计二级页面
首页设计,添加了一个搜索的组件
商品分类页面,添加了两个组件,导航栏标红
消息以及聊天界面,我是使用复选框设计的
设计个人中心页面
建立页面链接,将点拖动到对应的页面上即可创建链接,当用户点击它时,就跳转到链接的页面。
这这里可以运行演示,还可以分享、创建版本:
我已经将版本链接分享出来了v1.0.0,你可以直接点击这个链接查看这个半成品。
3.5 商品页面
3.6 支付模块
3.7 登录与注册模块
登录页面
注册页面
到这里这个原型的基本轮廓就差不多了,成品展示在这里:https://www.devbefore.com/control/protomobile/83409172065955840
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战