亚洲欧美香蕉在线日韩精选_www在线观看美女视频_娇妻的呻吟大团结内裤奇缘_免费a漫禁漫h漫在线

首頁

B端設計案例修改

藍藍小助手

眾所周知,B 端設計更注重交互邏輯思維,設計解決方案的出發點需要建立在提升產品體驗層面。一個很小的需求也需要更成熟的思考,這個思考過程如果有更多的集思廣益定能探索出更好的設計,提升操作體驗度。

幫助用戶解決B端引導體系

藍藍小助手

B端產品引導體系并不是單一 的某個功能,而是一種體系化的能力,旨在幫助用戶更好地使用產品,是產品成功與否的關鍵因素之一。它通過不同的手段,如在線文檔、視頻教程、客服支持等,為用戶提供全方位 的幫助和指導,使用戶能夠快速上手產品,提高工作效率。

一看就會的【B 端官網設計】方法解析

藍藍小助手

B端產品的官網設計不僅要確保一定的獨特性,同時也要關注到客戶的瀏覽體驗,通過設計更好地“講述”產品、“吸引”用戶,將盡量多的潛在客戶轉化為注冊用戶并完成購買。

B端產品設計優化-基于用戶需求調研與分析

藍藍小助手

篇文章將深入而全面的講解用戶研究的方法與具體實踐,包括用戶研究的重要性、用戶研究的核心因素、定性定量研究方法、基于產品生命周期的用研方式、用戶研究在設計流出中的具體應用等多維度探討用戶研究的核心概念及其實際應用方法,幫助讀者更好地理解如何通過有效的用戶研究提升產品的用戶體驗和市場競爭力。同時提供清晰的方法論和實際操作指南,幫助在設計和開發過程中有效地應用用戶研究,實現產品與市場的良性互動與成長。

解決設計困惑—— B端全攻略色彩系統

藍藍小助手

B端設計的色彩體系如何構建? 色彩基礎知識,品牌色,輔助色,可視化色彩

講講AI在B端設計上的應用方法

ui設計分享達人

