欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

首頁

干貨!6 條提升用戶體驗的小貼士

杰睿

用戶體驗是一個老生常談的話題。在進行 UI & UX 設計時,我們經常會忽略一些細節,雖然我們并沒有覺得有什么問題,但往往會極大地影響用戶的體驗,從而影響整個產品。作者在本文中提出了 6 條提升用戶體驗的微技巧,一起來學習吧!

在設計高效、易讀和漂亮的 UI 界面時,只需要小的改動就能讓你的設計眼前一亮。在這篇文章中,我為你帶來了另一些容易付諸實踐的 UI 和 UX 微技巧。這些技巧只需很小的改動就可以幫助你提升用戶體驗。讓我們開始吧!

一、通過色彩讓設計更一致

如果你有一個設計項目,可以讓你在顏色選擇方面有比較多的自由,不要總是傾向于用彩虹般的顏色來進行設計。

如果你走的是彩虹路線,你很快就會發現很多內容看起來都不匹配。簡單地使用一個基礎色,然后將該顏色的色調和明暗進行變化并應用,可以令你的設計更加協調和一致,并且看起來更專業,而不需要那些閃亮的彩虹和需要色彩理論學位。

干貨!6 條提升用戶體驗的小貼士

二、突出選中目標吸引用戶注意

UI 可以是干凈的、極簡的和直截了當的,這毋庸置疑。但不能以犧牲用戶體驗為代價。對于像選項菜單這樣簡單的東西,要確保用戶只需快速瀏覽一下,就能夠找到選擇的項目。

你不需要在這里追究更多細節。簡潔的粗體就足夠讓用戶輕松的分辨出他們選中的目標,而且他們的輸入已經得到反饋。

干貨!6 條提升用戶體驗的小貼士

三、加深輕字重文字 提升可讀性

當涉及到長篇文字內容時,你可能會傾向于使用灰色的中間色調,這可能沒什么問題。但如果你同時使用更輕字重的字體,就會發現這影響了這段內容在任何尺寸屏幕上的可讀性。

不要讓用戶因為這種原因退出頁面。可以通過將文字的顏色加深來簡單地解決這個問題,讓每個人都更加易讀。對于較輕字重的字體,只需將其顏色加深幾個級別,就能顯著的改善其可讀性。

干貨!6 條提升用戶體驗的小貼士

四、明確元素優先級

你希望用戶的眼睛每次都能快速、有效地注意到頁面上最重要的元素,并將認知的努力降到最低。通過使用視覺層級原則,如字體大小、字重、顏色和布局,僅舉幾例,你可以通過這些技巧輕松地把最重要的元素放在突出位置。遵循這些原則有助于改善用戶的體驗,并有助于引導用戶以更直接、準確地方式使用產品。

干貨!6 條提升用戶體驗的小貼士

五、不要讓用戶猜測

在用戶進行操作之前,特別是點擊某些 CTA 按鈕之前,要確保他們不會被蒙在鼓里,知道接下來會發生什么。在執行操作之前,始終讓用戶清楚地了解他們在點擊突出顯示的 CTA 按鈕時可以期待些什么。改善每一步的用戶體驗,不要讓他們在旅程中任何一個觸點產生疑問。

干貨!6 條提升用戶體驗的小貼士

六、為CTA按鈕單獨設定一種顏色

CTA 按鈕在頁面中哪怕不是最重要的部分,也是最重要的之一,讓它在頁面中突出出來!

不要讓用戶將它與頁面上其他類型的元素(例如通知或標簽)混淆。它需要很容易地被分辨出來,而這可以通過簡單地為 CTA 設置單獨一種顏色就做到。當然,你可以在尺寸、形狀等方面做更多的細節,但只要為你的 CTA 保留一種顏色,僅此一點就可以減少大部分問題。

我希望通過這幾條簡短的小貼士,你能意識到對你的設計進行小的調整也能帶來完全不一樣的用戶體驗。

譯者:吳鵬飛;授權獲取:吳鵬飛;審核指導:王翎旭;

本文由@三分設 翻譯發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

交互細節——管理模式下是否需要確認按鈕?

杰睿

關于“管理模式下是否需要確認按鈕”這一問題,作者結合自己最近的一次設計方案復盤,從三個維度展開分析,希望對你有所啟發。

背景

需求:在課程章節頁面,老師希望可以對章節、單元編輯名稱和調整順序。

設計問題:

  1. 操作功能入口放在哪里?
  2. 是實時保存同步,還是點擊確認按鈕保存同步?
  3. 樹結構下的排序如何設計?

一、操作功能入口放在哪里?

最開始想到的就是放在章節單元后,增加更多 icon,用戶點擊更多進行章節單元的編輯刪除,拖拽直接調整排序。可是這種設計方式讓章節看起來復雜很多,而且老師使用頻率很低,一般只有在學期剛開始,備課時設置,后期幾乎不再會進行調整。

為了降低頁面復雜度,我把編輯排序放在統一入口,點擊后,再進行操作。我給這個入口命名為管理。點擊管理,進入到管理模式,調整章節、單元的名稱和層級結構。

二、是實時保存同步,還是點擊確認按鈕保存同步?

1. 實時保存

實時保存就是用戶的每一步操作都會立即生效。比如一些標題的編輯,鼠標hover上去會展示輸入框,光標消失即保存成功。或者知乎編輯文章時,也會告訴你保存中。

實時保存相較于確認保存少一步操作路徑,每一步操作立即生效同步更新,相對來說效率較高。由于人們總是會忘記收尾工作,實時保存也避免了讓用戶承擔忘記點擊確認按鈕而使數據丟失的風險。

實時保存也有缺點,比如當用戶想要反悔撤銷的話,就會比較困難。一般會根據具體需求搭配撤銷按鈕、歷史版本等方式,給用戶一個反悔撤銷的機會。

2. 確認按鈕保存

用戶進行的一系列操作,都不會立即生效,而需點擊確認(保存等)按鈕后,所有操作才會生效。比如飛書管理后臺對于會議室預約規則的設置。默認是查看模式,修改字段進入編輯模式,展示取消、保存按鈕,點擊保存更新修改,取消則回到編輯前的狀態。

這種方式的好處是,減少用戶修改過程的心理壓力。用戶在修改過程中可以隨意調整,內容不會被同步,修改好后點擊確認按鈕統一保存,內容同步。

為什么用戶在編輯時會有心理壓力?重點就在于同步給誰,以及同步的內容是什么。

3. 用戶

內容修改后只同步給自己。

例如微信標簽管理,進入管理模式后,對于標簽的排序,刪除都實時保存更新,沒有確認按鈕。標簽修改后的結果只會同步給自己,而自己在管理標簽的過程已經知道了修改結果,如果增加確認按鈕倒顯得較為繁瑣。

內容修改后會同步給其他用戶。

例如飛書管理后臺對于會議室預約規則的設置,設置結果會影響其他用戶預約會議室,比如能不能約、幾點能約,所以同步設置結果就必須要謹慎一些。而多一步確認(保存)按鈕可以幫用戶再次確認自己的操作行為,讓同步結果更謹慎。

以上可以總結為,如果內容修改后只同步給自己,則實時保持更便捷。如果內容修改后會同步給其他用戶,則需考慮增加確認按鈕讓操作行為更謹慎。具體還需考慮內容本身。

4. 內容

如果內容對其他用戶影響不大,也可以使用實時更新。

比如飛書管理后臺對于會議室名稱的修改,修改后,光標移開即保存成功。會議室名稱對于用戶來說只有信息的傳遞,沒有功能上的制約,甚至也不影響用戶行為目標。可以思考下,當用戶想約會議室時,什么會影響用戶決策?比如位置-用戶會考慮距離是否合適、或者狀態-是否當前被占用等,但會議室名稱幾乎不會影響用戶預約決策。所以內容對用戶影響較小,使用實時更新。

編輯者對于內容的重視程度。

比如知乎內容發布后,二次編輯,需點擊保存更新才會同步給其他人。創作者寫文章耗費了自己的時間成本,好的內容可以幫創作者帶來流量和價值感,所以創作者會更重視文章內容的完整性。而實時同步編輯過程所展示的內容是不完整的,會影響讀者閱讀內容的感受。所以點擊保存更新,統一同步內容可以避免這些問題的發生。

三、我的方案

回到自己的產品上,老師對于章節的管理操作會同步給學生,調整結果會影響學生查看章節結構。作為學生,主要任務是完成章節或者單元下的學習活動。所以調整的內容并不影響學生完成學習任務,按照我們所總結的規則,內容對于同步者影響不大,可以使用實時更新。

再來看編輯者對于內容的重視程度。老師會在學期前開始備課,管理層級結構屬于備課環節,教學內容一般都是固定的,所以后期調整層級結構的頻率很低。操作行為低頻且優先級不高,內容固定,對于老師來說,重視程度一般。所以也可采用實時更新。

由于老師編輯章節或單元已有保存按鈕,如果管理模式還存在保存操作的話,對于編輯功能來說需 2 次保存才算是真的保存,理解成本過高。選擇實時保存方式更合適。

根據以上 3 點,我的方案選擇實時保存,實時更新。

最后

以上是我對于工作內容中關于管理模式的復盤思考,最終設計方案的產出還是需要結合自己產品的業務,在體驗和功能的權衡之下做出最合理的設計。

關于第三部分排序放在下次在寫….

本文由 @阿青 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

引導幫助設計:讓用戶順利進入下一交互層次的有效方法

杰睿

大部分產品中都含有一些引導幫助的功能,這些功能有什么作用呢?對于設計者來說,應該秉持怎樣的初心來設計呢?目前,引導幫助功能又有哪些常見的分類呢?帶著這些問題,我們一起走進這篇文章,看看作者為我們的分享。推薦相關人員閱讀與學習。

一、用戶怎么知道此功能的使用方式?

前幾天眼睛不太舒服,去醫院做了一個檢查(視疲勞導致)。

因為要走商保,所以需要使用社保卡,之前我記得社保結算都需要去人工窗口,我剛過去就被一個穿著紅馬褂的大媽攔住說自助機也可以用社保,要我掃她胸前掛的碼(可以快速到達電子社保二維碼界面),掃完她就開始幫我點擊操作。

她覺得我應該不會操作,所以讓我看一遍,其實這個操作并不難,只是因為我不知道自助機上可以用,自助機周圍也沒引導操作流程。而且她這種方式讓很多年紀大的人和外地過來看病的覺得你是個騙子,后面好幾個人都還是去了窗口。

在B端產品中也有很多類似問題,用戶不知道有這個功能、也不知道這個功能怎么使用,特別是一些數據類產品,專業性比較強。產品、技術都認為用戶和他們一樣都懂,實際上并不是,這個時候你需要提供一些邀請,引導用戶進行使用。

邀請就是引導用戶進行操作前的提醒和暗示,通常包括實時的提示信息和預期功能,以表明在當前界面或下個界面可以做什么,這是成功的交互式界面關鍵所在。

例如:飛書-我的空間,當鼠標停留在可編輯區域上時,就會實時地顯示邀請(復選框),這個例子的缺點是鼠標如果不處于相應區域上,就不會顯示邀請。

引導幫助在產品中的作用

另一種方案是任何時候都顯示邀請,例如:石墨文檔-我的桌面,復選框一直顯示。

引導幫助在產品中的作用

二、靜態邀請

靜態邀請就是通過直接在頁面上給出交互提示,可以讓用戶隨時看到期望的界面功能。

靜態邀請主要有兩種模式:引導操作邀請、漫游探索邀請。

1. 引導操作邀請

01 步驟引導

例如:華為云HECS服務器產品就給出1、2、3操作步驟引導幫助在產品中的作用

引導操作會占據頁面較大的空間,同時也會吸引用戶的眼球。所以在設計時需要思考一下,你希望引導用戶執行什么操作,用戶是否可以多次查看,這樣有利于設計出明晰的頁面和信息層。

02 白板引導

另一種引導操作邀請叫白板式引導。

意思很明確:現在只有一個空白頁面,需要引導用戶創建內容。

引導幫助在產品中的作用

引導幫助在產品中的作用

利用空白區域“變廢為寶”,如何對該區域應有的功能給出提示,是誘導用戶創建內容(填補空白)的有效方式。

2. 漫游探索邀請

與引導操作邀請關系密切的是漫游探索邀請。假設你重新設計了某個頁面并添加了一組全新的功能,怎樣才能保證用戶恰當地使用新頁面,同時發現新添加的功能呢?漫游邀請是向用戶介紹新功能最好的方法。

引導幫助在產品中的作用

最佳實踐:

  1. 漫游功能用戶可能不想用,所以需要有可選功能,也就是可以跳過或關閉;
  2. 漫游功能不是“創可貼”不要亂用,只有針對精心設計的界面使用才能發揮價值;
  3. 設計漫游的關鍵在于保持簡單,讓它容易開始也容易停止。漫游應該只是頁面本身的一個演示。脫離頁面的“教程”式漫游很難起到作用。

三、動態邀請

靜態邀請適合提示用戶當前界面中包含什么功能。然而,許多調查試驗表明,用戶經常不會閱讀指導說明性的文字。而在用戶交互過程中,在他們需要的時候提供邀請則是一種不錯的方式。動態邀請就是在用戶交互過程中的某個點上吸引用戶,并引導他們繼續下一步操作。

1. 懸停邀請:在鼠標懸停期間發出邀請

吸引用戶的一種方式是通過鼠標懸停來顯示邀請

引導幫助在產品中的作用

例如:飛書消息列表鼠標移入后, 背景變化的同時會有一個“勾”圖標來吸引用戶,鼠標移入上去后提示可以點擊完成,點擊后消息移除列表。

最佳實踐

  • 當操作沒有內容重要,而且希望界面整潔時,使用懸停邀請。
  • 在實現懸停邀請時,可以通過改變光標、改變背景和顯示提示條共同配合表明所邀請的操作。
  • 在交互的不同階段,盡量點綴一些用戶熟悉的元素,通過熟悉的概念引出新概念有助于用戶快速理解新功能。最常見的元素是按鈕、鏈接、下拉箭頭和眾所周知的圖標。
  • 通過距離表明邀請操作的目標對象。

2. 預期功能邀請:使用熟悉的事物引出新事物

唐納德·諾曼將這個術語引入到設計領域。最經典的例子是門把手,門把手的預期功能是可以抓握、扭轉或按壓。屏幕元素可感知的預期功能沒有物理屬性,不過,由于習慣、術語、圖形及一致性等原因,用戶能夠在某種程度上感覺到他們可以操作這些元素。

引導幫助在產品中的作用

引導幫助在產品中的作用

例如:第一張圖飛書文檔sheet頁“加號”圖標與第二張圖“三個點”圖標,就是一種預期功能邀請。用戶沒觸發之前就能猜到觸發后會是什么效果。

預期功能邀請之所以有效,是因為利用人們已知的習慣與認知引入交互,從而讓用戶順利完成一連串操作。

最佳實踐

  • 通過人們習以為常、司空見慣的概念來引出新的、不熟悉的交互方式。
  • 使用可感知的預期功能來給出邀請提示(例如,用向下的箭頭表示可以打開下拉菜單,而用向上的箭頭表示可以關閉菜單)
  • 把邀請安排在適當的上下文中,特別是要靠近交互的主體。

3. 推論邀請:用于交互期間

設計邀請時怎么才能猜測用戶的想法,也是一項重要挑戰。如果用戶下一步可能會執行多種操作,而事實上又不可能準確判斷用戶想法,那么面臨的困難就會比想象的大很多。

在google sketchup ( 3D)繪圖工具中,當鼠標點擊某個點后,進行第二個點連接時,會有多種可能性,這個時候系統也不確定用戶會怎樣連接,但會給出對應的提示,比如:端點、中點、背面、側面等點位來輔助用戶進行連接。

引導幫助在產品中的作用

例如:這種工作流場景個人覺得也算是一種,點擊“加號”右側會滑出面板,給出你可以添加的動作。

這種在交互期間以可見方式向用戶表明系統推斷出的用戶想法被稱為推論邀請。

4. 更多內容邀請:用于邀請用戶查看更多內容

圖片類型的更多邀請,例如:站酷相關推薦

引導幫助在產品中的作用

文字更多邀請,例如:QQ郵箱右側最近聯系人

引導幫助在產品中的作用

5. 邀請的優點

精心設計的應用能夠通過邀請體現出各自的細微差別,無論是靜態還是動態,都是引導用戶順利進入下一個交互層次的有效方法。

謝謝觀看!

作者:夜鶯YEAH;公眾號:夜鶯B端UX設計

本文由 @夜鶯YEAH 原創發布于人人都是產品經理,未經作者許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

交互設計探索:如何構建視頻便捷手勢模型,提升用戶體驗?

杰睿

在視頻播放器中,合理的手勢交互設計可以幫助用戶提升操作上的便捷性,從而實現更快捷的觸達。那么如果想在已有的手勢交互上實現設計升級,產品或設計一側可以怎么做?本篇文章里,作者針對手勢交互優化一事進行了解讀,一起來看。

一、前言

視頻播放器中承載著極其豐富的內容畫面和播控功能,尤其是在寸土寸金的移動端視頻播放器中,為使內容更沉浸消費,需盡可能克制界面中的功能元素/入口直接外露。基于此種場景下,合理的手勢設計不但可為界面“減負”,還可幫助用戶更快捷觸達功能、提升操控便捷性。

