为什么在facebook交友会更容易？facebook与传统的BSP（Blog Service Provider）到底有什么不同？是因为它有横竖两个导航吗？是因为它有个主人信息的聚合页面吗？ Facebook为什么成功？又有哪些不足？Facebook商业上的成功使得它混乱的设计成了皇帝的新装，即使觉得看不懂也不敢去说。让我们拨开网页上那些纷繁的视觉表现，来看看藏在网页背后骨架—信息构架（IA Information Architecture），我们将获得一个全新视角，这种种疑问将迎刃而解。
传统的博客服务提供商（Blog Service Provider，简称BSP），比如：Qzone、新浪博客、网易博客…他们提供的博客服务，不仅仅是为每一位注册用户提供了一个属于自己的blog空间，还有用于bloger间彼此交流的平台。也就是说，信息构架是：个人空间+社区平台。
“个人空间+社区平台”是什么样子的？
DOCTYPE不可怕，但把它拿走，会让你怕了又怕。
最近在蓝色理想转悠，发现很多朋友提出有关DIV+CSS排版问题，以及IE与FF的兼容问题。怎么问的都有，结果就是一个——显示很奇怪，很难调整。我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DocType声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始。在遵循标准的任何Web文档中，DOCTYPE都是一项必需的元素。它会影响代码验证，并决定了浏览器最终如何显示你的web文档。为了避免DOCTYPE的问题重复出现，我根据手头的资料整理了这篇文档，以备自己及有兴趣的朋友参考。
在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有声明DOCTYPE，它就会以默认的DOCTYPE解释下面的HTML。在同一种标准下，不同浏览器的解释模型都有所差异，如果声明标准不同，不用我说，您自己想就可以了。学习网页标准，浏览器兼容，从哪里开始您自己决定，但是，请认识DOCTYPE：
一、什么是DOCTYPE
迷你屋商城项目在视觉设计的过程中建立了一套相对简单合理的视觉规范，这里介绍一下规范的内容以及制定规范的思路。建议您在阅读此文之前先对《迷你屋视觉规范》有个大概的了解。或者对应着规范阅读本文。
制定视觉规范的基本思路：在整体设计的基础上，规范出具体视觉元素的表现形式，在更多的页面设计中，应用规范，而不是每个新页面的设计都重新创作。通过对页面元素表现形式的定义，让整个网站视觉表现更具一致性，视觉识别更容易，从而提高用户的使用效率。
“所谓设计，指的是把一种计划、规划、设想、问题解决的方法，通过视觉的方式传到出来的活动过程。”—《世界现代设计史》 王受之
设计是一个有意识的计划、规划信息的活动。从这个角度来说，制定并执行规范过程本身就是设计。
迷你屋商城视觉规范在之前大量的视觉设计基础上加以整理、提炼出6类，共13项基本界面元素。商城中的所有页面都严格的依据视觉规范进行设计。下面简要介绍一下迷你屋商城视觉规范的具体内容：
许多网站缺乏针对性和友好的导航设计，难以找到连接到相关网页的路径，也没有提供有助于让访客/用户找到所需信息的帮助，用户体验非常糟糕。这篇文章，我们尝试就网站导航交互做一些探讨。
首先对于WEB交互设计师来说，解决上面遇到的问题，使之简单的方法是设计一套完善的网页导航系统。
为满足用户的视觉追求及产品的背景图片的换肤功能，设计师难免在设计上会用到半透明的效果。因此页面重构师基于视觉及产品的需要，采用了PNG32的半透明图片还原设计稿。
但在IE6中遇到png兼容性，及其延伸的种种问题。如：
针对以上问题重构师的解决办法如下：
“这是什么啊，用不明白，体验太差了！”、“在哪里登录？找不到啊！”、“谁知道这是个按钮可以点啊，像个图片！”在产品体验中，我们经常会听到这样那样有关产品体验的声音。而主动并客观地去发现这些问题（可用性问题）的方法之一，就是我们今天要介绍的用户研究方法之一——用户测试法。
什么是用户测试？通俗地讲，用户测试就是通过给用户制定任务，在用户执行任务的过程中，发现产品设计的不足，并为产品优化提供依据的一种方法。
通常情况下，根据目的不同，用户测试可以是定性地发现问题、也可以是定量地比较两个竞品的优劣。根据测试产品特点不同，可以采用边做边说的用户测试、也可以采用回顾式用户测试、甚至可以采用协同式用户测试等。用户测试可以用于产品设计阶段测试产品低保真原型、也可以用于产品测试阶段在发布前发现重大的可以优化的可用性问题、还可以用于产品发布以后，为下一个版本的优化提供依据。
一般情况下，根据ISD产品特点、时间等条件的限制，在产品测试阶段或者产品发布以后以发现可用性问题为主的边做边说用户测试较为常见。下面将以迷你屋用户测试为例，来说明如何进行一场简单的以发现问题为主的边说边做法用户测试。
迷你屋用户测试主要经历了测试前的准备、进行测试、测试后总结三个阶段：
方法一：Demo: iframe1
1.脚本
在调用iframe的页面添加脚本
<script type=”text/javascript”>
function reinitIframe(){
var iframe = document.getElementById(“frame_content”);
try{
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
}catch (ex){}
}
window.setInterval(“reinitIframe()”, 200);
</script>
2.调用
<iframe id=”frame_content” src=”d.htm” scrolling=”no” frameborder=”0″ style=”width:100%; _height:100%;”></iframe>
方法二（推荐）：Demo：iframe2
1.脚本
在调用iframe的页面添加脚本
<script type=”text/javascript”>
function ReSizeiFrame(iframe)
{
if(iframe && !window.opera)
{
iframe.style.display = “block”;
if(iframe.contentDocument && iframe.contentWindow.document.documentElement.scrollHeight)
{
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;//设置iframe在火狐下高度
}
else if (iframe.Document && iframe.Document.body.scrollHeight)
{
iframe.height = iframe.Document.body.scrollHeight;//设置iframe在ie下的高度
}
}
}
</script>
2.调用
<iframe id=”frame_content” src=”d.htm” scrolling=”no” frameborder=”0″ onload=”ReSizeiFrame(this);” style=”width:100%;”></iframe>
示例下载：iframe-js.rar
做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。
单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。
跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：
很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：
设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：
上面这些都是在还没开始动手制作之前所要做的。
切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：
HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：
是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。
如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。
今天啄米鸟给我了一个冰剑的《em实现倒三角的提示效果》。仔细琢磨了一下运用的还是很巧妙的，在现实的前端开发中也很有用，至少可以减小图片的字节。
先看看应用实例吧：
实现的原来就是：在一个宽高为0像素的块状元素中设置border属性，例如
.box{
width:0px;
height:0;
border-bottom:50px #F00 solid;
border-left:50px #03F solid;
border-right: 50px #F90 solid;
border-top:50px #6C0 solid;
}
在浏览器中的显示如图：
点击查看demo：http://www.css88.com/demo/border/border1.html
这样就有上下左右四个三角形了，再把除了要用的三角外的其他3个三角（border）颜色设置为背景色就ok了。
例如这样就能得到一个颜色为#CCC的向上的三角：
.to-top{
display:block;
overflow:hidden;
width:0px;
height:0px;
border:6px solid #ccc;
border-color:#ccc #fff;
border-width:0 6px 6px 6px;
}
更多的实例请点击查看demo：http://www.css88.com/demo/border/border.html
最新关注