# 个人品牌网站设计：用议题串联内容

原网页：https://www.jvds.cn/share/ui-design/mark-woodland-topic-story-u042
语言：zh-CN
发布：2026-10-13
作者：界达设计工作室（JVDS）

Mark Woodland网站以深蓝背景、人物影像和高窄大字建立鲜明身份。画面里更有实际价值的安排，是把人物介绍、关注议题、经历和媒体类型分层展示：访客可以先选择关心的内容，再决定读多少背景。

## 核心结论

- 人物影像建立身份，主题入口提供进入内容的理由。
- 议题、经历和媒体形式分别组织，适合不同深度的访问。

## 人物首屏给出观看方向

首屏的人像占据中心，姓名使用醒目的白色大字，主题入口贴近人物，当前主题又以蓝色字样延续到视频区域。一个抽象的个人形象由此有了具体话题，访客不必先看完履历才能进入内容。

手机界面保留主题按钮与播放状态，能看出视频并非只有一张封面。主题名称、暂停状态和进度宜保持可见，使中途返回的人知道自己正在看哪一段。画面本身没有证明主题切换与播放是否联动。

往下的简介和教育场景插画换了节奏：人物照片说明身份，插画帮助表达议题。插画属于视觉表达，页面里的规模与经历文字则需要独立核验，不能由版式感染力推定真实。

![深蓝首页中的人物影像、三项议题按钮和移动播放时间](https://www.jvds.cn/upload/2026/1008/d187-tp/u042-i1.webp)

首屏｜人像确认身份，主题按钮提供观看理由

## 经历适合按节点阅读

About把照片嵌进巨大字形，继续保持人物网站的视觉气质。My Story区域再用照片、事件标题和底部年份节点组织经历，从形象表达进入可查找内容。节点加摘要的形式适合只关注某段背景的访问。

时间线最重要的是当前年份与当前事件对应。蓝色节点如果同时表达可点、[已浏览或选中](https://www.jvds.cn/share/ui-design/ui-component-states-design-system)，需再用形状、标签或当前位置区分；切换后照片和摘要也应一起更新。

在这组检查图里，部分正文呈占位排版。正式内容应先确定事件名称、年份与摘要，再评估字数与留白。人物传记并不是越短越好，能让人定位到所需经历才是这一页的用途。

![About字形照片与My Story年份节点、事件图片及摘要](https://www.jvds.cn/upload/2026/1008/d187-tp/u042-i2.webp)

经历区｜年份必须对应同一段图片和事件

## 议题与媒体形式分层

My Initiatives下出现医疗、技术教育、经济等议题；Media则以Podcasts、Press和All media区分内容形式。前者回答关注什么，后者回答怎样阅读，这两组分类适合放在不同栏目内。

展开菜单的栏目使用大写窄体字，蓝色突出当前项，与首页主题颜色一致。未选项在深背景中较暗，落地时应检查可读性，不能让可访问栏目看起来像不可用选项。

从议题来到媒体页，如果能保留相关主题，跨栏目查找会更顺。播客可补时长，报道可补日期和标题；[具体字段随内容类型变化](https://www.jvds.cn/share/website-design/website-taxonomy-categories-tags)，而不是只换封面照片。这比在一级菜单上堆满所有分类更容易维护。

![移动议题列表、Podcasts和Press分类及展开导航](https://www.jvds.cn/upload/2026/1008/d187-tp/u042-i3.webp)

移动栏目｜主题与媒介形式提供两种查找路径

## 常见问题

### 个人网站首页应先放完整履历吗？

可先给身份摘要和主要议题，再把经历放到可查找栏目。访客目的不同，主题入口能减少必须从头阅读的内容。

### 媒体内容为什么按形式分类？

播客、报道和视频的阅读条件不同，按形式分类便于选择。议题仍可作为另一层筛选，保持相关内容之间的联系。

## 设计检查清单

- 主题名称与播放状态可同时确认。
- 时间线当前年份对应当前事件。
- 深色菜单未选文字仍清楚可读。

## 组织个人网站的内容入口

人物品牌有多种经历和媒体资料时，可先建立议题与内容类型的关系，再规划首页和手机导航。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)