从网页设计的简史,见证当今网页设计技术的主流趋势

从上世纪90年代至今,网页设计技术不断进步。过去网页的本质仅用於存放资讯,而现代网站早已不满足单纯在网页上放置资讯,而是着重於品牌形象的加深,从网站的UX/UI设计,拉近品牌与顾客的距离。

上期小编和大家一起探讨《2010~2021年网页设计流行风格分析》,今期将从网页设计的简史,延伸到如今的主流趋势,和大家一起见证网页设计技术的演变过程:

【网页设计简史】

1989 — 网页设计的兴起

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

网页设计技术刚兴起时,整体介面就像打开Windows命令提示字元的介面,只有单色像素风格的纯文字图像。

1995 — 表格式网页设计

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

那年网页设计技术迈出关键的一大步:图像显示。

这个时期设计师普遍使用HTML表格方式设置网页布局,同时网页架设人员将设计稿切片辅助表格设计,逐步完成页面的每个部分。

同年 — JavaScript技术出现

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

JavaScript技术的出现,打破了HTML表格的局限,同时让背景图像、GIF动画等成为网页设计的主流,让网页可以根据使用者的动作,作出不同反应,譬如弹出视窗就是从此时期常被用於网页设计中。

1996 — Flash技术的诞生

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

Flash是一种支援多媒体创作和播放的技术,虽然早於2020年时已经确认停止更新,但在当时确实是很前卫的网页设计技术,并且设计师亦重度依赖Flash制作网页、广告、软体、游戏等产品。

1998 — CSS技术逐渐普及

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

虽然CSS是和JavaScript技术一同出现,但因为浏览器兼容性问题,一直过了好几年才逐渐普及。CSS是一种用来表现HTML或XML等文件样式的计算机语言,不仅可静态修饰网页,还可配合各种脚本语言动态地对网页个元素进行格式化。

2007 — 网格系统

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

这年不仅是第一代iPhone发布的年代,也是各大厂商相机推出低价智慧型手机常见市场的时期。五花八门的荧屏尺寸,让网页浏览舒适度大大减低,因此改进切片设计的使用成为首要任务,使得各类网格系统如雨後春笋般相继出现。经过市场机制的淘汰过後,最後留下960网格系统。

2010 — 响应式网页

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

此前网页设计风格多从极简主义延伸,2010年後使用智慧型手机的用户愈来愈多,网页设计的开发重点也从技术转逐步转移到设计、创意、视觉、互动等方面。

【分析近十年的网页设计趋势】

响应式网页开始广泛应用後,各类网页风格层出不穷,下面我们一起看看近十年的网页设计趋势都有哪些变化?

变化一:极简主义

在网页设计应用层面上,极简主义通常会在网站基本结构上,剔除多余元素,并放大必要视觉元素,使网页设计的视觉效果更加吸引,从而给使用者留下深刻的印象:

① 文字放大

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

网站的Slogan设计以大文字为主凸显想传递的资讯,让使用在进入网站的第一瞬间便了解品牌所提供的产品及服务,并冲中感受品牌的独特性。

② 元素放大

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

突出首页的产品情景细节图,让人一眼便看懂网页设计贩售的产品,而精致的图片、细节的展现往往能激发使用者的购物慾。

③ 极端主义

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

与极简网页风格不同,极端主义透过颜色的交替设计,试图挑战使用者的感知,夸张的设计让画面更富有张力。

变化二:不对称布局

所谓不对称,是指设计师利用不对称的“元素缺乏相等及均分”特性,创造出视觉的和谐与平衡。

① 消除行距的限制

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

透出消除网格边界与间距的限制,将介面中的不平衡化变为不同的平衡美感,让画面产生延伸感,令使用者不自觉地滚动网站直到页面底部。

② 单色块阵列

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

利用大小不同且色彩鲜艳的色块吸引使用者的注意力,让使用者能透过文字与图像了解品牌所传递的资讯。值得注意的是,色块如果没有大小或色彩对比之分,便不能发挥其效果;同时文字亦要经过顺序设计,而不是随便将内容置入其中。

③ 强调视觉动线

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

为介面增加强调视觉的动线设计,让画面形成张力,产生动感与活力,让使用者主动将网址分享给他人,达成另类的宣传和推广效果。

④ 多重曝光

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

多重曝光是指融合两张不同照片形成视觉上的冲击。如今这种设计时常被运用到网页设计上,为网站带来更强烈的对比,吸引使用者的眼球。

⑤ 留白设计

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

有时大量文字的填充,未必能将所有信息都呈现出来;相反,适当的留白更能突显想表达的内容,并有效提升网页设计的质感,而这样的质感亦会反映在品牌调性,使品牌形象获得更好的提升。

变化三:插画艺术

在网页设计上,与其使用一段长篇大论的文字来说明,不如使用一张插画要来得更清晰易懂,也赋予使用者温暖且证明的能量。

① 扁平色块

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

用纯色块表现画面的轮廓,能弱化视觉透视的同时,也减低光影与材质纹理对设计的影响,给使用者带来乾净利落的感受。

② 等距视角

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

