鱼耳
YUER
用声音，找到共鸣。
声音社交
正在呈现画面项目介绍
ABOUT THE PROJECT用声音，找到共鸣。
鱼耳是一款以声音为中心的社交 App。本次基于已有界面改版，围绕收听、电台、声圈和私信，重新整理内容层级与互动入口，统一声音内容、人物和播放操作的视觉表达。
- 产品类型
- 声音社交
- 设计类型
- 已有界面改版
- 主要场景
- 收听 / 声圈 / 聊天
设计流程
DESIGN PROCESS以已有界面为基础，重新梳理收听、声圈与私信的页面关系，调整内容呈现和互动入口。
- 01
梳理声音场景
结合已有的热门、电台、声圈与消息页面，重新整理收听和表达的主要路径。
结构规划 - 02
统一声音识别
以蓝色强调互动，统一人物、声音内容与播放操作的表现。
视觉规范 - 03
调整表达界面
围绕已有的声圈发布、评论和个人主页，调整声音与日常内容的展示顺序。
界面设计 - 04
衔接消息与加入
梳理通知、私信、登录与资料填写的状态，保留交流继续的入口。
交互细节
设计规范
VISUAL SYSTEM蓝色连接收听与互动，内容、人物和操作各有明确的层级。
主要强调色Sky Blue
#24B8FF选中状态 / 主要操作 / 重点信息
深色基础Charcoal
#101113内容背景 / 场景衬托
浅色基础White
#FFFFFF主要文字 / 深色背景中的内容
辅助信息Gray
#8C8C8C说明文字 / 次要状态
布局规范
LAYOUT & SPACING依据真实页面组织照片、内容、入口和操作，标注相应的布局关系。
热门、声圈与榜单入口位于上方，声音主题横幅之后是电台分类；下方人物与声音内容以双列继续展开，封面、节目名称与收听信息依次呈现。
16pt
电台封面声音内容
12pt
分类入口声音按钮
16pt12pt
- 左右边距
- 14 pt
- 双列间距
- 12 pt
- 内容间距
- 16 pt
核心界面
MAIN SCREENS从主要使用场景开始，查看产品的核心界面。点击图片可以查看完整大图。
更多设计细节
MORE SCREENS沿着使用路径，继续查看内容、操作与不同状态。