B 端設計領域的 AI 應用
大多數同學目前對 AI 應用的認識只有文生圖、對話、駕駛等領域,但 AI 應用的場景遠遠不止它們。
和頭部的明星 AI 產品、模型相比,細分市場的 AI 應用就非常沒有存在感了。比如使用 AI 進行財務的審核、飲料配方的調節、工程安全的模擬等等,它可以幫助企業節約大量的人力完成工作。
概括起來,就是一些可以通過計算機完成的(也不止)重復性勞動或標準化流程,都可以引入 AI 的技術進行降本增效。
那在 UI 設計領域中,這些重復性和標準化的工作內容有嘛?
有,但是并不會像外行或者新手想象的那么多。AI 難以覆蓋的場景我們過去的分享探討過,等等也會做進一步的說明,而這里我們先要探討的,就是能用 AI 實現的 B 端設計場景,具體有哪些。
我們都知道市面上現在有很多開源的 B 端前端框架,各個大廠前赴后繼地對它們進行更新和完善,里面包含了非常豐富的組件庫。
講講AI在B端設計上的應用方法
 
 
這些組件庫不不止是 UI 的組件,也包含了前端的對應代碼,前端工程師可以快速調用這些代碼組件而不用自己去重新寫一遍樣式和交互。
原則上,使用現成的組件開發就可以快速完成整套項目的前端內容,這可以給前端工程師節省大量時間。所以即使項目中有完整的設計稿,前端在開發過程中也會偷懶直接略過,直接套用框架內的組件實現。
這和設計師直接套用素材完成運營圖設計一樣,明明有現成的素材在那里,為什么要浪費一大堆時間自己重新畫一遍還是用 3D 建模渲染?同理,要是組件足夠豐富,滿足項目的需要,設計師也可以直接復用官方的組件素材,不用自己設計。
組件化思維的運用,就是項目工作標準化和重復性的根源,不僅應用在設計領域,對于前、后端開發來說同理。
基于這種思路,催生出了一種新的 SaaS 模式 —— 低代碼 Low-Code 服務。
即通過少量的代碼,或者干脆不用代碼,僅通過可視的工具和組件實現軟件的開發,并完成相應的配置和部署的工具。
這概念咋一看不就是建站工具?比如有贊、微店之類的,用戶可以在里面直接創建并配置店鋪,然后以網頁、H5 或小程序的形式發布。
但這只是最初級的應用,傳統的建站工具屬于幫你預制好了主要的參數和功能,用戶只能在這個范圍內做少量的自定義編輯和設置。但進階的 Low-Code,會賦予用戶更大的編輯范圍和自由度,讓用戶通過可視化的界面創建自己想要的產品和功能。
講講AI在B端設計上的應用方法
 
 
這類產品已經衍生出一個規模不小的市場,因為有大量的中小企業不想投入太多的精力和成本進數字化平臺的搭建上,
并希望能快速創建不同的管理工具來匹配企業日新月異的發展需要
這里要劃重點,對于一部分企業來說,經營模式和業務流程是持續迭代的,如果使用傳統的開發模式那么很難跟上這種迭代。
以連鎖餐飲品牌舉例,前期只在一個城市經營,和后期擴張到全省或全國,采購流程和供應鏈管理必然會持續進行調整,提交一個采購工單所需填寫的字段就會發生變化,同理展示的表格、詳情頁也要跟著調整。
這類變化往往并沒有修改界面的視覺、交互、組件,僅僅是增加和減少字段數據,而用傳統的收集需求再輸出進行開發的模式效率非常低,所以它們就成為 Low-Code 的最佳應用場景。業務方自己配置、修改直接上線,省掉產品經理、設計師、程序員中間耗差時……
并且對于很多企業來說,只需要應用一些非常基礎的功能服務和頁面類型。比如我經常提到的 B 端管理系統的四個核心頁面類型:
講講AI在B端設計上的應用方法
 
 
Low-Code 就是把常規需求標準化,并運用組件化的框架,讓用戶通過簡單的填寫和編輯就能生成出想要的頁面和功能。
既然需求不復雜,功能、組件、頁面、代碼都可以標準化,那不用 AI 降本增效還有王法嘛?
所以,使用 AI 生成 B 端頁面(不是設計稿)的工具已經在大廠內部開始應用了,開發專屬大模型,再把做好的組件喂給模型,用戶只要在相應的表單內填入需求,就可以快速生成出落地的頁面。
并且各家大廠內部的 B 端組件庫,可遠遠不止對外分享的這些開源框架里包含的數量,還有很多特殊的業務組件,可以讓模型得到更好的訓練和產出,比普通 Low-Code 模式更簡單高效,大幅度提升企業內部B端產品的落地和運用效率。
從已經了解到的信息中,有一部分業務部門已經開始進入實踐環節了。且隨著技術的迭代,這種工具必然會越來越強大,功能越來越豐富。
所以,了解完這個趨勢,設計師和前端工程師迎來大結局了?要被AI技術清洗了?現在該捧起《從0到1學習炒粉》學習了嘛?
這就是下面要討論的內容。
B 端 AI 和設計的關聯
前面做了不少鋪墊,就是為了強調,適用于 Low-Code 和 AI 生成的 B 端產品,是有前提條件的,包含下面這些要素:
  •  
    完整成熟的前后端組件庫
  •  
    需求使用基礎做法就能實現
  •  
    需要經常變動調整的業務需求
  •  
    對設計和交互本身要求不高
