手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁

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

ui設(shè)計(jì)分享達(dá)人

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

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

前端達(dá)人

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

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

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

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



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

解鎖HMI設(shè)計(jì)規(guī)范

前端達(dá)人

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

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

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

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



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

設(shè)計(jì)師必備思維模型

前端達(dá)人

設(shè)計(jì)師應(yīng)該具備的思維模型
數(shù)據(jù)思維
設(shè)計(jì)思維
用戶思維
產(chǎn)品思維
如何提升思維
設(shè)計(jì)師在職業(yè)發(fā)展中應(yīng)具備多種思維模型，包括數(shù)據(jù)思維、設(shè)計(jì)思維、用戶思維，商業(yè)思維和產(chǎn)品思維。這些思維模型有助于提升設(shè)計(jì)師的專業(yè)能力和解決復(fù)雜問題的能力。
設(shè)計(jì)師必備思維模型
 
 
 
數(shù)據(jù)思維：在當(dāng)前競爭激烈的市場環(huán)境下，數(shù)據(jù)思維對于設(shè)計(jì)師尤為重要。它可以幫助設(shè)計(jì)師在眾多同行中脫穎而出。數(shù)據(jù)思維不僅是為了獲取數(shù)據(jù)，更重要的是利用數(shù)據(jù)來驗(yàn)證商業(yè)價(jià)值，指導(dǎo)設(shè)計(jì)策略，從而賦能商業(yè)價(jià)值。
 
設(shè)計(jì)思維：設(shè)計(jì)思維模型對于設(shè)計(jì)師至關(guān)重要，它包括了解基礎(chǔ)設(shè)計(jì)規(guī)范、常用設(shè)計(jì)原則、設(shè)計(jì)的實(shí)用性以及對落地負(fù)責(zé)的態(tài)度。設(shè)計(jì)思維還包括對主流設(shè)計(jì)趨勢和手法的把握。
 
用戶思維：用戶思維要求設(shè)計(jì)師從用戶的環(huán)境和場景出發(fā)，進(jìn)行深入的用戶洞察。用戶洞察可以通過三部曲來進(jìn)行：理解用戶需求、分析用戶行為、預(yù)測用戶趨勢。
 
商業(yè)思維：商業(yè)思維模型對設(shè)計(jì)師而言同樣不可或缺。它要求設(shè)計(jì)師不僅熟知商業(yè)基礎(chǔ)知識，還要掌握常用的商業(yè)策略與原則。設(shè)計(jì)師需深入理解商業(yè)目標(biāo)的實(shí)用性，并對商業(yè)成果的落地負(fù)責(zé)。
 
產(chǎn)品思維：產(chǎn)品思維涉及到對商業(yè)設(shè)計(jì)的理解，包括如何做出符合市場需求的商業(yè)設(shè)計(jì)。設(shè)計(jì)師需要了解什么是好的商業(yè)設(shè)計(jì)，并掌握商業(yè)設(shè)計(jì)的步驟。
 
設(shè)計(jì)師需要掌握的思維模型-數(shù)據(jù)思維
為了提升數(shù)據(jù)思維能力，設(shè)計(jì)師可以采用推理設(shè)計(jì)模型和溯因模型（5W模型）。這些模型有助于提高設(shè)計(jì)思維的縝密度和深度。
 
北極星指標(biāo)是公司在當(dāng)前階段最重要的唯一指標(biāo)，它有助于公司聚焦于最重要的問題，提升團(tuán)隊(duì)凝聚力，并鼓勵實(shí)驗(yàn)文化。北極星指標(biāo)的設(shè)定需要考慮公司的長期價(jià)值和不同發(fā)展階段的重點(diǎn)。
設(shè)計(jì)師必備思維模型
 
 
設(shè)計(jì)師常用的數(shù)據(jù)指標(biāo)模型包括HEART指標(biāo)、GSM指標(biāo)、海盜指標(biāo)（AARRR模型）和NPS指標(biāo)。這些指標(biāo)模型有各自的優(yōu)缺點(diǎn)，但北極星指標(biāo)因其重要性而被特別推薦。設(shè)計(jì)師在實(shí)際工作中，可以將北極星指標(biāo)根據(jù)不同場景進(jìn)行分解，以設(shè)定具體工作目標(biāo)。
 
數(shù)據(jù)分析方法多樣，包括使用第三方工具、數(shù)據(jù)埋點(diǎn)、問卷調(diào)研、內(nèi)部行為分析工具和百度指數(shù)等。數(shù)據(jù)埋點(diǎn)需要明確要追蹤的事件，并與數(shù)據(jù)分析師或前端工程師合作。問卷調(diào)研可以幫助收集用戶的詳細(xì)信息，而百度指數(shù)可以提供競品的用戶畫像。
產(chǎn)品設(shè)計(jì)驅(qū)動的增長可以通過四步閉環(huán)方法實(shí)現(xiàn)：確定指標(biāo)、提出假設(shè)、進(jìn)行分解和實(shí)驗(yàn)。這有助于設(shè)計(jì)師系統(tǒng)地優(yōu)化產(chǎn)品，實(shí)現(xiàn)數(shù)據(jù)的持續(xù)提升。
設(shè)計(jì)師必備思維模型
 
 
通過上述方法，設(shè)計(jì)師可以更好地理解用戶、市場和業(yè)務(wù)，從而提升設(shè)計(jì)質(zhì)量，實(shí)現(xiàn)個人和產(chǎn)品的共同成長。
 
提高設(shè)計(jì)思維的縝密度和深度，設(shè)計(jì)師可以采用推理設(shè)計(jì)模型和溯因模型（5W模型）。
推理設(shè)計(jì)模型：
- 目的：推理設(shè)計(jì)模型的核心是滿足人的需求，通過推理過程產(chǎn)生多種解決方案。
- 組成部分：
- 形態(tài)：產(chǎn)品的基本外觀或互聯(lián)網(wǎng)產(chǎn)品的品牌調(diào)性。
- 屬性：決定產(chǎn)品形態(tài)的特定屬性或種類。
- 功能：產(chǎn)品表達(dá)的目的與用途，受人的意向、喜好、目標(biāo)等因素影響。
- 需求：產(chǎn)品滿足的用戶需求。
- 價(jià)值：產(chǎn)品創(chuàng)造的價(jià)值。
- 聯(lián)系：產(chǎn)品使用受特定環(huán)境影響，屬性客觀而功能主觀，需求和價(jià)值基于功能滿足。
- 注意點(diǎn)：設(shè)計(jì)需要直覺和創(chuàng)造力，同時(shí)考慮設(shè)計(jì)場景。
設(shè)計(jì)師必備思維模型
 
 
溯因模型（5W模型）：
- 定義：溯因推理是一種根據(jù)現(xiàn)象特征推測其原因的信息加工方式。
- 例子：通過連續(xù)提問“為什么”來找到問題的根本原因，如豐田汽車公司的5WHY法。
- 作用：從結(jié)果出發(fā)，通過層層提問找到并解決根本問題。
設(shè)計(jì)師必備思維模型
 
 
 
