网页制作设计的冷知识

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： 网页制作 知识

深圳网站建设【shè】公司 帮助企【qǐ】业提升【shēng】网站【zhàn】形【xíng】象,彰显公司实力,PC+手机+微【wēi】信+小程序
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专【zhuān】属VIP的服务】24RX365 为您提供1对【duì】1的专【zhuān】属VIP服务

　　网页制作设计的冷知识

　　网页设计的【de】冷知识：例如用UI框架框【kuàng】架【jià】：我知道你想做自己【jǐ】的设计，但太多太多【duō】的事实告诉我们，对于绝大部分【fèn】设【shè】计师来说【shuō】，采用某个设【shè】计【jì】框架或者说是系统(比如最近大热的MD)设计出来【lái】的东西会【huì】更【gèng】漂亮，坑会更少，拓【tuò】展性会更【gèng】强。下面是更多相关内【nèi】容【róng】，希望【wàng】对您有【yǒu】所帮【bāng】助。

　　1. 用UI框架框架吧!

　　我知道你想【xiǎng】做自己的设计，但太【tài】多太多的事【shì】实告诉我们，对于绝大部分设计【jì】师来说，采用某个设【shè】计框架或【huò】者【zhě】说是系【xì】统(比如【rú】最近大热【rè】的MD)设计出【chū】来的东西【xī】会更漂亮，坑【kēng】会更少，拓【tuò】展性会更强，你做【zuò】得轻松【sōng】，程【chéng】序员【yuán】宝宝开发起来也【yě】更欢快，即便不【bú】能完全遵守，也需【xū】要对规【guī】范【fàn】熟悉。

　　2. 少整自己的字符排版规则

　　跟上面那个问题有【yǒu】点相似，为什么不直【zhí】接【jiē】使用平【píng】台规范建议的【de】规【guī】则【zé】而要自己整呢?当然，这发上追波去会显得比较酷，但是你真的有必要【yào】因【yīn】为这个【gè】而去折磨开【kāi】发6个月吗?

　　3. 只选5个颜色然后用到老

　　仔细【xì】选【xuǎn】好【hǎo】之后就坚持下来，不要再多加!不【bú】要再多加!不要再多加!重要的事情说三遍!这只会【huì】让你界【jiè】面【miàn】看起来更糟【zāo】!

　　4. 透明度别调那么狠好吧

　　好【hǎo】看是好看啊，关键是除了你【nǐ】自己没人知道【dào】里面写了什么。(嘿嘿，好看【kàn】就【jiù】行，让开发自己改【gǎi】去哈哈【hā】哈哈)。

　　5. 对称真的真的没有那么重要

　　不要用【yòng】这一点来彰显你一丝不苟追求完美【měi】的个性。肯【kěn】定不止是我【wǒ】，为了让接下来的选项【xiàng】也是四个字，连【lián】语义【yì】通畅都不管了，这是一【yī】种【zhǒng】病，设计昏迷候【hòu】群症。对齐很重【chóng】要，对称【chēng】不是，不要再在【zài】这里浪费时间了【le】，用【yòng】上【shàng】最简洁、最正确的词语就OK了。

　　6. 找【zhǎo】出用了thin或ultra-thin的【de】字体然后统【tǒng】统给调回【huí】来!

　　你也不再需要这两种style了，找出来删了吧谢谢。

　　7.你的设计不是一件艺术品

　　你是一个【gè】发育健全的【de】设计师，你应【yīng】该知道【dào】你现在“画”的东西跟【gēn】以往你在学【xué】校里面【miàn】做的作【zuò】业不一样，现在你的【de】设计是用户用来操作【zuò】并达成自己目【mù】的的一个工具。贵司【sī】肯定不【bú】会顾毕加索来画UI做交互，这【zhè】并不是毕【bì】加索【suǒ】不懂美，只是他不够【gòu】“实际”。当然漂亮【liàng】美丽是必须的【de】，但与艺术品不同的【de】是，你【nǐ】首要的目标是让产品【pǐn】性能更好、用起来简单、能为用【yòng】户创造【zào】价【jià】值。

　　8. 填满一切正是丑的起源

