手机

教育资源为主的文档平台

当前位置: 查字典文档网> 所有文档分类> 行业资料> 文化创意> 设计学习:模块化设计新手的入门指南

设计学习:模块化设计新手的入门指南

上传者:吕红
|
上传时间:2016-10-14
|
次下载

设计学习:模块化设计新手的入门指南

扁平化设计流行起来之后,现代简约风与之结合产生了许多视觉上以区块为主的网页设计作品。对于设计师而言,这种设计方式既时尚,又富于功能化,网站结构流畅、简单,与响应式的设计也有着天然的兼容性。

这种设计趋势的出现,追根溯源就是模块化设计。模块化设计并不是什么新鲜的东西,有过编程开发经验的同学对此应该不陌生,对于工程学有了解的同学,对此就更加熟悉了。反观我们所学习的各种设计理论,模块化设计的设计思想也深深地植根于其中,各个领域的设计师对于模块化设计也早已运用纯熟。而今天的文章,我们准备从实战的角度来着手,看看模块化设计的思想是如何快速地融入日常的设计中去,帮助设计新手快速上手。

什么是模块化设计?

模块化设计指的是整体中所有的部分都是由被划分为小块的模块而组成的,不同的设计元素被放置于不同的矩形模块中,不同的模块合理而有序地组成特定的功能区。

正如你所知道的,模块化设计存在的历史非常悠久,覆盖的领域也相当广泛,你所看到的报纸版面就是报社的排版设计师的杰作,他们将不同的故事,不同的图片分割成不同的区块(模块),然后整齐地匹配到整个版面中去。模块化设计之所以广受欢迎,是因为这种设计方法是组织和管理内容的好方法。

对于涵盖大量内容的设计项目而言,模块化设计常用的栅格系统有着极大的用武之地,它可以以极大的包容性将许多看似没有直接关联的内容,合理地呈现并整合到一个界面中来。而之前我们所说的报纸就是最典型的案例,在一块固定的大画布上将各类内容均匀、相互无干涉地呈现出来。

模块化的栅格系统在网页设计中更强大了,栅格系统天然的灵活性不仅体现在特定版面的网页排版上,响应式设计更是将模块化设计推上了另一个设计工程的顶峰。单纯的模块化设计讲究的是布局的技巧,而设计风格的融入令模块化设计拥有了厚度,极简风自是不必说,Material Design和卡片式设计几乎可以富于模块化设计以新生。

虽然模块化设计需要前端在实现的时候稍费神,但是本质上它真的就只是一个基于栅格的设计系统,和任何其他的栅格系统没有太大的差别,加上强大的内容组织能力,它几乎适用于任何项目任何风格。

植根于其他领域

 

正如我前文所述,模块化设计并非单纯只为平面/网页/UI设计而生的概念,从程序开发到室内设计,从机械工程到汽车的设计组装,模块化设计无处不在(尤其是这些涉及到标准化的产业,你可以在这里找到许多模块化平面设计的灵感)。

在其他的领域中,模块化设计的适用范畴大到你难以想象,标准化的接口,整饬的布局和空间设计,而这些设计理念、案例、经验都可以合理地转嫁到平面设计上来。办公室里错落有致的组合柜,楼下外墙上裸露的砖墙,都是可以借鉴的模块化视觉元素。电脑、汽车等产品为了迎合大规模生产的产品,在零配件的标准化上做的非常不错,这种模块元素化的设计也非常能启发人。乐高积木和组装模型也有着类似的属性,多玩玩也能帮你开脑洞。

印刷设计中的模块

    

在涉及到印刷的设计项目中,模块化的设计和栅格系统的兴起是分不开的。你所选择的栅格系统和被分隔出来的模块,决定了各个组件的尺寸大小,留白和间距。

好在栅格系统本身就有着极大的设计空间,实际上几乎拥有无限的可能性。几乎所有的平面设计软件都可以制作栅格系统,并且作为模块化设计的基础。当栅格在画布上布设好了之后,整个操作空间被它分隔成一系列规律的区块,这些或封闭或开放的空间就是你用来放置不同内容的地方。

有了栅格系统,你可以自由地选择合理的大小作为模块,自由地组合成页面,视觉元素在横向和纵向上有规律地陈列开来,不论是用来展示,还是响应式地变动都显得和谐而合理。

