这是三种有趣的网页设计趋势,却被低估了

今天要聊的三种设计趋势其实已经出现一阵子了,但是作为一种相对综合的设计手法,他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法,就可以实现这三种设计效果,但是它们不论是从美学特征上,还是从功能性上,都不输于其他的趋势。有兴趣么?不妨来看看吧。


今天要聊的三种设计趋势其实已经出现一阵子了,但是作为一种相对综合的设计手法,他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法,就可以实现这三种设计效果,但是它们不论是从美学特征上,还是从功能性上,都不输于其他的趋势。有兴趣么?不妨来看看吧。

这是三种有趣的网页设计趋势,却被低估了

设计出不同凡响的网站是许多设计师一直追求的事情,所以大家着迷各种时尚的元素,漂亮的配色,流行的趋势,复古的样式,等等。经过时间验证的经典设计、固定的搭配是不错的选择,而逐步展露头角的新趋势,则能更好的满足这一需求。

一种全新的设计手法,融合了最新的设计技巧,展现和前人不同的气场,用更现代的气质来承载内容,这样的网站无疑会更加吸引用户,让访客难以忘怀。今天要聊的三种设计趋势其实已经出现一阵子了,但是作为一种相对综合的设计手法,他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法,就可以实现这三种设计效果,但是它们不论是从美学特征上,还是从功能性上,都不输于其他的趋势。有兴趣么?不妨来看看吧。

1、双色调配色方案

双色调配色已经存在很长的一段时间了,单我们几天所说的双色调方案是在全屏设计背景下,加入渐变效果和高冲击力视觉设计下的双色调配色方案。在扁平化的大势之下,Spotify 大范围使用双色调配色,将这一设计手法推到了潮头。

那么双色调配色具体是怎么一回事呢?

简单说来,是两种色彩来构成一套配色。最常见的双色调配色会选择互补色来进行组合。在更复杂的场合中,会使用其他的组合来营造特定的感觉,打破约定俗成的配色风格,可能会有惊喜。

大多数双色调效果是使用一个色彩鲜艳的色调叠加在照片上实现的,强化深浅色彩对比,从而营造出色彩冲击力。Shopify 对于这种手法的运用非常的纯熟,在恰当的排版设计搭配下,将数十位设计师照片以这种独特的方式展现出来。

从技术的角度上来看,双色调配色可以同许多其他的设计手法、技术一同搭配使用,比如全屏设计,比如响应式设计,比如插画,正如同上面的那些案例中的诸多技术一样。除了独特的视觉效果,它可以用来强调,对比。这是一种非常强的表现手法,用的时候记得适量使用。

这是三种有趣的网页设计趋势,却被低估了

这是三种有趣的网页设计趋势,却被低估了

这是三种有趣的网页设计趋势,却被低估了

这是三种有趣的网页设计趋势,却被低估了

2、分屏式设计

分屏式的网页设计案例正在成倍增长。从技术上来讲,这类网页的设计师喜欢将屏幕均分为并排的两个区块,两者尺寸大小都一样,有的时候还会加上轮廓来强调区域的概念。

这样设计的效果是很酷炫的,在代码编写到位的情况下,网页在桌面端打开的时候,两个区块并排显示,而在移动端上,并排的区块智能地以上下堆叠的形式呈现出来。

分屏是设计的使用其实是可以嵌套细分的,它可以是简单的对半分,也可以套个栅格,无限分割下去,这样的案例非常的多。被划分的区块可以承载相似的、对比的内容,也可以承载截然不同的媒体类型,而栅格式细分的区块还能帮助网站的设计者探索用户真正感兴趣的内容。

分屏式设计对用户是友好的,和响应式设计可以很好地结合起来,同时还可以加入更多的新技术和设计手法。

下面是一些高效分屏的技巧:

  • 当你没有太强的视觉设计之时,注意字体和色彩的搭配
  • 吸引用户的注意力让他们从左向右看,从而引导用户的视觉运动。
  • 使用色块来分割屏幕,为主要信息留下足够的空间,确保整体的可读性。
  • 将分屏视作为超大的卡片。将不同的内容制作成更小的区块,在大的卡片中组成马赛克。
  • 尽量确保每个区块中内容的简单易读。

这是三种有趣的网页设计趋势,却被低估了

这是三种有趣的网页设计趋势,却被低估了

这是三种有趣的网页设计趋势,却被低估了

这是三种有趣的网页设计趋势,却被低估了

3、空间共享式排版

你可能在其他地方看到过这个趋势:文字排版被延伸到了共享的设计空间。在绝大多数的网站中,图像、背景和文字是最主要的元素,它们要么相互嵌套有机组合,要么相互分离。

但是越来越多的设计师开始试图打破元素之间的界限,不同类型的视觉元素打破固有的位置,进入其他元素的空间,堆叠,交叉,错落。看起来还是非常有趣的。

但是考虑到整体的可读性,这种设计还是相当具有挑战性的。

要使用这种设计技巧,最好搭配以简单的排版。文字应当同其他的元素有足够的对比性,从而确保它在横跨多个不同元素的时候,保持基本的可读性和辨识度。这也使得绝大多数这类网站都倾向于使用黑色和白色的文字。

