FUI- 我离钢铁侠还差几步？
本文来自网易云社区
作者：马宝
什么是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+款云产品！
更多网易研发、产品、运营经验分享请访问网易云社区。
相关文章：
【推荐】 windows系统下npm升级的正确姿势以及原理
FUI- 我离钢铁侠还差几步？相关推荐
- 京东方要向苹果供应OLED面板还差好几步
据外媒报道,京东方已取得了苹果柔性OLED面板供应商资格,成为继三星.LGD之后第三家柔性OLED面板供应商,这意味着它未来有机会向后者供应OLED面板,不过要将此变成现实,它还做许多工作. 京东方与 ...
- 与蒙牛“抢奶”后，伊利距千亿营收梦还差几步？
"中国的伊利"会成为"世界的伊利"吗? 2017年,伊利提出了千亿战略目标:计划2020年进入"全球乳业排名五强"."营收突破千亿 ...
- 瑞幸离干掉星巴克还差几步？
NEW 关注Tech逆向思维视频号 最新视频→[日本富翁抵达宇宙还秀了朋友圈,普通人可以吗?] 出品|新熵 文 | 樱木 编辑|月见 一个丑闻,重新洗牌. 星巴克中国新任CEO蔡德粦也没有想到自己的危 ...
- 距离盈利，B站还差几步？
NEW 关注Tech逆向思维视频号 最新视频→[日本富翁抵达宇宙还秀了朋友圈,普通人可以吗?] 出品|新眸 文 | 阮雪 编辑|桑明强 每逢财报季,B站总要被讨论「盈利难题」. 这个季度也不例外,先看 ...
- 【CTF大赛】100步getshell之就差一步——The MOVAPS issue
当你完美的在栈上进行了布局,泄露了libc的地址,并且在libc中获得了syetem地址,获得了'/bin/sh'地址,此时此时就差一步sendline就打通了,可是你忽然发现,什么?为什么syste ...
- 头部新造车扎推IPO：理想距离特斯拉还差18个蔚来
本文授权转载自[燃财经] ID:rancaijing 作者:周继凤 北京时间7月30日晚,中国新造车企业理想汽车正式登陆纳斯达克,市场用脚投票给出了答案.IPO定价每股11.5美元,公开募集资金规模接 ...
- 红米note3 android go,离完美只差一步：MI 小米 红米Note5 智能手机 体验评测（含高通骁龙636性能测试）...
离完美只差一步:MI 小米 红米Note5 智能手机 体验评测(含高通骁龙636性能测试) 2018-04-06 12:57:42 255点赞 208收藏 187评论 其实早在发布之后,就计划好要做红 ...
- 红米note3android5.0,离完美只差一步：MI 小米 红米Note5 智能手机 体验评测（含高通骁龙636性能测试）...
离完美只差一步:MI 小米 红米Note5 智能手机 体验评测(含高通骁龙636性能测试) 2018-04-06 12:57:42 255点赞 208收藏 187评论 其实早在发布之后,就计划好要做红 ...
- 内部泄漏，惊现BAT互联网大厂薪资和职级表，你离年薪40W还差多少
本文转载自:内部泄漏,惊现BAT互联网大厂薪资和职级表,你离年薪40W还差多少 互联网大厂新入职员工各职级薪资对应表(技术线)~ 上面的表格不排除有很极端的收入情况,但至少能囊括一部分同职级的收入.这 ...
最新文章
- WPF的ListBox中的RadioButton不能单选问题
- [CRM] CRM 产品周期
- python颜色识别原理_电脑控制手机 Python实现颜色识别功能
- 总结一些通用的处理方法
- c++实现解析文件路径
- 线段树/扫描线问卷调查反馈——Rmq Problem / mex（主席树），Boring Queries（二分+st表+主席树），Colorful Squares（扫描线）
- Oracle 12c 安装 Linuxx86_64
- 8.霍夫变换：线条——霍夫的效果、噪声对霍夫的影响、霍夫拓展_5
- 谈软件测试人员定位---三年软件测试总结
- java debug详解_Java远程debug详解
- 电压比较器的原理与应用
- 自然辩证法2018版_2018年自然辩证法概论已整理-资源下载蚂蚁文库
- PDCA理念融入软件测试
- win10出现“以太网没有有效的ip配置”的问题
- 安装mysql时一直卡在starting the server这一位置，解决办法
- 细说Ansible主机清单inventory
- 防用户误删除，耗费一周时间把DeleteMark标志都加上来了，所有的删除操作从“物理删除”转为“逻辑删除”
- MATLAB：Radon正变换的理解
- 给计算机主机吹灰,电脑主机多久清理一次灰合理一些？一点小建议给你
- 【软件定义汽车】【场景篇】AR-HUD