#CSS #分享 網頁設計必學 5 個排版技巧 + 6 個設計原則,經驗整理分享

6月21日 19:12
過去擔任網頁設計師時,藉由觀摩和參與過的實際案例,發現流行常用的排版方式大致上可以整理成以下這 5 種,如果能掌握這些排版技巧,想要快速做出一個美美的、又富有空間概念的網頁,並非困難的事情! 而 6 個經典設計原則,則是比較多靠經驗累積整理而來,在成為網頁設計師之前,幾乎每一個設計原則...我都沒掌握很周全😂😂 也因此更希望透過這樣的排版技巧與設計原則做一個精選的整理,讓還沒有踏入、或剛踏入網頁前端領域的朋友們,可以盡早了解,少走冤枉路! 📍 首先是 5 個排版技巧分享: 👉 1. 圖片滿版 這樣的排版方式將重點文字壓在圖上,圖文搭配的傳達,能依圖片質感直接提升視覺效果!
👉 2. 卡片式設計 卡片式設計是目前仍然主流的排版方式,甚至有些文章縮圖的排版也開始採用,可能因為每一排能看到的項目最多,區塊之間也有充足的空隙不會混亂,因此快速流行。
👉 3. 圖文交錯 圖文交錯可以讓視覺動線改變,避免一成不變的排列,讓訪客視覺疲勞而跳出!
👉 4. 小圖水平排列 小圖水平排列通常是為了凸顯服務項目或特色,透過這樣的排列方式讓訪客快速了解。
👉 5. 小圖垂直區塊 這裡的應用可能是圖文,也可能是搭配圖示 icon,垂直排列在手機版可以佔全版,也適合相對於小圖水平排列,更詳細一點的說明。
(◉ω◉) (◉ω◉) (◉ω◉) 📍 再來是 6 個我認為重要的設計原則: 👉 1. 適度留白 剛學會網頁設計真的很容易把頁面塞滿滿,這樣感覺好像會很多!XD 但是其實留白才能凸顯重點,就像以前課本畫重點,如果全部都畫,就像沒有重點一樣。
👉 2. 滾動代替點擊 這點在實務上相當實用!使用者真的不太會積極去按下按鈕,所以盡可能讓他們可以使用最不用動腦的方式,就能以滾動捲軸,達到被動式看完你所有想傳達的內容!
👉 3. 選擇美觀照片 照片對網頁的整體質感影響非常巨大!因此可以到 Unsplash 等可商用圖庫尋找好看的圖片,增加網頁的質感喔!
👉 4. 色彩心理學 人對於顏色是有情緒的,就像餐桌上幾乎很少看到藍色的食物,因為人對於自然、天然的顏色要吃下肚比較不會抗拒,也是餐飲業在料理時相當重視配色的原因。
👉 5. 無障礙閱讀 下圖的範例可以發現,左邊的文字超級難閱讀,因為顏色對比過低。 而每個人辨別顏色的能力都不同,我們要照顧到所有人,讓色弱的人也能順利閱讀,因此文字與背景顏色的對比度要足夠。
👉 6. 行動裝置友善 行動裝置上網的比例已經在幾年前超越桌上型電腦了,因此在製作網頁時更要多加考慮行動裝置的排版與設計方式!
(◉ω◉) (◉ω◉) (◉ω◉) 以上就是我依照經驗和資料整理出來的內容,分享給大家,希望對大家有幫助! 過去我也受助於前端工程師版非常多,版上大師們如果有想要補充歡迎留言分享給大家喔!
sticker
65
留言 6
文章資訊
15 篇文章100 人追蹤
Logo
每週有 6 則貼文
共 6 則留言
靜宜大學
初學者覺得很受用 感謝分享~~~ 我覺得尤其是最後一點 行動裝置友善 現在只要開網站 不是行動版就整個很阿雜 立馬關掉完全不想看欸🤣
國立中山大學
這種東西是設計師處理吧?! 我大前端都處理框架跟js的問題
匿名
這則留言已被刪除
這則留言因「廣告、商業宣傳之內容」,已遭移除。