小论中英文网站的设计差异

news/2024/5/9 21:17:57/文章来源:https://blog.csdn.net/iteye_170/article/details/81445498

你有没有被客户强迫照搬英文网站的经历?
你有没有被领导指责为比较“土”的作品?
你有没有感到疑惑,因为你搬过来的“英文”网站总是那么别扭?

如果有的话,这篇文章也许能帮你提供一些证据,至少让你自己能明白,为什么不能照搬英文网站的设计规则。

首先我们找一个非常有名非常牛气的网站,对比一下它的英文和中文网站的区别。恕我无知,我第一个想到的就是MicroSoft了。

英文站:http://www.microsoft.com/
中文站:http://www.microsoft.com/china/

你觉得怎么样?两个站点采用了完全一样的界面和布局,但你是不是仍然觉得中文站要乱那么一点点?

好,我们抱着学术研究的严谨心态来看看,究竟是哪里不一样。

首先我们对比一下菜单。


点击放大

放大以后看,仍然是中文菜单比英文菜单要乱那么一点点。同时我们发现,在行数相同的情况下,中文菜单比英文菜单要长

放大以后看,仍然是中文菜单比英文菜单要乱那么一点点。同时我们发现,在行数相同的情况下,中文菜单比英文菜单要长。

再放大一点,加上辅助色块对比。


点击放大

看到吗?中文比英文要高(黄色VS灰色),但是行间距反而更小(红色VS黑色)。

这说明什么呢?完美的最高境界是“增一分嫌多,减一分嫌少”,适当的留白是保证整体视觉效果的重要因素。不要小看这“一点点”,正是这一点一点的空白,足以决定整个外观的成败。

接下来我要推出的观点,完全是本人在多年实践中总结出来的。关于中文字符和英文字符差异而导致的设计效果差异(希望能有机会对此进行深入研究。)

首先我们要宏观地来看一下,还是MicroSoft。

缩小一点,再缩小一点。然后我们把模糊的字符用色块覆盖。

哪个会让你觉得舒服一点?

对于菜单或列表这类的纵列排版方式,英文每个单词的长度不同,就自然而然地形成一种起伏,比如“Support”和“Knowledge Base”就相差了大约7个字符的长度。这种差值被排列成一串以后,整体便有了一种服从语言本能的节奏。我们都知道,节奏韵律是公认的审美准则之一,而天然形成的节奏更是完全契合人类心理期望的一种韵律。

而中文呢?它是方块字。每个汉字占的宽度是一样的,同时我们不知道是受什么影响(也许是成语?),常常习惯于用四个字来给菜单命名,出现著名的“4字词”现象。

MicroSoft中国这个情况还不是很严重,但仍然出现像“开发工具”、“商务管理”、“所有产品”这样的词。

随便翻一个网站,看看这个现象有多么普遍。


点击放大


点击放大

而这样的“无差异纵列”,很容易使本来就规整的方块字变成铁板一块

宏观看整体,微观看细节,如果你说访问者不会像我们这样后退N步,来研究文字韵律的话,我们现在再来看一下细节。

现在对比的是MicroSoft的另一个列表菜单。

我的研究方法很简单——用色块,这样比较有效地排除掉一些干扰因素。

我按照英文的阅读习惯(按词阅读),以及中文的阅读习惯(按字阅读),来放置我的宝贝色块。

如何?英文的韵律仍然存在,如同音乐的节拍一样,“嘀~嘀~~哒,嘀嘀~~哒”,前面说了,这是一种天然的、服从语言本能的节奏,因此你永远不会觉得别扭。而中文呢?

“哒!哒!哒!哒!哒!……”,它的韵律,就是刻板的、严谨的、永远不变的。

如果你没有意识到方块字的这种属性对于通过HTML来实现的设计来讲有多么重要,我们可以再看一个例子。

这次我选择新版的Yahoo EN和Yahoo韩国(为什么不选Yahoo中国?嗯……因为我写这个的时候它还没有改成新版),韩文、日文和中文都很相似,虽然不是严格的横平竖直的方块,但每个字仍然是具有固定比例的。(从这个程度上来讲,中文的情况会比韩、日文更加突出)


点击放大

