92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

一文讀懂用戶體驗地圖和用戶旅程圖

鶴鶴

在產品定義階段我們經常會提到兩種圖:用戶體驗地圖和用戶旅程圖,很多人會將二者混為一談,甚至許多專業老鳥也分不清楚二者的區別,接下來我們通過對比來分析一下二者的區別。

一、用戶體驗地圖

概念(是什么):

用戶體驗地圖是:以大眾視角的方式,將一般用戶在完成一個目標過程中,體驗路徑可視化的工具。這種體驗不拘泥于某種特定的產品或服務,而是從更廣泛的角度理解用戶的行為(不同于用戶旅程圖,用戶旅程圖是針對特定的產品或服務而展開描述的)。

作用(為什么):

用戶體驗地圖是用戶旅程圖的前提。用戶體驗地圖是在用戶畫像和需求分析這個階段做的事情,在信息架構之前要做好的,它能幫我們發現大的機會點,適合從無到有的產品過程:產品從0到1、全新改版、或者新項目開展。

1、不限定產品或服務,描繪用戶體驗路徑

2、理解一般用戶的行為,做初步研究

3、建立體驗基準理解,達成團隊共識

使用方法(怎么做):

在確定本次研究的目的和原則的前提下,按事情發展順序,分別從階段,行動/行為,想法,心態/情緒,痛點,機會幾個方面組織和描述事件

這里僅是簡單示例,大致理解就好

二、用戶旅程圖

概念(是什么):

用戶旅程圖是:將用戶通過某一特定的產品或服務,完成某一具體任務或目標的過程可視化的工具,描述的是某一角色在特定場景下經歷的故事,包括用戶從第一次接觸產品、觸達產品的各個點。

作用(為什么):

用戶旅程圖能讓設計師和其他相關人員理解產品更細節的部分,深入的了解產品的某個模塊,并根據對用戶情緒、想法幫助產品的設計和優化。它通常作為業務邏輯梳理流程的工具來用,和它配和的工具是業務流程圖。

1、準確定位用戶旅程圖中激發用戶快樂或導致痛苦的觸點

2、打破壁壘,在團隊內部建立一個具有廣泛共識的用戶旅程

3、基于共識,將旅程中關鍵觸點分配給團隊內部成員

使用方法(怎么做)

用戶旅程圖可以用在設計過程中的任何時候,作為整個產品設計周期中團隊的參考點。每一個用戶角色或者用戶類型都有自己獨立的用戶旅程圖。我們需要通過以下幾個維度去描繪用戶旅程。

A角色: 這個角色比體驗地圖更具體,更細分,你可能要講當前任務的相關角色都列舉出來,講代表性的用戶都跑一遍流程。

B情景: 特定用戶的特定場景,這里要具體到某一項任務流程

C期望:要解決什么問題

D其他:可以延續使用體驗地圖的行為、想法、情緒線、痛點、機會



使用淘票票app購買電影票的用戶體驗地圖(圖片來源:《步步為贏:交互設計全流程解析》) 

通過以上分析我們了解了兩種工具的區別,雖然兩種工具在顆粒度上有所不同,但是不管哪一種工具都是為了幫助我們了解用戶行為洞察用戶痛點尋求機會點,我們需要在合適的時機選用合適的工具。


作者:齊天大碩
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


B端產品設計01-業務及產品價值分析

鶴鶴

關于需求


來源


C端產品的需求通常來自用戶自身的訴求,沒有明顯的行業特征和限制,會基于產品核心功能去附加其他的功能,探索更多的可能性。比如在聊天社交應用上,加一些娛樂性的小游戲、直播功能等。
而B端,一般由于外部環境改變,如政策法規、技術改革等引起企業對生產管理、工具的升級需求,或是企業人員、市場規模擴張帶來的組織管理、產能提升等需求。
概括的說,就是C端的產品需求傾向于「 無中生有 」的制造需求。而B端,則是基于企業經營過程中「存在的問題」,然后為解決這些問題而促發的需求。


本質


企業經營管理的基本任務是「 合理地組織生產力 」,因此「 B端產品 」可以理解為企業用來提升生產力的「 工具 」,而提升生產力終極目的就是「 更多的盈利 」,而盈利的方式歸根結底就是「 降本和增效 」。所以B端產品的作用,就是讓企業有效的降低運營成本和增加效益。
在此之前,需要先清楚企業在「 做什么 」「 怎么做的 」以及這么做「 還存在什么問題 」,然后確定我們的產品可以怎樣讓企業「 更好更快更省錢地解決、改善這些問題 」,最終獲得更大的經濟效益。




了解業務


剛進入一個新公司、接觸一個新行業時,我們通常只是了解到一些零星的信息,比如公司是干嘛的、業務名是什么、屬于什么行業等等,對業務的了解只是停留在被動的階段,想要做好相關的產品設計,需要主動進行更多的信息收集。圍繞獲取到的關鍵詞,從市場、業務、產業、發展歷程和趨勢等方面,全面深入了解所要服務的企業狀況,建立起對企業業務關系、價值體現的清晰認知。
「 建議 :在信息收集的過程中,可以同步把當前認為有用的信息整理出來,而那些可能有用但暫時還不清楚有什么用的內容,可以把相關鏈接記錄下,并用文字標注自己對這個內容的記憶點和歸類,方便后面再次查看。這樣隨著對業務的了解加深,范圍會越來越大,可以減少后期再次查找資料的時間 」


名詞定義


信息來源:「 XX 」「 XX是什么 」等關鍵詞匯。
關于一些業務詞匯的定義,可以先通過相關的百科詞條,來了解它們的客觀定義,糾正可能存在的認知偏差。
然后再從這些內容中獲取到業務相關的其他信息、關鍵詞匯,擴大信息收集范圍。


產業鏈


信息來源:「 XX產業鏈 」「 XX行業上中下游」「 XX產業鏈分析 」等關鍵詞匯。
關于產業鏈的內容,主要要清楚兩方面的信息:

一是清晰企業處于產業鏈的哪個位置。中游,上游還是下游?

另外是上下游的業務關系,包括產品服務的供需關系和信息、價值的交換關系。




了解產業鏈的信息,有助于我們更全面的了解業務,在跟相關業務人員溝通時,也可以更好地理解對方所要表達的信息內容。


核心業務和目標


信息來源:「 XX業務流程 」「 XX工作規范」「 XX生產過程 」等關鍵詞匯,根據所屬行業的具體性質調整。還有企業方提供的資料。
清晰,以及確定我們產品的核心目標。
通過獲取到的信息,梳理清楚業務的流程、邏輯和相關規則。確定業務的核心是什么,以及要達到的目標是什么。然后從業務的流程中,找到達成目標的關鍵節點,以及可以通過什么方法、技術、工具來實現。





發展歷程


信息來源:「 XX發展史 」「 XX現狀」等關鍵詞匯。
「 當有事情想不清楚時,嘗試回到基礎理論、發展源頭上 」,這個是我自己想不明白一些東西時會采用的方式,比如看相關的一些概論、發展史的書籍。
對于業務也是,從源頭上開始了解,同樣有助于我們更深刻和清晰的了解相關業務發展的最初目的。
從時間的維度上,了解業務從以前到現在、從線下到線上、從手工到電子到信息化等,在流程、使用技術、工具、相關政策標準等方面有什么樣的發展變化。然后這些變化解決了哪些方面的問題,以及目前仍然存在什么問題。
在這個過程中,我們通??梢园l現某些方面的問題,是整個業務發展過程都在關注和尋求改進解決方法的。而相關的需求通常就是整個產業發展的最根本需求點




行業現狀和趨勢


信息來源:「 XX現狀 」「 XX未來發展」等關鍵詞匯。這一部分跟前面的「 發展歷程 」在收集信息過程中一般是重疊的。
「 站在巨人的肩膀上 」、「 知己知彼,超越競品 」。
關于行業現狀,一方面通過行業報告、行業概況等信息來源,了解行業發展狀況和技術水平。另一方面是了解同行產品、同類型頭部產品的水平,清楚目前業務功能的實現情況,以及強調的價值點是什么。站在行業和同行的水平上來進行產品設計,避免局限在自己的主觀世界里。
而發展趨勢,同樣可以反映出行業所關注的產品價值點,清楚行業整體的發展方向,以及期望的發展方向是什么。




標準法規


信息來源:「 XX業務標準 」「 XX操作規范」「 XX質量要求 」等關鍵詞匯,根據所屬行業的具體性質調整,還有企業方提供的資料。
這方面對于一些G端、醫療類產品來說比較重要。
主要是通過相關的政策法規、行業標準、共識等,避免產品設計觸及一些行業風險點。同時清楚產品相關標準和性能要求。


產品競爭力


通過對業務全方位多角度的了解和梳理,我們可以確定業務的核心需求和產品的價值點。但B端產品本質是商品,在市場上同樣存在競爭,所以在清晰了核心業務和價值之后,還需要進一步找到我們產品的競爭力。
即如何讓我們的產品在同類產品中占據優勢,呈現出更高價值,讓客戶選擇我們,甚至愿意付更高的價格。
在前面的分析中,關于「 現階段業務流程存在的問題 」、「 同行新產品情況 」以及「 產業的最根本需求 」等信息,這些都是我們要重點關注的。再結合行業共識、發展趨勢等關鍵信息,分析現有產品跟行業需求預期的差距,從中找到我們產品的機會點,發揮產品的價值。



總的來說


通過對業務的分析,需要清楚:

我們處于產業鏈的什么位置以及上下游的關系

核心業務和目標是什么

業務處理模式的發展過程以及最根本的需求點是什么

行業(業務)目前發展情況如何

我們產品的價值及競爭力在哪


注意點


我自己進行在業務信息收集時,經常會受以往接觸到的信息或者自己假設的信息影響,有時候會在結論上混入一些主觀想法。這是不太好的,因為對信息進行收集整理,就是要以客觀存在的信息為依據,分析真正的產品價值點,而不是人為捏造創造的需求。也就是我們一開始說的,B端需求是基于已有問題來尋求解決方案的。
所以分析過程中要避免受自身的主觀影響,而是基于現實的、客觀的信息情況來分析得出相應的結論。
另外關于同類型產品價值點分析,如果所在行業業務發展還不是很成熟,需要從另外的角度去了解這些功能點的實際使用情況。比如同行們強調了5個功能價值點,實際客戶有3個是基本沒有利用到的,類似這樣的情況。因為可能同行也還沒搞清楚業務方的真正需求,只是在「 創造需求 」或是功能點的性能沒有達到客戶預期。
這一點也是有次在跟實施人員聊天時發現的,目前所在的行業發展也是比較初期的,所以很多東西并不是特別成熟。有幾個我們跟同行都在宣傳的價值點,實際在終端并沒有怎么用,或者使用這個功能的目的跟我們設定的是不一樣的。所以也不能過于相信競品的,盡可能從另外的角度去對比、驗證下。



以上就是關于B端產品設計中的業務和價值分析部分。
感謝閱讀,期待交流。


作者:大魚小魚蝦米
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

閱讀可視化——交互設計沉思錄-1.2管理復雜性

鶴鶴

本次圖示化的信息來源是:
交互設計沉思錄-頂尖設計專家Jon Kolko的經驗與心得(第2版)_[美]Jon Kolko著,方舟譯

今天帶來的是《交互設計沉思錄》第一部分的第二章「管理復雜性」。

主要講述的是交互設計師是如何理解&組織所獲取到的數字、文字數據。

通過這些步驟&方法能夠幫助交互設計師更加清楚信息間的關系,建立很強的心智圖景。

其間也穿插了很多職能相關部分的對比,如「交互設計師與信息架構師」「交互設計師與界面設計師」「交互設計師與電子工程師」。


作者:Viola_1241
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

阿里設計周-智能感知交互

鶴鶴

智能感知交互

注:閱讀此文章大約需要30分鐘



先給大家看兩個案例:大家都很熟悉的,自動感應測溫,不需要人為操控



第二個案例則是nest智能恒溫器,比起傳統的需要人為的去手動觸發調節溫度,他能夠實時感知家里的溫度,基于不同的場景與客戶習慣去調節溫度,比起傳統模式便捷了不少



那么從這兩個案例中,大家可以發現,傳統人機交互與下一代人機交互是有著本質區別的,傳統人機交互一直以來都是輸入輸出的被動交互邏輯,什么是被動交互呢,就是必須有用戶向機器發送指令,機器接收指令,執行后將結果反饋給用戶。而新的交互模式,則是用戶不需要做任何指令輸入,機器自動感知當前的場景,來理解你的意圖是什么,來去主動幫你完成任務。那么這是如何實現的呢,主要是依靠傳感器,算法等實現的。這也說明了我們的生活開始下一代人機交互的新時代。

這也就是今天的主題,那么今天,我會詳細講解,把這個課題講透。包括什么是智能感知交互,他的底層框架模型是怎樣的,以及結合案例是講解他是如何落地使用的,

01 智能感知交互背景及定義



回顧整個人機交互的發展史,經過了不同的階段,從命令行界面,也就是通過手柄,遙控等進行交互,再然后是圖形用戶界面,也就是觸摸屏等交互,再到語音交互,圖像識別等等