　　现在设备【bèi】的【de】屏幕【mù】是越来越【yuè】大了，但这【zhè】并不意味着【zhe】你要填满【mǎn】一切空间。填【tián】满一切正正是一切丑的起【qǐ】源啊兄弟!!

　　9. 留白要有意义

　　老司机们所说的呼吸感并不是玄学，快去研究研究吧!

　　网页制作设计内页设计技巧

　　如何保持网站风【fēng】格的一致，是进【jìn】行【háng】内页设计过【guò】程中考虑的重要【yào】方面，根据我的经验，您可以【yǐ】尝试【shì】以下几种【zhǒng】设【shè】计方【fāng】式：

　　1、结构的一致性：我【wǒ】们知道【dào】，网站结构是网站风格统一【yī】的重要【yào】手段，包括网站【zhàn】布局【jú】、文字排版、装饰性元素出现的位置、导【dǎo】航【háng】的统一、图片【piàn】的【de】位置等等，我【wǒ】们要强【qiáng】调网站【zhàn】标志性元素的一致性，即网站或公【gōng】司名称【chēng】、网站或企业标志、导航及辅助导航的形式及【jí】位【wèi】置【zhì】、公司联系信息等【děng】，这种方【fāng】式【shì】是目前网站普遍采用的【de】结构，一方面减少设计、开发的工作量【liàng】，同时【shí】更【gèng】有【yǒu】利于【yú】以后的网站维【wéi】护与更新。

　　2、色彩的一致性：方式是【shì】保持站点主体色【sè】彩的一致【zhì】，只改【gǎi】变局部【bù】色块，优点是一个【gè】独特色彩【cǎi】的网站会【huì】给人留【liú】下很深刻【kè】的印象，因为【wéi】人的【de】视觉【jiào】对色彩【cǎi】要比布局更敏【mǐn】感，更容易在大脑【nǎo】中【zhōng】形成记忆符【fú】号。在色彩的【de】一致性中，我们强调的是如果企业【yè】有自身的CI形象，最【zuì】好在互联网中沿袭这个形象，给观众网上网下一致的感觉，更有【yǒu】利于【yú】企业形【xíng】象【xiàng】的树立。一个建议是选取一两种主【zhǔ】要色彩，几种【zhǒng】辅【fǔ】助色彩。

　　3、利【lì】用【yòng】导航【háng】取得统一：导航是网站的一项重要组成部【bù】分，一个出色的富有【yǒu】企【qǐ】业特性的导【dǎo】航将会给人【rén】留下深刻的【de】印【yìn】象，比如将标志的【de】形【xíng】态寓于【yú】导航【háng】之中，或将导航设【shè】计在整个网站布局之中等等不一而【ér】足，花点【diǎn】力【lì】气在导航上，也会设计出一【yī】个出色的站点。

　　4、特【tè】别元【yuán】素的一致性：在网页设【shè】计 中，个别具有特色的元素(如【rú】标志、象征图形、局【jú】部【bù】设【shè】计等)重复【fù】出现，也会给访问者【zhě】留下深刻印象。比如网【wǎng】站结【jié】构在某一点【diǎn】上的变化，由直线变为圆弧、暗色【sè】点缀的亮色、色彩【cǎi】中的补色等等。

　　5、利用图像取得统一【yī】： 网页【yè】中的图像在使用上一定要甚之又甚，尤【yóu】其是一【yī】些【xiē】动画，网页【yè】中充斥着各【gè】种可【kě】有【yǒu】可无的【de】动画，而这些动画根本与本企业【yè】内容无关!认真【zhēn】检查网页中的动【dòng】画，将【jiāng】没用的删掉!这【zhè】里我们【men】所说的利用图【tú】像【xiàng】取得统一，决不是在每页中放置【zhì】几【jǐ】个动【dòng】画!而是作为网站【zhàn】结构【gòu】一部分的局部图像，根据【jù】网【wǎng】页内容的【de】不同，配以相应的图像或动画，从而给浏览【lǎn】者形成页面的连续性。

