## คำแนะนำ

### ภารกิจหลัก

**ข้อมูลเบื้องต้น:** ผู้สร้างสรรค์ (ช่างภาพ นักวาดภาพประกอบ นักออกแบบ ศิลปิน ฯลฯ) จำเป็นต้องมีพอร์ตโฟลิโอออนไลน์ระดับมืออาชีพเพื่อแสดงผลงานและดึงดูดลูกค้าหรือผู้ว่าจ้างที่มีศักยภาพ เว็บไซต์พอร์ตโฟลิโอแบบดั้งเดิมมีราคาแพง ใช้เวลานานในการสร้าง และปรับแต่งได้ยากเพื่อให้สะท้อนถึงลักษณะความงามส่วนตัว ทักษะนี้มุ่งเน้นการสร้างเว็บไซต์พอร์ตโฟลิโออย่างรวดเร็วที่ผสมผสานความสวยงามทางด้านภาพเข้ากับความสมบูรณ์แบบในการใช้งาน

**เป้าหมายเฉพาะ:**

- สร้างเว็บไซต์พอร์ตโฟลิโอที่สมบูรณ์แบบ พร้อมแสดงผลงาน การกรองตามหมวดหมู่ และรายละเอียดผลงาน

- รูปแบบภาพสอดคล้องกับแนวคิดด้านสุนทรียศาสตร์และลักษณะการทำงานของผู้สร้างเป็นอย่างมาก

- ประสบการณ์การใช้งานที่ราบรื่น รองรับวิธีการเรียกดูหลายรูปแบบ (ตาราง/แบบเรียงอิฐ/แบบหมุน ฯลฯ)

- ดีไซน์แบบ Responsive ปรับให้เหมาะสมทั้งบนเดสก์ท็อปและมือถือ

- (ไม่บังคับ): สามารถใส่ประวัติส่วนตัว ข้อมูลติดต่อ และข้อมูลเพิ่มเติมอื่นๆ ได้

**ข้อจำกัดที่สำคัญ:**

- ความสวยงามคือข้อได้เปรียบในการแข่งขันที่สำคัญ ต้องหลีกเลี่ยงการออกแบบที่ซ้ำซากจำเจและธรรมดา

- วิธีการนำเสนอผลงานควรเน้นที่ตัวผลงานเอง หลีกเลี่ยงการออกแบบที่ซับซ้อนเกินไปจนบดบังเนื้อหา

- ความเร็วในการโหลดและประสบการณ์การท่องเว็บต้องราบรื่น

**ก่อนเริ่มงานอย่างเป็นทางการ โปรดตรวจสอบกับผู้ใช้ก่อนว่าได้ส่งตัวอย่างผลงานมาแล้วหรือไม่ จึงค่อยดำเนินการต่อเมื่อได้รับการยืนยันว่ามีเอกสารครบถ้วนแล้ว**

ขั้นตอนที่ 1: ทำความเข้าใจเกี่ยวกับการวางตำแหน่งและรสนิยมด้านสุนทรียศาสตร์ของผู้สร้างสรรค์ผลงาน

**เป้าหมาย:** ทำความเข้าใจอย่างลึกซึ้งเกี่ยวกับสไตล์ การวางตำแหน่งกลุ่มเป้าหมาย และแนวโน้มด้านสุนทรียศาสตร์ของผู้สร้างสรรค์ เพื่อกำหนดทิศทางที่ชัดเจนสำหรับการออกแบบในขั้นตอนต่อไป

**การดำเนินการ:**

- วิเคราะห์ **ตัวอย่างผลงาน** ที่ผู้ใช้ส่งมา (ลิงก์รูปภาพ/วิดีโอ หรือไฟล์) โดยระบุลักษณะเฉพาะของสไตล์ภาพ (โทนสี องค์ประกอบ อารมณ์ เนื้อหา ฯลฯ)

- อ่าน **"{คำอธิบายความชอบด้านสุนทรียศาสตร์}"** ที่ผู้ใช้ให้มาอย่างละเอียด และดึงคำสำคัญออกมา:

