设计师朋友们都知道,在网站开发或者手机应用开发的前期阶段,需要创建线框图和原型图给客户展示。但有时候客户会提出略过线框图和原型图设计的阶段,直接过渡到网站的界面设计甚至是开发阶段。这种想法,往往是源于客户不明白什么是线框图,什么是原型图,以及二者在整个项目阶段中的重要性。

首先阐明一个误区,线框图不等于原型图。明确了这个概念之后,我们再来区分二者。

1. 什么是线框图?

线框图是一个网站图形化的骨架,引导一个页面的内容及概念,能够帮助设计师和客户讨论具体的网站层次和导向。一个简单的线框图只需要使用线条、方框和灰阶色彩填充,黑白色的布局整体呈现为低保真设计图,主要呈现主体信息群,勾勒结构和布局,表达用户交互界面的主视觉和描述。

2. 为什么要做线框图?

线框图对于产品的作用就如同建筑蓝图,在项目的初始阶段规定好产品各方面的细节,作为整体项目说明。也因为绘制起来简单、快速,它也经常用于非正式场合,比如团队内部交流。但并不能作为用户测试的材料。

3. 如何制作线框图?

简单的线框图一般只需要用线条、方框、文本、及按钮等基本的组件构成就可以了。因此,关于如何制作线框图,如何挑选线框图制作工具的问题,基于上述特点,我们可以使用Mockplus,Balsamiq等线框图工具。

Balsamiq是一款静态线框图绘制工具,手绘风和现成的控件在线框图绘制方面发挥了极大的优势,它产出的线框图比较适于给懂设计和开发的人员看。因为他们知道,线框图和最终的成品是有区别的,也明白二者之间的运作方式和内在联系。

相对于Balsamiq, Mockplus在动态交互方面则更胜一筹。同样是简单快速的线框图工具,Mockplus产出的交互式线框图可以更直观生动的向开发团队和毫无设计和开发基础的客户演示项目,而不需要冗长的说明。

1. 什么是原型图?

原型图是接近于中高保真的设计稿,和线框图不同,原型图是动态可交互的,一些高保真的原型设计甚至和最终的产品看起来相差无几,因为它们不仅拥有细致到位的视觉设计,同时尽可能的模拟真实的产品界面和功能上的交互,提供完整的产品体验。

2. 为什么要做原型图?

原型图除了作为项目演示的功能之外,可交互式原型常常也用于产品正式开发前的用户测试。早期的原型测试可以节省巨大的时间和开发成本。一个可批注,可团队协作的原型图更加有利于设计师和开发人员之间的沟通,省去了来回修改和大量发送图片和PDF文档这个繁琐的步骤。对开发人员来说,他们可以在经过反复测试的原型图基础上拿出更加完善的代码实现方案,而不至于浪费开发成本和精力。

3. 如何制作原型图?

基于原型图中高保真,且必须可交互的特点,原型图的制作最好是选择专业的原型设计工具,但究竟如何选择原型工具,也需要根据不同的标准做判断。

从保真度来说,Justinmind擅长于精细制作的高保真原型图,但要掌握好它的交互设置,触发条件,条件判断和变量等一系列复杂的操作,还是颇费功夫。

从制作效率来说,Mockplus更符合简单、快速的中高保真原型图设计。高度封装的交互组件,简单的拖拽交互,实用的团队协作和在线审阅,更满足设计师和开发人员节省时间和开发成本的需求。

线框图和原型图有什么区别?

线框图可以说是原型图的一种,原型可以在线框图的基础上进行设细化和设计。从演示效果来说,线框图是静态展示,而原型图是动态的可交互式展示。从功能上来说,原型代表了最终产品,常用于潜在用户测试;线框图常用于项目初期,展示布局和功能,用于讨论和反馈。

