㈠ h5页面设计的原理是什么
1、h5页面设计的原理——在代码中实现
设计人员创建了一个很好的层图，包括PSD文件、PNG剪贴图、适当的文件、MP3音频文件、视频文件等等，并将它们与他们的前端工程师同事打包在一起，由他们专门将它们放在服务器上。在代码编辑方面，元素被合并到我们通常看到的H5 web页面中。前端也是H5的最终执行者。它们对恢复设计非常重要。一个好的前端往往决定了一个作品的最终命运。前端工程师可以说是设计师最好的行业导师。我们必须虚心向他们学习网络编码技术。
整个H5页面将被推到互联网后，代码编辑和测试。有时，前端工程师的工作量远远高于设计，这取决于项目的形式和难度。
2、h5页面设计的原理——没有代码实现
没有代码并不意味着你不需要前端工程师，但现在互联网上有很多H5页面生成工具，以网站的形式，命名为第三方平台，由大量的工程师开发，以帮助没有前端资源的设计师。您可以将设计好的数据上传到第三方平台的服务器上，自己编辑发布。这个过程不涉及程序员，可以节省大量的人力成本，而且简单快捷。但缺点是平台功能单一，效果有限。它通常以幻灯片的形式出现。工程师生成的H5页面可以定制。现在市场上有很多这样的平台。
无论是第三方网站设计工具，还是诞生于H5的前端工程师，都需要h5页面设计的原理。与前端工程师的沟通应该从设计开始就开始。尽量避免所有设计都做得好，前端无法实现的尴尬局面。所以设计师和前端工程师之间的沟通是非常重要的。后续将会有更多关于ui设计中各个分类的设计技巧与资讯，可以点击本站的其他文章进行学习。
㈡ 前端通用组件设计
调用组件库的API相信很多人都会用，但是如何封装一个高复用的组件并不是每个人都能做到，而这也是检验一个前端开发人员的一个标准。
说到开发组件，首先需要考虑一个问题，一个可复用的组件都需要具备哪些必要条件。
1. 细粒度考量
看过设计模式的朋友应该有了解过很多设计原则，其中一个就是 单一职责原则 ，这个原则放在开发组件中也同样适用。在原则上一个组件就只负责一件事，这就是单一原则所带来的好处也非常明显，就是可以更大可能的复用组件。但如果职责过于单一，也会造成组件碎片化严重，过于抽象。
因此我们需要考虑，所谓的单一职责原则是建立在可复用的基础上的。否则，可以做为独立组件的内部组件进行使用。
2. 组件通用性考量
组件设计之初是为了当时的页面设计进行封装设计的，那么之后的页面设计极大可能是与之前不同的，那么之前设计的组件就不能用了。
而一旦发生这样的情况，就说明我们之前所设计的组件是不通用的，需要重新设计了。就像Antd组件库那样，预留了dropdownRender进行组件渲染。
通用性的设计就代表着将放弃对DOM的操作权，暴露给开发者进行操作，组件开发者本身只负责底层逻辑和基本的DOM结构。这也是开发通用型组件的秘诀之一。
3. 技术选型
css存在着许多的弊端，例如样式易冲突（没有作用域的概念）、书写繁琐（不支持嵌套）、缺少变量（不便于一件更换主题）等等。而解决这些问题的方案也是层出不穷，从最早的css预处理，到后来的Postcss，再到后来的styled-compontent，各种方式任君选择。
4. 打包工具
产品的设计思想固然是核心，但是也需要一堆辅助工具来来帮助我们开发，例如编译工具、测试工具、打包工具。
说到打包工具，就不得不提一下如今非常火爆的，需要配置工程师专门配置的webpack了。但是他也有一个强大的竞争对手 rollup。
rollup更适合用于组件库的打包，优势如下：
设计一个轮播图组件
学以致用，学了就肯定要实践一下。轮播图是一个比较常见的组件，每个组件库中都封装的有，接下来我们也来介绍一下如何设计一个轮播图组件。
1. 轮播图原理
通常情况下我们使用轮播图是这样编写的
那么为什么放入了四个div盒子却只显示一个呢，这是因为可视区域是固定的，只需要移动div盒子就可以显示出后面的盒子，这样就达到了轮播的效果。
为了是观看效果更好，我们都会隐藏掉可视区域之外的内容，这样就是大家经常看到的轮播图了。组件就可以这样设计：
可以通过transform: translateX()不断改变SlideList的位置，就可以达到轮播的效果了。
2. 轮播图的基础实现
知道了基础原理就可以进行组件的实现了，这里以移动端轮播图为例。
首先，获取移动端可视窗口的宽度。
------- 未完待续 --------
㈢ 网站建设中UI设计应该要遵循哪些原则啊
UI是User Interface(用户界面)的简称。UI指的是设计软件的人机交互、操作逻辑、界面的整体设计很漂亮。好的UI设计不仅让网站有个性，有品位，但也使现场操作简单、舒适、自由、充分体现网站的定位和特点。我们在网站建设中应该如何做好UI设计呢？
一、清晰的界面往往会给用户留下深刻印象
清晰的界面，这是每个UI设计人员必须从指导方针。模糊，不清楚的主题界面不是用户喜欢的原因。模糊的web界面，可以给用户以混乱的假象，所以很容易导致疲劳。因此，UI第一件事要做的就是建立接口的清晰的思维，从而将这一思想应用到实际的发展。它将在很大程度上改善用户体验。
二、遵从“简洁但不简单”的设计原则
UI设计，清楚的是第一个元素，但绝非一个清晰的接口是一个很好的产品。UI设计，不仅有一个清晰的接口，而且给用户以简洁的感觉。用户的第一印象是非常重要的。和简单的用户界面设计原则会让用户在最短的时间内找到他们想要的内容，避免用户在繁杂的内容不断探索。现在许多网站都知道这个问题，许多网站进行修改，就现状而言，奉承是UI设计应该考虑的一种方式。
三、给用户以熟悉的感觉
所谓的给用户熟悉的气息，主要是指在UI设计的过程中要遵守一定的原则。这里所致的熟悉，是指大家都非常熟悉的操作你不能刻意的去改变，比如：有下划线的指的是超链接，你总不能颠倒过来吧？差号就是倒退或者删除按钮，这无论你怎么创新，至少在目前来说，这不能改变吧？
四、和用户交互，提升页面响应速度
UI的最终目标是改善用户体验，必须注意两个相应的加快页面的用户体验。所以，UI设计人员，相应的页面还在开发过程中必须考虑的一个重要点。
五、整体风格要保持一致性。
还有一个必须注意的设计界面:整个的要点有统一的风格，比如主页是平的，所以最好列和内容页面将会发展成一个夷为平地;简而言之，整体风格必须统一，这不仅包含统一，颜色的搭配也统一字体、布局、等，这是一个比较广泛的概念。之所以在UI设计中要保持一致的风格，这完全是站在用户的角度来思考问题的：只有保持统一的风格，才不会让用户在访问页面时产生错愕的感觉。
六、增加美观度，给用户以愉悦之感
美丽的程度，顾名思义，是整个UI设计美丽的学位。美丽的程度较高，用户将爱不释手。“简单”是提高审美的秘密武器。加入“纹理”UI设计，它将使你的网站更不同，更加完美。
总之一句话：美好的事物总是会让人心神向往。而增加美观度，就是让产品成为美好事物的必备条件。
清晰的框架，简洁的网页设计，美观的界面，友好的互动体验，这些都是一个成功的UI设计所必须的。我们在进行网站建设时，如果遵循着几条原则，另外加入自己的创意在里面一定会成为一位好的UI设计师。我是从无锡网站建设（http://www.thcec.net/）里找到的资料，希望能给你帮助！
㈣ 什么是前端架构
架构设计的最重要目的是为了进行整体系统概览，以及开发方向指导。
而架构要包含的内容，简单说就是下面四个
1、系统间关系
2、系统内关系
3、应用内架构
4、系统规范与原则
而架构的原则主要是三个方面
1、架构的合适：架构就像衣服，不能太长，也不能太短
2、可扩展的：架构需要充分考虑扩展性
3、持续不断的：架构不是一次性物品，是一个跟着软件生命周期的长期过程
㈤ 怎么样才算是优秀的前端工程师
首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度！做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。
再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。
这时候，你才能算是一个严格意义上的“前端”工程师。可见要想成为一名优秀的Web前端工程师是需要经历一番历练的，有基础的人可以自学，没基础的需要参加Web前端培训课程，这样学起来更方便。
㈥ 前端拿到UI设计的图 如何开始布局设计
前端拿到UI设计的图 开始布局设计的方法
布局是页面构成的前提，是后续展开交互和视觉设计的基础。设计者在选择布局之前，需要注意以下几点原则：
明确用户在此场景中完成的主要任务和需获取的决策信息。
明确决策信息和操作的优先级及内容特点，选择合理布局。
一、常用布局
网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。
1、网站展示页
网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议：
明确你要传达的内容，保持简短而清晰的文案。
搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。
2、控制台页
控制台页（Dashboard）集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点：
按照信息的重要程度来组织页面排版，突出展示关键信息。
将数据可视化，让用户可以直观地了解关键信息及整体情况。
合理地使用颜色及栅格排版，减轻用户的视觉负担。
3、列表页
列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的“可阅读性”及“可操作性”是设计的关键。在设计时要注意以下几点：
根据用户需求来定义信息展示的等级，仅展示关键信息及操作。
当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。
4、表格页
表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点：
构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。
更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。
当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。
5、详情页
详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意：
清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。
图文搭配比单文本展示信息能更好地提高用户的理解。
6、表单页
表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程：
考虑用户的浏览方式，提供清晰的用户视线浏览路径；
内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；
标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；
醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。
二、栅格
我们通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按（移动：‘页面总宽 750px，内容区 750px’，PC：‘页面总宽 1440px，内容区 1208px’）来设定，并在此基础上以 12等分的栅格来划分整个设计建议区域。
建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。
注：图中灰色部分为栅格的列，定义为‘Column’，白色部分为栅格的间隔，定义为‘Gutter’。
栅格公式：
我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
网站展示页和 Dashboard 的 Gutter 宽度为 24px。
列表、表格、详情和表单页面的 Gutter 宽度为 16px。
㈦ 前端设计模式之责任链模式
责任链模式
什么是责任链模式
责任链（Chain of Responsibility）模式的定义：为了避免请求发送者与多个请求处理者耦合在一起，将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链；当有请求发生时，可将请求沿着这条链传递，直到有对象处理它为止。（此处引自 gof 设计模式）
在责任链模式中，客户只需要将请求发送到责任链上即可，无须关心请求的处理细节和请求的传递过程，所以责任链将请求的发送者和请求的处理者解耦了。
责任链模式是一种对象行为型模式，其主要优点如下：
1.降低了对象之间的耦合度。该模式使得一个对象无须知道到底是哪一个对象处理其请求以及链的结构，发送者和接收者也无须拥有对方的明确信息。
2.增强了系统的可扩展性。可以根据需要增加新的请求处理类，满足开闭原则。
3.增强了给对象指派职责的灵活性。当工作流程发生变化，可以动态地改变链内的成员或者调动它们的次序，也可动态地新增或者删除责任。
4.责任链简化了对象之间的连接。每个对象只需保持一个指向其后继者的引用，不需保持其他所有处理者的引用，这避免了使用众多的 if 或者 if···else 语句。
5.责任分担。每个类只需要处理自己该处理的工作，不该处理的传递给下一个对象完成，明确各类的责任范围，符合类的单一职责原则。
其主要缺点如下。
1.不能保证每个请求一定被处理。由于一个请求没有明确的接收者，所以不能保证它一定会被处理，该请求可能一直传到链的末端都得不到处理。
2.对比较长的职责链，请求的处理可能涉及多个处理对象，系统性能将受到一定影响。
3.职责链建立的合理性要靠客户端来保证，增加了客户端的复杂性，可能会由于职责链的错误设置而导致系统出错，如可能会造成循环调用。
其他说明
责任链模式，总的一个核心就是请求者不必知道是谁哪个节点对象处理的请求，由于处理请求的可以在不同对象下处理，所以请求者跟接受者是解耦的。
纯的责任链：要求请求在这些对象链中 必须被处理 ，而且一个节点处理对象，要么只处理请求，要么把请求转发给下个节点对象处理；
不纯的责任链：要求在责任链里 **不一定会有处理结构 **，而且一个节点对象，即可以处理部分请求，并把请求再转发下个节点处理；
javascript 中介者模式
责任链模式对前端开发来说可能有点陌生，但是看了前面的描述又感觉似曾相识
实际上 express、rex 里的 middleware 都可以简单理解为责任链模式的运用
要实现中间件模式，最重要的实现细节是：
1.可以通过调用 use() 函数来注册新的中间件
2.当接收到需要处理的新数据时，注册的中间件在执行流程中被依次调用。每个中间件都接受上一个中间件的执行结果作为输入值
3.每个中间件都可以停止数据的进一步处理，只需要简单地不调用它的回调函数或者将错误传递给回调函数。当发生错误时，通常会触发执行另一个专门处理错误的中间件
项目实战
通用中间件开发
通用中间件使用 ajax
如上我们在发送请求之前加入了类型转换、数据校验，将数据的业务处理使用中间件模式剥离，使得处理过程模块化，维护性提升。
中间件升级-事件回调
每个中间件的过程都是不可控制的，全部都交由中间类去统一调用，我们可以加入事件回调，方便我们在中间件处理过程中拥有额外的逻辑能力
将上述的使用方法再改造一下，方便实际业务中使用
上述的项目实例是采用 ajax 来演示，实际通用的中间件类，可以在业务中将一些 **流程化执行的任务 **拆分出来，例如表单验证、多重条件判断等等
多种条件判断
将流程化执行的多种条件判断通过中间件解耦，可以使得条件判断方法更加清晰。一般当你需要使用中介者来改造业务逻辑的时候，前端的项目确实有点复杂了。
现在STAR现在是在腾讯课堂里面分享自己的经验，感谢兴趣的朋友可以加Q群：1146649671
中获取STAR在腾讯课堂分享的链接，还可以获取学习资料 面试文档等