首页 > 成功案例 > APP建设
直播App案例

案例背景

章鱼直播是-款在线视频直播娱乐平台,以游戏直播为主,并扩展至娱乐、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内容。为避免视频封面图片的杂乱无章,这里利用圆角卡片式的布局规整信息,提升页面整洁度。


关注

直播中

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


关注动态

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

直播类

短视频类

图片类

广告类


直播间

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