专栏首页MixLab科技+设计实验室App之可点击元素的设计

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),作者:shadow

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用Github免费制作app介绍主页

    这几天在准备spyfari的相关上线准备,有所收获,今天更新个技能—— [利用Github免费制作app介绍主页] 作为独立开发者,每一次的投入都是自己的精力或...

    mixlab
  • DIY一个以图搜图引擎1

    大家好,凡关注本公众号的用户都可参与到这个小实验中来,基于微信头像的数据,我发现这几个有趣的事情(注意保密,以下都只显示头像,我也只能取到头像和昵称的数据,其他...

    mixlab
  • 技能之H5

    自在园O设计Mix科技实验室,正在 搭建Mix技能树,前几期更新的技能有: 技能之AR技术入门 5个用法,关于Gif技能 技能之用iMovie制作预告片 ...

    mixlab
  • ICONFONT字体图标库使用

    剽悍一小兔
  • Tip | 使用GitHubDesktop提交 本地existing项目

    点击File,下拉菜单中点击New Repository (或者直接Ctrl + N):

    凌川江雪
  • 清除Win7通知区域(Notification Area Icons)的无效图标

    一些程序在运行时会自动在任务栏通知区域(Notification Area Icons)里显示图标。只要在通知区域里呆过,就会被记录下来,即使这个软件已经删除,...

    Enjoy233
  • 适合前端开发 和UI 设计的20多个最佳 ICON 库

    在应用界面中图标的存在,会给用户一个良好第一印象,这个挺重要的。但是从零开始开发图标需要大量的时间和金钱。在你的网站上使用图标可以让你有效地与你的访问者交流:它...

    前端小智@大迁世界
  • 干货!7个设计师必知的图标设计原理,收藏了!

    创建高质量的图标套组需要合适的方法,训练有素的眼睛,一些迭代和大量实践。下面,我将通过7个原则和大量实际示例来说明。最终目标是让你了解设计出优质图标的关键细节。...

    用户5009027
  • 披着羊皮的狼:如何利用漏洞以特定图标伪装可执行文件

    这个漏洞背后的图标显示bug可以深溯到Windows图像处理代码,其允许攻击者“借来”本地其他常用的图标并自动将可移植的可执行文件伪装起来,这样就更容易诱使用户...

    FB客服
  • 空心图标VS实心图标,你好哪一口?

    最近工作中遇到的一个问题引发了大家的讨论,就是在UI设计中,空心图标和实心图标应该在什么场景下使用?

    腾讯大讲堂

扫码关注云+社区

领取腾讯云代金券