ออกแบบ Ux Ui | ออกแบบ Ux Un Bon

July 13, 2022, 6:42 pm
โปรด ติดต่อเรา เพื่อขอใบเสนอราคา ตัวอย่างการออกแบบ UX / UI ด้วย UX Designers และ UI Designers In-House ที่ Swiftlet ทำให้เรามีความสามารถในการออกแบบ Web Application และ Mobile Application รวมไปถึงซอฟต์แวร์ เพื่อตอบสนองทุกความต้องการของคุณ และนี่คือตัวอย่างการออกแบบ UX และ UI ที่เราสามารถเปิดเผยต่อสาธารณชนได้ ต้องการสร้าง UX / UI ที่ดีที่สุดสำหรับ Web Apps และ Mobile Application ของคุณ?

ออกแบบ UX UI ตามความต้องการ - Swiftlet Co., Ltd. | Software House

ปัจจุบันนี้ UX และ UI เริ่มเป็นที่รู้จักกันเพิ่มมากขึ้น แต่ก็คงปฏิเสธไม่ได้เลยว่ายังเป็นที่รู้จักกันแค่ในวงการของนักพัฒนาเท่านั้นเลย วันนี้เราเลยอยากจะขอเริ่มอธิบายถึงความแตกต่างระหว่าง UX และ UI แล้วตามด้วยวิธีเริ่มต้น ออกแบบ UX/UI ง่ายๆ เพียงคุณเข้าใจ 4 ขั้นตอน ดังต่อไปนี้? เนื่องจากหลายๆ คนมักจะคิดว่า UX และ UI นั้นคือของคู่กัน คนที่ทำ UX ได้นั้นจะต้องทำ UI ได้ด้วย แต่จริงๆ แล้ว UX (User Experience) และ UI (User Interface) ฟังแค่ชื่อก็มีความต่างกันพอสมควรแล้ว แต่สิ่งที่เหมือนกันก็คือเราต้องทำงานร่วมกับ " ผู้ใช้งาน " ที่เข้ามาใช้งานเว็บไซต์หรือผลิตภัณฑ์ของเรานั่นเอง ความแตกต่างและขั้นตอนการเริ่มต้นออกแบบ UX/UI? ก่อนที่จะไปเริ่ม 4 ขั้นตอน ของการ ออกแบบ UX/UI เราไปทำความเข้าใจกันก่อนดีกว่าว่าแท้จริงแล้ว UX และ UI มันคืออะไรกันแน่ และมีความแตกต่างกันอย่างไร?

"10 Usability Heuristic" เป็นหลักการ 10 ข้อที่ Jakob Nielsen (กูรูด้าน Usability) คิดขึ้นมาเพื่อเป็น Guideline สำหรับการออกแบบ UI ให้มี Usability ที่ดี นักออกแบบ UX/UI Designer สามารถนำหลักการทั้ง 10 ข้อนี้เป็นเกณฑ์ตรวจสอบ UI คร่าว ๆ ว่า UI มีปัญหา Usability ด้านไหน (Effectiveness/ Efficiency/Satisfaction) โดยกระบวนการประเมิณผลโดยใช้หลักการนี้เรียกว่า "Usability Heuristic Evaluation" ในบทความนี้จะพูดถึงหลักการแต่ละข้อว่ามีแนวคิดยังไง และจะเอาไปปรับใช้กับ UI ได้ยังไง Usability คืออะไร? "Usability" เป็นตัวบ่งชี้คุณภาพที่บ่งบอกว่า Product ใช้งานได้ง่ายแค่ไหน "ความยากง่าย" ส่งผลโดยตรงกับความรู้สึกและการตัดสินใจของ User ว่าจะใช้งาน Product นี้ต่อไปหรือไม่ อ่านบทความย้อนหลัง "Usability คืออะไร? " ได้ที่นี่ Usability = Effectiveness (ใช้ได้) ∩ Efficiency (ใช้ง่าย) ∩ Satisfaction (ชอบใช้) 10 Usability Heuristic Principles 1.

สิ่งที่นักออกแบบควรรู้เกี่ยวกับ Golden Ratio (สัดส่วนทองคำ)

