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

简洁的界面怎么样让用户觉得很有细节？ YY 一下：闲逛知乎，发现这样一个有意思的问题，特来分享给大家，相信很多业内人士都对 这个话题感兴趣。答案中的大神说，简洁其实是画面布局的规则，画面高度和谐统一便是 简洁；细节则是日常积累的个人素材库，素材多了便可以有更多丰富多彩的细节 —— 这边是 简洁而有细节。绕过来了没？还没 get 到的大伙们没关系，以下跟着大神感受一下什么叫简洁 而细节，前方多图慎入！ 以下是 @eno-one 的答案（目前得票最高 389 ）： 正好，前段时间公司的内部培训就讲到这方面。我将内容整理一下，来答你。 之所以决定将这个问题作为公司内训的原因，因为发现一些同事们的设计粗糙，缺乏细节。而所谓 设计的细节，又是一种很难用理性文字来表述清楚的东西。所以，我花了好几天时间去观察同事们 做的东西，总结其中常犯的通病。本答案内容，我会尽量用最易懂的大白话来回答。外行人也能看 得明白，就是我的目的。所以，希望下面的内容对你有帮助。 声明： 1. 粗略回答此题，此答案目的在于授予渔之技，而非展示鱼之貌，因此请阅读重点。所以，也请各 路语言洁癖咬文嚼字美学鉴赏党慎入； 2. 本答案仅就一般规律进行总结，旨在传授个人经验于行业新人。如果你自认是行业老鸟或高手， 请慎入。另外，请不要拿个例来进行反驳推翻。 3. 重点部分已加粗。 一、我们所说的细节是什么 让我们先来定义一下，在设计中，普通观看者，会把什么当作为细节。 图一： 图二 ： 在看完以上对比后，我先来问几个问题。 第一个问题： 各位可以根据自己对于「细节」二字的理解，从以上两张图中，选择出你认为更有「细节」的一图 。 第二个问题： 不管你选择的是哪一个，请你说出你认为该图有「细节」的缘由。 先不急着给「细节」二字下结论 ，让我们再来看看另一组对比。而这次的对比，会复杂一些。 图三： 图四： 还是和之前一样。请大家来回答我几个问题。 第一个问题： 各位依然根据自己对于「细节」二字的理解，来选择出你们认为更有细节的是哪张图？ 第二个问题： 请把你在前图中，总结出的对于「细节」的原因，套用到现在这两张图中来，看看你所定义的产 生「细节」的原因，是否依然存在？ 现在，我就来将大家看到前面几张图时的心理活动进行一个还原。 第一组对比图： 在这样两张对比中，大多数人会认为第二个「我」字更有细节。这里的细节感来自于画面中的装饰 性元素（投影）。 一张图，我们的视觉能够在上面停留的点或者时间，相对来说越多越久，我们的心理感受便会认为 这张图越有细节。 就拿上面两张图来说，第一张图，我们在看过之后，大约仅零点一秒不到的时间，就可以反应出， 图中只有一个汉字而已。而这时候，我们的视觉与大脑会立刻做出后面两种反应中的一个。 第一种反应，我们会立刻在画面中去寻找可以供我们观看的第二个元素。如果找不到，那么我们就 会立刻将注意力从画面上转移。 而第二种反应，是我们会立刻从画面上转移注意力，不再观看了，因为没有可以看的内容。 接下来，我还是通过图例的方式，来让大家感受一下装饰性元素对于细节感的影响。 图五： 上图，是一个按钮。 是一个没有任何设计装饰的按钮，这个按钮以最直白的汉字为表现形式。 而接下来，大家看到的图六，是增加了起伏、投影、亚克力质感等多种装饰性手法的按钮。 大家可以自己感受一下，哪一个会让我们感觉更有细节。 图六： 还是让我们结合之前所说的，视觉停留时间的问题。 第一个按钮，我们看到之后，大脑会立刻做出反应，这是两个汉字而已，接下来，我们会开始主动 寻找第二个视觉停留点。这时候，我们会注意到灰色的底色，再接下来，我们有可能会注意到深灰 色的文字。但是，当我们把这一切全部都观察结束后，当我们无法再从画面中找到可供观看的点时 ，我们便会转移视线。 而第二个拟物设计的按钮。我们第一眼会看到文字，接下来看到的是灰色底色，再接下来看到的是 凸起的按钮，倒角弧边，模仿亚克力质感的光影关系，文字下方的叠加投影等等。由于有更多的装 饰性元素，所以，我们的视线会比第一张图停留时间更长，我们也会认为第二张图更有细节。 以上 ，是产生细节感的第一个原因。 我们视觉的停留时间，决定了我们是否会认为画面更具有细节。而增加画面的装饰元素，是增强细 节的一个手段之一。 接下来，开始分析我们在前面看到的第二组对比图。 这两组对比