提升UI设计细节的方法

  • A+
所属分类:经验思维

本文来源: 老狼(公众号: 应谋鬼计), 共 3485 字

今天我们来聊一聊设计细节,从视觉设计的角度,总结了一些提升设计细节的方法。希望对于一些设计师有所帮助。个人见解,如有雷同,纯属巧合。

提升UI设计细节的方法

开门见山,那么我们可以从哪些地方提升设计的细节呢?本“武林秘籍”一共为“九式”。虽然是设计的一些基本功,但容易被忽略。掌握好这些,在平时设计中,多加勤练,多思考,你的设计就会更加细致~

提升UI设计细节的方法

一切艺术都具有形式美;美的基本因子由“形”、“色”、“质”组成。设计?#24425;?#19968;样。首先我要讲的是设计中的“形?#20445;?#21516;时我个人认为“形”是图形设计中最重要的一个因子,“形”的设计好坏对于一个作品起着至关重要的作用。

这里所说的“形”可以理解为图形的轮廓、线稿、造型等。

提升UI设计细节的方法

“形”的控制在设计过程中需要反复思考和推敲,比如图标设计中的对其“识别性”的要求和 设计中常用的“尺规几何做图法”都是对“形”细节的?#32454;?#25226;控。在插画设计中,人物或物质形态的造型和节奏感也很重要。

“形”要准确,也要有“个性”。

提升UI设计细节的方法

打个比方,我们要画一个圆角矩形,一般都会在矩形的基础上直接倒个圆角。很普通对不对?是否可以针对这个圆角打磨更多的细节呢。

提升UI设计细节的方法

我们可以再给这个矩形进行处理或者换另一?#21482;?#27861;,让他具有一些膨胀感或更加饱满,变得那么“不普通”。这样的圆角矩形是不是更耐看了点呢。(别小看了这圆角矩形,苹果图标的圆角矩形还注册了专利呢)

提升UI设计细节的方法

这是一组多年前OPPO?#21482;?/a>主题大赛的参赛作品,过了那么多年,依然很?#19981;丁?/p>

提升UI设计细节的方法

有了“形?#20445;?#25105;们再来讲讲“色”。

经常有“甲方爸爸”说“这个颜色有点丑额!换个颜色。”其实我认为,没有一个颜色是丑的颜色。排除一些个人感受和喜好外,造成这样“丑”的局面多半是因为色彩搭配和色彩关系之间出了问题。

提升UI设计细节的方法

虽然网上有很多色彩搭配工具,但是最好的工具是设计师的“感觉?#20445;部?#20197;说是设计师长期的积累和训练的一种能力。色彩搭配有方法可寻,但也不是完全固定的,就比如我们常说的“红配绿”?#37096;?#20197;很高级。

提升UI设计细节的方法

我们试着给刚才的圆角矩形添加个颜色,可以是纯色,?#37096;?#20197;是渐变色。但需要注意的是在做渐变的时候,需要注意明度、饱和度以及冷暖的变化,使得颜色过渡自然。

提升UI设计细节的方法

这是一组通过色彩渐变表?#20013;?#21160;物结构的图形作品。基本是通过控制色彩的几个常用要素:色相、饱和度、明度来实现的。

提升UI设计细节的方法

设计可创造虚拟抽象,?#37096;?#36824;原真实。除了“形?#20445;?#33394;?#20445;?#35774;计中“质”的表达也很重要。比如最早的拟物风格图标的流行到现在的极简化风格。这里要说的是,由繁到简并不是“去质?#20445;?#26080;质”?#24425;?#19968;种“质”的表?#20013;?#24335;。

提升UI设计细节的方法

很?#19981;?#20197;前锤子?#21482;?#30340;图标,尽可能的还原真实,有丰富的细节,可以盯着看好久。扁平化的流行也让UI设计师的门槛变得越来越低,对于绘画的要求也没有那么高了。

提升UI设计细节的方法

一般“添质”有两种方法:添加纹理(材质)和添加光影质感。但是并不是一昧地追求?#30333;?#39280;?#20445;?#36991;免过度设计。