而這里面最關鍵的東西,就是標準化。必須要知道在今天的 AI 的應用發展中,要生成出符合實際工作需要的結果,絕對不是靠輸入信息以后它自己 “蒙” 出來的。為了讓結果盡可能準確,那么喂給模型的數據也就要越多且越有針對性。
理論上面向 B 端的 AI 工具,只要不斷提供給他新的組件、頁面,就能拓展它可以實現的范圍。但不管你怎么訓練它,都要滿足標準化的前提。
而標準化,恰恰就是國內 B 端業務的命門……
我們都知道國內 SaaS 行業現在發展非常的混亂,雖然在不同的細分領域有自己的獨角獸,比如財務領域的金蝶,OA 領域的釘釘,ERP 領域的用友等等。
但是這些公司就發展狀況良好利潤豐厚了?24年一季度的 SaaS 頭部公司業績非常蕭條,比如網上找到的統計,和國外 SaaS 頭部公司的估值和利潤形成鮮明的對比:
講講AI在B端設計上的應用方法
 
 
為什么國內 SaaS 市場那么慘淡?說到底就是在國內 B 端領域很難實現真正的標準化,而不是國內 B 端市場規模太小。
比如釘釘、飛書這樣的 OA 軟件已經很成熟了,但它們的實際普及程度一點都不高,而中大型企業又有各種考量,現成的不用就熱衷于開發一套自己的系統,簡稱定制化。這就倒逼 SaaS 工具為了滿足更多的企業需求,拼命疊加功能,使得這些 SaaS 工具一個比一個臃腫。
而我們前面提到的 AI 生成,想要普及同樣需要面對這種困境,因為模型不管怎么做,它都是基于特定標準化下的產物,它可以滿足其中一部分需求,但難以滿足其它需求。尤其是國內 B 端定制化需求中,混亂、抽象、聯系復雜的問題非常突出。
換句話說,國內 B 端市場的大多數系統,是非標準化的,需要產品團隊在面對這些非標準的需求下做出創新和適配,就必須要考慮很多抽象的因素,領導、背景、體驗、交互、周期、難度等等。這個過程不可能由業務方自己完成,且最終導出的設計結果,往往會和常規方案有很大的差異。
按常規邏輯考慮的話,那有多少組件我們整理多少組件,早晚有一天不得窮盡設計師思考范圍的邊界?
且不說獲得不同商業項目的業務組件有多困難,如果組件之間沒有更底層的思路去規范它們的設計和交互,那么硬湊到一起的項目是非常割裂的,而 AI 在短時間內沒辦法做到真正理解交互的邏輯并根據使用場景做理性的推理。
所以基于一套團隊產出的組件必然是有限的,它們或許可以滿足自己項目,但不可能滿足市面上所有項目的使用需求。
還有一個很關鍵的疑問,就是很多人會想,一個項目中的特殊組件往往只是少數,我們用 AI 工具生成多數頁面,少數進行定制和獨立開發不就行了?
這思路在邏輯上很合理,但實踐起來的問題非常多。舉個例子比如設計稿直接生成網頁這種技術,從20年前我剛了解到網頁設計那天說到現在了,這個實現邏輯理應不需要 AI 的參與都能做到,中間也問世了不少產品和工具,但沒有一個做成了,反而網頁前端工程師都成為一個獨立熱門職業了(以前是 UI 寫)。
原因就是作為商業項目來說,團隊需要 “可控性”,機器生成代碼雖然容易,但是如果要修改里面的東西怎么辦?實際情況就是前端對這些外部代碼深惡痛絕,因為改起來太麻煩,而越大的項目改起來難度也越高。而且這個版本的一部分你改了,下個版本工具再生成的代碼要不要兼容你前面寫的東西?
所以現在即使有設計稿直接生成代碼的工具前端也寧愿自己寫,但當他們用到第三方框架的時候,能不動框架里面的東西就不動。想要理解這個感受,只要拿這些框架的組件素材用它們的組件、自動布局形式做完一個項目,你們就會產生 —— 還不如自己重做一遍的想法。
講講AI在B端設計上的應用方法
 
 
所以生成工具,要不然能一次性完整滿足所有需求,要不然就會因為兩三成的缺口形成致命的瓶頸。當然,還有遠比這些復雜的進一步因素,我就不在這里展開。
標準化無法在定制化的面前獲得優勢,這是國內 B 端行業面臨的直接困局,當然這里有壞的影響也有好的影響。
壞的影響,就是頭部 SaaS 企業沒辦法得到快速的發展,推高整個 B 端軟件業的收入水平和吸引力,AI 生成頁面這些技術適用范圍小,沒辦法真惠及全體,行業處于反復造輪子但根本沒辦法停下來。
好的影響,則是頭部的 SaaS 企業發展不起來,市占率就低,它們就沒辦像 C 端市場一樣形成非常顯著的馬太效應,形成事實的壟斷。大家重復造輪子,那么提供的就業崗位才多,才能讓我國的炒粉行業沒有那么卷,競爭沒有那么激烈(???)……
講講AI在B端設計上的應用方法
 
 
如果你關注過 B 端市場足夠多年,你就會明白任何企圖用一種標準、方法論直接平鋪整個行業的做法,注定是徒勞的,而無序、野蠻、熵增才是不變的主旋律。
但 AI 的作用短時間內完全發揮不了嗎?也不是。除了前面提到的一些簡單的項目之外,還有一個非常大的可能,就是中小模型的開發會變得越來越容易,而基于項目自研的界面 AI 生成工具很有可能會普及起來。雖然它們不能隨心所欲生成任何需求的樣式,但可以完全根據業務方的實際需要進行定制,去服務小范圍的群體。
這不代表項目里面就不需要設計師,符合這套項目的標準依舊需要設計師去制定,也需要設計師持續輸出特殊的頁面和組件。
所以,未來很長一段時間內 AI 和 B 端 UI 設計師之間會是互補的關系,而不是替代關系。這也會對崗位要求形成進一步的影響,所以下面是我對 B 端 UI 設計師所需技能的建議:
  1.  
    進一步提升交互能力,尤其是基于業務認知輸出交互方案的抽象思維能力
  2.  
    進一步鞏固項目設計規范的創建能力,深入了解規范的應用和落地流程
  3.  
    進一步提升全局性設計思維,能提煉核心價值觀并在項目中進行應用
  4.  
    進一步了解編程開發邏輯,能更好的配合前后端完成項目的輸出提高效率