人們對于人機交互也從依賴于人去手動觸發,再到趨于自然和本能,隨著技術的發展,我們也迎來的技能感知交互的新時代



在這里也對智能感知交互做了初步定義:是以人為中心,基于傳感器、大數據及AI技術,自動感知用戶情景,理解用戶意圖,主動響應用戶需求,真正提升人機交互效率



那么智能感知交互也有幾個特征,更加的趨于自然,輸入輸出方式更加無感知,智能

02 智能感知交互模型

接下來是最核心的重點,智能感知交互的框架是怎么樣的,他的底層邏輯是怎樣運行的,這也是整套理論知識的基石和核心。



智能感知交互模型主要分為三層:

① 感知層,也就是對當前用戶的情景,進行一個全方位的識別;

② 決策層,也就是我感知后,怎么去做決策,就像人的大腦一樣;

③ 表達層,也就是具體的交互執行,例如界面,音效,光效等等。



那么以剛開頭的無接觸測溫門為例,在感知層主要通過紅外傳感器去感知人的體溫,在決策層則是當遇到發燒的顧客則需要進行干預,在表達層,則會通過音效、光效做出主動的預警的設計表達。



那么我們接下來詳細的看下整個框架模型,那么,感知層又細分為三大模塊:

第一塊為【用戶感知】,第二塊為【場景感知】,第三塊為【行為感知】。 那我這里給他串聯起來,簡單來說就是感知用戶是誰,在什么楊的場景下,做了什么樣的行為。那么決策層則細分為兩大塊,也就是無感知之后怎么做決策,理解用戶的意圖是什么,。那么第二則是做出決策后怎么去做設計表達和輸出呢,受到那些變量因素的影響,這是由設計表達影響因子模型決定的。那么最后一層則是正式做出設計表達,目前表達的介質主要有界面、聲音、光效、觸覺、動作等。那么這張圖是一個大框架,接下來我會詳細的剖析每一層



先講第一層,感知層,就是感知技術,這里在進一步細分為三個板塊,用戶感知,場景感知,行為感知,用戶感知為,用戶性別、地域、年齡等等特征,場景感知則是什么時間、什么地點,當前環境、溫度等等,行為感知則是去感知,你用了什么工具,對什么對象,做了什么操作行為等等。針對不同的業務會有不同的針對感知,例如開頭案例中的體溫測量,他對溫度這一屬性重點感知。大家這里也能想到,世間萬物都可感知,為了方便后續的統計和分析,需要進行加工處理,需要將當前的感知線上化和數據化,同時會將這些數據進行標簽化的處理,那么如何去處理這些數據呢,這里主要分成三類:



1.1 統計類數據

簡單來說就是從傳感器或者線上平臺等渠道直接獲取的數據。舉個例子,比如說登錄網站,那么我們可以獲取用戶ID,從溫度傳感器,我們可以直接獲得溫度。這些都是統計類數據



1.2 規則類數據

簡單來說就是基于一定的規則產生,舉個例子,比如我們規定用戶與設備之間的距離為0~40cm為近距離,,工人每小時生產產品80件定義為熟練工,這些都定義為規則類數據



1.3 機器學習類數據

他是通過機器學習挖掘產生,根據相關屬性進行預測和判斷。比如淘寶上對男女的劃分,他通過你買的商品去判斷你是男生還是女生,你的興趣愛好是什么



那么接下來我們講決策層,那么剛剛我也介紹了整個框架模型,決策層主要有兩部分,現在講述第一部分,也就是整體框架中紅色圈住部分,針對【意圖識別決策模型】進行剖析。簡單來說就是我感知之后去理解用戶的訴求是什么,這里也抽象為四大類決策方向:行為干預、推送建議、意圖預判、自動決策



2.1 行為干預

簡單來說就是我感知到當前的行為是異常、錯誤的,會做出主動預警進行干預。舉個例子,比如圖中的場景,通過攝像頭的圖像識別檢測到工人的操作不規范,會通過光效和音效的預警來進行行為干預



2.2 推送建議

是基于你的愛好去推送不同的內容



2.3 意圖預判

感知之后去預判,你接下來會做什么。比如上圖,當系統之前感知到用戶粘貼了地址和電話信息,那么系統就預判你是不是要寄快遞



2.4 自動決策

比如陀螺儀識別用戶將設備傾斜了多少度,將屏幕做自動關屏



那么前面講述的是決策層的第一大板塊,那么現在講第二板塊,也就是設計表達影響因子模型。簡單來說,就是我已經決策完成,那么我怎么去做決策和輸出,受那些變量因子影響呢



那么這里也抽象為三大類變量因子,用戶感官因子,環境因子,設備因子。

比如在【用戶感官因子】上,會去分析,用戶當前的認知負荷是什么樣的,如果當前是在黑暗的情況下,用戶的視覺負荷比較大的話,那么設計表達是不是就應該以聽覺和觸覺為主。同時我們還會去分析用戶是運動狀態還是靜止狀態,如果是運動狀態那么在設計的時候是不是需要考慮,字體是不是需要更大,方便用戶獲取信息等等案例。

【環境因子】就是環境光線的強弱,噪聲的大小等等,比如設計的時候,是在室外,光線比較強的環境,那么設計的界面對比度是不是就得更強。

【設備因子】就是傳統設計當中,他的輸入通道是物理按鍵,還是觸屏,還是語音,手勢這些,以及輸出通道,有沒有喇叭,指示燈等等。這些都會影響我們采用怎樣的方式去進行設計表達。



那么第三層就是我們最熟悉的表達層,也就是具體的交互執行。常用的表達方式主要有界面,音效,光效,觸覺,動作這幾類,這些大家都很熟悉,這里就不做詳細的講解。



那智能感知交互依賴的技術和條件也是比較多的,所以他是分企業分階段發展的。那么這里主要分為5個等級。從無智能到完全智能,那么目前呢主要處在中間C2這個條件智能的階段中。簡單來說就是機器自動感知部分情景,再加上人的輔助輸入,讓系統完成任務。



03 智能感知設計應用

那么前面說這些都是偏理論偏框架類的,那么下面我會結合案例具體講解智能感知交互是怎樣去落地使用的



那么當有了模型框架后怎樣應用呢,首先,離不開設計流程,和傳統設計流程類似,智能感知交互的設計流程也為:【發現一個機會點,制定對應的設計策略,然后定義具體的設計表達,持續監測進行迭代和優化?!窟@樣構成,那么大家就會想了,那我們的不同之處在哪呢?這其實離不開設計對于技術的洞察力,我們設計對于技術的了解和應用其實貫穿在全流程中。

比如說,在我們在做UED設計中,發現痛點時,我們可以通過問卷調研,訪談調研獲得用戶的主觀數據,也可以通過埋點檢測獲得用戶的行為數據,而我們在優化的時候,除了從設計側出發的體驗優化,那是不是可以不給自己設立邊界,比如從技術出發,讓算法自身不斷學習,讓準確率有所提升。帶著這樣的不同,我來舉一個案例。



案例介紹:一塊沙琪瑪的一生



這塊沙琪瑪出生在一個非常傳統的食品供應鏈公司,她從出生出來到被運送到客戶手中,會經過4個空間,12個節點。而在這層層的校驗中,當我們想知道沙琪瑪的質量,生產日期,和他的位置,需要的是員工的手動介入和對于條形碼的掃描,



但我想更精細化的知道沙琪瑪具體的信息來進行更好的數字化管理,那就變得非常困難。所以我們在想,怎么可以讓對沙琪瑪的管理,變得更聰明一些呢,那改變這傳統模式的機會,就來自于識別技術的發展。



那么現在已經運用起來這樣的技術了,一些商場的衣服和商品上都會有RFID標簽,比如優衣庫,在進行結賬時只要將多件商品投送到結賬框中,就可以一次性識別多個商品完成結賬,這就是RFID的優勢,他可以完成一對多的批量識別,并且具有更大的識別范圍,識別過程中不需要設備和條碼直接對視。



那我們就要想了,如果每個沙琪瑪都有一個RFID碼,那我們是不是就可以批量無感知的識別他們了呢。帶著這樣的技術優勢,我們來回顧整個操作流程,我們發現,在圍繞沙琪瑪的一層一層校驗中,已我剛剛提到的【行為干預、意圖預測、自動決策和推送建議】四個角度來找到更智能的優化點,比如說,當沙琪瑪從車間生產出來,即將被打包的時候,我們如果發現了一個異常,可以怎么處理呢,大家覺得~~~~我們是不是可以進行一個行為干預,來將這個異常及時的告知給用戶,又或者,我們可以進行一個自動決策 ,我們通過自動化設備,來吧出現異常的商品進行自動剔除。



那由于整個鏈路太長,所以我現在呢,以沙琪瑪離開倉庫的最后一個校驗環節為例,來做展開



這個時候,用戶拖著托盤,來到月臺,準備將沙琪瑪裝上卡車,這個時候,如果沙琪瑪上錯了車,那我們就非常難以將他追溯回來了。所以這個時候,用戶的意圖是非常清晰的,那就是及時的阻止這個異常的商品流出倉庫。但我們知道了,那下一步呢,就是讓機器也知道這一個意圖,其實在這個場景下非常簡單,無非是,某人在某場景下做出了某個行為,而這個場景下我們可以通過員工的賬號ID來獲取的員工的身份,



我們也可以通過設備上在運行的秘鑰來獲得當前的實操場景是什么,

還能通過RFID的天線,他所識別到的信號逐漸增強,來發現,啊確實有一個用戶,在拖著商品逐漸靠近,那以上這三個條件,就可以觸發我們對于托盤上的貨物的識別來判斷,他上的車是不是對的呢,數量是不是準確呢,一旦發現異常,我們就需要將信號及時的傳給用戶



那下面問題就來了,我們該怎么表現這個異常,剛才也提到,我們設計的表達是多種多樣的,有界面內的,界面外的,環境空間的。而用戶接收的渠道卻非常的單一,無非是,視覺、聽覺、觸覺、甚至以后可能會有嗅覺。



怎樣選擇合適的感官通道

所以我們在定義一個合適的表達方案的時候,就需要考慮到當下用戶、環境、設備的影響因素,那在我們的場景中,我們應該怎樣選擇一個合適的感官通道來傳遞這個異常信號呢



這就需要我們清晰的了解,在這個場景下,每一個感官通道被占用的情況,這樣我們才能選擇其中占據優勢的那些來做出我們的設計表達



為此,我們總結過往一些學術研究,來將用戶、環境、設備他具體的影響程度進行數值化。比如對于用戶的限制,我們采用VACP的工作負荷模型來量化用戶的各個通道上認知資源被占用的程度。而對于用戶自身的能力限制,我們通過劍橋大學提出的一個無障礙公式,來計算用戶自身能力限制的程度,同樣,我們綜合國內一些常見的標準,來將環境因素,例如,亮度、噪聲、和設備自身的表達能力進行等級的劃分。那大家就要好奇了,那要數值化,那數值化靠譜嗎,我們怎么做這個數值化呢?



那我以VACP工作負荷模型來做一個簡單的展開,他起源與1984年,對于飛行員在駕駛飛機的一個觀察和研究。研究者將他劃分為視覺、聽覺、認知、運動四個維度。同時呢,對于不同難度系數的任務,劃分了不同對資源程度占用不同的等級,這樣,我們就可以像查閱字典一樣,來根據我們需要的任務表現,找到這個通道上對應具體的占用程度



回到我們剛才的場景,當用戶拖著托盤靠近的時候,他需要時刻注意眼前的道路,避免和其他物品碰撞,這個時候,視覺上他對物體的追蹤和跟隨,這個時候呢,在視覺上通道上他會有77%的占用情況



而聽覺上,雖然他不需要聲音來辨別道路,但在這個過程中,有可能有小組長會叫他說,唉,你過來以下,那這樣我們就需要做一個聲音的辨認,那在聽覺通道上,可能會有14%的占用程度



而在月臺上,時刻會有運輸與發動機的聲音,這個大約在70分貝的噪聲,會給用戶在聽覺上有個二級的干擾作用



綜合來看,首先,我們對用戶在觸覺上的反饋通道就被阻斷了,因為設備端離用戶實在太遠了,無法進行一個觸覺上的反饋,



而剩下的視覺通道已經被高度占用了,他的有效性是較為有限的。而在聽覺上,雖然他的占用程度沒這么高,但他收到了環境噪聲的二級干擾,所以我們單一的通過視覺或者聽覺都不足以達到一個有效的反饋作用。



好在現在用戶的認知還是比較充沛的,所以呢,我們可以通過視覺、聽覺、認知三個通道上的整合,來做一個比較有效的反饋。



也就是,當用戶靠近時,首先,她會在聽覺上聽到蜂鳴器的報警,



然后呢,他的注意力就被抓到了燈光的閃爍模式上。,他從他的記憶中記得的燈光的三種閃爍模式上,辨識到了這個閃爍意味著說:這個閃爍,標識著我現在拉得沙琪瑪品類有問題,那我要好好的檢查一下。那我們的反饋呢,就成功的達成了



清晰的視覺表達

那除了剛剛提到的,多感官的反饋,我們在對于界面的設計上,也考慮到了多因素的影響



那第一個就是大家相當熟悉的視覺距離,在我們的生活場景中,,有手持設備的近視距,也有推動設備的中視距,還有推動大型設備上走向通道門的,遠達130厘米的遠視距



