FUI-我離鋼鐵俠還差幾步？

來自專欄 效率控

什麼是FUI本文不累贅的可以自行Google，喜歡科幻的同學們都看一張圖就能感受到FUI的魅力。

本文是一篇所見即所得，可以邊學邊乾的原創教程。

總結全文就一句話，「讓結構和表現分離，自下而上的設計呈現」

我會持續更新，想到哪兒寫到哪兒 涉及到的任何知識點都是可驗證的，可操作的，可追溯的。理論相關自行wiki（溫情提示下多圖）

最終態 - 看結果 最終成果會在Figma 里做共享展示，以下是iframe，這個是可動態更新的，如果你在看的時候發現它即時變化了，不用驚訝，這不是預先的動畫，而是我在實時修改效果。 提示，下面的圖是可以交互的，滑鼠移上去點擊右上角的全屏模式下，放大縮小，移動等等。

我的figma源文件?

www.figma.com

一、全過程解析

這個部分主要講「怎麼做」，直接落地的設計方法，解釋設計全過程。

[關鍵詞] 模塊化設計,組件套元件，元件套元素； 把一套UI拆成若干的小部件，每個部件是靈活的，就像「細胞」可以不斷自我成長，可以複製變化又相互聯動；

本教程用sketch的「symbol」，和figma的「components」；都是基於組件的設計方法進行的。

什麼是figma： (Figma=sketch) > PS 好用與否，你試過便知不確切的講現代UI方面 （Figma略等於sketch）優於ps。特別好用的是figma的矢量工具，在造型方面強大無限接近AI，比AI快又不要錢。還能設計協同， （是否能感受到我熾誠的雙眼熱淚盈眶）

我的主力設計工具是sketch，Figma是我的造型輔助用，ps偶爾修一下圖片，基本告別AI。

[必讀]準備工作

準備工作：打開chrome，按網址，註冊一下超快的。有Google賬號可以同步，

共享地址

番外知識

打開 設置瀏覽器默認字體大小，因為chrome 默認最小字型大小是12號字體，

影響figma界面的字體圖標展示是6號字體。

設計原理：讓結構和表現分離，自下而上的設計呈現

視覺語言中的點、線、面就是這個概念，但是我把這個概念在抽象了一層，設計作品就像人

「骨架+肉體+衣服」，從裡到外拆解。我們要做的第一步就是創造像骨格一樣的強勁結構。然後再去設計樣式和表現，就像是給不同身體穿上不同的「衣服」。俗話說發育期不要去管穿什麼衣服；結構歸結構、樣式歸樣式。

番外知識

程序員中盛行「結構和表現分離」，語義化結構優與樣式表現，所謂的一個科學合理的HTML結構加上一套精美的CSS樣式表，就形成了我們看到的絕大多數網頁設計作品了。

整個設計過程：

先做元件，再組合成「結構」，最後去調樣式；從左到右很像工廠里的流水線。

第一步 搭建組件庫（結構）

• 我敢說所有平面設計都是從「點」、「線」、「面」開始的；
• 把常用的點線面，設計成獨立可復用的元件
• 元件的尺寸都是 「20*20px」，用大小去歸類組件，對庫的管理很有幫助

選擇定義對象，點4菱圖形icons，定義組件組件庫復用

「Dash Pattern: 4800, 1300, 80, 7300」 ，不同參數有不的變化

Align: Center

Width: 10px

Dash Pattern: 4800, 1300, 80, 7300

第二步 黑白線稿 > 效果圖（修改樣式）

第三步 目標態

1. 線稿，用元件的話不需要自己畫線稿，會"搭樂高"就行
2. 修改樣色；（會漸變很重要，這個調試過程，我新開文章單獨講）
3. 在組件里修改，鏡像組件做預覽；

總結

結構和表現分離

未完 ：）

推薦閱讀：