网页设计趋势

January 26th, 2010 莱曼 No comments

网页设计是一个急速发展的新媒体,它的快餐式文化,使得网页设计在不断的尝试更新的设计理念,带给用户更多新鲜感。在过去的几个月,2009网页设计10 大新趋势被确定。在这概况,你会发现审查每个趋势都有更加具体的举例,从中带给你更多灵感,激发你的下一个项目。

1. Letterpress 凸版效果

在我们的观察中,一个意料之外的趋势是,凸版效果(Letterpress,也就是我们的篆刻中的阴文效果)。这样的趋势,可能是因为一个简单的原因,因 为这个技术很少被人使用。我们发现这种技术通过不同的样式应用在不同的网站上,多位在线服务网站。

2. Rich UI 交互式用户界面

令人感到欣喜,现代的网站用户界面已经逐渐变得更漂亮和更加易用。过去的几年中,这些基于网页的应用有了惊人的进步,这些交互式用户界面越来越像传统的桌 面应用了。Ajax以及Flash技术的大量使用提供了用户各种非常炫目,强大的网页应用。

更看到一些特别之处,这些年我们发现网页上有了更多的空白空间,页面元素间的间距也变得越来越大。我们也观察到,越来越多的站点开始在页面上提供直观的用 户动作响应。比如,页面上的按钮会根据用户的动作,比如点击响应不同的状态表示“正常”和“按下”状态。而且很多网站开始根据不同的用户产生不同的响应。 所以我们断言,自适应用户界面将会在2009年流行起来。

3. PNG透明图片

PNG透明图片效果,尽管不被古老的IE6支持,但似乎在去年变得流行起来。但是这种半透明的背景效果却是设计师们一直希望拥有的特性。这种背景通常被用 在头部和页脚处,但是有一些设计却跳出了这种窠臼。

4. 大尺寸的文字排版

在过去的文章中我们介绍过很多出色的大尺寸文字排版例子。在2009年,这样的潮流将继续流行下去,尤其是设计师网站,个人Portfolio网站以及在 线服务类网站,将会采用这样的方式传递给用户最重要的信息。

这样的效果一般会将字号控制在36px以下,设计师们投入了更多的精力在文字排版的细节上,由此可见,网页将会变得更加漂亮,更加一致以及看上去更加让人 可信。

5. 字体替换技术

设计师花了非常多的精力在页面排版上,同样的也花了很多精力在字体选择上,除了传统的那些经典字体,(译注:也是我们仅有的安全选择)很多设计师开始采用 字体替换技术,也就是我们之前有提到的(sIFR)。

这些字体能大大提供网页的视觉效果,但是在中文世界中,这项技术遇到了前所未有的难题,汉字不是拼音文字,一个字体就可能有几兆,根本无法简单的使用这些 技术来替换,也许文字图片替换法是目前中文的唯一选择。

6.​模式窗口(LightBox技术)
模式窗口技术,作为第二代弹出内容技术。模式窗口(LightBox技术介绍)能够很好的代替原来的Javascript弹出窗口,提 供更加友好的用户体验,并且引导用户的关注点集中到最重要的区域上来。通常由用户的点击触发,类似于传统的桌面应用。多数情况下,这些弹出窗口都带有深色 半透明的背景和一个关闭按钮。

7. 多媒体模块
随着宽带的普及,现在的用户已经能够接受更多的内容,所以设计师们能够利用这样的契机使用一些更加吸引人的展示方式。因此很多网站开始引入多媒体内容(比 如视频和屏幕录像)。这有助于迅速有效的让用户消化接受你想传递的信息。

这些视频能够很好的讲解你的网站的每一个步骤,不再需要多次点击,搜索,或者学习如何导航。通常这些视频长度都不会太长,但是内容要保持完整。

注意,绝对不能让这些多媒体内容成为你网站的全部或者是必不可少的部分,毕竟不是所有的用户拥有良好的网络条件,抑或是有些用户并不希望这种形式,有可能 他正在机器上收听音乐或其他视频。

8. 杂志风格样式
在博客类网站设计中,我们发现一个有趣的现象是很多技巧都是取自于传统(印刷)媒体设计。包括文章的组织,页面的排版,插图甚至于文字的对齐方式都和传统 印刷媒体越来越接近。Grid-Based(网格化)设计方式在产品网站,博客以及个人工作室网站得到了广泛的应用,但是在企业站点或者在线商店中还未有 出现。

9. 幻灯片形式

Carousel,也就是幻灯片导航形式,内容水平或者垂直滚动。通常有两个导航元素来控制滚动方向,以及滚动内容。

这种形式的好处是,用户可以不用多次点击来搜寻他们感兴趣的内容,可以快速的通过滚动幻灯片来浏览希望他们注意的内容。这种形式多用于娱乐站点,或者是一 些大型博客。是一种非常吸引眼球的展示方式。

10. 内容介绍模块

页面的左上角是网页上最重要的一块地方,因为最吸引用户的眼球。所以我们可以将最重要的信息放在那里展示,用户也能在第一时间获取这些信息。

