องค์ประกอบ UI สไตล์สเก็ตช์วาดด้วยมือ

 (wiredjs.com)
4 คะแนน โดย GN⁺ 2024-06-01 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

Wired Elements

ภาพรวม

  • Wired Elements เป็นไลบรารีที่ให้ชุดองค์ประกอบ UI ในสไตล์สเก็ตช์เหมือนวาดด้วยมือ
  • สามารถใช้สำหรับ wireframe, mockup หรือสไตล์วาดมือสนุก ๆ ได้
  • องค์ประกอบต่าง ๆ ถูกวาดโดยมีความสุ่มเล็กน้อย ทำให้การเรนเดอร์สองครั้งไม่เหมือนกัน

เดโม

  • เดโมแบบง่าย: มีตัวอย่างการเปลี่ยนวงกลมสเก็ตช์ที่วาดด้วย rough.js ให้เป็นคอนโทรล wired-element

ไลฟ์เดโม

  • ลองใช้ wired-elements แบบเรียลไทม์ใน Sandbox:
    • Vanilla JS: ใช้ wired-elements ได้ด้วย JavaScript พื้นฐาน
    • Vue: ใช้ wired-elements ได้ในเฟรมเวิร์ก Vue
    • Svelte: ใช้ wired-elements ได้ในเฟรมเวิร์ก Svelte
    • React: ใช้ wired-elements ได้ผ่าน wrapper component ของ React

เอกสาร

  • วิธีใช้งาน: ดูวิธีใช้ wired-elements ได้จากหน้า GitHub
  • เอกสาร API: ดู API ขององค์ประกอบแต่ละตัวได้จากหน้าเอกสาร

องค์ประกอบ

  • มีโชว์เคสองค์ประกอบของ wired ทั้งหมดให้ดู

เครดิต

  • wired-elements ถูกสร้างขึ้นด้วย RoughJS และ Lit

การสนับสนุนโปรเจกต์

  • สามารถสนับสนุนการพัฒนาโปรเจกต์ได้ผ่าน Open Collective หรือ GitHub

ใบอนุญาต

  • ใบอนุญาต MIT (c) Preet Shihn

ความเห็นของ GN⁺

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

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-06-01
ความคิดเห็นจาก Hacker News
  • Pencil and paper: สามารถให้ความรู้สึกเหมือนสเก็ตช์วาดด้วยมือได้โดยไม่ต้องเขียนโค้ด
  • Balsamiq Wireframes: ถูกแนะนำว่าเป็นเครื่องมือที่มีประโยชน์สำหรับการทำม็อกอัปอย่างรวดเร็วและเรียบง่าย
  • การเขียนโค้ด: ไม่สอดคล้องกับจุดประสงค์ของการทำม็อกอัปที่รวดเร็วและเรียบง่าย
  • ฟีดแบ็กด้านดีไซน์: น่าจะดีถ้าทุกครั้งที่สลับเช็กบ็อกซ์จะให้ความรู้สึกเหมือนถูกวาดใหม่ด้วยมือ
  • WireText: ได้แรงบันดาลใจจากปลั๊กอิน VSCode ที่ช่วยสร้างม็อกอัปสไตล์วาดด้วยมือได้อย่างรวดเร็ว
  • องค์ประกอบ UI แบบสเก็ตช์: องค์ประกอบ UI สไตล์สเก็ตช์นั้นดี แต่ฟอนต์สเก็ตช์ไม่ค่อยดีนัก ฟอนต์ sans-serif ทั่วไปกับ UI แบบสเก็ตช์เข้ากันไม่ค่อยได้ในเชิงสไตล์
  • ชวนให้นึกถึง Balsamiq: ทำให้นึกถึง Balsamiq ที่เคยฮิตเมื่อราว 10 ปีก่อน
  • เหตุผลที่ใช้สเก็ตช์ม็อกอัป: ใช้เพื่อให้ผู้ใช้เข้าใจว่านี่ยังไม่ใช่อินเทอร์เฟซที่เสร็จสมบูรณ์
  • การใช้กับผลิตภัณฑ์จริง: อยากใช้สไตล์นี้กับผลิตภัณฑ์จริงหรือเวอร์ชันเบต้า แต่ดูเหมือนว่าจะมีงานเพิ่มมากเกินไป
  • แนะนำ DoodleCSS: น่าจะชอบ DoodleCSS ด้วย
  • rough.js: เป็นเครื่องมือที่ยอดเยี่ยม และถูกใช้อยู่ใน excalidraw ด้วย