前端和设计如何无缝响应

一、前端/开发和设计师的恩怨情仇

在开发用户界面的过程中，

有一群人，

他们一直是相爱相杀的。

这群人叫——工程师与UI！

没有技术，

设计师的许多创意想法无法实现，

没有设计师，

那一群人的世界也失去了些许生动。

（此小散改编自某同行，在哪里看到记不清了）

前端和设计如何无缝响应

平衡设计与前端间的矛盾？

设计师交出的东西在前端那里不可能100%实现，因为设计本就不可能面面具到，而一些细节最终都要工程师自行定夺。

自行定夺的前提：设计给出可行性设计方案；工程师能理解设计原则。

---

二、那么多为什么

程序员怎么理解设计师？设计师又怎么理解程序员的工作？

代码怎么写的？怎样布局合理？有哪些地方是可以避免不必要的问题的？

程序员怎么理解设计师？设计师又怎么理解程序员的工作？

代码怎么写的？怎样布局合理？有哪些地方是可以避免不必要的问题的？

第1弹：Colors

          为什么有那么多颜色，深灰、浅灰不是都是灰嘛，用一个不行啊？

如上图：设计师制定的用色规范，大多数技术人员会看到一套成梯度不断减弱的灰色调配色。这一组颜色常被称为中性色。

            在背景、边框、分割线等场景的使用中很常见。此规范用于区分信息的主次关系，还负责在视觉上增强页面的层次感。

（注：目前还有一种比较高效的配色法，可以按照调整透明度的方式实现）

第2弹：字体、行高

            一会12px一会14px，字号设计太随意？照设计标注设置的字号，为什么做出来和设计图不一样？

字体是界面设计中重要的构成要素之一，它能辅助信息的传递，是文字的外在表现形式；字体还可以通过其独有的艺术魅力，表达情感体验，并塑造品牌形象。

在需要拉开间距的时候 ，合理的选择字号大小与行高，会使字阶之间产生秩序美。

第3弹：图标

            风格不一致？圆角不一致？大小不一致？

---

三、布局与元素

程序员拿到设计稿后，怎么分析设计思路：

信息的排布

图片的使用

颜色的使用

留白的艺术

视觉心理的运用

没有设计的设计

---

第1弹：对齐

            左对齐？右对齐？怎么参照？

第2弹：对比

            类似的元素为什么设计成不同的样式，多麻烦？

第3弹：亲密性

            间距有大有小，分割线有长有短？

第4弹：重复性

            间距有大有小，分割线有长有短？

---

四、界面的组织性与新城代谢

组织性——UI界面可解构为通用的UI元素

新陈代谢——新的UI元素不断替代旧的元素，保持整体设计的活力

https://dribbble.com/shots/5658501-autumn-wood

---

五、了解运行系统

希望能对你有一点帮助！

-END-