คุณเป็นนักออกแบบ UI ที่มีประสบการณ์ซึ่งยึดมั่นในการออกแบบที่ทันสมัย มินิมอลลิสติก เงา กระจก และสีอ่อน บทบาทของคุณคือสร้าง mockup ระดับมืออาชีพที่สวยงามซึ่งพร้อมส่งมอบตามข้อกำหนดเหล่านี้: <requirements> ## 1. สไตล์โดยรวมและภาษาทางสายตา อินเทอร์เฟซนี้แสดงถึงแดชบอร์ดการซื้อขาย fintech / crypto ระดับพรีเมียมที่ทันสมัยโดยใช้ธีมสีเข้ม ภาษาทางสายตาผสมผสาน **นิวมอร์ฟิซึมแบบนุ่มนวล** และ **สุนทรียศาสตร์ Web3 หรูหรา** ลักษณะหลัก: - ไฮไลต์สีทอง/ส้มอบอุ่น - จานสีเดี่ยวพร้อมเอฟเฟกต์มินิมอลลิสติกและเงา - เลย์เอาต์แบบการ์ดพร้อมความลึกและพื้นหลังที่ละเอียดอ่อน - เส้นขอบน้อยที่สุด การแยกผ่านเงาหรือพื้นหลังสว่าง การรับรู้เป้าหมาย: - ปลอดภัย - เป็นมืออาชีพ - ระดับสูง / ระดับสถาบัน - เหมาะสมที่สุดสำหรับเทรดเดอร์ที่มีประสบการณ์ --- ## 2. โครงสร้างเลย์เอาต์ ### เลย์เอาต์ส่วนกลาง - แดชบอร์ดที่เน้นเดสก์ท็อป - สัดส่วนผลลัพธ์: 3:2 - สามภูมิภาคหลัก: 1. แถบนำทางด้านบน (แนวนอน) 2. การนำทางแถบด้านข้างซ้าย (แนวตั้ง) 3. พื้นที่เนื้อหาหลัก (กริดการ์ดหลายคอลัมน์) ระยะห่างมีมาก ให้ความสำคัญกับความชัดเจนและพื้นที่หายใจทางสายตา --- ## 3. แถบนำทางด้านบน - ความสูง: 72px - ซ้าย: - ข้อความโลโก้แบรนด์ "Mevolut" - "M" ที่มีสไตล์ - ไฮไลต์สีทอง/ส้ม - กลาง: - ลิงก์นำทาง: Dashboard, Security, Referral, Trading Fees, API management - ขวา: - ลิงก์ Order - CTA หลัก: "Deposit" (ปุ่มยาเม็ดสีทอง) - อวาตาร์ผู้ใช้ (วงกลม) - สลับธีม (ไอคอนพระจันทร์) อักษรศิลป์: - sans-serif สะอาด - น้ำหนักปานกลาง - ข้อความหลักสีขาว สถานะไม่ใช้งานสีเทาหรี่ --- ## 4. การนำทางแถบด้านข้างซ้าย - ความกว้าง: 240px - พื้นหลัง: เกือบดำ - รายการนำทางแนวตั้งพร้อมไอคอน: - Dashboard (ใช้งานอยู่) - Security - Referral - Trading Fees - API management - จัดชิดด้านล่าง: - Settings รายการที่ใช้งานอยู่: - ไฮไลต์พื้นหลังที่ละเอียดอ่อน - เฉดสีพื้นหลังเล็กน้อย - คอนเทนเนอร์มุมโค้ง ไอคอน: - สไตล์เค้าร่าง - ไฮไลต์สีทองในสถานะใช้งานอยู่ --- ## 5. พื้นที่เนื้อหาหลัก ### 5.1 การ์ดภาพรวมผู้ใช้ - การ์ดมุมโค้งขนาดใหญ่ที่ด้านบน - ซ้าย: - อวาตาร์วงกลม - ข้อความทักทาย ("สวัสดี...") - ชื่อผู้ใช้ - บล็อกข้อมูลแบบอินไลน์: - UID (ไอคอนคัดลอก) - สถานะการยืนยันตัวตน - ระดับความปลอดภัย - เขตเวลา - การประทับเวลาเข้าสู่ระบบครั้งล่าสุด - ขวา: - สลับ "ซ่อนข้อมูล" สไตล์: - เงาด้านในที่ละเอียดอ่อน --- ### 5.2 การ์ดฝาก / ซื้อ - การ์ดขนาดกลาง - ข้อความชื่อเรื่องอธิบายตัวเลือกการฝาก - แถวการดำเนินการสองแถว: - ฝาก (ดอลลาร์หรือ crypto) - ซื้อหุ้น (สกุลเงินท้องถิ่น) - แต่ละแถว: - ไอคอน - ป้ายกำกับ - ปุ่มดำเนินการลูกศร (ไฮไลต์สีทอง) --- ### 5.3 การ์ดสินทรัพย์รวม - แสดงยอดเงิน USD และเทียบเท่า USD - สัญลักษณ์ดอลลาร์ขนาดใหญ่จางในพื้นหลัง - แท็บการดำเนินการ: - ซื้อหุ้น - ฝาก - ถอน - ค่าตัวเลขมีขนาดใหญ่ --- ### 5.4 การ์ดระดับ VIP - แสดงระดับ VIP ปัจจุบัน - อัตราค่าธรรมเนียม Spot และ Futures - แถบความคืบหน้าสำหรับการถือครองโทเค็น - ลิงก์ "ดูเพิ่มเติม" แถบความคืบหน้า: - มุมโค้ง - แทร็กพื้นหลังสีเข้ม --- ### 5.5 ตารางการถือครองปัจจุบัน - การ์ดที่มีเลย์เอาต์ตาราง - คอลัมน์: - เหรียญ (ไอคอน + ชื่อ) - ราคา - การเปลี่ยนแปลง 24 ชม. - แนวโน้ม 4 ชม. (sparkline) - การดำเนินการ (ฝาก, ถอน, ซื้อขาย) Sparklines: - สีเขียวสำหรับแนวโน้มบวก - สีแดงสำหรับแนวโน้มลบ โฮเวอร์: - ไฮไลต์พื้นหลังที่ละเอียดอ่อนต่อแถว --- ### 5.6 การ์ดโปรแกรมพันธมิตร - การ์ดโปรโมชัน - ภาพประกอบเหรียญทอง - คำอธิบายสั้นๆ และปุ่ม CTA ("สมัครเลย") --- ### 5.7 การ์ดข้อมูล / ข่าวสาร - รายการประกาศแนวตั้ง - พาดหัวข่าว + การประทับเวลา - ลิงก์ "ดูเพิ่มเติม" ที่ด้านบน --- ## 6. จานสี - พื้นหลังหลัก: สีถ่านเข้ม / ดำ - พื้นผิวการ์ด: สว่างเล็กน้อย - สีเน้น: ทองอบอุ่น - ลำดับชั้นข้อความ: - ขาว (หลัก) - เทาหรี่ (รอง) - เทาเข้ม (ปิดใช้งาน) - สีสถานะ: - เขียวสำหรับบวก - แดงสำหรับลบ --- ## 7. เอฟเฟกต์และการโต้ตอบ - มุมโค้งทั่ว (sm) # Design tokens: { // คำนิยามธีมส่วนกลาง "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // การวัดและโครงสร้างเลย์เอาต์ "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // ระบบสี "colors": { "background": "#0B0D10", // พื้นหลังแอปหลัก "primaryAccent": "#F5A623", // ไฮไลต์สีทอง/ส้ม "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // ระดับอักษรศิลป์ "typography": { "fontFamily": "SF Pro, system-ui, sans-serif", "weights": { "heading": 600, "body": 400, "numeric": 500 }, "sizes": { "h1": 24, "h2": 20, "h3": 16, "body": 14, "caption": 12 } }, // ส่วนประกอบ UI หลัก "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "none", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "transparent", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "outline" }, "table": { "rowHeight": 56, "divider": "subtle", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // ระบบไอคอน "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
