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

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

Case 018移动应用设计

MAT APP

一款葡萄牙语日记应用,有日历、可以写笔记也可以记感受的日记页,以及用于艺术治疗的绘画画布。屏幕上的所有记录均为示例内容。

我的职责
界面设计
项目状态
界面设计 · Figma 存档
一本 3D 日记本摊开在日历上,其中一页正在翻动。
为这面项目墙制作的 3D 物件。

01

我的贡献

MAT APP 是一款葡萄牙语日记应用。它的新手引导把它介绍成一个私人空间,可以记录情绪、自由书写、练习艺术治疗,所以界面要把文字、感受和图画放在同一个地方。

三月的日历页面,部分日期后面衬着彩色小画作,有一条高级方案的横幅,下方是示例记录 Um Dia Perfeito。
日记页面,有笔记 Um Dia Perfeito、把生活领域和感受配对的标签、一个 emoji 表情反应网格,以及一排图库缩略图。
设计稿页面的串联演示,并非录屏:新手引导、首页、日记和画布。 有些日期带着画作,选中日期的记录在下方。 一页日记容纳笔记、感受标签、表情反应和图库。

03

文字、感受和图像,同在一页

日记页面叠放着三张卡片:文字笔记、表情反应和当天的图库。笔记下方的小标签把一个生活领域和一种感受配成一对,比如 Trabalho: Felicidade 或 Saúde: Neutro。在 Reações 里,选中的 emoji 保持彩色,其余的变灰,选了哪个一眼就能看出来。

艺术治疗画布起初只是一个圆,像日记一样标着日期,顶部是撤销、重做和图层,底部是符号和形状。

Completo 标签下方有五部倾斜的手机,每部显示一个带插画的新手引导步骤。
Completo:五步新手引导。

04

两种长度的新手引导

Assets 页面里有两个版本的新手引导。Simples 只有一个欢迎页,带一个 Vamos começar 按钮。Completo 分五个带插画的步骤,每一步介绍一个想法,主按钮和 Pular 始终在同一个位置。两个版本都依靠同样温暖的插画,插画承担了大部分说明工作。

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

频道 18 移动应用设计

MAT APP

一款葡萄牙语日记应用,有日历、可以写笔记也可以记感受的日记页,以及用于艺术治疗的绘画画布。屏幕上的所有记录均为示例内容。

我的职责
界面设计
项目状态
界面设计 · Figma 存档
一本 3D 日记本摊开在日历上,其中一页正在翻动。
为这面项目墙制作的 3D 物件。

留有画画空间的日记

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

我的贡献

MAT APP 是一款葡萄牙语日记应用。它的新手引导把它介绍成一个私人空间,可以记录情绪、自由书写、练习艺术治疗,所以界面要把文字、感受和图画放在同一个地方。

设计稿页面的串联演示,并非录屏:新手引导、首页、日记和画布。
三月的日历页面,部分日期后面衬着彩色小画作,有一条高级方案的横幅,下方是示例记录 Um Dia Perfeito。
有些日期带着画作,选中日期的记录在下方。

整月像一间小画廊

日历页面不只是标出日期。有些日子的数字后面衬着一幅小画,整个月开始像一间画廊,其余日子则保持素净。选中日期的记录就在网格正下方,位于 Seu diário para o dia selecionado 这行字之下。

日记页面,有笔记 Um Dia Perfeito、把生活领域和感受配对的标签、一个 emoji 表情反应网格,以及一排图库缩略图。
一页日记容纳笔记、感受标签、表情反应和图库。

文字、感受和图像,同在一页

日记页面叠放着三张卡片:文字笔记、表情反应和当天的图库。笔记下方的小标签把一个生活领域和一种感受配成一对,比如 Trabalho: Felicidade 或 Saúde: Neutro。在 Reações 里,选中的 emoji 保持彩色,其余的变灰,选了哪个一眼就能看出来。

艺术治疗画布起初只是一个圆,像日记一样标着日期,顶部是撤销、重做和图层,底部是符号和形状。

新手引导页面,有一幅插画(画着带挂锁的红色日记本和一支铅笔)、标题 Cuide da sua mente, um dia de cada vez,以及 Próximo 和 Pular 按钮。
五个新手引导步骤中的第一步。
绘画页面,有一块圆形的透明画布,撤销、重做和图层控件,一个 Salvar 按钮,以及 Símbolos 和 Formatos 工具。
艺术治疗画布,可以放入符号和形状。

两种长度的新手引导

Assets 页面里有两个版本的新手引导。Simples 只有一个欢迎页,带一个 Vamos começar 按钮。Completo 分五个带插画的步骤,每一步介绍一个想法,主按钮和 Pular 始终在同一个位置。两个版本都依靠同样温暖的插画,插画承担了大部分说明工作。

Completo 标签下方有五部倾斜的手机,每部显示一个带插画的新手引导步骤。
Completo:五步新手引导。