网页中照片预览导航设计技巧
导航并不只是指常位于网站头部的导航条,路边的指示牌、商场的指示牌等等都是一种导航,可以说导航在生活中无处不在,如果没有这些导航存在,那么我们将迷失,迷失在互联网信息的海洋中,迷失在纵横交错的马路上,迷失在琳琅满目的商品货架之间。
在所谓的WEB2.0风潮疯狂的从国外吹入国内的时候,国外一些成功网站的成功模式也疯狂的吹入到国内的模仿者的眼前。目前在国内关于网络相册方面或者时尚一点是说关于WEB2.0网络相册方面做得比较好的应该算是yupoo了,同时它也是国内模仿flickr模式最像的最成功的——事实上yupoo几乎就是另一个语言版本的flickr。抛除商业运营等其他因素,仅仅来比较一下两者关于照片预览导航系统(不知道正确的叫法,就自己为其命了个名)上的不一样之处,或者是说两者在对用户使用方式的理解上的不一样之处。
从上图中可以看出flickr相册的照片预览导航系统相当的简洁,只有“上一张”与“下一张”照片的缩略图链接还有当前相册中照片的总数以及一个以幻灯片播放的按钮,当前照片的缩略图在预览导航中是没有的。再看下面yupoo的截图,在预览导航中多了当前照片的缩略图少了当前相册中照片的总数。
先不说当前照片的缩略图应不应该出现在预览导航里,光yupoo没有在预览导航上标出当前相册里照片的总数这一点就说明了它的失败。
每个用户看相册的时候都不可避免的会想要知道当前相册里到底有多少张照片,这其实是与人的心理是有关的,人天生就有这样的一种欲望——对一件事要掌握越多的信息越好,只有对其掌握了足够的信息,这样心里才会感到踏实或者说感到安全。这是一种与生俱来的本能欲望。
可是yupoo却没有标示出当前相册里照片的总数,这就好像是留了一个疑问等待用户去搜索答案,虽说可能会激起某些人的好奇心而去不停的点击它,可是到最后还是发现根本就不知道这个相册里到底有多少张照片。
而当前照片的缩略图是否应该出现在预览导航里呢?
yupoo的照片预览导航系统是完全按照网站的导航系统来设计的,在网站的导航系统里,用户需要知道自己当前在哪个地方或者是哪个栏目下,这时候导航系统就需要标示出这个地方或者是栏目来给用户提示,这样用户才不至于迷失在网站繁杂的信息里。
但是对于照片预览导航系统这种相对来说简单一点的导航系统来说,按照网站导航系统来设计似乎略显繁杂。
首先,照片预览导航并不需要标示出当前所在的位置,它不像是网站导航系统那样可能还有下级或者是下下级的导航的存在,照片预览仅仅只显示一张照片,也就是说在这个预览导航里的所有栏目都是平等的,不存在下级或者是更深层次的归属关系,用户在这样的页面里并不存在迷路的困惑;
其次,导航系统的真正作用是引导用户及标示位置,而既然照片预览导航不需要标示位置,那么照片预览导航系统所剩下来的作用就是引导用户——引导用户点击导航系统上的缩略图以查看照片。这时候问题就会出现,如果不细看预览导航上的缩略图,鼠标直接点击下去,很有可能点中的就是当前照片的那个缩略图,点击后用户会发现还是当前的照片,查看原因之后用户才会明白,中间的那个缩略图是当前照片的缩略图——点击下去后还是当前照片,也就是说这个缩略图等于是没有用的。既然没用,为何还要存在?
最后,一样的空间,当空间里的物品摆放多了,每个物品所占的空间自然就少了。照片预览导航最成功的一点就是在导航上显示的是照片的缩略图而不是文字,让用户可以很明白的知道相近两张照片的大概形状。所以如何保证缩略图的清晰度就成了预览导航真正的关健所在。当照片的尺寸越大时,缩略图的清晰度就越小,甚至最终会模糊成一团,这时候就需要提高缩略图的大小尺寸,可是预览导航的大小是限定的,所以去掉当前照片的缩略图可以让相近两张照片的缩略图更加的清晰。
从细节处体贴用户,才是产品成功的关健!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Gambaran keseluruhan inspirasi kreatif dan kemungkinan tanpa had yang dibawa oleh animasi CSS3 kepada pereka web: Dalam reka bentuk web moden, kesan animasi telah menjadi faktor penting dalam meningkatkan pengalaman pengguna dan meningkatkan daya tarikan laman web. Kemunculan teknologi animasi CSS3 telah membawa pilihan reka bentuk yang lebih fleksibel, kaya dan kreatif kepada pereka web. Artikel ini akan meneroka inspirasi kreatif dan kemungkinan tanpa had yang dibawa oleh animasi CSS3 kepada pereka web, dan memberikan beberapa contoh kod. 1. Konsep asas dan sintaks animasi CSS3 Sebelum memperkenalkan animasi CSS3, kita perlu terlebih dahulu

