จะเป็นประโยชน์ต่อคุณมากถ้าคุณรู้ข้อกำหนดของการเลือกใช้ element ต่างๆที่มีอยู่มากมายใน iOS ระหว่างที่คุณกำลังออกแบบหน้าตาของแอปพลิเคชั่นของคุณ คุณควรจำไว้เสมอว่า “ผู้ใช้คาดหวังที่จะเห็นสิ่งที่เค้าคุ้นเคย และใช้งานแอปพลิเคชันของคุณแบบเดียวกันกับแอปพลิเคชันอื่นๆที่เค้าเคยใช้มาก่อนในเครื่อง ”
Bar
Status bar, navigation bar, tab bar และ tool bar คือส่วนประกอบบังคับที่ต้องมีในแอปพลิเคชัน แถบต่างๆนี้ไม่จำเป็นต้องมีอยู่ในทุกๆแอปพลิเคชัน บางแอปจะไม่แสดงบางอัน แต่ถ้ามันถูกแสดง คุณควรจะต้องใช้ให้ถูกต้องนะคะ
Status bar (แถบแสดงสถานะ)
มีไว้เพื่อแสดงข้อมูลสำคัญเกี่ยวกับตัวเครื่องและสภาวะแวดล้อมปัจจุบัน
status bar
http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html
Appearance and Behavior
แถบแสดงสถานะจะปรากฏอยู่ตรงส่วนบนสุดของหน้าจอไม่ว่าเครื่องจะอยู่ในทิศทางใดก็ตาม และจะแสดงข้อมูลต่างๆเช่นการเชื่อมต่ออินเตอร์เนต เวลา และปริมาณคงเหลือของแบตเตอรี่
” สำหรับไอโฟน แถบแสดงสถานะจะเป็นสีอะไรก็ได้ แต่ไอแพดจะต้องเป็นสีดำเท่านั้น ”
Guidelines
1.การซ่อนstatus bar( แถบแสดงสถานะ ) คุณไม่ควรทำถ้าแอปพลิเคชันของคุณไม่ใช่เกมส์หรือต้องแสดงผลการดูแบบเต็มจอเพราะมันจะกระทบต่อการใช้งานของผู้ใช้ เช่นสมมุติว่าเค้าต้องการจะชาตแบตเตอรี่เครื่อง ก็จะต้องออกจากแอปของคุณก่อนซึ่งก็จะทำให้เค้าใช้งานยากขึ้น
*ในกรณีของไอแพด ยิ่งไม่จำเป็นเลยที่จะต้องซ่อนมัน เพราะ status bar ใช้พื้นที่หน้าจอน้อยมาก หน้าตาของมันก็ไม่ได้กระทบกับผู้ใช้มากด้วยเนื่องจากมันเป็นสีดำ ดูกลมกลืนเป็นส่วนเดียวกันไปกับตัวเครื่อง
2. การซ่อนstatus bar และUI ต่างๆ ขณะที่คนกำลังใช้โหมดเต็มจอ คุณต้องออกแบบให้ผู้ใช้สามารถเรียกสิ่งนั้นๆกลับมาด้วยการเคาะครั้งเดียว อย่างน้อยที่สุด ถ้าคุณมีเหตุผลที่ต้องซ่อนจริงๆ ควรหลีกเลี่ยงการให้ผู้ใช้หาทางนำ status bar กลับมาเองเพราะผู้ใช้จะไม่ชอบที่จะหาวิธีหรือจดจำมัน
3.เครื่องบ่งชี้เครือข่ายอินเตอร์เนต (network indicator) จะปรากฏอยู่ในแถบนี้ด้วย เพื่อแสดงให้ผู้ใช้รู้ถึงระดับสัญญาณของอินเตอร์เนตในช่วงนั้นๆ
4. สีของ status bar สำหรับไอโฟน ควรใช้สีเทา สีดำทึบ หรือสีดำโปร่งใส (ค่าอัลฟ่า 0.5) เวลาใช้ควรเลือกใช้สีของ status bar ที่เหมาะกับส่วนอื่นๆในแอป เช่น หลีกเลี่ยงการใช้ status bar โปร่งใส ในขณะที่ navigation bar เป็นสีทึบ
การเปลี่ยนสีของ status bar บนไอโฟนควรจะเป็นแบบเคลื่อนไหว แถบเก่าจะค่อยๆเคลื่อนที่ออกพอดีกับที่แถบใหม่เคลื่อนเข้ามาแทนที่
http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html
Navigation Bar
ชื่อก็บอกว่าเป็นแถบนำทางนะคะ มันก็คือสิ่งที่จะนำเราเข้าไปสู่ข้อมูลเป็นลำดับ เป็นขั้นๆไป อีกทั้งยังช่วยในการจัดการกับเนื้อหาบนหน้าจอด้วยค่ะ
http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html
Appearance and Behavior
Navigation Barจะปรากฏอยู่ตรงส่วนบนของหน้าจอ ต่อลงมาจากแถบแสดงสถานะ แถบนี้จะแสดงหัวข้อของหน้านั้นๆ ซึ่งจะอยู่ตำแหน่งตรงกลางของแถบ เมื่อเข้าไปในส่วนของข้อมูลที่ลึกเข้าไปเรื่อยๆ ผู้ใช้สามารถกลับสู่หน้าก่อนหน้าด้วยการกดที่ปุ่ม back
ทุกๆปุ่มใน navigation bar จะเป็นแบบมีขอบ ถ้าคุณวางปุ่มแบบไม่มีกรอบลงไป ระบบก็จะเปลี่ยนเป็นแบบมีกรอบให้อัตโนมัติ
ข้อจำกัดที่ต่างกันระหว่างไอโฟนกับไอแพดมีอยู่ 2 อย่างคือ
1.บนไอโฟน การเปลี่ยนทิศทางจากแนวตั้งเป็นแนวนอน ระบบจะเปลี่ยนความสูงของแถบนี้ให้อัตโนมัติ แต่สำหรับไอแพด ความสูงและความโปร่งใสของแถบนำทางจะไม่เปลี่ยนแปลงตามการหมุนเปลี่ยนทิศทางนะคะ
2.บนไอโฟน จะแสดงตามขวางด้านกว้างของจอ แต่บนไอแพดจะแสดงตามมุมมอง เช่น แสดงแค่ส่วนนึงของจอที่ถูกแบ่ง ไม่ได้ยืดตามด้านขวางตลอดแนวจอค่ะ
Guidelines
คุณสามารถใช้สิ่งนี้จัดการกับข้อมูลในแต่ละมุมมองได้ หรือเพิ่มปุ่มควบคุมเพื่อจัดการสิ่งต่างๆในมุมมองนั้นๆได้
1.หัวข้อของหน้าปัจจุบันจะเป็นหัวข้อของnavigation bar เมื่อผู้ใช้เข้าไปในส่วนหน้าใหม่ จะต้องมีสองอย่างเพิ่มเข้ามา คือ
1) แถบหัวข้อควรเปลี่ยนไปเป็นชื่อหัวข้อใหม่
2)ปุ่มback จะต้องปรากฏขึ้นมาที่ฝั่งซ้ายของหัวข้อ และมันควรจะแสดงไปกับหัวข้อของหน้าก่อนหน้า
2.ข้อความใน navigation bar ต้องอ่านง่าย ตัวอักษรของระบบจะเป็นแบบที่อ่านได้ชัดเจนอยู่แล้ว แต่คุณสามารถเปลี่ยนไปใช้ตัวอักษรอื่นที่เหมาะสมกับดีไซน์ได้นะคะ
3.ควรใช้ tool bar แทน navigation bar ถ้าคุณต้องการจะแสดงปุ่มควบคุมจำนวนมากขึ้น
4. การใช้ segment control ในnavigation bar มีประโยชน์มากในการช่วยจัดการกับข้อมูลที่มีการแบ่งลำดับชั้น ทำให้ง่ายต่อผู้ใช้ในการหา แต่การใช้segment control ในนี้ คุณต้องเลือกใช้ปุ่มback อย่างถูกต้องด้วยนะคะ
5.หลีกเลี่ยงการเพิ่มปุ่มต่างๆเข้าไปใน navigation bar นอกจากจะมีพื้นที่เพียงพอ โดยปกติ navigation bar ควรจะมีแค่หัวข้อของหน้าปัจจุบัน ปุ่ม back และอีกหนึ่งปุ่มเพื่อจัดการกับการดูข้อมูล หรืออีกกรณีคือถ้าใช้ segment control ก็ควรแสดงแค่ segment control อย่างเดียวเท่านั้น ไม่ควรแสดงหัวข้อหรือปุ่มอื่นๆอีกค่ะ
6.เลือกใช้ปุ่มที่ระบบมีไว้ให้ ตามความหมายของข้อมูลที่ต้องการจะสื่อ
7.การกำหนดสีหรือความโปร่งใสของ navigation bar คุณสามารถเปลี่ยนสีได้ตามความต้องการของคุณเพื่อให้มันดูเข้ากันกับส่วนอื่นๆของแอปพลิเคชัน หรือคุณจะทำให้เป็นแบบโปร่งใสก็ได้ถ้าต้องการจะเน้นตรงส่วนของเนื้อหามากกว่า แต่อย่างไรก็ตามถ้าคุณเปลี่ยนตามใจชอบ คุณต้องมั่นใจว่ามันเข้ากันกับส่วนอื่น ตัวอย่างเช่น ไม่ควรเอาแถบนำทางโปร่งใส ไปรวมกับแถบเครื่องมือสีทึบ และอีกอย่างก็คือไม่ควรเปลี่ยนสีหรือความโปร่งใสของ navigation bar ในแต่ละหน้าที่ดูในมุมมองเดียวกันให้ต่างกันค่ะ
8.ไม่ควรเปลี่ยนรูปแบบของปุ่มback เพราะผู้ใช้เคยชินกับการใช้ปุ่มbackแบบสแตนดาร์ด ในการย้อนกลับอยู่แล้วค่ะ
9.ไม่ควรสร้างหลายๆส่วนในปุ่มback
http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html
การสร้างหลายๆส่วนของปุ่มแบคหรือที่เรียกว่า multisegment back button จะสร้างปัญหามากมายเลยค่ะ
การยืดความกว้างของ multisegment back button ทำให้มันไปอยู่ติดกับส่วนของหัวข้อมากเกินไป
ยิ่งมีหลายๆส่วนมากเท่าไหร่ พื้นที่ของแต่ละส่วนก็จะยิ่งเล็กลงๆ ซึ่งทำให้ผู้ใช้ใช้งานยากในการเลือกอันใดอันหนึ่ง
ไม่มีทางที่จะสร้าง multisegment button เพื่อบ่งชี้ถึงส่วนที่เลือกของส่วนย่อยๆแต่ละอันได้
ถ้าคุณคิดว่าผู้ใช้จะพลาดถ้าไม่มี multisegment back button ซึ่งแสดงแบบเดียวกับ breadcrumb มันหมายความว่า ผู้ใช้อาจลงไปในข้อมูลลึกหรือซับซ้อนเกินไป สิ่งที่คุณต้องทำคือการจัดเรียงข้อมูลให้ง่ายขึ้น
บนไอโฟน ความสูงของ navigation bar จะเปลี่ยนโดยอัตโนมัติ คุณต้องระวังเรื่องขนาดของมันที่คุณสร้างขึ้นมาด้วยนะคะ ว่าจะเหมาะ และสวยพอดีเมื่อมันแคบลงตอนแสดงผลบนหน้าจอแบบแนวนอนหรือไม่
