阅读更多

0顶
0踩

Web前端

原创新闻 设计优秀 web 作品的 10 项原则

2012-02-08 10:28 by 正式记者 WebAppTrend 评论(1) 有3386人浏览
Dieter Rams是 20 世纪最重要的设计大师之一,其闻名遐迩的“优秀设计应具备的 10 项原则”侧重于工业设计。 Lisbon 的设计师 NunoLoureiro 把这 10 项原则运用到 web 设计中,并在这篇文章中,谈到了一些他的心得。

以下为原文:

“我倾心于细节,在我看来,它比整体更重要。细节必不可少,它决定一切,同时它也是质量的保证。”——Dieter Rams

在大学期间,我第一次见到Dieter Rams 的作品,就被迷住了,那是 Dieter Rams 20 世纪 50 年代开始为 Braun 设计的非凡的作品。

他能够为我们使用家用电器的方式掀起一场革命,现在我们仍然把它作为现代世界的设计灵感,最好例子就是Apple 。 Apple 的许多畅销产品的核心功能都采用了 Dieter Rams 的设计原则。

Dieter Rams最著名的设计思想是优秀设计的 10 项原则,这些原则通常用来做出好的设计或对其进行归类。这些原则包含了在创建项目的时候设计师需要考虑到的问题,但是这些原则最适用于工业设计,因为 Dieter Rams 正是在这个领域做出了非同寻常的作品,并得出了这些灵感。

这些原则并不是古板的戒律,并不是不能变通的,这些只是准则,帮助定位一个优秀的设计是什么样的。

70年代中期, Rams 开始举办有关设计的讲座,并提出了六项原则,多年来他不断的改进,在 80 年代中期把这些原则“升级到” 10 项,现在仍然被人们推崇。

因此,为什么不能把这10 项原则运用到像素世界中去呢?为什么不能把他们运用到 web 设计中去,同时讨论一下什么事优秀的 web 设计呢?

我通过自己在web 设计领域中 8 年的工作经验和工业设计领域的背景学历,我把这 10 项原则运用到 web 设计中,并根据自己的顿悟使其更好的适用于 web 设计。

1.  优秀的设计应该是创新的

第一项原则同样也是web 设计的基础 —— 创新。设计者必须注意的是,在构思优秀的 web 设计,创新能够起到非常重要的作用。以下是两个基本点:

  • 在 UI 和图片设计方面,应该用创新的心态和批判性的思维对待每一个项目,并试图开阔自己的思维,发掘其它的分支。把创造力作为创新工具,以脱颖而出。
  • 多和身边的新人保持交流,不管是图片生成工具还是新的编程语言,多接触这些内容。
管理创新是一项艰巨的任务,因为它总是不断的变化发展,但是要一直保持开阔的思维,尝试新的方式进行创造,只有像这样你才能够有多种途径做出优秀的web 设计。

2.  优秀的设计让产品更加实用

何谓实用性网站,如何使网站具有可用性?

这一点描述起来有点棘手,因为在不同的人看来网站的可用性是不同,但是我想强调实用性网站的三个方面。

  • 有助于访客浏览网站:尽可能使访客毫不费力就找到他们想找的内容,用户界面的细节和信息的显示都能够使网站变得实用。
  • 实用的内容:网站的内容是网站最有用的部分,如果不重视网站的内容,你就轻而易举地丢掉了提升网站实用性的一大法宝。
  • 实用性网站的最后一点是你怎样编码你的网站,因为你需要考虑到网站优化和性能方面,以使网站实用。
3.  优秀的设计富有美感

对于一个网站来讲,美感是可视细节和实用性之间的平衡关系。一个富有美感的网站,不仅给用户提供非同寻常的体验,而且可使网站更具实用性。

