当前位置: 首页 >> APP设计教程_APPUI设计教程_UI设计教程_网页设计师加油站 >> 阅读正文

SKYUI设计观点-网页设计的“道”(下)

以下是紧接着上文 SKYUI设计观点-网页设计的“道”(上)

来继续阐述我们的观点

放弃控制,变得灵活吧     –SKYUI设计师

五、“道”

“通过运用而形成了道、之后便丢失了“形”、不必在乎形体上的观念、而是让感知渗入这个世界、就像溪流奔涌至海洋一样“

(始制有名,名亦既有,夫亦将知止,知止可以不殆。譬道之在天下,犹川谷之于江海)

道德经;第32章 形体

那怎么才能设计出具备通用性的页面呢?首先有几种思考的方式对解决问题很有帮助。然后我会讲点具有实用性的建议来帮助你避免这些问题。

第一,想想,你的页面的目的是什么,而不要想页面的视觉效果。让你的设计溯源一下,回到为用户提供服务上,而不是首先考虑页面的视觉效果。功能至上,而不是先制作特殊的外观再让添加页面功能。这个想法的基础在于把内容与外观分离。你可能已经听过不下一百遍了,但或许如果你这么做将是你迈出最重要的一步。让我们看一个简单的例子。页面上有些文本是斜体的。为什么采用斜体呢?可能是用来做强调。可能是引用。也可能是用英语表达的外国词语。在传统出版业中,形式来自于功能。网络出版业的优点就在于我们可以在页面外观上突出那些我们想要突出的。如果斜体的功能是用来做强调,那么请用<em>标签,而不是<i>标签,这样除了PC的之外的网页浏览器也能恰当的处理。从更高的层次来说,别用HTML做外观。别用那些<font> <b> <i>这种标签。当HTML能按需提供合适的元素时候再去用。如果不能,用类别。当然,记得要用样式表来传达信息。要往前看,而不是回首。

如果你能恰当的应用样式表,那么我还建议不要去改变页面的外观,不要依赖样式表去转换信息,那么你的页面将会良好的运作在任何浏览器上。不支持样式表的浏览器也就是看起来平淡一点而已。我们最大的关注点在于那些有漏洞样式表所支持的浏览器。今天这是一个问题,但是不久的将来,这会被解决。现在,你可以把自己局限在有良好支持的CSS的子集中,而且比之HTML能够提供更好的视觉效果。这部分写的够多了,不再重复。(HTML做结构,CSS做样式)在实际应用中,当设计样式表会影响到页面的适用性的时候,有些要做到,有些则要避免。除此之外,不要依赖样式表来实现页面的通用性。过于绝对的单位,像像素和磅数要避免(下面我会讲)色彩要谨慎使用,不要依赖色彩。

字体

一般Windows,Mac或其他系统上仅仅安装了几种字体。这些系统上的默认字体都各不相同。已经有很多浏览器,读者可以自行决定页面所呈现的字体。引入CSS,可提供多种字体选择,覆盖多种接口。但是不要指望一种字体一直都起作用,不管该字体多么常见。更重要的还是字体的大小,你可能察觉到同样的字体,同样的字重,在Mac中看起来比Windoes小一点。这是因为Mac的自行分辨率是72dpi,Windows的自行分辨率是96dpi。导致的差别很显著。想要在Mac上和Windows上形成同样的文本效果几乎是不可能的。但如果你坚信适用性这一信条,那么便没关系?什么?如果你关注的是网页页面如果精确的显示,这就说明了你
还没有想考虑到页面的适用性。字体大小是通用性最显著地问题。小号字体难以阅读。对于实力不错的人来说,当他们得知有数目庞大的人群难以阅读纸张上14磅以下的字体时,他们会很震惊。屏幕的阅读性比纸张要差,因为更低的分辨率。
这是否就一位置我们所能使用的最小磅数就是14 pts?这并不会帮助那些视力不好的人。那我们最小的字体该用多少?什么都不
用,别用磅数。这样就能让读者选择适合他们的字体大小。对于像素来说也是同理。因为分辨率的差异,这个平台上的像素会不同于其他平台上的。CSS提供了几种方式来改变文本尺寸,以促进适用性。我们来看这
个例子。通过CSS你可以用百分比改变字体的大小。比如,标题在页面的主题中。如果你不设置主题的问题本大小,那么主题的文本便根据读者默认的大小来进行选择。仅仅就这样就促进了页面的通用性,什么都不用去做。你可能会说,如果我放任管“文本就看起来太大了”,那么调小点。但是那是在“你的浏览器”里面。你的阅读者将会有在他们的浏览器中选项选择更大还是更小,完全取决于个人爱好。通过将一级标题的大小设置为比文本字体大小大30%,我们可以让标题和其他元素突出。二级标题可以大25%。不管用户主要文本上选择什么样的字体大小。标题应该显眼,应该按比例的比主要文本字体大。相近的主体的文本可以缩小一些,但是这可能会导致文本难以阅读,所以要谨慎。我们做的还很少,仅仅是避免了使用固定大小的字体,使用了合适大小的标题,我们还需要做很多保持页面的适用性。

