[iOS Dev] Sizes of iPhone UI Elements for Designer

เรามาเขียน Blog ให้ iOS Designer กันบ้างดีกว่า ...
วันนี้จะว่าเรื่อง UI Elements พื้นฐานตัวต่างๆ บน iPhone นะครับ
ว่าถ้าเราจะลง Design เนี่ยจะต้องออกแบบ UI ส่วนไหนขนาดเท่าไรบ้าง
ตามตารางด้านล่างจะเป็น UI มาตรฐานของตัว iOS เองนะครับ


Point vs Pixels

เนื่องจากตั้งแต่ Apple เปิดตัว iPhone 4 นั้นก็ได้เปิดตัวหน้าจอใหม่ที่ชื่อว่า Retina Display ซึ่งจะมี Pixels มากกว่าเดิม 2 เท่า ดังนั้นเพื่อความเข้าใจง่าย หน่วยของการออกแบบที่ Apple ใช้จึงเป็น Point (pts) โดยที่ 1 pt = 1 pixels ในหน้าจอที่ไม่ใช่ Retina Display และเมื่อเป็น Retina Display ก็แค่คูณ 2 เข้าไป

Graphics for Retina Display

ความสบายอยู่ตรงนี้แหละ เราไม่จำเป็นที่จะต้องเปลี่ยนหรือเขียน Code อะไรเพื่อจะมารองรับหน้าจอที่เป็น Retina Display เราเพียงแค่ออกแบบ Graphics ตัวใหม่มา พร้อมกับใส่ต่อท้ายชื่อด้วย "@2x" เท่านี้ Apple จะมีเครื่องมือจัดการให้เราเองอัตโนมัติ



ส่วนเครื่องมือใน UIKit ก็ขึ้นอยู่กับเราปรับขนาดของ UI เลยครับ เป็นไปตามที่เราตั้งค่าไว้ในหน่วย Point (pts) เหมือนเดิม นั่นคือถ้าเป็น Retina Display ก็อย่าลืมออกแบบ Graphic ที่มีขนาด 2 เท่าพร้อมตั้งชื่อตามด้านบนมารองรับไว้ด้วย :)

Popular posts from this blog

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น