by Diana Stoyanova @ Dribbble

UI设计师和前端通常是一个艺术出身、一个技术出身，却为了工作而不得不经常面对面坐在一起，为各种问题纠缠不清。

前端总觉得设计太过理想主义，稿子里很多构想根本不完整，还以各种理由给自己找麻烦。

设计总觉得前端各种找理由偷懒，开发出的界面明明和设计稿相差十万八千里，就自以为完事大吉了。

这里我为设计师写一篇比较好懂的科普，以促进双方在日常工作中更加高效友善地合作，PK战斗力分分钟上升1000点。

by Maxime Bourgeois @ Dribbble

界面尺寸如何把控？

我们从外至内来看一个界面区域（手机屏幕/电脑窗口）的尺寸有两个变量：宽度和高度。

前端搭建界面时，通常只会规定横向尺寸。也就是说宽度是自变量，高度是因变量。因为用户的屏幕/窗口尺寸是无法预期的，哪怕都是手机，型号也多到数不清。要让一款产品能够在所有型号的硬件上展示，前端开发时不可能设置一个固定的界面尺寸。

你可以把界面想象成一个倒置的俄罗斯方块盒子，在固定的宽度下，长度可以近乎无限延展。

然而UI设计是都是以一个固定的界面宽度为基础的，因为这样设计师就不需要为同一个方案画很多不同尺寸的方案。

by Ramotion @ Dribbble

也就是说在理解界面构成时，前端的是基于动态宽度，而UI则是基于静态宽度，这直接导致了双方在基础概念上的不对等。

P.S. 这就是为什么设计还原的问题总是难以解决。UI追求的是在标准宽度下，界面能够100%还原；而前端费解的是，既然用户的屏幕尺寸根本无法确定，纠结某一特定宽度下是否精确符合设计稿是否有意义？

布局如何跟随界面尺寸而变化？

那么当容器宽度发生变化时，界面内部首当其冲收到影响的就是布局。

印刷品的页面布局通常有左右分栏和上下分栏两种。

而界面布局反倒更加简单，通常只需要考虑左右分栏即可。这是因为界面在固定宽度下纵向延展，纵向高度有内部元素的填充情况来决定。

界面尺寸变化时，分栏如何变化？通常有两种方式：定宽和定比。

定宽常用于PC端。固定一栏的绝对宽度，另外一栏根据容器自由伸缩；或者固定元素的宽度，根据容器尺寸来确定列数。

定比常用于手机端。固定几个分栏的所占比例，根据容器宽度自由伸缩。

P.S. 对于前端来说，通常定宽比定比要简单得多，所以如果UI不给出明确要求，前端很有可能一律按定宽处理。

图片元素

前面一直在说，界面高度由固定宽度容器内，摆放下的元素来确定，那么这里就说一下元素是如何摆放的，从图片开始。

如果是较小的图片，例如LOGO、按钮或箭头，通常是给一个固定尺寸，以左对齐/居中/右对齐的方式摆放在容器中。

如果是较大的图片，例如BANNER、文章插图或背景，通常是给一个固定的比例，例如100%或50%，同样以左对齐/居中/右对齐的方式摆放在容器中。

第一种方式插入的图片所占用的高度是固定的，而第二种方式所占用的高度是根据容器宽度而等比变化的（如果是背景图，当然就不会影响到界面高度了）。

P.S. 这就是为什么有的UI用非主流尺寸做设计，把切图给开发后，在自己电脑上看效果发现相差很远。界面尺寸发生变化后，图片看起来难免会有很大不同。

文字元素

界面里的元素除了图片之外，其实大量都是文字。

文字的尺寸和行高一般是固定的，并不会随着容器尺寸而变化。例如你用不同屏幕的设备打开一篇文章，你会发现每行字数都是不同的。

当然如果非要技术处理，也可以做到根据容器宽度确定文字尺寸，以求每行字数保持不变。但是这种处理非常麻烦，一般很少用到。

P.S. 这就是为什么，UI在标准尺寸屏幕上勉强留够了文字空间，而在用户的小屏设备上展示时，却排不下几个字。从前端的角度看，文字尺寸的灵活性，没有图片那么强。

内边距与外边距

前端开发时，任何元素或模块都可以有一个内边距和外边距。内边距用于分割模块里内容与模块边缘的距离；外边距用于分割模块与模块之间的距离。

当元素/模块重复出现时，其内边距和外边距可以作为固定属性重复出现，这样就避免了代码冗余。

然而，有的设计稿在内外边距上比较随便，这可能导致前端开发同学犯强迫症，例如以下几种情况。

不同页面的边距不一样：

同一级模块的边距不同：

有的特殊元素偏偏要突破原本定好的边距：

当然有时候为了视觉效果，我们必须要做一些特殊处理，增加额外的开发工作量无可避免。

然而如果边距不统一只是因为设计时没有太在意，这就有可能给前端开发造成无意义的维护成本了。

P.S. 如果设计按照模块而不是按照页面来提供方案，前端可能更加高兴的，因为他们不用去猜哪些地方可以复用代码了，哪些地方又必须单独写了。

总结

