|
欢迎来到叶设计的自习室
连续更新 · 设计干货
工具自习 | 经验教程 | 素材分享 
经验 | 程序员眼中的UI网页设计稿长什么样
全文字数：2494，预计阅读时间：8分钟
本文转载自 吾诺瀚卓，原文链接：
www.unohacha.com/news_det_1562.html
UI 这个词或许听起来非常新潮，但是 User Interface 这个词组及其含义其实很早就已然显现了。古时候的设计师运用 GIMP 对用户界面进行设计，后来咱们运用 Photoshop 进行这项工作，而现我猜大都数 UI网页设计 设计师们都已然用上了 Sketch。
UI 设计与其他的有些设计行当最大的一点区别便是，UI 设计师输出的并不是最后的作品，她们一般还要把自己的设计先交付给研发，况且交付这个过程非常重要。
你怎么去设计以至到你怎么输出你的设计将会直最后的制品产生重大的影响，因此针对这种媒介（software），设计师会面对的问题将会面对什么样的新问题。研发运用她们的研发工具（iOS 的 Xcode、Android 的 Android Studio 等等）根据你的设计来构建界面的的办法和思路会与你在运用 Sketch 来设计 UI网页设计 的思路非常不同样。因此，既然 UI网页设计 设计师的重点工作是交付，那样学会以研发的视角和分析办法来进行设计将非常重要。
研发眼中的设计稿长什么样？
人们总是会带着自己既有的知识和以往的经验来分析客观事物，研发眼中的设计稿跟设计师眼中的设计稿差异其实非常大。研发一般以视图（Views）为单位排布各个元素，Sketch 里面的 Symbols 功能和 Group 的概念其实与视图的概念非常类似，都是事先规定好样式与属性，而后再在需要的地区重复运用。
当然了，研发在运用她们的工具（Xcode、Android Studio 等）来掌控布局，构建咱们的UI肯定不会像你在 Sketch 里面来得那样简单直接，然则设计师并不需要实质地去学习如在运用这些工具来对 UI网页设计 进行构建（当然倘若你感兴趣的话，深度地认识一下这些又远又近的知识对你将有非常大的裨益）。咱们能够将视图想象成一个类似于 Sketch 里面的 Symbols 或是 Group 的东西，样式、边框和体积都被规定好了，而后各个区别小视图以合乎道理的层级和次序构建成咱们的理想中的界面。 
拿 Apple Music 举个小栗子。它的专辑页面大致能够分为三个大视图：
1、最上方的专辑详情区域
2、中间的歌曲列表页
3、咱们熟悉的 Tab Bar
这三个大视图之中又包括了从属于自己的小视图，譬如说专辑的照片便是属于专辑详情区域的视图，每首歌曲的名字亦是属于歌曲列表视图内的小视图。
上面那个充满了蓝色框框的图表示的是每一个视图的边界，Sketch 里面可不会给你表示这些东西，不外咱们有 Zeplin 和 Sketch Measure 这般的插件帮忙咱们标注并输出每一个图层的边界体积，这针对实质研发来讲非常有帮忙。
咱们再来观察一下 Tab Bar 在 Sketch 里面的图层结构。 
这般的摆列是比较接近在研发环境下搭建 UI网页设计 所运用的结构的。有太多的设计师并不会将图层整理得那样整齐，认为整齐与否并不影响视觉效果。这的确不影响视觉效果，然则这有可能会严重影响交付效果。因此下一次画 UI网页设计 的时候请尽可能恰当地安排好图层的结构和从属关系，多去阅读各个平台和系统的设计规范，别运用奇奇怪怪的数字来定义元素的尺寸和它们之间的距离。软件是程序写的，在这些层面上它便是那样方方正正，无什么创新的空间。
一样地，大众所说的保持软件的一致性，除了出于美观好用等各方面的思虑以外，其实亦是为了更有效地进行研发。针对一套好的 UI网页设计 来讲，它上面的几乎所有元素都需要是能够用数字描述的，包含多少像素的圆角，多少像素的描边。以研发的方向来看，仅有数字才是描述你的 UI网页设计 的最有效的语言，而有规律的数字才是维持一致性的保准。
像研发安排视图同样安排好图层的结构，而后运用 Zeplin 或 Sketch Measure 一键自动标注并且输出，加之即时有效的沟通和认真专业的态度，将大大减少你的程序员和你日后的改改改工作。科技日新月异，你还有非常多别的新玩意要去学习，程序员亦有非常多新的技术要去专研，学会以研发的视角去做设计非常重要。切不要把为了一两个像素的偏移而争吵视作是自己拥有工匠精神的表现，华为已然起始裁撤 35 岁以上的员工了，我渐渐觉得这般的鸡毛蒜皮的小事情简直便是浪费时间。
关于运用一倍还是二倍做图的争论还是比较多的，国外的设计师爱好用一倍，国内的设计师比较多用二倍，实质上两种选取都有自己的好处，好多能手亦写了不少优秀的教程，在下就不在这儿班门弄斧做比较了。
我简单说说做一倍图的好处。
一倍图计算起来很简单，要输出几倍就乘以几倍，如此你就能在 Sketch 里面运用插件一键输出所有倍数的图了。研发在搭建 UI网页设计 的时候还能直接运用你标注在上面的数字，大大减少了出错的可能。还有两点个人总结的小经验，就日前来讲，你能在官网或是有些权威组织网站上面下载到的相关平台规范的设计源文件以及大部分素材都是用一倍图做的。另一，运用一倍图导出到日前比较主流的可交互原型制作软件（Framer Studio、Flinto、Principle、Form、Origami 等等）内制作可交互原型将会有更加良好的体验。
输出色板 
设计师会在设计之前定好需要用到的各样颜色，研发其实亦需要，她们会在一个文档里面将所有要用到的颜色先写下来（这些颜色亦由设计师给到），而后再在需要的地区随时调用，概念就跟设计师参照视觉规范做设计同样。 
因此在设计 UI网页设计的过程中请妥善保管你选定的颜色。倘若时间充裕的话最好专门新建一个画板来保留你的颜色并运用 Sketch Measure 与其他 asset 一并输出。这般研发就能够复制上面的十六进制码直接粘贴到她们规定颜色的文档里面去了。 
为你能想到的所有状况而设计
程序不可能总是在理想的状态中工作，故障与错误总是会有的。当显现例如说断网、弱网或暂时无内容能够展示时，程序的页面该怎么呈现并传达正确的信息给到用户？
因此设计师在设计的时候必定要审慎处理各样不同样的状况。假如一个页面有可能会有不存在内容的状态，那样该怎么对这种状态进行设计？
总有你想不到的状况会出现，因此倘若不明白的话多去询问一下传说中的知情人士，相信她们亦会很乐意帮忙你找出有些需要设计的反常状况。
另一几件细碎的事情
针对语言文字的处理必定不可掉以轻心，由于这有可能会将你的页面毁掉。倘若一个视图内文字有可能会非常多，那样要做截字处理还是自适应处理？倘若某处会有显现海量英文的状况的话呢？
不要太过追求完美，锱铢必较地去需求一个两个像素的完美并不值得提倡。就像前文提及的同样，咱们最好能在前期就避免这些状况的出现。况且，软件研发过程中会有非常多不可控、不可预估的状况出现，有些问题谁亦没办法处理。学会接受一点点的瑕疵更有助于项目的推进。
为软件添加上有些优雅的转场和美丽的动效确实能改善用户体验，但设计师不需要要在软件的每一寸土地上都要施展自己的才华，运用系统自带效果不丢人。如今无论是安卓还是 iOS，系统本身所能供给的动态效果已然非常不错了，学会怎么恰当地运用它们亦是一门考验功力的活儿。
好的制品需要大众一起的奋斗！   
| 
发表于 2024-7-27 18:12:22