Flutter Framework เครื่องมือที่ประสิทธิภาพในการสร้าง native app แบบหลาย platform

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

เรามาลองดูกันว่า ทำไม framework ตัวนี้ถึงมีความคุ้มค่าในการใช้พัฒนาแอพ และ ประสิทธิภาพของมันเป็นอย่างไร
Flutter คืออะไร?
เมื่อเปลายเดือนกุมภาพันธ์ ปี 2018  google เปิดตัว flutter framework แบบ beta เวอร์ชันแรก นี่เป็น เครื่องมือ การสร้าง native interface สำหรับ android และ iOS และในเดือนสิงหาคม ปี 2019 ก็ได้ออกเวอร์ชัน 1.7.8 เป็นเวอร์ชันล่าสุด ณ ตอนนี้

อะไรทำให้ Flutter เป็น Framework ที่วิเศษมากขนาดนั้น  เพราะว่า framework สามารถพัฒนา native app แบบ cross-platform ได้ การรวบรวมข้อมูล Native ให้ตัวประมวลผล ARM นั้น ช่วยให้การพัฒนาง่ายขึ้น มีการ render ที่ง่ายขึ้น พวกชุดเครื่องมือ, widgets, และ features ก็มีส่วนช่วยให้ process นั้นง่ายขึ้นเช่นกัน แล้วมีอะไรเพิ่มเติมอีกล่ะ นอกจากการเป็น Framework แบบ open source ก็อย่างที่บอกไปที่ว่ามันเป็นแบบ open source  Developer ที่ไหนก็สามารถ แก้ไขงานใน Frame work ที่ GitHub ได้แบบ real-time  ดังนั้น Developer จึงมีส่วนช่วยพัฒนาให้ Flutter นั้นดีขึ้น

ในด้านของ features นั้น หนึ่งใน feature ที่น่าสนใจทีสุดเลยก็คือ ปุ่ม Hot reload ถ้าคุณกดปุ่มนี้ การเปลี่ยนแปลงทั้งหมดที่เขียนภายใน code จะปรากฎขึ้นที่หน้าจอทันที เราจึงสามารถปรับแต่ง ตัว UI ได้อย่างง่ายดาย แต่มันก็มี surprise อย่างหนึ่งที่ไม่เหมือน framework อื่นๆของ google คือ framework ตัวนี้ใช้ Dart ในการพัฒนาแอพ
Flutter เวอร์ชันล่าสุดมีอะไรดีบ้าง?

DevTools เป็นเครื่องมือที่ใช้แก้ bug ได้ดีใน Flutter และ Dart  ผู้พัฒนาสามารถ วิเคราะห์ layout และ state ในแอพได้ สามารถแก้ปัญหาเกี่ยวกับความจำ ใน Flutter appได้ หรือว่าปัญหา command line ใน Dart  และแก้ไข bug อื่นๆอีกมากมาย
Widget ใหม่ google ให้ความสนใจกับ widget อย่างมาก เพื่อให้ผู้ใช้ ใช้งานได้อย่างมีประสิทธิภาพ Flutter เวอร์ชันล่าสุด ได้สร้าง Slider ตัวใหม่มา เพื่อสร้าง range ที่ดูดี ตัวอย่างเช่นเมื่อผู้ใช้ต้องการจะเปลี่ยนช่วงราคาในแอพ mCommerce พวกเขาจึงต้องใช้ widget ที่ดึงความสนใจได้
plugin ที่สามารถซื้อในแอพได้เลย ตอนนี้ มีการเพิ่ม plugin ใหม่ใน Flutter ที่สามารถใช้ซื้อสิ่งต่างๆได้ใน แอพ
รองรับ AndroidX google ได้มีการ support Android มากขึ้น โดยการนำ Android x เข้ามาใช้ ทำให้การสร้างแอพมีประสิทธิภาพมากขึ้น
รองรับ Android bundles ในเดือนสิงหาคม ปี 2019 แอพทั้งหมดที่สร้างสำหรับ Android pie ต้องรองรับในทั้งเวอร์ชัน 32-bit and 64-bit ใน Google play store
Fonts ใหม่ UI ในเวอร์ชั่นล่าสุดนั้น มีการออกแบบตัวพิมพ์ใหม่ทีเพิ่มตัวเลขและตัวอักษร ใหม่ๆหลาย style ขึ้นมา การ Interaction กับ fonts ใน iOS ก็ได้รับการพัฒนาเช่นกัน

