返回UIUX

XIMEI 小说 / 音乐 / Web

XIMEI / READING EXPERIENCE

Stories
to get lost in.

西梅小说 · 每一次翻页,
都是另一个世界。

DISCOVER · COLLECT · READ
西梅小说 · 小说_书架
西梅小说 · 小说详情
01 / XIMEI DESIGN

Discovery

小说发现

首页按内容分组呈现小说入口,详情页集中承载作品信息与阅读入口,深色方案保持相应内容层级。

西梅小说 · 小说
西梅小说 · 小说详情
01 — DETAILS

从内容发现,到开始阅读。

西梅小说 · 小说详情_深色
西梅小说 · 首页-小说-深色备份
02 / XIMEI DESIGN

Bookshelf

书架管理

书架覆盖已有内容、无内容、添加书籍、全选与移出确认等状态,并保留书单列表与新建书单的管理过程。

西梅小说 · 小说_书架
西梅小说 · 小说_书架无内容
02 — DETAILS

让收藏与整理,沿用一致的操作路径。

西梅小说 · 小说_书架_添加书籍
西梅小说 · 小说_书架_全选
西梅小说 · 小说_书架_移出弹窗提示
西梅小说 · 小说_新建书单_深色
西梅小说 · 我的书单列表
西梅小说 · 默认书单封面
03 / XIMEI DESIGN

Chapters

章节目录

章节目录提供普通、倒序、深色与护眼方案,在不同阅读设置中保持章节结构和操作位置稳定。

西梅小说 · 小说_章节目录
西梅小说 · 小说_章节目录倒叙
03 — DETAILS

深色与护眼模式,保持相同的阅读结构。

西梅小说 · 小说_章节目录_深色
西梅小说 · 小说_章节目录_护眼
04 / XIMEI DESIGN

Sharing

阅读分享

分别展示小说详情与章节分享卡片,通过作品视觉、文字摘录和二维码形成面向分享场景的信息层级。

西梅小说 · 小说章节分享
西梅小说 · 小说详情分享
04 — DETAILS

让故事走出阅读页面。

西梅小说 · 小说详情分享备份
05 / XIMEI DESIGN

History

阅读记录

搜索列表、浏览记录与点赞记录承接用户的内容查找和再次访问。

西梅小说 · 2.5.6_我的_搜索列表
西梅小说 · 2.5.6_我的_浏览记录
05 — DETAILS

留住阅读的每一个足迹。

西梅小说 · 2.5.6_我的_点赞记录
西梅小说 · 小说_书架_深色
XIMEI / NOVELS

Keep reading.

UI / UX
MOBILE MUSIC
XIMEI
MUSIC & VIDEO
LISTEN.
FEEL. REPEAT.

A little music.
A different
state of mind.

让音乐,
成为此刻的主角。从发现、播放到收藏,
连接每一种聆听心情。

西梅音乐 · 视听_MV播放页
01 / XIMEI DESIGN

Discovery

音乐发现

视听首页通过推荐、分类与内容列表组织音乐入口,日推列表和全部音乐承接进一步浏览。

西梅音乐 · 视听
西梅音乐 · 视听_浅色模式
01 — DETAILS

用推荐与分类,找到下一首喜欢。

西梅音乐 · 视听_西梅日推列表
西梅音乐 · 视听_全部音乐
西梅音乐 · 视听_全部音乐_浅色模式
02 / XIMEI DESIGN

Playback

播放体验

MV 播放页呈现作品信息与播放控制,小窗状态让播放与列表浏览在同一页面中并行。

西梅音乐 · 视听_MV播放页
西梅音乐 · 视听_MV播放页_浅色模式
02 — DETAILS

保持浏览与播放的连续性。

西梅音乐 · 视听_小窗播放
西梅音乐 · 视听_小窗播放_浅色模式
03 / XIMEI DESIGN

Collections

合集管理

全部合集、音乐合集与喜欢列表提供不同的内容组织方式,删除状态帮助区分浏览与管理操作。

西梅音乐 · 视听_全部合集
西梅音乐 · 视听_全部合集_浅色模式
03 — DETAILS

收藏、整理与编辑,各有清晰的状态。

西梅音乐 · 视听_音乐合集
西梅音乐 · 视听_音乐合集_浅色模式
西梅音乐 · 视听_我喜欢的MV
西梅音乐 · 视听_我喜欢的MV_浅色模式
西梅音乐 · 视听_我喜欢的MV_删除
西梅音乐 · 视听_我喜欢的MV_删除_浅色模式
西梅音乐 · 视听_我喜欢的合集
西梅音乐 · 视听_我喜欢的合集_浅色模式
04 / XIMEI DESIGN

Search & add

搜索与添加

搜索、添加音乐与空列表分别承接查找内容、补充内容和尚未添加内容的状态,深浅主题保持相同流程。

西梅音乐 · 视听_搜索
西梅音乐 · 视听_搜索_浅色模式
04 — DETAILS

从查找到加入,反馈始终明确。

西梅音乐 · 视听_添加音乐MV
西梅音乐 · 视听_添加音乐MV_浅色模式
西梅音乐 · 视听_全部音乐_空态
西梅音乐 · 视听_全部音乐_空态_浅色模式备份
05 / XIMEI DESIGN

Sharing

视听分享

以 H5 卡片展示 MV 和合集的分享方案,将作品信息、列表与二维码入口组织在一起。

西梅音乐 · 视听_我喜欢的MV_H5分享MV
西梅音乐 · 视听_我喜欢的MV_H5分享合集
05 — DETAILS

用内容本身,连接下一位听众。

西梅音乐 · 视听_我喜欢的合集_H5分享合集
XIMEI / MUSIC

Keep listening.

XIMEI / WEB EXPERIENCE

A wider view.
A closer read.

用更宽的视野,
读懂世界。

NEWS · LANGUAGES · IDEAS
● ● ●ximei / 资讯首页↗
西梅 Web · 资讯首页
01 / XIMEI DESIGN

Discover the world

资讯发现

分类导航、多列资讯卡片与热门话题共同构成浏览框架。图片、来源、标题与摘要形成清晰的信息层级。

● ● ●ximei / 分类导航与资讯卡片↗
西梅 Web · 分类导航与资讯卡片
02 / XIMEI DESIGN

One story. Three ways.

双语阅读

中文、英文与双语对照沿用一致的阅读结构。以稳定的正文宽度、行距与段落留白,保持长文阅读的节奏。

● ● ●ximei / 中文阅读↗
西梅 Web · 中文阅读
● ● ●ximei / 英文阅读↗
西梅 Web · 英文阅读
● ● ●ximei / 中英双语对照↗
西梅 Web · 中英双语对照
03 / XIMEI DESIGN

Beyond the article

内容互动

点赞、分享、原文与相关推荐连接阅读后的操作。辅助信息沿页面边缘组织,保持正文的视觉主次。

● ● ●ximei / 分享与相关推荐↗
西梅 Web · 分享与相关推荐
XIMEI / WEB

Thanks for reading.