視頻場景中目前已有部分的常規單向手勢已被用戶廣泛接受并形成習慣認知,如「單擊 →暫停」、「雙擊→點贊」、「長按→快進」、「橫滑→導航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢。

視頻便捷手勢 交互設計探索

視頻便捷手勢 交互設計探索

那么如何在保留用戶對于常規通用手勢認知的基礎上,進一步對視頻場景中的手勢交互進行擴容升級?這也是我們接下來在手勢進階交互上的重點探索方向。

本次針對百度APP中的視頻播放器場景,為提升手勢操控效率,我們試圖將常規的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型,以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。

二、什么是「組合手勢」

「組合手勢」是基于常規手勢的組合擴展,其通常由兩種或兩種以上的常規基礎手勢所構成,若組合方式及使用場景得當,可助力用戶更便捷的觸達功能。

以前述的視頻場景常規手勢為例,其觸發機制一般可分為兩個階段:step1交互信號→step2執行任務,即用戶通過某一基礎手勢發出交互信號,系統收到信號確認后便可立即執行任務,但整個過程是線性的,手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。

視頻便捷手勢 交互設計探索

于是我們在現有常規手勢兩階段觸發機制的基礎上,嘗試引入「意圖識別」環節,并梳理出「組合手勢」的設計模型,以探索不同基礎手勢相互組合后的擴展可行性。

「組合手勢」觸發一般可分為三個階段:step1交互信號→step2意圖識別→step3執行任務,前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發路徑。

視頻便捷手勢 交互設計探索

由于「組合手勢」并不像常規手勢那樣早已被系統定義為可供直接調用的接口,因此,其差異化創新具有較大設計靈活度,尤其需根據具體的使用場景進行綜合考量。

三、「長按組合手勢」激活快捷菜單

1. 項目背景

百度APP視頻場景早期的播控功能較少,如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。

隨著后續視頻場景的功能建設日漸完善,我們便在基礎菜單面板中拓展了一行視頻菜單,專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項,菜單面板彈出后還需左滑才可露出后面的功能入口,因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發成本高。

視頻便捷手勢 交互設計探索

2. 競品調研及選型

通過對競品進行調研,我們發現競品均有使用長按手勢作為切入口以觸發相關播控功能、并歸納出“視頻播控觸發”目前主流的三種長按交互選型, 分別為:長按觸發獨立播控面板、長按觸發浮層播控選項、長按觸發特定播控功能。

視頻便捷手勢 交互設計探索

  • 選型A「長按觸發獨立播控面板」:通過長按手勢可激活從屏幕底部彈出的獨立播控面板,此方案擴展性較強,但對視頻沉浸觀感體驗有一定的打斷感;
  • 選型B「長按觸發浮層播控選項」:通過長按手勢可觸發置于視窗上層的浮層選項入口,一定程度上可延續視頻觀看的沉浸體驗,但浮層擴展性有限;
  • 選型C「長按觸發特定播控功能」:通過長按手勢觸發特定的某個播控功能(如長按“快進”),一定程度上可滿足此功能的重度用戶,但對于長按手勢的使用效率較低。

3. 設計方案

1)長按手勢交互擴容

針對目前視頻播控菜單存在的問題,經過和業務對上述三種長按交互選型方案進行綜合考量,最終決定聚焦于以方案“選型B”的「長按觸發浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置,并探索一套更便捷的觸發機制,以此對視頻場景中的播控菜單進行設計升級。

但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據,用戶對此功能的使用頻率高、并已形成較深的操控認知,若直接下線“快進”功能則會對用戶使用習慣產生較大影響,尤其是視頻場景的重度用戶。

那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢?是否有可能將“快進”和“快捷菜單”進行融合?這也是本次項目對于便捷手勢體驗的重要設計探索點。

基于此,我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義,通過「長按+滑選」的機制觸發快捷菜單功能項,以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為:

  • step1:以“長按手勢”創建一個新模式,即發出交互信號并喚出浮層菜單;
  • step2:若用戶未松開手指,則系統默認開始識別用戶意圖,是否有以“拖拽手勢”滑選至目標功能項以選擇功能;
  • step3:用戶滑選錨定至目標功能后,松手釋放即可完成最后的功能執行確認。

視頻便捷手勢 交互設計探索

  • 「長按+向上滑選」快捷觸發對應功能項;
  • 「長按+向下滑選」快捷觸發“快進”(一定程度上兼容老用戶對于此功能的使用習慣)。

視頻便捷手勢 交互設計探索

2)容錯性兼容

在設定「長按+滑選」組合手勢的同時,考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程,我們同時也支持點選的操作模式,即用戶長按后若未產生滑選行為便松手,則松手后依然可通過點選的方式觸發對應播控功能項。

視頻便捷手勢 交互設計探索

3)易用性打磨

差異化的創新設計形式在前期總會面臨質疑和挑戰,本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式,于是在DEMO開發完成后便進行了一次小范圍內的定性可用性測試,以預期在上線前可先收集一波體驗問題進行快速打磨優化。

我們根據測試目標、用戶類別、測試前序準備及測試步驟等環節提前擬好必要的測試腳本,并邀請了10+名不同年齡段的目標用戶進行訪談測試。

視頻便捷手勢 交互設計探索

測試訪談的過程中,被測用戶在進行1至2次嘗試操作之后,均可掌握如何使用「長按+滑選」的組合手勢,這也為我們增添了不少信心。

同時,我們通過觀察用戶操作行為及用戶主動反饋,發現仍有部分易用性細節可進一步打磨優化。

① 擴展觸發熱區

考慮到單手握持手機的使用場景,可盡可能擴大定義長按手勢的觸發熱區,屏幕中除頂/底bar框架區以及本身就自帶長按事件的按鈕入口之外,其它大面積區域熱區均可支持長按觸發快捷菜單,以降低觸發難度、提升易用性。

視頻便捷手勢 交互設計探索

② 支持跟手觸發

長按后浮出的快捷功能項,其浮出位置支持跟隨手指的縱向觸發位置而浮出,可減少手指在屏幕上的位移距離、操控更便捷。

視頻便捷手勢 交互設計探索

③ 實時提示及響應反饋

靈活判斷當前手勢觸控狀態(如滑入選擇 / 松手觸發),在界面中即時給出相對應的引導提示或振感反饋,以幫助用戶快速適應新的手勢觸發機制。

視頻便捷手勢 交互設計探索

4. 方案上線及驗證

以AB實驗對本次設計方案進行定量測試驗證:

  • 「對照組」效果:長按觸發“快進”(各播控功能入口仍歸置于基礎菜單面板之中);
  • 「實驗組」效果:長按觸發“快捷菜單”選項(支持滑選和點選模式)。

小流量實驗上線后,經過近半個月的觀察,大盤指標穩定、播放完成率等滿意度指標穩步提升。

「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升,說明用戶對部分高頻功能的確有很強的快捷觸發訴求。

「實驗組」的“快進”雖多了一步觸發步長,實驗前期“快進”使用率不及「對照組」,但隨著用戶對于「長按+滑選」手勢整體的使用占比持續走高,通過滑選觸發“快進”的操作習慣也快速被培養起來,對于用戶來說,長按快捷菜單帶來的整體收益是大于折損的。

視頻便捷手勢 交互設計探索

5. 二期擴展方案

隨著長按快捷菜單的上線推全,長按手勢的滲透率也持續走高,用戶逐漸對視頻場景更多的播控功能有了長按觸發的訴求,于是我們對長按菜單進行了二期的設計升級,在長按浮層最右側新增“更多”快捷入口以承接視頻場景所有的播控功能,用戶通過長按后的可選播控項增多,播控功能整體的使用量得到進一步提升。

視頻便捷手勢 交互設計探索

四、「組合手勢」拓展探索

手勢交互是用戶在現實世界行為的映射,無論是基礎手勢還是組合類高級手勢,都須符合用戶認知習慣、并融入具體的使用場景中進行設計。

以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐,我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。

1. 「右滑返回手勢」激活“小窗播放”

“小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續消費。

基于用戶的此種操控意圖,我們以“右滑返回手勢”發出交互信號而觸發浮出小窗入口,隨后系統根據用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖,若有短距上滑拖拽行為,松手釋放即可快捷激活視頻小窗,以提升觀看體驗的連續性。

視頻便捷手勢 交互設計探索

2. 「雙指手勢」激活“滿屏播放”

“雙指拖拽手勢”可拖拽并清屏視窗畫面,以此手勢發出交互信號,若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為,則松手釋放即可快捷激活“滿屏播放”,以滿足更沉浸視頻瀏覽體驗。

視頻便捷手勢 交互設計探索

五、結語

便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑,從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發,后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。

作者:百度APP用戶體驗

來源公眾號:百度MEUX(ID:baidumeux),百度移動生態用戶體驗設計中心,負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。

本文由人人都是產品經理合作媒體 @百度MEUX 授權發布,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

按鈕設計的心理機制:打造用戶喜愛的交互方式

杰睿

按鈕是產品中十分常見的交互元素之一,好的按鈕設計可以很大程度地提升用戶體驗。那么,怎么打造出符合用戶需求、深受用戶喜愛的優秀按鈕?這篇文章里,作者對按鈕UX設計進行了拆解分析,一起來看一下。

一、引言

在數字產品中,按鈕是最常用的交互元素之一。一個好的按鈕設計可以提高用戶體驗和產品的使用率。

本文將探討一些關于按鈕UX設計的方法,包括明確按鈕功能、選擇合適的顏色、確定按鈕大小、添加標簽和描述、考慮交互方式、測試和優化等。

通過綜合考慮這些因素,我們可以打造出符合用戶需求的優秀按鈕,提升產品的用戶體驗和競爭力。

二、按鈕的基本要素

1. 按鈕的定義和功能

按鈕是一種用戶界面元素,用于觸發特定的操作或行為。

它可以是文本、圖像或交互式元素,通常位于頁面的底部或頂部,以便于用戶快速訪問。

2. 按鈕的類型和分類

根據不同的用途和設計風格,按鈕可以分為多種類型和分類,例如:

  • 確認按鈕:用于確認用戶的輸入或操作,通常為綠色或藍色。
  • 取消按鈕:用于取消用戶的輸入或操作,通常為紅色或灰色。
  • 導航按鈕:用于跳轉到其他頁面或頁面的一部分,通常為下拉箭頭或回車鍵。
  • 搜索按鈕:用于在網站或應用程序中搜索內容,通常為放大鏡圖標。
  • 提交按鈕:用于提交表單數據或執行其他操作,通常為“提交”或“完成”按鈕。
  • 重置按鈕:用于重置表單或應用程序的設置,通常為“重置”或“恢復默認值”按鈕。

以上僅是一些常見的按鈕類型和分類,實際上還有很多其他的類型和分類。在設計按鈕時,需要根據具體的場景和目的選擇合適的類型和分類,并結合用戶體驗和產品需求進行優化。

三、按鈕的布局和位置

1. 按鈕的位置和大小

按鈕的位置和大小對于用戶體驗和產品可用性非常重要。一般來說,按鈕應該位于用戶視線的中心位置,以便于用戶快速訪問。同時,按鈕的大小也應該適中,不要過大或過小,以免影響用戶的操作。

在實際設計中,可以通過以下幾種方式來確定按鈕的位置和大小:

  • 根據頁面布局來確定按鈕的位置和大小,通常將按鈕放置在頁面的中央位置,并根據頁面元素的大小和間距來進行調整。
  • 根據用戶行為來確定按鈕的位置和大小,例如,將常用的按鈕放在頁面的頂部或底部,以便于用戶快速訪問。
  • 根據設備屏幕大小來確定按鈕的位置和大小,例如,在移動設備上,可以將按鈕放在屏幕的底部或頂部,以便于用戶單手操作。

2. 按鈕的布局方式和排版規則

除了位置和大小之外,按鈕的布局方式和排版規則也非常重要。合理的布局方式和排版規則可以提高用戶的使用體驗和產品的可用性。以下是一些常見的按鈕布局方式和排版規則:

  • 水平布局:將多個按鈕橫向排列在一起,適用于需要同時操作多個功能的場景。
  • 垂直布局:將多個按鈕縱向排列在一起,適用于需要按順序操作多個功能的場景。
  • 對齊方式:將多個按鈕按照左對齊、右對齊、居中對齊等方式進行排列,以便于用戶快速找到目標按鈕。
  • 間距規則:通過調整按鈕之間的間距來增加可讀性和可操作性,例如,可以設置相鄰按鈕之間的間距為20像素。
  • 文字排版規則:通過調整按鈕文字的大小、顏色、字體等方式來提高可讀性和美觀度。

四、按鈕的顏色和樣式

1. 按鈕顏色的選擇原則

按鈕的顏色對于用戶體驗和產品可用性非常重要。一般來說,按鈕的顏色應該與產品的品牌色或主題色相匹配,以便于用戶識別和記憶。同時,按鈕的顏色也應該具有明顯的對比度,以便于用戶在不同的背景下快速找到目標按鈕。

以下是一些常見的按鈕顏色選擇原則:

  • 單色按鈕:使用單一的顏色作為按鈕背景,適用于簡單明了的場景。
  • 漸變色按鈕:使用漸變色作為按鈕背景,可以增加視覺效果和層次感。
  • 反色按鈕:使用與背景形成鮮明對比的顏色作為按鈕背景,可以提高可讀性和可操作性。
  • 白色按鈕:使用白色作為按鈕背景,適用于簡潔明了的場景。

2. 按鈕樣式的設計要點

除了顏色之外,按鈕的樣式設計也是非常重要的。合理的樣式設計可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕樣式設計要點:

  • 圓角按鈕:將按鈕的邊角設置為圓角,可以增加界面的柔和感和親和力。
  • 陰影按鈕:在按鈕周圍添加陰影效果,可以增加立體感和層次感。
  • 描邊按鈕:在按鈕周圍添加描邊效果,可以突出按鈕的輪廓和形狀。
  • 圖標按鈕:在按鈕上添加圖標或圖形元素,可以增加視覺效果和表達意義。
  • 放大鏡按鈕:在按鈕上添加放大鏡效果,可以增加交互性和趣味性。

五、按鈕的文字和標簽

1. 按鈕文字的設計原則

按鈕文字的設計對于用戶體驗和產品可用性非常重要。一般來說,按鈕文字應該簡潔明了、易于理解和記憶,同時要符合產品的品牌形象和主題風格。

以下是一些常見的按鈕文字設計原則:

  • 簡短明了:按鈕文字應該簡短明了,不要過于冗長,以便于用戶快速理解和操作。
  • 可讀性強:按鈕文字應該具有較強的可讀性,字體大小適中,顏色鮮艷,避免使用難以辨認的字體或顏色。
  • 表達意義明確:按鈕文字應該能夠準確地表達按鈕的功能和意義,避免產生歧義或誤解。
  • 與品牌形象相符:按鈕文字應該與產品的品牌形象相符,符合產品的定位和風格。

2. 按鈕標簽的設計要點

除了文字之外,按鈕標簽也是非常重要的。合理的標簽設計可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕標簽設計要點:

  • 標簽內容簡潔明了:標簽內容應該簡潔明了,不要過于復雜,以便于用戶快速理解和操作。
  • 標簽位置合理:標簽的位置應該合理,不要遮擋按鈕的主要內容,也不要過于靠近邊緣,以免誤觸。
  • 標簽樣式統一:標簽的樣式應該統一,不要出現多種不同的字體、顏色或樣式,以保持界面的整潔和一致性。
  • 標簽語義明確:標簽的語義應該明確,不要產生歧義或誤解,以便于用戶理解和操作。

六、按鈕的交互設計

1. 按鈕的點擊效果和反饋機制

按鈕的交互設計對于用戶體驗和產品可用性非常重要。合理的點擊效果和反饋機制可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕點擊效果和反饋機制:

  • 點擊效果:按鈕的點擊效果應該明顯而流暢,可以使用淡入淡出、彈跳、放大縮小等效果,以增加用戶的互動性和趣味性。
  • 反饋機制:按鈕的反饋機制應該及時、準確地告訴用戶操作的結果,可以使用聲音、震動、提示框等方式進行反饋,以增強用戶的感知和滿意度。
  • 錯誤提示:當按鈕操作出現錯誤時,應該及時給出錯誤提示,以避免用戶產生困惑或不滿。

2. 按鈕的動畫效果和過渡效果

除了點擊效果之外,按鈕的動畫效果和過渡效果也可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕動畫效果和過渡效果:

  • 漸變色:將按鈕的背景顏色漸變為透明或半透明,可以讓用戶感覺到按鈕正在被點擊或激活。
  • 放大縮小:在按鈕被點擊時,可以將按鈕的大小放大或縮小,以增加視覺效果和趣味性。
  • 旋轉:在按鈕被點擊時,可以將按鈕進行旋轉,以增加動態感和趣味性。
  • 彈出框:在按鈕被點擊時,可以彈出一個提示框或確認框,以增加用戶的確認感和安全感。

七、按鈕的測試和優化

1. 按鈕測試的方法和流程

按鈕的測試和優化對于提高產品的用戶體驗和可用性非常重要。合理的測試和優化策略可以發現并解決產品中存在的問題,提高產品的品質和用戶滿意度。

