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

《常用中后台交互设计控件使用场景与规范总结.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