小論中英文網站的設計差異

顯示結果從第 1 筆 到 8 筆,共計 8 筆
  1. #1
    萌え尽き症候群 琥珀 的大頭照
    註冊日期
    2002-08-17
    所在地區
    中和區
    討論區文章
    10,022

    小論中英文網站的設計差異

    文章來源:小论中英文网站的设计差异

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

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

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

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

      你觉得怎么样?两个站点采用了完全一样的界面和布局,但你是不是仍然觉得中文站要乱那么一点点?好,我们抱着学术研究的严谨心态来看看,究竟是哪里不一样。首先我们对比一下菜单。



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

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



      看到吗?中文比英文要高(黄色VS灰色),但是行间距反而更小(红色VS黑色)。这说明什么呢?完美的最高境界是“增一分嫌多,减一分嫌少”,适当的留白是保证整体视觉效果的重要因素。不要小看这“一点点”,正是这一点一点的空白,足以决定整个外观的成败。

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

      首先我们要宏观地来看一下,还是Microsoft。缩小一点,再缩小一点。然后我们把模糊的字符用色块覆盖。



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

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

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

      MicroSoft中国这个情况还不是很严重,但仍然出现像“开发工具”、“商务管理”、“所有产品”这样的词。随便翻一个网站,看看这个现象有多么普遍。




      而这样的“无差异纵列”,很容易使本来就规整的方块字变成铁板一块。宏观看整体,微观看细节,如果你说访问者不会像我们这样后退N步,来研究文字韵律的话,我们现在再来看一下细节。

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



      我的研究方法很简单——用色块,这样比较有效地排除掉一些干扰因素。我按照英文的阅读习惯(按词阅读),以及中文的阅读习惯(按字阅读),来放置我的宝贝色块。



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

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

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



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

      我把这个图再缩小一点,这个现象就更加明显。我认为这就是大多数中文网站给人“挤”的感觉的原因。可以看出韩国设计师为了适应“一统天下”的界面,作了很多努力,对比下图。



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

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

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

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

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


    此文章於 2006-09-23 01:20 AM 被 琥珀 編輯。

  2. #2
    會員 warzero 的大頭照
    註冊日期
    2003-09-15
    所在地區
    光纖 30M/10M
    討論區文章
    1,885

    回覆: 小論中英文網站的設計差異

    好文章,受教了
    説來真巧,自己最近也是小研究網頁風格。

    這應該說各國的風格都有其獨特的存在。
    基本上好像也變成了一種訂立化,一看到那種風格就可以馬上猜出是來自哪一國的... XD
    至於談話方式也一樣,中國和台彎的方式也是有很大的差別,也是可以從中來猜出...
    雖然說這樣來根據並不是完全正確的... XD

  3. #3
    萌え尽き症候群 琥珀 的大頭照
    註冊日期
    2002-08-17
    所在地區
    中和區
    討論區文章
    10,022
    說到四字成語的影響,這確實是一個值得探討的地方。

    琥珀並不鼓勵使用 2 個文字、4 個文字這樣的中文使用、排列、翻譯邏輯。常常看到許多中文化的軟體、論壇、部落,不是用所謂的公版,就是製作者自行修改的中文句子。至於呈現的文字內容,就變成 2、4、6、8 這種偶數字數。或許這也是「服從語言本能」吧?

    完全的 I18N+L10N 畢竟只是理想。大部分的軟體,其實只做到 I18N,而 L10N 仍然有進步空間。L10N 不只是 translate 而已。比起 I18N,L10N 才是麻煩 (但還說不上是困難) 的工作。

    L10N 的問題,其實不完全是中文、日文、阿拉伯文的錯。這已經不是翻譯的問題了。這變成文化問題、民族問題、種族問題。其實「英文」本身就是一個問題、一種錯誤,不管各位如何找理由去辯解,這已經是一個客觀的事實。

    可以
    不可
    不行

    文章標題
    文章內容
    文章圖示
    隱藏文章
    回覆隱藏
    其他選項
    附加檔案
    主題訂閱
    通知類型
    主題評分
    主題管理
    出生日期
    首頁連結
    即時通訊
    自訂頭銜

    這種情形真的是太多太多了。這樣做只是表面上的好,雖然這的確也有幫助。以日文來說,其實要做到這樣的文字配對,也是可以的,不過漢字就會用上不少。但是各位去看日文網頁,發現刻意去編排文字字數的還是有限,甚至常常可以看到中日文的相互搭配,也一樣很舒服。當然,各位要說這是日文的「服從語言本能」的結果,也是可以理解的。

    不過大家仔細想,中文真的就非得兩個字、四個字、八個字不可嗎?明明可以用一個字、三個字表達的句子,常常就會「自動配對」、「自動成雙」。

    時代不同了,方法不可能一成不變。電腦上的文字資訊交流,除非是必要的情形,不然求通順達意就可以了,不必刻意兩個字兩個字去搭配。自己已經感到厭煩許久了,也希望大家未來在寫文章的時候,在句子的使用上,至少能改變一下吧!

  4. #4
    村人A lenbo 的大頭照
    註冊日期
    2001-04-30
    所在地區
    plala.co.jp
    討論區文章
    11,094

    回覆: 小論中英文網站的設計差異

    突然覺得…琥珀ちゃん那麼強~一般學校資工系也學不到吧?
    (至少我唸的資工輔系及旁觀那些資工系學生的感覺)
    究竟是如何學習的啊?

    就像我雖然唸電機系;卻連什麼電源供應器的配線都看不太懂ヾ(-_-; ) 真是悲哀~

  5. #5
    會員 warzero 的大頭照
    註冊日期
    2003-09-15
    所在地區
    光纖 30M/10M
    討論區文章
    1,885

    回覆: 小論中英文網站的設計差異

    引用 作者:琥珀
    說到四字成語的影響,這確實是一個值得探討的地方。

    琥珀並不鼓勵使用 2 個文字、4 個文字這樣的中文使用、排列、翻譯邏輯。常常看到許多中文化的軟體、論壇、部落,不是用所謂的公版,就是製作者自行修改的中文句子。至於呈現的文字內容,就變成 2、4、6、8 這種偶數字數。或許這也是「服從語言本能」吧?

    完全的 I18N+L10N 畢竟只是理想。大部分的軟體,其實只做到 I18N,而 L10N 仍然有進步空間。L10N 不只是 translate 而已。比起 I18N,L10N 才是麻煩 (但還說不上是困難) 的工作。

    L10N 的問題,其實不完全是中文、日文、阿拉伯文的錯。這已經不是翻譯的問題了。這變成文化問題、民族問題、種族問題。其實「英文」本身就是一個問題、一種錯誤,不管各位如何找理由去辯解,這已經是一個客觀的事實。

    可以
    不可
    不行

    文章標題
    文章內容
    文章圖示
    隱藏文章
    回覆隱藏
    其他選項
    附加檔案
    主題訂閱
    通知類型
    主題評分
    主題管理
    出生日期
    首頁連結
    即時通訊
    自訂頭銜

    這種情形真的是太多太多了。這樣做只是表面上的好,雖然這的確也有幫助。以日文來說,其實要做到這樣的文字配對,也是可以的,不過漢字就會用上不少。但是各位去看日文網頁,發現刻意去編排文字字數的還是有限,甚至常常可以看到中日文的相互搭配,也一樣很舒服。當然,各位要說這是日文的「服從語言本能」的結果,也是可以理解的。

    不過大家仔細想,中文真的就非得兩個字、四個字、八個字不可嗎?明明可以用一個字、三個字表達的句子,常常就會「自動配對」、「自動成雙」。

    時代不同了,方法不可能一成不變。電腦上的文字資訊交流,除非是必要的情形,不然求通順達意就可以了,不必刻意兩個字兩個字去搭配。自己已經感到厭煩許久了,也希望大家未來在寫文章的時候,在句子的使用上,至少能改變一下吧!
    要像琥珀兄那樣使用嗎?

    沒有必要
    電腦中毒了
    不太硬的Raid
    this behavior is by design
    tell me why or why not

    還是要像古代中國用的語法?
    短短一字兩字就代表很長的意思?
    只是在現在的現代裏,語法compression太強會讓一些人無法正常解壓的呀... XD

    比喻
    1個字是 Ultra
    2個字是 Maximum
    4個字是 Normal
    8個字是 Fast
    以上是 Store

    剩下的3、5、6、7 -> 預設選擇沒有... XD
    套用這句 this behavior is by design

    小弟來亂的...


    此文章於 2006-10-23 02:28 AM 被 warzero 編輯。

  6. #6
    萌え尽き症候群 琥珀 的大頭照
    註冊日期
    2002-08-17
    所在地區
    中和區
    討論區文章
    10,022
    不是刻意製造的中文句子就好了。偶爾用英文、日文、韓文等外國語表達也不是什麼了不起的事。只要不做作,加上配合當時的心境,用其中一種語言文字去詮釋就好了。

    還有一種現象,就是強迫一定要塞入同等長度的文字。可能是一個表格、一個區域,然後具有多個關鍵字或標籤。在 pczone 還沒升級版本之前,其實就有這種現象,經常發現四個字在一起,或是在有多個核取方塊的敘述中,塞入同等長度的文字。例如第一行敘述是「自動分析連結」,第二行敘述是「停用表情符號」,第三行敘述是「顯示個人簽名」,都佔用六個文字空間。各位以為這樣的結果呈現就是 perfect 嗎?長久下來,其實是不太好的,因為缺乏彈性。就像各位聽歌一樣,總不希望每次聽到的歌詞、旋律、節奏,都是一成不變的吧?

    能自然一點,就自然一點。不用強迫自己一定要「依循古法」、「發揚文化」(又是四個字……)。

  7. #7
    萌え尽き症候群 琥珀 的大頭照
    註冊日期
    2002-08-17
    所在地區
    中和區
    討論區文章
    10,022
    就自己所知道的,中文的「呼吸」就只有「避頭尾」這個了。例如 句號、逗號、問號、下引號、右括號、分號、頓號 這些,都具有此特性。

    USP10.DLL 這個檔案很重要,因為這是視窗系統、辦公室軟體,處理複雜字集的依據。例如藏文就需要此檔案,而且版本還不能太舊。不確定是否中文也是由這個檔案所控制?

  8. #8
    會員 gulian 的大頭照
    註冊日期
    2005-04-30
    所在地區
    未知(MAX 1Mbps)
    討論區文章
    35

    回覆: 小論中英文網站的設計差異

    幫琥珀補上.... wiki百科的解說...

    摘錄 http://zh.wikipedia.org/wiki/Uniscribe

    Uniscribe是微軟公司開發的Windows作業系統為正確演示Unicode文字而開發的組件。系統的核心是一個名為USP10.DLL的DLL。它從Windows 2000開始連同Windows一起綑綁;Win9x的用戶在更新至Internet Explorer 5.0之後,系統亦會安裝有本組件。此外,Windows CE從5.0開始亦支援Uniscribe。

類似的主題

  1. 【分享】 中英 英文 文章翻譯網站
    作者:peace305 所在討論版:-- 網 路 軟 體 討 論 一 版 (Browser,Email
    回覆: 4
    最後發表: 2004-08-03, 11:02 PM
  2. 自動翻譯日文網站的網站
    作者:rEdS 所在討論版:-- 優 質 網 站 分 享
    回覆: 19
    最後發表: 2003-01-30, 12:46 PM
  3. 【問題】請問那裡可以找到介紹台灣的英文網站
    作者:Perse 所在討論版:-- 閒 話 家 常 灌 水 版
    回覆: 3
    最後發表: 2002-06-02, 10:43 PM
  4. 在英文網站寫住址要怎麼寫ㄋ
    作者:cfrank 所在討論版:-- 閒 話 家 常 灌 水 版
    回覆: 4
    最後發表: 2001-11-02, 10:46 AM

 

此網頁沒有從搜尋引擎而來的訪客

發表文章規則

  • 不可以發表新主題
  • 不可以回覆文章
  • 不可以上傳附加檔案
  • 不可以編輯自己的文章
  •