?? 简洁的界面怎么样让用户觉得很有细节?- 亚博体育充值策划- 福建站长站 亚博体育充值,亚博娱乐官方网首页,亚搏体育官网
福建网址 | 会员中心 | 我要投稿 | RSS
您当前的位置:首页?>?亚博娱乐官方网首页?>?亚博体育充值策划

简洁的界面怎么样让用户觉得很有细节?

时间:2015-04-16 21:13:57??来源:知乎网??评论:

minimalist-style-with-details-1

编者按:今天问题非常有代表性,该如何融合看似对立的简约与细节?怎样让简约的界面看起来不那么糙?来看@-eno-one-?老师分享的内部培训教程,全文都是易懂的大白话,外行人也能看得明白,希望对同学们有帮助。

正好,前段时间公司的内部培训就讲到这方面。我将内容整理一下。

之所以决定将这个问题作为公司内训的原因,因为发现一些同事们的设计粗糙,缺乏细节。而所谓设计的细节,又是一种很难用理性文字来表述清楚的东西。所以,我花了好几天时间去观察同事们做的东西,总结其中常犯的通病。本篇内容,我会尽量用最易懂的大白话来回答。外行人也能看得明白,就是我的目的。所以,希望下面的内容对你有帮助。

声明:

1. 粗略回答此题,此答案目的在于授予渔之技,而非展示鱼之貌,因此请阅读重点。所以,也请各路语言洁癖咬文嚼字美学鉴赏党慎入;

2. 本答案仅就一般规律进行总结,旨在传授个人经验于行业新人。如果你自认是行业老鸟或高手,请慎入。另外,请不要拿个例来进行反驳推翻。

让我们先来定义一下,在设计中,普通观看者,会把什么当作为细节。

图一:

图二:

在看完以上对比后,我先来问几个问题。

第一个问题:

各位可以根据自己对于「细节」二字的理解,从以上两张图中,选择出你认为更有「细节」的一图。

第二个问题:

不管你选择的是哪一个,请你说出你认为该图有「细节」的缘由。 先不急着给「细节」二字下结论,让我们再来看看另一组对比。而这次的对比,会复杂一些。

图三:

图四:

还是和之前一样。请大家来回答我几个问题。

第一个问题:

各位依然根据自己对于「细节」二字的理解,来选择出你们认为更有细节的是哪张图?

第二个问题:

请把你在前图中,总结出的对于「细节」的原因,套用到现在这两张图中来,看看你所定义的产生「细节」的原因,是否依然存在?

现在,我就来将大家看到前面几张图时的心理活动进行一个还原。

20150201084045

在这样两张对比中,大多数人会认为第二个「我」字更有细节。这里的细节感来自于画面中的装饰性元素(投影)。

一张图,我们的视觉能够在上面停留的点或者时间,相对来说越多越久,我们的心理感受便会认为这张图越有细节。

就拿上面两张图来说,第一张图,我们在看过之后,大约仅零点一秒不到的时间,就可以反应出,图中只有一个汉字而已。而这时候,我们的视觉与大脑会立刻做出后面两种反应中的一个。

第一种反应,我们会立刻在画面中去寻找可以供我们观看的第二个元素。如果找不到,那么我们就会立刻将注意力从画面上转移。

而第二种反应,是我们会立刻从画面上转移注意力,不再观看了,因为没有可以看的内容。

接下来,我还是通过图例的方式,来让大家感受一下装饰性元素对于细节感的影响。

图五:

上图,是一个按钮。

是一个没有任何设计装饰的按钮,这个按钮以最直白的汉字为表现形式。

而接下来,大家看到的图六,是增加了起伏、投影、亚克力质感等多种装饰性手法的按钮。

大家可以自己感受一下,哪一个会让我们感觉更有细节。

图六:

还是让我们结合之前所说的,视觉停留时间的问题。

