首页

在网页中设计导航菜单的三个原则(附案例)

蓝蓝

导航菜单可能是网页设计中最重要的部分了。每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息。好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息。

而且导航栏也是整体布局的重要组成。

总结一下,导航栏的重要性。

1. 浏览完Logo后,导航栏是用户第一个看到的组件。
2. 导航栏的作用是引导用户。
3. 导航栏的作用也类似于索引,快速帮助用户找到所需信息。

想让导航栏更加优雅、美丽、响应式么?看看导航栏设计的三大要点吧!

 

1) 别再让导航胖下去了,给导航减个肥

导航菜单重要性不言而喻。一些设计师往往使用一些繁杂的装饰来做突出。其实大可不必,通过字体、悬停效果、留白可以设计出简约、优雅的极简主义风格导航栏,看看下面的案例。

Design Instruct

minimal navigation bar
 

Sugar Rush

Clean Navigation Bar Design
评论(0) 浏览(3311)

最经典的LOGO设计如何返璞归真

蓝蓝

ultra minimalist logos

从Google、可口可乐到联邦快递、肯德基,让我们一起来看这些最经典的LOGO设计如何返璞归真,相信我,你会返回来重新看一遍的!


ultra minimalist logos

迪士尼


ultra minimalist logos ultra minimalist logos

BURGER KING


ultra minimalist logos

可口可乐

大型网站导航设计指南

蓝蓝

对于大部分网站,导航并不算是个挑战。一条主导航加条二级导航支撑,通常就足够了。典型的做法是,二级导航显示出父、兄及当前子菜单。常显的主导航条显示最顶层的菜单,允许用户在菜单间切换。

然而,有一类网站让这种传统的导航样式承担有些吃力。这就是我要提的大型网站。

定义大型网站

一个大型网站由结合了综合服务和产品的典型大型组织所有。这个组织通常也服务各色用户。拥有大型网站的组织,包括BBC这类机构型的,类似微软这种项目多样化的公司型的,政府部门,高等教育类的以及运作多种活动的慈善组织类的,比如世界自然基金会。

这些网站:庞大,层级多而深,由多个小网站和频道组成,迎合受众众多,许多入口,这种规模级的复杂网站导航颇具挑战。

大型网站上的导航挑战

在我们公司,我们花费了大量工作在这类大型网站上,尤其当我们想使用传统的导航时特费劲儿。

传统的导航无法负担深层级

传统的导航随着网站层级越深变得越难用。传统导航很容易应付三层;超过的话,问题就会暴露。即便拓展到页面众多的房产类网站导航,他们会更致力于导航多过内容(大型网站里页面太多让问题变得更糟),或更顶层的页面不再出现在导航中。在后者中,如果用户处于网站的深层级页面,他们将搞不清上上下级关系,因为无法看见当前页面在整个网站中的所处位置。

51abfabb03e0436170000001

虽然传统的导航处理结合了面包屑,能够拓展适应综合型网站,但当在房产网站上如此做时,成本却不断升高。

传统导航无法承载多入口

如果用户经由小网站或网站某菜单页的进入,传统方式的导航将让用户感到困惑。以一个在考虑参加大学研究课题的学生举例。这个人可能对院系详情更感兴趣相比整个学校。因而很容易进入网站的院系层页面,而不是学校的主页。
另一个例子就是单身妈妈想了解宝宝福利。她们更像是要直达福利的次级频道而不是政府主页。在这种情况下,用户的关注是在当前内容。(如:课题页或儿童福利页)。他们不是立即对这整一个网站感兴趣。
不幸的是,不论用户是否愿意,传统的一级、二级导航都试图让用户去了解整个网站环境。

在这个大学页面上,这个“研究菜单是指整个大学的研究呢还是仅是这个学院的研究。当两个同样的菜单出现,并指向不同的地方会怎么样?

O2O就在我们的身边

蓝蓝

今天在网上看到一篇O2O的案例,类似主人公这样的案例曾在网上出现过多次,如“煎饼大妈的QQ群”。今天看到的这篇文章也是讲吃,创意来源于主人公的朋友从从台湾带回几个坚果馒头,又可以说“馒头引起的一个020案例”。通过主人公研究、尝试国内常见的坚果,制作出来健康营养、有嚼头的坚果馒头。

O2O营销