設(shè)計(jì)師需要掌握的思維模型-設(shè)計(jì)思維
 
設(shè)計(jì)領(lǐng)域中，經(jīng)驗(yàn)豐富的設(shè)計(jì)師會逐漸意識到，優(yōu)秀的設(shè)計(jì)既需要藝術(shù)的直覺和創(chuàng)造性，也需要科學(xué)的嚴(yán)謹(jǐn)和系統(tǒng)性。這種理念可以被重新表述為：
 
隨著設(shè)計(jì)實(shí)踐的深入，設(shè)計(jì)師們會發(fā)現(xiàn)，設(shè)計(jì)工作不僅僅依賴于創(chuàng)意和審美（即“藝術(shù)”的一面），同樣需要依賴于理性的分析和科學(xué)的方法（即“科學(xué)”的一面）。藝術(shù)性讓設(shè)計(jì)作品具有吸引力和表現(xiàn)力，而科學(xué)性則確保設(shè)計(jì)解決方案的實(shí)用性、邏輯性和可行性。設(shè)計(jì)師在追求視覺美感的同時(shí)，也必須關(guān)注設(shè)計(jì)如何滿足用戶需求和商業(yè)目標(biāo)，實(shí)現(xiàn)三者之間的和諧平衡。
 
因此，設(shè)計(jì)師不僅要專注于設(shè)計(jì)的藝術(shù)性，即那些涉及創(chuàng)意、美學(xué)和情感表達(dá)的方面，同樣要關(guān)注設(shè)計(jì)的科學(xué)性，這包括采用系統(tǒng)化的問題解決方法、基于用戶研究和數(shù)據(jù)分析的決策過程，以及對設(shè)計(jì)在整個產(chǎn)品開發(fā)和市場策略中角色的深入理解。簡而言之，設(shè)計(jì)師的工作是將藝術(shù)的靈感與科學(xué)的分析相結(jié)合，創(chuàng)造出既美觀又實(shí)用的設(shè)計(jì)作品。
 
設(shè)計(jì)思維，作為設(shè)計(jì)師專業(yè)成長的基石，融合了審美、創(chuàng)造力、用戶需求理解、設(shè)計(jì)實(shí)現(xiàn)以及對新趨勢的敏銳洞察。這一思維模式不僅要求設(shè)計(jì)師掌握基礎(chǔ)的設(shè)計(jì)技能，更要求他們具備全局性的視野和解決問題的能力。
一、理解設(shè)計(jì)規(guī)范是設(shè)計(jì)思維的首要任務(wù)。設(shè)計(jì)師需要深入了解不同平臺的設(shè)計(jì)規(guī)范和原則，如蘋果的界面設(shè)計(jì)準(zhǔn)則、谷歌的Material Design理念等。這些規(guī)范為設(shè)計(jì)師提供了清晰的設(shè)計(jì)方向，確保設(shè)計(jì)作品的一致性和專業(yè)性。通過遵循這些規(guī)范，設(shè)計(jì)師能夠減少設(shè)計(jì)中的不確定性和誤解，提高設(shè)計(jì)的效率和質(zhì)量。
設(shè)計(jì)師必備思維模型
 
 
二、應(yīng)用設(shè)計(jì)原則是設(shè)計(jì)思維的關(guān)鍵環(huán)節(jié)。設(shè)計(jì)原則如格式塔原理等，為設(shè)計(jì)師提供了有效的視覺排版方法。設(shè)計(jì)師需要運(yùn)用這些原則，通過合理的布局、色彩搭配和字體選擇，使設(shè)計(jì)作品更加美觀、易讀和易于理解。同時(shí)，設(shè)計(jì)師還需要關(guān)注設(shè)計(jì)的實(shí)用性和用戶體驗(yàn)，確保設(shè)計(jì)作品能夠滿足用戶的需求和期望。
設(shè)計(jì)師必備思維模型
 
 
三、重視實(shí)用性是設(shè)計(jì)思維的核心要求。設(shè)計(jì)不應(yīng)僅僅追求美觀，更應(yīng)服務(wù)于用戶的實(shí)際需求。設(shè)計(jì)師需要深入了解用戶的需求和痛點(diǎn)，通過設(shè)計(jì)來解決他們的問題。例如，設(shè)計(jì)師可以通過優(yōu)化操作流程、提高界面交互的便捷性等方式，提升用戶的使用體驗(yàn)。實(shí)用性是設(shè)計(jì)作品能否得到用戶認(rèn)可的關(guān)鍵，因此設(shè)計(jì)師需要時(shí)刻關(guān)注用戶的需求反饋，不斷優(yōu)化設(shè)計(jì)作品。
設(shè)計(jì)師必備思維模型
 
 
四，對設(shè)計(jì)落地負(fù)責(zé)是設(shè)計(jì)思維的重要體現(xiàn)。設(shè)計(jì)師不僅要關(guān)注設(shè)計(jì)的創(chuàng)意和美感，更要關(guān)注設(shè)計(jì)從概念到實(shí)現(xiàn)的全過程。設(shè)計(jì)師需要與開發(fā)團(tuán)隊(duì)緊密合作，確保設(shè)計(jì)的可行性和可實(shí)現(xiàn)性。同時(shí)，設(shè)計(jì)師還需要關(guān)注設(shè)計(jì)的細(xì)節(jié)和規(guī)范，確保設(shè)計(jì)作品在實(shí)際應(yīng)用中能夠達(dá)到預(yù)期的效果。這種對設(shè)計(jì)落地的責(zé)任感有助于提升設(shè)計(jì)師的綜合素質(zhì)和團(tuán)隊(duì)協(xié)作能力。
設(shè)計(jì)師必備思維模型
 
 
五，把握設(shè)計(jì)趨勢是設(shè)計(jì)思維的重要組成部分。隨著科技的進(jìn)步和審美觀念的變化，設(shè)計(jì)手法和風(fēng)格也在不斷演變。設(shè)計(jì)師需要時(shí)刻關(guān)注新的設(shè)計(jì)趨勢和風(fēng)格，如手繪風(fēng)格、分形藝術(shù)、柔光風(fēng)格和紋理風(fēng)格等。將這些新元素融入設(shè)計(jì)中，可以使作品更具時(shí)代感和創(chuàng)新性。同時(shí)，設(shè)計(jì)師還需要保持對新技術(shù)的敏感度和探索精神，不斷嘗試新的設(shè)計(jì)方法和工具，提升設(shè)計(jì)的效率和品質(zhì)。
設(shè)計(jì)師必備思維模型
 
 
六、認(rèn)識設(shè)計(jì)的全局性是設(shè)計(jì)思維的升華。設(shè)計(jì)不僅僅是界面或外觀的呈現(xiàn)，更是產(chǎn)品體驗(yàn)的一部分。設(shè)計(jì)師需要理解產(chǎn)品設(shè)計(jì)背后的整體邏輯，包括框架層、結(jié)構(gòu)層、戰(zhàn)略層等。通過深入理解產(chǎn)品的整體架構(gòu)和用戶需求，設(shè)計(jì)師可以創(chuàng)造出更符合產(chǎn)品戰(zhàn)略的設(shè)計(jì)作品，提升產(chǎn)品的整體競爭力。同時(shí)，設(shè)計(jì)師還需要關(guān)注行業(yè)動態(tài)和市場變化，了解行業(yè)趨勢和用戶需求的變化趨勢，為未來的設(shè)計(jì)創(chuàng)新提供有力支持。
設(shè)計(jì)師必備思維模型
 
 
設(shè)計(jì)師需要掌握的思維模型-用戶思維
用戶思維是設(shè)計(jì)師在設(shè)計(jì)過程中必須具備的一種核心思維模式，它要求設(shè)計(jì)師從用戶的角度出發(fā)，深入理解和滿足用戶的需求。用戶思維不僅是一種理念，更是一種實(shí)踐方法，它涉及到對用戶環(huán)境的深入洞察、對用戶行為的細(xì)致觀察、以及對用戶心理的同理心理解。
 
