网页设计师要注意那些事儿？

日期：2019/7/26 人气：411386

导读： 01 图片边缘的处理左图: 很多图片，本身并不定完美的，尤其是边角区域为白色的吋候，如果不处理的话，很容易和白色背景融合。那么我们该如何改变这些问题。右图: 于是我们在图片的边缘处增加了浅灰色的描边，有效的解决了这些问题。或者改变与图片融合的背景把它们改为灰色，这样就和白色产生了对比。 02 图片的统一性&n

01 图片边缘的处理

左图:

很多图片，本身并不定完美的，尤其是边角区域为白色的吋候，如果不处理的话，很容易和白色背景融合。那么我们该如何改变这些问题。

右图:

于是我们在图片的边缘处增加了浅灰色的描边，有效的解决了这些问题。或者改变与图片融合的背景把它们改为灰色，这样就和白色产生了对比。

02 图片的统一性

左图:

在展示团队成员照片的时候，很多设计师在摆放团队成员照片的时候层次不齐，破坏了整个统一性。

右图:

经过调整后，让整个图片在画面中的比例大小都保持一致，有效的解决了这个问题。

03 图片色调的统一性

左图:

上列一排图片的展示中，有暖色有暗色，有亮有暗的整个极度不统一。给用户视觉上造成不便。

右图:

经过调整后让整个图片有色调明暗处理上保持了统一，有效的强调了画面的一致性。

04 图片的边框比例

左图:

图片的长宽比例数值。这是在视觉上轻易看不出来但是如果给开发人员的时候，就会出现这个毛病。

右图:

进过调整后的图片比例长度都是偶数，这个时候便于前端工程师开发适配。

05 图形化的绘制

左图:

关于图形化的绘制出现毛边也是很多设计师会出现的问题。

右图:

所以在绘制的时候一定要注意细节，避免出现毛边的情况。

字体

01 字体尺寸大小

左图:

一般在网页字体开发的时候，发现不少同学会用到15/17 类似这样的奇数数值大小的字体。其实这并不利于系统的显示。

右图:

经过调整后字体显示的为12/14/16等偶数数值大小。一是让整个字体在现实的时候没有毛边。而且有利技术系统的显示渲染。

02 字体的段落的行高

左图:

上列字体段落看起来是不是很吃力，每段字体相互干扰。给用户造成极度困扰的阅读。

右图:

经调整后字体段落行高显示为字体数数值的一半让段落彼此之间有了透气性。极大的提高了字体的阅读性。

03 标题和段落主次关系

左图:

上列字体段落在视觉上给人感受不到有标题的存在，标题和段落之间的对比不明显使用户容易混乱。

右图:

调整过后的设计，标题加大了，一般增大段落字体的2/1大小，与段落的间距也是行间距的2倍。使用户在阅读的时候，清晰明了。

04 段落文字上的标点符号运用

左图:

上列段落文字之间的标点符号有的很近有的很远这样的设计很容易让人感到设计人员不专业的行为。所以在视觉上也得不到统一。

右图:

上列字体的标题符号惊醒调整，让他们之间保持了一致性。使得我们的设计变得更加严谨。

05 英文字体使用

左图:

英文字用英文字体。中文字用中文字体。很多设计师对于中英文字体的运用比较模糊。所以导致了英文字体看起来别扭。

右图:

上列英文字是修改后的，运用了英文字体。其实啥也不用说了这是每个设计师最基本的知识。

06 每行文字的展示长度

上图:

上述一行文字是否看得很吃力？是的。因为汉字的信息量极大，每个字之间没有空格，紧密的挨在一起。所以用户阅读的时候比较吃力。

下图:

下列的文字每行展示的字数控制在35~45字之间是用户阅读的时候最容易吸收和理解的。别问我为什么，这是长久以来的研究出来的数据。

颜色

01 大面积的用色

左图:

上面是不是给你一种刺眼和不适的感觉。是的这也是很多设计师所犯的错误。

右图:

所以在调整过后我们可以适当的减少面积。保留了大量的留白，让用户更容易接受。

02 色彩的明暗

左图:

上面色彩大面积会给用户一种刺眼的感受，主要是设计师没有敏锐的色彩感知能力。

右图:

经过调整后将色调的明度调整在用户能接受的阶段之内。主要考验设计师对色彩的感知力。

03 彩色与非彩色

左图:

上面图片字体配色使得整个画面显得乱，因为背景包含了许多色彩，然后文字对色彩又是一种偏蓝色的色调，所以导致让用户无法进行视觉聚焦。

右图:

经过调整后将色调的明度调整在用户能接受的阶段之内。主要考验设计师对色彩的感知力。

04 环境色的运用

左图:

上面用色在色彩上非彩色是没有错误的。但是却没有给用户传达出图中的意境。这是为何呢？

右图:

经过调整后的文字吸取来环境中的色彩后，一般适合在图片中色彩数量比较少的情况下可用，这样就使得文字和图片完美融合在一起。

05 不要超过3个色彩使用

左图:

上面设计中用户到底需要注意哪一个文字，是不是有眼花缭乱的感觉。

右图:

经过调整后的文字采取来两种色彩，彩色和非彩色的搭配，给用户传达出简洁清晰的感受。

06 相接处与分开

左图:

上面色彩给你的感受是什么？所以不同的色彩之间是不适合相接触的，尤其是高饱和的红和蓝两种色彩。

右图:

这里我们我们把他们分幵后两种对比色彩相互对比相互不冲突。

其他

01 完整的PS图层

左图:

这样杂乱不堪的设计图层，不管是你的设计师还是开发人员都会让人抓狂。

右图:

经过调整后的PS图层，是不是看起来很整洁。这样一看就是很专业的设计师。

02 文字的颜色

左图:

很多设计师喜欢把背景上浮动文字，设置透明度来改变字体的颜色，这样是很方便。但是是很不利于开发人员进行文字色彩取色的。

右图:

所以我们在设置文字的色彩的时候，一定要避免设置文字的透明度。

文本来自采集文章 http://xiaojinxian.chouchoumao.cn/25/120.html 如需转载或删除，请联系管理员。

上一条：网站定制服务有哪些：设计定制和功能定制

下一条：网站设计需要精雕细琢的几个细节

< 返回上一级

< >

分享到：

热点资讯

【深一小金网络公司】——承诺3小时内上门服务！小金上门全国热线:400-666-2014 【小金网站建设http://xiaojinxian.chouchoumao.cn】网站地图粤ICP备15108339号网站维护：深一深圳网站建设

全国深一小金网络公司