九九色综合_性69交片免费看_亚洲一区二区三区久久精品_精品一久久_欧美一级黄视频_污免费网站

首頁

應用圖標 | 全面解析,助力設計出更優質的應用圖標!

杰睿

編輯導語:各大APP的圖標都各有特點,圖標的設計也是一門學問。在這篇文章中,作者全面解析了各類APP圖標設計背后的用意,一起學習一下吧。

如果說一個人的臉面、衣著打扮是給陌生人的第一印象,那么APP的應用圖標風格與氣質就是留給新用戶的第一印象,關系著用戶是否對這個APP感興趣、是否會打開應用介紹、是否會點擊下載按鈕起著決定性的作用。

一個好的應用圖標有著無限可能,無形中對用戶產生強大的吸引力,并有一種想要了解的沖動,況且圖形本身就能讓人充分發揮想象力,這就是為什么不管在哪個應用市場第一眼看到的是應用圖標,而非應用名稱。

在一部手機就能解決很多問題的互聯網時代,相信每個人都有下載幾十上百個APP,琳瑯滿目的列表,應用圖標是否能在第一時間抓住用戶眼球(目標明確或鐵粉除外)非常重要,一個視覺傳達清晰且有吸引力的圖標能提升用戶點擊率,即便用戶只使用過一次,相對來說,印象也會更深刻。

本文根據筆者對大量應用圖標的分析、結合設計準則進行總結,希望能幫助大家在設計過程中規避掉一些常見的問題,歡迎一起探討、取長補短、共同進步。

分享目錄

  1. 四大設計原則
  2. 色彩的表現形式
  3. 主體圖形分類
  4. 背景圖案及元素
  5. 主體圖形的表現手法
  6. 應用圖標設計流程
  7. 總結

一、四大設計原則

應用圖標代表產品的外在形象,設計的精美與否決定著用戶的第一印象,是否產生打開的欲望跟當前圖標的視覺所傳達的內涵有最直接的關系。應用圖標雖然不同于設計LOGO,表現方式也千變萬化,但必定有自身的設計準則要去遵守,利用設計的手段將視覺傳播的價值最大化。

1. 可識別性

首先,應用圖標需要盡量簡約。過于復雜的圖標會增加用戶的理解成本、甚至誤導用戶,但如果過于追求簡約,缺乏細節、個性化以及必要的隱喻信息,也會因過于單調,造成表意不明確等問題。

簡約并非簡單,設計師需要通過專業的知識進行合理的簡化,以提升應用圖標的設計品質,方便用戶在不同場景中都能清晰的辨認。其次,需表意明確、易于理解。

應用圖標代表的是產品的行業屬性、功能作用或與眾不同的優勢,要讓用戶第一眼就能識別出所代表的含義,貼近用戶的心理預期。

簡約易識別是應用圖標必備的基礎屬性之一,這也是為什么大部分產品都將logo作為應用圖標主視覺的原因,因為logo設計考慮到了方方面面以及后續延展的問題,即便有些logo較為復雜,也會通過提取局部元素、吉祥物、主體色等方式來強化應用圖標屬性,給用戶形成獨特的記憶,以提升應用的下載量和使用率。

2. 關聯性

應用圖標應該與產品的屬性、品牌有極強的關聯性,通過品牌延展賦予產品更強的生命力,讓用戶從接觸應用圖標的第一眼開始、再到后面的使用,整個過程始終都能保持清晰且統一的品牌認知,通過和諧統一的視覺效果,帶來更好的用戶體驗。

應用圖標需要與品牌之間必須保持高度的一致,著重從以下幾點體現:

1)LOGO

毫無疑問,用品牌logo作為主體圖形是最佳選擇,結合品牌色搭配使用,能將產品核心理念、品牌形象的傳播效果達到極致,在APP應用市場中,大家會發現大多數產品都在使用logo作為應用圖標的主視覺圖形。

2)品牌色

品牌色即主體色,將貫穿APP所有頁面的元素組件。眾所周知,每種顏色都有其特定的含義,能傳遞給用戶不同的心理感受。用主體色作為應用圖標的背景色,可以烘托出產品的情感氛圍,并與進入應用后的主體色遙相呼應,以最小的視覺跳躍性將前后關聯,強化用戶對產品的記憶感知。

3)IP/吉祥物

吉祥物屬于品牌logo延展的一部分, 也是產品的靈魂。當logo較為復雜時,因移動設備應用圖標位置空間有限,logo細節無法在短時間被用戶捕捉,不宜展示時,使用IP/吉祥物或其局部元素代替也是不錯的選擇。

4)產品名稱

如果說logo是產品的臉面,通過暗示和隱喻給用戶無限遐想并讓用戶記住它的樣子,那么名稱的出現就相當于產品主動進行了自我介紹,并讓用戶知道如何稱呼它。

將產品名稱作為應用圖標需謹慎使用:首先,文字傳達的信息量有限:其次,用戶對于圖形的理解效率要優于文字;再者,應用圖標都會有對應的產品名稱展示(應用市場在右、桌面在下方),多少有些信息重復。

所以大家見到的應用圖標主體是產品名稱的不外乎兩種情況,一種是產品本身將名稱設計成字體logo,例如美團、懶飯;另一種是將產品名稱作為logo的輔助信息提示,例如繽紛生活。

以上是應用圖標與品牌屬性關聯最常見的四種方式,在設計中可靈活搭配,使用兩種及以上的方式組合,能將品牌傳播的途徑發揮到最大值。

3. 差異化

筆者上小學時,曾經在一次彩鉛繪畫作業中得到了老師的真心夸贊,但內心卻備受打擊。老師對著我畫的桃子說“這西紅柿畫的太像了”。

舉這個例子似乎并不恰當,但結果是驚人的相似,筆者想要陳述的一個觀點是,不要讓你辛苦做出的設計成為別人的嫁衣,讓用戶誤以為這是其他企業的“某某某…”產品。

目前,應用市場中的APP數量巨大,且還處于增長的趨勢,同行業的圖標設計同質化相當嚴重。想要讓自身產品應用圖標脫穎而出,就有必要在設計之前做好競品分析,借鑒競品的優點,在突出自身產品核心特征、屬性的基礎上,還要用不同的表現手法突出其差異性,給用戶留下獨特的印象,避免同質化。

4. 可用性

應用圖標在設計完成之后(測試小組)、上線后(用戶反饋)進行可用性測試,主要針對圖標對用戶的吸引力、識別度等問題作進一步優化,以確保圖標在不同場景中都能被用戶清晰識別并提升印象。

雖然可用性測試存在設計之后,但這一環節至關重要,它決定著產品的下載量以及使用率。

二、圖標顏色的表現形式

1. 單色圖標

單色圖標通常以品牌色作為背景色、logo以反白的形式呈現,既能突出品牌色、還能用于烘托主體圖形,不過這種方式僅適合色值單一的logo,多色值可能會與背景色產生融合或色彩反差太大影響視覺傳達效果。另外,如果logo視覺重量較大,也可使用白色背景+原品牌色logo,這樣會更直觀。

單色應用圖標雖然色彩比較單一、表現形式也受到局限,但視覺清晰、簡潔且識別性強,如果能運用其他設計手法豐富圖標細節就再好不過了。

2. 多色圖標

多色圖標使用了兩種及以上的顏色,更多是直接使原多色彩的logo圖形+白色背景,無需任何加工,控制好尺寸規范就行。如果是運營推廣所需,如春節、618、雙11等活動,會對應用圖標加以其他色彩烘托、點綴元素或標簽等,色彩就會更多,但一般都具有時效性,活動過期即圖標復原。

多色圖標的細節、層次更加豐富,設計時確保各色彩搭配協調,一旦因色彩過多造成視覺混亂,就得不償失了。

3. 漸變圖標

無論是單色還是多色,添加漸變會讓應用圖標更加細膩、耐看。漸變的表現手法應用廣泛,簡單的漸變能讓圖標細節豐富,同時也具備空間感和微立體感。

設計漸變色圖標需注意圖形銜接處的對比度,花里胡哨的漸變色會拉低品質感,要確保色彩的和諧,讓圖標視覺清晰且容易識別。

4. 顏色疊加

單色、多色或是漸變都可通過調整不透明度、圖層疊加的方式來豐富應用圖標細節,相比純粹的漸變,立體感和空間感更強。使用顏色疊加需注意色彩對比及明暗關系,否則會衍生出臟亂的顏色。

5. 色環的運用

環形構圖為主,由多個元素復制并以統一的中心點、旋轉角度,旋轉衍生出一個主體圖形。這種應用圖標的設計構圖飽滿、色彩豐富,能給用戶傳遞出輕松愉快的視覺體驗。

需要注意的是,由于顏色較多,至少在三種顏色及以上,否則無法構成色環類的主體圖形(錯覺)。如果沒有超強的配色功底,最好按照色環的順序依次取色,即便沒有太大的優勢,但至少不會出錯。

三、主體圖形的分類

一個好的應用圖標應該是多元素、多信息結合運用,才能達到更好的效果。雖然大部分主體圖形使用了logo,但并不影響設計師們對其進行拆解,提取局部元素、色彩、名稱等信息進行二次創作,從原則上來說,是一次線上logo的設計。

應用圖標種類繁多,切不可盲目跟風,需經過認真的分析、研究,找到最適合自身產品的才是最重要的,且每種類型并非獨立,在條件允許的情況下還能跨類型靈活搭配、相互組合。

1. 中文字體

1)單中文字體

僅次于圖形logo的表現方式,通常會在產品名稱中提取一個具有代表性的文字對筆畫、結構等進行再設計。基于國人文化的優勢以及對漢字的敏感度,既能降低用戶對應用圖標的認知成本、還能根據產品特性設計出差異化的視覺效果。

不過因為文字筆畫的原因,單個文字提取難度較大,避免信息傳遞有誤或影響識別度,建議選擇筆畫較少且具有特性/代表性的文字,若達不到條件,最好選擇其他表現方式。

2)多中文字體

使用兩個及以上漢字,大多直接將產品名稱用在圖當中,對用戶來說更容易記憶,有利于品牌推廣。相比單字體,設計感會受到一定的局限,不宜做過于夸張的表現方式,因文字較多,設計時一定要注意文字的協調與可讀性。

多文字圖標建議將字數控制在2~6個范圍內,3字以內一行顯示,超過3字即兩行顯示且最多不超過兩行,否則會影響圖標的識別效果。

3)中文、圖形組合

適當添加帶有產品特性的輔助圖形,用引導或指向性的方式對文字進行強調,圖標細節會更豐富,可以突出產品想要傳達的信息、以及不同的氣質,還能增加圖標的形式感和趣味性。注意添加的圖形不要過于復雜,不然會讓信息混亂,適得其反。

4)中文圖形化

根據單個字體筆畫的特點進行巧妙的變形或延展,會讓你的應用圖標更具設計感、品質好。這種方式對設計功底的要求較高,需要確保字體的識別度,切勿霸王硬上弓,如果是為了設計而設計,就違背的信息傳播的初衷。

5)中文、IP形象組合

由產品名稱和IP形象組合而成,這種方式能通過品牌IP不同的視覺形象帶給用戶情感化的體驗,讓產品更具親和力,拉近與用戶之間的關系。例如,IP的喜、怒、哀、樂表情變化分別對應用戶不同的心理感受,以加深用戶對產品的印象及品牌認知。

2. 英文字體

1)單英文字體

單英文字體通常是提取產品名稱拼音首字母或英文首字母進行創意設計,跟中文字體相比,基于字母本身線條的簡潔及流暢性,再結合產品特點,很容易設計出兼具美感、高識別度的應用圖標。

需要明確一點,不管如何創意,也僅局限于在26個英文字母中選擇,如果想設計出差異化的應用圖標,對設計師來說,是一個很大的挑戰。

2)多英文字體

跟多中文不同,中文產品名稱在移動端基本不會超出6個字,而全拼音或英文名則多達十幾位甚至更多,為了用戶能更好容易識別、記憶,依然是提取不同拼音或單詞的首字母(中文全稱)進行設計。

多英文的應用圖標很很容易形成獨有的產品簡稱,更利于用戶記憶,但字母一定不要過多,如果無法刪減,那就只突出特定的2~4個字母。

3)其他類型

字母與圖形、IP形象組合以及字母圖形化,其表現方式、設計原則與中文字體圖標類似,這里不做過多闡述。

3. 數字符號

1)數字設計

人們對于數字來說是非常敏感的,不存在文化差異或認知誤區,基于數字便于記憶且容易識別的特點,將數字圖形化后應用到圖標當中,會讓產品具有親和力,有利于品牌傳播。單純的數字過于簡單,需增加一些細節,豐富圖標層次,讓其具備獨特的記憶點,不然會顯得單調。

2)符號設計

每個符號都有特定的含義,因此,在選擇符號作為應用圖標之前,首先需要了解清楚該符號是否能體現出產品屬性以及想要表達的意思,例如“¥”適合攢錢、理財相關的應用,而“+-×÷”則適合用于計算器或數學相關的應用;其次,符號跟數字一樣,都比較簡單,需經過二次創作后才會使用。

4. 扁平化圖形

1)線性圖形

線性風格的應用圖標能給人一種簡潔輕快的感覺,設計師通過提取產品的品牌信息、功能服務等進行創意設計,將得到的關鍵詞以一條或多條線段組成高度抽象的圖形來達到信息傳播的目的。

通常以反白的形式出現,背景可以是單色、漸變色或加以輔助圖形點綴。

線性圖形非常適合文藝類簡約風格的應用,通過不同的線條帶給用戶不同的心理感受,例如直線代表大方、專業、正直;斜線代表張力、速度;曲線代表流暢、飄逸及柔軟等。

設計時,切記圖形不能過于復雜,否則會影響其辨識度,增加用戶的認知成本,也不利于品牌推廣。

2)面性圖形

也可稱之為剪影圖形,根據產品屬性,將日常生活中被大眾所熟知的動物、植物、食品、工具、玩具…等事物進行簡化,通過刻畫事物的造型輪廓來形成獨立的剪影圖形。

高識別度的剪影圖形會讓整體看起來非常醒目,提高信息傳播的效率,只要控制好造型,即便把圖標縮到很小也能清晰辨認。

因現實世界中事務的復雜性,被提煉出的圖形如果細節過多會顯的復雜且不夠干練、細節過少則難以辨認,所以需要對圖形進行創意加工,最終以確保應用圖標的功能和美感兼具。

3)幾何圖形

幾何圖形在應用圖標中使用的很廣泛,可以是線性或面性,表現形式也非常豐富,利用幾何圖形通過單獨、組合、布爾運算等方式形成簡單且個性化的創意圖形,帶給用戶簡約、現代、空間、熱鬧等不同的心理感受。

幾何圖形構圖簡潔,設計形式豐富多樣,想設計出具備設計感和差異化的應用圖標,很考驗設計師的創意能力。

5. 卡通形象

對純色剪影圖形增加太多細節,無疑是將其“大卸八塊”,變成一堆零件,但通過多色、漸變、圖層樣式等表現手法設計成卡通形象,就完全不一樣了。

卡通形象能體現出產品的生命力、親和力,以及直觀且易于理解和記憶的特質,對品牌形象的塑造、傳播起到了很好作用。

在畫卡通形象時,需要注意產品主用戶群體的年齡段,切勿一開始就把活潑可愛作為卡通形象的代名詞,避免絕對低齡化的表達,同時需要設計師有一定的繪畫功底。

6. 擬人化

利用人體的局部元素,如眼睛、嘴巴、手足、頭部等,再結合常見的表情動作進行圖形化設計,相當于給原本冷冰冰的圖形賦予了生命力,傳達出不一樣的情感,而且用戶原本就對人體元素敏感度更高,更容易打動用戶并形成較強的記憶。

擬人化的應用圖標會顯得親民,便于拉近與用戶之間的關系,適度在抽象的圖形上加入情感化(動作/表情)表達,能生動、形象的體現出產品獨有的特性。

如果想要較強的視覺沖擊力,建議元素不要過多,最好是對某個單一的元素作放大或特寫處理,讓用戶看到更多的細節,也可用夸張、比喻、襯托等表現手法強化特點。

7. 擬物化

擬物化圖標使用的比較少,它更偏向于某種行業類型,例如工具、游戲類型的應用,通過超接近于現實世界中的物體造型,基本不需要用戶思考,一眼就能理解,但也正因為這種特性,信息量的傳播受到很大局限,僅適合單一且大眾化的信息傳達。

在如今,想同時融入行業、屬性、品牌等多元化內容的信息化時代,顯然不太實用了。

四、背景圖案及元素

1. 圖形背景

應用圖標背景通常以單色、漸變色居多,除此之外,還可以添加與主體圖形相呼應的輔助圖形背景,以豐富圖標的視覺層次。圖形背景一定是為襯托或突出主體圖形的輔助存在,切勿過分表達,以免喧賓奪主。

2. 炫彩背景

當主體圖形的結構、色彩不是很復雜,且產品面對的是年輕化用戶群體時,可通過色彩拼接、晶格化或多種鮮明的色彩漸變等方式設計出炫彩效果,色彩表現豐富的應用圖標,能帶給用戶更強的視覺沖擊力。色彩可多但不可亂,需要把控好色彩之間的對比關系。

3. 運營標簽

常見于在特定的節日中,例如618、雙11、雙12及傳統節日等,產品會存在促銷、打折活動,為了更早的讓用戶知道,會在應用圖標的某個區域以標簽的方式出現,起到引導用戶的作用。

不過這種表現方式具有時效性,活動截止即圖標樣式復原。

4. 節日氛圍

通過配色或節日相關的元素點綴,營造出一種感同身受的節日氛圍。例如:春節期間,部分應用圖標背景會調整為紅色,并使用燈籠、煙花、文案等元素點綴,制造出普天同慶、與用戶同樂的喜慶感,或者在高考期間鼓勵學生,少了套路、多了真誠,給用戶留下較深的印象。

五、主體圖形的表現手法

1. 對比

通過元素的大小、長短、虛實、稀疏、方向以及不同的色彩、明暗關系等方式進行對比,形成強烈的反差效果,同時兼具張力和美感,這也是應用圖標設計中很常見的技法表現之一。

2. 對稱

對稱在自然界中隨處可見,在互聯網設計中也是如此,應用圖標中的主體圖形以對稱的方式呈現,能給用戶平衡、和諧的感覺,也讓圖標更具有觀賞性。

3. 分割

將應用圖標中的主體圖形分割,賦予不同的顏色、樣式等,明確層級劃分,可提升圖標的美感。例如:將色塊分割成不同的比例、形狀,就能組合成一個完整的熊貓圖形(百度搜“熊貓剪影”圖片)。

如果適合使用0.168黃金比例分割就再好不過了,這是被公認為最具美感的比例。

4. 重復

將相同或相近的圖形以某種規律連續性的排列,相比單調的圖形,會更加飽滿。重復性的表現手法以大小、色彩、位置、形狀等作為出發點進行有序的排列,最終形成一種規律、整齊的節奏和藝術感。

需要注意的是基礎圖形不能過于復雜,一定是有規律的重復,否則會讓圖形變的混亂,無法形成整體。

5. 重疊

在保證識別度清晰的前提下,將兩個或以上的元素相互重疊、交叉在一起,能形成前后左右的層級關系,制造空間感,同時也能將多個圖形關聯在一起,避免圖標元素零散或單調,讓整體性更強,豐富用戶視覺感知。

6. 正負形

正負形也是常見的表現手法之一,利用正圖為底,通過減去底層挖空的方式突出(錯覺)負形,將產品特征、屬性及服務多途徑的傳達給用戶,可謂是“一石二鳥”。

正負形圖標能將信息傳播最大化,且設計感十足,好的正負形圖標能給用戶形成獨特的記憶點,但設計時需要注意正、負銜接的順暢度,否則無法清晰的傳播信息。

六、應用圖標設計流程

1. 發散思維、尋找隱喻

通過產品屬性、功能或特點進行思維發散,例如:夏天,我們會想到空調、海灘、冰淇淋、比基尼、裙子(女性)、夜空等一系列相關聯的事和物,搜集起來并做好整理歸類,確定大致的設計方向。

2. 分析競品、避免同質化

確定了大致的設計方向,就去找同行業、同類型或相似的應用圖標分析其形狀、配色、組合類型等,取長補短,這也是避免同質化非常重要的一個環節,幫助自己在后續設計出具備差異化的應用圖標做鋪墊。

3. 提取關鍵詞

可以從產品名稱或功能屬性方面找出產品最想傳達的核心信息,并提煉出關鍵詞。切記,關鍵詞不可脫離帶水、表意不明確,一定要夠精煉、能表達出核心內容。關鍵詞在精不在多,如果太多,需要通過層層遞進,篩選出“一主三輔”,要知道這關系著后續應用圖標傳達信息的精準度。

4. 圖標繪制

將上一步得到的關鍵詞轉化成抽象圖形,進行視覺化提煉,這時應用圖標的雛形已經形成,再結合前面所提到的圖形分類、表現手法以及注意事項等,進入圖標繪制流程。關于圖標設計規范及原則,在之前的《圖標篇 | 圖標設計必備的基礎知識!》文章中有詳細說明,這里不做闡述。

5. 細節處理

基本圖形繪制完成后,通過添加點綴、輔助圖形、背景處理等方式豐富圖標細節,進行精細化處理,使其更精致,具備高識別度及品質感。

6. 適用性測試

分別通過移動端應用商店列表、應用詳情、設置中應用列表、桌面以及WEB商店等,對不同位置的大小、不同的桌面背景進行虛擬測試,以確保在不同場景中都能被用戶高度識別,如果這些問題等著被用戶發現,很可能給產品帶來不利的影響。

7. 輸出切圖

需要對iOS和Android系統各輸出一套圖標,iOS只需一個1024px的切圖便能適配所有,且無需設定圓角。Android則需要多套切圖規范,如512px、198px、144px、96px、72px、48px,圓角半徑以512px為基準設定為90px(參考值)。

這些固定的尺寸規范并不在技術能力范疇,如果實在不清楚,需要用時就“百度一下”一大把,或直接找開發人員拿尺寸都不是難事。

七、總結

首先,筆者要感謝耐心看到這里的小伙伴,希望總結的內容能幫到大家,在前期設計中作為資料參考,避免出現常見的問題,防止進入誤區。

其次,要想設計出優秀的應用圖標僅看上述內容是遠遠不夠的,少不了平時的多看、多練、多思考,需日積月累,逐漸提升自己的視覺審美、造型提煉、執行效率等多方面設計能力。

應用圖標的總結分享就到這里了,對你有幫助的話就給筆者點個贊吧,如果有不同意見,歡迎在評論區交流或指正,以便查漏補缺,共同進步。

#專欄作家#

大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

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

題圖來自Unsplash,基于 CC0 協議

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

APP中的折疊菜單應該如何設計?先看這份設計解析

杰睿

編劇導語:折疊菜單是在頁面中垂直堆疊的菜單列表,通過展開/折疊來顯示或隱藏更多菜單內容。APP中的折疊菜單該如何設計呢?本文作者分享了折疊菜單的設計解析及設計應用,一起來看看吧!

大家好,這里是設計夾,今天為大家分享的是「折疊菜單」

折疊菜單(Accordion),又稱手風琴菜單,是在頁面中垂直堆疊的菜單列表,通過展開/折疊來顯示或隱藏更多菜單內容。

接下里通過講解折疊菜單的構成、樣式和設計解析來更進一步了解折疊菜單的運用~

一、折疊菜單的構成

1. 狀態

折疊菜單的狀態包括收起、展開、懸停、選中、禁用狀態等。

APP中的折疊菜單應該如何設計?先看這份設計解析

2. 展開圖標的位置

在折疊菜單中,通常用“V形”圖標表示菜單展開/收起的狀態。“V形”圖標可以在左側,也可以放在右側,用來表示狀態。

APP中的折疊菜單應該如何設計?先看這份設計解析

除了使用最常見的“V形”圖標,還可以用以下圖標來代替:上/下填充圖標;加號/減號;向上/向下箭頭。

