讀這篇文章你會收穫什麼
- 如何利用設計，管理用戶對進度的認知。
- 如何將兩個不同目的的頁面更順滑的連接起來。
- 如何通過產品設計讓第一次使用產品的用戶更快的上手，降低用戶的使用門檻。
溫馨提示：讀這篇文章最好結合Trigraphy應用一起來看。
Trigraphy 是一款圖片處理應用。它不同於美圖秀秀那種傳統意義上的圖片應用，沒有磨皮或者美白瘦臉之類的效果，而更像是一個藝術工具。它會把照片變得強烈的風格化，加上很多藝術的元素，看起來更像是一個藝術作品。
Trigraphy 值得分享的產品設計方法和原則共有三點。
第一點：利用設計，來管理用戶對於進度的認知
打開 Trigraphy，啓動屏上除了 Logo 之外下面還有三個框，這是佔位符。當應用完全打開之後，可以看到這三個格子裏面填充了本地的圖片。
看起來，結構已預先在啓動時完成加載了，第二步才把這些內容加載到結構中，而實際上，啓動屏上三個框是畫出來的。對於一個 App 來說，點擊它的圖標打開應用開始加載，在完成加載之前，用戶都沒有辦法參與。加載的過程究竟需要多長時間，用戶沒辦法預期，這個過程對用戶來說是失控的。
通過以上的設計，加上一些看起來是加載過程的反饋，這就管理了用戶對於加載進度的認知。
舉一反三，在所有產品設計的流程裏面，我們都要去思考：如何保持對用戶的反饋，讓用戶對系統有掌控感。
第二點：如何將兩個目的不同的頁面更順滑地連接起來
打開 Trigraphy 之後，界面上有一張大的圖片，下面可以看到本地的相冊。這個頁面的主界面像是一個畫板，底下的照片是用戶準備處理的素材，好像是用戶調色盤一樣，這是典型的工具操作頁面。
這時，如果向上滑動這張照片，下面的部分會收起來，整個頁面上變成一個圖片的內容流，上面是各種用 Trigraphy 處理過的照片。也就是說，通過這樣的操作把原來的工具操作頁面，變成了一個信息流結構。
這是一個很聰明的交互設計，通過一個動效將兩個頁面的元素平滑地連接在一起，就避免了生硬的頁面切換。
第三點：通過一個隨機效果設計去區分不同級別的用戶
在用 Trigraphy 處理圖片的過程中，可以看到有幾個不同的藝術效果可以選擇，每個藝術效果下面都有一些對應的參數，用戶可以自行調整。每個藝術效果的圖片上也都有一個"篩子"，當用戶點擊時，應用會自動幫用戶選擇一個參數組合。
全新的用戶進入應用後，通過點擊篩子，可以立竿見影地看到這個 App 可以做什麼，而無需費心調試參數。
當新用戶不斷按這個篩子，去隨機調整參數的時候，會對應用效果有一個比較清楚的預期。此外，這個操作還會勾起用戶進一步探索更高級參數設置方法的慾望。
平時在設計用戶體驗的時候，產品經理需要去注意區分不同級別的用戶，不同的用戶對 App 流程和功能的瞭解是不一樣的。產品設計最好可以幫助那些第一次使用這個 App 的用戶設計一個門檻非常低，可以直接上手的功能通路。
思考與總結
1. 反饋與進度
在移動互聯網時代，用戶的時間正在被以秒爲單位的碎片化切割，用戶也變得越來越沒有耐心。如果一個網站或者App光是打開這個動作就要花費超過5秒的時間，且用戶對這5秒的進度沒有任何感知，那麼用戶的感受是我不知道還需要多久才能看到我想要的內容，這種焦慮感會讓用戶有非常不好的體驗。
在後移動互聯網時代做產品，要讓用戶的每一個動作，都能感受到反饋，感受到這個動作的進度是用戶體驗非常重要的一環。
2. 順滑的過渡意味着舒服。
用戶體驗另外一個重要的一環就是過渡動畫，好的產品都會給用戶的每一個操作導致的界面變動添加順滑的過渡動畫。這個動畫也是給用戶反饋，讓用戶感知到自己的動作的執行，動畫的效果還能讓動作的執行時間在感知上變得更短了。但是動畫也不能戲太過，剛剛好的動畫給人的感覺才舒服。
3. 降低用戶的使用門檻。
對產品的一個新用戶來說，產品的一切功能都是陌生的，此時對於用戶來說產品的易用性就特別重要，因爲可能一個新用戶打開產品花了好幾十秒，甚至幾分鐘都沒有上手用起來。要麼這個產品十分有可能被用戶下一秒關掉，拋棄，再想把用戶找回來就非常困難了。
設計產品常規功能要儘可能使用用戶更好理解的設計語言、界面佈局。對待相對複雜的功能可以通過引導的方式讓用戶儘可能先用起來。用戶瞭解了產品是怎麼回事後，才能勾起用戶進一步探索產品的慾望。
我的個人公衆號：bryanshen。
