在本次演講中,我將展示如何使用 JSL 編寫類似 JMP 的使用者介面腳本,我常用的模板類型,以及在開發此類平台時所做的決策。我也會示範不同的顯示框、如何使用 JSL 建立使用者介面、腳本範本、編寫使用者介面腳本時的決策過程,以及一些 JMP 腳本編寫的技巧和最佳實踐。
歡迎觀看我的海報展示,主題是使用結構化JSL建立使用者介面。先簡單介紹一下我的背景。我在芬蘭一家電子公司工作,是資料整合團隊的資料整合和資料科學專家。我的工作之一是創建自訂JMP應用程序,而我創建這些應用程式的方式,或者更確切地說,我如何在這些應用程式中建立內容,正是本次海報的主題。這原本是一篇論文,所以我必須快速完成,但應該沒問題。
咱們開始吧。我覺得這張海報最重要的訊息是,你應該盡量模仿 JMP 平台。原因在於使用者對 JMP 平台非常熟悉。如果你能像 JMP 一樣組織內容,使用者就能更快地上手使用你的工具。
這裡我們展示一個 JMP 平台的範例。在這個例子中,它是一個非常簡單的發行版。左側是啟動器,右側是報表。在啟動器和報表中,我們都可以看到視窗標題圖標,JMP 將內容組織在面板框中。在左側,您可以使用篩選列選擇器產生列選擇器。在其下方,有時還會出現一些額外的選項。
中間是這些按鈕。接下來的兩個按鈕是列列錶框,使用者可以在其中選擇要分析或執行操作的列。列錶框的名稱也清楚地說明了這些列的用途。右側是操作按鈕。
報告中的結構通常非常垂直。就此而言,我使用了法規,因為這樣更容易理解我的觀點。內容採用父子結構,即層級結構,通常使用帶有紅色三角形的輪廓框來建構。我們嘗試這種結構,是因為使用者可以從這些紅色三角形啟動架構和分析。內容中包含一些組織結構,例如設計框、表格框等等。但這種結構是使用者(尤其是 JMP 使用者)所熟悉的。
在構思工具和使用者時,要考慮他們將如何使用你的工具。例如,你可以使用故事板來輔助說明。它不必像圖中所示那樣,你也可以使用漫畫風格。我們也有類似的設計:使用者先看到一個視圖,然後點擊某個元素,接著切換到下一個視圖,以此類推。
在建立這個程式時,思考一下 JMP 平台的工作原理會很有幫助,因為這樣就能回歸熟悉的操作方式。我不會詳細講解,這只是一個實作範例。
這裡有一些原型範例。您可以快速演示或作為介面的初步設計。這裡我有一個非常簡單的紙本版本。我喜歡從這個開始。它們很容易修改,如果需要更新也很方便,而且如果有任何問題,您可以重新建立一個。我通常會很快去找JMP(Jampling Studio)的專業人士幫忙。這是一個非常簡單的版本,但我可以試試。這個版本有效,這個版本無效,如果需要可以修改。我或許可以用我的模板做一個更簡潔的版本,看看它在實際應用上的效果。
下一個模型。類似的區域,先用紙筆畫,然後我用了一個單獨的工具。這裡我用的是 Excalidraw。做一個模型。我還可以在這裡添加一些註釋等等,以及更高級的 JMP 原型演示。這部分已經來自原型應用程序,但你也可以自己完成一部分。
它包含資料篩選器,然後還有一些圖表建構器。這可以完全獨立。它包含一些來自其他地方的圖片。如果您剛剛配置好這個佈局,請將這些圖片移到單獨的工具中。我可能會使用 PowerPoint。在那裡移動它們很容易。您可以在 PowerPoint 中建立結構,然後更了解使用者介面可能的樣子。
接下來,考慮使用模板,不要忘記使用者體驗。我使用自己的腳本風格模板。我之所以使用這些模板,是為了更快地創建應用程式。這些模板更加穩定可靠,看起來也更專業。另外需要說明的是,我的使用者介面設計不會針對更高的分辨率,或者更確切地說,不會針對低於全高清的分辨率,因為大多數用戶仍然使用全高清分辨率。
使用者體驗。由於 JMP 是一款互動性很強的工具,我認為考慮使用者體驗也很重要,而不僅僅是介面設計。我這裡舉幾個糟糕的使用者體驗例子。例如,在平台區域網路共享的模型視窗中,使用者無法返回資料表查看應該使用哪些欄位。他們必須先關閉啟動器,關閉資料表,然後再重新運行啟動器。在我看來,這是一種糟糕的使用者體驗。
另一個問題是,如果使用了可折疊的輪廓框等功能,視窗大小往往會自動調整。我盡量在視窗初始建立後將其大小固定,然後使用滾動框來瀏覽視窗。最後一點是,他們沒有對使用者隱藏工具列和選單,因為在 JMP 中,您可以啟動不同的平台。您可以先開啟一個平台,然後前往工具列選單啟動下一個平台,這樣可以大幅加快分析速度。
比較我的平台和 JMP 平台。頂部是 JMP 平台。這裡展示的是一個窄型平台,底部是類似的介面。左側是列選擇器,右側是使用者新增的常用清單和操作。我認為與啟動器最大的區別在於,我這裡有一個正在分析的表名。在 Maneuver 平台中,我可能也會看到應用程式名稱,但這裡沒有。
但這裡我遇到的問題比我們的報告更大。我沒有設定任何選項框,因為我已經為使用者定義了幾乎所有選項。他們不需要訪問紅色三角形菜單。在 JMP 平台上,你需要存取這些選單。我可以使用頁面框和工作錶框。
我覺得更重要的是,我可以…我之所以橫向組織內容,是因為我們的螢幕更寬,而且螢幕也更高。很多 JMP 平台都比較長。我喜歡橫向佈局,因為這樣比較節省空間。另外,這裡表格和應用程式名稱也都可見。
這裡有一個範例應用程式。我們之後會有兩個範例,但我已經簡單介紹了一下。這基本上就是用戶運行我的應用程式所需的腳本。我將腳本的不同部分進行了拆分,每個部分都有各自的職責。配置、實用程式和使用者介面都放在各自的腳本中,我認為這樣更容易管理。
然後是腳本。這個主腳本會顯示一些初始文本,例如表格是否打開、視窗是否已打開,以及所有條件都滿足時,應用程式是否正在運行。根據檢查結果,我可能會向使用者拋出模態視窗錯誤。例如,如果視窗已經打開,它就不是模態窗口,我會將應用程式置於前台,以便使用者可以繼續使用它。
下面基本上是應用程式運行後的主視窗。這將創建應用程式視窗。這些表達式也在這裡被分成了單獨的部分。在這個新視窗之外管理較小的表達式比管理可能長達數百行的新視窗要容易得多。通常情況下,管理冗長的程式碼很困難。而這些單獨的表達式更容易處理。
有時候你可能需要進行一些評估,並考察多種能力,但總的來說,我認為這種方式更好。你可以在社群中找到這個例子,以及我在2023年芬蘭使用者小組演講中提到的一些其他例子。
這篇海報的簡要總結如下:盡量模仿 JMP 平台的發布和報告流程,因為使用者已經很熟悉這些流程。這樣他們就能更快適應你的工具。考慮一下用戶將如何使用你的應用程式。建立故事板和模型,以便快速預覽其外觀。添加一些模板。你可以創建一個強大而專業的循環應用程式。熟悉最常用的顯示框以及如何在 JSL 中組織內容。
由於 JMP 是一款互動性很強的工具,請不要忘記使用者體驗,因為 JMP 的互動性至關重要。務必考慮使用者體驗和使用者介面。謝謝。