设计癖 - 关注设计癖 提升幸福感

X

设计癖 - 关注设计癖 提升幸福感

登录

忘记密码?

X

设计癖 - 关注设计癖 提升幸福感

邮箱注册

《设计癖免责声明》

密码找回

取消

符号化设计与用户使用经验

符号化设计分为两种,一种是拟物设计的符号化,用一种通用的事物的具体形象来表示。通常是用一些有透视感的,有厚度的立体图形;另一种是纯粹的符号化,纯粹的平面图形,用简单的线条和配色来表示。

汉字的产生就是我们的祖先对于一类人类活动或者事物所进行的抽象化的描述。我们曾经的表意字,也是象形文字的一种,而后演变成篆书,就是一个对事物描述抽象化之后再符号化的过程。古埃及人和古玛雅人也都会在他们的壁画、雕刻上留下抽象的表达具体活动和事物的图形。

我想把符号化设计分为两种,一种是拟物设计的符号化,用一种通用的事物的具体形象来表示。通常是用一些有透视感的,有厚度的立体图形;另一种是纯粹的符号化,纯粹的平面图形,用简单的线条和配色来表示。

拟物设计就是尽量还原物品本身的样子来进行虚拟视觉元素的设计。拟物设计中极具代表性的就是苹果App Store里的那些苹果自己设计的应用程序图标。有一个有趣的细节,在App Store里图标是没有使用统一光泽的,开发者可以选择是否使用该光泽,如下图中的弧形光泽,但是在iPad或者iPhone上用了一个展示灯的光泽,这也是个拟物设计的效果。

1a

上图中钢笔加一瓶墨水的是苹果Pages应用,主要用于文档编辑,讲台上放着一张发言稿的是Keynote重要备忘应用,红色幕布、舞台、五角星和录像机是iMovie电影制作应用(电影文化),一本书的是iBook,一把吉他的是GarageBand(车库乐队文化),一朵云的是iCloud。以iMovie为例,它撷取了舞台、幕布、设录像机、星光大道上的五角星来组合成一个电影制作应用,这些元素的色彩和质感是拟物的,还原真实的,并且是电影文化的代表特征。而这些东西就成了“电影制作”这个应用程序要表达的意思,选取共性还原真实。就像Pages,钢笔加墨水很普通常见的现实中文档处理的工具,选取这个通俗的共同工具,形象上还原真实,就成为文档处理的符号。虽然它们都是还原真实的,但又都是抽象的,所以是一种符号化的设计,有些还有文化符号。

以前有看过报道说Scott Forstall是Jobs的忠实拥趸,拟物设计也是做到了极致,我想是有些过火了,Jonathan Ive就很擅长在拟物和抽象中取得平衡。

另外一种是纯粹的符号化。其实我不知道纯粹这个词在这里是不是合适。Android的系统设置中各个选项的图标和Windows Phone的系统应用图标,例如电话、短信、人脉都是纯粹符号化的典型。

2b

3c

上面两张图是安卓4.0的设置菜单,中间的是安卓4.0系统电源管理的图标,下面一张是Windows Phone的主界面,显然,这些图标的设计都是将实际物体的造型做了最大程度的抽象,只保留其最鲜明的特征。比如第一张图的电池、声音,第二张图的日期、安全,还有电源管理中的WIFI、蓝牙、GPS;Windows Phone中的相机、电话、消息、设置,这些都是将事物的最鲜明特征抽象成最简单纯粹的平面图形,电话是一个听筒,安全是一把锁,相机是一个简单的相机造型等。有一个细节是Windows Phone的音乐用的是Zune的标志,那是不是意味着微软还有重回播放器市场的野心?

4d

(注意其背壳上部的标志)

WP中音乐应用使用了这个标志也是视觉识别(VI)的体现,要将自己提供的音乐服务打上这个烙印。企业有好的、鲜明的VI是成功CI的一部分。

自从微软开始做Metro UI(现在叫Modern UI),WP,Win8之后,微软的符号化就越来越明显, 把自己的logo都改成了四个方块。我个人很欣赏这种在满世界都是矩形圆角的时候突然来了一个看似偷懒的滑动瓷片界面设计的勇气,而且这个设计也很优秀。

WP系统和iOS在应用程序开发上给了开发者们更多的限制,在图标整体形状和构图上就要比安卓整齐划一的多,安卓的开放性使得其不可避免的碎片化,令安卓系统的应用程序图标设计总体显得比较乱。

符号化设计对于设计风格统一性有着天生的优越,Windows Phone就是个典型。这里我很想用“设计熵”的理论来解释这个问题(关于设计熵可以见这里)。熵本是化学中衡量物质运动有序程度的量度,熵越大表示越无序,反之越有序。统一有序的设计能够形成一个鲜明的风格,就像iOS的拟物设计和WP、安卓的符号化风格越鲜明则设计熵越小,设计越有序。越低的设计熵,越鲜明的风格,能够形成越鲜明的产品VI,就能给用户最直观的企业识别。好的企业识别可以给产品设计锦上添花。

符号化设计的前提或者说基础就是用户的使用经验,人对事物的抽象认识就是来源于对大量经验的总结、抽象化。有的时候还是利用户对其他抽象事物的认识。就像前文中安卓设置菜单里的“显示”选项是用了电视机、电脑屏幕显示屏调节中常见的“对比度”的图标。用户对传统产品的使用经验在前,那么在设计的时候就可以根据这种使用经验在进行界面视觉元素的设计,借鉴其已有的交互操作经验,这样可以减少设计成本,减少用户使用时的产品适应成本,提高产品易用性,优化用户体验。

你此刻的心情

  • 4

  • 0

  • 0

  • 0

  • 0

版权声明: 凡本站注明来源非设计癖的文章,目的在于传播,如需转载,请与稿件来源方联系,如产生任何问题与本站无关;凡本站所发布的图片、视频等素材,版权归原作者所有,仅供学习与研究,如果侵权,请提供版权证明,以便尽快删除。

留下评论 全部评论(46)

  1. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

    1. 谢谢!
      那个摘要是网页的排版,不是文章的排版。摘要本身也是起到告诉读者本文关键内容的作用。

      1. 嗯,我就是说网页的排版

    2. 变现者

      这个会改进的,谢谢提醒。

  2. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  3. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  4. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  5. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  6. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  7. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  8. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  9. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  10. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  11. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  12. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  13. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  14. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  15. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  16. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  17. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  18. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  19. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  20. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  21. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  22. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  23. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  24. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  25. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  26. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  27. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  28. 内容很好,受教了。不过文前摘要的总有一种戏谑感,大于正文的字体是否也会使人觉得喧宾夺主

  29. 话说我今天刚在做CI的作业,对VI也就懂一丢丢。然后我只看懂了倒数第二段。非常赞同~

    1. 去了解一下Design Language

  30. 变现者

    很有启发。记得之前看到过一套基于Mac OS的黑白图标,特别给力。

  31. 不错的标至,很喜欢。

  32. 不错的标至,很喜欢。

  33. 不错的标至,很喜欢。

  34. 不错的标至,很喜欢。

  35. 不错的标至,很喜欢。

  36. 不错的标至,很喜欢。

  37. 不错的标至,很喜欢。

  38. 不错的标至,很喜欢。

  39. 不错的标至,很喜欢。

  40. 不错的标至,很喜欢。

  41. 变现者

    把符号化设计分为两种,一种是拟物设计的符号化,用一种通用的事物的具体形象来表示。通常是用一些有透视感的,有厚度的立体图形;另一种是纯粹的符号化,纯粹的平面图形,用简单的线条和配色来表示。