UI UX

อะไรคือสิ่งที่ UX ในปี 1989 สอนเรา?

อะไรคือสิ่งสำคัญในบริบทของผู้ใช้เมื่อออกแบบผลิตภัณฑ์ที่น่าสนใจ? ผู้เขียนขอพาพวกคุณกลับไปในยุค 1989 ก่อนที่จะมีไอโฟน เกม ออฟ โทรน และเน็ตฟลิกซ์ ในยุคนั้นมีบริษัทใหญ่ 3 บริษัทที่ออกเกมคอนโซล ได้แก่ นินเทนโด เซก้า และอาตาริ ก่อนหน้าที่จะมีการออกเกมคอนโซล เด็กเล็กๆ มักออกไปเล่นนอกบ้าน และผู้ใหญ่นิยมอ่านหนังสือและพูดคุยกันเกี่ยวกับคนที่นั่งอยู่ถัดไป นินเทนโดขายเกมบอย เซก้าขายเกมเกียร์ และอาตาริขายลิงซ์ ซึ่งเกมเกียร์และลิงซ์เป็นจอภาพสี มีทั้งหมด 4,096 สี ในขณะที่เกมบอยเป็นสีเทา 4 เฉดบนจอสีเขียว เกมเกียร์และลิงซ์เล่นง่ายกว่ามาก และมีขนาดใหญ่กว่า จากข้อมูลที่กล่าวมา คุณคิดว่าเกมคอนโซลอันไหนที่คุณจะซื้อ? คำใบ้ เกมคอนโซลอันหนึ่งขายได้ 180.7 ล้านก๊อปปี้ ในขณะที่อีกสองอันที่เหลือขายได้ 3 และ 10.67 ล้านก็อปปี้ ขณะที่เกมเกียร์และลิงซ์ที่มีเทคโนโลยีสูงกว่า แต่เกมบอยกลับครองยอดขาย 180.7 ล้านเครื่อง และเป็นเกมคอนโซลที่ขายดีที่สุดในศตวรรษที่ 20 ทำไมถึงเป็นอย่างนั้นไปได้….? ทีมผู้ผลิตเกมนินเทนโดภายใต้หัวเรือใหญ่ คุณกุนเป โยโคอิไม่ได้รับการฝึกปรือด้านการออกแบบหรือประสบการณ์ผู้ใช้งานอย่างเป็นมืออาชีพมาก่อน แต่คุณโยโคอิเป็นคนมีความคิดสร้างสรรค์ และรู้จักใช้เทคโนโลยีเก่าให้ทันสมัย มีราคาไม่แพง […]

อ่านต่อ

เทรนด์ออกแบบหน้าเว็บและแอพมาแรง ปี 2018 Part 2

