所謂：「知己知彼，百戰不殆。」，在設計一個網頁之前，先充分了解其外部的各項特性，才能避免在實作時因千萬頭緒使您一時無從下手，而陷入窘境。

因此，本篇將為您介紹在製作網頁時，我們所會用到的基礎設計理論，不一定專業，但絕對實用！

UI & UX

• 使用者介面 UI（User Interface）：

UI，即使用者在網頁中所見且能與之互動的各項視覺元素和功能。

基本注重於一個網頁的外觀和設計，舉凡版面設計、目錄、按鈕……等等元素，皆包含在其中。
我們的最終目標便是要設計一個符合大眾審美，又能直觀操作，符合大眾邏輯以便使用者操作的網頁！

• 使用者體驗 UX（User Exsperince）：

UX，即使用者對於這個網頁的使用心得回饋。

因為注重於使用者的在使用時的感受與各項滿意度，所以為了讓滿意度提高，我們在製作一個網頁時，必須有完整且清晰的訊息架構、互動流程、響應性……等。

網頁的可用性是基本，但更重要的是易用和可滿足性，我們最終的目標便是要提高使用者的滿意度和回頭率。

可以說，UI與UX是一段緊密且不可分的關係，缺一都會造成整體網頁流程的不完整。

常見網頁模板

下方是一個常見的網頁構造，大多通常會有這些元素：

• 頁頭（header）

  頁頭通常會存放Logo、網頁導覽、搜尋欄…等物件。目的是要讓網頁使用者能夠快速地了解該網頁最直白的資訊（Logo），以及該網頁的功能與大概內容。

• 菜單（menu）

  menu通常是作為擺放頁面跳轉，或某些功能的地方。

• 側邊欄（aside）

  側邊欄通常會出現在購物網站中，其目的是協助使用者更快速地篩選，並得到自己所需的內容和資訊。

• 文章內頁（article）

  文章內頁為一個網站最重要的內區，它能給予使用者更多詳細的資訊，可能是產品、可能是文章…等資訊。

• 頁尾（footer）

  頁尾通常會用來存放聯絡資訊、公司位置、cc註冊商標…等內容，以供網頁使用者做現實層面的聯絡。

  — 範例：amazon 的footer
  

剖析網頁

在開始製作網頁前，我們可以先把網頁分成數個不同的區塊，在開發時一塊又一塊慢慢編寫，最後合在一起，一個完整的網頁便完成了！

這裡，我們先用一些常見的網頁，來分析一個網頁裏頭的不同元件，以及元件下的元素和功能：

• YouTube

  

  1. header & menu ── 可以看到內含YouTube的Logo、搜尋欄、以及登入按鈕…等相關元件。
  2. aside ── 在YouTube的網頁中，它作為功能列，有著一整排的超連結，以供使用者跳轉至其他頁面，進行導覽。
  3. artical ── 裏頭存放著所有影片，是YouTube所推出的主要功能，也是使用者使用這個網站的目的。

• Facebook

  

  1. header & menu ── 同樣擺放著Logo、登入頁面和其他功能列表。
  2. aside ── 我們可以看到，Facebook的網頁中兩側各有一個aside區塊。而這單一個aside區塊裏頭又被細分為充滿了不同元素的更多區塊，好以存放各種不同的超連結，實現各種不同的功能。
  3. article ── 為所有文章的存放區，同樣是該網頁的主體。

• amazon

  

1. header ── 同樣有Logo、搜尋欄、語言切換，還多了購物車…等，一些購物網都基本具備的元素。
2. menu ── 值得一提的是，與前兩個範例不同，這裡我將menu與header依照顏色區塊拆分講解，amazon的menu中，它擔任了navigator（嚮導）的功能，能夠指引使用者前網不同的頁面。
3. artical ── 內存放著各種不同商品的資訊，並且將各個資訊區分為各個元件，再用carousel（旋轉木馬）來合併，以作為美觀展示和切換資訊的功能。

• amazon的footer

amazon的footer非常龐大，我們在此同樣將它拆分為不同區塊，分別為：

• 回到頂端鈕，因網頁所存放內容資訊量非常龐大，該網頁於各顯示器上使用都是非常長的，為使用者提供該按鈕，給予便利性，也是UX的環節之一。
• fastlink列，存放各種快速連結，供使用者參考，或更加了解該公司所提供的更多相關資訊。
• Logo和其他選單。

以上，希望本篇能為您提供一些網頁設計的基本概念，以便您在開始製作網頁時能即時發覺自己的需求！

參考資料

• UI、UX設計是什麼？沒有設計背景也能一次搞懂UI UX重要性！
  來源：https://www.managertoday.com.tw/articles/view/62746?utm_source=copyshare
  ©經理人