用戶環(huán)境的理解是用戶思維的起點(diǎn)。設(shè)計(jì)師的工作環(huán)境往往與用戶實(shí)際使用環(huán)境存在差異，這種差異可能體現(xiàn)在設(shè)備的多樣性、操作系統(tǒng)的不同、屏幕尺寸和分辨率的差異，以及用戶所處的物理環(huán)境（如室內(nèi)、室外、網(wǎng)絡(luò)條件等）。設(shè)計(jì)師需要超越自己的工作環(huán)境，真正站在用戶的立場上，考慮他們在使用產(chǎn)品時(shí)可能遇到的各種情況。
 
換位思考是用戶思維的重要實(shí)踐方式。設(shè)計(jì)師需要將自己置于用戶的情境中，用普通用戶的視角去審視產(chǎn)品，理解用戶的情緒和需求。這種換位思考的能力可以通過多種方式培養(yǎng)，如使用用戶使用的設(shè)備、參與用戶的日常活動、傾聽用戶的聲音等。
設(shè)計(jì)師必備思維模型
 
 
場景思維是用戶思維的另一個關(guān)鍵組成部分。設(shè)計(jì)師
需要理解用戶在不同場景下的行為和心理狀態(tài)，如購買行為中的“認(rèn)知、搜索、判斷、下單、查看”等環(huán)節(jié)。通過深入分析用戶在各個環(huán)節(jié)的需求和問題，設(shè)計(jì)師可以找到設(shè)計(jì)撬動點(diǎn)，優(yōu)化用戶體驗(yàn)。
 
時(shí)間維度的考慮也是場景思維中的重要方面。設(shè)計(jì)師需要關(guān)注用戶在完成任務(wù)的整個過程中的行為變化，從用戶接觸產(chǎn)品的第一時(shí)間開始，一直到用戶完成目標(biāo)后的反饋和分享。這種全程的視角有助于設(shè)計(jì)師發(fā)現(xiàn)并解決用戶在整個使用過程中可能遇到的問題。
設(shè)計(jì)師必備思維模型
 
 
在實(shí)際操作中，設(shè)計(jì)師可以通過以下方式提升用戶思維：
 
1. 使用不同設(shè)備：設(shè)計(jì)師應(yīng)同時(shí)使用蘋果和安卓設(shè)備，體驗(yàn)不同系統(tǒng)的設(shè)計(jì)差異，發(fā)現(xiàn)設(shè)計(jì)中的問題。
2. 深入用戶場景：通過實(shí)地調(diào)研、用戶訪談等方式，深入了解用戶在實(shí)際使用中的行為和需求。
3. 傾聽用戶聲音：定期收集和分析用戶的反饋，理解用戶的真實(shí)想法和需求。
4. 全程跟蹤用戶行為：從用戶接觸產(chǎn)品的第一時(shí)間起，全程跟蹤和分析用戶的行為路徑，發(fā)現(xiàn)設(shè)計(jì)中的斷點(diǎn)和痛點(diǎn)。
設(shè)計(jì)師必備思維模型
 
 
用戶思維是設(shè)計(jì)師在設(shè)計(jì)過程中必須具備的一種核心思維模式，它要求設(shè)計(jì)師從用戶的角度出發(fā)，深入理解和滿足用戶的需求。用戶思維不僅是一種理念，更是一種實(shí)踐方法，它涉及到對用戶環(huán)境的深入洞察、對用戶行為的細(xì)致觀察、以及對用戶心理的同理心理解。
 
用戶環(huán)境的理解是用戶思維的起點(diǎn)。設(shè)計(jì)師的工作環(huán)境往往與用戶實(shí)際使用環(huán)境存在差異，這種差異可能體現(xiàn)在設(shè)備的多樣性、操作系統(tǒng)的不同、屏幕尺寸和分辨率的差異，以及用戶所處的物理環(huán)境（如室內(nèi)、室外、網(wǎng)絡(luò)條件等）。設(shè)計(jì)師需要超越自己的工作環(huán)境，真正站在用戶的立場上，考慮他們在使用產(chǎn)品時(shí)可能遇到的各種情況。
 
換位思考是用戶思維的重要實(shí)踐方式。設(shè)計(jì)師需要將自己置于用戶的情境中，用普通用戶的視角去審視產(chǎn)品，理解用戶情緒和需求。例如，支付寶提倡管理層傾聽用戶聲音，以真正解決用戶問題。
 
場景思維是用戶思維的另一個關(guān)鍵組成部分。設(shè)計(jì)師需理解用戶從哪里來，要到哪里去，關(guān)注用戶在每個環(huán)節(jié)的體驗(yàn)。場景思維帶有時(shí)間維度，包括用戶在購買前、購買中和購買后的行為和心理變化。
 
設(shè)計(jì)師必備思維模型
 
 
設(shè)計(jì)師需要掌握的思維模型-商業(yè)思維
商業(yè)思維是設(shè)計(jì)師在互聯(lián)網(wǎng)公司工作時(shí)必須具備的另一種核心思維模式。設(shè)計(jì)師不僅是藝術(shù)家，更是商業(yè)目標(biāo)的實(shí)現(xiàn)者。商業(yè)思維要求設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)，不僅要考慮用戶需求，還要考慮如何通過設(shè)計(jì)實(shí)現(xiàn)商業(yè)價(jià)值的增長。
 
好的商業(yè)設(shè)計(jì)通常具備以下特點(diǎn)：
 
