Metro 界面的设计灵感来源

openkk 11年前
     <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>