大部分用户体验设计师在项目中会创建很多交付物,某些交付物用于用户研究,另一些交付物用于用户体验设计,其中最重要的交付物是线框图和设计原型图[1]。
  线框图和设计原型图属于最重要的交付物,原因如下:

  • 便于客户理解;
  • 表达愿景和期望‘
  • 展示用户接口;
  • 最具可执行性;
  • 创造了最大的变化和影响[2];
  • 便于讨论及协作;
  • 监督进展情况。

  设计者将大量时间和精力放在其它交付物上是种浪费,他们应该把大部分时间放在线框图和设计原型图上。
  做用户研究有用,但用户研究的成果没那么有用。到了最后,只有少数人会关注用户研究成果,这些成果不具有可执行性,无法产生真正的变化或影响。换句话说,用户研究成果没有给出问题的实际解决方案。[3]
  如果你想解决某个设计问题并交流解决方案,线框图和设计原型图就是你所需之物,使用这两者设定愿景、激发变革、澄清理解,没有任何其他交付物比它们更有效。[4]

线框图

  线框图就像建筑学中的蓝图,其目的是传达内容的顺序、结构、布局、导航和组织。它并不表达视觉设计方面的信息,如图像、颜色和排版等。鉴于此,线框图通常用黑白两色制作。线框图重内容,不重形式。设计人员总是先做线框图,再做设计原型图。

设计原型图

  设计原型图传达了视觉设计方面的信息,包括图像、颜色和排版,线框图中不包含这些信息。设计原型图让你在实现之前就能对设计有像素级的认识,它重形式,不重内容。完成设计原型图后,就开始开发工作,以实现该设计。[5]

形式 + 内容 = 设计

  设计是形式和内容的综合统一。线框图将内容汇总在一起,而设计原型图将形式汇总在一起。这两者是设计的有力包装,每个设计师都应该知道如何创建它们。从线框图到设计模型图的演变是道美丽的风景,这风景不仅是指项目上的进展,还是指你做为用户体验设计者的进步[6]。

原文地址:https://uxmovement.com/wireframes/wireframes-vs-mockups-whats-the-difference/

[1]原文:Most UX designers make a variety of deliverables on a project. They make ones that communicate user research. And they make ones that communicate user experience design. But wireframes & mockups are the most powerful deliverables UX designers can make
[2]原文:They create the most change & impact.
[3]原文:It’s useful to do user research, but not user research deliverables. At the end of the day, only a few people will give your user research deliverables much attention. No real change or impact happens because they are not actionable. In other words, they don’t offer a practical solution to the problem.
[4]原文:If you want to solve a design problem and communicate the solution, wireframes and mockups are the way to go. They set a vision, inspire change and clarify understanding. No other deliverable does that as effective.
[5]原文:Mockups communicate the visual design aspects that wireframes don’t. These include imagery, color, and typography. They give you a sense of what the design will look like pixel-for-pixel before it’s brought to life. The emphasis of mockups is more on form than content. When the mockups are complete, they go to code and development to bring them to life.
[6]原文:Evolving a design from wireframe to mockup is a beautiful sight to see. It’s not just a sign that you’re progressing on a project, it’s a sign that you’re progressing as a UX designer.

