对视觉美感而言,其实是有规律、有方法可循的。从美感的定义,资深设计师跟初级设计师,最大的不同点在于,初级设计师在调整美感时,需要花大量时间摸索、尝试,而资深设计师,有自己独特的一套理念跟方法。




这也是为何同样一个设计,初级设计师需要花大量时间去摸索,探索怎么样调整能让自己的设计更为美观。而资深设计师,随便调调,往往都能调出很好看、很高级的视觉风格,这主要由于他们手里掌握着各类扎实的方法,对” 美 “的套路有深刻的理解。



所以今天,就围绕“美感”,给大家分享分享,如何在视觉层面,用一些小技巧快速设计传递出具备“高级感”的视觉感受。




本文大纲:

Outline of this article


1、注意力吸引是美的第一步

2、设计感的节奏如何体现

3、页面的重心如何均衡

4、颜色干净高级的秘籍

5、系统设计一致性考量

6、高级感 UI KIT 分享下载(Sketch+AdobeXD文件)
(下载地址链接见文末)



1、注意力吸引美


实际上,营造一个美而高级的页面,是需要在第一时间内,有一个重点能快速抓住观众的眼球,对观众的注意力进行吸引。这样观众才能对你的页面产生兴趣,从而引发浏览的动机,如果连基础的重点都没有,那么页面则会显得很碎,缺乏主体,这样的页面便是非常乏味的,难以下咽。


那么要想抓住用户注意力,页面的重点可以通过哪些元素来营造?



1)醒目突出的标题

在UI设计或者海报设计中,标题往往起着点睛的作用。一方面它能很好的给予用户页面的定位,告诉用户当前所处位置,其次又能很好的抓住用户眼球,提升用户的浏览动机。所以在Dribbble中,那些令人赏心悦目的概念稿,往往标题就是非常突出醒目的。如果你发现你的页面元素都很碎,看起来非常乱没有主体,那么不妨,试试把标题字号的大小做到更大,颜色做到更黑。



总之明显的主体在设计中相当重要,好看与否都与其强关联。这个主体可以是图,也可以是文字。不过通常,文字的优先级需要比图更重要,因为信息的核心传递往往更依赖文字。



2)精致的插图

其次,除了将标题调整更醒目外,一个精致的插图,往往能引起共鸣,更为快速的抓住用户注意力,如果你的页面里,全是文字信息非常枯燥,那么不妨多花点时间,绘制一幅精致的插图。






2、节奏的变化


节奏的变化,是建立页面秩序的关键,一个高级感的页面,往往内容都是非常有秩序的排列组合,信息的归类分组非常明确。从秩序来看,有哪些小方法,能帮助我们快速建立思路?




1)按照信息重要度,对信息进行分层

首先,需要按照页面信息,按照优先度进行分层,比如非常重要的、重要的、一般的、不重要的,先把这些因子进行罗列,找到信息的差异,然后对信息进行分组。

一般非常重要的信息,往往是交易数字,或者是行动点,这块需要重点做强化。二级类别的信息,可以是标题,或者是用户&业务想重点传达的文本或者插图,这块可以自行做判断。



2)信息层级不要超过5种

其次需要注意的是,分组分的太多,也会造成页面秩序的混乱,所以页面的信息层级,最好不要超过5种。那么其对应的字号,也不应该超过5种,这里可以使用规范,进行相应的约束。





包括不知道大家有没有发现,其实在我的公众号里,我也使用了五种信息层级,大家可以对比这五个样式。



重点标题大字号

小标题中等字号

正文正常字体字号

辅助标题小字号

最弱信息字号


之所以分这五种样式,一方面是为了更好地传达信息之间的层级关系,其次,也是为了增添文章的美感,增添阅读的享受感。比如下面这个案例,其实在信息之间的层级关系就较为清晰,不但具有美感,阅读的时候还清晰易懂。

..
.





3、页面的重心


光有秩序感,这还不够,页面如果没有重心,也会缺乏空间层次,经不起美的推敲,所以在将信息的结构确认后,还可以尝试进行以下一些操作。





1)在点、线结构中,适当增加面

在合适的位置,可以尝试增加色块&实色填充,拉开页面的空间层次,这样既能很好的凸显页面的重要信息,同时又不显得单调。比如这样



又或者这样




2)调整重心的平衡

如果增加了重心后,发现页面失去了平衡,重心靠左或者是靠右,这样可以调整页面其它模块组件的强弱层次,如果重心偏左,那么可以把右下角的信息加重处理。如果重心偏右,则可以把左边的信息加重处理。






4、颜色的把控


颜色的用法,也需要非常合理,如果盲目的添加颜色,也会让页面变的更为低俗,所以在颜色上面,可以遵循下面两种方式。



1)正常情况页面主色不要超过3种

页面的颜色越多,实际上档次越上不去,仔细看那些非常有高级感的设计,它们的配色,大多数都不会超过3种,颜色越少,高级感越强。



这个跟在海报设计中的配色讲究,其实是一样的,颜色数量与高级感成反比。




2)定义颜色的明度区间


但所有信息层级用一个色值,其实也不太合适,所以较好的解决办法,是将颜色的明度,同样也定义成为5种。比如100%明度、80明度%、60明度、40%明度、20%明度,在不同的信息层级上,使用不同的信息明度。




当然,有的时候透明度会出现一些颜色显脏的情况,所以适当改变一下色相,用邻近色代替也是OK的。






5、系统一致性


最后一点需要注意的是,如果定义清楚了一个页面的规则,那么同样,这个页面的规则,需要与其它的页面规则保持一致性。所以这个时候,往往得拉通来看,各个页面的视觉语言,视觉逻辑规则,是否一致。如果不一致怎么调整比较合适,这些都需要考虑。



从一致性方面,也可以从两点方面来考虑,做细化:


1)信息分类的一致

各个页面的分类逻辑,是否一致,包括重点标题、小标题、正文、辅助标题、最弱信息的规则是否一致。



2)视觉语言的一致

视觉语言包括颜色、字号、间距、样式,这些也都需要考虑统一。

比如参考下面这套↓


高级精致 UIKIT 分享


喜欢这套界面的同学,也可以拉至文末,先点亮在看,再点击阅读全文  关注UX小学 → 打开后台对话窗 → 发送「高级感KIT」,即可获取这套设计的 Sketch+Adobe XD 源文件啦么么哒😘~~~




最后补充

PS:掌握了方法还不够,只有结合方法,进行动手练习,才是进步成长最快的!所以看完本篇文章后,不妨开始动手进行练习,把这些方法牢牢掌握。



其次,平时工作中,也可以多积累,多总结,形成自己的方法论,一方面能提升自己的专业能力,二方面,还能提升自己的影响力! 如果你已经有了自己的方法论,并且想分享给他人,那么不妨加入我们的公众号读者微信群,目前已经开到了 VIII 群,将近四千人,都是一线大公司的设计师。如果你感兴趣,那么在公众号后台,回复『设计交流』即可跟我们一起愉快的玩耍啦~


最后,欢迎大家朋友圈扩散此文


🔥近一月设计类文章排行榜🔥


设计暗黑模式,掌握这几个方法就简单了!

好东西!值得设计师收藏的20款免费商用字体

面对用户量7亿+的产品,怎么做设计改版?

阿里云 2017-2020 创意设计作品集 · 大赏

重磅!阿里云设计中心发布2020设计年鉴[完整版]

重磅!QQ发布 2020 闪屏新风格





点“ 在看 ”给小编加个鸭腿咯🍗 

本篇文章来源于微信公众号: UX小学