云豹语音交友系统开发案例
一种新兴的“非颜值”社交方式,受众群体主要为年轻人
语音交友
多人群聊
互动直播
动态
项目背景
Project background
云豹语音社交app开发采用实时交互语音技术实现多用户社交互动,打造流畅、清晰、安全、易用的社交平台;精心设计用户界面和交互流程,以提供流、愉悦的用户体验。充分满足年轻用户语音社交需求,力求打造更受用户喜爱的运营级语音社交系统
The development of Yunbao voice social app adopts real-time interactive voice technology to achieve multi-user social interaction, creating a smooth, clear, safe and easy to use social platform; Carefully design the user interface and interaction flow to provide a flowing, enjoyable user experience. Fully meet the voice social needs of young users, and strive to create a more popular operational voice social system
色彩情绪版
/Color Mood Board
APPLICATION·DESIGN
云豹语音社交系统开发中大量使用淡紫色毛玻璃设计元素,视觉效果柔和、梦幻、轻盈,介乎于清透与朦胧之间的毛玻璃画面引导用户注意力集中在重要内容上,减少视觉干扰,突出重要信息,让云豹语音社交系统的UI整体繁显得而不乱。
In the development of Cloud Leopard voice social system, a large number of lavender ground glass design elements are used, and the visual effect is soft, dreamy and light. The ground glass screen between clear and hazy guides users to focus on important content, reduces visual interference, highlights important information, and makes the UI of Cloud Leopard voice social system as a whole complex and not chaotic.
颜色规范
/Color Specification
前期产品设计中,我们将云豹语音交友APP主题色定位暗紫色,以搭配语音社交系统“不露脸”“匿名社交”的神秘色彩,通过对紫色的色彩饱和度、明暗度处理及与其他配色的搭配,实现优雅、沉静、神秘的设计风格。此外,语音社交系统跨设备使用情形多,紫色在不同的光线和设备上显示效果相对稳定,更适合运营
In the early product design, we positioned the theme color of the Yunbao voice dating APP dark purple to match the mysterious color of the voice social system "not showing face" and "anonymous social". Through the color saturation, brightness and shade processing of purple and matching with other colors, we achieved an elegant, quiet and mysterious design style. In addition, the voice social system is used in many cases across devices, and the purple display effect is relatively stable on different lights and devices, which is more suitable for operation
字体规范
/Text Norms
在字体选择上,选择校角分明干净简洁的字体,凸显品质感
正文选择苹方,线条优美,端庄严肃; 文中的对比从三个维度去实现; 粗细对比,字号大小对比,颜色的对比,从而使用文字有层级感更易读
苹方-简
PingFang-SC
Regular / Bold
/10px/12px/14px/16px/18px/20px/22px/24px/
ABCDEFGHIJKLMNOPQRSTUVWXYZ
~ ! @#¥%......&*()-+
图标设计
/lcon Design
APPLICATION·DESIGN
图标设计统一网格尺寸,同一级别的图标设计遵循以下的原则
大小统一
粗细一致
比例一致
圆角一致
风格一致
疏密一致
首页
/Home page
APPLICATION·DESIGN
扁平化UI设计·边界明确的圆润按钮设计·轻色彩渐变
主要功能区
语音交友系统主页功能包含:在线匹配、缘分恋爱、语音通话、声音匹配、兴趣群聊、邀请好友等,点击模块可快速进入相应页面,直击感兴趣的内容
热门房间推荐
云豹语音社交系统支持用户根据不同分类选择房间
聊天室
/Chat room
APPLICATION·DESIGN
语音聊天室两大维度划分
关注、同城、全部
聊天、处cp、组队开黑 …
消息
/Message
APPLICATION·DESIGN
消息
消息分为三类,包含最新关注、谁看过我、谁喜欢我。用户可以根据分类去查看对应想看的消息,方便用户快速筛选想看的内容,提升屏幕利用率。
系统通知
根据主题色制作头部渐变,消息醒目。
动态
/Dynamic state
APPLICATION·DESIGN
动态支持显示:文字、图片、语音等,点赞/评论有红点提示
Dynamic support display: text, pictures, voice, etc, like/comment has a red dot prompt
功能机制
云豹语音聊天系统开发的动态功能,支持根据用户感兴趣的话题和内容做针对性推荐
个人中心
/Personal Center
APPLICATION·DESIGN
我的页面展示了大部分的模块功能,录制我的声音名片,显示我的群聊、财富等级和魅力等级,展示自己的礼物典藏馆,右上展示菜单栏图标,其目的是让用户快速能找到想要的功能块。
My page shows most of the module functions, records my voice business card, displays my group chat, wealth level and charm level, displays my gift library, and displays the menu bar icon on the top right, which is designed to let users quickly find the function block they want.
全部页面
/All Page
APPLICATION·DESIGN