這些能力的掌握是 B 端 UI 設計師應對未來市場變化的核心競爭力,也是 AI 在短時間內絕對無法替代的東西。
不管是作為已經入行的,還是準備入行的 B 端設計新人,都不用對 AI 技術在 B 端的影響太過擔心,自怨自艾,因為
如果 B 端項目的設計都那么簡單的話,那么從前端框架普及的那一天起,B 端 UI 設計師就可以集體下崗,而不用等到 AI 應用的那天
換個表述方式,祝大家不會菜到那么輕易就被 AI 給取代了……


作者:酸梅干超人
鏈接:https://www.zcool.com.cn/article/ZMTYzNzg4MA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
 

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

WechatIMG27.jpg

關鍵詞:UI咨詢UI設計服務公司軟件界面設計公司、界面設計公司、UI設計公司UI交互設計公司數據可視化設計公司用戶體驗公司高端網站設計公司銀行金融軟件UI界面設計能源及監控軟件UI界面設計氣象行業UI界面設計軌道交通界面設計地理信息系統GIS UI界面設計航天軍工軟件UI界面設計醫療行業軟件UI界面設計教育行業軟件UI界面設計企業信息化UI界面設計、軟件qt開發軟件wpf開發軟件vue開發

 

好的UI規范讓系統視覺更加統一,交互更加高效~

資深UI設計者

好的UI規范讓系統視覺更加統一,交互更加高效~

Web后臺管理系統套件分享|可視化搭建平臺的創新應用

資深UI設計者

后臺管理系統是企業信息化建設的重要組成部分,它通常具備內容管理、用戶管理、權限設置、系統配置、數據分析和安全管理等核心功能。在選擇或開發后臺管理系統時,應考慮其功能需求、易用性、安全性和擴展性。

Web端設計語言庫——數據可視化

ui設計分享達人

一、可視化原則
數據可視化是把相對復雜、抽象的數據通過可視化手段,表達數據內在的信息和規律,促進數據信息的傳播和應用。
Dreawer Design 團隊總結了以下四個可視化原則,供設計者參考及使用:
1. 準確
數據圖表需精準、如實地反應數據信息的變化特征。
Web端設計語言庫——數據可視化
 
 
2. 清晰
讓設計服務于數據內容,給用戶以最為清晰、明確、迅捷的數據展示。用戶看到可視化圖表時,應能在 5 秒內了解到它的用途,而不是花幾分鐘都不能理解各個數據的含義。
Web端設計語言庫——數據可視化
 
 
3. 簡單
可視化結果應該是一看就懂,不需要思考和過度理解,因而選定圖表時要理性,避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
下面為圖標類型與認知成本對比:
Web端設計語言庫——數據可視化
 
 
4. 美觀
優秀的數據可視化界面,會有一套非常嚴謹一致的版面。這里的一致性需要考慮到布局、結構和內容。
Web端設計語言庫——數據可視化
 
 
二、圖表解構
1. 構成元素
我們從標題、坐標軸、圖例、標簽、提示信息、數據圖形這 6 個大類,對數據圖表進行進一步元素拆解及闡述。設計過程中,需遵循可視化原則來精簡數據圖表,讓用戶快速獲取圖表中的關鍵信息,完成任務。
 
