界面布局中的“极简主义”

2019-02-16 - 界面布局 界面布局优化 极简主义

策划.jpg

图片来源图虫:已授站长之家使用

站长之家注:本文由作者王M争(微信号:Wang-Michael-Zheng)授权站长之家发布,未经原作者同意请勿转载。

前段时间有一个朋友微信问我有没有看到过哪款产品把搜索功能放在界面中间的,然后给我发了一张原型图。我第一眼看到这个原型图就觉得界面的信息布局很乱,像是把两三个页面的内容强行塞到一个页面。

界面里信息太多不知道怎么布局,我相信这个问题大家在日常工作也经常会遇到。内容获取难度的降低,意味着内容筛选难度的提高。产品不断的迭代,功能越来越多。如何使产品避免在界面布局上越来越臃肿?——“极简主义”或许是这个问题的答案。

什么是极简主义?从字面上理解:极致简约。设计上的简约可以分为两种:内容简约形式简约。以上面的那个例子来说,搜索功能是内容,搜索框是搜索功能的展示形式。最近腾讯推出了新的产品:MOO音乐,所以我这篇文章正好借着分析这款产品来聊一聊界面布局中的极简主义。


内容简约

我们给一个页面做简化,第一步应该确定界面中每一个元素存在的必要性。界面中元素那么多,但并不是每一个元素都有存在的必要,存在不一定合理。弄清楚界面中每一个元素的实际作用,进行评估,对于一些作用有限的纯装饰性元素,为了界面的简洁,我们可以删除。

1)旋转唱片

几款常用的音乐类应用播放界面的主体都是一个旋转的唱片,而MOO音乐直接去掉了这个唱片。为什么?因为这个“唱片”占据了界面大约一半的空间,导致切换歌曲、调整播放进度、查看歌词/歌手/专辑分享这些常用功能必须在剩下的空间里排布,显得很拥挤。

去除这个虚拟的“唱片”给我们带来不仅仅是视觉上的轻量感,更意味着易用性上提升。用户在MOO音乐中切换歌曲、调整播放进度、返回上一级页面等都可以通过滑动手势来完成。并且它是几款音乐产品中,唯一一个支持上下滑动切换歌曲的,网易云音乐是左右滑动切换歌曲,而QQ音乐直接不支持,用户必须点击才能切换歌曲。我在之前的文章用户体验之点击和滑动也提到过,滑动手势比点击更容易受到用户的青睐。

当然可能会有人反驳,你看网易云音乐也是有唱片,但是它还是支持滑动的。脱离手指落点去谈手势都是耍流氓。网易云音乐中手指落点在唱片内是切换歌曲,落点在唱片外是返回上一级页面,落点稍有不慎就会造成误操作。而MOO音乐是上下滑动切换歌曲,左滑动返回上一界面。手指落点更模糊,用户也就可以减少找位置的时间,用户体验更好。

此外网易云音乐中用户要播放/暂停歌曲必须点击播放/暂停按钮,而MOO音乐中你只要点击屏幕中任何位置就可以完成这一操作。为什么MOO音乐可以这么任性?因为空间大,不怕用户会误操作。

2)去线化

去线化设计是极简主义的一大特征。在MOO音乐中,我没有找到一条分割线。要知道为什么MOO音乐可以选择去除分割线,我们首先要弄清楚分割线在界面布局中到底起什么作用。分割线主要是帮助用户区分界面中不同级别和维度的内容,完成信息层级的构建。

分割线可以分为两种:通栏分割线非通栏分割线。通栏分割线顾名思义就是指分割线贯穿整个屏幕,而非通栏分割线一般会留有缺口。要了解这俩的区别,我们可以看虎扑,虎扑之前的版本就是通栏分割线,而最新的版本中改成了非通栏分割线。

通栏分割线因为“分割”了整个屏幕,所以在内容区分上更加的明显,更能表现不同的模块之间的独立性。但是它的缺点在于线条的存在会阻碍用户的浏览视线,影响信息的获取效率。

处处留白,外贸网站转化率反而变高?

外贸网站设计留白时兼顾网页布局均衡,会注意设计元素之间的联系性,并不会一味留白。

APP开发产品策划:消息系统设计有哪些注意之处

APP开发产品而言,消息系统都是一个必不可少的功能模块,其核心目的是让产品直接与用户产生交互

移动端网站设计:图文和按钮的布局方法

今天给大家一起学习移动端网站UI设计过程中的视觉布局方法,只有合适的布局没有对错的布局。...