優質的網頁設計教學 披著虎皮的貓

披著虎皮的貓的版型視覺設計是由Dribs & Drabs操刀的美麗WordPress版型,此次我們要和大家分享日後如果要設計版型應該要注意那些細節,在排版的時候該如何做最適當的取捨,盡量讓網頁的資訊發揮最有效的呈現效果。

影片教學

下拉選單的設計

首先聊一下網頁的寬度,網頁寬度究竟是無限制的左右拉寬,還是有限制的寬度就好,是許多人很容易忽略的問題,所謂的網頁寬度並非內容而是在下拉選單的地方,就像是你到電影院看電影坐在比較後面的座位時螢幕寬度是OK的,但當你坐在前面幾排的時候就會發現並無法左右兼顧,也許你的輪播圖可以做到左右無限制拉寬,但你的下拉選單的地方就要有這一類的注意了。

Logo到底是要放在網頁的上面或者是放在網頁的左邊?如果是剛進入首頁的時候我個人會建議Logo放在網頁正上方,畢竟Logo代表的網頁形像,當網頁往下滑動的時候下拉選單是固定在上方的,這時候Logo就可以出現在左方了。

輪播圖的設計

輪播圖的問題則比較小,畢竟只要你的照片夠漂亮,不管圖片尺寸放得多大都不會有問題,就算是全螢幕也是一種賞心悅目的效果;但一般輪播圖我會建議可以有比較明確的左右箭頭供讀者切換,在設計的時候我們得無所不用其極的把所有笨蛋的事情都想進去,這才是一個最好的設計

內文排版的設計

內文的排版設計上採用了兩個尺寸的變化,當螢幕較寬的時候會有較大尺寸的排版呈現,螢幕較小的時候則是另外一個小尺寸,這在整體視覺上確實比較漂亮,比較尷尬就是廣告的配置問題,我們發現在較大的版型的時候放置的廣告是OK的,可是當版型較小的時候廣告就會破圖了,這時候我們會建議使用自適應的廣告欄位,而非固定尺寸。

文章排版讓我覺為驚豔的則是「引言框」,引言框的設計本來是要讓大家引用他人文章時使用,但因為他是一個非常有特色的視覺排版效果,許多部落客反而把它當作內文排版的一種特殊效果而非當作引言使用,日後我們在設計文章排版的時候應該要為這一類的功能另外再做一個視覺效果的代碼會較好。

文章標題的視覺設計也非常的OK,沒有什麼好吹毛求疵的,若要針對這個排版做補充,我會覺得現在的部落客都忽略了一個功能:專家講評;前面的文章也許是你的文字記錄,但是結尾的時候如果可以有一個比較特殊的視覺設計讓讀者非常了解這是你個人的獨特見解,在專業的形像上會有不少的加分

至於文末懶人包的排列確實非常乾淨整齊,但是否可以做一些排版上的變化和美工設計是有待商榷的,畢竟懶人包放在最後面很容易被讀者認為是文章以外不相干的文字而被忽略,如何讓讀者願意點擊下一篇文章繼續閱讀,我覺得這是現在許多部落格應該要努力去做的功課。

自我介紹的設計

自我介紹的排版首先要提到的是大頭照,多人在放置自我介紹照片的時候喜歡放一些美美的照片甚至放婚紗照,其實是蠻不OK的,因為對廠商來說照片代表著第一印象,我會建議照片至少可以讓人第一眼就知道你是哪一方面的專家,至於側邊攔放置個人文字介紹的部分我會建議大概有50字。

一個豐富的自我介紹頁面除了讓廠商知道你的詳細資料外,也應該要讓廠商看到所有透明的數據資訊,許多部落客的數據都停留在第一次網站完成的時候就,從此就再沒有更新,這是一個非常重要的動作。

在數據更新上你應該要知道應該放哪些數據,曾經有人提出每日的網站人氣真的能代表成效較好嗎?廠商要看的數據應該是相關文章的單篇文章人氣才正確,許多合作或得獎的記錄是否盡量放?著確實好的合作是不嫌多,但你能否標示出最經典的那幾個紀錄給廠商一眼就看到,畢竟廠商並沒有太多時間慢慢了解一個部落客,他們只想要看到最漂亮的數據而已。

側邊欄的設計

在現在的網頁設計中側邊欄的實用性越來越尷尬,畢竟現在是手機當道的時代,越來越多讀者習慣了沒有側邊欄的設計,那電腦版的側邊欄到底還剩下什麼樣的功能?實不相瞞,固定廣告效果一定是最棒的,那其他像熱門文章或相關文章是否還有效果呢?其實非常難,因為讀者已經閱讀過的文章就很難就會往回話看了,除非要搜尋某個重要資訊。

是否可以把側邊欄直接廢除掉?個人認為如果你的資訊非常豐富,當然側欄還是有善加利用的空間,但內文或首頁可以完成的資訊露出就盡量不要占用了側邊欄欄位了,將側邊欄的資訊簡化,留下少數最有用的資訊就好,盡量讓讀者第一眼就可以看到你所要佈告的訊息。

導讀網站

Hello~我是職業貓奴芮妮,歡迎來到「披著虎皮的貓」,這裡以分享世界自助旅行為主,期許可以幫助更多旅人體驗美好!!

從小沒什麼人生志向,只夢想「環遊世界」、「養很多貓」;小學領養了一隻小老虎🐈,小小天地一直都用她的名義經營,blogging 是興趣,2017年為了照顧老年咪咪辭去正職,開始了我的自媒體之路。芮妮的專長就是統合性的整理旅遊資訊給需要的人,謝謝喜歡我旅遊筆記的朋友,也感謝每個願意提供機會的廠商 =)

想要學其他排版技巧記得看以下的文章

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

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