網頁切版是什麼？如何切版竟會影響開發效率？3分鐘帶你了解

網頁切版是什麼呢？網頁切版大致可以切成header (頂端列)、nav (導覽列)、body (內容區)、aside (側邊欄位)、footer (頁底區) 這些區塊。

切版不僅是 ... 跳至主要內容 首頁 精選文章 網頁設計 HTML教學 CSS教學 JavaScript教學 架站教學 架站知識 架站設定 外掛教學 關於我 網頁切版是什麼呢？所有程式設計開發專案的初期，都會需要進行切版，切版是不是只要用標籤區分一下區塊就叫做切版呢？這樣還有什麼專業可言嗎？ 這篇我們帶你用3分鐘的時間，快速了解網頁的切版概念吧！ 目錄 什麼是網頁設計中的切版？切版哪裡專業？對網頁的影響UI/UX–切版之前總結 什麼是網頁設計中的切版？ 網頁設計的切版，基本上就是網頁設計師或前端工程師，依照介面設計師(UI/UX)的畫面設計劃分區塊後，使用程式碼進行劃分區塊的動作，就是切版。

不過就算沒有介面設計師，切版還是有通用的切法。

例如網頁設計的切版，大致可以分成header(頂端列)、nav(導覽列)、body(內容區)、aside(側邊欄位)、footer(頁底區)這些區塊，將這些區塊用各自專有名稱的標籤或使用div標籤來切出，讓未來要做哪一塊的設計，就直接把程式碼寫在相對應的區域即可。

切版大方向 切版哪裡專業？對網頁的影響 很多人可能覺得切版很簡單，不過就是這樣把區塊切一切，那有什麼難度？又有什麼專業嗎？ 切版其實很看經驗，你想要單純切出那些區塊確實不困難，但事實上，即便是任兩位工程師要切出相同的區塊，卻很可能是使用不同的切法。

而不同的切法會影響著後續如果想要增減功能的時候，包含功能容不容易新增、z-index頁面圖層會不會互相覆蓋等問題。

不過大方向還是有的，當我們有基本的區塊概念，至少最外層你不會把nav包進body當中，導致向下捲動的時候還要另外處理nav的部分。

網頁切版 UI/UX–切版之前 很多小公司的UI和UX是同一個人做的，甚至還會兼做切版的工作，但其實UI和UX是兩個是不完全相同的領域。

UI是介面設計，在整體頁面調性、圖文排版、配色、呈現的感受等，在UI設計可以完成；而UX是使用者體驗，主要針對介面的易用性進行探討。

舉例來說，最早Line通訊軟體的前幾個版本中，APP上的navbar是在畫面接近手機最上方的，在UI設計師看來，這樣跟一般網頁的視覺感受上相近，功能也沒問題，點了每一個頁籤就出現不同功能畫面。

但UX設計師就需要研究，使用者每次在用手機的時候，手通常是放在手機的左下和右下兩側，也有拇指熱區的研究顯示(如下圖)，使用者使用手機的習慣上確實是這樣。

也就是說，當使用者要去按APP上接近手機最上方的navbar時，手是需要移動相當大的幅度。

來源：TheThumbZone:DesigningForMobileUsers 後來也就越來越多手機APP的navbar移到手機最下方，距離使用者的手越近，體驗也就越好，最後將navbar放置在最下方就成為目前主流的導覽列位置。

總結 切版不僅是一個會影響到增減功能時候的問題，還可能直接影響到使用者體驗的部分，從UI、UX設計到切版，幾乎可以說是一體的，切版也是很專業的一門學問，擁有越多經驗、越能夠更快速做到預期的效果，也更能大幅降低未來修改的幅度喔！ 延伸閱讀： 學程式要選哪個程式語言？給零基礎自學者的推薦HTML是什麼？什麼都不會就從網頁設計開始學習！CSS是什麼？學會了可以如何應用？ 獺斯特 哈囉！我是獺斯特，曾擔任網頁設計師。

希望可以用最簡單的方式，讓零基礎的人無痛學會網頁設計，入門程式領域，跟著我一起獺上程式之路吧！ 歡迎追蹤獺斯特粉專！ 點選下方按鈕追蹤獺斯特IG，獲得更多網頁設計相關知識： 👉立即追蹤獺斯特IG 習慣用Line接收訊息嗎？ 點選下方按鈕直接加入Line官方帳號–【獺斯特】網頁設計教學，我會提供第一手學習資訊給你，有任何問題也歡迎直接傳送訊息給我，我會直接為你解答呦！ #CSS#HTML#切版#網頁切版#網頁設計#開發效率 分享這篇文章 2則留言 Verygoodarticle.Icertainlyappreciatethiswebsite.Keepwriting! It’smypleasure.Thankyouforwatching! 發佈留言取消回覆 名稱 * 電子郵件 * 網站 新增留言 在瀏覽器儲存我的名字,電子郵件和網站以備下次留言時使用.發佈留言 搜尋 最新文章 【網頁設計課程】零基礎轉職！HTML、CSS快速入門 【免費資源】必學5+6！網頁設計排版技巧與設計原則 [SEO優勢]什麼是SEO？為什麼我該學？架設網站學SEO的3大好處！ 網站頁面有哪些？5個網站的必要頁面與內容解析 【官網的重要性】建立品牌官網的3個理由 文章分類 架站教學 架站知識 架站設定 網路行銷 網頁設計 CSS教學 HTML教學 JavaScript教學 相關文章 【網頁設計課程】零基礎轉職！HTML、CSS快速入門 2022-06-28 Bootstrap教學嵌入使用方式，1次套用完成RWD網頁 2022-05-24 [CSS教學]CSS如何使用？.和#分別用在哪裡？ 2022-04-112則留言