Web设计之道

道之于90年代恰如禅之于70年代。事无巨细,皆可受之道,或推之道。Web 设计之事,虽小技,然而通览道德经,我们仍然会发现其中包含深刻的道理。道是哲学,象佛,是一种生活与处世的方式,来自古老的《道德经》,这部拥有81个章节的晦涩经文涵盖了人类的经验,但它始终讲述一个主题,和谐。

过去几年,或好或坏,我的生活与 Style Sheet 有关,我为之编写软件,教程与指南;回答了数不清的问题,通过新闻组或电子邮件;通过 The Web Standards Project 推而广之。慢慢的,我对 Web 设计有了完全不同的理解,并看到设计与道之间的关联。

我所看见的是一种紧张关系,在现实的 Web 与理想的 Web 之间;在现有的媒体,印刷媒体与 Web 之间。而现在正是需要对二者进行一次梳理的时间,也是让 Web 放手走自己的路的时间。

守旧的新媒体?

“上德不德, 是以有德。 下德不失德, 是以無德。”
《道德经》第38章

你是否见过早期的电视节目,它们是讲解式的画面,那时的电视被贴切地称为“有画面的广播”。很多电视节目是借用热门广播节目的形式。而现在随处可见的晚间访谈,或新闻,仍然带着早期电视节目的旧媒体的影子。

早期的音乐电视也是这样,乐队仅仅是在镜头前模拟自己表演时的样子。

但一个新媒体从旧媒体发展起来,它对旧媒体的某些借鉴可以理解,但不能全盘借鉴,否则对新媒体是一种限制,所谓“下德不失德”。时过境迁,新媒体将拥有自己的形式,而将那些不合理的东西丢弃。

如果你曾看过早期的的电视剧,它们也是这样,广播剧需要有人讲解听众所看不到的画面,早期的电视剧也经常有人讲解,讲解那些观众自己能看到的东西,这就是旧媒体演变成新媒体时容易出现的问题。

Web 是新媒体,尽管它来自印刷,印刷的技巧,设计及惯例对 Web 影响巨大。然而 Web 和印刷过于肖似,那些“杀手级网站”常常是那些对 Web 的野性加以驯服,让页面中规中矩就象它们也是纸张一样的网站,也就是桌面印刷版的 Web。这种风尚很自然,“下德不失德”,但我们需要前进,让 Web 成为它自己的媒体,我们需要抛弃印刷媒体的“德”,让 Web 拥有自己的天性。

我们并不是说要抛弃几百年来的印刷,与几千年来的书写的智慧。但我们需要明白这些东西哪些是对 Web 有利的,那些仅仅是束缚 Web 的 “德”。

不要主宰你的网页

圣人“... 萬物作而不辭, 生而不有, 為而不恃”
《道德经》第2章

抽时间到那些 Web 设计新闻组或邮件列表看一下,你会发现被一遍一遍说了很多次的话,问了很多遍的问题,比如,“我该如何让我的网页在所有平台都上去一致?”,“如何让我的字体在 Mac 和 Windows 上一模一样?”,或者“如何控制用户的浏览器?”,控制一词的出现频率非常高。

所有这些的背后,是这样一种信念,设计者是控制者(想想像素师(pixel mechanic)这个称呼的意味)。设计者希望驾御用户的意识,希望用他们的视觉经验驾御用户的选择(比如使用固定的字号)。设计者不考虑因逻辑分辨率不同而导致的平台差别(如 Mac 的 72dpi 与 Windows 的 96dpi),他们无所不知,他们不能容忍在不同浏览器上有哪怕一个像素的差别。

当然这有些夸张,但基本事实。一个最好的例子是,当 Web 开发者们明白 CSS 并非 Web 上的桌面印刷工具时所表现出的失望。如果你是 Mac 用户,你会发现有很多非常大的网站为了防止页面字体模糊而拒绝使用 CSS,他们很可能使用 px 作为字体尺寸,而这种选择所隐含的思想就是“设计者也是主宰者”。

这种思想的根由在哪里?我觉得来自印刷。对印刷而言,设计者就是上帝,印刷是一个基于 WYSIWYG (所见即所得)的庞大行业,而众多 Web 设计者也扎根于此并对这个行业的“德”深信不疑。作为 Web 设计者,我们需要对此重新思考,放弃控制欲,并寻求与网页之间的全新关系。

为什么要这样?

“人生之柔弱, 其死堅強。万物草木生之柔脆,其死枯槁。故堅強者死之徒,柔弱者生之徒。”
《道德经》第76章

