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

本文來自網易雲社區

做者：馬寶

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

本文算是一篇所見即所的，可邊學邊乾的原創教程。總結全文就一句話，「讓結構和表現分離，自下而上的設計呈現」

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

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

必定要點哦

---

1、全過程解析

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

[關鍵詞] 模塊化設計,組件套元件，元件套元素； 把一套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+款雲產品！

更多網易研發、產品、運營經驗分享請訪問網易雲社區。

相關文章：
【推薦】 從DevOps到CloudNative，應用上雲姿式全解鎖