首页 web前端 html教程 网页中照片预览导航设计技巧

网页中照片预览导航设计技巧

Jun 01, 2016 am 09:53 AM
前端设计 网页设计

导航并不只是指常位于网站头部的导航条,路边的指示牌、商场的指示牌等等都是一种导航,可以说导航在生活中无处不在,如果没有这些导航存在,那么我们将迷失,迷失在互联网信息的海洋中,迷失在纵横交错的马路上,迷失在琳琅满目的商品货架之间。 
在所谓的WEB2.0风潮疯狂的从国外吹入国内的时候,国外一些成功网站的成功模式也疯狂的吹入到国内的模仿者的眼前。目前在国内关于网络相册方面或者时尚一点是说关于WEB2.0网络相册方面做得比较好的应该算是yupoo了,同时它也是国内模仿flickr模式最像的最成功的——事实上yupoo几乎就是另一个语言版本的flickr。抛除商业运营等其他因素,仅仅来比较一下两者关于照片预览导航系统(不知道正确的叫法,就自己为其命了个名)上的不一样之处,或者是说两者在对用户使用方式的理解上的不一样之处。 

从上图中可以看出flickr相册的照片预览导航系统相当的简洁,只有“上一张”与“下一张”照片的缩略图链接还有当前相册中照片的总数以及一个以幻灯片播放的按钮,当前照片的缩略图在预览导航中是没有的。再看下面yupoo的截图,在预览导航中多了当前照片的缩略图少了当前相册中照片的总数。 

先不说当前照片的缩略图应不应该出现在预览导航里,光yupoo没有在预览导航上标出当前相册里照片的总数这一点就说明了它的失败。 
每个用户看相册的时候都不可避免的会想要知道当前相册里到底有多少张照片,这其实是与人的心理是有关的,人天生就有这样的一种欲望——对一件事要掌握越多的信息越好,只有对其掌握了足够的信息,这样心里才会感到踏实或者说感到安全。这是一种与生俱来的本能欲望。 
可是yupoo却没有标示出当前相册里照片的总数,这就好像是留了一个疑问等待用户去搜索答案,虽说可能会激起某些人的好奇心而去不停的点击它,可是到最后还是发现根本就不知道这个相册里到底有多少张照片。 

而当前照片的缩略图是否应该出现在预览导航里呢? 

yupoo的照片预览导航系统是完全按照网站的导航系统来设计的,在网站的导航系统里,用户需要知道自己当前在哪个地方或者是哪个栏目下,这时候导航系统就需要标示出这个地方或者是栏目来给用户提示,这样用户才不至于迷失在网站繁杂的信息里。 
但是对于照片预览导航系统这种相对来说简单一点的导航系统来说,按照网站导航系统来设计似乎略显繁杂。 
首先,照片预览导航并不需要标示出当前所在的位置,它不像是网站导航系统那样可能还有下级或者是下下级的导航的存在,照片预览仅仅只显示一张照片,也就是说在这个预览导航里的所有栏目都是平等的,不存在下级或者是更深层次的归属关系,用户在这样的页面里并不存在迷路的困惑; 

其次,导航系统的真正作用是引导用户及标示位置,而既然照片预览导航不需要标示位置,那么照片预览导航系统所剩下来的作用就是引导用户——引导用户点击导航系统上的缩略图以查看照片。这时候问题就会出现,如果不细看预览导航上的缩略图,鼠标直接点击下去,很有可能点中的就是当前照片的那个缩略图,点击后用户会发现还是当前的照片,查看原因之后用户才会明白,中间的那个缩略图是当前照片的缩略图——点击下去后还是当前照片,也就是说这个缩略图等于是没有用的。既然没用,为何还要存在? 

最后,一样的空间,当空间里的物品摆放多了,每个物品所占的空间自然就少了。照片预览导航最成功的一点就是在导航上显示的是照片的缩略图而不是文字,让用户可以很明白的知道相近两张照片的大概形状。所以如何保证缩略图的清晰度就成了预览导航真正的关健所在。当照片的尺寸越大时,缩略图的清晰度就越小,甚至最终会模糊成一团,这时候就需要提高缩略图的大小尺寸,可是预览导航的大小是限定的,所以去掉当前照片的缩略图可以让相近两张照片的缩略图更加的清晰。 

从细节处体贴用户,才是产品成功的关健!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

基于CSS3的网页设计技巧及实践经验分享 基于CSS3的网页设计技巧及实践经验分享 Sep 08, 2023 pm 07:07 PM

