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

 (wiredjs.com)
4 คะแนน โดย GN⁺ 2024-06-01 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Wired Elements คือชุด องค์ประกอบ UI พื้นฐานสไตล์วาดมือ ที่เหมาะสำหรับใส่ใน wireframe, mockup และ UI ที่ให้ความรู้สึกสนุก
  • แต่ละองค์ประกอบมี ความสุ่ม อยู่ ทำให้แม้เป็นคอมโพเนนต์เดียวกันก็ไม่ดูเหมือนกันทุกประการในแต่ละครั้งที่ render
  • ในเดโมจะแสดงวิธีการทำงานด้วยการใช้คอนโทรล wired-element เพื่อปรับวงกลมสไตล์สเก็ตช์ที่วาดโดย rough.js
  • มี ตัวอย่าง CodeSandbox สำหรับ Vue, Svelte และ React โดย React ใช้ wrapper components แยกต่างหาก
  • วิธีใช้งานและ API ของแต่ละองค์ประกอบดูได้ในเอกสารบน GitHub และสามารถดูองค์ประกอบทั้งหมดได้ใน component showcase

คอมโพเนนต์ UI สไตล์สเก็ตช์

  • Wired Elements คือชุดองค์ประกอบ UI พื้นฐานในสไตล์สเก็ตช์ที่ดูเหมือนวาดด้วยมือ
  • ใช้ได้เมื่อต้องการคงความรู้สึกเหมือนงานที่ยังไม่เสร็จ เช่น wireframe หรือ mockup หรือเมื่อต้องการสร้าง UI ที่มีกลิ่นอายงานวาดมือ
  • แต่ละองค์ประกอบถูกวาดด้วย ความสุ่ม ในระดับที่เพียงพอ ทำให้ในแต่ละครั้งที่ render ไม่ดูเหมือนรูปทรงเดียวกันเป๊ะ ๆ
  • เดโมแบบง่ายคือการใช้คอนโทรล wired-element เพื่อเปลี่ยนวงกลมสไตล์สเก็ตช์ที่วาดด้วย rough.js

