本文主要是總結(jié)作者平時(shí)觀察到的走心設(shè)計(jì)，來便于以后能有機(jī)會(huì)應(yīng)用到實(shí)際產(chǎn)品中。

現(xiàn)在應(yīng)用商店上線的APP越來越趨于一致化，扁平的設(shè)計(jì)風(fēng)格讓很多APP在去掉Logo后會(huì)變得難以區(qū)分。今年開始，很多APP都在悄悄改著版，改版后的設(shè)計(jì)也會(huì)有種“心動(dòng)”的感覺。

今天就總結(jié)一下我平時(shí)觀察到的走心的設(shè)計(jì)，也便于之后能有機(jī)會(huì)應(yīng)用到實(shí)際產(chǎn)品中。

一、場(chǎng)景化設(shè)計(jì)

根據(jù)分析用戶使用的場(chǎng)景，用視覺的方式模擬類似的效果，這樣可以提升用戶使用的愉悅感，也可以降低用戶的學(xué)習(xí)成本。常見的有：優(yōu)惠券、銀行卡的卡包、購物清單、卡片集等。

左邊的效果就是模仿實(shí)際生活中優(yōu)惠券樣式，撕去的動(dòng)作增加用戶使用的趣味性。撕的那么爽，一點(diǎn)也沒覺得買買買會(huì)“肉疼”。同樣，右邊的出票樣式就像購買就出票，仿佛馬上就可以乘車一樣。

左邊的樣式是一些票據(jù)的疊加，可以包含二維碼或者條形碼；右邊除了有卡片樣式以外，下方添加了盤子的樣式，向下拖動(dòng)的交互有明顯的指向性，就像將美食放入盤中一樣。

網(wǎng)易考拉黑卡

網(wǎng)易考拉的黑卡設(shè)計(jì)從之前的大篇幅顯示，改為了現(xiàn)在隱藏彈出的動(dòng)效，這種交互樣式就像將卡放入錢包一樣。

二、微交互

用細(xì)微的交互效果提升應(yīng)用的趣味性，也是現(xiàn)在很多應(yīng)用的亮點(diǎn)。

微交互反饋系統(tǒng)狀態(tài)

輸入即展示的交互

反饋操作狀態(tài)和光標(biāo)鎖定

三、漸變+簡單的曲線

去年漸變開始走入大家視野，起初大多使用的是同色系漸變，現(xiàn)在漸變的應(yīng)用越來越大膽（多為相鄰色系漸變）。隨著漸變的增多，設(shè)計(jì)師已經(jīng)不滿足純漸變的效果，在漸變中添加簡單的曲線來豐富層次感，也是一種很不錯(cuò)的體現(xiàn)。

漸變與簡單曲線的融合

四、干凈的空間感

不是畫布大才能有空間感，就像不是字大就一定突出一樣，合理的利用間距、對(duì)比、顏色及陰影都可以設(shè)計(jì)出具有空間感的效果。

• 大投影拉開空間感，利用投影輕重和遠(yuǎn)近創(chuàng)造多層次空間，用色塊或圖片制作精致干凈的投影；
• 用間距替換線條，進(jìn)行簡化設(shè)計(jì)；
• 用規(guī)律性的排版，把握閱讀節(jié)奏感。

排整齊了就很好看啦

五、AR應(yīng)用

隨著網(wǎng)絡(luò)越來越好，為了讓用戶能有更真實(shí)的體驗(yàn)，開始出現(xiàn)了3D展示、視頻展示和VR展示的樣式。（溫馨提示：下圖不是手機(jī)壞了，是真！的！打！碼！了）

3D展示/視頻展示

VR展示

六、數(shù)據(jù)可視化設(shè)計(jì)

做一個(gè)小實(shí)驗(yàn)，如果你健身完打開應(yīng)用看到的是這樣的界面，請(qǐng)問堅(jiān)持健身的概率有多大？

反例！反例！反例！

但是如果是下面這種界面，概率又是多大呢？

（圖片來自網(wǎng)絡(luò)）

數(shù)據(jù)可視化可以有效的減少用戶思考時(shí)間，還可以精致頁面哦。常見的可視化有健身應(yīng)用、地圖、金融應(yīng)用等。

信息那么多也不會(huì)亂

（圖片來自網(wǎng)絡(luò)）

七、適當(dāng)破壞

適當(dāng)破壞已有的視覺樣式，達(dá)到突出和視覺指引的效果。常見的有在鏈接出添加元素、多個(gè)元素連接、元素融合等。

（圖片來自網(wǎng)絡(luò)）

整理了這么多，不難看出，這些走心的設(shè)計(jì)都是為了增加用戶使用的趣味性，從而產(chǎn)生記憶點(diǎn)。所以，如果有更有趣味性的設(shè)計(jì)，都可以嘗試看看效果。

作者：王旋子同學(xué)

鏈接：https://www.jianshu.com/p/c11b3ce7bbf0

本文由 @ 王旋子同學(xué) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議