APP中的折疊菜單應該如何設計?先看這份設計解析

3. 附加圖標

當我們把展開圖標放在右側的情況下,我們可以面板左側設計一些圖標,來增強菜單的含義,并讓頁面看起來更精致。

APP中的折疊菜單應該如何設計?先看這份設計解析

在某些場景下,還可以通過使用不同的顏色,更加直觀地分隔每個菜單。

APP中的折疊菜單應該如何設計?先看這份設計解析

二、折疊菜單的樣式

1. 封閉式折疊菜單

在頁面設計中,大多數情況下都是使用封閉式折疊面板。

通過一條淺色的的分隔線將不同的菜單分隔開,這種樣式的優點是可以節省一些豎向的屏幕空間,尤其是在移動端屏幕尺寸較小的情況下。

APP中的折疊菜單應該如何設計?先看這份設計解析

2. 分離式折疊菜單

分離式折疊面板常用在桌面端中,每個菜單的展示更清晰,設計樣式更簡潔。

APP中的折疊菜單應該如何設計?先看這份設計解析

3. 突出顯示展開菜單

突出顯示菜單展開的狀態,這樣在多個折疊菜單打開的情況下,用戶也能清晰找到需要的信息。

常用的突出顯示的方式有:增加陰影、背景填充、輪廓描邊等。

APP中的折疊菜單應該如何設計?先看這份設計解析

例如在頁面背景是白色的情況下,我們可以使用透明度很低的灰色作為下拉菜單的背景,更清晰地展示展開的菜單。另外,還可以為下來菜單填充和品牌色一致的顏色描邊,起到強調品牌的效果。

APP中的折疊菜單應該如何設計?先看這份設計解析

三、折疊菜單設計解析

1. 展示預覽

通過在主菜單的下面添加已選擇的內容,這樣在不需要展開面板的情況下,用戶就能知道選擇了哪些內容,進一步提高操作效率。

APP中的折疊菜單應該如何設計?先看這份設計解析

2. 數字徽標

當已選內容太多時,我們不可能將這些內容全部在主菜單羅列出來,在這樣的情況下,可以使用數字徽標的形式來展示已選擇的菜單數。這樣的設計有點像購物車中不斷變化的數字徽標,告訴用戶加購的數量。

APP中的折疊菜單應該如何設計?先看這份設計解析

3. 提示文案

通過在折疊面板中添加提示文案,起到輔助作用,展示更多和菜單相關的信息。這種設計形式更適合用在移動端中,在有限的屏幕尺寸上盡可能多的展示內容。

APP中的折疊菜單應該如何設計?先看這份設計解析

4. 移動端應用樣式

等寬使用:在移動端中使用等寬的折疊菜單,方方便用戶點擊操作。

APP中的折疊菜單應該如何設計?先看這份設計解析

側邊欄:將折疊菜單放在側邊的導航抽屜中,點擊左上角的圖標來展開菜單項。

APP中的折疊菜單應該如何設計?先看這份設計解析

菜單篩選:將側邊欄與折疊面板配合使用,實現菜單篩選的功能。

APP中的折疊菜單應該如何設計?先看這份設計解析

5. 桌面端應用樣式

側邊導航:和移動端類似,桌面端最常用的方法是把折疊菜單放到頁面左側,作為網頁的側邊導航使用。

APP中的折疊菜單應該如何設計?先看這份設計解析

過濾器:根據桌面端的頁面布局結構,折疊菜單可以放在頁面左側或右側,實現精確查找、內容過濾等功能。

APP中的折疊菜單應該如何設計?先看這份設計解析

四、最后

以上就是折疊菜單的設計解析及設計應用,希望通過這些知識能幫你進一步了解折疊菜單的用法。

「組件系列」的其他文章,近期也會不斷更新,歡迎大家關注~

#專欄作家#

作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

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

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

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

B端交互 | 重新認識頁面、浮層、彈窗和抽屜

杰睿

編輯導語:B端產品的展現形式包含了很多類型,標簽頁、彈窗、懸浮層等等。本篇文章中作者分享了如何正確的呈現B端產品,讓產品的交互體驗更加絲滑。感興趣的小伙伴們快來一起看看吧,希望對你有所幫助。

在B端產品操作中,需要高頻率地打開各類鏈接和按鈕,如果點擊后需要展示新的內容,那么展現形式就包含了很多種類型,標簽頁、新頁面、懸浮層、彈窗、抽屜等等。

在面對數量龐大的B端頁面、組件、交互場景下,應該選擇哪種展示形式就變成了一個棘手的問題。

本篇分享就將集中在解決如何選擇正確的呈現形式上,讓產品的交互體驗更順滑。

一、內容的載體形式

網頁是一種可視化的UI界面,也是一種內容載體,它是瀏覽器訪問網站后顯示的主要對象,也是瀏覽器展示內容中層級最高的單位。

在同一個網站中,如果我們想要訪問其它網頁,就需要點擊按鈕或鏈接觸發,這時候,打開新網頁的方式就有兩種,在新窗口/標簽中打開(_blank)或者在本窗口/標簽中打開(_self)。

不管是哪種,本質上都需要瀏覽器重新加載新的頁面。對于一般的企業官網、新聞網站來說,這種加載的模式沒有太大的問題,因為操作頻次相對適中,用戶中間會有比較長的時間停頓下來查看頁面的內容信息。

而B端項目則不同,雖然也有不少查看頁面信息的需求,但是包含了更多需要短平快完成操作目標的使用場景,比如修改個標題,更改商品價格,添加分類字段等。

如果所有高頻操作的場景,都要重新加載頁面,使用起來的 “頓挫感” 是非常強的,降低使用體驗。

早期的網站加載內容必須刷新頁面,所以頓挫感是難以解決的,只能想辦法減少跳轉流程來提升用戶體驗。

隨著網頁技術的發展,異步處理(AJAX數據交換方式)技術的應用,讓網頁的內容可以通過不刷新或加載新網頁的形式加載和顯示。

簡單解釋,就是早期的網頁加載完成以后就是 “靜止” 的,里面所有內容是固定的(不是HTML的靜態)。而異步處理,就是讓頁面中的指定模塊處于 “運動” 的狀態,客戶端可以在不重載網頁的情況下只加載和更新這個模塊的內容。

比如下面的案例,設置不同的條件選項,在過去的網頁中只能重載頁面更新,而使用異步處理就可以直接和服務器請求數據刷新這個圖表模塊,而不用重載整個頁面。

所以,在B端項目中,我們不再是只有重載網頁一個選項,而有了其它的選擇,如下圖所示。

其中,網頁展示作為一個基礎展示對象,我就不多做介紹了。我會通過分別介紹其它幾個內容的載體,幫助大家區分它們和重載頁面有何不同,以及如何正確選擇內容加載形式。

二、浮層的使用解析

首先介紹浮層,它是我對通過懸浮在頁面基礎內容之上的內容層的統稱。例如各類氣泡、提示框、下拉菜單,都是浮層的表現形式。

浮層是比較底層的形式,其展示內的容完全不需要使用一個新的頁面,且和觸發的元素有較強的視覺聯系(對比彈窗)。

浮層并不是由內容的多和少決定的,復雜的浮層可以包含非常多的交互選項和內容信息,導致我們很容易和下方解釋的彈窗搞混。

比如客戶端軟件常見的隱藏式側邊欄,搜索欄中展開的復雜面板,都是浮層的一種而不是彈窗。

浮層最大的特點,源自它的位置定義邏輯,它會和觸發它的元素具有非常緊密的位置關系,而不是像彈窗一樣無差別顯示在界面或瀏覽器視圖的固定區域。

如果我們想要顯示內容,完全沒到用一個新頁面展示的地步(如搜索建議面板),且和觸發它的控件有較強的聯系,就可以考慮使用浮層來展示。

三、彈窗的使用解析

彈窗,也是一種懸浮在基礎內容之上的內容層,它和浮層的不同之處,就在于彈窗通常是居中固定的顯示區域,和觸發它的元素沒有什么位置聯系。并且,彈窗可以包含的內容量級也是高于浮層的。基礎的彈窗包含強提示彈窗,或類似注冊登錄這種表單彈窗。

而高級的彈窗,則類似下方案例,約等于打開一個獨立的網頁。

之所以使用這些高級彈窗作為頁面載體,原因就是對原觸發頁面的使用和關注并沒有結束,需要支持快速關閉當前的窗口并返回原來的頁面中去。

比如在一個非常長的列表中,你下滑了幾十頁的高度,肯定不想放棄掉當前的頁面位置,所以Behance或者花瓣等應用,都采用窗口模式加載新頁面。

或者類似一個列表頁面中需要大量創建新的數據,這些數據又不復雜。于是就通過彈窗表單的形式,快速完成創建并在原頁面中再次點擊 “新增” 按鈕。

高級的彈窗使用除了保持原頁面位置、高頻操作等防止加載的原因之外,還有個更重要的特征,就是強制吸引用戶的注意力到窗口上

因為彈窗主要以模態 (Modal,后方有黑色遮罩)居中顯示,通過深色蒙版進行前后隔斷,凸顯彈窗區域,意味著我們強制讓用戶關注眼前的信息和任務

如果我們想要顯示的內容,需要保留原頁面狀態,減少頁面跳轉數量,又需求用戶強行關注,就可以使用這種模式展示。

四、抽屜的使用解析

最后,就是最難選擇,也最容易和其它組件搞混的抽屜了。

抽屜本身的特征包含懸浮屬性,覆蓋在原頁面之上。而我們常見的側邊欄、側邊菜單并不能和抽屜畫上等號,因為他們會占用畫布的實際顯示區域,和原有內容同層。

比如下方案例中,Jira左側導航(不分左右)可以隱藏收入,頁面內容變大,這是側邊欄。而點擊列表選項,右側彈窗的窗口覆蓋原有頁面,才是抽屜。

和高級的彈窗類似,抽屜也可以當成一個獨立的頁面展示信息。但它和彈窗不同的是,抽屜通常是從頁面的右側展開,沒有遮擋左側的空間。它的主要特征是還需要在原頁面進行交互。

比如Teambition案例中的列表,我們每開一個抽屜都還可以直接點擊原列表的其它選項切換下一個抽屜,省掉關閉步驟或者原頁面被遮擋的情況。

它比較適合應用在表格/列表環境中,作為表格/列表內容的詳情頁形式展開,這樣用戶可以在一個頁面中快速查看不同列表的具體信息或編輯。并且,表格/列表本身的特征會將標題放在最左側,也方便抽屜的切換。

也因為這種特性,抽屜不太需要使用模態和遮罩將左側內容遮擋掉。如果需要通過遮擋來吸引用戶注意力,那么這種情況往往更適合使用彈窗。

所以,如果不想通過新頁面打開的列表詳情內容,且不是強制要求用戶聚焦的任務,就可以使用抽屜的形式展現。

五、結尾

以上就是幾種基本的內容展現形式說明,時間關系還有后半部分關于如何站在系統框架級的角度使用內容載體的分享,我會留在下次分享。

如果有關于這部分的實際項目疑問,也可以在下方留言。

我們下篇再見~

 

作者:酸梅干超人;公眾號:超人的電話亭

本文由 @超人的電話亭 原創發布于人人都是產品經理。未經許可,禁止轉載。

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

專欄作家

韓敘,微信公眾號:運營狗工作日記,人人都是產品經理專欄作家。原貓眼電影產品運營專家,創業時經歷了0到1的艱辛,在百度時規劃了海量用戶的玩法。從業10年,專注互聯網運營領域,包括產品運營、用戶運營、社區運營和UGC運營。

本文原創發布于人人都是產品經理,未經許可,不得轉載。

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

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

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

這些UI大技巧你會了嗎?

杰睿

編輯導語:產品設計上的許多細節都有可能影響到用戶的產品使用體驗,進而影響到產品的打開率以及留存率等。這就要求產品設計師在交互體驗層上結合一定小技巧,以提升用戶體驗。本篇文章里,作者結合案例,總結了一些UI技巧,一起來看看吧。

對于很多設計師來講在設計界面過程中往往會忽略掉很多的細節,比如卡片的排版、文字的排版、各種狀態的反饋等等,特別是剛入行的設計師在做頁面時往往是直接拿到競品的頁面搬運到自己產品上,這種做法理論上不會讓自己的頁面出錯。

但是很多人往往忽略了一點,就是別人這么設計的目標是什么,是否會匹配自己的設計目標,如果不了解這些貿然地去搬運設計,那么時間久了會養成一個不好的習慣,需要設計師去進行設計時可能就會遇到很多難點,作為初級設計師或者剛入行的設計師,前期可以去進行搬運設計,但是一定要了解別人為什么這么做。

接下來將分享12個設計上的小技巧,大部分在日常設計中都會遇到,了解到這些設計細節,可以讓我們的界面更加高效、易用、美觀提升用戶體驗。

一、快捷交互

我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率,避免繁雜小操作步驟。

1. 左側為什么錯??

左圖中針對單條消息的操作匯聚到了icon內,對于用戶理解成本比較高,當用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作,大大的提升了用戶操作成本。

2. 建議正確做法~~

我們可以在類似的消息場景或者其他列表形式的場景中,添加一些交互手勢,隨著手機系統的更新,用戶的操作習慣已經被各大產品培養的非常成熟,并不用擔心用戶無法操作的情況,增加手勢有弊端也有優勢,右圖中手勢增加了用戶首次使用的學習成本,但是降低了高頻功能的操作成本,這個理論上是可以接受的。

這些UI大技巧你會了嗎?

3. 實際產品中的運用

這些UI大技巧你會了嗎?

二、提升交互路徑

利用拇指定律把關鍵的操作入口元素等,放置右側提升用戶操作效率。

1. 左側為什么錯??

左圖中把按鈕放置了模塊左下側,這樣是不利于用戶進行操作,當然如果整個模塊的熱區都是同一個,這樣并沒有什么問題,用戶點擊卡片區域任何位置都能夠完成下一步操作,如果出現一個模塊內存在多個熱區入口,而用戶想要到達目標必須通過按鈕點擊才能進入,那么左圖中的排版位置就會提升用戶的操作時間。

2. 建議正確做法~~

當一個頁面內出現多個相同模塊或者一個模塊出現多個熱區入口時,按鈕點擊區域有限,我們設計時就可以利用拇指定律進行排版,如右圖中布局,將按鈕放置右側可以便于用戶在右手操作時快速到達目標,因為國內使用右手的人數遠遠大于左手用戶,所以我們需要滿足大部分的體驗,合理利用拇指定律。

相關定律:費茲定律、拇指定律。

這些UI大技巧你會了嗎?

3. 實際產品中的運用

這些UI大技巧你會了嗎?

三、問題前置

對于我們來講很多東西是簡單的,但是不乏會有一些用戶是陌生的,對于他們來講可能會有填寫成本。

1. 左側為什么錯??

左圖中理論上并不是錯,我們經常設計表單時都會用的提示話術,但是我們需要考慮更多維度的東西,對于我們來講填寫這種表單非常簡單,例如個別用戶,可能會臨時忘了郵箱格式,又或者輸入手機號時多填了一位數等等情況,用戶錯誤一次操作步驟就會多一步,反之就是降低使用產品時的體驗。

2. 建議正確做法~~

如右圖中,我們設計時可以更改提示的話術,幫助用戶把問題前置,當用戶看到提示郵箱時就會按照格式去填寫,通過把手機號的位數拆分,讓用戶更好的記憶數字,這樣無論對產品還是用戶都沒有任何損失,反而能降低錯誤頻率。

這些UI大技巧你會了嗎?

3. 實際產品中的運用

這些UI大技巧你會了嗎?

四、提升可讀性

無論是頁面還是模塊,用戶在閱讀時是已掃讀的方式進行瀏覽,我們需要保證頁面的文字元素具備一定的規律,以此來提升閱讀效率。

1. 左側為什么錯??

左圖中可以看到,文字與輸入框放在同一列進行展示,這樣一方面不利于后續的文字擴展,通常這種表單填寫的頁面,在頁面中都是具有很大的空間位置,這樣排布會造成視覺上的不規律和擁擠,降低了篩選效率,當然如果是模塊區域很小的情況下,可以適當的進行使用。

2. 建議正確做法~~

右圖中我們把文字與輸入區域上下排布,雖然文字長短不一,但依據對齊原則在豎列情況看是具備對齊規律的,有效地提升信息篩選效率。

這些UI大技巧你會了嗎?

3. 實際產品中的運用

這些UI大技巧你會了嗎?

五、點擊引導

我們在做系統功能模塊時需要注意添加功能點擊引導,用戶對此類消息模塊認知上會默認不可點擊,因此需要我們加以引導。

1. 左側為什么錯??

我們常見的消息模塊內容為兩種,一種是互動類消息即用戶與用戶,另一種時是系統消息即產品推送的內容。

前者基于用戶習慣而言用戶已經沒有使用成本默認是可以進行點擊交互,后者因為部分產品會把系統消息作為展示的形式給用戶,但是有些產品的系統消息卻是可以點擊交互,這就導致了用戶認知上出現了混亂,左圖中像系統通知功能通知其實從視覺上看,并不具備點擊欲望,因此可能會對用戶造成錯誤的理解。

2. 建議正確做法~~

當我們在設計時需要注意,若消息列表中存在系統類消息并且可以進行交互,在設計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊,如果該功能有數據指標,這種方式也同樣能賦能產品指標。

這些UI大技巧你會了嗎?

3. 實際產品中的案例

這些UI大技巧你會了嗎?

六、注意飽和度

目前市場上產品幾乎都有深色版本,我們在設計時深色版本的顏色時需要注意飽和度的高低,同樣的飽和度在黑色背景上會比白色背景上更加亮,這跟人的視覺感官有很大的關系,因此我們在做黑色版本時需要注意是否調整飽和度。

1. 左側為什么錯??

在黑色背景中使用過高的飽和度會刺激眼睛,很多深色版本都是從白色模式通過反向顏色直接調整,而彩色元素會直接運用到深色中,那么就會造成一個問題,因為我們習慣在白色模式下看顏色,忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”,對眼睛的傷害很高。

2. 建議正確做法~~

我們在設計深色版本時可以根據產品主色降低飽和度,包括圖標等元素,以此來緩沖對用戶視覺感官的刺激,目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理,這樣無需在添加更多的顏色規范。

這些UI大技巧你會了嗎?

3. 實際產品中的案例

這些UI大技巧你會了嗎?

七、禁止特殊字體

在設計模塊或者頁面時不建議使用特殊字體來突出文字層級,這樣會導致視覺不統一,以及開發成本增加。

1. 左側為什么錯??

左圖中灰色字使用了特殊字體,看起來雖然好看,但在實際開發中會導致開發成本增加,我們產品一般使用的是系統字體,若使用特殊字體需要讓開發同學添加對應字體包,這樣會導致我們的產品包的內存過大,除非產品中默認一直使用該特殊字體,這樣才有使用的價值。

2. 建議正確做法~~

一般系統字體就能夠滿足我們的設計需求,在UI設計中我們可以通過不同的字體粗細來調整文字層級,這樣能夠保證視覺更加統一,減少產品包大小。

這些UI大技巧你會了嗎?

3. 實際產品中的案例

這些UI大技巧你會了嗎?

八、按鈕也要有層級

在設計時需要注意多個入口在同一位置時,需要把它們進行層級劃分,避免影響用戶決策。

1. 左側為什么錯??

圖中可以看到,兩個面性按鈕非常明顯的在模塊中,當用戶在瀏覽頁面中很容易出現困惑,到底需要點擊哪個才能購買預定,因為兩個都是面性無法快速進行定位入口,這樣不僅影響用戶決策效率,還會影響產品點擊率。

2. 建議正確做法~~

建議設計類似模塊中時,無論是pc還是移動端都需要對入口進行結構劃分,這樣能夠使用戶在瀏覽頁面時快速定位到入口,提升決策效率,做體驗是解決用戶的思考時間。

這些UI大技巧你會了嗎?

3. 實際產品中的案例

這些UI大技巧你會了嗎?

九、圖標保持一致

在UI設計中使用圖標時,要保持一致性,確保他們共有相同的視覺風格,相同的重量,填充和描邊。不要混搭。

1. 左側為什么錯??

可以看到左圖中的圖標并不統一,線性里面摻雜著面性點綴,這在UI設計中嚴重違背了一致性的原則,會導致我們的頁面不夠嚴謹專業。

2. 建議正確做法~~

在設計圖標時,首先要保證圖標風格一致,其次在這個基礎上保證圖標的描邊粗細、視覺占比重量、顏色等,不要出現混搭風格。

這些UI大技巧你會了嗎?

3. 實際產品中的案例

這些UI大技巧你會了嗎?

十、利用對比

在設計頁面模塊時,可以多利對比度的方式來體現設計的表現力,鮮明直接的色值能夠直接表達事物的性質以及特點,通過對比,也能夠更加清晰的強調設計中的重點,這樣給用戶的印象會更深刻,同樣會給產品帶來一定的趣味性。

1. 左側為什么錯??

左圖中單看視覺也沒問題,只是在表現上圖標與背景融入到一塊了,導致視覺表現力較差,在設計中如果符合產品風格的前提下,我們可以避免這種方式,這種方式雖然具有視覺效果但不夠強,對用戶的記憶點不夠深刻。

2. 建議正確做法~~

設計到類似的模塊時我們可以利用對比的關系,以此突出視覺元素,通過顏色焦點引導用戶關注,強化用戶印象同時還能增加頁面的視覺表現力和氛圍感。

這些UI大技巧你會了嗎?

3. 實際產品中的案例

這些UI大技巧你會了嗎?

十一、圖文疊加

在設計圖文疊加的卡片或者頁面時,我們需要注意不同明度的圖片上,文字識別是否有阻礙,一般情況會通過遮罩方式避免這個情況。

1. 左側為什么錯??

左圖中在深色圖片下字體的可讀性是沒有問題的,但當出現文字底部區域的圖片相對復雜時便會影響識別,第二種情況當圖片明度過高時文字同樣無法識別,試想一下,一張白色調性的圖片上放文字,那基本無法看清,嚴重影響閱讀體驗。

2. 建議正確做法~~

在界面設計時如果遇到類似的卡片,建議在文字區域添加漸變遮罩的方式,以此保證文字的識別度,或者添加純黑色透明遮罩進行處理,這樣可以兼容不同環境的圖片與文字的重疊,保證基本的閱讀體驗。

這些UI大技巧你會了嗎?

3. 實際產品中的案例

這些UI大技巧你會了嗎?

十二、注意遮罩透明

UI設計中經常會遇到彈窗,彈窗是需要配合頁面遮罩來讓用戶進行專注操作,不同的遮罩透明度所帶來的專注度也不同。

1. 左側為什么錯??

左圖中我們看到,遮罩的透明度過低,我案例設置的是17%,此時彈窗內容與頁面內容結構上區分并不是很明顯,一般彈窗是用來讓用戶跳脫頁面內容,從而瀏覽彈窗內容,轉變用戶目標,當彈窗無法聚焦時便很難達到目標,并且視覺上層級更加混亂。

2. 建議正確做法~~

右圖中案例我把透明度調整到了37%,我們此時再看彈窗很容易就忽略頁面內容,因為灰色越高,遮擋度越高,用戶跳脫感就越強,這樣我們可以讓用戶專注彈窗內容,同時視覺結構上也區分很明顯

這些UI大技巧你會了嗎?

3. 實際產品中的案例

這些UI大技巧你會了嗎?

 

作者:愛吃貓的魚;公眾號:防脫發藥水

本文由 @愛吃貓的魚 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Pexels,基于CC0協議

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

卡片式設計 | 掌握這些技法,快速提升界面效果!

杰睿

卡片式設計是產品常用的頁面設計手段之一,它自帶的分割屬性讓頁面布局更加清晰,也是頁面布局的利器。但是,分割也可能會影響用戶沉浸式的瀏覽體驗等問題。如何用好卡片式設計?本文作者對此進行了分析,與你分享。

近幾年,卡片式設計可以說是移動端產品中極為常見的設計形式了,甚至有很多互聯網大廠將卡片式設計納入設計語言,在各大APP中得到廣泛運用。

