四招让你的网站“重获新生眼前一亮”

标签: PS教程 视觉设计 网页设计 PS 教程 & 设计文章 用户体验 | 发表时间:2013-03-19 00:32 | 作者:小峰向前跑
出处:http://www.uisdc.com

四招让你的网站“重获新生眼前一亮”

我们都想拥有很棒的网站,想让其他人在看到我们的网站时眼前一亮。 如果他们喜欢的话,还会再次点击浏览或者分享给他的朋友们。这就是好网站的魅力所在!

这就需要设计出“有亮点”的网站出来,而这并不等同于一定要亮瞎的毫无目的的视觉渲染以及纯粹为了炫技而编的特效代码。用户总是难以伺候的,现在的上帝都是易怒的,他们甚至也会拿着各种终端来考验你的网站,所以响应式设计也在最近几年在行业里津津乐道,大家都争先恐后的在使用这门新技术。

我们不但要会运用HTML5,CSS3和其他复杂的语言,也应该会利用基础技巧打造自己的网站。我敢说很多网页设计者或开发者都难以解决CSS3语言无法在IE浏览器中像在其他浏览器一样正常显示的问题。
这是个严肃的问题。如果网页无法显示,那还有什么意义呢?谁想要一直花时间解决错误漏洞呢?如果你的客户没有一笔很大的预算,但你还是想做出很棒的网页来,该怎么办?

你要学会打造一个简单的网站,同时又能保证浏览量。这有很多可以实现的方法。以下的几点都可以为建成基础又美观的网站助你一臂之力。

1. 巧用动画

animate 4 Ways to Go From a Boring to Amazing Website

屡试不爽: 当你想在网站中添加动画时,你通常会使用flash。
然而!Flash在过去几年经历了不堪的衰落过程。以至于现如今很多设备或浏览器都无法支持Flash插件的播放。

现如今我们有了更理想的替代品。他们在移动设备上也具有独立性并可见。这主要得益于JavaScript, Ajax,jQuery和其他语言,数据库。他们使网站变得有趣,不再无聊。譬如上图的案例 http://toriseye.quodis.com/

很多开发者运用这些技术手段使网站变得流行。不管他们想让图片渐隐或者组件飞过页面,这些语言都功不可没。

轻便:JQuery只占31或32KB。简单并且加载速度很快。相形之下,Flash动画会占据更多的空间。其他的替代,比如Microsoft Silverlight也会更费容量。

正确使用编码语言和数据库是极其轻便的。创建快速加载的网站是重要的,而增添动画动作会使运行速度减慢。而实际上,如果正确使用编码语言和数据库是极其低调轻便的。

诀窍是当你需要他们的时候再来使用这些技术。不要给你的网站增添不必要的信息,而应当灵活运用这些技术,使网站更精彩。

使人兴奋的:当然,任何一种动作都会吸引浏览者的注意。我们像孩子一样盯着移动设备屏幕,惊叹于其会移动这一现象!如果是屏幕静态的,我们也能接受,但只是不会引起我们的注意而已。

不管是简单的滑块或者图解,动作都能使一个站点看起来更有趣。“呜”和“啊”这些声音能使浏览者再次点击你的站点,并与他们的朋友分享。

2. 注重细节

detail 4 Ways to Go From a Boring to Amazing Website

构成:每个艺术家都知道好的构成能使我们的作品化腐朽为神奇。无论你是画图,画油画或者参加一个特别高级的绘画课程,你要学的第一件事就是构成。当然,你可能只画屋子里的一个玻璃杯。而构成是你通过画出杯子周围和其他细节来展现的。

这种构成的概念在网页设计中也十分重要。你可能觉得有时候需要给设计加些亮点,但实际上你应该更注重细节。运用微妙的纹理和样式。使用外边距来分隔元素。甚至连你的字体排版也要引起注意。

构成很好的网站能形成聚焦,使用户体验更“完整”。上图网站地址: http://www.mydirtydesk.com/

持续感:注重细节是你需要全面考虑的问题。你不能设计出一个很棒的细微纹理,然后草草处理你的图片。你不能在一处设计出完美的按钮而在另一处置之不理。必须让你的设计风格统一。持续性是网页设计的关键,特别是当你为创立一个品牌或确立一个目标而设计网站的时候。

更好的用户体验:大家坐下来一起讨论一个网站看起来多好或者一个动作特效有多炫是件很美好的事儿。而事实上,这些都是浮云。网站的价值在于其实现了目标所在。如果不能实现,所有的图形特效都变成了徒劳。

