當學會了這“3招”UI版式,整個人都精神了

編輯導語:隨着互聯網行業的快速發展,各種APP也開始應運而生,現在不論是哪個行業,關於UI設計師都是一個必要的崗位,設計好板式是很重要的一項工作,那怎樣可以設計出屬於自己的版式呢,本文就來為大家聊一聊!

當學會了這“3招”UI版式,整個人都精神了

每次拿到原型開始設計,總是沒有好的想法;每次做出來的設計,不是同質化,就是很平庸,該如何破局?

這是80%的設計師目前的現狀,設計好的UI版式真的很難麼?答案顯然是否定的。

如果,大家經常去關注一些前沿設計作品,設計概念,你就會發現別人的設計其實也沒用什麼牛逼的技法,就是普通的版式,也可以設計感很強。

他們到底怎麼做到的?

下面我來給你拆解3個方向,尤其是第二個,很容易學;但,就是越簡單的東西,越容易被忽略。

一、圖文序列

圖形與文字版式組合創新設計,形成可見的幾何序列或者幾何矩陣,從而達到增強設計版式的視覺效果。

比如,我們常見的線條序列幾何、或者塊面序列幾何、點陣序列幾何。

很多人説,這些我都知道,但是靈感從哪裏來?我們做UI設計不一定只看這個領域的參考。

比如,我們可以去看看平面、品牌、建築、裝置藝術、概念藝術、街頭藝術、建築藝術

來看個例子,下面這張平面海報的設計。

當學會了這“3招”UI版式,整個人都精神了

將圖形與文字混合穿插排版,增強了形式感與版式感,這樣的思路我們在UI版式中也可以使用。

這種設計手法特徵關鍵詞:穿插組合、幾何序列、疊加序列、重複序列。

下面,我們看幾個案例。

當學會了這“3招”UI版式,整個人都精神了

大量重複使用幾何線條序列,區分信息層級的同時,還增加了版式感。

當學會了這“3招”UI版式,整個人都精神了

重複幾何序列矩陣,疊加,重複切割。

當學會了這“3招”UI版式,整個人都精神了
當學會了這“3招”UI版式,整個人都精神了
當學會了這“3招”UI版式,整個人都精神了

Nike Run Club

二、比大更大

大小對比,我們從學設計時,就已經知道了,但就是用不好。

因為大家,把大小對比理解成就是放大或者縮小兩者之間的差距,這個理解只能説正確一半。

我們要真正意義上理解大小對比,應該是需要更大,再大一些,形成鮮明的對比。

當學會了這“3招”UI版式,整個人都精神了
當學會了這“3招”UI版式,整個人都精神了

Short Waves Festival

當學會了這“3招”UI版式,整個人都精神了

Tech Central

雜誌設計,大家應該都看過,之所以雜誌週刊很有版式感、設計感,是因為他們設計大膽。

比如,字體喜歡用大號文字,這樣更顯得直觀、清晰,在視覺上產生強烈的對比衝突,喚起思考。

下面,我們來看看在UI中的應用案例。

當學會了這“3招”UI版式,整個人都精神了

分離派

當學會了這“3招”UI版式,整個人都精神了

上圖網頁UI設計,有了大字號數字排版,這個頁面才有了靈魂。

當學會了這“3招”UI版式,整個人都精神了
當學會了這“3招”UI版式,整個人都精神了
當學會了這“3招”UI版式,整個人都精神了

Tech Central

三、強化負空間

通過負空間也能產生設計感,增強界面版式質感。那麼,如何通過強化負空間來增加設計版式感?

首先要明白負空間的含義是留白,加大負空間的應用,就是增加留白,讓頁面更有呼吸感。

蘋果官網,通過大量營造負空間效果,從而產生高級感,版式簡約而不簡單。

當學會了這“3招”UI版式,整個人都精神了

Enabling EV

當學會了這“3招”UI版式,整個人都精神了

下面看幾個應用案例。

當學會了這“3招”UI版式,整個人都精神了
當學會了這“3招”UI版式,整個人都精神了
當學會了這“3招”UI版式,整個人都精神了
當學會了這“3招”UI版式,整個人都精神了

Upwork

在APP界面設計中,加大負空間效果,營造更多的設計留白,從而來營造版式感。

四、最後

版式是一切設計的基礎,做平面,品牌包裝,海報運營等都需要好的版式,在UI中也是一樣。

為什麼在日常工作中,我們設計出來的UI界面不是很平庸就是同質化,最大的原因是思維侷限,思維沒打開。

我們可以從多維度去思考找靈感,誇領域汲取,從其他設計領域中找答案,這也是今天這篇文章的核心。

比如,通過從平面或者品牌中汲取版式靈感,再通過內化、嘗試、探索應用到你的界面設計中,設計創新就是這樣來的。

#專欄作家#

Tony,微信公眾號:功夫體驗設計,人人都是產品經理專欄作家。百度視覺體驗設計師,一直堅持原創文章,樂於幫助新人。擅長作品集指導、筆試題指導、UI視覺創意、設計趨勢風格等。

本文原創發佈於人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基於CC0協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1438 字。

轉載請註明: 當學會了這“3招”UI版式,整個人都精神了 - 楠木軒