知其然知其所以然-设计准则从何而来(一)

标签: 学习 | 发表时间:2012-03-27 22:43 | 作者:猪小凡
出处:http://pd4.me/blog

最近在读《 认知与设计,理解UI设计准则》,主要的内容是从底层分析设计原则:设计原则为什么是这样?为什么这个是原则?

从1976年开始就已经有界面设计准则,而到现在网络上也到处充斥着“表单设计十忌”,“注册的N种设计方式”等等等等类似的文章,看得少还好,看得多了难免会迷惑:有些准则,禁忌甚至是冲突的。就好像时间一样,你有一块表,问你几点了你知道,如果你有两块时间不一样的表,你知道几点了吗?

而这本书试图从更底层的角度来诠释设计准则,让你了解设计准则是由于什么原因推导出的,究其本质,还是回归到人类的心理,视觉,生理等方面的习惯,方式,本能等因素。而掌握这些因素,会让你更深入了解设计准则的意义和目的,甚至归纳自己的设计准则。

再多提一嘴作者:Jeff Johnson,《GUI设计禁忌》正是他的作品。

我们感知自己的期望

人类对于外部世界的感知,不是完全真实的描述,很大程度是我们“期望”感知到的,也会受到三个因素的影响

  • 过去:我们的经验
  • 现在:当前的环境
  • 将来:我们的目标

再举下例子

被经验影响:看看下面这样随手泼墨的画,第一感觉就是各种无序的墨点构成

而如果告诉你这是一只花园里的斑点狗,你看出来了吗?因为你对场景和主体都已经有了自己的概念,即有了自己的理解。

被环境影响:

同样的一个不完整的字母,放到不同的场景下,第一个会被认为是H,第二个会认为是A

类似的还有海底捞的一个说法:在接受到的服务很好的情况下,客人会觉得味道也很好~

被目标影响:

这个例子更简单和直接了:新浪微博大家都用,顶部导航的第三个是什么?有印象吗?如果不是那个频道的目标用户,基本都不会有什么印象,因为我们的目标明确,不会关注其他的;这是目标影响视觉的例子。同时这个也是“网页为扫描而不是为阅读设计”的理论支持。

对于设计这些意味着什么?

  • 避免歧义:避免显示有歧义的信息,并通过测试确认所有用户对信息的理解是一致的。
  • 保持一致:在一致的位置摆放信息和控件。这样的一致性能让用户很快的找到和识别
  • 理解目标:用户去用一个系统是有目标的。在一次交互的每个点上,确保提供了用户需要的信息,并非常清晰的对应到一个可能的用户目标,是用户能够注意到并使用这些信息。

为观察结构优化我们的视觉

20世纪早期,一个由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状,图形和物体,而不是只看到互不相连的边、线和区域。这些理论统称为“格式塔”原理,其中包括以下几条

  • 接近性:物体之间的相对距离会影响我们感知他们是否以及如何组织在一起
  • 相似性:如果其他因素相同,那么相似的物体看起来归属于一组
  • 连续性:我们的视觉倾向于感知连续的形式而不是离散的碎片
  • 封闭性:我们的视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片
  • 对称性:我们倾向于分解复杂的场景来降低复杂度
  • 主体/背景:我们的大脑将区域分为主体和背景,主体包括一个场景中占据我们主要注意力的所有元素,其余的则是背景
  • 共同命运:针对运动的物体,一起运动的物体被感知为属于一组或者是彼此相关的
  • 格式塔原理可以综合

看看上面这个界面,可以用格式塔原理去解释中间很多设计方式和方法,比如位置,背景,相似性,接近性等等。

对于设计这些意味着什么?

我们平时做设计可能会导致无意产生的视觉关系。而为了能够满足这些人类视觉的特点,推荐的办法是在设计一个界面之后,使用每个格式塔原理,来考量各个设计元素之间的关系是否复核设计的初衷。

相关 [所以 设计] 推荐:

