最基礎的網頁排版術 涼子是也 & 娜塔不邋遢

我們大部分在討論部落格版型的時候都是以WordPress版型為主,今天要來討論的則是痞客邦的版型設計和排版設計,之前有和大家分享過Dribs & Drabs的版型設計是痞客邦最漂亮版型,今天和大家分享極簡的痞客邦版型設計,雖然沒有Dribs & Drabs的版型來的炫麗,卻也都不失為讓人眼睛為之一亮。

影片教學

整體版型的設計

我會建議一般部落格整體設計的側邊欄應該放在右邊而不是左邊,這原因在之前也有討論過,最主要是因為現在人的閱讀習慣都是橫式閱讀,主要都是由左至右,所以最重要的資訊應該是要放在左邊,側邊欄資訊為搭配資訊所以放在右邊。

而整體顏色搭配我們會比較建議底色是以接近內文的純色為主,也不要和內文的背景色有太大的差異,是否有太大差異就一定是不好?應該說如果是有專業設計師來做視覺效果的話也許可以設計的非常好看,但如果你是自己做CSS修改的話,我會建議盡量以簡單的設計為主就可以表現出非常高的質感。

首頁LIST的設計

首頁LIST設計有些人喜歡傳統當然是的一欄式排列,有些人則喜歡雜誌型的排列,到底哪一種比較好?我覺得只要設計得好看就OK,但雜誌型的版型我們得注意的是你文章更新速度夠快嗎,不然很容易讓人覺得你的文章都沒怎麼永遠都是舊的感覺,再者如果你如果是屬於以照片為主的部落格,則會建議不要用雜誌版型,因為小圖的排列無法展現出照片的美麗。

首頁文字摘要的地方則是要注意是否要有文字連結或粗體、顏色等效果,我會建議這類的效果在內文的時候再呈現就好,首頁的文字摘要盡量乾淨即可,盡量讓首頁LIST的排版簡單,並且統一每一篇文章的排版效果。

雜誌版型沒有文字摘要到底好或不好?先撇除SEO的部分,除非你的文章數量非常的多,像是新聞網站也許文字摘要就沒有那麼的重要,若只是單純的一天或兩天才產生一篇文章的話,我還是會建議有文字摘要對於讀者來說會比較好,大部分的雜誌新版型不製作文字在要最大的原因則是因為排版的美觀度問題,這時候你就得在美觀和使用者體驗上自己去做取捨了。

內文排版的設計

在那文的排版上兩個網站都沒有太大的問題,但我發現一點滿奇怪的事情:他們的照片寬度並沒有等於內文的寬度,所以就會發生文字比照片還要長的排版狀況,這可能是要注意點。

一、涼子是也

可能會在文章中插入「找住宿飯店優惠」或是「你的讚是我寫文最大動力」的連結圖片設計起來都是蠻可愛的,但可能要多注意一下視覺的明確性,因為我一開始看到這兩張圖片的時候會以為他只是一個單純的圖示,而不會將它當作是可以點擊的連結圖片,這一點在設計上面可能會可惜了一點,還有就是照片的排列可能要注意,照片與照片之間的寬度問題如果都一樣大的時候中間沒有間距也許是OK的,但是當橫式和直式照片同時存在的時候可能就會有一點點奇怪的感覺了。

照片似乎會壓兩次浮水印(我的錯覺吧)通常會建議浮水印加上Logo即可,有些人會壓上網址,則是我比較不建議的,因為日後有可能會更換網址,這一點就要請大家再多多注意一下了。

二、娜塔不邋遢

在文章最下面個人經歷的設計算是蠻漂亮,但我覺得這個個人經歷應該是要放在關於我的頁面裡面,最下面也許可以放其他的資訊會來的更恰當也更能夠吸引讀者,畢竟經歷的資訊對如果要給廠商看的話,廠商應該會從關於我這個頁面來認識你才對,所以這裡是否可以做成之前所提過的類似「作者觀點」或是「延伸閱讀」、「推薦閱讀」等等可能都會比較好。

除了文字和照片的寬度不一樣之外,唯一有一個小地方要改進的可能就是食材的文字排列方法,在手機版看食材的文字排版也許是非常恰當,但是在電腦版看的時候也許就會覺得怎麼感覺空了這麼一大塊,我會建用表格來做排版就可以改善這樣的尷尬了,除了表格以在前面放一些小ICO也是一個不錯的方法,盡量不要讓每一行的文字過於簡短,通常我會把過於簡短的文字想辦法多塞些贅字。

在那文中塞入小圖示也是要留意到底他排列的狀態是如何,這裡的排版我們會發現小圖示可能會有點格不入的感覺,得多注意一下圖示漢文字的尺寸。

在排版上盡量使用項目符號、縮排這一類的功能就會讓網站內文排版看起來更加有條理,其實所有的設計都是小小小小的問題,只要多注意一下,除了可以增加視覺的美觀度也可以增加讀者的點擊或減少跳出率。

導讀網站

旅行.能以不同角度看到世界的美好;美食.可以從各種食材嚐到幸福的美味。

就是喜歡到處旅行、品嚐美食,分享生活中的點滴時光與育兒日記!

一直以來,我對生活的看法就跟我吃飯的哲學一樣「要細細品嚐!」

別小看每頓飯,識吃愛吃的人,會手舞足蹈表現對食物的熱情!這樣的人,相信也能咀嚼生命裡時時刻刻的況味。

每一天,都是全新的開始,好好聽一首曲子、好好嚼一碗米飯、好好看每個轉瞬、好好愛值得你愛的每一個人…用心感受每個當下感動就會越來越多,這就是活著最大的動力啊!

相關文章導讀

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

抱歉,本篇文章留言已經關閉。