คุณพิชิตความท้าทายในการออกแบบอสังหาริมทรัพย์หน้าจอขนาดใหญ่ได้อย่างไร [ปิด]


10

คำถามนี้เป็นเรื่องส่วนตัวมากขึ้น แต่ฉันหวังว่าจะได้มุมมองใหม่ ฉันคุ้นเคยกับการออกแบบสำหรับขนาดหน้าจอที่แน่นอน (ปกติแล้วคือ 1024x768) ซึ่งฉันพบว่าขนาดนั้นไม่เป็นปัญหา การขยายขนาดเป็น 1280x1024 ไม่ได้ช่วยให้คุณซื้ออสังหาริมทรัพย์ที่เพียงพอเพื่อสร้างความแตกต่างที่น่าพึงพอใจ แต่จะทำให้ฉันมีห้องหายใจเพิ่มขึ้นอีกเล็กน้อย โดยพื้นฐานแล้วฉันเพิ่งขยาย "ขนาดกริด" ของฉันและการออกแบบขั้นพื้นฐานเดียวกันสำหรับหน้าจอขนาดเล็กกว่ายังคงใช้งานได้

อย่างไรก็ตามในสองสามโครงการสุดท้ายลูกค้าของฉันทั้งหมดใช้จอ 1080p (1920x1080) และพวกเขาต้องการโซลูชันที่ใช้อสังหาริมทรัพย์มากที่สุดเท่าที่จะทำได้ ความกว้างของพิกเซลที่ 1920 มีเพียงสองเท่าของความกว้างที่ฉันเคยใช้และหน้าจอกว้างทำให้บางส่วนของเก่าของฉันไปที่วิธีการออกแบบไม่ทำงานเช่นกัน ปัญหาที่ฉันพบคือเมื่อนำเสนอด้วยพื้นที่มากฉันต้องเผชิญกับปัญหาที่สำคัญบางอย่าง

  • ฉันควรใช้คอลัมน์กี่คอลัมน์ รูปแบบแบบกว้างให้ตัวเองแยกคอลัมน์ 3 โดยแยก 2: 1: 1 (เช่นคอลัมน์เนื้อหาที่ใหญ่กว่าอีกสองคอลัมน์) อย่างไรก็ตามถ้าฉันไปกับสามคอลัมน์ฉันจะทำอย่างไรกับคอลัมน์พิเศษนั้น
  • ฉันจะใช้งานอสังหาริมทรัพย์อย่างมีประสิทธิภาพได้อย่างไร มีสิ่งล่อใจที่จะทำให้ทุกอย่างบนหน้าจอพร้อมกัน แต่ข้อมูลที่มากเกินไปทำให้แอปพลิเคชันใช้งานได้ยากขึ้น พื้นที่สีขาวเป็นสิ่งสำคัญที่จะช่วยให้เข้าใจข้อมูลที่ซับซ้อน แต่มากเกินไปทำให้แนวคิดที่เกี่ยวข้องดูแยกออก
  • ฉันมักจะทำงานกับเว็บแอปพลิเคชันที่มีข้อมูลที่ซับซ้อนและการสร้างภาพและการนำเสนอเป็นกุญแจสำคัญในการทำความเข้าใจกับข้อมูลดิบ เมื่อผู้ใช้ของคุณมีหน้าจอขนาดใหญ่ (อย่างน้อย 24 ") ข้อมูลบางอย่างไม่อยู่ในสายตาและคุณจำเป็นต้องเลื่อนตัวชี้ในระยะทางไกลคุณจะแน่ใจได้อย่างไรว่าทุกสิ่งที่ต้องการอยู่ในจุดที่มองเห็นได้
  • เว็บไซต์อย่างง่ายเช่นบล็อกนั้นทำได้ดีกว่าเมื่อความกว้างถูก จำกัด ฉันสงสัยว่าการมีกล่องข้อความและการแสดงตัวอย่างข้อความแบบเคียงข้างกันจะเป็นประโยชน์อย่างมากสำหรับผู้ดูแลระบบของหน้าจอประเภทนั้นหรือไม่ (แบ่ง 1: 1 สองคอลัมน์)

สำหรับคำตอบของคุณฉันรู้ว่าเกือบทุกอย่างในการออกแบบคือ "มันขึ้นอยู่กับ" สิ่งที่ฉันกำลังมองหาคือ:

  • หลักการทั่วไปที่คุณใช้
  • วิธีการออกแบบของคุณเปลี่ยนไปอย่างไร

ฉันพบว่าฉันต้องฝึกตัวเองใหม่เพื่อทำงานกับรูปแบบที่แตกต่างกันนี้ ความละเอียดชนทุกครั้งที่ฉันทำงานจนถึงปัจจุบันมีประมาณ 25%: 640 ถึง 800 (เพิ่มขึ้น 25%), 800 ถึง 1024 (เพิ่มขึ้น 28%) และ 1024 ถึง 1280 (เพิ่มขึ้น 25%) อย่างไรก็ตามการกระโดดจาก 1280 ถึง 1920 เป็นพื้นที่เพิ่มขึ้น 50% ที่ดี - เทียบเท่าจากการกระโดดจาก 640 ตรงไปที่ 1024 ไม่มีขนาดกลางที่ใช้กันทั่วไปเพื่อช่วยให้เรียนรู้บทเรียนได้ช้าลง


คุณช่วยให้ UI ควบคุมใหญ่ขึ้นเพื่อเติมเต็มช่องว่าง ... ?
FrustratedWithFormsDesigner

@ เฟร็ด: นั่นจะไม่ทำลายวัตถุประสงค์เว้นแต่คุณจะออกแบบพูดหน้าจอสัมผัสหรือไม่?
Michael K

@Michael: โอพีดูเหมือนจะไม่ต้องการเปลี่ยนจำนวนการควบคุมที่มองเห็นได้เพราะมันจะทำให้โปรแกรมใช้งานได้ยากขึ้นและก็ไม่ชอบที่จะมีที่ว่าง หากไม่มีคุณสมบัติใหม่ในการเติมพื้นที่ด้วยพื้นที่นั้นจะต้องเต็มไปด้วย ... ?
FrustratedWithFormsDesigner

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

1
@Berin: ถ้าพวกเขาทำคำขอเฉพาะขนาดอินเทอร์เฟซ Super-sized และนั่นเป็นการเปลี่ยนแปลงที่สำคัญเพียงอย่างเดียวบอกพวกเขาว่าคุณมีความกังวลเกี่ยวกับรูปแบบและการออกแบบและถามพวกเขาหากพวกเขามีแนวคิดเกี่ยวกับวิธีการใช้พื้นที่ หลังจากพวกเขาเป็นผู้ใช้และพวกเขาต้องมีเหตุผลในการทำคำขอเฉพาะนี้ พวกเขาอาจจะพูดว่า "ใส่วิดเจ็ตแดชบอร์ดในพื้นที่ว่าง" หรืออะไรทำนองนั้น ... ส่งภาพหน้าจอ mockup ที่มีช่องว่างขนาดใหญ่ข้อความบอกว่า "คุณต้องการอะไรที่นี่?" ตรวจสอบให้แน่ใจว่าความกังวลของคุณเกี่ยวกับการออกแบบนี้เป็นที่รู้จัก
FrustratedWithFormsDesigner

คำตอบ:


1

นี่คือวิธีที่ฉันจะแก้ไขปัญหานี้

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

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

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

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

ถ้าฉันต้องทำด้วยตัวเองฉันจะวางสิ่งของไว้ที่ด้านข้างและให้พื้นที่ตรงกลางโตขึ้นเพื่อเติมเต็มพื้นที่ที่เหลือ มีข้อมูลใด ๆ ที่สามารถเติบโตได้เติมส่วนตรงกลาง

ไม่แน่ใจว่ามีประโยชน์กับคุณแค่ไหน แต่ฉันหวังว่ามันจะให้ความคิดกับคุณ


นี่อาจเป็นคำตอบที่สมเหตุสมผลที่สุดที่ฉันได้รับทั้ง UI และโปรแกรมเมอร์สำหรับคำถามนี้ มันมีประโยชน์มากกว่า "ทำให้ทุกอย่างใหญ่ขึ้น" ซึ่งเป็นสิ่งที่คน UI บอกฉัน หมายเหตุ: aspx เป็นคำศัพท์เฉพาะทางเทคโนโลยี แต่การแบ่ง UI เป็นไฟล์แยกต่างหากเป็นวิธีการที่เหมาะสม
Berin Loritsch

4

ฉันจะบอกว่าถ้าคุณไม่สามารถใช้พื้นที่เพิ่มเติมโดยการเพิ่มข้อมูล / การควบคุมเพิ่มเติมฉันจะบอกว่าทำให้เนื้อหาที่มีอยู่และการควบคุมมีขนาดใหญ่ขึ้น

ทำไม? เพราะตามกฎหมาย Fitt ของ สิ่งที่ใหญ่กว่าจะง่ายต่อการใช้

อาจถามได้ที่https://ux.stackexchange.com/หรือhttps://graphicdesign.stackexchange.com/


2

ฉันไม่ใช่ผู้เชี่ยวชาญ UI แต่ฉันใช้หน้าจอ 1920x1080 ทุกวันกับ Eclipse Eclipse มีอินเตอร์เฟสที่ปรับแต่งได้ง่ายและนี่คือข้อสังเกตของฉันเมื่อสลับระหว่าง 1280 และ 1920:

  • ที่ความละเอียดทั้งสองฉันต้องการดูหน้าต่างที่ฉันทำงานในขนาดเดียวกัน ในความละเอียดขนาดเล็กฉันมักจะซ่อนแผงเพิ่มเติมในขณะที่ resoultion ที่สูงขึ้นฉันวางแผงเพิ่มเติม
  • ฉันต้องการปุ่มที่ใหญ่กว่าเล็กน้อย พวกเขาจะใช้พื้นที่น้อยลงตามสัดส่วนบนจอภาพขนาดใหญ่และทำให้การกระทำเมาส์ของฉันเร็วขึ้น
  • ฉันมักจะขยายตัวอย่างเพื่อใช้ทั้งหน้าจอเช่นโค้ดด้านซ้ายตัวอย่างด้านขวา นั่นคือรูปแบบสองคอลัมน์ นอกจากนั้นฉันใช้ 3 คอลัมน์กับส่วนท้าย:
    1. ซ้าย: การนำทางไฟล์
    2. กึ่งกลาง: รหัส (ใหญ่ที่สุดอาจเป็นความกว้างหน้าจอ 2/3)
    3. ขวา: การนำรหัสและงาน
    4. ส่วนท้าย: สถานะ (คอนโซลเซิร์ฟเวอร์ ฯลฯ ค่อนข้างสั้นอาจมีความสูง 1 / 5-1 / 6 หน้าจอ)

บางครั้งฉันก็ใส่มุมมองและตัวควบคุมที่อยู่ติดกันในโหมด 2 คอลัมน์ แต่นั่นคือโปรแกรมเมอร์ที่เฉพาะเจาะจง :)

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.