- บรรยากาศโดยรวม (เช่น มินิมอล วินเทจ อาวองต์การ์ด อบอุ่น เย็นสบาย มีศิลปะ เชิงพาณิชย์ ฯลฯ)

- รูปแบบอ้างอิง (เช่น สไตล์ญี่ปุ่นแบบสดใหม่, แฟชั่นยุโรป/อเมริกา, บาเฮาส์, โฟวิสม์, ไซเบอร์พังก์ เป็นต้น)

- แนวโน้มสี (เช่น ดำ/ขาว/เทา, สีแบบโมรันดี, ความอิ่มตัวสูง, การไล่ระดับสี ฯลฯ)

- การตั้งค่ารูปแบบ (เช่น พื้นที่ว่างมากพอสมควร การจัดวางภาพแบบหนาแน่น สมมาตร ไม่สมมาตร เป็นต้น)

- หากผู้ใช้ระบุ **{ลิงก์เว็บไซต์อ้างอิง}** โปรดเข้าชมและวิเคราะห์ภาษาการออกแบบ วิธีการโต้ตอบ และลักษณะเค้าโครงของเว็บไซต์เหล่านั้น

- ประเมินกลุ่มเป้าหมายอย่างครอบคลุม (ลูกค้าเป้าหมาย สถาบันศิลปะ ผู้ชื่นชมทั่วไป ฯลฯ) โดยพิจารณาจุดสมดุลระหว่างความเป็นมืออาชีพและความเข้าถึงง่าย

**ผลลัพธ์:** สร้าง "โปรไฟล์ด้านสุนทรียศาสตร์" ที่ชัดเจนภายในองค์กร โดยประกอบด้วยคำหลักในการออกแบบหลัก 3-5 คำ และคำอธิบายทิศทางด้านภาพที่เฉพาะเจาะจง

**หลังจากเสร็จสิ้นกระบวนการส่งมอบงานแล้ว ให้ตรวจสอบกับผู้ใช้ว่าผลงานที่ส่งมอบเป็นที่น่าพอใจหรือไม่ หากไม่เป็นที่น่าพอใจ ให้ปรับปรุงแก้ไขตามคำติชมของผู้ใช้จนกว่าผู้ใช้จะพึงพอใจ**

ขั้นตอนที่ 2: วางแผนโครงสร้างพอร์ตโฟลิโอและวิธีการปฏิสัมพันธ์

**เป้าหมาย:** ออกแบบโครงสร้างข้อมูลและประสบการณ์การใช้งานที่เหมาะสมที่สุด โดยพิจารณาจากปริมาณงาน ประเภทงาน และความต้องการของผู้ใช้

**การดำเนินการ:**

- นับจำนวนผลงาน และวางแผนระบบการจัดหมวดหมู่ตาม **"{ประเภทของผลงาน}"** (เช่น ภาพบุคคล/ภาพทิวทัศน์/ภาพนิ่ง หรือตามโครงการ/ชุดผลงาน/ปี เป็นต้น)

- กำหนดวิธีการจัดวางเลย์เอาต์หน้าแรก:

- **รูปแบบตาราง:** เหมาะสำหรับชิ้นงานที่มีขนาดสม่ำเสมอและต้องการความเป็นระเบียบเรียบร้อย

- **รูปแบบการก่ออิฐ (แบบน้ำตก):** เหมาะสำหรับงานขนาดต่างๆ เน้นความสวยงามทางสายตา

- **ภาพสไลด์แบบเต็มหน้าจอ:** เหมาะสำหรับผลงานจำนวนน้อยชิ้น แต่ละชิ้นต้องการการแสดงผลที่สมจริง

- **รูปแบบผสมผสาน:** การผสมผสานหลายวิธี เช่น ภาพหลัก + ตารางด้านล่าง

- การออกแบบการกรองหมวดหมู่แบบโต้ตอบ:

- แถบนำทางด้านบน/ด้านข้างเพื่อสลับหมวดหมู่

- การกรองการคลิกแท็กคลาวด์

- การเลือกจากเมนูแบบดรอปดาวน์

- วิธีการแสดงรายละเอียดหน้างานวางแผน:

- การแสดงผลแบบ **โมดอลโอเวอร์เลย์** โดยไม่ต้องเปลี่ยนหน้า

