首页UI优化

1603 字
8 分钟
首页UI优化

这个页面的底子不差(信息完整、对齐干净),但”过时感”主要来自:通用后台模板的骨架 + 没有任何摄影的气质。下面分三层说:问题诊断 → 创意方向 → 具体改法。


一、为什么看起来过时#

  1. 卡片套卡片:白卡片 + 浅灰底 + 统一圆角阴影,这是 2018 年 Ant Design 后台的标准长相。所有区块权重一样,没有主次。
  2. 一个摄影产品,页面里没有”光”:Emulsion(乳剂/胶片)这个名字很有味道,但页面全是黑白灰,唯一的照片被塞进小方格里裁成正方形。照片应该是主角,现在是配角。
  3. 信息密度失衡:顶部大卡片中间一大片空白,右侧四个统计数字却挤在一起;“待处理”整块卡片只有一行内容。
  4. 功能重复、层级模糊:「上传照片」在按钮和快捷卡片里出现两次;6 个快捷入口权重完全相同,等于没有重点。
  5. 细节暴露开发痕迹:已连接 localhost:3000、右上角半透明水印 logo 压在按钮上、“数据同步于”孤零零漂着。
  6. 字体混搭生硬:“早上好,” 是衬线中文,“shai” 换成另一种字体,一行里两套气质。
  7. 进度条误导:数码 260 / 胶片 101 是”构成比例”,却画成了”完成进度”。

二、创意方向:把它做成”暗房工作台”而不是”管理后台”#

选一个明确的视觉母题,所有细节围绕它展开。给两个方向:

方向 A:接触印相 / 暗房(Contact Sheet & Darkroom)

  • 暖色基调(安全灯琥珀 #E8A33D 或胶片橙作为唯一强调色),深色模式用暗房红。
  • 照片用接触印相的形式呈现:带齿孔的胶片边框、手写体的卷号/日期。
  • 统计数字用”计数器”质感,等宽数字(font-variant-numeric: tabular-nums)。
  • 背景可加极轻的颗粒纹理(噪点 SVG,opacity 0.03),不要纯平灰。

方向 B:摄影杂志编辑部(Editorial)

  • 去掉所有卡片边框,用大留白、粗细对比极强的排版分区(像杂志目录)。
  • 顶部用一张大图 hero(当天/本周最新照片,或”那年今日”),问候语压在图上。
  • 数据以”图注”形式排在图旁,而不是仪表盘。

两者都比现在的”白卡片矩阵”有记忆点。个人建议 A,和产品名最契合。


三、逐区块的具体改法#

1. 顶部:从”卡片”变成”Hero”#

text

┌──────────────────────────────────────────────────────┐
│ [最新照片做全宽背景,暗角+轻模糊] │
│ │
│ 早上好,shai ⌘K 搜索/命令 │
│ 9月5日 · 周六 · 日落 18:42 [上传] [写作] │
│ 本周拍了 12 张胶片,还有 5 篇草稿等着你。 │
└──────────────────────────────────────────────────────┘
  • 问候语改成有内容的一句话(数据驱动,每天不同),比”已连接 localhost”有温度得多。
  • 加一个摄影师真正关心的信息:今日日落/黄金时刻时间、天气。这是”创造性”最便宜的来源。
  • 把”访问站点”降级为一个小外链图标;水印 logo 删掉。
  • “数据同步于 10:21” 缩成右上角一个带 tooltip 的小圆点(绿色=已同步)。

2. 统计:一条胶片,而不是四个数字#

  • 把 361 / 数码 / 胶片 做成双色分段条(不是进度条),两端标注比例。
  • “今年上传 353” 换成一个 12 个月的小热力图或迷你柱状图——一眼看出哪个月拍得多,比一个孤立数字信息量大十倍。
  • 存储用量放到设置或侧边,它不是每天要看的。

3. 快捷入口:从 6 个等价卡片变成”1 个拖拽区 + 3 个动作”#

  • 上传改成真正的拖拽区(虚线框,“把照片拖到这里,支持 RAW / 扫描 TIFF”),页面其他任何位置拖入也能触发。
  • 云端库 / 本地库 / 文章 / Zine / AI 助手 收进顶部导航或 ⌘K 命令面板,首页只留最近用过的 3 个(“继续上次:Zine《夏日》排版中 · 3/12 页”)——记忆状态比静态入口更像 2025 年的产品。

4. 最近照片:让照片按自己的比例呼吸#

  • 用 justified layout(Flickr 式等高瀑布流) 或 masonry,不要裁成正方形。
  • 第一张放大(2×2),其余小图,形成视觉焦点。
  • hover 显示 EXIF 图注:Portra 400 · 50mm · f/2,胶片卷用齿孔边框和数码区分。
  • 按日期分组加一条细分隔:“9月4日 · 6 张”。
  • 空位问题:第二行只有两张就换成”查看全部 →“的占位卡,或者直接用瀑布流消除空洞。

5. 待处理 + 内容概况:合并成一个”接下来”清单#

现在的”待处理”只有一条,“内容概况”是一堆没有动作的数字。合并成可点击的 todo:

text

接下来
● 5 篇草稿未发布 → 继续写作
● 3 张照片未归入相册 → 去整理
● 1 条新评论待回复 → 查看
● 博客还没有第一篇文章 → 从叙事改写一篇?

每行一个动作按钮,0 的项目(博客 0 / 已发布 0)不要展示,或者转成引导。

6. 视觉系统统一#

  • 去掉一层嵌套:外层卡片 → 用留白 + 1px 分隔线分区,内层才用卡片。
  • 一个强调色:全页只有黑色按钮一个视觉重量,加一个暖色用于关键数字和 hover。
  • 字体:中英各一套,不要一行里混。推荐 Noto Serif SC 做展示标题(含英文名),Inter / PingFang 做正文;数字全部 tabular。
  • 圆角:大容器 16px,小元素 8px,不要全部一样。

四、如果只能改三件事#

  1. 顶部换成照片背景的 Hero + 一句数据驱动的问候语。
  2. 最近照片改成保留原比例的 justified 布局,加 EXIF 图注。
  3. 右侧两块合并成可操作的”接下来”清单。

这三步做完,页面就从”管理后台”变成了”我的暗房”,剩下的都是打磨。需要的话我可以按方向 A 给你一版具体的配色 token 和 CSS 结构。

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

首页UI优化
https://shaio.top/posts/03mogallery/desktop/260905首页ui优化/
作者
沙海
发布于
2026-09-05
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image of the Author
沙海
Hello, I'm Shai.
公告
欢迎来到我的博客!这是一则示例公告。
音乐
封面

音乐

暂未播放

0:00 0:00
暂无歌词
分类
标签
站点统计
文章
84
分类
15
标签
48
总字数
67,035
运行时长
0 天
最后活动
0 天前
站点信息
构建平台
GitHub Actions
博客版本
Firefly v6.12.2
文章许可
CC BY-NC-SA 4.0

文章目录