箭头符号可能是人类图形史上最伟大的创造
lipiwang 2024-11-25 14:44 5 浏览 0 评论
数十万互联网从业者的共同关注!
作者:柴林,百度资深交互设计师
微信公众号:柴林(ID:Lynn-Chai-Designer)
作者授权早读课发表,转载请联系作者。
欢迎投稿到早读课,投稿邮箱:mm@zaodula.com
足够简单的图形承载着丰富而又抽象的概念。箭头符号的现实原型就是弓箭的箭头,所以箭头指向的方向意味着猎物,意味着目标。现代社会的我们能够清楚的理解箭头的指示作用,这一点与百万年前穿着兽皮的祖先举着弓箭追击猎物求生的经验有着遗传意义上的必然联系。那种强烈的想获取食物的求生意愿,对作为猎物的目标的渴望,一代一代的遗传下来。所以作为现代人的我们握着鼠标,盯着屏幕上来回移动的指示箭头,会觉得这个图标理所当然。甚至于眼心手一体,忽略了这个再正常不过的存在。
(图:Wim Wenders 摄影作品On the Golan Heights)
最好的界面是没有界面,最好的图标是用户看到这个图标的时候意识不到这是个图标而直接得到了图标背后的信息。这就好比英文学到一定程度之后,读过一篇文章再回忆起来会只记得文章的意思而不记得文章是用中文还是英文写的。语言是为了沟通与交流而存在,无论是计算机语言还是图形语言,都是语言的一种。如果我们可以像潘多拉星球上的那维族人一样可以通过辫子上的神经元交流,那么也就不会有那么多误解与纷争,也就不需要那么多复杂的语言了。
作为语言的不同形式,图形相较于文字也有着不可否认的优势。比如它像音乐一样没有国界的限制,它在传达信息时更加直观、具体。自从2007年iPhone横空出世之后,智能手机的普及让App逐渐逐渐取代了网址的作为互联网入口的作用。移动应用的启动图标占领了用户的桌面,如何让用户在一屏一屏的图标海中迅速发现自己的App并且让用户一眼就能搞懂自己的产品是做什么用的就变得非常重要。启动图标虽然没有被称之为Logo,但他确实发挥着Logo的作用。
具象的箭头:箭头图标与交互路径
移动App相对于PC站点,有一个非常重要的特点在于移动App的轻量化。轻量化和即时性是这个时代的特点。深度的、需要长时间集中精力才能搞定的事情通常被放到PC上来做。用户在手机上习惯就一个目标打开一个App然后迅速完成任务后关闭。用户在移动端的平均使用时长是远低于PC端的。PC端占据着用户的工作时间,移动端占据着用户的碎片时间。
轻量化的特点要求移动应用需要具备清晰易懂的信息架构与交互方式,页面层级深度不能给用户带来困扰和负担。在这里我把这种合理设置页面与页面之间的流转关系的设计工作称之为交互路径的设计。那么页面中的“返回”按钮、“下一步”按钮在产品的交互路径上起到路标式的作用,而这两个按钮通常都有箭头图标辅助或代替。
如果把一个个页面理解为交互路径上到达的一个个房间,那么房间越多,用户可能会越焦虑,在用户进行的当前任务之外,始终有一个问题需要面对:“我怎么回去?”
这个“返回”,不仅仅意味着从哪儿来的回哪儿去,有时候也意味着我要回到上一级目录去,有时候则意味着退出某项任务,有时候则意味着类似Ctrl+Z式的撤销操作。所以说,返回按钮就像是用户手里的一根儿救命稻草,像是安全逃生通道的绿色的EXIT标识,它给用户带来一种潜在的安全感。所以在任何一个页面中充分考虑当前任务的退出与返回是交互设计的一个非常基本的工作。
微信这样的超级App复合了聊天、通讯录、浏览器、支付等多个功能,而它又不支持多线程后台任务(当然如果支持的话可能会更复杂),那么假如我在某一项任务(比如浏览朋友圈文章)时,另外一项任务(比如有人给我发消息了)突然出现,这时我打开聊天界面之后怎么返回到刚才浏览的文章的页面上去呢?
圆形的箭头图标:同步与刷新
数据的上传(Upload)与下载(Download)其实本没有上与下的方向概念,只是一种客户端与服务端的数据交互。上传是要把用户的数据传到服务器,下载是将服务器的数据传给用户。上与下的概念只是方便用户理解而设定的一个概念模型。这是一个非常成功的概念模型,使后来“云”的概念变得容易理解。
与刷新(图A)和同步(图B)相比,上传与下载更偏向于用户自发的一种主动行为。刷新意味着重新下载新的内容,所以刷新图标通常是一个圆形的向下的图标。同步则意味着上传新的内容或同时下载新的内容,以与服务器上的内容保持一致。所以通用的同步图标由两个圆形的箭头组成。
圆形的刷新图标和同步图标,还附带着一个可旋转的心理模型的预期。就像iOS系统更新时的齿轮图标一样,这种预期可能在潜意识中存在,一旦旋转动画出现时,带给用户一种“本该如此的惊喜”的感觉。同时,一个旋转的圆圈(图C)通常用来表示加载进程,加载与刷新的相关性,也体现在了两个图标的表达上。
辅助表意的下箭头
谢尔顿最钟意的史波克手势,《星际迷航》中瓦肯人以此表示祝福,代表生生不息、繁荣昌盛(Live long and prosper)的意思。我们拍照时也有很多有趣的手势,其中一个最具有历史渊源的便是丘吉尔的剪刀手。丘吉尔在用剪刀手表示Victory的时候肯定没料到这个手势会迅速风靡。但随着摄影的迅速普及,大家都希望自己的照片能够拍的生动好看,所以一张方形构图的照片内,除了一张大圆脸之外,很多人都喜欢配合一定的手势。是的,手是人的第二表情。
(伊娃·格林)
所以从这一点上说,V的手势其实也是一个箭头,一个具有提示功能的箭头。也许你会觉得这里说箭头有些牵强附会,但这些手势至少构成了几条有指向型的斜线。为什么那么多人在拍照时喜欢摆出手势?设想一下如果你五官和表情在拍照时并不具有足够的表现力,那么就需要借助手势让照片生动起来了。
如果把上面丘吉尔和史波克的手势抽象成一个向下的箭头,就变成了现在用户界面中一种常见的表现形式,谁都知道点开这个向下的小箭头你会在用户头像下方得到一个关于用户的菜单。
也许这种形式并不是那么常见,但文字与下箭头的结合已经成为了一种通用样式。组合形式其实也有不少,但这些形式之所以能够迅速被用户认同变成零学习成本的东西,功劳在于用户界面中一个基础的组件:下拉菜单(Droplist)。
这里这些箭头起着吸引注意力和辅助提示两个作用,首先文字与图标的组合形式会比单纯的文字链接更能吸引用户的注意力,并且文字链接的通常用来实现页面之间的跳转;其次文字与箭头图标的组合形式提示这里点开还有新的内容。
看似友好的右箭头
箭头图标的第一个引申意是方向,在此基础上继续引申出了指示(提示)的含义。右箭头和表示返回的左箭头相呼应,通常在界面中提示用户这里将会前进到下一个页面。
在智能手机发展初期,右箭头在移动端的交互界面中与返回箭头一样,有着举足轻重的作用。尽管在有些时候我们觉得没有这个右箭头的提示用户也会理解一个列表页,但iOS还是保留了它。可以理解,附带右箭头的列表相对于没有右箭头的,肯定会带来更强的指示性。
相关推荐
- 超越JSON.parse:JavaScript中高效反序列化的艺术
-
当我们需要在网络间传输数据或将数据存储到本地存储时,我们通常会将JavaScript对象转换为字符串,然后在需要时再将其转换回对象,这就是数据序列化与反序列化。虽然JSON.parse()和JSON....
- 如何给别人网页上增加内容通过Chrome扩展为网页添加快速滚动功能
-
ContentScripts来看开发网站的介绍,ContentScripts是一类在网页上下文中运行的文件。它们可以使用标准的DOM接口,实现读取浏览器访问的网页的详细信息,比如网页的DOM结构...
- JavaScript执行栈和执行上下文(js 执行上下文与执行栈)
-
在JavaScript中,执行栈和执行上下文是理解代码执行流程和作用域链的关键概念。它们决定了代码如何执行以及变量和函数如何被查找和访问。本文将详细介绍执行上下文的生命周期、执行栈的工作原理以及它们在...
- 防止浏览器缓存特定JS文件的常用方法
-
防止浏览器缓存特定JavaScript文件的常用方法:1.添加版本号或时间戳在引用JavaScript文件时,在URL中添加一个版本号或时间戳作为查询参数。这样每次更新文件后修改这个参数值,就能让浏...
- 前端面试:JavaScript 字符串的常用方法?
-
JavaScript字符串是一种不可变的数据类型,因此在使用字符串时需要注意以下几个方法:charAt(i):返回指定索引位置的字符。concat(str[,start[,end]]):连接...
- Sequelize 在 Node.js 中的详细用法与使用笔记
-
1.Sequelize简介Sequelize是一个基于Promise的Node.jsORM(Object-RelationalMapping)工具,支持PostgreSQL、My...
- 前端js加密解密常用的六种方法(js加密解密源代码)
-
一、MD5加密可以使用md5插件进行加密插件地址:github.com/blueimp/JavaScript-MD5计算给定字符串值的(十六进制编码)MD5哈希值:计算给定字符串值和键的(十六进制编...
- javascript深拷贝浅拷贝原理分析(js深拷贝和浅拷贝如何实现)
-
用js处理数据的时候经常遇到这样一个问题,需要保留原始数据不变情况下,进行一系列数据操作,这时候需要制作一份原始数据的副本数据来进行操作注意的是引用数据类型和基本数据类型在内存中存储方式是不一样的,只...
- 1、从零开始了解和使用WPS的js宏(JSA)
-
最近使用了一下wps的宏本地客户端功能进行了数据查询,与vba相比感觉还是比较好用的。(所谓本地客户端就是指单机使用运行的wps程序)VBA因为长时间的发展,胜在功能比较强大,支持一些Active...
- JavaScript字符串查找方法总结(js查找子串)
-
在JavaScript中,查找字符串的常用方法有以下几种,根据不同的需求选择合适的方式:1.indexOf()/lastIndexOf()作用:查找子字符串首次出现的位置(indexOf)或...
- JavaScript 合并数组的三种方法(js数组合并的几种方法)
-
数组作为一种数据结构,表示索引项的有序集合。经常会使用到数组,尤其是将多个数组进行合并,比如将数组[1,2,3]和数组[4,5,6]合并,最终得到数组[1,2,3,4,5,6]。数组的合并分不...
- JS短文,如何正确理解Splice() 函数与Slice() 函数
-
转载说明:原创不易,未经授权,谢绝任何形式的转载Splice()函数与Slice()函数都是JavaScript数组中常用的方法之一。虽然它们的名称很相似,但它们的作用却截然不同。在这篇文章...
- JavaScript字符串concat()方法教程
-
一、简介JavaScript中的字符串是一种基本数据类型,它可以用单引号或双引号括起来。concat()方法用于将一个或多个字符串连接起来,并返回连接后的新字符串。concat()方法不会改变原始字符...
- 手把手教你常用的59个JS类方法(js几种类型)
-
前言前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理;这个时候就非常有必要将一些常用的工具类封装起来;本文根据常用的一些工具类封装了59个方法,当然还有很多用的较少前期没有录...
- js数组常用方法总结(js数组的使用)
-
首先说明,本文没技术含量,都是js的知识,只是为以后查阅方便。另外我们开了一个免费的讲解web前端课程,有兴趣的朋友可以去看,详情地址:http://fe.qietu.com/forum.php1、创...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)