1. 獲得設(shè)計(jì)大獎：如無印良品海報(bào)、德國紅點(diǎn)設(shè)計(jì)大獎、Apple Watch等。
2. 符合好的設(shè)計(jì)原則：遵循Dieter Rams的“好設(shè)計(jì)的10個原則”。
3. 好用且銷量高：如蘋果系列產(chǎn)品和戴森產(chǎn)品，既獲得設(shè)計(jì)獎項(xiàng)，也有良好的市場反饋。
設(shè)計(jì)師必備思維模型
 
 
進(jìn)行商業(yè)設(shè)計(jì)的三個步驟：
 
1. 了解商業(yè)目標(biāo)：與產(chǎn)品經(jīng)理或運(yùn)營溝通，明確產(chǎn)品的商業(yè)目標(biāo)。
2. 以商業(yè)目標(biāo)為前提做設(shè)計(jì)：根據(jù)商業(yè)目標(biāo)進(jìn)行設(shè)計(jì)思考，找到設(shè)計(jì)與商業(yè)之間的平衡點(diǎn)。
3. 設(shè)計(jì)判斷和驗(yàn)證：通過數(shù)據(jù)、需求方和用戶反饋驗(yàn)證設(shè)計(jì)的有效性。
 
設(shè)計(jì)師應(yīng)掌握商業(yè)思維，通過系統(tǒng)化的方法和清晰的設(shè)計(jì)思路，提升個人影響力，驅(qū)動產(chǎn)品創(chuàng)新，實(shí)現(xiàn)商業(yè)價(jià)值的增長。
設(shè)計(jì)師必備思維模型
 
 
設(shè)計(jì)師需要掌握的思維模型-產(chǎn)品思維
設(shè)計(jì)師在現(xiàn)代商業(yè)環(huán)境中，不僅要具備良好的審美和創(chuàng)意能力，還必須擁有產(chǎn)品思維。產(chǎn)品思維是指設(shè)計(jì)師能夠從產(chǎn)品的角度出發(fā)，理解用戶需求、市場趨勢和商業(yè)目標(biāo)，從而創(chuàng)造出既符合用戶期望又具有商業(yè)價(jià)值的設(shè)計(jì)作品。
一、用戶洞察：設(shè)計(jì)師的首要任務(wù)
產(chǎn)品思維的第一步是深入理解用戶。設(shè)計(jì)師需要通過用戶畫像、用戶訪談、問卷調(diào)查等方法，收集用戶的詳細(xì)信息，包括他們的行為習(xí)慣、偏好、痛點(diǎn)和需求。例如，通過用戶畫像，設(shè)計(jì)師可以構(gòu)建起用戶的立體形象，從而在設(shè)計(jì)中有更強(qiáng)的代入感和同理心。
設(shè)計(jì)師必備思維模型
 
 
 
二、市場趨勢：把握行業(yè)發(fā)展脈絡(luò)
了解市場趨勢對于設(shè)計(jì)師同樣重要。設(shè)計(jì)師應(yīng)關(guān)注行業(yè)報(bào)告、競品分析和市場動態(tài)，以便把握設(shè)計(jì)方向和創(chuàng)新點(diǎn)。例如，通過分析競品，設(shè)計(jì)師可以發(fā)現(xiàn)行業(yè)內(nèi)的通用設(shè)計(jì)模式和潛在的創(chuàng)新機(jī)會。
三、商業(yè)目標(biāo)：設(shè)計(jì)服務(wù)于商業(yè)
設(shè)計(jì)師需要明確設(shè)計(jì)作品的商業(yè)目標(biāo)。這包括提高用戶轉(zhuǎn)化率、增加用戶粘性、提升品牌形象等。設(shè)計(jì)師應(yīng)與產(chǎn)品經(jīng)理和市場團(tuán)隊(duì)緊密合作，確保設(shè)計(jì)方案能夠支持并推動商業(yè)目標(biāo)的實(shí)現(xiàn)。
設(shè)計(jì)師必備思維模型
 
 
 
四、用戶體驗(yàn)地圖：梳理用戶旅程
用戶體驗(yàn)地圖是設(shè)計(jì)師梳理用戶旅程和發(fā)現(xiàn)設(shè)計(jì)機(jī)會的有力工具。通過繪制用戶與產(chǎn)品交互的全過程，設(shè)計(jì)師可以識別出用戶在不同階段的感受、想法和痛點(diǎn)，從而找到改進(jìn)產(chǎn)品體驗(yàn)的機(jī)會。
五、設(shè)計(jì)發(fā)力點(diǎn)：從用戶和市場洞察中提煉
基于用戶洞察和市場趨勢，設(shè)計(jì)師應(yīng)提煉出設(shè)計(jì)發(fā)力點(diǎn)。這些發(fā)力點(diǎn)應(yīng)聚焦于解決用戶的核心問題和滿足商業(yè)目標(biāo)。例如，針對理財(cái)平臺的新手用戶，設(shè)計(jì)師可能會提出簡化操作流程、提供教育性內(nèi)容等發(fā)力點(diǎn)。
設(shè)計(jì)師必備思維模型
 
 
 
六、創(chuàng)新與迭代：不斷優(yōu)化產(chǎn)品體驗(yàn)
設(shè)計(jì)師應(yīng)不斷探索創(chuàng)新的設(shè)計(jì)方案，并基于用戶反饋和數(shù)據(jù)分析進(jìn)行迭代優(yōu)化。這要求設(shè)計(jì)師具備快速原型制作和測試的能力，以及靈活調(diào)整設(shè)計(jì)方案以適應(yīng)市場變化的敏捷性。
七、跨部門合作：形成合力
設(shè)計(jì)師需要與產(chǎn)品、市場、技術(shù)等不同團(tuán)隊(duì)成員合作，共同推動產(chǎn)品設(shè)計(jì)和開發(fā)。這種跨部門合作能夠幫助設(shè)計(jì)師獲得更全面的視角，同時(shí)也能提升設(shè)計(jì)方案的實(shí)施效率。
設(shè)計(jì)師必備思維模型
 
 
八、持續(xù)學(xué)習(xí)：提升專業(yè)能力
產(chǎn)品思維要求設(shè)計(jì)師不斷學(xué)習(xí)新知識、新技能，以適應(yīng)不斷變化的市場需求。這包括學(xué)習(xí)最新的設(shè)計(jì)工具、理解新興技術(shù)如人工智能對設(shè)計(jì)的影響，以及掌握數(shù)據(jù)分析等技能。
總結(jié)而言，產(chǎn)品思維使設(shè)計(jì)師能夠超越單純的視覺表現(xiàn)，將用戶需求、商業(yè)目標(biāo)和市場趨勢融入設(shè)計(jì)過程中，創(chuàng)造出具有競爭力的產(chǎn)品。通過用戶洞察、市場分析、跨部門合作和持續(xù)學(xué)習(xí)，設(shè)計(jì)師可以提升自身的產(chǎn)品思維能力，成為真正對產(chǎn)品有影響力的設(shè)計(jì)專家。
 

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

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

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



作者：啊糖糖att
鏈接：https://www.zcool.com.cn/article/ZMTYxODcyNA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(320)

