作者：侯鬆巖， 用戶體驗設計師，來自GE數字集團。
如果您還沒有Predix試用帳號，請訪問https://supportcentral.ge.com/esurvey/GE_survey/takeSurvey.html?form_id=18446744073709715720 申請。請務必準確提供您的信息，我們會以郵件方式通知您註冊結果。
和Predix聚焦於工業互聯網一樣，Predix UI從誕生初始的目標就是爲了服務於各種工業行業的人羣，提高他們對於使用Predix上面豐富App時的用戶體驗。
我們都知道用戶體驗的核心就是以用戶爲中心，考慮使用場景，這也是爲什麼同樣是手機，同樣在目前手機趨勢下，我們還會單獨區分設計智能手機以及老年機。同樣的道理，對於一套應用於整個Predix平臺以及應用的設計系統，Predix UI考慮到了工業中不可缺失的一個核心應用場景：移動化。
工業當中的移動化，舉個最簡單的例子，便是質檢員去檢查物料的時候，需要對着移動設備的清單來快速查驗。而類似的例子可以說是數不勝數。
考慮到各種可能出現的在移動設備的應用場景，Predix UI有一套自己的響應式前端框架，無論用戶使用的是何種分辨率的平板，亦或是拿着更小尺寸的手機，他們都將看到最舒服的UI佈局展現和交互特點。下面我們挑其中的3個要素來分析一下：
1.導航
導航使用的px-appnav和px-context-browser兩個組件做到了自適應。如果切換到移動設備分辨率，導航會默認使用drop down方式或者垂直排布的模式來適應小屏操作。
2.板式佈局
鑑於可能會涉及到的手機或非pad的小型手持設備，無法提供很大的屏幕空間，Predix UI使用單欄顯示，如果原來網站模式下出現多張圖片(或圖表)，則使用疊加的卡片展示。
爲了最小化頁面長度和滾動，這些疊加的卡片會以水平橫向切換的交互模式呈現。這種方式對於網站上可能展現的多個圖片或圖片比較友好。
3.數據列表
一般來說，網站上賴以依靠的複雜數據表格在轉換到移動設備展示中會遇到很多困難。Predix UI中的px-table-view組件能夠將複雜的表格轉換成用戶友好的數據呈現方式如下圖：
上面的3個例子淺析了Predix UI是如何使用設計和搭配的前端組件做到自適應的移動場景優化展現。事實上，還有許許多多的組件都是移動友好的，如果你感興趣，可以訪問Predix UI的官網https://www.predix-ui.com/進行探索。
謝謝 侯鬆巖
關於Predix
-
在使用中您有任何問題，請訪問我們的論壇http://bbs.csdn.net/forums/GEPredix
GE數字集團的技術專家們會在線回答您的問題。
也請訪問我們在CSDN的Predix專區http://predix.csdn.net 瞭解更多Predix的內容和相關活動。