วิธีการใช้การออกแบบ UI iOS ที่สมบูรณ์แบบสำหรับพิกเซล

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

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

การออกแบบ UI ที่สมบูรณ์แบบพิกเซลคืออะไร

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

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

แต่ทำไมต้องการออกแบบที่สมบูรณ์แบบของพิกเซล?

นักออกแบบ UI พยายามอย่างเต็มที่เพื่อสร้างอินเทอร์เฟซที่รับรู้และโต้ตอบได้ง่าย เป็นหน้าที่ของนักพัฒนามืออาชีพที่จะต้องเคารพงานของนักออกแบบและใช้งานอินเทอร์เฟซตามที่จัดส่งให้ทุกประการ

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

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

คู่มือการออกแบบ iOS UI ฉบับย่อนี้จะนำคุณผ่านกระบวนการตั้งแต่ขั้นตอนการออกแบบขั้นพื้นฐานไปจนถึงการใช้งาน จากมุมมองของนักออกแบบและนักพัฒนา

การสร้างการออกแบบ iOS UI

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

เครื่องมือออกแบบส่วนต่อประสาน iOS ที่จำเป็น

ฉันคิดว่าฉันถูกต้องแล้วที่บอกว่า Sketch ได้กลายเป็นมาตรฐานโดยพฤตินัยสำหรับนักออกแบบ UI/UX ของเว็บและมือถือ แม้ว่า Adobe XD จะเป็นทางเลือกใหม่ แต่ก็ยังล้าหลัง Sketch ในแง่ของความนิยม

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

คำถามที่แท้จริงข้อเดียวที่นี่คือ: นักออกแบบควรแบ่งปันข้อมูลเกี่ยวกับการปรับการออกแบบสำหรับจอภาพต่างๆ กับนักพัฒนาอย่างไร

โชคดีที่ไม่จำเป็นต้องจดข้อมูลจำเพาะสำหรับแต่ละรายการ เนื่องจากปลั๊กอิน Auto Layout สำหรับ Sketch จะดูแลเรื่องนั้นเอง นักออกแบบเพียงแค่ต้องการตั้งค่าเลย์เอาต์อัตโนมัติที่ต้องการ ส่งออกไปยังขนาดหน้าจอต่างๆ ด้วยการคลิก และนักพัฒนาจะเข้าใจวิธีวางข้อจำกัดของเลย์เอาต์ และทำให้แน่ใจว่าทุกอย่างดูดี ไม่ว่าจะเป็นบน iPhone X หรือ iPhone 5 รุ่นเก่าที่ดี

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

การตั้งค่าการออกแบบของคุณ

ฟังดูดีมาก แต่เรายังไม่ได้เลือกขนาดที่จะใช้สร้างการออกแบบของเรา ตามสถิติ iOS ของ David Smith 57% ของผู้ใช้ iPhone ทั้งหมดใช้จอภาพ 4.7 นิ้ว ซึ่งเปิดตัวใน iPhone 6/6s และต่อมาใช้ใน iPhone 7 และแม้แต่ iPhone 8 ที่เพิ่งเปิดตัวเมื่อเร็วๆ นี้

ฉันแน่ใจว่าคุณคงคุ้นเคยกับจอภาพขนาด 4.7 นิ้วของ Apple แล้ว แต่ในกรณีที่คุณไม่ใช่คนตัวเลข เรากำลังพูดถึงจอภาพขนาด 750x1334 พิกเซลที่มี 326 พิกเซลต่อนิ้ว (PPI) นี่คือจอแสดงผล Retina มาตรฐานและในโค้ดเราจะมีความละเอียดครึ่งหนึ่ง ดังนั้น เราขอแนะนำให้คุณเริ่มต้นด้วย 375x667 พิกเซล

ต่อไป เราต้องแน่ใจว่าการออกแบบ iOS UI ของเราเพิ่มความคมชัดสูงสุด เพื่อให้บรรลุเป้าหมายนี้ คุณต้องเปิด การปรับพิกเซลให้เหมาะสม :

ต่อไปนี้คือตัวอย่างสี่เหลี่ยมผืนผ้าธรรมดาที่มีและไม่มีการปรับพิกเซลให้พอดี:

