<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

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

          純純

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

          提到輪播首先可能想到的是廣告,我們經常在移動端首頁或網站首頁會看到各式各樣的輪播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上去后,則需要判定播放暫定,避免用戶錯過感興趣的內容。


          十、總結

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

          文章來源:UI中國   作者:愛吃貓的魚____
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          淺談交互設計

          純純

          一、什么是交互設計?

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

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


          為什么要做交互設計

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


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

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


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


          尼爾森十大可用性原則


          1、狀態可見原則

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

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

          2、環境貼切原則

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

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

          3、操作可控原則

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

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

          4、一致性原則

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

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

          5、防錯原則

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

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

          6、易取原則

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

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

          7、靈活高效原則

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

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

          8、優美簡約原則

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

          9、容錯原則

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

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

          10、提供人性化幫助

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

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



          七個交互設計定律


          1、菲茲定律

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

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

          (2)目標的大小(S)。目標越大,所用時間越短。

          該定律經常運用于鼠標從點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、眼動評估方法

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


          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版本的轉化率、跳出率、留存率等


          感謝閱讀!

          文章來源:站酷   作者:_微光
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          如何提升B端界面的精致度

          純純

          于B端,我想剛開始很多同學就直接拿Ant Design套套界面,因為公司要求并不高,隨后字節Arco Design也推出了對應的模版和規范,能讓我們快速作出一個不出錯的方案。

          但是隨著公司對B端越來越重視,這些模版顯然就太爛大街了。公司、市場的要求顯然不止于此,我們的設計追求也不止于此。 

          那么我們如何才能擺脫套模版,提高界面的精致度,提升界面的交互體驗呢?

          其實很簡單,王陽明先生告訴我們知行合一,知是行之始行是知之成。我們如何才能提升B端界面端精致度?

          第一,需要知道什么是好的設計;

          第二,需要不斷的去實踐去練習,缺一不可。

          本文先和大家談談知的層面,提高我們的眼界,下面就和大家分享一些不錯的B端產品,大家有時間可以去慢慢體驗。 

          PS:作為B端設計師,一定要去多拆解競品,多研究好的產品,別面試的時候,面試官問你研究的B端產品是什么,你只知道阿里云、騰訊云、百度云哦! 


          1、Hubspot

          做B端的同學,尤其是做CRM的同學應該都知道Salesforce,他是全球最大的 CRM(客戶關系管理) 工具公司。 

          Hubspot同樣是提供客戶管理相關的應用,雖然成立相對Salesforce晚,但是在市場上也占有一席之地。

          從設計的角度來看,他的界面風格更加簡潔舒適,從體驗上來看和國內的CRM系統完全不同,其體驗更加自然和舒適。 

          這種風格大家看了有沒有覺得很熟悉呢?

          大家在去看看 GoDoddy , Airbnb ,Zillow,是不是發現風格有一點類似,大家可以對比國內產品去拆解下他們的交互細節有什么不同,完成同樣的任務他們采用的方案有何不同,相信你會有很多的收獲。 

          國外的界面看著總讓人覺得很舒適,僅僅是因為克制的設計、中性灰使用得好嗎?當然不是,是因為英文本身就是圖形化的文字。

          如果翻譯成中文,你會發現好像不是特別理想。 

          這個樣子拿給領導過稿,怕是分分鐘被拍死,因此我們還是需要多看看國內優秀的產品。


          2、神策

          神策的設計,我想B端的朋友不陌生吧,國內產品中他的設計一直是我們的參考對象。

          不同于其他產品,他的體驗門檻比較低,注冊后就可以去體驗他的demo,也沒有試用期限,參考對象從可視化報表,到界面交互均能找到參考。

          不過當你參考一次后發現,做出來的界面怎么還是少了一些靈魂,雖然界面風格上了一個臺階,但為什么用戶還是覺得產品難用。

           

          3、項目管理類

          這里不得不和大家推薦項目管理類產品了,這類產品是專門給互聯網公司的開發團隊使用,他們都是專業用戶,同時這些都是提高他們工作效率的工具,因此這些產品投入的成本更高,優化得更好,拆解他們的產品,就是直接觀看高手的成長之路。

          Jira

          Jira是Atlassian公司出品的一款事務管理軟件,JIRA的界面效果交互都非常不錯。大型互聯網公司如LinkedIn、Facebook、eBay等內部都在使用Jira。

          同時他也是國內項目管理類產品的學習研究對象,因此大家可以通過文章、B站、界面截圖,自己申請體驗等方式全面的進行體驗。

          同時也可借助群的力量,調研下有使用Jira的小伙伴,看看他們在使用中有什么問題,下面是我收集Jira網頁版和本地配置版的問題截圖,這些都來自不同角色的真實體驗,會更有分析的價值。(這部分截圖涉及到公司的數據,同時數量多不太方便打碼,就不分享給大家了。)

          當然國內的項目管理類產品也得去看,我們要對比哪里做得好,哪里還需要改進。國內的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,這些產品不管從視覺還是體驗都非常不錯,大家一定要去體驗。


          5、文檔管理類產品

          通過不斷對競品進行拆解,你已經不是當初那個小白了,你的行業認知,方案設計能力應該趕超了一大波人。

          成長的同時,又發現你設計的界面,不太精致,少了些溫度,這時候推薦你看文檔管理類產品。

          WPS

          第一個和大家推薦的是WPS,界面簡潔,配色舒適。 


          飛書

          在管理類的軟件中,不得不提飛書的管理界面,從設計到使用體驗,他給我的感覺終于不是那么千遍一律,用組件庫搭建起來的感覺。

          他開始有了溫度,開始注重品牌感的打造,用戶的引導,符合品牌調性的插畫。 

           

          對一些體驗的細節進行優化,比如傳統的編輯都是放在頁面頂部,它采用了離光標更近的位置。 

          根據菲茲定律,光標當前的位置和目標位置的距離D越短,所用的時間越短,具體好不好用,歡迎大家在評論區留言哦。 


          6、概念稿

          到這時候如果你覺得線上的產品太禁錮思維,那么推薦你看看dribbble、behance,搜索data、web、dashboard等關鍵詞,去看看有沒有新的靈感。

          我的花瓣收集了一部分,如果不嫌棄,可以去看看,順藤摸瓜應該可以找到很多不錯的設計。

          圖片標題

           

          7、畫重點

          如何提升B端界面的精致度?

          第一,要知道什么是好的設計,多拆解國內外優化的B端產品。

          第二,多在工作中時間,有時間多做ABC方案,鍛煉自己的方案設計能力,多踩一些坑,時刻保持學習能力,慢慢就成長了。

          文章來源:UI中國   作者:風箏KK
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          UI界面設計基礎

          博博

          互聯網設計的一些基礎知識,寫給剛入門或想入門的童鞋們,希望有所幫助


            • 文章來源:站酷   作者:凌坤_Maxidea

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

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

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

          圓形元素在界面設計中的運用

          博博

          圓形元素在界面設計中被廣泛運用,從常見的圓形圖標到圓形的頭像,又或是圓形的輪廓形狀。圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此,在使用圓形元素設計界面時會有一些注意事項。

          圓形元素在界面設計中被廣泛運用,從常見的圓形圖標到圓形的頭像,又或是圓形的輪廓形狀。圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此,在使用圓形元素設計界面時會有一些注意事項。


          一、圓形頭像


          放眼望去,圓形頭像已然占領了我們的手機。不妨看看下面舉的這些例子,如下圖所示。

          43e456a455da32f875520f6db95d.jpg

          從左到右依次是搜狗地圖、QQ、Instagram。當然,還有很多其它的例子,就不一一列舉啦。此刻,肯定有同學已經按耐不住要跳出來反駁了,微信和Facebook就不是圓形頭像,不信你看下面兩張圖。d1df56a455f56ac7256cb095c8b4.jpg

          方與圓之間,孰對孰錯,請繼續看下文分解。


          1.用戶使用頭像的目的

          不管是圓形頭像,還是方形頭像,其歸根結底都是頭像。用戶使用頭像的目的,主要是作為個人身份的象征。區別于其他用戶的特征有很多,例如用戶名、用戶ID、用戶頭像。在這些備選項中,頭像最便于快速識別和記憶,尤其是帥哥美女。


          除此之外,還有一部分通過頭像來彰顯自己的個性,例如美女通常會使用自己的性感自拍作為頭像來表現自己的魅力,又或是使用卡通人物或形象作為頭像來表現自己的藝術氣息,再或是使用萌寵作為頭像來表現自己的愛心或是呆萌。


          2.用戶使用什么照片作為頭像

          隨著智能手機的越來越普及,人們拍攝照片的門檻也變得越來越低,越來越多的用戶使用自拍的照片作為頭像。照片的內容五花八門,例如人物、風景、花草、寵物。即使是正常的人物照片,背景中也會摻雜著很多其它的元素,例如下圖所示。

          5cf056a456106ac7256cb020a2c8.jpg

          第一張照片中人物背景雖然虛化了,但背景仍然很凌亂,一些微弱的對比色很容易就搶奪了用戶的視線。第二張照片中人物是配角,豪車才是真正的主角,這類型的自拍照不再少數。第三張照片人物拍攝的光線陰影錯亂,故意露出一線背景內容,其用意如何昭然若揭。此外,用戶手機的好壞、拍照水平也不一致,拍攝出的照片質量也參差不齊。


          使用這些照片作為頭像時,人物不但不被突出,反而被弱化了。雖然智能手機屏幕越來越大,但是當頭像集體在界面中展示的的時候,每個頭像依然較小。


          3.方形頭像和圓形頭像的區別

          方形頭像和圓形頭像的區別可以用兩張對比圖來說明,如下圖所示。

          5d5c56a456266ac7256cb013db0c.jpg

          左圖是方形頭像,右圖是圓形頭像。通過對比,可以發現以下幾點:


          a、圓形頭像能夠更好地幫助用戶聚焦到人臉。雖然左圖能夠完整地呈現人物特征,但是干擾信息較多,例如背景中的燈光、門柱、屏風。對比之下,右圖更為清晰地展示了人物的臉部特征,例如錐子臉、美瞳、假睫毛。在前面的分析中也提到,手機拍攝的照片質量參差不齊。在這種現實情況下,圓形頭像更有利于忽略照片的背景,提高頭像的識別效率。


          b、嚴格意義上講左圖并不能稱之為頭像,而更應該稱之為照片。原因很簡單,頭像嘛,自然應該以展示“頭”為主,而左圖中頭像只占畫面四分之一不到的區域。從這個角度來說,顯然右圖更為合適。在選擇照片作為頭像時,如果是圓形,用戶更愿意選擇臉部的照片作為頭像;如果是方形,用戶則相對更隨意,通常是全身或是半身照。不信,你可以打開自己的微信,看看自己的好友頭像,或者往前滑滑看看前面的配圖。


          c、日常生活中,我們看到的大多數相框都是方形的,圓形的相框較少,這是因為大多數照片都是方形的。因此,使用圓形的輪廓來表現頭像,能夠快速地和照片區分開來,更加突出。

          當然,使用圓形的輪廓作為頭像,還有一些其它的原因,例如技術上的進步。

          早期由于CSS等技術的不成熟,圓形、圓角圖形的處理非常麻煩,現在變得容易很多。


          二、圓形的icon


          在APP的UI設計中,我們會經??吹揭慌排艌A形的icon,例如下圖所示。


          fc6956a4564232f875520ff01b89.jpg

          上圖中,前面兩個分別是美團和淘寶。在設計上,都有兩行橫排的圓形圖標。最后一張圖是搜狗地圖的服務tab頁,可以發現也有縱向排列的一溜圓形圖標。

          在這里,要回答兩個問題:

          1.為什么要用圓形?

          2.為什么要用圓形而非矩形?


          第1個問題很方便回答。每個功能入口的圖標都不相同,如果去掉圓形輪廓,勢必會顯得十分凌亂。大家都知道圓形是一個封閉的形體,加上圓形之后就能夠弱化圖標的差異性,讓其變得更加規整,看起來也更加清爽,整齊劃一。同時,在功能上也表明各個圖標之間的平等地位,不會因為某個圖標形狀特殊而有所偏袒。


          在回答第2個問題之前,首先回歸圓形和方形的基本特征,

          圓形:動,曲線,運動,靈動,流動

          方形:靜,直線,規則,嚴肅,理性

          圓形和方形比起來,顯得要靈動很多,不至于那么呆板、嚴肅。如此,不難理解為什么用圓形而非矩形。


          其次,圓形能夠使圖標在方形頁面中脫穎而出——不覺得這幾個圓形圖標在頁面中非常突出搶眼么?原因嘛,很簡單。我們的手機屏幕大多是方形的,界面中的大多數元素也是方形的,這時候用一點少量的圓形,自然在界面中形成焦點,這一點在后面的分析中還會見到。


          除了這種形式之外,還有一些單個的圓形圖標浮于頁面底部,通常執行的是返回至頂部的操作。


          三、圓形和方形的結合


          圓與方就像太極中的陰與陽,相生相克,而又生生不息。巧妙地將圓形與方形進行結合,能夠讓頁面變得生動活潑的同時,也能夠更好實現功能上的引導,如下圖所示的幾個案例。

          ebb456a4567032f875520fafc8f5.jpg

          第一幅圖是谷歌手機地圖,地點右上角的出行方式圖標剛好被方形的臨時層一分為二。從功能上來講,出行方式是下一步的行為,不屬于臨時層里的內容,因此置于右上角的位置是比較合適的。從UI角度來說,圓形與方形結合,使的圓形變得更加突出顯眼;同時圓形置于右上角,頁面也不那么死板,反而讓頁面變得生動、活潑起來。


          第二幅圖是宜人貸,微微鼓起的弧度讓這個理財項目變得十分突出,同時也打破了頁面沉悶的布局。


          第三幅圖是kitchen stories,整個頁面保持左右居中,作者的頭像居中現實,對頁面進行了分割的同時起到了承上啟下的作用。


          在頁面設計中,圓形元素通常不是獨立存在的,而是和其他元素相生相息,相互包容。尋求好的視覺效果的同時,也要弄清楚頁面元素之間的相互關系,這樣產出的設計才是真的好設計。


          四、圓形的輪廓


          結合現實物體,借用圓形輪廓,打造頁面點睛之筆。還是舉幾個栗子給大家看看吧,如下圖所示。

          a29156a4568e6ac7256cb0899d80.jpg

          第一幅圖所示的是網易云音樂的播放界面。圓形輪廓與唱片保持一致,雖然占據了頁面的主要空間,但是使的整個頁面變得文藝簡潔。


          第二幅圖所示的是搜易貸的賬戶頁面??捎糜囝~采用瓶裝水的設計,余額較多則水漲的越高,同時會有晃動的效果,栩栩如生的同時讓頁面變得靈動起來。


          第三幅圖所示的是樂動力的首頁。步數越多,則描邊進度條越多,暗色變得越暖。與現實生活中的儀表盤相對應,漸變色搭配圓形,使的頁面變得主次分明,極富視覺沖擊力。


          可以發現,在使用圓形元素時要注意頁面的平衡,例如左右和上下的對齊居中。為了保證頁面的均衡和清爽,通常會在圓形元素周圍保留較多的空白。這些都是在使用圓形元素時需要注意的事項。


            • 文章來源:站酷   作者:Sim_H

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

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

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

          7個基礎的用戶體驗設計細節

          seo達人


          1、專注于20%

          maggelato

          你可曾聽說過80/20法則?簡而言之,80%的用戶通常只會使用你網站內容和功能的20%,絕大多數的用戶只是在掃視網站內容,并且只會挑選真正感興趣的瀏覽。

          同時這也意味著,剩余的20%就相當重要了。大多數的點擊將源自于這一區域,它也是近乎完美的內容和互動區域。

          你可以借助數據分析來決定哪個部分是整個網站最被關注的那20%。對于剛剛上線的網站,這個數據搜集的過程可能長達好幾周,隨后再進行調整。

          當然,你也可以通過引導將用戶引流到你希望用戶去的那20%的區域。借助視覺引導和行動召喚設計來引流,用有趣和有意思的設計來營造令人有興趣的區域,讓他們樂于點擊,從而達到目的。

          2、架構式的思維

          goldhill

          設計一個網站和搭建一所房子其實差不多。首先,它需要一個堅實的基礎,然后是能夠承載所有內容的框架,做好后要好好裝飾一下。同樣的思維模式可以套用在網站的設計上。

          更重要的是,你并不需要為此創造出過去從未在框架中出現過的東西,換言之,框架內的素材、組件和我們常見的并無二致。就像導航設計模式一樣,現在的設計都趨于一致,因為這樣的導航好用。

          當網站的整體結構搭建起來之后,可以將相同的思路套用到內容體系的構建上來。主要的正文內容是整個網站內容的基礎,輔以吸引人的標題、圖片,配合上其他的次要元素,整個內容體系可以很快搭建起來。

          3、不要要求太多

          assos

          現如今的世界可以說是由數據所驅動,越來越多的應用開始要求用戶注冊,要用戶提供更多的權限,更多的信息,以期為用戶提供更加個性化的體驗。但是從體驗的角度上來看,要盡量規避這一點。

          站在用戶的角度稍加思考你就明白了。找到一個令你感興趣的炫酷網站,如果要深入了解更多內容,就需要內容,而如果要注冊的話,網站卻需要你提供下面10個類型的信息:姓名、郵件、國家、地區、城市、電話、Twitter權限、個人網站、工作職位、以及如何發現這個網站的。

          那么接下來,你會怎么做?絕大多數的用戶會直接轉身離開,這個注冊信息填寫起來太費勁,體驗太差了。

          那么,如果你當你點擊注冊的時候,只需要一鍵從Facebook或者twitter授權即可,那么你會不會立刻點擊呢?至少從目前已有的數據來看,絕大多數的用戶會這么選擇。

          4、令人愉悅的微交互

          evernote-1

          可能很多時候你都沒注意到,你和各種微交互進行的互動一直都存在。

          ·谷歌日歷彈出框提示你每周例會要開始了
          ·短信提醒
          ·午睡的鬧鐘
          ·微博上的新粉絲和轉發提醒

          這樣的例子我們可以連續不斷地說上一個小時。這些帶有微交互的提醒和動作會推動用戶進行下一步操作,帶來愉悅的體驗,它們不能設計得非常醒目,但是又需要適當地吸引用戶注意。

          這些有趣的微交互的加入讓用戶從中獲得好處。而你需要思考的是,有哪些東西是你的網站或者APP當中,用戶想要立刻知道和獲得、想被提醒的?

          5、甚至幼兒都能輕松使用

          statusshop

          如果要給小孩子設計產品,那么它應該是什么樣子?你可能會更專注于色彩的使用,讓每一個區塊都可以輕松點擊,明顯的標簽,加上拼圖式的連接方式。

          所以,當我們在設計網站或者APP的時候,我們會說這個產品要足夠易用,那么怎么才算得上“足夠”呢?讓小孩子都可以輕松使用,這就叫足夠易用。換句話說,即使是不經常使用網站和APP的成人,也不會存在明顯的使用障礙。

          超大的設計元素和標簽是設計的關鍵因素。這些視覺線索是幫助用戶引導用戶的核心,是整體體驗設計中最重要的部分。大膽的色彩選擇,會鼓勵用戶點擊和探索。

          如果它足夠易用,用戶會繼續嘗試使用和探索。而難于理解操作不便的導航自然會被用戶所嫌棄。如果網站包含太過復雜的媒體和內容,那么不妨從一個設計簡單的首頁開始,幾個簡單的導航點擊將用戶引導到對應的位置。在深入到更復雜的頁面之前,用梳理清晰、簡單明了的分頁讓用戶感到舒適,這是帶來好的瀏覽體驗的不錯解決方案。

          6、輕拍(Tap)還是點擊(Click)?

          espns

          這一點要說的并不是設計問題,而是一個常見的開發代碼的問題。雖然Tap和Click兩者都能在點擊的時候觸發,但是在移動端網頁上使用Click事件 的時候,會有200ms 到300ms 的延遲,所以在移動端上最好替換為Tap事件。在進行響應式網頁設計的時候,一個事件從頭用到尾的錯誤出現得很普遍,但是有太多的移動端網頁在這樣的設計下會有明顯延遲,更惡劣的情況是無法識別,這樣會直接損害到整個頁面的易用性和功能本身。

          此外,移動端上使用 Tap事件的時候,它所對應的按鈕應當相對更大一些,便于小屏上進行交互。

          7、像用戶一樣思考

          justact

          我們一直在說:“像用戶一樣思考”。但是實際的情況往往是,我們很難走出設計者和開發者的思維方式,因為我們的思維方式壓根就和用戶不同,面對每一個交互、每一個元素的下意識反應是不一樣的。

          所以,還是同設計圈、開發圈和產品圈以外的人去聊聊吧,看看他們對于網站和APP的真實反應到底是怎樣的。你可能會在觀察中發現,他們對于產品、對于交互、對于界面的反應和你的預期完全不同。將用戶的真實反饋記錄下來,反饋給項目組,這樣可以幫你打造更好的用戶體驗,創造更優秀的產品。

          原文地址:designshack

          譯文地址:優設

          作者:Carrie Cousins

          優設譯者:@陳子木

          轉載請注明:學UI網》7個基礎的用戶體驗設計細節

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

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

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



          你的設計有依據嗎?詳解用戶體驗設計中的規律與邏輯

          seo達人


          shejiyiju_001 shejiyiju_002 shejiyiju_003 shejiyiju_004 shejiyiju_005 shejiyiju_006 shejiyiju_007 shejiyiju_008 shejiyiju_009 shejiyiju_010 shejiyiju_011 shejiyiju_012 shejiyiju_013 shejiyiju_014 shejiyiju_015 shejiyiju_016 shejiyiju_017

          原文地址:站酷

          作者:孔雅軒LineVision

           

          轉載請注明:學UI網》你的設計有依據嗎?詳解用戶體驗設計中的規律與邏輯

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

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

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



          在不同屏幕和設備上創建用戶體驗設計的8個步驟

          seo達人


          1. 確定核心用戶體驗

          每個產品都有核心的用戶體驗,這基本上是它存在的原因。它解決了人們所面臨的問題,而且為他們提供有意義的價值。關鍵內容和功能的組合代表了核心的用戶體驗。要查找你的產品核心用戶體驗,就要問自己一個問題:“客戶需要完成哪些最常見和最重要的任務?”在你用于產品的每個渠道上支持這些核心任務的本質至關重要。例如,Uber的核心用戶體驗是任何時間隨叫隨到。無論屏幕尺寸如何,此功能都能在每個設備上正常工作實現這一目的。

          Image title

                                       預約出租車是Uber用戶最重要的任務。用戶可以使用Apple Watch完成此任務。圖片來源: Techcrunch

           

          2. 定義產品的設備組

          盡管存在大量不同屏幕尺寸的設備,但絕對不能定位各個設備,可以根據用戶可能關注的任務定義產品的設備組。最常見的設備組是:

          移動手機

          平板電腦

          臺式電腦

          智能電視

          智能手表

          Image title

          不同的設備組在不同的上下文中提供不同的服務:用戶根據他們正在查看的屏幕的類型參與不同的交互模式。例如,手機主要用于微任務,并且具有較短的用戶會話。平板電腦主要用于內容消費,目前不被視為大多數人的工作工具。在了解各種設備類型的基本上下文的假設對于構建一個好的用戶體驗是至關重要。

           

          3. 適應每個上下文使用的體驗

          確定產品的核心用戶體驗后,選擇一組你希望支持的設備組,你需要調整每個組的體驗(對于每個上下文的使用)。上下文的設計在不同設備組設計時尤為重要。

          第一,并非所有功能都在所有設備上都有意義。你需要確定你的產品在多個設備組中使用的不同場景,并設計適合每個場景的體驗。例如,通常移動用戶比電腦用戶想要的不同于產品。以 Evernote為例,可以在多臺設備上使用流行的筆記本產品。其電腦版本針對內容消費進行了優化:

          Image title

                                     用于電腦版本的Evernote應用程序被優化用于閱讀文本和查看媒體。

           

          而移動版本是針對拍攝筆記、照片和捕獲音頻進行了優化的:

          Image title

          Evernote了解移動環境:它利用設備功能,并提供快速保存想法的方式(添加文本筆記,捕獲照片或設置提醒)。

           

          第二,不同的屏幕允許不同的輸入法。以觸摸輸入為例。在設計具有觸摸輸入(移動手機和智能手機)的設備時,設計師會犯的幾個常見錯誤包括:

          小的點擊目標。點擊目標(如CTA按鈕)必須具有足夠大的尺寸。通常至少7毫米是足夠的,但最好使用10mm觸摸目標尺寸。

          Image title

                                                圖片來源:UXMag

           

          將項目過于緊密地放在一起。你應該考慮點擊目標的大小以及它們之間的間距,因為間距有助于分離控件,并給你的用戶界面提供呼吸的空間。建議的間距至少為23pt以防止輸入錯誤。

          Image title

                                                                                                按鈕之間的間距

          使用懸停狀態。但在觸摸屏上,沒有“懸?!?。

           

          4. 最小屏幕設計

          歷史上,設計師一直從事大屏幕到小屏幕的設計工作,這意味著第一個也是主要設計是為了完整的電腦桌面視圖(它具有最多的功能)。只有電腦桌面設計完成后才移植到移動設備和其他設備組。但當設計電腦桌面時,我們通常面臨“廚房水槽”問題:許多功能被添加到產品中,特別是當涉及多個利益相關者時。這并不奇怪,,當你有很多不動產時,添加功能是比較容易。實踐經驗清楚地表明,最好使用移動方法進行設計,并通過與用戶相關的最小屏幕創建應用程序。

          當你首先設計相關屏幕的最小尺寸時,它會強制你決定最重要的。一段時間后,你將采用同樣的方法仔細選擇產品的其他版本,無論是電腦桌面設備,平板電腦還是電視。

          Image title

          在大多數情況下,手機將是相關屏幕的最小尺寸。如果可穿戴設備對你很重要,那么你將需要考慮具有更小分辨率的微型屏幕。

           

          5. 不要忘記大屏幕

          想想大屏幕以及小屏幕,給大屏幕和小屏幕提供同樣的注意力:

          不只是縮小設計,使其適合那些大屏幕。充分利用你可以使用的額外空間。

          Image title

                                                                                                     圖片來源:Wikipedia

           

          確保圖像不會因為屏幕尺寸的放大而失去質量。

          Image title

                                                          左:低質量圖像。右:正確的分辨率。

           

          考慮大屏幕細節。每個設備組都有自己的不同。例如,電視屏幕的設計被稱為“設計10英尺體驗”,因為從沙發的距離來看,與電腦桌面屏幕相比,屏幕上元素的明顯尺寸明顯更小。

          Image title

                                                                           電視的用戶界面元素應大于電腦桌面。圖片來源:Samsung

           

          6. 提供一致的體驗

          一致的體驗意味著應用程序及其在所有屏幕尺寸上的體驗都是相似的。無論設備如何,一致的用戶體驗是成功的全通道用戶體驗的關鍵組成部分之一:

          對未來與產品的交互設定期望,并建立用戶信心。

          一致的體驗使得你的產品在其他設備上與用戶的交互更容易。

          你可以將它們視為相同體驗的方面,而不是將設計定制到越來越多的屏幕和設備中。例如,Google搜索應用在所有設備上提供相同的搜索體驗。

          Image title

                                                           當設計和功能一致時,用戶可以在他們選擇的設備上更快更有效地完成任務。

           

          7. 創造無縫體驗

          跨不同設備組創建無縫體驗對你的用戶非常重要。人們可以自由地在設備之間來回移動,完成任務,或當他們從設備轉移到另一設備時,他們期望他們的產品和服務與他們一起轉移。這意味著用戶不必考慮他們正在使用的設備,環境的變化或上下文的變化,并且可以依賴于設備良好的功能性和獨立于設備的易用性。

          Image title

                            大多數人如何走過他們的一天,他們訪問的主要屏幕。圖片來源:Intercom

           

          根據使用情況,你可能希望確保每個設備上的內容消耗量同步。以Apple Music為例:你可以在Mac上設置播放列表,并在iPhone上即時播放,也可以開始聽iPhone上的歌曲,當你轉到電腦桌面時,你將被拍攝回到你在iPhone上。

          Image title

                                                                            Apple Music可以很好地處理多個設備的同步。

           

          8. 測試你的設計

          在測試環境中有效的并不總是在現實世界中。在實際設備上為實際用戶運行可用性測試,你可以在發布之前發現用戶體驗的問題并解決它。

           

          結論

          在設計多個屏幕和設備時,最好的策略是保持最終的用戶體驗。作為用戶體驗設計師,你必須評估產品的使用時間,位置和方式,以評估用戶的最佳體驗。無論你的內容是什么尺寸的屏幕,用戶都希望在各種設備之間獲得流暢的體驗。

           

          原文地址:ADOBE BLOG

          譯文地址:UI中國

          作者:Nick Babich

          譯者:SKYUI

           

          轉載請注明:學UI網》在不同屏幕和設備上創建用戶體驗設計的8個步驟

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

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

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



          動效賦能 助力用戶體驗設計

          seo達人


          起源發展

          動畫發展大致經過了三大階段,分別是從傳統動畫(紙筆)>>CG動畫(離線渲染)>>互動動畫(實時渲染)。隨著時代變遷、設備以及技術升級,新的動畫形式以及呈現載體不斷的被創造出來。
          動畫發展的三大階段

           

          傳統動畫注重理論基礎以及扎扎實實的基本功,并且是藝術學院必修課,宮崎駿的早期的動畫就是傳統的手繪動畫。每一張都是純手繪的作品,所以我們看到宮崎駿的動畫會有完全不同于純工業的動畫的感覺。

          CG動畫是隨著電影行業與游戲行業一并發展起來的,由于電影的工業化程度太高,技術積累也越來越深厚,所有游戲使用的工具與技術偏向電影那一套,但不同的是電影是離線渲染的,一部短片渲染幾千個小時都算很正常。而游戲與電影不同,實時渲染必須保證幀速率,所以游戲行業最重要的技術核心就是改進游戲引擎。
          互動動畫想必大家更加熟悉,也就是游戲、web/app、VR/AR/AI、新媒體這些領域的動畫,這篇文章我們主要講的就是Web/App動畫。
          初期蘋果Mac桌面文件夾的打開與關閉

           

          從初期的MAC電腦到現在的iPhone X 不過短短的幾十年,產品設計中動效的運用已經獲得了巨大的進步。動效其實對于用戶體驗這個大專業來講是一種新的學科,隨著我們的設備的硬件條件越來越好,動效才被支持的越來越好,可實現的難度也才越來越低。
          交互動畫里有一部分依然是歸為傳統動畫的,比如說Loading/插畫動畫/載入動畫等等。這些可以動畫需要多關注迪士尼12大動畫原則(節奏&時間、運動曲線、預備動作、夸張、擠壓&拉伸、次要動作、慣性、關鍵幀動畫&連貫動畫、動作表現力、感染力、角色個性),但是另外一部分則是扎根于產品設計的“交互”中。
          CG動畫與交互動畫的區別

           

          CG動畫更加注重片子所表達的故事的完整性以及趣味性,大部分運用的都是超現實的手法,時長一般都5s以上,只需要開動腦洞只要軟件技術能實現都可以發揮出來。
          而交互動畫更注重的是動效的合理性和可用性,動力學需符合真實的物理世界,還要注重整個產品內的動效的統一與協調。一般持續時間都很短在1s內,大部分動畫在200-500ms內完成。整體來說動效都相對簡單,不會太復雜因為要考慮技術可實現性。

           

           應用場景

          這里我們只針對我們互聯網產品設計講一下交互動效的應用場景,我總結了以下七大應用場景,分別是圖標動畫、界面交互、插畫動效、HUD大屏、汽車系統、項目包裝、品牌宣傳等等。

           

          圖標動效

          一般來說圖標動效適用于App或者web產品中,單個持續時間在100ms左右,根據圖標的復雜程度以及實際使用的場景最長時間也不超過400-500ms。圖標動效更注重微弱的變化帶來的趣味性以及流暢性,常用于狀態反饋以及導航引導,通過小小的變化可以為產品體驗增色不少,優秀的還可以給用戶留下深刻的印象。

           

          界面交互 

          一方面界面交互動效可以讓人對產品產生深刻的印象,甚至是帶來驚喜,另一方面表達了界面之間的交互過程,吸引用戶的注意力。通過減少預判誤差、增加連貫性、強調敘述、清晰關系四個方面來增加產品的可用性。

           

          汽車系統 

          汽車系統的用戶界面以及動效一般都來說比較有科技感,動畫會更加的酷炫。本質上來說汽車系統其實跟我們日常用的產品是一樣的,由于行業定位的不同以及用戶使用場景的不同造成了這些差異。

           

          插畫動效 

          適用于App的引導頁、運營活動、空狀態頁面、錯誤頁面,展示型網站等等。在產品設計中插畫動效一般有2種實現形式,一種是視頻或者動態圖片直接加載即可,另外一種就是開發同學通過技術手段來實現,SVGA、lottile、apng等等。

           

          品牌宣傳

          http://mpvideo.qpic.cn/tjg_3563468614_50000_27353420971e4cc9bfc680ecff137bc3.f10002.mp4?dis_k=77967b65644a687675ed4f1eb1920a8c&dis_t=1568711387
          這是韓國一家咨詢公司Plus X做的一個App的宣傳動畫,這里說的品牌宣傳更像是一個產品的解析以及意義的傳達,更輕量化、片長更短、制作技法也相對簡單一些。

           

          HUD 

          HUD可能很多同學都不知道是什么,給大家科普一下。HUD(Head Up Display)又叫平視顯示器,最開始呢是運用在航空器上的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要的重要資訊。平視顯示器最早出現在軍用飛機上,降低飛行員需要低頭查看儀表的頻率,避免注意力中斷以及喪失對狀態意識(Situation Awareness)的掌握。因為HUD的方便性以及能夠提高飛行安全,民航機也紛紛跟進安裝,汽車也開始安裝。后面延伸到像大家在科幻電影里面看到的那種智慧大屏,以及政府機關等等我看看到的那種藍色動態LED大屏都屬于HUD。

           

          項目包裝 

          https://v.qq.com/x/page/r0824uenul0.html
          上面的視頻是騰訊的ISUX部門2018項目包裝的視頻,當時這個視頻上線后,各大公司的UED部門競相模仿,這個項目包裝里面有很多項目都用到動效設計,包括禮物動效,表情動效、插畫動效、logo演繹等等,這說明動效設計在互聯網產品設計中的應用已經相當的廣泛了,作品本身的效果加上簡單的動畫包裝就可以做成一個動態的作品集,對于宣傳團隊是一個很不錯的點,個人作品集也可以按照這個思路來做,肯定也會有很不錯的效果。

           

          設計語言

          設計語言是指導統一產品設計的大腦,所以了解設計語言對于我們無論是做界面還是做交互設計以及動效設計等等都有很大的指導性作用。
          上圖中的6個是國內外比較知名的設計語言系統,大家應該或多或少了解一點,推薦大家有興趣可以去看看他們的設計系統,相信會對你們有很大的幫助,對幫助構建你的個人設計體系也有很大的參考作用。
          這里我們以Material Design為例進行講解,給大家介紹一下這套設計語言以及設計語言內的動畫模塊在我們的工作中是如何運用的。
          Material Design,是由Google在I/O 2014大會上推出的全新的設計語言,其靈感來自與真實物理世界及其紋理,包括真實物理世界如何反射光線和投射陰影,通過材料來重新構想紙張和墨水的一種介質。

           

          其主要目標是:
          創建:創建一種視覺語言,將經典的優秀設計原則與技術和科學的創新和可能性相結合。
          統一:開發單一的底層系統,統一跨平臺,設備和輸入方法的用戶體驗。
          定制:擴展Material的視覺語言,為創新和品牌表達提供靈活的基礎。

           

          基本設計原則:
          大膽,圖形,有意:Material Design以印刷設計方法為基本指導:排版、網格、空間、比例、顏色和圖像。即創造層次、意義和焦點,讓觀眾沉浸在體驗中。
          動效有意義:通過微妙的反饋和連貫的過渡,集中注意力并保持連續性。當元素出現在屏幕上時,它們會轉換和重新組織環境,交互產生新的轉換。
          基礎靈活:Material Design系統旨在實現品牌表達。它與自定義代碼庫集成,允許無縫實現組件,插件和設計元素。
          跨平臺:Material Design使用跨Android,iOS,Flutter和Web的共享組件跨平臺維護相同的UI。
          Material Design的要解決的問題以及設計原則大家應該都了解了,我們針對設計語言內的動效有意義做一下延伸,讓大家對動畫有一個再深入一些的了解。

           

          那么Material Design動效的用途主要有以下四點:
          層級關系:通過動效反映父級元素(收件箱)與子級元素(收件箱郵件)之間的層次結構關系。
          狀態與反饋:動效提供及時的反饋和用戶操作狀態。
          用戶引導:動效為用戶如何執行操作提供有用的建議。
          個性化:動效為產品設計提供可更多的趣味性、個性以及吸引力,對品牌的提升和認知有很大的促進作用。

           

          了解了設計語言的動效模塊,相信大家應該有一個系統的認識,在方寸之間進行動畫設計,考慮的就是毫秒之內,而在毫秒之內最應該考慮的就是速度,研究發現,在界面設計中最合適的動畫時間為200-500ms之間,時間太短,用戶難以感知,時間太長,用戶又會覺得整個過程太緩慢不夠流暢。
          當然了根據設備的不同動畫內容的不同,動畫持續的時間自然也是不相同的。動畫時間的長短與動畫路徑的遠近是成正比的一般。另外平臺的不同,動畫持續的時間也是不相同的,在pc端內的動畫要比移動端的動畫持續時間普遍少50%左右,這是因為平臺的屬性所造成的。但是要是單純的做裝飾動畫是可以單純發揮的,不用遵守上面的幾個原則,所以進行動畫設計的時候都需要考慮到具體的場景以及具體的需求,靈活運用。
          說完了時間,我們來說說跟時間息息相關的動畫曲線,我們都知道在幾百ms內表現出動畫的特點是有點難度的,所以精細的運動曲線對我們就顯得格外重要,這里我總結一下Material Design內提到的幾個常用的動畫運動曲線,大家有興趣可以去Material Design的官方文檔內詳細查看:
          上述的幾個運動類型以及動畫曲線我們在產品設計內經常會用到,希望大家打好基礎,靈活運用。
          我們知道任何一件事情都有存在的價值和必要,動畫也不例外,如果動畫沒有體現出他應該有的價值,那么做的再好看也只是僅僅局限在了好看這一個層面,下面我們就看看動畫到底能在產品設計中帶來什么樣的價值。

           

          動畫價值

          有時候現代科技產物使用起來非常復雜,但是其實“復雜”本身沒有好壞之分:不好是因為沒有處理好這個復雜所以產生了“混亂”,所以應該被批評的不是復雜而是因復雜所產生的混亂?!萍{德·諾曼

          優秀的動效可以幫我們解決產品設計中的很多問題,可以從用戶體驗的五大要素來進行價值的拆解:

           

          戰略層

          戰略層本質上來說大部分設計師其實是接觸不到的,當然接觸不到戰略并不能代表我們不需要了解,作為設計師我們必須了解公司對產品的戰略定位以及期望,也必須要了解用戶的目標和心理預期。戰略層是整個產品的核心也是底層,所以單純來講,動畫在這一層面上可以發揮的余地是是不多的,因為更多的這一層更加關注意識形態的戰略思考。

           

          范圍層

          范圍層是通過戰略思考來思考明確產品的大概功能和內容,有很多產品的功能復雜,交互繁重,內容很多,在這種情況下動效就派上了用場,我們可以嘗試通過動效來解決內容過載,優化交互模塊,擴展產品內容功能范圍。

           

          結構層

          這一層主要確定產品的功能結構以及層級,主要設計用戶如何快速,準確的觸達某個界面完成某個任務,要考慮用戶體驗地圖,用戶整個的任務路徑,簡單來說就是用戶要做什么事情,如何做,做完之后應該干什么,如果能對動效巧妙的運用,就可以做到引導用戶,練習上下流程的作用,降低用戶理解成本,提搞產品的操作效率,提高產品的可用性和易用性。

           

          框架層

          從這一層開始,UI設計師接觸的內容逐漸多了起來,大家也會更加熟悉工作的內容以及范圍,這一層主要體現在優化頁面布局,確定元素擺放位置,涉及到具體的信息、界面、導航設計等等。通過利用格式塔,柵格,設計語言等方法確定產品功能具體頁面內容布局,我們可以通過動效來進行輔助設計,例如強化元素的位置、顏色、大小,優化頁面的切換、跳轉的流暢度以及自然度等等。

           

          表現層

          表現層具體涉及到視覺、聽覺、觸覺的體驗設計,也是做為視覺設計師、UI設計師發揮最多的一層,在表現層動效的展現形式會多種多樣,這里不展開講解,大家應該都明白。在表現層加入適當的動畫能夠提升產品趣味性,加強用戶與產品的情感鏈接,增加用戶對產品的友好度。

           

          未來發展

          5G

          5G時代已經到來,5G的普世將會為科技發展帶來更多的可能性,眾所周知5G的速度是4G的百倍,那么意味著我們的設計的動畫會加載的更快,動畫文件的大小限制將會被打破,另外也可以在某些領域的產品內設計更復雜更酷炫的動畫。

           

          人工智能(AI)

          它是研究、開發用于模擬、延伸和擴展人的智能的理論、方法、技術及應用系統的一門新的技術科學。該領域的研究包括機器人、語言識別、圖像識別、自然語言處理和專家系統等。在我們日常生活中運用的包括不限于人機對弈、模式識別、自動工程、知識工程等等。所以未來在這些領域內,我們能參與到的動畫設計必然會更多樣,形式也會更豐富,挑戰也會更大??赡軙粩嘤行碌膭赢嬓问揭约霸O計方法被創造出來,讓我們拭目以待。

           

          虛擬現實(VR)

          是20世紀發展起來的一項全新的實用技術。虛擬現實技術囊括計算機、電子信息、仿真技術于一體,其基本實現方式是計算機模擬虛擬環境從而給人以環境沉浸感。隨著社會生產力和科學技術的不斷發展,各行各業對VR技術的需求日益旺盛,VR技術也取得了巨大進步,并逐步成為一個新的科學技術領域。相信在未來的工作中必然會慢慢的接觸到VR界面設計以及動畫設計,并且我相信未來會逐漸的變成主流。

           

          參考資料

          material.io/design/motion
          https://www.zcool.com.cn/article/ZODIzMzky.html
          https://zhuanlan.zhihu.com/p/27114894

           

          原文地址: 小凱的設計筆記(公眾號)
          作者:小凱君
          轉載請注明:學UI網》動效賦能 助力用戶體驗設計


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

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

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



          你想要的,用戶體驗設計中的心理學

          seo達人


          變色龍效應/鏡像效應

          圖片

          俗話說,“有樣學樣(Monkey see, monkey do)”,包括人類在內的靈長類動物都擅長模仿。這個詞表示無意識鏡像或模仿我們周邊人行為的狀態。根據我們在產品方面的經驗,我們進行的互動具有親密性和即時性。

          你有沒有試過聽了朋友說的話之后又說給對方聽?這是變色龍效應的完美例子。

           

          啟動效應(Priming)

          圖片

          指由于之前受某一刺激的影響而使得之后對同一刺激的知覺和加工變得容易的心理現象。我們半夜三更看了電視的恐怖電影之后,跟看喜劇相比,屋子里面聽到的任何吱吱聲或者噪音更有可能讓你毛骨悚然、心驚肉跳。

          啟動效應會塑造我們對環境的行為和反應,而且往往是有效的捷徑,讓我們可以迅速做出決定。這也是一種有效的說服工具,已經廣泛應用到產業的營銷和廣告領域。

           

          馮·雷斯托夫(Von Restorff)效應

          圖片

          德國精神病學家和兒科醫生海德維?!ゑT·雷斯托夫(Hedwig von Restorff)在1933年提出的理論。馮·雷斯托夫有一次實驗,涉及到讓受試者觀看一系列相似的物品。結果他發現,如果其中某個很特別的話,那么相比其他物品,受試者就更容易回憶起這件物品。

          馮·雷斯托夫效應又叫做隔離效應(isolation effect),或者新奇效應(novelty effect),其預測是當存在多個相似的對象時,跟其他有所不同的那個最有可能被記住。

           

          序列位置效應

          圖片

          該理論由赫爾曼·艾賓浩斯(Herman Ebbinghaus,著名的艾賓浩斯遺忘曲線也是他的發現)提出。它描述了序列中項目的位置是如何影響回憶的準確性的。

          這種效應是指記憶材料在系列位置中所處的位置對記憶效果發生的影響,包括首因效應和近因效應。系列開頭的材料比系列中間的材料記得好叫首因效應或者首位效應;系列末尾的材料比系列中間的材料記得好叫近因效應或新近效應。

          用戶往往最容易記住系列中的第一項和最后一項。

          把最重要的信息放到開始和結尾。把最不重要的信息放在中間,這是吸引用戶注意力的高效方法。

           

          格式塔原理

          圖片

          在格式塔原理之下,派生出了很多的其他原理。我們會在下面進行簡要討論:

           

          負空間:

          圖片

          在設計周圍留白,從而創造出一塊大于其各個部分之和的區域。用最簡單的措辭來說,格式塔理論是基于這樣一種思想,即人腦會下意識地把各個部分組織成一個系統,從而創造出一個整體而不是一系列的離散元素,通過這樣來簡化和組織包含有很多元素的復雜圖像或者設計。我們的大腦天生就是為了看清結構和模式,從而更好的理解我們生活的環境而構造出來的。

           

          相似:

          圖片

          在格式塔里面,相似的元素不管彼此是否靠近也會在視覺上進行分組。分組可以按顏色、形狀或大小進行。相似性可用來將可能彼此不相鄰的東西聯系在一起。

           

          連續性:

          圖片

          不管實際畫出來的線條如何,人眼在觀看線條的時候都會按照最平滑的路徑想象。當目標是引導訪客的眼睛朝特定方向看時,這種連續性會是很有價值的工具。

           

          閉合:

          圖片

          這條原理反映的是人會把設計或圖像缺失的部分自行腦補,創建出一個整體來?;蛘哒f得簡單點,在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到復雜的形狀。

           

          相鄰性:

          圖片

          這條原理是指元素之間的距離如何。在UX設計當中,運用相鄰性是為了讓用戶將某些事物組合到一起。通過把它們放在一起,用戶就會感覺它們是相關的。

           

          圖形與背景關系:

          圖片

          跟閉合原理類似,這條也利用了負空間。我們的大腦會區分出圖像前景的對象。設計師如果想要突出某個焦點時,用這條這真的很方便。

           

          共同命運律:

          圖片

          這條原理是指,沿同一個方向移動的元素本身會被視為一組。如果我們看到一群鳥朝特定的方向飛行,我們就會把它們組合在一起,并將它們看作是單個刺激物。

           

          認知負荷

          指在一個人的工作記憶使用的腦力綜合。是指你為了完成任務需要消耗的腦力。

          認知負荷是表示處理具體任務時加在學習者認知系統上的負荷的多維結構。

           

          希克定律

          以英國心理學家威廉·埃德蒙·??耍╓illiam Edmund Hick)命名,其理論指出當選項增加時,下決定的時間也增加。一個人做出決定所需的時間取決于他或她可以選擇的選項數。因此,如果選擇的數量增加,則做出決定的時間將對數增加。

          決策所需的時間隨著選項的數量和復雜性增加而增加。

          圖片

           

          菲茨定律(Fitt’s Law)

          圖片

          這條定律規定,任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。

          獲得目標所需的時間取決于到目標的距離以及目標的大小。

          可以利用這條定律來影響互動按鈕的轉化率,尤其是用手指操作的移動設備上的設計,可以把希望互動的按鈕設計得更大一點,把不希望用戶點擊的按鈕設計得小一點,更難點中一點。用戶任務/注意區域與任務相關的按鈕之間的距離應盡可能的短。

           

          美即適用效應

          圖片

          這條指的是用戶往往會認為有吸引力的產品更實用。大家往往會相信看起來更好的東西用起來也會更好——就算實際上效率和效能并沒有提高。

          用戶往往會把美觀的設計看作是更實用的設計。

          對視覺設計的積極情緒反應會讓他們對可用性方面的小問題更加寬容。

           

          雙重編碼理論

          這一理論是由心理學家佩維奧(Paivio)提出來的,他強調在信息的貯存、加工與提取中,語言與非語言的信息加工過程是同樣重要的。佩維奧(1986)指出:“人的認知是獨特的,它專用于同時對語言與非語言的事物和事件的處理?!崩秒p重編碼系統可以讓用戶更容易記住我們網站上的重要內容。

          我們會根據你對現實世界的體驗和感知為腦中想到的文字建立視覺形象。一想到“體育”,我們的大腦就會自動想到球的形象,運動員的形象。通過將文字跟圖像配對,可以更容易記住東西。

           

          直覺檢查

          我們一般不會用價值數千美元的眼動追蹤軟件或者腦電圖來判斷設計是不是有效。但是5秒測試是個強大工具,用它就可以確定你的設計是不是一看就明白。

          所謂5秒測試,就是讓受試者觀看網站或應用5秒鐘,然后回答有關主題和設計的問題。如果用戶的答案或者留下的印象跟你的設想不一樣,那就說明設計沒有達到原先的目的,需要繼續改進。

           

          說服心理學

          圖片

          這條原理來自羅伯特·西奧迪尼(Robert Cialdini)的著名著作《影響力:說服心理學》(Influence: The Psychology of Persuasion),里面列舉了類似互惠、一致性、社會認同,權威以及稀缺性等原理。

          這些原理往往決定了我們在社會當中的行為方式,我們可以用它們來識別人類行為。

          互惠:這條原理是說人都不喜歡虧欠別人。如果別人給了他們什么東西的話,他們應該會覺得有責任給予一定程度的回報。提供免費的電子書,博客文章,播客或其他免費內容,然后換取用戶提供的電子郵件地址,這就是現實生活當中互惠的好例子。

          權威:權威這條原理說的是我們大多數人都意識到自己沒辦法在每一件事情上都是專家。我們最好的選擇是依靠專家的證詞。所以,我們允許專家和任何特定議題的“權威”人士影響我們。大家往往會對高水平的專家和權威人物的話言聽計從,因為覺得他們值得信賴。如果跟成功公司能扯上關系的話就會經常被提及,好建立一定程度的尊重和可信性。

          一致性:這條原理說的是大家一般都希望自己行為跟自己的決策過程保持一致。西奧迪尼曾經進行過一項研究,他讓兩組志愿者挨家挨戶去詢問房主愿不愿意在自家前面的草坪上立一塊寫著“小心駕駛”的大廣告牌。

          第一組的做法就是簡單粗暴直接上門問。而第二組是先做一個初訪,請求房主在他們前面的草坪放一塊很小的標志牌,“做一位安全的駕駛員?!?

          結果第二組的成功率高出450%。這就是(承諾與)一致的一個例子,因為房主會覺得自己有義務在這種情況下保持一致性。

          社會認同:大家未必總能知道自己為什么會這么做。大家是不是都在跳舞?如果是的話會有更多的人跟著跳。大家是不是都在看那個視頻嗎?是的話會更多人會點擊它。是不是每個人都在買你的產品嗎?是的話,你想攔都攔不住。在電子商務的實踐當中,我們使用的網站會社會認同(比方說點評、評論和推薦)來吸引其他用戶,并引導他們做出購買決定。亞馬遜有“購買這個的客戶也購買了那個”的提示,希望強化你跟商品的關聯性,讓用戶認為“如果別人需要它的話,那我也需要它”。

          稀缺性:在塑造行為的原理方面,這是我的最愛之一。稀缺性原理是說,如果東西有限的話,大家就會更想得到它。能得到的人越少,吸引的人就越多。

          為什么有的商店會推出限量版服裝?這就是原因,這樣可以吸引更多的顧客。

          變化盲視(Change Blindness):指觀察者不能探測物體或情景所發生變化的現象。

           

          記憶限制

          圖片

          記憶未必永遠可靠。我們對信息的存儲方式會被我們的想法、感知信念以及周圍環境所重構。

          我們的工作記憶能力大概就只有10到15秒,一次只能記住3到4個東西。

          研究表明,大家往往會制造出錯誤的記憶,要么會記住了沒有發生過的事情,要么就是記得的東西跟實際不一樣。由于記憶具有提示性和可塑性,所以根據大腦的習慣或心智模式來進行設計就非常重要,因為這樣會更容易記住。

          盡可能為用戶提供幫助和反饋,并提供撤銷選項,以減少用戶犯錯時的沮喪情緒。讓體驗個性化,好迎合我們用戶的喜好。

           

          單純呈現效應(Mere Exposure Effect)

          圖片

          單純呈現效應是指圖片、符號、數字、聲音等外部刺激信息只要經常暴露在人面前,就能增加人們對其喜歡程度的現象。這種社會心理會發生在我們所有人身上,我們在不連續的時間段內見到某人的次數越多,我們覺得這個人討人喜歡或迷人的可能性就越高。這種效應有時候又被叫做熟悉定律。

          了解單純呈現效應及其機制,會讓你在轉化率優化的工作中具備重大優勢。更多的呈現會帶來熟悉感,進而帶來舒適感,從而讓轉化率優化整體上得到顯著改進。

           

          色彩心理學

          圖片

          色彩也是影響人的選擇和行為的主要因素之一。我們經常會發現兒童玩具顏色鮮艷,女孩玩具往往是粉紅色的。這方面研究的主要思想是色彩對用戶的感知有很大的影響。

          所以,作為設計師我們應選擇能夠傳遞含義與正確信息的色彩。

          紅色。跟熱情、強烈或攻擊性的感覺關聯。同時是好和不好的感受,比如愛、自信、熱情、憤怒等的象征。

          橙色。充滿活力的暖色,給人以興奮的感覺。

          黃色。幸福的色彩。象征著陽光、喜悅和溫暖。

          綠色。大自然的色彩。給人以來平靜和新生的感覺。另外,也可能用來表示經驗不足。

          藍色。一般用來表示企業形象。往往表現出冷靜的感覺,但是作為一種冷色,也跟距離與悲傷有關。

          紫色。由于很多國王都穿紫色的衣服,所以長期以來就與皇室和財富聯系在一起。紫色也是代表神秘與魔力的顏色。

          黑色。這種顏色有很多含義。往往跟悲劇和死亡相關聯??梢源碇唇庵i??梢允莻鹘y的,也可以是現代的。一切都取決于怎么用,以及跟哪些顏色一起用。

          白色。意味著純潔和純真,以及完整性和清晰度。

           

          本能反應

          我們一般是從大腦負責本能的部分得到這種反應,本能反應的速度比我們的意識要快得多。本能反應會導致我們用了一下產品后就愛上了它。這些反應植根于我們的DNA之中,所以很容易預測。

          作為設計師我們就是要通過設計制造出視覺上極其出色的美感印象。為什么一個東西在用戶眼里好看,以及為什么他們是我們的目標受眾,他們的需求是什么,這些都不難猜測。

          用戶體驗設計的概念根植于認知和行為心理學,那是人類與機器交互的藍圖。當然,本文仍還沒有涵蓋到所有的設計心理學原理。但是,作為設計師,我們還需要觀察和理解最終用戶,并且加深對用戶的理解與共鳴。在產品開發過程中,了解用戶的互動、行為和情感可以增加更多的價值。

           

          原文地址:追波范兒(公眾號)

          作者:terechen

          轉載請注明:學UI網》你想要的,用戶體驗設計中的心理學

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

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

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




          日歷

          鏈接

          個人資料

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

          存檔

          亚洲va欧美va天堂v国产综合