老鐵們在做界面設(shè)計時，經(jīng)常遇到的難題是如何才能做得更有創(chuàng)意？每次給老板看方案時總是被說太平淡了，界面也缺乏創(chuàng)新。我想很多設(shè)計師都會遇到這種情況，包括我自己在內(nèi)，早期開始做設(shè)計時，思路總會局限在現(xiàn)有的參考上，不知道如何下手做。

比如下面這個設(shè)計

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

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

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

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

差異化圓角層疊布局

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

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

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

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

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

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

通過上面一些案例，可以提取一些布局方案用在項目上，如下圖所示。

下面這個案例通過圓角卡片來布局，貫穿所有。

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

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

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

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

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

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

Naver

圖標(biāo)與品牌色集合，這種雖然現(xiàn)在應(yīng)用較多，但是可以從不同角度來切入。比如上圖中使用填充品牌色與斷線集合，形成一種不一樣的設(shè)計思路。

最后一種思路圖標(biāo)進(jìn)行品牌化設(shè)計，整套圖標(biāo)延續(xù)品牌 DNA 特征。

上圖 app 設(shè)計，里面圖標(biāo)就是將品牌 DNA 符號延續(xù)到整套系統(tǒng)里面，包括底部 bar 的功能圖標(biāo)和表情符號等。

彌散光感漸變背景

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

使用彌散光感漸變作為背景，相對于單一的漸變色，會多了一絲細(xì)節(jié)在里面。

好了，今天分享就到這，早期我們在做創(chuàng)新探索時候，不要懼怕太過于概念，如果一直被這個限制，就難以打破思維的墻，做出來的設(shè)計幾乎很平庸。我們還是敢于挑戰(zhàn)自己，善用逆向思維。

歡迎關(guān)注作者微信公眾號：「功夫UX」