那面對這樣不同的視覺距離,和用戶靜態或者動態的移動狀態,我們推導了計算文字高度和文字字號的公式,



然后計算這樣的視覺距離和運動速度的不同,來對關鍵信息做突出化的展示,保證用戶在看到關鍵信息時他的清晰度。那大家可以想想,除了視覺的距離以外,還有什么因素會影響到視覺的表達呢,



那就是環境的亮度。在我們的場景內,盡管有部分都是在室內發生,但也有部分是在室外發生,就比如我們舉的沙琪瑪的例子,他是在月臺發生的場景,那這個時候,就需要我們在色彩的設計上,去考慮到環境亮度的影響,



我們基于 W3C,對于色彩對比度的分析,然后定義了我們的配色方案,在對于室外的環境,我們會采用色彩對比度較高的配色方案,而到了室內呢,我們會動態的將色彩對比度降低,避免用戶長時間注視對比度高的界面,造成視覺疲勞



那既然有設計方案,那自然就有效果評估,



我們將智能感知設計的評估,分為主觀和客觀兩個部分,主觀就是大家比較熟悉的,比如我們感知的這個情景是否準確,能不能夠幫助用戶提高效率呢,整個感受是不是愉悅的,是不是有效的,那么這一塊我們是通過李克特5點量表問卷,和SAM問卷來進行度量,另外一部分則是客觀部分,這一部分我們通過對于算法模型的評估指標來進行度量,比如他的準確率,召回率,精準率來評估他的算法是否可以不斷學習和進步。


思考:如何將智能感知更多的應用到產品設計中?

那智能感知交互的分享就到這里,這里我衍生一下,從剛才的案例中,主要都是實操類的,那么我們是不是可以做個衍生,將智能感知設計的思路方法也延用到產品設計中呢,比如現在的抖音,頭條,他們去分析我們的喜好,主動的替我們進行篩選,于是在使用產品的時候,我們可以說是被動的看內容,被動的看到商品被吸引然后下單。那么B端產品也可以以此類推,傳統模式下,是人登錄后臺,主動去找任務,那么在這里,我們是否可以換個思路,任務主動來找人,通過感知到用戶的身份,我們來主動檢測,他所關注的任務的進度,并且在這個任務落后的時候,主動發出預警和提示,真正的提升用戶的管理效率。


作者:咖喱先森
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

服務體驗 | 使用數據定義框架整合數據與設計思維

鶴鶴

數據在服務主張(service propositions)中發揮著越來越重要的作用。這就引出了一個問題:服務設計師如何以實際的方式為此類命題的數據策略做出貢獻?本文翻譯來自飛利浦的三位設計師寫的一篇有關于數據定義框架的文章,在飛利浦,他們使用數據定義框架將數據與設計思維整合,以啟用和衡量服務體驗。

一、數據在服務體驗中的新角色

數據和人工智能 (AI) 正在推動服務設計的新范式,其中服務體驗變得更加智能、無處不在和高度個性化。數據構成了支持此類新興服務主張的支柱,并在持續衡量其影響方面發揮著核心作用。鑒于數據發揮的重要作用,許多科技公司目前正在制定廣泛的數據戰略(Data strategies)。這些數據策略提供了詳細的路線圖,可推動服務的技術發展,并與業務目標緊密結合。

然而,這些數據策略通常是技術上的努力,側重于平臺之間的數據訪問、數據流或數據存儲等方面。他們往往缺乏以人為本的視角,因為他們很少關注數據收集的體驗、數據如何反映現實世界的體驗,或者人們在日常工作中如何與數據和人工智能進行交互。

二、數據策略及其對服務設計視角的需求

服務設計師通常只是間接參與這些數據策略的制定。雖然服務藍圖可能有助于推動數據戰略發展的業務路線圖,但我們看到,當服務設計視角更加結構化時,它們的質量會顯著提高。

服務設計是數據戰略的一個關鍵方面,因為它提供了更加人性化、集成化和整體化的體驗視角。它的優勢在于允許理解復雜的關系以及多個細節如何影響整體體驗。例如,它可以幫助確定在何處以及如何收集數據以獲得最高質量的結果,或者它可以為其他復雜的技術問題確定簡單的流程變通方法。

由于這種附加價值,精通數據的服務設計師可以在構建以現實世界工作流程和體驗為基礎的以人為本的數據策略方面發揮關鍵作用。因此,數據策略應該是學科之間的協作努力,以確??梢詮牟煌慕嵌葯z查和設計整體挑戰。

三、將數據與服務設計集成的工具

盡管服務設計提供了價值,但我們看到服務設計人員本身通常缺少在這種數據戰略協作中取得成功的工具和方法。雖然我們在為生產或開發團隊創建特定要求方面有著悠久的歷史,但在數據策略方面,我們通常不會就數據要求或需求以相同級別的粒度和特異性進行溝通。

這部分是因為我們必須進一步發展我們的數據能力,但也因為沒有多少實用的框架可以讓設計師對數據策略做出有意義和實際的貢獻。如果沒有正確的工具來指導我們的探索并與我們的技術同事進行交流,為數據策略做出貢獻可能會讓人不知所措。

我們的數據定義框架首次嘗試為服務設計人員提供正確的工具,使他們能夠積極參與數據戰略活動。

四、數據定義框架

我們的數據定義框架挑戰(服務)設計人員考慮他們明確的數據需求,促進對這些需求的探索,并在將圍繞數據的思想構建成具體的數據需求方面發揮著重要作用。我們沒有引入完全獨立的附加流程,而是將我們的數據定義框架整合到現有的工作方式中,并旨在讓那些對數據世界經驗有限的人們能夠了解到它。

具體流程是:

  1. 以現有的體驗地圖為基礎;
  2. 識別意圖和數據點;
  3. 使用數據定義框架確定優先級。

1. 以現有體驗地圖為基礎

在我們嘗試構建自己的數據定義的前幾次,我們非常掙扎。從頭開始時,想出有意義的數據點似乎不是隨機的,這是一項挑戰。我們探索了如何從角色、場景或架構圖開始,但這些方法給出的結果要么過于膚淺,要么過于技術化。

隨著時間的推移,我們了解到(體驗)地圖為搭建和構思數據定義提供了寶貴的基礎。我們在這里使用體驗地圖作為容器術語,因為這些地圖可以是服務藍圖、工作流程圖、用戶旅程甚至是 UI 流。

基本上,任何類型的地圖都可以概述用戶如何通過一組具體的操作來經歷體驗。地圖的顆粒度將表明數據定義的性質。例如,如果它是一個 UI 流,數據定義將更多地關注微交互或應用程序功能的體驗含義。相比之下,如果選擇的地圖是一個高級工作流,那么數據定義將更多的是關于跨接觸點、整體的假設數據。

為了舉例說明,我們使用下圖所示的圖解(簡化)體驗圖,該圖顯示了醫療機構中的患者如何通過冠狀動脈支架置入術:

  1. 患者首先會見臨床醫生進行攝入咨詢;
  2. 后來被要求進行手術;
  3. 由團隊討論;
  4. 在進行微創手術之前。
  5. 之后,患者通常會過夜以恢復,同時受到密切監測。
  6. 最后,患者出院并被鼓勵為更健康的生活方式做出行為改變。

從Touchpoints到Datapoints:服務體驗的數據定義框架

與上面提到的其他類型一樣,此地圖有助于在適當的上下文中可視化數據,以及與之相關的體驗。該地圖側重于用戶操作和事件,因此是開始以人為中心的數據探索的良好基礎。

2. 識別意圖和數據點(Datapoints)

下一個合乎邏輯的步驟似乎是用數據點注釋地圖。但是,這些數據點的范圍可以從更高級別的指標(例如患者報告的結果)到較低級別的數據指標(例如護士在患者監視器上單擊后退按鈕的頻率)。這里的問題是有幾乎無限數量的選項可供探索。

為了指導數據定義過程,我們引入了“意圖(intents)”。您可以將這些意圖視為您希望通過數據實現的目標。我們總是使用兩種截然不同的意圖,它們直接反映了使用數據的不同方式:

  1. “衡量(measuring)”意圖,旨在針對我們作為設計師或公司需要衡量的事物,以便學習和發展我們的解決方案。
  2. “啟用(enabling)”意圖,它側重于我們希望使用這些數據啟用的體驗。

然后可以將數據點連接到這些意圖,以明確這些數據點所扮演的角色。這會產生一個定義明確的關系模型,有助于以后制定戰略和確定優先級。定義意圖和相關數據點總是有點反復練習,其中新意圖觸發新數據點需求,新數據點激發新意圖。

(1)識別“衡量”意圖

智能產品、服務和解決方案不是一成不變的;它們可以遠程配置、更新,并且可以自行學習以適應和發展。為了推動這個過程,我們需要創建反饋循環。“衡量”意圖在定義學習目標方面發揮著關鍵作用。

它們可以包含更多以結果為導向的、評估性的目標,或者更具探索性、以洞察力為導向的目標。例如,評估性“衡量”意圖可以是在引入新的患者摘要視圖后評估吞吐量時間的變化。一個更具探索性的“衡量”意圖可能是深入了解患者如何體驗入院咨詢的不同部分,以發現新的改進機會。

這些意圖也可以是細化的或整體的。它們可以與體驗圖中的特定接觸點相關聯,例如,如果新的患者儀表板可以幫助護士更快地了解患者的病史。但它們也可以跨越該體驗地圖的多個階段,捕捉患者如何體驗整個過程。

將屬性分配給“衡量”意圖,就像上面提到的那樣,有助于引導設計師思考正確的方面。我們在確定屬性時可能會問的問題可能是:“需要多少數據?”、“持續多長時間?”、“意圖是否與更高級別的體驗驅動因素相關聯?”和“評估目標的目標是什么?”

盡管其中一些屬性也可能與您的用例相關,但我們鼓勵您探索哪些屬性在您的域中有意義,并在您的定義中始終如一地使用它們。然后可以使用這些“衡量”意圖指導進一步的數據定義。設計師可以考慮他們需要哪些數據來回答這個問題,而不是擁有無限的選擇。

從Touchpoints到Datapoints:服務體驗的數據定義框架

(2)識別“啟用”意圖

智能產品、服務和解決方案需要數據來了解它們所處的環境以及人們在它們周圍的行為方式,以便有意義地適應不同的情況。為了明確我們想要啟用哪些體驗,并定義提供這些體驗所需的數據,我們引入了“啟用”意圖。

“啟用”意圖是對啟用某種體驗的功能或特性的描述。重要的是定義實現這些體驗所需的數據,以便制定長期的數據戰略。

“啟用”意圖中描述的功能可以根據其抽象級別而有所不同。在更詳細的接觸點級別,“啟用”意圖可以指特定的應用程序功能。圖像中的自適應 UI 功能就是一個很好的例子。在更高的體驗旅程級別,“啟用”意圖可能更多地涉及服務解決方案(它將來自接觸點集合的數據匯集在一起)。

與“衡量”意圖一樣,“啟用”意圖可以具有不同的屬性,有助于進一步定義它們。對于給定的“啟用”意圖,我們經?;卮鹬T如“它已經可用還是計劃用于未來?”、“它集成在哪個接觸點?”、“它針對哪些參與者?”等問題,以及“它的預期影響是什么?”

“衡量”和“啟用”意圖通常是相關的,因為先驗往往旨在了解后者的影響。因此,這些意圖也經常共享相同的數據。

從Touchpoints到Datapoints:服務體驗的數據定義框架

(3)識別數據點

這兩種意圖都為數據定義了明確的目的。我們已經簡要介紹了它如何在定義具體數據點方面發揮指導作用。數據點是對正在收集的數據的簡單描述。這些數據點始終連接到地圖中的特定部分,在這些部分可以獲取這些數據,或者將其反饋入其中。這些連接可以是我們或其他人擁有的接觸點,也明確需要第三方加入一起整合。

數據點也有自己的屬性來指導討論。為了提倡對這些數據的經驗觀點,不僅要定義收集的數據,而且要關注收集數據的方式和地點的經驗。其他屬性可以是是否自動收集數據,例如醫療程序的持續時間;或者是否手動收集,例如在手術后問卷中記錄的患者報告的結果。其他屬性可以包括數據是客觀的還是主觀的;是連續收集還是定期收集;以及是否始終需要或僅在某些條件下需要。

3. 使用數據定義框架確定優先級

在反復定義“啟用”和“測量”意圖以及與之相關的數據點之后,我們最終得到了一個如下圖所示的關系模型。

從Touchpoints到Datapoints:服務體驗的數據定義框架

該模型中的意圖和數據點可能比可以輕松解決的要多。因此,數據定義框架有助于確定未來路線圖的優先級,這一點很重要。緊密關聯的關系模型有助于從整體上看待這一挑戰。

我們現在可以評估這些數據點所產生的影響,而不是只關注實施數據點所需的復雜性或工作量。雖然在整個旅程中跟蹤患者體驗可能很困難,但這樣做可能是理解這兩種類型的許多意圖的關鍵因素。在這種情況下,將他們的收集優先于其他多個更易于實施的數據點的收集可能是值得的。