ใช้ Round: Full Pixels เมื่อแก้ไขวัตถุเวกเตอร์:

เห็นได้ชัดว่าสิ่งเหล่านี้เป็นเพียงพื้นฐาน และหากต้องการดูองค์ประกอบ iOS UI ที่สมบูรณ์แบบพิกเซลใน Sketch อย่างใกล้ชิด คุณควรตรวจสอบบทช่วยสอนอย่างเป็นทางการ

อย่าลังเลที่จะใช้แอนิเมชั่นเวกเตอร์ที่ซับซ้อน เพราะนักพัฒนาสามารถเล่นได้โดยใช้ไลบรารี Lottie คุณสามารถเล่นแอนิเมชั่น Adobe After Effects บนอุปกรณ์มือถือได้โดยไม่ต้องทนทุกข์กับสิ่งประดิษฐ์ที่ปรับขนาด เพียงจัดเตรียมไฟล์ JSON ให้กับนักพัฒนาเท่านั้น เท่านี้ก็เรียบร้อย

ใช้โปรไฟล์สี sRGB ให้มากที่สุด หาก sRGB ไม่เพียงพอในการแสดงช่วงสีที่กว้าง คุณจะต้องระบุสีหรือเนื้อหากราฟิก (sRGB ตัวหนึ่งและอีกตัวหนึ่งที่มีโปรไฟล์สีแบบฝัง) ข้อมูลโดยละเอียดเกี่ยวกับโปรไฟล์สีมีอยู่ในแนวทางปฏิบัติ HID ของ Apple หากคุณต้องการ

รหัสที่กำหนดเองเพื่อผลลัพธ์ที่สมบูรณ์แบบพิกเซล

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

การเลือกเครื่องมือที่เหมาะสม

มีเครื่องมือที่มีประโยชน์อย่างเหลือเชื่อสำหรับการแบ่งปันงานของนักออกแบบกับนักพัฒนา - Zeplin เพียงใช้แล้วนักพัฒนาจะมีข้อมูลที่จำเป็นเกือบทั้งหมดเพื่อให้แน่ใจว่าการออกแบบ UI ของคุณใช้งานได้: เนื้อหากราฟิก แบบอักษรและสีที่ใช้ในการออกแบบ ข้อความ และอื่นๆ อีกมากมาย สิ่งเดียวที่นักออกแบบอาจต้องระบุในตอนนี้คือไฟล์ฟอนต์ ในกรณีที่พวกเขาใช้ฟอนต์ที่ไม่รวมอยู่ใน iOS

เครื่องมือสุดเจ๋งอีกอย่างคือ PaintCode ซึ่งสามารถสร้างโค้ดจากภาพเวกเตอร์ PaintCode ใช้เส้นทาง SVG และข้อมูลสีเพื่อสร้างคลาส Swift หรือ ObjC ด้วย PaintCode คุณสามารถใช้นิพจน์ ตัวแปร ฯลฯ เพื่อสร้างสถานะพาสซีฟ/แอ็คทีฟของปุ่ม สถานะขึ้น/ลง ข้อความไดนามิก แอนิเมชั่นจากตัวแปร และอื่นๆ อีกมากมาย

คุณจะต้องพึ่งพา Xcode และเครื่องมือพัฒนา iOS มาตรฐานสองสามตัว แต่เราจะพูดถึงในภายหลัง

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

ตกลง นักพัฒนาซอฟต์แวร์มีทุกสิ่งที่ต้องการแล้ว เราจะนำการออกแบบที่สมบูรณ์แบบพิกเซลมาใช้ได้อย่างไร (ขออภัยในความไม่สะดวก)

การตั้งค่าและซิงค์เครื่องมือของคุณ

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

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

ในการดำเนินการอย่างถูกต้อง คุณต้องซิงโครไนซ์เครื่องมือของคุณ:

• ตั้งค่าโปรไฟล์สีที่แสดงเป็น sRGB: ไปที่ System Preferences - Displays - Color แล้วเลือก sRGB IEC61966-2.1

• ใน Digital Color Meter หรือเครื่องมือเลือกสีอื่นๆ ให้เลือกแสดงใน sRGB