圖表構成 6 大類,元素細分:
1. 標題:圖表標題;
2. 坐標軸:X/Y軸線、刻度線、網格線、X/Y軸標題、X/Y軸標簽;
3. 標簽:數據點、引導線、(文本)數據值;
4. 提示信息;
5. 圖例;
6. 數據圖形:線、矩形、扇形、環形等。
下面為數據圖表的基本構成元素示例(為了便于觀察,某些字母做了大寫處理):
Web端設計語言庫——數據可視化
 
 
除了以上的常規元素,還有常用于餅圖、環形圖中的“引導線”:
Web端設計語言庫——數據可視化
 
 
2. 標題
標題是概括圖表主題的說明文字,一個明確、精簡的標題可以迅速讓讀者理解圖表要表達的內容。
2.1 位置
一般位于數據圖表卡片的左上方。
2.2 使用建議
標題需言簡意賅、符合圖表主題;盡量控制在 20 個字以內,標題寬度盡量不要超過卡片寬度。
Web端設計語言庫——數據可視化
 
 
2.3超長處理
當標題超過長出卡片寬度時,省略標題中間的文字,保住首尾,如“我是...標題”。
Web端設計語言庫——數據可視化
 
 
 
3. 坐標軸
3.1 坐標系
坐標軸包含在坐標系的概念里,因此,我們需要先了解坐標系。坐標系是能夠使每個數組在維度空間內找到映射關系的定位系統,更偏向數學/物理概念。
 
數據可視化中,最常用的二維坐標系有兩種:
笛卡爾坐標系:即直角坐標系,是由相互垂直的兩條軸線構成。常用于柱狀圖、條形圖、折線圖、面積圖等。
極坐標系:由極點、極軸組成,坐標系內任何一個點都可以用極徑 r 和夾角 θ(逆時針為正)表示。常用于餅圖、圓環圖、雷達圖等。
Web端設計語言庫——數據可視化
 
 
補充說明:
1. 坐標軸由定義域軸(X 軸)和值域軸(Y 軸)組成。條形圖中,定義域軸為 Y 軸,值域軸為 X 軸。
2. X軸為水平方向的橫軸,Y 軸為垂直方向的豎軸。以下主要針對笛卡爾坐標系的坐標軸構成進行分析:
3.2 坐標軸
定義:坐標軸指二維空間中統計圖表中的軸,是坐標系的構成部分,它用來定義坐標系中數據在方向和值之間的映射關系。
構成元素細分:X/Y 軸線、刻度線、網格線、X/Y 軸標題、X/Y 軸標簽。
3.3 軸類型
根據對應變量是連續數據還是離散數據,可以把坐標軸分為:分類軸、時間軸、連續軸三大類。
Web端設計語言庫——數據可視化
 
 
3.4 X/Y 軸線
顏色層級:X/Y軸線要比網格線層級高、顏色深,這樣能讓圖表有主次區分。
使用建議:有網格線時,柱狀圖/折線圖會隱藏 Y 軸線,條形圖則是隱藏 X 軸線,以達到信息降噪、突出重點的目的。
Web端設計語言庫——數據可視化
 
 
3.5 刻度線
軸刻度線是軸線上的小線段, 用于指示數值標簽在坐標軸上的具體位置。軸刻度線有 3 種放置方式:置內、置中(即交叉方式)、置外。
位置建議:刻度線置中/置內時,可能會和網格線、數據圖形重疊,所以建議將刻度線置于數值坐標軸外側,以呈現最佳顯示效果。
Web端設計語言庫——數據可視化
 
 
顯示建議:
折線圖:刻度線、X/Y 軸標簽、數據點需要保持在同一垂直線上;
柱狀圖/條形圖:由于單個柱子有很強的對應關系,此時可以隱藏刻度線;
Web端設計語言庫——數據可視化
 
 
 
