首頁

構(gòu)建高效標簽體系:如何優(yōu)化平臺權(quán)益感知,提升用戶體驗?

ui設計分享達人

 
一、前言
 

在數(shù)字化浪潮席卷全球的今天,標簽早已不再是簡單的文字標識,它們成為了連接用戶與信息的重要橋梁。從購物網(wǎng)站上的商品分類,到社交媒體上的話題標簽,再到搜索引擎的關(guān)鍵詞,標簽無處不在,默默地引導著我們的視線和選擇。

特別是在B2B領(lǐng)域,標簽的作用更是不可忽視。在百度旗下的B2B平臺愛采購上,一個精心設計的標簽體系不僅能幫助企業(yè)更精準地展示產(chǎn)品信息,還能助力買家快速找到所需商品,極大地提升了交易的效率和便捷性。

一個優(yōu)秀的B2B平臺標簽體系應該具備哪些特點呢?接下來,我們將以愛采購為例,深入探討B(tài)2B平臺標簽體系的設計優(yōu)化思路。

首先,標簽需要具有明確的信息傳遞功能。在愛采購平臺上,標簽被廣泛應用于展示商品的各種信息,如功能、價格、活動優(yōu)惠等。這些標簽不僅能幫助買家快速了解商品的特性,還能引導他們做出更明智的購買決策。

標簽的分類和標記功能也是至關(guān)重要的。通過合理的分類和標記,愛采購平臺能夠?qū)⒑A康纳唐沸畔⒂行虻爻尸F(xiàn)出來,讓買家能夠輕松找到自己需要的商品。同時,這也為賣家提供了一個展示自己產(chǎn)品優(yōu)勢的機會,增加了商品的曝光率和吸引力。

一個優(yōu)秀的標簽體系還需要具備高度的靈活性和可定制性。隨著市場變化和用戶需求的演變,標簽體系也需要不斷地進行優(yōu)化和調(diào)整。愛采購平臺通過引入智能算法和數(shù)據(jù)分析技術(shù),實現(xiàn)了對標簽體系的實時監(jiān)控和優(yōu)化,確保了標簽信息的準確性和有效性。

 
1、常見的標簽&作用
 
標簽常用于展示內(nèi)容/功能/商品/活動/價格/身份等信息,用于對高優(yōu)信息進行標記&分類,輔助用戶決策。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2、標簽對愛采購平臺的作用
 
愛采購作為百度旗下的企業(yè)一站式采銷平臺,致力于讓買家直接接觸海量商品和優(yōu)質(zhì)商家,同時還為賣家提供商家運營后臺,幫助他們快速實現(xiàn)交易目標。在平臺上,經(jīng)過認證的商家和商品信息將會被打上相應的標簽,確保真實性和實力資質(zhì)。這些標簽不僅展現(xiàn)了商家的優(yōu)勢,更是他們寶貴的會員權(quán)益。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
3、原標簽體系因何而變
 
平臺的slogan從“買賣好貨源,做出好生意”轉(zhuǎn)變?yōu)?ldquo;定制、批發(fā)、找工廠就來愛采購”的階段中,逐步推出「實力品牌」「交易服務」「加工定制」「資質(zhì)認證」四類標簽權(quán)益。當推出新權(quán)益時,為了快速樹立用戶認知,將新權(quán)益的標簽權(quán)重進行強化。但隨著權(quán)益體系的逐步完善,各類標簽優(yōu)先級排序不合理、不清晰等問題日益凸顯,影響用戶對各種權(quán)益的價值認知。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
4、新標簽體系如何求變
 
我們從平臺的角度出發(fā),通過對標簽權(quán)重進行排序和分類、統(tǒng)一標簽的構(gòu)成形式,致力于建立統(tǒng)一的標簽體系,統(tǒng)一會員權(quán)益的感知,完善設計規(guī)范,并建立標簽建設的協(xié)同機制,以規(guī)范后續(xù)標簽的更新迭代產(chǎn)出。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
 
二、分類-排序-收斂
 
1、標簽分類
 
現(xiàn)有的標簽從B2B平臺的屬性和用戶的視角來看,可以分為六大類:會員類、認證類、服務類、交易類、保障類、資質(zhì)類。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2、標簽排序
 
各類標簽都有其獨特的重要性,但在設計表達時,需要從助力買家尋找優(yōu)質(zhì)店鋪&服務這一核心情境出發(fā),根據(jù)平臺對標簽的綜合定位和用戶的心智感知,定義標簽的權(quán)重排序,并劃分出強中弱三個梯級,以便后續(xù)的標簽樣式系統(tǒng)優(yōu)化。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
3、標簽收斂
 
1)樣式收斂
 
新權(quán)益推出時,常基于應用場景用“位置”和“樣式”強化對應的標簽。隨著權(quán)益體系的完善,一個標簽存在多種樣式使得權(quán)益表達的不統(tǒng)一,影響了用戶對標簽價值的認知。為解決這一問題,需要對標簽樣式的數(shù)量進行收斂。保留符合標簽權(quán)重和通用性強的樣式,作為標簽迭代的基礎(chǔ)范式。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2)應用收斂
 
常規(guī)非特色信息使用標簽,反而影響其他標簽的權(quán)重和頁面的閱讀效率,根據(jù)奧卡姆剃刀原則“如無必要,勿增實體”,需要通過視覺降噪來提升頁面的可閱讀性。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
 
三、統(tǒng)一標簽體系的構(gòu)成
 
1、形
 
標簽的大小通常分為大、中、小三種,而標簽的寬度常根據(jù)內(nèi)容的長度進行適配。因此,在規(guī)則定義上,標簽的大小會受到其高度的影響。
 
  •  
    大標簽(高度18-22Pt):常用于表格、表單等信息密度相對較低的場景,使用相對較大的標簽,以便與其他信息達到視覺上的平衡。
 
  •  
    中標簽(高度15-17Pt):最常見的標簽大小,常用于Feeds、用戶信息卡等場景中。
 
  •  
    小標簽(高度12-14Pt):由于面積較小,通常用來承載輔助信息,常見于Feeds等場景中。
 
結(jié)合愛采購平臺的核心場景和常用文字字號,16Pt的標簽高度與其他信息的大小比例最為平衡,故選擇16Pt的標簽高度作為基礎(chǔ)大小。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
在標簽的造型上,可以將其分為常規(guī)形和異形兩種類型:
 
  •  
    常規(guī)形:常見的標簽為矩形,具有規(guī)整有序的外觀,閱讀效率較高,有較強的通用性,適用于列表等大部分場景。
 
  •  
    異形:異形標簽的形狀較為自由,由于其差異化較大,會更容易引起用戶的注意,適用于特殊的身份表達、大促活動等場景。
 
在統(tǒng)一的場景中,同屬性類型的標簽形狀應該保持統(tǒng)一和諧,避免在相同類別的標簽中混用不同形狀,造成視覺上的不統(tǒng)一感。通過統(tǒng)一標簽形狀,可以提升用戶對標簽信息的識別和理解。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
在標簽的圓角上,我們可以分為以下幾種形狀:
 
  •  
    膠囊形狀(圓角為高度的50%):圓潤的外觀給用戶帶來柔和的視覺感受。
 
  •  
    大圓角矩形(圓角為高度的18%~32%):擁有視覺亮點的同時保持一定的圓潤度。
 
  •  
    小圓角矩形(圓角為高度的6%~12%):標簽更加銳利,但又不失整體的和諧性。
 
  •  
    直角矩形(圓角度為0):具有簡潔硬朗的外觀,適用于某些特定的場景或者設計風格。
 
新的標簽體系從產(chǎn)品設計語言出發(fā),選擇小圓角矩形作為主要標簽的基本型,以保持整體視覺風格的一致性。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2、色
 
采用HSB色彩系統(tǒng)來構(gòu)建標簽的色彩體系。在HSB顏色模式下,我們以品牌紅的0°為起點,每隔24°遞增,選擇不同心智的輔助色。為了色彩體系在視覺上的統(tǒng)一性,通過色彩矯正保持H不變,對S/B進行20°以內(nèi)的微調(diào)。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
在建立新的標簽色彩體系之前,需要根據(jù)現(xiàn)有標簽的分類,在延續(xù)之前標簽色彩心智的基礎(chǔ)上,對不同類型的標簽選用具有不同心智的色彩。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
深色場景的調(diào)色方式
 
在特定情境下,標簽會應用于深色背景上,這就需要在原有基礎(chǔ)上對顏色進行有規(guī)則的調(diào)整,以確保標簽的可閱讀性和統(tǒng)一性。
 
對于彩色標簽,在這種HSB色值模式下,保持色相(H)不變,通過微調(diào)飽和度(S)和亮度(B),使在亮色和暗色背景上的對比度保持一致,以確保標簽在不同背景下都能清晰統(tǒng)一。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
3、字
 
針對常規(guī)標簽,我們采用系統(tǒng)字體,而對于高優(yōu)特色標簽,則使用特殊字形(非默認字形)。通過對比原則,我們在保持整體統(tǒng)一的基礎(chǔ)上尋找差異,以強化高優(yōu)標簽的視覺效果。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
4、構(gòu)
 
1)標簽體系樣式的構(gòu)成
 
標簽的構(gòu)成形式可拆解為:雙色和單色、實心和半透明、描邊和填充、純文字或圖標加文字等,這些形式可以搭配組合出豐富的標簽樣式。
 
在標簽內(nèi)部,重色占比越大,飽和度和對比度越高,標簽的視覺權(quán)重就越高。根據(jù)視覺上的強弱,對各類結(jié)構(gòu)進行強弱排順,形成強、中、弱三個層級的標簽構(gòu)成樣式。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2)標簽體系樣式搭配的構(gòu)成
 
在相同的場景中,應盡量避免過多臨近權(quán)重的標簽,而是需要確立一個合理的強弱比例。盡管每個標簽都可能有其重要性,但根據(jù)其權(quán)重和優(yōu)先級順序,應賦予各個標簽合理的比例。綜合考慮標簽的重要性和數(shù)量分配,以確保用戶可以快速準確地獲取所需信息,同時保持界面整潔和易于閱讀。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
1)標簽體系改動的對比
 
通過“形-色-字-構(gòu)”的維度建立起統(tǒng)一的標簽構(gòu)成形式,然后根據(jù)不同的強弱層級確定標簽的形態(tài)。結(jié)合之前的標簽權(quán)重層級排序,就可以得到新的標簽體系。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2)標簽體系應用的對比
 
統(tǒng)一各場景中用戶對標簽價值的感知。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
 
四、沉淀設計規(guī)范&搭建協(xié)同機制
 
1、提煉共性沉淀設計規(guī)范
 
在確定了標簽的構(gòu)成形式并明確了各個場景的標簽使用規(guī)則后,我們需要從標簽形態(tài)/尺寸/圓角/間距/字體/使用場景等多個維度出發(fā),制定標簽的設計規(guī)范,從樣式&場景應用上規(guī)范后續(xù)標簽的增刪改,以提升全場景標簽的統(tǒng)一性。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2、搭建標簽體系建設協(xié)同機制
 
標簽體系由多個標簽組成,牽一發(fā)而動全身。因此在構(gòu)建健全的標簽體系時,需要從人、交付物、協(xié)同關(guān)鍵節(jié)點三個方面建立協(xié)同機制,共同推動標簽體系的持續(xù)優(yōu)化和發(fā)展。
 
  •  
    人:不同角色需密切合作,共同理解標簽的重要性和功能,確保標簽體系連貫有效。
 
  •  
    交付物:需求文檔和設計稿標注至關(guān)重要。需求文檔應明確描述標簽在體系中的含義、特征、排序和權(quán)重層級。
 
  •  
    協(xié)同關(guān)鍵節(jié)點:建立覆蓋多方的協(xié)同機制,以確保在關(guān)鍵節(jié)點,標簽體系得到合理建設和完善。
 
標簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
寫在最后
 
平臺標簽的重點不僅應在樣式上符合用戶對該標簽的心智認知,且標簽的視覺權(quán)重順序也應該正確符合平臺&用戶的訴求,保障各標簽能在用戶的決策路徑中起到高效正確的引導。對于標簽系統(tǒng)來說,規(guī)范的構(gòu)成形式應對全局標簽的構(gòu)成起到統(tǒng)領(lǐng)作用,良好的共建機制保障標簽體系在業(yè)務發(fā)展的各個階段始終保持統(tǒng)一有序。
 


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTYxNjQ1Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 