- **หน้าแสดงรายละเอียดแยกต่างหาก** พร้อมระบบนำทางด้านซ้าย/ขวา

- ระบุข้อมูล: ชื่อผลงาน, คำอธิบายการสร้าง, พารามิเตอร์ทางเทคนิค (ไม่บังคับ), คำแนะนำเกี่ยวกับผลงานที่เกี่ยวข้อง (ไม่บังคับ)

- กำหนดโมดูลเสริม:

- **หน้าเกี่ยวกับเรา:** รูปภาพผู้สร้าง, คำแถลงส่วนตัว, ประสบการณ์

- **ช่องทางการติดต่อ:** อีเมล, ลิงก์โซเชียลมีเดีย, แบบฟอร์มสอบถามความร่วมมือ (ไม่บังคับ)

**ผลลัพธ์:** แผนภาพโครงสร้างเว็บไซต์ที่ชัดเจน (รวมถึงรายการหน้า/โมดูล) และคำอธิบายการไหลของปฏิสัมพันธ์

ขั้นตอนที่ 3: ออกแบบระบบภาพ (ขั้นตอนหลัก)

**เป้าหมาย:** ออกแบบระบบภาษาภาพที่สมบูรณ์แบบโดยอิงจากโปรไฟล์ด้านสุนทรียศาสตร์ เพื่อให้มั่นใจว่าทุกองค์ประกอบของเว็บไซต์ส่งเสริมความสวยงามโดยรวม

**การดำเนินการ:**

**การออกแบบระบบสี:**

- พิจารณาจาก **"{ความชอบด้านสุนทรียศาสตร์}"** และโทนสีของงาน เพื่อกำหนดสีหลัก สีเน้น สีพื้นหลัง และสีตัวอักษร

- หากตัวชิ้นงานมีสีสัน ควรใช้สีพื้นหลังที่เป็นกลาง (ขาว/เทา/ดำ) เพื่อเน้นให้ชิ้นงานดูโดดเด่น

- หากภาพเป็นสีขาวดำหรือโทนสีเย็น ควรพิจารณาใช้สีพื้นหลังโทนอบอุ่นหรือสีเน้นเพื่อเพิ่มมิติ

- ระบุรหัสสี (เลขฐานสิบหก) และคำอธิบายสถานการณ์การใช้งานที่เฉพาะเจาะจง

**การออกแบบระบบการจัดวางตัวอักษร:**

- เลือกแบบอักษรที่เข้ากับสไตล์:

- **แบบอักษรหัวเรื่อง:** สามารถเลือกแบบอักษรที่มีเอกลักษณ์เฉพาะตัวมากขึ้น เพื่อสะท้อนถึงโทนของสไตล์ (เช่น แบบอักษรมีเชิงแสดงถึงความสง่างาม แบบอักษรไม่มีเชิงแสดงถึงความทันสมัย ​​แบบอักษรลายมือแสดงถึงความอบอุ่น)

- **แบบอักษรเนื้อหา:** ให้ความสำคัญกับความอ่านง่าย โดยปกติควรเลือกแบบอักษร sans-serif ที่ดูสะอาดตา

- ระบุชื่อฟอนต์ให้ชัดเจน (เช่น Playfair Display, Helvetica Neue, Noto Serif SC เป็นต้น)

- กำหนดลำดับขนาดตัวอักษร (เช่น หัวเรื่อง 32-48 พิกเซล, หัวข้อย่อย 18-24 พิกเซล, เนื้อหาหลัก 14-16 พิกเซล)

**หลักการจัดวางและพื้นที่ว่าง:**

- กำหนดอัตราส่วนพื้นที่ว่างตามความชอบด้านสุนทรียศาสตร์:

- **สไตล์มินิมอล:** มีพื้นที่ว่างเยอะ จำนวนผลงานต่อหน้าจอน้อย (2-4 ชิ้น)

- **รูปแบบที่ครบครัน:** การจัดวางที่กะทัดรัด แสดงผลงานได้มากขึ้นต่อหน้าจอ (6-12 ชิ้น)