卡片式設計自帶分割屬性、讓界面更有層次感,能給人一種視覺上的享受,也因此讓其成為了頁面布局的利器,但它并非萬能,因分割的原因可能會影響用戶沉浸式的瀏覽體驗、造成橫向/縱向空間浪費等問題,需要根據實際場景和內容形式來確定,不要專門為了“卡片式”而設計。

很多設計師對卡片設計習以為常,但對于使用卡片的原因、視覺表現方式、優/缺點等并不是很了解。那么卡片到底該如何設計?需要注意哪些細節?筆者根據經驗并結合平時的一些思考,跟大家一起聊聊在設計中極易忽略的細則,希望能幫助大家提升卡片設計的精致感。

一、卡片式設計的定義

1. 什么是卡片?

早在互聯網時代之前,卡片就出現在了我們生活中的方方面面,如名片、不干膠標簽、便利貼、會員卡…等,不管是何種類型的卡片,它都將代表著我們現實生活中的某個特定信息。

卡片指的是含有圖片或文本信息的容器,它將我們需要的信息歸納在一起、并形成獨立的個體,以至于后續被引用到線上界面中,同樣具有非常不錯的信息歸納效果。

2. 互聯網中的卡片式設計

卡片本身就是一個完整的信息區塊、并同時承載豐富的互動方式。在UI設計中,個性化和美感兼備的卡片式設計具有很強的易用性,它是一個UI設計組件,將標題、文本內容、圖形/圖片進行整合并模塊化,讓信息的表達更加直觀、操作也更便捷。

卡片式設計之所以能成為當今比較流行的趨勢,是因為它能讓界面信息更有層次感,從設計、交互、視覺以及用戶體驗等各方面來看,都有不錯的優點。站在用戶角度,即便不太理解卡片的概念(也不需要理解),但能快速知道如何使用它,相對來說,學習成本也是極低的。

二、卡片式設計價值

1. 結構清晰

卡片在占用屏幕空間較少的情況下能夠將不同大小、不同類型的信息內容按邏輯進行分組呈現,使界面結構更加清晰。相比純粹的留白或分割線,卡片不僅對信息作出了分割,其本身還是一個獨立的容器,讓歸納組合后的信息能快速突出重點,將復雜內容簡單化處理。

卡片式布局整齊簡練,清晰的信息結構有助于用戶瀏覽,方便快速找到自己感興趣的內容,避免用戶產生一種費時或感覺內容超長的恐懼感,還能節省更多的時間成本。最常見的就是信息列表、圖文混排等,不僅做到了視覺上的美觀,也達到了平衡文字及圖片強弱的效果。

2. 場景拓展

卡片式設計有利于場景拓展,他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體,在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節假日增加二層樓…等。

3. 空間擴展

卡片式設計一度打破了移動端多為縱向操作、原有傳統的列表式布局,在空間有限的移動端設備中,還能很好的利用橫向空間。將橫向滑動區域的最后一個卡片漏出一小部分(若隱若現才是誘惑),不僅能給予用戶更多選擇與期待,其空間利用率也得到了很好的擴展,在展示更多內容的情況下依然能保持模塊的整體性。

4. 突出重點

卡片式設計能很好的通過邊界襯托出內容的整體性,特別是在電商類產品中的首頁頭部、瓷片區、營銷引流區將其應用到了極致,即便在卡片數量較多的情況下,用戶依然能清晰的感知到內容的歸屬層級以及重要信息。

5. 兼容多端

卡片作為一個容器,它可以自由無限的等比縮放,非常適合響應式設計。在手機、iPad、電腦等屏幕尺寸復雜的情況下,通過放大縮小或增減縱向排列數量的方式配合響應式的斷點設計,讓同一界面在不同設備之間輕易的創造出一致性的視覺體驗。

6. 易于操作

卡片給人最直觀的感覺就是可以操作,它不用箭頭、按鈕或超鏈接等引導性的視覺元素提醒,節省了一定的頁面空間,還有著更大的操作熱區,無需做到精準點擊。卡片式設計很容易融入各種交出手勢,如單擊、雙擊、長按、拖動、滑動等,為用戶提供更多便捷的操作。

7. 跳轉流暢

卡片可通過縮放的形式充分利用動畫進行頁面跳轉,例如App Store“Today”頻道,點擊卡片后直接等比放大至全屏,給用戶一種還停留在當前頁面的錯覺,避免了傳統的跳轉頁面而造成的信息割裂感,流暢絲滑的過渡,給用戶更自然的交互體驗。

三、常見的卡片式設計樣式

1. 四周留白

這種類型的卡片在UI設計中最為常見,柔和的圓角、邊緣陰影以及四周很自然的留白,讓內容模塊的存在感更加強烈,整個頁面信息的層級也更加清晰。

2. 懸浮內容之上

懸浮型卡片并非模態彈窗,與其相比,懸浮卡片不需要主動操作觸發,可作為臨時控件或長期固定顯示,并且比模態彈窗能承載更多信息內容,可通過伸縮來定義卡片中的信息數量,或多、或少、或展示、或隱藏,在頁面中非常靈活。

例如高德地圖首頁,搜索框及右側的功能入口長期懸浮在地圖之上,而下方卡片中的內容會隨著高度的伸縮自動調節可展示的數量,非常實用。

3. 通欄類型

通欄類型的卡片具有更強的視覺阻斷,對區分不同的功能模塊有不錯的效果,不過這種類型只通過頁面背景色保留上下邊間、且不會過多,不然頁面會顯得零散、雜亂。

四、卡片適用場景介紹

1. 瀑布流

瀑布流主要正針對圖片較多、或以圖片為主的內容設計,它最大的優點是無需過于在意圖片的高度,最大限度的還原原始圖片效果。

卡片式設計的瀑布流對信息的組合、包容性更強,不僅能在單屏區域內顯示更多內容,同時又將每組信息組合作出了明確的劃分,在不破壞頁面整體性的基礎上也做到了相對獨立,如花瓣、Pinterest就是最好的例子。

2. 信息流

信息流的展現方式主要以文字、圖片或視頻內容為主,是一種較長內容的媒介,不管哪種展現方式,其都需要用戶耗費較長時間的滑動、瀏覽來篩查對自己有用的信息。

卡片式設計將信息進行分塊處理,通過阻隔的方式快速告知用戶每個卡片的核心內容,便于用戶在長時間的滑動過程中也能快速識別重要信息。

3. 左/右滑動

卡片式左右滑動組合在音樂、視頻類產品中用最為廣泛,因內容本身就圖片居多,也更適合卡片式設計,相比平鋪具有更強的層次感,對用戶的吸引力較強,尤其最右側漏出的一小部分內容營造出神秘的感覺,用戶會不由自主的想去滑動以求獲取更多信息。

4. 優惠卡/券

卡/券設計實際是把生活中的實物映射到了UI設計中,通過模擬實物造型設計成卡片樣式,有效降低用戶的理解成本,并對其有了更直觀的感知,真實感尤為強烈。

5. 突發事件/臨時提醒

對于用戶主動觸發或系統臨時發起的非固定性內容,利用卡片式設計會讓信息布局更靈活、視覺更突出,在不影響用戶使用的前提下,可出現在任何位置。

6. 部分頁面頭圖

卡片式設計可以將個人中心、個人主頁、會員等頁面中的關鍵信息進行概括,并在頭部位置進行重點突出,不僅讓原本單個的內容形成整體,還能營造出沉浸式的氛圍。

五、卡片式設計原則及小技巧

1. 一致性原則

為了保持界面設計的一致性,需要將卡片樣式納入設計規范,例如卡片是否通欄、是否需要設定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數值的確定等,大部分情況下都需要遵循設計規范。

2. 功能定位決定卡片形式

在同一產品中,雖然要遵循設計規范以確保一致性的視覺效果,但并非所有頁面都適合卡片式設計。

那么,到底是否需要采用卡片形式、使用哪種卡片類型?這還得根據頁面內容屬性及目標定位來決定。例如社交產品中的臨時會話列表、動態圈子使用卡片形式,很浪費縱向空間、甚至會顯得很“雞肋”,用分隔線或間距留白來區分信息組顯然更合適;但對于電商類型的產品,利用卡片將不同的商品分隔后又進行歸納,會更容易識別,信息的可讀性也會更強。

3. 避免過多卡片嵌套

卡片式設計本身就包含了容器與背景的層級表現,為了保持內容的正常展示與用戶瀏覽體驗,避免在卡片中嵌套多層卡片,以免信息層級雜/亂而增加用戶的視覺負擔。

如果再同一卡片中需要再次區分多個信息組,可利用間距留白、分割線或淺色背景等元素屬性來區分,依然能達到想要的效果。

4. 合理利用橫向空間

因為卡片內、外的雙向間距留白,在空間有限的移動端設備中,橫向空間利用率較低,因此除了合理的減小左右間距外,還可以適當利用左右滑動來擴充橫向隱性空間。

例如淘票票首頁,在1.5屏的范圍內,幾乎每個模塊都能橫向滑動查看更多內容,從用戶體驗角度出發,這是縱向空間無法比擬的。

5. 降低縱向空間的浪費

卡片式設計不是目的,其主要是用來更好的區分信息層級、提升用戶瀏覽體驗,因為卡片要作為獨立空間的存在,必定會增加上下間距而導致頁面拉長,因此,如無必要,不必盲目采用卡片式設計。

例如美團APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式,而「消息」頁則采用分割線進行信息分組,試想一下,如果為了統一規范而使用卡片,不僅造成很強的割裂感、還會極大的浪費縱向空間。

6. 長文表達不適合卡片

這點不用多說,新聞資訊類產品的內容詳情頁就是最好的證明,不管其他頁面是否采用卡片形式,但詳情頁并不會跟隨形式,一方面可以讓同屏展示更多內容、增加空間利用率,另一方面可減少無關元素對用戶產生的干擾、給予沉浸式的瀏覽體驗。

7. 突出一個核心內容

很多時候,我們總會聽到PM說這個很重要、那個也很重要,都需要突出一點,殊不知當什么都突出了也說明什么都沒有突出。在單個卡片中,組始終牢記這個準則:一次只突出一個核心信息,以便于用戶快速、精準捕捉,切記不可貪多。

六、結語

卡片式設計之所有能快速流行起來且經久不衰, 其主要得益于自身的靈活性,尤其是在跨設備、跨屏幕上有著純天然的優勢,能忽略設備的差異給用戶提供更好的服務。卡片并不是簡單的樣式設計,它是一種自由布局的設計語言,通過多種方式的信息組合、結合豐富的交互操作,給用戶創造出極致的使用體驗。

信息的呈現方式雖有不同,但最終的目的都是為了服務于內容,卡片式設計只是其中的一種形式而已,在設計過程中,我們需要根據內容結合實際情況作出合理的判斷,切勿拘泥于形式而忽略內容本身的重要性。

任何設計風格及展現形式都有可能成為歷史,卡片式設計也不會例外,但絕對不是這么快就結束,它依然值得我們去深究,力求打造更好的信息布局、更舒適的用戶體驗。

專欄作家

大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

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

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

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

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

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

杰睿

底部標簽欄的圖標風格在一定程度上決定了界面的風格。看起來相對簡單,但仍然有很多問題值得注意。作者通過標簽欄樣式分析、6個導航欄注意事項來總結底部標簽欄的設計,希望通過這些內容能幫助你對底部標簽欄有進一步的理解。

底部標簽欄(也稱導航欄)是移動端設計中必備的導航類型之一。底部標簽欄上通常會安排最重要且頻繁操作的功能,方便用戶隨時都能快速訪問

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

雖然底部導航欄看起來相對簡單,但要做到精準設計,仍然有很多問題值得注意。

本次通過標簽欄樣式分析、六個導航欄注意事項來總結底部標簽欄的設計~

01 標簽欄樣式分析

底部標簽欄可以是純圖標樣式,或者圖標與文本標簽搭配的樣式。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

選中的標簽需要有不同的視覺風格,可以使用按鈕、文字、圓點等樣式來表示選中效果,幫助用戶一目了然地定位當前導航。

在Apple iOS底部標簽欄中,標簽欄的寬為390px,高為49px。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

常規標簽欄的圖標大小為25x25px,緊湊型的標簽欄圖標為18x18px。

在iOS的底部標簽欄中,文字使用的字體為10px,中等粗細。

02 標簽欄設計6個注意事項

1)導航數量不超過5個

底部標簽欄最適合放置3-5個導航選項。移動端屏幕相對較小,使用五個以上的選項會讓導航擠在一起,并影響可用性。

另外導航選項太多,手指的觸摸面積(紅色圓圈)會比觸摸目標(導航選項)的面積大很多,用戶有可能會意外觸發錯誤的選項。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

設計解析:

如果選項很少,只有兩或三個時,可以考慮使用分段控件的設計樣式,將分段控件放在頁面上方作為導航。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

 如果選項很多,超過五個時,我們需要評估這些導航的優先級,篩選出最重要的導航。如果必須要保留五個以上的導航選項,可以考慮使用類似漢堡菜單這樣的控件。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

2)不要使用不熟悉的圖標

底部標簽欄是用戶使用頻率非常高的導航之一,這就需要確保目標受眾應該對標簽欄中的圖標非常清晰,避免讓用戶產生疑惑。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

如果在設計的時候,覺得某個圖標的含義或者樣式對用戶來說不是特別明確,那么就需要將圖標與文字標簽一起使用,方便用戶快速準確地理解。

3)圖標/文字的顏色不能太淺

圖標的顏色對比度差、導航標簽的字體小是在底部標簽欄設計中兩個最常見問題。

在底部欄設計過程中,我們不僅要區分已選標簽和未選標簽的狀態,保證已選標簽更突出,還要注意觀察圖標與文字之間、圖標與背景之間的顏色對比度,確保未選狀態的圖標和文字也能夠清晰易讀。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

4)不要設計可滑動的標簽欄

可滑動的標簽欄會對導航可見性產生影響,由于并非所有的導航選項都是一次可見,用戶可能很容易錯過后面的選項。

另外,當用戶左右滑動標簽欄時,前面已選的標簽可能會消失,影響使用體驗。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

5)不要截斷標簽

底部標簽欄的空間本身就很小,因此在導航中使用文字時,每個字符都顯得很重要。

不要截斷標簽,這樣會造成用戶不清楚標簽的含義,可以嘗試使用更簡練的文字來清楚地傳達選項含義。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

6)不要使用太復雜的切換動畫

花哨復雜的切換動畫對于初次使用的用戶來說可能看起來很酷,但是一旦用戶熟悉了產品并頻繁使用導航時,這些復雜的切換動畫就會變得很煩人。

這些切換動畫雖然看起來很復雜,但卻沒有為產品或用戶帶來任何有用的價值或信息,因此這些動畫就會變成一種負擔,讓用戶感到沮喪。

APP底部標簽欄設計需要注意哪些問題?我總結了這6點

底部標簽欄的切換動畫應該干脆利落,可以使用簡單的微動效作為輔助,切莫太復雜。

03 最后

以上是APP底部標簽欄需要注意的6個設計點,希望通過這些內容能幫助你對Bottom Tab Bar有進一步的理解。

慢慢來比較快,希望對你有幫助!

參考:babch.biz/bottom-tab-bar-design

專欄作家
作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

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

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

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

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

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

杰睿

在交互設計中,字體的呈現方式是提升信息傳遞效率的重要一環,文字信息層級的處理是否得當,一定程度上會對用戶的視覺體驗有著重要影響。那么在字體設計上,設計師或者相應的業務人員應該如何做好處理,以提升信息傳播的效率和質量?不如來看看作者的總結吧。

文字是設計中的重要組成部分,就像我們平時看到的海報,里面各種被精心設計過的字體經常會成為視覺焦點,以醒目且個性化方式傳達出內容的精髓,最后達到的效果事半功倍。

雖然在UI設計中不需要對文字過分設計,但圖文作為主要的傳播途徑,字體的使用是否規范合理將直接影響著信息傳播的優先級、重要程度以及用戶的接收質量和效率。所以不管是平面設計還是UI設計,字體都是不可忽視的核心元素,做好對文字信息層級的處理,對用戶的視覺體驗有著至關重要的作用。

互聯網經過多年的發展,也積累的很多的專業字體知識,設計師應該去了解字體的性格及特征并將其合理運用,才能將信息更清晰地傳達給用戶。本文將圍繞著字型、字號、字距、字重等幾個屬性,針對各方面深度解析,希望能夠幫到大家。

一、字體的基本特征

1. 使用前的思考

文字是信息內容的載體,能最直接的將信息清晰地表達出來,字體則表現了文字的外在特征,合理地使用這些屬性特征不僅能清晰準確地傳遞信息、用于特定場景還能賦予情感表達,展現出獨特的魅力,例如:健身、器械類的產品使用的字體通常會給人一種力量、剛硬、壯實的感覺,而女性專用產品字體則顯的纖細、苗條。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

2. 為什么要使用黑體

不同類型的字體傳達出不同的氣質,綜合來講,字體可分為黑體、宋體、圓體、書法體這四類,平時大家看到的各種形形色色的其他字體,基本是通過這幾類延伸而來。

在UI設計中,絕大多數的文字排版用的是黑體,諸如思源黑體、阿里巴巴普惠體、蘋方(ios)、微軟雅黑(PC web)等都是標準的黑體。另外,特定場景如瓷片區、卡片、banner、專題頭圖、引導頁、閃屏等,對于用什么字體不會有太大的限制,在避免商用侵權的前提下符合產品氣質即可。

黑體字的筆畫橫平豎直、粗細均勻且字面呈正方形,一般來說,沒有襯線的字體都可以稱作黑體。黑體結構清晰、簡潔有力,能讓界面顯得莊重還附有現代感,雖然氣質上沒有太大的個性化、但可塑性很強,這也是在UI設計中、黑體一直很受青睞的原因,無論是標題、正文、提示等使用場景都可以作為首選,對老設計師能多一個選擇、新手設計師也不易犯錯。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

3. iOS與Android的區別

iOS與Android是移動設備的兩大系統,雖然很多設計師用一稿適配兩端、遇到特殊頁面也只是單獨拎出來微調即可,但對于中、大型的互聯網公司則很難滿足優質用戶體驗中的部分細微差別,例如:iOS的蘋方字體在Android設備中無法高度還原、預留的文字數量上限位置無法顯示完整等,都會影響用戶體驗。

此外,iOS和Android都有自己獨立的設計規范,大家有時間的可自行查看,本文只對字體規范作基本了解。

iOS使用的是「蘋方」字體,提供了6個字重,英文字體為「San Francisco」;Android使用的是Google聯合Adobe發布的「思源黑體」,為充分滿足設計要求,提供了7個字重,英文字體為「Roboto」。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

此外,如果界面中涉及的數據較多,數字使用DIN字體也是不錯的選擇,字體外形較長,易用且耐看,很適合數據統計展示,不過這款字體商用的話需要收費的。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

二、字體的基本屬性

1. 字體大小

字號的大小決定信息的層次和權重,不規律的使用字號會讓頁面信息雜亂,不利于用戶閱讀。在設定字號規范時,需特別注意最小值和遞增值。

最小值決定信息的可讀性,以2倍圖為例,iOS11系統將最小字號規范為11pt(22px),但很多產品依然將最小字號設定為20px,甚至部分產品將18px的數字加粗運用在標簽中,所以最小字號的設定并沒有固定數值,原則上不影響用戶的瀏覽就行。筆者建議最小字號不要低于20px,在設計過程中,可以通過設備實時預覽,因為同樣的字號在不同的環境、色值、背景下,其視覺效果都有所區別。

其次,遞增值決定著信息層級區分的明顯程度,遵循字號越大、遞增值越大的原則,常用字號數量控制在6種左右。iOS和Android都是采用的2倍數柵格系統,為了讓字號的層級區分更明顯,字號設定要避開奇數且最小遞增值不要低于4px,下面舉幾個常見的例子:

  • 20、24、28、32、40、48、64…
  • 20、24、30、36、42、48、64…
  • 22、26、30、34、40、48、60…
  • ……

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

規范好的字號該如何使用,還得根據界面中的實際場景來決定,如下圖:

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

2. 字符間距

字間距是指兩個字符之間的橫向間隔距離,在界面排版中,除了西文的字間距調整需求較大外,中文通常只保持默認,只有少數場景才會手動調整,且沒有固定的規律,保持視覺舒適狀態即可。例如:banner、界面大標題、重要數字(取件碼)顯示等。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

3. 行高

行高是指包圍在字體之外的隱形邊框,一個字體元素的的行高等于文字上邊框+下邊框+字號的高度之和。

西文字體因高度的參差不齊,本身就能制造出視覺上的上下空間,通常行高為字號的1.2倍,而中文字體沒有上下間隙的延伸,行高則較大,一般在1.5倍左右,如果字號較小且折行較多,行高甚至能達到字號的2倍。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

4. 字重

字重指的是字體的粗細,不同的字重能體現出不同的層級關系,給用戶的視覺感受也截然不同。

像蘋方、思源、阿里巴巴普惠這些家族字體一般都會有極細體、細體、常規體、黑體、粗體等多個字重,在UI設計中,實用的就常規體、加粗兩個字重,再通過色彩、字號使其成為對立關系,明顯的拉開文字內容層級后,方能保持良好的瀏覽體驗。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

5. 全角與半角

這種主要針對標點符號,以英文字母為標準,半角是指一個符號占用一個標準字符(英文)的位置,全角則是占用兩個字符位置。

眾所周知,中文使用都是全角、英文使用半角,并且會隨著中/英文的切換而自動改變,但有時候難免會操作失誤讓頁面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時間/日期也大多會使用半角符號,所以設計師對此有一定了解的時候,在處理這些細枝末節就能做到收放自如。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

三、不同場景下的屬性參考

在色彩規范中,除主/輔助色之外,設計師還會提供3~4個等級的配色,如通用的#333(標題)、#666(正文)、#999(提示)、#ccc(占位符),這也是UI通用的文字色用色規范,不同的字號需用色規律。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

如果想進一步延展,可以增加一點品牌色,也可以使用#000(純黑)調整不透明度來體現文字色彩層級,深色模式中很常見,下面我們一起來了解幾個常見的使用場景。

1. 標題

