IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

箭头符号:一个最常见却不容忽视的图标

Catherine • 2017-05-13 00:17 • 交互设计

箭头符号可能是人类图形史上最伟大的创造。是的,这只是一个箭头,一个最常见不过的图标,但如何把它放在合适的位置,如何不过度的滥用这个符号,却是我们每一位设计师不得不每天面对的问题。“我怎么回去?”

文章目录[隐藏]

  • 具象的箭头:箭头图标与交互路径
  • 圆形的箭头图标:同步与刷新
  • 辅助表意的下箭头
  • 看似友好的右箭头

箭头符号可能是人类图形史上最伟大的创造。是的,这只是一个箭头,一个最常见不过的图标,但如何把它放在合适的位置,如何不过度的滥用这个符号,却是我们每一位设计师不得不每天面对的问题。

箭头符号:一个最常见却不容忽视的图标

足够简单的图形承载着丰富而又抽象的概念。如果追溯起来,箭头符号的现实原型就是弓箭的箭头。所以箭头指向的方向意味着猎物,意味着目标。现代社会的我们能够清楚的理解箭头的指示作用,我相信这一点与百万年前穿着兽皮的祖先举着弓箭追击猎物求生的经验有着遗传意义上的必然联系。那种强烈的想获取食物的求生意愿,对作为猎物的目标的渴望,一代一代的遗传下来。所以作为现代人的我们握着鼠标,盯着屏幕上来回移动的指示箭头,会觉得这个图标理所当然。甚至于眼心手一体,忽略了这个再正常不过的存在。

箭头符号:一个最常见却不容忽视的图标

最好的界面是没有界面,最好的图标是用户看到这个图标的时候意识不到这是个图标而直接得到了图标背后的信息。这就好比英文学到一定程度之后,读过一篇文章再回忆起来会只记得文章的意思而不记得文章是用中文还是英文写的。语言是为了沟通与交流而存在,无论是计算机语言还是图形语言,都是语言的一种。如果我们可以像潘多拉星球上的那维族人一样可以通过辫子上的神经元交流,那么也就不会有那么多误解与纷争,也就不需要那么多复杂的语言了。

作为语言的不同形式,图形相较于文字也有着不可否认的优势。比如它像音乐一样没有国界的限制,它在传达信息时更加直观、具体。自从2007年iPhone横空出世之后,智能手机的普及让App逐渐逐渐取代了网址的作为互联网入口的作用。移动应用的启动图标占领了用户的桌面,如何让用户在一屏一屏的图标海中迅速发现自己的App,并且让用户一眼就能搞懂自己的产品是做什么用的就变得非常重要。启动图标虽然没有被称之为Logo,但他确实发挥着Logo的作用。

具象的箭头:箭头图标与交互路径

移动App相对于PC站点,有一个非常重要的特点在于移动App的轻量化。轻量化和即时性是这个时代的特点。深度的、需要长时间集中精力才能搞定的事情通常被放到PC上来做。用户在手机上习惯就一个目标打开一个App然后迅速完成任务后关闭。用户在移动端的平均使用时长是远低于PC端的。PC端占据着用户的工作时间,移动端占据着用户的碎片时间。

箭头符号:一个最常见却不容忽视的图标

轻量化的特点要求移动应用需要具备清晰易懂的信息架构与交互方式,页面层级深度不能给用户带来困扰和负担。在这里我把这种合理设置页面与页面之间的流转关系的设计工作称之为交互路径的设计。那么页面中的“返回”按钮、“下一步”按钮在产品的交互路径上起到路标式的作用,而这两个按钮通常都有箭头图标辅助或代替。

如果把一个个页面理解为交互路径上到达的一个个房间,那么房间越多,用户可能会越焦虑,在用户进行的当前任务之外,始终有一个问题需要面对:

“我怎么回去?”

这个“返回”,不仅仅意味着从哪儿来的回哪儿去,有时候也意味着我要回到上一级目录去,有时候则意味着退出某项任务,有时候则意味着类似Ctrl+Z式的撤销操作。所以说,返回按钮就像是用户手里的一根儿救命稻草,像是安全逃生通道的绿色的EXIT标识,它给用户带来一种潜在的安全感。所以在任何一个页面中充分考虑当前任务的退出与返回是交互设计的一个非常基本的工作。

微信这样的超级App复合了社交、通讯录、浏览器、支付等多个功能,而它又不支持多线程后台任务(当然如果支持的话可能会更复杂),那么假如我在某一项任务(比如浏览朋友圈文章)时,另外一项任务(比如有人给我发消息了)突然出现,这时我打开聊天界面之后怎么返回到刚才浏览的文章的页面上去呢?

