时尚

当前位置:手机版美高梅网站 > 时尚 > 极简网址,玩转网址登录页神来之笔

极简网址,玩转网址登录页神来之笔

来源:http://www.best-sclae.com 作者:手机版美高梅网站 时间:2019-11-14 17:44

1.
打开michaelvillar的首页,鼠标指针便变幻化成了一团可爱flash的光圈,很有爱很梦幻,当鼠标放在链接上时,光圈变一下子变大,当鼠标移开,光圈便也缩小~
首页真是美得让人窒息,大家还是自己体验一下吧~

版权申明:本文首发地址为我的博文玩转网站登陆页点睛之笔,本文文字部分为我原创,转载请联系作者和注明出处,谢谢!

每个网站有属于自己的个性——它能反射出背后的个人或者团队。如何做到让自己的网站显得与众不同、卓尔不群,让用户流连忘返或者立马下单?

2.
设计非常小清新,小可爱,是国内2.0网站里做的非常用心的一个站点,整个网站没有使用非常华丽的
flash或者其他技术,但是甜美淡雅的风格透露着浓郁的日韩风,突破了以往2.0网站的乏味单一,甚至用户还可以用一些小技巧自行设计一个专属于自己的mopou~
所使用的技术也非常简单,不会给网络带来任何负担~
这样以简单、单纯、实用为主题的网站在如今各种技术、展示效果为王的网站设计年代,实属无招胜有招。

写给网页设计师

为了让你的网站脱颖而出,不仅需要有丰富的高质量内容,同时也要兼顾网站的创新性和功能性。从用户的角度出发好好想一下,怎样让你的网站用户体验更友好?简单的搜索功能是需要的,或者你也可以精心设计一下网站的导航。同时,要注意保持整个网站设计语言的一致性。在这个html5狂潮涌进的时代,诞生了很多优秀的网页设计作品,他们都有卓越的导航设计,接下来整理的这些网站将唤起你关于导航的极限创意,快来亲自体验下吧!

3.
是我近年见过的最漂亮的国内家居网站(国外的没怎么考察过),国内许多家具网站以翔实的文字内容取胜
让人感觉内容非常丰富,但常常有堆砌之嫌。
loumou的主打应当是丰富的大图,整个页面看上去非常有品,首页的展示非常简洁典雅,而网站丰富的大图则统统通过flash来展示,感觉既不做作也不失档次,反正真的是很有爱的一个家居网站啦~

网页设计师目前在设计界是一个最为尴尬的存在,一方面他们被视为和GEEK党混在代码堆里不懂审美的怪咖,另一方面他们又苦于网页中被局限的自由而无法在创意上得到最大延伸。设计师本人无法给自己准确定位。在我身边的网页设计师们,在拿到一个项目的时候,和客户的观念博弈后,最后,只能提供导航、按钮等基础元素的设计,而又由于客户主导着产品,因此对于产品本身没有经过展示设计的客户往往不懂得如何在网站上进行有效的安排。而整个网页的设计效果,就算前期经过设计师苦心经营一番交给客户后,换掉了设计师精心安排的大图和文字,不幸的话很容易就沦落成了手中又一个失败作品。在浏览国外的优秀网站时,我们是该停下来好好想想我们能为网页设计做什么?我们的定位是什么?

Toybox

4.
waterlife应该算是个公益网站,首页从海底的视角观察的海洋起伏的画面便深深令人震撼,从海面投入海底的光斜射到海底,
真的让人深感人类饮水问题的严峻,首页THE STORY OF THE LAST GREAT SUPPLY OF FRESH DRINKING WATER ON EARTH一下子就抓住了眼球
内页多组图片混合展示以显示 HUMAN BEING VS INDESTRY 之间的矛盾。最后以电子书的形式展示这个地球上已经逝去的生灵和不再有的美丽,真的灰常灰常震撼~

这一期让我们从登陆页开始聊起

在需要的时候导航栏应该一直在那里,而当用户想要专注于某个特定的任务时,导航栏则应该优雅的隐藏起来。比如说,在设计一个网上商店的出纳页面时,网站的导航应该可以随时都易于使用,但同时也要注意突出像出纳表单和按钮控件之类的鲜明功能。Toybox的导航设计就恰好满足了这些。