(翻译)线框图和设计原型图之间的区别是什么?相关推荐

  1. 一些有趣的国外优秀产品设计原型图

    http://www.fallensnow.net/index.php/archives/1285 网站产品的原型设计是产品最早诞生的雏形,我们需要用产品的原型设计样稿去完成一些需求的初步呈现,同时, ...

  2. Axure 设计原型图 使用总结

    近一个星期,都在使用Axure来做原型图,记录一下小小的心得 网站,头部导航条,只能存在一种.要保持:样式,内容,颜色,统一化. 不可多态(也就是说: 一页网站只有一种导航条,不能存在两种导航条,如下 ...

  3. java 线框图_你真的搞懂什么是线框图,什么是原型图了吗?

    设计师朋友们都知道,在网站开发或者手机应用开发的前期阶段,需要创建线框图和原型图给客户展示.但有时候客户会提出略过线框图和原型图设计的阶段,直接过渡到网站的界面设计甚至是开发阶段.这种想法,往往是源于 ...

  4. 网站制作从原型图架构到设计开发的具体步骤

    一个优秀的经典网站从策划到执行完成不是一件简单的工作,对于很多外行用户来说,把网站建设想象的太过简单.今天我给大家分享一下高端网站制作的流程步骤,以供大家参考. 第一步:明确网站的定位.我们要明确自己 ...

  5. 你真的搞懂什么是线框图,什么是原型图了吗?

    设计师朋友们都知道,在网站开发或者手机应用开发的前期阶段,需要创建线框图和原型图给客户展示.但有时候客户会提出略过线框图和原型图设计的阶段,直接过渡到网站的界面设计甚至是开发阶段.这种想法,往往是源于 ...

  6. 好的产品经理都是这样绘制原型图的(下)...

    前几天分享了上篇:好的产品经理都是这样绘制原型图的... 今天来分享下篇,本篇(原型篇-下)主要内容: 原型图标注,画开发看得懂的图 同一个页面展示所有的交互状态 页面跳转关系图(不要做孤立的设计) ...

  7. 【校招VIP】推推产品项目课:从脑图到原型图,重点在于功能细节和用户交互

    VIP的服务,不一样的校招.大家好,我是校招VIP的大拿老师,我们今天继续商业实战项目:[推推]的小说详情模块原型图部分.在上节课中我们把脑图的逻辑讲完了,这节的原型图对产品同学来说是尤为重要的,因为 ...

  8. 30张设计师的手绘网页草图(原型图/框架图)

    原型图",大家可以看看国外的设计师们是怎样画的,或者参考他们用什么笔.本本什么的 ^_^ 个人网站的手绘框架图 网页设计框架图 彩色手绘Web草图 Initial Wireframe Ske ...

  9. 【系统架构】原型图验收的思考

    文章目录 什么是原型图? 原型图的特点有? 为什么画原型图? 怎么画原型图? 工具 规范 第二弹,讲讲原型图吧 什么是原型图? "原型"的最基本定义是"最终产品的仿真或样 ...

  10. AR项目总结之原型图

    本文目录 前言 1.原型图是什么? 2.为什么画原型图? 3.原型图的作用: 4.原型图的意义: 前言 原型设计是产品设计过程中最重要的步骤之一,但是原型设计仍然让一些设计师和项目团队感到头疼. 1. ...

最新文章

  1. 【青少年编程】【三级】青蛙捕虫
  2. 一次失败的尝试:Ubuntu 故障修复
  3. 搜python编程题_100+Python编程题给你练~(附答案)
  4. 写了一个Windows服务,通过C#模拟网站用户登录并爬取BUG列表查询有没有新的BUG,并提醒我...
  5. unity判断鼠标移动方向_【反向元气骑士】用unity实现俯视角射击是一种怎样的体验...
  6. linux下安装glibc-2.14,解决“`GLIBC_2.14' not found”问题
  7. linux中的opencv多版本共存切换的问题
  8. 20应用统计考研复试要点(part33)--简答题
  9. 关于 Node.js 参数 max-old-space-size
  10. 使用JavaConfig的SpringMVC4 + Spring Data JPA + SpringSecurity配置
  11. [CareerCup] 8.7 Chat Server 聊天服务器
  12. python输入三个商品_用python3采集shopify站点商品
  13. mysql 当前记录集不支持书签_关于使用视图进行分页时出现当前记录集不支持书签的错误解决方法及原因(asp)...
  14. duilib开发(十二):使用自定义控件
  15. 【渗透测试】VulnHub-Lord Of The Root: 1.0.1
  16. 按键精灵移动端系列 - IOS(苹果版)安装1.3.8 deb 下载地址
  17. 带alpha通道四通道的图片转成rgb三通道
  18. 【趣味】一个将任意数字分解成 114514 构成的公式的工具
  19. C语言字符串笔试题含答案
  20. js钢琴(含钢琴按键音效包)

热门文章

  1. 已知等价关系求商集_等价关系、商集和集合的划分.pdf
  2. 鉴相,鉴频以及环路跟踪算法的理解:
  3. 每日古文--邹忌讽齐王纳谏
  4. GitHub上十大热门Python项目
  5. [Excel]取消隐藏于取消隐藏
  6. 6. 单例模式有几种写法?
  7. 一个茴字有三种写法——吐槽C#9.0的Records
  8. 微信APP支付-签名问题
  9. 转帖:免费完美激活Windows7旗舰版
  10. DSP之LCD1602笔记