商業(yè)氣象公司是典型的TOB/TOG性質(zhì)的公司，客戶包括農(nóng)業(yè)、能源、航空航天、交通運輸、建筑工程等行業(yè)，它們需要準(zhǔn)確的氣象數(shù)據(jù)、預(yù)報和分析來支持業(yè)務(wù)決策和運營管理。商業(yè)氣象公司通常會提供各種氣象服務(wù)，如氣象數(shù)據(jù)采集與分析、預(yù)報產(chǎn)品、風(fēng)險評估、氣候變化研究、決策支持系統(tǒng)等。

依據(jù)本人巖鳴楊子在氣象行業(yè)中多年的設(shè)計經(jīng)驗，在此和大家淺聊一下作為UI設(shè)計師，需要如何在ToB/ToG行業(yè)中如何做好UI設(shè)計。

一、UI設(shè)計的重要性

ToB（商業(yè)對商業(yè)）/ToG（商業(yè)對政府）領(lǐng)域目前正處于快速發(fā)展和激烈競爭的時期。在這種情況下，為了取得成功，公司需要提供高質(zhì)量的產(chǎn)品，而用戶界面（UI）設(shè)計則是確保產(chǎn)品在設(shè)計上既吸引人又易于使用的必要因素。

1. UI設(shè)計在ToB/ToG行業(yè)中的重要性

體現(xiàn)團(tuán)隊實力，提升業(yè)務(wù)效益

• 售前階段，好的UI可以提高中標(biāo)的可能性
• 通過用戶互相交流（氣象局互訪、領(lǐng)導(dǎo)視察），提升公司在行業(yè)內(nèi)的口碑
• 在同行技術(shù)交流會（科技展），好的UI可以吸引潛在用戶的關(guān)注

2. UI設(shè)計在項目流中的重要性

• 提升用戶體驗： 易用性、可訪問性、專業(yè)性
• 提升工作效率： 開發(fā)過程中，規(guī)范的UI可以提高團(tuán)隊的協(xié)作效率，減少溝通成本，確保進(jìn)度

二、如何提高設(shè)計效率

組件化思維，建立設(shè)計規(guī)范，增加交互

1. 了解行業(yè)特點

了解用戶習(xí)慣，保證易用性

ToB/ToG行業(yè)的用戶具有組織屬性，需求來自組織和業(yè)務(wù)而不是用戶本身。因此，在UI設(shè)計中需要充分了解用戶的需求和使用習(xí)慣，以便更好地滿足其需求。比如氣象局的用戶在使用氣象系統(tǒng)時有一些常見的使用習(xí)慣，比如需要將不同要素進(jìn)行對比等，因此在UI設(shè)計中需要注重用戶的使用習(xí)慣，以便更好地提高用戶的使用體驗。

在UI設(shè)計中需要注重產(chǎn)品的易用性，盡可能減少用戶的操作步驟和時間?？梢酝ㄟ^合理的布局和設(shè)計來提高產(chǎn)品的易用性。ToB/ToG行業(yè)的界面結(jié)構(gòu)追求比較高的秩序感，在UI設(shè)計中需要注重界面結(jié)構(gòu)的清晰和有序，以便用戶更好地理解和使用產(chǎn)品。比如同一個維度的功能一定是要放在一起的，如果內(nèi)容較多一定要做好分類。

注重用戶需求，保障功能性

在B端產(chǎn)品0到1階段，最應(yīng)該重視的是產(chǎn)品的功能穩(wěn)定性。因此，在UI設(shè)計中要避免過度追求視覺美感，而是注重功能在最小可用版本上的實現(xiàn)。

符合行業(yè)特點，了解行業(yè)專業(yè)知識

氣象行業(yè)需要展示大量的數(shù)據(jù)和圖表，因此在UI設(shè)計中需要注重數(shù)據(jù)的展示和可視化，同時需要注重圖表的清晰和易讀性。UI設(shè)計師需要考慮用戶的使用場景和需求，了解一些相關(guān)行業(yè)的專業(yè)知識，以便更好地展示數(shù)據(jù)和圖表。

• 學(xué)習(xí)的必要性
  為了做出更加符合業(yè)務(wù)需求的產(chǎn)品，我們就必須了解一些行業(yè)相關(guān)知識。比如氣象行業(yè)中，每種要素的單位是什么（降水mm，雷達(dá)反射率dBZ，氣壓hPa）；降水量通常用柱狀圖表示，溫度用折線圖表示；還有與其他物理量不同的是，氣壓的數(shù)值隨高度降低……如果不知道這些，設(shè)計圖標(biāo)注錯誤就會顯得不專業(yè)。
