92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

用戶界面設計的10個小技巧

博博

設計不是簡單可以用顏色,形狀和文字表示的,應該是一個“言之有物”的過程





原文鏈接:https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9


作者: Leeo SnowDesignStudio

轉載請注明:站酷

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


可視化大屏中的交互設計

博博

在完成一張可視化大屏的過程中,除了炫酷的科技感,我們是否忽略了大屏中的“交互設計”呢,整理了一篇心得與大家一起分享學習。

      在數據可視化的分析過程中,用戶是所有行為的主體,通過獲取的可視信息形成認知,在交互分析過程中獲取解決問題的方法。

     在這個過程中,感知和認知能力直接影響著信息的獲取和處理進程,進而影響用戶對外在世界環境做出的反應,這也是設計數據可視化產品服務藍圖的基礎邏輯。

     從數據到知識有兩個途徑:交互的可視化方法和自動的數據挖掘方法。

     我們可以看到,下圖展示的便是一個典型的可視分析流程圖和每個步驟中的過渡形式。這個流水線的起點是輸入的數據,終點是提煉的知識。

     可視化的首要任務是準確地展示和傳達數據所包含的信息。根據預期和需求,提供有效輔助手段以方便用戶理解數據,從而完成有效的可視化。

     但是當出現數據尺寸大、結構復雜的情況時,有限的空間大大限制了靜態可視化的效果,有限的可視化空間和數據過載之間的處理是非常復雜的。有時我們會通過物理環境的變化來改變服務模型,但是更多時候我們需要通過交互設計來完成對復雜信息的處理,提升用戶對數據解讀的便捷性。

     那么當我們在設計一張數據大屏時,我們該如何通過交互提升用戶獲取有效數據的效能呢,下面我們一起來探討如何完善大屏設計中的交互設計:


一、信息架構

1、清晰易理解、可拓展的信息架構

2、清晰易理解的導航關系

3、清晰易理解的層級關系


案例分析:

在我們收到原型圖時,首先我們需要梳理清楚大屏的信息架構,比如整個大屏的模塊比例是按照1:1:1還是1:3:1的結構。又或者是如何設計重要功能的入口,比如整屏的導航tab選項,在布局設計上用戶是否可以明晰它是是否是全屏篩選,在交互邏輯上用戶是否可以通過最短的路徑快速篩選抵達內容。那么當用戶進行了導航的切換后又返回到上一頁面,整個行為是可以形成路徑閉環的。


二、流程設計

1、可下鉆的模塊需給用戶以引導

2、相同功能的用戶體驗路徑需保持一致

3、逆向流程的功能設計能形成閉環


案例分析:

我們經常會在大屏中間設計地圖的樣式來展示某個省的數據情況,比如,如圖所示,當業務側需要從湖北省跳轉至武漢市,查看武漢市的詳細數據,那么我們可以在省級地圖輪播的數據氣泡上給予用戶以提示,用戶可以清楚獲取到跳轉市級大屏的路徑方法。


三、界面展示

1、一致可控的圖表組件

可視化大屏中最核心的數據展示形式就是圖表模塊,我們需要正確地展示圖表組件外觀與組件關系,把控好相似功能的橫向一致性,我們可以細分為以下幾點。

(1)選擇正確清晰的圖表組件

(2)正確表達組件元素之間的關系

(3)一致性的組件樣式和交互行為

(4)不要忽視組件的不可用狀態(按鈕)

(5)刪減影響用戶視線和注意力的冗余元素


案例分析:

當一個模塊內需要展示數據的多個維度,我們如何將該模塊設計得更加清晰呢。如下圖,根據人從左往右的閱讀習慣,在左邊展示數據1和數據2的總指標數,在右邊展示數據1和數據2的詳細走勢,右上角我們還可以添加tab選項,用戶可以進行tab切換查看更多維度的數據內容。

所以,我們可以將用戶使用習慣和交互行為很好地結合起來,不僅免去了圖表多亂雜的場景,用戶也可以更快地查看到想要獲取的數據信息。


2、清晰的數據展示

配合圖表展示的就是我們的“數據數字”內容了,在我們將設計稿傳遞給前端同事后,填充真實數據后的視覺效果可能看起來沒有效果圖規整,一方面在進行繪制效果圖之前,可以與產品業務側共同探討數據內容,盡量給視覺設計師提供真實的數據,另一方面,在我們作圖搬磚的時候,也要注意一下幾點:

(1)不要遺漏了“無數據”的缺省空界面,當無法獲取到數據時,我們需要給前端提供這樣的缺省圖;

(2)清晰的數據排序規則,比如環形圖中,總起始點到終點,數據對應的數值量應該是遞減的排序規則;

(3)考慮數據的極值情況,比如在搜索列表中學校名稱文字的極限字數是多少,超出多少字用省略號顯示,這些我們都需要考慮到;

(4)是否需要標明數據的更新時間節點,有的大屏強調數據實時性,我們經常會在右上角增加數據截止更新時間來來引導用戶;

(5)特定的數值按照特定的格式和單位顯示,比如羊字符能讓用戶第一時間識別到是人民幣,而如果金額數字過長后面再加元會降低識別效率。


案例分析:


3、選擇與輸入的信息反饋

(1)展示合適的首選項或默認值

(2)輸入前有效的文本提示

(3)輸入完成后需及時反饋


案例分析:


4、用動效進行有效的交互引導

     利用動效進行交互引導,即使大屏操作鏈路過長,也可以讓用戶快速上手操作,減少流程學習時間。進入下一場景后,又會有對應的區域提示用戶返回全局或查看其他場景;當做到層層有響應,就能減少用戶在每一步操作上的困惑時間,幫助用戶快速上手操作流程,并且大大提升工作效率。

     但是我們需要注意的是,不要為了酷炫而做太多無用的動效,不僅會讓頁面加載速度慢,也會讓用戶覺得雜亂無重點。


     總結:

     交互可提高可視化系統的效率,幫助用戶處理更多的數據,完成更復雜的任務。然而,實現交互本身也有額外成本?;拥南到y可以使用戶能探索更大的信息空間,但隨之而來的成本是用戶需要花費更多的時間與精力去瀏覽和探索數據。

     因此,可視化系統應當采用數據挖掘算法自動發現用戶可能會關心的數據或者模式;并通過可視化呈現給用戶,用戶在這個基礎上通過互動進行更深入的挖掘。設計師的設計決定了系統的可理解性,一旦掌握了這個邏輯,再復雜的頁面也會變得有條不紊。

     我們仍需在數據可視化的道路上不斷探索挖掘數據價值,給決策者提供有效的數據分析支撐,讓設計驅動數據價值最大化。



文章來源:站酷   作者:Racinere


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

交互設計原則之格式塔定律

博博

在做交互設計或者視覺設計時要遵循一些既有的原則,其中非常重要的一條就是【格式塔定律】

一、什么是格式塔原理?

        格式塔心理學誕生于1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的:我們的視覺系統自動對視覺輸入構建結構,并在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域?!靶螤睢焙汀皥D形”在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。

       格式塔學派主張人腦的運作原理屬于整體論,“整體不同于其部件的總和”。例如,我們對一朵花的感知,并非純粹單單從對花的形狀、顏色、大小等感官資訊而來,還包括我們對花過去的經驗和印象,加起來才是我們對一朵花的感知。

       格式塔心理學家認為這些原則之所以存在,是因為頭腦具有天生的傾向,可以根據某些規則感知刺激中的模式。(是不是覺得hin神奇)

       比如,這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景,白色為圖形,則是一個花瓶;如果以黑色為圖形,白色為背景,則是兩個人的側臉。它也反映了圖形和背景對一幅圖的影響。

二、格式塔原理分析

1、接近性原理
接近性原理說的是物體之間的相對距離會影響我們感知它是否以及如何組織在一起。互相靠近(相對于其它物體)的物體看起來屬于一組,而那些距離較遠的則自動劃為組外。             

接近性原理的應用1--將相關元素彼此靠近放置

使用不同數量的空格來合并或分離元素是傳達有意義的分組的關鍵。例如,在Ant Design的標題區域中,“ 搜索”功能與站點的主要導航位于同一行。但是,主導航和搜索之間的多余空格表示它們屬于不同的組,因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出,此空格至關重要。


但是,在較小的屏幕上,無法保持此間距。為了避免將這些區域視為一個整體,頁面收縮寬度的時候,搜索后的文字隱藏了。




接近性原理的應用2--構建清晰的結構

應具有固定或鎖頭標題的網站特別可以從使用獨特的背景顏色或清晰的邊框中受益,從而有效地將標題與下面滾動的頁面內容區分開。此外,大頁腳的單一統一背景色  可有效地表示該區域中的所有鏈接都屬于一個組。

創建清晰的邊界是一種強大的視覺提示,可以壓倒其他分組原則,例如接近性或相似性。因此,當需要包含幾種不同類型的UI元素或無法調整對象之間的空白量時,它是一種強大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區分,那么我們可以用線框畫出邊界來達到目的。

2、相似性原理

如果其它因素相同,那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理,這也就是我們平時做視覺設計時的原理,比如我們設計稿宣講時可能會被開發、產品以及測試同學問到“為什么用這個形狀?為什么這里用這個顏色?為什么這兩個尺寸不一致?等等,細細體會這個相似性原理就會給我們答案,讓我們在畫設計稿時能夠有理有據。


A相似性原理之形狀:

在上圖中,我們頭腦中自然而然的會分成“四列”,也就是圓形一列,三角形一列,然后再圓形一列,三角形一列,而不會看成“三行”


B相似性原理之顏色:

應用共享的顏色來表示某些項目是相關的,因此可能具有相似的功能,這很有效。通用顏色往往比其他特征(例如形狀)更加突出,因此可以用于組合不同類型的元素并傳達它們確實相關。        

在用戶界面設計中,顏色通常用于指示常用功能。例如,使用單個鏈接顏色作為與用戶交流可點擊內容,鏈接顏色應僅保留給交互式文本和其他可單擊元素,因為用戶會意識到所有具有此特征的項目都是相關的,并且以相同的方式工作。因此,鏈接顏色不應用于關鍵字,不可點擊的標題或實際上不可點擊的附近圖標。

如上圖,就是一個用色的反面例子,“ 消息中心”中的所有按鈕均為綠色,因此用戶必須花時間確定哪個是提交表單的主要按鈕。(此外,“ 提交”按鈕離消息區域很遠,并且根據Fitts的定律,這種缺乏接近性也會降低用戶的速    度。)

相同顏色的按鈕將被視為具有相同的重要性級別。因此,應為主要操作性按鈕保留單獨的顏色,以幫助它們在輔助按鈕中脫穎而出。

C相似性原理之大?。?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">大小也可以用來表示關系。大小相似的對象可能被認為是相關的,通常具有相同的重要性。

在用戶界面中,我們經常使用大小來強調內容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度,并且在所有其他條件相同的情況下,將共享該屬性的所有元素連接在一起。一致地使用大小會創建視覺層次結構,并使頁面易于掃描,因為人們可以立即看到并理解這些類型分組。

例如,在產品列表頁面中,每個單獨的產品列表都以相同的大小(和相同的形狀)顯示。這種一致的視覺樣式告訴我們該區域中的所有物品都是產品。共享大小將其與其他不同的UI元素分開。當某項商品在此列表中以不同的大小或形狀出現時,就會突出顯示為不屬于產品分組。下面這個產品集合的促銷以單個產品列表大小的兩倍顯示。


下面是我最開始嘗試的招聘系統首頁的改版:

根據上面的相似性原理和接近性原理就可以很容易看出來,這個頁面結構和邏輯不清晰:

1.待處理和招聘日程兩個模塊之間的區分不夠清晰:因為這兩個模塊右側應用了同樣的形狀和顏色的按鈕(相似性原理),讓用戶在心理上產生聯想,同時這兩個模塊之間只靠間距來區分,區分的太弱了(接近性原理)

2.招聘日程頭部日期與下面的面試安排卡片聯系太弱:因為面試卡片用了非常強的邊界區分的線條(接近性原理-構建清晰的結構)確實在面試模塊之間構建了清晰的結構,與此同時卡片與頭部的日期之間看起來沒有什么關聯。

