用這3種方法增加設(shè)計(jì)細(xì)節(jié)

1、俗話說，細(xì)節(jié)決定成敗。美，也在于細(xì)節(jié)。你對(duì)細(xì)節(jié)的關(guān)注程度，決定了你是否優(yōu)雅。一個(gè)作品好壞、美感全在于細(xì)節(jié)，細(xì)節(jié)處理好了你的作品幾乎成功一大半。1.通過“布局”構(gòu)造差異化設(shè)計(jì)風(fēng)格五維度，形、色、質(zhì)、字、版，最后版式就是我們今天要說的布局，如何通過布局可以構(gòu)造差異化細(xì)節(jié)和創(chuàng)新？比如，我們可以營(yíng)造真實(shí)場(chǎng)景體驗(yàn)感，沉浸式，層疊設(shè)計(jì)。a.營(yíng)造真實(shí)場(chǎng)景感布局CokePlayCokePlay設(shè)計(jì)中，在入口處營(yíng)造了一種真實(shí)售貨機(jī)場(chǎng)景，喚起用戶線下購物真實(shí)體驗(yàn)。當(dāng)點(diǎn)擊進(jìn)去后，差異化選擇方式，趣味性交互，讓我們大開眼界。當(dāng)選中所需物品后，進(jìn)入到三級(jí)頁面，我們看到羅列的真實(shí)物品。MillieMillie產(chǎn)品，在書架

2、陳列模擬現(xiàn)實(shí)世界中放書的情景；同時(shí)在界面中增加日歷設(shè)計(jì)，營(yíng)造時(shí)光流逝感，場(chǎng)景代入感很強(qiáng)。b.多場(chǎng)景層疊布局Soldout文字圖形與商品疊加，通過多場(chǎng)景貫穿重復(fù)布局策略，在Banner，商品卡片列表和詳情頁，展示頁等，不斷強(qiáng)化用戶心智，又與競(jìng)品拉開設(shè)計(jì)上的差距。MillieMillie在banner位置，通過錯(cuò)層疊加布局設(shè)計(jì)，增強(qiáng)了畫面的形式感。2.通過“圖形”DNA外化，塑造產(chǎn)品特征巧用圖形我們?cè)黾赢a(chǎn)品設(shè)計(jì)細(xì)節(jié)，我們這里說的圖形是品牌特征符合。通常我們運(yùn)用較多的地方在圖標(biāo)上，還可以在banner、標(biāo)簽、界面中應(yīng)用。如果能全場(chǎng)景應(yīng)用，那是最理想的狀態(tài)，下面我們來看看一些案例。a.符號(hào)穿透打造圖標(biāo)

3、系統(tǒng)Taling想要在圖標(biāo)上做好的細(xì)節(jié)設(shè)計(jì)，還是有一些難度，因?yàn)槟壳白龅煤玫膶?shí)在太少了，要么同質(zhì)化，要么沒記憶點(diǎn)。Taling將logo中硬朗直角與斜角特征點(diǎn)提取，然后延續(xù)到整個(gè)圖標(biāo)系統(tǒng)中，算是比較有特色一套風(fēng)格語言。H.PointH.Point設(shè)計(jì)，將品牌logo中的“點(diǎn)”元素提取應(yīng)用到圖標(biāo)系統(tǒng)和界面導(dǎo)航設(shè)計(jì)中。這種處理手法需要克制，不然過多的點(diǎn)元素也會(huì)造成一些干擾。當(dāng)然，我這里拿出來講，是因?yàn)檫@種應(yīng)用方式有意思。b.符號(hào)穿透打造標(biāo)簽系統(tǒng)MantaManta將logo中傾斜角度與圓角提取應(yīng)用在標(biāo)簽中，與我們常規(guī)所見的規(guī)整的圖形標(biāo)簽形成差異化設(shè)計(jì)。netflix美國的視頻軟件netflix，在

4、標(biāo)簽系統(tǒng)行，提取logo清晰符號(hào)基因應(yīng)用在設(shè)計(jì)上。3.通過“動(dòng)效”塑造產(chǎn)品細(xì)節(jié)隨著硬件越來越好，一些有細(xì)節(jié)質(zhì)感的微動(dòng)效，能在app上實(shí)現(xiàn)出來，通過動(dòng)效的作用增強(qiáng)產(chǎn)品細(xì)節(jié)的同時(shí)，還能帶來趣味性和可玩性，在某些情況下還起到引導(dǎo)作用。a.營(yíng)造場(chǎng)景感動(dòng)效LaundrygoLaundrygo在第二個(gè)Tab上，通過微弱動(dòng)效變化營(yíng)造出生活場(chǎng)景感，從早晨日出到晚上，這樣的設(shè)計(jì)帶入生活儀式感，有溫度有情感。b.產(chǎn)品內(nèi)互動(dòng)趣味動(dòng)效Laftel通過重力感應(yīng)，表情會(huì)隨著旋轉(zhuǎn)方向自由滑動(dòng)，伴隨著手機(jī)也會(huì)產(chǎn)生震動(dòng)。c.產(chǎn)品內(nèi)擬人化動(dòng)效Kakao WebtoonKakao Webtoon在產(chǎn)品首頁使用視差動(dòng)效，再點(diǎn)擊進(jìn)入產(chǎn)品二級(jí)頁面，通過擬人化的方式營(yíng)造超級(jí)可愛的趣味