Terokai kelebihan unik kedudukan mutlak dalam reka bentuk web Dalam reka bentuk web, kedudukan mutlak ialah kaedah reka letak yang biasa digunakan. Dengan menggunakan kedudukan mutlak, elemen boleh diletakkan dengan tepat pada lokasi tertentu pada halaman web, dan beberapa kesan susun atur khas boleh dicapai dengan mudah. Artikel ini meneroka kelebihan ini dan menggambarkannya dengan contoh kod khusus. Kedudukan elemen yang tepat Kedudukan mutlak membolehkan kawalan tepat ke atas kedudukan elemen pada halaman web. Dengan menentukan atribut atas, kanan, bawah dan kiri elemen, elemen itu boleh

Perkongsian kemahiran reka bentuk web dan pengalaman praktikal berdasarkan CSS3 Dalam era Internet hari ini, reka bentuk web menjadi semakin penting. Dengan kemunculan CSS3, pereka kini boleh menggunakan pelbagai kesan yang menakjubkan untuk melibatkan pengguna. Artikel ini akan berkongsi beberapa kemahiran reka bentuk web dan pengalaman praktikal berdasarkan CSS3, bertujuan untuk membantu pembaca meningkatkan tahap reka bentuk web mereka. 1. Gunakan kesan peralihan. Kesan peralihan boleh menghasilkan kesan animasi yang lancar untuk elemen dari satu keadaan ke keadaan yang lain. Dengan menggunakan sifat peralihan CSS3, kita boleh

Meneroka kesan pengenalan rangka kerja pihak ketiga ke dalam CSS pada reka bentuk web Pengenalan: Dengan perkembangan pesat Internet, reka bentuk web telah menjadi semakin penting. Untuk meningkatkan pengalaman pengguna dan menyediakan fungsi yang lebih kaya, pembangun selalunya perlu menggunakan rangka kerja pihak ketiga untuk membantu reka bentuk dan pembangunan. Artikel ini akan meneroka kesan memperkenalkan rangka kerja pihak ketiga CSS pada reka bentuk web dan memberikan contoh kod khusus. 1. Apakah rangka kerja pihak ketiga CSS? Rangka kerja pihak ketiga CSS ialah satu set gaya dan komponen CSS yang telah ditetapkan yang boleh dipanggil terus semasa membina halaman web. Rangka kerja ini kaya dengan kandungan,

Aplikasi pemilih elemen dalam reka bentuk web memerlukan contoh kod khusus Dalam reka bentuk web, pemilih elemen ialah pemilih CSS yang sangat penting, yang boleh membantu kami mengawal dan melaraskan gaya elemen dalam halaman web. Dengan menggunakan pemilih elemen secara fleksibel, pelbagai kesan reka bentuk web yang indah boleh dicapai. 1. Sintaks asas dan penggunaan pemilih elemen Pemilih elemen ialah jenis pemilih CSS yang paling mudah Ia memilih elemen yang sepadan dengan menyatakan nama tag bagi elemen HTML. Sintaks asas pemilih elemen ialah: nama tag {

Cara menggunakan reka letak CSSPositions untuk mereka bentuk reka letak kad untuk halaman web Dalam reka bentuk web, reka letak kad adalah kaedah reka bentuk yang biasa dan popular. Ia membahagikan kandungan kepada kad bebas, setiap kad mengandungi maklumat tertentu, dan boleh mencipta kesan halaman yang kemas dan berlapis dengan mudah. Dalam artikel ini, kami akan memperkenalkan cara menggunakan reka letak CSSPositions untuk mereka bentuk reka letak kad halaman web dan melampirkan contoh kod tertentu. Buat struktur HTML Mula-mula, kita perlu mencipta struktur HTML untuk mewakili susun atur kad.

Dengan perkembangan pesat Internet dan aplikasi mudah alih, orang ramai semakin memberi perhatian kepada kepentingan pembangunan bahagian hadapan. Untuk mencapai keindahan dan kefungsian halaman web, pembangun terus meneroka alat dan rangka kerja baharu. Dalam artikel ini, saya akan memperkenalkan cara menggabungkan Vue dan Bulma untuk mencipta reka bentuk bahagian hadapan yang ringkas dan berkuasa. Vue ialah rangka kerja progresif untuk membina antara muka pengguna. Ia mudah dipelajari dan digunakan, namun menawarkan prestasi tinggi dan fleksibiliti. Ia menyediakan kebolehgunaan semula kod yang baik melalui komponenisasi, membolehkan pembangun menjadi lebih cekap

Lima langkah untuk mengajar anda cara mencipta rangka kerja CSS yang sempurna: Jadikan reka bentuk web anda lebih profesional dan cantik Mengekalkan reka bentuk web yang profesional dan cantik adalah impian setiap pereka web. Dan mewujudkan rangka kerja CSS yang sempurna adalah kunci untuk mencapai matlamat ini. Rangka kerja CSS ialah satu set helaian gaya dan peraturan yang telah ditetapkan yang membantu pereka bentuk dengan cepat membina reka letak dan gaya halaman web. Hari ini, saya akan memperkenalkan anda kepada kaedah lima langkah untuk membantu anda mencipta rangka kerja CSS yang sempurna. Berikut adalah langkah khusus: Langkah 1: Analisis keperluan dan tentukan struktur rangka kerja pada permulaan
