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

為了滿足需求，通?？梢允褂貌煌姆椒?、手段來實現(xiàn)。如果結(jié)合用戶的使用場景，必然有一個最優(yōu)解。那么，如何在眾多選擇中找到最適合的選項？這篇文章，作者給到的方法可以參考。

一、類型介紹

在PC端項目中，用戶觸發(fā)了某個操作，當需要向用戶展示新的內(nèi)容時，有很多交互方式，彈窗、抽屜、頁面就是其中典型的3種。下面來分析下3種交互方式的優(yōu)勢、劣勢和使用場景。

1.1 彈窗

定義：分為模態(tài)和非模態(tài)對話框2種，常用的為模態(tài)對話框。

優(yōu)勢：在不離開當前頁面的前提下完成操作，之前的內(nèi)容不丟失。

劣勢：彈窗空間有限，承載的信息量太少。

適用場景：

• 展示簡單內(nèi)容，沒有復雜操作。
• 不丟失信息焦點，或者需要連續(xù)性處理信息的場景。
• 更為詳細的輔助說明，是對當前內(nèi)容的快速擴展。

1.2 抽屜

定義：屏幕邊緣滑出的浮層面板，分為模態(tài)和非模態(tài)抽屜2種。

優(yōu)勢：在不離開當前頁面的前提下完成操作，之前的內(nèi)容不丟失。

劣勢：由于信息集中在一側(cè)，導致視覺焦點不穩(wěn)定。

適用場景：

• 展示中等信息量的內(nèi)容，如彈窗內(nèi)無法承載的長表單。
• 不丟失信息焦點，或者需要連續(xù)性處理信息的場景。
• 在當前任務流中插入臨時任務，創(chuàng)建或預覽附加內(nèi)容，如協(xié)議條款。

1.3 頁面

定義：分為頁面刷新、新開頁面和覆蓋式全屏彈窗3種。操作后，頁面刷新會在當面頁面進行刷新加載，加載結(jié)束后展示新內(nèi)容；新開頁面時會在保留原有頁面，新的內(nèi)容在新頁面中呈現(xiàn)；覆蓋式全屏彈窗也會保留原有頁面，但會以全屏彈窗的形式覆蓋在原有頁面上方，關閉全屏彈窗時不會觸發(fā)原有頁面的數(shù)據(jù)刷新。

優(yōu)勢：頁面刷新時用戶的注意力不容易分散，更加順暢的理解發(fā)生了什么；新開頁面能夠保留原有頁面內(nèi)容不丟失，便于多個頁面的信息進行比較對照；覆蓋式全屏彈窗也能夠保留原有頁面內(nèi)容，且不會使用戶丟失焦點。

劣勢：頁面刷新后，無法保留之前的內(nèi)容；新開頁面容易使用戶丟失焦點，注意力分散，且交互存在不統(tǒng)一的問題（因為系統(tǒng)中大部分的操作在同一個頁面中完成）；覆蓋式全屏彈窗需要提供明顯的返回或關閉按鈕，樣式上會有其他頁面存在明顯差異。

適用場景：

頁面刷新

• 偏流程性的功能頁面，前后操作存在關聯(lián)和影響。如：下單—支付。
• 同一層級間的內(nèi)容切換，如：Tab頁切換。
• 用戶具有明確目的性的操作，跳轉(zhuǎn)頁有利于鎖定用戶注意力。

覆蓋式全屏彈窗

• 需要保留當前頁的操作不丟失。如：篩選過濾后的結(jié)果。
• 需要對文件進行高清預覽操作。如：Excel、PDF。
• 需要對某類數(shù)據(jù)進行下鉆分析。

新開頁面

• 頁面內(nèi)容沒有關聯(lián)性，且從邏輯上沒有從屬關系，相對獨立。如：外鏈。
• 存在多頁面「比較」的場景，需要經(jīng)常切換頁面。如：淘寶商品詳情。
• 需要參照一些文檔來幫助用戶完成當前操作。如：幫助文檔，規(guī)則說明等。

在我們?nèi)粘ＴO計中，常常抉擇于：彈窗、抽屜、頁面之間，總覺得使用某一種交互形式會更好，但是卻說不出其中的原因，猶豫究竟應該使用那種展現(xiàn)形式，這需要我們通過具體的要素方法進行相應的衡量分析。

二、參考衡量因素

2.1 頁面內(nèi)容量

頁面內(nèi)容量決定呈現(xiàn)形式。

無論是彈窗、抽屜還是頁面，究其本身就是一個信息內(nèi)容的載體，因此選擇如何使用，很大程度上取決展現(xiàn)內(nèi)容量的多少。

內(nèi)容量：通常包含頁面當中文字、圖片、視頻、表格、以及各種復雜的交互，從內(nèi)容承載量的角度來看，頁面 > 抽屜 > 彈窗。

但是不能從一個維度去思考頁面內(nèi)容量的多少，內(nèi)容的寬度以及深度都是需要去分析。

