<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>

          首頁

          用戶體驗是玄學嗎?

          純純

          Part 01 - 用戶體驗和用戶體驗設計


          關于“用戶體驗”這個詞,很多剛入行的新人都覺得它玄之又玄,妙不可言。一方面是不知道他具體到底是什么,就好像那是一塊理想地,看不見也摸不著,另一方面呢糟糕的用戶體驗,作為用戶是能清晰感覺到它的存在。所以呢,在這里,會圍繞“用戶體驗”這個詞做一個科普性質的解釋和綜述,希望對初學者一些小小的幫助。



          1.1 什么是用戶體驗?

          用戶體驗的定義有很多種,我比較傾向的解釋是:

          “用戶體驗是人對于使用一個產品、系統、服務時的預期和反應?!?

          首先明確第一個概念,體驗是一個過程,生活中的一切皆是體驗,我們赤裸裸的來到這個世界,最后赤裸裸的離開,來人世走一遭就是來體驗來了。

          從廣義上來看,體驗的主體是人,客體可以是一切物體和事情,媒介是我們的感官;當我們的感官作用在一切事物上,會產生相應的心理行為,比如預期,比如反饋,比如情緒,著所有的一切一起作用,形成了用戶體驗過程。


          只要留心生活,你會發現用戶體驗無處不在。

          舉兩個例子:

          第一個是北京隨處可見的地鐵充值機,我經??吹接脩粽驹谀抢镢卤?,最主要的是他違背了用戶的操作習慣,插卡機器的的行為總會讓人聯想到APM機,而幾乎所有的APM機器卡都是插一半然后自動吸進去的,而北京地鐵卡是需要插到底,然后還需要用力按一下才能成功識別,跟多用戶懵逼在這一步,并沒有用力按,然后以為是機器壞了沒有識別。

          第二個例子是我工作的地方旁邊商場一樓有一個肯德基,它有兩個門可以進入,第一個門是在商場外臨街,第二個門是在商場內。

          我連續兩周的工作日每天早上9點半到10點在這家店吃早餐,發現一件很有趣的現象,由于工作人員的疏忽,商場內的門二經常會忘記打開,因為這個商場的負二樓和地鐵站連在一起,所有很多人地鐵到站的人群從地鐵站口出直接從商場內走向街道:

          在這些人群里,如果他們正巧有買早餐的需求,他們往往會從門2進,如果正巧由于工作人員的疏忽,門2沒開。按照常人的思維,哪怕門2沒開,那不還有一個門1么,用戶完全可以多走幾步出去從街道門1進入啊,應該不會太影響。如果你能得出這樣的結論,又碰巧你正好是互聯網的設計或者產品人員,那么你可能有“自我安慰型人格”。

          我吃早餐的兩周里做了一個統計,10個工作日里,每天在我吃早餐的這半個小時內,試圖推開門2卻發現打不開的,平均到每天有6位,按照每個人平均買一份早餐套餐15元錢來算,10天內,由于工作人員的失誤,這個門至少阻擋了至少900元營業額。


          回到剛剛那個“自我安慰”的思維,我發現,10天內被這個門阻擋的實際62位用戶里,真正出街道從街道門1再次進入的人,只有十七位。也就是說這個實驗中肯德基早餐用戶被最短路徑阻隔之后,再次選擇次路徑完成轉化的轉化率17/62(27%)。

          別急,還有更吃驚的數據:在被門2阻隔的62個人中,有17個是自身順路要往街道右邊走路過門1的。但是由于被門2阻隔,他們17個人當中,哪怕自身行走路徑要路過門1,選擇從門1進去的也只有7位,大概在11/17(64%)(判斷順路依據是他們吃完后從門1出門往右走)。


          再看一下肯德基這個例子的數據結論:

          被門2阻攔的62個人里,45人流失。

          其余17位選擇從門1再次進入,這17人里,本身就要順路經過門一的占11位,說明大概率只有順路才會進入完成轉化。


          這個例子說明什么呢?

          在替代品遍地都在的今天,不要試圖去挑戰用戶的體驗。


          當用戶看到肯德基的門2,他們產生的預期是馬上就可以推開享受一頓早餐,這時候由于門2打不開,使得用戶預期受挫。

          受挫用戶的第一反應并不是想解決辦法(表現在例子中就是尋找另一個門進入),而是放棄它。畢竟,沒有肯德基我還可以吃麥當勞,還有星巴克,還有面包店,各種各樣的選擇。


          這就是為什么互聯網行業把產品用戶體驗看得這么重要的原因,除了社交產品以外的用戶是很難有忠誠度的,你的產品難用,你不能給用戶更大的福利,用戶一旦發現別的產品做得比你好,用戶會馬上放棄你,轉而用別的替代品。


          上面的那個例子主要表達的是用戶預期受阻帶來的糟糕體驗導致用戶流失。其實整個用戶體驗的過程當中,是有很多很的因素相互制約,協同作用的:


          戶體驗本身一個很龐雜繁復的系統;在一個過程內,用戶對整個過程中的元素的預期和反應(情感和生物反應)構成了整個用戶體驗系統。這里面包含了很多很多的旁支,比如人的感知、人的經驗系統和使用場景決定了人對于單個體驗的預期,而如果超過預期會帶來驚喜,促使用戶正向評價,也促使用戶再次體驗。比如人感知和體驗中客體呈現的意符決定了人的行為等等…


          用戶體驗最初的時候它只是用于表征易用性方面,而現在,它的概念更多的表現在情感的一個分支,包含設計情感互動和評估情緒 。因為人的情緒是很難拿捏的,面對不同教育背景不同生活經歷的用戶,我們最初其實很難歸納出到底什么樣的設計是具有好的用戶體驗。


          好的用戶體驗各有各的優點,但是,糟糕的用戶體驗卻很容易被歸納和識別出來。


          設計師們不斷的在識別和總結糟糕的體驗問題,慢慢在優化這些問題的過程中積累經驗,其實也慢慢的有了一些關于用戶體驗的方法論形成,這種方法論作用于各個設計行業,工業設計、服裝設計、奢侈品、廣告、互聯網產品設計各個行業產生的方法論其實不盡相同。




          1.2 什么是用戶體驗設計?


          說起設計(Design)這個詞,那就厲害了 ,作為設計師的你聽說過解釋肯定有很多種,而我個人對”設計“的理解是:設計是一種”約束條件下,解決問題的可行的辦法“。而對于用戶體驗設計而言,早期的時候,我們僅能夠基于經驗主義去完成一些設計,這時候專家的作用會被放大,因為專家提出的不要這樣、不要那樣,往往會成為指導性方案:


          但是隨著發展,不斷地有人站出來嘗試描述和定義用戶體驗的邊界,比如:


          隨著探索者越來越多,我們最終也是大致能夠夠了出用戶體驗設計的定義范圍:既然體驗是一個過程,那么狹義的,用戶體驗設計實際上是通過改善和優化用戶與產品交互過程,從而提升用戶的滿意度的過程。


          這里有兩個要點:


          1、用戶體驗設計的目標是逐步不斷提升用戶滿意度,前面兩有個定語:“逐步“、”不斷”,對于用戶而言,永遠沒有所謂“最滿意”的說法,只有“相較于上一次體驗更滿意”.所以除非定義一種可量化的終極滿意度模型作為指標參照,否則用戶體驗設計是一個永遠都有優化空間的過程。


          2、用戶體驗設計是圍繞過程的設計,在互聯網行業中,這個過程主要指用戶與產品(app、PC端,客戶端、VR等)的交互過程中,所以下文重點討論的是在互聯網行業中的用戶體驗設計。



          Part 02 - 用戶體驗設計是一個崗位嗎?


          以2018年2月為時間節點的目前來說,用戶體驗設計不是一個崗位,現階段來看,它更像是一個協同目標,每個公司的所有設計師(UI/視覺/交互),用研人員,包括開發人員其實工作的目標都是為了逐步提升自己公司產品的用戶體驗。


          雖然用戶體驗設計目前還不是一個崗位,但是它正在趨向于成為一個崗位。要解釋這一點,我們還是要從用戶體驗的定義說開去,還記得用戶體驗設計是什么嗎?用戶體驗設計是通過改善和優化用戶與產品交互過程,從而提升用戶的滿意度的過程。


          既然要改善和優化用戶與產品交互過程,那把這個句子拆分開來,大概需要的知識儲備有:

          1、從主語的角度看:首先你要了解用戶吧?用戶是人,要提升人的滿意度,對人感到心理滿足的機制是不是需要了解?


          2、從客體的角度看:客體是產品,在互聯網行業表現為手機(app)、pad(app)、PC(軟件)和VR設備等等。這些產品是我們著重需要關注的點,比如一個app中視覺信息的呈現,app的信息架構、app的交互設計、app的可用性和易用性等等,都是需要考慮的。


          3、既然是用戶與產品交互過程,是不是要知道人和產品(手機、app、PC)到底是如何交互的?每一次的點擊,滑動對于用戶來看心理應該是怎樣,產品的每一次反饋都意味著什么?


          吶,你現在來看,其實我們互聯網行業現在劃分的UI/視覺/交互/用研,甚至往廣了說包括產品/開發/測試,工作內容都是構成用戶體驗的要素,它需要的知識面特別特別廣,對人的綜合素質要求很高,所以目前來看,用戶體驗還不能是一個崗位,但是很多大公司,比如騰訊阿里,他們期待設計師能夠變成有更大洞察和對業務、人性有更多了解的全方位人才,而不是一個只會畫圖的美工,所以說未來,用戶體驗設計師可能會變成一個title,但是可以預料的是,用戶體驗涵蓋的這么多方面知識,每個人都是有側重和專長的:可能有些人就是很喜歡視覺設計和UI設計,那他們在精研這部分的同時,相應的懂一些交互方面的知識,這就算是優秀的偏視覺方向的用戶體驗設計師;那視覺表現很差的人能不能算優秀設計師呢?當然可以,比如他是心理學或者HCI(人機交互設計)的研究生,對人和用戶心理有自己獨特的認識,再加上精通定性和定量研究方法,對數據有獨特的敏感,那他未來可能是用戶研究方向的用戶體驗設計師。


          只不過我們現在因為崗位固化,大多數公司,每個人的工作職責僅限于那一塊,你是做視覺/UI的,那就好好畫界面,你是做交互的,那就好好研究布局,你是用研,你是DBA,你是什么職位就做什么職位的事情,從來不越界,這樣其實是不利于人的發展的,那我們追求上進的設計師們只能自己下來多看書,多去做研究,私下來多花時間修煉自己的內功心法,才能讓自己立于不敗之地。


          用戶體驗設計發展到今天,目前包含了最大的三個有模糊邊界的模塊是用戶研究、交互設計、視覺設計。現在絕大多數互聯網公司也都是按照以上這三個模塊去設置崗位的,這樣有一個很大的問題其實是不利于設計師的發展。


          阿里巴巴1688的設計總監汪方進關于這三個崗位,有這樣的一番評述:

          比如交互崗位,如果對接的是一位能力較強的PD,他們可能把交互稿定了七八成,交互設計師完善后交付給視覺設計師,而對接的視覺設計師又有一些交互Sense,他也許把交互稿又改了改,那么這個過程下來,交互設計師的內容,還能保留多少呢?我所說的這種情況,可能也是當下我們交互設計師同學所面臨的痛。

          而視覺設計師又是怎樣的現狀呢?視覺設計師拿到交互稿后,在交互稿的基礎上美化潤色一下,自主發揮空間不太大。從我們集團總體情況來看,視覺設計師的(P級)成長是比較慢的,因為我們講求論述自身設計的價值是什么,但把視覺從整體中剝離出來,視覺設計師設計的某一個頁面,具體能帶來多少商業價值?視覺設計師很難去論述這點。


          關于用研、視覺、交互這三個模塊,我也想分開來談談,希望能對目前剛入行或者入行不久感到迷茫的小伙伴有所幫助。



          Part 03 - 用戶研究


          上面我們說到,用研、交互、視覺這三個模塊構成了一個用戶體驗設計的能力維度,要搞清楚這三個維度,我們不妨先看看業界最出名的一張用戶體驗要素圖:

          我們一般把最下面戰略層的部分分解開,其中除了產品和公司戰略之外,關于用戶需求的定義交給用研(用戶研究)人員去完成。


          關于用戶研究,如果是一個從0到1的產品,產品初期是需要對產品用戶進行定位劃分和用戶畫像,就是我的這個產品是為了解決什么樣的用戶的什么需求的,這些用戶的屬性是怎樣的,他們具有什么樣的特質和顏色、他們一般使用產品的情景是如何的?


          這里需要注意的是,如果你不是一位有用研經驗的人去第一次嘗試做用研,需要留心我們很容易落入理想化用戶設計的陷阱。再客觀的站在用戶角度去思考,去設計也會有主觀和流于表面的情況出現。我們不能想當然的按照理想情景去思考用戶需求,用戶需求是復雜的,再加上企業自己的,以及各部門的需求紛繁,所以一般在產品迭代的過程中新的功能很容易陷入想當然的“用戶就是需要啊”的思維之中。所以對于成熟的產品來說,需要劃分核心主流和普通用戶并分別畫像。關于用戶畫像的方法有很多很多,大家可以去隨意搜索在這里就不細談了。


          還有如果是一個初次開展用戶研究的同學做用戶研究的時候,可以掌握幾種常見的方法,訪談法,焦點小組,易用性測試,問卷調查這些方法各有利弊,最重要的是找到當前情境下解決問題且行之有效的方案,比如訪談或者焦點小組,精心整理問題并邀請公司的一些員工或者核心用戶進行訪談并全程錄音,在結束后認真提煉訪談中多次被用戶提到的關鍵詞,從關鍵詞中按維度抽象整理出用戶的需要,是訪談的核心價值。并且輸出文檔,賦予思考,再以此作為整個設計改版的核心依托,讓里面用戶提到的關鍵詞在設計頁面中體現,這才是有效的設計。


          關于用戶研究的常用方法,具體推薦給大家兩本大部頭的書,大家感興趣或者不知道自己感不感興趣,可以去看看《設計調研》和《洞察用戶體驗方法與實踐》 第二版。



          Part 04 - 交互設計 


          交互設計的輸出物是產品原型,也就是你們看到的線框圖。那線框圖是怎么產生的呢?這個需要從產品經理那邊對功能梳理開始。

          一般大一點的有交互團隊的公司,比如新浪微博啊之類的,他們的產品經理的工作重點會更加focus在功能本身到底是不是用戶所需要的,而經過產品提出來的需求文檔,一般只有功能需求List和他們的優先級,如果遇到要畫圖說明的,也就是簡略的幾一個草圖。

          這時候,交互設計師會根據產品的提出的功能需求List去進行整理和區分:

          這里整理和區分的方法是合并,拆分和歸納。

          比如功能A是可以拆分成更細顆粒度的需求A1和A2的,其中A1和A2又碰巧屬于不同的已有的兩個功能區塊,那么就可以把他們拆分到不同的功能線上,如果某些功能發現他們有同樣的屬性,那是不是考慮把他們整合在一起?


          這樣整合完了需求,再按照優先/重要的二維表格去劃分,最后得到一個需求量表:

          然后我們根據這樣的版本需求量表優先級和重要性,有的放矢的去設計功能入口和信息架構,就會游刃有余:


          而一般復雜產品新增功能的時候,往往要考量很多因素,不能一味的去做功能堆砌,還是需要把不重要的功能隱藏或轉移,突出重要的功能,再把一些同屬性的功能入口組織在一起并列,這些都是在原型之前需要思考的問題。再往下,那就是根據一個一個的信息去設計產品低保證原型圖,那就沒啥好說的了,你們看到的原型圖幾乎都差不多,但是至于你們的交互設計師的原型是不是按照我上面步驟一步一步推演出來的,那就要打個問號了,這可能是區分一般交互設計師和高級一點的交互設計師的一種辦法。(如果你見到聽到功能就開始畫低保真的交互,那…)



          如果你以為交互設計師就是畫個原型,那你就錯了,交互設計師切記不要淪為產品助理……其實在真個UX體系中,交互設計師承擔的是最重要也是最核心的一個環節,那就是優化用戶路徑(即優化流量路徑)。


          什么叫優化用戶路徑呢,舉個例子,全民k歌是一款唱歌的app,那用戶最核心的功能就是在上面唱歌,而關于唱歌,大概有獨唱、合唱兩種維度。比如現在,我作為普通用戶,想要去完成獨唱一首歌的行為。這種行為從用戶路徑上看就是用戶從任何頁面到唱歌詳情頁。那么到底有多少條路?既是說,到底有多少個頁面可以跳轉到唱歌詳情頁?然后你會發現,其實能跳到唱歌詳情頁的,除了清唱那種獨特的方法以外,其他的都是要通過伴奏詳情頁跳轉,那么問題又來了,到底有多少個頁面可以跳轉到伴奏詳情頁呢?

          就這樣,去窮舉所有的用戶路徑,然后看看這些路徑過程中有沒有一些冗余操作是可以刪減的:


          窮舉所有用戶路徑,看看有沒有哪一跳是可以被優化的(以唱吧為例



          這里面有很大很大的學問,如果展開說的話可能是一個幾萬字都說不清楚的篇幅。

          總之,一個好的app一定是功能和產品形態足夠扁平簡單。

          要讓產品形態足夠扁平簡單,就需要根據app的形態去整理和梳理交互層級,針對流量問題進行具體的分流設計:

          比如當我們看到一個200wpv的頁面,下屬三個平行按鈕分別只有40w、12w和3wpv,刨除場景問題之外,從交互出發那是不是我們可以設計一個內頁的segment組件去完成三個內頁的滑動跳轉、降低操作成本呢?

          比如淘寶這樣:

          又或者說,我們是不是可以未一個pv較低卻承載功能較大的頁面另外設置另多個入口呢?

          比如像外賣產品這樣:

          最后的最后,交互設計的工作產出就是原型了,既然都思考妥當了,畫個圖就就沒啥好說的了...



          Part 05 - UI設計



          再往后,交互設計師會把原型給到UI設計師,UI設計師的工作范圍大家想必很了解,就是把低保真的原型變成高保真的設計稿。


          在這里再啰嗦一遍?。?


          UI設計師的基本技能是精確的信息視覺傳達,不是視覺炫酷的界面!

          UI設計師的基本技能是精確的信息視覺傳達,不是視覺炫酷的界面!

          UI設計師的基本技能是精確的信息視覺傳達,不是視覺炫酷的界面!


          重要的事情說三遍!


          我們唱吧UED最近一直在招人。

          看UI的簡歷,然后發現一個很大的問題是,我發現UI設計師的簡歷真的是千奇百怪五花八門,有那種插畫畫的很好的,有那種第一眼上來就是一個很立體的3D建模渲染震撼到你的,也有那種大漸變dribbble風給你一種好像很厲害的樣子的,但是這些都不重要,如果一個界面上的內容信息沒有主次區分,或者展現得沒有層級對比,再花哨的東西都沒有用。


          關于UI需要掌握的比如格式塔啊之類的東西已經有太多人說了,在這里就不贅述,具體也可以看我的文章《形式與內容的關系 -  app的視覺美成因分析》。


          UI設計其實都不是鬧著玩的工作,也絕對不是純主觀感性的工作,判斷一個UI界面的好壞可以通過易用性和易讀性測試、瞇眼測試的方法檢驗,判斷一個產品交互設計的優劣也可以從易用性測試和用戶反饋中得出線索,判斷哪種交互手段和信息架構更為可行通過ab test的方法得出結論,這一些的一些設計它都是一個有著科學的方法論作為指導的。


          希望從此之后大家審視產品的時候不要以UI美丑這種最低級的主觀因素去思考(當然UI的一致性和美觀度很重要),但是更多的,要想想更深層次功能布局和信息架構,以及產品打的人群上往更加宏觀和抽象的高胃度進行思考。


          文章來源:站酷   作者:Seany

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


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

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




          從交互維度量化用戶體驗

          純純

          和大家分享一些在產品和交互設計中的一些自己的方法。



          Part - I 什么是交互

          狹義的交互(Interaction)定義交互主體必須是人本身,而客體可以是產品,環境,服務等等,且不論交互客體是什么,只要主體是人,人和客體去進行交互的時候,一定是人帶著心理預期施加一個行為,然后客體會根據這個行為給與一個反饋(沒有反饋本質也是一個反饋),而人會根據這個反饋是否符合預期去進行心理修正。如下圖所示,這就是我理解的最小交互模型:

          當時我舉的例子是用翻頁器去控制ppt翻頁:


          如上圖所示,拆解這一套交互行為:

          當我我點擊翻頁器的“下一頁”按鈕,我點擊行為附帶的心理預期是“PPT翻往下一頁”,然后我點擊的時候,遙控器塑膠按鈕給到我手指一個物理反饋,證明我按下的行為已經完成了,這是“輸出端(我的手)的交互與反饋”,這時候遙控器接收到按鈕指令,把指令通過紅外線傳輸到USB接收器上,接收器把指令傳到PC端然后完成翻頁動作,再通過大屏幕傳到我的眼(輸入端)中,我就可以確認這一次交互反饋是符合預期的。BTW這里有一點想要補充:設備對設備(上圖中黑色箭頭),也屬于廣義的交互,只不過現階段大家研究的交互設計都是狹義的,人為主體的交互。


          在我們日用科技產品的早期,有兩個東西是無法跳過的,那就是按鍵手機和PC電腦:


          他們幾乎是同步在發展的,而這兩個產品的交互行為基本上延續到了觸屏手機時代,所以為了弄明白觸屏手機的交互,這兩個產品是值得講一講的。


          先看按鍵手機(就是我們小時候用的非智能手機):

          在按鍵手機中,最讓用戶困惑的其實是按鍵和屏幕之間存在一個映射關系,而不同廠商缺乏一個統一的規范,各家映射規則不一樣。大家是否還記得當年的手機說明書那可以說是相當厚,因為說明書必須要給用戶建構一個心理模型;比如上圖,點擊左上角和右上角那兩個“-”按鈕,其實一一對應的是屏幕左下角的“Goto”和右下角的“Names”。這個一一對應關系作為今天的用戶來看應該是很平常而且很易懂的,但是當年沒用過手機的人,需要花很長時間閱讀說明書,才能夠明白物理按鍵和屏幕上的映射關系,這就是觸屏手機很難用的地方,也是很反人性的地方。因為作為用戶來說,心智上,我們當然希望所觸即所得。

          再來看PC,作為和按鍵手機差不多一起出現的載體形式,人們操作PC端人是通過媒介(也就是鼠標+鍵盤)輸入的,其實本質上也是我們通過鼠標在桌面上滑動x-y區域對應到電腦桌面上指針的移動來創造屏幕中x-y的映射關系,然后鍵盤上幾十個鍵配合輸入完成操作。


          大家發現了么,上述的兩種設備其實本身就是在制造一種一一對應的映射關系去完成交互行為,這兩種載體從出身開始就還是需要很大交互成本的。

          隨著科技的發展,觸屏感應技術推出了之后,印象中觸屏手機就是兩三年時間就摧枯拉朽的淘汰了按鍵手機,本質上是干掉了一一對應的交互映射,所按即所得:

          觸屏手機出現之后,交互專家們不禁要問一個問題了:

          手和觸摸屏到底有多少種交互方式?

          答案是有很多種:

          越是高階越是隱藏的交互手勢越復雜,所謂的“交互成本”也越高,比如錘子三指滑動換屏保那種,就是利用了高階交互便捷實現邊界功能。那這么看起來,iOS也好還是所有的安卓手機都好,從用戶端而言,就是組合交互手勢,讓信息更好的傳達而已。那么同理,在App中也是一樣,如果我們了解了每一個交互行為的用戶心理預期,對設計工作而言就能做到有的放矢:


          我們以“單擊”和“滑動”這兩個最簡單的交互行為舉例。

          所謂單擊手機屏幕,用戶其實最核心的是有兩個預期:

          第一是選中一個元素,比如Radio組件。第二是邏輯上的Next,比如點了一件衣服,應該Next到衣服的詳情;點了付款,應該出現付款流程,點了返回,應該back到上一路徑點等等。


          劃動交互也是一樣的,用戶在一塊手機屏幕上單指劃劃劃,用戶內心的預期其實也不復雜,最核心的預期也就兩點:

          第一是查看屏幕外的線索(前提是設計師給用戶留下線索了或者是這個UI組件長得就是可以劃動的樣子)第二是查看相鄰標簽的內容,或者查看同一個標簽下的相鄰元素,比如iOS的segment controlle組件就是典型例子:


          當我們了解了這些之后,我們在實際的設計工作中就可以根據上面這些理論來合理選擇UI組件去呈現對應的信息了。




          Part - II 從交互維度合理選擇UI組件

          我們在設計工作中,選擇UI組件,本質上就是選擇信息的呈現形式。

          每一個常見的UI界面和UI組件,都一定也滿足上面所說的最小交互模型:



          在這里我舉一些例子說明。

          第一個例子:同樣的內容,選擇不同的UI組件呈現,給用戶呈現的是完全不同的產品結構:

          大家看下面這張圖:


          這兩個UI模塊擺在大家面前,大家應該能清晰的感受到,左邊是一個segment控制下面內容的UI;而右邊是一個所有內容列表的集合頁,只不過通過tab聚類了而已。

          第一件事應該想到的是如果需要采用右邊的排列形式就必須要控制tag的字數;然后由于右邊的tag占據了推薦貼的位置,導致推薦貼可能沒有左邊的那種展現形式更加醒目。但是相對的,圖右的優勢在于,由于豎向排列tag可以讓一個屏幕顯示更多的tag,可以讓用戶更方便的定位內容,比如外賣產品之所以用右邊這種形式是因為力求一屏展示更多的菜,而且外賣產品的左側tag一般是一家店鋪的菜的品類,用戶下滑菜品配合點擊品類,點完即走,很方便(京東和淘寶電商類平臺也是類似的)。

          但是比如今日頭條,新聞類客戶端只能采用左邊的這種形式,因為新聞類客戶端是需要用戶長時間沉浸的,比如用戶選中一個“體育”的tag之后一般要沉浸的看好久好久,用戶需要沉浸在這個tag下的內容中,那這個時候顯然用右邊這種設計方式讓tag常駐屏幕左側是不合適的。


          再來看第二個例子,就是UI應該會隨著內容而進行調整和優化:


          這里舉一個唱吧的例子,唱吧從7.0到8.6之間做了三次改版,大家可以看到,唱吧團隊幾乎是損失了屏幕效率來加大了間隔和突出了歌名,這是為什么呢?

          這是因為頁面承載的關鍵任務不同,大家對比著7.0時候和8.6時候的UI樣式,正好是今天快手和唱吧的對比:

          大家會發現,其實這個頁面,快手和唱吧承載的內容都是消費轉化,都希望用戶點擊進去消費內容,但是兩款產品做了截然不同的UI風格,原因是什么呢?

          快手在這個頁面,其實承載的關鍵任務是:“迅速讓用戶找到感興趣的點”,它這么設計的本質原因是因為它的截圖可以幫助用戶判斷內容本身,比如第一張圖是一個人在打高爾夫,右邊是一個工人,然后第二排左邊是一個游戲的鏡頭,右邊是一個傳遞正能量,大家可以很方便的通過圖片識別里面的內容,用戶更沉浸更聚焦的去選自己喜歡的點擊進入消費就可以了。但是唱吧的視頻截圖其實是不能識別里面內容的,大家可以看到,第一張圖是一個妹子,第二場圖是一個妹子,第三張圖還是一個妹子,那用戶點擊進去的動力在哪兒了?除了這個照片長相之外,更多的其實是文字決定的,是這個人唱的這首歌的歌曲名是不是我喜歡的,或者是這個演唱者的的歌手等級。

          所以基于這種跟深層次的邏輯,唱吧和快手兩款產品的這個頁面都是為了促進消費轉化,但是UI長相上完全不同。


          我們看第三個例子:


          同樣組件下,選擇不同的交互方式,也會使得效果完全不同,比如現在有一個UI頁面,主要由一個tab(iOS叫segment controlled)組件控制下面的內容,樣子張這樣:


          我先假定一個前提:這個app中的這個組件不支持橫劃,只支持點擊切換。

          好了,現在我假設這是一款已經穩定運營了一年的產品,為了說明問題,我假設一個理想數據:

          假設每天有20W的uv訪問這個頁面,其中分流情況是:

          10Wuv消費“推薦”下的內容

          2Wuv消費“生活”下的內容

          1Wuv消費“段子”下的內容

          3Wuv消費“美女”下的內容

          4Wuv消費“游戲”下的內容


          這時候,為了優化交互行為,有一天決定把這個tab組件從不可橫向劃動改成可以劃動的(并且告訴用戶這里可以滑動了喲~),然后給你一次機會重新排列這五個tab順序,你會怎么做呢?最簡單的辦法當然是把五個tab按照用戶消費意愿逐一排列,即:“推薦、游戲、美女、生活、段子”。

          這樣排列當然沒有任何問題,但是還有沒有更優解呢?我給出的解決辦法是這樣的,大家評判一下:

          按照用戶的消費量,“游戲”是消費量第二的一個tab,毫無疑問我會把它排在第二項,這樣可以刺激用戶劃動行為,然后“美女”是消費量第三的,我會把他放在第四位,這時候我會把“段子”和“生活”這兩個消費率最低的tab分AB test做兩個版本放在第三和第五位拿去測,以判斷之前的“段子”和“生活”是由于自身內容不夠優質,還是之前交互成本太低導致的數據較差:



          最后我們來看第四個例子:


          比如一個app,他的UI張如下圖所示的這個樣子


          現在假設在運營和市場團隊不做任何努力的情況下,單從產品交互的角度,能不能優化上面這個版塊的點擊率?

          首先我們來分析一下頁面架構:

          如果我們認為,不管是點擊右上角的“>”,還是點擊留個圓形入口都算完成轉化的話,我們現在的這個紅色的UI組件,入口位置一共有7個。根據長尾理論,如果我們把這個圓形入口從6個擴展到比如九個,是不是一定對轉化率有正向影響?答案并不一定:

          為什么呢?因為主要是這樣的改動會帶來一個未知的泳道橫劃交互,它會產生一定的影響,如下圖所示:

          用戶看到這個泳道之后可能出現三種行為:

          a.“用戶完全不滑動”——那入口就從7個變成了7.5個,別的沒有變量影響。

          b.“用戶滑動看完了之后,點擊某一個或者左上角的“>”進入”——這是我們想要的轉化

          c.“用戶滑動看了這些圓形入口之后松手,就是不點擊進去”——這是我們不愿意看到的結果

          想到這里,那為什么我們不能讓用戶直接滑動之后松手就跳轉呢?


          想到這里,所以優化方案如下圖所示,給與用戶一個x軸區間,滑動手勢操過那個區間則告訴用戶你現在松手默認跳轉,用戶不愿意跳轉也可以回劃,只要不足這個x區間就給與用戶自主選擇的機會:


          我之前在上家工作的時候,我們把6個圓形入口變成了10個,然后用這個“松手跳轉”的交互把單元模塊的穿透率從21%提升到了31%,這是一個實戰當中的真實例子。


          當然了,請大家再思考這樣的一個問題:


          一個頁面的流量就這么大,一個地方漲了11%,那勢必別的地方就會相應的損失11%。一般情況下app首頁承擔著80%以上的分流工作,根據流量漏斗來看的話每一次引流都會導致其他模塊的數據下降,所以設計師們應該要根據運營策略和公司大的產品OKR來合理選用合適的交互組件,以達到想要的目的,還是那句話:“小孩兒才分對錯,大人只看利弊?!?




          Part - III 從交互的維度量化用戶體驗

          移動互聯網產品設計中,尤其是在中國的app產品,有兩大分歧陣營:

          “扁平”陣營表示了,我們需要產品足夠扁平,最好就是三次交互可以觸達所有app界面:

          “簡潔”陣營也表示了,我們需要頁面信息足夠簡潔,最好一個頁面只完成一個核心任務:



          雙發你來我往,誰也說服不了誰,如下圖所示,“簡潔”陣營反駁“扁平”陣營說:你們一點都不遵守席客定律,層級扁平是扁平了,但是相應的頁面信息變得越來越多,給用戶呈現的干擾就越來越多,用戶做出決定的時間也越來越多,所以你們“扁平黨”都是辣雞。這時候“扁平”陣營也找到了反駁的論點,他們說你看你頁面足夠簡潔了,但是頁面層級就很深啊,交互成本這么高,每一次都伴隨流失,可用性這么差,你們還有理了?所以“簡潔黨”你們才是辣雞!


          中國的互聯網產品,很難做到既簡潔又扁平,這個問題的根源在于永遠有那么多信息需要呈現,永遠有那么多功能需要添加,這個是中國的激烈市場競爭導致的,并不是說中國的產品就不如國外的好(我的哥哥之前在Facebook現在Airbnb工作,他經常感嘆道國外的互聯網產品到中國來真的都得死...)我想要討論的是,面對中國現在互聯網產品市場現狀, 如果一款產品非要你站隊上面兩派陣營,你會選哪一派?我現在的選擇是“扁平黨”,因為用戶面臨一款眼花繚亂的app,如果是經常使用,缺功能布局信息架構很少改動的前提下,早晚也會習慣和適應的,但是如果一些核心的東西不能第一時間暴露在用戶眼中,很有可能用戶就不知道你有這種功能。這個就是為什么我們設計經常會說這個產品經理傻逼吧,怎么什么東西都想展現出來,這一堆東西找個入口集合收起來頁面多干凈多清爽多好看呀~~我早年間也是和諸位一樣的觀點,但是現在我越來越覺得,界面清爽了,你的大功能feature因為設計隱藏沒有被發現,不是設計開發測試都白做了么,說好的ROI在哪里?


          我們大家都是互聯網從業者,不管看到這篇文章的你是一位設計、產品、還是開發、測試、運營人員,我們都明白用戶體驗這個詞是由N多維度綜合而成的一個過程性評價,它和方方面面都有關系。



          那既然是這么專業且牽連甚廣的一個名詞,我們真的就沒有辦法去量化評價它了嗎?

          永遠不要忘記,用戶體驗是個過程,而我們每個人也都是用戶本身。在這里我提供一種普通用戶維度的比較好用的用戶體驗評估方法是“窮舉分析用戶行為路徑”。


          比如你是一款外賣產品的設計師,那么用戶在不同產品模塊下定一個外賣的流程路徑大概有多少種,都窮舉出來。比如你是一款在線演唱類的產品設計師,那么用戶在產品中完成一首歌需要的用戶路徑到底有多少條,窮舉所有路徑之后一一優化,讓路徑變得更加扁平,或許是一個最“笨”但是有效的方案,怎么優化呢?用淘寶消息頁舉個例子:


          淘寶消息頁上面有“交易物流”、“通知”、“互動”三個tab,這時候我們假設一個用戶三個按鈕下面都有消息,用戶想要看完這三個消息大概需要幾次交互?答案是至少6次:“點擊第一個進去 - 返回 - 點擊第二個進去 - 返回 - 點擊第三個進去 - 返回”,這樣的交互顯得呆板且冗長,淘寶團隊巧妙的把三個內頁集合成一個頁面的三個tab形式,大大縮短的交互成本,這就是所謂的“把用戶路徑變得更扁平”:


          大家在使用很多產品的過程中,多多留心就會發現原來細節里面總有魔鬼。


          文章來源:站酷   作者:Seany

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


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

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


          為什么交互設計能幫助產品解決問題

          純純

          市面上大量出現同質化產品、設計,就是因為大家都在按照現有的,常用的模版在設計,現在其實比早兩年會好很多,很多設計師已經開始從美化工作逐漸深挖到區分甚至自我驅動或者價值探尋的工作。


          例如下面的案例,這是一個電瓶車電池租賃的一個產品。



          undefined



          從美觀角度,左側的界面更加簡潔信息也有規律,有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側的對比圖時,大家在第一反應中,有多少人可以重啟自己的視角,還是說已經被這個頁面所拉入到不可自拔的漩渦中去了呢?


          如果讓你盯著第一個界面進行改版,我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來,或者新增一些“我們覺得”有用的板塊。但其實這整個形態就是錯的,即便將錯誤路徑3改成了路徑2,你以然還是在錯誤的路徑上,本質沒變。所以為什么我們說要做正確的事而不是正確的做事。





          交互不僅僅能夠讓產品好用的,也要讓產品走對方向。


          另外,UI也是交互的一部分,屬于看的懂。好用可以分為看得懂,學的快,用的會,交互體現在人們日常所接觸到的大部分媒介,并且與之產生聯系。例如一把水壺,水壺的設計形式首先通過視覺讓你感知這是一個水壺,如果把水壺的外形做成一個馬桶,你覺得它還是一個水壺嗎,這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產品進行基礎操作,例如裝水、倒水。而用的會就是這個水壺更多的附加功能,例如燒水、定時、調溫等等。



          1.交互設計中媒介與人的關系


          1.1順應


          交互的媒介是不可缺少的,大家是否去研究過為什么古代人們撰寫文字是從上至下,從右往左而現代人的習慣是從左右的?古代受限于工具、媒介,竹簡是主流的記錄文字信息的媒介, 有人會說竹簡可以從做往右寫不是非要從上往下啊,但是大家可以看到人們是如何打開進行閱讀的,如果是橫著閱讀但是打開是上下展開就會非常不自然了。


          所以在當時人們為了適應非常有限的工具資源,改變了自然的操作方式。但現代社會如果說你的產品不為用戶的使用和場景去考慮,那基本也就涼涼了。


          從2g到5g時代的發展,除了生活方式發生翻天覆地的變化外,我們所接觸到的媒介也發生了變化,從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步,讓人們對信息的獲取更加方便快捷。除了內容,外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化,從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機,改變了我們的認知也改變了我們的生活方式。



          1.2遷移


          平臺遷移的交互成本,很多同學可能都玩過moba類游戲-dota,這是一款在電腦端戰術競技類游戲。在dota中我們經常使用的交互形式主要分為鍵盤和鼠標的控制,鍵盤用來控制技能的釋放和其他快捷物品的使用,都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標,這是端游中基本的交互行為與操作。





          在現在非常火熱并且模式和dota相似度很高的王者榮耀手游中,我們看到了,如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動,右手拇指來控制技能的釋放,在這里大家要注意,在端游中技能的釋放是可以非常精準的,并且可以指向性釋放在某一個角色中,但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能,但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上,所以手游中只能進行非指向性的預判技能釋放。







          同樣在端游和手游的吃雞游戲中,端游鍵盤控制人物移動,鼠標控制射擊與視角,但是在手游中控制射擊與視角就需要2個手指來完成非常不方便,也很影響射擊的精度,但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發出了吃雞專用的輔助設備,專門用來給多余的手指進行射擊操作。


          另外,大家如果做b端的同學應該也深有感觸,平臺遷移的成本非常高。想要把集成非常復雜的業務后臺切換到移動端是一件很麻煩的事,因為在網頁端我們有大量的空間和更自由的控件形式去承載信息,比如聯動的左側標簽導航和頂部聯動的標簽導航,在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯動導航,但是頁面顯示實在有限,很多的信息完全無法在一個界面中呈現,所以要么將頁面進行左右滑動,要么拆分進行多步操作。但本身擁有復雜業務功能的后臺系統就不適宜遷移到移動端上。


          web端的工具和網頁通常都會有撤銷操作,按CMD(ctrl)+Z大部分都可進行撤銷上一步操作,但是在移動端我們無法通過特定、或者統一的手勢進行撤銷,所以很多時候在表單輸入的時候會有一鍵刪除圖標,卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后,刪除按鈕變為撤銷按鈕,有待考量。



          2.交互認知的盲區


          到底什么是交互設計,這個問題其實是比較復雜的,也是我一直在思考的問題。所以也翻閱了很多文獻,嘗試做更多的案例來解釋。交互設計的概念真的挺多的,光網上能夠找到的定義就不下5種,這些對交互設計的定義中,比較頻繁出現的是行為、場景、用戶等詞匯,交互設計到底設計的是用戶的行為,還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情,我覺得可能還是沒有能夠解釋清楚交互設計的本質。


          中國歷史文字的演變,它并不是一個模仿的過程,而是一個從底層對文化、自由、精神、環境、人的深刻理解而發生的一種進化過程。但現在其實很多的交互形式都是來源于一些大流量產品的模仿,更多的是擔心用戶成本過高而妥協為滿足用戶預期。



          2.1信息不對稱


          事實上,為什么我們講不清楚什么是交互設計,其實UI設計也一樣,她絕不可能單純的指代用工具繪制出用戶界面,其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語


          例如“你可以意思一下”,單就這句話,我們大概知道最關鍵的是“意思”二字,包含了特別多的含義,含義需要通過語境、使用場景來區分,說者的“意思”是想告訴聽者什么呢?沒人知道,是一口氣干完一瓶酒,還是喝一口?還是送一點禮還是?應付一下?


          當然這句話中的“可以”也很有講究,加上“可以”說明你也能選擇不“意思”,是不是覺得這7個字讓我們整一句話都活了起來,說者與聽者如果不在一個境中,聽著就壓根不知道說者的具體表達含義。


          同樣的,在設計領域,很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲,還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞,這個詞聽起來比較抽象,讓聽者都有點不太好意思追問什么是呼吸感,其實你問了,說者也不知道怎么描述。可能說者覺得現在信息太密集讓人無法呼吸,但設計者覺得現在剛好,所以本身就沒有一個標準,更多的就是主觀的感受,讓你不得不接受這個建議的原因是因為兩者的身份。


          我們用我們能夠講述的語言去描繪我們不懂的事物,再例如設計師和開發還原只會說往左移動10px,而不會說給這個view加上padding left 10px。還有你和開發為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識,設計師通常喜歡描述從左到右或者從上到下,但是在開發的語音認知理,他需要知道的是空間坐標,并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發知識,開發也盡可能的去補充設計背景。


          在這里,交互設計師產出的交互說明文檔就是能夠幫助設計師與開發有一個更好的溝通,所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。


          再舉個例子,不知道大家有沒有編輯過問卷或者做過用戶訪談,很多時候是不是覺得收集到的信息無效、無用,其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道,比如:你的問卷問的是,您喝酒的頻率是多少,選項有:從不、偶爾、經常,在用戶的眼里偶爾可能是1年喝一次,而我們覺得差不多1個月喝一次算偶爾,再比如訪談的時候問用戶這個問題:您覺得您喜歡下面哪個頁面的風格?用戶:“什么是風格?”


          所以交互設計師有一個能力久顯得很重要了:讓萬物都可與之對話的能力,對話需要什么,是語言。




          3.交互語言的淺見


          我們都知道,語言是我們溝通的根本,語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統。不同的種族有不同的語言,不同的專業有不同的語言例如在圍棋中有長、立、并、空、頂等等,例如在模型手辦中有分線、滲線、勾線、補土等,這也都是在特頂專業領域中的一些術語,但這些并不是語言,只是在某個領域中大家總結出來便于溝通的文字符號。


          所以我們再回到上方看一下定義,首先語言是由詞匯所組成,詞匯是由符號做組成,大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法,但這些都僅僅只是規范,而并不是語言。語言擁有更強的普適性和通用性。


          那么我所認為的語言他首先包含了能夠組成詞匯的符號,這些符號大概就是指:點、線、面、體、色彩由這些點線面體可以組成的詞匯有:按鈕、文字、圖標、圖片等。但是光有詞匯不行,在漢語中有12種詞類:名詞、動詞、形容詞,在由句子組成的詞匯中包含了不同的成分:主、謂、賓、定、狀、補...這里不過多敘述。


          語言很重要的一點它具有語境,語言的運用包含了看聽讀寫4個方面,看和聽指的是輸入,讀和寫指的是輸出,那么交互設計語言中,也包含輸入和輸出兩種屬性,例如輸入指的是由不同“詞匯”組成的“句子”,比如由標題、箭頭、色塊組成的一個itme,是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發并且進行狀態的變化和所進行的任務跳轉。



          這里的控件雖然有兩個屬性,但是還需要語境來幫助我們理解,一個是它本身所能夠輸出的默認狀態的,比如點擊之后的跳轉頁面,另外他也可以具備產品賦予的自定義屬性,例如底部滑出picker。




          還有,在漢語中“去買兩個桃子吧”,這里的“兩”肯能是虛數也可能是實數,但是在交互設計中,我們如何表示點擊1下和兩下或者是多次呢,一般單擊的屬性通??梢杂幸恍┨匦缘姆枌傩运硎境鰜?,例如加下劃線的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等,那么雙擊的話可以用雙箭頭來表示嗎,當然不可以,雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。






          那我們發現如果把交互設計能夠做成類似于語言的系統是非常有意思,并且有用的。這會讓更多信息不對稱的情況消失,不僅僅是設計師,在產品團隊中大家都能夠有一套共性的交互語言系統,無疑是一件非常提高效率的事。但是目前的很多交互規范的文檔中,大多都是多種元素的拼合,給出常用的、可復用的控件、組件,但是大家依然還是無法從語言角度去創新,這就導致了很難會有新的、有用的交互形式的出現,比如很多搜索控件都是承載在頂部導航欄中,那么在做規范的時候也只能在這個組件上去微調,殊不知搜索這個控件的“語境”并不單單只能在頁面頂部,例如高德地圖做的就很好。這樣一來,這個組件的常規規范形式就能和很多產品區分開來了,當然要視產品形態不同。



          4.業務背景與交互形態


          4.1不同業務背景下的信息組織


          市面上有許多的新零售電商產品,頁面中的信息流也是大同小異,但是無論是交互還是產品在做設計師必須要考慮的就是產品定位與當前狀態。例如目前我們看到的都是以下的信息流樣式,但是我們要知道,30000個sku和3000個sku的展示策略肯定是不同的根據算法的瀑布流在30000個sku中可以隨意展示,但是3000個就不行了,很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。





          所以這樣的產品首屏策略就顯得非常關鍵。我們可以看到常規的電商產品中,首屏基本上都是呈現這樣的策略,從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區這樣的布局,從基本上能夠滿足一個大量sku電商產品的所有需求,但是如果用戶定位和產品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢?


          從交互角度入手,那么既然我們無法做到大而全,那么我們至少可以做到精準、限時,讓用戶上癮的策略,上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具,以及時間軸的商品推薦,讓有限的資源呈現更多的形式變化以及讓用戶有時間概念,每天固定時間來進行活躍。





          4.2營銷工具化


          通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經常看到的營銷瓷片可以劃分為非常多樣式與可能性,并且在后臺工具中靈活控制,同時除了日常的營銷目的之外,在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現。


          4.2.1更加靈活的控制方式




          4.2.2多樣的營銷結構



          最后總結一下,我認為交互設計也包含了視覺,所以我們在決定用什么樣的設計形式之前需要考慮更多,入業務、用戶價值等等,從而用更加有價值的交互策略提出問題、解決問題會比單純的用規范去搭建界面更加有效。






          二、為什么UI配色那么難


          不管是做UI設計還是畫插畫,有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠,其實不然。一個可能是大家總結的太少,從來都是憑感覺和運氣去配色,但其實都是有講究的。本文不會給大家重復講解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩,并且在產品設計中使用的。



          1.人類對色彩感知的原理


          大家都知道,對于不同的顏色,我們對其的感知是不同的,有人覺得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那這是什么原因呢?首先我們要知道我們眼睛內存在兩種感光細胞:視錐細胞和視桿細胞,視桿細胞能夠感知光線強弱但無法感知顏色,而視錐細胞卻相反,視錐細胞內還有3種對不同頻率光敏感的細胞。我們經常會用到視錐細胞,而視桿細胞卻用的少,更多的是在黑暗的環境中使用的多。


          視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞,分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感,它的范圍包含的比較廣,特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。





          大家在平時生活中都能看到,在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識,因為這些非常醒目。更容易被紅視錐細胞感知到,但如果你的標識用的是冷色調那這個交通事故可能要發生的頻繁的多。



          1.1人對色彩邊緣的對比更加敏感


          我們來做個實驗,如下圖,大家覺得在中間的灰色塊是純色還是漸變色,可能很多同學看上去都會覺得是個漸變色,但其實它就是一個純色,不信的同學可以自己在工具中嘗試一下。




          但如果你把這個色塊拿出來后,不在這個環境中直接進行邊緣對比,那就不會出現漸變的情況了。那光說原理,我們也來看一下在產品設計中需要注意的地方,因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置,這樣就會造成邊緣視覺的對比,本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。





          如果你想要讓兩個顏色接近的元素具有識別度,那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外,如果是卡片樣式的設計,背景色一定不要過于灰暗也不要過于淺白,過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比,顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。





          還有,為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理,因為文字和背景疊加產生的輪廓只是文字的輪廓,在我們的第一印象中只是一種符號,當它被賦予顏色之后我們才會意識到它需要我們去注意或者可被點擊,但依然還是不夠明顯,所以為了強化可點擊這個感覺,我們才用了線框、背景色、箭頭等方式。





          2.色彩在UI設計中的作用


          1.加深品牌印象與品牌感


          一般來說,產品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產品界面中,所以例如閑魚、馬蜂窩等,主色都采用了黃色,黃色具有非?;顫?、有趣、好玩的特性,無論是線上還是線下都使用了這個品牌黃色,從每一個線上元素的主色,到線下包裝的印刷色。


          但一定要注意的是,如果品牌的主色偏灰偏暗的話,可能不太適合線上的產品進行通用。例如之前的嚴選、云集、711便利店、宜家等產品的主色都是偏深和暗的,所以在線上的界面用起來會非常不和諧,和整體偏淺色、輕的風格對比起來太強烈,引起不適。





          而且線上覺得還OK的顏色,由于印刷的原理,實物也會更加偏低飽和和偏暗。



          2.引導用戶視覺凹增加易讀性


          我們在上一篇十萬個為什么文章里提到了人們如何閱讀信息,提到了一個視覺凹的概念。所以在界面中,什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產品,使用了高亮色來引導用戶視覺。







          當然色彩的運用也會講整個頁面的層級凸顯出來,而不單純的用中性色來區分層級。


          3.區分信息交互的狀態


          同樣是上兩張圖,大家可以清晰的看到,美團中的附近熱賣好點、滿減標簽、價格,其實都只具備信息的呈現,但不具備交互的特征和狀態。但淘票票中的“4.7萬”和“展開”卻不一樣,“展開”使用了輔助藍色,這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上,當然也會有其他的色彩來表示可點擊。


          所以不是所有的元素都要賦予顏色,這樣會使整個頁面非?;靵y





          另外,UI設計中主色除了引導用戶的作用外,也可以表示當前正被激活的信息狀態。例如愛奇藝app中播放詳情頁面,當前板塊標簽和正在播放劇集的激活狀態。





          4.營造氛圍傳遞熱度


          色彩除了上方所述的字段中的不同使用,在圖片和整體氛圍營造中也起了很大的作用,目前很多2c的產品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標,或者在首頁營銷板塊的瓷片區域都會用品牌色在活動時段內進行氛圍打造





          3.在UI設計中色彩運用的坑與技巧


          1.色彩的正反兩面

          在色彩的心理學上,大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面,可以看下方多種色彩的描述。





          然而其實很多的產品使用的色彩和我們所認知的會有一些差別,比如咖啡品牌的主色選擇,在我們常規人之中,咖啡應該是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質沒什么關系的顏色





          在瑞幸剛出來的時候,很多人其實不太習慣把這個藍色和咖啡結合起來,但是為了塑造品牌差異化,瑞幸一直將“藍色”作為品牌的主基調,“小藍杯”這一稱呼不但讓消費者感到親切,也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中,主基調同樣是使用藍色,不但符合了當下消費者的視覺偏好,也在為用戶留下記憶點之后,也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。





          2.顏色的禁忌用法

          但凡各位使用了這樣的配色,保證各位過不了試用期,相信我。所以大家千萬要避開。


          1.高飽和度的色彩

          會讓人產生“幻覺”!讓人產生視覺疲勞,例如我將餓了么這個界面的色調調整一下大家看一下,不亮瞎算我輸。




          2.灰部使用過多的配色

          為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的




          3.沒有規律且過多的配色

          讓界面或者插畫看起來非常混亂。一般來說顏色的使用也需要有側重點,所以我們常用的方法是6、3、1的色彩配比。





          4.熒光色

          熒光色絕對不可以使用在UI界面中,尤其是主色。會讓你瞬間失明!





          5.太輕柔的顏色

          在很多dribbble的飛機稿中,經常能看到這樣的配色和練習。無論是在練習中還是實際項目中,這樣的界面也完全無法讓用戶看到想看的信息,沒有重點且輕飄飄的感覺。





          6.現在很火的新擬物化設計

          說真的,這樣的風格確實耳目一新,但個人覺得可能不會成為主流。因為它就和第五種一樣:信息可識別性很差。就不說色弱的人群,就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內障”。另外我們常說的一點就是所有元素都強調就等于什么都沒有強調,這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知,原則是輕量化卻又需要那么多陰影,這樣就有點自相矛盾的感覺。


          為了營造這樣的“新擬物”的輕量氛圍,還不得不在整個界面中簡化大部分元素,能不加文字就不能加文字,說的好聽叫做使用了奧卡姆剃刀原則,有一句話一直非常影響我做設計:“設計是需要被簡化的,但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。




          7.不要將對抗色重疊

          例如下方,兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼





          4.正確的UI配色方法


          定義主色


          首先我們必須要說,色彩肯定是需要結合產品和用戶的定位去指定和提煉的,所以前期會需要去做一些研究例如用戶畫像,品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”,從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑,并且對市面上的app進行總結,我們發現大部分的產品色,簡單來講在我們HSB模式中去色都在一個固定的范圍,就像這樣。

           




          在上文中也說到用色比例的631法則,所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎,其實輔助色沒有非常明顯的1種或者兩種,都是多色的輔助色方案,都在一個配色的系統中選取顏色即可。大部分產品目前都是這樣的策略,一個主色搭配多個輔色,如果有其他獨立的板塊可能需要重新定義專屬的配色策略。






          定義中性色


          其次再定義中性色,比如字體和線條以及背景色。字體是為了讓信息有對比,顯示層級,那么通常給2-3種層級即可,至少2種,至多3種。在選擇3個層次的中性色文字是,給大家一個建議:標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50,默認文字不要大于80,大家可以去嘗試一下,且中性色不得使用純黑。







          文章來源:站酷 作者:應駿



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


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

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

          用戶體驗度量模型

          周周

          本文介紹了幾個關于用戶體驗度量的模型,UES模型、適合網站的 PLUSE、谷歌的 HEART、螞蟻的 PTECH和GSM模型,它們各有切入點,也各有其適應場景。對各個模型的概念和它們相應的維度做了詳細的介紹。

          延遲增強——視頻信息流廣告的提轉秘訣

          ui設計分享達人

          伴隨短視頻平臺的崛起,移動互聯網的主流內容消費形態向短視頻視聽語言轉變,視頻信息流廣告的時代已經來臨。如何通過設計提升轉化,是視頻信息流廣告所面臨的挑戰。


          為了提升廣告轉化效果,我們結合實際項目,通過大量的實驗與思考,梳理并總結了一套適用于視頻信息流廣告的轉化組件呈現原則,我們將其命名為“延遲增強”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見信息流場景。


          ///

          延遲增強是什么?


          視頻信息流廣告有三要素:內容、框架、轉化組件。其中廣告內容來源于廣告主投放的物料,基礎框架需對齊宿主保持一致性,所以僅有承載轉化信息和行為的轉化組件,是可設計部分。 


          “延遲增強”就是針對“轉化組件”的一種伴隨視頻內容分階段/漸進式的呈現方式。它由消費者決策時的理想心理動線,結合廣告行為推導得出,并經過實驗驗證了其對于轉化提升的有效性。


          “延遲增強”包括兩個階段:1.廣告展現初始階段,延遲展現廣告意圖,通過內容吸引潛在用戶;2.廣告內容逐步呈現階段,轉化組件漸進式增強,輔以增益信息,不斷強化,引導轉化行為。


          它指導了轉化組件從“呈現”到“增強”的全流程,從時機(出現&增強時機)/引導(動效&互動引導)/前置(信息&轉化前置)三個部分,幫助提升廣告轉化效果。



          ///

          時機-延遲增強如何呈現?


          轉化組件的呈現時機包含“何時展現”與“何時增強”兩個部分,前者幫助增加廣告接收率,后者提升廣告轉化率。


          01/ 出現時機:

          延遲展現廣告意圖,可以提升廣告賣點的展現機率


          互聯網的快速發展使得受眾被動卷入爆炸式增長的資訊信息體中,廣告借助這一媒介迅速發展,但也因為部分商業廣告的過度宣傳與其降低用戶信息獲取便捷性的本質,不可避免的使受眾產生了心理上的逆反與抵觸情緒,從源頭拒絕了廣告信息。

           

          所以對廣告來說,在廣告展現初始,延遲展現廣告意圖,融入內容,可以緩解受眾的抵觸情緒,提升廣告賣點的展現機率



          02/ 增強時機:

          通過用戶行為和視頻特征動態決定增強時機,可以有效提升轉化


          對廣告來說,搭配廣告內容進行增強,通過內容積累購買欲/信任感,然后通過階段性的增強來提示操作,對比一成不變能起到更好的轉化效果。


          我們首先嘗試了程序化的增強時機,在不增加技術成本的前提下,根據歷史經驗,面向不同的廣告均采用固定時段的階段性增強。


          但不同的廣告物料內容不同,不同的用戶偏好也不同,固定的增強時機并不能很好的滿足所有廣告需求。所以在技術能力可以承載的時候,我們采用了動態時機策略,通過用戶行為和視頻特征動態決定增強時機,在程序化增強時機之后,再次實現了轉化提升。


          undefined


          ///

          引導-延遲增強如何引導轉化行為?


          轉化組件如何引導轉化,則可分為基礎的視覺引導與進階的互動引導,前者幫助搶奪視覺注意力,后者則能夠在互動體驗中植入部分幫助決策的“小心思”。

           

          01/ 視覺引導:

          適當增加視覺吸引點,可以有效引導點擊

           

          延遲增強需要通過階段性的增強來提示操作,而如何增強能有效吸引注意則需要琢磨,已有實驗表明轉化按鈕增加掃光動效與智能取色,能有效吸引注意,引導點擊,對轉化提升有良好效果。



          02/ 互動引導:

          讓用戶主動選擇,可以增加廣告曝光,輔助轉化決策

           

          互聯網產品設計對于用戶交互體驗的追求越發極致,如影視行業走向可交互網劇,本質上是從用戶接收轉變為用戶主動參與,用戶本身對于獲得優質體驗的意識逐漸覺醒。商業化產品也需要緊跟“體驗”與“互動”,將廣告變為互動體驗或具備使用價值的信息,讓用戶從被動瀏覽到主動參與,掌握對廣告的選擇權

           

          以互動投票為例,我們通過用戶與用戶之間的觀點表達,以投票選擇的形式誘發群體性選擇,引起好奇心與同儕壓力。

           

          若用戶選擇符合群體選擇,則帶來群體性背書,增強信任感;若用戶選擇不符合群體選擇,基于從眾心理,用戶極有可能對群體選擇產生好奇,從而瀏覽兩種選項的內容,有效的增加了品牌曝光。


          undefined


          ///

          前置-延遲增強如何幫助轉化達成?

           

          轉化組件的前置主要包含信息前置與轉化前置,前者輔助轉化決策,后者幫助便捷操作,更好更快的完成轉化。


          01/ 信息前置:

          增加增益信息或前置落地頁信息,可以輔助轉化決策


          購買/轉化一定是需要足夠的信息積累信任感才能達成的,在前卡適當的增加賣點信息能夠更好的幫助用戶決策。針對下載類廣告可增加評分與星級,二電類廣告可以增加價格信息,甚至可以前置優惠劵、圖片banner等信息,均能實現轉化的正向提升。


          undefined


          02/ 轉化前置:

          縮短轉化路徑,可以幫助轉化行為更便捷的達成


          在信任感積累與階段性的增強都達成的時候,在當前轉化對比跳轉落地頁再進行轉化,鏈路更短,用戶流失概率更小。比起實驗嘗試,更像是延遲增強的基礎能力配置。


          首先,我們針對表單/咨詢/電話/安卓下載都進行了轉化前置,具有用戶明確意向的按鈕點擊會直接在當前進行反饋。



          除了直接將操作前置外,針對不同細分場景的需求,還可以通過交互形態的優化在感官上縮短路徑。

           

          這里以百度的視頻MAX廣告為例,我們針對重落地頁的商家,將MAX首屏(視頻頁)與H5落地頁的關系變拼接結構為雙層結構,通過浮層面板承載落地頁,延時自動彈出,強引導下方內容,激發用戶上滑瀏覽興趣,解決了落地頁隱藏較深,轉化鏈路過長的問題,同時增加了落地頁曝光從而提升轉化。



          ///
          結語


          在視頻信息流領域中,延遲增強仍然可以繼續深挖,作為“基礎建設”承載未來更多細分場景下的互動化、個性化的“精神需求”。

           

          同時延遲增強設計方法也可以橫向復用于廣告前卡、落地頁、IM工具等各種需要在合適時機抓取用戶注意的場景中,去追求點擊或者轉化的提升。甚至在未來可以嘗試其在長視頻或圖文場景中的應用。

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


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

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

          不為動而動!聊聊動態效果在體驗設計中的應用

          純純

          一、為什么動?

          首先,為什么要動?可能你會想到以下幾條理由:

          1. 這讓我的作品看起來很炫酷,碉堡了!
          2. 動效會帶來流量,助我完成KPI!
          3. 別人都這么做了,我也得做!
          4. 編輯讓我這么干的!

          呵呵,你要這么想就完了。

          那么該如何衡量一個動效是否應該出現呢,我們認為有幾個考核標準:

          1. 這個動效是否會影響性能?

          首先,這個動效是否會影響性能?這個是最重要的,添加任何動效前都要考慮是否會影響產品的性能,如果一個很酷炫的動效會拖累性能,使體驗變得卡頓不流暢,那么必須毫不猶豫的砍掉或簡化。

          例子:化身間諜

          不為動而動!聊聊動態效果在體驗設計中的應用

          比如這個例子,這是一個穿越情景的過場動畫,隨著年份的倒轉背景出現各個歷史大事件,給人以歷歷在目的感覺,設計師考慮到了多張圖片會出現卡頓的可能性,所以特意降低了每張圖的清晰度,因為內容本身就是老照片的風格,所以這種降低畫質的手法反而增強了畫面的真實感。

          2. 這個動效是否會提高產品的可用性?

          任何動效的出現都必須帶有明確的目的性,能夠解決用戶在使用過程中的困惑,而不是炫技。單純的炫技只會分散用戶的注意力,弱化內容,變得適得其反。

          例子:翻頁提示

          不為動而動!聊聊動態效果在體驗設計中的應用

          比如這個上滑提示。不用解釋,用戶一看知道該做什么。動效增加了產品的可用性,所以這樣的動效是非常有意義的!

          3. 這個動效是否會給你的產品帶來獨特氣質?

          這里所說的氣質是動效本身會有助于增強用戶對于產品的認知和情緒帶入。一個相得益彰的動效會為你的產品錦上添花,深化你的主題和功能,注意,一定是與主題相關的,牽強的搭配只會叫人覺得莫名其妙,毫無意義。

          例子:人生四時

          不為動而動!聊聊動態效果在體驗設計中的應用

          再看這個例子,人生四時,四根火柴依次燃燒,慢慢燃盡,這種油盡燈枯的感覺很切合的體現了產品生老病死的主題。

          4. 重新審視第一條,看你的動效是否影響性能

          所以,合理的動效不應是花拳繡腿,而應該是解決問題的手段。

          二、哪里動?

          好,我們再看看哪里需要動效,這里舉幾個例子:

          1. 加載

          首先是出現在加載環境,不管是網頁還是H5都不可避免的會出現讓用戶等待的情況,在等待的過程中為了讓用戶知道他的手機沒有死機以及網絡是通暢的,我們應該在這個時候加入一些與主題相關的動效來提醒他內容正在加載中。

          例子:化身間諜H5 loading

          不為動而動!聊聊動態效果在體驗設計中的應用

          這是一個穿越類的H5,所以設計師在設計loading的時候選用了蟲洞的理念,與內容本身緊密貼合。

          2. 轉場

          第二個情景是轉場。具有意義的轉場會降低產品割裂感,我們看兩個例子就明白了。

          例子:QQ會員觀影特權

          不為動而動!聊聊動態效果在體驗設計中的應用

          不為動而動!聊聊動態效果在體驗設計中的應用

          這個例子里元素在默認狀態下會做上下浮動的效果,當我們滑動時候,元素很自然的做了一個出場入場的效果。很自然,沒有割裂感。對吧?

          3. 頁面元素的互動

          也可以為網頁元素增加一些必要的動效。

          例子:好聲音第四季首頁:

          不為動而動!聊聊動態效果在體驗設計中的應用

          看下好聲音的專題頁面,在網頁上的能夠點擊的按鈕或者文字鏈,在鼠標經過時都有點變化,這個十分必要。因為表面上的變化會給用戶一種心理暗示,那就是點擊后也會有變化。

          4. 心理需要

          這里所說的心理需求是指氣氛和情景的營造,例如節日,游戲活動等產品,是需要一些動效去滿足用戶心理需求的。大家都知道在微信里輸入“生日快樂”是會掉下生日蛋糕的,這個動效就比干巴巴的文字有趣多了。

          例子:一封家書

          不為動而動!聊聊動態效果在體驗設計中的應用

          一封家書,注意看,背景有飄落的雪花,漫天大雪勾起思鄉情,對吧,合情合理,有情有義!

          三、怎么動?

          好,說完哪里動,我們現在看看怎么動。

          1. 基于真實形態的模擬

          基于真實的動畫會叫人看起來自然流暢,符合規律,比如物體運動時的加速度現象。

          例子:Look

          不為動而動!聊聊動態效果在體驗設計中的應用

          注意看這個筆畫的動勢,是有快有慢的,模擬了寫字時起筆收筆的那種節奏感,所以看起來是自然真實的。

          2. 人物動作夸張化

          在H5的設計中,經常會出現各種各樣的人物形象,夸張的人物動作會生動你的形象,增加趣味性,給用戶以驚喜。

          例子:巴菲特這一年

          不為動而動!聊聊動態效果在體驗設計中的應用

          巴菲特老爺爺,動作很親切。

          3. 給元素賦予彈性

          有彈性的物體會叫用戶覺得具有生命感和真實性,彈的程度取決于你對元素軟硬度的設定。

          例子:拍個大頭鬼

          不為動而動!聊聊動態效果在體驗設計中的應用

          三個小鬼一跳一跳,彈性賦予了他們頑強的生命力。

          4. 蒙太奇

          這是一種類似蒙太奇的手法,通過快速切換的畫面來形成一種奇妙后現代感覺。

          例子:傳奇硬箱

          不為動而動!聊聊動態效果在體驗設計中的應用

          炫酷了,節奏很快,提氣!

          好,以上只是一些基本的動效手法,在實際的應用中其實有很多手段,在這里我建議大家可以去看看迪士尼和皮克斯的動畫,應為動畫本身是一種對于動作行為高度概括的手段。雖然這些都是電影,但是他們使用的手段和遵循的理念是非常值得我們去學習和借鑒的。注意觀察這些大牛們的作品,你會發現他們的作品中充滿了走心的細節。

          四、結語:

          簡單來說,當用戶打開一個界面,注意力首先會被動態的物體吸引,然后才會把注意力轉向顏色對比強的部分,最后才是形狀。這一過程是人在進化過程中形成的本能反應,基本適用所有用戶。同時一個非常重要且容易被忽略的原則:用戶的注意力是有限的,而且越來越少。很可能在用戶注意到一段動效之后,注意力和耐心已經用盡,無法看到其他內容就著急去下一個界面了。

          所以,對于動效這樣一個非常強勢的工具,一定要用在希望用戶注意的部分,并且認真打磨。真正做到“不為動而動”。



          文章來源:優設   作者:程遠


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

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

          數字金融產品的安全感設計探究

          ui設計分享達人

          當互聯網不斷的深入到我們的生活中,我們對安全感的需求也延續到了互聯網使用中,特別體現于互聯網金融產品。由于其具有風險性、收益性、流動性等特點,用戶對于資產安全的掌控感更為關注,產品使用體驗欠佳也直接影響客戶安全感。


          以下將基于自身工作總結和行業經驗,聚焦互聯網金融產品分享和總結如何向用戶營造安全感。


          目錄:

          一、需要什么樣的安全感?

          二、如何傳達出安全感?

          三、怎樣體現出安全感?




          需要什么樣的安全感?


          安全感是人類最底層的需求,但不同類用戶群體需要的安全感也各有千秋,我們參考第一財經商業數據中心×螞蟻財富的2019線上理財人群報告,將線上理財的人群分為四類:

          分別是初入職場的95后、職場新興力量的90后、理財中堅力量的80后和經歷風雨的70后。其中近一年的新增移動互聯網基民中超五層為90后、95后,成為金融移動互聯網的中堅力量。


          這類型的投資者由于具有碎片化處理事務的習慣和金融知識不足、理財經驗不豐富、資金的抗風險能力不高的特點,當市場普遍行情下跌時,更容易產生焦慮的情緒而導致“割韭菜”,進而可能會影響到卸載APP的行為。根據Mob研究院的數據顯示,在2021年3月天天基金日均卸載用戶規模為前兩個月的6倍,而當時對應的市場行情正為基金普遍大跌。

          因此從安全感的需求上他們更側重高效的信息降維、足夠的理財產品的風險提示、合理的預期收益宣傳以及投后虧損及時的內容陪伴。


          而根據騰訊理財通×國家金融與發展實驗室出品的2021年互聯網理財行為與安全研究報告顯示,理財知識更充足,理財經驗更豐富的80后、70后在安全感的維護上則更關注理財產品的信息披露風險、信息不透明風險、市場政策風險、個人信息泄露風險此類問題。




          如何傳達出安全感?


          安全感是一種感性的心理感受,而人類的情感由本能、行為、反思三個層面共同決定的。

          這三個層次作為人類大腦的運作的規律,映射到設計當中,同樣是可供遵循、值得探究的。



          本能層

          先于意識和思維,它是外觀要素和第一印象形成的基礎,著重于產品的外觀、觸感等。“美觀即實用原則”人們會潛意識里認為好看的東西也是好用的,所以在界面設計當中,主要設計對象是視覺設計。


          而金融產品中,常用藍、綠等冷色調的色彩,給人以冷靜,穩定的感覺,表現金融產品的科技感和可靠性;常用紅、黃、橙等暖色調,代表著熱情、溫暖與責任。


          行為層

          是人類身體日常行為的運作,行為層的設計與產品使用過程中的愉悅感和效率有關。好的行為層設計對應產品功能傳達、易學性與易用性,以及正面的心情感受。在界面設計當中,主要設計對象是交互設計。(將在下文通過投資場景詳細分析)



          反思層

          超越了本能層和行為層,存在意識和更高級的感覺、情緒及知覺。對應的是產品的情感溫度,主要的設計對象是正向情感的結果反饋以及品牌信任。


          良好的企業品牌形象和口碑很大程度上會給用戶帶來認知上的安全感。用戶在初次選擇購買金融產品時,往往強大的品牌背書起到了關鍵作用,即使是同一只基金,用戶也會選擇在自己信賴的平臺里購買。

          我們可以通過在頁面設計中加入更多的品牌元素,如品牌主題色、LOGO、品牌IP形象、品牌slogan等,來潛移默化地讓用戶感受企業的價值:


          另一種常見于一些平臺利用強大的背書以及所獲的成就,清晰地向用戶展示可以提供的保障權益,責任條款及資質介紹等來傳達企業對用戶負責的態度,提升用戶對產品乃至對企業的信任感:




          如何體現出安全感?


          我們將金融的生命周期分為三個階段,分別可以概括為:投資前(產品選擇)、投資中(產品交易)、投資后(產品管理),不同階段的關注點不同,而對于安全感需求各不相同:



          投資前

          結合文章一開始對人群的分析,由于投前的行為特點更多聚焦于產品的選擇,因此從理財小白的角度對于安全感的缺乏更集中于“買了會不會虧錢?”、“產品買對了嗎”、“看不懂規則”、“這個適合我嗎”等,尤其存在于一些新形式的理財組合產品和策略智能投產品中。


          在這個階段的安全感維護,除了相關頁面的信息降維、必要的投教啟蒙以外,還需要考慮用戶疑問的快速解答、合理的預期收益宣傳等。另外投錢的啟蒙教育更可以考慮結合一些運營活動,讓小白用戶通過更有趣的方法了解產品,了解自己適合的產品。

          而對于較有經驗的理財“老司機”而言,安全感的缺乏更集中于“過往表現怎么樣,如最大回撤率等”、“市場行情、政策是否利好”、“基金經理的資歷”等,而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產品的對比等來表達產品的未來盈收能力可期。


          投資中

          當投資者已經選擇好信任的理財產品時,在產品交易的各個界面也需要關注交易流程中安全感的反饋。

          其中包括正向反饋和負向反饋。正向反饋是指用戶跟產品發生正確的交互時,系統給予用戶的正確引導,可以幫助用戶打消顧慮,建立信心,讓用戶感受到一切都在順利地進行著,這對那些在設備操作方面缺乏信心的用戶來說尤為重要,用戶不會對自己的操作或對平臺產生質疑,如:專屬的密碼輸入鍵盤、正向反饋如金額輸入時的金額提示、特別提出易誤解的交易規則等


          反向反饋是指用戶在操作過程中出現或疑似出現誤操作時,系統向用戶展示提示或二次確認以促進錯誤的糾正或確保此操作無誤。它能確保在第一時間告知用戶出現了不正確操作,及時更改,使流程順利進行,尤其是對于一些理財小白而言,合理的容錯設計更促進有效投資,提高未來的盈利體驗。如撤銷操作二次確認、購買超出風險承受能力的產品、輸入錯誤金額時的反饋。

          引起思考:

          雖然天天基金的撤單確認展示了退回帳戶,但是此彈窗的取消按鈕引導性過強,首次操作僅通過銀行卡的列表的箭頭較難聯想到是確認撤單的下一步操作(還以為是可選擇退的帳戶)。



          投資后

          產品交易成功后,投資者的關注會更集中于自己的資產的變化,產品的未來走勢等,因此在安全感的提供上,需要向投資者傳達準確的交易狀態、資產狀態、資產的保護等,甚至可以在產品購買的完成頁設置快捷加入自選和漲跌提醒等

          引起思考:

          在支付寶的基金總金額中,存在交易進行中的提示文案為“買入待確認*元”,但不少小白會產生疑問,當前展示的基金總金額是否包含提示的待確認金額,此時是否可將文案改為“含買入待確認*元”(畢竟也有部分直銷app并不會將待確認金額包含進產品的總金額中)


          另一方面的更需要考慮當基金產品存在虧損時,及時向投資者傳達情感陪伴和合理的投資交易,以促進投資者優化持倉或保持中長期持有,避免頻繁的短期交易而導致不良的盈利體驗。

          文章來源:站酷   作者:陳皮紅豆沙

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


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

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


          交互小科普!你了解這5項最常用的交互模式嗎?

          純純

          為大家概括性地介紹5種流行移動應用中常見的界面設計模式以供大家在自己的項目中參考。這些設計模式有助于大家提高設計的可用性,讓界面變得更加直觀。文章將側重介紹能夠幫助大家進行下列各方面設計的模式:

          1. 社交分享
          2. 通知
          3. 彈窗
          4. 內容更新
          5. 用戶互動(滑動、點擊等)

          一、社交登陸

          在這個社交網絡盛行的時代,我們是不是真的還需要用這種陳舊的方式提交個人資料?社交登陸這一設計模式完全可以讓用戶輕松快捷的登陸,從而取代注冊、填寫表單之類的麻煩工作。

          交互小科普!你了解這5項最常用的交互模式嗎?

          用戶可以直接登陸自己的社交網絡賬號(Facebook、Twitter或者Google等),無需另外創建一個以后不太可能繼續使用的賬戶,這樣可以大大提高注冊效率。除此之外,這一設計模式還有下列好處:

          • 使用現有社交網絡賬號登陸用戶就不用再多記一套用戶名密碼了。
          • 用戶無需被迫在自己剛剛下載還不熟悉如何使用的應用中輸入信息,從而簡化注冊流程。
          • 讓用戶通過現有社交網絡賬號注冊也許能讓你獲得一些有關他們的基本資料。這樣你就能更加有效的根據用戶的實際需求調整應用。

          注:在國內這一設計演變成了:您可以使用QQ/微博合作帳號登錄,然后給你綁定,繼續回到注冊界面  – –

          二、通知

          通知功能可突出顯示近期的活動和操作。我們每天要接觸大量的信息,但百忙之中卻沒有時間(或者不愿意把時間)花費在手機上。我們都喜歡在盡可能短的時間內完成要做的事,然后馬上知道是否有新的活動或者情況能夠引起自己的關注。因此,對于通知設計模式的透徹理解和妥當實施非常重要。

          交互小科普!你了解這5項最常用的交互模式嗎?

          很多知名公司的移動應用采用了下列幾種不同的方法實施其通知設計:

          • LinkedIn在有更新內容的標簽上放置標有數字的徽標。
          • Twitter則在時間軸圖標頂部放置一個小點指示有新活動。
          • Facebook使用一個會在應用內垂下的彈出條幅顯示新鮮事推送中的新內容通知。

          你可以模仿一下你最喜歡的解決辦法,試試這個辦法是否適合于你和你的用戶。

          通知欄該怎么設計,具體方法右戳學習:《怕打擾用戶?來看看怎樣設計通知欄不會討人厭》

          三、彈窗和層疊窗口

          彈窗(也叫層疊窗口)是一種常用于互聯網廣告的方法。彈窗會在不創建新窗口的情況下遮蓋住主要內容,無法使用攔阻軟件進行攔截,因此用戶非看不可。一般來說這種情況很讓用戶討厭,但在有些情況下,彈窗打斷用戶的使用反而能給用戶帶來幫助。例如,用戶可能會希望在不丟失當前用戶界面的情況下查看某些信息。

          交互小科普!你了解這5項最常用的交互模式嗎?

          下面是一些彈窗設計模式幫助解決問題的案例:

          • 在用戶在應用中執行特定操作或達到特定時點時彈出并顯示與特定操作或場景相關的信息/控制方法。
          • 應用中原來的內容或場景仍然在背景中顯示,但彈窗可以讓用戶選擇是否要了解接下來要出現的內容。
          • 彈窗可以吸引用戶的注意力并在必要時提供重要通知。在使用完成后,用戶可以點擊或滑動屏關閉彈窗返回先前活動狀態。

          四、下拉刷新

          在習慣了使用Facebook、Twitter或Google等社交網站后,我們都會很自然的使用下拉手勢進行內容更新。第一個使用這個設計模式的公司是Apple,在此之后這一設計就廣為流行開來了。

          交互小科普!你了解這5項最常用的交互模式嗎?

          當用戶需要顯示一列非靜態,但不能自動刷新的內容時,就可以適用下拉刷新模式。下拉刷新時,屏幕會滾動到頂部,刷新完成后新內容將從頂部開始顯示。這種設計模式可以節約空間(不需要使用按鈕)而且簡單易懂。這種方式還不僅局限于更新內容,其還可以用于在一系列短信、圖片或資料更新中加載早先的內容。

          五、用戶交互(滑動、點擊等)

          除了下拉刷新手勢外,滑動也是智能手機上最為常用的手勢之一。很多應用都允許用戶在文章上左右滑動來了解詳細信息或執行其他操作。與依賴于點擊鼠標的傳統web應用相比,這一方法充滿創新意義。

          交互小科普!你了解這5項最常用的交互模式嗎?

          在Android和iOS上有大量采用了滑動、點擊及其他特定用戶交互方式的移動應用,你可以在自己的項目過程中予以參考。每個應用對于自己的用戶來說都有不同的意義和價值。你應當在畫線框圖的過程中做好規劃再投入設計或開發流程。在測試過程中花點時間思考用戶的反饋、建議和批評。



          文章來源:優設   作者:程遠



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


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

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

          超長篇干貨!如何從交互維度量化用戶體驗?

          周周

          這篇文章,和大家分享一些在產品和交互設計中的一些自己的方法。

          怎樣才算一個好的交互設計方案?做好這5個維度就夠了!

          周周

          經過一些項目經驗,結合幾個方法論,我整理出了一個評估交互方案完整性的方法,也可以作為前期考慮方案的分析方式。下面就來介紹一下,希望能給大家幫助和啟發。

          日歷

          鏈接

          個人資料

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

          存檔

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