中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

2. 頁(yè)面上下滑動(dòng)交互方式的改變

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

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

（2）新版交互方式

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

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

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

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

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

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

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

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

1. 用戶詳情頁(yè)上下滑動(dòng)，頂部交互方式的變化

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

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

2. 問(wèn)題詳情頁(yè)上下滑動(dòng)頂部交互方式的變化

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

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

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

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

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

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

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

文末總結(jié)

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

作者：Viksea，微信公眾號(hào)：Viksea（ID：viksea-ux）

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

題圖來(lái)自 Unsplash