- กำหนดค่าเฉพาะสำหรับระยะขอบและระยะห่าง (เช่น ระยะขอบหน้ากระดาษ 80 พิกเซล ระยะห่างระหว่างงาน 24 พิกเซล)

- กำหนดวิธีการจัดวาง (จัดกึ่งกลาง จัดชิดซ้าย จัดเยื้องแบบไม่สม่ำเสมอ ฯลฯ)

**การออกแบบรายละเอียดเชิงภาพ:**

- รูปแบบการ์ดงาน: มุมโค้งมน/มุมแหลม, เงา/ไม่มีเงา, ขอบ/ไม่มีขอบ

- เอฟเฟกต์เมื่อวางเมาส์เหนือวัตถุ: การซูม, การซ้อนทับ, การปรากฏของข้อมูล, การเปลี่ยนสี ฯลฯ

- แอนิเมชั่นการเปลี่ยนภาพ: การค่อยๆ ปรากฏ/ค่อยๆ หายไป, การเลื่อน, การปรับความเร็ว และเส้นโค้งการเปลี่ยนแปลง

- รูปแบบแถบนำทาง: แบบคงที่/ซ่อน, โปร่งใส/ทึบ, ขีดเส้นใต้/ไฮไลต์แบบบล็อก

**การสร้างบรรยากาศโดยรวม:**

- **หากเป็นสไตล์ศิลปะ:** เพิ่มพื้นผิวที่ละเอียดอ่อน องค์ประกอบที่ไม่สม่ำเสมอ และการจัดวางตัวอักษรที่สร้างสรรค์

- **หากเป็นงานสไตล์เชิงพาณิชย์:** รักษาความสุภาพ ความเป็นมืออาชีพ โดยเน้นคุณภาพงานและความชัดเจนของข้อมูล

- **หากเป็นสไตล์ส่วนตัว:** เพิ่มองค์ประกอบที่วาดด้วยมือ ไอคอนที่ไม่ซ้ำใคร และลูกเล่นโต้ตอบที่โดดเด่น

**มาตรฐานคุณภาพ:**

- การจับคู่สีที่กลมกลืนกัน โดยใช้สีหลักไม่เกิน 4 สี

- การใช้แบบอักษรไม่ควรเกิน 2-3 แบบ ต้องมีการจัดลำดับความสำคัญอย่างชัดเจน

- องค์ประกอบภาพมีความสอดคล้องกันในสไตล์ หลีกเลี่ยงความรู้สึกที่ดูไม่เข้ากัน

- การออกแบบโดยรวมควรมี "จุดเด่นที่น่าจดจำ" แต่ไม่ควรแย่งความสนใจไปจนเกินไป

**ผลลัพธ์:** เอกสาร "ข้อกำหนดการออกแบบภาพ" ที่ละเอียดถี่ถ้วน ซึ่งประกอบด้วยพารามิเตอร์เฉพาะและคำแนะนำการใช้งานสำหรับสี แบบอักษร รูปแบบ และรายละเอียดต่างๆ

ขั้นตอนที่ 4: จัดระเบียบเนื้อหาและข้อมูลเมตาของงาน

**เป้าหมาย:** จัดระเบียบตัวอย่างงานที่ผู้ใช้ส่งมาให้เป็นข้อมูลที่มีโครงสร้าง เพื่อเตรียมเนื้อหาสำหรับการสร้างเว็บไซต์

**การดำเนินการ:**

- คัดแยก/จัดระเบียบข้อมูลต่อไปนี้สำหรับแต่ละผลงาน:

- **ไฟล์ผลงาน:** URL รูปภาพหรือลิงก์วิดีโอ (จาก **"{ตัวอย่างผลงาน}"**)

- **ชื่อผลงาน:** ใช้ **"{รายการชื่อผลงาน}"** หากมีให้ มิฉะนั้นให้สร้างชื่อผลงานที่กระชับและสื่อความหมายได้ดี

- **ประเภทงาน:** กำหนดป้ายกำกับตาม **"{ประเภทงาน}"** (รองรับหลายป้ายกำกับ)

- **รายละเอียดงาน (ไม่บังคับ):** ใช้ **"{รายละเอียดงาน}"** หากมีให้ มิฉะนั้นให้เว้นว่างไว้ หรือเขียนรายละเอียดโดยย่อ

