企业网站建设中网页设计的要点整理

1. 打破框架的版面设计/不对称网格

过去几年，一成不变的网页布局（layout）已开始令人疲乏，幸而Flexbox 以及CSS Grid!（Chrome、Firefox 预计于今年三月开始支援）等技术的出现，让版面设计变得更灵活弹性，为设计师、工程师带来更宽广的挥洒空间，今年将可看到更多网站打破惯有的「对称」、「秩序」守则，形形色色，层层叠叠的网页布局肯定精彩。

不过不变的大原则是，设计的重点是要烘托「内容」，内容才是骨肉、才是人们光临网站的主因，因此设计的尺度上也需斟酌，天马行空之余，别反客为主，夺走内容的风采。

完美对称的时代已经过去了。虽然分屏设计在2017年流行得一塌糊涂，但是这一趋势在逐步的沉淀和演进之下，开始有了新的变化。

均匀的对称式布局并没有非对称式的分屏设计有表现力，这促使不对称网格开始逐渐流行开来。

为了使得不对称的设计更为有效，设计师需要一些独特的元素让不对称的网格下，整体设计是足够平衡的。在整体布局下，留白，文本和图片等视觉元素需要进行合理的配比，在吸引用户的同时，不至于失衡。

2. 极简out，色彩在跳舞！

我的理解：微渐变 / 多色彩蒙版重叠人像/ 多色彩蒙版重叠人像+几何图形

色彩作为表达个性的重要元素，在极简风蔚为风潮时却被剥除，不过约莫去年开始，大面积渐层色块似有强势回归，Instagram、Asana、Stripe 都以饱和的渐层重塑品牌视觉主调，今年绚烂的色彩以及流动的渐层更将大行其道；此外，影像以双色调（duotone）后制，也可能会是今年的潮流。设计师，Sarah Hutto 预言，今年将会是很「funky」的一年，期待强烈的色彩刺激人们的视觉感官。

3. 带声音的视频在网站中的使用

人们习惯了在手机端观看视频，从短片到影片，这是一种模拟电影体验的新形式，同时网页中需要带有声音的开关键。

4. 华丽且实用的动态效果

动态效果在当代的网页设计领域扮演举足轻重的角色，今年也丝毫没有退流行的迹象，反而应用会更广泛。适当的动态效果，具有突出重点、争取注意力的用处，今年以 SVG、CSS 创造的动态效果预料将大幅增加，滚动视差（Parallax Scrolling）也愈来愈华丽。但设计师应考量品牌或内容的内涵以及每个动态效果的意义，避免「为动而动」。

5. 创造小惊喜的「微互动」

「微互动」在网页上也会愈来愈流行，比如滑鼠移过、点击各式网页零件如按钮，卷轴滑动过程中，适时出现细致变化，也能够有提示重点的作用。当然，就跟动态效果一样，设计师也要拿捏「动」的意义与幅度，才不致画蛇添足。

6. 不失真、载入快的 SVG 向量图档大行其道

比起传统图片格式JPG、PNG、GIF 以像素构成，近年兴起的可缩放向量图片SVG 在网页上具有更大优势，以标记式语言（XML）组合图形，绘制矩形、圆形、线条都是小事一桩，复杂的填充、形状也难不倒它，也能轻而易举制作动态效果，而且不受解析度影响，无论利用什么萤幕、什么装置观看，都不会破坏图像品质。 SVG 胜出更关键的是，不需 HTTP Request，能够大幅提升网站载入速度。例如这个便是以 SVG 绘制的后背包。

7. 巨大字体精准传达品牌意涵

首页以巨大的字体呈现品牌主旨，也将是今年随处可见的风潮。不过「巨大」并不代表加宽加粗，而是以恰当的字体设计，言简意赅、精准表达产品精神，取代冗长赘言。而字体与背景或色彩互动、或者在字体上塑造动态效果，也是可以尝试的作法。

8. 虚拟实境技术结合内容（适合土豪公司）

虚拟实境的话题从前年延烧到今年，科技巨头对虚拟实境的投资力道丝毫没有减弱的迹象，特别是Facebook 未来十年将砸下 30 亿美金专注虚拟实境的研发。可预见的是技术更臻成熟，也会有愈来愈多媒体或品牌运用虚拟实境科技「说故事」，为人们创造更身历其境的感受。

9. 「登陆页」重于「首页」

登陆页（landing page）与首页（homepage）的差异在于，前者有个非常明确的目标，例如希望使用者注册、订阅电子报、甚至购买，而首页则如自家门口，提示网站包含哪些内容或功能，作用乃为提纲挈领。前者的重要性日益彰显，设计上要能高效率地带领使用者完成「转换（conversion）」目的，几乎不会有「导航（navigation）」的成分，因为我们不希望使用者分心到其他地方，最重要、几乎也是唯一的目的就是推进转换。

10. 底部悬浮固定元素

用户阅读的习惯使得底部的这个位置并不会第一时刻进入用户视野，但是它是主要的视野区域，并且不具备明显的视觉侵略性，更容易被接受。

被悬浮固定在屏幕底部的内容比起弹出的大面积广告以及顶部广告要来的更加自然，不会遮盖到主要内容，更为有效。