乐闻設計

Windows Mobile 6.5 icon and theme design

Wed, 01 Jul 2009 04:03:29 +0000

这应该是我加入微软ATC-Studios以来第一次发作品上来，终于等到可以发布的时候了，因为要等到官方正式发布才行。这个项目做了大概有一年的时间，这段时间让我收获很多，从最开始的concept设计，反复的修改和完善，到最后Production和theme的设计，大家投入了极大的热情！特别是朱印的指导，每天5点钟review，每一次都能有新的发现和吸取，在那段时间里也是自己进步最快的阶段。

WM6.5一定有很不多不完善的地方，其实在设计中我们也经常烦恼，觉得US那边的想法实在难以理解，因为我们有很多好的创意都被cancel了。不过，能为这样一款遍及全球的软件系统的设计尽自己的一份力量，也算是值得欣慰的事。但愿以后还能有这样的机会，能用自己创造出来的设计给更多的人带来便利和快乐！

Tags - ui , icon , microsoft , windows , mobile , 6.5 , design

乐高搭建的北京奥运会

Fri, 26 Jun 2009 01:01:10 +0000

Tags - lego , olympic , 乐高

“时尚中黑简体”诞生

Thu, 18 Jun 2009 00:15:07 +0000

引领汉字设计创新传承中华传统文化

由时尚传媒集团自主设计的时尚字体——“时尚中黑简体”于2009年6月3日在时尚大厦隆重推出。“时尚中黑简体”也成为国内首家以企业名称命名的规范字体。“时尚中黑简体”是时尚传媒集团16周年的又一创举，在时尚界、出版界开创了企业涉足字体设计的先河，时尚传媒集团引领潮流、开拓创新的精神再次得以体现。著名设计师郭承辉出席了字体的发布会，并对“ 时尚中黑简体”给予高度评价：“简约唯美，整体感强，单字块性，排字线性强，合适标题、副文、导读之用字。为设计师个性化使用提供可变性。”著名学者王受之也对“时尚中黑简体”的诞生表示祝贺，称这是设计界的大事，并希望时尚传媒集团此举能够带动国内字体设计的高潮。

极富创意的“[体用·山水] ——时尚中黑简体创意推广展”也在发布会上展出。这组创意作品展由时尚传媒集团总裁吴泓、时尚传媒集团联合总裁刘江亲自策划，由曾设计时尚LOGO的天一公司总裁兼首席设计师郭承辉进行创意设计。吴泓先生亲手书写的汉字书法和时尚中黑字体在各种形态的石头上相映成趣，给观者一种独特的审美体验。

　　“时尚中黑简体”采用GB2312-80标准，含6763个汉字与ASCII字符94个。字体的设计良好地遵循了“时尚”LOGO字形的笔画规律和设计特点，保证了与时尚传媒集团品牌形象的统一性。整体字形笔画均衡，风格现代，字体方中带圆，端庄雅致，简约时尚。适宜用于时尚类企业形象、产品名称和广告标题类用字。此款字形为时尚传媒集团独家所有，是时尚品牌形象视觉部分的强力延展，是企业品牌识别的重要部分。

　　“时尚中黑简体”字库采用国内最先进的TrueType数字化字形描述技术，为使用者提供了极大的便利：支持几乎所有的输出设备；支持字体嵌入技术，保证文件的跨系统传递性；可兼容MAC和Windows操作系统，文件在mac上产生的最终输出效果与在Windows下的输出保持高度一致；在 TrueType字体中的每个字符都有其各自的字宽值，任何Windows支持的输出设备，都能用True Type字体输出。

　　“时尚中黑简体”是时尚传媒集团16年发展过程中的一个新标志。十六年前，时尚创刊时候的刊名“時尚”二字，是由一位设计师一笔一划用美术字画下来的，用的是繁体圆体；时尚十周年的时候，时尚特意邀请了王受之教授和著名的平面设计师郭承辉先生改了字体，并设计出了时尚logo。随着时尚集团的快速发展，时尚品牌在社会的影响力越来越大，很多公司纷纷盗用时尚logo字体。在一位网站设计师的动议下，时尚字体的设计也正式提上了日程。“时尚中黑简体”的诞生，成为时尚16周年的又一创举。时尚传媒集团拥有了以“时尚”命名的自主知识产权的字体，这在业界也是史无前例的。

　　同时，因“时尚中黑简体”自身版权的终身独有性，适当价位限量授权或者直接授权于任意商业环境，或终身或每年或单幅商业设计作品，对其收取授权使用费用。并且，此款字体属于美术创作范畴，时尚享有相应知识产权，具有排他性创作，可对后续同风格的创作作品和未经授权而使用本字体的任何商业企业和相关行为追究其版权责任，从而保护“时尚中黑简体”的商业价值。

