2020-2-6 前端達人
作者通過以進度條的設計深入淺出的講解關于FUI的設計思路。雖然FUI設計看起來很復雜,只要找準規(guī)律,從一些作品中總結分析細節(jié),再運用到我們的設計中。想要了解的小伙伴可以嘗試一下。
前言
看到上期小伙伴想了解一下 FUI 的設計教程,所以這次再次和大家聊一下關于 FUI 的設計風格,我們以“進度條”的設計教程為例,深入淺出的聊一下關于 FUI 的設計思路,因為主要設計思路的延展,所以不會出現(xiàn)具體的數(shù)據(jù)參數(shù),小伙伴們要諒解啊。
目錄
1.風格介紹
2.設計思路
3.總結
1.風格介紹
關于 FUI 的定義,閱讀過我上一篇文章的小伙伴可能對 FUI 的定義有了一個較為清晰的定義,即 FUI 是:虛構的、未來的、幻想的用戶界面。
接下來我會向大家簡單介紹一下 FUI 主要的兩大設計風格:軍事風格和機甲風格(也可以叫做機械風格)。
1.軍事風格
軍事風格的特點在于:“直接明了”。因為在殘酷的戰(zhàn)爭中時間就是生命,士兵必須保證“快速、準確、直接”才能保證戰(zhàn)斗的勝利,所以會盡量避免與操作業(yè)務無關的。你也可以理解為當下最前沿的的設計理念“l(fā)ess is more。”例如下圖,在界面設計中幾乎都是利用簡單的幾何設計語言完成。
2.機甲風格
機甲風格相對于軍事風格的最大特點就是:“具有一定的裝飾圖形元素,或多或少。”機甲風格最大的特點便是具有機械或者機甲風格的裝飾元素,其中多為異形元素。其靈感來源于工業(yè)設計,從機械和機甲的工業(yè)設計語言中提取圖形元素,在運用到界面設計上。如下圖,異形的機甲風格讓機器人的頭部設計顯得更加統(tǒng)一,如果換成當前流行的扁平化設計,可能就顯得有點奇怪了。
機甲風格的發(fā)展歸功于科幻題材故事的發(fā)展,為人們打開腦洞,暢想更多的可能性。在設計上激發(fā)了 FUI 的誕生,無論是賽博朋克、廢土題材、還是漫威、DC宇宙中的科幻影視作品中我們都能看到機甲風格的界面設計。
2.設計思路
設計樣式 – 軍事風格
我們從以上的設計風格中抓去我們需要的關鍵詞進行示例設計,首先我們看軍事風格的關鍵詞是“直接明了、快速、準確、直接,”我們轉換成我們平時的設計語言就是:“極簡風格,”這樣是不是更好理解了。例如圖例中,頁面整體十分統(tǒng)計,利用簡潔幾何語言進行設計。
接下來我們做一個簡單的軍事風格的進度條:第一步,找參考!?。∵@一步很重要,很多同學都很容易就忽視這一點,一心一意的閉門造車,絕不借鑒學習其它優(yōu)秀作品。這里向大家推薦 HUDS + GUIS 設計公司,這里有我們許多我們耳熟能詳?shù)挠耙曌髌分械?nbsp;FUI 設計。
第二步,臨摹,臨摹可以說是學習他人技巧的最快方式,從中我們可以學習到許多設計中的細節(jié),日后我們可以運用到自己的設計當中。我借鑒臨摹了下面的進度條樣式。
我們可以放入界面當中感受一下視覺效果:
設計樣式 – 機甲風格
我們再來進階一下,設計一個機甲元素的的進度條。
機甲風格看似裝飾圖形復雜,設計難度復雜,但其實我們只需要掌握好 – “提煉元素”這項技能就能完美應對機甲風格的設計。
我們再回顧對創(chuàng)意設計的定義:是把再簡單不過的東西或想法不斷延伸給予的另一種表現(xiàn)方式。這里我們可以理解為將機甲元素進行提煉總結,延伸到彈框設計當中。例如下圖,漂亮的小姐姐一秒鐘變機械美女,就是通過對機械元素延展到模特身上。
第一步,照一張你喜歡的不錯的參考,這里你可以找成熟的界面設計作品,也可以找一張不錯的關于機甲風格的參考,以便于自己進行元素提取。這里我們以大家熟悉的高達為例:
我們從中提取我們需要的圖形,如下圖:
最后我們我們需要仔細思考將圖形進行組合,多嘗試幾次他們的組合方式。這里我對提取的元素進行了二次加工,將圖形一和圖形四進行了結合,打破固有的組合規(guī)律,讓圖形看起來更加生動。
最后我們可以放入界面當中感受一下視覺效果:
3.總結
FUI 的設計看起來復雜,難以下手,但其實也是有規(guī)律可循,我們可以從作品中理性的去分析其中的設計細節(jié),提煉總結,最終再落實到實際的設計作品當中。當然最好你能先了解一下它的設計理念以及發(fā)展,就像 FUI 是“虛構的、未來的、幻想的界面設計”一樣。
---來自姜正
轉載自簡書
作者:極創(chuàng)設計
鏈接:https://www.jianshu.com/p/77665c771153
來源:簡書
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。
藍藍設計( m.820esy.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務