S

Slofst

iOS App Prototype - Apple HIG

iPhone 15 Pro 393×852 pt
1

Onboarding

4-step registration flow · Status Bar 44pt · Home Indicator 34pt

Step 1: Welcome
S

Slofst

找到你的灵魂伴侣

💝
智能匹配算法
🔒
隐私安全保护
✨
真实用户认证

点击即表示同意服务条款和隐私政策

Status Bar: 44pt
Home Indicator: 34pt
Step 2: Basic Info
基础信息

基础信息

让我们更好地了解你

昵称
年龄
性别
头像
Nav Bar: 44pt
Safe Area: 34pt
Step 3: Preferences
偏好设置

偏好设置

定制你的理想型

性取向
异性恋 同性恋 双性恋 泛性恋
年龄范围
18
35
18-28岁
兴趣标签
🎵 音乐 🎬 电影 📚 阅读 🏃 运动 ✈️ 旅行 🍳 美食 + 添加
理想型描述
Step 4: Ready
🎉

准备就绪!

你的个人资料已创建完成
开始探索属于你的缘分吧

资料完整度 85%
2

Discover

Full-screen card with gradient masks · Top mask: black→transparent · Bottom mask: black→transparent

Discover View
Profile
S
128 人在线
3.2km

小雨, 24

设计师 · 上海

92%

热爱摄影和旅行，喜欢探索城市的每个角落。希望能找到一个志同道合的伙伴一起去看世界。

📸 摄影 ✈️ 旅行 ☕ 咖啡 🎨 艺术
Status Bar: 44pt
Nav Bar: 44pt
Buttons: 44pt+
Home Indicator: 34pt
3

Chat

Messaging interface with proper cell heights

Chat List

消息

Avatar

阿明

2分钟前

今晚有空一起看电影吗？

1
Avatar

琳琳

1小时前

好的，那我们周末见！

Avatar

浩然

昨天

我也很喜欢那家餐厅

3
Avatar

小美

2天前

哈哈，真的很有趣！

Avatar

小杰

3天前

周末有什么安排吗？

Search: 36pt
Tab Bar: 83pt
Cell: 44pt min
Chat Detail
Avatar

阿明

在线

今天 14:30
Avatar

嗨！最近好吗？

挺好的！工作忙完了，终于有时间休息啦 😊

Avatar

那太好了！今晚有空一起看电影吗？新上映的那部爱情片听说很不错

听起来不错！几点呢？

Avatar

7点怎么样？我买了票

Movie
Input: 44pt+
4

Profile

Settings and preferences · 44pt minimum touch targets

Settings

我的

Profile

小可爱

VIP

ID: 8923471

128
关注
56
粉丝
2.3k
获赞
👑

VIP 会员

解锁无限滑动、查看访客、隐身模式等特权

剩余 15 天
深色模式
语言
简体中文
通知设置
隐私与安全
关于 Slofst
用户协议
隐私政策

Version 2.1.0 (Build 2025.3)

Cell: 44pt min
Tab Bar: 83pt

Apple Human Interface Guidelines 规范参考

iPhone 15 Pro 尺寸

  • 屏幕尺寸: 393×852 pt
  • 分辨率: 1179×2556 px
  • 缩放比例: @3x
  • 圆角半径: 55pt (屏幕)

安全区域

  • 状态栏: 44pt
  • 导航栏: 44pt
  • 标签栏: 83pt (49pt + 34pt)
  • Home Indicator: 34pt

字体 (SF Pro)

  • Large Title: 34pt Bold
  • Title 1: 28pt Bold
  • Headline: 17pt Semibold
  • Body: 17pt Regular

圆角与间距

  • 按钮: 10pt
  • 卡片: 12-16pt
  • 安全边距: 16pt
  • 按钮最小: 44pt

渐变遮罩实现 (Discover 页面)

/* 顶部渐变遮罩: 黑色渐变到透明 */

background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);

/* 底部渐变遮罩: 黑色渐变到透明 */

background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);