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

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

Case 022移动应用设计

AglomeraNão

一套葡萄牙语的移动应用界面,用来预约避开人群的购物行程,包含马瑙斯的热力图、按拥挤程度标注的商店,以及一个预约时间。

我的职责
界面设计
项目状态
移动应用 · Figma 存档
AglomeraNão 样机,为这面项目墙用项目的真实页面合成。
为这面项目墙用项目真实页面合成的样机。

01

我的贡献

首页直接问了一个问题:你想过没有,买东西既不用挤在人群里,也不用冒感染新冠的风险?AglomeraNão 给出三个选项 Check-in、Agenda 和 Mapa,以及三类场所:市场、药店和宠物店。

热力图页面,顶部是 Aglomeranão! 页头,搜索框位于马瑙斯地图上方,地图上的 Novo Aleixo 和 Petrópolis 等街区叠着大小不一的紫罗兰色、橙色和蓝色圆圈,右下角有一个圆形的图表按钮。
商店页面,门面照片上标有 fluxo tranquilo、距离、时间和评分,另有一张街道地图,以及一条底栏,里面是时间 14:15 和一个紫罗兰色的 Agendar! 按钮。
录自 Figma 原型。check-out 倒计时、马瑙斯的拥挤度地图和统计面板。 热力图,圆圈叠在马瑙斯的各个街区上。 商店页面,以一个时间和 Agendar! 按钮收尾。

02

一眼看懂的拥挤程度

热力图把大小和颜色各不相同的圆圈铺在马瑙斯的各个街区上,上方是一个搜索框。商店页面把同样的想法用在照片上的一个小标签里,比如 fluxo tranquilo,旁边是距离、时间和评分。商店名称是示例内容。

首页,在一张食品杂货的照片上向访客问好,配有一小段关于避开人群购物的文字,然后是 Check-in、Agenda 和 Mapa 选项,以及 Mercados、Farmácias 和 Petshops 卡片。
首页,有各个选项和三类场所。

03

以一个时间收尾的商店页面

商店页面重复了这个标签和那三个数字,再加上一张街道地图,并以底部的一条栏收尾:时间 14:15,旁边是 Agendar! 按钮。上面的一切都通向这一个操作。

字标变体图:单独的 não!,以及 Aglomera 与 não! 上下叠放和排成一行的版本,分黑、白、紫罗兰三色,放在白底和黑底上。
字标变体,分量压在 não! 上。

04

分量全压在“不”上

字标把 Aglomera 设成细窄字体,把 não! 设成粗体,都用紫罗兰色,让名字把意思大声喊出来。同一种紫罗兰色也用在各个页面的图标和主按钮上。

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

频道 22 移动应用设计

AglomeraNão

一套葡萄牙语的移动应用界面,用来预约避开人群的购物行程,包含马瑙斯的热力图、按拥挤程度标注的商店,以及一个预约时间。

我的职责
界面设计
项目状态
移动应用 · Figma 存档
AglomeraNão 样机,为这面项目墙用项目的真实页面合成。
为这面项目墙用项目真实页面合成的样机。

出发前,先看那里有多拥挤

来自原始 Figma 文件的页面。商店名称和数字是示例内容。

我的贡献

首页直接问了一个问题:你想过没有,买东西既不用挤在人群里,也不用冒感染新冠的风险?AglomeraNão 给出三个选项 Check-in、Agenda 和 Mapa,以及三类场所:市场、药店和宠物店。

录自 Figma 原型。check-out 倒计时、马瑙斯的拥挤度地图和统计面板。
热力图页面,顶部是 Aglomeranão! 页头,搜索框位于马瑙斯地图上方,地图上的 Novo Aleixo 和 Petrópolis 等街区叠着大小不一的紫罗兰色、橙色和蓝色圆圈,右下角有一个圆形的图表按钮。
热力图,圆圈叠在马瑙斯的各个街区上。

一眼看懂的拥挤程度

热力图把大小和颜色各不相同的圆圈铺在马瑙斯的各个街区上,上方是一个搜索框。商店页面把同样的想法用在照片上的一个小标签里,比如 fluxo tranquilo,旁边是距离、时间和评分。商店名称是示例内容。

商店页面,门面照片上标有 fluxo tranquilo、距离、时间和评分,另有一张街道地图,以及一条底栏,里面是时间 14:15 和一个紫罗兰色的 Agendar! 按钮。
商店页面,以一个时间和 Agendar! 按钮收尾。

以一个时间收尾的商店页面

商店页面重复了这个标签和那三个数字,再加上一张街道地图,并以底部的一条栏收尾:时间 14:15,旁边是 Agendar! 按钮。上面的一切都通向这一个操作。

首页,在一张食品杂货的照片上向访客问好,配有一小段关于避开人群购物的文字,然后是 Check-in、Agenda 和 Mapa 选项,以及 Mercados、Farmácias 和 Petshops 卡片。
首页,有各个选项和三类场所。

分量全压在“不”上

字标把 Aglomera 设成细窄字体,把 não! 设成粗体,都用紫罗兰色,让名字把意思大声喊出来。同一种紫罗兰色也用在各个页面的图标和主按钮上。

字标变体图:单独的 não!,以及 Aglomera 与 não! 上下叠放和排成一行的版本,分黑、白、紫罗兰三色,放在白底和黑底上。
字标变体,分量压在 não! 上。