产品做出来以后,主人公是利用一个社区QQ群,每天只限100个,一个6元。通过QQ群营销,让主人公拥有一大群忠实的回头客。通过本案例,再结合“煎饼大妈的QQ群”案例,让我们发现其实O2O的成功就在我们的身边。

我们也可以想想为什么最容易、最有效的O2O案例不是精通网络营销的人员,不是某个大枷,而是我们普通的妈妈级人物呢?笔者认为,她们才是真正的营销高手,正确的利用了网络营销方法—QQ群营销。

笔者最近也发现利用微信、QQ空间做香港代购、产品代销的朋友越来越多。他们通过微信、QQ空间发布产品信息,有意向的客户通过加微信、加QQ私下交流,了解产品,并完成下单。这也是充分利用了移动设备工具来推销产品,实现我们常说的020(线上线下)。

其实在我们身边有很多可以项目可以做O2O营销,但现在看到的主要是吃、喝、玩、乐几个方面。因为这几个方面的O2O能够更好的实施,也更容易获得成功。不是做了就可以成功,而是需要正确的运用微信、QQ这样的社交媒体。

最后,笔者建议想做O2O营销的朋友,尽可能的去发现身边的事情,就从吃、喝、玩、乐开始。只要你敢想,敢去做就会发现商机。行动吧!朋友!

年终特典!当下最热门的网页设计趋势总结

蓝蓝

11

 

本文总结了最近网页设计领域比较热门的几种技术,代表了一定的趋势,设计师们要跟市场接轨,紧跟潮流的脚步,可以阅读这篇总结,肯定大有裨益。

腾讯cdc:技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地。而网页设计也越发不再那么循规蹈矩,许多团队和公司都做了很多思考和创意。所以在我们适应着现代设计潮流的同时,不妨也来看看现阶段网页设计大致的趋势和风格吧。

我不敢大言不惭的说这就是网页设计的必然趋势,这只是本人对当下网页设计做出的一些小总结。希望这样的归类总结能给你带来更多的思路和想法。

01. 响应式网页设计(Responsive Web Design)

现在越来越多用户都拥有多种终端:台式机,笔记本,平板电脑,手机,能够适应不同尺寸显示屏的网页是现在的潮流,甚至是未来很长一段时间的设计趋势。那么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分辨率,让网页要素重组,使其无论在垂直的平板电脑还是智能手机上,都能达到最好的视觉效果。

除了多终端的多样化,我们还可以看到我们的电脑屏幕,手机屏幕都在不断变大,而在对未来生活的预测、概念设计里,”屏幕”%

追寻点击愉悦感:提升网站平板体验的6个技巧

蓝蓝

提升网站平板体验的6个技巧

Queen译者注:随着平板电脑市场的迅猛增长,你可曾考虑到网站在平板上的用户体验?本文给出了6个提升网站平板体验的简易技巧,让你花小气力,出大成果,可谓事半功倍。要不你试试看。
原文链接:the-pursuit-of-tappiness

在这篇文章发布时,仅在美国就有近7000万的平板电脑用户,这比前一年的数据增加了一倍。这意味着,美国近30%的互联网用户使用平板设备上网浏览。2011年到2012年间,电子商务网站在平板电脑上的交易量增长了348%,第一次超越智能手机的交易量。由于平板市场很年轻,其未来的发展空间必定很大。
这一趋势传递了一个强烈的信号:如果你的网站还没有针对平板电脑进行设计的话,现在是时候优先考虑其在平板电脑上的可用性了。否则,忽略这一点可能会对网站的整体转化率,回访量,销售量等带来负面影响。

什么是”点击愉悦感”(tappiness)?

当一个网站具有”点击愉悦感”时,用户在手机或平板设备进行访问的操作将变得容易而愉快。点击愉悦感包括巧妙使用的空间,易于阅读的文本,符合逻辑的交互线索,和大尺寸的点击目标,这些让访问者浏览网站时充满信心。

1359424540_87

本设计中,大字体和大点击目标的体验很好,即使在平板电脑上缩小后,体验依然不错。
而在另一些设计中,文字太小无法阅读,链接太接近容易误操作,无形中增加了操作时间、复杂度以及体验上的挫败感。糟糕的体验下,用户将快速流失。

1359424551_62

