• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】淺談網站響應式字體排印技巧




    淺談網站響應式字體排印技巧

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自Ilite.me的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

    教學大綱:

    我們建網站,一般是從定義正文文本開始。正文文本的定義決定了你主要內容欄的寬度,而其它的屬性以前則幾乎是遵循它本身。以前是如此。直到不久前,屏幕分辨率還是基本相近。現在我們面對的是各種大小的屏幕和分辨率。情況變得複雜多了。


    設計理論教學開始

    我們建網站,一般是從定義正文文本開始。正文文本的定義決定了你主要內容欄的寬度,而其它的屬性以前則幾乎是遵循它本身。以前是如此。直到不久前,屏幕分辨率還是基本相近。現在我們面對的是各種大小的屏幕和分辨率。情況變得複雜多了。

    藉著網站重新發布的熱火,我匆匆地寫了一篇關於響應式字體排印的博文,焦點是我們最近的實驗相關:響應式字體排印。如果不了解iA的歷史,你可能會忽略掉我們新網站上的一些響應式字體排印和設計方面的關鍵要素。我沒有把與該話題相關的文章整理一起,相反,我決定從頭開始,一步一步解釋響應式排印。下面是第一步。

    淺談網站響應式字體排印技巧

    為了避免給任何可能大小的屏幕設計不同的布局,許多web設計師採用了響應式web設計這一概念。簡單地說,這個理念是,你的布局可以自動按照屏幕的分辨率來調整。它有多種解釋。我最喜歡的是:

    自適應布局:分步地調整布局以適應有限種(屏幕)大小。

    流體布局:持續不斷地調整布局以適應各種可能的寬度。

    雖然兩者都有優缺點,我相信,分段儘可能少的自適應設計是最好的。因為可讀性比擁有一個總是和viewpoint(視口)一樣寬的布局更重要。這個觀點本身所涉及的因素相當複雜,值得商榷。但為了確保最佳的可讀性,須控制文本大小(內容欄的寬度),因此流體布局帶來的問題比它解決的多。更多這方面的內容下次再講。

    注意:響應式設計已經結合了許多宏觀的字體排印問題(字體大小、行高、列寬)。所以響應式設計在許多方面已經結合了響應式字體排印。我們發布在網站上的第一篇關於響應式字體排印的文章主要是關於我們使用分級字體(譯註:字體大小階梯式地改變)。我想在下篇文章中講分級,現在深入講屏幕上響應式宏觀字體排印的基礎。

    選擇一種字體

    正確的基調

    你早晚要決定使用那種字體。你對字體的選擇基本就決定了基調,但,由於每種字體都有它自己的品質且要求(或限制)特定的處理方法,字體的選擇會帶來諸多視覺和技術上的結果。有了web字體,你現在有很多的字體可以選擇,於是找到一種合適的字體又變成一項挑戰。

    我們通過為這個網站設計自己的字體來實驗分級字體。我們選擇了一種襯線字體,因為它符合我們的基調,映照了我們內容的文雅(至少我們是這麼認為)。我們給iA Writer選擇的是一種等寬字體。因為我們軟件的主要目的是幫你獲得第一份草稿,我們特地選了Nitti–一種讓人同時感覺有力和細心的字體。選擇一種等寬字體這一決定,也是由於第一代iPad系統不能自動調整比例字體的間距。我們沒有使用一種可能被渲染得很糟糕的比例字體,而是決定直接選一種等寬字體。

    襯線還是無襯線?

    通常選擇會落在襯線和無襯線之間。這本身就是一個複雜的問題,但有一條簡單的經驗法則或許可以幫你:襯線字體是一名牧師,無襯線字體是一名黑客。誰也不比誰更好,但是由於種種原因,襯線字體更具專制感,而無襯線字體更加民主。記住,這可是夾在兩條彎彎曲曲的線中五千年的印刷史,所以別太認真。

    許多人還是認為,就屏幕上的字體排印,“襯線還是無襯線”這個問題本身就能回答。實際上沒那麼簡單。與普遍觀念相反,如果你設置的正文字體大於12像素,襯線和無襯線的表現就會一樣好。低於12像素,襯線字體渲染的不夠銳利,但反正(這把我們帶到第二點)在現代的顯示器上12像素實在太小。

    大小?

    你的正文字體的大小並非由你的個人喜好決定。它取決於閱讀距離。考慮到通常電腦要比書本遠,桌面字體的尺寸需要比印刷品上使用的字體更大。

    下邊的插圖說明,正文文本離你越遠,它就應該更大。兩個黑色的A和兩個紅色的A的尺寸相同。但由於右邊放的較遠,看上去更小。右圖中的紅色A看上去和左圖中的黑色A一樣大:

    淺談網站響應式字體排印技巧

    你把文本放得越遠,它看起來就越小。文本放的越遠,你需要把它設的更大來彌補一個更大的閱讀距離。到底要多大,這裡邊也有學問。如果你沒有經驗,一個好用的辦法是,手舉一本印刷良好的書,把它放到一個能夠讓你舒服地閱讀的距離,同時朝你的網站看來比較。

    沒有web設計經驗的平面設計師會對,web上良好的正文字體與印刷品相比需要達到的大小感到吃驚。注意,只有當你把它邊靠邊比較時它才算大,在一定距離看則不會。

    淺談網站響應式字體排印技巧

    如果在增大正文字體大小來匹配后,新的文字大小一開始嚇到你,別擔心,這是正常的。不過,一旦你習慣了它,你就不會再去用“標準”的字體大小了。

    我們自2006年開始推廣這些“perspectively proportional(遠視比例)”字體大小。一開始,我們宣揚用16像素Georgia做正文字體的基準引來不少憤怒的眼光和嘲笑,但現在它或多或少已經是一項共同標準。隨着分辨率的不斷提高,那項標準正慢慢過時。後邊還會講到。

    行高和對比度

    雖然正文文字大小可以通過距離觀察的方法來估算,行高則需要一些調整。考慮到更大的閱讀距離和(我們所說的)像素點問題,最好給屏幕文本比印刷文本更多一點的行高。140%是一個不錯的基準,但當然,這取決於你所用的字體。

    淺談網站響應式字體排印技巧

    今天你要確保對比度不是太低(如,灰色文字在淺灰色背景上)或太花哨(如,粉紅色在黃色上)。由於屏幕字體排印是設計為白底黑字,用較暗的背景會遇到點困難,但如果做的正確的話,也可以。現代高對比度屏幕讓深灰色文字或淺灰色背景的使用也成為可能,取代深黑色字體加白色背景。但這也並非最重要的問題。

    iPhone vs iPad

    關於響應式字體排印的很多東西,我們都是在為我們的寫作應用找最佳字體的過程中學到的。當我們設計完iPad版iA Writer的時候,我們花了一周時間去尋找最佳的字體排印定義。那時,iPad的高分辨率是一個全新的挑戰,我們花了很久才理解它的工作方式。當Apple先後推出iPhone和iPad上的視網膜屏幕,一切又變了。我們可以寫一本書來解釋我們是如何找到iA Writer字體標誌性的外觀,但還有許多更為普遍的東西要說,所以我就直入正題。

    如果你拿我們當前的iPhone版Writer同iPad版比較,你會發現它們的字體不一樣。

    淺談網站響應式字體排印技巧

    為什麼要在iPhone和iPad上用不同的字體大小?如果你認真地閱讀了前面的解釋,你可能已經猜到了。

    雖然閱讀距離不總是一樣,通常你會把iPad拿的稍微遠一點。不管你是在早餐桌上用iPad,坐沙發上時放在膝蓋上,或者躺在床上把iPad放在臉的正前方,你的這些閱讀距離都不同。這是一想全新的挑戰,因為在台式機或筆記本電腦上的閱讀距離不會變化那麼大。為了使它在各種場景下都能使用,我們選用最遠的閱讀距離來定義字體大小。其結果是,你在床上閱讀它時,文字可能會感覺比通常的大一點,但並非不舒服。通常你也不會在床上使用一個躺在你肚子上的寫作應用。

    iPhone上你能擁有的屏幕資源更少一些,所以你不得不做出調整。

    幸運的是,iPhone被拿着時和臉的距離更近,所以雖不得不使用更小的文字,但效果很好。從一個平均的閱讀距離看,iPhone和iPad的文字大小感覺上差不多。

    淺談網站響應式字體排印技巧

    由於iPhone被拿的更近,行高可以更緊一些。這也有必要,因為屏幕更小。

    淺談網站響應式字體排印技巧

    你在為屏幕做設計的時候,並非事事如願。交互設計是一項工程:它不是關於尋找最完美的設計,而是尋找最佳的折中方案。在我們的情況,我們不得不降低行高,並縮留小留白和字符間距:

    淺談網站響應式字體排印技巧

    這些調整如此微妙,如果你不知道,你就不會注意到間距有多小。為什麼我們不幹脆去掉留白?留白不是為了美觀,它讓文字呼吸,幫助眼睛從一行跳到另一行。如果你覺得這些聽起來全都很深奧:不行,目前為止,我們才涉及基礎內容。

    桌面電腦呢?

    有些人抱怨Mac版Writer的字體太大。就像我們須要為iPad(拿在不同閱讀距離)版選擇,數個最小字體中最大的一個,我們為Mac版做了同樣的選擇。那時我們的基準是24英寸高分辨率的iMac,在其上感知的大小和別的設備基本一樣。

    淺談網站響應式字體排印技巧

    因為可以運行iA Writer的Mac電腦型號有限,我們可以確定不同可能的分辨率。我們觀察了各種可能的配置,以確定該文字大小對大多數機器來說是最好的折中方案。

    淺談網站響應式字體排印技巧

    你也許會問“為什麼不直接讓用戶來選擇文字大小呢?嗯,調整文字大小不是喜好的問題,而是閱讀距離的問題。由於大多數網站和應用的文字過小,新顧客一開始會選擇他們習慣的文字大小,也就是:文字太小,無法體驗到我們寫作應用的全部樂趣。其主要原因不是我們想把特定外觀強加給全部用戶:我們想要的是,不用設置或摸索就能用好iA Writer,你用它唯一能做的事情就是寫作。這已成為它成功的公開秘密,改變這一點會糟蹋它的核心功能。(我們需要提高的是,面向視力不良者的無障礙功能的集成)。

    好,那為什麼不按照設備的分辨率自動調整?那樣不就是真正的響應式字體排印?的確如此,我們也正在做一些類似的事情。目前,為適應分辨率,你還須要選擇正確的視覺重量,以確定該字體排印真的如期望那樣適應各種大小和分辨率。此外,文字大小和字體的分辨率光學也會改變。這也是為什麼iA Writer的Mac,iPad 1/2和iPad3版本都有不同的分級。要解釋分級數字字體背後的完整邏輯,解釋我們新網站背後的思考,我需要更多一點時間和空間。所以,請耐心等待第二部分。

    — —

    文章永久連結為: 淺談網站響應式字體排印技巧