Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

C8f411867882d122213cf3a14c03898e?s=47 jiimmysu
April 04, 2016

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

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

C8f411867882d122213cf3a14c03898e?s=128

jiimmysu

April 04, 2016
Tweet

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