ทำไมถึงต้องใช้ Flutter ถ้าคุณต้องการจะสร้างแอพแบบ cross-platform
Flutter สามารถจัดการไฟล์ที่ไม่เป็นระเบียบได้ในโหมด Development การรวบรวม Jit ช่วยให้การพัฒนาและการแก้ bug นั้นเร็วขึ้น นอกจากนั้น Framework ตัวนี้ยังรองรับ plugins หลายๆอย่างๆ เช่น Firebase หรือ SQLite   Pub.

ขั้นตอนวิธีสร้าง App โดยใช้ Flutter ( Flutter Tutorial Part 1 )

ใน tutorial นี้ เราจะมาสอนการสร้างแอพพลิเคชั่นโดยใช้ Flutter แบบ Step by step แอพที่สร้างขึ้นจะเป็นแบบ open source อยู่ที่ Aviacommerce platform, tutorial นี้โฟกัสไปที่ แอพพลิเคชั่นเพื่อที่จะนำเสนอ concepts ที่สำคัญของ flutter framework

Tutorial นี้เป็นแค่ส่วนแรกของ Tutorial ทั้งหมดเท่านั้น :-

วิธีการสร้าง App โดยใช้ Flutter
วิธีการทำ layout ใน App โดยใช้ Flutter (ยังไม่มา)
วิธีจัดการ data ใน flutter (ยังไม่มา)
วิธีการ listing ใน Flutter (ยังไม่มา)

Blog นี้จะอธิบายเกี่ยวกับวิธีการสร้าง layouts แนะนำแบบ step by step หากคุณต้องการดู code ทั้งหมดเลย โปรเจ็คทั้งหมดมี code อยู่ใน Github ถ้าอยากลองดูคุณก็สามารถไปดูก่อนได้เลย

ทีมของเรา (AviaCommerce) พยายามหาเกี่ยวกับ framework ที่สามารถพัฒนา software ในแบบใหม่ๆได้อยู่ตลอดเวลา เราได้ติดตามกิจกรรมหรือข่าวสารที่เกี่ยวกับ flutter ตั้งแต่ตัว Beta รุ่นแรกออก
ในที่สุด google ก็เปิดตัว Flutter 1.0, เป็นเครื่องมือ UI ตัวแรกที่มีความเสถียร เป็น Experiences ใหม่ๆในการใช้สร้างพวก native app สำหรับ iphone หรือว่า android จาก codebase เดียว
Flutter มีขั้นตอนการติดตั้งหลายขั้นตอนเพื่อให้เข้ากับสภาพคอมของเรา ให้ทำตาม คู่มือการติดตั้ง นี้ไปก่อน จากนั้นให้ดูต่อ

เมื่อติดตั้งเสร็จแล้ว ให้ลองสร้าง test project ผู้เขียนแนะนำให้ใช้ Android studio เพราะมันมี IDE ที่ครบเครื่องสำหรับ Flutter  Android studio จะต้องมี editor plugin ในการเขียน Dart ก่อน

เปิด Android studio ขึ้นมา คุณจะเห็น option ในการสร้างโปรเจค flutter ใหม่

ให้เลือก Flutter Application เมื่อหน้าต่าง configurations ขึ้นมา

ตั้งชื่อให้โปรเจคแรกของคุณ หรือจะตั้งชื่อว่า timer ตามผู้เขียนก็ได้

ขั้นตอนนี้ หน้าต่างจะขึ้นมาให้คุณใส่ชื่อ package

หลังจากนั้น Flutter SDK จะสร้าง Directory ทั้งหมดที่ต้องใช้ในแอพพลิเคชั่น สิ่งที่คุณทำทั้งหมดจะอยู่ใน Folder ที่ชื่อว่า lib และเราจะเริ่มเขียนในไฟล์ชื่อว่า main.