我个人的体会是，从字形上实在看不出什么山水的概念，倒是蛮时尚的，可以作为内容前卫现代一点的文章标题和导读字体，字体的个体突出，中宫外拓，用在户外广告或者宣传册书名上面，应该很醒目。但是用在正文里就不大合适了，文字变小以后，显得不流畅，读起来很费劲。不过，在国内字体这么贫乏的环境里，能有这样一款优美的字体出现，还是一件值得高兴的事。以前在出版社工作的时候，就常常因为没有合适的中文字体用而烦恼，好看一点的字体还大多是繁体版本的。后来好歹出来了微软雅黑体，还是人家美国人投钱搞的，中国内地真的应该把字体设计好好重视起来。

Tags - font , 时尚中黑简体

Apple vs. Microsoft - A Website Usability Study

Wed, 10 Jun 2009 14:41:28 +0000

转载一篇非常不错的文章，主要从7个方面把微软和苹果两大公司的网站做了比较，到底谁更好呢？

Today we’re going to compare the websites of two monumental companies: Apple and Microsoft.

The two giants pride themselves for producing cutting edge consumer and business products, and are leading the developments in software and hardware.

But what about their websites? How do they both compare, and more important, which one is better and more usable?
Well, in this article we’ll take a look at both websites for closer examination from a usability point of view.

1. Homepage

The homepage is one of the most important pages of the whole site because it’s the first, and in many cases the only chance you get to impress the visitor enough to keep them browsing. You’ve got a few seconds to convince them that the site has enough value for them to keep using it, because if it doesn’t, the visitors will leave.

Apple’s approach to the homepage has been consistent throughout all the years that the site has been running. They use this page as a kind of advertising board that always shows a big ad of their latest product, followed by 3 other ads to another 3 products or news that is important at the moment.

If you’re not interested in any of the 4 suggested items, you can use the large navigation bar at the top, which is split into their core businesses: Mac, iPod and iPhone, followed by a couple of other important links, such as the online store and support pages. The navigation bar also incorporates a search field.

The interesting thing here is that the main ad at the top is huge — indeed it almost covers the entire page. If this doesn’t grab your attention then nothing will. Apple knows the importance of getting the customer’s attention using good marketing, so they’re not afraid to really go for it.

One other thing to note is the lack of content. You’re not distracted by sidebars, notices or extra navigation items — there are only a few items on the page, focusing your attention and making the decision of where to go next easier.

Microsoft has a different approach to their homepage. Firstly, they feature a similar style of ad at the top, designed to be attention grabbing. These are large images, but only one out of 3 ads is shown at a time — you have to hover over the other two to expand them. This focuses attention, but may potentially weaken the effectiveness of the two hidden ads since the visitor has to work to see them. Right at the top of the page is the navigation, together with search.

What’s below the main ads is more interesting though. As I mentioned previously, Microsoft’s business operates in many markets, including both business to business and business to consumer.

The space below acts as a set of highlights and news for these various areas of the business. One big problem with the content featured here is that it’s fairly boring and overwhelming, with a lot of information packed into a very small space, without anything try to make it scannable.

Sure, it’s broken down into bullet points, but the font is small and there are hardly any images to differentiate between the items. As it stands, there is little to attract me to make me want to read through this content because it’s just, well… boring.

2. Flow

What I mean by flow is this: is the site structured and laid out in such a way that I can easily find items to focus on? Do I know what to read after I focus on those items — is the site design directing me across the page with less effort on my part, or do I have to work to try and navigate around the content to find what I need?

Here’s the MobileMe section on Apple.com:

I think Apple has done a great job at structuring all of their pages. Here, the first thing you focus on is probably the picture on the right and then the large headline on the left.

After you’ve read the headline you can proceed to read the marketing blurb below, which leads nicely into a call to action signup button for the free trial. If you’re not interested in the trial, there are more features below to persuade you, each one ending with a “Learn more” link to a more detailed feature page. This leaves no dead ends and keeps the user browsing.

Microsoft seems hit and miss in this department. Here’s the SharePoint section:

Yes, there is a focal point at the top that grabs your attention — the large quote and the image of a server — but what’s next?

All of the content below is extremely monotonous, especially the “Learn More” box with a list of 8 links. The dry presentation gives the user less incentive to click around. Some Microsoft sites use better layout to direct the flow of attention, but they generally all suffer from the same illness: too much content.

When you present the user with too many choices, you make them work — they have to think about what they want and they have to process more information. By reducing choice, Apple directs the users through a more carefully designed funnel, which generally delivers a better experience.

3. Navigation

Apple’s website has a large navigation bar at the top, which remains there consistently whichever section of the site you go to.

