做好网站建设其实掌握三点就可以了：一个是网站的交互体验，说白了就是让浏览网站的客户觉得好用，不会因为缺少了哪些功能或者哪些功能做得不够好，而影响了客户对你网站的印象，从而影响了对公司的印象。第二个是网站的设计，也就是美工，要符合公司的形象，当然要美观是肯定。第三个就是网站的基础优化，这个你可能不是很好理解，其实说白了，就是为网站做一些工作，好让搜索引擎对你网站比较友好，你要主推的产品的关键字能在搜索引擎上有个好的排名。这点很多网络公司做得不是很到位。掌握了以上三点，一个网站应该就很不错了。

一、网页标记语言HTML       在制作网页时，大都采用一些专门的网制作制作软件，如FrontPage、Dreamweaver。这些工具都是所见即所得的，非常方便。使用这些编辑软件可以不用编写代码，在不熟悉HTML语言的情况下，照样可以制作网页。这是网页编粗软件的*成功之处，但也是它们的*大不足之处。因为受软件自身的约束.它们将产生一些垃圾代码，这些垃圾代码将会增大网页容量，降低网页的下载速度。在很多时候，为了实现一些特殊的效果和进行灵活的控制，需要手动对HTML代码进行调整，这就需要对HTML有一个基本的了解。       HTML的英文全称是Hyper Text Markup Language，中文通常称为超文本标记语宫或超文本标签语言。HTML是Internet上用于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿多彩的超媒体文件；通过HTTP通信协议，使HTML文件可以在全球互联网(World Wide Web)上进行跨平台的文件交换。二、网页脚本语言JavaScript       在HTML中，*常见的网页脚本语言就是JavaScript。它可以嵌入到HTML中，在客户端执行，是动态特效网站设计的理想选择之一，同时也是浏览器普遍支持的网页脚本语言。       JavaScript程序可以使页面更加生动、活泼，以小的程序量完成大的功能。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript。可使网页变得生动。使用它的目的是，与HTMLL、JavaScript脚本语言一起实现在一个网页中链接多个对象，与网络客户交互，从而可以开发客户端的应用程序。它是通过嵌入或调入到标准的HTML语言中实现的。三、动态编程语言PHP       PHP语言是计算机能读懂的语言。所以PHP语言可以用来编程。人类交流的语言不只有中文、英文，还有德文、法文等，所以和计算机交流的语言不只有PHP语言，还有C/C++语言等，只是其用途各有不同，如中文主要使用于汉语交流的国家，而英文主要用于英语交流的国家。       PHP这门语言则主要应用在Web网站建设领域。PHP从1994年诞生至今已被2000多万个网站采用，全球知名互联网公司Yahoo!、 Goolge.、YouTube和中国知名网站新浪、百度、腾讯、TOM等均是PHP技术的经典应用，目前，PHP己经是全球*普及的Web开发语言之一。       Web是World Wide Web的简称，简写为WWW，中文名为“万维网"。WWW以超文本标记语言HTML ( Hyper Text Markup Language)与超文本传输协议HTTP ( Hyper Text Transfer Protocol)为基础向用户提供叫网络服务。WWW是建立客户客/服务器模式之上，这种结构被称为B/S结构，在这种结构下，用户工作界面是通过WWW浏览器来实现.少部分事务逻辑在前端浏览器(Browser )实现，主要事务逻辑在服务器端( Server)实现，HTML和JavaScript可以认为是在前端浏览器(Browser )工作，PHP则在服务器端(Server)工作。       输到服务器上进行。如果数据量很大，将增大网络和服务器资源消耗。而使用JavaScript就可以在客户端进行数据验证，从而减轻网络和服务器资源消耗。此外，JavaScript还能方使操纵各种浏览器对象，可以使用JavaScript控制浏览器外观、状态，以及运行方式，可以报据用户需要“定制”浏览器等。

       在确定好网站的风格和搜集完资料后就需要设计网页图像了，网页图像设计包括Logo、标准色彩、标准字、导航条和首页布局等。可以使用Photoshop或Fireworks软件来其体设计网站的图像。       有经验的网站设计者，通常会在使用网页制作工具制作网页之前设计好网页的整体布局，这样在具体的设计过程中将会胸有成竹，大大节省工作时间。       网页图像设计是网站规划中的一个非常重要的环节。网页的设计包括网站的Logo设计、网页的布局设计、网页的色彩搭配和网站的字体等。互联网上有很多风格迥异的网站，其表现有的大气、有的婉约、有的精致、有的古典、有的沉稳、有的庄严肃穆、有的高雅严谨、有的雄伟壮丽等。如下图所示为设计的网页效果图。编辑制作网页       设计完网页图像后，就可以按照规划逐步制作网页了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要灵活运用模板，这样可以大大提高制作效率。如下图所示为便用Dreamweaver编辑制作的网页。开发动态网站模块       页面设计制作完成后，如果还需要动态功能的话，就需耍开发动态功能模块。网站中常用的功能模块有新闻发布系统、搜索功能、留言板、产品展示管理系统、在线调查系统、在线购物、会员注册管理系统、招聘系统、统计系统、留言系统、论坛及聊天室等。如下图所示分别为购物网站和新闻发布系统。

       网站页面是网站营销策略的*终表现层，也是用户访问网站的直接触层。同时，网站页面的策划也*容易让项目团队产生分歧。       网页设计师说:“我*知道审美的标准，对于网页设计，我*有发言权。"       网站***说:“网站程序是我开发的，我*知道我的程序要如何呈现给用户。”       企业决策者说:“我*了解我的企业和我的客户，我*能判断他们需要怎样的网站。”       网站策划者说:“网站的定位和规划源自于我，我才是*终的决断者。”       每个人说的都没有错，但是每个人却都只看到了问题的一个方面。对于网站设计的评估，*有发言权的当然还是网站的用户，然而用户却无法明确地告诉我们，他们想要的是怎样的网页，停留或者离开网站是他们表达意见的*直接方法。好的营销型网站建设策划者除了要听取团队中各个角色的意见之外，还要替于从用户的浏览行为中捕捉用户的意见。除此之外，建议网站策划者在做网页策划时，遵循以下原则。1、符合客户的行业属性及网站特点       在客户打开网页的一瞬间，让客户直观地感受到网站所要传递的理念及特征，如网页色彩、图片、布局等。2、符合用户的浏览习惯       根据网页内容的重要性进行排序，让用户用*少的光标移动，找到所需信息。3、符合用户的使用习惯       根据网页用户的使用习惯，将用户*常使用的功能放置于醒目的位置，便于用户的查找及使用。4、图文搭配，重点突出       用户对于图片的认知程度远高于对文字的认知程度，适当的使用图片可以提高用户的关注度。此外，确立页面的视觉焦点也很重要，过多的干扰元素会让用户不知所措。5、利于搜索引擎优化       减少Flash和大图片的使用，多用文字及描述，以便于搜索引擎更容易收录网站，让用户更容易找到所需内容。

       网站就是把一个个网页系统地链接起来的集合，如新浪、搜孤、网易等。网站按其内容的不同可分为个人网站、企业类网站、机构类网站、娱乐休闲类网站、电子商务类网站和门户类网站等，下面分别进行介绍。一、个人网站       个人网站设计比商业网站要自由得多。不同的行业，不同兴趣和爱好的网站建设者。不同的设计目的，所设计出来的网页会有很大不同。一个好的网页设计，不一定很优美、很完善，但在搭配上很和谐，也可能很有个性。不同风格的网站.都会在网络上找到属于自己的知音。二、企业类网站       随看信息时代的到来,企业类网站作为企业的名片越来越受到人们的重视，成为企业宣传品牌、展示服务与产品乃至进行所有经营活动的平台和窗口。通过企业网站可以展示企业形象。扩大社会影响。提高企业的知名度。如下图所示为企业网站。       企业网站的制作要体现企业的文化，在企业网页的侧作中色调和版式决定企业的风格和文化，这对企业整体品牌的影响是至关重要的。以企业的网页作为平台，让顾客了解企业的基本信息，由于这一目的，所以制作企业网站时，首先要结构清晰，其次所浏览的内容要很容易让浏览者找到。三、机构类网站       所谓机构类网站，通常指政府机关、非营利性机构或相关杜团组织建立的网站。这类网站在互联网中应用十分广泛，如学术组织网站、教育网站、机关网站等，都属于这一类型。这类网站的风格通常与其组织所代表的意义相一致，一般采用较常见的布局与配色方案。如下图所示为机构类网站。四、娱乐休闲类网站       娱乐休闲类网站大都是以提供娱乐信息和流行音乐为主的网站。如很多在线游戏网站、电影网站和音乐网站等，它们可以提供丰富多彩的娱乐内容。这类网站的特点也非常显著，通常色彩鲜艳明快，内容丰富，多配有大量图片，设计风格或轻松活泼、或时尚另类。       娱乐休闲类网站的设计要求比较高，除了要表现出网页内包含的内容，网页的分类和布局结构也很重要。只有漂亮的首页，才能引起爱好者的浏览兴趣。如下图所示为娱乐休闲类网站。五、电子商务类网站       电子商务网站建设有多种类型，*为常见的是在互联网上成立虚拟商场，为人们提供一种新的购物方式。随着网络的普及和人们生活水平的提高，网上购物已成为一种时尚。丰富多彩的网上资源、价格实惠的打折商品、服务优良送货上门的购物方式，网上购物已成为人们休闲、购物两不误的**方式。网上购物也为商家有效地利用资金提供了帮助，而且通过互联网来宣传自己的产品覆盖面广，因此现实生活中涌现出了越来越多的购物网站。如下图所示是电子商务类网站。六、门户类网站       门户类网站将无数信息整合、分类、为上网者打开方便之门，绝大多数网民通过门户类网站来寻找自己感兴趣的信息资源，巨大的访问量给这类网站带来了无限的商机。门户类网站涉及的领城非常广泛，是一种综合性网站，如搜狐、网易、新浪等。此外，这类网站还具有非常强大的服务功能，如搜索、论坛、脚天室、电子邮箱、虚拟社区、短信等。门户类网站的外观通常整洁大方，用户所需的信息在上面基本都能找到。

       一般来说，网页中显示*多的就是文字，它们通过不同的排版方式、不同的设计风格排列在网页上，并提供丰富的信息，所以对文本的控制及布局在网站设计网页中占了很大的比重。能否对各种文本控制手段运用自如，是决定网页设计是否美观、富有创意及提高工作效率的关键。一、文字的字体、字号、行距       网页中中文默认的标准字体是“宋体”，英文是"Times New Roman"。如果在网页中没有设置任何字体，在浏览器中将以这两种字体显示。       字号大小可以使用磅(point)或像素(pixel)来确定。一般网页常用的字号大小为12磅左右。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。而要注意的是，小字号容易产生整体感和精致感，但可读性较差。       无论选择什么字体，都要依据网页的总体设想和浏览者的需要。在同一页面中，字体种类少，版面雅致，有稳重感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。       行距的变化也会对文本的可读性产生很大影响，一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点，行距太小时字体看着很不舒服，而行距适当放大后字体感觉比较合适。       行距可以用行高(line-height)属性来设置，建议以磅或默认行高的百分数为单位。如(line-height: 20pt )、(line-height: 150%)。二、文字的颜色       在网页设计中可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。如正常字体倾色为黑色，默认的链接颜色为蓝色，鼠标单击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应该注意的是，对于文字的颜色，只可少量运用，如果什么都想强调，其实是什么那没有强调。况且，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非有特殊的设计目的。       颜色的运用除了能够起到强调整体文字中特殊部分的作用之外，对于整个文案的情感表达也会产生影响。       另外需要注意的是，文字颜色的对比度，它包括明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生作用，更重要的是，可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。三、文字的图形化       所谓文字的图形化，既把文字作为圈形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应该围绕如何更出色地实现自己的设计目标。将文字图形化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心.如下图所示即为图形化的文字。