หลายคนที่เป็นนักออกแบบ UX/UI คงจะทราบดีว่าการออกแบบให้ระบบดูดีน่าใช้ และไม่สับสน เป็นสิ่งสำคัญและอาจจะเป็นงานหนักงานหนึ่งมาก ๆ แต่บทความนี้จะช่วยให้การออกแบบของคุณดูดีขึ้นมาอีกระดับ ไปดูเทคนิคกันเลย 1. ออกแบบ Call to action รองใหม่ (Secondary CTA) ปกติการออกแบบปุ่มต่าง ๆ ส่วนมากจะเป็นปุ่มใหญ่ ๆ ที่สังเกตได้ง่าย และสะดุดตา แต่การออกแบบปุ่มที่เป็นเพียงข้อความ (text) เพียงอย่างเดียว นอกจากหลีกเลี่ยงการตอบสนองที่เราไม่ต้องการให้ผู้ใช้งานกดแล้ว จะช่วยให้การตอบสนองของผู้ใช้งานนั้นเป็นไปตามที่เราต้องการในแต่ละ flow ได้ราบรื่นและได้ผลลัพธ์ที่น่าพึงพอใจมากขึ้นกว่า 2. ลดการใช้กรอบและเส้นลงบ้าง (Border-less) ถึงแม้ว่าการออกแบบโดยใช้เส้นและกรอบ จะช่วยให้ผู้ใช้สามารถแยกแยะบรรทัด และสัดส่วนที่แบ่งแยกกันได้ง่าย แต่ก็ทำให้การออกแบบนั้นดูยุ่งเหยิงมากขึ้นด้วยเช่นกัน การจัดวางข้อมูลที่เรียบง่ายประกอบกับ UI ที่ไร้เส้นของ จึงไม่ใช่ปัญหาในการใช้งาน แถมยังทำให้การออกแบบดูสวยและสะอาดตามากขึ้นได้ง่าย ๆ 3. การจัดหน้าข้อความและไอคอน (Icon & Text Alignment) การจัดหน้าตัวหนังสือ เป็นเรื่องปกติที่นักออกแบบส่วนใหญ่นั้นต้องทำเป็นประจำอยู่แล้ว แต่บางครั้ง การวางไอคอน (Icon) หัวข้อ และเนื้อหาไปพร้อม ๆ กัน อาจเป็นสิ่งท้าทายในการจัดระเบียบเนื้อหาให้ดูอ่านง่าย ไม่รกสายตา การจัดหน้าจึงควรใช้การวางไอคอนต่าง ๆ เพื่อให้เนื้อหาดูน่าสนใจ อ่านง่าย และเรียบร้อยอีกด้วย 4.
  • ออกแบบ ux ui templates
  • ออกแบบ ux ui คือ
  • Lol nocturne ออก ของ 2
  • ยา predsomed 5 mg brand

Template

User control and freedom Undo อย่าให้ User ต้องเหนื่อยตอนที่อยากจะย้อนกลับเวลากดหรือทำอะไรพลาดในระบบ เราควรออกแบบให้ Web/App มีปุ่ม Back, Undo, Redo เสมอ ตอนที่ User ทำอะไรพลาด UI ควรจะต้องมีทางออกฉุกเฉิน, โชว์วิธีแก้/วิธีย้อนกลับที่ User ทำได้ท้นทีโดยการที่ไม่ต้องผ่านขั้นตอนอะไรมากมาย UI มี dialog undo ให้กดถ้าอยากลาก Card มาผิดอัน ( Source) Gmail มี Function Undo Send ให้ User ใช้ ในกรณีที่ User เผลอกดส่งอีเมลตอนที่ไม่ตั้งใจ ( Source) Git ให้ User กด Amend ได้หากต้องการ Undo Last Commit ( Source) 4. Consistency and standards Platform conventions หน้าตาของ UI ควรออกแบบให้ไปในทิศทางเดียวกัน ถ้าปุ่มที่นึงเป็นยังไง ตอนที่ปุ่มประเภทเดียวกันไปอยู่อีกหน้าก็ควรเป็นแบบเดียวกัน และพยายามอย่าออกแบบ UI พิศดารที่ไม่เคยมีมาก่อนใน platform ไหนเลย ถ้าเป็นไปได้ให้ออกแบบตาม UI พื้นฐานของแต่ละ platform สร้าง Design System เพื่อวาง Guideline ในการออกแบบ UI เพื่อให้การออกแบบไปในทิศทางเดียวกัน ตัวอย่าง Design System ( Source) วาง UI Pattern & Structure เช่น ถ้าเมนูอยู่ด้านซ้าย ควรให้อยู่ซ้ายตลอดทั้งระบบ ถ้าปุ่ม Action อยู่ด้านบนขวา ก็ต้องอยู่บนขวาตลอด การใช้ Pattern ซ้ำ ๆ จะทำให้คนจำได้ว่าอะไรอยู่ตรงไหน 5.

Tutorial