標題的主要作用是讓用戶以最快的速度了解界面主要信息,需要時刻吸引用戶的注意力,例如APP中的導航欄、模塊標題、內容標題、數據統計等。需要簡單明了且有沖擊力,字號一般會控制在30px以上并加粗顯示,直接使用一級色值(#333)即可。

在特殊場景下,標題也可以使用主體色值,但一定要注意容器背景與其他信息色彩的協調,不然花里胡哨的還不如用回一級色值。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

2. 正文

正文并不需要吸引用戶注意力,它主要是提供標題的注釋或內容的詳細說明。

當白色背景文本內容過多、在需要用戶仔細閱讀的情況下,一定要注意顏色不能太深,不然顯的主次不分,還有些刺眼,這里推薦26~30px字號使用二級文字(#666)色值。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

3. 提示語

提示類文字使用場景就相對較多,它除了給用戶展示當前狀態,還能給予合理的引導,促進用戶進行下一步操作。常見使用色值為三級(#999)、四級色值(#ccc),例如界面中的操作注意事項、表單占位符等。字號一般為24px,因使用場景不同,也會有特殊的存在,例如表單中占位符的字號會跟隨輸入后的字號統一。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

4. 超鏈接

超鏈接在字號、色值上沒有一定的限制,但需要一個特定的輔助元素/屬性來提示用戶這是可點擊的。

例如APP登錄頁面,找回密碼、注冊、獲取驗證碼等,大部分都是用主體色、圖標(右箭頭)等方式強化可操作入口,而PC端網頁中超鏈接的表現方式,下劃線、藍色字體、>>這三種方式幾乎能涵蓋所有。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

5. 其他

規范并非不可更改,它只能幫助設計師在大部分使用場景中減少設計出入并提高產出效率,但總有一些使用場景需特殊對待,字體也不例外,如以下場景:

  • APP金剛區入口字體大多使用24px,一級色值(#333);
  • 底部Tab欄字體未激活使用淺色,激活后切換為一級色值(#333)或主體色;
  • 重量級的提示語用紅色色值;
  • 按鈕中的文字跟隨按鈕的等級權重變化;
  • 深色容器標簽的文字反白;
  • ……

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

四、字體使用基本原則

1. 符合產品氣質

雖說黑體(蘋方、思源、阿里巴巴普惠)是UI設計中的首選字體,但這也僅僅只是建立在不出錯的的情況下、滿足基本條件而選擇,如果想表達出產品的類型、情感、氣質等品牌屬性,在不影響用戶識別的前提下,可選擇一款符合產品氣質的字體,打造出差異化的瀏覽體驗,對于追求完美的APP來時是一個不錯的解決方案。

例如,部分藝術、女性類的APP會選擇使用宋體,整體看起來有一種高端、時尚且優雅的感覺。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

整體界面使用特殊字體還是相對較少,為了更好的體現出產品屬性/風格,將其融入不同的模塊及使用場景,會讓產品更有特色,例如banner、瓷片區、大標題、頭圖等,對用戶的視覺吸引力能得到很大提升。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

2. 使用同一家族字體

在一個APP中,堅持使用同一個家族的字體,對標題、正文等文字信息有一個統一的視覺規劃,這樣有助于建立起體系化的設計思路,避免在開發落地時存在一致性問題,減少開發與設計的出入。

筆者曾見過這樣的設計師,界面中原本用了「蘋方」字體,在一個特殊場景下,「蘋方」的粗體字重無法滿足大標題的使用需求,于是將大標題單獨改為「阿里巴巴普惠體」的最大字重。

從表面上看,上述的設計需求是滿足了,但稍有不慎就會成為沒有價值的藝術品,首先,單獨一處使用不同家族的字體,會影響整體視覺的一致性;其次,若程序沒有嵌入另外的字體,產品落地后其視覺效果毫無改觀,且更沒有必要為了某個場景的使用要單獨嵌入幾十到幾百兆的家族字體,讓應用安裝包無故加大。在設計中,有時候在解決某個問題時,解決方案并非無可替代,加粗字體亦是如此。

另外,在可用性、實用性強且必要的情況下,并非不能再增加一個家族字體,例如所有標題系列使用「阿里巴巴普惠體」、數字系列都使用「DIN」,前提是一定要形成體系化,并非某一處的使用。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

3. 明確的信息層級

在同一個界面中,字體色值、字號、字重等,都是用于區分信息層級,盡量不要使用過多的層級,避免層級混亂影響信息瀏覽。

在信息層級處理方式的四個基本原則中,「對比」就是將復雜的信息通過元素的各種屬性以不同的視覺效果呈現,來體現信息節奏感,并非是為了好看而隨意給文字賦予各種屬性及樣式效果。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

五、UI設計需注意的問題

1. 避頭尾的使用

避頭尾使用在文字內容較多的折行場景中,主要處理標點符號剛好出現在一行文字的開頭或結尾時,通過自動調整單行的字符間距、在視覺上將標點符號前移或后移。

在新聞資訊類應用的詳情頁中,避頭尾使用的較多,用以避免頭/尾存在標點符號造成視覺重量不一、信息參差不齊的問題出現。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

2. 反差體現層級

很多時候,為了區分信息層級,首先想到的是利用不同的字號、字重來體現,這當然沒有問題,但如果結合字體的明暗關系(灰度色值等級)則效果更佳。

如下圖:標題一級色值(#333)、正文二級色值(#666)、時間日期三級色值(#999)。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

3. 備用字體

備用字體只會運用在web頁面中,如果網站需要一款特殊的字體才能彰顯其獨特的氣質、同時又擔心用戶在某些設備中因為沒有這個字體而無法瀏覽其效果,則會另外再選擇一款相近的通用字體作為備選,以彌補視覺體驗上的損失。

如果字體包不大,也可以讓開發將其放在服務器端,這樣能讓所有用戶都能看到相同的效果,省去了不少麻煩。

4. 確保可讀性

可讀性應該是選擇字體的首要元素,雖說很多文字我們都可以從前后字義、聯想詞等角度將自己的理解補充完整,但完全沒有必要。

UI設計不像海報那樣融入較多的藝術成分,更需要的是內容清晰、表意明確、高效率的傳達,任何增加用戶閱讀、理解成本的做法都應該規避掉,例如過于變形的可愛風格、書法手寫體等都盡量少用。

字體篇 | 處理好這些,讓信息的傳達效率翻倍!

六、結語

文本內容是UI界面中占比較多的元素之一,設計師需要對其基本屬性及使用場景有一個清晰的了解,使用的是否恰當取決于我們對字體的選擇。雖說在UI領域,字體模塊類的文章比較少(更多是文字、字庫的設計),但它在設計規范中的地位是舉足輕重,選好一款字體對設計來說是錦上添花。

關于UI界面中的字體,其實沒有太多的講究,也沒必要整得花里胡哨,重點在于排版過重中注意信息層級的劃分以及有足夠的視覺舒適度即可。

專欄作家

大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

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

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

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

蘭亭妙微(www.gyxygd.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 協議

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

蘭亭妙微(www.gyxygd.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 協議

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

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

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

杰睿

在日常場景中,畫面平衡是潛在的一個重要影響因素,合理且有吸引力的視覺平衡設計,可以讓用戶更加舒心地接受并停留在使用頁面或者相應場景中。那么,視覺平衡究竟應該如何做好?本篇文章里,作者針對視覺平衡這件事兒進行了分析總結,一起來看一下。

畫面平衡是一個很基本的設計理念,但很多朋友在平時的作品中容易忽視這個點。彩云在星球中幫不少朋友看過作品集,發現最多的問題之一就是畫面平衡沒做好,我覺得只要把這個基本問題解決了,作品就能提升一個檔次。

用戶本能地會對不平衡的設計感到厭煩,如何在畫面中創造一個有吸引力的平衡?是本篇文章要分享的內容。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

平衡是一個作品中最重要的元素之一。平衡中的對稱關系能夠創造平衡與和諧,這種平衡狀態直觀上能夠讓用戶感到舒適。

人體是垂直對稱的,我們的視覺接收也與之相對應。我們喜歡物體在垂直軸上保持平衡,直覺上總是傾向于平衡一種力量與另一種力量。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

在設計環境中,平衡是基于元素的視覺重量,而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的,用戶會下意識地感到舒適。畫面平衡被認為是其元素在視覺上的比例安排。

如何讓一個頁面看起來平衡?

一、對稱(靜態)平衡

最常見的平衡例子就是使用對稱。

在潛意識層面上,對稱的視覺能讓人愉悅,能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側均勻放置元素來創造的。也就是說,畫面中間假想線的兩邊實際上是彼此的鏡像。有些人認為對稱的平衡是無聊和可預測的,但它經受住了時間的考驗,到現在仍然是在頁面上創造舒適和穩健感覺的最好方法之一。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

二、不對稱(動態)平衡

兩側重量不相同的元素構成具有不對稱平衡。

動態平衡通常會比靜態平衡更有設計感,讓畫面不至于呆板在缺乏平衡的情況下,我們的目光會條件反射性地開始尋找平衡點,這是一個很好的機會,可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點就應該放在這里——抓住用戶的注意力,就像產品的生命線一樣。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Landing page — Asian Cuisine

比如一般這樣去“配重”的元素會是一個按鈕或者標題。

重要信息(或者是行動按鈕)就是我們需要去配重的價值元素。

不對稱的現象越嚴重,用戶就越想找出其中的原因(檢查配重)。人們本能地比平時更仔細地研究這樣的畫面。然而,這里需要注意分寸,過于古怪的構圖并不總是能被很好的感知。

三、徑向平衡

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

平衡中的另一種類型,特點是視覺元素從一個共同的中心點放射出來。徑向平衡在設計中不常用。它的優點是,注意力很容易找到并保持一個焦點——恰好就在它的中心,這通常是構圖中最引人注目的部分。

四、馬賽克平衡

這是一種平衡中的混亂,就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點,所有的元素都有同樣的視覺重量。沒有層次,乍一看,畫面就像視覺噪音,但所有元素又相互匹配,形成一個連貫的整體。

(彩云注:這是一種比較高階的設計平衡處理手法,用的好可以讓畫面非常具有設計感,但把握不好的話,就會非常凌亂。所以,我們平時能看到很多大師的作品看似一些簡單圖形的使用,但就是好看,輪到自己設計的時候就會發現,越簡單的設計似乎越難設計好。)

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

五、視覺平衡的秘密?

當談到構圖中的重量平衡時,他們經常將其與物理世界中的重量進行比較:重力、杠桿、重量和支點。我們的大腦和眼睛感知平衡的方式非常類似于力學定律。我們很容易把一幅畫想象成一個在某一點上平衡的平面,就像一個天平。如果我們在圖像的邊緣添加一個元素,它就會失去平衡,有必要修復它。元素是否是一組色調、顏色還是點并不重要,目標是找到圖像的視覺“重心”,即圖像的重心。

不幸的是,沒有精確的方法來確定一個物體的視覺質量。一般來說,設計師依賴于他們的直覺。不過,下面這些有用的觀察可能會有所幫助:

1)大小

大的物體總是更重。

2)形狀

不規則形狀比規則形狀的元素輕。

3)顏色

暖色比冷色重。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

4)色調

深色物體比淺色物體重。

5)圖案

帶有圖案的元素顯得更重。

6)3D

帶有紋理貼圖的元素顯得更重。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

7)位置

物體離中心越遠,其視覺重量越大。

8)方向

垂直元素比水平元素更重。

9)密度

許多小元素可以抵消一個大元素。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

10)內部復雜性

物體內部越復雜,視覺重量更大。

11)填充空間關系

正形空間比負形空間更重。

12)對重量的感知

照片中的啞鈴看起來會比一只鋼筆更重。

六、總結

當使用對稱時,作品看起來可以更加的專業和有科學性。其中,靜態對稱的作品顯得更加有專業精神和嚴肅的;而動態對稱的設計方法則能吸引用戶的興趣,表達出個性和創造力,能讓用戶集中注意力。

原文作者:Erik Messaki(本文翻譯已獲得作者的正式授權)

譯者:彩云Sky,人人都是產品經理專欄作家,騰訊高級視覺設計師。

本文由@彩云sky 翻譯發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

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

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

日歷

鏈接

個人資料

藍藍設計的小編 http://www.gyxygd.cn

存檔