確定哪些數據點在路線圖的哪個階段獲得優先級對于制定成功的數據策略至關重要,因為它直接關系到何時可以實現哪些“啟用”和“衡量”意圖。

五、未來展望

我們創建了數據定義框架,使服務設計人員能夠開始為他們設計的服務的數據策略做出務實、有意義的貢獻。這是我們將“數據思維”與服務設計相結合的第一步。

在飛利浦內部,我們已經將數據定義框架應用于各種服務設計挑戰。我們與具有不同數據素養的利益相關者一起使用它,并從各種體驗地圖開始。它主要被認為是探索數據機會的工具,也是圍繞數據構建思想的一種方式。盡管該框架是在醫療保健領域開發的,但我們相信它在其他領域具有潛力。我們已經看到它被應用于更通用的客戶體驗、專業培訓服務和日常消費者服務,而不會面臨重大挑戰。

我們覺得這個框架現在對(服務)設計師來說特別及時,因為數據開始在我們設計的所有體驗中發揮更突出的作用。作為設計師,我們的創造力和想法不應受到現有數據的限制。相反,我們應該在定義數據策略方面發揮積極作用,使我們能夠隨著時間的推移編排有意義的、個性化的體驗。


來源:人人都是產品經理     作者:陳昱志Yeutz
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

互聯網醫療產品組成分析和優勢的建立

鶴鶴

從事互聯網醫療行業的年頭也不短了,做過慢病的健康管理產品,負責過互聯網醫院整條產品線的建設,也參與過AI健康檢測硬件產品的設計。

行業中互聯網醫療行業中一些公司在對外的宣傳中也衍生出了數字醫療、數智醫療等新名詞,無論是服務于醫生、還是醫院或者是藥企或者是保險,最終落地或者說繞不開的都是C端患者。那么,如今市面上互聯網醫療C端產品的組成成分都有哪些呢?

一、人體的重要組成成分

在談互聯網醫療C端產品的組成前,我們先用一小段介紹下人體有哪些重要組成部分:

1. 人體五臟六腑

“臟”是指實心有機構的臟器,“腑”是指空心的容器。

人體五臟包含:心臟、肝臟、脾臟、肺臟、腎臟。

人體六腑包含:小腸、膽囊、胃、大腸、膀胱等分別和五個臟相對應的五個腑,另外人體的胸腔和腹腔分為上焦、中焦、下焦,統稱為三焦,是第六個腑。

五臟和六腑的關系:臟與腑是表里互相配合的,一臟配一腑,臟屬陰為里,腑屬陽為表。臟腑的表里是由經絡來聯系,即臟的經脈絡于腑,腑的經脈絡于臟,彼此經氣相通,互相作用,因此臟與腑在病變上能夠互相影響,互相傳變。

2. 人體的八大系統

人體各個器官按照一定的順序排列在一起,完成一項或多項生理活動的結構叫系統。

人體的八大系統:消化系統、呼吸系統、循環系統、泌尿系統、運動系統、生殖系統、內分泌系統和神經系統。

八大系統在神經和內分泌系統調節下,互相聯系、互相制約,共同完成整個人體的全部生命活動,以保證人體生存和種族綿延。

二、互聯網醫療C端產品的組成成分

看到這也許大家會納悶,文章標題是“互聯網醫療C端產品的組成和優勢的建立”,PM大白怎么在開篇講起人體的五臟六腑和八大系統呢,因為PM大白認為產品同樣也是一個生命體,產品的0-1即是產品的出生、產品的迭代即是產品的成長、產品的矩陣即是種族的綿延,那么產品作為一個生命體,并且是互聯網醫療產品,那么她同樣存在著類似五臟六腑八大系統的組織,只是組織的名稱不一樣,大家不這樣稱呼而已。

不多說了,下文進入正題,看看互聯網醫療C端產品的組成成分有哪些:

上文中提到了人體的五臟六腑:“臟”是指實心有機構的臟器,屬陰;“腑”是指空心的容器,屬陽。

那互聯網醫療C端產品中(下文中簡稱為“產品”)的五臟六腑PM大白如何定義呢?

  • 臟:完全通過線上流程即可完成功能目標的模塊,定義為產品的“臟”。
  • 腑:需要通過線上線下配合,并且對用戶需求來說,線下部分才是體現產品核心價值的模塊,定義為“腑”。

1. 互聯網醫療C端產品的“五臟”

  • 健康檔案:線上線下與醫療+健康相關的所有數據記錄;屬于整個醫療服務的基礎建設層。
  • 醫患溝通:患者與醫生在線問診、續方開藥等。
  • 患者管理:醫生側管理多名患者的工具,涉及患者標簽、分組、群發等。
  • 自助工具:不需要醫生或醫院線上直接參與,患者即可完成的“自我檢查”,類似疾病百科、健康評估、疾病自查等。
  • 社交模塊:疾病社區、患者與患者間的交流。

2. 互聯網醫療C端產品的“六腑”

  • 體檢服務:線上預約,線下體驗。
  • 門診服務:線上掛號,線下就診。
  • 上門護理:線上預約,線下到家護理。
  • 住繳掛查:線上繳費,線下就診。
  • 診后隨訪:線上或線下就診,線上或線下醫生隨訪。
  • 實物商品:商城中實物商品,藥品,設備,以及健康險。

3. 互聯網醫療C端產品的“八大系統”

上文中選擇互聯網醫療C端產品中的幾個重要模塊定義為其“五臟六腑”,那互聯網醫院C端產品中將這“五臟六腑”串聯起來的八大系統又有哪些呢?其實本質是各個維度中的供需關系的維護。

  1. 人:角色體系;參與互聯網醫療產品正常運行的所有角色以及角色間的關系;包含:患者、醫生、醫院、藥店、藥企、醫療信息系統提供商、監管平臺等;涉及:角色定位-供需分析-權責分利-習慣養成。
  2. 錢:交易體系;涉及供需關系利益交換的一切流程;涉及:交易角色-交易物質-交易流程-交易結果。
  3. 物:商城體系;主要指為其中一個或多個角色提供交易的集中平臺;涉及:物品篩選-入庫上架-精準推薦-購買使用。
  4. 事:服務體系;主要指線上的醫療+健康服務的核心流程;主要包含:問診、續方、健康管理等;涉及:流程分析,事件開始-事件組成-事件步驟-事件結果。
  5. 數據:健康數據流;主要指與醫療和健康相關活動的一切數據記錄;涉及:數據收集-數據存儲-數據分析-數據應用。
  6. 信息:健康知識;主要指與醫療和健康相關的醫學知識和信息;涉及:信息產生-信息分發-反饋分析-信息應用。
  7. 認知:產品認知;主要指相關角色對互聯網醫療的接受程度和參與意愿強度以及其變化傾向,和對互聯網醫療產品或行業價值的認知程度。
  8. 周期:生命周期;角色在平臺的生命周期,主要指相關角色在互聯網醫療產品中不同時間階段前提下,以上各個維度的變化規律分析。

三、互聯網醫療產品的優勢在何處建立

上文我們介紹了互聯網醫療產品的核心組成模塊,但是好像現在互聯網醫療行業并沒有迎來爆發期或者說沒有得到大范圍的應用和產生價值,那又是為何呢?

之前我在生物實驗室工作,那個時候社會上就說生物行業是朝陽產業,未來可期;后來我轉行到了互聯網醫療行業,身邊的朋友又說,互聯網醫療可是互聯網垂直行業中的朝陽行業,可是互聯網醫療這個朝陽一直在海平面附近起起落落,一直沒有升起來,更不用說什么日到中天的趨勢,反而是不溫不火。

更有甚者,同行們開始懷疑互聯網醫療的價值到底在何處,難道互聯網醫療就是賣藥賣保險賣醫療周邊延伸服務的工具嗎?個人沒有懷疑過互聯網醫療價值,至少從沒有懷疑過這個行業的未來價值的,只是限于當前的用戶就醫習慣、政策法規、相關技術以及醫療體系,醫療是一個嚴肅的產業,必須循序漸進與互聯網、AI等新技術結合,這才是負責任的醫療行業從業者該有的態度,因為醫療健康事關生死。

如何在現在的這個行業處境下默默地建立起自己的優勢才是正道,那么互聯網醫療產品的優勢在何處建立呢?其實有兩個方向:資源和技術(也許對從事互聯網醫療行業的大家來說,這就是大白話)。

1. 資源型

資源型優勢:通過不斷地積累醫療業務相關的核心資源建立優勢。

1)數據優勢

定義:這里提到的“數據”僅指患者在所有醫療、健康活動中產生的用于組成患者健康檔案的數據。

來源:線下醫院(核心)、線上問診、用藥記錄、醫保數據、健康險數據、移動設備檢測數據……

政策:近期國家相關部門出臺了《“十四五”全民健康信息化規劃》正是一個信號,出于患者個人醫療健康數據的重要性、復雜性、安全性、隱私性,也只有國家力量才有這種能力去實現;以下是從《“十四五”全民健康信息化規劃》摘錄的部分信息 :

堅持統籌集約,共建共享。堅持統籌布局,深化共建共用,增強全民健康信息化發展的系統性、整體性和協調性,以構建大平臺、大系統、大目錄為導向,加大信息化建設統籌力度,加強信息化基礎設施集約化建設,鞏固政務信息系統整合成果,進一步破除數據共享壁壘,暢通數據共享通道,推進數據全生命周期管理。

到2025年,初步建設形成統一權威、互聯互通的全民健康信息平臺支撐保障體系,基本實現公立醫療衛生機構與全民健康信息平臺聯通全覆蓋。

數字健康服務成為醫療衛生服務體系的重要組成部分,每個居民擁有一份動態管理的電子健康檔案和一個功能完備的電子健康碼,推動每個家庭實現家庭醫生簽約服務,建成若干區域健康醫療大數據中心與“互聯網+醫療健康”示范省,基本形成衛生健康行業機構數字化、資源網絡化、服務智能化、監管一體化的全民健康信息服務體系。

目的:打通各個醫療數據孤島,構建患者全生命周期的健康檔案、屬于整個現代醫療體系的底層基礎建設,服務于上層所有與醫療相關的應用服務,對線上互聯網醫療尤為重要;

最終在健康數據這塊的發展趨勢,應該是國家完成居民全生命周期的健康檔案的統籌和建設,制定授權標準,然后通過授權的方式提供給具備相關資質的互聯網醫療企業在其產品中進行調用。

我們選取了騰訊醫療官網以及騰訊醫療面向C端用戶的一款產品:騰訊健康(小程序),看看對方在數據建設方面的的產品。

①騰訊官網

產品服務對象劃分為了兩類:醫療機構與患者、區域醫療。

面向不同的服務對象,騰訊提供了不同的解決方案;面向醫療機構與患者,解決方案有:

  1. 微信醫保支付
  2. 電子健康卡
  3. 腫瘤助手
  4. 安全流轉平臺

前兩種方案的實現必然需要與醫保系統和醫院his系統的對接,則涉及醫保數據和his數據的互通;后兩種方案則涉及到疾病和藥品數據知識庫的建設。面向區域醫療,解決方案是:微信電子健康卡開放平臺、全名健康信息平臺、區域智慧醫療平臺、區域大數據云,這類方案完全符合了《“十四五”全民健康信息化規劃》的目標。

②騰訊健康小程序

進入首頁是不是發現與其他互聯網醫療APP呈現的內容有所不同呢,騰訊健康既沒有直接呈現大量的醫生和科室,也沒有直接呈現各種醫療服務包,金剛區顯示的是“醫保電子憑證”和“防疫健康碼”,首頁還還在功能區顯示了“我的醫?!比肟?,以及在服務推薦區1號位顯示“本地醫保碼”領取和查看入口。

2)知識優勢

定義:這里提到的知識主要指與健康管理,疾病治療相關的醫學知識。

來源:醫生、醫院、協會、醫學百科以及權威醫學書籍。

形式:直播、短視頻、音頻、圖文。

目的:培養患者的健康習慣、提供患者自我健康管理的科學方法、提高患者對疾病各方面的認知以及自我治療和線下就醫的各種渠道和流程信息,對產品來講是前期的流量入口。

我們選取百度健康官網和騰訊醫典APP,看看同行在醫療健康知識這方面的重視程度和所做的努力:

我們可以看到百度健康的PC端官網沒有一個醫生,沒有任何線上問診等其他醫療服務入口,展示的是不同形式的疾病知識,其中包含短視頻、直播、圖文等形式,其實百度健康是用它的“醫典”模塊作為的PC端官網,如果不是百度健康搞錯了,那就足以看出百度健康認為健康知識這塊的重要程度;還有就是騰訊很早就做出了一款定位醫學科普知識的產品——騰訊醫典。

3)服務優勢

定義:這里提到的服務主要指線上的問診、開藥、健康管理、掛號、等需要醫生或其他專業醫療健康從業者或醫療機構參與的業務。

來源:醫療機構、專家、醫生、藥師、健康管理師、營養師等。

目的:醫療健康服務是最直觀的能讓患者感受到當前產品所具備醫療健康價值的模塊,也是能幫助患者解決實際需求的重要模塊,對定位于互聯網醫療的產品長期發展來講,醫療健康服務必定是后期的主要盈利入口,互聯網醫療也必然會像現在的線下醫療體系改革一樣擺脫以藥養醫的依賴。在所有的互聯網醫療產品中,好大夫便是聚焦服務和堅持線上醫療服務為主要方向的一款產品。

