线框图 原型图 这俩有啥区别？

这是啥：

一本和“人机设计”有关的笔记。啥时候有空了，哪怕3分钟，你都可以捡起来，边看边吐槽木龙。

写给谁看：

对“人机设计”感兴趣的人。如果你想短期内让自己像个老鸟设计师，或仅仅是想从中脱颖而出，或和他们有工作交集，或想了解他们的思维方式，甚至是想和他们建立连接以达成你的目的，这本笔记对你都有价值。如果不是，那可能你只能看到我在瞎说。

写些什么：

行为心理学、人际关系tips、个人形象提升、软件技法、设计潮流。

---

线框图 原型图 这俩有啥区别？

如果不明白这个概念，很可能你对人机交互产品的开发流程就是模模糊糊的...

线框图：简单来说就是【低保真的，需求排布，与操作流程界面】。咱拆开来说：

  1.低保真：用黑白灰的线条与方框，注明这个产品的“骨架”即可，在这个阶段切忌过分追求细节，比如按钮形状、跳转动画、动效反馈等。

  2.需求排布：搜集起来需求之后，按照优先级，在线框图内明确规定需求的顺序、从属结构、篇幅或排期安排 

  3.操作流程界面：就是整个人机之间的交互动作是怎样的，点了某按钮后跳到了哪里、弹出了什么提示，流程是否畅通。这个流程面向的用户认知结构越简单，或用户构成越大众化，就越需要减少每个页面主要操作的数量，比如百度搜索框最重要的操作只有一项“搜索”，以前的“图片、视频、音乐、文库”等次级入口现在都被安排在了页面顶部，最重要的搜索入口则唯一保留在页面正中央。

原型图：这是最接近产品最终样式的视觉与交互流程，【除了没进入正式开发，其他能被看见的细节都包括了】，用于和客户、产品、开发、市场等同事来沟通用。在这个阶段，色系、排版、动效等视觉性的元素都应该基本就位了。

考虑到经常需要进行敏捷开发，所以开发同学在拿到一份确定的线框图之后就可以进入开发状态啦，等原型图甚至最终设计图完成后，就可以切图替换素材了。