怎樣自學APP設計？

導航菜單是人機交互的最主要的橋樑和平台，主要作用是不讓用戶迷失方向。現在市面上產品的菜單欄種類繁多，到底什麼樣的才是優秀的導航菜單設計呢？好的菜單設計不僅能提升整個產品的用戶體驗，而且還能讓用戶耳目一新。這篇文章將聚焦導航菜單，分享我們對於導航菜單的認識和體驗。

一、導航菜單有什麼作用？

1. 提升產品內容和功能結構和層次

導航是APP的骨架，支撐著整體的內容和信息，讓內容按照信息架構有機地結合在一起，直觀而清晰地展示在用戶面前，從而使零碎的內容變得充實而有序。結構化的同時也增強了生態感。

2. 重點展示核心功能

每一款產品投入開發進入市場後，立身之本在於自己的核心功能。因此，核心功能必須放在用戶觸手可及的位置，次要功能的比重應該得到控制，展示上也不能喧賓奪主。通過導航就能很好的突出核心，適當隱藏次要功能。

3. 簡化用戶旅程

合理的導航系統和順暢的任務路徑，能夠讓用戶快速地達到目標，形成暢快的用戶體驗。用戶旅程的簡化對於產品的用戶黏度和轉化率有著直接的作用，高效的導航能夠直戳用戶痛點。

二、導航菜單的分類

在了解導航菜單的基本作用後，我們利用快速原型工具Mockplus來展示一下導航菜單的分類。

1、經典導航菜單Tabber

Tabber是蘋果ios可以自動生成一種導航控制項，開發起來方便。所以這種經典的底部導航欄受到絕大數app設計師的青睞。這種設計符合手機端用戶單手操作的習慣，包括新版微信，淘寶，支付寶，百度手機等都採用的這一方式。這個APP導航方式佔大多數。

優點：清楚當前所在的入口位置；直接展現最重要入口的內容信息。

缺點：功能入口過多時，該模式顯得笨重不實用。

2.、矩形、網格式導航菜單

這種宮格導航是將主要入口全部聚合在頁面，讓用戶做出選擇。這樣的組織方式無法讓用戶在第一時間看到內容，選擇壓力較大，採用這種導航的應用已經越來越少，往往用在二級頁作為內容列表的一種圖形化形式呈現，或是作為一系列工具入口的聚合。

利用Mockplus實現的宮格導航效果【在線預覽】

優點：簡約而不簡陋，導航清晰、明顯，並能提高效率。

缺點：設計時需要注意色彩的搭配，太過於花哨會讓用戶產生視覺疲勞。

3、抽屜式導航

抽屜式滑動導航很好地彌補了tabber導航中切換項受限的缺陷，通過縱向排列切換項解決了這一問題，將菜單隱藏在當前頁面內，點擊入口即可像抽屜一樣拉出菜單。

利用Mockplus實現的抽屜式導航效果【在線預覽】

優點：節省頁面展示空間；讓用戶注意力聚焦到當前頁面；擴展性好。

缺點：不適合頻繁切換的應用。

4、舵式導航

目前流行一種標籤導航的形式，常被稱做為「舵式導航」，因為它的樣式很像輪船上用來指揮的船舵，兩側是其他操作按鈕。當頁面有處於同一層級的幾大部分內容，同時又需要一個非常重要且頻繁操作的入口，就可以採用這種APP導航模式。

利用Mockplus實現的舵式導航效果【在線預覽】

優點：需要突出重要且頻繁操作的入口。

缺點：同標籤導航。

三、經典導航菜單設計

1. 谷歌的Material Design中使用了「浮動操作按鈕」來定義這種導航。通過UI上方浮動的圖標進行區分，同時也有恰當的動態效果。開創了全新的導航規範。

2. 同樣的，印象筆記也借鑒了這樣的模式，用戶只需輕點右下角的浮動按鈕，就可以快速地記錄當下的靈感。

3. Tumblr搭配了形象的圖標和貼切的標籤。 當你向下滾動瀏覽內容時，這些圖標也會自然地消失。

4. Messenger的構造嚴格地遵循了標籤導航，一部分標籤固定在頂部，一部分在底部清晰地呈現主要功能。圖標清晰易於理解，也允許自定義標籤，從而產生精緻而整潔的視覺體驗。

小結

