原型设计

原型设计

​ 当今快速成长的产品行业中,用户体验(UX)设计变得越来越重要。很明显,以设计为导向的公司相对于其他公司更有竞争力。“原型”对创造成功的用户体验至关重要。但是对许多产品团队来说,原型仍然是UX设计过程中最令人困惑的部分之一。毫无疑问,原型可以是任何东西,从一系列代表app的不同界面或状态的纸质草图,到功能齐全、像素完美的app。

一、什么是“原型”

​ 我们经常在不同的背景里看到“原型”这个词。 由此,我们很可能已经混淆它的真正含义。
它最基本的含义:原型是设计想法的表达。原型让设计师们得以展现他们的设计,以及模拟真实的使用场景。在数字化的背景下,原型能够模拟用户与界面之间的最终交互行为。根据产品团队的需求,原型可以模拟整个app或仅单个交互行为。原型可以模拟最终产品的运作方式。它支持产品团队测试其设计的可用性和可行性。也有很多人将原型与草图,线框图和模型混淆,实际上它们不同于原型。“交互性”这个概念是原型的根本,因此这就是为什么草图,线框图和模型不能被视为“原型”的理由。

二、原型设计工具

墨刀

​ 墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。墨刀同时也是协作平台,项目成员可以协作编辑、审阅,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是在团队内部协作沟通、项目管理 。
适用范围:为企业级用户高保真原型图,多为移动端app。

优点:组件功能丰富;交互简单快捷;有PC,网页,手机多个客户端;可以使用手机预览原型。

缺点:只能在线操作;免费版内容受限;自由度一般,不是特别灵活。

Axure

​ Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
适用范围:为企业级用户高保真原型图,多为网页端原型设计,并可以直接导出HTML文件。

优点:自制素材功能强大;交互功能丰富;有较为完备的团队管理功能;制作网页简单,能导出HTML。

缺点:上手难度大,学习成本高;正版软件价格高昂;长期使用容易卡顿;移动端原型设计不如另外两种。

Mockplus

​ 摹客(Mockplus)是成都摹客科技有限公司旗下设计协作品牌,专注于一站式的产品设计和协作平台,为产品开发团队提供全流程协作、高保真设计和设计规范管理支持。摹客可以自产出高保真设计,支持多款主流设计工具(Sketch/PS/XD/Axure等)的设计稿交付,团队成员在产品、设计到开发的各个工作环节,利用多种设计工具,都能使用摹客平台协同工作。
适用范围:为企业级用户高保真原型图。

优点:操作简单,上手容易;组件丰富,预览方式多样。

缺点:不支持手势交互;不支持鼠标悬停。

三、保真度

什么是”保真度“?

原型不一定要看起来像最终产品——它们可以有不同保真度。 原型的保真度指的是它如何传达最终产品的外观(也就是指它的细节和真实感级别)。

保真度可以在以下方面有所不同:

  • 视觉设计

  • 内容

  • 交互性
    原型的类型有很多,基本介于这两种类型之间。

  • 低保真

  • 高保真

产品团队根据原型设计的目的、设计完整性和可用资源来选择原型的保真度。

低保真原型

低保真(lo-fi)原型设计是将高级设计概念转换为有形的、可测试物的简便快捷方法。它首要的也是最重要的作用是——检查和测试产品功能,而不是产品的视觉外观。

以下是低保真原型的基本特征:

  • 视觉设计:仅呈现最终产品的一部分视觉属性(例如元素的形状,基本视觉层次等)。
  • 内容:仅包含内容的关键元素。
  • 交互性:原型可以由真人模拟。 在测试期间,熟悉页面流程的设计师就相当于一个“计算机”,实时手动呈现设计页面。此外,也可以给线框图制作交互效果,这种称为“交互线框图”。

优点:

  • 便宜。 低保真原型制作的明显优势在于其极低的成本。
  • 快速。 可以在五到十分钟内创建一个低保真纸原型。 让产品团队可以毫不费力地探索不同的想法。
  • 协作。 这种原型设计刺激了小组协作。它的设计不需要什么特殊技能,因此更多人可以参与到设计过程。 即使是非设计师也可以在创意过程中发挥积极作用。
  • 清晰。 团队成员和利益相关者对将来的项目有了更清晰的期望。

缺点:

  • 测试期间的不确定性。 使用低保真原型,对于测试者来说,容易不清楚到底什么本来是有效的,什么不是。另外,低保真原型需要用户充分的想象力,也限制了用户测试的效果。

  • 有限的交互性。 使用这种类型的原型想要传达复杂的动画或转场效果是不可能的。

高保真原型

高保真 (Hi-fi) 原型的呈现和功能,尽可能类似于发布的实际产品。 当团队能深入了解产品的预期,需要与真实用户一起测试,或获得利益相关者的最终设计批准时,通常会创建高保真原型。

高保真原型的基本特征包括:

  • 视觉设计:逼真细致的设计 – 所有界面元素、间距和图形看起来就像一个真正的app或网站。
  • 内容:设计人员使用真实或类似于真实内容。原型包括最终设计中显示的大部分或全部内容。
  • 交互性:原型在交互层面非常逼真。

优点:

  • 可用性测试期间获取有意义的反馈。对于用户来说,高保真原型通常看起来像真正的产品。这意味着,在可用性测试会话中,测试参与者将更有可能自然地表现——就好像他们正在与真实产品交互一样。
  • 对特定 UI 元素或交互的测试。借助高保真交互性,可以测试平面元素,或特定交互, 比如动画过渡和微交互。
  • 轻松获得客户和利益相关者的认同。这种类型的原型也适合向利益相关者演示。它使客户和潜在投资者清楚地了解产品应该如何工作。一个优秀的高保真原型让人们对你的设计感到兴奋,但低保真的原型则不然。

缺点:

  • 成本较高。 与低保真原型相比,创建高保真原型意味着更高的时间成本和财务成本。

四、 原型设计实战—在线蒸汽波播放器

​ 近年来,亚文化越来越流行,甚至已经成为了一种主流。其中的一种文化——蒸汽波是一种由艺术运动延伸出的音乐形式,其多从20世纪80—90年代的歌曲中采样,复古动感,舒缓流畅,有水汽弥蒙之感。对于大多数音乐平台,蒸汽波这种小众曲风十分难以寻找。因此,我设计了在线蒸汽波播放器,它将实现蒸汽波的播放,下载,保存喜欢的歌曲、歌单,根据喜欢的歌曲智能推荐蒸汽波歌曲。该原型使用墨刀来制作,包括四个界面:

主页

主页可以看到所有功能并且能推荐一些蒸汽波歌曲,可以进入其他页面。

私人FM(推荐)

该功能会智能的为用户推荐蒸汽波歌曲,可以对歌曲进行下载或收藏等功能。

我的喜欢

该界面为记录我的喜欢的界面,可以实现播放歌曲,添加或删除歌单中喜欢的音乐。

播放界面

播放界面有基础音乐功能的同时,可以查看歌词,勾选音乐为我的喜欢,下载,收藏,分享等功能。

posted @ 2021-05-20 10:48  meguriri  阅读(318)  评论(3编辑  收藏  举报