Apple
ห้องสีขาวที่มีสวิตช์สีฟ้าเพียงตัวเดียว
การออกแบบของ Apple เป็นแบบอย่างของความเรียบง่าย: พื้นหลังสีขาวเกือบทั้งหมด พื้นที่ว่างสีขาวมากมาย และสีน้ำเงินสดใสเพียงสีเดียวที่ทำให้ทุกการกระทำดูตั้งใจ จุดเด่นหลักอยู่ที่การจัดวางตัวอักษร—SF Pro ที่มีระยะห่างระหว่างตัวอักษรติดลบ ซึ่งจะลดลงเมื่อขนาดตัวอักษรใหญ่ขึ้น ทำให้หัวข้อข่าวมีความชัดเจนทางสถาปัตยกรรมโดยไม่ดูหนักเกินไป ตัวผลิตภัณฑ์คือหัวใจของการออกแบบ: ภาพถ่ายผลิตภัณฑ์ขนาดใหญ่และภาพไลฟ์สไตล์เป็นส่วนสำคัญ ในขณะที่องค์ประกอบโครเมียมลดความสำคัญลงไปในกรอบบางๆ การนำทางแบบโปร่งแสง และเส้นสายที่ละเอียดอ่อน ส่วนต่างๆ สลับกันระหว่างพื้นหลังสีเทาอ่อนกับบล็อกสีเต็มรูปแบบสำหรับสื่อส่งเสริมการขาย สร้างจังหวะผ่านการเปลี่ยนแปลงขนาดมากกว่าองค์ประกอบตกแต่ง
การจัดวางหน้าเว็บเป็นแบบเต็มความกว้างโดยไม่มีการกำหนดความกว้างสูงสุดของคอนเทนเนอร์ตายตัว ส่วนต่างๆ จะขยายจากขอบถึงขอบ โดยมีบล็อกข้อความอยู่ตรงกลางที่ระยะประมาณ 980 พิกเซล การนำทางเป็นแถบหลักคงที่แถบเดียว พร้อมโฟลเดอร์ย่อยเพิ่มเติมสำหรับแต่ละผลิตภัณฑ์ที่จะปรากฏขึ้นเมื่อเลื่อนหน้าจอ เค้าโครงหลักจะอยู่ตรงกลางเสมอ: ชื่อผลิตภัณฑ์ขนาดใหญ่ คำอธิบายสั้นๆ บรรทัดเดียว ปุ่มสองปุ่ม และรูปภาพผลิตภัณฑ์ที่เติมเต็มพื้นที่ที่เหลือ ส่วนต่างๆ จะเรียงซ้อนกันในแนวตั้งโดยมีจังหวะแนวตั้งที่เหมาะสม (มากกว่า 64 พิกเซลระหว่างส่วนต่างๆ) สลับกันระหว่างพื้นหลังสี #f5f5f7 และสีอื่นๆ ส่วนล่างของหน้าเว็บเป็นแถวแนวนอนแถวเดียวของบัตรบริการแบบเต็มความกว้าง (Apple TV+, Fitness+, Music, Arcade) แต่ละบัตรเป็นบล็อกรูปภาพพร้อมข้อความซ้อนทับและปุ่มหนึ่งปุ่ม ไม่มีแถบด้านข้าง ไม่มีเค้าโครงเนื้อหาแบบหลายคอลัมน์ ไม่มีองค์ประกอบที่ไม่สมมาตร ทุกอย่างอยู่ตรงกลาง เรียงซ้อนกัน และสมมาตร
การถ่ายภาพเป็นภาษาภาพที่โดดเด่นที่สุด ภาพสินค้าจะถ่ายโดยใช้พื้นหลังสีขาวบริสุทธิ์หรือสีเทาอ่อน โดยไม่มีบริบทใดๆ ตัวสินค้าเองคือดาวเด่น ถูกแยกออกมาและส่องสว่าง ภาพไลฟ์สไตล์จะแสดงในแบนเนอร์เต็มความกว้าง โดยมักจะตัดภาพวัตถุอย่างกระชับ การไล่ระดับสี (สีฟ้าอ่อน สีชมพู สีเขียว) ทำหน้าที่เป็นพื้นหลังสำหรับส่วนต่างๆ ของสินค้า ไม่ใช่เพื่อการตกแต่ง ไอคอนมีลักษณะเรียบง่ายและใช้เส้นเป็นหลัก ความหนา 1-2 พิกเซล ในโทนสีเทาเดียวกับข้อความ ไม่มีภาพประกอบ ไม่มีกราฟิกนามธรรม ไม่มีภาพเรนเดอร์ 3 มิติ ยกเว้นภาพสินค้าเอง
จานสี
ยี่ห้อ
- Apple Blue
#0071e3— ปุ่มแอ็กชันที่เติมสี สถานะที่เลือก - สีโครมาติกแบบโต้ตอบเพียงสีเดียวที่ใช้เพียงเล็กน้อยเพื่อให้ทุกการปรากฏมีความหมาย - Link Blue
#0066cc— เส้นขอบการกระทำที่เน้นสี และลิงก์ที่ฝังอยู่ จะใช้สีที่เข้มกว่าสีฟ้าของ Apple ในกรณีที่การใช้สีเต็มพื้นที่บนแท็บเล็ตจะดูฉูดฉาดเกินไป - Signal Blue
#2997ff— กรอบตกแต่ง, เส้นขอบรูปภาพ, ขอบไอคอน - สีฟ้าอ่อนที่สุดในระบบ ใช้เพื่อสร้างบรรยากาศมากกว่าเพื่อการโต้ตอบกับผู้ใช้
เป็นกลาง
- Carbon
#1d1d1f— ข้อความหลัก เส้นขอบหัวเรื่อง เส้นนำทาง เส้นขอบการ์ด - สีหมึกหลักเกือบจะเป็นสีดำสนิท โดยมีโทนสีอบอุ่นเจืออยู่เล็กน้อย - Frost
#f5f5f7— พื้นหลังหน้าเว็บ พื้นหลังข้อความหลัก และพื้นผิวส่วนท้ายหน้าเว็บเป็นสีเทาอ่อนอันเป็นเอกลักษณ์ของ Apple ซึ่งเย็นกว่าสีขาวบริสุทธิ์เล็กน้อย - Ice
#f4f8fb— การเติมสีพื้นผิวที่สื่ออารมณ์ โทนสีที่นุ่มนวล ข้อความบนปุ่มบนพื้นหลังสีเข้ม—โทนสีฟ้าอ่อนๆ ที่ช่วยเพิ่มความมีชีวิตชีวาให้กับส่วนนี้โดยไม่ทำให้ดูโดดเด่นเกินไป - Smoke
#333333— ข้อความรอง, สีเติมในแถบนำทาง, ขอบปุ่ม - สีกลางอเนกประสงค์สำหรับขอบและไอคอนที่ต้องการความโดดเด่นมากกว่าสีเทาปานกลาง - Graphite
#474747— ข้อความนำทาง เส้นขอบนำทาง เส้นขอบลิงก์ - อยู่ในตำแหน่งกลางระหว่าง Carbon และ Smoke ในลำดับชั้นขององค์ประกอบ - Ash
#707070— ข้อความส่วนท้าย, เส้นขอบรายการ, เส้นขอบการนำทาง, ข้อความหลักที่ลดความโดดเด่น - สีเทาปานกลางสำหรับเนื้อหาที่จำเป็นต้องแสดงแต่ไม่เด่นชัด
การจัดพิมพ์
จาก 12 เป็น 56 พิกเซล · 8 ขั้นตอน
- SF Pro Display — ทดแทน: Inter · โครงร่าง 400, 600, 700 · หัวข้อข่าวและข้อความขนาดใหญ่—ขนาด 40 พิกเซลขึ้นไปใช้รูปแบบการแสดงผลที่มีช่องรับแสงแคบกว่าและการติดตามเชิงลบที่ชัดเจนกว่า ขนาด 700 สงวนไว้สำหรับเค้าโครงโฆษณา และขนาด 400 สงวนไว้สำหรับชื่อผลิตภัณฑ์ในเนื้อหาบรรณาธิการ
- SF Pro Text — ทดแทน: Inter · โครงร่าง 300, 400, 600 · ข้อความหลัก การนำทาง ปุ่ม หัวข้อย่อย — ใช้ฟอนต์ขนาด 400 สำหรับข้อความหลัก 300 สำหรับหัวข้อย่อยและป้ายกำกับที่มีคุณสมบัติ 600 สำหรับองค์ประกอบการนำทางและข้อความบนปุ่ม ระยะห่างระหว่างตัวอักษรจะลดลงตามสัดส่วนของขนาด (จาก -0.022em ถึง 12px ถึง -0.01em ถึง 44px)
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 12px |
| รัศมีปุ่ม | 980px |
| รัศมีการ์ด | 8px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 64px |
| ความกว้างของหน้า | 1440px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Apple และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Studio — ผนังแกลเลอรี่ที่เคลื่อนไหวได้ แต่ละจอแสดงถึงพื้นผิวจัดแสดงสีเทาที่เงียบสงบ ซึ่งวัสดุทางด้านการพิมพ์และผลงานสร้างสรรค์ที่ซ้อนทับกันต่างแข่งขันกันเพื่อดึงดูดความสนใจ
- Mollie — เคาน์เตอร์แคชเมียร์ สมุดบัญชีสีเข้ม เว้นพื้นที่สีขาวให้มากพอสำหรับงานออกแบบเชิงบรรณาธิการรอบๆ ข้อความสีดำ จากนั้นเน้นจุดที่เกี่ยวข้องกับผลิตภัณฑ์ด้วยสีครีมโทนอบอุ่น สีน้ำตาลเอสเปรสโซ และภาพถ่ายที่สัมผัสได้ของวิธีการชำระเงินจริง
- Basis Theory — เครื่องรับชำระเงินในสตูดิโอออกแบบ กระดาษเทคนิคสีขาว ชั้นโปร่งใสที่ซ้อนทับกัน และองค์ประกอบควบคุมสีฟ้าอมเขียวเพียงชิ้นเดียว กำหนดทิศทางด้านภาพ
- CleanShot X — ห้องทำงานที่มีฉากหลังเป็นแสงสีฟ้า สร้างพื้นที่สีขาวที่สงบเงียบโดยรอบข้อความสีดำขนาดกะทัดรัด จากนั้นปล่อยให้ปุ่มควบคุมสีน้ำเงินเข้มและภาพผลิตภัณฑ์ Mac ที่ซ้อนกันเป็นจุดเด่น
- Modern Treasury — สมุดบัญชีรายรับรายจ่ายบนกระดาษกราฟ สร้างหน้ากระดาษที่คล้ายกับแผ่นงานปฏิบัติการสีขาวเรียบๆ ที่แสดงกระแสเงินสดด้วยเส้นบางๆ จุดที่มีป้ายกำกับ และการควบคุมที่ซ่อนอยู่อย่างแม่นยำ
- Basha-Franklin — โครงสร้างตารางในแกลเลอรี่ใต้คานสีขาว ใช้โทนสีอบอุ่น #f4ede6 โครงสร้างสีดำที่ดูเรียบง่าย และเสาที่ไม่สมมาตร โดยอิงจากภาพถ่ายที่ดูเหมือนแฟ้มผลงานสถาปัตยกรรมที่พิมพ์ออกมา
- Bajgart Office — ผนังแสดงผลงานบรรณาธิการ ใช้พื้นที่สีขาวขนาดใหญ่เพื่อให้แบบอักษร serif ที่เรียบง่ายและภาพผลงานบางส่วนดูมีน้ำหนักทางสายตามากกว่าองค์ประกอบอินเทอร์เฟซที่ดูฉูดฉาด
- Heptabase — โต๊ะทำงานที่แสงแดดส่องถึง พื้นผิวสีโทนอบอุ่นคล้ายกระดาษ ปุ่มควบคุมสีเทาเข้ม และหน้าต่างลอยตัวสำหรับการค้นคว้า สร้างความรู้สึกเหมือนเป็นพื้นที่ทำงานที่เป็นระเบียบมากกว่าแผงควบคุมซอฟต์แวร์
- Bejamas — ชุดนอน—สีเขียวมะนาวสดใสตัดกับกระจกสีดำ สร้างหน้าบรรณาธิการสีเทาอ่อนสงบเงียบ ตัดกับแผงสีดำที่ดึงดูดสายตา ซึ่งมีเส้นแสงสีเขียวจางๆ ตัดกับพื้นผิว
- Baba — บันทึกการดูแลรักษาท่ามกลางแสงแดดสีแดง สร้างแถบเรื่องราวสีแดงกว้างๆ รอบพื้นผิวข้อมูลสีขาว ชมพู และครีมที่ดูเรียบง่าย โดยใช้ภาพถ่ายของผู้คนเป็นศูนย์กลางทางอารมณ์
- Grafana Labs — ห้องควบคุมของสถานีส่งสัญญาณซันไรส์ พื้นที่ทำงานสีเทาและขาวที่เงียบสงบ ผสานกับเส้นขอบฟ้าไล่ระดับสีสี่สีที่กว้าง และสัญญาณอินเทอร์เฟซสีน้ำเงินที่แม่นยำ
- Kagi — จัดห้องอ่านหนังสือแยกต่างหาก สร้างพื้นที่สีขาวโล่งกว้างรอบตัวอักษรสีเทาเข้ม โดยใช้สีม่วงอ่อนเป็นจุดเด่น และพื้นผิวสีพาสเทลโทนอบอุ่นเพื่อลดความเงียบสงบลง