The options available show the main sections split by its lines of business as well as a couple of essentials, such as support and the store. The bar also integrates search and branding as the home button displays the Apple logo instead of a label.

Any extra sub-navigation is located on individual site pages and is placed within the context of that page, whether on a sidebar, or as a horizontal bar at the top.

Microsoft has a similar navigation bar on the homepage, but that navigation bar is not consistent across the site. Actually, all of the sub-pages tend to use their own navigation bar, in style and in content. The homepage navigation thus acts as a site map to the rest of the Microsoft website sections.

In a lot of the navigation bars, including the one on the homepage, Microsoft uses drop-down menus — unlike Apple. They don’t just use drop-down menus — they use huge drop-down menus. In some cases, the menu even has a scrollbar (in Firefox):

Is this good or bad? In a recent Alertbox entry, Jakob Nielsen, a well known usability guru, has written that mega drop-down menus can work.

They work because they present a lot of choices in groups, so they allow for easier scanning as you can jump to the group that you want and scan the items inside them. You have to get certain things right though, like the order of the groups and only mentioning each element once, for them to work well.

In this case, I think it makes sense for Microsoft to go the route of the drop-down menus, but I feel that they may have gone a little too far. For example, some options point to the same thing, like the ‘Office’ drop down and ‘Office’ option in the ‘All Products’ drop down.

The drop-down also blocks the content below, so if you accidentally moused over the menu, you have to mouse off from it again to get to the content below — all the while being careful not to hover over other items.

There are also a lot of options under each group — sometimes showing about 13 items, which makes processing the options much more difficult. Also, the inconsistency of navigation across the different sections makes it much harder to jump from one area of the site to another, e.g from the Office site to the Xbox site.

4. Readability

Because most of the content on the sites is text, it’s vital to ensure that everything is readable and legible. Here are the main things to consider when working on readability of your site’s content:

* Make the text large enough so that it’s easy to see and read.
* Ensure that there is enough contrast between the text and background.
* Provide enough white space around the text to keep other content and graphics from distracting the reader.
* Provide plenty of headings or highlighted/bold text to allow users to quickly scan the content for key information.
* Add images and icons to make it easier to focus on individual sections of the text, i.e. product or feature descriptions.
* Keep the text short and to the point.

Let’s see how Microsoft and Apple fare in this area. Here’s a typical page on the Apple.com website:

Apple does a great job of keeping everything easy to read. The text is generally small, but never too small so as to be a problem. Headings are set in heavier type and stand out, allowing you to quickly get the gist of each section.

Apple also makes heavy use of white space to separate everything apart and adds images to make each text blurb more interesting.

Here’s a typical page from Microsoft.com from the Windows section:

It follows the general usability guidelines by breaking things down into small bite size pieces of text that are easy to digest. It looks a lot busier than the Apple site because there is more content on one page and there are many different treatments for headings and highlighted words.

Too much variety causes visual chaos on the page, with each different colored or bold item competing for your attention. In this case, the page really needs to be simplified to make it easier for the viewer to process.

Here’s another page, this time from the Microsoft security section:

The text on this page is probably a little too small to be comfortable to read, and the site needs more white space around the content to separate the text. Let’s see what a really busy page on Apple’s site looks like:

This is the Apple store. Really busy with lots of products and category links everywhere. Fonts get pretty small to allow more content to fit in, although good use of white space ensures things are still usable.

5. Search

Apple’s search is integrated into the navigation bar. When you type something in the search box you actually get live search results with AJAX, by way of a little box which pops up, showing you the results as you type.

It’s very well done — there is no lag when typing, the results are grouped in categories and are fetched very quickly, usually before you finish typing your full query. Here’s what it looks like:

If you want to see more results you can just hit Enter when you’ve finished typing and you’ll be taken to the standard search results page. It’s very clean and organized by categories.

You can drill the results further down by category, selectable from the menu on the right. It’s functional and clean, and works well when you’re trying to find any products that they sell.

Microsoft has a more familiar search results page that looks a lot like Google (or any other search engine these days).

That’s because it uses Microsoft’s own Live search engine. It’s certainly good at finding what you’re looking for and got the results that I wanted. The format of the results is one big list, which makes sense for Microsoft because of the nature of their business, with a lot of sub-pages and different content to search through.

It’s functional, but the look and feel is different to the other pages, which makes it look like you’re browsing a different website.

6. Aesthetics

Apple’s website aesthetics closely mirrors that of its product line. The navigation bar looks like it’s crafted out of aluminum and features gentle gradients and indented text.

There are also plenty of reflections and minimalist design elements. Apple has always worked on unifying the look and feel of its interface across its entire product line, from the hardware to software, and their website is no exception.

