wireframe,prototype,mockup 三者经常被混用,很多人把三者都叫原型,真的是这样吗?
我们来看看三者到底有何不同。先来做一道选择题:

从这张图可以看出,prototype 和其他两者的不同之处在于是否可交互,可点击,prototype 是动态的;而 wireframe 和 mockup 则是静态的。wireframe 和 mockup 之间的区别则在于是否高保真。
 
wireframe 之于 prototype 就像建筑蓝图之于样板房。
对比图
 

wireframe——不关注外观,只关注功能

wireframe

中文称「线框图」,用来表达产品的概念、产品架构、内容优先级、页面布局和操作逻辑。它专注于产品的主要功能和在不同的场景中该如何操作,因此视觉元素应尽量简化,甚至不需要考虑,用色以黑白灰为主,最多再加上蓝色,蓝色通常用于导航栏与下方区块的区分。它是低保真的。

可以在纸上手绘

产品设计教程:wireframe,prototype,mockup到底有何不同?的更多相关文章

  1. 产品设计教程:利用“系列位置效应”优化UI

    任何博得人们喜欢的产品都在一定程度上契合了用户的心理需求.设计和心理学息息相关,掌握一些基本心理学知识,设计师的作品更能在潜意识中抓住用户的心. 系列位置效应 “系列位置效应”(The Serial ...

  2. 产品设计教程:如何理解 px,dp,dpi, pt,看这一篇就够了

    先聊聊熟悉的几个单位 围绕着各种屏幕做设计和开发的人会碰到下面几个单位:in, pt, px, dpi,dip/dp, sp 下面先简单回顾下前四个单位: “in” inches的缩写,英寸.就是屏幕 ...

  3. 机械学习笔记1 -> Solidworks三维产品设计与建模1 | 建模基础入门

    学习之余,课余了解一点点,作为爱好,妄想以后能够设计机甲出来. 学习来源是Solidworks三维产品设计与建模 00 工作界面介绍 00-1 概览 有时菜单栏和工具栏会重叠在一起,只有点击左侧三角才 ...

  4. 产品设计中先熟练使用铅笔 不要依赖Axure

    在互联网产品领域,Axure已成为产品经理.产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解 ...

  5. 如何为Android上的产品设计一款合适的图标

    如 果你已经完成了你的app,你一定会马上向其它人宣布这件事情.但是你需要注意一个很重要的问题,那就是app的图标.你的图标可能在项目启动之 前就已经设计好了,但我不喜欢这样,如果app没有完成实际上 ...

  6. AI产品经理工作流程——需求分析和产品设计

    1.AI产品设计常见失败原因 技术驱动产品设计,即我有什么技术就做什么产品.尽管许多公司不惜重金招聘高级AI算法工程师,确实这样也能帮助企业拿到大量的融资,但也容易给公司带来技术决定产品设计的局限.然 ...

  7. 【产品 & 设计】入门 - 工具篇 - Sketch + Skala Preview

    前言 做产品和设计快 1 年了,积累了一点经验分享一下 —— 抛砖引玉,欢迎交流. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: ht ...

  8. 看svn用户组管理功能的产品设计

    我负责公司的svn配置.用了近一年了,今天饶有兴致,分享一下svn的用户组管理功能,这个产品设计值得借鉴,简单易用. svn用户组管理的功能描述:新建用户组,并给组分配成员用户:编辑用户组,包括修改组 ...

  9. 2013年最佳的16个 Photoshop 设计教程推荐

    使用 Photoshop 的时候,没有基础操作知识的话,用起来会非常困难,所以你应该阅读一些教程才能应用它们在你的工作中.在这篇文章中你看到的 Photoshop 教程的集合是2013年发布的最优秀的 ...

随机推荐

  1. 01List.ashx(班级列表动态页面)

    01List.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

  2. ABP之事件总线(3)

    承接上一篇时间总线的学习,在上一篇中我们实现了取消显式注册事件的方式,采用使用反射的方式.这样的好处可以解除Publisher和Scriber的显式依赖,但是问题又来了,因为我们只有Publisher ...

  3. Nodejs----注册登录

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  4. 关于device tree中的interrupts选项

    http://blog.csdn.net/jiang__jiang/article/details/52064715 随着Linux的发展,dts技术是大势所趋.里面的interrupts = < ...

  5. Jenkins设置备份

    安装备份插件,系统管理-插件管理 可选插件搜索backup 备份 系统管理-Backup manager 设置备份路径 恢复

  6. HDU 4699 - Editor - [对顶栈]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4699 Problem Description Sample Input8I 2I -1I 1Q 3LD ...

  7. BZOJ 1150 - 数据备份Backup - [小顶堆][CTSC2007]

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1150 Time Limit: 10 Sec Memory Limit: 162 M De ...

  8. [No000010C]Git5/9-远程仓库

    到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了. 可是有用过集中式版本控制系统SVN的童鞋会站出来说,这些功能在SVN里早就有了,没看出Gi ...

  9. rtd1296 mtd 设备驱动分析

    mtd 分区一般采用3种方式实现 1.内核写死  mtd_partition 2.u-boot 传参 为了使kernel能够解析mtdparts信息,我们需要将内核中的Device Drivers - ...

  10. php之二叉树

    二叉树的特点: ①.每个节点最多有两个子树,所以二叉树中不存在度大于2的节点.注意不是只有两个子树,最多有两个子树,没有子树或者只有一颗子树都是可以的. ②左子树和右子树是有顺序的. ③即使树中只有一 ...