Bagaimana Anda menaklukkan tantangan merancang untuk real-estate layar besar? [Tutup]


10

Pertanyaan ini sedikit lebih subyektif, tetapi saya berharap mendapatkan perspektif baru. Saya sangat terbiasa mendesain untuk ukuran layar tertentu (biasanya 1024x768) sehingga saya merasa ukuran itu tidak menjadi masalah. Memperluas ukuran hingga 1280x1024 tidak memberi Anda cukup real estat layar untuk membuat perbedaan yang cukup besar, tetapi akan memberi saya sedikit lebih banyak ruang bernapas. Pada dasarnya, saya hanya perlu memperluas "ukuran grid" dan desain dasar yang sama untuk layar yang sedikit lebih kecil masih berfungsi.

Namun, dalam beberapa proyek terakhir, klien saya semuanya menggunakan layar 1080p (1920x1080) dan mereka menginginkan solusi untuk menggunakan sebanyak mungkin real estat itu. 1920 piksel menyediakan hanya di bawah dua kali lebar saya terbiasa, dan layar lebar membuat beberapa lama saya pergi ke pendekatan desain untuk tidak bekerja juga. Masalah yang saya hadapi adalah ketika dihadapkan dengan begitu banyak ruang, saya dihadapkan dengan beberapa masalah besar.

  • Berapa banyak kolom yang harus saya gunakan? Format lebar cocok untuk pemisahan 3 kolom dengan 2: 1: 1 split (yaitu kolom konten lebih besar dari dua lainnya). Namun, jika saya menggunakan tiga kolom, apa yang harus saya lakukan dengan kolom tambahan itu?
  • Bagaimana cara memanfaatkan layar real estat secara efisien ? Ada godaan untuk meletakkan semuanya di layar sekaligus, tetapi terlalu banyak informasi justru membuat aplikasi lebih sulit untuk digunakan. Ruang putih penting untuk membantu memahami informasi yang rumit, tetapi terlalu banyak membuat konsep terkait terlihat terlalu terpisah.
  • Saya biasanya bekerja dengan aplikasi web yang memiliki data kompleks, dan visualisasi dan presentasi adalah kunci untuk memahami data mentah. Ketika pengguna Anda juga memiliki layar besar (setidaknya 24 "), beberapa informasi tidak terlihat dan Anda perlu memindahkan penunjuk jarak jauh. Bagaimana Anda memastikan semua yang dibutuhkan tetap berada dalam titik panas visual?
  • Situs sederhana seperti blog sebenarnya lebih baik ketika lebar dibatasi, yang menghasilkan banyak real estat terbuang. Saya agak bertanya-tanya apakah memiliki kotak teks dan pratinjau teks berdampingan akan menjadi manfaat besar bagi sisi admin dari jenis layar? (1: 1 dua kolom dibagi).

Untuk jawaban Anda, saya tahu hampir semuanya dalam desain adalah "itu tergantung". Yang saya cari adalah:

  • Prinsip umum yang Anda gunakan
  • Bagaimana pendekatan Anda terhadap desain telah berubah

Saya menemukan bahwa saya harus melatih diri sendiri bagaimana bekerja dengan format yang berbeda ini. Setiap benjolan dalam resolusi yang saya kerjakan hingga saat ini adalah sekitar 25%: 640 hingga 800 (peningkatan 25%), 800 hingga 1024 (peningkatan 28%), dan 1024 hingga 1280 (peningkatan 25%). Namun, lompatan dari 1280 ke 1920 adalah peningkatan ruang yang baik 50% - setara dengan melompat dari 640 langsung ke 1024. Tidak ada ukuran menengah yang biasa digunakan untuk membantu belajar pelajaran secara lebih bertahap.


Bisakah Anda membuat kontrol UI lebih besar untuk mengisi ruang kosong ...?
FrustratedWithFormsDesigner

@ Frustasi: Bukankah itu mengalahkan tujuan, kecuali jika Anda mendesain, katakanlah, layar sentuh?
Michael K

@Michael: well, OP sepertinya tidak ingin mengubah jumlah kontrol yang terlihat karena akan membuat program lebih sulit untuk digunakan, dan juga tidak suka memiliki ruang kosong. Jika tidak ada fitur baru untuk mengisi ruang, maka ruang perlu diisi dengan ...?
FrustratedWithFormsDesigner

2
Ini lebih merupakan masalah mencoba memperluas pikiran saya untuk kontrol baru dan cara berinteraksi dengan situs. Hanya membuat segala sesuatu yang lebih besar mengalahkan tujuannya. Kemudian Anda memiliki "sindrom tombol merah besar mengkilap" atau teks yang terasa seperti Anda membaca satu judul besar. Ketika mencoba menyeimbangkan masalah desain, itu benar-benar masalah yang kompleks.
Berin Loritsch

1
@Berin: Jika mereka membuat permintaan khusus untuk ukuran antarmuka Super-size dan itu adalah HANYA perubahan besar, beri tahu mereka bahwa Anda memiliki keprihatinan tentang tata letak dan desain dan tanyakan kepada mereka apakah mereka memiliki ide tentang bagaimana ruang dapat dimanfaatkan dengan sebaik-baiknya. Bagaimanapun mereka adalah pengguna dan mereka pasti memiliki alasan untuk membuat permintaan khusus ini. Mungkin mereka akan mengatakan "letakkan widget dasbor di ruang kosong" atau sesuatu seperti itu ... kirim tangkapan layar mockup dengan ruang kosong besar teks yang mengatakan "Apa yang Anda inginkan di sini?" Pastikan kekhawatiran Anda tentang desain ini diketahui.
FrustratedWithFormsDesigner

Jawaban:


1

Ini adalah bagaimana saya mendekati masalah ini.

Saya akan mulai dengan memotong data saya menjadi blok logis. Saya bahkan mungkin melangkah lebih jauh dengan membuat file ascx yang berbeda untuk setiap blok logis. Setiap blok akan tahu bagaimana suka ditampilkan (lebar minimum / maks). Saya akan melakukan ini b / c Saya tidak suka menulis ulang kode dan jika ada kemungkinan aplikasi perlu diperluas untuk mendukung berbagai ukuran resolusi, maka ini akan membantu membuatnya lebih mudah pada kontrol berdasarkan kontrol.

Selanjutnya, saya akan membuat style sheet baru untuk resolusi yang lebih besar. Buat tombol dan tuju lebih besar. Tambahkan lebih banyak ruang putih di sekitar elemen. Dengan cara ini beralih di antara kedua jenis resolusi hanya dengan mengganti lembar gaya.

Sekarang sampai pada bagian yang sulit, tata letak. Seperti yang Anda katakan, tata letak akan sangat berbeda dengan jumlah real estat itu. Jawaban cop-out adalah mengizinkan pengguna untuk menempatkan elemen di tempat yang mereka inginkan, seperti halaman iGoogle. Pengguna dapat memilih 2 atau 3 kolom sesuai keinginan mereka. Karena saya tidak tahu jenis layar apa yang sedang Anda buat, saya tidak tahu apakah ini akan bekerja untuk Anda.

Jawaban cop-out kedua adalah menyewa ahli UI untuk membantu Anda mendesain halaman ini. Setelah bekerja dengan spesialis UI di masa lalu, saya dapat mengatakan itu layak 100% untuk mendapatkan pendapat ahli tentang hal-hal seperti ini. Mereka dapat menunjukkan masalah dan menyarankan solusi sebelum klien bahkan melihat produk.

Jika saya harus melakukannya sendiri, saya akan menempatkan barang-barang tetap di sisi, dan memiliki area tengah tumbuh untuk mengisi sisa ruang. Punya data yang bisa tumbuh mengisi bagian tengah.

Tidak yakin seberapa membantu ini bagi Anda, tetapi saya harap ini memberi Anda beberapa ide.


Ini mungkin jawaban paling masuk akal yang saya dapatkan di UI dan programmer untuk pertanyaan ini. Ini jauh lebih berguna daripada "membuat semuanya lebih besar" yang adalah apa yang orang-orang UI katakan kepada saya. CATATAN: aspx adalah istilah khusus teknologi, tetapi memotong UI menjadi file terpisah adalah pendekatan yang tepat.
Berin Loritsch


2

Saya bukan ahli UI, tetapi saya menggunakan layar 1920x1080 setiap hari dengan Eclipse. Eclipse memiliki antarmuka yang sangat mudah dikonfigurasi, dan berikut adalah beberapa pengamatan saya ketika beralih antara 1280 dan 1920:

  • Di kedua resolusi, saya ingin melihat jendela saya bekerja dalam ukuran yang sama. Pada resolusi yang lebih kecil, saya cenderung menyembunyikan panel ekstra, sedangkan pada resoultion yang lebih tinggi, saya mengeluarkan lebih banyak panel.
  • Saya lebih suka tombol yang sedikit lebih besar. Mereka akan mengambil lebih sedikit ruang secara proporsional pada monitor yang lebih besar dan membuat tindakan mouse saya lebih cepat.
  • Saya sering memperluas pratinjau untuk menggunakan seluruh layar, yaitu kode di sebelah kiri, pratinjau di sebelah kanan. Itu akhirnya menjadi format dua kolom. Selain itu, saya menggunakan 3-kolom dengan catatan kaki:
    1. Kiri: Navigasi file
    2. Tengah: Kode (Terbesar, mungkin 2/3 dari lebar layar)
    3. Kanan: Navigasi kode dan tugas
    4. Footer: Status (Konsol, server, dll. Cukup pendek, mungkin tinggi layar 1 / 5-1 / 6)

Saya kadang-kadang juga menempatkan pandangan dan pengontrol di sebelah satu sama lain dalam mode 2-kolom, tapi itu pasti programmer khusus. :)

Ketika berada di layar yang lebih besar, saya ingin menggunakannya untuk melihat sebanyak mungkin informasi, sementara masih mudah ditemukan. Lebih banyak ruang di sekitar komponen membantu membedakan antara kumpulan informasi. Ikon pada tab adalah salah satu cara untuk membantu menarik perhatian pada arti setiap komponen.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.