耿人杰的网络日志 » 原型设计

从线框图到最终设计

耿人杰 — Wed, 08 Jul 2009 03:15:18 +0000

【译者：耿人杰原文：From wireframes to design 作者：Jesmon Allen】

我们能做什么来确保我们所绘制的梦幻般的线框图能激发同样梦幻般的图形设计并最终创建一个梦幻般的网站？（译者注：有点绕口！）

什么是线框图？

“线框图是单一网站页面精简版的视觉表现，没有经过任何视觉处理”

此定义来自Strange Systems。

线框图是用来做什么的？

我在cxpartners花费了大量时间制作线框。它们被用来生成想法、测试用户、获得客户验收和创建最终网站或应用的蓝图。

递送交付物

当我将线框图交给开发团队后将发生什么？前端、后台程序各展所长，编辑人员摩拳擦掌，而图形设计师需要将他们的设计理念应用到基于线框的页面中。

不要给线框加样式

信息架构师经常开玩笑说：图形设计师的任务就是将线框图加上颜色。线框上所有的导航和内容通常是黑色和白色，所以设计师需要给线框加上一定的商业色彩。

这里暴露了一个潜在的冲突，信息架构师和图形设计师在哪个点进行工作交接的。如果给到图形设计师一个极其完善的线框，他的剩余工作只是动动彩色铅笔，那他们应该会郁闷到不行。最后，设计师通常也会感觉在给定线框下设计会限制他们的创新。

从一开始就让设计师参与其中

这就是为什么cxpartners提倡以用户为中心的设计过程，涉及项目的关键利益相关者从一开始就参与到设计中。利益相关者包括客户和最终用户，也包括程序员和设计师。从第一天开始就把这一条写在项目白板上，让他们参与到关键的决策中，并跟随进行的用户测试。用户测试可以就早期的图形设计想法进行测试，确保他们随着时间的推移看到线框的每一版进展，这是能影响整个设计进程的方式。

所有权和理解力

一个对线框图有所有权和理解力的设计师将能灵活和有创意地阐述他的设计，即使是在项目已经交付了很长一段时间后。网站是不断发展的，一个对线框背后的设计有深入思考和理解的设计团队能够不断的调整和补充，继而维持伟大的用户体验。

不断发展的关系

我喜欢看到我的线框被带入到生活中，所以cxpartners总能通过设计和开发进程让产品团队理解我们的想法，一个电话总能将问题讲明白。我也总能看到我的线框与聪明代码、伟大的图形设计一起结合成一个有着梦幻般用户体验的网站…

了解更多：

Wireframing and prototyping

其他你可能感兴趣的:

Balsamip Mockups增加Twitter原型

耿人杰 — Wed, 13 May 2009 10:54:30 +0000

Balsamip Mockups增加Twitter原型

其他你可能感兴趣的:

BlogBus搜索结果界面设计框图

耿人杰 — Fri, 13 Mar 2009 15:00:32 +0000

这是发给Blogbus求职用的，也作为自己的一个作业，由于Blog界面需要，把尺寸横向压缩了一下，能看懂意思就行：）

————————————-

Blogbus BolgSearch Result List Wireframe 1.0

Blogbus Logo	首页 \| 管理 \| 模板 \| TAG \| 频道 \| 看法 \| 推荐 \| 注册 \| 帮助欢迎，gengrenjie \| 注销
	[ 搜索内容输入 ] 搜索按钮热门关键词：AAA BBB CCC
搜索结果：XXX有XXX条结果，以下是1-10条，用时0.001秒
符合搜索的博客标题1 发表时间作者：XXX 博客内容预览30-50字博客名-订阅符合搜索的博客标题2 发表时间作者：XXX POST内容预览30-50字博客名-订阅 …… …… ……		按时间排序 \| 按相关度排序 RSS 订阅XXX的搜索结果相关博客推荐： AAA BBB CCC DDD EEE
上一页 << 2 3 4 5 6 7 8 9 10 11 >> 下一页按时间排序 \| 按相关度排序
Copyright

图示：

1.[　　　　]，表示输入框。

2.文字加灰色的背景色（字符底纹），表示按钮。

3.蓝色带下划线的字体表示链接，黑色字体表示文字。

相对现在的设计增加和修改的部分（未定优先级顺序）：

1.加入了全局导航，方便的进入其他频道和功能。

2.显示登录信息及注销。

