大丰公司

    设计原则 | 在网页设计中彰显自然之道

    日期:2019-04-18 人气:1131972
    导读: 网络搜索已经成为现代人自主寻求知识的一个主要途径,而网页的设计工作也不能只是提供功能,配色排版等也是吸引用户的重要条件。在许多设计师们在搜索枯肠竭力创新时,也有一些人选择返璞归真,借鉴自然。我们将在本文中介绍如何用“液体流动效果”这一元素,来让网页具有生气,为网页的颜值加分,达到令人赏心悦目的效果。 设计原则 简约的背景与配色借助 WebGL

     网络搜索已经成为现代人自主寻求知识的一个主要途径,而网页的设计工作也不能只是提供功能,配色排版等也是吸引用户的重要条件。在许多设计师们在搜索枯肠竭力创新时,也有一些人选择返璞归真,借鉴自然。我们将在本文中介绍如何用“液体流动效果”这一元素,来让网页具有生气,为网页的颜值加分,达到令人赏心悦目的效果。

     
    设计原则
     
    简约的背景与配色
    借助 WebGL、GSAP、Three.js 等较为前卫的技术,将物理运动质感带入 Web项目,在这些项目中得到了体现。虽然我们绝大多数人在享受这些效果的时候,硬件设备的CPU 和 GPU 不可避免地更加消耗性能,但是这并不会带来矛盾,我们也无法阻止设计师和开发者实现这样的效果。
     
    由于我们的设计主旨是以“静”突出“动”,所以过多的配色或者元素可能会遮掩我们最想突出的效果。黑白双色并不一定就令人压抑枯燥,适当的组合更能彰显某一元素的活力。
     
     
    对比感
     
    承接第一条,在保证我们的主角是具有“流动效果”的那一元素之后,我们就要着眼于如何扩大元素与背景之间的对比感。最简单的就是白色背景配动态十分明显的图片,又或者是大片的静与小部分的动,突出二者的界限,可以用抽象的手法,能更容易实现对比的目的。
     
    元素多样选择和唯一使用
     
    我们所说的“液体流动效果”并不局限于水,它可能是云,烟雾,泡泡,斑点等等,相比于水这种具有直观流动感的事物,泡泡和斑点则更具有层次感。设计师在设计时不需要限制元素的选择,但在使用时,一般不会同时使用水和烟雾(举例)两种元素,那样会显得混乱和赘余。下图为以泡泡为主元素的使用案例。
     
    作用和功能
     
    我们已经了解了什么是液体流动效果那么,液体流动效果到底有什么具体的作用以及功能呢?
     
    首先,液体流动效果可以丰富用户体验,给人留下深刻的印象,完善整个页面给人的感觉。液体流动效果可以使整个网站页面看起来更加完善并且富有美感,使得用户更加愿意了解此网站。
     
    其次,它可以优雅地填充留白或背景,避免页面看起来太简单,当一界面只有网站的LOGO的时候,页面会看起来很空,给用户留下不太好的第一印象。合理的利用液体流动效果填充留白和背景,就可以有效的避免这种情况。
     
    最后,它可以放置视觉锚点,以不那么引人瞩目的方式来引导用户注意力到特定的地方,液体流动效果可以利用类似波纹的效果,来引导用户的注意力达到特定的地点,从而使用户关注到网站的重点,达到其目的。
     
     
    斑点和气泡元素
     
    设计师利用诸如斑点和小气泡这样的装饰性元素,分散在网页的各个角落。这些装饰性的元素的形态多种多样,但是总体上有着吸引视线、丰富视觉的功能。即使是基于相同的设计概念,不同的气泡和斑点,让每个设计项目都有着不同的性格。这些元素可以是任何色彩,而微妙的渐变和高饱和度的色调是目前设计师的最爱。斑点和气泡本身在形态上也有着柔和流畅的特点,让整个氛围显得圆润顺滑。
     
     
    设计师借助气泡在整个画布上进行构图,通过衬托来营造深度,借助动效营造动静对比,所有的这些设计可以以不高的成本创造出时髦有趣的设计感。而所有的这些大都是为了一个目的:创造出用户偏好的视觉入口。总的来说,斑点和气泡是一种吸引用户注意力的有效设计元素。如果你用的好,它们不仅可以作为装饰而存在,还可以作为视觉引导,控制整个页面的动线,给用户以视觉上的自然指引,创造出富有流动性的页面布局。
     
     
    自然场景
     
    设计师利用自然环境,液态效果有时只是网页所涉及到的展览当中的一部分,极富多样性的自然场景,不断丰富着用户的空间感受,给用户真实的自然美学感触,创造出移步换景的体验感,“场景+内容”合二为一,能够加深用户的印象。网页作品上,液态效果有时只是网页所涉及到的展览当中的一部分,但是液态效果能起到装饰性作用,营造氛围,传递感受,提升设计感。
     
    液体效果全覆盖
     
    网页设计时,设计师将整个页面覆盖液态效果,使整体质感简约,优雅,精致,液体元素占据整个页面,给用户一种视觉上的空间流动感,别具特色的画面能够给用户留下深刻的印象。
     
    通过上面这些案例,我们可以了解到在设计网页的过程中,设计师是如何利用液体元素的特征使页面达到液体流动效果。
     
     
     

    文本来自采集文章 http://dafeng.07551.com.cn/24/458.html 如需转载或删除,请联系管理员。

    1 2 3 4 5 6 7 8 9
    分享到:
【大丰本地网络公司】——承诺3小时内上门服务!大丰上门全国热线:400-666-2014 【我要收藏此页面】 网站地图 粤ICP备15108339号 网站维护:深一深圳网站建设
全国大丰网站制作-服务网店