Uncategorised

虽然说人不可貌相，但是第一印象永远有举足轻重的地位。首屏图像是所有网站的第一印象。一个有影响力的网站，往往能够通过第一眼就能吸引用户。它不仅可以有效传达产品价值，同时还会影响到官网整体的气质。 不同的行业首屏的设计不尽相同，需要量体裁衣，贴合网站受众的需求。 1、商务实景首屏图片营造场景氛围 于一般消费产品品牌网站不同，商务企业的属性决定了他们不能大胆地彰显个性和创意。他们更需要的是显示企业品牌的高可信度和声望。使用产品的场景照来说明商务服务的专业，或用一些开阔的风景照来表现公司的价值观和愿景是有利于给客户传达企业价值的有效方式。 这种传统的照片形式常见于一些商业服务类型公司，例如会计事务所，律师事务所，医疗诊所，工程咨询公司等等。 如：Earnest & Young 2.概念图用艺术化表达产品价值 创意设计的来的概念图，会带来比真实照片更大的表现空间，可以通过一些艺术化的手法来贴合服务理念传达产品价值。 比如Zendesk用形象的概念图来帮助传达服务的态度主张——我们能出手相助。 3.科技创新公司使用插画为首屏图像 近年来一些科技企业品牌向更年轻更有活力的方向发展。插画的形式有利于显示活力时尚的品牌形象。如Onedrive, 用生动的手绘风插画描绘了不同的设备在流畅共享文件的场景。   4.产品形象图形象直观 对于拥有自己产品的品牌企业，可以运用产品形象图作为首屏海报图，让用户对产品的外观，使用场景有一种直观的体验，也是传递自己产品的设计和使用价值的简单直观的方式。 如Lululemon, 使用标题：Stretch Your Stride和产品展示图表现了产品的价值和美感。 5.客户照片来说话 对于提供服务项目的企业，使用真实客户的肖像作为首屏海报图，有引导展示客户案例的作用，使产品和服务更有说服力。如UIT的网站，使用了学生们的图片，显示出学生们对教学和校园生活的满意状态。体现了学校欢迎海外学生的理念。 6.视频是流行趋势 对于一些视频网站，用视频代替静态图出现在首屏成为近年来流行的一大趋势，比起静态图，动态视频更容易向读者展示企业所提供的视频服务。 比如婚礼摄影公司Allure, 使用其制作的各种客户视频，展示了他们的作品，更吸引客户。 总之，好的首屏海报能给网站带来意想不到的优良印象，并且传达品牌理念。各位不妨根据自己企业的实际情况，选择适合自己的首屏海报，使自己的网站锦上添花。