通过这种对比,我们还发现一个新的规律——“自动回行”。可以看到,英文的自动回行是以单词为最小单位的,前面我们说过,每个单词的长度不尽相同,所以,自然的空白出现了,整个页面清透了;方块字的自动回行以字为最小单位,所以总会在同一个地方回行,空白几乎不可能出现(除非文字不足一行),整个页面被挤得满满当当,透不过气来。

我把这个图再缩小一点,这个现象就更加明显。

我认为这就是大多数中文网站给人“挤”的感觉的原因。

可以看出韩国设计师为了适应“一统天下”的界面,作了很多努力,对比下图。

韩版网站的用色更加鲜亮,阴影去掉了,沉重的黑边也去掉了。这些微小的改动,使图标在沉重的方块堆里更突出些。想想把英文站上的图标搬过来会怎么样?

好了,我们回过头来总结一下

1、中文的行间距太小;
2、中文缺乏一种起伏的节奏;
3、中文的自动回行有重大缺陷。

结论:中文一不小心就变成铁板一块

如何解决这个问题,设计师有的是办法,我就不一一赘述了,我这里想说的是:中文和英文由于语言属性根本上的差异,因此完全照搬英文站的设计是一种愚蠢的、教条的思路,尤其当这种设计方案需要用同一种计算机语言(XHTML+CSS)来实现的时候,细节的修改就显得更加重要。建议还是多参考亚洲同行的作品,前两年韩国和日本网站模板盛行,有它的道理,至少我很少看到他们用纯黑色——嗯,就说到这儿,不多不少刚刚好,完美!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_825279.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型网站技术架构演进

转载:https://cloud.tencent.com/developer/article/1396863 【大型网站技术架构笔记】系列是阅读《大型网站技术架构核心原理与实践》一书的一些笔记,记录了原书的一些重要内容以及我的个人理解。其中很多内容网上都能找得到。其实整本书,我…

韩国网站构图和配色分析

我们先看看:韩国网站构图和配色分析-构图篇 [NextPage] 韩国网站构图和配色分析-配色篇

中国顶级品牌HONEST官方网站设计解析—道格瑞恩内部资料

中国顶级知名品牌 HONEST LIGHTERS 产品定位于:高档的打火机、名贵的雪茄剪与法式烟斗 销售定位与:主要出口欧洲与美洲国家的高档市场 网站作品浏览地址:http://218.30.101.85 http://www.0086.com设计与制作公司…

国际知名网站设计大师精品设计集

http://www.2advanced.com/ http://www.01-la.com/ http://www.preloaded.com/ http://www.aliveis.com/ http://www.linkdup.com/ http://www.mixdup.com/

网站ICP备案流程图解

1.访问信息产业部备案网站 (网站打开比较慢,请耐心等待: www.miibeian.gov.cn )2.网站被通信管理局拒绝的常见原因(必读) 2.点击接受,开始注册 这个是信产部的流程图 备案流程见下: 3.开始填写个人资料:4.收取电子邮…

如何知道一个网站内页是否被Google收录或更新

请到此http://toolbar.google.com/intl/zh-CN下载安装Google工具条,安装成功后,打开它的“工具栏选项”,把“网页资料”菜单打上勾。 然后通过http打开你的网页(不能是本地文件)。点击Google工具条的蓝色“i”这个按钮,在下拉菜…

韩国商业网站界面设计分析------推荐2005-5-24 出处:vipcn.com

一、页面结构   韩国网站的页面结构相对来说比较简单,可以说几乎是统一的风格,顶部的左边是网站的logo,右边就是它的导航栏,和国内网站不一样的地方它甚少采用下拉菜单的样式,而是把各级栏目的下级内容放在导航栏的下…

33个优秀艺术类网站界面欣赏

1、http://www.apparelidea.com 2、http://www.biola.edu/undergrad 3、http://www.chrizdee.de/wordpress 4、http://www.daleharris.com 5、http://www.darasgarden.com 6、http://www.electricpulp.com 7、http://www.timeforcake.com 8、http://www.freepeople.com 9、http…

10个最经典的网站改版

