向资深UI设计师"取经":用户界面怎样设计才更显高级与质感?

发布日期:2018-02-27
浏览次数:318
  
undefined
 
用户界面(UI)是一个网站的"门面担当",它决定着用户对网站的第一印象,影响着用户与网站互动的产生。在《界面设计高手不会告诉你的8条UI设计准则》中,小飞就简要介绍了用户界面设计的8条准则,比如通用性、一致性、易用性等,这主要是从UI界面的性能方面出发的。而对于很多设计师来说,他们还希望UI界面能呈现更佳的视觉效果。如何提升UI界面的设计感?在今天这篇文章中,小飞就总结了7个有效、实用的技巧,它甚至不需要你掌握任何平面设计方面的知识,快来一起看看吧!
 
 
 

1. 利用颜色和字重来创建视觉层级

在创建UI界面的视觉层级时,很多设计师最常见的一个问题就是过于依赖字体大小的调整。举个栗子来说,如果这段文字很重要,他们会选择增大字号;如果那段文字比较次要,他们会选择缩小字号。而事实上,除了利用字体字号大小外,我们还可以通过使用不同的字体颜色或字重来实现UI界面视觉层级的架构。比如说,当重要文本呈现时,我们可以配以明亮的颜色,当次要文本呈现时,配以稍浅的颜色。
 
undefined
 
如果有必要的话,我们甚至可以同时使用2-3种颜色:
  • 主要内容使用深色,并不一定就是黑色,(比如文章的标题);
  • 次要内容使用灰色(比如文章发布的日期)
  • 辅助内容使用浅灰色(比如页脚处文章的版权声明)
 
undefined
 
同理,不同的字重也可以用来提升UI界面的视觉层次感:大部分文本采用常规的字重(如400-500,具体以字体为准);想要重点强调的文本采用较重的字重(如,600-700,具体以字体为准)。对了,在网页界面上,字体的字重最好不要低于400,这是因为400以下字重的字体在尺寸缩小的情况下可读性很差。在这种情况下,如果你想弱化某些文本,可以考虑选择浅一点的颜色或是更小的字号。
 
undefined
 
 
 

2. 不要在彩色背景上使用灰色文本

我们之所以在白色背景上使用灰色文本(而不是黑色文本)主要是为了降低两者之间的对比度,淡化其视觉效果,营造清晰但不突兀的视觉层级。而当网页背景是彩色的时,使用灰色文本的这个技巧就不适用了。
 
undefined
 
 
那么在彩色背景下,如何有效降低文本和背景的对比度、创建良好的视觉层级呢?
 

1). 使用透明度高的白色文本

在彩色背景下,我们可以使用透明度高的白色文本。白色文本的高透明度,能让背景的颜色透过来一点,进而降低文本和背景之间的冲突感,呈现合理的视觉效果。
 
undefined

 

2). 基于背景色选择文本颜色

如果网站背景是一张图片或某种图案时,半透明的白色文本可能会显得比较单调、乏味。这时,我们不妨基于背景色选择一种字体颜色,比如选择色调与背景色一致的,再进行饱和度和亮度的微调。
 
undefined
 
 
 

3. 垂直阴影设计

相比Blur(模糊距离)和Spread(阴影尺寸),V-shadow(垂直阴影)的使用可以让box-shadow更加突出。另外,通过这种方法设置出来的页面阴影也更加自然,因为垂直阴影的设计方法模拟了最常见的光源特征,光线从上向下照下来营造一定的阴影效果。如果您对这种设计手法很感兴趣的话,可以浏览Material Design Guidelines
 
undefined
 
 
 

4. 少使用borders

一提到不同元素之间的"泾渭分明",大家很容易就会想到borders(边框)。其实,borders并不是区分元素的唯一方法,它也不是百利而无一害的。比如,当页面中的borders很多时,它不仅无法起到原有的作用,反而会让整个页面显得十分拥挤、杂乱(见下图)。
 
