App之可点击元素的设计

hi,这是系列文章:App之xxx的第3篇,前2篇我总结了

App之“文字”的设计技巧

App之底部导航栏的设计

直接点击可以查阅以上2篇文章。

我为什么写这个系列的文章。因为我正在做一款app,我在团队中主抓产品设计、UX/UI设计、部分前端开发,少量运营。在工作之余,我决定把所研究的内容写成关于app之xxx的系列文章,文章选择的题材会往“小而精”这个方向努力,范围在我的工作内容中选取。

今天来总结下App的可点击元素的设计

一、可点击元素包括哪些?

先看看常见的按钮是这样的:

这是具象的,模仿真实世界里的按钮来做的设计。

关于按钮控件,在软件工程里,是这么定义的: 按钮控件,是一种基础控件。按钮控件根据其风格属性可派生出:命令按钮、复选框、单选按钮、组框和自绘式按钮。

目前,大部分移动app都属于自绘式按钮了,谁还用系统那自带的控件?

所以,app里,按钮还可以是这样的:

这个例子里,文字都是可以点击的,没有使用图标,也没有使用具象的按钮形式。仅仅使用文字作为可点击元素存在,而不使用图标作为可点击元素,这样使得这款阅读古诗词的app别有一番风味,其产品的气质体现得很到位。

其实,app的所有构成内容都可以是可点击元素。包括文字,图片,图标等等,点击后都可以有各种各样的回应。

比如下面这个,有图标+文字,纯图标,按钮的形式,都可以点击。

把图片作为点击元素,多见于图片类app、阅读类中,比如一生必读的60部名著这类的app:

点击的概念比按钮更广泛,文字、图片、图标、按钮、输入框等等,都是可点击的。

那么,点击背后会出现什么?这种回应会造成用户困惑吗?这需要UI&UX设计时好好考虑,为了降低用户的困惑,我们需要用可点击元素给用户明确的提示

我们再看个例子:

这里下载具体写清楚了是下载音乐,这样就可以避免单独使用下载图标,而用户不清楚下载的具体内容这种情况的出现了。

可点击元素所给到的回应应该是语义准确,而且在点击前已有所提示。

目前,常见的可点击元素有4种类型:

  1. 纯文字
  2. 图片
  3. 卡片式
  4. 语义化的图标

二、纯文字跟图片作为可点击元素,语义表达是最准确的

如下图,点击图片直接是查看图片的详情,逻辑明确。

三、卡片式,点击卡片任意位置打开详页,可以使app逻辑简单明了。

同时,卡片UI可以做得比较丰富,图片、标题、简介、按钮等元素都尽情表达。如

微信的消息列表:

QQ的消息列表

印象笔记的每一条笔记:

还有一类稍复杂点的卡片,卡片上栏跟下栏分别进入不同的详页,如:

知乎,点击上面一栏是进入问题,下面是回答的详页。

同样的,大众点评也是:

四、图标应尽量使用语义化高的,适当使用文字作为提示。

4.1语义化的图标

图标需要具有高度可识别性,具有高度识别性的图标我称为“语义化图标”,因为看到这些图标,已经不需要更多的文字来解释它的具体含义了。

下面介绍几种语义化很高的图标,运用这些图标可以减少文字的使用。


加号--“新建、增加”的含义,比如

印象笔记的加号就是表示新建新笔记; 微信、QQ、支付宝的表示发起群聊、添加朋友、扫一扫、收付款; 知乎的加号,是发表新的问题; 百度云的表示上传照片、上传视频; 网易新闻的表示切换栏目、添加栏目; 大众点评的是写点评、添加商户、扫一扫、付款码; 爱奇艺,拍摄上传、扫一扫。 花瓣的采集功能。

加号也可以跟各种语义化的图标相组合,比如领英的添加联系人:


省略号--“更多”的含义:

宝宝树孕育圈子里的省略号,表示“消息、搜帖子”的功能项。

微信公众号里,用来表示“推荐给朋友、投诉、清空内容、不再关注”

还有,微信朋友圈文章,更多中收纳的丰富功能选项:


抽屉符号——表示“类别、分类”

闲鱼用来表示“商品的类别”

京东也是表示商品类别,但把图标做了一些变化:

还有下面这种变体:


方向箭头——表示“返回、前进、收纳、展开

收纳的状态——下方向箭头:

展开状态——上方向箭头:


分享、共享,常见的符号。


搜索,这么形象的符号,已经没什么歧义了。

也经常用于输入框,作为提示符号使用


下载,常见的。


消息,一般会标上数字,提示消息的数量


扫一扫,基本都使用个符号了。


齿轮,一般表示“设置


爱心,表示“喜欢,收藏,关注,赞


感叹号,表示“查看详页


4.2 文字辅助图标表达更准确的含义

在图标不能完全表达意思的时候,通常增加文字辅助表达。

常见于方向箭头的回退里,把返回的上一级目录写在箭头后面,如

有些用的不是常见的语义化图标,所以加上文字还是有必要的。比如

还有些意思比较宽泛的,比如下载,加上文字后更具体:

有些是比较多余的,因为图标已经能完全、准确的表达含义了。

有时候为了统一风格,加上文字也是必要的,比如知乎底部导航栏中的更多:

4.3 关于图标,给大家推荐几个网站:

https://thenounproject.com/

http://www.easyicon.net/

http://www.iconfont.cn/

https://icomoon.io/app/#/select

可以用thenounproject查看下表达一个意思的图标到底有几种形式,我尝试了下搜索“分享”,得到下图的结果,做设计的时候可以多参考下惯用的表达形式。

最后,总结下:

一、可点击元素包括这些:纯文字、图片、卡片式、语义化的图标。

二、纯文字跟图片作为可点击元素,语义表达是最准确的。

三、卡片式,点击卡片任意位置打开详页,可以使逻辑简单明了。

四、图标应尽量使用语义化高的,适当使用文字作为提示。


转载请联系本号

自在园版权所有

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2016-05-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

Web前端:看完这些终于知道为什么HTML5开启了一个时代

各大公司的支持 ? ? HTML5的优势 1、HTML5移动优先 随着高端手机(Andriod、Iphone、Ipod、winphone)的盛行,移动互联应用开...

25560
来自专栏纪俊的专栏

Reactjs vs. Vuejs

对于近期关注度最高的 React 和 Vue,想在这里谈谈两个框架在开发风格上的差异。Vue 升级到 2.0 之后新增了很多 React 原有的特性,我的理解是...

4K00
来自专栏SEO

「知识」SEO深入学习---HTML语义介绍

33070
来自专栏项勇

笔记59 | Android管理音频焦点的学习

31990
来自专栏施炯的IoT开发专栏

Windows Phone Developer Tools RTW 新特性-Panorama控件

    昨天实践了一下Pivot控件,今天就趁热打铁,继续来看看Windows Phone Developer Tools RTW 中加入的新特性-Panora...

20590
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(四)——文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

36290
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

18960
来自专栏Android群英传

不怕搞事,自定义View云扩散效果

10520
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

对于 Web 动画的性能问题,仅仅停留在感觉已经优化的OK之上,是不够的,想要在盒子端跑出高性能接近 60 FPS 的流畅动画,就必须要刨根问底,深挖每一处可以...

526130
来自专栏前端迷

React 还是 Vue: 你应该选择哪一个Web前端框架?

2016年,React在Web端和移动端都实现了迅速的成长,稳稳地领先于其主要竞争对手Augular,巩固了其作为前端框架之王的地位。

30620

扫码关注云+社区

领取腾讯云代金券