Tweet
Tweet

Slide 1

Slide 1 text

您還在用那種 給一大塊空白框 自己排內容的編輯器嗎? 談網站內容編輯器

Slide 2

Slide 2 text

編輯器的用途是什麼? • 協助使用者把內容放到網路上的工具。 • 解決痛苦的線上排版工作流程的工具。

Slide 3

Slide 3 text

把東西放在網頁上的歷史演進… ? 2009 2016 使用網頁設計軟體， 編輯後上傳到網頁伺服器 各種方便的線上工具，簡化「把 東西放在網路上」這回事，並提 供簡易的編輯器。

Slide 4

Slide 4 text

七大功能進化 一.拖曳式排版 二.版面範本/編排樣板 三.免費授權圖片 四.編排內容如何 RWD 五.線上圖片編輯工具 六.付費擴充功能 七.其他

Slide 5

Slide 5 text

一、如何設定版面上有些什麼東西? 拖曳式排版/積木架站系統

Slide 6

Slide 6 text

讓設計網站變成一種樂趣 不懂程式別擔心！用拖拉就能瞬間開店 介面超簡單，自己動手 拖曳式排版功能 - 以 為例

Slide 7

Slide 7 text

拖曳式排版功能 - 以 為例

Slide 8

Slide 8 text

技術原理 … weebly wix 1. 版型設定工具 2. 功能模組設定工具 3. 模組內容編輯工具

Slide 9

Slide 9 text

1. 版型設定工具規格 1.選擇視覺佈局 …

Slide 10

Slide 10 text

1.選擇視覺佈局 1. 版型設定工具規格

Slide 11

Slide 11 text

1.選擇視覺佈局 1. 版型設定工具規格

Slide 12

Slide 12 text

weebly 1. 版型設定工具規格

Slide 13

Slide 13 text

1. 每一區塊可設定寬、高、水平/垂直內外邊距 • 用滑鼠直接拖曳(任意拖、網格系統)、 • 用鍵盤輸入(百分比、固定數值) 、 • 用滑鼠選選項 (ex. 側邊欄寬200px，其餘內文區自動延伸，水平垂直置中、滿版、中間固定…) 2. 調整區塊位置、增加/減少一塊時，其他區塊的行為? • 寬度自動縮小/ 寬度自動加大 / 區塊覆蓋或堆疊 / 留白一塊 / 往下推 / 往上補 / 提示 3. 限制使用者進行錯誤的設定 • 某區塊 / 某模組不可以被拖曳 • 某模組不可放在特定區塊內 • 某區塊不准出現特定選項 • 某區塊最多只能放幾個特定模組 4. 其他 • 有些區塊需要可以共用，網站有 50 頁，不用設定 50 次 • 詳盡而且符合邏輯的操作提示、視覺回饋，都要考驗程式人員的邏輯與經驗。 1. 版型設定工具規格

Slide 14

Slide 14 text

2.功能模組設定工具 • 由程式人員修改程式碼 • 控制每一隻程式的左邊、右邊、上面、下面會放什麼東西 • 控制某內容在第一層、第二層的顯示方式 • 程式直覺好改，機動性高 • 功能難以重用或繼承，浪費時間與人力 • 後台以功能導向為主 : 直覺性低，使用者常常進行 「把後台選單從頭點到尾」的運動 • 頁面模組導向 • 建立頁面，再設定頁面上使用哪些模組 • 再設定選單上面要顯示哪些頁面 • 跟頁面無關的，如運費併到購物車設定或商店設定

Slide 15

Slide 15 text

2.功能模組設定工具範例 不是這支程式叫[聯絡表單]，而是哪一頁裡面要放[聯絡表單]?

Slide 16

Slide 16 text

使用上來說…滿意度不如預期 http://www.epub360.com/ 彈性超級大，但沒人會用 Vs. 又陽春又難用，沒人想用 我只是要調一個文字區塊…

Slide 17

Slide 17 text

所以… 我只要滑鼠拖一拖、點一點， 就可以把網頁排成這樣嗎? http://jd-tw.com/2016/04/01/【店鋪運營操作】產品描述，以圖片走天下 使用上來說…滿意度不如預期 業主覺得花了錢應該得到的「商業設計」範例: 「要跳一點! 」「不要一塊一塊的!」「換比較好看的中文字型!」