React native หรือ Flutter เราควรเลือกใช้ตัวไหนในการสร้าง Mobile app ดี?

ปัจจุบันการสร้างแอพพิเคชั่น แบบ Cross-platform กำลังเป็นที่นิยม ด้วย Framework ที่สามารถสร้าง Native app โดยไม่ต้องใช้ภาษา swift สำหรับ iOS หรือว่า Java สำหรับ Android เลย

React native และ Flutter เป็น Frameworkในการใช้สร้าง Appแบบ Cross-platform ที่ได้รับความนิยมอย่างมาก ปัจจุบันนี้ก็ได้ใช้สร้างแอพพลิเคชันเป็นหลายพันแอพเลยทีเดียว แต่ถ้าเราจำเป็นต้องเลือกระหว่าง Reactive หรือ Flutter เราควรจะเลือกใช้ตัวไหนดี?

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

ในฐานะที่ผู้เขียนนั้นเป็นผู้พัฒนา React native ผู้เขียนได้พยายามเขียนบทความนี้ขึ้นมาโดยไม่มีความลำเอียง

React Native และ Flutter มาพร้อมกับความคล้ายคลึงกันหลายๆ อย่างเช่น   การสร้างแอพแบบ Cross-platform โดยใช้ Code base เดียว มี Hot reloading   มี UI ที่ยอดเยี่ยมและ tooling ที่มีประสิทธิภาพ แต่อย่างไรก็ตาม Framework ทั้งสอง นี้ก็ยังมีข้อแตกต่างกันอยู่

เรามาลองเปรียบเทียบ React native และ Flutter ด้วยปัจจัยหลายๆอย่างกัน
Language (ภาษา)
React native

React native นั้นถูกเขียนทั้งหมดด้วย JavaScript นี่ก็เป็นข้อดีอย่างหนึ่งเลยสำหรับ React native เนื่องจาก JavaScript จัดเป็นหนึ่งในภาษาที่ได้รับความนิยมและผู้คนนิยมใช้เขียนโปรแกรมมากที่สุดในโลก การหา Developers สำหรับ JavaScript เป็นเรื่องที่ง่าย ดังนั้น การเรียนรู้ React native จึงเป็นเรื่องค่อนข้างง่ายสำหรับ JavaScript developer
Flutter

Flutter ถูกเขียนด้วยภาษาที่เรียกว่า Dart ถึงแม้ว่า Dart จะเป็น Choice ที่ง่ายต่อการเลือกใช้ และเป็นภาษาในการเขียนโปรแกรมที่ดี แต่มันก็ไม่ได้รับความนิยมเหมือนกับ JavaScript   Developer ที่เลือกใช้ Flutter จำเป็นต้องไปเรียนรู้ Dartก่อน โดยทั่วไปแล้ว Developers จาก C++ หรือ Java มักจะถนัด Dart มากกว่า Developer จาก JavaScript  ในความคิดของผู้เขียน, ด้วยประสบการณ์และช่วงเวลาของการเรียนรู้ Dart และเนื่องจากมันเป็นภาษาที่ค่อนข้างใหม่ ดังนั้น ผู้ชนะก็คือ React native

Winner: React native

 
Corporate Backing (บริษัทที่สนับสนุน)
React native

React native ถูกพัฒนาโดย Facebook และได้เปิดเผย Source code ในปี 2015   Facebook มีทีมวิศวกรคุณภาพที่ทำงานเกี่ยวกับ react native และได้พัฒนาให้ดีขึ้นอย่างต่อเนื่อง  เนื่องจากว่า Facebook ได้ลงทุนไปกับ react nativeอย่างมาก product ของ Facebook ส่วนมากจึงถูกเขียนขึ้นมาด้วย React native จึงทำให้React nativeได้รับความไว้วางใจและความนิยมอย่างมากในช่วงหลายปีที่ผ่านมา
Flutter

