酷炫的 FUI 圖形設(shè)計

2020-2-6    前端達(dá)人

作者通過以進度條的設(shè)計深入淺出的講解關(guān)于FUI的設(shè)計思路。雖然FUI設(shè)計看起來很復(fù)雜，只要找準(zhǔn)規(guī)律，從一些作品中總結(jié)分析細(xì)節(jié)，再運用到我們的設(shè)計中。想要了解的小伙伴可以嘗試一下。

前言

看到上期小伙伴想了解一下 FUI 的設(shè)計教程，所以這次再次和大家聊一下關(guān)于 FUI 的設(shè)計風(fēng)格，我們以“進度條”的設(shè)計教程為例，深入淺出的聊一下關(guān)于 FUI 的設(shè)計思路，因為主要設(shè)計思路的延展，所以不會出現(xiàn)具體的數(shù)據(jù)參數(shù)，小伙伴們要諒解啊。

目錄

1.風(fēng)格介紹

2.設(shè)計思路

3.總結(jié)

1.風(fēng)格介紹

關(guān)于 FUI 的定義，閱讀過我上一篇文章的小伙伴可能對 FUI 的定義有了一個較為清晰的定義，即 FUI 是：虛構(gòu)的、未來的、幻想的用戶界面。

1.png



我們仔細(xì)閱讀關(guān)鍵詞：“虛構(gòu)的、未來的、幻想的?！睆膶?nbsp;FUI 關(guān)鍵詞上我們進行粗略的分析可以得出這么一條簡單的結(jié)論：FUI 的設(shè)計不依據(jù)現(xiàn)實為基礎(chǔ)的界面設(shè)計，為設(shè)計師留有巨大的想象空間。所以朋友們，請把腦洞開大一點吧，不受到當(dāng)前的技術(shù)和硬件載體的制約，F(xiàn)UI 本身就是一種創(chuàng)新發(fā)明。

2.png




接下來我會向大家簡單介紹一下 FUI 主要的兩大設(shè)計風(fēng)格：軍事風(fēng)格和機甲風(fēng)格（也可以叫做機械風(fēng)格）。 


1.軍事風(fēng)格

軍事風(fēng)格的特點在于：“直接明了”。因為在殘酷的戰(zhàn)爭中時間就是生命，士兵必須保證“快速、準(zhǔn)確、直接”才能保證戰(zhàn)斗的勝利，所以會盡量避免與操作業(yè)務(wù)無關(guān)的。你也可以理解為當(dāng)下最前沿的的設(shè)計理念“l(fā)ess is more?！崩缦聢D，在界面設(shè)計中幾乎都是利用簡單的幾何設(shè)計語言完成。

3.png




軍事風(fēng)格成為 FUI 的主流設(shè)計形式有著必然的原因。首先簡單的從我們熟知的影視作品中來講，在諸多科幻動作為主的故事題材的影視作品中，正義的一方都有軍隊的支持，其中不可避免的會出現(xiàn)的許多設(shè)備的界面；再則隨著科技的發(fā)展，許多高科技都會用運用到軍事設(shè)備的研發(fā)上，精密的結(jié)構(gòu)線和反復(fù)數(shù)據(jù)讓我們覺得其中的科技含量很高。


4.png




2.機甲風(fēng)格

機甲風(fēng)格相對于軍事風(fēng)格的最大特點就是：“具有一定的裝飾圖形元素，或多或少?！睓C甲風(fēng)格最大的特點便是具有機械或者機甲風(fēng)格的裝飾元素，其中多為異形元素。其靈感來源于工業(yè)設(shè)計，從機械和機甲的工業(yè)設(shè)計語言中提取圖形元素，在運用到界面設(shè)計上。如下圖，異形的機甲風(fēng)格讓機器人的頭部設(shè)計顯得更加統(tǒng)一，如果換成當(dāng)前流行的扁平化設(shè)計，可能就顯得有點奇怪了。

5.png

機甲風(fēng)格的發(fā)展歸功于科幻題材故事的發(fā)展，為人們打開腦洞，暢想更多的可能性。在設(shè)計上激發(fā)了 FUI 的誕生，無論是賽博朋克、廢土題材、還是漫威、DC宇宙中的科幻影視作品中我們都能看到機甲風(fēng)格的界面設(shè)計。

6.png



2.設(shè)計思路

設(shè)計樣式 – 軍事風(fēng)格

