网页界面设计,如何做好网页设计

1、 首先将你的想法在纸上画出来

这是一幅世界各地不同年城市特色建筑的草图,每个人开始设计之前都会在纸上画草图,但是很多设计师都跳过了这一步,没有考虑到他们将会面临的问题。设计就是要解决问题,但是这些问题通过渐变、阴影设置是解决不了的,只有通过调整布局和层次结构才能解决。所以在你开始设计之前,一定要先想好布局。

2、 描绘一个顶层框架

描绘一个基本的框架可以帮助你解决UX方面的问题,同时规划布局。当我接手一个项目的时候,做的第一件事就是建立一个顶级框架,这样可以解决所有的设计问题。这个框架是指环绕在内容周围的UI,它可以帮助我们执行操作,更好的操纵页面。它包括导航和组件,比如侧边栏和底部的按钮。

如果你通过这种方式来做设计,在不看主页的情况下,你也能清晰的知道应该怎样布局。

3、 给PSD添加网格

这是一个有978个网格的PSD文件,每条线的宽度为10PX。画网格做起来就像听起来那么简单,虽然你不画直接开始设计完全可以,但是我相信设计出来的作品绝对没有画了网格好。网格的好处就是帮助你构建不同板块的布局,起一个指导作用,帮助你制作响应式模板。

4、 选择你的字体

网页设计中很重要的一个原则就是一个网页中不要出现两种以上的字体在一个项目中,寻找好看的字体也是很重要的一部分,但是我要提醒你,在同一个网页中千万别使用两种以上的字体。选择字体的原则就是要易于用户阅读,尤其是文字很多的页面,文章标题的字体可以有趣一些,这样能吸引用户的注意。在使用字体的时候不要畏首畏尾,个头大不是问题,只要整体看起来很和谐生动就行了。

5、 选择合适的颜色主题

使用有限的颜色和色调,减轻用户的视觉压力。 在选择字形的时候,你就应该想好用户界面、背景、文字该用什么颜色。我建议你在颜色的原则方面一定要有节制,别想到哪个用哪个,最后五颜六色乱七八糟的,这也是大忌。

在这一步中,你要根据每个元素的功能选择颜色,并且在用户界面中,相同的元素颜色一定要一致。你可以观察一下facebook、推特、quora、vimeo等等网站的页面,在不干扰功能组件正常使用的情况下,除了用户界面,它们的插画和平面细节没有任何颜色限制。

6、 分开布局

网页结构越简单,用户使用越容易在网站中,每个模块都要有个故事,要给用户一个浏览的理由和最终的结果。而设计的作用就是强调这个故事中最重要的那部分。在现实设计中,主页面不能将所有的信息都显示出来,所以你必须在主页先告诉用户“进了这个网站你能做什么”。

发挥你的聪明才智思考一下你能想到的极简页面,有最简单的目标和必要的构件。最后你会发现,原来保持简单这么困难。

7、 重新思考

我们真的需要搜索按钮吗?在很多案例中,答案是否定。作为一名设计师,是我们一手决定了用户浏览因特网的方式和界面,由你决定用户进一个页面需要多少步骤、一个网页效率有多高。在设计完之后,一定要多测试,发现漏洞,及时修改,这样才能做到极致。

做好网页设计,需要掌握的软件和技术还挺多的,但不建议都把这些技术掌握的很精通,毕竟人的精力是有限的,可以选择其中的一项技术来认真钻研,并达到熟练掌握运用。

下面来说下网页设计的两个方面

一.视觉方面

如果你是设计专业或者对视觉有很浓厚的兴趣,那就可以选择做这个方向的网页设计,也就是通过设计软件,根据原型图或者草图制作高保真效果图。要做这方面的网页设计,需要掌握的设计软件有photosho,illustrator等视觉设计软件。

ps主要用来设计网页效果图和对效果图进行切片以及一些网页小元素的处理和制作,用处可以说相当大,学好PS就完全可以制作出精美的网页了。illustrator主要是处理一些矢量图形或者图标,辅助PS进行网页设计,这要看你哪个软件掌握的熟练,就以哪个为主。

掌握了基本的网页设计软件,下面就要多学习一些网页的基本知识,比如网页尺寸,网页布局排版等规范,这些需要长时间的练习和积累,要多看多想多做,慢慢你就会发现自己水平提高了,设计的网页也越来越专业和漂亮。

二.网页前端

这个方向的网页设计,需要掌握和精通前端html代码以及css样式js这些,也就是通过这些把ps设计好的效果图实现成可以通过浏览器浏览访问的网页页面。对代码有兴趣的朋友可以朝这个方向发展。

推荐使用的软件是Dreamweaver,方便易学,可以快速进行网页布局和css,当然随着学习的深入,你会知道其他很多前端设计软件,这里不再一一介绍。

上面介绍的是网页设计的两个方向,当然也可以两者都掌握,那就是全能型网页设计师了,很受欢迎。最好精通其中一个,另外的技术适当了解。

网页界面设计,如何做好网页设计图1
网页界面设计,如何做好网页设计图2
网页界面设计,如何做好网页设计图3
网页界面设计,如何做好网页设计图4

未经允许不得转载:百场汇 » 网页界面设计,如何做好网页设计