痞客邦最美的版型 Dribs & Drabs

今天要介紹是痞客邦的部落格Dribs & Drabs,作者是Wei Wei,他所設計的版型號稱是痞客邦最美麗的,有許多痞客邦的部落客總會抱怨痞客邦排版不好看,今天我們就透過的Dribs & Drabs的部落格和大家分享痞客邦也可以排版出非常漂亮的文章,不管是電腦版或是手機版。

影片教學

下拉選單的設計

Dribs & Drabs下拉選單的設計非常特別,他是以地圖的方式做呈現,許多人向我表示想要做出類似的下拉選單特效,一般我都不太建議,並不是這個設計不美麗,而是日後你要再增加選單項目是否可以自己做增減,還是得透過程式語法才能做修改?

許多人在設計版型的時候只有考慮到當前的美感呈現,而忽略了日後的變動是否方便,並不是所有東西都要考量到日後的修改問題,而是你要考慮到下一次做變動會是在什麼時候,如果你一到兩年內不會做任何的修改,我覺得這一類的特效是可以設計的,如果你會時常做變動,那就要考慮這累的視覺呈現是否適合你了。

首頁輪播圖的設計

首頁大圖的輪播是整個網站視覺非常重要的一環,大部分使用者都會希望圖片越大越好,最好可以放大到全螢幕,各位得注意一下大圖輪播到底放的圖片能不能夠做到自適應的效果,這是許多人想要放大圖時卻會忽略掉的小細節。

另外圖片替換的機率高嗎?輪播我們最擔心的是永遠就那幾張圖,替換率過低讓常常來逛網站的人少了一點新鮮感,尤其當這種全螢幕的輪播成為了首頁的門面時尤其重要;Dribs & Drabs的大圖輪播放時就是我蠻欣賞的方法,會適時的壓上文字敘述,讓過大的圖片可以多了一些點綴。

文章LIST的設計

文章LIST設計也是非常的吸睛,不管是首頁的文章LIST或者是每一個分類的文章LIST都各自有特色,通常首頁的文章LIST我會建議一定要有文章摘要做導讀會比較好;分類的文章LIST主要是快速搜尋文章,則不需要有文章摘要導讀。

首頁的文章LIST要放入哪些資料呢?第一我會建議盡量用大張的圖片,因為圖片是最容易吸引人的元素,標題當然也很重要,接下來就是分類的標記,分類的標記我們就得要有防呆機制,因為有些時候文章的分類可能不只一個,我們得考慮到分類的名稱太長或者是同時被區分為二到三個分類時是否排列得下。

LIST設計很容易忽略掉圖片是否可以有連結效果,大部分都是設計成標題可以連結;接下來就是當你的文章摘要太長的時候他是否會自動幫你做截斷的動作,以免在排版上造成不對稱的畫面,還有就是照片是否也有防呆機制,照片的大小統一最好的方法還是可以用精選圖片的方法來做解決,我個人的習慣就是會針對首頁LIST的圖片特地裁剪一張適合大小的尺寸。

側邊欄的設計

側邊欄的設計是否還需要存在一直是許多部落客關注的問題,大部分的部落客在挑選電腦版版型時都會選擇有側邊欄的設計,但是現在大部分的讀者都是透過手機載具瀏覽文章,手機是沒有側邊欄這個設定的,所以電腦版是否還需要存在側邊欄的意義就會越來越低了。

我會鼓勵一些部落客在更換新版型的時候可以特地選擇沒有側邊欄的WordPress版型,一方面可以讓文章中的圖片尺寸變大來得更有吸引力,第二:可以讓讀者更專注於你內文的資訊而不會被側邊欄五花八門的擺設或廣告干擾,第三:當你沒了側邊欄之後內文尺寸是可以拉大的,這時候甚至可以為內文做更多特殊的排版和變化。

內文排版的設計

因為Dribs & Drabs有側邊欄的關係,所以有些內文的地方會使用到兩欄式的排版方式,這在雜誌的排版中非常見,但在部落格的排版中則會比較少見,但在新版的WordPress 5.0文章排版軟體已經有加入這個功能,它可以在電腦版和手機版的排列中做到自適應的變化,是一個非常好的排版效果。

我們也發現照片的排版除了橫式的排版之外有時候也會將兩張直式的照片並排排列,當然在排列中並不是單純的插入照片,而是要考慮好整體設計,你也許會問是否要大量使用到並排排列這種效果呢?我個人認為在電腦版看的時候也許沒有什麼太大的問題,可是在手機版的時候也許照片就會小了那麼一點點,一般我們排版最容易忽略掉的問題:我們是用電腦排版所以只會重視電腦排出來的效果好不好看,而忽略了手機版會怎麼呈現的問題

在地址和地圖的編排當中也是有特意設計,呈現的排版方式是採用左右編排兩欄式編排,電腦版看上去確實會舒服很多,到了手機版的時候會發現它會自動變成上下的排列,至於手機板的地圖跑版的問題我覺得可能是痞客邦的問題,設計者可能要注意一下是否可以修正。

文末的相關文章效果應該是作者自行產生的,這裡比較可惜的地方是在電腦版的時候排列確實非常好看,但是到了手機版,圖片似乎無法跟隨手機版的尺寸放大,而會變成小小的,算是唯一美中不足的地方;我會建議電腦版不管如何設計,圖片到了手機版以後一定要撐到左右滿版的大小,在美觀上會比較漂亮,對於讀者來說也容易把它視為是內文的一部分。

最後一點會讓我覺得有點可惜的是「連結文字」,連結在內文全部都是用粉紅色加底線,但是到了相關文章的地方卻是灰色加底線,之前我有提過連結最好是用藍色,因為色盲無法分辨紅色和綠色,藍色是什麼唯一可以分辨的顏色;但是Dribs & Drabs在文字連結的地方使用了底線,這一個設定就算你使用了其他的連結顏色,對一般讀者而言還是有辦法直接分辨出他就是超連結效果的。

※延伸閱讀:優質的網頁排版教學 翹鬍子旅行團&尼克玩食大探險
※延伸閱讀:WordPress Gutenberg (古騰堡) 最新編輯器 操作簡介

結論

Dribs & Drabs在痞客邦的部落格版型設計確實是到了幾近無法挑剔的地步,堪稱痞客邦最美麗的版型設計,唯一要注意的地方可能就是特效使用的多寡對於網站的速度或者是SEO一定會有部分的影響,這一方面就要由你自己去做取捨了,但是否特效越少版型就會比較不吸睛呢?我覺得一個版型最讓人擁有記憶點的是內文和排版。

如果你的部落格架設在痞客邦,目前並沒有打算做自架站的準備,又希望擁有非常漂亮的版型,我會建議你找Dribs & Drabs設計;順便工商服務一下,如果你是自架站想設計版型,也可以找Dribs & Drabs設計網站美工,程式的部分則可以交給阿腸工作室來處理。

導讀網站

喜歡攝影與旅行,在2013年創立部落格分享旅途中的點點滴滴。經營部落格的同時重拾了從小熱愛的網頁設計,除了分享多款免費部落格佈景外,也提供客製化部落格設計服務,受到許多人的喜愛。扮演多重身份的我生活忙碌充實,利用旅行放鬆犒賞自己。

相關文章導讀

創用 CC 授權條款
WordPress架站百寶箱阿腸製作,以創用CC 姓名標示-非商業性-禁止改作 4.0 國際 授權條款釋出。

發表留言