下面的案例就是在栅格系统中进行图文混排的效果:

 

网页设计中的模块

 

当你刚刚开始接触模块化的网页设计的时候,你极有可能会觉得这种设计是单调而无聊的。这么说吧,任何设计都可能是无聊和有趣的,光看它的结构和框架是不够的。

现在模块化的网页设计是流行趋势,这很能说明问题。时尚而富有创意的元素融入到看似无聊的页面结构中之后,模块和模块之间开始出现对比、差异,色彩和样式的不同让整个页面活起来了。即使是以纯色为主,最扁平化的Windows Metro设计风一样可以让人耳目一新,成为耐看的设计。

当然,Metro也只是一个例子,模块化的设计同样可以为你呈现多种多样的网页设计风格。就想报纸一样,不同的风格取决于你的模块划分和组合方式,网页设计有趣的地方在于,你还可以使用响应式设计,设置不同的断点,令页面在不同的屏幕上呈现出不同的样子。

设计工具的升级,使得设计师和开发者可以制作出所见即所得的网页,就像那些高端的网页主题一样。不同的模块被嵌入到框架中,你甚至无需为模块进行复杂的设计,就可以制作出可靠的模块化的页面。

这也是模块化设计思路融入行业发展之后的福利。

当然,具体如何选取栅格,如果制作网站,最终还是要取决于你自己。模块化的网站通常会采用较大的区块划分模式,为了做好响应式,还得采用更易于重拍的组合方式。比较便捷的方案,是让页面大体具备可分割为对称2列的模式,这样可以更方便适应移动端浏览。而一列到底的划分更适合单页设计,配合视差滚动,这也是流行的处理方式。

看看下面的Newfangled的案例就明白了合理的模块化设计的重要性:

 

 

结语

不要被模块化设计吓到,这绝对不难,借助栅格做好规划,上手飞快不夸张。

原文地址:designshack
优设译者:@陈子木

版权声明:此文档由查字典文档网用户提供,如用于商业用途请与作者联系,查字典文档网保持最终解释权!

下载文档

阅读已结束,如果下载本文可

免费下载 下载

想免费下载本文?

立即加入会员

查字典积分换实物礼品

大量免费文档可下载

创建文辑分享文档

热门试卷

2016年四川省内江市中考化学试卷
广西钦州市高新区2017届高三11月月考政治试卷
浙江省湖州市2016-2017学年高一上学期期中考试政治试卷
浙江省湖州市2016-2017学年高二上学期期中考试政治试卷
辽宁省铁岭市协作体2017届高三上学期第三次联考政治试卷
广西钦州市钦州港区2016-2017学年高二11月月考政治试卷
广西钦州市钦州港区2017届高三11月月考政治试卷
广西钦州市钦州港区2016-2017学年高一11月月考政治试卷
广西钦州市高新区2016-2017学年高二11月月考政治试卷
广西钦州市高新区2016-2017学年高一11月月考政治试卷
山东省滨州市三校2017届第一学期阶段测试初三英语试题
四川省成都七中2017届高三一诊模拟考试文科综合试卷
2017届普通高等学校招生全国统一考试模拟试题(附答案)
重庆市永川中学高2017级上期12月月考语文试题
江西宜春三中2017届高三第一学期第二次月考文科综合试题
内蒙古赤峰二中2017届高三上学期第三次月考英语试题
2017年六年级(上)数学期末考试卷
2017人教版小学英语三年级上期末笔试题
江苏省常州西藏民族中学2016-2017学年九年级思想品德第一学期第二次阶段测试试卷
重庆市九龙坡区七校2016-2017学年上期八年级素质测查(二)语文学科试题卷
江苏省无锡市钱桥中学2016年12月八年级语文阶段性测试卷
江苏省无锡市钱桥中学2016-2017学年七年级英语12月阶段检测试卷
山东省邹城市第八中学2016-2017学年八年级12月物理第4章试题(无答案)
【人教版】河北省2015-2016学年度九年级上期末语文试题卷(附答案)
四川省简阳市阳安中学2016年12月高二月考英语试卷
四川省成都龙泉中学高三上学期2016年12月月考试题文科综合能力测试
安徽省滁州中学2016—2017学年度第一学期12月月考​高三英语试卷
山东省武城县第二中学2016.12高一年级上学期第二次月考历史试题(必修一第四、五单元)
福建省四地六校联考2016-2017学年上学期第三次月考高三化学试卷
甘肃省武威第二十三中学2016—2017学年度八年级第一学期12月月考生物试卷

