設計套路之—閃屏的正確設計姿勢

什麼是閃屏:每個app打開的時候都會優先跳轉出來的頁面

在設計閃屏的時候大多數設計師認爲要設計越酷炫越好,所以大家就去Dribbble找靈感。Dribbble就像一個閃屏頁面的博物館,但是幸運的是,其實你不必做一個酷炫到冒泡的閃屏。

接下來給大家介紹閃屏的正確設計姿勢。

讓我們假設你正在爲一個新的應用程序設計一個啓動頁面,我就拿之前做作一個app是修房子的應用。

它叫“Fixt”

 

 

最簡單的,你可能想到要把名字放在閃屏,logo也放上去,就像medium的閃屏。

儘管這很無聊,但它至少告訴我這個應用程序是什麼(這也是很多設計師在做的時候容易忽略的一點)。在Medium的案例中,它在UI上保留了大量的空白,因此這是個簡單的交互界面。他們的品牌設定也很成熟,所以他們只需要展示他們的logo。

但對於這個應用程序,這感覺就有點平淡。fixt是一家初創公司,我們需要發揮更大的影響力。那讓我們試着加點背景色:

 

 

我們使用像Twitter這樣的扁平藍色,用它填充屏幕的感覺會更好。我們的應用程序都是關於行動的,我們想要加深這一點。你可以通過圖片來體現深度,但是已有的照片沒有生氣,除非它們可以被自定義,否則它們並不是真正的品牌。

添加深度的一種方法是採用漸變。比如,加入二級品牌顏色:

 

 

並非所有品牌顏色的組合都有效,有時你的產品可能沒有二級顏色。在LinkedIn中,他們使用從中心延伸的簡單徑向漸變。我們正在使用我們的二級品牌顏色右下角的漸變填充。任何一個都只是小詭計。

讓我們更進一步,通過創建一個背景元素來增加更多深度:

 

 

Laserlike具有可以組合形狀。對於fixt這個應用程序,我們針對使用情況加以暗示,因此我獲取了一組圖標,這些圖標是這個應用程序的一些功能。這樣我們不僅表達出了品牌,還能表達產品特色點。

小結

這是爲在我們在做啓動頁的時候運用品牌設計的四種方法。選擇哪一個不是取決於你自己的偏好,主要取決於你們產品的定位以及市場定位。對於沒有品牌設定的初創型公司,謹慎一點:使用產品名稱,logo,並添加代表產品差異點的圖形。對於更成熟的品牌,可能會採用更簡單的方法。

 

如果你想獲得更多2020版UI教程資料,關注私信留言領取配套視頻+資料+源碼!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章