对WEB前端的几段思考（一）——界面设计和性能优化（整理中）

　　　　尽管我并非艺术出生，既没有任何设计基础，又没有较高艺术涵养，也深谙在短时间内创造一定艺术造诣并非易事，但是既然当初选择从事网站前端开发，我的目光不能仅停留在前端代码上。作为一名志向在前端领域发展的人员，能够创作出协调和谐的界面，和熟悉前后台交互一样重要。

　　为控制成本，在网站素材（婚纱摄影图片和网站文字）未准备好时，网站上都是些测试数据，不堪入目。因此我的处女作暂且还没投入使用，实为一大遗憾。在网站投入使用之后，必定附上网址，让大家一睹为快。

一，色彩的联想

　　每种色彩带给用户不同的心理感受，因此，在设计页面时，绝对不能忽视每一种颜色带给客户的信息。主调色的选取，直接影响网站设计的整体风格。更重要的一点，色彩是向外界传递品牌识别的一个重要元素，大公司一直以来都坚持使用相同的色彩，例如银白色的苹果和绿色的360，在公众中创造强烈的视觉冲击。

红色：活力，具有强烈的感情色彩。和白色等浅色搭配，富有视觉冲击力。

黄色、橙色：欢快活泼，温暖幸福。

绿色：和谐舒心，环保健康。可用作平衡其他颜色，是设计的整体感觉更扎实。

“插图”

蓝色：宁静深邃，是最流行的色彩。企业网站界面多选深蓝，更显内涵。

紫色：高贵而神秘，暗紫中带白，更显优美和柔和。浅紫色代表浪漫，暗紫代表奢华。

黑色：深沉而神秘，体现前卫，能与众多色彩构成良好对比协调。

白色：纯洁明快干净。没有过多色彩修饰，不易于分散用户的注意力。

　　设计界面之前，我查看部分婚纱摄影楼网站，绝大多数的网站以白色为背景，红色，红紫色等鲜明、喜庆、温暖的颜色作为点缀。白色背景能够让人联想到洁白的婚纱，凸显爱情的纯洁美好。简洁的内容和布局，降低用户注意力分散的可能，使用户更目光集中在摄影作品上。

可是采用白色背景有唯一个弊端，就是使得有部分内容和背景混杂一起，效果单一，毫无层次感。

　　我选取一个紫红色为主调，白色高光方框点缀的背景，background-position属性设置为Fixed，使得主容器内容随滚动条或鼠标滚动时，背景固定，产生一种内容浮动的想、错觉。白色或浅紫色的边框或字体和深颜色的背景形成视觉冲击，使内容极具层次感,选择高光的背景，网页很光亮。

　　　　　　

　　　　　　

　　

同时紫色为主调，凸显婚纱摄影楼的高贵大气，浪漫高端。

二，配色

　　1，单色系配色：色彩选取比较容易，选定某一色彩为主，其他颜色采用它的渐变色即可，方法较为稳重。我得出以下规律：由深到浅：正文>标题>背景，强调或图形颜色采用介于正文和标题的颜色

　　2，互补色配色：例如白色和绿色，紫色和粉色等等

互补颜色具有天生动感，将标题颜色换成互补色，可增添几分活力。

　　　　"插入"

　　选取主掉色和配色后，在日后的开发设计中，我应该注意，不管是主页面还是内部的子页面，都要保持一直的视觉效果。一致的良好的设计理念，除了给用户留下更深刻印象外，还有助于用户在操作时不会犹豫，从而快速熟悉网站，学会使用网站。

三，样式

　　　　样式能够表达完整的设计意图，创意设计同样通过样式传递给用户。

　　有一下几点值得注意：

　　1，规范样式文件。

　　　　样式文件可以分为两种形式：开发态和运行态。目的的不同，两种形态会有不同的表现形式。开发态为了维护和管理方便，可以将不同作用的样式进行拆分，比如：

　　全局样式（global.css），结构布局样式（layout.css），色彩样式（color.css），文字样式（text.css），和重置样式（reset.css）.

　　在生产运行环境中，基于性能考虑，可以将样式文件合并压缩，减少与服务器交互的时间和次数。

