欢迎各行业互联网运营达人加入我们91运营大家庭,会运营的人都来这里了! 导读:此设计规范主要分享了中后台常用设计组件的定义、组成、使用场景及注意事项。 旨在统一公司项目的前端 UI 设计,规避不必要的设计差异和实现成本,实现设计和前端资源的效率最大化。 正文 背景 之前有写过一篇关于新手入门交互设计师的文章《新手入门做交互设计的那些事儿》,最近刚完成公司平台 2.0 的改版设计,平台模块很多,但其中往往存在很多类似的页面和组件,导致了很多重复的工作,大大降低了产品的设计效率。 同时,由于团队人员较多,没有统一的规范,平台的一致性得不到保障。所以我们视觉、交互、前端的小伙伴们针对我们踩过的坑,大家认真总结和沉淀出一个符合公司的设计规范。 旨在统一公司项目的前端 UI 设计,规避不必要的设计差异和实现成本,实现设计和前端资源的效率最大化。 此设计规范主要分享了中后台常用设计组件的定义、组成、使用场景及注意事项。 字体 概述 字体是界面设计中最基本的构成元素之一,用户通过文字来理解内容和完成任务,优秀的字体将大大提升用户的阅读体验及工作效率。 在安畅云项目的字体使用中,为了使页面的视觉层次更加清晰,我们从以下三方面来使平台的字体符合易阅读和美观的要求。
字体使用建议
字号使用建议 行高使用建议 行高也是影响用户阅读体验的重要因素之一,我们查阅资料得知西文的基本行高通常是字号的 1.2em 左右,而中文因为字符复杂,所以中文行高需要更大。现在公认1.5em 至 1.8em 之间会有一个比较好的视觉阅读效果。 安畅云项目行高计算公式:行高值=字号x 1.5,例如:12号字体的行高为18px,14号字体的行高为21px。 按钮&链接文字 使用按钮 or 链接文字 or 图标?
按钮类型及状态
使用场景
输入框
输入框状态 输入框类型及使用场景 · 单文本框(当输入的字符长度超过文本框固定的宽度时,须保证最后输入的字符显示出来)
多文本框
对话框&气泡确认框&气泡提示&通知 对话框(消息对话框)
对话框(任务对话框)
气泡确认框
气泡提示
通知
单选控件
示例
单选控件5种状态 单选控件使用场景及注意事项
例如:
复选控件
示例
复选控件5种状态 复选控件使用场景及注意事项
例如
下拉菜单
下拉框状态 下拉框使用场景及注意事项
下拉浮层状态
下拉浮层使用场景及注意事项
翻页控件
翻页控件状态(以例1做说明) 翻页控件使用场景及注意事项
时间拾取器
时间拾取器使用场景及注意事项 当用户需要输入一个时间,可以点击标准输入框,弹出时间面板进行选择。 数量控件
数量控件使用场景及注意事项
Tab选项卡 定义:在页面内切换内容的功能控件。 Tab选项卡状态
Tab选项卡使用场景及注意事项 各选项卡内容模块之间是相互独立的,按照模块内容重要性以及用户使用 频率从前往后排列。
滑动条 定义:展示当前值和可选范围的滑动输入器。 滑动条类型 滑动条使用场景及注意事项 连续数值型滑动条一般数值以较小变量变化,建议在其后面增加自定义数值输入框,方便用户精确输入。
加载控件 定义:用于反馈需要2秒以上才能完成的系统进程的控件。 常见类型 加载控件使用场景及注意事项
作者:panda,交互设计师 |
|