3.首頁的選中效果太弱,分析這個頁面的層級,左側首頁選中才應該是最重的,能讓用戶第一眼就知道在系統中的位置,很顯然目前來看很容易忽視首頁這個位置,關注點被吸引到了快捷入口。這并不是我們想要傳達給用戶的。

根據格式塔原理中的相似性原理和接近性原理,對頁面的結構進行了調整,就看起來清晰多了。

所以,我們在制作完設計稿后,可以應用格式塔原理,分析下最終呈現給用戶的結構和邏輯是否清晰。而這也是做視覺的理由和底氣。


3.連續性原理

視覺傾向于感知連續的形式而不是離散的碎片。

連續理解起來是很簡單的,但連續卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環連接成一個整體。在引導頁中經常會用到這個。

    

 4、封閉性原理

視覺系統自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。

閉合可以實現統一整體,這不難理解。但是有一個非常有趣的現象值得我們去觀察和思考,就是不閉合時候也會實現統一的整體,更確切的說,這種現象是一種不完全的關閉。這些圖形與設計給人以簡單,輕松、自由的感覺。所以,完全的閉合是沒有必要的。最著名的應用便是蘋果公司的logo,咬掉的缺口喚起人們的好奇、疑問,給人巨大想象空間。

5、對稱性原理

我們傾向于分解復雜的場景來降低復雜度。


6、主體/背景原理

我們的大腦將視覺區域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素,其余則是背景。這個原理經常會在海報設計中應用,這也是為什么我們做海報,做平面時,一定要制作好背景,背景的氛圍很重要。


文章來源:站酷   作者:ZZiUP


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

輪播設計總結-提高用戶點擊

鶴鶴

提到輪播首先可能想到的是廣告,我們經常在移動端首頁或網站首頁會看到各式各樣的輪播banner,不管在移動端還是網頁上通常點擊數據都是非常差的,本篇文章帶你深入了解banner輪播。


如果需要設計一個輪播,我們應該考慮哪些因素?如何讓輪播更具有價值?如何讓輪播的體驗更好?如何避免輪播常見的問題。


本篇文章通過以下幾點探索輪播的特性,預計閱讀20分鐘


目錄

1、用戶真的使用輪播嗎

2、輪播的輪換形式

3、輪播的進度展示

4、輪播定位

5、輪播的切換

6、對輪播進行分類

7、使用縮略圖進行預知

8、輪播異形化

9、輪播時間

10、總結


一、用戶真的使用輪播嗎

用戶是否對輪播有感知,這個則需要根據不同的場景進行判斷,包括每個產品中的每個輪播對用戶用戶的定位也不相同,常見的應用場景品牌曝光、活動營銷、產品展示,每個場景下相關的數據也不相同。


促銷輪播banner


品牌推廣輪播banner


產品介紹輪播banner


同時還有個關鍵因素,輪播的占比,這里以pc端為例若是產品是以品牌效應吸引用戶的,大多輪播是以大的屏幕占比為主通常會占首屏的50%,如果是以營銷、內容為主的產品,輪播通常以16:9、7:4的常規比例進行展示。


輪播的頁數

用戶在使用產品時會默認忽略輪播區域,一般輪播都會有自動輪換機制,一定時間后自動輪放下一張banner,那么每當頁面上進行輪播時便會吸引用戶進行關注,效果上會有一定的提升,所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。


還有一種用戶比較喜歡關注輪播過去的banner以此來滿足好奇心。


如果banner是作為內容傳播希望用戶通過banner了解內容,那么則要避免放在最后一位置,對于用戶而言最后一張輪播路徑過于長,并且用戶很少會手動滑動banner。


國外一家公司在針對輪播中進行了相關的研究測試,隨著頁數的增加用戶的點擊逐步下降。

那么如果想讓產品中的輪播更具有效果,則需要根據不同的場景設定策略達到目的。




二、輪播的輪換形式

不管在移動端還是手機端,輪播都有各種交互形式和尺寸,以pc為例在交互上會多樣化一些,常見的幾種則是通過滾輪滑動、通過點擊切換兩種。


如下圖某藝術網站,它則是通過鼠標滾輪進行切換輪播banner,并且banner的占比也是鋪滿首屏,這種輪播形式適合一些品牌、產品宣傳等相關的網站以此來突出產品的亮點,同時也符合用戶目標。



在看下面這個醫美網站它的切換方式則是通過鼠標點擊進行切換,并且占比也是鋪滿首屏,在醫美領域用戶更關注美感,而輪播形態也是符合用戶的心理預期更加沉浸美觀。


而在移動端輪播的形式就比較統一,大多都是自動播放+手指滑動進行切換。




三、輪播的進度展示

在網頁中輪播都會有當前的定位點,許多用戶的習慣是點擊進度條進行切換banner這樣能夠更快的達到目標,不用一張一張切換,但是在有些產品中會忽略這一點,設計中會做的非常小導致用戶在點擊上可用性不太友好,如下圖中的banenr進度點設計上過于小導致點擊上有些阻礙。





如以下網站去除進度定位的方式,通過縮略圖預覽來告知用戶下一個banner的內容,空白區域也可以添加縮略圖引導介紹等關鍵信息,幫助用戶提前預知在體驗上相對較好。

以下國外某網站在進度定位的設計上采用了標簽文案方式進行設計,能夠幫助用戶更加全局的了解banner內容




四、輪播的定位

定位主要是用來指示當前輪播的進度,像上圖中講的便于用戶更加全局的觀看banner的張數和當前進度。


以下網站的設計中則把定位與進度相結合,進度條展示該banner預計多久會切換下一張,對于自動切換的產品輪播這個更直觀的進度展示體驗上相對較好。

以下是某個國外網站,不管是pc還是移動端都在輪播底部添加了水平條,告知用戶當前位置


隨著市場上產品同質化嚴重,產品的競爭力也更依賴體驗,在下圖中的數據可視化的網站上,在進度條上就利用了產品的特性以餅狀圖的形式進行展示。






五、輪播的切換

在剛才上面舉的例子中很多優秀的網站在設計上都很有創新性,但是需要注意一個點,在輪播中不只有自動播放,還需要考慮用戶手動切換,因為在實際用戶瀏覽中可能會對產品的播放時間達不到預期,此時則會使用手動切換,除去可點擊的進度點,還需要上一張和下一張的入口切換。


在此基礎上需要注意,在處于最后一張banner時,下一張切換還能不能點擊,第一張時上一張切換還能不能切換,這個取決于產品特性和輪播張數,如果輪播張數過小的話則需要進行循環播放,如果過多的頁數則第一步和最后一步不可點擊。

切換的距離和位置

上一張和下一張的距離遠近取決于banner的大小,如果輪播banner占比較大時則需要考慮用戶的操作時長,距離越短時間越快,為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出,便于用戶尋找。


如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大,保持視覺平衡,因為小區域banner用戶能夠更加全局的觀看,在使用上不會猶豫。




反觀移動端在輪播中除了展示banner進度外很少展示切換按鈕,移動端更加依賴手勢交互。


六、對輪播進行分類

當輪播banner過多時利用標簽進行分類,用戶通過點擊標簽進行查看相關的輪播組合。


此方式更適合一些電商平臺、新聞網站這種內容過多的產品


如下圖國外社交媒體網站則使用了標簽進行分類,此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。


七、使用縮略圖進行預知

在banner首屏中,顯示的內容越多,越能激發用戶進行點擊,像上面講過的農業產品網站就使用下一張預覽圖的形式進行展示,當然不僅局限于這種形式,如下圖中的餐飲網站把所有的輪播banner展示給用戶觀看。


相對于縮放圖,圖標展示效果上也較好,空間占用更少,使用這種方式需要謹慎,對圖標的識別性要求較高,我印象中能夠使用的這種方法的網站是蘋果官網,讓產品抽象化展示。


在移動端也存在這種設計手法,但是基于分辨率原因移動端的縮略圖展示過少,最常見的如下圖中的馬蜂窩和企鵝電競。






八、輪播個性化

輪播最大的缺陷則是像剛開始講的用戶會默認為廣告,對此可以使用個性化設計突破用戶心理障礙,使輪播banner更具備親和力。


如下圖中的數碼科技網站,利用產品與背景的結合營造出一種功能性的展示。


再例如下圖中蘋果官網入口,結合百度的定制化功能在大搜中進行個性化處理,把常規的banner輪播以功能卡片形式進行展示,同時卡片承載產品動畫引導用戶進行點擊。


蘋果官網進入后隨意點擊產品介紹頁后會發現,蘋果把輪播結合鼠標滾輪營造沉浸式觀看,每個屏效內都展示產品一個功能特點,打破傳統banner的展現形式。




九、自動輪播時間

自動播放的輪播會根據用戶的耐心和用戶的訴求進行調整優先級,如我們平常使用產品時會忽略banner廣告,我們會更加關注移動中的東西,特別是在移動端上通常是banner進行輪播時才會關注。


谷歌設計團隊曾對banner輪播的時間進行測試,測試結果得出5s-7s的輪播時間最佳,在這個時間內用戶有足夠的時間對輪播banner上的產品內容進行了解。


如下圖谷歌商店的輪播時間設定在6s。

同時還需要注意,在自動播放的過程中如果用戶鼠標hover上去后,則需要判定播放暫定,避免用戶錯過感興趣的內容。




十、總結

本文從輪播的樣式、特性、用戶對輪播的認知等多方面的介紹,在實際產品中輪播有很多可用性上的問題存在,我們在設計中則需要根據自己產品的特性、用戶群體特點等多維度去思考適合什么樣的輪播形式。

文章來源:站酷   作者:愛吃貓的魚——

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


交互設計:如何做到周到?

博博

在涉及體驗細節的小需求上,避免所有的不周到,方才是周到


前兩篇,探討了個人對交互設計價值觀的理解,以及其對從業者和用戶的價值。


這一篇,我們就來探討一下,如何做到之前提到的 4 點價值觀。


先從“周到“開始。


僅為一家之言。歡迎留言交流,說出你的看法。



01 怎樣算是周到?


本著嚴謹的態度,先捋一捋概念。


常言道,金杯銀杯,不如百姓口碑。


同理,周不周到,最終還是用戶說了算。那用戶是怎么評判的呢?通常是憑主觀感受。


拿上篇文章中網易號文章編輯頁面的例子來說,因為“保存”和“存草稿”功能做的不夠好,所以給筆者留下了不夠周到的印象。


翻譯過來,就是,一些體驗細節,影響了用戶的印象。


《設計師要懂心理學》這本書中有條原則,叫“整體認知主要依靠周邊視覺而非中央視覺”。


講的是視覺和 UI 層面的用戶認知。就是說,用戶會關注并不顯眼的邊邊角角的設計,而且這些邊邊角角的設計會影響用戶對整體設計的認知和印象。


舉個例子。假如說,微博信息流頁面的掃一掃圖標,在風格、大小等方面和其它圖標不統一,就會給用戶留下比較糟糕的印象,用戶很可能會覺得微博的設計不夠專業。


這些是 UI 設計層面的。在交互設計層面,也是類似的道理:體驗細節會影響用戶的認知。


總的來說,至少在常用的交互細節上,不要給用戶留下負面印象,也不要讓用戶產生負面情緒,避免所有的不周到,才算是周到。




02 如何做到周到


個人覺得,最關鍵的地方,是滿足好小需求。



啥是小需求?


個人觀點,籠統的講, 小需求是一種共性需求, 主要是一些體驗細節。比如信息的分類與展示、銜接不同頁面的各種彈窗與提示、對各種狀態的提示、對各種情況的到位解釋,等等。


有小需求,就有大需求。


所謂大需求,更多是一種個性需求, 不同的產品,會有不同的大需求。比如短視頻產品,它的大需求會包含視頻的拍攝、上傳、播放等;資訊類產品,它的大需求則包含文章的撰寫、編輯、發布、查看等。



工作經歷,筆者見過一些交互設計不夠周到的產品。它們的共同特點就是: 大需求基本上得到了很好的滿足,小需求沒有得到很好的滿足。


這一大段,就圍繞如何更好的滿足小需求來展開。主要建議如下。




1 工欲善其事,必先利其器