霧里看花？這些是你能用上的產(chǎn)品思維

前端達(dá)人

你也許會困惑，明明絞盡腦汁想出方案但為什么總是不被認(rèn)可，為什么每當(dāng)自己來講述設(shè)計(jì)方案時(shí)總是無從談起。在走出新手村之后，你是否也會思考，這一切背后是否有什么規(guī)律可循。今天咱們略微換一個視角，盤一盤這背后的細(xì)節(jié)。
——
 
我們作為設(shè)計(jì)師這個角色，對于設(shè)計(jì)思維并不陌生。而在實(shí)際的工作中只根據(jù)設(shè)計(jì)者常有的思維顯然是不太夠的，將視角聚焦在更上游，你是否在心里追問為什么會有這個需求呢？為什么要做這一改動呢？
霧里看花？這些是你能用上的產(chǎn)品思維
 
 
在實(shí)際的工作場景中，設(shè)計(jì)思維和產(chǎn)品是為是相輔相成的。多方位的思考可以更好的理解需求把控設(shè)計(jì)方向，幫助你更好的發(fā)揮自己的作用，設(shè)計(jì)出更符合用戶需求和商業(yè)目標(biāo)的優(yōu)秀產(chǎn)品。
霧里看花？這些是你能用上的產(chǎn)品思維
 
 
1.1 產(chǎn)品思維是什么
產(chǎn)品的目的是為用戶解決問題滿足用戶的需求。而產(chǎn)品經(jīng)理需要權(quán)衡用戶場景和業(yè)務(wù)三者，發(fā)現(xiàn)問題分析問題解決問題，從而實(shí)現(xiàn)產(chǎn)品不斷的迭代和優(yōu)化。產(chǎn)品思維則是解決問題的思維方式。這里我根據(jù)之前的工作經(jīng)驗(yàn)，我挑關(guān)鍵來總結(jié)了一下。
 
用戶導(dǎo)向
理解產(chǎn)品的核心用戶群體，這其中包含了解他們的需求偏好和行為習(xí)慣。為用戶提供好用方便的功能，提升用戶的產(chǎn)品滿意度。
數(shù)據(jù)驅(qū)動
利用產(chǎn)品數(shù)據(jù)分析方法和工具，分析用戶的實(shí)際實(shí)用情況，從中找到產(chǎn)品優(yōu)化的機(jī)會點(diǎn)，迭代產(chǎn)品方案。
市場分析
了解產(chǎn)品處在的市場競爭環(huán)境和行業(yè)發(fā)展趨勢，通過競品的特點(diǎn)和優(yōu)勢從而發(fā)現(xiàn)產(chǎn)品的差異化和創(chuàng)新點(diǎn)，獲得更好的市場競爭力。
用戶增長
面對存量市場，掌握用戶的增長的方法策略，通過產(chǎn)品設(shè)計(jì)和優(yōu)化實(shí)現(xiàn)用戶和業(yè)務(wù)的增長。
產(chǎn)品策略
 
了解產(chǎn)品策略的定制和執(zhí)行過程，包括但不限于產(chǎn)品定位，目標(biāo)設(shè)置，功能規(guī)劃。制定產(chǎn)品的發(fā)展策略，對東產(chǎn)品的發(fā)展和優(yōu)化。
 
產(chǎn)品思維并不是照本宣科的工具，而是解決問題的切入點(diǎn)。不同的產(chǎn)品經(jīng)理對產(chǎn)品思維也有著不同的理解。如今高度競爭的環(huán)境下，只有為用戶創(chuàng)造獨(dú)特的價(jià)值才能在市場中脫穎而出。這也變相的提高了設(shè)計(jì)師的要求，能否快速準(zhǔn)確的把握需求方向產(chǎn)出有效的設(shè)計(jì)方案顯得尤為重要。
 
1.2 產(chǎn)品思維可以幫助設(shè)計(jì)師做什么
更全面的思考問題
很多時(shí)候受限于視角，設(shè)計(jì)師往往會執(zhí)著于界面的視覺表現(xiàn)。耗費(fèi)更多的精力試圖吸引更多的用戶注意力。而掌握一定的產(chǎn)品思維可以幫助設(shè)計(jì)師在設(shè)計(jì)環(huán)節(jié)更好的思考和參與。設(shè)計(jì)出更符合用戶和業(yè)務(wù)預(yù)期的界面，發(fā)現(xiàn)用戶真實(shí)的痛點(diǎn)從而有針對性的優(yōu)化設(shè)計(jì)方案。
舉個例子：設(shè)計(jì)師通過對復(fù)雜流程的簡化，視覺降噪等方案，聚焦核心功能，改善用戶的交互體驗(yàn)和視覺感受。
優(yōu)化產(chǎn)品設(shè)計(jì)
通過對數(shù)據(jù)的研究，深入分析用戶行為和市場環(huán)境，發(fā)現(xiàn)產(chǎn)品的改進(jìn)方向。通過數(shù)據(jù)分析和競品分析等手段，發(fā)現(xiàn)用戶需求與市場趨勢，為產(chǎn)品的功能設(shè)計(jì)和界面優(yōu)化提供有力的支持。
舉個例子：設(shè)計(jì)師根據(jù)用戶反饋的結(jié)果調(diào)整頁面的布局，優(yōu)化產(chǎn)品的交互設(shè)計(jì)，提高產(chǎn)品的易用性和吸引力。
提升團(tuán)隊(duì)協(xié)作效率
具備產(chǎn)品思維，可以讓設(shè)計(jì)師和產(chǎn)品經(jīng)理無阻力溝通，通過與團(tuán)隊(duì)的有效溝通和協(xié)作，共同推動產(chǎn)品的開發(fā)和優(yōu)化，提升團(tuán)隊(duì)的協(xié)作效率和產(chǎn)品的質(zhì)量，達(dá)到事半功倍的效果。
舉個例子：和產(chǎn)品共同研討產(chǎn)品需求文檔，和開發(fā)團(tuán)隊(duì)討論實(shí)現(xiàn)方案。確保項(xiàng)目的快速推進(jìn)。
提升職業(yè)競爭力
 
具備產(chǎn)品思維的設(shè)計(jì)師在職場更具有競爭力，可以在不同的工作場景中承擔(dān)更多的責(zé)任和挑戰(zhàn)，為團(tuán)隊(duì)帶來更大的價(jià)值。擁有較好的產(chǎn)品思維可以幫助設(shè)計(jì)師保持對行業(yè)趨勢和技術(shù)發(fā)展的敏感性，在職場競爭中也更具優(yōu)勢。
 
