【第二屆 RM 雙週記】網站設計入門、內容管理系統 CMS

Source: https://unsplash.com/photos/bzqU01v-G54?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink

2022／7／28

❮ 前言 ❯

專門為 UI/UX 初學者打造的工作坊 ‍🏃‍♂️ Reborn Marathon 🏃‍♀ 透過為期十週的培訓，幫助學員建立 UI/UX 的基礎知識體系，並執行專案實作，是新手入門或轉職 UI/UX 設計師的敲門磚！

第二屆 Reborn Marathon 已經來到第六週，學員也陸續完成 Persona、Figma、使用者訪談等操作，終於開始進入網站設計的環節了！這兩週有三部課程影片、loading 稍微重一些，但也代表我們能帶走滿滿的乾貨啦😍

❮ 學習回顧 ❯

Week -5~6 -1 手把手教你 Web 設計：形象網站

「形象網站」是品牌與大眾溝通的重要媒介📣 內容從個人作品集到公司產品、業務的介紹都有，以幫助外界更了解我們。形象網站可以分為：單一產品／服務性網站（例如 Miro、Figma）和品牌網站（例如 H&M、Starbucks），兩者的差異在於網站主打的內容不同，一個為功能導向、一個為商品曝光導向。

本次課程將網頁分成四大區塊：Header 頁首、Menu 選單、Cotent 內容、Footer 頁尾，各別說明其內容、種類、設計原則，同時比對網頁版與手機版在版面設計的差異。其中最複雜的就是「選單種類」😵 包含 Dropdown、階層式、滿版區塊、側邊欄等等，不同選單可以對應資訊呈現的各式需求；手機版則相對簡單，主要使用 Hamburger Menu（小漢堡）或轉換頁面的方式，以達成更簡潔的版面配置。

在內容排版設計的章節，我們也初步認識了網格系統、寬度限制等，基礎卻很關鍵的網頁 UI 概念📚 例如在網站設計的過程中，建立網格系統作為版面配置的依據，可以使網站的整體視覺更為整齊、舒適。課後，大家將會從借鑒其他網站開始，透過 Figma 實作加強對網頁設計的熟悉度及敏感度！

Week -5~6 -2 手把手教你 Web 設計：平台網站

先來釐清兩種網站的性質及目標！ 📍形象網站（B2C）：透過自建網站，將商品、服務提供給消費者 📍平台網站（B2B2C）：提供商品供應方、消費者物流與金流等中介服務

例如大家所熟悉的 蝦皮、Agoda、CakeResume，由多方業主、用戶進行交易或求職等互動的網站，就是屬於平台網站。他的設計訴求在於：需要乘載各種內容的「主體框架」，內容繁雜、更新頻率高且資料量龐大，因為有眾多供應商相互競爭，透過不斷推出促銷活動來增加購物導流🛒

平台網站的網頁設計通常分為兩類，這跟網頁在裝置上的顯示效果相關，下面範例的兩個網站，都可以點進去、開個獨立視窗縮放看看唷！ 📍RWD 響應式網頁設計：隨著視窗縮放「即時」變換內容排版，適合內容簡單的形象式網站或一頁式網站，例如 Meet jobs。 📍AWD 自適應式網頁設計：不會隨著視窗縮放即時變換版面，程式會判斷裝置大小後，讀取不同的 CSS 顯示，適合複雜的平台網站，例如 Pinkoi。

無論採取哪種網站設計，都是為了讓使用者有更好的體驗！

接下來的課程將內容拆分為首頁、列表頁、詳細資訊頁，來了解平台網站的資訊排列、常見元素，並且透過 蝦皮、Pinkoi、CakeResume、Agoda 等網站進行案例解析。在實作網頁設計時想有所借鑑？參考這些服務成熟、使用量極大的網站就對了🎉

Week -5~6 -3 手把手教你 Web 設計：內容管理系統 CMS

可以將「內容管理系統（Content Management System）」理解為我們常說的「後台💻」。網站內容的維護、業務處理都會透過 CMS 進行，相較以往需要工程師才能更動網站的模式，更為方便、易於操作。

不同種類的網站都會需要使用 CMS，而其常見功能包括：內容管理、Dashboard 儀錶板、產品管理、訂單管理、會員管理等等。其中，大家可能會對 Dashboard 比較陌生，它是用來呈現平台營運的統計數據、資訊或圖表，如購買成長趨勢、買家地區比例、棄單率等📊 可以說是一種數據分析後台。

此堂課程的主軸為 CMS 的 UI 設計，同時提及了很多樣、繁瑣的概念。從綜觀性的 CMS 內容佈局，到列表、表單、分頁、圖表等細部的種類及設計原則，都透過實例解說詳細地帶大家認識。雖然資訊量有點龐大，不過可以帶著我們跳脫使用者的角度，了解每個網頁元件背後的編排邏輯，覺得非常有趣🤩 而且內容大多是延伸自我們對網站的既有認識，所以不會太難吸收。

想參考 CMS 架構編排的話，可以研究蝦皮的上架表單喔！

❮ 小組討論回顧 ❯

學員們的 UI/UX 專案，正在依據每個人的節奏運作中🥳 多數人已經完成 Figma 的練習，正要進行 wireframe 繪製、使用者訪談。最多人希望精進的地方在於使用者訪談的技巧，要如何揀選有效回應、如何引導受訪者，成員們一起討論、分享看法及範例，幫助彼此往專案落地更近了一步💪

除此之外，還有很多人反映進度落後的情況，建議大家可以停下來釐清現況、調整步調繼續向前！雖然跟著線上課程的進度一步步前進，會有點無法評估後續的目標跟 loading，但定期、定量的知識輸入跟實作練習，也許能達到更好的學習成效🔍

❮ 學習心得❯

在 UI/UX 的知識基礎上，進一步學習各種工具的操作，以及目標、流程的安排，可以明顯感覺到知識和技能在一點點地累積。

隨著學習階段的深入，我們也更需要借鑑網路資源，補充 UI/UX 的相關知識，例如使用者訪談、品牌網站建構、Figma 操作。網路上有不少相關的中、英文教學資源，一方面能夠看出 UI/UX 的專業需求相當龐大，另一方面使我深刻體悟到 UI/UX 專業培養不容易在學校內進行😥 可見跨出校園、自主尋求資源，是類似網路專業的關鍵心法，而 Reborn Marathon 可以透過密集、規律的短期培訓，規劃一條專為初學者、從基礎知識建立到專案產出的學習路徑，對 UI/UX 有興趣的朋友不妨持續關注！

六週過去，代表培訓期間已經過半了😮 知道 UI/UX 可以如何實踐後，更能體會它的樂趣！好像每一個環節，都能處於秩序與創意的平衡，洞察使用者需求、優化體驗的過程，也相當趣味、有成就感。大家在進行專案的同時，也來思考 UI/UX 的哪個部分最吸引你吧✨

📌想學習 UI/UX？馬上關注 Reborn Academy 的後續活動吧～ 粉專往這裡走 ▹▸▹ https://www.facebook.com/reborn.academy/