生活在地球上的我们，每时每刻其实都在感受着重力的存在。除了物理层面的影响，重力是否会改变我们对于视觉画面的认知呢？又或者说，物理学中经常听到的重力概念，和设计中的构图、排版又存在着怎样的关联呢？
我们或许能够从格式塔学派对认知心理学的研究里，寻找到一些蛛丝马迹。
人们的大脑总是会去脑补眼前看到的事物。就像我们看到的这三个被遮挡住的圆形图案，位于中心的倒三角虽然没有实际出现，但我们确实认为它是存在的对吧。
视觉本身是很容易被周围环境影响的，就像我们现在看到的这个画面。如果忽略掉空间和透视的话，你还会觉得右侧的竖线更高吗？
而实际上的情况是，左边的竖线高度要远远高于右边的竖线高度。
再看这个例子，两侧位于中央的白色球形，它们之间，谁看起来更大，谁又看起来更小？也许有的朋友会说左边更大，这个答案是没错的，但它也仅仅是看起来更大而已。
如果我们在画面中拉出两条辅助线，我们就会发现，原本右边看起来更小的圆球，要比左边的圆球更大。
通过刚刚的几个小测试，相信大家已经对于用眼睛的判断能力有了一些认识了，是不是有一种眼见不一定为实的感觉？视觉重力原则，其实就是建立在这样的认知基础之上的。我们大脑所认为的重心或平衡感，和真实的情况，往往并不相同。
在做版式设计的时候，我们的构图越接近重心的平稳状态，就越会激发和谐的美感。因为重力在自然界中是再平常不过的现象了，生活在这样环境中的我们，自然也会有这种审美上的倾向了。
我们来看这个例子，这张纸最稳定的位置在哪里呢？答案是它的正中心。
我们把信息添加在页面的中心位置，现在它看起来更平稳了吗？然而并没有，可问题出在哪？一定是我们没有把文字摆正吧？上方的区域（a），看起来要比下方的区域（b）面积更大一些，真的是这样么？
可实际上，文字确实是在页面的正中心位置上了，这同样我们的眼睛在作怪。
所以为了抵消视觉上的这种坠落感，我们需要将文字略微向上移动，这样我们看这段文字才是真正居中的。
正向
我们再举个例子，这是一个数字 8，我们来仔细观察一下它的造型，顶部与底部的负空间看起来是一样大的对吗？
垂直翻转
而事实上并不是这样的，通过将它倒置，我们就会更明显的看出来，其实为了抵消人眼的错觉，我们在做字的时候，需要将上面做的更小，底部做的更大一些。
这是两个完全等大的黑色圆形，但它在视觉上其实并不是平衡的，人们的眼睛会觉得右边更轻，这虽然没有顶部和底部那么明显，但也确实存在。那么解决的方法就是将左边的圆形略微缩小一些，现在这个页面看起来平衡多了。我们总是会下意识的认为左侧要更重要些。
⇧ 画作：The Creation of Adam
看这幅画，很明显左侧的内容要比右侧更少，可如果我们将它镜像翻转过来，它原版的平衡感就会被打破了。人们更多会认为左边看起来更重了。
同样的，在我们的汉字设计中，也会应用这种做法，比如林字的两个木字旁，就并不是左右等大的，因为这样在视觉上会显得不平衡。所以需要将左侧的偏旁削弱，才会在视觉上看起来更加和谐。
具有左右结构的汉字，基本上都遵循了这个原则。形成了左收右放的构成样式。
汉字“田”的中心十字笔画，为了看起来是居中的感觉，实际上也特地微调了文字的重心部分。利用辅助线，我们会更容易察觉到这其中的变化。可以看到，横笔部分，向上移动了很多。竖笔部分也相应向左做了位置上的调整。
人们常说，细节决定成败。也正是这些不起眼的细节，拉开了专业平面设计和业余设计师之间的距离。相信看到这里的小伙伴们，应该已经领略到了视觉重力原则在设计中的重要地位了。那么光知道有这么一回事儿可不行，我们更应该去了解它的特点，以及尝试着去掌握它。
我们看到的所有图像，无论抽象的还是具象的，其实都是具有重量感的。那么都有哪些因素会影响到视觉重力的大小呢？找到视觉重心之后，我们又要怎样去利用它们？接下来我们就一起去寻找相应的答案。
色彩对视觉重量有影响吗？我们看画面中的这两个图形，是不是很明显感觉到右边更重呢？黄色的色相本身的视觉明度就要比蓝色更浅，所以我们会感觉到右边更重。
为了抵消颜色对视觉重量的影响，我们需要降低蓝色的面积，这样才能让两个图形看起来是平衡的。
那么换成具象的物体呢？道理其实也是一样的。我们依然可以把它们看成是纯粹的色彩。经过这一步分析，我们是不是发现了左侧红色的苹果，显然会更深和更重呢？
所以，为了保持左右的平衡感，我们也需要把红色相应的缩小一些。
我们看这两个图形，它们谁更重？左侧的八边形，它的页面边缘更复杂，角度变化也更多，所以承载了更多的信息量，相比正方形更简洁的造型来说，左侧会更重。
那么换成大小相同的秤砣和棉花呢？谁更重？几乎没悬念了，棉花完败。当具象的物体出现时，结合以往的视觉经验后，谁更重谁更轻也就很显而易见了。
对齐也需要考虑到视觉重力吗？如果你也有这种疑问的话，接着往下看。这是两个马克杯，它们虽然造型类似，但是色彩却不同。很显然蓝色的版本会更重，而在位置上更靠近左边，也就显得更重了。
所以，为了抵消这种重量上的轻微不平稳，我们可以把颜色更浅的橙色放到左侧的位置上。这样虽然色彩上橙色更轻，可由于它的位置更重要，也就不会给人不平稳的感觉了。
那么构图基本确定之后，我们为这两个杯子搭配上一段文案信息。这样两个商品的展示也就做完了。你发现这两个组合出现什么问题了吗？当文字信息加入到页面之后，是不是觉得哪里不对呢？
电脑是看不懂图像的，所以用到对齐命令时，它们会围绕着像素的边缘去做对齐。可问题在于，并不是所有图片的视觉重心都刚好在方框的中间位置。
所以我们要去修改的地方，也正是这个视觉重心的对齐位置。现在再看这两个组合，是不是感觉和谐了很多。
当西文和汉字相互组合时，需不需要考虑到视觉重心的对齐呢？我们看，如果仅仅是依据边缘进行对齐的话，就会让西文部分看上去很小。而正确的做法是需要我们忽略掉一些文字边缘的。
分别找到两组文字的视觉大小。只有这样，才能让两组文字在视觉面积上达到相同的重量。当然，文字字重部分也是需要做出相应匹配。我们看，经过调整后，中西文的搭配明显要更加平稳了。
但也是有例外的，比如这个例子，明明是按照之前的调整方式，仅仅是更换了文字的内容。为什么它看上去依然没有对齐呢？这里的问题其实出现在西文部分，有些单词组合，字母并没有占据下伸部的空间。所以在整体上，就会显得有高低的错落感。
这种情况，当然就需要重新去匹配了。解决方法依然是对齐文字之间的视觉重心部分。所以，方法并不是死记硬背的。我们需要根据不同的情况去做出有针对性的调整。
接下来我们来做一个包装的案例。它是一个螃蟹口味的海鲜调味料。首先，我们选择这个手绘的螃蟹作为这个画面中的视觉焦点，把它放在版面的中心位置。经过前面的学习，我们知道了，选择对齐元素时，我们要忽略掉那些细枝末节的部分，才能找到真正的视觉中心位置。
找到了视觉重心后，我们把它安排到页面真正的中央部位。顶部和底部的空间，我们就继续调整其他的信息。首先从层级上来说，在页面顶部我们需要一个相对第二大面积的文字组合。
而其余的元素，围绕着底部的负空间去排列就可以了，到这里这个包装也就做完了。
无论是版式设计，还是绘画摄影，构图从来都是一个讲究的事情。想要做一版在视觉上平稳的版面，最简单的办法，就是把主体固定在页面的中心位置。可是这种对称的设计，由于太过完美，也多少会给人一种单调和乏味的印象。那么有没有一种既让页面保持平衡，又能在结构上做出变化的设计方法呢？这就引出了我们接下来的内容了。
这个案例，属于网页中会出现的广告页面。首先，如果我想要让版面达到平衡状态，就需要把主体的重心安排在页面的中央位置。
但是，为了让页面中加入更多信息，我们也不得不让主体向页面的一端靠拢，从而预留出足够的空间。
可这样就导致了页面的不平衡，左侧的文字重量并不能平衡整个版面。
其实，解决的办法也很简单，我们可以试着将主体略微移向页面的中心部分。这样一来，就实现了一种动态的平衡状态。
这背后的知识其实很简单，就是最基本的杠杆原理。如果天平两端并不平衡，那就让更重那个的靠近中心，更轻的远离中心。这样也就恢复到平衡状态了。
这同样是一个网页中会出现的广告页面。我们看，它都出现了哪些问题。版面中所有的元素都集中到了顶部，这就导致了页面底部重量过轻，顶部重量过重的极端对比。也就是我们俗称的头重脚轻。那么经过调整之后问题依然存在。过多的空白，会让人们感觉这个版面作品没有完成。所有的重量都集中到了版面的左侧，这依然是一个极端的构图。
正确的做法应该是怎样的呢？我们可以将重量最大的元素安排在中心位置。并且让其他元素以对称的样式排布。
当然，你也可以将信息放大，和原本的图像进行一个叠压组合，形成一个更重更大的整体。
又或者，采用顶部图像，底部文字的做法，让页面中的重量分配均等。
反过来也是一样的，顶部安排文字，底部安排图像。
再或者，我们可以将信息安排在页面的左侧，形成左字右图的配置。这样的构成，有助于人们第一眼发现你想传达的信息。
而反过来呢？图像就成为了更重要的那个。人们会先看到图，然后紧接着去阅读相应的文字信息。
到这里，我们分别从细节的刻画，再到元素的重心对齐；又从视觉重心的动态调整，一直讲解到了宏观页面的构建思路。我们可以看到，视觉重力原则几乎渗透了整个设计流程。很多时候我们其实并不缺乏理论知识的武装，可一到自己实际动手，就马上缴枪投降了。矛盾点还是出在对理论知识点灵活运用上，接下来我就带着大家再做几个案例。
打算做一套大米的包装设计。产品的名字就叫高山岩米。它长什么样子呢，就像我们现在看到的这样，类似葡萄干一样，和我们平时见到的大米颜色是有一些区别的，据说营养价值很高，也被誉为米中黄金。
我想利用图形的切割来表现这个岩米的部分。同时，在辅助一个篆书结构的山字，以这样的图形来体现这个主题内容。并且，我也希望这个大米的部分是镂空的，能够透过它看到真实的米。
主视觉的刻画差不多后，接下来我把它放到包装上，并且将其他信息也一并加入到版面里。不过这样一来，信息和主视觉相互叠压，对于内容来说可能会有些相互干扰了。所以我们来试着编排一下。到这里，好像出现了我们前面提到过的问题了，那就是，整个布局显得头重脚轻了。
接下来再试着调整一下。现在我们把底部和顶部的空间都占据了，同时也预留出了三分之一的留白，这该不会有什么问题了吧。相信看到这里的小伙伴应该都能看出问题了，那就是这样的配置确实有些左重右轻了。留白可以有，但绝对不是这样做的。
除了我们之前提到的上图下字，或者是左图右字之外。我们当然也可以综合的应用它们。我们现在这个构成，其实就是一种全包围的结构。
又或者，将一部分内容放在底部，而主要去刻画上方的文本样式。这就形成了类似半包围的结构。
如果说之前的版本是上下样式的半包围构成的话。那么接下来的这个构图，就是融合了重心动态布局的左右样式半包围构成了。
当我们不知道怎样去安排版式构成时，视觉重力原则就成为了一个很好的参考依据。
我们再做一版活动海报。画面中出现的各种电器，都是经过退底处理的。这样的处理，能够让它们毫无违和感的出现在同一个页面中。
在页面的部分，我加入了这个活动的具体内容。展览的主题叫《模块世界展》，是著名设计师迪特拉姆斯的个人展览。
拿到这样的内容时，最保险的做法就是让顶部的图片成为一个更大的组合。上图下字，很平稳，也很保守。
我们可以看到，图片部分，我尽量将它们还原成了现实中它们本来的比例关系。
或许，我们也可以再换一种思路，相对的更突破一些。将图片通过颜色划分成组。我们能够看到，其中有全黑的，也有彩色的，更有白色的。
除了像刚刚的堆积到角落，我们也可以把图片组合规划成对角线的样式，在这样的形式下，版面构图依然是平衡的。
我们当然也能让图片组合划分成一个更大的组合，以及一个更小的组合。
又或者，打乱图片的顺序，完全依据视觉重心去匹配其中的位置关系。
最终，我决定从展览的主题中寻找突破口，以“错位”的手法去呼应“模块化”这个概念。不仅仅是文字部分的错位和拆解，图片部分也通过硬边的投影，形成了一种嵌套于版面中的视觉印象。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：研习社
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天我要和大家介绍的这位设计师，他在业内被誉为是“信息可视化设计”领域的天花板。一提到信息可视化这么高大上的词，相信大家都多少有些了解，在日益复杂的信息交流活动中，将信息图表化已经是一名设计所必须掌握的技能之一了。
举些常见的例子，比如在公共场合中，我们看到的交通标志，以及用来显示地理位置的地图、将时间具象化的时刻表等等，这些数据都以某种图形化的形式呈现在我们周围。
而信息可视化领域也不仅仅是将简单的数据绘制成图表那么简单，比如要弄清楚社会中隐藏着的各种问题，从而促进新观点的提出和对问题解决的思考。这种并不以信息为主导，而是着重于根据创建者的主题来选择要传达的信息，并寻求接收者的主动解释。
而我们今天要介绍的这位设计大神就是这个领域的专家
△ 中野豪雄 TAKEO NAKANO 图形设计师
1977 年出生于东京都。武藏野美术大学毕业，师从著名设计师胜井三雄。2005 年设立中野设计事务所。以信息的构造化和上下文的可视化为主题，在各种领域探索图形设计的可能性。日本 typographic 年鉴大奖赛，同最佳作品，造书装帧比赛经济产业大臣奖等获奖。入选世界海报三年展和拉哈蒂国际海报双年展等。作为邀请作家参加了国际泰晤士报双年展“首尔 2011”。文艺博物馆永久收藏。武藏野美术大学、多摩美术大学教授。
咱们先来看看中野老师平时的作品都长什么样吧！
是不是很厉害！但说实话，这种信息的密度，工作量绝对是巨大的！而在一些访谈中，中野老师也明确指出，自己更倾向于采用更宏观的视角去做设计，因为这样不仅能够达到传达目标，同时也由于对比的存在，进而产生崭新的视角。
图中我们现在看到的信息可视化海报，是 graphic trial 2015 的一次展览。老师一共设计了五张 B1 大小的凸版印刷海报。内容是关于地震的四年时间里，哪些话题被人们报道直到事件完结，然后回归到日常生活中。以及在大数据为主的信息社会中，思考有关制作印刷物的意义。
人们在地震发生时，所接受到的信息，就像图中展示的这样，是从喧嚣到日常化的推移和演变，老师会考虑到，促进这个过程的因素和推动力是否能够被可视化。从当代语言推动社会发展的角度去考察，想象着是否能将这个语言本身地图话。从而建立起一个提供人们思考的平台，这也是平面设计能否引发舆论争议的关键。
首先我们从信息收集的角度来向大家讲解，这张图是国立情报研究所的北本先生制作的数据图，搜索关键词是“受灾地”。图中折线展示的是，受灾四年间，相关词被搜索的高峰和频率。
接下来我们来看这张语言地图是如何被延展出来的，常规情况下，我们形容时间的话，当然会使用线性的横向时间轴。而中野老师的解决办法，是将时间轴以环形的方式呈现，并且将起点与终点之间的差异可视化。
五张海报，分别从受灾后第一个月、半年后、一年后、两年后以及四年后展开。呈现出由远到近的视角变化，第一张海报中，展示的是受灾后 31 天内的变化，逐渐到最后一样，受灾后 1460 天时，人们对于这个事件的关注转变。
老师从北本先生那里得到的数据，大概可以划分成四个种类，分别是时间、主题的力度、语言关键词频繁出现的次数以及与东日本大地震的关联度。时间就是刚刚提到的，以环形角度的方式呈现。话题的力度越高，就会离中心越近，反之就越远。频率则是按照关键词出现的数量，以圆的大小来呈现。另外也通过颜色来区分与地震话题相关的词语。
△ 一个月，六个月，一年，两年，四年
最终就呈现出了这样的画面，首先这个项目是单人项目，所以合成这样图的工作量是非常巨大的，过程当中老师也请到了一些研究者对这个项目进行一些帮助。整个海报的重量据说非常重，拿起来大约有二十四千克。
如果使用常规的四色印刷的话，也就需要利用青品黄黑去合成不同的颜色。不过这样最终的效果并不理想。
于是老师选择了专色印制，也就是每一种颜色都单独去印制一版。单独印制一张海报，就需要反复印刷 16 版。
其中的黑色，也就是全部 16 版叠压到一块的效果，可以说是黑中之黑了。当然这个黑色也是有所比喻的，也就是庞大的信息是无法单独存在的，当所有信息混在一起，才能比对出彼此的联系。
第一张图展示的是灾害发生时的第一个月，画面中展示了很多的圆圈，大部分都发生在外圆，也就是说当时各种各样的搜索关键词，与灾害相关联，被搜索的频率非常高。在色彩的区分中，我们也能感受到相当强大的热度。
这是两年后的情况，也就是说圆的一半就是一年，左半边就是第二年，可以很直观的看到，前半年使用的暖色是比较多的，当来到了后半年时，话题热度逐渐冷却的样子。
来到第四年的时候，也就是圆的四分之一是一年。右半边展示的是过去来年的样子，而左半边就是又过了两年之后的样子。整个图标展示的是起点“311”大地震动开始的日期，直到截止四年后的 3 月 11 日。
可以看到暖色的部分逐渐变得零星起来。为什么会有这样比较有规律的分布呢，那是因为暖色出现的位置都是所谓的纪念日，也就是人们会想起那次事件的日期。
比如其中烟花这个词，就是从灾难过后才开始频繁出现的，它代表了人们对于灾难的一种寄托，人们期盼着生活能够回归正轨。
这样的可视化设计，意义在于人们能够通过它，俯瞰全局，通过使用宏观的视野来连接新的视角，让人们意识到它们没有注意到的观点。各个词语，会根据时间轴的变化与联动，起到唤醒记忆的作用。通过这个设计作品投影人们过去的经历。
它是从整体到部分之间的一种信息差异。就图的整体视角来看，它表示了“人们遗忘的节奏”，进而对遗忘进行批判。另外从图的部分视角出发，它表示了“记忆的意外发现”包含了对回忆的期待。
看到这是不是觉得中野老师很厉害呢。那么接下来，咱们再来看看他的成长经历
成为一名设计师的契机有很多，比如父母是设计师，或者是有看过一部激动人心的电影海报，想要成为一名从业人员。可中野老师选择设计这个专业时却完全不是这样的。
他选择的了一种极度理性的方法，逐一排除自己不喜欢的东西。
但这种做法本身就很难，最终中野犹豫着要不要选择美术专业。始终没有鼓足勇气的他，还是向附近的预备校老师请教了这个事情。
听了中野的情况后，老师的评价是，他觉得中野很适合平面设计这个专业，还问他要不要试试呢？
因此在报考志愿里，中野写下了武藏野美术大学和多摩美术大学。如果按照主角光环的剧本，这个时候，中野老师应该就已经平步青云，从此走上人生巅峰了。
然而现实却是，在第一次考试中，他却落榜了。作为“差生”的他，周围都是什么样的人呢？插画、摄影甚至编程，这样的拥有特殊技能的人几乎占据了大多数。在这样的环境里，中野老师当时却并没有什么特别的特长，对于不善于表达的他，在当时感到很无奈。
那时的他一直在问自己。我的特长是什么？我的兴趣点是什么？有次散步的机会，他终于得到了灵感。那就是虽然自己没办法做出特别厉害的作品，但踏踏实实的绘制图形却是可行的。
当意识到了这一点之后，于是在一次研究宋体（明朝体）的过程中，就产生了做一本书去记录这段悠久历史的想法。他想通过探索历史的过程，去寻找属于自己的兴趣点。
当从宏观角度看待一段历史的进程，通过推演，人们总能或多或少看到未来的一些可能性。通过研究书籍的过去，会发现最初的书籍形态起源与泥板，也就是说，从人类发展初期就存在了书的概念。
就是这样一步步的研究，信息的宏观样貌，如果从宏观的视角来看待的话，会发现人们通常能够了解到的信息其实并不多，当从更高的维度看到相同的事件时，是能够展现出事物本质的。所以在之后做视觉图表作品时，中野就开始有意识的展现从整体到局部之间的相互对照。
我们接下来一起看看中野老师还有哪些精彩的作品吧！
以信息结构和文章脉络的可视化设计为主题，探索各个领域中平面设计的可能性。
△ 这是中野老师从 2012 年到 2013 年期间，为建筑杂志设计的封面，因为是月刊，所以在两年时间里，一共做了 24 本。
杂志的内容主要和灾害相关，比如第一版，是关于日本东北地区的一些内容、第二本是关于海啸的内容，除此之外，还有关于建筑产业、能源、以及关于福岛灾难重建等问题。
每本杂志都有各自的特征，数据来源主要由政府以及大学中的一些数据研究者们提供。当接收到这些信息之后，中野老师需要甄别哪些内容是需要保留的，哪些是需要删减的。在这个过程中，不断的思考”怎样才能将这些数据清晰的传达给读者”这类问题。
这个展览是 2018 的时候，中野老师在印刷博物馆策划的一个天文学与印刷的展览 。主要展览的是 15 世纪到 18 世纪的书籍和印刷物。希望能够以全新的视角，向大家展现天文学与印刷之间的关系。画面中左上角的同心圆，是哥白尼提出的太阳中心说，从此人们开始以全新的视野观察这个世界。
这是这个展览的宣传单页，博物馆的宣传单页通常都是 A4 尺寸的，最初老师设计了八张相同的传单页面。
随后最终通过局部特写的方式，构建出了八种不同的传单样式。如果全部收集完全，可以拼接成完成了一个大画面。
从天文学和印刷术之间的关系开始发展联想，结合了天文学，哲学、数学等等一些学科，统一展现出了宇宙的这个概念。老师分别从三个角度思考这个问题，分别是“秩序”“整合”“规格”。
如果把文字去掉，我们会看到这样一张插图，我们来分析一下为什么需要做成这个样子。
这里的横轴代表着时间，竖轴代表着规模，画面顶部展现的是关于宇宙的图像，而下方主要以人的视角，展现了地球的图像。学术本身是建立在各种各样的理论之上，前人建立起的理论，可能会被后来者推翻重建，逐步形成了我们今天的天文学。
这个展览中会展示各种各样的宇宙学理论体系，通过各种各样的宇宙论，去展现这个世界的演变。让人们随着时间的进程，在各种学术体系中了解了文明的变迁，通过图像让观赏者提前在脑海中呈现出视觉化的内容。也就是说，我们从看到这个宣传画面的那一刻起，这个展览的内容就已经开始了。
这个展会的名字叫《改变世界的信息》，画面长度有 12 米左右，这个画面是展会的入口处。从数据我们可以看到，受到贫困和灾难的人群，占据着百分之七十的人群。
中野老师针对这一点，将世界各个地区以及不同的国家，把其受灾的程度和数据都集中到了一块。分别是水资源、粮食、能源、医疗、住房、交通、识字率、通讯等问题。一共有一百多个国家。
通过这个图，我们会发现这其中每一个问题都是相互牵制，相互影响的。比如说水的问题就和所有的内容都有关系。整个图标并非是想要解决某些问题，而是希望人们在看到它们时，能够从中发现到一些问题。
通过人们的议论，去碰撞出全新的思考。由此可以知道，图表设计其实是对社会非常有帮助的设计领域。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：花瓣 作者：研习社
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
但是，究竟如何才能结合网页/产品特色和用户的真实需求， 将页面视觉内容层级化， 从而提供更加优质的用户体验，实现与用户的互动， 最终促成产品购买呢？下面小编就结合最新且具有极佳视觉层次感的网页设计实例分析和介绍视觉内容组织技巧，以及在原型化这些网页设计的过程中（结合小编最爱的一款又快又简单的原型工具Mockplus）需要注意的原型设计技巧：
1.利用界面元素尺寸大小建立层级结构
界面元素（例如文字，图片或形状等）尺寸越大，越突出，越容易吸引用户的注意。所以，在具体的网页界面设计中，设计师可以通过有梯度的尺寸变化，创建页面信息的层级关系。当然内容重要性上，也应该是与尺寸大小成正比的（即越大越重要）。
如图，利用文字的尺寸大小，体现网页信息的层级。
注意：尺寸大小也要控制在用户能够接受的范围内
太大，能够展示的内容有限。太小，易读性差，也会比较繁杂。
原型设计技巧：
在利用Mockplus (一款具有丰富组件库和图标库的原型工具)创建网页原型时，绝大部分的组件都是可以简单通过宽高属性或拖拉边框两种方式调整其尺寸，轻松创建直观的层次结构。
如图，Mockplus允许用户简单通过宽高属性或拖拉边框的方式调整组件尺寸大小。
2.利用界面元素明暗，阴影以及透明度的不同，体现简单层级
如白底黑字般，同类元素，同一色彩，不同的明暗，阴影以及透明度，也可体现简单的层级关系。当然，在没有过多颜色的参与下，不同文字，图片等多种的页面元素结合透明度，阴影以及明暗，也可使整款设计极具简约风和层次感。（点击链接更多的简约风网页设计技巧）
如图，文字明暗，结合尺寸变化，让页面层级更加清晰简约：
原型设计技巧：
而在这一方面，小编发现Mockplus提供了专门透明度属性，可以根据层级设计需求，修改属性数值进行设置。
如若，需要添加元素阴影，也可轻松通过组件的重叠实现。
如图，“图片”与“形状”组件的组合，实现阴影的添加。
3.利用色彩，划分页面层级
色彩，作为设计师最常使用的视觉层次工具，也为他们创建极富层级感的网页设计发挥着举足轻重的作用。而具体的设计技巧，大家可以参考以下几点：
首先，色彩明亮的页面元素更容易从相对柔和的元素中脱颖而出。如图：
如图，明亮的红色和黄色更易从相对较柔和的粉色背景中脱颖而出。
而且，某些色彩，尤其是某些主题配色方案的选择，对于确定网页的整体基调，吸引用户注意，作用也非常明显。例如，蓝色，一般代表平静祥和，适合一些日常事物管理类软件选择。而红色，则代表热情喜气，适合一些节日相关购物促销类软件选择。
如图，利用红色突出网页促销信息。
其次，色彩饱和度的梯度变化，也可体现直观而丰富的层次结构。
同一色彩，饱和度的梯度变化，也可帮助展现网站元素的层次结构。如图：
最后，色彩模块，对于体现界面元素的逻辑关系，作用也是显而易见
存在同一逻辑关系的各个页面元素就近放置在同一色彩模块，可以让页面组织结构更加清晰，易于用户快速查看相关内容。
如图，利用色彩模块，更直观地划分功能区。
原型设计技巧：
而这一方面，Mockplus提供了非常强大的色彩选择器，设计师们可以简单点击实现色彩的选择和添加。其色彩收藏功能，也为以后复用和保持整款设计配色的一致性提供了可能。
当然，结合“形状”组件，为页面添加丰富的功能色块，以及添加“鼠标悬停时”或“点击时”的简单色彩交互状态，也不是难事。
如图，添加色块划分界面功能结构。
4.利用页面布局，展现网页层级结构
页面布局也是设计师们常用的视觉工具之一。一方面，同一网站，内部各个页面可以根据软件或产品展示内容需求，采用多样的布局模式，增加页面的多变性和可读性。另一方面，也可直接在不同页面采用重复的页面布局，方便帮助用户形成一定的阅读习惯，快速有效的查询需要的信息。
而具体单个页面的布局模式，大家可以尝试以下的方式实现：
*利用网格划分不同页面模块
网格是公认的划分页面功能模块的工具之一。而它在组织界面视觉内容方面，作用也不可小视。加之，结合各个网格的色彩变化，也能使整个页面更加炫酷直观。如下图：
*利用位置不同体现逻辑关系
同一逻辑关系（比如同类，从属，因果等）或相近/相关的元素放在同一或并列的网页位置或模块内，更易于用户浏览所需页面信息。
当然，每个逻辑关系内，结合大小标题和列表进行展示，层级关系会更加深入清晰。
*利用点线
网页设计中，设计师不仅可以直接使用点线标出需要强调的内容，还可以利用点线划分页面板块和布局。
如图，通过位置的不同体现内容之间的逻辑关系。同时，利用线条划分页面结构和布局。
*利用对齐方式的不同
文字，图片以及相关元素的对齐方式，也是体验不同层级结构的重要工具。
总之，页面布局也可帮助设计师们创建更具美感和层次感的网页设计。
原型设计技巧：
在使用Mockplus时，设计师可简单使用“快速格子+自动填充”的功能组合，实现界面网格的轻松添加。而且，在具体的设计过程中，对齐方式，标尺以及参考线等工具的使用，也可使网页布局设计更加简便快捷。
如图，利用Mockplus的快速格子和自动填充功能制作网页网格，划分界面功能结构。
5.利用留白和间距，突出界面视觉内容
留白的巧妙运用，能够非常有效地突出页面信息。而页面内部元素之间，保持适当的间距，让彼此之间的相互联系而不“拥挤杂乱”，也是吸引用户注意的不错策略。如图：
6.利用对比，凸显网页层级结构关系
以上所提及的各种视觉组织工具，例如尺寸，色彩，明暗，间距等等，同类或不同类之间的鲜明对比，也可以让页面视觉上更加美观而丰富，同时体现元素之间的结构层次关系。
如图，利用色彩的强烈对比，突出页面层级。
此外，页面元素的相互叠加，清晰度，以及细节展示程度的对比，也能有效地凸显网页内容的重要性层级。
如图，靠前的图片和文字应该更加重要，清晰，细节也应更丰富，从而方便用户识别读取，避免层次混乱。
7.采用不同的界面风格，打造独特的网页视觉层级
当然，并不是说设计师就必须通过以上的设计工具展示网页重要性层级结构。实际上，结合设计师特有创意，独特纹理（texture），图形或图像元素等，打造出具有设计师独特风格的视觉层级，也会是不错的尝试。如下图：
总之，不管是否使用以上的设计工具，结合设计师创意，打造独具一格的视觉层级风格，都是不错的设计理念。
原型设计技巧：
而在这一点上，Mockplus提供了很多优质功能，帮助设计师随心设计，并简单快捷的原型化，测试和迭代这些天马行空的创意。
比如，其团队协作和团队管理功能，方便设计师更加高效地完成设计。其8种演示和分享方式，例如导出图片，HTML以及演示包等等，为设计师根据切实需要，选择适当的方式测试和分享相关设计提供了便利。
此外，其组件样式库，也为保存和分享需要的组件样式并随时复用提供了可能。
8.分析用户需求和网页浏览模式，优化页面内容和位置
在进行网页界面层级结构化的过程中，并不是毫无章法，盲目的随意添加或突出某个部分，而是需要分析用户行为，根据用户需求等级进行相应结构层次的划分。否则，再怎么赋有层次感，用户也会因为找不到需要的东西，莞尔离开。
此外，除了根据用需求决定哪些内容需要放在最紧要，最突出的位置，以吸引用户。同时还需要根据用户浏览网页时的阅读模式，分析重要内容的页面位置。
根据美国著名网站设计工程师Nielsen Norman Group研究表示，用户总是在网页浏览中惯用“F”或“Z”型阅读模式，即用户常常是从左到右，开头结尾详细阅读，而中间部分则根据网页或文章大小标题结构，选择性阅读的模式。如下图：
那么，网页设计中，设计师就需要注意页面首尾内容的趣味性和实用性，以及中间主体部分注意大小标题简洁明了，建立清晰的框架层次结构。
总之，无论是用户行为画像，还是用户浏览模式分析，最终都是希望能够根据用户需求，更加合理的安排和分布页面内容，直观清晰，易识别。
9.其他设计工具
而其它视觉设计工具，例如界面文本方面，文本字体，排版，对齐方式等等，也可突出页面的层级关系。
原型设计技巧：
如若设计师希望通过网页文本的尺寸，字体，颜色，排版以及对齐方式等实现框架结构的构建时，Mockplus的“单行文字”和“多行文字”组件就可以轻松帮助实现。而且，适当的结合一定的交互设计，也可使整款设计更具吸引力。
结语：
当然，层次结构化不仅能让网页更加直观清晰，赏心悦目。而且，具有一定局限性的Android 或iOS app，例如页面尺寸的限制，设备屏幕的限制，响应与否的限制等等，更需要清晰的层次结构，让页面摆脱混乱繁杂，吸引更多用户点击使用。而这方面，也同样适用以上所有设计技巧。
总之， 无论如何， 及时地将各种设计想法，通过一款实用且强大的原型工具（比如以上介绍到的Mockplus）, 转化成直观可视的原型，更进一步的测试和迭代，才是创建真正美观实用，深受用户喜爱的web/app的必经之道。
总之，希望以上介绍的相关层次结构设计技巧和原型设计技巧能对你有所启发。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每当我看到一个漂亮，优雅并且简洁美观的界面，就会忍不住保存下来。现在，我已经收集了100多个美不胜收的UI 界面。在一次次观摩，欣赏和学习后，我发现这些界面有很多共同点。可究竟是什么让我对它们一见钟情呢？现在我找到了答案，是色彩。
本文中，结合自身经历，我总结了一些UI 设计配色技巧。虽然它们不能像魔术一样让你摇身一变成为最优秀的UI设计师，但是我保证，这些为你量身打造的UI 设计配色技巧，定会让你受益匪浅。
1. 色彩的魔力
色彩是会说话的，甚至可以像语言一样强大。回想以下，每当你初见一个网站或产品，给你留下第一印象的是什么呢？是视觉外观，而视觉外观很大程度上是取决于色彩运用。
那么，在UI设计中，色彩究竟可以做些什么？
1）反映品牌的内涵和品质
颜色可以为品牌设定基调。 CCICOLOR的一项研究表明，用户在评估一款在线商品时，只需花费短短90秒，而判断的依据高达62％至90％将取决于配色方案。
2）实现更佳的用户体验
色彩的有效运用能提升整体美感，提供更优的阅读体验，创造清晰和谐的风格。
3）影响购买决策
根据Kissmetrics的说法，产品的视觉外观是影响消费者购买决策的首要因素。此外，QuickSprout的研究也表明，90％的产品评估都与颜色有关。Neil Patel曾写到，“颜色在你购买特定产品的原因中占据85％的分量”。正因如此，颜色已成为当今重要的营销手段之一。
2. 色彩的基本概念
色彩被长久的文化生活赋予了很多约定俗成的含义和寓意。每种色彩都形成了自己独特的语言和象征。解读色彩的语言，请看下表：
3. UI 设计配色技巧
1） 色彩使用也讲究“天时地利人和”
存在即合理，没有哪一个色彩本身就是丑陋和不具备美感的，只能说，如果我们错误的使用了色彩，那么它的美一旦被破坏，就只剩下丑陋和别扭了。
想象一下，如果麦当劳大叔使用比较沉闷的灰色和黑色而不是明快的黄色和红色，你还对他们的炸鸡充满饥肠辘辘的感觉吗？女人喜欢穿着黑色礼服搭配鲜艳口红参加派对，为什么？因为这样会让她们看起来性感迷人。
不同的颜色传达不同的含义和感觉。如何明智地进行选取和搭配呢？这里请注意5点：选取合适的颜色，运用于合适的设计场景，注意时间变化，关注目标用户，明确想要达到的目的。
这里请认真查看上图，明确颜色的意义。但如果你非要冒险追求独一无二的设计，那么祝您好运。
2）留心蓝色
为什么专门谈蓝色？蓝色不是海洋天空的专属色，蓝色也是UI 设计的青睐色。
看看你常用的一些比较有名的APP或者网站，比如Facebook，Safari以及办公软件等等。有什么发现呢？是的，它们的界面都是蓝色，各种层次的蓝色。
有研究表明，蓝色是唯一一种让女性和男性都钟爱的颜色。蓝色几乎无处不在，大自然中，各网站的UI界面，服饰衣物等，蓝色随处可见。包括我此刻写入文章的Microsoft Word，界面也是蓝色的。
蓝色无疑是一种安全的颜色，它能最大程度上获得用户的信任并被广泛接受，蓝色可以说是UI配色中的典型例子。如果你的UI界面没有更好的选择，请用蓝色。
3）背景色和元素之间的色彩变化技巧
看看以下的界面：
（来源）
这里暂且不谈这又是关于蓝色的UI界面，让我们专注于它的色彩变化。主题颜色是蓝色，其他元素是较暗的蓝色和更明亮的蓝色。整体看上去，各层次的颜色平衡和谐且又脉络清晰。
怎么做到自然而又极具美感的色彩变化？
只是一个简单的黄金法则：通过降低亮度和增加饱和度可以使色彩变得更深；通过增加亮度和降低饱和度来使色彩变得更浅。
4）色彩组合的黄金比例——（6：3：1）规则
在设计时，色彩组合必不可免。组合颜色很容易，但组合后如何避免色彩混乱和累赘？如何既能够不显得单调又展示设计感？
记住二个原则：
第一个：6：3：1规则
60％+ 30％+ 10％的比例是为了平衡颜色。这个公式能创造出一种平衡的感觉，并能提供更佳的用户体验，可以让用户的实现从一个点舒缓的移动到另一个点。
第二个：最多3个原色
这个规则与黄金（6：3：1）规则相匹配。这是避免混乱并保持平衡的最佳办法。
5）颜色组合和互补
提供和谐的配色方案时，需要注意些什么？在这个过程中需要考虑以下方面：
第一， 色调
您可以在色环上生成单个“色度”的许多变体。通过添加白色，黑色和灰色来生成不同的色调。
实现平衡色调，最简单的方案是单色（单色）方案。
第二， 对比
颜色的不同对比可以唤起不同的情感反应。色轮上相对的两种颜色可以提供最高的对比度，比如黑色和白色。强烈的对比度可以让人集中精力，并且产生紧张的心情; 柔和的对比度则适用于轻松、休闲的UI设计。
注意：对比的使用不要过火，这样容易使用户产生困扰。
6）黑白色搭配不过时
黑色是所有中性色中最强的，而白色是最常用的背景颜色。黑色是一个很好的选择，有种高端和永恒的感觉，而白色可以带给用户自由，宽敞和透气的感觉。如上所述，黑色和白色也是最大的对比色，如果合理的使用黑色配合白色，会营造出一种优雅的氛围。黑白色的搭配主要用于网站UI界面。
7）从自然和艺术中获得灵感
自然与艺术是灵感的主要源泉。抬头看看天空，你会发现蓝色发挥到淋淋尽致的经典模样。从大自然中获得的配色灵感可以使您的设计更加切合用户的审美，非常自然，不带刻意的痕迹。而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。
8）颜色心理学 – 避免性别误区
或许天生如此，女人不喜欢灰色，橙色和棕色。她们钟爱蓝色，紫色和绿色。而男人不喜欢紫色，橙色和棕色。男人喜欢蓝色，绿色和黑色。只要记住，当你的产品目标用户群是男性时，选择能传达男性气概的色彩。如果你把运动类App的界面使用了女性色彩，结果可想而知。
还有一个误区，人们以为粉色是女性的喜爱，但结果也许会让你大跌眼镜。
4. 工具和模板
这里我总结了一些有助于UI配色的工具和模板，希望对您有所帮助：
1）Coolors.co
Coolors.co是挑选颜色的好工具。只需锁定所选颜色并按空格即可生成调色板，还提供了锁定部分色卡再次生成颜色的功能。包括HEX、HSB、RGB、CMYK等四种色彩模式。
2）Mockplus
Mockplus是一款非常方便的UI / UX设计工具，其启动页面加入了配色精美的示例项目和模板，可直接导入桌面客户端。其编辑器中，可对组件进行多样的色彩设置和编辑，内部也包含完整的颜色选择器，支持导入图片和GIF，如果您是要在原型设计过程中产出精美的UI 界面，Mockplus能满足您的需求。
3）Paletton
Paletton有点类似于Kuler，但又不仅限于5个色调。当您已经拥有原色并想要使用其他色调时，Paletton将会是您很好的选择，它可以创建协同色彩组合工作，是强大的UI调色板。
4）Check my Color
Check my Color是一款可以用于检查所有DOM元素的前景和背景颜色组合的工具，也是一款能够检查不同网页自己的颜色亮度和对比度差异的工具。
5）Chinaz
该网站提供了丰富的配色资源，包括在线调色板，网页常用色彩，web安全色以及网页颜色选择器，会使您UI 配色的一个很好的帮助。建议对色彩运用比较初级的设计师可以做一个参考。
注意：可用性是关键
创建华丽的UI界面永远不是最终的目标。提供卓越的用户体验，为用户的生活增添快乐和幸福才是我们设计的目的。因此，在UI 设计配色上，每位UI设计师应该记住，界面应该是符合高度实用和并且清晰明了的。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为什么数据可视化ui设计非常重要?
数据可视化的目的是以一种用户更容易理解的形式呈现复杂信息。
一个优秀的数据可视化界面是什么样子的？
今天小编就带给大家一组超酷数据可视化UI设计，风格多样，供参考。
文章来源：快资讯 作者：ZAKER汽车
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每天学习一点，你就进步一点，不断向上成长，成功没有偶然，也没有理所当然，能够成为一名优秀UI设计师的人不是因为他们有多幸运，也不是因为他们天赋有多高有多么强的悟性，而是因为他们一直在努力。
只不过一般人只看到别人的成功和辉煌，却往往忽略了别人背后辛勤的努力和付出，所以，在不服气或者眼红之时，才会用偶然来加以解释。只有不断学习提升，才能让自己变得更有价值!
以下是周老师给大家讲解UI设计的几种技能提升技巧。学会了可以让你快速达到事半公倍的效果。
1. 注入生命
无论是登录屏幕还是加载消息，用户都可以从这些小细节中获得乐趣。这就是为什么像Old Spice和Geico这样的公司拥有如此知名品牌的原因。通过在他们的营销中注入幽默感和个性化的设计，他们创造了更令人难忘的广告和内容。
MailChimp用户体验总监Aarron Walter说：“我们已经发现在副本中加入幽默、个性，以及许多塞进工作流的复活节彩蛋都可以把原本平凡的任务变成人们期待的体验，有时甚至是错过的体验。”
将生命注入复制中，这与说“正在加载...”与“我们训练有素的团队正在努力做到的”是有区别的。这是出乎意料的，并为你的用户提供了一点娱乐。
好的文案并不一定意味着它必须幽默。它只是意味着写一篇引人入胜、值得一读的文章。当然，在一些领域，如，医院、政府等地的应用是不合适的。
Reddit的联合创始人Alexis Ohanian在《Tools of Titans that I loved》中说了一些我非常喜欢的一句话：“花点时间使它更具人性化，或者(取决于你的品牌)更有趣、更不同、或者更多。这是值得的，这就是我的挑战。”
在你去设计你的下一个产品时，请考虑如何将体验与引人入胜或有趣的副本结合在一起。
2. 放入一些图标和表情符号
添加表情符号和图标可以帮助快速描述元素的功能。就像是当用户看到放大镜图标时，可以立即识别出他们可以通过单击来搜索内容。
我喜欢Pieter Levels如何利用他的网站NomadList上的表情符号来使其更具吸引力和用户友好性。这是使UI更具视觉吸引力的简单但有效的方法。
除此之外，关于这一点没有太多要说的了，不要过度使用它，也不要通过尝试过度创意来重新发明轮子。用户认识到某些元素具有全局意义。因此，请勿通过干扰用户熟悉的内容来使用户感到困惑，尽可能尝试使用已有的约定。一个用户图标代表一个用户配置文件，UI设计的几种技能提升技巧https://www.aaa-cg.com.cn/ui/2998.html?seo1一个“+”图标代表添加，一个购物车代表购物车，一个齿轮代表设置，等等。
下面是一些我最喜欢的地方，你可以在那里找到图标和表情符号:
Emojione
Icons8
BoxIcons
Feather
Material
3. 通过插图使你的产品更具人性化
插图使你能够以轻松愉快的方式传达复杂的信息。
在我们还小的时候，我们就已经接受过将视觉与文字和思想相关联的培训。你见过没有插图的儿童读物吗?
添加插图可以帮助缓解心情并平衡界面。插图可以吸引用户的注意力，并使应用程序的各个方面更易于理解。
但是，更重要的是，插图要有目的性，并用作内容的补充，而不是替代。插图应重点突出，并提供对UX的改进，而不是干扰操作。与插图的颜色和样式保持一致也很重要，这样它们就不会显得格格不入。
4. 添加一个黑暗模式选项
根据你正在开发的应用程序，添加深色主题选项可以为像我这样生活在深色模式下的用户提供安慰。黑暗模式对眼睛更友好。
在黑暗模式下进行设计与在明亮模式下进行设计没有太大不同。它所需要的只是一个不同的调色板。我建议让用户决定在暗模式还是亮模式之间进行选择-提供在两种模式之间切换的能力将改善您的应用程序体验，并允许用户保持对其体验的控制。
5. 使用高质量的图像
应用程序中的图像与其他任何视觉元素一样重要。你选择的图像中的视觉效果可以使UI更加生动生动，从而增强你的UI。
有很多很棒的地方可以找到高质量的图像。以下是一些我的最爱：
Unsplash
Pexels
Freepik
Adobe Stock
Pixabay
6. 设计有趣的404页面
看到应用程序中的每个事件，即使不是那么令人兴奋的事件，都可以提供令人难忘的体验。
错误状态通常是消极的经历，但你可以通过提供一些个性或乐趣来将其转变为积极的经历。
我最喜欢的示例是Google Chrome浏览器的“没有互联网”错误屏幕。他们提供了所有必要的信息，以告知用户如何修复它，而且还提供了T-Rex无尽的跑步游戏。
我最喜欢的另一个是Dribbble的404页面。它之所以出色，是因为它可以使用户参与其中，并且他们可以快速返回浏览涂料设计。
“人们仍然在推特上发布关于我们在Hipmunk上的错误推文，这是一条错误消息。他们为什么要这样做?因为这样做使他们在做一些原本希望很无聊的事情(例如寻找航班)时显得举足轻重。” -Hipmunk的创始人Alexis Ohanian说。
元素的高度可以帮助你在应用程序中创建信息的层次结构。用户认为深度代表了重要性-因此，越靠近的元素优先级越高。
但是，仅仅因为阴影看起来不错，并不意味着它们始终是不错的设计选择。在设计决策时要有目的性，并在添加阴影时要记住这些元素的重要性，这一点很重要。
在做出任何设计决策时，你应该始终这样做以改善体验，而不仅仅是美观。我已经提到过几次，因为我想开车回家。不要忘记，应用是为使用而设计的。不只是因为好看才被人看的。
文章来源：快资讯 作者：躺鸡萌妹
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天给大家分享10个非常实用的UI设计小技巧，请一定要认真看，这能帮助你的设计功底，更上一层楼。
1、对按钮进行排版，且风格一定要统一。
排版设计也是一门学问，不一样的排版就会有不一样的视觉结果。如果对设计的细节不重视，有可能让我们原本完美的产品变的平庸，比如像按钮、Tab这些简单的界面元素也是需要排版的，因为用户可能每天都会点击N次。
另外，所有按钮都需要尽可能的风格统一，这样看起来才会更美观。
2、设计的时候要学会留白。
留白的作用在于突显我们设计的重要内容。
内容元素之间的空白不仅仅是用来分隔的，这也是设计中需要注意的问题之一，比如像按钮、导航条、文章内容、标题等等元素之间的空白都有必要关注。有效地利用空白，我们可以明确的表现出页面元素之间的关系。
3、颜色主题尽量素雅、简单。
颜色主题可以说是用户对你设计的第一印象，一旦使用的颜色过于丰富，甚至是艳俗，就会使得用户分心。如果你不希望你的用户在看到花里胡哨的、扎眼的 App 之后就把它删掉，你就应当使用一种简单的颜色主题，给用户一个简单大方的第 一印象。简单的颜色主题顺应扁平化设计的要求，这使得用户在使用你的 App 时能够有顺滑的体验。
4、只用一种字体。
减少屏幕上字体的数量才能真正发现排版的力量。设计师不需要使用多种字体，只用一种字体，配上斜体、加粗、改变字号等手段，也可以分辨不同区域的内容。
在App、移动端和PC端网站中使用单一字体有助于增强品牌的统一性，优化全平台的体验。此外，用户也更喜欢单一字体所带来的简洁性。
5、链接体验需改善。
鼠标移动到超链接图片，文字上面时应该变成手型，暗示该地方是可以点击的。网页中文章里的关键字通常都标有下划线，提示用户这个文字是可以点击的，但是可点击区域不会超过字符的宽、高范围。设计类似这种带有超链接可点击区域的时候，都可以通过一些小技巧来提高可用性，比如：增加间隔，有些情况下甚至可以把链接转换为块元素。
6、分层的界面。
以前，用户界面都是拟物化的，从事物本身选取素材，比如电子日历长得和纸质桌面日历一样，把app图标设计成立的，按键音也模仿传统电话。
现在，扁平化设计通过分层的方式来表现事物的深度和层次，创造一种更加“有形”的感觉。
这样就更好的解决了如何做好UI设计的问题，我们的现实世界是3D的，以前人们习惯的界面也是拟物的，所以在进行扁平化设计时可能会出现的一个风险就是“过于扁平”，导致用户的不适应，而分层设计就是解决这个问题的方法，把一个物件放在另一个物件的上方，充分利用纵向的层次，帮助用户理清不同物件之间的关系，把注意力放在特定的位置。
7、更短的用户操作流程。
以前，人们完成一次交易可能要跳转好几个页面，而现在在一屏内就可以完成这些步骤，省时省力。比如用户在完成某项任务后会高亮接下来所需要进行的操作或者自动打开新页面。
现在人们的生活节奏较快，经常会在走路的时候用手机，因此简单快捷的操作更受欢迎。
按照这种思路设计产品操作流程可以帮用户省时省力，增加转化率并提高用户打开App的频率。
8、利用原型不断改进。
产品原型可以为功能的开发设计提供宝贵的指导。在产品设计的早期做出矫正，避免在产品基本成型时才修改，浪费时间和精力。
通过低成本的“实验”，可以测试产品各个功能的需求，通过迭代改进产品，用更少的时间开发出更好的产品。
9、指出产品适用人群而不是做成全年龄。
你是想把产品做成大众化的呢还是有精确的适用人群？在产品定位上你需要更精确些。通过不断了解目标客户的需求及标准，你能把产品做得更好得到更多与客户交流的机会，并且让客户觉得你很专业，在这方面是独家提供的优质服务。
把产品定位得精确的风险就是可能缩小了目标潜在客户的范围，也使自身变得不那么全能。但这种做得更专业的精神却反过来会赢得信任，权威。
10、暴露选项而不要将操作隐藏。
你使用的任何一个下拉框都会对用户造成信息的隐藏而需要额外的操作才能显示。如果这些信息是贯穿整个操作所必需的，那你最好把它展示出来做得更显而易见一点。下拉框最好用在选择日期，省份等约定俗成的地方。对于程序中重要的选项最好还是不要做成下拉形式。
希望以上十条技巧对你有用。
文章来源：快资讯 作者：衍果设计
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
从事UI设计的工作人员通常会有一种自己在做时尚行业的错觉，因为和时尚行业一样，在设计的时候一定要有最新的元素，如果还在用老掉牙的设计元素，很容易就会被淘汰掉。所以这里给大家介绍两种风格，帮助最近头疼设计风格的朋友。
叠加风格
顾名思义，叠加风格就是通过不同元素叠加而成的，当然，不是说我们随便一堆东西丢在一起就是叠加风格。叠加风格非常在意大胆排版以及排列有序，有层次感，而这其中层次感是叠加风格的核心。
不管是图文叠加还是图片之间的叠加，最终目的都是为了突出我们产品的重点，而通过我们叠加方式的不同，效果也是不一样的。举个简单的例子，图片和文字相互叠加，如果文字在上方，可以很直接展现文字并突出文字思想。而文字在下方，图片对文字有部分遮挡的话，就会增加神秘感，让人想要一探究竟。
轮廓化
轮廓化简单来说就是把文字用轮廓勾勒出来，也可以理解为镂空，通过描绘轮廓展现出来，这样我们可以和实心的字体形成强烈的对比。
这种风格多半和实心字体一起出现，当然根据设计理念和表达方式不同，也会有单独出现的情况，这种风格讲究的是设计上的细节，让人眼前一亮的小心机，同时在层次和情绪表达上会更加的丰富，一般都是用来做封面，给用户的视觉形成强烈的冲击效果。
文章来源：快资讯 作者：春风化娱娱
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源：快资讯 作者：曼巴怡君
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一款APP最先呈现在用户眼前往往是从引导页开始，在这个情况下，一个APP设计的好坏、使用否能吸引用户可以在引导页的设计上有第一感知。想让APP设计更加有趣，引导页设计需要遵循以下几点。
②图片信息的传递。AP引导页设计的图片信息，以全屏的人物图片为主，在不同的图片中，用户对于人脸和具有动感的图片比较容易关注，而且通过图片可以通过对用户视觉的刺激使其很快的产生联想并产生行为，给予用户很好的代入感。
色彩是让用户与界面生交互的关键性设计元素，用户会对引导页的界面色彩留下很久的印象，是因为色彩是视觉传递情感的最直观因素，也是用户视觉中最敏感的部分。其中“撞色”搭配就是一种极其吸引用户眼球的色彩运用方案。
②对比色搭配的形式。对比色是人的视网膜对色彩平衡的作用，是人通过视觉感官而产生的一种基本的生理反应。对比色的搭配不同于完全对立的互补色，同时处于相对对立的区域中两大类色彩之间的搭配。对比色搭配在24色相环上120度至180度之间的两种颜色之间的搭配。
①规范式界面布局。规范式界面布局通常以大面积的留白为主，通过对界面的分割，让信息元素成一种强烈的视觉聚焦，使用户对界面产生参与感。
②自由式界面布局。自由式界面布局一般展示的内容比较多，在多个界面的APP引导页中阐述同一个诉求，每个界面的关系通常是并列的关系，确定界面文字、图形元素的最大值和最小值，让视觉聚焦在一个体块中，再从这个体块中对信息进行排列组合，引导用户的视觉流向。
③串联式界面布局。串联式界面布局要求引导页展示的内容要简明扼要，界面中所有的元素都要按照一定的顺序有机的排列，并且页面之间要有一定的逻辑关系。
文章来源：快资讯 作者：衍果设计
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