藍藍設計(m.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計桌面端界面設計、APP界面設計圖標定制、用戶體驗設計、交互設計、UI咨詢高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司用戶體驗公司、高端網(wǎng)站設計公司、銀行金融軟件UI界面設計、能源及監(jiān)控軟件UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

B端設計規(guī)范的安全著陸

ui設計分享達人

想法很重要,落地更重要
“有很多優(yōu)秀的想法,但如果不能夠把它們變成現(xiàn)實,就沒有什么價值。”
這句話出自比爾·蓋茨的一篇演講,該演講是在1994年的美國全國高技術(shù)展(National Educational Computing Conference)上發(fā)表的。在這篇演講中,比爾·蓋茨講述了他對計算機科學的看法,并提出了他對教育和技術(shù)的未來的愿景。在談到創(chuàng)新和想法的時候,他說了這句名言。

提升B端產(chǎn)品可用性的UI設計策略

ui設計分享達人

隨著企業(yè)信息化的推進,B端產(chǎn)品(即面向企業(yè)或組織的產(chǎn)品)在各行各業(yè)中的應用越來越廣泛。
然而,很多B端產(chǎn)品在使用過程中存在著操作復雜、難以理解等問題,這大大降低了產(chǎn)品的可用性。為了提升B端產(chǎn)品的可用性,UI設計師需要采取一系列策略來優(yōu)化用戶界面和交互體驗。
本文將詳細探討這些策略,以幫助設計師們創(chuàng)造出更加用戶友好的B端產(chǎn)品。

深入探究B端產(chǎn)品設計的核心

ui設計分享達人

在當今高度信息化的商業(yè)環(huán)境中,B端產(chǎn)品已成為企業(yè)高效運營和持續(xù)發(fā)展的關(guān)鍵支撐。
這些產(chǎn)品不僅提供工具和服務,更是企業(yè)優(yōu)化流程、提升工作效率和競爭力的有力武器。然而,要打造一款成功的B端產(chǎn)品,關(guān)鍵在于對
B端用戶需求的深入理解與分析。
B端用戶,
如企業(yè)決策者、團隊管理者和專業(yè)人員以及普通員工,他們在日常工作中處理復雜的業(yè)務流程,對數(shù)據(jù)分析、系統(tǒng)整合、安全性等方面有著極高的要求。
這些用戶的獨特需求不僅體現(xiàn)在產(chǎn)品的基本功能上,更涉及到產(chǎn)品的易用性、可擴展性以及服務支持等多個層面。

移動設計模式

前端達人

現(xiàn)在人們漸漸用智能手機代替PC,連購物也是如此。正當越來越多的人由電腦桌面向移動網(wǎng)頁轉(zhuǎn)移,購買產(chǎn)品和服務,網(wǎng)站創(chuàng)建者可以使用已存的設計模式來開啟移動電子商務計劃。

擁有良好的電子商務經(jīng)驗非常重要。實際上,近期的研究發(fā)現(xiàn),如果能用手機登陸購物網(wǎng)站且過程體驗良好,多于67%的人都愿意下單。

使用設計模式的優(yōu)點在于,你可以看到其他設計師是如何解決類似的問題,這樣你就不用走彎路。還能使你了解到人們在其他網(wǎng)站使用類似功能時的需求,并以此為參考來設計網(wǎng)站;并鼓勵你思考自己一個人做設計時不會想到的設計方法。

本文中,我們專注于智能手機,而不是圖表。我們將介紹一些用于移動電子商務功能的設計模式和方法,如下:

·主頁  

·導航  

·搜索建議

·搜索結(jié)果

·搜索過濾和分類

·產(chǎn)品頁

·圖片庫

·購物車

·賬戶或游客登錄

·表格

本文中所有例子都來源于移動網(wǎng)頁,在智能手機瀏覽器中運行。大多數(shù)屬于大型百貨零售商,因為他們有龐大的產(chǎn)品目錄,這就需要考慮周全的設計方式,以突出搜索,并將搜索結(jié)果進行過濾和分類。本文還有許多基于電子商務的原生app,許多模式都能很好的運用其上。

 

主頁

在移動設備上訪問網(wǎng)頁,主頁內(nèi)容通常較少,更多是幫助用戶找到所需的內(nèi)容。常見的模式就是一欄促銷,一欄鏈接列表或產(chǎn)品目錄,很簡單。關(guān)鍵詞搜索一般都有,還有店鋪的鏈接,訂閱促銷郵件及忠誠度計劃的登記表。

 

c9b7569882026ac725af23e7ad60.jpg

 

亞馬遜和梅西都使用促銷商品和列表目錄混排的方式。

 

 

0498569881ab6ac725af23bac5c8.jpg

 

塔吉特的促銷內(nèi)容比簡單列表占據(jù)屏幕更大的空間,極具視覺沖擊力。

Threadless使用儀表盤模式,比起移動電子商務網(wǎng)頁,在原生應用中較為常見。

 

如果購物者來你的網(wǎng)站是為了快速比較價格,那么他們更需要的便是簡單的列表樣式和搜索功能。如果他們是來關(guān)注促銷和打折的,那么塔吉特的設計模式就更合適。因此,你需要分析消費者來你的網(wǎng)站的目的,以此決定合適的設計模式。

導航

除了使用主頁作為主要的導航中心,許多網(wǎng)站也在多數(shù)頁面上設置了導航目錄,通常是作為頁頭。這讓消費者能輕松在頁面間跳轉(zhuǎn),而無需回到主頁。

 

cbf2569882186ac725af23c93010.jpg

 

lowe的導航目錄中,每個選項都有圖標。best buy的目錄則使用了兩欄的排版,并且用按鈕替代列表。Lowe的目錄出現(xiàn)時會覆蓋整個頁面,而Best Buy的目錄出現(xiàn)時會向下推擠屏幕上的其他內(nèi)容。

 

11cf5698824532f87574be578837.jpg

 

Macy的導航目錄包含下級選項。CVS則具有雙欄目錄,每個選項也有圖標。它們的目錄都在頁面頂端展示。

看了上面的屏幕截圖,設計網(wǎng)頁導航的方式多種多樣。Lowe的設計很簡潔,而且圖標帶來了一些視覺上的亮點。而導航以外的其余內(nèi)容都隱入背景,這使用戶在選擇導航內(nèi)容時,更集中于當前目標。CVS的版式相對雜亂,兩欄的選項,每個項目都搭配了圖標。CVS的目錄上有許多可以點擊的bar,相互之間很接近,這在觸摸屏上可能導致可用性問題。

有趣的是,大型電子商務網(wǎng)站通常不會一次顯示許多導航選項。它們嘗試在導航的視覺設計和網(wǎng)頁信息構(gòu)架之間尋求平衡,仔細考慮應存在于全站導航上的項目的數(shù)量。通過網(wǎng)站分析來確定消費者會點擊哪個目錄選項,可以幫助你決定目錄上的內(nèi)容??蓪Σ煌脑O計進行A/B測試和可用性測試,看看哪種設計選項太多太雜,最佳方案應使人們不但找到建議內(nèi)容,也能找到需要的內(nèi)容。——為了商業(yè)需求,也為了用戶需求。

搜索建議

搜索建議,也叫輸入提示或自動填寫,當消費者鍵入前幾個字幕的時候就顯示出可能的輸入結(jié)果。在常用搜索中,這對消費者來說真的很方便,特別是當輸入內(nèi)容很長的時候。而搜索建議的一個局限就是:在虛擬鍵盤上很容易輸錯字,這會改變建議的結(jié)果。而顯示常見“正確”的結(jié)果可能更有用。而且,考慮使用改進的自動建議模式來減少輸入內(nèi)容,在最有效率的前提下使用更慢的移動帶寬。

 

0249569882666ac725af232553c1.jpg

 

在Office Depot網(wǎng)站的搜索框中輸入“draf”時,會自動提示數(shù)個可能的結(jié)果。如果錯打成“drag”,就會顯示出一些和搜索內(nèi)容無關(guān)的結(jié)果。在虛擬鍵盤上輸錯字母是很常見的問題。

 

人們在輸入時的錯誤,設計師也無可奈何。不過他們可以用其他方式使消費者找到產(chǎn)品頁,例如,產(chǎn)品類別或頂層類別的目錄可以向下延展出列表。網(wǎng)站管理者也可以優(yōu)化搜索引擎的功能,如當用戶輸入“dragt”時,再建議“draft”的結(jié)果。你使用的搜索引擎技術(shù)將決定你解決問題的方式。

搜索結(jié)果

在移動電子商務網(wǎng)站上的搜索結(jié)果主要使用兩種樣式:表格展示和網(wǎng)格展示。表格展示會顯示一張產(chǎn)品縮略圖和一些密集排列的基本信息如產(chǎn)品名稱、價格。網(wǎng)格展示則會顯示較大的圖片而使用更少的描述信息。一些網(wǎng)站允許消費者在兩種展示方式之間切換。

 

97295698828432f87574bea51819.jpg

 

zappos以網(wǎng)格顯示搜索結(jié)果,這使它可以使用更大的產(chǎn)品圖片,使消費者買鞋的時候偏于以感性作出選擇。Walgreens使用包含按鈕的表格,按鈕的功能一個是在店中找到商品,另一個是將商品加入購物車。

 

dff1569882a06ac725af23add0de.jpg

 

OfficeMax讓消費者在海量的搜索項目中——如輸入“紙”搜索——選擇子類別。一旦選擇了子類,搜索結(jié)果將以表格展示出來。如果搜索“剪刀”,搜索結(jié)果的子類別會較少,這讓消費者能直接在表格中看到結(jié)果。

 

如果產(chǎn)品的分級雜亂不清,此時讓消費者選擇子類別可能會導致一些問題。如上面在OfficeMax的例子中,某人想買8.5x11英寸的家用打印紙,他可能不知道該在“復印紙&多用紙”還是該在“激光紙”的目錄下找。一種比較好的解決方式就是在搜索過濾器下邊列出子目錄,可以與其它過濾方式并列呈現(xiàn),如“顏色”和“尺寸”。每隔一段時間(4-6周)就對具有代表性的用戶、常見搜索項目和熱銷產(chǎn)品進行測試,這可有助于你洞察哪種解決方式更佳。A/B測試也可以揭示出哪一種方式能讓更多用戶到達產(chǎn)品頁并具有更高的支付率。

 

25a0569882ba6ac725af234530a6.jpg

 

Gap的默認搜索結(jié)果以表格展示,同時提供網(wǎng)格展示方式的選擇。注意,Gap也在關(guān)鍵詞區(qū)域保持搜索項目。

 

Gap的用戶可以選擇搜索商品的展示方式,這讓它們可以隨時在易于瀏覽的形式和具有大圖的形式之間轉(zhuǎn)換。但其實Gap可以在網(wǎng)格展示方式中保留一些商品信息——如價格(像Zappo所做的那樣)

一些諸如價格和顏色的細節(jié)讓用戶更容易決定想要了解哪個商品的更多信息。

在關(guān)鍵詞區(qū)域保持搜索文字也可以提醒用戶他們正在搜索的內(nèi)容,讓他們更容易通過添加一些限制詞(如“紅色”)來細化搜索結(jié)果。

在Gap中搜索“男式tshirts(正確寫法為t-shirts)”,你會來到無搜索結(jié)果頁面(本文未截圖),而且也不提供“男式 t-shirts”的搜索鏈接。Gap可以在搜索結(jié)果頁面添加“你是否要搜索-某物品”的搜索建議來提升其用戶體驗。Google就會列出“mens t shirts”的搜索建議,如果用戶忽略,它就會直接呈現(xiàn)出“men’s t-shirts”的搜索結(jié)果。

結(jié)果分類

將搜索結(jié)果分類可以幫助購買用戶以一種有規(guī)律的方式組織起海量的搜索結(jié)果,通常會按照價格和消費者評分排列。常見的分類界面樣式是按鈕和<選擇>菜單。

 

246f569882de32f87574be90c2fe.jpg

 

Walmart讓用戶點擊三個按鈕之一來將結(jié)果分類。Sears使用了類似的方式,但有一個“分段控制”,Javas cript框架如jQuery移動開發(fā)正在使這些類似app的界面小部件對設計師來說更易用。

 

2ee9569882fd6ac725af2376ad8b.jpg

 

J.C. Penney可以通過有點自定義樣式的<選擇>菜單來分類結(jié)果,Eddie Bauer則使用了瀏覽器的默認<選擇>菜單。兩者都通過瀏覽器的本地控制來觸發(fā)<選擇>菜單(本例中為iphone選擇器)

Walmart的按鈕之間空間較大,點擊起來不易出錯,但同時也因此無法容納更多選項,而Sears有四個按鈕,包含一個“全部”的按鈕,這使得用戶在分類篩選后沒有找到所需商品時可以回到初始頁面。用<選擇>菜單是一種很安全的選擇,因為現(xiàn)代移動瀏覽器都支持這種方式,這使應用可以列出更長的分類選項。但是,也占用了許多有用空間。這些都是可用常規(guī)測試方法來評估的折中設計類型。

結(jié)果過濾

過濾器讓用戶可以縮小搜索范圍,一般基于諸如顏色,品牌和尺寸等屬性。過濾器通常要劃分類型(稱為分面),每個分面下會顯示數(shù)個值(比如,顏色就是一種分面,紅色是一種分面值)常見的展示過濾選項的界面樣式是<選擇>菜單,下拉式菜單和可折疊菜單?,F(xiàn)在在技術(shù)上使單個搜索包含數(shù)個分面值是可以實現(xiàn)的,但也因此帶來更高的交互成本,并導致無搜索結(jié)果(比如,低于75美元的交叉訓練運動鞋)。

 

 

a20c569883626ac725af23e1019e.jpg

 

CVS在其高級搜索中使用<選擇>菜單來過濾結(jié)果,選擇一個菜單選項將立即對結(jié)果進行過濾。JC Penney則提供了一個下拉菜單來過濾結(jié)果,并會提示出符合過濾值的產(chǎn)品數(shù)量。JC Penney也允許一個分面帶有多個值,以供用戶進行一次性的選擇,確認信息用戶要觸碰“apply”按鈕。

 

c9215698844832f87574be43468e.jpg

 

Kohl’s在其每個過濾類型中使用折疊方式收納系列復選框。Threadless把所有搜索分面的值以按鈕體現(xiàn)。兩個網(wǎng)站中,你只需選擇一個過濾值就能立刻看到結(jié)果。

 

在每個分面值下面顯示商品數(shù)量能讓消費者更清楚地了解每個選擇為他們帶來的結(jié)果。Threadless的方式是用整一屏展示出所有可用的分面值,讓消費者對所有可用搜索結(jié)果一目了然。你是選用這種方式還是使用Kohl的方式,取決于你打算為指定產(chǎn)品目錄提供多少過濾分面值。如果你的產(chǎn)品目錄在分面值方面變化不定,那么你就需要進行試驗找出合適的設計方式。你可以優(yōu)化那些最熱門的產(chǎn)品目錄的過濾結(jié)果顯示頁面。

產(chǎn)品頁面

產(chǎn)品頁是電子商務網(wǎng)站真正展示產(chǎn)品細節(jié)的頁面。它們并不關(guān)于某種模式,而是關(guān)于系列模式,包括標簽,折疊導航和照片庫等系列元素。產(chǎn)品頁有兩種展示方式,一是包含所有產(chǎn)品信息的長頁面,二是包含標簽或折疊導航能將信息收起的短頁面。

 

f8f25698846632f87574bede44d3.jpg

 

三星和戴爾都在產(chǎn)品頁上逐步揭開內(nèi)容,為消費者提供許多信息。三星使用折疊導航來展開大段內(nèi)容,戴爾則使用標簽。

 

49f25698848532f87574bea7abfc.jpg

 

Cabela和Office Depot都使用一整個長頁面來展示產(chǎn)品信息。這種方式需要用戶頻繁滑動屏幕來獲取信息,但他們就不用觸碰標簽或展開折疊導航欄。你需要根據(jù)產(chǎn)品信息量的多少和分解信息的方式來選擇合理的方式。

 

長的產(chǎn)品頁比起帶折疊導航和標簽的頁面需要用戶進行更多滾動操作,也令購買者需要更費力地找出特定信息。在我自己的可用性測試中,我了解到人們對兩種方式各有偏好,但是似乎對網(wǎng)頁信息進行劃分具有更高的可用性。如果你要采用這種方式,確保在人們觸碰標簽或折疊導航欄的時候,被收起來的信息能快速顯示。

一種辦法就是開始便一次性加載所有信息內(nèi)容,這樣觸碰標簽或折疊導航的時候時,被收起的內(nèi)容就會立即顯示。如果采用這種辦法,即使用戶在各種信息之間切換的過程中掉線了也沒關(guān)系。但是有個弊端:不管用戶閱讀與否,也必須下載所有的產(chǎn)品信息;這為服務器帶來更大負荷,而且也會占用戶較多帶寬。

照片庫

照片庫對電子商務領(lǐng)域如服裝和消費電子行業(yè)來說特別重要。在Home Depot上購物時,看衣服、鞋子、高端智能機或平板電腦你可能并不需要看到商品的三視圖,但圖片總是越多越好。常用的展示方式是可滑動的照片庫,“雙擊照片放大”,單擊縮略圖以選擇照片。

 

69f85698849b32f87574bec38555.jpg

 

Payless非常英明地將“雙擊放大”的提示框放在屏幕中心并持續(xù)幾秒,給購物者充分的時間去消化理解網(wǎng)頁的操作方式。對服裝和鞋子來說,放大商品圖片查看細節(jié)非常重要。

 

2605569884b66ac725af238198e5.jpg

 

Dockers(上左圖)具有可滑動的照片庫,雙擊放大查看細節(jié),而且購物者可以查看同一商品的不用顏色。Levi(上右圖)也用了類似方式,但添加了商品縮略圖,顯示照片庫內(nèi)不同視角的照片。在Docker上,選擇另一種顏色的商品會令網(wǎng)頁刷新,但Levi不會。

 

Levi網(wǎng)站在用戶選擇商品的不同色彩時大多數(shù)網(wǎng)頁不會刷新,這似乎能帶給用戶更好的體驗。但是,如果對比Levi和Dockers網(wǎng)站在同一天同一時刻的表現(xiàn),你會發(fā)現(xiàn)觸碰Levi上的顏色標簽并等待響應照片載入所花的時間,竟然比Dockers刷新一整個網(wǎng)頁的時間要多。Levi之所以這么慢,可能是因為它還要刷新那5個縮略圖,加上主要照片和其他不可見的元素,這種負載比較重??磥砻糠N方式都有利有弊。

 

f200569884d06ac725af2318b247.jpg

 

三星(上圖左)和戴爾(上圖右)的照片庫都可以左右滑動。三星還將折疊導航合并到產(chǎn)品也,戴爾則單純只有照片。

 

三星的方式似乎更人性化,因為頁面相對更少。三星和戴爾都使用了高分辨率的照片,顯然在展示價值不菲的產(chǎn)品時圖片質(zhì)量很重要。戴爾的方式有一個好處,那就是消費者會更專注于產(chǎn)品本身,而不被頁面的其他內(nèi)容干擾。

購物車

購物車通常用表格來展示商品。除了展示需要購買的商品,還提供其他功能,比如可以保存訂單,保存商品到收藏夾,刪除商品或更新數(shù)量,選擇快遞或?qū)嵨锏昴秘?,接受促銷卷或優(yōu)惠券,以及結(jié)賬等。一旦加入了商品,就可以通過網(wǎng)站頁頭的購物車圖標或者全網(wǎng)站導航菜單進入購物車。

