研發與設計專欄
UI Design - Main Trend、 Next Trend and Popular
前往目錄
何謂流行;何謂新潮,這篇就來解釋我們如何從UI作品中,觀察到的設計現象,從中去分析、整理而歸納出的結論,原來,趨勢的發展是這樣來的

我們常常提到現在 UI 設計流行什麼什麼,這介面很潮、這介面很有設計感......等等,到底,我們口中的流行為何而流行,從何判斷這是趨勢,為什麼這樣設計就是好看、就是新潮?難道有個設計領袖昭告天下,或是誰誰誰說了算的?或是仗著美感見仁見智,我們說什麼是什麼?當然不是。這篇就來解釋我們如何從作品中,觀察到的設計現象,從中去分析、整理而歸納出的結論,原來,趨勢的發展是這樣來的。

一個風格成為主流趨勢大致會經歷以下階段:

  1. 因應需求出現、發跡。
  2. 受到設計師青睞,開始在 UI 作品網站大量出現。
  3. 正式流行起來,有越來越多的嘗試,並刻意表現,為此元素的強烈碰撞階段。
  4. 開始熟悉並習慣,風格趨向沈穩、低調,各方面接受度廣泛提高。
  5. 不退流行,但又不甘於無聊而開始進化,主要又可能出現以下幾種情況:風格已經成熟,呈現上內斂而優雅,畫面呈現高端的設計感;嘗試不同元素間的融合、應用,創造更多層次的表現;回歸功能性,強調主次關係,並注重細節,製造驚喜。

以下以三個目前的主流趨勢作為例子,探討他們各自的發展歷程。

https://dribbble.com/shots/6001562-Dorsia-Brand- Guidelines

Deep Flat

過去為講求資訊主導的介面,去除多餘裝飾,全面平面化的影響下,使得介面過於單調且資訊分層不明確,反而造成不易讀的現象。

設計師們注意到這個現象,開始帶入了陰影,使介面增加了深度,帶來了更多的層次表現。由於陰影的應用廣泛,瀰漫式的陰影效果(diffuse shadow)開始流行起來,並適用在界面中的各種元件、區塊,優雅而擬真的視覺效果,可自然的融入各種風格中。因此,流行了好些年的 Flat Design,進化到了新的層次,又可稱為 Deep Flat。

https://dribbble.com/shots/4894229-BetBrandFullQ-FX- 456-f https://dribbble.com/shots/5192298-NotifyMe-2

現如今,設計師們嘗試diffuseshadow的更多應用,如 illustration、3dobject、photography 等多媒材融合,從功能性延伸到了裝飾性,營造一種漂浮的錯覺,在國外 UI 作品網站中可以看到滿滿擬真陰影,可以說是進入了大漂浮時代。

https://dribbble.com/shots/4707188-KV https://dribbble.com/shots/5299941-ARTA-Art-Gallery https://dribbble.com/shots/6157473-C4D-Essential- Training-Part-2 https://dribbble.com/shots/6157473-C4D-Essential- Training-Part-2

漸層顏色的應用發展多時,從過去表現立體的擬真效果沒落之時,在過去幾年雙色漸層崛起才又再次盛行,其優勢在於:設計易用性高、適用多種風格、裝飾效果十足。 

https://dribbble.com/shots/3641101-Teachable-Banner- Images

但雙色漸層在美感上有彼此組合間的先天限制,普遍設計師會使用的搭配重複性高,導致品牌顏色的獨特性越來越薄弱。

https://dribbble.com/shots/5992899-ModularKit-v1-3- update https://dribbble.com/shots/5402723-Final-Virtual-Reality- Landing-Page

因此,更多的顏色組合搭配運用,成了勢在必行的出路,才有了我們現在看到的豐富面貌。漸層不再只是色碼對色碼、或是受到方向、線性漸變等限制,進而提升到了情境變化、空間深度、多媒材融合等等多元的設計。大膽的配色不再是大膽的嘗試,多彩之間的千變萬化組合,成為介面設計的創意來源之一。

https://dribbble.com/shots/5374044-Natoni-Landing-Page https://dribbble.com/shots/3963980-Colours-Visual- Exploration

Experiment Layout

顏色是介面的視覺包裝,而佈局(Layout)則擔任了結構、視覺平衡的角色,尤其介面跟平面設計之間很大的差異在於資訊化的呈現,在資訊為主的介面中如何安排、佈置、最終取得設計與閱讀的平衡是 UI 設計師必備的功課。在早期,裝飾與佈局是分開來設計的,圖、文的排列,整齊的坐落在各自安排好的區塊,把內容填塞進去而已,圖片是圖片,文字是文字,彼此井水不犯河水。

https://dribbble.com/shots/3328787-Old-Project- Page-2015

後來,圖片文字彼此慢慢靠近、重疊,開始流行了錯位、互相堆疊的效果,打破了傳統的格局,單一的節奏多了破口,視線輕易的就被吸引了過去,設計師們發現這是有趣的設計型式,它讓沉悶的文字資訊有了更多元的呈現方式,從此,閱讀介面不再無聊了!

https://dribbble.com/shots/4003553-Innovative-Eye- Pillow-Landing-Page-Design

很快的,重疊設計不再只侷限在文字,而延伸到圖片、插畫、UI 元件等等都被拿來嘗試各種走位、飄移效果。但設計師們不會就此感到滿足,位置上的偏移只是局部,需要的是更深入的佈局思考,更融入的設計型式。接著開始流行 minimal layout design(極簡設計)、multiple overlapping、blending(複合元素)等設計型式,從彼此交疊進化到了融合的階段。

https://dribbble.com/shots/5865554-2018-Top-shots https://dribbble.com/shots/5337561-Bikino-Sinc-UI

https://dribbble.com/shots/4918651-3ie

以上是目前主流趨勢的發展現象,當然UI設計的面貌遠遠不止這些,還有其他近年崛起的設計元素,以及接下來可能發展流行的新型態設計,就留待下次介紹。