本文来自网易云社区

作者:马宝

什么是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


第二步 黑白线稿 > 效果图(修改样式)




第三步 目标态

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

  2. 修改样色;(会渐变很重要,这个调试过程,我新开文章单独讲)

  3. 在组件里修改,镜像组件做预览;

效果图

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

总结

(结构和表现分离,未完...)

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

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

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

FUI- 我离钢铁侠还差几步?的更多相关文章

  1. SQL语句计算距离今天生日还差几天

    转载于:http://www.w3dev.cn/article/20110125/sql-compute-birthdate-now-days.aspx SQL语句计算距离生日还差几天原理很简单,将要 ...

  2. 陈发树云南白药股权败诉真相 取胜仅差三步 z

    22亿元现金,三年只拿到750多万元的利息.福建富豪陈发树的云南生意可谓失望之极.在漫长的官司中,曾经有绝处逢生之机的陈发树,连告状的主体都没有找准,岂能同强大的国企扳手腕?陈发树律师团距取胜只有三步 ...

  3. Sentinel上生产环境只差一步,监控数据持久化

    之前介绍了Sentinel相关的文章,小伙伴在生产实践中不知道有没有这个疑问?我们的Sentinel控制台监控的数据只能看最近5分钟的,如图 那么就导致历史数据是查看不了的,那肯定是不行的,在生产环境 ...

  4. 您还差宝贝一张语文教学光盘!教你如何制作ISO文件

    1 大家没有发现 宝宝初上小学无法专心地做作业.读书? 我家的宝贝就是这样 做作业时 总是东搞搞,西弄弄 完全无法专心 再不就是不耐心 读一遍课本就觉得累 读三两遍就说学习是个苦差事儿 2 一直以来 ...

  5. UX求职:FB和微软这些大佬公司看重的UX设计师技能,你还差几条?

    最近是金三银四的求职季,当然,不管你是想求职跳槽,还是想不断充电学习升职加薪,总是要从优秀的一群人中学习. 本文依据 Facebook.微软.Booking 等互联网大佬公司的UX设计师访谈记录,整理 ...

  6. 【Luogu】【关卡2-15】动态规划的背包问题(2017年10月)【还差一道题】

    任务说明:这是最基础的动态规划.不过如果是第一次接触会有些难以理解.加油闯过这个坎. 01背包二维数组优化成滚动数组的时候有坑有坑有坑!!!必须要downto,downto,downto 情景和代码见 ...

  7. (转)致Java程序员:你离架构师还差多远?

    转至:https://blog.csdn.net/ityouknow/article/details/82782965 几乎每个Java程序员心中,都有着成为架构师的技术追求.那么,成为Java架构师 ...

  8. Spark难道比oracle性能还差?百万级数据测试性能

    本人对大数据方面也是刚刚研究,由于工作需要在实时查询与统计的性能方面要深入学习.现测试性能如下:   环境:VirtualBox  host-only ubuntu版本: Linux master 4 ...

  9. 你离月薪30K还差哪些?

    这类标题的文章,是不是很熟悉?你是不是冲着标题进来的? 类似这样的标题党文章,你应该看过很多,多数是泛泛而谈,没啥用- 今天老徐跟大家用几个真实案例,聊点有用的- 看完之后,你至少知道自己的差距是哪些 ...

随机推荐

  1. matlab查找最临近搜索knnsearch

    Idx = knnsearch(X,Y) finds the nearest neighbor in X for each query point in Y and returns the indic ...

  2. Eclipse 下配置MySql5.6的连接池,使用Tomcat7.0

    目前找到的最简单的配置方法.   1.首先在eclipse中创建一个Dynamical Web Application,在WebContent文件夹下的META-INF文件夹中创建新的名为conten ...

  3. python MLP 神经网络使用 MinMaxScaler 没有 StandardScaler效果好

    MLP 64,2  preprocessing.MinMaxScaler().fit(X)                               test confusion_matrix:[[ ...

  4. SSH三大框架的搭建整合(struts2+spring+hibernate)(转)

    原文地址:http://blog.csdn.net/kyle0349/article/details/51751913  尊重原创,请访问原文地址 SSH说的上是javaweb经典框架,不能说100% ...

  5. C#操作计划任务

    昨天有一个任务,就是要下载相关文件,然后保存在相关路径下,这个没什么难度,所以就略过不谈,主要谈谈定时下载,即每天某个固定时间执行下载,这个功能我是用C#代码来操作windows自带的任务计划来实现的 ...

  6. 【二叉树的递归】07路径组成数字的和【Sum Root to Leaf Numbers】

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,节点的值仅限于从0 ...

  7. 【二叉查找树】02不同的二叉查找树个数II【Unique Binary Search Trees II】

    提到二叉查找树,就得想到二叉查找树的递归定义, 左子树的节点值都小于根节点,右子树的节点值都大于根节点. +++++++++++++++++++++++++++++++++++++++++++++++ ...

  8. LOJ_#2720. 「NOI2018」你的名字 _后缀数组+主席树+倍增

    题面: https://loj.ac/problem/2720 考虑枚举T串的每个后缀i,我们要做两件事. 一.统计有多少子串[i,j]在S中要求位置出现. 二.去重. 第二步好做,相当于在后缀数组上 ...

  9. bzoj 4766: 文艺计算姬 矩阵树定理

    题目: 给定一个一边点数为\(n\),另一边点数为\(m\),共有\(n*m\)条边的带标号完全二分图\(K_{n,m}\) 计算其生成树个数 \(n,m,p \leq 10^{18} ,p为模数\) ...

  10. IronPython 源码剖析系列(1):IronPython 编译器

    自 IronPython 正式发布以来,由于对 Python 语言的喜爱所驱使,同时我想藉此去了解一下编程语言的编译器,分析器等程序是什么原理,如何运作的,所以我开始了对 IronPython 源代码 ...