e19c569884e732f87574be99e78c.jpg

 



作者:插畫師景豆豆
鏈接:https://www.zcool.com.cn/article/ZMzg0Nzk2.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計

前端達人

歡迎小伙伴們收看《B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計》,本節(jié)內(nèi)容將帶領(lǐng)小伙伴們從零開始認識圖表,了解圖表在數(shù)據(jù)可視化中的作用,圖表的構(gòu)成,不同圖形可以可視化哪些類型的數(shù)據(jù)等等。希望大家看完后能對圖表有個相對完整的認知,在以后的工作中可以得心應手。
一、什么是圖表?
大家對圖表一定不陌生,圖表(chart)就是一種通過圖形化的方式呈現(xiàn)和分析數(shù)據(jù)的工具,就是
將表格中的數(shù)據(jù)進行二次加工,將復雜的業(yè)務數(shù)據(jù)轉(zhuǎn)化為更加直觀的、有趨勢性、有時間線、空間性的圖形數(shù)據(jù)
,協(xié)助用戶根據(jù)數(shù)據(jù)變動而變更相關(guān)決策,最終以實現(xiàn)降本提效的目的。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
不同部門或者角色在公司中會需要各種類型的數(shù)據(jù)信息,以支持其業(yè)務運營和領(lǐng)導層決策需求。這些數(shù)據(jù)信息的準確性和及時性對于公司的發(fā)展和競爭優(yōu)勢至關(guān)重要。
產(chǎn)品部門關(guān)注的主要是用戶行為數(shù)據(jù)、收入數(shù)據(jù)、用戶量數(shù)據(jù);運營部門關(guān)注用戶活躍度數(shù)據(jù)、營銷效果數(shù)據(jù)和用戶反饋數(shù)據(jù);技術(shù)部門關(guān)注系統(tǒng)運行數(shù)據(jù)、技術(shù)指標數(shù)據(jù);用戶增長部門關(guān)注用戶生命周期數(shù)據(jù)等。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
二、一個優(yōu)秀圖表設計的標準是什么?
要看一個圖表是否優(yōu)秀,主要看它是否符合GLAD原則。GLAD原則是一個在數(shù)據(jù)可視化設計中常用來確保圖表質(zhì)量和有效性的方法論,它主要包括以下四個要素:
GLAD原則
GLAD原則
 
 
G原則:優(yōu)質(zhì)數(shù)據(jù)和洞察
G原則是指Good Data and Insight。G原則在探索性數(shù)據(jù)分析過程中著重提升圖表的商業(yè)價值,G原則的關(guān)鍵是“有價值的商業(yè)信息”,這一點就要求在準備數(shù)據(jù)的時候,應該剔除那些商業(yè)分析價值不大的部分,而主要留下的是有高價值密度的信息。除了要求有高價值的信息之外,還需要有比較好的Insight,也就是能洞察數(shù)據(jù)中的高價值信息,并以較為通俗易懂的形式在圖表中表達出來。
優(yōu)化前
優(yōu)化前
 
例圖點評:雖然圖表本身看上去好像并沒什么問題,圖形選擇的也對、顏色搭配也得體,讀者也能理解圖本身要表達的意思。但是,
沒有商業(yè)價值,即我能看出茅臺拿鐵賣的最好,然后呢?這是哪個階段的數(shù)據(jù)?不知道。有沒有持續(xù)的表現(xiàn)數(shù)據(jù)?也不知道。
優(yōu)化后
優(yōu)化后
 
例圖點評:修改后,從數(shù)據(jù)中提煉出更有價值的商業(yè)數(shù)據(jù),在時間維度和空間維度都有體現(xiàn),簡潔明了的同時,也具有商業(yè)參考價值。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
L原則:更少的視覺噪音
L原則是指Less Noise。簡單說就是視覺降噪。
B端產(chǎn)品是高度商業(yè)化的產(chǎn)品,有用有效遠大于好看,
這要求B端設計師對藝術(shù)的追求要適可而止,商業(yè)數(shù)據(jù)分析不是追求藝術(shù)造詣,不是做一張海報去吸引人的眼球,而是提供商業(yè)價值并能快速讓人理解。過于酷炫、花哨、浮夸的修飾并不會給圖表帶來任何附加值,反而會增加讀者的閱讀負擔。
例圖1
例圖1
 
例圖點評:修改前,有些國家由于人口稀少,導致相關(guān)數(shù)據(jù)也非常小,難以在圖表中展示,造成整個圖表花里胡哨且復雜。修改后,把過小數(shù)據(jù)的選項折疊為“其他”,默認顯示主要幾個較大國家的數(shù)據(jù),當點擊“其他”圖例的時候,再顯示詳細的數(shù)據(jù)信息,使數(shù)據(jù)展示更具有側(cè)重點。
例圖2
例圖2
 
例圖點評:圖例2是dribbble上的圖表作品,左側(cè)是K線圖,右側(cè)是柱狀圖,它們的問題在于花里胡哨,卻缺少必要的刻度,形式大于內(nèi)容,過于追求好看的反面案例。
 
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
A原則:準確的表達
A原則是指Accurate Expression。通俗講,就是要根據(jù)不同的數(shù)據(jù)類型和不同的商業(yè)目的,采用正確的、適合的圖表類型,如表現(xiàn)占比就要用餅圖、百分比柱形圖,表現(xiàn)趨勢就要用折線圖、面積圖等,且要保證圖例的清晰性、刻度的準確性,避免模棱兩可的圖例和不準確的刻度。
錯誤例圖
錯誤例圖
 
正確例圖
正確例圖
 
例圖點評:圖例的本意是對比2023和2024年不同品牌手機的銷售額占比,是基于時間維度的對比圖,但錯誤圖例卻用了兩個餅圖,無法直觀的表現(xiàn)特定品牌在不同年度的銷售額占比的對比情況。正確的圖例則直接用了柱狀對比圖,一目了然。
 
D原則:明確的標記
D原則是指Dinstinct Mark。D原則的作用是幫助讀者加快理解信息的速度,它強調(diào)
突出重點
,需要把通過數(shù)據(jù)比較得到的差異部分、體現(xiàn)洞察信息的內(nèi)容利用明顯不同的顏色、形狀、文字標注等手段進行區(qū)別,讓讀者的視線聚焦到那里去。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
三、圖表的構(gòu)成要素
圖表是由:標題、圖例、縱軸、橫軸、圖形、圖表范圍及其他輔助元素(如水位線、網(wǎng)格線、刻度值、提示信息等)構(gòu)成,每一個元素都有它存在的意義。不過在實際使用中不一定非得把元素全部展示出來,精簡化顯示想要展示的內(nèi)容即可。
圖表的構(gòu)成
圖表的構(gòu)成
 
 
3.1標題
標題即圖表的名字,是圖表必不可少的元素。標題要求簡短明確通俗易懂,視覺上通常需要字體加粗。標題下面也可以跟一行副標題,用作對標題的補充說明。
  •  
    信息類標題:提供理解數(shù)據(jù)所需的所有信息,回答「何事」、「何地」、「何時」這三個問題
  •  
    描述類標題:突出圖表中顯示的主要數(shù)據(jù)模式或趨勢,描繪出圖表所要講述的故事
標題常用的位置有3種,左上、頂居中、底居中。
標題常用位置
標題常用位置
 
 
3.2圖例
3.2.1圖例的作用:
  •  
    區(qū)分不同類別數(shù)據(jù)的標志
  •  
    開啟/隱藏類別顯示
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
如果圖表中只有一個數(shù)據(jù)系列,則可以不用顯示圖例。
常見圖例展現(xiàn)形式
常見圖例展現(xiàn)形式
 
3.2.2圖例的位置
圖例的位置并沒有嚴格限制與要求,常見位置是上、下、右。
圖例的位置
圖例的位置
 
3.2.3圖例的顏色
在選擇圖例顏色時,不要用色相過于接近的顏色,否則會容易看混或看錯。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
要規(guī)范圖例顏色使用,一般分為兩種情況:
  •  
    常用的圖例顏色(顏色本身代表著行業(yè)中的某種含義),此類顏色需要是固定色值,無論哪個 chart 中,都是這個顏色;
  •  
    無特殊含義的圖例,可以規(guī)范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色,圖例整齊劃一。
值得一提的是,為了照顧色弱、色盲群體,有些產(chǎn)品會增加無障礙花紋來進行輔助識別,提高辨識度。這種設計很有溫度,畢竟設計以人為本。
Echarts的無障礙花紋樣式
Echarts的無障礙花紋樣式
 
 
3.2.4圖例的數(shù)量
一般來說圖例不要過多,基本要遵循米勒定律,即7±2法則。
米勒定律
米勒定律
 