4)商品優勢

定義:這里提到的商品主要指藥品、健康險、保健品等與醫療健康相關,由醫療服務延伸出的需要付費交易的實物產品。

來源:藥企、健康險公司、移動健康設備等。

目的:在患者對線上醫療健康服務付費接受度還沒有那么高時,采取的一種盈利生存手段;如果一家互聯網醫療公司是靠藥品、保險或其他非服務產品維持發展和成長的話,醫療服務型產品只是為這些盈利手段服務的話,也許會是一個成功的生意,但是個人寧愿將這類公司直接稱之為醫藥電商公司、醫療設備提供商,而不是今天全篇講的互聯網醫療公司(或產品);目前在京東健康上的藥品收入與醫療服務收入占比接近7:1。

2. 技術型

技術型優勢:通過發明或優化新的技術讓線上的互聯網醫療服務流程發生革命性的變化,并且獲得醫生、患者以及醫療權威機構或政府相關單位的認可。

1)檢測技術

大家去線下就醫見到醫生后的第一件事是做什么?是各種抽血化驗等檢查,檢查前的醫生問診只是為了縮小檢查范圍。

我們必須接受的一個現實就是:如今沒有設備檢查,沒有具體定量的檢查指標,醫生可能都不會下診斷,這也不能怪醫院或醫生,西醫就是這個流程:檢查-診斷-給藥或手術,而這個流程中哪些是可以在線上真正解決的呢?我想應該只有“給藥”了,這也是目前大多數互聯網醫療公司以藥品為突破口的原因之一。

說到第一步:檢查,互聯網醫療是無法在線上做到醫院要求的各種指標檢查的,所以最終線上問診,醫生給出的結果多是“可能”、“建議線下就診”等結論,同時也是現在線下問診開藥不支持首診的原因,因為在沒有線下確診的情況下開具處方藥是有很大風險的。

SO如果患者不用去醫院就能完成醫院要求的部分疾病確診的核心指標的檢測,理想情況下那是不是互聯網醫療就可以實現部分疾病的檢查-診斷-給藥的流程了,特別是常見的慢性病或者季節性疾病。

這就依賴于便攜式家庭健康檢測技術和設備的發展了,例如:血管納米機器人,全體24小時記錄生物體的各種生理指標。

2)溝通技術

患者另一個不愿意接受線下問診治療,或不相信在不去醫院的情況下,就可以給出一個滿意的健康問題的解決方案的原因是——信任的力量。

因為千百年來患者就醫都是與醫生面對面接觸進行檢查診斷,線上的方式中,也許目前的視頻溝通比起之前的文字或者語音的方式更進了一步,但是不光是醫生無法確認是否完整地了解到了相關的病情信息,就是患者自己也會擔心自己是否把病情完整陳述給了對面的醫生,醫生是否有認真在給自己看病。

因為每個患者的語音表達力都不同,很有可能患者對癥狀的描述并不是真實的疾病表現;更何況線下就醫,患者都有可能去多家醫院咨詢問診。

這種線上的溝通方式與面對面的溝通相比,以及加上患者早已習慣的線下就診方式,新的溝通問診形式讓患者對另外一頭醫生的信任感大打折扣。

文字溝通到語音再到視頻,問診溝通方式在不斷進步,但還不夠,與線下相比越真實越好,越趨于線下面對面的體驗越能增強患者的安全感和信任感,也許目前比較火的虛擬現實、元宇宙在溝通方式上的應用在一定程度上改變這種狀態。

3. 小結

以上提到的案例基本并不會在單一維度努力去沉淀自己的產品優勢,而多會綜合去發展,但是需要根據自身的優勢和能力范去選擇建立優勢的方向。

例如做醫藥電商的建東健康,也在大力發展醫療服務,家庭醫生方面的產品;專注做醫生問診服務的好大夫也有在向藥店、醫院合作方面發展;上文還未提到的平安健康更是在醫療服務、醫藥、健康險等方面同時發力(目前平安健康財報顯示其在醫療服務和醫藥上的營收占比已接近1:1)。

其實上文提到的這些維度大致可以分為:基礎能力建設層(數據+技術)、知識引流層、醫療服務層、醫療商品層。

四、總結

醫療醫藥醫保醫健康,診前診中診后整閉環;線上線下,院內院外,醫院醫生醫護醫全家;上有政策,下找對策,To G To B To C To all in;深挖坑,廣積糧,醫路漫漫修遠兮!

作者:Andy
轉載請注明:人人都是產品經理

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


信息層級,沒你想象的那么難

鶴鶴

01.寫在前面

大家有沒有遇到這樣的問題,當你面對非常復雜的信息時,在進行信息整理設計時,往往會陷入比較糾結的場面,不知道怎么把這一堆信息進行比較好的排列。如果你剛好也有這部分疑問,這篇文章適合你繼續閱讀。



本篇文章會提供一種解決排列問題的簡單底層邏輯,我們可以圍繞這個邏輯去排布我們的頁面,從而讓整體排版變得更加清晰合理。

02.信息層級的作用

信息層級存在于我們目前看到的每一個畫面。它本質上是信息組織的一種方式,通過信息的放大縮小和對應的位置,能夠將復雜的信息分為不同的模塊呈現在我們的視野中。



大家先簡單看一下圖中兩個畫面,你就能夠直觀感受到信息層級對于用戶認知的作用。



不好的信息層級就像左圖一樣會讓畫面比較雜亂,難以進行視覺上的識別。而優秀的信息層級就像右圖一樣能夠讓我們快速且準確的識別出畫面想要傳遞的信息。

因此信息層級的排列不僅影響視覺上的美觀度,更影響人們在檢索信息時候的效率。尤其是對于B端復雜場景,我們不僅需要考慮清晰傳遞業務價值,合理的信息層級劃分也是提高產品體驗的重要部分,好的信息層級則意味著更好的使用體驗。

03.如何做好信息層級

既然信息層級對于使用體驗比較關鍵,那么怎樣做好頁面的信息層級則顯得尤為重要。而目前網上的資料也是參差不齊,我也曾為此類問題查閱了大量資料,想要找到一個簡單高效的答案。



但目前查閱到的資料幾乎都在講排列的四個基本原則:對比、對齊、親密、重復。不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用。但也闡述得太過寬泛,讓人很難在實際中更有效地利用。

即使我對排版四個原則非常熟悉,在面對復雜層級排版時仍會面對困惑。因此我對目前頁面上比較好的頁面排版進行了進一步的探索:



經過線上頁面與概念的整體研究發現,他們在遵循排版原則的基礎上,本質上都存在一個簡單的邏輯:那些優秀的頁面設計都把主內容的層級控制在了三層左右,如下圖所示。



因為三層左右的層級是最容易被用戶感知,且視覺上不易混亂。超過三層后隨著層級越多復雜性會相對增加。

比如我們看下面這兩個例子,左邊層級因為特別復雜,造成用戶獲取信息效率變低,而通過層級的轉換,我們可以將其變得更簡單且易讀。



再舉一個例子,我們在大部分場景見到的純文字排版基本都離不開以下幾種形式:



因此,我們需要在排版時需要首先思考一個邏輯:那就是盡量將我們的內容層級控制在三層左右。且這三層內有比較明顯的對比關系。



有同學看到這肯定要問了,這個道理我也懂啊,可是在實際業務中大部分時間拿到的信息太多,根本做不到保持在三層以內。別急,這篇文章的重點當然不是告訴你這么簡單的道理,而是在面對復雜層級的時候,我們應該怎樣去控制它的層級表現,從而讓它在最終呈現上保持在三層左右,讓用戶獲取信息的效率更高。



其實我們在實際中的大部分優秀頁面,在本身的信息層級上可能都非常復雜,但我們可以通過一系列的方法,去減輕這種多層級的影響,從而讓我們的頁面即使承載了很多復雜的信息,也能變得更加簡單清晰。那我們接下來就闡述一下對復雜層級的處理方案。

04.信息層級前置處理

這可能是被很多人忽略的一點,就是信息的前置處理。我也曾遇到過某些信息很復雜導致排版很困難,但卻忽略了這些信息是否真實地被需要。這就需要我們從源頭上進行第一層的判斷。



源頭降低的本質就是判斷我們當前所要呈現的信息是不是必要的。其實這也是在目前工作中遇到的場景,比如某些時候產品給到了我們很多信息,但我們并不一定會全盤接受,而是通過當前頁面的業務場景去進行判斷。確定每個信息的合理性,從而可以決定有些元素是否可以刪減,提高整體信息設計的一致性。

1. 當前的所有信息真的需要存在于頁面中嗎,如果去掉某些信息有無影響。

比如當你在進行打車的時候,當你輸入目的地之前,一切其他的信息都無需呈現。當你輸入目的地后,車輛的相關信息和價格才會進行呈現,當你打車后,司機的相關信息才會進行呈現。這些都是按照用戶的使用場景來進行對應的呈現。



2.當前信息的重要程度是怎樣的,對于某些不重要的信息是否可以通過隱藏的方式展現。

當你拿到一堆信息,信息的重要程度就決定了我們需要將哪些信息作為主體,哪些信息作為次要輔助信息,哪些信息甚至可以收起或者省略。比如當你瀏覽新聞的時候,標題永遠是最關注的,而評論,作者,簡介等都是可以忽略的信息。



上述兩個問題的確認,會影響我們對后面的信息排布。因此我們需要在源頭,比如去和產品或者業務溝通,弄清楚該信息呈現的緣由以及必要性,這樣能夠幫助我們最后理清楚信息層級。

05.信息層級排布處理

信息排布的本質是通過我們對信息進行排列上的調整,來將多余的層級融入到三層以內。從而讓我們整體的頁面顯得更加簡潔。



通過目前的實踐總結,我覺得目前可以有以下五種方法來幫助我們更合理地安排信息層級。



5.1 信息分組

信息分組是大家在設計時都能夠想到的形式,分組能夠將復雜的信息打散,從而降低頁面整體的復雜度。比如我們常用的分組方式有三種方式:間距、分割線、卡片。



那么這三種方式有沒有區分呢,VIVO設計團隊曾經就這個問題展開過用戶調研,但結果表示,如果純粹從用戶的角度來講,對其變化感知不大。但這三種分割方式會影響我們在呈現信息時的整體視覺觀感,因此我們可以根據當前信息的復雜度作出以下規則:



通過這三種場景的區別,我們可以根據信息復雜度更好地選擇分割方式,讓界面的表達清晰明確。

5.2 利用組件拆分

組件其實是目前大部分設計師在進行信息排布時必備的部分,因此對于這部分設計師的熟練度也是最高的。而本篇想要強調的是,目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用:樹形結構、表格結構、步驟條、選項卡。

樹形結構

對于有關聯性的多層級非常適合,可以將復雜的層級結構進行收攏,從而能夠顯著降低信息的復雜度。

表格結構

對于信息多且關聯性不大的復雜信息,可以聚合到表格來進行呈現,但表格的呈現方式不宜濫用,需要根據我們場景來進行選擇。

步驟條
步驟條則對場景要求非常明確,我們可以將多個場景通過分布的形式進行呈現,從而減少當前頁面的復雜度。

選項卡
選項卡更適合與同級的數據,對于同類型的結構可以更好地將頁面進行拆分,從而讓當前頁面更簡潔。



由于組件這一塊大家的認知已經比較全了,在這里就不進行更深入的講解了。如果有需要的同學可以通過瀏覽各大廠的組件文檔去進行更細致的查閱。

5.3 更改布局

通過改變布局的方式,我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。這句話什么意思呢,舉個簡單的例子:



從上圖中你可以看出目前的層級較多,尤其是兩層tab的疊加,視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局,從上下結構變為左右結構,達到從視覺上簡化層級的作用:



當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復雜邏輯時,我們可以考慮通過改變結構來減少其復雜度,比如上述的兩欄結構,甚至三欄結構,從而讓整體變得更加簡潔。



5.4 信息融入

我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質上講就是將某兩種層級信息通過不同的組合方式,讓其融入到同一個層級中。比如我們看下面這一個例子,Coding產品設計中將標題與tab利用分割排列在一起,從而變為同一層級,這個時候就不會出現四層的復雜結構,頁面還是保持三層結構,通過這種方式有效降低了頁面的復雜度。



信息融入這個方法,當我們在進行B端布局時,用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節省視覺空間,還能夠降低信息層級的復雜度。

但在進行信息融入的過程中,我們需要注意的是:如果放在同一層級會造成理解上的誤解時,這個時候不要采用該方案。比如搜索框的位置,放在哪個層級決定了對應的搜索范圍。

5.5 信息弱化

信息弱化的原則是,將某些超出層級的部分進行弱化。比如有5個層級,但其巧妙地將功能篩選融入到了當前的結構中,使得即使超過3層我們也不會覺得其特別復雜,我們再看一個例子:



可以看到TAPD將「另存為視圖功能」與「缺陷統計」進行了弱化,雖然還是有4種層級,但從視覺感知的層面上不會覺得視覺凌亂。

