超有料！给网页设计新手的10条实用法则

编者按：新手常苦于没有师傅手把手教，现在机会来了，今天@AnyForWeb_UDC 同学为大家准备了网页UI设计的10条实用法则，案例全，方法赞，非常适合正在学习进步的新手，来涨姿势吧。

一个主观上很想多多学习的设计新手在工作中最常遇到的状况应该是…没人愿意教！（ps：传统思想告诉我们“教会徒弟，饿死师傅”，所以新人们的如此遭遇也无可厚非；But…另一种可能性是…师傅真的很忙！）

Anyway，今天为菜鸟们奉上关于网页UI设计的10条适用法则，希望能让大家脑洞大开，在设计中得到帮助和启发。

一、纠结的时候，让自然为你做决定！

遵循自然规律的设计总是因为贴近万物本源而受到更多人的宠爱，因此，当你举棋不定的时候，你可以选择将设计代入大自然定律中，让自然为你做出最好的决定。比如，现实和自然告诉我们，光源来自天空，在人们也已经习惯了这种由上至下光线来源的时候，设计师需要做的应该是能顺应用户视线的光线设计。

二、脱离色彩诱惑，能真正看清布局设计

色彩对人类视觉的冲击力能产生最大的效果；一个网页的用户体验是否合格，从色彩和布局上就能看出一二。但在色彩的“陪同”下，布局的好坏与否似乎就此被“矮化”。为了让设计师在设计时能更加清楚的审视网页布局，去色或是“灰度模式”的使用也许更有利于新手的布局设计工作。

灰度模式：

没有了色彩“打扰”之后的网页布局一旦能够让自己满意，再按照色彩理论或是个性喜好添加和更改颜色。

想呈现你最关键的内容，推荐：《吸睛大法！有哪些方法可以突出网页中的关键内容？》

三、设计感是“留”出来的！

大胆留白是设计概念中常常会提到的理论，但真正能根据理论具体落实的设计师却为数不多。可能是因为设计师胆儿不够大（PS：怕被客户喷死，“你是不是偷懒啊！怎么内容那么少！你到底有没有认真做设计啊！@#￥%......&*!”），另一种可能是没有在实际中领会到留白的美妙。

网页设计中的留白是为了在有限的容量中预留一些让其中元素呼吸的负空间，并不是一种所谓的“偷懒”行为。大片留白在国内市场中极有可能面对各种不满，但小范围的留白却能很有效的提高整个网页的档次。比如网页中图片与字句之间的间距，只要留出两倍及以上的间隙，整体都会展现出令人眼前一亮的简洁感。

留白方法见：《高端网站都懂的！如何在网页设计中使用留白》

四、试试把文字直接放在图片上

这种设计手法看起来很简单是不是？但要用这种方法设计出一鸣惊人的网站就有一定难度了。在应用过程中，为了不破坏网站的用户体验，有几点可以特别关注。

文字的颜色尽量使用白色，让网页看起来更大气；因此，网页背景图的色系选择以暗色为主；更细致的话可以再不同的分辨率下进行调试，保证在所有的情况下文字或主要内容都是易于辨识的。

五、关于字体，适合比新颖更重要！

“坚定求新”是很多设计师的职业病，其实，在任何事件中，适合，比什么都重要！

在网页字体的应用中，形形色色的字体样式会让设计师不知如何是好，设计师也许会因此挑花了眼，也许会始终在常用的几种字体中互相转换。而关于字体的选择，设计师应该根据图片中的某些元素作为灵感，以此在网页中自然地形成隐形线索。

选择字体的好文推荐：

• 《字象乾坤之字体的性格》
• 《再也不纠结字体选择了！超全面的英文字体小结》
• 《不会挑选字体？来看看字体的7种类型及特点》

六、只有强弱并存才会获得对比

用强弱的对比展现重点突出是设计中强调内容最自然的方式。比如背景图的弱化，加上清晰的文字或图案，网页会因此营造出以后总别致的唯美效果。如果图片比较单调，也可以在背景和文字的中间添加一些透明度较高的线性几何成分，让页面丰富充实起来，也让整体不再单薄。

运用好对比的具体方法：《设计基础功！帮你彻底掌握设计四大原则中的对比原则》

七、你需要一双善于发现的眼睛

身边的一切都可能随时为你带来灵感，千万别吝啬你的眼睛！

每一个细小的部分都有资格成为你的设计元素，你应该让它们产生一些小改变，它们就会让你的设计大提升。滤镜？几何？每一种效果都需要你的尝试。

八、桃红色&浅橙色！她们才是真正的百搭色！

粉嫩的暖色系色彩一直会被误认为是很难用的颜色，当这类色彩被混杂在五颜六色的“调色盘”中的确够难搭配，那不妨尝试一下在单色背景中使用她们，无论是稍作点缀，还是设置为主色调，你都一定会发现其中的不张扬魅力。

九、导航是网页中最重要的设计

导航可以说是整个网站中最重要的设计，用户体验舒适与否很大的决定权源自于此。对导航设计的最佳评价应该是“召之即来，挥之即去”。幽灵按钮、汉堡图标和无线框纯文字设计都是好导航的常用设计手法。

不需要的时候，导航只是个小小的汉堡图标。

展开之后，它是这样的：

也可以根据你的意愿让它随时消失。

又或者展开前是如此低调的存在：

打开后以色块的形式呈现，让近视患者也能清楚的分辨：

九、减去页面之间的相同存在！

相同的部分在网页设计中显得毫无意义，不仅让网页逻辑变得繁杂琐碎，更会让用户觉得反感。尤其在布局一致的情况下，内容的差异化尤为重要。这些差异化可以从很多方面表现出来，比如色彩、文字、风格等等。

差异化的最全范例：《经验分享！超实用的文本处理技巧》

如果想设计更特别的网页，你可以选择这样做：

总结：

以上是我们为正在努力加油的大家总结的网页UI设计法则，有可能你对上述内容已经听闻过许多，但其中的意义还需要在实践中渐渐摸索领悟。

Finally，多多练习，根据设计环境不断优化自己的实战经验，做一个机灵的设计师！

【配色达人速成三部曲】

Step 1：打好色彩基础是关键呦！
《设计师配色宝典！教你从零开始学配色（一）》

Step 2：进阶技巧！向高手模仿是捷径！
《配色弱有救了！教你利用图片创建独有的色彩方案》

Step 3：直接开挂！不保证顶尖但一定正确！
《秒变配色高手！怎么都不会错的6条网页设计配色原则》

原文地址：design.anyforweb

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量89万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
官方微信：想在手机上、被窝里获取设计教程和各种意想不到的"福利"吗？添加优设哥微信号：youshege