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

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

Case 016移动应用设计

Univesell

一款面向活动的双边市场应用。筹办活动的人在一处跟踪任务、预算和宾客,服务商则在自己的一侧查看收入。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
原始设计文件中的 Univesell 演示封面。
演示封面,来自原始文件。

01

我的贡献

Univesell 是一款面向活动的双边市场应用:一边是筹办活动的人,另一边是服务商。筹办者可以浏览公司、专业人士和机构,并在同一个应用里管理每一场活动。

文件把两端都画成了用户流程,与我设计的页面放在一起。这个案例沿着活动工具往下看,最后落在服务商的收入上。

示例婚礼的活动页面,有深色页头、预算环形图、宾客人数、剩余天数和任务清单。
活动管理页面,列出一场婚礼和一个生日,每张卡片带任务和预算的进度条,顶部有一个 New 按钮。
设计稿页面的串联演示,并非录屏:管理一场活动,从活动详情到邀请,再到服务商的收入。 活动详情:预算、宾客、剩余天数和任务,同在一次滚动里。示例数据。 活动列表:每张卡片上用两条进度条显示任务和预算。

02

一个活动,一个页面

活动详情把围绕一场活动的问题收进同一次滚动:预算用了多少,宾客名单进展如何,还剩几天,哪些任务还没完成。深色页头写着活动名称,下面每个区块回答一个问题。

活动列表把同样的思路用在上一层。每张卡片用两条进度条显示任务和预算,所以在点开某个活动之前,就能看出各个活动之间的对比。

收入页面,上方是进行中和过往金额的环形图,下方是订单和提现的历史记录。
邀请设置表单,有标题、消息、到期日期和时间、提醒和已上传文件的输入项,下方是 Save settings 和 Cancel。
服务商一侧:收入,沿用同样的图表和历史列表模式。示例数据。 邀请:消息、到期时间、提醒和一个附件。

03

市场的另一边

在服务商一侧,收入页面沿用同样的结构:上方是环形图,下方是历史列表,这次把进行中和过往的金额分开,列表里有订单和提现。共用同一种模式,让两侧看上去就是同一个产品。

一张宽幅图,由相连的绿色和淡紫色方框组成,呈现用户流程中的各个页面,从首次访问经过市场、订单和钱包,到活动工具。
筹办一侧的用户流程,按当时的状态用颜色区分。

04

整个产品,一张图

筹办一侧的用户流程,从首次访问和注册出发,经过市场、购物车、订单和钱包,一路到活动工具。它的颜色标出了哪些页面已经完成、哪些在当时还没开始,所以这张图同时也兼作工作进度看板。

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 完整案例

频道 16 移动应用设计

Univesell

一款面向活动的双边市场应用。筹办活动的人在一处跟踪任务、预算和宾客,服务商则在自己的一侧查看收入。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
原始设计文件中的 Univesell 演示封面。
演示封面,来自原始文件。

活动、预算和宾客,同在一个页面

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

我的贡献

Univesell 是一款面向活动的双边市场应用:一边是筹办活动的人,另一边是服务商。筹办者可以浏览公司、专业人士和机构,并在同一个应用里管理每一场活动。

文件把两端都画成了用户流程,与我设计的页面放在一起。这个案例沿着活动工具往下看,最后落在服务商的收入上。

设计稿页面的串联演示,并非录屏:管理一场活动,从活动详情到邀请,再到服务商的收入。
示例婚礼的活动页面,有深色页头、预算环形图、宾客人数、剩余天数和任务清单。
活动详情:预算、宾客、剩余天数和任务,同在一次滚动里。示例数据。

一个活动,一个页面

活动详情把围绕一场活动的问题收进同一次滚动:预算用了多少,宾客名单进展如何,还剩几天,哪些任务还没完成。深色页头写着活动名称,下面每个区块回答一个问题。

活动列表把同样的思路用在上一层。每张卡片用两条进度条显示任务和预算,所以在点开某个活动之前,就能看出各个活动之间的对比。

活动管理页面,列出一场婚礼和一个生日,每张卡片带任务和预算的进度条,顶部有一个 New 按钮。
活动列表:每张卡片上用两条进度条显示任务和预算。

市场的另一边

在服务商一侧,收入页面沿用同样的结构:上方是环形图,下方是历史列表,这次把进行中和过往的金额分开,列表里有订单和提现。共用同一种模式,让两侧看上去就是同一个产品。

收入页面,上方是进行中和过往金额的环形图,下方是订单和提现的历史记录。
服务商一侧:收入,沿用同样的图表和历史列表模式。示例数据。
邀请设置表单,有标题、消息、到期日期和时间、提醒和已上传文件的输入项,下方是 Save settings 和 Cancel。
邀请:消息、到期时间、提醒和一个附件。

整个产品,一张图

筹办一侧的用户流程,从首次访问和注册出发,经过市场、购物车、订单和钱包,一路到活动工具。它的颜色标出了哪些页面已经完成、哪些在当时还没开始,所以这张图同时也兼作工作进度看板。

一张宽幅图,由相连的绿色和淡紫色方框组成,呈现用户流程中的各个页面,从首次访问经过市场、订单和钱包,到活动工具。
筹办一侧的用户流程,按当时的状态用颜色区分。