<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>盒子UI</title>
	<atom:link href="http://www.boxui.com/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.boxui.com</link>
	<description>专注于UI设计领域的技术讨论和研究</description>
	<lastBuildDate>Wed, 01 Sep 2010 02:00:27 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CATV UI设计</title>
		<link>http://www.boxui.com/?p=1431</link>
		<comments>http://www.boxui.com/?p=1431#comments</comments>
		<pubDate>Tue, 31 Aug 2010 06:05:10 +0000</pubDate>
		<dc:creator>dream</dc:creator>
				<category><![CDATA[UI设计]]></category>
		<category><![CDATA[幻灯]]></category>
		<category><![CDATA[catv]]></category>
		<category><![CDATA[ui设计]]></category>
		<category><![CDATA[有线电视]]></category>
		<category><![CDATA[用户界面]]></category>

		<guid isPermaLink="false">http://www.boxui.com/?p=1431</guid>
		<description><![CDATA[最近做的一套有线电视-CATV UI设计，老规矩，还是放上几张飞机稿。鉴于目前国内用户使用液晶电视还不是很普及，为了照顾老式CRT电视用户，配色方面使用大范围单色块，小区域颜色渐变的方式来减少图片在CRT电视机上颜色的损失。最后输出成256色的索引图，确保低端电视盒（STB）能正常显示。你现在看到的图片都只是飞机稿，还没输出成索引模式，所以效果会比在CRT电视机看到要稍微好点。





]]></description>
			<content:encoded><![CDATA[<p>最近做的一套有线电视-CATV UI设计，老规矩，还是放上几张飞机稿。鉴于目前国内用户使用液晶电视还不是很普及，为了照顾老式CRT电视用户，配色方面使用大范围单色块，小区域颜色渐变的方式来减少图片在CRT电视机上颜色的损失。最后输出成256色的索引图，确保低端电视盒（STB）能正常显示。你现在看到的图片都只是飞机稿，还没输出成索引模式，所以效果会比在CRT电视机看到要稍微好点。</p>
<p><div id="attachment_1432" class="wp-caption alignnone" style="width: 650px"><img class="size-full wp-image-1432" title="CATV UI设计" src="http://www.boxui.com/blog/wp-content/uploads/2010/08/catv.jpg" alt="CATV UI设计" width="640" height="100" /><p class="wp-caption-text">CATV UI设计</p></div></p>
<p><span id="more-1431"></span></p>
<p><img title="CATV UI设计－主界面" src="http://www.boxui.com/blog/wp-content/uploads/2010/08/catv-main.jpg" alt="CATV UI设计－主界面" width="640" height="520" /></p>
<p><img title="CATV UI设计－娱乐栏目" src="http://www.boxui.com/blog/wp-content/uploads/2010/08/catv-yule.jpg" alt="CATV UI设计－娱乐栏目" width="640" height="520" /></p>
<p><img title="CATV UI设计－电影介绍" src="http://www.boxui.com/blog/wp-content/uploads/2010/08/bg_details.jpg" alt="CATV UI设计－电影介绍" width="640" height="520" /></p>
<p><img title="CATV UI设计－信息提示窗口" src="http://www.boxui.com/blog/wp-content/uploads/2010/08/catv-msg.jpg" alt="CATV UI设计－信息提示窗口" width="640" height="520" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.boxui.com/?feed=rss2&amp;p=1431</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>超简约时钟</title>
		<link>http://www.boxui.com/?p=1430</link>
		<comments>http://www.boxui.com/?p=1430#comments</comments>
		<pubDate>Wed, 25 Aug 2010 03:56:28 +0000</pubDate>
		<dc:creator>dream</dc:creator>
				<category><![CDATA[分享]]></category>
		<category><![CDATA[简约时钟]]></category>
		<category><![CDATA[简约设计]]></category>

		<guid isPermaLink="false">http://www.boxui.com/?p=1430</guid>
		<description><![CDATA[自iphone的推出以来，我们身边不知不觉中已流行起了一股简约风格，现实生活中越来越多的东西都变得越来越简洁易用。简洁的手机设计，简洁的电脑外观，简洁慢慢等同于个性。而我们日常常要接触到的时钟也刮起了简洁风。]]></description>
			<content:encoded><![CDATA[<p>自iphone的推出以来，我们身边不知不觉中已流行起了一股简约风格，现实生活中越来越多的东西都变得越来越简洁易用。简洁的手机设计，简洁的电脑外观，简洁慢慢等同于个性。而我们日常常要接触到的时钟也刮起了简洁风。</p>
<p><img title="多种颜色可供选择" src="http://www.boxui.com/blog/wp-content/uploads/2010/08/shizhong1.jpg" alt="多种颜色可供选择" /></p>
<p><span id="more-1430"></span></p>
<p>多种颜色可供选择</p>
<p>这个简单到爆，潮到爆的时钟，估计不少人见到都会眼前一亮吧。从图片上看，这款时钟采用的是金属窄边设计，窄到咋眼一看还以为是 MP3 呢，还有哥们说像测怀孕用的试纸，哈哈。同时，这款窄边时钟还提供多种颜色，小巧的设计方便摆放。只是，只是谁能告诉我，现在是几点啊。。。</p>
<p><img title="大图赏析" src="http://www.boxui.com/blog/wp-content/uploads/2010/08/shizhong2.jpg" alt="时钟大图赏析" /></p>
<p>时钟大图赏析</p>
<p><img title="各种颜色细赏" src="http://www.boxui.com/blog/wp-content/uploads/2010/08/shizhong3.jpg" alt="各种颜色时钟细赏" /></p>
<p>各种颜色时钟细赏</p>
]]></content:encoded>
			<wfw:commentRss>http://www.boxui.com/?feed=rss2&amp;p=1430</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>IE6 Li标签左边多出16像素(px)宽度的BUG</title>
		<link>http://www.boxui.com/?p=1428</link>
		<comments>http://www.boxui.com/?p=1428#comments</comments>
		<pubDate>Wed, 18 Aug 2010 02:42:51 +0000</pubDate>
		<dc:creator>dream</dc:creator>
				<category><![CDATA[分享]]></category>
		<category><![CDATA[ie6 bug]]></category>
		<category><![CDATA[li 16px]]></category>

		<guid isPermaLink="false">http://www.boxui.com/?p=1428</guid>
		<description><![CDATA[偶然发现，IE６的Li标签左边会多出16px的宽度，即使把list-style-type设置成none。而在Firefox中却是正常的（IE其它版本没测试，不过应该是和Firefox一样的）]]></description>
			<content:encoded><![CDATA[<p>偶然发现，IE６的Li标签左边会多出16px的宽度，即使把list-style-type设置成none。而在Firefox中却是正常的（IE其它版本没测试，不过应该是和Firefox一样的）。<br />
<span id="more-1428"></span><br />
经验证，其实是IE６的list-style-position属性造成的，默认情况下，Firefox中list-style-position值为outside,即列表项符号会在LI标签的外面显示。而IE６的默认值则相反(inside)。不过这还不是问题关键，IE６完全是属于占着茅坑不拉屎的那种，即使你不显示列表项符号，即把list-style-type设置成none，它依然会保留列表项符号占用的空间。所以无论你给LI的设置margin:0或者padding:0，你都会发现Li左边会多出16PX的空间。</p>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/ie6_li_bug.jpg" alt="IE6 li 16px bug" /></p>
<p>既然知道问题的关键，解决起来就不难了，直接设置</p>
<blockquote><p>list-style-position:outside;</p></blockquote>
<p>OK，把项目符号赶到LI的外面去，让IE６去哭吧。。。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.boxui.com/?feed=rss2&amp;p=1428</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>大型网站设计和维护的技巧</title>
		<link>http://www.boxui.com/?p=1423</link>
		<comments>http://www.boxui.com/?p=1423#comments</comments>
		<pubDate>Wed, 11 Aug 2010 03:52:50 +0000</pubDate>
		<dc:creator>dream</dc:creator>
				<category><![CDATA[转载]]></category>
		<category><![CDATA[大型网站设计]]></category>
		<category><![CDATA[网站维护]]></category>

		<guid isPermaLink="false">http://www.boxui.com/?p=1423</guid>
		<description><![CDATA[很不错的一篇文章，很好的总结了大型网站设计和维护中会遇到的问题，并提出了相应的解决办法（建议）。其实，Dream觉得对中小型网站也同样适用。]]></description>
			<content:encoded><![CDATA[<p>很不错的一篇文章，很好的总结了大型网站设计和维护中会遇到的问题，并提出了相应的解决办法（建议）,Dream觉得对中小型网站也同样适用。</p>
<p>项目范围和规模各不相同，他们带来的挑战各不相同一样。作为一个独立的<a title="点击查看有关网页设计师相关文章" href="http://www.boxui.com/?p=1418">网页设计师</a>，我最大的职责就是负责FlashDen。随着成千上万的活动用 户聊天，上传和购物，网站处理着大额的金钱和巨大的流量。 设计，重构，维护和开发团队的工作给了我一些能使事情变得更容易的用用的见解和技巧。而且，就在昨天，我们开始了对网站最大的一次重构，着看上去是一次很 好的机会来记录我最有用的7个秘诀。<span id="more-1423"></span></p>
<h3>1. 可维护的设计和代码</h3>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesign-1.jpg" alt="可维护的设计和代码" /></p>
<p>我给的第一条也是最条一条秘诀是设计站点保证可以轻松维护。很多时候，当你设计一个站点，你可能为了美学牺牲一些东西。例如，你可能使用一个图片而文 字或者样式就可以应付。或者你可能故意使用一个没有空间缩放的菜单结构。当网站变大时，这将将成为一个非常糟糕的设计。当我两年前建成FlashDen的 第一个版本时，我使用图片按钮。他们看起来很漂亮，但同时我被100多个不同的按钮图片库拖累着，更谈不上修改图片了。之后在接下来的几个月中，当一个开 发者需要一个新按钮时候他们向我要一个新图片。不用说，我学到这个教训很快，我们切换到一个单独的按钮类，虽然看上去不是很好，但是这种情况更能安心。可 维护性的另一面是考虑站点将会怎样成长和变化。比如，当一个新页面增加时，它到哪里去？我一直想要一个横向的导航栏，但是经过一些尝试，我们限制地使用了 加入子栏目的垂直的导航栏，从而加入一个标签结构到页面来保证相关的页面能被归类到一起。我不敢说这是世界上最好的导航栏，但是它肯定能够让我们不用重新 设计在一个新的节点加入网站的时候。所以当你在设计大型站点时候，设法让它变得简单，你会为此而感到高兴的！</p>
<h3>2. 找出你的用户群和任务</h3>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesign-2.jpg" alt="找出你的用户群和任务" /></p>
<p>大型网站网站和小型站点的最大一个区别就是使用网站的不同用户类型的数量。例如在FlashDen上，有买家、作家、访客、管理员和会员。每个用户组 都有他们各自不同的目标和任务。有时候他们的任务重叠，但是他们有很大的不同。一个地方的用户任务在相互对立的观点最好的例子是在一个网页。网站上没有任 何一个地方不衔接的每个用户组，并在其他地方是如此的重要，以确保每个人都会有他们想要的。当然，你要小心，在服务一个用户组你不忽略另一个。在这次最新 一次FlashDen重新设计时候，我所作工作最大的地方是主页。我做的第一件事情是给自己列出每个用户组需要做的事情：<br />
<strong>１）．买家 – 在FlashDen上购买文件的人</strong><br />
浏览项目，搜索，访问他们的个人主页，存款，学习使用网站（新买家）<br />
<strong>２）．作者 – 在FlashDen上卖商品的人</strong><br />
与其他会员聊天，在主页上展示他们项目的功能，了解网站的新闻，快速的获取他们的投资搭配和收益<br />
<strong>３）．新访客 – 潜在的买家/作者/会员，刚到站点的人</strong><br />
快速了解到站点是干嘛的，起步教程，查看不同类别的文件和价格<br />
<strong>４）．会员 – 不是真正的买家或作者，而是在社区中活跃</strong><br />
和其他会员聊天，查看站点新闻，浏览文件<br />
<strong>５）．管理员/审稿人 – 我们的工作人员，管理文件的批准，主持论坛，参与大部分活动</strong><br />
快速批准文件，查看最新论坛主题，添加站点新闻</p>
<p>当你知道不同的用户群体想要做什么，那么你可以设计一个网页，解决了他们所有的需要。不用说，这是随着用户组和任务数量指数级增加的困难的任务。在该 网站的其他网页，你会经常为部分用户组而苦恼，而在主页上，他们却又都集中在一起。不用怀疑，主页是你设计一个网站时候最重要的一项工作。在你解决不同需 求之前，你需要先考虑用户群。为了做到这个，你需要了解该网站是要实现的目标。</p>
<h3>3. 了解网站目标</h3>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesign-3.jpg" alt="了解网站目标" /></p>
<p>虽然每个用户组会很自然地认为他们是最重要的，但是你应该根据他们的优先度来判别站点要实现的目标。比如在FlashDen上，我们给候补人员列出下面几条结论：<br />
<em>１）．该网站的首要任务是为买家服务。为买家服务可以带来不断的收入，同时也可以为作者群服务。<br />
２）．让游客更快的了解网站进而成为会员也是至关重要的。FlashDen还处在一个比较新兴的市场，不断有新竞争对手出现，如何将注册会员变成买家或者作者是相当重要的。<br />
３）．创作者是FlashDen的核心部分，他们也是非常重要，和其他用户群不同的是，他们是网站坚定的拥护者。<br />
４）．注册会员虽然没有创作者或者买家这么重要，但是他们也在为周边的社群作出贡献。<br />
５）．作为雇员，管理员/审稿人是相对最不重要的。</em></p>
<p>因此，从以上所说可以得出结论，网站服务的的用户需求优先顺序：访客&gt;买家&gt;作者&gt;成员“&gt;管理员。认识你的网站正在努力实 现的却是最终用户线程的缝制任务一起，并告诉你什么你应该尝试把页面上。理解你的网站目的可以把你的所要作的任务贯穿在一起，并且能告诉你应该在页面上放 些什么东西。在每个关键性页面你要能区分识别出用户组、任务和优先级别。对于重要的页面比如主页我慎重的在纸上设计，而一些小的页面则是在脑子里面思考一 下。</p>
<h3>4. 设计，精炼，精炼，精炼 …</h3>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesign-4.jpg" width="640" alt=" 设计，精炼，精炼，精炼" /></p>
<p>在你找到你的用户组别，任务，网站目标，优先级别等等之后，到了设计的时间了！这是至关重要的步骤，因为在实际操作中，这一步可以大幅降低一些将必要 的返工设计工作量。每当我刚开始设计并没有真正分析第一大网站，我已不可避免地要大量的返工，甚至整个屏幕交互界面。很多设计师喜欢在这点用线框，这可以 简单地用线条和框勾勒大约内容应该显示的地方。我个人更喜欢一开始用Photoshop，因为我速度不够快，这样能让我细致地看到细节的改变。我也认为详 细细节信息设计比在纸上显示更直观。简单地改变颜色和背景颜色可以使整个网页页面元素立马看上去更为重要。一旦你有一个怎样的信息需要共同努力粗略的想 法，你应该拿出一个工作的设计，一般是确定，然后再精炼，精炼，精炼。我经常会起草5到6相同的外观，然后在之上尝试不同类型、大小、图像，布局的改动， 背景等等，看看你对它的直观感受。不管你觉得第一个布局有多好，我可以保证，在花费一段时间进行数次版本升级之后，你会发现了你原来的版本不是和你最初想 到的那么好。有时你甚至抛弃整个设计并重新开始。而如果你有一个良好的基础，然后精炼细化能让你有一个漂亮的成果。</p>
<h3>5. 听取别人的意见，自己下最后的主意</h3>
<p>任何一个大型的工作中，你都会被其他很多意见所影响。在开始FlashDen工作之前，我曾经与各种网站设计公司合作。期间我也有不幸设计一些大型保 险公司和一些政府组织。我说不幸，因为当你到该客户和牵扯很多利益的人打交道，同时在许多当时还不清楚真正的决策权的情况下作出错误决策。这会导致无休止 的会议，无穷无尽的变化，并极大的混淆你的眼光。不管是什么用户，真正重要的只是得到他们的意见。在大多数情况下，他们比你更知道了很多与业务有关的事。 但愿他们比你还了解用户，这些知识将能够向你提供建设性的意见。得到与你一起工作的开发团队的意见也同样重要。在FlashDen我们很幸运，因为有两个 开发者在用户界面和可用性设计方面经验丰富。随着他们的投入，和其他团队成员，向最终的产品提出了很多不同的想法。但到最后，就是你这个设计专家作出最后 决定的时候了。如果你有一个难对付的客户这可能会非常棘手，因为这些客户往往认为他们应该作最后的决策。如果是这样的话，你需要想办法向他们解释，灌输并 且展示出你的选择会带来最好的收益。;有时候硬着头皮把客户的意见接受，并作为项目中的一个长期建设性功能。</p>
<h3>6. 为将来做组织</h3>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesign-5.jpg" alt="为将来做组织" /></p>
<p>当您为一个大网站编码设计时，它是真正重要的是反复思考未来的变化。如何管理您的文件和文件夹将极大地影响之后的工作。例如最近我们决定建立一个着重 音乐的FlashDen的姊妹网站，即AudioJungle。为了简化，这个网站是将使用相同的HTML，只是改变样式来使它看起来像一个不同的网站。 这里有一些事情要记住：<br />
<strong>１）．整理一个良好的文件夹结构</strong><br />
脚本，样式表，界面的图片，图片内容，等等，都需要分开存放。如果一个小网站，你也许可以把这些东西杂糅到一起，但在大型站点中，找到你需要的内容变得更为重要。<br />
<strong>２）．给你的文件使用有规则、良好的命名规范</strong><br />
没有什么比按名字 “gd_l3.jpg”寻找一块图片更为糟糕。你怎样做即基本是个人的事，但我觉得使用通用命名描述性文件名的前缀会有更大的帮助。比如：我可能会给头部 的每张图片加上前缀'header_'，每一个背景加上'bg_'，头部菜单中的背景可能称为'header_bg_menu.jpg'。前缀有一个好 处，当您的文件按名称排序，他们都出现在一起。<br />
<strong>３）．使用Subversion</strong><br />
这是被我们的开发人员逼得，但幸亏我们用了 它！Subversion可以跟踪文件和档案的变更，同时可以防止覆盖其他设计者/开发者在同一个项目中的文件。这需要一些时间来适应，但即使没有开发者 使用它的原因，在HTML / CSS的设计上用它也是值得的。还不知道Subversion？赶紧去使用吧。<br />
<strong>４）．在你写HTML和CSS深入思考写法</strong><br />
很容易写出垃圾HTML和CSS代码，而且很难清除它们来获得原先版本。经过4个重设计，我仍然使用很多相同的CSS文件，必须规划地清理不再使用的或者带来混淆布局定义CSS类。通过大量的意见，甚至可能是多个样式表，并确保你有良好的命名风格！<br />
<strong>５）．早点开始浏览器差异兼容工作</strong><br />
我在FlashDen这方面的工作听失误的，至 今我们已经为此付出了很大的代价。我最初的布局设计在IE7上，直到我们完成整个网站才发现忽略了IE6。之后我们已经加入IE浏览器条件式，和CSS Hack和其他解决方法。在你建立一个庞大的站点时候，在页面上只有少量元素时候可以更轻松的处理浏览器兼容性，，所以不要重蹈覆辙！</p>
<p>7. 确保可以简单的扩展你的样式表<br />
<img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesign-6.jpg" alt="确保可以简单的扩展你的样式表" /></p>
<p>网站越大，设计师就越有可能看到或修改每一个单独页面。如果你是一个大型网站上唯一设计师 – 比如我 – 你可能不想在每个页面上重定义。因此，多花精力在样式表上，可以通过默认的属性让页面看起来不错。<br />
<strong>１）．确保你定义了&lt;input&gt;，&lt;strong&gt;等元素的默认样式。</strong><br />
这样的页面可以自动呈现的不错。如果你想指望别人做&lt;strong&gt;这样的事情，那么不可避免的会和其他页面产生差异<br />
<strong>２）．创建可让开发人员重复使用的元素</strong><br />
比如在FlashDen上我们有一个CSS表类称为“general_table”，可以确保一个不错的填充数据时候使用的样式。当我有机会设计网页样式时候，我可以使用个性的表和数据高亮呈现的类型，但是很少会有开发人员吧页面制作成全能的样式去使用。<br />
<strong>３）．请确保您的网页布局有一个不错的结构，即使他里面只有文字。</strong><br />
总是会有些网页还没能往里面添加图像，可能看起来有点沉闷。通过使用诸如标题样式，工具条等等，你可以确保他们也很美观，并且有一定的视觉风格。有关FlashDen在大多数例子中，我们文本块总结如下：</p>
<p>&lt;fieldset&gt;<br />
&lt;legend&gt;Heading&lt;/legend&gt;<br />
Content<br />
&lt;/fieldset&gt;</p>
<p>默认情况下，文字外面包围着一个漂亮的边框和标题。这样很容易和开发人员协调工作，文字和表现有了不错的分离，使之看起来更具可读性。我们同时也有一 个侧边栏组件，仅仅把文字内容额外包起来，但是这能使网页看起来更加直观。经过设计师的设计，每一个页面基本都是优化过的，但是他们可能不是那么健壮，它 仍然看起来很专业和统一。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.boxui.com/?feed=rss2&amp;p=1423</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>启用Gzip Compression－让wordpress享受飞一般的感觉</title>
		<link>http://www.boxui.com/?p=1420</link>
		<comments>http://www.boxui.com/?p=1420#comments</comments>
		<pubDate>Tue, 03 Aug 2010 07:26:22 +0000</pubDate>
		<dc:creator>dream</dc:creator>
				<category><![CDATA[历程]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[gzip compression]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[wordpress优化]]></category>

		<guid isPermaLink="false">http://www.boxui.com/?p=1420</guid>
		<description><![CDATA[之前用的国内的空间，速度还算可以，所以也就没想着去优化wordpress的速度。最近搬到ixwebhosting，那速度果然是传说中的垃圾中的战斗机。虽然使用了wp supper cache插件，但速度依然奇慢。于是便想到可以通过启用Gzip压缩来减小文件的大小，来加快网页的浏览速度。经过一番折腾发现效果还是很明显的，用YSlow插件测试性能提高了２个档次。]]></description>
			<content:encoded><![CDATA[<p>之前用的国内的空间，速度还算可以，所以也就没想着去优化wordpress的速度。最近搬到ixwebhosting，那速度果然是传说中的垃圾中的战斗机。虽然使用了wp supper cache插件，但速度依然奇慢。于是便想到可以通过启用<strong>Gzip压缩</strong>来减小文件的大小，来加快网页的浏览速度。经过一番折腾发现效果还是很明显的，用YSlow插件测试性能提高了２个档次。好方法不敢独享，特写出来和各位分享下。<span id="more-1420"></span></p>
<h3>１，请确认你的空间支持Gzip。</h3>
<p>还好ixwebhosting是支持的，而且默认是启用的。你可以通过phpinfo.php查看你的空间是否支持Gzip compression。</p>
<h3>２，打开Wordpress的Gzip功能，其实在Wordpress２.5以前默认是启用的，不过为什么这版本以后会关掉。不管它，我们把它打开。</h3>
<p>打开你Wordpress根目录下的index.php(切记是根目录下的，不是theme目录)，然后在</p>
<blockquote><p>define('WP_USE_THEMES', true);</p></blockquote>
<p>后面加上</p>
<blockquote><p>if(ereg('gzip',$_SERVER['HTTP_ACCEPT_ENCODING'])){<br />
if(substr($_SERVER['REQUEST_URI'],0,10)!='/wp-content/uploads/')//排除不需要Gzip压缩的目录，图片一般不推荐启用Gzip压缩<br />
ob_start('ob_gzhandler');<br />
}</p></blockquote>
<p>到这里你已经开启了Gzip功能，不过为了保险起见，还是检测去一下吧：http://tool.chinaz.com/Gzips/<br />
通过这一步骤，网站的性能已经提高了一个档次，不过对于CSS和JS，默认是不进行压缩的，下一步我们就让它也对JS和CSS进行压缩</p>
<h3>３，让JS和CSS支持Gzip压缩</h3>
<p>搜索了一下，有很多方法可以实现，但都有一个严重的BUG，该死的IE６对Gzip的支持不是很好，如果对CSS、JS进行Gzip压缩，会使部分JS失效或者CSS无法加载，Dream试了下，只要一启用Gzip，Wordpress就处于裸奔状态，CSS完全失效，而且还一大堆JS错误。既然IE６不支持，那我们就绕过它（惹不起我还躲不起吗？）经过一下午的折腾，终于搞定了这问题。</p>
<h4>１）在你网站的根目录下新建立一文件夹wp-cache，用来存放Gzip文件，请确保该文件夹权限为可读写。</p>
<h4>２）在你网站的根目录下新建一名字为gzip.php的文件，代码如下。如果你懒得Copy代码，直接点击<a href="http://www.boxui.com/outerLink/gzip.rar">这里</a>下载吧.</h4>
<blockquote><p>&lt;?php<br />
define('ABSPATH', dirname(__FILE__).'/');<br />
$cache = true;//Gzip压缩开关<br />
$cachedir = 'wp-cache/';//存放gz文件的目录，确保可写</p>
<p>$gzip = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip');</p>
<p>$deflate = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'deflate');<br />
$encoding = $gzip ? 'gzip' : ($deflate ? 'deflate' : 'none');</p>
<p>if(!isset($_SERVER['QUERY_STRING']))<br />
exit();</p>
<p>$key=array_shift(explode('?', $_SERVER['QUERY_STRING']));<br />
$key=str_replace('../','',$key);</p>
<p>$filename=ABSPATH.$key;</p>
<p>$symbol='^';</p>
<p>$rel_path=str_replace(ABSPATH,'',dirname($filename));<br />
$namespace=str_replace('/',$symbol,$rel_path);</p>
<p>$cache_filename=ABSPATH.$cachedir.$namespace.$symbol.basename($filename).'.gz';//生成gz文件路径</p>
<p>$type="Content-type: text/html"; //默认的类型信息</p>
<p>$ext = array_pop(explode('.', $filename));//根据后缀判断文件类型信息<br />
switch ($ext)<br />
{<br />
case 'css':<br />
$type="Content-type: text/css";<br />
break;<br />
case 'js':<br />
$type="Content-type: text/javascript";<br />
break;<br />
default:<br />
exit();<br />
}</p>
<p>if($cache)<br />
{<br />
if(file_exists($cache_filename)){//假如存在gz文件</p>
<p>$mtime = filemtime($cache_filename);<br />
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';</p>
<p>if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &amp;&amp; array_shift(explode(';', $_SERVER['HTTP_IF_MODIFIED_SINCE'])) ==  $gmt_mtime))<br />
{</p>
<p>// 浏览器cache中的文件修改日期是否一致，将返回304<br />
header ("HTTP/1.1 304 Not Modified");<br />
header("Expires: ");<br />
header("Cache-Control: ");<br />
header("Pragma: ");<br />
header($type);<br />
header("Tips: Cache Not Modified (Gzip)");<br />
header ('Content-Length: 0');</p>
<p>}<br />
else<br />
{</p>
<p>//读取gz文件输出<br />
$content = file_get_contents($cache_filename);<br />
header("Last-Modified:" . $gmt_mtime);<br />
header("Expires: ");<br />
header("Cache-Control: ");<br />
header("Pragma: ");<br />
header($type);<br />
header("Tips: Normal Respond (Gzip)");<br />
header("Content-Encoding: gzip");<br />
echo $content;<br />
}</p>
<p>}<br />
else if(file_exists($filename))<br />
{ //没有对应的gz文件</p>
<p>$mtime = mktime();<br />
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';</p>
<p>$content = file_get_contents($filename);//读取文件<br />
$content = gzencode($content, 9, $gzip ? FORCE_GZIP : FORCE_DEFLATE);//压缩文件内容</p>
<p>header("Last-Modified:" . $gmt_mtime);<br />
header("Expires: ");<br />
header("Cache-Control: ");<br />
header("Pragma: ");<br />
header($type);<br />
header("Tips: Build Gzip File (Gzip)");<br />
header ("Content-Encoding: " . $encoding);<br />
header ('Content-Length: ' . strlen($content));<br />
echo $content;</p>
<p>if ($fp = fopen($cache_filename, 'w'))<br />
{//写入gz文件，供下次使用<br />
fwrite($fp, $content);<br />
fclose($fp);<br />
}</p>
<p>}<br />
else<br />
{<br />
header("HTTP/1.0 404 Not Found");<br />
}<br />
}<br />
else<br />
{ //处理不使用Gzip模式下的输出。原理基本同上<br />
if(file_exists($filename))<br />
{<br />
$mtime = filemtime($filename);<br />
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';</p>
<p>if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &amp;&amp; array_shift(explode(';', $_SERVER['HTTP_IF_MODIFIED_SINCE'])) ==  $gmt_mtime))<br />
{<br />
header ("HTTP/1.1 304 Not Modified");<br />
header("Expires: ");<br />
header("Cache-Control: ");<br />
header("Pragma: ");<br />
header($type);<br />
header("Tips: Cache Not Modified");<br />
header ('Content-Length: 0');</p>
<p>}<br />
else<br />
{<br />
header("Last-Modified:" . $gmt_mtime);<br />
header("Expires: ");<br />
header("Cache-Control: ");<br />
header("Pragma: ");<br />
header($type);<br />
header("Tips: Normal Respond");<br />
$content = readfile($filename);<br />
echo $content;<br />
}<br />
}<br />
else<br />
{<br />
header("HTTP/1.0 404 Not Found");<br />
}<br />
}</p>
<p>?&gt;</p></blockquote>
<h4>３）在你网站的根目录下的.htaccess中添加以下代码，如果.htaccess不存在则新建一个。</h4>
<blockquote><p>RewriteCond %{HTTP:User-Agent} !MSIE\ [5-6]<br />
RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]</p></blockquote>
<p>这段代码的意思是判断当前浏览器是否为IE５－６（虽然现在很少人用IE５，不过为保险起见还是加上吧），如果不是则对CSS/JS启用Gzip压缩。</p>
<p>至此，任务已完成。不出意外的话，经过这么一番折腾，你的Wordpress性能应该能提升２个档次。什么，你知道用什么来测试，Firefox插件YSlow。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.boxui.com/?feed=rss2&amp;p=1420</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>网页设计师是怎样下地狱的</title>
		<link>http://www.boxui.com/?p=1418</link>
		<comments>http://www.boxui.com/?p=1418#comments</comments>
		<pubDate>Mon, 02 Aug 2010 02:42:46 +0000</pubDate>
		<dc:creator>dream</dc:creator>
				<category><![CDATA[转载]]></category>
		<category><![CDATA[网页设计师]]></category>

		<guid isPermaLink="false">http://www.boxui.com/?p=1418</guid>
		<description><![CDATA[很有意思但却很真实的一篇文章，送给那些正在走向地狱或者已经在地狱（设计的深渊）的网页设计师们，以此共勉。]]></description>
			<content:encoded><![CDATA[<p>很有意思但却很真实的一篇文章，送给那些正在走向地狱或者已经在地狱（设计的深渊）的<strong>网页设计师</strong>们，以此共勉。</p>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesigner01.jpg" border="0" alt="" width="510" height="307" /><span id="more-1418"></span></p>
<p>刚开始的时候，一切都很棒。客户提出他们的需求，你也满怀期望。充满激情和兴奋感。<br />
客户：新的网站一定会很棒。<br />
设计师：岂止很棒？肯定会难以置信地棒。它会像遨游在外太空的雄鹰一般不可思议。</p>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesigner02.jpg" border="0" alt="" width="510" height="396" /></p>
<p>客户给你看他们现在的网站，你们一起嘲笑它是如此糟糕。<br />
客户：哈哈，这都是什么烂玩意！我们上次请的设计师简直是个白痴。<br />
设计师：是啊！怎么可能做成这样？！简直就是在对全人类犯罪。</p>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesigner03.jpg" border="0" alt="" width="510" height="577" /></p>
<p>于是，你重新设计了网站。新网站看上去美观，用起来也很好。这简直就是完美设计的最佳范例。<br />
设计师：噔噔噔噔！看！<br />
客户：我喜欢！看上去太棒了！但是……</p>
<hr /><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesigner04.jpg" border="0" alt="" width="510" height="339" /></p>
<p>还需要做些“小”调整<br />
客户（想）：这个设计很完美，但我作为CEO，有责任提点改正意见来让自己感觉自己的工作做到位了。同时，我得用“用户体验”，“转化导向”这样的术语来显得自己聪明些，尽管我几乎都不大会用电脑。<br />
客户：你能设计得更“跳”一点么？它需要更“鲜明”些。看上去感觉好像不太对。<br />
（作者注：客户确实跟我说过这样的话。直到今天，我还是不太理解在网页设计上“跳”和“鲜明”到底是什么意思。我也不知道怎样以他人的感受来设计网页）</p>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesigner05.jpg" border="0" alt="" width="510" height="309" /></p>
<p>所谓的小调整开始变多，很快就变成不那么小了。<br />
客户：我想了一下，决定把字体调回Comic Sans. 另外，你能搞一个镜头光晕效果么？它们看上去非常Web2.0. 另外，这个网站绝对不能太“线条化”了。当我看这个网站的时候，我看到的都是一行一行的。你能处理一下么？<br />
（作者注：确实有个客户这么对我说过。这个设计里绝对没有任何水平标尺或者线条之类的东西。事实上他说的是&lt;div&gt;啊&lt;p&gt;啊之类的代码生成的矩形区域）</p>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesigner06.jpg" border="0" alt="" width="510" height="376" /></p>
<p>客户让别的人参与了进来。<br />
“看上去不错，不过我还想听到更多的意见，朋友，同事，叔叔甚至是我的宠物仓鼠”。<br />
客户：我让我母亲也加入讨论。她在1982年设计过一张面包促销宣传单，所以你可以说她也是有设计的眼光。<br />
客户母亲：你排的这个设计需要点亮色，看上去太暗了。加点粉色怎样？再放上一只小猫。人人都爱小猫。<br />
（作者注：我确实曾经遇到一个客户让他的母亲也参与到设计流程里，好让她提出批评和建议）</p>
<hr /><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesigner07.jpg" border="0" alt="" width="510" height="337" /></p>
<p>所有希望都破灭了。<br />
你开始幻想别的职业，比如靠挖沟来生存或者给老人搓澡。<br />
客户：好的。现在是这样，我的狗Miffles可是个关键人物。它可以说是我生命中最重要的部分。我希望你能加上狗的“意识流”，这样看上去就像是 Miffles在和来访的用户说话。我会给你几页 Miffles可能会说的话，比如“我喜欢美食”，还有“嗨！欢迎访问我的网站，我是一只小狗，你可以和我握手^^”<br />
(作者注：这绝对不是我编的。就有一个客户这样要求过。我还从来没有像那会一样那么想用车用蓄电池敲一个人的头)</p>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesigner08.jpg" border="0" alt="" width="510" height="400" /></p>
<p>你再也不是一名<strong>网页设计师</strong>。<br />
你现在变成了一只绘图程序里的鼠标，而你的客户可以通过语音，email或者聊天软件来直接控制你。<br />
（作者注：我曾经遇到一个客户拿走我的设计稿后，自己直接在Photoshop上进行修改，然后把改过后觉得是他们想要的效果再发给我。在我收到他的第13个修正版后，我炒掉了他。）</p>
<p><img src="http://www.boxui.com/blog/wp-content/uploads/2010/08/webdesigner09.jpg" border="0" alt="" width="510" height="571" /></p>
<p>怨念就此诞生。<br />
客户完全忘了，他们是雇佣了你，网页设计师，来帮他们设计一个好产品。想象一下，如果你是一个设计商业飞机涡轮的工程师，他们还敢掺和进来么？<br />
客户：现在这个设计终于称得上是“跳”出来了！<br />
设计师：饶了我吧……</p>
<p>原文：<a href="http://joydesign.coletree.com/2009/12/438" target="_blank">http://joydesign.coletree.com/2009/12/438</a></p>
<p>﻿</p>
]]></content:encoded>
			<wfw:commentRss>http://www.boxui.com/?feed=rss2&amp;p=1418</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>谈谈啤酒和尿布</title>
		<link>http://www.boxui.com/?p=1416</link>
		<comments>http://www.boxui.com/?p=1416#comments</comments>
		<pubDate>Wed, 28 Jul 2010 01:41:15 +0000</pubDate>
		<dc:creator>dream</dc:creator>
				<category><![CDATA[转载]]></category>
		<category><![CDATA[啤酒和尿布]]></category>

		<guid isPermaLink="false">http://www.boxui.com/?p=1416</guid>
		<description><![CDATA[“先生，我注意到你买了啤酒，请问要不要再来一些尿布？” 如果超市收银员这样问你，你会不会想K人？即使，你知道那个关于啤酒和尿布的故事。]]></description>
			<content:encoded><![CDATA[<p>“先生，我注意到你买了啤酒，请问要不要再来一些尿布？” 如果超市收银员这样问你，你会不会想K人？即使，你知道那个关于啤酒和尿布的故事。<br />
<span id="more-1416"></span></p>
<blockquote><p>其实原故事是说，发现很多男人周五买尿布，所以超市就把啤酒也摆在尿布旁边。所以刚刚我故意混淆了两个细节：尿布和啤酒的相关性是“单向”的；推荐方式是“隐式”的（摆在一起）而不是“显式”的（口头推荐）。更重要的是，它是针对一个特定目标用户群（已婚有小孩的妻管严男人）的行为。</p></blockquote>
<p>令人吃惊的是，我看到大多在讲“啤酒和尿布的故事”的地方，都故意忽视了这些细节，转而大谈诸如协同过滤或数据挖掘什么的。恐怕这就是为什么现在很多网站的推荐系统都做得相当糟糕的缘故吧。推荐系统，本质上一种产品，而不是什么技术架构，回归到产品设计的根本原则，才有可能把它做得“有用”，进而 “好用”。</p>
<p>我其实也对推荐系统的技术一知半解，不妨抛开那些技术算法，谈几点我认为很重要的设计原则：</p>
<h2>一，着眼于“后续期望”。</h2>
<p>举个例子，假设我在浏览ipad的产品介绍，旁边的相关推荐应该是什么？设想几种答案：A：iphone,ipod；B：ipad皮套等配件；C：不同渠道商的ipad报价；D：仿ipad的其他山寨产品。如果甲同学想买一个时尚电子产品送给女友，乙同学是ipad的狂热粉丝，丙同学还在为ipad的价格犹豫，丁同学只是想要一个电子阅读器，那上面这四个答案都恰好能让他们可以继续多看一些产品。所以，推荐系统是否成功的最关键因素，并非算法实现等技术问题，而是如何洞悉用户的当前行为以及后续期望。</p>
<p>值得一提的是，除了揣测用户本身已有的期望外，为用户创造出一个新的期望也是推荐系统常常做的。比如卖书的网站就经常告诉我，这两本书可以配套买。但这种为用户推荐他原本并不期待的东西，成功率就会低很多，相反可能会打乱用户原本的行为路径。所以要慎重，不能自作聪明弄巧成拙。</p>
<h2>二，牢记80-20法则。</h2>
<p>想用一套算法解决千万用户不同的需求是不可能的，这就要求我们作一些取舍。我有一个绕口的原则是：用最简单的办法顾好大多数人在大多数情况下的最常见需求。我的这个原则的灵感来自于一个叫everything的桌面搜索软件。不管是微软还是google的桌面搜索软件，一开始总是要花很长时间（几个小时）来建索引。但这个everything只用1分钟就能建好整个硬盘的文件索引，很神奇！后来才发现，它只能搜文件名，而不能搜文件内容，而后者正是其他桌面搜索长时间建索引的原因。问题就在于，其实我们绝大多数时候找文件都是在找文件名而非内容，everything正是抓住了这个问题的核心，用20%的精力解决了80%的问题，然后，将剩下20%的问题直接抛弃！</p>
<p>将这个80-20法则用到推荐系统里，是再合适不过的了。你只需要集中精力在最常发生的情况下，用合适的算法找出合适的推荐结果，剩下的结果只要保证“相对过得去”就好。当然，这样做的前提是，你对用户的后续期望很有把握。</p>
<h2>三，解决信息焦虑。</h2>
<p>假设“釜山料理”餐厅介绍页上，相关餐厅列出“港丽茶餐厅”，你会觉得他们相关么？那，“韩膳宫烧烤”呢？会不会觉得后一个明显靠谱很多？其原因是后一个你可以看得出它与“釜山料理”都是韩式烧烤店。但如果你是一个要在人民广场约朋友吃饭的人，“釜山”和“港丽”都恰好在人民广场，而“韩膳宫”其实是在离人民广场很远的徐家汇，那不用说自然“港丽”应该作为你下一个要浏览的餐厅。</p>
<p>这里很重要的，其实是要告诉用户“为什么相关”。否则用户就会困惑，从而忽略掉你精心为他推荐的内容。一个很好的例子是网易新闻，在它的相关新闻列表上，都会将它匹配的标签显示出来。比如“与 富士康 相关的新闻”。</p>
<h2>四，始终记得商业目标。</h2>
<p>做推荐系统的最终目的，是为了商业目标：增加后续转化率？增加总用户数？还是增加成交量？其他产品设计，或许有时候需要牺牲一下眼前的商业利益，来满足用户目标。但推荐系统的商业目标与用户目标的分歧并不大，相反往往更加统一，所以这时候就要特别提醒自己注意商业目标，所有的功夫都要朝那个方向努力。当然一些很基本的用户体验还是要保证的，像在推荐系统里塞广告这种杀鸡取卵的事情还是做不得，呵呵。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.boxui.com/?feed=rss2&amp;p=1416</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>又杯具了</title>
		<link>http://www.boxui.com/?p=1415</link>
		<comments>http://www.boxui.com/?p=1415#comments</comments>
		<pubDate>Wed, 21 Jul 2010 02:46:08 +0000</pubDate>
		<dc:creator>dream</dc:creator>
				<category><![CDATA[随笔]]></category>
		<category><![CDATA[扭伤]]></category>

		<guid isPermaLink="false">http://www.boxui.com/?p=1415</guid>
		<description><![CDATA[星期天打球又把腰给扭了...吐血!
四月份扭了一次,本以为经过三个月的休养已经完全康复,没想到...旧伤加新伤,这个星期就别想上班了.加上今天已经是第四天了,伤情依然没好转,晚上会被痛醒十几次.

这段时间本站只好暂停更新了,包括免费Logo设计也暂时停止.
PS:感谢LP大人无微不至的照顾:)
]]></description>
			<content:encoded><![CDATA[<p>星期天打球又把腰给扭了...吐血!<br />
四月份扭了一次,本以为经过三个月的休养已经完全康复,没想到...旧伤加新伤,这个星期就别想上班了.加上今天已经是第四天了,伤情依然没好转,晚上会被痛醒十几次.<br />
<span id="more-1415"></span><br />
这段时间本站只好暂停更新了,包括免费Logo设计也暂时停止.</p>
<p>PS:感谢LP大人无微不至的照顾:)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.boxui.com/?feed=rss2&amp;p=1415</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic page generated in 7.714 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2010-09-07 15:35:07 -->
