新手如何做好网页？20招帮你打造完美设计!

《新手如何做好网页？20招帮你打造完美设计!》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、新手如何做好网页？20招帮你打造完美设计！每当谈到网页设计这个话题时，我总会想到这些年我见过的一些常见的错误，尤其是发生在年轻设计师身上的。所以今天我整理了一些资料，算是我这些年总结的经验吧，主要是教大家怎样做好网页。我认为每一个网页设计新手在开始一个项目之前都应该了解这些知识，在项目开展中也应该注意。好文推荐：《推荐！对于设计师，坚持是什么？》《经验分享：使用AI绘制复杂光滑曲线》《PS教程：教你创建甜美精致的蛋糕》这些概念不仅仅是网页设计方面的，还包括现实中的工作流问题，它可以帮你更好的完成工作。如果你能将这些知识融会贯通，假以时日，做一个专业的网站布局就不

2、是问题啦~01.将你的想法先在纸上画出来这是一幅世界各地不同年城市特色建筑的草图这个想法看起来好像理所当然，似乎每个人开始设计之前都会在纸上画草图。但是据我观察很多设计师都跳过了这一步，从没有考虑过他们将会面临的问题。设计就是要解决问题，但是这些问题通过渐变、阴影设置是解决不了的，只有通过调整布局和层次结构才能解决。所以在你开始设计之前，一定要先想好布局。02.描绘一个顶层框架描绘一个基本的框架可以帮助你解决UX方面的问题，同时规划布局。当我接手一个项目的时候，做的第一件事就是建立一个顶级框架，这样可以解决所有的设计问题。这个框架是指环绕在内容周围的UI，它可以

3、帮助我们执行操作，更好的操纵页面。它包括导航和组件，比如侧边栏和底部的按钮。如果你通过这种方式来做设计，在不看主页的情况下，你也能清晰的知道应该怎样布局。03.给PSD添加网格这是一个有978个网格的PSD文件，每条线的宽度为10PX。画网格做起来就像听起来那么简单，虽然你不画直接开始设计完全可以，但是我相信设计出来的作品绝对没有画了网格好。网格的好处就是帮助你构建不同板块的布局，起一个指导作用，帮助你制作响应式模板。推荐工具《PS参考线插件GuideGuide下载及使用说明》04.选择你的字体网页设计中很重要的一个原则就是一个网页中不要出现两种以上的字体在一个

4、项目中，寻找好看的字体也是很重要的一部分，但是我要提醒你，在同一个网页中千万别使用两种以上的字体。选择字体的原则就是要易于用户阅读，尤其是文字很多的页面，文章标题的字体可以有趣一些，这样能吸引用户的注意。在使用字体的时候不要畏首畏尾，个头大不是问题，只要整体看起来很和谐生动就行了。05.选择合适的颜色主题使用有限的颜色和色调，减轻用户的视觉压力。在选择字形的时候，你就应该想好用户界面、背景、文字该用什么颜色。我建议你在颜色的原则方面一定要有节制，别想到哪个用哪个，最后五颜六色乱七八糟的，这也是大忌。在这一步中，你要根据每个元素的功能选择颜色，并且在用户界面中，相

5、同的元素颜色一定要一致。你可以观察一下facebook、推特、quora、vimeo等等网站的页面，在不干扰功能组件正常使用的情况下，除了用户界面，它们的插画和平面细节没有任何颜色限制。06.分开布局网页结构越简单，用户使用越容易在网站中，每个模块都要有个故事，要给用户一个浏览的理由和最终的结果。而设计的作用就是强调这个故事中最重要的那部分。在现实设计中，主页面不能将所有的信息都显示出来，所以你必须在主页先告诉用户“进了这个网站你能做什么”。发挥你的聪明才智思考一下你能想到的极简页面，有最简单的目标和必要的构件。最后你会发现，原来保持简单这么困难。07.重新思考

6、我们真的需要搜索按钮吗？在很多案例中，答案是否定。作为一名设计师，是我们一手决定了用户浏览因特网的方式和界面，由你决定用户进一个页面需要多少步骤、一个网页效率有多高。在设计完之后，一定要多测试，发现漏洞，及时修改，这样才能做到极致。08.挑战自我我鼓励每个设计师勇于创新，挑战自我，尽管对一个项目来说，创新并不是要求之一。挑战包含什么？比如使用一个新格栅系统、开发一个新的组件或者不使用混合模式、特殊颜色等等，这些都是挑战。09.关注细节正在制作中的游戏，细节展示这句话你应该听过很多次也记住并实践了，但是在最终的产品中却看不到。细节可以是一个小互动，一个出人意料的动

7、画，或者是一个漂亮的渐变按钮等。我相信如果你真的喜欢手头的工作，那么小细节肯定会有的10.每个组件都需要被温柔善待认真对待每一个组件，最终的结果一定比100分要多。这句话我听了不下一百遍，但每一次都被深深地震惊了。在你设计每个组件的时候，你要这样想：爷设计的组件随便拿一个出去都可以得设计界的奥斯卡。只有这样，整个网页出来后的效果才能惊艳众人。11.让你的作品更加精致为了避免模糊，在背景和元素之间设置正确的对比度。除了考虑审美问题，你还要保证作品的干净整洁无毛边。注意边缘、字体渲染、渐变等问题。12.整理你的PSD文件在用PS做设计的时候，整理PSD文件是一项很重

8、要的工作。除了整理项目的