目前許多App隨著功能迭代和產(chǎn)品需求的調(diào)整，在單個頁面呈現(xiàn)的功能點與內(nèi)容都在增多。這意味著同一頁面如果想給用戶呈現(xiàn)更多內(nèi)容和操作，就必須根據(jù)用戶使用場景，利用交互方式的變化，分重要性層級展示。下文將通過實際案例說明移動端界面設(shè)計中頂部導(dǎo)航交互設(shè)置的變化。

一. 淘寶店鋪詳情頁的頂部交互設(shè)置

1.?退出店鋪詳情頁按鈕的位置和樣式變化

改版前退出店鋪詳情頁的跳轉(zhuǎn)方式：點擊左上角返回按鈕，頁面從左至右滑出回到上一級頁面。改版后：點擊右上角關(guān)閉按鈕，頁面從左至右滑出回到上一級頁面（類似微信小程序的關(guān)閉樣式）

2. 頁面上下滑動交互方式的改變

用戶在當前頁面上下滑動瀏覽內(nèi)容時，傳統(tǒng)交互方式：如下圖1選中部分固定位置不動，只是滑動時視覺呈現(xiàn)效果變化。改版后交互方式：上滑頁面，下圖2隱藏了除搜索和頂部Tab之外的區(qū)域，并且搜索按鈕的呈現(xiàn)樣式發(fā)生了變化，在頁面的任何位置下滑時隱藏部分出現(xiàn)。

（1）傳統(tǒng)交互方式

（2）新版交互方式

3. 調(diào)整背后的場景分析

（1）返回上一級由左側(cè)的箭頭調(diào)整為右側(cè)的關(guān)閉按鈕

從內(nèi)容呈現(xiàn)層面分析，首先展示給用戶的是重要性層級最高的內(nèi)容。用戶進入店鋪詳情頁，首先看到的是店鋪名稱、粉絲數(shù)量和關(guān)注按鈕。這符合交互原則，需要讓用戶明確從哪里來，現(xiàn)在在哪，怎么回去。

（2）上滑操作后店鋪相關(guān)信息隱藏，下滑再次出現(xiàn)

用戶上滑操作時，表明用戶已經(jīng)開始瀏覽信息流，那么店鋪的相關(guān)信息沒有必要一直固定存在，同時可以為內(nèi)容留出更多的展示空間。當用戶下滑操作時，再次出現(xiàn)默認頭部，此時用戶可能想退出或關(guān)注該店鋪。

（3）上滑后搜索由icon+文字調(diào)整為只有icon

首屏搜索的重要性層級較高，用戶進入該頁面可能有明確目的，即搜索該店鋪的商品，這時需要將搜索呈現(xiàn)的明顯。當用戶上滑意味著沒有明確目的，只是單純的瀏覽推薦內(nèi)容，此時搜索就可以弱化處理。

二. 知乎用戶詳情頁和問題詳情頁頂部的交互設(shè)置

1. 用戶詳情頁上下滑動，頂部交互方式的變化

如下圖，進入用戶詳情頁，知乎選擇了首屏放置超大的個人頭像和背景圖，以及昵稱和個人簡介信息。當上滑頁面后個人頭像漸變消失，頂部出現(xiàn)搜索和功能聚合鍵。

這里的考慮因素首先突出用戶個人信息，隨著用戶開始瀏覽內(nèi)容，個人信息弱化，同時出現(xiàn)對應(yīng)的搜索功能。這正是基于用戶不同使用場景下，想要達成不同目標，依靠交互的變化對頁面布局進行的調(diào)整。

2. 問題詳情頁上下滑動頂部交互方式的變化

（1）知乎的問題詳情頁默認頂部放置了返回按鈕、搜索框和功能聚合鍵。當用戶上滑頁面時，文章標題、查看更多回答入口、寫回答按鈕，全部匯集在頂部導(dǎo)航的位置。

這是知乎出于對用戶在當前頁面瀏覽有哪些需求的認知設(shè)定的：知乎問答一貫倡導(dǎo)每個人發(fā)表自己的看法觀點，所以一個問題可能包含多位用戶的回復(fù)，用戶瀏覽完當前回答，最有可能的需求包括：“查看其他回答”、“自己寫回答”，以及“關(guān)注這條回答的作者”。

（2）上面我們提到用戶在該頁面有可能覺得本條回答很贊，想要關(guān)注本條回答的作者，或者查看作者更多動態(tài)。那么問題來了：在哪里放置關(guān)注按鈕和作者個人信息呢？

這里我們需要考慮：一方面保證用戶在問答詳情頁有盡可能多的空間瀏覽內(nèi)容；另一方面又要在用戶需要關(guān)注作者或查看作者動態(tài)時，給用戶提供相應(yīng)的入口。

因此直接在頁面某個位置固定放置該入口會影響用戶瀏覽體驗，所以應(yīng)用了靈活的交互方式：在該頁面當用戶上滑瀏覽文字內(nèi)容時，不呈現(xiàn)關(guān)注按鈕和作者個人信息入口；而當用戶下滑頁面時呈現(xiàn)。（如下圖對比）

三. 網(wǎng)易考拉種草社區(qū)首頁頂部交互設(shè)置

正如APP Store iOS 11系統(tǒng)的全新改版，突出強調(diào)標題迅速搶占用戶心智。這也促使很多應(yīng)用iOS版本的迭代采用了這種方式。下圖中用戶進入種草社區(qū)，突出的大標題+消息按鈕+搜索框位于頂部，當上滑后標題消失，左上角放置了“我的主頁”入口，搜索框變小但仍然突出強調(diào)，右上角消息按鈕不變。

文末總結(jié)

• 交互設(shè)計師需要思考如何在界面中靈活應(yīng)用交互設(shè)置，滿足用戶不同場景的需求，進一步提升產(chǎn)品的易用性與親和力。
• 隨著用戶體驗和需求的不斷升級，產(chǎn)品上下游不同職能人員必須深入思考，深挖用戶需求，做好細節(jié)的把控。
• 本文以iOS系統(tǒng)移動端界面設(shè)計中頂部導(dǎo)航交互設(shè)置為引，大家可以進一步思考比如底部導(dǎo)航欄、視頻列表頁及播放頁等頁面相關(guān)的交互方式，希望能帶給你一些啟發(fā)。如果有更好的觀點歡迎交流，相互學習。

作者：Viksea，微信公眾號：Viksea（ID：viksea-ux）

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

題圖來自 Unsplash