不知道你會不會經常經歷這個情況:
1.自己設計的交互稿,不知道能不能再優化。
2.審別人稿的時候,不知道提的意見是不是全面和更有價值的。
3.看別人作品,不知道怎么分析別人的作品,挖出有價值的點。
這些情況的出現我想是因為我們是通過回憶以前的經驗來記起知識,然后去設計或者審查設計稿。所以很考驗我們過去的經驗和記憶力,一旦設計的是一個不是很熟悉的需求,我們能回憶的知識點很少,那我們會去借助大量的參考去完成交互設計。
我們的客戶為什么不購買我們的產品或者服務?識別客戶的需求通常是非常困難。即使我們的管理的很好,也需要付出精力去維護他們
收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏3
作者:江小白愛喝牛奶
鏈接:https://www.zcool.com.cn/work/ZNjU5MTU5NTI=.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
作為B端產品,競品分析是非常重要的一環,可以幫助我們了解市場和競爭對手的情況,制定更好的產品策略和營銷策略。以下是一些關于如何做好競品分析的建議:
1.明確分析目的和范圍:在進行競品分析前,我們需要先明確分析的目的和范圍。例如,我們要分析的是哪些競爭對手,分析的重點是哪些方面,分析的數據來源是什么等。
2.收集競品信息:收集競品信息是競品分析的基礎,我們可以通過多種方式收集競品信息,例如搜索引擎、社交媒體、行業報告等。需要注意的是,我們需要收集全面、準確的競品信息,避免歪曲事實或者忽略重要信息。
3.對競品進行比較分析:在收集到競品信息后,我們需要對競品進行比較分析,了解它們的優勢和劣勢,找到我們產品的差異化競爭點。比較分析可以從多個角度進行,例如產品功能、定位、用戶體驗、營銷策略等。
4.總結競品的趨勢和特點:競品分析不僅僅是對單個競品的分析,還需要總結競品的趨勢和特點,了解市場的發展趨勢和競爭格局。這可以幫助我們更好地制定產品策略和營銷策略,搶占市場先機。
5.不斷更新競品信息:市場和競爭對手的情況都是不斷變化的,我們需要及時更新競品信息,以跟上市場的變化和競爭對手的動態。這可以幫助我們更好地應對市場挑戰,保持競爭優勢。
6.分析競品的營銷策略:除了產品功能和用戶體驗等方面,競品的營銷策略也是可以分析的重要方面。我們可以了解競品的宣傳渠道、廣告投放、促銷活動等,以及它們的效果和反饋。這可以幫助我們更好地制定自己的營銷策略,吸引更多的用戶。
7.針對競品的問題進行改進:在競品分析過程中,我們可能會發現一些競品存在的問題和不足。我們可以借鑒這些問題,對自己的產品進行改進,提升用戶體驗和產品競爭力。
8.多角度思考競品分析:競品分析不僅僅是對單個競品的分析,也可以從多個角度進行。例如,我們可以對競品的用戶畫像、收費模式、技術實力等方面進行分析,以更全面地了解競品和市場。
9.與其他部門溝通協作:競品分析需要多個部門的協作,例如市場部門、產品部門、研發部門等。我們需要與這些部門進行溝通協作,共同分析競品和市場,制定更好的產品和營銷策略。
總之,競品分析是B端產品開發和營銷過程中非常重要的一環,需要全面、準確地分析競品和市場,以制定更好的產品和營銷策略。
那好的B端產品有哪些特點呢?
1、專業性:B端產品通常是為特定行業或職業群體設計的,需要具備專業性。好的B端產品需要深入了解用戶的需求和行業特點,提供專業化的解決方案。
2、易用性:雖然B端產品的用戶通常是專業人士,但好的B端產品也需要具備易用性,讓用戶能夠快速上手并且高效地使用。產品的界面設計、操作流程等都需要考慮用戶使用的便捷性。
3、可靠性:B端產品通常是核心的業務系統,需要具備高可靠性和穩定性。好的B端產品需要經過嚴格的測試和驗證,確保系統的穩定性和數據的安全性。
4、可定制性:不同行業和用戶群體有不同的需求,好的B端產品需要具備可定制性,能夠根據用戶的需求和特點進行定制。這可以提高產品的適用度和用戶的滿意度。
5、數據分析能力:B端產品通常需要處理大量的數據,好的B端產品需要具備強大的數據分析能力,能夠幫助用戶更好地理解業務數據和趨勢,以做出更好的決策。
6、云端服務:隨著云計算技術的發展,好的B端產品通常需要具備云端服務能力,能夠提供彈性伸縮、高可用性和低成本等優勢,讓用戶能夠更高效地使用產品和服務。
7、良好的客戶服務:B端產品通常需要提供良好的客戶服務,能夠及時解決用戶的問題和反饋。好的B端產品需要具備良好的客戶服務體系,能夠幫助用戶更好地使用產品和服務。
綜上所述,好的B端產品需要具備專業性、易用性、可靠性、可定制性、數據分析能力、云端服務和良好的客戶服務等特點,以滿足用戶的需求和提升產品的競爭力。
眾所周知,「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書:戰略層、范圍層、結構層、框架層、表現層。
產品設計者和開發者的角度可以對應理解為:為什么做、做到什么程度、這些東西如何組成、規劃用戶操作行為、如何呈現這些東西。
「Live Activities設計規范」由蘋果出品,原文為英文,上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規范」,使用比較熟悉的「用戶體驗五要素」對內容進行整理。
原文提供的Live Activity定義如下:
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
從原文可以提煉出Live Activity顯示特點:
1. 內容是頻繁更新的、有進度/狀態顯示的、用戶關心的。
2. 內容的信息量是一眼就能看完的程度。
但上述仍是表象,并非實質,接下來思考這幾個問題:
1. 為什么顯示的是進度/狀態頻繁更新的內容?
2. 為什么要強調用戶關心的?
3. 為什么信息量是一眼就能看完的程度?
沒有Live Activity時,頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋,且隨著各種APP的頻繁使用,用戶獲取關鍵信息的效率和通過push打開APP的次數反而在下降。
進度/狀態頻繁更新的內容,說明每個狀態存在的時間短,如果被覆蓋/忽略,同一狀態就不再復現,用戶所關心的,或APP所希望用戶關心的,就看不到了。比如:什么時候取外賣、待付款、上傳成功等等。
當下我們所處的時代是信息泛濫的時代,需要對信息作精簡,但用戶的操作是可以多條線進行的,比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。
信息內容和量是官網一直在強調的,需要精簡,只展示用戶需要的,基本達到一眼看完的程度,目的就是知道變化的是什么,當前狀態是什么。
分析了這么多,大膽推測一下Live Activity的設計初衷是:快&準確&輕。而終極目的是打動用戶,形成好體驗,進而推動口碑和銷售;為各APP提供新的通知形式,互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。
關于這個層次相當于規定功能范圍&信息邊界限制,就是什么要,什么不能要。這部分的信息官網給出許多,在此將其分類梳理如下,為避免大家不好查找官網/譯文對應出處,在句未已標注。
1. 僅iPhone支持,iPadOS、macOS、tvOS或watchOS不支持。(源自:平臺注意事項)
2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。(源自:什么是Live Activity-鎖屏)
3. 支持用戶手動清除鎖屏狀態下的Live Activity。(源自:實際操作)
4. 支持用戶直接關閉對應APP的Live Activity。(源自:最佳實踐方式第3/c條)
5. 支持Live Activity自動開始&結束。(源自:最佳實踐方式第6/f條)
6. 限制跟蹤活動/狀態時長不超過8小時。(源自:最佳實踐方式第1/a條)
7. 限制活動/進程結束后展示時長不超過4小時。(源自:最佳實踐方式第8/h條)
8. 支持更改背景顏色&不透明度。(源自:設計有用的Live Activity第5/e條)
9. 限制內容布局。(源自:設計有用的Live Activity第5/e條)
10. 限制不同設備的展示尺寸。(源自:規范)
1. 避免在Live Activity中顯示敏感信息。(源自:最佳實踐方式第4/d條)
2. 避免在Live Activity中顯示廣告和促銷活動。(源自:最佳實踐方式第5/e條)
3. 只提供正在進行的任務/事件的關鍵摘要。(源自:最佳實踐方式第2/b條)
4. 在任務/活動結束前,給用戶提供關閉Live Activity按鈕。(源自:最佳實踐方式第6/f條)
5. 點擊Live Activity直接定位到對應頁面,無需用戶二次導航。(源自:最佳實踐方式第7/g條)
6. 考慮在活動結束后,鎖屏上在合理時段后自動刪除Live Activity。(源自:最佳實踐方式第8/g條)
(個人猜測)由于是提供一個展示區域,且展示區域有限,所以對于層級架構,一級展示什么,二級展示什么,各階段展示什么,這些都沒有做明確規定&建議。各家APP可以根據自身實際情況進行設計。
通過Live Activity的展示形式,可以總結為2點:吸引、查看(摘要&詳情)。
1. 一般是在原深感攝像頭兩側展示(電話會直接展示擴展型),分為緊湊型和最小化。
2. 緊湊型在僅有一個活動/事件的時候展示,雖被原深感攝像頭分割兩端,但僅作為一條信息展示,為了視覺上的統一,這里的顏色不支持開發設置,使用的是系統默認色值。
3. 最小化在存在多個活動的時候展現,左側和原深感攝像頭粘連,右側獨立成島。
4. 不管是緊湊型,還是最小化,都可以通過點擊原深感攝像頭區域,進入APP內頁,或者長按喚出擴展型。
1. 進入內頁的查看基本就是各家顯神通了,這里主要講擴展型和鎖屏。
2. 原則上是不支持在擴展型和鎖屏做復雜操作的,基本點擊是進入APP。
3. 擴展型是用戶長按緊湊型/最小化喚起的展示區域,內容是可以自定義的,當然官方也給了相應的建議,具體如下。內容信息種類多的可以采用這種信息左中右排布,底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。
4. 根據一致性原則,鎖屏展示的布局框架應該與擴展型差不多,同樣可以點擊打開APP。只是在鎖屏狀態如果有多個任務同時進行,是會全部展示的,所以要注意品牌的傳遞,避免用戶混淆服務方。
對于如何呈現這些東西,蘋果還是寫了很多建議,確保視覺上的一致性和美觀。
1. 緊湊型狀態下,為了保證兩側信息的連貫,除了語句閱讀連貫,還需要在圖形和顏色上具有一致性,視覺上連貫。
2. 鎖屏狀態下的背景是可以自定義顏色、圖像、不透明度的,當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
3. 設計師不僅要考慮最佳狀態,還有深色&淺色模式下的,以及不同環境光、設備亮度下的顯示。還有一點很容易忽視的,就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取,還需要考慮美感問題。
1. 緊湊型和擴展型之間的布局要保持一致,兩者間的變化過渡效果是可以預測的。
2. 一般來說,擴展型和鎖屏狀態下的信息間標準間距是20pt。
3. 在某些情況下,例如圖形和按鈕,您可能需要使用更緊湊的邊距,以避免擠滿邊緣或形成混亂的外觀。
1. 內容和Live Activity邊緣之間的邊距需要保持一致,請遵循SwiftUI規則。
1內容和Live Activity邊緣之間的邊距需要保持一致,,發現以圓角邊界為測距點得到的間距關系較為舒適。即:圓形/大致為圓形的圖形保持上下,3. 以及左側或者右側間距一致即可;方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統一,才能確保間距的一致性。
需要適應不同機型的尺寸。具體的尺寸規范如下。
動態島使用44個點的角半徑,其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps:左側為寬度,右側為高度。
以上就是整理分析的全部。
在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解,也對Live Activity在各個層次上的要求更加明確。
寫一期大熱的AIGC的設計師必備的生圖軟件,文章詳細講解Midjourney如何使用,增強我們工作的效率,現在很多大廠都已經對AIGC開始制定詳細的工作流程,所以你還在猶豫什么,為什么還不趕緊學起來。
交流群分享AIGC輔助網站
Midjourney是搭載在Discord(Discord 是一個功能豐富且方便使用的通訊工具,還允許用戶創建自己的服務器以便和他人協作)上的,因此要想使用Midjourney需要先注冊一個Discord賬號。
打開Midjourney官網 http://www.midjourney.com
點擊【Join the Beta】,根據提示完成Discord賬號注冊
沒有賬戶,點擊注冊。此app可以下載電腦的
注冊頁面,按需填寫
登錄剛剛注冊的郵箱,找到驗證郵件,點擊郵件里面的按鈕進行驗證
注冊完成后,登錄Discord賬號,在左側找到“Midjourney圖標”,即Midjourney官方服務器,然后就可以看到各種小群組。新用戶只能加入新人群組【NEWCOMER ROOMS】,選擇一個加入,可以看到群組里有網友繪制的各種圖片。
由于新手群人數較多,自己生成的圖片很快會淹沒在網友生成的圖片中。為避免干擾,可以在Discord中創建自己的服務器,安靜的創作。
首先在左側菜單欄中點擊加號圖表,根據流程依次選擇,輸入服務器名稱,完成服務器的創建。
輸入自己的服務器名稱
然后,返回Midjourney 的服務器,進入房間,點擊機器人的頭像就可以選擇添加至剛創建的服務器中
然后進入自己創建的服務器中,在下方輸入框中輸入一些指令就可以使用Midjourney創作圖片了。
新注冊的用戶有25次免費生成圖像的機會,如果經常使用建議訂閱會員 按年費訂閱為8折,訂閱會員需要支持外幣支付的信用卡,有外幣信用卡的可以自行訂閱會員,沒有的可以去某寶或某魚代訂閱會員或租共享賬號 相關命令:查看剩余會員資源“/info”,切換快速模式“/fast”,切換放松模式“relax”
訂閱官網: https://www.yuque.com/r/goto?url=https%3A%2F%2Fwww.midjourney.com%2Faccount%2F
在對話框中,輸入/imagine 指令后,輸入框會變成以下樣式,即可輸入一些圖像描述詞匯(prompt),大約一分鐘的時間Midjourney Bot 會根據prompt生成四張圖片。 一個基本的Prompt可以是簡單的一個詞、短語或表情符號。 更高級的提示可以包括一個或多個圖像URL,多個文本短語,以及一個或多個參數。
圖片URL會影響最終結果圖像的風格和內容,地址必須以 .png、.gif 或 .jpg 等擴展名結尾
也可以在網站上扒圖片地址
可以復制多個圖片(建議輸入同類型的圖片) 在圖片地址后直接輸入關鍵詞或參數即可
輸入參數時,記得加空格。ps:--no+空格+你需要的提詞
改變生成圖形的長寬比,默認為1:1,支持的長寬比如下圖所示。
用于添加不希望圖片中出現的內容。例如,--no plants,會嘗試從圖像中去除植物。
圖像渲染時間。默認值是1,數值越高,消耗的時間越多,圖像質量越好,反之亦然。例如,--q 2 差不多會消耗兩倍的時間額度。更高的 --quality 設置并不總是更好,有時較低的 --quality 設置可以產生更好的結果——這取決于您嘗試創建的圖像。較低的 設置可能最適合生成抽象的圖像。需要許多細節可以設置更高的值。
這可以使得生成的圖像之間保持更穩定或可重復性,可選任何正整數。例如,--seed 100。
用于選擇使用的模型版本,默認為V4,可以選擇 <1 2, or 3>。因為V4版本生成的圖像比較寫實,因此有時可能需要選擇之前的版本。--video用于保存生成的初始圖像的進度視頻。
詳細的參數情況請前往官方文檔查看: https://docs.midjourney.com/docs/parameter-list
輸入prompts后,在生成的初始圖像網格下方會出現兩行按鈕,其中: U 按鈕用于放大圖像,生成所選圖像的更大版本并添加更多細節。 V 按鈕用于創建變體,會生成與所選圖像的整體風格和構圖相似的新圖像(4張在1圖)。
(四張圖片順時針排序:V1、V2、V3、V4;U1、U2、U3、U4)
MJ version 1,MJ version 2,
MJ version 3:偏抽象
MJ version 4:風格多樣
MJ version 5:真實圖片
Niji mode:二次元
模型測試算法: MJ test , MJ test photo
模型只能使用一個,點擊切換模型,每個模型側重點不同
Half quality:圖片質量低 (相當于--q 0.5)
Base quality:圖片質量中等 (相當于--q 1 )
Base quality:圖片質量高 (相當于--q 2 )
--stylize或-s 參數影響了這種訓練的強度。低風格化值 產生的圖像與提示密切相關,但藝術性較差。高風格化值產生的圖像非常有藝術性,但與提示的聯系較少。
Style Low = --s 50
Style Med = --s 100
Style High = --s 250
Style Very High = --s 750
--stylize的默認值為 100,并且在使用 默認【V4模型】時接受 0-1000的整數值。
public mode:公共模式,出的圖會在官網社區顯示
Stealth mode:隱私模式,出圖僅自己可見(需要會員)
生成圖片,點擊(v)的時候可更改提示詞
fast mode:快速模式,該速度下生圖沒有限制,會根據你生圖占用的 CPU排隊,生圖量越大,排隊時間越長
relax mode :輕松模式,會優先生成你的圖(需要會員)
獲取全部關鍵詞,添加群主微信獲取
用相同的“seed種子”產生相同的結果,然后可以微調畫面細節 選擇郵件表情發給機器人,這樣就會收到一個機器人的私信。發“E”可以快捷搜索出圖標
發送后,底部會出小郵件圖標,點擊等待機器人回復
收到消息,復制種子
在輸入新的關鍵詞后,結尾輸入-- seed指令,復制上你的種子
3、復制圖片地址,利用墊圖來保持創作的關聯性
本文描述如何使用ChatGPT成為我們在工作與學習中的超強助手 ChatGPT是一種大型語言模型,它可以通過處理自然語言文本來產生回復,可進行自然、流暢的對話。ChatGPT可以在多種應用場景中使用,例如智能客服、智能助手、問答系統、聊天機器人、翻譯等等。
你可能對ChatGPT帶來的變革毫不關心,認為只是一個聊天的工具,但是ChatGPT的出現確實見證了技術的革新,對于新事物,尤其是現在處在一個AI科技爆發時代,越早接觸新技術,越早擁有核心競爭力。堅持看完文章相信對你會有很大幫助。
以調研專員身份進行對話,使他可以用更專業的詞匯回答你的問題。
可以針對某個產品,生成對應用戶年齡段的用戶畫像,輔助產品調研工作
指令:請寫 [N 份],關于 [某個產品 /NN~NN歲] 的用戶畫像
針對某個產品,去分析產品高頻、低頻功能。可以生成列表,統計使用頻率。
指令:請查閱 [某產品] 用戶 [經常使用或最少使用] 的功能,要求數據真實可查詢
生成某產品的調研報告,可規定字數,如果寫到一半停下,發送「繼續」的指令就可以繼續發送啦~
指令:請總結一份 [某產品] 用戶使用 [某功能] 的調研報告
以競品研究員的身份進行對話。如果有需求可以附加競品研究員所處的行業類別。
可以選擇自己關注的競品產品,生成報告,可以規定競品報告的側重點。
指令:生成一份有關 [選擇你的競品] 的競品分析報告,詳細分析其雙方的 [你的需求]
當你在對產品某個領域不太清楚時,你可以隨時收起相關的材料,比如你對金融行業的用戶體驗的行情感興趣,你想深度了解的時候,用你的資料整理助手幫你整理資料。
指令:給我 [N 篇] [領域] 的文章
接著你可以讓助手對上述文章進行總結
指令:用列點的方式總結上述文章中的 [數字] 重點
指令:用列點的方式總結出 [數字] 個 領域 知識重點
在寫報告時,經常會對某個領域或知識點不清晰,無從下手的情況。遇到這種情況,可以直接使用下面的指令獲取專業的研究報告,幫你了解最新的研究以及專家觀點。
指令:寫出一篇有關 [領域] 的 [數字] 研究報告,要求引用真實數據與專家觀點。
針對某個主題可以提出反對觀點,改變角度,擴大寫報告的思維。
指令:針對一下論述 [觀點] 提出反駁的觀點,每個論點都要有論證
寫報告時,可以針對某個部分,用AI幫你去提煉你所需的內容。
指令:你是金融互聯網專家,請總結以下內容,并針對以下內容提出未來能進一步研究的方向 [附上內容]
可以輔助你寫出一份ppt大綱,為你提供思路。雖然無法寫出細節,但是可以根據標題再去發指令,生成詳情內容。
指令:請寫一份有關于 [領域] 的PPT,頁數在 [數量] 頁以內
根據大綱標題,細化內容
指令:輸入標題名稱,[字數] 以內
先去培養角色,讓他用簡潔的英文單詞,為你提供AI繪畫的關鍵詞。
指令: 現在起,當我想要你發送圖片、照片的時候,用3/8Markdown寫,不要有反射線,不要用代碼塊。使用 Unsplash API(https://source.unsplash.com/1280x720/?)。如果聽懂了請回復明白,以后需要這樣
可以設定面試場景,生成一個對話場景,為面試做準備,提前準備面試中可能被問到的問題。
指令:請以 [崗位] 的身份,情景再現一場面試工作
將AI的身份塑造成面試官,模擬真實的面試場景,提高自己的面試能力
指令:請你以 [崗位] 面試官的身份與我對話,進行一場面試
針對職業方向如何發展,可以讓ChatGPT根據大數據為你推薦現在的職業發展的熱門方向,為未來開展明燈。
指令:[行業] 未來職業方向,哪個比較熱門
針對職業方向,可以繼續探索自己感興趣的職業規劃
指令:請提供 [崗位] 未來的職業規劃
輸入網頁,可幫您總結當前網頁的信息,提煉關鍵信息,提高閱讀效率
指令:[網站] 請總結這個網站的信息
指令:詳細的說明 [想了解的知識]
指令:[科目] 學習看哪些網站
指令:我學習使用 [工具],我應該看哪些網站的教程
3、英語學習助手
1)、英語對話
指令:Can we have a conversation about [話題] ?
指令:Please correct my grammar and spelling mistakes in the text above:[附上英文文字]
安裝「Voice Control for ChatGPT」谷歌插件,可播報Chatgpt的文字,練習聽力與口語。在谷歌應用商店中搜索下載即可。
這些就是我在用chatGPT中對設計師來說比較有價值的提問方向,希望對大家有啟發。
一、前言 —— 1.1 閱讀之前、1.2 調研背景、1.3 分享目的、1.4 術語說明
二、市場分析 —— 2.1 行業背景PEST、2.2 市場現狀
三、主流工具 —— 3.1 調查篩選、3.2 工具介紹、3.3 分析模型、3.4 結構層、3.5 框架&表現層
四、功能體驗 —— 4.1 創建大屏、4.2 分享導出、4.3 更多玩法
五、探索思考 —— 5.1 未來迭代、5.2 設計價值
閱讀提醒
1、文章上篇約10300字,閱讀時長約20分鐘。全文主要分享本人對當下主流可視化大屏搭建工具的調研分析,淺談對可視化行業的探索思考。由于篇幅有限,閱讀體驗更佳,故分為上下兩篇,上篇簡述可視化行業的市場分析,拆解分析主流工具(DataV、Raydata、EasyV、森大屏)的結構層、框架層和表現層。下篇接著講主流工具(DataV、Raydata、EasyV、森大屏)的功能體驗,淺談可視化行業未來的探索和思考。
2、文中的拆解分析部分,多款工具可能存在較多重復觀點,由于篇幅有限,故不再贅述。
適合讀者
B端UI設計師、產品經理,可視化行業相關從業者及愛好者。
調研時間
2022年9~10月
調研方式
桌面研究、問卷調查
首先,本次分享僅作為個人學習交流,文章觀點僅代表個人。目前比較少有可視化工具的產品分析,本次通過調研,希望了解更多可視化大屏工具的背景、知識,也希望能通過文章的形式,達成兩個分享目的:一、提升自身的復盤總結能力,鼓勵將知識沉淀后輸出分享;二、借此機會與更多行業相關者分享交流學習。
數據可視化
關于數據視覺表現形式的科學技術研究。
數據可視化平合
它是大數據內在價值的最終呈現手殷,它利用各類圖表、趨勢圖、視覺效果對數據進行分析并展現,幫助用戶發現內在規律、發掘深度規律、指導經營決策。
大屏搭建工具
利用簡單拖拉拽、低代碼開發等方式,幫助非專業工程師快速實現炫酷大屏的數據可視化大屏效果的互聯網工具類產品。業務場景主要有行業可視化、智能終端、模擬演示、數據統計分析。
在2011年左右,國內帆軟公司研發簡單的可視化產品,起名“FineBI”,解決了用戶個性化的可視化分析的需求。隨著技術發展和行業趨勢發展,在滿足智能分析報表的基礎上,又迎來了更高的可視化大屏的挑戰,國內如光啟元Raydata、阿里DataV等可視化大屏工具開始出現,各大廠商如京東、百度、網易有數等紛紛踏上可視化賽道,隨著近年的政策支持企業數字化轉型的浪潮下,可視化行業得以快速發展成熟,為企事業單位解決了一個又一個可視化分析難題……
本次調研經過桌面研究,分析出近年來可視化行業背景和市場現狀。
從政策、經濟、社會、技術這四個方面,分析數據可視化行業的背景,得出以下結論:
一、在政策方面,數據可視化行業受到政策扶持;
二、在經濟方面,IT產業體系擴大且成熟;
三、在社會方面,數據可視化解決企業痛點,機會點在政企和醫療行業;
四、在技術方面,企業通過數據可視化進行精細化管理成為現實。
* PEST分析法 是對宏觀環境進行分析,以便找到機會,認清威脅與挑戰。所謂PEST,P是政治(Polotics),E是經濟(Economy), S是社會(Society),T是技術(Technology)。這種方法就是將這4個元素分別寫在4個格子中,并羅列出這4個元素相關聯的與產品有關的環境因素,最后投票選出3~5個點子作為PEST分析的結果。
P政策
中國相繼出臺多項政策(如《“十四五”大數據產業發展規劃》)重點扶持數據采集、數據安全、數據處理、數據存儲及大數據在產業端的應用等方面的快速提升,進一步利好數據可視化平臺等相關細分產業的快速發展。
制定5個發展目標、6大主要任務,明確大數據產業將步入“集成創新、快速發展、深度應用、結構優化"的高質量發展新階段設置數據治理能力提升、重點標準研制及應用推廣工業大數據價值提升、行業大數據開發利用、企業主體發展能級躍升、數據安全鑄盾六個專項行動。(參考來源:頭豹研究院)
E經濟
2021全年國內生產總值突破110萬億,GDP達114萬億元,按不變價格計算,比上年增長8.1%,兩年平均增長5.1%。
我國IT產業在經歷了三十多年的發展后,已經基本形成了產業規模龐大、專業門類齊全的IT產業體系,2020年我國IT支出達2.9萬億人民幣。
在應用軟件領域百花齊放,2021年上半年我國軟件業完成軟件業務收入44198億元,同比增長23.2%;全行業實現利潤總額4999億元,同比增長13.6%。另外,對于云計算、大數據、物聯網、人工智能等新一代技術,我國也由單點向融合互動不斷演進。(參考來源:頭豹研究院)
S社會
數據可視化可有效解決企事業單位在傳統數據分析的痛點,降低了企業數據分析成本,助力企業在技術層、業務層、管理層及決策層等層面的決策能力。
受疫情影響,政務及醫療領域對公共衛生等等公共領域掌控力度加強,因此,中國數據可視化未來市場增長點將主要集中在政務及醫療衛生領域。(參考來源:頭豹研究院)
T技術
伴隨著互聯網、物聯網快速發展,中國數據量持續增加,通過對數據的可視化處理及分析,企業端對日常精細化管理成為現實。
過去5年間,中國數據產生量快速增加ie中2017年的6ZB快速增加至2021年的16ZB。預計未來5年中國數據產生量將繼續增加,有望于2026年達到62ZB。(參考來源:頭豹研究院)
分為市場階段和市場規模,說明當前數據可視化行業的市場現狀。結論如下:
一、國內數據可視化平臺市場尚處于發展期,潛在市場容量非常巨大,前景廣闊;
二、預計未來5年國內數據可視化平臺市場規??焖僭黾?,復合增長率達32.5%。
市場階段
國外可視化展現平臺行業起步較早,市場相對成熟,消費者認可較高,而國內可視化展現平臺行業市場還處于發展期,雖然2012年呈現出小爆發式增長,但市場尚不成熟,還有待于培育,然而國內人口基數大,隨著國內經濟的發展,人民生活水平的提高,收入的增長,對精神生活方面的消費也不斷增加,國內潛在市場容量非常巨大,前景廣闊,因此,可視化展現平臺行業的發展將逐漸向本土化轉移。
當前,中國數據可視化平臺行業尚處于發展早期,36.8%投融資事件主要發生在早期A輪階段,行業尚具有較大發展潛力。從地域分布情況來看,中國數據可視化企業主要分布于廣東省、北京市、上海市、江蘇省及浙江省等區域,約占總體的93.5%。當前,中國數據可視化行業投融資較為活躍。其中約36.8%的企業處于A輪融資階段,2家企業已于新三板掛板,其中,觀遠數據于2022年2月完成C輪融資,共計2.8億元。(參考來源:頭豹研究院)
市場規模
過去5年間,中國數據可視化平合市場快速增加,由2017年的13.2億元快速增加至2021年的43.8億元,復合增長率達27.1%。預計未來五年中國數據可視化平臺市場年復合增長率有望達到32.5%。(參考來源:頭豹研究院)
根據上面的行業背景和市場現狀,從政策扶持、經濟增長、社會機會點增加、技術革新、市場階段成熟、市場規模擴大方面都是正向推動著可視化行業的快速發展,于是,市面上逐漸出現了很多數據可視化大屏搭建工具,目的是有效解決企事業單位在傳統數據分析的痛點,助力企事業單位快速進行數字化轉型,整合數據、提高數據展示效率及輔助管理決策。
經桌面研究、問卷調查后,發現并整理出市面主流的數據可視化大屏搭建工具梯度說明。以工具滿意度、行業普及率、用戶量幾個維度來劃分梯度:
第一梯隊有阿里云DataV、騰訊RayData、袋鼠云易知微;
第二梯隊有騰訊Banber(現改名RayData Report)、山海鯨可視化、森工廠森大屏、51WORLD、華為云DLV;
第三梯隊有微兔可視化、ByteV中臺等。
*本次未歸入調研范圍內:京東、百度、網易有數等廠商可視化產品,以及一些開發大佬的開源大屏工具
*使用騰訊問卷自發進行問卷調查,主要渠道為微信群,有效樣本量較少,數據僅供參考
第一梯度的阿里云DataV、騰訊RayData、袋鼠云易知微的工具滿意度、行業普及率、用戶量綜合評分較高,還有第二梯度的森工廠森大屏對比其他競品產來說,產品形式不同,后面將以阿里云DataV、騰訊RayData、袋鼠云易知微、森工廠森大屏這4個工具產品來進行體驗分析。
調研版本:*阿里云DataV - 企業版試用 - V6.2; 騰訊RayData - Web版 - V2.6.0; 袋鼠云易知微EasyV - 個人版 - V5.1.0; 森工廠森大屏 - V2.10.11 。
*EasyV2022年12月上新了「節點管理」功能(類似DataV的「藍圖」功能) 會與本次調研版本有一定差異。
*由于阿里云DataV在調研后2023年UI進行較大更新,所以會與本次調研版本有一定差異,更新日志傳送門:https://developer.aliyun.com/article/1127824?spm=5176.14082271.J_5834642020.1.42c74dcf64Y3FZ#slide-12
阿里云DataV
a.產品簡介
使用可視化應用的方式來分析并展示龐雜數據的阿里云產品。其中DataV企業版試用是適合剛接觸DataV的新用戶,輕松搭建可視化大屏,匯報、客戶參觀必備。而DataV數據可視化企業版是開箱即用實時數據大屏搭建工具。
b.產品特點
智能識圖;藍圖節點編輯器;三維城市編輯器;BI分析組件
c.產品版本
企業版(本次調研)、專業版、尊享版
騰訊光啟元RayData
a.產品簡介
專注3D數據可視化原型設計。RayData Web是B/S架構開發的網頁端可視化系統搭建工具,支持在線3D可視化編輯,輕松構建商業級數字孿生項目。
b.產品特點
3D模型風格獨特;圖表工作站;模型場景工作站;提供定制服務
c.產品版本
個人版、Web版(原名專業版,本次調研)、Plus版(私有化部署)
袋鼠云易知微EasyV
a.產品簡介:
數字孿生,EasyV是低成本無門檻上手數據可視化大屏的工具,數據看板可視化,輕松設計 高效搭建。
b.產品特點:
素材資源豐富;資源社區氛圍好;提供定制服務
c.產品版本:
個人版(本次調研)、高級版、尊享版、運行平臺(私有化部署)
a.產品簡介:
拖拉拽搭建可視化大屏,內置豐富模板和在線圖表開發工具
b.產品特點:
數字孿生工具鏈生態完善;藍圖節點編輯器;圖表工作站;提供建模服務
c.產品版本:
基礎版(本次調研)、專業版、高級版
本次調研使用【用戶體驗五要素】模型方法來分析主流工具DataV企業版試用、Raydata Web專業版、EasyV個人版、森大屏基礎版,主要側重在表現層、框架層、結構層。
此處說明一下,例如本次調研的屬于功能型產品,那么功能型產品的結構層側重于交互設計,通??捎盟季S導圖、流程圖方式來說明情況。再往上看,功能型產品的框架層側重于信息設計、界面設計,大致模塊尺寸大小、位置擺放,通??捎玫捅U嬖?、交互文檔來說明情況。到了模型最頂層,不論功能型還是信息型產品的表現層都是感知設計,關注視覺如何呈現,通常運用形、色、字、質、構、動著6個維度進行整體視覺設計。
用戶體驗五要素來自Jesse James Garrett 的《用戶體驗要素》一書:戰略層、范圍層、結構層、框架層、表現層。
在結構層中,DataV企業版試用、Raydata Web專業版、EasyV個人版、森大屏基礎版4款產品略有不同(且名稱叫法不一),整理總結出共性,產品包括系統頁和編輯器,系統頁下包括項目列表、資源管理、用戶管理、幫助中心,編輯器下包括頂部導航欄、組件庫、圖層面板、畫布區、信息面板。
為了更清晰了解4款產品的產品設計側重點,接下來,對比分析它們的結構層。
關鍵詞:強調品牌感、幫助中心、靈活切換藍圖
DataV企業版試用分為系統頁+編輯器。系統頁頂部是輪播banner圖,強調品牌感和打造產品差異化。
系統頁主要包括我的可視化、我的數據、我的資產、教程,其中我的可視化包括3個創建入口,分別是PC創建、移動端創建和識圖創建,滿足用戶在不同場景的使用需求。系統頁中教程層級放在一級菜單下容易被用戶發現,對小白用戶比較友好,快速觀看視頻教程。
編輯器中包含畫布編輯器和藍圖編輯器。進入編輯器后,可切換畫布編輯器與藍圖編輯器,放在同一層級,方便用戶從畫布編輯器中添加圖層到藍圖編輯器中。
畫布編輯器(PC和移動端基本一致)包括圖層、資產列表(資產包、組件庫)、工具欄、畫布、頁面設置、組件設置。藍圖編輯器包括導入節點、邏輯節點、工具欄、配置面板。
關鍵詞:可視化統計、定位專業用戶、畫布占比大
Raydata Web專業版分為系統頁+編輯器。系統頁主要包括工程列表、資源管理、數據管理、權限管理。因為產品定位是專業版,所以弱化了幫助手冊的入口,同時編輯器中也是基于熟悉掌握工具的用戶而設計的。類比于Raydata Web個人版,系統頁的更多幫助入口更為明顯,適用于新手小白使用。
系統中的資源管理包括3D資源和2D資源,顯示資源數量,以環圖可視化的形式表現,系統中的權限管理也同樣顯示人員數量,數據統計一目了然。
編輯器中的大綱、概要與其他產品結構不同,大綱包括系統UI層(放2D)、層級(放3D)、頁面(2D&3D),概要分不同情況而定,處于UI層時顯示2D組件,處于場景層時顯示3D組件。
畫布編輯器包括頂部欄(基礎功能、組件庫)、概要、大綱、畫布、頁面設置,頁面設置(畫布設置、組件設置)。其中組件庫折疊在頂部欄中,增大了編輯器中畫布的占比,讓用戶更關注當前畫布操作。
關鍵詞:素材資源、幫助中心、畫布占比大
EasyV個人版分為系統頁+編輯器。系統頁包括我的應用、我的數據、終端交互(高級版有)、組件開發(尊享版有)、后臺管理、門戶管理(高級版有)、資源中心。
其中系統頁的資源中心包括應用模板、設計素材、主題資源,有入口可跳往素材廣場,EasyV的素材資源十分豐富,該跳轉入口可以很好引導用戶去使用官網設計素材,輕松搭建大屏。幫助菜單位于常駐懸浮于系統頁側邊欄,其包括操作日志、幫助文檔、視頻教程、問答中心、版本日志,幫助菜單對于新手小白比較友好,操作路徑簡短,方便新手查閱幫助資料。
編輯器包括任務欄(基礎功能、組件、資源)、圖層、畫布、詳情設置(頁面設置、組件設置)。同Raydata Web專業版產品,其中組件庫折疊在任務欄中,增大了編輯器中畫布的占比,讓用戶更關注當前畫布操作。
關鍵詞:工具鏈、模板推薦、藍圖和代碼二開
森大屏基礎版分為系統頁+編輯器。森大屏的結構和其他產品不同,由于數字孿生工具鏈生態比較完善,打通其他工具鏈入口(森工廠旗下有低代碼、零代碼、森大屏、森城市、森園區、森展廳、森拓撲、森數據、森模型等),所以系統頁頂部導航菜單可快速切換工具。
系統頁包括了個人中心、幫助手冊、我的大屏、推薦大屏(模板),側重展示推薦大屏,引導用戶優先選用模板進行大屏快速搭建,生產提效。
編輯器包括大綱、工具欄、畫布、畫布屬性、資源管理、菜單欄、資源中心、藍圖和代碼二開。編輯器中與DataV不同的是,藍圖、代碼與畫布位于同一層級,用戶可隨時使用藍圖來鏈接交互事件,也可進行代碼二次開發操作。
將4款產品的框架層和表現層進行拆解分析。
在框架層中,大體而言按鈕、輸入框等控件圓角較小,看起來比較方正,弧線的異形設計,容易體現科幻造型。在登錄頁中,頁面布局各有差異。在編輯器中的布局大體一致,畫布都位于界面中心,強調用戶最關注大屏設計的畫布區域。高頻操作的組件庫在頁面的位置各有差異。
在表現層中,主要通過形、色、字、質、構、動這6個維度來進行對比分析。DataV企業版試用、Raydata Web專業版、EasyV個人版、森大屏基礎版4款產品的整體視覺調性都是以暗色、科幻風格為主。登錄頁都選擇了亮色風格界面,系統頁和編輯器都是暗黑風格。部分產品品牌字體以直線為主并加入弧線和粒子元素,科幻的界面動效主要體現在加載頁面。
阿里云(DataV企業版試用)- 登錄頁
DataV 的登錄頁統一由阿里云登錄頁進入。以中心布局(核心面板偏右),三維模型+灰色背景+線條點綴的形式進行設計,主題色是阿里的橙色。因為DataV是阿里云旗下的產品,共用入口,所以此處沒做額外的產品登錄頁以強調 DataV 產品一致的品牌感。
Raydata Web專業版 - 登錄頁
Raydata Web 登錄頁以中心布局的形式,無其他設計元素,只保留關鍵信息,同其他競品相比略顯單調。登錄頁的淺色風格與進入系統頁和編輯器的暗黑風格,缺乏界面整體色調的一致性。界面控件主題色使用藍紫漸變色,與系統頁和編輯器的藍色也略有差異。(可從Raychart產品使用手冊發現,舊版布局為同EasyV)
EasyV個人版 - 登錄頁
EasyV 的登錄頁有2處觸發,常規觸發和資源中心觸發,分別以左右布局的全頁和彈窗形式進行框架設計。彈窗的形式不需額外跳轉,讓用戶在資源中心挑選素材時能更快進行登錄操作。登錄頁以左右布局的形式,插圖與登錄模塊大致各占50%,深色插圖的和淺色登錄模塊的兩個色塊形成強烈視覺對比,更能吸引用戶注意。
森工廠(森大屏基礎版) - 登錄頁
森大屏的登錄頁以中心布局的形式,有利于聚焦視覺,背景使用簡約抽象的形狀來點綴畫面?;疑尘?抽象圖形點綴,與淺色登錄模塊拉開視覺對比。按鈕主題色是橙色,是因為森大屏是優锘科技森工廠旗下的產品,共用入口,所以此處沒做額外的產品登錄頁以強調森大屏產品一致的品牌感。
DataV企業版試用 - 系統頁
頂部輪播圖占整個頁面四分之一左右,強調品牌感同時打造產品差異化,Banner內容為統一風格的3D模型場景+無襯線字體標題為主,一級導航邊緣弧線的流光動效表現科幻酷炫風格。
一級導航欄與輪播圖的重疊關系,半透的玻璃質感,仿佛是用戶透過一層玻璃,打開可視化世界的大門,結合暗黑風格的界面,給用戶一種進入游戲的沉浸感、躍躍欲試的沖動??v向與橫向結合的混合導航,對于后期有規劃新功能而言,拓展性較強,缺點是占用面積大、交互路徑長,適用于大屏項目數不多的情況下,若項目數量較多,可能有空間不夠的焦慮。
我的可視化中的3個創建入口按鈕使用了扁平加光感強、冷色調風格插畫,引起用戶注意,快速識別創建功能入口。主題色使用比較鮮艷活躍的藍色,輔助色為青色,占用面積不多,起到豐富點綴畫面的作用。設計元素的四周輪廓不做圓角處理,顯得整體界面比較方正端正、硬朗嚴肅的印象。
Raydata Web專業版 - 系統頁
左上方展示品牌Logo,清晰寫明當前產品及版本,符合用戶認知。品牌元素融入進頂部欄右側頭像及皇冠圖標,加深品牌印象。
以側邊懸浮導航的形式使用戶快速定位查找功能模塊的位置,拓展性較強,以較瓷片“大包小”的結構,聚合了較多功能模塊,如果是小分辨率屏幕的情況下,經常要鼠標輪滑來回滾動才可看到下方功能模塊,導致不夠靈活高效。側邊導航模塊中的圖標統一為形狀較方正、偏冷的中性色、扁平微漸變風格。敬請期待的藍色沙漏圖標在界面中略微突兀出,缺少圖標風格一致性。
界面為偏冷中性純色,無背景裝飾,同登錄頁只保留關鍵信息(如大屏項目卡片),不加過多裝飾的簡約風格調性保持一致。按鈕主題色使用比較灰的藍色,透出沉穩柔和的調性。設計元素的四周輪廓略微加了些圓角,同DataV硬朗的感覺則稍微緩和一些。
EasyV個人版 - 系統頁
上方展示品牌Logo,同Raydata,不再贅述。對于創建大屏按鈕而言,DataV用的是插畫按鈕的形式,Raydata是用卡片按鈕的形式,而EasyV則用圖文按鈕的形式,而圖文按鈕的優點是占用面積少。
同DataV,選用了縱向與橫向結合的混合導航,拓展性較強,不再贅述。二級導航底部使用了動態插圖點綴界面,插圖是不斷旋轉的科幻裝置,角度帶有透視,讓扁平的整體界面附帶了層次感、空間感。右側側邊菜單的幫助圖標提供給用戶快捷操作,對新手小白友好。
缺省頁運用情感化設計,以2.5d插圖的表現形式緩解用戶負面情緒,配色在深色界面中顯得比較明顯,個人認為可以適當弱化插畫亮色部分。主題色使用鮮艷活躍的藍色為主,在深色的界面中同樣相對明顯、突出。設計元素的四周輪廓既有全圓角,也有小圓角,界面形狀統一性待加強。
森工廠(森大屏基礎版) - 系統頁
左上方展示品牌Logo,同Raydata,不再贅述。由于是森工廠旗下的工具鏈,所以森大屏的系統頁頂部欄可進行工具切換,界面左右兩側留白很多、版心小、淺色風格,讓整體界面更像是一個前臺官網的印象。
使用了像是混合導航的方式,用“像”這樣表達是因為,頂部欄是工具切換欄,而側邊懸浮導航1竟然是所有工具的個人中心,側邊懸浮導航2卻是當前工具森大屏的資源中心,右側內容區是當前工具森大屏的我的大屏、推薦大屏模塊??蚣苌嫌幸欢ǔ潭炔惶嫌脩粽J知,導致引起疑惑和誤解。盡管如此,配色上使用橙色(森工廠)和具體工具主題色來區分當前位置,能一定程度防止用戶混淆概念,通過多次在頂部欄切換工具,可預知上面提到的導航1是指所有工具而言的,而導航2則是指當前具體工具而言。
右側側邊菜單提供用戶快速反饋的入口,簡單便捷。其中側邊菜單的問號圖標與頂部欄的一樣,跳轉鏈接一致,而文案卻使用了“常見問題”和“幫助中心”2種,重復功能入口也許考慮的是為了增加點擊,而同個界面重復堆放功能入口的合理性還有待考究。圖標使用了毛玻璃和線性圖標的表現手法,為界面提升質感。設計元素的四周輪廓加了小圓角,整體給人的感覺更為親切、友好。
DataV企業版試用 - 畫布/藍圖編輯器
整體暗黑風格的界面下,能使得用戶設計深色風格的可視化大屏時,保持更專注的狀態。題外話,DataV新版本的編輯器界面可切換有淺色風格,同理,淺色編輯器界面則更適合在設計淺色風格的大屏的場景。通過不同深色色階的背景色塊讓每個功能模塊的框架位置區分得清晰明了,另外整體配色、形狀方面都遵循視覺呈現一致性,降低用戶認知成本。
在編輯器左上方無退回系統頁的返回按鈕,用戶只能通過切換瀏覽器標簽頁回看系統頁,而無法在當前頁返回上一層級回到系統頁,所以對于想要快速返回上層的場景下,則顯得不那么便捷。頂部欄左側的畫布編輯器與藍圖編輯器選項按鈕歸于一組符合用戶認知,可快速切換當前編輯器進行大屏視覺設計或鏈接交互事件。畫布編輯器和藍圖編輯器的畫布外區域保持視覺統一,使用了點平鋪的背景與畫布做出層次區分。
右側的屬性面板中展示組件的配置功能,當信息較多時,用視覺較弱的分割線區分每組的配置信息,數據之間比較緊湊,提高面積利用率。編輯器中多處的功能組使用了格式塔原則的接近性,讓距離更近的功能組更有關聯性,層次清晰有序,降低用戶認知成本。
圖標表現方式只使用了單色線性圖標一種,讓整體界面表現得更簡潔、輕量化,忽略圖標形狀而讓用戶更多去關注功能。配色、圓角遵循視覺呈現一致性,當功能被選中時,會以藍色背景、圖標反白的方式強調該功能的狀態、位置。
Raydata Web專業版 - 編輯器
同DataV,暗黑風格界面,不同深淺色塊背景區分功能模塊,且界面左上方無退回系統頁的返回按鈕,不太便捷,不贅述。
大綱與概要類似于頁面與圖層的關系,像設計軟件Figma的Page(頁面)與Layer(圖層),大綱與概要位于界面左側的區分上下模塊,框架從上至下擺放,符合用戶認知。對于新手小白,還需額外查看教程引導才能認知大綱與概要的框架,因為此版本定位為專業版,所以弱化了幫助指引,簡化界面,讓專家級用戶更沉浸地、不受過多干擾地使用。
組件庫位于頂部,占用面積小,前面結構層提過,作用是增大了畫布占比,讓用戶更專注設計,不贅述。
圖標表現方式使用了單色面性圖標和微漸變扁平投影圖標,界面頂部是組件庫,這些微漸變圖標呼應了系統頁同樣使用了為漸變風風格。為了強調組件庫這種用戶高頻操作區域,使用了更吸引用戶注意力的微漸變扁平投影圖標,而其他區域則使用單色面性圖標,弱化視覺,讓界面輕量化,讓用戶更多去關注功能。同DataV,同樣使用格式塔原則的接近性,層次清晰,降低認知成本,不贅述。
配色、圓角遵循視覺呈現一致性,當功能被選中時,會以藍色背景、圖標反白的方式強調該功能的狀態、位置。
EasyV個人版 - 編輯器
與其余3款工具不同,EasyV在編輯器左上方有退回系統頁的返回按鈕,方便用戶快速返回上層的系統頁。
同Raydata,組件庫位于頂部任務欄中,占用面積小,前面結構層提過,作用是增大了畫布占比,讓用戶更專注設計,不贅述。
圖標表現方式使用了單色微漸變線性圖標,部分圖標線細節還用半透明效果,而部分則用了不透明度漸變的方式,提升圖標質感,讓整體界面輕量化而不至于過于單調。配色、圓角遵循視覺呈現一致性,降低用戶認知成本。
森工廠(森大屏基礎版) - 編輯器
同DataV,暗黑風格界面,不同深淺色塊背景區分功能模塊,且界面左上方無退回系統頁的返回按鈕,不太便捷,不贅述。
編輯器的任務欄設計類似本地客戶端軟件的頂部菜單欄,通用的“文件、編輯、視圖、排列、圖表、調試、幫助”菜單都放在了頂部任務欄,符合用戶交互習慣,缺點占用面積較大。
與Raydata結構一樣,同樣有類似設計軟件Figma的Page(頁面)與Layer(圖層)的關系,森大屏把圖層放在畫布底部欄,而大綱放在組件庫的左下角位置??赡芸紤]不占用過多面積而折疊在左下角,但缺點也很明顯,層級較深,難以找到大綱中的畫布元素,對新手小白不太友好。通過畫布底部欄切換圖層,這里圖層也是分2D和3D,還可設置圖層為全局圖層,即預覽大屏時跳轉任何地方都始終顯示該圖層,可減少重復勞動設計。
藍圖和代碼二開也位于畫布底部區域,同DataV,森大屏也有藍圖功能。底部有藍圖和代碼二開的切換按鈕,方便用戶鏈接交互事件和調試二改組件的時候,不完全遮擋畫布,讓用戶更易感知當前所處位置和狀態,無需來回切換頁面而增加操作成本。
界面圖標表現方式同DataV,只使用了單色線性圖標,讓整體界面表現得更簡潔、輕量化,不贅述。畫布外區域使用了點平鋪的背景與畫布做出層次區分。
上篇簡述可視化行業的市場分析,了解到國家政策如《“十四五”大數據產業發展規劃》大力支持可視化行業的發展,可視化行業解決企業痛點,助力企事業單位進行數字化轉型。隨著數據可視化行業的發展,可視化報表分析工具逐漸衍生出更利于輔助分析的可視化大屏工具,隨后進行桌面研究、問卷調查后,篩選出4款主流工具(DataV、Raydata、EasyV、森大屏),分別對它們的結構層、框架層和表現層進行拆解分析。
設計師在了解和體驗工具型產品時,也要對其行業有一定的思考,這樣更有利于了解業務、用戶以及產品。下篇接著講主流工具(DataV、Raydata、EasyV、森大屏)的功能體驗,淺談可視化行業未來的探索和思考。
那么,下篇再見!
我們需要什么樣的配色方案?
B端的系統的主色代表著一個系統的氣質,與所在行業、產品的定位、用戶群體都有一定的關系。前面調研了眾多竟品及市場前沿配色方案,目的就是期望從它們身上找出共性,引領我們的系統找到最適合的方案,這是知彼。
光有“知彼”是不夠的,我們還要清晰的知道自己是誰?這樣我們才可以說我們的配色方案是最適合我們的,有理有據的方案。
B端系統的真正使用人群比較復雜,具有年齡跨度大,文化水平參差不等,從事行業廣泛等特點。
源于自然之美的色調,突顯靈活性與再生的創意!
依據彩通色彩研究所專家的說法,紐約時裝周2021春夏季的色彩強調我們渴望能激發出巧思與創意的色彩,這些色彩的百搭性質穿越季節,容許更多的選擇自由,適于表達原創的風格,也足夠靈活來適應現代新的更片斷化的生活方式 。
“2021春夏的色調呈現出大自然,強調我們渴望擁有全年皆宜的靈活色彩,這一季的色彩充滿道地真實的感覺,這種感覺對色彩而言愈來愈重要,同時結合了某種程度的舒適與輕松感,并散發出活力,激勵振奮我們的心情”
說到這里“主題色”如何來選擇?
色彩對于人的大腦的沖擊力大于造型,比如淘寶,我們會記憶起淘寶的主色是橙色;色彩是影響人類視覺思維的重要因素,色彩能直觀的體現產品的性格和氣質,所以選擇一款適合產品的主色很重要。
我們的用戶在更替,如何讓產品年輕化、品牌年輕化是現在幾乎所有企業都在思考的問題,新的用戶群體從小接受的教育和喜好決定著產品的發展方向。
比如:我們這次顏色升級中律動、青春活力是核心關鍵詞,而藍色則可以讓產品視覺符號得到延續。
對于主題色的選擇指標有哪些?
通過關鍵詞圖片像素化提取顏色,同時參考B端產品顏色流行趨勢和當年的年度流行色,以及竟品顏色分析結果,獲取藍色的色相、純度、明度范圍。
2020潘通年度顏色經典藍(19-4052 Classic Blue),顏色值為#174A7B(H207 S81 B48)
2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver,顏色值為#02569D(H207 S99 B62)
假設:竟品的主題色藍色的色相范圍為205-225;純度的范圍為70-96,平均值為86;明度的范圍為70-98,平均值為88,B端產品流行趨勢的主色也多是藍色系,色相范圍為200-232;純度的平均值為70;明度的平均值為68。
色彩的使用范圍及色階有哪些?
色彩的應用場景包括:關鍵行動點,操作狀態、重要信息高亮,圖形化等場景;針對這些使用場景只有一個色值是不能滿足所有場景使用的,所以我們要建立主題色的不同色階來滿足不同場景下顏色的使用。以建立色彩層級,或傳達信息,或強化界面層級。
在色彩系統中,常使用 Tints and shades 系統來建立調色板,通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調色板,在符合無障標準的區域,選擇不同明度飽和度的色彩,形成有梯度、有層級的彩色調色板。
B端產品中光有“主角”是不夠的,還要有“配角” 所以我們還要看一下輔助顏色是如何定義的?
輔助色是為了幫助頁面區分狀態和層級而設立的顏色,主要包括圖表類儀表盤顏色和功能色,通過合理的顏色傳遞產品正確的信息,讓其信息傳達更明確清晰。
輔助色的作用是配合襯托產品主色調,在不同的產品中,輔助色運用的策略是不同的,比如我們在竟品調研中發現,輔助色經常是取自主色的鄰近色、對比色和互補色等。
儀表盤配色:通過對竟品的分析可得知,優秀的儀表盤的配色有多系列及低純度的特點,多系列配色是為了滿足用戶個性化的需求,而低純度是考慮用戶在長時間使用產品,色彩對其心理的影響。
功能色:這類顏色在系統一般不會隨意更改,而且特定的語義一般都有固定的色相,只需改變其純度和明度,使其視覺上符合主色的氣質,使其搭配和諧。
1.通過默認主題色選擇輔助色及默認儀表盤顏色
我們以默認主題色為#467FEA(H 219 S 70 B 92) 為起始點,S(飽和度)、B(明度)保持不變,H(色相)以180°為起點,以15°為增量或減量標準,生成24色色板。這個色板是我們選取輔助色的重要依據。
以鄰近色、互補色、對比色為原則選擇豐富的顏色
鄰近色:在色相環中,相差15°的顏色為鄰近色,凡在60°范圍內的顏色都屬于鄰近色的范圍,主色和鄰近色的色系組成的搭配,可以在同一個色調中構建出豐富的視覺層次感和質感,賦予不同的功能含義,信息表達明確,和諧統一感很好,視覺上的趣味性,顏色的搭配顯得很柔和。
對比色: 在色相環中,角度相差120°-180°之間的色彩,這里使用了120°為角度來選擇對比色。
互補色: 在色相環中成180°角的兩種顏色,互為補色;主色可以和其互補色的兩個色彩的搭配,該色彩可以為鄰近色,例如:藍色和黃色、橙色的搭配;這種搭配既能保持互補色搭配強烈的對比度,區分關鍵信息,次要信息,又能增加視覺上的趣味性,色彩看上去豐富多彩。
例如:藍色作為主色,互補色黃色作為輔助色應用在圖表、圖標和標簽上,再選擇黃色的鄰近色橙色作為另外一個輔助色,應用在不同的關鍵信息上,有助于用戶更好的閱讀產品的功能和內容。
獲得輔助色-9色相
通過鄰近色、互補色和對比色的選擇,我們從24色色相環中得到了9色相色環,9色相色盤優化后將做為圖表的儀表盤顏色和語義類的功能色出現頁面設計中。
校正輔助顏色
雖然我們保持相同的飽和度和明度,使用科學的方法得到了較為合適的色相,但由于色彩本身自帶感官明度屬性,導致在視覺感受上的感官體驗并不同頻。
黃色、綠色的明度即發光度較高,藍色就稍微偏暗一些,導致色板看起來不一致,為了讓不同色相看起來更加協調,需要調整色板的明度和飽和度,以保證視覺感官體驗同頻且更加和諧舒適。
校正后的顏色主要用于功能色和儀表盤顏色。
從輔助色中提取功能色及儀表盤色系
通過對竟品的分析總結同時結合默認主題色分析得出的9色色環,歸納分離,最后形成系統的默認儀表盤顏色。
功能色的目的是明確信息及狀態,比如成功、出錯、失敗、提醒、鏈接等;功能色的選取需要遵守用戶對色彩的基本認知,結合分析得出的9色色環,顏色校正,得出系統功能色。
輔助色的色階
為了度量不同的可視化從高到低的數值,我們儀表盤顏色遠遠不夠,所有為了保證視覺上的統一性,我們需要加入輔助色的明度色階來區分數據層級。
同時我們產品有深色和淺色兩種模式,由于視覺對比的原因,在深色的場景看下看的顏色,和淺色場景下看到的顏色是兩種感受,深色場景下顏色會發亮,所以為了保持視覺上統一,我們也需要加入輔助色的色階。
輔助色色階建立方法與主色的色階建立方法一致,使用 Tints and shades 系統,通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調色板。
模擬方案一主色、輔助色及消色匯總
通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶,我們分別給顏色取了名字和編號,命名方式采用植物色彩命名,這也是200多年前顏色數值出來之前的命名方式,最早見于1814 年出版的《維爾納色彩命名法》
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
SaaS 產品體驗要求越來越高,用戶體驗已經成為產品競爭力的重要組成部分,怎樣在多業務線的產品環境中做好體驗設計,本文從貼合業務線的設計規范、敏捷易用的前端組件庫、產品研發協作流程保障、UI體驗文化打造、UI設計質量品控5個方面闡述項目快速、規?;嵘喈a品線整體體驗過程中方法論和實踐經驗。
關鍵詞:
用戶體驗設計;UI設計規范;多產品線;體驗文化;UI設計落地
面對多產品體系,多產品線,需要積極尋找和探索適合我們客觀情況的最佳實踐,我們面臨的問題有:
1.過往以功能堆砌為主、基本“能用”,缺乏平臺規范和一致性,體驗不足。
2.產品線多、體量大。
3.客戶對產品體驗要求越來越高。
4.產品歷史包袱、修復改動困難。
5.對用戶體驗認知不一,協同、溝通成本高。
6.重復的開發成本。
7.第三方組件與業務的匹配度不佳。
解決以上幾大難題,我們啟動了UI 設計規范的搭建、UI組件庫的開發等,讓規范和組件庫成為各產品線堅實底座的一部分,使用戶體驗文化賦能前端和產品經理,協同 QA 力量一起推動產品體驗升級,以下整理分享的實踐方法適用于中小型UED團隊支撐復雜、多業務線的企業,本文嘗試從以下幾個方面總結和提煉實踐經驗,跟業界同行探討。
設計規范體系的搭建對于新的團隊,如何從復雜海量的業務場景中制定出一套適用于自己產品的UI設計規范,是第一道待翻越的高墻,完整的設計規范應該是包含視覺規范與交互規范,本文主要針對設計規范實踐過程進行闡述。
貼合場景的設計規范:
雖然市面上已經有眾多成熟的設計規范體系可供使用,但是當前我們所處的產品階段、多業務 線以及復雜的業務場景等綜合因素,決定了需要重新搭建一套符合我們自己業務場景的設計規 范體系。
UI規范效益最大化:
一旦我們決定制作規范,就要把規范當成一個產品去做。去梳理一套高效合理、可復用的制作流 程,去分析產出什么樣的「規范產品」才能產生最大的價值。 依據規范效益模型,在規范的制定中盡可能的提高規范的通用性至90%,先解決統一性,再解決場景細分,打造高質量通用的模式庫以提高質量和效率,并力求讓更多人從這套設計體系中獲益, 從而讓規范體系發揮更大的價值。
UI規范制定的策略:
明確用戶對設計規范的訴求,構建適合產品的UI設計規范,首先,需要明確規范體系的用戶群體經過設計團隊多輪調研,確定設計規范面向的目標用戶群、基于核心用戶的訴求,為后續規范內容框架的制定提供依據。
確定UI設計價值觀:
產品歷史包袱重,系統結構復雜,在提升用戶體驗時,內容表達「清晰明確」是第一要務,例如尊重已經形成的用戶習慣,優化改造時,注意版本之間的銜接,讓用戶「清晰明確」,這也是為什么將「清晰明確」作為價值觀之首,另外提升效率是企業級產品用戶體驗的永恒主題,同時兼顧系統的簡潔與一致。
梳理UI規范框架:
UI設計規范包括設計價值觀、全局規則、組件庫、模式庫、典型頁面、移動端規范和設計資源框架整理主要從以下3個方面進行:
1.梳理現有組件,剔除不使用的部分 。?
2.同類競品的框架借鑒,查漏補缺。 ?
3.場景驗證,與業務場景深度結合經過充分論證和梳理,對規范框架做了重新定義,增補了業務缺少的內容。
如上圖所示,例如對高頻的工具欄組件的補充,典型頁面的補充,增加模式庫以及全局規則,當前第一個版本的規范框架是基于業務場景優先級最高的內容進行制定,更多的規范內容的增加依托于不斷的迭代,逐漸完善規范框架。
規范內容的制定及評審:
組件規范包含:變更記錄、組件定義、何時使用、組件的類型、組件的響應。
規范內容制定的原則: ?
1.有明確場景可依。?
2.精簡不必要的分支 例如在定義表單規范時,對于表單標簽的對齊方式做了統一的約束,標簽右對齊,輸入框左對齊全局保持統一。
邏輯正確、規則明確易懂: ?
例如常見的alert (警告提示)名稱調整為常駐提示,語義更貼合場景,便于理解。
規則的可拓展性,多場景的兼容性: ?
產品架構是PC端到移動端的自動適配,因此在組件設計的時候需同時考慮PC端與移動端的對應關系以及兩端場景的兼容性。
協作及敏捷迭代: ?
規范發布后,伴隨著實際項目的檢驗,業務場景的擴充變化,如何高效的對設計規范進行迭代,決定了設計系統能否持續的走得更遠,規范內容定期評審,必須通過業務、技術、設計評審,確保規范是可用的、可落地并且易于使用的規范后期不同的規范模塊專屬人負責,同時有backup,可以幫助走查復盤雙重保障規范的質量。
敏捷易用的前端組件庫: ?
復雜的業務場景和多產品線特點,快速打造一套敏捷易用、高質量并符合實際業務場景的前端組件庫,是提高產品研發效率、改善UI質量、提升用戶體驗的關鍵。
復雜的業務場景和多產品線特點,快速打造一套敏捷易用、高質量并符合實際業務場景的前端組件庫,是提高產品研發效率、改善UI質量、提升用戶體驗的關鍵。
前端組件庫建立目標: ?
1.提高開發效率,對高頻使用、通用組件進行代碼化封裝,避免重復開發工作。 ?
2.提高開發質量,通過各類業務場景和業務線的錘煉,沉淀組件代碼最佳實踐。 ?
3.提高產品體驗,組件封裝代碼化,減少在多角色協同中因為理解偏差、信息傳遞問題等導致的不確定性和結果不可控性,不同業務線、不行項目、共用一套基礎代碼,保證體驗的一致性,組件的組織形式: 結合實際業務場景和原子設計理論,將組件劃分為不同顆粒度:基礎組件、業務組件、典型頁面 組件,以適用于不同研發場景使用。
1.基礎組件,基礎組件為組件庫最小顆粒度,構成系統界面的基本構件。 ?
2.業務組件,在基礎組件的基礎上,結合具有共性業務特征的業務場景,梳理出具有業務特征的 業務組件。 ? 3.典型頁面組件,梳理具有業務特點的典型頁面,相比基礎組件和業務組件,典型頁面更加具體, 為用戶提供具有代表性的內容和框架,并準確描述用戶最終看到的內容。如列表和左樹右表典型 頁面組件,作為最為常見的頁面結構,各業務場景可復用頁面組件,保證了頁面組件內各基礎組 件的一致性,最大程度的實現不同產品線產品中頁面體驗的一致性。
推進前端組件庫落地執行: ?
前期設計規范落地到組件庫過程中,面臨諸多問題和阻礙,比如開發落地質量不高、內容遺漏、 各方理解不一致、驗收及修復問題不到位等問題。處理這些問題對UI團隊資源造成很大消耗, 通過總結復盤前期組件庫落地時的經驗和教訓,梳理落地執行流程,在新的協作流程下,新一 批的組件開發不論在協作效率和開發質量上都有質的提升。
分層推進: ?
組件庫開發是一個持續迭代的過程,考慮到組件庫開發資源極為有限且無專職負責人員,在跟組 件庫開發團隊協同過程中,我們通過分步開發來解決組件庫更新優化的問題并通過不斷優化協作流程來助力組件庫高效落地。
前端組件庫分步開發原則: ?
1.優先級原則,優先開發適用于業務線普適場景的組件。 ?
2.緊急性原則,對于急需的業務線所需組件優先開發。 ?
3.快速可實現原則,開發實現成本高的組件暫緩處理。
自查走查驗收: ?
組件UI責任人梳理出下屬組件需開發落地的細節點,整理為文檔,待開發人員完成組件開發后,自行參照UI提供的自查文檔,查漏補缺,保障進入UI驗收環節的前端組件不會出現較多的缺陷,降低后期走查和溝通修改的工作量,同時監督開發人員提高組件落地還原度和質量。
組件庫的持續迭代: ?
UI團隊通過一套標準的流程來把控組件庫迭代的質量,在日常工作中經常會收到產品經理或項目 方提出新的組件需求或對現有組件的優化。UI部門作為推動組件庫搭建的核心環節,需要以全局 和更深入的視角加以判斷把關,保證前端組件庫內容的普適性和高質量,避免組件庫內容冗余, 降低研發維護成本。
產品研發協作流程保障: ?
好的過程是好的結果的有力保障,一個業務需求從產生到開發落地需要經過多角色協同、一系 列環節。必須依靠規范的研發協作流程,確保各角色清楚自己職責以及如何跟上下游銜接,同 時我們也希望協作流程能夠確保設計資源可以向重點業務模塊傾斜,以及發揮各個角色可以發 揮的作用去共同提升產品體驗。
UED團隊建立之初,我們面臨的首要問題是:需求隨機,完全取決于各產品線和產品經理 個人,為了解決這個問題,我們制定了UI融入研發體系的流程以解決合理、有效利用UI資 源的問題。
企業級產品特點、多業務線、大量面向管理員用戶的具有相似頁面結構和交互模式的業務 模塊、產品經理跟交互團隊人員配比等因素都決定了并非所有需求都需要流轉到UI團隊進 行設計,在判斷哪些需求需要流轉至UI團隊設計時,我們給出了如下指導性方向: ?
1.用戶量角度,大量終端用戶使用的場景,例如訂票、報銷、采購頁面 。 ?
2.用戶重要程度角度,核心、重要用戶使用的場景 eg.公司領導、決策層。 ?
3.通用性角度,通用組件或框架,需要UI通盤考慮各個業務線場景需求進行設計。 其他需求則主要由產品經理進行設計,UX以評審方式輕度參與。
協作流程迭代,UI驗收成為必要一環: 隨后我們又面臨新的問題:設計還原度差,被公司老板生動的形容為:看設計稿是“精裝修”, 開發落地后就成了“毛坯房”了。為盡可能確保設計還原質量,我們在研發流程中明確了所有涉 及前端頁面的功能需求都需要在研發協同工具中流轉到UI負責人驗收,在產品團隊TAPD中記 錄UI缺陷、標明嚴重程度,對于 “嚴重” 級別以上UI缺陷,禁止發版。
UI工期評估合理化:
為了既能盡力配合各產品線迭代計劃又要爭取合理UI設計時間、保證產出質量,合理評估設計周期對UI人力管理尤其重要。對此,我們對設計需求分成了ABC三級進行評估。 對于A和B級需求,通常模塊較大,先有UI設計方案再去分期迭代開發,對于這兩類需求,在評估 模型中給出了大致工期概念,比如以月為單位,大于1個月或2個月。
對于C級需求,通常為產品經理先排進某個迭代再來提UI設計需求,設計范圍相對明確,我們則結合典型頁面數量因子和設計難度因子給出了UI工期大概評估公式,以天為單位。 ?
1.設計難度因子:根據業務線的復雜程度而定,范圍為(0.8~1.5)。 ?
2.典型頁面數量因子:評估需求范圍規模(N)。
UI設計團隊在協作過程中面臨諸多挑戰:產品線多、產品邏輯復雜、研發鏈路長、各級人員對產品認知及重視程度不一、好的體驗設計難落地、溝通成本高等問題,想要解決這些問題,若僅靠UI團隊自身力量是不夠的,需要動員公司各個環節和人員重視用戶體驗,共同促進產 品體驗提升。
搭建體驗文化灌溉機制:
UI部門通過多維度的體驗知識內容矩陣、多渠道多場景全員覆蓋,普及和加深各級對產品體驗 價值的認識,提升產品體驗思考力和洞察力,幫助企業以新的視角思考業務、產品研發和用戶 體驗的關系,賦能產品經理及研發人員高質量的輸出,“以用戶為中心”和“打造產品極致體驗” 的價值觀根植與企業文化中,指導研發流程中各項工作最終影響到產品的戰略層、范圍層、結 構層、框架層和表現層這5個產品體驗維度,以實現企業產品的“極致產品體驗”目標。 通過搭建體驗文化灌溉機制,提升全員體驗意識,能為產品研發帶來長久的價值: ?
1.提高設計還原度 ?
2.減少培訓成本 ?
3.提升跨部門溝通效率 ?
4.提升UI團隊影響力 ?
5.提升客戶滿意度
體驗文化落地實踐:
針對不同類型的體驗知識,我們采取不同的傳播渠道進行透,以期達到最好的效果,避免形式化, 將體驗文化滲透、學習落到實處,最終影響產品研發的各個環節。
以下為UI團隊在企業體驗文化 推廣的主要渠道和方法: ?
極致體驗公眾號主要發布產品體驗的基礎原理,體驗價值、項目復盤、常見體驗問題等深度長文。讓公司各級人 員認識用戶體驗及價值,讓用戶體驗理念深入人心。 ?
體驗知識小卡片整理產品體驗小的知識點,閱讀學習成本低。利用員工碎片時間,對細小體驗知識點的學習,積 跬步,至千里。 ?
直播宣講針對重點且復雜的產品體驗內容,如交互規范宣講、重點問題復盤、產品經理及開發人員應知應 會的知識點,采用宣講直播的方式,更好的對內容進行詳細解說和疑難問題溝通。 ?
體驗調研分享UI部門成員對核心競品進行體驗調研,整理分析后對產品經理及相關人員進行分享,賦能產品經 理,為產品的體驗設計提供新的思路。
UI團隊專業水平一定程度上決定了公司產品體驗的上限,持續提升UI自身專業輸出能力可以從源頭提升公司產品體驗。
設計自查:
企業級產品的大量體驗問題都是設計基礎問題。因此需要設計師不論在內審前,還是內審過程中都要牢記設計原則,查漏補缺,守住底線。我們在部門內部制定了一套適合企業產品的UI自查表來檢查設計方案,通過這些自查點來避免產品中出現基礎體驗問題,從UI設計師自己這里 把好第一道關。
在日常工作中,UI自查表始終占據工區的醒目位置。在評審過程中,大家也會通過線上文檔的形 式來對設計原則的條目進行逐一檢查。
做好UI內部評審:
設計團隊內評審(Design critique)是幾乎所有國內外設計團隊的普遍、經典做法,可以有效提 高設計產出水平、保證團隊對外輸出質量。方法是普適的,但具體執行時如何做才能有更好的效果卻各有各異。 在如何做好內部評審上,我們進行了如下嘗試。 從“全員參與” 到 “組成內部評審委員會” 團隊內評審時邀請全員參加,但發現只有少數同事發言,另外一些同事因資歷淺、不了解評審產品或者積極性不高給不出建議。同時隨著團隊成員數量從幾個增加到十幾個,評審會議的時間成 本大大增加。
選取團隊內相對資深和積極提出問題、建議的同事組成內部評審委員會,以月為周期輪流進行, 可以有效分散評審委員在團隊內部評審上的工作負荷,并明確一次UI內部評審除了內部評審委員 會還有哪些關聯同事需要參加。 關于邀請評審內容關聯同事,比如“消息中心” UI評審跟另外一位同事負責的“討論消息”有關聯,則需要邀請這位同事一起評審,以便發現關聯問題,整體考慮設計方案。
以上參與評審機制明確在團隊內部協作工具上,做到人人清楚。另外,對于評審建議,要做到有 記錄、有回應、有跟蹤,確保有效發揮了內部評審的價值。
UI設計師的能力模型:不言而喻,UI設計師自身能力的培養是UI品控的重要一環。因此對于設計師能力培養通道上,我 們引入了以下模型。
我們將UI設計師能力歸納成了3x3能力矩陣。這可以設計師在工作中也可以有目的提升自身薄弱環節,同時也讓企業對UI設計師的要求更加清晰,除此之外,我們要求UI設計師也需要多了解業務和前端知識,往前多走一步,跟上下游角色更好的銜接,一方面,UI設計師需要理解業務,要能夠有半個產品經理的業務知識儲備, 如果能站在更高的行業視角對自己所服務的業務領域(向 業務產品經理再邁進一點)有一定的理解是更好的了,另外一方面,UI設計師跟自己的下游-前端 開發工程師也需要很好的銜接上,知道相關前端技術概念、基本頁面布局和交互實現邏輯、方法,能夠無縫地將界面和交互設計翻譯成前端可理解的語言。
產品體驗提升關鍵取決于兩個重要因素:一是設計團隊的專業能力水平;二是結合企業實際情況,將“不斷提升產品體驗”融入到每個相關角色的具體工作中。在企業中,小規模UED團隊支撐復雜、多產品線產品體驗快速規?;嵘沃氐肋h,我們會持續在未來的實踐中積極探索切 實有效的方法。
藍藍設計的小編 http://www.syprn.cn