网站建设是一门技术，更是一门艺术，技术会随着代码语言的更新而发展，艺术更需要如此。所以，同行的交流不仅仅是进步，更是偷师。从字面意思上理解，偷并不是一个光鲜亮丽的褒义词。可如果我们将其更换为借鉴、学习之类，则给人以进取的感觉。是的，企业的发展和社会的进步离不开创新，尤其是原始创新，但是建立在他山之石上的微创新，也同样是不可或缺。网站建设同样如此，其实网站建设行业在中国刚刚起步的时候，我们一样经历了先模仿日韩，后借鉴欧美的成长之路。即便是现在，国内很多公司的网站，在设计制作时不是一样参考了很多欧美网站吗?所以，网站建设领域的学习借鉴甚至模仿的事情并不鲜见。一个公司在设计制作网站时，多浏览一些同行的网站，并对其各个优秀部分进行参考然后结合自身情况融会贯通，即可有效的少走很多弯路，降低网站建设及网络推广营销的风险。交流是借鉴而不是抄袭复制我们在网站建设实践过程中，也发现另外一个现象，即便很多网站建设公司也是如此。就是找一个同行不错的网站，尤其是国外的网站，然后几乎原封不动的进行抄袭克隆。这样对他人劳动果实极其不尊重的做法，自然不能称之为偷师，而是赤裸裸的剽窃了。显然是，如此不良做法是不能提倡的，正确的偷师观点和方法是，总结出借鉴对象网站的优点，然后巧妙的应用到自己的网站上。谈到借鉴，我们需要偷师的对象也不是一个网站，或者一个行业。在网站建设前，我们不妨多浏览一些网站，也许有些网站的布局不错可以参考，有些网站的配色很棒可以学习，有些网站的创意超前可以借鉴。单纯对某一个网站进行比虎画猫似的复制，不仅对原网站不尊重，也是对自己网站极度不负责任。交流要知晓设计背后的逻辑无论是客户要求，还是设计师自己的想法，只要花费心思的网站建设，一定在设计背后蕴藏着自己的逻辑。不仅是我们看到的设计，还是有网站的前端交互，甚至栏目甚至等都是如此。我们在浏览同行网站，偷师其网站有点的时候，需要用心琢磨其背后的逻辑。不然即便我们东拼西凑做出来一个看似不错的网站，但是用于推广营销时也不简单有很好的转化效果。比如有些网站在栏目设置时将产品和服务等放置尽可能靠前，而有些公司的网站重点突出的是公司和品牌介绍，对应的栏目也是紧贴首页之后。其这样做的目的，在于想通过网站表单的重点不一样。带着问题去学习借鉴他人网站，其比盲目的抄袭复制要可以收获更多有价值的信息。交流需融会贯通并学会创新正如上文所言，网站建设借鉴学习一定不能局限于某一个网站，而是需要多方参考并结合自己需求融汇贯通。可是如果只有这些，即便网站建设出来感觉不错，但是也是一样确实灵魂的。因为也许行业一样，产品类似，但是每家公司都有着自己与众不同的气质和文化，而网站正式展示企业文化的绝好平台。所以我们在网站建设的时候，偷师他人网站只是一个避免弯路的方法，更多还是需要融入自己的东西。担路网在上海网站建设行业十几年，对各种在网站设计和网络营销推广上不实宣传司空见惯。从*早期一些规模较小的加工企业开始，用Photoshop修图片加公司内饰，或者在别人的企业大楼上加上自己公司的LOGO和企业名称。到后来一些没有工厂的贸易公司，干脆直接从搜索引擎上找一些图片，简单处理下加上LOGO就宣称自己有好几处工厂。再到后来，不少公司开始意识到搜索引擎推广的重要性，纷纷投钱推广。在广告标题和内容创意中，各种标榜第一、*强、**等等几乎遍地生花。直到2015年新广告法颁布实施后，这些不良风气才慢慢得到控制。可是即便现在，仍旧有一些公司巧妙的擦边球宣传，这个无需多言打开搜索引擎随便搜索几个广告，然后看看网站就知分晓。确实的，对于企业而言，一些恰当的宣传包装方式，可以有效提高关注及营销转化。但是游走在法律和用户体验边缘的浮夸宣传，或并不是网站建设和营销推广的*好选择。过分包装和噱头终难逃用户法眼其实有时也非常搞笑，本来就几个人的贸易公司，办公室也就一百来平方的大小(这里**没有半点贬低小公司的意思，只是举个例子)，却在网站上宣传自己年产值几千万，图片上工厂设备俨然几百上千人的大型实体企业。这自然反应了一些创业公司的不易，但是同时也流露出很多公司缺乏基本的敬畏心理。在网站建设行业，这样的事情就更屡见不鲜了。虚假案例、虚假客户，甚至一些公司的办公室都是与他人合租的，却堂而皇之的宣称自己专注高端网站建设，可在沟通和方案中却给客户传递出小家子气的感觉。如此这样，真的有几分戏谑客户了，客户也许刚开始并不明白怎么回事，但是多比较沟通几家供应商后，一样能发现蛛丝马迹。如此这般，也许坦诚面对真实沟通给客户的感觉更好一些。因为客户真正需要的是一个有品质的网站，而规模和过往案例只能说明有此经验而已。网站推广营销不是博得一时关注实事求是的将，网站推广需要博用户眼球，在用户打开网站的几分钟内赢得用户好感。但网站推广营销又不是博用户一时关注，赢得用户初步认可后，需要后期向用户呈现更为真实的一面。作为网络推广营销的核心载体，网站建设是一项技术工作，更是一项艺术工作。需要通过扎实的技术开发，让网站安全稳定快速运行，也需要通过艺术设计和艺术表达，真实展现并巧妙表述出企业的优势，赢得用户认可选择。但是这一切都是建立在合法、守法并符合用户预期和体验基础之上，所以感觉尊重用户就是尊重自己，只有踏实坦诚的进行网站建设和内容丰富，才能赢得用户*终的、持续的好感和认可。当然踏实和坦诚并不等于推广不重要，好酒也怕巷子深，只是要恰当和适度。