当你决定注重细节的时候,你也要注意到更宏大的东西。细节只有当你知道用户在看什么时才会使UI设计变得更好。

对图形设计,编码和决策具有敏锐的观察力是极其重要的。你的网站必须实现更远大的目标,如果没有达到,你只是处理了一堆没用的装饰,使得你的产品或服务毫无价值。

3. 弄点视频

video 4 Ways to Go From a Boring to Amazing Website

http://www.teehanlax.com/
吸引浏览者:
如果你不是动画制作者或超级编码大师,你可能会想利用视频来吸引浏览者。视频是吸引大众的最佳方式,因为视频要比移动图像或飞入的小鸟更有效果。视频要有目的性;比如一个时间轴或情节线索。而人们喜欢去探求。

Youtube是当今最火的在线视频网站。这不是因为其酷炫的网页设计,而是因为人们喜欢看视频。人们喜欢这种与某事某人的关联性。人们喜欢故事。

如果你正发愁怎么吸引浏览者或想传递些基本信息,考虑弄个视频吧。可能是你的一段话或展示一款很棒的产品,前提是保证让观众有东西可看。这对他们来讲更有意义。

视频是万能的:技术的进步简直就是设计者的福音。这使得生活更便利,更有意思。视频也可以有很多种玩法儿。你能在内容中嵌入视频或使之成为内容的主体。

你也可以用从YouTube或Vimeo上的视频做背景。这很不错!经常能有意想不到的收获。我的意思是,谁会想到网站背景能环绕他们而动呢?

搜索引擎优化:我们刚才说了,Youtube是全球顶尖的视频网站。这使得Google收益颇丰,因为Google拥有YouTube. 在YouTube上上传视频经常能在Google搜索上发现,而不仅仅是YouTube搜索。

这意味着如果你决定为你的网站创建视频,你可以选择上传到YouTube。这使得你的公司网页地址更容易被发现,因为会有视频信息链接到你的相关网站上。

4. 再大胆点吧

bold 4 Ways to Go From a Boring to Amazing Website

http://www.blastprocessor.co.uk/
易读:
当我刚开始做网站的时候,当时的趋势是用超级小的板式。很流行使用Verdana或Arial字体然后字体大小不超过11号。而现在完全不是这样了。我现在浏览网站,经常被巨大的标题和题目所吸引。

如果我不能很好的理解你网站所要表达的目的,你的网站就算白做了。如果你的字体特别花哨,或特别小,从而影响正常的阅读,那你就完全没有达到你的初衷。

印象深刻:运用大号字体或大号,明亮,很大胆的图像是很难忘记的。在我创建网站之前,我经常去素材库寻找灵感。我保证我能记得的网站都具有特别大胆而且有品味的元素,让我过目不忘!

这不仅是创建网站的秘诀,也会引导浏览者的视觉导向。视觉层次告诉我们应该看哪里。对比强烈的或明亮的色彩都会有这种效果。

如果我能记住你的网站,你的目的所在或甚至一张简单的图片,我就会觉得你的网站是成功而且有效的。

保持简单:我们生活在极简主义思想至上的年代。现在的消费者都是把钱花在刀刃上的——他们想一步到位。设计者利用这一点,以极简主义的名义,打造出了极其简单直接的设计。

极简主义是好,但是其与“特别无聊”只有一线之隔。要记住,很多消费者和浏览者分不清什么是极简。

大量的留白不错,但你也可以选择用大胆的颜色或样式填充。这必然会吸引浏览者,还可以充分利用所有空间。不需要太过修饰,只要你能在不弄乱的前提下尽量大胆就好。

结论

设计创意网站没有唯一的正确方法。简单易行的小技巧可以使网站看起来更具有针对性。我们的理念是打造很棒的作品。在你运用这些方法的过程中有什么收获或困惑吗?快来留言吧!

SDC翻茄匠:小米粥      微博: @小米粥8711
原文地址: teamtreehouse

优设哥向您推荐:

10个鞋类网站设计欣赏

2013年一二月最好的网站模版推荐

一个成功电子商务网站的四大特点

主流电商网站视觉分析

究极分享:36个漂亮的各类型网站源代码打包
无觅

相关 [网站 新生] 推荐:

传统门户网站的新生——AOL“魔鬼”计划

- Damon - 爱范儿 · Beats of Bits
AOL 在过去相当长的时间里都是一家相当强大的互联网服务与媒体公司. 不过在过去十年里,曾让 AOL 收益颇丰的封闭模式已经被证明与时代脱节. 下面这张 2001-2009 年 AOL 订阅用户数量变化曲线就能说明问题. 在 2000 年与时代华纳合并后仅过了一年,AOL 的的订阅用户数就开始急剧下滑.

