• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 那些很熟悉但又叫不出名字的设计法则:干扰效应

那些很熟悉但又叫不出名字的设计法则:干扰效应

作者:二手设计 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含干扰效应,设计法则,设计法则专题等相关知识,二手设计希望在学习及工作中可以帮助到您

《名侦探柯南》中总是提到福尔摩斯的一段话:「When you have eliminated the impossible, whatever remains, however improbable, must be the truth.(排除一切不可能的,剩下的即使再不可能,那也是真相。)」这句话用干扰效应来解释最好不过,本期我们来聊聊。

想看更多设计法则,这个专题里全都有:设计法则专题

一、干扰效应(Interference Effect?)定义

干扰效应:一种现象,同时思考两件或两件以上的事情时,思考的过程会变得比较慢,也不准确。

二、干扰效应产生理由

有两种或两种以上的知觉或认知过程发生冲突时,就会产生干扰效应。

人们的知觉和认知的不同与心智模型有关,这些模式会独立分析、处理收到的相关信息,处理后会传送到工作记忆区,并作出诠释。当输出资料一致,诠释过程会又快又好。当输出资料不一致,就会产生干扰,需要一些其他的处理,以便更好地解决。解决这些问题需要浪费很多时间,对性能也会产生不好的影响。

三、干扰效应案例

1. 斯特鲁普干扰

斯特鲁普干扰(Stroop Interference):刺激物不相干的一面引发了思考过程,因而干扰了刺激物相关方面的思考。

图标协同文字可以准确的向用户传递所要表达的内容,二手在常用的 App 中截出了一些图标,却发现现在很多的图标在信息传达方面有所欠缺。

举四个例子:

下面这组图标,「地方菜系、美食、晚餐、大牌简餐」几个图标没有表达出所要传达的信息,还有几个图标要借助文字才能表达出其含义。即使图标设计的非常精美,但是图标功能却存在缺失,而且这几个图标不能刺激用户对信息的理解,反倒是让用户更加迷惑。设计师也注意到了这个情况,所以最近改版后,信息传达变的更加直接,减少了干扰。

接下来的这组图标也存在同样的问题,这组图标想借助图标上产品本身的含义来传达给用户要表达的信息,但是这需要用户对这些产品本身的定位非常明确,如果不明确的话只能干扰用户的行为,例如,用户需要知道「吕」是个韩国洗发水之后才能拐弯抹角的联想到「全球超市」,再例如:中间「轻奢」图标,用的是劳力士绿水鬼,一款70000+还要靠等才能买到的奢华手表,二手认为跟轻奢的定义有矛盾,除非这并不是劳力士。

米家这套图标二手认为可以准确传达所描述的信息,因为米家有种类繁多的 loT 产品,有时候一款产品更是分为不同的版本,如果用户只是根据名称选择的话不仅繁琐而且十分耗时,所以在选择产品时,米家把所有产品外形准确刻画成图标,用户可以先根据自己产品的外形大致选择型号,再根据文字提示准确的选择自己产品的版本。

△ 米家App图标

滴滴这套图标表达也很准确,不同的服务通过不同的图标可以准确传达。

△ 滴滴图标

2.?加纳干扰

加纳干扰(Garner Interference):刺激物一个无关的变化,引发了思考过程,干扰到跟刺激物相关的思考过程。

举个例子:如下图,指出单独一排的形状,比指出两排其中一排的形状要简单。两排形状紧靠在一起,激发了想说出旁边形状的思考程序,造成干扰。

根据上面这个案例,二手联想到了「个人中心」页面,大部分「个人中心」页面都选择了竖排列表布局。列表布局就是以列表的形式展示具体内容,并且能够根据数据的长度自适应显示,Material Design 建议列表是「可快速扫描」,适合显示类似的重复的内容。列表布局也是最快速的 app 布局方式。这种排列在某方面上就是降低了干扰。相比于列表布局,宫格导航是将主要入口全部聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。

△ 列表布局和宫格导航

3.?前向干扰

前向干扰(Proactive Interference):现存记忆干扰了学习。

举个例子:手淘的最近改版中,店铺首页顶部导航和底部自定义菜单结构化调整,但是有一个细节的变化让二手不断的犯错——返回按钮改成了关闭按钮,二手习惯点击左上角返回按钮来返回上一级菜单,改版后依旧习惯点击左上角,但是打开的是店铺印象,仅仅是图标左右位置简单的调换,已经让二手在使用的过程中挫败感强烈。这就是现在的使用记忆已经严重干扰了学习。所以产品在改版迭代的时候,尽量不要干扰用户已经熟悉的路径或是破坏用户使用习惯。

△ 手淘的店铺首页改版

4.?后向干扰

后向干扰(Retrosctive Interference):学习干扰了现存记忆。

这个正好跟上面相反,二手不断培养现在的使用习惯,渐渐的就忘记了上一版的路径。

四、怎样预防干扰

要想预防干扰,就要避免输出思考过程中相互冲突的设计。知觉的干扰效应,通常是因为信息的传达过程中有歧义,或是因为把互相干扰的元素结合在一起。要把干扰效应降到最低,首先要求设计师用准确的设计语言传达信息,如果这样还是无法让用户很好的理解,其次可以考虑利用文字或者引导来告知用户。

参考资料:

  • 《通用设计法则》,威廉·立德威尔、克里蒂娜·霍顿、吉尔·巴特勒<著>,朱占星、薛江<译>,中央翻译出版社
  • 《撸一遍个人中心列表页》,Z设团_Z先生<著>

欢迎关注作者的微信公众号:「二手设计」

图片素材作者:Petr Had

「延伸阅读,细谈列表与网格设计」

  • 《基础小科普!浅谈「列表视图」与「网格视图」的用法》
  • 《列表和网格,哪个更适合你的APP设计?》
  • 《专业科班的思考!聊聊列表设计的3个基本思路》

优设大课堂

您可能想查找下面的文章:

  • 那些很熟悉但又叫不出名字的设计法则:干扰效应

相关文章

  • 2018-08-23超实用!6个小技巧帮你打造高转化的网站落地页
  • 2018-08-23UCAN 干货总结!阿里设计如何助力设计产业升级?
  • 2017-08-06网页设计心得 高效编写网页代码
  • 2018-08-23超实用!聊聊移动端跨平台开发的各种技术
  • 2017-08-06关于自适应布局的处理(利用浮动和margin负边距实现)
  • 2018-08-23高手用10分钟,就能让你搭配出好看的颜色
  • 2018-08-23这款给医生的专业APP,设计上有着怎样不同的要求?
  • 2018-08-23零基础必备:详解十种常见的水彩基本技法+问题总结
  • 2017-08-06资讯类产品阅读列表的交互设计思考与经验分享
  • 2017-08-06怎么设计响应式WEB?响应式WEB设计的优缺点

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 页面中防止缓存的解决方法
    • HTTP 状态代码整理介绍
    • 网页设计中的表单设计技巧小结
    • UI新手排版入门!最容易上手的6个排版套路
    • 经典好文!如何为拇指做设计?
    • 关于调试CSS跨浏览器样式bug的问题
    • 10个非常不错的CSS技巧收集整理分享
    • 交互基础小课堂!如何利用「行为模型」让用户行动起来?
    • 超全面!设计师必须了解的美术基础
    • 分享20个优秀的网页表单设计案例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有