
Spotify
ห้องควบคุมตู้เพลงกลางคืน
อินเทอร์เฟซเว็บของ Spotify เป็นศูนย์ควบคุมสื่อที่หนาแน่นและมืดมน: พื้นหลังสีดำสนิทประดับด้วยภาพปกอัลบั้มสีสันสดใส มีสีเขียวเป็นจุดเด่นเพียงจุดเดียว และปุ่มควบคุมรูปทรงแคปซูล ตัวอักษรมีขนาดกะทัดรัดและใช้งานได้จริง—แบบอักษร sans-serif เรขาคณิตที่ออกแบบมาเป็นพิเศษในขนาดเล็ก ทำให้ภาพปกอัลบั้มและภาพถ่ายศิลปินทำหน้าที่หลักในการแสดงผล เค้าโครงเป็นแบบสองคอลัมน์คงที่ (แถบด้านข้าง + ฟีดหลัก) โดยมีตารางภาพปกอัลบั้มทรงสี่เหลี่ยมและรูปโปรไฟล์กลม สร้างการสลับกันอย่างเป็นจังหวะของแบบอักษรเรขาคณิต อินเทอร์เฟซหลีกเลี่ยงการเปลี่ยนแปลงความสูงอย่างฉับพลัน โดยอาศัยความแตกต่างของพื้นผิวอย่างละเอียดอ่อน (การ์ด #121212 บนพื้นสีดำ #000000) และแบนเนอร์ไล่ระดับสีขนาดใหญ่เพียงอันเดียวเพื่อเพิ่มพลัง ผลลัพธ์ที่ได้คือความรู้สึกเหมือนบูธดีเจ: อัดแน่นไปด้วยข้อมูล มืดทึบ และพร้อมที่จะเล่นได้ในพริบตา
รูปแบบการจัดวางแบบสองคอลัมน์คงที่ ประกอบด้วยแถบด้านข้างซ้าย ("คลังเพลงของคุณ") และพื้นที่เนื้อหาหลักที่ตอบสนองต่อขนาดหน้าจอ แถบด้านบนเป็นแถบสีดำเต็มความกว้าง โดยมีปุ่มค้นหาอยู่ทางซ้ายและปุ่มดำเนินการบัญชีอยู่ทางขวา เนื้อหาหลักจะเลื่อนในแนวตั้ง โดยมีแถบเลื่อนแนวนอนแสดงการ์ดต่างๆ ได้แก่ เพลงยอดนิยมในตารางสี่เหลี่ยม 5 คอลัมน์ ศิลปินยอดนิยมในตารางวงกลม 5 คอลัมน์ และอัลบั้ม/ซิงเกิลยอดนิยมในรูปแบบเดียวกัน ระยะห่างระหว่างส่วนต่างๆ นั้นกระชับ (32 ซม.) แบนเนอร์โฆษณาด้านล่างจะตรึงอยู่ด้านล่างสุดของหน้าจอ การนำทางทำได้เฉพาะผ่านแถบด้านบนและแถบด้านข้างเท่านั้น ไม่มีเมนูขนาดใหญ่หรือเส้นทางนำทาง รูปแบบการแสดงผลจะสลับกัน: การ์ดสี่เหลี่ยม → การ์ดวงกลม → การ์ดสี่เหลี่ยม สร้างความแตกต่างทางเรขาคณิตระหว่างส่วนต่างๆ
ภาพปกอัลบั้มและภาพถ่ายศิลปินเป็นเนื้อหาภาพหลัก ภาพปกแสดงเป็นชิ้นส่วนสี่เหลี่ยมจัตุรัสหนาแน่น (อัตราส่วน 1:1) ที่มีรัศมี 6 พิกเซล คมชัดพอที่จะดูเหมือนภาพบรรณาธิการ แต่ก็ดูนุ่มนวลพอที่จะทันสมัย ภาพถ่ายศิลปินเป็นชิ้นส่วนทรงกลม เน้นใบหน้าเป็นจุดเด่น อินเทอร์เฟซหลักไม่มีภาพตกแต่ง ภาพไลฟ์สไตล์ หรือกราฟิกนามธรรม องค์ประกอบภาพที่ไม่ใช่ภาพถ่ายเพียงอย่างเดียวคือแบนเนอร์ไล่ระดับสีม่วงไปน้ำเงินที่ด้านล่าง ซึ่งทำหน้าที่เป็นองค์ประกอบเดียวของสีแบรนด์ ไอคอนมีขนาดเล็ก เรียบง่าย สีขาวบนพื้นหลังสีเข้ม เล็กและใช้งานได้จริง ไม่ใช่เพื่อการตกแต่ง
จานสี
ยี่ห้อ
- Spotify Green
#1ed760— สีเขียวใช้เป็นสีเสริมสำหรับรายละเอียดตกแต่งและเพื่อเน้นคำค้นหาที่ใช้ไม่บ่อยนัก ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ
เป็นกลาง
- Pure White
#ffffff— พื้นผิวรองรับสีอ่อนสำหรับสร้างพื้นหลังที่ไม่โดดเด่นและแบ่งส่วนต่างๆ ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ - Signal Red
#b85850— สีแดงใช้เป็นสีเสริมเพื่อเน้นรายละเอียดการตกแต่งและขับเน้นสีที่ไม่ค่อยพบเห็น ควรใช้เป็นสีเสริม ไม่ใช่สีที่แสดงถึงสถานะทางสังคม - Void Black
#000000— พื้นหลังของหน้าเว็บ, แถบนำทางด้านบน, ชั้นพื้นผิวที่ลึกที่สุด - Carbon
#121212— พื้นผิวทำจากกระดาษแข็ง แผงด้านข้าง ชั้นผิวรองทับบนผ้าใบ - Graphite
#1f1f1f— พื้นผิวที่ยกสูงขึ้น - สถานะการวางเมาส์เหนือองค์ประกอบ, ช่องป้อนข้อมูล, องค์ประกอบการนำทางที่เลือก - Smoke
#292929— พื้นหลังการนำทางแบบแอคทีฟ พร้อมเอฟเฟกต์แสงพื้นหลังเล็กน้อย
การจัดพิมพ์
จาก 11 เป็น 24 พิกเซล · 4 ขั้นตอน
- SpotifyMixUI — ทดแทน: Inter · โครงร่าง 400, 600, 700 · เนื้อหาหลัก การนำทาง ปุ่ม ข้อมูลเมตา คำบรรยายภาพขนาดเล็ก—การออกแบบที่กะทัดรัดและอุดมไปด้วยข้อมูล ซึ่งออกแบบมาให้ดูเรียบง่าย เพื่อให้องค์ประกอบทางศิลปะโดดเด่นขึ้นมา
- SpotifyMixUITitle — ทดแทน: Inter weight 700 · โครงร่าง 700 · หัวข้อส่วนต่างๆ ("เพลงยอดนิยม", "ศิลปินยอดนิยม") - ใช้แบบอักษรตัวหนาขนาดปานกลาง ทำให้หัวข้อโดดเด่นโดยไม่ทำให้ตารางการ์ดดูรกเกินไป
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 8-12px |
| รัศมีปุ่ม | 9999px |
| รัศมีการ์ด | 6px |
| เงา | น้อยที่สุด |
| ระหว่างส่วนต่างๆ | 32-48px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Spotify และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Resend — กำมะหยี่สีดำผสมสีม่วงนีออน
- Neon — ห้องเซิร์ฟเวอร์หลังมืดค่ำ มืดสนิท มีเพียงแสงสว่างจากข้อมูลและการโต้ตอบของผู้ใช้งานเท่านั้น
- Discord — โลกในเกมถูกซ่อนอยู่หลังหน้าต่างแชทแบบป๊อปอัพ แต่ละส่วนเป็นสภาพแวดล้อมที่แยกเป็นอิสระ มีแสงสว่างและตัวละครเป็นของตัวเอง
- Idle Finance — พื้นที่ซื้อขายที่ประดับประดาด้วยแสงนีออนของท่าเทียบเรือน้ำลึกเป็นท่าเรือทหารเรือที่มืดมิด มีเพียงแสงสีฟ้าเพียงดวงเดียวที่ส่องทะลุความมืดนั้น
- Midjourney — สถานีเรืองแสงในมหาสมุทรลึก โลกใต้ทะเลลึกที่ซึ่งสติปัญญาถูกสร้างขึ้นมาด้วยภาพในรูปแบบ ASCII และปุ่มควบคุมจะปรากฏเป็นลวดลายเรืองแสงจางๆ
- Netflix — ชั้นวางดิจิทัลไร้ขีดจำกัด ประสบการณ์การรับชมภาพยนตร์ที่นำเสนอคลังเนื้อหาอันไม่มีที่สิ้นสุดบนฉากหลังสีดำสนิทแบบโรงละคร
- Wope — Wope คืออินเทอร์เฟซขอบฟ้าสีม่วง ลองนึกภาพโต๊ะสังเกตการณ์สีเข้มที่มีแสงสีม่วงส่องประกายออกมาจากใต้กระจก
- basement — เครื่องพิมพ์ว่างเปล่าเวลาตี 3 – ตัวอักษรขนาดใหญ่บีบอัดกระจายอยู่บนพื้นหลังสีดำสนิท มีเพียงแสงสีส้มริบหรี่บนแถบนำทาง ทุกสิ่งทุกอย่างรอบข้างเป็นสีขาวหรือสีเทาจางๆ
- Ori — ห้องเซิร์ฟเวอร์ตอนเที่ยงคืนนั้นมืดสนิท มีเพียงแสงสีขาว และสวิตช์ไฟเพียงตัวเดียวที่เปิดอยู่
- Amaterasu — สถานที่ศักดิ์สิทธิ์สีเทอร์ควอยซ์สวรรค์
- Stink Studios — สตูดิโอถ่ายทำภาพยนตร์ยามเที่ยงคืน - เสียงเครื่องฉายดังหึ่งๆ ห้องมืดสนิท มีเพียงฟิล์มเท่านั้นที่ส่องสว่าง
- Obsidian — คลังความรู้อันล้ำลึก พื้นที่ดิจิทัลที่ชัดเจนและหลากหลาย ออกแบบมาเพื่อความชัดเจนและการโฟกัส พร้อมด้วยเส้นใยสีม่วงเรืองรองที่เชื่อมโยงการปฏิสัมพันธ์