当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > 网站设计的几个主要方面

设计理念
利用.htaccess控制网站
别具一格的网站评论
网站设计原理

设计理念 中的 网站设计的几个主要方面


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1959 ::
收藏到网摘: n/a

It is a hot opinion that "it’s the words that sell, not a design" and that "you should invest all your money into writing a good sales copy and what is left (if anything) into web-site". I can give you 99 out of 100 that authors of these claims are copywriters, web-designers usually don’t write articles. It is like asking football player what game he enjoys more: football or hockey? :0)

经常有人建议:“网站应该注重内容,而不是设计,所以网站应该更注重网站销售内容的安排,网站中多出现产品销售内容。”宣传这种观点的人,99%是文章编写者,而网站设计者是不会编写文章的。这就像询问足球运动员:更喜欢足球还是橄榄球?

I don’t want to argue that statement about the importance of copywriting, on the contrary, I think that it is totally true, but under one condition – your website is already implied to make your visitors feel, at least, comfortable.

这里,我不想否认网站内容的重要性,相反,我认为内容的确很重要,但有一个前提:网站设计可以让用户感到舒服。

It could never be counted, how many times I closed down the browebsiteer without reading a single word, just because of the amateurish and clumsy look those websites had.

曾经有很多次,在没有浏览内容之前,我就关掉了浏览器,就是因为网站外观设计业余、拙劣。

No need to emphasize on importance of the professional website. It is obvious, at the same time you won’t read there, that web-design is everything and that professional sales letter or text message is nothing, because it is like answering the question – what is better to have skin or heart cancer? To my mind, it is better to be totally healthy.

我们不需要强调网站外观的重要性。很明显,在无需阅读内容的情况下,网站设计关乎全局,专业销售信函以及文本信息就不太重要,因为这就像回答以下问题 :皮肤及心脏,那一个生病更好?我想,最好两者都健康。

Business website usually plays the role of virtual office, shop, informational dep., marketing dep. and service dep. It is a main representative and the core of your business – the final proof, the image of your company is based on.

商业网站经常扮演虚拟办公室、虚拟商店、虚拟信息部、虚拟营销部、虚拟服务部的角色。网站就是公司代表,是商务核心——公司形象确立的基础。

-----What it is all about-----
-----
网站内容-----

The target is set – to make your website as good as it can possibly be. Here I pointed the crucial pillars of designing a professional looking website. You will not find there basic HTML teaching or how to use particular web-editor. The knowledge of HTML will help, but is not compulsory, as WYSIWYG (What You See Is What You Get) editors will make all HTML coding work “behind the scene” for you.

网站建设的目标就是把网站尽量设计好。这里我会介绍设计专业网站的重要因素,你不用学习基本的HTML设计方法或者使用特殊网站编辑器的方法。学习HTML网站设计方法,对你会有帮助,但不是必需的,因为WYSIWYG编辑器会帮你编辑HTML编码。

You require general understanding of what HTML is and ability to use one or several WYSIWYG web-editors, that is three hour learning process. The feeling of style and taste is also advisable; otherwise you will have to consult a designer.

当然,你需要了解HTML的内容,学会使用一种或几种WYSIWYG编辑器。你只需花三个小时就可以掌握这两项内容。同时你还需要考虑网站类型及风格,如果自己办不到,就需要咨询网站设计师。

The problem with design “How to..” is that website design is 90% creative work, where is no two identical website (unless copied), that is why there cannot be any step-by-step study, the same way there is no step-by-step study on how to paint a masterpiece paint.

网站设计中需要90%的创造性工作,除非是复制相同的网站。这就像创作作品,我们不能一步一步学习,需要自己创造。

What we can teach is how to “hold a brush”, but it is you, who should paint “Mona Lisa” and become “Leonardo da Vinci”.

你可以学到的是:拿画笔的方法。只有自己描绘蒙娜丽莎,你才能成为达芬奇。

Web_site_Designing_PillarsWeb_site_Designing_PillarsWeb_site_Designing_Pillars

-----What your website should look like?-----
-----
网站外观 -----

+ Stylish. Consider it as an exterior and interior of your whole off-line business premises, starting from hall (main-index web-page) and ending with your personal office (“about me” web-page). It has to have its unique “feel” and style. Don’t also forget about branding features your website represent.

