精選 · 開放 · 免費
Aaply
一款協助團隊設計行動應用程式、打造以使用者為中心產品體驗的協作工具。
SaaSProductivityApp UIBold TypographyPlayful
01
設計氣質 DNA
協作式行動裝置優先設計工具以人為本
行動版線框圖的 Figma
02
色彩
#e6e51eAccent
#000000Ink
#f2f2f2BG
#ffffffBG soft
#c4c4c4Muted
rgba(0,0,0,1)Line
以高對比的黑白色為基礎，搭配醒目、高飽和度的黃色作為主要操作的強調色。
03
字型
geometric-sans · humanist-sans · monospace
- display
56px · 700 - headline
31px · 500 - body
16px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
各章節之間保留充足留白，以維持整潔、通透的視覺感受。
05
表面 (圓角 / 陰影 / 邊線)
sm · 16px
md · 30px
lg · 50px
pill · 3000px
1px solid black
rgba(0, 0, 0, 0.2) 0px 10px 10px -5px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中容器，搭配大型排版與充裕的垂直間距。
07
動效與互動
220msmicro
400mssmall
1000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
頁面載入時淡入並向上滑動 · hover 時顏色與陰影的過渡效果
背景顏色過渡，以及透過 box-shadow 實現的細微高度變化。 · 立即回饋，搭配細微的縮放或顏色變化。
08
組件
- button 大型、膠囊形按鈕，具備高對比度（實心黑色或實心黃色），無邊框圓角限制。
- card 大型、白色、圓角的內容區塊容器。
- chip 未特別強調。
- input 未特別強調。
- hero 置中的標題，內含表情符號，下方接著主要與次要的行動呼籲（CTA）。
09
文案語氣與禁用清單
- 語氣 活潑、直接且以人為本。
- 標題風格 對話式且具表現力，常直接將表情符號融入文字中。
- 按鈕文案 導向行動且具吸引力，使用簡單清晰的語言。
- 勿使用深色主題——截圖顯示淺灰色 (#f2f2f2) 背景搭配黑色文字
- 勿使用纖細、精緻的字型——截圖顯示加粗、幾何無襯線展示字型
- 勿使用銳利的直角——截圖顯示高度圓角的膠囊形按鈕與圓角卡片容器
- 勿使用細微、低飽和度的強調色——截圖顯示鮮明、高飽和度的黃色 (#e6e51e) 作為主要強調色
- 勿使用擁擠、密實的版面——截圖顯示充足的留白與大型、置中的內容
- 勿避免內嵌視覺元素——截圖顯示表情符號直接融入主要標題文字
- 避免: 技術術語
- 避免: 冰冷或企業化的語言
- 避免: 複雜的句子結構
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個活潑、高對比的 SaaS 登陸頁面，用於一款行動應用程式設計工具。其核心識別建立於淺灰色 (#f2f2f2) 背景、純黑 (#000000) 文字，以及鮮明、高飽和度的黃色 (#e6e51e) 作為主要操作的強調色。字型方面，採用加粗、幾何無襯線的展示字型 (Poppins)，搭配簡潔的人文無襯線內文字型 (Inter)。版面使用充足的留白、置中容器，以及高度圓角、膠囊形的 UI 元素。關鍵注意事項：避免深色模式、避免纖細字型、避免銳利邊角、避免低飽和度強調色、避免擁擠版面，以及避免死板、無表情符號的標題。設計風格具備表現力、以人為本，專注於協作式的行動裝置線框圖繪製。
en · zh-CN · zh-TW · ja · ko