恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
《认知与设计》读书笔记
0.0°
2016-10-13 原创文章 经验/观点 举报 5038 15 30 0

本书简要的提供了交互设计准则所基于的人类感觉和认知心理学背景。

总共十二章,我选了十个比较重要的点来记录。


1.格式塔原理(7个)

  • 接近性原理:是物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。Image title
  • 左边的表单文本与输入框离的较远,视觉在观察时不自觉的会在文本框与文本之间来回扫,以对号入座信息的指向,而右边是ps的新建输入框,一目了然。



  • 相似性原理:如果其他因素相同,那么相似的物体看起来归属一组。Image title人的潜意识会自动把相似的归为一组,而左边的注册让用户茫然,不知道自己进行了哪一步,右边的对颜色进行了处理,视觉感观上清晰展示了步骤进行到哪里。


  • 连续性原理:我们的视觉倾向于感知连续的形式而不是离散的碎片。Image title连续性的设计也在我们的生活中广泛运用,如logo,iphone的指纹解锁,声音控件,虽然将整个完整的画面打破,但我们依然能够看清他是一个整体。


  • 封闭性原理:我们的视觉系统自动尝试将敞开的图形关闭起来。Image title我们的视觉系统倾向于看物体,以至于它能将一个完全空白区域解析成一个物体。常用于堆叠的形式将对象集合起来,从而让用户感知为一个整体。


  • 对称性原理:我们倾向于分解复杂的场景来降低复杂度。Image title我们的视觉会自动的组织解析数据,从而简化他们,并赋予对称性,人类的视觉系统将非常复杂的二维图像解析成三维场景。


  • 主体\背景原理:我们大脑将视觉区域分为主体和背景Image title当我们看到一组图与物体一时,我们倾向于认为小的物体是主体,而大的物体是背景,有时候主体背景随着我们的注意力转化而变化。背景可以传递信息,或者暗示一个主题、品牌或者内容所表达的情绪。


  • 共同命运原理:一起运动的物体被感知为属于一组或者是彼此相关的。Image titleImage title一起运动的物体看起来是一组的或者相关的,图中的散点图表,显示了不同的点随着时间的变化而变化,一同运动的轨迹说明具有共同的变化历史。


2.可视化信息显示的最重要目标之一是提供一个视觉层次,即信息的布置安排能够:

  • 将信息分段,把大块整段的信息分割为各个小段;
  • 显著标记每个信息段和子段,以便更清晰地确认各自的内容;
  • 以一个层次结构来展示各段及其子段,使得上层的段能够比下层更重点地被展示。Image titleImage title京东的购买详情页,将产品名、价格、送货地址、送达时间、数量与购买进行分层组织为小段,不相关的信息一组,相似的且类似的一组,重要的突出,次要的弱化,让用户一看清晰明了。亚马逊的文字排版就差的多,字都堆一起,看着不仅挤,还会产生视觉疲劳。

总结:信息呈现方式越是结构化和精练,人们越能更快和更容易地扫描和理解。



3.槽糕的信息设计会影响阅读

  • 不常见和不熟悉的词汇
  • 难以辨认的书写和字型
  • 微小的字体 嘈杂背景下的文字
  • 信息被重复的内容掩没
  • 居中对齐的文字
  • 妨碍阅读的设计缺陷组合Image title背景与文字对比太弱,增加视觉识别难度,且颜色较单一

对设计的启示:支持,而不是干扰阅读



4.交互系统的设计者可以遵循以下准则来为阅读提供支持。

  • 保证用户界面里的文字允许基于特征的无意识处理有效地进行,可以通过避免之前描述的破坏性缺陷做到。这些缺陷包括难辩认的或太小的字体、带图案的背景和居中对齐等。
  • 使用有限的、高度一致的的词汇,在业界这有时被称为“直白的语言”或者“简单的语言”。
  • 将文字格式设计出视觉层次,以便浏览更轻松,如使用标题、列表、表格和视觉上加强了的单词。Image title淘宝的活动banner,字体清晰突出,与背景对比强列,字上加入环境色点缀,整体上看上去更合谐不突兀。


5.使用色彩的准则

  • 用饱和度、亮度以及色相来区分颜色。
  • 使用独特的颜色。(红、绿、黄、蓝、黑、白)。
  • 避免使用色肓的人无法区分的颜色对。(如深红与黑、深红与深绿、蓝色与紫色、浅绿与白色)。
  • 在颜色之外使用其他提示。
  • 将强烈的对抗色分开。Image title左右二张地图,右边就清晰明了的多,且颜色对比用的较好,左边虽然有白色线条作间隔,但依然觉得混为一堆,不好识别。


6.短期记忆特点:低容量和高度不稳定。

长期记忆的缺点:容易出错、印象派、异质、可回溯修改

