本文来自网易云社区

作者:马宝

什么是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. thinkphp3.2新部署是错

    下载好thinkphp3.2,使用M或者D方法是,报FILE: tp\ThinkPHP\Library\Think\Db.class.php LINE: 42 可能的错误是,配置文件中没有配置数据库连 ...

  2. C++(八)— 死锁原因及解决方法

    1.死锁原因 死锁问题被认为是线程/进程间切换消耗系统性能的一种极端情况.在死锁时,线程/进程间相互等待资源,而又不释放自身的资源,导致无穷无尽的等待,其结果是任务永远无法执行完成. 打个比方,假设有 ...

  3. 尴尬,qt出现错误,然后莫名又好了..

    Starting D:\code\qt\myChess\day01\build-HelloQT-Desktop_Qt_5_5_0_MinGW_32bit-Debug\debug\HelloQT.exe ...

  4. 201621123014《JAVA程序设计》第2周学习总结

    1. 本周学习总结 引用数据类型:JAVA定义字符串实际上是创建字符串的引用,将引用指向需要的字符串. 字符串常量池:直接对引用赋值时,会先在字符串中搜索是否有这个对象,已有则不创建直接指向它. St ...

  5. codeforces 622C C. Not Equal on a Segment

    C. Not Equal on a Segment time limit per test 1 second memory limit per test 256 megabytes input sta ...

  6. codeforces 653B B. Bear and Compressing(dfs)

    题目链接: B. Bear and Compressing time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  7. [原]NYOJ-大数阶乘-28

    大学生程序代写 //http://acm.nyist.net/JudgeOnline/problem.php?pid=28 /*题目28题目信息运行结果本题排行讨论区大数阶乘 时间限制:3000 ms ...

  8. LOJ2722 「NOI2018」情报中心

    「NOI2018」情报中心 题目描述 C 国和D 国近年来战火纷飞. 最近,C 国成功地渗透进入了D 国的一个城市.这个城市可以抽象成一张有$n$ 个节点,节点之间由$n - 1$ 条双向的边连接的无 ...

  9. P1364 医院设置

    题目描述 设有一棵二叉树,如图: 其中,圈中的数字表示结点中居民的人口.圈边上数字表示结点编号,现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小,同时约定,相邻接点之间的距离为l.如上 ...

  10. 非系统数据文件损坏,rman备份恢复

    实验前提:已经做好备份. SQL> col file_name for a50select file_id,file_name from dba_data_files; FILE_ID FILE ...