實戰(zhàn)技巧｜京東自動頁面搭建｜樂高 V2.0 改版復(fù)盤
▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長
阿里巴巴設(shè)計官方認(rèn)證 MCN 機(jī)構(gòu)
SUXA 深圳體驗設(shè)計協(xié)會華東分會
全球服務(wù)設(shè)計共創(chuàng)節(jié)城市站發(fā)起者
·
轉(zhuǎn)自：京東設(shè)計中心 JDC
編輯：李凱悅
共 3417 字，預(yù)計閱讀 9 分鐘
樂高致力于打造一套多終端，多場景，多技術(shù)棧的企業(yè)級 UI 組件庫。2020 年，樂高 V2.0 版本針對 PC 組件迎來了全面升級。
背景
樂高 V1.0 產(chǎn)品希望建立起一個中后臺設(shè)計平臺，解放互聯(lián)網(wǎng)人雙手，不再做 0-1 的重復(fù)工作。覆蓋人群包括產(chǎn)品設(shè)計師，UI/UE 設(shè)計師，前端工程師。1.0 版本雖然能滿足部分業(yè)務(wù)中的設(shè)計和開發(fā)需求，但是上手始終很費力，整體流程體驗只做到能用，但是不夠好用。2.0 版本在設(shè)計和開發(fā)上都希望對樂高進(jìn)行一次換血，真正達(dá)到好用的程度。
如何改造
結(jié)構(gòu)層
用戶分類
1.0 版本希望能夠兼顧產(chǎn)品、設(shè)計、開發(fā) 3 類用戶，從全流程多個節(jié)點提升效率。從頁面布局也能看出來，1.0 版本做了大量對交互設(shè)計說明，并分布在每個組件實例的下面。但根據(jù)競品調(diào)研結(jié)果顯示，此類產(chǎn)品的最大用戶群體是開發(fā)人員，而且從樂高實際能夠提供的能力來看，對三類用戶差異也極大，最核心的功能也是針對開發(fā)的。所以 2.0 的目標(biāo)用戶進(jìn)行了調(diào)整：前端開發(fā)>設(shè)計師>產(chǎn)品經(jīng)理。
用戶行為
對競品調(diào)研發(fā)現(xiàn)，此類網(wǎng)站的體驗同質(zhì)程度化非常高，頁面核心內(nèi)容只包含實例和代碼兩部分。用戶行為基本在重復(fù)查找的流程，直到找到或者找不到為止。以核心用戶開發(fā)人員為示例：
而穿插在實例中間的大篇幅交互設(shè)計說明其實在干擾開發(fā)用戶尋找信息，同樣的問題也存在于設(shè)計用戶的使用中。為了提高用戶的瀏覽效率，頁面信息需要進(jìn)行拆分重組，應(yīng)該盡可能提高對應(yīng)用戶頁面的信息密度。
網(wǎng)站重構(gòu)
針對上述用戶定位和用戶表現(xiàn)，本次對網(wǎng)站結(jié)構(gòu)進(jìn)行了拆解重構(gòu)
1.增加組件搜索、組件總覽頁面，提高檢索效率。
2.組件詳情頁面刪除交互設(shè)計說明，排除設(shè)計說明對開發(fā)用戶的干擾，提高組件實例展示密度。
3.將剝離出的交互設(shè)計說明重新整合，按照組件應(yīng)用的關(guān)聯(lián)度分類排序，形成系統(tǒng)性的設(shè)計指導(dǎo)文檔。對于新手或者接觸 B 端中后臺設(shè)計不久的設(shè)計師非常友好，這也是樂高的一大產(chǎn)品優(yōu)勢。
表現(xiàn)層
網(wǎng)站設(shè)計
首頁風(fēng)格 V2.0 首頁整體風(fēng)格偏向輕簡，舍棄了 1.0 厚重的 3D 風(fēng)格，整體采用扁平風(fēng)格，色調(diào)也改為亮色系，并且去掉了滾屏的設(shè)計，減弱了平臺介紹，把更多的權(quán)重讓給開始使用按鈕和導(dǎo)航功能，希望用戶盡快體驗產(chǎn)品。
頂部全局導(dǎo)航
頂部導(dǎo)航增加了全局搜索，并且始終吸頂，便于快速搜索組件。另外增加了分類菜單，通過內(nèi)容拆分，引導(dǎo)不同用戶去向不同頁面。
左側(cè)導(dǎo)航菜單
針對左側(cè)導(dǎo)航菜單做了以下修改
1.整體弱化了一二級分類的感知，將原來可以折疊的一級分類全部平鋪開，去掉縮進(jìn)，并且壓縮每條菜單的高度，提高信息密度。弱化一級分類的樣式，起到輔助分割作用。
2.組件名稱進(jìn)行調(diào)整，將英文名前置。組件中文名受到習(xí)慣影響較大，缺少規(guī)范統(tǒng)一，而英文名稱更具有共識性，也更貼近編程語言的書寫方式，對于開發(fā)用戶的認(rèn)知感會更強(qiáng)。
3.對組件排序進(jìn)行了重新調(diào)整，2.0 按照字母順序排列。與前面提到的情況類似，以往的排序習(xí)慣將具有功能關(guān)聯(lián)性的組件放在一起 （如：單選和復(fù)選），但是仍然受個體差異影響，缺乏統(tǒng)一的標(biāo)準(zhǔn)。配合英文名前置的修改，排序也遵從字母表順序，形成統(tǒng)一的檢索規(guī)律，將有助于提高瀏覽效率。
組件設(shè)計
2.0的組件升級主要從視覺和應(yīng)用兩個維度出發(fā)。
輕盈簡潔
針對組件視覺樣式進(jìn)行了一次 “瘦身”，1.0 版本設(shè)計風(fēng)格也有些年頭了，部分組件樣式還稍顯復(fù)雜，在整體簡約扁平的大基調(diào)下顯得有些累贅。針對這部分組件，做了視覺減法，去掉了繁復(fù)的漸變、描邊、內(nèi)陰影、陰影等效果，使和頁面整體組合的感官更干凈輕盈，也節(jié)省了開發(fā)成本，使組件的可擴(kuò)展性進(jìn)一步提升，以下列出部分示例。
即拖即用
1.組件適配
之前有使用樂高的同事反饋，拖出來的組件不能自動適配，經(jīng)常要解綁再自己重新改布局和尺寸，并沒有節(jié)約時間。這樣就失去了使用組件的意義，同時也額外增加了規(guī)范不準(zhǔn)確的風(fēng)險。所以本次組件庫除了視覺優(yōu)化，還針對每個組件的應(yīng)用場景，其可能出現(xiàn)的適配情況，對 symbol 進(jìn)行了布局和伸縮的改造。保證每個組件在其合理的應(yīng)用場景下都能正常適配。
2.變量管理
Sketch 69 以上版本更新了系統(tǒng)的配色管理，對于顏色的批量管理更加靈活，樂高組件庫也對此進(jìn)行了同步更新。
3.切圖迭代
針對組件庫 icon 進(jìn)行了圖層樣式關(guān)聯(lián)，補充了組內(nèi)切圖，并且完成了標(biāo)準(zhǔn)規(guī)范英文命名，這樣圖標(biāo)拖出之后無需其他動作，上傳之后就可以提供標(biāo)準(zhǔn)樣式和命名的切圖。
動效設(shè)計
1.0 版本沒有針對動效做出明確的使用指導(dǎo)，使得網(wǎng)站作為一個產(chǎn)品自身的交互反饋缺少統(tǒng)一的動效規(guī)則。而且部分產(chǎn)品內(nèi)的組件的交互過程中也涉及到動效的應(yīng)用，也有同樣的問題，導(dǎo)致在使用組件產(chǎn)生聯(lián)動或連動的時候動作 “不協(xié)調(diào)”。這次版本更新針對這個問題已經(jīng)整理了初步的動效設(shè)計原則，第一版本主要針對時間，速度進(jìn)行了規(guī)范呢。后續(xù)還會對實際組件的運動方向和軌跡進(jìn)行優(yōu)化。
樂高的動效設(shè)計原則
自然： 基于設(shè)計原則中的 「一致性」 原則，用戶更容易理解或?qū)W會使用具有相似意思和功能的事物，所以設(shè)計動效首先要符合客觀世界物體的運動規(guī)律，不能讓用戶感到 “別扭”。
克制： 所有動效的設(shè)計都必須存在其合理性和必要性，所有的動效都是為系統(tǒng)本身提供輔助功能，這也就要求動效的程度和占用的時間不能超過其服務(wù)的功能本身。
靈活： 效率是動效的基礎(chǔ)屬性，但這并不意味著動畫的速度越快越好，時間越短越好。過快的反應(yīng)速度可能會導(dǎo)致屏幕 “閃爍”。而過短的動畫時間可能讓用戶來不及意識發(fā)生了什么。
運動規(guī)則
1.標(biāo)準(zhǔn)運動:在界面中元素發(fā)生位移、形變、縮放等，即運動主體始終在可視范圍內(nèi)的情況，通常建議應(yīng)用緩入緩出 （ease-in-out） 的規(guī)則。
2.入場型:界面中原本沒有的元素進(jìn)入界面的過程通常需要通過減速在引起用戶注意的同時給用戶一個 “緩沖”，建議應(yīng)用緩出 （ease-out） 的規(guī)則。
3.退場型:界面中的元素消失或離開界面的過程通常應(yīng)該快速完成，所以需要運動過程逐步加速，一般應(yīng)用緩入 （ease-in） 的規(guī)則。
4.速度與時間:一般用戶的反應(yīng)時間應(yīng)該在 0.2s 以上，為了符合一般用戶感知，常用動畫時長建議設(shè)置為 0.3s。這個時間通常可以引起足夠的用戶反應(yīng)，也不至于顯得拖沓。
小結(jié)
如何使得產(chǎn)品好用，首先還是得明確問題：產(chǎn)品給誰用，用戶怎么用，哪里不好用。
如果有高效準(zhǔn)確的搜集用戶反饋的途徑，這個問題就很好解決。但是如果沒有，和成熟的競品做對比也是一個很好的辦法。把自己帶入用戶的角色，當(dāng)你發(fā)現(xiàn)和競品的差異時，就會自然的產(chǎn)生對比。分析為什么會存在這些差異，競品這樣做的好處是什么，壞處是什么，對比自己的產(chǎn)品哪些差異更有優(yōu)勢，將問題羅列并且歸類。
當(dāng)問題明確后，需要明確需要達(dá)成的目標(biāo)。為了達(dá)成目標(biāo)，從整個使用流程中尋找需要在哪些節(jié)點做哪些動作，即修改方案落地。
同時也要考慮如何跟蹤和驗證改版是否真的使得產(chǎn)品變得好用，用戶反饋和貼合的體驗度量參數(shù)是比較好的解決方案。
