總結:APP走心設計的小思考
本文主要是總結作者平時觀察到的走心設計,來便于以后能有機會應用到實際產品中。
現在應用商店上線的APP越來越趨于一致化,扁平的設計風格讓很多APP在去掉Logo后會變得難以區分。今年開始,很多APP都在悄悄改著版,改版后的設計也會有種“心動”的感覺。
今天就總結一下我平時觀察到的走心的設計,也便于之后能有機會應用到實際產品中。
一、場景化設計
根據分析用戶使用的場景,用視覺的方式模擬類似的效果,這樣可以提升用戶使用的愉悅感,也可以降低用戶的學習成本。常見的有:優惠券、銀行卡的卡包、購物清單、卡片集等。
左邊的效果就是模仿實際生活中優惠券樣式,撕去的動作增加用戶使用的趣味性。撕的那么爽,一點也沒覺得買買買會“肉疼”。同樣,右邊的出票樣式就像購買就出票,仿佛馬上就可以乘車一樣。
左邊的樣式是一些票據的疊加,可以包含二維碼或者條形碼;右邊除了有卡片樣式以外,下方添加了盤子的樣式,向下拖動的交互有明顯的指向性,就像將美食放入盤中一樣。
網易考拉黑卡
網易考拉的黑卡設計從之前的大篇幅顯示,改為了現在隱藏彈出的動效,這種交互樣式就像將卡放入錢包一樣。
二、微交互
用細微的交互效果提升應用的趣味性,也是現在很多應用的亮點。
微交互反饋系統狀態
輸入即展示的交互
反饋操作狀態和光標鎖定
三、漸變+簡單的曲線
去年漸變開始走入大家視野,起初大多使用的是同色系漸變,現在漸變的應用越來越大膽(多為相鄰色系漸變)。隨著漸變的增多,設計師已經不滿足純漸變的效果,在漸變中添加簡單的曲線來豐富層次感,也是一種很不錯的體現。
漸變與簡單曲線的融合
四、干凈的空間感
不是畫布大才能有空間感,就像不是字大就一定突出一樣,合理的利用間距、對比、顏色及陰影都可以設計出具有空間感的效果。
- 大投影拉開空間感,利用投影輕重和遠近創造多層次空間,用色塊或圖片制作精致干凈的投影;
- 用間距替換線條,進行簡化設計;
- 用規律性的排版,把握閱讀節奏感。
排整齊了就很好看啦
五、AR應用
隨著網絡越來越好,為了讓用戶能有更真實的體驗,開始出現了3D展示、視頻展示和VR展示的樣式。(溫馨提示:下圖不是手機壞了,是真!的!打!碼!了)
3D展示/視頻展示
VR展示
六、數據可視化設計
做一個小實驗,如果你健身完打開應用看到的是這樣的界面,請問堅持健身的概率有多大?
反例!反例!反例!
但是如果是下面這種界面,概率又是多大呢?
(圖片來自網絡)
數據可視化可以有效的減少用戶思考時間,還可以精致頁面哦。常見的可視化有健身應用、地圖、金融應用等。
信息那么多也不會亂
(圖片來自網絡)
七、適當破壞
適當破壞已有的視覺樣式,達到突出和視覺指引的效果。常見的有在鏈接出添加元素、多個元素連接、元素融合等。
(圖片來自網絡)
整理了這么多,不難看出,這些走心的設計都是為了增加用戶使用的趣味性,從而產生記憶點。所以,如果有更有趣味性的設計,都可以嘗試看看效果。
作者:王旋子同學
鏈接:https://www.jianshu.com/p/c11b3ce7bbf0
本文由 @ 王旋子同學 授權發布于人人都是產品經理,未經作者許可,禁止轉載
題圖來自 Pexels,基于 CC0 協議
誒,交互光靠嘴不行,技術能力不夠,產品都不愛設計交互,設計了也做不出來更鬧心
很受用,不過需要前端思維
不錯不錯,收獲很大
前端出身的產品總監討好老板指南,順便增加下前端工作量
有考慮過交互性能嘛,復雜的交互動效不會對手機性能造成負擔嘛?
自己家的程序猿:這當然會影響手機性能啊,計算量很大的!別人家的程序猿:開玩笑,3D游戲那么復雜的視覺效果都能跑的杠杠滴,這點動效毫無壓力好不好!
好文,收藏了~
親,到底如何設計出富含美感的交互設計?有一個通識的邏輯公式嗎?
贊一個……
不錯的文章,但是我認為最難的不是對比而是創造。
贊。
這個好
不錯不錯,收藏了