不一樣的移動端那點事：APP、小程序

很多產品經理與設計師在設計移動端界面的時候，往往對界面上需要遵循的一些通用性設計原則不是十分清楚；而這些通用性或者全局性的規則對界面設計起到了很重要的作用，知道這些不一定會提升用户體驗，但是不知道這些很可能會使界面設計出現問題。

本文筆者選取了8大熱門APP，整理了一些移動端（APP、小程序）的設計規則，如APP一級頁主結構設計、APP二級頁主結構設計等，和大家一起來鞏固下移動端設計需要了解的知識。

筆者選取的8大熱門APP包括：

• 花瓣（圖片類）
• 肯德基（快餐類）
• 京東（電商類）
• 墨跡（天氣類）
• 微博（社交類）
• 下廚房（烹飪類）
• 知乎（知識類）
• 雪球（資訊類）

01 APP一級頁主結構設計

從上圖我們可以發現，APP一級頁主要包括頂部導航區、中間內容區和底部標籤欄。

頂部導航區通常由搜索條、APP核心操作功能組成。例如對於花瓣APP來説，它是一個圖片素材工具，它可以幫助用户發現自身關心的事物；因此它在頂部導航區放了一個大大的搜索條，來吸引用户去搜索自己想要的圖片。

對於下廚房APP來説，下廚房是一個廚師和美食愛好者記錄、分享美食的平台；因此該平台的內容來自於用户主動上傳，同時該平台鼓勵用户之間互相分享和交流，所以下廚房頂部導航主要功能為“上傳”、“搜索”和“消息”。

由此可見，APP頂部導航區的功能設計與APP的屬性及核心目標有極大的關係。

中間內容區又分為上、中、下三部分，在APP設計中，我們需要考慮重點內容前置展示和首屏利用率；例如對於京東APP來説，它是一個專業綜合網上購物商城，其銷售超數萬品牌，它的核心目的就是把越多的商品展示給用户，並且儘可能的提升用户的購買率。

因此京東APP的主要內容結構由上到下分為分類導航區（合理的分類，提升用户查找商品的效率）、營銷區（千人千面的展現，觸達用户心智）、金剛區（頁面核心功能區域，為重要子板塊分發內容）、各類賣點區等；而分類導航區、營銷區、金剛區佔了首屏一大半的位置，各類賣點區中的京東秒殺、京東直播、每日特價等也展示在了首屏。

該類的設計模式，提升了用户的產品觸達率和轉化率。

2014年，Apple提出了一種移動端新的導航模式，即底部標籤欄。底部標籤欄滿足了用户我在哪裏（一般通過標籤高亮的方式反饋）、我可以去哪裏（其餘標籤）的需求。

可以説，底部標籤欄不僅是設計上的飛躍，更是用户體驗上的進步，通常移動端標籤欄的導航數量為2-5個；在筆者統計的這8個APP中，基本上在4-5個，這是現在業內最為常用的數量。

02 APP二級頁主結構設計

從上圖我們可以發現，APP二級頁主要包括頂部導航區和中間內容區，底部頁籤欄根據頁面的實際情況選用。

APP二級頁的頂部導航區功能有一個主要的特徵是它通常帶有“返回”按鈕，可以幫助用户很順利地返回到上一頁；同時在二級頁導航區會展示當前頁的標題，從而讓用户知道他現在處於哪裏。

由於大家在使用APP時都是右手操作原則，因此在導航區的右側區域通常放置與當前頁相關的操作性功能。

不過，導航具體功能根據頁面情況，也會有些許差異。例如對於花瓣APP來説，其二級頁頂部導航區包括返回上一頁、點贊當前圖片、分享當前圖片和將圖片採集的功能。

對於肯德基APP來説，其二級頁頂部導航區包括返回上一頁和展示當前頁內容的標題。