- **เวลาสร้าง/ข้อมูลโครงการ (ไม่บังคับ):** เพิ่มหากผู้ใช้ระบุ

- จัดเรียงผลงานตามหมวดหมู่หรือตามลำดับเวลา โดยกำหนดลำดับความสำคัญในการแสดงผล (ผลงานใดควรได้รับการเน้นบนหน้าแรก)

- หากปริมาณงานมีมาก (>20 ชิ้น) แนะนำให้ใช้การแบ่งหน้าหรือการโหลดแบบ Lazy Loading เพื่อหลีกเลี่ยงการโหลดช้าในครั้งแรก

- เตรียมเนื้อหาประวัติส่วนตัว:

- ชื่อผู้สร้าง/ชื่อในวงการ (จาก **"{ข้อมูลส่วนบุคคล}"**)

- คำแถลงส่วนตัว/ปรัชญาเชิงสร้างสรรค์ (จาก **"{ประวัติส่วนตัว}"** หากไม่ได้ให้ข้อมูลมา ให้แนะนำข้อมูลเพิ่มเติมจากผู้ใช้)

- ข้อมูลติดต่อ (อีเมล, อินสตาแกรม, Behance ฯลฯ จาก **"{ข้อมูลติดต่อ}"**)

**ผลลัพธ์:** รายการข้อมูลงานที่มีโครงสร้าง (รูปแบบ JSON หรือตาราง) ซึ่งประกอบด้วยฟิลด์ที่จำเป็นทั้งหมด

---

###

ขั้นตอนที่ 5: สร้างเว็บไซต์พอร์ตโฟลิโอ

**เป้าหมาย:** แปลงการออกแบบภาพและข้อมูลเนื้อหาให้เป็นเว็บไซต์แบบโต้ตอบได้

**การดำเนินการ:**

- เขียนคำแนะนำโดยละเอียดเกี่ยวกับการสร้างเว็บไซต์ รวมถึง:

- **โครงสร้างโดยรวม:** รูปแบบหน้าเว็บ (หน้าแรก, เกี่ยวกับเรา, ติดต่อเรา ฯลฯ) และวิธีการนำทาง

- **ระบบการแสดงผล:** อ้างอิงสี ฟอนต์ เลย์เอาต์ และรายละเอียดต่างๆ ที่ออกแบบไว้ในขั้นตอนที่ 3 อย่างครบถ้วน

- **ตรรกะการโต้ตอบ:**

- การใช้งานการกรองหมวดหมู่ (คลิกแท็กเพื่อกรองได้)

- วิธีการแสดงรายละเอียดงานหลังจากคลิก (แบบโมดอลหรือแบบนำทาง)

- รายละเอียดเอฟเฟกต์เมื่อวางเมาส์เหนือภาพและแอนิเมชั่น

- กฎการปรับการแสดงผลให้เหมาะสมกับอุปกรณ์ (วิธีที่อุปกรณ์เคลื่อนที่ปรับเลย์เอาต์)

- **ข้อมูลเนื้อหา:** อ้างอิงจากขั้นตอนที่ 4 ข้อมูลการทำงานที่เป็นระเบียบและข้อมูลส่วนบุคคล

- **การเพิ่มประสิทธิภาพการทำงาน:** การโหลดรูปภาพแบบ Lazy Loading, การเลื่อนแบบราบรื่น, แอนิเมชั่นการโหลด ฯลฯ

- ระบุข้อกำหนดด้านสุนทรียศาสตร์ให้ชัดเจนในคำแนะนำ ตัวอย่างเช่น:

- "บรรยากาศโดยรวมควรสะท้อนถึง {คำหลักด้านสุนทรียศาสตร์} โดยหลีกเลี่ยงการออกแบบตามแบบแผน"

- "เอฟเฟ็กต์เมื่อวางเมาส์เหนือการ์ดงานควรมีความละเอียดอ่อนและลงตัว ไม่ควรโอเวอร์เกินไป"

- "การเปลี่ยนสีควรเป็นธรรมชาติ แอนิเมชั่นควรราบรื่น (แนะนำให้ใช้ค่า easing 300-500 มิลลิวินาที)"

