莫方教程网

专业程序员编程教程与实战案例分享

0基础:网页效果图之深入设计

注:该内容适合0基础阅读,专业人士可以绕道而行

网页效果图拼图是只是一个过渡。真正的设计应该深入的,而不仅限于拼图。

深入设计指的是网页拼图的基础上进行细节的全面完善设计。

拼图做到了对网页的整体的排版和布局,属于整体把握。

深入设计需要把每一个细节都处理好,可以使网页更加的完美。

深入设计具体指对网页中文字、banner、描边、页面小元素、板块的排版进行更为细致的设计布局。

深入设计也是让页面中的元素分层化,就是多分图层。

图层越多,越便于我们的修改。

通俗一点的讲呢,拼图相当于画一个人物素描的开始阶段,先画出人物的大轮廓。深入设计的就是素描中的细节刻画阶段,逐步画好鼻子、眼等五官,使得整个人物更加生动逼真。

问:深入设计到哪种程度,算是完美的呢?

答:这个问题其实很简单。只要符合用户体验就行。说白了,看着不纠结就行。

问:什么样的页面是客户需要的,大众喜欢的呢?

答:应该说,一切符合用户体验的设计都是好的设计,网页效果图设计也是如此。

问:什么是用户体验?

答:用最通俗的话讲,就是站在客户的角度,喜欢这个页面,看着舒服就行。包括色调、图片、细节、小元素等。

官方定义:用户体验(User Experience,简称UE)是一种纯主观在用户使用产品过程中建立起来的感受。

问:深入设计,应该从哪方面入手?

答:从六大部分开始,同理,可以适用于每一个细节的处理。

字体设置:

宋体(用作网站内容)大小:12 样式:无

黑体(用作标题) 大小:14 样式:浑厚

同时要考虑字间距、行间距

Logo:

在我们没有自己的logo,可以用相应的文字代替,例如我的是个人博客,logo就以郭朋涛网页设计代替之。有logo的直接换上logo。

导航:导航的背景和文字要建立不同的图层。

Banner:

可以从素材网站找相关的合适的banner,直接放上去即可。

自己制作一个banner。(下一节有专门讲怎么设计banner)

板块布局:

板块若要进行描边,描边为单独一个层,描边像素为1px,

板块与板块之间间距建议为5px—10px之间。不绝对,合适即可。

页面小元素:

网页中的列表前边添加的小图标,要单独为一个图层。

从整体上美化页面,提高用户体验性。

参考线:

我们要善于借助参考线和标尺工具,来进行各种对齐。

Box中不要出现太多字体样式,一般为黑体和宋体,内容文字多为宋体。不绝对。

只有当你真正动手去做的时候,才能感受到这些的重要性和实用性。因为这些都是我多年的经验。

两个非常重要的图,你一定要知道。以便于更好的理解,上文讲的内容。

1、从这个图中,我要知道哪些文字是标题文字,哪些文字是内容文字,以及各自字体大小。

2、做效果的时候,我经常看到一些网页是通屏的,很好看。这里我们给分解一下。 为了便于学员的学习,我把中间这部分,叫做box(盒子)部分;盒子之外的我叫做背景部分。

我们在设计的时候呢,可以分开设计两部分。最后结合到一起。

思考:将本节你认为重要的、你之前不知道的知识点,记到本子上

文/郭朋涛 用最通俗的话讲网页设计,公众微信:webdesign123

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言