4、应用正确的布局正如我们所知，用户体验很大程度上取决于网站的布局。对于媒体丰富的网站，常见的布局选择通常是网格。这是因为网格的模式**地显示了一组图像，而且每个图像都并排显示。下面的部分描述了三种主要的网格类型，每个类型都有一个示例。应用一个经典网格典型的网格是包含大小相等的正方形图像拇指的网格。它带来了一种平衡感和和谐感，适用于图像不是主要扫描项目的页面。卡片列表是一个经典网格的选项。想想常见的用例，比如YouTube和Dribbble。应用一个BRUTALIST网格下面是一个投资组合站点的例子，该站点不遵循非常熟悉的网格布局，但仍然关注内容。马库斯·埃里克森（Marcus Eriksson）是一位炙手可热的摄影师，他的客户包括耐克（Nike）和ESPN等**品牌。他的网站以非传统的网格布局为特色，在不牺牲可用性的前提下吸引观众的注意力。这个站点的延迟加载也非常好。如果你想让你的访问者关注几个单独的图片，使用这个模式。混乱的布局是非常迷人的，有一个惊喜的元素。然而，要注意的是，有些图片可能会从所有的喧嚣中“迷失”。应用砌体网格谷歌艺术与文化的艺术调色板实验将流行的艺术品分解成基本的调色板。相反，它还可以根据您选择的调色板显示艺术形式。对于我们的目的，艺术调色板网站是鼓舞人心的。这是一个很好的砌体网格的例子，显示不同大小的图像，同时保持它们“有序”。这是显示大量图像的*佳方式，同时保持原来的长宽比。（你可以用这个插件建立你自己的砌体网格。）关于性能的补充说明：还记得前面提到的骨架技术吗?艺术调色板站点通过首先加载一个延迟加载的、占主导地位的色块，然后逐步加载低质量的图像占位符（LQIP），使其达到一个新的高度。强烈推荐的举动!5、为目标添加动作运动元素增加了网站的视觉天赋。然而，就像文本一样，在处理大量图像时，要确保运动和图像一起工作。在谷歌的材料设计中提到了一些运动设计原则的*佳实践。下面是一些如何在网站中使用动画来支持用户体验的例子。宣布布局变化在很多情况下，页面布局的变化会让访问者感到不安，就好像页面上的所有东西都在改变位置，地面也在改变一样。动画可以帮助你的访问者软化变化。考虑这个例子，它在一个典型的网格中显示图像。当鼠标移到一个图像上时，一个微妙的动作会将访问者的注意力转移到这个元素上。换句话说，动画巧妙地将访问者从网格布局引导到单图像布局。简单而有效。负载轻松另一个有趣的例子是优步的设计网站。由于用户的主要操作是简单地向下滚动页面，这会触发图像加载，因此网站通过平滑的过渡和微妙的动画来丰富浏览体验，同时以一种清晰、容易访问的方式呈现相关信息。切换图像Fubiz使用动画技术在图片库中的图片之间切换，显示出每个图片的内部信息。加入动画来讲述一个故事*后一个例子是Avocode的2017年设计报告，在这份报告中，每一页都有一个故事与一些世界顶尖设计人才创作的插图分享。这份报告就像连环画一样，每一个插图的制作和动画都是为了加强报告的关键发现。不要忘记视频的优点这里有一个很好的经验法则：如果你可以发布视频而不是图片，那就这么做。看看这个耐克产品图库的例子，其中一个项目，伪装成一个图像，实际上，是一个视频。在加载视频之前会显示一个图像，这样购物者的体验就不会被抽象出来。结论必须处理大量图像或视觉媒体的显示并不意味着你应该忽略设计原则，设计一个不考虑用户体验的时尚网站总是失败的。规划图片作为你网站目标的一部分，执行性能，并结合动画可以使壮观的体验和枯燥的体验完全不同。给网站增加一个网站地图，是每个网站建设公司或者是企业网站建设所必须的，因为网站地图能够给搜索引擎提供一个快速的索引途径。给网站增加网站地图有什么好处呢？北京网站建设来讲一下。首先网站增加了网站地图能够增强搜索引擎的抓取，虽然说现在的搜索引擎爬虫技术在不断的改进，但说到底他还不是完全的智能，有的时候你网站更新了文章或者页面，爬虫也不一定回来爬行抓取你的网站，这个时候就需要给搜索引擎一个专门的地图，让爬虫知道我们网站的链接，进而爬行这些URL，建立索引和收录。对于网站的访客来说，网站地图也是很有帮助的，网站地图位网站的访问者指明了方向，帮助迷失的访客找到他们想要查看的页面，不至于因为找不到想要的页面而离开网站。无形中增加网站访客的浏览量，减少了跳出率。对网站的运营维护，SEO优化都有着非常重要的意义。给网站增加网站地图能够增加搜索引擎爬虫抓取网站的频率，还能够有效的维护网站的原创内容所有权，现在的互联网，有很多人利用手段窃取你网站的原创内容发布到其他平台，但是如果你的网站增加了网站地图，当你发布了网站内容，搜索引擎会很快的爬行你的网站，抓取收录你的网站内容，这样搜索引擎就会意识到你的文章才是*原始的发布者，就消除了搜索引擎对你网站文章来源的疑惑，不会判定你的文章是伪原创。