Do aesthetics have anything to do with usability? Actually, they do. Research shows that people perceive better looking interfaces as more usable.

Attractive interfaces will set better first impressions and may even make their users more tolerable to problems. So how does Microsoft fare in the aesthetics department? Here’s the Internet Explorer 8 page:

The site follows a faint Windows theme with the light blue clouds, but there is little else to say that this is a page for Internet Explorer or Windows.

The look and feel is very generic and doesn’t do enough to differentiate itself or build a coherent brand. Here’s another page; this is the Download Center:

Again, we have a completely different design, although the light blue color is used here too for the backgrounds. If there was no title on the page, could you tell that this is a Microsoft or Windows page? Probably not.

The designs are overall pretty good, but pretty good just isn’t enough. There are plenty of inconsistencies and a lack of polish, which puts Apple ahead in this area.

7. Consistency

Consistency is important because it allows you to develop usage patterns. This basically means that if your site has a consistent interface throughout, your visitors will quickly learn how it works and will be able to use this knowledge in any of the new pages that they visit, since they’ll all be using the same, or very similar, interface.

Apple does a great job of keeping the interface consistent. All of the product pages feature very similar aesthetics and are structured in the same way.

The whole site looks and feels the same throughout and the global navigation bar at the top is always there, on every page. This means that the entire experience is very unified and coherent — you know you’re on the same website wherever you go.

Here’s a Microsoft page for the Azure platform:

Could you tell that this is a Microsoft page if you took away their logo? Custom graphics, styles and color palettes across all the Microsoft sections help little to maintain a coherent brand image on the web.

Microsoft really struggles here. There are many different sections across Microsoft.com and they all feature their own look and feel, including their own navigation.

So once you go to a section on their site, be it the Microsoft store, the Office site, or the Security pages, they will all look and feel like separate websites.

What’s worse, the global navigation bar is also gone, meaning that you have to go back to the homepage, or the site map, to see an overview of all of their sites. It’s really an ecosystem of websites hosted under the same domain and therefore it doesn’t get the benefit of consistency that Apple has. The brand image is also terribly fragmented making it impossible to define what a Microsoft site looks like.

Conclusion

Which site is the winner? If you’re looking at usability alone, Apple comes out ahead. They have a better designed homepage that offers less choice, which means the user needs to think less.

They have consistent navigation across all of their pages. They use a lot of white space and sub-headings to make everything more readable, yet they keep things simple by not overusing too many different text treatments.

The Apple site is generally more user friendly and offers a much better experience to consumers who use it to check out Apple’s latest products.

Having said this, the Apple website is much smaller in scale than Microsoft’s site. Unlike Apple, Microsoft hosts many different sites and sections under the Microsoft.com brand, creating a whole ecosystem of sub-sites. Each site is packed with information and the Live powered search that Microsoft offers tends to yield good results. The biggest problem for Microsoft is consistency.

Microsoft just doesn’t have a consistent, coherent and unified brand. Every section looks and feels different. There is no global navigation and there are not many visual clues that tell the user that this is a Microsoft site — unlike Apple, where the whole site shares one unique aesthetic that mirrors that of their hardware and software, thus creating a powerful brand.

For these reasons, I think Apple is the clear winner here.
Tags - apple , microsoft , ui , web

2009年网页设计10大新趋势

Sun, 31 May 2009 01:11:38 +0000

网页设计是一个急速发展的新媒体，它的快餐式文化，使得网页设计在不断的尝试更新的设计理念，带给用户更多新鲜感。在过去的几个月，2009网页设计10大新趋势被确定。在这概况，你会发现审查每个趋势都有更加具体的举例，从中带给你更多灵感，激发你的下一个项目。

1. Letterpress 凸版效果

一个意料之外的趋势是，凸版效果( Letterpress，也就是我们的篆刻中的阴文效果 )。这样的趋势，可能是因为一个简单的原因，因为这个技术很少被人使用。我们发现这种技术通过不同的样式应用在不同的网站上，多位在线服务网站。

2. Rich UI 交互式用户界面

令人感到欣喜，现代的网站用户界面已经逐渐变得更漂亮和更加易用。过去的几年中，这些基于网页的应用有了惊人的进步，这些交互式用户界面越来越像传统的桌面应用了。Ajax以及Flash技术的大量使用提供了用户各种非常炫目，强大的网页应用。

更看到一些特别之处，这些年我们发现网页上有了更多的空白空间，页面元素间的间距也变得越来越大。我们也观察到，越来越多的站点开始在页面上提供直观的用户动作响应。比如，页面上的按钮会根据用户的动作，比如点击响应不同的状态表示“ 正常”和“按下”状态。而且很多网站开始根据不同的用户产生不同的响应。所以我们断言，自适应用户界面将会在2009年流行起来。

