網站版面設計的7個重要觀念 - 達文西數位科技

先定義什麼是「網站版面設計」？版面設計就是「網站從無到有的版面設計流程」，客製網頁設計才需要提案，需要進行網站的排版設計 ... BLOG 首頁 部落格 網站版面設計的7個重要觀念 網站版面設計的7個重要觀念 2021-11-09 Author:路卡斯特 Facebook Twitter Weibo Linkedin 網站版面設計的第一步不是設計，而是收集資料與思考，排版設計不能想怎麼排就怎麼排，設計網站版面是有規則的，清楚規則以後，才能開始進行排版設計，網站版面設計規則必須先符合「行動裝置版型排列」、「使用者體驗」、「企業識別延伸設計」，然後才正式進入版型視覺設計，版面設計是為了幫助內容呈現，善用版面設計工具才能有效達到溝通與製作。

什麼是網站版面設計？ 先定義什麼是「網站版面設計」？版面設計就是「網站從無到有的版面設計流程」，客製網頁設計才需要提案，需要進行網站的排版設計，而套版網站則是把資料「套用到既有的版型」，版型固定不需要設計，只要製作素材去套用，像Wordpress就是套用既有的樣版，只需套用版型不需要設計。

〈延伸閱讀：套版網站VS客製化網站.該怎麼選擇?〉 客製化才需要網站版面設計 符合行動裝置版型排列 以前網站版面設計是不需要考慮行動裝置的，長的、圓的、方的…想怎麼設計版型都可以，現在可不行這樣，因為現在的網站是多合一，網站必須同時具備手機、桌機、平板顯示模式，而且自動變換版型，所以設計版面的時候就要有RWD的「重新排列版型」的邏輯，如果沒有想到這些，你就會被前端工程師退稿，因為根本無法切版，只能重新排版設計。

〈延伸閱讀：RWD比較好還是AWD?〉 每種裝置都能跑的網站   什麼是切版? 切版就是「把設計圖轉成HTML的過程」，過程就好像是拿美工刀把版型圖片一片一片切割下來，業界俗稱的「切版」，切版是由前端工程師負責，好的前端工程師可以完整還原網站版面設計圖、高效能架構，關於RWD、AWD、瀏覽器的相容性... 也是由他們負責。

〈延伸閱讀：網頁設計為什麼需要前端工程師？〉 切版就是將設計圖轉成html程式碼 設計需符合使用者體驗 網站版面設計就是一種UI設計，UI就是「使用者介面」，成功UI又來自於UX使用者體驗(UX)的完整定義，網站的排版設計都是因為使用者習慣、喜歡、順手、吸引…，例如：購物網站就是要把商品配置在版面中央，進而吸引購買，製造零件的網站就是讓客戶輕易找到商品規格，所以要減少讓人分心的設計，符合使用者體驗的設計就是讓人最滿意的設計。

〈延伸閱讀：UX/UI不一樣，UI/UX設計是什麼？〉   需延續企業識別設計 網站設計也是企業視覺的一環，網站版面設計必須依照VI延伸設計，包含logo、配色、字體、屬性、企業精神…，延續企業識別系統就能讓網站跟企業融為一體，專業的設計公司開版設計前都必須做很多的溝通，填寫需求表單都是為了讓設計公司與企業減少認知上的落差。

〈延伸閱讀：如何選擇網頁設計公司？〉   什麼是CIS？ CorporateIdentitySystem，簡稱CIS，中文是「企業識別系統」，CIS又分成，理念識別(MindIdentity，MI)、行為識別(BehaviorIdentity，簡稱BI)、視覺識別(VisualIdentity，簡稱VI)，MI就是企業理念的定義，像是企業精神、品牌故事…，BI就是行為的定義，像是企業管理、教育訓練、公益活動…，VI則是視覺定義，也是常看到的具體企業形象定義，像是顏色、字體、標誌、圖案…，大部分公司也許沒有執行完整CIS，但幾乎都會設計logo並延續企業VI。

網站也是CIS的延伸   先了解版面設計原則 網站內容的重要位置 網站的閱讀是由上而下，資料顯示是由左而右，網站重要資訊幾乎都放在上面，例如：單元選單、視覺大圖、LOGO、搜尋、語系...。

沒有急迫性的資訊，就會放在網站的頁尾，例如：網站宣告、隱私權、聯絡資訊...。

