合理設置回應式設計的回應點

你可以輕易找到許多如何設置回應式設計回應點的攻略,但是這些過時的設計方法都是以主流螢幕尺寸為依據的,效果並不理想。其實並沒有「主流」螢幕尺寸這一概念。另外一個主流的方法是當佈局被打破時設置回應點。這個方法聽起來好一些。但是仍有疑問,我們怎麼判斷是否佈局被打破了呢?其中一個合理回答是依照經典可讀性理論定義回應點。

名人的看法

Robert Bringhurst認為,單列頁面裡的內容被設置為普通有襯線字體和普通字體大小時,排列45至75個字元長度為最佳。Josef Müller-Brockmann認為,一行如果能容納10個單詞那麼這欄就很容易閱讀。有許多原因會影響實際的字元數或單詞數,但這是一種基本理論。如果你從小螢幕開始,然後你逐漸增大,主要內容的寬度也可能會變得比75個字元或者10個單詞更寬,一些改變就會發生了。簡單的說,這些就是你的回應點。

多種因素決定理想尺寸

許多因素決定了理想尺寸的大小。比如,德語的長度比英語長,那就需要更寬的位置了。你理解對了:對於需要多種語言的國際網站你必須有不同的柵格。字體、字型大小、背景對比度、行距、字間距、文字類型等等這些因素都會影響一行文字的長度。

設計師的自我見識和經驗對於尺寸的判斷影響很大。你可能很容易就判斷出75到90個字元的長度是最理想的。但是我不是設計師,也不是排版家,所以我只能根據書上的理論知識來判斷。當然了,知道自己在幹啥的這類人,完全可以自己構想一下所謂理論。

Untitled-3

我製作了這個國際尺寸滑動器,讓你瞭解一小節是多寬。這個小工具看起來只是在變化語音和字體,但是你會發現這兩個變化值分別能帶來極端的效果。只是拿德語或波蘭文同英語比較,或者更詳細點,德語設置為Verdana字體與英語設置為Georgia比較。差異十分巨大:10個設為Verdana的德語單詞寬38.5ems,但是10個設置為Georgia的英語單詞才寬22ems。在許多預設瀏覽器的設置裡,這將會是616px對352px的差距。你可以看到兩個簡單的因素對柵格的巨大影響。



合理的尺寸對於一篇文章來說十分重要。我知道網路也並非只有文章。你也可以很順暢的使用只有很少文字說明的網路應用。但是確定回應點的時候首先考慮尺寸也是非常好的做法。

Untitled-4

 

實例說明

因為只是一個例子,所以我用的是一個簡單的博文。它是一篇結構清晰但內容簡單的文章,包含一些常見的語義元素。這些元素不足以確定回應點,但是會給我們一些説明。排版是一個合理的出發點。我忽略了頭部和logo,只先集中在內容上。

當然,如果你在瀏覽器裡打開這篇沒有樣式的文章,會覺得它非常醜。它沒有任何樣式除了瀏覽器預設自帶的那些樣式。文章和瀏覽器視窗一樣寬,在桌面瀏覽器上看時覺得太寬了點。這就像大家在IE6上看到的網頁的感覺一樣——很容易看懂但是樣式糟糕。

添加一些基本的排版樣式和max-width屬性之後,這篇文章馬上看起來好多了。這個頁面現在可以當作定義不同回應式柵格的出發點了。這個單列排版在小屏上可能需要調整,在大屏上時需要增加一些列,不管是為了讓排版更美觀,還是展示更多資訊,比如導航或者側邊欄。

Untitled-5

合理回應點

我在高中畢業前從來沒用心學過數學,所以我使用了一個很簡單的柵格。聰明人可以借用相同的思想但是使用更複雜的柵格系統。這章主要是定義回應點;所以怎麼設置全由你自己決定。

小屏

我先從小螢幕開始。Oliver Reichenstein定理,是我非常喜歡的一個理論,它的字體設置不以螢幕尺寸為依據,它依據的是人眼和設備之間的距離。我們傾向于把手機拿的比電腦更靠近頭一點,所以需要小一點的字體。另外一個Robert Bringhurst定理,就像上面闡述的,理想尺寸不應該小於45個字元。在我們的例子中,可以使用16px字型大小的Georgia字體作為預設字型,這會讓字看起來稍微小點。兩種理論都很好,它們都告訴我們在小屏上要減小字型大小。所以,我們在小屏手機上需要寫的代碼如下:

