編輯導(dǎo)語：在移動端的界面設(shè)計(jì)中，我們要對其中的結(jié)構(gòu)設(shè)計(jì)比較看重，一個(gè)完整的頁面上每個(gè)組件的分布都是很重要的；對于用戶來說，通用性是非常重要的，對于用戶體驗(yàn)的影響也很大；本文作者分享了關(guān)于移動端的設(shè)計(jì)需要注意的點(diǎn)，我們一起來了解一下。

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

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

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

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

01 APP一級頁主結(jié)構(gòu)設(shè)計(jì)

從上圖我們可以發(fā)現(xiàn)，APP一級頁主要包括頂部導(dǎo)航區(qū)、中間內(nèi)容區(qū)和底部標(biāo)簽欄。

頂部導(dǎo)航區(qū)通常由搜索條、APP核心操作功能組成。例如對于花瓣APP來說，它是一個(gè)圖片素材工具，它可以幫助用戶發(fā)現(xiàn)自身關(guān)心的事物；因此它在頂部導(dǎo)航區(qū)放了一個(gè)大大的搜索條，來吸引用戶去搜索自己想要的圖片。

對于下廚房APP來說，下廚房是一個(gè)廚師和美食愛好者記錄、分享美食的平臺；因此該平臺的內(nèi)容來自于用戶主動上傳，同時(shí)該平臺鼓勵用戶之間互相分享和交流，所以下廚房頂部導(dǎo)航主要功能為“上傳”、“搜索”和“消息”。

由此可見，APP頂部導(dǎo)航區(qū)的功能設(shè)計(jì)與APP的屬性及核心目標(biāo)有極大的關(guān)系。

中間內(nèi)容區(qū)又分為上、中、下三部分，在APP設(shè)計(jì)中，我們需要考慮重點(diǎn)內(nèi)容前置展示和首屏利用率；例如對于京東APP來說，它是一個(gè)專業(yè)綜合網(wǎng)上購物商城，其銷售超數(shù)萬品牌，它的核心目的就是把越多的商品展示給用戶，并且盡可能的提升用戶的購買率。

因此京東APP的主要內(nèi)容結(jié)構(gòu)由上到下分為分類導(dǎo)航區(qū)（合理的分類，提升用戶查找商品的效率）、營銷區(qū)（千人千面的展現(xiàn)，觸達(dá)用戶心智）、金剛區(qū)（頁面核心功能區(qū)域，為重要子板塊分發(fā)內(nèi)容）、各類賣點(diǎn)區(qū)等；而分類導(dǎo)航區(qū)、營銷區(qū)、金剛區(qū)占了首屏一大半的位置，各類賣點(diǎn)區(qū)中的京東秒殺、京東直播、每日特價(jià)等也展示在了首屏。

該類的設(shè)計(jì)模式，提升了用戶的產(chǎn)品觸達(dá)率和轉(zhuǎn)化率。

2014年，Apple提出了一種移動端新的導(dǎo)航模式，即底部標(biāo)簽欄。底部標(biāo)簽欄滿足了用戶我在哪里（一般通過標(biāo)簽高亮的方式反饋）、我可以去哪里（其余標(biāo)簽）的需求。

可以說，底部標(biāo)簽欄不僅是設(shè)計(jì)上的飛躍，更是用戶體驗(yàn)上的進(jìn)步，通常移動端標(biāo)簽欄的導(dǎo)航數(shù)量為2-5個(gè)；在筆者統(tǒng)計(jì)的這8個(gè)APP中，基本上在4-5個(gè)，這是現(xiàn)在業(yè)內(nèi)最為常用的數(shù)量。

02 APP二級頁主結(jié)構(gòu)設(shè)計(jì)

從上圖我們可以發(fā)現(xiàn)，APP二級頁主要包括頂部導(dǎo)航區(qū)和中間內(nèi)容區(qū)，底部頁簽欄根據(jù)頁面的實(shí)際情況選用。

APP二級頁的頂部導(dǎo)航區(qū)功能有一個(gè)主要的特征是它通常帶有“返回”按鈕，可以幫助用戶很順利地返回到上一頁；同時(shí)在二級頁導(dǎo)航區(qū)會展示當(dāng)前頁的標(biāo)題，從而讓用戶知道他現(xiàn)在處于哪里。

由于大家在使用APP時(shí)都是右手操作原則，因此在導(dǎo)航區(qū)的右側(cè)區(qū)域通常放置與當(dāng)前頁相關(guān)的操作性功能。

不過，導(dǎo)航具體功能根據(jù)頁面情況，也會有些許差異。例如對于花瓣APP來說，其二級頁頂部導(dǎo)航區(qū)包括返回上一頁、點(diǎn)贊當(dāng)前圖片、分享當(dāng)前圖片和將圖片采集的功能。

對于肯德基APP來說，其二級頁頂部導(dǎo)航區(qū)包括返回上一頁和展示當(dāng)前頁內(nèi)容的標(biāo)題。

