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

首頁

用戶體驗(yàn)是一種過程,而不是結(jié)果

濤濤

任何人都抵擋不了時(shí)間的力量,你可以斥責(zé)它的無情,也可以贊美它的給予,在這個(gè)成長的歷程中,我們尋找的不是時(shí)間給我們帶來了什么,而是這個(gè)過程中我經(jīng)歷了什么。后者,才是我們需要深思并感恩的。

與「用戶體驗(yàn)」一樣,許多人會(huì)評(píng)判一個(gè)產(chǎn)品用戶體驗(yàn)的好與差。但是「好」與「差」只是整體上的一種結(jié)論,普通人可以說這兩個(gè)字。但作為設(shè)計(jì)師,必須懂得在體驗(yàn)過程中,知曉哪里好與哪里差,更要知道為什么好為什么差。

就好像評(píng)書似的,真正讀過某本書的人,不會(huì)單純的說:「這本書太好/爛了」。他一定會(huì)有一種感悟,哪怕只是一句話。

既然是為了提升「用戶體驗(yàn)」,就得與用戶一起進(jìn)行體驗(yàn)的走查,才能有根據(jù)的進(jìn)行優(yōu)化。

一般我們會(huì)建立一種用戶體驗(yàn)路徑,其目的是為了了解用戶的動(dòng)機(jī)、關(guān)注點(diǎn)和需求點(diǎn)。所以為了提升用戶體驗(yàn),就必須邀請(qǐng)用戶參與體驗(yàn)路徑的設(shè)計(jì)過程。

用戶在使用一款產(chǎn)品時(shí),他們中的大多數(shù)只是為了完成某個(gè)任務(wù),所以在這個(gè)過程中,也許用戶只使用了部分功能,也可能使用了所有功能。

因此,不要將體驗(yàn)路徑的設(shè)計(jì)限制在特定的產(chǎn)品或功能服務(wù)上,要理解完整的用戶體驗(yàn)路徑,針對(duì)性的進(jìn)行走查,與用戶一起提升產(chǎn)品易用性。

一、讓用戶參與產(chǎn)品設(shè)計(jì)流程

真實(shí)的用戶體驗(yàn)路徑需要通過不同用戶的參與互動(dòng),不管是一對(duì)一的討論或焦點(diǎn)小組,都需要大量的數(shù)據(jù)才能得出真實(shí)的結(jié)論。

任何沒有基于研究報(bào)告的嘗試、假設(shè)、數(shù)據(jù),都將使它在很大程度上只是理論性的。所以我們一定要通過不同用戶的不同體驗(yàn)結(jié)論,客觀的進(jìn)行分析路徑中的哪一環(huán)可以繼續(xù)優(yōu)化。

與用戶的交流溝通是其中的關(guān)鍵,在用戶的幫助下,你很容易找到可提升的體驗(yàn)點(diǎn)。

因?yàn)椋脩羟榫w的波動(dòng)和心情的愉悅、滿足、懷疑、失望以及懊悔的表現(xiàn)是無法在報(bào)告中準(zhǔn)確反映出來的,所以設(shè)計(jì)師要重視這些用戶反饋,包括這些互動(dòng)的場(chǎng)景可以使設(shè)計(jì)師產(chǎn)生共鳴,通過同理心來設(shè)計(jì)并優(yōu)化功能。

然而,沒有任何產(chǎn)品或功能服務(wù)能夠滿足過程中的所有用戶需求,所以,要深入了解每一個(gè)階段出現(xiàn)的需求點(diǎn),因?yàn)樗鼈兌紩?huì)衍生出不同的因素,這使我們能夠理解產(chǎn)品如何更好的服務(wù)于用戶的生活。

同樣,沒有任何靈丹妙藥能積極地改變用戶體驗(yàn),而是通過與用戶的持續(xù)接觸。也許你會(huì)說很難進(jìn)行與用戶直接的對(duì)話,所以你通過客服回訪、用戶反饋等方式收集信息也未嘗不可。

可能到這里你還沒有完全明白其中的道理,下面我舉個(gè)例子詳細(xì)說明。

二、拆解 – 用戶體驗(yàn)之旅

讓我們來舉一個(gè)旅游平臺(tái)的例子,這個(gè)平臺(tái)是供于各種各樣的人和商務(wù)旅行者使用的,其中包括了航班、酒店、出租車租賃等在內(nèi)的度假套餐。

為了讓各位深入了解體驗(yàn)路徑,以及更好地了解我們的用戶,讓我們對(duì)旅行者的體驗(yàn)路徑也做一個(gè)拆解。如下圖:

這個(gè)路徑將全面地了解用戶的想法、感受和行為,因?yàn)樗麄儠?huì)經(jīng)歷不同的階段,幫助填補(bǔ)我們路徑中的空白點(diǎn),幫助我們更好的進(jìn)行產(chǎn)品的設(shè)計(jì)。

1. 計(jì)劃旅行

在計(jì)劃旅行時(shí),設(shè)計(jì)師認(rèn)為用戶的想法是什么?

  • 目的:休息、假期、出差;
  • 目的地的候選名單,檢查距離和到達(dá)目的地的時(shí)間;
  • 出行方式選擇:飛機(jī)、火車、巴士、游輪、自駕;
  • 查看酒店位置與評(píng)論好壞;
  • 評(píng)估旅行成本(如航班、酒店等費(fèi)用);
  • 可取消功能(如已訂的航班、酒店等)。

2. 用戶角度

通過與用戶的走查、回訪、反饋,可以幫助我們了解用戶內(nèi)心真實(shí)的想法,幫助我們?cè)鰪?qiáng)以及簡(jiǎn)化用戶的體驗(yàn)方式。

  • 在條件允許的情況下,提供盡可能多的價(jià)格;
  • 經(jīng)常出差的人會(huì)為了飛機(jī)上的最佳座位而自愿增加費(fèi)用;
  • 出來旅行的家庭想要知道目的地有哪些有趣的兒童活動(dòng);
  • 顯示符合用戶自定義預(yù)算的旅行套餐;
  • 幫助用戶估算旅行成本;
  • 給出評(píng)價(jià)信息,可供用戶評(píng)判(朋友、預(yù)訂平臺(tái)、Facebook等)。

3. 特殊情況

產(chǎn)品是否有處理特殊情況的功能?

  • 由于個(gè)人原因,推遲了旅行計(jì)劃;
  • 目的地天氣或其他情況不利。

我們是否可以幫助用戶更好地應(yīng)對(duì)這些情況?通過及時(shí)提供有關(guān)目的地天氣狀況、備選旅行計(jì)劃或建議類似目的地的信息等。

那么通過第一個(gè)內(nèi)容的拆解,我們就可以發(fā)現(xiàn),這個(gè)點(diǎn)能做的功能就有很多。而且這些功能還能排列優(yōu)先級(jí),設(shè)計(jì)師能主動(dòng)進(jìn)行推進(jìn),提升設(shè)計(jì)師自身的價(jià)值。功能走查的重要性相信各位也看出來了。下面繼續(xù)。

1. 完成預(yù)訂

是時(shí)候確定目的地、日期、旅行方式和停留地點(diǎn)了。(依然是設(shè)計(jì)師角度)

  • 設(shè)計(jì)有序、直觀的預(yù)訂體驗(yàn);
  • 安全流暢的付款流程,包括多種支付渠道的選擇;
  • 旅行模式的確認(rèn)細(xì)節(jié),包括駕駛方向和幫助熱線電話號(hào)碼;
  • 酒店確認(rèn):房間詳情和熱線電話。

2. 用戶角度

  • 直接能從航空公司/酒店確認(rèn)信息,這樣會(huì)比旅行社確認(rèn)更具價(jià)值;
  • 目的地指南(視頻、天氣、穿著、提示、要做的事情、文化等);
  • 建議的旅行路線;
  • 緊急求助熱線(如果客戶在預(yù)訂過程中撥打電話,呼叫應(yīng)該能及時(shí)取得聯(lián)系)。

3. 特殊情況

  • 預(yù)訂未確認(rèn),付款已處理。

1. 出行與酒店

設(shè)計(jì)師考慮的用戶需求。

  • 舒暢的旅行體驗(yàn)(飛行準(zhǔn)時(shí)等);
  • 入住酒店,快速辦理手續(xù);
  • 干凈,方便,光線充足的房間(特別是床,洗手間);
  • 體驗(yàn)當(dāng)?shù)氐拿朗澈臀幕?
  • WiFi 覆蓋;
  • 干凈整潔的出租車等交通工具;
  • 與家人和朋友實(shí)時(shí)分享照片;
  • 合理的分配時(shí)間。

2. 用戶角度

  • 主動(dòng)跟蹤用戶的行程,確保一切順利(發(fā)送提醒,與酒店確認(rèn));
  • 目的地指南(事件、當(dāng)?shù)亟煌ā⑻鞖狻⒁路⑻崾尽⒁龅氖虑榈龋?
  • 當(dāng)?shù)夭蛷d/購物券/優(yōu)惠等。

3. 特殊情況

  • 航班延誤或取消;
  • 緊急的醫(yī)療情況;
  • 信用卡透支。

1. 旅程與歸來

旅途中的回憶和收獲。

  • 在臉書/ Instagram / Twitter / WhatsApp 上共享更新和照片;
  • 與家人和朋友分享經(jīng)驗(yàn);
  • 回憶當(dāng)?shù)氐拿朗常?
  • 經(jīng)驗(yàn)與旅游前的期望不相符,過度炒作;
  • 航班和酒店服務(wù);
  • 評(píng)論旅程的整體情況。

2. 用戶角度

  • 提醒攜帶基本藥物;
  • 幫助預(yù)支旅行預(yù)算;
  • 關(guān)于外匯轉(zhuǎn)換;
  • 當(dāng)?shù)蒯t(yī)療建議、

3. 特殊情況

  • 剩下的錢如何兌換;(如國外游)
  • 退款;
  • 行李丟失。

通過以上的拆解說明,可見體驗(yàn)路徑對(duì)于功能設(shè)計(jì)的重要性,各位設(shè)計(jì)師一定不要主觀認(rèn)為「你就是用戶」,而是結(jié)合用戶需求進(jìn)行分析,設(shè)計(jì)出更合理的功能。

小結(jié)

設(shè)計(jì)師要不斷完善用戶的體驗(yàn)路徑模式,因?yàn)樗鼤?huì)一直發(fā)展,將產(chǎn)品優(yōu)化的越來越好,而不僅僅是停留在:「這個(gè)產(chǎn)品我做完了」的想法上。

所以為什么說用戶體驗(yàn)是一種過程?因?yàn)樗冀K在不斷變化,所以作為設(shè)計(jì)師也要持續(xù)的自我增值,才能跟上產(chǎn)品迭代、時(shí)代發(fā)展的步伐。

用戶體驗(yàn)是一種過程,而不是結(jié)果

UI設(shè)計(jì)掌握的交互知識(shí)

博博


云和數(shù)據(jù)西安中心 2018-06-05 17:38:27

交互設(shè)計(jì)是什么?

交互設(shè)計(jì) Interaction Design 也被成為IXD。交互設(shè)計(jì)建立起了人與計(jì)算機(jī)便捷溝通的通道,它的目標(biāo)是創(chuàng)造可用性和用戶體驗(yàn)俱佳的產(chǎn)品。我們?cè)诠ぷ髦薪?jīng)常會(huì)對(duì)接交互設(shè)計(jì)師和產(chǎn)品經(jīng)理,他們具有豐富的交互知識(shí)和經(jīng)驗(yàn)。那是不是我們作為UI設(shè)計(jì)師,就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計(jì)了呢?當(dāng)然不是,在視覺設(shè)計(jì)層面更多地考慮布局和交互原則才可以讓我們的界面更友好,視覺設(shè)計(jì)師是交互設(shè)計(jì)中非常重要的角色。

用戶體驗(yàn)

在工作中經(jīng)常聽到UED(用戶體驗(yàn)設(shè)計(jì))和UCD(以用戶為中心的設(shè)計(jì)),可見互聯(lián)網(wǎng)行業(yè)非常重視用戶體驗(yàn),而用戶體驗(yàn)絕不僅僅是要樣子好看。有些設(shè)計(jì)師只關(guān)注視覺層面,認(rèn)為產(chǎn)品戰(zhàn)略等用戶體驗(yàn)維度和自己的設(shè)計(jì)無關(guān),那么就會(huì)和產(chǎn)品經(jīng)理等角色處于不同的世界了。“他們?yōu)槭裁匆疫@么改?”、“為什么這里文字要淺一點(diǎn)?”有時(shí)不理解對(duì)方的思考角度就會(huì)造成爭(zhēng)執(zhí)。用戶體驗(yàn)(User Experience)是用戶使用產(chǎn)品的心理和感受,用戶體驗(yàn)體現(xiàn)了產(chǎn)品設(shè)計(jì)以人為本的設(shè)計(jì)精神。其實(shí)早在互聯(lián)網(wǎng)出現(xiàn)之前就有“顧客先點(diǎn)雞就先有雞”、“顧客就是上帝”這種說法,并且西方很多大公司如施樂、聯(lián)合利華等大公司早在互聯(lián)網(wǎng)行業(yè)出現(xiàn)之前就已經(jīng)開始進(jìn)行研究用戶體驗(yàn)了,可見用戶體驗(yàn)對(duì)所有產(chǎn)品是多么的重要。但是讓人摸不著頭腦的是,用戶體驗(yàn)有時(shí)非常地主觀:因?yàn)橛脩趔w驗(yàn)背后影響用戶的因素有人的喜好、情感、印象、心理反應(yīng)等,有些人明明有摩拜卻要走很遠(yuǎn)找OFO,也有人只吃肯德基而不吃麥當(dāng)勞。這些選擇并不是優(yōu)勝劣汰,而是有背后的原因的。要想讓我們的產(chǎn)品被人喜歡,我們需要研究用戶。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

用戶研究七種方法

但用戶可能是幾百萬人呢!我們面對(duì)這樣抽象的群體然后告訴自己要以他們?yōu)橹行脑O(shè)計(jì)這多么抽象啊。這么多用戶甚至有時(shí)用戶自己的聲音也是矛盾的。我們到底怎么樣了解用戶的心聲呢? 

用戶畫像

根據(jù)產(chǎn)品的調(diào)性和用戶群體,用戶研究團(tuán)隊(duì)可以設(shè)計(jì)出一個(gè)用戶的模型,這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特征的標(biāo)簽組成的,通過這個(gè)標(biāo)簽我們可以更好地理解誰在使用我們的產(chǎn)品。用戶畫像建立后,每個(gè)功能可以完成自己的用戶故事:用戶在什么場(chǎng)景下需要這個(gè)功能。這樣,我們所設(shè)計(jì)的功能就會(huì)更接近用戶實(shí)際的需要。比如我們現(xiàn)在要設(shè)計(jì)一個(gè)女裝購物應(yīng)用,那么我們可以做這個(gè)用戶畫像:小美,在北京國貿(mào)CBD上班,21歲,收入8000,喜歡淘寶購物和電視購物。使用我們產(chǎn)品的目的是為了尋找正品時(shí)尚大牌服裝進(jìn)行網(wǎng)購。小美因?yàn)閯偖厴I(yè)所以一方面喜歡大牌一方面又資金短缺(啟發(fā):我們的產(chǎn)品是不是要解決這兩個(gè)痛點(diǎn)?)小美是時(shí)尚OL,審美很高,不喜歡俗氣的設(shè)計(jì)。(啟發(fā):界面設(shè)計(jì)是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色?)。看,即使小美并不真實(shí)存在,但是她指引了我們的產(chǎn)品設(shè)計(jì)。接下來,我們還可以給小美增加一個(gè)頭像,在做設(shè)計(jì)時(shí)我們想象這個(gè)人就是真實(shí)存在的用戶,她會(huì)對(duì)我們的設(shè)計(jì)有什么看法。當(dāng)我們完成用戶畫像之后,還可以接著設(shè)計(jì)用戶故事:小美經(jīng)常需要在工作場(chǎng)合穿符合工作氣質(zhì)的衣服,也需要在約會(huì)時(shí)有晚禮服之類的服裝,可是小美的收入有限,她眼光較高但是對(duì)價(jià)格過高的服裝無法承擔(dān),她使用我們的APP就是為了尋找正品且價(jià)格適中的服裝。那么,小美在哪里用我們的APP呢?這就要為小美繼續(xù)設(shè)計(jì)一個(gè)用戶使用場(chǎng)景了:小美在開會(huì)時(shí)可能會(huì)打開看看、在地鐵里也會(huì)瀏覽、在清晨打開衣柜時(shí)也會(huì)瀏覽。基本來說是碎片時(shí)間,而且是有著裝需求時(shí)。(啟發(fā):我們是不是需要把字號(hào)調(diào)大以適應(yīng)地鐵里顛簸的閱讀環(huán)境?我們是不是需要設(shè)計(jì)省流量模式免得剛剛畢業(yè)的小美花一筆巨大的流量資費(fèi)?)

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

用戶畫像

用戶訪談

邀約用戶來回答產(chǎn)品的相關(guān)問題,并記錄作出后續(xù)分析。用戶訪談?dòng)腥N形式:結(jié)構(gòu)式訪談(根據(jù)之前寫好的問題結(jié)構(gòu))、半結(jié)構(gòu)式訪談(一半根據(jù)問題一半討論)、開放式訪談(較為深入地和用戶交流,雙方都有主動(dòng)權(quán)來探討)。用戶訪談設(shè)置時(shí)要注意:用戶不可以是互聯(lián)網(wǎng)從業(yè)的專業(yè)人員、不可以提出誘導(dǎo)性問題、不要使用專業(yè)術(shù)語。用戶訪談適合產(chǎn)品開發(fā)的全部過程。

問卷調(diào)查

可分為紙質(zhì)調(diào)查問卷、網(wǎng)絡(luò)問卷調(diào)查。依據(jù)產(chǎn)品列出需要了解的問題,制成文檔讓用戶回答。問卷調(diào)查是一種成本比較低的用戶調(diào)查方法。問卷調(diào)查適合產(chǎn)品策劃初期對(duì)目標(biāo)人群的投放,另外注意一個(gè)問題最好收集10個(gè)問卷,也就是如果你有10個(gè)問題那么至少要收集100個(gè)問卷才是有效的。要知道不是所有人都愿意耐心地填寫問卷,很可能敷衍了事的回答會(huì)擾亂我們的判斷。

焦點(diǎn)小組

焦點(diǎn)小組一般有6-12人組成,由一名專業(yè)人士主持,依照訪談提綱引導(dǎo)小組成員各抒己見,并記錄分析。并且在焦點(diǎn)小組的房間里會(huì)有一扇單向玻璃窗,用戶是看不到里面有誰的。而在里面坐著的通常是開發(fā)團(tuán)隊(duì),他們可以清晰地看到用戶是如何吐槽他們的產(chǎn)品的,但是他們沒有權(quán)利直接和用戶進(jìn)行解釋。焦點(diǎn)小組需要特殊的房間和設(shè)備,主持人也需要訓(xùn)練有素,焦點(diǎn)小組特別能夠分析出用戶在沒有我們說明的情況下如何使用我們的產(chǎn)品和對(duì)產(chǎn)品的不滿。

可用性測(cè)試

通過篩選讓不同用戶群來對(duì)產(chǎn)品進(jìn)行操作,同時(shí)觀察人員在旁邊觀察并記錄,可用性測(cè)試的要求是用戶不可以是互聯(lián)網(wǎng)從業(yè)者而應(yīng)該是真實(shí)產(chǎn)品的用戶群體。但是可用性測(cè)試一般要有一個(gè)可用的軟件版本或者原型供人測(cè)試才可以,在軟件開發(fā)的前期不適合用這個(gè)方法。

眼動(dòng)測(cè)試

使用特殊的設(shè)備眼動(dòng)儀來追蹤用戶使用產(chǎn)品時(shí)眼睛聚焦在哪里,盲區(qū)是哪里。比如一個(gè)網(wǎng)站通過眼動(dòng)測(cè)試可以知道用戶的視覺會(huì)自動(dòng)屏蔽網(wǎng)站的常見廣告位置,這時(shí)如果希望提高廣告的點(diǎn)擊,就需要把廣告位放置于用戶聚焦時(shí)間較長的位置。眼動(dòng)測(cè)試的設(shè)備比較專業(yè),通常在小公司較難開展。

用戶反饋和大數(shù)據(jù)分析

根據(jù)市場(chǎng)提供的反饋和數(shù)據(jù)得出客觀的判斷和合理的推測(cè)。用戶反饋也是用戶研究的一個(gè)重點(diǎn),用戶反饋主要是用戶通過產(chǎn)品的反饋入口主動(dòng)向開發(fā)者提出的意見。

有了這些方法,我們就能更好地了解用戶和接近用戶了。但是要注意,用戶研究也是有陷阱的。比如:填寫問卷和參與調(diào)研的用戶可能并不是核心用戶;提交用戶反饋的用戶之外可能有更多沉默的用戶等。總之用戶研究是一個(gè)必要的手段,但是仍然需要產(chǎn)品團(tuán)隊(duì)來對(duì)產(chǎn)品的方向做出決斷。

用戶如何使用產(chǎn)品

使用場(chǎng)景

剛才我們介紹了用戶使用的場(chǎng)景是根據(jù)產(chǎn)品的功能和平臺(tái)決定的。電腦的使用場(chǎng)景是正襟危坐,手持鼠標(biāo)。而移動(dòng)端則是隨時(shí)隨地使用,我們的用戶可能在地鐵里、在廁所里、在吃飯時(shí)、在上課中怕老師看到把手機(jī)藏在桌洞里、在工作中領(lǐng)導(dǎo)巡視后偷偷瞄、在輾轉(zhuǎn)反側(cè)睡不著的時(shí)候沒有開燈地瀏覽等。這時(shí)我們要為用戶考慮,如果他們?cè)谑褂梦覀儺a(chǎn)品的各種場(chǎng)景中有什么需要,是不是需要省流量、是不是需要調(diào)整字號(hào)、是不是需要過濾藍(lán)光、是不是需要護(hù)眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界面目前單手不太友好、是不是掃二維碼時(shí)需要個(gè)手電功能、是不是需要語音提醒、是不是需要清除訪問記錄。一個(gè)不考慮用戶使用場(chǎng)景的產(chǎn)品一定是會(huì)遭到吐槽的。很久之前我聽同事在吃飯時(shí)抱怨過“大爺?shù)模膊桓銈€(gè)提示,早晨在地鐵里用4G看流量以為是在家用WIFI,結(jié)果看了一集《甄嬛傳》花了80塊錢”、“哎?你是不是早晨開會(huì)時(shí)玩游戲了?你的比分都給我們推送了哈哈哈”。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

我的產(chǎn)品中的用戶使用場(chǎng)景表格

操作手勢(shì)

網(wǎng)頁設(shè)計(jì)所處的電腦端目前主要還是依靠鼠標(biāo)點(diǎn)擊來操作。鼠標(biāo)點(diǎn)擊的最小單位甚至可以是一像素。而移動(dòng)端不太一樣,移動(dòng)端設(shè)備中我們使用手指來操作界面。一般來說,手指點(diǎn)觸區(qū)域最小尺寸為7×7 mm,拇指最小尺寸為9×9 mm。也就是在我們@2x設(shè)計(jì)中為88px(或44pt)。這個(gè)神奇地88PX在移動(dòng)端應(yīng)用很廣泛:很多表單單項(xiàng)的高度是88ox、導(dǎo)航欄高度也是88px等等。那您可能會(huì)說,也不對(duì)吧,有些界面上的圖標(biāo)看上去沒有88px啊。是的,但是那只是視覺,我們可以通過增加圖標(biāo)點(diǎn)擊區(qū)域的方式(比如給60像素大小的圖標(biāo)左右增加22像素的透明區(qū)域)來讓圖標(biāo)更好點(diǎn)擊。千萬在設(shè)計(jì)時(shí)不要把操作區(qū)域放得特別近,可以把所有點(diǎn)擊區(qū)域用88px標(biāo)記看是否有重疊的情況,避免點(diǎn)擊一個(gè)圖標(biāo)時(shí)誤點(diǎn)另一個(gè)圖標(biāo)。除了點(diǎn)擊區(qū)域,移動(dòng)端還可以利用各種手勢(shì)來進(jìn)行各種操作的設(shè)計(jì)。主要的手勢(shì)有:

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