3. PNG透明图片

PNG透明图片效果，尽管不被古老的IE6支持，但似乎在去年变得流行起来。但是这种半透明的背景效果却是设计师们一直希望拥有的特性。这种背景通常被用在头部和页脚处，但是有一些设计却跳出了这种窠臼。

4. 大尺寸的文字排版

在2009年，这样的潮流将继续流行下去，尤其是设计师网站，个人Portfolio网站以及在线服务类网站，将会采用这样的方式传递给用户最重要的信息。

这样的效果一般会将字号控制在36px以下，设计师们投入了更多的精力在文字排版的细节上，由此可见，网页将会变得更加漂亮，更加一致以及看上去更加让人可信。

5. 字体替换技术

设计师花了非常多的精力在页面排版上，同样的也花了很多精力在字体选择上，除了传统的那些经典字体，（也是我们仅有的安全选择）很多设计师开始采用字体替换技术，也就是我们之前有提到的（sIFR）。

这些字体能大大提供网页的视觉效果，但是在中文世界中，这项技术遇到了前所未有的难题，汉字不是拼音文字，一个字体就可能有几兆，根本无法简单的使用这些技术来替换，也许文字图片替换法是目前中文的唯一选择。

[/color]
6. 模式窗口（LightBox技术）

模式窗口技术，作为第二代弹出内容技术。模式窗口（ LightBox技术介绍）能够很好的代替原来的 Javascript弹出窗口，提供更加友好的用户体验，并且引导用户的关注点集中到最重要的区域上来。通常由用户的点击触发，类似于传统的桌面应用。多数情况下，这些弹出窗口都带有深色半透明的背景和一个关闭按钮。

7. 多媒体模块
随着宽带的普及，现在的用户已经能够接受更多的内容，所以设计师们能够利用这样的契机使用一些更加吸引人的展示方式。因此很多网站开始引入多媒体内容（比如视频和屏幕录像）。这有助于迅速有效的让用户消化接受你想传递的信息。

这些视频能够很好的讲解你的网站的每一个步骤，不再需要多次点击，搜索，或者学习如何导航。通常这些视频长度都不会太长，但是内容要保持完整。

注意，绝对不能让这些多媒体内容成为你网站的全部或者是必不可少的部分，毕竟不是所有的用户拥有良好的网络条件，抑或是有些用户并不希望这种形式，有可能他正在机器上收听音乐或其他视频。

8. 杂志风格样式

在博客类网站设计中，一个趣的现象是很多技巧都是取自于传统（印刷）媒体设计。包括文章的组织，页面的排版，插图甚至于文字的对齐方式都和传统印刷媒体越来越接近。Grid-Based（网格化）设计方式在产品网站，博客以及个人工作室网站得到了广泛的应用，但是在企业站点或者在线商店中还未有出现。

9. 幻灯片形式

Carousel，也就是幻灯片导航形式，内容水平或者垂直滚动。通常有两个导航元素来控制滚动方向，以及滚动内容。

这种形式的好处是，用户可以不用多次点击来搜寻他们感兴趣的内容，可以快速的通过滚动幻灯片来浏览希望他们注意的内容。这种形式多用于娱乐站点，或者是一些大型博客。是一种非常吸引眼球的展示方式。

10. 内容介绍模块

页面的左上角是网页上最重要的一块地方，因为最吸引用户的眼球。所以我们可以将最重要的信息放在那里展示，用户也能在第一时间获取这些信息。

对于很多个人工作室网站，或者是产品类的网站，都很好的使用了这个区域来展示内容介绍，相反在博客或者是在线商店类网站上几乎看不到这种方式。

Tags - web , design , css , inspiration

NBA all-star logos show

Sat, 16 May 2009 15:25:39 +0000

最近偶然看到2010年NBA all star的logo，顿时就觉得很喜欢，因为以前就一直认为美国人设计的logo很独特，色彩很鲜艳，商业味道很重。NBA之所以能够成为世界上最成功的赛事之一，有很大的成分来自于整体的形象设计包装。all star的设计就是其中一个非常有影响力的活动。从90年代NBA开始对全明星赛事有了具体的形象设计，东道主可以根据自己球队的特点设计出代表自身个性的logo。除了NBA，在美国还有像NHL(全美冰球联盟)，MLB(全美职业棒球联赛)等赛事都有类似的宣传设计。

2010年的全明星赛在达拉斯进行，因此logo无论是色彩还是字体，风格都展现了东道主达拉斯小牛队的特点。

我很喜欢这个牛仔帽的设计，呵呵



09年的all star logo，位于美国南部的菲尼克斯，沙漠、仙人掌成为主要的视觉元素。

