logo托特 | 部落格

任務日誌:Banner 設計——以托特經驗來告訴你

Emily Yu
Emily Yu
2020年10月11日

工作區域 13.png

1.Banner:網頁上常用來推播重要訊息、關鍵字、活動等資訊的區域,多以圖片加上簡單的文字訊息呈現。是增強品牌印象的重要區域。

例1.部落格頁面:右方紅框區。

1.PNG

例2.FB頁面:上方紅框區。

2.PNG

2.RWD:響應式網頁設計,可以依據電腦、手機、平板等不同頁面大小來設計其介面呈現方式與排版。

3.PV:瀏覽量,包含網頁瀏覽的人數與次數。

4.CTA:通常是一張圖片、文字或是按鈕,藉此來呼籲使用者有進一步的預期行動。

5.Snackbar:頁面下方彈跳出來的導引按鈕。

工作區域 14.png

目前工作進度

已完成:部落格頁面的 RWD 設計、FB粉專的 Banner。
未完成:部落格網頁的 Banner 設計。

最初想法:

托特團隊總共有兩位設計師,一位是負責 FB 粉專,另一位則是負責網頁端的設計。而為保持視覺一致性,決定採用 FB 粉專的設計元素來延伸到部落格使用,設計部落格的 banner。

修改過程:

工作區域_1-removebg-preview.png 過程1.jpg

過程2.jpg

過程3.jpg

工作區域 15.png

最終決定:

最終我們決定採取B版本,原因如下-

1.Huaying 在設計這版時,已經同時把他放到頁面上了。除非有重要理由,否則沒必要再增加工程師 (Huaying) 的工作量去做改動。

2.Huaying 問了大概十位朋友,大家覺得這一版用在網頁上比較簡潔。

3.其實部落格的瀏覽量(PV)不高,因此 CTA banner 放在這不會有太大作用。

4.大多數用戶的確是透過行動裝置使用托特(電腦手機瀏覽比大概是2:8),因此放 QRCode 較不方便。

接下來打算做:

大多數用戶都是透過行動裝置使用托特,因此如果想要在網頁版引導下載 App,更有效的作法應該是在首頁放置如 KLOOK 和 Medium 這種類似 Snackbar 的設計,而非在部落格(非用戶主要點擊頁)放置 QRCode banner。

官網首頁引導下載app工作區域 5.jpg

結語:

1.切勿為了視覺設計,而忽略了使用成效。

2.多數用戶使用何種裝置,會影響 CTA Banner 的使用成效。

3.QRCode的設計適用於用電腦瀏覽,再以手機掃的讀者。

4.其他網頁適合的,不代表我們也適合套用。

下次會試著先:

1.優先考慮手機版與App的設計。

2.依照重要性與工作量評估任務優先級,找出投資報酬率高的解法。(這對人力與時間都有限的小團隊來說還蠻重要的)

3.在做設計時,心中要有產品的基本數據、使用者輪廓。

避免一開始就犯了設計師的職業病,馬上埋頭搞視覺弄排版調細節,玩得不亦樂乎,最後就會變得像我們設計師一樣喔 XD 菜雞-removebg-preview.png

謝謝看到這裡的你,如果你剛好有使用托特,覺得哪裡不滿意,或是想要新增功能,都歡迎找我們聊天抱怨! 謝謝大家-removebg-preview.png

工作區域 12.png 托特粉專追蹤起來!告訴你第一手好消息! 想要加入自學技能的行列嗎?點擊連結進入自學的殿堂吧!

作者: 托特thoth

# 平台故事
聯絡我們 support@thoth.tw
托特部落格FacebookInstagram
隱私權政策
© 2021 托特 thoth
隱私權政策
© 2021 托特 thoth