• 如何學(xué)習(xí)
  • 收集學(xué)習(xí)真實的專業(yè)平臺界面，如新聞媒體報道、客戶發(fā)的樣例、現(xiàn)場調(diào)研收集
  • 查閱相關(guān)文獻(xiàn)：知網(wǎng)、谷歌學(xué)術(shù)、百度學(xué)術(shù)
  • 擅用搜索工具：chatGPT、NewBing

2. 建立完善的行業(yè)UI組件庫

UI設(shè)計師要善于運用第三方組件庫設(shè)計，比如選擇器、折疊面板、上傳、表格、表單等組件，這些成熟的組件都代表了用戶常用的操作習(xí)慣，同時組件的使用有利于和技術(shù)人員高效協(xié)作。

1. 了解市場上現(xiàn)有的組件庫和設(shè)計規(guī)范， 以及前端使用的開發(fā)框架
2. 熟悉組件庫和設(shè)計規(guī)范的用法
3. 構(gòu)建屬于自己行業(yè)的設(shè)計資產(chǎn)組件庫
   

在工作中，我建立了一套常用的氣象業(yè)務(wù)平臺的設(shè)計組件庫。

在這套組件庫中，首先制定了全局規(guī)范，包括字體、顏色、間隔、布局等。

然后用這些全局規(guī)范，構(gòu)建了基礎(chǔ)組件，包括圖標(biāo)、按鈕、開關(guān)、菜單、選項卡、選擇器、輸入框、表格等。這些基礎(chǔ)組件主要參考了AntDesign的功能，因為我們的前端也是基于這套框架來做的。

再利用這些基礎(chǔ)組件，設(shè)計了氣象行業(yè)常用的業(yè)務(wù)組件，包括GIS工具欄、要素性選擇面板、圖層管理面板、時間軸、高度條、圖例……

最后，由這些行業(yè)組件，則可快速搭建一套包含綜合觀測、數(shù)值預(yù)報、產(chǎn)品制作、服務(wù)統(tǒng)計、用戶管理等功能的業(yè)務(wù)系統(tǒng)。

該設(shè)計組件的介紹，可以看這篇文章《專業(yè)氣象業(yè)務(wù)通用功能組件》。

3. 選擇合適的設(shè)計工具

先進(jìn)的設(shè)計工具會大幅提高UI設(shè)計的工作效率。

設(shè)計工具在最初一直以Adobe家的Photoshop為主流，但因為其過于龐大和復(fù)雜，更適用于平面設(shè)計而非UI設(shè)計。后來有了AdobeXD和Sketch為主的專門用于UI設(shè)計的工具，從此設(shè)計工具從位圖時代進(jìn)入了矢量時代，并且逐步有了組件化的意識。

如今，設(shè)計工具已經(jīng)邁入了以Figma為代表的多人線上協(xié)同時代，進(jìn)一步提升了設(shè)計效率，規(guī)范了設(shè)計流程。類似的工具還有MasterGo、即時設(shè)計等，他們擁有更加本土化的中文界面和豐富的社區(qū)資源。

上面這張圖很形象地表達(dá)了四大設(shè)計工具的狀態(tài)。PS猶如一輛龐大的客車，功能強大，但運行速度很慢；AdobeXD像私家車，靈活小巧，用途更單一；Sketch是超跑，但依賴于MacOS系統(tǒng)，對用戶量更大的Win系統(tǒng)來說很不友好；Figma就像飛機，所有人都有機會體驗，并且速度飛快，效率無敵。

以上是近幾年設(shè)計工具的市場份額（數(shù)據(jù)來自：UXtools），可以看出Figma已經(jīng)在全球UI設(shè)計領(lǐng)域遙遙領(lǐng)先。

關(guān)于Figma的優(yōu)勢，可見之前寫過的這篇文章《我為什么選擇Figma作為主力設(shè)計工具》。

4. 建立標(biāo)準(zhǔn)化設(shè)計流程

我們部門在實際工作中，已經(jīng)建立了一套標(biāo)準(zhǔn)的工作流程，完善了各崗位的協(xié)同作用，極大提高了工作效率。

原型設(shè)計階段