單點(diǎn)觸碰(Tap):點(diǎn)擊用來選擇一個(gè)元素,類似鼠標(biāo)的左鍵,是最常用的手勢(shì)。

拖曳(Drag):點(diǎn)擊某個(gè)元素然后拖拽進(jìn)行移動(dòng),類似現(xiàn)實(shí)生活中移動(dòng)物體的感覺。

快速拖曳(Flick)速度很快的拖曳操作。

滑動(dòng)(Swipe):水平或垂直方向的滑動(dòng),比如翻閱相冊(cè)和電子書翻閱的手勢(shì)。

雙擊(Double-Click):快速點(diǎn)擊一個(gè)物體,通常會(huì)在放大、縮小操作中使用。

捏(Pinch):兩根手指頭向內(nèi)捏,捏的動(dòng)作會(huì)使物體變得更小,通常在縮小操作中使用。網(wǎng)易新聞客戶端中正文頁面即可通過捏的動(dòng)作來縮小字號(hào)。

伸展(Stretch):兩根手指向外推,現(xiàn)實(shí)中這種操作會(huì)使物體向外拉伸,元素可能會(huì)變得更大,通常會(huì)在放大操作中使用。網(wǎng)易新聞客戶端中正文頁面可以通過伸展放大字號(hào)。

長按(Touch and hold):手指點(diǎn)擊并按住會(huì)激發(fā)另一個(gè)操作。比如朋友圈的相機(jī)圖標(biāo)長按可只發(fā)文字。但是注意,長按不是一個(gè)常態(tài)操作,所以一般不太建議用戶進(jìn)行該操作。但長按操作又是有需要的,所以會(huì)把刪除、只發(fā)文字狀態(tài)等操作隱藏其中。

除了用戶使用場(chǎng)景、點(diǎn)擊區(qū)域、手勢(shì),那么還有一個(gè)影響我們?cè)O(shè)計(jì)的使用情況,就是用戶怎么拿手機(jī)很重要。用戶可以:?jiǎn)问帜檬謾C(jī)、雙手拿手機(jī)、直向拿手機(jī)、橫向拿手機(jī)。我們需要考慮這些可能發(fā)生的特征進(jìn)行手勢(shì)互動(dòng)的規(guī)劃與設(shè)計(jì)。比如OFO為了讓單手(說不定是左手還是右手)操作方便,主要按鈕在下方并且做的很大,左右手都可以輕松點(diǎn)擊。而微信的很多按鈕也都是大長條,方便左右手的觸發(fā)。橫屏使用場(chǎng)景一般是游戲、視頻等,所以一般的APP并不支持橫屏操作(微信、支付寶、微博均不支持橫屏操作),

格式塔:我們?nèi)绾握J(rèn)知?

我們發(fā)現(xiàn)有些用戶在使用設(shè)計(jì)好的界面時(shí)找不到一些重要的功能按鈕。“奇怪,分享功能不就在更多按鈕里面嗎?”、“用戶怎么連這個(gè)也找不到啊”你也許會(huì)說。我們要來了解一下用戶是如何認(rèn)知我們?cè)O(shè)計(jì)好的界面的。在初高中考試的時(shí)候您一定見過完形填空這種格式吧,“格式塔”源自德語“Gestalt”,意即“整體”、“完形”的意思。格式塔心理學(xué)認(rèn)為,我們?cè)谟^察的時(shí)候會(huì)自動(dòng)腦補(bǔ)出一些邏輯和含義來,會(huì)讓觀察對(duì)象變成一個(gè)完整的、整體的、常見的形狀。

"研表究明,漢字的序順并不定一能影閱響讀,比如當(dāng)你完看這句話后之,才發(fā)這現(xiàn)里的字全是都亂的。"研究格式塔心理學(xué)對(duì)我們做互聯(lián)網(wǎng)產(chǎn)品和設(shè)計(jì)有什么用呢?掌握格式塔的理論我們就可以讓用戶按照我們安排的“劇本”來交互和操作界面了。我們可以讓用戶比較容易地根據(jù)固定位置找到提交按鈕、我們也可以讓用戶不經(jīng)過太多思考在殺毒軟件中點(diǎn)擊殺毒按鈕等。格式塔心理學(xué)對(duì)于我們做好表現(xiàn)層是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個(gè)知識(shí)點(diǎn)。

接近律 law of proximity

格式塔心理學(xué)認(rèn)為,人們認(rèn)知事物的時(shí)候,會(huì)依靠它們的距離來判斷它們之間的關(guān)系。兩個(gè)元素越近就說明它們之間關(guān)系更強(qiáng)。但是接近也是有對(duì)比的,在復(fù)雜的設(shè)計(jì)中,我們要一邊考慮它們之間內(nèi)部的邏輯關(guān)系一邊來排版。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

A組和B組因?yàn)榻咏啥a(chǎn)生不同地閱讀順序

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

距離更近的信息暗示了他們有內(nèi)在的邏輯關(guān)系

相似律law of similarity

認(rèn)知事物時(shí),刺激要素(比如大小、色彩、形狀等要素)相似的元素我們傾向于把它們聯(lián)合在一起或者認(rèn)為它們是一個(gè)種類。比如,我們能輕易的分辨出撥號(hào)頁面中撥號(hào)鍵和按鍵群的區(qū)別。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

相似的元素暗示了他們屬于一個(gè)種類

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

類似外形的單元會(huì)被我們?nèi)四X默認(rèn)為同一屬類

閉合律law of closure

就算沒有外形的約束,我們也會(huì)自動(dòng)把圖形腦補(bǔ)完全。比如半個(gè)形狀或者有缺口的形狀我們不會(huì)認(rèn)為是一條線,而是一個(gè)完整的形狀。閉合是指一種完形的認(rèn)知規(guī)律。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

左邊的圖中我們會(huì)認(rèn)為是圓形有缺口而不是一條曲線

右邊的圖形中我們會(huì)認(rèn)為是圓形被三條線截?cái)嗔硕皇撬膫€(gè)圖形

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

界面設(shè)計(jì)中露出一半內(nèi)容,閉合律讓我們感知右邊還隱藏著更多內(nèi)容

連續(xù)律law of continuity

在知覺過程中人們往往傾向于使知覺對(duì)象的直線繼續(xù)成為直線,使曲線繼續(xù)成為曲線,也就是視覺的慣性。利用連續(xù)律我們可以讓用戶操作界面時(shí)不經(jīng)過思考就點(diǎn)擊一個(gè)固定的位置。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

深諳連續(xù)律的流氓軟件

成員特性律law of membership character

如果我們有很多同樣的按鈕,如何讓某個(gè)更重要的按鈕突出但是仍然讓用戶感知還是按鈕呢?那就要用到成員特性律了。成員特性律賦予了集體中某一個(gè)元素特殊的一些刺激元素從而突出它。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

獨(dú)特的外形暗示了它與別的元素有不同的功能

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

撥號(hào)頁面中撥號(hào)鍵與微博發(fā)布微博圖標(biāo)都與其他按鈕不同

記憶律:我們?nèi)绾斡洃洠?/span>

接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔心理學(xué)家沃爾夫?qū)z忘問題所作的經(jīng)典性研究得出了格式塔的三大記憶律。沃爾夫?qū)嶒?yàn)時(shí)要求實(shí)驗(yàn)體觀看樣本圖形并記住它們,然后在不同的時(shí)間里根據(jù)記憶把它們畫出來。結(jié)果發(fā)現(xiàn)實(shí)驗(yàn)體在不同的間隔時(shí)間畫出來的圖像都有不同。有時(shí)再現(xiàn)的圖畫比原來的圖畫更簡(jiǎn)單更有規(guī)則,有時(shí)原來圖畫中顯著的細(xì)節(jié)在再現(xiàn)時(shí)被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。沃爾夫把這三種記憶規(guī)律稱之為格式塔三大記憶律:“水平化”、“尖銳化”、“常態(tài)化”。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

哪個(gè)圖形才是正確的?(圖片來源:網(wǎng)絡(luò))

水平化leveling

水平化是指在記憶中我們趨向于減少知覺圖形小的不規(guī)則部分使其對(duì)稱;或趨向于減少知覺圖形中的具體細(xì)節(jié)。

尖銳化sharpening

尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中,人們往往強(qiáng)調(diào)知覺圖形的某些特征而忽視其它具體細(xì)節(jié)的過程。在有些心理學(xué)家看來,人類記憶的特征之一,就是客體中最明顯的特征在再現(xiàn)過程中往往被夸大了。

常態(tài)化normalizing

常態(tài)化是指人們?cè)谟洃浿校鶕?jù)自己已有的記憶痕跡對(duì)知覺圖形加以修改,即一般會(huì)趨向于按照自己認(rèn)為它似乎應(yīng)該是什么樣子來加以修改的。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

情感化設(shè)計(jì)是什么?

了解格式塔會(huì)讓我們把界面做得符合用戶的心理預(yù)期,讓用戶能夠明顯地找到他應(yīng)該找到的操作。可是用戶好像還是不開心,因?yàn)橛脩粲X得界面不好看。您是不是也會(huì)陷入這樣的矛盾:可用性重要還是美感更重要?怎么樣能夠讓我們?cè)O(shè)計(jì)的界面又好用還漂亮呢?情感化設(shè)計(jì)由唐納德·A·諾曼博士提出,指的是設(shè)計(jì)中情感在所處于的重要地位以及如何讓用戶把情感投射在產(chǎn)品上來解決可用性與美感的矛盾。情感化設(shè)計(jì)是在抓住用戶注意、誘發(fā)情緒反應(yīng)以提高執(zhí)行行為的可能性的設(shè)計(jì)。比如紅色且巨大的購買按鈕能夠無意識(shí)地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網(wǎng)絡(luò)不好時(shí)的焦慮等等。情感化設(shè)計(jì)有三個(gè)水平,它們是遞進(jìn)關(guān)系,分別是:本能水平(重視設(shè)計(jì)外形)、行為水平設(shè)計(jì)(重視使用的樂趣和效率)、反思水平設(shè)計(jì)(重視自我形象、個(gè)人滿意、記憶)。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

本能水平

我們都是視覺動(dòng)物,對(duì)外形的觀察和理解是出于我們本能的。本能水平的設(shè)計(jì)就是刺激用戶的感官體驗(yàn),讓別人注意到我們的設(shè)計(jì)。這個(gè)階段的設(shè)計(jì)會(huì)更加關(guān)注外形的視覺效果。比如各大電商網(wǎng)站的專題頁面設(shè)計(jì),更加注重抓眼球和外觀的刺激。

行為水平

行為水平是功能性產(chǎn)品需要注重的。一個(gè)產(chǎn)品是否達(dá)到了行為水平,要看它是否能有效地完成任務(wù),是否是一種有樂趣的操作體驗(yàn)。優(yōu)秀行為水平設(shè)計(jì)的四個(gè)方面:功能,易懂性,可用性和物理感覺。比如好用的記事本APP等。

反思水平

反思水平的設(shè)計(jì)與用戶長期感受有關(guān),這種水平的設(shè)計(jì)建立了品牌感和用戶的情感投射。反思水平設(shè)計(jì)是產(chǎn)品和用戶之間情感的紐帶,通過互動(dòng)給用戶自我形象、滿意度、記憶等體驗(yàn),讓用戶形成對(duì)品牌的認(rèn)知,培養(yǎng)對(duì)品牌的忠誠度。馬洛斯理論把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求五個(gè)層次。我認(rèn)為反思水平的設(shè)計(jì)就是提供給用戶歸屬感、尊重、自我實(shí)現(xiàn)。比如Google每逢節(jié)日就會(huì)有一些符合節(jié)日化的設(shè)計(jì)、網(wǎng)易嚴(yán)選的空狀態(tài)也會(huì)有品牌感的體現(xiàn)等。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

淘寶空狀態(tài)中的情感化設(shè)計(jì)

情感化設(shè)計(jì)的表達(dá)

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

畫面 畫面是情感化設(shè)計(jì)的重點(diǎn),讓錯(cuò)誤頁面或者空狀態(tài)都成為一幅可愛的插畫。

應(yīng)景 讓用戶在我們的產(chǎn)品中體驗(yàn)到一些和真實(shí)世界一樣的氛圍變化。

游戲感 沒有人喜歡做任務(wù)。試著讓用戶完成的任務(wù)變成游戲吧。比如每次登陸加金幣,有足夠的金幣就可以獲得什么稱號(hào)。

沖突 沖突非常能夠勾起人的情緒,營造一個(gè)競(jìng)爭(zhēng)或者對(duì)抗的氛圍,讓用戶感覺自己置身在一個(gè)比賽或者格斗中一樣。

講故事 給產(chǎn)品和無聊的圖像一些故事內(nèi)容,畢竟沒有人討厭講故事。

隱喻 用一些大家理解,隨處可見的事物表達(dá)一些無趣、生澀的概念。

互動(dòng) 給用戶和其他用戶多制造互動(dòng)機(jī)會(huì),比如排行榜、推薦等,不要讓用戶感覺孤獨(dú)。

交互八原則

當(dāng)我們了解了產(chǎn)品五要素(產(chǎn)品設(shè)計(jì)的維度問題)、格式塔心理學(xué)(用戶如何認(rèn)知的問題)、情感化設(shè)計(jì)(如何讓用戶滿意的問題)后,我還要給您介紹一大堆地交互原則。這些交互原則會(huì)幫助我們?cè)O(shè)計(jì)出更好用的界面,當(dāng)然也可以幫助我們講出這樣設(shè)計(jì)的原因。不拿出一些理論怎么能夠讓別人信服你的設(shè)計(jì),對(duì)不對(duì)?

費(fèi)茨定律(Fitts’Law)

費(fèi)茨定律指的是:光標(biāo)到達(dá)一個(gè)目標(biāo)的時(shí)間,與當(dāng)前光標(biāo)所在的位置和目標(biāo)位置的距離(D)和目標(biāo)大小(S)有關(guān)。它的數(shù)學(xué)公式是:時(shí)間 T = a + b log2(D/S+1)。這個(gè)定律是由保羅.菲茨博士(Paul M. Fitts)提出的所以得名。菲茨定律在很多領(lǐng)域都得到了應(yīng)用,特別是在互聯(lián)網(wǎng)設(shè)計(jì)中尤為深遠(yuǎn)。我們利用費(fèi)茨定律估算用戶移動(dòng)光標(biāo)到鏈接或者按鈕所需的時(shí)間,時(shí)間越短越。比如有一個(gè)按鈕在左下角,我們的操作可以細(xì)分為兩個(gè)階段:第一個(gè)階段大范圍移動(dòng)到左下方向,然后再做微調(diào)到達(dá)這個(gè)按鈕之上。所以這個(gè)時(shí)間受按鈕和鏈接所在位置與按鈕和鏈接大小影響,也就是說我們?cè)谧鲈O(shè)計(jì)時(shí)要考慮光標(biāo)默認(rèn)會(huì)放在哪里、我們的鏈接按鈕是不是太小了。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

費(fèi)茨定律說明距離越短、目標(biāo)大小越大,那么光標(biāo)到達(dá)目標(biāo)越快

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

費(fèi)茨定律在網(wǎng)頁設(shè)計(jì)中的使用

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

OFO和蘋果音樂APP都將按鈕放置手指最容易點(diǎn)擊的區(qū)域并且按鈕足夠大

希克定律(Hick’s Law)

希克定律是指一個(gè)人面臨的選擇(n)越多,所需要作出決定的時(shí)間(T)就越長。它的數(shù)學(xué)公式是:反應(yīng)時(shí)間 T=a+b log2(n)。在我們的設(shè)計(jì)中如果給用戶的選擇更多,那么用戶所需要做出決定的時(shí)間就越長。比如我們給出用戶菜單-子菜單-選項(xiàng),那么用戶可能會(huì)很糾結(jié);如果我們簡(jiǎn)化成菜單-選項(xiàng),就會(huì)減少用戶做選擇的時(shí)間。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

用戶反應(yīng)時(shí)間和選擇數(shù)量的關(guān)系

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

我們應(yīng)該減少用戶的選擇

7±2法則

讓我們先玩?zhèn)€游戲,請(qǐng)記憶下面的文字,一分鐘后移開視線:

掙 多 久 可 貓 風(fēng) 師 裊 崩 六 酒 望

現(xiàn)在閉上眼睛想一下剛才的文字您能回憶幾個(gè)?大概是五個(gè)到九個(gè)之間。1956年美國科學(xué)家米勒對(duì)人類短時(shí)記憶能力進(jìn)行了研究,他注意到年輕人的記憶廣度大約為5到9個(gè)單位之間,就是7±2法則。這個(gè)法則對(duì)我們做界面設(shè)計(jì)的啟迪就是如果希望用戶記住導(dǎo)航區(qū)域的內(nèi)容或者一個(gè)路徑的順序,那么數(shù)量應(yīng)該控制在七個(gè)左右,比如蘋果和站酷網(wǎng)站的導(dǎo)航個(gè)數(shù)。另外,移動(dòng)端底部Tab區(qū)域最多也是五個(gè),而頁面中的八大金剛圖標(biāo)也是八個(gè)。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

蘋果、站酷、Dribbble等網(wǎng)站導(dǎo)航數(shù)量全部是7±2

泰思勒定律(Tesler’s Law)

這個(gè)定律是說產(chǎn)品固有的復(fù)雜性存在一個(gè)臨界點(diǎn),超過了這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了。我們只能將這種復(fù)雜性轉(zhuǎn)移。比如我們?nèi)绻l(fā)現(xiàn)頁面的功能是必須的,但當(dāng)前的頁面信息過載,那么就需要將次要的功能收起或者轉(zhuǎn)移。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

Dribbble網(wǎng)站導(dǎo)航將更多功能收起在一個(gè)表示更多的圖標(biāo)內(nèi)

防錯(cuò)原則

一個(gè)表單是需要填寫完畢后方可提交的。但是用戶有時(shí)會(huì)漏填或者忘記填寫,這是用戶點(diǎn)擊提交會(huì)怎么樣?很可能有些選項(xiàng)會(huì)被清空(比如密碼選項(xiàng)基于安全考慮會(huì)清空cookies)那么用戶還得重新填寫。這時(shí)解決辦法是在用戶沒填寫完之前把按鈕設(shè)置一個(gè)看起來不能點(diǎn)擊的樣式,用戶想提交時(shí)彈窗:您還有內(nèi)容沒有填寫完哦,然后把用戶定位在沒填寫完的項(xiàng)目,讓那個(gè)表單高亮。(是不是真的做到以用戶為中心啦?)再比如推特只允許用戶填寫140個(gè)字,但用戶一寫爽了往往會(huì)超出140個(gè)字那怎么辦?解決辦法是給他在旁邊倒數(shù)還能寫幾個(gè)字。看,這些都是我們?yōu)榱朔乐褂脩舨僮鞒霈F(xiàn)錯(cuò)誤所做的努力,防錯(cuò)設(shè)計(jì)就是要減少錯(cuò)誤操作所帶來的災(zāi)難。錯(cuò)誤的提示當(dāng)然需要設(shè)計(jì)師的設(shè)計(jì)了。可是也許您不知道有些錯(cuò)誤提示含糊,用戶并不知道到底錯(cuò)的是哪里,下一步該怎么辦。比如僅僅登錄功能就可能會(huì)有用戶名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、連續(xù)三次輸入密碼錯(cuò)誤、用戶名為空等不同的錯(cuò)誤,而有些產(chǎn)品僅僅給出“出錯(cuò)了”,那么用戶當(dāng)然會(huì)不知所措了。正向的例子比如一次我在登錄Google Mail時(shí)輸錯(cuò)了密碼,它提示“密碼輸入錯(cuò)誤,提示:您在1個(gè)月前改過密碼”。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

BOO!APP輸入密碼時(shí)卡通會(huì)蒙住眼睛,輸錯(cuò)時(shí)也會(huì)有提示

奧卡姆的剃刀法則(Occam’s Razor)

奧卡姆的剃須刀法則主要就是說我們做產(chǎn)品時(shí)功能上不可以太繁瑣,應(yīng)該保證簡(jiǎn)潔和工具化。比如產(chǎn)品中為用戶提供了收藏功能是否就不需要喜歡了?提供了喜歡是否不需要點(diǎn)贊了?一定保證功能上的克制。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

QQ將更多功能收起到了頭像和加號(hào)圖標(biāo)中

防呆原則

有一個(gè)著名的交互書籍叫作《Dont make me think》,翻譯過來就是不要讓我思考。這句話一直在我做設(shè)計(jì)時(shí)響起:不要認(rèn)為用戶是專家!不要認(rèn)為用戶是專家!有時(shí)我們會(huì)覺得,點(diǎn)擊漢堡包圖標(biāo)當(dāng)然就是菜單啊!這個(gè)按鈕長按不就會(huì)調(diào)出XX功能了嘛。但是我們忘記了普通用戶可能并不理解什么是漢堡包圖標(biāo)、什么是抽屜式導(dǎo)航、什么是長按、雙指滑動(dòng)。更何況普通用戶并不會(huì)研究我們的APP,在他們眼中我們的產(chǎn)品只是眾多工具中的一個(gè),我們何德何能認(rèn)為自己的產(chǎn)品是值得用戶花時(shí)間學(xué)習(xí)的?一定要把交互和設(shè)計(jì)做得簡(jiǎn)單,并且讓用戶在別的地方“學(xué)習(xí)”過。每個(gè)頁面強(qiáng)調(diào)一個(gè)重要的功能而不要讓用戶做選擇題。這些都是有效防呆的好方法。防呆和不要讓我思考都講的是我們的設(shè)計(jì)要自然而然。

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

運(yùn)動(dòng)APP KEEP 的頁面中總有一個(gè)按鈕是突出的

防止不耐煩原則

用戶是很容易不耐煩的,你還記得你多少次看著視頻加載條罵人嗎?如果我們需要用戶等待載入信息,一定要給一個(gè)有情感化的設(shè)計(jì)提示,避免用戶產(chǎn)生焦慮。 比如很多游戲(比如決戰(zhàn)平安京、王者榮耀等)加載時(shí)都會(huì)出現(xiàn)主角跑步的小動(dòng)畫,美團(tuán)等APP下拉刷新時(shí)也會(huì)有幾幀的動(dòng)畫來安慰用戶。動(dòng)畫要好于蘋果默認(rèn)提供給開發(fā)的“轉(zhuǎn)菊花”,因?yàn)榭ㄍㄐ蜗蟾杏H和力。但是好像還不夠,用戶需要掌控感,“哎?它一直加載,是不是死機(jī)了?”為了防止用戶沒有掌控感,我們可以為用戶設(shè)計(jì)加載條或者加載提示。加載狀態(tài)條很遺憾很多都是假的甚至是重復(fù)的,原因是其實(shí)要判斷加載了多少M(fèi)的素材的代碼更占資源!我們本來想安慰用戶等待加載的時(shí)間竟然會(huì)變得更長,那當(dāng)然不行啦。于是很多時(shí)候我們會(huì)做一個(gè)假的加載狀態(tài)條來安撫用戶,我想您一定看過反復(fù)加載的加載條吧!加載條下的文案其實(shí)也是可以變得非常有情感化設(shè)計(jì)感受的,比如通常是:加載場(chǎng)景資源、加載素材這樣的文案,但是有些APP需要很長加載時(shí)間時(shí)會(huì)給出這樣的文案:導(dǎo)演正在準(zhǔn)備、女主角準(zhǔn)備化妝了、攝像師打開了燈光。是不是更加好玩啦?

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

美團(tuán)和網(wǎng)易嚴(yán)選的加載動(dòng)畫

總結(jié)

