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

落地页设计

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、问题和一个按钮居中。