這些細(xì)節(jié)創(chuàng)新,大廠設(shè)計(jì)師都不一定全知道!

2021-10-18    seo達(dá)人



圖片

雖然粗看沒多大問題,但確實(shí)是一個(gè)很常規(guī)的設(shè)計(jì),沒有亮點(diǎn)。

試想,我們是否可以在布局、圖標(biāo)圖形、色彩質(zhì)感等做一些細(xì)微的突破,這些地方稍微做些改變都可以使得界面變得更好。

圖片

再比如上面這個(gè)作品,也是同樣的問題,缺乏一絲靈魂。之前看很多設(shè)計(jì)師作品集里面包裝的作品,就是這樣設(shè)計(jì)的。

雖然現(xiàn)在UI趨于模式化設(shè)計(jì),但是我們在確保體驗(yàn)最優(yōu)的同時(shí)時(shí),還是可以做一些創(chuàng)新設(shè)計(jì)。比如布局、圖標(biāo)、色彩、質(zhì)感、雜志化等方向發(fā)力,下面我們來看看如何做一些差異化設(shè)計(jì)。

 

差異化圓角層疊布局

俗話說,當(dāng)然不知道如何去做創(chuàng)新時(shí),可以去找一些好的概念設(shè)計(jì),從里面挖掘一些新的設(shè)計(jì)想法,用在自己項(xiàng)目中。

圖片

例如上圖,我們將卡片圓角化與底部地圖相呼應(yīng),整個(gè)設(shè)計(jì)看上去就有了細(xì)微縱深感。如果上下滑動(dòng)時(shí),再配上視差動(dòng)態(tài)效果,那么細(xì)節(jié)也會(huì)更豐富

圖片

上圖的設(shè)計(jì)也是同樣的思路,圓角圖片作為背景,大圓角卡片在上層疊加布局,增加細(xì)節(jié)豐富度。

再來看一些優(yōu)秀案例

圖片
圓角化布局設(shè)計(jì)在功能詳情頁的應(yīng)用。
圖片

半圓角化布局設(shè)計(jì)的應(yīng)用案例,只有一個(gè)邊用圓角來布局設(shè)計(jì),另外一邊直角布局。

通過上面一些案例,可以提取一些布局方案用在項(xiàng)目上,如下圖所示。

圖片
下面這個(gè)案例通過圓角卡片來布局,貫穿所有。

圖片

看到這,大家面對改版或者0~1的探索,布局上應(yīng)該有新思路了,而且很多布局都是不斷嘗試與打磨出來的,下面我們繼續(xù)看下圖標(biāo)如何做差異化設(shè)計(jì)。

 

打破常規(guī)的圖標(biāo)

圖標(biāo)可以說在設(shè)計(jì)中非常重要,承載著品牌性格傳遞,表達(dá)產(chǎn)品的氣質(zhì),但也是我們最容易忽略的地方。

圖片

如果纖細(xì)的圖標(biāo)看膩了,是不是可以嘗試下這種粗線性圖標(biāo)。

圖片

再或者就是將圖標(biāo)logo化,設(shè)計(jì)更有趣味性一些。這些圖標(biāo)應(yīng)用場景可以是功能頁面,比如像智能家居、智能鏡等場景中。

圖片
“點(diǎn)”來貫穿整個(gè)圖標(biāo)設(shè)計(jì),下圖,韓國NAVER的圖標(biāo)設(shè)計(jì),通過點(diǎn)與線的集合來打造記憶點(diǎn)。
圖片

Naver

圖片
圖標(biāo)與品牌色集合,這種雖然現(xiàn)在應(yīng)用較多,但是可以從不同角度來切入。比如上圖中使用填充品牌色與斷線集合,形成一種不一樣的設(shè)計(jì)思路。
圖片
最后一種思路圖標(biāo)進(jìn)行品牌化設(shè)計(jì),整套圖標(biāo)延續(xù)品牌DNA特征。
上圖app設(shè)計(jì),里面圖標(biāo)就是將品牌DNA符號延續(xù)到整套系統(tǒng)里面,包括底部bar的功能圖標(biāo)和表情符號等。

 

彌散光感漸變背景

很多情況下會(huì)遇到需要做詳情頁或者個(gè)人頁面,這時(shí)候就會(huì)涉及到頭像與背景的關(guān)系設(shè)計(jì)。目前設(shè)計(jì)較多的方式就是高清大圖、品牌圖形、漸變色等。那么還可以用下面這種思路。

圖片
使用彌散光感漸變作為背景,相對于單一的漸變色,會(huì)多了一絲細(xì)節(jié)在里面。
好了,今天分享就到這,早期我們在做創(chuàng)新探索時(shí)候,不要懼怕太過于概念,如果一直被這個(gè)限制,就難以打破思維的墻,做出來的設(shè)計(jì)幾乎很平庸。我們還是敢于挑戰(zhàn)自己,善用逆向思維。

 

原文地址:功夫UX (公眾號)
作者: 功夫UX
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》這些細(xì)節(jié)創(chuàng)新,大廠設(shè)計(jì)師都不一定全知道!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