▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們歡迎來(lái)到專(zhuān)業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)阿里巴巴設(shè)計(jì)官方認(rèn)證 MCN 機(jī)構(gòu)SUXA 深圳體驗(yàn)設(shè)計(jì)協(xié)會(huì)華東分會(huì)全球服務(wù)設(shè)計(jì)共創(chuàng)節(jié)城市站發(fā)起者轉(zhuǎn)自：互聯(lián)網(wǎng)設(shè)計(jì)幫共3811 字，預(yù)計(jì)閱讀 10 分鐘
前言
近期小米商城 APP 分類(lèi)頁(yè)做了 UI 升級(jí)，這次分類(lèi)頁(yè)改版，凝聚了我們整個(gè)團(tuán)隊(duì)的力量，做了各種嘗試，死摳細(xì)節(jié)，最終敲定下來(lái)的設(shè)計(jì)，所以這篇文章干貨滿(mǎn)滿(mǎn)，值得讀一讀。
分類(lèi)頁(yè)的作用
分類(lèi)是人類(lèi)常用的一種思維方式和習(xí)慣，目的就是能夠滿(mǎn)足快速定位和查尋，比如家中把內(nèi)衣、襪子、褲子、上衣分類(lèi)放置就非常容易找到。
在產(chǎn)品中分類(lèi)頁(yè)的作用同樣如此，就是幫助用戶(hù)快速找到所需商品。搞清楚了分類(lèi)頁(yè)的作用，我們才能更好的設(shè)計(jì)它，任何頁(yè)面的設(shè)計(jì)亦如此。
案例解析
小米商城分類(lèi)頁(yè)這次改版的主要目的是，要著重突出主營(yíng)商品手機(jī)的視覺(jué)表現(xiàn)，同時(shí)升級(jí)整體 UI 設(shè)計(jì)。
小米手機(jī)分類(lèi)頁(yè)新舊對(duì)比
分類(lèi)頁(yè)是底部導(dǎo)航的一級(jí)頁(yè)面，設(shè)計(jì)理念上一定是根據(jù)商城首頁(yè)的規(guī)范和調(diào)性進(jìn)行設(shè)計(jì)。 （小米商城首頁(yè) UI 前段時(shí)間做了改版）
目前首先設(shè)計(jì)的標(biāo)簽是：簡(jiǎn)潔、輕量化、低飽和、重商品，去色塊。
首頁(yè)的設(shè)計(jì)風(fēng)格，整體是白色背景，瀑布流商品在灰色塊上，沒(méi)有多余的線條做分割，標(biāo)題無(wú)修飾等，這些都將是分類(lèi)頁(yè)設(shè)計(jì)參考方向。
首頁(yè)設(shè)計(jì)風(fēng)格
當(dāng)設(shè)計(jì)風(fēng)格有預(yù)期之后，還要盡可能把市面上主流電商產(chǎn)品的分類(lèi)頁(yè)進(jìn)行研究分析，這是一個(gè)必須有的過(guò)程，能避免你閉門(mén)造車(chē)。
了解自己產(chǎn)品的特點(diǎn)再結(jié)合對(duì)競(jìng)品的研究，兩者碰撞取其優(yōu)，才能設(shè)計(jì)出禁得起考驗(yàn)的設(shè)計(jì)。
競(jìng)品分析
手機(jī)展示為什么要改樣式？
開(kāi)頭我們分析了分類(lèi)頁(yè)的作用是能夠快速定位找到商品，那為什么現(xiàn)在要把手機(jī)的價(jià)格和賣(mài)點(diǎn)標(biāo)簽展示出來(lái)？這似乎違背了分類(lèi)頁(yè)的功能。
手機(jī)新舊樣式對(duì)比
其實(shí)不難理解，因?yàn)槭謾C(jī)是小米商城的主營(yíng)產(chǎn)品，所以視覺(jué)上強(qiáng)化也無(wú)可厚非。這種設(shè)計(jì)形式在自營(yíng)電商類(lèi)平臺(tái)是一項(xiàng)創(chuàng)舉，京東、天貓這種全品類(lèi)平臺(tái)不存在主營(yíng)商品，設(shè)計(jì)上也就不適合存在傾向性。細(xì)節(jié)設(shè)計(jì)案例一：Tab 設(shè)計(jì)這次的分類(lèi)頁(yè)的改版，在頁(yè)面中增加了 Tab 切換，這樣設(shè)計(jì)的好處是，當(dāng)用戶(hù)選中左側(cè)分類(lèi)后，用戶(hù)能看到這個(gè)分類(lèi)下還有那些品類(lèi)。Tab 的設(shè)計(jì)沒(méi)有著重強(qiáng)調(diào)視覺(jué)上的表現(xiàn)，出于兩個(gè)考慮，一是要弱于左側(cè)分類(lèi)樣式，二是不搶商品的視覺(jué)層級(jí)。
新增的 Tab 在設(shè)計(jì)過(guò)程中，做了很多種樣式的嘗試，這其實(shí)也是驗(yàn)證設(shè)計(jì)的一個(gè)好方法，下面具體介紹給大家。當(dāng)你設(shè)計(jì)出一種方式后，感覺(jué)不太對(duì)，那就把所有可以呈現(xiàn)的樣式都設(shè)計(jì)出來(lái)，這樣大概率你會(huì)看出哪個(gè)更合適。同時(shí)也能明白，開(kāi)始的設(shè)計(jì)為什么感覺(jué)不對(duì)，進(jìn)而驗(yàn)證了設(shè)計(jì)，當(dāng)然也完全可以開(kāi)始就把各種樣式都設(shè)計(jì)出來(lái)進(jìn)行比較分析。上圖第一種樣式最不合適，原因很簡(jiǎn)單，與左側(cè)分類(lèi)選中樣式相沖，導(dǎo)致頁(yè)面視覺(jué)層級(jí)混亂。第二種樣式，雖然視覺(jué)層級(jí)明顯，但是線段的樣式，還是與左側(cè)的選中的線段有橫七豎八的感覺(jué)，頁(yè)面略顯雜亂。第三種樣式，看起來(lái)很合適，但其實(shí)在這個(gè)頁(yè)面中視覺(jué)過(guò)重，因?yàn)轫?yè)面中還會(huì)出現(xiàn)當(dāng)前選中 Tab 的大字號(hào)標(biāo)題，這就導(dǎo)致兩者都突出，失去主次。第四種樣式，使用了灰背景黑文字，設(shè)計(jì)簡(jiǎn)潔視覺(jué)表現(xiàn)力沒(méi)有那么強(qiáng)，符合在此頁(yè)面中的定位，所以看起來(lái)更加舒適。細(xì)節(jié)設(shè)計(jì)案例二：左側(cè) Tab 設(shè)計(jì)左側(cè) Tab 的設(shè)計(jì)與舊版相比，去掉了分類(lèi)與商品展示之間的分割線，這樣所有分類(lèi)項(xiàng)文字即可左對(duì)齊排列。
事實(shí)上沒(méi)有分割線必須文字左對(duì)齊，這樣視覺(jué)呈現(xiàn)才會(huì)工整。再者就是左側(cè) Tab 選中樣式的設(shè)計(jì)，也是經(jīng)過(guò)了多種嘗試才最終定下來(lái)的方案，舊版是選中變?yōu)槠放粕催x中項(xiàng)是較黑的顏色，從視覺(jué)層級(jí)來(lái)說(shuō)沒(méi)有問(wèn)題。新版比舊版整體降低了一個(gè)視覺(jué)層級(jí)，目的是希望讓用戶(hù)的視覺(jué)更聚焦內(nèi)容，選中樣式為品牌色線段，文字黑色 （#333333） 并加粗，未選中項(xiàng)是 （#666666） 灰色。左側(cè) Tab 選中樣式，視覺(jué)表現(xiàn)解析上圖第一種和第二種方式，當(dāng)然并不是在任何場(chǎng)景下都不推薦使用，只是在這個(gè)頁(yè)面有更好的選擇。細(xì)節(jié)設(shè)計(jì)案例三：頁(yè)面元素間距設(shè)計(jì)元素的間距玩的好，那 UI 設(shè)計(jì)就成功了一半。下圖中，紅色的間距是 48px ，藍(lán)色是 24px （三倍圖設(shè)計(jì)稿） ，這兩個(gè)間距是以 6 的倍數(shù)定義，同時(shí)也是兩倍關(guān)系，即五分原則。在一個(gè)頁(yè)面中，保持元素之間間距的規(guī)律性非常重要，我了解到很多設(shè)計(jì)師包括我自己，在手機(jī)端的 UI 設(shè)計(jì)，都習(xí)慣以 6px 為倍數(shù)去設(shè)定間距，原因就是 6 更容易與元素形成黃金比例。文字間距設(shè)定的知識(shí)點(diǎn)一般文字大小和本身的大小會(huì)有一定的間隙，它就像一個(gè)透明的 PNG 圖，有一些空隙，那文字和元素的間距應(yīng)不應(yīng)該包括文字的空隙呢？
據(jù)我了解很多設(shè)計(jì)師習(xí)慣用文字默認(rèn)的正常邊界，設(shè)定與元素之間的間距，也有很多設(shè)計(jì)師用文字本身邊界的大小去設(shè)定間距，如下圖所示。我個(gè)人使用并推薦第一種正常邊界計(jì)算，原因這樣設(shè)計(jì)上更快捷統(tǒng)一，開(kāi)發(fā)也能有效正確的按設(shè)計(jì)給的間距編碼。雖然視覺(jué)上的實(shí)際高度會(huì)有一些差異，但都差也就不叫差了，況且文字的間隙并不會(huì)很大。第二種方式用文字本身的實(shí)際邊界去設(shè)定間距，這樣確實(shí)很?chē)?yán)謹(jǐn)，但在設(shè)計(jì)的過(guò)程當(dāng)中費(fèi)時(shí)費(fèi)力。經(jīng)常出現(xiàn)多一個(gè)像素少一個(gè)像素的問(wèn)題，開(kāi)發(fā)測(cè)量出來(lái)的間距也會(huì)沒(méi)有規(guī)律，什么數(shù)值都有會(huì)一頭霧水。
第二種方式，如果是平面類(lèi)設(shè)計(jì)非常合適，按文字本身邊界嚴(yán)謹(jǐn)?shù)挠?jì)算間距，簡(jiǎn)直完美。細(xì)節(jié)設(shè)計(jì)案例四：設(shè)計(jì)的延續(xù)性UI 設(shè)計(jì)特別講究設(shè)計(jì)語(yǔ)言一致性，保持一致性是產(chǎn)品傳遞給用戶(hù)最好的認(rèn)知方式。
下圖中的操作邏輯是，選中左側(cè)的智能安防，點(diǎn)擊智能門(mén)鎖到二級(jí)頁(yè)面展示出所有的智能門(mén)鎖。二級(jí)頁(yè)延續(xù)設(shè)計(jì)樣式圖中二級(jí)頁(yè)面的 Tab 依舊延續(xù)一級(jí)頁(yè)的設(shè)計(jì)樣式，目的就是給用戶(hù)快速傳遞它的功能性。上圖為什么價(jià)格顏色沒(méi)有保持一致性？原因是不同顏色在對(duì)應(yīng)的頁(yè)面，能更好的貼近用戶(hù)心智，一級(jí)頁(yè)價(jià)格顏色為黑色，是因?yàn)殚偕珒r(jià)格會(huì)影響到分類(lèi)頁(yè)的功能性。分類(lèi)頁(yè)本質(zhì)上還是一個(gè)快速找商品的入口頁(yè)面，并非是商品列表頁(yè)。
二級(jí)頁(yè)設(shè)計(jì)成突出的橘色，是因?yàn)橛脩?hù)的操作路徑已經(jīng)從關(guān)注商品到了關(guān)注商品屬性，其中價(jià)格最為關(guān)注。所以突出價(jià)格這符合用戶(hù)的心智，這樣最終提高的是產(chǎn)品導(dǎo)購(gòu)效率。敲黑板！一個(gè)值得探討的交互設(shè)計(jì)！這是一個(gè)非常值得探討的交互設(shè)計(jì)案例，我們的高級(jí)交互設(shè)計(jì)師都被深陷其中，相信看完這個(gè)案例，你會(huì)大有收獲。下圖中是二級(jí)頁(yè)面，交互方式一個(gè)是上下滑動(dòng)切換品類(lèi)，另一個(gè)是左右滑動(dòng)切換品類(lèi)，你覺(jué)得哪一種更合適呢？舊版的交互設(shè)計(jì)是左右滑動(dòng)，這次改版產(chǎn)品經(jīng)理和交互設(shè)計(jì)師探討后認(rèn)為上下滑動(dòng)更符合用戶(hù)當(dāng)下使用場(chǎng)景。原因如下，小米商城品類(lèi)下的 sku 并不多，比如上圖，點(diǎn)擊智能門(mén)鎖下面只有三個(gè) sku （一個(gè) sku 是一個(gè)商品）。很多品類(lèi)下面其實(shí)只有一個(gè) sku ，用戶(hù)常常在此頁(yè)面只看到一個(gè)商品，然后頁(yè)面下面就出現(xiàn)猜你喜歡。所以，他們認(rèn)為頁(yè)面的利用率不夠高，應(yīng)該多曝光同類(lèi)型產(chǎn)品。比如點(diǎn)擊智能門(mén)鎖，下面緊接就是相關(guān)的智能貓眼品類(lèi)，這樣就能增加更多產(chǎn)品的曝光，從而提高轉(zhuǎn)化。一般人聽(tīng)到這一波有理有據(jù)的分析，大概都會(huì)認(rèn)同，其實(shí)非也，大大的非也！
首先回到分類(lèi)頁(yè)的功能上，分類(lèi)頁(yè)是幫助用戶(hù)快速找到所需商品，所以當(dāng)用戶(hù)點(diǎn)擊智能門(mén)鎖，用戶(hù)只是對(duì)智能門(mén)鎖有興趣。
所以只展示智能門(mén)鎖商品，符合用戶(hù)的心里預(yù)期，其次是頁(yè)面中無(wú)論 sku 多還是少，用戶(hù)的視覺(jué)都是聚焦在他感興趣的商品上。視覺(jué)突出的 Tab 設(shè)計(jì)倘若用戶(hù)對(duì)其他品類(lèi)有興趣，Tab 突出的圖文設(shè)計(jì)形式，也完全可以滿(mǎn)足用戶(hù)側(cè)滑、點(diǎn)擊快速的切換品類(lèi)。
設(shè)計(jì)雖說(shuō)沒(méi)有對(duì)錯(cuò)，但一定有更恰當(dāng)?shù)脑O(shè)計(jì)，做設(shè)計(jì)遇到問(wèn)題時(shí)，應(yīng)該多多與相關(guān)人員探討，了解他們看問(wèn)題的角度，如何理解用戶(hù)和功能，這樣能大大避免我們看問(wèn)題的不全面性。本次小米商城分類(lèi)頁(yè)的設(shè)計(jì)，凝聚了我們整個(gè)團(tuán)隊(duì)的力量，每個(gè)設(shè)計(jì)點(diǎn)都經(jīng)過(guò)了大家縝密思考和驗(yàn)證所得出，干活很多，特別希望能給你帶來(lái)一些收獲。最后感謝團(tuán)隊(duì)的小伙伴們！
歡迎大家關(guān)注三分設(shè)，每天分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。