以下是一些常見的按鈕測試方法和流程:

  • 功能測試:對按鈕的功能進行全面的測試,包括點擊效果、反饋機制、錯誤提示等。可以使用手動測試和自動化測試相結合的方式進行測試。
  • 兼容性測試:對按鈕在不同設備、不同瀏覽器、不同操作系統下的兼容性進行測試,以確保產品能夠在各種環境下正常運行。
  • 性能測試:對按鈕的性能進行測試,包括響應時間、加載速度、資源占用等,以確保產品能夠快速響應用戶操作。

2. 按鈕優化的策略和技巧

除了測試之外,按鈕優化也是提高產品用戶體驗和可用性的重要手段。以下是一些常見的按鈕優化策略和技巧:

  • 簡化設計:將按鈕的設計簡化到最少,只保留必要的信息和功能,以便于用戶快速理解和操作。
  • 提供反饋:為按鈕提供及時、準確的反饋,讓用戶知道他們的操作是否成功,以增強用戶的感知和滿意度。
  • 增加互動性:通過動畫效果、過渡效果等方式增加按鈕的互動性,以提高用戶的趣味性和參與度。
  • 考慮用戶習慣:根據用戶的使用習慣和心理特點,合理設計按鈕的位置、大小、顏色等,以提高用戶的使用體驗和便利性。

八、總結

按鈕UX設計對于提高產品的用戶體驗和可用性非常重要。合理的按鈕設計可以增加用戶的參與度、趣味性和便利性,從而提高用戶對產品的滿意度和忠誠度。

在進行按鈕UX設計時,需要考慮按鈕的位置、大小、顏色、樣式、功能、反饋機制等多個方面,以確保產品能夠滿足用戶的需求和期望。同時,還需要進行測試和優化,發現并解決產品中存在的問題,提高產品的品質和用戶滿意度。因此,按鈕UX設計對于現代產品開發和用戶體驗設計都具有重要的意義和必要性。

本文由 @MO魚山寨 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

在設計時,圓角與直角該如何使用?

杰睿

將大東西進行拆解為小的東西,逐步解決問題,解決了小問題,大問題也解決了,在產品設計中也是一樣。在面臨圓角直角的選擇時,我們來看看作者如何做選擇

在當今數字化時代,UI設計已成為創造引人入勝的用戶體驗的關鍵要素。一個成功的UI設計不僅需要技術知識,還需要對細微之處的深刻理解。本文將探討兩種基礎但極為重要的圖形元素:圓角和直角。它們如何影響用戶的感知和互動,如何在設計中恰到好處地應用它們,以及它們在實際案例中的運用。

一、圓角與直角的特性

在介紹“圓角與直角”前,先給大家分享一個心理效應“bouba/kiki效應。”

這個效應最早由德國心理學家沃爾夫岡·科勒在1929年提出。

  • “kiki”這個詞的尖銳、快速的音調與尖銳的星狀圖案相呼應
  • “bouba”這個詞的圓潤、流暢的聲音則與圓潤的云狀圖案相呼應

最早在1929年沃爾夫岡·科勒做了一個實驗,該實驗展示了兩種形式,并詢問讀者哪種形狀被稱為“takete”,哪種形狀被稱為“maluma”。盡管沒有明確說明,科勒暗示人們強烈傾向于將鋸齒狀形狀與“takete”配對,將圓形形狀與“maluma”配對。

在2001年的另一組實驗中拉馬錢德蘭和 愛德華·哈伯德使用“kiki”和“bouba”這兩個詞重復了科勒的實驗,詢問美國大學本科生和印度講泰米爾語的人,“這些形狀中哪個是bouba,哪個是kiki?” 在兩組中,95% 到 98% 的人選擇彎曲的形狀為“bouba”,鋸齒狀的形狀為“kiki”,這表明人類大腦以某種方式一致地將抽象含義附加到形狀和聲音上。

這個效應主要講述的是“人腦如何以一致的方式將抽象含義附加到視覺形狀和語音上”

那么我們不妨擴展一下,把這這種效應延展到角色上就拿我們最熟悉的“喜羊羊與灰太狼”舉例,我們只聽名字“羊”和“狼”就可以潛意識的認為“喜羊羊”就相當于“bouba”、“灰太狼”相當于“kiki”,“羊族”一聽就是溫和的族群,而“狼族”就是較為兇猛的族群。那么我們可以再回顧一下,“可可愛愛的卡通人物”大部分就是以圓形為基礎“小黃人、葫蘆娃、維尼熊、大頭兒子等”,“超級大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”,這就是“將抽象含義附加到視覺形狀和語音上”。

如果聽完這些你還是不懂,那么最簡單的例子一個堪比吳彥祖的帥哥叫“文軒沒有大腦袋”,那當你見到他時一定會去觀察這個人到底有沒有“大腦袋”

那么回歸正題,我們將“圓角與直角”代入這種思考方式并將其進行UI思考,就可以大致了解“圓角與直角”大致的特性

1. 圓角

1)定義

  • 圓角指的是元素邊角被設計為圓滑的形狀,而非尖銳的直角。
  • 它通常通過設定一個半徑來實現,半徑越大,角越圓滑。

2)特性

  • 視覺友好:「圓角被認為更溫和、更友好,因為它們缺乏尖銳的邊緣,給人一種安全和柔和的感覺。」
  • 現代感:「在現代設計中,圓角被廣泛使用,它們通常與新穎、時尚的設計理念相關聯。」
  • 提高注意力聚焦:「圓角可以引導用戶的視線流動,幫助減少視覺干擾,使用戶更容易聚焦于界面的關鍵部分。」
  • 適用性:「在移動應用和網站設計中尤其流行,特別是在按鈕、輸入框、卡片和其他交互元素中。」

2. 直角

1)定義

  • 直角是指元素的邊角以90度角的形式呈現。
  • 它是最基本的形狀之一,在許多傳統和經典的設計中常見。

2)特性

  • 專業感:「直角通常給人一種更加正式、專業的印象。」
  • 清晰界定:「直角在視覺上提供了清晰的界定,使元素的邊界更加明確,有助于信息的組織和分隔。」
  • 傳統感:「在某些情況下,直角與傳統、經典的設計風格相聯系。」
  • 適用性:「直角在各種應用中都很常見,尤其是在需要傳達清晰、直接信息的界面中,如表格、列表和布局結構。」

那么回想一下“bouba/kiki效應”,今后在設計中當我們看到某個產品大量的使用“直角/圓角”我們就可以分辨這個產品的大致風格,同樣字體搭配也是相似的效果,通過不同的banner可以大致看出運營活動的大致目的。

二、圓角、直角的使用場景

在實際的使用場景中,我們就從最常見的“按鈕、卡片”兩個場景來舉例分析“圓角、直角”的作用。

1. 按鈕

我們首先具體聚焦在UI設計中對于“按鈕”這一元素的圓角和直角的使用:

1)圓角按鈕

  • 用戶友好性:「圓角按鈕通常看起來更加友好和容易接近,它們給用戶一種溫饌和舒適的感覺,適合于鼓勵用戶交互的場景。」
  • 移動設備適應性:「在移動設備上,由于屏幕尺寸較小,圓角按鈕更易于觸控,尤其是屏幕邊緣的按鈕。」
  • 減少視覺沖擊:「圓角可以減少視覺上的尖銳感,使界面看起來更加柔和,適合于尋求輕松視覺體驗的應用。」

2)直角按鈕

  • 專業和正式感:「直角按鈕給人一種更加正式和專業的感覺,在一些傳統的或者保守的設計風格中,直角按鈕更為常見,例如一些服裝品牌(Yohji Yamamoto、CONFIRMED)、學校(各學校官方網站)等。」
  • 內容和功能區分:「直角按鈕在視覺上更加突出,能夠有效地區分不同的功能和內容,尤其是在需要用戶做出明確決策的界面上。」

那么這里我們會有一個疑問,那就是“移動設備適應性”,這里我們可能會想到“直角按鈕”的面積看起來要比“圓角按鈕”的觸控面積更大,那為什么“圓角按鈕”更易于觸控呢?

我們從兩個方面來解答

1)觸控面積

  • 實際上,無論是圓角還是直角,按鈕的觸控面積通常是由其外接矩形決定的。這意味著,即使按鈕的視覺元素有圓角,觸控面積實際上仍然包括了這些圓角區域。
  • 在實際應用中,操作系統或應用平臺通常會為按鈕元素提供一個默認的“觸控目標大小”,這個大小是為了確保良好的觸控體驗而設計的,無論按鈕的視覺樣式如何。

2)視覺感知與觸控體驗

  • 圓角按鈕在視覺上看起來更加柔和和親切,這可能使得用戶更傾向于觸摸和與之交互。這種心理效應可能會導致用戶覺得圓角按鈕更“容易”觸控,即使實際的觸控面積與直角按鈕相同。
  • 在移動設備上,圓角按鈕的另一個優勢是它們的形狀與設備的圓潤邊緣相協調,這在視覺上創造了一種和諧感,可能會無形中增加用戶的觸控舒適度。

通過這兩方面,我們是不是又能聯想到“bouba/kiki效應”,介于“圓角本身的屬性”我們會更容易去點擊他。

2. 卡片

對于卡片我們還是先對比,在進行詳細的分析。

1)圓角卡片

  • 視覺風格:「圓角卡片提供了一種柔和、友好的視覺感受。它們的圓潤邊緣可以減少視覺沖擊,創造出更輕松和親切的外觀。」
  • 用戶體驗:「圓角的設計通常被認為更加現代和用戶友好。它們可以使界面看起來更輕松、更易于接近,這在提高用戶的互動意愿方面很有效。」
  • 適用場景:「圓角卡片通常用于需要提供溫馨、輕松體驗的應用中,例如社交媒體、娛樂內容展示、個人博客,或者任何強調用戶友好和易用性的設計。」
  • 功能效果:「在功能上,圓角卡片可以幫助區分不同的內容模塊,同時保持界面的整體一致性和流暢性。」

2)直角卡片

  • 視覺風格:「直角卡片提供了一種清晰、專業的視覺效果。它們的直線和銳角創造了一種結構化和有序的外觀。」
  • 用戶體驗:「直角設計傳達了一種正式和權威的感覺,適合于需要展示專業性和準確性的應用。」
  • 適用場景:「直角卡片通常用于更正式或專業的環境,如企業網站、在線商務平臺、教育平臺,或任何需要清晰展示大量信息的界面。」
  • 功能效果:「直角卡片在功能上有助于清楚地區分和組織內容,特別是在數據密集或信息密集的應用中。」

這里更要值得注意的一點是視覺效果方面的“圓角對于用戶的視覺效果要強于直角”,巴羅神經學研究所對角落進行的科學研究發現,“角落的感知顯著性隨角落的角度呈線性變化。銳角比淺角產生更強的虛幻顯著性”,這里角越尖,看起來就越亮。角落越亮,就越難看。

通過上述對比我們可以得到一個結論“圓角比直角更親和”,那么可以接著推論“圓角卡片更容易使用戶接受卡片內信息”這是因為圓角向內指向矩形的中心。這會將焦點放在矩形內的內容上。當兩個矩形彼此相鄰時,還可以輕松查看哪條邊屬于哪個矩形。尖角向外,從而減少對矩形內部內容的關注。當兩個矩形彼此相鄰時,它們還使得很難判斷兩條邊屬于哪個矩形。這是因為每個矩形邊都是一條直線。圓角矩形的邊是獨特的,因為線條朝著它所屬的矩形彎曲。

三、案例分析

那么對于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂”這兩個產品來分析看一下這兩個產品對于“直角、圓角”的應用。

1. CONFIRMED

CONFIRMED(Adidas旗下網站,這里懂球鞋的朋友我們可以把它理解為Nike的SNKRS)

作為Adidas旗下產品發售平臺,CONFIRMED更多的是發售一些潮流類的服飾最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服飾,這個應用程序旨在為Adidas的高需求和限量產品提供一個更加公平和直接的購買渠道,通常涵蓋了品牌與設計師和藝術家的合作款,以及特別版的運動鞋。

那么我們從“產品定位、用戶群體、主要功能流程”來分析一下

1)產品定位

  • 獨家發售平臺:「CONFIRMED 專注于提供 Adidas 的獨家發售和限量版產品,特別是鞋類和高端服裝。它的目標是成為品牌與其最忠實粉絲之間的直接連接點」
  • 品牌營銷工具:「通過這個平臺,Adidas 能夠加強其品牌形象,特別是在時尚和高端運動裝備領域。CONFIRMED 作為一個專門平臺,也強化了 Adidas 在潮流和限量產品市場中的地位。」
  • 市場分析和消費者洞察:「CONFIRMED 還可能被用作市場研究工具,通過分析用戶行為和購買模式來更好地理解目標市場。」

2)用戶群體

  • 潮流愛好者:「對最新潮流和設計保持關注的消費者,他們追求限量版、獨家合作系列。」
  • Adidas 忠實粉絲:「品牌的忠實支持者,對于品牌的新產品和特別發售保持高度興趣。」
  • 運動鞋收藏家:「對于限量版運動鞋有收藏價值的消費者,這些人往往愿意為獨特和罕見的設計支付高價。」

3)主要功能流程

  • 產品預覽和信息:「用戶可以在應用程序中瀏覽即將發售的產品,并獲取詳細信息,如價格、設計特點、發售日期等。」
  • 注冊和參與抽簽:「對于感興趣的產品,用戶需要在特定時間內注冊參與抽簽。這通常涉及填寫個人信息和選擇購買尺碼等。」
  • 抽簽結果通知:「抽簽結束后,用戶會收到是否中簽的通知。如果中簽,用戶將有機會購買這些限量產品。」
  • 購買和支付:「中簽用戶可以在應用程序內完成購買流程,包括支付和選擇配送選項。」
  • 社區互動和內容:「CONFIRMED 還可能提供與品牌相關的內容,如設計師訪談、品牌故事等,以增強用戶參與和品牌忠誠度。」

這里我們先從“CONFIRMED”卡片元素分析(本文只講述的直角卡片的用途,不過多講述App功能)

每款產品可以在一個直角卡片中展示,其中包括產品圖片、名稱和一些基本信息。這里在App的“首頁、發售信息、會員權益”這三個模塊最為突出,這種布局有助于用戶快速瀏覽和識別不同的產品

4)功能展示

這里“CONFIRMED”不同的卡片可以承載不同的功能,如顯示即將發售的產品、已經發售的產品、品牌故事等,幫助用戶快速定位他們感興趣的內容。這里使用通過卡片元素的方式來詳細展示產品,會使整個產品的調性保持一致,大卡片的元素傳遞給觀眾的瀏覽體驗會更直觀的感受產品(這里會發現一個很有趣的細節,貌似好的國外、跨境電商的App都會采用這些大的直角卡片)

接下來我們就講述關于“CONFIRMED”按鈕元素使用的分析:

5)突出的功能

直角按鈕通常用于突出最重要的操作,例如“購買”、“注冊抽簽”或“查看詳情”。這些按鈕因其鮮明的邊界和直接的設計而容易被用戶注意到。

6)風格統一

使用直角按鈕可以與應用中其他直角設計元素(如卡片)保持視覺一致性,為用戶提供一致且簡潔的視覺體驗。

7)視覺引導

這些按鈕通常配有“CONFIRMED”的顏色(藍色),用于引導用戶的注意力,幫助他們快速識別應用程序中的不同功能。

這里我們可以看到“直角卡片”“直角按鈕”在 CONFIRMED 應用中的應用可能主要體現在其用戶界面的設計上,通過清晰、有序的布局和直觀的用戶交互,提升用戶的體驗。

2. 汽水音樂

提到“汽水音樂”大家都不陌生,前段是時間各大“rapper、流行歌手”發歌都在汽水,這個App是可以和抖音聯動的,所以播放音樂的模式沒有采用大家常見的“點歌、切歌”操作,而是換成隨機曲子和“抖音”向下滑動切換一樣,這樣既新穎又能容易使用戶養成操作習慣,不至于一下子新的交互方式無法適應。那么我們同樣從“產品定位、用戶群體、主要功能來分析”

1)產品定位

  • 汽水音樂是一款音樂流媒體應用,旨在與主要競爭對手如騰訊音樂和網易云音樂抗衡。
  • 它不僅是一款單純的音樂播放軟件,還與抖音緊密結合,使得用戶可以在兩個平臺之間無縫切換音樂播放列表,顯現出對社交媒體和音樂流的綜合運用。

2)用戶群體

  • 汽水音樂的主要用戶群體是中國市場上的年輕用戶,尤其是那些已經使用抖音并尋求更豐富音樂體驗的用戶。
  • 考慮到字節跳動在短視頻領域的強大影響力,汽水音樂會吸引那些對新興、流行音樂以及個性化推薦感興趣的年輕群體。

3)主要功能流程

  • 個性推薦:「這里“汽水音樂”通過算法推薦“個性電臺”、“歌單推薦”、“3個榜單”」
  • 與社交媒體的整合:「能夠與用戶的抖音賬號同步,提供跨平臺的音樂體驗。用戶可以在抖音中發現音樂,并在汽水音樂中繼續播放,反之亦然。」
  • 播放:「汽水音樂的播放方式與抖音同步營造區分于其他音樂App不同的交互體驗」

那么我們從卡片開始分析,卡片主要應用在“歌曲、專輯”、“播放列表”、“歌單推薦”、“音樂盲盒”

