• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 我花了20个小时研究3个按钮,让你明白UI和UX的区别

我花了20个小时研究3个按钮,让你明白UI和UX的区别

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

本文主要包含ui设计,用户体验,经验分享等相关知识,希望在学习及工作中可以帮助到您

@可乐橙_ColaChan :UI 和UX ?到底有什么区别?今天这位作者花了20个小时研究3个按钮,除了关于可用性的大量干货,也能帮你快速明白UI 和UX 的区别。

首先讲一讲背景。这是在我们周会上发生的事情:

“Andrew,我们做了几个很厉害的新功能,测试一下吧。”

“好的,当然。”

“嘿,你甚至会忍不住写篇文章来介绍的!”

“呃……”

只有一个问题……

当我被要求测试一项功能,通常意思是让我发起一场可用性测试,这就包括寻找参与者、准备一系列任务和问题,并且通过Skype访谈来执行(执行问题,不是处决参与者)。【译者注:这是作者的一个玩笑,“执行”与“处决”在英文中是同一个词】

于是我去看了我们的网站,自己先研究了这个新功能,基于它想象各种相关联的任务。我花了11秒尝试了所有可能性。我甚至尝试反复来回点选,就好像我在一边和我妈通电话一样,这样花了30秒。然后我妈真的打电话来了,我又试了一次,花了20秒。

我所讲的功能,是图中右上角的3个按钮。3种视图模式的切换。

△ 3个按钮可以让视图在3种模式中切换:纯图标、带标签的图标、表格视图

通常我的Skype访谈会持续30分钟:其中80%是任务,20%是简短的谈话和我的蹩脚笑话。如果任务只有30秒,我就得讲29分钟的笑话。我才不会那么做,有2个原因:

  • 没人愿听
  • 如果我能做到,我就是个喜剧大咖了

于是,我现在有的只是3个按钮,只能通过一个问题来检验。

此时我的剧本大概是这样:

  1. 设定一些任务来检验人们是否注意到这3个按钮。
  2. “这3种模式中,你最爱用哪种?”

通俗而言,UI与UX的区别

我还需要更多信息。于是我继续深入。在某种模式下我发现了第4个按钮。

  1. 设定一项任务来检验人们是否注意到这3个按钮。
  2. “你知道这个‘加号’按钮是做什么的吗?”
  3. “这3种模式中,你最爱用哪种?”

到目前为止,这个访谈仍然非常简短,然而按钮就只有这些。我就只是这么坐着,在3种模式间来回乱点,思考人生、存在、还有精神崩溃。然后我忽然间深受触动。

在此之前我只是在思考UI,那只是界面。确切的说,是思考这些按钮和它们的功能——在3种视图中切换。

现在我开始考虑UX了,或者说体验。脑海中涌现出大量的问题。文字标签会以某种方式影响人们吗?它对人们查找图标的方式有影响吗?它会影响整体体验吗?我很想知道!

这些抽象的问题非常棒,但我不能直接这么问参与者:“嘿,你觉得文字标签有用吗?”因为人们的答案和实际行为之间有巨大差距。我不得不找到具体的任务来检验人们的实际行为。

怎么办?我就设身处地,开始搜索不同的图标。我搜索了汽车图标、猫、狗、常用的图标、不常用的图标。我切换不同的视图,一遍又一遍搜索。

当然,搜索不同内容,得到结果也不同。但关键在于,我的关注点不一样。如果我寻找猫,我有明确的预期。但是如果我搜索“新闻”或“音乐”,我的预期就模糊得多。

虽然不同的搜索预期有影响,那不同的视图模式呢?

这个简单的问题充满了我的30分钟调研。

真理:深入挖掘总是对的

最终的剧本草稿

  1. 设定一些任务来检验人们是否注意到这3个按钮。
  2. 用「纯图标」模式来搜索:猫、手机、箭头、新闻、开始、音乐。用「带标签的图标」模式搜索:狗、线条、盒子、创意、停止、工作。并且指出认为离谱的搜索结果。
  3. “你知道这个‘加号’按钮是做什么的吗?”
  4. “这3种模式中,你最爱用哪种?”