在很多時候,我們覺得信息混亂的原因,就是頁面要素太多太花哨。比如工作中的一個小卡片,也就是利用信息弱化去減少畫面的復雜度:



因此我們需要學會對信息分級,不重要的信息就進行弱化,這樣整體的表述上會好很多。

通過上述5種方案:信息分組、利用組件拆分、更改布局、信息融入、信息弱化,我們可以將大部分層級過多的復雜信息簡化在三層以內,從而讓我們最終的頁面呈現不會太過復雜,更容易被用戶理解。但不可否認仍會有更復雜的頁面,即使縮減也仍有過多層級,那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。

06.信息層級小細節

在研究的過程中,也總結了目前在進行信息層級排布過程中比較糾結的一些細節點,也分享給大家。希望對遇到相同問題的同學一些幫助。

6.1 被忽略的沿著字的軸線對齊

大家對「對齊」并不陌生,它存在于我們的每個頁面。但在對齊的過程中,我們可能會忽視一個小細節點,那就是沿著字的軸線對齊。比如下圖兩個例子:



在看見左圖時,總覺得哪里會有點奇怪,但又不知如何表述。而右圖看著就會相對更舒服。經過對比過后明顯發現右邊的圖整體相比于左側會更整齊,而這就是說的沿著字的軸線對齊。這主要是由于相似原則引起的:那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起,即相似的部分在感知中會形成若干組

而左側因為標題字和底部字沒有形成對齊,因此會顯得更加凌亂一點。所以沿著字的軸線對齊會讓我們在整體的頁面呈現中顯得更整齊。

6.2 卡片是用線框還是背景

這是我平時在做設計呈現時也會糾結的一個問題。當你想用卡片來呈現視覺時,你有沒有糾結過到底是用線框卡片還是背景色填充呢。



我就曾陷入這種糾結,但在去搜索查閱時,發現目前其實關于這塊相關的資料,因此在大部分情況下都是由設計師自行決定的。但經過線上產品的調研發現,這塊內容其實也包含著一定的規則:

1.取決于卡片的數量

對于卡片少的其實可以用色塊來呈現,對于卡片多的可以考慮用線框來進行。這其實主要是從一個視覺的維度來進行呈現,舉個簡單的例子:



通過coding和飛書的卡片對比,你會發現卡片過多時線性設計會讓頁面顯得更整潔和清新,色塊設計就會讓頁面顯得更厚重。右側整體的呈現行會顯得更好一些。

2.取決于頁面的視覺重心


這里頁面視覺重心的含義是當你整個頁面都全是線框時,你可以利用色塊的卡片來達到突出頁面重心的效果,讓整體頁面沒有那么單調,可以看到下圖的例子,右側的頁面會相對更穩重一點。



6.3 底色用灰色塊還是彩色塊

在進行色塊時,時常會糾結用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區分呢,我們應該何時使用這兩種色彩呢。



我們先看一下案例:



可以看出目前這兩種顏色的運用更多的是功能上的區分:


1.彩色背景更適用于「想要引起用戶注意的界面」,比如一些功能引導或者營銷性質的頁面。從表現性質上來講更重。


2.而灰色背景更適用于「利用灰色背景來區分層級關系」或者一些微弱提示的信息。從表現形式上來講更輕。


所以我們可以根據當前的信息場景來選擇合適的色彩,后面再面對時就可以不用那么糾結。

07.寫在最后

本期的內容到這里就結束了。關于這期的信息層級內容,真正需要深入了解的是控制信息層級背后的方法。很多時候我們看見的優秀頁面并不是因為它本身就簡單,而是通過我們合理的信息層級控制,讓最終呈現上顯得不復雜,這其實也是我們在實際工作中需要注意的很重要的一個點。

本文重點內容再回顧,當我們遇見復雜的信息層級時,需要分三步:

1.明確當前所有信息的必要性和重要分級,需要從源頭去深入了解;

2.運用五個方法可以有效減低信息層級:信息分組、組件拆分、更改布局、信息融入、信息弱化

3.同時在運用過程中需要注意影響層級的小細節

以上是本文關于信息層級的另一種角度的描繪,雖然沒有提及四大基本原則,但在實際運用中也是很重要的。最后,雖然進行了很多資料查詢,但在在闡述過程中不可避免會有闡述不到位的地方,歡迎進行反饋。

原文地址:站酷

作者:蒙東東

轉載請注明:學UI網》科幻機甲風格海報怎么做?

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


如何提高界面信息識別效率?

鶴鶴

一、為什么要提高界面信息識別效率?(Why)

界面設計的好壞,會直接影響到用戶的使用體驗,很多時候我們往往會直接拿到競品的頁面搬運到自己產品上,而沒有針對自身產品的特點和業務加以思考。

這種做法理論上不會讓自己的頁面出錯。但是很多人往往忽略了一點,就是別人這么設計的出發點是什么,是否匹配自身產品的業務流程,如果不了解這些貿然的去搬運設計,那么時間久了就會養成一個不好的習慣,導致思維不能得到足夠的刺激和知識的沉淀。當需要我們專門進行設計構思時,就會遇到諸多困難。

如果是剛入手的領域,前期可以去進行適當的搬運參考,但是一定要了解別人設計思考點,明白其背后的原因,將其沉淀成自己的知識儲備在腦海中。

1. 信息大爆炸

過去60年,人類社會的數據發生了爆炸式增長。2008年人類大約創造了近10億張DVD能存儲的數據,這等同于過去5000年的人類創造數據的總和。12年,調研機構預測信息每隔18月會翻一倍20年,調研機構預測信息每隔73天會翻一倍

2. 人類的生理局限

在信息爆炸的年代,人類進化的速度卻是緩慢的,我們現在的大腦跟250萬年前的原始人并沒有太大區別。

我們的大腦每秒鐘要接收約4000萬次的感官信息輸入,但意識一次能注意到其中約40個,其中短期工作記憶能處理的只有4±1個。

正是由于現代信息數據的大爆炸,多數產品日益臃腫的結構,以及人類有限的處理能力,所以呈現什么信息,以何種形式呈現的信息層級設計就非常重要。

作為設計師,我們有必要根據自身產品的業務方向,以及用戶的行為和特征,結合信息環境,選擇合適的信息,并以適合的方式進行組織和呈現,以便讓用戶獲取并理解信息更容易,完成信息的組織和傳達作用。

二、如何提高界面信息識別效率?(How)

1. 信息分類

相關聯信息需要進行歸類,無論是什么類型的產品模塊,我們在設計中應當做好信息分層,當兩段內容元素具有關聯性時,他們應當作為一個整體給用戶展現。

2. 層級區分

(1)層級數量應靠近“3”

信息層級作為影響頁面信息傳達效率的重要因素之一,那么怎樣做好頁面的信息層級便尤為重要。網上資料大多都在圍繞對比、對齊、親密、重復四個基本原則講解。

不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用,并且也是我們非常熟悉的。但其闡述得太過寬泛,在我們實際工作中面對復雜層級排版時,仍會面感到困惑,很難直接有效地利用。

于是我把優秀的案例進行收集并整理分析。

經過線上頁面與概念的整體研究發現,他們在遵循排版原則的基礎上,都存在著一個簡單的規律:主內容的層級控制在三層左右。

如下圖所示:

可以發現,三層左右的層級是最容易被用戶識別的,且視覺上不易混亂。三層往后,隨著層級越多其復雜性會成比增加。

比如我們看下面這兩個例子,左邊層級方面平鋪直敘沒有重構區分,使得層級復雜,造成用戶識別效率變低。但其實我們只需要對信息加以歸類并控制層級數量,瞬間就變得更簡單且易懂。

因此,我們需要在著手設計前,首先思考一個邏輯:盡量將我們的內容層級控制在三層左右,且這三層內有比較明顯的對比關系。

有朋友看到這肯定要問了,這個道理大家都懂啊,可是在實際工作中大多數拿到的信息都非常多,根本做不到保持在三層以內。別著急,本文的重點當然不是告訴你這么簡單的道理,而是在面對復雜層級的時候,我們應該怎樣去控制它的層級表現,從而讓它在最終呈現上保持在三層左右,讓用戶獲取信息的效率更高。

(2)源頭篩選處理

源頭篩選的關鍵在于接手復雜信息時,我們首先需要從源頭上進行第一層的判斷,了解這些信息是否真實地被需要。這也是我們大多數人容易忽視的一點,當然這也不能完全怪我們,因為通常需求給到我們的時候都是大致的概括,好一點的話還有個交接文檔,甚至有時候需求拿到我們手上時,已經轉好幾手了交接人可能也不知所云,導致很難知曉其底層出因,

源頭篩選的本質就是判斷我們當前所要呈現的信息是不是必要的。

比如某些時候產品給到了我們很多信息,但我們并不一定會全盤接受,而是通過當前頁面的業務場景去進行判斷。確定每個信息的合理性,從而可以決定有些元素是否可以刪減,提高整體信息設計的一致性。

過程需要我們對以下2點進行思考:

  1. 此信息真的是頁面中的必要信息嗎,如果去掉是否會產生直接影響:比如當打開高德地圖的時候,在你瀏覽地圖時,界面只呈現強關聯功能模塊。只有當你上劃進入二級頁面時,其它相關功能才會展現,這些都是按照用戶的使用場景來進行對應的呈現。
  2. 當前信息的重要程度是怎樣的,對于某些不重要的信息是否可以通過隱藏的方式展現:當你拿到一堆信息,信息的重要程度就決定了我們需要將哪些信息作為主體,哪些信息作為次要輔助信息,哪些信息甚至可以收起或者省略。比如當你使用語雀創建文檔時,編輯和瀏覽永遠是最關注的,而跳轉入口等都是次要信息,將其隱藏反而提高效率。

上述兩個問題的確認,會影響我們對后面的信息排布。因此我們需要在源頭,比如去和產品或者業務溝通,弄清楚該信息呈現的緣由以及必要性,這樣能夠幫助我們最后理清楚信息層級。

(3)在排布上降低復雜度

信息排布的本質是通過我們對信息進行主觀的排列上的組織重構,來將復雜的層級控制在三層左右的區間里。從而保證我們頁面的簡潔性、規律性、識別性。

通過目前的實踐總結,合理地安排信息層級的方法大致可以分為:分組、組件、組織、融入、弱化。

① 信息分組

信息分組是大家在設計時都能夠想到的形式,分組能夠將復雜的信息歸組從整,從而降低整體復雜度,清晰線索。

我們常用的分組方式主要有三種:間距、分割線、卡片。

那么這三種方式有沒有區分呢?

VIVO設計團隊曾經就這個問題展開過用戶調研,但結果表示,如果純粹從用戶的角度來講,對其變化感知不大。但這三種分割方式會影響我們在呈現信息時的整體視覺觀感,因此我們可以根據當前信息的復雜度作出以下規則:

  • 復雜度較低時,優先采用留白分割,視覺清爽五干擾;
  • 當留白分割效果不明顯時,可引入線性分割,讓層次更清晰且保證屏效;
  • 需要進一步強化信息之間的邊界感,可引入卡片樣式,強化層次和可操作性。

② 利用組件拆分

組件其實是目前大部分設計師在進行信息排布時必備的部分,因此對于這部分設計師的熟練度也是最高的。而本篇想要強調的是,目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用:樹形結構、表格結構、步驟條、選項卡。

  • 樹形結構。對于有關聯性的多層級非常適合,可以將復雜的層級結構進行收攏,從而能夠顯著降低信息的復雜度。
  • 表格結構。對于信息多且關聯性不大的復雜信息,可以聚合到表格來進行呈現,但表格的呈現方式不宜濫用,需要根據我們場景來進行選擇。
  • 步驟條。步驟條則對場景要求非常明確,我們可以將多個場景通過分步的形式進行呈現,從而減少當前頁面的復雜度。
  • 選項卡。選項卡更適合與同級的數據,對于同類型的結構可以更好地將頁面進行拆分,從而讓當前頁面更簡潔。

③ 靈活組織

通過對組織方式的調整,我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。

舉個簡單的例子:

從圖中你可以看出左側的層級較多,尤其是兩層tab的疊加,視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局,從上下結構變為左右結構,達到從視覺上簡化層級的作用:

當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復雜邏輯時,我們可以通過改變結構使其交互邏輯更清晰,從而減少其復雜度。

④ 巧妙融入

我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質上講就是將某兩種層級信息通過不同的組合方式,讓其融入到同一個層級中。比如我們看下面這一個例子,產品設計中將button與查詢項利用分割排列在一起,從而變為同一層級,通過這種方式有效降低了頁面的復雜度。

當我們在進行B端布局時,信息融入這個方法用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節省視覺空間,還能夠降低信息層級的復雜度。

但在進行信息融入的過程中,我們需要注意的是:如果放在同一層級會造成理解上的誤解時,這個時候不要采用該方案。比如搜索框的位置,放在哪個層級決定了對應的搜索范圍。

⑤ 信息弱化

信息弱化的原則是:將某些超出層級的部分進行弱化。

比如圖中有5個層級,但其巧妙地將功能篩選融入到了當前的結構中,使得即使超過3層我們也不會覺得其特別復雜。

在很多時候,我們覺得信息混亂的原因,就是頁面要素太多太花哨。

比如工作中的一個小卡片,也就是利用信息弱化去減少畫面的復雜度:

