论坛 › 江苏 › 前端工程师怎么样干掉设计

f9yx0du 发表于 2024-10-10 05:13:06

前端工程师怎么样干掉设计

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　前端是一个承上启下的职位，正<span style="color: black;">由于</span>其位置的特殊性<span style="color: black;">引起</span>其必须<span style="color: black;">认识</span>设计和后台的<span style="color: black;">有些</span>基本知识。本文并非教<span style="color: black;">大众</span><span style="color: black;">怎样</span>取代设计的工作，而是讲解前端<span style="color: black;">怎样</span>更快更<span style="color: black;">方便</span>的实现<span style="color: black;">有些</span>简单的设计任务，在<span style="color: black;">无</span>设计师的<span style="color: black;">状况</span>下<span style="color: black;">怎样</span>利用工具<span style="color: black;">处理</span>UI呈现的问题，让工作事半功倍。</p>

    <h2 style="color: black; text-align: left; margin-bottom: 10px;">　<span style="color: black;"><strong style="color: blue;">Photoshop<span style="color: black;">运用</span></strong></span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">大<span style="color: black;">都数</span>前端工程师都有过切图的经历，<span style="color: black;">亦</span>就是将设计师制作的PSD等格式的<span style="color: black;">照片</span><span style="color: black;">根据</span><span style="color: black;">需要</span>切成项目需要的<span style="color: black;">体积</span>并实现页面的呈现，<span style="color: black;">那样</span><span style="color: black;">做为</span>一名合格的前端工程师，<span style="color: black;">咱们</span>有必要<span style="color: black;">认识</span>并<span style="color: black;">熟悉</span>的<span style="color: black;">把握</span>Photoshop的<span style="color: black;">有些</span>功能，下面介绍下几个实用的Photoshop技巧（以Adobe Photoshop CS5为例）。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　　<strong style="color: blue;"><span style="color: black;">1.<span style="color: black;">调节</span><span style="color: black;">照片</span><span style="color: black;">体积</span></span></strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>你在网络上找到了一张<span style="color: black;">照片</span><span style="color: black;">或</span>从设计师那里拿到一张<span style="color: black;">照片</span>用于网页中呈现，<span style="color: black;">然则</span>对<span style="color: black;">照片</span>的<span style="color: black;">体积</span>不满意的话，你只需要利用Photoshop进行<span style="color: black;">调节</span><span style="color: black;">就可</span>，<span style="color: black;">过程</span>很简单，如下：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　（1）利用Photoshop打开<span style="color: black;">照片</span>并点击“图像” -&gt; <span style="color: black;">选取</span>“图像<span style="color: black;">体积</span>”</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4loxBhN8sDib6pP5ic7SKUyMtXcLDpvTEJcYkv3oY8VZ1PMorsH1VWDjlhA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）修改你想要的宽度和高度</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4lotK6uS72upEaXw2EEHovqq4tMhbIvulAWNz0EhnLroibcbzvFicrRB95g/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这儿</span><span style="color: black;">咱们</span><span style="color: black;">通常</span>修改像素<span style="color: black;">体积</span><span style="color: black;">就可</span>，修改的时候<span style="color: black;">倘若</span>不勾选下方的“约束比例”，<span style="color: black;">那样</span>图像可能会被拉扯变形，勾上<span style="color: black;">能够</span>防止宽高比例的失调，即在原图比例的<span style="color: black;">基本</span>上缩放。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　　<span style="color: black;"><strong style="color: blue;">2.<span style="color: black;">调节</span>局部颜色</strong></span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　<span style="color: black;">倘若</span><span style="color: black;">咱们</span>需要对<span style="color: black;">照片</span>的局部颜色进行更改，<span style="color: black;">例如</span>我想将下方<span style="color: black;">照片</span>的背景变为黑色，<span style="color: black;">咱们</span><span style="color: black;">能够</span>点击“<span style="color: black;">选取</span>” -&gt; “色彩范围” -&gt; 选中背景区域
      -&gt; <span style="color: black;">调节</span>颜色容差<span style="color: black;">就可</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　（1）<span style="color: black;">选取</span>范围</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4lohp2E1PbSNz1LYCicmV00hn4snAa9KeicotM2bTK3KW6EcD7WF2icolMuQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）点击确定后，填充颜色</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4lojOpczV9Gcgb8YjiceDdN49NwafU1aFaFiawicvHdUMNC2aqZThXVgFIGg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　当然除了<span style="color: black;">运用</span>“色彩范围”外，还<span style="color: black;">能够</span><span style="color: black;">运用</span>“索套工具”<span style="color: black;">或</span>“<span style="color: black;">选取</span>工具”来<span style="color: black;">创立</span>选区，<span style="color: black;">这儿</span>就不做介绍了，<span style="color: black;">创立</span><span style="color: black;">繁杂</span>的选区<span style="color: black;">亦</span>需要相对<span style="color: black;">繁杂</span>的操作。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　　<span style="color: black;"><strong style="color: blue;">3.一键切图</strong></span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">切图应该说是前端经常要做的事情，在切图的过程中<span style="color: black;">倘若</span>遇到图层过于<span style="color: black;">繁杂</span><span style="color: black;">照片</span>又过于渺小的<span style="color: black;">状况</span>，<span style="color: black;">咱们</span><span style="color: black;">常常</span>需要放大<span style="color: black;">全部</span><span style="color: black;">照片</span>并<span style="color: black;">隐匿</span>额外的图层来<span style="color: black;">选取</span><span style="color: black;">咱们</span>需要的图形区域，这相当的浪费时间和精力。<span style="color: black;">这儿</span>介绍下<span style="color: black;">咱们</span><span style="color: black;">怎样</span><span style="color: black;">经过</span>Photoshop的动作功能来实现一键切图的效果。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）下载动作</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　请戳<span style="color: black;">这儿</span>下载动作文件：https://pan.baidu.com/s/1i5I3nPb</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）载入动作</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4loiacK431qURib7TyDlkNHr7tPIL1xUAuyBkmbByPx9vW9Po6sxSABwZnA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4loE4DeD2E4eXfZicNysdCTKHZPlg8RIFULOdDWKMdlRxV9AKcbChliaFicw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　将<span style="color: black;">刚才</span>下载的动作文件载入<span style="color: black;">就可</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（3）<span style="color: black;">运用</span>动作</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">载入完成后，打开任一psd文件，<span style="color: black;">过程</span>如下：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　a.<span style="color: black;">首要</span><span style="color: black;">咱们</span><span style="color: black;">选取</span>“移动工具”，将“自动<span style="color: black;">选取</span>”勾选</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　b.点击<span style="color: black;">咱们</span>要切的图标，在图层面板中<span style="color: black;">咱们</span><span style="color: black;">能够</span>看到对应的图层<span style="color: black;">已然</span>被定位到</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　c.按下F2，图标就成功切到了</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　d.按下F3<span style="color: black;">保留</span>为web所用格式</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4loShnRxd14WG2h0LCsicCqibMe9eG3uGfH9aaNmp2mXJcg3xDgESmR5TdQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4loIttoz94bO5jcYC1RaLlNr8FkR2jHPd7TPa1Piapg9aZLffWOVosCsUw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">关于Photoshop的技巧还有<span style="color: black;">非常多</span>，以上只列出几个<span style="color: black;">针对</span>前端<span style="color: black;">来讲</span>比较常用的三个，只要<span style="color: black;">咱们</span><span style="color: black;">熟练</span>像<span style="color: black;">这般</span>的<span style="color: black;">有些</span>实用技巧，就<span style="color: black;">能够</span>节省很大的时间和精力。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;">　工具及网站<span style="color: black;">运用</span></strong></span></h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　　<span style="color: black;"><strong style="color: blue;">1.<span style="color: black;">照片</span>压缩</strong></span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　<span style="color: black;">倘若</span>你想要压缩一张<span style="color: black;">照片</span>，除了利用Photoshop修改品质外，<span style="color: black;">咱们</span>还<span style="color: black;">能够</span>利用<span style="color: black;">有些</span>自动化工具进行压缩，<span style="color: black;">例如</span>glup、grunt等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　当你不具备以上<span style="color: black;">研发</span>环境和工具时，我<span style="color: black;">这儿</span><span style="color: black;">举荐</span>一个压缩<span style="color: black;">照片</span>的网站，<span style="color: black;">位置</span>为：https://tinypng.com/。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其采用了智能的有损压缩技术，<span style="color: black;">经过</span><span style="color: black;">选取</span>性地降低在图像中的颜色的数量，减少字节的存储数据量，其效果是几乎看不见，但它<span style="color: black;">能够</span>很大程度的减少<span style="color: black;">照片</span>的<span style="color: black;">体积</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　<span style="color: black;">经过</span>官网的实例<span style="color: black;">咱们</span>来对比下两张<span style="color: black;">照片</span>压缩前后的变化：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4lo3FmrEiaPkQiaJYfiaib0KCeke2Fa3iauYFCyibnswbK99vcibcnjAfq0KB1yQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　<span style="color: black;">一样</span>的一张<span style="color: black;">照片</span>，压缩后比压缩前减少了近1/4的体积，<span style="color: black;">然则</span><span style="color: black;">照片</span>清晰度任然和压缩前<span style="color: black;">同样</span>。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　　<span style="color: black;"><strong style="color: blue;">2.图标下载</strong></span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">非常多</span>时候当<span style="color: black;">咱们</span>的团队中缺乏设计<span style="color: black;">或</span>设计不在时，<span style="color: black;">倘若</span>项目中需要一个logo<span style="color: black;">或</span>图标，<span style="color: black;">咱们</span>其实<span style="color: black;">能够</span>自己搞定。<span style="color: black;">经过</span>百度搜到的<span style="color: black;">照片</span>大都不符合<span style="color: black;">咱们</span>的<span style="color: black;">需要</span>，<span style="color: black;">这儿</span>我<span style="color: black;">举荐</span>一个比较好用的图标库easyicon，<span style="color: black;">持有</span>海量的图标资源，<span style="color: black;">位置</span>为：http://www.easyicon.net/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如下图所示，<span style="color: black;">咱们</span>只需要输入<span style="color: black;">咱们</span>需要的图标名<span style="color: black;">叫作</span>，便可以搜索出<span style="color: black;">海量</span>图标：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4loPblgXWWsEHAN47gC417oLKtusdncwichpaA9Gts2uS1DSBHlEl8Sg2w/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　当<span style="color: black;">咱们</span><span style="color: black;">选取</span>需要的图标时，会<span style="color: black;">显现</span><span style="color: black;">仔细</span>的下载页，<span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">选取</span><span style="color: black;">咱们</span>需要的图标格式<span style="color: black;">例如</span>PNG、ICO<span style="color: black;">或</span>ICONS，<span style="color: black;">同期</span><span style="color: black;">咱们</span>还<span style="color: black;">能够</span><span style="color: black;">选取</span>需要的图标<span style="color: black;">体积</span>进行下载，如下：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/0tIK8YmulicPC033DiciccdtabqCKTwib4loX6xRicnk7rTF0Pxhj9LpibcfekpFMjAuqM9tAkR5AS2ls9ZvBickIVNDQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　相信只需这一个网站就<span style="color: black;">能够</span>满足你的图标<span style="color: black;">需要</span>了。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　<span style="color: black;"><strong style="color: blue;">　3.字体下载</strong></span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这儿</span>的字体<span style="color: black;">重点</span>指纯色的字体图标，<span style="color: black;">此刻</span><span style="color: black;">非常多</span>网站的icon图标都是以字体的形式嵌入，<span style="color: black;">这般</span><span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">必定</span>程度的减少网页中<span style="color: black;">照片</span>的请求数量，<span style="color: black;">同期</span><span style="color: black;">亦</span>便于<span style="color: black;">守护</span>。<span style="color: black;">这儿</span>我<span style="color: black;">举荐</span>几款比较热门的字体图标库：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（1）阿里巴巴矢量图标库：http://www.iconfont.cn/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>淘宝的这个图标库，<span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">容易</span>的管理及下载<span style="color: black;">咱们</span>需要的字体图标，<span style="color: black;">同期</span>还<span style="color: black;">能够</span>制作和上传<span style="color: black;">咱们</span>的图标，<span style="color: black;">针对</span><span style="color: black;">爱好</span>的图标还<span style="color: black;">能够</span>进行<span style="color: black;">保藏</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（2）icomoon图标库：https://icomoon.io/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　这是一个国外的网站，<span style="color: black;">亦</span><span style="color: black;">供给</span>了一系列的字体图标资源，<span style="color: black;">一样</span>具备了图标下载<span style="color: black;">保藏</span>等功能，<span style="color: black;">不外</span>有些字体图标需要收费。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（3）fontawesome图标库：http://fontawesome.io/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">fontawesome是一个以导入CSS文件的形式加载的图标库，适合中后台项目的<span style="color: black;">研发</span><span style="color: black;">运用</span>。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　　<span style="color: black;"><strong style="color: blue;">4.模板下载</strong></span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　<span style="color: black;">这儿</span>的模板<span style="color: black;">能够</span>是PSD格式的文件，<span style="color: black;">亦</span><span style="color: black;">能够</span>是JPG等<span style="color: black;">照片</span>格式，<span style="color: black;">通常</span><span style="color: black;">非常多</span>设计师都会从这些网站上寻找素材和灵感，<span style="color: black;">因此</span><span style="color: black;">咱们</span><span style="color: black;">能够</span>直接拿过来参考和<span style="color: black;">运用</span>，<span style="color: black;">针对</span><span style="color: black;">咱们</span>网站的原型制作<span style="color: black;">特别有</span><span style="color: black;">帮忙</span>，当然这<span style="color: black;">亦</span>是在缺乏设计师的<span style="color: black;">状况</span>下前端能够快速实现页面设计的捷径。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）UI中国：http://www.ui.cn/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（2）UE设计平台：http://www.uehtml.com/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（3）UI制造者：http://www.uimaker.com/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（4）Hiiishare：http://www.hiiishare.com/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（5）学UI网：http://www.xueui.cn/</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;">　库框架<span style="color: black;">运用</span></strong></span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　<span style="color: black;">这儿</span>的框架<span style="color: black;">重点</span>指的是前端<span style="color: black;">研发</span>中的UI框架，<span style="color: black;">恰当</span>的利用UI框架<span style="color: black;">能够</span>在美化页面的<span style="color: black;">同期</span><span style="color: black;">加强</span>工作效率和<span style="color: black;">研发</span>成本。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　　<span style="color: black;"><strong style="color: blue;">1.适合PC端</strong></span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（1）Bootstrap：http://www.bootcss.com/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Bootstrap应该算得上是最早流行的前端UI框架之一，其面世之后不仅大大方便了前端<span style="color: black;">研发</span>人员的工作，<span style="color: black;">同期</span><span style="color: black;">亦</span>方便了后台<span style="color: black;">研发</span>人员构建前端页面。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（2）flat-ui：http://www.bootcss.com/p/flat-ui/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　flat-ui是一款免费的WEB界面工具组件库，其UI风格<span style="color: black;">非常</span>扁平化，相比Bootstrap其更简洁小巧。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（3）jQuery-ui：http://jqueryui.com/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　jQuery-ui是jQuery的官方UI库，其在<span style="color: black;">加强</span>CSS样式美化的<span style="color: black;">同期</span><span style="color: black;">亦</span><span style="color: black;">供给</span>了一系列的JS组件供<span style="color: black;">研发</span>者<span style="color: black;">运用</span>，<span style="color: black;">同期</span><span style="color: black;">亦</span>支持定制功能。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　<span style="color: black;"><strong style="color: blue;">　2.适合移动端</strong></span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（1）Foundation：http://foundation.zurb.com/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Foundation是一款体积小并且<span style="color: black;">供给</span>响应式布局的移动端优先的UI工具库。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（2）Amazeui：http://amazeui.org/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　Amazeui是中国首个开源 HTML5 跨屏前端框架。其以移动优先为理念，从小屏逐步扩展到大屏，<span style="color: black;">最后</span>实现所有屏幕适配，适应移动互联潮流。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　（3）MUI：http://dev.dcloud.net.cn/mui/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">MUI是一款最接近原生APP体验的高性能前端框架，其不依赖任何第三方JS库，轻量是其重要特征。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">　　<span style="color: black;"><strong style="color: blue;">3.其他</strong></span></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">随着<span style="color: black;">日前</span>富应用框架的热潮，<span style="color: black;">非常多</span>前端JS框架都<span style="color: black;">持有</span>自己的UI框架<span style="color: black;">选取</span>，<span style="color: black;">例如</span>Vue的vux、vue-starp，React的ant-design等，这些框架的诞生都<span style="color: black;">能够</span>很好的给<span style="color: black;">咱们</span><span style="color: black;">供给</span>快速一站式的前端<span style="color: black;">处理</span><span style="color: black;">方法</span>，使前端无图化设计的应用日趋繁荣。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">　<span style="color: black;"><strong style="color: blue;">总结</strong></span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">　　一个网站的实现离不开设计师的美化和<span style="color: black;">制品</span>经理的规划，前端只是承接这一步的重要一环，而不是<span style="color: black;">能够</span>替代这一步的一环，<span style="color: black;">咱们</span>所能做的是在缺乏上一环的<span style="color: black;">状况</span>下尽可能的利用工具和知识来弥补不足，而<span style="color: black;">最后</span>是为了更友好的将内容呈现给用户。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">via：http://www.jianshu.com/p/b7690cc8893f</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/0tIK8YmulicOozrjUSDKbNgoxv13KWYLYb3cHvy3RwsGY0BzJgZOn4biafibtSo11vcSVwuw2LYzzGgYDPnjicFJJw/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>

4zhvml8 发表于 2024-10-19 09:58:12

回顾历史，我们不难发现：无数先辈用鲜血和生命铺就了中华民族复兴的康庄大道。

7wu1wm0 发表于 2024-10-25 09:58:40

你的见解独到，让我受益匪浅，非常感谢。

m5k1umn 发表于 2024-10-31 08:38:15

感谢楼主的分享！我学到了很多。

查看完整版本: 前端工程师怎么样干掉设计