网站建设后台(Axure实战规范分享)

编辑导读:后台web网站是互联网人工作中经常会用到的,本文作者分享如何用Axure做后台web网站,一起来看一下吧。以下规范数值仅为参考,具体请根据自身产品灵活运用。一、框架尺寸设计目前 PC 端用户屏幕分辨率主要为:1920*1080、1600*900、1440*900、1366*768、1280*720等。那么我们的原型设计稿应该参考哪个尺寸设计呢?这需要我们根据具体情况分析:如果我们设计的原型主要是发给客户和领导看,那么按用户和领导的电脑分辨率设计即可。如果我们设计的原型主要是自己查看,或者用自己的电脑演示给客户和领导看,那么按自己的电脑分辨率设计。上面提到都是按照固定的尺寸设计原型,还有一种方法是使用Windows.width和Windows.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峡谷 原创发布于人人都是产品经理。未经许可,禁止转载题图来自Unsplash,基于CC0协议

本文出自快速备案,转载时请注明出处及相应链接。

本文永久链接: https://www.175ku.com/33365.html