本文主要是總結作者平時觀察到的走心設計，來便于以后能有機會應用到實際產品中。

現在應用商店上線的APP越來越趨于一致化，扁平的設計風格讓很多APP在去掉Logo后會變得難以區分。今年開始，很多APP都在悄悄改著版，改版后的設計也會有種“心動”的感覺。

今天就總結一下我平時觀察到的走心的設計，也便于之后能有機會應用到實際產品中。

一、場景化設計

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

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

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

網易考拉黑卡

網易考拉的黑卡設計從之前的大篇幅顯示，改為了現在隱藏彈出的動效，這種交互樣式就像將卡放入錢包一樣。

二、微交互

用細微的交互效果提升應用的趣味性，也是現在很多應用的亮點。

微交互反饋系統狀態

輸入即展示的交互

反饋操作狀態和光標鎖定

三、漸變+簡單的曲線

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

漸變與簡單曲線的融合

四、干凈的空間感

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

• 大投影拉開空間感，利用投影輕重和遠近創造多層次空間，用色塊或圖片制作精致干凈的投影；
• 用間距替換線條，進行簡化設計；
• 用規律性的排版，把握閱讀節奏感。

排整齊了就很好看啦

五、AR應用

隨著網絡越來越好，為了讓用戶能有更真實的體驗，開始出現了3D展示、視頻展示和VR展示的樣式。（溫馨提示：下圖不是手機壞了，是真！的！打！碼！了）

3D展示/視頻展示

VR展示

六、數據可視化設計

做一個小實驗，如果你健身完打開應用看到的是這樣的界面，請問堅持健身的概率有多大？

反例！反例！反例！

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

（圖片來自網絡）

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

信息那么多也不會亂

（圖片來自網絡）

七、適當破壞

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

（圖片來自網絡）

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

作者：王旋子同學

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

本文由 @ 王旋子同學 授權發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議