• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 轻松看懂规范!详解组件控件结构体系之提示类

轻松看懂规范!详解组件控件结构体系之提示类

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含基本控件,经验分享,设计规范等相关知识,希望在学习及工作中可以帮助到您

Echo :本篇文章讲解功能分类之提示类,如果我是写信息的提示类,那么里面涉及到的会有toast、警示框、界面内嵌、loading加载、tips提示、空数据界面、卡片等等,这就和之前讲的有重复。所以,这里写的提示类是消息的提示类,而不是信息的提示类。

系列文章:?

  1. 《轻松看懂规范!详解组件控件结构体系之加载类》
  2. 《轻松看懂规范!详解组件控件结构体系之网络异常类》
  3. 《轻松看懂规范!详解组件控件结构体系之引导类》
  4. 《轻松看懂规范!详解组件控件结构体系之导航类》
  5. 《轻松看懂规范!详解组件控件结构体系之空数据类》

提示性类型一共有四类:

1.红点提示

2.数字提示

3.系统推送提示

4.弹框提示

依旧附上一张脑图,组件控件分类(如果单纯通过组件控件,难以满足功能划分的需求,所以我将这个范围扩大,分类里面不仅仅含有组件和控件,所以请不要在意细节。)

红点提示

用途:

通过红点引导用户点击,从而达到要给用户传达的信息。

使用场景:

1. 以产品的目标来说,新功能更新想让用户知道并去使用,从而使用红点提示用户。

2. 新消息的提示,通过红点让用户直观的知道有信息。

3. 因为业务需要,通过红点让用户去点击操作。

举例说明:

微信读书,列表关注栏出现红点,点击进去,新增微信好友出现红点。这样的使用是为了让用户加微信读书好友从而增加微信读书的社交化和粘度。这个属于使用场景第三条。

QQ日迹列表出现红点,在日迹界面,有新增动态,故通过红点提示。这个属入使用场景第二条。

MIX商店有新的更新,通过红点引导用户点击消费,从而满足业务目标。这个属于使用场景第三条。

数字提示

用途:

通过数字让用户知道新更新的信息数量,同时引导用户去点击,从而达到要给用户传达的信息。

使用场景:

1. 通过数字来提示用户新功能的数量。

2. 通过数字来提示用户收到信息的数量。

3. 桌面图标的数量让用户在进去App之前就知道收到的信息数量。

举例说明:

Messenger在tab 个人中心通过数字提示,让用户知道列表功能的数量。这属于使用场景的第一条。

微信消息列表通过数字让用户知道,收到对方多少条消息。这属于使用场景的第二条。

iOS 桌面图标的数量让用户在进去App之前就知道收到的信息数量。这属于使用场景的第三条。

红点和数字提示两者既有相同点又有不同点:

相同点:都是提示用户,从而引导用户去点击达到信息传导的作用。

不同点:数字提示相对于红点提示,提示强度更大。同时数字传达用户的信息更完整,具体到数量。

系统推送提示

用途:

前提是iOS和安卓系统推送权限打开,通过系统推送让用户获取到APP要传达的信息,属于强提示类。用户通过推送消息进入App获取消息,提高产品的活跃度和使用粘性。

使用场景:

1. 重要信息需要提示用户,例如邮件,IM。当用户收到新消息时,系统自动推送。

2. 满足运营需求,通过系统推送消息给用户传达运营促销活动,吸引用户去消费。

举例说明:

1. 如果网易邮箱的系统权限打开时,会收到系统推送,属于使用场景第一条。

2. 猫眼有新电影上映时,会有系统推送消息,引导用户去点击消费,这样的行为也提高了用户粘度。属于使用场景第二条。

弹框提示

用途:

弹框可以让用户知道一些重要的消息,同时通过弹框为某些业务提供一个流量入口。

使用场景:

1. 运营需求,通过弹框的提示语和入口,从而达到流量导入的效果。

2. 重要功能重要信息的入口。

3. 用于重要信息的提示,单纯的提示信息的作用。

举例说明:

支付宝的信用生活界面,用户进入后会给出一个弹框提示,引导用户去抢红包。满足运营需求。这属于使用场景的第一条。

QQ的H5页面通过弹框引导用户去下载使用QQ音乐,这属于使用场景的第二条。

QQ的服务号升级,通过弹框让用户知晓,这属于使用场景的第三条。

欢迎关注作者的微信公众号:「UEDC」

「如何正确使用提示?」

  1. 《如何正确使用控件系列之提示框(Toast)》
  2. 《聊聊移动APP中反馈提示的设计方法与实例》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 轻松看懂规范!详解组件控件结构体系之提示类
  • 轻松看懂规范!详解组件控件结构体系之加载类
  • 超实用!Apple 官方的图层命名方法之控制器篇
  • 高手帮你学规范!iOS版和安卓的规范解析之底部标签导航
  • 「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡
  • 超实用!如何正确使用控件系列之提示框(Toast)

相关文章

  • 2018-08-23超全面总结!如何画出专业的原型图?(上)
  • 2017-08-06借贷宝怎么推广让大家都来注册呢? 借贷宝推广方法技巧
  • 2017-08-06网站界面设计中为网站创建风格指南的方法(图文)
  • 2018-08-2310分钟了解兵器榜排行第一的Sketch插件:CRAFT
  • 2018-08-23表单经典原则是错的?来看这5个表单设计新规则
  • 2017-08-06总结一下时下流行的浏览器User-Agent大全
  • 2018-08-23充电时间!体验设计师成长之路上的养成书籍
  • 2017-08-06关于审查元素与查看网页源码的区别
  • 2018-08-23让设计落地!如何提升设计方案的说服力?
  • 2018-08-23针对不同设计阶段,如何选择合适的动效工具?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 酷站两连发!25万张高质量免费大图+在线图片压缩工具
    • 简单实用!使用无序列表时应该注意的7项细节
    • 弹框体系总结:模态弹框和非模态弹框
    • 趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?
    • 最新版iOS 11设计规范发布了,来下载官方源文件!
    • 哈哈哈!设计师专用表情包合集(一)
    • 90%的文案根本不会沟通,4大实用技巧提升文案的沟通力
    • 我花了80天,开发出这个3分钟快速搭建界面原型的设计工具
    • 超实用!如何制作统一可复用iOS/Material Design元件库?(附源文件)
    • 通过这篇文章,帮你彻底搞懂微交互

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有