常言道“酒香不怕巷子深”，要想吸引来源源不断的网站浏览访问量，光凭酷炫和漂亮的页面效果还是不行的，你需要使用一点小技巧让你的网站在互联网这个茫茫人海中脱颖而出，让你的潜在客户可以轻松找到它并且顺利访问它。提高网站访问量的方法多种多样，今天和大家分享的是如何优化网站提高访问量。 1、分享你的内容 现在的产品都有品牌故事，博客和内容营销相结合无疑是最佳的搭档。相关研究指出57%的公司是从博客里面获得用户的， 92%的公司定期更新博客，46%的人一天都是都有多次的阅读博客的习惯，81%的营销人员反应博客对营销是有很大的作用。把高质量的原创定期更新于博客，对读者有所帮助，这样就会形成顾客粘性。并且将链接发到各大平台上分享你们网站的内容，告知大家你是做什么的，从而让你的网站增加访问量。 2、引用评论 将用户生输入的信息发送到您的网站也可以是一个优化的方法，特别是如果您使用称为模式标记的特殊代码来使这些评论作为您的内容的评论。您甚至可以在Google的搜索结果中获得审查明星，但为了赢得这些明星，您必须允许评论和评论来打开您的网站。 3、创造独一无二关键词页面 你网站上的每个网页都需要有唯一的标题、说明、网址和内容。这些元素都要利用热点关键词，用优质搜索引擎搜一下，看一下首页，假如出现的都是别人的主页，你就去掉这个关键词，但搜索引擎能够确定你的网页是关于什么，并且知道在其页面索引中包含这些值是非常重要的。接着就是找出排名第一的网页，把关键字、标题、文章简介、内容全部复制下来，优化加工一下，使你的网页在搜索引擎面前显示出一个独一无二的样子。 4、速度 据调查，57%的购物者网站超过3秒都会立马离开的，65%的年龄在18-24岁的用户期望网站的访问速度至少要在2秒之内打开。这是一个残酷的事实，于是就需要测试网站速度，分析你网站的页面情况，以及制定出你网站需要优化的地方。网站速度问题有很多技术是可以用来加速你的网站的，压缩图片就是网站第一步了，使用图像编辑器的压缩工具，会提高搜索引擎和用户都的满意度。其次还有使用缓存插件来实现。比如WP- Supercache，W3-TotalCache这两款插件是我们必须安装的缓存插件，可以有效的提高网站速度。最后，还可以使用CDN避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。 5、 优化代码，减少臃肿结构。如果我们使用较为流行的CMS这方便应该不会有臃肿的代码结构存在，但需要注意的是我们在制作或者选择网站模板的时候也会存在不合理的结构。我们需要在写模板或者程序的时候使用较为简洁的程序框架，简洁有利于用户体验，也更利于搜索引擎蜘蛛的爬行和抓取。 6、开启GZip压缩功能。一般的主机都支持GZip压缩功能。我们需要利用好主机提供给我们的功能，开启压缩可以提高网站的访问速度，一般主机都是免费提供的，但很多人都没有开启。 7、网站要和手机自适应 现在移动端的流量已经超过web端的流量，你必须让你的网站做成和手机自适应的形式来增加用户的访问量。搜索引擎更在乎的是用户， 当用户能使用不同移动设备，无障碍地访问你的网站时，你的访问量就会提高并且在搜索引擎中的排名就会提高。 以上是提高网站访问量小方法，之后小编还会定期分享更多实用知识。欢迎继续关注分享。  

很多网页设计师在为企业和集团进行网站建设时，都是使用相同的方法进行网站设计，工作重点基本是视觉和版式的设计；但实际上，集团网站和企业网站的职能和设计目标有所不同，集团网站除了视觉上要延续品牌调性外，更重要的一个职能是与公众媒体、投资者、人才等用户群体有更紧密的连接与沟通，所以网站的结构、栏目以及功能的设计工作就尤为重要。根据多年的集团网站项目经验，总结了以下5个工作要素方便参考。 第一要素：梳理网站需求 通常客户都会整理一个初步的需求文档，然而，客户的初步需求文档并不会那么精确，也不一定是他们最终的目的和想法，那么，设计师需要通过这个文档重新梳理和细化客户的需求后再与客户进行深入的沟通，从而确定最终的需求文档。   网站建设的需求一般可以分几部份构成：用户群体分析、网站升级目标（客户定位、人群定位、内容策略、设计关键词）、网站结构及功能设计、风格的定位等；设计师对网站需求梳理清晰后，严格按制定的设计目标去执行，从而达到我们要完成的建站目标。   第二要素：确定网站建设目标 网站升级目标我们一般会划分为客户定位、人群定位、内容策略、设计关键词等。 这里我们举个例子，项目是GWC/BOB官网，这个项目进行得很顺利，并不是设计做得非常好，其实是我们与客户之间的沟通非常有效！我们在设计目标达成了高度的共识！ 客户定位：金融理财投资集团，塑造具有高端公司气质的金融集团线上品牌形象。 人群定位：投资人、合作伙伴、理财人士，金融理财人才 内容策略：定位创意金融投资理财集团形象，传播企业良好的社会公众形象和企业文化 设计关键词：专业感、稳重感、简约感 在确定建设目标后，网站的结构及内容的设计都是围绕目标开展。   第三要素：设计网站结构及功能 网站的结构和功能设计需要紧紧围绕设计目标、用户的访问路径以及用户关注的信息进行设计，承载网站的职能。可能大部份设计师都会认为这是产品经理应该要做的事情，设计师只是作为最终的设计执行者，其实不然，设计师如果没有从一开始梳理清楚整个网站的架构以及功能，最终呈现的设计怎么符合目标和用户体验？这里讲的用户体验并不仅仅是交互效果。 这是一个网站的结构大纲例子： 1、形象展示：传递企业的价值观与核心理念，社会责任和未来发展，传播集团品牌形象。 2、业务介绍：对集团的主营业务及重点项目进行展示，展示产品和服务，与消费者进行沟通。 3、吸纳人才：为集团及下属机构建立人力资源平台，及时发布招募信息，建立人才储备，为集团获得长远竞争力。 4、投资者沟通：介绍集团业绩、公告及年报等，增强投资者信心，赢得投资者信赖。 5、媒体宣传：展示集团对公益投入、社会回馈等活动，塑造具有社会责任心的良好公众形象。   通过文字的描述帮我们清晰初步的内容需求，后面可以使用软件帮助我们设计脑图，更利于理解和沟通，这里我们推荐使用XMind工作完成这部份工作。   第四要素：设计原型图 原型图有助于客户和设计团队进行更深入、更具体有效的沟通，大多数客户的项目负责是没有经验的，我们需要利用一些工具和方法帮他们梳理清楚整个网站的内容、层级以及逻辑关系等；通过原型图设计，我们可以策划每个页面的内容以及相互之间的层级和逻辑关系来，在原型图设计中，客户可以清楚的了解网站的内容构成以及关系，后期需要配合的文案以及图片等资料素材的工作，通过这些可以更好的调配客户内部资源，更能达到网站预期的目标。推荐使用原型图工具Axure。 第五要素：风格重塑与定位 简单和经典的网站风格可以适应任何趋势，集团网站的版式不应过多追求潮流和变化，应更为注重塑造集团专属的气质，建立符合当前审美的线上识别系统和设计规范，设计师要注重对内容和体验的设计，包括海报、文字、系列图标、图片和交互等的设计；一个经典有质感的网站形象更能传递一个企业的品质和高度。   总而言之作为专业设计服务外包商，重点除了提供专业的设计服务，但更关键的是如何促进两支初次合作的团队畅通无阻的沟通才是有利于项目顺利达到预期目标的关键。              

一、什么是HTML语义化 基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等，根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析便于SEO推广。 二、为什么要语义化 搜索引擎优化和语义的HTML是密不可分的伙伴。他们有时可能有利益冲突，稍后在文章中说明，但总的来说，他们是一致的。搜索引擎优化的目的是为了帮助搜索引擎爬虫更好地了解网页的信息和将网页更好地归类。它需要更多的指引去确定一个网页的结构和主题。好的语义化的HTML能够体现页面的结构。语义的HTML试图通过网页上文字和标记传达网页的含义，也可以这样想：如果网页上的内容是你说的话。那么标签是话的结构，音调，停顿，甚至可以是脸上的表情。基本上标签是一半语言。通俗来说；语义化之后的网页，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。下面我来分几类说说为什么要语义化： 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构。 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用。 考虑到代码的可复用性，可移植性，方便其他设备的解析执行。移动设备、盲人阅读器等 有利于SEO和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重。你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。 三、如何语义化 标题＜Hx＞ ＜h1＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞、＜h6＞,在WEB中作为标题使用，并且依据重要性递减。＜h1＞是最高的等级，所以你需要准确确定 每个页面最重要的内容是什么，要优化的关键词在哪里。以我们最常见的博客为例，博客首页罗列最多的通常就是最新博文，而最重要的应该就是博客的名称了，而后面最新文章的链接标题则可以使用＜H2＞或者＜H3＞，一般都使用＜H2＞，表示次级标题。 但是，是不是每个页面的H1标签都包含博客名称呢？我们的建议是次级页面的博客名称链接都放在H2标签里，而你的文章标题则使用H1标签，这样对于整站优 化是很有帮助的，这也是优化到每个页面需要注意的一点。通过合理设置每个页面的hx标题，网站的内容才会更具优势。 强调＜em＞、＜strong＞、＜b＞、＜i＞ ＜em＞、＜strong＞这两个标签对SEO有着较大影响效果，适当使用它们，可使你的网页增色不少。＜em＞、＜strong＞与Hx一样，其区别也 在于重要性不一样。＜em＞ 表示强调，而＜strong＞意为重点强调，较em更重一些。在SEO时，我们可以将最重要的关键词用strong标记，对第二重要的用em标记。结合前 面使用的Hx标签，它们更适合放在文章正文的内部，而Hx理所当然是在用在正文的外部。有些WEB设计者为了达到网页的某些效果，使用＜strong＞纯 粹是为了达到加粗，使用em就是为了倾斜，而这种做法根本没必要，而且相反可能会影响到SEO的效果。在以前，为了达到粗体、斜体的效果，WEB设计者会 使用＜b＞、＜i＞标签，而现在基本不用它们了，它们仅仅是用来表现文本样式的，而最明智和常用的解决方案是用CSS来控制文字样式。 段落＜p＞ 当搜索引擎读取网页内容的时候，遇到P标签的时候，立马就知道这是一个段落，而如果使用DIV，就无法体现HTML语义化的优势了。从WEB标准的角度来 看，文章正文使用P是理所当然，也是更值得提倡的。不过如果使用＜div＞代替＜p＞，对SEO的影响还是甚微的，因为它们并没有任何强调的意味在里面。 但是如果你使用P来给网页整体布局，就显得有些怪异了。 列表＜ul＞、＜ol＞、＜li＞、＜table＞ ＜ul＞为无序列表，大家广泛使用的，有序列表＜ol＞也挺常用。在web标准化过程中，＜ul＞被更多的用于导航条，这样做是完全正确的，而在文章列表 里面，就可以使用ol了，因为那些列表都是有一定顺序的。当然，这两个对于SEO的影响也是甚微的，但如果你使用表格＜table＞代替列表，不仅会使得