字体尺寸也是一个值得注意的属性,它和色彩控制同样重要。你还需要注意文本部分在不同尺寸的屏幕上的显示和运动,也就是响应式变化中的断点。

在诸多设计案例中,最值得注意的是Deux Huit Huit 。横跨首页主图的文字的运动方式,当它穿越图片、背景的时候,是如何确保它的可读性的。

这是三种有趣的网页设计趋势,却被低估了

这是三种有趣的网页设计趋势,却被低估了

这是三种有趣的网页设计趋势,却被低估了

这是三种有趣的网页设计趋势,却被低估了

结语

各种各样的设计趋势很多,许多趋势在你刚刚了解它们的时候就已经过时了,那些真正站得住脚的趋势大多能同其他的技术、趋势、设计手法能很好的兼容、搭配。而今天我们所说的三个趋势正好符合这一特征,它们能够兼容现代的风格,流行的布局与开发框架,更重要的是它们能看,够看,好看,也不会破坏你的审美。

实现它们并不难,更新、替换、删除也不是麻烦的事情,如果你看厌了现在的网站首页,不妨试试这些新东西,也许能让你心情更好,让用户获得惊喜。

 

原文作者: Carrie Cousins

原文地址:webdesignerdepot

优设译文:@陈子木

译文地址:http://www.uisdc.com/three-essential-design-trends

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23738/

(0)
CatherineCatherine
上一篇 2017-05-06 14:49
下一篇 2017-05-06 16:49

相关推荐

  • 我们深挖的那些设计小惊喜 【UXRen译#151】

    作者: Cosima Mielke |  翻译:Sherry ,校审:佳歧 & Teenie     CodePen网站已成为开发者的游乐场。那是一个你可以驰骋想象、开发创造的沙盘。里面既有实践的东西,也有实验性的概念——是个激发灵感的宝库。…

    交互专题 2017-08-07
  • 华为朱平:用大服务把用户体验引向极致

    4月12日,华为新旗舰手机P20系列发布,同时还发布了保时捷设计Mate RS,以及多款产品。2018年,是手机市场艰难的一年,4G换机和消费升级带来的市场红利正在逐渐失去,5G尚未到来,市场进入一个相对低潮期。这样一个情况下,众多手机厂商面临了较大的市场压力。在这样困难的市场环境下,华为怎么巩固自己的市场地位,甚至扩大市场?华为一惯的态度就是用产品说话,用大大领先对手的产品来证明自己。其实我关心的是,华为P20
    Pro这样的产品,已...

    2018-04-21
  • 交互设计与服务设计视角下,谁才是用户,什么又是产品?

    服务设计,是2017-2018比较火热的一个专业了,相比于交互设计或工业设计,服务设计更关注与利益相关者之间的关系。今年的Aalto New Media 专业的申请中,有明确要求需要根据两篇文章的读后感写一篇Essay(1),其中一篇是“How to Fix Facebook—Before It Fixes Us(2)”,深入阅读之后,有一个明确的观点想和大家分享一下。之前从交互式设计角度或者用户研究角度对于 Facebook 的分析文...

    2018-05-02
  • 在新用户引导流程中,如何用好空状态界面?

    今天的文章,我们将会提供一些使用空状态来优化新用户引导的策略和技巧。

    2017-05-01
  • 「抖音」用户体验分析

    和大部分人想的不一样,我是抖音和快手的忠实用户,每天都会在上面花不少时间。在玩抖音几个月后,我开始思考和分析这两款APP的设计和技术,发现其实其中充满了很多“精巧”的设置。抛开APP的针对群体和社会影响不谈,只想说作为一个普通用户的感受。抖音的交互设计是沉浸式的。在推荐页面,你每次只能看到一个视频,系统默认自动播放。因为没有给你反应时间,我们会不由自主的盯着屏幕看,而人的注意力很容易就被当前的视频(视觉和听觉)吸引。这样的交互好处是人的...

    2018-04-02
  • UI设计中可借鉴平面设计技巧(版式设计1)

    UI设计是随着智能设备的飞速发展、互联网行业的发展以及农林牧渔传统行业的急于转向而兴起。主要是企业对移动设备交互界面的重视。在企业越来越重视界面设计的今天。传统的平面设计能为现在我们的UI设计提供哪些参考呢,我们能从中借鉴的技巧有哪些?今天就从版式设计说起。

    2017-05-04
  • 交互设计新人在阿里的走心实习总结 ▏新手设计成长指南

    互联网行业的设计师,工作中是埋头苦干?还是想要寻找一些能真正提升自己的“诀窍”?其实很多时候,所谓“诀窍”,就是厘清自己的思路,让成长有正确的方向。本文的作者走心地梳理了他在阿里几个月的实习期里为他留下…

    2017-08-04
  • 交互式网站UI设计指南

      Web开发社区有着大量的交互式设计轻松解决方案。虽然现在大多数网站都能够做到交互性了,但是我们需要不断向前、创新。我们很容易将注意力集中到编码方面,但是有时候不同屏幕尺寸的实际设计考虑却往往被忽视。 …

    2014-12-23
  • App界面交互设计规范

    APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、…

    2015-11-08
  • APP动效交互|切换动画设计

    功能性的动画微妙,清晰,逻辑清楚,能够减轻用户认知负担,建立更好的人机交互体验。而且,它还可以赋予界面生命力。

    2016-07-14