EN{keywords 10個外行人最常問的網頁設計專有名詞解釋 - 凱士網頁設計

選擇文章分類
2020-07-05
Eric Wang

10個外行人最常問的網頁設計專有名詞解釋

當你有機會與網頁設計師一起工作,卻對網頁設計領域的專有名詞一竅不通嗎?什麼是layout?什麼是主選單?什麼是slider?什麼是footer?什麼是header?隔行如隔山,這時候你可能需要一個網頁設計專有名詞的字典。我們列出10個外行人最常問的網頁設計名詞,讓你用最短的時間進入狀況。

 

{keywords 10個外行人最常問的網頁設計專有名詞解釋 - 凱士網頁設計

當你有機會與網頁設計師一起工作,卻對網頁設計領域的專有名詞一竅不通嗎?什麼是layout?什麼是主選單?什麼是slider?什麼是footer?什麼是header?隔行如隔山,這時候你可能需要一個網頁設計專有名詞的字典。我們列出10個外行人最常問的網頁設計名詞,讓你用最短的時間進入狀況。

 

 

什麼是「網頁設計」?什麼是「網站設計」?

通常「網頁」是的是單一個頁面,而「網站」則是由許多網頁所組成的一個站台。所以當我們講「網頁設計」,通常指的是一個頁面的設計,而「網站設計」,則指的是整個網站、包含所有頁面的設計。

 

 

什麼是RWD(響應式網頁)?

簡單的說,就是同一個網頁,因應不同裝置寬度(電腦、平版、手機)而有不同的版面變化。

延伸閱讀:搞不懂什麼是RWD響應式網頁設計?我們來看圖說故事

 

 

什麼是Header(頁首)?

Header(頁首),通常包含Logo(網站標誌)、Mainmenu(主選單)及其他放在網站最上方的相關元素。網頁很容易因為一個點擊,就跑到其他網站去。 Header是一個網站最具識別性的區塊,它用來讓使用者了解是不是還在同一個網站,並透過Mainmenu(主選單)切換到網頁的其他頁面,就像百貨公司的樓層導覽一樣,讓你知道自己所在位置,以及是否還在同一棟百貨公司大樓。

 

 

什麼是Footer(頁尾)?

Footer(頁尾),指的是網頁最下方的區塊,通常包含頁尾導覽(footnav)、聯絡資訊、隱私權政策、回首頁等訊息,有些網站也會加上公司logo等具識別性的元素。最近流行以Big-footer的設計方式,在頁尾加入像sitemap般的大型導覽設計,一來可以用來強化SEO的操作,二來可以當成sitemap,讓使用者連結至網站的其他頁面。

 

 

什麼是Breadcrumb(麵包屑)?

Breadcrumb(麵包屑),它曾經有很多不同的稱呼,網站導覽、層級導覽、瀏覽路徑、網頁路徑,都是指同一個東西。後來因為從國外導入UI/UX的觀念,在網頁設計中就直接以英文名Breadcrumb直譯為麵包屑。麵包屑源自於童話故事糖果屋,故事主角從沿路灑下的麵包屑回到家,因此又稱之為麵包屑導航,既直覺又容易理解。

 

 

什麼是Copyright(版權所有)?

Copyright(版權所有)是寫在頁尾的一段文字Copyright©,用來說明這個網站的內容版權歸屬於哪一間公司或組織,一般來說只要放上公司抬頭或組織名稱即可。

延伸閱讀:版權宣告(Copyright©)應該怎麼寫?

 

 

什麼是Layout(版面設計)?

Layout(版面設計)指的是一個網頁從上到下的圖文編排。網頁不是平面印刷品,網頁的每個文字和圖片都是可能有功能性的、可以連結的、可以互動的。因此版面設計除了色彩、文字編排以外,也包含了網頁的版面配置、區塊功能、未來的互動設計。Layout通常是採用靜態圖面的方式呈現,也就是JPG圖檔,它是沒有互動功能的,不能點擊,也沒辦法看到電腦版切換到RWD手機版的變化。即便如此,我們通常還是需要用Layout來溝通整個頁面的視覺設計和互動設計,以做為下一階段切版的溝通基礎。

 

 

什麼是切版?

切版,指的是把版面設計(JPG圖檔)透過css、javascript和html編寫成真正的網頁,較為正式的講法則是「前端設計(Front-end Design)」。切版後的網頁可以有一些基本的互動,例:點擊、連結、放大圖。切版完成後,就可以進入程式撰寫和資料庫整合的階段。

 

 

什麼是Slider(圖片輪播)?

Slider(圖片輪播),使用多張圖片在同一個區塊內輪流播放,可以讓網頁增添豐富又不佔空間,經常會運用在首頁的主視覺,它可以自動播放,也可以用手指拖拉瀏覽各個圖片或頁面。即便它可能對SEO造成負面影響,也只有不到一半的人會瀏覽第二頁,但老闆們和部份行銷人員們還是很愛Slider。

 

 

什麼是Overview頁(總覽頁)?List頁(列表頁)?

List頁指的是有多篇文章標題的頁面,常用於「產品列表」、「新聞列表」,點擊文章標題後,就會進入單一文章頁。Overview頁則通常是分類列表頁,顧名思義讓使用者一進頁面就看到這間公司所有的產品主要分類,所以也叫總覽頁。

 

 

什麼是Sitemap(網站導覽)?

Sitemap(網站導覽頁),有人直譯為「網站地圖」,透過系統自動將網站選單架構列出清單,讓使用者快速了解一個網站的內容架構,但實質上很少人會認真去瀏覽Sitemap。Sitemap的另一個用途是提供Google將網站內容索引至關鍵字資料庫。然而隨著近來Google及各大搜尋引擎均可透過送出sitemap.xml或是在網站根目錄佈署sitemap.xml檔,讓Google收錄網站各頁面,實質的Sitemap頁在近年來已逐漸淡出,許多網站已慢慢捨棄Sitemap頁的建置。

 

延伸閱讀:推薦B2B企業網站常用的網站架構(sitemap)

 

 

當你熟悉這些網頁設計專有名詞
並不代表你了解網頁設計
但它會讓你跟網頁設計師的關係更融洽

 

 

如果你對網頁設計還有什麼不了解的地方,歡迎詢問凱士

 

訂閱文章

想要收到CADIIS網頁設計公司的相關訊息嗎?

我們會在FB轉貼網頁設計專欄文章,歡迎訂閱CADIIS凱士數位臉書專頁

 

 

 

 

{keywords 10個外行人最常問的網頁設計專有名詞解釋 - 凱士網頁設計

Eric Wang

凱士數位科技專案經理 Eric,擁有設計與理工背景,擅長和行銷、業務、管理、資訊、設計等專業人員進行跨領域溝通,樂於分享與討論,長期致力於網頁設計白話文運動。

 

 

 

想進一步諮詢嗎?

凱士網頁設計深受B2B外銷公司、上市櫃公司及外商公司推薦,累積超過100個網頁設計案例。

 

想跟我們談談您的網頁設計需求嗎?

 

立即填表諮詢

 

 

凱士數位科技

網頁設計諮詢專線: 04-2221-0688

想進一步了解網頁設計服務?