考虑Klook的加载顺序：在这里，对于每个图像，浏览器首先加载站点的轻型版本（带有白色背景），然后加载实际的背景图像。对于某些人来说，这种方法可能看起来很快或微不足道，但要记住，不同连接和设备的性能是不同的。（如果您正在使用React或Vue，您可以使用这个很酷的工具来创建框架组件。）2、将图像作为设计的一部分这条规则似乎很明显，但经常被忽视。图像是设计中不可分割的一部分，因此必须加以考虑。因为设计服务于一个目标，所以页面的相关图像和组成必须支持这个目标。设计图像补充记住要确定页面的目标，并对其进行优先级排序。无论您的目标是征求时事通讯的注册或提供浏览目录，您的图像必须补充预期的目的。例如，Essential Phone的登录页面上显示了该产品的一个醒目图片。黄色的“现在购买”按钮突出显示，引导访问者的注意力到预定的动作上。因为图像显示的是产品本身，所以它不会被截断，也不会作为文本的背景。有图像采取后排尽管以图像为中心的设计通常会带来更好的结果，但一定要遵循基本的可用性原则，因为这些设计不能保证成功。例如，通过为主元素和辅助元素分配相同的权重，您可能会忽略视觉层次结构。MetaLab是一家专门设计界面的设计公司。第一次展示的时候，它的单层登录页面只显示了纯色背景，只有很少的文字，主要是客户的名字。然而，当你鼠标移到一个公司名称上时，背景会发生微妙的变化，显示一个上下文图像。这意味着在每次切换上下文的过程中不会再有痛苦。这样的主页设计巧妙地传达了这样一个信息：MetaLab的客户数量之多令人印象深刻。3、让文字和图片成为朋友在同一个页面上同时显示文本和图像可能是一件棘手的事情。挑战是为你的网站找到文本和图像的**平衡。将文本放在一个软背景叠加上在软背景叠加上放置文本是呈现对比图像和文本*简单的技术之一。Indiegogo的登陆页面就是一个典型的例子，在这个页面上，每个产品的图片上都有一个柔和的黑色叠加，上面显示着标题和描述。文本易于阅读，没有牺牲视觉吸引力。混合文本和图像Airbnb的主页采用了文本和图像的**结合。home类别的图像包含图像本身内部的措辞，使设计师能够在照片的覆盖对象之间隐藏文本。这种方法可以无缝地工作，说明文本和图像不需要是单独的实体。（关于可访问性的补充说明：请记住，在图像中使用文本也意味着搜索引擎除了在图像的alt标记中指定的关键字之外没有关键字，除非使用aria标签，否则会在可访问性方面造成问题。您的*终选择取决于设计上下文和页面的目标。将文本和图像组合为一个交互单元2018年电影的登陆页很抱歉打扰你，每个演员的形象只显示在一个鼠标悬停的成员的名字上，同时延迟加载的形象。虽然文本是由活动文本（列表元素）组成的，但是它使用样式字体和颜色以及图像的投影，使呈现看起来像一件艺术品（或电影）。图像和文本之间的界限很模糊。在正确的时间显示正确的图像体现了一种有趣的和引人入胜的用户体验。