Untitled-6

這說明當尺寸小於45個字元時,使用小字型大小。我也減少了頁面兩邊的內邊距使主體內容有更多空間顯示。看看下面的例子。

Untitled-7

大屏

有時單列就足夠了。內容主導型的網站比如博客,單列是最理想的佈局。但是多列佈局在很多情形下在大屏上顯示效果會很好。有時你可能想顯示導航,或者一些有用的小外掛程式。你肯定會想把這些東西放在內容區旁邊。

我們也可以自己做一些事情。如果正好這裡有空間可以額外放一個欄目,我們可以自己設計我們的文章佈局。我在左邊增加一個寬度為33%的欄目,標題和文章的第一段占滿這個區域。其他元素如引文和圖片也能填在這個區域。

這裡的代碼就有點複雜了。這麼寫結構不是唯一的或者說最主流的方法。但是我是這麼做的。

Untitled-8

當螢幕寬度超過34ems時(內容寬30ems,外邊距寬4ems),頁面最大寬度為51ems:34+(34÷2)。現在文章占整個寬度的2/3,左邊新欄的寬度是1/3。在它右邊的h1和p元素內容應該設置一個負的外邊距值,值為內容寬度的50%。這就是為什麼我一直怪自己沒有好好學習數學了!

Untitled-10

 

更大屏

我們可以加個第三欄,第四欄,第五欄。這取決於我們的內容。我們可以利用相應空間展示一些圖片和相關內容。這完全取決於你自己的設計。在我的示例中,我們可以把註腳放在內容的右邊。別笑話我了~我又不是視覺設計師,就這麼排版吧。看看代碼吧:

Untitled-11

現在文章寬50%,左右兩邊的外邊距寬25%。邊註腳向右偏移了50%的距離。註腳寬為50%減去2em,看起來會更好些。p和h1標籤的代碼不變。注意calc這個屬性不是所有瀏覽器都支援,所以我們得留點後路。所以代碼如下:

Untitled-12

我也知道不是所有首碼都有用,但是我建議全部寫上。如果你不想這麼做,建議你記住哪個瀏覽器支援什麼CSS屬性,是否需要帶首碼。如果能正確理解層級關係,是非常有用的。當然,它得排的好看。我能清楚看到我的樣式表是怎麼生成出漂亮的樣式的。

現在我們就有一個回應式設計的網站了,基於文字大小和螢幕尺寸的。回應點是基於邏輯運算而不是隨機因素如當下流行的設備螢幕尺寸等。這個設計對於未來的修改和瀏覽器使用者都有好處。因為所有元素大小都是基於文字大小來設置的,完全能迎合訪問你網站的使用者的設置喜好。當文字大小變換時佈局也不會被破壞。

Untitled-13

 

技術方面

當我們幾年前開始做回應式設計時,我們會先創建一個pc網站,然後增加媒體查詢為小尺寸螢幕改寫樣式。我們發現這種做法並不正確。現在我們都知道創建CSS最好是先從小尺寸螢幕開始。畢竟變大是容易的——樹會生長,嬰兒會長大——縮減很困難。有沒有試過精簡一輛汽車?一定程度是可能的,但還是很辛苦。

在大多數情況下,從小尺寸螢幕做起是合乎邏輯的。當要把東西做的更大時,我們只需要為大尺寸螢幕添加一些媒體查詢然後調整佈局就可以了。但我認為這並不是真的指小螢幕,而說的是預設狀態。

優先預設設置

我們需要確認的第一件事不一定是小尺寸螢幕的樣式,而是預設設置:各個地方流覽網站時的樣式,無論螢幕大小。這些樣式包括字型大小、留白、品牌風格如邊框和背景之間的關係。由於這些樣式是每個終端都會用到,則不應該放在媒體查詢裡。需要在媒體查詢裡定義的內容應該是在基礎樣式上的一些例外(比如更小號的字體)或是補充(比如柵格)。

這就意味著只有當某個特定的元素在小尺寸螢幕上顯示有差異時,我們才使用媒體查詢。這樣想想你就會發現這種情況有很多:頁頭、導航以及其他複雜的元素在小尺寸螢幕上常常是根本不一樣的。像我舉的例子一樣,把這些元素的代碼放在一個媒體查詢裡是正確的,因為它相對於預設設置來說是個例外。

 

