總結:APP走心設計的小思考

13 評論 36400 瀏覽 258 收藏 8 分鐘

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

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

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

一、場景化設計

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

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

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

網易考拉黑卡

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

二、微交互

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

微交互反饋系統狀態

輸入即展示的交互

反饋操作狀態和光標鎖定

三、漸變+簡單的曲線

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

漸變與簡單曲線的融合

四、干凈的空間感

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

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

排整齊了就很好看啦

五、AR應用

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

3D展示/視頻展示

VR展示

六、數據可視化設計

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

反例!反例!反例!

但是如果是下面這種界面,概率又是多大呢?

(圖片來自網絡)

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

信息那么多也不會亂

(圖片來自網絡)

七、適當破壞

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

(圖片來自網絡)

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

 

作者:王旋子同學

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

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

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 誒,交互光靠嘴不行,技術能力不夠,產品都不愛設計交互,設計了也做不出來更鬧心

    來自遼寧 回復
  2. 很受用,不過需要前端思維

    來自福建 回復
  3. 不錯不錯,收獲很大

    來自上海 回復
  4. 前端出身的產品總監討好老板指南,順便增加下前端工作量

    來自北京 回復
  5. 有考慮過交互性能嘛,復雜的交互動效不會對手機性能造成負擔嘛?

    來自浙江 回復
    1. 自己家的程序猿:這當然會影響手機性能啊,計算量很大的!別人家的程序猿:開玩笑,3D游戲那么復雜的視覺效果都能跑的杠杠滴,這點動效毫無壓力好不好!

      來自廣東 回復
  6. 好文,收藏了~

    來自北京 回復
  7. 親,到底如何設計出富含美感的交互設計?有一個通識的邏輯公式嗎?

    來自廣東 回復
  8. 贊一個……

    來自山東 回復
  9. 不錯的文章,但是我認為最難的不是對比而是創造。

    來自廣東 回復
    1. 贊。

      來自北京 回復
  10. 這個好

    回復
  11. 不錯不錯,收藏了

    來自北京 回復