那么他們起到的作用分別是

  • 提高用戶體驗:「圓角卡片的設計通常比直角設計更柔和、更易于接受。這種設計能夠減少視覺疲勞,使應用界面看起來更加友好和現代化。」
  • 增強視覺吸引力:「圓角卡片因其流線型的外觀,在視覺上更加吸引用戶。這有助于提升用戶對應用的整體印象和興趣。」
  • 組織信息:「圓角卡片可以有效地將信息分組,如將不同的歌曲、專輯、播放列表等內容區分開來,使得用戶瀏覽和選擇時更加直觀和方便。」
  • 提升操作便捷性:「在觸摸屏上,圓角卡片可以提供更好的觸摸目標,使得用戶在進行選擇和導航時更加方便。」
  • 增強內容的層次感:「圓角卡片可以通過陰影、邊框或顏色的變化,為界面添加層次感,使得內容更加突出和易于閱讀。」
  • 提升品牌形象:「現代的界面設計往往傾向于使用圓角元素,使用這種設計可以使應用看起來更加時尚,從而提升品牌形象。」
  • 圓角卡片在提升用戶體驗、美化界面、優化信息展示和操作便利性等方面發揮著重要作用。這些設計元素有助于提高應用的整體吸引力和用戶的使用滿意度。

“圓角按鈕”對于“汽水音樂”的作用有:

  • 視覺焦點:「圓角按鈕可以作為視覺焦點,吸引用戶的注意力,特別是對于重要的功能,如播放按鈕或搜索按鈕。」
  • 界面美觀性:「圓角按鈕增加了界面的美觀性,與整體設計風格協調一致,提升了應用的整體視覺效果。」
  • 一致性和標準化:「在應用中使用標準化的圓角按鈕可以提高界面的一致性,使用戶更容易理解和使用不同的功能。」

其實通過對比,我們會發現“圓角”在社交、音樂等偏娛樂方向采用的更加多,因為這些產品屬性需要“產品與用戶”、“用戶與用戶”之間拉近距離,圓角不僅更容易我們的眼睛處理,而且還使信息更容易處理,圓角很有吸引力。那么“直角”就偏向專業領域、正式的場合以及一些小眾的產品。

四、總結

了解并應用這些元素的特性,不僅能夠提升設計的美觀性,還能夠在更深層次上與用戶產生共鳴。作為UI設計師,深入理解圓角和直角的影響,將使我們能夠更精確地傳達我們想要表達的信息,在了解簡單的形狀如何影響感知后,我們就可以有目的地進行設計,將每一個微小的視覺元素加在一起,形成用戶潛意識中感知的一致、獨特的品牌個性。

本文由 @文軒沒有大腦袋 原創發布于人人都是產品經理,未經授權,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

B端拖動排序的多種場景及交互

杰睿

排序在B端和C端產品中都比較常見,隨著用戶對產品使用的易用性提高,排序在產品交互中也在變化。本文分享B端拖動排序的多種場景及交互,希望對你有所啟發。

很久沒有更新B端產品相關的文章了,近期工作項目中做了很多新需求,接觸了更多業務,也學到了一些新的交互,后續將會根據我在實際工作項目中遇到的需求展開總結。

B端產品設計具有較高的業務屬性,所以對于ui設計師而言也需要有較強的業務知識,在完全理解需求后,再針對業務場景、用戶體驗、交互、布局合理、易用性等多維度展開設計。

這一期主要分享關于B端產品中拖動排序功能。

排序在B端和C端產品中都比較常見,前期排序有通過點擊上下箭頭排序,但是這樣的交互易用性較差,隨著用戶對產品使用的易用性提高,這種排序方式在產品交互中已經漸漸的被舍棄。

目前對于排序功能,使用更多的是通過拖動排序,通過選中數據后長按鼠標右鍵,上下拖動來完成數據的排序。

一、拖動排序的多種組件和交互

在B端產品中,我目前接觸的拖動排序的組件包含以下兩個大類:

  1. 一級目錄常規排序(非樹結構)
  2. 樹組件多層級排序

對于分類2【樹組件多層級排序】又包含兩個小類:

  1. 同層級排序(橫線高亮顯示即將放的位置)
  2. 跨層級排序

對于小分類【跨層級排序】又可以細分為四個場景:

  1. 父級未展開時:拖動到父級、父級整行高亮
  2. 父級未展開時:拖動長按停留在父級時,父級自動展開子級
  3. 父級已展開時:拖動到子級時,父級整行高亮,拖動到的位置出現高亮橫線
  4. 父級已展開時:拖動到子級文件夾時,父級不需要高亮,子級文件夾目錄整行高亮(子級已展開和未展開的交互與父級同理)

二、拖動排序場景和交互實操

上面已經總結了排序的組件和場景,下面我們就一起來看看不同組件在不同場景下的具體交互,通過實際項目設計詳細介紹拖動排序的功能。

1. 一級目錄常規排序(非樹結構)

數據默認展示類似列表數據一樣,平鋪左對齊排版,當拖動排序時,鼠標移動到需要排序的數據行,長按鼠標右鍵并拖動數據上下移動,被拖動的數據原位置置灰(也可以直接消失)。

同時,被拖動的數據跟著鼠標走,移動到其它位置時,在將要放下的位置出現藍色高亮分割線(還可以做到所有數據實時變化位置效果)這樣能讓用戶更加直觀地看到數據位置的變化。

此類需求一般是針對一級數據排序,數據結構比較簡單,沒有文件夾多級樹狀結構,下面列舉幾個工作中遇到的需求場景,以及分享幾個其它產品中遇到的交互,便于大家理解。

由于B端產品具保密性,所以下面分享的截圖非工作實際數據,大家只要明白需求場景和交互即可。

需求場景1:產品業務中有很多的表單,表單中的字段順序在不同企業中不同,應該如何設計呢?

在設計時,可以將表單所有的字段羅列出來,然后用戶通過自定義排序字段即可,這里的交互就可以直接采用上下拖動排序。

需求場景2:飛書中有多個應用,對于每個用戶而言,自己所關注的應用不同,優先級不同,該如何設計?

同理,飛書也是對用戶個人的應該設計了拖動排序功能,可以根據自己關注的應該排序應該的位置,從而更快的找到自己常用的應用,提高工作效率。

無論是對于列表數據還是卡片數據的排序都可以采用這種拖動排序的交互。

2. 樹組件多層級排序

(1)同層級排序(橫線高亮顯示即將放的位置)

樹組件同層級排序默認展示和拖動時效果與一級目錄常規排序一致。

(2)跨層級排序

父級未展開時:拖動到父級、父級整行高亮

如下圖,當需要把文件夾【數據名稱顯示004】放在【數據名稱顯示003】文件夾中,鼠標拖動數據放在【數據名稱顯示003】時,【數據名稱顯示003】整行會出現藍色高亮,表示被拖動的數據即將放在該文件夾內。

父級未展開時:拖動長按停留在父級時,父級自動展開子級。

如下圖,按照上面的步驟拖動時,當鼠標一直停留在【數據名稱顯示003】的位置時,該文件夾會自動展開二級目錄,這是一個拖動排序比較友好的交互,可以讓用戶再次看到該目錄下的數據結構,并快速一次性選擇需要放的位置。

父級已展開時:拖動到子級時,父級整行高亮,拖動到的位置出現高亮橫線。

如下圖,在上圖基礎上,當鼠標繼續拖動數據,想要放在二級目錄中時,數據一級目錄同樣會顯示高亮,告訴用戶當前數據的層級關系。

同時,二級數據中會出現藍色高亮分割線,標識被拖動的數據即將放的位置,這樣就能清晰的知道被拖動的數據將放在那個目錄的那個位置。

父級已展開時:拖動到子級文件夾時,父級不需要高亮,子級文件夾目錄整行高亮(子級已展開和未展開的交互與父級同理)。

當需要將數據拖動到二級文件夾內時,只需要高亮二級文件夾即可。

關于樹組件多層級排序的使用場景和交互比較復雜,上面我根據不同場景分別列出了交互展示方式,下面再根據實際業務需求列舉案例說明,因為此場景主要是針對交互和顯示,所以我就直接拿動圖展示,便于大家理解。

本文由 @設計小余 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

史上最全B端產品的交互規范來了,建議收藏!

杰睿

交互規范有效地規定了產品如何與用戶進行交互的規則和標準,這篇文章里,作者便梳理了B端產品的交互規范,一起來看看,或許會對產品經理、產品開發人員、交互設計師等人群有所幫助。

序言

從業B端產品7年+,大大小小公司對交互規范有著不同的要求,但是萬變不離其宗,交互總有其底層規范要求,那么接下來跟大家詳細說明一下交互規范細則,超級詳細的交互規范來啦!

WHAT:交互規范是什么?

產品交互規范,也稱為界面交互規范或用戶界面規范,是一套規定產品如何與用戶進行交互的規則和標準。它包括設計元素的布局、動作反饋,以及對產品的使用流程和功能邏輯等各個方面的設定和控制。

交互規范重點在于人機交互的友好性和流暢性,用起來順手且符合商業目的就是交互規范最好的詮釋。

WHY:目的及意義

  • 提高用戶體驗:好的交互規范能夠幫助用戶更好地了解和使用產品,從而提高用戶體驗。
  • 提升開發效率:通過制定交互規范,可以使得設計師和開發者在開發過程中有明確的指導。
  • 提升品牌形象:通過統一的交互規范,可以使得品牌的各個產品在交互方式上保持一致,從而提升品牌形象。

WHO:適合哪些讀者

產品經理,產品開發人員,交互設計師,產品UI設計人員。

一、色彩

1. 色彩體系

分成兩個層面:系統級和產品級。

1)系統級色彩體系可參考螞蟻的交互組件https://ant.design/docs/spec/colors-cn,螞蟻組件對整體交互規范有著細致且順滑的操作演示。假設公司內部有專門的設計部門,可以設計部門整體定義公司色系以及字體等等。

2)產品級色彩體系進一步去突出產品本身色彩調性以及功能屬性。

2. 產品級色彩體系

1)品牌色的應用

品牌色體現產品以及品牌特色,加深使用者對品牌的印象。比如支付寶系列操作均是藍色為主,微信主色調為綠色和白色,抖音是黑色系。

2)功能色

功能色代表了明確的信息以及狀態,比如錯誤提示,失敗提醒,成功提示等等。在一套產品體系下,功能色盡量保持一致,比如新增,刪除等功能按鈕色彩需要跟主題色保持一致。

3. 系統建議

公司重要對外宣傳系統以及內部主系統均使用品牌色,突出公司特色;

另外一個頁面盡量不要超過3種顏色,并且是在同一標準色彩體系內,盡量不要自己去色彩庫隨意選取色彩。

二、字體

1. 字體定義

字體是體系化界面設計中最基本的構成之一。

在中后臺視覺體系中定義字體系統,我們建議從下面四個方面著手考慮:主字體,字階與行高,字重,字體顏色。

2. 主字體

為了保證在多數常用顯示器上的用戶閱讀效率最佳,根據電腦顯示器距離舒適度以及用戶觀感舒適度,確認導航為16px,標題為16px,正文為14px,說明為12px。

3. 字階與行高

字階是指不同尺寸的字體。行高就是一行字的高度,包裝在字體外的邊框盒子的高度。

建議的主要字體為 14,與之對應的行高為 22。其余的字階的選擇可根據具體情況進行自由的定義。建議在一個系統設計中,字階的選擇盡量控制在 3-5 種之間,就跟衣服搭配一樣,顏色不要過多,簡潔舒適為宜,字體字號在一個區間范圍內。

4. 字重

字重為字體的粗細程度,建議用 regular 以及 medium 的兩種字體重量。

5. 字體顏色

黑色為主,正文建議選用 #333333到#666666 之間的顏色。注釋類的文字建議選用#999999。

三、對齊

文案類最好為左對齊,數字類最好為右對齊,表單類間距建議8px,文字右對齊,結尾沒有冒號。

四、按鈕

市面上比較主流的為這四種按鈕,主按鈕,線性按鈕,次按鈕和純文字按鈕。具體使用規則和使用場景如何呢?我們應該從哪些方面下手去設計按鈕?下面給大家一一進行解答。

1. 主按鈕

主按鈕為主要的按鈕。引導用戶進行點擊操作,一個按鈕區域最多使用一個主按鈕。

場景應用:可應用于確認、新增、保存等等,你想引導用戶做何操作,就可以把視覺焦點集中在哪個按鈕上。比如退款操作時,商家本質希望用戶不退款,主按鈕為返回或是再想想的按鈕。

需要注意的是不要在同一個表單中使用多個主按鈕,1-2個即可,次按鈕或是線性按鈕多于5個時可以向上折疊收起。

2. 線性按鈕&次按鈕

線性按鈕&次按鈕兩種按鈕均可點擊,但是功能均弱于主按鈕。如果希望引導用戶進行點擊,可以選擇線性按鈕;若希望用戶盡可能少點擊或是不點擊可以選擇次按鈕。

場景應用:一般在大表單頁面批量導入,下載均為次按鈕或是線性按鈕。

3. 純文字按鈕

純文字按鈕就是有顏色的文字按鈕,可進行點擊。

場景應用:一般應用于表單中大面積需要點擊的操作,比如查看,刪除,編輯等等,對表單中每一行進行的操作。

4. 謹慎按鈕

謹慎按鈕用于特殊情況下防止誤操作的按鈕。

場景應用:一般應用于刪除/付款/退款/修改權限/移除等危險操作,大部分都需要再次確認才可以。

5. 按鈕順序

前面介紹了那么多種按鈕以及應用場景,那么按鈕應該如何進行排列,需要遵循何種規則呢?

1)閱讀習慣

大家可以閉著眼睛想一下,正常我們閱讀的習慣是從左到右,從上到下,表單信息閱讀完畢后需要進行操作,最好都放在右上方。

2)相關性原則

讓相關的操作按鈕更相近,比如上一步和下一步,保存和取消,增刪改查,讓這些兄弟按鈕距離挨得更近一些。

五、導航

導航是B端系統的地圖索引,幫助用戶可以順利到達目的地。導航對于B端產品交互而言,是系統之眼,一方面清晰展示系統結構,另一方面幫助用戶快速找到他們想要的信息。好的導航清晰操作順滑,差的導航會讓用戶沒有二次進入的想法,所以好的導航是系統成功的一半。

市面上主流的導航交互為全局導航和頁內導航,好的導航如何進行設計,我們需要選取哪種導航模式?繼續一起探索吧。

1. 全局導航

1)側邊豎向導航

使用規則:

  • 適用于企業級產品,尤其是較為復雜且操作較為繁瑣的系統,比如人力系統,CRM系統,ERP系統等等;
  • 建議1-3個層級使用,可以承載多個層級;
  • 建議6-8以上菜單使用,可以承載多個菜單。

需要特別注意豎向導航的排列順序,較為復雜的企業級系統從上到下一般依次為:

  1. 首頁(工作臺、駕駛倉):主要展示整體系統主要功能入口以及一些主要數據,內容信息等等。
  2. 主要功能菜單:主要展示系統較為重要的功能菜單,比如人力系統展示入職管理,活水管理,離職管理等等。
  3. 數據統計(數據記錄):主要展示較為重要的數據統計或是數據記錄,比如客服系統的在線會話記錄,在線會話統計,外呼記錄、外呼統計等等。
  4. 系統配置:主要展示系統內部的功能配置,權限配置等等,比如人力系統的人員配置,菜單配置等等。
  5. 消息中心(幫助中心):主要展示系統內部消息,意見反饋,幫助中心等等,比如發貨系統中連接上下游的發貨信息,數據下載消息通知,服務更新通知等等。

優點:

  • 多層級,拓展性較好,可以支持多欄目多菜單;
  • 導航為固定形式,用戶在操作和瀏覽時可以快速定位和回到首頁,操作效率高;
  • 左側導航可以進行收縮,可擴大頁面寬度。

缺點:

層級入口較多時,用戶下鉆縱深體驗稍差。

2)頂部橫向導航

使用規則:

  • 適用于較為簡單的企業級系統或是官網,欄目較少,可以給用戶更好的沉浸式體驗;
  • 建議1-3個以內層級使用,可以承載多個層級;
  • 建議2-6以內菜單使用,菜單字數需要去適應整體屏幕的寬度;
  • 需要特別注意的是橫向菜單從左到右,權重依次減少。

優點:

  • 整體頁面排版較為簡單,方便用戶輕便操作;
  • 用戶能做沉浸式體驗,體驗感較好。

缺點:

  • 承載內容有限,層級拓展性較差;
  • 橫向中文或是英文命名需要受整體屏幕寬度的限制。

2. 頁內導航

1)面包屑

面包屑幫助定位菜單以及返回菜單,可以顯示當前頁面的路徑,是比較常用的導航方式。

使用規則:

顯示當前頁面路徑,方便用戶進行返回操作,最好大于等于3個層級進行使用;

2)Tab

使用規則:

較常應用于顯示頁面不同內容構成,比如人力詳情頁顯示Tab欄為基礎信息、公司任職信息、獎懲信息等等。

3)步驟條

使用規則:

較常應用于一步步按照某種提示去完成任務,任務有明確的先后順序;步驟一般為1-5步。

結語

產品交互規范的內容模塊還是較多的,希望這篇文章對你的產品交互能力有所提升!另外交互規范是產品架構的基礎的地基,具體樓房蓋成什么樣還需要用心去思考以及借助公司內部UI和UE的力量。

本文由 @月亮漫談 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

