后台产品设计规范

一、 基础框架Basic

1. 页面布局Layout

页面布局元素包括顶栏、侧边栏、主要区域和底栏。

几种常见的页面布局方式:

国字形布局

国字形布局,是一些大型网站常用的布局类型。顶栏是网站的logo、标题,页面中间放置网站的主要内容,左右分列一些消息内容,如导航栏、友情链接等,最下方是网站的一些基本信息、联系方式、版权声明等。

优点:页面容纳内容很多,信息量大。

缺点:页面拥挤,不够灵活。

T型布局

T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告,下方左侧是导航栏菜单,下方右侧则用于放置网页正文等主要内容。

优点:页面结构清晰,主次分明

缺点:规矩呆板,如果不注意细节色彩,很容易让人看之无味。

标题正文型布局

这种布局的最上方是标题或广告等内容,下面是正文,一般用于显示文章页面、新闻页面和一些注册页面等。

特点:简洁明快,干扰信息少,较为正规。

左右型布局

左右型布局是一些大型论坛和企业经常使用的一种布局结构。左侧一般主要为导航栏,右侧则放置网站的主要内容。

优点:视觉冲击力强。

缺点:很难将两部分有机地结合起来。

几种常见的页面布局方式

2.色彩Color

主色:主题颜色、用于顶栏等的背景色。

辅助色:除了主色外的场景色,不同使用场景颜色不同。如操作成功时的提示文字颜色等。

中性色:用于文本、边框等的颜色。

中性色使用规范


3.字体Typography

不同层级的文字字号、行间距可能都会不同,有了规范可保持整体的一致性,降低沟通成本和了解成本。

字体使用规范


4.边框Border

可设置各级边框的样式。

边框使用规范


5.按钮Button

可规定按钮样式、尺寸、色号等。

按钮使用规范


6.图标Icon

相同图标需统一。


7.其他规范

1.筛选条件一行显示几列;

2.上下左右内边距值;

3.原型页面尺寸等。


二、 引导类Navigation

1. 导航菜单NavMenu

样式1:顶栏

样式2:固定侧栏

样式3:可折叠侧栏:


2. 面包屑Breadcrumb

样式1:首页/列表页/新增

样式2:首页>列表页>新增

面包屑样式


3. 标签页Tabs

1.是否为选项卡样式

2.是否有动态增减

3.标签页的位置(上下左右)


4. 步骤条Steps

1.横式还是竖式

2.是否显示状态,如初审中、复审中等

3.是否有描述,如初审中(初审由XXX角色的用户完成…)

4.是否带图标

步骤条样式 


5. 下拉菜单Dropdown

1.触发对象:按钮或文字

2.触发方式:hover激活或click激活

下拉菜单样式 


三、 表单元素Form

1. 单选框Radio

1.样式1:

单选样式1 

2.样式2:

单选样式2 


2. 多选框Checkbox

1.样式1:

多选样式1 

2.样式2:

多选样式2


3. 输入框Input

1.单一型输入还是复合式输入

2.是否带单位

3.是否带联想输入

4.是否有提示文字

输入框样式 


4. 计数器InputNumber

1.设置精度

2.设置增减幅度

计数器样式


5. 选择器Select

1.是否有搜索

2.是否支持多选

3.备选项是否分组

4.是否显示禁用选项

选择器分组样式


6. 级联选择器Cascader

1.是否有搜索

2.是否支持多选

3.是否仅显示最后一级

4.是否每一级都可单独选择


7. 时间选择器TimePicker

1.固定时间点或范围

2.精确时间点或范围


8. 日期选择器DatePicker

日期选择器样式


9. 开关Switch

开关样式


10. 滑块Slider

滑块样式


11. 上传Upload

1.上传文件展示类型:平铺展示或列表展示

2.上传类型:点击上传、拖拽上传

上传样式


12. 评分Rate

1.是否允许出现半颗星

2.是否出现文字

3.是否将不同分值设置为不同颜色

评分样式



四、 数据展现

1. 表格Table

1.有无斑马线、有无边框、有无特殊颜色行/值

2.表头是否固定、列是否固定、表格是否固定高度、是否有多级表头

3.是否有选中某行的效果、有无多选全选、是否可排序、是否可筛选

4.悬浮数据时是否可显示额外内容、是否可展开行、是否需要合计

表格样式


2. 树形控件Tree

1.控件中是否可以选择

树样式


3. 分页Pagination

1.是否显示省略号

2.是否显示总条数

3.是否可调整每页显示条数

4.是否可直接跳转至某页

分页样式


4. 标签Tag

是否可移除,是否可新增。

可移除标签样式


5. 进度条Progress

1.线型/环形进度条

2.百分数内显/外显/不显

进度条样


6. 标记Badge

标记样式:数字/其他文本/小红点


五、 通知Notice

1. 警告Alert

非浮层元素,不会自动关闭的提示。

1.是否带图标

2.是否带标题文案

3.是否可关闭

警告样式


2. 加载Loading

1.加载图标样式

2.是否带文字

加载样式


3. 消息提示Message

主要用于主动操作后的反馈提示。


4. 弹框MessageBox

复杂、慎重的提示用弹框表现,如删除、提交等。


5. 通知Notification

悬浮出现在页面角落,显示全局的通知提醒消息。弹出位置;是否带图标;是否可自动关闭。

通知样式


大部分样式参考各网站前端样式库,部分图片来源于网络,侵删。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343