Constance Tang

有沒有比 WordPress、Wix 和 Webflow 更簡易的網頁架設平台嗎？

Startup 是初創人士和網頁設計新手的理想架站平台，以採用 Bootstrap 前端框架構建網站而聞名。透過網上編輯器加入網頁模板，半小時內即可擁有漂亮實用的響應式設計 (RWD, responsive web design) 網頁，一行程式碼也不用寫。2021 年 11 月初，平台迎來新版本 Startup 5，以配合 Bootstrap 最新一代的框架，架構更精簡流暢。

平台功能簡介

加入網頁模板

整個設計都在 Startup Builder 上進行。先根據網頁的內容類型和篇幅，從左欄選擇並加入所需的網頁元素和模板到網頁上。

Startup 提供多達 150 多個網頁元素模板，涵蓋常用元素如導覽列、聯絡區，以及用途具體的如價目表和應用程式展示頁。每個元素都有多款設計及深淺色版本可選。模板典型泛用，適合不同類型的網站。

編輯器介面

如要修改文字或圖片，先在中間的介面選取要編輯的元素，然後在右欄編輯。

中間：網頁佈局，點擊按鈕將元素上移、下移或刪除。
右欄：修改元素屬性，如文字、圖片、間隔、背景、HTML 標題語法、進場動畫等等。
左欄：指定區域 <section> 的元件圖層列表，可複製、移動及加入網頁元素，如彈出式視窗，日後將會補齊更多元素。

編輯圖片

介面提示每張像素圖片需要兩張圖檔，分別是標清 (1x) 及高清 (2x，標清兩倍大) 尺寸，以符合 retina 高清螢幕的開發標準。這段程式碼很容易被忽視，但在視覺介面中就顯得明暸易用。此外，介面亦有欄位寫上圖片替代文字以改善 SEO 及幫助視障人士理解圖片。

至於 SVG 圖示，鑑於目前無法上傳 SVG 檔案，因此需要貼上 SVG 程式碼，這一點不太方便，但下方有選項可改變圖示的背景和線條顏色，這是在其他平台少見的便利功能。

根據 Breakpoint 設定元素

部份設定能夠針對不同的裝置視窗闊度，亦即 breakpoint 去佈局。例如，如果網頁在桌面電腦上顯示，會需要較多的間距，但在手機上則不然，所以我們會根據 breakpoint 做調整。

其他平台傾向預覽指定的 breakpoint 時做調整。雖然這裏你要切換螢幕尺寸方可預覽，但好處是所有 breakpoint 的設定一目了然，不必跳來跳去。

全站風格樣式

當今網頁設計重視網頁元素及視覺上的一致性，Startup 提供簡單的設定助你輕鬆實現。

當沒有選取頁面元素時，右欄顯示全站風格樣式設定，包括字體、顏色及頁面捲動時的動畫。這些都是全局設定 (global settings)，因此會影響目前網頁及整個專案／網站的元素。

如果你對網站的風格沒有頭緒，你可嘗試從右上方的 5 種預設風格中選擇，頁面的字體和顏色會相應改變。這些設定都很直觀，但要注意：

• 字體：支援多種語系的 Google Fonts，可以先選語系，後選字體，但沒有繁體中文可選（可能 Google Fonts 的繁體中文字體太少了）。
• 顏色色塊有涵義：例如，Action 組別是以 Action 1、Action 2 命名；深淺色文字的三個色塊分別代表主色（主要文字）、輔色（次要文字）和禁用色 (disabled)，所以別隨便選色。

匯出 HTML

一旦完成網頁設計，你可以從頂部工具列點擊「預覽」，打開預覽頁面。如果沒問題，就可以一鍵「匯出」網站。這包括專案的所有網頁和資源，如圖片、JavaScript、CSS、SCSS、HTML、PHP 等。

• 用戶需升級至收費方案方可匯出。
• 匯出只適用於靜態網站*。對於電商或表單，建議先匯出網頁，然後根據文檔修改程式碼。文檔有與電郵、Telegram 和 MailChimp 相關的整合指引。

根據產品路線圖，平台日後將與 static.app 整合，有望一鍵發佈及托管網站，而毋須額外匯出。

*靜態網站：網站內容固定不變，顯示的內容完全反映 HTML 的程式碼。

分享設計成果

在專案介面可取得個別網頁的分享連結。打開連結並登入平台後，可以看到編輯介面，但這與常見的分享不同，它不是公開的頁面預覽，因此較適合與有登入帳戶的同事分享連結。

為甚麼要用 Bootstrap 做網頁？

沒有哪個前端工程師或網頁設計師不認識 Bootstrap 這把萬用刀！它是目前最受歡迎的開源前端開發框架。它使響應式網頁開發變得簡單，有齊全的組件和程式碼，並且易於維護，使開發更有效率。Startup 採用 Bootstrap v5.1 建立網站，支援 Bootstrap 5 的所有組件，所以工程師會發現相當容易承接專案。

方案收費

雖然免費方案讓你免費建立網頁，但你仍然要匯出網頁才能讓網站上線，所以無論如何你都需要升級至付費方案。說白點，免費方案其實是個讓你體驗一下編輯器的試用方案。付費方案則可以讓你使用提供的所有網頁元素，而 Business 和 Agency 兩種的付費方案的分別在網頁匯出的次數，前者每月最多 20 次，後者則無次數限制。

總結

優點

• 介面比其他平台更易用直觀。視覺化的編輯介面令你毋須寫程式碼也可製作網頁。
• 提供多款泛用模板，能在半小時內建立不花巧，打「安全牌」的響應式網頁。
• 附隨機和預設的功能，幫助用戶做決策。例如隨機放置指定數量的模板、隨機顏色組合、預設風格樣式等。
• 以 Bootstrap 開發框架建立網頁。

缺點

• 部份功能欠缺提示較難發現，無法拖拉元素或圖層來排序元素，介面的易用性有待改善。
• 較少自訂功能，不適合定制設計的網站
• 不支援/不適合製作動態頁面。雖然有電商模板，但實際只能實現介面設計的部份。

與其他平台相比，Startup 比較容易上手，因為它沒有很多自訂和花哨的功能，適合需要快速出品和簡單佈局的網站，如着陸頁、活動頁和產品頁。在功能和價格方面，Startup 的功能較少，相比之下不算便宜。如果你只是建立一個簡單的網站，但覺得 Wix、WordPress、Webflow 等平台太複雜，介面不夠直觀，或者你沒有充裕的開發資源和時間，而你的工程師習慣 Bootstrap 框架的話，那麼不妨一試。

我從 Startup 4 開始使用，但不是用來架站，而是作為設計靈感的參考或指導設計師。Startup 的版型很基本、通用，是一張「安全牌」，所以如果你有興趣，也可以參考一下。

Startup – Free Bootstrap Builder for Templates & Themes
https://designmodo.com/startup/