交互知識(shí)其實(shí)關(guān)鍵還要在應(yīng)用和分析。一方面,我們可以在工作中積累經(jīng)驗(yàn),不斷地思考如何和同事配合一起研究提高產(chǎn)品在使用時(shí)的體驗(yàn);另一方面,我們也要經(jīng)常積累一些產(chǎn)品使用時(shí)發(fā)現(xiàn)的交互。建議大家平時(shí)可以收集你覺得不錯(cuò)的情感化設(shè)計(jì)或者微交互,比如發(fā)現(xiàn)餓了么在下雨天送貨時(shí)會(huì)有電閃雷鳴和雨滴的設(shè)計(jì);OFO和滴滴打車在不同節(jié)日也會(huì)把地圖找車?yán)锏膱D標(biāo)換成節(jié)日相關(guān)的圖標(biāo);BOO!APP在輸入密碼時(shí)小怪獸會(huì)捂住眼睛;WPS在晚上寫作時(shí)(沒錯(cuò)就是現(xiàn)在)會(huì)提示你開啟過濾藍(lán)光的護(hù)眼模式等等。一個(gè)好的設(shè)計(jì)師一定是懂得交互的設(shè)計(jì)師,也應(yīng)該是非常細(xì)心的設(shè)計(jì)師,也應(yīng)該是懂得為用戶著想的設(shè)計(jì)師。

微信贊賞淺析

博博


人人都是產(chǎn)品經(jīng)理 2018-06-06 18:13:32

今天上午,微信對(duì)于贊賞功能進(jìn)行了升級(jí)和宣傳,他的贊賞對(duì)象由公眾號(hào)變?yōu)榱俗髡摺S捎诖罅抗娞?hào)的用戶活躍度長時(shí)間處于衰退期,此次“贊賞”功能升級(jí)最終目的無非是想敲醒沉睡內(nèi)容生產(chǎn)者。本文主要從它贊賞功能的升級(jí)來談?wù)勎⑿殴娞?hào)。

從“贊賞”功能升級(jí)淺析:微信公眾號(hào)如何挽留內(nèi)容生產(chǎn)者?

6月6日上午微信對(duì)“贊賞”功能升級(jí)進(jìn)行宣傳,其最大的變化是從贊賞對(duì)象由公眾號(hào)變更為作者,今后免費(fèi)轉(zhuǎn)載也有可能獲得贊賞收益。同時(shí)支持恢復(fù)iOS端打賞,其打賞金額直接到贊賞者微信賬戶期間不收手續(xù)費(fèi)。仿佛在吶喊“創(chuàng)作者們快回來吧”

根據(jù)企鵝智庫《2017自媒體趨勢(shì)報(bào)告》中數(shù)據(jù)顯示顯示:自媒體每日新增信息越來越多,加上用戶碎片化信息消費(fèi)方式,使閱讀具有較大的隨機(jī)性而缺乏粘性,不僅很多已關(guān)注的公眾號(hào)信息不一定會(huì)打開閱讀,打開閱讀的概率以及完整讀完一篇文章概率都依次遞減…..

現(xiàn)在來看看目前的整個(gè)微信公眾號(hào)主線流程:

一、核心業(yè)務(wù)

從“贊賞”功能升級(jí)淺析:微信公眾號(hào)如何挽留內(nèi)容生產(chǎn)者?

藍(lán)色部分是整個(gè)微信公眾平臺(tái)核心的發(fā)動(dòng)機(jī),由內(nèi)容生產(chǎn)者輸出內(nèi)容通過微信公眾號(hào)作為媒介傳遞給用戶,用戶反過來以留言點(diǎn)贊打賞來反饋給作者,促進(jìn)整個(gè)微信公眾號(hào)體系正常運(yùn)轉(zhuǎn)。

從本次贊賞升級(jí)上看,無非是給閉環(huán)的最后一到流程增加多了一環(huán)“打賞”,這是對(duì)原創(chuàng)作者最大的鼓勵(lì),值得一提的是今后免費(fèi)轉(zhuǎn)載也有可能獲得贊賞收益,支持和激勵(lì)原創(chuàng)作者。

下面看看公眾號(hào)另外2個(gè)核心業(yè)務(wù)。

二、運(yùn)營加速器 1 號(hào)

從“贊賞”功能升級(jí)淺析:微信公眾號(hào)如何挽留內(nèi)容生產(chǎn)者?

內(nèi)容生產(chǎn)者的優(yōu)質(zhì)內(nèi)容由公眾號(hào)信息流進(jìn)行分發(fā),可從而獲得了打賞收入,且符合一定的資格可開通流量主獲得額外的廣告收入,一定程度上也了激發(fā)和鼓勵(lì)作者提供持續(xù)優(yōu)質(zhì)內(nèi)容輸出。

同時(shí)微信公眾號(hào)提供原創(chuàng)保護(hù)機(jī)制及轉(zhuǎn)載和白名單操作,訂閱號(hào)app的上線也為作者提供更便捷的操作及互動(dòng),促進(jìn)整個(gè)內(nèi)容生態(tài)高速運(yùn)轉(zhuǎn)。

三、運(yùn)營加速器 2 號(hào)

從“贊賞”功能升級(jí)淺析:微信公眾號(hào)如何挽留內(nèi)容生產(chǎn)者?

根據(jù)用戶使用場(chǎng)景,不斷優(yōu)化給用戶更良好的體驗(yàn)去瀏覽查看,增加用戶黏性和激發(fā)活躍度,期間不斷收集意見反饋,促進(jìn)整個(gè)內(nèi)容生態(tài)高速運(yùn)轉(zhuǎn)。

四、猜測(cè)后續(xù)變化及趨勢(shì)

  1. 繼續(xù)豐富訂閱號(hào)app功能,本次贊賞賬戶的各種操作,應(yīng)該很快會(huì)在訂閱號(hào)app里發(fā)布上線,此外編輯和發(fā)布可以使用視頻目前訂閱號(hào)app也不支持,想必在短視頻上繼續(xù)發(fā)力,該功能少不了。
  2. 豐富內(nèi)容生態(tài),在原有的“公眾號(hào)消息列表”、“看一看”、“搜一搜”、“群聊及朋友圈”后繼續(xù)擴(kuò)大公眾號(hào)文章出口。
  3. 從爭(zhēng)奪用戶數(shù)量到爭(zhēng)奪用戶時(shí)間,作者的收入不僅僅只有打賞和廣告點(diǎn)擊,可能后續(xù)納入付費(fèi)閱讀,最大化協(xié)助內(nèi)容創(chuàng)作者持續(xù)生產(chǎn)高質(zhì)內(nèi)容。
  4. 僅僅按公眾號(hào)首字母排序遠(yuǎn)遠(yuǎn)不夠,優(yōu)化公眾號(hào)列表分組管理,至于由用戶手動(dòng)分類還是由微信公眾號(hào)進(jìn)行分類在此不展開陳述。
  5. 公眾號(hào)和小程序持續(xù)發(fā)酵流量互補(bǔ)。

設(shè)計(jì)師必須掌握的交互知識(shí)

濤濤

交互設(shè)計(jì)是什么?
交互設(shè)計(jì) Interaction Design 也被成為IXD。交互設(shè)計(jì)建立起了人與計(jì)算機(jī)便捷溝通的通道,它的目標(biāo)是創(chuàng)造可用性和用戶體驗(yàn)俱佳的產(chǎn)品。作為UI設(shè)計(jì)師,我們?cè)诠ぷ髦薪?jīng)常會(huì)對(duì)接交互設(shè)計(jì)師和產(chǎn)品經(jīng)理,他們具有豐富的交互知識(shí)和經(jīng)驗(yàn)。那是不是我們作為UI設(shè)計(jì)師,就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計(jì)了呢?當(dāng)然不是,在視覺設(shè)計(jì)層面更多地考慮布局和交互原則才可以讓我們的界面更友好,視覺設(shè)計(jì)師是交互設(shè)計(jì)中非常重要的角色。
用戶體驗(yàn)
在工作中經(jīng)常聽到UED(用戶體驗(yàn)設(shè)計(jì))和UCD(以用戶為中心的設(shè)計(jì)),可見互聯(lián)網(wǎng)行業(yè)非常重視用戶體驗(yàn),而用戶體驗(yàn)絕不僅僅是要樣子好看。有些設(shè)計(jì)師只關(guān)注視覺層面,認(rèn)為產(chǎn)品戰(zhàn)略等用戶體驗(yàn)維度和自己的設(shè)計(jì)無關(guān),那么就會(huì)和產(chǎn)品經(jīng)理等角色處于不同的世界了。“他們?yōu)槭裁匆疫@么改?”、“為什么這里文字要淺一點(diǎn)?”有時(shí)不理解對(duì)方的思考角度就會(huì)造成爭(zhēng)執(zhí)。用戶體驗(yàn)(User Experience)是用戶使用產(chǎn)品的心理和感受,用戶體驗(yàn)體現(xiàn)了產(chǎn)品設(shè)計(jì)以人為本的設(shè)計(jì)精神。其實(shí)早在互聯(lián)網(wǎng)出現(xiàn)之前就有“顧客先點(diǎn)雞就先有雞”、“顧客就是上帝”這種說法,并且西方很多大公司如施樂、聯(lián)合利華等大公司早在互聯(lián)網(wǎng)行業(yè)出現(xiàn)之前就已經(jīng)開始進(jìn)行研究用戶體驗(yàn)了,可見用戶體驗(yàn)對(duì)所有產(chǎn)品是多么的重要。但是讓人摸不著頭腦的是,用戶體驗(yàn)有時(shí)非常地主觀:因?yàn)橛脩趔w驗(yàn)背后影響用戶的因素有人的喜好、情感、印象、心理反應(yīng)等,有些人明明有摩拜卻要走很遠(yuǎn)找OFO,也有人只吃肯德基而不吃麥當(dāng)勞。這些選擇并不是優(yōu)勝劣汰,而是有背后的原因的。要想讓我們的產(chǎn)品被人喜歡,我們需要研究用戶。
Image title
用戶研究七種方法
但用戶可能是幾百萬人呢!我們面對(duì)這樣抽象的群體然后告訴自己要以他們?yōu)橹行脑O(shè)計(jì)這多么抽象啊。這么多用戶甚至有時(shí)用戶自己的聲音也是矛盾的。我們到底怎么樣了解用戶的心聲呢?
用戶畫像
根據(jù)產(chǎn)品的調(diào)性和用戶群體,用戶研究團(tuán)隊(duì)可以設(shè)計(jì)出一個(gè)用戶的模型,這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特征的標(biāo)簽組成的,通過這個(gè)標(biāo)簽我們可以更好地理解誰在使用我們的產(chǎn)品。用戶畫像建立后,每個(gè)功能可以完成自己的用戶故事:用戶在什么場(chǎng)景下需要這個(gè)功能。這樣,我們所設(shè)計(jì)的功能就會(huì)更接近用戶實(shí)際的需要。比如我們現(xiàn)在要設(shè)計(jì)一個(gè)女裝購物應(yīng)用,那么我們可以做這個(gè)用戶畫像:小美,在北京國貿(mào)CBD上班,21歲,收入8000,喜歡淘寶購物和電視購物。使用我們產(chǎn)品的目的是為了尋找正品時(shí)尚大牌服裝進(jìn)行網(wǎng)購。小美因?yàn)閯偖厴I(yè)所以一方面喜歡大牌一方面又資金短缺(啟發(fā):我們的產(chǎn)品是不是要解決這兩個(gè)痛點(diǎn)?)小美是時(shí)尚OL,審美很高,不喜歡俗氣的設(shè)計(jì)。(啟發(fā):界面設(shè)計(jì)是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色?)。看,即使小美并不真實(shí)存在,但是她指引了我們的產(chǎn)品設(shè)計(jì)。接下來,我們還可以給小美增加一個(gè)頭像,在做設(shè)計(jì)時(shí)我們想象這個(gè)人就是真實(shí)存在的用戶,她會(huì)對(duì)我們的設(shè)計(jì)有什么看法。當(dāng)我們完成用戶畫像之后,還可以接著設(shè)計(jì)用戶故事:小美經(jīng)常需要在工作場(chǎng)合穿符合工作氣質(zhì)的衣服,也需要在約會(huì)時(shí)有晚禮服之類的服裝,可是小美的收入有限,她眼光較高但是對(duì)價(jià)格過高的服裝無法承擔(dān),她使用我們的APP就是為了尋找正品且價(jià)格適中的服裝。那么,小美在哪里用我們的APP呢?這就要為小美繼續(xù)設(shè)計(jì)一個(gè)用戶使用場(chǎng)景了:小美在開會(huì)時(shí)可能會(huì)打開看看、在地鐵里也會(huì)瀏覽、在清晨打開衣柜時(shí)也會(huì)瀏覽。基本來說是碎片時(shí)間,而且是有著裝需求時(shí)。(啟發(fā):我們是不是需要把字號(hào)調(diào)大以適應(yīng)地鐵里顛簸的閱讀環(huán)境?我們是不是需要設(shè)計(jì)省流量模式免得剛剛畢業(yè)的小美花一筆巨大的流量資費(fèi)?)
Image title
用戶畫像
用戶訪談
邀約用戶來回答產(chǎn)品的相關(guān)問題,并記錄作出后續(xù)分析。用戶訪談?dòng)腥N形式:結(jié)構(gòu)式訪談(根據(jù)之前寫好的問題結(jié)構(gòu))、半結(jié)構(gòu)式訪談(一半根據(jù)問題一半討論)、開放式訪談(較為深入地和用戶交流,雙方都有主動(dòng)權(quán)來探討)。用戶訪談設(shè)置時(shí)要注意:用戶不可以是互聯(lián)網(wǎng)從業(yè)的專業(yè)人員、不可以提出誘導(dǎo)性問題、不要使用專業(yè)術(shù)語。用戶訪談適合產(chǎn)品開發(fā)的全部過程。
問卷調(diào)查
可分為紙質(zhì)調(diào)查問卷、網(wǎng)絡(luò)問卷調(diào)查。依據(jù)產(chǎn)品列出需要了解的問題,制成文檔讓用戶回答。問卷調(diào)查是一種成本比較低的用戶調(diào)查方法。問卷調(diào)查適合產(chǎn)品策劃初期對(duì)目標(biāo)人群的投放,另外注意一個(gè)問題最好收集10個(gè)問卷,也就是如果你有10個(gè)問題那么至少要收集100個(gè)問卷才是有效的。要知道不是所有人都愿意耐心地填寫問卷,很可能敷衍了事的回答會(huì)擾亂我們的判斷。
焦點(diǎn)小組
焦點(diǎn)小組一般有6-12人組成,由一名專業(yè)人士主持,依照訪談提綱引導(dǎo)小組成員各抒己見,并記錄分析。并且在焦點(diǎn)小組的房間里會(huì)有一扇單向玻璃窗,用戶是看不到里面有誰的。而在里面坐著的通常是開發(fā)團(tuán)隊(duì),他們可以清晰地看到用戶是如何吐槽他們的產(chǎn)品的,但是他們沒有權(quán)利直接和用戶進(jìn)行解釋。焦點(diǎn)小組需要特殊的房間和設(shè)備,主持人也需要訓(xùn)練有素,焦點(diǎn)小組特別能夠分析出用戶在沒有我們說明的情況下如何使用我們的產(chǎn)品和對(duì)產(chǎn)品的不滿。
可用性測(cè)試
通過篩選讓不同用戶群來對(duì)產(chǎn)品進(jìn)行操作,同時(shí)觀察人員在旁邊觀察并記錄,可用性測(cè)試的要求是用戶不可以是互聯(lián)網(wǎng)從業(yè)者而應(yīng)該是真實(shí)產(chǎn)品的用戶群體。但是可用性測(cè)試一般要有一個(gè)可用的軟件版本或者原型供人測(cè)試才可以,在軟件開發(fā)的前期不適合用這個(gè)方法。
眼動(dòng)測(cè)試
使用特殊的設(shè)備眼動(dòng)儀來追蹤用戶使用產(chǎn)品時(shí)眼睛聚焦在哪里,盲區(qū)是哪里。比如一個(gè)網(wǎng)站通過眼動(dòng)測(cè)試可以知道用戶的視覺會(huì)自動(dòng)屏蔽網(wǎng)站的常見廣告位置,這時(shí)如果希望提高廣告的點(diǎn)擊,就需要把廣告位放置于用戶聚焦時(shí)間較長的位置。眼動(dòng)測(cè)試的設(shè)備比較專業(yè),通常在小公司較難開展。
用戶反饋和大數(shù)據(jù)分析
根據(jù)市場(chǎng)提供的反饋和數(shù)據(jù)得出客觀的判斷和合理的推測(cè)。用戶反饋也是用戶研究的一個(gè)重點(diǎn),用戶反饋主要是用戶通過產(chǎn)品的反饋入口主動(dòng)向開發(fā)者提出的意見。
有了這些方法,我們就能更好地了解用戶和接近用戶了。但是要注意,用戶研究也是有陷阱的。比如:填寫問卷和參與調(diào)研的用戶可能并不是核心用戶;提交用戶反饋的用戶之外可能有更多沉默的用戶等。總之用戶研究是一個(gè)必要的手段,但是仍然需要產(chǎn)品團(tuán)隊(duì)來對(duì)產(chǎn)品的方向做出決斷。
用戶如何使用產(chǎn)品
使用場(chǎng)景
剛才我們介紹了用戶使用的場(chǎng)景是根據(jù)產(chǎn)品的功能和平臺(tái)決定的。電腦的使用場(chǎng)景是正襟危坐,手持鼠標(biāo)。而移動(dòng)端則是隨時(shí)隨地使用,我們的用戶可能在地鐵里、在廁所里、在吃飯時(shí)、在上課中怕老師看到把手機(jī)藏在桌洞里、在工作中領(lǐng)導(dǎo)巡視后偷偷瞄、在輾轉(zhuǎn)反側(cè)睡不著的時(shí)候沒有開燈地瀏覽等。這時(shí)我們要為用戶考慮,如果他們?cè)谑褂梦覀儺a(chǎn)品的各種場(chǎng)景中有什么需要,是不是需要省流量、是不是需要調(diào)整字號(hào)、是不是需要過濾藍(lán)光、是不是需要護(hù)眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界面目前單手不太友好、是不是掃二維碼時(shí)需要個(gè)手電功能、是不是需要語音提醒、是不是需要清除訪問記錄。一個(gè)不考慮用戶使用場(chǎng)景的產(chǎn)品一定是會(huì)遭到吐槽的。很久之前我聽同事在吃飯時(shí)抱怨過“大爺?shù)模膊桓銈€(gè)提示,早晨在地鐵里用4G看流量以為是在家用WIFI,結(jié)果看了一集《甄嬛傳》花了80塊錢”、“哎?你是不是早晨開會(huì)時(shí)玩游戲了?你的比分都給我們推送了哈哈哈”。
Image title
我的產(chǎn)品中的用戶使用場(chǎng)景表格
操作手勢(shì)
網(wǎng)頁設(shè)計(jì)所處的電腦端目前主要還是依靠鼠標(biāo)點(diǎn)擊來操作。鼠標(biāo)點(diǎn)擊的最小單位甚至可以是一像素。而移動(dòng)端不太一樣,移動(dòng)端設(shè)備中我們使用手指來操作界面。一般來說,手指點(diǎn)觸區(qū)域最小尺寸為7×7 mm,拇指最小尺寸為9×9 mm。也就是在我們@2x設(shè)計(jì)中為88px(或44pt)。這個(gè)神奇地88PX在移動(dòng)端應(yīng)用很廣泛:很多表單單項(xiàng)的高度是88ox、導(dǎo)航欄高度也是88px等等。那您可能會(huì)說,也不對(duì)吧,有些界面上的圖標(biāo)看上去沒有88px啊。是的,但是那只是視覺,我們可以通過增加圖標(biāo)點(diǎn)擊區(qū)域的方式(比如給60像素大小的圖標(biāo)左右增加22像素的透明區(qū)域)來讓圖標(biāo)更好點(diǎn)擊。千萬在設(shè)計(jì)時(shí)不要把操作區(qū)域放得特別近,可以把所有點(diǎn)擊區(qū)域用88px標(biāo)記看是否有重疊的情況,避免點(diǎn)擊一個(gè)圖標(biāo)時(shí)誤點(diǎn)另一個(gè)圖標(biāo)。除了點(diǎn)擊區(qū)域,移動(dòng)端還可以利用各種手勢(shì)來進(jìn)行各種操作的設(shè)計(jì)。主要的手勢(shì)有:
Image title
單點(diǎn)觸碰(Tap):點(diǎn)擊用來選擇一個(gè)元素,類似鼠標(biāo)的左鍵,是最常用的手勢(shì)。
拖曳(Drag):點(diǎn)擊某個(gè)元素然后拖拽進(jìn)行移動(dòng),類似現(xiàn)實(shí)生活中移動(dòng)物體的感覺。
快速拖曳(Flick)速度很快的拖曳操作。
滑動(dòng)(Swipe):水平或垂直方向的滑動(dòng),比如翻閱相冊(cè)和電子書翻閱的手勢(shì)。
雙擊(Double-Click):快速點(diǎn)擊一個(gè)物體,通常會(huì)在放大、縮小操作中使用。
捏(Pinch):兩根手指頭向內(nèi)捏,捏的動(dòng)作會(huì)使物體變得更小,通常在縮小操作中使用。網(wǎng)易新聞客戶端中正文頁面即可通過捏的動(dòng)作來縮小字號(hào)。
伸展(Stretch):兩根手指向外推,現(xiàn)實(shí)中這種操作會(huì)使物體向外拉伸,元素可能會(huì)變得更大,通常會(huì)在放大操作中使用。網(wǎng)易新聞客戶端中正文頁面可以通過伸展放大字號(hào)。
長按(Touch and hold):手指點(diǎn)擊并按住會(huì)激發(fā)另一個(gè)操作。比如朋友圈的相機(jī)圖標(biāo)長按可只發(fā)文字。但是注意,長按不是一個(gè)常態(tài)操作,所以一般不太建議用戶進(jìn)行該操作。但長按操作又是有需要的,所以會(huì)把刪除、只發(fā)文字狀態(tài)等操作隱藏其中。
除了用戶使用場(chǎng)景、點(diǎn)擊區(qū)域、手勢(shì),那么還有一個(gè)影響我們?cè)O(shè)計(jì)的使用情況,就是用戶怎么拿手機(jī)很重要。用戶可以:?jiǎn)问帜檬謾C(jī)、雙手拿手機(jī)、直向拿手機(jī)、橫向拿手機(jī)。我們需要考慮這些可能發(fā)生的特征進(jìn)行手勢(shì)互動(dòng)的規(guī)劃與設(shè)計(jì)。比如OFO為了讓單手(說不定是左手還是右手)操作方便,主要按鈕在下方并且做的很大,左右手都可以輕松點(diǎn)擊。而微信的很多按鈕也都是大長條,方便左右手的觸發(fā)。橫屏使用場(chǎng)景一般是游戲、視頻等,所以一般的APP并不支持橫屏操作(微信、支付寶、微博均不支持橫屏操作),
Image title
格式塔:我們?nèi)绾握J(rèn)知?
我們發(fā)現(xiàn)有些用戶在使用設(shè)計(jì)好的界面時(shí)找不到一些重要的功能按鈕。“奇怪,分享功能不就在更多按鈕里面嗎?”、“用戶怎么連這個(gè)也找不到啊”你也許會(huì)說。我們要來了解一下用戶是如何認(rèn)知我們?cè)O(shè)計(jì)好的界面的。在初高中考試的時(shí)候您一定見過完形填空這種格式吧,“格式塔”源自德語“Gestalt”,意即“整體”、“完形”的意思。格式塔心理學(xué)認(rèn)為,我們?cè)谟^察的時(shí)候會(huì)自動(dòng)腦補(bǔ)出一些邏輯和含義來,會(huì)讓觀察對(duì)象變成一個(gè)完整的、整體的、常見的形狀。
"研表究明,漢字的序順并不定一能影閱響讀,比如當(dāng)你完看這句話后之,才發(fā)這現(xiàn)里的字全是都亂的。"研究格式塔心理學(xué)對(duì)我們做互聯(lián)網(wǎng)產(chǎn)品和設(shè)計(jì)有什么用呢?掌握格式塔的理論我們就可以讓用戶按照我們安排的“劇本”來交互和操作界面了。我們可以讓用戶比較容易地根據(jù)固定位置找到提交按鈕、我們也可以讓用戶不經(jīng)過太多思考在殺毒軟件中點(diǎn)擊殺毒按鈕等。格式塔心理學(xué)對(duì)于我們做好表現(xiàn)層是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個(gè)知識(shí)點(diǎn)。
接近律 law of proximity
格式塔心理學(xué)認(rèn)為,人們認(rèn)知事物的時(shí)候,會(huì)依靠它們的距離來判斷它們之間的關(guān)系。兩個(gè)元素越近就說明它們之間關(guān)系更強(qiáng)。但是接近也是有對(duì)比的,在復(fù)雜的設(shè)計(jì)中,我們要一邊考慮它們之間內(nèi)部的邏輯關(guān)系一邊來排版。
Image title
A組和B組因?yàn)榻咏啥a(chǎn)生不同地閱讀順序
Image title
距離更近的信息暗示了他們有內(nèi)在的邏輯關(guān)系
相似律law of similarity
認(rèn)知事物時(shí),刺激要素(比如大小、色彩、形狀等要素)相似的元素我們傾向于把它們聯(lián)合在一起或者認(rèn)為它們是一個(gè)種類。比如,我們能輕易的分辨出撥號(hào)頁面中撥號(hào)鍵和按鍵群的區(qū)別。
Image title
相似的元素暗示了他們屬于一個(gè)種類
Image title
類似外形的單元會(huì)被我們?nèi)四X默認(rèn)為同一屬類
閉合律law of closure
就算沒有外形的約束,我們也會(huì)自動(dòng)把圖形腦補(bǔ)完全。比如半個(gè)形狀或者有缺口的形狀我們不會(huì)認(rèn)為是一條線,而是一個(gè)完整的形狀。閉合是指一種完形的認(rèn)知規(guī)律。
Image title
左邊的圖中我們會(huì)認(rèn)為是圓形有缺口而不是一條曲線
右邊的圖形中我們會(huì)認(rèn)為是圓形被三條線截?cái)嗔硕皇撬膫€(gè)圖形
Image title
界面設(shè)計(jì)中露出一半內(nèi)容,閉合律讓我們感知右邊還隱藏著更多內(nèi)容
連續(xù)律law of continuity
在知覺過程中人們往往傾向于使知覺對(duì)象的直線繼續(xù)成為直線,使曲線繼續(xù)成為曲線,也就是視覺的慣性。利用連續(xù)律我們可以讓用戶操作界面時(shí)不經(jīng)過思考就點(diǎn)擊一個(gè)固定的位置。
Image title
深諳連續(xù)律的流氓軟件
成員特性律law of membership character
如果我們有很多同樣的按鈕,如何讓某個(gè)更重要的按鈕突出但是仍然讓用戶感知還是按鈕呢?那就要用到成員特性律了。成員特性律賦予了集體中某一個(gè)元素特殊的一些刺激元素從而突出它。
Image title
獨(dú)特的外形暗示了它與別的元素有不同的功能
Image title
撥號(hào)頁面中撥號(hào)鍵與微博發(fā)布微博圖標(biāo)都與其他按鈕不同
記憶律:我們?nèi)绾斡洃洠?br /> 接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔心理學(xué)家沃爾夫?qū)z忘問題所作的經(jīng)典性研究得出了格式塔的三大記憶律。沃爾夫?qū)嶒?yàn)時(shí)要求實(shí)驗(yàn)體觀看樣本圖形并記住它們,然后在不同的時(shí)間里根據(jù)記憶把它們畫出來。結(jié)果發(fā)現(xiàn)實(shí)驗(yàn)體在不同的間隔時(shí)間畫出來的圖像都有不同。有時(shí)再現(xiàn)的圖畫比原來的圖畫更簡(jiǎn)單更有規(guī)則,有時(shí)原來圖畫中顯著的細(xì)節(jié)在再現(xiàn)時(shí)被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。沃爾夫把這三種記憶規(guī)律稱之為格式塔三大記憶律:“水平化”、“尖銳化”、“常態(tài)化”。
Image title哪個(gè)圖形才是正確的?(圖片來源:網(wǎng)絡(luò))
水平化leveling
水平化是指在記憶中我們趨向于減少知覺圖形小的不規(guī)則部分使其對(duì)稱;或趨向于減少知覺圖形中的具體細(xì)節(jié)。
尖銳化sharpening
尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中,人們往往強(qiáng)調(diào)知覺圖形的某些特征而忽視其它具體細(xì)節(jié)的過程。在有些心理學(xué)家看來,人類記憶的特征之一,就是客體中最明顯的特征在再現(xiàn)過程中往往被夸大了。
常態(tài)化normalizing
常態(tài)化是指人們?cè)谟洃浿校鶕?jù)自己已有的記憶痕跡對(duì)知覺圖形加以修改,即一般會(huì)趨向于按照自己認(rèn)為它似乎應(yīng)該是什么樣子來加以修改的。
Image title
情感化設(shè)計(jì)是什么?
了解格式塔會(huì)讓我們把界面做得符合用戶的心理預(yù)期,讓用戶能夠明顯地找到他應(yīng)該找到的操作。可是用戶好像還是不開心,因?yàn)橛脩粲X得界面不好看。您是不是也會(huì)陷入這樣的矛盾:可用性重要還是美感更重要?怎么樣能夠讓我們?cè)O(shè)計(jì)的界面又好用還漂亮呢?情感化設(shè)計(jì)由唐納德·A·諾曼博士提出,指的是設(shè)計(jì)中情感在所處于的重要地位以及如何讓用戶把情感投射在產(chǎn)品上來解決可用性與美感的矛盾。情感化設(shè)計(jì)是在抓住用戶注意、誘發(fā)情緒反應(yīng)以提高執(zhí)行行為的可能性的設(shè)計(jì)。比如紅色且巨大的購買按鈕能夠無意識(shí)地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網(wǎng)絡(luò)不好時(shí)的焦慮等等。情感化設(shè)計(jì)有三個(gè)水平,它們是遞進(jìn)關(guān)系,分別是:本能水平(重視設(shè)計(jì)外形)、行為水平設(shè)計(jì)(重視使用的樂趣和效率)、反思水平設(shè)計(jì)(重視自我形象、個(gè)人滿意、記憶)。
Image title
本能水平
我們都是視覺動(dòng)物,對(duì)外形的觀察和理解是出于我們本能的。本能水平的設(shè)計(jì)就是刺激用戶的感官體驗(yàn),讓別人注意到我們的設(shè)計(jì)。這個(gè)階段的設(shè)計(jì)會(huì)更加關(guān)注外形的視覺效果。比如各大電商網(wǎng)站的專題頁面設(shè)計(jì),更加注重抓眼球和外觀的刺激。
行為水平
行為水平是功能性產(chǎn)品需要注重的。一個(gè)產(chǎn)品是否達(dá)到了行為水平,要看它是否能有效地完成任務(wù),是否是一種有樂趣的操作體驗(yàn)。優(yōu)秀行為水平設(shè)計(jì)的四個(gè)方面:功能,易懂性,可用性和物理感覺。比如好用的記事本APP等。
反思水平
反思水平的設(shè)計(jì)與用戶長期感受有關(guān),這種水平的設(shè)計(jì)建立了品牌感和用戶的情感投射。反思水平設(shè)計(jì)是產(chǎn)品和用戶之間情感的紐帶,通過互動(dòng)給用戶自我形象、滿意度、記憶等體驗(yàn),讓用戶形成對(duì)品牌的認(rèn)知,培養(yǎng)對(duì)品牌的忠誠度。馬洛斯理論把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求五個(gè)層次。我認(rèn)為反思水平的設(shè)計(jì)就是提供給用戶歸屬感、尊重、自我實(shí)現(xiàn)。比如Google每逢節(jié)日就會(huì)有一些符合節(jié)日化的設(shè)計(jì)、網(wǎng)易嚴(yán)選的空狀態(tài)也會(huì)有品牌感的體現(xiàn)等。
Image title
淘寶空狀態(tài)中的情感化設(shè)計(jì)
情感化設(shè)計(jì)的表達(dá)
Image title
畫面 畫面是情感化設(shè)計(jì)的重點(diǎn),讓錯(cuò)誤頁面或者空狀態(tài)都成為一幅可愛的插畫。
應(yīng)景 讓用戶在我們的產(chǎn)品中體驗(yàn)到一些和真實(shí)世界一樣的氛圍變化。
游戲感 沒有人喜歡做任務(wù)。試著讓用戶完成的任務(wù)變成游戲吧。比如每次登陸加金幣,有足夠的金幣就可以獲得什么稱號(hào)。
沖突 沖突非常能夠勾起人的情緒,營造一個(gè)競(jìng)爭(zhēng)或者對(duì)抗的氛圍,讓用戶感覺自己置身在一個(gè)比賽或者格斗中一樣。
講故事 給產(chǎn)品和無聊的圖像一些故事內(nèi)容,畢竟沒有人討厭講故事。
隱喻 用一些大家理解,隨處可見的事物表達(dá)一些無趣、生澀的概念。
互動(dòng) 給用戶和其他用戶多制造互動(dòng)機(jī)會(huì),比如排行榜、推薦等,不要讓用戶感覺孤獨(dú)。
交互八原則
當(dāng)我們了解了產(chǎn)品五要素(產(chǎn)品設(shè)計(jì)的維度問題)、格式塔心理學(xué)(用戶如何認(rèn)知的問題)、情感化設(shè)計(jì)(如何讓用戶滿意的問題)后,我還要給您介紹一大堆地交互原則。這些交互原則會(huì)幫助我們?cè)O(shè)計(jì)出更好用的界面,當(dāng)然也可以幫助我們講出這樣設(shè)計(jì)的原因。不拿出一些理論怎么能夠讓別人信服你的設(shè)計(jì),對(duì)不對(duì)?
費(fèi)茨定律(Fitts’Law)
費(fèi)茨定律指的是:光標(biāo)到達(dá)一個(gè)目標(biāo)的時(shí)間,與當(dāng)前光標(biāo)所在的位置和目標(biāo)位置的距離(D)和目標(biāo)大小(S)有關(guān)。它的數(shù)學(xué)公式是:時(shí)間 T = a + b log2(D/S+1)。這個(gè)定律是由保羅.菲茨博士(Paul M. Fitts)提出的所以得名。菲茨定律在很多領(lǐng)域都得到了應(yīng)用,特別是在互聯(lián)網(wǎng)設(shè)計(jì)中尤為深遠(yuǎn)。我們利用費(fèi)茨定律估算用戶移動(dòng)光標(biāo)到鏈接或者按鈕所需的時(shí)間,時(shí)間越短越。比如有一個(gè)按鈕在左下角,我們的操作可以細(xì)分為兩個(gè)階段:第一個(gè)階段大范圍移動(dòng)到左下方向,然后再做微調(diào)到達(dá)這個(gè)按鈕之上。所以這個(gè)時(shí)間受按鈕和鏈接所在位置與按鈕和鏈接大小影響,也就是說我們?cè)谧鲈O(shè)計(jì)時(shí)要考慮光標(biāo)默認(rèn)會(huì)放在哪里、我們的鏈接按鈕是不是太小了。
Image title
費(fèi)茨定律說明距離越短、目標(biāo)大小越大,那么光標(biāo)到達(dá)目標(biāo)越快
Image title
費(fèi)茨定律在網(wǎng)頁設(shè)計(jì)中的使用
Image title
OFO和蘋果音樂APP都將按鈕放置手指最容易點(diǎn)擊的區(qū)域并且按鈕足夠大
希克定律(Hick’s Law)
希克定律是指一個(gè)人面臨的選擇(n)越多,所需要作出決定的時(shí)間(T)就越長。它的數(shù)學(xué)公式是:反應(yīng)時(shí)間 T=a+b log2(n)。在我們的設(shè)計(jì)中如果給用戶的選擇更多,那么用戶所需要做出決定的時(shí)間就越長。比如我們給出用戶菜單-子菜單-選項(xiàng),那么用戶可能會(huì)很糾結(jié);如果我們簡(jiǎn)化成菜單-選項(xiàng),就會(huì)減少用戶做選擇的時(shí)間。
Image title
用戶反應(yīng)時(shí)間和選擇數(shù)量的關(guān)系
Image title
我們應(yīng)該減少用戶的選擇
7±2法則
讓我們先玩?zhèn)€游戲,請(qǐng)記憶下面的文字,一分鐘后移開視線:
掙 多 久 可 貓 風(fēng) 師 裊 崩 六 酒 望
現(xiàn)在閉上眼睛想一下剛才的文字您能回憶幾個(gè)?大概是五個(gè)到九個(gè)之間。1956年美國科學(xué)家米勒對(duì)人類短時(shí)記憶能力進(jìn)行了研究,他注意到年輕人的記憶廣度大約為5到9個(gè)單位之間,就是7±2法則。這個(gè)法則對(duì)我們做界面設(shè)計(jì)的啟迪就是如果希望用戶記住導(dǎo)航區(qū)域的內(nèi)容或者一個(gè)路徑的順序,那么數(shù)量應(yīng)該控制在七個(gè)左右,比如蘋果和站酷網(wǎng)站的導(dǎo)航個(gè)數(shù)。另外,移動(dòng)端底部Tab區(qū)域最多也是五個(gè),而頁面中的八大金剛圖標(biāo)也是八個(gè)。
Image title
蘋果、站酷、Dribbble等網(wǎng)站導(dǎo)航數(shù)量全部是7±2
泰思勒定律(Tesler’s Law)
這個(gè)定律是說產(chǎn)品固有的復(fù)雜性存在一個(gè)臨界點(diǎn),超過了這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了。我們只能將這種復(fù)雜性轉(zhuǎn)移。比如我們?nèi)绻l(fā)現(xiàn)頁面的功能是必須的,但當(dāng)前的頁面信息過載,那么就需要將次要的功能收起或者轉(zhuǎn)移。
Image title
Dribbble網(wǎng)站導(dǎo)航將更多功能收起在一個(gè)表示更多的圖標(biāo)內(nèi)
防錯(cuò)原則
一個(gè)表單是需要填寫完畢后方可提交的。但是用戶有時(shí)會(huì)漏填或者忘記填寫,這是用戶點(diǎn)擊提交會(huì)怎么樣?很可能有些選項(xiàng)會(huì)被清空(比如密碼選項(xiàng)基于安全考慮會(huì)清空cookies)那么用戶還得重新填寫。這時(shí)解決辦法是在用戶沒填寫完之前把按鈕設(shè)置一個(gè)看起來不能點(diǎn)擊的樣式,用戶想提交時(shí)彈窗:您還有內(nèi)容沒有填寫完哦,然后把用戶定位在沒填寫完的項(xiàng)目,讓那個(gè)表單高亮。(是不是真的做到以用戶為中心啦?)再比如推特只允許用戶填寫140個(gè)字,但用戶一寫爽了往往會(huì)超出140個(gè)字那怎么辦?解決辦法是給他在旁邊倒數(shù)還能寫幾個(gè)字。看,這些都是我們?yōu)榱朔乐褂脩舨僮鞒霈F(xiàn)錯(cuò)誤所做的努力,防錯(cuò)設(shè)計(jì)就是要減少錯(cuò)誤操作所帶來的災(zāi)難。錯(cuò)誤的提示當(dāng)然需要設(shè)計(jì)師的設(shè)計(jì)了。可是也許您不知道有些錯(cuò)誤提示含糊,用戶并不知道到底錯(cuò)的是哪里,下一步該怎么辦。比如僅僅登錄功能就可能會(huì)有用戶名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、連續(xù)三次輸入密碼錯(cuò)誤、用戶名為空等不同的錯(cuò)誤,而有些產(chǎn)品僅僅給出“出錯(cuò)了”,那么用戶當(dāng)然會(huì)不知所措了。正向的例子比如一次我在登錄Google Mail時(shí)輸錯(cuò)了密碼,它提示“密碼輸入錯(cuò)誤,提示:您在1個(gè)月前改過密碼”。
Image title
BOO!APP輸入密碼時(shí)卡通會(huì)蒙住眼睛,輸錯(cuò)時(shí)也會(huì)有提示
奧卡姆的剃刀法則(Occam’s Razor)
奧卡姆的剃須刀法則主要就是說我們做產(chǎn)品時(shí)功能上不可以太繁瑣,應(yīng)該保證簡(jiǎn)潔和工具化。比如產(chǎn)品中為用戶提供了收藏功能是否就不需要喜歡了?提供了喜歡是否不需要點(diǎn)贊了?一定保證功能上的克制。
Image title
QQ將更多功能收起到了頭像和加號(hào)圖標(biāo)中
防呆原則
有一個(gè)著名的交互書籍叫作《Dont make me think》,翻譯過來就是不要讓我思考。這句話一直在我做設(shè)計(jì)時(shí)響起:不要認(rèn)為用戶是專家!不要認(rèn)為用戶是專家!有時(shí)我們會(huì)覺得,點(diǎn)擊漢堡包圖標(biāo)當(dāng)然就是菜單啊!這個(gè)按鈕長按不就會(huì)調(diào)出XX功能了嘛。但是我們忘記了普通用戶可能并不理解什么是漢堡包圖標(biāo)、什么是抽屜式導(dǎo)航、什么是長按、雙指滑動(dòng)。更何況普通用戶并不會(huì)研究我們的APP,在他們眼中我們的產(chǎn)品只是眾多工具中的一個(gè),我們何德何能認(rèn)為自己的產(chǎn)品是值得用戶花時(shí)間學(xué)習(xí)的?一定要把交互和設(shè)計(jì)做得簡(jiǎn)單,并且讓用戶在別的地方“學(xué)習(xí)”過。每個(gè)頁面強(qiáng)調(diào)一個(gè)重要的功能而不要讓用戶做選擇題。這些都是有效防呆的好方法。防呆和不要讓我思考都講的是我們的設(shè)計(jì)要自然而然。
Image title
運(yùn)動(dòng)APP KEEP 的頁面中總有一個(gè)按鈕是突出的
防止不耐煩原則
用戶是很容易不耐煩的,你還記得你多少次看著視頻加載條罵人嗎?如果我們需要用戶等待載入信息,一定要給一個(gè)有情感化的設(shè)計(jì)提示,避免用戶產(chǎn)生焦慮。 比如很多游戲(比如決戰(zhàn)平安京、王者榮耀等)加載時(shí)都會(huì)出現(xiàn)主角跑步的小動(dòng)畫,美團(tuán)等APP下拉刷新時(shí)也會(huì)有幾幀的動(dòng)畫來安慰用戶。動(dòng)畫要好于蘋果默認(rèn)提供給開發(fā)的“轉(zhuǎn)菊花”,因?yàn)榭ㄍㄐ蜗蟾杏H和力。但是好像還不夠,用戶需要掌控感,“哎?它一直加載,是不是死機(jī)了?”為了防止用戶沒有掌控感,我們可以為用戶設(shè)計(jì)加載條或者加載提示。加載狀態(tài)條很遺憾很多都是假的甚至是重復(fù)的,原因是其實(shí)要判斷加載了多少M(fèi)的素材的代碼更占資源!我們本來想安慰用戶等待加載的時(shí)間竟然會(huì)變得更長,那當(dāng)然不行啦。于是很多時(shí)候我們會(huì)做一個(gè)假的加載狀態(tài)條來安撫用戶,我想您一定看過反復(fù)加載的加載條吧!加載條下的文案其實(shí)也是可以變得非常有情感化設(shè)計(jì)感受的,比如通常是:加載場(chǎng)景資源、加載素材這樣的文案,但是有些APP需要很長加載時(shí)間時(shí)會(huì)給出這樣的文案:導(dǎo)演正在準(zhǔn)備、女主角準(zhǔn)備化妝了、攝像師打開了燈光。是不是更加好玩啦?
Image title
美團(tuán)和網(wǎng)易嚴(yán)選的加載動(dòng)畫
總結(jié)
交互知識(shí)其實(shí)關(guān)鍵還要在應(yīng)用和分析。一方面,我們可以在工作中積累經(jīng)驗(yàn),不斷地思考如何和同事配合一起研究提高產(chǎn)品在使用時(shí)的體驗(yàn);另一方面,我們也要經(jīng)常積累一些產(chǎn)品使用時(shí)發(fā)現(xiàn)的交互。建議大家平時(shí)可以收集你覺得不錯(cuò)的情感化設(shè)計(jì)或者微交互,比如發(fā)現(xiàn)餓了么在下雨天送貨時(shí)會(huì)有電閃雷鳴和雨滴的設(shè)計(jì);OFO和滴滴打車在不同節(jié)日也會(huì)把地圖找車?yán)锏膱D標(biāo)換成節(jié)日相關(guān)的圖標(biāo);BOO!APP在輸入密碼時(shí)小怪獸會(huì)捂住眼睛;WPS在晚上寫作時(shí)(沒錯(cuò)就是現(xiàn)在)會(huì)提示你開啟過濾藍(lán)光的護(hù)眼模式等等。一個(gè)好的設(shè)計(jì)師一定是懂得交互的設(shè)計(jì)師,也應(yīng)該是非常細(xì)心的設(shè)計(jì)師,也應(yīng)該是懂得為用戶著想的設(shè)計(jì)師。

遵循這7個(gè)原則,能讓你的網(wǎng)頁用戶體驗(yàn)更優(yōu)秀

濤濤

作為用戶,在很多時(shí)候會(huì)很容易判斷出一個(gè)網(wǎng)站的用戶體驗(yàn)是否優(yōu)秀,因?yàn)橹饔^感受是很難被欺騙的。但是作為網(wǎng)站的設(shè)計(jì)者和開發(fā)者,角色轉(zhuǎn)換之后,所需要面對(duì)問題就復(fù)雜得多。身為構(gòu)建者,要讓體驗(yàn)盡善盡美需要花費(fèi)大量的時(shí)間精力來完善整個(gè)體驗(yàn)的閉環(huán)。今天為你所整理的這7個(gè) UX設(shè)計(jì)的原則,能夠幫你更好地進(jìn)行網(wǎng)站的 UX設(shè)計(jì),并且盡可能地將整體的用戶體驗(yàn)提升到一定高度。

1. 圍繞用戶體驗(yàn)來進(jìn)行整體設(shè)計(jì)

想要?jiǎng)?chuàng)造難忘的用戶體驗(yàn),自然要圍繞著用戶體驗(yàn)本身來進(jìn)行設(shè)計(jì)。甚至在某種意義上來說,數(shù)據(jù)和內(nèi)容也應(yīng)該是服務(wù)于體驗(yàn)的, 它們應(yīng)該以什么樣的體驗(yàn)來呈現(xiàn)出來,這是設(shè)計(jì)者需要反復(fù)思考和琢磨的問題。

圖形、布局、文本和交互元素之間的協(xié)同工作才能創(chuàng)造體驗(yàn),任何一個(gè)維度缺一不可,單純的信息展示是不夠的。

想讓你的網(wǎng)頁能在互聯(lián)網(wǎng)上大量的信息中脫穎而出,體驗(yàn)是至關(guān)重要的。現(xiàn)代網(wǎng)頁中大量的視覺和交互內(nèi)容存在,是為了能通過體驗(yàn)直擊人心,這樣才能在激烈的競(jìng)爭(zhēng)中存活。

2. 網(wǎng)站內(nèi)容應(yīng)當(dāng)一目了然

如果你認(rèn)為網(wǎng)站內(nèi)容是用來讀的,那就錯(cuò)了。現(xiàn)代用戶的注意力集中的時(shí)間非常短,絕大多數(shù)用戶在瀏覽信息的時(shí)候,都是快速掃視,而非逐字逐句地仔細(xì)閱讀,信息的展現(xiàn)一定要直觀、清晰,確保能夠一瞥就能看明白。借助信息圖表和視覺,更快地傳達(dá)信息和數(shù)據(jù)。

你需要讓你的內(nèi)容更加吸引用戶,絕大多數(shù)用戶會(huì)為觸動(dòng)它們的信息和內(nèi)容而駐足,當(dāng)他們想要了解更多的時(shí)候,才會(huì)點(diǎn)擊,了解更多。

3. 用戶想要簡(jiǎn)單而清晰的內(nèi)容

