24小时服务中心

售前咨询:

点击这里给我发消息

售后服务:

点击这里给我发消息

一起来看看近年来网页设计的流行趋势-下

当前位置:首页 > 帮助中心 >

较资深的用户或设计师应该都还记得,90年代大家特别喜欢使用繁复的 GIF 动态档来装饰网页吧?而现在最流行的网页风格反而是简约的扁平化设计。 网站设计 趋势 可以反映当时的技术、使用者习惯、装置、美学与设计思维的不同,相当有趣并值得探讨。

举个最近流行的趋势吧!我们可以看到响应式网页设计 (RWD)越来越流行,许多网站皆改为此方式来设计,除了对移动装置用户更友善外,甚至也影响 Google 的搜索排行。

接着,就让我们透过UXPin 针对今年度所见的趋势整理而成的文章,一起回顾今年的网页设计风潮与展望明年可能会流行的趋势罗~

3. Material Design: 后扁平化设计时代的创新者

去年,Google 发布了它的设计风格语言: Material Design。它利用阴影来表现各个状态,而阴影的深度又能带给使用者操作扁平化物件的真实感受(例如物件前后关系)。

Material Design 目的是希望创造出简洁、现代的设计风格,并专注使用者体验(UX)。然而,过去 Google 与设计美学谈不上关系,而这次 Material Design 发表后,反而造成流行并受到各界赞扬。虽然 Material Design 的简约设计元素,与扁平化设计相似。不过相较扁平化,Material Design 使用了深度表现与阴影,更可表现元件的前后关系。

尽 管 Google 提出这个设计语言,想要打造可供跨装置使用的漂亮 UI 与良好体验。但至今,应用 Material Design 的产品大多是 app。Google 也发现了这个现象,因此在七月时发布了网站可用的套件 – Material Design Lite(MDL)。这个套件结合 vanilla CSS、HTML 和 JavaScript,并希望它够轻量并易开发人员使用,同时保有 Material Design 的视觉元素。此外,MDL 并不是依赖在特定框架上,所以设计师可以用各种前端方法来设计网站,同时它的程式也非常轻量化。

4. 响应式设计

近几年,因为移动装置普及,网站响应式设计显得格外重要,同时也相当受到欢迎(Responsive web design,RWD)。

以企业的角度而言,建构一个功能齐全且对移动端友善的网站,Responsive design 是一个相对简单且省钱的方式,但若是应用错误的方法,可能会影响效能。藉此,Guy’s Pod 向设计师提出了一些建议:

1.图片显示避免使用 display: none 的写法。虽然使用者没有看见图片,但其实仍然是有被 load 进来的,因此在网页的效能上产生了不必要的负担。

2.图片大小使用百分比来定义。

3.有条件式的引用 JavaScript,因为许多 js 元件在小尺寸的装置上(手机)是无法被使用的。特别需要注意的是第三方 script(如社群分享按钮)对网站而言,常常会有负面的影响与降低效能。

4.使用 RESS – Responsive and Server Side

5.为了有效的量测与优化每个网站,应将效能测试这项目加入到流程中。

效 能不单单只是使用者判断体验好坏的关键,同时也会影响 Google 的检索排名。此外,由最近流行的极简风格让网页排除了不必要的元素而减少页面的复杂性,非常适合响应式的设计。同时,我们也可以看到许多具响应式设计的 网站使用卡片式的排列,可在不同萤幕尺寸下,轻易的重新调整排列。

响应式设计已慢慢由趋势转变为最佳的实践方式。然而设计师们也必须想出一些聪明的方式解决任何速度的问题。无疑地,响应式设计是十分有用且通用的,但它也应该是高效能的,才可以提供出色的使用者体验(UX)。

5. 扁平化设计会退烧吗?应该没那么快!

扁平化设计风格其实已经流行一阵子了,目前它也与其他相似风格与设计语言融合得很好,如极简主义、响应式网站设计与 Google 的 Material Design。

未来,我们推测有更多扁平化设计的元素会流行:

    长阴影(Long shadow):长阴影可以带给扁平元素视觉上的深度。

    鲜明色调: 一些受欢迎的 UI 模板都开始使用越来越鲜明的色系。

    简单的文字排版:简单的文字排版,可以确保文字在扁平化设计下,保持清晰与可读性。

    幽灵按钮(Ghost button): 幽灵按钮的意思就是,让按钮仅留下外框线与说明文字,当使用者透过滑鼠 hover 时,才呈现变化。这样可以让使用者更专注按钮的功能性,避免上方的颜色、形状或视觉表现而分心。

    极简主义: 省略不必要的元素,让画面看起来清新不拥挤。

虽然这些设计趋势是因为带来某些效益而受到欢迎,但千万别盲目地追求流行,一定要以使用者为中心思考,确保应用这些设计趋势对他们是好的。例如,电商网站就不适合完全的无限滚动页面。所以,这些趋势仅是设计师脑袋中的资料库,必须深思熟虑的选择其中最佳方案。

关键词:扁平化设计,网页设计,响应式网页设计