第一个按钮,我们看到之后,大脑会立刻做出反应,这是两个汉字而已,接下来,我们会开始主动寻找第二个视觉停留点。这时候,我们会注意到灰色的底色,再接下来,我们有可能会注意到深灰色的文字。但是,当我们把这一切全部都观察结束后,当我们无法再从画面中找到可供观看的点时,我们便会转移视线。

而第二个拟物设计的按钮。我们第一眼会看到文字,接下来看到的是灰色底色,再接下来看到的是凸起的按钮,倒角弧边,模仿亚克力质感的光影关系,文字下方的叠加投影等等。由于有更多的装饰性元素,所以,我们的视线会比第一张图停留时间更长,我们也会认为第二张图更有细节。 以上,是产生细节感的第一个原因。

我们视觉的停留时间,决定了我们是否会认为画面更具有细节。而增加画面的装饰元素,是增强细节的一个手段之一。

接下来,开始分析我们在前面看到的第二组对比图。

这两组对比图,都是画面复杂且杂乱的。结合我们上面所说,画面里的内容都是丰富的。这些丰富的内容,不管是不是来自于人为的设计,都可以使得我们的视觉在画面中停留很长时间。

但是,我相信会有很多人会认为第二副更细节感。

而第二张图的细节感,来自于画面的构图(中轴线式)。

这样的构图方式使得本来色彩与物件杂乱的画面,增添了一点规则感。而我们所认为的细节,其实就来自于规则感。

第一张图,虽然画面中有很多内容可供观看,但是,这些内容,无论是摆放的位置,还是色调,都是杂乱的。所以,即便有很多内容可供观看,杂乱的布局会影响观看者的情绪,使得观看者不愿多看下去了。 而第二张图。虽也是杂乱的色彩与物件,但是,由于有了中轴线式的对称构图。可以人为的,使得观看者的视觉疲劳降低。先看整体,再看左边,接着再看右边。人的视觉活动被构图形式引导。所以,细节感便来自于此。

以上,是两个基础的测试环节。其实,我已经把产生「细节」的两大要素告诉各位了。

画面中的装饰元素进行规则规律的出现(摆放),是使得观看者产生细节感的另一个原因。

回到本题。

简洁的界面怎么样让用户觉得很有细节?

在前面,我提到过,装饰性元素会让画面有细节感。但是,这些装饰元素的堆砌,与简洁其实并不冲突。

我们还是来看图例。

图七:

图八:

上面两组对比。如果仅仅从所谓的「简洁」的角度出发来看,明显是第一张图更加简洁。但是,我们不会认为第一张图比第二张图更有细节。

所以说,装饰设计的细节,与简洁之间是没有关系的。

有些设计,之所以给人感觉既简洁,也有细节。是因为设计元素在画面中高度统一和谐。

由于问的是界面设计,所以,后面的列子,我就以界面设计来做举例。

上个月,我很想找一款用来写日记的APP。找了很久很久,也看到不少用户推荐的应用。可是下载完,打开后,我就不想再开第二次。

因为界面设计的太粗糙。我感觉将我的心情用那样的界面应用记录下来,是对自己情绪的不负责任。

图九:

我需要的APP其实很简单,简洁,易用,可以多平台同步。能够插入图片与音频视频。

可是,下载后的一些应用。

图十:

设计粗糙。粗糙来自于哪里?来自于元素的不和谐。低幼化的字体,将整个界面的设计分拉低。

简洁,但具有细节的设计。是指所出现的元素和谐统一。

即便是装饰性的设计,也是符合整个画面基调,不会出现违和感的元素(色彩、字体、图形等)。

上面的图十,即便简洁,但是却有一种山寨感,就是因为元素(文字的字体)与画面风格不统一。商务感的灰色背景与虚线,却搭配上了低幼感的字体。

赞一个
返回首页
返回首页
上一篇: 什么是网络互动营销?网络互动营销是什么? 下一篇: 新手站长怎么快速增加外链

最新图文
论坛时代的落幕:松松论坛宣布正式关站
论坛时代的落幕:松松论坛宣布正式关站
他们利用信息差来赚钱,你其实也能学会!
他们利用信息差来赚钱,你其实也能学会!
站长推荐