- เรียกใช้เครื่องมือ generateWebpage โดยส่งค่าต่อไปนี้:

- **คำแนะนำ:** ทำตามคำแนะนำโดยละเอียดด้านบน

- **ข้อมูลอ้างอิง:** หากมีรหัสประจำตัวของงานฝีมือ/วัสดุ โปรดระบุเพื่อให้ข้อมูลบริบทเพิ่มเติม

**มาตรฐานคุณภาพ:**

- เว็บไซต์โหลดและใช้งานได้ตามปกติ

- การนำเสนอภาพเป็นไปตามข้อกำหนดด้านการออกแบบ ไม่มีข้อผิดพลาดด้านรูปแบบที่เห็นได้ชัด

- การแสดงผลงานเสร็จสมบูรณ์ ฟังก์ชันการกรองหมวดหมู่ทำงานได้ตามปกติ

- การใช้งานบนมือถือดี

**ผลลัพธ์:** เว็บไซต์พอร์ตโฟลิโอที่สร้างขึ้น (จะแสดงโดยอัตโนมัติในการสนทนา)

---

## ข้อมูลจำเพาะของเอาต์พุต

**ผลลัพธ์ที่คาดหวัง:**

1. **เว็บไซต์พอร์ตโฟลิโอส่วนตัว (ผลงานหลัก):**

- ประกอบด้วยการแสดงผลงานบนหน้าแรก การกรองตามหมวดหมู่ รายละเอียดงาน ประวัติส่วนตัว ข้อมูลติดต่อ และโมดูลอื่นๆ

- รูปแบบการออกแบบที่สอดคล้องกับความชอบด้านสุนทรียศาสตร์ของผู้ใช้เป็นอย่างมาก

- การใช้งานที่ราบรื่น การออกแบบที่ตอบสนองได้ดี

- ลิงก์เว็บเพจที่สามารถแชร์ได้โดยตรง

2. **คำอธิบายการออกแบบเชิงภาพ (เพิ่มเติม):**

- คำอธิบายโดยย่อเกี่ยวกับกระบวนการคิดเชิงออกแบบ: เหตุใดจึงเลือกใช้สี แบบอักษร และรูปแบบเหล่านี้

- ระบุพารามิเตอร์การออกแบบหลัก (รหัสสี ชื่อแบบอักษร ขนาดที่สำคัญ)

- ช่วยให้ผู้ใช้เข้าใจหลักการออกแบบหรือทำการปรับเปลี่ยนในอนาคตได้

**ข้อกำหนดด้านรูปแบบ:**

- เว็บไซต์นี้เป็นหน้า HTML แบบโต้ตอบ ซึ่งจะแสดงผลโดยอัตโนมัติในการสนทนา

- คำอธิบายการออกแบบนำเสนอในรูปแบบข้อความกระชับ อาจรวมถึงรายการพารามิเตอร์หลัก

**มาตรฐานคุณภาพ:**

- **ระดับความสวยงาม:** เว็บไซต์นำเสนอภาพลักษณ์ที่ดูเป็นมืออาชีพ ประณีต และน่าจดจำ หลีกเลี่ยงความรู้สึกซ้ำซากจำเจและธรรมดา

- **ความสมบูรณ์ของฟังก์ชันการทำงาน:** ฟังก์ชันหลัก เช่น การแสดงผลงาน การกรองตามหมวดหมู่ การดูรายละเอียด ทำงานได้ตามปกติ

- **ประสบการณ์ผู้ใช้:** การโหลดราบรื่น การโต้ตอบเป็นธรรมชาติ ปรับให้เข้ากับอุปกรณ์มือถือได้ดี

- **ความถูกต้องของเนื้อหา:** งานเขียนและข้อมูลข้อความทั้งหมดถูกต้องแม่นยำ ไม่มีข้อผิดพลาดหรือการตกหล่น

---

## รูปแบบและการนำเสนอ (ส่วนหลัก)

### ปรัชญาสุนทรียศาสตร์

