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

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

Case 014移动应用设计

Grand Plaza

Grand Plaza 购物中心的移动应用,把活动、服务、有奖活动和优惠集中在一处。屏幕上的金额和代码均为示例内容。

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

01

我的贡献

Grand Plaza 是一款购物中心应用,界面为葡萄牙语。底部标签栏把应用分成 Início、Prêmios、Ofertas、Lojas 和 Perfil 五个板块,Ofertas 凸起在正中,是唯一打破水平排列的 Tab。

Figma 存档把设计过程和页面放在一起:从 v0 到 v4 的线框图、思维导图、站点地图,以及附带内容地图的用户流程。这里我把设计好的页面,和理清它们结构的那张地图并排展示。

设计稿页面的串联演示,并非录屏:新手引导、首页和奖品页。

02

一次一个活动

首页把大半个屏幕留给一场活动:一张带照片的大卡片,上面有活动名称、日期和一个 Saiba mais 按钮,轮播指示器提示后面还有更多活动。卡片下方是三个服务快捷入口:购物中心地图、停车和影院,另有 Ver todos 链接通向其余服务。

深色背景上并排的四个应用页面:首页、Prêmios 有奖活动页、服务宫格页和一个活动页。
首页、Prêmios、服务和一个活动页,这个版本的标签栏里有 Serviços。

03

有奖活动写明还差多少

Prêmios Tab 靠小票运转。有奖活动卡片用三行短句写明:已登记多少,距离赠品还差多少,距离幸运号码还差多少。Cadastrar nota fiscal 是醒目的按钮,Saiba mais 是低调的按钮,无需任何解释,下一步就很明确。

首页,有 Grand Plaza Logo、带 Saiba mais 按钮的 Noites Culturais 活动大幅照片卡片、三个服务快捷入口,以及中间 Ofertas 按钮凸起的底部标签栏。
Prêmios 页面,有 Eu Faço 活动横幅、已登记的金额、距赠品和幸运号码各还差多少,以及一个 Cadastrar nota fiscal 按钮。
新手引导页面,有黑、粉、黄三色的插画(画着应用窗口、一把钥匙和一枚火箭)、一条欢迎语,以及 Próximo 和 Pular 两个按钮。
首页先放一场活动,再放主要服务。 Prêmios 页面显示离每项奖励还差多少。 新手引导分三步介绍这款应用。

04

先梳理那一长串服务

购物中心的服务多到标签栏装不下,所以 Serviços do shopping 把 14 项服务收进同一个宫格,从购物中心地图和停车,到共享办公、自行车停车架和电动汽车充电。每个优惠最终都落在自己的页面上,有折扣、优惠码、二维码和有效期,到店出示即可。

用户流程和内容地图把这套结构画成一棵页面树,从首页向外分支。文件里还保留了两个版本的原型,一个用扁平图标,一个用 3D 图标。

一张标题为 Fluxo do usuário e content map 的图,一棵页面树从首页向外分叉,分布在带编号的各行中。
页面背后的用户流程和内容地图。
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 完整案例

频道 14 移动应用设计

Grand Plaza

Grand Plaza 购物中心的移动应用,把活动、服务、有奖活动和优惠集中在一处。屏幕上的金额和代码均为示例内容。

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

在 Dribbble 上查看

为这面项目墙合成的 Grand Plaza 样机,画面取自项目的真实页面。
为这面项目墙用项目真实页面合成的样机。

商场里的一切,只隔一个 Tab

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

我的贡献

Grand Plaza 是一款购物中心应用,界面为葡萄牙语。底部标签栏把应用分成 Início、Prêmios、Ofertas、Lojas 和 Perfil 五个板块,Ofertas 凸起在正中,是唯一打破水平排列的 Tab。

Figma 存档把设计过程和页面放在一起:从 v0 到 v4 的线框图、思维导图、站点地图,以及附带内容地图的用户流程。这里我把设计好的页面,和理清它们结构的那张地图并排展示。

设计稿页面的串联演示,并非录屏:新手引导、首页和奖品页。
深色背景上并排的四个应用页面:首页、Prêmios 有奖活动页、服务宫格页和一个活动页。
首页、Prêmios、服务和一个活动页,这个版本的标签栏里有 Serviços。

一次一个活动

首页把大半个屏幕留给一场活动:一张带照片的大卡片,上面有活动名称、日期和一个 Saiba mais 按钮,轮播指示器提示后面还有更多活动。卡片下方是三个服务快捷入口:购物中心地图、停车和影院,另有 Ver todos 链接通向其余服务。

首页,有 Grand Plaza Logo、带 Saiba mais 按钮的 Noites Culturais 活动大幅照片卡片、三个服务快捷入口,以及中间 Ofertas 按钮凸起的底部标签栏。
首页先放一场活动,再放主要服务。

有奖活动写明还差多少

Prêmios Tab 靠小票运转。有奖活动卡片用三行短句写明:已登记多少,距离赠品还差多少,距离幸运号码还差多少。Cadastrar nota fiscal 是醒目的按钮,Saiba mais 是低调的按钮,无需任何解释,下一步就很明确。

Prêmios 页面,有 Eu Faço 活动横幅、已登记的金额、距赠品和幸运号码各还差多少,以及一个 Cadastrar nota fiscal 按钮。
Prêmios 页面显示离每项奖励还差多少。
新手引导页面,有黑、粉、黄三色的插画(画着应用窗口、一把钥匙和一枚火箭)、一条欢迎语,以及 Próximo 和 Pular 两个按钮。
新手引导分三步介绍这款应用。

先梳理那一长串服务

购物中心的服务多到标签栏装不下,所以 Serviços do shopping 把 14 项服务收进同一个宫格,从购物中心地图和停车,到共享办公、自行车停车架和电动汽车充电。每个优惠最终都落在自己的页面上,有折扣、优惠码、二维码和有效期,到店出示即可。

用户流程和内容地图把这套结构画成一棵页面树,从首页向外分支。文件里还保留了两个版本的原型,一个用扁平图标,一个用 3D 图标。

一张标题为 Fluxo do usuário e content map 的图,一棵页面树从首页向外分叉,分布在带编号的各行中。
页面背后的用户流程和内容地图。