关键词：
本文来自网易云社区
作者：马宝
什么是FUI本文不累赘的可以自行Google，喜欢科幻的同学们都看一张图就能感受到FUI的魅力。
本文算是一篇所见即所的，可边学边干的原创教程。总结全文就一句话，“让结构和表现分离，自下而上的设计呈现”
我会持续更新，想到哪儿写到哪儿 涉及到的任何知识点都是可验证的，可操作的，可追溯的。理论相关自行wiki（温情提示下多图）
最终态 - 看结果最终成果会在Figma 里做共享展示，以下是iframe，这个是可动态更新的，如果你在看的时候发现它即时变化了，不用惊讶，这不是预先的动画，而是我在实时修改效果。 提示，下面的图是可以交互的，鼠标移上去点击右上角的全屏模式下，放大缩小，移动等等。
一定要点哦
一、全过程解析
这个部分主要讲“怎么做”，直接落地的设计方法，解释设计全过程。
[关键词] 模块化设计,组件套元件，元件套元素； 把一套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
第二步 黑白线稿 > 效果图（修改样式）
第三步 目标态
线稿，用元件的话不需要自己画线稿，会"搭乐高"就行
修改样色；（会渐变很重要，这个调试过程，我新开文章单独讲）
在组件里修改，镜像组件做预览；
效果图
DEMO是参考图，以下是实现的效果。
总结
（结构和表现分离，未完...）
网易云免费体验馆，0成本体验20+款云产品！
更多网易研发、产品、运营经验分享请访问网易云社区。
相关文章：
【推荐】 基于Docker的UI自动化初探
【推荐】 360°透视：云原生架构及设计原则
与蒙牛“抢奶”后，伊利距千亿营收梦还差几步？
“中国的伊利”会成为“世界的伊利”吗？2017年，伊利提出了千亿战略目标：计划2020年进入“全球乳业排名五强”、“营收突破千亿”。在去年，伊利还未实现这个千亿目标，但在今年一季度营收达到了968.8... 查看详情
牛市必备的三个条件，a股现在还差几个
1.国家政策2.中美贸易3.资金支持 A股变化如神！ 自本月10日受美股大跌的影响后，A股先是随之震荡跳水，千股跌停；随后因高层力挺和政策支持而V型反转，集体涨停；接着上演过山车走势，有时涨得令人振奋，有时又跌... 查看详情
原来过去的python学了个寂寞，你离进阶还差这几步(代码片段)
其实现在程序员学Python不是新鲜事，甚至不少人会把Python当作第一语言来学习。也难怪，Python的优点太多了，它语言简洁、开发效率高、可移植性强，并且可以和其他编程语言（比如C++）轻松无缝衔... 查看详情
sql计算两个日期差几天(代码片段)
...;方便后续查询。其中有一个环节，需要计算两个日期差几天，经过一番思考，可以按如下方式进行计算。1.unix_timest 查看详情
嗯第一来着先领养一只看板娘把(代码片段)
<scripttype="text/javascript">/*把autoload.js内容直接内置*/$(‘body‘).append(‘<divclass="waifu"><divclass="waifu-tips"></div><canvasid="live2d"class="live2d"></canvas><divclass="waifu-tool"><spanclass="fui-home"></span><spanclass="... 查看详情
codeforcesround#559(div.2)（还差2题）(代码片段)
总结：这次写的太菜了，一个B题写了很久，这种维护一个最小值在计算的题目，下次要反应快点； C题是一个贪心，写的时候也是想了好久.... D题这个范围.A：签到，算一个最开始有多少就行了，注意可以取到0... 查看详情
codeforcesround#561(div.2)（还差2题）(代码片段)
总结：bitset的基本操作：http://www.cnblogs.com/RabbitHu/p/bitset.html B题中求每行每列均有...，只要在下一行中把上一行的第一个放到最后一个就能构造满足条件的解； C题中这种，如果直接讨论绝对值的情况有点多，直接自... 查看详情
前端处理订单倒计时显示问题(代码片段)
...f0c;可能会出现服务器时间已经显示到期，但是客户端还差几分钟的情况，所以和后端商量他那边计算到期时间戳-服务器时间戳=服务器待付款时 查看详情
airsim动态|你离学会airsim还差最后一步！(代码片段)
经过其前面几期的介绍，相信大家已经部署好AirSim的环境了，也看到很多人已经开始使用AirSim上手自己的研究了。AirSim作为一个持续更新的开源项目，其社区在开发迭代中，不断完善功能和修复bug，所提供的AP... 查看详情
每天一个css小特效，文字闪烁——钢铁侠：爱你三千遍(代码片段)
文章目录前言效果图HTML篇CSS篇1.盒子模型设置2.动画设置完整代码前言我是前端小刘不怕牛牛，loveyou3000，愿你能遇到值得的人。今天分享一个唯美的文字闪烁CSS特效希望大家能喜欢效果图HTML篇代码：<divclass="... 查看详情
牛掰！从sql注入到连接3389只需这几步(代码片段)
从sql注入到连接3389数据库为sqlserver判断字符、数字型、闭合方式MicrosoftOLEDBProviderforSQLServer错误‘80040e14’遗漏字元字串’AND显示状态Flag=1ORDERBY排序DESC’后面的引号。D:\\S_JCIN\\WEBSITE\\OUTWEB\\L_CT\\NEWS…/…/…/_sysadm/_Function/DB_Funct 查看详情
几步命令轻松搭建windowsssh服务端(代码片段)
这里说的SSH，全名叫做SecurityShell，相信经常用Linux的同学不会陌生。SSH最常见的作用就是用来远程登录其他系统的命令行界面，当然主要还是给Linux用户使用的。但是其实现在Windows10已经自带了OpenSSH功能，这样一... 查看详情
如何搭建flutterframework开发环境？简单几步就到位！(代码片段)
一、相关依赖Linux，MacOSX或者Windowsgit：用于源码的版本控制;sshclient：用于Github的认证;IDE:带有Flutter插件的AndroidStudio，这是官方推荐的旗舰IDE;Python:很多工具都需要用到Python，比如gclient;Androidplatformtools 查看详情
简单几步教你实现unity游戏界面灰度效果(代码片段)
Unity之后处理实现界面灰度效果前言一，PostProcessing1.1设置组件1.2代码控制二，Shader材质实现2.1原理API2.2编写Shader2.3编写代码2.4实现效果效果展示Unity之后处理实现界面灰度效果(PostProcessing实现|Shader实现)前言在Unity中实现... 查看详情
简单几步教你学废c语言实现三子棋（一一详解）(代码片段)
目录前言问题描述工具基本思路和流程三子棋的规则代码实现思路实现步骤模块化菜单界面 代码选择的实现初始化和打印棋盘棋盘使用宏定义初始化打印考虑如何实现图表提供代码效果图 玩家落子考虑问题参考代码电脑实现... 查看详情
简单几步，实现redis查询“附近的人”(代码片段)
前言：针对“附近的人”这一位置服务领域的应用场景，常见的可使用PG、MySQL和MongoDB等多种DB的空间索引进行实现。而Redis另辟蹊径，结合其有序队列zset以及geohash编码，实现了空间搜索功能，且拥有极高的运... 查看详情
仅用css几步实现赛博朋克2077风格视觉效果(代码片段)
我非常喜欢赛博朋克2077官网的设计风格，因此本篇文章主要以2077官网为例，通过几个例子，依次实现赛博朋克风格元素效果。背景文章开始之前先简单了解下什么是赛博朋克，以及什么是赛博朋克2077。赛博朋克（Cyberpunk）是“... 查看详情
简单几步就教会你如何使用dockerfile制作lnmp镜像，还不赶紧学起来(代码片段)
简单几步就教会你如何使用dockerfile制作LNMP镜像前言一、dockerfile撰写php镜像二、dockerfile撰写mysql镜像三、dockerfile撰写nginx镜像四、查看镜像构建情况五、分别开启nginx、mysql和php镜像六、进行测试前言注意：搞docker的环境时&#x... 查看详情