搜索
©0538ec.com网站培训之《页面设计》核心内容：当前网站设计分析，网站设计中的细节把控，网站设计的标准，如何分析一个网站，产品对比与借鉴。DesignbyWangRuiQQ：70801126StartHereWebPageDesignDesignerORPageWorkerWEBSITESANDADVERTISING细节，标准没有标准，细节把握不好，就没有好的作品当前分析是什么制约我们的设计，为什么我们的作品长的都一个样，我们需要做什么！比较分析我们的市场客户群体都一样，难道我们的设计也要都一样？！！是什么制约了我们？——你的作品是网上的精品还是垃圾?!ContactUsWangRuiQQ:708011261客户想要那样的？我们还不够专业？我们不是大公司？我们的市场有问题？我们的建站程序有问题？我们的销售不专业？别的公司都在这么做？你能超越客户的“想”吗？你没有超越你自己干的好的人一般都不是科班出身的是你的能力选择了你现在所拥有的市场都是一样的，为什么不让市场倾向于你这点不容忽视，必须现在就得改变能谈到单子，制作是我们的事你只是在这个公司扮演着别的公司角色©0538ec.com我们的设计存在哪些问题？ContactUsWangRuiQQ:708011262（1）网站布局散乱，网页留白不合理，不能突出重点（2）导航设计栏目不够直观，醒目（3）网页配色不合理，风格过于单一（4）细节把握不足，不能做到数据显示跟网页整体的融合（5）没有统一的基本设计标准，过于随意（6）用户体验欠考虑（7）网站程序单一，程序本身的局限性过大（8）浏览器兼容问题（9）不能够真正理解客户的需求和在此基础上对作品加以改进（10）过于满足，不善于总结，学习©0538ec.com我们的设计存在哪些问题？ContactUsWangRuiQQ:708011263（1）网站布局散乱，网页留白不合理，不能突出重点网页栏目边界过于模糊，无法界定，栏目间隙过大或者过紧，人浏览网页的习惯一般是从的从左上到下的一个过程，应该把网站的重要栏目放在这些位置，栏目与栏目间掺杂着其他元素（不合理的边框，背景色或者其他元素）©0538ec.com（2）导航设计栏目不够直观，醒目，不够清晰导航字体颜色与导航背景颜色过于相似，让人难以区分导航字体颜色与导航背景颜色反差过大，刺眼不协调导航应适当有鼠标效果（如：鼠标经过变色，变背，翻转）我们的设计存在哪些问题？ContactUsWangRuiQQ:708011264（3）网页配色不合理，风格过于单一颜色过暗或过亮，细节处用色与网站整体颜色反差过大，网站设计布局配色过于单一，一个新的网站应该是一个新的开始而不是受之前网站的影响，如出一辙，在这方面应尽量突破避免©0538ec.com（4）细节把握不足，不能做到数据显示跟网页整体的融合一个网站的整体是由细节决定的，细节处理不好必然会影响整体效果，何为细节？？比如，网页中图片的质量（虚，不清晰，偏暗），栏目导航条过于呆板，用色不当，链接下划线，文章，产品条目前的箭头修饰等，产品图片背景色，鼠标效果我们的设计存在哪些问题？ContactUsWangRuiQQ:708011265（5）没有统一的基本设计标准，过于随意网站的宽度应该是多少，导航高度，导航字体应该是多大，用什么字体，网页栏目文字大小，用什么字体，网站中的英文字体用什么文字，哪些地方必须用文字，哪些地方必须用图片来替代文字，网页文件应该怎么存放，css文件，js文件，图片文件，是不是有相应的文件夹来管理，网页代码是否完整整洁。©0538ec.com（6）用户体验欠考虑网页做的“好看”并不见得就有好的用户体验，比如链接窗口的弹出，“面包屑”导航的应用，网页打开速度，能否让客户马上看到他想看的我们的设计存在哪些问题？ContactUsWangRuiQQ:708011266（7）网站程序单一，程序本身的局限性过大的确是这样的，网站的功能在很大程度上决定了网站的样子，我们目前的网站数据和网站的表现是在一起的很难做到数据和表现的分离，所以我们急需要一套这样的程序：数据显示和样式是分离的想怎么控制显示就怎么控制显示©0538ec.com（8）浏览器兼容问题浏览器兼容的测试是必须的，主要测试范围是IE6，IE7，IE8，IE9（火狐）的测试，新的程序我们将会用新的布局方式DIV+CSS我们的设计存在哪些问题？ContactUsWangRuiQQ:708011267（9）不能够真正理解客户的需求和在此基础上对作品加以改进真正能抓住客户的需求，但不要盲从于客户©0538ec.com（10）过于满足，不善于总结，学习到目前为止，你有自己觉得不错的作品吗？你认为不错的，客户认可吗？客户认可的，你认可吗？要善于总结学习页面设计PageDesignContactUsWangRuiQQ:708011268网页尺寸的设计：宽：910px-1004px高：不要超过三次滚屏网页设计中的画布设定：分辨率为72像素/英寸设计中的网页字体问题：（中文）尤其注意“设置消除锯齿的方法”选项要选择“无”宋体是最常用的网页字体，12px是中文操作系统可以表现的最小的字体，内容文字大小一般用两种，12px或14px，导航字体用黑体或者加粗的宋体，除特殊网站外，不得用其他字体，字体大小根据导航条大小来定，导航条高度一般在30px-45px为佳©0538ec.com页面设计PageDesignContactUsWangRuiQQ:708011269设计中的网页字体问题：（英文）其中英文字体最小表现为10px字verdana字体是大多数网页使用的英文字体，比起arial字体更美观和均衡。©0538ec.com页面设计PageDesignContactUsWangRuiQQ:7080112610效果图：网页效果图中的网页字体，虽然在最后制作网页的过程中不需要裁剪。但做为设计中不可分割的重要元素，一定要认真使用，因为你不单要设计文字与整体网页的关系，还要设计字体的样式表颜色，文字的间距。©0538ec.com网页色彩：页面主色调，网页都应该有特定的2-3种主色调，辅助色调不适宜太多。文字的色彩，文字的颜色要便于阅读，文字的超链接要明确(下划线、变色)，背景颜色切勿与文字反差太小且杂乱。页面设计PageDesignContactUsWangRuiQQ:7080112611关于网页布局：基本的两种，居中对齐居左对齐，避免不同寻常的令人眼花缭乱的设计、密密麻麻的内容，特别要注意的是整齐，和透气。太过靠近边线，也给人拥挤的感觉。©0538ec.com设计从哪里入手：A先定下你的网页布局形式B然后定页面宽度，拉出辅助线。C再把基本的文字内容输入进来，要用的图片素材拷贝到指定的目录来。D确定需要表现的文字主题，和使用的图片，发挥自己的能力，完成设计头部（这个是重点）E设计文本区域的头部F布局剩下的内容，调整和头部的关系。G设置文字样式，行距，调整细节。页面设计PageDesignContactUsWangRuiQQ:7080112612设计的可制作性（网页实现）：不要做天马行空的设计，在做网页设计的时候，脑子里一定要时刻想着，你做的这个设计是不是可以在网页中表现出来，会不会有表现上的差错，是不是给制作带来了麻烦。例如这个作品是不是在给制作增加难度，并且对于修改图片中的文字，提出了苛刻的要求。©0538ec.com页面设计PageDesignContactUsWangRuiQQ:7080112613photoshop使用习惯：1、PSD文件按区域把图层打包放文件夹中并对图层文件夹命名,（这个比较重要，养成了这个习惯，不单方便你以后的修改，并且也可以使你的同事能快速的接替你的工作）2、去掉没有用的隐藏层，合并可以相关图层。（减轻计算机的负担，加快制作速度）3、所有网页文字放在最上面的文件夹里。（网页文字就是需要制作成网页字的文字）©0538ec.com页面设计PageDesignContactUsWangRuiQQ:7080112614网页设计基本准则：设计必须是完整的，不能留有空白的，需要表述的部分。每个人的设计风格不径相同，但一个好的设计是最起码应该是细致的。©0538ec.com网页设计WebPageDesignContactUsWangRuiQQ:7080112615清晰，统一的导航：导航系统必须清晰，他们应该和站点的其它内容用不同的颜色搭配以便在网页上突出出来，同时，每个页的导航系统应该完全一致。©0538ec.com导航深度不超过三级：用户需要点三次才能找到自己想要的内容仍然太多，那种一级一级下潜的导航菜单是令人生畏的，很多人会产生进去以后便找不到路回来的恐惧。网页设计WebPageDesignContactUsWangRuiQQ:7080112616导航链接中必须包含文字：为了美观，许多人喜欢图片按纽式的导航链接，如果您坚持这样做，也无可厚非，但一定在图片上同时加上文字，让文字体现该链接的含义©0538ec.com必须有纯文本版本的站点地图：当用户在您的令人眼花缭乱的站点导航中彻底迷失的时候，纯文字版的，简单直接的站点地图还可以救急，站点地图可以帮助用户快速找到他们想要的内容，这是对导航系统的补充，甚至对有些站点来说，比导航系统更有效。另外，纯文本版的站点地图非常容易被搜索引擎抓取并以此遍历您的整个站点。网页设计WebPageDesignContactUsWangRuiQQ:7080112617必须有面包屑导航条：面包屑导航（BreadcrumbNavigation）这个概念来自童话故事汉泽尔和格雷特尔，当汉泽尔和格雷特尔穿过森林时，他们在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路，所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。©0538ec.com每页都有自己的标题：许多企业网站的所有页的标题都是企业的名字或者一句口号，这会让用户不知道他们访问的当前页是说什么的，每页都应有一个和本页内容匹配的标题，这样，即使用户打开了很多窗口，仍然可以通过标题知道哪一页是说什么的。网页设计WebPageDesignContactUsWangRuiQQ:7080112618任何页都有一个链接指向首页：人们进入一个陌生的地方，当感到迷失或不安的时候，会立刻想到返回入口位置，访问者进入您的网站也是这样，每页都有一个指向首页的链接可以帮助用户在感到迷失的时候，迅速返回入口重新开始。©0538ec.com页面不可过分拥挤：不要象现在的某些门户网站那样，将令人眼花缭乱的信息塞满首页，即使您必须放那么多内容，也要留出足够多的空白和边界，否则用户会觉得很累，Web页面的媒介是屏幕，不是纸张，您实在没有必要去节省屏幕的空间，让内容之间宽松地分布在页面上，给用户以闲适感。网页设计WebPageDesignContactUsWangRuiQQ:7080112619用不同色彩标识未访问和已访问过的链接：Web公认的配色为，未访问过的链接使用蓝色（Blue），访问过的链接使用紫色（Purple），但您可以根据您全站的色彩搭配设定自己的配色，只要保持全局一致即可。©0538ec.com使用所有人都可以正确显示的字体：一定不要使用生僻或美术字体，您的访问者使用和您不同的系统，可能是不同版本的Windows，可能是Mac机，或Linux甚至掌上电脑，您无法保证在您这里正常显示的某种字体，在用户那里也正常显示，尽可能使用标准字体，并在不同环境下进行测试，保证您的字体不会给任何人带来麻烦。网页设计WebPageDesignContactUsWangRuiQQ:7080112620除非真正必要，否则不用新窗口打开链接：自动用新链接打开窗口常常让很多人生气，因为他们的桌面上会有几十个开启的窗口。©0538ec.com使用所有人都可以正确显示的字体：一定不要使用生僻或美术字体，您的访问者使用和您不同的系统，可能是不同版本的Windows，可能是Mac机，或Linux甚至掌上电脑，您无法保证在