常用中后台交互设计控件使用场景与规范总结

最近刚完成平台安畅云 2.0 的改版设计,平台模块很多,经常存在很多类似的页面和组件,若不制定统一的规范和控件,则会导致很多重复的工作,大大降低产品的设计效率;同时,平台的一致性也得不到保障。所以,我们视觉、交互、前端的小伙伴们针对我们踩过的坑,大家认真总结和提炼出一个符合公司定位的设计规范,统一公司项目的前端 UI 设计,规避不必要的设计差异和实现成本,实现设计和前端资源的效率最大化。


最近刚完成平台安畅云 2.0 的改版设计,平台模块很多,经常存在很多类似的页面和组件,若不制定统一的规范和控件,则会导致很多重复的工作,大大降低产品的设计效率;同时,平台的一致性也得不到保障。所以,我们视觉、交互、前端的小伙伴们针对我们踩过的坑,大家认真总结和提炼出一个符合公司定位的设计规范,统一公司项目的前端 UI 设计,规避不必要的设计差异和实现成本,实现设计和前端资源的效率最大化。

常用中后台交互设计控件使用场景与规范总结

此设计规范主要分享了中后台常用设计组件的定义、组成、使用场景及注意事项。

字体

概述

字体是界面设计中最基本的构成元素之一,用户通过文字来理解内容和完成任务,合适的字体将大大提升用户的阅读体验及工作效率。在安畅云项目的字体使用中,为了使页面的视觉层次更加清晰,我们从以下三方面来使平台的字体符合易阅读和美观的要求。

  • 合理的使用不同的字重、字号和颜色来强调界面中需要突出的信息;
  • 尽量使用单种字体,使用多种字体会让界面看起来零散和杂乱无章;
  • 遵循 WCAG 2.0 标准(标准详情见 https://www.w3.org/Translations/WCAG20-zh/#visual-audio-contrast),字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准。

字体使用建议

  • 中文字体优先级:PingFang SC、Hiragino Sans GB 、Microsoft YaHei(平台使用字体)
  • 英文字体优先级:Helvetica Neue、Helvetica、Arial(平台使用字体)

字号使用建议

常用中后台交互设计控件使用场景与规范总结

行高使用建议

行高也是影响用户阅读体验的重要因素之一,我们查阅资料得知西文的基本行高通常是字号的 1.2em 左右,而中文因为字符复杂,所以中文行高需要更大。现在公认1.5em 至 1.8em 之间会有一个比较好的视觉阅读效果。

安畅云项目行高计算公式:行高值=字号 x 1.5,例如:12 号字体的行高为 18px,14 号字体的行高为 21px。

常用中后台交互设计控件使用场景与规范总结

按钮&链接文字

使用按钮 or 链接文字 or 图标?

  • 当按钮标签过长(超过6个中文字),导致视觉出现问题时,建议改用链接文字。
  • 当按钮嵌在文本中时,应该用链接文字;
  • 当命令是次要时,应该用链接文字。
  • 当命令是很常规的操作(如删除、编辑等),且图标语义非常容易理解时,可以使用图标作为操作按钮。

按钮类型及状态

  • 按钮类型主要有:主按钮、次级按钮、幽灵按钮和线框按钮。
  • 按钮状态主要有:正常、悬浮、点击、加载中和禁用。
  • 按钮中的文本标签应该足够简洁和易懂,并且通常是一个动词
  • 如果点击按钮后不会立即响应,应当切换为加载状态;加载状态下不能点击。

常用中后台交互设计控件使用场景与规范总结

使用场景

1、主按钮

当需要突出或需要强调时使用它;通常情况下同一模块只允许有一个主要按钮。

2、次级按钮

当已存在主要按钮后还需要再突出时使用它;次级按钮权重比主要按钮低、比幽灵按钮高。

3、幽灵按钮

幽灵按钮几乎适用所有场景,是所有按钮中最基础的按钮。

4、线框按钮

权重性较低,主要用于添加附件等场景。

5、多按钮组合

当某条数据同时存在多个操作时,建议使用主按钮样式折叠显示,如下图:

常用中后台交互设计控件使用场景与规范总结

输入框

定义与组成

  • 定义:用于显示、输入或编辑文本、数值操作所使用的控件。
  • 组成:一般由标签、必填项符号(根据业务需求而定)、输入框和状态反馈组成。

3种常见形式(状态反馈放在输入框下面还是后面,视排版空间而定;一般情况下,弹窗中表单输入框错误状态反馈放下面,新页面表单输入框错误状态反馈放后面)

常用中后台交互设计控件使用场景与规范总结

输入框状态

常用中后台交互设计控件使用场景与规范总结

输入框类型及使用场景

1、单文本框(当输入的字符长度超过文本框固定的宽度时,须保证最后输入的字符显示出来)

(1)普通文本输入框

例如,昵称名称等填写。用户按照规则要求输入即可,输入错误时出现错误状态反馈提示;输入正确给出正确状态反馈提示。

(2)密码输入框

为了安全性起见,用户输入密码时,默认隐藏处理(同时提供“显示密码”和“密码加强计”功能)。同时需遵循密码的规则要求,状态反馈提示同普通文本输入框。

常用中后台交互设计控件使用场景与规范总结

(3)数字输入框

建议给出输入框的同时,可以让用户对数字进行微调的功能。对于类似固定电话填写,建议将区号与主体号码分开填写,中间用“—”隔开。

常用中后台交互设计控件使用场景与规范总结

2、多文本框

  1. 当用户需要输入或编辑长字符串时,请使用多行输入框。例如,备注、描述以及意见建议等的填写。
  2. 使文本控件的高度足够大,以便容纳典型的输入。
  3. 不要让文本输入控件在用户键入时增加高度;如果输入内容超过控件高度时,建议在框内出现滚动条。

常用中后台交互设计控件使用场景与规范总结

对话框&气泡确认框&气泡提示&通知

对话框(消息对话框)

1、定义

用来临时显示与用户当前正在执行的操作相关信息的控件,通常与黑色背景遮罩搭配使用。

2、组成

一般由标题(可有可无依照具体场景而使用)、内容、操作按钮以及 “×” 组成。

3、使用场景

(1)操作后发生某些严重错误或者警告用户接下来操作可能出现的风险时使用。

(2)操作不可进行时;某些操作无法让用户进行时,应弹出警告消息对话框。

(3)操作不可逆时;例如删除命令,执行后再也不能复原,就应该在执行前使用对话框进行再次确定。

常用中后台交互设计控件使用场景与规范总结

对话框(任务对话框)

1、定义

用来临时显示与用户当前正在执行的操作相关信息的控件,通常与黑色背景遮罩搭配使用。

2、组成

一般由标题、内容、操作按钮以及 “×” 组成。

3、使用场景

操作任务多或复杂时;当用户进行较复杂的任务时,应使用对话框嵌套控件,突出操作内容。例如表单。

常用中后台交互设计控件使用场景与规范总结

气泡确认框

1、定义

用来临时显示与用户当前正在执行的操作相关信息的控件。通常在操作对象附近直接显示,不出现黑色背景遮罩。

2、组成

一般由内容、操作按钮以及 “×”(大部分情况下没有,在气泡确认框外部点击即可关闭该确认框) 组成。

3、使用场景

频繁使用的破坏性操作。

常用中后台交互设计控件使用场景与规范总结

气泡提示

1、定义

用于对对象简短描述或补充说明的控件。当用户将鼠标悬停在对象上时会自动显示,当鼠标移开对象时提示就会消失。

2、组成

一般由解释说明信息组成。

3、使用场景

轻量级的信息反馈。例如,对某个对象简短描述或补充说明。对象通常是 链接文字或者是问号、感叹号图标。

常用中后台交互设计控件使用场景与规范总结

通知

1、定义

全局展示通知提醒信息。通常在系统右上角显示。

2、组成

一般由通知提醒信息组成。

3、使用场景

(1)用户的操作反馈提示。例如操作失败、成功、系统正在执行某操作等。

(2)系统主动推送的消息。

常用中后台交互设计控件使用场景与规范总结

单选控件

定义

只能在一组相关但互相排斥的选项中选择,且只能选择一个有效项的控件(包括通用单选控件和自定义单选控件)。

示例

(1)通用单选控件

常用中后台交互设计控件使用场景与规范总结

(2)自定义单选控件(此处仅列举一种样式,其他样式视具体场景而定)

常用中后台交互设计控件使用场景与规范总结

单选控件5种状态

常用中后台交互设计控件使用场景与规范总结

单选控件使用场景及注意事项

(1)当选项数量 ≤ 4时,一般使用单选控件;选项数量大于4个时建议使用下拉控件。(最终使用单选还是下拉控件,根据页面空间大小而定)

(2)当有推荐选项或者是用户常用选项时,建议默认选中。(若默认项对用户选择产生干扰,则不要默认)

(3)若用于对立相反的选项且只有两个选项时,例如同意、不同意,这两个选项应该整合为一个复选控件而不是使用单选控件。如下图:

常用中后台交互设计控件使用场景与规范总结

(4)单选控件建议以逻辑顺序排列选项,如从被选到的可能性从高到低、从小到大、操作难以度从简单到复杂、风险程度从低到高等。

复选控件

定义

在两个相对立选项之间进行选择或者是能选择多个有效项的控件(包括通用复选控件和自定义复选控件)。

示例

(1)通用复选控件

常用中后台交互设计控件使用场景与规范总结

(2)自定义复选控件(此处仅列举一种样式,其他样式视具体场景而定)

常用中后台交互设计控件使用场景与规范总结

复选控件5种状态

常用中后台交互设计控件使用场景与规范总结

复选控件使用场景及注意事项

(1)当有推荐选项或者是用户常用选项时,建议默认选中。(若默认项对用户选择产生干扰,则不要默认)

(2)若用于对立相反的选项且只有两个选项时,例如同意、不同意,这两个选项应该整合为一个复选控件而不是使用单选控件。如下图

常用中后台交互设计控件使用场景与规范总结

(3)复选框标签文本是对选中时的状态描述,未选状态的含义必须与选中状态明确相反。

下拉菜单

定义

当页面上元素或操作较多时,用以收纳这些元素或操作的控件。

示例

(1)下拉菜单—下拉框:

常用中后台交互设计控件使用场景与规范总结

(2)下拉菜单—下拉浮层:

常用中后台交互设计控件使用场景与规范总结

下拉框状态

常用中后台交互设计控件使用场景与规范总结

下拉框使用场景及注意事项:

(1)当页面上的元素或操作较多时,用此控件收纳元素或操作。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。

(2)当下拉选项中包含鼓励用户的可选项或大部分用户常用选项时,则可考虑提供默认项。

(3)当下拉选项非常多时,需在下拉框中加入搜索功能,方便用户选择。

常用中后台交互设计控件使用场景与规范总结

(4)当下拉框中标签字符超过最大宽度时,多余的字符用“…”显示,鼠标移入此选项时,用气泡提示全部显示。

下拉浮层状态

常用中后台交互设计控件使用场景与规范总结

下拉浮层使用场景及注意事项:

(1)当页面上的元素或操作较多时且视觉层次弱于下拉框时,用此控件收纳元素或操作。通常鼠标移入触点,会出现一个下拉浮层。可在列表中进行选择,并执行相应的命令。

(2)在浮层展开时,三角形图标顺时针翻转且同时变成红色;浮层收起时,三角形图标逆时针翻转且同时由红色变为默认颜色。

翻页控件

定义

一组提供翻页功能的按钮。

示例

(1)比较完整的版本(具体形式需根据业务需求而定)

常用中后台交互设计控件使用场景与规范总结

(2)简化版

常用中后台交互设计控件使用场景与规范总结

翻页控件状态(以例1做说明)

常用中后台交互设计控件使用场景与规范总结

翻页控件使用场景及注意事项

当加载或者渲染所有数据将花费很多时间时,建议使用翻页将数据分为几部分加载。

时间拾取器

定义

为用户提供时间选择或日期选择的控件。

示例(其他形式根据自身需求而定)

(1)选择时间

常用中后台交互设计控件使用场景与规范总结

(2)选择日期

常用中后台交互设计控件使用场景与规范总结

时间拾取器使用场景及注意事项

当用户需要输入一个时间,可以点击标准输入框,弹出时间面板进行选择。

数量控件

定义

用于数量选择的控件。

示例

(1)微调数量控件

常用中后台交互设计控件使用场景与规范总结

(2)下拉数量控件

常用中后台交互设计控件使用场景与规范总结

数量控件使用场景及注意事项

(1)当在连续且较短区间,一般为 10 以内取值时使用微调数量控件。

(2)微调数量控件也支持数字直接输入,默认数量为1,当数值为1时,减少按钮禁用。

(3)当非连续、取值范围较大的场景时使用下拉数量控件。下拉数量控件不支持数字直接输入,系统按业务需求规则默认一些数值供用户选择。

(4)为了页面保持一致,若旁边有其他下拉控件时可考虑把微调数量控件以下拉控件方式使用。

Tab选项卡

定义

在页面内切换内容的功能控件。

Tab选项卡状态

常用中后台交互设计控件使用场景与规范总结

Tab选项卡使用场景及注意事项

各选项卡内容模块之间是相互独立的,按照模块内容重要性以及用户使用 频率从前往后排列。

滑动条

定义

展示当前值和可选范围的滑动输入器。

滑动条类型

常用中后台交互设计控件使用场景与规范总结

滑动条使用场景及注意事项

连续数值型滑动条一般数值以较小变量变化,建议在其后面增加自定义数值输入框,方便用户精确输入。

加载控件

定义

用于反馈需要2秒以上才能完成的系统进程的控件。

常见类型

常用中后台交互设计控件使用场景与规范总结

加载控件使用场景及注意事项

(1)模块或正文初始内容加载、表单提交按钮提交后的加载、滚屏加载、加载更多等用通用加载控件。

(2)官网中产品展示图初始化加载时使用图片加载控件。

(3)上传大文件 / 加载需要较久时间的文件,使用显示进度的加载控件。

(4)官网专题页宣传时,需要配合主题的加载使用自定义加载控件。

暂时先总结这么多,不足之处请大家多多指教。同时,希望能和大家一起交流,一起进步。

 

本文由 @panda 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22702/

(0)
CatherineCatherine
上一篇 2017-05-02 17:50
下一篇 2017-05-02 19:37

相关推荐

  • 双十一之购物车体验

    今年的双十一,你剁手了吗?不管你剁不剁,反正我是剁了。剁手的同时,不妨来看看,电商购物车的哪些设计让你剁了还想剁。本文主要讲四个电商网站的购物车,分别是淘宝、京东、唯品会和聚美优品。

    2017-06-01
  • 铃木说马云的双11是错的

    铃木敏文:“判断项目是否可行,应该由用户立场出发,以用户视点深入考察是否符合需求。一旦决定开拓,就一定要坚持到底。”“海星有一种特殊的能力——再生。它的腕、体盘和管足受损或自切后,都能够重新生成一个新的海星。因此,它对环境的适应能力和生存能力都特别强。”铃木敏文:“冬天,北海道地区的店准备了大量空间贩卖冰淇淋。“
    当地生意人纷纷嘲笑说:“谁会大冬天里吃冰淇淋呀!”
    但是,铃木说:“家里暖气开得很足,如果能吃上冰淇淋,客人应该会很开心吧!”铃木敏文:“红豆糯米的美味之处在软糯口感,但在它刚被研发成型时,试吃过后并没有尝到糯糯的口感,于是找到研发告诉我制作红豆糯米的方法和普通米饭一样是用锅煮熟的,因而导致口感上有所差异。铃木训斥他说,红豆糯米本身应该以蒸笼蒸制,为什么不采用正确的方法呢? 原来,当时的 生产工厂并没有以蒸制大量糯米的工艺和设备,因此选择了和普通米饭相同的做法。 我要求他们改变制作方法,引进新设备,力争做出原汁原味的糯米饭团。开发团队对糯米的种类、 淘洗方法、浸泡时间、红豆的选择、煮法等所有的要素都重新研究,克服了好几个难关,终于让这一 产品 获得了极大的成功。”铃木敏文:“如今已最新的第六版的投资高达500亿日元,这些年IT的总投资金额已达到3000亿日元。商品库存数据、POS数据、缺货数据、报废数据,在第六版系统中,7-Eleven开始为各家加盟门店订货提供三项数据,以作为协助成立假设的参考,分别是立地数据、设施数据和长期数据。“立地数据”是指调查各门店周边(半径350米,徒步5分钟以内的)的家庭数;如果有商户的话,就调查其员工人数。“设施数据”主要了解自家门店周边是否有学校或医院之类的设施,这对于日常订货作业的假设设定都能提供一定的帮助。他们还根据过去的数据呈现出有关趋势及动向的数据,提供“长期数据”。”

    2017-05-02
  • 设计实战|城市指南网站着陆页是这样设计出来的

    今天咱们要聊的是“城市指南”(Big City Guide)网站这一概念设计案例研究。

    2017-06-06
  • UX设计师不得不掌握的心理学技巧

    不要让视觉效果过重以至于霸占了整个网页的重心
    视频比起文本和图片更容易吸引用户的注意力
    女性和孩子的形象更容易吸引用户的注意力
    用户浏览页面的视觉轨迹是“F”型的

    动机
    能力
    触发

    2017-05-23
  • 线上广告更加吸引人的5个思路

    今天说讲述的5个思路是不同的,内容决定设计,留白,故事都和这种填鸭式的广告不是一个路子。而线上广告和传统广告最大的不同在于,它可以创造体验。

    2017-05-04
  • 交互设计攻略之“竞品分析”上

    前言:无论一个产品是从0到1,还是从1到2,我们需要对自身产品有一个清晰的认知与定位,最快的方式就是竞品调研。知己知彼,取长补短。(这里针对自家产品做的一个竞品调研分享,请勿商用。)首先,我们要确定竞品调研的目的是什么?很简单:为了选取同类型产品功能,可供学习与借鉴的地方,从而对本产品平台进行迭代优化。运用金字塔原理自上而下的方法解决“竞品分析的目的”是找出【同类竞品学习与借鉴】,那么引申的问题如下:一、同类型产品有哪些?想知道同类型产...

    2018-03-16
  • 译文 | 交互设计的5大支柱

    文中提到的《交互设计最佳实践:卷1》/《用户体验设计文档指南》/《2014年Web UI模式》可在此处下载,建议先保存到网盘~

    2017-05-27
  • 视觉设计趋势预测 2015年-2016 年 (a)

    视觉设计是一门随着时代发展与社会变迁,随着人类认知提升与生活环境变化……

    2015-01-02
  • 聊一聊不同应用场景下的验证码

    最近在做关于验证码的项目的时候,从交互的角度梳理了产品各个平台验证码的应用场景。在一个产品中,会有多个设计师分工协作,不同的设计师做设计迭代。由于验证码在整体设计中太容易被忽略,它在每个场景的显示逻辑可能不尽相同。下面,我们就来聊一聊不同应用场景下的验证码。

    2017-05-05
  • 以文本框为例,了解交互设计师在工作中的逻辑思考方法

    文本框是设计工作中常见的组件之一,无论是PC还是无线,大多仅是样式上的不同,它们的交互行为上是可以相互参照的。本文想从这一简单的组件出发,让大家看到交互设计师在工作中的逻辑思考方法,从而达到见微知著的直观感受。

    2017-05-17