細節方面

上面的例子是很基本的,我也沒有說明太多細節。有兩點是至關重要的,所以我在這裡加上。一個是關於媒體查詢中的長度單位ems,另一個則是回應點。

回應點範圍

最近關於術語「回應點」的已經有一些討論。Mark Boulton和Ben Callahan認為我們應該稱呼它為「優化點」,而Jeremy Keith則在回應點和「調整點」之間猶豫不決。本章節內,我會聚焦在回應點上——也就是當內容需要更多或更少的展示空間時佈局所發生的變化。現在我來介紹另一個術語:回應點範圍。

我們稱呼那些改變佈局的媒體查詢為「回應點」。我們傾向于把這些回應點作為直接的變化:當一個佈局達到它的最大寬度時,我們立刻轉換到下一個佈局顯示。轉換之前先保持上一個佈局並增加一些留白,這樣的做法更好些。例如,一欄和兩欄佈局之間的轉換會導致顯示一個非常小的主欄。就像我之前說的,我們可以讓它保持一小會,而不是在內容達到它的最大寬度的瞬間就立刻轉換。這是絕對不會破壞佈局的一個非常簡單的絕招。

媒體查詢中的長度單位ems

在媒體查詢裡使用ems單位是很奇怪的一件事。你可能會認為它們應該是回應CSS中指定的字型大小的,但事實並非如此。它們會回應訪問者使用的瀏覽器的字型大小。你仔細想想就會覺著這也是一件合理的事情。如果他們回應CSS裡的字型大小,你可以禁用增加字型大小的媒體查詢。這段代碼可能會陷入閉環:

Untitled-14

如果媒體查詢回應這個樣式表中定義的字型大小,那麼當我們慢慢的增加瀏覽器寬度的時候會怎麼樣呢?只要螢幕顯示的寬度超過20ems,字體會立刻放大兩倍。這就意味著頁面寬度現在是10ems,而瀏覽器則應該忽略這個媒體查詢。這會導致這個較小的字型大小會立刻再次觸發這個媒體查詢。這會陷入閉環。

這種做法不僅僅從技術角度來看是合理的,從使用者的角度來看同樣是合理的:如果使用者想要更大一點的字型大小,那麼佈局就應該以回應字型大小的方式來優化。這也正是我們一直在做的事情。與此同時,對於像我這樣的人來說真是一個相當大的麻煩事,我們在高中就應該已經注意到:媒體查詢中設置條件用到的ems應該用與代碼裡面使用的的完全不同大小。這真是太複雜了。如果你想要瞭解更多,絕對要去讀Lyza Gardner關於這個主題的經典文章,「ems單位的巨大作用:讓媒體查詢比例化!」

真正困擾我的事情是,我們需要一個傻瓜式的工具來估算一行當中的字元數。Webkit目前才實現把「字元ch」加入構建日程中;我們想要自如的使用可能還需要一段時間。一個字元實際上就是使用字體中0的寬度。這聽起來是一個非常有用的回應式設計,但我並不確定在媒體查詢中將會如何運作。我們拭目以待。

 

總結

理想情況下,針對各種螢幕尺寸的不同佈局應該根據內容單獨定義。當然也會有一些情況是頁面中其他的元素,比如banner,會直接定義內容的寬度。就算在這樣的情況下,易讀性理論會有所説明;你可以為了讓頁面保持在一個完美行寬的邊界裡而去增減字型大小。只是不要把文字弄太小就好了——畢竟人們還是想要閱讀它們的。

幸運的是在大部分情況下,傳統的排版理論就可以助你決定回應式網站的正確回應點。你甚至可以根據不同的語言來創建不同的佈局。當你在做一個大型的國際型網站時,這可能是個好想法。最最重要的是,不論是現在還是將來,運用本章節的理論來針對各種不同的螢幕尺寸更好的設計你的網站。我列舉的案例用的是一個非常簡單的柵格,不過結合更多複雜的柵格之後,本理論可以説明創造更合理、精彩的網站。

(MARKO DUGONJIĆ 著 SEVENSHAO譯)

來源:HTTP://mxd.tencent.com

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.