- Wireflow เป็นเครื่องมือออนไลน์ฟรีที่ช่วยสร้างต้นแบบโฟลว์ผู้ใช้ได้อย่างรวดเร็ว โดยไม่ต้องใช้เครื่องมือออกแบบที่ซับซ้อนหรือชุดคิตแยกต่างหาก
- มีกราฟิก/การ์ดมากกว่า 100 รายการ และ โฟลว์ 113 แบบ ให้สามารถนำองค์ประกอบเว็บ การโต้ตอบ และกรณีใช้งานทั่วไปมาประกอบกันได้ทันที
- รองรับการทำงานร่วมกันแบบเรียลไทม์และ แชทสด จึงเชิญเพื่อนร่วมงานและออกแบบโฟลว์ร่วมกันในแอปเดียวกันได้
- สามารถจัดการสิทธิ์การเข้าถึงโปรเจกต์/ห้องเป็นแบบสาธารณะหรือส่วนตัวได้ และมีฟังก์ชันแก้ไขพื้นฐาน เช่น ซูมเข้า/ออก คอนเนกเตอร์ และเลิกทำ
- เป็นต้นแบบในลักษณะไซด์โปรเจกต์ที่สร้างขึ้นภายในเวลาไม่ถึงหนึ่งเดือน แม้จะตรวจสอบไอเดียได้สำเร็จ แต่ยังมี ความเป็นไปได้ที่จะมีบั๊ก อยู่
เครื่องมือสำหรับเริ่มออกแบบโฟลว์ผู้ใช้อย่างรวดเร็ว
- Wireflow เป็นเครื่องมือฟรี ออนไลน์ และโอเพนซอร์สสำหรับสร้างต้นแบบโฟลว์ผู้ใช้
- เป้าหมายคือทำให้สามารถวางแผนโปรเจกต์ระยะแรกและระดมไอเดียได้ โดยไม่ต้องซื้อ Photoshop, Illustrator, ไวร์เฟรม หรือชุดคิตโฟลว์ผู้ใช้
- มีกราฟิก/การ์ดมากกว่า 100 รายการ ครอบคลุมองค์ประกอบเว็บ การโต้ตอบ และกรณีใช้งานทั่วไป
- มีโฟลว์ให้เลือก 113 แบบ โดยเลือกได้จาก 10 หมวดหมู่
- All
- Article
- Blog
- Features
- Gallery
- Header
- Misc
- Multimedia
- Sign In
- Social
การทำงานร่วมกันและการควบคุมการเข้าถึง
- ออกแบบมาเพื่อการทำงานร่วมกันแบบเรียลไทม์ สามารถเชิญเพื่อนร่วมงานมาทำงานในโปรเจกต์เดียวกันได้
- ด้วย แชทสด ในตัว สามารถพูดคุยกับสมาชิกทีมภายในแอปเดียวกันระหว่างออกแบบได้
- สามารถกำหนดสิทธิ์การเข้าถึงในระดับโปรเจกต์หรือห้อง และตั้งค่าให้เป็นสาธารณะ/ส่วนตัวได้
ฟังก์ชันแก้ไขและองค์ประกอบโอเพนซอร์ส
- เครื่องมือแก้ไขพื้นฐานมีฟังก์ชันที่จำเป็นสำหรับการจัดวางและปรับแก้โฟลว์ผู้ใช้อย่างรวดเร็ว
- ซูมเข้า/ออก
- คอนเนกเตอร์และลูกศร
- เลื่อนแคนวาส
- เลิกทำ/ทำซ้ำ
- ลบเฮดเดอร์
- แก้ไขข้อความเฮดเดอร์
- นำไปไว้ด้านหน้า/ส่งไปด้านหลัง
- คีย์ลัดแป้นพิมพ์
- Wireflow เป็นโปรเจกต์ โอเพนซอร์ส อย่างสมบูรณ์ และดูได้บน GitHub
- เทคสแต็กประกอบด้วย Node.js, Meteor.js และ React.js
- Node.js: รันไทม์ JavaScript ที่อิงจากเอนจิน JavaScript ของ Chrome V8
- Meteor.js: แพลตฟอร์มสำหรับสร้างเว็บและแอปมือถือด้วย JavaScript ล้วน
- React.js: ไลบรารี JavaScript แบบ declarative สำหรับสร้างอินเทอร์เฟซผู้ใช้
สถานะโปรเจกต์
- เป็นไซด์โปรเจกต์ที่สร้างขึ้นอย่างรวดเร็วควบคู่ไปกับโปรเจกต์หลักอื่นที่กำลังดำเนินอยู่ในขณะนั้น โดยใช้เวลาพัฒนาน้อยกว่าหนึ่งเดือน
- สถานะปัจจุบันใกล้เคียงกับต้นแบบฟรีที่ตรวจสอบไอเดียแอปที่เรียบง่ายแต่มีประโยชน์แล้ว และอาจยังมีบั๊กอยู่
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
ตอนแรกดูเหมือนจะมีประโยชน์ แต่ไม่แน่ใจว่ายังมีการดูแลรักษาอยู่หรือไม่
main branch บน GitHub ไม่ได้อัปเดตมาหลายปีแล้ว: https://github.com/vanila-io/wireflow
หลังจากนั้นมีการเขียนใหม่ด้วย React แต่ก็ยังไม่มีวิธีเก็บข้อมูล และผู้ดูแลก็มีโปรเจ็กต์อื่นที่ต้องใช้เวลาส่วนใหญ่ด้วย
เลยสงสัยว่ายังมีคนสนใจเครื่องมือแบบนี้อยู่ไหม มีใครอยากมีส่วนร่วมกับ Wireflow เพิ่มไหม หรือข่าวใหม่ ๆ เกี่ยวกับเครื่องมือคล้ายกันจะทำให้คนหันมาสนใจการดูแล Wireflow มากขึ้นหรือเปล่า
นี่เป็นความคิดจากคนหนึ่งในทีมผู้ดูแล Wireflow
กดคลิกแล้วก็เริ่มวาดได้ทันที แถมยังส่งออกเป็นรูปภาพได้ด้วย
ดีมากที่ไม่ต้องล็อกอินหรือสมัครสมาชิก
แต่ฉันไม่แน่ใจว่า “วาด” หมายถึงอะไร และสงสัยว่าจำเป็นต้องมีเครื่องมือวาดภาพจริง ๆ ไหม
มันดูเหมือนชุดเทมเพลตสำหรับทำ sitemap มากกว่า และก็ไม่แน่ใจว่าเป็นเครื่องมือที่ตั้งใจให้ครอบคลุมถึงแพตเทิร์นการออกแบบบนมือถือด้วยหรือไม่
เข้าใจว่าอันนี้ทำขึ้นในเวลาไม่ถึงเดือน แต่ถ้าไปเรียนรู้ Principle(https://principle.app/) สักสองสามวัน ก็น่าจะทำงานที่เหลือให้เสร็จใน 2 สัปดาห์ และสุดท้ายอาจได้โปรโตไทป์ขนาดเต็มที่โต้ตอบได้ด้วย
ดูเท่มาก
ลิงก์วิดีโอ YouTube ใน README บน GitHub เปิดไม่ได้: https://youtu.be/zm0XbLmXtXY
อยากดูวิดีโอเดโมล่าสุด
ค่อนข้างสับสนเล็กน้อยว่าเขาตั้งใจจะปล่อยสิ่งนี้อย่างไร
มันถูกแนะนำเหมือนเป็นเว็บแอปที่ติดตั้งได้ แต่บน Chrome สำหรับ Android มันพังแบบใช้งานไม่ได้เลย
ไม่รู้เหมือนกันว่าฉันคาดหวังอะไรจากการลองเปิดบนมือถือ แต่คิดว่าอย่างน้อยก็ควรใช้งานได้บนแท็บเล็ต
การใช้งานบนมือถืออาจไม่ได้มีไว้แก้ไขโปรเจ็กต์ แต่อาจมีไว้ดูอย่างเดียว และถ้าจะใช้ในงานจริง คุณอาจต้องตรวจทานการเปลี่ยนแปลงระหว่างประชุมและตอบอีเมลเธรดหรือแชต Teams ด้วย
ถ้ายังต้องมานั่งรับมือกับการส่งออก PDF ของแบบแอปฉบับแก้ไขครั้งที่ n อยู่ตลอด นั่นแย่มาก และทุกคนก็เกลียดอะไรแบบนั้น
ผมเคยเขียนบทความเกี่ยวกับแนวคิดในการสร้างผังการไหลแบบนี้จาก wireframe ที่ย่ออย่างชาญฉลาดไว้ก่อนหน้านี้: https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
สักวันหนึ่งก็อยากใส่สิ่งนี้ลงในแอป UX เล็ก ๆ ของผมด้วย(https://www.tinyux.app) แต่ยังไม่ได้ลงมือ
ถ้าทำให้ไม่ว่าจะเริ่มจากมุมมองของ flow, page หรือ component สุดท้ายก็ใช้แหล่งข้อมูลจริงหนึ่งเดียวร่วมกันได้ ก็น่าจะเจ๋งมาก
ตอนที่เคยนำเสนอวิสัยทัศน์และแนวคิดนี้ให้กลุ่ม UX designer ฟัง กระแสตอบรับดีมาก แต่พอผมโชว์ต้นแบบคำสั่งข้อความสไตล์ Vim สำหรับจัดการ wireframe ทุกคนกลับทำหน้างงกันหมด
ความคาดหวังที่คลาดกันขนาดนั้นยังทำให้ผมหัวเราะได้จนถึงทุกวันนี้
มีใครรู้จักโปรเจ็กต์คล้ายกันที่เขียนด้วย Vue.js ไหม?
ในฟีเจอร์ sidebar เขียนว่า
permisionsซึ่งน่าจะสะกดผิดจาก permissionsดูมีประโยชน์มาก
สงสัยว่าจะ fork แล้วทำให้รองรับไอคอนสำหรับการออกแบบเกมได้ง่ายไหม
คุณเพิ่มหน้าจอได้ แต่เป็นกราฟิกพื้นฐานและแก้ได้แค่ข้อความ
คุณเพิ่มความสัมพันธ์ระหว่างหน้าจอได้ด้วย แต่คลิกใช้งานไม่ได้
งั้นมันก็ดูเหมือน sitemap แล้วมีแค่นั้นหรือ?
โปรโตไทป์ user flow คืออะไร?
โดยมากจะอยู่ในรูปแบบความละเอียดต่ำอย่าง wireframe ไม่ใช่งานออกแบบที่เสร็จสมบูรณ์ และคำว่า prototype ก็น่าจะหมายถึงการคลิกไล่ดูได้เหมือน Figma prototype
เช่น ในฟอร์มล็อกอิน คุณอาจแสดงสถานะเริ่มต้น → สถานะผิดพลาด → สถานะกำลังส่ง → สถานะสำเร็จ และสิ่งนี้ก็อาจเรียกว่า “flow การล็อกอินของผู้ใช้”
“It have built in live chat which give you ability to communicate with your team mate and still be in the same app while you collaborating in real-time.”
ไม่ได้จะจับผิดไวยากรณ์ แต่ถ้ามีคนที่เกี่ยวข้องกำลังอ่านอยู่ ก็น่าจะปรับประโยคนี้สักหน่อย