zoukankan      html  css  js  c++  java
  • 产品UX,要学会像香蕉一样为用户考虑!

    “大自然有许多绝妙的例子来引导我们发明创造,香蕉就是个优秀UX的典型代表。”

    天知道这篇文章已经被反复写了多少遍了——但我还是想说,香蕉的优点不仅在于它的醇厚味道,还有它的整个食用体验。就像是好的产品体验不仅是UX的最终结果,而是过程。话不多说,现在就来进入我的观点——你可以从香蕉的用户体验中学习到什么。

    一、状态切换

    像香蕉那样,通过改变自身颜色来让你可以一眼辨别它能否被食用

    香蕉的颜色设计就是为了提供线索的:绿色是生的,黄色是熟的,棕色/黑色是太熟了。当然,这中间还有一些其他的阶段,但重点是,我们可以仅通过观察就能够准确判断出它是否可以食用。 这是我的第一个论点。

    使用表状态的元素 - 比如颜色、图案甚至文本和图标。

    界面上的具体表现,比如禁用元素可以通过降低透明度和添加灰色阴影。 错误、故障或紧急情况可以显示为亮红色,传达一种出现了问题的感觉。 低风险和警告通常以黄色给出,绿色用于成功操作和完成。 当然,你也可以自己定义一些色彩——但是上面提到的颜色和它们代表的角色已经广泛被接受,因此你的设计不应偏离太多。

    二、重视设计的可活动性

    就像我们可以随时随地吃香蕉

    香蕉皮不仅可以防止里面的果肉被损坏,还让这个水果便携,产生了活动性。你可以随时随地享用。

    许多其他的水果时不具备这样的属性的。想想看上次你吃芒果的整个过程, 你可能用到了一块砧板、一把刀、一个容器,甚至叉子或勺子来吃切好的水果。

    香蕉皮的设计精妙地绕过了这一切——只要把它剥开即可享用,不需要任何工具。 这就引出了我的第二个观点。

    确保你设计中的活动性 — 保证你的用户可以在需要的节点上正确快速地访问到相关信息。

    一个比较好的例子是在预订航班选择日期的界面中同时列出价格——不要让用户到其他多余的页面来获取到做出决定所需的信息。 用户应该能够在给定页面上直接看到所有相关信息,做出决定。

    三、让产品易于使用

    就像香蕉那样易于食用

    (差一点就玩起了老旧的谐音梗)

    香蕉是各路水果中最不麻烦的——易剥皮、易食用、无籽等。 这其实就是好体验最普遍的表现:你的UX设计应该易用。

    你可以通过限制选项、减少步骤数、加粗重要信息来优化体验。或者直接使用已经形成用户习惯的流程。

    因为最终——人们会倾向使用对他们来说更容易的产品。

    四、让产品具有覆盖性

    要像香蕉那样无处不在

    香蕉无处不在。 杂货店 、市场都能找到香蕉。 它的广泛可用性决定了它的传播和覆盖。这也是我的第三个观点。

    让你的UX在不同环境下都可用。 不限制在特定设备上,让不同的环境都有统一的体验。

    当然,这并不是说产品不能够服务于某一个平台。许多产品也是为特定界面构建的——比如 Android, iOS等设备。 但是设计出移动端和Web端的统一体验是一个复制你的品牌传播影响力的利器。

    说到这里也顺便提一下对于Web端不同系统上、不同尺寸和比例的显示器的体验——响应式设计可以尽多的让大多数用户得到相同的体验。

    五、具备无障碍访问的能力

    香蕉可能比许多的网站做得更好

    无障碍访问一直是用户体验中最重要的课题之一,这是一件好事。 设计师需要了解在确立解决方案时包含这些因素的重要性。

    香蕉有一个很好的区分点:就是它在非常成熟时的表面上的斑点。 对于患有某些类型的色盲的人来说这样的设计更加明确, 直观。这也是我想要表达的最后一点:

    尽量多考虑无障碍设计,利用颜色和图案降低判断难度。

    虽然可能日常接触偏少,但是每12 名男性就有一人患有某种形式的色盲(女性的比例较低,每200人中1人)这意味着有近 8% 的用户可能无法按你的预设来区分颜色。

    结论:香蕉的设计真香

    如前所述,香蕉的用户体验在水果界中脱颖而出。

    这跟选择电影院有着相同的逻辑:你会考虑它的距离、座位、舒适程度、提供的配套服务等等。 毕竟,许多剧院都将放映同一部电影——但让你最终决策的是整体体验。

    设计像香蕉一般的体验吧。

    本文由摹客团队翻译

    原文地址:https://jehadmohamedz.medium.com/the-ux-of-a-banana-1e43cc97cd0a

  • 相关阅读:
    工具进阶:如何利用 MAT 找到问题发生的根本原因
    性能优化步骤
    搞定内存泄漏
    jvm配置示例
    vue的transition相同元素通过v-if,以及绑定key的区别
    安装nvm之node版本管理器
    在ts中定义变量类型的dva使用方法
    dva的全部用法
    react父子组件传值之二,ref传值(父组件调用子组件的值和方法) useRef+useImperativeHandle(hook)
    react父子组件传值方式一之props方法
  • 原文地址:https://www.cnblogs.com/jongde-0077/p/15069324.html
Copyright © 2011-2022 走看看