上次就提及到咩係UI同UX，而今次就會更詳細分享有關UI/UX嘅資訊。對於有意設計網站嘅你而言，相信都會聽過Wireframe、Mockup同Prototype，而以上嘅術語亦不時會被混淆。為咗加深大家對網站設計嘅認識，今次就會講述三者嘅定義同作用。
咩係Wireframe (線框稿) ?
Wireframe中文係線框稿，即係最初設計網站時嘅線稿，主要會用直線、方框、符號同灰階圖嚟表達網站嘅基本排版同結構，並唔會擺放實質內容，屬於低擬真（Low-Fidelity）嘅草稿。Wireframe最主要嘅作用係擬定網站結構，如內容鋪排及同資訊層級等，適用於設計嘅初期。
雖然Wireframe只係草稿，睇上去對開發網站並唔重要，但其實係不可或缺嘅存在。為提供最完善嘅用戶體驗，設計網站嘅初期就要先考慮到用戶需求，其次先係視覺元素等嘅細節。正因為Wireframe缺少視覺元素，所以UI/UX設計師先可更專注於版面嘅內容鋪排同用戶需求係咪相配合。再者，當喺設計網站初期就已擬定網站結構及規劃好內容，就可避免喺後期需花更多時間作出調整。
Paper Wireframe（手繪稿）、Digital Wireframe（電子線框稿）又有咩唔同？
當UI/UX設計師想快速記錄設計靈感時，就會運用到Paper Wireframe（手繪稿），即只用筆同紙作簡單嘅起草。大多時設計師亦會準備數個手繪稿，並參考不同草稿嘅長短處後，再於電腦上製作成Digital Wireframe（電子線框稿)，而Digital Wireframe就相對方便設計師同客戶及團隊溝通。然而，不論係Paper Wireframe定Digital Wireframe都唔會具備完整嘅視覺元素。
咩係Mockup（視覺稿) ?
當完成Wireframe並決定好網站結構同排版時，就可以進入下一個階段 — Mockup（視覺稿）。Mockup嘅中文係視覺稿，具備視覺元素，例如：字型、圖片、按鈕及配色等，顯示完整嘅網站介面。Mockup嘅擬真度比起Wireframe會更高，屬於中高程度嘅擬真設計模型。
雖然Mockup相比起Wireframe更貼近最終成品，但Mockup最主要都係用嚟呈現網站嘅視覺效果，及向客戶同團隊解釋設計理念，有助制定出更符合品牌形象嘅網站。當然Mockup有時都會提供簡單嘅頁面跳轉同瀏覽過程，但就無法模擬出網站嘅操作過程。
咩係Prototype（原型）？
當決定網站嘅外觀設計後，就會進入製作Prototype嘅階段。Prototype中文係原型，為最貼近最終成品嘅設計模型，擬真度屬於高級別。Prototype唔止具備完整嘅視覺元素，亦會提供模擬嘅使用體驗，令客戶同開發部門更能理解網站嘅瀏覽同使用過程。然而係製作著重UX嘅網站時侯，亦會有機會用到Low-fidelity嘅Prototype，只用最基本嘅視覺元素，如線、框，運用基本嘅媒介，如紙、筆，去展示及測試介面嘅使用流程。
原型主要用作測試網頁嘅功能同決定最終嘅設計方案，以確保設計方案係可行同符合開發成本及時間。此外，透過測試Prototype有助團隊及早發現問題，或為介面設計同功能再作出調整，令後期嘅開發階段更為順利。所以，UI/UX設計師會盡力將原型貼近最終成品，從而盡早調整可行嘅方案，以免打亂日後嘅開發計畫。
低擬真原型（Low-Fidelity Prototype）、高擬真原型（High-Fidelity Prototype）又係咩？
原型（Prototype）又有分兩種，分別為低擬真原型（Low-Fidelity Prototype）及高擬真原型（High-Fidelity Prototype）。
按定義而言，原型（Prototype）嘅概念為提供可互動嘅測試模型。所以，Prototype唔一定只出現於網站設計嘅最終階段。就以低擬真原型為例，Low-Fidelity Prototype會用到手繪圖嚟摸擬用戶嘅瀏覽過程，主要用於設計團隊可以快速檢視網站設計，並有助於激發新靈感。所以，有時係網站設計嘅初期都會有機會聽到Prototype一字，但未必已經踏入最終設計階段，Prototype只係代表「模擬瀏覽同使用過程」嘅概念。
而高擬真原型（High-Fidelity Prototype）則具備視覺元素及模擬嘅使用體驗，如可透過點擊按鈕嚟跳轉頁面，或顯示不同嘅動畫效果，令開發部門更掌握到網站嘅外觀及功能，方便日後更高效地創建網站。
一圖解釋三者分別
綜上所述，其實Wireframe 、Mockup同Prototype都係網頁設計嘅「圖像」，用作展示網頁嘅設計比各持份者了解及評價，使往後嘅開發流程更順暢。其實分辨三者最好嘅方法係按其用途同功能，以網頁設計階段嚟區分會更容易混淆，因有時具資歷嘅UI/UX設計師會直接用Mockup嚟簡介設計方案。而以下就簡單整合咗Wireframe、Mockup同原型嘅資訊。
| Wireframe | Mockup | Prototype | |
| 中文名稱 | 線框稿 | 視覺稿 | 原型 |
| 目的 | 釐清用戶對網站需求 | 呈現網站嘅視覺效果 | 模擬網站嘅使用體驗 |
| 重視 | 網站功能 資訊層級 | 網站風格 品牌形象 | 用戶體驗 介面設計 |
| 用途 | 設計網站嘅結構及功能 | 呈現網站嘅設計風格 | 決定最終嘅設計方案 |
| 擬真度 | 低 | 中 | 視情況而定 |
| 工具 | 人手 ：紙、筆 Google Jamboard, Miro, or Mural 電子工具 ：Figma、Adobe XD 或Sketch | Figma、Adobe XD 或Sketch | Figma、Adobe XD、UXpin 或Sketch |
| 呈現形式 | 簡單以線、框、符號表達 | 具備視覺元素如相片、插畫、動畫、按鈕等 | 互動式嘅設計圖像，通常可以網頁形式運行 |
我地嘅網頁設計流程又係點？
上面就分享咗設計網站嘅基本流程，由設計Wireframe、Mockup到Prototype。睇上去好似三步就完成設計階段，但實質其實可以更為複雜，而每間公司或Freelancer嘅實際設計流程亦會有不同，亦可能會根據每個項目大小及Budget去決定嘅實際設計流程。
而我哋嘅一站式嘅網站設計會從協助公司嘅業務發展及品牌形象出發，我地會先進行咨詢，了解公司嘅生意同發展意向，再提供可行及有效嘅網頁設計服務。對於一般公司或品牌推廣網站，我們會提供Sitemap確定網頁架構及Mockup嚟擬定網站嘅內容同設計風格，並決定網站所需功能，如：加入地圖、查詢表格、WhatsApp整合等。當然如果網站需要較多互動成份或資訊量較多，或者需要重新設計品牌形象，便有可能需要加入使用Wireframe及Prototype，以確保設計符合需求。
當決定好設計方案，就會正式開發網站，然後進行內部測試，保障網站嘅顯示同運作正常。然後就會提供網站給客戶進行內部測試並在需要時為進行修改，務求打造出符合客戶標準及業務需求嘅網站。當完成網站並發佈後，我地更會提供為期21日嘅免費維護服務，確保網站運作正常。