网页设计工作的 95% 在于字体排印

十月 13th, 2010 by chris

查看原文:Web Design is 95% Typography by Oliver Reichenstein

网上 95% 的信息是文字。从逻辑上讲,网页设计师自然应该充分掌握型塑文字信息的技巧,换句话说,就是字体排印(typography)技巧。

信息设计 = 字体排印

1969 年,著名瑞士字体排印师埃米尔·路德写过一段关于当年的印刷品的话,用来描述今天的网站也适用:

我们正被印刷品的洪流淹没,个体作品的价值正被稀释,因为被诱惑包围的现代人根本不可能读完所有印出来的内容。字体排印师的工作就是把印出来的海量文字分拣、组织、诠释,从而让读者更容易找到自己感兴趣的内容。

只要稍微发挥一下想像力(把印刷品换成互联网),以上文字就可以视为对信息设计师的工作内容描述。信息设计师的工作恰恰就是「把印出来的海量文字分拣、组织、诠释,从而让读者更容易找到自己感兴趣的内容。」

与微观意义上的字体排印(字体与间距的细节)相比,宏观字体排印(整体的文字排版结构)涵盖了今日被称作「信息设计」的诸多方面。今天的信息设计师做的正是三十年前的字体排印师的工作:

字体排印的任务很明确:通过书写文字传递信息。无论出于何种理由和考量,字体排印的这一功能都不可忽视。无法阅读的印刷品是一件没有目的的产品。

对字体排印进行优化就是对易读性、亲和性、可用性(!)、以及整体的视觉平衡进行优化。把一块块的文字与图片混排,这难道不是平面设计师、可用性专家和信息架构师的工作吗?那么为何这个话题总是被忽略?

字体太少?分辨率太低?

我们最常听到的关于网页字体排印的论点——或者说抱怨——就是网页上可用的字体太少。另一个论点是屏幕分辨率太低导致像素化 / 抗锯齿字体难以阅读。

可用的字体太少是一个不相干的问题:意大利文艺复兴时期的字体排印师只有一种字体可用,但他们排出的印刷品是史上最美的之一。

speciamen.gif
(图片来源:Information Architects)

字体排印师不应该过分在意有哪些字体可用的问题。事实上,选哪种字体不应是他考虑的重点。有什么字体,就用什么字体,并尽量把它用好。

选字体 ≠ 字体排印。

第二个论点也没有好到哪去。印刷品肇始之初的印刷质量远逊与我们今天用的屏幕。更重要的是,经过专业的字体排印师处理的屏幕字体完全可以很易读。

信息设计探求的不是如何使用好的字体,而是如何达到好的字体排印效果。两者截然不同。任何人都可以用字体,有些人很擅长选择好的字体,但精通字体排印术的只是极少人。

把文字当作用户介面

没错,不同的浏览器与操作系统平台显示字体的方式不一样,这很讨厌。没错,屏幕分辨率的问题让人很难专注阅读超过五分钟以上。但没办法,网页设计师的工作之一,就是确保文字在所有主要浏览器和平台上读来都同样轻松和舒心。正确的行距、字距、留白以及适当的色彩运用都能改善易读性。但这些还不够。优秀的网页设计师不仅知道如何处理作为内容的文字,他还可以把文字用作用户介面。看一眼 Khoi Vinh 的网站你就懂我的意思:

koih.gif
(图片来源:Information Architects)

此外还有一些更加有名的把文字当作介面的「非装饰性」网站:谷歌、eBay、Craigslist、YouTube、Flickr、Digg、Reddit、Delicious。你很难否定文字作为介面的必要性,它是成功设计的唯一标准。成功的网站总是既有简单的介面,也非常容易辨识。但这是另外的话题了。

用视觉打造购物网站的引力磁场

十月 10th, 2010 by chris

