网页设计「捏脸系统」,5分钟学会网页设计

更新时间:2018-02-12 21:41:15点击次数:360次字号:T|T

对于许多在网页设计刚刚入门的新人,在接到项目的时候,非常希望自己能一拍脑袋就丢出好几个可以惊艳客户的方案来。可是现实往往是:逛了一下午的花瓣、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
文章来源: 关键词: