跳至主要內容

介面研究與練習 · 服務網站與客戶工作台研究

CUT.STUDIO 影片剪輯工作室

獨立研究 Nas.com 介面,重建 31 個原站公開頁面,並接入真實客戶與管理員流程,涵蓋需求、私有檔案、回饋與版本審閱。

CUT.STUDIO 介面研究首頁,展示黃色 Start 按鈕與剪輯工作室主圖
CUT.STUDIO 影片剪輯工作室 · 網站畫面預覽

作品拆解

從頁面結構,到實際畫面。

介面研究與練習

ZequnWeb 自主作品,非客戶委託;Demo 中的品牌、評價與數據屬於展示內容,不代表已核實的客戶成果。

01 / 頁面架構

訪客的資訊瀏覽動線

  1. 01服務頁面
  2. 02價格與常見問題
  3. 03帳戶
  4. 04項目需求
  5. 05檔案與回饋
  6. 06交付審閱

02 / 視覺設計

黃色 Start 按鈕與大幅媒體延續已註明來源的 Nas.com 參考;公開頁面介紹服務,自主實作的工作區以狀態、檔案與版本組織協作。

03 / 響應式取捨

服務展示與工作區採用不同資訊密度,響應式版面將導覽、需求欄位和交付操作組織到窄螢幕內容區。

依據現有實作整理的設計分析,不將其表述為客戶研究或使用者測試紀錄。

具體實作

技術組合

  • HTML
  • CSS
  • JavaScript
  • Cloudflare Pages Functions
  • D1
  • R2
  • Cloudflare Pages

僅列出現有作品紀錄或公開腳本可支持的技術;內容架構與 UX 在上方個別說明。

介面研究與練習

交付內容與作品結果

本作品的交付是頁面所展示的設計與實作。目前沒有實測的營收、轉換率或客戶成長結果。

截圖記錄指定日期的頁面畫面,不驗證表單送達、交易、無障礙或效能表現。

瀏覽公開 Demo

作品背景

從使用者需要的資訊開始。

這是 ZequnWeb 為虛構品牌 CUT.STUDIO 製作的獨立研究。公開頁面視覺與已註明來源的參考素材依據 Nas.com 重建,客戶工作台與後端由本站獨立實作;並非客戶委託,與 Nas.com 無關聯。

設計與實作方式

依據原站版面、CSS、媒體與互動重建 31 個核心公開頁面及標準路徑別名;另外以 Cloudflare Pages Functions、D1 與私有 R2 儲存實作本站客戶工作台和管理員後台。

內容與功能

  • 31 個原站公開頁面、標準路徑別名與響應式導覽
  • 參考站字體、媒體、平滑 FAQ 與素材來源說明
  • 註冊、安全工作階段登入、變更密碼與一次性復原碼
  • 客戶需求、每個檔案最多 25 MiB 的私有上傳與專案回饋
  • 管理員指派、進度更新與專案活動紀錄
  • 多版本交付、修改請求與最新版本核准

這個頁面展示設計與實作能力,並非台灣客戶實績;示範中的品牌、空間、評價或其他內容不代表 ZequnWeb 已驗證的客戶成果。

討論您的網站

把適合的做法帶到您的業務。

分享目標客戶、必要內容與功能,一起確認下一步的製作範圍。

討論網站需求