网页中的丝带和标牌设计英文教程

潮流会静静地诞生于我们未留意之时。当你浏览众多网站时,通常会看见自己在别处错过的花纹、图案。其中就包括丝带和标牌。

这两种图案越来越流行,文中将它们放在一起讨论,因为它们大都同时使用,丝带不言而喻,大家都清楚这个元素。但标牌——我的意思是它是放在屏幕上方 的人造标记,看起来就像t恤衫上的商标。使用这两种元素的网站确实质量上乘。这次展示的案例都非常华美。极少有潮流像这样:筛掉许许多多无趣的例子才找到 一个有吸引力的个案。

为什么使用丝带和标牌

标牌非常有用,因为它能有效吸引用户注意力。标牌将内容摆放在用户眼前。标牌的形式大都非常突出,不管是使用3D样式或是强烈的对比色。这种特性使 标牌经常显示重要的信息:logo,导航,活动。在下面的展示中我们能明白它的用处。当然,在使用它之前,你要确定是否真的需要。丝带也是同样,它经常与 标牌一起使用,能吸引用户注意并显示重要信息。丝带两端的箭头形状看起来都指向它上面的内容,直接吸引着用户的注意力。

丝带相关的展示

Letter Learner

在这里,丝带完美地构造了网站的名字Letter Learner。同样,页面布置是一个简单的单列。丝带构造的标题激发用户从顶部开始浏览体验。

Ribot

Ribot的丝带运用非常巧妙。这个流行元素令整个页面变得生动,同时将公司的焦点集中在两行文本中。相当棒的表达方式!因为这家公司的名字并没有告诉我们它是做什么的。

Alex Pierce

由于Alex Pierce主页上有如此巨大的文本,它不得不采用一个相对应的元素去平衡页面的重感。这种情况下,丝带在头部发挥了很好的作用。我也很喜欢丝带中间展开的部分,这让人留意到设计者的名字。

Rockaholic

在Rockaholic不同寻常的页面上,丝带直接吸引用户的注意力向下移动,让人们的视线在网页上垂直移动,令人不由深入挖掘下去。

Paris Jones

美味诱人的红丝带构成网站名Paris Jones。虽然文本的形式很巧妙,不过对比强烈的样式还是保证你能注意到它。

Blog en Bois

在Blog en Bois上,单箭头丝带格外有张力,这很大程度上归功于明黄背后的暗色调。我发现自己一遍又一遍注意到Logo。这真是给人留下深刻印象的好点子。

HTML5Boilerplate

大受欢迎的html5Boilerplate使用丝带令哇哦们注意到网页上最重要的活动元素。我酷爱这种不必在脸上写着“Download here”就能发挥作用的丝带。丝带间的连接和标牌告诉我们哪里可以下载资源。

Wells Riley

Wells Riley是丝带运用美学上的经典。丝带看起来很棒而且突出了网页的重点。

Dhiraj Singh Karki

我总是喜欢那些将内容分隔的设计。UI设计师Dhiraj Singh Karki的网络文件夹就是这种类型。这里,丝带运用的相当巧妙,它放置的位置与其他网站完全不同。它完美地融入页面,与其他元素一起构造出整个网站的简洁优美。

Chipmunk

Chipmunk是丝带和有机元素结合的优秀例子。丝带围绕着导航栏,与下面的图案完美融合。同时,它令导航栏没有被各类图片所掩盖。

标牌网站的展示

Ennea

发现了吧?Ennea是一个服装网站,毫不奇怪地它使用标牌构造Logo和网站名称。有时候,直白的方式最有效。

Philip Meissner Design

这个网站上,标牌构成了重要的导航。通常我会被这种方式弄糊涂,不过这个布局和颜色让人一眼就注意到。

Tinkering Monkey

对一个电子交易网站来说,有什么比引导用户付账更重要的?Tinkering Monkey用一个漂亮的小却清晰的标牌引导用户完成购买过程。

Parkbud

在一大堆智能手机软件中,较好的那些总需要表现自身的不同之处。Parkbud是免费的,那个大胆的红色标牌也告诉你这点。标牌巧妙地出现在内容页,但你的眼角一定会捕捉到它。

Lense

Lense是标牌结合结构化文本的好例子。

Coreymade

我确实喜爱这个网站以及它变体字的标牌。这个标牌感觉像t恤衫上的商标而不是一个普通网站的标牌。3D效果令它很受浏览者欢迎。

Netastica

Netastica的标牌大得可爱。同时它含有重要的信息并引导用户回到主页。

Ryan Havoc Taylor

标牌在这个网站上如此醒目,以至于它不需要过多的对比就很突出。它和网站融为一体,充分发挥自身的作用。

丝带与标牌同时运用的优秀网站

ClearSpan Media

ClearSpan Media向我们展示了丝带和标牌的美丽结合。在这个网站上,你能找到图案、过度和颜色变化。顶部的标牌和下方的丝带对用户而言构成一个包含有趣内容的环。

Krichevtsova Alexandra

Krichevtsova Alexandra的网站在内容上非常露骨,标牌和丝带为关键元素添加了额外的活力。

Wes Bos

文中展示的网站大都有巨大的丝带。不过Wes Bos没有这么做。它的丝带看起来非常小,这是一个好思路——丝带不需要支配整个设计来显示自己的作用。

 

(来源:帕兰映像 英文: webdesignerdepot.com)

时间: 2024-09-23 06:24:52

网页中的丝带和标牌设计英文教程的相关文章

网页中图片幻灯片用户体验设计小细节