交互設計太燒腦?學會模式思維,助你效率狂飆 300%

杰睿

在互聯網領域中,人機之間的互動過程就是交互。交互也有一些可預測的、重復出現的規律,作者總結了其中常見的七種C端交互模式,可以提高大家的工作效率,分享給大家。

前段時間有個產品童鞋,他剛加我就問了一大串問題。

什么是模式(Pattern)?什么是模版(Template)?這兩個概念有什么區別?

作為一個熱心好學、樂于助人的產品仔,我當然和他暢聊了一個多小時,順便總結下聊天內容。

你是不是也經常在生活工作中,碰到類似“行為模式、設計模式、語言模式、文檔模版、表格模版”等名詞。

但又搞不清它們有什么區別,搞懂了又有什么用?

別急,我們花幾分鐘,先來嘮嘮什么是模式。

一、什么是模式?

可預測、重復出現的現象或規律,通過歸納總結,就變成了某一種模式。

我們的生活中,就有許多模式的影子。

比如常見的商業模式、營銷模式、行為模式、數學模式、語言模式等。

舉個例子:

簡單說下行為模式,它分為了“習慣模式、消費模式、學習模式”等等。

苦逼打工仔普遍的消費模式,一般是工作日花錢少,到了周末都愛到商場逛街和購物。

但又有特例,我有個朋友就特別宅,他只喜歡在上班的時候,摸魚逛淘寶下單,簡直離譜~

掌握模式,有什么用?

當你掌握了模式的概念,并嘗試在生活中使用,相信你一定能感受到這 7 個好處。

  1. 信息壓縮:把信息精簡成特定的模式,記憶傳播更容易了,教給別人更是輕輕松松;
  2. 知識萃取:通過學習模式,掌握系統化的知識,就像搭樂高拼積木,簡單易懂、一學就會、舉一反三;
  3. 簡化問題:用模式來解決問題,意味著它不再是一團亂麻,成為了可分割的部分,原來苦惱的事,現在輕松搞定;
  4. 識別規律:當你摸清了模式的現象規律,就像旅游帶著地圖,走到哪里都不慌;
  5. 提高效率:把模式進行泛化使用,可以大大提高你的工作產出,蓋章可比畫圖快太多了;
  6. 組合創新:試著把你學會的各種模式,打亂排序、重新組合,說不定會拼出一些新玩意;
  7. 預測未來:搞懂了特定領域的模式,意味著你熟知并能運用自如,自然而然學會了推演未來。

二、C 端交互設計的 7 種常見模式

我們試著再舉個例子,加深下對模式的理解,順便學學交互設計。

什么是交互?

簡單來說,交互指的是在互聯網領域中,人、機之間的一系列互動過程。

我還提煉了 3 種常見模式(簡單反饋、數據操作、業務判斷),比較粗糙湊合也能用。

現在試著再系統總結下,我常用的 7 種 C 端交互模式,主要有:導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式。

學完就能用,趕緊卷起來~

有人就問了,還有更多交互模式嗎?

確實可以有,等我有時間再編幾個。。

話說回來,如果是一些特別復雜的業務規則,可能會涉及到 N 個交互模式的任意組合。

1. 導航模式

常見的導航模式有按鈕組合、標簽菜單、宮格布局、列表視圖等。

導航模式的主要作用是,告知用戶當前在網站的位置,以及接下來到哪些頁面,這有點像地圖 APP。

上面這張圖中,包含了幾種導航組件呢?

2. 搜索模式

搜索,是各大電商 APP 常見的交互模式。

搜索模式允許用戶輸入關鍵詞,然后系統返回搜索結果。

打個比方,這有點像在 Navicat 中寫了一段 SQL 查詢。

SELECT id, name, age
FROM users
WHERE age > 18

這段 SQL 的作用是,查詢大于 18 歲的用戶信息,包含序號、名稱、年齡。

3. 反饋模式

常見的反饋模式組件,涉及了對話框、吐司提示、氣泡提示等。

反饋模式用的比較多的場景是,告知用戶一些信息或提示,比如“輸入密碼錯了、展示訂單取消的注意事項”等。

4. 輸入模式

輸入模式主要用于新數據創建,例如淘寶下單時,你新增了一個收貨地址。

打開美團叫個外賣,整個訂單創建流程,也是輸入模式。

5. 編輯模式

有很多人可能會把輸入模式和編輯模式搞混。

區別它們的一個方法是,交互流程涉及新數據創建,還是改舊數據。

改數據的話,那就是編輯模式。

6. 分享模式

我們在看到一些干貨文章,或好用的小程序想要轉發給朋友,那就要用到分享模式。

分享模式可以很簡單,也可以往復雜了做,看產品階段去實現。

7. 引導模式

引導模式和反饋模式有點像,都是展示特定的內容。

那怎么分辨它們呢?

以設計師視角來看,反饋模式需要用戶觸發,系統被動顯示。

而要讓用戶特別關注的信息,那就是引導模式。

三、總結

模式,即抽象的規律。——好夕雷

說了這么多概念和例子,你是不是對模式的認知更清晰了呢?

模式運用在產品領域,就有了這 7 種交互模式,分別是“導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式”。

如果學會了模式,那么無論生活還是工作,相信你一定能輕松應對、事半功倍。

本文由 @好夕雷 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

動效設計中的節奏魔力

杰睿

關于動效節奏的問題,有什么好的方法可以提供?這算一個常見疑問,我總結收到的問題反饋,基本都是「動畫節奏應該怎么做呀」「做完的動效一卡一卡的感覺不流暢怎么整」,索性借著今天的契機,我整理了這樣一篇主題文章,分享我對于動效節奏的一點經驗與思考,僅代表個人觀點,歡迎交流探討~

在當今數字時代,動效設計已然成為了產品和服務中不可或缺的一部分。

無論是手機APP、網頁界面還是智能設備,動效設計或是引導用戶操作的微小提示,或是增強用戶體驗的交互反饋,又或是塑造品牌形象的視覺元素,它們都以其獨特的方式,為用戶帶來更加直觀、生動的互動體驗,因此流暢的觀感體驗很重要。

動效設計中的節奏魔力

提到流暢度,那動效節奏的重要性不言而喻。

動效節奏,簡單來說是動態呈現中各個元素動作的速度和時長安排,它決定了動效的快慢、強弱、起伏和變化,從而影響著用戶的感知和情緒。

一個優秀的動效設計,不僅要考慮單個元素的動效表現,更要考慮整個界面的動效節奏,使界面動效更加自然、流暢,也更加符合用戶的心理預期,從而提升用戶體驗。

動效設計中的節奏魔力

所以,想入門動效領域并深耕,我認為深入理解動效節奏是尤為重要的,學會如何運用動效節奏來提升用戶體驗,讓用戶在享受科技帶來便捷的同時,也能感受到藝術的魅力。

一、動效設計基礎認知

1. 動效設計在用戶體驗中的價值

動效可以增強界面的可理解性,例如下圖中廣告推送,有一個手機圖標的旋轉動態示例,

動效設計中的節奏魔力

以及多多視頻模塊中的上滑操作指引等,幫助用戶更好地理解界面功能和操作方式,從而更有效地去使用應用。

動效設計中的節奏魔力

動效可以提升界面的可用性,例如上傳文件的操作,通過提供及時的反饋和指引,降低用戶的學習成本和操作難度。

動效設計中的節奏魔力

動效還可以增加界面的吸引力,例如購物軟件中模擬實際鞋盒開箱的形式,展現鞋品,通過生動有趣的動效表現,提升用戶的使用欲望和滿意度。

動效設計中的節奏魔力

2. 簡述動效設計的基本原理與最佳實踐

提到動效設計,了解其背后的基本概念和原則,才是賦予動效靈魂和意義的關鍵。

這里要提到三個關鍵詞:

1)首先是時間

時間在動效設計中扮演著至關重要的角色。它決定了動畫的快慢、停頓和節奏,從而影響用戶的情感體驗。

動效設計中的節奏魔力

例如,一個緩慢漸入的動畫可能傳達出優雅、穩重的感覺;

動效設計中的節奏魔力

而一個迅速閃現的動畫則可能帶來刺激、緊張的感受。

2)其次是空間

空間是指動畫發生和存在的虛擬環境。在動效設計中,空間的布局、層次和透視關系都至關重要。

它們不僅影響動畫的可視性和可讀性,還影響用戶的認知和行為。

動效設計中的節奏魔力

例如,合理的空間布局可以使用戶更容易理解和操作界面元素,而不合理的布局則可能導致用戶的困惑和誤操作。

3)最后是構圖

構圖是指動畫元素的排列組合和視覺平衡。

一個良好的構圖可以突出重點、引導視線,并營造出和諧、統一的視覺效果。

相反,一個糟糕的構圖可能會分散用戶的注意力,甚至引發視覺疲勞。

動效設計的目標不僅僅是實現技術上的可能性,更是為了創造出讓用戶愉悅、滿意且易于使用的體驗,在美感和技術要求之間尋找平衡點,是我認為需要不斷練習,積累總結經驗的。

二、關鍵要素:動效節奏

在動效設計中,能讓靜態元素動起來形成生動流暢的動態效果,需要用到兩大元素:關鍵幀與動效節奏。

1. 關鍵幀

關鍵幀代表了在特定時間點上某個參數的值。在動效制作過程中,通過設置關鍵幀,可以控制對象在不同時間點的狀態,從而形成連續的動作。

動效設計中的節奏魔力

關鍵幀就像是動效世界里的路標,它標記了在動效呈現中某些重要時刻物體的樣子。比如說,我想讓一個球跳起來,那我就得告訴電腦,在開始的時候球在地上,然后在某個瞬間球在空中最高點,最后又回到地面;這些重要的時刻就是關鍵幀。

關鍵幀之間的變化可以是線性的,也可以是曲線的,后者可以創造出更為自然和復雜的動態效果。

2. 常見的四種動效節奏形式

線性或曲線變化,統稱動效節奏,是指在一定時間內,通過一系列有規律的動效元素的組合和排列所產生的節奏感。

常見的四種動效節奏形式有 勻速、緩入、緩出、緩動。

動效設計中的節奏魔力

1)勻速(Linear)

勻速運動指的是物體在動畫過程中速度保持不變的運動方式。這種節奏簡單直接,沒有加速或減速的過程。

動效設計中的節奏魔力

上面的小球彈跳呈現的效果,就是勻速運動,有些機械,缺乏實際場景中的動感。

在AE中,默認的菱形關鍵幀之間就是勻速運動,例如生活中常見的時鐘,上圖中鐘表秒針旋轉是平穩、機械的,這就是一個典型的勻速運動。

2)緩入(Ease In)

緩入是指物體在動畫開始時速度較慢,隨著時間的推移逐漸加速到最大速度的運動方式。

動效設計中的節奏魔力

一般元素離開畫面或者物體加速階段使用,例如上圖中摩托車駛出畫面的部分、進度條加載緩慢到快速的節奏等,它可以增加動畫的真實感和生動性。

在AE中,以圓球為例,從空中下落的過程,就可以使用緩入的加速曲線;

動效設計中的節奏魔力

調出圖表編輯器,調節曲線弧度如圖「速度圖表」所示,使曲線開始時平緩,越靠近出點速度逐漸上升,完成加速運動,此時結尾有些生硬。

加一個小知識點:曲線調節有兩種形式,一種為速度圖表,一種為值圖表;

速度圖表顧名思義,看曲線的弧度,圖中球的開始入點曲線弧度較緩,結尾出點曲線斜度較大,則代表加速度節奏變化;

值圖表分別代表X,Y軸曲線變化,如圖中球的Y軸位置發生變化,因此對應綠色線條的曲度變化是球體的動效節奏變化,下落過程中加速,則區別于前半段的直線,入點平滑,出點更陡峭。

3)緩出(Ease Out)

動效設計中的節奏魔力

緩出與緩入相反,是指物體在動畫結束時速度逐漸減慢直至停止的運動方式,如元素入畫、人物行走至停下等,它能給人一種平滑和自然的結束感,是先快后慢的減速運動。

動效設計中的節奏魔力

同樣以圓球為例,球落地后反彈的過程,就可以使用緩出的減速曲線;
調出圖表編輯器,調節曲線弧度如圖「速度圖表」所示,使曲線結束時平緩,調節出點的手柄桿,完成減速運動。

4)緩動(Ease In Ease Out)

緩動是最接近真實世界物體運動規律的一種方式,適用于大多數動態場景,尤其是那些需要表現自然、流暢動作的畫面呈現。

緩動曲線結合了緩入和緩出的特點,物體在動畫開始時速度緩慢上升,中間達到最高速度,最后在結束時速度逐漸降低。

動效設計中的節奏魔力

示例繼續完善小球的曲線節奏,我想讓它看起來更順滑、更有彈跳感覺,通過球的大小比例(縮放)的變化,增加模糊變化的細節,這樣球跳起來的動作就會像真實世界里那樣,既有起跳的沖勁,又有落地的緩沖,整個過程更加生動有趣。

動效設計中的節奏魔力

在AE中,緩動曲線沒有具體的數值,多數時候需要結合不同場景表達,去嘗試不同的曲度形式,通過反復預覽檢驗,找到自己滿意、適合畫面感呈現的形式。

3. 刻意練習-節奏感積累

日常積累動效節奏,我會分析電影或MG動畫中的經典鏡頭,比如角色走路、跑步的動作呈現,元素的出入場變化,以及自然界中的運動現象,如樹葉飄落等。

動效設計中的節奏魔力

多做分鏡腳本的拆分練習,多臨摹實踐,就可以逐漸掌握常見的運動規律,自己在做設計內容時,也可以更清晰知道怎樣的節奏更適合當下場景呈現。

三、結論

總的來說,創造流暢體驗對于動效設計來說還是很重要的,而要實現這一目標,掌握并靈活運用好動效節奏則是必不可少的手段之一。

萬變不離其宗,多看、多思考、多練習,通過實踐去總結復盤規律、梳理SOP流程,整理出一套適合自己記憶、使用的方法論與行動標準,提高自己對動態的感知,以及節奏力的把控,也能有效提升工作效率。

「想不如做,知行合一」,想讓學到的知識和技巧,生長到自身,唯一要做的就是立馬行動!在做的過程中解決一個個卡點,迭代出更適合自己的方法。

作者:Shirley_雪

本文由 @Shirley_雪 原創發布于人人都是產品經理。未經作者許可,禁止轉載

題圖來自 Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務

蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

日歷

鏈接

個人資料

藍藍設計的小編 http://m.73404.com.cn

存檔

