FUI- 我离钢铁侠还差几步？

本文来自网易云社区

做者：马宝

什么是FUI本文不累赘的能够自行Google，喜欢科幻的同窗们都看一张图就能感觉到FUI的魅力。

本文算是一篇所见即所的，可边学边干的原创教程。总结全文就一句话，“让结构和表现分离，自下而上的设计呈现”

我会持续更新，想到哪儿写到哪儿 涉及到的任何知识点都是可验证的，可操做的，可追溯的。理论相关自行wiki（温情提示下多图）

最终态 - 看结果最终成果会在Figma 里作共享展现，如下是iframe，这个是可动态更新的，若是你在看的时候发现它即时变化了，不用惊讶，这不是预先的动画，而是我在实时修改效果。 提示，下面的图是能够交互的，鼠标移上去点击右上角的全屏模式下，放大缩小，移动等等。

必定要点哦

---

1、全过程解析

这个部分主要讲“怎么作”，直接落地的设计方法，解释设计全过程。

[关键词] 模块化设计,组件套元件，元件套元素； 把一套UI拆成若干的小部件，每一个部件是灵活的，就像“细胞”能够不断自我成长，能够复制变化又相互联动； 说白话：本文用sketch的“symbol”，和figma的“components”；都是基于组件的设计方法进行

什么是figma： (Figma=sketch) > PS 好用与否，你试过便知 不确切的讲现代UI方面 （Figma略等于sketch）优于ps。特别好用的是figma的矢量工具，在造型方面强大无限接近AI，比AI快又不要钱。还能设计协同， （是否能感觉到我炽诚的双眼热泪盈眶） 个人主力设计工具是sketch，Figma是个人造型辅助用，ps偶尔修一下图片，基本告别AI。

---

[必读]准备工做

准备工做：打开chrome，按网址，注册一下超快的。有Google帐号能够同步， （若是他接入网易通行证就更好啦、有网易通行证的同窗能够去和figma谈合做，会发财哦！）https://www.figma.com/file/0wHxptPYiOkTIRy0xVffckl2/FUI%E7%BB%83%E4%B9%A0-mab

番外知识
打开 设置浏览器默认字体大小，由于chrome 默认最小字号是12号字体，
影响figma界面的字体图标展现是6号字体。

有sketch的打开sketch，没有的同窗。本文全部操做在Figma中进行。由于原理是同样的。

原理：让结构和表现分离，自下而上的设计呈现

视觉语言中的点、线、面就是这个概念，可是我把这个概念在抽象了一层，设计做品就像人

“骨架+肉体+衣服”，从里到外拆解。咱们要作的第一步就是创造像骨架同样强筋的结构。而后再去设计样式和表现，就像是给不一样身体穿上不一样的“衣服”。俗话说发育期不要去管穿什么衣服；结构归结构、样式归样式。

番外知识
程序员中盛行“结构和表现分离”，语义化结构优与样式表现，所谓的一个科学合理的HTML结构加上一套精美的CSS样式表，就造成了咱们看到的绝大多数网页设计做品了。

整个设计过程，就是先作元件，再组合成结构，最后去调样式；从左到右很像工厂里的流水线。

第一步 搭建组件库（结构）

• 我敢说全部平面设计都是从“点”、“线”、“面”开始的；

• 把经常使用的点线面，设计成独立可复用的元件

• 元件的尺寸都是 “20*20px”，用大小去归类组件，对库的管理颇有帮助

选择定义对象，点4菱图形icons，定义组件组件库复用

选择圆形，设置描边样式：“Dash Pattern: 4800, 1300, 80, 7300” ，不一样参数有不的变化

Align: CenterWidth: 10px
Dash Pattern: 4800, 1300, 80, 7300

---

第二步 黑白线稿 > 效果图（修改样式）

---

第三步 目标态

1. 线稿，用元件的话不须要本身画线稿，会"搭乐高"就行

2. 修改样色；（会渐变很重要，这个调试过程，我新开文章单独讲）

3. 在组件里修改，镜像组件作预览；

效果图

DEMO是参考图，如下是实现的效果。

总结

（结构和表现分离，未完...）

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。

相关文章：
【推荐】 从DevOps到CloudNative，应用上云姿式全解锁