遵循通用原则,网站看上去会更专业

Rules and preference for designing a website can differ from website to website depending on the target audience, whether it is entertainment website or corporate website or just a personal portfolio. But there are still somethings that are common in all websites, and if followed can make your site look better. So here are few things I would like to discuss.

 

网站设计要根据目标受众,选择设计方法。娱乐性网站,公司网站以及个人网站设计方法都不相同。但是网站设计中有一些通用原则,如果遵循这些规则,网站看上去会更专业。下面,介绍几个要点。

1. Font Style and Size
1.字号和字体

Selecting a right font and size is essential. For example fonts such as Verdana, Arial and Helvetica look especially good in websites, whereas fonts such as Times New Roman, Courier, Sans-Serif... etc types won't look good. Also the size of the font plays important role in website design, smaller sized fonts look neat but it is more difficult to read. So it is your decision to make a choice between the look and usability. Following is the comparison between Times New Roman and Verdana.

选择合适的字号和字体,是网站设计要考虑的一项重要内容。比如说,网站中使用Verdana、Arial和Helvetica字体,就会使页面看起来非常舒服,然而, Times New Roman、Courier、Sans-Serif等字体就不会有这样的效果。同样,字号在网站中也能发挥重要的作用,稍小的字号会使内容看起来更整洁,但不利于用户的浏览 。所以,你要在外观和可用性方面作一个选择。下面就是Times New Roman和Verdana的一个比较:

 

This sentence is in Times New Roman with size 3 (Times New Roman3号字体)

 This sentence is in Verdana with size 3(Verdana3号字体)
 
This sentence is

in Times New

Roman with size 2 (Times New Roman2号字体)

 This sentence is

in Verdana with

size 2 (Good

Choice) (Verdana2号字体)(是一个好的选择)
 
This sentence is

in Times New

Roman with size 1(Times New Roman1号字体)
 This sentence

is in Verdana

with size 1 (Verdana1号字体)
 

2. Using tables? Don't forget the cellpadding
2.使用表格时利用cellpadding属性

 

Almost all the websites use tables in one way or another, but using tables with a sense of design will make your site look better. If you use tables background colors in your page, then it is very important to use cellpadding, otherwise all the text inside the table will stick to the border of the table. Which is not recommended at all. Here is the Examples:

几乎所有网站都会利用一种或者几种表格,但是只有正确使用表格才会使网站看上去更美观。如果在网页中运用表格背景色,那你必须要运用cellpadding这个属性,否则表格内容会到边缘,这样的效果很不好。下面就是一个比较,上面的表格利用了cellpadding属性,下面的没有使用。 This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10.
 

 

 

 

This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0.

 

3. Design websites for 800x600 resolution
3.网站设计考虑800x600分辨率

While 1024x860 resolution is the most used resolution online, it is recommended to design your website 800x600 compatible. Because there are people who still use 800x600 resolution. There are different ways to design a website which is compatible to 800x600 resolution.

现在,用户使用最多的是1024x860分辨率,但是,必须保证网站可以在800x600分辨率的状态下呈现,因为仍然有用户在使用这个分辨率。要保证网站在800x600的分辨率下呈现,可以利用很多方法。

1. For example you can design it in a way that it will stretch to any size (any resolution), here is one good example of such website. Alamy.com

 

1.比如说,你可以将网站设计成能够自动适应任何尺寸(或任何分辨率)的网站,Alamy.com就是这样的一个网站。

2. Another way is fixed size such as this website. The size does not change no matter how much is the resolution. Yahoo.com

2.另一种方法就是将网站设计成固定尺寸,比如:W3pop.com,它不会随着分辨率的改变而改变。Yahoo.com也是这样的网站。

3. And finally not so user friendly but still acceptable design that is all the content is placed on the table not exceeding 800 pixels. There will still be a horizontal scroller on your browser but at least you don't have to scroll it when you are reading something on the site. Here is a good example of such site: Tomshardware.com

3.最后,还有一种方法虽然不是广为人知,但仍然有人使用,那便是在表格中放置宽度不超过800像素的内容。虽然会在浏览器上出现水平滚动条,但当你阅读信息时,你完全没有使用它的必要。Tomshardware.com就是这样的一个网站。

4. Pop up window? Bad idea
4.避免出现弹出窗口

Pop up windows are a good to catch user's attention and force him to take action (at least to make him close the window), but it is annoying and generally users don't like it. So unless it is very essential to use a pop up window for you - I would say avoid using it. Even though you can program it to pop up only once, it is still considered a bad idea.

使用弹出窗口,确实能吸引用户的注意力,促使他们采取行动(至少可以使它们阅读内容),但是大多数用户对这个感到厌烦。因此,只有在非常有必要的情况下,才可以使用探出窗口,不过,最好是一次也不要用。