如今,越来越多的消费者习惯在网上购物,网络已经在无形中改变了人们的消费方式。在网络购物中,信息的获取90%都是通过眼睛,视觉的第一印象成为消费者在识别和选择商品时的重要依据。成功的视觉设计,能够使人产生深刻的印象,直接影响到消费者的购买欲。

01 形成关注中心

人在观察外界事物时,总是把其中很小一部分当作关注的对象,而把其他部分作为背景,这是因为人的知觉具有选择性特点。因此,色彩鲜明、形状独特、轮廓清晰、具有整体性和容易理解的内容,往往会吸引更多的注意力。为了引起用户的关注,设计所要追求的首先是视觉冲击力以及容易识别和理解,其次才是美感。

商品图片

“一图胜千言”,精美的商品图片能在第一时间吸引用户的视线。同时,不同类型的商品需要运用不同的处理方式突出商品的形态和个性。比如,数码产品质感强烈,外形简洁,适合单纯干净的背景,不宜过多的装饰。而服装的展示,往往会利用模特形成多姿多彩的形象。

可以点击图片观看服装穿在模特身上的效果,尽力弥补了网络不能试穿的缺点,让用户产生身临其境的感觉。

02 唤起审美愉悦

当然,绝不能忽视美感设计,无论是华丽的、高雅的、有趣的、奇特的,凡是具有审美属性的装饰、色彩和布局,都能够引发用户愉快的心理体验。一个审美特点突出的设计,不但可以引起用户的好感,其目的还在于留住用户的目光。

色彩

研究显示,人体精神上感到舒畅还是沉闷,与色彩有直接关系。一般来说,用户进入网站的第一感觉就来自页面上的各种色彩。因此,恰当地运用和组合色彩,对形成特定的氛围空间能起到积极的作用。

3B原则

3B原则是指在计中运用美女(beauty)、婴儿(baby)、动物(beast)吸引用户注意力的原则。美丽的女性总是具有吸引力,天真的小孩子最让人印象深刻和难以忘记,憨态可掬的动物同样能吸引大家的眼球,而其他类型图片的视觉度很大程度上会受到个人喜好的影响。

03 调动求知兴趣

一个视觉形象给用户的直观感觉十分重要,但是,如果它单调、平淡,用户就不会继续关注它;即使它给人的第一印象很好,如果它只有外在的形式而缺乏内涵,用户同样不会有认真探究它的兴趣。因此,一个出色的设计,不仅能吸引用户的注意力,还能让顾客发现它的新奇之处,或是感到它的无穷韵味和深刻内容。

展示细节

通过对商品细节的展示,能够很好的传达商品的品质和特征,使用户感受到商品的匠心和不同凡响之处。

突出创新点

用户对商品的外观和功能有一种期待。如果与同类商品有不同之处,那就展现出来。

产生互动

在通过网络购物的时候,用户无法真实的触摸商品,全方位感受商品的欲望往往受到限制。这时,可以通过使用3D虚拟现实技术、FLASH技术设计具有互动性强的界面,让用户犹如身临其境。

BURBERRY眼镜的网络界面,采用接近高素质静态图像画质的高清视频,加上特别的拍摄手法,全方位的展示了眼睛的佩戴效果。

亚马逊网站推出的一个全新模式的购物型网站–WINDOW SHOP,无论在技术上还是用户体验上效果都非常棒。

04 激发购买动机

商品陈列和视觉表现,通过营造某种别具一格的生活情调和情景氛围,能够使顾客如同身临其境,产生与自己的生活方式和审美趣味有关的联想,在潜移默化中,会把自己同眼前的形象联系在一起。一旦顾客发现适合于自己的形象,常常会萌发模仿和尝试的需要,从而产生购买的动机。特别是属于随机型和冲动型购买的顾客,很容易受到展品与气氛的启发和诱导,而决定购买自己感兴趣的商品。

展示功能和用途

展示商品的不同功能,提供实际使用的照片,会让用户产生需要的感觉。

传达一种生活方式

时下,人们在购买商品时,考虑的不仅仅是产品的基本使用功能了,更多的是对其深层次的考虑:追求赏心悦目的设计,以及其所传达的一种生活方式。