布局:

边距、页面宽度、缩进距离是促进可读性的几个方面。浏览器的窗口会改变大小,今儿改变了页面的大小。不同的网络设备(网络电视,高分辨率屏幕,掌上电脑)有不同的窗口尺寸。就像修改字体大小一样,修改页面布局可能会导致页面的通用性问题。布局也同样可以被设计为按百分比来布置具有通用性的页面。边距可以按照屏幕的百分比设置。用CSS可以自动的通过百分比来设置页面布局来创建具有适用性的页面。当浏览器的窗口变宽或是变窄,布局的各个元素适应性的进行变化,所以整个页面的布局也具有适应性。浏览者可以选择合适的窗口大小。边距,文本锁紧,和其他的布局方面也可以被设置为与文本字体
关联,使用<em>单位来设置。如果你设置:
p  {margin – left: 1.5em}
这就是说段落的左边距为段落字体高度的1.5倍。当用户调整了字体大小来让页面看起来更舒服的时候,边距也同样适当的增加,如果他们调小,那么边距相应改变。

颜色:

网络比纸张更加多彩的媒介。颜色的运用在网络上无成本。装饰性的颜色能帮助构造视觉个性,也具有实际上的价值。但也导致了通用性的问题。你知道吗?很多国家里,无论能力有多么高,有红绿色盲的人是不能获取飞行员执照的。因为警告信息总是一成不变的以红色代表危险,绿色代表安全。非常遗憾,警示信号方面并不具备颜色适用性、替代性。你的网页是否以同样的方式驱除了个别用户?那很令人遗憾,不久的将来大多数的网页浏览器会给浏览者提供简便的方式调整页面的色彩,凭借的是用户样式表,一种优先于你的样式表的存在怎么避免这种问题?用样式表,而不是用 HTML的<em>元素。避免仅仅依赖色彩的组合去传递信息。路途人难以合抱的树木开始于小小的树根;能够阻止河流溢出的大坝开始于一小块的泥土;一千里的路程开始于一个人的一小步。(合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。)

道德经;第64章.留意开始
——《道德经》第六十四章

改变我们思考和行为的方式并不容易。“紧密抓住的信仰不会容易的放下”但我已经慢慢的意识到很多事情,我以为是理所当然
的事情需要重新去评估。通过这几年我所读、我所见、我所谈的,我发现很多人依然在固守成规,他们需要重新去思考。现在正是网络媒体从纸质中脱离的时代。不用放弃过去的经验与智慧,但要发展自己的路。网络最强大的地方也是它自身的限制所在。网络的本性便是灵活,我们设计师和开发者应该去坚信这种灵活性,以此来构建有灵活性的页面,从而具有通用性。

分享一下,与TA一见钟情~~

本文标题:SKYUI设计观点-网页设计的“道”(下)

本文地址:http://www.25xt.com/allcode/3169.html

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。