世界看脸，网站看流量，门面自然要漂亮，不过很多朋友以为做网站是门技术活儿，自己学艺不精做不好，没有流量自然也就没用利润可言。如果你看了今天这篇软文，就会明白，刀法于人，虽有招式，但无内功支撑，久战必败。而这篇好文，就像内功修炼心法，按6个大招来，速成可待。2 h8 Z6 O% _4 h5 z& E
) l; ]& t+ |3 O( {( j) b. t# l2 V7 w
适用前提：5 X% ~3 E$ |1 B6 K7 H
0 d2 \; @% b, z7 U. K
非专业设计师 没太多空闲时间去做。 为什么要做网站?网站是用来传达信息的。一切不以传达有效信息的网站都是yy. 网站是用来促使用户行动的，也即Call To Action。无法让用户产生你所期望的都是无效的。, x) n* y% O, g. w6 [' Z. k' Y
所以，先摆脱一个错误的认识：网站仅仅是用来装饰用的，仅仅是为了吸引人注意的，有点流量还用愁利润在何方么?
所以，我们既然是专业网站建设设计，就要回归到做设计的本源，为了达到以上效果，同时兼顾美观、大方、好看。+ C8 A8 N2 o5 b5 u# w! g
你需要让用户有参与感，这也是进行用户体验设计的时候最难的一点，因为实现参与感就意味着你需要为用户提供高质量的内容，还得以绝妙而令人兴奋的方式来呈现出这些内容。如果你觉得自己的网站死气沉沉，那么接下来的这六大秘诀，应该能让你的网站焕发活力!( j( v2 s: v- G: O
S7 E" b1 a/ L4 ~. t$ q! q. i
1、视差：让单纯的滚动变成互动
如果改变网站某一方面的设计能让用户与网站之间的参与度提高7成，那么你会不会使用?实际上，很多网站已经开始这样做了，这就是视差滚动给网站带来的改变。作为设计趋势，视差滚动已经席卷了网页设计领域。这种独特而醒目的设计风格让信息和内容的呈现更加有趣和直观。
视差滚动设计中，多种元素会随着页面滚动而运动，给人以一种独特的动态体验，这种体验还会驱使用户进一步滚动。7 e7 C* ~/ r/ R8 k+ A: R
如果你想设计出一个视差滚动的网页，诸如Webydo这样的免代码工具可以帮你制作出动感而精美的网页。最近他们又推出了新工具，Parallax Scrolling Animator，非常不错哦。8 U5 Z4 h/ f6 L. _: P1 l9 b) ~
! L% x3 x. I; o
2、符号与标识：视觉润滑剂/ ~& h* f O: g1 i
在信息量较大的网站中，你可能需要借助大量的文字来描述事物，这也就意味着设计师需要最大程度地展示文本。( C" l8 ]' U% S: K0 s0 k+ `
]) [1 t0 T- P
使用图标和符合可以帮助用户更快更好地定位内容。虽然符号和标识都只是微小的视觉符号，但是它们不仅可以启发用户，让他们更好地理解内容，还可以像路标一样引导用户的视觉流向。
4 c3 q" K& O& }1 V% T: y6 a
在互联网发展早期，图标和符号通常是点阵的，要修改和调整的话过程会非常繁琐。但是现在不一样了，设计师可以借助图标字体来轻松使用符号和图标，它们不仅是矢量的，而且还具备强大的拓展性，并通过CSS便捷地定制。最值得推荐的工具无疑是Glyphter，它不仅可以从开源的图标集来绘制图标，还能通过上传SVG格式的图标或者文字来制作。; K, h- V: L2 g' }
使用图标和符号来支撑文本段落和不同的基面元素，比起单纯的文本累积来的更加靠谱，如果结合动态排版技术，你的网站体验会更加令人愉悦、便于阅读。 r% E) ^- x3 k, T' c1 v7 S
3、灵活的版式：响应式设计
7 B3 ?6 q7 u& E( C
响应式设计并不仅仅是让布局更灵活，它还关乎内容。网页布局能随着屏幕尺寸改变而改变只是一方面，各个模块中所包含的内容也应该随之进行调整。8 H" G! B+ U( }: X) I1 c
移动端的用户通常没有时间浏览过长的段落，所以请确保移动端的段落足够简洁，交互和响应也应对更加清晰直观。移动端屏幕本就不大，如果字体过大或者过小都不合适，所以请使用动态排版技术确保字体在一个适宜于阅读的区间中，千万不要让用户放大看文本!
; W" H ]; \/ |& d# q+ w
说道响应式的网站设计，Information Architects site 是一个非常值得学习的案例——它不仅内容关于响应式设计，还是响应式设计的发起者之一。这个博客不仅深入探讨了响应式设计的思想和技术，并且以自己为范例展示了如何完美地响应式展示内容。! n( E# V3 V( E
响应式的内容展示让用户更轻松地浏览，也使得网站本身更加流畅清晰，使得整体上更具有吸引力。这种设计思想也应该延伸到图片展示上。
" ]% G# _ _* i, W: o$ Y3 ^
4、矢量图片与响应式视觉5 L! O+ A/ E3 t, r- l
, y% a! K" W/ T U" l( h" I5 X
文本只是网站设计的诸多设计因素之一，图片和文本同样重要。通常网站所使用的图片多是位图，格式常见于JPG、PNG以及GIF。而位图带来了2个问题：
每次使用这样的图片的时候，都会向网站的加载过程发一个HTTP请求。随着某个图片在网站越来越受欢迎，这个加载时间会开始膨胀，更不用说渲染更多页面所需要的数据请求了。# G! j6 l3 b3 R- [
. y' d) t1 j" _
解决方案：使用矢量图片。矢量图片可以更容易缩放到任意大小，轻松适应任何分辨率。SVG格式是日益流行的矢量图片格式，许多网页设计师都特别喜欢使用这种格式，因为它不仅可以适配不同的风格，并且能够实现许多漂亮而吸引人的效果。
最重要的是，矢量图足够轻量级，可以为浏览器轻松渲染，这也意味着网页可以负载更多素材和内容。3 n% r! ]3 i$ J' U; j
) |1 P3 P# |' L Y
5、游戏化
* o, w4 C( m+ s5 H4 c
其实，最巧妙的解决方法是让网页游戏化，或者增加游戏元素吸引用户，这可以增加网站的互动性和奖励感。. ^6 e& [4 F l# M% ]+ p$ G
* {) [+ N' m4 B* [/ Y4 P& c: Q, p
游戏化最常见的就是各种徽章，你可以在完成各种任务之后解锁徽章，教育网站Treehouse就是这么做的，当你完成课程之后会收到新徽章，这对于用户非常有意义。但是，如果你的网站并不具备类似的功能和结构，那该怎么办?
对于博客、电商网站或者其他相对更标准的网站而言，游戏化可以采取的策略，是在特定情况下为用户提供优惠券或者折扣。比如，用户可以通过在Twitter上转发网站内容来获取免费电子书，或者电商网站的优惠券，或者获取更多隐藏的内容，等等等等。: s0 E ~. y3 `5 |9 t
% q/ N; K& p& v2 S5 P# R# M- R
像这样的小活动、小互动其实可以赋予用户更加私人化的体验，培养他们的关注意识和互动意识，鼓励他们参与，常常回来。( a8 N9 j7 _* s1 ^ u
" ~! a% i4 p4 c" d) V) H7 }
6、图像压缩：网站提速
没有什么比网站加载缓慢更让人抓狂。如果网站加载时间太长，用户会相继离开——谁知道网站什么时候能最终打开呢?尤其是在这个缺乏耐心的时代。当网站越来越复杂，越来越视觉化，加载时间不可避免地受到影响。幸运的是，有一些技巧可以解决这个问题：
# k8 e4 K5 ?2 |
・简化内容; Q4 K" c7 Z! l8 k( k7 W) m7 U
) j. k) H4 Q, I [/ V7 s' B
・优化网站图片
・通过内容分发系统(CDN)来提升网站
对于初学者，许多设计师会倾向于借助简化网站内容来提升访问速度，尽可能去除空白、注释和冗余的CSS与JS文件，小步快跑。
+ \2 W3 |- Z) }) J. y8 z4 }$ q5 U
同样的，诸如 ImageOptim(仅限Mac)这样的程序也可以帮你尽量压缩你所发布的图片的大小，减轻网站加载压力，也许这样一来你也无需为精简网站设计而挠头。$ Q1 }# }5 y: c; V7 ^
最后，还有许多网站会选择使用内容分发系统(CDN)，这样可以更加快速的分发文件。在世界各地的多个服务器来发放网站数据，CDN可以确保用户通过最近的服务器来获取内容。CDN可以明显地提升网站加载速度，它常常被用来帮助大站点，让世界各地的服务器来共同分担负载，皆大欢喜。