5.
loading了半天,终于还是打开了~虽然让我等了这么久,但是真的很值哦~~整个网站只有一页,纯flash制作,页面非常恢弘现代,即使是about页内容也时尚而不失简约
无论是文字还是图片,无论是排版还是选材,都让人深深折服制作者的用心哦~只是网站有些按钮的使用方法有些于众不同,第一次用的同学还需要稍微摸索一下~

很多人在安排网站登陆页,往往以霸占全屏的轮播大图来吸引用户,设计师的做法焦点都集中在让大图本身足够震撼和吸引,以便使首页能锁住用户的眼球。至少,网站的所有者希望能通过几张全屏大图就能迅速有效地传播自己的价值和理念。但是除了简单让全屏大图左右滑动以外,我们还能有其他更新鲜的表达方式吗?或者说,在用户的期望之外,我们还能给到他们其他什么更加奇妙又更加人性化的体验呢?带着这些问题,不妨让我们看看下面这些登陆页的创作思路。

如下图示,这个侧边导航给人的感觉就像是你在窥视页面背后或者是掀开了一个玩具盒的盖子看看里面到底有些什么。这个侧边导航非常方便使用,鼠标悬停在浏览器左侧即可出现,主体部分即时出现的旋转效果也很带感,可以很好的引导用户的注意力。将导航隐藏起来同时也实现了界面的简洁,使网站的浏览体验非常的愉悦,因为网站并没有留下太多无用的信息去分散用户的注意力。

6.
sensisoft的底页是俄国红场前一个邮筒的景象,你可以看到远处阴云密布,偶尔有人匆匆走过,有时风起还可能卷起地上纸片,屋顶上的红旗飘飘,
群鸟在这个氛围下也纷纷回巢,设计的忒给力的~随着邮箱上内容的变更,时空也可能发生转移滴~可能一下子回到二十世纪初的英国或者德国。
还有很多好玩的场景,这里就不一一赘述啦~这个网站,真给力也~

nightowlinteractive

图片 1

7.
fivecentstand的loading都很有爱~嘿嘿~~整个页面风格,怎么说呢~有点点中世纪羊皮卷的感觉,很复古
很有感觉哦,内页展示用户的头像也是可以通过点击生成一个新的flash展示页,小心点击的图片太多整个页面都是帅哥美女哦~
内页也可以和大家分享日志,背景是以很复古的欧洲城堡的墙面为底页,看上去稍稍感觉有点吃力,不过和整个网站的页面很搭的哦~

以纹理为背景,根据不同的文字滚动,深沉而富有一种复古和原始的基调,如果你的表达内容是以文字为主,可以考虑试试这类轮播方式。

至于其他你想知道的信息,比如说Toybox公司的主营业务和地址,可以在顶部的一个直接呈现的导航栏里找到。首页的磁贴鼠标hover效果也非常的有趣,当鼠标悬停于某个项目的缩略图时,其余的项目缩略图都后退变暗并且产生景深的效果。

8.
leoburnett首页设计便非常的简约而富含奥妙,随着鼠标移动而移动的画面呈现出非常令人吃惊的3D效果,而且将这样
令人拍案叫绝的设计放在首页竟然下行速度还不是令人非常抓狂,真的只能就令我吃惊了~~内页的展示完全
由视频来承担,效果也非常的棒,而展示的主题大多有关人类,人性。其实我一直好奇的是,这个网站是不是也砸了很多钱在带宽上面呢。。

图片 2

Olivier Bossel

9.
sevenedge是非常专注细节的网站,即使是menu,social,contact建的设计也非常用心思~特别是menu键,鼠标放上去之后即刻变成了一滩墨汁壮
当然墨汁也很宽幻化成了几个分按键~都非常之酷~主显示单元下面的切换按钮也是非常有内容,页面切换也是非常震撼~整个页面貌似被撕裂又重组~非常经典哦~

oficialanima

交互设计师Olivier Bossel的个人作品博客非常有趣。该网站的导航元素在鼠标hover状态下会产生像素爆炸式的效果(译者注:火狐浏览器测试通过,chrome测试无效果)。这个效果相对于网站其余的简洁设计来说非常有动感,由此产生强烈的对比效果。作为一个视觉元素它非常有效的促进了用户继续阅读该网站,统一的视觉语言也彰显了品牌的特点。

10.
viki的设计感觉非常酷炫,男生设计师可能会非常喜欢这种黑酷的感觉~

利用留白作为滚动图片的一个吸引的要素,奢华而充满了空间的张力,页码的表现形态也与整体的视觉保持和谐。周围配以相应的文字,予以部分重叠,凸显层次感和空间感。

图片 3

图片 4

Tsto

thehugo

Tsto是一家有着简单而创新的设计方法的设计机构,它的导航设计出乎我们的意料。屏幕的四个角都固定着一个导航元素,以框架的形式让作品展示出来。视觉识别元素是由大粗的品红色字体来体现。网站的层级结构非常清晰,Work标签在左上角,Contact和About标签则分布在底部。为了保持风格的一致性,作品的标题也同样采用了大粗的品红色字体。

打开页面也许除了图案本身以外,几乎无其他任何元素,只有当鼠标滚动到下方时,首屏的图案瞬间转变为内容背景。而在屏幕的左边,有一个动态的标志,把背景和内容做了更有趣的连接。这种新颖别致的方式,用在品牌介绍甚至是内容详细页面都非常适宜。

图片 5

图片 6

当用户浏览案例作品的时候,这些作品以幻灯片的形式展示出来,当鼠标悬停在箭头上的时候会出现下一个作品的预览图。案例展示图很大,占据了页面的大部分空间。当用户浏览这些大图的时候,就能对Tsto的公司形象和作品有深入的了解。

josephaavoue

Derek Boateng

也许这里的大图不算大,但也在整个登陆页占据了重要的焦点位置。设计师为了凸显焦点也运用了线条和图形来引导用户的视线。左边文字右边图片,能够把内容表达得更为清晰,但整个页面元素比较累赘,所幸线条的排版和色彩运用得恰到好处。

Derek Boateng的作品集网站在页面加载完成后用一个礼貌的Hi来问候访客,并且有一个向下的箭头指引访客鼠标向下滚动。页面的总体设计非常低调,它并没有对用户吼叫,而是优雅的引导用户去查看作品。当页面滚动到欢迎界面以下时,网站的头部和导航栏开始收缩,让用户能有更大的空间去查看作品。这个网站是导航清晰易用,主要内容得到充分体现的好例子。

图片 7

图片 8

thebarkas

Second Story

可以看到从一个圆形到变作条纹再浑然一片整屏渐变,视觉既简单,又充满了动感,鼠标根据不同的角度而让背景色发生变化。不过这样做的前提是选择一个足够冲击力和字体和标志。让它成为视觉焦点。

擦,流碧的横向滚动!Second Story的网站工作起来像一个平板上的杂志app。它的革新之处在于它给人的感觉并不是一个典型的网站页面,它是水平滚动的。内容以分栏的形式布局,每一栏内容则垂直滚动。导航栏固定在左侧,这有利于控制网站的结构。在你查看作品详情的的时候,左侧的导航栏最小化,鼠标悬停再次放大。对于作品集的浏览用户可以选择列表形式和幻灯形式。

图片 9

图片 10

special.bose

Mostly Serious

竖型展示也许已经足够新颖了,但在这个网站设计中还略微倾斜的展示方式,让页面更加具有新鲜和冲击力。鲜艳的色彩搭配更强调了这一效果。

正如它的名字所暗示的那样,Mostly Serious有它好玩的地方。打开网站迎接你的是摇摆飘浮的气球,而这些气球正是该网站导航。友好细腻的动画配上丰富的色彩建立了网站品牌的基调。进入子页面以后,通过右上角的图标你可以随时回到主页 ,页面底部同时出现一个次级导航。这个网站功能性很强,符合页面交互灵动的特征。事实上,这个网站让我想起了过去美好的日子里绚丽的flash动画(EYE4U,还有吗?)。

图片 11

图片 12

fixedgroup

Minimal Monkey

把图片一割上下两部分,然后用阴影创建图片的层次,让画面显得更纵深,某种程度上体现了优雅氛围。但需要注意的是,必须是图片本身是有分割的潜力的情况下。有的图片分割后也许会显得非常错愕。