所以,5個以內(nèi)是最佳圖例數(shù)量。如果遇到比較復雜的圖表,則可以進行嘗試進行圖例合并,如上面講GLAD原則的時候的L原則案例,除了多個圖表可以共用一組圖例(前提是圖例代表的意思一致),還可以把過于零碎的比重要的數(shù)據(jù)圖例合并為一個“其他”。
如果圖表中只有一個圖例的話,則可以不顯示。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
3.2.5圖例名稱的長度
根據(jù)不同使用場景,為了更好的展示效果,要給圖例名稱設置一個最大值,超過最大值后省略展示,鼠標hover時再顯示完整名稱。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
3.3坐標軸
3.3.1什么是坐標軸
坐標軸是定義域軸(叫什么)和值域軸(有多少)的統(tǒng)稱。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實意義,因此我們可以根據(jù)坐標軸對應的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù),將坐標軸分成連續(xù)軸、時間軸、分類軸三大類。軸的類型不同在設計處理上也有差異。
坐標軸分類
坐標軸分類
 
 
3.3.2常見坐標軸組合方式
常見二維圖表坐標軸分為X軸(橫軸)和Y軸(縱軸),多用于表示趨勢、排名、比較的數(shù)據(jù)結(jié)構(gòu)。常見搭配是1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。
軸的常見組合方式
軸的常見組合方式
 
在三維圖表里,會多一個Z軸。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
3.3.3坐標軸容易被忽略的設計細節(jié)
  •  
    軸線一般只考慮是否顯示,例如柱狀圖、折線圖等,在有背景網(wǎng)格線的情況下,會隱藏 y 軸線,條形圖則是隱藏 x 軸線,以達到信息降噪,突出視覺重點的目的。
 
  •  
    軸刻度通常不顯示,只有在肉眼無法定位到某個標簽對應的數(shù)據(jù)點時,會顯示刻度線,輔助用戶定位,比如折線圖,或抽樣顯示的柱狀圖。
 
  •  
    網(wǎng)格線用于定位數(shù)據(jù)點的值域范圍,跟隨值域軸的位置單向顯示,柱狀圖采用水平網(wǎng)格,條形圖采用垂直網(wǎng)格。樣式為虛實線的最多,斑馬線由于感知過強,一般不用。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
  •  
    軸標題/單位主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當可視化圖表標題、圖例、軸標簽已經(jīng)能充分表達數(shù)據(jù)含義,無需單獨顯示標題/單位,「如無必要,勿增實體」。
沒有必要就不要多此一舉
沒有必要就不要多此一舉
 
 
  •  
    連續(xù)軸/時間軸進行適當抽樣。連續(xù)軸/時間軸,是由一組前后包含同等差值的等差數(shù)列組成,缺少幾個數(shù)值也能明顯看出中間的對應關(guān)系。當多個標簽在容器內(nèi)全顯示發(fā)生重疊,我們可以利用抽樣顯示的手段來避免這種情況。常見的抽樣方式是等分抽樣:當多個標簽在 x 軸無法完全顯示,優(yōu)先保留首尾標簽,其余標簽按同等步長間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù),能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù),就需要「-1」轉(zhuǎn)成合數(shù)。
   舉個例子:9個標簽,間隔數(shù)是 8,能被 2 或4整除,即分成 2 等分和4等分。8個標簽,間隔數(shù)是        7,無法等分,需要在間隔數(shù)基礎(chǔ)上再「-1」,轉(zhuǎn)成合數(shù) 6 后再等分,此時最后一個標簽顯示在倒      數(shù)第二個數(shù)據(jù)點上。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
  •  
    分類軸是由幾組離散數(shù)據(jù)組成,獨立存在無緊密邏輯關(guān)聯(lián)。若采用抽樣規(guī)則,隱藏一些標簽,用戶對圖表認知就會有困難,違背了數(shù)據(jù)可視化清晰、有效的設計原則。分類軸最佳處理方式是標簽旋轉(zhuǎn) 45 度,若 45 度仍顯示不下,繼續(xù)旋轉(zhuǎn) 90 度。如果 90 度還是放不下就要考慮結(jié)合圖表交互或反轉(zhuǎn)圖表。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
  •  
    分類軸標簽字段有長有短,長文本標簽直接旋轉(zhuǎn)不僅影響美觀,而且也不利于用戶閱讀。如果數(shù)據(jù)量比較少只有 2~4 個,長文本標簽更適合水平展示,顯示不下省略即可;如果數(shù)據(jù)量比較多,就限定字符數(shù)后旋轉(zhuǎn)。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
3.4圖形數(shù)據(jù)
圖形數(shù)據(jù)是圖表中最為明顯的地方,即圖表的核心元素,如折線圖中的折線,柱狀圖中的柱,餅狀圖中的圓。
圖形數(shù)據(jù)的使用規(guī)則:
  •  
    邊界要清晰,不可虛化;
  •  
    多個數(shù)據(jù)同時顯示的時候,要保證每個數(shù)據(jù)都能清晰的看到,可以采用透明度來保證所有數(shù)據(jù)的顯示。
關(guān)于圖形的選擇,第四章會著重介紹。
 
3.5提示信息
提示信息用來標識出圖表中重要點的數(shù)據(jù)信息,相當于一個popover浮窗,鼠標指針在圖形中hover的地方通常就是該點的數(shù)據(jù)信息。需要注意的是:重要信息盡量簡化,只需要展示重要字段。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
3.6水位線
根據(jù)不同產(chǎn)品的使用場景,有的時候會用到閾值,當達到某個閾值后,就會觸發(fā)某種聯(lián)動效果。這個時候就需要有個水位線了,它起到警示的作用。
水位線的表現(xiàn)形式有兩種,實線和虛線,顏色的選取則取決于產(chǎn)品的警告級別。
水位線可以是一個,也可以是多個,視情況而定。
 
3.7圖表范圍
圖表范圍就是時間宏變量,用來切換數(shù)據(jù)的時間區(qū)間,如今天、本周(最近7天)、本月(最近30天)、本年等。
 
四、常見圖形分類及使用場景
圖形種類多種多樣,個個身懷絕技,而設計師則是作為挑選者。想要做好圖表設計,就需要對不同圖形有較為深入的了解,并對數(shù)據(jù)進行正確理解后,與之匹配正確的圖形,用可視化的方式將數(shù)據(jù)表現(xiàn)出來。
大多數(shù)人可能熟悉折線圖、餅狀圖、柱狀圖,但是對其他的圖形可能就不太了解了。本章節(jié)將帶大家了解更多的圖形和對應的特性,以便更好的運用和設計。
常見的圖形可以分為七大類:
趨勢類、比較類、排名類、占比類、流程類、分布類、關(guān)系類。
 
4.1趨勢類圖形
趨勢類圖形指的是對一段時間內(nèi)數(shù)據(jù)的展示,如單個或多個分類數(shù)據(jù)之間的趨勢變化和比較。常見的趨勢圖形有折線圖、柱狀圖、堆積柱狀圖、面積圖、蠟燭圖、瀑布圖等。
4.1.1折線圖
折線圖(Line Chart)常用于顯示數(shù)據(jù)在連續(xù)時間上的趨勢變化。通過折線連接各數(shù)據(jù)點,突出數(shù)據(jù)的上升或下降趨勢,適合用于時間序列數(shù)據(jù)的展示。
折線圖構(gòu)成
折線圖構(gòu)成
 
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.1.2柱狀圖
柱狀圖(Basic Column Chart)用于展示多個分類的數(shù)據(jù)變化和同類別各變量之間的比較。
柱狀圖構(gòu)成
柱狀圖構(gòu)成
 
如例圖,既能展示店鋪每天銷售額所對應的數(shù)據(jù),也能反映出每天份銷售額的對比情況,并能通過圖形能夠快速了解銷售額最多和最少的日期。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
柱狀圖還有個進階用法,就是折柱混合圖。顧名思義,就是折線+柱狀圖的組合。折柱混合圖通常使用在多組數(shù)據(jù)進行對比的情景下,如商場物品銷售數(shù)據(jù)增長或減少,商品價格走勢比較等,它可以非常直觀的展示數(shù)據(jù)與數(shù)據(jù)的比擬,這樣就能一眼查看到不同時間段的數(shù)據(jù)值,通過折線和柱狀的形式展現(xiàn)出來。
如例圖,通過柱狀圖能看出每個月的銷售數(shù)據(jù),而折線圖能體現(xiàn)出利潤率。當鼠標移入對應位置就可以看到詳細數(shù)據(jù)。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
4.1.3堆積柱狀圖
堆積柱狀圖(Stacked Bar Chart)是柱狀圖的變種,可以展示兩個或多個數(shù)據(jù)的變化,以及數(shù)據(jù)之間的綜合比較情況。
堆積柱狀圖構(gòu)成
堆積柱狀圖構(gòu)成
 
如例圖所示,兩個店鋪每月總銷售額用堆積圖展示,在坐標軸上的每個品類都有兩個數(shù)據(jù),可以直觀的展示每個品類的數(shù)據(jù)總量。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.1.4面積圖
面積圖(Area Chart)是折線圖的變種。與折線圖不同的是,其變量數(shù)據(jù)和坐標軸之間有顏色田中,這樣可以更加突出數(shù)據(jù)的變化趨勢,更加直觀的體現(xiàn)量的變化。
面積圖構(gòu)成
面積圖構(gòu)成
 
需要注意的是,填充的顏色要有30%左右的透明度,這樣在展示多組數(shù)據(jù)的時候不會互相遮蓋彼此信息。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.1.5蠟燭圖
蠟燭圖也叫K線圖(K Chart),常用于股市或期貨市場(近期炒股的同學可能看到K線圖心里會一咯噔)。K線是圍繞開盤價、最高價、最低價、收盤價等反映市場趨勢和價格信息的。
蠟燭圖構(gòu)成
蠟燭圖構(gòu)成
 
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.1.6瀑布圖
瀑布圖也叫階梯圖,顧名思義,瀑布圖的形狀像掛在高山上的瀑布流水。瀑布圖也可以呈現(xiàn)隨時間變化的數(shù)據(jù),但不同于堆積柱狀圖的是,瀑布圖能夠重點突出數(shù)據(jù)變化的結(jié)果,以強調(diào)多個特定數(shù)據(jù)之間的變化關(guān)系。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
4.2比較類圖形
比較類圖形主要用于兩個或兩個以上的類別數(shù)據(jù)進行比較。常見的類別比較圖形有柱狀圖、分組柱狀圖、氣泡圖、多條折線圖、子彈圖等。
4.2.1柱狀圖
這里的柱狀圖與前面講的柱狀圖的區(qū)別在于X軸是表現(xiàn)類別的,前面例圖的X軸是表現(xiàn)時間的。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.2.2分組柱狀圖
分組柱狀圖(Grouped Bar Chart)是柱狀圖的延伸,它可以在同一數(shù)軸上展示各個分類下不同分組的數(shù)據(jù)情況。如例圖為三家企業(yè)在產(chǎn)研部、設計部、商務部的人數(shù)對比情況,由此可以清晰的看出企業(yè)丙設計部人數(shù)最少,商務部人數(shù)最多的結(jié)論。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.2.3氣泡圖
氣泡圖(Bubble Chart)是是散點圖的變體,由卡迪爾坐標系(直角坐標系)和大小不一的圓組成,通常每一個氣泡都代表著一組三個維度的數(shù)據(jù)。其中兩個決定了氣泡在笛卡爾坐標系中的位置(即x,y軸上的值),另外一個則通過氣泡的大小來表示。
氣泡圖構(gòu)成
氣泡圖構(gòu)成
 
如例圖,x軸表示季度,y軸表示銷售額,氣泡大小代表產(chǎn)品所占全年銷售額百分比。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.2.4多條折線圖
多條折線圖除了可以表示數(shù)據(jù)隨時間的變化趨勢,還可以展示多組數(shù)據(jù)的對比情況。如例圖所示,圖為某app經(jīng)營情況的分析,在時間維度上對比下載量、注冊量、成交量三組數(shù)據(jù)及變化趨勢。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.2.5子彈圖
子彈圖(Bullet Graph)顧名思義,就是像子彈發(fā)射軌道的圖表。它的數(shù)據(jù)展示類似儀表盤,優(yōu)勢在于可以表達豐富的數(shù)據(jù)信息,且占用的空間相對較小。子彈圖的數(shù)據(jù)值是需要提前設計好的。
子彈圖構(gòu)成
子彈圖構(gòu)成
 
