今天来总结下App的可点击元素的设计。
一、可点击元素包括哪些？
先看看常见的按钮是这样的：
这是具象的，模仿真实世界里的按钮来做的设计。
关于按钮控件，在软件工程里，是这么定义的：
按钮控件，是一种基础控件。按钮控件根据其风格属性可派生出：命令按钮、复选框、单选按钮、组框和自绘式按钮。
目前，大部分移动app都属于自绘式按钮了，谁还用系统那自带的控件？
所以，app里，按钮还可以是这样的：
这个例子里，文字都是可以点击的，没有使用图标，也没有使用具象的按钮形式。仅仅使用文字作为可点击元素存在，而不使用图标作为可点击元素，这样使得这款阅读古诗词的app别有一番风味，其产品的气质体现得很到位。
其实，app的所有构成内容都可以是可点击元素。包括文字，图片，图标等等，点击后都可以有各种各样的回应。
比如下面这个，有图标＋文字，纯图标，按钮的形式，都可以点击。
把图片作为点击元素，多见于图片类app、阅读类中，比如一生必读的60部名著这类的app：
点击的概念比按钮更广泛，文字、图片、图标、按钮、输入框等等，都是可点击的。
那么，点击背后会出现什么？这种回应会造成用户困惑吗？这需要UI&UX设计时好好考虑，为了降低用户的困惑，我们需要用可点击元素给用户明确的提示。
我们再看个例子：
这里下载具体写清楚了是下载音乐，这样就可以避免单独使用下载图标，而用户不清楚下载的具体内容这种情况的出现了。
可点击元素所给到的回应应该是语义准确，而且在点击前已有所提示。
目前，常见的可点击元素有4种类型：
A. 纯文字B. 图片C. 卡片式D. 语义化的图标
二、纯文字跟图片作为可点击元素，语义表达是最准确的。
如下图，点击图片直接是查看图片的详情，逻辑明确。
三、卡片式，点击卡片任意位置打开详页，可以使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查看下表达一个意思的图标到底有几种形式，我尝试了下搜索“分享”，得到下图的结果，做设计的时候可以多参考下惯用的表达形式。
最后，总结下：
1、可点击元素包括这些：纯文字、图片、卡片式、语义化的图标。
2、纯文字跟图片作为可点击元素，语义表达是最准确的。
3、卡片式，点击卡片任意位置打开详页，可以使逻辑简单明了。
4、图标应尽量使用语义化高的，适当使用文字作为提示。
作者：shadow本文系作者授权微推客发布，转载请注明出处及作者信息。
评论(0)