单纯从面向设计的视角来看,有三点能够帮助设计者做出优秀且富有美感的web设计。

  • 颜色:谨慎对待色彩方案——它们给所有页面带来美感。你可以尝试使用不用的组合,但是需要考虑到每种颜色的含义。如果你准备给不同的设备提供不同的体验,显示器上显示出的颜色不会比纸质的或某个物件上的颜色更好控制。
  • 网格、空间:在组织网站的基本结构时,你需要决定用户如何看到网站的内容 ——按照次序或网格,对待空白部分要尤其小心。信息的不同尺寸 / 对称性 / 次序取决于人们如何理解这些内容。
  • 版式:显示文本的方式和字体的选择比一般人想象的更重要,能够阅读并且强调不同的内容取决于你为网站选择的版式。
4.  优秀的设计使产品更简单易懂

为了确保网站易懂,你需要清醒地意识到目的——网站为了某些目标而进行设计。你需要保证网站的易用性,对于用户来说,怎样毫不费力地达到了他们的目的。

举个列子,如果你有一家网店,目的就是为了销售,因此,你的设计要尽可能简洁,小心改进浏览商品的体验和访客退出的方式。网站最好是一目了然的。

5.  优秀的设计是谦虚的

谦虚的网站必须要注意两大点:

  • 单纯从面向设计的观点看,Mies van der Rohe 有这么一则非常妙的格言:“少即是多。”的确,设计师很容易在装饰和图片细节中迷失,切记不要这样!保持内容生动易懂——访客必须尽可能理解内容传递的信息,然后理解图片的细节,尽可能营造一种浏览网页的体验,而不是让访客感觉眼花缭乱。设计应该是中性的。
  • 另一方面是辅助功能,在设计网站的时候,你必须清楚网站辅助功能的基本规则。
6.  优秀的设计是诚实的

何谓诚实的网站?对于一个网站来说,所谓的诚实就是要对访客保持开放的态度,总是给他们提供几个选项以供选择,不要过分地强调你的设计的重要性。

举个例子:尽可能地阐述清楚某个选项或者按钮的目的,或者使用错误提示信息来指示错误的内容。

一个诚实的网站往往会提供工具来帮助用户达到他们的目的,一系列的选择、可视的链接和其它一些暗示会给用户满足他们所有可能的需要。

7.  优秀的设计经得起岁月的考验

对于网站是否经得起岁月的考验这个问题是存在争议的,但是这项原则可以毫不费力的应用到设计方面的趋势中去。换言之,web 设计中总存在着最新趋势。不要只跟随潮流,而不考虑你的设计中的根本性的改变。

网站的内容必须时刻保持最新,但是主要结构应该是可持续发展的,因此使用迭代设计来增强视觉体验,使用技术来保持新鲜。

在web 设计中,“可持续”跟现实中的“可持续”有些出入。最重要的是能够使用户喜欢你的设计,你也必须一直适应自己的工作,否则,这两方面会导致要重新设计,在我们这个时代,每两年就会出现一次这种情况。

8.  优秀的设计考虑周到并且重视每一个细节

这项原则,顾名思义,把你所有的精力都投入到设计中去,就像它是你生命中最重要的一部分。试图从不同的角度来探寻自己的想法,并且小心设计浏览网站的体验。

9.  优秀的设计应重视“环保”

这一点做起来有些难度,我只指出优化的方法。但是你要记住几点:

  • 缩减页面的规模。
  • 使用经过web 优化的图片。
  • 使用尽可能好的办法优化代码,使浏览器使用更少的损耗正确显示你的网站。
10.  优秀的设计是简洁的

最后,并且必要的一点,这项原则确定了设计的好坏——要始终谨记你想法的目的,创建透明易用的系统。在设计网站的的时候,把重点放在其主要功能上,并保持它的简洁,使用户能够更好地理解。

使内容生动地显示出来,最好的设计是你感受到的,而不是理论上你支持的。

总结

这些原则中传达出的最重要的信息之一就是我们是为用户而设计。这是我们网站的最终目的,在创建新项目的时候,我们要时刻谨记这一点。就像Rams 说的那样,“设计师是用户忠实的拥护者”,我们必须创造理性,同时也是感性的作品。

随着对Dieter Rams 的作品的认识,你会不由自主地感觉振奋,开始创造出惊艳的作品,不管是哪个领域中的设计。

这就是我怎么把20 世纪最著名的设计师之一的这些原则应用到新设计领域——数字领域和 web 设计领域。