霧里看花？這些是你能用上的產(chǎn)品思維
 
 
現(xiàn)在讓我們立即切換到工作視角，怎樣在原有的工作流程中應(yīng)用好產(chǎn)品思維尤為關(guān)鍵。我們作為設(shè)計(jì)者，了解產(chǎn)品思維是為了更好的發(fā)散思考和推敲設(shè)計(jì)方案。授人以魚不如授人以漁，面對不同領(lǐng)域不同項(xiàng)目的紛繁需求，不妨多問幾個問題，在不斷的提問中找到答案。
2.1 明確設(shè)計(jì)目標(biāo)
設(shè)計(jì)師需要明確項(xiàng)目背景推導(dǎo)出正確的設(shè)計(jì)目標(biāo)。這要求設(shè)計(jì)師時(shí)刻需要將項(xiàng)目的目標(biāo)和成果放在首位，之后的設(shè)計(jì)決策和行動都需要和這些目標(biāo)保持一致。另外注重跨團(tuán)隊(duì)協(xié)作，合理分類時(shí)間和設(shè)計(jì)資源，將會讓你更加游刃有余。切忌鉆牛角尖的閉門造車，務(wù)必確保項(xiàng)目按時(shí)交付。
 
自問自答：
 
  •  
    項(xiàng)目組都有誰，自己負(fù)責(zé)的哪些板塊，我的目的是什么？
  •  
    項(xiàng)目進(jìn)展到了哪里，什么時(shí)候需要交付，什么時(shí)候需要上線？
  •  
    設(shè)計(jì)方案確定提交后怎樣快速和開發(fā)團(tuán)隊(duì)對接實(shí)現(xiàn)落地，期間是否有什么問題？
 
2.2用戶研究
設(shè)計(jì)師進(jìn)行用戶研究是為了更好的了解用戶的需求和行為，確保產(chǎn)品能夠滿足用戶的真實(shí)需求。用戶研究的方式很多，設(shè)計(jì)師可以根據(jù)團(tuán)隊(duì)需要和項(xiàng)目時(shí)間排期進(jìn)行合理的安排。
 
成功的用戶研究可以幫助設(shè)計(jì)師驗(yàn)證設(shè)計(jì)假設(shè)的有效性，降低產(chǎn)品的開發(fā)風(fēng)險(xiǎn)，減少不必要的時(shí)間和成本損耗。
霧里看花？這些是你能用上的產(chǎn)品思維
 
 
自問自答：
 
  •  
    你的用戶是誰，使用場景是什么，需要為他們解決什么問題？
  •  
    你的用戶是如何使用這些功能的，這期間是否還有優(yōu)化的空間？
 
2.3 競品分析
競品分析是一種通過研究和對比競爭對手的產(chǎn)品和服務(wù)細(xì)節(jié)，從中發(fā)現(xiàn)優(yōu)勢和劣勢，進(jìn)而指導(dǎo)自身產(chǎn)品設(shè)計(jì)和優(yōu)化的方法。對于設(shè)計(jì)師來說，可以幫助我們更快的了解市場和行業(yè)的整體情況，為產(chǎn)品的設(shè)計(jì)提供給更多的參考依據(jù)，另一方面可以快速發(fā)現(xiàn)自身產(chǎn)品的問題 找到優(yōu)化的方向。
 
需要注意的是，競品分析需要帶著目的進(jìn)行，切勿走馬觀花泛泛而談。
自問自答
 
  •  
    競品分析的主題是什么，目標(biāo)是解決當(dāng)下的什么問題？
  •  
    你的競品是誰，他是怎么做的，反饋怎樣？
  •  
    我們可以借鑒什么，改善什么？
 
2.4埋點(diǎn)與數(shù)據(jù)回收
雖然設(shè)計(jì)師并不會直接參與埋點(diǎn)的設(shè)計(jì)，但為了更好的捕捉用戶的行為數(shù)據(jù)，在設(shè)計(jì)中可以根據(jù)情況和優(yōu)先級將埋點(diǎn)納入設(shè)計(jì)考慮。
 
設(shè)計(jì)師和數(shù)據(jù)分析的溝通可以避免后期添加埋點(diǎn)時(shí)，出現(xiàn)和設(shè)計(jì)的不匹配的尷尬狀況。數(shù)據(jù)是驗(yàn)證設(shè)計(jì)合理性的重要指標(biāo)，很多時(shí)候設(shè)計(jì)師需要一個具體的成果反饋來復(fù)盤和指導(dǎo)之后的設(shè)計(jì)工作，多多留意最終呈現(xiàn)頁面效果和用戶反饋，并不是完成上線就可以將這些拋擲腦后了。
霧里看花？這些是你能用上的產(chǎn)品思維
 
 
終極問題：
 
  •  
    如何證明這是個改版方案是合理的
 
霧里看花？這些是你能用上的產(chǎn)品思維
 
 
3.1設(shè)計(jì)師的痛點(diǎn)
在實(shí)際的工作中，往往會由于不同的產(chǎn)品特點(diǎn)和團(tuán)隊(duì)的配置，設(shè)計(jì)師不得不身兼多職面對更為復(fù)雜的情況。在開發(fā)流程中設(shè)計(jì)師始終處在“夾縫之中”的位置，而站在公司的視角設(shè)計(jì)師這一環(huán)節(jié)既不能直接產(chǎn)生收益也不能為整體降低成本。在進(jìn)入職業(yè)生涯不久我開始思考為什么設(shè)計(jì)師處在這樣一個被動的處境呢，跑遍了前端后端數(shù)據(jù)和產(chǎn)品小組，“厚著臉皮”旁聽了各種冗雜的會議，以及多少次和前輩的交流中，我才慢慢發(fā)現(xiàn)了背后的“難言之隱”
 
  •  
    依賴需求方案
設(shè)計(jì)師通常是根據(jù)產(chǎn)品需求方案確定以后再參與工作的，設(shè)計(jì)師的工作很大程度上取決于產(chǎn)品需求的制定，因此單從設(shè)計(jì)視角來看有一定的滯后性。設(shè)計(jì)師接到產(chǎn)品需求后沒有辦法理解背后需要解決的核心問題，也很少思考和判斷需求的合理性，很容易和產(chǎn)品的最初想法產(chǎn)生偏差。
  •  
    反饋的延遲
設(shè)計(jì)師的工作成果也需要后期數(shù)據(jù)回收和復(fù)盤，而在實(shí)際的工作中，往往是一個需求結(jié)束后就需要急匆匆的應(yīng)對下一個需求。如果不去留意，很多時(shí)候作為設(shè)計(jì)師并不清楚最終交給開發(fā)的設(shè)計(jì)稿到底取得了什么樣的數(shù)據(jù)表現(xiàn)，到底哪一個方案才能更好的實(shí)現(xiàn)目標(biāo)。這也使得設(shè)計(jì)師很難進(jìn)行經(jīng)驗(yàn)總結(jié)。
  •  
    有限的時(shí)間和資源成本