　　2，重置样式。

　　　　浏览器针对每种标签都有默认的样式，我们需要在使用之前清理干净。对于一些样式框架，我们需要一个reset.css文件重置样式。“附件”

　　3，为样式加上清晰的注释。

　　　　注释是给维护人员看的，再好的网站也离不开日后的维护，即便开发的是你，维护的又是你，在每个文件头标明它的作用，作者等基本信息，并且每个段落样式标注索引。

　　4，合并图像。

　　　　基于性能考虑，合并图像能够减少HTTP的请求数量，节省带宽并加快页面的加载速度。一个页面上如果包含大量图片，装载这个页面时就要多次向服务器发送请求，HTTP请求会耗费网络带宽，图片只能一张张显示。

使用CSS背景定位(background-position)的方法即可获取合并图片中的相关图像。

　　5，Hack

　　　　兼容性，是我最薄弱的一点，如果要实现对众多浏览器的兼用，就需要或多或少的使用一些hack技术。。。。

四，简洁性

　　系统的功能随着开发越来越多，我们会陷入系统的技术支持、bug修复的漩涡中，没有精力去改善实际用户最常用的功能，如导航设置，基本组件的位置。

　　功能上需要简洁，操作流程、视觉效果上也需要简洁。混杂的图片显示，大篇幅的文字，影响用户体验度。简洁的界面具有一下优点：

　　　　①简洁的设计，更易于导航，减少冗余信息，就是降低分散用户注意力可能性，使得网站内容更加突出，能够让用户更快找到所需的内容。

　　　　②使得网站的目的性明确，精细准确表达想表达的意思，不会有令人烦躁的内容影响视觉体验，用户更加容易进入意境。

　　因此在设计上，我特别注意一下几点：

　　　　①有效利用网站空间

　　　　　　和谐的排版并有效地将空间拉开，不尽让用户在视觉上更舒服，还能体现元素与元素之间的层次。

　　　　②将重要内容放在显眼位置

　　　　③削减无光内容，从导航入手。

　　《大巧不工》一书提到的导航7+2原则;

　　　　“插图”

　　　　套用二八定律法则，对于简洁的网站或应用，80%的有用部分来自20%的功能——即，只有20%具有奉献价值，我们应该强化20%基本功能。

　　　　我过去企图用丰富的动画效果，绚丽的色彩搭配充斥用户眼球的想法是多么天真、单纯。通过堆砌功能，填充网站空白位置的想法最终只会得到一个评价：平庸、臃肿，需要学习。

　　　　例如，我们在设计导航时候，不应该把所有功能罗列出来。而是应该思考用户需要的功能，从用户角度去设计，用户没有过多时间选择思考。“这个是否需要，是否有更简洁的实现方法。”这个想法，是从UCD上得到启发，和这如今流行的设计原则不谋而合：

UCD——以用户为中心的设计原则

　　1，关注信息醒目 2，更换网银，新网银转账简单 3，网页上只有喜欢内容

　　以上例子代表用户有三特性：懒惰，有想法，喜新厌旧。

　　在这样一个用户需求日益变化，而互联网资源及其丰富的时代，如何才能吸引用户，如何才能创造价值？设计时遵循以用户为中心的设计原则是不错的思路。

以用户为中心的设计（User -Centered Design ，UCD），是以用户为中心进行产品的设计、开发和维护，一切都从用户的感受与需求出发，而不是让用户适应产品。

产品的设计不仅仅是将元素摆在页面上，无论是做视觉还是交互，深入理解需求之下的用户需要，才能使产品真正推向市场。

　　出于这方面的考虑，我设计除了设计一般的导航，位于公司名下之外，我还增设“便捷导航”（垂直导航）

　　　　“补充”

　　“简洁是一种思想，我们需要更高层次去理解它，不求最多，但求最好。”

　　在开发一个新产品时，我不经意调查其他产品，了解竞争对手怎么做。经行设计开发时，我还思考是否采用同样的实现方式。一般情况下，我也会遵循惯常的方法，一种特定的内容展示有一定表现方式，这些方式为用户所接受，用户对这种方式不感到陌生，因而就更加容易被用户所接受。

