主要内容
原型(Prototype) 最后更新: | 文章数: 23
产品原型简单的说就是产品设计成形之前的一个简单框架，对网站来讲，就是将页面模块、元素进行粗放式的排版和布局，深入一些，还会加入一些交互性的元素，使其更加具体、形象和生动。
-
23. 产品交互原型设计工具分享 2010-03-15 21:51
交互设计师的一项重要工作就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作，就是画出站点的大体wireframe(框架图)并结合批注、大量的说明以及流程图等，将自己的产品原型完整而准确的表述给产品、UI、重构/开发工程师等等，并通过沟通反复修改prototype 直至最终确认，然后进入后续的设计开发流程。 要完成以上复杂的设计和沟通工作，需要一个好的原型设 ... ...
-
22. 非原型 不设计 2010-01-20 21:18
在风起云涌的互联网浪潮中，产品迭代的速度越来越快。随着用户需求的激增，也不断带来了对设计师能力要求的提高。初入交互设计领域几年来，明显发现可视化的内容远比文档的更易于被用户（以至我们的客户）所接受，就像用户研究项目中常说的一句话：“用户怎么说的，并不代表他们怎么想。”今天以“原型设计”为基点，与大家展开几点做简要的分析。 一、什么 ... ...
-
21. 用户研究员对比原型有感 2009-12-20 21:10
一般我们会觉得，最终呈现给用户的UI是交互设计师水平的直接反映。但作为用户研究员的我，开展原型测试时接触、比较过各条产品线十多个交互设计师所做的原型，深刻体会到：原型的质量，有时更能体现交互设计师的功力——包括思维能力、组织能力以及细致程度。就比如你看一个美女穿着光鲜亮丽得体，但你得看过她家里才知道她到底是淑女还是邋遢女。 原型的质量，是指保真程度么？非 ... ...
-
20. 画好线框图的20个步骤 2009-08-31 21:45
原文作者：Clive Howard原文链接：20 Steps to Better Wireframing译者：飞琼 对于任何一个开发项目来说最大的错误可能就是没有计划。最近，有些人认为开始前无需计划，一个优秀的开发者需要的是随机应变。我敢肯定这样的做法最后注定是要失败的。 线框图是计划中的第一步也是最重要的一步。这是将创意转换成客户使用的程序的第一步。本文将要带你了解线框图整个的流 ... ...
-
19. 从线框图到最终设计 2009-07-12 02:21
原文：From wireframes to design 作者：Jesmon Allen 译者：耿人杰 ———————————— 全文的分割线 ————& ... ...
-
18. 用Flash Catalyst做交互原型 2009-06-18 21:41
稍微试用了几天，总体上有这么几个感觉： 1.原理上与其他原型工具大同小异，基本上都是“制作分状态页面—>定义事件关联—>定义交互效果”的套路。 2.从功能上看，Fc像是ImageReady、Flash和Axure 的结合，操作形式上有Balsamiq Mockups的影子,熟悉这几款软件的同学上起手来应该是很快的 ... ...
-
17. 传说中的纸上线框图 2009-05-11 20:50
画线框图/原型图，是每个产品设计人员的基本功。 可以用绘制画线框图的软件工具很多，从word、ppt这样的办公软件，到PhotoShop、illustrator、visio之类的设计软件，当然还有专用的Balsamiq、Axure等等。 那么如何选择线框图/原型图工具呢？ 目的决定方法：明确目的，按照目的选择－－不选好工具，选合适的工具 结合自己的能力：产品人员 ... ...
-
16. 线框图 - 原型可视化 2009-04-21 22:06
原文作者：Editorial.co.in原文链接：Wireframes - Prototyping Visualization译者：applia 当你需要为网站快速创建一个直观和可用的用户界面的时候，在写代码之前做好设计是基础。一个普遍的方法就是通过线框图来展现你的设计，线框图是一种使用线条为基本元素的绘画，与蓝图相对，像框图表现基本的导航和功 ... ...
-
15. 纸上原型设计方法探讨 2009-04-20 22:52
做这个东西有两个目的： 1. 把业内一些零碎和模糊的东西进行分析、整理并加以亲身实践，制定成使用说明或者标准化的设计工具。现在国内的交互从业者对一些概念和工具的理解基本上只停留在老外创造的美好词汇和自己的臆想之中，融入到工作实践时总有这样那样的不靠谱，这并不是东西本身不实用，而是师夷长技的时候并没有结合自身情况。 2. 抛块砖，引堆玉。 ... ...
-
14. 常用原型图设计工具 2009-03-14 16:45
天天和产品打交道，不时要做一些页面原型、离不开各种工具，工欲善其事必先利其器，好的工具软件可以大大提高工作效率，工具各有优劣，大家按需取之。原型设计工具我暂时把它分为两类，Web应用原型设计工具及软件应用原型设计工具、微软的visio就不说了： Web应用原型设计工具：先来看看这个几个：Axure RP、Balsamiq Mockups和Pencil Project试用感觉： ... ...
-
13. 交互设计文档4：Axure交互实例 2009-03-11 09:15
上下文链接：交互设计文档-1：经验和设计工具、交互设计文档-2：设计工具的选择 、交互设计文档-3：Axure线框图实例 上篇用SNS未登录首页的实例介绍了Axure RP Pro制作线框图(Wireframe)的基本操作方法，嗯，那只是个入门。这个工具更多的“好东西”在这篇，以及在大家自己的研究之中。下面，我就把我所用到过的“好东西&rd ... ...
-
12. 经验分享：交互设计文档(3) 2009-03-09 15:51
前一篇：经验分享：交互设计文档(2)下面，用几个实例来介绍用Axure RP Pro制作交互文档。在制作过程中，经常会有一些Tips，是一些使用软件的技巧和相关提示。这些多半都是我个人的总结，有些可能是我的“错觉”，希望在这方面能够得到指导，也希望一些有用的技巧真的能在实际操作中帮到大家。 根据Facebook的未登录首面来设计一个SNS社区首页的原型 Fa ... ...
-
11. 经验分享：交互设计文档(2) 2009-03-07 15:28
前一篇：经验分享：交互设计文档(1) 继续介绍上文中提到的原型设计工具，还有几个工具也是很有必要一一介绍一下的： Balsamiq Mockups （有Web版本）关于这个工具，黄主任在他的来，超酷的Balsamiq Mockups中有一些介绍。优：看着超舒服，提供的组件工具很多。劣：虽然提供了很多常用的工具，但反而让文字操作变得不太方便（当然，我们不是在介绍排版工具& ... ...
-
10. 经验分享：交互设计文档(1) 2009-03-03 07:00
从主流互联网公司的产品项目流程一文中提到使用几种工具制作低保真的“原型设计”。想到自己从前在还不了解“用户体验”这个概念之前就设计过许多这类“原型”，其实也算是一种不一样的交互设计经历了。在下面，姑且就把所有的原型设计称为“交互设计文档”吧，用来抛砖引玉，因为最想看到的其实是别人正在做的更专业的东西。同 ... ...
-
9. 来，我画给你看…… 2009-03-02 17:03
产品设计人员往往长期处于一种对话的状态。 首先是跟自己对话：我的想法是否正确？还有没有漏掉的地方？各个部分有什么关系？然后是跟UI设计、跟研发、跟boss、跟投资人……对话…… “我是这样设计的……”“我的意思是……” ... ...
-
8. 用Word画原型 2009-02-18 14:44
关于原型，有太多故事了。说起快速的原型制作（区别于软件工程的快速原型法），应该以文本文档/富文本文档（如Word）为主。因为，白板、草图虽然快但不易保存，HTML虽然丰富但制作慢，一些原型工具，如Axure，则效率也低，使用也复杂。 最初设计的时候，我是以Word为主的，就是打表格（顺带一句，白鸦是PPT，便于演示和简单的效果）。Word 画表格十分方便，而且在沟通中也比较高效（批注）。渐 ... ...
-
7. 选择原型设计工具 2008-11-30 17:56
在程序、网页被实现之前，一定需要把界面给“画”出来，成为原型设计，就像动画片要画分镜头、手稿一样。原型设计能起到有效沟通的作用，漂亮，直观的原型图更是让人赏心悦目。 1. Microsoft Visio 我最常用的原型设计工具，几乎是Windows平台下惟一的“最佳”选择。有很多的模板可以选择，可以制作包括流程图、平面布置图 ... ...
-
6. 进行 Web 界面原型设计的一种方法（续） 2008-12-12 20:55
昨天写到为何XHTML原型会失败？，意犹未尽，再续一篇旧文。 在进行 Web 界面原型设计的一种方法（以下简称MVC/SSI原型法）这篇文章里，漏了一部分，也就是昨天提到的维护或者 CSS/JS 文件共用的问题。其实可以通过下面要讲到的方法，解决一部分。 无论是 XHTML 原型还是程序模板，前端（网页/网站部分）主要包括两大部分：HTML文件和资源文件，其中资源文件又可以分为CSS、JS ... ...
-
5. 为何XHTML原型会失败？ 2008-12-10 14:10
最近 UCD 翻译小组有一篇文章是：XHTML原型开发－用代码说话。千鸟也一直宣传着蓝图、文档、原型的方法论。 从 03 年开始，我就直接使用 (X)HTML 去做原型，从一个人，到数个人协同工作，都是直接用 (X)HTML 实现。在经历 N 个大大小小的产品/项目后，在06年11月，我写了一篇关于用 XHTML 做原型的文章：进行 Web 界面原型设计的一种方法。单从这个方法本身上看，是 ... ...
-
4. 粗谈原型设计之概述 2008-08-01 00:08
读过信息架构《Information Architecture》的朋友都知道信息架构的交付物为四个，其中一只就是线框图（Wireframes），在产品经理的交付物中就有线框图，又被称为设计原型（Prototype Design）。 设计原型，以下我将称为线框图（在某些方面我认为他们有不同之处，后面的文章会做介绍），是信息架构内容（Concepts）和系统（System）两部分思考和设计的体现形式 ... ...