筆者有個客戶,是從事教育行業的,之前并沒有接觸過互聯網行業的產品與設計工作。


這位客戶找到筆者的時候,是想要設計一款小程序的界面。當時客戶非常自豪的對筆者說,這個(原型)是我用墨刀畫的,現學現做。


說起墨刀,本人也用過。和 Axure 相比,確實好用太多,在簡潔性和智能性方面,感覺和 Sketch 有異曲同工之處。


關于墨刀如何好用,網上已經有太多溢美之詞。筆者就結合自己的使用經歷,簡單總結一下:


1 好用,上手快。零基礎,只要會操作常用辦公軟件,簡單學一下就能上手

2 內置主流控件(iOS,安卓,WeUI等),非常方便
3 能在手機端預覽。加入鏈接和動效后,會很酷

4 能查看頁面之間的跳轉邏輯。借助工作流功能,可實現這一點


以上主要是墨刀自身的優點。結合本段主題,我們再探討一下,對于日常工作,墨刀這把利器有哪些優勢。


1.1 可以把更多精力花在創作上


當我們不會用一款工具時,通常會有一些挫敗感。如果必須要用,接著很可能就會有一點焦灼了。


而墨刀,基本上不會讓我們體會到這些感覺。


我們也不用花無謂的時間去學習一些艱難的高深的技法,而是可以把更多的時間花在“創作”這件事上。


1.2 可以更好的去滿足小需求


部分公司,可能面臨如下情況。


公司沒有專門的交互設計師,產品的原型由產品經理來畫。產品經理本身還兼任項目經理。


如果項目又特別趕,客觀上,產品經理確實沒有太多時間去關注交互的體驗細節。


主觀上,如果產品經理對這些交互細節的興趣或重視程度不足、同時產品經理上面的決策層也不去抓這些體驗細節,最終的結果,就是產品的原型上可能會丟失很多體驗細節。


筆者就有類似的經歷。


一款 App,產品經理用 Axure 畫的原型。評審或宣講需求的時候,大家都是在電腦或會議室大屏幕上來看這個原型,同時所有人最先關注的是大需求。


理解完大需求,會有部分同學就大需求提出自己的看法或建議。最后,才會有部分同學就小需求指出不足并提出建議。


受限于職責、時間等各種因素,大家也不可能針對小需求提出太多建議。結果就是,仍然會有相當數量的小需求被遺漏,或者沒有被很好的滿足。


墨刀有兩個功能,可以較好的規避這些問題。一個是工作流功能,一個是手機端預覽功能。


工作流功能,類似流程圖,即把所有頁面以合乎邏輯的方式鏈接起來??陀^上,會促使我們畫出所有包含小需求的頁面,包括彈窗、狀態提示等。


支持多人的手機端預覽功能,使得我們在手機上,可以通過點擊等方式來模擬體驗這款 App。這樣的環境下,我們會更容易理解大需求,也更容易發現小需求存在的問題。


所以,個人的建議,就是用墨刀來畫原型,同時把工作流和多人手機端預覽(針對 App、小程序)這兩項,作為硬性標準。


2 去用去感受


一款產品,在體驗或使用時,非常容易發現問題。


因為這時候,我們可以松弛下來,把自己切換成普通用戶。忘掉所有費腦子的需求和設計原理,只依賴經驗和直覺來用這款產品。我們的主觀感受,會告訴我們,這款產品的交互,到底周不周到。


據陸樹燊的《微信團隊的實驗室文化》一文顯示,張小龍評審微信的功能,不看原型圖,不看設計稿,也不看 Demo,而是體驗前后臺代碼開發好后的產品。這就意味著,如果一個功能在給到用戶前有 N 個方案,就會有 N 個方案對應的前后臺代碼。


一定程度上,微信團隊就是通過這種在正式發布前反復試錯、不斷打磨的方式,最終給用戶提供了優秀的交互體驗。


估計,絕大部分團隊和公司,都做不到微信這樣,開發 N 個版本,并去一一體驗和比較這 N 個版本。


無法體驗已經開發好的 N 個版本。但是,在真實的設備上體驗 N 個原型,我們還是可以做到的。


原型雖然沒有開發好的產品那么順暢和流暢,但是,如果用墨刀在手機端體驗一款加了鏈接和動效的 App 原型,一樣可以發現很多問題。


不過,根據經歷和觀察,筆者發現,我們人類,是不喜歡體驗原型的。


想一想,平常工作中,我們可能會樂此不疲的去體驗開發好的測試版產品。但對于原型,大部分時候,都是匆匆忙忙就過掉了。


個人有個猜測,就好像人類喜歡逗貓遛狗、卻不太喜歡逗桌子上的模型貓和模型狗一樣,我們人類是不太愿意花費太多時間和精力去和原型這種“假產品”互動的。


所以,某種程度上,體驗原型,是一種反人性的行為。


但卻是一種非常經濟和高效的方法。


因為首先,大部分時候,我們都是先選中一個原型方案,然后去設計、去開發;其次,等到開發好進入測試環節,這時候,原型往往就成了測試的標準,依靠測試來優化原型是不現實的。


所以,結合現狀,綜合來看,小需求能不能得到很好的滿足,很大程度上還是要依靠原型。


也就是說,很有必要對原型進行優化。具體方法,就是在真實的設備上體驗原型、反復體驗、多人體驗,并進行相應優化。


3 參考設計規范


如前所述,用利器來創作原型,反復在原型里體驗產品,這些強調的是內部力量,即自身的努力。


下面,再談一談外部力量,即外界海量的知識與經驗。


說起外界知識,除了直接參考其他產品的設計以外,大家參考最多的,可能就是《iOS Human Interface Guidelines》和《Material Design》這些設計規范了。


根據筆者的實際經驗,這兩個來自蘋果和谷歌的設計規范,很多時候,我們都是拿它們當字典用。即哪一點不會或不太確定的時候,去翻一翻查一查。


雖然這倆規范很優秀,但是卻很難被我們“物盡其用”,因為它們的知識體系過于龐大,有點像一本字典。拿著“字典”里的每一條原則去檢驗我們的交互設計,這是很難做到的。


但是有一個設計規范,去非常適合拿來檢驗我們的交互設計,那就是尼爾森十大可用性原則。


太詳細的就不贅述了,這里我們再簡單回顧下這十條原則。


1) 狀態可見

用戶時刻清楚,正在發生什么


2) 環境貼切

營造一個用戶熟悉的環境,比如語言、詞語、圖標等


3) 用戶可控

控制權交給用戶,并且多數時候,考慮支持撤銷重做


4) 一致性

方方面面的統一,比如文案、視覺、操作等


5) 防錯

盡最大可能,幫助用戶,避免用戶犯錯


6) 易?。鹤R別比記憶好

通過把組件、按鈕等元素可見化,降低用戶記憶負擔


7) 靈活高效

優先考慮人數最多的中級用戶,同時兼顧高級和初級用戶


8) 易掃:優美且簡約

閱讀體驗要好,掃視體驗也要好;保持簡約和美觀


9) 容錯

幫助用戶識別、診斷,并從錯誤中恢復


10) 人性化幫助

日常的使用最好脫離幫助文檔,但有必要提供幫助文檔



個人非常建議,在日常工作中,把尼爾森十大可用性原則作為一把標尺,來時時刻刻檢驗我們的交互設計。



結語


交互設計,在涉及體驗細節的小需求上,避免所有的不周到,方才是周到。


用利器創作原型,要包含流程圖;多體驗原型或產品,以體驗結果為準、而非討論結果為準;參考優秀的設計規范,用尼爾森十大可用性原則來檢驗原型。


以上三點,可以幫助我們做到交互設計的周到。


其中,個人認為,最為核心的是第二點:多體驗原型或產品,直到自己覺得周到為止。


因為,正如電影《霸王別姬》的一句臺詞所說:人,得自個兒成全自個兒。


文章來源:站酷   作者:SnowDesign


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

10大交互設計原則,大廠都在用

博博

UI設計師到底需要交互設計能力?

最近有同學問老王,UI設計師是不是需要交互設計能力?


當然需要,不懂交互的UI不是好UI~


首先UI設計不僅僅需要把功能需求可視化,還需要注重用戶體驗。所謂用戶體驗,其實就是用戶與頁面的交互。而在交互設計中有很多的方法和理論,如格式塔心理學、尼爾森可用性原則、7+2法制、3次點擊法制、功能可見性原則、菲茨定律等。他們大多的方法也是共同的。


所以呢,今天老王來說說交互設計用的最多的原則——尼爾森十大可用性原則。


1、預見性原則


很多情況用戶是不知道當前狀態的,所以在適當的時間內做出反饋很重要。不僅能讓用戶知道情況,還能防止用戶發生錯誤操作。常見反饋有刷新提示、新頁面加載提示、支付提示、下載提示。除了結果反饋提示外,對于進程中的頁面會用進度條進行表現。



今日頭條APP首頁中,看過的文章標題變為了灰色、而沒讀過的文章標題依舊保留了黑色字體。


2、場景化原則

簡單來說就是讓軟件看起來跟符合真實世界,還原現實認知。通過直觀的視覺快速傳達給用戶。


音樂軟件通過模擬現實唱片并結合旋轉的播放動畫,從而降低了學習成本,更輕松的理解界面。


3、可控性原則

說白了就是給用戶發后悔藥,當用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關功能。買錯商品可以無條件包郵退回。


拼多多凸顯了“退貨免運費”“7無理由退回”服務,解決了用戶買到不滿意產品的售后擔心。減少了承擔運費的成本,從而促使了用戶快速下單。


4、一致性原則

一個好的產品從視覺上首先是統一的,色彩、字體、元素保持統一,能加強用戶的記憶力。在交互中同樣如此,頁面結構、操作反饋都需要保持一致性。



QQ首頁列表中不管你點擊那一條目,下一級界面都是由右往左滑出。點擊左上角返回按鈕,會從左往右滑回,體驗完全一致;幾乎所有產品進入下一層級頁面的交互方式都是如此。


5、防錯原則

為了減少用戶錯誤的可行性,進階是給出錯誤反饋是不夠的,用心一點的設計師其實會發現很多的產品是這樣做的。為了防止錯誤的發生,會進行防錯設計。


比如在發朋圈時,點擊返回按鈕出現的提示彈窗。彈出框方式會增加不可逆操作的難度,減少操作刪除帶來的順勢。更人性化的是,提示給出了保留和不保留按鈕選擇,選擇保留退出還可以再次編輯。


6、協助記憶原則

通過把組件、按鈕及選項可見化,減少用戶的記憶負荷,讓使用更輕松。在使用過程中不需要記住上一頁面的信息就能完成當前頁的操作。


通常更新完APP之后,會出現新功能引導。引導提示能告訴用戶新功能所在的位置和作用。這也是協助記憶原則的體現。


7、靈活高效原則

好的產品不僅僅需要滿足新用戶,還需要滿足深度用戶。保證第一次使用者,能清晰明白功能。對于老用戶需要提供更高效使用方式。


對用戶重復使用的功能,提供便捷按鈕。比如叮咚買菜的再次購買。


8、輕量化原則


適當的留白能讓頁面功能突出,也能讓視覺更加舒服。精致的圖形元素能給用戶留下好的印象。


很多K12的產品會運用IP形象進行延展,不僅強化了品牌記憶力,更增強了互動感。


9、容錯原則



10、人性化幫助原則



好了,以上就老王對尼爾森十大原則的解析。其實原理很簡單,甚至很多都是很直觀的廢話,但如果不把它們一條條列出來,還是有很多人連這些廢話都做不到。

關注細節,才能成就大事!


文章來源:站酷   作者:micu設計


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


交互設計知識總結

博博

一、什么是交互設計?

先來看一下百度百科的定義

交互設計(英文Interaction Design, 縮寫IXD),是定義、設計人造系統的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關系,以“在充滿社會復雜性的物質世界中嵌入信息技術”為中心。交互系統設計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析,關注以人為本的用戶需求。簡而言之,交互設計是解決特定場景下的人群如何高效使用機器或軟件的目標行為。


為什么要做交互設計