Slide 18

Slide 18 text

使用上來說…滿意度不如預期 http://www.soberma.com/ 期望結果 實際操作後.. 看到別人都可以 做出… 預算 需求

Slide 19

Slide 19 text

技術/政策問題 • 跟預想的方便性有落差 • 程式先天架構不佳，或相依性太高 • 有限的中文字體樣式，但又不太可 能串 webfont • 永遠做不完的編排樣式組合 • 使用者螢幕太小時，用起來不方便 • 功能彈性超級大，但沒人會用 • 沒有經過時間與使用者考驗 • 主力經營方向不在那邊，產品比免 費的還難用 http://www.weebly.com/features#!/photos-and-slideshows FREE 的就有這麼多種，那付了快10萬元的呢?

Slide 20

Slide 20 text

把區塊拖來拖去， 就可以做出像樣的頁面排版嗎? 使用者不想學習這些工具 使用者沒有時間 使用者很懶

Slide 21

Slide 21 text

二、版面範本/編排樣板 對懶人或是對資訊不熟的人而言，用現成的範本來改不是更快?

Slide 22

Slide 22 text

要建立頁面? 第一步就是選擇版型 – 以 UNBOUNCE 為例

Slide 23

Slide 23 text

免費版型不夠選? 還有付費的 – 以 JIMDO 為例 常見問題: • 選了之後跟範例圖完全不一樣 • 要 A 版型的風格，B 版型的佈局，怎麼辦?

Slide 24

Slide 24 text

技術/政策問題 • 沒有最美，只有更美 • 沒有退流行，只有不適合 • 版面上的圖片是從哪來的? • 套用版面後的操作落差(幾乎每一家都有的問題) • 舊版面可以裝得下新功能模組? • 新版面是否相容舊功能模組? • 如何避免更換版面後，原先輸入的資料，或設定好的套件發生異常?

Slide 25

Slide 25 text

我們有了範本功能 我們有了各種模組功能， 就可以做出像樣的網站了? 才怪!

Slide 26

Slide 26 text

三、網頁上的圖片從哪來? 如何降低圖片取得的門檻?

Slide 27

Slide 27 text

圖片不夠大，都不好意思講這網站是今年做的… ifc.com.hk/ bestqce.com.tw/

Slide 28

Slide 28 text

圖片很重要，但不想花錢，又拿不出好照片? 出處:https://www.facebook.com/photo.php?fbid=10208261473428192&set=a.2573387447670.2135353.1043800293&type=3&permPage=1

Slide 29

Slide 29 text

提供免費素材，也可以線上直接購買授權照 - 以WIX為例

Slide 30

Slide 30 text

提供免費素材，也可以線上直接購買授權照 - 以WIX為例

Slide 31

Slide 31 text

線上直接購買授權照 - 以 WEEBLY 為例

Slide 32

Slide 32 text

提供免費素材圖 - 以 UNBOUNCE 為例

Slide 33

Slide 33 text

提供免費素材圖 – 以起飞页為例 qifeiye.com

Slide 34

Slide 34 text

提供創用授權(CC0)的圖片 - 以GOOGLE文件為例

Slide 35

Slide 35 text

技術/政策問題 • 免費圖片真的免費嗎? • 把不可商用的圖片，放到 CC0 圖庫上面釣魚? • 今天免費，明天呢? (仰賴第三方提供內容的風險) • 開發人員疑慮: 要多大的量，才有資格跟授權圖庫串接? • 使用者疑慮: 直接跟原來的圖庫網購買會不會比較便宜? • 付款方式/交易流程? • 線上刷卡? • ATM 轉帳? • 用支票付? • 開發票? • 月底請款? • 先儲點數，從點數裡面扣? • 7 天退費? • 冗長的採購與簽核報價單流程?

Slide 36

Slide 36 text

資料在電腦上看起來正常，手機上卻亂掉了? 手機上調正常，電腦又跑版了?

Slide 37

Slide 37 text

四、編排內容如何 RWD? 手機/PC資料分開建置 僅提供通用的編輯工具 預覽檢視工具

Slide 38

Slide 38 text

