App之可点击元素的设计

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

《App之“文字”的设计技巧》

《App之底部导航栏的设计》

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

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

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

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

1

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

关于按钮控件,在软件工程里,是这么定义的:

按钮控件,是一种基础控件。按钮控件根据其风格属性可派生出:命令按钮、复选框、单选按钮、组框和自绘式按钮。

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

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

2

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

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

3

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

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

我们再看个例子:

4

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

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

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

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

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

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

5

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

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

6

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

7

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

4.1语义化的图标

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

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


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

印象笔记的加号就是表示新建新笔记;

微信、QQ、支付宝的表示发起群聊、添加朋友、扫一扫、收付款;

知乎的加号,是发表新的问题;

百度云的表示上传照片、上传视频;

网易新闻的表示切换栏目、添加栏目;

大众点评的是写点评、添加商户、扫一扫、付款码;

爱奇艺,拍摄上传、扫一扫。

花瓣的采集功能。

8

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

9


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

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

10

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

11

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

12


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

13


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

1415

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

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

16

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

https://thenounproject.com/

http://www.easyicon.net/

http://www.iconfont.cn/

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

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

17

最后,总结下:

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

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

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

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

1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部