<?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>XIAO-A前端技术</title>
	<atom:link href="http://www.xiao-a.com/index.php/feed" rel="self" type="application/rss+xml" />
	<link>http://www.xiao-a.com</link>
	<description>学习前端技术，学习网页设计，皇甫灵剑的个人博客</description>
	<lastBuildDate>Mon, 20 Feb 2012 08:13:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>用js中setInterval方法做图片无缝滚动</title>
		<link>http://www.xiao-a.com/index.php/archives/981.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/981.html#comments</comments>
		<pubDate>Thu, 16 Feb 2012 09:00:32 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[技术]]></category>
		<category><![CDATA[js]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=981</guid>
		<description><![CDATA[在做前端效果时，我们常常会遇到，左右滚动的js特效。 其实方法有很多种，下面我们用js中setInterval来做一个简单使用的左右无缝滚动： 第一先做一个简单的页面布局： 1234567891011121314&#60;div id=&#34;box&#34;&#62; &#60;div class=&#34;menu&#34; id=&#34;menu&#34;&#62; &#60;span class=&#34;left&#34;&#62;向左走&#60;/span&#62; &#60;span class=&#34;right&#34;&#62;向右走&#60;/span&#62; &#60;/div&#62; &#60;div class=&#34;center&#34;&#62; &#160; &#160; &#60;ul&#62; &#160; &#160;...<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="[新手]js幻灯焦点图" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F973.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F981.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">[新手]js幻灯焦点图</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="复制到系统剪切板" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F341.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F981.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://hi.csdn.net/attachment/201012/23/0_1293065903W9no.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">复制到系统剪切板</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="小试牛刀html5canvas写钟表" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F604.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F981.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10111832.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">小试牛刀html5canvas写钟表</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="js+html仿iso界面" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F612.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F981.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10111776.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">js+html仿iso界面</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="解决CSS背景图片闪动和重复加载的IE6BUG" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F338.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F981.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10136263.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">解决CSS背景图片闪动和重复加载的IE6BUG</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/981.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[新手]js幻灯焦点图</title>
		<link>http://www.xiao-a.com/index.php/archives/973.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/973.html#comments</comments>
		<pubDate>Mon, 06 Feb 2012 06:38:47 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[技术]]></category>
		<category><![CDATA[js]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=973</guid>
		<description><![CDATA[一个简单的js幻灯切换制作。也不写介绍了，现在这样的东西很多的，只对新手。 运用for循环遍历，onclink事件。 先做布局： 1234&#60;input class=&#34;but&#34; type=&#34;button&#34; value=&#34;1&#34; /&#62; &#60;input type=&#34;button&#34; value=&#34;2&#34; /&#62; &#60;input type=&#34;button&#34; value=&#34;3&#34; /&#62; &#60;div class=&#34;div&#34; style=&#34;display: block;&#34;&#62;1w1&#60;/div&#62;...<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="复制到系统剪切板" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F341.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F973.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://hi.csdn.net/attachment/201012/23/0_1293065903W9no.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">复制到系统剪切板</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="js+html仿iso界面" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F612.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F973.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10111776.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">js+html仿iso界面</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="用js中setInterval方法做图片无缝滚动" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F981.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F973.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用js中setInterval方法做图片无缝滚动</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="小试牛刀html5canvas写钟表" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F604.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F973.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10111832.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">小试牛刀html5canvas写钟表</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="继承──页面重构中的模块化设计（三）" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F277.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F973.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/02/10136859.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">继承──页面重构中的模块化设计（三）</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/973.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WEB前端开发规范文档</title>
		<link>http://www.xiao-a.com/index.php/archives/768.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/768.html#comments</comments>
		<pubDate>Wed, 28 Dec 2011 03:27:56 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[技术]]></category>
		<category><![CDATA[生活]]></category>
		<category><![CDATA[article]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=768</guid>
		<description><![CDATA[规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1....<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="揭秘前端开发工程师" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F125.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F768.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/09/10474152.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">揭秘前端开发工程师</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="浅谈交互设计规范 - [互联网]" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F166.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F768.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/02/10136961.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">浅谈交互设计规范 - [互联网]</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="CSS网页布局及网站开发常犯的20种错误" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F428.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F768.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10114177.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">CSS网页布局及网站开发常犯的20种错误</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="【转】前端开发工程师必须面对这些事儿" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F345.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F768.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">【转】前端开发工程师必须面对这些事儿</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="高手总结CSS网页布局及网站开发常犯的20种错误" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F388.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F768.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10136174.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">高手总结CSS网页布局及网站开发常犯的20种错误</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/768.html/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>如何设计新手用户引导[转]</title>
		<link>http://www.xiao-a.com/index.php/archives/760.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/760.html#comments</comments>
		<pubDate>Thu, 15 Dec 2011 02:06:16 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[设计]]></category>
		<category><![CDATA[design]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=760</guid>
		<description><![CDATA[引言：这篇文章是小柒、墨轩、淡月、和我4个人一起工作的成果，在今年9月的STS设计分享会上演讲过一次。我们的设计分享会一共有4个演讲主题，另外几个话题稍后会陆续在这里和大家见面~ 一个新的网络产品，或者一个全新的功能要想吸引用户的使用兴趣，就需要让用户在刚一接触到的时候能够快速地了解它是什么，能做些什么，并且能马上开始一些简单的操作。如果看了很久还没弄明白这些，那么很可能就彻底放弃了。 所以，设计新手用户引导，就是设计用户前一、两次使用产品时的体验，设计目标是让新手用户快速、无痛苦地成为中间用户。 一、设计时的注意事项 无论是什么类型的产品，新手用户在尝试时都会经历一些共同的情感历程：他们会对新产品和新功能有一些好奇和茫然，希望能快速了解它的概念和范围。在尝试使用时会比较敏感、容易受挫。如果身边有非常了解产品的专家级用户，一般会十分相信这个专家用户对产品的介绍和判断。 针对新手用户的这些情感上的特征，我们试着提出来一些设计新手用户引导时的注意事项。 1. 尽量少的新手任务 首先，我们要让新手快速了解产品是什么、能做什么，并且能快速上手，那么完成这个过程必须经历的任务一定不能多，要特别有针对性。引导用户阅读说明或是尝试操作都要围绕着“了解产品的概念、范围”这个目标展开，尽量不超过三个新手任务。“将用户想象成非常聪明，但非常忙的人。”──Alan Cooper。 2. 最好的引导是无形的 如果一个产品的用户界面做得足够好，体现了用户的心智模型的话，那么就不需要设计所谓的新手用户引导，而是能让用户一看到就知道要如何操作。另一方面，在新产品中延续用户在其他同类产品中已养成的使用习惯也是将引导化为无形的一种手段。 3. 容易发现和理解 当新功能确实复杂到需要特别的引导时，我们需要让引导信息容易被用户发现和理解，提供明确的操作入口。 4. 适当夸大用户成功的程度 在新手还比较敏感、易受挫的时候，给她一些鼓励和积极的反馈能够帮助她建立起使用信心。这个做法在游戏中特别常见，针对新手的任务一般都很简单，奖励积分会来得特别容易，一旦上手之后就越来越难了。为用户设置符合她使用水平的任务，并帮助她成长，这也是符合Mihalyi Casikszentmilhalyi的心流理论的。...<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="视觉设计的规范性" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F699.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F760.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/10/31/10076690.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">视觉设计的规范性</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="logo设计方案" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F224.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F760.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10114349.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">logo设计方案</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="浅谈交互设计规范 - [互联网]" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F166.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F760.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/02/10136961.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">浅谈交互设计规范 - [互联网]</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="用户体验分享会 - [互联网]" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F170.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F760.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/02/10136906.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用户体验分享会 - [互联网]</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="继承──页面重构中的模块化设计（三）" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F277.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F760.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/02/10136859.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">继承──页面重构中的模块化设计（三）</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/760.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML 5 &amp; CSS 3的新交互特性</title>
		<link>http://www.xiao-a.com/index.php/archives/750.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/750.html#comments</comments>
		<pubDate>Wed, 14 Dec 2011 07:25:02 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[技术]]></category>
		<category><![CDATA[生活]]></category>
		<category><![CDATA[article]]></category>
		<category><![CDATA[html5+css3.0]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=750</guid>
		<description><![CDATA[本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么，有没有一种新的方法可以避免这些缺点呢？ 有的，HTML5和CSS3就可以满足你的需求。甚至，它可以做的更多，更好。作为一名设计师，我们应当了解它们是什么东西，有什么特性，从而进一步思考通过HTML5和CSS3我们能做些什么。 什么是HTML5和CSS3 HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言，我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。这时候问题出来了，为什么我们要单独使用CSS呢，HTML不是一样可以控制Web页面的显示效果么？为了回答这个问题，我举个简单的例子： &#160; 有没有发现如果一旦形容的事情过多，想要把事情描述清楚的时候，我们不得不重复大量的信息？页面语言也是一样，在这种情况下显得杂乱无章，非常难以理出头绪。通过将控制显示效果的语言集成到CSS里，我们不但可以保证页面语言主体部分的简洁，而且可以非常方便的复用各种语言集合。 HTML5和CSS3是HTML和CSS的最新版本，它们目前均未确定标准，但是已经公布的新特征已经让我们心动不已。 HTML 5的新特新 1. 新的内容标签 &#160; HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。 2. 更好的表格体系 &#160; 现在，你可以抛弃JavaScript或者是PHP，只通过HTML5来定义表格。你可以定义每个表格单元的输入格式，也可以定义这个单元是否是必填的等等。 3. 音频、视频API &#160;...<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="css3.0写自己的logo" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F197.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F750.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10112535.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">css3.0写自己的logo</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="HTML5元素表" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F592.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F750.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10111854.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">HTML5元素表</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="给网页设计师的30个HTML5学习资源" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F395.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F750.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/08/04/20850618.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">给网页设计师的30个HTML5学习资源</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="HTML默认样式表CSS属性" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F392.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F750.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10135697.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">HTML默认样式表CSS属性</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="让IE浏览器支持HTML5的方法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F187.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F750.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10136484.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">让IE浏览器支持HTML5的方法</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/750.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>xiao-a自我介绍</title>
		<link>http://www.xiao-a.com/index.php/archives/735.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/735.html#comments</comments>
		<pubDate>Wed, 14 Dec 2011 06:21:53 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[生活]]></category>
		<category><![CDATA[article]]></category>
		<category><![CDATA[design]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=735</guid>
		<description><![CDATA[一般我不主动说自己是做用户体验设计，也不说做以用户为中心的设计，包括UED, UCD。这种专业名词传达的太虚，你也许是名用户体验设计师，但说“做用户体验”可能让其他人一头雾水。因为用户体验、以用户为中心并不应该是个职能。 从“网页设计”到“交互设计”再到“用户体验设计”，我经常思考用什么样的名词才能清晰、准确的描述和传达我们正在做的事情，以区分软件、工业领域对“产品设计”的定义。 07初在国外某招聘上发现web-based prototype这个词。于是突然明白，我们所做的事情应该是web-based design，所做的东西就是web-based product。通过明确的限定来清晰表达，于是在之后网志上开始逐渐使用“互联网产品设计”的说法。（现在已经相当流行了） 但在实际生活工作中，因为这个定义的复杂度很容易造成沟通障碍，不妨来考虑几个场景。 对做互联网产品设计的同行 他们关心的是你的具体职能、专长技能、应用积累，其实这已经是专业人士之间的对话。既然是专业人士，就应该直接切入主题，比如信息架构、交互设计、视觉设计、界面设计等。双方是否真的专业在这里不重要，因为只要愿意，任何人都可以“号称”自己做什么。 不过我对喜欢装，或者不小心装的人挺不客气。比如有人上来就特牛的说“我做可用性的。”，我会反问“具体哪个方面的可用性？”有不懂的人会回答“就是产品方面的可用性问题。”我会追问“产品设计具体哪个阶段？”说做“用户体验”的场景类似，对装的人来说是教训，对不小心装的人来说是切磋。 还有类人被问急了会回答“就是产品设计所有阶段的设计都做，架构啊，界面啊、交互啊等等”什么都做代表什么都懂一点。换句话说，叫没有专长，我们听的人自然就明白了。具体某个方向是否专业，不在这里探讨。 通常我与专业人士做介绍说“专职信息架构，主要涉及设计阶段中的结构层、框架层，互动娱乐和电子商务做的比较多。”T型知识结构中需要很多实践做铺垫，但传达应该抓主要的，书面介绍更应该具体详实，而不是一堆空话，比如： 专注于互联网技术领域的UCD理论转化与实践。在网络互动娱乐、电子商贸、在线广告、户外旅行、人文地理等行业应用有丰富积累，对内容组织、信息服务、社会化网络等新媒体产品形态有较深入研究。 主要传达如下三点来证明我对设计、对架构理解的专业性： 互联网设计不是行业，只是个技术领域；参考立足于传统行业设计 UCD理论必须在特定技术领域之上才能发挥效果；参考对设计和技术的误解 不同行业应用设计的价值点在个性而非共性。参考设计的技术含量 对做互联网的圈内人士 这类人群我接触的不多，工作上也没有太多交集。一般他们关心的是“高层次”话题，虽然很多时候都不靠谱。多半是idea、VC之类的点，在我看来属于战略层、范围层的事情。...<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="xiao-a站标写法代码" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F206.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F735.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10112535.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">xiao-a站标写法代码</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="[新手]js幻灯焦点图" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F973.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F735.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">[新手]js幻灯焦点图</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="用js中setInterval方法做图片无缝滚动" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F981.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F735.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用js中setInterval方法做图片无缝滚动</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="CSS网页布局及网站开发常犯的20种错误" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F428.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F735.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10114177.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">CSS网页布局及网站开发常犯的20种错误</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery AD Gallery相册插件用法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F294.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F735.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10136291.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery AD Gallery相册插件用法</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/735.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jquery&amp;css&#8212;仿作iphone4放大镜效果</title>
		<link>http://www.xiao-a.com/index.php/archives/720.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/720.html#comments</comments>
		<pubDate>Thu, 08 Dec 2011 08:37:13 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[技术]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[js]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=720</guid>
		<description><![CDATA[仿作iphone4放大镜效果：demo 制作方法： 制作不难，我们常看到的商品局部放大的插件为原理，加入css3的部分属性（css3有部分使用了另一个兼容圆角的插件),配合好看的图片美化，就能做成这样的效果。 html代码部分： 123456&#60;div id=&#34;iphone&#34;&#62; &#160; &#160; &#160; &#160; &#60;div id=&#34;webpage&#34;&#62; &#160; &#160; &#160; &#160; &#160; &#160; &#60;img src=&#34;img/webpage.jpg&#34;...<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="jquery&amp;css制作iphone相机幻灯效果" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F629.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F720.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10130790.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jquery&amp;css制作iphone相机幻灯效果</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jquery&amp;css华丽的下拉选项卡" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F636.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F720.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/02/10181028.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jquery&amp;css华丽的下拉选项卡</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery UI教程之 dialog的使用(非原创)" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F358.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F720.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10114330.bmp" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery UI教程之 dialog的使用(非原创)</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery 1.7 发布了 /(jQuery 1.7更新,jQuery 1.7b,jQuery api)" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F365.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F720.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10135858.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery 1.7 发布了 /(jQuery 1.7更新,jQuery 1.7b,jQuery api)</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="CSS的未来：一些试验性CSS属性" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F415.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F720.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10112455.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">CSS的未来：一些试验性CSS属性</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/720.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>最新强帖&#8212;-jquery&amp;php&amp;css3.0制作网络相册</title>
		<link>http://www.xiao-a.com/index.php/archives/716.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/716.html#comments</comments>
		<pubDate>Sun, 04 Dec 2011 10:08:34 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[技术]]></category>
		<category><![CDATA[html5+css3.0]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=716</guid>
		<description><![CDATA[查看效果演示：demo 很久没有跟新文章了，让大家久等了，只因前期工作太忙，没有时间。 今天推出一个运用jquery&#38;php&#38;CSS3.O制作的网络照相机效果。本次不详细介绍制作过程。下次详细更近。 谢谢大家对xiao-a前端的支持。 查看效果演示：demo 您可能喜欢的文章jquery&#038;css制作iphone相机幻灯效果 (1.000)jQuery AD Gallery相册插件用法 (0.640)复制到系统剪切板 (0.640)jQuery UI教程之 dialog的使用(非原创) (0.640)jQuery 1.7 发布了 /(jQuery 1.7更新,jQuery 1.7b,jQuery api)...<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="jquery&amp;css制作iphone相机幻灯效果" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F629.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F716.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10130790.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jquery&amp;css制作iphone相机幻灯效果</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="CSS3的动画制作菜单" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F230.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F716.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10112529.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">CSS3的动画制作菜单</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="让IE6支持css3，让 IE7、IE8 都支持CSS3" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F343.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F716.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10136239.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">让IE6支持css3，让 IE7、IE8 都支持CSS3</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jquery&amp;css华丽的下拉选项卡" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F636.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F716.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/02/10181028.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jquery&amp;css华丽的下拉选项卡</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="css3.0写自己的logo" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F197.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F716.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10112535.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">css3.0写自己的logo</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/716.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>瀑布流布局[转]</title>
		<link>http://www.xiao-a.com/index.php/archives/962.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/962.html#comments</comments>
		<pubDate>Wed, 30 Nov 2011 07:08:50 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[技术]]></category>
		<category><![CDATA[article]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=962</guid>
		<description><![CDATA[简介 如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。 这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。 &#160; 几种实现方式 随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求。所以，我们整理了下这种布局的几种实现方式，有三种: 1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式，如下图所示: 各列固定宽度，并且左浮动； 一列中的数据块为一组，列中的每个数据块依次排列即可； 更多数据加载时，需要分别插入到不同的列上；...<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="CSS布局问题研究若干" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F154.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F962.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/10/12/9021601.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">CSS布局问题研究若干</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="高手总结CSS网页布局及网站开发常犯的20种错误" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F388.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F962.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10136174.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">高手总结CSS网页布局及网站开发常犯的20种错误</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="高手总结网页布局中CSS无效的十个常见原因" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F390.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F962.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10136141.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">高手总结网页布局中CSS无效的十个常见原因</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="CSS网页布局及网站开发常犯的20种错误" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F428.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F962.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10114177.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">CSS网页布局及网站开发常犯的20种错误</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="[转载] Eclipse设定文件的默认打开方式" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F336.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F962.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10135950.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">[转载] Eclipse设定文件的默认打开方式</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/962.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>视觉设计的规范性</title>
		<link>http://www.xiao-a.com/index.php/archives/699.html</link>
		<comments>http://www.xiao-a.com/index.php/archives/699.html#comments</comments>
		<pubDate>Wed, 16 Nov 2011 02:46:52 +0000</pubDate>
		<dc:creator>皇甫灵剑</dc:creator>
				<category><![CDATA[技术]]></category>
		<category><![CDATA[设计]]></category>
		<category><![CDATA[design]]></category>

		<guid isPermaLink="false">http://www.xiao-a.com/?p=699</guid>
		<description><![CDATA[相信很多从事网页设计的同学大都在那种一锅端的职能分工模式的地方混过。通常都是产品经理先与设计师沟通，然后全部由一个人完成整个从设计到重构的流程。在这样的环境下会养成一些不太好的毛病，例如在完成设计稿的时候可以略微粗糙，然后在重构的时候进一步完善（因为有些小细节比较费时，干脆直接在重构的时候调整到位）。那么到了分工规范的工作环境下，视觉设计师应该怎么样与其他同事合作呢？   1.为什么要规范 在合作中拿到不太规范的的文档，我们心理的第一感受就是：这是什么意思？他到底想要什么效果？在工作中我们有时候会没有太多的时间去沟通，最好是拿到手可以立马开工，完成这个需求，然后立马展开下一个需求。如果我们的PSD文件都是极易看懂、方便编辑的，将会对合作伙伴提供多大的方便？节省多少时间？ 设计是合理的规划 标注清楚的文档会耗费很多时间，就算我们偷懒不注意很多细节，可能重构工程师也能够默默体会，帮我们完成，但这里的问题是：我们是团队完成一个一流的网站，还是自己完成一个二流的站点?文档里的细节反应了你的专业价值以及你对最终产品的掌控。 设计文档应该是世界上最美最有用的东西，如果它规划的不够精细，就会浪费无谓的时间。重构师对于你的PSD的困惑所带来的询问是完全可以避免的，一个需求在开始之前就应该是清楚的，设计师规划得完善所带来的好处是不言而喻的。 想象你自己是一个重构师，当对方给你一个文档来编辑，你发现里面的图层全部都没有命名，这时候你会有多崩溃？更甚于一个相同的模块的边距不一样，导致区域显示会溢出？很幸运你不会碰到这样的问题。 就算你是一个人完成一个项目，能够在混乱之中寻找出解决问题的办法，如果你这样做了，似乎你是节省了一点时间，减少了工作量，但你这样不细致的设计文档给到客户或者产品经理去审查的时候，你期望他们能对你的专业性发表什么样的看法？ 你有没有接手过其他设计师的文档继续工作的经历？发现里面缺少字体，图层没有命名，无数个图层蒙版，并且你只有2个小时完成这次修改……就算你能够适应这种方式，但你还是浪费了许多无谓的时间。   2.常见问题 需要的文件不在服务器上 截稿期将至，你发现你少了一些文档、图片……你找不到你的合作伙伴，他们突然有急事出去了。 设计师应该将近期项目归档清楚的放在服务器上，在每天下班之前将当天的工作文件上传，以便晚上回家之后有人会用到那些文件。 未命名或者未使用的图层 切图是一个很繁琐的工作，不要让你的合作伙伴去大海捞针，看见成百上千的“图层X”是一件令人头疼的事情。 每新建一个图层就命名好，这比全部做完了再去一一重新命名来得方便得多。 不恰当的文件名称 迷惑了？哪个才是我应该使用的文档？...<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="用讲故事的方式来做手机产品交互设计" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F692.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F699.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/06/10377271.png" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用讲故事的方式来做手机产品交互设计</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="logo设计方案" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F224.html&from=http%3A%2F%2Fwww.xiao-a.com%2Findex.php%2Farchives%2F699.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 80px !important; height: 80px !important;" src="http://static.wumii.com/site_images/2011/11/01/10114349.jpg" width="80px" height="80px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 86px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">logo设计方案</font>
                    </a>
                </td>
                <td width="86" valign="top" style="padding:]]></description>
		<wfw:commentRss>http://www.xiao-a.com/index.php/archives/699.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