图片幻灯片是网页中最常见的一种效果,功能几乎差别不大,可很多网页设计师可能都没有考虑过这种最常用的幻灯片其中所涵盖的用户体验思想,本文通过国内外几家大型网站中的幻灯片来分析他们各自的设计小细节及给我们带来的体验 1.卓越亚马逊的首页轮换图片,每刷新一次,都是随机不同的顺序显示,这样的设计解决了对于较多图片轮换而靠后的图片信息很少被看到的问题,这点对于电子商务等时效性不是很讲究的网站来说尤其重要: 2.最初的时候是点击照片跳转到下一张,再然后是点击照片的左边是上一张,点击照片右边是下一张,当我们习

网页中嵌入Flash的方法讨论_Flash教程

Flash 嵌入的问题论坛中有人问了好多次,到底应该怎么用,为什么通不过验证,要通过验证怎么办等等等.讨论中也出现了不少的误解,所以我单开一个帖总结一下我所知道的东西,不想看我罗嗦的直接跳到最后看结论就可以了. 一.传统的方法 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"    codebase="http://fpdownload.macromedia.com/pub/shockwave/ca

网页设计技巧:网页中导航和搜索合并设计

导航与搜索合并的可能性 网站内容的入口很大一部分都是依赖于导航系统,而网站的入口很大一部分依赖于搜索系统,这也在一定意义上证明了导航与搜索之间的重叠性.搜索系统可以完成导航的功能,而导航在一定意义上也可以完成搜索的功能. 网站的导航在一定意义上可以看做是对搜索系统中的关键词类别的提取,这个类别可大可小.比如众多购物网站中的"手机"类别,这是一个大的类别,而"手机"类别下的"索爱"品牌则是属于小类别.这两个类别可以通过导航系统的上下级关系表现出来,

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

导航并不只是指常位于网站头部的导航条,路边的指示牌.商场的指示牌等等都是一种导航,可以说导航在生活中无处不在,如果没有这些导航存在,那么我们将迷失,迷失在互联网信息的海洋中,迷失在纵横交错的马路上,迷失在琳琅满目的商品货架之间. 在所谓的WEB2.0风潮疯狂的从国外吹入国内的时候,国外一些成功网站的成功模式也疯狂的吹入到国内的模仿者的眼前.目前在国内关于网络相册方面或者时尚一点是说关于WEB2.0网络相册方面做得比较好的应该算是yupoo了,同时它也是国内模仿flickr模式最像的最成功的--事

简单对比C#程序中的单线程与多线程设计_C#教程

多线程概念 1.一个正在运行的应用程序在操作系统中被视为一个进程,进程可以包括多个线程.线程是操作系统分配处理器时间的基本单位 2.应用程序域是指进行错误隔离和安全隔离,在CLR中运行,每个程序域都是单个线程启动,但该程序域中的代码可以创建附加应用程序域和附加线程 3.多线程的优点在于一个线程阻塞的时候,CUP可以运行其他的线程而不需要等待,这样大大的提高了程序的执行效率.而缺点在于线程需要占用内存,线程越多占用的内存就多,多线程需要协调和管理,所以需要占用CPU时间以便跟踪线程,线程之间对共享

网页中怎么实现checkbox&amp;radio对齐的教程

不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样. 重置 form checkbox & radio 因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,这样就能解决很多不必要的麻烦. 以下是 14px Arial 字体的解决方案: 1.css代码 .form {font:14px/18pxArial,Helvetica,sans-serif; } .for

网页设计潮流:丝带和标牌在网页设计中的运用

文章描述:网页中的丝带和标牌设计. 潮流会静静地诞生于我们未留意之时.当你浏览众多网站时,通常会看见自己在别处错过的花纹.图案.其中就包括丝带和标牌. 这两种图案越来越流行,文中将它们放在一起讨论,因为它们大都同时使用,丝带不言而喻,大家都清楚这个元素.但标牌--我的意思是它是放在屏幕上方的人造标记,看起来就像t恤衫上的商标.使用这两种元素的网站确实质量上乘.这次展示的案例都非常华美.极少有潮流像这样:筛掉许许多多无趣的例子才找到一个有吸引力的个案. 为什么使用丝带和标牌 标牌非常有用,因为它能

网页设计中最常见的30款英文字体

  关于英文字体,对我们网页设计师朋友们来说一定并不陌生,即使我们很少做英文语系的网站,但在浏览国外网站的时候,大家一定都会有或多或少的认识.其实不单单是在网页中,很多移动操作系统和浏览器中都广泛使用了今天我们即将介绍的这些字体. 想必大家也都能猜出来像 Arial.Helvetica 这种大名鼎鼎的字体肯定在里面了,那么还有什么呢?一起来详细了解一下吧! 首先,补充个小知识: 1.网页设计中的英文字体,一般有以下五类: serif(衬线) sans-serif(无衬线) monospace(等

手机网页设计原则:移动网页中的基础元素

文章描述:移动网页设计应该包含的5个基本元素. 大部分人都认为手机网页设计与电脑网页设计有很大不同,其实不是,手机网页除了小且可以触摸外,很多设计原则与电脑网页设计是共通的.这里有 5 个基本的元素,希望对设计师有所帮助. 1. 有意义的导航 在移动设备上获取信息实际上是有趣的体验,因此,令用户在使用过程中感到愉快很有必要,简单地删除屏幕上的链接(或taps)并不能达到用户友好体验的目的.导航应该包含用户需要的内容,并提供明确的路径.如果用户知道跳转的具体页面,就会进行点击. 首先,确保导航在用