　　　　“补充”

　　我的网站无论是界面设计，亦或是代码质量，不可能一步到位，步步成功，需要持续地改进设计，精简代码。

五，动态交互

　　交互之美从何体现？有人说，现于交互之流程，特效之绚丽，然而这些美只体现在表面，真正美的脚本设计应该体现在良好的结构和清晰的层级，以及脚本的可维护性与可扩展性上，脚本的“内在美”，也就是结构美比“外在美”更加重要。

《大巧不工》一书提到“事件驱动的设计方式其实就是以用户为中心设计的一种表现形式，他把设计的关注点放在用户的行为上，用户需要什么，用户会做有哪些行为等角度去分析，而不是从框架具有那些功能或者浏览器具备那些功能的角度去分析。这是一种以用户为中心的思想。”

　　1，不能过分依赖脚本。

　　　　没有人能保证自己设计的站点在没有JavaScript的情况下能够正常使用，处于某些原因（比如杀毒软件禁用脚本，用户浏览器安全级别设置过高）网站还能够退而求其次，没有动态的样式，但是能够正常使用。在脚本收到影响的情况下，应该做出友好的提示。

我们需要认真思考，某些功能是否可以不通过脚本或者通过部分脚本就能实现，保证网站的可访问性，带给用户更好的交互体验。“”

　　2，前端需要分层。

　　　　众所周知，JavaScript是一种提高站点可用性的最好解决方案。对于HTML决定页面包含那些元素，CSS决定那些元素应该怎么展现，JavaScript决定元素将其具有哪些行为，这是一个独立的思维。对于前端设计来说，将JavaScript代码从HTML中剥离出来是有意义的。

前端从概念上可以分为三个层次：结构（HTML），样式（CSS），行为（JavaScript）。这三种层次相互独立，互不影响，意义在于：

　　·脚本代码更加简洁、规范、，逻辑结构更加清晰，便于代码维护。

　　·独立的脚本代码更容易测试和调试。

　　·行为层次的独立增加了脚本代码复用的可能。

　　实现行为层次的独立，有一些基本原则：

　　　　（1）JavaScript代码只出现在.js文件中。

　　　　（2）在HTML中，不会出现onload、onclick等元素，所有行为都使用绑定的方法来实现，而不是内联属性来设置。

　　　　（3）只关注行为，不能在JavaScript中定义CSS样式

　　这些JavaScript的新思维为前端复杂的脚本设计提供了良好的理论基础与实践指导。

　　我为我的处女作选择了一把锋利的“刀”——jQuery,它是如今流行的JavaScript库之一，具备简洁，可扩展等优点。

　　3，使用ready方法来进行初始化。

　　　　这一点有点细，之所以让它作为一大点，是因为很多人和我一样，一直依赖jQuery提供的ready方法，却不知道所以然，其实它真的很重要。过往在页面已经加载完成时调用某方法，是通过设置body标签的onload时间，但是onload时间需要页面元素完全加载完成才会被调用，但是如果网页比较大（有大量图片和多媒体元素），则有可能出现初始化逻辑没有运行，用户就开始操作，从而造成体验方面的问题。

jQuery提供ready的方法可以让开发人员在DOM初始化完成后就开始执行初始化逻辑，从而有效避免这些问题。

　　　　当然有时候，我们需要按照onload事件（当文件加载完成后触发）来延迟加载内容，从而优化性能。我们先要看看哪些内容是页面呈现时所必须首先加载的（比如导航和文章内容），那些内容是可以稍后加载的（比如动态操作、网页特效等），通过onload来分割。在页面中实现的拖放和动画的JavaScript就可以在onload事件后加载，因为网页上拖放元素是在初始化呈现之后才发生的，有些资源甚至可以在相关时间（点击事件等）触发的时候再加载。

　　4，提高可读性

　　要使代码更加精简，并且易于维护，可读性高意味着容易维护。如果简洁代码，设计高效率的算法，是我一直不懈追求的目标

