涨姿势！优秀产品人必啃的19篇网页设计干货丨壹佰干货铺 | 产品壹佰

【特别提示】

由于本期干货铺文章图片太多，所以Yosa并未制作PDF，请各位客官直接戳原文链接阅读学习，么么哒！

另，本周四晚8：00壹佰大讲堂，我们特别邀请了银联商务产品总监、前百度产品经理杨明老师为我们讲授”从0获取100万种子用户的运营秘技“！听课完全免费，戳这报名咯~

---

锵锵锵锵，产品壹佰第十一期干货铺和大家见面啦！我是掌柜的Yosa。

上期《你设计的App不合格？15篇干货洞悉优秀产品设计流程丨壹佰干货铺》在我们的微信订阅号”产品100干货速递（chanpin100ghsd）“和微信服务号”产品100（chanpin100）“发布之后，受到了许多小伙伴的喜爱，看来大家还是很爱学习的嘛，掌柜的赏你们一人一包香瓜子！

在查看大家的留言时，有两位客官向掌柜反映，自己正在为网页设计而头痛，很希望看到和网页设计相关的干货。所以本期干货铺，Yosa特意搜刮了我们网站最”干“的19篇网页设计方面的干货，请客官们妥妥收好！希望大家啃完这些干货之后，会觉得自己成功踏进了”网页设计“这道门^ ^

能力出众的产品经理，应该有对于网页的鉴赏能力，知道什么样的设计是好设计，有对设计的平衡感。

产品经理作为一个产品的掌舵手，需要掌握跟了解的技能是方方面面的。同时，在一个产品从用户需求到产品原型，到产品发布的过程中，它是一个集思广益的产物，是团队合作的产物。我们在产品原型的设计阶段，需要自己设计功能，交互逻辑，同时需要与设计师有良好的沟通。产品经理要负责向设计师讲清楚产品的定位，目标用户，需要传达的信息跟情感。产品经理作为一个产品的整体把握，是全局吃透了该产品的整个想法的。所以产品经理在产品的网页设计方面，需要了解到什么程度呢？自己设计出原型，产品功能与交互逻辑的清晰理解与实现，与设计师沟通的时候准确表达意图。

想要获得快速成长，产品经理就必须要知道一些网页设计知识。Let's begin！

一、入门须知：想学网页设计？你首先需要知道

快速发展的技术、千变万化的趋势、应接不暇的软件和素材，都是网页设计师需要面临的挑战。但是撇开这些一直变化的东西，有一些基本的技能或者说能力，是设计师必须熟练掌握的，甚至闭着眼睛都必须能搞定的问题。那么，今天我们简单盘点一下，想学习网页设计首先需要知道的哪些基础知识？

1.PC端网页设计

推荐干货>>>《网页设计必须get到这10个技能，请收好！》 

色彩、流程、平衡、比例、间距，这些常见的设计概念你都了解了嘛？当你在进行设计项目的时候，这些概念你都应当了解并运用起来。设计并不是单纯的好看，内在的概念也原理能告诉你为什么它这样才会漂亮。理解了它们，能自己解释它们，你才能创造出平衡的美感。

每一次向别人解释这些概念，探讨这些原理，你会对这些基础掌握的更加扎实。

推荐干货>>>《厉害了！14款帮你提升网页设计和开发效率的网站与工具》

实际上，网页设计本身一直在逐步的转变和调整，这也使得我们所用的工具和服务也逐步随之转变。所以，我们需要推荐一些最新的、实用的、贴合当前网页设计需求的工具和服务，来帮助用户更好的应对不断进化的需求。

今天所搜集的这14款工具和服务，覆盖网页设计所涉及到的各个不同的层面，有线框图工具，HTML转化服务，甚至包括一部非常极客的漫画。这14个工具与服务覆盖面足够广，总归有几个会让你动心。

2.移动端网页设计

推荐干货>>>《精品译文丨想搞定移动端APP/网页设计，你起码要做好这些事情》

如果你曾仔细观察过近些年来那些优秀移动端产品的交互设计，会发现它们都拥有一个共性：它们在基本的功能和设计上的执行都相当的完美。

它们从最基本的人类行为模式中汲取营养，然后通过优秀的设计和执行，为用户悄无声息地扫除了所有的障碍，这个时候，用户会感受到其中惊艳的视觉效果和突出的互动体验，其中尤为突出的就是浏览体验。今天的文章，就让我们一同来梳理一下，有哪些关键而核心的移动端设计项目，总结一下今天移动端设计的“核心考点”。

推荐干货>>>《跟着建议走！这样的移动端网站设计才对头》

虽然移动端优先的口号喊了这么多年，我们仍能看到许多“不称职”的移动端页面。看似理所当然的网页背后还有着许多弯弯绕呢！今天的文章简单梳理了一下移动端网页设计常见的问题和技巧，说不定正是你想要的呢~

移动端的用户往往拥有着更加明确的目的性，通常他们希望能够明确、轻松地从移动端页面获得他们想要的信息和内容。无论是浏览新闻，网上购物，还是订阅信息，移动端网页应当为他们提供尽可能无缝的用户体验。