+
流行。把设计网站想象成设计现实的事务所,从里到外都要设计好。首先从大厅开始设计(索引),最后设计自己的办公室(“关于我们”网页)。网站的感觉及风格必须独特,同时呈现出网站的特点。

+ Clear structure. Imagine a shopper who wants to make a purchase at your offline store, but in order to enter it, he has to go through warehouse, service department and all kinds of office premises. Don’t allow your web visitor feel like that shopper.

+
清晰的结构。假设:某个购物者在现实商店中购买商品,但在进入商店前,他必须首先接触仓库、服务部等等商场所有部门,在这种情况下,顾客可能会离开。确保你的网站访问者不会出现此种情况。

+ Harmonically allocated design elements like graphics and text. The website is united entity and your brand. Every element on the website is to be blend with “exterior”, no separated elements or graphics like a number of flashy banners.

+
分配合理的设计元素(例如:图片、文本)。网站是所有内容的混合体,也是你的品牌。网站中每一个元素都与其它部分结合在一起,网站中不会出现类似于横幅广告的独立内容与图片。

+ High usability standards and complete website optimization including clear HTML code and optimized web graphics that are similar to clear shop. The more “dirt” your web-pages contains, the more time it will take to load them, the more potential errors it may show in different browebsiteers, and the harder it will be for Search Engine spiders to index your website. We will discuss these issues later on. Pay also attention to broken links, as it is similar to wall behind the door of your off-line shop. Let your visitors find good resources with your help, rather than an “Error 404 Page not found”.

+
可用性高、网站合理优化(包括:清晰的HTML编码以及优化的图片),类似于合理设计商店。网页中多余信息越多,下载速度越慢;在不同浏览器中出现的潜在错误越多,搜索引擎越难对网站做索引,这些问题我们稍后再讨论。无效链接如同现实商店门后的墙壁,所以你也要特别注意。访问者应该在你的帮助下找到有价值的信息,而不是出现有错误的404页面。

+ Absence of grammatical errors. It concerns grammatical correctness of textual information. The importance of correct grammar is clear, no one wants to deal with uneducated people, especially if they represent businesses.

+
避免出现文法错误。这就要求文章语法正确,语法正确要求语法清晰。没有人愿意与没有素质的人做生意,特别是没有素质的商人。

-----What programs you will need-----
-----
网站程序 -----

First of all you will need to equip yourself with right “armament”, that are mostly WYSISWG (What You See Is What You Get) web-editors. The download links and short description you can find below:

首先,你需要掌握许多程序的使用方法,主要是WYSISWG编辑器。你会发现以下链接以及程序介绍:

Macromedia Dreamveawer  
http://www.macromedia.com/software/dreamweaver/ - considered to be the best WYSIWYG HTML editor. Ideal for beginners as well as professional users. Anything you can only imagine has already been included :0) 30 days trial version.

http://www.macromedia.com/software/dreamweaver/
——这个程序被认为是最好的WYSIWYG HTML编辑器,网站设计初学者以及专业设计者都能利用。你能想象到的设计方法都包含在30天的试用版本中。

EzyPage -
http://www.ezyware.com/
- very simple drag&drop web-page creator for beginners. Although it has several very interesting features build in like dropdown menu or scrolling table. Free distribution.

http://www.ezyware.com/
——对初学者来说,这是非常简单的drag&drop网页“创造者”。尽管它有许多有趣的特征,例如:下拉菜单、滚动表格,但它是免费的。

Stepzilla -
http://www.stepzilla.com/ - the software's motto - step by step to the web - tells everything for itself.

http://www.stepzilla.com/
——这个软件的箴言(循序渐进)说明了一切问题。

1st page 2000 v.2 final -
http://www.evrsoft.com/products/ - very pleasant HTML editor for beginners as well as advanced webmasters. Has ability to choose the interface that will be more suitable. Available HTML cleaning option, XML converter, build in FTP-client and preview function. A lot of ready to use Javascript, VBScript, DHTML, Perl applications. The software is being distributed for free.

http://www.evrsoft.com/products/
——提供高质量的编辑器,方便初学者、经验丰富的设计者使用。你需要找到比较适合网站设计的编辑器。网站提供XML转换器等工具,并且还能够利用JavascriptVBScriptDHTML等程序。这些软件是免费提供的。

