OrkasOrkas
ดาวน์โหลด GitHub
UIDesigner

นำบริบทของผลิตภัณฑ์มา
รับอินเทอร์เฟซที่ตรวจสอบ แก้ไข และส่งต่อได้

เริ่มจากเป้าหมายผลิตภัณฑ์ PRD หน้าจอปัจจุบัน ภาพหน้าจอ ข้อมูล Figma ที่อ่านได้ หรือข้อมูลอ้างอิงแบรนด์ UIDesigner สร้างชิ้นงานที่ใช้ HTML เป็นหลัก พร้อมพฤติกรรมการปรับตามขนาดหน้าจอ สถานะ การเข้าถึงสำหรับทุกคน และแอสเซ็ตที่ผลิตภัณฑ์ต้องการ

เริ่มด้วย
เป้าหมายผลิตภัณฑ์ PRD หน้าจอปัจจุบัน ภาพหน้าจอ ข้อมูล Figma ที่อ่านได้ หรือข้อมูลอ้างอิงแบรนด์
จบด้วย
อินเทอร์เฟซที่แก้ไขได้และใช้ HTML เป็นหลัก พร้อมสถานะ แอสเซ็ต และบันทึกส่งมอบงาน
ลองทำตาม

ออกแบบแดชบอร์ดปฏิบัติการ

คัดลอก วางลงในช่องป้อนข้อมูลของ Orkas แล้วเริ่มลองใช้

ตัวอย่างคำขอ

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

สิ่งที่คุณจะได้รับ

อินเทอร์เฟซมาก่อน ตามด้วยข้อสรุปเรื่องสถานะและชุดส่งมอบงาน

ผลลัพธ์ตรวจสอบและแก้ไขได้ โดยระบุพฤติกรรมการปรับตามขนาดหน้าจอและสถานะผลิตภัณฑ์ไว้อย่างชัดเจน

INTERFACE

ชิ้นงาน HTML ที่แก้ไขได้

อินเทอร์เฟซที่ปรับตามขนาดหน้าจอ ซึ่งคุณตรวจสอบ คลิกสำรวจ และแก้ไขได้

operations-dashboard.html
STATES

บันทึกสถานะผลิตภัณฑ์

บันทึกสถานะกำลังโหลด ไม่มีข้อมูล ข้อผิดพลาด สิทธิ์ และพฤติกรรมการปรับตามขนาดหน้าจอไว้ด้วยกัน

interface-states.md
HANDOFF

การส่งมอบให้ทีมวิศวกรรม

จัดชุดแอสเซ็ต ข้อสรุปด้านการเข้าถึงสำหรับทุกคน และบันทึกการพัฒนาสำหรับทีมวิศวกรรม

ui-handoff.zip
กระบวนการโดยละเอียด

ตรวจย้อนแหล่งที่มา ออกแบบลำดับการใช้งาน ทดสอบสถานะ และจัดชุดส่งมอบ

01

ระบุบริบทผลิตภัณฑ์

ส่งเป้าหมาย ผู้ใช้ PRD หน้าจอปัจจุบัน เนื้อหา Figma หรือข้อมูลอ้างอิงแบรนด์

02

ยืนยันโครงสร้าง

ตรวจทานเวิร์กโฟลว์ ลำดับชั้นข้อมูล คอมโพเนนต์ และสถานะขณะทำงานที่จำเป็น

03

ตรวจสอบชิ้นงาน

ใช้ผลลัพธ์ HTML ที่แก้ไขได้เพื่อตรวจทานเลย์เอาต์ พฤติกรรม การปรับตามขนาดหน้าจอ และเนื้อหา

04

จัดชุดส่งมอบ

ส่งมอบแอสเซ็ต บันทึกสถานะ ข้อสรุปด้านการเข้าถึงสำหรับทุกคน และคำแนะนำการพัฒนา

เริ่มงานนี้

ลองกรณีใช้งานนี้ใน Orkas

ฟรี เป็นโอเพนซอร์ส และทำงานบนเครื่องของคุณ

ดาวน์โหลด Orkas — ฟรี
FAQ

คำถามเกี่ยวกับการออกแบบ UI

คำตอบที่พบบ่อยเกี่ยวกับข้อมูลต้นทาง ชิ้นงานที่แก้ไขได้ และการส่งมอบให้ทีมวิศวกรรม

UIDesigner ส่งมอบอะไร?

ชิ้นงานอินเทอร์เฟซที่แก้ไขได้และใช้ HTML เป็นหลัก พร้อมพฤติกรรมการปรับตามขนาดหน้าจอ สถานะผลิตภัณฑ์ ข้อสรุปด้านการเข้าถึงสำหรับทุกคน แอสเซ็ต และบันทึกส่งมอบงานตามข้อมูลต้นทางของคุณ

ทำงานจาก Figma หรือหน้าจอที่มีอยู่ได้ไหม?

ได้ สามารถใช้ข้อมูล Figma ที่อ่านได้ ภาพหน้าจอ หน้าจอปัจจุบัน เว็บไซต์ที่มีอยู่ PRD และข้อมูลอ้างอิงแบรนด์ พร้อมบันทึกว่าแต่ละการตัดสินใจอ้างอิงจากแหล่งใด

พัฒนาฟีเจอร์สำหรับใช้งานจริงให้ด้วยไหม?

UIDesigner เน้นชิ้นงานอินเทอร์เฟซและการส่งมอบงาน ส่วน ProductDeveloper สามารถนำแบบที่อนุมัติแล้วเข้าสู่คลังโค้ด พัฒนาจริง รันทดสอบ และให้หลักฐานการตรวจสอบ

พร้อมเมื่อคุณพร้อม

เปลี่ยนบรีฟผลิตภัณฑ์ถัดไปให้เป็นส่วนติดต่อผู้ใช้ที่ตรวจทานได้

ฟรี เป็นโอเพนซอร์ส และทำงานบนเครื่องของคุณ