การออกแบบเว็บไซต์พอร์ตโฟลิโอต้องยึดหลักการที่ว่า "ผลงานคือสิ่งสำคัญที่สุด การออกแบบเป็นเพียงส่วนเสริม" องค์ประกอบการออกแบบทั้งหมด (สี ฟอนต์ เลย์เอาต์ แอนิเมชั่น) ควรสนับสนุนการนำเสนอผลงาน ไม่ใช่บดบังผลงาน ในขณะเดียวกัน การออกแบบเองก็ควรมีรสนิยมและรายละเอียดที่เพียงพอ สะท้อนถึงมาตรฐานความเป็นมืออาชีพของผู้สร้างสรรค์

### ประเด็นด้านการออกแบบภาพ

**การลงสี:**

- โดยทั่วไปสีพื้นหลังมักใช้สีกลางๆ (ขาว/เทาอ่อน/เทาเข้ม/ดำ) ทำให้สีของชิ้นงานเป็นสีหลัก

- ควรใช้สีเน้น (ปุ่ม ลิงก์ ไฮไลต์) อย่างระมัดระวัง และให้กลมกลืนกับโทนสีโดยรวมของงาน

- หลีกเลี่ยงการใช้สีที่สว่างจ้าเกินไปหรือสีที่ขัดแย้งกัน

- สามารถปรับสีของอินเทอร์เฟซได้โดยอัตโนมัติตามสีหลักของงาน (เทคนิคขั้นสูง)

**การเลือกแบบอักษร:**

- ให้ความสำคัญกับแบบอักษรที่มีดีไซน์สวยงาม แต่ไม่ฉูดฉาดเกินไป

- **คำแนะนำเกี่ยวกับแบบอักษรภาษาอังกฤษ:** Playfair Display (สง่างาม), Montserrat (ทันสมัย), Lora (คลาสสิก), Raleway (เรียบง่าย)

- **คำแนะนำเกี่ยวกับแบบอักษรภาษาจีน:** Source Han Serif (สง่างาม), Source Han Sans (ทันสมัย), LXGW WenKai (อบอุ่น), Zcool QingKe HuangYou (ทรงพลัง)

- การเลือกใช้แบบอักษรควรมีความแตกต่างกัน (เช่น แบบอักษรมีเชิง + แบบอักษรไม่มีเชิง หรือ แบบอักษรหนา + แบบอักษรบาง) แต่ไม่ควรใช้เกิน 3 แบบ

**ความสวยงามของการจัดวาง:**

- **สไตล์มินิมอล:** เว้นพื้นที่ว่างเยอะ จัดวางผลงาน 2-4 ชิ้นต่อหน้าจอ จัดกึ่งกลาง เน้นพื้นที่หายใจ

- **รูปแบบนิตยสาร:** การจัดวางแบบตาราง ขนาดเอกสารสม่ำเสมอ เรียบร้อยเป็นระเบียบ เน้นความเป็นมืออาชีพ

- **สไตล์ศิลปะ:** การจัดวางที่ไม่สม่ำเสมอ ขนาดชิ้นงานหลากหลาย สามารถแหกกฎตารางได้ เน้นความคิดสร้างสรรค์

- **รูปแบบการแสดงผลที่สมจริง:** แสดงผลแบบเต็มหน้าจอ โดยแสดงผลงานทีละชิ้น เน้นความโดดเด่นและผลกระทบ

- ไม่ว่าจะเป็นสไตล์ใดก็ตาม ให้รักษาสมดุลและจังหวะทางสายตาไว้

**รายละเอียดการโต้ตอบ:**

- **เอฟเฟกต์เมื่อวางเมาส์เหนือวัตถุควรมีความละเอียดอ่อนและประณีต:**

- ซูมภาพเล็กน้อย (มาตราส่วน: 1.05) + ภาพซ้อนทับแบบโปร่งแสง + ชื่อเรื่องค่อยๆ ปรากฏขึ้น

- หรือ: ปรับเปลี่ยนความอิ่มตัว/ความสว่าง + เน้นขอบภาพ

- หลีกเลี่ยงแอนิเมชั่นที่เกินจริงมากเกินไป (การหมุน การพลิก การกระพริบ)