圆形的箭头图标:同步与刷新

数据的上传(Upload)与下载(Download)其实本没有上与下的方向概念,只是一种客户端与服务端的数据交互。上传是要把用户的数据传到服务器,下载是将服务器的数据传给用户。上与下的概念只是方便用户理解而设定的一个概念模型。这是一个非常成功的概念模型,使后来“云”的概念变得容易理解。

与刷新和同步相比,上传与下载更偏向于用户自发的一种主动行为。刷新意味着重新下载新的内容,所以刷新图标通常是一个圆形的向下的图标。同步则意味着上传新的内容或同时下载新的内容,以与服务器上的内容保持一致。所以通用的同步图标由两个圆形的箭头组成。

圆形的刷新图标和同步图标,还附带着一个可旋转的心理模型的预期。就像iOS系统更新时的齿轮图标一样,这种预期可能在潜意识中存在,一旦旋转动画出现时,带给用户一种“本该如此的惊喜”的感觉。同时,一个旋转的圆圈通常用来表示加载进程,加载与刷新的相关性,也体现在了两个图标的表达上。

辅助表意的下箭头

一个圆形的用户头像,右侧有一个向下的右箭头,这是现在用户界面中一种常见的表现形式,大家都知道点开这个向下的小箭头你会在用户头像下方得到一个关于用户的菜单。

箭头符号:一个最常见却不容忽视的图标

也许这种形式并不是那么普遍,但文字与下箭头的结合已经成为了一种通用样式。组合形式其实也有不少,但这些形式之所以能够迅速被用户认同变成零学习成本的东西,功劳在于用户界面中一个基础的组件:下拉菜单(Droplist)。下拉菜单与普通的文本输入框控件有什么区别?只是多了一个箭头。

这里这些箭头起着吸引注意力和辅助提示两个作用,首先文字与图标的组合形式会比单纯的文字链接更能吸引用户的注意力,并且文字链接的通常用来实现页面之间的跳转;其次文字与箭头图标的组合形式提示这里点开还有新的内容。

看似友好的右箭头

箭头图标的第一个引申意是方向,在此基础上继续引申出了指示(提示)的含义。右箭头和表示返回的左箭头相呼应,通常在界面中提示用户这里将会前进到下一个页面。

箭头符号:一个最常见却不容忽视的图标

在智能手机发展初期,右箭头在移动端的交互界面中与返回箭头一样,有着举足轻重的作用。尽管在有些时候我们觉得没有这个右箭头的提示用户也会理解一个列表页,但iOS还是保留了它。可以理解,附带右箭头的列表相对于没有右箭头的,肯定会带来更强的指示性。

在界面中怎样让用户明白横向滑动还可以查看更多内容?你可以加一个小巧精致的箭头指向右侧,提示用户右侧还有东西哦,不信你来点我呀。

各种机器、各种设备发出哔哔哔之类提示声音起初起着友好的提示作用,但这种声音变得无处不在之后就会让人心烦意乱。现实生活中满大街都是箭头,给你指示不同的路。有时候能帮上大忙,有时候却搞的你晕头转向。这种晕头转向的感觉在某些产品中也可以找到,太多的界面里充斥着各种各样、各种方向的箭头。箭头符号有很好的提示效果,但用的时候还是要慎重。也许我们应该多问问自己,真的需要这个箭头吗?

箭头符号:一个最常见却不容忽视的图标

对比上图这两个设计,左侧的界面依赖右箭头给用户提示右边还有内容,右侧的界面依靠遮挡住的未显示完整的图片来告诉用户右边还有更多内容。哪个更高明一些呢?

挡住一部分,暗示后面还有内容。为什么用户一看就能明白呢?这里利用了用户的生活经验。诺曼博士在《设计心理学》中提到的社会化语义符号,就是这个意思。运用用户的生活经验,尽量少的在界面上添加不必要的元素,大家的眼睛都够累的了,尽量让用户把注意力集中在实际的内容上吧!

是的,这只是一个箭头,一个最常见不过的图标,但如何把它放在合适的位置,如何不过度的滥用这个符号,却是我们每一位设计师不得不每天面对的问题。

 

本文由 @百度MUX 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25974/

GUIiosiPhonelogoUIUX交互交互设计产品产品经理动画原型图标图标设计微信心理学案例分析沟通用户移动端箭头符号经验设计设计师转载
赞 (0)
CatherineCatherine
0
生成海报
蘑菇街App改版设计总结
上一篇 2017-05-12 23:26
5个突破点,设计更具吸引力的圣诞节Banner及专题页面
下一篇 2017-05-13 01:24