不能控制网页看似一种局限,或缺陷,而来自 WYSIWYG 世界的我们初期都有这种想法,我承认最初我也这样想。但如今我不再认为那是一种局限,而是新媒体的力量所在。

事实上,我们对纸张媒体的控制才是真正的局限。想想看,我们能固定文字的尺寸,或者说,文字大小不可改变,或者,你可以说,纸张的尺寸也在控制中。

然而这未必是好事,尤其对读者。如果某个读者视力不好,你的那些固定的小字体不借助放大镜就很难看清;如果读者身处一个局促的空间,比如火车或飞机,那些宽幅的报纸就太大了,而针对这些问题,用户几乎无能为力。

我们在印刷中获得的控制力事实上是一种缺陷,不应再继承到 Web 设计中。我们知道,Web 没有这样的局限,因此应基于弹性而设计,爱这之前我们需要“萬物作而不辭”。

可适应性就是可访问性

“上善若水, 水善利萬物,又不爭。處眾人之所惡,故幾於道。”
《道德经》第8章

有人认为道是宿命,浅读会觉得人应当无为,静待事情的降临而被动反应。我认为,我们不应为久远的目标预设将来,相反,应该有适应力,而不是胶柱鼓瑟。

“見小曰明,守柔曰強。用其光,復歸其明,無遺身殃,是謂習常。”
《道德经》第52章

我迄今所谈到的所谓弹性即“适应性”。前面所言总结起来就是:让你的网页具有适应性。让你的网页具有可访问性,不拘何种浏览器,何种平台亦或何种屏幕。这意味着在任何屏幕尺寸,任何屏幕颜色数下,网页都合法可用(同时还要记住,人们可能会打印这些网页,或者使用读屏软件以及盲文浏览器进行访问)。这意味着网页要适应它的访问者,它的访问者可能视力不佳,希望使用比较大的字体。

设计适应性网页就是设计可访问性网页,而这是 Web 设计中远未实现的目标,也是 W3C 的一个重要思想,对 Web 设计来说,这是一个迫切的使命,将来的网页也许要求实现通用访问。

这听上去不太可能,通用访问,在当今并不灵光的浏览器面前,在各种可以访问 Web 的不成熟的移动设备面前,只是一种理想。但我们仍有很多东西可以努力,并为今后适应性网页设计打好基础。

译后记

A List Apart 是被所有 Web 设计者尊为圣典的一份杂志,John Allsopp 的 “A Dao of Web Design” 是被该杂志推荐阅读的一篇 Web 设计随笔,已被译为多种文字发表,然而并未见中文版。既然《道德经》来自中国,就没有理由让国内的众多 Web 设计者去啃并不怎么好懂的英文原文。当然,还是老话,这是技术随笔,并不是可以传世的人文作品,翻译也就只求信,而惘顾雅与达了。这是本文的第一部分,请参阅第二部分。

时间: 2024-08-30 01:05:47

Web设计之道的相关文章

《响应式Web设计实践》一第2章 流动布局

第2章 流动布局 响应式Web设计实践一棵大橡树被风连根拔起,然后落到了一片芦苇丛中.橡树对芦苇们说:"我很想知道,你们如此轻而弱小,却为什么没有被大风吹走呢?"芦苇们回答道:"你和大风打斗对抗,结果就被摧毁了:而我们在大风来临之前便弯下了腰,并因此保持完好而存活了下来."* --"橡树与芦苇"伊索寓言 在"橡树与芦苇"的故事中,大橡树和芦苇都被风吹来吹去,橡树想要一直站得又高又稳,并因此与大风做着顽强的抵抗,但最终它还是被大

《超越平凡的Web设计——HTML5+CSS3专业应用之道 (iWeb会场抢先版)》——导读

前言 超越平凡的Web设计--HTML5+CSS3专业应用之道 (iWeb会场抢先版) 如果你在Web设计和开发的岗位做得时间足够长,那么你的书架和电子书价上应该已经塞满了关于HTML和CSS方面的书籍,甚至也许已经买过我之前出版的<超越CSS--Web设计艺术精髓>.那么,为什么你还需要这本书? 这是一本面向那些富有创造力.渴望理解WHEN(何时).HOW(如何)和WHY(为什么),以及积极实践HTML和CSS新特性的Web设计师和前端工程师的书.拥抱新技术,就从现在就开始,不是明天或者下周

《UX设计之道——以用户体验为中心的Web设计(第2版)》一第1章 用户体验设计之道1.1 什么是用户体验设计