3.6 網格線
定義:網格線是用來輔助圖表優化映射關系的,我們需要弱化網格線的視覺效果,來增加數據的可閱讀性。
作用:1. 延伸數值刻度至可視化對象中,以便觀察數據值的大小;2. 增加可視化對象之間的對比觀察度。
使用建議 1 :使用網格線時,需遵從主次原則,以軸線為主、網格線為輔;樣式上可采用實線或虛線;避免顏色過重、使用純黑/純白色。
Web端設計語言庫——數據可視化
 
 
使用建議 2 :網格線一般跟隨值域軸的位置單向顯示,柱狀圖、折線圖等采用水平網格,條形圖采用垂直網格。
Web端設計語言庫——數據可視化
 
 
3.7 X/Y 軸標題
軸標題主要用于說明坐標軸數據組的含義,也可理解為“軸單位”。當可視化圖表標題、圖例、軸標簽等已能充分表達數據含義時,可隱藏軸標題。
這樣處理體現了奧卡姆剃刀定律:如無必要,勿增實體。
Web端設計語言庫——數據可視化
 
 
3.8 X/Y 軸標簽
軸標簽是對當前某一組數據的內容標注,用于提高數據的可讀性。
以下從 X 軸標簽、Y軸標簽兩方面進行分析:
a.  X 軸標簽
X 軸標簽的設計重點在顯示規則上。卡片寬度過窄、標簽過多、名稱過長時,X 軸標簽便會出現顯示問題(如標簽重疊等)。
為了解決顯示問題,我們從連續/時間軸標簽(數值類)、分類軸標簽(文本類)兩方面進行分析:
 
  •  
    連續/時間軸標簽
顯示規則:建議等分抽樣顯示、旋轉;不尾部省略。
建議等分抽樣:連續/時間軸,通常由一組等差數列組成,具有規律性,缺失的數據用戶會在腦海中自動補全。所以建議用等分抽樣來避免標簽的重疊問題。
注意:等分抽樣盡量保留首尾數據標簽;隨機抽樣沒有規律,會影響用戶的判斷及辨認,不建議采取隨機抽樣顯示。
Web端設計語言庫——數據可視化
 
 
連續/時間軸標簽是由“關鍵數值”組成的標注點,一般都明確精簡,尾部省略會影響用戶對關鍵數值的辨認。
為了保證標簽的辨識度,我們可以將標簽旋轉 45°、 90° 。極端情況下(圖表寬度極窄),可以同時進行旋轉+抽樣。
Web端設計語言庫——數據可視化
 
 
  •  
    分類軸標簽
顯示規則:建議旋轉顯示;不建議抽樣顯示。
分類軸由幾個離散數據標簽組成,標簽之間獨立存在,無緊密邏輯關系,用戶無法自動補全缺失信息。因此,不能采取抽樣顯示,應盡量展示全部標簽的全部文本。
若標簽橫向展示空間不夠(文字重疊),我們可以將標簽旋轉 45°、 90° 來達到預期顯示效果。若通過旋轉無法滿足需求,可使用條形圖,將分類軸放在Y軸。
Web端設計語言庫——數據可視化
 
 
旋轉方向說明:通常情況下,用戶的閱讀視線為從左至右、從上到下。因此,標簽順時針旋轉 45° 更符合用戶的瀏覽習慣。
Web端設計語言庫——數據可視化
 
 
b. Y 軸標簽
Y 軸標簽的設計重點在標簽數量、取值范圍和數據格式上。標簽顯示區域一般根據最長標簽寬度進行自適應縮放。
  •  
    軸標簽的數量
使用建議:根據米勒定律(7±2 法則),Y 軸標簽數量應控制在 5-9 個的范圍內;Web頁面中,Y 軸常用標簽數為:6 或 7(含標簽0)。
軸標簽的數量越多,橫向網格線就會越多。過多的軸標簽及網格線會造成元素冗余,違背了清晰、準確的可視化原則,也不利于圖表信息的表達及閱讀。
對齊方式:右對齊
Web端設計語言庫——數據可視化
 
 
  •  
    軸標簽的取值范圍
基準線: Y 軸標簽取值應從 0 基線開始,以反映數據的真實性。如果展示被截斷的 Y 軸數據,會導致用戶做出錯誤的判斷。
Web端設計語言庫——數據可視化
 
 
  •  
    軸標簽的數據格式