等距视角的插画效果能使2D绘图增加立体感,让画面变得更活泼,也更有动态感。这类网页设计的通常会使用较为强烈且饱和的色彩方案,丰富的色彩调性能更好地拉近品牌与使用者之间的距离。

③ 色彩轮廓

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

不同於扁平色块风格,这类插画的色调较为单一,同时也不会展现出过於活泼的特性,但能提升插画的层次感。此风格非常适合较为沉稳的品牌使用,搭配文字以漫画或动画形式展示品牌资讯。

变化四:滚动视觉差

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

滚动时差设计能让网页元素在滚动中差生位置变化,形成层次错落的视觉效果,带来非常不错的视觉体验。而自2011年滚动视觉差出现後,加上网页设计技术不断强大,这种技术的表现方式也变得愈来愈丰富。

变化五:深色模式

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

2019年IOS和Android系统都推出深色模式的更新後,市面上众多APP设计也纷纷推出深色模式的主题配色。事实上,深色模式之所以风靡的原因,除了它能大大提升内容可读性外,部分系统还要求对不支持深色模式的APP采取强制下架的措施。

同时,深色模式的出现,确保了网站的吸引力能足够让使用者停下来探索,也赋予使用者部分的控制权,好让网站可以产生独特性,逐步开放网页或APP的“个性化设置”自由度。

变化六:融入新的科技技术

从网页设计的简史,见证当今网页设计技术的主流趋势

网页设计趋势

随着AI技术的成熟,很多企业都采用多通路行销方式,整合线上线下资源,帮助使用者进一步了解产品与服务,提升销售的营业额。

虽然目前全通路体验对大部分企业来说成本十分庞大,但在资源有限的情况下,我们可以将新科技技术,如AI、AR、机器人学习等技术逐步融入到网页设计中,通过追踪使用者的搜索习惯,找出创造最大效益的路径,并一部份一部份进行整合,逐渐打造全通路体验。

总的来说,以上所提出的内容,都应该围绕品牌调性、品牌定位以及使用者体验来设计,并且经过重重测试,不断优化改善,直到网站的操作变得更加简单方便,想表达的讯息也可以一目了然,这样才能让网页在网络庞大的资讯中脱颖而出。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/41985.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
InspirrInspirr订阅用户
上一篇 2022年6月23日 16:31
下一篇 2022年6月23日 16:31

相关推荐

  • 网页设计预测:不同类型设计的色彩趋势

    色彩,无论是对网页设计、APP设计还是平面设计等都是非常重要的部分。很多时候,我们在欣赏优秀设计作品时,总以为色彩是保持不变,但实际上色彩每年都有新的流行趋势。 因此,当你准备开始新的设计项目,了解最新…

    2022年6月25日 建站资讯
    0162
  • 成功的网页设计要素:导航

    一个成功的网页设计一定是内容,设计,兼容性这3点完美结合的结果。你必须考虑用户体验,配色方案,文字内容,当然还有网站是否在手机上运行良好。 在线下宣传力度有限的情况下,网络是你推广产品或服务的最好手段…

    2019年8月19日
    0270
  • 分享关于网站建设中移动端的重点。

    企业想要在互联网时代中发展良好,就必须开始推广自己的企业,建设一个企业网站已经是每个企业的标配了。那么,在网站建立的初期,基本上都是以电脑端为主。然而在近几年里,手机等智能设备取得了很好的效应,同时…

    2022年7月3日
    0120
  • 如何设计折叠屏?超详细的折叠屏设计指南。

    最近做了HUAWEI Mate Xs手机折叠屏的相关设计,借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家,希望对各位设计师同学有所帮助和参考。在这里我使用的是华为折叠屏(HUAWEI Mate Xs 上市时间2020年…

    2023年3月1日 SEO操作
    06
  • 有价值的极简风指导方针  

      只有着陆页:对於一些内容比较多的网站建设类型来说,整体采用极简风格是不太合适的。不妨设计一个比较极简风的着陆页,这样能够加深用户对网站的印象,同时提升有效的转化率。 乾脆俐落的设计稿:很明显,…

    2022年6月25日
    0117
  • 介面动效设计服务了哪几种系统状态?

      载入指示器   对於许多app介面设计来说,载入绝对是不可避免的。虽然动效的使用并不能很好地解决载入的问题,但是它能够让用户等待的过程有点趣味。   下拉刷新   这是非常常见的动效了,用…

    2022年6月25日
    0112
  • 为何你的页面成品与设计稿差别大?  

      以原生的体验类比 很明显,原生的页面体验会比较流程,尤其是APP产品页面设计,视觉效果上也会比较华丽。因此很多设计师会尽量地向原生体验靠拢。但是要实现起来,其实很困难。很多APP产品页面设计的体验换…

    2022年6月25日
    0132
  • Say no!这两种错  

      用户易被困在子级页面 必须要为特殊的信息内容设计单独页面或子级页面的界面设计项目,一定要考虑到用户是否容易被困在里面的尴尬情况。很多用户都经历过这种情况,莫名就进入了一个新页面,却找不到返回主…

    2022年6月25日
    0121

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息