四招让你的网站“重获新生眼前一亮”

- - 优设(UISDC)
我们都想拥有很棒的网站,想让其他人在看到我们的网站时眼前一亮.  如果他们喜欢的话,还会再次点击浏览或者分享给他的朋友们. 这就需要设计出“有亮点”的网站出来,而这并不等同于一定要亮瞎的毫无目的的视觉渲染以及纯粹为了炫技而编的特效代码. 用户总是难以伺候的,现在的上帝都是易怒的,他们甚至也会拿着各种终端来考验你的网站,所以响应式设计也在最近几年在行业里津津乐道,大家都争先恐后的在使用这门新技术.

网站推荐:IFTTT(if this then that)

- 小皮球香蕉梨 - 有意思吧
这是一个神奇的网站,比某电视上天天放的那个广告要神奇许多. 就像它的域名 ifttt.com 一样,虽然丑却十分个性. 昨天晚上,ifttt.com 在 Twitter 被瞬间引爆,每个被邀请的人都会再拥有5个邀请名额,源源不断的邀请让 Geek 很兴奋. 那么,ifttt 到底是什么呢. 这是一个条件触发网站,当 A 条件触发时,自动激发 B 条件发生.

Facebook 网站架构

- - idea's blog
我收集到一些文章和视频, 可以带你窥探 Facebook 的架构. Facebook 承载了几十亿的用户, 它的架构(包括思想和实现)是非常值得参考的. 当然, 你要小心不要照搬 Facebook 的每一字一句, 因为任何思想和实现都是有自己的应用场景的.. Google Talk 界面开发分析. 使用Python POST任意的HTTP数据以及使用Cookie.

用BrowserID注册网站

- ashuai - Solidot
Mozilla宣布了一个实验项目BrowserID,提供了一种注册网站的新方法. 注册网站通常的方法是电子邮件验证,造成用户时间的浪费,要求用户登录另一个网站,记住另一个密码. BrowserID(源代码发布在github上)提供了一种更简单的方法,消除了电子邮件验证. 它是Verified Email Protocol实现,基于公钥系统和Mozilla的认证服务器,以确保用户身份的真实性.

ifttt、GGG与网站图谱

- babyone - cnBeta全文版
尽管伯纳斯・李(Tim Berners-Lee)在发明WWW之初,心中就有一个GGG(Giant Global Graph)的宏大梦想,但是直到Google的网页图谱、尤其是Facebook的社交图谱、Twitter的兴趣图谱之后,人们才真正意识到图谱的网络效应魔力. 不过这仍然未及伯纳斯・李的预期,他理想中的GGG是一张数据的图谱、服务的图谱,而不仅仅是网页、人或兴趣.

苹果网站的特点

- fei - 所有文章 - UCD大社区
以前听同行讲过一次apple.com,在他眼里apple.com就是丰碑,基本没有不好. 任何哲学的理论和术语都可以往它身上套,简直就是成就与完美的化身. 这问题我觉得需要拆解分层次的看,任何有特点的设计必然有其优势,也有其局限性. 我认为讲apple.com很有特点可能更合适,因为“特点”只是个中性词.

中国的大网站

- yangzhe - Jarain
//别的搜索引擎把不能搜的挑出来屏蔽,百度把能搜的挑出来让大家搜. //以Twitter为指导思想,以饭否和叽歪的关站为经验教训,以稳定压倒一切为基本原则的具有中国特色的社会主义微博. //什么博客什么校友录什么白社会什么搜狐微博都是浮云. //中国只有两个有态度的网络媒体,一个是人民网,一个是网易.

苹果网站的特点

- 图腾 - 千鳥志
以前听同行讲过一次apple.com,在他眼里apple.com就是丰碑,基本没有不好. 任何哲学的理论和术语都可以往它身上套,简直就是成就与完美的化身. 这问题我觉得需要拆解分层次的看,任何有特.

50个黄色网站

- 小汐 - 帕兰映像
一个好的黄色网站的重点并不是够不够黄,也不一定要黄色电影、黄色视频、黄色图片和黄色小说一应俱全,而是要黄的有质感有层次,欣赏起来要赏心悦目. 在浩瀚的互联网宇宙中,有无数的黄色网站. 有的你可能已经深入接触,有的你可能从未体验. 本文里面,帕兰将向你推荐50个来自不同国家的优质的黄色网站,请准备好大饱眼福.