undefined
 
 
所以,当你下次想要区分不同元素时,也可以尝试使用下面这些方法:
 

1). 使用box shadow

Box shadow可以很好的刻画出元素的轮廓,营造边界感。而且它看上去更加微妙,不会分散用户的注意力。
 
undefined
 

2). 使用不同的背景颜色

当你想要区分不同元素时,你还可以使用不同的背景颜色。下图就是一个很好的栗子。图中左边界面使用了border,右边界面采用了不同背景颜色。相比较而言,右边界面上方白色区域和下方浅灰色区域之间不仅界限分明,还更加和谐。
 
undefined
 

3). 调整间距

调整间距可能是区分不同元素最简单的一种方式了,它根本无需在界面上引入什么新的设计元素,只需要多留一些空白即可。
undefined
 
 

5. 不要一味地放大小图标

当你在设计一些页面时,比如着陆页的"Feature",你可能需要一些大图标来作为视觉锚点,这时你可能就会去Font AwesomeZondicons这样的平台找几个图标,然后将它们放大到自己需要的尺寸。由于现在很多网站提供的都是矢量图标,所以你不必担心这些图形在放大之后会失真。不过,尽管这些图标不会失真,但如果你将这些16-24像素的图标放大3、4倍,它们看上去就会缺少细节、显得比例失调、颇不专业。
 
undefined
 
那么遇到这种需要使用大图标的情况我们应该怎么办呢?这时,我们可以尝试将小的图标放在另一个图形中,让图标看上去视觉面积更大、细节也更丰富。当然,如果你的预算充足的话,你还可以购买一些大尺寸、高质量的图标集,类似HeroiconsIconic这样的。
undefined
 
 

6. 在界面中使用多彩单边边框提升个性

如果你对平面设计不是很精通的话,该如何提升UI界面的设计感呢?这有一个很简单的技巧,就是在界面的边缘区域添加单色或渐变的粗线条,这能让平淡无奇的网页界面显得更加生动活泼。比如说,在警告弹出框的侧面添加边框;
undefined
 
或是用来强调有效的导航条目;
undefined
甚至是用在整个页面的顶部;
undefined
 
在网站的界面添加这样的形状,并不需要你有任何平面设计的基础,就能让你的网站设计感十足。退一万步讲,如果你实在不知道给这些线条设置什么颜色,还可以通过浏览dribble上的流行配色方案中寻找灵感。
 
 
 

7. 并不是每个按钮都需要背景色

当一个页面上有多个CTA按钮时,我们总是习惯性的给这些按钮加上背景色,比如给积极的行为(如购买按钮)设置绿色的背景,给消极的行为(比如删除按钮)设置红色的背景。尽管添加背景颜色是按钮设计中的一项重要原则,我们在设计按钮时还应该考虑到一个更重要的维度,那就是"视觉层级"。同个页面上不同按钮的重要性都是不同的,大多数网页通常都只有一个最真实、最基础的行为操作、一些二级的行为操作,然后就是几个不太重要的三级操作。这意味着不同的按钮可以采取不同的设计方法,并不是每个按钮都是需要设置背景色的:
  • 主要CTA按钮应十分显眼,在这可以使用高对比度的背景色;
  • 二级CTA按钮应清晰可见,但不需要着重突出。轮廓样式或低对比度的背景色都是不错的选择;
  • 三级CTA按钮应是可见的,但不能占据用户过多的注意力。它们最好设置为链接样式。
undefined
 
可能说到这,不少人会问到:诸如删除按钮等消极操作难道不应该使用红色以示突出吗?其实,这也要视情况而定。如果这些按钮不是页面的主要按钮的话,你可以将它当做二级或三级按钮的方式进行处理;
undefined
而如果它是界面的主要操作行为,那肯定要使用显眼、加粗、红色的样式!
 
undefined
 
 
快来起飞页自助建站平台搭建一个属于你的网站吧!

登录后即可发表评论,立即登录.