在使用網站,軟件,消費產品或各種服務的時候(實際上是在同它們交互),使用過程中的感覺就是一種交互體驗。隨著網絡和新技術的發展,各種新產品和交互方式越來越多,人們也越來越重視對交互的體驗。當大型計算機剛剛研制出來的時候,可能為當初的使用者本身就是該行業的專家,沒有人去關注使用者的感覺;相反,一切都圍繞機器的需要來組織,程序員通過打孔卡片來輸入機器語言,輸出結果也是機器語言,那個時候同計算機交互的重心是機器本身。當計算機系統的用戶越來越由普通大眾組成的時候,對交互體驗的關注也越來越迫切了。因此交互設計作為一門關注交互體驗的新學科在二十世紀八十年代產生了。


從用戶角度來說,交互設計是一種如何讓產品易用,有效而讓人愉悅的技術,它致力于了解目標用戶和他們的期望,了解用戶在同產品交互時彼此的行為,了解“人”本身的心理和行為特點,同時,還包括了解各種有效的交互方式,并對它們進行增強和擴充。

通過對產品的界面和行為進行交互設計,讓產品和它的使用者之間建立一種有機關系,從而可以有效達到使用者的目標,這就是交互設計的目的。


二、交互設計常用原則和定律有哪些?


尼爾森十大可用性原則


1、狀態可見原則

系統應該讓用戶時刻清楚當前發生了什么事情,也就是快速的讓用戶了解自己處于何種狀態、對過去發生、當前目標、以及對未來去向有所了解,一般的方法是在合適的時間給用戶適當的反饋,防止用戶使用出現錯誤。

即在用戶操作界面功能時給予實時反饋,例如:頁面加載狀態提示、按鈕點擊后的狀態變化、進度條提示等。

2、環境貼切原則

設計的一切表現和表述,盡可能貼近用戶所在的環境,將現實環境的操作功能巧妙的轉化為線上功能,使其貼近用戶。使用用戶能聽懂的專業術語,涉及到專業化語言時要轉化成用戶熟悉的語言。

即模擬真實的事物,使用戶更容易理解。例如:天氣應用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場景和物品,降低理解成本。

3、操作可控原則

對于用戶的誤操作,提供二次確認或者撤銷的功能,這樣可提高用戶的操作可控性。

例如:刪除聯系人二次確認提示、消息可撤回操作。

4、一致性原則

遵循統一的產品設計規范/邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。

一致性包含視覺交互、文案描述、組建樣式等,例如:微信小程序設計規范。

5、防錯原則

設置防錯的機制,減少用戶犯錯。在用戶選擇動作發生之前,就要防止用戶容易混淆或者錯誤的選擇。

例如:用戶名稱校驗提示、手機號碼位數限制等。

6、易取原則

減少用戶記憶負荷,在適合的時機給用戶需要獲取的信息。

例如:驗證碼讀取、找人轉賬提示等。

7、靈活高效原則

提供靈活的操作和高效的獲取信息能力。

例如:手機號碼一鍵登錄、消息關鍵字識別等。

8、優美簡約原則

保留產品最主要的信息,如果不是優先級最高,要盡一切可能避免去影響產品的簡潔和美觀。

9、容錯原則

用戶在使用產品過程中出現了問題,及時準確的告知用戶出現問題的原因。

例如:信息輸入提示、搜索無結果等。

10、提供人性化幫助

在用戶需要的時候提供必要的幫助說明。

例如:新功能引導、解釋說明文案等。



七個交互設計定律


1、菲茲定律

點擊一個目標的時間同以下兩個因素有關:

(1)設備當前位置和目標位置的距離(D)。距離越長,所用時間越長;

(2)目標的大?。⊿)。目標越大,所用時間越短。

該定律經常運用于鼠標從點A到點B的運動。

例如常用按鈕的尺寸設計等。

2、??硕?

一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。

交互設計中要合理設置選項,以免用戶使用中決策時間過長,降低使用效率。

3、米勒7±2定律

喬治米勒對短時記憶能力進行了定量研究,他發現人類頭腦最好的狀態能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息后人類的頭腦就開始出錯。

例如:手機號碼的分位顯示、應用中標簽欄數量等

4、鄰近性法則

人們通常將距離近的事物劃分為一組。

界面設計中可以用對象間的相對距離來區分信息層級。

5、復雜性守恒定律

每個應用程序都具有其內在的、無法簡化的復雜度。無論在產品開發環節還是在用戶與產品的交互環節,這一固有的復雜度都無法依照我們的意愿去除,只能設法調整、平衡。

例如:在智能手機出現之前,手機上的操作按鈕都是實體按鈕。在智能手機出現手,手機被整個屏幕占據后,所有的操作都集合在了手機系統之中,等于把物理操作轉移到了系統操作中,其本身的功能復雜程度并沒有發生改變,只是轉移了而已。


6、防錯原則

大部分的意外都是由設計的疏忽,而不是人為操作疏忽。因此,在設計中要有必要的防錯機制;在此,特別要注意在用戶操作具有毀滅性效果的功能時要有提示,防止用戶犯不可挽回的錯誤。

例如:登錄時用戶名校驗,手機號碼位數限制等。

7、奧卡姆剃刀原則

“切勿浪費較多東西去做,用較少的東西,同樣可以做好的事情。

”這個原理稱為“如無必要,勿增實體”,即“簡單有效原理”。

在設計中可以使用戶關注最主要的信息而非其它無關緊要的事物,從而提升使用效率。




三、交互設計如何開展工作


首先在交互設計師拿到需求后不要急著打開軟件開始繪制線框圖,而是要先分析需求,了解產品的戰略層和范圍層的業務目標。把握產品設計大方向,只有方向對了后面的工作才是有價值的。

把握了產品方向,下面就該進行需求的分析,

首先針對需求考慮5個問題:

1、為什么要做這個功能?(業務需求)

2、產品期望得到怎樣的成果?(業務目標)

3、誰來使用?(目標用戶)

4、他們要怎樣使用?(用戶需求)

5、如何讓他們都來使用?(將業務目標轉化為用戶行為)

清楚這5個問題后,再根據交互設計流程進行一步一步的進行

這實際上就是對需求的戰略層分析。

我們進一步分析業務需求(業務目的、業務目標)和用戶需求(目標用戶、用戶體驗目標),把握關鍵因素(用戶的動機、擔憂和影響目標達成的障礙)。

歸納這些需求,明確設計策略。


將“業務目標”轉化為“用戶行為”,通過引導用戶的使用來幫助產品實現目標。

從設計“用戶行為”到設計“用戶界面”,用戶行為決定了用戶界面,用戶界面也導致了用戶會出現什么樣的行為。

設計需求分析方法就是要幫助用戶創造動機、排除擔憂、解決障礙。



四、如何進行用戶研究,方法有哪些


評估的形式及方法


常見的評估形式分為三類:

1、評估主體:根據評估的主體不同來進行區分,即誰來做評估。

按照評估主體來區分主要有兩個主體:用戶和專家

用戶評估主要靠收集用戶使用數據,也就是用戶測試,它的數據相對客觀,但時間和費用較多,評估范圍較窄。

專家評估是讓工程師及設計師等專家基于自身的專業知識和經驗進行評估的一種方式。專家評估相對主觀,但費時少、費用少、評估范圍窄。

兩種評估方法可以相互補充,并結合使用。


2、評估性質:例如定性評估、定量評估或著其它方式。

按照評估的性質來區分可以分為定量評估和定性評估。

定量評估是指對可以計量的部分進行評價,如點擊量、使用率等,可以用數據來說明。

定性評估是指對非計量性的部分進行評價,如流暢度、舒適性、創造性等進行評價。它只能表示一個度,無法準確用數據來說明問題。


3、評估過程:按照評估的過程來進行區分。

從評估的過程來區分可以分為理性評估和感性評估。

理性評估相對客觀,從客觀的角度出發判斷客觀事物。

感性評估更為主觀,評估結果并沒有客觀規律。

在實際應用中也需要將理性評估和感性評估結合使用,才能完整的完成我們的任務,達到我們的目標。


常見的評估方法有四種:

1、原型評估方法:在產品研發過程中,對于界面設計以及程序的測試來獲得用戶的反饋是至關重要的。以用戶為中心和交互式設計的重要因素之一就是原型方法,原型方法的目的是將界面設計與用戶的需求進行匹配。

一般來說原型評估方法分為三大類型:

(1)快速原型:原型迅速成型并分配實施,在原型實驗收集的信息基礎上,系統從草案中得以完善。

(2)增量原型:應用與大型系統,從系統的基本骨架開始,需要階段性的安裝,及系統的本質特征是在初次安裝完成后允許階段性測試,以減少遺漏的重要特征。

(3)演化原型:對前期的設計原型不斷進行補充和優化,直到成為最后的系統。


2、簡易測試評估方法

在條件不允許的情況下,可以采取簡易的方法來對用戶體驗進行評價。步驟是:

(1)實驗室環境準備:準備好測試用的電腦或其他媒介。兩個房間,房間1用來對被測試者進行測試,房間2用于設計師和工程師的觀察。

(2)被試選擇:分為用戶組和專家組。

(3)進行測試:房間1中被試者根據自己的選擇進行操作和測試,同時說出自己的內心想法,觀察員在調查表上記錄被試者的每一次的操作情況,包括出錯情況和被試者的口語描述,當被試者在測試過程中遇到困難或操作無法進行時,觀察員要給予一定的客觀提示。房間2中通過相關設備將房間1的情況傳輸到房間2,設計師和工程師實時觀察和記錄被試者的情況,以便今后對產品做進一步的修改和完善。

(4)結果分析:通過多次測試后,將測試結果匯總,提取出交互設計中存在的問題,以及對交互設計有益的建議形成測試報告。


3、眼動評估方法

眼動追蹤可以用來評價對產品(包括硬件產品和軟件產品)設計的感性意象,評測產品設計特征。眼動評估的主要指標有注視熱點圖、搜索過程測量指標、興趣區域即用戶視覺注意的焦點區??梢越Y合口語分析法了解用戶的所想 和所做。


4、腦電評估方法

通過對腦電信號的分析,研究者可以探索大腦的認知加工過程和受試者的心理狀況。近年來腦電評估方法在人機交互心理學等領域應用廣泛,被用來評估交互設計、人機界面、產品設計等方面的內容。但是腦電評估也有一定的缺陷,例如空間分辨率上的局限性,因而對某些認知過程和腦區的定位并不是很準確。第二,在許多相似的實驗研究中,由于研究者采用了不同的實驗材料和方法等,實驗結果也存在差異性。第三 ,由于采集記錄時間的滯后性,腦電所記錄的并不一定是當下被試者所想到的內容。


采取哪種方法來開展用戶測試和評估,要根據不同的任務結合不同的環境來開展,比如:時間、成本、資源等。



啟發式評估法

是專家評估法的一種,也被稱為經驗性評估,最初由Nielsen博士提出。簡單來說,啟發式評估是一種簡易的可用性評估方法,使用一套相對簡單、通用、有啟發性的可用性原則,讓幾個評審根據專業知識和經驗來進行評估,發現產品潛在的可用性問題。


啟發式評估的兩大要素:評估者和評估參照的原則。   


對評估者的要求主要有四個方面:

(1)人數:推薦3-5人,有時會更少

(2)知識:最好同時具有可用性知識及設計知識

(3)身份:最好是非設計者本人,否者不具有客觀性

(4)崗位:設計師或用戶研究員


評估參照的原則有:尼爾森十大可用性原則、八項黃金法則、首頁可用性指南、ios設計指南、拓展原則、HHS網頁設計與可用性指南等。具體需要根據實際項目來選擇,常用的是尼爾森十大交互原則。


什么時候適合使用啟發式評估法?

交互設計和UI設計階段、測試優化和產品發布后的階段。


啟發式評估的優缺點有哪些?

優點:成本低、效率高、發現大多數可用性問題,甚至是用戶測試時不會出現的問題。

缺點:不能代表真實用戶,相對主觀、有時候發現問題過多、對評估人員知識背景要求較高。


什么時候適用?

(1)適合時間、資源有限的情況下快速發現可用性問題,降低風險及成本。

(2)版本變動不大的情況下,小成本檢驗。

