2024年十大网站设计趋势

1. 卷动网站取代点击

单一网站越来越长已是很普遍的做法，尤其是在移动设备普及的时代，首页通常不置链接，改将所有内容放在单一页面，让低头族「滑上瘾」。因为比起在一堆链接中跳转，必须不断重新等待新的页面加载，信息通通放在一页的形式更容易浏览。而且不再只是首页「变长」，其实「about」或描述产品的网站，都能采取卷到底的方式，比如苹果 iPhone 6 的呈现，就很符合长网站的趋势，把所有规格与功能全部放在单一网站内，并且增添了一些精致的动画元素，抓住网友卷动全程的注意力。

2. 运用叙事与互动制造惊喜

精彩的内容是决定网站优劣的关键因素，如果善于以说故事的方式呈现内容，更是大加分。西雅图 Space Needle 网站，运用数字叙事与设计，生动的述说了 Space Needle 的背景故事。同时也运用 2015 的另一个显著趋势：互动，带给网友宛如亲临实境的独特体验。在网站设计中交互使用互动与动画，而且运用得当，能够制造惊喜，让观者留下深刻印象，浏览 Impossible Bureau 时，一边滑动滚动条、一边滑过不同元素，会有各种令你惊奇万分的互动感

3. 背景争夺战：大张背景图 vs. 大型色块

前几年，一定看过不少大型图片作为背景、文字浮于其上的设计，这是网友打开网站首先映入眼帘的部分，觉得腻了、想要「非主流」一下吗？那就逆势而行。有些新网站就选择抽除背景图片，只留下巨大的色块与文字。抽的好处除了特别突出之外，也有助于改善加载速度。在一片大型背景图片的网站中，The New Wave 优雅的设计值得参考。

4. 去除非必要的元素，简化再简化

有个设计理论是这么说的，所有非必要元素全部都被清除之后，设计才大功告成。2015 年可能会是设计师大举实践这个理论的年份。前面所提的 New Wave Company 与 Rareview Digital Agemcy 网站都属「去除大型背景图片」的模范。后者更将背景颜色、复杂的版式通通扫光。过度设计、过多影像、过多色彩的网站充斥，极端简洁的设计反倒显得特别。

5. 固定宽度置中版型

过去几年大部分网站多把「banding」或宽度（width）设为 100%，影像与区块随着浏览器视域而变化。在更之前，设计师倾向设定固定宽度，并将图像置中在页面。这种固定宽度的趋势以现代化的面貌，出现复兴的迹象，有些网站选择设定「最大宽度」，让内容在浏览器中置中。Michele Mazzucco 的网站就是一个例子，你发现什么玄机了吗？缩小浏览器时，含有主要内容的色块占满屏幕，放大时却有留白。

6. 专业高质量、独一无二的摄影

为求方便也为减省成本，图库影像还是很多设计师的选择。不过最近窜起的新网站，宁可多花一点钱请专业摄影师拍摄高质量、独一无二而且完全按照网站目的需求定制的影像，不仅能够切实展现网站品味，还能避免与其他网站「撞衫」。Grain and Mother 的网站图片是几个人坐在餐桌前，彷佛开心地正在谈论什么事情，他们不是什么临演，而是 Grain and Mother 的创办人与员工。如果点进其「about」页面，美丽且专业的影像肯定会夺走你的注意力，美妙的办公空间都是真的！

7. 手机菜单移植回网站

目前大部分网站还是比较重视桌面版，无法完美过渡到手机与平板设备。不过响应式设计（RWD）兴起，帮助设计师顺利让网站顺应设备，无论何种屏幕都能有最佳浏览体验。在这样的趋势下，我们开始看到本来在手机上流行的元素，反倒移植回桌电上。比如 24 Ways 与 Rawnet 都有如同 app 与响应式的菜单，尽管是在桌电观看，却像是在用手机浏览。这两个网站一改传统水平菜单的形式，而是像手机版网站常见的直式 flyout/sideout 菜单。

8. 主菜单藏起来！

有些网站则把菜单藏起来，唯有网友点击或悬停在某个元素上，才会开启菜单，尽量维持画面整洁、强调功能性。这个同样源自手机屏幕特性的设计，或许也将成为 2015 年的趋势。看看 Brian Hoff Design 新网站，右上侧置放汉堡图示，由于用户已很习惯在手机上看到这种代表菜单的象征，因此并不会无所适从。

9. 超级大的字型（typography）

前面所提的示例网站，绝大多数都有个相同的特征：巨大的文字标题。2015 年这样的流行将会继续，而且可能有愈长愈大的现象，就像本地面上看到一架即将降落的飞机，那么大。Tiny Giant网站超大标题直冲眼帘，要忽略也难。众声喧哗的时代，就是要比别人更大声，才有被看见的机会，标题字型，在 2015 年会继续放大。

10. 不受环境优劣影响的浏览体验

本文提到的网站设计趋势，多数都出自为网站「减肥」，加快手机或平板，以及带宽不足环境的加载速度。网站设计师与开发者越来越重视网站「重量」以及使用者与其互动的形式。如何在移动设备中、不同带宽环境下营造同样良好的体验，也是 2015 年益发重要的问题。相信今年我们会有更多更顺畅的网站，不会载到一半就喊咔。

另外数字营销咨询网站 Econsultancy 作者 Christopher Ratcliff 根据自己的观察，并且访问了 Dan Barker 与 Chris Lake 两位营销专家，也统整出 17 项 2015 年网站趋势，同样相当值得参考。以下节选出与 The Next Web 没有重复的观点：

1. 视差滚动：Wordpress 等网站制作平台提供视差卷动的模板，因此我们可以期待未来出现更多高度创新、以叙事为主体的网站。

2. 卡片设计：前几年类似 Pinterest 的卡片瀑布流今年可能会卷土重来，这种重视影像的设计非常符合「TL;DR（太长没读）」的网络群体，也非常适于呈现在移动设备与响应式设计。

3. 物质设计（material design）：拟真设计与扁平设计的交叉点，Google 去年推出的 material design，今年预计也将大为风行。

4. 幽灵按钮（ghost button）：按钮透明化，仅以能够识别的超细边框，包裹无衬线字型。一方面减少按钮与背景的突兀感，一方面依然有清楚的指向。

5. 动态设计（motion design）：比如不断卷动，不会直接出现图片，而是先有色块才有图片开展。或者数据直方图「动起来」。

6. 模块卷动（modular scrolling）：一般我们是卷动整个网站，但卷动个别字段也是没问题的。

7. 色彩渐变：选择一个色彩作为主体，配以许多深浅不同的相同色系。

8. 固定的导航栏：无论你卷动到哪个位置，导航栏永远固定在最上方，方便使用者在各种页面中切换，用处较为复杂的大型网站如 Facebook 就会使用这种设计。

9. 移动第一，但非移动唯一：毕竟还是有一大票人工作倚赖桌面计算机维生，比如正在看本文的网站设计师们，对吧～