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

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

Case 029移动应用设计

Rollê

一款葡萄牙语应用,用来找地点、策展人和活动,这里以库里蒂巴的例子展示。它的地点页面把实用信息和故事、朋友的小贴士穿插在一起。

我的职责
界面设计
项目状态
界面设计 · Figma 存档
Rollê 样机,为这面项目墙用项目的真实页面合成。
为这面项目墙用项目真实页面合成的样机。

01

我的贡献

Rollê 是一款葡萄牙语应用,用来找地点、策展人和活动。文件里的示例都设定在库里蒂巴,这里我跟着其中一个来讲,也就是 Ópera de Arame 剧院。文件里有 17 个互不相同的手机页面,并把早期草稿放在单独的一页里。

Ópera de Arame 剧院的全屏照片,有分段进度条、地点名称、评分,以及一块深色面板,上面是一小段文字和三个亮点。
Ópera de Arame 的地点页面,有一排照片、四个圆形快捷入口、两张带插图的 Sobre o local 卡片,以及 Dica de amigo 列表的开头部分。
逐页浏览设计中的页面,不是录屏:品牌开场、一个地点及其 story。 以全屏 story 呈现的一个地点。 地点页面,从实用信息到朋友的小贴士。

02

读起来像推荐的地点介绍

地点页面从必要信息开始:名称、评分、一排照片(下一张从边缘探出一角),以及四个圆形快捷入口:Conheça、Horários、Info 和 Avaliações。再往下,语气变了。Sobre o local 用简单的话,比如“Rola show, peças e eventos”,配在带墨线小插图的卡片上;Dica de amigo 收集简短的小贴士,比如在接近日落时到那里。

03

同一个地方,做成全屏 story

story 页面把整部手机都交给一张照片,用分段条表示后面还有内容。阅读部分留在底部的深色面板上:一小段关于这个地方的文字和三个亮点。照片负责交代这个地方,文字短到翻到下一张之前就能读完。

04

黑色描边与彩色回声

照片、卡片和图标按钮采用同一种处理:黑色描边,外加一个偏移的细形状,用第二种颜色,比如蓝色、橙色或粉色。标题使用衬线体,文件里还保留着标注为 Serif 的排版版本。这些放在一起,让这款应用更接近一本印刷的指南,而不是一个罗列地点信息的应用。

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