เมื่อเทียบกับReact native แล้ว flutter ถือว่าเป็น Framework ที่ยังใหม่อยู่ Flutter ถูกพัฒนาโดยบริษัทยักษ์ใหญ่อีกบริษัทคือ google นั่นเอง Flutter เป็น SDK open source ของ google สำหรับการสร้างแอพให้ Android หรือ IOS โดยใช้แค่ Codebase เดียว  google ได้ให้การสนับสนุน Flutter อย่างมาก เหมือนกับที่ Facebook ให้การสนับสนุน React native เรียกได้ว่า google ลงทุนทำให้ Flutter เป็นหนึ่งใน Solutions ที่ดีที่สุดในการสร้างแอพแบบ Cross-platform กันเลยทีเดียว

ในหัวข้อนี้ถือว่า React native และ Flutter เสมอกัน
What is Trending? (ตัวไหนกำลังเป็นที่นิยม)

ถ้าลองเราไปดูข้อมูทางสถิติที่ StackOverflow Survey of 2019 เราจะได้ข้อมูลว่า framework ตัวไหน ที่ Developers ส่วนใหญ่ชอบใช้กัน แบบสอบถามนี้ถามเกี่ยวกับว framework ที่ developers นั้นชอบมากที่สุด
Flutter อยู่ในอันดับสูงกว่าอยู่ที่ 75.4% และ React Native ก็ได้ทำสถิตไว้อยู่ที่  62.5% ในบรรดา framework ที่ได้รับความนิยมสูงสุด
สิ่งที่ควรคำนึงไว้เลยก็คือ React native นั้นมีมาหลายปีแล้วในขณะที่ Flutter นั้นพึ่งเปิดตัวมาได้ 1 ปี แล้วก็เริ่มได้รับความนิยมมากขึ้นเรื่อยๆ ดังนั้นเราจึงต้องทำการเปรียบเทียบแบบเดียวกันในปีหน้าเพื่อดูผลว่าเป็นอย่างไร

ดูจาก Trend ในปัจจุบัน จะได้ว่าผู้ชนะคือ Flutter นั่นเอง

Winner: Flutter

 
Performance (ประสิทธิภาพการทำงาน)
ตอนนี้มีความคิดทั่วไปที่ว่า Flutter ทำงานได้ดีกว่า React native อาจจะเป็นเพราะมันไม่มี JavaScript เป็นตัวเชื่อมในการติดต่อกับพวก Native component เหมือนกับ React native  Dart นั้นถูก compiled ไปที่ machine code เลย ทำให้ performance ของ Flutter นั้นดีกว่า React native ที่ต้องมี JavaScript เป็นตัวสะพานที่ใช้เชื่อม

Winner: Flutter

 
Adoption (การนำมาใช้)
React native
React native ถูกใช้นำอย่างกว้างขวาง ความนิยมบางส่วนของมันอาจจะมาจาก React พูดได้เลยว่า Developer ของ React แค่ก้าวเพียงก้าวเดียวก็สามารถมา develop แอพที่เขียนด้วย React native ได้อย่างง่ายดาย ทุกวันนี้ product อย่าง Facebook, Instagram, Uber Eats, Tesla, Bloomberg, และอีกมากมายใช้ React native ในการสร้างAppขึ้นมา
Flutter
เนื่องจาก google เป็นผู้พัฒนา Flutter ขึ้นมา ในปีนี้ตัว Flutter เองจึงได้รับความสนใจค่อนข้างมากเช่นกัน

Alibaba ซึ่งเป็นยักษ์ใหญ่ในการช้อปปิ้งออนไลน์ได้นำ Flutter มาใช้กับหนึ่งในแอพมือถือของพวกเขา Google ad และ Hamilton music ก็ได้รับการพัฒนาโดยใช้ Flutter แต่นอกเหนือจากนี้แล้ว ยังไม่ค่อยมีแอพในApp storeที่ถูกพัฒนาด้วย Flutter

นี่ก็เป็นอีกหัวข้อหนึ่งที่เราจำเป็นต้องดูในปีหน้าว่ามี Products จำนวนเท่าไรที่นำมาใช้ร่วมกับ Flutter