Hot Dog Professional -
http://sausage.com/products/index.html - three HTML editors - HotDog Junior for kids, PageWiz for beginners and Professional ver.6 for advanced users. Convenient interface with easy to access HTML functions. Includes CSS editor, checker for tag errors and many others. All three editors allow to download 30-days trial version.

http://sausage.com/products/index.html
——提供三种HTML编辑器:HotDog Junior for kids(不了解网站设计的用户使用)、PageWiz (初学者使用)、Professional ver.6(经验丰富的设计者使用)。通过简单的界面操作,就能发挥HTML功能,包括:CSS编辑器、标签错误监测器等等。你可以下载上述三种编辑器的试用版(30天)。

CoffeCup HTML editors -
http://www.coffeecup.com/software/ - another offer with several versions of software for beginners as well as advanced users. Pre-made JavaScript applications libraries, Flash effects, font creator, HTML code cleaner, FTP-client, and many more. Collection of web-pictures, backgrounds, icons. Available 30-days trial PRO or free version.

http://www.coffeecup.com/software/
——为初学者以及经验丰富的设计者提供几种软件:JavaScript程序、Flash、字体创建器以及HTML编码清除器等等,并且网站还提供图片、背景图片以及图像。你可以下载试用版本或者免费版本。

AceHTML 5.0 Pro -
http://www.visicommedia.com/ - professional HTML editor. DHTML ? JavaScript libraries. Build in CSS editor, HTML, JavaScript, CSS checker, supports XHTML, XML, Perl and WML documents. HTML code optimizer, link checker. Available 30-days trial version.

http://www.visicommedia.com/
——提供专业HTML编辑器。具备CSS编辑器、HTMLJavaScriptCSS检测器,支持XHTMLXMLPerl以及WML文件,并且可以优化HTML编码、检查链接。你可以下载试用版本(30天)。

-----PILLARS OF PROPER DESIGNING-----
-----
网站设计的主要程序-----

TASKS DEFINING.
确定目标

You next step after setting up the appropriate web-design program is to set the list of tasks your site should solve. You should answer the following questions:

确定网站设计程序之后,需要考虑网站建设方案,首先应该找出以下问题的解决方法。

1. Are your website a sales letter or a content rich project? Depending on your answer you have or don’t have to pay attention to the structure and flexibility of navigational menu, as it may bring new challenges, as your content-rich website will grow. Consider to reserve website space to future informational blocks like announcements, exclusive offers, visitors voting, polls, that you may like to include sometime in future. Don’t make the page layout look too tight, as you will require redesigning the whole page just to insert a small table for visitors’ voting.

1.
网站内容是否丰富,能否达到推销目的? 根据答案,决定是否需要注意导航菜单的结构以及灵活性。由于网站内容会不断增加,所以必须注意这个问题,否则会带来操作的困难。网站空间应该用来存储有价值信息,包括:公告、独家提供的信息、访问者的投票与调查等等,将来你的网站中也应该包括这些内容。网站布局不能太紧密,否则网页中不能安排访问者投票的表格。

2. What kind of integrated services you are planning to use? Whether it is going to be shopping cart, discussion board, chat or separate section totally devoted to the website newebsiteletter, it should fit overall site layout and design. Think in prospective, as it will take several hours now, but avoid several weeks of headache in the future. Make sure that the foundation of your online empire will bear all possible additional stories, without need of demolishing the whole “building” and strengthening the foundation.

2.
需要利用哪种类型的服务?购物车、讨论专区等任何板块都要符合网站布局与设计要求。尽管现在需要花费几个小时去考虑,但可以避免将来花费几周时间进行网站修改。网站构建以后,确保将来添加内容时,不需要改动网站整体框架。

3. What market sector your website belongs to in general and what product/service you are going to offer in particular? If your website is an entertainment portal, full of flash games, casino offers and reviewebsite of upcoming PC games, it is obvious that design and layout plays extremely important role as a representative of more than 50% of all information. Be sure that boring graphics in that case would cut the roots of your website growth. If, on the other hand, you are working at corporate business-to-business online sector (B2B), there is absolutely no need in complex graphics elements or flashy stars in the top-left corner. Online businesses always experience lack of time, therefore, they need quick answers of who you are, what you are and why are you, rather than waiting till your welcome 300Kb flash clip will load. The answer to efficient finding partners among businesses is textual and to the point information that is easy to access and that is, usually, represented in business white-gray-black color scheme.

