尽管我并非艺术出生，既没有任何设计基础，又没有较高艺术涵养，也深谙在短时间内创造一定艺术造诣并非易事，但是既然当初选择从事网站前端开发，我的目光不能仅停留在前端代码上。作为一名志向在前端领域发展的人员，能够创作出协调和谐的界面，和熟悉前后台交互一样重要。
为控制成本，在网站素材（婚纱摄影图片和网站文字）未准备好时，网站上都是些测试数据，不堪入目。因此我的处女作暂且还没投入使用，实为一大遗憾。在网站投入使用之后，必定附上网址，让大家一睹为快。
一，色彩的联想
每种色彩带给用户不同的心理感受，因此，在设计页面时，绝对不能忽视每一种颜色带给客户的信息。主调色的选取，直接影响网站设计的整体风格。更重要的一点，色彩是向外界传递品牌识别的一个重要元素，大公司一直以来都坚持使用相同的色彩，例如银白色的苹果和绿色的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对于终端用户来说会加快响应时间。
把样式表放在文档内部和将脚本放在样式后面加载会加快网页加载速度，
-----------------------------------------------------------------------------------------------------------------------------------------------------
剔除无关通讯量
剔除没用到的脚本和样式，一个网站经过长时间维护，站中往往会遗留大量无用的JavaScript和CSS，或者网站上为了使用某个控件而使用的脚本框架。多余的脚本和样式自然会影响站点的性能，这时，使用性能测试工具来分析，比如Page Speed自动检测页面上未使用的样式和脚本，再结合具体情况进行精简。
-----------------------------------------------------------------------------------------------------------------------------------------------------
5.重构
重构一般理解为在编程领域中为了改善代码的质量而经行的工作。但是，我更想将重构理解为“改进”，就是在网站最初版本推行时，认真审度每一个组件的设置和样式，结合用户反馈的信息（不过是网站上传后内部交流得出的小意见而已），反复揣摩那些不足，如何改进，改进到什么程度？在设计一开始，我为自己制定一下几个原则：
（1）交互更人性化。
例如，要设计邮件系统，当用户在收件箱中选择某一右键经行删除操作时，它不应该像平常那样弹出警告窗口“你确定要删除吗？”，而是提示“该会话已移至‘已删除邮件’”，并且提供一个撤销功能。一方面所有操作都不会被打断，另一方面又能预防用户误操作时将重要的邮件删除，提供一个人性化的“撤销”功能。
（2）收集好的样式，吸取好的设计。
一些好的设计里面能够指引一种模式，体现未来社会潮流，给我们不错的提示和启发。有了参照物，我们在编写样式代码的时候就更得心应手。一些大公司的交互设计比较有说服力，例如分页模式，购物车模式和标签云模式。
（3）加多点创意。
“补充 ”
尽管如此，创新不应该无止境、无方向的，创新的目标是什么？脱离了产品的基本功能、违背可用性的基本原则的创新都是毫无意义的。比如，你想完成一个新创意，这个创意需通过大量的脚本运算实现，并且这段代码大约是70~80K，这样的创意是否要实施呢？答案显然是否定。这样的创意违背了可用性。脚本过大就目前的网络状况来看，70~80K的脚本严重拖慢网站的加载速度。同时，脚本的运算加重了浏览器的负担，客户配置越低，用户体验度相应越低。
总结，构建一个网站无论是界面设计，亦或是代码质量，不可能一步到位，步步成功，需要持续地学习，积累，整理。总结。构建过后，也并非一劳永逸，怎么才能让网站设计更加人性化，代码更加强健，要靠日后长时间而又高效的维护。
-----------------------------------------------------------------------------------------------------------------------------------------------------
在我编程进步路上，我前端成长的路上，感谢所有学术指导性网站，感谢我所阅读过的书刊的作者们，感谢你们的一路陪伴，我会加倍努力，坚持下去，做得更好。
下集预报，从处女作出发，我对WEB前端的几段思考（二）——分页和json数据处理