建站常識(shí)
網(wǎng)頁(yè)UI設(shè)計(jì)95%是排版
2006-11-05 17:28:00
本文譯自一個(gè)研究并提供信息架構(gòu)的網(wǎng)站:Information Architects Japan,原文:Web design is 95% typography.
看到這個(gè)題目,大家的第一感覺(jué)可能是“聳人聽(tīng)聞”。不管是95%或是更多或是更少,排版確實(shí)是一個(gè)不可忽略的問(wèn)題。在我所遇到的web設(shè)計(jì)師中,還沒(méi)有發(fā)現(xiàn)誰(shuí)真正在意web排版的??吹竭@篇文章,感觸頗深(因?yàn)槲覄偸褂胠inux的時(shí)候需要配置字體,順便學(xué)習(xí)了不少的字體知識(shí),也順便成了一個(gè)愛(ài)好),周日在家挺閑,為了提高英語(yǔ)水平,順手翻譯了出來(lái)。希望對(duì)大家有所啟發(fā)。
又及,文章多次出現(xiàn)typography這個(gè)單詞。正規(guī)的中文翻譯應(yīng)該是“排印”,但考慮web這個(gè)非印刷媒體,使用排印并不見(jiàn)得好。于是我根據(jù)語(yǔ)境,有時(shí)用“排版”,有時(shí)用“排印”,請(qǐng)讀者明鑒。以下是翻譯正文。
web中的信息有95%是成文的語(yǔ)言。為何web設(shè)計(jì)師應(yīng)該好好學(xué)習(xí)一下設(shè)計(jì)成文信息的主要準(zhǔn)則,換句話(huà)說(shuō),排版?這就是最佳的理由。
回到1969年,Emil Ruder, 一個(gè)瑞士著名的排印大師,其筆下關(guān)于當(dāng)時(shí)的印刷氛圍,簡(jiǎn)直就是我們今天網(wǎng)站的寫(xiě)照:
今天印刷術(shù)的泛濫成災(zāi)讓我們的個(gè)人價(jià)值被輕視,因?yàn)橛魫灥奈覀儸F(xiàn)在并不能掌控印刷中的一切。分割、組織和實(shí)現(xiàn)印刷術(shù)的一切是排印師應(yīng)有的任務(wù),只有這樣,讀者才有更好的機(jī)會(huì)找出吸引她/他的東西。
信息設(shè)計(jì)師是21世紀(jì)的排版師稍微聯(lián)想一下(請(qǐng)用在線(xiàn)取代印刷),這就像是信息設(shè)計(jì)師的職務(wù)描述。分割、組織和實(shí)現(xiàn)印刷術(shù)的一切是“信息設(shè)計(jì)師”應(yīng)有的任務(wù),只有這樣,讀者才有更好的機(jī)會(huì)找出吸引她/他的東西。宏觀排版(所有的文本結(jié)構(gòu))跟微觀排版(樣式和空間的細(xì)節(jié)方面)包括我們今天稱(chēng)為“信息設(shè)計(jì)”的很多方面。也就是說(shuō),信息設(shè)計(jì)師今天正在做排印師30年前的工作:
排版面臨一個(gè)很直白的職責(zé),這就是傳達(dá)信息。沒(méi)有理由能免除排版的這一職責(zé)。一個(gè)并不能閱讀的印刷品只能變成一個(gè)無(wú)用的產(chǎn)品。
優(yōu)化排版就是優(yōu)化閱讀,親和力,可用性,綜合文本平衡等。組織文本塊并結(jié)合圖片,難道不是圖形設(shè)計(jì)師、可用性專(zhuān)家、信息架構(gòu)師應(yīng)該做的嗎?但為什么這是一個(gè)被忽視的主題呢?
為什么這是一個(gè)被忽視的主題? 字體太少?分辨率低?反對(duì)在線(xiàn)排版準(zhǔn)則的一個(gè)觀點(diǎn)是:能用的字太少了。第二個(gè)觀點(diǎn)是屏幕分辨率太低,首先就讓像素或者反鋸齒字體很難閱讀。
文藝復(fù)興時(shí)期:只有一種字體認(rèn)為我們沒(méi)有足夠的字體可用的觀點(diǎn)是不切題的:在意大利文藝復(fù)興時(shí)期,排印師只有一個(gè)字體可用,但這個(gè)時(shí)期還是產(chǎn)生一些頂級(jí)漂亮的排版品:
該排印師應(yīng)該沒(méi)有太在意他手中手能掌握的字體種類(lèi),實(shí)際上也不應(yīng)該太在意字體的選擇。他應(yīng)該更關(guān)心時(shí)代賦予自己手中所有的,并盡力發(fā)揮。
第二個(gè)觀點(diǎn)也并不見(jiàn)得好到哪兒去。在印刷初期,印出來(lái)的字母質(zhì)量比我們今天在顯示器上看到的更差。更重要的是,如果處理得專(zhuān)業(yè),屏幕字體更易于閱讀。信息設(shè)計(jì)不是關(guān)于使用好的字樣,而是關(guān)于使用好的排版。兩真的區(qū)別很大。誰(shuí)都可以使用字樣,有人可以選擇好的字樣,但只有少數(shù)人能夠精通排版。
把文本當(dāng)作用戶(hù)界面對(duì),不同平臺(tái)和不同瀏覽器如何處理字體是惱人的,也對(duì),分辨率問(wèn)題讓超過(guò)五分鐘的注意力集中很困難。但是,好啦,確保文本在所有主要平臺(tái)和瀏覽器中賞心悅目是web設(shè)計(jì)師的職責(zé)。正確的行間距,單詞和字母間距,留白,一定量顏色的使用有助于可讀性。但還不徹底。一個(gè)優(yōu)秀的web設(shè)計(jì)師知道如何跟文本而不僅僅是內(nèi)容打交道,“把文本當(dāng)作用戶(hù)界面”。瞧瞧Kohi Vinh的網(wǎng)站,你大概會(huì)明白他的意思:
稍微著名把文本當(dāng)作用戶(hù)界面的網(wǎng)站例子有: google, ebay, craigslist, youtube, flickr, Digg, repit, delicious. 一個(gè)難以爭(zhēng)辯的必然,把文本當(dāng)作用戶(hù)界面是成功的的唯一參數(shù)。成功的網(wǎng)站設(shè)法同時(shí)創(chuàng)建簡(jiǎn)單的界面和強(qiáng)烈的特征。但這是另外一個(gè)主題了。
#p# 更多參考資料(本文鏈接皆是為用戶(hù)提供資料)
web排版
為了“破除關(guān)于web排版的某些荒謬想法”,他已經(jīng)“按照Bringhurst的工作原則來(lái)構(gòu)建他的網(wǎng)站,并解答如何通過(guò)HTML和CSS中可用的技術(shù)來(lái)達(dá)成各項(xiàng)目標(biāo)”。
優(yōu)化排版的5個(gè)簡(jiǎn)單步驟
他所談?wù)摰呐虐妗安⒉皇悄愕湫偷摹撚媚姆N字體’的排版”。對(duì)于相信讓字號(hào)和行間距默認(rèn)大小使得文本能夠任意縮放會(huì)提高網(wǎng)站可用性的人,這是一個(gè)不錯(cuò)的閱讀材料。
Khoi Vinh
behaviordesign的創(chuàng)始人之一。非常天才的一個(gè)人。
Rod Graves
通訊設(shè)計(jì)師。令人贊嘆的工作:“排版是我絕對(duì)的中心。排版網(wǎng)格和層次通常會(huì)成為我開(kāi)發(fā)的視覺(jué)語(yǔ)言的基礎(chǔ)?!?/p>
A List Apart
通過(guò)字樣通訊。字體和布局。為讀者設(shè)計(jì)。易讀性。字樣,圖形設(shè)計(jì)。web排版的問(wèn)題??刂苭eb排版:字號(hào)、字體和顏色。CSS方法,瀏覽器問(wèn)題,用戶(hù)問(wèn)題和解決方案。
Association Typographique Internationale
ATypl(Association Typographique Internationale) 是一個(gè)專(zhuān)注于樣式和排版的主要國(guó)際組織。創(chuàng)建于1957年,ATypl為國(guó)際樣式社區(qū)之間提供通訊的結(jié)構(gòu),信息和活動(dòng)。
Thinking with Type
書(shū)籍Thinking with Type的在線(xiàn)伙伴:設(shè)計(jì)師,作家,編輯和學(xué)生的關(guān)鍵指南。
Typetester
比較屏幕字體樣式。
Typophile
Typophile是一個(gè)會(huì)員制和贊助商支持的社區(qū)。2000年以來(lái)Typophile引領(lǐng)開(kāi)放合作,并且我們總是能學(xué)習(xí)到好主意。我們他們伺服超過(guò)每月3百萬(wàn)的網(wǎng)頁(yè)。
Typohile Wiki
一個(gè)有關(guān)樣式和設(shè)計(jì)所有一切的用戶(hù)創(chuàng)建百科全書(shū)。用戶(hù)為建立協(xié)作,有用,平衡和相關(guān)的資源而創(chuàng)建和編輯條目。
The Next Big Thing in Online Type
比爾蓋茨要計(jì)算機(jī)用戶(hù),哦,微軟用戶(hù),能夠擁有一個(gè)更舒暢的屏幕閱讀體驗(yàn)——太重要以至于提高屏幕閱讀成為他最重要的五件事之一。
Emil Ruder, Typographie (Amazon)
Emil Ruder’s Typography是一本永恒的書(shū),幾代排印師和圖形設(shè)計(jì)師都從中學(xué)習(xí)基本原理。Ruder, 二十世紀(jì)最偉大的排印師之一,是一個(gè)拋棄并用新的規(guī)則取代Emil Ruder傳統(tǒng)規(guī)則的先鋒,來(lái)滿(mǎn)足新排印技術(shù)的需求。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2009-07-21 07:45:00] Qzoneing主題視覺(jué)設(shè)計(jì)分享
- [2009-12-17 11:55:00] 淺談白社會(huì)交互設(shè)計(jì)的創(chuàng)新(一)
- [2005-12-29 21:19:00] 設(shè)計(jì)精彩網(wǎng)頁(yè)九“慎”
- [2010-11-11 08:23:00] 龜毛的交互設(shè)計(jì)師
- [2009-06-23 14:22:00] 如何設(shè)計(jì)廣告的用戶(hù)體驗(yàn)?
- [2014-06-14 19:55:34] 中小網(wǎng)站設(shè)計(jì)公司的的轉(zhuǎn)型之路分析
- [2010-05-15 09:10:00] 網(wǎng)易IDJ音樂(lè)站改版—UCD設(shè)計(jì)思想初體驗(yàn)
- [2009-06-12 08:33:00] 交互設(shè)計(jì)師是一個(gè)沒(méi)有前途的工作?(譯)
- [2006-06-22 21:47:00] 全面認(rèn)識(shí)網(wǎng)頁(yè)中附加碼的作用
- [2007-05-15 16:23:00] 網(wǎng)頁(yè)信息的表現(xiàn)類(lèi)型和常見(jiàn)的排版方式
- [2019-05-06 10:34:54] 定制網(wǎng)站和模板網(wǎng)站的區(qū)別在哪
- [2009-12-21 08:51:00] 商品評(píng)論的設(shè)計(jì)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
響應(yīng)式設(shè)計(jì) 營(yíng)銷(xiāo)型網(wǎng)站 青島網(wǎng)站建設(shè) 青島網(wǎng)頁(yè)制作 HTML5 集團(tuán)公司網(wǎng)站建設(shè) 青島網(wǎng)站優(yōu)化 集團(tuán)性網(wǎng)站 頁(yè)面設(shè)計(jì) 營(yíng)銷(xiāo)型網(wǎng)站建設(shè) SEO 力圖數(shù)字科技 青島網(wǎng)站制作 青島SEO 青島開(kāi)發(fā)區(qū)建站公司 青島輪胎網(wǎng)站設(shè)計(jì)公司 php程序 微信營(yíng)銷(xiāo)的優(yōu)勢(shì) 青島網(wǎng)站SEO 插畫(huà) css H5 營(yíng)銷(xiāo)策略 圖形網(wǎng)格 網(wǎng)站SEO 中小型企業(yè)網(wǎng)站建設(shè) 官網(wǎng)建設(shè) 微信小程序 IT資訊 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè)