软件工程_04 原型设计


1. 什么是原型设计

在UI设计中,原型设计并非是自己可有可无的工作环节。很多UI设计师存在一个误区,认为原型设计是他人的工作,而自己是负责实现的。事实上,这种想法不利于自己的成长和职业发展。今天设计达人和大家分享原型设计的概念和意义,以及如何做出好的原型设计,希望大家对原型设计有更为全面的认识。

一个好产品,离不开好的原型设计。大到产品的整体架构,小到一个功能点的设计,都起源 于原型设计。UI设计师的未来职业发展方向之一是全链路设计师或者产品设计师,而优秀的原型设计能力就是必备技能之一。
在这里插入图片描述

1.1 基础认知

1.1.1 什么是原型

原型是对一个产品的可视化呈现,主要传达一个产品的信息架构、内容、功能和交互方式。

它是产品功能和内容的示意图,一般包括线框图以及交互说明。原型是产品设计初期供整个 团队参考、讨论、评估的主要依据。之前讲过的需求文档也包含对功能和内容的说明,但原 型并不是简单地把需求文档图形化。

如果在需求分析的前期,设计师能够和产品经理等人员一同进行产品定位、竞品分析和用户 研究等工作,再根据研究结果、项目资源等情况来筛选和分析需求,加上自己的思考和设计 方法,把需求转化为设计方案,再细化成线框图和交互说明,最后形成一份能让双方达成共 识的原型文档。那么设计师接下来的工作就会比较顺利地进行下去,并且在团队中的话语权 也会逐步提升。

1.1.2 为什么要画原型

原型具有快速创建、聚焦易用性、修改成本低等不可取代的优势。

快速创建是指设计师不需要考虑太多细节和视觉表现手法,可以快速出图;聚焦易用性是指 将产品设计的重点放到功能的易用性上,不会被视觉设计所干扰;修改成本低,是指线框图 比视觉设计稿更容易、更快速地修改,耗时短,效率高。

对于设计师来说,一个好的设计想法,如果没有清晰、标准的表达方式,其效果会大打折 扣。由于原型可以被快速创建、快速修改的特性,使得产品设计团队能够把多种设计方案种 做直观的对比试验,可以快速地进行可用性测试并直接地获得反馈,轻松修改或者放弃某些 设计方案。

对于项目组来说,原型是项目开发的标准和依据,通过设计原型,项目组人员能够更高地理解产品逻辑,将需求具体化,从而可以量化地评估视觉设计与开发的排期。在这里要注意的 是,原型的使用者不仅仅是视觉设计师和开发工程师,还有测试人员,可能有市场人员、甚 至法务人员等各种不同职能的人员,为了让这么多种不同的角色都能理解你的设计方案,原型务必要表达得直观、清楚、规范。
在这里插入图片描述

1.2 进阶理念

1.2.1 从最简单的开始

很多设计师,当接到一个庞大需求的时候,总是没有思路,以至于迟迟不想打开软件。由于 需求太多太复杂,给了设计师太多的压力。其实,万丈高楼平地起,任何复杂的产品,都是 从基本功能开始的。在这里,有一些很简单的步骤,可以让你快速起步:

  1. 页面上要放置什么功能或内容;
  2. 排列这些功能的优先级;
  3. 如何表现这些功能的优先级;
  4. 依次设计每个部分的具体内容,逐渐增加细节。

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

posted @   凤文Studying  阅读(1688)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示