แนวทางการทำงานและกระบวนการ UI
แผนก
สารบัญ
| ส่วนประกอบ | |
|---|---|
| 1 | วัตถุประสงค์ |
| 2 | ขอบเขต |
| 3 | คำจำกัดความ |
| 4 | Operating Model |
| 5 | บทบาทและความรับผิดชอบ |
| 6 | ขั้นตอนการทำงานแบบทีละขั้น |
| 7 | เทมเพลตการ์ด Asana |
| 8 | รายการตรวจสอบการทำงาน UI (สำหรับทีมครีเอทีฟ) |
วัตถุประสงค์
แนวทางนี้นิยามวิธีการที่แผนกครีเอทีฟของ Kiluth ดำเนินงาน UI: การตั้งค่า design system การออกแบบภาพ การปรับปรุงการออกแบบ และการส่งมอบงานไปยังการพัฒนา
| ผลลัพธ์ |
|---|
| งาน UI ถูกดำเนินการอย่างสม่ำเสมอ การส่งมอบงานมีความชัดเจน และหลักฐานการอนุมัติหาได้ง่าย การพัฒนาสามารถเริ่มต้นด้วยสิ่งส่งมอบการออกแบบ UI ที่สมบูรณ์ |
ขอบเขต
แนวทางนี้ครอบคลุมกระบวนการทำงาน UI ตั้งแต่การส่งมอบงาน UX จนถึงการส่งมอบงานไปยังการพัฒนา:
| รวมถึง | |
|---|---|
| 1 | การตั้งค่า design system (การตรวจสอบการออกแบบ พื้นฐาน design system ห้องสมุดคอมโพเนนต์) |
| 2 | การออกแบบภาพ (การสำรวจสไตล์ การเลือกสไตล์ การออกแบบความละเอียดสูง การออกแบบ responsive) |
| 3 | การปรับปรุงการออกแบบ (การทบทวนภายใน การทบทวนผู้เกี่ยวข้อง การทำซ้ำการออกแบบ การอนุมัติการออกแบบ) |
| 4 | การส่งมอบงานการออกแบบ (การจัดระเบียบการออกแบบ design specs การส่งมอบงานการออกแบบไปยัง DEV design QA) |
แนวทางนี้ ไม่ ครอบคลุม:
| ไม่รวมถึง | |
|---|---|
| 1 | การวิจัย UX และ wireframing (ดู แนวทางการทำงานและกระบวนการ UX) |
| 2 | การดำเนินการพัฒนา (ดูแนวทางแผนกเทคโนโลยี) |
| 3 | การวางแผนโครงการและการมอบหมายงาน (ดู แนวทางการผลิตงานและการจัดสรรทรัพยากร) |
คำจำกัดความ
| คำศัพท์ | คำจำกัดความ |
|---|---|
| จุดตรวจสอบ | จุดที่ต้องเสร็จสิ้นก่อนดำเนินการขั้นตอนถัดไป |
| จุดตัดสินใจ | ทางเลือกที่แตกแขนง (เช่น ทำซ้ำ vs. ดำเนินการต่อ) พร้อมผลลัพธ์ที่บันทึกไว้อย่างชัดเจน |
| หลักฐานการอนุมัติ | หลักฐานว่าขั้นตอนได้รับการอนุมัติ (การยืนยันทางอีเมลหรือเอกสารที่ลงนามแล้ว; เอกสารที่ลงนามแล้วจำเป็นสำหรับการตัดสินใจที่เกี่ยวข้องกับสัญญา) |
| Design system | ชุดคอมโพเนนต์ รูปแบบ และแนวทางที่ใช้ซ้ำได้เพื่อรักษาความสอดคล้องทางภาพ (ต่อโครงการ ไม่ได้ใช้ร่วมกัน) |
| Style exploration | การสำรวจทิศทางภาพเบื้องต้น (mood boards หรือการออกแบบหน้าจอหลัก) |
| High-fidelity design | การออกแบบภาพที่สมบูรณ์พร้อมสี ตัวอักษร ระยะห่าง และรายละเอียดภาพ |
| Design specs | คำอธิบายประกอบโดยละเอียดสำหรับระยะห่าง สี ตัวอักษร และ interactions ที่จำเป็นสำหรับการพัฒนา |
| สิ่งส่งมอบ UI | ชุดสิ่งส่งมอบที่สมบูรณ์ที่จำเป็นสำหรับการพัฒนาเพื่อเริ่มต้น (ไฟล์การออกแบบ specs สินทรัพย์ style guide) |
Operating Model
| Operating Model | |
|---|---|
| 1 | Asana เป็นระบบบันทึก สำหรับการติดตามงาน การอนุมัติ และการส่งมอบงาน |
| 2 | ใช้จุดตรวจสอบและจุดตัดสินใจ: ไม่ดำเนินการต่อจนกว่าขั้นตอนก่อนหน้าจะ “เสร็จ” และการแยกทางมีความชัดเจน |
| 3 | ลำดับการส่งมอบงาน: ฝ่ายต้นน้ำกำหนดสิ่งส่งมอบ/เกณฑ์การออก; ฝ่ายปลายน้ำกำหนดการดำเนินการหลังการส่งมอบ |
| ผลลัพธ์ |
|---|
| ทุกช่วงสามารถตอบได้ว่า: สถานะปัจจุบันคืออะไร ใครเป็นเจ้าของ และต้องมีอะไรเพื่อดำเนินการต่อ |
บทบาทและความรับผิดชอบ
| บทบาท | ความรับผิดชอบ |
|---|---|
| UI Designer | ดำเนินงาน UI: การตั้งค่า design system การออกแบบภาพ การปรับปรุง และการส่งมอบงานไปยังการพัฒนา |
| Project Manager (PM) | สร้างงาน UI ระหว่างการประเมินหลังการเปิดโครงการ (พร้อม dependency กับการอนุมัติ UX wireframe) ติดตามความคืบหน้า ประสานงานการทบทวนของผู้เกี่ยวข้อง |
| Account Executive (AE) | ประสานงานการอนุมัติจากลูกค้า รักษาลิงก์หลักฐานการอนุมัติ |
| UX Designer | ให้สิ่งส่งมอบ UX (wireframes, user flows, interaction specs) |
| Development (DEV) | รับสิ่งส่งมอบ UI และดำเนินการพัฒนา |
| ผู้เกี่ยวข้อง | ทบทวนและอนุมัติสิ่งส่งมอบ UI ที่จุดตรวจสอบที่กำหนดไว้ |
ขั้นตอนการทำงานแบบทีละขั้น
Phase 1: Design System Setup
| ขั้นตอน | |
|---|---|
| 1 | การตรวจสอบการออกแบบ (จุดตรวจสอบ): ทบทวนแนวทางแบรนด์ สี ตัวอักษร และคอมโพเนนต์ที่มีอยู่ บันทึกผลการค้นพบ |
| 2 | พื้นฐาน design system (จุดตรวจสอบ): กำหนดหรืออัปเดตชุดสี มาตราส่วนตัวอักษร ระบบระยะห่าง และห้องสมุดไอคอน สร้างเอกสาร design system (ต่อโครงการ ไม่ได้ใช้ร่วมกัน) ลิงก์ใน Asana |
| 3 | ห้องสมุดคอมโพเนนต์ (จุดตรวจสอบ): สร้างคอมโพเนนต์ที่ใช้ซ้ำได้ (ปุ่ม อินพุต การ์ด ฯลฯ) พร้อม variants และ states ลิงก์ห้องสมุดคอมโพเนนต์ใน Asana |
| ผลลัพธ์ |
|---|
| Design system ถูกสร้างขึ้น คอมโพเนนต์ถูกกำหนดไว้ และพื้นฐานภาพพร้อมสำหรับการออกแบบความละเอียดสูง |
Phase 2: Visual Design
| ขั้นตอน | |
|---|---|
| 4 | การสำรวจสไตล์ (จุดตรวจสอบ): สร้างทิศทางสไตล์ 2–3 แบบ (mood boards หรือหน้าจอหลัก) นำเสนอต่อผู้เกี่ยวข้อง ลิงก์การสำรวจใน Asana |
| 5 | การเลือกสไตล์ (จุดตรวจสอบ): เลือกทิศทางตามข้อเสนอแนะจากผู้เกี่ยวข้อง ดำเนินการต่อเมื่อหลักฐานการอนุมัติจากผู้เกี่ยวข้องถูกลิงก์ (หลักฐานการอนุมัติ: [Link]) |
| 6 | การออกแบบความละเอียดสูง (จุดตรวจสอบ): ออกแบบหน้าจอทั้งหมดจาก wireframes ที่อนุมัติแล้ว ใช้ design system อย่างสม่ำเสมอ ลิงก์การออกแบบใน Asana |
| 7 | การออกแบบ responsive (จุดตรวจสอบ): ปรับการออกแบบสำหรับ breakpoints mobile tablet และ desktop ลิงก์การออกแบบ responsive ใน Asana |
| ผลลัพธ์ |
|---|
| ทิศทางการออกแบบภาพได้รับการอนุมัติ หน้าจอทั้งหมดถูกออกแบบแล้ว และ breakpoints responsive ครอบคลุมแล้ว |
Phase 3: Design Refinement
| ขั้นตอน | |
|---|---|
| 8 | การทบทวนภายใน (จุดตรวจสอบ): ทบทวนกับทีมครีเอทีฟ ตรวจสอบความสอดคล้อง การเข้าถึงได้ และการจัดแนวกับแบรนด์ บันทึกข้อเสนอแนะ |
| 9 | การทบทวนผู้เกี่ยวข้อง (จุดตรวจสอบ): นำเสนอการออกแบบต่อผู้เกี่ยวข้อง รวบรวมข้อเสนอแนะและทำซ้ำ ลิงก์บันทึกการทบทวนใน Asana |
| 10 | การทำซ้ำการออกแบบ (จุดตัดสินใจ): อัปเดตการออกแบบตามข้อเสนอแนะ บันทึกการตัดสินใจ: การเปลี่ยนแปลงครั้งใหญ่? → ทำซ้ำและทบทวนซ้ำ / การเปลี่ยนแปลงเล็กน้อย → ดำเนินการต่อสู่การอนุมัติ |
| 11 | การอนุมัติการออกแบบ (จุดตรวจสอบ): การอนุมัติขั้นสุดท้ายจากผู้เกี่ยวข้อง ดำเนินการต่อเมื่อหลักฐานการอนุมัติถูกลิงก์ (หลักฐานการอนุมัติ: [Link]) |
จุดตัดสินใจ: ข้อเสนอแนะจากผู้เกี่ยวข้อง
| ผลลัพธ์ | การดำเนินการ |
|---|---|
| ขอการเปลี่ยนแปลงครั้งใหญ่ | ทำซ้ำการออกแบบ ดำเนินการทบทวนภายในและทบทวนผู้เกี่ยวข้องซ้ำ |
| ขอการเปลี่ยนแปลงเล็กน้อย | ทำการอัปเดตเล็กน้อย ดำเนินการต่อสู่การอนุมัติการออกแบบ |
| อนุมัติ | ดำเนินการต่อสู่การอนุมัติการออกแบบ |
| ผลลัพธ์ |
|---|
| การออกแบบถูกปรับปรุง อนุมัติแล้ว และพร้อมสำหรับการส่งมอบงานไปยังการพัฒนา |
Phase 4: Design Handoff
| ขั้นตอน | |
|---|---|
| 12 | การจัดระเบียบการออกแบบ (จุดตรวจสอบ): จัดระเบียบไฟล์การออกแบบ (การตั้งชื่อ การจัดกลุ่ม คำอธิบายประกอบ) ให้แน่ใจว่าหน้าจอทั้งหมดรวมอยู่ด้วย ลิงก์ไฟล์ที่จัดระเบียบแล้วใน Asana |
| 13 | Design specs (จุดตรวจสอบ): เพิ่มคำอธิบายประกอบสำหรับระยะห่าง สี ตัวอักษร และ interactions ส่งออกสินทรัพย์ (ไอคอน ภาพ) ลิงก์ specs และสินทรัพย์ใน Asana |
| 14 | การส่งมอบงานการออกแบบไปยัง DEV (จุดตรวจสอบ): ส่งมอบชุดสิ่งส่งมอบ UI ที่สมบูรณ์ ลิงก์ใน Asana ดำเนินการต่อเมื่อการพัฒนาเริ่มต้น |
| 15 | Design QA (จุดตรวจสอบ): ทบทวนการออกแบบที่ดำเนินการแล้วเทียบกับ specs บันทึกปัญหาและให้การแก้ไข ลิงก์บันทึก QA ใน Asana |
| ผลลัพธ์ |
|---|
| สิ่งส่งมอบ UI สมบูรณ์ การพัฒนาสามารถเริ่มต้นได้ และ design QA รับประกันว่าการดำเนินการตรงกับการออกแบบ |
เทมเพลตการ์ด Asana
UI Style Exploration Review Request
| เทมเพลตการ์ด Asana | |
|---|---|
| Title | Review UI style exploration: [Client Name] – [Project Title] |
| Assignee | ผู้เกี่ยวข้อง (PM ประสานงาน) |
| Description | กรุณาทบทวนการสำรวจสไตล์ UI เพื่อเลือกทิศทาง: References • Project card: [Link] • UX wireframes: [Link] • UX handoff artifacts: [Link] • Style explorations: [Link] Review focus • การจัดแนวทิศทางภาพ • ความสอดคล้องของแบรนด์ • ความเหมาะสมของประสบการณ์ผู้ใช้ จุดตรวจสอบ ดำเนินการต่อเมื่อทิศทางสไตล์ถูกเลือกและหลักฐานการอนุมัติจากผู้เกี่ยวข้องถูกลิงก์ (หลักฐานการอนุมัติ: [Link]) |
UI Design Sign-Off Request
| เทมเพลตการ์ด Asana | |
|---|---|
| Title | UI design sign-off: [Client Name] – [Project Title] |
| Assignee | ผู้เกี่ยวข้อง (PM ประสานงาน) |
| Description | กรุณาให้การอนุมัติขั้นสุดท้ายสำหรับการออกแบบ UI: References • Project card: [Link] • High-fidelity designs: [Link] • Responsive designs: [Link] • Design system: [Link] Sign-off • หลักฐานการอนุมัติ: [Link] (เก็บ/ลิงก์โดย AE) • คำพูดเสริม (1 บรรทัด): [Quote] หมายเหตุ: หากการอนุมัติการออกแบบส่งผลต่อการตัดสินใจที่เกี่ยวข้องกับสัญญา ให้ใช้เอกสารที่ลงนามแล้ว |
UI Handoff to DEV
| เทมเพลตการ์ด Asana | |
|---|---|
| Title | UI handoff to DEV: [Client Name] – [Project Title] |
| Assignee | ทีมพัฒนา |
| Description | การออกแบบ UI เสร็จสมบูรณ์แล้ว กรุณาเริ่มการพัฒนา: UI handoff artifacts • Design files: [Link] • Design specs: [Link] • Assets (icons, images): [Link] • Style guide: [Link] • Design system: [Link] References • Project card: [Link] • UX handoff artifacts: [Link] • Design sign-off proof: [Link] จุดตรวจสอบ ดำเนินการต่อเมื่อการพัฒนาเริ่มต้น |
รายการตรวจสอบการทำงาน UI (สำหรับทีมครีเอทีฟ)
Design System Setup
| รายการตรวจสอบ | |
|---|---|
| 1 | ☐ การตรวจสอบการออกแบบเสร็จสิ้นแล้ว; ผลการค้นพบถูกบันทึกไว้ |
| 2 | ☐ พื้นฐาน design system ถูกกำหนดไว้ (สี ตัวอักษร ระยะห่าง ไอคอน); ลิงก์ใน Asana |
| 3 | ☐ ห้องสมุดคอมโพเนนต์ถูกสร้างแล้ว; ลิงก์ใน Asana |
Visual Design
| รายการตรวจสอบ | |
|---|---|
| 1 | ☐ การสำรวจสไตล์เสร็จสิ้นแล้ว (2–3 ทิศทาง); ลิงก์ใน Asana |
| 2 | ☐ ทิศทางสไตล์ถูกเลือกแล้ว; หลักฐานการอนุมัติจากผู้เกี่ยวข้องถูกลิงก์ |
| 3 | ☐ การออกแบบความละเอียดสูงถูกสร้างสำหรับหน้าจอทั้งหมด; ลิงก์ใน Asana |
| 4 | ☐ การออกแบบ responsive ถูกสร้างแล้ว (mobile, tablet, desktop); ลิงก์ใน Asana |
Design Refinement
| รายการตรวจสอบ | |
|---|---|
| 1 | ☐ การทบทวนภายในเสร็จสิ้นแล้ว; ข้อเสนอแนะถูกบันทึกไว้ |
| 2 | ☐ การทบทวนผู้เกี่ยวข้องเสร็จสิ้นแล้ว; บันทึกการทบทวนถูกลิงก์ |
| 3 | ☐ การตัดสินใจทำซ้ำการออกแบบถูกบันทึกไว้ (การเปลี่ยนแปลงครั้งใหญ่ถูกทำซ้ำหรือการเปลี่ยนแปลงเล็กน้อยถูกบันทึกไว้) |
| 4 | ☐ การอนุมัติการออกแบบเสร็จสิ้นแล้ว; หลักฐานการอนุมัติถูกลิงก์ |
Design Handoff
| รายการตรวจสอบ | |
|---|---|
| 1 | ☐ ไฟล์การออกแบบถูกจัดระเบียบแล้ว (การตั้งชื่อ การจัดกลุ่ม คำอธิบายประกอบ); ลิงก์ใน Asana |
| 2 | ☐ Design specs เสร็จสิ้นแล้ว (ระยะห่าง สี ตัวอักษร interactions); ลิงก์ใน Asana |
| 3 | ☐ สินทรัพย์ถูกส่งออกแล้ว (ไอคอน ภาพ); ลิงก์ใน Asana |
| 4 | ☐ ชุดสิ่งส่งมอบ UI สมบูรณ์: ไฟล์การออกแบบ specs สินทรัพย์ style guide |
| 5 | ☐ งานส่งมอบ UI ถูกสร้างและมอบหมายให้ทีมพัฒนา |
| 6 | ☐ Design QA เสร็จสิ้นแล้ว; ปัญหาถูกบันทึกไว้และการแก้ไขถูกให้ไว้ |