跳到正文
TV view聊聊吧
中文
全部作品

网页应用与仪表盘设计

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。