苏珊·卡雷与像素网格中的意义
意思是逐格拼装而成
小尺寸的网格留给装饰的空间很少。必须将一个可识别的对象进行简化,通过有限数量的像素来区分状态并确立基调。苏珊·卡雷(Susan Kare)早期的界面设计作品让这些限制显而易见,却不会让最终效果显得仅仅是受限于这些条件。
纽约现代艺术博物馆(MoMA)关于卡雷(Kare)的苹果Macintosh操作系统图标草图本的记录显示,该草图本创作于1982年,并描述了其中使用方格纸的情况——每个方格代表一个像素。这一案例展示了如何通过绘画、隐喻和精心挑选,将一个复杂的系统转化为用户能够逐渐识别的形式。
这个比喻提供了一个切入点
图标可以借鉴其他对象的熟悉感。当这种熟悉感将一项新操作与用户已理解的内容联系起来时,它就很有用。但它也可能造成误导。一个容器的图片并不能说明该操作是“存储”、“归档”还是“删除”某物。其含义取决于界面及其约定。
应综合考虑图标的标签、位置及其产生的状态来评估该图标。识别一个熟悉的对象与预测选中它后会发生什么是有区别的。一幅成功的插图可能仍然是一个含义模糊的控件。
受制约下的个性
一张小图片可以在不增加视觉复杂性的情况下传达亲切感。表现形式的选择应当有助于理解,而非与之相悖。这并不是说每个界面都需要一个笑脸,而是说技术上的局限性为刻意营造的语气和人性化的识别留下了空间。
这种限制也促使人们关注元素之间的关系。将一个符号按其实际大小与周围的符号进行比较。一个在放大时看起来独具特色的形状,在正常比例下可能会与另一个形状重叠。整个符号家族需要协调一致,包括“禁用”、“选中”或“中断”等状态。
约定需要维护
即使符号所指的事物已不为人所熟知,该符号的含义仍可能得以保留。软盘曾被用作“保存”的象征,便是显而易见的讨论范例。这种持久性并不能证明该符号就应该被替换,也不能证明没有人需要解释。应针对目标用户进行识别测试,并权衡更改约定所带来的成本。
无障碍设计还提出了一项额外要求:关键信息不能仅依赖于对装饰性元素的识别。标签和替代性描述应准确说明操作内容。图像和文字所传达的信息必须保持一致。
一个设计示例
某文件管理器在压缩和删除操作中都使用了熟悉的文件夹图标。这两张图看起来相似,是因为这两项操作都会将项目从当前视图中移除。但它们产生的结果却不同。
团队可以在保持家族式设计风格的同时,通过标签、布局和状态反馈来区分不同操作。应测试用户是否能预测文件会发生什么变化,而不仅仅是能否识别图片中的容器。如果一个醒目的新图标在未解释其区别的情况下,就舍弃了有用的熟悉感,那么它未必是一种改进。
请以实际尺寸并在完整的界面中评估这些图标。相邻的控件可能会改变人们对它们之间关系的感知。像素网格在更广泛的信息系统中成为一种实际的约束条件,正如卡雷的草图将细微的视觉决策转化为有意义的操作一样。
一项实践练习
在固定的网格内,为相关操作设计三个图标。绘制前,用通俗易懂的语言说明该操作。测试用户仅凭图标能做出何种推测,然后在添加标签和上下文后再次测试。记录用户在识别图标与理解操作之间产生的困惑。修改最微小的、会改变图标含义的细节,并以实际尺寸检查整个图标系列。
网格是对绘画的一种限制,而非不深入探讨意义的借口。
一项视觉研究
进一步阅读与相关链接
继续进行信息设计、层次结构设计以及通俗易懂的沟通设计。
将可识别的视觉元素与一套可在各接触点实施的视觉识别体系相联系。
参考文献
图片来源
1. SusanKare2019photo.jpg
创作者或标注来源:库珀·休伊特 · CC BY 3.0
已按Word要求调整大小并采用JPEG编码;未作任何创意性修改。该图片仍遵循上述许可条款。
2. 史蒂夫·乔布斯与麦金塔电脑,1984年1月,伯纳德·戈特弗里德摄——经编辑.jpg
创作者或标注来源:照片:Bernard Gotfryd——由Cart根据TIF文件编辑而成 · 公有领域
已按Word要求调整大小并采用JPEG编码;未作任何创意性修改。该图片仍遵循上述许可条款。
3. PC ICON – 蓝屏.png
创作者或标注来源:Asterisk.CommonsAccount · CC0
已按Word要求调整大小并采用JPEG编码;未作任何创意性修改。该图片仍遵循上述许可条款。
将本主题与传播设计的工作范围、交付成果及合作伙伴选择联系起来。
正在计划该领域的项目吗?不妨与 f/p design 探讨一下。