因此我們需要學會對信息分級,不重要的信息就進行弱化,這樣整體的呈現上會好很多。

但不可否認仍會有更復雜的頁面,即使縮減也仍有過多層級,那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。

(4)突出熱區

當模塊具有按鈕、文字鏈、圖片入口等需要下一步操作的關鍵元素,需要進行高亮顯示,以此幫助用戶快速定位目標。

圖中 “Learn more” 使用文字高亮進行處理,通過顏色讓用戶快速定位入口,且不影響用戶正常閱讀,若使用色塊按鈕進行突出,模塊會冗余,過于喧賓奪主。

3. 可見性

當產品需要用戶進行多步驟完成任務時,應當展示系統進度,讓用戶了解他們的行為操作在界面中所處于的位置。

比如下圖中房屋裝修信息填寫流程,用戶面對這種多流程任務時,耐心往往很低,我們可以在設計時添加系統狀態進度條,時刻提示用戶當前的節點,此方法應用場景還有注冊登錄、信息完善等更多場景,目的都是為了讓用戶達到交互可預測的狀態,提升用戶體驗。

4. 遵循視覺動線

我們在設計內容復雜的網頁時,建議根據產品訴求和用戶目標,合理的放置元素,以此來達到目標,另一方面符合眼動規律的瀏覽順序,可以讓用戶不會產生視覺疲憊,每個視覺點停頓時看到元素都是不同,提升用戶體驗。

5. 合理的字體加粗

在設計大面積文字排版時,應當注意字體粗細,它決定著我們的設計是否易讀性高。

無論標題還是內容,字體過重或者過輕都會降低文本的基本識別度,而且遇到文字信息過多的情況,長時間專注文本的識別很容易出現視覺疲勞的情況。

在設計UI界面中,無論是長文字體還是模塊元素字體,我們都要注意字體的重量,保證基本識別度的同時,優化視覺重心,確保用戶在閱讀時不容易陷入疲勞。

6. 孰輕孰重

當界面中存在多個入口時,我們可以對這些入口進行優先級處理,以突出核心功能為目的,用戶瀏覽界面的動作是大面積掃讀的形式,這就意味著我們需要弱化無關信息,既保證了界面的基本美觀性,又能夠具備良好的體驗。


作者:CKin.記事本
轉載請注明:人人都是產品經理

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


7個實用技巧,教你搞定可視化圖表

鶴鶴

可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中,如果沒有系統的可視化知識,會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么,在復雜的數據關系中如何設計和選用圖表,如何在好看的同時提升信息傳達效率,看完這篇文章希望對你的設計過程有所幫助。


// 為什么要數據可視化


數據可視化就是用圖表來表示數據信息,它所傳達的信息包括你所拿到的數據源和你分析后的結果,再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息,是我們可視化的最終目的。



舉個例子,同樣一組數據,用表格的形式呈現是很難有所洞察的;如果將各個地區維度的數據聚合以柱圖形式呈現,很容易就能看出各個地區間數據的差異,并從中洞察規律


關于如何設計好數據可視化圖表,這邊總結了三個步驟:選擇適合的圖表,強化視覺層次,圖表響應式適配。


一、選擇適合的圖表


數據可視化的圖表種類繁多,當我們真的開始作圖,往往會遇到一個困境:有這么多類型,要如何選擇正確的圖表呢?首要依據是考慮所要傳達的信息意圖,即所要制作的圖表它的任務是什么,再通過分析數據關系來選擇表達方式;第二層意圖是圖表傳達內容,這時候我們就需要根據數據的特征去突出和強化。


1. 分析數據關系

根據數據分析的方式來看,每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構,再結合數據關系作出選擇。了解圖表的可能知道,一般圖表的數據關系有構成、比較、分布,以商業數據為例,常見的還有流轉關系。



構成關系

構成關系的圖表表達的是部分和整體的關系,用于分析總體和各部分的占比比例,構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小,也可以使用比較關系的圖表。

常用圖表:餅/環圖、堆疊圖、面積圖等,如涉及到層級結構,還會用矩形樹圖或旭日圖等特殊結構圖表。

關鍵詞:“占比、比例、百分比”



比較關系

比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內,通過對兩個或兩個以上的指標分析,可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式,趨勢對比用于表示一段時間內數據的變化,分類對比用于比較數據規模。

常用圖表:趨勢對比常用圖表有折線圖、散點圖等;分類對比常用條形圖、柱狀圖、氣泡圖等。

關鍵詞:“增減、升降、漲跌、波動”



分布關系

利用空間分區來展示數據之間的分布關系,常用于體現兩個或以上數據的相關性。

常用圖表:散點圖、熱力圖、雷達圖等

關鍵詞:“隨著……而變化、A/B之間的相關性、交/并集”等



關聯與流轉

流轉關系是B端數據常用的一種關系,它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等,以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。

常用圖表:關系圖、桑基圖、漏斗圖、進度圖等

關鍵詞:“流程步驟、留存、轉化、關系”



2. 分析數據特征

按數據關系和分析目的選擇好圖表類型后,第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有:變量特征、維度特征、層級特征、流程特征。


變量特征

分辨一個指標通常有兩類特征,按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢,離散數據通常統計各分類下數量的變化。

  • 連續型數據:指在一定區間內可以任意取值的數據叫連續數據,其數值是連續不斷的。如身高、體重等帶有時間因素變量的數據等,通常用折線圖體現變化趨勢。
  • 離散型數據:指其數值只能用自然數或整數單位計算的數據。如當天銷量、進店人數等表示分類類型的數據,用柱圖表現更加體現變量的特征。


維度特征

多維度分析需要將多個變量在同一平面上直觀的表示,可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據,可使用不同顏色進行分類

  • 根據分析視角選擇圖表:對于多維度變量的數據我們需要明確分析的視角,去找準對應的數據映射。如案例中多個班級的科目成績的這組數據,如需要全局視角查看個班的綜合素質,推薦使用雷達圖;對比單科成績的變化分布,則推薦使用堆積圖。


層級特征

多層級數據由多個部分構成一個整體,又稱樹形結構數據。除了用結構樹圖表表現以外,還可以考慮以下兩種圖表類型:

  • 矩形樹圖:突出子層級占比大小。最初是用來顯示計算機硬盤驅動器上文件的結構和大小,它以面積的形式突出展現各個子層級節點的占比,可幫助用戶看到數據的層次結構以及各層級之間的關系。


例如:上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額,通過色調來區分不同類型,顏色的深淺代表分類下的子集,面積體現銷售占比。對比一般結構樹圖表,它的優勢在于可以有效利用空間。

  • 旭日圖:突出細分層級關系。由多個圓環圖嵌套而成,也稱為徑向樹圖,它既能像餅圖一樣表現局部和整體的占比,又能像矩形樹圖一樣表現層級關系。常用于細分分析方法,將事物從大到小進行拆解。每個級別的數據通過1個圓環表示,離原點越近代表圓環級別越高。 旭日圖在顯示一個環如何被劃分為多個層級時最有效,而矩形樹圖適合比較相對大小。


流程特征

流轉關系是表達數據轉化流程的重要類型,不僅包含統計意義上的數據總和,同時還表達了信息流轉的路徑;其中?;鶊D和漏斗圖都可以表達路徑中流量的變化,不同的是桑基圖重點強調流量的強度和走向,漏斗圖更加注重突出轉化率和效果,根據不同的表達目的選用。



二、強化視覺層次


選擇合適的圖表后,在信息傳達上也需要正確的表達,展示形式美觀的同時能夠清晰的體現數據特點。


1. 強化數據特性

使用圖表正確的表達信息,需要設計師在強化數據特性的同時避免偏差

  • 趨勢易感知:折線圖數值如過于平均導致趨勢平緩,有時候無法體現偏差;在強調數據趨勢的場景下,推薦用動態取值范圍讓波動保持在一定范圍內,放大波動占比更突出趨勢。


  • 展示更準確:柱狀圖依靠柱體面積體現最終數值,使用動態范圍截斷將會導致數據解讀不完整;始終將 y 軸從 0 開始,才能更準確的反映柱圖中的值。


2. 色彩視覺傳達

除了在設計構圖上優化以外,顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知,錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板,精確傳達信息同時后續的項目在選用時也可以達到用色的統一。



我們在之前的文章里有介紹過圖表的取色模型,通過調整顏色HSL值的區間,可以得到以下三種意圖色板:

  • 定性型-分類色板:用于區分不同的類型,又稱為無序色板。適合區分沒有內在順序的類別
  • 定量分歧型-發散色板:通過兩邊互補色來體現,具有明亮的中間值,然后以不同的色調在刻度的兩端變暗。通常用于可視化負值和正值
  • 定量順序型-順序色板:從亮到暗或相反的漸變。適合可視化從低到高的數字。

那么我們要怎么樣去使用這些色板呢?下面幾個案例將帶你了解其中的差異。


定性型:使用色調來進行分類

數據內在沒有順序差別時,建議使用色調值(H)進行區分;如定義國家、行業等類型。如果希望圖表看起來更加專業,以下有幾項分類色板的小建議:

  • 選取盡量少的色調:取色時無需使用整個色環,使用鄰近色或互補色的取色方式顯得更加專業。


  • 色板適度明暗交替:一些視障人士無法區分色相,主要靠顏色的明暗差異來識別,通過飽和度和暗度的調整,創造明暗交替的色板。


定量型:使用深淺色板強調內在順序

如果在同一個分類下包含子類別,或者數據本身具有排名屬性,那么建議使用連續色板來突出他們內在的順序,使圖表更加易讀。

  • 順序色板-選擇合適的插值:根據數據的分布情況選擇不同的的插值斷點,突出數據的差異。如以下案例中,根據統計學概念設定不同的取值區間,左側示例使用的是平均線性差值,反映的是數據的集中趨勢;右側示例使用的是中位數插值,能更好的體現數據分布的形態。


  • 發散色板-關注對比色的識別性:盡量避免紅綠配色,如需使用綠色,偏黃或偏藍的綠色更易分辨,對視障人士也更加友好。


三、圖表中的響應式設計


B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報,在基礎設計完成后還需要考慮到圖表展示的環境,根據不同端去適配顯示效果,以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。


1. 布局框架適配

在網頁端顯示時,有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態,將非必要的的元素轉化或隱藏,保留重要的圖形元素去適應當前空間;元素隱藏后使用懸浮交互來保證信息的展示,保持圖表的可讀性同時也避免產生元素的重疊。



如案例中的圖表,在不同尺寸下通過改變和隱藏圖表元素,以達到適配當前空間的效果。

2. 圖表元素適配

要適配移動端,網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外,還需要考慮手機屏幕的尺寸和圖表元素的適配性,去兼容相關的交互操作。

  • 信息浮層:在圖表中,信息卡元素是傳達信息內容的重要組件,在網頁端中懸浮展示,通常會占據很大空間;圖表適配移動端后,信息浮層改動到圖表上方常駐顯示,并跟隨手指的滑動變化響應數值,完整展示信息的同時也避免了頁面抖動。


  • 坐標軸標簽:過長的坐標標簽在適配過程中會產生重疊,而省略也會造成信息展示的不完整。我們需要針對不同的坐標軸類型給出響應的規范。如文本類軸標簽我們可以采用省略、換行、旋轉等方式適配,避免信息的缺失。針對有連續型的數據類坐標軸我們可以使用抽樣、轉化單位等方式適配,精簡空間避免堆疊。


3. 極值適配

因B端平臺的特性,我們無法預知客戶傳入的數據量,可能會遇到因數據量過多,造成圖表顯示不佳,數據讀取困難等問題。這種情況下,提前考慮數據極限場景,通過交互的形式變化的方式讓用戶獲取完整信息,提升理解同時信息展示更靈活。

  • 縮放和平移:在數據范圍過多時增加取值范圍的縮略軸組件,通過限制展示范圍讓數據量顯示可控。


  • 互動切換視圖:如果折線的類別過多且無法省略的,建議分組查看。默認狀態僅當前組折線高亮,其他數據以淺色顯示,通過切換的方式查看其他組別的信息。


  • 懸浮鼠標高亮:在分類過多不好分辨時,可使用懸浮高亮的交互方式突出相關聯的數據組。


還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因,在這篇文章就不做深入講解了,以后可獨立介紹。


// 結語


數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確,才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據,確保用戶能夠更好的接收信息,才是可視化的關鍵。


作者:百度MEUX
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


簡約設計4原則在表單設計中的應用

鶴鶴

隨著B端體驗設計的發展,表單類頁面已經形成了一定的設計模式,例如登錄頁面,場景比較明確、業務流程和設計模式都比較成熟了。

業務型表單設計與業務強相關。既需要考慮交互帶來的用戶體驗,又要從業務角度出發滿足用戶的行為需求,相對比較復雜。不過也形成了一些固定的設計方法。今天我們先來看看「精簡」策略。

本文主要內容:

刪除,實現表單輕量化

組織,讓表單更加有層次

隱藏,讓表單更加靈活

轉移,擴展表單的異步空間


表單是系統與用戶進行溝通的語言,它應當符合雙方的認知邏輯。因此表單設計時,需要解決「產品」和「用戶」2個方面的問題:

