B端产品之设计规范:布局

在 C 端规划中,不论是给车载客户端、手机客户端、电脑客户端规划界面,都有比较详细的规范需求咱们学习和恪守。

而唯独 B 端规划,或者说网页规划,咱们在网上是找不到详细详细的规范材料的。由于不论是蚂蚁的 AntDesign 仍是 Element、Clarity 等 B 端规划体系,其规范都只是针对自己这套产品的规划阐明。

当咱们不运用这些结构,要完结自界说规划,那么新人就彻底不知道该怎么下手。所以,今天这篇内容,便是针对 B 端规划所需具有了解的根本规范进行阐明。

帮助咱们快速了解和把握 B 端规划所需的规范常识。

B端规范知道导语

B 端规划是 UI 类规划中的一个大类,它包括了十分多种面向企业、商业的客户端类型,包括电脑、手机、平板、大屏等等,针对不同客户端和体系,基础规范都有必定的差异。本文首要会集在 WEB 端的办理界面规划。

WEB 办理界面尽管看起来和一般的网页差别很大,但说到底,它也是网页的一种,它遵循网页规划的根本准则。咱们对规范的解释以网页基础规范为结构打开,并会加入一部分 B 端特有的规划元素规范阐明。

首要包括的规范内容包括下面这些模块:

  • 布局规范
  • 色彩规范
  • 字体规范
  • 图标规范
  • 控件规范
  • 表单规范
  • 表格规范
  • 动效规范

规范的解释,会涉及到不少网页前端制作的常识点,主张立志在 B 端进行深耕的规划师,都要把握 HTML + CSS 这些前端常识。

咱们过去做过这个系列的详解,能够经过下方的链接检查:

还要声明一点,规范中总结的内容,包括 “规矩” 和 “主张” 两种类型,规矩指的是浏览器、代码等约束产生的硬性规范,而主张则是我依据自己经验整理出来便于咱们了解的内容。

在自己的项目中,如果出现 “主张” 无法习惯的状况,那么彻底能够依据实际场景来做决议计划,不需求拘泥于我给出的数值和约束。

下面,就开端进入正题吧!

B端布局规范

首要,咱们来解析一下 B 端布局的规范,即界面排版应该恪守的根本准则。

在前端 HTML CSS 的常识中,需求界说不同 DIV(或其它标签)的长宽数值,并将这些大小不一的矩形进行摆放、移动、嵌套,来完结界面的视觉款式。

超详细!总监出品的B端规划规范攻略(一):布局

超详细!总监出品的B端规划规范攻略(一):布局

换句话说,所有置入画面中的元素都包括一个矩形的外边框,不论是文字、图标、图片、按钮、标签仍是符号。

超详细!总监出品的B端规划规范攻略(一):布局

所以,在界面的布局中,不论咱们运用什么样的内容、字段,对于前端的页面来讲都只是很多矩形的摆放过程。我称这种布局的规划思路为 “矩阵布局法”。

矩阵布局法是规划方式和前端开发方式的一致,提升开发阶段完结规划稿的效率和准确性,是每一个专业 B 端规划师都需求具有的素养。

在此基础上,咱们还有几个一致的准则需求恪守:

  • 数值的运用规范
  • 固定和呼应尺度
  • 常用的界面布局

1. 数值运用规范

在 UI 领域中,元素尺度的界说不像平面规划大多以比例或“感觉”来拟定,更多是运用手动输入数值的方法来完结。

干流的体系、规范都会主张咱们经过网格化参考东西来辅佐咱们进行布局规划,比方 Android MD 体系运用的 8*8 网格体系(常用电脑分辨率能够完美支撑)。

超详细!总监出品的B端规划规范攻略(一):布局

也便是说,在这个体系中,元素的外边框、距离,都是以 8 的倍数来设置的。这样不论咱们在规划仍是在开发过程中,对于运用的数值都会有相应的默契。

但是,以 8 的倍数为基准的规划,跨越的幅度有点太大了,比方一个图标,当你觉得 16px 小的时分,那下一档 24px 页或许太大了。所以,我的主张是对于相对比较复杂的项目来说,运用小一级的 4*4 网格来规划,会更兼顾灵敏度和数值的一致性。

即设置元素的尺度、距离的时分,咱们都用 4 的倍数来完结,当你觉得元素的长或宽不合适,就对它进行 4px 的增减,比方下面的事例:

超详细!总监出品的B端规划规范攻略(一):布局

要警惕的是,4px 的基准,是针对元素视图边框的值,文字字号、图标栅格等次级内容,并不会受到该准则的影响。且该准则只是一个规划基准的 “主张”,而不是约束,在特别场景中能够挑选打破它。

2. 固定和呼应尺度

运用 4 的倍数完结规划,并不能解决 B 端规划中的所有尺度问题。由于在 B 端的实际运用中,咱们会加入呼应式的逻辑,即页面元素尺度随浏览器窗口的变动而变动。

所以,在规划 B 端界面元素的时分,咱们要考虑两种场景,固定尺度和呼应尺度。

固定尺度即不论环境产生什么变化,它的大小是定死的。比方图标、标题、LOGO 等元素。而呼应尺度,则是一个 “未知数”,是需求必定的核算规矩 “求得” 的。

比方仍是查找栏的事例,查找框呼应尺度,而查找按钮是固定尺度,那么在不同的宽度下面,它们显示的效果如下:

超详细!总监出品的B端规划规范攻略(一):布局

要了解呼应式尺度对应规矩,除了了解 CSS 中 Width:auto 属性值的运用外,最简单的便是搞清楚 UI 规划软件中的呼应式布局功能。

超详细!总监出品的B端规划规范攻略(一):布局

元素是呼应仍是固定尺度是咱们在规划过程中就做后决定的,而不是等规划做完今后再看图说话。所以了解固定和呼应尺度的内容,在咱们界说组件的过程中就要经过软件的呼应式功能进行设置,并需求在后期的标注和文档中进行阐明。

3. 常用的界面布局

最终,便是 B 端界面规划运用的干流布局方式了。尽管网页由于画布比手机大得多,规划的灵敏性更高,但在 B 端中能够运用的布局方式也不多,只要固定的几种。由于 B 端页面布局中有几个常用需求预留的坑位:导航、标题栏、东西栏、内容区域。

首要运用左右或上下布局两个方向:

超详细!总监出品的B端规划规范攻略(一):布局

左右布局的方式,通常是左侧作为导航区域,顶部作为东西栏运用。这种做法通常是由于体系内模块较多,需求的导航数也多,用户需求常常切换到不同模块中去,所以左右分栏的布局能够很好的提升操作效率。

而上下布局中,则是面向一些处理场景、功能比较简单的平台,导航模块少,且切换的频率不高,首要的操作都会集在内容区域的设置上,没有边栏的影响还能提高操作的专注性和效率。

要运用哪种类型的布局,需求依据当时的项目功能做决定。但即使挑选了其间一类,也并不代表咱们的作业就完毕了,还需求在这个布局的结构下做进一步的规划。

比方,咱们需求拟定内容区域多栏规划的比例区分、复杂表单填写体系中的内容引导栏、列表条目打开的侧边栏方式等等……

超详细!总监出品的B端规划规范攻略(一):布局

每套项目都需求先确认页面的布局结构,然后再开端针对详细页面、业务内容进行规划,保证整套体系操作方式的一致性。

1

发表评论

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

B端产品之设计规范:布局
嘿!有什么能帮到您的吗?
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close