UX กับ UI ต่างกันยังไง

UX กับ UI

คนจำนวนไม่น้อยอาจจะยังคงสงสัยในความเป็น UX และ UI บ้างคนก็คิดว่าเป็นสิ่งเดียวกัน เหมือนกัน แต่จริงๆ แล้ว UX และ UI นี้มีความแตกต่างกัน รวมทั้งสื่อความหมายที่ไม่เหมือนกันด้วย พวกเราบางทีก็อาจจะมองดูจำต้องแต่ว่าชื่อของมันแล้ว นี่ก็คือความไม่เหมือนที่ชี้ให้เห็นตั้งแต่ต้นเรื่องจริงพวกเราน่าจะสงสัยในเรื่องที่ว่ามันมีความไม่เหมือนกันอยู่แล้วต่างหาก วันนี้ ทำเว็บหาดใหญ่ Hatyai Application พามาเจอความต่างของ UX รวมทั้ง UI ให้เยอะขึ้นเรื่อยๆ มีอะไรบ้างมาดูกันเลย

 

1. UX ไม่ใช่ UI

UI ไม่ใช่ UX และ UI ก็ไม่ใช่ UX แต่ว่าสองสิ่งนี้ เป็นสิ่งที่คู่กันมาจนถึงทำให้ใครก็ช่างที่มีความรู้สึกว่าผู้ที่ทำ UX ได้ จึงควรทำ UI ได้ด้วย ความเป็นจริงแล้วนั้นความหมายของUX = User Experience Design โน่นเป็นศาสตร์ที่ว่าด้วยประสบการณ์ของผู้ใช้งาน การที่ทำให้ผู้ใช้งานได้รับความสบาย แล้วก็ตอบปัญหาการใช้แรงงานเยอะขึ้นเรื่อยๆ ส่วนUI = User Interface Design โน่นเป็นศาสตร์ที่มาทำให้UX นั้นมีความงามและก็บริบูรณ์เพิ่มมากขึ้น อาทิเช่น การจัดส่วนประกอบต่างๆสี ขนาดตัวเขียน ให้มีความสวยงามมีเอกลักษณ์ ใช้งานได้อย่างงาถาง


2. UX 
สร้างสิ่งที่เป็นประโยชน์ / UI สร้างสิ่งสวย

ของสองสิ่งที่ถูกทำโดย UX และก็ UI กล่าวอีกนัยหนึ่งUX จะเป็นสิ่งที่ถูกผลิตขึ้นให้มีคุณประโยชน์ ตอบปัญหาผู้ใช้งานเยอะที่สุด และก็ UI เป็นการผลิตสิ่งซึ่งมีแต่ความสวยเพียงแค่นั้น ด้วยเหตุนั้นทั้งคู่สิ่งนี้ควรจะที่จะจำต้องอยู่ร่วมกันเพื่อของสิ่งนั้นตอบปัญหาการใช้แรงงานของผู้ใช้งานรวมทั้งมีความงดงามที่เพิ่มความจรรโลงใจรวมทั้งกระตุ้นให้มีความต้องการที่จะใช้งานมากเพิ่มขึ้น


3. 
วิธีการทำงานที่ผิดแผกแตกต่าง

UX ค้นหาปัญหา เก็บข้อมูล พินิจพิจารณาข้อมูลที่ได้มา เรียบเรียงออกมาเป็น Wireframe
UI 
รับ Wireframe จาก UX > นำข้อมูลมาพินิจพิจารณา >ตีปัญหาออกมาเป็นภาพ คิดถึงความเป็น Mood & Tone ของ Product


4. 
เครื่องมือในการปฏิบัติงาน

