前言

omg!經過了前面四篇文章(前情提要看這裡),終於我畫出了我自己首頁的 wireframe 了,簡直是可喜可賀、恭喜老爺、賀喜夫人。這個過程,其實在覺得太有趣了~​

wireframe 完成後,就可以搭配產出 sitemap,這裡稍微用我懂的內容說明一下,什麼是 wireframe 以及 sitemap呢?​
wireframe 對我來說,就是這個畫面會長得如何的示意圖,而 sitemap 則是具體來說內容列表。​

以下用我自己的例子來說:

一、小金魚的人生實驗室 blog 首頁的 wireframe 與 sitemap

wireframe 是你們會看到簡單版的首頁的樣子,但是你們會發現,上面的 header 點進去是什麼內容,具體來說無法從這張圖知道,於是就是需要 sitemmap。

wireframe:小金魚的人生實驗室blog首頁

Sitemap:小金魚的人生實驗室blog

這是小金魚人生實驗室的 sitemap:相反的,從sitemap中看不出畫面的呈現方式,但是可以看到需要準備的內容,因此,這兩個是相輔相成的。

值得一提的是,不管是 wireframe 或是 sitemap,都不是可以一氣呵成的,因此,不必追求完美,目標還是「小步快跑」,先做就對了。​
因此,我自己在這部分也是有很多還沒有完成的,哈哈哈,但有什麼關係呢XDDD​

接下來就進入了細節 wireframe 以及實際畫面的解說,歡迎讀者們提出你們的看法~~~在這裡,我會同時呈現 wireframe 以及實際的畫面來做比對。

二、細節講解:【header 列表以及自我介紹】

wireframe:小金魚的人生實驗室 header 列表以及自我介紹

實際:小金魚的人生實驗室 header 列表以及自我介紹

解說 – header

header 的內容取捨是所有取捨中最最最最困難的,因為我原先包含了第一層和第二層,加起來大概有20個連結吧!​
有一次,我請教我的 UI / UX 好友Soking 獸王(大大的 medium在這裡),他給了我一個非常好的反思,他問我說:我自己看別人網站的時候會點到 header 嗎? 如果會的話,我的耐心有多少?我才發現,我的糾結一點意義都沒有。​

因此最後我保留了四個部分,分別為:​

  1. 文章​
  2. 關於我​
  3. 電子報​
  4. 活動​

我的想法是四個項目點進去之後會各自連接到新的一頁,各頁的內容就是上方 sitemap 提到的內容,但如果你點進去發現沒有動,不要懷疑,就是我還沒準備好,就沒有超連結而已XDDD

解說 – 自我介紹

一般來說,會有兩版自我介紹,分為短版跟長版,短板可用於首頁,長版則是用於完整自我介紹頁面,如果這兩個好好寫的話,也是可以用在不同的地方。​

我的短板暫時先用之前寫的,長版的部分還沒寫,預計是下次會根據《沒人看見你的好,你要懂得自己誇》來練習寫一個版本,到時候再來跟大家分享。​

值得先提醒的是:首頁的短版自我介紹可以連接到長版的自我介紹,而在長版的自我介紹中,可以包含自己提供的服務以及聯繫的方式,這兩個其實都可以各自做一個新的頁面,自己完整提供的服務我們成為「sales kit」,聯繫的方式常見的 Facebook 粉絲團、IG 之外,也可以加入你的頻道(podcast、YouTube等都可以),其實就是各種可以聯繫到你、看到你的管道。​

但因為我自己其實沒有這麼複雜,因此這三個我會集合起來做成同一個頁面,也就是「長版自我介紹」。

三、細節講解:【電子報訂閱】

基於過去研究了 20 個個人 blog,幾乎 90% 的人都把訂閱電子報放在中間,我覺得,見賢思齊(成語是這樣用的嗎),我也要來做一個這樣的設計。

wireframe:小金魚的人生實驗室電子報訂閱

實際:小金魚的人生實驗室電子報訂閱

解說 – 電子報訂閱

我必須說,這部分呢,做起來不困難,困難的是,要如何可以呈現地好看(正是我最不拿手的),以及從 convertki 那邊設定好之後,可以完整呈現,雖然看起來很簡單,但著實是……花了我好久的時間,不斷的微調,然後不斷的重新整理哈哈哈哈。​

眼尖的你,是否看到了下面那個綠色的「看讀者的反饋」?是的,那頁是空的,為什麼?​
因為我根本還沒有取得你的回饋啊哈哈哈哈哈哈(總不能我一人分飾多角吧XDDD)​

而 sitemap當中,我的確也預留了這一塊。​
是的~一個網站的成行,不單單是靠作者,也是需要讀者的。

