案例背景

章鱼直播是-款在线视频直播娱乐平台，以游戏直播为主，并扩展至娱乐、K歌、美女、二次元、生活日常等多种视频与直播内容。该项目是在工作之余以公司内的一-款项目为原型进行改版重设计的，在此基础上丰富产品的架构和功能，优化整体视觉和交互。

目标用户

以视频和直播内容为娱乐消遣的年轻用户，以偏好游戏直播和美女直播的男性用户居多，主要集中于二三线城市。大部分职业为学生或自由职业者。

优化方向

统一视觉风格，融入当下设计流行趋势。

提升品牌识别度，差异化设计

提高图标风格的一致性

减少视觉干扰，提升用户沉浸感简化用户的操作，提升转化率

通过IP角色来提升情感化设计

优化产品交互和架构给予及时的用户反馈

设计方向

年轻时尚：符合年轻用户的审美，更具潮流感和趣味性。

简洁易用：梳理架构，突出产品的核心功能，提升易用性。

品牌记忆：融入情感化设计，和产品IP设计，给用户形成品牌记忆。

颜色

字体

主色1：14e6c1

主色2：0ad0c4

苹方字体40px苹方

因为产品的主要用户群体是16- -30岁的年轻人。所以整体以蓝绿色为主色。搭配明亮轻快的辅助色，给用户时尚清爽的体验。

项目中中文字体采用苹方，英文和数字采用旧金山字体，来最佳还原移动端的U|实现效果。

布局

栅格化布局

在设计开始之前，通过建立栅格化布局，使后续的布局规范统-，让设计有据可循。

原则

这里以8px为基础单位(依据是移动端的8dp原则)分割布局，所有的间距和元素大小 都是8px的倍数(8, 16, 24, 2....特殊情况则保持4的倍数。以便开发和设计人员在不同分辨率下的适配。

格式塔原则

根据格式塔原则，人眼容易把靠近的元素当成组数据，因此不同模块下的元素间距要大于同一模块下的元素间距。

Tab栏图标

normal态: 3PX粗线性图标，凸显产品年轻活泼气质highlight态:面性图标，提高识别度，颜色为品牌色

LOGO设计

以app的吉祥物章鱼为原型设计的logo,以抽象化的几何形状来概括章鱼的形象，以便后续的品牌延续。色彩上采用app的主色调蓝绿为主色调。

首页

推广banner

以轮播图形式展示当下热门活动banner,主要为游戏广告、平台活动等。

活动预定

实时推送游戏活动信息，玩家可一键预定。

热门直播

特殊设计的微动态背景，重点突出当前直播用户，来带动直播模块活跃度，提升用户流量。

用户

首页推荐和个性推荐的用户UCG内容。为避免视频封面图片的杂乱无章，这里利用圆角卡片式的布局规整信息，提升页面整洁度。

关注

直播中

重点突出当前直播中的用户，引导用户到直播模块。

关注动态

“关注动态”布局的规范主要可以分为以下几种类型:

直播类

短视频类

图片类

广告类

直播间

通过勋章和多彩的弹幕样式渲染直播间热闹的气氛，提升用户体验和活跃度。贵族拥有高调的出场方式和弹幕样式，显高级用户的优越感，吸引玩家付费成为贵族。点击主播头像可查看基本信息和一键关注。