08年的all star logo, 除了鸡翅，新奥尔良应该也是一个有音乐氛围的城市吧。

07年的all star logo最具特点，赌城的灯箱一下子就让人知道这里是拉斯维加斯。

06年的all star logo很火箭


05年的all star logo，色彩和字体几乎和东道主丹佛掘金队的视觉元素一摸一样。

赛事赞助商的logo

Tags - basketball , nba , all-star , logo , america

10 Incredible Wallpapers from Desktopography

Mon, 04 May 2009 14:43:33 +0000

A good way to start up a new week is to give your desktop a new look, no better way to do that than choosing one of the 10 incredible wallpapers from desktopography. They have the best selection of wallpaper I have ever seen and I have been using them for quite a while. Check them out and pick the ones you like the most, enjoy!

Photosynthesis

By Marian Rupp

Blue Moon

By Microbot

Lush

By Jerico Santander and Nik Ainley

Suburban Fantasy

By Jeff Huang and Jerico Santander

Zeroonethree A

By Matt Apostolescu

The Roadside Daydream

By Justin Maller

Memoir

By Jeff J.Y Huang

Step forward little tommy

By Dopamin

One day, in the big city

By Justin Maller

CVRD

By Phillipp Schilling

Tags - wallpaper , inspiration

为民主而设计

Wed, 29 Apr 2009 13:32:18 +0000

不知道今天大家有没有看美国新总统奥巴马就职典礼，如果错过了没看，那么就看看选举背后美国图形艺术协会（AIGA）所做的工作吧，或许会更有意思。

1998年， AIGA Design for Democracy （为民主设计）成立，旨在通过设计加强政府沟通手段的效果和效率，增强民众与政府间的互信以及民众的参与度。AIGA Design for Democracy 在2000年在伊利诺伊州的次级选举上小试身手之后，在2005年正式与美国选举协助委员会（EAC）合作，参与到全国的选举上来。

2000年佛罗里达州棕榈滩县的选票。Image by Sun-sentinel Graphic with modifications

AIGA Design for Democracy 最影响力的设计是对选票的重新设计。或许2000年选票设计的引起的风波还有人记得，当年因为佛罗里达州棕榈滩县的选票设计由于候选人序列和打孔点设计上不清晰，误导了部分选民，部分导致戈尔的失利，联系布什当选后的种种，倘若设计真的是关键原因的话，那么“设计失误导致整个世界遭了八年布什罪”的结论显得并不会太离谱，这大概也是史上糟糕的设计所带来的最大代价。

新旧选票对比。Image: AIGA Design for Democracy

左图是根据2004年各州大选选票的设计问题综合出来的一张样票，其中问题包括措辞繁琐模糊（比如用书面文和大量双重否定等）；文字大写和排版失误导致不清晰、可读性差；使用政党标志具有误导性；没有页码等等。还有的选票底端提醒投票者莫忘反面的警示语竟然是：停！（Stop）右图是 AIGA 设计的新选票，设计的清晰和易用性显而易见。重新设计包括了清晰的颜色区分，用了大量小写字体和优化的排版，去掉了政党标志，使用了简单的语言，增加了页码等等。

投票站双语导航设计。Image: AIGA Design for Democracy

屏幕投票 UI 界面设计。Image: AIGA Design for Democracy

AIGA 为 CEA 提交的长达266页的设计指导中还包括了投票站的导航设计和屏幕投票的 UI 界面设计，包括了英文和西班牙语、中文的样本。AIGA 还提供了选举设计的十个建议，也不妨成为其他公共设计的良好样本，供参考：

用小写字母：比大写字母更具可读性。

避免居中文字：居左的文字可读性更强，跳行较易。

用尺寸够大的字：可读性更强，读起来更舒服。打印文件最小12号字，屏幕最小25号字。

选择一个黑体（非衬线体）：避免使用新字体，使用笔画清晰的非衬线体，比如 Arial、Univers 和 Verdana。两种语言时，主要语言用粗体。

提供清晰的指引和导航：指引包括提供页码。屏幕设计提供语言和模式选择，确保用户始终可以得到指引，在投票站设计清晰的导航系统和指引资料。

使用清晰简单的语言：使用尽可能简单清楚的语言表达指引。一份文件中不要使用多于两种语言。

使用准确的指引图：避免使用照片，绘制指引图必须准确无误，避免误导投票者。

仅使用信息图标：避免使用政党标志。

使用对比和颜色：同时保持一致性，但颜色不能成为重要信息的唯一表达渠道。

决定信息主次：版面设计和文字大小要分清主次。

Tags - democracy , american , obama

新浪网启用新品牌标识

Tue, 21 Apr 2009 14:57:34 +0000

