此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
Tocas UI
開始使用
元件樣式
實際範例
台灣正體
台灣正體
GitHub
Tocas UI
台灣正體
台灣正體
實際範例
以 Tocas UI 所打造的範例頁面,你能夠在此檢視並下載範例原始碼。
看過來
這些範例是以電腦版本為設計初衷,若以行動裝置檢視,其格局可能會變形或被裁切。
應用程式
類似單頁、漸進式應用程式的相關範例。
聊天室
透過對話氣泡、結構框架實作小型聊天室介面。
資訊儀表板
一個擁有側邊欄並像企業網站的後台管理介面。
動態時軸
呈現可供使用者張貼短文、查看動態消息的時間軸社群網站。
信箱
網頁電子信箱的郵件檢視頁面並夾帶數個檔案附件。
雲端硬碟
一個透過卡片方式成列檔案的雲端硬碟。
發文後台
與 Simple Markdown Editor 所搭配的個人部落格後台文章發佈頁面。
網站
能夠呈現出單體、商業網站的實際範例。
部落格
以文字元素與部份特色卡片所組成的個人部落格網站。
內容管理
適用於團體、企業公告的小型商業 CMS 內容管理網站前台頁面。
募資平台
透過網格系統與圖片主體實現募資平台專案格局。
藝廊
呈現風景旅遊照片的靜態網站。
新聞
有主打內容與多個章節段落的新聞資訊彙整網站。
購物商城
帶有豐富的商品資訊以及評價指示的購物網站。
附屬頁面與工具
較為輔助性質的工具與其他資訊頁面。
結帳表單
顯示購物車項目還有結帳地址等詳細資料的表單頁面。
庫存管理
跨距欄位的表格呈現可供展開的商品詳情來快速編輯庫存資訊。
檔案列表
類似 FTP 等,較為簡潔的網路硬碟目錄與檔案資訊範例。
發票與收據
用於企業之間所開立的電子發票或是出貨單。
登入頁面
基本的帳號與密碼登入頁面。
系統設定
網站或服務後台的系統相關設定表單。
郵件版型
用於寄送給網站會員的郵件內容。
信用卡付款
於商品結帳時所請求的信用卡資料頁面並附帶商品資訊。
定價方案
提供給客戶數個不同價格的方案。
註冊
基本的使用者註冊頁面,並要求性別、生日、暱稱⋯⋯等資訊。
回到頂部
GitHub
開始使用
元件樣式
實際範例
由來自
台灣的
Yami Odymel
所設計,當然還有
貢獻者們
的愛心❤️。原始碼授權方式為
MIT
,文件則為
CC 0
公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是
卡莉絲伊繁星
的設計語言,而卡莉絲伊繁星屬
對空音商事
。
台灣正體語系協作者:
Yami Odymel
、coin3x、
Sea-n