สวัสดีครับ ยินดีต้อนรับสู่ Part 2 ครับ เพื่อเป็นการไม่เสียเวลาเรามาดูกันเลย Split Screens การแบ่งหลายจอนี้ ปรากฎได้ในเว็บและมือถือตั้งแต่สมัยอดีต ซึ่งปัจจุบันเทรนดังกล่าวนี้กลับมาอีกครั้ง วิธีการนี้จะมีประสิทธิภาพในแง่ของการออกแบบที่สามารถตอบสนองต่อผู้ใช้งานได้ดี เนื่องจากผู้ใช้สามารถเล่นกับเนื้อหาที่มีความหลากหลาย ให้ความสอดคล้องกัน แล้ววิธีการนี้ยังทำให้นักออกแบบมีพื้นจินตนาการที่ไร้ขีดจำกัด ในการดีไซน์ออกแบบผสมสี บางเว็บไซต์นั้นใช้หน้าจอแยกเพื่อนำเสนอตัวเลือกของผลิตภัณฑ์ที่มีความสำคัญเท่ากันหรือใกล้เคียงกัน สำหรับแอพหาคู่นี้ ใช้หน้าจอแยกตามแนวทแยงมุม บวกกับคอนทราสต์ของสี ซึ่งจะสร้างความกลมกลืน เนื่องจากมีการสอดคล้องกับเงา เว็บไซต์สารานุกรม ใช้หน้าจอแยกสำหรับแบ่งหน้ารายการ สำหรับมือถือ หน้าจอแยกกลายเป็นเทรนด์ที่เป็นมิตรกับผู้ใช้ เป็นการแก้ไขปัญหาของเนื้อหาและลำดับข้อมูลให้สามารถอ่านได้ง่าย โดยวิธีการจะเป็น ใช้กล่องหรือช่องว่างที่มีพื้นหลังโปร่งแสงสำหรับหัวเรื่องหลัก และเป็นการเพิ่มความคมชัดสวยงามให้กับหน้าเว็ปไซต์ แอปสูตรอาหารมังสวิรัติ ใช้การแบ่งสีบนพื้นหลัง เมื่อผู้ใช้รูดการ์ดสูตรในแคตตาล็อกจะมีการแยกความแตกต่างของส่วนที่สว่างและมืด เมื่อทำการส่งข้อมูลไปหน้าถัดไป หน้าจอก็จะถูกแยกออกจากกัน   แอป Watering Tracker จะใช้หน้าจอแยกแนวนอน: ส่วนบนที่มีพื้นหลังที่มืดเป็นที่ดีสำหรับการนำเสนอแผนภูมิและภาพ ในขณะที่ส่วนที่ต่ำกว่าใช้พื้นหลังโทนสว่าง เพื่อให้อ่านง่าย   Bold Typography ตัวพิมพ์ที่เป็นตัวหนาและยังคงเป็นที่ปรากฏในเว็บและมือถืออย่างต่อเนื่อง ตอนนี้มันกลายเป็นหนึ่งในองค์ประกอบการออกแบบที่สำคัญและนักออกแบบให้ความสนใจเป็นอย่างมาก ลำดับชั้นของตัวอักษรและแบบอักษรที่เหมาะสม เป็นส่วนประกอบหลักของทุกโครงการออกแบบ UI Landing Page ของ Big City Guide ใช้วิธีประยุกต์ลำดับตัวอักษร และ ภาพ […]

อ่านต่อ

เทรนด์ออกแบบหน้าเว็บและแอพมาแรง ปี 2018 Part 1

ในปี 2018 มีการออกแบบหน้าจอผู้ใช้งานหรือ User Interface(UI) เกิดขึ้นอย่างมากมาย เราจึงทำการรวบรวม การออกแบบหน้าจอที่ผู้ใช้งานส่วนใหญ่นิยมชมชอบ มองแล้วมีความสะดวกสบาย น่าค้นหา และตอบโจทย์ผู้ใช้งาน Full-Screen Background Images หนึ่งในเทรนด์ที่มาแรงคือการใช้ภาพพื้นหลังเต็มหน้าจอ โดยใช้ภาพถ่ายหรือเป็นภาพกราฟิกพิเศษ วิธีการนี้ทำให้หน้าจอดึงดูดสายตาและทำให้เกิดอารมณ์ร่วมในผลงานได้เป็นอย่างดี นอกจากนี้ยังทำให้รู้สึกถึงความสมบูรณ์ขององค์ประกอบของภาพและโครงสร้างทั้งหมดด้วยครับ ตัวอย่างหน้าจอ ของ Big City Guide ใช้รูปภาพเมืองที่มีชื่อเสียงโด่งดังอย่างเมืองเบอร์ลินเป็นภาพพื้นหลัง รวมกับทั้งเพิ่มข้อมูลของสถานที่ เพื่อนำเสนอให้ผู้ใช้งาน และช่วยให้ผู้ใช้สามารถจดจำสถานที่แห่งนี้ได้ง่ายขึ้น นี่คือตัวอย่างโฮมเพจของเว็ปไซต์ที่ทำขึ้นสำหรับสตูดิโอออกแบบ ที่เชี่ยวชาญด้านการออกแบบทั้งภายนอกและภายใน จากรูปนี้มีการวางวัตถุและแบ่งสีเป็นสีต่าง ๆ วิธีนี้เป็นการเสนอบริการของสตูดิโอแห่งนี้แก่ลูกค้า Several Interactive Layers ผู้ออกแบบตั้งใจนำเสนอหน้าเว็ปสามารถตอบสนองต่อผู้ใช้งานได้ วิธีการจะเป็นการที่มีภาพซ้อนหลาย ๆ ชั้นเมื่อทำงานกับการเลื่อนจอ (scroll) ทำให้ผู้ใช้งานสามารถได้รับรู้ข้อมูลที่มากขึ้นและยังได้ประสบการณ์ใหม่ที่ไม่เหมือนใคร ๆ นี่เป็นตัวอย่างของเว็ปไซต์การกุศลเกี่ยวกับการปกป้องมหาสมุทร เว็ปไซต์มีการปฎิสัมพันธ์ โดยนักออกแบบนี้ใช้ภาพ 2 ชั้น เมื่อทำการเลื่อนจอ ภาพจะขยับไปมา โดยทั่วไปแล้ววิธีนี้มักใช้ตัวหนังสือและรูปภาพเป็นเนื้อหาของข้อความ Custom Digital Illustrations ใช้ภาพกราฟิก วิธีการนี้ต้องการสื่อความหมายให้ผู้ใช้งานรับรู้อย่างเป็นธรรมชาติ […]