主站蜘蛛池模板: 欧美性猛交xxxx免费看久久 | 免费h片在线观看 | 妇欲欢公爽公妇高h苏晴 | 免费污网站在线观看 | 少妇玉梅抽搐呻吟 | 黄色www视频 | 国产黄色片免费看 | 国产特级毛片aaaaaa高潮流水 | 亚洲色图一区二区 | 久久一二区| 美女天天干 | 精品国产亚洲一区二区三区 | 少妇愉情理伦片丰满丰满午夜 | 日韩av在线播放网址 | 中文字幕va一区二区三区 | 国产精品偷拍 | 欧美成人a | 国产av人人夜夜澡人人爽 | 中字幕一区二区三区乱码 | 无码熟熟妇丰满人妻啪啪 | 色婷婷香蕉在线 | 国产乱子伦在线观看 | 精品日本一区二区三区免费 | 亚洲一线二线三线久久久 | 无码aⅴ精品一区二区三区 45分钟免费真人视频 | 国产女人18毛片 | 久久国产成人午夜av影院武则天 | 国产精品视频久久久久久久 | 91精品国产福利一区二区三区 | 少妇99| 私色综合网| 99久久精品国产一区二区成人 | 男人的天堂一级片 | 久久久综合香蕉尹人综合网 | 亚洲ww中文在线 | 日韩免费成人 | 林由奈在线观看 | www久久网 | 中文字幕有码无码人妻av蜜桃 | 成人视品| 中文字幕在线精品视频入口一区 | 日本中文字幕在线观看视频 | 97人人模人人爽人人喊电影 | 狠狠做深爱婷婷久久综合一区 | 成人网视频 | 无码国内精品人妻少妇蜜桃视频 | 成人特级毛片69免费观看 | 欧美少妇性生活 | 伊人国产视频 | 青娱乐超碰在线 | 大胸美女被吃奶爽死视频 | 日韩一区网站 | 丰满熟妇被猛烈进入高清片 | 女人让男人桶爽30分钟 | 爽天天天天天天天 | 插插插综合视频 | 亚洲国产精品一区二区三区 | 伊人精品久久久大香线蕉 | 婷婷在线视频观看 | 久久香蕉网 | 国产一线二线在线观看 | 欧美xxxx黑人又粗又长密月 | 欧美激情第1页 | 成人天堂视频在线观看软件 | 久久久青草婷婷精品综合日韩 | 99精品视频一区二区三区 | 性感美女一区二区三区 | 亚洲a√ | 国产成人精品123区免费视频 | av在线日韩 | 日韩亚洲欧美一区 | 亚洲性生活 | 成人欧美一区二区三区1314 | 久久国产成人午夜av影院武则天 | 日韩一区二区三区福利视频 | 成年人免费在线 | 亚洲欧洲精品mv免费看 | 狠狠综合久久久久综合网址 | 动漫av一区二区在线观看 | 高潮毛片又色又爽免费 | 国产精品黄色片 | 久久久久久婷婷 | 亚洲日韩av无码中文字幕美国 | 精品一区二区三区视频 | 黄色在线不卡 | 亚洲成av人片一区二区梦乃 | 婷婷色激情| 黄色三级av| 囯产精品一品二区三区 | 亚洲另类交 | 欧美v日本 | 香蕉视频官方网站 | 一区二区三区久久久 | 亚洲 日韩 欧美 成人 在线 | 欲妇荡岳丰满少妇岳 | 少妇的激情 | 奶涨边摸边做爰爽别停快点视频 | 成人av影片在线观看 | 久久一二区 | а√天堂资源中文最新版地址 | 欧美视频在线观看,亚洲欧 欧美视频在线观看视频 | 精品视频m3u8在线播放 | 在线精品小视频 | 欧美精品乱人伦久久久久久 | 日韩精选av | 国产成人无码视频一区二区三区 | 少妇人妻偷人精品无码视频新浪 | 成人亚洲在线 | 中文字幕第一页久久 | 久久久久久日产精品 | 国产精品成人3p一区二区三区 | 黑人精品一区二区 | 色一情一乱 | 欧美性大战xxxxx久久久 | 亚洲a视频 | 2021中文字幕| 亚洲欧美日韩一区在线观看 | 国产精品无码av天天爽 | 国产女人好紧好爽 | 911久久香蕉国产线看观看 | 视频在线观看一区二区三区 | 男女猛烈激情xx00免费视频 | 四川丰满少妇毛片新婚之夜 | 免费在线一级片 | 成人99| 日韩一区二区av | 91精品国产美女在线观看 | 国产精品对白交换视频 | 羞羞答答av成人免费看 | 精品视频一区二区三区四区 | 欧美又大又硬又粗bbbbb | 粉嫩少妇内射浓精videos | 国产特级全黄一级97毛片 | 久草青青 | 老司机午夜影院 | 91蜜桃臀久久一区二区 | 国产精品一二三区在线观看 | 国产精品爽爽久久久久久蜜臀 | 日韩精品在线视频免费观看 | 国产男人搡女人免费视频 | 亚洲图片另类小说 | 丰满人妻妇伦又伦精品国产 | 天天躁人人躁人人躁狂躁 | 色呦哟—国产精品 | 五月天免费网站 | 成人网久久 | 超碰123| 韩国不卡av| 午夜精品国产精品大乳美女 | 日韩成人欧美 | 国产人妻精品午夜福利免费 | 韩国白嫩粉嫩嫩嫩模美女视频 | 超碰91人人 | 中文久久精品 | 国产精品久久久久久久免费 | 男人用嘴添女人下身免费视频 | 成人自拍一区 | 一本不卡av | 男人巨茎大战欧美白妇 | 92看片淫黄大片看国产片图片 | 欧洲亚洲一区二区 | 日韩欧美高清dvd碟片 | 中文字幕看片 | 91久久久www播放日本观看 | 国外成人在线视频 | 国产av永久无码天堂影院 | 深夜福利免费视频 | 香港台湾日本三级大全 | 极品五月天 | 精品极品三大极久久久久 | 无码人妻精品一区二区三18禁 | 欧美 国产 综合 欧美 视频 | 欧美日韩黄色网 | 亚洲日韩av无码一区二区三区人 | 51精品国产人成在线观看 | 亚欧洲精品视频 | 黄色一级影片 | 免费人成在线观看视频高潮 | 亚洲欧美中文字幕 | 欧美性大片xxxxx久久久 | 中文字幕无码一区二区免费 | 中韩无矿砖专区综合 | 欧美中文字幕在线播放 | 久久99热婷婷精品一区 | 饥渴的熟妇张开腿呻吟视频 | 韩国黄色av| 免费国精产品—品二品 | 7788色淫网站免费观看 | 九九九九九热 | 国产欧美日韩另类在线专区 | 99久久久无码国产精品古装 | 色欲麻豆国产福利精品 | 黄色小视频在线播放 | 久久99精品久久久久久噜噜 | 一级黄色a | 中文字幕乱码在线蜜乳欧美字幕 | 色天天| 久久久www.| 欧美人与禽zozzo视频 | 青草视频在线看 | 欧美日韩欧美日韩在线观看视频 | 久久免费视频播放 | 婷婷免费视频 | 欧美一级全黄 | 日本又色又爽又黄的大片 | 天堂亚洲一品 | 神马午夜一区二区 | 亚洲青青草原 | www国产精品内射老熟女 | 公么大龟弄得我好舒服秀婷视频 | 热舞福利精品大尺度视频 | 永井玛利亚 精品 国产 一区 | 国产喷水1区2区3区咪咪爱av | 夜夜影院未满十八勿进 | 免费黄色91 | 精品一区二区三区欧美 | 国产乱淫av麻豆国产免费 | 五月天婷婷基地 | 亚洲国产a∨无码中文777 | 国产91天堂素人搭讪系列 | 香蕉久久一区二区不卡无毒影院 | 国产乱色精品成人免费视频 | 亚洲精品日韩精品 | 日本丶国产丶欧美色综合 | 韩日三级视频 | 中文字幕在线有码 | www.人人草 | 国产精品高潮呻吟av久久4虎 | 欧美 丝袜 自拍 制服 另类 | 偷拍中年夫妇激情嗷嗷叫 | 萌白酱国产一区二区 | 怡红院国产 | 中文字幕免费在线看线人动作大片 | 亚洲欧美视频一区 | 四影虎影免费在线观看 | 夜色88v精品国产亚洲 | 久久久精品波多野结衣av | 在线免费观看成年人视频 | 欧美亚洲亚洲日韩在线影院 | 四川少妇大战4黑人 | 久青草视频在线观看 | 人妻精品久久久久中文字幕69 | 五月中文字幕 | 香蕉爱视频 | 美女胸又黄又水 | 激情五月综合色婷婷一区二区 | 女同互添互慰av毛片观看 | 一区二区视频在线免费观看 | 91爱爱·com| 中文无码热在线视频 | 国产精品久久久久久52avav | 日韩在线精品强乱中文字幕 | 精品亚洲a∨无码一区二区三区 | 国产成人在线播放 | 区一区二区三区中文字幕 | 免费大片黄在线观看 | 亚洲一二三四五 | 成人性生交大片免费看vrv66 | 麻豆最新| 欧洲亚洲另类 | 99热这里只有精品18 | 一级录像免费录像性高湖 | 2020天天谢天天吃天天麻豆v | 欧美黑人狂躁日本寡妇 | 中文字幕18页| 日本xxxxl码在中国是几码 | 自拍偷拍亚洲一区 | 久久久久久久久久免费 | 欧美成人视 | 国产三级福利 | 日日干天天操 | 精品人妻无码一区二区三区抖音 | 亚洲1页| 欧美精品免费在线观看 | 亚洲熟女乱色综合亚洲图片 | 亚洲高清视频在线观看 | 久久亚洲一区 | 国产又黄又爽又色视频 | 国产做a爱免费视频在线观看 | 婷婷干 | 黄色欧美在线观看 | 国产欧美日韩视频在线观看 | 91国偷自产一区二区三区蜜臀 | 国产精品毛片一区二区在线看舒淇 | 欧美一二区 | 亚洲第一天堂av | 乱人伦人妻中文字幕无码久久网 | 成年人性生活免费视频 | 粉嫩粉嫩的虎白女18在线软件 | 国产成人久久婷婷精品流白浆 | 噜啦噜色姑娘综合 | 亚洲狼人天堂 | 4虎tv| 免费在线观看日韩 | 欧美性大战久久久久久久 | 久久综合亚洲色hezyo国产 | 天天综合亚洲综合网天天αⅴ | 国产极品在线播放 | 亚洲短视频 | 国产女主播在线播放 | 成人毛片100免费观看 | 欧美日韩精品一区二区天天拍小说 | 乱色精品无码一区二区国产盗 | 日韩在线观看免费 | 日日草夜夜操 | 农村少妇野战xxx视频 | 亚洲涩涩视频 | av中文字幕在线播放 | 热99在线视频 | 日本免费无遮挡毛片的意义 | 奇米成人网 | 97夜夜澡人人爽人人喊中国片 | 亚洲综合av一区二区三区 | 日日碰狠狠添天天爽五月婷 | 欧美日韩国产一区二区三区不卡 | 免费观看的av毛片的网站 | 高清毛片aaaaaaaaa郊外 | 国产九色在线播放九色 | 1000部夫妻午夜免费 | 91精品国产综合婷婷香蕉 | 性色av一区二区三区无码 | 全部免费毛片在线播放 | 麻豆91精品91久久久的优点 | 在线资源av| 国产欧美日韩精品一区 | 黄色av网站在线播放 | 人妻系列无码专区无码中出 | 国产三级做爰在线播放 | 久久不见久久见免费影院www日本 | 日本猛少妇色xxxxx猛叫 | 色国产精品一区在线观看 | 免费人成在线 | 国产精品女主播一区二区三区 | 麻豆国产一区二区三区四区 | 亚洲蜜桃av| 久久国产精品区 | 精品第一页 | 欧美大喷水吹潮合集在线观看 | 国产精品久久久久婷婷 | 人人爽人人爽人人片av | 午夜精品久久久久久99热 | 99热影院| 蜜桃色视频 | 玩弄japan白嫩少妇hd小说 | 91免费国产| 精品欧美一区二区久久久伦 | 视频免费精品 | 天天弄天天模 | 日韩成人大屁股内射喷水 | 色妞色视频一区二区三区四区 | 粉色午夜视频 | 无码h黄动漫在线播放网站 国产精品高潮露脸在线观看 | 欧美成年网站 | 裸体精品bbbbbbbbb | 在线天堂最新版资源 | 亚洲午夜无码毛片av久久 | 午夜寂寞影院在线观看 | 农村女人乱淫免费视频麻豆 | 爱豆国产剧免费观看大全剧集 | 中国凸偷窥xxxx自由视频 | 久色成人| 337p人体粉嫩胞高清视频 | 免费的黄色影片 | 激情爱爱网| 日韩精品一区二区av在线 | 精品久久久久久久久久久久久久久久 | 日本黄色激情视频 | 亚洲精品久久区二区三区蜜桃臀 | 三八成人网 | 国产精品无码av一区二区三区 | 男女啪啪做爰高潮www成人福利 | 蜜桃视频欧美 | 久久久影院 | 激情综合网五月 | 国产精品区在线观看 | 亚洲高清免费观看 | 都市激情自拍偷拍 | 国产精品苏妲己野外勾搭 | 麻花传媒在线mv免费观看视频 | 爱情岛论坛av | videos性| 黄色一级大片 | 18在线观看视频网站 | 欧美日韩一级在线观看 | 亚洲精品九九 | 最近更新2019中文字幕 | 国产偷自视频区视频 | 免费大片黄在线观看视频网站 | 成人高清视频免费观看 | 天堂在线亚洲 | 日本少妇性高潮 | 欧美色图88 | 特黄一区 | 91亚洲人人在字幕国产 | 美女自卫慰黄网站 | 在线观看国产视频 | 久久精品国产一区二区三区不卡 | 免费一级做a爰片性视频 | 俄罗斯兽交黑人又大又粗水汪汪 | 精品久久人妻av中文字幕 | 又爽又黄无遮挡高潮视频网站 | 老司机精品视频一区二区三区 | 国产乱淫av片免费看 | 91高跟黑色丝袜呻吟动态图 | 亚洲熟区 | 张筱雨337p大尺度欧美 | 女娃videosex娇小 | 亚洲欧美一区二区在线观看 | 男人天堂新地址 | 日韩成人在线影院 | 亚洲精品久久久久中文字幕m男 | 青草久久网 | 久久人人视频 | 欧美日韩色另类综合 | 亚洲成色在线综合网站 | 国产91精品一区二区麻豆网站 | 五月天av网站 | 国产91网站在线观看 | 曰韩少妇内射免费播放 | 一个人看的www免费视频在线观看 | 人妻尝试又大又粗久久 | 美女中文字幕 | 成人深夜影院 | 久久视频这里有久久精品视频11 | 成人免费观看男女羞羞视频 | 性中国videossexo另类 | 三级黄色av| 免费a在线观看播放 | 欧美成人va | 在线中文字幕一区二区 | 俺也去av| 午夜久久久久久久久久 | 亚洲国产综合精品2020 | 中文字幕一区二区三区精华液 | 免费成人蒂法网站 | 色伊人亚洲综合网站 | 久草视频手机在线观看 | 亚洲精品网站在线观看 | heyzo北岛玲在线播放 | 玖玖爱国产 | ww国产内射精品后入国产 | 人妻无码中文专区久久五月婷 | 调教大乳女仆喷奶水 | 亚洲综合av一区二区 | 国产精品入口传媒小说 | 成人久久18免费网站麻豆 | 制服丨自拍丨欧美丨动漫丨 | 亚洲一级淫片 | 国产高清一区二区三区视频 | 亚洲性网站| 国产精品久久久国产盗摄 | 东北少妇不戴套对白第一次 | 亚洲精品国产综合久久久久紧 | 中文在线а√在线 | 人成免费在线视频 | 亚洲欧美日韩中文在线制服 | 亚洲精品一区二区三区高潮 | 久久久女女女女999久久 | 亚洲超碰在线观看 | 日本一区二区在线播放 | 久久亚洲国产成人精品性色 | 97播播 | 在线观看www视频 | 秘密爱大尺度做爰呻吟 | 亚洲黄视频 | 一级a性色生活片久久毛片明星 | 亚洲不卡av不卡一区二区 | 在线黄色网页 | 人人妻人人添人人爽欧美一区 | 日本一区二区免费在线观看 | 一级一毛片 | 亚洲精品在线免费播放 | 黑人粗硬进入过程视频 | 99国产一区| 中文字幕日本 | 寡妇亲子伦一区二区三区四区 | 国产熟女内射oooo | 国产精品一区二区 尿失禁 又污又爽又黄的网站 | 精品视频一区二区三区四区五区 | 肉色超薄丝袜脚交一区二区 | 亚洲视频中文字幕在线观看 | 日韩视频免费大全中文字幕 | 四虎影库久免费视频 | 亚洲一区二区影院 | 国产精品51| 久久久福利视频 | 成人一区视频 | 四色成人 | 性福宝向日葵 | 夜夜骑天天射 | 小sao货水好多真紧cao视频 | 亚洲最大免费视频 | 暖暖日本在线观看免费 | 少妇精品一区二区三区在线观看 | 久久96国产精品久久99软件 | 免费人成在线观看视频播放 | 天天人人综合 | 国产成年免费视频 | 亚洲69| www国产区| 泰国性xxxx极品高清hd | 亚洲性生活大片 | 男人天堂avav | 中日韩乱码一二新区 | 国产亚洲精品久久久久5区 国产亚洲精品久久久久久 国产亚洲精品久久久久久国模美 | 久久久久久成人毛片免费看 | 五月天国产视频 | 高h放荡受浪受bl | 久久一区二 | 操你妹影院 | 国产成人精选视频在线观看 | 国产成人精品一区二区色戒 | 2022色婷婷综合久久久 | 国产一级内谢一级一内高请 | 成人在线观看a | 本道久久综合无码中文字幕 | 日本人dh亚洲人ⅹxx | 成人网站免费观看 | 免费观看成人毛片 | 中文字幕第一页九 | 日本高清视频一区二区三区 | 女人夜夜春高潮爽a∨片传媒 | 性初体验美国理论片 | 亚洲综合影视 | 久久久亚洲裙底偷窥综合 | 无码av专区丝袜专区 | 欧美日韩中文国产一区发布 | 天天插天天干天天射 | 日本一道高清一区二区三区 | 999久久久国产精品 国产精品视频全国免费观看 | 国产剧情精彩演绎 | 成人欧美激情 | 少妇特黄v一区二区三区图片 | a 'v片欧美日韩在线 | 色综合啪啪 | 亚洲精品激情 | 黄色免费国产 | 4438xx亚洲最大五色丁香 | 激情午夜网 | 成年人小视频 | 亚洲人成人伊人成综合网无码 | 日韩男女视频 | 狠狠亚洲超碰狼人久久 | 91人体视频 | 全球成人中文在线 | 精品国产免费一区二区三区香蕉 | 18禁真人抽搐一进一出免费 | 欧美黄色www| 九色丨蝌蚪丨成人 | 夜夜爽日日澡人人添蜜臀 | 美女赤身免费网站 | 日韩精品无玛区免费专区又长又大 | 六月婷婷啪啪 | 亚洲综合在线中文字幕 | www污网站| 免费黄色毛片视频 | 精品欧美黑人一区二区三区 | 国产精品户外野外 | 91精品国产日韩91久久久久久 | 久久久久女人精品毛片九一 | 天天久久综合网 | 一区二区视频观看 | 加勒比无码一区二区三区 | 极品少妇被猛得白浆直流草莓视频 | 激情综合一区二区三区 | 国产三级播放 | 99色综合| 免费黄色的网站 | 免费黄网在线观看 | 国模大尺度一区二区三区 | 99久久99久久精品免费看蜜桃 | 天天av天天翘天天综合网 | 天天摸天天做天天爽婷婷 | 免费无遮挡无码永久在线观看视频 | 国内精品久久久久久久影视红豆 | 中文字幕免费在线视频 | 中国产一级a毛片四川女 | 男女做www免费高清视频网站 | 欧美日韩一区二区三区精品 | 永久av网站 | 青青草无码免费一二三区 | 精品久久免费视频 | 午夜免费福利在线观看 | 五月深爱网| 中文字幕日韩人妻在线视频 | 亚洲天堂久 | a级性生活视频 | 国产成人精品亚洲午夜麻豆 | 亚洲综合另类小说色区色噜噜 | 天天做天天爱天天综合网2021 | 国内黄色毛片 | 国产女人成人精品a区 | 久久精品aⅴ无码中文字字幕蜜桃 | 日本a视频 | 狂野欧美性猛交bbbb | 亚洲精品久久久乳夜夜欧美 | 欧美激情一区二区三区蜜桃视频 | 亚洲播放 | 国产深夜福利在线 | 人人爽久久久噜噜噜婷婷 | 无码少妇一区二区三区 | 在线成人一区二区 | 午夜在线观看av | 香蕉视频免费在线播放 | 精品aⅴ一区二区三区 | 99久久婷婷国产综合亚洲 | 一区二区三区久久久久 | 偷偷操网站 | 久久精品人人做人人爱爱站长工具 | 国产一区二区www | 黄色片欧美 | 国产精品三级视频 | 中国性受xxxx免费 | 日本又紧又色又嫩又爽的视频 | 国模无码视频一区 | 午夜黄色大片 | 精品国产aⅴ | 少妇的丰满3中文字幕 | 免费观看在线视频www | 欧美激情999 | 99热中文 | 免费无码不卡视频在线观看 | asian性开放少妇pics | 91精品国产高清一区二区三密臀 | 99久久九九| 裸体丰满少妇做受久久99精品 | 精品国产免费一区二区三区五区 | 色激情五月 | 天堂va久久久噜噜噜久久va | 伊人999| 日本人麻豆 | 日韩少妇内射免费播放18禁裸乳 | jizz视频 | 国产偷窥熟女精品视频大全 | 极品色av| 午夜dj在线观看免费视频 | 九九精品影院 | 小雪好紧好滑好湿好爽视频 | 少妇羞涩呻吟乳沟偷拍视频 | 日日夜夜一区二区 | 日本国产在线视频 | 中文字幕亚洲情99在线 | 91高潮大合集爽到抽搐 | 水蜜桃无码视频在线观看 | 91精品国产闺蜜国产在线闺蜜 | 樱井莉亚av | 久久久久久久女国产乱让韩 | 国精产品一区一区三区免费视频 | 精品精品国产高清a毛片 | 亚洲精品视频在线免费 | 日韩深夜福利 | 国内精品久久久久久久久电影网 | 好男人中文资源在线观看 | 五月天免费网站 | 亚洲女同在线 | 国内毛片毛片毛片毛片 | 玖玖精品国产 | 观看毛片| 国产免费a∨片同性同志 | 夜夜夜影院 | 国产又大又粗又长 | heyzo朝桐光一区二区 | 久久av影视| 国精产品一区一区三区有限公司 | 一本色综合亚洲精品 | 色偷偷成人 | 六月丁香久久 | 岳狂躁岳丰满少妇大叫 | 国产视频在| 免费毛片一区二区三区亚女同 | 日韩小视频在线观看 | 成人自拍视频网 | 国产午夜啪啪 | 在线激情网站 | 在线尤物 | 亚洲熟妇丰满多毛xxxx | 亚洲五码av | 色婷婷国产精品久久包臀 | 国产在线观看中文字幕 | h片在线 | 国产亚洲精品久久久久久大师 | 欧美激情视频免费 | 国偷自产av一区二区三区小尤奈 | 国产精品系列在线播放 | 国产无人区卡一卡二卡三网站 | 中文字幕无码免费久久 | 成人合集| 无码高潮少妇毛多水多水 | 神秘马戏团在线观看免费高清中文 | 超碰在线97国产 | 日女人网站| av成人| 四只虎影院在线免费 | 91av九色| 成人激情视频在线 | 东伊人一本东热 | 国产精品不卡av | 又粗又大又硬毛片免费看 | 午夜福利毛片 | 久久天天躁夜夜躁狠狠躁2022 | 欧美成人精品欧美一级乱黄 | jizz教师| 国内视频精品 | 粉嫩一区二区三区色综合 | 午夜丰满少妇性开放视频 | 亚洲怡红院av| 亚洲精品成人片在线观看精品字幕 | 婷婷五月在线视频 | 亚洲欧美综合精品久久成人 | 亚洲高清av一区二区三区 | 亚洲熟女乱色综合一区 | 日本免费一区二区三区高清视频 | 特级毛片爽www免费版 | 两男一前一后cao一女 | 欧美饥渴熟妇高潮喷水水 | 欧美精品国产综合久久 | 久操av在线 | 日日碰 | 成年人网站免费视频 | 国产精品第52页 | 老司机精品视频网 | 人人爱人人搞 | 爽爽爽av | 又黄又爽又色无遮挡免费软件国外 | 国产日韩欧美综合在线 | 久久精品国产精品国产一区 | 插我一区二区在线观看 | 国产午夜精品一区二区 | av av在线 | 日韩美女网站 | 精品久久影院 | 精产国品一二三产区区别在线观看 | 激情五月婷婷网 | 日韩一卡二卡 | 少妇把腿扒开让我舔18 | 欧美精品亚洲一区 | 亚洲男人的天堂在线观看 | 午夜宅男影院 | 少妇高潮惨叫久久麻豆传 | 538prom精品视频线放 | eeuss鲁片一区二区三区小说 | av之家在线 | 久久麻豆av | 久国产精品韩国三级视频 | 国产女人第一次做爰视频 | 欧美熟妇xxxxx欧美老妇不卡 | 中文字幕日韩二区一区田优 | 国产成人午夜高潮毛片男男爱 | 国产综合无码一区二区色蜜蜜 | 另类小说色综合 | 欧美午夜精品久久久 | 成人av在线网 | 少妇天堂网 | 亚洲成人网在线观看 | 7777少妇色视频免费播放 | 国产jizz视频全部免费软件 | 少妇高潮21p | 激情网婷婷 | www午夜激情 | 少妇又色又爽又高潮极品 | 插插插av | 曰本一级黄色片 | 成人中文字幕+乱码+中文字幕 | 欧美国产一区二区三区激情 | 在线色网址 | 大肉大捧一进一出好爽 | 国产日本一区二区三区 | 最好看十大无码av | 探花视频在线版播放免费观看 | 国产又黄又硬又粗 | 欧美粗又长 | 狠狠色视频 | 性做爰过程免费视频美女按店 | 日韩在线观看视频网站 | 国产污污网站 | 日日夜夜撸啊撸 | 国产精品无码专区av在线播放 | 夜夜精品无码一区二区三区 | 丰满少妇被猛烈进av毛片 | 91在线视频在线观看 | 女人爽到高潮免费视频大全 | 岛国三级在线观看 | 日韩字幕在线 | 国产精品久久久久久无毒不卡 | 欧美大肥婆bbbww欧出奶水 | 日韩在线二区 | 精品国产av一区二区三区 | 亚洲日韩看片无码超清 | 少妇洁白178在线播放 | 天天天操天天天干 | 欧美日韩黄色大片 | 日韩国产大片 | 欧美性久久 | 久久久久久蜜桃一区二区 | 大桥未久av一区二区三区 | 少妇伦子伦精品无吗在线观看 | 欧美日韩加勒比 | 欧美高清性xxxxhdvideosex | 日本xxxx高清 | 3p在线播放 | 国产美女喷水视频 | 蜜桃精品在线 | 久久综合精品国产二区无码 | 精品久久久无码中文字幕边打电话 | 国产无遮挡又黄又爽在线视频 | 国产bdsm视频 | 国产露脸150部国语对白 | 亚洲s码欧洲m码吹潮 | 亚洲无线看 | 波多野结衣视频在线播放 | 丁香五月亚洲综合在线 | 日韩精品免费在线 | 91大神精品 | 人人妻人人玩人人澡人人爽 | 新婚少妇在线观看一区 | 青青国产在线观看 | 五月天激情小说 | 欧美日韩成人免费 | 久久蜜桃av一区二区天堂 | 91爱视频| 91麻豆精品传媒一二三区 | 国产又黄又猛又粗又爽 | 日韩欧美小视频 | 欧美性大战久久久久久久 | 久久久久久久岛国免费网站 | 国产.com | 国产噜噜噜噜久久久久久久久 | 小12箩利洗澡无码视频网站 | 国产噜噜噜 | 亚洲视频在线观看一区 | 色网站入口 | 日韩精品综合 | 性裸体bbwbbwbbwbbw | 久久中文字幕人妻熟av女 | 欧美性猛交xxxx乱大交丰满 | 国模吧无码一区二区三区 | 亚洲一区二区三区精品动漫 | 黄色精品网站 | 国产乱淫av免费观看 | 人少妇精品123在线观看 | 国产a级片免费看 | 亚洲美女视频在线 | 波多野结衣成人在线 | 免费观看一级黄色片 | 茄子av在线 | av免费观看在线 | 播放灌醉水嫩大学生国内精品 | 国产黄色a级 | 中文在线字幕免费观 | 国产在线拍揄自揄拍无码 | 中文字幕av日韩精品一区二区 | 少妇性色淫片aaa播放 | 命带桃花1987在线 | 另类第一页 | 亚洲人视频在线 | av激情久久 | 又大又硬又爽免费视频 | 日韩久| 欧美亚洲免费 | 亚洲va韩国va欧美va精品 | 欧美在线免费看 | 国产一级片免费观看 | 国产刺激高潮av | 欧美三级网 | 日韩一区二区三区四区五区六区 | 黄色一级片在线免费观看 | 国产精品videossex久久发布 | 亚洲国产成人久久综合一区77 | 精品国产18久久久久久二百 | 无码国产精品一区二区免费3p | 久久九九精品99国产精品 | 久久综合噜噜激激的五月天 | 亚洲国产一区在线 | 国产福利91精品一区二区三区 | 国产精品无码制服丝袜 | 男女一进一出超猛烈的视频不遮挡在线观看 | 国产激情网 | 免费观看性欧美大片无片 | 91亚洲成a人片在线观看www | 人妻无码中文久久久久专区 | 亚洲精品一区二区三区大桥未久 | 免费人成在线观看 | 国产精品国产三级国产普通话99 | 牲高潮99爽久久久久777 | 二色av | 日本一道高清一区二区三区 | 亚洲视频手机在线观看 | 久久免费看毛片 | 中文字幕 国产 | 一级做a爰片久久 | 永久在线 | 性饥渴艳妇性色生活片在线播放 | 97精品一区二区视频在线观看 | 亚洲精品成a人在线观看 | 久久久精品麻豆 | 男人扒开女人腿桶到爽免费 | 狠狠干婷婷 | 日韩欧美一区二区三区黑寡妇 | 久久女性裸体无遮挡啪啪 | 天堂在线www天堂在线 | 国产麻豆剧果冻传媒星空视频 | 麻豆一区二区三区蜜桃免费 | 精品久久久久久久久久岛国gif | 国产成人亚洲欧洲在线 | 亚洲国产丝袜 | 成人免费观看男女羞羞视频 | 欧美午夜精品久久久久久浪潮 | 嫩草网站 | 国外亚洲成av人片在线观看 | 女人的精水喷出来视频 | 欧美又粗又大aaa片 熟女少妇内射日韩亚洲 | 精品人妻无码一区二区色欲产成人 | 亚洲不卡免费视频 | 人妻精品久久久久中文字幕69 | 操少妇视频| 久久精品国产久精国产一老狼 | 国产女人毛片 | 中文字幕人妻少妇引诱隔壁 | 欧美二级片 | 久草成人在线 | 99热在线免费观看 | 91艹| 97在线看| 亚洲色图偷拍 | 一本a道v久大 | 真人抽搐一进一出视频 | 成人精品av | 亚洲自拍成人 | 亚洲三级在线视频 | 中文乱字幕视频一区 | 国产精品嫩草影院ccm | 熟妇人妻久久中文字幕 | 播放灌醉水嫩大学生国内精品 | 91精品国产91久久久久久吃药 | 污污内射在线观看一区二区少妇 | 中文在线观看免费 | 国产91在线视频观看 | 欧美日韩一区二区三区四区 | jizz欧洲 | 在线观看91精品国产入口 | 中文字幕欧美久久日高清 | 久久春色 | 欧美精品一区在线观看 | sese国产| 制服丝袜在线第一页 | 久久一区精品 | 天天毛片| 亚洲精品丝袜一区二区三区 | 久久盗摄| av网站久久| 中国农村一级片 | 欧美岛国国产 | 最近中文字幕在线视频 | 亚洲亚洲人成综合网络 | 久久久久偷看国产亚洲87 | 国产精品视频免费在线观看 | 国产精品久久久久久久免费观看 | 成年人免费看毛片 | a视频| 一级欧美一级日韩 | 91久久捆绑调教美女 | 久久国产美女视频 | 亚洲精品aⅴ | 性色av一区二区三区红粉影视 | 性开放网站 | 91调教打屁股xxxx网站 | 人人妻人人澡人人爽欧美一区双 | 亚洲毛片儿| 提莫影院av毛片入口 | 永久免费的av在线电影网 | 精品国产一区二区三区四区四 | 天天干视频在线观看 | 欧美一区二区三区黄色 | 久久成人免费网站 | 911国产视频 | 日本xxxxl码在中国是几码 | 亚洲乱码日产精品一二三 | 国产成人精品在线播放 | 香蕉久久av一区二区三区 | 国精产品999国精产品蜜臀 | 欧美整片在线观看 | 自拍一区在线 | 国产一级做a爰片在线看免费 | 日本黄色中文字幕 | 初尝性事后的女的 | 亚洲精品综合五月久久小说 | 亚洲另类欧美综合久久图片区 | 鲁一鲁一鲁一鲁一澡 | 香蕉视频在线免费播放 | 日韩欧美精品一区 | 国产熟妇搡bbbb搡bbbb搡 | yy6080午夜 | 欧美性猛交xxxx久久久 | 日本成熟老妇乱 | 黄色大片免费在线观看 | 欧美一区二区喷水白浆视频 | 亚洲视频在线免费观看 | 亚洲女同疯狂舌吻唾液口水美女 | 波多野结衣乳巨码无在线 | 国产成人久久婷婷精品流白浆 | 欧美大片免费观看在线观看网站推荐 | 六月丁香色婷婷 | 福利片av | 好爽又高潮了毛片免费下载 | 91在线视频观看 | 自拍偷拍欧美亚洲 | 人人爱免费在线观看 | 无码精品人妻一区二区三区人妻斩 | 一二三不卡 | 一级黄网站 | 色婷婷综合成人av | 国产福利片在线 | 日韩欧美在线一级 | 精品国产乱码久久久久久丨区2区 | 国产丰满大乳奶水在线视频 | 亚洲熟女乱色一区二区三区 | 国产精品对白刺激久久久 | 无码 人妻 在线 视频 | 国产永久视频 | 亚洲一区观看 | 思热99re视热频这里只精品 | 最新三级网站 | 亚洲最大成人在线观看 | 快色视频在线观看 | 中文字幕精品久久一二三区红杏 | 国产在线观看你懂的 | 性欧美另类 | 国产一级二级三级在线观看 | 亚洲天堂视频一区 | 中文字幕亚洲精品日韩 | 激情久久av一区av二区av三区 | 亚洲春色综合另类网 | 黄色一级图片 | 91porn国产成人福利论坛 | 黄 色 软件 成 人在线 | 日韩中文字幕视频在线观看 | 粉嫩av一区二区三区四区在线观看 | av站| 成人免费观看av | 免费精品一区二区三区视频日产 | 国产成人无码a区视频在线观看 | 夜夜嗨网址 | 成人av一区二区兰花在线播放 | 日韩欧美一区二区三区免费观看 | 久久国产三级 | 日本黑人一区二区免费视频 | 国产真实乱人偷精品视频 | 亚洲精品一区二区三区99 | 免费精品国产 | 欧美 日韩 一区二区三区 | 亚洲精品在线观看免费 | а√天堂www在线天堂小说 | 性饥渴的农村熟妇 | 国产sm主人调教女m视频 | 国偷自产一区二区三区蜜臀 | 亚洲午夜久久久 | 亚洲精品一品区二品区三品区 | www色偷偷com | 一区二区三区入口 | 国产日韩一级 | 国产精品高潮呻吟av久久动漫 | 精品国产91乱码一区二区三区 | 亚洲一区日韩 | 可以免费在线观看的av | 国产一级黄色av | 亚洲一区二区三区av天堂 | 国产精品伦一区二区在线 | 黄色av毛片| 黄免费在线| 国精品人妻无码一区免费视频电影 | 天天躁日日躁很很很躁 | 福利资源在线 | 日韩最新网址 | 午夜大片网 | 中文字幕免费高清 | 中文字幕无线精品亚洲乱码一区 | 叶山小百合av一区二区 | 深夜影院在线观看 | 青青超碰 | 超碰按摩| 欧洲熟妇色xxxx欧美老妇多毛 | 午夜美女裸体福利视频 | 中文字幕一区二区三区在线观看 | 成人免费视频播放 | 成年人黄色av | 毛片基地黄久久久久久天堂 | 美女无遮挡免费视频网站 | 深爱激情久久 | 一级片av | 欧产日产国产蜜网站 | 精品少妇视频 | 9l视频自拍蝌蚪自拍丨视频 | 黄色片大全 | 午夜少妇拍拍视频在线观看 | 女体拷问一区二区三区 | xsmax国产精品 | 免费网站av | 大陆一级黄色片 | 欧美视频1区 | a∨av白浆导航 | 深夜免费福利视频 | 香蕉网在线视频 | 性xxxx18免费观看视频 | 国产午夜精品久久久久久久 | 在线视频一区二区三区 | 国语啪啪 | www.欧美在线观看 | 男女做爰全过程免费的软件 | 日韩免费av在线 | 最新国产精品精品视频 | 欧美黑人巨大xxxxx | 青娱乐精品视频 | 亚洲一区二区免费在线观看 | heyzo国产| 伊人精品 | 朝鲜一级特黄真人毛片 | 伊甸园精品99久久久久久 | 在线视频网站www色 300部国产真实乱 | 高清精品国内视频 | 国产天堂精品 | 四虎精品8848ys一区二区 | 中文字幕免费高清在线观看 | 欧美老熟妇喷水 | 日本三级韩国三级三级a级按摩 | 成人乱人乱一区二区三区软件 | 欧美精品乱码久久久久久按摩 | 日本久久久久久久做爰片日本 | 伊人福利| 日韩午夜伦 | 中文字幕乱偷无码av先锋 | 国产又粗又猛又大爽又黄 | 国产精品第八页 | 午夜视频福利 | 久久久久久久综合色一本 | 久久影音 | 黄色永久免费网站 | 爱爱视频免费网址 | 国产三级在线视频 一区二区三区 | 国产成人精品午夜视频 | 亚洲一区二区三区四区五区午夜 | 91成人免费版 | 日本一级待黄大片 | 一本色道av立川理惠 | av网站在线免费 | 欧美丰满大乳大屁股毛片图片 | а√中文在线资源库 | 一级二级黄色大片 | 中文字幕无码乱码人妻系列蜜桃 | 一级全黄少妇性色生活片毛片 | 亚洲精品在线不卡 | 乱h高h翁欲渴 | 深夜av在线 | 女人与拘做受全过程免费视频 | 黄色一大片 | 欧美成人高清在线播放 | 成人h视频在线 | 国产成人精品一区二区三区福利 | 国产黄色a级毛片 | 国产精品久久久久久久久久久久久久久久 | 国产男女爽爽爽免费视频 | 午夜激情看片 | eeuss一区二区| 婷婷中文网 | 欧美一级大黄 | 亚洲网站在线看 | 久久综合影视 | 91av久久久| 亚洲毛片av日韩av无码 | 亚洲精品国产品国语在线观看 | av手机免费观看 | 最新av导航| 老头边吃奶边弄进去呻吟 | 精品国产欧美一区二区 | 日日噜噜夜夜狠狠久久无码区 | 色偷偷偷在线视频播放 | 91精品国产成人观看 | 国产成人在线观看免费网站 | 久草免费福利视频 | 久久久久久久久免费看无码 | 国产精品欧美一区二区 | 日韩精品视频一区二区三区 | 欧美7777| 伊人色图| 国产精品久久久久久久 | 色天使久久综合网天天 | 男人吃奶摸下挵进去啪啪软件 | 亚洲一区二区三区乱码aⅴ蜜桃女 | 亚洲丝袜一区二区 | 国产chinesehdxxxx麻豆网 | 亚洲最大免费视频 | 69久久精品| 日韩av无码中文无码电影 | 中国一级女人毛片 | 欧美日韩一区二区三区69堂 | 国产免费看黄 | 久久成人福利视频 | 欧美大片免费 | 无人在线观看免费高清视频的优势 | 国产欧美a| 一级片视频网站 | 男女无套免费视频网站 | 成人网在线免费观看 | 日韩精品一区中文字幕 | 欧美黄页 | 在线精品国产成人综合 | 人人妻人人插视频 | 国产深夜福利在线 | 中文字幕精品久久久久人妻红杏ⅰ | 国产精品久久久久久99 | 天天想夜夜爽 | 91精品国产色综合久久不卡粉嫩 | 女攻总攻大胸奶汁(高h) | 欧美午夜视频在线观看 | 四川话毛片少妇免费看 | 免费黄色欧美视频 | 黄色免费的视频 | 国产一区二区三区视频在线 | 中文字幕第5页 | 乌鸦热v2ba在线观看 | 777午夜福利理论电影网 | 亚洲一级av毛片 | 一本久道高清无码视频 | 天天色天天射天天操 | 中文字幕一区二区三区精华液 | 久久精品视频国产 | 男人的天堂久久 | 国产精品一二三四区 | 国产精品免费无遮挡无码永久视频 | 国产精品爽爽久久久久久豆腐 | 97久久精品人人爽人人爽蜜臀 | 国产男女爽爽爽免费视频 | av在线免费观看网站 | 日本肉体xxxx裸体137大胆图 | 巨粗进入警花哭喊求饶在线观看 | 成人自拍一区 | 热99精品视频| 中文字幕日本一区 | 青青草华人在线 | 五月婷婷激情在线 | 亚洲国产精品18久久久久久 | 久久国产精久久精产国 | 老司机成人免费视频 | 国产精品久久久久久久龚玥菲 | 国产欧美久久一区二区 | av看片在线| 日韩视频在线免费观看 | 国产成人无码av在线播放dvd | 国四虎影永久去哪里了 | 在线观看日本www | 亚洲国产婷婷香蕉久久久久久 | 久久久午夜爽爽一区二区三区三州 | 69网站在线观看 | 特级淫片裸体免费看 | 国产在线精品一区二区三区不卡 | 午夜激情导航 | 欧美在线中文 | 九九国产在线观看 | 99精品免费在线观看 | 婷婷狠狠干 | 欧美精品乱码99久久蜜桃 | 男ji大巴进入女人的视频 | 亚洲 中文字幕 日韩 无码 | 懂色aⅴ精品一区二区三区蜜月 | 日本女人一级片 | www.久久婷婷| 婷婷五月综合激情中文字幕 | 九九九九九九九九九 | 尤物97国产精品久久精品国产 | 欧美视频免费 | 亚洲色图图 | 少妇激情网 | 黄色永久视频 | 亚洲无吗av | 麻豆精品久久久 | 成人激情四射网 | 国内丰满少妇猛烈精品播 | 国产乱码一区二区三区咪爱 | 熟妇人妻av无码一区二区三区 | 一级片的网站 | 天天射天天干 | 欧美日韩不卡在线视频 | 全国最大成人免费视频 | 国产精品免费久久久久影院 | 国产精品极品美女自在线观看免费 | 亚洲 欧美日韩 国产 中文 | 少妇色诱麻豆色哟哟 | 特级毛片全部免费播放器 | 天天干免费视频 | 五月天免费网站 | 亚洲一区二区三区在线观看网站 | 男子天堂av | 成人无码视频免费播放 | 污网站在线观看免费 | 91精品国产综合久久久蜜臀图片 | 欧美成人精品三级在线观看播放 | 婷婷丁香激情五月 | 午夜视频免费在线 | 少妇又紧又色又爽又黄又刺激 | 亚洲成在人网站无码天堂 | 99热国产精品 | 中文字幕av伊人av无码av | 日日碰狠狠丁香久燥 | 国产精品中文久久久久久久 | 亚洲女同志亚洲女同女播放 | 亚洲aⅴ在线无码播放毛片一线天 | 污夜影院 | 大学生a做爰免费观看 | 激情综合图区 | 久久99青青精品免费观看 | 色哟哟精品视频在线观看 | 国精产品一区一区三区 | 97视频网站 | 亚洲国产成人精品女 | 无遮挡色视频免费观看 | 特一级黄色 | 99国产精品久久久久99打野战 | 国产一区亚洲二区三区 | 久久国产精品久久喷水 | 亚洲精品国产熟女久久久 | 国产乱色 | 在线伊人网 | 久一久久| 日韩在线一区二区三区免费视频 | 伊人手机在线视频 | 亚洲国产成人片在线观看无码 | 青青免费视频在线观看 | 性大毛片视频 | 欧美xxxx做受欧美1314 | 国产精品白浆无码流出 | 毛片一卡二卡 | 大地资源中文第3页 | 亚洲欧美综合久久 | 亚洲xxxx丝按摩袜 | 国产精品亚洲一区二区三区在线 | 99免费在线播放99久久免费 | 国产一级淫片免费 | 人人cao| 天天爱天天射 | 国产成人免费爽爽爽视频 | 亚洲 另类 在线 欧美 制服 | 成人av中文字幕 | 久久午夜羞羞影院免费观看 | 人人添人人澡人人澡人人人人 | 激情六月天 | 狠狠色视频 | 国精产品一区一区三区mba下载 | 午夜视频在线观看入口 | 国产又黄又爽又猛免费视频网站 | 免费一级淫片a人观看69 | 亚洲国产精品成人女人久久 | 天天av天天av天天透 | 亚洲国产精品无码久久久秋霞1 | 91精品国产欧美一区二区成人 | 久久久久久久久久久99 | 欧美精品在线一区二区三区 | 久久亚洲精品中文字幕 | 电车侵犯高潮失禁在线看 | 成人性视频免费看的鲁片 | 国产成人精品男人的天堂 | 特级a级毛片 | 日本又黄又猛又爽免费视频 | 三级国产在线 | 日韩免费大片 | 国产v日产∨综合v精品视频 | 午夜大尺度做爰激吻视频 | 亚洲精品国产suv一区别 | 一个综合色 | 亚洲视频播放 | 国产中文字幕网 | 日韩天堂在线 | 日韩欧美一区二区三区免费观看 | 欧美高清视频一区二区三区 | 丰满老熟女毛片 | 国产精品久久久久久久久免费软件 | 人妻系列无码专区无码中出 | 日韩视频第一页 | 久久久久久久999 | 亚洲欧美在线一区 | 高清国产mv在线观看 | jizz欧美2黑人| 久久午夜无码鲁丝片午夜精品 | 久久久久高潮综合影院 | 粉嫩av一区二区三区免费观看喜好 | 香港三级韩国三级日本三级 | 亚洲精品中文字幕一区二区三区 | 亚洲日本va午夜中文字幕一区 | 欧美福利视频网站 | 东北老女人高潮大叫对白 | 美女视频黄是免费 | 亚洲日本国产精华液 | 女人下边被添全过视频 | 欧洲mv日韩mv国产 | 亚洲成人7777 | 我和房东少妇激情 | 最近在线更新8中文字幕免费 | 一区二区国产在线观看 | 久久久久久久久久网站 | 九九综合九九综合 | 久久99精品久久久久久噜噜 | 99热精品久久只有精品 | 一本大道久久久久精品嫩草 | 午夜精品久久久久久99热小说 | 天天摸天天看天天做天天爽 | 人碰人操| 青青在线 | 亚洲精品久久夜色撩人男男小说 | 老头糟蹋新婚少妇系列小说 | 午夜家庭影院 | 午夜男人av| 亚洲第一激情 | jizz久久精品永久免费 | 性做久久久久久久免费看 | 精品久久人妻av中文字幕 | 日韩成人在线影院 | 91视频分类| 日韩a级黄色片 | 国产成人精品久久综合 | 亚洲天堂偷拍 | 国产中文字幕一区二区三区 | 欧美 日韩 国产在线 | 久久国产一级 | 97一区二区三区 | 国产韩国精品一区二区三区 | 女人做爰视频偷拍 | 欧美白嫩少妇xxxxx性 | 三级av片| 成人网在线播放 | 国产一级做a爱片 | 男女的隐私视频网站 | 国产精品一品二区三区的使用体验 | 麻豆射区| 久热国产vs视频在线观看 | 又嫩又硬又黄又爽的视频 | ,亚洲人成毛片在线播放 | 国产色影院 | 视色视频 | 国产高潮流白浆视频 | 在线人人车操人人看视频 | 久久综合热| 岛国一区二区 | 成人av网页 | 玖玖视频 | 日韩av不卡在线 | a一区二区三区乱码在线 | 欧洲 | 亚洲 欧美 日韩 综合 | 国产又爽又黄又无遮挡的激情视频 | 亚洲综合色吧 | 亚洲激情一区二区 | a视频免费在线观看 | 福利一区在线观看 | 韩国午夜理伦三级2020苹果 | 搡老熟女老女人一区二区 | 佐山爱成人av在线播放 | 黑人狂躁日本妞一区二区三区 | 日韩毛片基地 | 日本美女a级片 | 无码人妻丰满熟妇区bbbbxxxx | 亚洲三级一区 | 久久人人爽人人爽人人片av东京热 | 国产福利视频一区二区 | 国产成人精品123区免费视频 | 亚洲一区二区免费 | 五月婷婷在线视频 | 国产精品一区二区无线 | 国产精品扒开腿做爽爽爽a片唱戏 | 一本色道久久亚洲综合精品蜜桃 | 久久久久无码精品国产h动漫 | 最新黄色网址在线观看 | 99精品在线视频观看 | 农村欧美丰满熟妇xxxx | 伊人自拍 | 天天躁日日躁狠狠躁av麻豆男男 | yes4444视频在线观看 | 欧美性xxxx在线播放 | 丰满白嫩欧洲美女图片 | 国产女上位 | 亚洲欧美日韩成人在线 | 一本加勒比hezyo中文无码 | 国产精品视频一区二区噜噜 | 天堂√在线中文资源网 | 国产乱能 | 免费在线黄色片 | tube欧美巨大44 | 在线观看黄色网页 | 美女视频黄a视频免费全程软件 | 国产呻吟久久久久久久92 | 久久11| 欧妇女乱妇女乱视频 | 欧美午夜精品久久久久久人妖 | 日产麻无矿码直接进入 | 人善交精品播放 | 国产成人精品午夜视频免费 | 精品乱码一区内射人妻无码 | 中文字幕在线影视 | 亚精区在二线三线区别99 | 精品久久久中文字幕人妻 | 国产精品久久久久久久久久10秀 | 欧美日韩亚洲另类 | 青青国产在线视频 | 日韩成人自拍 | 天海翼一区二区三区高清在线观看 | 午夜激情综合 | 天天免费视频 | 欧美日韩在线免费看 | 六月婷婷在线观看 | 国产精品久久久久久久岛一牛影视 | 亚洲国产精品国自产拍av秋霞 | 国产男女猛烈无遮掩视频免费网站 | 少妇精品偷拍高潮白浆 | 亚洲免费区 | 日韩在线视 | 亚洲综合在线五月 | 国产日韩一区二区三免费高清 | 成人免费观看cn | 中文字幕一区三区 | 亚洲图片一区二区三区 | 久久无码高潮喷水 | 亚洲成av人在线观看网站 | 熟妇与小伙子matur老熟妇e | 午夜精品视频一区二区三区在线看 | 韩国主播青草55部完整 | 成色网 | 久草高清 | 一区精品二区国产 | 4hu四虎永久免费地址ww416 | 狠狠躁夜夜躁人人爽天天高潮 | 国产精品夜夜 | 依人成人综合网 | 免费在线观看小视频 | 国产精品一区在线观看你懂的 | 一本色道久久综合狠狠躁篇怎么玩 | 天天色棕合合合合合合合 | 欧美高清hd18日本 | 综合久久久久久久 | 一二三四免费观看在线视频中文版 | 无套内射无矿码免费看黄 | 在线观看av黄色 | 婷婷综合少妇啪啪喷水动态小说 | 综合激情网| 亚洲精品无码国产片 | 亚洲欧洲精品一区二区三区不卡 | 国产精品亚洲综合一区二区三区 | 一级黄色毛片子 | 日韩黄色网 | 亚洲另类激情综合偷自拍图 | 亚洲爱婷婷色婷婷五月 | 亚洲欧洲国产十 | 麻豆观看| 无码天堂va亚洲va在线va | 乌克兰黄色片 | 久久综合网欧美色妞网 | 亚洲乱码xxxxxxxx | 久久精品视频在线 | 国产精品视频不卡 | 91五月婷蜜桃综合 | 国产伦理一区二区 | 99国产偷伦视频在线观看 | 一区二区三区www | 欧洲人妻丰满av无码久久不卡 | 麻豆一区二区三区精品视频 | 国产手机在线视频 | 欧美丰满老熟妇aaaa片 | 91视频在线观看免费 | 紧缚捆绑精品一区二区 | 特级毛片在线播放 | 无码人妻久久一区二区三区不卡 | 激情综合图 | 51精品国产人成在线观看 | 久久理伦 | 午夜人体一级裸片免费观看 | 欧美精品性生活 | 成人毛片100免费观看 | 222aaa亚洲精品国产 | 亚洲婷婷综合久久一本伊一区 | 亚洲人成无码网站久久99热国产 | av在线网站无码不卡的 | 毛片内射-百度 | 国产人妖在线 | 亚洲国产精品无码专区 | 先锋影音一区二区三区 | 日韩免费高清大片在线 | 亚洲午码 | 人妻有码av中文字幕久久琪 | pics艳丽的少妇asian | 精品视频一区二区三区四区戚薇 | 毛片视频网站在线观看 | 91九色porn| 国产精品久久久久久久久久久久 | 成人毛毛片 | 国产裸体舞一区二区三区 | 经典国产乱子伦精品视频 | 无码国产一区二区三区四区 | 韩国一区二区三区视频 | 四虎免费久久 | 国产精品美女久久久久av福利 |