網站中間位置通常會擺放需要了解的內容，例如：產品、消息、文章...，需依照重要性去配置內容。

〈延伸閱讀：2021網頁設計指南〉 先定義網站基本架構 網站版面設計中不斷重複的部分就是頁首跟頁尾，也是一開始必須定義的設計，一層選單還是兩層選單？選單要不要往下展開？LOGO要靠左、靠右、居中？網站要銀幕滿版還是固定寬度？網站內容要分成幾個直格？首頁要分成幾區？這些基本架構會在首頁版面設計時定義，接續下來的內頁設計都會依循基本架構，所以邏輯要清楚，不然適用性未來會出現問題，例如：使用產品下拉選單，但沒有考慮產品類別過少，以至於選單過於空洞。

版面設計是為了呈現內容 除了版面基本架構以外，網站排版設計是為了幫助內容呈現，例如：部落格就是要方便讀者延伸閱讀、轉換分類、閱讀順暢、熱門文章…，設計版面的時候就不要讓文字寬度超過50字，要把類別放到適合的版面位置，視覺大圖不宜搶占過大版面…，網站重點是內容編排設計，不是版型，簡單易懂的內容對受眾才有幫助，不清楚單元內容的版型配置，可以多看知名網站如何配置內容。

〈延伸閱讀：網頁設計重點在設計內容，不是版型〉 培養你的設計眼 你理解了網站版面設計規則，也定義網站基本架構，這樣就能做出好的網站了嗎？一篇文章無法馬上提昇你的設計能力，但可以建立設計觀念，接下來要建立的觀念是「培養你的設計眼」，只要能具備設計眼就能看出設計問題，包含：顏色、色調、字體、圖片、留白、位置、邏輯性…，設計成敗藏在設計細節裡，要讓設計更出色就是要常常觀摩別人的設計，不是要你抄襲，而是要解構別人的網站，到底好在哪裡？過程中請不斷將自己歸零，才不會陷入自以為是的專業。

〈延伸閱讀：如何設計一個好網站？11個最重要的設計原則〉 善用網站版面設計工具 網站版面設計可以用什麼工具？其實只要能做圖的工具都可以是做版面設計的，像是AdobePhotoshop、AdobeIllustrator、AdobeXD、Sketch、Figma...，初期網站開版前的原型(Prototype)線框可以透過工具生成，像是AdobeXD、Sketch、Figma、OmniGraffle、InVision、Axure、proto.io、Framer、Framer...，網站原型可以減少設計方向錯誤，提昇版面設計溝通效率。

〈延伸閱讀：我想進行網頁製作，該用甚麼網頁設計軟體?〉   AdobeXD版面設計 圖片來源：AdobeBlog   結論 網站版面設計是一個極度專業的過程，除了要先累積開版觀念外，從尋找靈感、蒐集資料、設計討論、網站原型、正式提案，到提案後的往返修正，都是需要耗費大量人力與時間，絕不是套版網站或套用現成的Bootstrap版型做排版設計，真正的客製化網站設計就是從無到有的生成，所以設計成本當然高，但完整呈現度也是套版網站無法達成的，客製化適合對網頁設計有著完美追求的人。

〈延伸閱讀：網站建置費用?網頁設計報價為何這麼亂?〉 (本文為達文西數位科技所有，轉載文圖請註明出處)   路卡斯特 邁入網站與SEO已經超過17年，喜歡探索新知與研究技術，總是希望給您最適合的解決方案。

網頁設計與SEO的完美整合 網頁設計的使用者體驗(UX)如何執行？ 文章分類 網頁設計 網路行銷 SEO優化 工商服務 熱門文章 RWD比較好還是AWD? 網頁設計公司不會告訴你的5個真相 網站建置費用?網頁設計報價為何這麼亂? CMS是什麼？好的網站後台有什麼特質？ 我想進行網頁製作，該用甚麼網頁設計軟體? 最新文章 網頁設計公司不會告訴你的5個真相 CMS是什麼？好的網站後台有什麼特質？ 網站架設的方法有哪些？ 轉換率是什麼？如何提昇轉換率(CVR)? 網頁設計與SEO的完美整合 文章關鍵字 排版設計 網站版型 網站版面 網站版面設計 網頁版面 網頁版面設計 訂閱電子報 姓名 E-mail 立即訂閱 感謝您訂閱達文西電子報！ SEO套版網站，優惠$NT62,000(1年代管+SSL) 請與我們聯繫 線上客服 TOP