一般来说,网站设计制作到最后发布到网上,这只是网站发展的最初一个阶段,网站作为公司的一个线上宣传手段,极大的体现了公司的理念和宗旨,是公司不可分割的一部分。公司要发展,网站也会不断的更新变化。让我…

网站中文字的视觉设计

可能很多人都要问,网站的文字还需要设计吗?对于很多的网站来说,字在整个网站的内容中占了80%以上甚至更多,或者换个角度上说,网站可以没有颜色,没有图片,但唯独不能没有文字。一个产品团队&…

网站的视觉路径和版式设计

cooper谈到用户的视觉路径一般是:从上到下,从左到右。好的视觉设计路径应该是顺应这样的用户习惯,糟糕的设计会让用户无所适从,焦点到处都是。当然,上图的视觉路径图并非绝对的,浏览习惯因人而异。 网站中方…

国外web设计教程资源网站收集

作者authorSawser来源http://sawse.com/2007/11/21/top-12-sites-and-tools-for-web-design-and-inspiration/不管你是专业还是业余的网页设计者,或者仅仅想了解一下网页设计是何物的,这里有些好棒的资源值得去浏览并收藏。这些收藏涵盖了各种设计类型&a…

互联网上最独特的20个网站

当你在创建一个新的网站的时候,一个版面独特的网页总会在不经意间激发你的灵感。不知道这些使用背景图片产生强烈视觉冲击的页面有没有给你带来设计灵感。1, http://www.popmatik.co.uk/ 2, Digitalmash.com 3,Melissahie.com 4&a…

60 个激发你灵感的电子商务网站展示

电子商务多火啊,可是多数电子商务网站做得都很垃圾,这里列出了 60 个设计精美的电子商务网站,你值得看看。 Heart Breaker Fashion Here You Buy Vintage-inspired Fashion Shop Sanctuary T Shop Sancuary T Showcases Awesome Beauty And H…

在线医生预约网站ZocDoc获高盛2500万美元C轮投资

据美国科技博客techcrunch报道,在上个月获得俄罗斯风投机构DST 5000万美元投资之后,位于纽约的在线医生预约网站 ZocDoc昨日在其C轮融资中又从高盛投资公司募集2500万美元,这使得ZocDoc公司C轮融资总额达到了7500万美元。至此,该公…

Box of Bundles:免费设计资源网站

Box of Bundles 网址:http://www.boxofbundles.com 地点:美国 创立时间:2012年2月 用户群:设计师 Box of Bundles 是一个免费提供创意设计资源的新网站。类似酷站之前推荐过的免费的设计资源素材网站 Premium Pixels,都…

给你的网站加上站内搜索---Compass入门教程

Compass(基于Lucene)入门教程 1 序言 2 Compass介绍 3 单独使用Compass 4 springhibernate继承compass 4-1 jar包 4-2 配置文件 4-3 源代码 4-4 说明 4-5 测试 5 总结下吧 1 序言 这些天一直在学点新的东西,想给毕业设计添加点含量,长时间的…

想学习建个网站?WAMP Server助你在Windows上快速搭建PHP集成环境

我想只要爬过几天网的同学都会知道PHP吧,异次元的新版本就是基于PHP的WordPress程序制造出来的,还有国内绝大部分论坛都是PHP的哦。据我所知很多同学都想要试着学习一下PHP,无奈要在Windows下安装搭建好一个PHP环境来学习对于菜鸟同学来说繁琐…

计算机组成原理移位图,逻辑运算和移位指令-计算机组成原理与汇编语言-电子发烧友网站...

3.4.1 逻辑运算和移位指令 1.逻辑运算指令(1)NOT OPRD该指令对操作数进行求反操作,然后将结果送回。操作数可以是寄存器或贮器的内容。该指令对标志位不产生影响。例如: NOT AL(2)AND指令该指令对两个操作数进行按位相“与”的逻辑运算。即只有参加相与的…

IE浏览器中用Firebug调试网站的方法

对于大部分做前端设计者而言应该都使用过Firefox浏览器下一款调试网站的扩展插件firebug吧,功能非常的强大,对于我们找出网页兼容性的问题非常的有效。不过对于很多不喜欢使用Firefox浏览器的开发者而言,那么IE浏览器有没有类似的插件呢&…