I've focused in the past on some individual sections of your website that you should consider implementing. What I'm going to do now is give a brief overview of a number of pages and sections that are common in websites.
在过去的一段时间里,我一直对网站的每个单独的部分进行研究,以保证该网站能够成功运行。现在,我将对网站中经常出现的一些页面和片断给出一个大致的意见。
Home Page
首页
This page should have a short descriptive paragraph or two, along with some sort of bulleted list that a website visitor can look at and very quickly get an idea of what the site is about. This could also be called Main or Welcome, among other things.
首页上应该包含一段或两端简短的描述,并且最好用有序列表把重点部分罗列出来。这样可以帮助用户在很短的时间内就对你的网站主旨有一个大致的了解。因此,我们也可以把首页称为主页或欢迎页。
About Us
关于我们
This page gives an overview about the company. If the staff is fairly small, staff information can be included on this page as well. In the case of one staff member, this page may be called About Me. It may also be known as About the Company, Company History or simply History.
这一页将向客户介绍公司的大致情况。如果员工相对较少,那么员工信息也可以写进这个页面内。举个例子来说,如果只有一个员工,那么可以把这个页面的名称称为“关于我”。其中的内容可以包括“关于公司”、“公司历史”、“简单介绍”。
Projects
经营项目
This is a page to list past work you and your company has done. It can be anything from a simple list to detailed descriptions of each project. This can also be called Portfolio.
这一页可以罗列你过去已经完成的项目。可以使用列表的形式罗列所有项目,也可以细节的描述每个项目。这也可以成为“公司项目包”。
Staff
员工简介
If you have a decent sized staff, you can split off the information on them from the About Us page and give them their own section. This can be anything from a simple list to a separate page on each staff member. This is also often used if an organization has a Board of Directors.
如果你的员工团队已经形成规模,你可以把这部分信息单独从“关于我们”这个栏目中分离出来,作为一个单独的部分。同样也可以是列表的形式或单独介绍的形式。如果组织中包含很多的主管,通常会编辑这个页面。
Links
链接
A links page is pretty common. However, you should be careful about this page. In most cases, it should be very different from a personal links page. This may also be a called Partners.
链接页面也是经常出现的页面。然而,你应该要慎重考虑这个页面。在大多数情况下,它和个人主页上的“有情链接”是截然不同的。这个页面也可以称为“合作方链接”,记住,千万不要误为竞争对手作宣传了哦!
Contact
联系资料
This is where your email (or a form) will be, along with your phone numbers, mailing address, etc.
这张页面可以介绍你的E-mail、电话号码、联系地址等。
Location
在线地址
If you want a separate place to give actual directions, along with a map, this is a great place to put it. You can also put links to online map websites, often directly to directions to your location. This can also simply be called Map or Directions.
你可以专门开设一个有关介绍公司具体地址的页面,可以在上面放上公司地图。或者可以连接到专门提供在线地图的网站,然后在上面介绍你的公司地址。我们可以把它简单地称为“公司地图”或“公司导航”。
News
新闻
This is just a page for the latest info on either your business, your website, or possibly both. This can also be archived copies of a newsletter that you mail out. More and more often, blogs are taking the place of a more formal news section.
这张页面用于介绍公司的商务信息、网站信息。你可以使用邮寄的方式对这方面内容进行宣传;现今,越来越多的人愿意使用博客来进行新闻的宣传。
FAQ
FAQ[常见问题解答]
Just like it says, this is Frequently Asked Questions about your business and website. At the beginning, this should be populated with what you think the most frequently asked questions are. But as time goes on, you can update it with questions you really do get often.
顾名思义,这个板块是专门用于回答商业事务或网站上的相关问题的。一开始,你可以罗列一些询问率非常高的问题,然后,不断地对这部分问题进行更新,并加入一些新的问题。
Gallery
陈列室
This can be anything from images of your physical location to pictures of your product. Also commonly known as Photos or Pictures.
你可以在这个板块上放上一些产品图片。当访问者点击该图片时,它会自动跳转到有关这个产品的所有图片库。这个与我们通常所说的照片和图片陈列室板块大体相仿。
Virtual Tour
导航资料库
If a simple gallery isn't enough, a virtual tour can give your website visitors the feeling of actually walking around in your physical location. This can be as simple as pictures, or make use of more complicated Virtual Tour technology, where you can actually stand in one location and look around.
如果简单的“陈列室”板块已经不能够满足你的需要,那么需要专门做一个“导航资料室”,访问者可以在里面了解所有的分站点,查阅相对详细的资料,以更好地感受你的网站。里面可以是简单的图片,也可以使用一些相对复杂点的浏览技术;在其中,访问者可以链接到网站中所有的地方。
Calendar
日历
Although not all businesses warrant a calendar, many do. This can be anything from an actual grid-like calendar to a simple listing of events. It's also called Upcoming Events.
尽管并不是所有的商业网站都采取安放日历的做法,但是,很多网站都是这么做的。你可以防置一个格式日历,并在上面的某个日子上列出当天所发生的重要事件或准备要做的事件。我们也可以称之为“预知事件”。
Press
知名度
If you or your business have been featured in any publications or on other websites, your own website is a good place to show that off. Have clippings of articles and links to online articles here. This section can also be known as Media.
如果有其它的公共出版物或网站正在介绍你或你的商行,那么你应该节选其中的文章片断,并放置一个能链接到该文章的链接,以宣传自己的知名度。这种情况和媒体类似。
These are just some of the more common website sections for you to consider. Each website will likely have other sections that are specific to that company, or at least to that industry. Remember, the sky's the limit.
上述部分都是一般的商业网站应该具备的部分,具体情况视公司、产业的不同而不同。请记住,“天空无限大,机会无限多”!
链接到底是应该在新窗口打开,还是应该在当前窗口,一直以来都有争论。
曾经百度有人说GOOGLE的搜索结果页在新窗口打开链接是学的百度,被不少人“嘲笑”。但是,以前的GOOGLE的确是在当前窗口打开结构页面的,现在换为新窗口。但是,GOOGLE的ADSENSE仍然是在当前窗口打开广告结果。
那么出现一个链接我们到底应该选择是新窗口还是当前窗口打开呢?对于一个网站而言,到底什么时候选择新窗口,什么时候选择当前窗口呢?
1、全部选择新窗口
优点:全部新窗口,用户点链接的时候,当前浏览的内容不会被替换,不会需要前进、后退的去看自己已经看过的内容。
缺点:访问一会,就会发现打开大量窗口,占用资源。每个窗口都需要手动关闭;
2、全部选择当前窗口
优点:可以一直在一个窗口内看内容,不会打开很多窗口,不会占用太多资源。窗口只有一个关闭容易;
缺点:当我们需要看几个页面的内容,或者需要对比着看的时候,就没办法了。或者必须按住SHIFT点击链接,很麻烦。
3、有选择的使用新窗口或者当前窗口
选择:当链接是一个列表的性质,比如一个Inder页面,或者一个列表位置的链接,则使用新窗口;当链接是属于线性的阅读需要的时候,则使用当前窗口。
举例:频道的内容链接、导航链接、文章内延伸阅读的链接、文章的相关内容链接 都使用新窗口;对于文章的分页标签、列表的翻页标签、文章的上/下一篇文章的链接,都使用当前窗口;
优点:可以比较人性化的解决以上两种方式所带来的不变。不会大量增加窗口数量,同时用户也可以在多个窗口切换阅读;
缺点:虽然设计人员设计的很好,但是用户在点某个链接的时候的需求未必与设计人员的想法完全一样或者看法一眼个,造成用户无法确定,到底现在这个链接是新窗口还是当前窗口,这样给用户造成一定的心里“压力”。
从以上分析来看,其实三种选择,都各有优缺点。但是从国人的使用习惯上看,中国的网民其实也很大程度的适应了新窗口打开链接,甚至很多人都不知道按住shift可以强制在新窗口打开。因为,他很少能用得到这个功能。
我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这4项原则就是:反差, 重复, 排列, 和分类。
本文将讨论这4项与web设计相关的原则。只要在脑海中牢牢记住了这4项原则,你就一定可以设计出更加整洁漂亮的网页。
1.反差效果
好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点,注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。
图片反差
当需要在很多小元素后面展示一个大尺寸的插图时,这种方法很有效。嗯,我的意思就是,比如:
The Invoice Machine
这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。
Instabox
当你眼睛看到这个页面的时候,首先你会注意到什么?最有可能的就是盒子上面的那个星星了。跟 The Invoice Machine 一样,它们都是通过用一张大图片和很少的颜色来制造一个视觉焦点。
颜色反差
恰到好处地使用少量颜色,是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色,也可以在一张图片或插图的颜色里面应用。
Fatburgr
这个网站是极出色的一个所有设计原则的应用实例。关于颜色反差我们来看看它大大的黄色头部和小小的淡灰文字。排列、图片反差、重复和分类这几个原则做得都很彻底。
I Love Typography
一个用来展示排版的网站如果在它自己的页首就为我们展示了一个极好的排版效果,那让人觉得多惊奇啊!我喜欢他们所用的字体,也喜欢他们良好的青色和深灰色搭配。
字体反差
如果你想通过字体来产生反差效果,就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆,并让设计变得模糊。不过把字体大小弄得很不一样就会非常有效果,或者是把字体最细和最粗的版本拼合到一起也同样有效。同样的,如果你将两种外形差别明显的两种字体排在一块,就会对它们带来的视觉冲击效果感到惊奇。把一个 san serif 字体和一个手写字体放在一起就是一个例子。
Fixie Consulting
哇噻,我真的非常喜欢这个网站上使用的排版和颜色。注意看他们标语的大小和笔画。页面上洒水效果和少量蓝色的使用,都让我非常欣赏。
2.重复原则
跟web设计相比,重复原则在书本设计中应用得更加普遍,不过它在两者之间都是一样有效的。重复的设计元素可以使页面显得很连贯,还能提升品牌。在web设计中,可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素。看看下面这些例子吧。
Ten24 Media
Ten24 Media 在头部和脚部都使用了很有创意的插画。
Silverback
这个网站绝对是超赞的!我绝对可以在前面“反差原则”部分就可以把它作为一个好例子亮出来的,可它在“重复原则”部分也是一个好例子,因为它的界面风格和品牌部分都很明显地应用了这个原则。仔细看它用香蕉来当做列表前面的图标,还有头部、脚部的森林插画。
一、链接的统一性。
搜索引擎排名最主要的因素就是网站内容和链接,假如网站内部链接不一致,在很大程度上直接影响着网站在搜索引擎中的排名。例如热血嘉年华网导航栏中的“首页”链接,程序员在开发时可能会有以下几种链接代码,1、《a href="http://www.jnhwg.com"》首页《/a》 2、《a href="/index.htm"》首页《/a》 _fcksavedurl=""/index.htm"》首页《/a》" 。搜索引擎蜘蛛沿着网站链接爬行,所以可能会造成收录2个相同的页面,造成网站内容的重复性,直接影响网站的排名。
二、合理利用框架和js
网站主要内容和链接不要写入框架和js里面,例如该页面针对的关键词短语,现在搜索引擎还不能很好地识别js里面的内容,框架里面的内容也会在网站排名时从页面内容里分离出去,也就是排除了这部分内容的作用。但js和框架也可以起到积极作用。
三、网站大量页面存在重复的和title标签问题
网站大量页面存在重复的和title标签,甚至有些页面没有这些标签,这在网站排名里面是大忌,title标签的写法。
四、隐藏文字问题
隐藏文字主要指利用样式使这个文字对搜索引擎可见,对用户不可见。这种方式早就被列入各大搜索引擎惩罚的对象中。
五、代码问题
在页面设计时,尽量减化代码,有利于排名。
六、辅助导航
在设计每个页面时尽可能增加辅助导航,例如我们网站新闻页面,在上方增加的辅助导航,(首页》该玩法的新闻列表页》新闻标题)。
七、页面参数问题
每页面最好只使用一个参数,或者是整个网站生成静态页面,如果生成静态页面,保存目录不宜过深,因为搜索引擎对网站的权重会一层一层递减,首页权重是最大的。
九、站群问题
在服务器IP下的链接,,在链接代码中增加rel="nofollow"属性,告诉google这个链接非我所能控制,nofollow利用在留言本、博客回复中较多。
十、网站改版问题
搜索引擎判断网站改版,大致分为“标题的更改,内容的更改,布局的更改”,特别注意一点首页title尽量不要经常改动,因为搜索引擎判断网站改版最长时间可能达到二个月,这段期间网站在搜索引擎表现可能较差。我自己的网站热血超辅http://www.rxzhifu.com 做过几次实验,每次更改首页标题,百度蜘蛛会有十几天不更新我首页。
网页中的标点符号经常会被很多人忽视,其实无论是英文还是中文网站,短句还是长句,标点符号的应用在一定程度上也影响着网站用户的体验。包括我们在设计页面时,不仅要注重网页的布局,颜色,设计等,另外对于文字的标点符号也要引起足够的重视,具体标点符号会起到什么作用在下文中我们一一解说:
标点符号的作用
标点符号大致来说有三种作用:表停顿;表语气;表词语的性质。
1、表停顿,用来表明句子的结构。
2、表语气。通常交谈的语气有三种:陈述预期,告诉别人一件事情;疑问预期,向别人提出一个问题;祈使预期,要别人做一件事情。这几种语气在交谈中用语调来表示,在书面上用标点符号表示。
3、表词语的性质。某些词语加上某种标点,词语的性质就会发生变化。如“高兴”指的是一个形容词;而《高兴》就表示一部电影或书籍或文章的名字。
中英文标点符号的差异
1、汉语中某些英文中所没有的标点符号。
a) 顿号(、),英文中分割居中的并列成分多用都好。
b) 书名号(《》),英文中没有书名号,书名、报刊名用斜体或下划线表示。在英文中文章、诗歌、乐曲、电影、绘画等名称和一些专有名词也常用斜体表示。
c) 间隔号(·),英文中需要间隔时多用逗号。
2、英文中某些汉语中所没有的标点符号
a) 撇号(’)
b) 连字号(-)
c) 斜线(/)
用户界面文本中标点符号的使用
在用户界面文本中何时使用标点符合主要遵循以下依据
而针对具体的标点符号,也有一些规范。
句号
1、控件标签或主要标题说明后不使用;
2、辅助说明、辅助解释或其他包含完整句子的静态文本后使用。
这里的区分主要是看文本内容的性质,是主要文本还是辅助性的文本,这两种文本的区别在后面的是否使用英文标点符号中也会用到。
问号
可以在所有的问句后使用,问号应用于所有类型的文本,如下图:
感叹号
带有强烈的感情色彩,应尽量避免使用,只有在一些特殊情况下可以使用,如任务完成等。
冒号
1、在外部控件标签的末尾使用;
2、用冒号来引导一组并列项。
省略号
表示不完整或未完成,在以下情况中使用省略号,
1、表示该命令需要额外的信息。不是所有显示其他窗口的操作都加省略号,只是那些需要额外的信息来完成的操作的情况需要。
菜单项不需要额外的信息来完成。
菜单项是一个命令或者隐含着命令,需要额外的信息来完成。
2、表示文本被截断。
3、表示任务正在进行中。
中文界面里使用英文标点的情况
与普通的书面表达不同,在界面设计中会出现混杂了英文标点符号的现象,这不是设计师的疏忽而是英文标点将有助于提高无障碍访问特性,所以在一些重要信息中应该使用英文标点,如标签尾部的冒号和在命令、数据、标签中表示不完整的省略号,主要标题后面的问号。
粗略的总结了一些常用标点的用法和用户界面文本中的特例,其中难免有疏漏之处,欢迎大家指出疏漏之处予以斧正。