(3)作為可用性測試的之前準備。


啟發式評估流程是什么?

(1)準備階段:確定范圍、背景調查、參考評估原則、評委邀約、材料準備

(2)執行階段:任務走查、整體走查、結果記錄

(3)分析階段:匯總討論、報告總結、優化方案



可用性測試


先來看一下我們在平時工作中常常會聽到這樣的問題

產品經理:我們的用戶覺得產品好不好用?使用過程中會不會遇到問題?他們是否滿意?

設計師:設計的過程有一些糾結的地方,不知道實際用戶是怎么理解和操作的怎么辦?

產品開發后:想在大推前檢驗一下產品是否靠譜,適不適合大推?


當我們遇到這樣的一些問題時,如何找到方法快速得到答案呢?

那就是接下來要介紹的可用性測試方法。


可用性測試是一種常用的、高效的方法。

它的定義是:通過觀察具有代表性的用戶,完成產品的典型任務,從而找出產品可用性問題并解決,目的是為了改善產品,讓產品更容易使用。


什么時候適合做可用性測試呢?

一般是在:交互設計或UI設計、測試優化、正式發布三個階段來做。當然是越早做越好,可以盡早發現問題并及時調整。


類型分為兩種:形成式和總結式

形成式特點:小樣本、發現問題為主、不能做定量對比。

總結式特點:大樣本(30人以上)、定量的評估、可以做對比評估


可用性測試可以解決什么樣的問題?

1、發現問題,產品在體驗上是否存在問題

2、檢驗實現,期望的設計目的有沒有達成,是否滿足了用戶的期望

3、產品評估,用戶是否會滿意

4、理解用戶,了解用戶行為習慣,了解用戶認知,找到某些問題的原因


測試流程是什么?

整體上分為4個階段:1、準備  2、測試  3、分析  4、優化


1、準備階段要做的有哪些?


確定目標:確定測試目標決定了后面測試過程要怎樣去設計

常見的測試目標有:

·對整個產品做可用性評估

·對新增的功能模塊進行評估

·提前觀察新方案對新老用戶有怎樣的影響

·提前檢測改版是否達到預計目標

·設計時存在爭議,如何選擇解決方案

·某個環節流失率較高,檢測是否為設計原因導致

·需要拓展某一類特殊用戶,測試針對這類用戶在設計上是否需要作出調整


準備測試方案

方案中應當包含以下內容:

·測試目的:明確測試的目的及范圍,測試目的決定了測試方案

·測試關注點:與負責的設計師一起梳理測試中要關注的問題

·用戶招募:招募要求,樣本配比,招募渠道

·經費預算:獎勵的形式和額度

·時間計劃:用于把控時間計劃


撰寫測試腳本:設計測試任務,通過用戶行為去觀察提問來獲得我們想要的內容

基本的流程有:

·暖場:3min,簡單聊天,消除用戶的緊張情緒

·測試說明:2min,對測試內容規則做說明

·測試前訪談:10min,了解用戶基本信息

·簡單試用:3min,讓用戶熟悉產品

·測試執行:30-45min,提示任務并觀察

·事后訪談:15min,針對疑點問點追問,填寫評價表

·道別:5min,支付禮金,送用戶離開


招募用戶

招募什么樣的用戶呢?

·根據測試目的來定,找出與測試目標有關的篩選緯度

·特別考慮用戶使用行為相關的特征,例如競品使用經驗,使用產品的目的,用戶的活躍度等

·挑選最核心的緯度,轉化成用戶招募的條件,并盡量客觀化,具體化,可衡量

·避免設置交叉條件過多,導致樣本代表性降低

·學會辨別真假的用戶信息


招募多少用戶合適?

·以發現問題為目的快速可用性測試,6-8名即可

·考慮產品的復雜性,覆蓋人群差異性,適當做調整,拓展到10-15名


招募渠道有哪些?

·公司內部

·現有產品用戶庫

·公司其他產品用戶庫

·熟人,朋友等

·推廣渠道:官微、公眾號、門戶網等

·社區,論壇,qq群等

·第三方調研公司


準備測試素材:低保真或高保真原型,或線上已經可以使用的產品,也可以準備一些量表工具來輔助測試。在測試

過程中需要用到的電腦或手機設備,攝像頭,紙,筆,桌椅等。


測試場地選擇:

·專業可用性測試實驗室:一般對測試質量要求較高,旁聽人數較多且需要采集豐富的數據的時候采用此方法。實驗室有兩個房間,一個測試間,一個觀察間,中間有單向玻璃分隔。測試間中有多角度的攝像頭,用來記錄測試過程,觀察間可以同步看到測試間里的情況,

·普通測試環境:在觀察人數較少(小于3人),條件有限時使用。


預測試階段:正式測試前進行預測試,保證測試流程通暢

·走查:記錄可能出現的問題

·預測試:找人先測試一下

·調整:調整測試流程


正式測試階段

測試參與人員有

·主持人:引導整個測試流程

·記錄員:記錄操作行為,訪談內容,發現問題等

·產品團隊:參與旁聽,觀察,結束后交流

·用戶:完成測試及訪談任務


測試過程中需要觀察的要點:

·用戶是否獨立完成了任務

·是否存在無效操作或不知所措的情況

·用戶是否滿意


結果分析

邊測試邊總結,越及時越好

·測試完一個用戶,做一次小結

·測試結束當天寫小結,與設計師當場討論

·重要問題反饋后再總結分析報告

·邊測邊改,邊改邊測

結果分析4個步驟:1、對發現分類  2、整理不確定項  3、評定優先級  4、結果記錄


撰寫報告

從4個方面來寫:

·總體如何

·有哪些問題

·嚴重程度如何

·建議是什么

·除此之外,還可以圍繞關注的問題,未滿足需求補充分析


優化跟蹤

在測試之后需要出優化的方案,測試優化的過程是循環的。

測試之后如果還有其他問題沒有得到解決,可以結合其他的一些測試方法來得到。



問卷調研

問卷調查法是以書面提出問題的方式搜集數據的一種研究方法,研究者將所要研究的問題編制成問題表格,讓受訪對象以郵寄、當面作答、在線作答或追蹤訪問的方式填寫,從而了解被試者對某一現象或問題的看法和意見。問卷調研可以用于需求挖掘階段,也可以用于產品上線后的評估階段。

如果是想了解用戶對產品上線后的滿意度,可以使用問卷調研的方法。它比較適合去了解用戶的認知態度,也可以附帶了解用戶的行為習慣,


問卷調研的優缺點

優點:統一性、靈活性、量化性、匿名性

缺點:(1)只能獲得書面的信息,而不能了解到生動、具體的情況。(2)缺乏彈性,很難做深入的定性調研。(3)調查者難以了解被調查者是否認真作答,是不是自己填寫的。(4)填寫問卷比較容易,有些別調查者會隨意選擇,或者按照社會主流觀點選擇,這樣會使調查失去真實性。(5)回復效率低,對無回答者的研究比較困難。


問卷調查的使用場景

適用于:(1)需要進行定量分析的調研。(2)需要匿名進行調研的問題。(3)對已有假設進行檢驗。(4)尋找問題隱藏的關聯。(5)對產品設計用戶認知及態度的評估。

不適用于:(1)發現和描述具體問題。(2)探索受訪對象的模糊態度。(3)獲取創新想法。(4)獲取精確的行為數據。


問卷調研流程

1、確定目標:確定調研目的、對象、分析目的和應用對象。

2、調研方案:通過訪談、經驗、理論等,確定調研框架,題目選項,分析思路,投放渠道,相本配比等。

3、問卷設計:問卷設計,問題美化,投放渠道。

4、問卷測試:多人測試,確保問卷的可讀性,邏輯通暢

5、問卷投放:按照計劃好的投放渠道進行投放,回收數據,數據清洗

6、問卷分析及填寫報告:分析及報告填寫,調研結果落地



數據分析

概述:通過在網站或應用中進行數據埋點,獲取用戶對產品的使用和行為數據,并進行基于產品體驗優化的數據進行分析。


數據分析可以做什么?

1、可以做到用戶從哪里來,來了多少

2、獲取用戶屬性,用戶地域,用戶設備

3、訪問了哪些頁面,使用了哪些功能,消費了多少錢,消耗了多少時間

4、哪些流量可能存在問題,忠誠度如何,活躍度如何,有沒有達到目標,和行業相比如何

5、流失情況如何,離開之后是否還回來

可以作為產品的眼鏡和大腦,提供客觀衡量的依據,可以持續優化改進。


數據獲取方式的對比

日志文件:優勢,完整的服務端請求記錄。

                  缺點,日志的獲取和清洗有過濾成本,許多頁面操作無法記錄。

JS頁面標記:優勢,數據獲取可控、靈活,可以對頁面操作記錄進行記錄,獲取數據比較完整豐富。

                      缺點,需要在頁面植入JS標記代碼,某些情況下無法獲取,如當用戶禁用JS功能時。


常用的數據監控平臺

1、第三方監控平臺:如Google Analytics、百度統計、騰訊云分析等

2、自研平臺


數據分析流程

1、監控  2、定義  3、埋點  4、測量  5、分析  6、優化


Web分析常用的指標

PV:是指頁面瀏覽量,網頁瀏覽數實施評價網站流量最常用的指標之一,用戶每一次訪問網站中的頁面均被記錄,對統一頁面多次訪問,訪問量累計

UV:是指獨立訪客,是通過互聯網訪問、瀏覽這個頁面的自然人

UPV:是指唯一身份綜合瀏覽量

訪問:是指在一定時間范圍內,網站所有訪問者對網站發起訪問的總次數,從訪客來到網站到最終關閉網站所有頁面,記為一次訪問

識別用戶的方式:IP、IP+User Agent、cookie、User ID、設備ID、其他


復合指標

跳出率:指用戶來到網站,只瀏覽了一個頁面就離開的訪問次數,占全部訪問次數的百分比,簡稱“來了就走”。跳出率可以被用來衡量流量和頁面質量,高跳出率表示訪問者對著陸頁面不感興趣,沒有繼續訪問更深入的頁面。也可能頁面設計存在問題,也可能是導入的用戶不匹配。跳出率可以通過調整廣告渠道,優化頁面內容來降低。

退出率:訪問者離開網站一次被記錄為一次退出,某一范圍內退出的數量/該范圍的綜合訪問量就是退出率。如果關鍵流程中的某一頁面退出率高,代表某一頁面可能出現了問題。

訪問時長:網站停留時長,頁面停留時長,應用使用時長。訪問量是訪問質量的一個衡量指標,較長的訪問時間說明用戶與產品進行了較多的互動。

訪問深度:可以理解為單個用戶平均訪問的頁面數,是PV/UV的比值。訪問深度也是訪問質量的一個衡量指標,可以考察用戶是否和網站進行了較多互動。這個比值越大,代表網站的粘性越高。

轉化率:指在一個統計周期內,完成轉化目標行為的次數占總訪問次數的比率。根據設置不同目的進行計算,例如注冊轉化率、付款轉化率等,是一個重要的分析指標。


移動端基礎指標

移動端的基礎指標監測與web端略有不同,但分析思路大致相同。指標分為:新增設備、累計設備、啟動次數、單詞使用時長。


常見分析內容

流量分析(哪里來?)、用戶分析(什么樣的用戶?)、行為分析(如何使用的?)、路徑轉化(表現如何?)、流失分析(粘性如何?)



A/B test

A/B測試是一種幫助網頁優化實驗的方法。A/B測試的目的在于通過科學的實驗設計和采集數據的方式,來獲得具有代表性的實驗結論,從而尋找到更好的產品策略。

簡單來說,就是為同一目標制定兩個方案,讓一部分用戶使用A方案,另一部分使用B方案,記錄用戶的使用情況,對比兩個方案的結果,選擇更符合的方案。

A/B test一般會在產品改版正式上線之前使用,來驗證新的設計是否可以提高產品的表現。


A/B test可以測試的元素有:標題、圖片、顏色、社交元素、段落文本、按鈕、導航、任務流程、頁面布局、價格、視頻等??梢淮沃桓淖円粋€元素或一次改變多個元素的方式來測試,這就是兩個測試類型單變量測試和多變量測試。


A/B test工具

Google Website Optimizer:搜索巨頭提供的免費A/B test工具,一個很好的入門級工具,但是沒有一些先進的功能。

Visual Website Optimizer:一個易于使用的A/Btest測試工具,包含功能有所見即所得的編輯器,單機地圖,訪問者分割和標簽等。

Unbounce and Performable:集成著陸設計的A/B測試工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企業級測試工具

App Adhoc Optimizer:國內A/B Test工具,同時支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB測試服務的專業Saas平臺

Optimizely:是網上現有的最專業的AB測試工具之一,它的價格要比其他的工具高很多(也可以免費使用一個月),它提供了一些非常好的功能。

Unbounce:對于登錄頁面的測試來講非常不錯,而且它不僅僅是個測試工具,還可以在無需自己編寫任何代碼的情況下來創建登錄頁面。


如何做A/Btest

1、確定目標,例如提高網站的付費轉化率,降低跳出率等

2、測試方案,建立假設:購買按鈕的顏色會影響點擊率?縮短流程可以提高復費率?改變導航可以降低跳出率等?

3、創建相比較的兩個版本,改變其中的變量

4、發布測試,將部分流量導向B方案,但不一定是5:5

5、數據分析,收集數據,對比AB版本的轉化率、跳出率、留存率等



感謝閱讀!

文章來源:站酷   作者:_微光

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務




交互設計基礎定律——米勒定律

博博

米勒定律:又稱7±2法則。美國心理學家喬治·米勒研究發現,人的短時記憶能力廣度為7±2個信息塊,若超過該范圍人的記憶容易出錯。

米勒定律背景:

1956年經美國心理學家發表了一篇名為《神奇數字7》的論文,論文中討論了一維絕對判斷的極限和短期記憶極限之間的關系:一維絕對判斷的備選數目與短期記憶極限的數目大致相當,數字都在 7 左右徘徊。在后來的好些研究雖然也對論文中的一些概念進行了改善,但這個數字7依然被保留。這也是人們關于短時記憶內容最早期的研究結果,現在也普遍適用在設計中,也就是現在的米勒定律。


米勒定律定義:

從心理學的角度來看,人類處理信息的能力是有限度的。人腦在處理信息塊的時候會受到7±2規則的限制,即人的大腦最多同時處理5到9個信息塊。原因是短期記憶儲存空間的限制,超過9個信息團,將會使得大腦出現錯誤的概率大大提高。

undefined

思考結論:人們的短期記憶有限,通常只能記憶7±2信息塊。信息塊越多,人們能記憶的信息精準度越小,越容易出錯。


米勒定律應用:

在產品設計中,米勒定律可以說是信息內容處理的一條規范準則。通過減少對信息層級的劃分、歸類分組、輔助記憶等,來提高用戶對信息的高效識別與記憶。在追求極致用戶體驗的趨勢下,用戶對信息的預見與計劃在產品設計中也是極為注重,無論在產品設計的初期還是成熟期,合理的信息處理將會大大提高用戶對產品的好感度。


01、控制數量,減少用戶選擇

人們對信息的記憶處理是有限的,通常信息越多我們將越難以記憶。所以在做產品設計的過程中應該控制好信息塊的數量,增強輔助用戶識別與記憶,提高用戶體驗。

undefined

undefined


02、信息分段,輔助用戶記憶

在產品設計時我們經常能遇見一連串信息(數字、文字、段落等)的情況,當信息數量較大的時候,我們可以采用對信息分段的處理方法,將一連串的信息以7±2個內的信息數量為一個段點,輔助用戶記憶。

undefined


03、流程分步,優化用戶操作

經常會遇到信息特別多或者復雜業務場景,特別是在B端產品設計。通常我們都會先梳理業務流程,然后分步驟處理對應的信息。從而減少單屏信息內容過多給用戶帶來的急躁,讓用戶每個步驟都沉浸與當前的操作。


04、信息排序,引導用戶記憶

人們在記憶一組多數據信息塊的時候,通常都會對首末的兩個位置信息塊的記憶會相對比較強,所以在產品設計的時候,需考慮把重要的信息放在首位/末尾位置,引導用戶去記憶該信息。這也就是系列位置效應(首因效應、近因效應)。

undefined


A、首因效應:指在整個序列的信息塊中,相比中間位置的信息,人們對最前面的信息記憶更加清晰。


B、近因效應:指在整個序列的信息塊中,相比中間位置的信息,人們對最后面的信息記憶更加清晰。


C、設計思考:人們對信息流排序的時候應把重要的元素放置在首位或者末尾。若用戶是長期記憶的的話考慮首因效應、短期記憶思考近因效因,人們的記憶不僅受到位置的影響,同時也受時間影響,在不同的場景下合理應用系列位置效應.


總結:

米勒定律在產品設計中的應用主要是解決信息塊對用戶的記憶問題,合理的信息布局和信息處理可以大大的提高用戶對信息的閱讀和記憶。還可以根據不同的業務場景引導和輔助用戶識別和交互,增強用戶對產品的好感與體驗。


文章來源:站酷   作者:TerryChen_

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

交互設計基礎系列:詳解尼爾森10大可用性原則

博博

前言

尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上,提煉出的十項交互設計原則。被廣泛運用于網頁、APP以及各種人機交互領域。

要注意的是,這10項原則是啟發式(heuristics)的、通用的經驗法則,而不是具體的規定。


一、系統狀態的可見性

系統應該通過在合理時間內適當反饋向用戶通知正在發生的事情或者當前的狀態。

不要蒙蔽用戶,溝通是所有關系的基礎,無論人還是設備。

1.合理時間

當系統響應時間小于1秒時,通常正常反饋即可;

當響應時間長于1秒時,我們通常會通過加載動畫、分步加載、占位符加載等方式,減緩用戶等待的焦慮感;

如果超過10秒還沒有得到響應,那么通常會認為這次請求是失敗的,需要給予用戶失敗提示。例如:刷新提示、新頁面加載提示、支付提示、下載提示。



當然加載時間并沒有固定的規定,有個例子是這樣的:

某個APP的用戶反饋說他們的頁面加載太慢了,希望提高服務器反應速度……于是他們對此進行了優化,優化后用戶的反應:新版很給力,很快!

那這個團隊的優化方案是什么呢?

。

。

——他們把小菊花轉圈的速度提快了

2.適當反饋

對用戶操作的適當反饋是用戶界面設計的最基本準則。讓用戶了解當前狀態、位置、是否成功、進度如何,減少不確定性;并引導他們在正確的方向上交互,而不是浪費精力在重復操作上。反饋有:

·狀態反饋

用戶需要知道自己的操作是否被系統感知,所以用戶操作后,應該第一時間給出反饋。最常見的就是各種按鈕的不同狀態,比如未點擊、點擊、不可用狀態,以及選中、未選中狀態。

就拿小說類批量訂閱列表來說,起點通過明顯的線面和顏色區分選中和未選中的章節;而長佩我買的時候是需要反應一下:免費不可選中是淺灰色、未選中是深灰色,選中是綠色……但是初始狀態時深灰色看起來像是選中??


·進度反饋

進度通常有頁面加載進度、下載進度、視頻播放進度等

比如下圖的invision網站,在閱讀文章時通過頂部進度條的反饋,讓用戶知道自己的閱讀進度。



·位置反饋

因為網絡空間中用戶無法像物理空間那樣感知到自己的位置,所以我們需要在視覺上進行提醒,以免用戶迷失。

比如標簽欄、導航欄通過選中狀態來定位當前所在頁面,閱讀、看視頻、聽音樂時系統會記錄當前的位置,下次打開后繼續。


·反饋方式多樣化

反饋可以通過元素的顏色位置、文字、聲音和震動,甚至動效去表達變化。

比如京東,通過產品圖縮小-加入購物車的動效來反饋“商品已加入購物車”,直觀形象。


二、系統與現實世界的匹配

使用用戶熟悉的語言,單詞、短語、圖形,而不是系統導向的術語;遵循現實世界的慣例來呈現信息。

1. 使用目標用戶的語言

這里的語言不僅僅包括文案層面的語言,還包括產品的設計語言(圖形、配色和風格)。

產品使用的語言應該使目標用戶能夠清晰理解的。如果用戶不能理解,他們會感到被忽視和受挫敗,許多人將選擇其他產品完成目標。

特別是現在很多公司選擇耕耘細分市場的產品來分一杯羹,比如針對中老年、青年、兒童的產品,抑或商務、娛樂的產品,都要分別使用符合自己的定位的語言。

比如bilibili的設計語言和每日優鮮的文案語言——

2.模擬現實世界的對象

模仿現實世界的產品或者使用映射,能夠利用人們現有的知識,降低學習成本,使他們輕松快速的理解界面。

像早期擬物化的設計,以及MD的魔法卡片模擬了物理世界中的紙張。IOS的指南針也類似現實世界中的指南針,以便用戶輕松的使用。

熟悉是這些體驗讓用戶愉快的原因。

比如微信閱讀打開書的動效就像現實世界的打開一本書一樣、給medium文章進行標記就像我們現實中使用馬克筆一樣。


三、操作可控、可逆

用戶經常會在使用時發生誤操作,所以產品需要一個非常明確的“緊急出口”幫助他們——即提供取消和重做的功能。

1.撤銷/返回

用戶在使用產品時可以自由進退,遵循從哪里來就可以返回哪里去的原則;比如常用的各種二三級頁面左上角必備的返回按鈕。

當用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關功能,比如聊天類產品的信息都可以短時間內撤銷。