　　6、利用背景取【qǔ】得统一：从技术上而【ér】言【yán】，网页背景包【bāo】括背【bèi】景色和背【bèi】景图像两种，一般来【lái】说【shuō】，我们【men】并不提倡使用背景图像【xiàng】，而使用背景色或【huò】色【sè】块【kuài】。原【yuán】因【yīn】很【hěn】明显，第一，下载速度，背景【jǐng】色的下载速度忽略不计【jì】，而背景图像就得【dé】根据图像字节大【dà】小下载了;第【dì】二【èr】，显示效【xiào】果，经常看到国内一【yī】些网站设有背【bèi】景图【tú】像，或者是公司【sī】的厂房、办公大【dà】楼，或者是产品图片，甚至是某某【mǒu】人物的【de】照片，使得前面的文字很难辨认!

　　简单的网站设计技巧

　　一、首页设计

　　网站首页是企业网上的虚拟门面，正因为是虚【xū】拟【nǐ】的就【jiù】好比【bǐ】是“无【wú】纸的【de】印刷品”。既然【rán】如此，精良和专业网站【zhàn】的设计【jì】，如同制作精美的印刷品，会大大刺激消费者(访问者)的购【gòu】买欲望，若设计【jì】得很毛糙不精细，您肯定【dìng】会怀【huái】疑其内容的真实性和可【kě】靠性，从而【ér】对其产品【pǐn】或【huò】服【fú】务产生质疑。因此，首页的【de】设【shè】计【jì】决不能敷【fū】衍了事、马马【mǎ】虎虎【hǔ】。

　　一般来【lái】说，网站首页的形式不外【wài】乎有【yǒu】两种，一种是纯粹的形象展【zhǎn】示【shì】型，这种类型文字【zì】信息较少，图像【xiàng】信息较多，通过艺术造型和设计布局，利用一系列与公司形象和产【chǎn】品【pǐn】、服务有关的图像【xiàng】、文字【zì】信息，组成一幅生动的【de】画面，向浏览者展示一种【zhǒng】形【xíng】象【xiàng】、一【yī】个氛围，从【cóng】而吸引浏【liú】览者进入浏览。另一种是信息【xī】罗列型，一般的大【dà】、中【zhōng】型企业网【wǎng】站和门户网站【zhàn】常用的【de】方式【shì】，即在首页中【zhōng】就罗列出网站的主要内容【róng】分类【lèi】、重【chóng】点信【xìn】息、网站导航、公司【sī】信【xìn】息等等，设计人员在结合公司的CI手册，企业标志、字体及用色【sè】标准【zhǔn】中要【yào】注【zhù】意【yì】使用这【zhè】些语言符【fú】号来表达一种【zhǒng】独特的企【qǐ】业【yè】信息。

　　二、色彩搭配

　　网页中最难【nán】处【chù】理的也就是色彩【cǎi】搭配的问【wèn】题了。如【rú】何运【yùn】用最简单的色彩表达最丰富【fù】的含【hán】义，体【tǐ】现企业形象是网页【yè】设计【jì】人员需【xū】要【yào】不断学【xué】习、探索的课题。如何进行色彩搭配是一门学问，下【xià】面的一些方法【fǎ】是我在实践过程中的体会【huì】，希望能够为您【nín】起到一【yī】定【dìng】的【de】参考作用。

　　1、运【yùn】用【yòng】相同色系色彩：所谓相【xiàng】同色系，是指【zhǐ】几种色彩【cǎi】在360°色相【xiàng】环上位置十【shí】分相近，大约在45°左右或同一色彩【cǎi】不同明度的几种色【sè】彩【cǎi】，如：这种搭配【pèi】的优【yōu】点是易于使【shǐ】网页色彩趋【qū】于一致，对【duì】于这种用色方【fāng】式容易塑造【zào】网页和谐统一【yī】的氛围，缺点是容易造成【chéng】页面的单调。

　　2、运用【yòng】对【duì】比色【sè】或互【hù】补【bǔ】色：所谓对比色，是指色相环相距较远，大约在100°左右，视【shì】觉效果【guǒ】鲜亮【liàng】、强烈，而互补色则是色相环上【shàng】相距【jù】最远的连种色彩，即相距180°，其对【duì】比关【guān】系最强【qiáng】烈、最富有刺激性，往往使画面十分突出，如：，这种用色方式【shì】容易塑造【zào】活【huó】泼、韵动的网页效果，特别适合体现轻松【sōng】、积极的素材的网站【zhàn】，缺【quē】点是容易造成【chéng】色彩的花，使用【yòng】中注意色彩【cǎi】使用【yòng】的度【dù】。

