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

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

Case 052落地页设计

Lex by Alexandria

一个葡萄牙语的落地页和 Logo,为一项电费优惠而做,围绕同一个开场问题做了三种手机端首屏方案。

我的职责
界面设计
项目状态
界面设计 · Figma 存档
白色圆盘上的 Lex by Alexandria Logo。
Logo。

01

我的贡献

Lex by Alexandria 是一个葡萄牙语落地页,为一项电费优惠而做,面向家庭和企业。文件里有这个页面的桌面端和移动端版本,以及 Logo 的几种变体。

这些页面上的标题和标签是页面自己的营销文案,不是我能核实的结果。这个案例看的是页面是怎么搭建的。

滚动浏览设计稿:落地页,从优惠到运作方式。
白底上的渐变 Lex by Alexandria Logo,旁边是两部倾斜的手机,显示着落地页,背后是一块由紫到黄的斜向形状。
Logo 和落地页的两个手机端版本并排。

02

手机上的三种开场方式

手机端 Frame 对同一个首屏探索了三种处理。其中两种以照片开场,一张是一家人站在太阳能板旁,一张是技术员走过一片太阳能电站,问题都放在橙色面板上。第三种去掉照片,把渐变 Logo 放在白底上,并让 Simular Desconto 按钮进入首屏。

这个版本的首屏还以深色条带上的六个短标签收尾,算是页面继续往下之前的一个小小总结。

手机页面,有顶部的橙色栏、白底上的渐变 Logo、一个关于电费账单的问题、一个渐变的 Simular Desconto 按钮,以及深色条带上的六个标签。
手机页面,有顶部的黑色窄条、带白色 Logo 的橙色栏、一家人站在太阳能板前的照片,以及橙色面板上的标题。
同样的布局,照片里是一位穿反光外套的技术员,日落时分走过太阳能板之间的高草丛。
这个版本把 Logo、问题和按钮都放进了首屏。 带照片的版本把问题放在橙色面板上。 同样的布局,换了第二张照片。

03

把页面串起来的渐变

Logo 从紫色经橙色过渡到黄色,同一个渐变也填充了主按钮和演示 Frame 里的斜向形状。在带照片版本的橙色栏上,标志换成白色,既能保持清晰可读,形状又不变。

斜放笔记本电脑的特写,屏幕上是桌面端首屏,有小号导航、渐变 Logo、大标题和 Simular Desconto 按钮,旁边是 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 完整案例

频道 52 落地页设计

Lex by Alexandria

一个葡萄牙语的落地页和 Logo,为一项电费优惠而做,围绕同一个开场问题做了三种手机端首屏方案。

我的职责
界面设计
项目状态
界面设计 · Figma 存档
白色圆盘上的 Lex by Alexandria Logo。
Logo。

以一个问题开场的落地页

来自原始 Figma 设计文件的页面。标题是页面自己的营销文案。

我的贡献

Lex by Alexandria 是一个葡萄牙语落地页,为一项电费优惠而做,面向家庭和企业。文件里有这个页面的桌面端和移动端版本,以及 Logo 的几种变体。

这些页面上的标题和标签是页面自己的营销文案,不是我能核实的结果。这个案例看的是页面是怎么搭建的。

滚动浏览设计稿:落地页,从优惠到运作方式。
白底上的渐变 Lex by Alexandria Logo,旁边是两部倾斜的手机,显示着落地页,背后是一块由紫到黄的斜向形状。
Logo 和落地页的两个手机端版本并排。

手机上的三种开场方式

手机端 Frame 对同一个首屏探索了三种处理。其中两种以照片开场,一张是一家人站在太阳能板旁,一张是技术员走过一片太阳能电站,问题都放在橙色面板上。第三种去掉照片,把渐变 Logo 放在白底上,并让 Simular Desconto 按钮进入首屏。

这个版本的首屏还以深色条带上的六个短标签收尾,算是页面继续往下之前的一个小小总结。

手机页面,有顶部的橙色栏、白底上的渐变 Logo、一个关于电费账单的问题、一个渐变的 Simular Desconto 按钮,以及深色条带上的六个标签。
这个版本把 Logo、问题和按钮都放进了首屏。
手机页面,有顶部的黑色窄条、带白色 Logo 的橙色栏、一家人站在太阳能板前的照片,以及橙色面板上的标题。
带照片的版本把问题放在橙色面板上。

把页面串起来的渐变

Logo 从紫色经橙色过渡到黄色,同一个渐变也填充了主按钮和演示 Frame 里的斜向形状。在带照片版本的橙色栏上,标志换成白色,既能保持清晰可读,形状又不变。

同样的布局,照片里是一位穿反光外套的技术员,日落时分走过太阳能板之间的高草丛。
同样的布局,换了第二张照片。
斜放笔记本电脑的特写,屏幕上是桌面端首屏,有小号导航、渐变 Logo、大标题和 Simular Desconto 按钮,旁边是 Logo 和渐变形状。
桌面端首屏把 Logo、问题和一个按钮居中。