【《新拟态风格在网页组件化设计中的应用浅析》6100字（论文）】

新拟态风格在网页组件化设计中的应用浅析摘要本课题主要针对的是近年兴起的新拟态风格，研究和探讨新拟态风格在网页组件化设计中的研究与应用。通过查阅大量的相关材料和学习网页设计相关知识，获悉网页设计需要掌握的知识点：HTML5、CSS3、JavaScript。以及在网页组件化设计与开发中需要掌握的一些主流框架，例如VUE或React等JS框架。要做好一个网页相关开发工具也是不可或缺的，本课题在众多网页设计编辑器中选用VisualStudioCode这一款轻量级IDE编辑器，这款编辑器的好处在于非常适合量级的前端开发，并且自带实时编译功能，方便我们在开发的过程中调试。通过整合这些知识对网页UI设计中的布局和常用组件进行研究，包含按钮、表单、导航、卡片、进度条、静态表格、动态表格和分页等网页常用元素进行新拟态风格化设计。关键词：新拟态风格,CSS3,HTML5,Vue组件化目录第一章绪论 21.1课题背景 21.2课题意义 2第二章新拟态UI分析 22.1UI简述 22.2UI特点 32.3存在问题 32.4拓展——玻璃拟态 4第三章设计与实现 43.1页面布局 43.2美化样式 43.3使用技术 4第四章新拟态的优化 54.1代码优化 54.2组件优化 74.3CSS优化 7致谢 7绪论1.1课题背景 随着时代的发展，信息技术的迅速推进。信息化已成当前时代的节奏，网页做为信息化构成中不可或缺的一个重要组成。但在当前以扁平风格为主流的UI设计在大面积使用的状况下，大量的网页产品同质化越来越加剧，引起用户在一定程度上的审美疲劳。而新拟态作为一种新的风格出现在了各个设计师们的眼前，并被更多设计师认识并使用。该文通过解读新拟态风格的设计原则，理清其优势和劣势，探讨新拟态风格在网页设计中的设计及应用并将其以组件化的形式展现。1.2课题意义近些年来在WEB后端技术的发展成逐渐平稳趋势，而前端这开始迅猛发展。前端近些年诞生出了许多优秀的新技术和新框架，Vue就是众多前端框架中脱颖而出的一个前端技术。在工程师们追求高效率的开发环境之下，催生出了组件化开发的理念。所谓的组件化开发，就是将一个页面拆分成很多块，每一块都可以反复利用，大大的提高了开发效率和降低了维护成本，在组件化开发中，组件被拆分的越细，可复用程度就越高。这就涉及到了封装组件时代码效率的问题，工程师们希望这些组件尽可能的兼容更多的环境，节省时间成本和提高开发效率，这就是组件化开发的初衷。例如组件化开发中，可以将传统网页中，公共的Header（页头）、Footer（页脚）、Navigation（侧边栏）、Navbar（顶部导航栏）以及Tips（信息框）进行组件化封装，传统的网页中，只要公共页面一个地方需要修改，则整个项目所有包含这串代码的地方都需要修改，很有效的降低了开发效率，而组件化设计和开发就没有这样的问题，同样的问题，只需要修改一个组件内的代码即可，甚者不需要修改代码，可以在封装组件前留好插槽，针对不同的环境，传参即可。因此，组件化设计与开发在网页中的意义及其重要。新拟态UI分析2.1UI简述现今扁平化风格风靡全球，大量同质的产品出现，一定程度上引起了用户的审美疲劳，在这种时期之时，新拟态作为一种新的设计的风格出现，逐渐吸引越来越多的设计师的探索。新拟态类型的UI设计起源于乌克兰的设计师--AleXandePlyuto，其Dribbble网站上发布的一组UI设计作品，这是一种新的拟物化设计风格。这种风格一经问世，便引起了大量的UI设计师的讨论和关注，许多设计师开始学习这种风格，并且大胆的使用在自己的作品当中，逐渐成为一种流行的UI风格并衍生出了许多优秀的作品。新拟态这种风格具有扁平化的抽象以及模糊阴影的特征，其核心就是对现实物品受光的视觉状态的一种模拟，使之赋予平面元素一种真实物理的属性。其英文名为Neumorphism，也叫软UI（SoftUI）。简单来说就是一种浮雕效果，介于扁平和投影之间。2.2UI特点（1）色彩颜色能让本身平淡无奇的物品，变得更加透彻和美观，使得被展示的物品主次分明，让人们一眼望去就能找到被展示物品的重点。这对于网页本身来说也是如此，颜色在网页设计中占据着很重要的作用，是用户对于页面的第一映像。同时，它也能表现出一个网站的内容和属性，给与用于足够的联想。整个网页就是一张画布，我们需要对部分进行色彩描绘，使其看起来美观的同时，能更方便用户的使用。区别于扁平化风格中大量高明度纯色块，新拟态设计中的元素颜色风格相对单一，且均为一个色系，色彩对比度低，色彩关系十分柔和。新拟态突出强光照带的明暗关系，它锁定一个光源，越靠近光源的地方越亮，相反，越是远离光源的越暗，新拟态的光源是唯一的。（2）图形将网页设计页面上的构成要素体现，将网页整体的设计意图和风格展现，科学合理的图形不仅能让人觉得耳目一新，更能带给浏览者更为舒适的体验。新拟态风格的图形和扁平化设计的形式基本是一样，图标元素是经过高度概括的抽象化图形，但新拟态风格的元素并不浮动，且颜色与背景高度统一。新拟态在异态下也会呈现不同的状态，比如鼠标经过一个板块的过程是有层次感的，进入和离开一个板块分别表现为凹入和凸出。图形的造型偏向圆润化，有精致的圆角和弧度，并多以卡片样式出现。（3）文字文字在网页的排版和设计中是最为重要的元素，文本是网页信息内容中的主要的载体，是准确表达信息的最为重要方式之一，网页文字的排版直接影响着用户的阅读体验。首先是字体，字体本身就是带有表情的，它会可以将某些特性的气息带入网页中，因此字体的选择在网页中的作用尤为重要。其次是字号，字号在网页设计中并没有特别要求，根据设计师所设计的版式和整体布局来定。最后是行间距，在网页中文字的行间距对可读性和美观设计都有着非常大的影响，恰当的行距会直接影响用户的视觉效果，可以引导用户转换行与行之间的内容。而在新拟态设计中界面中使用多种字体可能会造成过于凌乱，因此一般使用相符合的中英文字体。在新拟态风格中多为使用无衬线字体，因为这种字体给人简洁大方的感觉，行间距一般设置在1.5倍以上，使界面整体干净，拥有醒目的视觉效果。2.3存在问题新拟态风格虽以极弱对比度为突出特点，但这也恰恰是它的弱点，最大的问题依然是缺少对比度，从而导致可见性较差。同时，在颜色的使用上也较有局限性，没有大面积的平铺颜色，只有在极少数的地方用点色彩来吸引人的眼球。其次，整体视觉较为平整，缺少层次感。接着，因为在新拟态风格中，并没有诸如此类对比度的元素，因此元素材质和背景是近乎相似的，而能将他们区分开来的是角度和四周柔和的投影。通常来说，在视觉上带有投影的元素比没带有投影的元素更为突出。这一点在新拟态风格上就不是很适用了，因为几乎每个元素都会自带投影，都漂浮在同一个页面上，用户就很难理解页面中的信息层次关系和视觉层次关系，会给用户理解上带来混乱，从而可能导致用户错误的判断和操作。一个好的网页设计是不需要用户思考的。2.4拓展——玻璃拟态继新拟态之后，衍生出的一种类拟态的方案，这是一种玻璃模糊透明和新拟态结合，派生出了玻璃拟态UI，相比新拟态的色彩单调性的缺点来说，玻璃拟态的色彩容错显得更加丰富，玻璃拟态允许更多的色彩在容器上展示，让玻璃拟态更加栩栩如生。玻璃拟态主要是在透明度和玻璃模糊上对新拟态做了处理，让原本并不透明的新拟态，有了透明度，从而显得更加真实，就如同雨天窗上的玻璃，是那么的惟妙惟俏。第三章设计与实现3.1页面布局在现代网页之中，常采用盒模型来进行制作。在浏览器中，网页是多个div盒子嵌套排列的结果，div在网页中作为盒子的容器，里面放置着文本、图片、视频和链接等对象，甚至是其他div进行嵌套排列。同时，盒子可以进行背景、内边距、外边距、背景、投影等属性等设置，而在新拟态设计中，内容盒子多为卡片样式。这正是要通过调整这个盒子的内外边距、背景色、投影使其成为一个新拟态卡片的弹性布局样式，采用弹性布局，这就要提到响应式网站布局了。响应式网站布局的概念是根据用户的操作行为习惯和设备的尺寸大小进行相应的自适应，例如用户无论是在使用手机还是平板或是电脑，页面都能够自适应使用者的屏幕的大小，进行一些合理的自我调整，无论是图片尺寸还是相关文本排版等都会匹配用户设备的尺寸，以达到一个网站能兼容多个终端。采用响应式布局将不必为单独为不同的设备做专门的设计和开发。先规范页面的布局，将公共模块安装如图3.1.1拆分布局，并做成组件。图3.1.SEQ3.1.\*ARABIC1版式布局（作者设计）在准备工期期间，还需要规划好的网格系统，将每一行划分为12个格子，方便做响应式网站，如图3.1.2所示。图3.1.SEQ3.1.\*ARABIC2栅格布局（来源于网络）3.2美化样式在网页布局的基础上，可以结合层叠样式表（CSS）对页面进行美化。CSS能够做到表现与内容分离的一种标记语言，主要应用于htm\html或xml等文件上，可以使网页上的元素添加各种属性效果。通过CSS给网页设计附加上新拟态风格的特点属性：元素色彩相对单一，与背景高度统一；元素左上角亮色投影，右下角深色投影；鼠标选中元素显示按钮下陷的效果；给予元素圆角效果等属性的设置，通过这些设置使“新拟态网页”更加充实起来。就新拟态风格来说，这种风格更适应卡片、工具类等主要体现核心和功能为主，不需要常进行更新。同时因为新拟态网页背景与元素颜色高度统一，视觉效果主要围绕一个光源进行表现，调整其光源以产生平衡规整的视觉效果，颜色主题切换也极为方便，如图3.2.1所示。图3.2.1新拟态网页组件效果图（作者设计） 核心代码：box-shadow根据上图所示，可以看出新拟态UI的最明显的特点除了单一的纯色色调之外，便是每个板块四周的阴影部分，这也是实现网页拟态UI的核心之一，而实现这一效果的核心代码正是CSS中的box-shadow属性，它可以赋予二维平面图像产生伪三维立体的效果。语法：box-shadow:h-shadowv-shadowblurspreadcolorinset;值说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小color可选。阴影的颜色。inset可选。从外层的阴影（开始时）改变阴影内侧阴影表3.2.2box-shadow语法参照例如：box-shadow:6px6px12px#b8b9be,-6px-6px12px#ffffff!important;代码释义：定义了一个元素阴影，水平阴影位置为6px，垂直阴影位置为6px，模糊距离为12px，颜色为#b8b9be，以凸出的方式定义，并且凹入的元素阴影的水平位置为-6px，垂直阴影位置为-6px，模糊距离为12px，颜色为#ffffff，并且给这个元素阴影加上优先级为important；拓展：在box-shadow属性的基础上，搭配transition属性使用，会让新拟态的动画效果更加柔顺和丝滑。/*设置背景颜色*/background:rgb(236,240,243);/*设置阴影属性*/box-shadow:rgb(209217230)10px10px10px,rgb(249249249)-10px-10px10px;/*给box-shadow属性设置动画*/transition:box-shadow0.2sease-out0s;最后定义触发鼠标hover事件.card:hover{/*设置阴影属性*/box-shadow:000rgba(0,0,0,.2),000rgba(255,255,255,.8),inset18px18px30pxrgba(0,0,0,.1),inset-18px-18px30pxrgba(255,255,255,1)};/*给box-shadow属性设置动画*/transition:box-shadow.2sease-out; CSS变量在新拟态中，整个页面会用到大量的同一色系，所以为了提高开发效率和便于后期维护，将所有用到同一颜色的值，封装为CSS变量，CSS变量是CSS3中引进的一个新的用法，它可以使得复用代码变成公共代码。如图3.1.1，定义CSS样式文件的头部:root，用于存放CSS变量。图3.2.3CSS变量（作者设计）在使用的时候，只需要在被使用的class或者id选择器上使用var(:root-item)即可。如图3.2.4所示。图3.2.4CSS变量的使用（作者设计）3.3使用技术 在进行网页制作时，如果每一个元素样式处理浏览器兼容的代码并不是都需要自己从零开始，也可以选择站在巨人们的肩膀上写代码，能很大程度上的节省项目的开发时间和成本，可以借助一些热门的UI框架，列如Bootstrap、AmazeUI、Layui等。在这些框架当中，最为契合新拟态风格网页组件开发的是Bootstrap，这是一个简洁、强悍的前端开发框架可以实现一个页面的基础部分和解决一些繁琐的兼容性问题，设计师只要在此基础上进行新拟态风格设计。在网页制作的过程中，只凭借Bootstrap框架是不够的，还需借助另一个脚本代码语言JavaScript来实现交互效果。同时为了减轻页面制作时所的时间量，还需使用到一些JavaScript框架来帮助设计师迅速达到目的。在众多框架例如Base2、YahooUI、Prototype、jQuery、SproutCore、DOJO和Vue中选择使用Vue。Vue是中国前端著名工程师尤雨奚开发的一个基于JaveScript开发的渐进式框架，它简单而易于理解的API能改变编写JavaScript的方式。同时在某一些方面，Vue的脚手架工具VueCli能帮助前端工程师快速开发项目，大大的提高了项目的开发效率，并且Vue对组件化开发的支持和完善，使得更贴切的符合本课题的研究对象。Vue淡化甚至消除了真正的跨浏览器、跨设备的界限，以使用运行于Windows、Mac和Linux平台上的InternetExplorer、Safari。很大程度上解决了网页制作时浏览器不兼容的问题。图3.3.SEQ3.3.\*ARABIC1Vue-Cli（作者设计）如图3.3.1这是由VueCli创建的一个单文件组件，课题所使用的版本是Vue3，VueCli本课题使用的是4.5.11，还需要用到Vue-Router，Router版本选择Vue-Router4。VueCli中的组件化开发，是将每一个组件做成一个单文件组件，并且文件后缀名以.vue结尾，这是Vue的独特文件后缀格式，主要用于编译时的识别。在组件内，一般包含以下三个结构，template、script和style，template用于存放HTML代码，HTML代码是页面的原型，script存放的是JavaScript，用于操作页面的DOM元素和数据结构处理以及拓展的需求，而style存放的是传统的CSS代码，这就是一个单文件组件的基本结构。包含这三要素的组件，可复用于公共页面，提高开发效率。第四章新拟态的优化4.1代码优化 首先需要将项目代码按照代码规范书写。（1）使用有意义，可读性好的变量名。

