网站美工设计（美工设计干货）

版权声明：本文由作者“JOHN星山”原创的分享经验，“美工帮主“头条号纯手打文字编辑。今天的文章主要讲解电商页面排版设计，都是工作长期以来的积累，绝对走心，没有大篇理论，纯干货，希望能让你最直观的学到知识，能对你的工作有所帮助。前言这段时间做了很多页面，也看了很多优秀的同行作品，觉得该自我总结一下了。每次在做页面排版的时候总是在纠结产品怎么排好看，各个模块该怎么整理才显得协调，怎么样才显得档次高又有创意？在选用色彩和搭配风格的时候总是把握不好，电脑中的字体那么多又该怎么选择？怎么选择几何元素让产品更显的突出？还有怎么使用修饰元素为页面加分？这就是我每次做页面所遇到的问题，你是否也遇到过？现在我就把我遇到的这些问题的解决方法和大家分享一下，在分享的过程中如有不恰当的地方请大家指正并见谅。同时也希望这篇文章能对你有所帮助，或者能让你少走一些弯路，大家一起学习进步。好了，接下来我就给大家详细的讲解一下我是怎么从优秀的网页设计中参考电商排版的。接下来我会从6个方面具体讲述，1.板版；2.文字；3.风格；4.图形；5.元素；6.色彩我认为优秀的设计是将众多要素整合归纳成要点的产物，在这个移动互联网的年代有多种方式可以让你看到一些好的设计，而我们在看到这些优秀设计的时候要注意收集、整理、归纳、并灵活运用1.大牌气质排版觉得这个页面不错，我们可以从中汲取这个页面的优点来运用到自己的电商设计当中2.个性创意型排版当然，我们也可以把这些创意应用到我们的电商排版中总结：以上排版只列举了两种我们经常用到的排版方式，相对来说可能会有一点局限，不过我们需要知道的是，不论你运用哪种方法，或者参考哪个优秀的排版方式，我们都要灵活的运用它，知道为什么用这种方式？这种方式的好处在哪？能为我们的页面添加什么亮点？只有明白了这些，才能做出比参考更好的作品。有时候经验并非是好事，虽然它可能让我们更快的做出判断，但过去的判断在今天不一定合适，在这个互联网时代，我们需要不断的去尝试新的方法，拥有创作的激情和创新的动力，给自己压力和挑战，或许新的想法就出来了。我们在电商设计排版的时候，可能会忽略文字的合理选用，以及各个层级之间的关系。容易造成主题辨识不清，没有层次感，甚至影响整个页面的美观和用户浏览体验。下面我就来详细的讲解一下我是如何来处理这些文字关系的，以及怎么从网页设计中参考好的文字排版。我把文字排版分为几个板块：主标题、副标题、小标题、序号、内容说明、图示按钮等。1.文字主题层次2.文字的选用中文：我们常用的也就三个种类，毛笔字体，衬线体和非衬线体，它们的应用方式大家应该非常熟悉，毛笔字多用在中国风页面或者老板式当中，给人一直厚重韵味但又不失灵动飘逸的感觉，近年来也有很多时尚的页面中运用到了毛笔字体，抓人眼球，让人眼前一亮。衬线体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高。多用在书籍排版，还有一些大牌页面当中，非衬线字体通常有艺术性，看起来比较赏心悦目；而且非衬线字体种类比衬线字体多很多，因此选择余地也很大所以日常的设计当中非衬线字体应用较广。各种风格皆可应用。关于字体有很多大神已经讲的很多了，我这里具只简单的讲一下它们在页面中的应用。英文：英文也是分为衬线体与非衬线体两种，他们的应用效果大家可以自行百度，也可参照上方中文的解释，这里不多描述。总结：我们在做页面的时候，要灵活运用你电脑上的字体，给它放置在合适的位置，设计的时候要时刻确保文字之间层次条理清晰，重点突出，阅读性好。同时还要了解字体的应用，才能用对字体用好字体，为你的页面增分加彩。值得强调的是一个页面中不要出现三种以上的字体。在电商设计中，很多时候因为店铺的产品不同，或者店铺的风格调性不同，会被要求做中国风的页面、时尚简约的页面，还有时尚中国风的页面、还有活动型的页面、炫酷的页面等等一系列的风格要求，那么我们在做这些风格的时候该怎么表现呢？现在我来用一些案例给大家具体的分析一下。首先是中国风有的人说了，中国风是中国经过上下五千年的沉淀才独有的一种风格，外国的一些好的网页没有啊，别着急，虽然说不能参考国外的网页设计，我们还可以参考国内的一些网页游戏页面，话说现在国内的游戏网页做的好的也非常的多，这就为我们提供了很多优质的资源。2.时尚简约风格现在好多东西都在和时尚潮流挂钩，说白了就是时尚的东西有市场，很多人比较喜欢。电商页面做成时尚风相对来说要比中国风容易把控，因为我们可以找到很多参考。有人说时尚简约不就是几个字几个图片放在一块留白就是了，这么简单谁不会做啊！我想说的是一个好的时尚页面并不是那么简单，是要经过精心的设计思考的。下面我们就来看一下怎么从好的网页设计中取经的！总结：风格就讲了两个最具有代表性的中国风和时尚简约风的，因为我们要学的是方法，和怎么利用这些方法举一反三，而不是按照别人的方法来做。中国风页面总结出来就是要注意中国风元素的合理运用，放到页面当中可以与产品和其它东西融合好，适当的提高调性，不做俗咖。时尚风就是在能表达主题意思的前提下可以用一些英文做些变形或者排版，多想、多参考一些比较具有创意的排版方式，一定要条理清晰，疏密结合，突出重点。所谓修饰就是一些页面当中的小装饰，可不要小看这些装饰。比如现在家装消费理念就是”轻装修，重装饰“这种方式的好处就是容易适应时代的审美变化，便于更新，另一方面也容易提现房主的个性表现。当然电商网页排版也是一样，有了这些装饰之后不仅可以使得你的页面更有个性，还可以让页面细节更加的丰富，更加耐看。与其抱怨素材垃圾，不如花点时间做点小装饰。下面我来带大家看一下网页设计中是怎样运用这些小装饰和怎么才能更好的应用到电商排版中！总结：这些装饰的元素不仅仅只是：方框、短线、折线、三角几何、英文。其实还有很多比如曲线、图片、文字、色块、各种形状等等。甚至可以这样说整个页面所有的东西都是装饰，为什么这样说呢，我认为在一个页面当中所有的元素都是为了表达作者的主题内容而存在的，是为整个页面服务的，如果单个拆解开来那么所有的东西都是装饰或者是修饰元素。（以上的言论只是我的一家之言，不妥的地方欢迎批评建议）我们在做页面的时候可以妥善的合理的去应用这些装饰元素，不仅可以使整个版面条理更加清晰，也可以增加设计感与用户体验。用好这些装饰也可以使你的页面更加耐看，有深度，更有逼格！形状表示特定事物或物质的一种存在，表现形式如：长方形、正方形、圆形、三角形……………其实形状在现在网页设计当中应用的非常普遍，几乎到处都有它的身影，不过恰恰是因为太普遍了，我们才没有真正的了解并应用它，用的好的网页中形状可以使整个页面内容更加突出，更加吸引眼球，又兼有设计感。还可以填补排版上的不工整或者因为设计而有意留下的错误。现在我就来带大家看一下怎么从那些创意感十足的网页设计中取经。总结：不论我们在页面当中用了什么形状，其目的只有一个就是辅助排版或者使其它元素来更好的表达主题，增强版面视觉感知与冲击力。形状不仅仅指的是一些具体的形状，比如正方形、长方形等，还可以是一些具体的实物，不如上图的眼睛框，所以灵活运用才是王道。如果你拥有很好的色彩感知力，那么会是一个非常棒的技能，但现实中很多人对色彩不是那么敏感，从而做出的页面颜色搭配不恰当，使得整个页面很LOW。色彩是一门大学科，我们在学校学习的时候都是一本书的形式存在的，如果让我们慢慢学习相信很多人都静不下心去学。今天我给大家分享的一种色彩方法是”抄“，是为了做页面的时候能够快速的找恰当的色彩搭配。而去学习借鉴别人的优秀的色彩搭配方式，是可以慢慢的心中形成一个自己的色彩体系，以后再做色彩搭配的时候也不用那么抓耳挠腮了。下面就让我们去看一下怎么去”抄“色彩！总结：以上对于”如何从网页设计中参考电商排版“讲了6个方面；1.版式；2.文字；3.风格；4.图形；5.元素；6.色彩。还是那句话。多学多练，灵活运用。这样才能把知识点牢牢的记在脑袋中。对于这些分享只是我个人对于排版的认识和总结，其中可能有不对的或者不恰当的地方请大家谅解。