• ตรวจสอบว่าโปรไฟล์สีในจานสี Xcode ถูกตั้งค่าเป็น Device RGB

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

ใน Xcode 9 อย่าลืม รักษาข้อมูลเวกเตอร์ เมื่อจำเป็น แม้ว่ามันจะเพิ่มขนาดแอพ แต่ก็จะช่วยให้คุณใช้รูปภาพของคุณกับขนาดที่แสดงได้ อย่างไรก็ตาม ใน iOS 10 และระบบปฏิบัติการมือถือของ Apple เวอร์ชันก่อนหน้า รูปภาพ จะไม่ถูกขยายขนาด โดยใช้ข้อมูลเวกเตอร์เพิ่มเติม

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

สุดท้ายนี้ นักพัฒนาซอฟต์แวร์จะต้องตรวจสอบให้แน่ใจว่าขนาดและระยะทางตรงกับการออกแบบดั้งเดิมให้ใกล้เคียงที่สุด หากมีข้อมูลที่น่าสงสัยใน Zeplin คุณสามารถวัดระยะทางระหว่างส่วนประกอบ iOS UI ต่างๆ กับกฎต่างๆ ของหน้าจอได้ หนึ่งในนั้นคือ xScope ไม้บรรทัดบนหน้าจอพร้อมฟีเจอร์ที่ใช้งานได้จริงมากมาย

ทำให้การออกแบบ UI iOS ของคุณมีชีวิตชีวา

เมื่อพูดถึงการนำการออกแบบ UI ของ iOS ไปใช้ มีแนวทางให้เลือกดังนี้: Storyboard, XIB และโค้ดที่กำหนดเอง

• กระดานเรื่องราว - แสดงภาพหน้าจอและการนำทางระหว่างกัน แต่ไม่มีตัวเลือกในการสืบทอดการออกแบบจากคอนโทรลเลอร์ตัวหนึ่งไปยังอีกตัวหนึ่ง

• XIBs - แสดงภาพหน้าจอเดียวหรือบางส่วนของหน้าจอ ง่ายต่อการสืบทอด ก่อนหน้า Xcode 9 ไม่มีตัวเลือกให้ใช้คำแนะนำเลย์เอาต์บน/ล่าง ในขณะที่ใน Xcode 9 เราสามารถใช้ Safe Area ได้

• รหัส - เป็นตัวเลือกที่ยืดหยุ่นที่สุด แต่ไม่มีการแสดงภาพในทันที

สำหรับสตอรี่บอร์ด คุณจะต้องแยกการออกแบบของคุณออกเป็นโฟลว์ เช่น LoginFlow.storyboard, SettingsFlow.storyboard หรือ NewsFeedFlow.storyboard วิธีนี้จะทำให้สตอรี่บอร์ดของคุณมีน้ำหนักเบา

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

ดูตัวอย่างต่อไปนี้สำหรับองค์ประกอบที่ไม่ได้จัดกลุ่มและจัดกลุ่ม:

หากคุณมีวัตถุหลายชิ้นที่จัดชิดซ้าย/ขวา อย่าจัดวัตถุให้ชิดขอบด้วยออฟเซ็ต วิธีที่ดีกว่าคือการจัดแนวให้สอดคล้องกับองค์ประกอบก่อนหน้าหรือใช้ _ffset view_ พิเศษที่มีข้อจำกัดความกว้าง หากคุณต้องการเปลี่ยนออฟเซ็ตในอนาคต การทำเช่นนี้จะทำให้ง่ายขึ้นบ้าง

ในการใช้สีใน IB คุณสามารถเตรียมจานสีที่ด้านล่างของ Xcode Color Picker

หมายเหตุ: หากเวอร์ชัน iOS ขั้นต่ำของแอปคือ 11 คุณสามารถใช้ตัวเลือก "สีที่มีชื่อ" ในแคตตาล็อกสินทรัพย์ได้

ห่อ

แค่นั้นแหละ. ตอนนี้เราแค่ต้องส่งผลไปยังทีม QA ตรวจสอบว่าทุกอย่างเรียบร้อยดี และ voila! แอพที่สมบูรณ์แบบพิกเซลของเราพร้อมแล้ว

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