反例：varyyyymmdstr=moment().format('YYYY/MM/DD');正例：varyearMonthDay=moment().format('YYYY/MM/DD');

（2）对功能类似的变量名采用统一的命名风格。反例：getUserInfo();getClientData(); getCustomerRecord();

正例： getUser();

（3）使用ES6的const定义常量。

反例：varFIRST_US_PRESIDENT="GeorgeWashington";正例：constFIRST_US_PRESIDENT="GeorgeWashington";（4）避免无意义的条件判断。反例：functioncreateMicrobrewery(name){varbreweryName;if(name){breweryName=name;}else{breweryName='HipsterBrewCo.';}}正例：functioncreateMicrobrewery(name){varbreweryName=name||'HipsterBrewCo.'}（4）函数参数（理想情况下不应超过两个）反例：functioncreateMenu(title,body,buttonText,cancellable){...}正例：varmenuConfig={title:'Foo',body:'Bar',buttonText:'Baz',cancellable:true}functioncreateMenu(menuConfig){...}（5）采用默认参数精简代码

反例：functionwriteForumComment(subject,body){subject=subject||'NoSubject';body=body||'Notext';}正例：functionwriteForumComment(subject='Nosubject',body='Notext'){...}4.2组件优化将多次且重复使用的代码或页面封装成组件，并且预留参数传递的入口和页面的插槽，避免组件逻辑写死从而导致利用率降低，一个好的组件，应该尽可能的兼容并应用多个场景，使得代码量更加的精简，从而提高开发效率。在VueCli组件化开发中，通常会在组件内部预留sort插槽，在vue3中插槽为v-sort，并且预留ref或props的方式传参，使得该组件可以适应更多的场景。4.3CSS优化在研究的新拟态UI过程中，多次使用到了box-shadow和background属性，且样式是同