初识前端后端UI_前端_后端_其他

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta name="generator" content="pdf2htmlEX"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="https://static.pudn.com/base/css/base.min.css"> <link rel="stylesheet" href="https://static.pudn.com/base/css/fancy.min.css"> <link rel="stylesheet" href="https://static.pudn.com/prod/directory_preview_static/6280090c3b39c07824ce9201/raw.css"> <script src="https://static.pudn.com/base/js/compatibility.min.js"></script> <script src="https://static.pudn.com/base/js/pdf2htmlEX.min.js"></script> <script> try{ pdf2htmlEX.defaultViewer = new pdf2htmlEX.Viewer({}); }catch(e){} </script> <title></title> </head> <body> <div id="sidebar" style="display: none"> <div id="outline"> </div> </div> <div id="pf1" class="pf w0 h0" data-page-no="1"><div class="pc pc1 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/6280090c3b39c07824ce9201/bg1.jpg"><div class="c x0 y1 w2 h2"><div class="t m0 x1 h3 y2 ff1 fs0 fc0 sc0 ls0 ws0"></div><div class="t m0 x1 h3 y3 ff1 fs0 fc0 sc0 ls0 ws0">W<span class="_ _0"></span>eb</div><div class="t m0 x1 h3 y4 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _1"> </span> </div></div><div class="c x2 y5 w3 h4"><div class="t m0 x0 h3 y6 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"></span> </div><div class="t m0 x0 h3 y7 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"></span> </div></div><div class="c x0 y1 w2 h2"><div class="t m0 x3 h5 y4 ff2 fs0 fc0 sc0 ls0 ws0">开发之一：<span class="_ _3"></span><span class="ff1"> <span class="_ _4"> </span> </span></div><div class="t m0 x4 h3 y3 ff1 fs0 fc0 sc0 ls0 ws0">W<span class="_ _0"></span>eb UI</div><div class="t m0 x4 h3 y4 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _5"> </span> </div></div><div class="c x5 y5 w3 h4"><div class="t m0 x0 h3 y6 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"></span> </div><div class="t m0 x0 h3 y7 ff1 fs0 fc0 sc0 ls0 ws0"> <span class="_ _2"></span> </div></div><div class="c x0 y1 w2 h2"><div class="t m0 x6 h5 y4 ff2 fs0 fc0 sc0 ls0 ws0">技术综述<span class="_ _6"></span><span class="ff1"> <span class="_ _7"> </span> </span></div><div class="t m0 x1 h6 y8 ff2 fs1 fc1 sc0 ls0 ws0">一、什么是<span class="_ _8"> </span><span class="ff3">UI</span>？什么是<span class="_ _8"> </span><span class="ff3">UI<span class="_ _8"> </span></span>设计师？</div><div class="t m0 x1 h6 y9 ff3 fs1 fc1 sc0 ls0 ws0">1<span class="ff2">、什么是<span class="_ _8"> </span></span>UI</div><div class="t m0 x1 h6 ya ff3 fs1 fc1 sc0 ls0 ws0"> <span class="ff2">按照<span class="_ _8"> </span></span>Wiki<span class="_ _8"> </span><span class="ff2">的解释：</span><span class="fs2">In the industrial design field of human–machine interaction, the<span class="_ _9"></span><span class="ff4">user </span></span></div><div class="t m0 x1 h6 yb ff4 fs2 fc1 sc0 ls0 ws0">interface<span class="ff3">is the space where interaction between humans<span class="_ _9"></span> and machines occurs.<span class="fs1"><span class="ff2">其实就是：</span>User </span></span></div><div class="t m0 x1 h6 yc ff3 fs1 fc1 sc0 ls0 ws0">Interface<span class="ff2">（用户界面）的简称。</span>UI<span class="_ _8"> </span><span class="ff2">设计则是指对软件的人机交互、操作逻辑、界面美观的</span></div><div class="t m0 x1 h6 yd ff2 fs1 fc1 sc0 ls0 ws0">整体设计。好的<span class="_ _8"> </span><span class="ff3">UI<span class="_ _8"> </span></span>设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简</div><div class="t m0 x1 h6 ye ff2 fs1 fc1 sc0 ls0 ws0">单、自由、充分体现软件的定位和特点。</div><div class="t m0 x1 h6 yf ff3 fs1 fc1 sc0 ls0 ws0"> 2<span class="ff2">、什么是<span class="_ _8"> </span></span>UI<span class="_ _8"> </span><span class="ff2">设计师</span></div><div class="t m0 x1 h6 y10 ff3 fs1 fc1 sc0 ls0 ws0"> UI<span class="_ _8"> </span><span class="ff2">设计师根据职责分为研究工具、研究人机界面、研究人三个方向。国内目前大部分<span class="_ _8"> </span></span>UI</div><div class="t m0 x1 h6 y11 ff2 fs1 fc1 sc0 ls0 ws0">工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而</div><div class="t m0 x1 h6 y12 ff2 fs1 fc1 sc0 ls0 ws0">是软件产品的产品外形设计师。</div><div class="t m0 x1 h6 y13 ff2 fs1 fc1 sc0 ls0 ws0">　　</div><div class="t m0 x1 h6 y14 ff3 fs1 fc1 sc0 ls0 ws0"> <span class="ff2">在<span class="_ _8"> </span></span>XXT<span class="_ _8"> </span><span class="ff2">公司，大家也通常会把<span class="_ _8"> </span></span>UI<span class="_ _8"> </span><span class="ff2">理解为“美工”，如“赵工”。她们需要具有良好的美术功</span></div><div class="t m0 x1 h6 y15 ff2 fs1 fc1 sc0 ls0 ws0">底与创意能力；她们被理解为网页美工，需要会<span class="_ _8"> </span><span class="ff3">CSS/HTML<span class="_ _8"> </span></span>等 网络语言；她们需要熟悉</div><div class="t m0 x1 h6 y16 ff2 fs1 fc1 sc0 ls0 ws0">各种平面设计软件，如<span class="_ _8"> </span><span class="ff3">PHOTOSHOP</span>、<span class="ff3">FLASH</span>、<span class="ff3">Dreamweaver<span class="_ _8"> </span></span>等软件，能设计出好看的</div><div class="t m0 x1 h6 y17 ff2 fs1 fc1 sc0 ls0 ws0">页面，再好点儿的，或者层次 再高点儿的需要懂<span class="_ _8"> </span><span class="ff3">JAVASCRIPT<span class="_ _8"> </span></span>或者<span class="_ _8"> </span><span class="ff3">Flex<span class="_ _8"> </span></span>语言。她们根据</div><div class="t m0 x1 h6 y18 ff2 fs1 fc1 sc0 ls0 ws0">原型图设计出静态页面，供开发人员开发。她们不做交互，只负责页面是不是好看：包括</div><div class="t m0 x1 h6 y19 ff2 fs1 fc1 sc0 ls0 ws0">网页 的布局、颜色的搭配、图标的选择、网站模板的设计等工作，这就是我们这些开发人</div><div class="t m0 x1 h6 y1a ff2 fs1 fc1 sc0 ls0 ws0">员通俗上对<span class="_ _8"> </span><span class="ff3">UI </span>和 <span class="ff3">UI<span class="_ _8"> </span></span>设计师的理解。</div><div class="t m0 x1 h6 y1b ff3 fs1 fc1 sc0 ls0 ws0"> <span class="ff2">所以，我们开发过程中，或者开发完毕之后，经常会说：“赵工，这个样式帮我美化下</span></div><div class="t m0 x1 h6 y1c ff2 fs1 fc1 sc0 ls0 ws0">吧”。</div><div class="t m0 x1 h6 y1d ff2 fs1 fc1 sc0 ls0 ws0">二、什么是交互设计？什么是交互设计师？</div><div class="t m0 x1 h6 y1e ff3 fs1 fc1 sc0 ls0 ws0"> <span class="ff2">交互设计：</span>interaction designer<span class="ff2">，它是<span class="_ _8"> </span></span>UI<span class="_ _8"> </span><span class="ff2">设计的一个方向</span>---<span class="ff2">研究人与界面的关系。交互</span></div><div class="t m0 x1 h6 y1f ff2 fs1 fc1 sc0 ls0 ws0">设计师的工作内容就是在软件产品编码之前进行交互设计，并且确立交互模型，交互规范。</div><div class="t m0 x1 h6 y20 ff3 fs1 fc1 sc0 ls0 ws0"> <span class="ff2">交互设计师：就是设计和改进界面产品原型设计的人。她们需要通过分析和讨论以及与</span></div><div class="t m0 x1 h6 y21 ff2 fs1 fc1 sc0 ls0 ws0">用户沟通，不断改进界面产品原型的设计，给用户最好的功能操作和体验。她 们需要懂得</div><div class="t m0 x1 h6 y22 ff2 fs1 fc1 sc0 ls0 ws0">平面设计、视觉设计；她们需要熟悉<span class="_ _8"> </span><span class="ff3">UI<span class="_ _8"> </span></span>设计的基本规范，具有良好的创意设计能力；她们</div><div class="t m0 x1 h6 y23 ff2 fs1 fc1 sc0 ls0 ws0">需要熟练运用<span class="_ _8"> </span><span class="ff3">Photoshop</span>，<span class="ff3">Dreamweaver </span>等设计工具，具备良好的客户服务意识；她们还</div><div class="t m0 x1 h6 y24 ff2 fs1 fc1 sc0 ls0 ws0">需要具备良好的沟通能力，哈哈，要求太高了。</div><div class="t m0 x1 h7 y25 ff3 fs1 fc1 sc0 ls0 ws0"></div><div class="t m0 x1 h6 y26 ff3 fs1 fc1 sc0 ls0 ws0"> <span class="ff2">在<span class="_ _8"> </span></span>XXT<span class="_ _8"> </span><span class="ff2">公司，这部分工作被两个部门的人所承担，网站组和开发组。网站组负责原型的</span></div><div class="t m0 x1 h6 y27 ff2 fs1 fc1 sc0 ls0 ws0">设计，她们会做简单的原型，但是不懂平面设计、不懂视觉设计、不懂基本 的<span class="_ _8"> </span><span class="ff3">UI<span class="_ _8"> </span></span>规范，</div><div class="t m0 x1 h6 y28 ff2 fs1 fc1 sc0 ls0 ws0">她们多是半道转过来的。技术人员也不懂平面设计、不懂视觉设计、但是他们懂一些<span class="_ _8"> </span><span class="ff3">UI<span class="_ _8"> </span></span>规</div><div class="t m0 x1 h8 y29 ff2 fs1 fc1 sc0 ls0 ws0">范，知道模<span class="ff5">仿</span>，就<span class="ff5">可</span>以从其他网站模<span class="ff5">仿</span>出来交互的<span class="ff5">效果</span>，进 而<span class="ff5">加</span>以改进。这个工作<span class="ff5">似乎</span>不</div><div class="t m0 x1 h8 y2a ff5 fs1 fc1 sc0 ls0 ws0">该<span class="ff2">让技术开发人员来承担，但是目前的现</span>状<span class="ff2">确实是如</span>此<span class="ff2">，我们不得不承担交互的大部分工</span></div><div class="t m0 x1 h8 y2b ff2 fs1 fc1 sc0 ls0 ws0">作。<span class="ff5">突然想起鲁迅</span>他<span class="ff5">老</span>人家在<span class="ff5">《故乡》</span>中的一 <span class="ff5">句话</span>：<span class="ff5">世</span>界上本<span class="ff5">没</span>有<span class="ff5">路</span>，<span class="ff5">走</span>的人多了，也就</div><div class="t m0 x1 h8 y2c ff5 fs1 fc1 sc0 ls0 ws0">成<span class="ff2">了</span>路<span class="ff2">。</span></div></div></div><div class="pi" data-data='{"ctm":[1.611850,0.000000,0.000000,1.611850,0.000000,0.000000]}'></div></div> </body> </html>