上面说的都是一些非常基础的前端原理，很多前端以为UI应该理解，但其实很多情况下都无法理解。不论是前端还是设计，希望看了这篇文章后，能够对双方有更多的理解。

RECOMMEND

推荐阅读

01

《用户体验要素：以用户为中心的产品设计（原书第2版）》

[美]杰西·詹姆斯·加勒特（Jesse James Garrett） 著

推荐语：经典内容、全新设计、全彩印刷、全球畅销！Ajax之父经典著作新版，用最简洁的语言系统化地诠释了以用户为中心的设计思想。

涵盖了关于用户体验以及为什么它如此重要、认识这些要素、战略层、范围层、结构层、框架层、表现层以及要素的应用等。用清晰的说明和生动的图形分析了以用户为中心的设计方法来进行Web设计的复杂内涵。关注于思路而不是工具或技术，使你的网站具备高质量体验的流程。

02

《点石成金：访客至上的Web和移动可用性设计秘笈（原书第3版）》

[美] 克鲁格（Steve Krug）

推荐语：全新升级、全彩印刷、全球畅销。第11届Jolt生产效率大奖获奖图书，被Web设计人员奉为圭臬的经典之作第2版全球销量超过35万册，美亚网站的网页设计类图书的销量排行佼佼者，访客至上的Web和可用性设计秘笈。这是一本关于Web设计原则而不是Web设计技术的书，用幽默的语言为你揭示Web设计中重要但却容易被忽视的问题，只需几个小时，你便能对照书中的设计原则找到网站设计的症结所在，令你的网站焕然一新。

03

《用户体验度量：量化用户体验的统计学方法（原书第2版）》

［美］杰夫·绍罗

推荐语：Amazon五星级畅销书，用户体验专家、统计分析师、心理学专家10余年工作经验结晶，着眼于用户体验设计人员工作中所遇到的疑难问题，推荐解决方案。

04

《好设计 有方法：我们在搜狐做产品体验设计》

李伟巍 等著

推荐语：本书层层递进，涵盖了UED的思维流程、工作流程和设计方法论，从如何了解用户、迭代产品、梳理需求的角度，由搜狐团队的每一名设计师以自己的工作经验为基础展开分享，详细介绍了构建用户画像的方法与应用，让没有沉淀流程体系的团队可以借鉴，没有成熟流程体系的设计师们也可以参考，是一本值得在工作中无数次翻阅的书。

05

《交互设计沉思录》

[美]Jon Kolko 著

推荐语：本书是一本旨在审视交互设计理论并推进其发展的专业书籍。本书既没有重点讲述网站或特定产品的设计，也没有深入探讨设计的各要素的美学或情感价值，而是深入探究了设计中科技、形式与人三者之间的语义关联——交互。本书重点阐释了对交互设计领域的最新理解和洞察，以及人与科技之间的联系。作者通过引人入胜的内容实现对设计师的教化，帮助设计师教化商业人士，同时确立交互设计在商业领域中的地位。

06

《硅谷设计之道》

王欣 著

推荐语：本书是一本面向用户体验设计师、产品设计师以及科技行业相关从业人员的实战宝典。书中融合了作者丰富的设计经验，收录与总结了用户体验设计各个环节中的设计方法与策略。为了深入阐释相关话题，作者还采访了包括Google、Facebook设计副总裁在内的多名设计领导者与资深从业者，带领读者从多角度学习和理解设计思维。

07

《产品设计与开发（原书第6版）》

[美]卡尔·T. 乌利齐（Karl T. Ulrich）等著

推荐语：本书全面介绍产品的设计与开发方法，涉及客户需求、功能设计、模型设计、工业设计等一系列过程，现代化的产品开发要求产品经理把市场需求与功能设计结合起来，本书给出了翔实的解决方案，并介绍了如何协调各方面团队的工作。

本书非常适合用于工科学生的设计项目课程。如果将来想成为产品开发领域的杰出人才，那么本书将引领你认识整个设计流程，书中每一章都解决了未来工程师需要理解的一个主题。

08

《交互设计：超越人机交互（原书第4版）》

[美]詹妮·普瑞斯（Jenny Preece）等著

推荐语：本书由交互设计界的三位顶尖学者联袂撰写，是该领域的经典著作，被全球各地的大学选作教材。新版本继承了本书一贯的跨学科特色，并与时俱进地更新了大量实例，涉及敏捷用户体验、社会媒体与情感交互、混合现实与脑机界面等。全书紧紧围绕设计与评估的迭代过程，不仅包含传统的理论知识、实例解析、实践指导等内容，还通过“窘境”模块讨论了一系列启迪思考的开放问题。

读书日签

更多精彩回顾

书讯 | 6月书讯 （上）| 初夏已至，书香有约，六月宜静心读书

书讯 | 6月书讯 （下）| 初夏已至，书香有约，六月宜静心读书

上新 | 周志华领衔撰写，历时4年，宝箱书问世！
书单 | 创建字节跳动之前，张一鸣读过哪些硬核技术书？

干货 | G1垃圾回收算法概述

收藏 |TIOBE 6 月编程语言排行榜：C 与 Java 进一步拉开差距、Rust 跃进 TOP 20