อ่านต่อ

ระบบสี (The Color System)

ระบบสีของ Material Design สารมารถใช้สร้างสรรค์ธีมสีที่สะท้อนถึงสไตล์หรือแบรนด์ของคุณได้ สารบัญ พาเลทและการใช้สี การสร้างธีมสี เครื่องมือในการเลือกสี พาเลทและการใช้สี ระบบสี Material Design ใช้วิธีการจัดการอย่างเป็นระบบเพื่อใช้สีกับ UI ของคุณ ในระบบนี้แม่สีหลัก (Primary color) และสีรอง(Secondary color) จะถูกเลือกเพื่อแสดงถึงแบรนด์ของคุณ สีเข้มและสีอ่อนของแต่ละสีสามารถนำไปใช้กับ UI ของคุณได้หลายวิธี

อ่านต่อ

การสับเปลี่ยนระหว่าง Design Thinking, Lean Startup และ Agile

Shifting gears between design thinking, lean startup, and agile การสับเปลี่ยนระหว่าง Design Thinking, Lean Startup และ Agile แม้คำว่า “นวัตกรรม” จะฟังดูน่าตื่นเต้นเร้าใจ แต่งานหลักของเหล่าที่ปรึกษาให้กับผู้สร้างนวัตกรรม คือการลดความเสี่ยงในกระบวนการสร้างนวัตกรรม เพื่อให้สามารถดำเนินธุรกิจได้ อย่างมีประสิทธิภาพ ความเสี่ยงจำเป็นต้องถูกลดให้ต่ำมากที่สุดเท่าที่เป็นไปได้

อ่านต่อ

UI vs. UX: อะไรคือความแตกต่างระหว่าง user interface และ user experience

UI vs. UX: อะไรคือความแตกต่างระหว่าง user interface และ user experience ในระดับพื้นฐาน User Interface (UI) คือชุดของหน้าจอ หน้าเว็บ และองค์ประกอบแบบรูปภาพต่างๆ เช่น ปุ่มและไอคอน ซึ่งจะช่วยให้บุคคลสามารถโต้ตอบกับผลิตภัณฑ์หรือบริการได้ ตรงกันข้ามกับ User experience (UX) ที่เป็นประสบการณ์ภายในที่บุคคลหนึ่งมีส่วนร่วมในทุกๆด้านของผลิตภัณฑ์และบริการของบริษัท

อ่านต่อ

เทรนด์ UI design สำหรับ 2019

เช่นเดียวกับโลกแห่งแฟชั่น โลกของ UX และ UI ก็มีเทรนด์ที่มาและไป ในปีนี้เทรนด์การออกแบบ UI จะใหญ่และชัดเจน และช่วยให้คุณสามารถดื่มด่ำกับมันได้อย่างเต็มที่ ในขณะที่เทรนด์ UI design สำหรับ 2018 ได้เห็นการเติบโตขึ้นของ Artificial Intelligence (AI) แต่คุณควรทราบด้วยว่า Augmented Reality (AR) และ Virtual Reality (VR) จะมีบทบาทอย่างมากในการออกแบบ UI ของปี 2019 ลองมาดูเทรนด์ UI ที่จะเห็นได้ในปี 2019:

อ่านต่อ