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

本文来自网易云社区

作者：马宝


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

Alt pic

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

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

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

一定要点哦

一、全过程解析

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

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

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

Alt picAlt pic

[必读]准备工作

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

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

Alt pic

有sketch的打开sketch，没有的同学。本文所有操作在Figma中进行。因为原理是一样的。

Alt pic

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

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

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

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

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

1

Alt pic

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

Alt pic

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

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

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

Alt pic

Alt pic

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

Alt pic

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

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

Alt pic

Alt pic

Alt pic

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

Alt pic

Alt picAlt pic

Alt pic
Alt pic

Alt pic

Alt pic

Alt pic

Alt pic

Alt pic

第三步 目标态

Alt picAlt picAlt pic

  1. 线稿，用元件的话不需要自己画线稿，会"搭乐高"就行

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

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

    Alt picAlt pic

效果图

Alt pic

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

Alt pic

Alt pic

Alt pic

总结

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


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

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


相关文章：
【推荐】 基于Docker的UI自动化初探
【推荐】 360°透视：云原生架构及设计原则

转载于:https://www.cnblogs.com/163yun/p/9699015.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/426739.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

亿嘉和机器人上市了吗_亿嘉和上半年收入持续增长，拟7亿元定增加码主业研发...

亿嘉和机器人上市了吗_亿嘉和上半年收入持续增长，拟7亿元定增加码主业研发...

《电鳗财经》 赵超/文作为国内机器人行业中重要成员之一的亿嘉和(603666.SH)，在深耕省内市场、持续拓展省外市场的策略下，上半年收入延续一季度增长态势。《电鳗财经》注意到，在公布半年报的同时，亿嘉和也抛出了7.08亿元的定增方案…
阅读更多...
实例61:python

实例61:python

#题目：查找字符串 #!/usr/bin/python -- coding: UTF-8 -- sStr1 ‘abcdefg’ sStr2 ‘cde’ print (sStr1.find(sStr2))
阅读更多...
dft计算傅里叶级数系数_一道国外的DFT性质的题目

dft计算傅里叶级数系数_一道国外的DFT性质的题目

由于上半年实在太忙太忙，所以导致很久没更新公众号了，特意向各位长期关注的小伙伴表示歉意。今天分享的是DFT性质的应用。背景：DFT的对称性在解题中是非常常见的，很多同学，一看到“实序列”就感觉无从下手。然而它却是…
阅读更多...
实例62:python

实例62:python

#输入3个数a,b,c，按大小顺序输出。 #!/usr/bin/python -- coding: UTF-8 -- if name ‘main’: n1 int(input(‘n1 :\n’)) n2 int(input(‘n2 :\n’)) n3 int(input(‘n3 :\n’)) def swap(p1,p2):return p2,p1if n1 > n2 : n1,n2 swap(n1,n2) if n…
阅读更多...
扩容是元素还是数组_Map扩容源码

扩容是元素还是数组_Map扩容源码

首先我们运行一段代码：此时运行，程序正常，接下来我们将注释放开：此时运行发现，OOM了：为什么new出来HashMap的时候并没有报OOM，而是在第一次进行put操作的时候才报的OOM？我们来看下ma…
阅读更多...
实例63:python

实例63:python

#题目：输入数组，最大的与第一个元素交换，最小的与最后一个元素交换，输出数组 #!/usr/bin/python -- coding: UTF-8 -- a[1,2,3,7,9,8] for i in range(len(a)): if a[i]max(a): a[0],a[i]a[i],a[0] for i in range(len(a)): i…
阅读更多...
客户端配置_交换机作为STelnet客户端登录其他设备配置示例

客户端配置_交换机作为STelnet客户端登录其他设备配置示例

交换机作为STelnet客户端登录其他设备配置示例1、组网需求图1 设备通过STelnet登录其他设备组网图如上图1所示，用户希望在服务器端和客户端进行安全的数据交互，配置两个登录用户为client001和client002，分别使用password认证方式和RSA认证方式…
阅读更多...
实例64:python

实例64:python

#题目：有 n 个整数，使其前面各数顺序向后移 m 个位置，最后 m 个数变成最前面的 m 个数 #!/usr/bin/python -- coding: UTF-8 -- if name ‘main’: n int(input(‘整数 n 为:\n’)) m int(input(‘向后移 m 个位置为:\n’)) def move(a…
阅读更多...
canvas 动画库 CreateJs 之 EaselJS（上篇）

