解析UI设计准则

  

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

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

  

  我们感知自己的期望

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

  ●过去:我们的经验

  ●现在:当前的环境

  ●将来:我们的目标

  再举下例子

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

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

  被环境影响:

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

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

  被目标影响:

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

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

  ●避免歧义:避免显示有歧义的信息,并通过测试确认所有用户对信息的理解是一致的。

  ●保持一致:在一致的位置摆放信息和控件。这样的一致性能让用户很快的找到和识别

  ●理解目标:用户去用一个系统是有目标的。在一次交互的每个点上,确保提供了用户需要的信息,并非常清晰的对应到一个可能的用户目标,是用户能够注意到并使用这些信息。

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

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

  ●接近性:物体之间的相对距离会影响我们感知他们是否以及如何组织在一起

  ●相似性:如果其他因素相同,那么相似的物体看起来归属于一组

  ●连续性:我们的视觉倾向于感知连续的形式而不是离散的碎片

  ●封闭性:我们的视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片

  ●对称性:我们倾向于分解复杂的场景来降低复杂度

  ●主体/背景:我们的大脑将区域分为主体和背景,主体包括一个场景中占据我们主要注意力的所有元素,其余的则是背景

  ●共同命运:针对运动的物体,一起运动的物体被感知为属于一组或者是彼此相关的

  ●格式塔原理可以综合

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

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

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

时间: 2025-01-20 12:21:00

解析UI设计准则的相关文章

UI设计准则在360云盘的运用

在参与了360云盘半年多的时间里,有加班的苦累,有受到用户好评的欣喜,有经历了不同平台(包括PC版.WEB版.iPhone版.android版和ipad版)的成长与积累,对应交互牛人Jeff Johnson提出的UI设计准则,此文主要和大家分享下其中两点原则在手机云盘中的实际运用: 专注于用户和他们的任务,而不是技术 我们一直都在苦苦地寻找上图这些问题的答案,这就需要整个团队在开工之前明确并花费足够的时间来回答这些问题,主要有以下几个方法来寻找答案: 一. 定位清晰谁是目标用户: 在产品规划的早

谷歌Android UI设计技巧:优秀UI设计准则

本文原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第二部分:优秀UI设计准则. 本文为<谷歌Android UI设计技巧>第二部分:优秀UI设计准则.

Android UI设计准则

以下设计准则由Android 用户体验团队秉承用户利益至上的原则开发.当你发挥自己的创造力和思考的时候,请将它们纳入考虑之中,并有意识地加以实践. 设计准则以下设计准则由Android 用户体验团队秉承用户利益至上的原则开发.当你发挥自己的创造力和思考的时候,请将它们纳入考虑之中,并有意识地加以实践. 以意想不到的方式取悦我一个漂亮的界面,一个悉心摆放的动画,或者一个适时的声音效果,都是一种快乐的体验.精细的效果能产生一种轻松的氛围,感觉手中有一股强大可控的力量. 真实对象比按钮和菜单更加有趣允

IOS7 UI设计的十大准则

  iOS7的10大设计准则涵盖了UI设计的交互性.界面信息可读性.图形设计规范以及信息的组织性等四个方面.读下去,看看你设计的UI都做到了么? 1.格式化内容 创建屏幕布局的时候,应该适适配iOS设备屏幕.用户应该一次看清主要内容,而无需缩放或水平滚动. 2.触摸控制 尽量采用专门为触摸和手势设计的界面元素,这样可以使应用程序的交互更加轻松自然. 3.命中目标 设计可触控的控件的时候,尺寸不得小于44x44px,只有这样才能确保触摸的精度和命中率. 4.字体尺寸 文本中的文字尺寸不得小于11点

不容错过的IOS7 UI设计10大准则 你设计的UI都做到了么?

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 iOS7 的用户界面设计比以往更卓越,并为用户提供了更具吸引力的独特体验,带来更大的机遇.在正式写代码之前,认真考虑UI设计是否符合这十条设计准则,可以提高App的可用性与吸引力.如果要更深入了解iOS7的设计,你可以阅读苹果官方的iOS人机界面指南(英文版),或者下载知乎用户翻译的中文版iOS7 人机界面设计指南. iOS7的10大设计准则

专注产品UI设计:移动界面设计原则和设计工具

文章描述:移动界面设计点滴. 移动平台的设计与传统的网页有许多不同之处,如独特的交互体验.不同光线下的视觉效果以及移动终端的资源有限.这些都考验着开发者的技术. 通过对设计移动界面的点滴记录,本文为读者介绍了对界面的规划的设计原则以及相关案例,并且推荐了自己中意的设计工具. 一.减少空间占用 与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以最佳的状态呈现屏幕信息. 接下来以当前正在工作的UI做为sample,实战空间优化.

设计更好的用户体验:UI设计的黄金规则

文章描述:解析应用程序UI设计的15项黄金法则. 好友曾向我展示了最新的iPhone和iPad版<极品飞车>.游戏的渲染效果令人印象深刻,是款蓄势待发的优秀游戏.但是,游戏的前端是典型的UI设计偏差案例.但界面中有大量的属性数据等内容,它在玩家没有时间做决定时提供了过多的内容.这些内容能够显著改变他们的游戏体验,但却在玩家往往感受不到变化的时候呈现. 极品飞车(from itunes.apple.com) 这促使我开始思考UI设计的黄金法则.以下是我认为创造最佳体验应当使用的UI设计方法.坦诚

移动应用的设计与性能表现之间的七个设计准则

文章描述:怎样打造高性能的移动用户体验. 在新家一点点安顿了下来,不过心里还是缺乏踏实的方向感:猫猫们也都有些瞻前顾后草木皆兵的样子,有待继续习惯:希望大家都好好的.话说眼前的这篇候选文章貌似已然有同行做过译文,不过正像 "关于BeForWeb"中所说的,我只挑那些我喜欢的 .对我自己有学习和收藏价值的内容来做译文,其他方面的因素和我没有半毛钱的关系.不多说,直接进入正题. 在人际关系中,良好的第一印象是非常重要的,人们愿意在彼此身上寻求信任与诚实,并期望在接下来的经历中重现和增强这些

七大设计准则:打造高性能的移动用户体验

在新家一点点安顿了下来,不过心里还是缺乏踏实的方向感;猫猫们也都有些瞻前顾后草木皆兵的样子,有待继续习惯;希望大家都好好的.话说眼前的这篇候选文章貌似已然有同行做过译文,不过正像 "关于BeForWeb"中所说的,我只挑那些我喜欢的 .对我自己有学习和收藏价值的内容来做译文,其他方面的因素和我没有半毛钱的关系.不多说,直接进入正题. 在人际关系中,良好的第一印象是非常重要的,人们愿意在彼此身上寻求信任与诚实,并期望在接下来的经历中重现和增强这些好感.同样的道理也体现在移动应用或互联网产