Sketch 實現靜態網頁 Yes, no code \^O^/

Rayon
Rayon
Jul 25, 2017 · 7 min read

此為舊版 Launchpad 功能,目前已改版,假如有想要使用的朋友請參考官方文件

資源分配及安排總是設計師與各部門之間會討論的問題,當某個時段的活動或是前期的測試,到底要花多少的時間及成本去準備?而新創公司資源在比較少或是時程較短的情況下,等待設計稿完成再請工程師完成的成本總是太高,在此分享 Anima 團隊開發的 Launchpad 靜態網頁的 Sketch Plugin,讓設計師在現有資源下高效率完成特定專案,現在就讓我們來手把手的探究 Launchpad 神奇之處。


1. 跨出第一步,動手前先看文件:

官方文件其實呈現很清楚,也有圖片及影片的相關範例,究竟 Launchpad 是什麼,文件第一句就告訴你,

Launchpad is a Sketch Plugin for creating and publishing websites.

Launchpad 是一個 Sketch 的 Plugin,讓設計師可以無需寫到任何一行程式碼並發布網站。沒錯,真的不需要動到任何 Code 🤗。特色是打造響應式設計、創建頁面連結與表單、置入影片和第三方分析工具…等。

主要可用於:

  1. 任何形式 Landing page
  2. 行銷或活動網頁
  3. 靜態網站
  4. 僅需要 Html 和 Css 的網站

但不支援有 Javascript 的動態網站,所以假如想要製作動態酷炫網頁效果,本文章可能不太適合你閱讀☹️。

2. 安裝

了解文件說明和用途後,必需要有的是一台 Mac 及 Sketch ,再來直接在官方文件裡下載安裝包後解壓縮檔就可以直接開啟,跳出視窗後確認 OK 就代表已經在 Sketch 的介面中使用 Launchpad 了。

按下 OK 即可使用,超級簡單😏

3. Launchpad 面板各功能

進入 Sketch 後就會看到右下方有個帶有 Anima Logo 的小面板,面板中又分兩個區塊,分別是 Launchpad 和 Auto Layout,但這次主要是介紹 Launchpad 的部分,面板從左到右分別是 Create Link, Launchpad Type, Add Hover Effect, Sites Manager, Preview website before Publish 這五大項目。

4. Create Link 創建連結

創建連結的方式主要有 3 種方式,首先是 Page Links,字面上已經說明是頁面與頁面之間的轉換,在網頁規劃 Sitemap 的階段,通常就已經會有頁面之間切換的關聯,而 Page Links 可以讓你直接在設計不同按鈕時時,以拖拉的方式串連不同頁面間的切換。

開始前先設置首頁
Page Links 按鈕與頁面連結

再來是 Anchor Links,單頁式的 Landing Page 是最直接可運用的,針對頁面上設定錨點,讓按鈕直接連接頁面的特定區域。

Anchor Links 選擇想要的區域設定#錨點

最後是 External Links ,顧名思義就是外部網站的連結,多半使用於像是社群媒體、活動報名、下載資訊等。

External Links 連結外部網站

以上三種創建連結方式,已經涵蓋大部分網頁需求設計及狀態。

5. Forms 表單設計

收集名單及聯絡資訊是活動網頁時常會有的需求,Launchpad 在 Forms 這功能中讓你快速創建輸入框 Input,甚至是轉換 .csv 檔案,送出後還可以告訴使用者是否成功填寫。

選取文字框的文字後,點選 Text Input
提交按鈕選擇後,輸入需要資訊即可

6. Lots of Videos 影像呈現 🎬

自從 Facebook 在 F8 開發者大會裏強調的十年計畫中,其中影像已是 Facebook 重要發展的內容之一,而影像在產品或網站上的呈現也越來越普及,而 Launchpad 也提供影像置入工具到靜態網頁中,透過影像故事讓網頁多了些互動感。

影像已是眾多產品的必備素材之一

Launchpad 並不支援上傳影像檔案(這是可預期的,畢竟這樣維運成本太高),是以連結的方式導入影像,支援的網站及格式有:

  • YouTube
  • Vimeo
  • MP4 檔案(Video URL)
  • Gif 檔案 (Gif URL)

另外,在播放設定還很貼心可以調整,分別有以下設定:

  • Auto Play 自動播放
  • Loop 循環播放
  • No Control Buttons 無任何控制播放鈕
置入 Youtube 網址

7. 釋出網站 🚀

所有設計及設定都已完成後,終於到了最後發佈的階段,總共有 2 部分,分別是 Preview 預覽及 publish 發佈。

首先是 Preview 預覽,讓你在網站發佈前先查看是否有無錯誤。

  • 每次預覽都會紀錄版本號碼
  • 可以創建無限次的預覽
  • 還可回朔之前的版本
預覽頁面
在 Sites manager 的功能裡可以查看每次預覽的版本

再來則是發佈,你可以在 Sites manager 裏管理所有需要發佈的事項,像是網址設定、Meta Tags 及 圖片、Google Analytics…等,接著 Bang! It’s all done. 所有步驟竟是如此輕鬆。

所有設定完成即可發佈

8. 總結

新創公司設計師總是扮演橋樑的角色,從使用者端了解、產品規劃、行銷執行和工程師溝通協作…等,從開始到收尾,設計師參與大多數的過程,但過程都是一時,解決當下需求才是目的,如果可以用到 60% 的成本完成,為什麼非要浪費力氣做到 100% ?也許在設計端就可以解決團隊與節省工程師時間(畢竟工程師時間很寶貴),不管是什麼工具,只要能有效率的完成需求,就不需要去拘泥於完美開發,因為永遠沒有完美這回事。

解決當下需求才是目的,如果可以用到 60% 的成本完成,為什麼非要浪費力氣做到 100% ?

Launchpad 主要適合誰使用,可能是接案設計師、新創團隊設計師、UX設計師和網頁設計公司…等。 Launchpad 某些功能是需要付費,像是客製化網址或導出程式碼...等,除了活動網站的應用,另外還可以用於使用者測試或是原型製作上,相信一個月花幾百塊省下公司聘請開發團隊實作的大把費用也許是值得的。


Rayon

Written by

Rayon

Product Designer , former hahow.in , CHOCO TV

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade