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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
那些被玩坏了的手机ux元素
0.0°
2015-12-10 自译外文 经验/观点 原作者: Zoltan Kollin 举报 3674 16 22 2


如果你是一个用户体验设计师,当你看到某个设计师自己设计了一个图标放在界面中,而不是直接用素材库里的图标时,是不是会感到很受激励。这是最好的惯例研究。设计师们跟随着设计规范使用设计样式。当你设计用户界面的时候要确保你用的样式是用户所熟悉的。

一些人可能会说,过于坚持使用同样的图案会抹杀创造力,并且很有可能在将来,所有app的界面会变的一样。从这些ux观点中我看到了另一个的问题。当你习惯于这些最棒的惯例,你会越发觉得谷歌,脸书他们的设计永远是正确的,他们的设计目标就是你的设计目标。这边有一些图案是你第一眼看到时并不觉得很好,但是现在已经被认为是最适合的图案。

1.隐藏导航栏图标

目前为止,这个长得像汉堡的菜单栏图标已经被讨论无数次了,其中设计师们无数次表达了对这个图标的不满。但是总的来说,大家并不是对这个图标的外形表达不满,而是对把整个导航栏隐藏到一个图标里面表达不满。

Image title


这个解决方案对设计师来说既方便又有吸引力:你不需要为有限的屏幕尺寸担忧,可以放心的把导航变成一个可以拖动的抽屉。

然而经验显示,暴露在外面的导航栏有助于增加点击量,用户体验舒适度,甚至是经济效益。这也是为啥许多引领行业趋势的软件开始把导航栏中最重要的功能摆到了显而易见的地方。

Image title


2.任何功能都用图标来表示

因为屏幕尺寸有限,一个图标相比文字可以更为节约空间。图形化的图标可以节约空间,而且它们不像文字需要被翻译。所以每个app都喜欢运用图标。

但是有的时候,app设计师会把功能隐藏在特别难识别的图标里面。打个比方,你能猜到Instagram的这个图标是什么做什么用的么?

Image title


或者你假设一下,你从没用过Google翻译,你会觉得下面这个图标是干嘛用的?

Image title


还有一个共同的问题就是你以为你的用户熟悉抽象图形的含义,并且愿意花时间去探索和学习。

Image title


图标会难以理解含义并不意味着你不要用任何的图标。那里仍然有一堆用户可以很好理解的图标存在。比如那些常用的:搜索,视频播放,邮件,设置等等。(但是爱心图标仍然会让用户疑惑,点上去会是什么功能?)

Image title


对于一个复杂且抽象的图标,则应该放一个解释其功能的文本放在旁边。在这个案例中,图标依然有用,而且它们可以让这个功能更显著,并赋予这个app独特的个性。

Image title


3.用手势来导航

当苹果在2007年介绍iphone的时候,多点触控技术变的主流,用户学会了各种新的手势。

手势操作在设计师中越来越受欢迎,许多软件中都加入了实验性的手势。

Image title


就像隐藏导航栏和用图标代替文本一样,手势对设计师来说也是节省屏幕尺寸的一个好方法。

对于手势你需要最先了解的是他们永远是隐藏的。人们需要去记住它。就像如果你把一个功能隐藏在汉堡图标里,人们就会很少的使用它了。

另外,手势和图标有同样的问题:用户往往只理解最基础的那些手势,其他各应用附加的手势则需要另花时间去学习。

不幸的是,在app设计中大部分手势并没有一个一致的标准。在触屏界面设计中这依然是一个新的领域。即使是一个简单的滑动在不同app中也会有不同的功能。

Image title

Image title


或者你可以细想下,晃动你的手机可能以为着取消(在ios系统中)或者发送反馈(google地图中)。

永远不要忘了手势是隐藏的控制手段,并且需要记得哪些需要在用户使用中有大量的影响。你可能有能力告诉这个世界关于滑动正确的意义-但只有在对你的app概念来说是一个必要的要素时。

4.慎用新手引导的覆盖层

新手引导是一个最近很火的ux功能,作用于户第一次见到这个app时。在许多案例中,展示了一些用半透覆盖状的新手引导来向新用户解释页面功能的案例:

Image title


为什么这是个不太好的解决方案?因为许多用户会跳过你的介绍;他们只想快速开始使用这个app。即使他们注意到你的教程,也常常在关掉这个半透覆盖的教程页面后就忘了里面的内容(特别是那些信息量比较大的教程)。最后:给你的页面增加教程并不会让它更直观。记住这个:

Image title


新手引导可以被设计成很多种更有效的方式。举个实例:Slack这个软件中,用户可以用几个单独的新手引导页面来介绍功能。这样用户看的时候就会专注于这个教程,不会被页面其他元素干扰。

Image title


一个更具交互性,用来来吸引新用户的方式是:在使用中引导用户学习。Duolingo没有解释这个软件如何工作:用户被鼓励加入进来,做快速的语言测试(即使不需要登入)因为人们可以在使用中学习到很多。另外,同时,这也是一个更具吸引力的方式去展示这个app的价值。

Image title


记住一个滑动手势在Mailbox和Apple Mail中有何不同。他们用他们的新手引导教程,让用户在开始试用这个app前,提前明了哪里可以试用那些手势。

Image title


在开始设计这个半透明的教程页面之前,停下来想像一下用户第一次使用时的场面。专注在这个场景中。要知道在大部分案例中,总有一个更好的方式去欢迎你的用户。

5.有创意但是不直观的空状态

空状态很容易被缺乏经验的设计师遗忘,然而,对于app的整个用户体验来说,空状态是极其重要的。

对某些设计师来说,空状态和报错界面是展现创意的一个好地方。

看一下Google Photos的空状态:

Image title


第一眼看到时,真的很亮眼。排版很棒,图片也很好看。

但是,看久了以后,就会发现一些不和谐的地方:

既然这是一个没有相关收藏的页面,为何还要放置一个如此显眼的搜索图标在外面?为什么要让人们在表示什么都没有的页面里搜索东西? 中间那张图片作为第二显眼的元素很明显是不能被点击的(尽管很多人想去点来看看)。

这个空状态界面并没有帮助用户理解内容:

收藏的东西是什么?为什么他们很有用? 我为什么我没有任何收藏? 我可以做什么来增加收藏?

当空状态变的有创意,可能实用性反而降低了。下面这个空状态则是在实用性上很突出的一个例子:

Image title


不要忘了空状态不但是作为一个好看创意的页面,同时也是一个实用性的页面。所以把这个页面设计的更直观一点吧。

更新:2015-12-10

收藏

16人已收藏

丁仙人

https://dribbble.com/DECADEbgsg

  • 22

    作品

  • 317

    粉丝

  • 25

    关注

  • 回顾总结:2016作品整理
  • 星球大战-原力觉醒
  • 如何在互联网时代打造成功的产品
  • 为啥UI设计师要学习产品思维?

    猜你喜欢

      2015-12-10 自译外文 经验/观点 原作者: Zoltan Kollin 举报 3674 16 22 2

      那些被玩坏了的手机ux元素

      0.0°

      你确定要举报那些被玩坏了的手机ux元素

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2015年12月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      22
      16
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录