Winner: React native

 
Job Prospects (ความต้องการของตำแหน่งงาน)
ด้วยความที่ React native นั้นมีมาก่อนหน้านั้นนานแล้ว มีการใช้react และ JavaScript (เป็น 2 ตัวที่ได้ระความนิยมสูง) ในการเขียน ทำให้มีโอกาสความในการรับเข้าทำงานที่สูงกว่า

ดูจากข้อมูลทางสถิติที่ StackOverflow Survey of 2019 ระบุไว้ว่าเมื่อเปรียบเทียบกันแล้ว React native เป็นที่ต้องการมากกว่า สิ่งนี้สามารถบอกเราได้เลยว่า มีงานที่ใช้ React native มากว่า Flutter

เรายังไม่สามารถรีบด่วนสรุปออกมาได้ เนื่องจากตำแหน่งงานที่มีอยู่ทุกวันนี้ Flutter ยังคงใหม่อยู่ ไม่แน่ว่าในอีกหลายๆปีข้างหน้า อาจมีความต้องการ developers ของ Flutter เพิ่มมากขึ้น แต่ปัจจุบัน มีงานสำหรับ React native อยู่มากถ้าเทียบกับ Flutter นี่ก็เป็นเพราะว่า Developers ของ React native ก็คือ Developers ของ React ด้วยนั่นเอง
React Native นั้นมีอันดับที่สูงกว่าอยู่ที่ 13.1% และ Flutter อยู่ที่ 6.7% ในบรรดา Framework ที่มีความต้องการมากที่สุด
Winner: React native

 
Conclusion (สรุป)
เป็นช่วงเวลาที่น่าสนใจใน mobile development เรากำลังไปไกลจากการที่เป็นแค่การพัฒนาใน iOS หรือว่า Android และรวบรวมเทคโนโลยีใหม่ๆที่สร้าง mobile apps แบบ cross-platform อย่างไรก็ตาม ถึงแม้ว่าทุกวันนี้ React native จะมีฐานที่มั่นคง แต่ Flutter ซึ่งเป็นผู้แข่งขันที่เกิดขึ้นมาใหม่และผู้เขียนก็มั่นใจว่าในอนาคตหน้าจะมีคนมากมายเข้ามาใช้งาน Flutter อย่างแน่นอน

ในการเลือกเทคโนโลยีใหม่ๆมาศึกษาเรียนรู้ มันขึ้นอยู่กับการใช้งานของคุณ ถ้าคุณถนัดในการเขียน C++ หรือว่า Javaแล้ว คุณก็อาจจะชอบ Flutter ก็ได้ แต่ถ้าคุณชอบ JavaScript มากกว่า React native จะเป็น option ที่ดีกว่าสำหรับคุณ

บทความแปลจากเว็บไซต์: medium

 

 

เทรนด์การออกแบบเว็บไซต์ ปี 2019

เทรนด์การออกแบบเว็บไซต์ ปี 2019
ที่มา : https://www.theedigital.com/blog/web-design-trends-2019

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

ในปัจจุบันเทรนของการออกแบบเว็บนั้น  เป็นอะไรที่สำคัญมากในการที่ทำให้เว็บไซต์ของคุณประสบความสำเร็จ  มีการเปลี่ยนแปลงมากมายในตลอด 12 เดือนนี้ ในแง่ของความนิยมกับหน้าตา  การอัพเดทอัลกอริธึม และตัวอย่างต่าง ๆ มากมาย

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

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

คนเรานะไม่ได้อดทนขนาดนั้น เราพร้อมจะเปลี่ยนตลอดเวลา  จริง ๆ แล้วอินเตอร์เน็ตเป็นเหมือนสิ่งที่เอเลี่ยนสร้างไว้ที่คอยสังเกตุพฤติกรรมของมนุษย์  พวกเอเลี่ยนนะอาจจะทราบว่าพวกเราไม่ได้ชอบการรอคอยซักเท่าไร จากการศึกษาโดย Akamai และ Gomez.

วิธีการติดตั้ง React ตั้งแต่เริ่มต้น