Especially now with the browser's build in pop-up blockers, most of the popups are left blocked.

现在很多浏览器自带了弹出框屏蔽器,大多数弹出框都会被屏蔽。

5. Mention Image height and width in html <width="120" height="100">
5.在html中使用<width="120" height="100">来设置图片的高度和宽度

When browser opens a particular page it tries to understand the html, so when you leave the image without mentioning its dimensions, browser gets confused how much space it supposed to take, thus it will slow down the loading of the page. However if you mention the width and height of the image, browser can know exactly how much space should it allocate for particular image, and even before the image loads it can allocate this space to it and continue loading the rest of the page. So if you want your pages to load faster, don't forget to include image width and height.

 

当浏览器打开网页的时候,它会试图读懂html的语言,所以在没有涉及到图片尺寸的情况下,浏览器不了解图片会占用多少空间,因此图片下载速度会减慢。然而,如果设置了图片的长度和宽度,浏览器就可以了解图片的存储空间,会在下载以前分配图片的空间,然后继续下载网页的其它部分。所以,要使网页下载速度加快,就需要在在html中使用<width="120" height="100">来设置图片的高度和宽度。

 

6. Follow the web conventions.
遵循网站设计规则

Web conventions are very useful when it comes to web design, if you follow them you will make your user's life a lot easier. After all only useful things will become a convention. For example having the logo on the top-left corner of your website and linking it to the homepage is one of the conventions. Or employing consistent navigation throughout your website is another convention.

在设计网站时,遵循网站规则很重要,这样可以方便用户进行浏览。当然,只有有效的方法才会成为规则。比如说,logo要放置在网站的左上角,并且可以与首页进行链接,这是一个规则。网站的导航系统要连贯是另外一个规则。

 

7. Avoid under construction pages.
7.避免出现未建设完成的网页

 

Publish your websites only if it is fully completed, or if you have unfinished pages then do not put those pages online yet and do not provide link to them until they are fully completed. Under construction pages are totally useless, it will waste your user's click and might even generate negative effect towards your website (or you). Because if you think from user's perspective you don't want to click on the link just to find out that this page is under construction.

只有在网站建设完成之后,才可以在网上呈现,如果某些网页没有完成,就不要把它们放在网上,或者是不要进行链接。未完成的网页毫无作用,只会浪费用户的点击时间,这样会对网站产生消极的影响。因为,如果站在用户的角度考虑,你肯定不想链接完成之后,看到一个正在建设的网页。

 

8. Underlined texts that are not links.
8.不要给非链接文本内容添加下划线

nly links should be underlined, if you underline the text then make sure the user will not confuse it for a link.

能够进行链接的内容可以加下划线,但非链接文本就不要出现下划线,因为这样会使用户产生混淆。

9. Avoid intros and Welcome pages
9.抛弃引导页和欢迎页

Unless you have a very impressive intro (maybe designed by 2advanced) avoid using intros. As for the welcome pages that has an "enter" button and some info about the site should be avoided as well. Basically with welcome page you are stopping your users from actually seeing your site, you are keeping them one step behind. You never know maybe some of your users leave your site without even clicking on your 'enter' button, if so then you are loosing a potential customers.

如果引导页不是令人印象特别深刻,那就不要出现。出现“进入”以及某些信息的欢迎网页最好也不要出现。如果使用欢迎页面,那就意味着用户需要多点击一次,才能找到所需要的内容。你可能不知道,一些用户在点击“进入”键之前就已经离开网站了,这就意味着网站流失掉一些潜在用户。

 

时间: 2024-08-31 01:11:10

遵循通用原则,网站看上去会更专业的相关文章

优秀网页设计作品:卓越设计遵循的原则

导读:优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别. 内容摘要1.合理使用渐变2.留白3.网格布局4.提高字体应用5.明确而有效的导航6.设计漂亮.有用的页脚介绍优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别.前不久,

视觉设计原则究竟是遵循哪些原则

摘要: 笔者分享了一篇文章,<全面解析网页视觉设计原则的重要性>,文中简单的介绍下网页视觉设计原则的重要性.有一位朋友加我的QQ,一起讨论到视觉设计原则究竟是遵循哪些原则?其 笔者分享了一篇文章,<全面解析网页视觉设计原则的重要性>,文中简单的介绍下网页视觉设计原则的重要性.有一位朋友加我的QQ,一起讨论到视觉设计原则究竟是遵循哪些原则?其实,关于这一点,我并非是行家,只是能简单的汇总了一些知识,来简单的说明我自己的观点,不足之处还是希望各位看官指正,谢谢. 视觉设计原则就不必要去

