欢迎来到天天文库
浏览记录
ID:29949376
大小:911.50 KB
页数:19页
时间:2018-12-25
《常用中后台交互设计控件使用场景与规范总结.doc》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库。
1、常用中后台交互设计控件使用场景与规范总结 最近刚完成安畅云平台2.0的改版设计,平台模块很多,但其中往往存在很多类似的页面和组件,导致了很多重复的工作,大大降低了产品的设计效率;同时,由于团队人员较多,没有统一的规范,平台的一致性得不到保障。所以,我们视觉、交互、前端的小伙伴们针对我们踩过的坑,大家认真总结和沉淀出一个符合公司的设计规范。旨在统一公司项目的前端UI设计,规避不必要的设计差异和实现成本,实现设计和前端资源的效率最大化。 此设计规范主要分享了中后台常用设计组件的定义、组成、使用场
2、景及注意事项。 字体 概述 字体是界面设计中最基本的构成元素之一,用户通过文字来理解内容和完成任务,优秀的字体将大大提升用户的阅读体验及工作效率。在安畅云项目的字体使用中,为了使页面的视觉层次更加清晰,我们从以下三方面来使平台的字体符合易阅读和美观的要求。 合理的使用不同的字重、字号和颜色来强调界面中需要突出的信息; 尽量使用单种字体,混合使用多种字体会让界面看起来零散和杂乱无章; 遵循WCAG2.0标准(标准详情见https://www.w3.org/Translations/WCAG
3、20-zh/#visual-audio-contrast),字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准。 字体使用建议 中文字体优先级:PingFangSC、HiraginoSansGB、MicrosoftYaHei(平台使用字体) 英文字体优先级:HelveticaNeue、Helvetica、Arial(平台使用字体) 字号使用建议 行高使用建议 行高也是影响用户阅读体验的重要因素之一,我们查阅资料得知西文的基本行高通常是字号的1.2em左右,而中文因为字符复杂,所以
4、中文行高需要更大。现在公认1.5em至1.8em之间会有一个比较好的视觉阅读效果。 安畅云项目行高计算公式:行高值=字号x1.5,例如:12号字体的行高为18px,14号字体的行高为21px。 按钮&链接文字 使用按钮or链接文字or图标? 当按钮标签过长(超过6个中文字),导致视觉出现问题时,建议改用链接文字。 当按钮嵌在文本中时,应该用链接文字; 当命令是次要时,应该用链接文字。 当命令是很常规的操作(如删除、编辑等),且图标语义非常容易理解时,可以使用图标作为操作按钮。 按
5、钮类型及状态 按钮类型主要有:主按钮、次级按钮、幽灵按钮和线框按钮。 按钮状态主要有:正常、悬浮、点击、加载中和禁用。 按钮中的文本标签应该足够简洁和易懂,并且通常是一个动词。 如果点击按钮后不会立即响应,应当切换为加载状态;加载状态下不能点击。 使用场景 1、主按钮 当需要突出或需要强调时使用它;通常情况下同一模块只允许有一个主要按钮。 2、次级按钮 当已存在主要按钮后还需要再突出时使用它;次级按钮权重比主要按钮低、比幽灵按钮高。 3、幽灵按钮 幽灵按钮几乎适用所有场景,
6、是所有按钮中最基础的按钮。 4、线框按钮 权重性较低,主要用于添加附件等场景。 5、多按钮组合 当某条数据同时存在多个操作时,建议使用主按钮样式折叠显示,如下图: 输入框 定义与组成 定义:用于显示、输入或编辑文本、数值操作所使用的控件。 组成:一般由标签、必填项符号(根据业务需求而定)、输入框和状态反馈组成。 3种常见形式(状态反馈放在输入框下面还是后面,视排版空间而定;一般情况下,弹窗中表单输入框错误状态反馈放下面,新页面表单输入框错误状态反馈放后面) 输入框状态
7、 输入框类型及使用场景 1、单文本框(当输入的字符长度超过文本框固定的宽度时,须保证最后输入的字符显示出来) (1)普通文本输入框 例如,昵称、名称等填写。用户按照规则要求输入即可,输入错误时出现错误状态反馈提示;输入正确给出正确状态反馈提示。 (2)密码输入框 为了安全性起见,用户输入密码时,默认隐藏处理(同时提供显示密码功能)。同时需遵循密码的规则要求,状态反馈提示同普通文本输入框。 (3)数字输入框 建议给出输入框的同时,可以让用户对数字进行微调的功能。对于类似固定电话填写
8、,建议将区号与主体号码分开填写,中间用“—”隔开。 2、多文本框 当用户需要输入或编辑长字符串时,请使用多行输入框。例如,备注、描述以及意见建议等的填写。 使文本控件的高度足够大,以便容纳典型的输入。 不要让文本输入控件在用户键入时增加高度;如果输入内容超过控件高度时,建议在框内出现滚动条。 对话框&气泡确认框&气泡提示&通知 对话框(消息对话框) 1、定义 用来临时显示与用户当前正在执行的操作相关信息的控件,通常与黑色背景遮罩搭配使用。 2
此文档下载收益归作者所有