使用建議 1: 標簽保留的小數位數保持統一。
Web端設計語言庫——數據可視化
 
 
4. 數據標簽
數據標簽是對數據點對應數值的標注,用于直接觀察每個數據點的具體數值。
若圖表主要是用來看趨勢變化、占比大小等,則不需要顯示數據標簽。若想精確了解每組數據的具體數值,則可以顯示數據標簽。
Web端設計語言庫——數據可視化
 
 
4.1 位置
數據標簽位于數據點的上方。
4.2 顯示規則
在不同類型的圖表中,數據標簽的顯示規則不同。我們可以根據數據圖形、數據值的特性,選擇合適的顯示方式,提高圖表的準確性。
a. 柱狀圖
  •  
    基礎柱狀圖
    :數據標簽可顯示在數據圖形內部、外部。
數據標簽在圖形內部的顯示規則:正常情況下,橫向顯示;數據標簽超長時,旋轉 90°;圖形高度 < 數據標簽高度時,不顯示數據標簽。
Web端設計語言庫——數據可視化
 
 
  •  
    分組柱狀圖
    :數據標簽可顯示在數據圖形內部、外部。顯示在內部的數據標簽顯示寬度不夠時,解決方案同上。
Web端設計語言庫——數據可視化
 
 
  •  
    堆疊柱狀圖
    :數據標簽顯示在數據圖形內部。
數據標簽在圖形內部的顯示規則:正常情況下,橫向顯示;數據標簽超長時,旋轉 90°;圖形高度 < 數據標簽高度時,不顯示數據標簽。
Web端設計語言庫——數據可視化
 
 
b. 條形圖
數據標簽在圖形內部的顯示規則:正常情況下,橫向顯示;圖形寬度 < 數據標簽高度時,不顯示數據標簽;條形圖高度需 >= 數據標簽高度。
Web端設計語言庫——數據可視化
 
 
基礎、分組條形圖的數據標簽也可以顯示在圖形外部:
Web端設計語言庫——數據可視化
 
 
c. 折線圖
數據標簽顯示在數據點的上方。
圖表寬度過窄,數據點多且密時,相鄰的數據標簽會出現重疊的問題。此時,我們會采用抽樣的方式顯示數據標簽。鼠標懸停數據點,顯示隱藏的數據標簽。
Web端設計語言庫——數據可視化
 
 
d. 餅圖、環形圖
數據標簽顯示在圖形內部、外部均可。
由于扇形有角度,且形狀相對不規則,對數據標簽的文本長度包容度較低,環形更是如此。所以,當扇/環形分割過多、面積較小時,建議將數據標簽顯示在圖形外部。
Web端設計語言庫——數據可視化
 
 
當然,我們也可以內外部結合使用:
Web端設計語言庫——數據可視化
 
 
e. 數據標簽顏色
數據標簽顯示在圖形內部時,圖形為背景,數據標簽為前景。此時,數據圖形作為背景色,會影響到數據標簽的顯色度及易讀性。
為了確保良好的可讀性,我們通過對圖形顏色 HS 值的判斷,來決定文字的顏色。這樣對比度就在可控范圍內,不會出現可讀性低的問題。
Web端設計語言庫——數據可視化
 
 
由于篇幅問題,剩余內容接下一篇文章展示
 


作者:布魯星人
鏈接:https://www.zcool.com.cn/article/ZMTYzNzI0NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
 

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

WechatIMG27.jpg

關鍵詞:UI咨詢UI設計服務公司軟件界面設計公司、界面設計公司、UI設計公司UI交互設計公司數據可視化設計公司用戶體驗公司高端網站設計公司銀行金融軟件UI界面設計能源及監控軟件UI界面設計氣象行業UI界面設計軌道交通界面設計地理信息系統GIS UI界面設計航天軍工軟件UI界面設計醫療行業軟件UI界面設計教育行業軟件UI界面設計企業信息化UI界面設計、軟件qt開發軟件wpf開發軟件vue開發

B端用研體系框架的搭建

資深UI設計者

B端擁有復雜的業務流,用戶研究體系框架的搭建對于產品的成功至關重要,它不僅關系到用戶的直接體驗,還涉及到產品的長期發展和市場競爭力。通過用戶研究,可以更好地理解B端用戶的需求和使用習慣,從而設計出更加符合用戶期望的產品功能和交互流程。

日歷

鏈接

個人資料

藍藍設計的小編 http://axecq.cn

存檔