Apa cara terbaik untuk menunjukkan bahwa Anda dapat menggulir di suatu daerah ketika daerah itu tidak memiliki bilah gulir?


13

Satu-satunya hal yang dapat saya pikirkan adalah mengatakan: "Gulir untuk melihat menu lengkap" di atas. Apa sajakah cara orang melakukannya?


3
Panah? Konteks akan sangat berarti. Bisakah Anda memposting sampel?
Scott

2
Mengapa Anda membutuhkannya? Tidak ada scrollbar di ponsel dan OSX, orang tidak bingung.
bjb568

2
Ini adalah masalah yang disebabkan orang lain yang tidak dapat kami perbaiki, jadi kami harus mengatasinya.
Morgan

@ bjb568: Saya telah menggunakan beberapa aplikasi di mana saya tidak menyadari bahwa saya dapat menggulir ke arah tertentu. Jika layar memotong bagian dari apa yang dapat saya lihat dalam satu arah atau yang lain itu jelas, tetapi kadang-kadang hal-hal sejalan dengan layar berbatasan tepat, dan pengguna tidak menyadari bahwa mereka dapat / harus menggulir. Butuh beberapa saat untuk menyadari bahwa saya dapat menggulir ke samping di aplikasi Facebook baru misalnya.
Mooing Duck

@MooingDuck Facebook tidak masuk hitungan, itu omong kosong: P Tapi ya, Anda harus melakukan hal-hal seperti yang dikatakan Bingung.
bjb568

Jawaban:


9

Orang berhubungan baik dengan relativitas fisik dalam antarmuka pengguna. Dengan kata lain, jika Anda ingin antarmuka terasa alami, atau buat kontrolnya jelas, Anda dapat menggunakan tampilan realisme fisik untuk melakukannya. Ikon yang tepat selalu harus dilakukan juga, untuk fungsionalitas yang jelas.


Bagaimana tampilan area gulir secara fisik? Sederhana! Lapisan konten di bawah bingkai luar. Untuk mencapai tampilan itu, Anda mungkin menggunakan bayangan kotak di lapisan luar.

  • Tip: Saat membuat bayangan kotak CSS, Anda bisa menempatkan beberapa bayangan bersama dengan koma. Gunakan bayangan jauh dengan bayangan pendek yang lebih kuat untuk efek yang bagus. Gunakan RGBA (kontrol opacity) untuk sentuhan ringan!

Selanjutnya, tanpa bilah gulir, praktik terbaik yang terlintas dalam pikiran adalah menggunakan JQuery dengan kotak gulir yang dapat diklik yang melekat pada tepi bingkai yang memiliki konten yang gulir, setelah kotak itu muncul ketika elemen dalam menonjol di luar kotak di salah satu dari empat arah.

Jika Anda ingin bilah tidak ada atau tersembunyi secara default, jaga agar bilah tetap tersembunyi atau sedikit buram sampai area gulir melayang di atas atau mengetuk, dan kemudian minta mekanisme gulir muncul.

  • Mudah Digunakan: Kotak harus mengaktifkan (mulai menggulir elemen anak) dengan ringan pada acara hover, dan sepenuhnya pada mouse-down.

Ini sebuah demonstrasi:

masukkan deskripsi gambar di sini

Untuk area gulir yang panjang, pengguliran yang dipercepat adalah suatu keharusan melalui praktik ini, jika tidak, kemampuan pengguna untuk menavigasi konten dengan cepat akan terhambat.


Setelah mengutak-atik ini, saya pikir saya dapat membuat plugin JQuery untuk, dan menggunakan praktik ini untuk aplikasi web berikutnya.


6

Pastikan jumlah konten default yang pertama kali ditampilkan menunjukkan item di bagian bawah (dengan asumsi pengguliran vertikal) yang hanya terungkap sebagian, sehingga memberi tahu pengguna ada lebih banyak di bawah ini, dan mereka dapat mencapai / mengungkapkannya.


Windows (/ Phone) 8 tampaknya cukup sering melakukan hal ini secara horizontal - ketika sebuah judul memakan lebih dari ruang horizontal yang tersedia, ia mendorong Anda untuk menggeser ke kiri / kanan untuk melihat lebih banyak opsi.
Katana314

1
Mungkin dengan gradien fade-out / opacity sedikit di bagian bawah untuk menunjukkan bahwa ada lebih banyak.
wchargin

4

Inilah yang akan saya coba:

Gradien lembut yang melewati sedikit konten. Ini menunjukkan bahwa ada lebih banyak di bawah ini. Selain itu, Anda tentu saja dapat menambahkan panah kecil.

masukkan deskripsi gambar di sini


Terima kasih - saya memeriksa jawaban lain untuk memastikan saya tidak mengulangi.
benteh

2

Betapa jelasnya Anda ingin membuatnya turun ke siapa yang Anda pikir akan menjadi penonton dan apa konteksnya.

Teknik pencarian-cara yang biasa seperti panah dan grafik yang berlanjut melampaui flip dapat membantu perjalanan pengguna. Atau, Anda bisa menggunakan sistem menu / nav berlabuh, yang digunakan banyak situs halaman tunggal.

Solusi yang paling mencolok dan jelek adalah popup yang menginformasikan pengguna untuk menggulir ke bawah untuk konten yang lebih banyak, kemudian bersembunyi ketika aktor menggulir (gaya pemberitahuan cookie).


1

Pilihan lain adalah mengubah kursor ketika mengarahkan elemen ke sesuatu yang menunjukkan gulir, seperti panah bergerak yang menunjuk dan menunjukkan ke bawah, atau sesuatu yang menunjukkan 'baca lebih lanjut dengan menggulir'.

Tentu saja ini hanya berfungsi untuk desktop.

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.