新版微博App聊天界面的优化设计项目总结
发布时间：2016-10-11 16:45:34 作者：佚名 
我要评论
我要评论在布局上，国内主流IM产品的区域划分、从属关系非常明显，左侧区域就是他人态内容，右侧就是主人态内容，标杆产品微信和手Q都培养了大批的用户习惯 ，那么我们能做些什么?视觉上是如何处理的?下面我们来聊聊新版微博App聊天界面的优化设计项目
1. 横轴布局的变化
在保证内容显示的基础上，收缩了空间，调整文字内容的最大宽度，文字与气泡的间距，而这节约出来的空间让界面更紧凑，区域划分更加明显，而这些间距关系变化也充分利用了格式塔原理的相似性、接近性和对称性，让界面单位和个体的层级不被破坏性…
△ 横轴变化
2. 纵轴布局的变化
间距关系从一种新增至两种，增强他人态与主人态之间对话内容的间距关系划分，强化了气泡的纵向分组，进一步强化从属关系。
△ 纵轴变化
单位模块
单位模块主要都是一些显示效果问题，例如，图片太小、LBS识别度低、红包太弱等…如下图所示：
△ 旧方案
1. 合理的图片尺寸
当图片与气泡最大宽度呈黄金分割比例之时，既不会出现加载效率和流程性问题，又能保证一定的舒适度。
2. 增强LBS的可用性
我们加强了LBS信息显示和识别度，让用户在对话页就能获取到相关地理位置信息，让LBS的可用性和实际场景更符合。
3. 红包体验升级
强化了红包的显示效果，并使之更具中国特色。
总结
我们这次优化的目标是思考能为用户解决什么问题?核心是聚焦对话。细节的深度挖掘打磨、布局梳理、强调互动性等等…所要传达的视觉表现都是建立在这个目标之上。
多角度，不同因素综合考虑，在美感与实用性中寻找平衡，合理的运用一些设计法则，与实际用户场景结合，能让界面变得更加舒适、可靠。
相关文章
说到相机画幅，估计平时听到最多的可能就是全画幅与半画幅了，以至于不少人认为中画幅比全画幅要小，为了避免这种常识性错误，这篇文章就来和大家说说相机的不同画幅，所谓2025-04-07
4纸和A5纸因其尺寸适中，使用尤为广泛,但你知道它们之间有何区别吗？今天，就让我们一起来探讨这个话题2025-02-01
各类商务印刷品的尺寸怎么选? 印刷设计常用的尺寸纸张/克重都在这里了
日常经常印刷各种东西，哪些尺寸，纸张更合适呢？本文为大家整理了常用印刷尺寸，方便图文广告店、印企在日常接单生产中能够快速掌握客户关键性信息，详细请看下文介绍2024-02-10
现如今，证件照已成为我们生活中不可或缺的一部分,无论是求职应聘，还是入学注册，亦或是办理各种证件，都需要提交符合规定格式和要求的证件照，那么，这些证件照的尺寸和2024-02-10
平面设计是一个注重视觉效果的设计，简单的排版方式有时候不能满足视觉突出的效果，业务很难达到吸引用户的眼球，下面我们就来看看8个平面设计技巧分享2023-10-08
每个设计师都有自己最喜欢的设计软件，并把软件作为自己的第二语言，今天我们来推荐10款UI设计不可或缺的工具，详细请看下文介绍2023-10-08
夏日电影风怎么调色调色？夏天快到了，想要调节夏季电影风的画面，该怎么操作呢？下面我们就来看看适合夏季的柔和绿色调调色分享2023-04-02
什么是真RAW 什么是伪RAW? 简单说说真 RAW 和 伪RAW
随着索尼α7RV（ILCE-7RM5）正式发售，近期有不少网友跟我咨询索尼相机“无损压缩（M）”和“无损压缩（S）”RAW的问题，今天做一个统一答复2022-12-24
手机UI设计尺寸有哪些？作为新手在设计手机ui的页面的时候，发现自己设计的尺寸都很奇怪，如果能有元素尺寸介绍就好了，下面就来看看我们汇总的超全面的UI元素尺寸设置指南2021-08-06- 常用照片尺寸有哪几个？我们经常说一寸照片，二寸照片，这些照片的尺寸是怎么计算的？下面我们就来看看照片标准尺寸/像素对照表汇总2021-08-06
最新评论