แม้ว่า React จะได้รับความนิยมอย่างมาก แต่การติดตั้งแอปพลิเคชั่นตั้งแต่เริ่มต้นนั้นกลับเป็นงานที่ยากลำบาก เพื่อแก้ปัญหาสิ่งเหล่านี้ Facebook มาพร้อมกับฟีเจอร์อย่าง create-react-app เพื่อให้เป็นมิตรกับผู้ใช้ วันนี้ลองใช้เวลาในการทำความเข้าใจความซับซ้อนของแอพ React กัน

(more…)

10 Front-End Framework มาแรงในปี 2018

เมื่อต้องพัฒนาเว็บไซต์ใหม่ Front-End Framework ช่วยให้คุณสามารถเริ่มงานได้ทันที ด้วยความนิยมของ framework จึงทำให้มี Front-End Framework ให้เลือกใช้งานหลายแบบและยังมี framework ใหม่ๆ ออกมาอยู่เสมอ

(more…)

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

สวัสดีครับ ยินดีต้อนรับสู่ Part 2 ครับ

เพื่อเป็นการไม่เสียเวลาเรามาดูกันเลย

Split Screens

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

สำหรับแอพหาคู่นี้ ใช้หน้าจอแยกตามแนวทแยงมุม บวกกับคอนทราสต์ของสี ซึ่งจะสร้างความกลมกลืน เนื่องจากมีการสอดคล้องกับเงา

เว็บไซต์สารานุกรม ใช้หน้าจอแยกสำหรับแบ่งหน้ารายการ

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

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

 

แอป Watering Tracker จะใช้หน้าจอแยกแนวนอน: ส่วนบนที่มีพื้นหลังที่มืดเป็นที่ดีสำหรับการนำเสนอแผนภูมิและภาพ ในขณะที่ส่วนที่ต่ำกว่าใช้พื้นหลังโทนสว่าง เพื่อให้อ่านง่าย

 

Bold Typography

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

Landing Page ของ Big City Guide ใช้วิธีประยุกต์ลำดับตัวอักษร และ ภาพ ทำให้ชื่อของเมือง ดูกลืนไปกับตัวภาพ ยังไม่หมด คนออกแบบยังใช้เทคนิคการตัด และสลัก หัวข้อหรือคำสำคัญลงไป ด้วยวิธีการแบบนี้จะทำให้ตัวอักษรดู ผสมผสานกลมกลืนไปกับตัวภาพ ราวกับเป็นหนึ่งเดียวกัน

แอพ Upper นั้นเรียบง่ายและไม่ใช้กราฟิกเพิ่มเติม ดังนั้นข้อความจึงเป็นองค์ประกอบหลักในการออกแบบนี้ มีการพิมพ์ด้วยตัวหนาทำให้เกิดความสมดุลและอ่านง่ายสบายตา

Buttonless UI 

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

แอพสารานุกรมนำเสนออินโฟกราฟิกแบบโต้ตอบ สำหรับข้อมูลช้าง การโต้ตอบทั้งหมดกับข้อมูลเกิดขึ้นโดยปราศจากปุ่มต่าง ๆ แต่จะใช้การเลื่อนเพื่อดูข้อมูลแทน

Vibrant and Bold Colors

นักออกแบบเลือกใช้ color palettes ในแอปพลิเคชั่นและเว็บไซต์ รวมถึงการใช้โทนสว่างและโทนมืด ความหลากหลายของฟ้อนท์และรูปแบบอักษร (typefaces) เช่นเดียวกับ การศึกษาด้านการออกแบบก็ได้ผนักดันมาตรฐานใหม่ๆอยู่เรื่อยๆ นักออกแบบจึงลองผสมผสาน โดยใช้ประโยชน์จากสีที่หลากหลายโดยไม่ทำให้การใช้งานเสียไป

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

Engaging Interface Animation

