編輯導語：在移動端的界面設計中，我們要對其中的結構設計比較看重，一個完整的頁面上每個組件的分布都是很重要的；對于用戶來說，通用性是非常重要的，對于用戶體驗的影響也很大；本文作者分享了關于移動端的設計需要注意的點，我們一起來了解一下。

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

本文筆者選取了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協議。