<?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>days of linnchord &#187; UI</title>
	<atom:link href="http://linnchord.net/archives/tag/ui/feed" rel="self" type="application/rss+xml" />
	<link>http://linnchord.net</link>
	<description>南台静坐 : : :</description>
	<lastBuildDate>Thu, 03 Nov 2011 02:22:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>用户界面设计—用好的设计替代不好的</title>
		<link>http://linnchord.net/archives/47.html</link>
		<comments>http://linnchord.net/archives/47.html#comments</comments>
		<pubDate>Mon, 30 Oct 2006 14:35:22 +0000</pubDate>
		<dc:creator>linnchord</dc:creator>
				<category><![CDATA[存照]]></category>
		<category><![CDATA[taobao]]></category>
		<category><![CDATA[UE]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[界面]]></category>

		<guid isPermaLink="false">http://linnchord.net/2006/10/%e7%94%a8%e6%88%b7%e7%95%8c%e9%9d%a2%e8%ae%be%e8%ae%a1%e2%80%94%e7%94%a8%e5%a5%bd%e7%9a%84%e8%ae%be%e8%ae%a1%e6%9b%bf%e4%bb%a3%e4%b8%8d%e5%a5%bd%e7%9a%84/</guid>
		<description><![CDATA[From: Taobao Blog 原文： User Interface Design &#8211; Taking the Good with the Bad 成功的婚姻之关键在于折衷。当事情沿着你不希望的方向发展，在最后，形成的争论却可以为你带来极大的好处。这条定理同样适用于用户界面设计。毕竟，如果婚姻不是形式和仪式又是什么呢？ 设计用户界面的过程从根本上就是折衷的训练。这个训练并非指设计者和项目赌注者之间的折衷（可用性从来没被办公室政治利用过），而是指设计方案的倒 退和前进之间的折衷。每一个有关用户界面的决定，从一像素的精确定位到整个网站的信息架构都需要深思熟虑。对每一个设计方案给用户带来的好处与花费两者之 间的仔细权衡才是本质。人们常常忽略有时是很小的代价，但每一个用户界面设计都要付出的代价。经过考虑的折衷原则其实贯穿了所有的用户界面设计，但在设计 最佳的用户界面时，具有讽刺的是，它还要求你避免设计折衷的界面。 你不能吃了蛋糕还想拥有它 在创作用户界面的时候，你必须处理两个主要且冲突的局限：在仅有的一个显示器上传达海量的信息；用户在一定时间内接受海量的信息。在一个显示器上显 示太多的内容，用户不得不从混沌中“艰难跋涉”了；显示太少的信息，用户为了找到他们的目标，又不得不靠猜测了。好的设计应该在程序和用户之间找到平衡 点，既有效利用屏幕，又能考虑用户理解信息的能力。 你的舞台（显示器）是有局限的——毕竟有x像素的宽和y像素的高。这意味着资源很重要，你利用的每个象素都可看作是有价格的。当你试图去创建一个用 户界面的时候，保持信息密度的平衡是项挑战。每个设计方案都要经过深思，因为在屏幕上每增加一块内容就加大了信息密度，这对用户有限的精力和认知过程是个 挑战，使得用户更难弄明白了。 好的设计代替不好的 无论何时，花费只要能带来好处，采取折衷原则也是可以的。理论上，你可以最大化好处和最小化坏处，但本质问题是，所带来的好处能否超过其花费？不仅仅是超过，在所有可选的设计方案中，它能否带来最大利润？果真如此，它才是最佳方案。 花费/好处的折衷考虑穿越了用户界面开发的所有层次，从导航设计到字体大小。越是重要的设计方案，越是体现出用户界面巨大而潜在的影响。小的设计方 案看起来似乎无关紧要，但积少成多，也会对用户界面产生潜在影响。无论大小，每一个设计方案都应该在可用性评估和考虑网络用户界面好处之后再决定。 一些对比的设计方案 设计 好处 花费 减少信息构架的层次 找到信息时减少了点击 更混乱 深层信息架构 清晰，减少混乱 找信息时点击多 小字体 一屏上显示更多信息 某些用户太难阅读了 大字体 阅读起来容易 每屏信息少了 下拉框 在有限空间里容下了更多选项 隐藏了选项 单选框 同一时间看到更多选项 需要更多空间，易混淆 图标 一旦记住就容易辨认了；视觉愉悦 要学习识别 [...]]]></description>
			<content:encoded><![CDATA[<p>From: <a href="http://www.uiplanet.com/taobao/2006/10/08/%e7%94%a8%e6%88%b7%e7%95%8c%e9%9d%a2%e8%ae%be%e8%ae%a1%e2%80%94%e2%80%94%e7%94%a8%e5%a5%bd%e7%9a%84%e8%ae%be%e8%ae%a1%e6%9b%bf%e4%bb%a3%e4%b8%8d%e5%a5%bd%e7%9a%84/" target="_blank">Taobao Blog</a></p>
<p>原文： <a target="_blank" href="http://www.digital-web.com/articles/user_interface_design_taking_the_good_with_the_bad/">User Interface Design &#8211; Taking the Good with the Bad</a></p>
<p>成功的婚姻之关键在于折衷。当事情沿着你不希望的方向发展，在最后，形成的争论却可以为你带来极大的好处。这条定理同样适用于用户界面设计。毕竟，如果婚姻不是形式和仪式又是什么呢？</p>
<p>设计用户界面的过程从根本上就是折衷的训练。这个训练并非指设计者和项目赌注者之间的折衷（可用性从来没被办公室政治利用过），而是指设计方案的倒  退和前进之间的折衷。每一个有关用户界面的决定，从一像素的精确定位到整个网站的信息架构都需要深思熟虑。对每一个设计方案给用户带来的好处与花费两者之  间的仔细权衡才是本质。人们常常忽略有时是很小的代价，但每一个用户界面设计都要付出的代价。经过考虑的折衷原则其实贯穿了所有的用户界面设计，但在设计  最佳的用户界面时，具有讽刺的是，它还要求你避免设计折衷的界面。</p>
<p><strong>你不能吃了蛋糕还想拥有它</strong></p>
<p>在创作用户界面的时候，你必须处理两个主要且冲突的局限：在仅有的一个显示器上传达海量的信息；用户在一定时间内接受海量的信息。在一个显示器上显  示太多的内容，用户不得不从混沌中“艰难跋涉”了；显示太少的信息，用户为了找到他们的目标，又不得不靠猜测了。好的设计应该在程序和用户之间找到平衡  点，既有效利用屏幕，又能考虑用户理解信息的能力。</p>
<p>你的舞台（显示器）是有局限的——毕竟有x像素的宽和y像素的高。这意味着资源很重要，你利用的每个象素都可看作是有价格的。当你试图去创建一个用  户界面的时候，保持信息密度的平衡是项挑战。每个设计方案都要经过深思，因为在屏幕上每增加一块内容就加大了信息密度，这对用户有限的精力和认知过程是个  挑战，使得用户更难弄明白了。</p>
<p><strong>好的设计代替不好的</strong></p>
<p>无论何时，花费只要能带来好处，采取折衷原则也是可以的。理论上，你可以最大化好处和最小化坏处，但本质问题是，所带来的好处能否超过其花费？不仅仅是超过，在所有可选的设计方案中，它能否带来最大利润？果真如此，它才是最佳方案。</p>
<p>花费/好处的折衷考虑穿越了用户界面开发的所有层次，从导航设计到字体大小。越是重要的设计方案，越是体现出用户界面巨大而潜在的影响。小的设计方  案看起来似乎无关紧要，但积少成多，也会对用户界面产生潜在影响。无论大小，每一个设计方案都应该在可用性评估和考虑网络用户界面好处之后再决定。</p>
<p><strong>一些对比的设计方案</strong></p>
<table bgcolor="#cccccc" border="0" cellpadding="4" cellspacing="1">
<tbody>
<tr align="left" bgcolor="#E7E8CA">
<th>设计</th>
<th>好处</th>
<th>花费</th>
</tr>
<tr bgcolor="White">
<td>减少信息构架的层次</td>
<td>找到信息时减少了点击</td>
<td>更混乱</td>
</tr>
<tr bgcolor="White">
<td>深层信息架构</td>
<td>清晰，减少混乱</td>
<td>找信息时点击多</td>
</tr>
<tr bgcolor="White">
<td>小字体</td>
<td>一屏上显示更多信息</td>
<td>某些用户太难阅读了</td>
</tr>
<tr bgcolor="White">
<td>大字体</td>
<td>阅读起来容易</td>
<td>每屏信息少了</td>
</tr>
<tr bgcolor="White">
<td>下拉框</td>
<td>在有限空间里容下了更多选项</td>
<td>隐藏了选项</td>
</tr>
<tr bgcolor="White">
<td>单选框</td>
<td>同一时间看到更多选项</td>
<td>需要更多空间，易混淆</td>
</tr>
<tr bgcolor="White">
<td>图标</td>
<td>一旦记住就容易辨认了；视觉愉悦</td>
<td>要学习识别</td>
</tr>
<tr bgcolor="White">
<td>文字链接</td>
<td>总是易懂的</td>
<td>一旦不理解，可能必须阅读更多的资料</td>
</tr>
<tr bgcolor="White">
<td>缩写</td>
<td>节约空间</td>
<td>需要学习和识别</td>
</tr>
<tr bgcolor="White">
<td>非缩写</td>
<td>易懂</td>
<td>需要额外空间</td>
</tr>
<tr bgcolor="White">
<td>键盘快捷键</td>
<td>数据高速输入</td>
<td>需要学习</td>
</tr>
<tr bgcolor="White">
<td>鼠标指向和点击</td>
<td>直觉的</td>
<td>交互增加了额外的时间，需要更多的经验</td>
</tr>
</tbody>
</table>
<p><strong>疯狂背后的模式</strong></p>
<p>事实上，你无法刻意评估每项设计方案的优劣。此过程就像天性一样，你可以凭直觉判断哪里该用下拉菜单还是单选按钮，或者此设计是不是比另一个略胜一  筹。但直觉是建立在相关经验和努力之上的。设计的折衷评估仍旧可能发生，它在潜意识中形成了。这种潜意识行为可能让你没意识到为什么选择了此项，而非另一  项方案。但如果你拆开了这个过程，其核心就是基于可用性原则的判断。</p>
<p>在设计过程中描述这个潜在法则可能并非必须，它很自然就发生了，但是你必须清楚，并在逻辑上意识到你的设计。如果你和别人一起工作，他们的建议可能  降低了可用性，你意识到自己的决定是如何产生的就很重要了。通过将用户界面设计中潜意识的行为化作语言，你可以为坚持自己的决定增加了砝码。但如果你让每  个人都对界面设计提出一种意见（就像恐怖的会议讨论），界面可能会像过去那样难看了。</p>
<p><strong>好 – 坏 = 网络可用性</strong></p>
<p>你是否注意到你可以立刻指出各种界面设计的不足？这是因为在界面设计时的折衷原则使然。甚至最好的设计解决方案都可能有些倒退，一些成员可能会尝试  改变设计。但任何设计都有不足之处，每一个无不如此。这样的不足还不至于损害设计。一个设计比另一个设计更好的地方在于无时无刻不照顾到网络可用性。所  以，好-坏=网络可用性。最后测量的标准就是网络的可用性价值。</p>
<p>批评开始满天飞了。字体太小了、图标含义不清、缩写词意不明。也许最初只是脸红一下，然后就红到耳根了，仿佛这些批评都是对的一样。事实上，这类宣  言单独来看都是正确的，但它太过正确，也应该被挑战。来决定它值不值，就要既考虑花费，又要考虑好处了。后台设计者能立刻识别一个特殊设计的花费，但是他  们看不到好处。你需要客观的评估每个建议对可用性的影响，从而决定哪个是最可取的。</p>
<p>除了要懂得界面设计中的折衷性，你也应该鼓励那种有缺陷的设计建议。为了有效评估那些作用于界面设计的花费和好处，你需要涉猎多种领域：从认知学到  人因学到图形设计。只有对人们如何与应用程序交互建立了巨大的知识储备，你才能更有效地评估用户界面设计。这不仅仅是个非对即错的事情，因为花费总是与带  来的好处相关。</p>
<p>举例来说，你的页面字体可能小了，对一些老年人相当难以阅读。这就是花费。但这在一屏上提供了更多的信息，也意味着更少的滚动，减少滚动可以降低物  理操作和认知输入。现在假设统计出你的用户年龄90%在21至30岁之间，因此比较其他解决方案，这时字体更小一些会更好，网络的可用性也更高。</p>
<p>所选的方案并非完美，但它提供了更好的可用性。你也可以提出异议，用好的替代坏的设计，但对于你特定的应用，选择这种方案无非是最明智的。你必须在完整的程序使用中加以衡量，才能选出最合适的方案。</p>
<p>懂得在界面设计中无所不在的折衷原则，并应该灌输给整个项目组，甚至每个普通员工都要知晓。对用户界面的争论应该被鼓励。在每一个设计方案中通过理解、评估和解释折衷原则，你可以设计可用性更高和更有说服力的界面。</p>
<p><strong>对成功的评估</strong></p>
<p>当评估一个设计是否更好时，又需要一个用户界面准则去评估，以下是几个用户界面质量的元素：</p>
<ul>
<li>容易学习并容易记住</li>
<li>使用的有效性</li>
<li>出错率，可伸缩性和可恢复性</li>
<li>个人满意度</li>
</ul>
<p>以应用程序的最后使用效果评定，每一个因素都可能是重要的。举例来说，使用的有效性也许对高端的用户程序有用，而对小册子市场就不一定那么有效了。虽然这种转变可能会提高个人满意度。但每一个设计决定都应该接受上面四个因素的考验。</p>
<p><strong>广泛折衷原则</strong></p>
<p>折衷也不应该以屏幕设计为终点。在用户界面设计中占据了很大分量的包括：网络信息统计（比如什么浏览器、平台、显示效果尺寸等）、瘦/胖/富客户端  体系、开发时间和花费的资源等。在评估折衷时，可用性占据了极大的分量，但真实使用环境中的一些问题也日趋重要。比如说，如果一个设计方案比另一个好得  多，是否值得用1万美元开发它？这部分功能的提升值得吗？反过来想，节约的这些钱是否削弱了可用性？这类讨论是如此现实，需要被谨慎评估。</p>
<p>只要认识到用户界面设计是建立在折衷上的，会帮助我们清楚地认识到为什么如此设计。这样做会减少优秀界面设计出轨的风险，尤其对那些只看到事物一个  方面的人有用。通过清晰地列出花费、好处和相互交流设计的意义，你可以更好地说明别人、得到更多的支持。总之，如果我们能依照折衷的原则，我们就能正确地  看待好处和坏处。只是希望别带给我们丑陋的事物。（完） </p>
]]></content:encoded>
			<wfw:commentRss>http://linnchord.net/archives/47.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>VisualComplexity.com</title>
		<link>http://linnchord.net/archives/49.html</link>
		<comments>http://linnchord.net/archives/49.html#comments</comments>
		<pubDate>Mon, 30 Oct 2006 13:27:15 +0000</pubDate>
		<dc:creator>linnchord</dc:creator>
				<category><![CDATA[优美的]]></category>
		<category><![CDATA[存照]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://linnchord.net/2006/10/visualcomplexitycom/</guid>
		<description><![CDATA[可视化复杂结构。如果用图形化方式描述复杂结构或流程，这里有很多有意思的创意和参考。 VisualComplexity.com]]></description>
			<content:encoded><![CDATA[<p>可视化复杂结构。如果用图形化方式描述复杂结构或流程，这里有很多有意思的创意和参考。</p>
<p><a href="http://visualcomplexity.com" target="_blank">VisualComplexity.com</a></p>
<p><a href="http://www.flickr.com/photos/linnchord/283241397/" title="Photo Sharing"><img src="http://static.flickr.com/105/283241397_a8b70be97c_o.gif" width="450" height="921" alt="visualcomplexity.com" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://linnchord.net/archives/49.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mobile.v1.0移动电话辅助软件界面设计</title>
		<link>http://linnchord.net/archives/113.html</link>
		<comments>http://linnchord.net/archives/113.html#comments</comments>
		<pubDate>Tue, 29 Jun 2004 10:29:00 +0000</pubDate>
		<dc:creator>linnchord</dc:creator>
				<category><![CDATA[优美的]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[界面]]></category>

		<guid isPermaLink="false">http://linnchord.net/2004/06/mobilev10%e7%a7%bb%e5%8a%a8%e7%94%b5%e8%af%9d%e8%be%85%e5%8a%a9%e8%bd%af%e4%bb%b6%e7%95%8c%e9%9d%a2%e8%ae%be%e8%ae%a1/</guid>
		<description><![CDATA[曾经在网上讨论IM软件系统的设计，都说IM软件的设计模式已经固定就那几种了，很难做出什么新意了……我当时也以为然。 看了这个，什么叫“创意无止境”“设计无极限”，我有了更深刻的认识。 官方网站：http://sygic.com/mobile/desktop/index.php]]></description>
			<content:encoded><![CDATA[<p>曾经在网上讨论IM软件系统的设计，都说IM软件的设计模式已经固定就那几种了，很难做出什么新意了……我当时也以为然。</p>
<p>看了这个，什么叫“创意无止境”“设计无极限”，我有了更深刻的认识。</p>
<p><img src="http://linnchord.net/upload/x2blog/img/ui/mobile_01.gif" alt="" /></p>
<p><img src="http://linnchord.net/upload/x2blog/img/ui/mobile_02.gif" alt="" /></p>
<p><img src="http://linnchord.net/upload/x2blog/img/ui/mobile_03.gif" alt="" /></p>
<p><img src="http://linnchord.net/upload/x2blog/img/ui/mobile_04.gif" alt="" /></p>
<p><img src="http://linnchord.net/upload/x2blog/img/ui/mobile_05.gif" alt="" /></p>
<p><img src="http://linnchord.net/upload/x2blog/img/ui/mobile_06.gif" alt="" /></p>
<p><img src="http://linnchord.net/upload/x2blog/img/ui/mobile_07.gif" alt="" /></p>
<p><img src="http://linnchord.net/upload/x2blog/img/ui/mobile_08.gif" alt="" /></p>
<p>官方网站：<a href="http://sygic.com/mobile/desktop/index.php" target="_blank">http://sygic.com/mobile/desktop/index.php</a></p>
]]></content:encoded>
			<wfw:commentRss>http://linnchord.net/archives/113.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