今天的文章，我们就从用户需求和体验的角度来探讨一下，移动端网页要怎么样设计才对头。

二、进阶打磨：从点到面，网页设计技巧逐个击破

1. 排版布局

设计本来就是一种理性的科学门类，审美因人而异，只有言之有理的设计才能说服别人，运用几何学的手法就是设计师的利器之一，科学的设计并不会限制你的创意，它只会帮助你的作品成为精品的必要手段之一。

从古至今，人类从自然界中得到过无数的启示，其中就包含黄金分割。这个从贝类完美的生长方式中提炼出的曲线，改变了所有人的审美。

推荐干货>>>《网页设计该如何利用黄金比例？》 

黄金比例自然会吸引用户的眼睛到页面上某个特定的点。 作为一个概念，它可以帮助你思考内容的布局以及有效利用层次结构，组合布局，排版，色彩和总体原则，将有助于将你的设计水平提升到一个新的阶段。

推荐干货>>>《网页设计致胜关键点：合理的排版布局》

任何一个具有创意的网页设计方案，都会把目光聚焦在布局和色彩搭配上。这个餐饮o2o网站独特的地方，就是在用户界面上推出了各种吸引眼球的甜点冰淇淋。网站的排版布局比较简约大气，适当的留白，再加上一些美观的字体设计，让整体看起来更加时尚有活力。  

网页设计有一个终极目标，介绍鼓励用户去点击、去操作。这些操作行为包括注册或者查询内容等。这样就要求设计师能够把登录注册按钮突显出来，让用户一下子就能注意到，设计师需要以用户的角度出发去考虑这些问题，才能做出更好的用户体验设计。  

2. 色彩使用

无可争议的是，色彩是任何设计领域中最重要的一方面。

设计师在决定了一个网站风格的同时，也决定了网站的情感，而情感的表达很大程度上取决于颜色的选择。颜色是很有力的工具，所有设计师在设计网页时就应该明白这一点。

推荐干货>>>《一份简单明了的网页设计用色指南》

其实我并不是想说某种革命性的用色技巧或者某个全新的发现，但是绝大多数的网站配色看起来确实非常相似。那么配色的意义又何在呢？如果全世界所有的网站都采用五彩缤纷的配色，那么不会有任何网站从中脱颖而出。当然，今天的网页设计界已经很接近这个状况了。从这个角度上来看，柔和的色调会更容易让用户眼前一亮。

推荐干货>>>《如何巧用色彩打造动人心弦的网页设计》

科学研究表明，色彩会影响情绪，会招致正面的情绪，也能带来负面的影响，有的时候带来的情绪与实际要的并不匹配。Kissmetrics 接着补充道，网站的访客通常只需要大概90秒就能针对一个网站作出判断和选择，而在者其中，有62%~90%的因素是取决于某个产品的色彩。

3. 细节设计

优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别，但他们可以找到自己喜欢的网页设计作品。慢工出细活，以下这些网页设计中的细节你都会了吗？

推荐干货>>>《干货丨让我们谈谈网页设计中的卡片式设计》

“我要卡式的”，这是上一期客户在和我聊需求的时候说的第一个需求点。毫无疑问，卡式不论是适应PC还是手机都表现优秀。从在线商城到社交媒体网站，卡式设计成为网页设计中的一股强大风潮且风头正劲。其中最重要的原因想必就是它的灵活性。

卡片，可以是任何形状、颜色和形式。但是总的来说，他们都包含了图片、图标和一些基本的文字信息，例如标题、用户名和位置信息。

作为网页设计师，你该如何使用卡片？当在设计卡片时，你应该注意些什么？下面让我们来谈谈。

推荐干货>>>《技巧总结网页设计师必知的高效导航设计三原则》

为网站设计导航就如同为房子打基础。如果地基不牢靠，再壮观的设计也无法掩盖建筑结构的潜在风险，其实网站也是如此，如果想让网站拥有优秀的用户体验，良好的转化率，可观的销售额，你需要花费相当的时间去了解你的用户需求，精心设计网站的内容，寻求可靠而直观有效的内容组织体系，而这些东西的外化体现，就是网站的导航设计。

三、案例集锦：鉴赏优秀案例，警惕反面案例

1.精彩案例

成为大牛前，怎么能不看大牛的作品？以下这些网页设计的风格不一，配色大胆。设计新颖，你绝对值得一看，希望能给你带来启发。enjoy！

推荐干货>>>《独辟蹊径！20个精巧走心的单页滚动网页设计案例》

单页滚动也算是目前网页设计中一个独立的类别了，导航、菜单等网页元素的设计也有一套独特的手法。极简风的导航栏设计其实算不上太多，毕竟导航栏的部分应该是包罗万象并且常驻页面的。而汉堡菜单的存在让导航具备了更优秀的隐藏性，摆脱了滚动条、分页和复杂的下拉框，让页面更整洁，为视觉设计留下更大的空间，留住了用户。

推荐干货>>>《身临其境！那些给人逼真交互体验的优秀网页设计》