主站蜘蛛池模板: 国产亚洲专区 | 亚洲最大的成人网站 | 国产夫妻在线视频 | 日韩亚洲精品视频 | 国产在线精品一区二区在线看 | 青青草精品视频 | 99久久久无码国产精品免费 | 国产女人抽搐喷浆视频 | 日本精品久久久久久久 | www.夜夜操| 91av在线视频播放 | 欧美潮喷少妇100 | 91麻豆看片 | 欧美激情内射喷水高潮 | 久久精品二区三区 | 高h猛烈失禁潮喷无码视频 国产亚av手机在线观看 | 亚洲成人激情在线 | 麻豆视传媒在线观看 | 最新国产乱人伦偷精品免费网站 | 日韩av无码免费大片bd | 精品视频一区二区三区在线观看 | 狠色狠狠色狠狠狠色综合久久 | 一级特黄色大片 | 日本一区二区视频在线播放 | 成人免费无码视频在线网站 | 国产精品毛片完整版视频 | 欧美日一级 | 久久99久国产精品黄毛片入口 | 久久亚洲成人网 | 国产免费一区二区三区最新6 | 亚洲领先的自拍视频网站 | 亚洲一级片在线播放 | 在线成人激情视频 | 三级大片在线观看 | 亚洲欧洲日产国码久在线 | 日本高清www免费视频 | 女久久 | 91国产在线免费观看 | 日韩欧美一区二区三区四区 | 久久99精品国产麻豆婷婷洗澡 | 日本亲子乱子伦xxxx30路 | 中文字幕最新在线 | 国产精品久久久久久99人妻精品 | 日韩亚洲欧美一区二区三区 | 日本大肚子孕妇交xxx | 国产传媒一区二区三区 | 免费视频一二三区 | 无码成人片在线播放 | 久久精品h | 精品国品一二三产品区别在线观看 | 亚洲国产精品无码中文字满 | 亚洲激色 | 国产全是老熟女太爽了 | 俄罗斯美女真人性做爰 | 992tv又爽又黄的免费视频 | 国精产品一区一区三区有限公司 | 免费入口在线观看 | 99热国产这里只有精品9 | 国内一区二区三区香蕉aⅴ 国产精品日韩一区二区 | 国产私拍 | 色干网| 精品国产一区二区三区久久影院 | 欧美亚洲另类图片 | 欧美性xxxx极品hd大豆行情 | 伊人黄| 在线伊人| 操操操人人 | 少妇粗大进出白浆嘿嘿视频 | 在线成人爽a毛片免费软件 a在线天堂 | 精品欧美一区二区久久久 | 97久人人做人人妻人人玩精品 | 亚洲精品久久一区二区无卡 | 日本一道综合久久aⅴ久久 国内大量揄拍人妻在线视频 | 国产美女的第一次好痛在线看 | 亚洲中文在线播放一区 | 天堂8在线天堂资源bt | 亚洲高清aⅴ日本欧美视频 天堂色视频 | 免费人成网站在线观看不 | 人妻少妇精品专区性色av | 色狠狠av老熟女 | 国产精品一卡2卡三卡4卡 | 午夜一区欧美二区高清三区 | 麻婆豆传媒一区二区三区 | 国产一区二区丝袜 | 97豆奶视频国产 | 久久激情综合狠狠爱五月 | 日本老妇高潮乱hd | 欧美 日产 国产在线观看 | 久久久久9999 | 免费看毛片网站 | 亚洲熟妇无码八v在线播放 日韩毛片在线视频 | 欧美高清视频在线观看 | 亚洲欧美精品综合一区 | 亚洲成av人片在线观看天堂无 | 日日摸日日碰夜夜爽久久四季 | 被拉到野外强要好爽黑人 | 日本美女高潮 | 久久精品国产免费观看 | 国产91天堂素人搭讪系列 | 清纯唯美一区二区三区 | 羞涩的丰满人妻40p 日韩黄频 | 一本一道波多野结衣av一区 | 亚洲一区二区影视 | 狠狠干影视 | 蜜桃无码一区二区三区 | 91黄色精品 | 日韩专区中文字幕 | 国产一区二区三区四区五区美女 | 男人天堂一区 | 91精品婷婷国产综合久久性色 | 成人黄色激情小说 | 亚洲国产欧美日韩在线精品一区 | 国产精品乱码人人做人人爱 | 国语国产精精品国产国语清晰对话 | 欧美日韩一区二区在线观看 | 国产明星女精品视频网站 | 正在播放国产真实哭都没用 | 国产精品精品 | 高h各种姿势调教np肉奴视频 | 91爱视频 | 91九色精品女同系列 | 久久人人妻人人做人人爽 | 久草视频观看 | 天天躁夜夜躁狠狠躁2021牛牛 | 日本另类xxxx| 国产成年无码久久久免费 | xxx国产老太婆视频 国产福利视频导航 | 曰韩精品一区二区 | 色哟哟国产| 国产成人久久精品流白浆 | 四虎影视久久久免费 | 黄色毛片国产 | 国产精品高潮呻吟视频 | 无码国产成人午夜在线观看 | 精品视频国产香蕉尹人视频 | 伊人色综合网 | 黄色精品网站 | 国产午夜精品美女视频明星a级 | 曰韩a∨无码一区二区三区 久久九九久精品国产日韩经典 | 国产伦精品一区二区三区照片91 | 伊人网91 | 91久久精品一区二区 | 岛国片免费在线观看 | 琪琪午夜福利免费院 | 色香蕉视频在线观看 | 黑人大荫蒂高潮视频 | 黄色小说在线视频 | 日韩av网址大全 | 中文字幕欧美一区二区三区 | 深夜福利gif动态图158期 | 日韩精品首页 | 一本大道综合伊人精品热热 | 欧美中文亚洲v在线 | 老司机导航亚洲精品导航 | 国产素人在线观看人成视频 | 久爱无码免费视频在线 | 久久青青草原国产最新片完整 | 日本少妇高潮喷水免费可以看 | 在线观看国产精品一区 | 日日好av | 亚洲亚洲人成综合网络 | 亚洲狠狠色丁香婷婷综合 | qvod在线观看视频 | 男女啪啪高潮无遮挡免费动态 | 久久天天躁夜夜躁狠狠躁 | 久久精品6| 少妇与公做了夜伦理69 | a级性视频 | 天堂无码人妻精品av一区 | 91国产在线看 | 高h文h肉h柔佳 | 夜夜爱夜夜做夜夜爽 | 欧美日韩精品一区二区在线播放 | 日韩无人区码卡二卡1卡2卡网站 | 国产精品久久久久久久久久新婚 | 一出一进一爽一粗一大视频 | 香港三日本三级少妇三级99 | 久久不见久久见免费影院www | 黑人巨大精品欧美一区二区免费 | 无遮挡啪啪成人免费网站 | 91亚洲人成在线观看 | 99热手机在线观看 | 欧洲-级毛片内射 | 国产av一码二码三码无码 | 九九九免费视频 | 18视频在线观看3d | 欧美综合成人 | 一本色道久久99精品综合 | 欧美日本黄色 | 亚洲中文字幕无码av正片 | 国产精品19乱码一区二区三区 | 少妇一晚三次一区二区三区 | 国产欧美亚洲一区 | 久草在线观看首页 | 少妇被粗大的猛烈进出69影院一 | 亚洲网址在线观看 | 色五月色开心色婷婷色丁香 | 精品性影院一区二区三区内射 | 欧洲熟妇色xxxxx欧美老妇伦 | 一本色道无码道在线观看 | 国产精品爽爽爽 | 精品亚洲精品 | 天天做天天爱夜夜爽女人爽 | 国产精品9999久久久久仙踪林 | 在线精品一区二区 | 免费va国产高清大片在线 | 最新国产久免费视频在线观看 | 中文字幕第一页av | 你懂得在线 | 国产精品青青草原免费无码 | 国产成人啪精品午夜在线观看 | 亚洲成熟女人av在线观看 | av在线日韩 | 亚洲超碰97无码中文字幕 | 人妻被修空调在夫面侵犯 | 久久中文字幕无码中文字幕有码 | 欧美一级爱爱视频 | 欧美人与动牲交a精品 | 国产在线拍揄自揄拍无码 | 精品乱码久久久久久久 | 国产激情自拍 | 公妇乱淫太舒服了 | 亚洲三区在线播放 | 欧美一区二区三区成人 | 久久精品视频久久 | www.youjizz.日本| 四虎影视永久免费观看在线 | 最新69国产成人精品视频免费 | av激情亚洲男人的天堂国语 | 国产 精品 自在 线 99热在线观看精品 国产区女主播在线观看 | 免费日本一区二区 | 一级国产国产一级 | 樱空桃 av在线播放 肮脏的交易在线观看 | 免费色黄视频 | 在线视频99| 98超碰在线 | 337p日本欧洲亚洲大胆精品 | 亚洲国产精品一区二区手机 | 国产精品爽爽va吃奶在线观看 | 成人性生交大片 | 亚洲啪av永久无码精品放毛片 | 免费看黑人强伦姧人妻 | 97超碰总站 | 在线a人片免费观看 | 色综合久久久久综合体桃花网 | 久久丫免费无码一区二区 | 一区二区三区免费在线 | 999久久久精品视频 国产小视频在线看 | 亚洲а∨天堂男人色无码 | 日本高清免费毛片大全awaaa | 国产性猛交xxxx免费看久久 | 国产刺激视频 | а√天堂8资源中文在线 | 四虎影院免费在线 | 好吊色欧美一区二区三区视频 | 国产精品高潮呻吟久久av郑州 | 国产成人精品一区二三区在线观看 | 成人h猎奇视频网站 | 日韩成人一区 | 91热在线 | a级大片在线观看 | 天天影视涩香欲综合网 | 国产亚洲一区二区三区 | 国产日韩在线播放 | 国产精品高潮呻吟 | 亚洲男人的天堂av手机在线观看 | 日韩亚洲国产中文永久 | 日韩成人一区二区三区在线观看 | 免费日韩 | 亚洲欧洲视频在线观看 | 日韩网红少妇无码视频香港 | av午夜久久蜜桃传媒软件 | 人人干人人干人人干 | 国产激情久久久久久熟女老人 | 国产激情久久久久久 | 国精产品源xzl仙踪林仙踪 | 北条麻妃一区二区三区在线视频 | 午夜爽爽爽男女免费观看影院 | 中文字幕日产乱码六区小草 | 国产欧美一区二区三区网站 | ā片在线观看免费看无码 | 九九视频一区 | 亚洲美腿丝袜无码专区 | 色老板亚洲视频在线观 | 亚洲 欧美 影音先锋 | 成在线人永久免费视频播放 | 国产美女免费无遮挡 | 天天爱天天草 | 国产一区二三 | 免费无码av污污污在线观看 | 牛和人交xxxx欧美 | 国产亚洲精品品视频在线 | 精品麻豆剧传媒av国产 | 亚洲一区二区三区视频 | 中文字幕在线中文 | 偷拍老两口作爱 | 免费午夜福利不卡片在线 | 成年男人裸j网站 | 爱情岛论坛亚洲品质自拍网址 | 强开小婷嫩苞又嫩又紧视频韩国 | 动漫av网站| 97免费在线观看视频 | 国产精品久久久久久免费软件 | 日韩高清色 | 97国产精品亚洲精品 | 国产免费av一区二区 | 一本一道久久a久久精品综合蜜臀 | 最新亚洲一卡二卡三卡四卡 | 女人被弄到高潮的免费视频 | 亚洲精品三级 | 91av大片 | 欧美第一页在线 | 国产97色在线 | 亚洲 | 最新中文字幕av无码不卡 | 国产精品99久久久久久人免费 | 在线观看色视频 | 99精品视频在线导航 | 精品一区二区三区四区外站 | 欧美日本高清视频 | 一区二区狠狠色丁香久久婷婷 | 亚洲人成网站在线播放2020 | 一区二区三区免费在线视频 | 成年站免费网站看v片在线 又色又爽又黄的视频女女 国内精品国产三级国产av | 大地资源中文第三页 | 国产女人高潮的av毛片 | 国产精品无码不卡一区二区三区 | 日本做受高潮好舒服视频 | 狠狠久久亚洲欧美专区 | 日产乱码一二三区别免费麻豆 | 午夜131美女爱做视频 | 久久不见久久见免费影院3 亚洲a麻豆乱潮 | 熟女精品视频一区二区三区 | 日韩欧美一区在线 | 亚洲国产成人精品久久 | 99久久婷婷国产综合亚洲 | 国产免费无码一区二区视频 | 情趣蕾丝内衣少妇啪啪av | 91综合网 | 中文字幕精品一区二区精品绿巨人 | 天天躁日日躁狠狠躁性色av | 久草视屏| 91网站在线免费观看 | 一插综合网 | 日韩欧美加勒比 | 暖暖视频 免费 日本社区 | 麻豆国产av尤物网站尤物 | 久久精品99国产精品酒店日本 | 国产成人区| 乱肉妇精品av | 国产精品自拍小视频 | 欧美日韩在线一区二区 | 久久免费视频在线 | 三级在线看中文字幕完整版 | 亚洲中文字幕久久精品无码app | 国产亚洲欧美一区二区 | 在线播放真实国产乱子伦 | 老司机午夜精品 | 亚洲日韩乱码中文无码蜜桃 | 最新国产久免费视频在线观看 | 香蕉黄色一级片 | 国产最新美女精品视频网站免费观看网址大全 | 国产成人在线综合 | 天天躁日日躁狠狠躁蜜臀av | 国产精品美女久久久9999 | 久久精品99久久久久久 | 进去里片欧美 | 美女黄的视频全免费 | 精品国产欧美一区二区 | 性欧美丰满熟妇xxxx性久久久 | 涩涩涩999 | 精品久久久久久久久亚洲 | 国产乱码精品一区二区三区不卡 | 99热影院 | 亚洲日日干 | 91噜噜 | 午夜av成人| 国产成人精品午夜福利在线观看 | www四虎com | 日韩精品一区二区三区久久 | 天天干天天色综合 | 亚洲韩国精品无码一区二区三区 | 少妇高潮久久久久久一代女皇 | 人人妻人人澡人人爽人人dvd | 色情无码www视频无码区小黄鸭 | 校花高潮抽搐冒白浆 | 日韩欧美123| 黑人爱爱视频 | 精品人妻无码视频中文字幕一区二区三区 | 激情综合色五月丁香六月亚洲 | 国产经典一区二区三区蜜芽 | 天堂va蜜桃 | 国内精品2020情侣视频 | 久久久久久久艹 | 99精品视频免费 | 亚洲欧洲精品一区二区三区 | 米奇777四色精品人人爽 | 欧美精品一区二区三区免费视频 | 人成在线视频 | 国产又粗又猛又爽又黄的视频文字 | 九九热九九爱 | 精久国产一区二区三区四区 | 国产美女性生活视频 | 国产麻豆果冻传媒视频观看 | 精品国产一区二区三区在线观看 | 免费拍拍拍网站 | 精品视频999| 天天干天天色天天射 | 国产精品特级毛片一区二区 | 九一黄色 | 国产精品卡一卡2卡3卡4 | 日韩欧美亚洲国产精品 | 最新中文字幕免费看 | 秋霞av无码一区二区三区试看 | 一品道av| 产无套精品一线二线三线 | 99久久99久久久精品齐齐 | 粉嫩虎白女毛片人体 | 日产精品久久久久 | 草的我好爽视频 | 欧美视频一区二区在线观看 | 国产不卡在线视频 | 越做高潮越喷奶水视频 | 国产大片黄在线观看私人影院 | 大乳奶水成人吃91 | 亚洲最新在线 | 亚洲欧洲av | 国产99在线 | 精品日产高清卡4卡5区别 | 懂色中文一区二区在线播放 | 性中国古装videossex | 羞羞视频在线免费 | 香港三日本三级少妇三级66 | 国产人19毛片水真多19精品 | 亚洲人成未满十八禁网站 | 国产精品va在线 | 尤物在线视频 | 国产午夜精品无码理论片 | 亚洲成a∧人片在线观看无码 | 成人亚洲性情网站www在线观看 | 不卡av在线播放 | 又污又爽又黄的免费网站 | 日本女优爱爱视频 | 亚洲午夜精品在线 | 西野翔中文字幕 | 手机在线观看视频你懂的 | 波多野结衣黄色片 | 免费无码成人av在线播 | 一卡二卡3卡4卡视频免费播放 | 泰国一级黄色片 | 五月婷婷激情久久 | 国产精品乱码一区二区三区视频 | 日韩裸体做爰xxxⅹ 乌克兰少妇xxxx做受 | 亚洲精品无码久久久影院相关影片 | 久久久久久久久久久久av | 亚洲成人精选 | 一二三四日本高清社区5 | 欧美黄色性视频 | 亚洲男人第一av网站 | 丰满岳妇乱中文字幕 | 午夜影院在线观看免费 | 欧美尺寸又黑又粗又长 | 日韩高清亚洲日韩精品一区二区 | 国产精品视频超级碰 | 国产αv视频 | 97精品国产91久久久久久久 | 免费黄色一级片 | 色在线免费 | 亚洲超碰97无码中文字幕 | 岛国av大片 | 亚洲精品视频免费观看 | 国内外成人在线视频 | 中文字幕1区2区3区 天天拍天天色 | 少妇高潮久久久久久软件 | 国产曰又深又爽免费视频 | 国产三级久久久 | 久久久久这里只有精品 | 中文字幕乱码免费看电影 | 综合偷自拍亚洲乱中文字幕 | 特级黄色大片 | 啪啪网站免费观看 | 亚洲一区二区三区a | 一群黑人大战亚裔女在线播放 | 日日不卡av | 在线观看国产精品一区 | 国产情侣一区二区 | 欧美经典一区二区三区 | 亚洲自偷自偷偷色无码中文 | 久久久久久网 | 午夜操操 | 国产午夜精品理论片在线 | 黄网址在线 | 18禁黄久久久aaa片广濑美月 | 亚洲午夜理论无码电影 | 337p日本欧洲亚洲大胆69影院 | 亚洲欧美成aⅴ人在线观看 国产性xxxx18免费观看视频 | 国产成人无码a在线观看不卡 | 中文字幕精品一区二区的区别 | 亚洲乱 亚洲乱 亚洲 | 国产欧美91 | 久久九九久精品国产88 | 九九亚洲精品 | 久久精品人人爽 | 日日夜夜综合网 | 久久精品aⅴ无码中文字字幕重口 | 国产亚洲欧美日韩高清 | 国产xxxx视频在线观看 | 久久av激情 | 99国产高清| 久久精品无码一区二区三区不卡 | 在线观看中文字幕网站 | 日本一区不卡在线观看 | 国产精品久久无码不卡 | 涩涩屋视频在线观看 | 亚洲欧美在线观看品 | 女装男の子av在线播放 | 狠狠久久五月精品中文字幕 | 国产精品v片在线观看不卡 桃色综合网 | 正在播放国产真实哭都没用 | аⅴ天堂中文在线网官网 | 亚洲精品一区二区在线观看 | 亚洲国产一区二区三区波多野结衣 | 97色成人综合网站 | 无套内射蜜桃小视频 | 五月婷香蕉久色在线看 | 欧美亚州国产 | 冲田杏梨一区二区 | 草草影院ccyy国产日本第一页 | 91精品一区二区 | av无码免费无禁网站 | 亚洲丰满少妇xxxxx高潮对白 | 免费无码毛片一区二三区 | 日韩中文在线字幕 | 亚洲资源在线播放 | 天天做天天爱夜夜爽女人爽 | 91看片在线观看 | 综合自拍亚洲综合图区高清 | 亚洲精品无码成人av电影网 | 乱子轮熟睡1区 | 久久久橹橹橹久久久久手机版 | 成人做爰高潮尖叫声免费观看 | 日本特黄特色大片免费视频 | av大片在线看 | 欧美成人免费全部网站 | 久久婷婷人人澡人爽人人喊 | av手机在线 | 精品无码专区久久久水蜜桃 | 国语自产少妇精品视频蜜桃 | 国产99久久久国产精品~~牛 | 国产福利无码一区二区在线 | 久久久亚洲欧洲日产国码aⅴ | 五月天av影院| 国产成人片无码视频 | 99综合久久 | 无码精品日韩专区 | 久久成人精品视频 | 欧美最猛性xxxxx免费 | 国产在线看片免费观看 | 91在线视频免费播放 | 亚洲精品尤物 | 自拍 亚洲 欧美 卡通 另类 | 久久国语对白 | 秋霞午夜一区二区三区黄瓜视频 | 99久久久久久久久久久 | 亚洲精选在线 | 亚洲激情图片视频 | 免费一本色道久久一区 | 2019午夜福利不卡片在线 | 亚洲国产日韩制服在线观看 | 色妞在线 | 欧美丰满熟妇xxxxx | 精品无码人妻夜人多侵犯18 | 乱h高h翁欲渴 | 99视频一区二区 | 国产玉足榨精视频在线观看 | 欧美性生交xxxxx无码久久久 | 日本一码二码三码在线 | 美日韩成人 | 黑人巨茎大战白人美女 | 91精品视频在线看 | www.色欧美| 超碰在线免费观看97 | 欧美日韩国产免费一区二区三区 | 我家有个日本女人 | 精品国品一二三产品区别在线观看 | 国产片a国产片免费看视频 我的公把我弄高潮了视频 福利资源导航 | 国产又色又刺激高潮视频 | 久久久国产成人 | 中文字幕综合网 | 美女露出奶头扒开尿口免费网站 | 无码人妻精品一区二区在线视频 | 美女疯狂连续喷潮视频 | 草av| 亚洲精品国产精品国自产 | 欧美在线观看19 | 亚洲精品久久久久中文字幕 | 国产精品欧美在线视频 | 国产乱码字幕精品高清av | 国产嘿嘿嘿视频在线观看 | 亚洲国产成人私人影院tom | 成年人在线视频 | 日韩三级免费 | 久久久久久久久久国产 | 午夜精品久久久久久久99热浪潮 | 男人天堂b | 亚洲欧美日韩另类精品一区 | 中文字幕av伊人av无码av狼人 | 日本久久精品一区二区三区 | 国产私拍大尺度在线视频 | 91啦视频 | 国产福利久久 | 狠狠色噜噜狠狠狠色综合 | 国产色一区二区 | 国产麻豆放荡av剧情演绎 | 97色偷偷色噜噜男人的天堂 | 色综合久久88色综合天天6 | 丁香婷婷无码不卡在线 | 成人精品少妇免费啪啪18 | 无人在线观看的免费高清视频 | 中国亚洲女人69内射少妇 | 国产啪亚洲国产精品无码 | av操操操 | 男人的天堂国产在线视频 | 亚洲精品久久久久久久久毛片直播 | 免费无码又爽又刺激成人 | 九九国产在线视频 | 欧美黄色a级 | 女优天堂网 | 少妇高潮九九九αv | 天天操天天色综合 | 少妇出轨日记 | 少妇高潮喷水惨叫久久久久电影 | 十六以下岁女子毛片免费 | 超碰人人干人人 | 中文字幕免 | 91国产精品视频在线观看 | 日本免费大黄在线观看 | 182tv福利视频| 国内精品久久久久久久影院 | 亚洲成人网页 | 少妇极品熟妇人妻200片 | 欧美人与动物xxx | 日韩经典视频 | 人人看人人干 | 国产又大又硬又粗 | 999久久欧美人妻一区二区 | 欧美精品亚洲精品 | 无码夫の前で人妻を犯す中字幕 | 国产精品1卡2卡3卡4卡 | 久久6视频| 91手机视频在线 | 无码亲近乱子伦免费视频在线观看 | 日日夜夜一区 | 一级黄色av片 | 久久国产精彩视频 | 99精品久久久久久久久久综合 | 日韩福利片午夜免费观着 | 午夜精品一区二区国产 | 国产精品久久久久久久久费观看 | 天天爽天天射 | 强奷漂亮饱满雪白少妇av | 国产区视频在线观看 | 暴力强奷在线播放无码 | 特黄网站 | 亚洲一区二区三区四区视频 | a男人的天堂久久a毛片 | 97久久精品无码一区二区天美 | 六月综合 | 久久www免费人成看片美女图 | 先锋影音资源2中文字幕 | 亚洲精品乱码久久久久久金桔影视 | 人人爽夜夜爽 | 国产农村毛卡片 | 青青青国产在线 | 亚洲精品av一区在线观看 | 日韩人妻无码精品无码中文字幕 | 成人做爰69片免网站 | 亚洲国产精品无码久久秋霞 | 2023国产精品一卡2卡三卡4卡 | 成人在线手机视频 | 天天槽夜夜槽槽不停 | 人人妻人人爽人人狠狠 | 久久久亚洲精华液精华液精华液 | 4480午夜| 日本亚州视频在线八a | 日本高清一区免费中文视频 | 久久无码成人影片 | 国产一伦一伦一伦 | 永久免费观看的毛片手机视频 | 免费三级网站 | 久草在线视频网 | 麻豆少妇 | 久久久久久久岛国免费观看 | 另类综合在线 | 国产精品福利久久久 | 国产日韩视频 | 久草色在线 | 精品免费一区 | 色狠狠av老熟女 | 国产欧美日韩在线视频 | 2019av在线播放 | 亚洲黄色三级 | 日本精品视频免费 | 欧美一级片黄色 | 又黄又猛又爽大片免费 | 国产99精品视频 | 色婷婷激情五月 | 九九久久精品国产波多野结衣 | 欧美高清在线视频 | 福利一二三区 | 国产精品合集久久久久青苹果 | 久久精品夜夜夜夜夜久久 | 国产午夜啪啪 | 无码av无码天堂资源网影音先锋 | 第一136av福利视频导航 | 国产精品婷婷久久久久 | 久久96国产精品久久99软件 | 99久久就热视频精品草 | 久久精品高清一区二区三区 | 精品人妻无码一区二区三区性 | 欧美视频网站 | 国产一级在线视频 | 国产亚洲欧美在线观看三区 | 亚洲色欲色欲欲www在线 | 一中文字幕日产乱码va | 自拍偷拍精品视频 | 精品国产一区二区三区av片 | 国产亚洲精品久久精品6 | 欧美亚洲国产一区二区三区 | 亚洲精品无码少妇30p | 中文,亚洲,欧美 | 天堂va欧美va亚洲va好看va | 亚洲精品日韩一区二区小说 | 91视频免费在观看 | 色婷婷日日躁夜夜躁 | 国产精品久久久久永久免费观看 | 小仙女av| 72成人网| 精品视频久久久久 | 校园 春色 欧美 另类 小说 | 国产午夜伦理 | 丰满的人妻hd高清日本 | 欧美猛少妇色xxxxx | 女人特黄大aaaaaa大片 | 国产真人做爰免费视频 | 国产精品日日摸天天碰 | 美女一级全黄大片 | 四虎久久 | 国产视频福利在线 | 婷婷激情五月av在线观看 | 欧美又粗又深又猛又爽啪啪 | 999精品免费视频 | 男人激烈吮乳吃奶视频免费 | 国产成人无码午夜视频在线播放 | 色婷婷欧美 | 奇米四色7777中文字幕 | 国产亚洲日本精品成人专区 | 国产精品va在线观看手机版hd | 天天草夜夜| 国产又黄又大又爽又粗在线网站 | 男人的天堂aa | 国产做爰视频 | 国产精品69人妻无码久久 | 亚洲精品色婷婷在线影院 | 国产成人avxxxxx在线看 | 粉嫩av久久一区二区三区小说 | 亚洲欧美国产国产一区 | 午夜伦情电午夜伦情电影 | 欧洲女人牲交视频免费 | 亚洲国产品综合人成综合网站 | 日韩专区中文字幕 | 国产精品无码素人福利免费 | 久久精品日 | 99视频在线精品国自产拍 | 久久久久久在线观看 | 国产系列丝袜熟女精品视频 | 中文字幕色网 | 欧美日本激情 | 中文字幕亚洲专区 | 人人澡人人添 | 中文字幕在线看片 | 国产精品一品二区三区的使用体验 | 黄色大片成人 | 国产成人麻豆精品午夜福利在线 | 国产最新自拍视频 | 国产午夜大地久久 | 亚洲视频精品在线观看 | 久久精品99av高久久精品 | av一区二区三区免费观看 | 怡红院在线播放 | 精品性影院一区二区三区内射 | 国产精品久久久久久亚洲毛片 | 国产精品久久福利网站 | 天堂资源成人√ | 嫩草| 亚洲国产成人久久综合区 | 成人av一区二区免费播放 | 婷婷伊人五月尤物 | 日本三级吹潮在线 | 亚洲毛片无码专区亚洲a片 97日日碰人人模人人澡 | 国产一区二区野外 | 一本久久a久久免费精品不卡 | 国产国产精品人在线观看 | 久涩涩福利视频在线观看 | 久久亚洲色www成人图片 | 久久久性色精品国产免费观看 | 亚洲精品一区二区三区蜜桃久 | 国产激情久久久久影院老熟女免费 | 黄色一级片免费看 | 夜夜高潮夜夜爽夜夜爱 | 久久精品三级 | 日本真人边吃奶边做爽免费视频 | 国产成年女人毛片80s网站 | 日本无遮挡吸乳呻吟免费视频网站 | 狠狠噜天天噜日日噜av | 四虎影视永久免费观看在线 | 中文字日产幕码三区的做法大全 | 日韩av片无码一区二区三区不卡 | 亚洲成a人片在线观看无码不卡 | av中文字幕在线免费观看 | 国产精品久久久久久nⅴ下载编辑 | 成人精品视频99在线观看免费 | 亚洲精品国产一区二区三区在线观看 | 国产成人亚洲综合色婷婷 | 免费国产线观看免费观看 | 久久婷婷五月综合色和 | 欧美又大又黄又粗高潮免费 | 婷婷成人av | 18禁免费无码无遮挡网站 | 欧美超大胆裸体xx视频 | 久久国产福利国产秒拍飘飘网 | 中文字幕第六页 | 久色91蜜桃tv| 欧美日韩免费一区二区 | 国产精品久久不卡 | 久久国产经典视频 | 99久久无色码中文字幕 | 日韩美女啪啪 | 91亚洲精品久久久蜜桃借种 | 蜜桃视频一区二区三区四区开放时间 | 国产又粗又硬又长 | 天天综合天天做 | 亚洲伊人色综合网站小说 | 日日日日做夜夜夜夜无码 | 女色婷婷| 精品亚洲韩国一区二区三区 | 春药玩弄少妇高潮吼叫 | 亚洲 a v无 码免 费 成 人 a v | 全程粗话对白视频videos | 国产老头和老太xxxx视频 | av一二区 | 小视频在线观看 | 日本一二三区在线观看 | 亚洲欧美综合国产精品二区 | 狠狠色成色综合网 | 色涩综合 | 中午日产幕无线码1区 | 亚洲乱码中文字幕综合 | 骚虎成人免费99xx | 少妇把腿扒开让我添 | 懂色中文一区二区在线播放 | 国产天美传媒性色av出轨 | 久久这里精品国产99丫e6 | 中年熟妇的大黑p | 亚洲综合网站久久久 | 久久精品一二三区白丝高潮 | 久热中文字幕无码视频 | 69亚洲精品 | 精品永久| 亚洲香蕉一区二区三区 | av午夜精品| 欧美日韩精品一区二区三区 | 久亚洲一线产区二线产区三线产区 | 国产丰满农村老妇女乱 | 人人妻人人澡人人爽不卡视频 | 天干天干夜天干天天爽 | 欧美日韩成人 | 麻豆亚洲国产成人精品无码区 | 麻豆一区二区在我观看 | av噜噜噜 | 日韩三级一区二区三区 | 国产又粗又猛又爽又黄视频 | 中文乱码人妻系列一区二区 | 99在线视频观看 | 熟女少妇人妻中文字幕 | 91中文字幕在线观看 | 国产啪精品视频网站丝袜 | 亚洲欧美日韩综合一区二区 | 天天干天天射天天舔 | aⅴ中文字幕不卡在线无码 伊人在线 | 性爱一级视频 | 欧美成a | 亚洲另类无码专区首页 | 337p人体粉嫩久久久红粉影视 | 国产高清无密码一区二区三区 | 97自拍超碰 | 欧美天天拍在线视频 | 中文字幕9 | 国产在线视欧美亚综合 | 秋霞特色aa大片在线 | 无码avav无码中文字幕 | 日本一区二区三区在线观看 | 日韩一区二区a片免费观看 国产婷婷在线视频 | 亚洲熟妇成人精品一区 | 91爱爱网站 | 亚洲午夜爱爱香蕉片 | 国产精品嫩草影院一二三区入口 | 国产视频在线观看一区二区 | 操丝袜少妇 | 无码人妻aⅴ一区二区三区 999这里只有精品 | 高清精品一区二区三区 | 天天爽人人爽 | 视频在线观看一区二区 | 日韩亚洲欧美中文高清在线 | 国产v亚洲v天堂无码久久久 | 中文字幕手机在线看片不卡 | 真实国产网爆门事件在线观看 | 亚洲欧美日韩免费 | 亚洲人成电影在线观看天堂色 | 丰满岳妇乱中文字幕 | 国产日韩久久免费影院 | 国内精品久久久久久久日韩 | 丰满妇女毛茸茸刮毛 | 337p人体粉嫩胞高清视频 | 色欧美在线视频 | 蜜桃传媒av免费观看麻豆 | 人妻波多野结衣爽到喷水 | 国产的毛片 | 免费理伦片在线播放网站 | 日韩国产精品无码一区二区三区 | 国产精品久久国产精品99 | 亚欧洲乱码视频一二三区 | 337p粉嫩日本欧洲亚洲大胆 | 绝顶高潮合集videos | av观看免费在线 | 亚洲youwu永久无码精品 | 午夜神马影院dy888亚洲精品 | 九九九九九九精品 | 精品欧美一区二区三区 | 大狠狠大臿蕉香蕉大视频 | 久久97超碰色中文字幕蜜芽 | 日本精品网 | 中文字幕久久精品一二三区 | 高h各种姿势调教np肉奴视频 | 国产高清小视频 | 日本公与熄乱理在线播放 | 蜜桃av一区二区 | 欧洲精品免费一区二区三区 | 午夜嘿嘿嘿影院 | 午夜福利国产成人a∨在线观看 | 青青视频国产 | 农村+肉+屁股+粗+大+岳小说 | 日本少妇免费视频一三区 | 国内精品国产成人国产三级 | 最新成年女人毛片免费基地 | 美女跪下吃j8视频免费网站 | 天天操操夜夜操操 | 国精产品999一区二区三区有限 | 成·人免费午夜无码视频蜜芽 | 后进极品美女白嫩翘臀 | 女人内谢69xxxx免费打野 | 特级特黄aaaa免费看 | 精品成人免费一区二区在线播放 | 国产刚发育娇小性色xxxxx | 日本高清色本在线www | 国内自拍视频一区二区三区 | 天堂在线www中文 | 天天躁夜夜躁狠狠综合2020 | 国产看真人毛片爱做a片 | 九九色综合 | 成熟丰满少妇激情xxxx | 亚洲人视频在线 | 中文字幕亚洲一区二区三区 | 国内揄拍国产精品人妻电影 | 中文字幕一区二区三区四区免费看 | 国产在线欧美在线 | 波多野结衣的av一区二区三区 | 亚洲欧美黄色片 | 麻豆成人久久精品二区三区免费 | 免费黄色小视频网站 | 激情综合网五月婷婷 | 亚欧乱色熟女一区二区三区 | 亚洲欧洲日产韩国无码 | 一级毛片黄| 在线日韩不卡 | 三级毛片视频 | 国产精品亚洲va在线 | 人人澡人人透人人爽 | 视频在线观看一区 | 手机av在线播放 | 天天操视频网站 | 青青青在线免费 | 久久精品国产99精品国产2021 | 黄色片网站在线 | 疯狂欧美牲乱大交777 | 亚洲免费av片 | 欧美老妇疯狂xxxxbbbb | 在线免费观看日本 | 小草社区视频在线观看 | 在线日韩一区二区 | 少妇裸体婬交视频免费看 | 久久丝袜视频 | 久久中文字幕亚洲精品最新 | www.亚洲欧美 | 九九热线精品视频16 | 成 人 黄 色 视频免费播放 | 岛国av无码免费无禁网站麦芽 | 国产美女极度色诱视频www | 亚洲综合色区无码专区 | 中国女人高潮hd | 一区二区人妻无码欧美 | 44444kk在线观看三免费 | 国产成人欧美一区二区三区一色天 | 日本a在线免费观看 | 美女自卫网站 | 91久久国产综合久久91 | 国产69堂免费视频 | 亚洲欧洲自拍拍偷综合 | 日韩成人免费 | 一区二区国产精品 | 在线 | 国产精品星空传媒丿 | 亚洲第一成人久久网站 | 18无码粉嫩小泬无套在线观看 | 亚洲经典三级 | 男受被做哭激烈娇喘gv视频 | 99久久国产综合精品尤物酒店 | 中文字幕乱码一区二区免费 | 黄色片网站免费在线观看 | 国产日韩av在线 | 亚洲精品人成网线在线播放va | 激情综合丁香五月 | 亚洲熟妇无码av另类vr影视 | 国产成人无码免费视频麻豆 | 色综合视频网 | 国产成人精品自在钱拍 | 亚洲精品福利一区二区三区蜜桃 | 狼人大香伊蕉国产www亚洲 | 琪琪午夜 | 亚洲精品久久久久久不卡精品小说 | 日本欧美在线观看 | 久久蜜桃资源一区二区老牛 | 日日爱夜夜爱 | 性高湖久久久久久久久aaaaa | 3d动漫精品啪啪一区二区 | 日韩人妻毛片 | 97香蕉超级碰碰碰久久兔费 | 51免费看成人啪啪片 | 国产中文在线视频 | 亚洲色欲色欲高清无码 | av小说在线观看 | 高潮射精日本韩国在线播放 | 久久久噜噜噜久久熟女色 | 日韩国产一区二区三区四区五区 | 加勒比久久综合 | 日韩va中文字幕无码电影 | 丰满人妻熟妇乱又伦精品软件 | 久久深爱网 | 色视频成人在线观看免 | 欧美乱人免费视频观看 | 91免费在线看片 | 欧美日韩国产色 | 国产精品香蕉在线的人 | 精品国产欧美一区二区 | 亚洲qvod激情经典在线观看 | 亚洲另类自拍 | 中文字幕乱码人妻综合二区三区 | 久久综合成人精品亚洲另类欧美 | 亚洲中文字幕伊人久久无码 | 日本人丰满少妇xxxxx | 国产乱码一区二区 | 精品无码一区二区三区 | 亚韩精品中文字幕无码视频 | 手机av资源 | 岛国裸体写真hd在线 | 免费一区二区三区成人免费视频 | 欧美日韩国产综合新一区 | 国产毛片a高清日本在线 | 人妻精品久久无码专区涩涩 | 日本福利在线观看 | 亚洲高清偷拍一区二区三区 | 少妇大叫太大太粗太爽了 | 国产chinese男男网站大全 | 三级午夜理伦三级 | 国模私拍一区二区三区 | 亚洲欧洲成人精品av97 | 午夜精品久久久久久久久久蜜桃 | 尤物国产 | 五月色婷| 国产成人精品一区二三区 | 成人网av | 亚洲中文无码人a∨在线 | 亚洲伦乱 | 亚洲蜜桃精久天干天干天啪啪夜l | 国产日韩欧美精品一区二区三区 | 亚欧美视频 | 午夜合集| 乱码av午夜噜噜噜噜动漫 | 咪咪成人网 | 国产精品情侣呻吟对白视频 | 色视频网 | 人妻无码中文字幕永久有效视频 | 中文字幕我不卡在线看 | 国产黄色视屏 | 国产高清在线精品 | 亚洲成在线aⅴ免费视频 | 网站黄色在线免费观看 | 91久久精品一区二区 | 日韩精品大片 | 在线观看日本 | 精品卡一卡二卡3卡高清乱码 | 午夜亚洲精品久久一区二区 | 少妇被又大又粗下爽a片 | 精品美女一区二区 | 你懂的在线观看网址 | 免费看一级特黄a大片 | 国产精品国产三级国产不产一地 | 欧美激情视频一区二区 | 精品日韩亚洲欧美高清a | 水蜜桃无码av在线观看 | 在线αv| 欧美综合另类 | 国产小视频你懂的 | 欧美日韩另类在线 | 神马福利片 | 91精品国产91久久久久久黑人 | 国产精品久久人妻无码网站蜜臀 | 久久精品国产成人av | 色欲天天婬色婬香影院视频 | 欧美日韩一区二区视频不卡 | 亚洲人成无码网www电影榴莲 | 国产精品天干天干有线观看 | 亚洲阿v天堂网2019无码 | 成人免费观看视频网站 | 亚洲天堂伊人网 | 日本高清www免费视频 | 午夜精品一区二区三区三上悠亚 | 欧美老妇胖老太xxxxx | 国产精东天美av影业传媒 | 成人做爰桃子窝窝a视频 | 国内精品久久久久久久999 | 国产一区二区三区自产 | 日本一卡2卡3卡4卡免费专区 | 一区中文字幕 | 老司机在线精品视频网站的优点 | 超清无码av最大网站 | 中文字幕在线日本 | 国产又粗又硬又大爽黄老大爷视频 | 欧美日韩亚洲国内综合网38c38 | 亚洲精品免费在线 | 久久免费午夜福利院 | 中文字幕av无码专区第一页 | 国产精品自产拍在线观看免费 | 亚洲黑人巨大videos | 在线观看亚洲精品视频 | 国产一级片在线播放 | 香蕉久久久久久 | 国产黄a三级三级 | 国产青青视频 | 久久盗摄 | 久黄色| 五月天最新网址 | 中文字幕韩国三级理论无码 | 77777五月色婷婷丁香视频在线 | 欧美日韩人人模人人爽人人喊 | 中国大陆精品视频xxxx | 国产高清在线男人的天堂 | 成人做爰www网站视频 | 亚洲加勒比久久88色综合 | 91免费视频| 91在线www | 中文字幕乱码人妻无码久久 | 日韩精品一 | 日日鲁鲁夜夜狼狼视频 | 国产无套护士在线观看 | 亚洲精品久久久久avwww潮水 | 黄色毛片 黄色毛片 | 国产成人无码av在线播放无广告 | 免费视频99 | 日日橹狠狠爱欧美二区免费视频 | 日韩av人人夜夜澡人人爽 | 在厨房被c到高潮a毛片奶水 | 欧美 亚洲 另类 激情 另类 | av网站免费在线 | 99日精品| 亚欧av无码乱码在线观看性色 | 国产综合久久久久久 | 国产一区二区三级 | 国产成人永久免费视频网站 | 亚洲欧美综合在线中文 | 欧美最顶级丰满的aⅴ艳星 婷婷在线网 | 黑人巨大粗物挺进了少妇 | 亚洲黄色自拍视频 | 欧美性猛片xxxxx多人伦交 | 日本熟妇中文字幕三级 | 成人一二三区 | 99re这里只有精品首页 | 午夜精品一区二区三区在线视频 | 4484在线观看视频 | 熟妇五十路六十路息与子 | 日韩国产黄色 | 日本高清有码视频 | 亚洲品质自拍视频网站 | 国产亚洲一区在线 | 人人妻一区二区三区 | 欧美老妇交乱视频在线观看 | 日韩最新视频 | 久久久久久久久久久国产精品 | 国产精品嫩草影院av | 丁香啪啪综合成人亚洲 | 久久久久琪琪去精品色无码 | 午夜欧美视频 | 久久久一本精品99久久精品88 | 国产精品一区二区毛片 | 国产精品传媒在线观看 | 久久综合伊人77777麻豆最新章节 | 亚洲精品一区二区丝袜图片 | 精品视频一区二区在线观看 | 96视频网站 | 成人午夜小视频 | 久久中文字幕在线观看 | 国产裸体写真av一区二区 | 国产另类在线 | 中文字幕在线二区 | 亚欧成人网| 天堂资源网 | 无码人妻丰满熟妇区五十路 | 国产一区成人在线 | 狠狠色婷婷久久一区二区三区 | 国产无套护士在线观看 | 亚洲国产欧美在线观看 | 亚洲综合欧美色五月俺也去 | 正在播放国产乱子伦最新视频 | 91精品久久久久久综合 | 午夜dj在线观看高清在线视频完整版 | 国产精品久久久久久久久岛国 | 夜夜夜操| 国产成人精品a视频免费福利 | 蜜桃av影院 | 久久精品国产99国产电影网 | 国产做爰xxxⅹ久久久精华液 | 午夜剧院免费观看 | 国产欧美日韩在线中文一区 | 日韩精品一区二区三区四区 | 国产男女猛烈视频在线观看 | 好吊妞国产欧美日韩免费观看 | 男女后进式猛烈xx00动态图片 | 天天操人人爽 | 日本在线国产 | 少妇性荡欲视频 | 女人被狂躁c到高潮喷水电影 | 在线免费一级片 | 国产偷自视频区视频 | 免费国产午夜视频在线观看 | 91国偷自产一区二区三区女王 | 日韩欧美国产高清91 | 日本又黄又爽刺激 | 国色天香国产精品 | 毛片的视频 | 国产精品你懂的在线播放 | 欧美日韩国产精品综合 | 久久不见久久见www免费 | 国产麻豆精品sm调教视频网站 | 国产精品特级毛片一区二区三区 | 永久黄网站色视频免费无下载 | 不卡的av网站 | 老女人性淫交视频 | 久久久国产99久久国产久 | 国内精品久久久久久久久 | 亚洲精品国产精华液 | 国产综合有码无码视频在线 | 天天插在线视频 | 欧美一级性 | 国产99在线 | 欧美 | 路边理发店露脸熟妇泻火 | 精品国产99久久久久久麻豆 | 黄网站色视频免费国产 | 麻豆视频一区二区三区 | 亚洲人成网站999久久久综合 | 饥渴放荡受np公车奶牛 | 久久亚洲精品成人av二次元 | 亚洲第一免费 | 国产91在线看 | 97国产免费| 永久免费毛片 | av女优在线播放 | 日韩激情成人 | 日韩aaa | 日本午夜免a费看大片中文4 | aaaaa爽爽爽久久久 | 亚洲国产精华液网站w | 四虎国产精品免费观看视频优播 | 久久无码喷吹高潮播放不卡 | 精品国产99久久久久久麻豆 | 国产精品一区二区免费 | 麻豆国产成人av在线播放 | 成人欧美一区二区三区小说 | 欧美成人家庭影院 | 久久福利一区 | 一品道av| 成人aaa片一区国产精品 | 毛片自拍 | 国产网站大全 | 亚洲美女在线观看 | 奇米777四色成人影视 | 草久av | 日韩性插| 亚洲国产精品久久久天堂不卡 | 国产日韩欧美自拍 | 最新综合精品亚洲网址 | 色偷偷狠狠色综合网 | 欧洲熟妇色xxxx欧美老妇 | 激情免费视频 | 美女黄频视频大全免费的国内 | 国产 在线 | 日韩 | 亚洲一区二区三区在线观看网站 | 亚洲人成网址 | 免费人妻无码不卡中文字幕系 | 日本一级片在线观看 | 欧美交换配乱吟粗大 | 免费视频精品 | 欧美大胆少妇bbw | 国产成人综合久久精品免费 | 极品美女高潮呻吟国产剧情 | 欧美日韩国产精品一区 | 青青青国产精品国产精品美女 | 国产精品亚洲欧美 | av在线网站无码不卡的 | 99免费在线| 久久奸| 麻豆久久久久久 | 亚洲国产精品热久久 | 中文字幕天堂 | 成人啪啪18免费游戏链接 | 美日韩一二三区 | 97网站 | 精品无码一区二区三区av | 无码中文字幕av免费放 | 久久精品久久精品久久 | 欧美日本中文字幕 | 最新的国产成人精品2020 | 国产精品久久久亚洲 | 亚洲一卡2卡新区国色天香 欧美精品一区二区三区四区 | 欧美激情国产一区 | 青青久视频 | 一区二区三区不卡视频 | 午夜亚洲国产 | 性欧美videos做受 | 国产色诱视频在线播放网站 | 成人欧美一区二区三区黑人 | 97在线播放 | 在线色网| 成人性午夜免费视频网站 | 乱中年女人伦av | 小视频在线观看免费 | 波多野结衣美乳人妻hd电影欧美 | 最新天堂中文在线 | 亚洲v欧美v日韩v国产v | 黄色在线免费播放 | 巨人精品福利官方导航 | 老司机久久99久久精品播放免费 | 亚洲人成手机电影网站 | 亚洲日韩国产二区无码 | 午夜性又黄又爽免费看尤物 | 欧美人善z0zo性伦交 | 国产精品日韩欧美一区二区 | 黑人巨大精品欧美一区二区小视频 | 国产精品久久久久久亚洲 | 国产精品99久久久久久人免费 | 久久久精品国产一区二区三区 | 中字毛片 | 九九精品视频在线 | 亚洲精品成人老司机影视 | 在线播放91 | 婷婷在线资源 | 亚洲不卡中文字幕 | 999久久久无码国产精品 | 成人av片无码免费网站 | 色avav色avav爱av亚洲 | 黄色av网站在线 | 日本三级日产三级国产三级 | 亚洲国产精品无码中文字2022 | 国产毛1卡2卡3卡4卡免费观看 | 自拍偷拍中文字幕 | 破了亲妺妺的处免费视频国产 | 色诱久久av | 一区二区不卡av免费观看 | 国产人成亚洲第一网站在线播放 | 国产免费美女视频 | 亚洲性夜夜天天天 | 成人18夜夜网深夜福利网 | 欧美国产日产一区二区 | 无码国产69精品久久久久app | 久久久只有精品 | 亚洲乱码av中文一区二区软件 | 超碰人人超 | 精品国产成人a区在线观看 女人毛毛片 | 亚洲天堂最新 | 色综合色综合色综合色综合 | 免费床视频大全叫不停欧美 | 精精国产xxx在线观看 | 中文字幕手机在线看片不卡 | 变态拳头交视频一区二区 | 欧美综合乱图图区乱图图区 | 久久精品无码鲁网中文电影 | 无码一区二区三区久久精品 | 国产夫妻小视频 | 成人同人动漫免费观看 | 亚洲播播 | 欧美成人精品三级网站下载 | 日韩欧美国产一区精品 | www.亚洲国产| 97毛片 | 91宅男噜噜噜66在线观看 | 日本中文在线观看 | 人妻美妇疯狂迎合系列视频 | 色眯眯网 | 精品国产av色一区二区深夜久久 | 国产激情з∠视频一区二区 | 欧美黑人xxxx高潮猛交 | 日本青青草视频 | 在线播放色 | 福利视频自拍 | 啪视频免费 | 国产白嫩漂亮美女在线观看 | 亚洲一区二区视频在线观看 | 国产sm调教折磨视频失禁 | 国产亚洲欧洲av综合一区二区三区 | 久久精品一区二区免费播放 | 亚洲欧美日韩综合俺去了 | 久久久精品久久久 | 综合五月 | 欧美性色综合网站 | 一区二区在线 | 欧洲 | 四虎在线观看 | 亚洲欧美日韩系列 | 免费精品视频在线观看 | 国产成人毛片在线视频软件 | 国产第1页| 国产亚洲高清视频 | 91麻豆精品国产91久久久更新时间 | 国产在线精品一区二区在线看 | www夜夜操 | 美女私密免费网站 | 亚洲阿v天堂在线2017免费 | 成人性生交大片免费卡看 | 夜福利视频 | 九九色网 | 精品国产免费久久久久久婷婷 | 1314全毛片 | 国产精品伦理久久久久 | 小视频在线观看免费 | 欧美 国产 亚洲 卡通 综合 | 国产伦子伦对白在线播放观看 | 伊人久久大香线蕉无码麻豆 | 国产精品 欧美日韩 | 久久伊人av | 精品国产成人一区二区三区 | 91av视频在线免费观看 | 亚洲午夜网 | 一级视频在线观看免费 | 国产精品视频免费观看 | 亚洲综合狠狠丁香五月 | 中文字幕乱码中文乱码51精品 | 国产成人福利在线 | 中文在线观看免费视频 | 久热精品视频在线播放 | 亚洲男人天堂2020 | 粉嫩av一区二区三区免费野 | 欧美乱大交xxxxx疯狂俱乐部 | 精品无码久久久久成人漫画 | 亚洲人成电影网站色www两男一女 | 狠狠躁夜夜躁人人爽天天天天 | 亚洲国产高清在线 | 国产性生交xxxxx免费 | 日本欧美一级aaaaa毛片 | 亚洲国产成av人天堂无码 | 亚洲 日韩 国产 中文有码 | 国产aⅴ精品久久久久久 | 性欧美大战久久久久久久 | 成人av三级 | 欧美性受xxxx白人性爽 | 久久精品卡二卡三卡四卡 | 久久综合久久自在自线精品自 | 日韩专区在线播放 | 亚洲福利在线视频 | 久久大尺度 | 丝袜足脚交91精品 | 亚洲日韩午夜av不卡在线观看 | 亚洲爆乳大丰满无码专区 | 欧美午夜在线视频 | 精品无码中文字幕在线 | 亚洲国产精品久久久久爰色欲 | 99热久久免费频精品18 | 老色批网站 | 中文字幕无码人妻波多野结衣 | 男同又粗又大又好爽 小说 欧美三级网站在线观看 | 欧美视频亚洲视频 | www.亚洲一区 | 少妇裸交aa大片 | 日韩三级一区 | 性欧美vr高清极品 | 午夜两性视频 | 护士的奶头又大又白又好摸 | 色av永久无码影院av | 国产乱妇无乱码大黄aa片 | 国产日本卡二卡三卡四卡 | 久久久人成影片一区二区三区 | 内射一区二区精品视频在线观看 | av大片网址 | 日日摸处处碰夜夜爽 | 黄色av免费 | 毛片在线免费视频 | 亚洲日韩亚洲另类 | 成人又黄又爽又色的网站 | 丰满少妇内射一区 | 在线无码中文字幕一区 | 中文字幕免费高清网站 | 久久在线 | 女人的天堂网站 | 精品人妻系列无码人妻在线不卡 | 免费国产乱理伦片在线观看 | 精品一区二区超碰久久久 | 日韩综合中文字幕 | 亚洲中文字幕无码av在线 | 成人午夜精品无码区 | 欧产日产国产精品 | 伊人青| 青久在线| 永久免费的啪啪网站免费观看浪潮 | 日韩高清在线观看 | 超碰九九 | 日本中文字幕第一页 | 久久精品无码一区二区三区不卡 | 中年国产丰满熟女乱子正在播放 | 在线91视频 | 久久影视一区 | 久久草在线视频播放 | 免费无码又爽又刺激毛片 | 三级黄色在线免费观看 | 色小说亚洲 | 女人特黄大aaaaaa大片 | 国产成人免费无码视频在线观看m | 亚洲老子午夜电影理论 | 丁香花中文在线免费观看 | 久久永久免费 | 天天操综合 | 毛片国产 | 偷窥自拍五月天 | 国内少妇高潮嗷嗷叫正在播放 | 美女黄网站18禁免费看 | 天天躁夜夜踩很很踩2022 | 色多多福利网站免费破解 | 天天cao | 巨大黑人极品videos精品 | 免费1级做爰片1000部视频 | 欧美99热 | 免费啪视频在线观看视频日本 | 无遮挡边吃奶边做刺激视频 | 亚洲最大的网站 | 久久国语露脸国产精品电影 | 久久www色情成人免费观看 | 成人激情在线播放 | 亚洲免费精品aⅴ国产 | 无码久久久久不卡网站 | 日韩在线观看视频一区二区 | 鲁一鲁一鲁一鲁一色 | 偷偷做久久久久免费网站 | 动漫三级 | 99久久精品国产第一页 | 中文字幕在线视频免费视频 | 99精品热视频| 黄色吃奶视频 | 美女扒开奶罩露出奶头视频网站 | 国产精品午夜无码av天美传媒 | 久久久久久久久99精品 | 精品久久久无码中文字幕一丶 | 美国十次成人欧美色导视频 | 男人天堂手机在线 | 综合网五月天 | 国内精品九九久久久精品 | 午夜在线视频观看日韩17c | 午夜精品一区二区三区在线视频 | 国精品午夜福利视频不卡 | 精品久久91 | 国产精品亲子乱子伦xxxx裸 | 9999精品 | 三级日本高清完整版热播 | 91精品国产乱码久久久久 | 天天干天操 | 色欲悠久久久久综合区 | av大片网站 | 久久综合老色鬼网站 | 西西午夜无码大胆啪啪国模 | 国产精品久久久久久久蜜臀 | 日韩一品道 | 久在线精品视频线观看 | 日本少妇人妻xxxxx18免费 | 四虎免费在线观看 | 狠狠色狠狠色88综合日日91 | 亚洲午夜无码毛片av久久 | 亚洲中文字幕无码久久2020 | 亚洲bbw性色大片 | 国产精品自拍一区 | 亚洲大尺度在线观看 | 日本高清中文字幕 | 亚洲春色av无码专区最 | 国产成人美女裸体片免费看 | 丁香婷婷六月 | 日av在线播放 | 久久噜噜噜 | fee性欧美 | 熟妇人妻不卡中文字幕 | 日日碰狠狠添天天爽无码 | av解说在线 | 成人性生交视频免费看 | 2020亚洲天堂 | 偷自拍亚洲视频在线观看 | 亚洲天堂2017手机在线 | 成人羞羞国产免费图片 | 高潮毛片无遮挡免费看 | 午夜少妇福利 | 欧美在线一二 | 久久69精品久久久久久hb | 18禁美女裸身无遮挡免费网站 | 精品国产肉丝袜久久首页 | 神马午夜我不卡 | 无码专区视频中文字幕 | 国产无遮挡a片无码免费 | 波多野结衣在线观看一码 | 婷婷av网| 天堂躁躁人人躁婷婷视频ⅴ | 成人亚洲欧美成αⅴ人在线观看 | 狠狠噜狠狠狠狠丁香五月 | 老女人色黄大片 | 欧洲美熟女乱又伦免费视频 | 久久天天躁夜夜躁狠狠i女人 | 欧洲-级毛片内射 | 亚洲网站在线免费观看 | 影音先锋国产在线 | 久久久久久99精品久久久 | 国产成人三级在线播放 | 一区二区成人在线 | 国产操操操 | 国产亲子乱了中文 | 欧美老妇牲交videos | 在线国产欧美 | 亚洲人成电影网站色www | 国产在热线精品视频 | 国产在线无遮挡免费观看 | 秋霞午夜久久午夜精品 | 欧美日视频 | 日韩夜夜操 | 日韩免费三级 | 日韩精品免费 | 国产裸体歌舞一区二区 | 男人亚洲天堂 | 亚洲蜜芽在线精品一区 | 国产在线拍揄自揄视频导航 | 免费看成年人网站 | 色偷偷色噜噜狠狠成人免费视频 | 欧美最猛黑人xxxx黑人猛交98 | 久久爱www人成狠狠爱综合网 | 四虎亚洲精品成人a在线观看 | 麻豆激情网 | 全黄做爰100小说 | 男女涩涩视频 | 女人扒开屁股桶爽30分钟 | 亚洲国产精品自在在线观看 | 日韩国产欧美精品 | 亚洲欧美综合国产精品二区 | 少妇被猛男粗大的猛进出 | av日韩在线免费观看 | 五月天激情婷婷婷久久 | 国产另类自拍 | 久久夜夜操 | 无码天堂亚洲国产av麻豆 | 香蕉国产在线 | 看av免费毛片手机播放 | 国产亚洲精品久久久久久无亚洲 | 国产精品无码素人福利免费 | 99国产精品久久久久久久 | 91av福利| 久久久777 | a视频在线观看 | 精品国产免费一区二区三区香蕉 | 欧美一级做一级爱a做片性 欧洲午夜精品 | 黄色大片黄色大片 | 欧美日韩在线播放 | 国产精品女丝袜白丝袜 | 欧美大片一区二区 | 999视频在线观看 | 久久精品国产亚洲a∨蜜臀 熟妇人妻久久中文字幕 | 日韩精品v | 国产精品亚洲专区无码牛牛 | 亚洲激情免费视频 | 黑人大战中国av女叫惨了 | 5个黑人躁我一个视频 | 亚洲精品久久久久久国 | 国产亚洲产品影视在线产品 | 高清视频在线观看一区二区三区 | 久久精品在线 | 久草在线中文888 | 91成人精品视频 | 精品国产成人av在线免 | 色午夜影院 | 无码熟妇αⅴ人妻又粗又大 | 中国老太婆bb无套内射 | 日韩欧美不卡 | 91精品久久久久久久久不口人 | 欧美日韩高潮 | 大帝av在线一区二区三区 | 玩丰满熟妇xxxx视频 | 97人人超碰国产精品最新 | 高潮喷吹一区二区在线观看 | 国产精品亚洲mnbav网站 | 免费无码一区二区三区a片18 | 国产明星精品无码av换脸 | 日本精品在线观看视频 | 亚洲色图图 | 日本黄h兄妹h动漫一区二区三区 | 成人午夜精品久久久久久久 | 丁香婷婷激情五月 | 91丨国产丨白丝 | 久久久久无码国产精品一区 | 少妇人妻精品一区二区三区 | 国产视频日韩欧美 | 色丁香色婷婷 | 精品国产成人一区二区三区 | 香蕉视频在线精品视频 | 中文字幕一区二区三三 | 神马午夜91| 口述很黄很乱小说 | 男女深夜福利 | 888米奇色狠狠俺去啦小说 | 特黄特色三级在线观看 | 国产精品尤物视频 | 最新中文字幕在线视频 | 中国少妇xxxx做受18 | 欧美手机在线 | 伊人青青操 | 又黄又爽又色两性午夜小说 | 在线视频免费观看爽爽爽 | 水蜜桃av导航 | 欧美一区不卡 | 亚洲国产成人资源在线 | 青草一区 | 丝袜 中出 制服 人妻 美腿 | 欧美成年黄网站色视频 | 明星乱 亚洲合成图.com | 韩国无码av片在线观看 | 国产精品一区三区 | 美女操操操 | 131美女mm爱做爽爽爽视频 | 韩日综合成人中文字幕 | 国产38页 | 天天躁日日躁很很躁2022 | 国产欧美激情日韩成人三区 | 婷婷综合另类小说色区 | 91视频首页| 91精品入口 | 国产黄色片在线免费观看 | 亚洲国产精品久久青草无码 | 日韩a∨| 久久精品国产免费观看三人同眠 | 欧美人与动牲交免费观看网 | 久久99精品久久久秒播软件优势 | 日韩成人在线看 | 黄网站色视频免费观看 | 黄色大片在线免费看 | 国产午夜福利片 | 精品少妇人妻av免费久久久 | 日日草夜夜 | 每日更新在线观看av | ww.国产| 午夜爽爽爽男女免费观看麻豆国产 | 国产无吗一区二区三区在线欢 | av激情小说 | 欧洲vodafone精品性 | 亚洲精品一线二线 | 熟妇人妻一区二区三区四区 | 91精品国产高清一区二区三蜜臀 | 久月婷婷 | 成人激情小视频 | 五月婷婷开心网 | 5x性社区免费视频播 | 男女作爱网站 | 欧美丰满老妇性猛交 | 亚洲精品入口a级 | 99精品视频免费热播在线观看 | 四虎国产精品免费观看视频优播 | 日韩一区二区三区射精 | 日韩欧美自拍偷拍 | 精品国产大片 | 欧美爱爱免费视频 | 中文无码精品a∨在线观看不卡 | 91麻豆精品国产91久久久久久 | 国产三级午夜理伦三级 | 亚洲乱码卡一卡二卡新区中国 | 岛国av在线| 亚韩无码av电影在线观看 | 欧美日韩系列 | 欧美日韩高清在线观看 | 欧美熟妇毛茸茸 | 无遮挡啪啪成人免费网站 | 九草在线视频 | 免费在线91 | 精品丝袜一区 | 顶级少妇做爰视频在线观看 | 熟女毛片 | 拍拍拍无遮挡十八禁免费视频 | 一个添下面两个吃奶把腿扒开 | 2021久久超碰国产精品最新 | 久久久www免费人成精品 | 26uuu欧美日本| 国产毛片毛片毛片毛片毛片 | 国产成人乱码一二三区18 | 国产乱码精品一区二区三区中文 | 天堂在线观看视频 | 久草视屏 | 亚洲成人伊人 | 91嫩草精品少妇 | 亚洲国产日韩精品一区二区三区 | 成人欧美一区二区三区视频xxx | 久久国产午夜精品理论片 | 国产尤物av一区二区三区 | 吃奶摸下高潮60分钟免费视频 | 超碰免费成人 | 亚洲在av极品无码天堂 | 日日躁狠狠躁夜夜躁av中文字幕 | 一区二区三区国产在线 | 五月天久久久久久九一站片 | 奇米精品视频一区二区三区 | 国产精品18hdxxxⅹ在线 | 亚洲男女内射在线播放 | 免费人成自慰网站 | 伊人色综合一区二区三区 | 国产yw8825免费观看网站 | 最新无码人妻在线不卡 | 中产乱码中文在线观看免费软件 | 五月天天天综合精品无码 | 成人涩涩软件 | 欧美三日本三级少妇三级99观看视频 | 国产精品久久久久久亚洲影视公司 | 欧洲熟妇色 欧美 | 久久久久亚洲精品无码网址色欲 | 亚洲日韩av片在线观看 | 欧美又黑又粗 | 国产麻豆精品福利在线观看 | 精品无码av无码专区 | 亚洲成av人片天堂网无码】 | 91在线 | 婷婷婷国产在线视频 | 91制片一二三专区亚洲 | 男人天堂黄色 | 色婷婷六月亚洲婷婷6月 | 自愉自愉产区二十四区 | 欧美色图一区 | 久久久网 | av一本久道久久波多野结衣 | 乳色吐息观看 | 亚洲色爱免费观看视频 | 午夜少妇性影院私人影院 | 亚洲亚洲人成网站网址 | 亚洲老女人视频 | 天堂在线中文资源 | 国精品无码一区二区三区在线a片 | 黄片毛片在线免费观看 | 国语自产偷拍精品视频 | 少妇逼逼 | 无码小电影在线观看网站免费 | 中文字幕淫 | 成人 黄 色 免费播放 | 欧美国产一区二区三区 | 农村乱视频一区二区三区 | 天天操天天要 | 特大黑人娇小亚洲女 | 久久精品免费一区二区喷潮 | 日本喷奶水中文字幕视频 | 国产午夜精品一区二区三区老 | 亚洲黄色录像片 | 欧美成人www在线观看 | 天天躁日日躁狠狠很躁2023 | 糟蹋小少妇17p | 精品国产品香蕉在线 | 伊人久久伊人 | 亚洲国产美女精品久久久久∴ | 亚洲成a人片在线观看的电影 | 国产suv精品一区二区68 | 亚洲日本中文字幕乱码在线 | 亚洲视频p | 少妇被粗大的猛烈进出69影院一 | 欧美成人精品第一区二区三区 | 欧美另类一区二区 | 免费观看又色又爽又湿的软件 | 成人午夜做爰视频免费看 | 成人无码av一区二区三区 | 成人免费午夜 | 四虎影城库 | 欧美精品a∨在线观看 | 国产狂喷潮 | 日本青青草 | 精品自拍av | 欧美日韩中文国产一区发布 | 亚洲精品伦理熟女国产一区二区 | 久久久91视频| 日本xxx在线观看 | 午夜成人性刺激免费视频在线观看 | 久久综合成人 | 国产一级黄视频 | 片黄色毛片黄色毛片 | 国产精品xxx在线 | 中文字幕天使萌在线va | 人人做人人干 | 玩两个丰满老熟女久久网 | 超碰98在线观看 | 亚洲欧洲日产国码无码动漫 | 夜晚被公侵犯的人妻深田字幕 | 大香伊蕉在人线免费视频 | 131美女爱做视频国产福利 | 一本色道久久88精品综合 | 国产一区二区日本欧美精品久久久 | 九九线精品视频在线观看 | av黄色天堂| 好吊操这里有精品 | 亚洲精品视频观看 | 欧美成人片在线观看 | 四色网址 | 亚洲精品视频在线免费播放 | 亚洲一区福利视频 | 翘臀少妇后进一区二区 | 艹少妇视频 | 狠狠躁日日躁夜夜躁老司机 | 99在线精品视频免费观看20 | 天天操天天干天天爽 | 国产精品9999 | 免费观看日本 | 欧美精品v国产精品v日韩精品 | 色伊人亚洲综合网站 | 熟妇人妻无乱码中文字幕真矢织江 | 色网视频| 欧美亚洲另类在线 | 91午夜精品一区二区三区 | 少妇荡乳情欲办公室456视频 | 伊人成色综合人夜夜久久 | 国产资源在线免费观看 | 狠狠操av | 中文日韩一区二区 | 一本色道久久综合亚洲精品小说 | 久久东京热人妻无码人av | 国产欧美一区二区精品婷 | 一本一生久久a久久精品综合蜜 | 99热精品毛片全部国产无缓冲 | 国产精品视频2020年最新视频 | 欧美激情一区二区三区成人 | 国产精品久久久久久无人区 | 久久乐av| 狠狠操人人干 | 青青视频在线观看免费2 | 97亚洲欧美国产网曝97 | 国内精品久久久久影院男同志 | 深爱激情五月婷婷 | 99vv1com这只有精品 | 国内女人喷潮完整视频 | 思热99re视热频这里只精品 | 午夜精品久久久久9999高清 | 动漫无遮挡h纯肉亚洲资源大片 | 国产精品一区二区熟女不卡 | 亚洲国产欧美在线综合 | 亚洲综合婷婷 | 亚洲综合久久成人a片红豆 国产亚洲精品第一综合麻豆 | 久久久精品99久久精品36亚 | 91看片免费在线观看 | 亚洲每日更新6666666 | 欧美日韓性视頻在線 | 国产亚洲日韩一区二区三区 | 亚洲精品无码成人网站 | 玩两个丰满老熟女 | 欧美日本三级少妇三级久久 | 免费很黄无遮挡的视频 | 在线观看精品视频 | 成人性生活毛片 | 三级黄色在线视频 | 日韩网站在线播放 | 8x8ⅹ在线永久免费入口 | 337p日本欧洲亚洲大胆精筑 | 欧美黄色a视频 | 人人妻人人澡人人爽人人精品浪潮 | 少妇无码精油按摩专区 | 国产日韩欧美精品在线 | 大rb狠狠地给你这y荡的视频 | 成人自拍视频在线观看 | 夜色爽爽影院18禁妓女影院 | 男女视频一区二区 | 麻豆成人传媒一区二区 | 九九99精品| 久久午夜无码免费 | 中文字幕中文乱码www | 亚洲人妖视频 | 久久中文字幕无码一区二区 | 国产性―交一乱―色―情人 | 99在线精品视频在线观看 | 国内外免费激情视频 | 无码少妇一区二区三区视频 | 国产精品毛片一区视频 | 亚洲嫩模喷白浆在线观看 | 国产大片黄在线观看私人影院 | 99精品视频在线观看免费蜜桃 | 四虎在线免费视频 | 1区2区3区高清视频 免费观看国产小粉嫩喷水 精品人妻中文字幕有码在线 | 噼里啪啦国语在线播放 | 日日干日日摸 | 日韩视频网址 | 成人伊人网站 | 日本免费一区二区三区中文字幕 | 欧美成人一区二区三区在线观看 | 成人性生交片无码免费看 | 国产高清女同学巨大乳在线观看 | 小早川怜子xxxxaⅴ在线 | 欧美在线看片a免费观看 | 亚洲综合无码一区二区三区 | 日日澡夜夜澡人人高潮 | 新疆美女69精品视频在线播放 | 日本在线视频观看 | 91精品麻豆 | 午夜影院在线视频 | 欧美熟妇与小伙性欧美交 | 国内精品久久久久影院一蜜桃 | 免费人成视频在线观看不卡 | 成人高清无遮挡免费视频在线观看 | 国产欧美日韩高清在线不卡 | 真人插b免费视频播放 | 国产爆乳肉感大码在线视频 | 中文二区 | 欧美自拍网站 | 久久精品99av高久久精品 | 国产精品婷婷久久爽一下 | 亚洲精品久久久日韩美女图片 | 国产精品欲av | 天天色影网| 8090yy亚洲精品久久 | 国产精彩视频一区 | 成人做爰高潮尖叫声免费观看 | 202丰满熟女妇大 | 欧美大尺度裸体床戏 | 成人av不卡 | 天堂精品一区 | 国产午夜亚洲精品羞羞网站 | 欧美白丰满老太aaa片 | 成本人片无码中文字幕免费 | 99伊人网| 久久东京热人妻无码人av | 无码人妻精品中文字幕不卡 | 亚洲色婷六月丁香在线视频 | 老妇做爰xxx视频一区二区三区 | 亚洲区小说区图片区qvod按摩 | 少妇无码av无码一区 | 在线播放人成视频观看 | 狠狠躁天天躁无码中文字幕图 | 私人vps一夜爽毛片免费 | 中文字幕毛片 | 国产成人久久av免费 | 国产成人av免费观看 | 婷婷99 | 性生交免费看 | 亚洲国产成人久久一区 | 日本一道本高清一区二区 | 国产1区2区3区 | 巨胸喷奶水www视频网站 | 国产精品青草久久福利不卡 | 久久天堂av综合色无码专区 | 婷婷婷色 | 中文字幕人成乱码熟女香港 | 一区二区三区日韩视频 | 亚洲中文无码a∨在线观看 青青草伊人久久 | 91精品视频网 | 免费涩涩18网站入口 | 午夜精品国产精品大乳美女 | 色老大久久综合网天天 | 国产精品178页 | 久久aⅴ免费观看 | 国产小视频精品 | 色爱综合激情五月激情 | 国产精品久久久久毛片软件 | 日韩视频免费在线 | 双乳奶水饱满少妇视频 | 天天上天天添天天爱少妇 | 国产三级a毛视频在线观看 毛片黄片免费观看 | 国产色秀视频在线播放 | 国产99在线 | 免费 | 国内久久精品视频 | 99九九免费视频 | 免费看无码特级毛片 | 麻豆熟妇人妻xxxxxx | 亚洲欧美日韩v在线观看不卡 | 影音先锋无码a∨男人资源站 | 久久人妻少妇嫩草av | 丰满饥渴老女人hd69av | 日本少妇一区二区三区 | 免费成人视屏 | 欧美丰满熟妇xxxxx | 国产一区二区在线免费 | 奇米二区| 九九九九九九精品任你躁 | 久久aⅴ乱码一区二区三区 美女网站免费观看 | 2019精品手机国产品在线 | 久久久久免费精品国产小说色大师 | 视频二区丝袜国产欧美日韩 | 国产精品久久久久久妇女6080 | 欧美人与动牲交片免费播放 | 77久久 | 忘忧草社区在线播放日本韩国 | 二区三区四区视频 | 四库成人免费视频 | 成人激情综合 | 95av视频| 天天干夜夜骑 | 亚洲一区二区三区无码国产 | 一区二区三区午夜免费福利视频 | 捏胸吃奶吻胸免费视频大软件 | 综合欧美丁香五月激情 | 欧美另类人妻制服丝袜 | 四十五十老熟妇乱孑视频 | 欧美亚洲自偷自拍 在线 | 女同av在线播放 | 国产精品日本欧美一区二区三区 | 黄网站在线免费看 | 91日日拍夜夜嗷嗷叫国产 | 男女作爱网站 | 国产精品偷窥熟女精品视频 | 国产在线黄色 | 亚洲午夜精品在线观看 | 免费女人裸体视频无遮挡免费网站 | 精品卡一卡二卡三免费 | 日韩中文字幕欧美 | 无遮挡很爽很污很黄的网站 | 婷婷成人综合激情在线视频播放 | 国产又爽又黄又无遮挡的激情视频 | av在线播放一区二区三区 | 香蕉在线视频观看 | 中文字幕蜜臀 | 亚洲精品亚洲人成在线观看 | 中文精品久久久久国产网址 | 国产精品污www一区二区三区 | 婷婷激情成人 | 色偷偷色噜噜狠狠网站年轻人 | 少妇乳大丰满高潮喷水 | 国产精品无码专区在线观看不卡 | 欧美一级片网站 | 国产免费一区二区三区香蕉精 | 久久精品一区 | 99久久精品免费看国产一区二区 | 久久riav| 起碰97在线视频国产 | 久久精品tv | 久久综合色一综合色88欧美 | 亚洲综合网国产精品一区 | 综合啪啪 | 久久精品国产只有精品66 | 国产男人搡女人免费视频 | 操日本少妇| 高清视频在线观看一区二区三区 | 99久久免费看精品 | 日本女人性高潮视频 | 蜜桃av噜噜一区二区三 | 日韩综合亚洲色在线影院 | 国产亚洲精品久久久久久小舞 | 国产精品禁18久久久夂久 | 欧美肉体xxxx裸体137大胆 | 亚洲线精品一区二区三区八戒 | www.日韩在线视频 | 一区二区中文字幕 | 亚洲人成网站77777在线观看 | 伊人网址 | 国产人妻无码一区无 | 天堂资源在线 | 欧美做爰孕妇群xxx 熟女人妻水多爽中文字幕 超碰色偷偷 | 日日摸夜夜添夜夜添国产精品 | 亚洲黄色录像片 | 成人午夜精品久久久久久久 | 五月精品 | 国产乱人偷精品免费视频 | 精品国产黄色 | 亚洲日本高清一区二区三区 | 午夜精品一区二区三区aa毛片 | 久久精品国产一区 | 国产又粗又猛又爽又黄的视频在线观看动漫 | 日韩avwww| 韩国精品福利一区二区三区 | 亚洲欧美日韩精品在线 | 免费久久99精品国产自在现 | 日韩中文字幕亚洲 | 曰韩精品无码一区二区三区视频 | 亚洲高清视频一区 | 精品成人免费一区二区不卡 | 亚洲一级二级片 | 五月丁香六月综合缴清无码 | 色哟哟亚洲精品一区二区 | 男女高潮喷水在线观看 | 制服丝袜在线第一页 | 国产精品三区四区 | 欧洲免费一区二区三区视频 | 久久久久久久片 | 老子影院午夜伦不卡大全 | 日韩免费 | 老牛影视免费一区二区 | 婷婷激情网站 | 扒开双腿疯狂进出爽爽爽 | 欧美高清a| 蜜桃av在线| 国产成人毛片在线视频 | 在线播放国产一区二区三区 | 真人做爰免费毛片视频 | 日韩www.| 久久99成人 | 夜添久久精品亚洲国产精品 | 三级成年网站在线观看 | 日日摸日日碰夜夜爽无码 | 欧美一级做一级爱a做片性 欧洲午夜精品 | 狠狠干在线观看 | 日韩av第一页在线播放 | 欧美丰满少妇xxⅹ | 亚洲精品乱码久久久久久蜜桃 | 日韩欧美国产一区二区 | 国产av电影区二区三区曰曰骚网 | 日韩成人高清在线 | 日本道久久 | 久久婷婷五月综合成人d啪 日韩人妻无码一区二区三区久久 | 久久免费播放视频 | 日产亚洲一卡2卡3卡4卡网站 | 国产精品热久久久久夜色精品三区 | 亚洲欧美偷拍另类 | 国产尤物在线视精品在亚洲 | 免费的污污的网站在线观看 | 一区二区三区在线播放视频 | 国产涩涩视频在线观看 | 极品少妇被后入内射视 | 国内揄拍国产精品人妻电影 | 91chinese一区二区三区 | 亚洲日本乱码中文在线电影 | 成人一在线视频日韩国产 | 日本一区二区三区高清无卡 | 国产精品污www一区二区三区 | 一品道高清一区二区 | 国产亚洲精品久久久久动 | 中文字幕国产一区 | 综合色在线视频 | 色www永久免费视频首页 | 亚洲情网 | 欧美一区二区三区成人久久片 | 中文国产成人精品久久久 | 亚洲精品在线免费观看视频 | 天天鲁在视频在线观看 | 国产chinesehdxxx宾 | 国产成人亚洲综合色婷婷秒播 | 受虐狂 极端 奴役 折磨在线看 | 国产成人亚洲无吗淙合青草 | 国产人妻无码一区二区三区免费 | 美女丝袜一区二区三区 | 97视频人人 | 人妻少妇精品一区二区三区 | 日韩精品色 | 精品毛片在线观看 | 99极品视频 | 男人天堂2018亚洲男人天堂 | 东京热中文字幕a∨无码 | 亚洲人成在线观看 | 日韩a片无码一区二区五区电影 | 99热精这里只有精品 | 99爱99| 亚洲乱码中文字幕久久孕妇黑人 | 一本色道久久综合亚洲精品不卡 | 日本一级待黄大片 | 精品国产精品久久一区免费式 | 欧美顶级metart裸体全部自慰 | 小受叫床高潮娇喘嗯啊mp3 | 国产乱码精品一区二区三 | 国产第三页 | 爽爽精品dvd蜜桃成熟时电影院 | 青青青国产精品免费观看 | 高清精品一区二区三区 | 欧美成人免费在线视频 | 国产精品久久久久久久伊一 | 日韩视频中文字幕在线观看 | 秋霞av无码观看一区二区三区 | 国产亚洲精品久久久久秋霞不卡 | 婷婷四房综合激情五月在线 | 亚洲一区二区三区黄色 | 国产色播av在线观看 | 亚洲一区二区三区无码久久 | 中文字幕乱码在线播放 | 日本丰满大乳人妻无码苍井空 | 国产精品69午夜妇大片 | 亚洲在av极品无码天堂手机版 | 泰国三级av| 欧美第一黄网免费网站 | 亚洲熟妇中文字幕五十中出 | 日韩午夜伦| 五月丁香国产在线视频 | 一本大道在线无码一区 | 亚洲人成网站18禁止 | 欧美日韩国产图片 | 亚洲香蕉在线视频 | 北条麻妃人妻av在线专区 | 激情五月深爱五月 | av在线一| jizz99| 好男人影视www | 欧美日韩国产精品一区 | 日韩免费黄色片 | 亚洲国产婷婷香蕉久久久久久 | 超碰在线cao | 精品视频一区二区三区中文字幕 | 欧美乱色伦图片区 | 粉嫩呦福利视频导航大全 | 9l视频自拍九色9l视频最新 | 能看av的网址 | 国产亚洲精品无码成人 | 国产三级三级a三级 | 成人性生交大片免费看r男欢女爱 | 久久精品国产99 | av天堂午夜精品一区 | 亚洲重口味 | 免费看午夜福利专区 | 午夜精品久久久久久久四虎 | 91小视频在线观看 | 无码国产精品一区二区vr | 精品国产aⅴ一区二区三区 国产精品无码一本二本三本色 | 国产精品美女久久久久 | www.九色| 国产又粗又硬又长又爽视频 | 青青青国产精品免费观看 | 亚洲第一页夜 | 毛片1000部免费看 | 午夜毛片不卡高清免费看 | 欧美经典片免费观看大全 | 亚洲曰本av在线天堂 | 国产精品偷伦视频免费手机播放 | 美国三级日本三级久久99 | 开心激情网五月天 | 热热99| 黄片毛片在线看 | 欧美视频在线观看一区二区三区 | 亚洲伊人成综合网2222 | 尤物永久网站 | 国产一本二卡三卡四卡乱码 | 精品一区二区三区无码免费视频 | 婷婷色站 | 国产又白又嫩又爽又黄 | 欧美精品国产制服第一页 | 日韩国产成人在线 | 色综合视频一区二区三区44 | 国产成人亚洲综合无码dvd | 成人精品视频一区二区三区尤物 | 激情五月综合色婷婷一区二区 | 熟女少妇精品一区二区 | 日韩av无码精品人妻系列 | 久久成人国产精品免费软件 | 亚洲精品视频在线观看免费 | 天天中文字幕 | 人人综合 | 一进一出一爽又粗又大 | 亚洲精品乱码久久久久 | 久久综合伊人77777麻豆最新章节 | 在线理论视频 | 亚洲精品成a人在线观看 | 天堂中文在线最新版地址 | 91久久国产综合精品女同国语 | 4hu四虎永久在线观看 | 超薄丝袜足j好爽在线观看 最近的中文字幕 | 日韩欧美一区二区三区永久免费 | 中文字幕视频网站 | 天堂中文资源库官网 | 久久老子午夜精品无码怎么打 | 人人狠狠综合久久亚洲婷婷 | 欧美在线一二区 | 四虎精品免费 | 欧美精品系列 | 夜夜夜夜夜猛噜噜噜噜噜gg | 久久97精品国产96久久小草 | 午夜精品福利在线 | 99国产精品白浆在线观看免费 | 久久精品国产只有精品66 | 成人a8198va | 成人影片麻豆国产影片免费观看 | 欧美极品少妇xxxxⅹ免费视频 | 国产亚洲小视频线播放 | 亚洲永久免费观看 | 欧美亚洲第一页 | 天天综合色天天综合色hd | 无码不卡av东京热毛片 | 久久亚洲精品成人无码网站夜色 | 蜜臀av无码国产精品色午夜麻豆 | 国产精品v亚洲精品v日韩精品 | 国产欧美在线看 | 日产精品久久久一区二区 | 中文字幕日韩亚洲 | 玩爽少妇人妻系列无码 | a级在线观看| 国产精品久久久久人妻无码 | 欧美肥婆性猛交xxxx中国1 | 国产免费av网站 | 高潮喷水抽搐无码免费 | 99热爱久久99热爱九九热爱 | 亚洲视频在线视频观看视频在线 | 国产精品久久久久久久久久久久午衣片 | 亚洲国产品综合人成综合网站 | 男人天堂网在线视频 | 日本狠狠干 | 久久久一本 | 精品日产高清卡4卡5区别 | 国产小仙女精品av揉 | 美国十次成人欧美色导视频 | 999亚洲国产精华液 东北老女人高潮对白dvd | 久草视频在线播放 | 男女车车的车车网站w98免费 | 仙踪林av| 日日日日日 | 亚洲精品自拍偷拍视频 | 亚洲熟妇大图综合色区 | av在线天堂| 欧美成人免费在线视频 | 六月丁香婷婷色狠狠久久 | 韩日高清 | 男人女人午夜视频免费 | 免费福利在线 | 少妇精品视频无码专区 | 色欲天天网站欧美成人福利网 | 亚洲欧美国产一区二区三区 | 国产白丝视频 | 真人做爰免费毛片视频 | 亚洲国产欧美一区二区三区久久 | 天天做日日干 | 日韩女优一区 | 国产精品亚洲专区无码影院 | 中文字幕亚洲高清精品一区在线 | 91看片免费在线观看 | 香港三级午夜理论三级 | 欧美一区免费观看 | 精品国产免费人成电影在线看 | 国产精品免费久久久 | 女人被狂爆到高潮免费视频 | 欧美日韩一级特黄 | 日日操日日干 | 欧美精品videos另类日本 | a∨天堂亚洲区无码先锋影音 | 欧洲丰满大乳人妻无码欧美 | 琪琪午夜理论片福利在线观看 | 精品无码一区二区三区电影 | 国产精品一区二区吃奶在线观看 | 亚洲逼 | 日本特黄特色大片免费视频网站 | 九九色播 | 国产成人精品日本亚洲第一区 | 欧美精品在线一区二区三区 | 亚洲aⅴ天堂av天堂无码 | 欧美影视一区 | 日本喂奶挤奶汁毛片 | 亚洲天堂色图 | 无码专区久久综合久中文字幕 | 9999精品成人免费毛片在线看 | 免费国产线观看免费观看 | 99热亚洲| 亚洲另类激情综合偷自拍图 | 久久伊人精品视频 | 激情爆乳一区二区三区 | 亚洲欧美精品一中文字幕 | 五月婷六月丁香 | 精品午夜福利1000在线观看 | 一区二区在线免费观看视频 | 在线观看av你懂的 | 久碰人妻人妻人妻人妻人掠 | 久久九九51精品国产免费看 | 自偷自拍av | 天堂视频在线观看免费 | 看一级大片 | 天天射天天噜 | av动漫无码不卡在线观看 | 国产精品亚洲αv天堂无码 丁香六月激情综合 | 操一操影院 | 奇米精品视频一区二区三区 | 午夜精品久久久久9999高清 | 女人色网站 | 国产成人午夜福利院 | 青青青视频在线 | 喷潮在线 | 色爱综合激情五月激情 | 久久久全国免费视频 | 成人免费视频无码专区 | 欧美激情一区二区在线观看 | 久久久天堂国产精品女人 | 992tv在线观看 | 三级全黄的视频在线观看 | 亚洲成a人片在线观看无码专区 | 张津瑜亚洲一区在线流出 | 国产一区二区三区免费观看在线 | 国产精品成人永久在线 | 色婷婷在线播放 | 国产精品女优 | 91精品国产综合久久久蜜臀粉嫩 | 国产v亚洲v天堂a无码 | 色版视频在线观看 | 欧美成人精品1314www | 欧美人与动牲交免费观看网 | 岛国av在线免费观看 | 人人妻人人爽人人做夜欢视频九色 | 国产精品a国产精品a手机版 | 国产精品成人久久久久 | 九九九精品成人免费视频小说 | 强开乳罩摸双乳吃奶网站 | 91精品国产亚洲 | 国产男女猛烈无遮挡a片软件 | 无码欧精品亚洲日韩一区 | 在线视频免费播放 | 不卡av网站 | 一级精品毛片 | 亚洲午夜精品毛片成人播放器 | 日本视频网站在线观看 | 天天拍夜夜爽 | 欧美 偷窥 清纯 综合图区 | 人妻无码免费一区二区三区 | 国产在线看老王影院入口2021 | 日韩精品影视 | 日本无遮羞教调屁股视频网站 | 亚洲gv天堂无码男同在线观看 | 亚洲精品无码av人在线观看国产 | 亚洲美女视频一区 | 亚洲永久精品视频 | 亚洲精品55夜色66夜色 | 一区二区三区av高清免费波多 | 欧美日产欧美日产国产精品 | 久久久精品人妻一区二区三区四 | 艳妇臀荡乳欲伦交换h在线观看 | 国产亚洲欧美精品一区 | 中文日产幕无线码一区2023 | 国产亚洲精品成人av久久ww | 中文字幕精品av乱码在线 | 精品久久久久国产免费第一页 | 无码国模产在线观看免费 | 又黄又湿啪啪响18禁 | 伊人无码精品久久一区二区 | 国产精品免费观看调教网 | 国产成人avxxxxx在线观看 | 国产黄色大片免费观看 | 精品国产乱码久久久久久图片 | 中文字幕免费久久 | 狠狠干夜夜草 | 亚洲在线天堂 | 成人黄色短片 | 亚洲色爱免费观看视频 | 中文字幕亚洲一区二区va在线 | 夜夜嗨网站 | 日本欧洲亚洲高清在线 | 掀开奶罩边吃边摸下娇喘视频 | 一本一本久久a久久 | 校园激情亚洲 | 日日摸夜夜添夜夜添国产2020 | 精品国产aⅴ | 一区二区三区在线视频观看 | 久久久久人妻一区精品 | 日本熟妇色xxxxx日本免费看 | 无码人妻黑人中文字幕 | 日韩亚洲天堂 | 思思99热久久精品在线6 | 少妇厨房愉情理9仑片视频 日本乱人伦片中文三区 | 大地资源中文第二页日本 | 狠狠色噜噜狠狠狠狠97首创麻豆 | 97免费人妻在线视频 | 中文字幕在线观看视频一区 | 动漫成人无码免费视频在线播 | 成人午夜影视 | 综合av在线播放 | 尤物国产在线 | 96久久| 99精品国产99久久久久久97 | 人妻免费久久久久久久了 | 国产乱人对白 | 一区不卡在线观看 | 精品国产91久久久久久浪潮蜜月 | 在线看免费无码的av天堂 | 亚洲色中文字幕在线播放 | 亚洲欧美综合精品另类天天更新 | 午夜精品视频在线无码 | 男人深夜网站 | 综合激情久久综合激情 | 久久久精品久久日韩一区综合 | 国精产品999一区二区三区有限 | 国产男女猛烈无遮挡免费视频网站 | 日韩av图片 | 中文字幕第23页在线 | 亚洲性日韩精品一区二区三区 | 国内丰满少妇猛烈精品播 | 69精品丰满人妻无码视频a片 | 夜色视频网站 | 西西人体www大胆高清视频 | 亚洲精品国产一区二区小泽玛利亚 | 亚洲成av人在线观看网站 | 啄木乌法国一区二区三区 | 爱情岛论坛亚洲品质永久入口 | 伊人9| 美女一区二区视频 | 丁香花免费高清视频在线观看 | 中文字幕亚洲男人的天堂网络 | 亚洲欧洲精品成人 | 亚洲欧美牲交 | 亚洲日韩欧美一区久久久久我 | 久草在线视频精品 | 最近免费中文字幕中文高清百度 | 五月婷丁香 | 久久99婷婷国产精品免费 | 校园春色~综合网 | 中国少妇内射xxxxⅹhd | 无码成人1000部免费视频 | 欧美一级色 | 亚洲国产精品无码久久一区二区 | 欧美成人看片黄a免费看 | 久久婷婷人人澡人爽人人喊 | 8090成人午夜精品无码 | 萌白酱一区二区 | 一级黄色国产 | 免费国产一区二区三区 | 成人自拍视频在线 | 日韩乱码视频 | 美女下半身无遮挡免费网站 | 亚洲人成电影网站色mp4 | 成人无码一区二区三区 | 欧美亚洲日本日韩在线 | av大片在线无码永久免费 | 国产日韩欧美高清 | 少妇乳大丰满高潮喷水 | 麻豆国产97在线 | 欧美 | 综合图区亚洲欧美另类图片 | 国产又黄又爽又刺激的免费网址 | 97精品依人久久久大香线蕉97 | 三个男人添一个女人p的视频 | 国产日本精品视频 | 91精品综合 | 免费日韩一区二区 | 18禁高潮出水呻吟娇喘蜜芽 | www.精品国产 | 毛片毛片毛片毛片毛片毛片毛片 | 青春草在线视频免费观看 | 国产在线观看成人 | 国产又色又爽又黄的网站在线 | 99热都是精品久久久久久 | 亚洲国产精品一区二区成人片不卡 | 亚洲国产精品久久久久久久 | 久9热视频这里只精品18 | jizz视频在线观看 | 欧美人与黑人交 | 国产明星精品无码av换脸 | 乱子伦一区二区三区 | 国产cdts系列另类在线观看 | 日本三级大片 | av大片免费 | 国产精品久久久久久爽爽爽床戏 | 亚洲综合中文字幕无线码 | 亚洲欧美一区久久牛牛 | 亚洲国产视频一区二区 | 亚洲一页 | 麻豆一区产品精品蜜桃的广告语 | 欧洲卡一卡二卡三爱区 | 亚洲欧洲国产综合 | 又色又爽又黄无遮挡的免费视频 | 99热热 | 精品国产三级a∨在线观看 五月婷婷激情综合 | 伊人青青草原 | 国产对白乱刺激福利视频 | 又粗又硬又大又爽免费视频播放 | 无码少妇高潮浪潮av久久 | 成人黄色片免费看 | 国产一级片视频 | 国产寡妇亲子伦一区二区三区 | 无码国产一区二区三区四区 | 萌白酱一区二区 | 日本欧美视频在线观看 | 日本无码人妻波多野结衣 | 国产美女被遭强高潮网站不再 | 日本在线观看视频网站 | 国产做受视频 | 男女午夜视频在线观看 | 狠狠干2021| 国产一区二区三区不卡在线观看 | 日韩视频免费大全中文字幕 | 亚洲一区在线视频观看 | 亚洲成人a∨ | 网友自拍露脸国语对白 | 久久久一级片 | 二级特黄绝大片免费视频大片 | 五月丁香六月综合缴情在线 | 亚洲福利视频一区 | 一区二区三区四区日韩 | 九九在线视频 | 超碰操操操| 欧美精品一区二区视频 | 成年女人永久免费 | 亚洲精品一区二区三区在线 | 人人妻人人澡人人爽精品日本 | youjizz韩国 | 国产99久久久国产精品成人免费 | 国产成人a∨麻豆精品 | 天天草夜夜骑 | 色综合av| 在线观看免费不卡av | 午夜免费福利视频在线观看 | 日韩aaa | 国产亚洲一区二区手机在线观看 | 亚洲日本va中文字幕人妖 | 婷婷激情五月网 | 日韩欧美日韩 | 精品国产乱码久久久久夜 | 青青草视频免费在线观看 | 91网站免费视频 | 久久精品成人免费国产 | 本道综合久久 | 久久国产36精品色熟妇 | 无码手机线免费观看 | 欧美亚洲色综久久精品国产 | 国产一区二区女内射 | 欧美精品videosex极品 | 国产成人精品s8视频 | 不卡的av中文字幕 | 少妇人妻精品一区二区三区 | 日韩成人免费在线 | 久久无码潮喷a片无码高潮 越南少妇bbb真爽 | 91一级| 欧美69av | 人人艹人人插 | 国产亚洲综合一区二区 | av在线视屏 | 日本高清无卡码一区二区 | 欧美天天拍在线视频 | 欧美日韩中字在线观看 | av基地| 视频二区 | 在线精品国精品国产尤物 | 毛片毛片免费看 | 国产91丝袜在线熟 | 成人欧美一区二区三区色青冈 | 日本在线视频二区 | 在线黄色网 | 亚洲国产欧美日韩在线人成 | 欧美成aⅴ人高清ww 欧美精品国产动漫 | 亚洲色丰满少妇高潮18p | 无码人妻品一区二区三区精99 | 国产的毛片 | 日韩一区二区在线观看视频 | av一区二区免费 | 99久久国产综合精品女同图片 | 亚洲国产精品成人久久久麻豆 | 国产亚洲精品无码成人 | 91久久精品人人做人人爽综合 | 91女女互慰吃奶在线 | jjzz日| 综合av一区| av色综合久久天堂av色综合 | 日韩有码第一页 | 九色porny蝌蚪视频 | 日本一二免费不卡区 | 日本怡红院免费全部的视频 | 亚洲人成人无码网www电影首页 | 卡1卡2卡三卡精品视频 | 成人羞羞视频国产 | 一本色道久久加勒比精品 | 无码人妻一区二区三区麻豆 | 日韩精品在线观看视频 | 欧美 亚洲 另类 偷偷 自拍 | 在线看av的网址 | 第一福利蓝导航柠檬导航av | 国产成人av性色在线影院色戒 | 女人被男人躁得好爽免费视频 | 久久嫩草精品久久久精品才艺表演 | 自拍 高清 日韩 欧美 另类 | 777天堂麻豆爱综合视频 | 中文资源在线天堂库8 | 日本丰满熟妇bbxbbxhd | 99爱99 | 天天久久综合 | 免费看国产zzzwww色 | 成人美女视频 | 天天爱夜夜| 国产精在线 | 亚洲国产成人久久精品99 | y111111国产精品久久婷婷 | 在线看片免费人成视频播 | 亚洲欧美日韩国产成人一区 | 91免费视频网站 | 国产精品v欧美精品v日韩 | 综合久久久久久综合久 | 天干天干啦夜天干天2017 | 欧美三级小视频 | 精品一区二区视频在线观看 | 欧美一区二区三区不卡视频 | 男人和女人上床的视频 | 国产+高潮+白浆+无码 | 天天伊人网 | 欧美三级午夜理伦三级 | 日韩在线观看你懂的 | 国产成人精品av大片 | 国产一卡2卡3卡四卡精品国色 | 亚洲中文字幕无码卡通动漫野外 | 国产精品成人永久在线四虎 | 国产日韩欧美视频免费看 | 精品熟女少妇av久久免费 | 亚洲精品精品 | 牛牛视频精品一区二区不卡 | 神马久久网站 | 天堂一区av | 国产激情免费视频在线观看 | 国产精品久久久久久久久免费丝袜 | av在线播放中文字幕 | 乱短篇艳辣500篇h文最新章节 | 99国产精品久久99久久久 | 在线免费色 | 国产人妖一区二区三区 | 日韩黄色大片 | 国内精品美女a∨在线播放 国产一级欧美 | 无套无码孕妇啪啪 | 欧美一级全黄 | 日本一区二区三区免费在线观看 | 精品夜夜澡人妻无码av蜜桃 | 亚洲国产色婷婷 | 久久国产自偷自偷免费一区调 | 国产一级二级毛片 | 亚洲淫男的高潮合集 | 国产精品久久久久影院亚瑟 | 久久精品免费视频观看 | 国产97成人亚洲综合在线 | 欧美激情自拍 | 欧美夜夜操 | 欧美专区一区二区三区 | 国产欧美一区二区三区在线播放 | 成人无码视频在线观看网址 | 狠狠色噜噜狠狠狠狠2021 | 中文字幕我不卡在线看 | 人人插人人做 | 日日摸日日碰夜夜爽亚洲综合 | 日韩有码第一页 | 亚洲专区在线播放 | ā片在线观看免费观看 | 亚洲小说另类 | 日本亚洲vr欧美不卡高清专区 | 国产午夜亚洲精品羞羞网站 | 国产精品18久久久久久麻辣 | 欧美日韩国产91 | 成人私人免费影院168 | 91麻豆精品国产91久久久更新时间 | 日日人人 | 黄色av网站免费看 | 久久久精品福利 | 中文文字幕文字幕高清 | 亚洲免费激情视频 | 日韩精品在线观看免费 | 免费看黑人男阳茎进女阳道视频 | 久久久久高潮综合影院 | 国产亚洲精品久久久久久网站 | 国产精选一区 | 蜜臀aⅴ国产精品久久久国产老师 | 国产精品日韩专区第一页 | 日韩精品在线视频免费观看 | 伊人影院视频 | 日本一级特黄大片558 | 免费国产成人午夜福利电影 | 精品久久久一二三区播放播放播放视频 | 无码人妻h动漫网站 | 欧美人与动牲交a欧美精品 18禁超污无遮挡无码免费游戏 | 亚洲精品av一二三区无码 | 蜜桃av蜜臀av色欲av麻 | 狠狠操夜夜操 | 日韩人妻熟女中文字幕a美景之屋 | 亚洲图片欧美色图 | 天堂中文在线观看 | 一本加勒比hezyo无码专区 | 日本道二区免费v | av无码精品一区二区三区宅噜噜 | 日日日日日| 女教师少妇高潮免费 | 日韩网站在线观看 | 亚洲乱码中文字幕在线 | 伊人9999| 天天综合天天综合 | 少妇大叫太大太爽受不了在线观看 | 白丝爆浆18禁一区二区三区 | 玩弄放荡人妻一区二区三区 | 啪啪网址| 北条麻妃一区二区三区av高清 | 四虎永久在线 | 天堂中文网 | 精品久久久一二三区播放播放播放视频 | 激情久久婷婷 | 久久五月婷婷丁香 | 99热精品国产一区二区在线观看 | 亚洲精品免费网站 | 亚洲欧洲日产国码无码久久99 | 新91视频在线观看 | 我要操av| 欧美成人精品网站 | 无码精品人妻一区二区三区涩爱 | 欧美一区不卡 | 久久成人亚洲香蕉草草 | 夜鲁鲁鲁夜夜综合视频 | 在线国产一区二区 | 特级西西444www大精品视频免费看 | 97九色| aaaaaa亚洲| 丰满岳妇乱一区二区三区 | 亚洲精品毛片一区二区三区 | 国产精品一区二区三区四区五区 | 国产精品久久久久久久久免小说 | 亚洲精品无码久久久久av麻豆 | 久久精品日产第一区二区三区乱码 | 亚洲精品一区国产 | 三级国产国语三级在线 | 亚洲免费在线观看 | 男人av无码天堂 | 亚洲色中文字幕无码av | 口述很黄很乱小说 | 成人免费xxxxx在线视频 | 国产精品成人精品久久久 | 欧美老妇交zozo人 | 午夜天堂在线观看 | 国产欧美日韩中文字幕 | 国产一区二区三区无码免费 | 很色很爽很黄裸乳视频 | 91精品欧美 | 国产好爽…又高潮了毛片 | 51久久夜色精品国产麻豆 | 中文屏幕乱码av | 欧美激情性做爰免费视频 | 色综合av在线 | 久久精品日产第一区二区三区 | 精品熟女少妇av久久免费 | 四色av网站入口 | 亚洲女人av久久天堂 | 伊人亚洲综合网色 | 亚洲欧美综合精品另类天天更新 | 999色综合 | 亚洲品质自拍 | 天天躁躁水汪汪人碰人 | 福利片一区二区三区 | av影音在线| 中文无码字幕一区到五区免费 | 亚洲熟妇丰满大屁股熟妇 | 日本一区二区无卡高清视频 | 欧美性性性性性色大片免费的 | 天堂8在线天堂资源在线 | av中文字幕潮喷人妻系列 | 日韩欧美一区2区3区 | www.天天干.com| 成人毛片观看 | 国产午夜精品理论片小yo奈 | 97超碰精品| 99久久精品国产成人一区二区 | 偷拍97| 成人激情视频在线观看 | 久青草国产视频 | 免费观看又色又爽又湿的视频软件 | 俺去俺来也在线www色官网 | 久久精品视频一区二区三区 | 欧美资源在线 | 九九操视频 | 精品无人区一区二区三区在线 | www.gaoav.com| 色播激情五月 | 少妇被粗大的猛烈进出动视频 | 久久国内精品自在自线400部 | 亚洲欧美日韩综合在线丁香 | 亚洲成a∨人片在线观看无码 | 国产精品久久无码不卡黑寡妇 | 日韩av三级在线 | www.这里只有精品 | 蜜臀aⅴ精品一区二区三区 久草性视频 | 天天澡夜夜澡狠狠久久 | 日韩一区二区三 | 综合免费视频 | 成人亚洲a片v一区二区三区蜜臀 | 亚洲免费在线观看 | 99精品无人区乱码1区2区3区 | 黄色在线免费看 | 怡红院成永久免费人视频新的 | 日韩六区| 国产麻豆精品免费喷白浆视频 | 亚洲天堂小视频 | 日本免费一区二区三区高清视频 | 亚洲线精品一区二区三区影音先锋 | 伊人蕉久| 亚洲美女在线视频 | 乱人伦人妻中文字幕在线 | 13女裸体慰在线观看 | 国产操视频| 婷婷成人丁香五月综合激情 | 国产 欧美 视频一区二区三区 | 无码人妻啪啪一区二区 | 亚洲网址 | 久久久久人妻精品一区蜜桃 | 人妻熟女斩五十路0930 | 人狥杂交一区欧美二区 | 国产夜夜嗨 | 亚洲影院天堂中文av色 | 少妇三级看三级视频 | 婷婷综合社区 | 理论片午夜| 中文字幕免费在线看 | 国产又色又爽无遮挡免费动态图 | 免费看又色又爽又黄的国产软件 | 国产2区 | 美妇颤抖双乳呻吟求欢视频 | 人禽杂交18禁网站 | 亚洲人成网站在线在线观看 | 婷婷国产v国产偷v亚洲高清 | 蜜臀av性久久久久av蜜臀妖精 | 无码精油按摩潮喷在播放 | 九九热综合 | 国产精品无套 | 无码人妻丰满熟妇啪啪区日韩久久 | 国产乱码精品一区二区三区五月婷 | 亚洲欧洲日产国无高清码图片 | 国产一区二区三区av网站 | 国产精品专区第1页 | 中文字幕xxx | 亚洲妇女水蜜桃av网网站 | 伊人资源| 国产乱子伦60女人的皮视频 | 玩弄美艳馊子高潮无码 | 国产精品对白清晰受不了 | 男人天堂网2017 | 在线播放偷拍一区精品 | 中文字幕国产综合 | 黄色免费在线网站 | 屁屁影院ccyy备用地址 | 男阳茎进女阳道视频大全 | 欧美日韩在线观看一区 | 精品久久久久久久久中文字幕 | 91精品国产综合久久小仙女图片 | 色综合天天色 | 无码av一区二区大桥久未 | 无码熟妇αⅴ人妻又粗又大 | 国产波霸爆乳一区二区 | 中文在线√天堂 | 人人妻人人添人人爽欧美一区 | 天天综合在线观看 | 性亚洲女人色欲色一www | 亚洲精品在线网站 | 亚洲a成人| 丰满少妇呻吟高潮经历 | 亚洲色在线v中文字幕 | www裸玉足久久久 | 国产乱对白刺激视频 | 日韩内射美女片在线观看网站 | 国产成人无码av在线播放无广告 | 人人澡人人澡人人澡 | 日本精品一区二区三区在线观看 | 久久字幕网 | 狠狠噜天天噜日日噜视频跳一跳 | 97人洗澡人人澡人人爽人人模 | 天下第一社区视频www日本 | 久热这里只有精品12 | 国产在线视频一区二区三区 | αss裸体日本少妇pics | 国产精品一区二区av交换 |