0文章
0评论
0获赞

为什么你的介面设计看着很重?来看高手的解决方法!

7,683 0

王M争:「轻量化」是近两年来设计圈一个比较火的话题。什么是轻量化?从字面意思上来看「轻量」的反义词就是臃肿、拖沓,反映到产品设计中就是界面内容过载,操作步骤繁琐。如果非要用一个字来定义,那就是「多」,内容多,步骤多。

我们需要清楚,「多」来自于用户的主观感受,我们无法给出一个具体的数据指标来判定到底是不是「多」。用户会在什么时候觉得多呢?日常生活经验告诉我,当对方觉得你没用的时候,你就会显得多余。如果这个界面中的每一个功能对于用户来说都是高频操作,那么用户是不会嫌多的。所以「轻量化设计」的主要思路可以归纳为:在用户不需要你的时候不要出来瞎嘚瑟。

场景

问题来了:用户什么时候需要我?首先我们应该从功能层面入手,因为产品是一个个功能的组合体。页面内容臃肿问题的源头是功能过载,在这个问题上,很多设计师吐槽自己扮演的是一个背锅侠的角色。其实我也不想在这个页面里塞这么多东西,但是这些功能我们必须展示给用户,要不然用户都不知道还有这个功能。

要解决这个问题,我们需要引入「场景」的概念。什么是场景?我们可以将场景理解为「外部环境」。

外部环境影响用户的感知,感知决定了用户的行为。只有身处于特定的场景,用户的行为才会被触发。在有网场景下,用户启动网易云音乐,进入的是首页。在无网场景下,用户进入的是我的音乐。因为有网,用户「听新歌」行为的可能性更大,无网时通常听已经下载好的歌曲。

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

功能也是一样,用户需要这个功能,但并不是每一个场景都需要这个功能。有些比较冷门的功能,用户只有在特定的场景才会想起使用,那么我们就可以只在那个特定的场景中展示该功能。

我们看一下两款竞品的歌曲播放界面,可以很明显地发现,酷我音乐的界面更加简洁明了。当然你可能会说,那是因为酷狗音乐给用户提供了更多的功能。

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

其实并没有,两款产品提供的功能都是一样多的。只是酷我音乐做了场景化区分,以K歌功能为例,酷我音乐的处理方案是:当用户点击查看歌词的时候才会展示「K歌」的话筒图标,因为当用户查看歌词的时候,引导用户去K歌更加合适。

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

这个方案的确可以简化界面元素,但是也带来了另一个问题:如果用户不查看歌词,那就不知道原来还有k歌功能,无法给K歌功能做到有效的引流。的确如此,没有一个完美的设计方案,任何一个设计方案都无法做到可以兼顾各方的利益。设计师的作用就是尽可能去发现和解决界面中最主要的矛盾点,而不是所有的矛盾点。

我们再来看一个歌曲播放界面的例子,现在很多产品都提供了 AI 电台功能,所谓 AI 电台就是根据你的听歌记录,分析你的喜好,据此来播放你可能感兴趣的歌曲。我们之前听歌需要手动搜索相关信息,在搜索结果(歌曲、专辑、歌单等)里查找,AI 电台的出现大大节省了用户的操作步骤。那么我们来思考一个问题:与常规的场景相比,在 AI 电台里播放的歌曲,界面上我们应该做哪些改动?

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

AI 电台模式最大的区别就是随机性。因为这歌是根据你的喜好随机推荐的,你不知道会听到这首歌,也不知道这首歌后面有哪些歌。这个就导致了播放模式这个功能很鸡肋,虾米音乐的 AI 电台就没有提供切换播放模式功能。

  • 列表循环:我都不知道列表里有哪些歌曲,怎么循环?
  • 随机播放:现在不就是随机播放吗
  • 曲循环:这是唯一一个用户有需求的场景。

其实 AI 电台推荐的歌曲也是有歌单的,用户点击播放列表图标就可以看到。这里提供了切换歌曲模式的功能,让用户看到了播放列表才可以选择歌曲模式。

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

入口

当我们确定了功能的最适用场景,我们接下来的任务就是如何合理的设计功能的入口。

1. 入口分类

不同的层级的功能,在界面中的展示方式是不一样的。这里我们可以分为三类:常态类、更多类和隐藏类。

比较重要的功能一般都在界面中有常态的入口,而优先级比较低的功能,我们会选择使用临时视图来承载,入口放到「更多」按钮里,用户需要点击才能查看。

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