四、細節講解:【其他平台的露出】

這裡原先要放的是左半邊是 三樓居酒屋的 podcast,右半邊則是訪談的影片,可是我一直無法做好podcast的呈現,只好,我先兩邊都放訪談的影片了哈哈哈哈。

wireframe:小金魚的人生實驗室其他平台露出

實際:小金魚的人生實驗室其他平台露出

解說 – 其他平台的露出

但我不得不說,一旦放上了影片,突然版面就多采多姿了起來,哈哈哈,尤其是整個 blog 都是白色底,黑色字,藍色的按鈕,突然有花花綠綠的感覺也不錯。這部分是最簡單的,純文字 + 放置 YouTube 的影片,結案。

五、細節講解:【近期活動】

這一個 part 純碎是我想要整理近期的互動,wirframe 看起來非常的簡單,可是,圖片的大小大家都不一樣,因此,畫面上會有微幅的高低(我哭),但是,沒關係,我們先求有,再求好。

wireframe:小金魚的人生實驗室近期活動

實際:小金魚的人生實驗室近期活動

解說 – 近期活動

活動的部分,如果是還可以報名,就導連到報名的頁面,(話說,我們幫這週六的讀書會做了一個進階的頁面,大家快來看),如果是結束的活動,就可以導連導活動心得頁面。​

同時,不管是第三部分的不同媒體露出,或是活動,都會被集合到 header 的「活動」頁面去,也就是說,這頁會是所有頁面的集合~聽起來是不是就覺得長久累積下來,會變得特別的豐盛呢XDDD(感覺很好吃)

為什麼需要過往活動頁集合?

因為,如果有人突然需要你的自我介紹以及過去的活動經歷,一定是霎那間很難產出,如果說 blog 本身就有相關的頁面,平日在寫的時候,因為沒有時間壓力,你也會寫得比較仔細,需要快速提供的時候,又直接有素材可以寫。至少,你可以把這頁當作是自己的活動記錄,未來想要找資料,可以自己從這裡找。​

同時,也給未來來到你這個頁面的讀者,有一個可以完整了解你的機會。

六、結尾

終於!要結尾了,每次寫這種需要截圖的文章總是會不小心就……寫太長XDDD​
但是終於有初步的樣子了,自己看著也是覺得挺開心的~~~​

那請大家不要忘記我們的徵文活動,來吧!讓我的信箱爆掉吧!​
我們的目標是蒐集到超過100個回饋(生產者總是會不由自主幫自己訂 KPI 啊)

七、蒐集讀者電子報回饋 – 直接回覆此封信件即可

在這裡,我想要請大家你的電子報回饋給我~~~同時也一起幫大家宣傳你們的粉絲團、IG、YouTube、電子報等等,字數不限(但排版的時候,我可能會視情況擷取文字。)

我需要的內容:

  1. 想呈現的名稱:不一定是本名,可以是暱稱(ex 小金魚)、縮寫(ex Ms. 小),或是任何你想要被稱呼的名字​
  2. 產業:簡單寫即可(ex 科技業、製造業、自由業等等),或是你的其他身分(ex 小金魚的人生實驗室主筆)​
  3. 關於電子報的回饋:(1)最喜歡這份電子報的地方(2)這份電子報為你帶來的影響(3)你會推薦這份電子報給什麼樣的人​
  4. 你想要我協助推廣的內容:請給我連結,並且註明是哪個類型(不限種類,但是請確保連結正確~)

預計呈現的方式如下:

xxx電子報的回饋xxx,xxx電子報的回饋xxx,xxx電子報的回饋xxx。xxx電子報的回饋xxx,xxx電子報的回饋xxx,xxx電子報的回饋xxx。xxx電子報的回饋xxx,xxx電子報的回饋xxx,xxx電子報的回饋xxx。xxx電子報的回饋xxx,xxx電子報的回饋xxx,xxx電子報的回饋xxx。

——科技業 / 小金魚的人生實驗室主筆 小金魚(粉絲團、IG、YouTube)

【延伸閱讀】翻修 blog 全記錄
01 翻修blog全記錄 01:在執行計畫之前,你要思考的一件事情-我如何制定我的blog翻修計畫(靈感來自《沒人看見你的好,你要懂得自己誇》)
02 翻修blog全記錄 02:30萬瀏覽量的blog,Top 10文章解密大公開
03 翻修blog全記錄 03:blog內容要怎麼編排?內容策略:兩種blog思維-出版物思維與圖書館思維
04 翻修blog全記錄 04:blog首頁如何設計:看完了20個成功的一人公司官網後,你不能不知道的10個必備要素

Show CommentsClose Comments

Leave a comment