拖动浏览,滚动或双指缩放。打开帮助查看键盘操作。

Yan
开放
合作
聊聊吧
Yan Fontão Boring view
All work

Case 021移动应用设计

Ageu

一款深色的移动应用,用来获取建筑材料的报价:列出需要的材料,发出一份订单,再对比收到的报价。设计围绕一份报价列表展开,把价格、涵盖范围和送货时间放在同一个地方。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 和 Dribbble 存档
Ageu 样机,为这面项目墙用项目的真实页面合成。
为这面项目墙用项目真实页面合成的样机。

01

我的贡献

Ageu 是一款葡萄牙语应用,用来请求建筑材料的报价。你创建一份订单,里面有水泥、沙子和电线这样的物品,建材店会用报价来回应。

我参与的范围很小:一个下单流程、一份订单列表和一个报价对比,采用深色的 Material 风格主题,以淡紫色为强调色。

一号订单,Respostas 选项卡已打开,有三张报价卡片,每张都显示绿色的分期价格、现金价格、涵盖物品、运费、送货天数和一个 Comprar 链接。
订单页面,向 Thomas 问好,有筛选选项卡、三张订单卡片(显示各自收到的报价数量和状态),以及一个 Novo pedido 按钮。
逐页浏览设计中的页面,不是录屏:从空的订单列表到一份订单及其报价。 报价:价格、涵盖物品、运费和送货时间集中在一张卡片上。 订单:报价数量和状态一目了然,可按阶段筛选。

02

对比收回来的报价

报价列表是其余流程最终通向的地方。每张卡片的顺序都一样:绿色的分期价格,下面是现金价格,然后是两个标签,分别显示涵盖的物品,以及运费和送货时间,右边是 Comprar。

这种重复让取舍一目了然,不必打开任何东西。在示例数据里,最低的价格涵盖 23 项中的 20 项,而另一份报价涵盖全部 23 项,运费免费,要等 28 天。

没有订单的订单页面,有一幅深色的清单小插图、一句葡萄牙语的简短提示和一个 Novo pedido 按钮。
空状态:订单将出现的位置,以及唯一可用的操作。

03

可以跟踪进度的订单

订单列表显示每份订单有多少份报价、进行到哪一步,每个阶段都有对应的选项卡:Todos、Aguardando respostas、Respondidos 和 Concluídos。还没有订单时,空状态会说明订单将出现在哪里,并把 Novo pedido 留作唯一的操作。

新建订单是一条三步的流程,Voltar、进度点和 Próximo 排在同一条栏里。在物品这一步,每一行都让数量和单位保持可见,旁边是编辑和删除。

黑色背景上的两个深色页面:新订单的物品步骤,列出带数量的材料;以及一号订单的报价列表。
来自 Dribbble 的展示图:物品步骤和报价列表并排。
000

使用说明

Yan Fontão
轻点
打开一个屏幕
点击
打开一个屏幕
拖动
浏览项目墙
滚轮
鼠标缩放,触控板移动,双指缩放
− +
拉远查看整面项目墙,或拉近
方向键
在案例中:↑↓ 切换案例,←→ 切换媒体。在项目墙上:移动
空格
打开或返回
Enter
打开
Esc Backspace
返回
Home
回到中心,再回到开场
PgUp PgDn
上一个或下一个频道
Tab
依次浏览项目和链接
R
随机项目
0–9
输入频道号,1–61
?
本页
快捷键

项目墙背景音乐

文件已为网页压缩并统一音量。

开放
合作
聊聊吧

给 Yan 发消息

告诉我你是谁,我会尽快回复。

000

关于 Yan

你好,我是 Yan

产品设计师/ 设计工程师

大多数产品都会在设计和代码之间丢掉一些东西。我的不会:我研究问题、设计产品,并亲手把界面上线,所以你批准的,正是用户最终拿到的。

  • 2018开始软件开发
  • UI + code设计与实现

合作过 Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

巴西 · 可远程、混合或驻场

Yan Fontão 的坐姿肖像:穿绿色毛衣、戴眼镜,手持麦克风。
开放
合作
聊聊吧
开放
合作
聊聊吧
000

加密频道

受保密协议约束

请输入访问码

向 Yan 索取访问码 ↗
开放
合作
聊聊吧
YAN FONTÃO 完整案例

频道 21 移动应用设计

Ageu

一款深色的移动应用,用来获取建筑材料的报价:列出需要的材料,发出一份订单,再对比收到的报价。设计围绕一份报价列表展开,把价格、涵盖范围和送货时间放在同一个地方。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 和 Dribbble 存档

在 Dribbble 上查看

Ageu 样机,为这面项目墙用项目的真实页面合成。
为这面项目墙用项目真实页面合成的样机。

一份建材订单,所有报价并排放在一起

来自原始 Figma 设计文件和 Dribbble 的页面,使用示例数据。

我的贡献

Ageu 是一款葡萄牙语应用,用来请求建筑材料的报价。你创建一份订单,里面有水泥、沙子和电线这样的物品,建材店会用报价来回应。

我参与的范围很小:一个下单流程、一份订单列表和一个报价对比,采用深色的 Material 风格主题,以淡紫色为强调色。

逐页浏览设计中的页面,不是录屏:从空的订单列表到一份订单及其报价。
一号订单,Respostas 选项卡已打开,有三张报价卡片,每张都显示绿色的分期价格、现金价格、涵盖物品、运费、送货天数和一个 Comprar 链接。
报价:价格、涵盖物品、运费和送货时间集中在一张卡片上。

对比收回来的报价

报价列表是其余流程最终通向的地方。每张卡片的顺序都一样:绿色的分期价格,下面是现金价格,然后是两个标签,分别显示涵盖的物品,以及运费和送货时间,右边是 Comprar。

这种重复让取舍一目了然,不必打开任何东西。在示例数据里,最低的价格涵盖 23 项中的 20 项,而另一份报价涵盖全部 23 项,运费免费,要等 28 天。

订单页面,向 Thomas 问好,有筛选选项卡、三张订单卡片(显示各自收到的报价数量和状态),以及一个 Novo pedido 按钮。
订单:报价数量和状态一目了然,可按阶段筛选。
没有订单的订单页面,有一幅深色的清单小插图、一句葡萄牙语的简短提示和一个 Novo pedido 按钮。
空状态:订单将出现的位置,以及唯一可用的操作。

可以跟踪进度的订单

订单列表显示每份订单有多少份报价、进行到哪一步,每个阶段都有对应的选项卡:Todos、Aguardando respostas、Respondidos 和 Concluídos。还没有订单时,空状态会说明订单将出现在哪里,并把 Novo pedido 留作唯一的操作。

新建订单是一条三步的流程,Voltar、进度点和 Próximo 排在同一条栏里。在物品这一步,每一行都让数量和单位保持可见,旁边是编辑和删除。

黑色背景上的两个深色页面:新订单的物品步骤,列出带数量的材料;以及一号订单的报价列表。
来自 Dribbble 的展示图:物品步骤和报价列表并排。