Figma入门-实战列表页

Figma入门-实战列表页

前言

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

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

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

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

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

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

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

列表

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

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

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

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

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

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

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

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

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

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

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

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

将表格标题栏复制一份

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

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

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

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

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

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

相关推荐
电商数据girl38 分钟前
产品经理对于电商接口的梳理||电商接口文档梳理与接入
大数据·数据库·python·自动化·产品经理
_iop991 天前
反向验证产品逻辑
产品经理
小马哥编程1 天前
【产品经理从0到1】用户研究和需求分析
产品经理·需求分析
梓贤Vigo2 天前
【Axure视频教程】不透明度函数
交互·产品经理·axure·原型·教程
东边有耳2 天前
银行外汇业务(一)
架构·产品·设计
PMEcho2 天前
墨刀上线高级交互功能,能否超越Axure?
产品经理·axure·交互设计·墨刀·原型设计·高级交互
小兵张健3 天前
互联网必备职场知识(4)—— 共情沟通能力
后端·产品经理·运营
风流 少年3 天前
产品经理学习过程
学习·产品经理
玩转数据库管理工具FOR DBLENS3 天前
项目预期管理:超越甘特图,实现客户价值交付
数据库·职场和发展·项目管理·产品经理·数据库开发·甘特图
易安说AI4 天前
我用jetbrains的AI assistant一键生成了十几款完整APP原型图
产品·设计