‘设计制作’ 分类的存档

  • Axure RP 快速原型制作软件 – 线框图，原型，规格文档

    日期：2010.03.10 | 分类：网页重构, 设计制作 | 评论数：0

    今天刚接触了Axure RP，感觉很方便，特别是做大型项目，有很大的辅助作用！给我的感觉是，它是一款可以快速实现、准确表达、带有交互效果且易于上手的原型设计利器！

    好了，FH我少说了哈，了解哈Axure RP它。

    Axure RP 快速原型制作软件，由美国Axure Software Solutions, Inc.公司开发。

    Axure RP 能让操作它的人快速准确的创建基于 Web的网站流程图、原型页面、交互体验设计、标注详细开发说明，并导出Html原型或规格的Word开发文档。（通过扩展还会支持更多的输出格式）。

    它的功能特性有：

    • 网站架构图 (Site Structure)
    • 示意图 (Wireframe)
    • 流程图 (Flowchart)
    • 交互设计 (Interaction Design)
    • 原型设计 (HTML Prototype)
    • 规格文档 (Specification)

    界面如下：

    官方视频介绍

    交互实例演示

    Axure RP中文社区

  • 页面重构中的模块化思维

    日期：2010.01.18 | 分类：网页重构, 设计制作 | 评论数：0

    “模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉也满口的“模块化”，只是你真的理解什么是“模块化”吗？

    什么是模块化？

    对“模块化”的解释，在 CNKI 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。

    先看一下百度词条是怎么解释“ 模块化 ”的：

    模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。

    相关的书籍也蛮多的，有兴趣的同学可以搜一下。需要强调一点，我们所借鉴的是一种思维的方式。

    页面制作为什么需要模块化？

    站点内容越来越多、代码越来越臃肿，渐渐影响到了客户端的体验（主要是打开速度），影响到了维护的效率。有什么方法可以解决这些问题呢？

    我们很容易就想到：减少代码冗余、提高代码重用率、图片压缩等等，而这些要如何实现呢？模块化思维可以解决，即可以有效减少代码冗余、提高代码重用率，更重要是可以支持到多人维护，降低维护成本。CSS写法较为灵活，容易产生代码的耦合，使用模块化也可以在一定程度上降低耦合度，对于BUG的定位也有帮助。所以，我们更应该在站点前期就重视并使用“模块化的思维”编写站点。

    我们之前经常提到的站点性能优化，有相当一部分也是“模块化”的内容，比如提高代码重用，提高开发效率等等，“模块化”的优点还有很多，我大概列了一下：

    * 提高代码重用率
    * 提高开发效率、减少沟通成本
    * 降低耦合
    * 降低发布风险
    * 减少Bug定位时间和Fix成本
    * 提高页面容错
    * 更好的实现快速迭代
    * 更好的支持灰度发布

    其中最重要的一点，我认为是“提高代码重用率”，这也是模块化最重要的特点之一。

    如何实现“模块化”？

    这里的主要问题是HTML与CSS的“模块化”，我们可以看下换肤的实现方法：

    * 同一类名，换文件（JS）
    * 同一文件，换类名（JS）

    由此可知HTML与CSS的接口实现：

    * CSS引入的三种方式
    * 类名

    为了更好的实现这种接口，需要有相关的（交互、设计、页面、开发）约定、规则、规范，比如：所有当前状态都使用同一个类名“nonce”，所有变灰的表现都使用原类名后加“_n”，Tab的实现方式等等。有了这些约定、规则、规范后，HTML代码就很容易可以实现模板化，统一接口规范。

    有两个误区需要先认清下：

    * 模块化后并不是就能被使用在任何位置（模块化后的代码段也是有适用的范围限制，需要一个提供接口规则的环境）
    * 模块化后并不是就不能再变更（模块化后的代码段可根据实际需要做修改）

    完全独立的模块放在同一项目中，由于项目有自己的表现、交互统一性，所以各模块间必定出现类似的部分，这些部分可以被提出来做为公共的定义，减少冗余，这时就会出现耦合的问题，完全不耦合是不可能的，因此模块化中很重要一点就是“适度的耦合”。有了公共定义，就得调整模块样式的实现方式了，而这种调整也会影响到“接口”的实现方式。

    由于本篇主要是讲模块化的思维方式，具体实现的细节留待以后的文章中探讨。

    感谢：tencent UED 分享！

  • Zen Coding: 快速编写HTML/CSS代码

    日期：2010.01.06 | 分类：插件, 设计制作 | 评论数：0

    译自：Smashing Magazine

    中文：Zen Coding: 一种快速编写HTML/CSS代码的方法

    请尊重版权，转载请注明来源！

    你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。

    在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重 用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。现在，你可以使用简单的CSS表达式来获取DOM元素，这相当酷。

    但是，如果你不仅仅可以用CSS的选择器布局和定位元素，还能生成代码会怎么样？比如，如果你这样写：

    div#content>h1+p

    …然后就可以看到这样的输出：

    <div id="content">
