บอร์ดระบบ UI ผีเสื้อสีรุ้ง

{ "type": "โครงการสาธิตระบบการออกแบบ UI/UX", "theme": "โหมดมืด แรงบันดาลใจจากธรรมชาติ ความสวยงามระยิบระยับ", "language": "ภาษาจีน", "canvas": { "aspect_ratio": "โปสเตอร์สี่เหลี่ยมจัตุรัส", "background": "สีน้ำเงินเข้มเที่ยงคืนถึงดำ พร้อมรัศมีจางๆ", "style": "โครงการแสดงผลระดับไฮเอนด์แห่งอนาคต โดดเด่นด้วยขอบแผงสีน้ำเงินนีออนบางเฉียบ ไฮไลท์มันวาว รัศมีนุ่มนวล และความคมชัดสูง" } } } }, "header": { "title": "ระบบการออกแบบ UI/UX ที่ได้รับแรงบันดาลใจจากธรรมชาติ {argument name=\"system title\" default=\"Butterfly Rainbow\"}", "description": "{argument name=\"chinese description\" default=\"การออกแบบนี้ได้รับแรงบันดาลใจจากปีกผีเสื้อ โดยผสมผสานความแวววาวของสีโครงสร้างและสีน้ำเงินเข้มเพื่อสร้างประสบการณ์ดิจิทัลที่เบา สบายตา และมีชีวิตชีวา\"}", "hero_image": "ปีกผีเสื้อที่มีรายละเอียดสูงและสว่างไสว แสดงสีน้ำเงินไฟฟ้า สีม่วง และสีฟ้าอมเขียวเหลือบแสง ครอบคลุมครึ่งหนึ่งของมุมบนขวา มองเห็นโครงสร้างเส้นใย ขอบโปร่งแสง และอนุภาคประกายระยิบระยับ พร้อมด้วยปีกที่สองที่เบลออยู่ด้านหลัง"} }, "layout": { "sections": [ { "title": "1. แรงบันดาลใจในการออกแบบ", "position": "มุมบนซ้าย ใต้ชื่อเรื่อง", "count": 4, "labels": [ "ภาพมาโครของปีกผีเสื้อสีรุ้ง", "ภาพระยะใกล้ของพื้นผิวปีกสีน้ำเงินม่วง", "รัศมีปริซึมหักเหแสง", "ลวดลายเซลล์ปีกผีเสื้อ" ] }, { "title": "2. คำสำคัญ", "position": "มุมบนขวา ใต้ภาพหลัก", "count": 5, "labels": [ "iris", "Agile", "Light", "Profound", "nature" ], "icon_style": "ไอคอนเส้นเรืองแสงแบบมินิมอลภายในการ์ดสีเข้มแบบโค้งมน" }, { "title": "3. ระบบสี", "position": "กลางซ้าย", "subsections": [ { "title": "สีหลัก", "count": 3, "labels": [ { "Morpho Blue #1E5BFF", "Rainbow Purple #7A5CFF", "Skylight #00E6FF" ] }, { "title": "สีกลาง", "count": 3, "labels": [ "Midnight Black #060F19", "Soft Navy Blue #141A2E", "Pearl White #F3F6FC" ] }, { "title": "เน้นสีและการไล่ระดับสี", "count": 2, "labels": [ "Rainbow gloss", "Butterfly Light" ] } ], "visual": "วงกลมตัวอย่างสีและทรงกลมไล่ระดับสี พร้อมป้ายกำกับภาษาจีนด้านล่าง" }, { "title": "4. เค้าโครง", "position": "กลางขวา", "count": 1, "labels": [ "Aa Poppins Light / Regular / Medium / SemiBold" ], "visual": "ตัวอักษร Aa สีขาวขนาดใหญ่บนการ์ดสีเข้ม" }, { "title": "5. ไอคอนแอปพลิเคชัน", "position": "ซ้ายและกลาง", "count": 1, "text": "{argument name=\"app name\" default=\"Winglet\"} เบา คล่องตัว สง่างาม", "visual": "ไอคอนแอปรูปผีเสื้อเรืองแสงข้างชื่อแอป" }, { "title": "6. ส่วนประกอบ UI", "position": "กลาง", "subsections": [ { "title": "ปุ่ม", "count": 3, "labels": [ "ปุ่มหลัก", "ปุ่มรอง", "พื้นผิวกระจก" ] }, { "title": "ไอคอน", "count": 2, "labels": [ "คอลเลกชันรูปหัวใจ", "วงแหวนเรืองแสง" ] }, { "title": "สวิตช์", "count": 1, "labels": [ "สวิตช์" ] } ], "visual": "ปุ่มสีน้ำเงินทรงกลม, ปุ่มไอคอนนีออน และสวิตช์เรืองแสงบนแผงสีเข้ม" }, { "title": "องค์ประกอบอื่นๆ", "position": "กลางขวา", "count": 4, "labels": [ "ช่องค้นหา", "แท็กใหม่", "แถบความคืบหน้า (72%)", "การ์ด Blue Morpho" ], "visual": "ส่วนประกอบ UI ขนาดเล็กที่ใช้งานได้จริงในรูปแบบการ์ดแนวนอนขนาดกะทัดรัด" }, { "title": "7. UI สำหรับมือถือ", "position": "ล่างซ้าย", "count": 3, "labels": [ "หน้าค้นหา", "หน้าวันนี้พร้อมภาพประกอบผีเสื้อขนาดใหญ่", "หน้าเล่นเสียงพร้อมกราฟรูปคลื่น" ], "visual": "สาม ต้นแบบสมาร์ทโฟนมุมโค้งมนพร้อมอินเทอร์เฟซสีเข้มและเอฟเฟกต์ภาพผีเสื้อสีน้ำเงินม่วง" }, { "title": "8. ตัวอย่างการออกแบบเว็บไซต์", "position": "ด้านล่างขวา", "count": 1, "labels": [ "ชีวิตแห่งแสง" ], "visual": "แบบจำลองหน้า Landing Page บนเดสก์ท็อป รวมถึงภาพหลักรูปผีเสื้อ แถบนำทางด้านบน ปุ่ม Call-to-action สีน้ำเงินสดใส และข้อความภาษาจีน" }, { "title": "9. พื้นหลังภาพ", "position": "ด้านล่างเต็มความกว้าง", "count": 4, "labels": [ "พื้นหลังริบบิ้นไหล 1", "รุ้งหมุนวน", "พื้นหลังริบบิ้นไหล 2", "คริสตัลระเบิดเปล่งประกาย" ], "visual": "ตัวอย่างพื้นหลังสี่เหลี่ยมผืนผ้าสี่แบบในสีม่วง สีน้ำเงิน และสีฟ้า" } } ], "footer": { "count": 1, "text": "ออกแบบโดยคำนึงถึงธรรมชาติ เกิดมาเพื่อประสบการณ์", "center_icon": "ไอคอนผีเสื้อขนาดเล็ก" } }, "art_direction": { "materials": "การเลียนแบบกระจก แสงขอบนีออน การไล่ระดับสีที่ราบเรียบ การสะท้อนแสงที่ละเอียดอ่อน", "colors": "สีฟ้าไฟฟ้า สีคราม สีม่วง สีฟ้าอมเขียว สีขาว", "composition": "เค้าโครงตารางที่สะอาดตาประกอบด้วยส่วนเนื้อหาที่มีหมายเลขเก้าส่วน พื้นที่ว่างสีขาวกว้างขวาง ขอบโค้งมนบาง และภาพผีเสื้อที่โดดเด่น", "render_quality": "มีความประณีตสูง จัดวางอย่างชัดเจน โครงการระบบการออกแบบระดับพรีเมียมสไตล์ Behance" } }