首頁 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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1421
52
Laravel 教程
1315
25
PHP教程
1266
29
C# 教程
1239
24
CSS3動畫為網頁設計師帶來的創作靈感與無限可能性 CSS3動畫為網頁設計師帶來的創作靈感與無限可能性 Sep 09, 2023 pm 08:45 PM

CSS3動畫為網頁設計師帶來的創作靈感和無限可能性概述:在現代的網頁設計中,動畫效果已成為提升使用者體驗和增加網站吸引力的重要因素。而CSS3動畫技術的出現,為網頁設計師帶來了更靈活、更豐富、更有創意的設計選項。本文將探討CSS3動畫為網頁設計師帶來的創作靈感和無限可能性,並提供一些程式碼範例。一、CSS3動畫的基本概念與文法在介紹CSS3動畫之前,我們先需要了

揭示網頁設計中絕對定位的獨特優勢 揭示網頁設計中絕對定位的獨特優勢 Jan 23, 2024 am 08:16 AM

探索絕對定位在網頁設計中的獨特優勢在網頁設計中,絕對定位是一種常用的佈局方式。透過使用絕對定位,可以將元素精確地放置在網頁的指定位置,同時還可以輕鬆實現一些特殊的佈局效果。本文將就這些優勢進行探索,並透過具體的程式碼範例來說明。精確定位元素位置絕對定位可以精確地控制元素在網頁中的位置。透過指定元素的top、right、bottom、left四個屬性,可以將元素

基於CSS3的網頁設計技巧及實務經驗分享 基於CSS3的網頁設計技巧及實務經驗分享 Sep 08, 2023 pm 07:07 PM

基於CSS3的網頁設計技巧及實務經驗分享在當今網路時代,網頁設計越來越重要。隨著CSS3出現,設計師現在可以使用各種令人驚嘆的效果來吸引使用者。本文將分享一些以CSS3為基礎的網頁設計技巧與實務經驗,旨在協助讀者提升網頁設計水準。一、使用過渡效果過渡效果可以使元素在一種狀態到另一種狀態之間產生平滑的動畫效果。透過使用CSS3的transition屬性,我們可以

H5是什麼樣的? H5是什麼樣的? Apr 01, 2025 pm 05:29 PM

HTML5(h5)是HTML的第五個版本,旨在增強網頁開發的靈活性和功能性。 h5的主要特性包括:1)新的語義化標籤,如、等;2)內嵌音視頻支持,如、;3)Canvas繪圖API;4)GeolocationAPI。這些特性通過瀏覽器的JavaScript引擎實現,使得網頁更加動態和互動。

研究引進CSS第三方框架對網頁設計的影響 研究引進CSS第三方框架對網頁設計的影響 Jan 16, 2024 am 10:32 AM

探究CSS引進第三方框架對網頁設計的影響引言:隨著網路的快速發展,網頁設計也愈發重要。為了提升使用者體驗和提供更豐富的功能,開發人員常常需要使用第三方框架來輔助設計和開發。本文將探究引入CSS第三方框架對網頁設計的影響,並給出具體的程式碼範例。一、什麼是CSS第三方框架CSS第三方框架是一套預先定義的CSS樣式和元件,可以在建構網頁時直接呼叫。這些框架內容豐富、

元素選擇器在網頁設計的應用領域 元素選擇器在網頁設計的應用領域 Jan 13, 2024 am 10:35 AM

元素選擇器在網頁設計中的應用,需要具體程式碼範例在網頁設計中,元素選擇器是一種非常重要的CSS選擇器,它能夠幫助我們對網頁中的元素進行樣式的控制和調整。透過靈活運用元素選擇器,可以實現各種精美的網頁設計效果。一、元素選擇器的基本語法和用法元素選擇器是CSS選擇器中最簡單的一種,它透過指定HTML元素的標籤名稱來選擇對應的元素。元素選擇器的基本語法為:標籤名稱{

如何使用CSS Positions佈局設計網頁的卡片佈局 如何使用CSS Positions佈局設計網頁的卡片佈局 Sep 28, 2023 am 08:17 AM

如何使用CSSPositions佈局設計網頁的卡片佈局在網頁設計中,卡片佈局是一種常見且流行的設計方式。它將內容分割成獨立的卡片,每個卡片包含一定的訊息,可以輕鬆地創造出整潔、有層次感的頁面效果。在本文中,我們將介紹如何使用CSSPositions佈局設計網頁的卡片佈局,並附上具體的程式碼範例。在建立HTML結構首先,我們需要建立HTML結構來表示卡片佈局。

HTML全域屬性的細節解析:理解它們在網頁設計中的重要性 HTML全域屬性的細節解析:理解它們在網頁設計中的重要性 Feb 21, 2024 pm 04:12 PM

HTML全域屬性的細節解析:瞭解它們在網頁設計中的重要性,需要具體程式碼範例引言:在網頁設計中,HTML是我們常用的標記語言之一。除了基本的標籤和屬性,HTML還有一些全域屬性,這些屬性不限於特定的標籤,而是可以用於任何標籤。本文將深入了解HTML全域屬性的細節,並透過具體的程式碼範例來展示它們在網頁設計中的重要性。一、全域屬性的定義與使用:全域屬性是可以

See all articles