我让参与者在纯图标模式下搜索“猫”,然后指出任何离谱的搜索结果。

然后我让另一位参与者搜索同样的“猫”图标,但是用图标+文字标签模式,并指出离谱的搜索结果。

看见没,那是Gabriel Aul。一切都说得通了!或许也没有……【译者注,Gabriel Aul是windows 10忍者猫形象的创造者】有时候,搜索甚至会给我们自己带来惊喜。

好吧,我们换个更好的例子。假设你搜索线条图标:

有了文字标签,参与者就不会再觉得“命令行”是不相干的图标。但这只是诸多影响之一。

我想证明的是,不同人对搜索结果的关联性有不同的感受,于是我明白了他们的预期有什么差别。我也会尽可能求证标签是否会影响预期。

真理:努力寻找方法衡量用户的体验

检验我的测试

到此为止,我的调研剧本已经比较完善了。但我仍然感觉不确定,邀请我同事来作为参与者,就像真实访谈一样。

结果证明这根本没那么完善。我不得不做出一些调整。

  1. “你能改变一下搜索结果的展现方式吗?”
  2. 用「纯图标」模式搜索:手机、新闻、开始。用「带标签的图标」模式搜索:盒子、创意、工作。指出离谱的搜索结果。
  3. “你能否告诉我,在不点击‘加号’按钮的情况下,你觉得它是做什么的?”
  4. “以上3种模式,你最喜欢哪种?”

为什么要改成上面这样:

  • 第一题模棱两可。
  • 10个不同的搜索任务让访谈持续了60分钟。我计划只需要15-30分钟,于是我不得不把参与者减少到6人。
  • 第三题中,我得明白地告诉参与者,不要点击按钮——否则诱惑太多了。

真理:在展开真实的访谈之前,非常有必要做一下实验

结论

成功只给有准备的人。现在我有了最终的调研剧本,可以对真实用户展开测试了,我照此执行。7名参与者、超过15页笔记、3小时的视频素材,我得把这些资料组织起来。我现在正在撰写相关文档。下一篇文章就是关于这些调研结果、领悟和尴尬的沉默「译者注,我也正有此意 LOL」。如果你正在阅读本文,却没找到下一篇的链接,有两种可能:

  1. 本文刚发布不久。
  2. 我抓狂了,正在窗台上奋笔

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

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2018-08-23收福利!5个不为人知但干货超多的设计公众号
  • 2017-08-06滤镜使用之图片透明的css写法
  • 2017-08-06负距离(换位思考)-相互影响的迭代过程
  • 2018-08-23新手想进阶技能?超酷炫的动感特效轻松get!
  • 2017-08-06编写高质量代码 Web前端开发修炼之道 书摘精要
  • 2018-08-23基础小科普!3种国内外最常见的响应式栅格
  • 2018-08-23APP授权设计:如何让用户不反感并同意授权
  • 2018-08-23这5个丑出新高度的网站,为什么那么多人夸
  • 2017-08-06960 Grid System 基本原理及使用方法
  • 2018-08-23新姿势!用自然灵活的波纹曲线来柔化你的设计

文章分类

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

最近更新的内容

    • 风骚一点!在网页中玩转霓虹色的正确姿势
    • 互联网「秃顶大会」,思聪都不敢这么玩!
    • 阿里10年设计师:如何成为有商业价值的设计师?
    • 科班高手的方法!16个简单实用的排版小Tips
    • 贺岁档电影海报来袭,张张都是如此精彩!
    • 为什么39%的设计工作可能被人工智能取代?
    • 超详细!可能是最全面的AR设计科普文
    • 实测图片的HTTP请求
    • 「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard
    • 给复仇者联盟设计界面是什么体验?来看这篇设计师专访!

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

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