提升UI设计细节的方法

这是我比较?#19981;?#30340;两位站酷的设计师的作品,?#19981;?#30340;同学可以去看下。(本来想放自己作品的,还是大佬的作品更具说服力吧)

提升UI设计细节的方法

提升UI设计细节的方法

刚讲了三个基本要素“形”“色”“质”中提升细节的一些要点。

我们总结一下:

塑“形?#20445;盒我?#20934;确,也要有个性。“形”是第一位的,在做设计时“形”的打磨需要更多的时间,“形”需要美感,也需要“个性”。

控“色?#20445;好?#24230;冷暖,过渡自然。色彩能给人带来更强的视觉冲击,记住没有一个颜色是“丑”的,处理好颜色的色相、明度、饱和度,以?#25226;?#33394;之前的关系。

添“质?#20445;?#36171;予质感,注意光影。“质”是锦上添花。一般方法以“添加纹理”和“添加光影”为主。“无质”?#24425;恰?#36136;”的一种表?#20013;问脚丁?/p>

提升UI设计细节的方法

接下来我们讲一讲“留白”。正所谓“此处无物胜有物?#20445;?#30041;白”是设计中常用的手法,这里说说的“白”并不是白色或空无一物的意思;留白可以让你的主题更突出,画面更有空间感和通透感。

提升UI设计细节的方法

那如何留白呢~~我们先来看张图,一个黑色小圆球,放在一堆集合图形中。你能快速的定?#22351;?#23567;圆球吗?人的视觉焦点是分散的,甚至会被他身边的几何图形影响,始终?#35805;?#27861;聚焦,看到的是一堆凌乱的图形。

提升UI设计细节的方法

在我们平时设计过程中一样,设计是应该是克制的,需要做好“减法”。我们可以通过“减法”来更加突出小圆球的视觉位置。

1:“减少干扰?#20445;?#25105;们可以把小圆球身边的杂乱的图形弱化。

2:“去除?#20445;?#25226;不相干的几何图形元素去掉。

提升UI设计细节的方法

充分发挥留白的作用,体?#21046;?#20869;在价值,才能在突出主题、提升内容美感的同时,给观者创造一个较为轻松、愉快的氛围。

这是苹果官网的截图,大家感受下,其实画面主要是文字,产品图,没有过多的装饰,但是“浴?#28020;比?#20320;过目难忘~

提升UI设计细节的方法

留白同?#34987;?#33021;延展想象和视觉空间感,具有一定的艺术性。我国的水墨画也常常有留白的应用。

说了这么多,不要产生一个误区:留白是万能的!其实并不是所有的都需要大面积的留白,比如:有气氛类的活动、节日、功能性很强的页面等等。灵活运用才是王道。

提升UI设计细节的方法

我们在设计中经常会提到“层次?#20445;?#37027;“层次”如何而来呢?

一般情况,“层次”需要通过建立元素或内容之间的秩序,比如层级关系、主次关系、颜色关系、位置关系等等。设计常用的方法:“对比?#20445;?#21363;强调和弱化,元素间形成关系差;“归纳?#20445;?#23545;相近元素的整理和不同元素的区分。

提升UI设计细节的方法

对于文字排版而言,比如说报纸或杂志一般都会有明确的层次:标题(一级)、副标题(二级)、正文(三级),这是很典型的三级排?#23567;?#19981;同的层次可以更好地向读者展示哪些是重要信息。

提升UI设计细节的方法

这是一份分享的培训通知,左边经过一定的内容提取,去除了一些没必要的内容,整理文章内容,建立元素之间的次序,突出分享主题,会不会更加吸引你呢。

提升UI设计细节的方法

“对齐”是指对于页面的各元素之间建立排列次序;元素排列要有规律。就像大家平常收拾?#32771;?#19968;样,各个物件摆放整齐。我觉得这是一个设计师最基本的要求之一,但常常被一些设计师所忽略。在设计过程中,组织和建立元素间的排列次序关系非常重要。

提升UI设计细节的方法

一般设计工具中都有一些自动对齐工具,常用的对齐方式有?#30333;?#23545;齐”、“居中对齐”、“右对齐”等。