　　3、使用过渡色：过渡色能够神【shén】奇地将【jiāng】几种不协调的色彩【cǎi】统一起【qǐ】来，在网页中合理【lǐ】地使【shǐ】用过【guò】渡色能够【gòu】使你的色彩【cǎi】搭配技术更【gèng】上一【yī】层楼。

　　三、版面布局

　　一般来说，企业网站首页【yè】的布局比【bǐ】较灵活，着重设计，这里我【wǒ】所说【shuō】的布局主要是指内页的版面【miàn】布局【jú】。中【zhōng】、小型企业网站的内页布局一般比较简【jiǎn】单，即内页的一栏式版【bǎn】面布局，从排版【bǎn】布局的【de】角度而言【yán】，我【wǒ】们还可【kě】以设计成等分【fèn】两【liǎng】栏式、三栏式、多栏式，不【bú】等分两栏【lán】式、三栏式、多栏式等等【děng】，但因【yīn】为浏览器宽幅【fú】有限【xiàn】，一般不宜设计成三【sān】栏以上【shàng】的布【bù】局。

　　在版面布局中主【zhǔ】要是考虑【lǜ】导航、必【bì】要信息与正文之间【jiān】的布局关系。比较多的情况是【shì】采【cǎi】用顶部【bù】放置必要的【de】信息，如公司名称、标【biāo】志、广告条【tiáo】以及导航条【tiáo】，或将导航条放在左【zuǒ】侧而右侧是正【zhèng】文等等，这样的【de】布局结构【gòu】清【qīng】晰【xī】、易于使用。当然，您【nín】也可以尝试其他布【bù】局【jú】的变化形式。

　　网页制作设计页面组成

　　网站的页面组成，网站一般包括以下几部分：

　　导入页：也就【jiù】是输入【rù】网址时第一时间呈现在浏览者【zhě】眼前的页面，它只是起【qǐ】到【dào】一【yī】个【gè】引【yǐn】导【dǎo】的【de】作用【yòng】，没什么实际内容。导入页【yè】可有可无，要看企业的具体需【xū】求。

　　首【shǒu】页：网站的【de】门面【miàn】，这是【shì】给浏览者的【de】第一印象，也是客【kè】户体验【yàn】的最佳表现机会。如同公司【sī】的整体形象，特别【bié】注【zhù】重【chóng】设计和规划。

　　框【kuàng】架【jià】页：网站的主要【yào】结构页面，又称次首页、内页，大【dà】型网【wǎng】站【zhàn】往往框架页即首【shǒu】页，如一些【xiē】门【mén】户网站【zhàn】。框架页主要【yào】是【shì】网站内部主要【yào】栏目的【de】首页，讲究风格的一致性，并与网站整体风格呼应。

　　普通页【yè】：网站【zhàn】主要的承载信息的页面，设计要求不【bú】高，但要求链接准确、文字【zì】无误、图【tú】文并茂，并【bìng】沿袭【xí】网【wǎng】页【yè】的风格。

　　弹出页：一般用于广【guǎng】告、新闻、消息、到其他网站的【de】链接等【děng】等，一般【bān】用的很少。

　　通过上面的简单概述，我们可以总结出：

　　从功能上【shàng】来看，首页【yè】主要承担着【zhe】树【shù】立企业【yè】形象(当然【rán】不仅仅是首页)的作【zuò】用;框架页在导航方面起【qǐ】着重要【yào】的【de】作用，比【bǐ】如各【gè】栏目内【nèi】部主要内【nèi】容【róng】的介绍，都可以在框架页【yè】中体现再进入普通页，择其需要而浏【liú】览;普通页则是主要的信息页面;至于弹出页，建议您不是【shì】必要【yào】，最好不要用【yòng】。

• 上一章：网页设计的布局形式感技巧
• 下一章：制造企业网站和服务企业网站设计的根本...