05 总结

人的心理活动是极其微妙的,也是难以琢磨的,人们往往凭自己的印象购买商品。美丽与丑陋,高雅与粗俗,关注与排斥,这些心理上的情感,不仅男女老少各不相同,也因国家、地区和个人的偏爱而有很大的差异。所以,作为一个设计师必须了解市场,研究设计形式因素和分析消费者的各种心理 。只有这样才能准确地摸索到视觉设计与消费者心理活动的规律,从而提高设计的效果,促使消费者产生购买商品的行动。

帮你选鞋,ShoeDazzle的新意

十月 5th, 2010 by chris

在网上购物已经成了我的习惯。不用出门,无数的商品任意挑选,是感觉很爽的事情。不过有时候选择太多也挺麻烦的,需要花费大量的时间。有没有这样的可能:我只需要说出我喜欢什么,网站就非常聪明的呈现出合我心意的商品。

ShoeDazzle就是这样的一个网站。这家2009年初在硅谷建立的购物网站专卖女鞋。与普通购物网站不同,网站首页没有常规的商品展示,也没有商品目录列表。一开始,它会问你几个问题:你最喜欢的时尚风格,你最喜欢哪一种鞋子,你最喜欢的品牌,你最喜欢哪一位明星的装扮,你的年纪,你喜欢的颜色……当你回答完这些问题之后,ShoeDazzle就对你的个人品味有了大致的了解。

网站会向提交了信用卡账号和收货地址的注册会员在当月推荐5双根据个人品味选择的鞋子。当然了,你可以选择不买。当你买了第一双鞋之后,就成为了ShoeDazzle的正式会员,每月会收取你39.95美元的费用作为帮你选鞋的酬劳。如果你本月不想要一双新鞋,可在当月5号前申请跳过这个月,ShoeDazzle当月就不会收取费用。如果你忘记了申请和挑选新鞋,ShoeDazzle仍会继续扣费,并累积成信用额度,未来你可以拿这个信用去买鞋。如果超过5个月你没有买鞋或者使用信用额度,网站就会中止扣费。

有没有一种当名人的感觉?ShoeDazzle的创办人有一位就是专为明星作服装的好莱坞造型师Kim Kardashian,长期为娱乐明星提供着装意见。网站一开始就抓住了消费者这种希望被特殊对待的心。ShoeDazzle通过有针对性的市场调查和专业研究,帮助用户挑选合意的商品,从简单的卖商品上升到卖服务的高度。

常规的网购模式,是用户有一个模糊的需求,然后通过搜索或浏览去寻找他们想要的商品。而ShoeDazzle的模式则更加贴心,通过了解用户的个性需求,帮助用户选择。

ShoeDazzle在成立短短数月之后就吸引到美国最著名的高科技领域风险投资公司Lightspeed Venture的注资,随后又有几家风投公司入股。根据business wire5月初的报道,一年的时间ShoeDazzle一共募集到2000万美金,而且已经开始稳定盈利了。在3月初,由科技博客Silicon Alley Insider评选的明星创业的十大互联网企业中,ShoeDazzle位列第七。

目前,ShoeDazzle单日销售量已经超过1000双,风投的注资更说明资本市场已经认可了这种经营模式,创始人Kim Kardashian也已经准备在衣服、皮包等领域复制这一模式了。而且,显然这样的方式也并不局限于穿衣服这一件事。

做一道好菜

九月 25th, 2010 by chris

普通的食客只关注显而易见的表面。外形美观,味道合口,他们就赞。但对于美食家而言,他们知道,一道色香味俱全的好菜,需要精选食材,好刀工,细致的调味,恰到好处的火候。

对于设计工作来说,打开软件仅仅是最后的一道工序。创意的激发,素材的选择,进一步的加工与组合,这些都比软件操作更重要。设计的90%工作应该都是在大脑里完成。

