Metro 界面的设计灵感来源
openkk 13年前
<p> Windows Phone 平台上引以为豪的 Metro 界面设计风格和这 30 年来平面设计理念的进化有着密不可分的联系。</p> <p> 去年，Windows Phone 创意总监 Mike Kruseniski 写了一篇<a href="/misc/goto?guid=4958329105368152003">长文</a>，谈论交互设计的未来。我今天这篇文章其实是对他的谈话进行了浓缩。如果有时间，你可以读一下整篇文章，文章很有趣。</p> <p style="text-align:center;"><a><img title="example_-_4_-_windows_phone_app" alt="Metro 界面的设计灵感来源" src="https://simg.open-open.com/show/b3ee9bdebfa8fa392714523a86d4c738.jpg" width="465" height="372" /></a></p> <p> <strong>奇怪的桌面</strong></p> <p> 如果看一下你的电脑屏幕，你会发现它其实是在模仿一个真实的桌面环境。</p> <p style="text-align:center;"><a><img title="desktop_-_7_-_macintosh" alt="Metro 界面的设计灵感来源" src="https://simg.open-open.com/show/9ebef2101940af8bdc28693646261664.jpg" width="465" height="372" /></a></p> <p> 从 Xerox 上的第一个图形用户界面实验开始，设计师始终从现实文具那里寻找灵感。</p> <p> 日历看起来像是那种现在已经看不见的一日一撕的旧式日历。记事本像一个扣眼活页夹。在 Mac 电脑上，我的文字处理软件 Pages 的形象就是一瓶墨水加上旧式的墨水笔。</p> <p> 设计师试图让计算机界面更加让人们熟悉，更直观。人们从一个到处是纸张、文件夹和公文柜的旧世界来到了一个全新的计算世界。</p> <p> 界面设计师想描绘一种新动作时，例如“确认”按钮，他们让这个按钮采用斜面并且有阴影，看起来就像是一个按钮，让人们明白他们需要按这个按钮。</p> <p> <strong>30 年之后</strong></p> <p> 如今，相比以前，设计师拥有更大的自由度。大多数人经过几十年的使用，已经能与计算机屏幕进行很好地互动。</p> <p> 但是奇怪的是，大量最新的界面仅仅是让桌面图标看起来更加友好，而不是让人感到新鲜。</p> <p style="text-align:center;"><a><img title="desktop_-_17_-_hp_touchsmart" alt="Metro 界面的设计灵感来源" src="https://simg.open-open.com/show/09a766dbdaccd98721b23ae5653d06f5.jpg" width="465" height="372" /></a></p> <p> 电子书不需要书皮、A5 比例和厚度感让我们知道我们要做的事情。电子书肯定不需要放到计算机模拟的木质书柜里。如果你读电子书，你会知道书本的封面或装订并不重要，书里的字和图片才是主旨。</p> <p> 对于大多数电子内容，设计师并没有很多可以借鉴的物理形象。例如网页就没有模仿现实世界的东西。</p> <p> 通常使用的物理形象很容易让人误会：计算机的文档系统与真实世界的文件柜之间相似性甚小。真实世界的垃圾桶无法像电脑屏幕上的那样远程操控。</p> <p> <strong>审视过去</strong></p> <p> 也许我们需要重新考虑交互设计。为此，研究一下发展时间更长、更加成熟的平面设计肯定大有裨益。</p> <p style="text-align:center;"><a><img title="1962-poster" alt="Metro 界面的设计灵感来源" src="https://simg.open-open.com/show/71719db114c5cab2e39f93fee45be482.jpg" width="465" height="372" /></a></p> <p> 交互设计师以前常说平面设计的规则并不适合数字世界。但是这不真实。</p> <p> 尤其是，我们可以思考一下上世纪 50 年代的<a href="/misc/goto?guid=4958329106179001552">国际风格</a>（或瑞士风格）运动。当时的设计师和印刷工人觉得受够了，认为是时候扔掉常见的过多装饰和凌乱，回归基本原则：</p> <p> <strong>使用网格构筑层级和结构</strong></p> <p> 利用网格能让网站、网页和应用更便于使用，减少复杂度，提升易读性。</p> <p> <strong>自信的使用留白</strong></p> <p> 很多交互式设计都希望在空间中尽可能多地放东西。使用更多空白空间能让用户关注关键信息和动作。</p> <p> <strong>减少元素</strong></p> <p> 用户界面元素让内容凌乱。“从信息密度上失去的东西可以从简约性那里拿回来”。</p> <p> <strong>强调排版</strong></p> <p> 《<a href="/misc/goto?guid=4958329106970549891" target="_blank">掌握网页排版窍门</a>》的作者 Diogo Terror 写到：</p> <p> 字体大小是一个确保可读性、影响和节奏的工具。不同的字体大小不仅能产生视觉冲击，而且还能为读者提供被显示数据的层级。大字是进入点，是内容信息架构和页面层级的顶层元素。这是一种引导读者的眼睛浏览页面的好方法，就像是内容的界面。</p> <p> <strong>比例和空间</strong></p> <p> 在平面媒体行业，元素的比例能让一则故事随着时间慢慢展开。比例引导着眼睛浏览内容的方向，为信息带来性格。</p> <p> <strong>通用图形</strong></p> <p> 设计师对漂亮、独特的图标有点过度担忧。如果每个人都使用相同的惯例，那么可用性会得到提升。</p> <p style="text-align:center;"><a><img title="example_-_6_-_nike_betterworld" alt="Metro 界面的设计灵感来源" src="https://simg.open-open.com/show/07ea17c731f5ecf761f1d20b33d4f55b.jpg" width="465" height="372" /></a></p> <p> Windows Phone 7 很明显就采用这种思维，但是这种思维背后有更大的寓意。全世界都在反对最近几年交互设计方面凌乱和装饰化的趋势。看一下流行的产品你就能产生更深的理解，如 <a href="/misc/goto?guid=4958322454885198066" target="_blank">Flipboard</a>、<a href="/misc/goto?guid=4958329108495120106">Instapaper</a> 和 <a href="/misc/goto?guid=4958329109288055308">Readability</a>。网站也有类似的情况，如 <a href="/misc/goto?guid=4958329110090564141">Adobe</a> 或 <a href="/misc/goto?guid=4958187486065905943" target="_blank">Nike Better World</a> 微网站。</p> <p> Kruseniski 总结到：</p> <p> 作为交互设计师，我们可以停止打磨我们的图标，通过清晰、时尚的方式关注传达的内容。回报很简单，它将能够带来更多易于使用的漂亮产品，产生美妙的品牌体验，并留下更多自我表达的空间。</p> <p> 你有何看法？你是否同意<strong><em>少即是多</em></strong>成为移动和计算机屏幕的流行趋势？或者你喜欢凌乱的感觉？</p> <em>阅读</em> <em>Mike Kruzeniski </em> <em>的</em> <em><a href="/misc/goto?guid=4958329105368152003" target="_blank">原始文章</a></em> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958329112343120108" target="_blank">blog.nokia.com.cn</a> </div>