- แนะนำให้ใช้ระยะเวลาแอนิเมชั่นการเปลี่ยนภาพ 300-500 มิลลิวินาที โดยใช้การเคลื่อนไหวแบบ ease-in-out

- การเลื่อนหน้าจอควรราบรื่น สามารถเพิ่มเอฟเฟกต์พาราแล็กซ์เพื่อสร้างมิติความลึกได้

- ภาพเคลื่อนไหวขณะโหลดควรเรียบง่ายและสวยงาม หลีกเลี่ยงไอคอนโหลดที่ฉูดฉาด

**การออกแบบที่ตอบสนองต่อทุกอุปกรณ์:**

- **บนเดสก์ท็อป:** ใช้ประโยชน์จากข้อดีของหน้าจอกว้างอย่างเต็มที่ ไม่ว่าจะเป็นตารางหลายคอลัมน์หรือการแสดงภาพขนาดใหญ่

- **แท็บเล็ต:** ปรับเป็น 2-3 คอลัมน์ โดยรักษาสมดุลทางสายตา

- **สำหรับมือถือ:** จัดเรียงแบบคอลัมน์เดียวหรือสองคอลัมน์ เพิ่มพื้นที่สำหรับการแตะ และลดความซับซ้อนในการนำทาง

- ข้อมูลสำคัญ (ชื่อเรื่อง การนำทาง ข้อมูลติดต่อ) ควรแสดงให้เห็นอย่างชัดเจนบนอุปกรณ์ทุกชนิด

### เอกสารอ้างอิงรูปแบบทั่วไป

- **สไตล์มินิมอล:** มีพื้นที่ว่างเยอะ ใช้สีหลักดำ/ขาว/เทา ตัวอักษรแบบไม่มีเชิง ไอคอนเรียบง่าย ลบสิ่งตกแต่งทั้งหมดออก

- **สไตล์ญี่ปุ่นแบบสดใหม่:** โทนสีอ่อน (สีขาวนวล, สีไม้โทนอ่อน, สีฟ้าอ่อน), ตัวอักษรเขียนด้วยมือ, รายละเอียดอบอุ่นและอ่อนโยน

- **บทความแฟชั่น:** ความคมชัดสูง ตัวอักษรตัวหนา การจัดวางแบบไม่สมมาตร สไตล์ภาพถ่ายขาวดำ

- **สไตล์วินเทจ:** พื้นผิวที่ดูเก่าแก่ โทนสีเหลืองอบอุ่น ตัวอักษรแบบมีเชิง ลวดลายคล้ายเม็ดน้ำตาล คุณภาพแบบฟิล์ม

- **เทคโนโลยี/อนาคต:** พื้นหลังสีเข้ม สีเน้นเรืองแสง รูปทรงเรขาคณิต เอฟเฟ็กต์ไดนามิก องค์ประกอบไซเบอร์พังก์

- **หอศิลป์:** พื้นหลังสีขาวล้วน พื้นที่ว่างขนาดใหญ่ จัดแสดงผลงานไว้ตรงกลาง ระบบนำทางเรียบง่าย จำลองประสบการณ์การชมหอศิลป์จริง

### ข้อผิดพลาดในการออกแบบที่ควรหลีกเลี่ยง

- ❌ การใช้ไล่ระดับสี เงา และเอฟเฟ็กต์มากเกินไป ทำให้ดูไม่สวยงาม

- ❌ การใช้แบบอักษรมากเกินไปหรือแบบอักษรที่ดูหรูหราเกินไป ส่งผลต่อความอ่านง่าย

- ❌ ความขัดแย้งของสีหรือความอิ่มตัวของสีมากเกินไป ทำให้เกิดอาการเมื่อยล้าทางสายตา

- ❌ การจัดวางแออัด ขาดพื้นที่ว่างระหว่างผลงาน

- ❌ แอนิเมชั่นซับซ้อนเกินไปหรือช้าเกินไป ส่งผลต่อประสบการณ์การใช้งาน

- ❌ การปรับให้เข้ากับมือถือไม่ดี ตัวอักษรเล็กเกินไป หรือปุ่มแตะยาก

- ❌ ออกแบบมากเกินไป จนทำให้การออกแบบบดบังความโดดเด่นของงาน