譬如我,平时会注意收集不同的资料,照片、设计案例、插画、电影,甚至音乐,将这些不断的加入到我的素材库去。在接到一个项目之后,我会打开素材库,先漫无目的的逛一逛,或许会碰到感觉合适的素材,将之放入一个单独的临时文件夹。然后我会打开一本杂志,或者躺下听听音乐,或者外出闲逛。让大脑自己去工作。在某一个时刻,心中一动。仿佛有一个东西,躲在一个很微小的角落。此时拿出一只笔在纸上画出前面所见所思所得。慢慢的,形态,体量逐渐清晰。如同不断的调整焦距,咔的一声,对准了。只需按下快门。

Ubuntu使用记 – USB无线网卡安装

八月 14th, 2010 by chris

还是08年的时候,尝鲜装了ubuntu,当初就感觉这个发行版不错,方便易用。不过因为windows经过几次重装,丢失了启动记录,又懒得去恢复,也就把ubuntu删掉了。

生命不息,折腾不止阿。玩硬件太烧钱了,还是玩软件划算。时过2年,ubuntu已经发行了10.04LTS版,用公司那如飞的网速下了ISO文件。先直接在windows下面用wubi安装。记得住上一次用wubi的时候,还出了不少的问题。今天很完美,分配了20G的空间,一路下一步,不过10多分钟的时间就已经装好了。重启之后,启动菜单已经出现了ubuntu的选项。按捺不住的兴奋。10  .04版的界面感觉细致了很多,让我这个最挑剔的人也很难找出太多的毛病。

恩,好像有哪里不对劲。没有网络!Linux系统的驱动一直是一个问题。而且我这次用的是D-LINK 的DWA-130,这是一款USB的无线网卡,看来ubuntu没法自动识别了。翻箱倒柜找出很久没用的网线,不错,一下子就连上了。有了网络就好办了,一切问题都不是问题,google就是那万能的神!搜索之后发现,的确没用原生的驱动。还好,我们有NdisWrapper。NdisWrapper实际上是一个开源的驱动(从技术上讲,是内核的一个模块),它能够让Linux使用标准的Windows XP下的无线网络驱动。如果无线网卡不能被ubuntu识别,或者识别了但是不能正常工作,就可以用NdisWrapper了,这一般都是驱动导致的问题。

通过下面的代码,我们可以安装NdisWrapper的图形界面。
sudo apt-get install ndisgtk

安装完成之后,打开顶部工具条,在这里可以找到“系统-系统管理-Windows无线驱动程序”。
这时候需要无线网卡的windows驱动程序,记得要windows XP的驱动。把DWA-130驱动解压之后,使用”Windows无线驱动程序“,点”安装新的驱动程序“,这时会提示选择inf文件。需要注意的是,这里要选择”dnet130c2.inf“这个文件。点击确定,很简单,无线网卡的驱动就安装好了。人品好的话,这时候就可以在右上方的网络管理里看到无线连接已经激活。如果不幸没用,可以重启一下系统。然后选择要连接的无线热点。

至此,DWA-130 无线网卡驱动的问题基本得到解决了。不过通过使用发现,在系统刚开机的时候,往往会花费大量的时候连接无线热点,经常会出现错误。这时候只能耐心的尝试了。还好一旦连接上之后,网络就很稳定了。

延展阅读
官方的Ndiswrapper文档
Ndiswrapper终极使用指南

Century Travel旅行社:世界尽头篇

八月 5th, 2010 by chris

Where does your world end?

执行创意总监: Alex Martinez
创意总监: Oscar Alcaraz, Napi Rivera
艺术总监: Marti Pujolas
文案: Marc Torrell
摄影师: Garigosa Studio

Do you know more about the designer/artist? Please let us know by writing a comment below with a link to some more info. Thanks in advance!

firstbornmultimedia

八月 1st, 2010 by chris

纽约firstborn媒体设计公司,作品以flash交互网站为主,设计精美大气,交互方式有很多创新之处。