รูปภาพ UIBarButtonItem ควรมีขนาดใหญ่แค่ไหน?

130

ฉันต้องการสร้างปุ่มเรียงตามวันที่และเรียงตามตัวเลขที่กำหนดเองซึ่งฉันวางแผนจะวางในแถบนำทางเป็นปุ่มด้านขวา

รูปภาพของฉันควรมีขนาดใหญ่เพียงใดเพื่อให้เต็มพื้นที่อย่างเหมาะสม - หน้าเอกสารUIBarItemไม่ได้แสดงรายการเกี่ยวกับขนาดของรูปภาพ

— Epsilon Prime
แหล่งที่มา

237

สำหรับ iOS 11 แนวทางอินเทอร์เฟซสำหรับมนุษย์แนะนำให้ร่ายมนตร์อยู่ที่ประมาณ 25 × 25 พอยต์ในแถบเครื่องมือและแถบการนำทางสูงสุดประมาณ 28 จุด (และ HIG ควรอยู่ในบุ๊กมาร์กของคุณอย่างแน่นอนหากคุณกำลังทำงานกับแอพ iOS!)

นั่นจะแปลเป็นภาพสี่เหลี่ยม 25px สำหรับอุปกรณ์รุ่นเก่าเช่น iPad 2 / Mini สี่เหลี่ยม 50px สำหรับอุปกรณ์ปัจจุบันส่วนใหญ่เช่น iPhone 8 หรือ iPad และสี่เหลี่ยม 75px สำหรับอุปกรณ์ Retina HD (iPhone 6/7/8 Plus หรือ iPhone X) แคตตาล็อกเนื้อหาจะช่วยได้อย่างมากในการจัดระเบียบขนาดเนื้อหาที่แตกต่างกัน (และ Xcode ยังสามารถสร้างจากแหล่งเวกเตอร์ได้ในปัจจุบัน )

— Sixten Otto
แหล่งที่มา

1

ขอบคุณสิ่งที่ฉันต้องรู้รวมกับตัวชี้ไปยังเอกสารที่ยอดเยี่ยม บุ๊คมาร์ค

— Epsilon Prime

1

ฉันหวังว่า Mobile HIG จะมีประโยชน์มากกว่า "ประมาณ 20x20" หากคุณใช้รูปภาพขนาด 20x20px จริงๆมันจะไม่จับคู่ 1: 1 และปุ่มจะไม่เป็นสี่เหลี่ยมจัตุรัส

— Clafou

1

Clafou คุณกำลังพูดถึงรูปภาพสำหรับเนื้อหาของปุ่ม (ตามคำถามนี้) หรือจะใช้เป็นพื้นหลังของปุ่ม (ด้วย API การปรับแต่งรูปลักษณ์)? คุณได้โพสต์คำถามเกี่ยวกับเรื่องนี้หรือไม่?

— Sixten Otto

คุณสามารถดูขนาดต่างๆที่ Apple ใช้โดยดูภาพที่ Apple มีได้ที่นี่: developer.apple.com/library/ios/#documentation/uikit/reference/…

— JasonZ

1

สำหรับ iOS 7 โปรดดูคำตอบของ @ hashier

— Rudolf Adamkovič

46

หลักเกณฑ์ของมนุษย์ Interfaceบอกคุณนี้ตั้งแต่ iOS7:

ไม่ว่ารูปแบบภาพของไอคอนจะเป็นอย่างไรให้สร้างแถบเครื่องมือหรือไอคอนแถบนำทางในขนาดต่อไปนี้:

ประมาณ 44 x 44 พิกเซล

ประมาณ 22 x 22 พิกเซล (ความละเอียดมาตรฐาน)

นี่คือเมทริกซ์ที่ยอดเยี่ยมของทุกขนาดที่จำเป็นสำหรับทรัพยากรสำหรับทุกแพลตฟอร์ม

— hashier
แหล่งที่มา

19

ใช่ Apple แนะนำให้ใช้รูปภาพที่มีขนาด 22px, 44px และ 66px สำหรับUIBarButtonItemsแต่ถ้าคุณใช้ไอคอนที่ติดตั้งไว้ล่วงหน้าเช่นไอคอนบุ๊กมาร์กจะมีขนาด 25px 50px และ 75px สำหรับ 1x, 2x และ 3x ตามลำดับ

นี่คือ 2 ไอคอนในUIToolbar. ทางด้านขวาคือไอคอนบุ๊กมาร์กระบบของ Apple และทางด้านซ้ายไอคอนที่กำหนดเองของฉัน

นี่คือไอคอนที่กำหนดเองของฉันขนาด 22px-44px-66px:

และที่นี่ 25px-50px-75px:

ดังนั้นหากคุณใช้ไอคอนแบบกำหนดเองและไอคอนระบบในแถบเครื่องมือเดียวฉันขอแนะนำให้ใช้การปรับขนาด 25px-50px-75px มิฉะนั้นไอคอนที่กำหนดเองของคุณจะมีขนาดเล็กลง อันที่จริงฉันใช้การปรับขนาด 25px-50px-75px เสมอมันดูดีกว่าบนแถบเครื่องมือสำหรับฉัน

— ปีเตอร์ Tretyakov
แหล่งที่มา

1

ขอบคุณสำหรับสิ่งนั้น! ฉันแน่ใจว่าไอคอนบางอย่างเช่นบุ๊กมาร์กมีขนาดใหญ่กว่าขนาด

— 22-44-66px เล็กน้อย

1

ฉันได้ลอง25px-50px-75pxและมันก็ดูดีมาก ไม่เล็กไม่ใหญ่

— MBH

-4

ง่าย: รวมภาพของคุณใน Assets.xcassets

อย่างไร?

คลิบน Assets.xcassets
ไอคอน Clic + จากนั้นคลิก "New Image Set"
ลากและวางรูปภาพของคุณลงในช่อง 3x
เปลี่ยนชื่อชุดรูปภาพ
ใน BarButton คุณสามารถใช้ชื่อนี้ในฟิลด์ "รูปภาพ"

— jobima
แหล่งที่มา

3

สิ่งนี้ตอบคำถามเรื่องขนาดได้อย่างไร?

— Andrea Lazzarotto

@AndreaLazzarotto จุดดี แต่คำตอบนี้รวมถึงข้อมูลสำคัญที่เหลืออยู่ในคำตอบอื่น ๆ

— paul