用户界面设计准则:(对注意力、形状、思考、以及行动的限制)

  • 我们专注于目标,而很少注意使用的工具。
  • 我们使用外部帮助来记录正在做的事情。
  • 我们跟着信息“气味”靠近目标。
  • 我们偏好熟悉的路径。
  • 我们的思考周期:目标,执行,评估。
  • 完成任务的主目标之后,我们经常忘记做收尾工作。Image title这个app界面是不是很熟悉呢?没错是掌阅iReader的阅读标签功能与qq的抽屉栏操作。用户使用时无需记忆,只要打开就能找到的功能。是不是非常容易呢?



7.识别容易,回忆很难

识别:感知与长期记是紧密联系的,一张被感觉到的脸触发了百万个神经元的不同模式。组成这些模式的各个神经元组对具体的脸部特征和脸部所处环境做出反应。不同的脸触发不同的神经元反应模式,如果一张脸曾经见过那么他的神经活动模式就已经被激活过,再次被感觉时就会重新被激活,因此容易识别。模式被激活,对应的长期记忆也就再次激活。

回忆:没有任何直接类似的感觉输入,回忆所要求的协调与时间提高了激活错误模式或者只有部分正确模式被激活的可能性,从而导致无法回忆。Image title这是中关村的分类导航,他将各类电子产品加上了icon,当你在浏览时只需扫一眼icon就能快速找到自己想要的,无需看清阅读文字。这些icon易识别,无需回忆,而不带icon的界面就需要人们仔细阅读文字了,有时候很可能会用鼠标划入找,因为人们可能会忘记上次这些是如何排列的,无法记住他们具体的方位了。


识别与回忆对用户界面的影响:

  • 看到和选择比回忆和输入要容易。
  • 尽可能使用图像来表达功能。

一个交互系统的设计者如何将任务设计的更快、更容易和更少出错呢?

答案就是把任务的操作设计得能够很快使其成为无意识的。



8.交互系统应该尽可能减少用户不得不投入注意力去操作他(Krug,2005),否则这会把稀缺的认知资源从他们要用电脑解决的任务上抽取出来。设计上的规则如下:

  • 显著地标识系统状态和用户当前进度。
  • 引导用户完成他们的目标。
  • 不要让用户判断系统问题。
  • 尽可能减小设置的数量和复杂度。
  • 让用户使用感觉而不是计算。
  • 让系统令人感到熟悉。
  • 让电脑去计算。

让人更快的学会和使用交互系统。无意识的认知处理:

  • 1.操作基于用户的目标和任务(而不是基于系统本身的实现),概念上简单并且一致。
  • 2.所用到的词汇对用户不陌生,限制在任务的范围之类,并保持使用一致性,也就是说词条与概念是一一对应的。
  • 3.提供一个低风险的环境,错误很难发生,即使发生了,也容易修正,且修正的成本很低。


9.高响应度做到:

  • 立刻告知已经接收到你的输入。
  • 对操作需要多长时间完成提供一定的指示。
  • 在等待时允许你去做其他的事情。
  • 能够智能的管理事件队列。
  • 将系统内部管理和低优先级的任务放在后台运行。
  • 对最常见的用户请求做出预期。


10.用户界面设计准则:

  • 原则一:专注于用户和他们的任务,而不是技术
  • 原则二:先考虑功能,再考虑展示
  • 原则三:与用户看任务的角度一致
  • 原则四:为常见的 情况而设计
  • 原则五:不要把用户的任务复杂化
  • 原则六:方便学习
  • 原则七:传递信息,而不是数据
  • 原则八:为响应度而设计
  • 原则九:让用户试用后再修改


总结:

  1. 其实设计并不是那么枯燥乏味,我们在工作中,难免经常改稿,真的是因为大家为难我们吗?
  2. 其实不然,有时候一个好的设计,不仅能设计好的作品,更能满足各种市场需求与好的交互体验。
  3. 当我们和产品经理发生激烈交锋的时候,理论知识是衬托你专业性的强大依据,设计不单纯是你能做到所以然,更是你能说出所以然。
  4. 当你工作中感到茫然,感觉哪里不足,但又不知道如何优化时,不妨把这些笔记拿出来看下,对照这些规则去检查细究,你会发现,原来你的作品可以更完美。
  5. 其实这些不用背,当用时知道在哪里,存在什么地方就行了,我一直推崇特征驱动以达到无意识识别,这样只用短期记忆即可。
更新:2016-10-13

收藏

15人已收藏

雨言11

我想看最美的风景,易如我想做更好的自己

  • 23

    作品

  • 165

    粉丝

  • 69

    关注

  • AI生成古诗词 幼儿启蒙必读
  • 《破茧成蝶》读书笔记
  • 同鑫建投建材2b2电商平台
  • PPTV视频软件
相关标签
设计经验分享GUI

    猜你喜欢

      2016-10-13 原创文章 经验/观点 举报 5038 15 30 0

      《认知与设计》读书笔记

      0.0°

      你确定要举报《认知与设计》读书笔记

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      30
      15
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录