3.
网站处于什么销售领域,主要产品或服务是什么?如果是娱乐、休闲网站,可以设置flash游戏等休闲内容,这时网站设计与布局相比于信息,会更加重要。如果出现糟糕的图片,会限制此类网站的发展。从另一方面来讲,如果网站致力于发展business-to-businessB2B)业务,就完全没有必要在页面左上角设置浮华的图片。网上业务持续时间很短,访问者需要快速了解网站内容,而不是慢慢等待网页的下载,而网站访问者通过文字内容,特别是信息,了解合作伙伴。

Web_site_Designing_PillarsWeb_site_Designing_PillarsWeb_site_Designing_Pillars

VISUALLY FINISHED.
视觉形象设计

Anybody can do that, although the broader imagination you have, the simpler it will be. What you need is comfortable seat, paper and a pen. Put your feet on the table, close your eyes and imagine your website.

网站设计越简单越好,你不需要发挥巨大的想象力。你只需要坐在舒服的座位上,拿起纸和笔,把脚放在桌子上,闭上眼睛想象网站的形象。

Let me only tell you one of my favorite jokes concerning technique mentioned above.

告诉你一个与上述方法有关的笑话,这是我最喜欢的。

“There was a group of foreign visitors coming to see a very prosperous and profitable company. At the end of their excursion one of the visitors asked their guide:

“一群外国游客参观一家实力强大的公司,在参观即将结束时,一个游客问导游:

You know, your company is really perfect, with the best technology I’ve ever seen, everybody is working very hard, but, tell me, who is that man in the biggest room on the top floor doing nothing but relaxing on the soft armchair with his feet crossed on the table, sipping Cola and listening to music? Oh, that man came up with the idea last year, that earned us $1.000.000, and, as far as I remember, during that time he was also sipping Cola with his feet on the table.”

你们公司确实很完美,技术很先进,员工很努力,但是顶楼最大房间中,坐在沙发上,把脚跷在桌子上,喝可乐、听音乐的人是谁?噢,去年那个人想象出一种新方法,为公司创收100万美金,据我所知,他就是在这种状态下构思出来的。

So follow this man and don't allow anybody disturb you during this work!

你可以参考这个人的做法,工作时避免被打扰。

Don't make any mistakes about it. You may be surprised, but it is the most challenging and crucial part of your website creation. The brighter efforts you put into your paper, the more beneficial result you will get. No need for degree in painting, just basic elements on paper as a background of your future website building, the rest in mind.

构思时,不能出现任何错误。你可能觉得无关紧要,但这是网站构建中最重要、最有挑战性的步骤。构思时付出的努力越多,得到的结果越好。你只需要在纸上构思网站基本元素,其它内容记住就可以。

Don’t be afraid to experiment! It’s a pleasant time spending anyway. Remember – all great works of all times are considered to be masterpieces, only because they, firstly, perfectly reflect the depth of their creators’ souls and, secondly, they are unique in their nature. There is no masterpiece based on well-known standards. They are good in, let’s say, decreasing production costs, but they are not welcomed in the art creation process, which the design surely is.

构思中,不要害怕重复,其实这个过程很愉快。记住:作品之所以伟大,首先是因为它深刻地反映了作者的思想;其次,是因为它们本质上的独特性。没有任何杰作是基于众所周知的标准建立的,尽管这样可以减少网站建设成本,但创作过程却是枯燥的,设计效果也不会很好。

On the other hand, you should always keep in mind that the experiment ends exactly when the web-surfer disappointment starts.

另一方面,永远记住:实验的结束意味着访问者失望的开始。

ELEMENTS.
设计元素

The key point, while visualizing your full color website, is to decide what and where will you place 3 basic elements:

构思网站时,很重要的一点是:确定3项基本元素的内容与位置。

1. Header
(标题).
2. Navigational menu
(导航菜单).
3. Space for main text
(主要文字内容).

The following list represents possible website elements that you consider to have as a result of previously conducted “Task Defining”. Designer should also reserve a proper place and harmonically blend them with the rest of website elements:

根据确定的目标,考虑是否出现以下内容。网站设计者需要为可能出现的内容,预留一定空间,并且考虑与其它元素正确搭配的方法。

1. Banner ads
(横幅广告);
2. Menu mirror at the bottom
(网页底部重复出现的菜单);
3. Additional text for newebsite column, announcements, testimonials etc.
(网站专栏、公告、推荐书等内容的补充说明);
4. Email forms, visitor polls, questionnaire etc.
(电子邮件、访问者投票、调查问卷);
5. Any other items you consider to include
(你认为应该包含的其它内容).

It must be stressed that all the main elements of the website as well as any other website items, which should be added at your sole discretion ought to be put in mind while visualizing, and therefore written down on paper to be sure there is no forgotten element left behind. If it occurs at the next stage you will have to start from the very beginning as there is no way to move further. So don't quadruple your work with your own hands. Make sure you have put every “present” into the box you want to receive on Christmas. ;0)

需要强调一点:设计网站时,必须综合考虑网站基本内容以及其它可能出现的内容,避免遗漏任何元素,如果出现遗漏情况,你需要重新开始,因为设计不能继续。确保网站中包括所有内容,否则会出现很多麻烦,工作任务会加重。

WEBSITE STRUCTURE AND LAYOUT
网站结构与布局

Draw the scheme of your website structure. How you are planning to arrange, link and create logically relations between sections or stand alone web-pages. It is easy to navigate four-page sales letter website, but everything changes when we are exploring 100 spontaneously linked website. It is easier to get out of Sahara desert rather than to find what you need.

描绘网站基本结构。你需要安排具体内容、设计链接、创建网页各部分内容以及网页之间的联系。网站如果只有四张网页,操作可能会很简单,但如果包含100张网页呢? 网站必须方便访问者找到所需内容。

Your navigational structure could be linear or functional. There are unlimited number of variations, just pay close attention and follow one simple rule: “The more difficult for you to write a website structure, the more difficult it will be for potential user to navigate it!”

网站导航结构必须呈直线性,不管怎么变化,记住一个简单规则:网站结构越复杂,用户操作越困难。

It doesn’t depend on number of web pages rather then logical sequence and connection of different parts or sections of your site.

网站结构是指网站各部分内容之间的连接与逻辑顺序,而不是指网页数量。

COLORS
颜色

I’ve also read numerous times, that Headlines is what the visitor sees first, when comes to your site. Wrong! The first thing a surfer sees on the website, while it loads, is the color and, sometimes, design appearance. Don’t underestimate the importance of color influence. With the help of color play you can easily create a feeling of excitement or grief even before s/he will see the first letter of your Headline.

我曾经多次阅读到这样的内容:访问者浏览网站时,首先注意到标题。错误!访问者首先注意网站颜色,有时还可能是外观。不要低估网站颜色的重要性,其实在访问者注意到标题以前,网站颜色已经创造出一种兴奋或忧伤的意境,已经影响到访问者的情绪。

One note should be also mentioned: try, if possible, to avoid main colors – green, red, yellow, blue. They are very Day-Glo and very annoying while using them in the company Logo sometimes considered to be enticing.

还要注意一点:尽量避免运用主要颜色——绿色、红色、黄色、蓝色。在公司logo中运用这些颜色时,会很耀眼,会令用户厌烦,有时被认为有诱惑性。

Don’t use “aggressive” color scheme, make it to be "polite" to your customer's perception. By doing so, you don't, at least, make your visitor be irritated. Just experiment with hues and brightness and you will get the color you need. Follow this rule if you are not intend to sell clown noses in the circus tent. :0)

避免运用刺眼的颜色方案,这样网站用户会感觉受到尊重,至少不会气愤。不断进行颜色测试,你会找到需要的颜色。根据这种方法进行设计,网站外观会更理想。

Text color is also ought to match the background color. Please, avoid red text on green color, dark blue on black etc.

文本颜色应与背景颜色相配,避免出现:绿色背景、红色文本,黑色背景、深蓝色文本等。





评论 (2) 1 All

登陆 | 还没注册?