基礎與入門

簡介

若要建立能提升功能並為使用者帶來樂趣的擴充功能，重點在於聚焦以使用者為中心的設計、深思熟慮的版面配置策略，以及有效運用色彩與字體。讓我們一起探索如何將你的擴充功能與 Simple 體驗無縫整合。如果你打算在 Marketplace 上發布你的應用程式，請參閱我們的 Marketplace 應用程式指南 設計與可用性章節。

打造你的介面

設計師擴充功能在 iframe 中運作，讓你可以使用標準的 HTML、CSS 和 JavaScript 來開發使用者介面，就像開發單頁應用程式一樣。為了簡化流程，你可以使用框架和函式庫。例如，可以使用 React 或 Vue 來建立 UI 元件，並使用 Tailwind CSS 或 Bootstrap 來進行樣式設計。

雖然 Simple 並不要求設計師擴充功能必須原生於設計器中，但我們相信 感覺原生的應用程式會更受客戶青睞 並能提供更優質的使用者體驗。

設計原則

你的使用者介面應遵循以下關鍵原則：

• 以客戶為中心：應用程式的目的與價值應圍繞使用者的需求來定義。它應為使用者解決獨特的問題。
• 簡潔性：你的應用程式應易於使用，且無需大量學習即可上手。它應輔助程式碼的視覺抽象化，而非使其複雜化。
• 設計一致性：在整個應用程式中使用一致的設計元素，例如色彩、字體與按鈕樣式。這能改善使用者體驗，並讓你的應用程式更易於導覽。
• 促進創意動能：你的應用程式不應阻礙創意流程。避免可能打斷使用者心流狀態的不必要步驟或選項。
• 清晰的語言：使用清晰簡潔的文字。它應引導使用者，並連結視覺、版面與可用性之間的關係。
• 無障礙設計：努力讓你的應用程式能為所有使用者所用。這意味著要確保它符合無障礙標準與最佳實務。

設計指南

選擇符合應用程式目的與調性的色彩配置。Simple 主要在其介面中使用 Inter 字體。你應考慮採用它以保持一致性。

常見問題解答

如果你看到這些錯誤，應確保你的應用程式已建置為限制其執行請求的速率。例如，這可能是由於在等待資源建立時過度頻繁地輪詢，或發出大量高度並行的 API 呼叫所觸發。

{
    "message": "請求次數過多",
    "code": "too_many_requests",
    "externalReference": null,
    "details": [],            
}

存取 API

我們的 API 透過易於使用的物件與方法與畫布互動。使用這些 API，你可以與現有元素互動，或將新元素加入畫布。

總結與展望

讓我們逐步介紹為你的應用程式帶來結構、樣式與動態內容所需的關鍵檔案。你隨時可以在我們的文件中進一步了解應用程式的設定、結構與必要檔案。當你探索並修改範本時，請不要害怕嘗試與變更。

最好的學習方式就是動手做，而範本是一個可以安全嘗試的環境。