如例圖所示,差、良、優(yōu)和目標值、實際值都是作為動態(tài)數(shù)據(jù)呈現(xiàn)的。相較于餅圖,子彈圖可以更高效的傳遞信息。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
4.3排名類圖形
排名圖形可以為分類數(shù)據(jù)進行排排坐,它可以直觀的展示最大值和最小值。它的特點是“有序”,數(shù)值往往是從高到底依次排列,類似榜單。
4.3.1有序條形圖
有序條形圖主要用于展示各個分類的數(shù)據(jù)排名,它是最常用的排名圖形,因為是線性結(jié)構(gòu),對于微小數(shù)據(jù)間的對比會有很好的易讀性。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.3.2有序柱狀圖
有序柱狀圖和有序條形圖一樣,都可以表現(xiàn)數(shù)據(jù)的排名情況。區(qū)別在于一個是橫向?qū)Ρ葓D,一個是縱向?qū)Ρ葓D。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.4占比類圖形
占比圖形是大家最常見的圖形了,主要用于表現(xiàn)分類數(shù)據(jù)占整體的
百分比情況
。常見的圖形有餅圖、環(huán)形圖、堆積面積圖、矩形樹圖、旭日圖等。
4.4.1餅圖
餅圖(Pie Chart)是展示占比數(shù)據(jù)最最直觀的圖形了,它是通過餅塊的大小來直觀的表示分類的占比。但是餅圖也有一定局限性,即當占比數(shù)值比較接近或者占比分類比較多時,在視覺上就不太容易分辨各個類別的占比情況。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.4.2環(huán)形圖
環(huán)形圖(Donut Chart)的作用和餅圖一樣,但是環(huán)形圖的特點是中間區(qū)域是空的,所以視覺表現(xiàn)上比餅圖要弱一些,中間空心區(qū)域還可以用來放標題、圖標、數(shù)據(jù)等。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.4.3堆積面積圖
堆積面積圖(Stacked Area Chart)就是疊加數(shù)據(jù),不同顏色之間的數(shù)據(jù)并沒有疊加關(guān)系,它的整體色塊面積是數(shù)據(jù)總量,不同的分類數(shù)據(jù)可展示不同的占比情況。如例圖,不僅可以展示全球能源消耗總量,切換百分比模式還能展示不同國家消耗能源的占比情況。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.4.4矩形樹圖
矩形樹圖(Treemap)由馬里蘭大學教授Ben Shneiderman于上個世紀90年代提出,起初是為了找到一種有效了解磁盤空間使用情況的方法。 矩形樹圖適合展現(xiàn)具有層級關(guān)系的數(shù)據(jù),能夠直觀體現(xiàn)同級之間的比較。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
矩形樹圖的好處在于,相比起傳統(tǒng)的樹形結(jié)構(gòu)圖,矩形樹圖能更有效得利用空間,并且擁有展示占比的功能。矩形樹圖的缺點在于,當分類占比太小的時候文本會變得很難排布。相比起分叉樹圖,矩形樹圖的樹形數(shù)據(jù)結(jié)構(gòu)表達的不夠直觀、明確。
4.4.5旭日圖
旭日圖(Sunburst Chart)是一種現(xiàn)代餅圖,它超越傳統(tǒng)的餅圖和環(huán)圖,能表達清晰的層級和歸屬關(guān)系,以父子層次結(jié)構(gòu)來顯示數(shù)據(jù)構(gòu)成情況。旭日圖中,離遠點越近表示級別越高,相鄰兩層中,是內(nèi)層包含外層的關(guān)系。
如例圖,對醫(yī)院進行看病、掛號、取藥的流程,用旭日圖呈現(xiàn)。比如取藥是等號、排隊、拿藥的父級,其中等號占取藥的比重最大。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.5流程類圖形
流程類圖形用來顯示流程流轉(zhuǎn)和流程流量。一般流程都會呈現(xiàn)出多個環(huán)節(jié),每個環(huán)節(jié)之間會有相應的流量關(guān)系,這類圖形可以很好的表示這些關(guān)系。常見的流程類圖形有漏斗圖和桑基圖。
4.5.1漏斗圖
漏斗圖(Funnel Chart)適用于業(yè)務流程
比較規(guī)范
、
周期長
、
環(huán)節(jié)多
流程單向分析,通過漏斗各環(huán)節(jié)業(yè)務數(shù)據(jù)的比較能夠直觀地發(fā)現(xiàn)和說明問題所在的環(huán)節(jié),進而做出決策。漏斗圖用梯形面積表示某個環(huán)節(jié)業(yè)務量與上一個環(huán)節(jié)之間的差異。漏斗圖
從上到下
,有邏輯上的順序關(guān)系,表現(xiàn)了隨著業(yè)務流程的推進業(yè)務目標完成的情況。
漏斗圖總是開始于一個100%的數(shù)量,結(jié)束于一個較小的數(shù)量。在開始和結(jié)束之間由N個流程環(huán)節(jié)組成。每個環(huán)節(jié)用一個梯形來表示,梯形的上底寬度表示當前環(huán)節(jié)的輸入情況,梯形的下底寬度表示當前環(huán)節(jié)的輸出情況,上底與下底之間的差值形象的表現(xiàn)了在當前環(huán)節(jié)業(yè)務量的減小量,當前梯形邊的斜率表現(xiàn)了當前環(huán)節(jié)的減小率。 通過給不同的環(huán)節(jié)標以不同的顏色,可以幫助用戶更好的區(qū)分各個環(huán)節(jié)之間的差異。漏斗圖的所有環(huán)節(jié)的流量都應該使用同一個度量。
漏斗圖構(gòu)成
漏斗圖構(gòu)成
 
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.5.2?;鶊D
?;鶊D (Sankey Diagram),是一種特定類型的流圖,用于描述一組值到另一組值的流向。因為首次使用它的人是一名叫Sankey的愛爾蘭土木工程師,所以就叫?;鶊D。
桑基圖通常應用于能源、材料成分、金融等數(shù)據(jù)的可視化分析。
桑基圖的構(gòu)成
?;鶊D的構(gòu)成
 
如例圖所示,可以清晰的看到,從搜索框直接搜索進入酒店詳情頁的流量是最大的。充分說明了搜索是剛需。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
 
4.6分布類圖形
分布圖形主要用于展示每個數(shù)值在數(shù)據(jù)集中出現(xiàn)的頻次和數(shù)量,常見類型有散點圖、氣泡圖、熱力圖、直方圖、箱型圖、等高線圖等
4.6.1散點圖
散點圖Scatter Chart,也叫 X-Y 圖,它將所有的數(shù)據(jù)以點的形式展現(xiàn)在笛卡爾坐標系上,以顯示變量之間的相互影響程度,點的位置由變量的數(shù)值決定。
例圖展示的是AB兩國男性的身高和體重數(shù)據(jù),通過散點圖中的數(shù)據(jù)點分布情況可看出,B國男性的身高遠大于A國。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.6.2氣泡圖
前面4.2.3里講過單維度數(shù)據(jù)的氣泡圖,這里是多維度的氣泡圖案例。如例圖所示,圖中展示了5個維度的數(shù)據(jù),氣泡的代表地區(qū)類別,氣泡的大小代表人口總數(shù),氣泡顏色代表國家類別,X軸代表人均國內(nèi)生產(chǎn)總值,Y軸代表人均壽命。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
需要注意的是,氣泡圖的數(shù)據(jù)大小容量有限,氣泡太多會使圖表難以閱讀。但是可以通過增加一些交互行為彌補:隱藏一些信息,當鼠標點擊或者懸浮時顯示,或者添加一個選項用于重組或者過濾分組類別。另外,氣泡的大小是映射到面積而不是半徑或者直徑繪制的。因為如果是基于半徑或者直徑的話,圓的大小不僅會呈指數(shù)級變化,而且還會導致視覺誤差。
 
4.6.3熱力圖
熱力圖就是使用冷色到暖色的不同顏色表示數(shù)據(jù)從大到小的權(quán)重,或用同色系顏色的深淺來表示數(shù)據(jù)的多少。熱力圖可以在坐標軸上呈現(xiàn)數(shù)據(jù)的大小分布,也可以在地圖或圖片上使用。
如例圖,杭州實時旅游熱點區(qū)域的熱力圖,顏色越偏紅的區(qū)域人流量越大,顏色越偏藍人流量越小。
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.6.4直方圖
直方圖(Histogram)形狀上看上去好像就是柱狀圖,但是含義卻完全不同。直方圖能夠顯示各組頻數(shù)或數(shù)量分布的情況,易于顯示各組之間頻數(shù)或數(shù)量的差別。通過直方圖還可以觀察和估計哪些數(shù)據(jù)比較集中,異?;蛘吖铝⒌臄?shù)據(jù)分布在何處。
直方圖構(gòu)成
直方圖構(gòu)成
 
如例圖所示,繪制了鉆石的全深比數(shù)據(jù)的統(tǒng)計直方圖,從圖中可以看出在 66 附近有兩個孤立值
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
B端數(shù)據(jù)可視化設計經(jīng)驗分享第四彈:圖表設計
 
 
4.6.5箱型圖
箱形圖(Box Chart)又稱盒須圖、盒式圖或箱線圖,是一種用作顯示一組數(shù)據(jù)分布情況的統(tǒng)計圖。
箱形圖多用于數(shù)值統(tǒng)計,雖然相比于直方圖和密度曲線較原始簡單,但是它不需要占據(jù)過多的畫布空間,空間利用率高,非常適用于比較多組數(shù)據(jù)的分布情況。
 


作者:MoeDesigner
鏈接:https://www.zcool.com.cn/article/ZMTYxOTU3Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識

前端達人

緣起
最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見你,緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設計文章的初衷。
 
慢慢發(fā)現(xiàn)其實分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對設計的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無邊。哈哈哈
 
上面扯多了。我們開始今天的內(nèi)容。今天內(nèi)容分三部分、第一部分內(nèi)容總結(jié)是對我寫的這個系列文章每一篇文章內(nèi)容和核心的小總結(jié)。第二部分這個系列的文章頁算是告一段落了、下一階段我會做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。
 
1、
內(nèi)容總結(jié)
因為在寫這個系列的文章時我加入了很多擴展知識。希望告訴你更多。這里我會把主要的這個系列的知識總結(jié)一下讓你盡量一次看完。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
1.1、登陸頁面
 
最近就在做我們系統(tǒng)的登陸頁面優(yōu)化?;仡^我會寫一個項目總結(jié)給你們看。這里介紹一下B端登陸頁面該怎么去做。其實還挺簡單了。因為現(xiàn)在主流的布局就那幾個。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
登陸頁面:布局分為三種;居左、居右、居中
頁面元素:導航、登錄框、背景(裝飾元素)、互聯(lián)網(wǎng)信息。
導航
高度:68px或48px、文字大小:14(大部分)16(也可以)
登錄框
大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸??梢愿鶕?jù)自己和領(lǐng)導的喜好決定。對還有要承載的內(nèi)容多少。
登錄方式:掃碼、手機號、賬號、第三方
標題切換字號:我喜歡用26px(也要其他的16、/18、/20)
輸入框高度:48px
按鈕文字和高度:16px、和輸入框高度一直就行。
背景
可以是配的插畫(這種最簡單)、一般都是科技風
底部
要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個就不多說了正常排版就行。
 
1.2、篩選
 
篩選相對是很簡單的部分把、因為你直接用規(guī)范里的組件。雖然不會很優(yōu)秀、但是剛重要的是不會出什么錯誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
篩選的意義:定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類
 
篩選類型:基礎(chǔ)篩選組件(就是我們常見的頁面頂部的篩選)、高級篩選(就是那些需要你定義想一想的篩選部分)
 
篩選布局:頂部和左側(cè)
 
篩選樣式:平鋪;折疊;Tab篩選;單側(cè)選擇;表頭;綜合
 
1.3、柵格
 
這里其實還簡單的、首先你要明白柵格在我們的設計里面很重要。你不用當然也可以呀。但是你想要做的更好那就用起來你會有意外的收獲。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
怎么用:直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。
 
注意點:不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對來說是我自己的弱項、在寫當時的文章的時候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設計規(guī)范的。也清楚了自己應該怎么去規(guī)定自己的設計規(guī)范。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
主色確定:常見的方法、1、用自己品牌logo的顏色;2、用行業(yè)色
 
配色確定:我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定。可以去看看。我在自己的工作中色彩的應用就參考了ant Design的色彩應用方式定制的。
 
1.5、字體
 
字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設計一款自己的字體。還有后臺字體規(guī)范的制定
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
中國文字:這里中國文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當做你喝酒吹水的談資。
 
字體規(guī)范:我們大部分的字體會采用黑體、可讀性強、親和、現(xiàn)代、清晰。
 
字號:最新的字體12px、正文、14px、通過+2, +4,+8,+12,+16 的步數(shù)增長規(guī)律
 
行高:通過邏輯得到這樣一個公式:「 行高 = 字號 + n 」,8 作為變量正好同時滿足與 1.5 倍的「 14px & 16px 」常用字號行高保持一致,總體文字間隙穩(wěn)定呼吸,行高空間較一致得出計算公式:「line-height = font size+8」
 
字重(就是字粗):建議使用兩種常規(guī)和加粗(在前端里一般就是400和500)
 
顏色:我是主張帶有色彩傾向的顏色應用的。根據(jù)字體樣式的設計原則,制定了簡易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結(jié)合,文字顯示色彩對比滿足至少1:4.5( AA級別)。且驗證了其中的實用性,共分為亮暗兩種模式,4 個色階。
 
1.6、ICON(圖標)
 
你要統(tǒng)一風格成套的去找參考和應用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個是自己累點、但是可以保障實現(xiàn)效果。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
設計原則:準確、簡單、節(jié)奏、愉悅。
 
設計實戰(zhàn):采用柵格
我是用的阿里巴巴矢量圖庫的設計規(guī)范、因為我要傳到這個平臺應用
 
ICON分類:交互性圖標、裝飾性圖標、說明性圖標
 
1.7、按鈕
 
按鈕我覺得這部分是相對簡單的、也是要做到風格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺的風格、不如圓角的大小其他的倒是沒什么了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
常規(guī)按鈕:次要按鈕、主要按鈕、文字按鈕、圖標按鈕
 
按鈕狀態(tài):可用、禁用、加載、懸浮
 
尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認為尺寸「中」。
 
樣式:各個規(guī)范對按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
 
 
布局:這里分享了兩個概念、古登堡法則、費茨定律、告訴你我們?yōu)槭裁催@么排版。對產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺彈窗是一個很復雜的內(nèi)容、但是也是一個相對很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點開胃小菜。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
彈窗是一個我頭痛的問題因為不太好規(guī)范。但是我還是把這個彈窗系統(tǒng)、在我們的體系中形成了一個小的規(guī)范。感謝領(lǐng)導、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務里我們會采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單:我理解表單就是系統(tǒng)為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(chǎn)品中對我們數(shù)據(jù)做的增、刪、改、查、驗都可以通過表單完成。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
我們在后臺系統(tǒng)中、大部分的場景都會使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設計時要遵循的原則、簡潔明了、清晰高效、適應業(yè)務、即時反饋。
 