手機與電腦的資料分開建置 - 以淘寶 - 寶貝詳情為例 • 卖家可以根据自身情况对手机详情页进行调整，而又不影响PC上的体验與排版 • 减少单个宝贝的下载流量，提升打开速度 • 语音导购：卖家可以在这里上传30秒音频，对买家讲述宝贝故事 商品說明區

Slide 39

Slide 39 text

手機與電腦的資料分開建置 - 以開店 123 為例

Slide 40

Slide 40 text

編輯器僅提供通用的工具，降低出錯機率 • (X) 插入Flash • (X) 插入表格 • (X) 影像地圖 • (X) 切片工具 • 用這些工具排不 出好看的版面? 請直接放大圖吧! shopline weebly

Slide 41

Slide 41 text

排版時提供預覽檢視工具，不用自己縮放視窗 wix weebly 頁面導向的線上網站建置器 • 在每一頁都有一個切換檢視模式的工具 • 切換手機/PC 時，顯示不同設定工具

Slide 42

Slide 42 text

技術/政策問題 • 依螢幕解析度，來決定要給使用者看什麼資料嗎? • 給 iPad Pro 看 Flash? • 給 iPad Pro 看滑鼠移入才會顯示的效果? • 還要判斷裝置特性、裝置類型。 • 預覽檢視器的實現技術 • 依 UserAgent ，而不是依視窗尺寸判斷的 JS 功能套件 • 拖動視窗尺寸，不會重新運算數值的 JS 功能套件 • 無法模擬出真實行動裝置的顯示結果(字體顯示、不支援的元件、翻轉螢幕、輸入 文字彈出鍵盤或系統 UI 元件、觸控行為) • 資料存兩套，DB與檔案儲存空間加倍 • 一些商城平台號稱排版工具多好用，但他們的客戶成功案例，多半還是 整張圖直接放上去…

Slide 43

Slide 43 text

五、提供線上修圖工具 還在找盜版、下載大陸或韓國的不明修圖軟體?

Slide 44

Slide 44 text

圖片編輯工具 - 以 WIX 為例 https://www.aviary.com/ (2014被 Adobe 收購)

Slide 45

Slide 45 text

圖片編輯工具 - 以 WEEBLY 為例 https://www.weebly.com/blog/introducing-weebly-imageperfect

Slide 46

Slide 46 text

技術/政策問題 • 儲存成本 • 操作問題、瀏覽器相容性 • 難以滿足一些用慣免費修圖 app 的使用者 • 圖片編輯器從哪來? • 網頁編排需考慮品牌特性、目標族群、畫面視覺的美觀、資訊呈現的動 線、內容在行銷上、在SEO上的優化等等，卻被低估為普通的文書工作。

Slide 47

Slide 47 text

六、付費擴充功能 線上遊戲課金買裝備的那套模式， 或是花錢買時間，沒付錢就不給用/不給登入

Slide 48

Slide 48 text

擴充功能 – 以 MYMY 為例

Slide 49

Slide 49 text

擴充編輯工具 - 以痞客邦插件百寶箱為例

Slide 50

Slide 50 text

擴充編輯工具 – 以淘寶為例 8 RMB/月 6 RMB/月 10 RMB/月

Slide 51

Slide 51 text

擴充工具 – 以 WEEBLY 為例

Slide 52

Slide 52 text

技術與政策問題 • 程式之間的相依性與耦合性問題? • 第三方工具產生的日後維護問題? • ex.FB 取得生日的政策更新 • API改版造成套件異常 • 第三方服務收掉的話怎麼辦? • 新服務… • 付款方便嗎? • 交易流程 • 開發票? • 月底一次結清? • 先儲點數，從點數裡面扣?

Slide 53

Slide 53 text

其他不算是編排功能的新功能

Slide 54

Slide 54 text

每次編輯時都提心吊膽怕把版面改壞? 修改前先存到記事本? 電腦存一推記事本檔案， 用來切換活動內容? 改壞了，去GOOGLE庫存頁面 找資料貼回來? 幫別人看 CODE，看為什麼他 改了之後就壞了? 歷史編輯紀錄 即時預覽功能 定時自動存檔

Slide 55

Slide 55 text

分析統計報表、A/B TEST 成效測試 unbounce Benchmark mail

Slide 56

Slide 56 text