你真的搞懂什么是线框图,什么是原型图了吗?相关推荐

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

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

  2. inputstream重新赋值之前需要close吗_变量提升真的搞懂了吗?打脸的一道题

    变量提升真的搞懂了吗?打脸的一道题 我们知道JS代码在执行之前,会做一系列的事情,其中就包括变量提升,原本以为把变量提升搞懂的我(因为这两天一直在研究变量提升,自我感觉已经很良好了,哈哈哈),拿到了一 ...

  3. Python使用matplotlib进行3D可视化分析:3d柱状图、3d直方图、3d线框图、3d曲面图、3d翼面图(莫比乌斯环)

    Python使用matplotlib进行3D可视化分析:3d柱状图.3d直方图.3d线框图.3d曲面图.3d翼面图(莫比乌斯环) 目录

  4. 华硕h81m一k跳线图_股票入门基础知识:你真的看懂了K线图了?【建议收藏】1...

    导言--就技术分析而言,我们应该牢记这样得一个原则:事物的后续发展常常和他们之前的表象不一致.我们自以为了解很多事实并不是事实,一些看起来显而易见的事情,有时并不是如此. 最近很多人,说,好像股市最近 ...

  5. java 线框图,你知道线框图和原型有啥区别吗

    编者按:这篇文章出自UXPin的首席执行官Marcin Treder. 线框图并非是原型,但即使是经验丰富的设计师也可能会将两者混为一谈.实际上,两者的差别还是非常多且明显的,那么就让我们通过这篇文章 ...

  6. 原型图 线框图_16个原型设计和线框图设计工具

    原型图 线框图 8. Balsamiq样机 (8. Balsamiq Mockups) Balsamiq Mockups (price:$US79, demo available) is an int ...

  7. 你真的搞懂了负数取模吗?

    如果现在给你出下面这道面试题,你能答出来吗? -7 % 3 = ? 那这个呢? 7 % (-3) = ? 正整数的取模大家应该玩的很溜了,(什么,正数的都不会,那自己去谷歌吧,百度也行.) 对于负数呢 ...

  8. C/C++中的移位运算你真的搞懂了吗?一文看懂移位运算

    移位运算,很多人都是知道,但是又没有完全懂.这是因为移位运算的规则还是稍微有点复杂.因为移位运算分有左移.右移,同时还得区分逻辑移位和算术移位,并且还需要考虑移位超出数据长度的情况. 1 概念区分 首 ...

  9. 你真的搞懂ES6模块的导入导出规则了吗

    前言 模块作为ES6规范的核心部分之一,在实际项目开发中经常会看到它的身影,那么我们是否真正了解它的相关规则呢,今天就带大家一起了解一下模块的导入导出规则 导入 ES6模块的导入(即import)大致 ...

最新文章

  1. php 邮编正则,php抓取百度邮编搜索结果,应改如何写正则表达式?
  2. JVM上的响应式流 — Reactor简介
  3. java搜索文件夹中文件是否存在_java中判断文件文件夹是否存在的方法(附代码)...
  4. Nginx(二):反向代理原理 与 配置文件详解
  5. 进程的并发与并行,三种状态
  6. 定时器new Timer().schedule()的使用
  7. Thinkphp5内核大型程序员交流博客系统源码
  8. Yarn报错:error Couldn‘t publish package: “https://registry。。。 Are you logged in as the correct user?“
  9. 停电导致IIS问题,解决inetinfo的CPU占用很大
  10. Nginx + Lua搭建文件上传下载服务
  11. 用continue计算100以内奇数和_一分钟明白break和continue
  12. 手机app抓包工具/web抓包工具之Fiddler——手机app抓包设置
  13. codevs1253 超级市场(dp)
  14. AOP核心概念,连接点(JoinPoint)切入点(Pointcut)通知(Advice)通知类切面(Aspect)
  15. 笔记本电脑双显卡怎么切换独立显卡的方法
  16. 使用欧元符号€作为hive表的分割符
  17. 《日语综合教程》第七册 第四課 読み物 初日影のなかで
  18. InfluxDB添加用户认证
  19. android ram rom测试工具,RAM与ROM测试方法
  20. 微服务架构的中国式落地

热门文章

  1. 毕业礼物——“广工云毕业”小程序开发
  2. 春天,陪你一起去赏雨——HTML5下雨效果
  3. 人形机器人视觉处理——垃圾分类
  4. 分享制作异步多人游戏的方法和经验(转)
  5. 计算机组成原理:真值,原码,补码,反码,移码
  6. 《开拓者研发团队》 团队作业5—团队项目需求改进与系统设计
  7. VC++ MFC资源中添加PNG,JPG等图片资源
  8. 用Python做个小网站(MVC架构)
  9. 海底捞,我们该学什么?--《海底捞你学不会》读后感
  10. 关于DistroWatch