跳到正文
TV view聊聊吧
中文
全部作品

移动应用设计

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 的展示图:物品步骤和报价列表并排。