对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数据处理