基于CSS3的网页设计技巧及实践经验分享在当今互联网时代,网页设计越来越重要。随着CSS3出现,设计师们现在可以使用各种令人惊叹的效果来吸引用户。本文将分享一些基于CSS3的网页设计技巧和实践经验,旨在帮助读者提升网页设计水平。一、使用过渡效果过渡效果可以使元素在一种状态到另一种状态之间产生平滑的动画效果。通过使用CSS3的transition属性,我们可以

揭示网页设计中绝对定位的独特优势 揭示网页设计中绝对定位的独特优势 Jan 23, 2024 am 08:16 AM

探索绝对定位在网页设计中的独特优势在网页设计中,绝对定位是一种常用的布局方式。通过使用绝对定位,可以将元素精确地放置在网页的指定位置,同时还可以轻松实现一些特殊的布局效果。本文将就这些优势进行探索,并通过具体的代码示例来说明。精确定位元素位置绝对定位可以精确地控制元素在网页中的位置。通过指定元素的top、right、bottom、left四个属性,可以将元素

使用Vue和Bulma构建强大而简洁的前端用户界面 使用Vue和Bulma构建强大而简洁的前端用户界面 Dec 27, 2023 am 09:44 AM

随着互联网和移动应用的迅猛发展,前端开发的重要性越来越被人们所重视。而为了实现网页的美观与功能性,开发者们不断探索新的工具和框架。在这篇文章中,我将介绍如何结合Vue和Bulma来创建简洁而强大的前端设计。Vue是一套用于构建用户界面的渐进式框架。它易于学习和使用,同时具有很高的性能和灵活性。它通过组件化的方式提供了良好的代码复用性,使得开发人员可以更加高效

简易指南:创建出色的CSS框架,提升网页设计的专业度和美观度 简易指南:创建出色的CSS框架,提升网页设计的专业度和美观度 Jan 16, 2024 am 09:02 AM

五步教你打造完美的CSS框架:让你的网页设计更加专业与美观维持一个专业和美观的网页设计是每个网页设计师的梦想。而建立一个完美的CSS框架是实现这个目标的关键。CSS框架是一套预定的样式表和规则集合,用于帮助设计师快速搭建网页布局和样式。今天,我将向你介绍一个五步骤的方法,来帮助你创建一个完美的CSS框架。以下是具体的步骤:第一步:分析需求并确定框架结构在开始

Dreamweaver是什么 Dreamweaver是什么 Jun 13, 2023 pm 02:53 PM

Dreamweaver是Adobe公司推出的一款网页设计软件,它提供了一个可视化的页面编辑器,同时也支持手动编辑HTML、CSS和JavaScript代码。它拥有许多功能和工具,可以帮助用户轻松创建响应式网页、应用程序和移动应用程序。

研究引入CSS第三方框架对网页设计的影响 研究引入CSS第三方框架对网页设计的影响 Jan 16, 2024 am 10:32 AM

探究CSS引入第三方框架对网页设计的影响引言:随着互联网的快速发展,网页设计也愈发重要。为了提升用户体验和提供更丰富的功能,开发人员常常需要使用第三方框架来辅助设计和开发。本文将探究引入CSS第三方框架对网页设计的影响,并给出具体的代码示例。一、什么是CSS第三方框架CSS第三方框架是一套预定义的CSS样式和组件,可以在构建网页时直接调用。这些框架内容丰富、

Go语言中的Web开发和前端设计技巧 Go语言中的Web开发和前端设计技巧 Jun 01, 2023 pm 03:51 PM

随着互联网技术的飞速发展,Web开发和前端设计技巧日益成为了程序员们必须掌握的技能之一。而在Web开发和前端设计领域中,Go语言已经成为了广受欢迎的开发语言之一,拥有良好的性能和简单易学的语法,能够为开发者带来全新的开发体验。在本文中,我们将分享一些在Go语言中进行Web开发和前端设计的技巧和工具。一、Web开发使用gin框架gin是一个Go语言的Web框架

如何运用CSS3技术打造炫酷的网页效果 如何运用CSS3技术打造炫酷的网页效果 Sep 11, 2023 pm 12:54 PM

如何运用CSS3技术打造炫酷的网页效果随着互联网的发展,网页设计也越来越重要。而CSS3技术的出现给网页设计师带来了更多的灵感和创意空间。CSS3拥有丰富的特性和效果,可以轻松实现炫酷的网页效果。本文将介绍一些常用的CSS3特性,并结合实例展示如何运用这些特性打造炫酷的网页效果。边框效果边框是网页设计中常见的元素,通过CSS3的边框特性,可以给边框增加更多的

See all articles