对于很多个人工作室网站,或者是产品类的网站,都很好的使用了这个区域来展示内容介绍,相反在博客或者是在线商店类网站上几乎看不到这种方式。

Categories: UI 界面 Tags: , , ,

使用 HTML 字符

January 25th, 2010 莱曼 No comments

有这么一些字符 (如: 小于号和大于号) 是 HTML 中的保留标记. 为了以文本方式显示这些字符, 你必须在源代码中输入 HTML 字符实体. 例如: 可以通过输入 &lt; (实体名) 或者 &#60; (实体编号) 来显示小于号 (<). 在字符实体的列表里, 有非常多符号可以用在页面布局的设计中. 例如: → ♥ ♫ ✓ ✗ • ☞ ✁ ★ “ ⊕. 你以前是否已经见过雪人 ☃ 符号? 如果没有, 请继续阅读, 本文将给你更多惊喜.

字符实体相对于图片存在的优势

1. 加载速度快, 因为字符都是基于文本的.
2. 可以更具字体尺寸进行缩放.
3. 可以方便地改变颜色和改变造型.

撇号和引号

互联网上大部分的排版错误可能是混用了撇号好引号. 我们经常会将左单引号 (‘) 当作撇号 (’), 双撇号 (”) 当作双引号 (“ ”) 来使用。

撇号和引号

正确地使用撇号和引号, 你可以使用右单引号 (&rsquo;) 当作撇号. 使用左双引号 (&ldquo;) 和右双引号 (&rdquo;) 作为引用符号.

箭头符号

我尤其发现箭头符号很有用, 因为他们可以作为指向的箭头和面包屑 (页面导航) 的分割符.

返回箭头

面包屑例子

链接分隔符

&bull; ( • ) 和 &sdot; ( ⋅ ) 是我喜欢的字符实体, 我将他们用来分割链接.

子弹符号

分隔符号

商标, 版权, 度数和货币符号

另外的一些通用符号可能就数商标, 版权, 度数和货币符号了.
Trademark ™ | © Copyright | Registered Trademark ®
Degree: 29° | 26 ℃ | 60 ℉
Currency: ¢ Cent | £ Pound | ¥ Yen | € Euro

商标, 版权, 度数和货币符号

用于网页设计的符号

这里有一些符号, 可能你会用在设计网页布局上.

用于网页设计的符号

各种各样的符号

这里有一些其他的符号, 很有可能你永远不会用到 (但它们很酷).

各种各样的符号

渲染问题

注意到 Mac 和 Windows 有不一样的渲染系统. 字符实体会在不同的操作系统中有不同的视觉表现. 在使用前, 请先核对一下.

rendering issues

参考链接

1. 这是一个完整的字符实体参考, Bigbaer.com - Character Entity Reference
2. W3Schools.com - Symbols Entities
3. Webstandards.org - Symbol Entities

译者的话

本文翻译自 Web Designer Wall - Using HTML Symbol Entities. 我同意作者关于字符使用三个优势的说法, 但是我不建议用户滥用这些字符, 因为不同的操作系统, 不同的浏览器和不同的界面字体都会影响其外观, 甚至是否支持某个字符都不确定.

如果你用某款手机打开这个页面, 可能会看到一些框框, 那是因为手机的字体集比较小, 字体库中没有这样的字符, 所以浏览器无法识别. 另外, 如果你使用不同浏览器打开这个页面, 出来的效果也可能大不相同. 这些差异都将导致用户体验逊色不少.

另外, 图片虽然讨厌, 但也有字符无法比拟的优越性. 试问一个字符可以用多个颜色来显示吗?

最后, 我建议择其常用字符, 必须使用的字符. 如 ©, <, >… 这些应用广泛的和必不可少的可以放心使用, 一些自己很少看到的 (如 ☃) 就不要用了.

尽信文不如无文, 希望看完这篇文章的朋友也有自己的见解, 欢迎下一个分享的人.

转载请注明转自 NeoEase

Categories: 创意灵感 Tags:

写在2010年1月21日晚

January 21st, 2010 莱曼 No comments

paoxiao

2009年是不寻常的一年,尤其后半年开始。回头想想那是多么的漫长,感觉真像一场梦。当然事情是喜忧参半,总之突然发生在你面前的总不会是什么好事儿,而满怀希望的好事儿总会“迟到”。不管怎么样,送走了坎坷的2009年,我迎来了充满希望的2010年!

去年年不管是收获多少和失去多少,在我现在看来都归零,那代表过去。我今年正式步入而立之年,决志一切从头开始。在这个时候我必须审视过去,展望未来,而且更要从这新的起点开始发愤图强。并不是要实现什么伟牛(伟大而且牛逼)的理想,最重要的是要安分下来做该做的事。虽然对某些人来说立志有点晚了,不过既然我能承认之前有虚度生命的嫌疑,那么改过自新的机会我想上帝会给我的。我真的忏悔了… …

寄希望于此,那就放手开始干吧!

Categories: 愛设计, 闲言碎语 Tags:
SEO Powered by Platinum SEO from Techblissonline