<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[虎克开发者博客 - 达人]]></title>
<link>http://blog.volk365.com/</link>
<description><![CDATA[创造机会的人是勇者；等待机会的人是愚者]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[your@email.com(martin)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>虎克开发者博客</title>
	<url>http://blog.volk365.com/images/logos.gif</url>
	<link>http://blog.volk365.com/</link>
	<description>虎克开发者博客</description>
</image>

			<item>
			<link>http://blog.volk365.com/article.asp?id=26</link>
			<title><![CDATA[网页设计视觉传达常见误区]]></title>
			<author>your@email.com(martin)</author>
			<category><![CDATA[达人]]></category>
			<pubDate>Tue,09 Dec 2008 15:29:53 +0800</pubDate>
			<guid>http://blog.volk365.com/default.asp?id=26</guid>
		<description><![CDATA[<div class="Container">
<div class="SC">
<div class="Post">
<div id="scroll">
<div class="PostContent">
<p>最近，我有机会研究对<font color="#335533">视觉</font><font color="#335533">设计</font>作用的常见误解，这些误解仍然盛行于行政主管、产品主管，工程经理和市场专家中。设计团队成员如何说明这些认识是错误的？又该如何向同事和老板展示视觉设计真相？</p>
<p><font color="#335533">视觉</font><font color="#335533">设计</font>师在特定产品领域或职业生涯中会面对各种困难，但有三种误解频繁发生:</p>
<p><font color="#335533">视觉</font><font color="#335533">设计</font>是美化产品；<br />
突出显示能改善<font color="#335533">视觉</font><font color="#335533">设计<br />
</font>可以分割评估<font color="#335533">视觉</font><font color="#335533">设计</font>。</p>
<h2>&nbsp;视觉设计是美化产品</h2>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 这种信条可能起源于工业时代的<font color="#335533">设计</font>理念引入。从那时起，产品以前所未有的方式进行设计，并形成风格。Raymond  Lowey等工业设计师对呆板产品进行美学设计，而声名大噪。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="#335533">视觉</font><font color="#335533">设计</font>固然能美化产品，但其与人交互的潜能早已超越美丽外观。通过组织视觉元素，设计师可以传达回答关键问题的核心信息：</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 这是什么？<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 怎么使用？<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 为什么要使用？</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 回答这些问题是功能和可用性的关键组成部分，尤其是对于交互产品。举些例子来说明：</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 图1到图3，某个<font color="#335533">网络</font>应用工具，相同基本设置的三种表现方式，字体、颜色、渐变和图片都相同。三者主要区别是页面元素组织方式不同。这种区别表明该网络应用工具存在三种主要使用方法。</p>
<p style="text-align: center;"><br />
<img src="http://www.51flash.cn/wp-content/uploads/2008/12/fig1-address.gif" alt="" /><br />
图1&mdash;&mdash;<font color="#335533">网络</font>应用工具<font color="#335533">设计</font>示例</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  图1，表现方式清晰显示出主要功能&mdash;&mdash;查找客户联系信息；其次，用户可以编辑、删除或者增加备注。图2，重点是顾客和公司之间的交流；其次，用户可以查看、编辑和删除联系人信息。</p>
<p style="text-align: center;">&nbsp;<img src="http://www.51flash.cn/wp-content/uploads/2008/12/fig1-crm.gif" alt="" /><br />
&nbsp;图2&mdash;相同<font color="#335533">网络</font>应用工具，不同<font color="#335533">视觉</font>组织</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图3，关注点放在编辑客户信息上。查看联系人信息和跟踪正在进行的会话功能被弱化。</p>
<p style="text-align: center;">&nbsp;<img src="http://www.51flash.cn/wp-content/uploads/2008/12/fig1-database.gif" alt="" /><img border="0" align="absmiddle" src="http://blog.volk365.com//wp-content/uploads/2008/12/fig1-database.gif" alt="" style="border-width: 0px;" /></p>
<p style="text-align: center;">&nbsp;图3&mdash;另一种<font color="#335533">视觉</font>组织</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 相同应用工具，三种不同<font color="#335533">视觉</font>组织，三种不同主操作：查找联系人信息、管理客户交流以及维护客户记录。每个例子中，影响视觉<font color="#335533">设计</font>的因素大体一致：颜色、字体、渐变和图片。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 显而易见，<font color="#335533">视觉</font><font color="#335533">设计</font>不仅是美化此工具。它传达工具的核心功能：它是什么？如何使用？为什么要使用？，而同时有美化了界面。</p>
<h2>能让这个更突出吗？</h2>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 很多网站都喜欢把logo做得比较大，客户和老板常要求<font color="#335533">视觉</font><font color="#335533">设计</font>师着重强调页面上某些元素。这类评论有时可以帮助我们发现设计中的最重要元素，但也常引发视觉设计的另一常见误解：改善网站视觉设计，通过加大、加粗、变红或同时使用三种方法来实现！</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  页面任何元素的相对重要性都是由其周边元素决定。白色页面放上红色圆圈，会吸引很多注意力。但把红圈放在10个粉色圆圈旁就不会吸引那么多注意力。突出重要元素是整体<font color="#335533">设计</font>的一个过程，并不是改变任何单一元素。给予单个元素额外视觉权重会破坏布局平衡，搅乱相关元素、主操作等之间的关系。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 要是满足客户和老板每个强化某些功能的需求，页面所有元素都会去抢<span style="color: rgb(0, 0, 0);">着吸引用户注意&mdash;&mdash;</span> <span style="font-size: 10.5pt; font-family: 宋体;">结果就是都得不到注意。图</span><span style="font-size: 10.5pt; font-family: 'Times New Roman';">4</span><span style="font-size: 10.5pt; font-family: 宋体;">和图</span><span style="font-size: 10.5pt; font-family: 'Times New Roman';">5</span><span style="font-size: 10.5pt; font-family: 宋体;">，两个互联网浏览器下载页面。</span><span style="font-size: 10.5pt; font-family: 'Times New Roman';">Firefox</span><span style="font-size: 10.5pt; font-family: 宋体;">页面，下载浏览器号召很明显，页面其他元素<span style="font-family: 'Times New Roman';">&mdash;&mdash;</span></span><span style="font-size: 10.5pt; font-family: 'Times New Roman';">Thunderbird</span><span style="font-size: 10.5pt; font-family: 宋体;">、</span><span style="font-size: 10.5pt; font-family: 'Times New Roman';"> Mozilla</span><span style="font-size: 10.5pt; font-family: 宋体;">商店和最新内容&mdash;&mdash;</span><span style="color: rgb(0, 0, 0);"><span style="background-color: rgb(255, 255, 255);">没有干扰。</span></span></p>
<p>&nbsp;</p>
<p style="text-align: center;"><img src="http://www.51flash.cn/wp-content/uploads/2008/12/fig2_firefox.gif" alt="" /><img border="0" align="absmiddle" src="http://blog.volk365.com//wp-content/uploads/2008/12/fig2_firefox.gif" alt="" style="border-width: 0px;" /></p>
<p style="text-align: center;">图4&mdash;Firefox下载页</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图5，Flock下载页面强调了许多不同元素，<font color="#335533">设计</font>团队决定提供四个下载入口&mdash;&mdash;右上角、左侧菜单底部、新闻面板右上角和页脚。如果页面上没强调那么多其他元素，Flock下载页面或许可以和Firefox一样只用一个下载按钮。</p>
<p style="text-align: center;">&nbsp;<img src="http://www.51flash.cn/wp-content/uploads/2008/12/fig2_flock.gif" alt="" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img border="0" align="absmiddle" src="http://blog.volk365.com//wp-content/uploads/2008/12/fig2_flock.gif" alt="" style="border-width: 0px;" /><br />
图 5&mdash;Flock下载页</p>
<h2>可以分割评估视觉设计</h2>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 没有从<font color="#335533">设计</font>整体考虑，而强调单个元素会非常困难，同样做出孤立改变也很难。但是视觉设计师收到的大部分反馈集中在孤立元素上：可以把Logo做大点吗？能改变标题颜色吗？这里可以换张图吗？</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 这些的确帮助<font color="#335533">设计</font>师明白用户和老板想要的东西，但他们没有考虑优秀设计必需的整体分析。改变颜色需要反复思考整体配色，因为设计师必须确保颜色对比明显，才能突出关键操作。改变图片意味着同时要改变周边元素，因为原图片形成的焦点可能已不存在。诸如此类。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 产品总体<font color="#335533">视觉</font><font color="#335533">设计</font>源于谨慎平衡页面元素&mdash;&mdash;传达产品功能、可用性和优势的关键信息。如果要调整一项元素，设计师需要重组全局，重归平衡。孤立设计决策无法保持修改前后整体一致。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 孤立评估基于互联网的产品特别脆弱。单个产品可以进行独立测试，所以产品团队就会假设&quot;这些产品结合在一起也会很好&quot;，  而常常把单独表现良好的产品组合起来。图6，孤立决策的后果。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在这个eBay页面，页头水桶测试（bucket testing）表现良好，PayPal保护机制的logo在焦点小组（focus  group）中获得好分数，摄影物品宣传也获得不错点击流，但把三个元素综合到一个页面上，并没有形成有效<font color="#335533">设计</font>。事实上，页面上很多元素似乎互相竞争，互相干扰。</p>
<p>&nbsp;</p>
<p style="text-align: center;"><img src="http://www.51flash.cn/wp-content/uploads/2008/12/fig3-ebay.gif" alt="" /><br />
图6&mdash;eBay意大利主页</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 希望这些例子能解释对<font color="#335533">视觉</font><font color="#335533">设计</font>角色的一些常见误解。只有同事和老板能直接体验视觉设计潜能，他们才会相信视觉设计绝不仅仅是设计样式、显化元素或做出孤立决定。</p>
</div>
</div>
</div>
</div>
</div>
<p>&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://blog.volk365.com/article.asp?id=17</link>
			<title><![CDATA[张老师最酷照片]]></title>
			<author>your@email.com(cc)</author>
			<category><![CDATA[达人]]></category>
			<pubDate>Thu,04 Dec 2008 14:11:18 +0800</pubDate>
			<guid>http://blog.volk365.com/default.asp?id=17</guid>
		<description><![CDATA[<span style="color:Navy"><span style="font-size:14pt"><strong>张老师最酷照片震撼上线！</strong></span></span><br/><br/><img src="http://blog.volk365.com/attachments/month_0812/p200812414943.jpg" border="0" alt=""/><br/><br/><img src="http://blog.volk365.com/attachments/month_0812/e200812414954.jpg" border="0" alt=""/><br/><br/><img src="http://blog.volk365.com/attachments/month_0812/m200812414133.JPG" border="0" alt=""/><br/>]]></description>
		</item>
		
			<item>
			<link>http://blog.volk365.com/article.asp?id=7</link>
			<title><![CDATA[虎克达人--企业文化篇]]></title>
			<author>your@email.com(admin)</author>
			<category><![CDATA[达人]]></category>
			<pubDate>Mon,01 Dec 2008 13:39:26 +0800</pubDate>
			<guid>http://blog.volk365.com/default.asp?id=7</guid>
		<description><![CDATA[<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/92008121133050.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/j2008121133319.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/x2008121133342.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/u2008121133412.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/p2008121133428.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/y2008121133551.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/4200812113363.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/j2008121133651.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/l200812113377.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/h2008121133718.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/e2008121133733.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/t2008121133746.jpg" /></p>
<p>www.volk365.com</p>]]></description>
		</item>
		
			<item>
			<link>http://blog.volk365.com/article.asp?id=6</link>
			<title><![CDATA[补:老叶同志的生日HAPPY图片!]]></title>
			<author>your@email.com(admin)</author>
			<category><![CDATA[达人]]></category>
			<pubDate>Mon,01 Dec 2008 12:41:21 +0800</pubDate>
			<guid>http://blog.volk365.com/default.asp?id=6</guid>
		<description><![CDATA[<p>老叶同志的生日HAPPY图片</p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/h2008121122835.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/82008121143859.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/2200812114437.jpg" /></p>
<p><img alt="" src="http://blog.volk365.com/attachments/month_0812/r200812112446.jpg" /></p>
<object id="player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="260" height="64">
<param value="-1" name="AutoStart" /><!--是否自动播放-->
<param value="0" name="Balance" /><!--调整左右声道平衡,同上面旧播放器代码-->
<param value="-1" name="enabled" /><!--播放器是否可人为控制-->
<param value="-1" name="EnableContextMenu" /><!--是否启用上下文菜单-->
<param value="http://bbs.gy4x.com/bbs/yswm/%C9%FA%C8%D5%BF%EC%C0%D6%A3%A8%CE%E9%CB%BC%BF%AD%A3%A9.mp3" name="url" /><!--播放的文件地址-->
<param value="1" name="PlayCount" /><!--播放次数控制,为整数-->
<param value="1" name="rate" /><!--播放速率控制,1为正常,允许小数,1.0-2.0-->
<param value="0" name="currentPosition" /><!--控件设置:当前位置-->
<param value="0" name="currentMarker" /><!--控件设置:当前标记-->
<param value="" name="defaultFrame" /><!--显示默认框架-->
<param value="0" name="invokeURLs" /><!--脚本命令设置:是否调用URL-->
<param value="" name="baseURL" /><!--脚本命令设置:被调用的URL-->
<param value="0" name="stretchToFit" /><!--是否按比例伸展-->
<param value="70" name="volume" /><!--默认声音大小0%-100%,50则为50%-->
<param value="0" name="mute" /><!--是否静音-->
<param value="mini" name="uiMode" /><!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示-->
<param value="-1" name="enableErrorDialogs" /><!--是否启用错误提示报告-->
<param value="" name="SAMIStyle" /><!--SAMI样式-->
<param value="" name="SAMILang" /><!--SAMI语言-->
<param value="" name="SAMIFilename" /><!--字幕ID--></object>]]></description>
		</item>
		
			<item>
			<link>http://blog.volk365.com/article.asp?id=5</link>
			<title><![CDATA[虎克达人--基础介绍篇]]></title>
			<author>your@email.com(admin)</author>
			<category><![CDATA[达人]]></category>
			<pubDate>Mon,01 Dec 2008 10:50:07 +0800</pubDate>
			<guid>http://blog.volk365.com/default.asp?id=5</guid>
		<description><![CDATA[<table cellspacing="6" cellpadding="0" width="90%" border="0" style="color: rgb(130,130,130); line-height: 130%">
    <tbody>
        <tr>
            <td style="width: 110px"><img alt="" src="http://blog.volk365.com/attachments/month_0812/u200812110461.gif" /></td>
            <td><strong><span style="font-size: 14px">CharlesZhang&nbsp; 张嘉伟</span></strong><br />
            虎克咨询CEO<br />
            虎克咨询首席人力资源架构分析师<br />
            职业心理学博士</td>
        </tr>
        <tr>
            <td><img alt="" src="http://blog.volk365.com/attachments/month_0812/s2008121104732.gif" /></td>
            <td><strong><span style="font-size: 14px">Donner&nbsp; 郭雷</span></strong><br />
            虎克咨询资深管理咨询顾问<br />
            虎克咨询管理合伙人</td>
        </tr>
        <tr>
            <td><img alt="" src="http://blog.volk365.com/attachments/month_0812/a2008121104746.gif" /></td>
            <td>
            <p><span style="font-size: 14px"><strong>Chrisy&nbsp; 张颖</strong></span><br />
            虎克咨询总经理<br />
            行政总监<br />
            近期瑜伽热练中...</p>
            </td>
        </tr>
        <tr>
            <td><img alt="" src="http://blog.volk365.com/attachments/month_0812/72008121104945.gif" /></td>
            <td><strong><span style="font-size: 14px">WHT&nbsp; 王海涛</span></strong><br />
            沃奇建筑咨询CEO<br />
            首席建筑设计师<br />
            星际达人、Game高人</td>
        </tr>
        <tr>
            <td><img alt="" src="http://blog.volk365.com/attachments/month_0812/m2008121104755.gif" /></td>
            <td><strong><span style="font-size: 14px">Marker&nbsp; 叶未名</span></strong><br />
            首席软件架构师<br />
            吉他牛人<br />
            星际强人(大舰、电兵爱好者)</td>
        </tr>
        <tr>
            <td><img alt="" src="http://blog.volk365.com/attachments/month_0812/d200812110484.gif" /></td>
            <td><span style="font-size: 14px"><strong>Coco&nbsp; 常川</strong></span><br />
            行政主任、培训助理<br />
            Game发烧友兼牛人</td>
        </tr>
        <tr>
            <td><img alt="" src="http://blog.volk365.com/attachments/month_0812/i2008121104818.gif" /></td>
            <td><strong><span style="font-size: 14px">Star&nbsp; 张宇星</span></strong><br />
            高级程序员<br />
            苏醒超级FANS</td>
        </tr>
        <tr>
            <td><img alt="" src="http://blog.volk365.com/attachments/month_0812/n2008121104833.gif" /></td>
            <td>
            <p><strong><span style="font-size: 14px">Ming&nbsp; 颜铭</span></strong><br />
            网页设计<br />
            &ldquo;蜡笔小新&rdquo;全球指定形象代言<br />
            小&ldquo;新&rdquo;同学的狂热膜拜者</p>
            </td>
        </tr>
        <tr>
            <td><img alt="" src="http://blog.volk365.com/attachments/month_0812/t2008121104848.gif" /></td>
            <td><strong><span style="font-size: 14px">Martin&nbsp; 刘超</span></strong><br />
            网页设计<br />
            Game陶醉者</td>
        </tr>
        <tr>
            <td><img alt="" src="http://blog.volk365.com/attachments/month_0812/62008122311247.gif" /></td>
            <td><strong><span style="font-size: 14px">Albert&nbsp; 顾磊<br />
            </span></strong>高级程序员<br />
            Game、动漫达人</td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>]]></description>
		</item>
		
</channel>
</rss>
