最前线|2018年3月即将流行的3种网页设计趋势

发布日期:2018-03-09
浏览次数:158
  
undefined
 
在《2018年如何做网页设计?这里有一份新鲜出炉的UX趋势指南》中小飞介绍了如何面向用户体验做好网页设计,比如注重内容设计、个性化设计等等。不过,不少站长反馈说这些趋势虽然能够指明一定的方向,但都太笼统了,希望能掌握一些具体、实用的设计指南。因此小飞今天就带来了本月流行的3个设计趋势,它们也有可能会一直流行下去。快来和小飞一起看看吧!
 
 
 

1. 海报式/电影式主页

以超大图片和视频为代表的全屏式主页在网页设计领域已经流行过一段时间了,不过它最近又出现了一些细微的改变:进一步移除首页的导航元素和文本,更加追求给用户提供海报式或观影式的视觉感受。这就是海报式/电影式主页的诞生,这种设计趋势可以看成是极简主义理论与多彩配色的"混搭",一方面,主页元素很少,十分简洁;另一方面,页面配色很是丰富。海报式/电影式主页的设计成败主要取决于页面图片和文本的选择,由于页面上主要呈现的是这两个元素,它们需要足够出彩才能吸引用户的注意力。另外,由于页面上没有导航菜单或CTA按钮等元素,用户在浏览过程中可能会感到困惑,进而选择直接退出网站。因此,在设计海报式/电影式主页时,我们不仅要想方设法创建令人印象深刻的视觉效果,还应记得在用户浏览过程中给予一定的引导。下面是海报式/电影式主页的3个示例:
 
Tofino Resort的主页背景是一张优美的风景图片,再配上有趣的文字,很能吸引用户。为了贴合用户的点击习惯,"Book Now(立即预定)"按钮被放在了页面的右上角。尽管这个CTA按钮所占空间不大,但由于网站的导航菜单是汉堡图标式的,它很容易就成为了页面的焦点。页面右下角的快捷跳转键也能为用户如何进一步进行浏览提供了线索。
 
undefined
 
Ruya Digital在网站中运用了黑色的背景,风格更加简约,不过主页中间的动画和波浪式的文本处理让整个的网站的视觉呈现十分新颖。其他元素,比如附加文本、联系我们、背景音乐设置等都设置的比较小,多处于屏幕的边缘位置,以确保用户始终将注意力集中在主要信息上。和上一个网站一样,这里也没有明显的导航菜单,你需要进行点击才能进入菜单页面。
 
undefined
 
如果说前两个网站完美呈现了海报式主页,那么Flux Broadcast这个网站就是电影式主页的代表。它的主页上是各种短视频的合集,再搭配一些简短的文本或其他元素,以呈现给用户观影式的视觉体验。同样,这个网站也采用了汉堡图标式的导航菜单,不过,图标上蓝色的圆圈让它突出不少。页面右下角还设计了动态的箭头标志,给用户提供了继续点击浏览的视觉指引。
 
undefined
 
 
 

2. 紫色配色

随着紫外光色成为2018年的年度代表色,越来越多的网站也开始使用紫色为主的配色方案了。关于2018年度代表色大家可以浏览《2018年度代表色公布:超难驾驭的【紫外光色】是何方神圣?》。在网页设计之中,紫色一直不是设计师们的首选配色,这是因为这种颜色通常比较复杂,用的不好,不仅无法提升网站格调,反而会影响用户体验。不过,很多网站项目的实践也证明紫色是足够友好的,它可以与多种颜色趋势很好地搭配在一起,不管是Material Design中的明亮色调,还是极简主义中的黑白色。紫色为主的配色方案有很多,它可以是略带红色&粉红色的、也可以是偏向蓝色的,甚至可以是接近黑色的暗色系。另外,由于紫色在网页中并不常见,如果你设计得当,不仅可以体现自己的设计能力,还能将自己的网站与其他网站区别开来,给用户留下深刻的印象。还是不知道怎样使用紫色为主的配色方案?看看下面这3个示例吧!
 
undefined
 
undefined
 
undefined
 
 
 

3. 渐变色+文本

渐变色的回归我们在《满血复活!重新回归网页潮流前线的渐变设计》中早已谈过。不过渐变色通常被用在网页背景或图片上,其实它还可以用在文本上起到强调的作用。字体排版的大体趋势一般倾向于略带一点微妙效果的简单字体,这些微妙效果可以是图片/颜色填充、粗体大写、动画效果等。而如今,渐变色也开始加入它们的阵营了。老实说,如果你对渐变色不感冒的话,你可能并不会想要使用这条设计趋势。但渐变色文本确实可以给网站带来十分酷炫的效果,下面是3个有关渐变色文本的栗子:
 
Zoocha在网站的主页使用了现代感十足的衬线字体+浅黄色、蓝色的渐变色,由于网站的背景十分朴素简洁,这个字体完全凸显出来了,用户能够快速get到你想要传递的信息。
 
undefined
 
Love Lost这个网站在复杂的字体上使用了粉色和白色的渐变搭配,再配以动画效果,以吸引用户的注意力。这里的文本排版之所以能够起到作用很大程度上是因为它完美契合了网站的主题: Love Lost是一个朗诵爱情诗歌和信件的网站,粉色不正是爱情的颜色?
 
undefined
 
Michael Rappaz's 这个网站在应用渐变色文本的同时也使用了动效,可以给用户提供十分有趣的视觉体验。网站的其他元素(文本等)都相当简单,没有任何动效或颜色,这也让屏幕中间的文本成为了视觉焦点。在这设计师还使用了今年的流行色---紫色。
 
undefined
 
 
上面这三种趋势都各有自己的优缺点,全屏海报式的主页尽管缺少明显的导航菜单,但却能呈现给用户极佳的视觉体验;紫色配色虽然有点复杂,但也可以和其他趋势很好的结合起来;渐变色文本很是炫酷,可以快速突出、传递网站重要信息,却不一定能博得所有用户的好感。你觉得哪个设计趋势的潜力最大?快来和大家一起分享分享你的看法吧!  

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