优先级最低的功能在界面中没有实体的入口,需要用户的手势来触发。例如,在抖音中,用户长按视频可以唤起三个功能:保存、收藏和不感兴趣。这三个功能抖音做得如此隐蔽,就是希望用户不去使用。

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

  • 保存:为什么保存到手机看?来抖音看吧。
  • 收藏:既然喜欢这个视频,为什么只收藏不转发一下,让更多人看到?
  • 不感兴趣:嗯……

2. 入口分类

哪怕是同一个功能,位于不同的场景,我们也要对入口样式做出调整。例如,在音频类产品中,为了方便用户在不同的场景都可以快速地进入播放界面,会在界面底部加上播放条。

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

但是我们也可以发现上图中企鹅FM播放条的空间利用率很低,有大面积的留白。那么到了二级页面,我们可以尝试修改播放条的样式,减少对界面内容的遮挡。

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

类似的处理方式还有淘宝,当用户在首页下滑一屏左右,那么底部栏原首页图标变成了火箭,用户点击火箭可以直接返回至顶部,不用额外新增一个浮动按钮作为入口。

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

总结

以上就是我个人对于「轻量化」设计的简单思考和总结,如果您有不同的意见或者看法,欢迎留言或者加群讨论。

欢迎关注作者的微信公众号:「王M争」

为什么你的介面设计看着很重?来看高手的解决方法!
为什么你的介面设计看着很重?来看高手的解决方法!

评论 (0)
请登录以参与评论。
立即登录

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

8,731 0

@菜心设计铺界面设计是一个很庞大的体系,具有很多原则,比如轻量、容错、清晰等等,其中包含了交互层面以及视觉层面等,今天我想单独把视觉剥离出来,来讲一讲我对界面设计「视觉层面」的理解与认知。

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

在我看来,界面设计的视觉层面主要可以分为三个维度来解析:信息传递、视觉美化、创意创新。

  • 信息传递是让用户看得明白,快速清晰地获取信息;
  • 视觉美化是让用户看得舒服,让界面足够美观;
  • 创新创意是让用户看得惊喜,看到一些不一样的创意点。

如下图:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

三个维度的目标如何实现呢?我提取了以下三个关键词:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

清晰、和谐、独特是我们要达成的目标,达成目标一定会有一些原理所在,而有了原理就会有具体的执行方法,所以后面的每一个知识点,我都会按照「设计目标、执行原理、执行方法」的逻辑给大家讲解,大纲如下:

清晰

  • 清晰-降噪-容器整合
  • 清晰-聚焦-局部放大

和谐

  • 和谐-呼应-颜色呼应
  • 和谐-节奏-变化对比
  • 和谐-饱满-负形缩减

独特

  • 独特-品牌延展-IP形象结合
  • 独特-事物本意-事物图形化

清晰

1. 清晰-降噪-容器整合
  • 设计目标:清晰
  • 执行原理:信息降噪
  • 执行方法:容器整合

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

当界面信息过于分散时,会对用户造成不必要的干扰,导致用户产生疑惑甚至直接离开界面。

作为设计师,要做的就是对信息进行整合,我们可以称之为信息减噪,目的就是让页面更加清晰,减少干扰。

这里我经常使用「容器整合法」来让内容更加清晰、聚焦。

当分散的内容装进一个「容器后」,就可以使内容聚焦在容器当中,让信息更加规整。而卡片就是一个很好的「容器」。

际案例:

在改版腾讯动漫个人中心的时候,头部就存在信息分散不聚焦的问题,四个视觉触点(绿色圈处)分散在四个角落,形成极大干扰。

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

这里我就采用了「卡片容器」的方法,将信息装进容器中,减少分散信息的干扰,使界面更加清晰、工整,效果如下:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

现在很多产品都在使用卡片化的布局,尤其是在信息数量、层级较多的时候,更加需要有容器将其规整起来,这样才会让界面保持不乱。

2. 清晰-聚焦-局部放
  • 设计目标:清晰
  • 执行原理:聚焦
  • 执行方法:局部放大

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

我们在平时做需求的时候,经常会遇到信息特别多,特别乱的时候,如果此时我们选择什么都想突出,最后的结果一定适得其反,什么都突出不了,这时候就需要我们选择一些内容来进行局部放大,可以让整体信息更加聚焦、清晰。

这种方法经常用在有数字展示的页面当中,比如下面这种页面:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

再比如,下面这个模块信息,如果「3」没有放大,整体的信息会让你眼花缭乱,我们看下对比:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

所以,大家在遇到有数字,且信息杂乱的时候,就可以采用局部放大的方式来使整体更加聚焦、清晰。

