1111首頁—多輪重新設計

在諸多限制條件下重新設計首頁,經過大量版本比較與迭代,致力縮小開發與UI原型之間的差距。鍛鍊強大韌性、耐心與極度細節的把關能力。後續繼續更新關於頁與隱私權頁 (該版本首頁適用於2023~2024)

Year

2023

Duration

5 weeks

Client

1111 JobBank

Role & Responsibility

UX/UI Design|跨部門協調|用於演示和品質控制的高保真原型|與經理深入討論並報告

Category

Redesign, UI, MainPage

Summary

高限制下重新設計求職網站首頁,當圖片資訊高度動態且無法掌握時,介面框架應盡可能簡潔明瞭。若能打開更多與利害關係人的調整空間,將有更底層的可能性

Background

因相容性等問題,外包的網站改版未能上線,管理與業務層多次提議調整首頁。

Challenge

首頁主要由廣告組成,幾乎所有模組都已定型,顯示的資訊也受到限制。
UI 只能基於高階主管討論出的 wireframe 來進行。

由於大多數圖片都是外部廣告,視覺風格和一致性無法控制,訊息區塊的順序也無法更改,該如何設定視覺標準呢?

Goal

目標要求:“用戶第一眼就能看到的資訊越多越好。”

Solution

設計關鍵:可預見眾多公司及其廣告圖片,會讓頁面過於“多樣化、多彩”,因此 UI 框架必須盡可能簡潔明瞭

著重於組件的大小設定及其位置之間的關係,以控制視覺重量,並巧妙地設計使用者介面,以呈現清晰的層次結構和閱讀引導。

關鍵概念:利用留白和換行來減輕每張圖片的視覺重量。

如圖片的視覺效果難以控制,用留白將其包起來,可降低其視覺比例和分量。
當圖片數量較多時,此方法可以有效減少視覺視覺,更乾淨簡潔。

Takeaway

更注重在高度限制下激發設計的純粹性。

儘管設計是在極其有限的條件下進行的,但設計團隊還是全力以赴地專注於設定和雕刻使用者介面細節。

在溝通管道有限的情況下,盡可能促進全面發展。

在時間緊迫的情況下,前端開發完成後,我們進行了多次品質控制,標記了近 96 個需要修改的地方,以互相促進,力求做到盡善盡美。

明確易讀的設計交付註解

為了降低開發成果與設計稿的差距,詳細又易讀的Handoff非常重要,不可忽略


首頁中段|職缺類型切換區塊,經過10版以上的調整

首頁廣告|六種以上的廣告版位需求,以多樣化但視覺一致的排板呈現,避免視覺疲勞

完整首頁畫面

廣告版位卡片,避免因廣告圖繁雜引發視覺疲勞,加上Margin白邊與圓角包住圖片,以降低重量與視覺刺激

同上,廣告行職缺卡片運用同方法使畫面更一致整潔不刺眼

身份類別接換TabBar 多版提案,討論後以乾淨、色彩重量較低為方向重新設計

職缺卡片多版提案|精細調整排版、字體大小粗細、間距、群組與邊界,設定清晰的資訊層級

多次比稿與調整,盡可能提案不同的排版與理念

藉首頁重新設計的機會,也同步重新設定完整設計系統,自上而下開始建立(colours and Typography)

完整詳盡的首頁元件設定,最小化開發的困難與實際UI落差

出版開發完成後的詳細測試Review,團隊一起標注需要修改處,0.5天即進入第二版修改

關於頁設計|盡可能以乾淨且統一新的色彩語言呈現畫面

關於頁中段|積極與PM討論如何盡可能減少文字內容,並與畫面搭配,以提升閱讀意願

隱私權等頁面|內容重新排版,使用新的Typography系統排版內容,並細緻地調整排版細節,學習扎實的純文字排版技能

首頁中段|職缺類型切換區塊,經過10版以上的調整

首頁廣告|六種以上的廣告版位需求,以多樣化但視覺一致的排板呈現,避免視覺疲勞

完整首頁畫面

廣告版位卡片,避免因廣告圖繁雜引發視覺疲勞,加上Margin白邊與圓角包住圖片,以降低重量與視覺刺激

同上,廣告行職缺卡片運用同方法使畫面更一致整潔不刺眼

身份類別接換TabBar 多版提案,討論後以乾淨、色彩重量較低為方向重新設計

職缺卡片多版提案|精細調整排版、字體大小粗細、間距、群組與邊界,設定清晰的資訊層級

多次比稿與調整,盡可能提案不同的排版與理念

藉首頁重新設計的機會,也同步重新設定完整設計系統,自上而下開始建立(colours and Typography)

完整詳盡的首頁元件設定,最小化開發的困難與實際UI落差

出版開發完成後的詳細測試Review,團隊一起標注需要修改處,0.5天即進入第二版修改

關於頁設計|盡可能以乾淨且統一新的色彩語言呈現畫面

關於頁中段|積極與PM討論如何盡可能減少文字內容,並與畫面搭配,以提升閱讀意願

隱私權等頁面|內容重新排版,使用新的Typography系統排版內容,並細緻地調整排版細節,學習扎實的純文字排版技能