查看完整版本: 用图标的语言设计--图标可用性设计研究

用图标的语言设计--图标可用性设计研究

原著 Yegor Gilyov 翻译整理 [url=http://www.blueui.net/][color=#ff0000]Blueui[/color][/url]


图标可用性设计研究

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

图标设计是TurboMilk工作室的一块重要的活动领域。我们已经完成了上万的图标设计工作。我们的经验总结一下主要是以下两个原则：

[b]1. 在绘制图标之前需要非常认真地构思图标的图形。[/b]

[b]2. 如果你需要设计几个图标，你需要对整套图标进行周全的构想，然后再进行细致的刻画完善。[/b]
第一条原则非常易懂，第二条原则会产生写问题。我们的经验证明如果忽略这条原则就会浪费时间而且产生不良后果。打破这条原则来设计一套图标，那就是一个图标一个图标的设计，按照字母顺序，不前瞻也不整体构思一套的感觉。与之相反的观点就是“用图标的语言来设计”。这个方法的细节在“The Icon Book“书中介绍了。现在我将展示给你看，如果贯彻执行这个原则。
我们实验用的案例是一个工作平台软件，为中小企业提供良好的发货清单管理。
工作原理很简单：工作，发货，收钱。我们需要关注收集有关这个平台为特殊客户工作的基本信息，找到一些受到限制的地方。这样的工作跟生活中的产经比较近似，跟一些近似的项目不大相同——限制平台的信息记录要么就是已经生成订单。

下面是需求关键词清单：
A. 发货单由生产线组成
B. 每生产线需要描述服务类型，所卖产品和工作时间
C. 生产线可能与发货单没有关系。显示说明空闲或者等待。
D. 一般使用者会在项目进行中记录下空闲的项目转换为等待， 在生产线结束后产生相应的订单。
E. 分期交货

我们的一下步是图标设计需求的清单。一定要耐心看完。图标设计是个乏味的工作，及时是初始阶段也是一样的。

Commands for managing the free lines:管理空闲生产线[size=2]
[/size]
[size=10pt]× [color=magenta]Add[/color][/size][size=10pt] [color=royalblue]line [/color][color=purple]on?service provided[/color] [color=dimgray]into pile[/color]  [/size][font=宋体][size=10pt]增加  [/size][/font][font=宋体][size=10pt]生产线  [/size][/font][font=宋体][size=10pt]因为服务  [/size][/font][font=宋体][size=10pt]到列[/size][/font]
[list][size=10pt]× [color=magenta]Add[/color][/size][size=10pt][color=mediumturquoise] [/color][color=mediumturquoise][color=teal]line[/color] [/color][color=purple]on?time worked[/color] [color=dimgray]into pile[/color]  [/size][font=宋体][size=10pt]增加  [/size][/font][font=宋体][size=10pt]生产线  [/size][/font][font=宋体][size=10pt]为准时完工  [/size][/font][font=宋体][size=10pt]到列[/size][/font] [/list][list][size=10pt]× [color=magenta]Add[/color][/size][size=10pt][color=magenta] [/color][color=teal]line[/color] [color=purple]on?product sold[/color] [color=dimgray]into pile[/color]  [/size][font=宋体][size=10pt]增加  [/size][/font][font=宋体][size=10pt]生产线  [/size][/font][font=宋体][size=10pt]因产品销售  [/size][/font][font=宋体][size=10pt]到列[/size][/font] [/list][list][size=10pt]× [color=magenta]Delete[/color][/size][size=10pt] [color=#008080]line[/color]  [/size][font=宋体][size=10pt]删除生产线[/size][/font] [/list][list][size=10pt]× [color=magenta]Group[/color][/size][size=10pt][color=magenta] [/color](the selected) [color=#008080]lines[/color] [color=dimgray]into invoice[/color]  [/size][font=宋体][size=10pt]组编辑生产线到发货单[/size][/font] [/list][list][size=10pt]× [color=magenta]Show[/color][/size][size=10pt] (only) [color=purple]free [/color][color=#008080]lines[/color]  [/size][font=宋体][size=10pt]显示空闲生产线[/size][/font] [/list][size=10pt]×[color=magenta] Show[/color][/size][size=10pt] [color=purple]all[/color] [color=#008080]lines[/color]  [/size][font=宋体][size=10pt]显示所有生产线[/size][/font]


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

[color=magenta][size=10pt][color=#000000]×[/color][color=magenta] [/color]Add[/size][/color][size=10pt] [color=teal]invoice[/color]  [/size][font=宋体][size=10pt]增加发货清单[/size][/font]
[color=magenta][size=10pt][color=#000000]×[/color][color=magenta] [/color]Delete[/size][/color][size=10pt] [color=teal]invoice[/color] [/size][font=宋体][size=10pt]删除发货清单[/size][/font]
[color=magenta][size=10pt][color=#000000]×[/color][color=magenta] [/color]Send[/size][/color][size=10pt] [color=teal]invoice[/color] [/size][font=宋体][size=10pt]发送发货清单[/size][/font]
[color=magenta][size=10pt][color=#000000]×[/color][color=magenta] [/color]S[/size][size=10pt]how[/size][/color][size=10pt] [color=purple]unsent[/color] [color=#008080]invoices[/color] [/size][font=宋体][size=10pt]显示未发送发货清单[/size][/font]
[size=10pt][color=#ff00ff][color=#000000]×[/color][color=magenta] [/color]S[size=10pt]how[/size][/color][size=10pt] [/size][/size][size=10pt][color=purple]sent[/color] [color=#008080]invoices[/color] [/size][font=宋体][size=10pt]显示已发送发货清单[/size][/font]
[size=10pt][color=#ff00ff][color=#000000]×[/color][color=magenta] [/color]S[size=10pt]how[/size][/color][size=10pt] [/size][/size][size=10pt][color=purple]paid[/color] up?[color=#008080]invoices[/color] [/size][font=宋体][size=10pt]显示已付款发货清单[/size][/font]
[size=10pt][color=#ff00ff][color=#000000]×[/color][color=magenta] [/color]S[size=10pt]how[/size][/color][size=10pt] [/size][/size][size=10pt][color=purple]all[/color] [color=#008080]invoices[/color] [/size][font=宋体][size=10pt]显示所有发货清单[/size][/font]


[align=left]Commands for managing lines in invoices:管理发货清单里面的生产线[/align]
[list][color=magenta][size=10pt][color=#000000]×[/color][color=magenta] [/color]Add[/size][/color][size=10pt] [color=teal]line[/color] [color=purple]on?service provided[/color] [color=dimgray]into invoice[/color] [/size][font=宋体][size=10pt]增加 [/size][/font][font=宋体][size=10pt]生产线 [/size][/font][font=宋体][size=10pt]因为服务 [/size][/font][font=宋体][size=10pt]到发货清单[/size][/font] [/list][list][size=10pt][color=#ff00ff][color=#000000]×[/color][color=magenta] [/color]Add[/color][size=10pt] [color=teal]line[/color] [/size][/size][size=10pt][color=purple]on?time worked[/color] [color=#696969]into invoice[/color] [/size][font=宋体][size=10pt]增加 [/size][/font][font=宋体][size=10pt]生产线 [/size][/font][font=宋体][size=10pt]因准时[/size][/font][size=10pt]?? [/size][font=宋体][size=10pt]到发货清单[/size][/font] [/list][list][size=10pt][color=#ff00ff][color=#000000]×[/color][color=magenta] [/color]Add[/color][size=10pt] [color=teal]line[/color] [/size][/size][size=10pt][color=purple]on?product sold[/color] [color=#696969]into invoice[/color] [/size][font=宋体][size=10pt]增加生产线 [/size][/font][font=宋体][size=10pt]因产品销售 [/size][/font][font=宋体][size=10pt]到发货清单[/size][/font] [/list][list][color=magenta][size=10pt][color=#000000]×[/color][color=magenta] [/color]Move[/size][/color][size=10pt] [color=#008080]line[/color] [color=dimgray]from invoice into pile[/color] [/size][font=宋体][size=10pt]更多生产线 [/size][/font][font=宋体][size=10pt]从发货到等待列[/size][/font] [/list][color=magenta][size=10pt][color=#000000]×[/color][color=magenta] [/color]Delete[/size][/color][size=10pt] [color=#008080]line[/color] [color=dimgray]completely [/color][/size][font=宋体][size=10pt]删除生产线[/size][/font]


[align=left]Commands for recording the money received:管理收支记录[/align]
[list][color=magenta][size=10pt][color=#000000]×[/color][color=magenta] [/color]Add[/size][/color][size=10pt] [color=#008080]payment[/color] [/size][font=宋体][size=10pt]增加收支记录[/size][/font] [/list][list][color=magenta][size=10pt][color=#000000]×[/color][color=magenta] [/color]Delete[/size][/color][size=10pt] [color=teal]payment[/color] [/size][font=宋体][size=10pt]删除收支记录[/size][/font][/list][list][font=宋体][size=2][/size][/font][/list][list][font=宋体][size=2][/size][/font][/list][list][font=宋体][size=2][/size][/font]
[font=宋体][size=9pt]你一定已经注意到了在列表中的词组被用色彩标记了。这是有目的的。颜色分别代表[color=teal]物体[/color][/size][/font][size=9pt][color=teal],[/color] [/size][font=宋体][color=magenta][size=9pt]动作[/size][/color][/font][size=9pt][color=magenta],[/color] [/size][font=宋体][color=purple][size=9pt]限制[/size][/color][/font][font=宋体][size=9pt]和[/size][/font][font=宋体][size=9pt][color=dimgray]修饰语[/color]。[/size][/font]
[font=宋体][size=9pt]如果我们足够耐心的话，完全分析这些动作命令，这些部分将会变成可见的部分，有助于我们快速便捷设计我们的图标。[/size][/font][/list][list][font=宋体][color=dimgray](iconsbox重新整理论坛帖子里那些词语分类的颜色~~累死了~~)[/color][/font]


[color=dimgray][b]物体:[/b]
*line 生产线
*invoice 发货单
* payment 支票

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

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

[b]修饰:[/b]
* from invoice 来自发货单
* completely 完全
* into invoice 进入发货
* into pile 进入等待列
[/color]
下一个阶段是创造性阶段。通过头脑风暴我们尽可能多的产生一些想法来描述每个元素。
物体:
[attach]2578[/attach]


限制类型— 生产线类型:
[attach]2579[/attach]


生产线情况：
[attach]2580[/attach]


发货状况：
[attach]2581[/attach]


动作：
[attach]2582[/attach]


修饰：
[attach]2583[/attach]


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




发货单图标设计:
[attach]2585[/attach]


发货生产线管理图标:
[attach]2586[/attach]


支付平台图标:
[attach]2587[/attach]


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

好东西,!

所以图标设计真是个充满耐心的细致活～

[font=微软雅黑][size=4][color=blue]图标的创意真的是不简单啊...[/color][/size][/font]
:lol