帮你做出优秀web设计的10项原则
fmms 13年前
<p> by Lisober</p> <p> <strong> Dieter Rams 是 20 世纪最重要的设计大师之一，其闻名遐迩的优秀设计应具备的 10 项原则侧重于工业设计。Lisbon 的设计师 NunoLoureiro 把这 10 项原则运用到 web 设计中，并在这篇文章中，谈到了一些他的心得。</strong></p> <p> “我倾心于细节，在我看来，它比整体更重要。细节必不可少，它决定一切，同时它也是质量的保证。”—Dieter Rams</p> <p> 在大学期间，我第一次见到 Dieter Rams 的作品，就被迷住了，那是 Dieter Rams 20世纪 50 年代开始为 Braun 设计的非凡的作品。</p> <p> 他能够为我们使用家用电器的方式掀起一场革命，现在我们仍然把它作为现代世界的设计灵感，最好例子就是 Apple。Apple 的许多畅销产品的核心功能都采用了 Dieter Rams 的设计原则。</p> <p> Dieter Rams 最著名的设计思想是优秀设计的 10 项原则，这些原则通常用来做出好的设计或对其进行归类。这些原则包含了在创建项目的时候设计师需要考虑到的问题，但是这些原则最适用于工业设计，因为 Dieter Rams 正是在这个领域做出了非同寻常的作品，并得出了这些灵感。</p> <p> 这些原则并不是古板的戒律，并不是不能变通的，这些只是准则，帮助定位一个优秀的设计是什么样的。</p> <p> 70年代中期，Rams 开始举办有关设计的讲座，并提出了六项原则，多年来他不断的改进，在 80 年代中期把这些原则“升级到”10项，现在仍然被人们推崇。</p> <p> 因此，为什么不能把这 10 项原则运用到像素世界中去呢？为什么不能把他们运用到 web 设计中去，同时讨论一下什么事优秀的 web 设计呢？</p> <p> 我通过自己在 web 设计领域中 8 年的工作经验和工业设计领域的背景学历，我虚心地把这 10 项原则运用到 web 设计中，并根据自己的顿悟使其更好的适用于 web 设计。</p> <p> <strong>1. 优秀的设计应该是创新的</strong></p> <p> 第一项原则同样也是 web 设计的基础—创新。设计者必须注意的是，在构思优秀的 web 设计，创新能够起到非常重要的作用。以下是两个基本点：</p> <p> 1. 在 UI 和图片设计方面，应该用创新的心态和批判性的思维对待每一个项目，并试图开阔自己的思维，发掘其它的分支。把创造力作为创新工具，来脱颖而出。</p> <p> 2. 多和身边的新人保持交流，不管是图片生成工具还是新的编程语言，多接触这些内容</p> <p> 管理创新是一项艰巨的任务，因为它总是不断的变化发展，但是要一直保持开阔的思维，尝试新的方式进行创造，只有像这样你才能够有多种途径做出优秀的 web 设计。</p> <p> <strong>2. 优秀的设计让产品更加实用</strong></p> <p> 何谓实用性网站，如何使网站具有可用性？</p> <p> 这一点描述起来有点棘手，因为在不同的人看来网站的可用性是不同，但是我想强调实用性网站的三个方面。</p> <p> 1有助于访客浏览网站：尽可能使访客毫不费力就找到他们想找的内容，用户界面的细节和信息的显示都能够使网站变得实用。</p> <p> 2 实用的内容：网站的内容是网站最有用的部分，如果不重视网站的内容，你就轻而易举地丢掉了提升网站实用性的一大法宝。</p> <p> 3 ：实用性网站的最后一点是你怎样编码你的网站，因为你需要考虑到网站优化和性能方面，以使网站实用。</p> <p> <strong>3. 优秀的设计富有美感</strong></p> <p> 对于一个网站来讲，美感是可视细节和实用性之间的平衡关系。一个富有美感的网站，不仅给用户提供非同寻常的体验，而且呈现出相关的内容。</p> <p> 单纯从面向设计的视角来看，有三点能够帮助设计者做出优秀且富有美感的 web 设计。</p> <p> 1. 颜色：谨慎对待色彩方案—它们给所有页面带来馨香。你可以尝试使用不用的组合，但是需要考虑到每种颜色的含义。如果你准备给不同的设备提供不同的体验，显示器上显示出的颜色不会比纸质的或某个物件上的颜色更好控制。</p> <p> 2. 网格、空间：在组织网站的基本结构时，你需要决定用户如何看到网站的内容—按照次序或网格，对待空白部分要尤其小心。信息的不同尺寸/对称性/次序决定人们如何解释这些内容。</p> <p> 3. 版式：显示文本的方式和字体的选择比一般人想象的更重要，能够阅读并且强调不同的内容取决于你为网站选择的版式。</p> <p> <strong>4. 优秀的设计使产品更简单易懂 </strong></p> <p> 为了确保网站易懂，你需要清醒地意识到目的，网站为了某些目标而进行设计。你需要保证网站的易用性，对于用户来说，怎样毫不费力地达到了他们的目的。</p> <p> 举个列子，如果你有一家网店，目的就是为了销售，因此，你的设计要尽可能简洁，小心改进浏览商品的体验和访客退出的方式。网站最好是一目了然的。</p> <p> <strong>5. 优秀的设计是谦虚的</strong></p> <p> 谦虚的网站必须要注意两大点：</p> <p> 1. 单纯从面向设计的观点看，Mies van der Rohe 有这么一则非常妙的格言：“少即是多。”的确，设计师很容易在装饰和图片细节中迷失，切记 不要这样！保持内容生动易懂—访客必须尽可能理解内容传递的信息，然后理解图片的细节，尽可能营造一种浏览网页的体验，而不是让访客感觉眼花缭乱。设计应 该是中性的。</p> <p> 2. 另一方面是辅助功能，在设计网站的时候，你必须清楚网站辅助功能的基本规则。</p> <p style="text-align:center;"><img style="width:568px;height:353px;" alt="帮你做出优秀web设计的10项原则" src="https://simg.open-open.com/show/64cea178c670d6650e0ee5b1e06b8881.jpg" /></p> <p> 伦敦的设计顾问 Bibliothèque 和生产商 Vitsœ 最近做了一张 7 色 A0 海报来庆祝 Rams 的 10 条关于优秀设计的原则。</p> <p> <strong>6. 优秀的设计是诚实的</strong></p> <p> 何谓诚实的网站？对于一个网站来说，所谓的诚实就是要对访客保持开放的态度，总是给他们提供几个选项以供选择，不要过分地强调你的设计的重要性。</p> <p> 举个例子：尽可能地阐述清楚某个选项或者按钮的目的，或者使用错误提示信息来指示错误的内容。</p> <p> 一个诚实的网站往往会提供工具来帮助用户达到他们的目的，一系列的选择、可视的链接和其它一些暗示会给用户满足他们所有可能的需要。</p> <p> <strong>7. 优秀的设计经得起岁月的考验</strong></p> <p> 对于网站是否经得起岁月的考验这个问题是存在争议的，但是这项原则可以毫不费力的应用到设计方面的趋势中去。换言之，web 设计中总存在着最新趋势。不要只跟随潮流，而不考虑你的设计中的根本性的改变。</p> <p> 网站的内容必须时刻保持最新，但是主要结构应该是可持续发展的，因此使用迭代设计来增强视觉体验，使用技术来</p> <p> 在 web 设计中，“可持续”跟现实中的“可持续”有些出入。最重要的是能够使用户喜欢你的设计，你也必须一直适应自己的工作，否则，这两方面会导致要重新设计，在我们这个时代，每两年就会出现一次这种情况。</p> <p> <strong>8. 优秀的设计考虑周到并且重视每一个细节</strong></p> <p> 这项原则，顾名思义，把你所有的精力都投入到设计中去，就像它是你生命中最重要的一部分。试图从不同的角度来探寻自己的想法，并且小心设计浏览网站的体验。</p> <p> <strong>9. 优秀的设计重视环境</strong></p> <p> 这一点做起来有些难度，我只指出优化的方法。在你设计网站的时候，不要大幅度地减少碳足迹，尽可能保留雨林。但是你要记住几点：</p> <p> 1. 缩减页面的规模。</p> <p> 2. 使用经过 web 优化的图片</p> <p> 3. 使用尽可能好的办法优化代码，使你的游览器使用更少的损耗正确显示你的网站。</p> <p> <strong>10. 优秀的设计是简洁的</strong></p> <p> 最后，并且必要的一点，这项原则确定了设计的好坏—要始终谨记你想法的目的，创建透明易用的系统。在设计网站的的时候，把重点放在其主要功能上，并保持它的简洁，使用户能够更好地理解。</p> <p> 使内容生动地显示出来，最好的设计是你感受到的，而不是理论上你支持的。</p> <p> 这些原则中传达出的最重要的信息之一就是我们是为人而设计。这是我们网站的最终目的，在创建新项目的时候，我们要时刻谨记这一点。就像 Rams 说的那样，“设计师是用户忠实的拥护者”，我们必须创造理性，同时也是感性的作品。</p> <p> 随着对 Dieter Rams 的作品的认识，你会不由自主地感觉振奋，开始创造出惊艳的作品，不管是哪个领域中的设计。</p> <p> 这就是我怎么把 20 世纪最著名的设计师之一的这些原则应用到新设计领域来的，数字领域和 web 设计。<br /> </p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958328412366258286" target="_blank">www.webapptrend.com</a> </div> <p></p>