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

terry07 · 发表于 2017-1-1 14:36:44

编者按：今天问题非常有代表性，该如何融合看似对立的简约与细节？怎样让简约的界面看起来不那么糙？来看@-eno-one- 老师分享的内部培训教程，全文都是易懂的大白话，外行人也能看得明白，希望对同学们有帮助。
正好，前段时间公司的内部培训就讲到这方面。我将内容整理一下。
之所以决定将这个问题作为公司内训的原因，因为发现一些同事们的设计粗糙，缺乏细节。而所谓设计的细节，又是一种很难用理性文字来表述清楚的东西。所以，我花了好几天时间去观察同事们做的东西，总结其中常犯的通病。本篇内容，我会尽量用最易懂的大白话来回答。外行人也能看得明白，就是我的目的。所以，希望下面的内容对你有帮助。
声明：

1. 粗略回答此题，此答案目的在于授予渔之技，而非展示鱼之貌，因此请阅读重点。所以，也请各路语言洁癖咬文嚼字美学鉴赏党慎入；
2. 本答案仅就一般规律进行总结，旨在传授个人经验于行业新人。如果你自认是行业老鸟或高手，请慎入。另外，请不要拿个例来进行反驳推翻。

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

图二：

在看完以上对比后，我先来问几个问题。
第一个问题：

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

第二个问题：

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

图三：

图四：

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

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

第二个问题：

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

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

在这样两张对比中，大多数人会认为第二个「我」字更有细节。这里的细节感来自于画面中的装饰性元素（投影）。
一张图，我们的视觉能够在上面停留的点或者时间，相对来说越多越久，我们的心理感受便会认为这张图越有细节。
就拿上面两张图来说，第一张图，我们在看过之后，大约仅零点一秒不到的时间，就可以反应出，图中只有一个汉字而已。而这时候，我们的视觉与大脑会立刻做出后面两种反应中的一个。
第一种反应，我们会立刻在画面中去寻找可以供我们观看的第二个元素。如果找不到，那么我们就会立刻将注意力从画面上转移。
而第二种反应，是我们会立刻从画面上转移注意力，不再观看了，因为没有可以看的内容。
接下来，我还是通过图例的方式，来让大家感受一下装饰性元素对于细节感的影响。
图五：

上图，是一个按钮。
是一个没有任何设计装饰的按钮，这个按钮以最直白的汉字为表现形式。
而接下来，大家看到的图六，是增加了起伏、投影、亚克力质感等多种装饰性手法的按钮。
大家可以自己感受一下，哪一个会让我们感觉更有细节。
图六：

还是让我们结合之前所说的，视觉停留时间的问题。
第一个按钮，我们看到之后，大脑会立刻做出反应，这是两个汉字而已，接下来，我们会开始主动寻找第二个视觉停留点。这时候，我们会注意到灰色的底色，再接下来，我们有可能会注意到深灰色的文字。但是，当我们把这一切全部都观察结束后，当我们无法再从画面中找到可供观看的点时，我们便会转移视线。
而第二个拟物设计的按钮。我们第一眼会看到文字，接下来看到的是灰色底色，再接下来看到的是凸起的按钮，倒角弧边，模仿亚克力质感的光影关系，文字下方的叠加投影等等。由于有更多的装饰性元素，所以，我们的视线会比第一张图停留时间更长，我们也会认为第二张图更有细节。以上，是产生细节感的第一个原因。
我们视觉的停留时间，决定了我们是否会认为画面更具有细节。而增加画面的装饰元素，是增强细节的一个手段之一。
注：相关网站建设技巧阅读请移步到建站教程频道。

		自动登录	找回密码
密码			立即注册

[建站策划] 简洁的界面怎么样让用户觉得很有细节？

相关帖子