3.将用时XX毫秒改成了用时0.0XX秒，从用户心智上习惯看数量级上的差异，而不是计量单位上的差异。

4.搜索输入框最好能实现搜索建议，像豆瓣或通用的搜索引擎那样，这样搜索体验更好。对于一些没有明确搜索目的的用户，也能起到一定的帮助建议作用。搜索建议的数据来源可以是用户搜索的关键词数据库历史数据，也可以是后台关于博客tag统计的历史数据，或者是两者的结合。

5.增加热门关键词。

6.将按时间排序和按相关度排序的交互形式改成链接，默认是按时间排序，并位置移到了页面右侧。

7.将XML/RSS2.0改成”RSS订阅XXX的搜索结果”，对95%的用户来讲不会知道XML/RSS2.0是什么东西，换个表述方式更易于用户理解。

8.在页面右侧增加了博客推荐，可根据用户搜索的关键词推荐相关的博客内容，增加用户间的互动。

9.搜索结果似乎目前只能匹配Post的标题，理论上是可以在包含Post正文的全文中进行索引的。发表时间可以不用完整的时间，如XX小时前，XXX天前这样更符合用户心智，当然这里不考虑技术实现和动态计算的资源问题。增加作者的名字的链接，点击可直接进入其空间。其次，可提供Post的内容预览，前30至50字即可，预览中出现的关键词也用红色字体突显。原来的RSS也改成”订阅”，道理同上。

10.页面下部的页数导航有一点你们做的不好。就是当前页的数字应该始终在10个页码的中间位置，这样方便两头都能点击。就如我线框图上的所示，在第7页的时候，应以第2页为开头，以第11页为结。相当于开头的页码=当前页码-5，最后的页码=当前页码+4。具体内容可参考：http://developer.yahoo.com/ypatterns/pattern.php?pattern=searchpagination

其他你可能感兴趣的:

在线原型设计Lovely Charts

耿人杰 — Thu, 12 Feb 2009 06:44:42 +0000

Lovely Charts是一款在线原型设计软件，有Flowcharts、Sitemaps、Network diagrams、People diagrams、Basic symbols、Misc、Wireframes等Library可进行控件选择。能用他们进行流程图和简单的线框图等的设计。操作非常简单，在Drag & Drop模式可进行控件的拖拽操作，Lovely Charts能自动进行对齐。在Create & Connect模式能进行联线等连接操作。网站用Flash实现，每个控件及画布都可任意进行放缩。免费版只能储存一个文件，可打印也可导出成PNG和JPG格式的图片。唯一不足的是不能输入中文。

lovelycharts

其他你可能感兴趣的:

Balsamiq Mockups增加新控件组合

耿人杰 — Tue, 10 Feb 2009 06:14:48 +0000

Balsamiq Mockups是一款颇受欢迎的手绘风格原型设计软件。今日更新了不少新的可用组件。

iphone_numeric_touch

iphone_spinner

可订阅官方日志了解发布更新状态。

其他你可能感兴趣的:

优秀原型设计软件Balsamiq Mockups

耿人杰 — Sat, 24 Jan 2009 14:58:08 +0000

原型设计软件应该是不少产品经理和设计师的必备工具。就我而言总共用过3款，分别是：Axure、Pencil（firefox插件）和最近刚发现的Balsamiq Mockups。Axure和Balsamiq Mockups都是收费软件。

Axure是老牌的原型设计、交互设计工具，功能强大，且能制作具有交互能力的原型。但对于没有IDE使用经验的人上手较困难。

Pencil是firefox的一个插件，操作简单，但控件类型较少，不具备交互的能力，适合随开随用，做简单的界面及原型设计。

比较有特点的是手绘风格的Balsamiq Mockups，控件元素丰富，能做出各种类型的界面，相当强悍

以下是几组example展示：

boogle

wiki

symbian

还有我的上篇post里的那个关于PageRank的图也是用Balsamiq Mockups做的:)

遗憾的是Balsamiq Mockups是收费的，要价79美金。当然可以提供demo的试用版本，但不能保存，不能导出成图片，且每隔5分钟会弹出购买提示。

虽然开发者非常厚道的提供了获得免费license的几种方式，但这里再教大家一个小窍门，可以巧妙的把制作成的文件导出。具体方法就是装一个PDF Creator或do PDF 5，界面原型制作完成后选择打印，打印机名称选择PDF Creator或do PDF 5，这样可以把文件保存成PDF格式。