APP二級頁的中間內容區根據產品的目標不同而不同，通常來説為相關內容詳情頁、子版塊詳細展示頁等；例如下廚房APP為一道菜的詳情頁，知乎APP為一篇文章的詳情頁；京東APP為發現好貨等子板塊的內容聚合頁，當然如果點擊京東APP首頁的某個具體商品，也會直接進入商品詳情頁。

在APP二級頁中，底部標籤欄為非必須。

在花瓣APP中，已經將一張圖片的分享、採集、點贊等功能加在了頂部導航區的右側，因此底部標籤欄直接採用了和一級頁一致的標籤欄；肯德基APP和京東APP直接取消了底部標籤欄；微博APP將針對話題的轉發、評論、點贊功能放在了底部標籤欄上。

03 小程序一級頁主結構設計

從上圖我們可以發現，小程序一級頁和APP一級頁一致，主要包括頂部導航區、中間內容區和底部標籤欄。

小程序一級頁中的中間內容區和底部標籤欄的設計思路與APP大同小異，但其底部標籤欄有時候未必有，例如肯德基APP；因為小程序當初在微信推出來的時候，就是定義即用即走的，因此小程序通常只承載簡單的功能，幫助用户完成某一件事件，所以小程序可以沒有底部標籤欄；而頂部導航區的設計收到相關平台（微信、支付寶、百度等）設計規範的約束，需要遵循一些設計規則。

例如在微信中，微信都會在其右上角放置官方小程序菜單（包括關閉和更多功能），設計者不可對其內容自定義，但可選擇深淺兩種基本配色以適應頁面設計風格，樣式如圖。

04 小程序二級頁主結構設計

從上圖我們可以發現，小程序二級頁和APP二級頁一致，主要包括頂部導航區和中間內容區，底部頁籤欄根據頁面的實際情況選用。

上面説到微信會在小程序一級頁右上角放置官方小程序菜單，那麼在二級頁裏面也不例外；但二級頁通常還會多一個返回上一級的按鈕，樣式如圖。

05 APP和小程序設計原則

通過對APP和小程序一級頁與二級頁的分析，我們可以總結出如下通用的設計原則。

1. 導航：指引明確

一旦用户進入APP或小程序，作為設計者的我們，就有義務明確地告知用户他們身在何處、可以去哪裏，保證用户可以快速的在頁面上穿梭；例如對於當前頁，需要高亮顯示；對於可以去哪裏，在界面上要有清晰的提示。

2. 信息：層級清晰

移動端界面由上至下分別怎麼呈現信息，需要非常清晰。

首先，大塊面信息層級為頂部導航區、中間內容區和底部標籤欄。

其次，在頂部導航區根據功能不同又從左到右切分為三部分：在中間內容區的信息根據信息重要層級也需進行切分；在底部標籤欄的信息根據主次也要進行切分，如下示意圖展示。

信息的層級清晰不僅加快了用户獲取信息的速度，更加有利於用户做出合理的決策。

3. 界面 ：重點明確

從8個APP的圖例中我們可以看出，每個頁面都應該根據其本身需要傳達給用户的核心目的來設計頁面的重點要素，不應該讓頁面上出現與當前頁核心目標不一致的信息，從而干擾到用户的決策。

06 APP和小程序組件庫

APP和小程序都是移動端的應用，因此它們涉及到的通用組件基本是一致的，筆者為大家總結了一下，有如下幾種：

• 按鈕
• 開關
• 選擇器
• 輸入框
• 單選框
• 多選框
• 滑塊
• 倒計時
• 表單
• 導航欄
• 標籤欄
• 抽屜式導航
• 宮格式導航
• 字母索引導航
• 公告欄
• 上傳
• ……

在本文就不一一列舉了，筆者正在陸續整理這些通用組件，因此將在之後的文章中為大家詳述組件的用法及給到大家相應的設計稿。

07 總結

如今，一款產品需要具備APP和小程序兩端已經成為剛需，這樣才能滿足用户的多樣化訴求；因此，產品經理和設計師需要多瞭解移動端設計的要求和注意點，才能設計出一款好的移動端產品。

作者：知果；公眾號：知果日記

本文由 @知果 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。