ตัวอย่างและเอกสาร

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

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

 
GN⁺ 2024-06-01
ความคิดเห็นจาก Hacker News

  • ดูดีและชวนให้นึกถึงอดีตอย่างประหลาด ฟีดแบ็กอย่างหนึ่งคือผมคาดว่าเวลาสลับเช็กบ็อกซ์แต่ละครั้ง เครื่องหมายถูกจะต่างกันเล็กน้อยเหมือนถูกวาดด้วยมือใหม่ทุกครั้ง
    ถ้าใส่ noise ลงไปนิดหน่อย น่าจะเป็นฟีเจอร์ 2.0 ที่ดี

    • ถ้าใส่ noise หน้าตาจะเปลี่ยนไปทุกครั้งที่เรนเดอร์ ซึ่งก็ไม่แน่ใจว่าดีหรือเปล่า

  • สำหรับงานแบบนี้ Balsamiq Wireframes ดีที่สุด: https://balsamiq.com/wireframes/
    ถ้าต้องเขียนโค้ด ก็จะเสียแนวคิดเรื่องการทำแบบเร็ว ๆ คร่าว ๆ ไป

    • ของแบบนี้อาจมีประโยชน์ในการแสดงให้ลูกค้าเห็นว่าสิ่งที่กำลังดูอยู่ไม่ใช่งานสำเร็จ แต่เป็น โปรโตไทป์ที่ใช้งานได้
      ถ้าสามารถเปลี่ยนดีไซน์ได้เหมือน “napkin look&feel” ของ Swing สมัยก่อน ก็น่าจะเข้ากันกว่า: https://napkinlaf.sourceforge.net/
      แต่บนเว็บ ดูเหมือนแนวคิด “เปลี่ยนดีไซน์ด้วยการเปลี่ยนธีม” จะหายไปนานแล้ว
    • ถ้าอยากทำ wireframe สไตล์วาดมือบนมือถือ มีตัวนี้: https://www.tinyux.app
      เพราะไม่อยากใช้การลากวางบนหน้าจอสัมผัสเล็ก ๆ เลยเลือกใช้ UX ที่ไม่เป็นมาตรฐาน
    • ชอบ https://wireframesketcher.com/ มาก
      ไม่ต้องพึ่งคลาวด์ และ ไลเซนส์ตลอดชีพราคา $99 ผลิตภัณฑ์แบบนี้เริ่มหายากขึ้นเรื่อย ๆ
    • ชอบ Balsamiq สไตล์ wireframe แบบนี้มีประโยชน์เพราะสื่อว่า “นี่เป็นแค่สเก็ตช์” และช่วยเลี่ยงคำถามอย่าง “ฟอนต์ดูไม่ค่อยแน่นอนนะ”
    • Balsamiq เร็วและง่ายจริง ๆ จำได้ว่าเมื่อก่อนมีเครื่องมือ post-processing ที่ทำโดยบุคคลที่สาม แปลง Balsamiq Mockups เป็นโค้ดได้ สงสัยว่ายังอยู่ไหม
      ลองค้นดูแล้ว ชื่อคือ napkee และถูกทำเป็นโอเพนซอร์สแล้ว แต่ดูเหมือนแทบไม่มีใครแตะมาเกือบ 10 ปี

  • ทำให้นึกถึง Balsamiq ที่เคยฮิตเมื่อราว 10 ปีก่อน

    • ยังคิดว่า Balsamiq มีประโยชน์มาก
    • ตอนนี้ก็ยังเป็นเครื่องมือแรกที่ใช้เวลาทำ mockup รู้สึกว่าเป็นเครื่องมือที่ทรงพลังที่สุดในการสื่อ การทำงานของผลิตภัณฑ์ ให้ผู้มีส่วนได้ส่วนเสีย
    • ใช่เลย กำลังจะพูดแบบเดียวกัน แต่เห็นมีคนพูดแล้ว
      ถ้าจำไม่ผิด Peldi ผู้ก่อตั้ง Balsamiq เคยเขียนบล็อกเรื่องนี้ไว้ตอนนั้น ผมก็ชอบเหมือนกัน และยังนึกถึงฟอนต์ Comic Sans ที่ฮิตก่อนหน้านั้นแบบลาง ๆ ด้วย
    • ในบรรดา X window manager ก็เคยมีตัวที่ใส่สกินแบบเดียวกันได้ไม่ใช่หรือ?
    • ใช้แทบทุกวัน

  • เมื่อก่อนเรามักใช้ mockup สไตล์สเก็ตช์ เพื่อให้ผู้ใช้เข้าใจว่านี่ไม่ใช่อินเทอร์เฟซที่ทำงานเสร็จสมบูรณ์แล้ว ตอนนี้ความหมายแบบนั้นหายไปแล้วหรือเปล่า

    • นั่นแหละคือจุดประสงค์ของมัน ใช้ทำซอฟต์แวร์ mockup

  • สำหรับองค์ประกอบที่ให้ความรู้สึกวาดมือ Excalidraw ดีที่สุด: https://excalidraw.com/
    ตกหลุมรัก UX และงานที่อยากทำได้ทันที โดยเฉพาะการทำไดอะแกรมสถาปัตยกรรมและ mockup ความละเอียดต่ำให้เสร็จเร็ว ๆ ข้อมูลทั้งหมดเก็บไว้ในเครื่องผ่านเบราว์เซอร์ จึงทำงานออฟไลน์ได้ง่าย

    • tldraw.com ก็ยอดเยี่ยมเหมือนกัน

  • การพูดคุยก่อนหน้า: https://news.ycombinator.com/item?id=17146451 (650 คะแนน, 121 ความคิดเห็น)

    • เมื่อขยายออกมาจะเป็นดังนี้: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - พฤษภาคม 2018 (120 ความคิดเห็น)
      คิดว่าน่าจะมีเธรดอื่นเกี่ยวกับสิ่งนี้หรือสิ่งที่คล้ายกันมากด้วย ถ้าใครหาเจอสามารถเพิ่มเข้าไปในรายการได้

  • ชอบองค์ประกอบ UI สไตล์สเก็ตช์ แต่ไม่ชอบ ฟอนต์ข้อความสไตล์สเก็ตช์ ฟอนต์ sans-serif ทั่วไปกับ UI สไตล์สเก็ตช์ใช้ร่วมกันทางสไตล์ได้ยากหรือเปล่า?

    • โดยส่วนตัวชอบฟอนต์นะ แต่ฟอนต์ “ลายมือ” แบบนี้มักติดอยู่ใน uncanny valley ของการที่ ดูเหมือนสเก็ตช์แต่เป็นระเบียบเกินไป
      แม้ glyph แต่ละตัวถ้าดูแยก ๆ จะดูเหมือนสเก็ตช์แค่ไหน แต่มันก็ดูเหมือนกันเป๊ะทุกครั้ง
    • ใน showcase มีหลายรายการที่ใช้ฟอนต์ทั่วไป ลองดูเป็นตัวอย่างได้: https://wiredjs.com/showcase
    • ถ้าเป็นฟอนต์ลายมือ อย่างน้อยก็ควรเอียงไปทางขวา

  • ได้แรงบันดาลใจจากโปรเจกต์นี้ จึงทำ VSCode plugin WireText สำหรับสร้าง mockup สไตล์วาดมืออย่างรวดเร็ว
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • ชอบเพราะความสวยงาม น่ารักดี เรื่องว่ามันมีประโยชน์ต่อการรับฟีดแบ็กมากขึ้นไหมอะไรทำนองนั้น ไม่ค่อยสนใจเท่าไร

    • ถ้าต้องการแค่ความรู้สึกทางภาพและไม่ต้องการส่วน JS ก็ใช้ PaperCSS ได้

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

    • ตอนเพิ่งเริ่มทำงานดีไซน์ ผมเคยทำ user testing กับ โปรโตไทป์ความละเอียดต่ำ สำหรับบางคนในทีม customer success
      การนำเสนอด้วยภาพตั้งใจจะสื่อว่าสิ่งที่เราแสดงยังเปลี่ยนแปลงได้ แต่กลับได้ฟีดแบ็กว่า “ชอบความรู้สึกแบบสเก็ตช์มาก” หลังจากนั้นก็เลิกพึ่งพาการนำเสนอแบบนั้นเพื่อบอกขั้นตอนในกระบวนการออกแบบ
    • การใช้สไตล์แบบนี้กับ build เบต้าหรืออัลฟามีเหตุผลอยู่ เพราะ ประเภทของฟีดแบ็ก ที่ได้รับจะเปลี่ยนไป
      นานมาแล้วเคยอ่านบทความเกี่ยวกับ “ทำให้ดูเหมือนยังไม่เสร็จ” น่าจะอยู่ในบริบทของ AWT look and feel และยังมีกราฟสไตล์ xkcd ที่เกี่ยวข้องด้วย: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) และ https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      ถ้าผลิตภัณฑ์ดูเหมือนเสร็จแล้ว ฟีดแบ็กที่ได้รับก็จะตั้งอยู่บนสมมติฐานว่านั่นคืองานสำเร็จแล้ว
      ครั้งหนึ่งตอนทำ logic ภายในด้วย JavaScript ผมเคยพลาดใช้ header ที่ดูดี มันดีกว่า GIF ที่ถูกยืดซึ่งใช้กันอยู่เดิม และยังมี CSS gradient ด้วย
      สิ่งที่อยากตรวจคือ “ลำดับหน้าของ workflow นี้ถูกต้องไหม? มีองค์ประกอบ UI ที่จำเป็นสำหรับฟีเจอร์นี้บนหน้าหรือเปล่า? มีฟีเจอร์อะไรขาดไปไหม?” แต่ฟีดแบ็กที่ได้กลับเป็นเรื่องสีฟ้าและ gradient ควรไล่จากด้านมืดไปด้านสว่างหรือควรกลับกัน
      ค้นต่อไปพบว่า look and feel นั้นคือ https://napkinlaf.sourceforge.net และนำไปสู่บล็อกโพสต์นี้: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...