表單的構(gòu)成結(jié)構(gòu)、基本都是由、標簽、域、提示、操作按鈕這四個部分構(gòu)成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標簽頁、分步驟。
 
1.10、表格
 
B端設計中,對數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質(zhì)疑了。因為結(jié)構(gòu)簡單、精準高效、數(shù)據(jù)形式豐富。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中,內(nèi)部包含表頭、表體、底欄等。外部包含標題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類型:基礎(chǔ)表格、樹形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式:網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進階的一些知識就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識了。想了解去看更詳細的我的文章11表格設計和12表格優(yōu)化項目實戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個小廠B端設計師、剛好沒有自己平臺的設計規(guī)范。那就去直接用的場的設計規(guī)范。去用沒問題的。大廠那么多的牛逼設計給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
在使用大廠的設計規(guī)范時然后慢慢的積累自己平臺的設計規(guī)范。逐漸的你就會形成一個屬于你們自己平臺業(yè)務的高質(zhì)量設計規(guī)范了。
 
2、計劃
 
這個基礎(chǔ)系列的文章就這樣寫結(jié)束掉吧、希望可以對你的B端設計有所幫助。之后我會寫二個系列的文章、去分享我理解的B端設計。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
第一個系列是B端基礎(chǔ)設計的加強版、B端高手。B端高手是會寫我的實戰(zhàn)里是怎么去做的。其實就是我的設計項目復盤。
 
第二個系列就隨便的去分享一些設計知識。比如哪些什么什么原理呀、什么什么法則呀、在設計里的應用。而且會提出和討論一些設計問題。
 
3、寫在最后
 
分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長、總是要一步一步的來。很快我們會再次相見。我是KING(國王)
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設計知識
 
 
新的開始見.......
 
注解:標題的40000余字也好、50000字也好都是說的我這個系列總計的字數(shù)、因為想讓你們看到。
 
 
 
 
 


作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

深入探究B端產(chǎn)品設計的核心

ui設計分享達人

一、B端用戶需求的深入理解和分析
在當今高度信息化的商業(yè)環(huán)境中,B端產(chǎn)品已成為企業(yè)高效運營和持續(xù)發(fā)展的關(guān)鍵支撐。
這些產(chǎn)品不僅提供工具和服務,更是企業(yè)優(yōu)化流程、提升工作效率和競爭力的有力武器。然而,要打造一款成功的B端產(chǎn)品,關(guān)鍵在于對
B端用戶需求的深入理解與分析。
B端用戶,
如企業(yè)決策者、團隊管理者和專業(yè)人員以及普通員工,他們在日常工作中處理復雜的業(yè)務流程,對數(shù)據(jù)分析、系統(tǒng)整合、安全性等方面有著極高的要求。
這些用戶的獨特需求不僅體現(xiàn)在產(chǎn)品的基本功能上,更涉及到產(chǎn)品的易用性、可擴展性以及服務支持等多個層面。

【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析

前端達人

一、為什么需要數(shù)據(jù)過濾
在B端(Business to Business,即企業(yè)對企業(yè))應用中,表格數(shù)據(jù)過濾功能是一項非常重要的功能。它能夠幫助企業(yè)用戶更方便地管理和查詢表格數(shù)據(jù),提高工作效率和數(shù)據(jù)準確性。因此一個體驗感良好的數(shù)據(jù)篩選功能有助于用戶的任務處理效率。幫助系統(tǒng)更加友好、易用,從而增加用戶的滿意度和使用頻率。
在確定過濾類型之前,首先,需要確定哪些字段需要進行篩選。這需要根據(jù)業(yè)務需求和用戶習慣來確定。例如,在銷售系統(tǒng)中,可能需要對產(chǎn)品名稱、銷售日期、銷售數(shù)量等字段進行過濾;在人力資源系統(tǒng)中,可能需要對員工姓名、部門、職位等字段進行過濾。
 
二、數(shù)據(jù)過濾的類型
根據(jù)確定的過濾條件,需要設計合適的過濾方式。常見的過濾方式包括:1)搜索;2)頁簽導航;3)條件篩選。不同類型的過濾方式對應不同的用戶目標及數(shù)據(jù)特點
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
三、搜索
搜索是一種通過輸入關(guān)鍵詞或短語在大量數(shù)據(jù)中尋找相關(guān)信息的過程。在互聯(lián)網(wǎng)時代,搜索已成為獲取信息的主要途徑之一。通過搜索引擎,用戶可以快速地找到自己需要的內(nèi)容。
3.1 搜索類型
3.1.1 單條件模糊搜索
介紹:用戶在搜索框中輸入一個關(guān)鍵詞,然后搜索引擎返回與該關(guān)鍵詞相關(guān)的結(jié)果。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
  •  
    優(yōu)點
    :簡單易用,用戶只需要輸入一個關(guān)鍵詞即可快速找到相關(guān)信息;
  •  
    缺點
    :搜索方式可能不夠精確,因為用戶可能沒有提供足夠的上下文信息,導致搜索引擎返回的結(jié)果與用戶的期望不符
 
3.1.2 多條件模糊搜索
介紹:指用戶在搜索框中輸入或選擇多個關(guān)鍵詞,然后搜索引擎返回與這些關(guān)鍵詞都相關(guān)的結(jié)果??蛇x擇是后臺配置查詢條件還是用戶配置。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
  •  
    優(yōu)點
    :更加精確,因為用戶提供了更多的上下文信息,可以幫助搜索引擎更好地理解用戶的意圖;
  •  
    缺點
    :需要用戶輸入更多的關(guān)鍵詞,增加了用戶的輸入成本。
 
3.1.3 搜索條件切換
介紹:指用戶在搜索框中輸入一個關(guān)鍵詞后,可以手動切換到另一個關(guān)鍵詞進行搜索。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
  •  
    優(yōu)點
    :靈活性和自由度更高,用戶可以根據(jù)自己的需要隨時切換關(guān)鍵詞進行搜索;
  •  
    缺點
    :需要用戶手動操作,增加了用戶的操作成本。
 
3.2 觸發(fā)方式
3.2.1 實時觸發(fā)
介紹:實時觸發(fā)是指當用戶在搜索框中輸入關(guān)鍵字時,搜索功能會立即進行匹配并返回相關(guān)結(jié)果。這種觸發(fā)方式可以為用戶提供實時的搜索體驗,方便用戶快速找到所需信息。通常需要后端服務器的支持。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
  •  
    優(yōu)點
    :當用戶在搜索框中輸入文字時,搜索功能會立即提供搜索結(jié)果。這種方式可以提供快速反饋,讓用戶更快地找到所需信息。此外,實時觸發(fā)搜索還可以幫助用戶逐步縮小搜索范圍,提高搜索效率。
  •  
    缺點
    :可能會對服務器造成較大的負擔,因為每次用戶輸入都會觸發(fā)一次搜索請求。其次,實時觸發(fā)搜索可能會干擾用戶的輸入過程,因為用戶需要不斷地觀察搜索結(jié)果并根據(jù)結(jié)果進行調(diào)整。
 
3.2.2 手動觸發(fā)
介紹:指用戶需要手動觸發(fā)搜索功能,通常是通過點擊搜索按鈕或按下回車鍵來執(zhí)行搜索操作。這種觸發(fā)方式可以避免用戶在輸入過程中頻繁觸發(fā)搜索,提高用戶體驗
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
  •  
    優(yōu)點
    :用戶需要點擊一個搜索按鈕或使用特定的快捷鍵才能觸發(fā)搜索功能。這種方式可以減少對服務器的負擔,并且不會干擾用戶的輸入過程。
  •  
    缺點
    :可能會讓用戶感到不便,因為他們需要手動觸發(fā)搜索功能。此外,如果用戶忘記觸發(fā)搜索功能,他們可能會浪費時間在輸入過程中。
 
3.3 理解用戶的搜索意圖
提高用戶的搜索效率和滿意度。通過提供相關(guān)的關(guān)鍵詞建議和展示之前的搜索歷史,搜索引擎可以幫助用戶更快地找到所需信息,并減少用戶的搜索時間和成本。此外,這些功能還可以增加用戶的忠誠度和滿意度,因為它們能夠提供更加個性化和智能化的搜索體驗。
3.3.1 關(guān)鍵字聯(lián)想
介紹:用戶在輸入一個關(guān)鍵詞時,搜索引擎能夠自動推薦與該關(guān)鍵詞相關(guān)的其他關(guān)鍵詞,以幫助用戶更快地找到所需信息。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
3.3.2 搜索歷史
介紹:記錄了用戶之前搜索過的關(guān)鍵詞和搜索結(jié)果,以便用戶在以后的搜索中更快地找到之前查找過的信息。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
四、導航
使用場景:標簽切換一般用于和時間、狀態(tài)的流轉(zhuǎn)有關(guān),且沒有交集的數(shù)據(jù)內(nèi)容;主要樣式有基礎(chǔ)、卡片、膠囊等。
 
4.1 頁簽導航(tabs)
通過點擊不同的標簽頁來切換不同頁面或視圖的功能。在許多應用程序中,頁簽導航可以幫助用戶快速地找到自己需要的功能或頁面。例如,在瀏覽器中,頁簽導航可以幫助用戶同時打開多個網(wǎng)頁,并在不同的標簽頁之間進行切換。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
優(yōu)點:
  •  
    直觀易用:頁簽導航簡單明了,用戶可以快速理解并使用
  •  
    節(jié)省空間:頁簽導航可以在有限的屏幕空間內(nèi)展示多個頁面或部分內(nèi)容,提高了頁面的利用率。
便于瀏覽:用戶可以通過頁簽快速切換到不同的頁面或內(nèi)容,提高了瀏覽效率。
 
缺點:
  •  
    導航深度限制:頁簽導航通常只適用于一級或兩級導航,對于多級導航可能會顯得過于復雜。
  •  
    內(nèi)容展示限制:由于頁簽的空間有限,可能無法展示所有需要的內(nèi)容,需要用戶點擊后才能查看全部內(nèi)容。
 
4.2 卡片導航
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
優(yōu)點:
  •  
    內(nèi)容豐富:卡片導航可以展示更多的內(nèi)容和信息,用戶可以通過卡片了解更多詳情
  •  
    直觀性強:卡片導航以視覺化的方式展示內(nèi)容,更加直觀和易于理解
  •  
    交互性強:用戶可以通過滑動或點擊卡片進行操作,增強了交互性和體驗感
缺點:
  •  
    占用空間大:卡片導航需要占用更多的屏幕空間,可能會影響頁面的整體布局和美觀度;
  •  
    操作復雜度較高:對于一些用戶來說,卡片導航的操作可能會比較復雜,需要一定的學習成本
 
五、條件篩選
篩選是一種對搜索結(jié)果進行過濾和排序的過程,以便用戶能夠更快地找到自己需要的信息。篩選可以根據(jù)不同的標準進行,例如相關(guān)性、時間、重要性等。在許多應用程序中,篩選功能可以幫助用戶縮小搜索范圍,提高搜索效率。
5.1 頁面布局
5.1.1 上下布局
特點:篩選條件和表格數(shù)據(jù)分別位于頁面上方和下方,用戶可以逐行查看數(shù)據(jù),同時看到篩選條件。
使用建議:適用于篩選條件較少,且數(shù)據(jù)量較大的情況。用戶可以快速瀏覽數(shù)據(jù),同時方便對篩選條件進行修改。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
5.1.2 左右布局
特點:篩選條件和表格數(shù)據(jù)分別位于頁面左側(cè)和右側(cè),用戶可以同時看到篩選條件和數(shù)據(jù)。
使用建議:適用于篩選條件較多,且數(shù)據(jù)量較小的情況。用戶可以在篩選條件和數(shù)據(jù)之間進行快速切換,提高操作效率。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
5.1.3 浮層(彈窗/抽屜)
特點:僅展示篩選圖標按鈕,以浮層形式呈現(xiàn)??梢栽诋斍绊撁娴纳戏交騻?cè)邊以浮動的形式展示,不會占用太多頁面空間。
使用建議:當頁面的空間利用率要求比較高,非高頻操作場景時可使用浮層的模式,節(jié)省頁面空間。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
5.2 篩選類型
B端表格的篩選類型主要有平鋪式、收折式和下拉式三種:
5.2.1 平鋪式
介紹:平鋪式是將所有篩選項羅列出來平鋪在頁面上,可以兼容多種數(shù)據(jù)格式,如數(shù)字、文本、標簽、枚舉值、布爾值等,包含但不限于日期選擇期、標簽切換、單選框、復選框等多種控件。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
優(yōu)點
  •  
    直觀明了:平鋪式篩選將所有選項平鋪展示,方便用戶快速找到所需選項;
  •  
    易于操作:平鋪式篩選通常采用簡單的點擊或拖拽操作,方便用戶進行篩選。
缺點
  •  
    占用空間較大:平鋪式篩選需要展示所有選項,因此可能會占用較多的頁面空間;
不適合大量選項:如果選項數(shù)量過多,平鋪式篩選可能會顯得擁擠,影響用戶體驗。
使用建議
  •  
    適用于選項數(shù)量適中的情況:平鋪式篩選適合選項數(shù)量適中,且用戶需要直觀看到所有選項的情況;
  •  
    可以結(jié)合其他篩選方式:如果選項數(shù)量過多,可以考慮結(jié)合其他篩選方式,如收折式篩選或表單式篩選。
 