和谐

1. 和谐-呼应-颜色呼应

  • 设计目标:和谐
  • 执行原理:呼应
  • 执行方法:以颜色呼应为例

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

很多时候我们会觉得自己做的东西很不和谐,其中一个很重要的原因就是因为页面中没有贯穿的元素,也就是没有呼应,很常用的一个呼应的方法就是颜色呼应。

例如这个画面总看起来不够和谐,你会觉得绿色很突兀,就是因为颜色上没有呼应:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

而一旦你想办法,让绿色「事出有因」,比如取自眼镜的颜色:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

那么,突兀的问题解决了,和谐的目标也就实现了。

而刚才那个人中心的界面:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

们会发现,图标的颜色也是取自背景色,所以整体看起来才会如此和谐。

除了颜色呼应,还有很多呼应的方式,比如图形、图标风格等等,这里就不再举例了。

2. 和谐-节奏感-对比变化

  • 设计目标:和谐
  • 执行原理:节奏感
  • 执行方法:对比变化

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

对于音乐,节奏感是非常重要的,如果一段音乐一直是一个频率,那可能也算不上音乐了。

界面也是一样的,节奏感是让页面变得「和谐」的重要因素之一,如何做到呢?

我们在展示文字列表的时候,你觉得下面两种哪个更舒服些呢?

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

我猜你会觉得第二个舒服一些,因为它有变化,有节奏感,所以它和谐、舒适。

我们会发现很多产品首页带有封面图的列表都有很多种排法,例如1带多,12,22,23等等:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

就是为了防止每个模块过于重复,如果每个模块都是每排两张封面,一直下来:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

看起来会非常乏味。

3. 和谐-饱满-负形缩减

  • 设计目标:和谐
  • 执行原理:饱
  • 执行方法:负形缩减

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

在做图标或者字体的时候,经常要讲一个原则就是「饱满」,界面上每个「不能拆分的元素」都需要尽量做到饱满,比如图标,再比如下面这个信息组件

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

正文就属于不能拆分的单一原子,大家可能会问,这种信息不就是方方正正的一个信息块吗,怎么会不饱满呢,比如行间距过大:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

再比如,我在优化腾讯动漫信息流的时候,发现正文出现的表情远远大于文字,如下图:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

表情一旦出现,就会造成大量空隙(负形过大),导致整体不够饱满、和谐。

我们可以看下其他产品,表情和文字几乎都是一样的大小,他们都会尽量缩小负形空间(也就是空隙大小):

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

在这样的原则之下,优化后的效果如下:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

以上是关于和谐的几点方法。

独特

如果你的界面做到了清晰、和谐,在视觉层面就已经算是及格了,如果还能加上一点小创意,就可以让人眼前一亮。

如何能够做到独特?可以从两方面出发,一是品牌,二是内容本身含义。

1. 独特-品牌延展-吉祥物结合

  • 设计目标:独特
  • 执行原理:品牌延展
  • 执行方法:IP形象结合

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

从品牌出发,可以有很多方向,比如 logo,图形,品牌吉祥物等,下面以品牌吉祥物为例。

在做小说阅读器的时候,有一个设置选项是选择文字的背景颜色,选择控件是圆形,而品牌形象也偏圆形,此时就可以将圆形控件与形象相互结合:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

但是选择控件有两种状态,为了更加生动,就把形象正面时作为选择状态,而转过身作为非选择状态,大概效果如下:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

此创意已在腾讯动漫小说落地实现。

2. 独特-事物本意延展-事物图形化

  • 设计目标:独特
  • 执行原理:事物本意延展
  • 行方法:事物图形化

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

除了品牌,还可以根据事物本身的意思来延展图形,比如日间夜间模式的切换按钮,男女性别的切换按钮,都可以利用事物本身的含义来延展图形设计:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

此创意已在腾讯动漫个人中心模块落地。

再比如,弹幕的展示方式,就可以联想到电视机,再把电视机图形化,如下图:

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

此创意已经在腾讯动漫小说频道页实现。

这里需要注意下,有时候如果图形过于普通,可以配合动效来增加独特性,但一定要注意开发成本。

总结

界面设计是一个非常复杂的系统,今天单独拿出视觉层面和大家分享了一些具有普适性的原则和方法,全当抛砖引玉,希望能够启发出你的更多灵感。

欢迎关注作者的微信公众号:「菜心设计铺」

为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!
为什么你的介面看着不舒服?腾讯设计师从这 3 个维度优化设计!

评论 (0)
请登录以参与评论。
立即登录