网页设计「捏脸系统」，5分钟学会网页设计（上）
学会了这套网页设计「捏脸系统」，分分钟丢出好几个惊艳客户的方案来！
对于许多在网页设计刚刚入门的新人，在接到项目的时候，非常希望自己能一拍脑袋就丢出好几个可以惊艳客户的方案来。可是现实往往是：逛了一下午的花瓣、Pinterest、Behance，好像自己已经吸收了大神们八成的设计功力，到了真的要开始着手做的时候，脑袋里却一片空白，不知所措，无从下手。设计虽然是偏向感性思维的一门工作，但通过理性地分析其中的原理，并结合当今的设计趋势，还是有规律可寻的。通过归纳整理，形成了此套网页设计「捏脸系统」，相信玩游戏的朋友对捏脸系统都很熟悉，把脸型、眼睛、发型等各个部位分成不同的模块，每个模块都有很多样式可供选择，这样就能创造出千变万化的造型。网页设计也可以采用这种思路，常用的网页设计都会有相对固定的页面和元素，如果在设计的时候有这么一套「捏脸系统」，相信工作起来会非常得心应手。
一、导航栏:
导航栏用于放置导航按钮，它起着链接站点或者网站内的各个页面的作用。
样式1：导航栏在顶端
在强化导航栏存在感的同时，又不抢banner的风头，结合整体配色，让网站的视觉系统和谐统一。
示例：
by Gajan Vamatheva
by Romain Briaux
样式2：导航栏浮于banner上
这种样式将导航栏变得透明，融合在banner的氛围中，让整个banner显得更简洁、大气，突出了banner的内容。
示例：
by Themes Awards
还可以把logo放在导航中间，既把logo放在了更醒目的位置，也让布局显得更平衡。
示例：
by Justin Coetzee
样式3：导航栏在banner下方
将banner放在了更优先的地位，用户第一眼看到的是banner，然后是导航栏。导航栏起到了一个衔接的作用，让页面不同部分之间的边界显得不那么生硬。
示例：
by Artur Lyakhiv
样式4：导航栏在页面侧边
最大化地呈现banner的内容，将所有的导航按钮隐藏在汉堡菜单中，通过点击汉堡菜单，导航栏从侧边出现。
示例：
by Runyu Xia
by Tom Arends
二、 我们的服务/特点（Our services/features）
通常用icon配以文字描述，让用户迅速地获取信息，了解对方提供了哪些服务或具备哪些特点。
样式1：上下布局
示例：
by Yulko_services
可以让元素适当地冲破边界，能有效地弱化边界的生硬感，并有种“承上启下”的作用，让排版显得更生动。
示例：
by Runyu Xia
by Matus
样式2：左右布局
示例：
by Runyu Xia
三、 我们的项目/作品（Our projects/work）
用缩略图配以文字描述，罗列完成过的项目或作品。
样式1：大缩略图配文字描述
非常直观的表现方式，图片下方有简短的文字描述。
示例：
by Gülçin Gümüş
样式2：大缩略图，在缩略图悬停时出现文字描述
如果想把图片放在更优先的地位并且文字描述较长的话，那么这种样式会很合适。将文字描述的空间都留给了图片，图片获得了更多的展示空间。当鼠标在图片上悬停时，文字才会出现。
示例：
Pinterest优秀作品
样式3：小缩略图，无文字描述
小缩略图适合展示更多的内容，省去了文字描述的空间，图片可以排列得更密集。
示例：
Pinterest优秀作品
样式4：大缩略图配文字描述，轮播显示
以轮播的方式来展示，减少了图片在页面中显示的数量，但增大了图片的大小。通过左右点击或滑动来浏览更多的内容。
示例：
Pinterest优秀作品
样式5：大缩略图，无文字描述，“七巧板”式排版
“七巧板”式排版比中规中矩的井字排版更吸引眼球，减少了单调的框架感。
示例：
by Themes Awards
四、 我们的产品（Our product）
用产品效果图配以文字描述来介绍产品、展示产品特点。
样式1：居中对齐排版
居中对齐显得比较整齐划一，给人一种大气、正式的感觉。
示例：
Pinterest优秀作品
样式2：左对齐、右对齐错开的排版
将左对齐、右对齐隔行错开，形成有效的视觉引导，提升视觉观赏性。
示例：
by CreAtive Web Themes
样式3：产品剖析图
用信息图表的形式来体现产品的特点，带有一定的科技感，会提高用户对产品的可信度。
示例：
Pinterest优秀作品
by Pierre Marais
