网页设计技巧:网站的首页设计对于能观众的影响

所属分类: 网页制作 / CSS 阅读数: 1235
收藏 0 赞 0 分享
我想你应该知道网站主页对整个网站的来说是非常重要的,哪么我们如果让它能吸引你的观众(访问用户)?这就取决于你的设计了,网站首页一般包含:导 航菜单、搜索栏、网站LOGO、目录以及其它内容,还有就是能一眼看到你网站就知道这是做什么的。我们除了让首页设计得有吸引力外,还得使它有其它功能或 是一些引导性信息。下面我们将告诉你能影响观众的网站首页设计的10个要点。
1. 让它能吸引访客
网页设计技巧:能影响观众的网站首页设计 脚本之家
摘自: Art 4 Web
首先,网站首页就像是一本书的封面或是杂志封面,它是用户浏览网站时第一眼看到的,因此,你的首页设计必须第一眼就能吸引用,否则它就失去了首页的 用途和目的。你可以看大部分网站的首页,他们都是很吸引人的,你可以全色彩或者只有黑白,也可以利用有吸引力的图像与文字组合来创作你的首页。
2. 让用户记住你的品牌.
It can tell what the site is
摘自: Wunderkit
想要用户容易记你的网站或品牌,你可以把你的网站LOGO放到网站适当位置,而且要配合网站风格,这样会比较容易让用户记住你的网站LOGO,在用户心中留下一定的印象,下次用户访问网站的时候,看到你这个标志就可以知道是你的。
3. 告诉用户你网站是干什么的
It can show branding
摘自: Off Road Studios
如果用用户看首页都不知道你的网站是干什么的,哪么很容易让用户直接关闭网页,所以我们要充分利用网站明显的位置添加一些文字或banner信息,offRoad sutdios的网站就是很好的例子。
4. 鼓励用户采用行动
It can encourage visitors to take action
Site: Rdio
如果想用户联系你,你可以在页面上留下一些摘要联系信息而不需要放到contact us页面。想用户注册你的网站,哪么就制作一个注册或登陆功能的布局,你可以利用一些交互设计配合,使得设计更加醒目。所以可以用你的设计来引导用户去采用或者行动,这是主页的功效。
5. 设计一个个性的外观.
It sets a personality for the audience to see
摘自: De4macja
这一点很适合制作个人网站的用户,一般个人网站如果想让更多人来访问,哪么你的网站可以添加一些自己的个性作品以及文章,利用这些来吸引用户以及用户的2次来访。
6. 留住用户.
It lets the audience stay
摘自: k2
嗯……我想任何站长都有这么个想法,像一个商城,如果用户停留你的网站越久,订单成功率就会越高,所以这点我只有这么个建议,就是你的内容、产品以及设计要有足够的吸引力,这样用户看到后可能还会收藏或分享给其它人。
7. 页面有良好的引导性.
It leads them to other pages of the site
Site: Goverdose 2.0
如果具有良好的引导性呢?
1. 设计一个易用性的导航,不要太过花哨,可以使用一些交互效果来增加用户体验
2. 利用图片引导,如一些banner广告就是最好的引导,banner一般是用生动的图像与文字结合,这是比较容易让用户注意到的,所以商城网站一般都会有这些广告在。
8. 添加社会化分享插件.
It urges them to share your site
Site: National Traveller
为你的网站添加一些热门的社会化分享插件也是很不错的,现在无论是企业网站、电子商务网站或是个人博客都带有这些分享工具,正如设计达人网站的侧 边,你可以明显的看到一个分享图标,这个图标为了配合网站风格而重新设计过。这个分享工具能给网站带来一定的回访率,用户分享的被其它用户看到,可能会再 次分享。
9. SEO & 关键字
It easily gets bookmarked
摘自: The Big Burn
除了设计以外要注意的地方就是SEO代码方面,这个我想说的主要是网页要有标题、关键字,现在的网站网址一般很难记住,当用户收藏网站在下次回访时有标题或简单网站描述会比较容易知道哪个是你的网站。SEO当然还有很多内容,但这个具体你得上网搜索学习了。
10. 获得用户信任
It can gain trust from audience
摘自: Epic
让网站获得用户信任是很重要的,如果没得到用户信任,哪么用户在和网站进行操作的时候可能产生恐惧或者疑惑的感觉,这点你可以通过内容、优秀设计或者放一个统计让用户知道你的网站已经有运行多久,还有得到过什么认证之类的。
所以我建议一个企业客户做自己品牌网站的时候,应该找些有信用的设计不错的设计机构或设计师来制作,否则你的网站很可能像山寨一样。
现在轮到你
毫无疑问,在网页设计中一个网站的首页起头至关生要的重要,很可能影响到你的目标用户。因此它需要一个能让用户留下良好印象的设计方式,这样用户才会一次又一次的回访你的网站。
你觉得这篇文章对你有帮助吗?又或者你有一些建议要提出,哪么请在下方给我们留言。在此,我们会非常感谢你!(文:设计达人)
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多