<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          為 AI 工程師設計:你需要了解的 UI 模式

          2025-7-31    杰睿 行業趨勢

          指導 UI 原則:

          1. 歡迎精簡信息。與數據科學和金融科技等 B2B 行業類似,這些角色歡迎密集數據——而且數據設計具有強大的層次結構。所以,請縮小這些邊界!
          2. 解析后的元數據最清晰。提取元數據并使其可搜索/過濾/排序非常重要。表格、側邊欄、標簽系統——這些是需要改進的主要設計系統元素。
          3. 記住雅各布定律——用戶在其他網站上花費的時間比你網站上的多。人工智能領域有很多強大的領導者,比如 HuggingFace 和 OpenAI。如果他們已經建立了一種模式,并且沒有強有力的理由去改變,那就順其自然。我知道,我知道,這違背了第一原則,但第一原則有其適用的時機和地點。至于如何為你的團隊和路線圖做出決定,就留給你自己決定吧。

          Github 的設計系統是開發者設計的絕佳資源。以下是一些明確針對開發者角色定制的原則

          • 直到快了才算完全發貨
          • 添加任何東西都會稀釋其他一切
          • 實用性勝過純粹性
          • 平易近人勝過簡單
          • 半途而廢和不采取任何措施一樣糟糕
          • 鼓勵流動
          • 更注重功能

          因此,秉承這些原則,以下是我團隊今年發布的一些關鍵界面。需要注意的是,我的團隊只有 4 個人(2 名設計師和 2 名開發人員),我們是一家節奏飛快的初創公司。我們的設計最初都是以 MVP 的形式發布的,上線后會進行迭代,并且經?;诂F有系統進行構建,從 0 到 1,并盡快獲得真正的外部驗證。本文中的所有設計均由我和Will Rust共同創作。設計是一項團隊運動。

          我將介紹的屏幕:

          將顯示縮放圖像
          聊天界面、游樂場、開發控制臺、文檔和食譜的 UI 線框

          產品一:與法學碩士聊天(簡易營銷頁面版本)

          聊天屏幕的線框

          作為終端用戶,我們現在對聊天界面非常熟悉。作為開發者,使用 LLM(大型語言模型)進行聊天,與Chat GPTDuck AssistPerplexity等 AI 平臺上的終端用戶體驗幾乎完全相同。關鍵在于盡可能簡潔明了,并提供快速簡潔的答案。

          主要區別在于,人工智能開發人員還會根據模型的速度、構建的簡易性、兼容性和部署性來評估模型。

          保持與傳統搜索引擎一樣簡潔,但提供更細致的第二層信息,展現其底層運作,包括文檔鏈接、展示模型速度的基準數據,以及每個令牌成本等其他數據。以下是我們在 Modular 中解決這個問題的方法。

          我們使用UI 框架:https : //www.gradio.app/、Mantine、Tailwind

          屏幕 1 — 簡單的“開始聊天”介紹屏幕,向用戶展示它的型號、運行的硬件以及處理的流量。

          將顯示縮放圖像
          聊天界面模擬

          當然,所有內容都兼容明暗模式。以下是暗黑模式版本,我們將聊天功能嵌入到了開發者控制臺中。

          將顯示縮放圖像
          暗黑模式下聊天的 UI 模擬

          屏幕 2 — 聊天結果,顯示基準數據,以及教程、代碼和部署此模型的后續步驟的鏈接。

          將顯示縮放圖像
          將顯示縮放圖像
          左圖:擴展基準測試結果;右圖:合并基準測試

          截圖 3 — 嵌入式版本。為了實現此版本,我們使用 RAG 專門針對我們的文檔對 MAX 進行了訓練。此實驗目前僅面向內部用戶,并有望盡快發布。

          將顯示縮放圖像
          文檔網站中聊天的 UI 模擬

          一些精選參考:

          將顯示縮放圖像
          將顯示縮放圖像
          Chatgpt ;困惑
          將顯示縮放圖像
          將顯示縮放圖像
          Groq,HuggingFace 聊天

          產品2:模型庫

          模型庫網站線框的縮略圖

          AI 開發者需要做的最重要的事情之一就是評估 GenAI 模型。首先,你需要搜索模型庫——也稱為“模型花園”、“模型庫”或“模型中心”。出于市場營銷/SEO 的原因,這通常需要用戶注銷登錄,主要目的是向用戶展示你的平臺兼容的所有模型,并鼓勵他們登錄后再進行更深入的模型測試。我們的模型庫位于builds.modular.com。

          這里最重要的功能本質上是搜索和過濾。你要確保用戶能夠從包含數百甚至數千個模型的龐大數據集中找到他們想要的內容。

          將顯示縮放圖像
          我們的模型庫的 UI 模擬
          將顯示縮放圖像

          屏幕 2 — 模型詳情頁。此頁面會告訴用戶每個模型有多少個變體,如何在本地快速運行模型,以及如何根據需要將其部署到云端的 GPU。

          將顯示縮放圖像
          模型詳細信息頁面的 UI 模擬

          有一些有趣的技術細節與模型參數大小、量化、硬件兼容性等有關。但最終一切都歸結為格式塔聚類和創建正確的層次結構。

          將顯示縮放圖像
          各種 UI 模型拼貼在一起
          設計由 Eve Weinberg(我)和Will Rust創作

          我在這里最常參考的是 Huggingface(因為他們是這個領域的領導者)、Kaggle(因為他們擁有蓬勃發展的社區)、Together AI(因為他們是企業級的)和 Replicate(因為每天 8 萬次點擊量已經很多了):

          將顯示縮放圖像
          將顯示縮放圖像
          Together.ai
          將顯示縮放圖像
          將顯示縮放圖像

          與所有成功的 UI 一樣,設計時務必牢記用戶思維。AI 開發者在設計模型時,會考慮模型能夠完成哪些任務、模型的大小、性能以及開發者是誰。

          產品3:游樂場

          游樂場的縮略圖線框

          游樂場是指專為實驗、測試和學習而設計的環境,不會影響現有系統或生產環境。對于 AI 開發者來說,更具體地說,它包括試用 AI 模型、測試提示以及微調參數等功能,無需大量的基礎設施。

          我們現在才剛剛開始運行,所以我只會談論主要功能并展示一些參考。

          主要特點:

          1. 已登錄并連接賬單。這只是一個小提示,但用戶通常需要連接信用卡,因為您現在正式運行 AI 計算。
          2. 滑塊控制模型的參數,完全改變模型。
          3. 按使用量付費定價
          將顯示縮放圖像
          將顯示縮放圖像
          將顯示縮放圖像
          將顯示縮放圖像
          左圖:Vercel;右圖:谷歌

          這與整個控制臺體驗完美銜接。

          產品4:開發者控制臺

          開發控制臺的縮略圖線框

          從布局和信息架構的角度來看,這與其他桌面控制臺類似。我們使用 Tailwind、Mantine 和 ChartJS 來制作。

          將顯示縮放圖像
          開發人員控制臺分析屏幕 dashobard 的 UI 模擬
          將顯示縮放圖像
          開發者控制臺主屏幕的 UI 模擬
          我們有點沉迷于定制編號

          這里最有趣的 UI 功能是數據監控儀表盤。如果你曾經設計過企業儀表盤,那么其余部分其實都差不多——基于角色的訪問控制、計費、組織層級結構(內部成員可以邀請其他成員)、通知、設置等等。

          產品 5:文檔

          好吧,讓我們開始討論最重要的部分——文檔!每個人都喜歡設計文檔 ;)這就是我們的文檔。這實際上是我第一次完全自主設計一個文檔網站。我們使用DocusuarusAlgolia搜索,它的用戶界面非常棒,開箱即用!

          將顯示縮放圖像
          文檔用戶界面
          https://docs.modular.com/max

          就信息架構而言,我們在這里討論了幾種方法,并歸納為兩個總體概念:

          1. 遵循用戶的待辦事項 (JTBD)——他們按照什么順序完成這些任務。對我們來說,順序是:本地測試、服務、部署到云端、監控、擴展。
          2. 遵循產品的架構。我們擁有一個完整的平臺,從底層 GPU 編程到云端的自動擴展,因此以這種方式進行分類對我們來說也很有吸引力。

          無論您選擇哪種方式,重申這一點的登錄頁面都至關重要。

          我們訪問量最大的頁面是“快速入門”(這并不奇怪!)。我們正在持續優化此頁面,以加快競爭速度并提高完成率。

          將顯示縮放圖像
          文檔快速啟動頁面的 UI

          一些參考:

          將顯示縮放圖像
          streamlet 應用程序屏幕截圖
          Streamlit Docs(當產品表面較小時更容易)

          正如我之前提到的,Algolia 搜索功能非常強大。它的效果如下:

          將顯示縮放圖像
          Algolia UI 截圖
          搜索燈箱
          將顯示縮放圖像
          Algolia搜索結果頁面
          搜索頁面允許搜索所有產品和版本

          產品 6:食譜和代碼

          食譜頁面的縮略圖線框

          食譜(或烹飪書)是一種簡單卻標準化的分步說明。它們最具交互性的形式是筆記本,每個部分都是可執行代碼。最簡單的形式是一系列包含可復制/粘貼代碼片段的說明。

          正如我提到的,我們的構建過程極其迭代,所以我們的 MVP 實際上只是渲染一個 GitHub 代碼示例,并在右側標注元數據。我發現,對于這類受眾來說,越簡潔明了越好。內容本身非常密集,設計不應該過于引人注目。

          將顯示縮放圖像
          菜譜頁面的 UI 模型

          這些文章的設計系統很大一部分在于如何渲染代碼,因此,擁有一個井然有序的明暗模式系統至關重要。我們使用mantine 系統來實現這一點,并在其中設置自定義顏色。您也可以參考 CLI 配色方案的最佳實踐,例如本文所示:https ://hamvocke.com/blog/lets-create-a-terminal-color-scheme/

          將顯示縮放圖像
          我們的代碼塊設計系統的 UI 模擬
          樣式代碼的設計系統

          別忘了體驗一下命令行界面 (CLI)、ASCII 字體和清晰的進度條!至于命令行界面的用戶體驗,我試著教我的工程團隊成員 10 條基本的 NNG 原則,其中最重要的一條就是“系統狀態可見性”。

          將顯示縮放圖像
          將顯示縮放圖像
          終端中的進度條
          將顯示縮放圖像
          將顯示縮放圖像
          使用 ascii art 生成器工具:https://convertcase.net/ascii-art-generator/

          下一步是什么?

          我非常高興能夠構建更多工作流程并分享它們。我希望接下來專注于代理工作流程和云監控儀表板。

          將顯示縮放圖像
          將顯示縮放圖像
          來自工具n8n 的兩個“低代碼”代理工作流圖像。

          獎勵圖片——AI 工程師角色

          作為參考,以下是我為 Modular 創建的通用角色模型。目前我們的目標人物是“解決方案構建者”。

          將顯示縮放圖像
          3 個人物的圖像。

          敬請關注,感謝您的閱讀

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合