第1章 用户体验设计之道UX设计之道--以用户体验为中心的Web设计(第2版)好奇心+激情+同理心 重要的是要永远保持质疑.好奇心自有其存在的理由.当人们思索永恒.生命和现实中不可思议的神秘事件时,难免会心生敬畏.每天能够尽点力去理解这些神秘点滴就已足够. --阿尔伯特·爱因斯坦 好奇心是大自然最早的学校. -Smiley Blanton 激情和目标携手同行.当你确定目标时,你会发现你对事物满怀激情. -Steve Pavlina 上天赐予了人类一份重要礼物,即我们拥有同理心(empathy)的

《Web前端工程师修炼之道(原书第4版)》——第3章 Web设计基本概念

第3章 Web设计基本概念 随着Web的成熟和设备访问数量的成倍增加,作为Web设计师和开发人员,我们的工作变得更加复杂.坦率地说,我无法在一本书中涵盖所有的内容.在本章接下来的部分,我将专注于介绍Web设计的基本部件:HTML元素.CSS样式.小试一下JavaScript和Web图像制作,这会为你的进一步发展奠定坚实的基础. 但在我们实质学习之前,我想介绍每一个Web设计师都需要知道的一些重要概念.我们将看到促进当代Web设计环境优化的一些思想和观念.本书后续的部分中,我会经常提到本章介绍的术

《Web前端工程师修炼之道(原书第4版)》——自适应Web设计

自适应Web设计默认情况下,大多数的小型设备(如智能手机和平板电脑)上的浏览器可以缩小网页,使其适应屏幕大小,并提供放大页面.拖动浏览的机制.虽然如此,严格来讲,它不是一个良好的体验.在这些设备上,文字太小.阅读不便,链接太小.不好单击,而缩放和左右拖动浏览又增加了操作.自适应Web设计的策略是根据设备上视窗的大小(浏览器窗口)来提供自定义布局.自适应Web设计的技巧是为所有的设备提供同一个HTML文档,但根据设备不同而应用不同的样式表,从而为不同设备提供最优化的布局.例如,当用智能手机查看页面

Web设计核心问题3:为用户设计(8)

web|设计|问题  3 . 11 易访问性 没有办法考虑所有人之间的微小差异.实际上,创建站点的目的是让大多数人喜欢.这导致我们把用户群综合地分为如1 8岁以下的一般女性冲浪者等等,这可能导致我们做某些折衷.然而,从这一意义来说,并不能为迎合那些在统计学意义上偶然发现你的站点的数量最大的人群设计站点.尽量取悦所有不同类型的用户使站点更易访问.不要忘记即使你认为某些人的身体和技术能力都很完美,他们仍存在一些困难. 为视觉.听力或身体其他部分有残疾的人提供易访问性已不再只是好的主意.实际上对好多部

论WEB设计

道之于90年代恰如禅之于70年代.事无巨细,皆可受之道,或推之道.Web 设计之事,虽小技,然而通览道德经,我们仍然会发现其中包含深刻的道理.道是哲学,象佛,是一种生活与处世的方式,来自古老的<道德经>,这部拥有81个章节的晦涩经文涵盖了人类的经验,但它始终讲述一个主题,和谐. 过去几年,或好或坏,我的生活与 Style Sheet 有关,我为之编写软件,教程与指南:回答了数不清的问题,通过新闻组或电子邮件:通过 The Web Standards Project 推而广之.慢慢的,我对 We

web设计趋势与潮流

原载于 <程序员>杂志2010年第7期. 作者:西乔 19年前,世界上第一个网页诞生,它没有设计可言,由文本和url组成,样式只有最基本的<h1><p>.而如今,Web设计已经成长为独立而庞大的设计门类,一个网页的创造需要多个工种.多种技术的参与,其流程的复杂和挑战性已经超过任何传统设计类别. 这19年间,网站的拥有者越来越清楚自己的目标,而设计师们也越来越理性和专注,人们在不停寻求商业诉求.用户.审美和技术上的平衡点.每一年过去,都有无数过时的风格.特征元素以及实现技

网站用户体验分析:小议国民性和Web设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 本文意在通过对当代中国民众的共性和心态上的思考,从更加人性化的角度考量和设计web产品的用户体验.之所以称作"小议",一是因为"国民性"这个题目很大,也很敏感, 几篇文章无法说尽;再者本人阅历有限,个人观点的bias难以避免;同时,也希望引发大家的一些反思.而"Web设计"则指网络上的用户体验设计的各个方面(图1). 阅读全文 图1:用户体验的4个元素 前言 国民性这个议题,自然没有那么简单,泱泱大