canvas 动画库 CreateJs 之 EaselJS（上篇）

本文来自网易云社区作者：田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 （原文链接），同时也包含了很多本人的理解，如过有叙述不当的地方，请联系我 :-D 本…
阅读更多...
细说fgetc

细说fgetc

fgetc int fgetc(FILE *stream) 注意到参数类型FILE *，因为这个函数是我们在对文件进行读写操作时常用到的，文件流（即我们所定义的指向文件的指针）。同时还要注意到函数的返回类型int,参考了其他博主一些文章后总结出来&#xf…
阅读更多...
实例65:python

实例65:python

#题目：有n个人围成一圈，顺序排号。从第一个人开始报数（从1到3报数）， #凡报到3的人退出圈子，问最后留下的是原来第几号的那位。 coding:utf-8 nint(input(“输入人数:”)) List[] for i in range(1,n1): L…
阅读更多...
算术类型转换、整型提升

算术类型转换、整型提升

分享一个很有意思的小tip 有人在编写代码时运行出了一个让人摸不着头脑的结果: -20>0U 怎么会是真值呢？？ 这位朋友还特意检验了一下0U的值，当然是0没错。可是出现这样的结果到底是为什么呢？ 这就涉及到c语言中的算术类型转换…
阅读更多...
Mysql解压版配置

Mysql解压版配置

mysql安装包可到官网下载，地址：https://dev.mysql.com/downloads/mysql 1、首先解压文件包，我这解压到E:\install_work\mysql目录下： 2、发现mysql根目录下没有data目录和my.ini文件，不要紧，初始化mysql的时…
阅读更多...
第二次作业重交

第二次作业重交

一、项目简介 1、Gitee项目地址：https://gitee.com/xnsy/WC 2、开发语言：C#语言 3、解题思路 刚看完作业要求后，只知道这个程序要完成对文件的统计工作，但是对于程序设计仍然是一头雾水，而后百度了怎么编写wordcount程…
阅读更多...
java学习（4）:第一个java程序

java学习（4）:第一个java程序

1第一个java文件 编写一个.java后缀的文件 public class helloworld{ public static void main(String[] args){ System.out.println(“helloworld”); } } 2cmd 编译java javac helloworld 生成class文件使用 Java helloworld 输出helloworld结束 个人练习 public class test…
阅读更多...
java学习（5）:全局变量和局部变量

java学习（5）:全局变量和局部变量

public class qulitity{ static int num125; public static void main(String[] args){ System.out.println(“全局变量的值为”num1); int num212; System.out.println(num2); Test(); } public static void Test(){ int num21000; System.out.println(num2); } }
阅读更多...
C语言知识点笔记完全整理

C语言知识点笔记完全整理

这个大长篇相当于是自己对于c语言学习的一个总结，会持续更新完善。 后续会在寒假整理一些经典的例题附带题解，当然希望我学到的东西、总结的经验，能够给后来者提供一个更好的学习途径，从入门到精通而不再是放弃。 也欢迎读者提出…
阅读更多...
[HAOI2016]食物链

[HAOI2016]食物链

题目描述 如图所示为某生态系统的食物网示意图，据图回答第1小题现在给你n个物种和m条能量流动关系，求其中的食物链条数。物种的名称为从1到n编号M条能量流动关系形如a1 b1a2 b2a3 b3......am-1 bm-1am bm其中ai bi表示能量从物种ai流向物种bi,注意单独的…
阅读更多...
java学习（6）:数据类型

java学习（6）:数据类型

public class Shortdata{ public static void main(String[] args){ byte by 45; short sho 32767; System.out.println(“sho的值是”sho); //获取最大值 System.out.println(Byte.MAX_VALUE); System.out.println(Short.MAX_VALUE); //获取最小值System.out.println(Byte.M…
阅读更多...
Xcode添加pch文件

Xcode添加pch文件

1.打开Xcode工程. 在Supporting Files目录下,选择 File > New > File > iOS > Other > PCH File 然后点击下一步； 2.如果项目名称为Demo, PCH 文件的名字为Test.pch,然后创建；3.选择 PCH 文件创建Test.pch文件4.找到 Project > Build …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023