5.2.2 收折式
介紹:收折式篩選通常以收折的狀態(tài)展示篩選條件,只有在用戶觸發(fā)搜索后才會完全展開。一般篩選條件少于6個,可以通過1行或者2行展示篩選項的結(jié)果。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
優(yōu)點
  •  
    節(jié)省空間:收折式篩選可以將不常用的選項折疊起來,節(jié)省頁面空間;
  •  
    易于查找:收折式篩選通常會提供搜索或篩選條件,方便用戶快速找到所需選項。
缺點
  •  
    操作相對復雜:收折式篩選需要用戶展開或折疊選項,操作相對復雜一些;
  •  
    不適合所有場景:如果用戶需要直觀看到所有選項,或者需要快速篩選大量選項,收折式篩選可能不太適合。
使用建議
  •  
    適用于選項數(shù)量較多的情況:收折式篩選適合選項數(shù)量較多,且用戶需要節(jié)省頁面空間的情況;
  •  
    可以結(jié)合其他篩選方式:如果用戶需要直觀看到所有選項,或者需要快速篩選大量選項,可以考慮結(jié)合其他篩選方式,如平鋪式篩選或表單式篩選。
 
5.2.3 表單式
介紹:表單式是在系統(tǒng)中頁面中的篩選區(qū)設置下拉篩選條件,用戶通過下拉選擇篩選條件中的值對數(shù)據(jù)進行篩選操作。當然篩選區(qū)中可能除了下拉選擇之外還有輸入篩選,下拉篩選和數(shù)據(jù)篩選共同組成篩選區(qū)。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
優(yōu)點
  •  
    直觀明了:表格形式的篩選方式可以讓用戶直觀地看到各個字段和對應的數(shù)據(jù),方便用戶進行對比和篩選;
  •  
    操作簡單:用戶可以通過簡單的點擊、輸入等方式進行篩選,操作簡便,提高了篩選效率;
  •  
    靈活性高:表格形式的篩選方式可以支持多種篩選條件和篩選方式,用戶可以根據(jù)自己的需求進行篩選,靈活性較高。
缺點
  •  
    界面擁擠:如果表格中的字段較多,會導致界面擁擠,影響用戶的使用體驗;
  •  
    數(shù)據(jù)量大時篩選性能不佳:對于大量數(shù)據(jù),表格形式的篩選方式可能需要較長時間才能得出結(jié)果,影響篩選效率;
  •  
    不易展示復雜數(shù)據(jù)關(guān)系:表格形式的篩選方式更適合展示簡單的數(shù)據(jù)關(guān)系,對于復雜的數(shù)據(jù)關(guān)系可能難以直觀地展示。
使用建議
  •  
    根據(jù)實際需求選擇篩選方式:在選擇篩選方式時,需要根據(jù)實際需求和數(shù)據(jù)量的大小來選擇適合的篩選方式。對于簡單的篩選需求,可以使用表格形式的篩選方式;對于復雜的篩選需求,可能需要考慮使用其他篩選方式,如條件語句等;
  •  
    優(yōu)化表格布局:為了提高用戶的使用體驗,可以對表格的布局進行優(yōu)化,如對字段進行排序、隱藏不必要的字段等;
  •  
    限制篩選條件數(shù)量:為了提高篩選效率,可以限制用戶可以設置的篩選條件數(shù)量,避免過多的篩選條件導致篩選性能下降。
 
5.2.4 浮層彈出式
介紹:頁面中僅展示篩選按鈕,點擊后以氣泡或抽屜的方式去承載篩選內(nèi)容。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
優(yōu)點
  •  
    用戶友好:浮層式的篩選條件提供了一種直觀的方式來展示篩選選項,用戶可以輕松地查看和選擇,無需在頁面之間切換或變動頁面布局;
  •  
    節(jié)省空間:通過將篩選條件放在浮層中,主頁面可以保持簡潔,不受到過多的干擾元素影響,同時也可以避免篩選條件過多導致的頁面擁擠;
  •  
    靈活性高:浮層式的篩選條件可以方便地調(diào)整和修改,以適應不同的篩選需求和業(yè)務變化。
缺點
  •  
    可能會引起混淆:如果用戶不熟悉這種交互方式,可能會對浮層式篩選條件感到困惑,需要額外的引導和說明;
  •  
    可能會影響用戶體驗:浮層式的篩選條件需要用戶手動關(guān)閉或選擇選項,如果操作不夠便捷或流暢,可能會影響用戶體驗;
  •  
    可能會影響頁面性能:如果篩選條件過多或數(shù)據(jù)量較大,浮層式的篩選條件可能會導致頁面加載速度變慢,影響用戶體驗。
使用建議
  •  
    提供清晰的引導:在應用中使用浮層式的篩選條件時,需要提供清晰的引導和說明,幫助用戶更好地理解和使用;
  •  
    優(yōu)化關(guān)閉和選擇操作:為了提高用戶體驗,需要優(yōu)化篩選條件的關(guān)閉和選擇操作,使其更加便捷和流暢;
  •  
    考慮數(shù)據(jù)量和性能:在應用中使用浮層式的篩選條件時,需要考慮數(shù)據(jù)量和頁面性能等因素,采取相應的優(yōu)化措施。
 
5.2.5 表頭篩選
介紹:位于表格表頭區(qū)域,每一列表頭可做單列篩選,也可多列同時篩選。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
優(yōu)點
  •  
    直觀明了:表頭篩選將篩選條件直接展示在表格的表頭位置,方便用戶直觀看到所有可用的篩選條件;
  •  
    提高效率:表頭篩選可以減少用戶的操作步驟和時間成本,提高篩選效率。
缺點
  •  
    適用范圍有限:表頭篩選通常適用于簡單的單字段篩選或單列篩選,對于多字段或多列的復雜篩選需求可能不太適用;
  •  
    可能影響表格美觀度:在表格中添加多個表頭可能會影響表格的美觀度,需要權(quán)衡設計和用戶體驗之間的平衡。
使用建議
  •  
    適用于簡單篩選需求的情況:表頭篩選適合簡單的單字段或單列的篩選需求,如根據(jù)姓名、性別等進行篩選;
  •  
    可以結(jié)合其他篩選方式:如果用戶需要復雜的篩選需求,可以考慮結(jié)合其他篩選方式,如平鋪式、收折式或表單式等。
 
5.2.6 已選條件
介紹:將已經(jīng)錄入的條件展示在查詢條件的下方,可快速刪除
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
優(yōu)點
  •  
    用戶體驗:顯示已選條件可以幫助用戶更好地理解篩選結(jié)果,提高用戶體驗。用戶可以直觀地看到哪些條件已被選中,從而更好地理解數(shù)據(jù)的篩選結(jié)果;
  •  
    可視化效果:在篩選區(qū)顯示已選條件,可以增強表格的可讀性和可視化效果。篩選條件的顯示可以提供一種直觀的方式,幫助用戶更好地理解數(shù)據(jù)和篩選結(jié)果;
  •  
    篩選靈活性:如果篩選區(qū)顯示已選條件,用戶可以根據(jù)需要輕松地修改或刪除已選條件,提高篩選的靈活性;
  •  
    篩選邏輯清晰度:通過顯示已選條件,用戶可以更好地理解篩選的邏輯。這有助于用戶更好地理解數(shù)據(jù)之間的關(guān)系和關(guān)聯(lián),提高數(shù)據(jù)分析的準確性;
  •  
    篩選操作效率:對于大量數(shù)據(jù)的篩選,顯示已選條件可以幫助用戶更快地定位和調(diào)整篩選條件,提高篩選操作效率。
 
六、優(yōu)化過濾性能
表格過濾是用戶在處理大量數(shù)據(jù)時常用的功能之一。如果過濾性能不佳,用戶需要等待很長時間才能看到結(jié)果,這將嚴重影響用戶體驗。優(yōu)化表格過濾性能可以減少用戶等待時間,提高用戶體驗。
6.1 索引優(yōu)化
通過創(chuàng)建索引來提高查詢過濾的效率。通過創(chuàng)建模版的方式更快地定位到特定的數(shù)據(jù)行,通過創(chuàng)建合適的索引,可以顯著減少查詢過濾所需的時間,提高查詢性能。
6.1.1 查詢條件模版
將常用的查詢方案保存為模版,通過快速切換模版的方式批量替換查詢條件,達到快速查詢的效果,方便用戶快速篩選出所需的數(shù)據(jù)。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
6.1.1 查詢值模版
將常用的查詢方案連同值一起設置為模版,在下次切換查詢方案時,自動根據(jù)預置的值進行自動查詢,查詢結(jié)果保存至瀏覽器,方便下次調(diào)用。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
6.2 緩存機制
介紹:(瀏覽器前端)將已經(jīng)過濾過的數(shù)據(jù)緩存起來,避免重復查詢。
 
6.3 分頁加載
介紹:采用分頁加載的方式,減少一次性加載的數(shù)據(jù)量,提高加載速度。
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
 
七、總結(jié)
【萬字干貨】B端進階|表格數(shù)據(jù)過濾分析
 
 
在本文中,我們探討了B端表格數(shù)據(jù)過濾功能的類型和實現(xiàn)。通過了解用戶需求和使用場景,我們提出了表格數(shù)據(jù)過濾方案。以上方案需要結(jié)合實際場景合理配置和選擇。同時,我們還介紹了表格數(shù)據(jù)過濾的實際案例,以及一些性能優(yōu)化技巧。通過實際應用案例的展示,證明了以上方案的有效性和實用性。
在未來的工作中,我們可以進一步探索表格數(shù)據(jù)過濾功能的擴展和優(yōu)化。例如,可以增加對異步數(shù)據(jù)的支持,提高表格數(shù)據(jù)的實時性;還可以引入機器學習算法,實現(xiàn)智能過濾和推薦功能。此外,我們還可以考慮與其他系統(tǒng)的集成和交互,以實現(xiàn)更廣泛的應用。
總之,B端表格數(shù)據(jù)過濾功能是提高數(shù)據(jù)處理效率和準確性的重要工具。通過不斷優(yōu)化和完善該功能,我們可以更好地滿足用戶需求,提升用戶體驗,為B端業(yè)務的發(fā)展提供有力支持。
 


作者:姚_Yale
鏈接:https://www.zcool.com.cn/article/ZMTYwNTc0OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

解鎖HMI設計規(guī)范

前端達人

1. 前言
車載HMI設計近年來成為一個熱門領(lǐng)域。許多朋友對HMI設計感興趣,卻苦于不知如何入手,不了解HMI設計的基本原則和規(guī)范。有人誤以為HMI設計僅是設計類似iPad的界面,認為可以直接應用移動端或Web端的規(guī)范,這是不正確的。HMI設計擁有其獨特的設計規(guī)范。本文旨在介紹HMI端的設計系統(tǒng)和原則。當然,這些規(guī)范主要用于參考,特殊情況下可以適當打破這些規(guī)則。
 
2. HMI設計原則
2.1. 交互原則
在當前的駕駛環(huán)境中,自動駕駛尚不能完全取代人工駕駛,駕駛者在行車過程中仍需保持對路況的高度注意,因此確保駕駛安全是設計的首要前提。本文將主要介紹視覺部分的設計考量,關(guān)于車載交互的詳細討論將在后續(xù)文章中更新。
解鎖HMI設計規(guī)范
 
 
 
2.2. 視覺原則
在以駕駛安全為前提的設計中,需要確保內(nèi)容的易讀性,目標的易用性,以及界面元素的一致性,從而滿足用戶在全場景下的體驗需求。
解鎖HMI設計規(guī)范
 
 
 
3. HMI設計系統(tǒng)
3.1. 為什么要搭建設計系統(tǒng)
一致性
:設計系統(tǒng)提供了一套統(tǒng)一的視覺和功能組件,確保不同的產(chǎn)品、頁面和功能在視覺表現(xiàn)和用戶體驗上具有高度一致性。這不僅減少了用戶的學習成本,也加強了品牌的整體形象和專業(yè)性。
提高效率
:設計系統(tǒng)中的可重用組件和明確的設計指南可以大大減少設計和開發(fā)的工作量。設計師和開發(fā)者可以快速采用預定義的元素來構(gòu)建新功能或改進現(xiàn)有功能,無需從零開始。這有助于縮短項目時間線,實現(xiàn)產(chǎn)品的快速迭代。
易于維護
:當所有設計元素和代碼都遵循一個統(tǒng)一的系統(tǒng)時,維護和更新變得更加簡單和高效。例如,如果需要更新品牌顏色或修改按鈕樣式,只需在設計系統(tǒng)中進行更改,相關(guān)變更即可自動應用到所有使用這些元素的地方。
提高跨團隊協(xié)作
:設計系統(tǒng)作為一個共享的資源庫,可以幫助不同的團隊成員(如設計師、開發(fā)者、產(chǎn)品經(jīng)理等)更好地協(xié)同工作。一個擁有詳細文檔和標準的系統(tǒng)確保每個團隊成員都能理解和正確使用組件,減少溝通成本和誤解。
適應性和可擴展性
:良好的設計系統(tǒng)具備高度的適應性和可擴展性,能夠隨著公司和產(chǎn)品的發(fā)展而成長。隨著新需求的出現(xiàn),設計系統(tǒng)可以持續(xù)更新和擴展,新的設計元素和組件可以被添加進來,而不會破壞現(xiàn)有的系統(tǒng)結(jié)構(gòu)。
提升用戶體驗
:統(tǒng)一和標準化的用戶界面組件不僅可以加速開發(fā)流程,還可以直接提升最終用戶的體驗。一致的界面和預測性的交互可以幫助用戶更快地適應軟件,提高用戶滿意度。
3.2. 原子設計
談到設計系統(tǒng),我們不得不提原子設計。原子設計是由Brad Frost于2013年提出的一種設計系統(tǒng)方法論,它將界面設計分解為更小的組件,目的是提高工作效率和保持設計一致性。原子設計包括五個層次:原子、分子、組織、模板和頁面。
解鎖HMI設計規(guī)范
 
 
 
