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

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

Case 031移动应用设计

Habit Tracker

习惯追踪应用的单个首页:一整年排成黄色方块网格,并配有一条提示,提醒下一次打卡。

我的职责
界面设计
项目状态
界面设计 · Figma 存档
原始设计文件中的 Habit Tracker 演示封面。
演示封面,来自原始文件。

01

我的贡献

这个文件里有我设计的一个页面,一个习惯追踪应用的首页,围绕日历组件搭建。一整年在页面上铺成一格格方块,黄色越深,那天完成的越多。

展示图:手机上显示首页,旁边是大号的 Habit Tracker 字样和一个小小的 Daily Coach 标志。
带有首页的展示画框。

02

一年一目了然,下方一个操作

Habit timeline 位于视觉层级的最上方:月份横向排列,日期纵向排列,标题旁是年份选择器,还有一条从 Less 到 More 的图例,说明黄色深浅的含义。

它下方是一张卡片,把这份记录转成下一步行动。“Don't lose your habit score streak”直接通向今天的打卡,顶部的黄色加号按钮是页面上仅有的另一处醒目色彩。

首页,有一张全年的黄色方块网格(从一月到六月)、一条从 Less 到 More 的图例,以及一张黄色卡片,内容是保持习惯的连续打卡,并链接到今天的打卡。
首页:上面是习惯时间线,下面是今天的打卡。
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 完整案例