sheet2site 把 Google 試算表快速架出網頁(圖文教學)

林育正 Riven
RAR 設計攻略
Published in
6 min readMar 28, 2019

實作《社群+》收錄全台設計師跟開發者相關社群!

《社群+》
社群+ 是蒐錄全台設計與科技相關的社群的網站,讓全台的社群參與者都可以快速找到有興趣的社群,不論是實體或是線上都可以;社群維護者可以填寫 Google 表單,系統會彙整資料完整的社群上架到社群+ 網頁,邀請你/妳一起完成這份社群整理 :) 

會做這個網頁最主要是因為要玩玩看 sheet2site 這個曾經獲得生產力評比網站 Product Hunt #1 的工具,可以用 Google 試算表的資料快速轉成網頁,這個概念有點類似資料庫,可以幫網站做成動態類型的網頁,可以根據表單中的資料即時置換內容。

這款工具適合用在可以用 Google 試算表整理的資料,比如說數據、書籍、名單等等,可以快速建立一個堪用的網頁,因為試算表算是相當普及的雲端工具,已經會操作的人可以不用寫一行程式碼地將網頁上架。

https://www.sheet2site.com/

因為 sheet2site 目前需要付費使用,無免費方案,我在這邊先當勇者去刷卡嘗試玩看看,從最低的方案 29.99 鎂開始,接下來會把心得記錄在這篇文章當中,提供讀者做為參考。

但是,不得不說這個網頁的購買流程實在非常令人煩躁,付款後也沒說要怎麼開始進行,我花了將近 20 分鐘翻遍整個網站,找任何登入或開始的地方,但網站中所有 「GET STARTED」按鈕都指向價目表頁面,完全不給已經付款完的使用者指示,後來在信箱裡面才在垃圾郵件裡面翻到原來開通信在這裡..

好⋯經過 30 分鐘後,終於可以用了,我們來看看這個網頁架設工具怎麼使用。

sheet2site 架設網頁步驟

這邊將一步一步附上截圖過程,提供給比較不熟悉這類工具的同學。如果對於架站比較熟悉的朋友,就看著圖片滑過去就好。

點開信箱中收到的註冊信

會有一個教你怎麼製作的網頁,雖然是可以做得出來,但跟前面付款流程一樣,使用者體驗的部分實在欠佳⋯ 可能會造成部份人會卡在某處而不得其門,以下還是先詳列圖文步驟。

選擇想要用的模板 Templates

這邊的模板選了之後樣式能改的就不多,慎選!

副本一份模板的試算表後選擇檔案 > 發佈到網路

再把試算表網址貼在註冊頁面這邊並產生網頁

就是瀏覽器上面那段落落長的網址,直接貼到信箱中收到的註冊成功網址即可產生網頁。

在試算表中可以更改背景圖片與標題

這裡基本上就是自訂網頁的呈現,能改的東西坦白說並不多,但就堪用堪用。

換上背景、更改標及與按鈕還有 LOGO

這邊比較需要注意的是,要換上背景及 LOGO 的圖片都需要自備圖床,再貼上圖片網址,習慣上我是上傳到自己維護的主機。

背景的部分有預設加上一層黑色遮罩,為的是讓文字能更凸顯;LOGO 則也是固定大小,讓你可以直接上傳套用。

玩起來還算簡單,試算表更新內容之後大概過 5 秒網頁就會自動更新,跟 Wix 或 WordPress 等架設工具比起來稍有限制,但操作上就相對更親民一點。

使用試算表資料做動態內容

接下來就是重點了,要把試算表的資料轉換成網頁內容。

在 Content 頁籤這邊可以編輯內容

可以自定義名稱、描述、網址以及顯示圖片等等。

filter 頁籤則是可以做分類

這邊的分類也可以套用到內容當中,也可以隨意增減。

產出的動態網頁內容

之所以叫動態是因為可以隨著 Google 試算表而更新內容,不是寫死的。

這邊的圖片預設也都有上一層黑色遮罩,這其實在介面設計中也很常見,可以維持照片的一致性。

搭配 Google 表單

既然是動態的,就可以結合 Google 表單讓使用者填寫,將蒐集完的資料直接放到網頁上。

可以簡單做社群類型與地區篩選

後記

後來透過訊息把付款後的體驗跟作者說了一遍,也成功獲得作者的積極聯繫,側面了解原來作者也是遠距工作者,透過這個工具做獲利,希望大家可以給予更多意見讓產品更好~

整體操作上雖然自由度不比 WordPress 等方式架設網頁,但若是你跟我一樣是後端苦手的話,透過 sheet2site 可以稍微體驗一下把資料跟網頁做連結;已經熟悉 Google 試算表的朋友也可以在表單上做更多函式去整理,若是像是 社群 + 這樣的網頁要做資料搜集並呈現的話,那麼就是一個很方便快速地運用(從開始架站到寫完這篇文章僅花大概 3 小時)。

不過由於 sheet2site 是訂閱式付費機制,如果是不寫程式又懂試算表的朋友很適合;但我覺得考量到 UI 介面上的限制以及長久經營的成本,自己寫會比較妥當。因此我的做法是先釋出目前 beta 版本的網頁,在網路上蒐集看看網友、鄉民的意見與意願,如果真的有很多社群填寫登錄,再來進行大改版會更符合經濟效益;這在 UI/UX 上稱為原型測試(Prototype Testing),也有點類似精實創業一書中提到的最小可行產品(MVP)機制。

發佈出去後收到來自真實使用者的意見回饋;釋出網頁後 12 hr,已經增加 20個社群登錄在社群+。

--

--

林育正 Riven
RAR 設計攻略

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design