经验 | 程序员眼中的UI网页设计稿长什么样
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">欢迎来到叶设计的自习室</strong></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">连续</span>更新 · 设计干货</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">工具自习 | 经验教程 | 素材分享</p><img src="https://mmbiz.qpic.cn/mmbiz_png/a3dLNl4wsfxDiaUN2pg1L971bY3f3ZDxAYiaZ5oZ7ftBvtPxJnvRRoO8iaHoIk4XnialRv1OibOxyRJgHF7aZ4Um8dg/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">经验 | 程序员眼中的UI网页设计稿长什么样</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">全文字数：2494，预计阅读时间：8分钟</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文转载自 吾诺瀚卓，原文链接：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">www.unohacha.com/news_det_1562.html</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">UI 这个词或许听起来非常新潮，但是 User Interface 这个词组及其含义其实很早就<span style="color: black;">已然</span><span style="color: black;">显现</span>了。古时候的设计师<span style="color: black;">运用</span> GIMP 对用户界面进行设计，后来<span style="color: black;">咱们</span><span style="color: black;">运用</span> Photoshop 进行这项工作，而现我猜大<span style="color: black;">都数</span> UI网页设计 设计师们都<span style="color: black;">已然</span>用上了 Sketch。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">UI 设计与其他的<span style="color: black;">有些</span>设计行当最大的一点区别<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>，<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><span style="color: black;">针对</span>这种媒介（software），设计师会面对的问题将会面对什么样的新问题。<span style="color: black;">研发</span><span style="color: black;">运用</span><span style="color: black;">她们</span>的<span style="color: black;">研发</span>工具（iOS 的 Xcode、Android 的 Android Studio 等等）<span style="color: black;">根据</span>你的设计来构建界面的的<span style="color: black;">办法</span>和思路会与你在<span style="color: black;">运用</span> Sketch 来设计 UI网页设计 的思路非常不<span style="color: black;">同样</span>。<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>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">研发</span>眼中的设计稿长什么样？</strong></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>以视图（Views）为单位排布各个元素，Sketch 里面的 Symbols 功能和 Group 的概念其实与视图的概念非常<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>的工具（Xcode、Android Studio 等）来<span style="color: black;">掌控</span>布局，构建<span style="color: black;">咱们</span>的UI肯定不会像你在 Sketch 里面来得<span style="color: black;">那样</span>简单直接，<span style="color: black;">然则</span>设计师并不需要<span style="color: black;">实质</span>地去学习如在<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>将视图想象成一个类似于 Sketch 里面的 Symbols 或是 Group 的东西，样式、边框和<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><img src="https://mmbiz.qpic.cn/mmbiz_jpg/a3dLNl4wsfxDiaUN2pg1L971bY3f3ZDxAx6arb6nSWYxpjIaCwUuHQMq5DTUVcrFicxVEMU2M8HvpMzUnKSlHv5Q/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">拿 Apple Music 举个小栗子。它的专辑页面大致<span style="color: black;">能够</span>分为三个大视图：</strong></span></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;">2、中间的歌曲列表页</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、<span style="color: black;">咱们</span>熟悉的 Tab Bar</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;">上面那个充满了蓝色框框的图<span style="color: black;">表示</span>的是<span style="color: black;">每一个</span>视图的边界，Sketch 里面可不会给你<span style="color: black;">表示</span>这些东西，<span style="color: black;">不外</span><span style="color: black;">咱们</span>有 Zeplin 和 Sketch Measure <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;"><strong style="color: blue;"><span style="color: black;">咱们</span>再来观察一下 Tab Bar 在 Sketch 里面的图层结构。</strong></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/a3dLNl4wsfxDiaUN2pg1L971bY3f3ZDxAEEkeeGuzicibPn1dKFnvzuMhwt0k4H3D4fwrOKrBekgYDIv1tibROuotQ/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<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>的结构的。有太多的设计师并不会将图层整理得<span style="color: black;">那样</span>整齐，认为整齐与否并不影响视觉效果。这的确不影响视觉效果，<span style="color: black;">然则</span>这有可能会严重影响交付效果。<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><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>以外，其实<span style="color: black;">亦</span>是为了更<span style="color: black;">有效</span>地进行<span style="color: black;">研发</span>。<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>的<span style="color: black;">方向</span>来看，<span style="color: black;">仅有</span>数字才是描述你的 UI网页设计 的最有效的语言，而有规律的数字才是维持一致性的<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><span style="color: black;">运用</span> Zeplin <span style="color: black;">或</span> Sketch Measure 一键自动标注并且输出，加之<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>裁撤 35 岁以上的员工了，我渐渐觉得<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>上两种<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;"><strong style="color: blue;">我简单说说做一倍图的好处。</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一倍图计算起来很简单，要输出几倍就乘以几倍，如此你就能在 Sketch 里面<span style="color: black;">运用</span>插件一键输出所有倍数的图了。<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>权威组织网站上面下载到的<span style="color: black;">相关</span>平台规范的设计源文件以及大部分素材都是用一倍图做的。<span style="color: black;">另一</span>，<span style="color: black;">运用</span>一倍图导出到<span style="color: black;">日前</span>比较主流的可交互原型制作软件（Framer Studio、Flinto、Principle、Form、Origami 等等）内制作可交互原型将会有更加良好的体验。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">输出色板</strong></p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/a3dLNl4wsfxDiaUN2pg1L971bY3f3ZDxAOWIDhRpB9micfsvsTgAmicF8TlyW5wQuyBibgzQF6TyzTdqLzRIMhojVQ/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<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>。</p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/a3dLNl4wsfxDiaUN2pg1L971bY3f3ZDxAAqAn9Al6eDDaTM6na9MoeNZQyyZibPDmQbUlt7WZEcgybEicRphAoDJg/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>在设计 UI网页设计的过程中请妥善保管你选定的颜色。<span style="color: black;">倘若</span>时间充裕的话最好专门新建一个画板来<span style="color: black;">保留</span>你的颜色并<span style="color: black;">运用</span> Sketch Measure 与其他 asset 一并输出。<span style="color: black;">这般</span><span style="color: black;">研发</span>就能够复制上面的十六进制码直接粘贴到<span style="color: black;">她们</span>规定颜色的文档里面去了。</p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/a3dLNl4wsfxDiaUN2pg1L971bY3f3ZDxAZQ0MibH4E4XkcMaGDs7cEdmopOdHZFlOEOibDLicMf3bia3wInibTjTfZ1w/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">为你能想到的所有<span style="color: black;">状况</span>而设计</strong></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>不<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><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;"><strong style="color: blue;"><span style="color: black;">另一</span>几件细碎的事情</strong></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>
<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;">为软件添加上<span style="color: black;">有些</span>优雅的转场和<span style="color: black;">美丽</span>的动效确实能改善用户体验，但设计师不需要要在软件的每一寸土地上都要施展自己的才华，<span style="color: black;">运用</span>系统自带效果不丢人。如今无论是安卓还是 iOS，系统本身所能<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>的<span style="color: black;">奋斗</span>！</p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/a3dLNl4wsfwUaJVoSicueXicy4rib1Aye72RvzicqkcmjqhtzKeHCpuN51WJo8XtjUtB0WzibsdnxzgncPjD9UahibYQ/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_jpg/a3dLNl4wsfwUaJVoSicueXicy4rib1Aye72l43yECBAFNnPYkuqQpYpXO0RuOXoT2ypVHwnic4ppad1ibU8BrlaUCoA/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/a3dLNl4wsfwUaJVoSicueXicy4rib1Aye72H6icLryjfFwkMiaz1gqbELHGYPiaH902uxpsbe2YpsNoTicXamvPjduDXg/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
楼主节操掉了，还不快捡起来！
页:
[1]