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

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

Case 046网页应用与仪表盘设计

Manaus Mais Humana

为非营利组织 Manaus Mais Humana 做的葡萄牙语仪表盘和登录页,围绕捐赠、目标和街区展开。屏幕上的每个数字都是示例值。

我的职责
界面设计
项目状态
界面设计 · Figma 存档
为这面项目墙合成的 Manaus Mais Humana 样机,画面取自项目的真实页面。
为这面项目墙用项目真实页面合成的样机。

01

我的贡献

Manaus Mais Humana 是一个为非营利组织做的葡萄牙语网页仪表盘,有登录页、一个展示捐赠和目标的首页,以及一份小型视觉指南。

这个案例展示的是页面的组织方式。页面上的金额、数量和日期都是示例值,并非实际结果。

逐页浏览设计稿,并非录制画面:登录页和仪表盘首页。
Manaus Mais Humana 仪表盘,有蓝色图标菜单、带环形图和房屋插画的黄色汇总卡片、三条绿色进度条、图表,以及右侧的交易栏。
首页先放汇总卡片,再放目标和交易。

02

一张暖色卡片,最先入眼

首页以一张黄色卡片开头:左边是筹集的金额、受益人数和捐出的食品篮,中间是一张把金额和目标做对比的环形图,右边是一幅房屋和一个人的小插画。这是页面上唯一的大面积暖色,所以它最先被读到。

接下来是目标,用三条朴素的进度条表示,每行末尾是各自的数量,下方继续是按月和按街区的图表。右栏把交易列成卡片,包含日期、地点、姓名和金额,进度条的薄荷绿又出现在它下方的 +ADICIONAR FUNDOS 按钮上。

登录页面,有 Manaus Mais Humana Logo、邮箱和密码输入项、一个蓝色按钮和一个 Google 选项,旁边是一张染上色调的照片,两只手正伸向对方。
登录页只留一列输入项,旁边是一张两只手的照片。
深藏青色底的界面部件页:按钮、侧边菜单状态、一个交易条目、地图、街区列表、图表、进度条、交易栏和汇总卡片。
首页的各个部件,汇集在一页上。

03

入口,和它背后的部件

登录页只保留一列输入项:邮箱、带显示开关的密码,以及忘记密码的链接。ENTRAR 是实心按钮,Google 选项排在一个 OU 之后,创建账号则是最后一行文字。另一半是一张两只手的照片,从黄色渐变染到青绿色,用仪表盘的配色铺满了这半边。

一份指南定下了两款字体 Muli 和 Montserrat,以及颜色和 Logo。第二张画板把按钮、侧边菜单的各种状态、交易条目、图表、进度条、地图和列表分开列出,说明首页是怎么组装起来的。

深藏青色底的指南,有 Muli 和 Montserrat 的字阶、一组色板和 Logo。
页面中使用的字体、颜色和 Logo。
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 完整案例

频道 46 网页应用与仪表盘设计

Manaus Mais Humana

为非营利组织 Manaus Mais Humana 做的葡萄牙语仪表盘和登录页,围绕捐赠、目标和街区展开。屏幕上的每个数字都是示例值。

我的职责
界面设计
项目状态
界面设计 · Figma 存档
为这面项目墙合成的 Manaus Mais Humana 样机,画面取自项目的真实页面。
为这面项目墙用项目真实页面合成的样机。

目标始终在眼前的捐赠仪表盘

来自原始 Figma 设计文件的页面。所有数字均为示例值。

我的贡献

Manaus Mais Humana 是一个为非营利组织做的葡萄牙语网页仪表盘,有登录页、一个展示捐赠和目标的首页,以及一份小型视觉指南。

这个案例展示的是页面的组织方式。页面上的金额、数量和日期都是示例值,并非实际结果。

逐页浏览设计稿,并非录制画面:登录页和仪表盘首页。
Manaus Mais Humana 仪表盘,有蓝色图标菜单、带环形图和房屋插画的黄色汇总卡片、三条绿色进度条、图表,以及右侧的交易栏。
首页先放汇总卡片,再放目标和交易。

一张暖色卡片,最先入眼

首页以一张黄色卡片开头:左边是筹集的金额、受益人数和捐出的食品篮,中间是一张把金额和目标做对比的环形图,右边是一幅房屋和一个人的小插画。这是页面上唯一的大面积暖色,所以它最先被读到。

接下来是目标,用三条朴素的进度条表示,每行末尾是各自的数量,下方继续是按月和按街区的图表。右栏把交易列成卡片,包含日期、地点、姓名和金额,进度条的薄荷绿又出现在它下方的 +ADICIONAR FUNDOS 按钮上。

登录页面,有 Manaus Mais Humana Logo、邮箱和密码输入项、一个蓝色按钮和一个 Google 选项,旁边是一张染上色调的照片,两只手正伸向对方。
登录页只留一列输入项,旁边是一张两只手的照片。
深藏青色底的界面部件页:按钮、侧边菜单状态、一个交易条目、地图、街区列表、图表、进度条、交易栏和汇总卡片。
首页的各个部件,汇集在一页上。

入口,和它背后的部件

登录页只保留一列输入项:邮箱、带显示开关的密码,以及忘记密码的链接。ENTRAR 是实心按钮,Google 选项排在一个 OU 之后,创建账号则是最后一行文字。另一半是一张两只手的照片,从黄色渐变染到青绿色,用仪表盘的配色铺满了这半边。

一份指南定下了两款字体 Muli 和 Montserrat,以及颜色和 Logo。第二张画板把按钮、侧边菜单的各种状态、交易条目、图表、进度条、地图和列表分开列出,说明首页是怎么组装起来的。

深藏青色底的指南,有 Muli 和 Montserrat 的字阶、一组色板和 Logo。
页面中使用的字体、颜色和 Logo。