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

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

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

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

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

แต่ทำไมต้องออกแบบตามพิกเซล?

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

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

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

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

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

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

สิ่งที่นักลงทุนมองหาในสตาร์ทอัพ

เครื่องมือออกแบบอินเทอร์เฟซ iOS ที่จำเป็น

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

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

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

โชคดีที่ไม่จำเป็นต้องจดสเปคของแต่ละคนเหมือนกับไฟล์ ปลั๊กอินเค้าโครงอัตโนมัติสำหรับ 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 ของเราเพิ่มความคมชัดสูงสุด ในการบรรลุเป้าหมายนี้คุณต้องเปิด พิกเซลพอดี :

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

ใช้ รอบ: พิกเซลเต็ม เมื่อแก้ไขวัตถุเวกเตอร์:

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

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

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

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

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

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

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

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

วิธีเรียก api ใน wordpress

เห็นได้ชัดว่าคุณจะต้องพึ่งพา Xcode และเครื่องมือพัฒนา iOS มาตรฐานบางอย่าง แต่เราจะดำเนินการต่อในภายหลัง

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

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

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

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

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

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

• ตั้งค่าโปรไฟล์สีที่แสดงของคุณเป็น sRGB: ไปที่ การตั้งค่าระบบ - การแสดงผล - สี และเลือก sRGB IEC61966-2.1 .

• ใน เครื่องวัดสีดิจิตอล หรือเครื่องมือเลือกสีอื่น ๆ ให้เลือกแสดงใน sRGB .

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

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

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

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

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

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

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

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

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

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

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

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

วิธีสแปมบัตรเครดิต pdf

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

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

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

บันทึก: หากเวอร์ชัน iOS ขั้นต่ำของแอปคือ 11 คุณสามารถใช้ตัวเลือก“ สีที่มีชื่อ” ในแคตตาล็อกเนื้อหา

ห่อ

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

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

ทำความเข้าใจพื้นฐาน

'พิกเซลสมบูรณ์แบบ' คืออะไร?

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

แนวคิดที่สมบูรณ์แบบของพิกเซลเกิดขึ้นได้อย่างไร?

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

เดี๋ยวก่อนนี่คือปี 2017 เราไม่มีเครื่องมือที่ดูแลเรื่องนี้หรือ

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

แนวทางที่สมบูรณ์แบบของพิกเซลเหมาะสำหรับทุกโครงการหรือไม่

ไม่มันไม่ใช่. ไม่มีเหตุผลที่จะต้องทำตามขั้นตอนทั้งหมดหากการออกแบบที่นำไปใช้ไม่เสร็จสมบูรณ์ (เช่นการจำลอง) หรือหากเป้าหมายของโครงการคือการสร้าง MVP โดยแจ้งให้ทราบสั้น ๆ หรือแม้แต่ทดสอบแนวคิดการออกแบบ โดยปกติสิ่งนี้ใช้ไม่ได้กับการทดสอบ A / B UI