• 做网站18609840880

如何构建Web端设计规范

发布时间:2018-10-09

    反馈就是用户做了某项操作之后,系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。
    设计规范中重要的部分就是组件规范了,制定组件的规范有哪些好处呢?新图闻科技带您了解。
    简单高效:熟悉了解组件的用法之后,在做界面设计时,只需要合理运用组件就可以快速搭建 web 端界面,高效无差错。由于有成套的组件规范,所以在交互设计和视觉设计过程中无需每次都重复劳动。
    统一用户体验:由于使用了统一的组件规范,所以保证了视觉和交互设计统一性,保证了用户体验的整体性。
    提升设计综合能力:由于减少了做组件重复性劳动,交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面,从而驱动业务创新。
    根据组件的用途,可以分为六大类:Feedback 反馈、from 表单、basic 基础、data 数据 、navigation 导航、other 其他。
    下面讲述的是 feedback 反馈类。
    一、toast
    定义:用户产生操作,出现 toast 提示,一般2~3s 消失;通过 toast 中的提示语告知用户需要了解的信息,让用户的行为在使用过程中得到反馈和帮助。
    使用场景:
    可提供成功、警告或错误等反馈信息。
    顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。
    例如简书在没有上传专题封面时就点击创建专题按钮,出现toast提示,提示用户要先上传专题封面才能创建专题。
    toast 的消息提示一共有三种类型:成功类、失败类、常规类。
    组件样式有两种:可以点击操作使其消失、不可点击操作使其消失。
    二、alert 警示提示
    定义:当用户进行某种操作时,网站会出现对应的警告信息提示用户,该提示信息的状态不会主动消失。
    使用场景:
    当某个页面需要向用户显示警告的信息时。
    非浮层的静态展现形式,始终展现,不会自动消失,有的组件用户可以点击关闭。
    例如淘宝购物车,删除之后,会出现 alert 警示提示,淘宝的例子属于 alert 的变种,用户可以点击「撤销本次删除 」进行还原之前的毁灭性操作。
    alert 警示提示的消息分类一共有三种类型:成功类、失败类、常规类。当然也可以不含有 icon 操作,含有 icon 操作的话警示性会更强。
    alert 警示组件样式有两种:带有删除操作,不带有删除操作。
    三、dialog对话框
    定义:用于提示用户当前操作,或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式,也可以是自定义复杂的模式,例如表单的填写。
    使用场景:
    用户在进行重要操作时,需要进行二次确认。
    用于重要的反馈提示,让用户知道信息提示。
    承载少量的表单填写类,减少页面的跳转。
    windows 系统的确定按钮一般在左边,而 Mac OS 的确定按钮一般在右边。因为这个原因,导致我们平时看到的确定有时候在左边,有时候在右边。
    微博和微信公众号后台的的对话框,确定在左边,而淘宝的对话框在右边。微信公众号的对话框是小浮层弹窗,避免了遮罩出现,同时对话框也出现在操作按钮的附近,对用户的干扰性也是弱的。
    dialog 对话框,有三种常见的使用场景。其中表单对话框、提示类、轻量级提示类、表单类样式都是基于二次确认类对话框样式的改变而得到不同的样式。
    四、Notification 通知提醒框
    定义:悬浮出现在网页右上角,用于全局的提醒式通知。常见于服务器异常、操作失败等。
    使用场景:
    较为复杂的通知内容。
    带有交互的通知,给出用户下一步的行动点。
    系统主动推送。
    Notification通知提醒框出现在网页右上角,一般4~5s消失,也可以点击叉号进行关闭。
    五、tooltip 文字提示
    定义:简单轻量的的文字提示。
    使用场景:
    鼠标移入则立即显示提示,移出则立即消失,不承载复杂文本和操作。
    常用于解释操作按钮的文字说明。
    还有一种 tooltip 是浏览器自带的,浏览器自带的和本篇的 tooltip 的区别是:浏览器自带的鼠标移入一般2s才显示,多用于折行打点的文字提示。例如简书,而本篇的 tooltip 鼠标移入就出现,且组件风格和浏览器自带的完全不一样。

我们的优势

更多+

多年互联网服务经验
大连网站制作团队
中小型企业互联网供应商
服务行业领域超过70个
品牌传播与互联网技术并重

公司介绍

更多+

  网站建设、品牌推广品牌公司:大连新图闻科技有限公司是一家互联网服务提供商, 企业网络服务品牌,也是企业邮箱品牌“盈世”的大连地区代理商。公司成立于2007年, 致力于为企事业单位及个人提供互联网解决方案。公司服务项目包括网站建设、网络营销推广、 宣传册设计、商业摄影、企业邮箱等,帮助客户高速应用互联网技术,提高企业综合竞争能力。

联系我们

更多+
  • 咨询热线

    咨询热线:186-0984-0880

  • 市场部 : 8001@newtwowin.com 业务联系,业务需求请发到此邮箱.

  • QQ咨询

    QQ咨询: 94091176

  • 邮箱

    客服部:xxz@newtwowin.com

  • 地址

    地址:大连市沙河口区西安路罗斯福B座3109

我们的技术

更多+

  我们专注于数字化品牌建设与网络传播的一体化整合,以全域互联网品牌综合分析为基础,为企业系统性打造品牌体系,沉淀品牌核心价值。打通企业与用户的沟通桥梁,深化双向互动与品牌交互,切实为用户解决实际需求。通过全方位品牌传播唤醒大众品牌认知,在品牌运营全周期创造长效价值。这是我们服务的核心理念,赋能客户成长的关键所在,更是打造优质品牌的成长之路。

《中华人民共和国电信与信息服务业业务》工业和信息化部 辽ICP备09023418号-18
版权所有:大连新图闻科技有限公司