你还记得你*后一次访问没有图片的网站是什么时候吗？作为网页设计师，我们喜欢在我们的设计中添加图片，因为图片是令人难忘的，并且给我们提供了一个直接沟通观众大脑的渠道。此外，图像是普遍的，我们的大脑处理图片的速度比文本快。这就是为什么“故事”媒介（带有特效和叠加效果的短视频）和表情符号吸引人们的部分原因。但自“web 2.0”出现以来，其他事情也在发生。互联网上大量使用图片，其中一些是由用户生成的内容推动的，这给网页设计师带来了一个问题，他们必须在图片数量不断增加的情况下提供丰富的体验。在接下来的部分中，我们将详细讨论在现代设计智能、图像丰富的网站时需要记住的技巧。1、提高性能每当有人想到网络上的图片，他们的内容、分辨率和风格就会立刻浮现在脑海中。但*重要的因素是提供更好的用户体验的图像实际上是性能，这甚至比图像本身更重要。这是因为大多数访问您网站的访问者不会费心等待您的图片加载。简而言之，图片丰富的网站不能慢下来。负载时间每增加一秒，转换就减少7%。这意味着，一个加载缓慢的电子商务网站，如果每天的收入为1000美元，每年的销售额就会减少25万美元。瑞安航空（Ryanair）和玛莎百货（Marks & Spencer）等大公司进行了大规模的网站重新设计，但由于关键的性能问题，这些设计都以失败告终。因此，一定要记住，以用户为中心的网站首先是基于性能的。您可以在许多方面提高性能，这是一个很好的起点。使用优化和响应的图像。只有在用户需要的时候，以及他们需要的时候，才能向用户展示图片。以下是三个基本的建议。技巧1：使用SPRITE表在web上加速加载时间的*古老的技巧之一。加载多个图像需要时间和资源。但是，加载单个映像并显示其组件要快得多，因为这样做可以减少服务器请求的数量并优化带宽。通过级联图像样式表（Cascading Image Style Sheet, CSS）精灵，浏览器只加载了一张图片，比如一排社交媒体图标，只在相关位置显示其中的一部分。*近卫报的2018年世界杯信息图表就是一个很好的例子。一开始，页面就出现了一个问题，显示了大量的图片：32支参赛队伍，每个队伍都有超过20名球员。作为一个解决方案，该网站利用CSS精灵来显示每个球队的球员。下面的页面显示了西班牙国家队的23名球员，页面来源只有一张图片，加载速度非常快。技巧2：延迟加载图像另一个关键问题是延迟加载，尤其是在大量图像的情况下。原理很简单：只在浏览器的视图中可见时加载图像，而不是通过加载整个图像集合让访问者等待。作为一个经典的例子，向下滚动Unsplash主页。技巧3：首先加载一个网站骨架图像永远不会提前出现，这就是为什么你必须考虑感知性能。在网站的图片为访问者创造更好的体验之前，先加载一个基本的框架版本。然后他们就会知道接下来会发生什么，在某些情况下，他们甚至可以开始与网站进行交互（在加载图片之前）。