? 表單需要用戶提供哪些信息,保證信息的正常流轉和業務的完整

? 用戶如何理解這些信息,如何更好地幫助用戶完成表單填寫

尤其是面對復雜表單,需要從這兩方面尋找到突破口。

在業務層面,設計師需要探究用戶的實際需求,反思表單項是否必要,從而減少不必要的選項,提高用戶效率。

同時在設計層面,還需要基于用戶認知習慣,通過合理的信息組織、交互形式幫助用戶完成表單任務。

復雜表單通常包含多種業務場景,并且與其他業務存在關聯和嵌套,導致表單內容信息量較大。我們需要通過「刪除」、「組織」、「隱藏」、「轉移」4個交互設計原則,讓表單頁面更加簡單、有效。



▎01 刪除,實現表單輕量化

前幾年,我們在銀行或者移動營業廳開通一些新業務時,都會填寫表單,通常是密密麻麻一堆信息。但是實際需要填寫的內容可能只有2~3項,業務人員會特意勾選出來給客戶,其余的都是非必填項,或者是業務人員填寫的。

線上表單設計時,沒有專門的業務人員指導,用戶更容易迷失。所以設計師或者產品經理的首要任務就是盡可能地減少表單信息量,降低用戶的認知負荷。

最近在做一個表單的優化,業務方要求增加“入參”、“出參”兩個表格項,說是用戶會看。與用戶溝通后,反饋也說“會看一下”。但是在深度挖掘用戶場景后,發現用戶確實會查看這個信息,只不過不是在當前環節查看,而是在結果項中查看。

所以我們最終去掉了這兩個信息量較大的表格內容,從而讓整個表單的信息量得到了明顯的下降。因此面對復雜長表單,我們需要從需求入手,判斷是否有必要讓用戶提供如此多的復雜信息。

▎02 組織,讓表單更加有層次

當我們不得不面對復雜表單時,如果采用簡單內容平鋪,用戶看到的是滿屏的散點信息,造成信息識別困難,用戶一時間難以找到填寫思路,反而增加用戶的心理負擔。因此信息的層次性,對于復雜表單至關重要。

首先要從內容和視覺層面讓復雜信息變得清晰、規整,更加符合用戶的認知習慣。例如,可以利用分組標題、分割線、卡片,按照不同信息的類別、屬性和相關性進行區塊劃分。

根據不同的布局和交互,主要有以下4種表單設計模式。



1、順序表單

表單分組后,可以按照業務邏輯順序鋪開展示。用戶只要按順序填寫就可以了。但是對于超長表單,這種布局方式下,用戶無法全覽頁面信息。頁面上下滾動、定位查找帶來的交互成本比較高。

1)平鋪表單



2)卡片表單



因此順序表單更多地用在業務信息比較簡單的場景中。

2、錨點表單

為了解決長表單的定位效率問題,可以在順序表單的基礎上增加錨點。另外錨點還可以幫助用戶快速了解表單所包含的內容模塊。

根據錨點的布局,可以分為橫向錨點和縱向錨點兩類。錨點需要吸頂方便用戶操作。本質上來說,錨點表單是順序表單的優化版本。






3、標簽表單

如果長表單內容沒有依賴關系,還可以將表單拆分為幾個相互獨立的標簽內容,這就是標簽表單。



不過標簽表單更強調內容的并列關系,常用于配置表單中,例如 MAC 或者 Windows 系統的配置彈窗。標簽表單在全新表單中應用較少。



因為標簽表單容易造成內容遺漏,并且無法告知用戶哪些標簽已經填寫,哪些標簽未填寫,或者無法清晰展示校驗信息。來回切換標簽查看信息,也會影響效率,因此主要用于用戶有目的的配置行為中。

4、步驟表單

步驟表單是一種常見的表單拆分方式。通過節點將子表單串聯起來,形成一個完整的業務閉環。例如阿里云的云服務器訂單流程,或者一些開戶流程等。



步驟表單有幾個特點:

1)過程串聯

理論上來說,步驟表單有明顯的操作順序,用戶需要按照節點完成內容填寫,因此不會產生信息遺漏。當然也可以根據實際的業務場景,設置選填節點。但是總得來說,步驟表單更強調的是順序操作。

2)業務引導性

對于復雜業務,步驟表單可以將分散在不同頁面中的獨立業務串聯起來,在一定程度上具備新人教學功能,幫助用戶了解業務邏輯。減少用戶自定義操作時在不同頁面的跳轉,從而提供新人用戶的操作效率。例如系統配置向導類的步驟表單。

3)逆向操作

由于步驟表單存在正向和逆向操作,因此設計時還需要考慮清楚逆向操作的設計邏輯。例如:

當用戶想要修改前面步驟信息時,除了逐步返回,是否可以步驟條直接跨節點修改?

用戶中途退出表單后,重啟時是從第一步開始,還是直接從未填寫的步驟開始呢?

? 用戶如果完成了步驟條表單填寫,想要二次修改時,是用普通表單,還是仍然使用步驟表單形式呢?

4)節點的平衡性

步驟表單可以分拆信息,化整為零。但是信息節點也不能過多,否則同樣會影響用戶的操作效率。所以要減少不必要的流程節點。

最近在做設計時,發現步驟表單最后一步是內容預覽。通過用戶調研發現,部分用戶會謹慎地預覽前面4步填寫的內容。而另一部分用戶則認為,剛填寫了內容不需要預覽,強制預覽的設計并不友好。該如何平衡設計呢?

最終我們選擇了將預覽節點取消,將預覽功能調整到第4步,采用「預覽」按鈕的形式。既滿足了部分用戶預覽的需要,另一部分用戶也可以不做預覽,直接提交申請。

所以步驟表單過程中的節點具有一定的強制性,需要謹慎對待,保證節點的合理有效。

▎03 隱藏,讓表單更加靈活

1、模塊隱藏

表單實際上是任務信息的集合,為了具有更高的適配性,內容通常是多種場景的集合。而場景有高頻、低頻區分,對于高頻信息需要優先展示,便于提高用戶的填寫效率;對于低頻場景,可以隱藏弱化展示,從而降低整個表單的復雜度。

例如我們常見的「高級配置」,通常在表單的底部默認收起展示。



2、信息隱藏

復雜表單中信息會出現多級信息共存的場景。這種場景下,復雜表單默認展示當前選項對應的子內容,隱藏其他選項的內容,從而提高信息的指向性。



3、合理的組件形式

比較典型的就是單選和下拉選擇器如何選擇。有人為了強調效率,一味地追求單選按鈕平鋪展示,認為單選更加直觀,用戶不需要點擊下拉滾動查看備選項。但是用戶同樣需要逐個瀏覽選擇,反而增加了整個頁面的信息量。

所以單選框更多用在備選項較少的場景,如果備選項較多,建議優先采用下拉選擇器,隱藏備選項。

▎04 轉移,擴展表單的異步空間

1、信息轉移

在表單設計時,可以將部分二級信息轉移到彈窗、抽屜中,利用浮層空間拓展業務內容,根據用戶操作逐級加載出來。從而減少表單的信息量。

例如下圖中,沒有將「所有配送區域及運費」直接展示出來供用戶選擇,而是放在了彈窗中,表單中只呈現最后的選擇結果。既簡化了表單的內容,又讓選擇結果更加突出,方便用戶的查看和校驗。



2、記憶轉移

現在很多瀏覽器都增加了密碼存儲功能,減少用戶記憶成本。而在電商購物網站可以設定默認的收貨地址。系統自動讀取調用,從而減少用戶的輸入操作。

3、行為轉移

現在越來越多的網站支持「手機短信驗證碼」免密注冊登錄方式,或者第三方登錄方式,或者手機端掃碼登錄。將原有的表單填寫轉變為系統行為,從而降低用戶的行為成本。



好了,以上就是我總結的表單設計的內容~

重復一遍:

刪除,實現表單輕量化

組織,讓表單更加有層次

隱藏,讓表單更加靈活

轉移,擴展表單的異步空間

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系。 

作者:騰訊ISUX團隊    來源:子牧先生


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

日歷

鏈接

個人資料

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

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
久久久久国产一区二区| 国产在线精品一区| 亚洲国产一区二区三区a毛片| 日本丰满少妇一区二区三区| 欧美日韩最好看的视频| 中文在线免费视频| 欧美aaaaaaaaaaaa| 欧美sm美女调教| av资源网站在线观看| 国产精品久久久久99| 亚洲欧美成人一区| 台湾佬成人网| 日韩欧美电影一区二区| 成人免费福利视频| 亚洲成人综合视频| 国产欧美一区二区精品性色超碰| 高清日韩电视剧大全免费| 成人午夜小视频| 国产免费拔擦拔擦8x高清在线人| 久久精品国产久精国产一老狼| 国产一区二区伦理片| 粗大黑人巨茎大战欧美成人| 国产在线观看av| 中文字幕欧美在线| 久久porn| 欧美伊人久久久久久午夜久久久久| 日韩激情中文字幕| 久久视频在线视频| 懂色av一区二区三区免费观看| 一区二区三区在线视频免费观看| 欧洲在线/亚洲| 免费不卡欧美自拍视频| av一区观看| 欧美日韩精品免费观看视频| а√在线中文网新版地址在线| gratisvideos另类灌满| 亚洲人成精品久久久久久| 久久精品亚洲麻豆av一区二区| 国产精品久在线观看| 亚洲综合社区| 国产精品国产三级国产aⅴ中文| 日韩妆和欧美的一区二区| 天堂久久一区| 国产精品av在线| 午夜免费播放观看在线视频| 欧美不卡一二三| 国产乱对白刺激视频不卡| 欧美一级视频在线观看| 91在线品视觉盛宴免费| 免费黄网站在线| 日韩欧美网址| 国产精品沙发午睡系列990531| 日韩第一区第二区| 亚洲精品国产嫩草在线观看| 欧美在线视频二区| 亚洲国产欧美精品| 99热这里都是精品| 亚洲欧美日本国产有色| 亚洲欧美综合在线精品| 日韩wuma| 国产成人在线看| 亚洲一级大片| 成人日韩av在线| 国产欧美在线观看免费| 亚洲一区二区三区免费| 欧美中文字幕一区二区三区| 91精品久久久久久久久不口人| 黄色在线免费观看网站| 亚洲免费观看高清完整版在线观看熊| 日韩精品欧美在线| 亚洲免费在线电影| 亚洲欧美偷拍卡通变态| 亚洲三级网站| 日本电影在线观看| 综合久久精品| 色综合一区二区| freexxx性亚洲精品| 欧美日韩视频一区二区三区| 国产综合视频| 天天做综合网| 亚洲婷婷综合久久一本伊一区| 91福利在线免费观看| 成人免费无遮挡| 国产99久久久欧美黑人| 丝袜在线观看| 亚洲乱码国产乱码精品精的特点| 国内综合精品午夜久久资源| 19禁羞羞电影院在线观看| 精品3atv在线视频| 欧美午夜精品一区二区三区| 一本大道久久a久久精品综合| 三级在线看中文字幕完整版| 精品白丝av| 日本资源在线| 伊人久久综合一区二区| 亚洲jizzjizz日本少妇| 欧美日韩极品在线观看一区| 色综合视频一区二区三区日韩| 中文成人激情娱乐网| 九九综合九九| 久久天天躁狠狠躁夜夜av| 亚洲欧洲一区二区三区| 亚洲毛片网站| 欧美制服丝袜第一页| 国产一区二区在线免费视频| 成人福利网站在线观看11| 黄色成人在线视频| 久久亚洲精品欧美| 亚洲国产高清aⅴ视频| 国产丝袜在线观看视频| 二吊插入一穴一区二区| 欧美黄色直播| 欧洲激情综合| 欧美精品videosex牲欧美| 久久久久九九九九| 国产成人亚洲综合| 久久爱www久久做| 久久国产精品免费一区二区三区| 一本一道久久a久久精品逆3p| 性开放的欧美大片| 免费在线视频一区| 三区精品视频| 免费91麻豆精品国产自产在线观看| 国产精品久久久久久久免费观看| 久久成人18免费网站| 国产美女高潮在线观看| 欧美国产综合视频| 国产高清视频在线播放| 一区二区三区中文在线| 欧美色xxxx| 视频一区在线免费看| 一本色道69色精品综合久久| 亚洲人成网站777色婷婷| 日韩一区av在线| 91精品久久久久久久久久不卡| 91高清视频免费看| 99精品美女视频在线观看热舞| 亚洲欧美一区二区不卡| 91桃色在线| 成人精品一区二区三区| 91啪九色porn原创视频在线观看| 久久一区二区中文字幕| 蜜桃av.网站在线观看| 美女在线观看视频一区二区| 成人女人免费毛片| 岛国大片在线观看| 日本在线中文字幕一区二区三区| 欧美另类视频在线| 欧美色网站导航| 中文字幕不卡三区| 亚洲少妇诱惑| 成人免费直播live| 色悠悠久久久久| 爱看av在线入口| 成人av播放| 成人午夜电影在线观看| 欧美一区中文字幕| 亚洲精品tv久久久久久久久久| 午夜激情一区| 国产一区二区香蕉| 中文字幕二三区不卡| 韩日av一区二区| 成人精品天堂一区二区三区| 国产97色在线|日韩|