當(dāng)前市場競爭相對激烈，各方產(chǎn)品都需要在有限的時(shí)間中盡可能的搶占市場，而設(shè)計(jì)師需要在較短的時(shí)間中給出合理的設(shè)計(jì)方案，同時(shí)和產(chǎn)品以及開發(fā)團(tuán)隊(duì)不斷進(jìn)行細(xì)節(jié)的調(diào)整，這也使得設(shè)計(jì)師面對的壓力和挑戰(zhàn)更大。
 
 
較低的話語權(quán)、只多不少的需求使得本就焦慮內(nèi)卷的設(shè)計(jì)師處境更加雪上加霜。但是反過來想想，既然改變不了外在的環(huán)境，是否有辦法可以讓設(shè)計(jì)師們由內(nèi)而外的主動爭取些什么呢，我能想到的答案既是化被動為主動，盡可能的參與項(xiàng)目的推進(jìn)，同時(shí)和上下游保持溝通，從而提升設(shè)計(jì)師在團(tuán)隊(duì)中的存在感和參與感。而產(chǎn)品思維，是一塊剛剛好的墊腳石。
 
2.2產(chǎn)品思維的訓(xùn)練
講到如何提升產(chǎn)品思維，我總會想起一位前輩曾經(jīng)說過一切技巧惟手熟爾。你也許會說每天都在一成不變的做著公司的內(nèi)容實(shí)在提不起興趣，不過沒有關(guān)系。產(chǎn)品思維的提升并不需要過多一板一眼的訓(xùn)練。就像你走入繁華地段的商場，明明入駐著大差不差的品牌為什么客流量卻有著明顯的不同？是清晰明了的導(dǎo)視路牌？是更為合理的動線規(guī)劃？是明亮舒適的燈光統(tǒng)一的裝置風(fēng)格？用戶體驗(yàn)是多元的，因此很多時(shí)候善于發(fā)現(xiàn)身邊各種各樣的體驗(yàn)細(xì)節(jié)，便可以擁有較好的產(chǎn)品感知。關(guān)于具體的方法，我有兩個方向可供大家參考。
 
  •  
    保持好奇心
打開手機(jī)想想看哪些應(yīng)用是高頻使用的，同樣的音樂類應(yīng)用你更習(xí)慣用哪個呢，在聯(lián)想一下身邊的朋友同事在聽音樂這件事情上更喜歡哪個應(yīng)用呢。橫向?qū)Ρ纫幌卤憧砂l(fā)現(xiàn)，雖然是同類型的產(chǎn)品但在體驗(yàn)細(xì)節(jié)上其實(shí)有很多門道可以考究?；蛘吣闶欠窳粢膺^最新出現(xiàn)的產(chǎn)品和剛剛更新的功能？為什么要有這樣那樣的改版？用戶的反饋是怎樣的？
刨根問底多問一步為什么，而不是將自己禁錮在工作范圍中的一畝三分地，在不經(jīng)意之間，其實(shí)你已經(jīng)邁出了第一步。
  •  
    知識整理與沉淀
如果你還有多余一些的精力，不妨進(jìn)行更深入的學(xué)習(xí)。不過好消息是，你想要學(xué)習(xí)的很多技術(shù)都可以在網(wǎng)絡(luò)上輕松找到。定期翻看設(shè)計(jì)平臺分享，相關(guān)短視頻頻道，公眾號文章，可以讓你探索更深入更廣闊的知識。不過先別急著開始，走馬觀花的閱讀往往并不會留下什么印記，試著整理這些碎片知識并總結(jié)收獲和心得。不要急于閱讀量收藏量而是爭取收獲更多自己的理解才尤為關(guān)鍵。
 
PS：關(guān)于這部分我之后也會有更多內(nèi)容的分享，多多關(guān)注嘍，謝謝各位啦。
 
3.3 啰啰嗦嗦寫在最后
在工作的第二年，我開始感到枯燥和厭煩。很多次面對頻繁緊急加塞的產(chǎn)品需求和一頭霧水的業(yè)務(wù)指標(biāo)，我時(shí)常情緒激動的和當(dāng)時(shí)的組長抱怨吐苦水，但由于人員緊張，并沒有什么實(shí)質(zhì)的改變。后來的一段日子我試著躲避，覺得做好分內(nèi)的任務(wù)就得了，每天出幾版方案到時(shí)候由著他們定奪吧。就這樣又過了一段時(shí)間，從前得枯燥和厭煩變本加厲，而我好像游離在各個環(huán)節(jié)之中，漸漸我的狀態(tài)變得很差，每天的工作毫無成就感可言，我開始認(rèn)真的思考，究竟為什么會這樣。
事情的轉(zhuǎn)機(jī)出現(xiàn)在不久之后組里來了新的伙伴，一方面分擔(dān)了很多任務(wù)壓力，另一方面由于是剛剛畢業(yè)的職場新人，很多工作細(xì)節(jié)都需要幫他快速上手。也在這期間我發(fā)現(xiàn)了自己的浮躁和心急，我試著系統(tǒng)的總結(jié)過往的經(jīng)驗(yàn)和思考，在這個過程中我開始和產(chǎn)品以及前端的伙伴更多的交流和請教。在找不到思路的時(shí)候試著切換到其他視角看待問題，去刨根問底無數(shù)個為什么，竟發(fā)現(xiàn)不知不覺中一切似乎都往積極的方向改變了。
或許我的想法與你也會有所偏頗，不過沒有關(guān)系，每當(dāng)觀點(diǎn)不一致的時(shí)候也意味著我又發(fā)現(xiàn)了一個新的視角。不同的鏈接使得我們不斷的發(fā)現(xiàn)和探索，正如那句話說沒有人是一座孤島。
在這里我非常期待與更多的優(yōu)秀前輩交流，也很十分榮幸為后輩提供一些思路和幫助。
 
真誠的感謝諸位。
 
 


作者：Weiweiwei_Alita
鏈接：https://www.zcool.com.cn/article/ZMTYxOTYwMA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(321)

B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈：圖表設(shè)計(jì)

前端達(dá)人

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

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

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

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



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

【交互設(shè)計(jì)】B端產(chǎn)品中后臺列表頁設(shè)計(jì)方法總結(jié)

資深UI設(shè)計(jì)者

接觸b端產(chǎn)品設(shè)計(jì)差不多半年多了，每天面對的都是各種控制臺，本次自己試著總結(jié)了下工作中遇到的各種列表設(shè)計(jì)的小tips。

評論(0) 瀏覽(359)

常見的B端彈窗樣式設(shè)計(jì)總結(jié)

ui設(shè)計(jì)分享達(dá)人

B 端產(chǎn)品的業(yè)務(wù)場景通常比 C 端更為復(fù)雜，因此在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)對信息的處理方式也需要根據(jù)不同的業(yè)務(wù)場景進(jìn)行設(shè)計(jì)。今天主要聊一下 B 端產(chǎn)品設(shè)計(jì)中彈窗設(shè)計(jì)。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
彈窗的定義
彈窗是展現(xiàn)在用戶操作界面之上的容器，在 X 軸和 Y 軸的平行空間之上擴(kuò)展了頁面的高度。是系統(tǒng)與用戶之間建立聯(lián)系非常重要的組成部分。它通常在用戶進(jìn)行特定操作或訪問特定頁面功能時(shí)彈出，目的是向用戶展示某些信息、提供選擇或執(zhí)行某些操作。
 
