編輯導語：你是否常常會覺得設計的網頁太過復雜不夠簡潔？如何才能變得簡單呢？本篇文章中，作者根據自身案例，解決了功能模塊冗雜、用戶體驗不佳、視覺設計陳舊等問題，推薦想要學習網站設計的群體閱讀。

從業多年，不難發現一個令人絕望的事實，當數據成為衡量績效的絕對指標，一個產品好像注定會走臃腫和無序?！獔绦姓邆儞]舞著OKR的寶劍，在僅有的區域內寸土必爭。

你拿了一個入口，他就要放大按鈕，流量不夠數量來湊，實在不行動效也行。

執行者拿到結果，滿意離場，但問題卻一直留了下來。

酷家樂主站正是如此。前后十年，我們從“設計工具的引流平臺”逐漸泛化，首頁交雜著各種功能模塊，用戶找尋內容的路徑被迫拉長。而與此同時，公司不斷開疆拓土，首頁的內容框架也很難支撐起酷家樂“從家裝到全空間”的戰略訴求。

所以這一次，我們沉腕撥鐙、量體裁衣，終于迎來了全新的主站3.0。

從定義問題出發，我們先行一步，去進行了數據分析和體驗走查，發現所有的問題可以化約到3個方向：功能模塊冗雜、用戶體驗不佳、視覺設計陳舊?；谝陨?，我們確定了我們的設計策略，即：內容去腫、體驗導向、視覺升級：

于是我們的設計關鍵詞也就昭然若揭：

一、輕盈：從臃腫回歸有序

做產品很容易中投射效應的圈套，覺得產品邏輯可以等同于用戶理解。我們做生態、做閉環，把產品價值梳理得井井有條，并逐一加諸用戶，但用戶只在乎自己看到的是什么、這是不是他想要的，對你的產品價值根本不買賬。

愿景美好，現實慘淡。我們從用戶行為熱力圖中可以發現，主站首頁的滾屏衰減非常嚴重，除去工具入口“開始設計”外，只有“優秀設計”有一定量的點擊，而其余如“社區、變現、品牌館”等內容鮮少有人問津。

那么，怎么讓日益臃腫的產品形態回歸輕盈，是這次改版的重點。我們為此進行了如下升級：

1. 模塊精簡

在前期調研中，我們收到了很多用戶吐槽，通過整理分析，我們發現主站首頁的問題可以歸結為三個點：“卡片樣式太多”、“內容更新遲滯”、“質量良莠不齊”。所以在這次改版中，我們把低訪問、不維護的模塊全部舍去，只在首頁留下了“設計模板”和“優秀設計”。

同時我們也聯同運營去優化了內容分發機制，并在算法推薦后設置了人為關卡，通過審核標準的建立，去保證首頁UGC內容的質量。

2. 導航瘦身

雙導航被詬病已久，“層級難處理”、“入口太混亂”，幾乎每個設計師們都在子頻道設計時罵過娘。這一次我們雙管齊下，不僅合并了雙層導航，同時也對此前積微成著的入口進行了歸納和統一，在符合目標的同時，讓一切井然有序。

二、體貼：把用戶當成主角

十年，對一個產品來說已然很長。我們走了太遠，回過頭想想，我們真的做到“用戶至上”了嗎？

所以在這次改版中，用戶是我們當仁不讓的主角，大框架下的每個改動都為了更貼近用戶。

1. 你想要的，給你更多

酷家樂的核心依舊是“快速出圖的云設計工具”，我們從數據發現，68%的用戶在進入酷家樂主站后的行為就是去工具，而“設計模板”就是我們為此新增的模塊。

用戶可以直接選擇模板，一鍵生成方案。同時我們通過場景的細分去呼應更大的人群，這也收到了大量的用戶好評。

2. 瀑布流，看得更自在

用戶的主要動線是“找參考→做方案”，而找參考的逛街感，和瀑布流非常契合。所以我們將“優秀設計”瀑布化，這讓用戶可以擁有更流暢的瀏覽體驗。我們也去解決了標簽多而雜的問題。通過代碼取色、色值校準，我們使標簽和內容協調統一，真正用圖說話。

3. 每一塊屏，我們都不放棄

基于后臺統計，我們發現用戶的屏寬在1280px-2560px之間不等，尺寸相當懸殊。如果采用APP式的一套通吃，無法讓所有用戶擁有優質的體驗?！赃@次我們不僅要保持大屏完美，也要讓小屏滿意。

我們分析了多種布局解法，最后制定了一套適合主站內容的卡片化響應方案。

我們把元素拆分成兩類：一是字號和間距，我們設置了屏幕斷點，在不同斷點使用不同的動態數值；二是內容卡片，我們設置了基準卡片大小，通過公式去計算出動態像素里單個卡片的數量和大小。

同時，內容的露出率也非常重要，通過問題走查，我們配置了一套動態適配規則，以保證所有用戶能擁有完整、舒適的瀏覽體驗。

三、未知X：來點視覺催化劑

不同的視覺意向會與產品發生奇妙無窮的化學反應，未知的X將滲透到感知和功能的方方面面。這個X應該是什么呢？形而上的設計推導并沒有給我們答案。最終我們決定回歸本源，落歸到“家裝→全空間”的實處進行腦暴，并聚焦在了三個關鍵詞上：

但是“溫度”不免局限于家居，“科技”酷炫但太冰冷，“光影”對于空間的表達、美好的折射，成為了團隊內外的一致選擇：

1. 視覺語言

改頭換面不是每次改版的必須，設計師不以大刀闊斧來證明自己的存在感，更重要的是能去找到用戶感知和實現成本的平衡點。

基于“合適”的原則，我們從色彩、質感、圖標這三個方面進行提煉，去定義了酷家樂主站新的視覺語言。

色彩：原有的品牌藍并無過錯，我們沿用并對之進行了流體演繹。同時我們規范了功能色的使用，避免重蹈“亂”的覆轍。

質感：新擬態很火，也和我們很合。通過對設計系統中border-radius、box-shadow等視覺token的定義，我們實現了一套輕量且富有層次的組件主題。

圖標：玻璃和幾何的搭配極具現代感，全新的圖標設計也為主站帶來了自然而靈動的生命力。

2. 標志升級

從2016到2021，市面上的設計風格經歷了多輪更迭，而我們的LOGO始終未變。當3D大行其道，原先扁平的圖形已很難滿足一些場景的表達訴求。

同時隨著公司業務的發展，也有了“建筑”、“公裝”、“建?！钡榷囝愖悠放频臉酥拘枨?。所以我們也去進行了標志的整體化升級，使之擁有了更廣泛的可能性。

3. 界面表達

設計語言也不單是局部元素的呈現，更需要落到場景中去實際應用。貫穿始終的設計表達才能讓用戶有通感的體驗。

來看看我們如何讓用戶感受到這道“光”：

四、總結

一些看似簡單的改動背后，也往往沉淀了設計師的諸多考量和心血。說實話，突出的視覺表現是一件太容易的事，難的是如何放下華而不實的那部分，讓設計細節為產品帶來真正的提升。

我們為什么要做？我們怎么做？這么做真的有價值嗎？還有沒有更優解法？……多問問自己總是沒錯，這讓我們可以更加優雅地去面對設計生涯中的一道道難題。

作者：不戳；公眾號：酷家樂用戶體驗設計

本文由 @酷家樂用戶體驗設計 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議