<?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>Our Studio11 &#187; interface</title>
	<atom:link href="http://our.studio11.cn/tag/interface/feed" rel="self" type="application/rss+xml" />
	<link>http://our.studio11.cn</link>
	<description>中央美术学院 第十一工作室</description>
	<lastBuildDate>Tue, 07 Sep 2010 04:50:12 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Aqua: A Review and Retrospective</title>
		<link>http://our.studio11.cn/315.html</link>
		<comments>http://our.studio11.cn/315.html#comments</comments>
		<pubDate>Sun, 26 Oct 2008 04:19:19 +0000</pubDate>
		<dc:creator>贺超</dc:creator>
				<category><![CDATA[news]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[aqua]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[中央美术学院]]></category>
		<category><![CDATA[贺超]]></category>

		<guid isPermaLink="false">http://our.studio11.cn/?p=315</guid>
		<description><![CDATA[
关于苹果电脑Gui的一篇文章，翻译太麻烦了，只写了一点就受不了了，英语单词基本都能看懂，并不是很难。转自mactheme 这是原文链接地址  http://macthemes2.net/2007/10/28/aqua-a-review-and-retrospective/



We at MacThemes love to shapeshift our computers with innovative designs and beautiful themes, but sometimes we just need to return to our interface roots. Mac OS X Leopard, released on the 26th to eager Mac users everywhere, looks to be the greatest version of Mac OS X released yet, with a brand [...]]]></description>
			<content:encoded><![CDATA[<p><br class="spacer_" /></p>
<p><span style="normal;">关于苹果电脑Gui的一篇文章，翻译太麻烦了，只写了一点就受不了了，英语单词基本都能看懂，并不是很难。转自</span><strong><span style="medium;">mactheme</span></strong><span style="normal;"> 这是原文链接地址  <a href="http://macthemes2.net/2007/10/28/aqua-a-review-and-retrospective/" target="_blank">http://macthemes2.net/2007/10/28/aqua-a-review-and-retrospective/</a></span></p>
<p><br class="spacer_" /></p>
<div class="entry">
<p><img class="alignleft" src="http://macthemes2.net/wp-content/uploads/2007/10/preview.png" alt="Aqua Preview" width="124" height="124" /></p>
<p>We at MacThemes love to shapeshift our computers with innovative designs and beautiful themes, but sometimes we just need to return to our interface roots. Mac OS X Leopard, released on the 26th to eager Mac users everywhere, looks to be the greatest version of Mac OS X released yet, with a brand new Aqua sitting on top of 300+ innovations. For a five year-old theme, Aqua has been given a significant facelift, and the myriad of revisions will leave the majority of Aqua aficionados very satisfied.</p>
<p><br class="spacer_" /></p>
<p><strong>History of Aqua</strong></p>
<p>Aqua was introduced in January of 2000, at the Macworld San Francisco Conference. Based around the idea of water, it was one of the core selling points of the then-upcoming Mac OS X, and introduced usability innovations such as window sheets, Quartz font rendering, and the Dock.</p>
<p><img class="alignright" src="http://macthemes2.net/wp-content/uploads/2007/10/macos91.png" alt="Mac OS 9 thumb" width="226" height="168" />But of course, aesthetics played a huge role in this new interface as well. For those who remember the days of the classic Mac OS (specifically, Mac OS 8 and 9), the Platinum appearance ruled the Mac’s windows, buttons, and application styles; up until Aqua was introduced, the Mac UI looked like a sterile copy of Windows 95. Aqua’s pinstripe windows, marvelously photorealistic icons, and pulsating controls and widgets helped modernize an aging user interface, and wowed the audience with its transluency, special effects, and candy-like appearance.</p>
<p><img class="alignleft" src="http://macthemes2.net/wp-content/uploads/2007/10/cheetah_controls.png" alt="Cheetah Controls" width="175" height="177" />Aqua slowly evolved throughout each revision of OS X, starting with 10.0 and stopping (for now) at 10.5. “Cheetah”, 10.0’s internal codename, was an Aqua wildchild, with strong drop shadows under text, heavy blue saturation on controls, and glowing buttons, checkboxes, and scrollbars galore. It was bright, graphically-intense, and, for the time being, it was Aqua. 10.1 (”Puma”) came along and helped settle down the menu bar shadows, and 10.2 “Jaguar”, released just a year and a half after 10.0, finally subdued Aqua’s lickable push buttons, checkboxes, and other system controls, as well as dampening the distinct pinstripes. During this time, Apple also quietly introduced the brushed metal appearance, which would remain unchanged for the next five years.</p>
<p><img class="alignright" src="http://macthemes2.net/wp-content/uploads/2007/10/panther.png" alt="Panther" width="290" height="147" />The following year, version 10.3 “Panther” provided the groundwork for Tiger’s aesthetics, subduing the already-faint pinstripes, establishing the inset titlebar buttons, and cleaning up whatever resources were left unchanged from the initial release of OS X, such as segment tabs. Brushed metal began to see a more frequent use in applications (and often broke the Human Interface Guidelines), and by the time we arrived at Tiger, we had our familiar Aqua paired with four different window styles (Aqua, Unified Light, Unified Dark, and Brushed Metal).</p>
<p><strong>Aqua Now: Aesthetics</strong></p>
<p><img class="alignleft" src="http://macthemes2.net/wp-content/uploads/2007/10/leopard_finder.png" alt="Leopard Finder" width="280" height="144" />So here we are, at version 10.5. While Tiger left most of the core Aqua resources alone, it was a period Apple used to experiment with various application styles; finally Apple put to rest the notorious brushed metal, using the unified metal as the standard across all applications. If you’ve updated your iLife or iTunes in the past two years, you’ll know exactly what it looks like, and it generally makes apps feel cleaner and sleeker. Best yet, Aqua windows, now pinstripe-less, also adopt this metal color, meaning a consistent window style has come to Aqua for the first time since 10.1.</p>
<p><br class="spacer_" /></p>
<p><img src="http://macthemes2.net/wp-content/uploads/2007/10/leopard_safari3.png" alt="Leopard Safari" /></p>
<p><br class="spacer_" /></p>
<p><img class="alignleft" src="http://macthemes2.net/wp-content/uploads/2007/10/leopard_pushbutton1.png" alt="Leopard Push Buttons" width="192" height="112" />But we can’t forget the core Aqua resources. Across the entire interface you’ll find a new tint of Aqua making its way into controls, as well as improving the texture and stroke of many of the widgets. Push buttons and tabs seem more “fluid” and not nearly as glassy; Aqua inset tabs have been done away with altogether in favor of iTunes-style ones; though scroll bars retain their familiar appearance. These changes aren’t all for the better; for instance, the titlebar buttons are too saturated, and the progress bars, unchanged since 10.0, are heavy and dated, leaving plenty of room for improvement for Aqua tweakers and themers.</p>
<p>Arguably the most widely-discussed part of Leopard has been the updated glassy Dock, whose updated aesthetics have been written off as superfluous and has been criticized for its perspective problems. The design itself is fine &#8211; I don’t mind the auto-generated reflections, but I have a major problem with the top drop shadows. They’re just plain silly, and the two light sources idea doesn’t make any sense anyway (but the side dock is beautiful in contrast, making use of a bezel-like base and getting rid of the extra drop shadows and reflections.)</p>
<p><br class="spacer_" /></p>
<p><img src="http://macthemes2.net/wp-content/uploads/2007/10/leopard_dock.png" alt="Leopard Dock" /></p>
<p><br class="spacer_" /></p>
<p>Now for the controversial menu bar. Early screenshots of Leopard a few months back sparked long debates over the bar’s aesthetics and usability; however, it’s actually quite pleasing, incorporating a subtle gradient that helps hide the wallpaper behind it. It seems to work well on high-contrast backgrounds too, leaving the menu bar text quite readable (see below for screenshot).</p>
<p>And there you have it, folks: with a consistent window appearance and brand-new controls lying on top, Apple has very much delivered to make Aqua sweet again. Indeed, it may not succeed very unique Aqua themes- Vitae comes to mind- but for those who were waiting to see Aqua cleaned and spruced, Apple has delivered nicely.</p>
<p><strong>Usability</strong></p>
<p><img class="alignleft" src="http://macthemes2.net/wp-content/uploads/2007/10/leopard_prefs.png" alt="Leopard Finder Prefs" width="281" height="249" />Few words need to be said about Aqua’s usability, because Apple has always excelled at balancing beauty and function in wonderful strides. Has anything changed in that category? Not a bit. Little detail changes may affect aesthetics at worst &#8211; but have actually made Aqua more usable at best. The unified window appearance keeps windows interesting and provides a nice amount of contrast against Aqua’s plain-gray windows, and controls have become more subdued and subtle, which help ease Aqua’s brightness and usability over long periods of time.</p>
<p><strong>Extras</strong></p>
<p><img class="alignright" src="http://macthemes2.net/wp-content/uploads/2007/10/leopard_folder.png" alt="Leopard Folder" width="105" height="89" />For the first time in years, Apple has completely redone Aqua’s folder design, ditching the original perspective, pinstripes and symbols for a front-facing perspective and solid-color glyphs. While I was concerned about the readability of the symbols at small sizes, that’s not a problem at all, and though I would have rather seen full-color versions of the glyphs like Tiger, this won’t pose a problem for most users. However, I’m not a fan of the texture used on the design: it makes the folders seem cheap and dated, opposed to the comparably-futuristic, semi-transparent originals.</p>
<p>From an application perspective, Apple has updated everything to fit cozily with the new, tinted Aqua, and most applications that haven’t even been updated for Leopard won’t feel too dated. The standard OS X app icons have been given 512×512 versions and scale well, and though some are fairly basic (I’m not a fan of the Spaces icon), <a href="http://www.cabel.name/2007/10/panic-leopard.html">upcoming versions</a> of CandyBar and Pixadex should be able to solve that problem nicely.</p>
<p>Desktops and screensavers-wise? We’re all familiar with the space time travel desktop, but I still prefer the original Aqua patterns; and new screensavers like Arabesque, Falling Photos, and Security are decent additions to a fun lineup.</p>
<p><img class="alignleft" src="http://macthemes2.net/wp-content/uploads/2007/10/leopard_systemprefs.png" alt="System Preferences Icons" width="180" height="146" />But what amazes me the most about these extras is to see just how many changes have gone into the <em>tiniest</em> details: for example, take the System Preferences icons. Certainly something to represent Spaces was needed for 10.5, but even old standbys like Keyboard &amp; Mouse, Displays, and Dock- and some not updated since, dare I say, Jaguar- feel fresh and up-to-date now. It’s little details like this themers might pick out in an instant, and will make any user feel like they’re using something truly modern aesthetically- even if they can’t see it at first.</p>
<p><strong>Conclusion</strong></p>
<p>Aqua has been an integral component of our Macs ever since its introduction in 2000. Through many years of development and refinement, Aqua has become even more pleasant and usable with each passing year, and Apple has done a good job of making minor changes to keep the design from stagnating.</p>
<p>This latest revision is nothing but minor: it’s a facelift, and a solid one at that. Not only does it sport brand-new controls and a consistent window style, but Apple managed to retain its world-class usability and throw in some fun new extras at the same time. Sure, it’s not going to leave the crowds of Aqua themers out of a job (Aqua refinement themes such as Vitae will live on), but until we see our favorite themes leap into 10.5, you’ll be just fine with Apple’s latest treatment.</p>
<p><img src="http://macthemes2.net/wp-content/uploads/2007/10/scoring_template1.png" alt="Aqua Scoring Template" /></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://our.studio11.cn/315.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>荐：雅黑：即将到来的中文字体革命(web)</title>
		<link>http://our.studio11.cn/241.html</link>
		<comments>http://our.studio11.cn/241.html#comments</comments>
		<pubDate>Tue, 14 Oct 2008 14:02:13 +0000</pubDate>
		<dc:creator>李沃耕</dc:creator>
				<category><![CDATA[新奇]]></category>
		<category><![CDATA[cleartype]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[segoe ui]]></category>
		<category><![CDATA[studio11]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[字体]]></category>

		<guid isPermaLink="false">http://our.studio11.cn/?p=241</guid>
		<description><![CDATA[来源：中国计算机报·数字时代
推荐一下这篇文章，其中详细讲述了中文在屏幕上应用的等等等故事，很有意思，值得看一下。

用Vista的新Segoe UI字体设计的旧金山手工民间艺术博物馆新标志。这家博物馆位于旧金山繁华的Fort Mason中心（崔健在美国开演唱会的地方）码头区，展出来自全球的艺术珍品。馆方认为“用新字体设计的标志看起来很新潮，也很养眼”。
100美元一个字，微软花这么大的价钱打造的新Vista中文字体，到底有多厉害？

“Vista完全可以沿用原来的字体，但启用微软雅黑，将令中文版Vista更加清晰、明亮。”
——微软中国公司客户端产品部总监韦青
 


上图：ClearType显示的障眼法。上面是没有打开ClearType时候的标准显示状态，下面是打开后的平滑显示状态。两者都直接截屏后放大800倍。微软就是用这样的彩色边缘成功欺骗了我们的眼睛。

液晶屏上表示黑和白的两个像素，向左偏移1/3像素和2/3像素时的情况。

随着微软下一代操作系统Windows Vista中文版的公测，一款全新的中文界面显示字体也浮出水面：微软雅黑体。雅黑和Vista一样，仍处于测试阶段，它最引人注目的是，截至目前的0.75beta版，每个字的造价几乎达到100美元——这几乎是有史以来最昂贵的一套中文字库。
微软这样描述雅黑：“Vista完全可以沿用原来的字体，但启用微软雅黑，将令中文版Vista更加清晰、明亮。”最妙的是，它支持WinXP，只要从Vista中提取出来放进字体目录就可以体会Vista的感觉，多棒！这也是雅黑近来这么热门的原因所在。那么，微软为什么要花费巨资开发雅黑呢？

液晶带来的新难题

长期以来，Windows一直采用点阵字库方案作为界面和文本的常规显示模式。中文用宋体，英文用Tohoma。网页制作人员也习惯了11pt/12px的最小字号，用于阅读的正文字体则采用11.5pt/14px。在这个字号下，汉字的显示能达到最美观和易读的效果。因此多年以来大家都相安无事，但是液晶显示器的普及改变了这一切。
液晶新潮时尚无辐射，字体显示清晰无比，但和CRT相比最大的缺点是：插值显示效果惨不忍睹，只能在最优分辨率下看东西。不幸的是，无论液晶的尺寸有多大，最优分辨率下的文字显示都实在太小：比在15英寸CRT上小了足足24%！这对于长时间阅读来说太糟糕了，而对于老年人和弱视人群简直不啻于一场灾难。
 虽然现有的Windows在界面显示中提供了大字体方案，但这种未经优化的点阵大字体粗糙而难看，绝大多数人都无法接受。而更悲哀的是，即便你受得了，IE也不支持。
情况显然非常严重。然而，在苹果的中文操作系统OSX上，已经可以看到一种平滑显示的优美黑体，在系统界面和网页上都可以完美显示。同样，在Linux系统中，也采用了一种“字体渲染”技术，可以在界面上平滑显示矢量中文黑体。但是，在拥有最多用户的Windows世界呢？无论如何，微软必须赶在液晶全面普及之前找到一条可行的界面文字显示解决方案。于是，微软重新翻出了ClearType技术。

ClearType：旧瓶装上了新酒

等等！为什么是重新？因为ClearType的确不是一种新技术了，这是微软于1998年底发布的一项屏幕字体优化显示技术，可以在屏幕上平滑显示矢量字体，以改善LCD的文本显示效果——据说可以将LCD的显示效果提高200%，而且特别适合现有的液晶显示设备，尤其是手持电脑和掌上电脑。效能提高300%？真的这么夸张吗？
我们知道，在计算机上图像的最小计算单位是像素，再优秀的图像处理软件也无法生成比一个像素更小的图像信息。但是，在屏幕显示上，如果你用放大镜来查看屏幕，会发现每一个点都是红绿蓝的栅条所组成的，就算是白点也不例外。事实上屏幕上的所有颜色，都是通过不同亮度的红绿蓝(RGB)固定搭配显示出来的，ClearType打破了局限，将任意三个连续的RGB栅条当成一个像素来显示，从而实现比像素更小的显示精度。
为什么如此优秀的显示技术8年来一直没有广泛应用？因为这种技术仍然是有局限的。首先，普通CRT屏幕的屏幕点阵和液晶屏幕的分布是不一样的，ClearType在CRT上面的显示效果提升没有液晶那么明显，甚至更糟糕；其次，由于液晶的栅条是垂直的，所以这种显示仅仅提升了水平的显示分辨率，假如屏幕发生了旋转——例如液晶常见的90度旋转显示，显示可能会出问题；最后，目前ClearType技术仅仅能用于WinXP/2003和即将到来的Vista中。如果你使用WinXP sp2以上的系统，只能下载一个叫做ClearType Tuner的小工具来微调，遗憾的是，平滑的效果仅仅限于英文，对中文完全不起作用。

更麻烦的中文ClearType字体

在中文系统下，情况就更为复杂了。即使解决了上面的这些问题，仍然有最后一个艰难的障碍需要跨越：中文世界里缺少一套合适的ClearType屏幕正文显示字体。
这款字体必须能解决在ClearType平滑显示状态下小字号正常阅读的问题。现有的所有中文字库都无法在ClearType平滑显示状态下完美地显示文本。我们知道，Windows中的宋体、黑体等字体是由中国北京的中易公司开发的，微软向中易购买了版权之后将其嵌入Windows中文版。之前的宋体之所以能够在小字号点阵状态下很好的显示，是由于在矢量字库中嵌入了12、14、16、18等几个点阵字库，效果才比较理想。但在ClearType状态下，继续采用内嵌点阵显示汉字，就会和平滑显示的英文粗细不一致，风格上非常不协调，此外，强制平滑显示的效果显得纤细发虚，看起来很模糊。
为什么英文可以直接使用ClearType平滑显示？多数优秀的英文字体并不采用内嵌点阵的优化方式，而是一种叫做Hinting（字形微调）的技术来对小字号的显示进行优化。简单点说，矢量字体可以平滑缩放没错，但在小字号下，由于能使用的像素非常有限，系统自动解析会出现笔画粗细不匀，文字之间高低不齐，甚至笔画模糊无法识别等问题。因此必须由字体设计师人工干预，在矢量字库中嵌入附加信息，来告诉字体渲染引擎在某个特定的字号下面，应该如何对这个字符的细节进行修正。
Hinting调整的范围需要涵盖各级小字号，一般最少要包括9px &#8211; 18px这个常用的字号区间。即便对于非常有经验的设计师来说，这也是非常高难度而且费时费力的工作。而中文的笔画繁多，自动解析的错误也就更多更严重。此外，英文只有26个字母，汉字的情况就复杂得多了，仅仅是最常用的汉字就有6000个，全加起来差不多有3万个。仅仅是这矢量造字的工作就是非常浩大的。
这还不算，作为一套功能完整的正文字体，还需要考虑到斜体和粗体的显示，斜体和小字号一样也需要Hinting。为了更完美地显示粗体，微软决定将标准体和粗体分开，作为两套单独的字体来设计，安装时也是两套字体，但在系统中使用时是显示为一套字体的不同状态。这套单独的黑体也同样需要单独造字，然后指定一系列的Hinting和斜体Hinting。
Hinting信息是评价一款优秀矢量字体的一个重要指标，良好的Hinting能在小字号下面提供和内嵌点阵字一样优秀的显示质量，同时又降低内存的消耗。虽然我们现在已经拥有不少不错的矢量中文字体，但适合屏幕显示的正文字体很少，而包含完善Hinting信息的，一个也没有。所以，微软等于是在全新开发一套具备完善Hinting信息的ClearType中文字体，这也正是雅黑如此昂贵的原因之一。
实际上，不仅仅是中国大陆，整个CJK地区（中日韩）都要面临这个全新设计字体的问题。从现在已经发布的版本来看，各国的Vista版本都有全新设计的专用字体，简体中文地区是我们已经知道的微软雅黑，繁体中文地区是微软正黑，日文地区是Meiryo（据说这个名称来源于“明了”或者“明流”的读音），韩国地区则是Malgun。
对于微软雅黑和微软正黑，我们不好简单地用简体或者繁体来区分他们，因为这两套字体都同时包含了比较完整的简繁体汉字，以确保在简体和繁体混排的页面上都能够完美显示。但由于文教部门在各自的文字规范中对汉字的写法规定有很多细节上的不同，所以这两套字形在正式场合是不能混淆使用的。同样，日文的Meiryo字体中也包含了大量的繁体汉字，不过由于汉字在日本也经过了上千年的演变，日文中的汉字写法和中国本土也有着很大区别，更无法混为一谈。

雅黑带来了什么

从本文所附的雅黑网页显示效果示意图可以看出雅黑的几个重点设计理念：
1. 单独设计的粗体。以往宋体的粗体都是通过内嵌点阵或者字体引擎渲染的，效果不是很好。粗体的单独设计意味着另外设计一套字体，所有的时间成本和人力成本翻倍，造价也会翻倍，但是显示效果也会非常好。再考虑到繁体中文和日文韩文都如此处理，微软这次真的下了血本了。
2. 品质优异的斜体。在Windows上第一次看到如此清晰的中文斜体，真的有点令人感动。虽然是14px，但宋体的斜体已经显得支离破碎了。
3. 更清晰的小号字显示。在以往，12px是宋体能显示的极限。比这小的字号会因为没有内嵌点阵而变得模糊。而从微软雅黑的字范来看，11px的显示非常优秀，10px的字基本可以辨认，9px以下，对于汉字的正常显示，已经是不可能的任务了，平常也不会作为正常的屏幕使用字号，但这个极限字号的测试是一个有参考价值的项目。我们可以看到，雅黑在这种情况下仍然还有大约一半左右的字符可以识别出来。
4. 对于最常用的字号，如12px和14px，雅黑的显示非常清晰优美，中英文搭配和谐。同时，和宋体相比，雅黑的字形不是正方形的，而是稍显扁宽，字间距小，使默认的行间距更为明晰，同时使雅黑的字心更为饱满，在同样的字号下，单字面积就显得更大，更容易识别，阅读起来也更舒服。

中文显示的新体验

作为微软中文解决方案的一个重要核心，微软将在IE7、Office 2007以及Vista中全面启用雅黑作为默认的界面显示和正文阅读字体，替代长期以来使用的宋体（中文）+Tohoma（英文）点阵字方案。这将带来怎样的变化？
首先，未来的软件界面将更灵活，更人性化。在解决了字体平滑缩放之后，从Windows本身到各个应用软件，它们的界面字体对比现在将变得更大、更平滑和清晰。用户将可以自己灵活定制Windows和各个应用软件的字体大小，以适应不同场合和不同视力的需要。而软件开发人员和UI设计师需要考虑的是在字体发生变化之后的软件界面还能保持动态的完整和美观，避免在字体变大之后变得支离破碎无法辨识。
其次，雅黑对于互联网，将会有更深远的影响。今后的网页设计会更体贴而人性化，用户将不再需要忍受网页上的小字体的困扰，网页的设计风格将会更简洁而便于阅读。
比如，用户将可以自己选择网页的显示字体的大小。用户会发觉原来大字体下面的网页文字也可以如此优美，不管大字号还是小字号，文本的显示比图片还要平滑清晰。屏幕上的阅读将变得更为轻松。长期以来网页设计人员都喜欢使用css来锁定文字的字号大小，以避免不好看的大字体破坏整个页面的美观。随着ClearType中文字体的推广应用，这种做法会逐渐消失。
另外，网页的风格将会越来越趋于简洁和明快，便于阅读。那些整个版面密密麻麻花里胡哨风格的页面将会逐渐不再流行。因为这样复杂的界面在字体变大以后很容易就被破坏。而网页的界面结构越简洁，就越可以自动缩放和适应这种动态的变化。现在的Web2.0网站已经越来越明显地体现简洁明快的趋势，在一些牛人的Blog和相册站点上，现在已经可以自由缩放，同时保持版面美观一致。
此外，除了不再锁定字号，css的写法也会有新的变化。例如以前用习惯使用固定像素16-20px为单位来确定行间距的设计，在字体放大以后就会挤在一起而无法阅读。因此以后将流行用百分比或者em来确定行距，以自动适应字体的缩放。最后，以往很多粗体的大标题和斜体，由于字体的显示不佳而被迫做成图片，这种局面也将得到全面的改变，大多数常用的字体效果都可以直接在网页上通过css来更灵活实现。
雅黑注定要为将来的Windows界面和网页浏览带来意义深远的革命。所以，不管你是作为一个软件开发人员、一个软件UI设计师，还是一个网页设计师，或者是一个最普通的网民，一个Windows的使用者，都无法忽视它。让我们期待这个全新的时代赶快到来吧。
]]></description>
			<content:encoded><![CDATA[<p>来源：<a href="http://www.ciw.com.cn/epaper/EmList.asp?EmType=3">中国计算机报·数字时代</a></p>
<p>推荐一下这篇文章，其中详细讲述了中文在屏幕上应用的等等等故事，很有意思，值得看一下。</p>
<p><br class="spacer_" /></p>
<p>用Vista的新Segoe UI字体设计的旧金山手工民间艺术博物馆新标志。这家博物馆位于旧金山繁华的Fort Mason中心（崔健在美国开演唱会的地方）码头区，展出来自全球的艺术珍品。馆方认为“用新字体设计的标志看起来很新潮，也很养眼”。</p>
<p>100美元一个字，微软花这么大的价钱打造的新Vista中文字体，到底有多厉害？</p>
<p><br class="spacer_" /></p>
<p>“Vista完全可以沿用原来的字体，但启用微软雅黑，将令中文版Vista更加清晰、明亮。”</p>
<p style="text-align: right;"><strong>——微软中国公司客户端产品部总监韦青</strong></p>
<p style="text-align: right;"> </p>
<p><img class="aligncenter size-medium wp-image-242" title="Vista字体风格的橱窗" src="http://our.studio11.cn/wp-content/uploads/2008/10/20061114102446_1.jpg" alt="" width="200" height="267" /></p>
<p><img class="aligncenter size-medium wp-image-243" title="ClearType" src="http://our.studio11.cn/wp-content/uploads/2008/10/20061114102515_1.jpg" alt="" width="200" height="127" /></p>
<p style="text-align: center;">上图：ClearType显示的障眼法。上面是没有打开ClearType时候的标准显示状态，下面是打开后的平滑显示状态。两者都直接截屏后放大800倍。微软就是用这样的彩色边缘成功欺骗了我们的眼睛。</p>
<p><img class="aligncenter size-medium wp-image-244" title="cleartype" src="http://our.studio11.cn/wp-content/uploads/2008/10/20061114102527_1.jpg" alt="" width="200" height="105" /></p>
<p style="text-align: center;">液晶屏上表示黑和白的两个像素，向左偏移1/3像素和2/3像素时的情况。</p>
<p><br class="spacer_" /></p>
<p>随着微软下一代操作系统Windows Vista中文版的公测，一款全新的中文界面显示字体也浮出水面：微软雅黑体。雅黑和Vista一样，仍处于测试阶段，它最引人注目的是，截至目前的0.75beta版，每个字的造价几乎达到100美元——这几乎是有史以来最昂贵的一套中文字库。</p>
<p>微软这样描述雅黑：“Vista完全可以沿用原来的字体，但启用微软雅黑，将令中文版Vista更加清晰、明亮。”最妙的是，它支持WinXP，只要从Vista中提取出来放进字体目录就可以体会Vista的感觉，多棒！这也是雅黑近来这么热门的原因所在。那么，微软为什么要花费巨资开发雅黑呢？</p>
<p><br class="spacer_" /></p>
<p><strong>液晶带来的新难题</strong></p>
<p><br class="spacer_" /></p>
<p>长期以来，Windows一直采用点阵字库方案作为界面和文本的常规显示模式。中文用宋体，英文用Tohoma。网页制作人员也习惯了11pt/12px的最小字号，用于阅读的正文字体则采用11.5pt/14px。在这个字号下，汉字的显示能达到最美观和易读的效果。因此多年以来大家都相安无事，但是液晶显示器的普及改变了这一切。</p>
<p>液晶新潮时尚无辐射，字体显示清晰无比，但和CRT相比最大的缺点是：插值显示效果惨不忍睹，只能在最优分辨率下看东西。不幸的是，无论液晶的尺寸有多大，最优分辨率下的文字显示都实在太小：比在15英寸CRT上小了足足24%！这对于长时间阅读来说太糟糕了，而对于老年人和弱视人群简直不啻于一场灾难。</p>
<p><span id="more-241"></span> 虽然现有的Windows在界面显示中提供了大字体方案，但这种未经优化的点阵大字体粗糙而难看，绝大多数人都无法接受。而更悲哀的是，即便你受得了，IE也不支持。</p>
<p>情况显然非常严重。然而，在苹果的中文操作系统OSX上，已经可以看到一种平滑显示的优美黑体，在系统界面和网页上都可以完美显示。同样，在Linux系统中，也采用了一种“字体渲染”技术，可以在界面上平滑显示矢量中文黑体。但是，在拥有最多用户的Windows世界呢？无论如何，微软必须赶在液晶全面普及之前找到一条可行的界面文字显示解决方案。于是，微软重新翻出了ClearType技术。</p>
<p><br class="spacer_" /></p>
<p><strong>ClearType：旧瓶装上了新酒</strong></p>
<p><br class="spacer_" /></p>
<p>等等！为什么是重新？因为ClearType的确不是一种新技术了，这是微软于1998年底发布的一项屏幕字体优化显示技术，可以在屏幕上平滑显示矢量字体，以改善LCD的文本显示效果——据说可以将LCD的显示效果提高200%，而且特别适合现有的液晶显示设备，尤其是手持电脑和掌上电脑。效能提高300%？真的这么夸张吗？</p>
<p>我们知道，在计算机上图像的最小计算单位是像素，再优秀的图像处理软件也无法生成比一个像素更小的图像信息。但是，在屏幕显示上，如果你用放大镜来查看屏幕，会发现每一个点都是红绿蓝的栅条所组成的，就算是白点也不例外。事实上屏幕上的所有颜色，都是通过不同亮度的红绿蓝(RGB)固定搭配显示出来的，ClearType打破了局限，将任意三个连续的RGB栅条当成一个像素来显示，从而实现比像素更小的显示精度。</p>
<p>为什么如此优秀的显示技术8年来一直没有广泛应用？因为这种技术仍然是有局限的。首先，普通CRT屏幕的屏幕点阵和液晶屏幕的分布是不一样的，ClearType在CRT上面的显示效果提升没有液晶那么明显，甚至更糟糕；其次，由于液晶的栅条是垂直的，所以这种显示仅仅提升了水平的显示分辨率，假如屏幕发生了旋转——例如液晶常见的90度旋转显示，显示可能会出问题；最后，目前ClearType技术仅仅能用于WinXP/2003和即将到来的Vista中。如果你使用WinXP sp2以上的系统，只能下载一个叫做ClearType Tuner的小工具来微调，遗憾的是，平滑的效果仅仅限于英文，对中文完全不起作用。</p>
<p><br class="spacer_" /></p>
<p><strong>更麻烦的中文ClearType字体</strong></p>
<p><br class="spacer_" /></p>
<p>在中文系统下，情况就更为复杂了。即使解决了上面的这些问题，仍然有最后一个艰难的障碍需要跨越：中文世界里缺少一套合适的ClearType屏幕正文显示字体。</p>
<p>这款字体必须能解决在ClearType平滑显示状态下小字号正常阅读的问题。现有的所有中文字库都无法在ClearType平滑显示状态下完美地显示文本。我们知道，Windows中的宋体、黑体等字体是由中国北京的中易公司开发的，微软向中易购买了版权之后将其嵌入Windows中文版。之前的宋体之所以能够在小字号点阵状态下很好的显示，是由于在矢量字库中嵌入了12、14、16、18等几个点阵字库，效果才比较理想。但在ClearType状态下，继续采用内嵌点阵显示汉字，就会和平滑显示的英文粗细不一致，风格上非常不协调，此外，强制平滑显示的效果显得纤细发虚，看起来很模糊。</p>
<p>为什么英文可以直接使用ClearType平滑显示？多数优秀的英文字体并不采用内嵌点阵的优化方式，而是一种叫做Hinting（字形微调）的技术来对小字号的显示进行优化。简单点说，矢量字体可以平滑缩放没错，但在小字号下，由于能使用的像素非常有限，系统自动解析会出现笔画粗细不匀，文字之间高低不齐，甚至笔画模糊无法识别等问题。因此必须由字体设计师人工干预，在矢量字库中嵌入附加信息，来告诉字体渲染引擎在某个特定的字号下面，应该如何对这个字符的细节进行修正。</p>
<p>Hinting调整的范围需要涵盖各级小字号，一般最少要包括9px &#8211; 18px这个常用的字号区间。即便对于非常有经验的设计师来说，这也是非常高难度而且费时费力的工作。而中文的笔画繁多，自动解析的错误也就更多更严重。此外，英文只有26个字母，汉字的情况就复杂得多了，仅仅是最常用的汉字就有6000个，全加起来差不多有3万个。仅仅是这矢量造字的工作就是非常浩大的。</p>
<p>这还不算，作为一套功能完整的正文字体，还需要考虑到斜体和粗体的显示，斜体和小字号一样也需要Hinting。为了更完美地显示粗体，微软决定将标准体和粗体分开，作为两套单独的字体来设计，安装时也是两套字体，但在系统中使用时是显示为一套字体的不同状态。这套单独的黑体也同样需要单独造字，然后指定一系列的Hinting和斜体Hinting。</p>
<p>Hinting信息是评价一款优秀矢量字体的一个重要指标，良好的Hinting能在小字号下面提供和内嵌点阵字一样优秀的显示质量，同时又降低内存的消耗。虽然我们现在已经拥有不少不错的矢量中文字体，但适合屏幕显示的正文字体很少，而包含完善Hinting信息的，一个也没有。所以，微软等于是在全新开发一套具备完善Hinting信息的ClearType中文字体，这也正是雅黑如此昂贵的原因之一。</p>
<p>实际上，不仅仅是中国大陆，整个CJK地区（中日韩）都要面临这个全新设计字体的问题。从现在已经发布的版本来看，各国的Vista版本都有全新设计的专用字体，简体中文地区是我们已经知道的微软雅黑，繁体中文地区是微软正黑，日文地区是Meiryo（据说这个名称来源于“明了”或者“明流”的读音），韩国地区则是Malgun。</p>
<p>对于微软雅黑和微软正黑，我们不好简单地用简体或者繁体来区分他们，因为这两套字体都同时包含了比较完整的简繁体汉字，以确保在简体和繁体混排的页面上都能够完美显示。但由于文教部门在各自的文字规范中对汉字的写法规定有很多细节上的不同，所以这两套字形在正式场合是不能混淆使用的。同样，日文的Meiryo字体中也包含了大量的繁体汉字，不过由于汉字在日本也经过了上千年的演变，日文中的汉字写法和中国本土也有着很大区别，更无法混为一谈。</p>
<p><br class="spacer_" /></p>
<p><strong>雅黑带来了什么</strong></p>
<p><br class="spacer_" /></p>
<p>从本文所附的雅黑网页显示效果示意图可以看出雅黑的几个重点设计理念：</p>
<p>1. 单独设计的粗体。以往宋体的粗体都是通过内嵌点阵或者字体引擎渲染的，效果不是很好。粗体的单独设计意味着另外设计一套字体，所有的时间成本和人力成本翻倍，造价也会翻倍，但是显示效果也会非常好。再考虑到繁体中文和日文韩文都如此处理，微软这次真的下了血本了。</p>
<p>2. 品质优异的斜体。在Windows上第一次看到如此清晰的中文斜体，真的有点令人感动。虽然是14px，但宋体的斜体已经显得支离破碎了。</p>
<p>3. 更清晰的小号字显示。在以往，12px是宋体能显示的极限。比这小的字号会因为没有内嵌点阵而变得模糊。而从微软雅黑的字范来看，11px的显示非常优秀，10px的字基本可以辨认，9px以下，对于汉字的正常显示，已经是不可能的任务了，平常也不会作为正常的屏幕使用字号，但这个极限字号的测试是一个有参考价值的项目。我们可以看到，雅黑在这种情况下仍然还有大约一半左右的字符可以识别出来。</p>
<p>4. 对于最常用的字号，如12px和14px，雅黑的显示非常清晰优美，中英文搭配和谐。同时，和宋体相比，雅黑的字形不是正方形的，而是稍显扁宽，字间距小，使默认的行间距更为明晰，同时使雅黑的字心更为饱满，在同样的字号下，单字面积就显得更大，更容易识别，阅读起来也更舒服。</p>
<p><br class="spacer_" /></p>
<p><strong>中文显示的新体验</strong></p>
<p><br class="spacer_" /></p>
<p>作为微软中文解决方案的一个重要核心，微软将在IE7、Office 2007以及Vista中全面启用雅黑作为默认的界面显示和正文阅读字体，替代长期以来使用的宋体（中文）+Tohoma（英文）点阵字方案。这将带来怎样的变化？</p>
<p>首先，未来的软件界面将更灵活，更人性化。在解决了字体平滑缩放之后，从Windows本身到各个应用软件，它们的界面字体对比现在将变得更大、更平滑和清晰。用户将可以自己灵活定制Windows和各个应用软件的字体大小，以适应不同场合和不同视力的需要。而软件开发人员和UI设计师需要考虑的是在字体发生变化之后的软件界面还能保持动态的完整和美观，避免在字体变大之后变得支离破碎无法辨识。</p>
<p>其次，雅黑对于互联网，将会有更深远的影响。今后的网页设计会更体贴而人性化，用户将不再需要忍受网页上的小字体的困扰，网页的设计风格将会更简洁而便于阅读。</p>
<p>比如，用户将可以自己选择网页的显示字体的大小。用户会发觉原来大字体下面的网页文字也可以如此优美，不管大字号还是小字号，文本的显示比图片还要平滑清晰。屏幕上的阅读将变得更为轻松。长期以来网页设计人员都喜欢使用css来锁定文字的字号大小，以避免不好看的大字体破坏整个页面的美观。随着ClearType中文字体的推广应用，这种做法会逐渐消失。</p>
<p>另外，网页的风格将会越来越趋于简洁和明快，便于阅读。那些整个版面密密麻麻花里胡哨风格的页面将会逐渐不再流行。因为这样复杂的界面在字体变大以后很容易就被破坏。而网页的界面结构越简洁，就越可以自动缩放和适应这种动态的变化。现在的Web2.0网站已经越来越明显地体现简洁明快的趋势，在一些牛人的Blog和相册站点上，现在已经可以自由缩放，同时保持版面美观一致。</p>
<p>此外，除了不再锁定字号，css的写法也会有新的变化。例如以前用习惯使用固定像素16-20px为单位来确定行间距的设计，在字体放大以后就会挤在一起而无法阅读。因此以后将流行用百分比或者em来确定行距，以自动适应字体的缩放。最后，以往很多粗体的大标题和斜体，由于字体的显示不佳而被迫做成图片，这种局面也将得到全面的改变，大多数常用的字体效果都可以直接在网页上通过css来更灵活实现。</p>
<p>雅黑注定要为将来的Windows界面和网页浏览带来意义深远的革命。所以，不管你是作为一个软件开发人员、一个软件UI设计师，还是一个网页设计师，或者是一个最普通的网民，一个Windows的使用者，都无法忽视它。让我们期待这个全新的时代赶快到来吧。</p>
]]></content:encoded>
			<wfw:commentRss>http://our.studio11.cn/241.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google界面设计全纪录</title>
		<link>http://our.studio11.cn/125.html</link>
		<comments>http://our.studio11.cn/125.html#comments</comments>
		<pubDate>Wed, 08 Oct 2008 07:27:23 +0000</pubDate>
		<dc:creator>李沃耕</dc:creator>
				<category><![CDATA[新奇]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[studio11]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://our.studio11.cn/?p=125</guid>
		<description><![CDATA[这是能翻到的Google最早的主页了，那是的Google还没有公开上线，大概是在98年。



这应该算是Goog...]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-medium wp-image-126" title="Google interface" src="http://our.studio11.cn/wp-content/uploads/2008/10/011.gif" alt="" width="600" height="201" /></p>
<p>这是能翻到的Google最早的主页了，那时的Google还没有公开上线，大概是在98年。</p>
<p><img class="alignnone size-medium wp-image-127" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/021.gif" alt="" width="600" height="201" /></p>
<p>这应该算是Google对外的第一个版本。老logo，带叹号的。</p>
<p><span id="more-125"></span><img class="alignnone size-medium wp-image-128" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/033.gif" alt="" width="600" height="201" /></p>
<p>比较有名的一个版本，开始用颜色区分功能区域。或许是Google可用性设计的开始？</p>
<p><img class="alignnone size-medium wp-image-129" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/041.gif" alt="" width="600" height="201" /></p>
<p>开始有Google的味道了，那时还是beta.</p>
<p><img class="alignnone size-medium wp-image-130" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/051.gif" alt="" width="600" height="201" /></p>
<p>注意细节，Google调整了a:link的颜色，让他不再那么扎眼，而且页面字体也有意改变了。</p>
<p><img class="alignnone size-medium wp-image-131" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/061.gif" alt="" width="600" height="201" /></p>
<p>整合了？</p>
<p><img class="alignnone size-medium wp-image-132" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/07.gif" alt="" width="600" height="201" /></p>
<p>整合了服务，对网站导航进行了设计。新的logo。</p>
<p><img class="alignnone size-medium wp-image-133" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/08.gif" alt="" width="600" height="201" /></p>
<p>更加灵活的设计。</p>
<p><img class="alignnone size-medium wp-image-134" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/09.gif" alt="" width="600" height="201" /></p>
<p>看上去似乎更加整体了。</p>
<p><img class="alignnone size-medium wp-image-135" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/10.gif" alt="" width="600" height="201" /></p>
<p>更晚上的服务，注意右上角。</p>
<p><img class="alignnone size-medium wp-image-136" title="Google" src="http://our.studio11.cn/wp-content/uploads/2008/10/11.gif" alt="" width="600" height="201" /></p>
<p>现在的Google。</p>
<p><br class="spacer_" /></p>
<p>转载注明出处，本人辛苦收集。</p>
]]></content:encoded>
			<wfw:commentRss>http://our.studio11.cn/125.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
