Axure实战规范分享:后台web网站

以下规范数值仅为参考,具体请根据自身产品灵活运用。

一、框架尺寸设计

目前 PC 端用户屏幕分辨率主要为:1920*1080、1600*900、1440*900、1366*768、1280*720等。那么我们的原型设计稿应该参考哪个尺寸设计呢?

这需要我们根据具体情况分析:

  • 如果我们设计的原型主要是发给客户和领导看,那么按用户和领导的电脑分辨率设计即可。
  • 如果我们设计的原型主要是自己查看,或者用自己的电脑演示给客户和领导看,那么按自己的电脑分辨率设计。
  • 上面提到都是按照固定的尺寸设计原型,还有一种方法是使用Windows.widthWindows.height函数自适应不同屏幕尺寸,高度自适应,宽度按最小的适配尺寸1366设计界面,让界面元件尺寸自适应不同屏幕铺满或者拉伸宽度尺寸。

当然,对应的适配规则需要灵活处理,如表格在高分辨率增加显示的字段数或者卡片增加每行显示的列数。

二、页面信息组件尺寸

1. 栅格布局

栅格系统的使用是为了解决自适应和响应式问题,从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现,以满足 2,3,4,5,6 分比布局等多种情况。固定宽度 Column,将间隔 Gutter 进行动态缩放。

需要栅格化处理的内容的总宽度=23列(1列=1宽度Column+1间隔Gutter)+1宽度Column=24宽度Column+23间隔Gutter。

谷歌规定模块和结构之间要以 8px 为基准,布局间相对间距可采用 8px 以及 8 的倍数,但一些小组件(按钮、间隔、输入框)可以以 4 为基准。

详细可参考蚂蚁金服:https://ant.design/components/grid-cn/

2. 信息组件尺寸

顶部栏高度建议为 48+8n,侧边栏宽度 200+8n。个人常用尺寸如下:

  • 顶部栏高度 64px
  • 侧边栏宽度 200px,收缩状态宽度 56px
  • 右侧内容尺寸为1126px(即1366px设计稿 – 200px侧导航 – 40px:内容左右两边20的间距)
  • 搜索输入框尺寸:160px*32px,表单输入框:320px*32px。
  • 按钮:80px*32px或者64px*32px
  • 图标:小图标16px*16px

三、组件间距

页面元件间的边距以4的倍数:4、8、12、16、20、24、28、32等。

如:图标与对应文案间距为4px、表单上下两个输入框间距为20px。

四、按钮

常用按钮可分为填充按钮、线性按钮、文字按钮。交互状态包括默认、悬停、点击和不可用。

按钮根据需求分为不同尺寸,大中小三个级别用在不同的场景,一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。

规范整理时要规定不同类型按钮的宽高、圆角及文字大小,同时还要将按钮的不同状态展现出来。

填充按钮之间间距最小为 10px。

五、字体

后台系统常用的字体:windows 系统,中文 Microsoft YaHei,英文 Arial;Mac 字体,中文 PingFang SC,英文 Helvetica;

后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。注意:Axure中最小字体建议为12px,由于谷歌浏览器预览设置问题,小号字体会被强制变大。

行高设定,根据文字大小及使用场景设置行高,一般行高=文字大小+6px/8px。

六、表格

表格信息一般主要功能为增删改查,查看和编辑是最基本的功能,表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

1. 行高

表格会间隔显示不同颜色,用于区分不同行数据、加强视觉流引导,展开单行的内置表格可采用纯色,选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。

2. 行数

表格行数太多加载速度会降低,延长用户等待时间;行数太少会导致用户不断翻页,降低使用效率。比较合适的默认表格行数是 20 或 50,用户可以根据自己需求选择默认的行数。设定行数之后,如果每页行数多于每屏行数,可在表格内引入滚动条,这时可以固定表头滚动内容。

3. 列宽

列内容的长度固定时,列宽应大于固定宽度,如时间;列内容不固定时,能预判最大宽度的按照最大宽度设定列宽(比如IP地址、MAC地址、姓名),不能预判最大宽度的设定列宽按照常用宽度,多于内容省略以「…」展示,鼠标悬停出现完整内容(比如详情、描述)。

4. 列数

表格列不应过多,列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列,用户可自定义展示必需列以外的其他列;只展示重要信息,下拉展开列查看完整信息;在表格中引入横向滚动条,根据实际情况选择是否要始终固定基本信息列(如第一列是文件名)和操作列(最后一列的操作)。

5. 对齐方式

文本左对齐、数据右对齐、金额保留相同小数对齐的方式。数据前面有标签的,将标签前置对齐。类似 IP 地址、域名这样的信息,也可以根据产品需要在文本前面增加「复制」图标,方便用户调用。

6. 详情入口

表格内部数据的详情入口,将能点击下钻查看详情的内容以蓝色表示,同时在表格行最后一列操作按钮部分放置一个查看按钮。

 

本文作者@艾斯的Axure峡谷

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部