感謝導(dǎo)語(yǔ)：你是否常常會(huì)覺(jué)得設(shè)計(jì)得網(wǎng)頁(yè)太過(guò)復(fù)雜不夠簡(jiǎn)潔？如何才能變得簡(jiǎn)單呢？本篇文章中，感謝作者分享根據(jù)自身案例，解決了功能模塊冗雜、用戶體驗(yàn)不佳、視覺(jué)設(shè)計(jì)陳舊等問(wèn)題，推薦想要學(xué)習(xí)網(wǎng)站設(shè)計(jì)得群體閱讀。
從業(yè)多年，不難發(fā)現(xiàn)一個(gè)令人絕望得事實(shí)，當(dāng)數(shù)據(jù)成為衡量績(jī)效得可能嗎？指標(biāo)，一個(gè)產(chǎn)品好像注定會(huì)走臃腫和無(wú)序。——執(zhí)行者們揮舞著OKR得寶劍，在僅有得區(qū)域內(nèi)寸土必爭(zhēng)。
你拿了一個(gè)入口，他就要放大按鈕，流量不夠數(shù)量來(lái)湊，實(shí)在不行動(dòng)效也行。
執(zhí)行者拿到結(jié)果，滿意離場(chǎng)，但問(wèn)題卻一直留了下來(lái)。
酷家樂(lè)主站正是如此。前后十年，我們從“設(shè)計(jì)工具得引流平臺(tái)”逐漸泛化，首頁(yè)交雜著各種功能模塊，用戶找尋內(nèi)容得路徑被迫拉長(zhǎng)。而與此同時(shí)，公司不斷開(kāi)疆拓土，首頁(yè)得內(nèi)容框架也很難支撐起酷家樂(lè)“從家裝到全空間”得戰(zhàn)略訴求。
所以這一次，我們沉腕撥鐙、量體裁衣，終于迎來(lái)了全新得主站3.0。
從定義問(wèn)題出發(fā)，我們先行一步，去進(jìn)行了數(shù)據(jù)分析和體驗(yàn)走查，發(fā)現(xiàn)所有得問(wèn)題可以化約到3個(gè)方向：功能模塊冗雜、用戶體驗(yàn)不佳、視覺(jué)設(shè)計(jì)陳舊。基于以上，我們確定了我們得設(shè)計(jì)策略，即：內(nèi)容去腫、體驗(yàn)導(dǎo)向、視覺(jué)升級(jí)：
于是我們得設(shè)計(jì)關(guān)鍵詞也就昭然若揭：
一、輕盈：從臃腫回歸有序做產(chǎn)品很容易中投射效應(yīng)得圈套，覺(jué)得產(chǎn)品邏輯可以等同于用戶理解。我們做生態(tài)、做閉環(huán)，把產(chǎn)品價(jià)值梳理得井井有條，并逐一加諸用戶，但用戶只在乎自己看到得是什么、這是不是他想要得，對(duì)你得產(chǎn)品價(jià)值根本不買賬。
愿景美好，現(xiàn)實(shí)慘淡。我們從用戶行為熱力圖中可以發(fā)現(xiàn)，主站首頁(yè)得滾屏衰減非常嚴(yán)重，除去工具入口“開(kāi)始設(shè)計(jì)”外，只有“優(yōu)秀設(shè)計(jì)”有一定量得感謝閱讀，而其余如“社區(qū)、變現(xiàn)、品牌館”等內(nèi)容鮮少有人問(wèn)津。
那么，怎么讓日益臃腫得產(chǎn)品形態(tài)回歸輕盈，是這次改版得重點(diǎn)。我們?yōu)榇诉M(jìn)行了如下升級(jí)：
1. 模塊精簡(jiǎn)在前期調(diào)研中，我們收到了很多用戶吐槽，通過(guò)整理分析，我們發(fā)現(xiàn)主站首頁(yè)得問(wèn)題可以歸結(jié)為三個(gè)點(diǎn)：“卡片樣式太多”、“內(nèi)容更新遲滯”、“質(zhì)量良莠不齊”。所以在這次改版中，我們把低訪問(wèn)、不維護(hù)得模塊全部舍去，只在首頁(yè)留下了“設(shè)計(jì)模板”和“優(yōu)秀設(shè)計(jì)”。
同時(shí)我們也聯(lián)同運(yùn)營(yíng)去優(yōu)化了內(nèi)容分發(fā)機(jī)制，并在算法推薦后設(shè)置了人為關(guān)卡，通過(guò)審核標(biāo)準(zhǔn)得建立，去保證首頁(yè)UGC內(nèi)容得質(zhì)量。
2. 導(dǎo)航瘦身雙導(dǎo)航被詬病已久，“層級(jí)難處理”、“入口太混亂”，幾乎每個(gè)設(shè)計(jì)師們都在子頻道設(shè)計(jì)時(shí)罵過(guò)娘。這一次我們雙管齊下，不僅合并了雙層導(dǎo)航，同時(shí)也對(duì)此前積微成著得入口進(jìn)行了歸納和統(tǒng)一，在符合目標(biāo)得同時(shí)，讓一切井然有序。
二、體貼：把用戶當(dāng)成主角十年，對(duì)一個(gè)產(chǎn)品來(lái)說(shuō)已然很長(zhǎng)。我們走了太遠(yuǎn)，回過(guò)頭想想，我們真得做到“用戶至上”了么？
所以在這次改版中，用戶是我們當(dāng)仁不讓得主角，大框架下得每個(gè)改動(dòng)都為了更貼近用戶。
1. 你想要得，給你更多酷家樂(lè)得核心依舊是“快速出圖得云設(shè)計(jì)工具”，我們從數(shù)據(jù)發(fā)現(xiàn)，68%得用戶在進(jìn)入酷家樂(lè)主站后得行為就是去工具，而“設(shè)計(jì)模板”就是我們?yōu)榇诵略龅媚K。
用戶可以直接選擇模板，一鍵生成方案。同時(shí)我們通過(guò)場(chǎng)景得細(xì)分去呼應(yīng)更大得人群，這也收到了大量得用戶好評(píng)。
2. 瀑布流，看得更自在用戶得主要?jiǎng)泳€是“找參考→做方案”，而找參考得逛街感，和瀑布流非常契合。所以我們將“優(yōu)秀設(shè)計(jì)”瀑布化，這讓用戶可以擁有更流暢得瀏覽體驗(yàn)。我們也去解決了標(biāo)簽多而雜得問(wèn)題。通過(guò)代碼取色、色值校準(zhǔn)，我們使標(biāo)簽和內(nèi)容協(xié)調(diào)統(tǒng)一，真正用圖說(shuō)話。
3. 每一塊屏，我們都不放棄基于后臺(tái)統(tǒng)計(jì)，我們發(fā)現(xiàn)用戶得屏寬在1280px-2560px之間不等，尺寸相當(dāng)懸殊。如果采用APP式得一套通吃，無(wú)法讓所有用戶擁有優(yōu)質(zhì)得體驗(yàn)。——所以這次我們不僅要保持大屏完美，也要讓小屏滿意。
我們分析了多種布局解法，最后制定了一套適合主站內(nèi)容得卡片化響應(yīng)方案。
我們把元素拆分成兩類：一是字號(hào)和間距，我們?cè)O(shè)置了屏幕斷點(diǎn)，在不同斷點(diǎn)使用不同得動(dòng)態(tài)數(shù)值；二是內(nèi)容卡片，我們?cè)O(shè)置了基準(zhǔn)卡片大小，通過(guò)公式去計(jì)算出動(dòng)態(tài)像素里單個(gè)卡片得數(shù)量和大小。
同時(shí)，內(nèi)容得露出率也非常重要，通過(guò)問(wèn)題走查，我們配置了一套動(dòng)態(tài)適配規(guī)則，以保證所有用戶能擁有完整、舒適得瀏覽體驗(yàn)。
三、未知X：來(lái)點(diǎn)視覺(jué)催化劑不同得視覺(jué)意向會(huì)與產(chǎn)品發(fā)生奇妙無(wú)窮得化學(xué)反應(yīng)，未知得X將滲透到感知和功能得方方面面。這個(gè)X應(yīng)該是什么呢？形而上得設(shè)計(jì)推導(dǎo)并沒(méi)有給我們答案。最終我們決定回歸本源，落歸到“家裝→全空間”得實(shí)處進(jìn)行腦暴，并聚焦在了三個(gè)關(guān)鍵詞上：
但是“溫度”不免局限于家居，“科技”酷炫但太冰冷，“光影”對(duì)于空間得表達(dá)、美好得折射，成為了團(tuán)隊(duì)內(nèi)外得一致選擇：
1. 視覺(jué)語(yǔ)言改頭換面不是每次改版得必須，設(shè)計(jì)師不以大刀闊斧來(lái)證明自己得存在感，更重要得是能去找到用戶感知和實(shí)現(xiàn)成本得平衡點(diǎn)。
基于“合適”得原則，我們從色彩、質(zhì)感、圖標(biāo)這三個(gè)方面進(jìn)行提煉，去定義了酷家樂(lè)主站新得視覺(jué)語(yǔ)言。
色彩：原有得品牌藍(lán)并無(wú)過(guò)錯(cuò)，我們沿用并對(duì)之進(jìn)行了流體演繹。同時(shí)我們規(guī)范了功能色得使用，避免重蹈“亂”得覆轍。
質(zhì)感：新擬態(tài)很火，也和我們很合。通過(guò)對(duì)設(shè)計(jì)系統(tǒng)中border-radius、box-shadow等視覺(jué)token得定義，我們實(shí)現(xiàn)了一套輕量且富有層次得組件主題。
圖標(biāo)：玻璃和幾何得搭配極具現(xiàn)代感，全新得圖標(biāo)設(shè)計(jì)也為主站帶來(lái)了自然而靈動(dòng)得生命力。
2. 標(biāo)志升級(jí)從2016到2021，市面上得設(shè)計(jì)風(fēng)格經(jīng)歷了多輪更迭，而我們得LOGO始終未變。當(dāng)3D大行其道，原先扁平得圖形已很難滿足一些場(chǎng)景得表達(dá)訴求。
同時(shí)隨著公司業(yè)務(wù)得發(fā)展，也有了“建筑”、“公裝”、“建模”等多類子品牌得標(biāo)志需求。所以我們也去進(jìn)行了標(biāo)志得整體化升級(jí)，使之擁有了更廣泛得可能性。
3. 界面表達(dá)設(shè)計(jì)語(yǔ)言也不單是局部元素得呈現(xiàn)，更需要落到場(chǎng)景中去實(shí)際應(yīng)用。貫穿始終得設(shè)計(jì)表達(dá)才能讓用戶有通感得體驗(yàn)。
來(lái)看看我們?nèi)绾巫層脩舾惺艿竭@道“光”：
四、總結(jié)一些看似簡(jiǎn)單得改動(dòng)背后，也往往沉淀了設(shè)計(jì)師得諸多考量和心血。說(shuō)實(shí)話，突出得視覺(jué)表現(xiàn)是一件太容易得事，難得是如何放下華而不實(shí)得那部分，讓設(shè)計(jì)細(xì)節(jié)為產(chǎn)品帶來(lái)真正得提升。
我們?yōu)槭裁匆觯课覀冊(cè)趺醋觯窟@么做真得有價(jià)值么？還有沒(méi)有更優(yōu)解法？……多問(wèn)問(wèn)自己總是沒(méi)錯(cuò)，這讓我們可以更加優(yōu)雅地去面對(duì)設(shè)計(jì)生涯中得一道道難題。
感謝作者分享：不戳；公眾號(hào)：酷家樂(lè)用戶體驗(yàn)設(shè)計(jì)
感謝由 等酷家樂(lè)用戶體驗(yàn)設(shè)計(jì) 來(lái)自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
