Figma入门-实战列表页

Figma入门-实战列表页

前言

在之前的工作中,大家的原型图都是使用 Axure 制作的,印象中 Figma 一直是个专业设计软件。

最近,很多产品朋友告诉我,很多原型图都开始用Figma制作了,并且很多组件都是内置的,对各种原型图的制作极其友好,只需熟悉一下基本的操作即可上手。

所以我打算一探究竟,听说的终究是听说,自己上上手才是真的。

所以接下来的文章我打算记录从0开始上手 Figma 的过程。

本系列直接从实操开始,有所错漏或者操作错误,还请大家指正。

如果有更高效的使用方式,也欢迎交流。

本篇我们来进行实操,实现一个Web端的经典列表页面。

列表

web端列表页种,通常包括以下内容:

  1. 标题:用于展示列表的主题或名称。
  2. 搜索框:允许用户输入关键词以过滤列表内容。
  3. 列表项:展示具体的内容,每个列表项可以包含图片、标题、描述等信息。
  4. 分页:用于在多个页面之间导航。

常规的列表页布局有左右结构和上下结构:

  1. 左右结构:侧边栏 + 主内容区、双侧边栏 + 中间内容区、卡片式布局 + 侧边栏等。
  2. 上下结构:顶部导航 + 列表内容、头部 + 内容 + 尾部、顶部固定工具栏 + 滚动内容等。

这里我们采用侧边栏 + 主内容区的布局方式结合工程项目中质量巡检功能为例来学习。

先绘制一个画框(Frame),将其宽高设置为常规1080P显示器的宽高1920*1080像素。

然后绘制基本的布局框架,这里主要是侧边栏和内容区,侧边栏宽度为260px,其距右侧内容区的外边距为20px,剩余的宽度全部留给内容区。

开始绘制侧边栏的标题和搜索框,这部分用到的知识点包括文本、矩形、圆角等,都是之前章节学习过的此处就不一一赘述,然后随便去资源库搜索个放大镜图标来用。

同上,找一个三角图标,绘制树形图。

这一步我们开始绘制内容区的筛选栏,包括筛选条件、下拉框和查询按钮。

这里提一下,所有内外边距都是通过自动布局实现的,如果你对自动布局还不太了解,请查阅往期自动布局相关章节。

下一步绘制内容列表,这里采用表格展现形式,先画标题栏,标题栏画框开启自动布局,文本内容除序号和图片外都是自动宽度。

将表格标题栏复制一份

把其中的图片文本改为80*80像素示例图片(注意图片在自动布局中宽度会改变导致与标题栏对不齐,所以这里加了一个画框包裹)

然后将操作的文本改为详情和编辑,这里偷个懒没有再给操作添加图标。

再多复制几份,使其看起来更像那么回事。

最后就是绘制分页器,将筛选栏下拉框中的箭头复制出来,左右各摆放一个,中间添加页码按钮,右侧添加每页显示条数下拉框和数据总条数。

列表页的初步绘制到这里就基本结束,剩余的就是颜色、内外间距和字体大小等微调,看一下整体效果。

-- 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

相关推荐
VSORender_Farm7 小时前
3ds Max:建筑效果图制作的核心利器与全流程解析
3d·渲染·云渲染·设计·建筑·效果图
BUG收容所所长15 小时前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
BUG收容所所长15 小时前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
梓贤Vigo18 小时前
【Axure高保真原型】轮播条形图
交互·产品经理·axure·原型·中继器
专注VB编程开发20年19 小时前
类似 Pixso 但更侧重「网页 / 软件界面设计」「前后端可视化开发」的工具
figma·pixso·ui设计·webflow·adobe xd
三桥君2 天前
AI驱动的智能设备健康评估系统究竟如何应对企业运维挑战?
人工智能·llm·产品经理
广东数字化转型2 天前
2,智能制造,MOM,MES - 柔性制造(具体内容参考PPT文档)
系统架构·产品经理
万少3 天前
入了台程序员专业显示器,同事们都来围观了
产品经理
十三浪4 天前
产品经理如何进行《用户体验》迭代
产品经理·ux
TaoSense4 天前
产品全生命周期管理(PLM)深度分析与实践指南
产品经理