请时刻检查我们的对齐!请时刻检查我们的对齐!请时刻检查我们的对齐!

提升UI设计细节的方法

找了一些电影海报,大家感受下这三种对齐方式的在排版设计中的魅力。当然,在建立良好的次序的前提下,有时候也会有多种对齐方式混合使用的情况。

提升UI设计细节的方法

但是我们要小心,有时候在某种情况下,自动对齐并不?#35270;謾?#27604;如一些文字、符号对齐和一些特殊图形上。需要用过视觉比重或其他的一些方法手动调整。

思考题:上面的播放按钮,三角形与圆形的对齐方式,大家觉得哪种方式更优呢~~

提升UI设计细节的方法

关于?#30333;?#20307;”的使用一直是我们设计师的痛,一?#24039;?#21450;到版权问题,很多商用的字体需要授权?#27426;?#26159;“默认字体”尤其是中英文数字标点等一起的时候,会出现一些意外的情况。

提升UI设计细节的方法

这是Sketch里苹方字体打的一段文字,数字和中文字、标点符号之间有明显的问题。

提升UI设计细节的方法

这个时候,我们需要人工介入,对数字和标点符号进行调整,从而保证整体的平衡(如图)。

提升UI设计细节的方法

作为一个设计师,同时也需要一点点“造字”的能力,为了营造一些画面的气氛,尤其是运营设计中主题字体设计可以很大幅度提升活动质量。造字虽然涉及到时间成本,会花费一定的时间和精力,但从效果和质?#21487;?#26469;看,还是很有必要的。

提升UI设计细节的方法

设计师们离不开?#35745;?#32032;材。?#35745;?#32032;材一般通过一些素材网站上挑选,?#37096;?#20197;自行?#32435;恪?#20294;是网上找的或者自?#21495;纳?#30340;都会有一些问题,这个时候修图的能力就非常重要了。

提升UI设计细节的方法

如果用到一些食物?#35745;?#32032;材,务必选择一些质量较好的?#35745;?#25110;者摄影?#35745;?#21491;图是不是让你更有食欲呢。

提升UI设计细节的方法

设计师不仅要学会精选?#35745;?#26356;要学会如何精修?#35745;?#24038;图是修图前,左图是修图后。一般对于产品精修上会更加注重细节的打磨。修图后的啤酒是不是让你更想来一杯呢~~

提升UI设计细节的方法

细节的打磨不光是局部的打磨,最终会回到整体的把控上。

提升UI设计细节的方法

我们来看一组头像排列的案例,乍看没什?#27425;?#39064;,但是仔细看会发现,每个头像的人物的比例关系和视线都不太统一,我们还可以做的更好。

提升UI设计细节的方法

我们来看下优化后的效果,每个头像的人物的比例关系和视线基本统一。

统一意味着协调一致,元素间的大小、重量、间距、方向、对齐、色彩、形?#30784;?#24067;局、风格等同样也要遵循一定的次序和规律。

提升UI设计细节的方法

我们再来看一组?#35745;?#24038;图给人的感觉比较杂乱,羽毛和球体跟产品本身不够明显,颜色上也比较突兀,所以会给人一种不够聚?#20849;?#21697;甚至杂乱的感觉。

右图在形态、色彩、属性等方面的统一化处理,加强了每个单独视觉元素之间的呼应,使得画面更整体舒适!

提升UI设计细节的方法

前面主要讲了“形、色、质”在细节打磨上的重要性,接着讲到了版式设计中常用的一些细节的处理方法:“留白”、“层次”、“对齐?#20445;?#26368;后提了几点注意事项:拒绝“默认字体”、“精选?#35745;薄ⅰ?#32479;一原则”等。

一句话总结下下今天分享的内容:设计细节的把控就是要注重各个元素包括图形、构图、色彩、文字等之间的关系,使其和谐统一。

?
  • 版权声明:本文源自 老狼(公众号: 应谋鬼计), 共 3485 字。
  • 转载请注明,本文链接:提升UI设计细节的方法

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: