网站设计培训

©0538ec网站培训之<页面设计>中心内容：当前网站设计分析，网站设计中的细节把控，网站设计的规范，如何分析一个网站，产品对比与自创。DesignbyWangRui：70801126StartHereWebPageDesignDesignerORPageWorkerWEBSITESANDADVERTISING细节，规范没有规范，细节把握不好，就没有好的作品当前分析是什么制约我们的设计，为什么我们的作品长的都一个样，我们需求做什么！比较分析我们的市场客户群体都一样，难道我们的设计也要都一样？！！.是什么制约了我们？——他的作品是网上的精品还是渣滓?!ContactUsWangRui:708011261客户想要那样的？

我们还不够专业？

我们不是大公司？

我们的市场有问题？

我们的建站程序有问题？

我们的销售不专业？

别的公司都在这么做？他能超越客户的“想〞吗？他没有超越他本人

干的好的人普通都不是科班出身的

是他的才干选择了他如今所拥有的

市场都是一样的，为什么不让市场倾向于他

这点不容忽视，必需如今就得改动

能谈到单子，制造是我们的事

他只是在这个公司扮演着别的公司角色©0538ec.我们的设计存在哪些问题？ContactUsWangRui:708011262〔1〕网站规划散乱，网页留白不合理，不能突出重点

〔2〕导航设计栏目不够直观，醒目

〔3〕网页配色不合理，风格过于单一

〔4〕细节把握缺乏，不能做到数据显示跟网页整体的交融〔5〕没有一致的根本设计规范，过于随意

〔6〕用户体验欠思索〔7〕网站程序单一，程序本身的局限性过大

〔8〕阅读器兼容问题

〔9〕不可以真正了解客户的需求和在此根底上对作品加以改良

〔10〕过于满足，不擅长总结，学习©0538ec.我们的设计存在哪些问题？ContactUsWangRui:708011263〔1〕网站规划散乱，网页留白不合理，不能突出重点

网页栏目边境过于模糊，无法界定，栏目间隙过大或者过紧，人阅读网页的习惯普通是从的从左上到下的一个过程，应该把网站的重要栏目放在这些位置，栏目与栏目间掺杂着其他元素〔不合理的边框，背风光或者其他元素〕©0538ec〔2〕导航设计栏目不够直观，醒目，不够明晰

导航字体颜色与导航背景颜色过于类似，让人难以区分

导航字体颜色与导航背景颜色反差过大，刺眼不协调

导航应适当有鼠标效果〔如：鼠标经过变色，变背，翻转〕.我们的设计存在哪些问题？ContactUsWangRui:708011264〔3〕网页配色不合理，风格过于单一

颜色过暗或过亮，细节处用色与网站整体颜色反差过大，网站设计规划配色过于单一，一个新的网站应该是一个新的开场而不是受之前网站的影响，如出一辙，在这方面应尽量突破防止©0538ec〔4〕细节把握缺乏，不能做到数据显示跟网页整体的交融

一个网站的整体是由细节决议的，细节处置不好必然会影响整体效果，何为细节？？比如，网页中图片的质量〔虚，不明晰，偏暗〕，栏目导航条过于呆板，用色不当，链接下划线，文章，产品条目前的箭头修饰等，产品图片背风光，鼠标效果.我们的设计存在哪些问题？ContactUsWangRui:708011265〔5〕没有一致的根本设计规范，过于随意

网站的宽度应该是多少，导航高度，导航字体应该是多大，用什么字体，网页栏目文字大小，用什么字体，网站中的英文字体用什么文字，哪些地方必需用文字，哪些地方必需用图片来替代文字，网页文件应该怎样存放，css文件，js文件，图片文件，是不是有相应的文件夹来管理，网页代码能否完好整洁。©0538ec〔6〕用户体验欠思索

网页做的“美观〞并不见得就有好的用户体验，比如链接窗口的弹出，“面包屑〞导航的运用，网页翻开速度，能否让客户马上看到他想看的.我们的设计存在哪些问题？ContactUsWangRui:708011266〔7〕网站程序单一，程序本身的局限性过大

确实是这样的，网站的功能在很大程度上决议了网站的样子，我们目前的网站数据和网站的表现是在一同的很难做到数据和表现的分别，所以我们急需求一套这样的程序：数据显示和款式是分别的想怎样控制显示就怎样控制显示©0538ec〔8〕阅读器兼容问题

阅读器兼容的测试是必需的，主要测试范围是IE6，IE7，IE8，IE9〔火狐〕的测试，新的程序我们将会用新的规划方式DIV+CSS.我们的设计存在哪些问题？ContactUsWangRui:708011267〔9〕不可以真正了解客户的需求和在此根底上对作品加以改良

真正能抓住客户的需求，但不要盲从于客户©0538ec〔10〕过于满足，不擅长总结，学习

到目前为止，他有本人觉得不错的作品吗？他以为不错的，客户认可吗？客户认可的，他认可吗？要擅长总结学习.页面设计PageDesignContactUsWangRui:708011268网页尺寸的设计：宽：910px-1004px高：不要超越三次滚屏

网页设计中的画布设定：分辨率为72像素/英寸

设计中的网页字体问题：〔中文〕尤其留意“设置消除锯齿的方法〞选项要选择“无〞宋体是最常用的网页字体，12px是中文操作系统可以表现的最小的字体，内容文字大小普通用两种，12px或14px，导航字体用黑体或者加粗的宋体，除特殊网站外，不得用其他字体，字体大小根据导航条大小来定，导航条高度普通在30px-45px为佳©0538ec.页面设计PageDesignContactUsWangRui:708011269设计中的网页字体问题：〔英文〕其中英文字体最小表现为10px字verdana字体是大多数网页运用的英文字体，比起arial字体更美观和平衡。©0538ec.页面设计PageDesignContactUsWangRui:7080112610效果图：网页效果图中的网页字体，虽然在最后制造网页的过程中不需求裁剪。但做为设计中不可分割的重要元素，一定要仔细运用，由于他不单要设计文字与整体网页的关系，还要设计字体的款式表颜色，文字的间距。©0538ec网页颜色：页面主颜色，网页都应该有特定的2-3种主颜色，辅助颜色不适宜太多。文字的颜色，文字的颜色要便于阅读，文字的超链接要明确(下划线、变色)，背景颜色切勿与文字反差太小且杂乱。.页面设计PageDesignContactUsWangRui:7080112611关于网页规划：根本的两种，居中对齐居左对齐，防止不同寻常的令人眼花缭乱的设计、密密麻麻的内容，特别要留意的是整齐，和透气。太过接近边线，也给人拥堵的觉得。©0538ec设计从哪里入手：A先定下他的网页规划方式B然后定页面宽度，拉出辅助线。C再把根本的文字内容输入进来，要用的图片素材拷贝到指定的目录来。D确定需求表现的文字主题，和运用的图片，发扬本人的才干，完成设计头部〔这个是重点〕E设计文本区域的头部F规划剩下的内容，调整和头部的关系。G设置文字款式，行距，调整细节。.页面设计PageDesignContactUsWangRui:7080112612设计的可制造性〔网页实现〕：不要做天马行空的设计，在做网页设计的时候，脑子里一定要时辰想着，他做的这个设计是不是可以在网页中表现出来，会不会有表现上的过失，是不是给制造带来了费事。例如这个作品是不是在给制造添加难度，并且对于修正图片中的文字，提出了苛刻的要求。©0538ec.页面设计PageDesignContactUsWangRui:7080112613photoshop运用习惯：1、PSD文件按区域把图层打包放文件夹中并对图层文件夹命名,〔这个比较重要，养成了这个习惯，不一方便他以后的修正，并且也可以使他的同事能快速的接替他的任务〕