在新浪成立10周年之际，新浪网站上的品牌标识已经悄然更换一新。全新品牌标识的发布，体现了拥有10年历史积淀的新浪，将迎来全新发展阶段，全面呈现出新时期品牌内涵和经营理念。

与新浪此前沿用多年的品牌标识相比，新标识色彩与设计更为大气、灵动、亲切、时尚，让用户有一种喜悦亲近的感觉，新标志中的眼睛显得更加灵活，象征着网友可以通过新浪平台，更好地了解世界、洞察万象。

除此之外，顶着大眼睛的“i”，在新标识中形似一个麦克风，暗喻了新浪将为网友提供一个放大自身影响力的平台，网友可以通过这个平台，影响世界。

我觉得最大的变化还是字体，旧版的字体只是字库里的字体，类似于汉仪或者方正的字体做了一下倾斜的效果，我本人非常不赞成这样的设计，因为完全没有自身的特点和个性。新版的logo重新设计了字体，而且客观的说，这款字设计得没有什么缺点，很合理，很美观。

我现在也在设计“乐闻设计”的新logo，不知道什么时候能有一整块的时间把它顺利完成。

两处看似微妙的调整，巧妙地将新浪同时作为大众媒体平台和个人媒体平台的双重特性，很好表现了出来。记者注意到，新浪的品牌口号“一切由你开始”的字体明显加大，充分显示了新浪将网民需求和体验放在了更重要位置，喻示今后新浪网将以此为核心不断发展，在注重用户体验的同时，不断强化对用户多样化需求的满足。

从国际上知名企业发展历史来看，包括可口可乐和耐克在内众多企业，都会随着时代变迁以及业务变化，对品牌标识做适当调整。

新浪也同时表示，新标识发布，只是新浪整体变革战略中的第一步，后续还将通过实施一系列产品战略，来实现用户体验提升。新标识和“一切由你开始”的品牌战略，将不仅适用于现有的新浪，同时也将适用于合并分众以后的新浪。

新浪CEO兼总裁曹国伟对中国经济时报表示：“新浪一直非常重视用户需求和使用体验，并在过去十年中，坚持不懈努力创新，为用户提供更好的产品和服务。如今，新浪已经成为最具影响力平台，很多网友在这个平台上解决了需求、实现了梦想，但新浪并未就此满足，更换logo只是新十年的一个开始，后续新浪将会带给用户更多新惊喜。”

业内人士分析表示，以往用户对新浪的印象更多是权威、严肃和大气，此次新浪调整，很好体现了新浪在产品和服务方面的创新，在一定程度上拉近了与用户之间的距离。

新旧Logo对比
注：以上信息图片转自Reeckdesign

Tags - sina , logo

奥巴马的形象设计之路

Thu, 09 Apr 2009 13:13:18 +0000

Finally he wins!
最终，他获胜了！

视觉形象设计在一场总统选举中能发挥多大的作用？这似乎很难被评定。
但反过来，获胜的奥巴马在个人竞选标志、口号甚至字体方面仿佛都有过人之处。
起码，他在竞选的时候更细心，或者说他更会“利用”设计。

无论最终的胜者是谁，
在美国总统候选人的视觉形象设计方面，
巴拉克·奥巴马已经铁定是最大的赢家了。
这里指的并不是奥巴马身体力行地积极戒烟、参与运动，而是他特别聘请的平面设计师团体。
这个设计团体为选举立下了汗马功劳。

给政治人物做VI设计风险巨大，对任何一个平面设计组织而言，
这都是件棘手的活。同样，对大多数政治家而言，
设计行业变化多端、风云莫测，冒险不得，稳扎稳打才是关键。
看看希拉里和麦凯恩老掉牙的VI套路吧。

希拉里的超级保守 “”图形由红、白、篮三色组成 (这招是美国国旗诞生以来延续至今的传统了，
用过的总统不下几十个)，她选择了用波形曲线收尾的老式衬线字体(有罗马字母式样的勾脚)，
象征着传统与庄重。当然，用这来体现她的个人形象也无可厚非。

相比较而言，麦凯恩的VI算是有点新意，他用黑、白、黄三色构成带有军队风格的五星，提醒选民自己的越战背景，效果也较为显著的——闪耀的五星释放出了麦凯恩的“男子气概”。

奥巴马却不拘泥于此。

深知VI设计重要性的他，拒绝了政治设计的惯例，
别出心裁地邀请了一群新锐设计力量充当 VI设计的主力。
在平面设计师乔纳森·胡福勒(Jonathan Hoefler)看来，

“没有比奥巴马更会利用设计的人了”

除了仿照切·格瓦拉的形象，将奥巴马的头像制作成波普风格的海报等显而易见的大动作外，
设计团体还进行了大量细致入微而又不乏冒险精神的工作。