(突然發現這張圖暴露了我每天點外賣的事實 ヽ(。>д<)p

2. 不可逆的操作要給用戶提示

不可逆的操作需要給用戶明顯的提示,以免對用戶產生嚴重的影響。比如刪除功能通常需要二次操作,重要操作會有彈框類提示。

四、一致性和標準化

設計者應遵循一致性原則,統一標準能確保用戶理解各個元素在設計中,并且知道去哪里尋找哪些功能。

1 和用戶的使用習慣保持一致

移動市場成熟的今天,已經有很多約定俗成的慣例。和用戶的習慣一致,意味著用戶不再需要重新學習,各種應用的切換之間沒有學習成本。這也是我認為設計的趨同化未必不是一件好事情的原因。

比如常用的幾種操作手勢、下拉刷新功能、我的/地圖/購物車圖標等

2 產品規范化

在同一個產品中,同一層級的信息應該使用一致的設計語言。

比如導航、彈窗、按鈕、列表,這是我們推行設計組件和規范的一個原因。

除此以外,顏色、文字、圓角、陰影等也是需要注意一致性的。

△谷歌google visual guidelines-google ads


五、防錯原則

用戶經常分心于手頭的事情,因此需要通過提供建議、利用約束來防止無意識錯誤。

1 范圍限制

其實限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。

比如訂房時,對可訂房日期進行限制,防止用戶選錯時間。

2 提供提示

提供清晰的提示,也能防止用戶犯錯,提示包括標簽、文字、顏色、以及反饋狀態等。

比如IOS的鍵盤,選中的字母會放大,提示用戶;輸入文字光標會放大,防止用戶操作失誤。

比如負向操作通常為紅色,紅色是一種警示色,給用戶預警防止誤操作。


六、確認而不是記憶

盡可能減少用戶的記憶負擔,向用戶顯示他們可以識別的內容,而不是自己記憶和填寫。

1. 讓用戶選擇而不是輸入

選擇和輸入的操作成本相差巨大。產品應該給用戶提供選項,讓用戶可以直接選擇,而不是自己輸入。比如淘寶填寫收貨地址

2. 自動讀取、記錄信息,減少操作路徑

在用戶使用產品的過程中,會有產生一些需要記憶的內容、或者操作路徑,這個時候我們要避免用戶記憶,把信息直接提取出來,送到用戶手里。

比如自動讀取短信驗證碼,比如bilibili會提醒上次播放的位置

3.內容可預期

內容可預期,減少用戶操作路徑,防止來回跳轉。

比如起點章節付費時可以直接看到當前的余額、

比如京東金融首頁直接顯示了余額和代還金額(本來應該打個碼的,但是想想我三位數的資產打碼還不夠費勁呢(?_?)

七、靈活性和使用效率

好的產品需要同時兼顧新用戶和資深用戶的需求。

對新用戶來說,需要功能明確、清晰,對于老用戶需要快捷高效使用高頻功能。不可迎合某一種用戶,把不必要的信息占據重要部分。

1.提供快捷入口

在首頁放置常用功能,比如淘寶、支付寶、bilibili等等;或者提供自定義入口,比如猿題庫可以自定義科目

2.允許用戶重復操作

對用戶頻繁使用的功能,提供重復操作入口或者模板。比如美團外賣,可以直接選擇再來一單

3.提供默認選項

通過提供系統默認選項,而減少用戶多余的操作。比如美團、攜程、每日優鮮等當地服務類產品,會默認選擇當前定位的城市;購物會選擇默認收貨地址等

八、簡約設計

不要包含不相關或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內容的相對可見性。

1建立清晰的視覺層級

能夠方便用戶無障礙的瀏覽信息,越重要的內容越突出。

通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現。

2 降低頁面的干擾

頁面中背景、裝飾元素視覺過重的話,就會干擾到用戶對于信息的閱讀。

比如以圖片為背景,我們要考慮圖片上文字的識別性;列表頁過重的分割線、頁面內過多的裝飾元素都會給干擾信息閱讀……

比如下廚房菜單推薦的卡片,字體識別度特別差;移動掌廳的這個模塊,字體色和背景色對比不清晰、以及字體太小,都會干擾用戶識別信息——我們需要做的是降低這些干擾


九、幫助用戶識別、診斷和修復錯誤

錯誤消息應以簡單的語言表示,準確指出問題,并提出解決方案。

1.錯誤提示要直觀

當發生錯誤時,提示信息一定要直觀,視覺上能夠引起用戶注意,可視化處理,文案要簡單概要。比如賬號密碼錯誤、以及各種異常狀態

2.提供解決方案

當用戶遇到錯誤時,不要只是報錯,盡可能提供詳盡的說明文字和指導方向,遇到了什么問題,以及如何解決等等。

十、提供幫助文檔

幫助性內容有一次性提示、常駐提示和幫助文檔。

1 一次性提示

多用在用戶第一次使用,或者產品更新后,通常為氣泡形式,或者snakebar的形式呈現。

2 常駐提示

用于操作時必須注意到的內容,在頁面中以文本或者標簽形式呈現。

3 幫助文檔

一般用于解釋規則或者熱點問題,通常以超鏈接的形式存在于頁面中;或者以集合形式位于設置頁中,此時需要注意要易于檢索。

總結

本篇文章主要介紹了尼爾森的10大可用性原則,以及介紹了適用范圍和案例說明。最后我們再來復習一遍加深記憶吧~


文章來源:站酷   作者:白鷺漫談

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


數字時代早教產品交互創新的解困與回歸

鶴鶴

課題背景

今年,突如其來的疫情使兒童家庭學習成為重要學習場景,線上教育與家庭早教類產品的需求陡然增加。但線上教育和早教行業已然成為一片紅海,數字化產品和服務的同質化嚴重,各大公司和廠商都希望形成差異化競爭,以在激烈的賽道中爭得一席之地。目前,市面上的早教產品大都聚焦于兒童學習效率提升和內容豐富,卻忽視了兒童對于早教類產品的真實體驗與訴求。


MOMOUX設計團隊致力于創造有溫度的體驗,主張將真實用戶需求帶入產品創新與研發流程,使用系統化的方法重構生活場景并發覺用戶訴求,從而創造貼合用戶的產品及體驗,以解產品創新之困。




本期研究方法與策略


在研究中,MOMOUX團隊基于VIP(Vision in design)研究框架,對現有的兒童早教學習情境進行解構與重構

VIP設計方法框架包含三個關鍵流程:提取因素、構建情境、定義交互。VIP設計方法首先通過深度洞察對現有環境下的產品、用戶、場景與體驗進行系統化因素提取與解構;其次通過提取的因素重構出新的情境,最后在新情境下定義未來產品的交互方式、創造全新產品體驗。通過深度洞察與研究,重新定義了未來兒童早教產品的四個創新情境和交互趨勢,分別是:多孩互動、自然探索、擁抱屏幕、多元關系。

這四個情境反映了未來的兒童早教學習場景中,我們對人與人、人與物、人與環境之間關系的洞見,是我們根據真實用戶情況對未來數字數代早教產品交互方式與情境的大膽暢想。希望此內容能給兒童早教行業帶來一些不同的聲音和啟發,能夠在數字化時代為兒童發聲,回應數字化中兒童學習需求及市場發展的需求。




趨勢一  多孩互動


國家統計局的數據顯示:2019年全年國內新生人口1465萬,二胎占比57%。 隨著“全面二孩”政策的放開,不同年齡段的孩子們在同一個家庭中共同生活學習成長將成為設計師與產品開發者無法忽視的重要場景。 


What‘s going on?


調研發現,多孩家庭中照顧孩子的任務非常繁重。通常,一部分母親會轉為全職媽媽,爺爺奶奶等長輩分擔部分育兒工作。


在家庭關系方面,“陪伴”是多孩家庭的重要育兒觀念,父母會花更多時間與孩子相處。相較于第一個孩子育兒經驗不足,父母已經能夠游刃有余地撫育第二個孩子了。這時,父母會花更多精力協調兩個孩子的關系。 

在多孩家庭中,通常兩個孩子的年齡相差較大,不同年齡段的孩子在發育特征、表達、溝通方式及與產品的互動行為方面存在較大差異。 

一個典型的場景是6歲左右的大寶希望和3歲左右的二寶一起玩游戲,但是由于3歲孩子對物品的占有欲望強烈,總是搶東西,所以兩個孩子無法一起好好玩耍和交流。所以針對低幼兒童的產品基本上很難適應6歲的學前兒童。但不論是家長還是孩子都希望兩個孩子能夠一起學習和玩耍。目前大部分產品在設計、使用方式上都只考慮了單人的互動方式。要解決此問題的關鍵是通過產品在孩子之間建立溝通的“媒介”。 

What‘s new?


學齡前兒童與低幼兒童的互動方式和操作習慣完全不同。要讓兩個孩子同時使用產品進行互動與交流,就需要產品本身的操作特性滿足不同年齡段孩子的行為習慣與互動方式。


其中一個潛在的發展方向是融合AR技術的互動式搭建玩具。該類型的產品既滿足了學齡前兒童需要的產品拓展性、多元化,也能在實體層面滿足低幼兒童在感知運動階段對于實體互動的需求。

OSMO Hotwheel MindRacers


Hotwheel ? MindRacers將現實和虛擬賽車游戲結合在了一起。混合了多模態的交互方式,強調游戲過程中的競技性與可玩性。在游戲過程中還加入了現實中的協作影響游戲進程的模塊,通過互動游戲促進不同孩子之間的交流與溝通。


What‘s next?


未來,在多孩家庭互動情境下,產品除了 能滿足人與物的交互問題外,還需要幫助不同年齡段的孩子更好地進行協作交流。產品交互方式不再是傳統的一對一交互,而是拓展到一群年齡各異的孩子。參與體驗的孩子們年齡雖然不一樣,卻都能通過產品的不同模塊各盡所能地協作,完成同一個任務或目標。這樣齊心協力完成同一件事的體驗,也必將成為孩子成長過程中的 珍貴回憶。 


MOMOUX suggests


 思考

何將多孩家庭的需求融入到您的業務版圖中? 
? 您的產品、服務可以通過何種方式介入多孩家庭的生活形態? 
? 多孩家庭除了家庭場景外,是否還有其他場景需求? 
? 孩子之間最理想的互動方式是什么樣的? 


 討論

? 討論目標用戶的時候,不要把家庭成員視為獨立的個體去研究,而應該更多的從家庭關系層面審視用戶的生活方式。 
? 對于兒童之間的關系,要注意不同年齡段兒童的差異而不是把他們混為一談。留意不同年齡段的孩子是如何構建關系的。 


 實踐

在產品開發過程中,應當定義多樣化的交互體驗,探索多人互動情境的可能。同時,需要明確不同年齡段孩子對于產品體驗的訴求、交互方式、偏好等。另外,開發過程中使用模塊化設計與集成設計可能是一個明智的選項。 




趨勢二  自然探索


傳統的教育與學習活動通常發生在學?;蛘呒抑?。隨著城市文化活動設施日趨豐富,“戶外教育”等新型教育觀念的倡導,越來越多的家長傾向于在周末組織出行,這衍生出了豐富的戶外親子學習場景。


What‘s going on?


隨著社會公共場所的公共教育屬性的不斷增強,家長們越來越重視周末休閑活動的文化屬性。受訪家庭表示,周末除了無目地的與孩子逛街之外,也會關注美術館、博物館推出的親子公共教育活動與展覽。科技館、植物園、動物園等以親近自然為主的場所也受到家長們的歡迎。 

在觀察兒童戶外活動時,我們也發現孩子喜歡將在家里使用的玩具、音箱等帶到戶外。產品只要有掛繩就有攜帶的可能,孩子就傾向于將產品帶到戶外。從心理學角度分析,一方面有滿足虛榮心的因素,另一方面孩子在陌生的環境中也需要某種熟悉的“工具”去探索未知。 

不過目前的產品,只能實現產品特性的戶外化,卻沒有實現產品體驗的戶外化。譬如產品增加了提手或吊環,孩子很容易將產品帶到室外,但帶到戶外后的體驗卻是缺失的,比如產品屏幕在強光下無法看清。 

所以,孩子們在戶外時,需要的是一件能真正與戶外環境發生互動的產品。

What‘s new?


無論是從產品層面或是概念層面已經有廠商注意到了兒童戶外產品使用場景。兒童數碼相機已經悄然在公園與景區開始風靡。MITA - 小糖口袋相機通過塑造貼近兒童的設計語言與使用方式,創造了可以幫助兒童記錄生活的數碼相機。 

undefined

 MITA - 小糖口袋相機


Zigmo兒童戶外玩具設計旨在幫助孩子安全地開啟戶外探索,設計了一系列產品幫助孩子更安全地與自然環境接觸。 

undefined

 Zigmo兒童戶外玩具


NewDealDesign 設計了一款基于 AI 的玩具 Spot,讓孩子們愿意重新跑出門,愛上和大自然互動。本質是一款手持掃描儀與投影儀,可以幫助孩子識別自然中的物品并將其轉化為圖像儲存在系統中。 

undefined

Spot design by NewDealDesign 


What‘s next


學習本身是在大腦內建構概念的過程,而在自然環境中、孩子們可以通過自己的觀察與探索建構自己對事物的認知。未來兒童將會在自然環境中自主學習,孩子們可以“師從自然”,通過產品的輔助更好地觀察自然。這種學習方式將有效的補充課本灌輸式的學習模式,孩子們的學習將越來越多地與自己的興趣為主導,實現體能與心智的全面發展,激發孩子自身的好奇心與學習欲。 


MOMOUX suggests


 思考

? 兒童產品的戶外使用場景發生頻率較低,需要思考戶外環境產生的需求是否真的有機會轉化為產品。 
? 兒童戶外場景中存在多種影響因素,對于產品功能實現更加苛刻。如光照與聲音效果會在復雜的戶外場景下打折。 
? 戶外本身就是孩子的游樂場,產品不一定是主角,產品的角色更像是一個工具去幫助孩子實現戶外活動。 


 討論

? 在討論孩子戶外活動場景時,不要以大人的視角去“規定”孩子必須要做什么。多去和孩子溝通,了解孩子想要什么。 
? 孩子在戶外非常好動,在產品設計的時候也需要考慮安全性,需要和家長討論一下產品能否保障孩子的安全。 


 實踐

在戶外產品的開發與創新過程中,需要將產品還原到真實的情境中去,校驗產品是否真的符合情境下的體驗需求。另外,在產品設計開發前,需要仔細研究相關的人因標準以確認產品在戶外使用時的安全性與可靠性。 




趨勢三  擁抱屏幕


數字化時代,兒童接觸手機、平板電腦屏幕的年齡越來越小,使用頻率越來越高,隨之而來的是越來越多的屏幕使用場景。 


What‘s going on?


家長雖然擔心使用平板電腦屏幕會對孩子的視力造成不良影響,卻還是會因為購買了app課程而為孩子購買平板電腦。在調研中發現3-6歲兒童家庭中,平板電腦普及與使用率非常高。 

雖然大部分家長允許兒童使用平板,但還是會限制平板電腦的使用頻率與時長。部分家長反映由于接觸了碎片化的內容與短視頻,孩子的情緒變得急躁,注意力渙散。所以對于產品內容的專業性、健康性是家長在購買產品過程中考量的最主要因素。 


What‘s new?


在線教育成為大勢所趨,既然家長教師和學生都無法徹底拒絕平板電腦,就應該積極擁抱屏幕,并且思考如何讓屏幕以一種更健康、更趣味的方式介入孩子的生活中。 

一部分廠商考慮從技術的革新方面改良孩子對于產品的使用習慣,推出了投影類產品。Marbotic Deluxe 學習套件包含一系列木制玩具,可與IPAD上的APP進行交互,從而幫助孩子學習和閱讀和數字。孩子只要將單詞“貼在”屏幕上,軟件就會幫助孩子進行學習。 

undefined

Marbotic Deluxe 學習套件


What‘s next?


未來從技術層面,產品將與觸屏技術深度融合,實體產品的體驗與屏幕緊密的結合在一起,越來越多跨屏幕交互體驗將被創造出來,孩子的注意力將更多地向屏幕外的真實世界轉移。屏幕顯示的內容將作為屏幕體驗的一個輔助,從“沉浸于屏幕信息”向“沉浸于交互體驗”的策略轉化。 

孩子們不會只沉溺于屏幕交互的短暫滿足感中,他們會越來越意識到,屏幕只是對真實世界的延伸于拓展,而真正重要的還是自己所處的實體世界。 


MOMOUX suggests


 思考

? 屏幕不是洪水猛獸,開發產品的時候應該思考是否有更合理健康的內容來支持孩子于屏幕間的互動。 
? 如果沒有內容資源對屏幕做支撐,可以考慮在產品互動形式上的創新,如投影、語音交互等。 
? 在設計產品時,大部分出發點都是讓用戶更沉迷,但是針對兒童的設計,產品需要在兒童成長中扮演一個更負責任的角色。 


 溝通

? 需要更多地了解孩子需要屏幕做什么,互動過程中哪些過程是可以通過實體產品解決的,以及實體產品如何互動。 
? 可以多傾聽母親的聲音,了解母親對孩子習慣培養的希望,從而在孩子使用屏幕時更有效地對兒童的行為進行約束。 


 實踐

在兒童帶屏產品開發過程中,需要優先考慮內容是否能于其屏幕進行有效適配,軟硬件的多模態交互會很大程度影響產品的全局體驗。在這個過程中需要盡可能地減少系統的BUG。在軟硬件協同設計中,再小的問題都容易毀掉產品整體的體驗。快速原型與漁網模型是開發過程中不錯的選擇。




趨勢四  多元的家庭關系


家庭中孩子與家長的關系正隨著技術的發展與生活方式的轉變而發生微妙的變化。家長自身的角色定位也從與孩子一同成長的“陪伴者”朝著更加多元化的方向發展。 

What‘s going on?


社會結構和家庭結構的變化使得親子關系變得越來越多元。有為了陪伴孩子而辭去現有工作,進入幼教領域給孩子更好教育的家長;也有在異國他鄉出差而將孩子交給保姆、老人撫育的家庭……家庭關系多元化帶來的是家長對自己的身份定位也越來越多元化。在調研過程中我們發現母親在家庭關系中的定位從“施教者”轉向了“引導者”。主要體現在:


? 與孩子溝通中更加尊重孩子的行為自主性,希望通過興趣讓孩子主動做喜歡的事情,以此來培養孩子的學習習慣,而不是一味地向孩子灌輸。


? 母親們也會主動地將部分家務工作分配給孩子,通過平等地共同體驗來讓孩子理解自己(自己是誰,母親還是孩子)。


? 越來越多的家長意識到單純通過陪伴兒童并不能完全解決成長中遇到的問題,而陪伴過程中的關系構建才是兒童成長階段最關鍵的因素。 


What‘s new?


一些產品抓住了家長希望通過產品培養兒童良好習慣的需求,開發了介入日常生活場景、重構家庭關系的產品。產品幫助家長與孩子共同設立每日的生活與學習目標,當孩子完成目標之后,通過家長手機端確認任務,孩子按下硬件即可打卡簽到領取相應獎勵。幫助家長更好地督促孩子完成任務,形成更好的習慣。 

undefined

PUPUPULA 兒童學習打卡機


一款叫KITCHEN KIDS的兒童廚房裝備讓孩子能夠更安全地承擔廚房備菜的任務,讓孩子在參與家務活動中體驗到更多樂趣。 

undefined

Kitchen Kids 兒童廚房裝備


What‘s next?


未來父母與孩子的關系勢必向多元化的方向發展,家庭形態與成員之間的關系也將變得越來越多元化。簡單的“大眾”產品將很難滿足日益細分化的家庭需求,產品的實體性也許在未來將越來越不重要,而能協同家庭硬件幫助家庭構建關系的服務將會贏得更多人的青睞。 


MOMOUX suggests


 思考

? 在構建兒童與父母關系的過程中,最關鍵的因素是平衡父母與兒童的需求。從單一角度進行設計是無法創造成功產品的。 
? 在家庭關系的建構中,產品不一定以主角的形式呈現,產品更多地以一種溝通媒介的形式出現,幫助信息在兒童與家長之間順暢地雙向流動。 


 溝通

? 需要多了解家庭場景親子之間有什么主要的活動,參與者是誰、會遇到什么樣的問題,這些問題如何去解決。 
? 需要了解未來親子關系的發展方向,如何通過您的產品與服務去幫助家庭構建、鞏固這種關系。 

 

 實踐

構建家庭關系的產品或服務需要同時考慮父母視角與兒童視角的體驗,APP的設計過程中需要考慮兒童端與父母端的登錄、權限與體驗。 




總結


親子家庭學習場景,在互動方式、場景、交互媒介、親子關系構建方面都涌現出了新的趨勢。產品經理與設計師需要結合真實用戶在場景下的需求進行深入思考,才能設計出更加貼合未來場景與用戶需求的產品與體驗。


我們通過研究挖掘了兒童早教產品的新場景,建構了數字時代下早教產品的四種交互創新方式,反映了當下親子關系、互動方式、教育觀念等方面的變化趨勢。這對于火熱的兒童早教行業來說,或是開啟早教產品新物種的開始。
 
對于設計創新來說,不論時代與社會如何發展,我們總是重新回歸到情境中去探索、去發現。

文章來源:站酷   作者:MOMOUV墨默體驗
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


日歷

鏈接

個人資料

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

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
国产欧美日韩综合一区在线观看| 偷拍精品福利视频导航| 国产精品美女在线观看| 在线电影国产精品| 欧美天堂在线观看| 亚洲免费高清视频| 国产精品麻豆99久久久久久| 精品国产电影一区| 国产精品私人影院| 日韩视频在线一区二区| 成人精品高清在线视频| 亚洲一卡久久| av综合电影网站| 人偷久久久久久久偷女厕| 久久久亚洲国产天美传媒修理工| 精品国产乱码久久久久久虫虫漫画| 99精品视频免费| 久久久亚洲综合| 成人在线观看一区| 91在线免费播放| 亚洲人成网站999久久久综合| 97人人香蕉| 国产精品久久一卡二卡| 亚洲成**性毛茸茸| 亚洲免费资源在线播放| 日本天堂在线观看| 91久久国产最好的精华液| 一本色道久久精品| 国产精品综合在线视频| 日本一二三四高清不卡| 国产精品电影网| 日韩欧美中文一区| 亚洲成人免费在线| 亲爱的老师9免费观看全集电视剧| 国产一区二区三区综合| 精品视频在线播放免| 中文字幕亚洲自拍| 中文字幕亚洲一区二区av在线| 久久免费的精品国产v∧| 久热这里只精品99re8久| 久久精品1区| 精品黄色免费中文电影在线播放| 成人av免费在线| 欧美自拍偷拍一区| 美乳视频一区二区| 色爱综合av| 黄视频网站在线观看| 美女高潮视频在线看| 狠狠做深爱婷婷久久综合一区| 欧美成人免费全部观看天天性色| 欧美日韩精品一区视频| 欧美精选午夜久久久乱码6080| 久久久一区二区三区捆绑**| 亚洲欧美影院| 91亚洲资源网| 污污网站在线看| 亚洲国产精品久久久久蝴蝶传媒| 精品久久在线| 成人精品视频一区二区三区尤物| 成人性教育视频在线观看| 日韩黄色在线| 精品国产一区二区三区成人影院| 国产第一区电影| 日韩电影在线一区| 欧美日韩国产精品| 久久精品亚洲人成影院| 午夜av在线免费观看| 日韩区欧美区| 日本成人福利| 亚洲国产欧美另类丝袜| 成人免费在线观看入口| 老色鬼久久亚洲一区二区| 欧美一区二区三区男人的天堂| 亚洲精品在线二区| 北条麻妃在线一区二区免费播放| 亚洲欧美日韩精品久久久| 国产毛片精品一区| 欧美三级午夜理伦三级小说| 污污视频在线| 久久久久久久激情视频| 国产一区二区三区视频在线观看| 亚洲护士老师的毛茸茸最新章节| 26uuu精品一区二区三区四区在线| 蜜芽在线免费观看| 99成人免费视频| 国产精品久久久久7777婷婷| 中文字幕一区二区三区不卡| 久草在线视频福利| 日本不卡三区| 久久综合九色综合97婷婷| 亚洲三级免费电影| 2020日本不卡一区二区视频| 欧美性极品少妇精品网站| 91精品国产电影| а√在线中文在线新版| 91视频观看视频| 麻豆成全视频免费观看在线看| 性欧美1819sex性高清大胸| 亚洲草久电影| 欧美高清视频免费观看| 97碰碰碰免费色视频| 精精国产xxx在线视频app| 亚洲麻豆国产自偷在线| 国产日韩av在线播放| 日韩av在线中文字幕| 国产精品一区二区不卡视频| 国产精品女主播在线观看| 欧美丝袜丝交足nylons172| 久久久久久久久爱| 成人激情视频在线观看| 国产三区视频在线观看| 国内精品久久久久久久久| 狠狠操综合网| 2019中文字幕在线电影免费| 久久久久久久国产精品| 国产日韩精品电影| 久久久久久影院| 亚洲一区站长工具| 国产精品久久久久久久免费大片| 欧美性开放视频| 日本va欧美va精品发布| 国产精品久久9| 亚洲国产私拍精品国模在线观看| 亚洲综合在线中文字幕| 另类少妇人与禽zozz0性伦| 老司机精品视频一区二区三区| 亚洲国产sm捆绑调教视频| 日本亚洲欧美天堂免费| 国产精品theporn88| 伊人久久综合一区二区| 久久精品国产电影| 美女写真理伦片在线看| 欧美一区国产二区| 欧美精品一区二区三区在线播放| 久久夜色精品国产噜噜av小说| 97精品在线| 国产成人啪精品视频免费网| 亚洲高清在线观看一区| 国产成+人+综合+亚洲欧美丁香花| 日韩亚洲欧美成人一区| 久久久久久99| 欧美孕妇孕交黑巨大网站| 亚洲影院色无极综合| 午夜精品美女久久久久av福利| 欧美二三四区| 国产精品国产三级国产专区53| 国产精品一区2区3区| 日本最新不卡在线| 亚洲人成网站777色婷婷| 天天揉久久久久亚洲精品| 亚洲精品久久久久久久久久久久| 人人澡人人澡人人看欧美| 亚洲精品久久久久中文字幕欢迎你| 114国产精品久久免费观看| 97热精品视频官网| 成人激情电影一区二区| 日本视频精品一区| 欧美日韩久久久| 欧美爱爱网站| 免费观看亚洲| 欧美伊久线香蕉线新在线| 国产一区二区三区在线观看视频| 国产精品久久久久久久久久免费| 9999精品视频|