2、去掉没有用的隐藏层，合并可以相关图层。〔减轻计算机的负担，加快制造速度〕3、一切网页文字放在最上面的文件夹里。〔网页文字就是需求制形成网页字的文字〕©0538ec.页面设计PageDesignContactUsWangRui:7080112614网页设计根本准那么：设计必需是完好的，不能留有空白的，需求表述的部分。每个人的设计风格不径一样，但一个好的设计是最起码应该是细致的。©0538ec.网页设计WebPageDesignContactUsWangRui:7080112615明晰，一致的导航：导航系统必需明晰，他们应该和站点的其它内容用不同的颜色搭配以便在网页上突出出来，同时，每个页的导航系统应该完全一致。©0538ec导航深度不超越三级：用户需求点三次才干找到本人想要的内容依然太多，那种一级一级下潜的导航菜单是令人生畏的，很多人会产生进去以后便找不到路回来的恐惧。.网页设计WebPageDesignContactUsWangRui:7080112616导航链接中必需包含文字：为了美观，许多人喜欢图片按纽式的导航链接，假设您坚持这样做，也无可厚非，但一定在图片上同时加上文字，让文字表达该链接的含义©0538ec必需有纯文本版本的站点地图：当用户在您的令人眼花缭乱的站点导航中彻底迷失的时候，纯文字版的，简单直接的站点地图还可以救急，站点地图可以协助用户快速找到他们想要的内容，这是对导航系统的补充，甚至对有些站点来说，比导航系统更有效。另外，纯文本版的站点地图非常容易被搜索引擎抓取并以此遍历您的整个站点。.网页设计WebPageDesignContactUsWangRui:7080112617必需有面包屑导航条：面包屑导航〔BreadcrumbNavigation〕这个概念来自童话故事"汉泽尔和格雷特尔"，当汉泽尔和格雷特尔穿过森林时，他们在沿途走过的地方都撒下了面包屑，让这些面包屑来协助他们找到回家的路，所以，面包屑导航的作用是通知访问者他们目前在网站中的位置以及如何前往。©0538ec每页都有本人的标题：许多企业网站的一切页的标题都是企业的名字或者一句口号，这会让用户不知道他们访问的当前页是说什么的，每页都应有一个和本页内容匹配的标题，这样，即使用户翻开了很多窗口，依然可以经过标题知道哪一页是说什么的。.网页设计WebPageDesignContactUsWangRui:7080112618任何页都有一个链接指向首页：人们进入一个陌生的地方，当感到迷失或不安的时候，会立刻想到前往入口位置，访问者进入您的网站也是这样，每页都有一个指向首页的链接可以协助用户在感到迷失的时候，迅速前往入口重新开场。©0538ec页面不可过分拥堵：不要象如今的某些门户网站那样，将令人眼花缭乱的信息塞满首页，即使您必需放那么多内容，也要留出足够多的空白和边境，否那么用户会觉得很累，Web页面的媒介是屏幕，不是纸张，您真实没有必要去节省屏幕的空间，让内容之间宽松地分布在页面上，给用户以闲适感。.网页设计WebPageDesignContactUsWangRui:7080112619用不同颜色标识未访问和已访问过的链接：Web公认的配色为，未访问过的链接运用蓝色〔Blue〕，访问过的链接运用紫色〔Purple〕，但您可以根据您全站的颜色搭配设定本人的配色，只需坚持全局一致即可。©0538ec运用一切人都可以正确显示的字体：一定不要运用生僻或美术字体，您的访问者运用和您不同的系统，能够是不同版本的Windows，能够是Mac机，或Linux甚至掌上电脑，您无法保证在您这里正常显示的某种字体，在用户那里也正常显示，尽能够运用规范字体，并在不同环境下进展测试，保证您的字体不会给任何人带来费事。.网页设计WebPageDesignContactUsWangRui:7080112620除非真正必要，否那么不用新窗口翻开链接：自动用新链接翻开窗口经常让很多人生气，由于他们的桌面上会有几十个开启的窗口。©0538ec运用一切人都可以正确显示的字体：一定不要运用生僻或美术字体，您的访问者运用和您不同的系统，能够是不同版本的Windows，能够是Mac机，或Linux甚至掌上电脑，您无法保证在您这里正常显示的某种字体，在用户那里也正常显示，尽能够运用规范字体，并在不同环境下进展测试，保证您的字体不会给任何人带来费事。.页面设计〔补充〕PageDesignContactUsWangRui:7080112621面向行业设计：假设您是机械行业，运用粉红色系作页面的配色就不恰当，不同的行业有不同行业的风格，您的设计应符合这个行业的风格，不同行业的设计风格普通以不同行业的消费群的口味而定。©0538ec设计不可喧宾夺主：或者说，不可过度设计，您需求一直记住，用户来到您的网站，他们真正想看的是内容，而不是您的设计，何况，所谓设计，更多是一种客观的东西，随着这个世界的流行趋势而变，如今的设计多以简约为美。.页面设计〔补充〕PageDesignContactUsWangRui:7080112622设计遵照优雅原那么〔elegant〕:一些粗鲁的设计会让用户觉得遭到进犯，所谓优雅，举个例子，您的页面顶部放着20个无颜六色跑马灯在那里闪烁就绝对不是优雅，优雅的设计显得礼貌，有档次，有艺术感，让用户遭到尊重，且不可让用户觉得您是在对他们大喊大叫。©0538ec.页面设计〔补充〕PageDesignContactUsWangRui:7080112623设计遵守平和原那么〔peace〕:不要用过分剧烈的颜色或字体对比让用户感到不安，或者感到疲劳，好的设计是把本人的设计思想平平经常地展现出来，而不是总害怕人看不到，假设用户用户觉得不到您的设计,用心有觉得温馨，您就是在以平和的心态设计。©0538ec.页面设计〔补充〕PageDesignContactUsWangRui:7080112624合理安排页面重心，不可有头重脚轻