彈窗使用場景
  1.  
    需要呈現(xiàn)的內(nèi)容篇幅相對較少。
  2.  
    常用于針對某些內(nèi)容進(jìn)行補(bǔ)充說明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
  3.  
    通常是由系統(tǒng)觸發(fā)（用戶被動接受）。
  4.  
    彈窗整體高度和寬度不做絕對的標(biāo)準(zhǔn)或規(guī)定，可以根據(jù)內(nèi)容篇幅的多少和視覺的平衡度來確定，整體規(guī)范保持一致即可。
 
總體概括為簡單和復(fù)雜兩個場景。
 
一、場景簡單
場景簡單包括：全局提示、氣泡確認(rèn)框、警告提示、通知提醒框，通常是操作確認(rèn)和系統(tǒng)內(nèi)部自動觸發(fā)性提示時(shí)使用。
 
1. 全局提示
以 toast 提示居多，通常在頁面中間偏上的位置。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
2. 氣泡提示
用于解釋難理解的功能名詞或者由于版面限制文字展示不完，利用氣泡來展示。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
3. 警告提示
用于重點(diǎn)內(nèi)容的警告提醒，降低用戶犯錯概率，提升用戶的使用體驗(yàn)。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
4. 提示性通知彈窗：
位置相對固定，通常出現(xiàn)在需要介紹說明的功能旁邊或者居頁面中間展示。
例如，當(dāng)系統(tǒng)發(fā)生重要更新維護(hù)或者重點(diǎn)功能引導(dǎo)時(shí)，可以顯示一個提示性通知彈窗，告知用戶當(dāng)前狀態(tài)。
類型主要包括以下三種：
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
舉例：
有贊后臺頁面
有贊后臺頁面
 
 
 
二、場景復(fù)雜
1. 場景復(fù)雜｜全屏彈窗
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
新開頁簽（瀏覽器）
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
為什么是全屏彈窗，而不是頁簽？
全屏彈窗功能和頁面相似，之所以使用全屏彈窗作為頁面載體，原因就是對原觸發(fā)頁面的使用和關(guān)注并沒有結(jié)束，編輯完成后需要快速關(guān)閉當(dāng)前窗口并返回到原來的頁面中去，數(shù)據(jù)可以做到實(shí)時(shí)同步。如果用新頁簽打開，則會對數(shù)據(jù)同步造成隔斷，需要二次打開頁面。頁簽是瀏覽器新開窗口，通常用于不同功能的展示。
 
 
2. 場景復(fù)雜｜非全屏彈窗
①中間彈窗·純文本
確認(rèn)彈窗：用于向用戶確認(rèn)某個操作或決策，通常包含確認(rèn)和取消兩個按鈕。例如，當(dāng)用戶點(diǎn)擊刪除按鈕時(shí)，可以顯示一個確認(rèn)彈窗，詢問用戶是否確定刪除。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
②中間彈窗·下拉框
下拉框：后臺將全部數(shù)據(jù)返回，下拉展示全部內(nèi)容，方便用戶快捷查詢。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
③中間彈窗·文本輸入
文本輸入：通常用于備注等說明性內(nèi)容的填寫。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
④中間彈窗·選擇器
包括單選和復(fù)選兩種類型，下圖以單選框舉例。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑤中間彈窗·步驟條
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑥中間彈窗·多內(nèi)容組合
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑦中間彈窗·左右穿梭框
穿梭框左側(cè)通常會有分頁，為了防止用戶對已選內(nèi)容造成遺忘，右側(cè)框展示已選內(nèi)容進(jìn)行二次核對。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑧中間彈窗·上下穿梭框
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
舉例：
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
3. 場景復(fù)雜｜抽屜
抽屜呈現(xiàn)的內(nèi)容篇幅介于彈窗和頁面之間，通常居右側(cè)展示。
 
①抽屜·純文本
通常展示較大篇幅的說明性內(nèi)容。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
②抽屜·橫向 tab
通常展示同一大類下，不同分類的信息內(nèi)容。比如全部消息、已讀、未讀等。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
③抽屜·縱向 tab
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
④抽屜·多內(nèi)容結(jié)合
多類型內(nèi)容的聚合展示。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
 
三、其他情況
①強(qiáng)制性提示
為了更好的了解用戶特征，提供更加優(yōu)質(zhì)的服務(wù)，有的系統(tǒng)在用戶首次使用時(shí)，會出現(xiàn)強(qiáng)制性彈窗，執(zhí)行必要操作后，才可進(jìn)入系統(tǒng)使用。
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
四、彈窗使用規(guī)范
上下左右間距大小固定，彈窗大小根據(jù)內(nèi)容的多少來自動調(diào)整。
 
①中間彈窗
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
②側(cè)邊彈窗
常見的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
以上就是全部內(nèi)容，謝謝。

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

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

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



作者：西城門設(shè)計(jì)
鏈接：https://www.zcool.com.cn/article/ZMTYyMDI5Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(652)

層級思維解構(gòu)圖標(biāo)分類體系

ui設(shè)計(jì)分享達(dá)人

近年來，Ul設(shè)計(jì)行業(yè)蓬勃發(fā)展，圖標(biāo)設(shè)計(jì)風(fēng)格更是呈現(xiàn)出多元化的特點(diǎn)，各種新穎、創(chuàng)意的設(shè)計(jì)風(fēng)格層出不窮。圖標(biāo)樣式早已從潺潺溪水變成汪洋大海，通過系統(tǒng)歸納和整理各類常用的面性圖標(biāo)設(shè)計(jì)類型與風(fēng)格，我們構(gòu)建了一套體系化的記憶框架，使得在日常工作中能夠迅速且準(zhǔn)確地作出圖標(biāo)樣式的決策，從而有效提升設(shè)計(jì)效率與質(zhì)量。本文章主要討論近年UI界面中會經(jīng)常使用的圖標(biāo)風(fēng)格，線性圖標(biāo)樣式組成一般過于簡單，在此不做討論。
 
本文在探討圖標(biāo)的分類思維時(shí)，巧妙地運(yùn)用了層級理念，
并特別關(guān)注層級是否穿透這一關(guān)鍵因素來區(qū)分不同類型的圖標(biāo)。這種分類思維不僅使圖標(biāo)的辨識變得更為便捷，還有助于人們更輕松地形成深刻的記憶印象。通過這種創(chuàng)新性的分類方法，我們得以更清晰地理解圖標(biāo)的本質(zhì)與特點(diǎn)，進(jìn)一步提升我們對常用圖標(biāo)的認(rèn)知水平和應(yīng)用
評論(0) 瀏覽(397)

日歷

鏈接

個人資料

存檔