← OpenDesign
精選 · 開放 · 免費
Hocradio Eu
為高密度資訊展示與持續音訊播放設計的極簡暗黑模式廣播典藏。
Dark Mode Editorial Music App UI Typography
01
設計氣質 DNA
廣播 電子 極簡 實驗 策展
一座簡潔、功能主義的廣播控制台,或粗野主義的播放清單典藏。
02
色彩
#FFFFFFInk
#000000BG
#4C4C4CMuted
rgba(255, 255, 255, 0.15)Line
絕對單色。內容為王,因此視覺噪音被減至最低,採用嚴格的黑色背景搭配白色文字及少量灰色點綴。
03
字型
geometric-sans
display 24px · 500body 20px · 500caption 16px · 500排版嚴格限定使用字重 500 與 400。 · 標題與大標不使用粗體字重,以保持整體質感均勻。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
1.5 至 2.0 的行高比,在密集文字環境中提供充足呼吸空間。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
1px 實心白色線條定義主要網格與互動邊框。
無
06
版面
1440 container
12 columns
768 / 1024 breakpoints
嚴格的 4x2(或 4xN)等寬單元格網格用於廣播典藏,桌面版右側固定資訊欄。
07
動效與互動
150ms micro
300ms small
500ms medium
cubic-bezier(0.4, 0.0, 0.2, 1) easing
UI 狀態變換時的平滑透明度過渡。 · 互動元素的細微顏色變化。 · 播放器列中的流暢音訊波形視覺化。
文字與邊框的細微透明度降低或顏色變化,以指示可互動性。 · 立即狀態變換或導覽,輔以平滑過渡效果。
08
組件
button 以文字為基礎,1px 實心白色邊框,全形大寫轉換,無背景填充。 card 純粹以 1px 白色邊框交點定義的網格單元,頂部對齊標題,底部對齊元資料。 chip 以逗號分隔的內聯文字標籤,使用標準內文字體,無邊界框。 input 極簡、無邊框欄位或簡單文字連結,用於搜尋與導覽。 hero 資訊優先的密集網格,立即呈現最新音訊典藏。
09
文案語氣與禁用清單
語氣 直接、資訊豐富,略帶前衛感。 標題風格 區塊標籤使用全形大寫(如「資訊」、「聯絡」),內容標題使用混合大小寫。 按鈕文案 內斂的文字連結(如「Soundcloud ->」),無顯眼按鈕形狀。 不要使用色彩點綴——截圖顯示嚴格的單色黑白灰。 不要使用圓角——截圖顯示嚴格的 0px border-radius 網格。 不要使用陰影——截圖顯示平面 1px 白色邊框作為唯一深度提示。 不要使用粗體字重——截圖顯示所有文字使用中等及標準字重。 不要使用複雜背景——截圖顯示純黑背景。 不要使用裝飾性圖示——截圖僅顯示必要的功能性符號,如「+」與箭頭。 避免: 避免裝飾性花紋或不必要的插圖。 避免: 避免粗重字體或誇張的尺寸對比。 避免: 避免複雜的顏色漸層或多色調色板。 避免: 避免圓角或柔軟形狀。 避免: 避免雜亂佈局與深層陰影。 避免: 避免隨意或過度熱情的語言。
10
包內真實截圖
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 擷取自真實頁面 · 真 computed styles
11
System Prompt
HOC Radio 是一座極簡的暗黑模式音訊典藏,以嚴格網格系統與單色調色板為特色。設計採用純黑背景(#000000)搭配高對比白色文字(#FFFFFF)與細微灰色點綴(#4C4C4C)。字體嚴格限定於幾何無襯線類別(Roobert),使用中等(500)與標準(400)字重。關鍵設計限制包括:無色彩點綴、零 border-radius(直角 90 度轉角)、無陰影,以及無粗體字重。佈局是由 1px 白色邊框定義的資訊密集網格,優先考慮實用性與編輯焦點,而非視覺華麗。
更多精選
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
為什麼收錄: 此網站是粗野主義、實用優先設計的完美範例,剝離所有非必要視覺元素,完全聚焦於核心內容:音樂。