馬克信箱傳教頁面-Notion 3步驟排版設計邏輯分享
前言小廢話
這篇文章會教學怎麼從頭設計設計自己需要的展示區塊、與排列的邏輯。
直接拿去傳教頁面連結在這：https://bit.ly/3KbAYIE
會是偏向排版概念教學，技術性的設定與操作，包含怎麼使用資料庫的功能方便使用者快速找到所需的優惠資訊，還有比較細節的排版設定，會寫在後續的文章中。
更新的資料庫設定教學：
但我最重要的是想要傳教還有跟 Notion 社團的朋友們分享，就算這篇連 SEO 關鍵字都沒吃到也要寫哈哈哈哈~
觸及就交給眾點友了（？）
頁面設計流程
- 設計前：觀察原始資料，設定設計目標，才不會什麼都想放又太複雜。
- 確定架構與初版內容：新增好區塊架構，完成頁面雛形後補充資料。
- 補上文案與排版：透過顏色、文案、排版，讓區塊分類更明確，加速理解或增加耐讀性。
- 檢核目標：確認架構與內容有對到一開始設計目標，方便使用者搜尋與瀏覽，做最後一次調整。
Notion 頁面設計前-觀察原始資料、確認目標
目標：希望透過這個工具解決的問題
在一次不小心點入馬克信箱優惠專區後，認為 Notion 的功能應該可以有比較方便分類跟搜尋的功能。
加上 YouTube 說明欄位資訊豐富到滿出來，決定設計一個好分類資訊的頁面，方便教徒們推坑使用。
確立目標：設計一個傳教頁面
觀察資料：
先觀察原始資料，把需要的資料複製到 Notion 的頁面中。
全部拉好之後，初步評估幾個需要的分類。
這個時候想到的都可以先打起來，不用猶豫太多，後續都還可以調整。
順序依照使用者可能會想要看到的資訊做排序。
贊助專區對剛開始接觸的使用者來說不重要，就可以往後移。
有趣會吸引人的資訊就往前放，例如推坑經典影片。
把原始資料跟架構放在頁面左右兩側，一方面是方便一邊確認資料產出架構。
等等也可以把左邊的資料拖曳到右側架構中。
一、確定架構，填上資料
將每個內容拉到所屬區塊標題中，完成分類雛形
到這個步驟，頁面已經會有一個基本的資料架構雛型了。
依照內容補充資訊
如果是熟悉的資訊，在排版的過程中，腦子一定會閃過一些想要補充的資訊。
我都會先都打上去，一段話或是主題關鍵字都沒關係，方便下一步驟判斷排版分類與補充資訊。
二、排版：讓區塊分類更明確
透過顏色、文案、排版，加速理解或增加耐讀性
資料拉好之後很醜是剛好而已，接著就要幫他整形成自己看得下去的樣子了。
- 文字
標題依照資訊分層，設定標籤格式 H2、H3
階層不用太多，其他就統一設定一般內文 - 顏色
區塊標題依照自己喜歡的顏色挑選，顏色我會抓兩到三個。
有 icon 的區塊，參考之前 Notion 線上課程建議，底色跟著 icon 設定。
在這個階段我會把內容補充到約 90% ，一邊調整排版。
三、檢核目標與最後調整
確認架構與內容有對到一開始設計目標，方便使用者搜尋與瀏覽，做最後一次調整。
資料都排版都弄好之後，出動手機，檢查在行動裝置上的瀏覽順不順暢。
手機看每個區塊的細節也會被放大，有錯字或是語句不順暢的地方會特別明顯。
也是檢查才發現忘記幫頁面增加目錄。
最後再做一次檢查
- 確認資料順序對使用者是最有幫助的
- 手機上觀看流暢
- 每個區塊的目的與功能對第一次看的人都好理解
就完成一開始提供的那個版本了：https://bit.ly/3KbAYIE
結語、進階：資料庫應用與排版小技巧
其實只要確認一開始的目標，後續調整與撰寫文章分享的架構都會很清楚。
最花時間的其實都是定義問題，與思考觀看人的需求。
下週與下下週會另外寫兩篇文章，分別介紹 Notion 資料庫的應用與 3 個排版小技巧，篇幅會較短但很實用。
如果有任何操作上的問題也可以留言告訴我，這邊會再整理問題做比較完整的單元分享。
One Comment
Comments are closed.