完美的场景营造和新奇高端的设计和开发技巧是有着依存共生关系的。当我们谈及实现方法的时候，可选的设计技巧有很多，从静态的图片构建的全息影像，到细腻的3D建模，设计师可以自由地选取不同的技巧来加入动态元素，构建足够专业的场景，用丰富有趣的细节来实现令人经验的用户体验。

这种强交互、多元素的场景营造，多少也算得上是一种设计趋势，今天我们所准备的网站案例都具有这样的特征。

推荐干货>>>《年度力作！20个惊艳而全面的年度总结优秀网页设计》

在大量的动态效果和各类手段的加持之下，界面越发的惊艳，统计数据加持之下的信息的呈现方式足够突出，相当优秀。以往正规而严肃的内容在设计师和艺术家的润色下，开始表现出令人振奋、充满娱乐精神的一面，数字化多媒体的加入则让原本单调枯燥的数字焕发出不一样的生命力，带你开始一场华丽的冒险。

2.反面教材

网页的技巧很多，但是核心的就那么多。字体的选取和搭配，排版布局的规则，留白的规律，说起来复杂，梳理起来也不是特别多。那么就让这些反面案例帮你绕过设计上的坑，帮你打造真正令人难以忘怀的好作品吧。

推荐干货>>>《这些错还在犯吗？网页设计中常见的五种交互设计错误》

交互设计从来都不是简单的事情。可靠的交互通常需要借助对用户行为的深入分析，然后有针对性的精心策划。可是随着新的技术和新的交互模式的不断涌现，事情就变得不是那么容易了。

其实大家遭遇的困境都很相似，用户已经很难被单纯炫酷的图片、流畅的悬停效果和出人意料的动效所打动，真正能让他们露出微笑的是持久、令人愉悦的交互设计和用户体验。如果你对于日常的设计中的常见的误区有所了解，自然会有意识地绕过这些坑。

推荐干货>>>《给新手的反面教材！7个让人抓狂的网页设计》

有些时候，当我满怀期待地点开某些网站的时候——它们的存在简直是设计的灾难！相信我，当你看见它们也会抓狂的。从莫明的链接丢失到糟糕的可用性，我将会分享一些会让我瞬间暴走的错误设计。注意！千万别让你的用户遇到和下面同样的问题。

四、灵感迸发：必须了解的网页设计潮流趋势

设计趋势每年都在改变，出于各种原因，有的设计趋势在演进中逐渐消失，有的则在大家的熟练运用过程中渐入佳境，甚至逐步褪变成为主流。

你并不需要了解全部的网站设计和技术趋势，但是你需要适时地去了解它们。简单来说，重要的不是对所有趋势如数家珍，但是你至少要深入了解至少三个流行趋势，能够说明白这些设计趋势在视觉上的特征，为什么要用它们，它们的运作原理是怎样的，你为什么喜欢或者不喜欢它们，等等。多阅读设计趋势文章，你就能搞定这一点。

推荐干货>>>《来看看将成为明日主流的七大网页设计趋势》

今天我就自动请缨，敢冒天下之大不韪，用本人尚算深厚的设计背景以及对这几年设计风向的观察，跟大家提提我对未来网页设计风潮的风口的猜想。如果大家觉得说的还算有点道理的，有钱的捧个钱场给个打赏，没钱的捧个人场评论转发来声呐喊。当然，如果大家觉得这是一派胡言的话，那也就只能请你赶快离场，等下一篇文章上来再请你来好好捧场。

推荐干货>>>《2016年网页设计领域11个流行趋势预测》

来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势，而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势会在2016年逐一涌现，但是总体上来说，它依然会沿着2015的大趋势来逐步演变。可以预见到的是，2016年会有更多的网站使用视频背景，更多基于Material Design 风格的界面设计，幻灯片式的界面切换也会继续火热下去。

推荐干货>>>《涨姿势！悄然流行的混合型视差网页设计趋势》

如果你仔细观察那些最新的使用了视差技术的网页，你会发现这些网站所采用的视差设计已经似是而非了。这些网页中的可动元素非常之多，但是并非动画；配色风格和视觉元素趋近于扁平风，并且借用了来自Material Design的物理隐喻，融合了许多微妙的交互细节。诸多时下流行的设计手法和新趋势开始被打碎分解揉合到一起，形成了新的混合型视差滚动网页。

推荐干货>>>《查漏补缺！极有可能被低估的三种有趣的网页设计趋势》

一种全新的设计手法，融合了最新的设计技巧，展现和前人不同的气场，用更现代的气质来承载内容，这样的网站无疑会更加吸引用户，让访客难以忘怀。今天要聊的三种设计趋势其实已经出现一阵子了，但是作为一种相对综合的设计手法，他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法，就可以实现这三种设计效果，但是它们不论是从美学特征上，还是从功能性上，都不输于其他的趋势。有兴趣么？不妨来看看吧。

-完

-本期专题互动-

简约朴素的网页和前卫鲜亮的网页，

你更喜欢哪种风格？

Yosa更喜欢简约风~

把你的观点和大家分享一下吧？

「壹佰干货铺」——互联网产品、运营、设计、职场精品干货，应有尽有！

咱们下期再见~