เบื้องหลังการออกแบบ App Icon ใหม่ของ Samsung Galaxy S8 | S8+

Mint SW
20Scoops CNX
Published in
2 min readJul 12, 2017

--

ONE NESS IN EXPERIENCE

มีความสงสัยค้างคาอยู่นานหลายสัปดาห์กับเรื่องการออกแบบของ Samsung Galaxy รุ่นใหม่ที่พึ่งเปิดตัวไม่นานนี้เองครับ นอกจากตัวเครื่องที่ออกแบบใหม่ หน้าตา UI และแอพไอค่อนในตัวเครื่องก็ถูกออกแบบใหม่หมดด้วย ดูสวยเข้ากับตัวเครื่องมากกว่าเดิมดีนะ จนอดสงสัยไม่ได้ว่าทำไมแอพไอค่อน ของ Samsung ปรับใหม่ให้เป็นแบบเส้นบาง ทำไมพื้นหลังแอพไอค่อนถึงมีรัศมีโค้งไม่เหมือนกับพื้นหลังรูปวงกลมของ Google Pixel ทำไมถึงใช้สีกับไอค่อนแอพไม่เหมือนกัน จนสุดท้ายแล้วผมได้เจอข้อมูลจากเว็บ Design Team ของ Samsung เองเลยครับ เขาสร้าง Brand Visual Language แบบใหม่ขึ้นมา อธิบายถึงแนวคิดเบื้องหลังการออกแบบแอพไอค่อนนี้ไว้ชัดเจนดีครับ

ONENESS IN EXPERIENCE

“Oneness in Expeience” น่าจะเป็นปรัชญาหรือแนวคิดใหม่ที่ทีมออกแบบของ Samsung ให้ความสำคัญกับการออกแบบความ Balance ระหว่างรูปแบบของ Samsung ที่มีอยู่เดิม (Refind Style) กับรูปแบบที่สร้างขึ้นมาใหม่หมดของ Samsung Galaxy S8 (Progressive Style) ทำให้รูปแบบแอพไอค่อนถูกปรับเปลี่ยนทำให้ดูแปลกใหม่ขึ้น

4 แนวคิดหลักของ App Icon แบบใหม่

1. Seamless Experience (ประสบการณ์ไร้รอยต่อ)

ตัวเครื่องที่เปลี่ยนปุ่ม Home แบบใหม่ จากปุ่มเดิมที่กดแบบ Physical กลายเป็นแบบปุ่มบนจอแทน รวมไปถึงความโค้งของขอบจอ วัสดุบนเครื่องที่เชื่อมกันได้เนียนขึ้นจนมองเหมือนกับไม่มีรอยต่อ

2. Continuous (ความต่อเนื่อง)

Figure C

สังเกตได้จากรัศมีความโค้งของหน้าจอและตัวเครื่อง ส่วนโค้งเว้าเหล่านี้เองที่เป็นเอกลักษณ์ของ Samsung Galaxy รุ่นใหม่

3. Light & Line (บางและเส้น)

Figure D — Samsung GUI: Recenkey Button (Left), Home Button (Middle) and the Back Button (Left)

เขาบอกว่า UI ทุกวันนี้ส่วนใหญ่มีรูปแบบแบนราบอยู่แล้ว (Flat Design) ซึ่งความเป็นจริง UX การใช้งานมันไม่ Flat ในเมื่อ SS รุ่นใหม่นี้ปรับ Navigation หลัก (ปุ่ม Home, ปุ่ม Back และปุ่ม Recent Key) ย้ายเข้าไปอยู่ในจอแล้ว เลยออกแบบรูปแบบ Icon ขึ้นใหม่โดยอ้างอิงจากรูปทรงกล่องสี่เหลี่ยมแบบเส้นบางของปุ่ม Home แปลงเป็นรูปแบบสี่เหลี่ยมลูกบาศก์แล้วบิดมุมมองเป็นทรงสามมิติแบบ Oblique, เส้นส่วนไหนที่จินตนาการว่าถูกแสง Spot Light จากด้านบนส่องมาแล้วมองว่าเส้นนี้ไม่ได้เชื่อมกับเงาของเส้นอื่นได้ชัดเจนก็ตัดออก (ดูตัวอย่างจากรูป Figgue E)

Figure E— Samsung Icons Theme

แนวคิดใหม่นี้น่าจะเป็นหัวใจหลักของการออกแบบไอค่อนต่างๆ ที่เราเห็นใน UI ของ Samsung รุ่นปัจจุบัน

Figure F— Icon theme

4. Own-able Shape & Meaningful Colors (รูปทรงที่เป็นแบบฉบับและสีสันสื่อความหมาย)

Figure G — Icon Shape

เพื่อให้มีความ Unique กับ Identity ของ Samsung จึงใช้เอกลักษณ์ของจุด (Font’s dot) ด้านบนของตัวอักษร i ที่มีรูปร่างสี่เหลี่ยมขอบมนของฟอนต์ SamsungOne ที่เป็นฟอนต์ออกแบบใหม่ของ Samsung เอง, ลดความโค้งมน, ปรับ Usability ให้ดีขึ้น ดูเป็นมิตรกับผู้ใช้มากขึ้นโดยใช้สีแบบใหม่ที่จัดเรียงเป็นหมวดหมู่ตามความสำคัญและฟังก์ชันการใช้งาน

Figure H — Color & Shape of App Icon

สรุปส่งท้าย

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

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

ขอบคุณครับ :]

References:

http://design.samsung.com/global/contents/visual_language/

--

--

Mint SW
20Scoops CNX

Design is a journey and I share what I learn :]