本设计中的小字体和小触摸目标被证明在平板电脑上难以阅读和使用。
一种理想选择可能是:重新设计你的网站,让它能针对各种不同设备进行自适应布局,但时间和成本可能会使你无法完成这样的全面翻新。然而你还有其他选择。本文给出一些技巧和方法,能快速帮助你提升网站的平板用户体验,只需几个简单的变化,你今天就可以做到!

7个值得收藏的用户体验行业网站和博客

蓝蓝

7个值得收藏的用户体验行业网站和博客

推荐一 :(5星)

Smashing Magazine

网站的精选文章比较综合,包括Design, Coding, Mobile, Word Press等,整体质量很高,非常适合用户体验从业人员持续关注。

推荐理由:

  1. 对于设计师而言,DESIGN, MOBILE, UX DESIGN这三个tag的内容都很棒;
  2. 文章总体质量非常高,篇幅虽长,但很成体系;
  3. 订阅者超过1,100,000,用户活跃度高,每篇文章的回复都很专业;
  4. 超过1,700篇原创文章,890位作者,他们均有多年从业经验;
  5. eBooks中很多优秀书籍免费。

7个值得收藏的用户体验行业网站和博客7个值得收藏的用户体验行业网站和博客

 

想让网页更性感?来试试加点透明效果

蓝蓝

 

随着CSS的广泛应用,透明元素在网页设计中大量采用。

通过添加透明效果,可以增添页面的对照感和可读性,同时对整体的效果妨碍又不大,可谓一举两得。

一般来说,采用透明效果显示区块、展现数据,透明效果出现在很多辅佐元素当中,这样前景元素就显得非常突出。
让我们来看看透明效果,这种优雅而又华丽的效果。

Wavefront

整体构成比较不拘一格,音乐节一般的氛围。霓虹色彩,半透明区块,让色彩更加动感,很好的支持了主题。

Wavefront

Advies

页面中含有很多透明条纹,中间的大区块既不影响背景图像的效果,也能很好的展现信息。

Advies

表单设计的就应该就像个温柔有礼貌的服务生

蓝蓝

表单设计的就应该就像个温柔有礼貌的服务生

表单应该就像个温柔又有礼貌的服务生。想象你走进一间超级市场,走过两旁堆满商品的走道之后,左转右转,看到你想买的果酱并且挑选了两罐放在购物袋中。

终于你走向结账柜台,一个笑容甜美的收银人员对你温柔的问好,并接过你手中的果酱,告诉你价钱,帮你包装,然后找给你零钱和发票并且愉快的说再见。

表单设计的就应该就像个温柔有礼貌的服务生

现在你来到一个购物网站,在首页看到许多特价商品,你点选了食品的分类选项,来到果酱的分类。稍微看了一下果酱的介绍文章,然后点击鼠标把果酱放到购物车中,并点选结账:结果出现的是一个冷淡又死气沉沉的表单(Form)。

表单绝对是网站中用户和系统互动的最主要的元素,网站透过表单向用户提出问题,用户则透过表单向网站表达他的想法。标单又可以细分成三种元素:1、说明目的的标签;2、提供响应的输入方块或选单;3、以及提交表单的按钮。表单的设计就可以想象成一个称职的服务生,他的服务应该要符合下面几个项目:

大猜想!扁平化之于苹果的真正意义

蓝蓝

大猜想!扁平化之于苹果的真正意义

揭开iOS7扁平化的外衣,深入探索苹果的新式设计语言,一起来猜想一下新的设计风格是如何在iWatch iTv iCar上实现。

当谈到Jony Ive,我们就不得不谈到他在iOS7上的大改造,普遍看法是,这种改变仅仅是外观上的改变,换汤不换药。

iOS7的神秘面纱于2013年6月揭开,设计灵感来自德国已故传奇设计师Otl Aicher。
Jony Ive在iOS上决定采用扁平化风格,这就意味着以下几点风格的转变:

1、用色愈发大胆、鲜艳;
2、界面会拥有更多的留白空间,让元素更好的呼吸;
3、字体运用会更加优雅灵活;
4、即将使用大量的几何形状。

这就是Jony Ive摒弃拟物设计的原因。iOS7的推出,也可以看成是Jony Ive对拟物设计的宣战。

iOS7的扁平化设计非常”万金油”,不但适应了今天的iPhone以及iPad设备,也能够应用于未来的iWatch,iTV,iCar等设备。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档