互联网的时代，说是一个体验为王的时代，一点也不为过。如果在设计一个网页的时候有好的设计技巧，那么将会大大提升这个网站的用户体验，如果一个网站的用户体验提升了那么访问量也就提升了，访问量提升了那么销售额自然也就提升了，一个网站能让一家公司的销售额提升起来，那么这个网站可以说是个非常成功的网站了。今天我们就来讲设计中的10个重要的小技巧吧。 1.优化使用的图片，会获得更好的页面加载速度 使用正确的网页格式图，能让网站访问速度提升一半。这里有个选择适合的文件格式的技巧：如果图片是单色，那最好储存为PNG或者GIF格式图片；如果是彩色色调图则最好储存为JPG格式的图片。 尽量把图片数量减到最低，并且灵活使用图片，并且尽可能地减小文件大小。如此一来，将可以大大的减少页面的读取时间和改善网页的性能。一些方便图片优化的在线工具包括： Optimizilla:  http://optimizilla.com/zh/ 图好快：www.tuhaokuai.com/ 色彩笔: http://www.secaibi.com/tools/ 2.保持干净和简单 通常来说，一个干净、简单的网页设计最终会成为一个可用性高的网页设计，因为它在与用户的交互中不会使其产生混淆。当页面上有太多的网站功能和组件时，将会分散网站用户的注意力而失去原本浏览网站的目的。确保每个页面元素都有其目的，然后问自己以下问题： 是否真的需要这个设计么？如果我突然删除这个组件，大多数人会希望它“回来”吗？ 这是什么组件是做什么用，它如何协助用户浏览？ 如何把这些元素和目标、消息和网站的宗旨互相结合？ 3.UI 动效的有效使用 UI动效是对实时交互的本质的补充。也就是说，动效可以营造一种跟物理世界的物体交互事的情感体验。通常，UI动效总能带给用户积极的体验。可以通过以下动效带给用户更多满足感： 展示进度：这个交互主要展示网页的刷新或者加载状态。 展示关键导航：用户通常希望一眼看到最关键的东西。通过动效暗示导航的选中状态，会立刻将用户引导到指定内容。对网站建立阶层结构，多层次的管理。确保它在父层与子层之间易于导航。此外，不管在哪一个网页当中，也应该能很容易到达最高层的页面（例如网站首页）。在用户滑动到相应阶层则自动展开子层菜单。 4.明智和有条理地使用字体 保持字体的一致性，确认标题和段落的内容看起来有所不同。使用空白、调整行高、字体大小和字母间距属性，使用户轻松愉快地阅读和扫描内容。尽量保持字体大小12像素以上，特别是对段落内容。虽然很多没有遇到因为字体太小而造成阅读上的困难，但是想想老人家、近视眼和其他类似视觉障碍的族群吧。 5.理解色彩无障碍性 颜色的合理运用，是至关重要的。一个界面尽量要保证一个主色调，一个辅色调即可。有些色彩组合只适合运用在前景色的部分，而不适合做背景色。不仅要使用良好的色彩组合，而且要把它用在页面中的合适元素上。比如：想让用户点击什么按钮，那么取消按钮最好弱化视觉。此外，使用一些对特殊形式色盲的用户友好的颜色（检查工具名为Vischeck，可以测试某些类型的色盲）。 6.要了解如何编写代码 虽然各种所见即所得的网页编辑器充斥市场。但是，大多数网页编辑器掺杂了不必要的代码，使你的HTML结构设计不当，难以维护和更新，导致网页膨胀。通过自己编写的网页代码，能得到简洁的代码，能够愉快方便地阅读和维护。你可以自豪地说是自己写出来的代码。但知道如何使用所见即所得的IDE或预览功能并不会妨碍学习HTML和CSS。你要知道发生了什么事情，才能创造有效并高度优化的网页设计。 7.谨记搜索引擎优化是非常重要的 在设计网站时，一个好的网页设计师应该永远牢记基本的SEO概念。例如，网页内容结构、用文字表示标题（即网页的标题和标志）。此时，以前学习的如何合理编码的能力就派上用场。认识正确、语义和基于标准的HTML/CSS后，你会很快认识到Div比表格布局好得多，不仅更为准确地展现内容，而且对搜索引擎排名也有帮助。另外，知道用CSS更换背景、文字和图片也是一个好主意。 8.根据阅读顺序做设计 普通人用几秒钟就决定是否要阅读更多网页内容或到另一个网站。因此，作为一个Web设计师，要有个好方法，能在这珍贵的几秒钟鼓励用户选择前者（看更多内容）。所以，遵循人的正常习惯阅读顺序，从上而下，从左到右，在做某些需求的时候，需要考虑阅读顺序这个概念，要让用户最快的时间获取到文字信息。在网页头部很容易看到的地方放置网站上的重要元素，但也不要过度拥挤在上半部分网页，否则会吓到用户，而不会往下继续看内容。记住上半部分网页设计的卖点：视其为推销员，使人们有购买想法，即他们想在你的网站上看到什么。 9.清楚的了解浏览器的兼容性 当一个网页设计师必须要知道的一件事，就是你的工作环境（浏览器）是挑剔和难以预料的。如果你的网页设计只能运行在的几种网页浏览器，那是不够的，你需要尽可能多浏览器下测试。这里有一款工具Browsershots，可以测试浏览器兼容性。 10.使设计有灵活性和可维护性 一个好的网页设计师可以确保以后可以很容易更新或修改网站。设计一个有可塑性、易于维护的网站，是一个伟大网页设计师的标志。让你的工作尽可能从结构化转向模块化。 网页设计这个行业是动态的，而且还很“年轻”。事情往往在短暂变化中。牢记这种思想，将推动建立更加灵活的网页设计。 掌握了这些技巧，在技术条件相差不大的时候，我们通过产品的体验设计，有效提升用户体验，让用户感觉更愉悦。