Avia Asia-IM聊天工具-UI设计

我要开发同款
黄海燕2025年07月17日
20阅读
所属分类Sketch、UE、UI、APPUI设计

作品详情

视觉风格定位设计:结合 Avia Asia 作为 IM 聊天工具 “便捷、友好、高效沟通” 的核心属性,确定视觉关键词(如清新简约、轻松活泼、国际化)。主色调选用柔和的浅蓝色(传递友好、沟通感)搭配白色(营造简洁清爽的氛围),辅助色采用绿色(表示在线、消息已读)和橙色(用于新消息提醒、未读标识),中性色以不同深度的灰色区分信息层级(聊天背景、文字、边框);字体选择圆润易读的无衬线字体(如 Roboto、苹方),标题与昵称采用稍粗字重,聊天内容字体保持舒适字号,明确字体层级(APP 名称、聊天列表标题、消息内容、时间戳);图标系统采用线性圆角风格,线条流畅柔和,涵盖功能入口(聊天、联系人、发现、我的)、消息状态(发送中、已送达、已读)、操作按钮(发送、表情、语音、文件)等,契合 IM 工具的轻松沟通场景。​页面布局与元素设计:基于信息架构(聊天列表、聊天详情、联系人、发现页、个人中心等模块)设计布局。聊天列表页采用卡片式布局,每个列表项包含用户头像(圆形展示,带在线状态 indicator)、昵称、最新消息预览(单行省略)、消息时间与未读数量红点,支持下拉刷新与滑动操作(删除、置顶、标为已读);聊天详情页采用 “顶部导航 + 消息区域 + 输入区域” 布局,顶部显示对方头像、昵称与在线状态,消息区域按时间轴排列气泡,己方消息气泡为浅蓝底色居右,对方消息为浅灰底色居左,气泡内包含文字、表情、图片或文件预览,时间分隔线按时间段划分消息;联系人页采用 “搜索栏 + 分组列表” 布局,顶部搜索栏支持模糊搜索,下方按字母分组展示联系人,每组包含分组名与联系人列表,联系人项显示头像、昵称与备注信息;发现页采用网格或列表混合布局,展示热门话题、群聊推荐、小程序入口等,每个入口包含图标与名称;个人中心页采用上下分区,上部展示个人头像、昵称、签名与二维码,下部为功能选项列表(设置、隐私、帮助等),选项包含图标与文字。
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论