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

5 評論 5706 瀏覽 11 收藏 8 分鐘

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

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

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

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

他們到底怎么做到的?

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

一、圖文序列

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

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

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

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

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

將圖形與文字混合穿插排版,增強了形式感與版式感,這樣的思路我們在UI版式中也可以使用。
這種設計手法特征關鍵詞:穿插組合、幾何序列、疊加序列、重復序列。
下面,我們看幾個案例。

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

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

Nike Run Club

二、比大更大

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

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

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

Short Waves Festival

Tech Central

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

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

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

分離派

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

Tech Central

三、強化負空間

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

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

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

Enabling EV

下面看幾個應用案例。

Upwork

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

四、最后

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

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

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

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

#專欄作家#

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

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 好看有設計感的ui界面真的很吸引人,留白感和數字放大真的滿滿高級感

    來自廣東 回復
  2. 精神了,真的精神了,一篇文章里面好多圖片看著還是挺好的。

    回復
  3. 關于這些設計圖片看得好舒服,設計界面整體構造就很nice。

    來自江蘇 回復
  4. 哇哦,今天的這個設計我覺得有點新奇了哈哈哈,是我不常接觸的色彩,不過最近好像很流行

    來自廣東 回復
  5. ui版式真的很吸引人,我每次都會被好看的ui版式所吸引,這方面還是要下功夫琢磨的

    來自江西 回復