专栏首页互联网杂技如何在“无设计”语境下打磨界面设计中的极致细节体验?

如何在“无设计”语境下打磨界面设计中的极致细节体验?

微博是一款典型的信息流产品,早期微博IM复用了信息流的一些设计,并且已经很久没做大的更新迭代,导致现有的设计与实际场景不符。为了让用户更自然的聚焦在对话体验之中,我们对现有界面进行了重新梳理。

如上图所示,在左侧旧方案上,“海淘”“音乐” 分享链接卡片就是刚提到复用信息流的卡片样式,视频、红包、音乐、文章…等等都分复用了这类卡片样式,这种样式占用大量空间,画面切割感强,容易打破会话,左右的从属关系弱并且多出一些无用信息。

在布局上,国内主流IM产品的区域划分、从属关系非常明显,左侧区域就是他人态内容,右侧就是主人态内容,标杆产品微信和手Q都培养了大批的用户习惯 ,那么我们能做些什么?视觉上是如何处理的?

我们这次的优化工作主要是从三个维度进行的:

图形元素:由点、线、面构成的一些基本图形的表达

界面布局:X轴和Y轴上个体图形和单位模块之间的间距、尺寸关系

单位模块:红包、名片、图片、地图、视频、音乐….

图形元素

先说下图形元素,因为气泡会大量的出现,所以我们着重说一下气泡,微博气泡有个比较明显的问题就是,气泡角过于尖锐并顶着用户头像,吸引无效注意力并让人产生不适感。

对比微信,微博气泡角不适感更强,主要有两个原因:

1.微信黑色文字最强,绿色气泡次之,背景最弱,它的明度是呈现逐层递减的,突出了文字,微博气泡蓝色背景最强,文字次之,背景最弱,这时气泡角的问题就变得特别明显。

2.第二个原因微信绿色气泡明度更高,更融背景,微博蓝色气泡的明度更低与背景反差更大。

怎么解决这个问题?我们做了一个简化了的气泡打磨过程,如下图:

从图1-2,我们先解决气泡角造型的不适问题,之前圆角过小且有对外指向性,显得生硬,我们加大了圆角角度,让整个气泡感更强,但该方案有个明显的问题,气泡角并没有指向头像。

从图2-3,调整气泡角指向问题,但该方案运用到图片、红包设计时我们发现,圆角不对称性让人觉得怪异,尤其是红包这种具有中国传统特色的设计时更加明显。

最终从图3-4,我们调整气泡角的位置,保护了圆角的对称性,同时让气泡角下弧线更加平滑与头像关联,从而降低了原气泡角过于激烈的视觉样式。

看看我们具体是如何调整的:

实际上图形打磨是个发现问题解决问题的过程,但它更像一个树状结构,每一像素变化都会带来图形指向、造型契合度、整体性不一样的感受,我们需要去平衡它们的关系,并选取最优方案,看看最终方案我们是如何去平衡圆角、气泡角、头像之间的关系的。

最终方案中,圆角大小为单行气泡四分之一高度,气泡与头像、气泡角与头像的间距都处于1个单位的间距,气泡角与圆角转角处,为2分之1单位刚好保护了圆角对称感不被破坏。

我们认为合适的圆角角度既能勾勒出曲线的柔美,又能保证形体的稳定,并且可以帮助用户将目光引向中心,突出对话内容。

这种经过深度打磨的图形能让界面显得更稳定、可靠。

界面布局

旧的界面布局有我们刚刚提到的画面切割感强,从属关系弱,空间利用率低等问题,从下图可能较为直观的对比出一些问题。

1、横轴布局的变化

在保证内容显示的基础上,收缩了空间,调整文字内容的最大宽度,文字与气泡的间距,而这节约出来的空间让界面更紧凑,区域划分更加明显,而这些间距关系变化也充分利用了格式塔原理的相似性、接近性和对称性,让界面单位和个体的层级不被破坏性…

2、纵轴布局的变化

间距关系从一种新至两种,增强他人态与主人态之间对话内容的间距关系划分,强化了气泡的纵向分组,进一步强化从属关系。

单位模块

单位模块主要都是一些显示效果问题,例如,图片太小、LBS识别度低、红包太弱等...如下图所示:

1、合理的图片尺寸

当图片与气泡最大宽度呈黄金分割比例之时,既不会出现加载效率和流程性问题,又能保证一定的舒适度。

2、增强LBS的可用性

我们加强了LBS信息显示和识别度,让用户在对话页就能获取到相关地理位置信息,让LBS的可用性和实际场景更符合。

3、红包体验升级

强化了红包的显示效果,并使之更具中国特色。

总结

我们这次优化的目标是思考能为用户解决什么问题?核心是聚焦对话。细节的深度挖掘打磨、布局梳理、强调互动性等等...所要传达的视觉表现都是建立在这个目标之上。

多角度,不同因素综合考虑,在美感与实用性中寻找平衡,合理的运用一些设计法则,与实际用户场景结合,能让界面变得更加舒适、可靠。

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-11-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mysql命令之对用户,库,表操作--基础教程(三)

    创建用户: 进入在root用户进行操作: CREATE USER 'dog'@'localhost' IDENTIFIED BY '123456'; 授权...

    前朝楚水
  • 经验分享 | 如何更好地推动产品及交互需求顺利落地?

    我很喜欢这样的一句话:“在做设计的时候,最大的阻力不是用户相关问题,而是内部的认知、利益点、看待事情方式的不一致。”;尤其是在推动产品及交互需求落地的过程中,感...

    前朝楚水
  • 设计优秀app的秘密

    好的产品往往做好了两点:功能和细节设计。功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往...

    前朝楚水
  • 气泡图(bubble)

    今天跟大家分享的是气泡图! ▽▼▽ EXCEL制作的气泡图需要三个序列数据,除了通常必须的X轴、Y轴之外,还需要第三列数据,用来指定气泡面积大小。 ●●●●● ...

    数据小磨坊
  • Android Q之气泡弹窗的实现示例

    在Android Q中,用户可以借助气泡,轻松地在设备上任何位置进行多任务处理。气泡内置于“通知”系统中,它会浮动在其他应用的上层,并会跟随用户的移动而移动到屏...

    砸漏
  • 微信也有花式聊天气泡了、彩色昵称了!已放弃QQ了

    IT小侠公社
  • 深入理解计算机系统:进程

    ? 导语:这是篇读书笔记,每次重读CSAPP都有新的认知,尤其是在进入了后台通道之后才感受到每天和进程打交道的感觉是如此深刻。 0x00 What is Pr...

    腾讯技术工程官方号
  • 用户采用:你的Salesforce成功路径

    我经常听到有人说:“我们不需要用户采用计划,我们的项目运转良好并且很容易实施。”尽管你是这样认为的,但还是让我来分享下为什么用户采用对于Salesforce项目...

    臭豆腐
  • Oracle 与 MySQL 的差异分析(7):日期和时间函数

    Oracle 中的日期类型是带有时分秒的,获取当前时间可以用sysdate,如果要获得更高的精度可以用 systimestamp。查出来的结果的格式受系...

    聚沙成塔
  • k-d tree算法的研究

    作者:51CTO博主 RaySaint 先前一篇文章《SIFT算法研究》讲了讲SIFT特征具体是如何检测和描述的,其中也提到了SIFT常见的一个用途就是物体识...

    机器学习AI算法工程

扫码关注云+社区

领取腾讯云代金券