我們從以上的設(shè)計風(fēng)格中抓去我們需要的關(guān)鍵詞進行示例設(shè)計，首先我們看軍事風(fēng)格的關(guān)鍵詞是“直接明了、快速、準(zhǔn)確、直接，”我們轉(zhuǎn)換成我們平時的設(shè)計語言就是：“極簡風(fēng)格，”這樣是不是更好理解了。例如圖例中，頁面整體十分統(tǒng)計，利用簡潔幾何語言進行設(shè)計。

7.png




接下來我們做一個簡單的軍事風(fēng)格的進度條：第一步，找參考?。?！這一步很重要，很多同學(xué)都很容易就忽視這一點，一心一意的閉門造車，絕不借鑒學(xué)習(xí)其它優(yōu)秀作品。這里向大家推薦 HUDS + GUIS 設(shè)計公司，這里有我們許多我們耳熟能詳?shù)挠耙曌髌分械?nbsp;FUI 設(shè)計。

第二步，臨摹，臨摹可以說是學(xué)習(xí)他人技巧的最快方式，從中我們可以學(xué)習(xí)到許多設(shè)計中的細(xì)節(jié)，日后我們可以運用到自己的設(shè)計當(dāng)中。我借鑒臨摹了下面的進度條樣式。


8.png



第三部，修改細(xì)節(jié)，舉一反三。臨摹就一定是是抄襲么？當(dāng)然不是！創(chuàng)意設(shè)計，是把再簡單不過的東西或想法不斷延伸給予的另一種表現(xiàn)方式（百度百科），所以我們可以通過對設(shè)計組件內(nèi)部進行重新組合或者修改其中的細(xì)節(jié)參數(shù)來達(dá)到自己在設(shè)計的目的。通過總結(jié)分析，我選用了最簡單直白的結(jié)合圖形作為設(shè)計元素進行設(shè)計，如下圖：

9.png


我們可以放入界面當(dāng)中感受一下視覺效果：

10.png



設(shè)計樣式 – 機甲風(fēng)格

我們再來進階一下，設(shè)計一個機甲元素的的進度條。

機甲風(fēng)格看似裝飾圖形復(fù)雜，設(shè)計難度復(fù)雜，但其實我們只需要掌握好 – “提煉元素”這項技能就能完美應(yīng)對機甲風(fēng)格的設(shè)計。

我們再回顧對創(chuàng)意設(shè)計的定義：是把再簡單不過的東西或想法不斷延伸給予的另一種表現(xiàn)方式。這里我們可以理解為將機甲元素進行提煉總結(jié)，延伸到彈框設(shè)計當(dāng)中。例如下圖，漂亮的小姐姐一秒鐘變機械美女，就是通過對機械元素延展到模特身上。

11.png12.png13.png

第一步，照一張你喜歡的不錯的參考，這里你可以找成熟的界面設(shè)計作品，也可以找一張不錯的關(guān)于機甲風(fēng)格的參考，以便于自己進行元素提取。這里我們以大家熟悉的高達(dá)為例：

14.png



第二部就是元素組合，我們需要提取了我們可能需要的元素，就像我們設(shè)計時面對自己手機素材一樣，這個時候我們不要急于立馬去設(shè)計，要仔細(xì)思考其設(shè)計形式，元素的位置安排。我們還是以以高達(dá)為例，途中我圈出了我可能用到的圖形元素。


15.png



我們從中提取我們需要的圖形，如下圖：


16.png

最后我們我們需要仔細(xì)思考將圖形進行組合，多嘗試幾次他們的組合方式。這里我對提取的元素進行了二次加工，將圖形一和圖形四進行了結(jié)合，打破固有的組合規(guī)律，讓圖形看起來更加生動。

17.png

最后我們可以放入界面當(dāng)中感受一下視覺效果：

18.png



3.總結(jié)

FUI 的設(shè)計看起來復(fù)雜，難以下手，但其實也是有規(guī)律可循，我們可以從作品中理性的去分析其中的設(shè)計細(xì)節(jié)，提煉總結(jié)，最終再落實到實際的設(shè)計作品當(dāng)中。當(dāng)然最好你能先了解一下它的設(shè)計理念以及發(fā)展，就像 FUI 是“虛構(gòu)的、未來的、幻想的界面設(shè)計”一樣。

---來自姜正


轉(zhuǎn)載自簡書

作者：極創(chuàng)設(shè)計

鏈接：https://www.jianshu.com/p/77665c771153

來源：簡書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。



藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


分享本文至：

日歷

鏈接

個人資料

存檔