相关推荐

  • 用户体验设计中的简单与复杂 交互设计

    用户体验设计中的简单与复杂

    当大大小小的界面设计案都做过一轮之后,你就会发现,做一台小小的MP3拨放器,跟搞一台智能型机器人,过程中会遇到的问题,其实都是很类似的。所谓的简单与复杂,并不在于案子的规模,而在于你看事情的角度。 &nbsp…

    2014-12-05
  • 原创译文 | 面向对象的用户体验设计 交互设计

    原创译文 | 面向对象的用户体验设计

    2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,数据的可视化,可变形的画布,以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时,CNN.com首次上线了响应式体验站点,同时,我也第一次面临响应式体验设计。

    2017-06-01
  • 译文 | 我在餐厅工作时学到的关于用户体验的心得 交互设计

    译文 | 我在餐厅工作时学到的关于用户体验的心得

    本人在涉足设计专业之前学习过两年的酒店管理。在我实习的过程中,经历过许多与客户之间的沟通交流,这其中有积极的也有负面的。在我看来,酒店餐厅服务也是交互的一种形式,而且这其中涉及到很多体验设计的理论和方法,当我作为交互设计师工作多年以后,仍然觉得很受启发。当我看到篇文章的题目时,我就决定要把它翻译出来!下面进入译文。

    2017-05-30
  • 微信热点

    Axure RP 8.1.0.3372 Mac中文破解版

    今天分享的是Mac下一款快速原型设计工具——Axure RP,有了它可以大大提高你的工作效率。之前有朋友留言需要8.1.0.3372版本。Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示 意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需...

    2018-03-21
  • 这是我见过的最差的作品集【UXRen译#171】

    作者:Alex Cornell (Facebook设计师)   |  翻译:冬柏,校审:天蛙   这是我见过的最差的作品集。我总结了一下这些糟糕的作品集,都存在以下几点问题:   1、作品集只有一个段落 在你的个人网站我没有看到任何作品…

    交互专题 2017-08-07
  • 提高交互设计技能的五个方法 从零开始学交互

    提高交互设计技能的五个方法

     设计师 交互设计师  现在,所有基于Web进行设计的人都需要对交互设计原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依…

    2017-08-01
  • 交互设计

    用户体验地图(User Experience Map)制作过程中的一些误区

    作为一种新的产品设计以及用户体验设计工具,User Experience Map(用户体验地图)已经被越来越多的产品经理以及设计师们所接受;确实,在产品策略、功能设计、用户服务等一系列产品发展过程中,用户体验地图的建立可以直观的呈现用户在每一个目标任务下的行为、情感、思考过程,有效的为产品工作者提供各方面的信息。然而作为一种新的工具,铺天盖地的方法论将产品工作者淹没在前进的路上。大家都热衷于建立一个这样庞大而系统的“图片”,都不约而同的将注意力放在如何产出这个Map上,甚至是依葫芦画瓢根据国外的产出物反推这个东西是怎么制作出来的。基于这种现状大多产出的Map都会“徒劳无功”,着急产出的同时你已经忽略了很多原则性的东西。下面我们就从以下几个方面来聊一聊这个过程中容易进入的误区;

    2017-05-26
  • 微信热点

    搜狗词典用户体验更给力 可原汁原味学英语

    日前,搜狗词典APP迎来重要升级,接入上百部与查询词相关的优质英美影视剧内容,并将“国际报道”内容板块升级为“双语报道”,进一步丰富了英语单词的学习语境,提升了用户的查词、记词体验,帮助用户原汁原味学英语。接入海量英美影视剧内容,新增“原声影视”内容板块及“视频单词卡片”功能,是搜狗词典APP此次升级中值得称道的一大亮点,这使得搜狗词典APP突破了原有的文字、图片、音频等内容形式,方便用户通过丰富的影视剧短片,用更具趣味的方式了解学习英...

    2018-03-12
  • 设计干货收藏|UI动效的必备原则总结 交互设计

    设计干货收藏|UI动效的必备原则总结

    高度总结动效设计的基本原则,有大量的案例分析。动效设计在用户体验的提升中到底有没有用呢? 我们在下面讨论的是为什么要应用动效,以及在那些时候动效,动效的特性等等。

    2017-05-28
  • 交互设计

    产品设计不能闭门造车

     用户调研的重要性不言而喻,没有用户调研的产品设计是闭门造车,不能完美解决用户的痛点,自然也不能创造最大的价值,那么用户调研到底应该怎么做呢? 产品不同阶段的诉求之前的文章中,笔者提到过用户体验5要素,…

    2017-03-28
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress