网站设计
产生网站的过程
网站设计,要能充分吸引访问者的注意力,让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式,以及结合自己的认识通过艺术的手法表现出来;而网页制作通常就是将网页设计师所设计出来的设计稿,按照W3C规范用html标准通用标记语言下的一个应用)将其制作成网页格式。
网站介绍
简单来说,网站设计的目的就是产生网站。简单的信息如文字,图片(GIFs, JPEGs,PNGs)和表格,都可以通过使超言、可扩展超文本标记语言等标示语言放置到网站页面上。而更复杂的信息如矢量图形、动画、视频、声频等多媒体档案则需要插件程序来运行,同样地它们亦需要标示语言移植在网站内。网页设计是设计过程的前端(客户端)的设计通常用于描述一个网站,包括写标记,但是这是一个灰色地带,因为这还覆盖了网络的发展。网页设计师预计将有意识的可用性,如果他们的作用,需要创建标记,那么它们也有望成为最新的网页易读性指引。网站设计(Web Design),网站设计是一个把软件需求转换成用软件网站表示的过程,就是指在因特网上,根据一定的规则,使用Dreamweaverphotoshop等工具制作的用于展示特定内容的相关网页的集合。简单地说,网站是一种通讯工具,就像布告栏一样,人们可以通过网站来发布自己想要公开的资讯(信息),或者利用网站来提供相关的网络服务(网络服务)。人们可以通过网页浏览器来访问网站,获取自己需要的资讯(信息)或者享受网络服务。网站它是由域名(俗称网址),网站源程序网站空间三部分构成。其中域名它是类似于互联网上的门牌号码,是用于识别和定位互联网上计算机的层次结构式字符标识,与该计算机的互联网协议IP)地址相对应。而网站设计是设计师通过像FrontpageDreamweaver等工具来对网站进行编辑的!
设计原则
自适应网页设计 也称为 响应性的Web设计 -设计网页,提供一个很好的感知上的各种设备连接到互联网。
自适应网络设计的目的是为不同设备的多功能网站。网站是为了更方便地查看不同的分辨率和格式的设备,技术,自适应网页设计没有为特定类型的设备创建一个单独的版本的网站。一个网站可能无法在您的手机,平板电脑笔记本电脑和电视上网,要满足全范围的设备最佳显示。
设计版权
可选择融合和集成各种数字版权技术和权威时间戳公证处公证邮箱等可信第三方群支撑的支持的大众版权认证保护平台进行网站设计版权自主存证和首次发布智能认证,取得作品归属权初步证明,需要时,通过司法鉴定,增强证据的法律效率是核心保障
建站过程
准备内容
域名注册查询网址之前就应该先搜集至少「一百页」的内容,这些内容必须是有价值的、不违反著作权的内容。
网址
想个比较有意义,好记的网址。
网页设计制作
对搜索引擎来说,他们无法检索到网站里的flash、java applet和javascript,也无法检索到你图档里写的字,所以在网站设计上,只要尽量简洁有力,让内容可以好好的呈现,就是一个成功的seo网站页面。页要尽量符合w3c的标准。
每页档案大小
建议每个网页尽量在15k以下,如果可以缩减到12k,甚至10k那就更好,但是不能在5k以下,以免影响内容的完整。其实我们都知道,搜索引擎最佳化的目的,实际上是为了使用者,而不是为了搜索引擎本身。
内容
每天建立一个500~1000字的网页,当然这个网页里面必须包含你重要的关键字,如果想不出关键字来的话,可以使用Yahoo的关键字建议工具
关键字密度
拿出你的关键字,在下列六个地方各使用一次:
* 标题;
* meta标签;
*网址;
* 粗体关键字 (就是写出你的关键字,然后把他加粗);
* 斜体关键字 (就是写出你的关键字,然后把他斜体);
* 页面上半部 (网页内容比较前面的地方,我是建议用个标题,像是h1)。
内部链接
内部链接就是在同一网站域名下的内容页面之间的互相链接(自己网站的内容链接到自己网站的内部页面,也称之为站内链接)。合理的网站内链接构造,能提高搜索引擎的收录与网站权重。你的网站里面可能有很多类的内容,请确定同类内容互相链接,而不同类内容千万不要互相链接。例如讲食品的页面请链接到讲水果的页面这样。
为什么要这样作呢?同类内容的内部链接可以让google的pagerank在你的网页里互相传递,如果你只对个别网页作最佳化,有可能会发生的情况是,网站里只有少数几个页面的排名可以往前,但是若是做好内部链接的话,可以让每个网页的排名都往前。
你想要五十个网页每天都可以带来一位访客,还是只有一个网页,每天带来五十位访客呢?前者还有机会可以努力,后者要再增加应该有其限度才对。
网站上线
最好不要用虚拟主机,若是能有自己的代管主机或者是固定ip位置就最好了。若是租用虚拟主机厂商的虚拟主机方案,你可能遇到的就是一台主机里面放上万个网站,尽管Yahoo和Google宣称,他们对待虚拟主机一视同仁,但是我还是担心要他们开始把同一主机ip数量加入排名公式的那天…
确认网站的每一页都可以被搜索引擎索引进去,网站里的链接要做好。另外呢,在网站还称不上是个「好网站」的时候,不要让网站上线,若是随便让你的烂网站进入搜索引擎,并且被打了低分之后,我想,要让分数上升似乎就不是那麼容易了。
接著,把自己加入到odp(open directory project),这是一个大家可以手动加入的目录索引,这样至少你的网站已经在一个索引里面了,接著,若是有钱的话,可以使用搜索引擎快速付费登录,这可以让你的网站在一定的时间内排名增加到前几名,若是没钱的话也没关系,慢慢等还是会被登录进去的。
送交搜索引擎
把你的网站登录好后,接著,就放著不管了。别忘了,这篇文章的目的是建立成功的网站,过程是一年,所以把网站送交登录之后,请耐心等待六个月。(最惨的情况下啦,不过一般来说,新网站最迟三~五个星期就会进入索引里面了)
网站推广
网站推广毋庸置疑任何一个想盈利的网站都无法回避付费推广服务,推广方面最主要的就是竞价排名。网站推广在建站之后是最重要的一步!
纪录与追踪
申请一个不错的网页计数器
程序设计
网站设计包括前台用户视觉体验的设计和后台程序功能设计,两个方面都是非常重要的;视觉设计对于客户的阅读带来愉悦和信任,后台注重操作的方便行。
要点
重点项目主要指域名选择、搜索引擎推广网络广告。选择一个好的域名可对网站运营起到事半功倍的作用。如果要进行搜索引擎优化,一方面涉及到费用,而最重要的,还是优化的质量。实际上,搜索引擎优化通常只是一些个人行为而非公司行为,因为“搜索引擎优化”并不是一个成熟的服务产品,而且效果常常与主观努力大相径庭。因此要找一个优化高手并非易事。
定制化网站
在高速发展的数字化信息时代,网站在企业的品牌建设信息发布商务活动中占据着重要的地位,受众也越来越多的通过网络渠道与企业进行信息沟通。企业借助定制化的网站建设,可以塑造个性化网络品牌形象,并通过数字平台上与受众形成个性化的互动,使受众对企业专属数字品牌形成直观的认知和体验,实现企业线上线下品牌统一建设的目的。
建设步骤
易被忽视环节
一、网站的定位策略
网站定位策略又称网站策划,网站策划直接决定网站能否成功。缺乏整体策划的网站建设很难达到预期的目标。网站策划的好与坏是区分网站建设公司水准及专业化程度的重要因素。一个专业的站流程中,网站策划是重要且不可忽视的环节。一个高质量的网站策划方案,除了需要建站公司专业化的知识和丰富的经验,还需要客户的积极配合。建站公司与客户互动,一起为网站制定目标,有效沟通,将这个目标贯穿于每个参与人员的思想,融入每个人员的劳动中。只有这样,才能保证网站建设、实施以及运营的成功 。网站策划的具体范围包含以下几个方面:
客户特征
客户习惯
客户喜好
► 02网站的风格定位
网站的风格定位是网站建设的第一步,是网站走向成功的起点。其重要性应得到足够的重视。影响网站风格定位的主要因素有,公司企业文化行业特征、产品定位、客户定位等。在综合考虑了这些因素之后,网站设计师分析师以及策划师联合对网站进行风格定位。网站风格主要包括:
站点的CI(标志,色彩,字体,标语)
版面布局
浏览方式
交互性
网页表现形式
风格定位的准确性是网站成功与否的关键所在
► 03网站的栏目设置
网站的栏目是构成网站最重要的部分,可以说是网站的骨架,是承载网站内容的基础。好的栏目设置,可以帮助用户更好的了解和使用网站,提高用户的停留时间,从而增加企业的商业机会。合理的栏目设置,可以更好的展示企业的文化、核心价值产品信息、解决方案等客户最关心的问题。
► 04网站的内容规划
互联网时代,内容为王是不变的真理。如果说栏目是网站的骨架,那内容就是网站的血肉,是网站真正的核心。网页漂亮美观固然重要,可是真正能吸引和留住客户的是内容。所以,对内容的组织和提炼就变成了网站建设过程中最关键的一个环节。网站独创的有价值的内容不但可以提高访问用户的黏贴度,更能有效的提高网站在搜索引擎中的排名,从而吸引更多的用户。对产品合理的分类和描述,对您公司产品的销售起到无法估量的作用。网站内容更新频率同样是衡量一个网站水平的重要指标。
► 05网站的技术解决方案
技术解决方案是网站最终能够被用户使用的根本,不同的企业,对网站有不同的功能需求。技术解决方案主要包括网站的软件环境硬件环境,包括:
网站开发语言(ASP、JSP、PHP等)
数据库类型(Oracle、SQL Server、MySql、Access等)
服务器类型虚拟主机、虚拟专机、主机托管等)
网站安全性方案(防黑、防病毒等)
技术方案没有绝对的好坏,最适合企业的就是最好的。
► 06网页的文件名分析
网页的文件名是一个容易被网站设计者忽视的问题,可是,它的重要性却是很高的,应给予足够的重视。好的网页文件名命名不但利于网页的后期维护,更加有利于被搜索引擎搜索。通过对网页文件名的分析提高网站的可维护性和利于搜索引擎搜索,网页文件名命名包括所在目录名称、使用中文还是英文、或者使用汉语拼音的缩写形式。
► 07网站域名分析
随着网络的发展,企业网站数量在爆炸性的增加,域名对于一个网站的重要性正在变得越来越重要,一个容易记忆的域名会使更多的人记住您的网站,从而形成重复访问,域名的分析包括长度、字符之间是否有“-”、是否易于记忆、国内域名还是国际域名
► 08网站结构分析
通过网站结构分析,古奥思成网站建设帮您设计高效、快捷的网站结构,提高网站的易操作性,让客户在最短的时间内找到想要的内容,改善客户的操作体验。
► 09网站外部链接分析
网站的向外链接,以及其他网站的连入,是提高网站活力的的好办法,与何种网站互链,是网站外部链接分析的关键所在。
► 10网站内容分析
网站的内容是网站最重要的部分,是网站的灵魂。没有内容的网站再漂亮也不会长久的吸引用户。网站内容对用户越有价值,就越能吸引更多的用户。
► 11网站更新频率分析
对网站的内容更新频率进行分析,帮助企业寻找最适合的更新频率,更新越快的网站,用户黏贴度越高,网站价值发挥越大。
► 12网页的动态和静态分析
静态网页显示速度比动态网页要快很多,并且静态网页比动态网页更容易被搜索引擎检索,也就更容易获得较高的排名。把动态内容静态化,从而提高网站的访问速度,以及利于搜索引擎搜索。对于必须要用动态网页实现的功能,对动态页面进行优化,提高访问速度以及更容易的被搜索引擎搜索。
► 13三大标题标签分析
网页标题(Title)、描述(Description)、关键字(Keywords)标签是搜索引擎对网页进行检索的关键要素,标签太少,浪费了资源,标签太长又容易被搜索引擎看成是作弊,合理安排标签内容,更好的组织和利用Title、Description、Keywords标签,会使企业网站在同行业的竞争中处于领先地位。
► 14网站技术方案分析
技术实现是整个网站建设的根基,是网站能够被客户使用的基础,所以,技术方案关系到网站的成败。网站建设中可以用到的技术手段是多种多样的。技术方案没有最好的,只有最合适的。根据企业的实际情况,确定企业网站的技术方案,为客户找到性价比最高的解决方案。
二、IA信息架构设计
1、IA架构的原则从网站建设角度提出信息构建应遵循:”以用户为中心”、省力原则、Web可用性原则和经济原则
其核心内容包括由浅入深的两个层面,一是“使信息可访问”,二是“使信息可理解”。还有学者将信息构建的要素分为显性和隐性两类,认为IA的显性要素是组织、导航、标识和检索4大系统,隐性要素就是用户体验和可用性。基于用户体验和可用性的IA流程是目标规划用户分析、设计建模、原型测试四个阶段。
2、IA架构在网站设计中的应用
国外和我国台湾地区对网站IA的实践进行了探讨,认为“交互化”、“可视化”、“以用户为中心”、“使信息清晰易查”是其主要特点。他们提出了网站IA的方法和设计步骤。认为从内容来看,网站IA的方法包括:搜索记录、站点统计、元数据受控词表;从用户角度来看,包括:确定用户类型、需求分析、可用性测试人种学技术、IA测试;从应用环境角度来看,包括:明确目标、确定标准、理解组织政策、技术与人力资源。关于IA的设计步骤,他们认为应包括:①调研。②概念设计。③用户测试。④重复设计。⑤修改反馈。
制作流程
以下是网站设计公司服务流程及图示,并对所需注意的有 关事项提供专业和详细的讲解。
1、需求-客户需求沟通分析
2、签约-签署相关合同协议、客户支付预付款
3、实施-网站页面设计、制作、程序开发;
4、验收-网站测试及验收;
5、维护-网站后期维护工作。
动态网站
网络技术日新月异,细心的网友会发现许多网页文件扩展名不再只是“.htm”,还有“.php”、“.asp”等,这些都是采用动态网页技术制作出来的。
早期的动态网页主要采用CGI技术,CGI即Common Gateway Interface(公用网关接口)。您可以使用不同的程序编写适合的CGI程序,如Visual Basic、Delphi或C/C++等。虽然CGI技术已经发展成熟而且功能强大,但由于编程困难、效率低下、修改复杂,所以有逐渐被新技术取代的趋势。
技术
PHP
PHP 即Hypertext Preprocessor(超文本预处理器),它是当今Internet上最为火热的脚本语言,其语法借鉴了C、Java、PERL等语言,但只需要很少的编程知识你就能使用PHP建立一个真正交互的Web站点。
它与HTML语言具有非常好的兼容性,使用者可以直接在脚本代码中加入HTML标签,或者在HTML标签中加入脚本代码从而更好地实现页面控制。PHP提供了标准的数据库接口,数据库连接方便,兼容性强;扩展性强;可以进行面向对象编程
ASP
ASP 即Active Server Pages,它是微软开发的一种类似HTML(超文本标识语言)、Script(脚本)与CGI(公用网关接口)的结合体,它没有提供自己专门的编程语言,而是允许用户使用许多已有的脚本语言编写ASP的应用程序。ASP的程序编制比HTML更方便且更有灵活性。它是在Web服务器端运行,运行后再将运行结果以HTML格式传送至客户端的浏览器。ASP程序语言最大的不足就是安全性不够好。
ASP的最大好处是可以包含HTML标签,也可以直接存取数据库及使用无限扩充的ActiveX控件,因此在程序编制上要比HTML方便而且更富有灵活性。通过使用ASP的组件和对象技术,用户可以直接使用ActiveX控件,调用对象方法和属性,以简单的方式实现强大的交互功能。
但ASP技术也非完美无缺,由于它基本上是局限于微软的操作系统平台之上,主要工作环境是微软的IIS应用程序结构,又因ActiveX对象具有平台特性,所以ASP技术不能很容易地实现在跨平台Web服务器上工作。
JSP
JSP 即Java Server Pages,它是由Sun Microsystem公司于1999年6月推出的新技术,是基于Java Servlet以及整个Java体系的Web开发技术。
JSP和ASP在技术方面有许多相似之处,不过两者来源于不同的技术规范组织,以至 ASP一般只应用于Windows NT/2000平台,而JSP则可以在85%以上的服务器上运行,而且基于JSP技术的应用程序比基于ASP的应用程序易于维护和管理,所以被许多人认为是未来最有发展前途的动态网站技术。
.NET是ASP的升级版,也是由微软开发,但是和ASP却有天壤之别。NET的版本有1.1、2.0、3.0、3.5、4.0。是网站动态编程语言里最好用的语言,不过易学难精。NET2.0开始,NET把前台代码和后台程序分为两个文件管理,使得NET表现和逻辑相分离。NET网站开发跟软件开发差不多。NET的网站是编译执行的,效率比ASP高很多。NET在功能性、安全性和面向对象方面都做的非常优秀,是非常不错的网站编程语言。
ASP、.NET、JSP和PHP的优点和缺点
ASP
优点:
总结
虽然以上四种新技术在制作动态网页上各有特色,但仍在发展中,不够普及。对于广大个人主页的爱好者、制作者来说,建议尽量少用难度大的CGI技术。如果您对微软的产品情有独钟,采用ASP技术会让您得心应手;如果是Linux的追求者,运用PHP技术是最明智的选择。当然,不要忽略了JSP和NET技术。
个性网站
在我们的日常生活中个性化交流一直存在,网上个性化服务的概念也已经为大多数人所接受,例如个性化网页和个性化电子邮件,但是,事实证明,从网络营销的角度设计一个个性化网站并不象一般营销人员想象的那么简单,有时甚至可以说具有挑战性。首先要研究顾客动机,在此基础之上考虑个性化服务战略会更加容易。个性化网站设计面临的两个挑战是:应该在网站那些方面实现个性化;顾客是如何收集信息并做出购买决策的?
挑战之一:将一个静态网站转化为个性化网站,可以个性化的方面可能很多,但如何决定哪些方面实际上具有个性化的价值。在计划过程的开始,建立明确的目标非常重要,这样才能指导你在众多个性化因素中做出选择。
在栏目编排注意
●尽可能删除那些与主题无关的栏目;
●尽可能将网站内最有价值的内容列在栏目上;
●尽可能从访问者角度来编排栏目以方便访问者的浏览和查询;辅助内容,如站点简介、版权信息、个人信息等大可不必放在主栏目里,以免冲淡主题。
另外,板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些,每个板块都有自己的栏目。举个例子:ENET硅谷动力的站点分新闻、产品、游戏、学院等板块,每个板块下面又各有自己的主栏目。一般来说,个人站点内容较少,只要分个栏目也就够了,不需要设置板块。如果有必要设置板块的,应该注意:
●各板块要有相对独立性;
●各板块要有相互关联;
●各板块的内容要围绕站点主题。
基本原则
设计网站中有哪些关键技巧?有哪些陷阱?在这里,世界上一流的网站设计专家,让你共享他们的秘密,告诉你:使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。
明确内容
如果你想成为一个网站设计者,并正想建一个网站的话,首先应该考虑网站的内容,包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。
抓住用户
如果用户不能够迅速地进入你的网站,或操作不便捷,网站设计就是失败的。不要让用户失望而转向你的对手的网站。
内容是核心。大约在两年以前,企业网站就像一本广告册子,更槽糕的是,网站使用了大量的图片,似乎要几个世纪才能下载完。
网站在设计的某些方面是成功的,但是内容太贪乏,并且要花很长时间才能找到所要的东西,因此不能算是一个成功的网站。
没有什么比要花很长时间下载页面更槽糕的了。作为一条经验,一个标准的网页应不大于60K,通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。
网站升级
时刻注意网站的运行状况。性能很好的主机随着访问人数的增加,可能会运行缓慢。但是,如果你不想失去访问者的话,一定要仔细计划好你的升级计划。
即使你不懂HTML标准通用标记语言下的一个应用),你只需购买一个有版权的所见即所得的网页设计工具,如Adobe PageMill 或 Microsoft FrontPage Express,就可以创建一个看起来很合理的网站。但是,在设计时,这些软件包虽然不需要HTML,却使网站速度下降。
为了成功地设计网站,你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案,用Notepad制作网页。
学习HTML
用HTML设计网站,可以控制设计的整个过程。但是,如果你仅仅是网站设计的新手,你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中,HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式,以便你在把网站发送到Web之前,预览你的网站。
用笔画一个网站的框架
圣人云:笔比剑更强大。在用计算机之前,用笔画一个网站的框架,显示出所有网页的相互关系。计划好你的用户如何以最少的时间浏览你的网站。
在计算机上永远也找不到好的方案
许多设计者把他们的网站地图放在网站上,这种做法,却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息,他们对于你的网站是如何工作的,并没有兴趣。如果你觉得你的网站需要地图,那很可能是需要改进你的导航和工具条
“睁大你的眼睛,留意所有的事情。对最不相关的东西的观察可以得到最好的灵感。观察一个站点的结构和设计。理解站点结构的关键元素,确保你的设计是围绕站点浏览进行的。” ——专家忠告
点击规则
听说过3次点击规则吗?对于小型网站,在你的主页上,没有任何一条信息,需要点击次数超过3次的。对于大型网站,使用导航和工具条来改善操作。
特殊字体的应用
虽然你可以在你的HTML中使用特殊的字体,但是,你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面,在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性,这虽然允许你使用特殊的字体,但是仍需要一些变通的方法,以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题,但是只有最新版的浏览器才支持CSS。
使用切合实际的简便的命名规则
检查错别字
好的拼写是人们一生中重要的技能。但是遗憾的是,许多设计者都缺少这种技能。确保你拼写正确,并且格外注意平常容易误写的错别字。
避免长文本页面
在一个站点上有许多只有文本的页面,是令人乏味的,且也浪费Web的潜力。如果你有大量的基于文本的文档,应当以Adobe Acrobat格式的文件形式来放置,以便你的访问者能离线阅读。
不要使用卷滚条
人们厌恶在网上使用卷滚条。Trouble网站是一个典型的设计很差的网站。它基于一个浮动的架构,为了阅读所有的文本,浏览者不得不使用卷滚条。
网络营销角度下的网站设计
企业网站设计从某种角度来说也是企业形象的重要表现方式。很多企业网站的首页千篇一律为一段让人眼花缭乱的Flash动画,或一张图片,当然也不乏有部分设计的很有创意的动画或图片。如果把这种方式理解为企业网站形象设计,那么就太剑走偏锋了。
既然是网站,那么网站的设计就离不开网站的基本元素:如导航、结构、按钮等等,所以企业网站设计不能离开“网站”这个主体特性来为设计而设计,忽略网络的本质。
企业建网站的目的是什么?我想应该是传播信息。传播企业供需信息、企业整体状况、品牌信息等等,而不是单纯的秀一把。
Flash动画虽然漂亮,但对搜索引擎的友好度是比较差的,同时体积相对也比较大,会影响访问速度,所以Flash动画不妨作为小装饰使用,效果会更佳。一个优秀的网站应该是有着良好的导航功能并易于访问的,而不是捉迷藏式的“超级创意”。网站设计在追求美观的同时,不能以牺牲正常和便捷的浏览为代价,同时更要考虑对搜索引擎的友好性。
所以网站设计应该把握以下几个原则:
1、具有较强的可识别性,充分体现企业的基本元素:如标志、标准字体、标准色等;
2、页面设计以简洁大方为宜,充分考虑访问速度;
3、要有良好的导航,符合绝大多数网民的访问习惯;
4、要考虑与搜索引擎的友好性,注意网站的结构和层次。
网站设计7CS
(Human-Computer Interface;HCI)在电脑资讯科技域中,是指电脑有关之硬体及软体,其本身为提供使用者与电脑之间沟通与互动的通道或桥梁.也因为人机之间的往沟通非常强调以与使用者需求为主,也就是强调使用者导向(User-Oriented)与使用者中心(User-Centered),所以人机介面又称为使用者介面(User- Interface).在电子商务环境中,使用者界面是企业与他们顾客之间的系互动管道,Rayport与Jaworski在2001提出7Cs模式,其主要是用於分析电子商务的顾客界面,提出网站商店的顾客介面应著重在让顾客容操作与使其满意.因此,一个成功的网站设计,取决于其介面是否能够将顾客需求以及企业提供的服务加以整合,兹将7Cs架构的网站介面七项要素介绍如下:
1 Context(组织)
网站内容的设计与陈方式,要同时符合功能性与美观性个需求.功能性是指网站内容以有组织的方式呈现,让使用者可以方有效地浏览.而美观性则包括网页的色系及其他传递讯息的视觉题材。
2 Content(内容)
指网站上所传递的内容.包括产品与服务内容( 如各科室简介,医院地 位置等资讯),促销方案,顾客支援,及时 新的资讯,各种与产品或服务相关的资讯, 用多媒体方式提供产品或服务资讯(如:以语音或动画的方式描述产品或服务内容)。
3 Community(社群)
供网站使用者之间的互动空间,让使用者有归属感或 与感.包括线上讨版( 如疾病讨园地),会员电子信箱清单或言板等。
4 Customization(客制化)
网站提供使用者自身订做自己想阅的内容资讯之功能.每个使用者在登入后就可以享受与众同,独享的页面能让顾客有亲近的感觉。
5 Communication(沟通方式)
网站与使用者之间的沟通管道,包括以电子邮件方式告知各式资讯( 如电子报),或是让使用者可提供建议的管道( 如建言信箱)。
6 Connection( 结)
网站本身与其他外部相关网站的结.像医网站可方的结到其他的医资讯机构( 如医资讯网), 政院卫生署,中央健康保险局,医学术研究机构( 如台湾医学会)等。
7 Commerce(商务)
支援各种交之介面功能, 如线上挂号,挂号查询与取消,缴费功能等。
代码语言
能读懂普通网页的源代码,并能根据要求在文本编辑器中对原代码作适当修改。具体要求如下:
基本信息标记
HTML标记:
头部信息:
主体标记:,常用属性:background=”url”
,text=”#rrggbb”,link=”#rrggbb”, vlink=”#rrggbb” ,alink=”#rrggbb”,bgcolor=”#rrggbb”,leftmargin=n ,topmargin=n。
文字设置
标题级别 ;
对齐方式:align=对齐方式。三种方式:left , right , center 。
字体设置: ,主要属性:size=”n” ,color=”#rrggbb” ,face=”字体”。
其它标记:粗体,下划线斜体
表格设置
表格标记:
,常用属性:borderwidth,bgcolor,background,cellpaddingcellspacing。 。
表格标题:。
表头:。
单元格:。
和标记的常用属性:width,height,align,valign(取值top,middle,bottom),bgcolor,background,bordercolorcolspanrowspan
图片设置
,常用属性:width,height,align,border,hspace,vspace,alt。
背景声音设置
,常用属性:loop。
视频设置
,常用属性:width,height,align,loop。
超级链接设置
通过文字链接到另一页面:链接文字
通过图片链接到另一页面:
< a herf=”链接页面路径及文件名”>
定义锚点:锚点文字
链接锚点:链接文字
框架设置
① 纵向排列多个窗口示例
② 横向排列多个窗口示例
③ 纵横排列多个窗口示例
④ 框架常用属性
frameborder,border,framespacing,bordercolor。
⑤ 子窗口常用属性
frameborder,border,framespacing,bordercolor,scrolling,noresize,target。
CSS层叠样式表
能读懂简单的CSS样式表代码,并能根据需要,选择适当的方式(内联样式表,外部样式表)和适当的层叠样式表,插入到当前网页的HTML代码中。
JS特效使用
能读懂常见的JavaScript代码(也称为“JS特效”)(如日期显示、下拉菜单计数器、动态字幕、跟随鼠标的图片、跟随鼠标的滚动文本、标题栏里的闪烁效果等)。并能根据需要,选择适当的JavaScript代码插入到当前网页的HTML代码中。
版式配色
在这个五彩斑斓的大干世界里,色彩使世界万物充满生机,也使我们感到眼花缭乱。网站的背景、文字、图标、边框、超链接……应该采用什么样的色彩,如何进行搭配,才能最好地表达出预想的内涵,这都是我们而对的新课题。
网站是信息内容存储空间模式,页面设计得好坏直接关系到一个网站的成败,它的色彩表现更是视觉传达的重要因素。所以,了解一些网站设计的色彩知识是很重要的。在这个竞争日趋激烈的商业社会中,不懂色彩设计理论的设计师不可能成为一名合格的设计师。 色彩是大自然的外衣,网站设计者当然可以参考大自然的色彩。我们学习网站设计、色彩搭配是一般网友感到头疼的问题。色彩作为一种最普遍的审美形式,存在于我们日常生活的各个方面,例如衣、食、住、行等。网站可以采用蓝天的颜色,用平面构成的方法加以设计,以点、线、面作为设计要素,表现高科技、理性的感说,再通过黄绿色和蓝色产生对比,效果极性。
同时设置好网站的配色与版式,美术很重要,在日常生日中我们眼球所能看到的地方,都是由不同的点、线、面构成。你可以通过眼球来搜寻和判断它们的色彩。如何才能让你达到想的视觉效果。你的眼睛就是你的裁判师。看一些成功的网站案例也是一样的,要让整个网站活泼起来,生动起来,就是你需要用你的思维和眼睛来观察。 多看一些色彩感强烈的物体,让眼睛多吸收一些,才能让你正确的设置好你的网站颜色与版式。
说到版式,很多人都很头痛,往往无从下手。在做这样一个版面的时候,你不用想怎么让它空,白,亮。你只要抓住一个视觉点,然后从这个视觉进行扩散,就像一颗墨水一样。让整个网页随着这个视觉点来散开。除了这个视觉点以外的东西,只能是承托它的物体或颜色。这样你的网页版式就不会零散和空洞了。这样也就可以把色彩和版式都排成自己想要的效果,从而完成设计。
设计步骤
一、用“原型法”细化网站设计需求
二、网页链接的深度、广度和耦合程度
三、网页基本布局
四、网页空间中的视觉导向
五、网页空间的秩序及运动趋势
六、网页中的留白
七、文字信息的设计和编排
八、图片和动画
九、网页空间中的运动趋势线
十、使用Web标准设计网页
设计要点
确定网站风格
网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。
风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。举个例子:我们觉得网易是平易近人的,迪斯尼是生动活泼的,IBM是专业严肃的。这些都是网站给人们留下的不同感受。
网站色彩搭配
无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或美丽的图片,而是网页的色彩。
关于色彩的原理有许多,在此我们不可能一一阐述,大家可以看看相关设计书籍,有利于系统地理解。在此我们仅仅想告诉大家一些网页配色时的小技巧。
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感
2.用两种色彩。先选定一种色彩,然后选择它的对比色
3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,蓝。
网页配色误区
1.不要将所有颜色都用到,尽量控制在三至五种色彩以内;
2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容;
3.色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。
如果大家对于上述理论部分还不能充分理解,我就结合一种实战经验-叠柔配色技巧,用图文并茂的展现形式逐步分析讲解,促进最快速有效的学习。
设计软件
Dreamweaver(网页设计软件)
Flash(flash动画制作软件)
HTML编辑器
虽然HTML代码复杂,编辑和调试要花费大量的时间,但因HTML的稳定性、广泛支持性及可创建复杂的页面效果,仍受高级网页制作人员的青睐。现有众多的编辑器供选择,这些编辑器广泛支持复杂页面创建及高级HTML规范,使用较为普遍的有Macromedia Dreamweaver 8等专业HTML编辑器。
设计方向
单页面
单个长页面的设计一度不受人待见(无论是客户还是设计师),但如今整个互联网随处可见。一个合理的解释是,用户如今早已习惯于使用鼠标滚轮了,比起在多个页面间来回查看,用滚轮上下浏览要省事得多。包括苹果在内的一些知名大公司也使用了相当长的页面来展示产品,获得了很不错的效果。
用照片做背景
出于品牌或展示的目的,把照片用作网站的背景,这样可以形成强烈的视觉表达效果。这也是为何你能在时尚、服装品牌、旅游业等等行业看到这样的设计办法。
色块设计
这一设计方法主要是引入了方块的网格设计,这些方块要么是纯色块配上文字,要么是方形照片配上文字。“简洁”是吸引用户的一大原因。不同的色块放在一起形成强烈的对比,容易引起用户的视觉兴趣,进而继续探索下去。
超大号的图片
这一潮流的兴起多少与Mac OS X图标设计的流行有关。当程序员为自己的Mac 程序推出网站时,这样配有超大号图片、突出品牌的设计再常见不过。自然地,这一潮流后来也被iOS 开发者继承了下来,成为现代设计文化的一部分。
聚焦简洁
对简洁的追求贯穿了整个2012年,许多的网站开始寻求明快、直观的设计。极简设计旨在通过整合或是删除多余的页面实现简化,只给用户需要的东西。极简设计通常会用到大号的加粗字体、以及超大号的图片,清晰地把重要的东西传达出来。
响应式设计
随着手机和平板设备越来越多地进入人们的生活,响应式设计也成为了当下网站开发不可忽视的一股力量。一个可自适应任何设备的网页是很了不起的。响应式设计能确保用户无论是在移动设备还是在PC上都能按你的意愿浏览内容。
视差滚动
所谓“视差滚动(Parallax Scrolling)”就是让多层背景以不同的速度移动,形成运动视差 3D 效果。随着越来越多的浏览器增加对视差的支持,这一技术也很有可能会更加流行。
强调字体
从前设计师所能使用的字体受用户电脑本地已有的字体所限。如今借助Google fonts 和Typekit 等服务,从理论上说,能使用的字体是无限多的,极大增强了网站设计的吸引力。设计师利用这一机会也已有了一段时间了,越来越多的网站也体现了对字体的重视。甚至有些网站如Typographica,字体就占了整个网站设计的绝大部分,出来的效果也相当不错。
设计目的
排名转化为流量
以往在制作网站的时候做都是非常重视排名,但随着网络的发展,但是光有排名是远远不够的,一个网站具有大量的流量能够提高网站的权重,因网站制作来说一切排名都是浮云,唯有流量才是王道。
流量转化为质量
有流量不一定有销量,原因何在?有流量没有质量,流量能否转换为销量,根源在于网站制作本身。以往由于网站优化的方式方法失误,长时间的努力带来了很多无关核心关键词的词语排名靠前,但是这些词语与目标关键词相关性并不大,虽然有相当流量,但是质量度却不高,也自然谈不上什么销量了。还有一种情况是,网站域名DNS、网站主机及网站程序开发问题,导致用户尚未完全打开网站,已经心生浮躁而放弃继续浏览。而潜在流量及销量,就在无声无息的漫长等待中消逝。知道问题症结所在,就好对症下药采取正确的方法传换成有质量的流量。首先是选准关键词,即使不能是核心词,也应该是围绕着核心词的延展词,或者一些与之相关的长尾词。其次,认真把握网站制作的每一个细节,让网站能够得以安全无虞的运行。要知道加载速度快的网站,自然会吸引用户进一步去浏览。
质量转化为销量
一个企业进行网站制作唯一目的是带来订单,推广自己的产品,现实生活中很多网站流量转换率不高,使得用户打开网站浏览几秒钟就放弃,不再深入浏览,更不用说主动咨询了。正确的方法是应该从网站设计的美观、内容的翔实、在线沟通工具的运用,只有这样,才能为一个网站带来大量的人气,从而提高网站大的流量,进而实现企业的营销。
注意事项
常犯错误
1、导航菜单使用图片、flash
导航菜单使用图片、flash当然比纯文本来得好看一些,但是搜索引擎并不认识你的图片和flash。如果你非要使用漂亮的图片来做导航的话,可以使用背景替换的方法。建议做一个导航菜单链接的xml文提交到搜索引擎。
2、不恰当地使用图片
为了网页美观,经常会到处贴满图片,这样做是不正确的,与内容无关的图片能少就少吧。我们可以把这些图片做成容器的背景。
3、内容里特殊字体的运用
楷体很漂亮,草书也不逊色于宋体。但是不是所有人的电脑都安装有这些字体。如果使用这些特殊字体的话,在别人的电脑里看到的网页将会是不堪入目。
4、新窗口打开
设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用户的机器所带来的负面效应,这种策略恰恰弄巧成拙,因为当用户想通过“后退”按钮返回先前的站点时,已经做不到了。用户通常注意不到新窗口已经被打开,尤其当他们的显示器很小,而窗口又正好是最大化时。因此,当用户想要返回原来的站点时,面对的却只是一个不可用的灰色 “后退”按钮。
5、无实际意义的特效
避免使用炫耀的技巧。这些特效对你的网页没有任何实际意义。
6、内容滚动
内容滚动可以在比较小的空间里展示比较多的内容。这是它的一个好处。但内容滚动却是弊大于利的。不是所有平台和浏览器都支持滚动的;在w3c看来,内容滚动会降低用户体验。
7、用户难以获取自己想要的内容
如果一个用户访问你的网站跟走入迷宫一样,会有什么后果?听说过3次点击规则吗?对于小型网站,在你的主页上,没有任何一条信息,需要点击次数超过3次的。对于大型网站,使用导航和工具条来改善操作。
8、文件名命名不规范
不要忽视这一点,例如新闻页面可以用:news.html,而不是类似2323123.html这样的无规范的命名方式。使用规范的命名方式不仅有利于搜索引擎,而且有利于网站日后的维护管理。
9、长篇文章未设置分页
长篇文章不分页,会导致网页加载速度慢,用户阅读疲劳。所以建议长篇文章设置分页。
10、颜色搭配错误,网页难于阅读
如无必要,你应当坚持使用白色的背景和黑色的文本,另外还应当坚持使用通用字体。
11、没有返回指向
“返回指向”是网络用户的生命线,同时也是继超文本连接后最常使用的导航特征。用户可以随意尝试网页所指向的任何地方,而只需点击一两次“返回”按钮就可以回到先前的页面。
12、显眼的点击计数器
不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务,而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义,它们很容易被做假,浏览者也不想看广告。如果你显示你的网站是多么受欢迎,你最好提供一个链接,显示访问日志。
13、使用框架
与记数器一样,框架在网页上越来越流行。在大多数网站上,在屏幕的左边有一个框架。但是设计者立刻就发现,在使用框架时产生了许多的问题。使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的是,搜索引擎常常被框架混淆,从而不能列出你的网站。
14、不恰当地使用声音
声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地。因为过多地使用声音会使下载速度很慢,同时并没有带给浏览者多少好处。首次听到鼠标发出声音可能会很有趣,但是多次以后肯定会很烦人。使用声音前,应该仔细考虑声音将会给你带来什么。
15、兼容性不佳
你的网页在1024下看得顺眼么?那么换成1280看呢?不是所有人的显示器都用同一种分辨率的。无论是谁,都无法做出所有分辨率下完美的网页,但我们要做出能确保所有分辨率下不出错的网页。还有两点就是:不要以为只有电脑才能看网页。不要以为世界上只有一种浏览器!
17、急于发布网站
网站没有内容、网站程序bug,这些问题解决再发布吧。内容较为充实、程序bug基本没有的网站才会让用户流连。
18、发布网站后未登录搜索引擎
有客户问,是不是我的网站已发布就可以在百度搜到了?但是百度不是我家开的,也不是你家开的,你发布网站时百度他是不知道的。所以,你发布网站后要到各大搜索引擎的登录口提交一下你的网站信息。
19、不留空白
注意留空白。不要用图像、文本和不必要的动画gifs来充斥网页,即使有足够的空间,在设计时也应该避免使用。
20、缺乏互动性
让用户与网站能够互动,让用户与用户之间能够互动。所以最少要有一个留言本,这能激励访问者再次回到你的网站,还有助于扩充网站内容。这个是极其重要的,web 2.0的核心思想。
21、存在死链
有死链的网站对对蛛蛛爬动不顺利,同时影响网站的正规性、亏损网站关键词名次、亏损网站权重值,而且会造成不良好的用户体验。
网站优化
在网站设计中,最关键的,就是如何能够让跟多的人能够看到你的网站。尤其是商业性站点,更加注重通过搜索引擎优化手段推广自己的网站。
流量,页面质量,外链,权重,关键字质量,关键字密度,百度,Google,等等因素都会影响到网站在某一个关键字上的排名情况。建议大家在操作的过程中多注意为搜索引擎收录网站做准备。
用户体验
感官体验
指呈现给用户视听上的体验,强调舒适度
1 设计风格
2 网站logo
3 页面打开速度
4 字体大小
呈现给用户操作上的体验,强调易用/可靠性。
1 会员申请
2 会员注册
3 填写表单
4 提交表单
浏览体验
呈现给用户浏览上的体验,强调吸引力。
1 导航的清新度。
2 栏目的层级
3 内容分类
4 内容的丰富度
5 内容的原创性
6 信息的更新频率
呈现给用户心理上的体验,强调友好性。
2 友好提示
3 会员交流
信任体验
呈现给用户的信任体验,强调可靠性。
1 公司介绍
3 网站备案
4 认证资质
发展趋势
在网页设计中,总是有倾向的特定技术来观察,或跟踪的网页设计师加强的趋势。这里有专有和开源和免费的技术专用的支持者。然而,增加自由和开放源码技术,包括由W3C和WHATWG进行监控和批准,监督和实施增加。
趋势可以发现,不仅在看在时尚领域的使用的技术,如网站和匹配的标志是清晰的喜好确定。著名的艺术字Web 2.0至今的重要作用的帮助。几乎每个网络公司都在开展网站建设业务,同时,因发展方向的不同,产生了三大块主体网站建设群体:
第一类
行业门户网站。许多行业门户网站,在其VIP会员服务项目当中,包含了为VIP企业会员提供网站建设的服务,行业门户网站企业建站服务占到所有企业网站建设服务市场的20%;这类网站以模板型居多。
第二类
网络服务公司。指提供包括网络基础应用服务(如域名、主机、邮箱)和网络增值应用服务(如网站建设和推广)等业务在内的综合应用服务公司,企业网站建设是重要业务之一,业务总量占到所有企业网站建设市场的60%。通过网络综合应用服务业务的宣传与拓展,在业界具有良好的形象和口碑,提供的网站建设服务也普遍为客户所接受。
第三类
专业网站建设服务公司,以个性化网站建设业务为主,大多体现在制作出3D全景网站,FLASH全景网站等,突出个性化制作和客户长期跟踪服务,业务总量占到所有企业网站建设市场的20%。
总结
在这三类中,第一类行业门户网站需要长期的客户资源积累,大量的资本运作,操作起来资金门槛不低。而第三类专业网站个性化设计需要高端技术人才,从而提高了技术成本门槛。
突破方式
经过调查发现互联网也并不单纯由技术所决定,更重要的是需要市场创新,如果一味重复别人的模式将很难生存下去,随着市场细分领域的日渐成熟,各网络公司都需要细分定位和寻求全新的商业模式,并不断创新提升核心竞争力,从而才能在市场站稳脚跟。
客户要求越来越高。已经说过了,一分钱一分货,便宜没好货。低质量的网站自然得不到客户的认可,服务不好或者根本就没有服务,网站做出来就像是一个 花瓶那样只做到摆设的作用,客户收不到实际的效果,自然抱怨就会多,客户的满意度低了,自然会对建站公司失去信心,因此,到最后就不再消费或者是把业务转 走了,而建站公司面临的就是客户的大量流失,以及企业信誉度的降低,到最后实际还保存下来的基本上都是一些新开拓的业务,续费率很低,整体都是在低端来做。
网站设计思路
架构
网站首页是兵家必争之地,每个频道负责人都想在显眼的位置推荐自己的产品或者资讯来增加曝光率,总是希望把所有东西一下子让用户看到,但最后我们就发现你放的东西越多,用户就根本找不到他想要的东西,快速离开的可能性很大。在国内的门户网站都习惯了资讯多、页面长,什么都往首页堆,感觉内容越多会显的越大气,但用户的耐性是有限的,所以网页的通透性对国内网站很重要,每一屏的架构变化不宜太多,适当就好,主次内容信息位置保持一致性,不然用户每浏览到下一屏都需要重新去解读架构,思考该从那里开始阅读,不但用户的耐性被消耗掉还会增加用户的浏览成本,所以网站首页的架构必须清晰明了,保持较好的通透性,减少用户的浏览成本。
风格
能用一根线表现出效果就没有必要使用2根线,能用文字表示清楚的就不需要用图片。页面设计如果使用过多装饰元素,会造成页面庞大下载速度缓慢,不要高估网民的耐性,大部分网民都是没有耐性的。浏览大量信息的时候需要一个简洁无阻碍的界面,过多的色彩和装饰反而会分散用户的注意力,影响到用户浏览效果和减少对资讯的点击。网站需要用户看到的是网站提供的信息内容和服务而不是花俏的装饰(个性产品网站除外)。这也是网易门户一直沿用简洁风格原因之一。
信息排布
网站首页一般都会承载大量的资讯信息,密密麻麻的信息会让用户浏览网页的时候会产生压迫感,如何能让用户顺畅的浏览成为设计中重要的一环。
视觉顺序
在一个信息版块里,会有第一视觉区、第二视觉区、第三视觉区,就是说当用户看到这一信息版块时第一眼会落到图片的位置,第2眼会落到大标题上,第3眼会落到其他地方。这样有顺序的引导用户浏览,可减少用户的浏览成本,增加页面的视觉效果。在这个信息版块里第1视觉和第2视觉有可能会因为选材方面而转换视觉,按常理图型视觉冲击力是大于文字的,但当选用的图片素材不优的时候也会被文字所吸引过去。
参考资料
最新修订时间:2024-01-04 10:31
目录
概述
网站介绍
参考资料