越來越多的設計師意識到導航欄菜單對提高用戶體驗的重要性。 在Android中，我們看到從漢堡導航迭代為獨立的標籤欄。 在iOS上，越來越多的應用程序正在移除小標籤欄，替換成更大更清晰的圖標。為了追求更好的用戶體驗，簡化APP設計，設計師們還會在導航設計優化的路上不斷探索新的設計方向。

最近剛在簡書上寫了一篇文章，適用於不太複雜的非遊戲類 app：多虧 Sketch，我這個小碼農可以自己設計 app 了

1. 搞清楚 app 要解決什麼問題，它的功能是什麼
2. 在腦中或者紙上畫出流程 app 使用流程，想好基本的界面元素和跳轉關係
3. 用類似 Sketch 的工具輕鬆做出設計

APP設計技巧（下）|交互與彈窗

Original 2017-01-03 KEVINKev

說道app設計自學，分享一下自己總結的一些經驗學習方法和案例吧。

談談APP設計技巧（下），在交互風格與彈窗上，我們怎麼進行取捨！

APP設計的一些TIPS和交互技巧（下）

分享常用的一些APP交互效果

一、常用的APP交互效果

1.左右滑動

【左右滑動交互】

當我們進入APP的頁面，通過左右的滑動，將BUTTON進行切換，並且每一次切換的BUTTON大小都不同，會有單獨變大的效果。

2.密碼輸錯的情況

【支付寶密碼輸錯】

借鑒支付寶密碼輸錯，當用戶輸入密碼效果錯誤的時候，頭像變小，並且錯誤提升會變大。在輸入密碼的場景下，本應該突顯錯誤提示的情景就被體現的很不錯。

3.當文字太長不足以描述文本

【文案太長，通過添加標題】

以標題的形式來壓縮你需要表述的文案，用戶如果覺得有興趣會自然的閱讀下去。當然也可以考慮以二級頁面跳轉的形式，以標題超鏈接的方式。

4.通過實際效果而不是在OFFICE或WPS上預覽

【實際預覽效果】

用SKETCH預覽的ALERT效果提醒，可以知道欄位的顯示情況與文字大小在整個提醒框的大小情況，方便開發與溝通。

二、 APP評分，一個麻煩又是一個救世主

下一個APP不管是IOS還是安卓，在相應的應用商店裡面下載。不少的APP都會通過用戶評分的情況下，來滿足APP市場的高評分率。但是中斷用戶的操作無疑是殺掉用戶最美好、毀掉他最享受的時刻的情景。

作為一個PM怎麼考慮一個提醒的交互方式？或設計方式，這裡KEVIN借鑒了一些案例來談談。

1.可以把評論放在「文件夾」裡面

不少APP都是通過強制的提醒，來讓用戶進行評分。前面我已經說了，這無非會造成用戶的不爽，尤其是如果用戶點擊「不，謝謝」或「忽略」等情況，反覆出現的ALERT或提醒，更加會讓用戶崩潰！

那麼可以通過以文件夾的形式，把提醒放進。

【文件夾的形式】

用戶只是在滑動或點擊到某個內容的時候才彈出相應的評價框，完全由用戶自主的去評價。不影響用戶的任何操作，不管是評價的真實性還是評價的情景都是很客觀的。

2.確認目前用戶的操作

中斷用戶的操作，如果是在玩遊戲，或正在使用APP觀看相應的節目，達到高潮，彈出來這一個APP無非讓用戶感覺想死。

那麼APP可以進行判斷當前下用戶是否進行了主要操作，如遊戲是否開始、或影視視頻是否播放等，那確認用戶當前所處的場景，進行提醒；最大限度的降低用戶的反感。

【任務判斷為空後提醒評分】

如上圖的APP，那麼當前沒有任務進行處理的時候，就會彈出相應的評分彈窗。當然如果用戶點擊取消，這個時候就不會再彈出第二次，因為就像之前KEVIN說的一樣，如果用戶已經產生了反感，再次的評分就不客觀。甚至也會影響接下來的APP使用。

好啦，今天分享到這裡~明天繼續工作！

這一期間完成3篇關於APP設計技巧的總結，大家有興趣可以看看

APP產品設計你搞定了嗎？（APP設計技巧（上））

APP設計你是否考慮下面幾點？（APP設計技巧（中）

個人微信號:574319420

微信公眾號:Kevin改變世界的點滴

2017年，讓我們繼續前進！