在如此简约大方的页面中滚动浏览文章标题列表,让我感觉自己在使用一个书架(不信你试试看)。每一本的鼠标悬停效果都将一本书籍独立出来使用户可以更加专注。网站对于About和Contact部分的设计也匠心独运:当你点击其中一个标签的时候,会出现一个下拉的页面来显示信息。这是一个减少页面跳转的简单方法。

图片 13

图片 14

ginventory

然而,要查看往期的文章并不简单,因为网站没有搜索功能。当用户要找特定的一篇文章时,他必须要一直滚动下去才能找到。这时候搜索功能在不破坏总体设计的前提下显得非常有用。

这是一个介绍APP的网站,可以看到手绘的固定背景之上不断变幻的应用界面演示效果,动态效果非常炫酷。让人过目不忘。这种单一的背景让人锁定了品牌的内涵气质。

LayerVault

图片 15

通过这个网站我们可以看到,一个简单干净的布局,加上好玩的色彩以及有趣的动画,能带来如此惊人的效果!LayerVault这个网站平衡了留白和微妙的动画来吸引它的用户。动画可以用来阐明一个观点,引导用户浏览整个网站,甚至给出使用指南。虽然动画并不总是起到这些作用,然而LayerVault恰如其分的使用了它,只有当用户浏览到页面的一个特定区域的时候才会出现这些动画。结果怎样呢?一个布局优雅的页面配上优美的注解!

thisisarc

图片 16

多以大图来吸引用户的策略也可以被文字所取代,这时,文字搭配一些出乎意料的动态效果和简单的弧形线条,发挥了图片所不能抵达的目的,精准地表达代替了图片的模拟两可。

Escape Flight

图片 17

Escape Flight设计得非常精妙!新页面的loading动画中,logo中火箭的火焰尾气动态效果非常好,显得新颖时尚。导航栏固定在顶部,就像一个即将启程的港口或者甲板,就好像你已经来到了飞机场。下拉菜单看起来就像是一张旅行清单,和主题很搭。当你选择了一个地点后,鼠标往下滚,所有重要的信息都会固定在顶部,对于旅行者来说这样使用起来会更简便舒适。

cafefrida

图片 18

咖啡馆的格调自然是优雅的,那就用一张插图作为登陆页背景吧。但是仅仅是花朵插画吗?把你的鼠标往下拖动,你会发现,边缘的部分花朵叠加于内容之上,看上去就像从花丛中观看过去,十分精致美好。这种独具匠心的设计,设计师们,学起来吧!

网站充分的利用了漂亮的摄影图片,Escape Flight使图片全屏显示,或许这正是你从一个旅行类网站想要得到的。它让你略微感受到即将到来的旅程,并且优雅的展示出目的地的美景。当你鼠标悬停在某个地点的缩略图上方时,你将发现所有你想要知道的:票价、天气状况、航班时间以及旅行时长。你还想知道更多吗?

图片 19

aSCIIaRENa

这个网站无需多言,黑客专属。极致的导航,内容区域任你怎么堆砌。只要你有一颗黑客的新,你会发现它的美。

图片 20

The Sartorialst

照片是这个网站的中心,整个网站的设计显得很自然。更重要的是,网站照片的hover效果做得非常之优雅,每张照片的标题随着光标从边上滑入滑出,美观流畅。

图片 21

SilkTricky

SilkTricky 网站背后的工作人员在现实生活中都很牛X,他们的网站也没有让我们失望。当鼠标移到图片上的时候会产生一个有趣的效果,磁贴会改变颜色并且图片发生位移。在这个只有一个页面的网站上,用户不需要在多个页面之间点来点去的跳转,只需要点击View,然后被选中的磁贴就会展开,同时其余的磁贴移动空出适当的区域。这样的布局同样适用于图片作品集的展示。

图片 22

SumAll

SumAll的布局简洁,没有任何不必要的信息去转移用户的注意力。鼠标hover效果以一个简单的动画效果展示更多的信息,页面过度效果则是hover效果的一个扩展。当你点击一个按钮的时候,简介和选项将出现在下面。我非常喜欢这样的体验,就是当我点击一个选项后没有被带到一个新的页面,而是让信息整洁的出现在按钮下方。但这个网站也有一个缺点:导航磁贴不是响应式的,在更小的分辨率下磁贴会有错位。