他们的目标是色彩、图形和字体要面面俱到，
无论它们出现在横幅、印刷品或者网站上，
都能触发选民们对奥巴马的好感。

在色彩上，奥巴马的团队选择的仍是美国国旗上的红、白、蓝三色，
并用其中最为令人放松的蓝色做底色，显然是为了消除选民对奥巴马相对缺乏经验的怀疑。

图形方面，一个太阳在美国国旗的红色条纹中冉冉升起，
“这非常形象，象征着希望、变化以及一个新的政治时代”，
艾克瑟洛德解释道。同时，这个近似“O”的图形还是奥巴马名字的首字母。
奥巴马的竞选口号是“改变就是我们的信念” (Change We Can Believe In)，
显然，如果一切都能重新开始，那么初升的红日就是最好的鼓励，一切都顺理成章。

值得一提的是，1983年，哈诺德·华盛顿(Harold Washington)
成功当选芝加哥首位黑人市长时，用的也是一个“日出”图形。

接着是字体。与希拉里的选择截然相反，奥巴马既放弃了衬底，
也不喜欢波形曲线收尾，他使用的字体看上去庄重又不失青春活力；
字母要么全大写，要么全小写，从而显得更友好。

随着竞选的发展，
奥巴马的VI中使用到的字母逐渐转变为全大写，
看上去更权威，字体则十分明智地从原先英国设计师
埃里克·吉尔(Eric Gill)20世纪早期发明的Gil Sans变成了更为时髦的美国现代字体Gotham。
人们都为此欢欣雀跃，Gotham字体“简直就是充满活力而又忠心耿耿的美国公仆的完美写照”。
受到上世纪4 0年代纽约盛行的手写字体的启发，
设计师乔纳森·胡福勒和托比亚斯·弗雷里-琼斯(Tobias Frere Jones)
在2000年为《GQ》杂志首创了“Gotham”字体，随后，
它们不仅被频繁地使用在有机食物的包装上，更被印刻到矗立在纽约世贸大厦
遗址上的自由塔奠基石上。选民们不是字体研究学者，
然而只需瞥一眼奥巴马横幅上的“Change”，
“Gotham”字体那种仿佛与生俱来的正义感、
责任感以及对“美国往事”的怀旧之情便会散发开来。

希拉里和麦凯恩都选择以不变应万变的VI, 以期给选民留下固定印象，
奥巴马则反其道而行之，以获取与每一群细分的选民的有效沟通。

艾克瑟洛德说：“在WEB2.0时代，我们要应对的是个性化的VI需求。”
出席各种不同场合都能随机应变，这就是奥巴马所谓“流动的VI”，
即便是在MTV颁奖礼或纽约第五大道上的Saks百货公司，
奥巴马的VI 都足够吸引眼球；而回到一本正经的市政厅会议，
奥巴马的VI又能从容“变身”，不至于“失体统”。

除了为每个州的选民定制化地设计了相应的“州标”外，
在奥巴马的个人网站barackobama.com上，针对各种族群以及
对各种事务持不同政见的选民，也会演绎出相应的标识图案。
比如环保主义者(Environmentalists for Obama)页中，
Logo变成黄色日光照耀下的绿色田野；

在孩子(Kids for Obama)的页面中，Logo变成用手写笔涂鸦的样子；

而在美国黑人(African Americans for Obama)那一页，
常规的奥巴马Logo后出现了隐隐约约的一大群人，你没法仔细辨认其中的任何面孔。

这些纷繁的变体设计，似乎也从另一方面印证了当代美国生活的复杂。
事实上，对奥巴马在设计中的良苦用心以及设计团队的殚精竭虑，
选民们用不着去一一解码，其效用不正在于最直接地获得选民们的好感吗？
无论如何得体的设计，正确的传达出奥巴马团队在不同阶段的需求，
获得了选民的认可，因此奥巴马也在公开场合表示对设计团队的感谢：

“是他们让美国选民认识了真实的奥巴马！”
Tags - vi , obama

The posters of HarryPotter VI

Sun, 05 Apr 2009 07:40:16 +0000

Tags - harryporter , poster

温哥华2010冬奥会主题海报欣赏

Tue, 17 Feb 2009 14:40:13 +0000

我很喜欢温哥华冬奥会的整体宣传的效果，色彩很和谐，显得很轻松很干净，有兴趣的朋友可以去官网上瞧瞧，它们的颜色虽然很丰富但是一点也不乱，处理的很到位，不会很突兀。
这些海报只是整体设计的一部分，所有的图形都是在illustrator里画的，都是很富创意的作品！官网上有一个视频介绍了这套海报设计的全过程。

http://www.vancouver2010.com

Tags - olympic , poster , vancouver , 2010 , illustrations