APP二級頁的中間內(nèi)容區(qū)根據(jù)產(chǎn)品的目標(biāo)不同而不同，通常來說為相關(guān)內(nèi)容詳情頁、子版塊詳細(xì)展示頁等；例如下廚房APP為一道菜的詳情頁，知乎APP為一篇文章的詳情頁；京東APP為發(fā)現(xiàn)好貨等子板塊的內(nèi)容聚合頁，當(dāng)然如果點(diǎn)擊京東APP首頁的某個(gè)具體商品，也會直接進(jìn)入商品詳情頁。

在APP二級頁中，底部標(biāo)簽欄為非必須。

在花瓣APP中，已經(jīng)將一張圖片的分享、采集、點(diǎn)贊等功能加在了頂部導(dǎo)航區(qū)的右側(cè)，因此底部標(biāo)簽欄直接采用了和一級頁一致的標(biāo)簽欄；肯德基APP和京東APP直接取消了底部標(biāo)簽欄；微博APP將針對話題的轉(zhuǎn)發(fā)、評論、點(diǎn)贊功能放在了底部標(biāo)簽欄上。

03 小程序一級頁主結(jié)構(gòu)設(shè)計(jì)

從上圖我們可以發(fā)現(xiàn)，小程序一級頁和APP一級頁一致，主要包括頂部導(dǎo)航區(qū)、中間內(nèi)容區(qū)和底部標(biāo)簽欄。

小程序一級頁中的中間內(nèi)容區(qū)和底部標(biāo)簽欄的設(shè)計(jì)思路與APP大同小異，但其底部標(biāo)簽欄有時(shí)候未必有，例如肯德基APP；因?yàn)樾〕绦虍?dāng)初在微信推出來的時(shí)候，就是定義即用即走的，因此小程序通常只承載簡單的功能，幫助用戶完成某一件事件，所以小程序可以沒有底部標(biāo)簽欄；而頂部導(dǎo)航區(qū)的設(shè)計(jì)收到相關(guān)平臺（微信、支付寶、百度等）設(shè)計(jì)規(guī)范的約束，需要遵循一些設(shè)計(jì)規(guī)則。

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

04 小程序二級頁主結(jié)構(gòu)設(shè)計(jì)

從上圖我們可以發(fā)現(xiàn)，小程序二級頁和APP二級頁一致，主要包括頂部導(dǎo)航區(qū)和中間內(nèi)容區(qū)，底部頁簽欄根據(jù)頁面的實(shí)際情況選用。

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

05 APP和小程序設(shè)計(jì)原則

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

1. 導(dǎo)航：指引明確

一旦用戶進(jìn)入APP或小程序，作為設(shè)計(jì)者的我們，就有義務(wù)明確地告知用戶他們身在何處、可以去哪里，保證用戶可以快速的在頁面上穿梭；例如對于當(dāng)前頁，需要高亮顯示；對于可以去哪里，在界面上要有清晰的提示。

2. 信息：層級清晰

移動端界面由上至下分別怎么呈現(xiàn)信息，需要非常清晰。

首先，大塊面信息層級為頂部導(dǎo)航區(qū)、中間內(nèi)容區(qū)和底部標(biāo)簽欄。

其次，在頂部導(dǎo)航區(qū)根據(jù)功能不同又從左到右切分為三部分：在中間內(nèi)容區(qū)的信息根據(jù)信息重要層級也需進(jìn)行切分；在底部標(biāo)簽欄的信息根據(jù)主次也要進(jìn)行切分，如下示意圖展示。

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

3. 界面 ：重點(diǎn)明確

從8個(gè)APP的圖例中我們可以看出，每個(gè)頁面都應(yīng)該根據(jù)其本身需要傳達(dá)給用戶的核心目的來設(shè)計(jì)頁面的重點(diǎn)要素，不應(yīng)該讓頁面上出現(xiàn)與當(dāng)前頁核心目標(biāo)不一致的信息，從而干擾到用戶的決策。

06 APP和小程序組件庫

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

• 按鈕
• 開關(guān)
• 選擇器
• 輸入框
• 單選框
• 多選框
• 滑塊
• 倒計(jì)時(shí)
• 表單
• 導(dǎo)航欄
• 標(biāo)簽欄
• 抽屜式導(dǎo)航
• 宮格式導(dǎo)航
• 字母索引導(dǎo)航
• 公告欄
• 上傳
• ……

在本文就不一一列舉了，筆者正在陸續(xù)整理這些通用組件，因此將在之后的文章中為大家詳述組件的用法及給到大家相應(yīng)的設(shè)計(jì)稿。

07 總結(jié)

如今，一款產(chǎn)品需要具備APP和小程序兩端已經(jīng)成為剛需，這樣才能滿足用戶的多樣化訴求；因此，產(chǎn)品經(jīng)理和設(shè)計(jì)師需要多了解移動端設(shè)計(jì)的要求和注意點(diǎn)，才能設(shè)計(jì)出一款好的移動端產(chǎn)品。

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

本文由 @知果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。