Alice

@元尧:当下很多常见的、优秀的组件库,都为设计和开发的工作提供了便利。那么使用组件库可以替代设计师么?组件和设计师之间的关系又是什么呢?本文源于读者和粉丝的相关提问,以及我前段时间在做 Ant Design 设计与运营工作中的经验沉淀和总结,希望对你有帮助。

相关阅读《B 端产品组件设计细节及经验分享(一)

相关阅读《B 端产品组件设计细节及经验分享(二)

 

1、Tab 和锚点 Tab 有什么区别? 

有同学想知道 Tab 和锚点 Tab 在使用的过程中有什么样的区别,这里给大家详细说说:

图片

 

1. 功能上的区别

普通 Tab   

  • 当页面信息较多,Tab 可以使用户的浏览和查找更高效
  • Tab 可以用于区分信息类型,将大块内容进行收纳,使页面更加整洁。

锚点 Tab   

  • 锚点 Tab 用于承载较多信息的页面中,用户需要顺畅、沉浸浏览所有信息且浏览过程中能感知阅读内容的结构和顺序
  • 用户可以使用它来快速定位和跳转

 

2. 呈现形式上的区别

普通 Tab   

  • 通常情况下会一直存在,不会因为页面的宽度尺寸发生变化而消失;
  • 其呈现内容的层级和颗粒度根据 Tab 来确定。比如:页面级的 Tab 只能定位到页面层级的内容,表单 Tab 只能定位到表单层级的内容,下方给出两个案例:

图片

  • 可以有多种层级,作出嵌套关系,且设计样式和结构更加多样化,如下图所示:

图片

 

锚点 Tab   

  • 锚点 Tab 在页面宽度尺寸缩小到一定值时,可能会根据情况被隐藏,见下图:

图片

  • 理论上,锚点 Tab 可以锚定在页面范围的任何元素上,点击后直接定位到该元素,见下图:

图片

  • 通常锚点 Tab 只有一个层级,且样式和结构比较单一。

 

以上就是二者的区别,大家可以根据需求自行使用。

 

2、栅格布局该如何使用? 

栅格布局,是一种响应式布局方式,应用此方式设计开发的页面可适应不同的屏幕尺寸和方向,确保内容呈现的可读性。

AntD 采用的就是 24 栅格体系,对页面的内容区域进行 24 栅格的划分设置,如下图所示:

图片

响应式栅格布局由列(column)、间距(gutter)和边距(margin)这三个基本元素构成:

  • 列(column):列的宽度被称为列宽,使用百分比来定义,不是固定值,以便可以灵活地适应任何屏幕大小。网格中显示的列的数量由屏幕的一些断点确定,达到断点时,列数就会发生变化。
  • 间距(gutter):也被称为槽,间距可以被设定为定值,在每个断点范围内的个数是固定的,达到断点时,间距数量就会发生变化。
  • 边距(margin):指内容和屏幕左右边缘之间的空间。边距宽度在每个断点范围内的值是固定的,达到断点时,宽度就可以发生变化。边距的宽度通常是间距的倍数。

AntD 为页面中的间距(gutter)设定了定值,当 PC 端浏览器或屏幕尺寸在一定的范围内发生变化时,列(column)的宽度会随之扩大或缩小,数量也会发生变化;间距(gutter)的宽度值固定不变,以此实现卡片的宽度变化。

图片

在左右布局的设计方案中,常见的做法是将左边的导航栏固定(设为定制),对右边的工作区域进行动态缩放:

图片

当没有左侧导航栏时,通常的布局做法是对两边的边距(margin)定义最小值,当界面的宽度缩小,边距(margin)达到最小值之后,再对中间的主内容区域进行动态缩放:

图片

在应用栅格布局时要注意以下几点:

  • 尽量保持偶数思维:所有的数值尽量使用偶数。
  • 内容边缘不能出现在间距(gutter)上:内容的范围要从列(column)开始到列(column)结束,即在列宽内,内容边缘不能出现在间距上。但有时如果我们把内容都按照列宽排布,视觉效果可能会不太好,最佳的处理方式是将整个元素放在一个不可见的,更大的容器内,再将容器排布在列上。见下图:

图片

  • 只要父级元素对齐栅格,子级元素不必完全对齐:有时设计内容一半是图片,一半是文字,图片和文字没有完全落在一列上,其实也是没有问题的,因为只要父级容器对齐列宽即可,见下图:

图片

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网 » 工作经验| B 端产品组件设计细节及经验分享(三)

登录收藏
 
你可能喜欢的:
数据之美:地理空间数据可视化II数据之美:地理空间数据可视化II
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
设计的「七宗罪」设计的「七宗罪」
最近访谈了海外用户,总结几点意外收获最近访谈了海外用户,总结几点意外收获
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
如何高效地进行网页设计?重点关注这些要素如何高效地进行网页设计?重点关注这些要素
作品集别用这几个设计目标了,太老套作品集别用这几个设计目标了,太老套
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
项目总结|红包设计测试,驱动裂变数翻三倍项目总结|红包设计测试,驱动裂变数翻三倍
设计师如何高效沟通需求设计师如何高效沟通需求