UI综合设计：如何以开发的视角做设计?

　　面对完全不同的媒介，设计师会有不同的目标，并使用不同的设计方法。 比如说一名 UI 设计师和平面设计师最大的区别可能在于 UI 设计师可以从开发的角度进行设计。

　　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 举个小栗子。Apple Music 专辑页面大致可分为三个大视图：

　　最上面的专辑细节区域。

　　歌曲列表页中间。

　　我们熟悉的 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 一起输出。这样，开发就可以复制上面的16进制码，直接粘贴到他们规定颜色的文档中。

　　设计所有你能想到的情况

　　程序不可能总是在理想状态下工作，总会有故障和错误。当出现断网、弱网或暂时无内容显示时，程序页面应如何向用户呈现和传达正确的信息?

　　因此，设计师在设计时必须仔细处理各种不同的情况。如果一个页面可能没有内容，那么如何设计它呢?

　　总有意想不到的情况会发生，所以如果你不明白，问问传说中的知情人士。我相信他们会很乐意帮助你找出一些需要设计的异常情况。

　　其他几件小事

　　语言的处理不能掉以轻心，因为它可能会破坏你的页面。如果一个视图中可能有很多单词，那么是截文还是自适应呢?如果某个地方会有很多英语呢?

　　不要过分追求完美。要求一两个像素的完美是不值得提倡的。正如前面提到的，我们最好在早期阶段避免这些情况。此外，在软件开发过程中会出现许多无法控制和不可预测的情况，没有人能解决一些问题。学会接受一点缺陷更有利于项目的推广。

　　为软件添加一些优雅的转换和美丽的动态效果确实可以改善用户体验，但设计师不需要在软件的每一寸土地上展示他们的才能，使用系统的效果并不可耻。现在，Android和Android iOS，系统本身提供的动态效果非常好。学习如何合理使用它们也是对技能的考验。(文章来自网络)