<h1></h1>
<p></p>
</div>

    有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

    注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

    如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

    Demo

    下载(完全支持)

    下载(部分支持，只支持“展开缩写”)

    现在让我们看一下这些工具是如何工作的吧。

    展开缩写

    展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成 一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。

    这里是一个支持的属性和操作符的列表：

    • E
      元素名称(div, p);
    • E#id
      使用id的元素(div#content, p#intro, span#error);
    • E.class
      使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
    • E>N
      子代元素(div>p, div#footer>p>span);
    • E+N
      兄弟元素(h1+p, div#header+div#content+div#footer);
    • E*N
      元素倍增(ul#nav>li*5>a);
    • E$*N
      条目编号 (ul#nav>li.item-$*5);

    正如你能看到的，你已经知道如何使用Zen Coding了：只是些一个简单的仿CSS选择器(呃，“缩写”抱歉)，就像这样…

    div#header>img.logo+ul#nav>li*4>a

    …然后调用”展开缩写”行为。

    这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个<li>元素，你可以简单的写位li*5。它也将同样重写全部子 代元素。如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a，这样会生成以下 HTML代码：

    1
2
3
4
    		 
    <li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

    最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写，div.item$*3:

    1
2
3
    		 
    <div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

    只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…

     div#i$-test.class$$$*5

    会被转换成为:

    1
2
3
4
5
    		 
    <div id="i1-test" class="class111"></div>
<div id="i2-test" class="class222"></div>
<div id="i3-test" class="class333"></div>
<div id="i4-test" class="class444"></div>
<div id="i5-test" class="class555"></div>

    你会看到，当你写a的缩写的时候，输出是<a href=””></a>。或者，如果你写img，输出就是<img src=”” alt=”” />。

    Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描述了输出元素。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样：

    1
2
3
4
5
6
7
    		 
    'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
			...
			},
			  'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
			...
			}
			}

    元素类型

    Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片 段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于 代码片段的后面。

    有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: <a href=””></a>。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你 写<img src=”” alt=”” />，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

    对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

    例子

    那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分成div 和a 元素，当然也会维持他们的关系。然后，每个元素，解析器先在代码片段内而后在缩写中寻找定义。如果它找不到，将会使用元素的名字作为新的标签，并为其添加 缩写中定义的id和class。比如，如果你写mytag#example，解析器在片段或缩写中找不到mytag定义，它就会输出<mytag id=”example”><mytag>。

    我们制作了很多默认的CSS和HTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。

    HTML 标签对匹配器

    对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

    不幸的是，很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题，但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做 法)，它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关：它甚至可以用于这段JavaScript代码片段：

    1
2
3
4
5
6
7
    		 
    var table = '<table>'; for (var i = 0; i < 3; i++) {
	table += '<tr>'; for (var j = 0; j < 5; j++) {
		table += '<td>' + j + '</td>';
	}
	table += '</tr>';
}
table += '</table>';

    使用缩写包裹

    这真的是一个很酷的特性，它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug？或者你需要添加一个装饰，比如一个背景图片或者边框到一个块级内容？你必须写开始标签，临时打断你的代码，找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

    该功能相当简单：它要求你输入缩写，然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本，它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置：标签的内容里面或者是开始和关闭标签中间。依赖于它的位置，它会包裹标签的内容或标签本身。

    缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字，比如：ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候，它会将它作为一个重复元素：你的章节中有多少行，它就会输出多少次，并将每行的内容放到重复元素的最后一个子元素里面。

    如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span：

    1
2
3
4
5
    		 
    About Us
Products
News
Blog
Contact Up

    你将会得到以下结果：

    1
2
3
4
5
6
7
8
9
    		 
    <div id="header">
	<ul id="navigation">
		<li class="item1"><a href=""><span>About Us</span></a></li>
		<li class="item2"><a href=""><span>Products</span></a></li>
		<li class="item3"><a href=""><span>News</span></a></li>
		<li class="item4"><a href=""><span>Blog</span></a></li>
		<li class="item5"><a href=""><span>Contact Up</span></a></li>
	</ul>
</div>

    你可以看到，Zen Coding是一个强大的文本处理工具。

    快捷键

    • Ctrl+,
      展开缩写
    • Ctrl+M
      匹配对
    • Ctrl+H
      使用缩写包括
    • Shift+Ctrl+M
      合并行
    • Ctrl+Shift+?
      上一个编辑点
    • Ctrl+Shift+?
      下一个编辑点
    • Ctrl+Shift+?
      定位匹配对

    这些快捷键是可以自定义的。

    在线演示

    你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。

    支持的编辑器

    Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而 Mac和Linux 分支可以使用Python版。

    如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

    完全支持

    部分支持(只支持“展开缩写”)

    Aptana是我主要的开发环境，它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一个新的Zen Coding版本都将会首先对Aptana可用，然后部署到Python并兼容其它的编辑器。

    Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持，由Ian Beck开发。原始的源代码在GitHub上，但我还是制作了我自己的分支以整合Zen Coding的特性。

    总结

    很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档 以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

    附：Zen coding的具体用法

    遗憾的是， 本文原作者并没有说明zen coding的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描述，如有疑问可以在评论中与前端观察的网友交流。

    Aptana/Eclipse

    由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。

    1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如果你使用Aptana，可跳过这一步)
    2. 在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding
    3. 在新创建的项目中创建scripts文件夹
    4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
    5. 安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

    注意事项：

    • Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)
    • 官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失；

    DreamWeaver

    好消息是，现在已经有了Zen coding for DreamWeaver插件，坏消息是，该插件支持的功能很少，只支持展开缩写功能。而且默认的快捷键是无效的。只能在“命令”菜单中点击操作。另外，没 有测试该插件是不是只支持CS4版本。不过比较好的是，作者将本插件的源码也放出了，你可以自定义一个Dreamweaver的插件。

    PS:官方的DW插件已经更新，推荐到官方去下载。新的插件添加了更多的功能支持。UPDATE @ 12-23-2009

    特别推荐：豪情同学将缩写给实践了一番，总结出了很多很棒的用例，推荐大家前去学习。

    原作者介绍：

    Sergey Chikuyonok是一位俄罗斯的前端开发工程师和作者，他在优化方面有很大的热情：从图片、JavaScript效果到工作流程和节省时间的编码。访问他的主页和他的Twitter。

  • 点亮网页—一个很有用的Firefox和IE插件

    日期：2009.12.31 | 分类：插件, 设计制作 | 评论数：0

    支付宝UED的鸽子mm制作了一个Firefox插件，它可以用来快速实时编辑网页代码，快速基于Firefox制作Demo页面，方便的编辑修改CSS Sprite，以及配合Fiddler调试页面，是一个很不错的前端开发助手。

    Firefox版本

    该插件基于Firebug，所以安装前请确保已经安装Firebug。

    一些主要特性；

    * 即时编辑——即改即现，把Firefox打造成超强网页编辑器；
    * 与Fiddler一起使用，快速调试线上网页，HTML代码快速生成；
    * 刷新CSS，DOM不刷新；
    * 禁用单个CSS样式；
    * CSS Sprites位置快速设定；
    * 保持Session不过期；
    * 导出任意节点为PNG图片；

    推荐查看作者的博客，里面有几篇介绍该插件的文章。你也可以查看Alipay的UED的介绍。

    IE版

    非常不错的是，该插件同时也提供了一个IE版本，安装很方便就是下载文件：http://nihaoku.cn/Linr/LinrIEGallery.reg 下载下来后运行reg文件，右键菜单就会出现“点亮网页”选项，重启IE内核的浏览器，然后右键选择“点亮网页”即可使用。

    推荐查看IE版本的官方介绍。

    另外作者在博客中透露Chrome版本也在开发中，很快就会面世，让我们一起期待吧。

    查看点亮网页+Fiddler的视频演示
    查看LinrLightWeb(Firefox Add-on)功能浏览
    下载观看点亮网页操作CSS Sprite的动画

  • 你是一个职业的页面重构工作者吗？

    日期：2009.12.31 | 分类：网页重构, 设计制作 | 评论数：0

    做为一个专职的页面重构者， 我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。

    单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写 HTML 和 CSS ”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。

    跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：

    1. 结构完整，可通过标准验证
    2. 标签语义化，结构合理
    3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

    很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：

    设计稿的分析
    是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。

    对设计稿的分析能力可以划分成下面的几个阶段：

    1. 能分清设计稿中的公共与私有的部分
    2. 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
    3. 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
    4. 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
    5. 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

    上面这些都是在还没开始动手制作之前所要做的。

    切图
    是指将设计稿切成便于制作成页面的图片。

    很多人都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：

    1. 切成所需要的图片（如何将需要的部分切出来）
    2. 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
    3. 在2的基础上，规划切出来的图片（包括文件分布）
    4. 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

    HTML和CSS的编写
    是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面

    这块是最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：

    1. 还原设计稿视觉效果，并通过标准验证（HTML）
    2. 在1的基础上，实现多浏览器的兼容（HTML）
    3. 在2的基础上，标签语义化（HTML）
    4. 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）
    5. 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
    6. 在5的基础上，考虑到整站的样式分布（包括如何实现分布）
    7. 在6的基础上，样式写法的优化（包括技巧的应用）

    还有一点是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

    如果你已经达到或超过4、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。

    为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。

较旧文章

最近文章

最近评论

分类目录

紫枫印迹

2010年八月
一 二 三 四 五 六 日
« 三    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

标签云

CSS+HTML css2.0 HTML5 SEO seo优化 SNS User Friendly2009 VIP web 中文手册 互联网 交互 交互设计 产品 产品设计 产品设计师 体验 信息架构 关键词 制作网页 前端开发 原型 命名规则 垂直居中 小技巧 手机网站开发 按钮 支付宝 李开复 流程 用户习惯 用户体验 用户界面 用户研究 用户访谈 瞬间的设计 网站运营 网页设计 背景 行动 视觉设计 设计 设计师 身体语言 页面重构

用户体验设计(UED)

紫枫友情收藏

86ue_rss

设置