AG亚博国际

NEWS

創新不是要改變世界,而是不再重複昨天

成都網站建設-響應式網站留白設計

2019/06/01 成都網站建設-響應式網站留白設計

網站中的空白空間,又稱負空間,是指合理安排各種設計元素,達到頁麵布局幹淨、精致的效果。但是,很多人經常會走進一個誤區,認為空白就是將網站的某塊區域設置成白色,其實空白代表的是一種無裝飾、無額外元素的狀態。它的表現形式多樣,圖片、圖表、外邊距、列甚至是文字之間的空間都是空白的一種。

接下來我們再談談如何在設計中運用空白,這個部分我們將分三點為大家介紹:

一、 如何重新設計導航使得頁麵在響應式變化時仍能保持精妙的空白。

二、 如何通過從水平到垂直的布局設計平衡頁麵的空白

三、 從字體和圖片的設計兩個方麵更加細節地安排空白

響應式網頁中多種導航係統

采用適應屏幕寬度的菜單

這種菜單很靈活並且能夠盡可能顯示更多的選項,保證了可點擊性和水平間距,給用戶舒適的使用體驗,適用於選項之間優先級有區別的各種場景下的導航設計。

傳統tab欄

優點在於入口始終可見,可點擊性和效率都會非常高,並且不存在滑動和點擊上的手勢衝突,非常適合tab較少的移動導航係統。

包含“更多”的tab欄

是前兩種的結合,適合選項較多且選項之間優先級較大的情況,在用戶需求差異較大的場景中比較適用。

可滑動的tab欄

適用於選項較多且選項之間優先級區別不大的導航設計,缺點是存在向左右滑動和點擊選項之間的手勢衝突問題,並且隻能看到前麵幾項,效率不高,但非常適用於鼓勵用戶選擇和探索的場景。

漢堡包菜單

移動端和電腦端都非常常見和實用的節省空間的設計,因為其對主界麵幹擾較小的特點,非常適合作為閱讀類網頁的導航設計。缺點是因為其可發現性較低(用戶不能直接由漢堡包圖標聯想到導航或者菜單,而是要經過學習),所以其可點擊性沒有那麽高,可以通過用更能引起用戶聯想的“菜單”字樣等來代替漢堡包圖標。由於不能直接獲取菜單中的選項信息而是要通過點擊圖標才能看到,無疑降低了用戶的效率,一般情況下不建議使用。

適應屏幕寬度變化的導航設計:在進行響應式網頁的設計時,為了使頁麵導航在所有屏幕比例下都保持最方便,我們可以采取動態的導航係統設計,即根據屏幕比例變化而變化的導航係統。網頁端時,可以采用傳統頂部導航,效率和可點擊性都能得到保障;縮窄屏幕後,可以使用兩行的或者多行的頂部導航來取代之前的單行,以保證選項之間的水平間距空白來保證用戶的操作舒適;到了更窄的屏幕(如豎直的平板電腦上),可以將水平的頂部導航改為豎直的側邊欄設計,避免多行菜單占據過多頂部空間,也符合從水平到豎直的設計理念;到了手機小屏幕,可以采用最省空間的漢堡包導航或者包含“更多”的tab欄,給用戶提供足夠的空白空間以保證網頁主體內容的突出,這樣,在所以比例的屏幕上都能達到一個相對較好的導航效果和用戶體驗。

網頁的正確“減肥方法”

在響應式設計中,一個重要的思想就是將我們的內容按照不同的主題進行分區,在相同主題下再進行分塊。之後在頁麵變化時針對不同的板塊做不同的處理,而非對整個頁麵進行處理。這看似多餘繁瑣的過程,其實為我們接下來的響應式設計的空白處理打下基礎。

因為在屏幕變窄時,如果對整體內容進行變換,則無法兼顧不同主題,國內許多網站的處理方法是逐步犧牲掉空白的比例,而到沒有空白可犧牲時,又在頁麵下端啟用了滾動條。

響應式網站中字體與圖片的設計

做好空白需要注重文本字體

當頁麵變小時,針對文本的處理不應該是簡單的縮小字體,更多時候,效果更好的應該是保持合適的字體大小,然後將多列的字段變為兩列到一列,將一行長文字變成多行。除了改變字體的大小,我們還可以調整字體的行高、字距、顏色甚至是兩個文本區塊之間的距離使文本更容易閱讀,畫麵看上去更加和諧。

對比度

字體要與背景圖要有一定的對比度,就像一個藍色的背景上的紅色文字是一種禁忌,而合適的對比度則會讓用戶很舒服。

特殊效果

在電腦上顯示時有些文字是具有特殊效果的。但由於一些效果在手機等設備上無法顯示,因此一些文字設計也需要改變。比如在Agraculture網站中每張圖片上的文字在鼠標懸停時具有懸浮效果,但移動端無法實現,因此讓文本就直接出現在圖片的正中央。雖然這個改動不大,但是對用戶來說卻保證了舒適的體驗效果。

在網站中除了字體我們也需要考慮到圖片怎樣合理放置。圖片由pc端到移動設備中時需要對其進行縮小或重新定義。通常情況都是按比例的縮小來保持和空白的比例,因為當我們試著裁剪圖片時,就會破壞圖片的構圖,從而破壞觀感。而有的時候網站的圖片在移動設備上並沒有很大意義,因此為了網站的清晰明了他們直接將圖片隱藏起來。與此同時,將水平的導航菜單擴展,填補了一定的空間,讓網站不顯空洞。

推薦閱讀

微信谘詢

微信便捷交流

微信開發 微信小程序開發
谘詢熱線

24小時技術服務熱線

QQ谘詢

真誠為您提供專業解答服務