知其然知其所以然-设计准则从何而来(二)

- - 猪窝_产品设计
互联网在信息的传播上起到了极大的作用,我们每天面对的就是寻找,浏览,阅读,理解各种信息,信息设计是永远不变的话题,人们究竟如何阅读和理解信息. 当信息以简介和结构化的方式展示,人们就能更快更容易的扫描和理解,信息呈现方式越是结构化和精炼,人们就能更快更容易的扫描和理解. 这点也与wp7现在metro的设计理念不谋而合,也是wp7主界面上那些“tile”让人觉得好用,眼前一亮的缘故:因为我们很容易扫描和理解.

知其然知其所以然-设计准则从何而来(一)

- - 猪窝_产品设计
最近在读《 认知与设计,理解UI设计准则》,主要的内容是从底层分析设计原则:设计原则为什么是这样. 从1976年开始就已经有界面设计准则,而到现在网络上也到处充斥着“表单设计十忌”,“注册的N种设计方式”等等等等类似的文章,看得少还好,看得多了难免会迷惑:有些准则,禁忌甚至是冲突的. 就好像时间一样,你有一块表,问你几点了你知道,如果你有两块时间不一样的表,你知道几点了吗.

所以,你要试试SICP

- Sirius - 黑客志
计算机程序结构和解释(Structure and Interpretation of Computer Programs, 也就是SICP)是由麻省理工(MIT)教授计算机编程的一门课程演变而来的一本好书,. 你可能会问,为什么你应该了解SICP. 这个问题让Stack Overflow来回答:. 一些经典书籍[...]教给你高效的工作习惯以及这个行业的某些需要注意的细节,其他一些[...]则带领你进入软件开发的某个特定领域,这些书都有他们各自的市场.

知其所以然(续)

- 小和尚 - 刘未鹏 | Mind Hacks
查了一下,上篇知其所以然(以学习算法为例)是08年7月写的,现在已经是10年11月,过去了两年零4个月,这说明了三件事情:1,一个问题其实你可以一直放在脑子里面,利用暗时间对其软泡硬磨,时间足够久你总会有一点新的感悟,问题其实就像那句老话说的那样,不怕贼偷就怕贼惦记,聚精会神的思考一天,也许比不上惦记一个星期(据说数学家庞加莱就特别会惦记问题).

为了设计而设计

- - 幻风阁|kent.zhu'sBlog
我有个习惯,每天晚上睡前会搜罗一遍最新的App用用. 最开始的时候ios的App还相对比较朴实,强调功能的实用性,后来不知何故吹起一阵ios的App必须足够精美的怪风. 于是乎,各类App纷纷上演换装游戏,一个比一个做的精美,即使是一个很工具性的应用也把自己浓妆艳抹的往坐台小姐的风格搞……. 上周末跟Tony和Angela在下厨房喝茶闲聊,我说目前的移动产品设计可以分为2类,一类是做给用户用的,一类是做给设计师们欣赏与收藏的.

杯盖设计

- Yu - 创意设计-有趣、时尚、另类的创意
微向上的设计,在倒水完毕的时候可以让水滴顺着杯盖回流到杯子中,而不会随意的滴下来. 虽然是细小的设计,但是考虑的却是生活的便利.

再设计Redesign

- Mark - 腾讯CDC
  一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来.   对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法.

简约设计

- - 淘宝网通用产品团队博客
写下这个标题,那么首先得要明确什么叫简约. 简约就是让用户操作简单,让用户更快的达到自己的目的. 一个产品在于解决一个需求,如何让用户最好的完成需求就成为一个产品经理首先得要解决的问题. 那么在日常工作中,我们又有什么可以做的呢. 在《简约至上》里面有四种策略,但是有的东西太高级了,在平时的工作未必能够用得上,所以我自己来提炼一下,看看日常工作中能够遇到并且可以解决问题的方法.

再设计Redesign

- 小趴 八足趴 八足 ramener - 互联网的那点事...
一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来. 对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法.