# 移動(dòng)端頁(yè)面內(nèi)容切換
上周做了一個(gè)和頁(yè)面切換相關(guān)的需求，為了探尋在需求場(chǎng)景下最符合用戶心理模型的交互方式，當(dāng)時(shí)一共輸出了有四五種方案。總結(jié)一下各種切換頁(yè)面內(nèi)容的方式的特點(diǎn)和他們適用的場(chǎng)景。## 一、Tab頁(yè)面切換
tab頁(yè)面切換是目前移動(dòng)端最為常見(jiàn)的一種切換方式，微博、淘寶、小紅書(shū)等等，可以在各類(lèi)軟件上看到它的身影。
最常見(jiàn)的一個(gè)使用tab場(chǎng)景就是當(dāng)需要對(duì)當(dāng)前頁(yè)面的內(nèi)容進(jìn)行分類(lèi)：

tab是最常見(jiàn)的組件之一

通常tab的標(biāo)簽內(nèi)容是同類(lèi)型內(nèi)容分類(lèi)，作為分類(lèi)檢索便于用戶快速定位自己感興趣的內(nèi)容。
另外，tab也用于同級(jí)信息的切換，例如上面的一級(jí)tab標(biāo)簽，關(guān)注和推薦就是這種類(lèi)型。
不論是移動(dòng)端還是pc端，使用標(biāo)簽的場(chǎng)景非常多，通常情況下tab會(huì)給用戶以下心理暗示：
1. 標(biāo)簽對(duì)應(yīng)的兩個(gè)頁(yè)面之間不會(huì)相互干擾
2. 標(biāo)簽內(nèi)容是同等級(jí)的，不存在歸屬問(wèn)題
3. 標(biāo)簽之間相互切換只是用戶暫時(shí)離開(kāi)，應(yīng)該保留頁(yè)面的相關(guān)編輯狀態(tài)
換句話說(shuō)就是我在A分頁(yè)做的操作，不會(huì)影響B(tài)分頁(yè)的內(nèi)容。在tab標(biāo)簽這種形式下，A、B兩個(gè)頁(yè)面的獨(dú)立性是很強(qiáng)的,若兩個(gè)頁(yè)面之間有共同需要保持一致的屬性，就要謹(jǐn)慎使用這種切換形式。
使用tab時(shí)，用戶的心理模型更貼近于有幾個(gè)標(biāo)簽就有幾個(gè)分頁(yè)，如果你只有一個(gè)頁(yè)面，卻想使用tab來(lái)切換頁(yè)面的狀態(tài)，就會(huì)給用戶造成誤解。## 二、文字鏈切換頁(yè)面內(nèi)容
這種切換方式常見(jiàn)于登錄頁(yè)面

還有一些需要上傳證件信息的頁(yè)面，在支持ocr掃描和用戶自己輸入信息的情況下，也會(huì)采用文字鏈的形式支持用戶進(jìn)行切換。
這種形式的切換方式會(huì)給用戶非常明確的感受就是：在辦同一件事，但是方式可改變。而且也會(huì)很明確的將推薦方式和次要方式區(qū)分出來(lái)。對(duì)于不便于給用戶推薦具體方式的場(chǎng)景，這種方式就不適用了。## 三、選擇控件切換部分頁(yè)面內(nèi)容
這種切換方式就和上面有明顯的差別，一般用于只是有微小差異的場(chǎng)景：

這種方式多用于表單填寫(xiě)的場(chǎng)景，根據(jù)用戶的選擇展示不同的字段，幫助用戶聚焦當(dāng)前的內(nèi)容
---
上面三種方式都是最為基礎(chǔ)的切換方式，在實(shí)際設(shè)計(jì)過(guò)程中遇到的場(chǎng)景往往更為復(fù)雜，需要在基礎(chǔ)的控件上做出調(diào)整，視覺(jué)表現(xiàn)手法上也要相應(yīng)的進(jìn)行調(diào)整。

總結(jié)

以上是生活随笔為你收集整理的怎么把一个控件放到tab页面上去?_移动端页面内容切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。