-----------------------------------------------------------------------------------------------------------------------------------------------------

　　外联JavaScript和CSS文件

　　　　第三点样式和第五点动态交互都要注意合理地利用缓存。使用外部的JavaScript和CSS。谈到性能问题的时候，很多人都会问一个问题，JavaScript和CSS到底是要放在外部文件中，还是应该放在页面中呢？

　　　　多数情况，使用外部文件可以有效提页面的加载速度，原因很简单：外部的JavaScript和CSS文件都能在浏览器中产生缓存，同时可以减少HTML文档的大小，而如果将JavaScript和CSS代码内置在HTML中，则每次请求的时候都会随HTML文档重新下载。在用户访问站点中的多个页面时，这种方式带来的性能提高更加显著，因为同一站点往往使用相同的脚本和样式表，这些缓存外部文件就会带来更高程度的体验提高。

当然，有时候，例如Yahoo！主页，它在一次对话中拥有较少（可能只有一次）的浏览量，内置代码更加合适，内置JavaScript和CSS对于终端用户来说会加快响应时间。

把样式表放在文档<head/>内部和将脚本放在样式后面加载会加快网页加载速度，

-----------------------------------------------------------------------------------------------------------------------------------------------------

　　剔除无关通讯量

　　　　剔除没用到的脚本和样式，一个网站经过长时间维护，站中往往会遗留大量无用的JavaScript和CSS，或者网站上为了使用某个控件而使用的脚本框架。多余的脚本和样式自然会影响站点的性能，这时，使用性能测试工具来分析，比如Page Speed自动检测页面上未使用的样式和脚本，再结合具体情况进行精简。

-----------------------------------------------------------------------------------------------------------------------------------------------------

 

5.重构

　　重构一般理解为在编程领域中为了改善代码的质量而经行的工作。但是，我更想将重构理解为“改进”，就是在网站最初版本推行时，认真审度每一个组件的设置和样式，结合用户反馈的信息（不过是网站上传后内部交流得出的小意见而已），反复揣摩那些不足，如何改进，改进到什么程度？在设计一开始，我为自己制定一下几个原则：

　　（1）交互更人性化。

　　　　例如，要设计邮件系统，当用户在收件箱中选择某一右键经行删除操作时，它不应该像平常那样弹出警告窗口“你确定要删除吗？”，而是提示“该会话已移至‘已删除邮件’”，并且提供一个撤销功能。一方面所有操作都不会被打断，另一方面又能预防用户误操作时将重要的邮件删除，提供一个人性化的“撤销”功能。

　　（2）收集好的样式，吸取好的设计。

一些好的设计里面能够指引一种模式，体现未来社会潮流，给我们不错的提示和启发。有了参照物，我们在编写样式代码的时候就更得心应手。一些大公司的交互设计比较有说服力，例如分页模式，购物车模式和标签云模式。

　　（3）加多点创意。

　　“补充 ”

　　尽管如此，创新不应该无止境、无方向的，创新的目标是什么？脱离了产品的基本功能、违背可用性的基本原则的创新都是毫无意义的。比如，你想完成一个新创意，这个创意需通过大量的脚本运算实现，并且这段代码大约是70~80K，这样的创意是否要实施呢？答案显然是否定。这样的创意违背了可用性。脚本过大就目前的网络状况来看，70~80K的脚本严重拖慢网站的加载速度。同时，脚本的运算加重了浏览器的负担，客户配置越低，用户体验度相应越低。

　　　　总结，构建一个网站无论是界面设计，亦或是代码质量，不可能一步到位，步步成功，需要持续地学习，积累，整理。总结。构建过后，也并非一劳永逸，怎么才能让网站设计更加人性化，代码更加强健，要靠日后长时间而又高效的维护。

-----------------------------------------------------------------------------------------------------------------------------------------------------

 

在我编程进步路上，我前端成长的路上，感谢所有学术指导性网站，感谢我所阅读过的书刊的作者们，感谢你们的一路陪伴，我会加倍努力，坚持下去，做得更好。

　　下集预报，从处女作出发，我对WEB前端的几段思考（二）——分页和json数据处理