有招 - 你的生活妙招指南_妙招网

标题: 手把手教你学网站设计-网页设计10大要诀（上） [打印本页]

作者: 小橙像视 时间: 2025-5-19 09:52
标题: 手把手教你学网站设计-网页设计10大要诀（上）
这篇文章想与大家分享的是：网页设计10大实战要诀，为了便利明白，今天以网页设计中大概会用到的一种叫“着陆页”的网页为例。
　　当前，互联网期间已经相对比力成熟，对于设计行业来讲，网站设计也变成企业的标配设计之一。官方网站设计好，是不是就到此为止了呢？不，我们要让这个网站被人搜刮到，就像伞兵着陆一样，须要制作一个让搜刮引擎看到的页面，这就是所谓的着陆页。那么设计着陆页有没有什么讲求的？和平凡官网和电商主题页设计有什么不同呢？现在，本人就带各位朋友了解一下设计着陆页须要留意的10个核心要点。
　　1.第一，尺寸设置
　　设计着陆页，首当其冲的就是尺寸。尺寸，顾名思义，就是说的页面的高度和宽度，而依据现实须要，又分为不同载体的尺寸须要顺应。
　　遍及一个小常识，尺寸我们用分辩率来体现，分辩率的单位是像素，也就是px，英文是pixel，在屏幕上展现的尺寸平日就用px体现。px值须要设置72px，多了和少了都不可，而印刷才须要设置300px分辩率，共同米和毫米等这样的计量单位。
　　接着说，依据载体不同，尺寸也大致分为电脑版，手机版两种。这两种尺寸是有区其余。比如，电脑版侧庞大屏幕展现体验，手机版侧重局促屏幕显示体验，因为在小屏幕手机去看大尺寸的页面，字体会小的令人看不见，所以须要设计两个尺寸，或者，假如想两个尺寸可以通用，就要有意识的把电脑版的字号放大许多，设计区域也要居中紧凑的排布。
　　平日，设计页面的宽度比力轻易，因为电脑屏幕的宽度我们已知，而页面内容说不好，须要依据现实内容调解，所以先确定页面宽度。
　　页面的宽度，取决于当前全球用户所使用的电脑显示器屏幕的尺寸。
　　一样平常来说，假如采用无自顺应程序去制作的页面，须要非分特别思量用户屏幕的可视规模，特别是小屏幕的笔记本电脑的展现效果。
　　因为页面没有自顺应本领，也就是没有依据屏幕的巨细来缩放页面内容的话，就会看不全核心设计区域的内容。平日市面上笔记本电脑的宽度，最小在1200像素阁下，所以，无自顺应的页面，笔墨设计区域要把握在1000px~1200px以内，而旁边的延长宽度，是为了大屏幕而预备的，假如没有阁下延长区域，大屏幕电脑看上去就很难看，页面就显得很小。
　　再说一下页面高度的设置。页面高度，因为是依据内容多少而定，但不发起凌驾3屏，因为页面假如太长，一是会导致客户没有耐心看完，二是会导致页面质量太重而加载速率慢，影响用户体验，所以高度在3000px以内为佳。
　　2.第二，页面程序
　　设计页面再好，没有好的程序支撑同样白搭。谈网站设计，岂论是官网设计、网页设计照旧电商页面设计，设计职员都须要懂技术道理，不然很难将设计很好的完善落地。就像呆板人，只有一副悦目的皮囊，是无法运作的，须要程序去支撑，才气动起来。那么先说一下，网站用的哪些程序做的。
　　做页面，过去平日使用的是静态HTML格式说话编写，动态效果会用到JAVA，以及C+说话，不外那些都已经逾期了，假如但凡想做动态页面，有的人会说使用FLASH制作网页，然则FLASH有许多硬伤，同样已经没人用FLASH做页面，而是专注用FLASH做动画视频了。那么现在平日做网页都用什么程序写呢？谜底是HTML5。
　　这个HTML5简称H5，是大概3年前由微软发起，后来飞速成长了几年，到2014年才被广泛运用。H5的鼓起，无疑对网站开发起到了火上浇油的作用，网页的设计大量的引用H5动态设计，那么H5有哪些利益呢？H5首先是解决了动态的题目，让页面活起来了。过去，要实现动态，简朴的可以用JAVA实现，庞杂的动态则须要用FLASH去搭配完成，再嵌入到页面之中。那样做的缺点很显着，一个是FLASH占的质量比力大，轻易导致用户打开页面卡顿，从而封闭网页，二是因为FLASH是写逝世的，因此搜刮引擎无法抓取FLASH中的关键词，进而导致网站很难被搜刮引擎检索到，这是FLASH站点的核心痛点。
　　所以，许多客户会忍痛选择了全静态页面作为网站的官网，固然那样会缺少活力。所以，设计职员会思量到场GIF动画和简朴的导航JAVA点击动态效果，固然，那只是简朴的动态，根本没有革命性的动态去发挥余地。
　　随着互联网化的新数码期间的到来，智能手机已经越来越广泛，每个人都用用N个移动设备，已经不仅拥有粗笨的台式机，而更乐意将各类终端移动办公娱乐。比如手机、平板、PC和TV，须要无线互联，因而出现了云技术，连接了所有的移动终端设备，让人和设备永久分不开。说这些的用意，在于夸大各终端作为载体的界面，对设计职员和程序职员的开发影响。
　　拿到一个网页设计需求后，首先看这个页面的实现情势，是单一JPG图片嵌入，照旧复合HTML图文程序，这两种设计起来是两个思路。假如是JPG情势，那么侧重思量的就是页面的单张图片质量题目，假如是HTML情势，就要侧重思量动态实现和图文精准定位题目。
　　当一个JPG页面做好之后，接下来就是须要思量切图题目，哪些图是确定要切出来的？按钮、注册表、动态区域的底图，是须要零丁切出来的。假如是一个HTML页面，假如区域划分功效比力多，就都须要切图切出来，在PS中分为一个个模块，切成PNG图片之后，再用HTML对象写入说话，把切片嵌入网页，再调试，调试进程中，会出现各类诸如对齐这样的题目。HTML的制作时光和精力，都比纯JPG页面要大许多。假如要用到动态，比如动画效果，须要零丁对动态对象写说话，让它动起来，然后不停调试，更庞杂一些。因此，现在最常用的页面设计照旧JPG图片的情势做的。那么，详细要用哪种程序做呢？我以为，持续用时光比力久的页面平日用HTML或H5设计，一次性的或者短期运动推广页面平日用JPG情势，因为相对来说更快。
　　3.第三，页面逻辑
　　谈到页面页面逻辑，我想打个比方。比如你有很悦目的外表，很悦目的衣服，很悦目的身段，然则，假如头和身材的比例搞错了，严肃吗？实在，页面也是有“身段比例”的。页面的逻辑，通俗来讲，实在就是说的，页面上放啥，放多少，先放啥后放啥，让人先看啥后看啥，诸如这些题目。
　　一个好的页面逻辑，是贯串文案、图片的主脉络，没有这条主线，就像大楼没有根基，不知道为什么要盖楼，会导致最后盖出来的楼歪歪扭扭，不知是什么东西，固然也不会悦目，所以，页面逻辑何其紧张不言而喻。
　　那么好，现在来讲一下如何来筹谋页面逻辑。你须要知道这个页面想要表达什么，想要转达给客户什么核心要素，分清楚一二三，级别不要太多，也不要试图表达太多，要知道，太多也没人看的完。思考过后，再将你的思路列到一个文档之中，再次梳理，删减掉那些客户不想看的，也不须要客户看的信息点，切记不要表达太多信息量，要简洁总结，层次感要计划出来。
　　4.第四，文案筹谋
　　当页面逻辑搞清楚之后，就可以进入到文案撰写的步骤了。平日，文案是有专人负责的，但有时光是由筹谋师或设计师来撰写的。关于文案，我的个人发起是，文案撰写，须要顺承页面表达的逻辑性，分身设计排版的美观性，最好有全局眼光，这样再往下执行的时光，才不会导致重复修正文案。一个好的文案，就像一个谋士，一个好的设计，就像一个将军，一个好的计谋，就像一个元帅，在发兵打仗之前，这三种本能机能的团队成员，最好能碰一碰，一起进行讨论，提高工作服从。
　　在文案的撰写进程中，须要注意的是，一言半语，主次分明，衬着主题，审慎描写。
　　5.第五，设计布局
　　当以上步骤做好，设计师就预备出马了。设计着陆页前，拿到文案和请求后，设计师要先将页面公道的布局。发起拿出一张白纸，画出页面的宽度和预期高度，再打开文案，对比文案，在纸上用笔勾勒一个布局图。就像排兵布阵，火枪手排在哪，弓弩手排在哪，骑手排在哪，笔墨排在哪，图片排在哪，首先要在大脑中有一个印象，做到胸中有数心不乱。
　　在布局页面时，要注意页面的“骨骼”。也就是说，分几大块，大致可分为，头部、躯干和底部。在头部和底部的设计中，大致我们应当有“模板”，就是依据官网页面的头尾来设置，平日做法是做的一摸一样，但有时光须要精简内容，究竟是着陆页，更突出的是运动主题。页面的“躯干”部分，是要再细分的，比若有三个运动，那么设计师就要分为三块来设计图文组合。
　　“躯干”的上部分，一样平常是采用一个大的主画面来表达，做过电商页面的都知道，这一块是画面的脸面，确定要做的炫酷，做出运动味道来。中部，也是主体部分，主要是将躯干的四肢公道的摆上去，井井有条，切忌紊乱无主次关系。下部分，平日是对本运动的细节描写和介绍，这部分不发起过于抢镜，让这部分处在配角的位置比力公道。
　　关于头、躯干、尾巴的关系分出来，再分躯干中的上中下，都分出来后，将笔墨大标题零丁摘出来，占位，再把运动描写与大标题做一个组合，然后再把要配的相应图片区域计划出来，根本上框架图就搭好了。搭好框架，再重复对比计谋逻辑进行检测，假如有不符适用户视觉习惯的布局，随时修正。
　　要留意的是，页面最好不要凌驾三屏，避免布局太长和细节太繁琐。
　　后面5大实战要诀会在下期讲述，想要了解的小搭档请继承存眷！

欢迎光临有招 - 你的生活妙招指南_妙招网 (https://www.yoozhao.com/)