• 內(nèi)容較深（表單為主）：抽屜 > 頁面 > 彈窗
• 內(nèi)容較寬（圖片、視頻為主）：彈窗 > 頁面 > 抽屜
• 內(nèi)容較深較寬：頁面 > 抽屜 > 彈窗

綜合來看，頁面適合較多內(nèi)容信息的承載，抽屜其次，彈窗最弱，但是在實際工作中還需要結(jié)合以下兩點進行綜合考量。

2.2 頁面連貫性

頁面連貫性直接決定用戶的使用體驗。

當瀏覽器新開一個標簽進行展示時，頁面的連貫性是最弱的，因為用戶需要進行相對困難的操作才能返回到前頁面，同時你也可以理解新開頁面是較為獨立的，不會受到前頁面的干擾，而要決定頁面連貫性的核心，還是以自身業(yè)務流程出發(fā)。

• 流程變化連貫性：頁面刷新 = 覆蓋式全屏彈窗 > 抽屜 = 彈窗 > 新開頁面
• 拓展信息連貫性：抽屜 = 彈窗 > 頁面刷新 = 覆蓋式全屏彈窗 > 新開頁面
• 信息對比連貫性：抽屜 > 新開頁面 > 彈窗 > 頁面刷新 = 覆蓋式全屏彈窗

綜合來看，頁面刷新或覆蓋式全屏彈窗更適合體現(xiàn)流程變化，彈窗和抽屜更適合展示與當前頁相關的拓展信息，抽屜更適合在當前頁內(nèi)做信息對比。

2.3 頁面切換成本

頁面切換成本決定用戶使用效率。

當一個二級頁面使用頻率過高時，就證明用戶需要在A與B頁面之間進行來回切換，這時候考慮頁面反復出現(xiàn)是否流暢，是否有切換成本的產(chǎn)生。

在微信APP中，因為用戶需要經(jīng)常切換，之前用戶難以在幾個頁面來回跳轉(zhuǎn)，而浮窗的出現(xiàn)，剛好能夠解決這一問題，減少了頁面間的切換成本。

而B端產(chǎn)品效率至上的原則，更需要思考用戶怎樣切換成本更低。

下面我們借用幾個B端案例來解釋參考衡量因素。

我舉一個簡單例子，現(xiàn)在你需要去設計一個客戶詳情頁，但是因為客戶詳情頁需要展示大量信息以及表格，同時還會有各種各樣的交互行為：“點擊、錄入、甚至拖拽”，這時候你會怎么選擇？

帶著疑問，我們看看市面上不同的產(chǎn)品給出了完全不同的解決辦法，當然他們每個產(chǎn)品的側(cè)重點不同，導致最后的結(jié)果不同。

小滿CRM — 抽屜形式，方便用戶切換

小滿是一款客戶管理平臺，在它的客戶模塊中，用戶可以在當前頁去設置不同的字段，所以每個詳情會存在快捷操作等一系列方便用戶的需求，導致抽屜的選擇大于其他交互形式。其次在內(nèi)容量上，可以從截圖上看出，內(nèi)容大多以文字記錄為主，不會存在大段文字以及大圖的情況，因此不會存在內(nèi)容過寬的情況。

只是在字段數(shù)量上會有所增多，導致字段的高度會隨之增加，因此滿足上面要求的交互控件只有抽屜和頁面。最后在連貫性與切換成本上，明顯用戶需要經(jīng)常來回切換去對比客戶信息以及銷售的更進狀態(tài)，因此只有抽屜能夠滿足讓用戶進行連貫的用戶體驗，因此抽屜最為合適。

Hubspot — 頁面刷新及全屏彈窗形式，查看全量信息

Hubspot是國外一款非常出名的CRM，而且Hubspot是屬于國外產(chǎn)品傳入中國，因此在使用習慣上，更偏向于專注去做一件事，比如Hubspot上，在其客戶詳情頁能夠直接進行添加日程、撥打電話、發(fā)送郵件等幾十項操作，并且一切圍繞著Marketing、Sales展開，因此使得頁面需要更加專注，需要看到更加全量的信息，再次國外Saas用戶也是對完整流程的操作更加青睞（一個操作只干一件事），而國內(nèi)喜歡有很多快捷操作，因此造成Hubspot都采取頁面跳轉(zhuǎn)的形式查看數(shù)據(jù)。

此外，Hubspot為了防止篩選場景下使用頁面跳轉(zhuǎn)導致原頁面的篩選條件失效，也額外采用了不少覆蓋式全屏彈窗的交互（可以理解為頁面跳轉(zhuǎn)的一種，但覆蓋在原頁面上方，不會銷毀原頁面）。

基于以上2個例子，我們會發(fā)現(xiàn)在交互選用上，往往會收到場景訴求、國內(nèi)外用戶習慣、操作成本等多因素影響，因此我們需要進一步的具體問題具體分析，在能夠滿足絕大多數(shù)用戶場景訴求的前提下選用統(tǒng)一的交互方案。

三、選用判斷思路

下圖是基于通用場景和參考衡量因素整理的一些選用思路圖。

看不清楚的請點擊本鏈接跳轉(zhuǎn)Figma >