在原型設(shè)計階段，產(chǎn)品經(jīng)理會根據(jù)用戶需求進(jìn)行需求分析、原型設(shè)計，然后進(jìn)行內(nèi)部原型評審和外部原型評審。內(nèi)部評審是參與項目的UI設(shè)計師和前后端技術(shù)共同針對項目需求進(jìn)行任務(wù)拆解和工時成本評估，外部評審則是和客戶進(jìn)行功能確認(rèn)。

UI設(shè)計階段

原型評審?fù)ㄟ^后，進(jìn)入UI設(shè)計階段，此時UI設(shè)計師需要先根據(jù)用戶特點進(jìn)行風(fēng)格設(shè)定，然后和用戶進(jìn)行風(fēng)格確認(rèn)，比如淺色簡約風(fēng)格還是深色科技感風(fēng)格。

風(fēng)格確定下來后，就會進(jìn)入組件和視覺設(shè)計。實際上，并非需要先設(shè)計組件再進(jìn)行視覺設(shè)計，而是這兩者需同步進(jìn)行。我們一般會在原始?xì)庀笸ㄓ媒M件的基礎(chǔ)上，針對每個項目進(jìn)行特定的個性化設(shè)計，所以一般每個項目都有一個單獨的組件頁面，設(shè)計時按需裝配即可。

在設(shè)計過程中，還需要注重交互設(shè)計，使產(chǎn)品經(jīng)理、開發(fā)人員以及用戶都能直接在設(shè)計預(yù)覽時達(dá)到類似真實系統(tǒng)般的操作體驗，以便更容易發(fā)現(xiàn)功能和交互上的問題。除了頁面間的跳轉(zhuǎn)，還有一些懸停、按下等動作的交互設(shè)計。這些微交互就需要做在各個組件中，設(shè)計圖中的實例會同步發(fā)生相對應(yīng)的變化。另外，如果導(dǎo)航欄或者tab切換較多的情況下，一般超過三個選項時，我們都會做一個導(dǎo)航切換主組件，這樣只需要在主組件中連好線，其他實例會自動帶有跳轉(zhuǎn)效果。所以很多時候，在Figma里面看到的密密麻麻的蜘蛛網(wǎng)般的交互連線，實際上巧妙利用組件的繼承特性，就能化繁為簡，大大簡化工作量，提高工作效率。

最后就是UI設(shè)計評審，也是有內(nèi)部評審和外部評審。內(nèi)部評審時，產(chǎn)品經(jīng)理會評估功能的完整性，開發(fā)同事會評估開發(fā)的難易程度，以保證項目進(jìn)度。外部評審時，客戶主要會對視覺提出一些想法，畢竟審美是個很主觀的東西，我們要尊重用戶的想法，采納他們提出的一些合理的建議，針對不合理之處，我們可以提出一些設(shè)計理念來佐證我們的設(shè)計，但一定不要帶有抵觸心理。

開發(fā)階段

到了開發(fā)階段，前端同事會根據(jù)設(shè)計圖來進(jìn)行靜態(tài)頁面的編寫和功能的實現(xiàn)，再接入后端數(shù)據(jù)，部署到測試服務(wù)器后，產(chǎn)品經(jīng)理和測試人員會進(jìn)行功能測試和數(shù)據(jù)準(zhǔn)確性測試，同時，UI設(shè)計師也會對前端頁面進(jìn)行還原度測試，以保證開發(fā)效果在最大程度上還原設(shè)計效果。

三、如何應(yīng)對UI設(shè)計趨勢的不斷變化

1. 現(xiàn)狀

UI設(shè)計領(lǐng)域一直在不斷發(fā)展變化，設(shè)計風(fēng)格也在不斷演化，了解UI設(shè)計的最新趨勢并跟隨其變化是必須的。

2. 應(yīng)對措施

• 保持專業(yè)性
  一流的行業(yè)平臺應(yīng)該緊跟設(shè)計潮流，并且仍保持專業(yè)性。
• 持續(xù)學(xué)習(xí)
  了解前沿設(shè)計趨勢，保持跟進(jìn)新UI設(shè)計的思想和靈活性可以實現(xiàn)開發(fā)和完善更加優(yōu)秀的產(chǎn)品。

四、總結(jié)

• UI設(shè)計在ToB/ToG業(yè)務(wù)中至關(guān)重要
• 提高UI設(shè)計效率，關(guān)鍵在于理解業(yè)務(wù)重點并有效地利用工具和流程
• 始終保持學(xué)習(xí)的態(tài)度，保持設(shè)計的前瞻性