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,一经查实,立即删除!

相关文章

C语言实战:(2)字符串的倒转变换

#include<stdio.h> #define N 50 void reverse(char s[]); //定义倒转函数 int main( ) {char s[N];scanf("%s",s);reverse(s); printf("%s",s);return 0; } void reverse(char s[]) {char c,*p,*q;pqs;while(*p!\0)p;p--; //保留\0不被交换//基本思…

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

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

实例61:python

#题目&#xff1a;查找字符串 #!/usr/bin/python -- coding: UTF-8 -- sStr1 ‘abcdefg’ sStr2 ‘cde’ print (sStr1.find(sStr2))

阿斯克码表ACSII对照表

ASCII码对照表 信息在计算机上是用二进制表示的&#xff0c;这种表示法让人理解就很困难。 因此计算机上都配有输入和输出设备&#xff0c;这些设备的主要目的就是&#xff0c;以一种人类可阅读的形式将信息在这些设备上显示出来供人阅读理解。 为保证人类和设备&#xff0c;设…

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

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

实例62:python

#输入3个数a,b,c&#xff0c;按大小顺序输出。 #!/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…

c语言笔记:转义字符

转义字符及其含义 转义字符含义转义字符含义\a响铃符\\反斜杠\b回退符?问号\f换页符\’单引号\n换行符\"双引号\r回车符\000八进制数\t横向制表符\xhh十六进制数\v纵向制表符

LightOJ 1393 Crazy Calendar(博弈)题解

题意&#xff1a;r*c方格中&#xff0c;每个格子有一定石子&#xff0c;每次移动每格任意数量石子&#xff0c;只能向下或者向右动一格&#xff0c;不能移动为败 思路&#xff1a;显然是Nim&#xff0c;到右下曼哈顿距离为偶数的不用管&#xff0c;因为先手动一下后手动一下最后…

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

首先我们运行一段代码&#xff1a;此时运行&#xff0c;程序正常&#xff0c;接下来我们将注释放开&#xff1a;此时运行发现&#xff0c;OOM了&#xff1a;为什么new出来HashMap的时候并没有报OOM&#xff0c;而是在第一次进行put操作的时候才报的OOM&#xff1f;我们来看下ma…

实例63:python

#题目&#xff1a;输入数组&#xff0c;最大的与第一个元素交换&#xff0c;最小的与最后一个元素交换&#xff0c;输出数组 #!/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…

css关于position的几个值

1. staitic:该值符合文档的初始排版&#xff0c;其中设置的与位置有关的值不起作用。2.relative 该值的偏移量&#xff0c;是在文档初始排版的基础上进行排版&#xff0c;并且覆盖顺序是最新输出的在最上面3.absolute该值元素的定位是以网页文档左上角位基准&#xff0c;并且不…

C语言笔记:格式化输入输出(fprintf、fscanf、sscanf...)

C语言笔记&#xff1a;格式化输入输出&#xff08;fprintf、fscanf、sscanf…) 包含以下函数的基本库&#xff1a;stdlib.h fprintf int fprintf(FILE *stream, const char *format,...) fprintf函数按照format说明的格式对输出进行转换&#xff0c;并写到stream流中。返回值是…

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

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

实例64:python

#题目&#xff1a;有 n 个整数&#xff0c;使其前面各数顺序向后移 m 个位置&#xff0c;最后 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(上篇)

本文来自网易云社区作者&#xff1a;田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 &#xff08;原文链接&#xff09;&#xff0c;同时也包含了很多本人的理解&#xff0c;如过有叙述不当的地方&#xff0c;请联系我 :-D 本…

细说fgetc

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

boot分布式计算 spring_腾讯T4大佬剖析SpringBoot2 :从搭建小系统到架构分布式大系统...

写在前面SpringBoot是目前Spring技术体系中炙手可热的框架之一&#xff0c;既可用于构建业务复杂的企业应用系统&#xff0c;也可以开发高性能和高吞吐量的互联网应用。Spring Boot框架降低了Spring 技术体系的使用门槛&#xff0c;简化了Spring 应用的搭建和开发过程&#xff…

实例65:python

#题目&#xff1a;有n个人围成一圈&#xff0c;顺序排号。从第一个人开始报数&#xff08;从1到3报数&#xff09;&#xff0c; #凡报到3的人退出圈子&#xff0c;问最后留下的是原来第几号的那位。 coding:utf-8 nint(input(“输入人数:”)) List[] for i in range(1,n1): L…

算术类型转换、整型提升

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

python博客编程_python编程

一.程序是什么&#xff1f; 程序&#xff0c;就是让机器按我们需求运行的一套代码。二.编程是什么&#xff1f; 编程&#xff0c;就是编写程序。三.编程语言是什么&#xff1f; 编程语言&#xff0c;就是编写程序的语言。四.编程语言的发展&#xff1f; 机器语言(二进制语言) →…