扁平化2.0响应式网页的设计与技术探析

开篇：润墨网以专业的文秘视角，为您筛选了一篇扁平化2.0响应式网页的设计与技术探析范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要 扁平化2.0响应式网页设计是美学设计与网站前端开发技术发展的产物。本文分别讨论了响应式网页设计核心技术与扁平化2

>> 扁平化设计初探 扁平化的冲突 扁平化的球星 扁平化设计与拓展 扁平化设计的探究 灭火救援指挥扁平化探析 新闻开放与社会扁平化 “扁平化”的中国大蒜 直销的扁平化浪潮 日趋扁平化的世界 扁平化的心灵空间 组织结构扁平化的应用 扁平化设计在网页上应用的优势 逆向扁平化:厂家营销组织的扁平化 扁平化设计的特征与优势分析 现代企业组织的扁平化结构探析 浅析信息时代的扁平化设计 平面设计中的“扁平化”趋势 基于大数据的扁平化设计研究 多层剪纸艺术对扁平化设计的借鉴 常见问题解答 当前所在位置：l）

很明显，Strongly Typed够简洁，似乎连背景颜色都素净到底，图2的左侧罗列了能够找到的装饰：细微阴影、小圆角、半透明、浅色双线及边框。这些极其微弱细小的装饰元素，具有柔和感和隐蔽性，有时不易立刻被察觉，但却可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意。从实现技术上来看，阴影、圆角、渐变、半透明、线条、形状、按钮这些简单元素可以轻而易举的通过CSS3的border-radius、linear-gradien、box-shadow、text-shadow、opacity等代码完成。当这些装饰效果不再需要像从前那样使用“图片”来制作时，响应式网页在不同终端上调整装饰效果、网站加载及后期改版方面就会更加便利。

在扁平化2.0网页设计中，配色很重要，有人喜欢使用多种明亮和饱和度较高的艳丽色彩进行搭配，也有人喜欢清淡口味的色彩搭配，比如Strongly Typed。从页面所呈现的明度色调来看是柔美高雅的偏浅灰色调。其中，主色调及背景色是接近于明度白色非常浅的灰调，而辅色调的灰在明度上则稍深些。点睛色红色（RGB：237、120、106）不是正红色，它的加入打破了平淡乏味的页面，使用户对网页产生了更多的印象。此外，Strongly Typed聚焦网站的“内容和功能”，搭配使用的装饰效果只有零星的几个（如图2右侧所示），但在简约的同时它看上去依然丰富有层次。究其原因，主要是它对有信息意义的文字和图片的选取、设计、编排上也十分考究，尤其是页面中文字字体、大小、颜色等属性的设计让网页中的文字具有优雅的韵律感，而那些具有实际意义的图片，则画面优美，既是内容也有装饰美感。

4 结论

伴随着终端设备的革新、浏览器技术的完善及前端开发技术的发展，响应式网页设计在未来网站前端领域必将独领。而扁平化2.0用其简约、易用、强调功能、聚焦用户等优势也将成为响应式网页设计的主流风格，这既是现状也是趋势。扁平化2.0响应式网页设计是一个值得探索的方向，虽然当前国内相关案例日益增多，但很多设计依然存在问题，并且“模仿”痕迹严重，缺乏原创；那么，研究如何创造个性惊艳的扁平化2.0响应式网页将成为今后聚焦的问题。

参考文献：

[1] 秦书荣，李新.响应式网页设计的原型研究[J].电子技术与软件工程，2016（11）：9.

[2] 秦岁明.扁平化风格在网页界面设计中的应用[J].包装工程，2015（3）：42.

[3] Ben Frain.响应式Web设计HTML5 和CSS3 实战[M]. 北京：人民邮电出版社，2015（5）：28.45.

[4] 吴丽婷.以功能性为主导的扁平化界面设计研究[J].设计，2014（6）：83.