Golden Ratio (สัดส่วนทองคำ) คืออะไร? Golden Ratio (สัดส่วนทองคำ) มาจากการคำนวนทางคณิตศาสตร์เพื่อทำให้งานออกแบบมีสัดส่วนที่งามตามสูตรคำนวณที่คิดค้นโดย เลโอนาร์โด ฟีโบนัชชี ที่ใช้ตัวเลขทางคณิตศาสตร์มาอธิบายความงามงดงามของธรรมชาติ อัตราส่วนของสัดส่วนทองคำจะเท่ากับ 1: 1. 618 แต่หลายคนก็คงยังไม่เข้าใจว่าสัดส่วนทองคำนี้มันคืออะไรกันแน่และทำไมต้องเป็นภาพแบบนีด้วยวันนี้จะมาไขความกระจ่างกันครับ สัดส่วนทองคำนั้นไม่ได้มีแค่รูปแบบเดียวแต่ยังมีหลายรูปแบบเช่น รูปสามเหลี่ยมที่เป็นสัดส่วนทองคำ รูปสามเหลี่ยมหน้าจั่วที่มีด้านเท่าสองข้างเท่ากันซึ่งจะตรงกับอัตราส่วน Golden Ratio เพื่อนๆก็สามารถ สร้าง Golden Ratio (สัดส่วนทองคำ) ได้เองง่ายๆเช่นกันโดยใช้ วงกลมตามภาพซ้อนทับกัน รู้หรือไม่? สัดส่วนทองทำ (Golden Ratio) มีอยู่ทุกที่เพียงแค่เราไม่ได้สังเกตเท่านั้น ไม่ว่าจะเป็น ดอกไม้ สัตว์ ใบหน้ามนุษย์ งานศิลปะระดับโลก หรือ แม้กระทั้งสถาปัตยกรรมดังๆนั้นก็ล้วนแฝงไปด้วย สัดส่วนทองทำ (Golden Ratio) ทั้งนั้น แล้ว สัดส่วนทองทำ (Golden Ratio) กับงานออกแบบละเป็นแบบไหนกันบ้าง? Typography เห็นไหมว่าการวาง Headline ของ กลุ่มข้อความ ขนาดนั้นไม่เท่ากันมีเล็กมีใหญ่ แต่จะขนาดไหนละถึงจะพอดี ลองคำนวนง่ายๆตามภาพคือ Headline ขนาด 20 pt ตัว Body Text ขนาด 12 pt มาหารกันก็จะเท่ากับ 1.

ออกแบบ ux ui patterns

User Experience? งานออกแบบด้านนี้จะเกี่ยวข้องกับทุกกระบวนการที่สินค้าหรือบริการหนึ่งๆ มีปฏิสัมพันธ์กับผู้ใช้ โดยเน้นไปที่การนำสินค้าหรือบริการไปทดลองกับกลุ่มตัวอย่าง ทั้งนี้เพื่อจะเก็บข้อมูลและ? ฟีดแบค? อย่างละเอียดกลับมาพัฒนาตัวสินค้าหรือบริการต่อไป การทดสอบเรื่อง UX นี้ควรทำทั้งก่อนและหลังเปิดตัวสินค้า โดยครอบคลุมทั้งสินค้า/บริการดิจิตอล และสินค้า/บริการทั่วไปด้วย ผลงานของ UX Designer มักออกมาในรูปของ? รายงานการทดสอบ? สินค้าหรือบริการหนึ่งๆ เกิดจากการสังเกต ติดตามผล และการวิเคราะห์ในแต่ละขั้น เพื่อจะตอบคำถามเช่นว่า? ใครใช้?? ใช้ทำอะไร?? ใช้อย่างไร? หรือ? ใช้ในสภาพแวดล้อมไหน? อย่างละเอียด จากนั้นนักออกแบบ UX ก็จะนำข้อมูลเหล่านี้มาจัดลำดับความสำคัญ เพื่อให้เห็นว่าสินค้าหรือบริการนั้นๆ มี? ฟังก์ชั่น? หรือ? ฟีเจอร์? อะไรบ้างที่สำคัญกับกลุ่มเป้าหมาย นำไปสู่การปรับปรุงสินค้า/บริการให้ตรงใจ และแก้ปัญหาได้รวดเร็ซอย่างตรงจุด หนึ่งในเนื้องานหลักที่ UX Designer ต้องทำก็คือ? Usability Testing?

หลายๆคนอาจจะต้องการจะสร้าง User Interface(UI), Mockup ง่ายๆ แต่ไม่มีโปรแกรมที่รองรับการทำแม้แต่โปรแกรมเดียวในเครื่อง ทางออกก็คือ Figma ค่ะ Figma หรือที่เขาเคลมไว้ว่า The collaborative interface design tool เป็น Website และ Application บนเครื่องคอมฯที่สามารถเข้าไปออกแบบงานประเภท UI ได้ทันทีโดยไม่ต้องทำการลงโปรแกรมใดๆ การ Save ข้อมูลก็ไม่กินพื้นที่บนเครื่องของผู้ใช้งานด้วย นับว่าแทบจะมาแทนโปรแกรมอย่าง Sketch หรือ Adobe Xd ในการออกแบบ UI กันเลยทีเดียว แถมยังให้เข้าไป ใช้งานได้ฟรี! สามารถ สร้างได้หลายโปรเจค เชิญผู้อื่นเข้ามาดูหรือรวมแก้ไขไฟล์เดียวกันได้อีกด้วย!