“朝阳”不落 服装ERP选型需遵循六大原则

服装行业 一轮保持不落的"朝阳" 在所有的行业中,服装行业是永恒的"朝阳",如果说衣.食.住.行是人类生活的四大元素,那么"衣"则显示了对人类尤为重要的地位. 我国是世界上最大的服装消费国,同时也是世界上最大的服装制造国之一,因为与时尚潮流的密切接轨,使人们的服装更新频率日益频繁.与其他行业相比,服装业的投资门槛低,不需要太多的专门技术,而且市场风险相对较小,因此市场竞争甚是激烈. 为了争取市场的份额,服装生产企业正由量的膨胀向质的细分化.多样化

移动APP设计研究:手势设计应遵循的原则

文章描述:浅谈移动终端使用之手势操作的设计及研究. 手势是指人类用语言中枢建立起来的一套用手掌和手指位置.形状的特定语言系统. 手持设备中的手势是指,将一系列多点触摸事件综合成为一个单独的事件. 手势操作的优势 1. 直觉化--好的手势设计源于生活经验,易于理解,学习成本低. 2. 快捷高效--减少操作步骤,加快完成任务. 手势在平台上的异同 各平台上手势现状 通用手势能被广泛应用是源于对心理模型的匹配,以及大众对于先入为主的接受度. 基本通用的或其他的手势可发展, 需要遵循设计原则,需要注意的

新网站优化,如何才能更快提高网站权重

SEO站长一定常常想,网站如何优化,才能更快速的提高网站的权重,或者是能快速获得更多的外链该多好(这里指有质量的外链)!或许我们无法得到那么高权重网站的外部链接,但是质量较低的网站权重是可以免费获得的,以下长沙seo就来介绍下哪些方式可以给我们带来一定权重的外链,并且权重也是能确实传递过来的! 四两拨千金的获得网站权重 写一篇包含外部链接的文章,发布到其他数个网站,这属于内容同步,内容同步概念指的是在其他人网站上发表的内容.提供内容的回报是作者获得一个指向其网站的外部链接.在搜索引擎眼里这是合法

5个简单方法让网站对平板设备更友好

使用平板电脑的人越来越多,根据IDC的估计,2012年全球平板电脑的销售量就达到1.19亿台,但是专门为7-10寸屏幕设计的网站并不多.最近UX杂志在Mashable的刊登了一篇文章「 5简便的方法来您的网站的Tablet 」,卢松松编译如下: 在美国,有将近7000万的平板电脑用户,是2011年的两倍.这个国家有将近30%的网络流量来自平板电脑,2011年至2012年间电子商务网站来自平板电脑的流量甚至成长了. 方法都非常简单,见过简单的CSS修改,就可以让网站对平板用户更友好了. 什么是点击

敏捷软件开发宣言及敏捷宣言遵循的原则

http://agilemanifesto.org/ 敏捷软件开发宣言 我们一直在实践中探寻更好的软件开发方法, 身体力行的同时也帮助他人.由此我们建立了如下价值观: 个体和互动 高于 流程和工具 工作的软件 高于 详尽的文档 客户合作 高于 合同谈判 响应变化 高于 遵循计划 也就是说,尽管右项有其价值, 我们更重视左项的价值. 敏捷宣言遵循的原则 我们遵循以下原则: 我们最重要的目标,是通过持续不断地 及早交付有价值的软件使客户满意. 欣然面对需求变化,即使在开发后期也一样. 为了客户的竞争

如何才能让网站上的广告更符合用户体验

摘要: 网站广告是网站盈利模式中最普遍的一种,对于众多的小网站来说广告可谓是唯一的盈利来源,石榴算法以 后一些小站果然中招了,网站页面上的广告太多会影响到 用户体验,不方便 网站广告是网站盈利模式中最普遍的一种,对于众多的小网站来说广告可谓是唯一的盈利来源,石榴算法以 后一些小站果然中招了,网站页面上的广告太多会影响到 用户体验,不方便用户阅读页面上的信息.不仅如此弹窗的广告必定会引起用户的反感,甚至会让用户永远离开你的网站,比如:一个小说迷在选择小说网站的时 候,一般会首选那些无弹窗的网站,不

站长成功道路上需要遵循的原则

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 之所以写这个话题,也是本人长期做站长有感而发, 这里要感谢一下A5,是他们让我坚持做站长到现在,虽然说不上成功,但是通过在A5的不断学习和成长,目前我始终是一个赢利的站长.好了,言归正转,下面通过我自己曾经经历过的事实告诉站长朋友们站长成功道路上需要遵循的原则. 一.坚持 我觉得这个是基本原则,站长们必须要做到这个原则,著名化妆品"