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

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

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

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

หลังจากอินเทอร์เฟซลงสู่พื้นแท็บ “”แถบ”” ก็เป็นตัวควบคุมโดยตรงที่สุดสำหรับการแสดงเฟรมเวิร์กผลิตภัณฑ์แก่ผู้ใช้ที่เลเยอร์การนำเสนอ

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

ดังนั้นเมื่อพูดถึงแถบแท็บฉันต้องเปรียบเทียบเงินบาทและฉันจะแบ่งมันเป็นสามขั้นตอน

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

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

ความสูงของแถบแท็บในหน้าเป้าหมายใด ๆ เป็นค่าคงที่และ iOS มีความสูง 98px (iOS @ 2x) อย่างไรก็ตามเนื่องจาก iPhone X ได้เปิดตัว Home Bar สำหรับโทรศัพท์แบบเต็มหน้าจอคุณต้องเพิ่มความสูง 68px ของ Home Bar เมื่อทำการปรับอินเทอร์เฟซ

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

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

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

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

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

หากคุณอายเพราะโครงสร้างผลิตภัณฑ์นั้นซับซ้อนมาก … จริง ๆ แล้วการออกแบบวัสดุจะไม่ปฏิบัติต่อคุณ

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

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

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

2.2 เลย์เอาต์ฉลาก
เลเบลเลเบลที่ทุกคนเห็นมากควรเป็น: เลเบลแต่ละอันจะกระจายอย่างเท่าเทียมกันในคอลัมน์เลเบลและไอคอนและข้อความเลเบลใช้โครงสร้างด้านบนและล่าง

ในความเป็นจริงสเปคยังให้ข้อมูลจำเพาะเกี่ยวกับสไตล์การพิมพ์อื่น ๆ

 

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

แต่ถ้าแอปสามารถแสดงในโหมดแนวนอนหรือถ้ามันรองรับอุปกรณ์แท็บเล็ต:

ใช้โครงสร้างส่วนบนและส่วนล่าง:ทำตามกฎสำหรับจำนวนฉลากในโหมดแนวตั้งและรักษาระยะห่างเดิมที่ใช้ในโหมดแนวตั้งแทนที่จะกระจายในคอลัมน์ฉลากอย่างสม่ำเสมอ
ใช้โครงสร้างซ้ายและขวา:ขอแนะนำให้กระจายฉลากอย่างสม่ำเสมอในคอลัมน์ฉลาก

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

ไม่ว่าโหมดหน้าจอจะมีการแก้ไขความสูงของแถบแท็บและขนาดของไอคอนแท็บซึ่งแตกต่างจาก iOS มาก

2.2.2 เลย์เอาต์เลเบลบน iOS

ข้อกำหนดของ iOS สำหรับเลย์เอาต์ฉลากค่อนข้างสม่ำเสมอ

โทรศัพท์มือถือโหมดแนวตั้งภายใต้เสมอ “”ไอคอน + ป้ายข้อความ”” โครงสร้างแนวตั้งรูปแบบ; โหมดขวางภายใต้เสมอ “”+ ข้อความฉลากไอคอน”” รอบโครงสร้างรูปแบบ ต่างจากการออกแบบวัสดุไม่จำเป็นต้องเปลี่ยนข้อความฉลากตามจำนวนฉลาก

อย่างไรก็ตามความสูงของแถบแท็บและขนาดขององค์ประกอบจะเปลี่ยนไปตามโหมดหน้าจอ

แถบแท็บภายใต้อุปกรณ์มือถือ iOS ของคุณเรียกว่าโหมดยาวของชนิดธรรมดาโหมดแท็บบาร์แนวนอนที่เรียกว่ามีขนาดกะทัดรัด

ข้อมูลจำเพาะขนาดไอคอนและป้ายชื่อตัวอย่างจะแสดงในรูปต่อไปนี้:

 

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

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

Android ไม่สนับสนุนกระจกฝ้าตามธรรมชาติดังนั้นการออกแบบวัสดุแนะนำให้ใช้การแบ่งส่วนสี แน่นอนว่าแอปพลิเคชั่นในประเทศอื่น ๆ ได้สำรวจรูปแบบการแบ่งส่วนภาพอื่น ๆ แล้ว

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

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

ไม่ว่าจากระดับการมองเห็นหรือระดับการโต้ตอบแถบแท็บมีคะแนนมากมายให้สำรวจ

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

ผู้แต่ง: Howie_t; จำนวนสาธารณะ: UCD เล่นที่บ้าน (ID: ucdplayer)

ตอนแรกบทความนี้สร้างโดย @Howie_t และทุกคนเป็นผู้จัดการผลิตภัณฑ์ ห้ามทำซ้ำโดยไม่ได้รับอนุญาต

ภาพจาก unsplash ตามโปรโตคอล CC0

หมวดหมู่