一店多開 範例: http://www.et-select.com/appluco_merchants.php • FB 粉絲專頁開店 • APP 開店 • 套版型錄 APP

Slide 57

Slide 57 text

好厲害的編輯器，可是… 客人是來賺錢的 不是來學網頁編排的

Slide 58

Slide 58 text

技術上來說…編輯器再好用，對問題幫助不大 客戶的痛點 : 為什麼要找人做網頁? • 自己不會做/沒時間做………….………降低難度 • 自己以前維護的人跑了 • 現有的系統不敷使用 • 享受花錢當大爺的整合服務 • 自已沒有產出內容的能力 • 拍照 • 編排………….………降低難度 • 文案 • 影片 • 增加客服問題 網址打上去 可以看到網站 即可 把人做的事情 交給機器來做

Slide 59

Slide 59 text

結論: 一切都是商業手法 想幫使用者解決問題? 讓使用者覺得「你的產品」可以解決他的問題 • 先用低門檻把使用者拐進來，在適當時機推銷各種付費加值服務。 • 使用者沒有主控權，甚至資料無法輕易備份出來。平台或系統要改 版、要收攤；要強制收費，只能乖乖聽話。 • 花錢買空間/花錢買時間/花錢買功能，如果遇到有錢也買不到的功 能，怎麼辦?

Slide 60

Slide 60 text

0 10 20 30 40 50 60 70 80 90 100 套板平台 客製化系統 進入門檻 看似有模有樣 完整的網站 痛苦 舒服 費用高昂、功能殘障不全的功能、 需要什麼功能都要自己提；自己想，不然就沒得用 冗長的溝通過程、自己 debug 快速做出看似有模有樣，能動的網站 符合預算跟科技的需求都可做到 有錢也買不到的細部功能需求

Slide 61

Slide 61 text

• 只要有心，人人都可以做網站? • 功能需求不高的話，不用再花大錢請人做網站。 • DIY 風氣盛行，只要花自己的時間即可。不過如果可以當大爺的話， 誰要 DIY ? • 許多平台號稱排版工具多好用，但他們的客戶成功案例，多半還是 整張圖直接放上去… • 消費者環境改變? • 桌上型電腦 --> 手機/平板 • ATM 轉帳 --> 各種代收或線上支付方式 • 自幹 --> 用別人做好的服務，少奮鬥十年 Today, if you’re building a service for communities or individuals then Facebook is almost certainly your biggest competitor. B2B: Excel, B2C: Facebook. 出處

Slide 62

Slide 62 text

使用者體驗、服務設計、使用者為中心風氣盛行， 所以東西都變得更好用了? • 產品難用的下場是? • 賺到越多服務費、改版費用? 才怪 • 增加許多的客服與溝通成本 • 別人都在做，只有我沒有的話，根本沒人要用、賣不掉。 • 台灣企業多數把「設計思考、使用者體驗」當作行銷手段 走向一是行銷策略（要人家買你的東西）； 走向二是公司發展的策略（要人家用得開心、一用再用、推薦別人使用）。 但目前很多公司都把使用者體驗當作前者，甚至只是噱頭。 • 使用者經驗設計是趨勢，還是噱頭？ 多數的工作內容是針對網頁或軟體進行圖像化介面設計；少部分工作內容包含介面規劃， 與僅有UI為關鍵字的工作內容相比，並無太大區別。

Slide 63

Slide 63 text

感謝以下服務啟發本文章

Slide 64

Slide 64 text

感謝以下服務啟發本文章

Slide 65

Slide 65 text

幻想時間 - 下一代的編輯器會有什麼功能? 下一代的網站可能是怎麼做出來的? • 語音辨識輸入、腦波意念輸入 (說的比做的好聽，想得美，成為一種現實…) • 人工智慧優化文案、視覺樣式 (電腦繼種花生與下圍棋之後，開始從事創意生產行為…) • VR 或其他五感的虛擬實境體驗 (從小聽到大的線上試衣間、虛擬教室，終於要更進化了嗎?) • 在地專業語意化翻譯、即時翻譯 (例如上架一個語言，資料自動變 N 種語言…) • 自動找客戶 / 更多推廣與宣傳機制 https://twitter.com/cowbellerina/status/701318208322609152