原子
:設計中最小的可復用單元,包括顏色、字體、圖標等基礎(chǔ)元素。
解鎖HMI設計規(guī)范
 
 
 
分子
:由原子組合形成的更復雜元素,例如按鈕、輸入框等具有特定功能的組件。
解鎖HMI設計規(guī)范
 
 
 
組織
:由分子和原子構(gòu)成的模塊,承載更復雜的功能和信息結(jié)構(gòu)。
解鎖HMI設計規(guī)范
 
 
 
模板
:將原子和分子組合成的布局框架,定義頁面結(jié)構(gòu)和內(nèi)容區(qū)域的排版。
解鎖HMI設計規(guī)范
 
 
 
頁面
:結(jié)合模板和具體內(nèi)容,形成最終的界面設計。
解鎖HMI設計規(guī)范
 
 
 
接下來步入正題,本文將詳細講述HMI的視覺樣式指南,內(nèi)容包括顏色、布局、排版和圖標。
解鎖HMI設計規(guī)范
 
 
 
4. 顏色
4.1. 顏色對比度
由于駕駛環(huán)境復雜多變,如地下車庫、隧道、陰雨天、陽光刺眼的晴天、白天及夜晚,設計時需考慮不同光照條件下的可讀性。文本與背景色的對比度應滿足特定標準,建議對比度大于7:1,至少應為4.5:1。這些數(shù)字區(qū)間的依據(jù)是什么呢?參考WCAG(網(wǎng)絡內(nèi)容無障礙指南),這些標準旨在為視障人士提供更好的體驗,同時也便于普通人使用。汽車作為面向大眾的產(chǎn)品,應考慮視障用戶的需求。在不佳的使用場景下(如強烈陽光或昏暗環(huán)境中),我們也可能經(jīng)歷暫時性的視覺障礙,難以清晰感知內(nèi)容。
根據(jù)WCAG,對比度應符合AA級與AAA級的標準。AA級要求小文本與背景的對比度至少為4.5:1,大文本與背景的對比度至少為3:1。AAA級則要求小文本與背景的對比度至少為7:1,大文本與背景的對比度至少為4.5:1。
解鎖HMI設計規(guī)范
 
 
 
根據(jù)WCAG,小文本指的是字號在19px以下的粗體文本,或者字號在24px以下的常規(guī)體文本。大文本則是指字號至少為19px且為粗體的文本,或者字號為24px以上的常規(guī)體文本。在HMI設計中,最小文本字號定為20px,字重為常規(guī)。因此,文本與背景的對比度不應低于4.5:1。同時,對比度也不宜過高,因為過高的對比度可能導致閱讀疲勞,降低閱讀效率。在深色背景下,文本與圖形的對比度建議不要超過18:1。您可以通過以下鏈接訪問一個網(wǎng)站,以計算文本與背景的對比度:https://www.siegemedia.com/contrast-ratio#%23272e3b-on-%231868de
解鎖HMI設計規(guī)范
 
 
 
4.2. 顏色分類
HMI設計主流趨勢是采用深色背景,這在夜間或光線較暗的環(huán)境中可以減少屏幕亮度對視野的沖擊,并有效減少陽光及其他光源的反射。在深色背景上,鮮艷的色彩(如紅色、藍色等)更加突出,便于駕駛員快速識別重要信息。在使用深色背景時,應避免大面積使用純白色,以免過度吸引用戶注意力。
然而,隨著屏幕硬件技術(shù)的進步,越來越多的車機系統(tǒng)開始采用淺色背景。這樣做不僅能在保持高對比度的同時有效控制反射和眩光,還確保了淺色背景在各種光線條件下的良好可讀性。由于手機和平板設備普遍采用淺色背景,用戶已習慣此類界面,這一習慣也推動了車機頁面設計向淺色背景的轉(zhuǎn)變。
解鎖HMI設計規(guī)范
 
 
 
在界面設計中,中性色主要用于文字、背景、邊框和分割線,通過中性色的明度差異來營造空間的縱深感。在視覺感知中,明度較高的顏色在Z軸上的位置看起來更高,這有助于區(qū)分不同層次。在深色背景下,應通過調(diào)整白色的透明度而非使用灰色來進行對比和層次區(qū)分。功能色代表特定的信息狀態(tài),需符合用戶對色彩的基本認知,例如:成功用綠色表示、失敗用紅色表示、提醒用黃色表示、鏈接用藍色表示。同時,還需要設定合理的對比度和飽和度,以確保在駕駛環(huán)境下能有效識別這些顏色。
解鎖HMI設計規(guī)范
 
 
 
車機配色應避免大量使用鮮艷的色彩,以免過度吸引用戶的注意力。根據(jù)Munsell Color原理,顏色的飽和度和明度兩個數(shù)值越大,顏色越鮮艷。在車機配色中,我們需要遵循以下兩個規(guī)則:
1.越接近右上角的顏色越鮮艷,應避免使用這類顏色;
2.選色時應關(guān)注飽和度和明度,這兩個數(shù)值之和應盡量小于180(S飽和度 + B明度 ≤ 180)。同時,品牌色的合理應用能有效傳達品牌調(diào)性,但不建議大量使用紅色系作為品牌的功能色。
 
4.3. 大廠顏色規(guī)范
解鎖HMI設計規(guī)范
 
 
解鎖HMI設計規(guī)范
 
 
 
5. 布局
5.1. 屏幕種類與屏幕分辨率
車機的屏幕尺寸與分辨率種類繁多,且車機涵蓋多種屏幕類型,如儀表屏、中控屏、副駕娛樂屏、后排娛樂屏等。接下來介紹幾款熱門車型的屏幕參數(shù)。
小米SU7
儀表屏:7.1英寸
中控屏:16.1英寸、3072x1920
解鎖HMI設計規(guī)范
 
 
 
特斯拉 Model Y
中控屏:15英寸、1920x1080
解鎖HMI設計規(guī)范
 
 
 
問界M7
儀表屏:10.25英寸、1920x720
中控屏:15.6英寸、1920x1080
解鎖HMI設計規(guī)范
 
 
 
蔚來ES6
儀表屏:10.2英寸、1920x532
中控屏:12.8英寸、1728x1888
解鎖HMI設計規(guī)范
 
 
 
小鵬G9
儀表屏:10.25英寸、1920x720
中控屏:14.96英寸、2400x1200
副駕娛樂屏:14.96英寸、2400x1200
解鎖HMI設計規(guī)范
 
 
 
理想L7
儀表屏:4.82英寸、800x166
中控屏:15.7英寸、2880x1620
副駕娛樂屏:15.7英寸、2880x1620
解鎖HMI設計規(guī)范
 
 
 
通過對主要汽車廠商車型的屏幕分辨率進行收集與分析,發(fā)現(xiàn)當前市面上主流的屏幕分辨率比例主要為16:9和8:3,這兩種比例合計覆蓋了72.39%的車型。因此,建議將這兩種比例作為屏幕適配的基準。
解鎖HMI設計規(guī)范
 
 
 
5.2. 柵格系統(tǒng)
布局區(qū)域大于或等于1600dp時,建議使用12柵格系統(tǒng)。布局區(qū)域在720dp到1600dp之間時,建議使用8柵格。而當布局區(qū)域小于720dp時,則建議使用4柵格。
解鎖HMI設計規(guī)范
 
 
 
5.3. 間距規(guī)范
間距可以賦予頁面信息更有節(jié)奏的感覺,從而提升內(nèi)容的可讀性和閱讀效率。通過采用不同的間距,可以有效區(qū)分頁面的組織和內(nèi)容。
在設計師層面:制定間距規(guī)范可以有效減少決策和思考的時間,提高工作效率。
在開發(fā)層面:開發(fā)者不一定能夠準確辨識1dp的差異,但能夠明顯區(qū)分出8dp的差距?;A(chǔ)間距以8dp及其倍數(shù)為增量(例如8dp、16dp、24dp、32dp、48dp等),這樣開發(fā)者無需每次都精確測量,同時也能減少誤差,提高設計稿的還原度。
在用戶層面:具有一致節(jié)奏和韻律的頁面更加美觀。依據(jù)親密性原則合理調(diào)整間距,可以使用戶更加輕松地感知和區(qū)分信息,從而提升用戶體驗。
 
谷歌Android Auto的布局間距采用8dp作為主要增量,而一些較小的組件則采用4dp作為增量。間距規(guī)范共設定了九種數(shù)值,分別為P0至P8。
解鎖HMI設計規(guī)范
 
 
 
小tips:為了更好地對齊并留出足夠的間距,較小的組件可以使用4dp和12dp的間距,但需謹慎使用。對于信息較少的頁面(如缺省頁、登錄頁等),使用96dp的間距可能無法很好地滿足留白需求,此時可以考慮使用120dp、160dp或200dp等其他間距數(shù)值。細心的朋友可能會注意到,在以8dp為基準單位定義間距時,40dp和56dp這兩個數(shù)值并未包括在內(nèi),盡管它們都是8的倍數(shù)。例如,16dp是8dp的2倍,間距變化較為明顯。然而,將56dp與64dp進行比較時,64dp僅比56dp大1.4倍,兩者間的差異相對較小。設計師在定義間距規(guī)范時需要遵循倍數(shù)規(guī)則,同時也應考慮頁面的美觀和用戶體驗,避免過于呆板地遵守規(guī)則。
定義間距沒有絕對的標準,主要取決于最小單位,如4dp、5dp、6dp、8dp等,具體選擇哪個取決于產(chǎn)品的定位和內(nèi)容的形式。重要的是,所有間距需要基于最小單位并以倍數(shù)的形式規(guī)律排列,以保證元素間有良好的節(jié)奏感。
 
6. 排版
文字是界面設計中非常重要的信息元素,其字體選擇、字階、字重、顏色及行高都是影響視覺可讀性和閱讀效率的關(guān)鍵因素。對于字體的選擇,建議在中文排版中使用思源黑體,而英文則使用Roboto。在中英文混排的情況下,應統(tǒng)一使用系統(tǒng)中文字體;在純英文排版時,則統(tǒng)一使用系統(tǒng)的英文專用字體。
6.1. 字階
字階在界面設計中用于區(qū)分內(nèi)容的主次關(guān)系,合理的字階應用決定了內(nèi)容的節(jié)奏和秩序。為了構(gòu)建穩(wěn)定且具有良好可讀性的字階設計,根據(jù)IDX & 同濟(2020)百度Apollo中控視覺基礎(chǔ)研究項目、谷歌Android Auto和華為車機UI設計規(guī)范的研究成果,我們可以發(fā)現(xiàn)字號通常以4的倍數(shù)遞增,且最小字號不應小于20(標簽類輔助文案應謹慎使用),正文字號最小為24。文本的主副層級應通過4至8的字號差距來區(qū)分。對于需要用戶閱讀和處理的重要信息,每個段落的文字數(shù)量不應超過20字,以確保用戶可以在2秒內(nèi)閱讀完畢(700字/1分鐘)
解鎖HMI設計規(guī)范
 
 
解鎖HMI設計規(guī)范
 
 
 
6.2. 字重
對于需要用戶關(guān)注的文本信息,可以通過調(diào)整字重來突出內(nèi)容。建議使用Regular或Medium字重,這樣的字重使文本看起來更清晰和舒適。相比之下,更粗的字體不易辨認,可能會影響閱讀速度,導致駕駛員分心,同時也可能引起視覺疲勞。
解鎖HMI設計規(guī)范
 
 
 
6.3. 行高
行高是指上邊框、下邊框加上字號高度的總和,可以想象成一個包裹在字體外面的透明盒子。行高主要針對多行文本;對于單行文本,使用默認的Auto行高即可。在設計頁面時,由于文字會有不同的字號構(gòu)成,便于閱讀的考慮通常會設定適當?shù)男懈?。不同的行高對文字的易讀性影響較大。
文本的行高一般設置為字號的120%-150%,然而由于字階規(guī)范中包含多個字號,不易確定具體每個字號應使用120%還是150%的行高。行高的具體比例與字號密切相關(guān):字號越小,建議的行高比例越大;反之,字號越大,折行的概率通常越小。
根據(jù)Ant Design的經(jīng)驗,行高可以設置為字號加8。雖然這種動態(tài)變化的字號與固定加8的方法看起來可能顯得死板,實際上它非常有效。例如,20px的字號加8等于28px行高,這是字號的1.4倍;56px字號加8則為64px行高,約是字號的1.14倍,符合‘字號越小,行高越大’的原則。這樣的規(guī)范使得設計師和開發(fā)者可以更方便地調(diào)整行高。
解鎖HMI設計規(guī)范
 
 
6.4. 字色
為保證普通文本在黑白背景下的清晰可讀,根據(jù)WCAG的AA級與AAA級標準,文本與背景的對比度應設定在4.5:1至7:1之間。
在深色背景上,建議通過調(diào)整純白色文本的透明度來創(chuàng)建一致且強烈的視覺層次結(jié)構(gòu),而不是使用純灰色。根據(jù)IDX & 同濟 (2020) 百度Apollo中控視覺基礎(chǔ)研究項目、谷歌Android Auto和華為車機UI設計規(guī)范,建議設置一級文本的透明度為100%-90%,二級文本的透明度為70%-60%,三級文本的透明度為40%-30%。
 

藍藍設計(m.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設計服務公司軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件UI界面設計、能源及監(jiān)控軟件UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)



作者:設計師Ksss
鏈接:https://www.zcool.com.cn/article/ZMTYxOTQ5Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