03Aug, 2023
Language blog :
Thai
Share blog : 
03 August, 2023
Thai

ขั้นตอนการออกแบบ UI

By

2 mins read
ขั้นตอนการออกแบบ UI

กระบวนการออกแบบ UI คืออะไร?

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

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

เมื่อถึงเวลาที่โครงการพร้อมสำหรับการออกแบบ UI งานที่เสร็จสิ้นในขั้นตอนก่อนหน้าของกระบวนการคิดเชิงออกแบบ เช่น Empathy, Define และ Ideate เป็นต้น ซึ่งจะต้องมีความสอดคล้องกันในเชิงกลยุทธ์ โดยหมายถึงเราที่เป็นนักออกแบบจะต้องเป็นคนกำหนดทิศทาง และความตั้งใจที่เราต้องการให้หน้าจอเป็นไปตามที่ต้องการและสวยงามน่าใช้งานที่สุด 

 

ขั้นตอนการออกแบบ UI มีอะไรบ้าง?

แม้ว่างานการออกแบบ UI ทุกงานนั้นจะมีความแตกต่างกันไปตามกฎเกณฑ์ ความเหมาะสม แต่โดยทั่วไปแล้วเราสามารถดำเนินการผ่านขั้นตอนได้แก่ 4 ส่วนหลัก ๆ 

  • ทำความเข้าใจตัวงานฝั่ง UX : กระบวนการออกแบบ UI จะเริ่มออกแบบจากผลลัพธ์ของการทำตามขั้นตอน UX เรียบร้อย ซึ่งเราจะต้องตรวจสอบข้อมูลเชิงลึก เหตุผล และการตัดสินใจ ได้แก่ เรื่องราวของผู้ใช้ (User Background/Pain Point), ตัวตนของผู้ใช้ (Persona), แผนที่การเดินทางของผู้ใช้ (User Journey), แผนผังเว็บไซต์ (Sitemap), โฟลว์ผู้ใช้ (User Flow) และอื่น ๆ ตามความเหมาะสมของงาน

  • สร้าง Design System/UI Library : คือการรวบรวมองค์ประกอบทั้งหมดที่จำเป็นในการออกแบบหน้าจอให้แก่ผู้ใช้งาน โดยจะต้องคำนึงถึงสิ่งที่จำเป็นต่อการใช้งานบ่อยครั้ง เช่น แบบอักษร สี ปุ่ม ไอคอน การ์ดไอคอน การจัดวาง และอื่น ๆ อีกมากมาย เพื่อควบคุมคุณภาพของงานให้ออกมาไปในทิศทางเดียวกัน องค์ประกอบทั้งหมดเหล่านี้ที่จำเป็นต่อการเริ่มต้นทำงานและในอนาคตให้ยืดหยุ่น และรับรองทุกการใช้งานพร้อมด้วยอุปกรณ์และแพลตฟอร์มที่จะแสดงผล ไม่ว่าจะเป็นของเว็บไซต์ แอปพลิเคชันทั้งรูปแบบ iOS และ Android ต่างมีกฎเกณฑ์การใช้งานที่มีข้อแตกต่าง และข้อจำกัดที่ไม่เหมือนกัน และสิ่งที่สำคัญคือ Design System จะมาช่วยให้เราสามารถควบคุมคุณภาพของงานได้ดีขึ้น เวลาที่เราต้องทำงานร่วมกับนักออกแบบคนอื่น

  • นำ Component/Element UI ไปใช้ : ในการทำงาน เราจำเป็นที่จะต้องใช้ Design System/UI Library เป็นต้นแบบและแนวทางในการออกแบบงาน User Interface ซึ่งในระหว่างขั้นตอนนี้ก็ยังมีความยืดหยุ่น และสามารถปรับแต่งหรือเพิ่ม Component เข้าไปใน Design System ได้เสมอ

  • กำหนด Transitions/Animation ที่เหมาะสม : การออกแบบแอนิเมชัน/การเคลื่อนไหวเป็นส่วนเล็ก ๆ ที่สำคัญในการออกแบบ UI ในปัจจุบัน ซึ่งจะเป็นส่วนสุดท้ายของการออกแบบ UI เนื่องจากเป็นตัวช่วยเพิ่มลูกเล่นและความน่าสนใจในงานได้เป็นอย่างดี เช่นการโหลดข้อมูล วิธีการเปลี่ยนหน้า ลูกเล่นเวลาผู้ใช้งานกดปุ่ม และอื่น ๆ อีกมากมาย ดังนั้นจึงถือว่าเป็นอีกทักษะหนึ่งที่ถ้าหากนักออกแบบ UI สามารถทำได้ก็จะเป็นทักษะที่ดีในการใช้ออกแบบหน้าจอ

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

 

สามารถศึกษาดูงาน UI ที่ดีได้ที่ไหนบ้าง

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

 

 

Ref.

Written by
Pae
Pae

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

01
March, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
1 March, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
01
March, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
1 March, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
01
March, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
1 March, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.