英文原文:Dieter Rams' 10 principles of good web design
0
0
评论 共 1 条 请登录后发表评论
1 楼 cry615 2012-02-10 11:18
挺不错,

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 什么是Dao层、Entity层、Service层、Servlet层、Utils层?

    基础知识整理......

  • 三层架构——实体

    日子一天天如流水般飞快,三层的项目虽然已经结束了,但是感觉对于三层还是要多多加深了解的。下面我们就来详细了解一下三层中的实体吧!

  • 解析Java框架中entity层,mapper层,service层,controller各层作用

    一、entity层 别名: model层 ,domain层 用途: 用于存放我们的实体类,与数据库中的属性值基本保持一致,实现set和get的方法。 例子:user表的实体user public class User { /** * 用户id */ @Id @GeneratedValue(strategy = GenerationType.IDENTIT...

  • 疑惑之实体层

    我们在进行机房收费系统时,已经接触到三层及一些实例,但是三层到底是什么?我理解的三层是:UI---界面、BLL---逻辑层、DAL--数据层。但是在做实例时有一个实体层:Entity---实体层          这就是我疑问的开始,为什么我们不叫做四层呢?实体层在三层中的作用是什么呢?带着这些疑问开始自己的学习之旅! 各方高见:         1.认为实体层只是一个辅助数据库映射

  • SpringBoot框架中的DAO层、Entity层、Service层、Controller层

    Controllerservice接口serviceImpldao接口daoImplmapperdb在具体的项目中,其流程为:Controller层调用Service层的方法,Service层调用Dao层中的方法,其中调用的参数是使用Entity层进行传递的。

  • java三层架构

    三层架构来源于后端开发的一种分层的思想。三层架构(3-tier architecture)通常意义上的三层架构就是将整个业务应用划分为:界面层(User Interface layer)、业务逻辑层(Business Logic Layer)、数据访问层(Data access layer)。区分层次的目的即为了“高内聚低耦合”的思想。在软件体系架构设计中,分层式结构是最常见,也是最重要的一种结构。微软推荐的分层式结构一般分为三层,从下至上分别为:数据访问层、业务逻辑层(又或称为领域层)、表示层。

  • 三层架构之业务实体层(Model)

    Model层是从数据表到实体类的映射,是其他三层数据传输的载体 一、Model层 1、模板: windows->类库 2、引用:无 3、.原则:一张表一个类,一列一个属性 (1)数据库ProductCategory表和Product表 (2)、Model层ProductCategory类和Product类 4、常用快捷键: prop ///(按两下Tab) 5、常见类型转换 Model层相对来说是比较简单的,只需一个表一个类,一个列一个属性就行,而且还有快捷键pro..

  • 三层架构(我的理解及详细分析)

    三层架构已经学了一段时间,一直想做一个比较完整、比较完美的总结。但是左思右想,不知道如何下笔。都说万事开头难嘛,今天整理了一下凌乱的思路,哎,还是没整理好,想到哪就说到哪吧。   初学者很不理解: 1,什么是三层? 2,为什么使用三层? 3,三层与以往使用的两层相比有什么不同?它的优势在哪里? 4,如何学好三层?如何应用三层? …… 这篇博客里我会给大家一一解释一下,略懂皮毛忘大家

  • SSM入门:彻底弄懂实体层entity/POJO

    一.基础实体类部分:BaseEntity<T> @SupTreeList 又定义一个抽象类BaseEntity,该抽象类实现接口Serializable public abstract class BaseEntity<T> implements Serializable{     private static final long serialVersionUID = ...

  • 数据实体层

    数据实体层用于封装实体类数据结构,一般用于映射数据库的数据表或视图,用以描述业务中客观存在的对象。一般来说设计数据实体层时,大家一般有以下选择。1、DataSet2、XML3、使用XML作为数据结构来源,来生成的统一业务实体类。4、可序列化的业务实体类。5、可序列化的,带一般CRUD操作的业务实体类。前二种太简单,这里不一一叙述了。第三种就是写一个复杂的统一的业务实体类,这个类主要是读取指定的XM...

  • Java基础 -- 集合

    一、java数组: 特点: 简单的线性序列,大小固定(对比arraylist),指定类型(对泛型) 对比arraylist: arraylist基于数组,扩容(1.5倍)开销大,效率低于简单数组,默认大小为10; 对比泛型: 指定基本类型对应的包装类,可自动拆装箱变成基本类型,但会增加性能消耗,效率低于简单数组 set 存储元素是无序的(元素在底层存储的位置...

  • 浅谈三层架构中的实体类(C#)

    最近因为三层架构中的实体类,引发了不少小问题,下面列举一下,谈谈自己的感想。 本文所指的实体类仅限于三层中的实体类,即数据库表的映射。 一、为什么要用实体类? | 使程序简洁易懂,便于维护。 | 暗合接口不变原则。 | 体现面向对象思想。 举例说明: 不用实体类的三层 假如程序有所变动,需要增加一个参数,学生年龄 用实体类的三层...

  • 三层架构详解

    什么是三层架构 UI(表现层):主要是指与用户交互的界面。用于接收用户输入的数据和显示处理后用户需要的数据。 BLL:(业务逻辑层):UI层和DAL层之间的桥梁。实现业务逻辑。业务逻辑具体包含:验证、计算、业务规则等等。 DAL:(数据访问层):与数据库打交道。主要实现对数据的增、删、改、查。将存储在数据库中的数据提交给业务层,同时将业务层处理的数据保存到数据库。(当然这些操作都是基于UI层的。用户的需求反映给界面(UI),UI反映给BLL,BLL反映给DAL,DAL进行数据的操作,操作...

  • 浅谈对三层和实体层的认识

    一、三层是指哪三层?每层的作用是什么?1、表现层(UI):通俗讲就是展现给用户的界面,即用户在使用一个系统的时候他的所见所得。2、业务逻辑层(BLL):针对具体问题的操作,也可以说是对数据层的操作,对数据业务逻辑处理。3、数据访问层(DAL):负责直接操作数据库,针对数据的增添、删除、修改、查找等。二、为什么要划分三层?划分三层实现了高内聚低耦合,有利于系统的开发和维护。三层之间的等级观念:U层只...

  • java为什么要分为service层,dao层,controller层和Entity层等?

    在Java中,通常将一个应用程序分为控制层(Controller)、服务层(Service)、实体Entity层和数据访问层(DAO)。这种分层结构的主要目的在于实现应用程序的模块化和解耦,便于团队协作和维护。

  • 互联网协议

    我们每天使用互联网,你是否想过,它是如何实现的? 全世界几十亿台电脑,连接在一起,两两通信。上海的某一块网卡送出信号,洛杉矶的另一块网卡居然就收到了,两者实际上根本不知道对方的物理位置,你不觉得这是很神奇的事情吗? 互联网的核心是一系列协议,总称为"互联网协议"(Internet Protocol Suite)。它们对电脑如何连接和组网,做出了详尽的规定。理解了这些协议,就理解了互联网

  • 三层架构——实体类

    其实这篇文章接的是上一篇文章《三层架构初涉》。下面要说的是实体类。可能有人发现了,在敲登陆Demo的时候,需要把输入的控件内容(也就是数据)先填充到实体类,然后再通过数据访问层Update/Delete/Select/Add到数据库中去。这时我们会发现出现了叫实体类的东西。那么什么是实体类?我们为什么要用实体类?实体类属于三层中一层吗?还有,实体类在三层中的作用是什么?这都是我们下面要研究的问题。

  • 三层架构之实体层以及外观

    昨天,七期师兄师姐们给我们讲解了一下三层和三范式。          关于三层:          对于三层的理解,一直在一步步的加深之中,不论理解的对与错,至少现在和别人说三层,能说出一点点的皮毛,但是再往深一点说,就不会了。          听了昨天的讲解,发现最难理解的其实并不是B层,也不是D层,更不是U层,而是实体层。          BLL层主管业务逻辑,也就是说和业务有关的

Global site tag (gtag.js) - Google Analytics