UX นั้นจะสร้าง Wireframe เป็นการวางองค์ประกอบแล้วก็รายละเอียดด้านใน Product
Prototype 
โปรแกรมทำ Wireframe ตัวนี้มีทั้งยังบนWindows / Mac OS โดยแบ่งเป็นเวอร์ชั่นฟรี กับเวอร์ชั่นเสียเงินเสียทอง 
Pencil Project 
โปรแกรมทำ Wireframe ใช้ฟรีมีอีกทั้งบน Windows / Mac OS
Cacoo Web App 
สำหรับทำ Diagram, Wireframeออนไลน์ โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า 
JumpChart Web App 
สำหรับทำ Wireframe Onlineที่เค้าหน้าเรียบง่าย โดย Account ฟรีจะสร้าง Wireframeได้จำกัดหน้า 
FrameBox 
เป็น Web Application ที่เหมาะกับทำWireframe มีฟีพบร์น้อย แม้กระนั้นใช้ฟรี เมื่อทำสร็จส่งลิงค์ให้ลูกค้าได้ในทันที
iPlotz 
นั้นเป็น Web Application สำหรับสร้างWireframe ออนไลน์ที่มองมีชีวิตชีวากว่าตัวอื่น สามารถใช้งานได้ฟรี แม้กระนั้นจะจำกัดหน้าสำหรับเพื่อการใช้งาน
WireframeCC 
เป็น Web Application สำหรับทำWireframe กล้วยๆมีทั้งยังขนาด Desktop, Tablet, Mobile ให้พวกเราเลือกใช้งานได้ตามสิ่งที่ต้องการ

UI จะเป็นการนำ Wireframe มาต่อยอดกระเป๋าน Interface
Sketch 
เป็นโปรแกรมที่มีไว้สำหรับดีไซน์ Interface โดยยิ่งไปกว่านั้น มีเครื่องไม้เครื่องมือการใช้แรงงานที่ครบสมบูรณ์ กับ Plug in ล้นหลาม แต่ขณะนี้ Sketch รองรับเพียงแค่ Mac OS แค่นั้น
Adobe XD 
เป็นโปรแกรมในเครือของ Adobe ที่สร้างขึ้นเพื่อวางแบบ UX รวมทั้ง UI สามารถอัพโหลดไฟล์งานขึ้นบนเว็บและสามารถทดสอบเล่นเป็น Prototype ได้อีกด้วย
Zeplin 
เป็นอีกหนึ่งโปรแกรมที่เอาไว้ใช้งานคู่กับ Sketchสามารถส่งต่องานวางแบบงามของพวกเราให้กับกลุ่มพัฒนาต่อได้อย่างสุขสบาย เพราะเหตุว่า Zeplin นั้นจะเจาะจงตำแหน่งการจัดวางส่วนประกอบทุกๆอย่างเป็นPixel แล้วก็ยังสามารถกำหนดฟอนต์ หรือค่าสีที่พวกเราใช้ให้ถี่ถ้วน
Webflow 
เป็นอีกหนึ่งตัวช่วยที่แสนสบาย ซึ่งสามารถให้ดีไซน์เนอร์ทั้งหลายแหล่วางแบบ Interface ของตนได้อย่างสะดวก รองรับไปถึง Responsive รวมทั้งยังไม่ยุ่งยากต่อการส่งต่อให้กับกลุ่มปรับปรุงอีกด้วย
Hype 
โปรแกรมสำหรับเพื่อการสร้าง Interactive Website แสนบันเทิงใจ คล้ายกับ Adobe After Effect แม้กระนั้นสามารถนำขึ้นไปสู่เว็บได้ และก็ยังรองรับ HTML5ได้อีกด้วย

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

 

ขอบคุณข้อมูลจาก wynnsoftstudio.com

__________________________________________________________

อ่านบทความเพิ่มเติม hatyaiapp.co.th/บทความแอปพลิเคชัน
รับทำแอปพลิเคชัน รับทำเว็บไซต์ รับทำเว็บแอปพลิเคชัน รองรับทุกอุปกรณ์

 

 

By |2019-03-25T15:35:35+00:00มีนาคม 25th, 2019|