用戶只需要半秒就能判斷出網(wǎng)站設(shè)計(jì)和內(nèi)容,你需要盡量讓網(wǎng)站的交互和指引足夠清晰,顯而易見。不要讓按鈕難以被用戶發(fā)現(xiàn),在首頁上放上一大堆的按鈕和鏈接,不如通過視覺上的引導(dǎo),讓用戶注意到最關(guān)鍵的那個(gè) CTA按鈕。

通過迭代和測(cè)試,不斷地優(yōu)化和提升網(wǎng)站的易用性。有的設(shè)計(jì)對(duì)于絕大多數(shù)的用戶都非常有用,凸顯最重要的選項(xiàng),允許隱藏額外的功能,并且為用戶提供顯示全部的選項(xiàng)。

除了清晰的設(shè)計(jì),整體的一致性也很重要。統(tǒng)一的配色、交互和圖形能夠讓用戶對(duì)于后續(xù)的操作有更清晰的預(yù)期,減少用戶在后續(xù)操作過程中探索的力度,這是通過統(tǒng)一性設(shè)計(jì)提升產(chǎn)品易用性的一種方式。

4. 通用設(shè)計(jì)元素 vs 創(chuàng)造性

當(dāng)某個(gè)設(shè)計(jì)元素在其他地方很常見的時(shí)候,它就已經(jīng)形成了特定的 UI 模式,盡量不要去修改它,哪怕是很富有創(chuàng)意的方式。當(dāng)你將這種約定俗成的元素修改成其他樣子的時(shí)候,用戶需要花費(fèi)比平時(shí)更長的時(shí)間來判斷它究竟是什么。這種認(rèn)知負(fù)荷將會(huì)影響整個(gè)網(wǎng)站的使用效率和轉(zhuǎn)化率。比如漢堡圖標(biāo),比如網(wǎng)站登錄入口的位置(右上角)。沒有必要在這種地方重新「標(biāo)準(zhǔn)化」。

對(duì)于鏈接、導(dǎo)航、布局這樣基本的元素,應(yīng)該始終優(yōu)先考慮其可用性,在此基礎(chǔ)上再發(fā)揮創(chuàng)意。

雖然非傳統(tǒng)的設(shè)計(jì)很酷,但是它的可用性問題同樣很大。創(chuàng)造性的設(shè)計(jì)同樣是需要控制其程度和平衡,如果非要打破常規(guī),盡量控制好程度,并且一次最多打破一條規(guī)則,不能更多。

5. 了解你的用戶

在開始創(chuàng)建網(wǎng)站和 APP 之前,你應(yīng)該對(duì)于你的目標(biāo)客戶群體有足夠清晰的了解,這樣才能更好地為他們來設(shè)計(jì)界面。

