网页设计师要注意哪些事儿？
时尚潮流品牌如何通过网页设计呈现品牌内核？
2020/08/11
网页设计制作中的一些知识
2020/08/11
01 图片边缘的处理
很多图片，本身并不定完美的，尤其是边角区域为白色的吋候，如果不处理的话，很容易和白色背景融合。那么我们该如何改变这些问题。
于是我们在图片的边缘处增加了浅灰色的描边，有效的解决了这些问题。或者改变与图片融合的背景把它们改为灰色，这样就和白色产生了对比。
02 图片的统一性
在展示团队成员照片的时候，很多设计师在摆放团队成员照片的时候层次不齐，破坏了整个统一性。
经过调整后，让整个图片在画面中的比例大小都保持一致，有效的解决了这个问题。
03 图片色调的统一性
如果在一组图片的展示中，有暖色有暗色，有亮有暗的整个极度不统一。给用户视觉上造成不便。
经过调整后让整个图片有色调明暗处理上保持了统一，有效的强调了画面的一致性。
04 图片的边框比例
图片的长宽比例数值。这是在视觉上轻易看不出来但是如果给开发人员的时候，就会出现这个毛病。
进过调整后的图片比例 长度都是偶数，这个时候便于前端工程师开发适配。
05 图形化的绘制
关于图形化的绘制出现毛边也是很多设计师会出现的问题。
所以在绘制的时候一定要注意细节，避免出现毛边的情况。
一般在网页字体开发的时候，发现不少同学会用到15/17 类似这样的奇数数值大小的字体。其实这并不利于系统的显示。
经过调整后字体显示的为12/14/16等偶数数值大小。一是让整个字体在现实的时候没有毛边。而且有利技术系统的显示渲染。
02 字体的段落的行高
上列字体段落看起来是不是很吃力，每段字体相互干扰。给用户造成极度困扰的阅读。
经调整后字体段落行高显示为字体数数值的一半让段落彼此之间有了透气性。极大的提高了字体的阅读性。
03 标题和段落主次关系
上列字体段落在视觉上给人感受不到有标题的存在，标题和段落之间的对比不明显使用户容易混乱。
调整过后的设计，标题加大了，一般增大段落字体的2/1大小，与段落的间距也是行间距的2倍。使用户在阅读的时候，清晰明了。
04 段落文字上的标点符号运用
上列段落文字之间的标点符号有的很近有的很远这样的设计很容易让人感到设计人员不专业的行为。所以在视觉上也得不到统一。
上列字体的标题符号惊醒调整，让他们之间保持了一致性。使得我们的设计变得更加严谨。
05 英文字体使用
英文字用英文字体。中文字用中文字体。很多设计师对于中英文字体的运用比较模糊。所以导致了英文字体看起来别扭。
上列英文字是修改后的，运用了英文字体。其实啥也不用说了这是每个设计师最基本的知识。
06 每行文字的展示长度
上述一行文字是否看得很吃力？是的。因为汉字的信息量极大，每个字之间没有空格，紧密的挨在一起。所以用户阅读的时候比较吃力。
下列的文字每行展示的字数控制在35~45字之间是用户阅读的时候最容易吸收和理解的。别问我为什么，这是长久以来的研究出来的数据。
上面是不是给你一种刺眼和不适的感觉。是的这也是很多设计师所犯的错误。
所以在调整过后我们可以适当的减少面积。保留了大量的留白，让用户更容易接受。
02 色彩的明暗
上面色彩大面积会给用户一种刺眼的感受，主要是设计师没有敏锐的色彩感知能力。
经过调整后将色调的明度调整在用户能接受的阶段之内。主要考验设计师对色彩的感知力。
03 彩色与非彩色
上面图片字体配色使得整个画面显得乱，因为背景包含了许多色彩，然后文字对色彩又是一种偏蓝色的色调，所以导致让用户无法进行视觉聚焦。
经过调整后将色调的明度调整在用户能接受的阶段之内。主要考验设计师对色彩的感知力。
04 环境色的运用
上面用色在色彩上非彩色是没有错误的。但是却没有给用户传达出图中的意境。这是为何呢？
经过调整后的文字吸取来环境中的色彩后，一般适合在图片中色彩数量比较少的情况下可用，这样就使得文字和图片完美融合在一起。
05 不要超过3个色彩使用
上面设计中用户到底需要注意哪一个文字，是不是有眼花缭乱的感觉。
经过调整后的文字采取来两种色彩，彩色和非彩色的搭配，给用户传达出简洁清晰的感受。
06 相接处与分开
上面色彩给你的感受是什么？所以不同的色彩之间是不适合相接触的，尤其是高饱和的红和蓝两种色彩。
这里我们我们把他们分幵后两种对比色彩相互对比相互不冲突。
这样杂乱不堪的设计图层，不管是你的设计师还是开发人员都会让人抓狂。
经过调整后的PS图层，是不是看起来很整洁。这样一看就是很专业的设计师。
02 文字的颜色
很多设计师喜欢把背景上浮动文字，设置透明度来改变字体的颜色，这样是很方便。但是是很不利于开发人员进行文字色彩取色的。
所以我们在设置文字的色彩的时候，一定要避免设置文字的透明度。
过于复杂的ICON
很多设计师在设计ICON的时候喜欢设计很多细节部分，又是描边又是浅色透明等。整个给人特别繁琐。所以我们需要经过简化设计。
给用户示范的文字
有时候会遇到客户没有提供信息内容的时候，很多设计师会随意简单的复制相同的信息。这样会给客户传达出不专业，不认真的感觉。所以我们可以找和客户相关行业的文字替换，在视觉上也让人更容易接受。
图片叠加的小细节
两张或多张图片叠加的时候，有大图和小图结合，小图更多会展示细节部分，很多设计师会不经意间将小图遮住，这样就不利于小图的展示，反而更像修饰，既然是修饰可尝试用图形等元素，如果你是想展示出来细节，完全可以把它放在大图上面展示。
关于排版的透气性
左边的排版从整体内容来说是没有错误的。但是却给用户在视觉上传达出死板的感受。所以有些时候排版需要学会适当的做一些删减。就像右边这样，整体给人会具有一定的设计感。
突破需要彻底
在进行人物照片处理上，使用一定突破的设计方式是好的。这样避免了死板。关键是大部分初入行的设计在处理时候还不够彻底。于是就会导致视觉传达出上不上下不下的感受。所以有些时候我们需要大胆一些，就像右边的排版给人的视觉会好很多。
传达出不一样的投影 以前的时候设计师在按钮上会习惯性尝试用黑色投影，（当然用黑色是没有错误的）只是现在我们可以适当的做一些变化，会让你的设计更出彩。就是投影的色彩可以尝试吸取主体相近的颜色。上面左边偏青色的按钮投影运用了黑色的投影，总给用户传达出不一致的感受。所以在右边我们将黑色的投影改成了青绿色相近的色彩，在视觉上会提高了一致性。
网站LOGO放在头部哪里合适？
左边网站LOGO（偏向圆形方形）放在了左上角，在视觉上会给用户传达出左右失重的感觉，于是我们将LOGO放在了中间，就完美得解决了这个问题。一般网站头部LOGO摆放的位置，主要根绝LOGO的形状比例和导航栏目的数量来定，比如LOGO偏长导航数量较少，可以尝试LOGO和导航平行摆放，反之可以进行上下摆放，如果LOGO形状偏方正或圆形，在导航栏目较少的情况下可以考虑一排摆放，反之可以考虑上下排版等。更加详细等方法日后可以再仔细分析。
辅助性质线条的运用
越来越多线的元素融入在设计中，线条形状以及属性改变了它们运用的目的性，所以上面左边的设计整个给人十分的抢眼，在于我们没有理解线条在此处的作用是辅助性的，于是我们需要降低线的显示，所以得到了右边的设计。
查看更多、了解更多等的箭头
我看到很多小伙伴设计的更多按钮的箭头都是使用符号打上去的，而且没有调整好大小，整体传达出也不一致，所以需要明白如果是文字结合ICON那就需要将ICON设计出阿里。至少体现出设计师的专业性。
按钮主次关系的运用
左边的关闭按钮是没有错误的，但是还是具有改进的空间，因为图标本身传达出关闭的意识，所以说我们可以尝试将×外面的圆形线条进行弱化，让它成为×的一种装饰元素。而不是和图标中×的视觉一样重要，这样就会扰乱用户视线，为了给用户传达出更好的视觉体验，于是就出现了右边经过调整后的关闭图标。
突出并不是越大越好
左边的图给用户在视觉上很饱满的感觉，会让人感到莫名的拥挤，所以有时候需要突出一处并不需要越大越好。而是需要保留一些空间感，让整个画面保持透气感，才能给用户带来愉悦的感受。
网站中的图片比的一致性
初入行的网页设计师在设计网站后期需要更新的栏目（如产品列表产品详情等）的图片时候，不会注意图片尺寸大小比例的统一。从而导致后期上传图片的时候显示不完美。（有些喜欢把锅丢给技术...）所以在设计的时候一定要多注意哦。
图形元素角度的问题
很多专题或促销的BANNER背景都会运用一些斜着的图形或者线条，很多刚入门的伙伴可能会随意画，比如左上角的线条元素的角度用多了的话就会让画面乱而不严谨。所以我们尽量不要使用 12.7或者23.1 之类的数值，尽量使用 15-30-45 等严谨的数值。
让纯色变得更加柔和
当我们用纯色作为背景的时候，很多时候会给人很干，单一的感觉，所以可以考虑在纯色背景上适当的加一些色彩，让画面背景变得更加柔和。
适当的调整让图片具有透气感
左图给用户感觉比较压迫，层次感不明显。所以我们可以稍微让画面展示得更多一些。让画面丰富起来，让图片更具有透气感。
中英文之间搭配
其实中英文的结合在选择字体的时候，需要考虑字体的统一性，就像左边上图中英文字体结合在一起给人感觉总会不适应，而右图我们将两种字体进行统一，让他们都变成了衬线字体。给用户感受就提升了许多。
同等级模块之间的对齐方式
在同等级的模块之间的间距保持一致，会让设计更严谨。就像右图这样的方式。
图标的统一性
有时候网站中用到的图标最好统一，最好的放大就是将需要放的图标集合在一起进行对比，找出其中的差别，在进行不断的修改统一后，再运用到相应的模块中去。
很多图片，本身并不定完美的，尤其是边角区域为白色的吋候，如果不处理的话，很容易和白色背景融合。那么我们该如何改变这些问题。
于是我们在图片的边缘处增加了浅灰色的描边，有效的解决了这些问题。或者改变与图片融合的背景把它们改为灰色，这样就和白色产生了对比。
02 图片的统一性
在展示团队成员照片的时候，很多设计师在摆放团队成员照片的时候层次不齐，破坏了整个统一性。
经过调整后，让整个图片在画面中的比例大小都保持一致，有效的解决了这个问题。
03 图片色调的统一性
如果在一组图片的展示中，有暖色有暗色，有亮有暗的整个极度不统一。给用户视觉上造成不便。
经过调整后让整个图片有色调明暗处理上保持了统一，有效的强调了画面的一致性。
04 图片的边框比例
图片的长宽比例数值。这是在视觉上轻易看不出来但是如果给开发人员的时候，就会出现这个毛病。
进过调整后的图片比例 长度都是偶数，这个时候便于前端工程师开发适配。
05 图形化的绘制
关于图形化的绘制出现毛边也是很多设计师会出现的问题。
所以在绘制的时候一定要注意细节，避免出现毛边的情况。
FONT 字体
01 字体尺寸大小一般在网页字体开发的时候，发现不少同学会用到15/17 类似这样的奇数数值大小的字体。其实这并不利于系统的显示。
经过调整后字体显示的为12/14/16等偶数数值大小。一是让整个字体在现实的时候没有毛边。而且有利技术系统的显示渲染。
02 字体的段落的行高
上列字体段落看起来是不是很吃力，每段字体相互干扰。给用户造成极度困扰的阅读。
经调整后字体段落行高显示为字体数数值的一半让段落彼此之间有了透气性。极大的提高了字体的阅读性。
03 标题和段落主次关系
上列字体段落在视觉上给人感受不到有标题的存在，标题和段落之间的对比不明显使用户容易混乱。
调整过后的设计，标题加大了，一般增大段落字体的2/1大小，与段落的间距也是行间距的2倍。使用户在阅读的时候，清晰明了。
04 段落文字上的标点符号运用
上列段落文字之间的标点符号有的很近有的很远这样的设计很容易让人感到设计人员不专业的行为。所以在视觉上也得不到统一。
上列字体的标题符号惊醒调整，让他们之间保持了一致性。使得我们的设计变得更加严谨。
05 英文字体使用
英文字用英文字体。中文字用中文字体。很多设计师对于中英文字体的运用比较模糊。所以导致了英文字体看起来别扭。
上列英文字是修改后的，运用了英文字体。其实啥也不用说了这是每个设计师最基本的知识。
06 每行文字的展示长度
上述一行文字是否看得很吃力？是的。因为汉字的信息量极大，每个字之间没有空格，紧密的挨在一起。所以用户阅读的时候比较吃力。
下列的文字每行展示的字数控制在35~45字之间是用户阅读的时候最容易吸收和理解的。别问我为什么，这是长久以来的研究出来的数据。
COLOR 颜色
01 大面积的用色上面是不是给你一种刺眼和不适的感觉。是的这也是很多设计师所犯的错误。
所以在调整过后我们可以适当的减少面积。保留了大量的留白，让用户更容易接受。
02 色彩的明暗
上面色彩大面积会给用户一种刺眼的感受，主要是设计师没有敏锐的色彩感知能力。
经过调整后将色调的明度调整在用户能接受的阶段之内。主要考验设计师对色彩的感知力。
03 彩色与非彩色
上面图片字体配色使得整个画面显得乱，因为背景包含了许多色彩，然后文字对色彩又是一种偏蓝色的色调，所以导致让用户无法进行视觉聚焦。
经过调整后将色调的明度调整在用户能接受的阶段之内。主要考验设计师对色彩的感知力。
04 环境色的运用
上面用色在色彩上非彩色是没有错误的。但是却没有给用户传达出图中的意境。这是为何呢？
经过调整后的文字吸取来环境中的色彩后，一般适合在图片中色彩数量比较少的情况下可用，这样就使得文字和图片完美融合在一起。
05 不要超过3个色彩使用
上面设计中用户到底需要注意哪一个文字，是不是有眼花缭乱的感觉。
经过调整后的文字采取来两种色彩，彩色和非彩色的搭配，给用户传达出简洁清晰的感受。
06 相接处与分开
上面色彩给你的感受是什么？所以不同的色彩之间是不适合相接触的，尤其是高饱和的红和蓝两种色彩。
这里我们我们把他们分幵后两种对比色彩相互对比相互不冲突。
OTHER 其他
01 完整的PS图层这样杂乱不堪的设计图层，不管是你的设计师还是开发人员都会让人抓狂。
经过调整后的PS图层，是不是看起来很整洁。这样一看就是很专业的设计师。
02 文字的颜色
很多设计师喜欢把背景上浮动文字，设置透明度来改变字体的颜色，这样是很方便。但是是很不利于开发人员进行文字色彩取色的。
所以我们在设置文字的色彩的时候，一定要避免设置文字的透明度。
过于复杂的ICON
很多设计师在设计ICON的时候喜欢设计很多细节部分，又是描边又是浅色透明等。整个给人特别繁琐。所以我们需要经过简化设计。
给用户示范的文字
有时候会遇到客户没有提供信息内容的时候，很多设计师会随意简单的复制相同的信息。这样会给客户传达出不专业，不认真的感觉。所以我们可以找和客户相关行业的文字替换，在视觉上也让人更容易接受。
图片叠加的小细节
两张或多张图片叠加的时候，有大图和小图结合，小图更多会展示细节部分，很多设计师会不经意间将小图遮住，这样就不利于小图的展示，反而更像修饰，既然是修饰可尝试用图形等元素，如果你是想展示出来细节，完全可以把它放在大图上面展示。
关于排版的透气性
左边的排版从整体内容来说是没有错误的。但是却给用户在视觉上传达出死板的感受。所以有些时候排版需要学会适当的做一些删减。就像右边这样，整体给人会具有一定的设计感。
突破需要彻底
在进行人物照片处理上，使用一定突破的设计方式是好的。这样避免了死板。关键是大部分初入行的设计在处理时候还不够彻底。于是就会导致视觉传达出上不上下不下的感受。所以有些时候我们需要大胆一些，就像右边的排版给人的视觉会好很多。
传达出不一样的投影 以前的时候设计师在按钮上会习惯性尝试用黑色投影，（当然用黑色是没有错误的）只是现在我们可以适当的做一些变化，会让你的设计更出彩。就是投影的色彩可以尝试吸取主体相近的颜色。上面左边偏青色的按钮投影运用了黑色的投影，总给用户传达出不一致的感受。所以在右边我们将黑色的投影改成了青绿色相近的色彩，在视觉上会提高了一致性。
网站LOGO放在头部哪里合适？
左边网站LOGO（偏向圆形方形）放在了左上角，在视觉上会给用户传达出左右失重的感觉，于是我们将LOGO放在了中间，就完美得解决了这个问题。一般网站头部LOGO摆放的位置，主要根绝LOGO的形状比例和导航栏目的数量来定，比如LOGO偏长导航数量较少，可以尝试LOGO和导航平行摆放，反之可以进行上下摆放，如果LOGO形状偏方正或圆形，在导航栏目较少的情况下可以考虑一排摆放，反之可以考虑上下排版等。更加详细等方法日后可以再仔细分析。
辅助性质线条的运用
越来越多线的元素融入在设计中，线条形状以及属性改变了它们运用的目的性，所以上面左边的设计整个给人十分的抢眼，在于我们没有理解线条在此处的作用是辅助性的，于是我们需要降低线的显示，所以得到了右边的设计。
查看更多、了解更多等的箭头
我看到很多小伙伴设计的更多按钮的箭头都是使用符号打上去的，而且没有调整好大小，整体传达出也不一致，所以需要明白如果是文字结合ICON那就需要将ICON设计出阿里。至少体现出设计师的专业性。
按钮主次关系的运用
左边的关闭按钮是没有错误的，但是还是具有改进的空间，因为图标本身传达出关闭的意识，所以说我们可以尝试将×外面的圆形线条进行弱化，让它成为×的一种装饰元素。而不是和图标中×的视觉一样重要，这样就会扰乱用户视线，为了给用户传达出更好的视觉体验，于是就出现了右边经过调整后的关闭图标。
突出并不是越大越好
左边的图给用户在视觉上很饱满的感觉，会让人感到莫名的拥挤，所以有时候需要突出一处并不需要越大越好。而是需要保留一些空间感，让整个画面保持透气感，才能给用户带来愉悦的感受。
网站中的图片比的一致性
初入行的网页设计师在设计网站后期需要更新的栏目（如产品列表产品详情等）的图片时候，不会注意图片尺寸大小比例的统一。从而导致后期上传图片的时候显示不完美。（有些喜欢把锅丢给技术...）所以在设计的时候一定要多注意哦。
图形元素角度的问题
很多专题或促销的BANNER背景都会运用一些斜着的图形或者线条，很多刚入门的伙伴可能会随意画，比如左上角的线条元素的角度用多了的话就会让画面乱而不严谨。所以我们尽量不要使用 12.7或者23.1 之类的数值，尽量使用 15-30-45 等严谨的数值。
让纯色变得更加柔和
当我们用纯色作为背景的时候，很多时候会给人很干，单一的感觉，所以可以考虑在纯色背景上适当的加一些色彩，让画面背景变得更加柔和。
适当的调整让图片具有透气感
左图给用户感觉比较压迫，层次感不明显。所以我们可以稍微让画面展示得更多一些。让画面丰富起来，让图片更具有透气感。
中英文之间搭配
其实中英文的结合在选择字体的时候，需要考虑字体的统一性，就像左边上图中英文字体结合在一起给人感觉总会不适应，而右图我们将两种字体进行统一，让他们都变成了衬线字体。给用户感受就提升了许多。
同等级模块之间的对齐方式
在同等级的模块之间的间距保持一致，会让设计更严谨。就像右图这样的方式。
图标的统一性
有时候网站中用到的图标最好统一，最好的放大就是将需要放的图标集合在一起进行对比，找出其中的差别，在进行不断的修改统一后，再运用到相应的模块中去。
墨尔本网站设计开发制作
墨尔本Melmel网站设计制作|网页制作设计|网站开发, 多名资深的Google搜索引擎分析，腾讯微信运营师，网站运营架构师等，提供您最文艺创作的品牌设计，最现代化的网络技术，最专业正统的数据分析，最原创超值的推文内容，为您度身定制最个性化且性价比最高的网络解决方案帮助您的品牌与产品在现代化的商业战争中，脱颖而出，名列前茅。
