這年頭的內容編輯器解決了哪些問題?

在部落格、網站建置工具、購物商城內，那種讓管理者編輯內容的東西，在這年頭有哪些進化，又解決了那些問題?

Transcript

1. 您還在用那種 給一大塊空白框 自己排內容的編輯器嗎? 談網站內容編輯器
2. 編輯器的用途是什麼? • 協助使用者把內容放到網路上的工具。 • 解決痛苦的線上排版工作流程的工具。
3. 把東西放在網頁上的歷史演進… ? 2009 2016 使用網頁設計軟體， 編輯後上傳到網頁伺服器 各種方便的線上工具，簡化「把 東西放在網路上」這回事，並提 供簡易的編輯器。
4. 七大功能進化 一.拖曳式排版 二.版面範本/編排樣板 三.免費授權圖片 四.編排內容如何 RWD 五.線上圖片編輯工具 六.付費擴充功能 七.其他
5. 一、如何設定版面上有些什麼東西? 拖曳式排版/積木架站系統
6. 讓設計網站變成一種樂趣 不懂程式別擔心！用拖拉就能瞬間開店 介面超簡單，自己動手 拖曳式排版功能 - 以 為例
7. 拖曳式排版功能 - 以 為例
8. 技術原理 … weebly wix 1. 版型設定工具 2. 功能模組設定工具 3. 模組內容編輯工具
9. 1. 版型設定工具規格 1.選擇視覺佈局 …
10. 1.選擇視覺佈局 1. 版型設定工具規格
11. 1.選擇視覺佈局 1. 版型設定工具規格
12. weebly 1. 版型設定工具規格
13. 1. 每一區塊可設定寬、高、水平/垂直內外邊距 • 用滑鼠直接拖曳(任意拖、網格系統)、 • 用鍵盤輸入(百分比、固定數值) 、 • 用滑鼠選選項 (ex. 側邊欄寬200px，其餘內文區自動延伸，水平垂直置中、滿版、中間固定…) 2. 調整區塊位置、增加/減少一塊時，其他區塊的行為? • 寬度自動縮小/ 寬度自動加大 / 區塊覆蓋或堆疊 / 留白一塊 / 往下推 / 往上補 / 提示 3. 限制使用者進行錯誤的設定 • 某區塊 / 某模組不可以被拖曳 • 某模組不可放在特定區塊內 • 某區塊不准出現特定選項 • 某區塊最多只能放幾個特定模組 4. 其他 • 有些區塊需要可以共用，網站有 50 頁，不用設定 50 次 • 詳盡而且符合邏輯的操作提示、視覺回饋，都要考驗程式人員的邏輯與經驗。 1. 版型設定工具規格
14. 2.功能模組設定工具 • 由程式人員修改程式碼 • 控制每一隻程式的左邊、右邊、上面、下面會放什麼東西 • 控制某內容在第一層、第二層的顯示方式 • 程式直覺好改，機動性高 • 功能難以重用或繼承，浪費時間與人力 • 後台以功能導向為主 : 直覺性低，使用者常常進行 「把後台選單從頭點到尾」的運動 • 頁面模組導向 • 建立頁面，再設定頁面上使用哪些模組 • 再設定選單上面要顯示哪些頁面 • 跟頁面無關的，如運費併到購物車設定或商店設定
15. 2.功能模組設定工具範例 不是這支程式叫[聯絡表單]，而是哪一頁裡面要放[聯絡表單]?
16. 使用上來說…滿意度不如預期 http://www.epub360.com/ 彈性超級大，但沒人會用 Vs. 又陽春又難用，沒人想用 我只是要調一個文字區塊…
17. 所以… 我只要滑鼠拖一拖、點一點， 就可以把網頁排成這樣嗎? http://jd-tw.com/2016/04/01/【店鋪運營操作】產品描述，以圖片走天下 使用上來說…滿意度不如預期 業主覺得花了錢應該得到的「商業設計」範例: 「要跳一點! 」「不要一塊一塊的!」「換比較好看的中文字型!」
18. 使用上來說…滿意度不如預期 http://www.soberma.com/ 期望結果 實際操作後.. 看到別人都可以 做出… 預算 需求
19. 技術/政策問題 • 跟預想的方便性有落差 • 程式先天架構不佳，或相依性太高 • 有限的中文字體樣式，但又不太可 能串 webfont • 永遠做不完的編排樣式組合 • 使用者螢幕太小時，用起來不方便 • 功能彈性超級大，但沒人會用 • 沒有經過時間與使用者考驗 • 主力經營方向不在那邊，產品比免 費的還難用 http://www.weebly.com/features#!/photos-and-slideshows FREE 的就有這麼多種，那付了快10萬元的呢?
20. 把區塊拖來拖去， 就可以做出像樣的頁面排版嗎? 使用者不想學習這些工具 使用者沒有時間 使用者很懶
21. 二、版面範本/編排樣板 對懶人或是對資訊不熟的人而言，用現成的範本來改不是更快?
22. 要建立頁面? 第一步就是選擇版型 – 以 UNBOUNCE 為例
23. 免費版型不夠選? 還有付費的 – 以 JIMDO 為例 常見問題: • 選了之後跟範例圖完全不一樣 • 要 A 版型的風格，B 版型的佈局，怎麼辦?
24. 技術/政策問題 • 沒有最美，只有更美 • 沒有退流行，只有不適合 • 版面上的圖片是從哪來的? • 套用版面後的操作落差(幾乎每一家都有的問題) • 舊版面可以裝得下新功能模組? • 新版面是否相容舊功能模組? • 如何避免更換版面後，原先輸入的資料，或設定好的套件發生異常?
25. 我們有了範本功能 我們有了各種模組功能， 就可以做出像樣的網站了? 才怪!
26. 三、網頁上的圖片從哪來? 如何降低圖片取得的門檻?
27. 圖片不夠大，都不好意思講這網站是今年做的… ifc.com.hk/ bestqce.com.tw/
28. 圖片很重要，但不想花錢，又拿不出好照片? 出處:https://www.facebook.com/photo.php?fbid=10208261473428192&set=a.2573387447670.2135353.1043800293&type=3&permPage=1
29. 提供免費素材，也可以線上直接購買授權照 - 以WIX為例
30. 提供免費素材，也可以線上直接購買授權照 - 以WIX為例
31. 線上直接購買授權照 - 以 WEEBLY 為例
32. 提供免費素材圖 - 以 UNBOUNCE 為例
33. 提供免費素材圖 – 以起飞页為例 qifeiye.com
34. 提供創用授權(CC0)的圖片 - 以GOOGLE文件為例
35. 技術/政策問題 • 免費圖片真的免費嗎? • 把不可商用的圖片，放到 CC0 圖庫上面釣魚? • 今天免費，明天呢? (仰賴第三方提供內容的風險) • 開發人員疑慮: 要多大的量，才有資格跟授權圖庫串接? • 使用者疑慮: 直接跟原來的圖庫網購買會不會比較便宜? • 付款方式/交易流程? • 線上刷卡? • ATM 轉帳? • 用支票付? • 開發票? • 月底請款? • 先儲點數，從點數裡面扣? • 7 天退費? • 冗長的採購與簽核報價單流程?
36. 資料在電腦上看起來正常，手機上卻亂掉了? 手機上調正常，電腦又跑版了?
37. 四、編排內容如何 RWD? 手機/PC資料分開建置 僅提供通用的編輯工具 預覽檢視工具
38. 手機與電腦的資料分開建置 - 以淘寶 - 寶貝詳情為例 • 卖家可以根据自身情况对手机详情页进行调整，而又不影响PC上的体验與排版 • 减少单个宝贝的下载流量，提升打开速度 • 语音导购：卖家可以在这里上传30秒音频，对买家讲述宝贝故事 商品說明區
39. 手機與電腦的資料分開建置 - 以開店 123 為例
40. 編輯器僅提供通用的工具，降低出錯機率 • (X) 插入Flash • (X) 插入表格 • (X) 影像地圖 • (X) 切片工具 • 用這些工具排不 出好看的版面? 請直接放大圖吧! shopline weebly
41. 排版時提供預覽檢視工具，不用自己縮放視窗 wix weebly 頁面導向的線上網站建置器 • 在每一頁都有一個切換檢視模式的工具 • 切換手機/PC 時，顯示不同設定工具
42. 技術/政策問題 • 依螢幕解析度，來決定要給使用者看什麼資料嗎? • 給 iPad Pro 看 Flash? • 給 iPad Pro 看滑鼠移入才會顯示的效果? • 還要判斷裝置特性、裝置類型。 • 預覽檢視器的實現技術 • 依 UserAgent ，而不是依視窗尺寸判斷的 JS 功能套件 • 拖動視窗尺寸，不會重新運算數值的 JS 功能套件 • 無法模擬出真實行動裝置的顯示結果(字體顯示、不支援的元件、翻轉螢幕、輸入 文字彈出鍵盤或系統 UI 元件、觸控行為) • 資料存兩套，DB與檔案儲存空間加倍 • 一些商城平台號稱排版工具多好用，但他們的客戶成功案例，多半還是 整張圖直接放上去…
43. 五、提供線上修圖工具 還在找盜版、下載大陸或韓國的不明修圖軟體?
44. 圖片編輯工具 - 以 WIX 為例 https://www.aviary.com/ (2014被 Adobe 收購)
45. 圖片編輯工具 - 以 WEEBLY 為例 https://www.weebly.com/blog/introducing-weebly-imageperfect
46. 技術/政策問題 • 儲存成本 • 操作問題、瀏覽器相容性 • 難以滿足一些用慣免費修圖 app 的使用者 • 圖片編輯器從哪來? • 網頁編排需考慮品牌特性、目標族群、畫面視覺的美觀、資訊呈現的動 線、內容在行銷上、在SEO上的優化等等，卻被低估為普通的文書工作。
47. 六、付費擴充功能 線上遊戲課金買裝備的那套模式， 或是花錢買時間，沒付錢就不給用/不給登入
48. 擴充功能 – 以 MYMY 為例
49. 擴充編輯工具 - 以痞客邦插件百寶箱為例
50. 擴充編輯工具 – 以淘寶為例 8 RMB/月 6 RMB/月 10 RMB/月
51. 擴充工具 – 以 WEEBLY 為例
52. 技術與政策問題 • 程式之間的相依性與耦合性問題? • 第三方工具產生的日後維護問題? • ex.FB 取得生日的政策更新 • API改版造成套件異常 • 第三方服務收掉的話怎麼辦? • 新服務… • 付款方便嗎? • 交易流程 • 開發票? • 月底一次結清? • 先儲點數，從點數裡面扣?
53. 其他不算是編排功能的新功能
54. 每次編輯時都提心吊膽怕把版面改壞? 修改前先存到記事本? 電腦存一推記事本檔案， 用來切換活動內容? 改壞了，去GOOGLE庫存頁面 找資料貼回來? 幫別人看 CODE，看為什麼他 改了之後就壞了? 歷史編輯紀錄 即時預覽功能 定時自動存檔
55. 分析統計報表、A/B TEST 成效測試 unbounce Benchmark mail
56. 一店多開 範例: http://www.et-select.com/appluco_merchants.php • FB 粉絲專頁開店 • APP 開店 • 套版型錄 APP
57. 好厲害的編輯器，可是… 客人是來賺錢的 不是來學網頁編排的
58. 技術上來說…編輯器再好用，對問題幫助不大 客戶的痛點 : 為什麼要找人做網頁? • 自己不會做/沒時間做………….………降低難度 • 自己以前維護的人跑了 • 現有的系統不敷使用 • 享受花錢當大爺的整合服務 • 自已沒有產出內容的能力 • 拍照 • 編排………….………降低難度 • 文案 • 影片 • 增加客服問題 網址打上去 可以看到網站 即可 把人做的事情 交給機器來做
59. 結論: 一切都是商業手法 想幫使用者解決問題? 讓使用者覺得「你的產品」可以解決他的問題 • 先用低門檻把使用者拐進來，在適當時機推銷各種付費加值服務。 • 使用者沒有主控權，甚至資料無法輕易備份出來。平台或系統要改 版、要收攤；要強制收費，只能乖乖聽話。 • 花錢買空間/花錢買時間/花錢買功能，如果遇到有錢也買不到的功 能，怎麼辦?
60. 0 10 20 30 40 50 60 70 80 90 100 套板平台 客製化系統 進入門檻 看似有模有樣 完整的網站 痛苦 舒服 費用高昂、功能殘障不全的功能、 需要什麼功能都要自己提；自己想，不然就沒得用 冗長的溝通過程、自己 debug 快速做出看似有模有樣，能動的網站 符合預算跟科技的需求都可做到 有錢也買不到的細部功能需求
61. • 只要有心，人人都可以做網站? • 功能需求不高的話，不用再花大錢請人做網站。 • 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. 出處
62. 使用者體驗、服務設計、使用者為中心風氣盛行， 所以東西都變得更好用了? • 產品難用的下場是? • 賺到越多服務費、改版費用? 才怪 • 增加許多的客服與溝通成本 • 別人都在做，只有我沒有的話，根本沒人要用、賣不掉。 • 台灣企業多數把「設計思考、使用者體驗」當作行銷手段 走向一是行銷策略（要人家買你的東西）； 走向二是公司發展的策略（要人家用得開心、一用再用、推薦別人使用）。 但目前很多公司都把使用者體驗當作前者，甚至只是噱頭。 • 使用者經驗設計是趨勢，還是噱頭？ 多數的工作內容是針對網頁或軟體進行圖像化介面設計；少部分工作內容包含介面規劃， 與僅有UI為關鍵字的工作內容相比，並無太大區別。
63. 感謝以下服務啟發本文章
64. 感謝以下服務啟發本文章
65. 幻想時間 - 下一代的編輯器會有什麼功能? 下一代的網站可能是怎麼做出來的? • 語音辨識輸入、腦波意念輸入 (說的比做的好聽，想得美，成為一種現實…) • 人工智慧優化文案、視覺樣式 (電腦繼種花生與下圍棋之後，開始從事創意生產行為…) • VR 或其他五感的虛擬實境體驗 (從小聽到大的線上試衣間、虛擬教室，終於要更進化了嗎?) • 在地專業語意化翻譯、即時翻譯 (例如上架一個語言，資料自動變 N 種語言…) • 自動找客戶 / 更多推廣與宣傳機制 https://twitter.com/cowbellerina/status/701318208322609152