การให้หน้า UI เคลื่อนไหวยังคงเป็นประเด็นเถียงกันแรง เพราะสิ่งที่แอนิเมชั่นทำคือ ฟีเจอร์ที่ไม่จำเป็น แถมยัง overload ตัว UI ของผู้ใช้งาน ยิ่งทำให้ดูซับซ้อน ผู้ใช้มักคาดหวังว่าแอนิเมชั่นคือ ส่วนสำคัญที่ทำให้แอพมีปฎิสัมพันธ์กับผู้ใช้ ดังนั้น ทั้งนักออกแบบ และ นักพัฒนา จึงพยายามค้นหาวิธีต่างๆเพื่อให้ตอบโจทย์นี้ สิ่งที่ได้คือ ให้มันขยับนิดขยับหน่อย (Microinteractions) ให้ปุ่ม สวิตซ์ หรือแถบเปิด-ปิด ได้เคลื่อนไหว

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

Slumber App มีจุดเด่นเรื่องหน้าจอหลัก ภาพ illustration ที่ทำงานร่วมกับ preloading ช่วยให้การรอไม่น่าเบื่อ และบวกกับการเล่นกับความสุนทรีย์

จบ Part 2 จ้า โปรดติดตามชมตอนต่อไป
Complete Web & App Design Course - UX, UI and Design Thinking With Big Data Bootcamp
เรียนรู้ หัวใจหลักสำคัญของการทำ Product ด้วย UX และ UI
การออกแบบโดยใช้ Concept ของ Design Thinking
นำข้อมูลที่ได้มาพัฒนา Product อย่างสม่ำเสมอ โดยใช้ Concept ของ Big Data
รายละเอียดเพิ่มเติมและสมัครที่นี่
หลักสูตรยาว 12 ครั้ง รวมเวลากว่า 72 ชั่วโมง จบมาทำงานได้จริง
ราคาคุ้มค่าที่สุด ตอนนี้มี promotion มา 2 คนลดเพิ่ม 10% 3 คนลดเพิ่ม 15%
สามารถขอ code ส่วนลดได้ที่ page LEAN upskill

อะไรคือ Test Driven Development (TDD)? ตัวอย่าง

อะไรคือ Test Driven Development (TDD)?
TDD สามารถอธิบายได้ว่า เป็นการฝึกโปรแกรมเพื่อให้นักพัฒนาทราบถึงว่าโค้ดใหม่ที่เขียนขึ้นมาเมื่อได้รับการทดสอบแล้วมันผิดพลาดไหม  แถมยังหลีกเลี่ยงโค้ดที่ซ้ำกันได้อีกด้วย โดย TDD ย่อมาจาก Test Driven Development เป้าหมายหลักของ TDD คือการทำให้โค้ดสะอาด เรียบง่าย  และปราศจากบัค
(more…)

พิชิตปัญหาคุยกับไอทีไม่รู้เรื่อง ด้วยภาษาอังกฤษ!

เคยไหมที่ไอทีพูดอะไรก็ไม่รู้ แล้วคุณรู้สึกปวดหัวไหม?

เคยอยากลองแก้ปัญหาไอทีเอง แล้วรู้สึกศัพท์อะไรไม่รู้เต็มไปหมด?

ต้องปฎิเสธไม่ได้เลยทุกวันนี้คุณต้องใช้เทคโนโลยี และก็ต้องพบกับปัญหาหรือการเรียนรู้มากมาย ไม่ว่าจะเป็น

(more…)

อนาคตของ Java Enterprise

ช่วงไม่กี่เดือนที่ผ่านมานี้ มีการเปิดเผยว่า ภาษา Java กำลังพบกับการเปลี่ยนแปลงครั้งใหญ่อีกครั้ง

นอกจากการโหวตให้มีการเปลี่ยนชื่อของ Java Enterprise จากปัจจุบัน Java EE เป็น Jakarta EE – แบรนด์ที่อยู่ภายใต้การดูแลของ Eclipse Foundation สำหรับผู้ใช้ coding robust แอพพลิเคชั่นเอนเตอร์ไพร์ส โดยใช้ภาษา Java ในการปรับปรุงผลิตภัณฑ์และก้าวเข้าสู่ตลาด DevOps ที่กำลังแข่งขันสูงอยู่แล้ว อาจดูเหมือนเป็นสถานการณ์ที่เลวร้าย

(more…)