TOPVE唯艺互动

TOPVE VIEW
保持不断的探索与研究
慧眼看世界,在设计的路上不断追求创新!
Keep exploration and research

网页视觉设计师设计手册指南一

发布于:2017-02-27 11:45:00 作者:俊敏 来源:站酷  人气:

当前位置:首页观点设计理论 正文

主要总结一些设计中的细节,或许有很多人知道,但不妨多看看。如果你是刚入设计的同学看了会对你有帮助,可不要小看这些细节,这或许就是你和大神之前的差异。这也算是设计中的一部分入门吧。
主要总结一些设计中的细节,或许有很多人知道,但不妨多看看。
如果你是刚入设计的同学看了会对你有帮助,可不要小看这些细节,这或许就是你和大神之前的差异。这也算是设计中的一部分入门吧。

网页视觉设计师设计手册指南一001

一、图片部份:

1、图片边缘的处理

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

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

2、图片统一性

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

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

3、图片色调的统一性

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

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

 

网页视觉设计师设计手册指南一002

4、图片的边框比例

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

正确:
经过调整后的图片比例 长宽都为偶数或整数,这时候便于前端工程师开发适配。

5、图形化的绘制

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

正确:
所以在绘制的时候一定要注意细节,避免出现茂边的情况。

二、字体部份:

1、字体尺寸大小

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

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

 

网页视觉设计师设计手册指南一003

2、字体的段落行高

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

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

3、标题和段落主次关系

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

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

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

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

正确:
上列字体的标点符号进行调整,让他们这间保持了一致性。使得我们的设计变得更加严谨。

网页视觉设计师设计手册指南一004

5、英文字体使用

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

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

6、每行文字的展示长度

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

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

 

网页视觉设计师设计手册指南一005

三、颜色部份

1、大面积的用色

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

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

2、色彩的阴暗

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

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

3、彩色与非彩色

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

正确:
经过调整后将文字对颜色改为了非彩色,可以用白色或用黑色,具体根据背景色彩对比明暗来决定。无论背景色如何变化都不会干扰用户的视觉。

网页视觉设计师设计手册指南一006

4、环境色的运用

错误:
上面用色在彩色能上能下用非色彩是没有错误的。但是却没有给用户穿搭出图中的意境。这是为何呢?

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

5、不超过3个色彩使用

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

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

6、相接处与分开

错误:
上面色彩给你的感受是什么?所以不同的色彩这间是不适合相接触的,尤其是高饱和的红和蓝两种色彩。

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

网页视觉设计师设计手册指南一007

四、其它部份

1、完整的PS图层

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

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

2、文字的颜色

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

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

 

还有很多基础的问题保留在下期更新

这些问题就是专业设计师和非专业设计师的区别吧,如果以后更用心的去设计,避免这些小问题,我想你设计出来的作品一定很严谨。

作者:俊敏
原文地址:http://www.zcool.com.cn/article/ZNDcwNzI4.html

分享到:
你觉得这篇文章:
收藏到个人中心
唯艺互动-专注高端网站设计

TOPVE唯艺互动

相信设计的价值 让美好的事情发生

专注高端网站界面设计

联系我们

QQ联系:270304282

邮箱:haobanfa1@163.com

唯艺互动-专注高端网站设计

抱歉!好像您使用的浏览器版本太低了
为了得到我们网站最好的体验效果,我们建议您升级到最新版本的IE浏览器,或选择其它推荐浏览器

继续访问请进入旧版TOPVE