图片 23

Potluck

如果你是对这个网站的新颖界面充满期待的话那么我要说声抱歉了,它的界面乍看上去很普通,但是Potluck的用户体验做得非常的好。大胆的留白让用户在需要的时候立即找到自己需要的东西。表单和按钮有非常清新的设计,让用户很方便的发现和使用。所有的文本和图形都是按照引导用户浏览网站的原则来布局的。按钮和图标配合得非常好,所有的按钮和输入表单看起来有很强的视觉一致性,并且很吸引人。对于简洁页面的排版布局以及配色,这是一个很好的例子!

图片 24

Lowdi

这个简单的响应式布局显得相当漂亮。Lowdi用线条和形状来划分页面的区域,这是一个很好的方式来打破传统四四方方的布局。我喜欢Order Now按钮融入到这个满是线条和形状的设计中的方式。这些元素能很好的适应你的屏幕分辨率,整个设计也保持了高度的流畅性,使阅读体验非常好。

图片 25

Barcamp Omaha

Barcamp Omaha是一个在线邀请别人加入某次活动的网站。这个单页非常高效的用统一的视觉风格来引导用户浏览网站内容。活动最重要的信息,时间、地点、事件都放在了页面的头部,但网站的设计让用户有强烈欲望的往下滚,看看还能发现什么。我非常喜欢twitter和facebook在这个页面中的变体图标。

图片 26

当用户往下滚的时候,通过大胆的标题设计,更多的信息被系统的呈现出来,网页布局依然很简洁整齐。会议内容的目录则是以简单的动画来吸引用户的眼球。当用户滚动到页面底部的时候,联系信息出现了,唾手可得。

Combadi

当网站家在完成的一瞬间,这个网站给人的感受就是非常的稳定、安静,这是严谨设计的结果。虽然没有态度的留白,但网站却不让人感觉压抑。标签在鼠标hover的时候展开,展示了更多的信息并且提升了可用性。和其他元素一起,这个效果传达了一种通透的、平静的感觉。这个设计也映射浏览网站的词汇,其余元素也组合起来传达了连贯和统一的设计风格。

图片 27

Waller Creek Conservancy: The Final Four

一个完美的Hover效果不应该只是简单的呈现更多的信息,也应该为网站的视觉体验做出贡献。在这个网站中,当用户鼠标悬停在图片上时,图片扩张,并且由灰度照片恢复饱和度成全彩图片,同时呈现标题。这个效果让我和我的小伙伴们都着迷了。

图片 28

Lift

在网站中对产品和信息进行列表布局的时候,我们经常会做出一个静止的传统列表页。Lift网站的书本列表则给书本的hover效果添加了一个简单的3维旋转动画。这个简单的视觉效果让网站增色不少。给用户一种感觉就是他在和网站交流。你可以从这里获取这个3维效果。

图片 29

Snowbird

Snowbird是一个用户交互较多的动态网站。当前的天气情况被直接展示出来,当用户鼠标悬停的时候横向展开显示这一周的天气预报。FULL REPORT按钮的hover效果则是大圆角变小圆角,这种按钮状态的变化很微妙有效,可以直接用css3圆角属性实现,在扁平化时代可以考虑采用。广告图片是三角形的,隐喻雪鸟的翅膀,当鼠标悬停的时候,广告图片的另一部分展开形成完整的图片。(译者注:值得一提的是,页面加载中时网站的logo会像翅膀一样折叠展开扇动着,和网页里的交互动画有很好的一致性)

图片 30

Etch

整个界面由方块磁贴紧密排列构成,但却不显得拥挤。顶部的导航栏占据了一点空间,但这些图标都是用于细致的分类。当然,你点击菜单栏也可以隐藏这些图标。另外,这个网站也是响应式设计的,不同的分辨率不能影响它的显示和功能,响应式V55!

图片 31

本文由手机版美高梅网站发布于时尚,转载请注明出处:极简网址,玩转网址登录页神来之笔

关键词:

上一篇:没有了

下一篇:没有了