Driftly 设计工坊OCEAN STORIES / LAYOUT STUDIES返回素材资源

全部 28 个页面

A-001 / 开始与账号

启动页

原图为日落海岸整屏:上方 Driftly 字标和品牌标语,中下方人物与漂流瓶,下方蓝色开始按钮及协议。

打开 HTML 布局
A-002 / 开始与账号

写下心事

浅天空中有居中的两行标题,中部是圆形日落人物插画,插画下方为白色说明卡,底部页码和下一步。

打开 HTML 布局
A-006 / 开始与账号

登录方式

旧图为纵排第三方登录按钮和一键登录;当前修订要求下部突出“游客进入”,其下是邮箱/Google/App

打开 HTML 布局
A-007 / 开始与账号

邮箱账号

旧图展示注册状态:顶部邮箱登录/注册标题、页内注册主标题、模式切换、邮箱和两个密码框、协议及创建账号按

打开 HTML 布局
A-008 / 开始与账号

邮箱验证

顶部导航后是一枚信封、输入验证码标题和目标邮箱,中部为分格验证码,下方重发倒计时和验证按钮,底部说明卡

打开 HTML 布局
A-010 / 开始与账号

一键登录

上部海岸插画与一键登录标题,中部脱敏号码卡,下部运营商授权协议和登录按钮。

打开 HTML 布局
A-011 / 开始与账号

游客登录

旧图标题“先逛逛这片海”并列出受限体验;当前修订为“先进入,再认识新朋友”和完整开放功能说明。

打开 HTML 布局
A-012 / 漂流瓶

海洋首页

顶部Driftly字标、问候和小操作按钮,中上部白色心情卡,中部日落海面漂流瓶,底部并排“扔一个瓶子/

打开 HTML 布局
A-013 / 漂流瓶

写漂流瓶

旧图是标题栏、内容类型标签、米白信纸编辑区、瓶型选择、心情标签、匿名开关和发送。

打开 HTML 布局
A-020 / 消息与社交

陌生人资料

上方圆角海景封面,中间圆头像覆盖封面下缘,昵称简介与统计,下面关于TA/兴趣卡,底部关注和打招呼。

打开 HTML 布局
A-021 / 消息与社交

系统通知

顶部通知中心与返回,两个分类Tab,下方圆角通知卡,每条左图标、中间标题摘要、右侧时间。

打开 HTML 布局
A-022 / 消息与社交

海边广场

顶部大标题、分类和搜索,海景专题条,下方白色帖子卡含头像正文图片与互动栏,右下发布按钮及底栏。

打开 HTML 布局
A-023 / 我的与设置

我的岛屿

上方“我的岛屿”和设置按钮,海景个人头部、头像昵称、统计白卡,下面是我的瓶子/收藏/徽章/主题/语言/

打开 HTML 布局
A-024 / 我的与设置

我的漂流瓶

顶部我的瓶子和搜索,中部发出/收到/草稿筛选,下面白色瓶子列表卡,左瓶子缩略图,中间标题摘要和日期状态

打开 HTML 布局
A-025 / 我的与设置

成就徽章

顶部导航与鼓励文案,已获数量和进度条,中间两列徽章卡;未解锁卡颜色更淡且带锁。

打开 HTML 布局
A-027 / 我的与设置

设置

顶部设置,三组白卡包含资料、登录绑定、语言、通知、隐私、黑名单、外观、帮助、关于,底部退出。

打开 HTML 布局
A-028 / 我的与设置

关于 Driftly

顶部关于我们,中上部漂流瓶字标、版本号和品牌标语,下方协议/隐私/社区/联系我们白卡,底部海岸。

打开 HTML 布局