推荐资讯

  • 梦幻的境界绚丽多彩Mosk梦幻作品欣赏
  • Windows XP主题美化工具HyperDesk亮相Sony Ericsson Onyx Series

您当前的位置:首页 > 视觉 > UI界面

用图标的语言设计

时间:2008-08-03 00:32:56  来源:  作者: 点击:

去年秋天 RusCHI 和 1C在世界可用性日举办了一个会议,我在会上作了简短的发言。我提出设计一个图标设计语言。干什么都不晚,在此我特意采用插画的方式来为大家呈现这个研究。

原著 Yegor Gilyov 翻译整理 Blueui

图标可用性设计研究

去年秋天 RusCHI 和 1C在世界可用性日举办了一个会议,我在会上作了简短的发言。我提出设计一个图标设计语言。干什么都不晚,在此我特意采用插画的方式来为大家呈现这个研究。

图标设计是TurboMilk工作室的一块重要的活动领域。我们已经完成了上万的图标设计工作。我们的经验总结一下主要是以下两个原则:
1. 在绘制图标之前需要非常认真地构思图标的图形。
2. 如果你需要设计几个图标,你需要对整套图标进行周全的构想,然后再进行细致的刻画完善。
第一条原则非常易懂,第二条原则会产生写问题。我们的经验证明如果忽略这条原则就会浪费时间而且产生不良后果。打破这条原则来设计一套图标,那就是一个图标一个图标的设计,按照字母顺序,不前瞻也不整体构思一套的感觉。与之相反的观点就是“用图标的语言来设计”。这个方法的细节在“The Icon Book“书中介绍了。现在我将展示给你看,如果贯彻执行这个原则。
我们实验用的案例是一个工作平台软件,为中小企业提供良好的发货清单管理。
工作原理很简单:工作,发货,收钱。我们需要关注收集有关这个平台为特殊客户工作的基本信息,找到一些受到限制的地方。这样的工作跟生活中的产经比较近似,跟一些近似的项目不大相同——限制平台的信息记录要么就是已经生成订单。
下面是需求关键词清单:
A. 发货单由生产线组成
B. 每生产线需要描述服务类型,所卖产品和工作时间
C. 生产线可能与发货单没有关系。显示说明空闲或者等待。
D. 一般使用者会在项目进行中记录下空闲的项目转换为等待, 在生产线结束后产生相应的订单。
E. 分期交货
我们的一下步是图标设计需求的清单。一定要耐心看完。图标设计是个乏味的工作,及时是初始阶段也是一样的。

Commands for managing the free lines:管理空闲生产线

Add line on service provided into pile 增加 生产线 因为服务 到列
Add line on time worked into pile 增加 生产线 为准时完工 到列
Add line on product sold into pile 增加 生产线 因产品销售 到列
Delete line 删除生产线
Group (the selected) lines into invoice 组编辑生产线到发货单
Show (only) free lines 显示空闲生产线
Show all lines 显示所有生产线

Commands for managing the invoices: 管理发货清单

Add invoice 增加发货清单
Delete invoice 删除发货清单
Send invoice 发送发货清单
Show unsent invoices 显示未发送发货清单
Show sent invoices 显示已发送发货清单
Show paid up invoices 显示已付款发货清单
Show all invoices 显示所有发货清单

Commands for managing lines in invoices:管理发货清单里面的生产线

Add line on service provided into invoice 增加 生产线 因为服务 到发货清单
Add line on time worked into invoice 增加 生产线 因准时?? 到发货清单
Add line on product sold into invoice 增加生产线 因产品销售 到发货清单
Move line from invoice into pile 更多生产线 从发货到等待列
Delete line completely 删除生产线

Commands for recording the money received:管理收支记录

Add payment 增加收支记录
Delete payment 删除收支记录

你一定已经注意到了在列表中的词组被用色彩标记了。这是有目的的。颜色分别代表物体, 动作, 限制修饰语。 如果我们足够耐心的话,完全分析这些动作命令,这些部分将会变成可见的部分,有助于我们快速便捷设计我们的图标。

物体:
*line 生产线
*invoice 发货单
* payment 支票

限制条件:
* on service 服务
* on time worked 时间
* on product sold 产品
*tied up 使不空闲
* free 空闲
* unsent 未发送
*sent 已发送
* paid 已支付
* all 所有

动作:
* add 增加
* delete 删除
* group 群组
* show 显示
* send 发送

修饰:
* from invoice 来自发货单
* completely 完全
* into invoice 进入发货
* into pile 进入等待列

下一个阶段是创造性阶段。通过头脑风暴我们尽可能多的产生一些想法来描述每个元素。
物体:

限制类型— 生产线类型:

生产线情况:

发货状况:

动作:

修饰:

最后我们用头脑风暴后最有说服力的元素组成了我们要设计的图标。
空闲生产线图标:

发货单图标设计:

发货生产线管理图标:

支付平台图标:

这种方法最有利的优点是: 轻松完成这套图标在实际应用中的作用。有时,需要综合考虑已有的元素,而且有时新的元素也是必须的。不过界面设计语言需要整体和统一,如果作者足够愿意遵循可视化语言的规则。

顶一下
近回首页
去首页

发表评论[共有 ]
  • 验证码:    匿名