一旦你清楚地了解了你的用戶,就能了解他們的需求和愿望,并且設(shè)計(jì)出符合他們預(yù)期的界面和體驗(yàn)。這個(gè)時(shí)候,你的競(jìng)爭(zhēng)對(duì)手能夠?yàn)槟闾峁╈`感和想法。注意對(duì)方的色彩,布局,風(fēng)格和功能。

盡可能使用你的受眾已經(jīng)熟悉的 UI 模式和 UI 元素,能夠更快讓他們上手。在此基礎(chǔ)上,適當(dāng)?shù)剡M(jìn)行差異化的設(shè)計(jì),這樣效率更高。

當(dāng)你確定了受眾之后,記得盡量把他們的反饋納入到你的設(shè)計(jì)當(dāng)中。

6. 視覺層次很重要

當(dāng)界面中優(yōu)先放置最重要的元素,通過視覺層次來凸顯它們,確保用戶能夠更快注意到它們。在設(shè)計(jì)中,有很多方法能夠凸顯內(nèi)容,但是最有效的方法始終是讓它們更大更醒目。

視覺層次的構(gòu)建能夠讓網(wǎng)站內(nèi)容更加清晰,也更加富有功能性。

7. 控制用戶體驗(yàn)的質(zhì)量

Peter Moville 在 usability.gov 這個(gè)網(wǎng)站上列舉出了用戶體驗(yàn)設(shè)計(jì)的關(guān)鍵因素,它的核心價(jià)值在于通過不同的維度更好地掌控用戶體驗(yàn)的質(zhì)量:

  • 有用:內(nèi)容應(yīng)該是原創(chuàng)的且滿足需求。
  • 可用:網(wǎng)站的內(nèi)容應(yīng)該很容易被找到。
  • 可取:設(shè)計(jì)元素應(yīng)該貼合情感且具備可欣賞性。
  • 可發(fā)現(xiàn):內(nèi)容容易被定位,被找到,并且可導(dǎo)航。
  • 無障礙:設(shè)計(jì)要為有障礙的用戶進(jìn)行定制。
  • 可信:網(wǎng)站內(nèi)容應(yīng)該有權(quán)威性,且值得被相信。

除了上面的維度之外,還有一些值得參考的 UX設(shè)計(jì)的質(zhì)量衡量標(biāo)準(zhǔn):

  • 符合上下文:有明確的路徑,符合上下文邏輯。
  • 人性化:值得信賴,平易近人,透明,并不機(jī)械。
  • 可發(fā)現(xiàn)性:用戶在第一次訪問的時(shí)候就能夠順暢的完成任務(wù)。
  • 可學(xué)習(xí)性:確保交互足夠簡(jiǎn)單,并且能夠無縫地相應(yīng)移動(dòng)端界面,確保用戶在隨后的訪問過程中達(dá)成目標(biāo)。
  • :確保用戶能夠快速輕松地完成各種任務(wù)。
  • 令人愉悅:確保產(chǎn)品能夠滿足用戶需求,還能夠和用戶產(chǎn)生情感聯(lián)系。
  • 表現(xiàn)良好:當(dāng)用戶與之交互的時(shí)候表現(xiàn)良好。

結(jié)語

用戶體驗(yàn)設(shè)計(jì)的目標(biāo)不僅僅是讓產(chǎn)品本身更優(yōu)秀,更重要的是從情感層面上和用戶產(chǎn)生關(guān)聯(lián)。有界面而沒有體驗(yàn),這樣的產(chǎn)品在今天的競(jìng)爭(zhēng)中是活不下去的。

篩選功能設(shè)計(jì)總結(jié)

濤濤

從用戶的操作流程上來說,如果用戶想使用一個(gè)功能,必然首先要發(fā)現(xiàn)它。如果連功能入口都找不到,后續(xù)的用戶體驗(yàn)也無從談起。而篩選功能可以幫助用戶對(duì)功能信息進(jìn)行快速的定位,縮短用戶的查找時(shí)間,這篇文章我就來跟大家聊一下篩選功能。


 三種常見基本樣式


首先要明確一個(gè)概念,篩選功能并不是普通的單一功能項(xiàng),它和導(dǎo)航一樣是一個(gè)體系。既然是體系,必然有最基本的組成部分。篩選功能(體系)常見的樣式有以下三種:tab類,(下拉)列表類,標(biāo)簽類。這三種樣式是篩選功能最基本的組成元素,不管你產(chǎn)品的篩選功能做的有多么復(fù)雜,都可以看成是這三種基本元素的不同組合形式。


Tab


Tab是最常見的篩選樣式,一個(gè)tab項(xiàng)代表一個(gè)篩選維度,直接平鋪的展示出來,用戶很容易感知到。

Image title


根據(jù)方向我們可以將tab分為橫向欄tab側(cè)向欄tab。橫向欄tab可展示2-5個(gè)選項(xiàng),如果超過了5個(gè),那么就需要用戶滑動(dòng)才能看到。所以當(dāng)篩選維度過多的時(shí)候,我們可以考慮使用側(cè)向欄tab,京東商品分類這里用的就是典型的側(cè)向欄tab,我數(shù)了一下總共40個(gè)選項(xiàng),這里如果使用橫向欄tab用戶可能要側(cè)向滑動(dòng)8屏,操作成本過高。

Image title


當(dāng)然當(dāng)選項(xiàng)過多的時(shí)候,我們還有一個(gè)法子,就是使用彈框,用戶點(diǎn)擊后可以看到全部的選項(xiàng)。

Image title



列表式


列表式也可稱之為list,其特點(diǎn)就是占用空間小。因?yàn)樗梢詫⑦x項(xiàng)隱藏起來,用戶需要點(diǎn)擊才能看到所有的選項(xiàng),因此在有限的空間里可以展示更多的篩選維度。礙于手機(jī)屏幕尺寸的限制,列表式篩選現(xiàn)在應(yīng)用的越來越普遍。

Image title

列表式篩選的樣式其實(shí)有很多。可以做成popover類,actionsheet類,activityview類。這些樣式很難去說誰好誰壞,這里我就只是列舉出來,具體用哪種樣式,大家自己來判斷。


標(biāo)簽式


對(duì)于標(biāo)簽式,很難進(jìn)行準(zhǔn)確的定義,我更傾向于將單選按鈕,多選按鈕,switch等統(tǒng)稱為標(biāo)簽式,標(biāo)簽式只能針對(duì)單一條件進(jìn)行篩選,這點(diǎn)和tab很類似。標(biāo)簽式很少單獨(dú)出現(xiàn),多數(shù)情況下都是與tab和列表式結(jié)伴而行。

Image title


在淘寶里用戶可以點(diǎn)擊視圖icon來切換視圖模式,這就是典型的標(biāo)簽式篩選。

 

當(dāng)然以上三種只是最常見的篩選元素,其余的還有輸入框,滑塊,地區(qū)/日期選擇器等主要用于信息錄入的組件。 


常見的篩選體系 


了解了最基本的元素,接下來看一些比較復(fù)雜的篩選樣式。上面我也提到了任何產(chǎn)品的篩選體系都可以看成是這三種基本元素的不同組合形式。為了讓大家更好的理解,我一一舉例來說明:


tab+tab:


tab之所以受到青睞,是因?yàn)槠漭^低的學(xué)習(xí)成本。每一個(gè)tab代表一個(gè)類別,而且是直接展示給用戶看的,所以很多產(chǎn)品的篩選功能都會(huì)優(yōu)先考慮使用tab。即使功能結(jié)構(gòu)復(fù)雜到無法用一層tab來完成篩選任務(wù),設(shè)計(jì)師也會(huì)考慮使用雙層tab樣式(tab+tab)的樣式。(PS.當(dāng)然下圖應(yīng)該算是segment control+tab)

Image title



tab+列表式:


當(dāng)產(chǎn)品不斷的發(fā)展,功能結(jié)構(gòu)愈發(fā)的復(fù)雜,過于扁平的tab已經(jīng)無法滿足篩選的需求。以看電影這個(gè)場(chǎng)景為例,用戶的需求是找到合適的影片和電影院。對(duì)于用戶來說,衡量一家電影院會(huì)從地址、票價(jià)、品牌和特色服務(wù)(支持改簽、IMAX廳等)這四個(gè)角度入手。這些篩選需求很難通過tab來完成,我們需要列表式的協(xié)助。

Image title



tab+列表式+標(biāo)簽:


當(dāng)產(chǎn)品的功能結(jié)構(gòu)進(jìn)一步復(fù)雜,這也給篩選功能增加了新的難題。以boss直聘來說,這里的篩選項(xiàng)主要分為四個(gè):排序方式(推薦/)、工作地點(diǎn)、公司規(guī)模、崗位要求。其中后三個(gè)篩選項(xiàng)包含大量的條件,特別工作地點(diǎn),需要進(jìn)一步定位到街道或地鐵站。對(duì)于這種多維度,深層級(jí)的篩選需求我們可以使用tab+列表式+標(biāo)簽的樣式。

Image title


這里我選擇boss直聘的另一個(gè)原因在于它的tab數(shù)用戶是可以自己增減的,每一個(gè)tab代表一條求職意向,最多可以添加3條求職意向。

Image title



篩選體系的容器


篩選體系是由眾多篩選項(xiàng)組成的,這些篩選項(xiàng)需要一個(gè)“容器”來承載。上面說的boss直聘用的是下拉列表,這種樣式其實(shí)還比較簡(jiǎn)單的,我們可以看一些功能更加復(fù)雜一點(diǎn)的產(chǎn)品,比如各大電商平臺(tái)。這里使用的是抽屜式篩選框,說它是抽屜式,因?yàn)樗閷弦粯樱玫臅r(shí)候可以拉出來,不用的時(shí)候可以關(guān)起來,節(jié)省了空間。從某個(gè)角度來說,我們可以把抽屜式看成列表式的一個(gè)放大版。抽屜式篩選框可以容納更多的篩選條件,像我在上面提到的輸入框,多選按鈕都可以在這里使用。

Image title


從底部彈出的動(dòng)作欄也比較常見,這里使用了滑塊和單選按鈕。

Image title


Airbnb的篩選功能以浮層為載體,還使用比較少見的switch和stepper。

Image title


當(dāng)然Airbnb篩選功能最大的亮點(diǎn)在于可以向用戶即時(shí)反饋篩選結(jié)果的數(shù)目,用戶不太可能會(huì)進(jìn)入搜索結(jié)果為0的空頁面,避免無效操作。


以上說的篩選體系都比較傳統(tǒng),大部分都是基于對(duì)現(xiàn)有結(jié)果進(jìn)行篩選,其實(shí)我們可以對(duì)篩選功能進(jìn)行前置。例如,我們可以在用戶進(jìn)行搜索之前就對(duì)結(jié)果進(jìn)行篩選。

Image title


甚至在新用戶第一次使用產(chǎn)品的時(shí)候,可以讓用戶填寫一些個(gè)人信息以便進(jìn)行個(gè)性化推送。

Image title


篩選功能的存在意義在于幫助用戶對(duì)功能信息進(jìn)行快速的定位,對(duì)篩選功能進(jìn)行適度的前置可以簡(jiǎn)化用戶的操作流程,同樣可以達(dá)到節(jié)省用戶時(shí)間的目的。

【產(chǎn)品即場(chǎng)景】體驗(yàn)先行

濤濤

產(chǎn)品即場(chǎng)景,體驗(yàn)又貫穿整個(gè)產(chǎn)品~孰重孰輕早已分不清

Image title

產(chǎn)品即場(chǎng)景,而場(chǎng)景化核心要素之一的“體驗(yàn)”,是其中最重要的一項(xiàng)。

本文從體驗(yàn)出發(fā),結(jié)合AARRR(用戶增長)模型進(jìn)行闡述,其中我認(rèn)為該模型的使用必須是在產(chǎn)品搭建的場(chǎng)景下才能運(yùn)作的。而其中涉及每一步的良好體驗(yàn)剛好又反哺場(chǎng)景的完善。

從獲取-激活-留存-轉(zhuǎn)化-傳播每一個(gè)步驟中都存在內(nèi)部因素和外部因素。本文只講內(nèi)部因素,產(chǎn)品從最開始的外部獲客,轉(zhuǎn)向產(chǎn)品內(nèi)部的使用體驗(yàn),再轉(zhuǎn)向外部傳播的這么一個(gè)過程。

Image title

文章不是教案,更不是真理。希望大家?guī)е械难酃馊タ创恳黄恼隆.吘顾急婢癫攀切纬瑟?dú)立思維的法寶。由于文章較長,我會(huì)分成上下兩部分發(fā)布,進(jìn)入正文:


獲取(ACQUISITION)分為三個(gè)部分:


一:自然流量的獲取


自然流量的獲取,我們能干涉其中的體驗(yàn)非常少,只能打磨產(chǎn)品本身。但是自然流入的用戶一定是基于以下幾個(gè)點(diǎn)中的其中一個(gè)或多個(gè)。我們或許可以干涉體驗(yàn)前~


1.某個(gè)社會(huì)現(xiàn)象、熱點(diǎn)所引發(fā)的相關(guān)功能性需求(例如前不久滴滴司機(jī)殺害空姐事件,引發(fā)多少芳齡少女的恐慌。提高了強(qiáng)烈的安全意識(shí),這時(shí)候你會(huì)發(fā)現(xiàn)App Store里面一款app殺了出來“怕怕”(有興趣的朋友自行下載體驗(yàn)),正是這個(gè)社會(huì)熱點(diǎn)現(xiàn)象引發(fā)的自然流量暴增。當(dāng)然也不排除產(chǎn)品借這個(gè)熱點(diǎn)營銷自己的產(chǎn)品)


2.某個(gè)痛點(diǎn)確確實(shí)實(shí)需要解決(當(dāng)某類用戶存在某個(gè)痛點(diǎn)時(shí),會(huì)自己通過搜索或者同類產(chǎn)品對(duì)比選擇一款產(chǎn)品進(jìn)行使用,如果你的產(chǎn)品剛好能幫助使用者解決痛點(diǎn),那么你成功吸引了用戶。)


3.純粹進(jìn)行產(chǎn)品的體驗(yàn)(產(chǎn)品發(fā)燒友、同類競(jìng)品的體驗(yàn)人員、無意中下載的等)。我們稱為無效流量,因?yàn)檫@部分用戶一般是不太可能成為產(chǎn)品的忠實(shí)粉絲的。他沒有明確的目的、沒有明確要解決的痛點(diǎn)。


二:運(yùn)營推廣的獲取


運(yùn)營推廣這個(gè)名詞在互聯(lián)網(wǎng)誕生之前就已經(jīng)存在了。只是說原來傳統(tǒng)的營銷手段即產(chǎn)品-價(jià)格-渠道-促銷開始逐漸失效。轉(zhuǎn)而變?yōu)閳?chǎng)景化的運(yùn)營推廣。將推廣落實(shí)到具體的小場(chǎng)景中。


1.線上推廣

其中線上推廣包含線上營銷活動(dòng)(營銷活動(dòng)又分為已有話題進(jìn)行營銷【可以選擇融入當(dāng)前的熱點(diǎn)話題類似節(jié)日、娛樂圈大事件等】&【提供話題痛點(diǎn)解決方案進(jìn)行營銷】和制造話題營銷【創(chuàng)造業(yè)內(nèi)的話題】【通過深度用戶進(jìn)行制造話題】、優(yōu)惠活動(dòng)(包括邀請(qǐng)好友得好禮、會(huì)員優(yōu)惠、某個(gè)節(jié)日優(yōu)惠等)。線上推廣無非就是通過網(wǎng)絡(luò)搭建虛擬場(chǎng)景,通過場(chǎng)景邊界的不斷延伸,覆蓋吸引更多的用戶參與進(jìn)來。


2.線下推廣

線下推廣包含地推(地推不可避免的會(huì)帶來2部分的人群:被地推活動(dòng)中的獎(jiǎng)品吸引的人;確實(shí)被產(chǎn)品的介紹所吸引的人)、海報(bào)&代言(同樣會(huì)有2部分人群:被明星效應(yīng)所吸引的人;被產(chǎn)品介紹所吸引的人)、門店的互相導(dǎo)流合作。線下推廣效率遠(yuǎn)遠(yuǎn)沒有線上推廣來的快。但是對(duì)于需要線下場(chǎng)景的產(chǎn)品來說,這又是必不可少的。


三:社群自傳播


通過單點(diǎn)擊破,這就需要運(yùn)營團(tuán)隊(duì)有很好的洞察能力,找到符合產(chǎn)品調(diào)性的社群,通過事件引爆該社群或者社區(qū),讓社群成為你產(chǎn)品的擁護(hù)者和傳播者。


1.通過老帶新的模式進(jìn)行獲取用戶

當(dāng)產(chǎn)品與老用戶之間建立很好的紐帶關(guān)系后,老用戶自然會(huì)以個(gè)人為中心,向外幫你宣傳產(chǎn)品。


2.引爆社群

通過各類社區(qū),找到符合你產(chǎn)品的目標(biāo)人群。通過對(duì)該社群的研究,運(yùn)用社群內(nèi)部語言或者表達(dá),調(diào)動(dòng)整個(gè)社群幫你發(fā)力。有點(diǎn)及面的擴(kuò)散,稱之為“氣球理論(很細(xì)的一根針就能戳爆氣球)”這同樣是能引爆傳播性特別重要的一點(diǎn)。


3.參與感(社會(huì)關(guān)系綁定)

當(dāng)你周圍的人都在轉(zhuǎn)發(fā)或者都在使用的時(shí)候,如果你不了解或不使用的話,會(huì)引起個(gè)體的孤獨(dú)感。也就是說“他們都在玩,我不玩就落伍了”,但是這種情況在產(chǎn)品推廣的前期一般不太會(huì)出現(xiàn)。當(dāng)傳播勢(shì)能達(dá)到一定程度的時(shí)候,才會(huì)出現(xiàn)刷爆朋友圈!


激活(ACTIVATION)分為二個(gè)部分:


當(dāng)用戶從外部導(dǎo)流進(jìn)產(chǎn)品后,這時(shí)用戶的去或留都跟產(chǎn)品&業(yè)務(wù)有關(guān)。如何讓用戶在進(jìn)入產(chǎn)品后自然而然的進(jìn)行使用也就是防呆原則。對(duì),通過引導(dǎo)或者吸引使用者進(jìn)行下一步操作。(打個(gè)比方,你去一家陌生的餐廳,進(jìn)去后沒任何人招呼你,沒人告訴你要去選位置或者點(diǎn)菜,是不是有不知所措的感覺,我想你很快就會(huì)另尋他家吧)


一:進(jìn)入產(chǎn)品后的操作引導(dǎo)


1.視覺引導(dǎo)(包括頁面元素優(yōu)先級(jí)、頁面元素突出強(qiáng)弱進(jìn)行視覺上的引導(dǎo),很常見的就是:在你第一次使用某個(gè)產(chǎn)品時(shí),會(huì)引導(dǎo)使用者進(jìn)行第一步第二步的操作,降低用戶對(duì)產(chǎn)品的陌生感)


2.動(dòng)效引導(dǎo)(通過頁面浮層的形式教育用戶如何進(jìn)行操作,這也是在產(chǎn)品設(shè)計(jì)中,對(duì)新用戶的一種引導(dǎo)方式)說到底就是為了消除用戶對(duì)新鮮事物的陌生感和手足無措感。


二:產(chǎn)品本身是否能激起用戶的探索欲


當(dāng)然這個(gè)問題本身是建立在是否能真正的幫助用戶解決某些方面的痛點(diǎn)。否則再強(qiáng)的探索欲,也跟你產(chǎn)品本身沒有關(guān)系。如何激起用戶的探索欲?


1.產(chǎn)品整體視覺表現(xiàn)、使用流程的體驗(yàn)是不是夠吸引人,是不是有屬于產(chǎn)品本身吸引人的點(diǎn)。(當(dāng)年的path效果,直接將它送上全民熱潮之巔)


2.產(chǎn)品是否對(duì)使用者產(chǎn)生持續(xù)的吸引能力,產(chǎn)品前期只有不斷的通過各種方式刺激用戶。(產(chǎn)品體驗(yàn)優(yōu)化、活動(dòng)力度、宣傳方式、讓惠讓利等)但需要注意的是:過度營銷不等于有效刺激。


3.產(chǎn)品的任務(wù)流程設(shè)置是否合理,正常情況都是由簡(jiǎn)單到復(fù)雜的程度設(shè)置任務(wù),由于用戶的沉默成本,當(dāng)完成一定任務(wù)后,就會(huì)沉淀下來慢慢成為產(chǎn)品的忠實(shí)用戶。(摩拜產(chǎn)品是先讓用戶填寫個(gè)人信息,最后才提示充值押金,站在使用者的角度來看,已經(jīng)把個(gè)人信息都出賣給平臺(tái)了,還在乎那200多塊錢嗎?不然你讓他把流程倒過來試試,先充錢,再填信息。保證沒多少人會(huì)用)。流程設(shè)置就像鉤子一樣,慢慢慢慢的把用戶勾住。


上半部分先到這里,下半部分會(huì)從“留存”“轉(zhuǎn)化”“傳播”角度進(jìn)行展開~


多數(shù)人能夠成為很厲害的設(shè)計(jì)師,很厲害的產(chǎn)品經(jīng)理。凡事都會(huì)有所謂的套路,當(dāng)你熟知了解某個(gè)行業(yè),或者多個(gè)行業(yè)的套路時(shí)。你會(huì)站在更高的視角看待問題,同樣你會(huì)走的比人家更遠(yuǎn)更快。所謂的套路,是基于個(gè)人而言,可能你有個(gè)很好的導(dǎo)師能夠告訴你以往的經(jīng)驗(yàn)。但是我更認(rèn)為,套路是通過一步步看似笨拙的努力不斷總結(jié)不斷歸納

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

博博


聽云 2016-04-18 10:49:28

早在1995年,尼爾森的十大可用性原則就已問世,雖然當(dāng)時(shí)針對(duì)的是web交互設(shè)計(jì),但易用性對(duì)任何擁有用戶界面的東西來說都適用。不管是網(wǎng)站,程序,移動(dòng)頁面或其他,具體的規(guī)則可能不同,但總的原則都源自人類上萬年進(jìn)化所形成的思維方式。

1、可見性原則

用戶在網(wǎng)頁上的任何操作,不論是單擊、滾動(dòng)還是按下鍵盤,頁面應(yīng)即時(shí)給出反饋。“即時(shí)”是指頁面響應(yīng)時(shí)間小于用戶能忍受的等待時(shí)間。保證頁面內(nèi)容的可見性、狀態(tài)的可見性、狀態(tài)變化的可見性。

在用戶與應(yīng)用的交互過程中,系統(tǒng)需要即時(shí)的給予用戶反饋。如果用戶在操作過程中,頁面出現(xiàn)一片空白,不清楚應(yīng)用是否給予了用戶反饋,這時(shí)候用戶就會(huì)感到焦慮、恐慌,這些都是不符合可見原則的。看起來非常基礎(chǔ)的要求,其實(shí)很多產(chǎn)品都做不到或者沒做好。

有一部分App,在弱網(wǎng)情況下信息未加載完成時(shí),顯示空白頁,無法給用戶任何信息。

現(xiàn)在來看一款可見性做的比較好的App

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

如上圖,關(guān)掉WIFI在2.5G的網(wǎng)絡(luò)情況下首次進(jìn)入這個(gè)App,主頁面內(nèi)容雖然遲遲加載不出內(nèi)容,但是有一個(gè)提示能夠告訴用戶,當(dāng)前正在做什么,是怎樣的進(jìn)度。并且“內(nèi)容煉成中”這句有二次元味道的提示,使App的整體感非常好,而且圖片一定程度上分散了注意力,使用戶對(duì)加載的時(shí)間不那么的敏感,為弱網(wǎng)環(huán)境下內(nèi)容的加載爭(zhēng)取了時(shí)間。

2、場(chǎng)景貼切原則

網(wǎng)頁的一切表現(xiàn)和表述,應(yīng)該盡可能貼近用戶所在的環(huán)境(年齡、學(xué)歷、文化、時(shí)代背景)。此外,還應(yīng)該使用易懂和約定俗成的表達(dá)。

在做產(chǎn)品設(shè)計(jì)的時(shí)候,主要考慮到的是用戶使用場(chǎng)景。產(chǎn)品的功能要貼近目標(biāo)用戶的真實(shí)使用環(huán)境,這一點(diǎn)非常重要。用兩款導(dǎo)航類產(chǎn)品舉例:

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

還原一下導(dǎo)航時(shí)部分使用場(chǎng)景,比如在一個(gè)陌生的城市開車,需要使用導(dǎo)航,輸入目的地,大部分的情況下手機(jī)不是手持狀態(tài),觀察的模式也是以眼睛掃描為主。

在這個(gè)頁面上的設(shè)計(jì),大部分的信息對(duì)我第一訴求導(dǎo)航并沒有直接的幫助,如果要輸入一個(gè)目的地,需要用尋找的方式去使用它。輸入框非常窄,不好找到,使用場(chǎng)景下導(dǎo)航并不貼切。

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

相比之下看到錘子駕駛的界面,作為一款導(dǎo)航類的應(yīng)用,它教科書式的講解了什么是場(chǎng)景貼切原則。在開車的時(shí)候只要用眼睛掃一下手機(jī)屏幕就可以知道要導(dǎo)航的功能位置,并且可點(diǎn)擊區(qū)域巨大,非常容易選中。

選中導(dǎo)航后優(yōu)先用語音搜索目的地,這樣可以減少對(duì)駕駛的影響。下方巨大的List也讓用戶比較容易的去點(diǎn)擊最近去過的地方。這樣就非常符合用戶在駕駛中,或者說非手持狀態(tài)的使用習(xí)慣。

3、可控原則

為了避免用戶的誤用和誤擊,網(wǎng)頁應(yīng)提供撤銷和重做功能。用戶對(duì)當(dāng)前的狀況很好地控制了解和掌控,并且有足夠的自由。

掌握、可控、自由是人類安全感的重要來源,如果使用一款產(chǎn)品的時(shí)候提心吊膽的,生怕點(diǎn)擊了某個(gè)按鈕就發(fā)生了錯(cuò)誤,很難相信這樣的一款A(yù)pp有好的用戶體驗(yàn)。有一個(gè)用戶交互的金句:操作前可預(yù)知、操作中可有反饋、操作后可撤銷。

像iPhone 的出現(xiàn),為可控原則做了最好的注解,Home鍵也是教科書式的可控原則的體現(xiàn)。無論你在哪里,遇到了什么問題,一鍵回到桌面,一切重新開始。

4、一致性原則:

同一用語、功能、操作保持一致。用戶需要在同一個(gè)產(chǎn)品中,接受同一套規(guī)范、邏輯。

這樣做的一個(gè)好處是可以讓用戶對(duì)App有一個(gè)整體的感知,在相同的背景下做相同的操作會(huì)有可預(yù)期的結(jié)果,這樣大大的降低了用戶的學(xué)習(xí)成本。如下圖這個(gè)出行類App,點(diǎn)擊了旅行休閑,結(jié)果跳轉(zhuǎn)了一個(gè)莫名其妙的頁面。內(nèi)容與旅行沒有關(guān)系,違背了一致性。

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

5、放錯(cuò)原則

通過網(wǎng)頁的設(shè)計(jì)、重組或特別提醒或安排,防止用戶出錯(cuò)。

這方面很多成熟的實(shí)體產(chǎn)品都比較好。App中這種防錯(cuò)設(shè)計(jì)隨處可見,比如訂票軟件,已經(jīng)過去的日期顯示為灰色,以防訂錯(cuò)機(jī)票的錯(cuò)誤。

6、協(xié)助用戶記憶原則

在需要記憶某些信息時(shí),產(chǎn)品功能上要幫助用戶記憶。盡可能減少用戶回憶負(fù)擔(dān),把需要記憶的內(nèi)容擺上臺(tái)面。

7、靈活的原則

中級(jí)用戶的數(shù)量遠(yuǎn)高于初級(jí)和高級(jí)用戶數(shù)。為大多數(shù)用戶設(shè)計(jì),不要低估,也不可輕視,保持靈活。

移動(dòng)端的用戶大多數(shù)不是專家級(jí)用戶,也不是小白用戶。對(duì)頁面的設(shè)計(jì)要更側(cè)重于滿足對(duì)大多數(shù)用戶的需求,不宜復(fù)雜,也不宜過于簡(jiǎn)單無提示。

8、易掃原則

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動(dòng)作不是讀,不是看,而是掃。易掃,意味著突出重點(diǎn),弱化和剔除無關(guān)信息。

在時(shí)候用一款陌生產(chǎn)品的時(shí)候,用戶絕大多數(shù)是使用掃描的方式而不是閱讀的方式來理解內(nèi)容。如果想讓用戶快速發(fā)現(xiàn)想要的信息,就一定要保證頁面足夠清晰,簡(jiǎn)約。如果有較多的信息需要展示,那么一定要分清主次,要求界面足夠簡(jiǎn)單,突出重點(diǎn),內(nèi)容易讀。

9、容錯(cuò)性

幫助用戶從錯(cuò)誤中恢復(fù),將損失降到。如果無法自動(dòng)挽回,則提供詳盡的說明文字和指導(dǎo)方向,而非代碼,比如404。

例如各類應(yīng)用中要恢復(fù)出廠設(shè)置,是一個(gè)比較重大的操作

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

所以在恢復(fù)出場(chǎng)設(shè)置前需要輸入解鎖圖案。這就是容錯(cuò)性的一個(gè)體現(xiàn)。對(duì)于用戶正在進(jìn)行的操作有著明顯的提示,避免了誤按誤點(diǎn)操作造成的損失。

10、人性化幫助原則

幫助性提示最好的方式是:1、無需提示2、一次性提示3、常駐提示4、幫助文檔。

一個(gè)系統(tǒng)或者是產(chǎn)品,如果不需要文檔或是提示是最好的,一切都是自然而然發(fā)生的。但是在很多情況下,需要對(duì)內(nèi)容做一個(gè)提示或者幫助,來便于用戶更好的使用App。

幫助和提示在哪里用的比較多呢?設(shè)置。在設(shè)置頁面里,可以看到無線網(wǎng)絡(luò)、定位服務(wù)等是否打開,而中間遇到比較復(fù)雜的操作,用戶對(duì)此一知半解,這時(shí)候就需要有相關(guān)的幫助提示。

現(xiàn)在幾乎所有的移動(dòng)端交互設(shè)計(jì)全部基于用戶體驗(yàn),而在定位準(zhǔn)、細(xì)分市場(chǎng)準(zhǔn),遵守了尼爾森十大原則的情況下,還有一些問題是每個(gè)產(chǎn)品研發(fā)團(tuán)隊(duì)不能避免且無法解決的。

在每個(gè)產(chǎn)品的不同生命周期中,側(cè)重點(diǎn)也會(huì)不同。初期注重種子用戶的培養(yǎng)與新功能的增加。到了成長期會(huì)經(jīng)歷版本的頻繁發(fā)布,系統(tǒng)不夠穩(wěn)定。這時(shí)候就需要用到更加專業(yè)的第三方工具去幫助應(yīng)用發(fā)布后的性能問題進(jìn)行管理。

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

在產(chǎn)品真正上線后可以及時(shí)進(jìn)行崩潰分析、網(wǎng)絡(luò)請(qǐng)求與錯(cuò)誤分析,交互分析等等通過App的總體性能評(píng)分與在同行業(yè)競(jìng)爭(zhēng)中所處的位置來不斷迭代產(chǎn)品,改進(jìn)用戶體驗(yàn)。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

博博


企服盒 2018-04-08 10:52:48

本篇講述的是feedback反饋類;反饋就是用戶做了某項(xiàng)操作之后,系統(tǒng)給用戶的一個(gè)響應(yīng)。這個(gè)響應(yīng)根據(jù)場(chǎng)景的不同會(huì)有不同的響應(yīng)形式和不同作用。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

設(shè)計(jì)規(guī)范中最重要的部分就是組件規(guī)范了,制定組件的規(guī)范有哪些好處呢?

  1. 簡(jiǎn)單:熟悉了解組件的用法之后,在做界面設(shè)計(jì)時(shí),只需要合理運(yùn)用組件就可以快速搭建web端界面,無差錯(cuò)。由于有成套的組件規(guī)范,所以在交互設(shè)計(jì)和視覺設(shè)計(jì)過程中無需每次都重復(fù)勞動(dòng)。

  2. 統(tǒng)一用戶體驗(yàn):由于使用了統(tǒng)一的組件規(guī)范,所以保證了的視覺和交互設(shè)計(jì)統(tǒng)一性,保證整體的用戶體驗(yàn)性。

  3. 提升設(shè)計(jì)綜合能力:由于減少了做組件重復(fù)性勞動(dòng),交互設(shè)計(jì)師/PM 可以將更多時(shí)間和精力放在討論業(yè)務(wù)、設(shè)計(jì)方法、設(shè)計(jì)思維、定義產(chǎn)品等綜合能力方面。從而驅(qū)動(dòng)業(yè)務(wù)創(chuàng)新。

根據(jù)組件的用途,可以分為六大類:Feedback 反饋、from 表單、basic 基礎(chǔ)、data 數(shù)據(jù) 、navigation 導(dǎo)航、other 其他。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

本篇講述的是feedback反饋類;反饋就是用戶做了某項(xiàng)操作之后,系統(tǒng)給用戶的一個(gè)響應(yīng)。這個(gè)響應(yīng)根據(jù)場(chǎng)景的不同會(huì)有不同的響應(yīng)形式和不同作用。

toast

定義:用戶產(chǎn)生操作,出現(xiàn)toast提示,一般2-3s消失;通過toast中的提示語告知用戶需要了解的信息。讓用戶的行為在使用過程中得到反饋和幫助。

使用場(chǎng)景:

  1. 可提供成功、警告或錯(cuò)誤等反饋信息。

  2. 頂部居中顯示并自動(dòng)消失,是一種不打斷用戶操作的輕量級(jí)提示方式。

例如簡(jiǎn)書在沒有上傳專題封面時(shí)就點(diǎn)擊創(chuàng)建專題按鈕,出現(xiàn)toast提示,提示用戶要先上傳專題封面才能創(chuàng)建專題。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

toast的消息提示分類一共有三種類型:成功類、失敗類、常規(guī)類。

組件樣式有兩種:可以點(diǎn)擊操作使其消失、不可點(diǎn)擊操作使其消失。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

alert 警示提示

定義:當(dāng)用戶進(jìn)行某種操作時(shí),網(wǎng)站會(huì)出現(xiàn)對(duì)應(yīng)的警告信息提示用戶,該提示信息的狀態(tài)不會(huì)主動(dòng)消失。

使用場(chǎng)景:

  1. 當(dāng)某個(gè)頁面需要向用戶顯示警告的信息時(shí)。

  2. 非浮層的靜態(tài)展現(xiàn)形式,始終展現(xiàn),不會(huì)自動(dòng)消失,有的組件用戶可以點(diǎn)擊關(guān)閉。

例如淘寶購物車,刪除之后,會(huì)出現(xiàn)alert警示提示,淘寶的例子屬于alert的變種,用戶可以點(diǎn)擊“撤銷本次刪除 ”進(jìn)行還原之前的毀滅性操作。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

alert警示提示的消息分類一共有三種類型:成功類、失敗類、常規(guī)類。當(dāng)然也可以不含有icon操作,含有icon操作的話警示性會(huì)更強(qiáng)。

alert警示組件樣式有兩種:帶有刪除操作,不帶有刪除操作。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

dialog對(duì)話框

定義:用于提示用戶當(dāng)前操作,或是完成某個(gè)任務(wù)時(shí)需要的一些其他額外的信息。對(duì)話框可以用確定/取消的簡(jiǎn)單的應(yīng)答模式,也可以是自定義復(fù)雜的模式,例如表單的填寫。

使用場(chǎng)景:

  1. 用戶在進(jìn)行重要操作的時(shí),需要進(jìn)行二次確認(rèn)。

  2. 用于重要的反饋提示,讓用戶知道信息提示。

  3. 承載少量的表單填寫類,減少頁面的跳轉(zhuǎn)。

windows系統(tǒng)的確定按鈕一般在左邊,而Mac OS的確定一般在右邊。因?yàn)檫@個(gè)原因,導(dǎo)致我們平時(shí)看到的確定有時(shí)候在左邊,有時(shí)候在右邊。

微博和微信公眾號(hào)后臺(tái)的的對(duì)話框,確定在左邊,而淘寶的對(duì)話框在右邊。微信公眾號(hào)的對(duì)話框是小浮層彈窗,避免了遮罩出現(xiàn),同時(shí)對(duì)話框也出現(xiàn)在操作按鈕的附近,對(duì)用戶的干擾性也是最弱的。

dialog對(duì)話框,有三種常見的使用場(chǎng)景。其中表單對(duì)話框、提示類、輕量級(jí)提示類、表單類樣式都是基于二次確認(rèn)類對(duì)話框樣式的改變而得到不同的樣式。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

Notification通知提醒框

定義:懸浮出現(xiàn)在網(wǎng)頁右上角,用于全局的提醒式通知。常見于服務(wù)器異常、操作失敗等

使用場(chǎng)景:

  1. 較為復(fù)雜的通知內(nèi)容。

  2. 帶有交互的通知,給出用戶下一步的行動(dòng)點(diǎn)。

  3. 系統(tǒng)主動(dòng)推送。

Notification通知提醒框出現(xiàn)在網(wǎng)頁右上角,一般4-5s消失,也可以點(diǎn)擊叉號(hào)進(jìn)行關(guān)閉。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

tooltip 文字提示

定義:簡(jiǎn)單輕量的的文字提示。

使用場(chǎng)景:

  1. 鼠標(biāo)移入則立即顯示提示,移出則立即消失,不承載復(fù)雜文本和操作。

  2. 常用于解釋操作按鈕的文字說明。

還有一種tooltip是瀏覽器自帶的,瀏覽器自帶的和本篇的tooltip的區(qū)別是:瀏覽器自帶的鼠標(biāo)移入一般2s才顯示,多用于折行打點(diǎn)的文字提示。例如簡(jiǎn)書,而本篇的tooltip鼠標(biāo)移入就出現(xiàn),切組件風(fēng)格和瀏覽器自帶完全不一樣。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

tooltip組件按照需要解釋說明的對(duì)象位置不同,可以有以下不同的樣式。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類


UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

博博


設(shè)計(jì)師檸檬 2018-04-26 15:22:57

寫在前面的話:文章內(nèi)容源于網(wǎng)絡(luò),由檸檬整理發(fā)布,如有侵權(quán)請(qǐng)聯(lián)系設(shè)計(jì)師檸檬刪除

都說UI設(shè)計(jì)是用戶看到產(chǎn)品的第一個(gè)門,從進(jìn)入手機(jī)應(yīng)用商店到下載界面再到產(chǎn)品的首頁,設(shè)計(jì)師不考慮一下真的用交互稿和產(chǎn)品直接做么,從圖標(biāo)在應(yīng)用商店的吸引展示力和用戶的軟件留存率,這些哪個(gè)不是和UI設(shè)計(jì)師有關(guān)系?

本文重點(diǎn):1.學(xué)著像產(chǎn)品經(jīng)理的角度思考

2.學(xué)著像交互設(shè)計(jì)師的角度思考

3.學(xué)著在用戶的角度思考

4.學(xué)著在自己的角度思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考


日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 99热久久精品免费精品 | 成人免费网站黄 | 超碰在线中文字幕 | 中文字幕在线日亚洲9 | 成人免费视频播放 | 亚洲男女在线 | 中文字幕人妻无码系列第三区 | 国产人妖cd在线看网站 | 色噜噜狠狠狠综合曰曰曰 | 精品女同一区二区 | 欧美视频在线观看一区 | 国产成人高清精品免费 | 日本午夜免费 | 国产黄色在线网站 | 青青草日本 | 超碰免费公开 | av黄色毛片| 中文无码久久精品 | 日韩人妻无码精品无码中文字幕 | 中文字幕日韩精品亚洲一区小树林 | 久久久精品欧美一区二区 | 欧美人与动性xxxxx杂 | 国产日韩欧美一区二区三区乱码 | 国产精品久久久久久久久久辛辛 | 性――交――性――乱 | 国产精品99久久久精品无码 | 又摸又揉又黄又爽的视频 | 北条麻妃青青久久 | 日韩精品久久久久久久 | 乱人伦中文无码视频在线观看 | 天天色天天 | 黄色免费在线网址 | 麻豆一区二区99久久久久 | 国产极品粉嫩福利姬萌白酱 | 99在线免费视频 | 亚洲欧洲美洲精品一区二区三区 | 中文字幕在线2018 | 视频国产精品 | 免费看毛片网站 | 九九九九热精品免费视频点播观看 | 中文字幕日产乱码一二三区 | 91网页在线观看 | 髙清国产性猛交xxxand | 91无限观看| 精品人妻中文无码av在线 | 国产精品网页 | 麻豆国产精品视频 | 久久久久久久久久久国产 | 欧美肥妇多毛bbw | 白嫩漂亮的美女ktv啪啪界 | 国产午夜在线视频 | 欧美亚洲三级 | 桃色网站在线观看 | 精品久久香蕉国产线看观看亚洲 | 人妻熟女一区二区aⅴ图片 亚洲成a v人片在线观看 | 上海毛片 | 少妇放荡的呻吟干柴烈火动漫 | 国产一区二区三区小说 | 嫩草视频入口 | 久久精品人妻一区二区蜜桃 | 手机av网| 精品免费一区 | 男女做爰猛烈叫床高潮的书 | 欧美美女在线 | 囯产精品久久久久久久久久妞妞 | 国产传媒资源网站 | 国产精品第60页 | 欧美日韩精品一区二区视频 | 中文字幕+乱码+中文字幕一区 | 日本少妇高潮叫床声一区二 | 成人综合网站 | 精品午夜熟女人妻视频毛片 | 97免费在线 | 日本a∨视频 | 精品国产一区二区三区四区vr | 日韩精品一区三区 | 天天舔天天舔 | 中文字幕久久网 | 污污网站在线观看 | 日日躁夜夜摸月月添添添的视频 | av一二三四区| 日日鲁夜夜如影院 | 91麻豆精品久久久久蜜臀 | 亚洲精品久久久久久久小说 | 丰满少妇猛烈进入三区视频 | 亚洲女优一区 | 欧美黄色一级片视频 | 国产福利免费在线观看 | 国产精品18久久久久vr使用方法 | 亚洲国产精品久久久久久无码 | 亚洲精品久久午夜无码一区二区 | 亚洲人在线视频 | 91免费. | 2020亚洲天堂| 亚洲一区二区 | 国产一二三区免费视频 | 91免费精品 | 中文字幕一区在线播放 | 国产三级在线播放 | www.五月婷| 少妇公车张开腿迎合巨大视频 | 国产成人欧美一区二区三区的 | 大尺度裸体日韩羞羞xxx | 97色伦图片97综合影院 | 国产精品黄在线观看免费软件 | 在线亚洲精品 | 无码一区二区波多野结衣播放搜索 | 377p粉嫩大胆色噜噜噜 | 搞黄视频在线免费观看 | 成人国产精品免费网站 | 亚洲国产成人一区二区三区 | 山东少妇露脸刺激对白在线 | 精品无码人妻一区二区三区 | 中文字幕一本一二本迫 | 久操视频在线观看 | 午夜影院日本 | 在线观看的av网站 | 免费黄色在线网址 | 中文无码热在线视频 | а天堂中文官网 | 亚洲国产精一区二区三区性色 | 亚洲偷自拍另类图片二区 | 在线视频精品免费 | 欧美高清一级 | 国产手机在线精品 | gg国产精品国内免费观看 | 97涩国一产精品久久久久久久 | 牛av| 夜夜天天干| 蜜臀av免费一区二区三区久久乐 | 不卡的av在线播放 | 么公的好大好硬好深好爽视频 | 无码ol丝袜高跟秘书在线观看 | 91午夜精品一区二区三区 | 山林妇女勾搭老头av | 无码人妻av一区二区三区波多野 | 亚洲一区日韩精品 | 亚洲精品99久久久久久 | 国产精品女主播 | 日本在线观看中文字幕 | 首尔之春在线 | 天堂资源 | 国产农村妇女在野外高潮 | 麻豆精品av | 91绿帽黑人系列一区 | 18女下面流水不遮图 | 亚洲天堂网在线观看 | 日韩中文字幕av在线 | 日本免费黄色网 | 九色porny自拍视频在线播放 | jizz日本在线观看 | 精品视频免费看 | 7777kkk亚洲综合欧美网站 | 国产精品va在线 | 国产欧美日韩久久久久 | 国产熟妇久久777777 | 免费毛片在线 | 波多野结衣亚洲一区 | 精品人伦一区二区三区四区蜜桃牛 | 亚洲精品乱码久久久久久麻豆不卡 | 欧美高h | 中文字幕av第一页 | 成年男女免费视频网站 | 国产精品无码dvd在线观看 | 日本偷偷操 | 午夜福制92视频 | 色人阁网站| 韩日av片| 国产98色在线 | 国 | 国产精品一区二区久久不卡 | 久久成人精品视频 | 国产视频在线观看网站 | 51成人做爰www免费看网站 | 亚洲 欧美 日韩 国产综合 在线 | 亚洲视频综合 | 亚洲一区二区三区av无码 | 久久久久九九九九 | 草草夜色精品国产噜噜竹菊 | 中文字幕一二三区 | 国产视频在线观看一区 | 黄色三级网站 | 亚洲一区在线免费 | 窝窝午夜理论片影院 | 亚洲精品玖玖玖av在线看 | 国产成人综合在线观看不卡 | 国产欧美精品一区二区在线播放 | 国产伦对白刺激精彩露脸 | 白嫩少妇激情无码 | 91丨porny丨露出 | 无码精品人妻一区二区三区影院 | 欧美日韩资源 | 小猪佩奇第七季中文免费版 | 少妇精品蜜桃偷拍高潮系列 | 日本一卡2卡三卡4卡免费网站 | 在线日韩精品视频 | 国产精品美女高潮视频 | 91精品啪在线观看国产商店 | 国产免费看av | 亚洲天堂日韩精品 | 99久久婷婷国产综合精品免费 | 美日韩精品 | 国产黄a三级三级三级老年人 | 涩涩的视频在线观看 | 九九精品成人免费国产片 | 国产黄色片免费在线观看 | 国产乱淫a∨片免费视频牛牛 | 中文字幕+乱码+中文字幕一区 | 国产成人无码一区二区在线观看 | 久久噜噜噜精品国产亚洲综合 | 欧美性猛交xxx乱大交3 | 国产精品久久久久久久久久免费 | 青娱乐99| 久久久黄色片 | 精品人体无码一区二区三区 | 色吧久久 | 欧美bbbbb性bbbbb视频 | 97人妻精品一区二区三区 | 黄色在线一区 | 成人在线免费观看网站 | 国产精品久久久久久免费 | 美女黄色免费网站 | 色狠狠一区 | 婷婷开心激情综合五月天 | 综合久久精品 | 亚洲系列在线 | 99婷婷| 美女热逼 | av无码久久久久久不卡网站 | 亚洲精华国产精华精华液网站 | 另类第一页 | 久久98精品久久久久久久性 | 亚洲精品色在线网站 | 久久99国产综合精品免费 | 国产真人做爰视频免费 | 日本少妇做爰xxxⅹ漫 | av在线手机版 | 97国产精品| 精品一区二区三区无码免费直播 | 吃奶摸下的激烈视频 | 久久久亚洲国产精品麻豆综合天堂 | 午夜 国产 | 岛国大片在线观看 | 国产精品久久久久久免费免熟 | 午夜一级视频 | 夜鲁夜鲁狠鲁天天在线 | 性丰满白嫩白嫩的hd124 | 国内精品久久久久影院中文字幕 | 精品视频国产香蕉尹人视频 | 免费毛片看片 | 亚洲熟妇色xxxxx欧美老妇y | 天堂久久久久久久 | 日韩丝袜另类精品av二区 | 成人小视频在线观看免费 | 中文字幕一区二区三区久久 | 日韩av午夜在线观看 | 五月天中文字幕mv在线 | 无码熟妇人妻av在线网站 | 懂色一区二区三区av片 | 爱情岛论坛永久亚洲品质 | 97人人揉人人捏人人添 | 99riav6国产情侣在线看 | 成人18夜夜网深夜福利网 | 精品人妻码一区二区三区 | 午夜福利理论片高清在线观看 | 生活片一级片 | 国产人妖视频 | 亚洲精品乱码久久久久久蜜桃图片 | 深夜视频免费在线观看 | 特级淫片aaaaaa级网站 | 亚洲综合色视频 | 中文字幕一区二区在线视频 | 久久久www成人免费毛片女 | 疯狂的欧美乱大交 | 台湾佬成人中娱网222vvvv | 国产精品一区二区含羞草 | 久久天天躁夜夜躁狠狠85麻豆 | 亚洲综合在线一区二区三区 | 一级作爱视频 | 久久国产精品一区二区三区 | 日韩尤物在线 | 午夜精品一区二区三区在线播放 | 久久久日韩精品一区二区 | 一级日批片 | av不卡一区二区三区 | 极品尤物魔鬼身材啪啪仙踪林 | 亚洲国产一区二区a毛片 | 一区二区三区高清视频一 | 欧美日韩国产一区二区三区不卡 | 九色porny视频黑人 | 国产曰又深又爽免费视频 | 免费拍拍拍网站 | 黄色骚视频 | 无套内内射视频网站 | 日日干网站 | 黑人巨大猛烈捣出白浆 | 国内精品偷拍视频 | 亚洲欧美在线免费 | 六月婷婷啪啪 | 精品黄色在线观看 | 国产精品综合久久久 | 国产成人99久久亚洲综合精品 | av大片在线播放 | 国产精品毛片一区二区三区 | 久久99精品久久久久 | 国产精品久久久久9999 | 精品一区二区三区无码免费视频 | 荒岛淫众女h文小说 | 久久123| 日本护士xxxxhd少妇 | 欧美女优在线 | 日韩成人av网址 | 九一精品国产 | 爱爱视频免费看 | www日本高清 | 在线观看成人小视频 | 国精品一区 | 欧美日批| 亚洲第一综合天堂另类专 | 国产毛片18片毛一级特黄 | 四虎最新站名点击进入 | 亚洲福利在线视频 | 天天躁日日躁狠狠躁欧美老妇 | 日日碰狠狠添天天爽超碰97久久 | 成人三级无码视频在线观看 | 亚洲欧美国产欧美色欲 | 国产精品亚洲综合色区韩国 | 性折磨bdsm虐乳欧美激情另类 | 日韩精品一区二区视频 | 五月天激情视频 | 美女露出奶头扒开尿口免费网站 | 日韩毛片精品 | 国产精品 视频一区 二区三区 | 日本xxxx18高清hd | 手机看片日韩精品 | 不卡成人| 一色桃子jul457中文字幕 | 国产精品久久久久久久乖乖 | 色欲久久久天天天综合网精品 | 国内精品卡一卡二卡三 | 精品无码国产污污污免费网站 | 国产精品国产三级国产aⅴ9色 | 欧美日韩一卡二卡 | 国产精品一久久香蕉国产线看观看 | 伊人精品视频在线观看 | 五十老熟妇乱子伦免费观看 | 伊人无码精品久久一区二区 | 日韩手机视频 | 亚洲精品久久久口爆吞精 | 精品熟人妻一区二区三区四区不卡 | 亚洲aⅴ在线无码播放毛片一线天 | 啪啪小视频 | 中国一级特黄毛片 | 国产精品偷伦视频免费观看了 | 国产调教丨ⅴk | 青娱乐最新官网 | 国产真实伦对白全集 | 国产吞精囗交高潮 | 亚洲精品码 | 深爱激情av | 欧美极品在线 | 久久久久久久久久一毛喷水 | 国产免费a| 久久人妻少妇嫩草av无码专区 | 国产 日韩 欧美 在线 | 成人高清视频免费观看 | 欧美成年人在线视频 | 久久高清免费视频 | 国产精品h片在线播放 | 久久精品国产亚洲一区二区 | 日韩欧美区 | 五月激情丁香婷婷 | 日本午夜影院 | 亚洲精品久久久久久下一站 | 一区二区视频免费 | 中文字幕专区高清在线观看 | 国产91福利在线观看 | 欧美日韩亚洲另类 | 精品成人69xx.xyz| 美玉足脚交一区二区三区图片 | 精品动漫卡一卡2卡三卡四卡 | 国产亚洲精品女人久久久久久 | 日韩欧美一区在线 | 自拍偷拍另类 | 91久久久久久久久久 | 少妇做爰xxxⅹ性视频 | av高清在线免费观看 | 国产精品国产 | 男女av免费 | 欧美高清性xxxxhd | 99精品视频一区二区三区 | 国产精品久久婷婷六月丁香 | 欧美黑人猛交 | 夜夜操网站 | 性色视频在线 | 亚洲成av人在线观看网址 | 日韩岛国片 | 在线观看色 | 狠狠躁夜夜躁人人爽天天 | 国产成人av手机在线观看 | 成人性生交xxxxx网站 | 久久久久无码精品国产 | 伊人日韩 | 国产真实精品久久二三区 | 日本一区二区三区免费视频 | 日日夜夜撸影院 | 亚洲最色| 羞羞答答国产xxdd亚洲精品 | 色综合久久蜜芽国产精品 | 一区二区三区回区在观看免费视频 | 无码精品a∨在线观看中文 亚洲熟妇自偷自拍另欧美 无码少妇a片一区二区三区 | 蜜桃av色偷偷av老熟女 | 成人av综合网 | 91国内揄拍国内精品对白 | 久久久久久久久久久久久久久久久 | 久久99精品热在线观看 | 三级视频在线观看 | 野外做受又硬又粗又大视频 | 国产精品怕怕怕免费视频 | 日本全棵写真视频在线观看 | 国模无码视频一区二区三区 | 国产ts丝袜人妖系列视频 | 午夜视频一区 | 成人一级黄色毛片 | 精品国产免费久久久久久婷婷 | 一区二区三区国产在线观看 | 日韩在线一卡 | 中文字幕欧美日韩va免费视频 | 日本一区二区在线视频 | 成人激情免费视频 | 国产欧美一区二区精品久导航 | 国产精品自拍片 | 久久草草亚洲蜜桃臀 | 国产精品av99 | 白嫩少妇和二男三p爽的大声呻吟 | 亚洲最大成人网色 | av片在线免费 | 日韩精品一区二区三区视频播放 | 淫片特黄特黄特黄 | 免费无遮挡无码永久在线观看视频 | 日韩欧美国产精品 | 香蕉视频免费 | 欧美视频在线观看免费 | 成人免费午夜视频69影院 | 国产黄色免费片 | 亚洲色中文字幕在线播放 | а√天堂资源8在线官网 | 怡红院成人av | 成人免费毛片东京热 | 欧美午夜免费 | 偷窥第一页 | 亚洲人成网站在线播放942 | 日本无遮羞调教屁股视频网站 | 自拍偷自拍亚洲精品播放 | 国产无套粉嫩白浆在线 | 日本无遮挡真人祼交视频 | 麻豆三级在线观看 | 18禁网站免费无遮挡无码中文 | www色成人100 | 永久91嫩草亚洲精品人人 | 国内偷自拍性夫妇 | 领导边摸边吃奶边做爽在线观看 | 久久人人爽天天玩人人妻精品 | 国产又黄又猛又粗 | 欧美另类videos | 国产一区二区三区美女 | 久久视频这里有久久精品视频11 | 99国产精品久久久 | 免费看男女做好爽好硬视频 | 成人欧美一区 | 久久免费国产精品 | 老牛嫩草一区二区三区日本 | 国产99久久九九精品的功能介绍 | 深夜视频在线免费观看 | 大桥未久av一区二区三区中文 | 日韩黄色一级片 | 白白色2012年最新视频 | 国产人成精品 | 伊人久久大香线蕉午夜 | 欧美一级网 | 国产群p视频| 国产乱妇无乱码大黄aa片 | 免费av毛片 | 久久亚洲精 | 一区二区黄色 | 自拍偷自拍亚洲精品播放 | 中文亚洲欧美日韩无线码 | 天天透天天干 | 日本高潮视频 | 肉色超薄丝袜脚交91 | 在线视频免费观看一区 | 亚洲精品不卡 | 天天干夜夜看 | 国产产无码乱码精品久久鸭 | 久久久大| 99精品久久精品一区二区 | 亚洲色图国产视频 | 77777亚洲午夜久久多人 | 欧美激情综合五月色丁香小说 | 日本a免费| 精品一区二区三区免费视频 | 毛片毛片毛片毛片毛片毛片毛片 | 国产啊v在线 | 搡老女人一区二区三区视频tv | 欧美在线视频网站 | 亚洲国产精品成人综合久久久久久久 | 丝袜人妻一区二区三区 | 性xxxx视频播放免费 | 亚洲国产精品久久精品怡红院 | 在线永久免费观看黄网站 | 国产一级影院 | 中国极品少妇xxxxⅹ喷水 | 黄色小视频国产 | 久久2018| 欧美精品乱码视频一二专区 | 欧美亚洲一区二区三区四区 | av性在线| 天干天干天啪啪夜爽爽99 | 丁香六月激情 | 女同舌吻互慰一区二区 | 97免费公开在线视频 | 国产女同疯狂作爱系列 | 国产成a人片在线观看视频下载 | 亚洲人成电影网站色mp4 | 狠狠色丁香婷婷 | 看黄色一级| 少妇特殊按摩高潮惨叫无码 | 91久久综合亚洲鲁鲁五月天 | 成人一区二区免费视频 | 新久小草在线 | 国产免费一区二区三区四在线播放 | 最近中文字幕mv在线资源 | 国产伦精品一区二区三区无广告 | 成a人v | 女人18毛片aaa片水真多 | 四川骚妇无套内射舔了更爽 | 亚洲人成未满十八禁网站 | 国产精品色在线网站 | 综合图区亚洲欧美另类图片 | 亚洲一区二区三区免费视频 | 另类一区二区三区 | 996热re视频精品视频这里 | 天堂av2019| ww成人| 亚洲第一福利网站 | 免费久久av| 激情内射日本一区二区三区 | 免费国产自产一区二区三区四区 | 日本成人不卡 | 级毛片| 朋友的姐姐2在线观看 | 91久久精品www人人做人人爽 | 国产二级av | 日操干| 欧美bbbbbbbbbbbb精品 | 亚洲男人的天堂av | 特级精品毛片免费观看 | 日韩 欧美 亚洲 精品 少妇 | 成人无码视频免费播放 | 国产一区二区精品在线观看 | 999国产精品999久久久久久 | 欧美精品福利视频 | 91精品国产综合久久香蕉最新版 | 国产性猛交xxxⅹ交酡全过程 | 日本高清va在线播放 | 国产成人免费爽爽爽视频 | 欧日韩毛片 | 久久精品中文闷骚内射 | 波多野结衣免费视频观看 | 精品中文字幕一区二区三区av | 国产一区二区三区自拍 | 99re6这里有精品热视频 | 日韩人妻熟女中文字幕a美景之屋 | 成人第四色 | xvideos成人免费视频 | 四虎精品 | 天堂资源在线www中文最新偷拍 | 午夜不卡av | 欧美午夜精品一区二区三区电影 | 在线视频 中文字幕 | 中文字幕在线视频一区二区三区 | 国产在线一级片 | 欧洲一二三区 | av影院在线观看 | 国产毛片毛片精品天天看软件 | www国产亚洲精品久久久日本 | 国产一及毛片 | 激情图片区 | 亚洲www啪成人一区二区麻豆 | 欧美67194| 国产原创视频在线观看 | 国产精品国产精品国产专区蜜臀ah | 色欲av伊人久久大香线蕉影院 | 九色丨9lpony丨大学生 | 无线日本视频精品 | 亚洲手机在线 | 丰满少妇在线观看bd | 欧美日韩另类一区二区 | 亚洲精品久久久久久久蜜桃 | 男人狂躁女人爽的尖叫的免费视频 | 欧美极品jizzhd欧美仙踪林 | 午夜寂寞少妇aaa片毛片 | 国产学生不戴套在线看 | 免费黄色网址在线观看 | 色噜噜狠狠狠综合曰曰曰 | 小视频免费在线观看 | 欧美人与动牲交免费观看网 | 极品女神无套呻吟啪啪 | 国产a√精品区二区三区四区 | 婷婷激情社区 | 无码视频一区二区三区 | 名人明星三级videos | 91九色网站 | 91人人草| 国毛片 | 成人免费视频毛片 | 亚洲综合国产 | 亚洲老妇交性506070 | 91久久精品国产91性色tv | 黄色尤物视频 | 精品国产片一区二区三区 | 男女啪啪资源 | 免费久久久久久 | 欧美人与动牲交a欧美精品 98久9在线 | 免费 | 先锋影音在线 | 国产99久久久国产精品~~牛 | 欧美性性性性性色大片免费的 | 爱爱激情免费视频 | 久久这里都是精品 | 成人午夜视频在线观看 | 亚洲a无码综合a国产av中文 | 国产成人亚洲精品无码h在线 | 亚洲日本va午夜中文字幕 | 又色又爽又黄高潮的免费视频 | 麻豆理论片 | 成人免费网站视频 | 九七久久| 亚洲欧美另类图片 | 中国免费看的片 | 久久久久久久久久久免费av | 高清精品国内视频 | 与黑人高h系列辣文 | 自拍偷拍激情视频 | 国产xxx| 色天天综合网 | 日韩欧美在线视频免费观看 | 国产亚洲欧美视频 | 婷婷久久国产对白刺激五月99 | 午夜黄色毛片 | 黄色激情毛片 | 亚洲性色视频 | 人妻激情偷乱视频一区二区三区 | 老司机精品在线 | 免费a网址 | 天天爽影院一区二区在线影院 | 亚洲影视中文字幕 | 国内揄拍国产精品人妻门事件 | 亚洲国产成人综合精品 | 国产精品xxx在线观看www | 黄色正能量网站 | 国偷自产av一区二区三区 | 日本少妇做爰全过程毛片 | 国产一级片免费播放 | 五月天丁香视频 | 超碰在线人人草 | 黑人巨大精品欧美一区 | 欧美疯狂性受xxxxx喷水 | 国产片黄色 | 欧美性猛交xxxx乱大交3 | 美女超碰在线 | 日本高清裸体私密写真集 | 羞羞视频靠逼视频大全 | 青青青手机视频 | 国产成人无码a区精油按摩 蜜桃久久精品成人无码av | 浴室人妻的情欲hd三级国产 | 精品国产乱码91久久久久久网站 | 色综合99久久久无码国产精品 | 国产精品免费vv欧美成人a | 日本特黄特色aaa大片免费 | 深夜在线网站 | 中文字幕亚洲色妞精品天堂 | 丝袜 亚洲 另类 欧美 变态 | 夜夜躁狠狠躁日日躁aab苏桃 | 少妇又色又紧又黄又刺激免费 | 性色av一区二区咪爱 | 久久国产免费观看 | 一级二级毛片 | 女警一级淫片免费放 | 在线观看成人动漫 | 青春草在线视频观看 | 国产91在线 | 亚洲 | 免费无码又爽又刺激网站 | 九一国产精品 | 国产真实偷伦视频 | 国产永久在线观看 | 少妇高潮av久久久久久 | 黄色av免费网址 | 超碰在线公开免费 | 91精品国产综合久久久久久软件 | 亚洲精品乱码久久观看网 | 国产精品毛片一区二区在线看舒淇 | 成人免费影片 | 国产精品88 | 6080日韩午夜伦伦午夜伦 | 国产成人精品日本亚洲专区 | 午夜美女福利 | 中文字幕精品久久久久人妻红杏ⅰ | 色欲av蜜桃一区二区三 | 69xxxx在线观看| aaaaa级少妇高潮大片免费看 | 18禁真人抽搐一进一出动态图 | 7788色淫网站免费观看 | 国产精品夜夜爱 | 开心五月色婷婷综合开心网 | 国产91在线高潮白浆在线观看 | 久青草视频 | 综合伊人 | 久久久久99精品成人片 | 成人年人免费看xxxxxxx | 91人人爽人人爽人人精88v | 男人av在线 | 男人猛吃奶女人爽视频 | 国产一区精品视频 | 黑人与饥渴少妇在线 | 国产高潮刺激叫喊视频 | 成人综合网站 | 久草综合在线观看 | 国产在线二区 | 国产欧美激情日韩成人三区 | 真实国产乱啪福利露脸 | 大岛优香中文av在线字幕 | 国产精品高潮呻吟视频 | 国产精品国产三级在线专区 | 国模自拍视频 | 亚洲国产欧美日韩在线观看第一页 | 中文字幕在线网址 | 国内精品自产拍在线观看 | 少妇高潮毛片高清免费播放 | 日韩成人一区二区 | av网址网站 | xxx毛片| 国产77777| a一级免费视频 | 182tv午夜在线观看香蕉 | 天天干视频在线 | 强开小受嫩苞第一次免费视频 | 96久久欧美麻豆网站 | 亚洲国产精一区二区三区性色 | 亚洲国产欧美在线成人 | 亚州欧美日韩 | 周冬雨三级视频 | 可以免费看的毛片 | 香蕉视频911 | 伊人久久无码中文字幕 | 四虎国产精品成人 | 性生交大片免费全片 | 狠狠五月深爱婷婷网 | 91九色精品 | 伊人精品成人久久综合软件 | 日本亲近相奷中文字幕 | 国产成年网站 | 日韩有码中文字幕在线观看 | 三上悠亚久久精品 | 亚洲中文字幕日产无码 | 欧美日韩3p | 91久久久久久久国产欧美日韩- | 国产成人精品午夜视频' | 久久久国产精品 | 日女人免费视频 | 国模私拍av | 中文字幕精品亚洲一区 | 精品一区二区久久久久久久网站 | 午夜不卡在线观看 | 国产精品天天看天天狠 | 国产乱对白刺激视频 | 亚洲精品乱码久久观看网 | 日韩美女一区二区三区 | 超碰在线观看免费 | 99热最新精品 | 久久久久久人妻一区二区三区 | 亚洲日本va午夜在线电影 | 你懂的视频在线播放 | 精品国产品香蕉在线 | 性欧美xxx内谢 | 日韩久久久久久久 | 波多野结衣喷潮 | 中文字幕亚洲综合久久综合 | 亚洲人成网站精品片在线观看 | 91麻豆成人精品国产免费网站 | 国产做爰免费观看视频 | 亚洲人成未满十八禁网站 | 亚洲男人的天堂在线播放 | 91久久久久久亚洲精品禁果 | 欧美一区二区三区精品免费 | 精品视频免费看 | 国产精品一区二区免费 | 少妇特黄一区二区三区 | 国产永久在线 | 九九热视频免费 | 午夜在线免费视频 | 69成人网 | 国产一区日本 | 欧美人伦禁忌dvd放荡欲情 | 国产无套免费网站69 | 精品丝袜人妻久久久久久 | 美女上床网站 | 久久天天东北熟女毛茸茸 | 亚洲精品国产一区二区精华液 | 国产一区二区三区精品在线观看 | 久久久国产精品无码免费专区 | 无码国模国产在线观看 | 国产精品久久久久久久久潘金莲 | 粉嫩av淫片一区二区三区 | 黄色一极毛片 | 一区二区视频在线免费观看 | 最近的中文字幕在线看视频 | 美女视频黄的全免费视频网站 | 国产极品美女高潮无套小趴菜 | 91超薄丝袜肉丝一区二区 | 白浆网站 | 人成乱码一区二区三区 | 91精品国产综合久久久久久久久 | 亚洲国产精品影院 | 日产成品片a直接观看 | 日本十大三级艳星 | 国产一区二区三区精品视频 | 国产精品99久久久久久人红楼 | 激情综合色综合啪啪开心 | 自拍 另类 综合 欧美小说 | 91久久精品一区二区 | 私人av| www.夜夜操 | 女人被狂躁c到高潮视频 | 国产一级爱 | www.17c.com喷水少妇 | 一本到不卡 | 一本一道无人区 | 国产精品第一 | 日本乱子伦 | 精品国产精品亚洲一本大道 | 国产一卡二卡在线 | 成人性生交片免费看 | 一道本在线播放 | 日本边添边摸边做边爱的网站 | 欧美国产一区二区三区激情 | 99久久精品费精品国产一区二区 | 制服丝袜在线一区 | 天天爽夜夜爽人人爽一区二区 | 国产丝袜美腿一区二区三区 | 一本精品999爽爽久久久 | 一级一片免费播放 | 国产精品久久久久久久久鸭 | 日韩在线第二页 | 五月激情综合 | 亚洲最大成人网色 | www.日韩精品 | 亚洲男人天堂网址 | 亚洲一级二级片 | 欧美国产日韩一区 | 成人黄网站片免费视频 | 日韩专区在线观看 | 动漫av一区二区在线观看 | 欧美一级黄色毛片 | 抽插丰满内射高潮视频 | 天天久久| 深夜在线免费视频 | 午夜操一操 | 色偷偷av老熟女 | 国产国产精品人在线观看 | 亚洲美女久久 | 男女啪啪免费观看网站 | 日日麻批免费40分钟无码 | 在线观看国产亚洲 | 欧洲极品少妇 | 性欧美牲交在线视频 | 欧美国产一区二区三区激情无套 | 国产女主播在线 | 亚洲国产精品成人天堂 | 最新国产麻豆aⅴ精品无码 天天摸天天透天天添 | 青青国产在线视频 | 欧美日韩一级在线观看 | 亚洲国产mv | 无码人妻精品一区二区三区66 | 国产五区 | 中文字幕最新在线 | 国产又粗又黄的视频 | 视频在线日韩 | 亚洲另类调教 | 欧美又大又色又爽bbbbb片 | 9l视频自拍九色9l视频 | 第一av在线 | 日本三级欧美三级人妇视频黑白配 | a级毛片在线免费看 | 在线看的毛片 | 全肉高h后宫gl | 亚洲欧美另类图片 | 国产在线精品一区二区三区直播 | 国产精品久久久久久吹潮 | 国产人与zoxxxx另类一一 | 成人亚洲网站 | 国产欧美一区二区三区网站 | 天天爱天天插 | www国产成人| 综合久久一区 | 97xxxxx| 一本色道久久综合狠狠躁 | 日韩有码一区 | 国内精品久久久久久久久久清纯 | 探花视频在线版播放免费观看 | 亚洲高清成人 | 九九综合久久 | 国产va在线观看免费 | 日韩国产精品一区 | 国产精品欧美亚洲韩国日本久久 | 久久波多野结衣 | 亚洲另类色综合网站 | 男女无套免费视频 | 亚洲一区二区三区在线播放 | 欧美三级黄色 | 久久久三级 | 可以看毛片的网站 | 欧美视频二区 | 国产真实乱人偷精品 | 搡少妇在线视频中文字幕 | 97国产视频 | 她也啪在线视频 | 国产亚洲人成在线播放 | 日韩精品不卡在线 | 国产jjizz一区二区三区视频 | 欧美日韩一区二区三区不卡视频 | 日韩久久国产 | 亚洲性无码一区二区三区 | 国产亚洲人成网站在线观看 | 青青草欧美视频 | 7m精品福利视频导航 | 国产免费a∨片同性同志 | 婷婷久久综合九色综合 | 久久久精品人妻一区二区三区 | 成人福利视频在 | 丝袜情趣国产精品 | 超碰97人人在线 | 免费国产在线精品一区二区三区 | 亚洲成av人在线观看网址 | 少妇的丰满3中文字幕 | 国精产品一品二品国精在线观看 | 成人无遮挡 | wwwwww在线观看 | 久久丁香| 97在线视频免费观看 | 97超级碰碰碰碰久久久久 | 国产二区三区在线 | 久久午夜国产精品www忘忧草 | 久久精品中文騷妇女内射 | 污污免费在线观看 | 最近中文字幕2019视频1 | 黄色成人免费视频 | 日日免费视频 | √最新版天堂资源网在线 | 国产在线精品成人免费怡红院 | 国产亚洲精品精品精品 | 亚洲精品无码专区 | 亚洲中文字幕av在天堂 | 无码高潮少妇毛多水多水 | 国产又黄又猛又粗又爽的a片动漫 | 男女日批 | 欧美成人影音 | 国产成人精品a视频一区www | 国产自啪精品视频网站丝袜 | 亚洲精品久久久久久一区二区 | 久久久久久一区二区三区 | 国产高清在线观看视频 | 无码福利日韩神码福利片 | 手机天堂网 | 日产精品高潮呻吟av久久 | 国产精品视频久久久久久久 | 中文字幕不卡在线播放 | 这里只有久久精品 | 免费色片网站 | a资源在线观看 | 日本中文字幕有码 | 97成人免费视频 | 狠狠色狠狠色综合久久第一次 | 少妇黄色一级片 | 操人在线观看 | 亚洲欧美日韩另类精品一区二区三区 | 超碰在线cao | 国产二级视频 | 天天干天天干天天 | 一区二区乱子伦在线播放 | 按摩师高h荡肉呻吟在线观看 | 北条麻妃一二三区 | 天堂网中文 | 三级毛片基地 | 国产精品爽爽久久久久久 | 欧美亚洲少妇 | 草草影院在线免费观看 | 五月天综合网站 | 欧美日韩少妇 | 少妇乱淫36部 | 丰满白嫩尤物一区二区 | 午夜成人理论无码电影在线播放 | 色婷婷综合久久久久中文一区二区 | 欧美老妇大p毛茸茸 | 91精品国自产在线 | 国产精品嫩草影院com | 欧美老女人视频 | youjizzcom自拍 | 国产极品美女高潮无套久久久 | 老熟妻内射精品一区 | 日本人又黄又爽又色的图片 | 日韩一区二区三区四区五区六区 | 免费99视频 | 亚洲91av | 成人高潮片免费 | 美日韩成人| 天天在线免费视频 | 免费一级淫片日本高清视频一 | 日本二区三区视频 | 在线āv视频| 亚洲午夜精品a片久久www慈禧 | 麻豆午夜| 成年人毛片 | 无码国内精品久久人妻 | 依人综合 | 中文有码在线播放 | 91亚洲精华国产精华液 | 久久久久久99精品久久久 | 亚洲精品中文字幕乱码三区91 | 国内精品久久久久影院日本资源 | 国产中文字幕在线播放 | 久久精品亚洲a | 亚洲资源在线播放 | 国产成人精品综合久久久 | 美女131爽爽爽做爰视频 | 亚洲涩涩网| 亚洲黄色片子 | 久久精品99国产国产精 | 欧美精品无码一区二区三区 | 久久久久久一区二区三区 | 日本不卡免费在线 | 日本亚洲欧美在线 | 久久免费播放视频 | 欧美丰满熟妇xxxx性大屁股 | 免费看a | 91p在线观看 | 丰满少妇被猛烈进入 | 国产av天堂无码一区二区三区 | 亚洲aⅴ在线观看 | 国产视频99 | 少妇性l交大片欧洲热妇乱xxx | 成年入口无限观看免费完整大片 | 久久综合久久自在自线精品自 | 国产精品欧美一区二区三区喷水 | 成人做爰www免费看视频网站 | 九九热影院 | 国产精品乱码久久久久久久久 | 在线视频免费观看你懂的 | 日韩色图视频 | 伊人蕉久中文字幕无码专区 | 亚洲专区在线播放 | 狼人大香伊蕉国产www亚洲 | 操久久久 | 91porn国产成人福利论坛 | 日韩av在线不卡 | 苍井空亚洲精品aa片在线播放 | 亚洲精品乱码久久久久久按摩 | 乱色熟女综合一区二区三区 | 一本大道东京热无码一区 | 国产免费网站在线观看 | 中文字幕+乱码+中文乱 | 欧美在线视频免费观看 | 午夜免费剧场 | 2019高清中文字幕在线免费看 | 欧美高清不卡 | 国产乱人对白 | 亚洲精品欧美综合二区 | 午夜视频一区二区 | 婷婷干| 久久久亚洲一区二区三区 | 娇小xxxx性开放国产精 | 日日噜噜夜夜狠狠va视频v | 国产精品久久久一区二区 | 久久久精品国产99久久精品芒果 | 蜜乳av 懂色av 粉嫩av | 亚洲国产在 | 国产精品一级 | 黄色一集片 | 亚洲社区在线观看 | 亚洲精品乱码久久久久 | 亚洲国产成人久久综合一区,久久久国产99 | 女男羞羞视频网站免费 | 午夜影院黄色 | 嫩草99| 欧色图 | 免费中文熟妇在线影片 | 毛茸茸性xxxx毛茸茸毛茸茸 | 日本不卡一区二区三区 | 久久人妻av一区二区软件 | 青青操影院| 亚洲一区在线观看免费 | 999久久久精品视频 999久久久久 | 女人高潮被爽到呻吟在线观看 | 色婷婷蜜桃| 国产日产久久欧美清爽 | 成人在线视频中文字幕 | 国产真实乱对白精彩久久老熟妇女 | 日韩99在线 | 中文 | 夜夜高潮天天爽欧美国产亚洲一区 | 五月在线视频 | 欧美久久一区二区 | 女优一区二区三区 | www.污在线观看 | 一级欧美在线 | 国产欧美一区二区三区视频 | 全黄久久久久a级全毛片 | 免费黄色小视频在线观看 | 在线观看麻豆av | 国产一区二区三区中文字幕 | 中国大陆高清aⅴ毛片 | 色图社区 | 黄色一级欧美 | 天堂在线1| 国产精品久久久久久久久夜色 | 国产aⅴ夜夜欢一区二区三区 | 天天草视频 | 亚洲自偷自偷在线成人网站传媒 | 交h粗暴调教91 | 日韩精品视频一区二区三区 | 亚洲天堂精品久久 | 在线观看的黄网 | 69久久久成人看片免费一区二 | 爱爱视频免费看 | 在线a亚洲视频播放在线观看 | 日本中文字幕在线观看视频 | 91激情影院 | 中文字幕在线免费观看 | 天天躁日日躁狠狠躁800凹凸 | 天天天天噜在线视频 | 精品国产一区二区三区四区在线 | 香蕉av福利精品导航 | 国产一线天粉嫩馒头极品av | 久热亚洲| zzjizzji亚洲日本少妇 | 欧美性xxxx极品少妇 | 欧美韩国一区 | 丁香婷婷成人 | 成人福利视频在线 | 美女网站av| 久久久国产精华液999999 | 日本丰满大乳免费xxxx | 特黄三级 | 无码少妇a片一区二区三区 免费无码av片在线观看网站 | 日本五十肥熟交尾 | 在线观看视频国产 | 熟妇女人妻丰满少妇中文字幕 | 糖心av | 国产亚洲成av人在线观看导航 | 黄色一二三区 | 少妇做爰免费视频网站图片 | 久久久久欧美精品999 | 91精品推荐 | 97国产情侣爱久久免费观看 | 国产精品网友自拍 | 久久夜色精品国产欧美一区麻豆 | 欧美特级黄色片 | 亚洲熟妇无码一区二区三区 | 精品国产精品一区二区夜夜嗨 | 蜜臀久久99精品久久久久野外 | 天堂视频在线观看免费 | av片免费看 | 国产黑丝高跟 | 精品人妻码一区二区三区 | 激情久久一区 | 国产婷婷一区二区三区 | 久久成熟| 国产一级大黄 | 深夜福利在线免费观看 | 亚洲男人天堂2022 | 九九热99久久久国产盗摄 | 精品视频99| 91精品国产91久久久久久久久久久久 | 好硬好湿好爽好深视频 | 国产毛片久久久久久美女视频 | 国产特级毛片aaaaaa高清 | 九九爱精品视频 | 日日碰日日操 | 天天爽夜夜爽视频 | 亚洲精品蜜桃久在线 | 黄色大片免费在线观看 | 婷婷综合| 激情国产一区二区三区四区小说 | 男人的亚洲天堂 | 超碰中文在线 | 精品国产乱码久久久久久移动网络 | 青青草免费视频在线观 | 国内精品少妇在线播放98 | 韩国三级 女的和老头做 | 一区二区三区欧美在线 | 又大又粗弄得我出好多水 | 九九热这里有精品 | 日韩影视在线 | 少妇又粗又猛又爽又黄的视频 | 久久久久女教师免费一区 | 少妇性zzzzzzzy | 中国黄色一级毛片 | 免费一级做a爰片久久毛片 免费一区 | 男女啪啪做爰高潮www成人福利 | 亚洲日韩成人 | 天天色综合久久 | 亚洲精品一区二区三区婷婷月 | 精品在线播放 | 毛片站| 亚洲国产精品久久精品成人网站 | 中文字幕第31页 | 欧美va视频 | 天天操天天舔 | 久久亚洲美女精品国产精品 | 国产欧美日韩精品丝袜高跟鞋 | 久久的久久爽亚洲精品aⅴ 久久第一页 | 久久久久久999| 无码人妻aⅴ一区二区三区 美女扒开大腿让男人桶 | 亚洲色图 校园春色 | 精品国产一二三产品价格 | 肉欲性毛片交19 | 国产伦视频 | 欧美成人三级伦在线观看 | 制服丝袜在线第一页 | 欧美性生交大片免费看 | 亚洲女同性ⅹxx关女同网站 | 成人国产精品免费观看动漫 | 欧美乱大交做爰xxxⅹ小说 | 日韩一级欧美 | 国产女人18毛片水真多1kt∧ | 99re热在线视频 | 久久天天躁狠狠躁夜夜躁2014 | 日本乳奶水流出来高清xxxx | av免费观看大全 | 18成人免费观看网站 | 日韩一级在线视频 | 四川一级毛毛片 | 国产主播99| 在线视频天堂 | www91久久| 色综合九九 | 久久久久国产精品视频 | 希岛婚前侵犯中文字幕在线 | 国产成人精品三级麻豆 | 久久久久久久亚洲精品 | 综合精品欧美日韩国产在线 | 欧美性久久 | 任我撸在线视频 | 亚洲 自拍 都市 欧美 小说 | 欧美白嫩少妇xxxxx性 | 免费的av网站 | 午夜久久乐 | 淫综合网 | 精品久久久久久人妻无码中文字幕 | 国产精欧美一区二区三区 | 日韩中文字幕免费观看 | 欧美国产日韩一区 | 周妍希大尺度国产一区二区 | 国产真实精品久久二三区 | 日本毛片高清免费视频 | 亚洲二区在线视频 | 久久频 | 99久久人妻精品免费二区 | 永久免费的啪啪网站免费观看浪潮 | 一区二区免费 | 日本黄在线观看 | 国产麻豆乱码精品一区二区三区 | 日韩一二三四 | 九九热精品在线 | 女性隐私黄www网站视频 | 国产精品第9页 | 露脸叫床粗话东北少妇 | 少妇一级片 | 国产三级网站 | 国产又黄又硬又湿又黄的播出时间 | 黄色大片免费网站 | 男女做爰猛烈叫床高潮的书 | 伊人天堂av | 日韩在线视频一区 | 久久久久亚洲精品成人网小说 | 全部孕妇毛片丰满孕妇孕交 | 日韩在线观看不卡 | 天天夜碰日日摸日日澡性色av | av不卡中文字幕 | 亚洲一区二区三区四区 | 免费黄色激情视频 | 欧美一区二区视频在线 | 欧美日韩视频一区二区三区 | 成人h动漫精品一区二区 | 日韩欧美在线播放 | 高h av| 天天躁夜夜躁狠狠躁2020色戒 | 六姐妹在线观看免费 | 欧美亚一区二区 | 人妻夜夜添夜夜无码av | 最全aⅴ番号库 | 久久精品国产精品国产精品污 | 22222se男人的天堂 | 少妇高潮喷水久久久影院 | 天堂一区| 香蕉网在线播放 | 91在线成人| 日本欧美三级 | 东北少妇伦xxxxhd | 亚洲美女中文字幕 | 波多野结衣在线观看一区 | 国产毛毛片 | 久久艹精品| 欧美巨大另类极品videosbest | 骚虎av| 日韩一区二区中文字幕 | a级在线观看 | 国产精品久久久久久麻豆一区 | 日韩毛片| 一边吃奶一边做爰爽到爆视频 | 第一福利在线观看 | 蜜桃堂女性向av片在线观看 | 又大又黄又爽视频一区二区 | 天天射夜夜骑 | 麻豆av福利av久久av | 久久久综合 | 久久久久久久中文字幕 | 精品少妇一区二区三区免费观 | √8天堂资源地址中文在线 丰满少妇人妻久久久久久 a片在线免费观看 | 精品人妻人人做人人爽夜夜爽 | 91干视频| 日本伊人色综合网 | 亚洲激情在线播放 | 香港黄a三级三级三级看三级 | 国内精品国产成人国产三级 | 91精品国产综合久久香蕉的特点 | 成人永久免费 | 久久久精品久久久久久 | 国产精品久久久天天影视 | 欧美日韩理论片 | 免费在线观看黄色网 | 亚洲免费视频在线观看 | 日韩人妻无码免费视频一区二区三区 | 黄色成人在线 | 狠狠做深爱婷婷久久综合一区 | 欧美成人一区二区三区在线观看 | 九九久久网| 日本精品人妻无码77777 | 午夜福利理论片在线观看 | 一级片少妇| 亚洲精品在线观看视频 | 国产精品久久伊人 | 18禁裸乳无遮挡自慰免费动漫 | 1515hh毛片大全免费 | 男女做爰猛烈叫床高潮的书 | 久精品国产欧美亚洲色aⅴ大片 | 特黄少妇60分钟在线观看播放 | 免费成人毛片 | 黄色片网站视频 | 极品美女极度色诱视频在线 | 亚洲视频精品 | 色羞羞 | 99精品免费久久久久久久久日本 | 吃奶摸下的激烈视频 | 中文字幕丰满伦孑 | 日日摸夜夜添夜夜添毛片av | 成人做爰69片免费看网站色戒 | 国产成人日韩 | 亚洲熟妇少妇任你躁在线观看无码 | 大胆欧美gogo免费视频一二区 | 久久无码中文字幕免费影院蜜桃 | 国产精品免费一区 | 91丝袜国产在线观看 | 西野翔之公侵犯中文字幕 | 疯狂三人交性欧美 | www夜夜操| 欧美视频在线观看一区 | 欧美一区亚洲二区 | 精品无码专区久久久水蜜桃 | 国产对白不带套毛片av | 亚洲特级毛片 | 亚洲天堂日韩在线 | 成人免费视频国产免费 | 四虎色播| 乳霸冲田杏梨中文字幕担心学生的 | 欧美一区二区精品 | 日韩在线精品强乱中文字幕 | 日韩在线看片 | 国产精品美女久久久免费 | 少妇裸体淫交免费视频网站 | 日本精品视频一区 | 毛葺葺老太做受视频 | 天堂√在线 | 精品视频入口 | heyzo朝桐光一区二区 | 日韩一区二区三区在线 | 98国产精品综合一区二区三区 | 伊人久久成人 | 国产黄色片免费看 | 亚洲精品乱码久久久久久花季 | 怡红院成永久免费人全部视频 | 拨开少妇两片肥嫩的肉 | 日本精品国产 | 色婷婷综合激情综在线播放 | 在线操| 国产美女包臀裙一区二区 | 人av在线 | 精品一区二区三区免费 | 九九九小视频 | 视频一区二区三区免费 | 艳妇乳肉豪妇荡乳av无码福利 | 连裤袜美脚ol在线播放 | 无码伊人久久大杳蕉中文无码 | 免费观看又色又爽又黄的崩锅 | 国产自产自拍 | 91精品啪 | 性色av一区二区三区无码 | 上床视频在线观看 | 亚洲一区在线免费 | 99精品国自产在线 | 欧美精品一级二级三级 | 久久久久久国产精品mv | 少妇又紧又色又爽又刺激的视频 | 色哟哟中文字幕 | 亚洲宅男天堂 | 国产天堂123在线观看 | 三级黄色网 | 吸咬奶头狂揉60分钟视频 | 国产夫妻av | 久操资源网 | 中文字幕一区二区三区人妻少妇 | 国产精品一二区在线观看 | 国产婷婷色 | 久久久久久免费精品 | 国产又猛又黄又爽三男一女 | 免费看三级黄色片 | 亚洲福利影片在线 | 欧美性情网| 干干操操 | 一及黄色毛片 | 中文字幕av免费观看 | 日韩av无码中文无码不卡电影 | 欧美人体做爰大胆视频 | 99视频99 | av中文在线观看 | 在线国产精品视频 | 伊人久久精品视频 | 国产又爽又黄又湿免费99 | 四季av综合网站 | 娇小激情hdxxxx学生 | 国产成人午夜精品 | 久久久久久久久久久国产 | 少妇人妻偷人精品视蜜桃 | 成人免费视频观看视频 | 香港三日本8a三级少妇三级99 | 亚洲乱色| 性欧美日韩 | 日本熟妇色一本在线观看 | 97精产国品一二三产区区别视频 | 337p粉嫩大胆色噜噜噜 | 欧美日韩国语 | 欧美激情免费观看 | 日韩乱码人妻无码系列中文字幕 | av毛片在线播放 | 老司机午夜福利av无码特黄a | 中文在线а天堂中文在线新版 | 黄色一级免费片 | 国产一区在线观看视频 | 黄色免费看视频 | 欧美日韩不卡在线 | 欧美视频精品 | av人人干| 欧美一a| 超碰人人超碰 | 女厕厕露p撒尿八个少妇 | 麻豆videos | 美女内射视频www网站午夜 | 中文字幕无码精品亚洲35 | 少妇高潮露脸国语对白 | 探花视频在线版播放免费观看 | 国产一区2区 | 亚洲综合天堂av网站在线观看 | 亚洲色图36p | 91av蝌蚪| 久久人人添人人爽添人人88v | 中文字幕在线看片 | 在线欧美国产 | 蜜桃视频韩日免费播放 | 少妇啊灬啊别停灬用力啊房东 | 午夜成人1000部免费视频 | 亚洲高清视频在线观看 | 免费做爰在线观看视频妖精 | 18无码粉嫩小泬无套在线观看 | 国产成人一区在线观看 | 中文字幕乱码日本亚洲一区二区 | 在线成人一区 | 性欧美8khd高清极品 | 国产又粗又硬又大爽黄老大爷视 | 欧美性猛交xxxx黑人 | 激情网站网址 | 亚洲色图校园春色 | 国产精品18久久久久久vr | 精品福利一区二区三区 | 九九免费视频 | 欧美三级乱人伦电影 | 91九色蝌蚪porny | 亚洲成人一级片 | 国产成人视屏 | 好大好长好紧爽小91 | 国产网红主播av国内精品 | 久久久久国产一区二区三区小说 | 亚洲精品久久国产高清 | a级在线看 | 欧美综合精品 | 性疯狂做受xxxx高清视频 | 福利小视频 | 亚洲狠狠婷婷久久久四季av | 国产日韩一区二区在线 | 国产肉体xxxx裸体137大胆 | 日韩成人专区 | 麻豆人人妻人人妻人人片av | 国产精品资源在线 | 一区不卡在线观看 | 欧美顶级少妇作爱 | 久久嗨 | 99久久这里只有精品 | 国产乱子伦农村叉叉叉 | 亚洲乱码国产乱码精品精的特点 | 午夜精品久久久久久久99水蜜桃 | 91精品看片| 熟妇人妻系列av无码一区二区 | 一级国产片 | 国产又黄又爽刺激片 | 国产精品综合色区在线观看 | 亚洲一区免费 | 日韩中文三级 | 国产色产综合色产在线视频 | 久久午夜福利电影 | 亚洲19禁大尺度做爰无遮挡 | 超高清日韩aⅴ大片美女图片 | 国产成人精品女人久久久 | 特级黄色片免费看 | a点w片| 免费视频亚洲 | 欧美jizzhd精品欧美巨大 | 精品在线观看一区 | 日韩欧美视频二区 | 在线国产一区二区 | 日韩欧美一区在线观看 | 日韩在线国产 | av网站在线不卡 | 秋霞福利| 亚洲精品无码久久久 | 婷婷激情综合网 | 五月婷婷在线视频 | 26uuu亚洲国产欧美日韩 | www久久爱69com| 欧美性插视频 | 玖玖热麻豆国产精品图片 | 饥渴放荡受np公车奶牛 | 99精品国产综合久久久久久 | 色播网址 | 久久天天躁夜夜躁狠狠躁2022 | 成年精品 | 成人小网站 | 麻豆视频在线播放 | 99激情网 | 一区免费在线 | 亚洲日韩国产av无码无码精品 | 国产免费a视频 | www中文在线 | 国产精品18久久久久久麻辣 | www.99日本精品片com | 色呦呦网| 黑人无套内谢中国美女 | xxxx少妇高潮毛片新婚之夜 | 亚洲欧美一区二区三区在线 | 欧美高清一区二区三区四区 | 精品欧美一区二区三区久久久 | 久久综合久久自在自线精品自 | 白嫩嫩翘臀美女在线视频 | 玖玖爱这里只有精品 | 黑人性受xxxx黑人xyx性爽 | 午夜性福利视频 | 国产特级毛片aaaaaa毛片 | 爱情岛论坛自拍 | 精产国品一二三区 | 18资源在线www免费 | 亚洲精品久久久久国色天香 | 久草在线免费资源 | 亚洲精品无码成人aaa片 | 在线观看日韩av | 你懂的欧美 | 国产女主播在线播放 | 色诱av| 人人妻人人爽人人澡av | 天天综合网天天综合色 | 对白脏话肉麻粗话av |