网友关注

2018重庆公务员面试结构化面试模拟题6.7
2018重庆公务员面试结构化面试模拟题答案5.30
重庆公务员申论模拟题:环保督查“回头看”
重庆公务员行测常识判断模拟题06.22
重庆公务员行测数量关系模拟题07.02
重庆公务员行测言语理解练习题答案06.21
重庆公务员行测数量关系模拟题答案06.25
重庆公务员申论模拟题:“恶狗伤人”事件频发
重庆公务员行测数量关系模拟题答案07.02
2018重庆公务员面试结构化面试模拟题答案6.7
重庆公务员行测判断推理练习题06.11
重庆公务员行测数量关系模拟题06.25
2018重庆公务员面试备考注意事项
重庆公务员申论模拟题:朋友圈设置“三天可见”现象
2018重庆公务员面试结构化面试模拟题5.30
重庆公务员申论模拟题:婚恋网站实名制
重庆公务员申论模拟题:错误的政绩观
2018重庆公务员面试热点模拟题:如何采访拦高铁女子的领导
重庆公务员申论模拟题:缩小收入差距
2018重庆公务员面试结构化面试模拟题5.31
重庆公务员申论模拟题答案:“恶狗伤人”事件频发
2018重庆公务员面试结构化面试模拟题6.4
重庆公务员行测常识判断练习题答案06.14
2018重庆公务员面试结构化面试模拟题答案6.4
重庆公务员申论模拟题:让阳光照进心底
2018重庆公务员面试结构化面试模拟题6.5
重庆公务员行测常识判断练习题06.14
重庆公务员行测资料分析模拟题07.04
重庆公务员行测言语理解练习题06.21
2018重庆公务员面试结构化面试模拟题答案5.31

网友关注视频

【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,湖北省
二次函数求实际问题中的最值_第一课时(特等奖)(冀教版九年级下册)_T144339
沪教版牛津小学英语(深圳用) 四年级下册 Unit 8
青岛版教材五年级下册第四单元(走进军营——方向与位置)用数对确定位置(一等奖)
沪教版牛津小学英语(深圳用) 四年级下册 Unit 4
精品·同步课程 历史 八年级 上册 第15集 近代科学技术与思想文化
第五单元 民族艺术的瑰宝_15. 多姿多彩的民族服饰_第二课时(市一等奖)(岭南版六年级上册)_T129830
沪教版牛津小学英语(深圳用) 六年级下册 Unit 7
冀教版英语三年级下册第二课
冀教版小学数学二年级下册第二单元《有余数除法的整理与复习》
19 爱护鸟类_第一课时(二等奖)(桂美版二年级下册)_T3763925
苏科版数学七年级下册7.2《探索平行线的性质》
【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,天津市
外研版英语三起5年级下册(14版)Module3 Unit1
七年级英语下册 上海牛津版 Unit5
二年级下册数学第三课 搭一搭⚖⚖
化学九年级下册全册同步 人教版 第22集 酸和碱的中和反应(一)
六年级英语下册上海牛津版教材讲解 U1单词
3月2日小学二年级数学下册(数一数)
【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,广东省
【部编】人教版语文七年级下册《过松源晨炊漆公店(其五)》优质课教学视频+PPT课件+教案,江苏省
【部编】人教版语文七年级下册《过松源晨炊漆公店(其五)》优质课教学视频+PPT课件+教案,辽宁省
沪教版八年级下册数学练习册21.4(1)无理方程P18
冀教版小学数学二年级下册第二周第2课时《我们的测量》宝丰街小学庞志荣
19 爱护鸟类_第一课时(二等奖)(桂美版二年级下册)_T502436
外研版英语七年级下册module3 unit2第二课时
【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,辽宁省
30.3 由不共线三点的坐标确定二次函数_第一课时(市一等奖)(冀教版九年级下册)_T144342
三年级英语单词记忆下册(沪教版)第一二单元复习
《空中课堂》二年级下册 数学第一单元第1课时
设计学习:模块化设计新手的入门指南
免费下载
次下载 获取更多特权