首頁

《Ant Design 設(shè)計(jì)模式周周看》階段總結(jié)篇· 與交互操作相關(guān)的設(shè)計(jì)模式

周周

《Ant Design 設(shè)計(jì)模式周周看》階段總結(jié)篇· 與交互操作相關(guān)的設(shè)計(jì)模式 

評論(0) 瀏覽(1733)

交互設(shè)計(jì)：淺談B端用戶畫像

周周

本文淺談了B端如何制作在工作中具有實(shí)用性的用戶畫像，提供了一個(gè)相對比較通用的解決方法供大家參考。但實(shí)際上用戶畫像的方法還有很多

評論(0) 瀏覽(2556)

用戶體驗(yàn)是玄學(xué)嗎？

純純

Part 01 - 用戶體驗(yàn)和用戶體驗(yàn)設(shè)計(jì)


關(guān)于“用戶體驗(yàn)”這個(gè)詞，很多剛?cè)胄械男氯硕加X得它玄之又玄，妙不可言。一方面是不知道他具體到底是什么，就好像那是一塊理想地，看不見也摸不著，另一方面呢糟糕的用戶體驗(yàn)，作為用戶是能清晰感覺到它的存在。所以呢，在這里，會(huì)圍繞“用戶體驗(yàn)”這個(gè)詞做一個(gè)科普性質(zhì)的解釋和綜述，希望對初學(xué)者一些小小的幫助。



1.1 什么是用戶體驗(yàn)？

用戶體驗(yàn)的定義有很多種，我比較傾向的解釋是：

“用戶體驗(yàn)是人對于使用一個(gè)產(chǎn)品、系統(tǒng)、服務(wù)時(shí)的預(yù)期和反應(yīng)?！?

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

從廣義上來看，體驗(yàn)的主體是人，客體可以是一切物體和事情，媒介是我們的感官；當(dāng)我們的感官作用在一切事物上，會(huì)產(chǎn)生相應(yīng)的心理行為，比如預(yù)期，比如反饋，比如情緒，著所有的一切一起作用，形成了用戶體驗(yàn)過程。


只要留心生活，你會(huì)發(fā)現(xiàn)用戶體驗(yàn)無處不在。

舉兩個(gè)例子：

第一個(gè)是北京隨處可見的地鐵充值機(jī)，我經(jīng)?？吹接脩粽驹谀抢镢卤疲钪饕氖撬`背了用戶的操作習(xí)慣，插卡機(jī)器的的行為總會(huì)讓人聯(lián)想到APM機(jī)，而幾乎所有的APM機(jī)器卡都是插一半然后自動(dòng)吸進(jìn)去的，而北京地鐵卡是需要插到底，然后還需要用力按一下才能成功識別，跟多用戶懵逼在這一步，并沒有用力按，然后以為是機(jī)器壞了沒有識別。

第二個(gè)例子是我工作的地方旁邊商場一樓有一個(gè)肯德基，它有兩個(gè)門可以進(jìn)入，第一個(gè)門是在商場外臨街，第二個(gè)門是在商場內(nèi)。

我連續(xù)兩周的工作日每天早上9點(diǎn)半到10點(diǎn)在這家店吃早餐，發(fā)現(xiàn)一件很有趣的現(xiàn)象，由于工作人員的疏忽，商場內(nèi)的門二經(jīng)常會(huì)忘記打開，因?yàn)檫@個(gè)商場的負(fù)二樓和地鐵站連在一起，所有很多人地鐵到站的人群從地鐵站口出直接從商場內(nèi)走向街道：

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

我吃早餐的兩周里做了一個(gè)統(tǒng)計(jì)，10個(gè)工作日里，每天在我吃早餐的這半個(gè)小時(shí)內(nèi)，試圖推開門2卻發(fā)現(xiàn)打不開的，平均到每天有6位，按照每個(gè)人平均買一份早餐套餐15元錢來算，10天內(nèi)，由于工作人員的失誤，這個(gè)門至少阻擋了至少900元營業(yè)額。


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

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


再看一下肯德基這個(gè)例子的數(shù)據(jù)結(jié)論：

被門2阻攔的62個(gè)人里，45人流失。

其余17位選擇從門1再次進(jìn)入，這17人里，本身就要順路經(jīng)過門一的占11位，說明大概率只有順路才會(huì)進(jìn)入完成轉(zhuǎn)化。


這個(gè)例子說明什么呢？

在替代品遍地都在的今天，不要試圖去挑戰(zhàn)用戶的體驗(yàn)。


當(dāng)用戶看到肯德基的門2，他們產(chǎn)生的預(yù)期是馬上就可以推開享受一頓早餐，這時(shí)候由于門2打不開，使得用戶預(yù)期受挫。

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


這就是為什么互聯(lián)網(wǎng)行業(yè)把產(chǎn)品用戶體驗(yàn)看得這么重要的原因，除了社交產(chǎn)品以外的用戶是很難有忠誠度的，你的產(chǎn)品難用，你不能給用戶更大的福利，用戶一旦發(fā)現(xiàn)別的產(chǎn)品做得比你好，用戶會(huì)馬上放棄你，轉(zhuǎn)而用別的替代品。


上面的那個(gè)例子主要表達(dá)的是用戶預(yù)期受阻帶來的糟糕體驗(yàn)導(dǎo)致用戶流失。其實(shí)整個(gè)用戶體驗(yàn)的過程當(dāng)中，是有很多很的因素相互制約，協(xié)同作用的：


戶體驗(yàn)本身一個(gè)很龐雜繁復(fù)的系統(tǒng)；在一個(gè)過程內(nèi)，用戶對整個(gè)過程中的元素的預(yù)期和反應(yīng)（情感和生物反應(yīng)）構(gòu)成了整個(gè)用戶體驗(yàn)系統(tǒng)。這里面包含了很多很多的旁支，比如人的感知、人的經(jīng)驗(yàn)系統(tǒng)和使用場景決定了人對于單個(gè)體驗(yàn)的預(yù)期，而如果超過預(yù)期會(huì)帶來驚喜，促使用戶正向評價(jià)，也促使用戶再次體驗(yàn)。比如人感知和體驗(yàn)中客體呈現(xiàn)的意符決定了人的行為等等…


用戶體驗(yàn)最初的時(shí)候它只是用于表征易用性方面，而現(xiàn)在，它的概念更多的表現(xiàn)在情感的一個(gè)分支，包含設(shè)計(jì)情感互動(dòng)和評估情緒 。因?yàn)槿说那榫w是很難拿捏的，面對不同教育背景不同生活經(jīng)歷的用戶，我們最初其實(shí)很難歸納出到底什么樣的設(shè)計(jì)是具有好的用戶體驗(yàn)。


好的用戶體驗(yàn)各有各的優(yōu)點(diǎn)，但是，糟糕的用戶體驗(yàn)卻很容易被歸納和識別出來。


設(shè)計(jì)師們不斷的在識別和總結(jié)糟糕的體驗(yàn)問題，慢慢在優(yōu)化這些問題的過程中積累經(jīng)驗(yàn)，其實(shí)也慢慢的有了一些關(guān)于用戶體驗(yàn)的方法論形成，這種方法論作用于各個(gè)設(shè)計(jì)行業(yè)，工業(yè)設(shè)計(jì)、服裝設(shè)計(jì)、奢侈品、廣告、互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)各個(gè)行業(yè)產(chǎn)生的方法論其實(shí)不盡相同。




1.2 什么是用戶體驗(yàn)設(shè)計(jì)？


說起設(shè)計(jì)（Design）這個(gè)詞，那就厲害了 ，作為設(shè)計(jì)師的你聽說過解釋肯定有很多種，而我個(gè)人對”設(shè)計(jì)“的理解是：設(shè)計(jì)是一種”約束條件下，解決問題的可行的辦法“。而對于用戶體驗(yàn)設(shè)計(jì)而言，早期的時(shí)候，我們僅能夠基于經(jīng)驗(yàn)主義去完成一些設(shè)計(jì)，這時(shí)候?qū)＜业淖饔脮?huì)被放大，因?yàn)閷＜姨岢龅牟灰@樣、不要那樣，往往會(huì)成為指導(dǎo)性方案：


但是隨著發(fā)展，不斷地有人站出來嘗試描述和定義用戶體驗(yàn)的邊界，比如：


隨著探索者越來越多，我們最終也是大致能夠夠了出用戶體驗(yàn)設(shè)計(jì)的定義范圍：既然體驗(yàn)是一個(gè)過程，那么狹義的，用戶體驗(yàn)設(shè)計(jì)實(shí)際上是通過改善和優(yōu)化用戶與產(chǎn)品交互過程，從而提升用戶的滿意度的過程。


這里有兩個(gè)要點(diǎn)：


1、用戶體驗(yàn)設(shè)計(jì)的目標(biāo)是逐步不斷提升用戶滿意度，前面兩有個(gè)定語：“逐步“、”不斷”，對于用戶而言，永遠(yuǎn)沒有所謂“最滿意”的說法，只有“相較于上一次體驗(yàn)更滿意”.所以除非定義一種可量化的終極滿意度模型作為指標(biāo)參照，否則用戶體驗(yàn)設(shè)計(jì)是一個(gè)永遠(yuǎn)都有優(yōu)化空間的過程。


2、用戶體驗(yàn)設(shè)計(jì)是圍繞過程的設(shè)計(jì)，在互聯(lián)網(wǎng)行業(yè)中，這個(gè)過程主要指用戶與產(chǎn)品（app、PC端，客戶端、VR等）的交互過程中，所以下文重點(diǎn)討論的是在互聯(lián)網(wǎng)行業(yè)中的用戶體驗(yàn)設(shè)計(jì)。



Part 02 - 用戶體驗(yàn)設(shè)計(jì)是一個(gè)崗位嗎？


以2018年2月為時(shí)間節(jié)點(diǎn)的目前來說，用戶體驗(yàn)設(shè)計(jì)不是一個(gè)崗位，現(xiàn)階段來看，它更像是一個(gè)協(xié)同目標(biāo)，每個(gè)公司的所有設(shè)計(jì)師（UI/視覺/交互），用研人員，包括開發(fā)人員其實(shí)工作的目標(biāo)都是為了逐步提升自己公司產(chǎn)品的用戶體驗(yàn)。


雖然用戶體驗(yàn)設(shè)計(jì)目前還不是一個(gè)崗位，但是它正在趨向于成為一個(gè)崗位。要解釋這一點(diǎn)，我們還是要從用戶體驗(yàn)的定義說開去，還記得用戶體驗(yàn)設(shè)計(jì)是什么嗎？用戶體驗(yàn)設(shè)計(jì)是通過改善和優(yōu)化用戶與產(chǎn)品交互過程，從而提升用戶的滿意度的過程。


既然要改善和優(yōu)化用戶與產(chǎn)品交互過程，那把這個(gè)句子拆分開來，大概需要的知識儲(chǔ)備有：

1、從主語的角度看：首先你要了解用戶吧？用戶是人，要提升人的滿意度，對人感到心理滿足的機(jī)制是不是需要了解？


2、從客體的角度看：客體是產(chǎn)品，在互聯(lián)網(wǎng)行業(yè)表現(xiàn)為手機(jī)（app）、pad（app）、PC（軟件）和VR設(shè)備等等。這些產(chǎn)品是我們著重需要關(guān)注的點(diǎn)，比如一個(gè)app中視覺信息的呈現(xiàn)，app的信息架構(gòu)、app的交互設(shè)計(jì)、app的可用性和易用性等等，都是需要考慮的。


3、既然是用戶與產(chǎn)品交互過程，是不是要知道人和產(chǎn)品（手機(jī)、app、PC）到底是如何交互的？每一次的點(diǎn)擊，滑動(dòng)對于用戶來看心理應(yīng)該是怎樣，產(chǎn)品的每一次反饋都意味著什么？


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


只不過我們現(xiàn)在因?yàn)閸徫还袒?，大多?shù)公司，每個(gè)人的工作職責(zé)僅限于那一塊，你是做視覺/UI的，那就好好畫界面，你是做交互的，那就好好研究布局，你是用研，你是DBA，你是什么職位就做什么職位的事情，從來不越界，這樣其實(shí)是不利于人的發(fā)展的，那我們追求上進(jìn)的設(shè)計(jì)師們只能自己下來多看書，多去做研究，私下來多花時(shí)間修煉自己的內(nèi)功心法，才能讓自己立于不敗之地。


用戶體驗(yàn)設(shè)計(jì)發(fā)展到今天，目前包含了最大的三個(gè)有模糊邊界的模塊是用戶研究、交互設(shè)計(jì)、視覺設(shè)計(jì)?，F(xiàn)在絕大多數(shù)互聯(lián)網(wǎng)公司也都是按照以上這三個(gè)模塊去設(shè)置崗位的，這樣有一個(gè)很大的問題其實(shí)是不利于設(shè)計(jì)師的發(fā)展。


阿里巴巴1688的設(shè)計(jì)總監(jiān)汪方進(jìn)關(guān)于這三個(gè)崗位，有這樣的一番評述：

比如交互崗位，如果對接的是一位能力較強(qiáng)的PD，他們可能把交互稿定了七八成，交互設(shè)計(jì)師完善后交付給視覺設(shè)計(jì)師，而對接的視覺設(shè)計(jì)師又有一些交互Sense，他也許把交互稿又改了改，那么這個(gè)過程下來，交互設(shè)計(jì)師的內(nèi)容，還能保留多少呢？我所說的這種情況，可能也是當(dāng)下我們交互設(shè)計(jì)師同學(xué)所面臨的痛。

而視覺設(shè)計(jì)師又是怎樣的現(xiàn)狀呢？視覺設(shè)計(jì)師拿到交互稿后，在交互稿的基礎(chǔ)上美化潤色一下，自主發(fā)揮空間不太大。從我們集團(tuán)總體情況來看，視覺設(shè)計(jì)師的（P級）成長是比較慢的，因?yàn)槲覀冎v求論述自身設(shè)計(jì)的價(jià)值是什么，但把視覺從整體中剝離出來，視覺設(shè)計(jì)師設(shè)計(jì)的某一個(gè)頁面，具體能帶來多少商業(yè)價(jià)值？視覺設(shè)計(jì)師很難去論述這點(diǎn)。


關(guān)于用研、視覺、交互這三個(gè)模塊，我也想分開來談?wù)?，希望能對目前剛?cè)胄谢蛘呷胄胁痪酶械矫悦５男』锇橛兴鶐椭?



Part 03 - 用戶研究


上面我們說到，用研、交互、視覺這三個(gè)模塊構(gòu)成了一個(gè)用戶體驗(yàn)設(shè)計(jì)的能力維度，要搞清楚這三個(gè)維度，我們不妨先看看業(yè)界最出名的一張用戶體驗(yàn)要素圖：

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


關(guān)于用戶研究，如果是一個(gè)從0到1的產(chǎn)品，產(chǎn)品初期是需要對產(chǎn)品用戶進(jìn)行定位劃分和用戶畫像，就是我的這個(gè)產(chǎn)品是為了解決什么樣的用戶的什么需求的，這些用戶的屬性是怎樣的，他們具有什么樣的特質(zhì)和顏色、他們一般使用產(chǎn)品的情景是如何的？


這里需要注意的是，如果你不是一位有用研經(jīng)驗(yàn)的人去第一次嘗試做用研，需要留心我們很容易落入理想化用戶設(shè)計(jì)的陷阱。再客觀的站在用戶角度去思考，去設(shè)計(jì)也會(huì)有主觀和流于表面的情況出現(xiàn)。我們不能想當(dāng)然的按照理想情景去思考用戶需求，用戶需求是復(fù)雜的，再加上企業(yè)自己的，以及各部門的需求紛繁，所以一般在產(chǎn)品迭代的過程中新的功能很容易陷入想當(dāng)然的“用戶就是需要啊”的思維之中。所以對于成熟的產(chǎn)品來說，需要?jiǎng)澐趾诵闹髁骱推胀ㄓ脩舨⒎謩e畫像。關(guān)于用戶畫像的方法有很多很多，大家可以去隨意搜索在這里就不細(xì)談了。


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


關(guān)于用戶研究的常用方法，具體推薦給大家兩本大部頭的書，大家感興趣或者不知道自己感不感興趣，可以去看看《設(shè)計(jì)調(diào)研》和《洞察用戶體驗(yàn)方法與實(shí)踐》 第二版。



Part 04 - 交互設(shè)計(jì) 


交互設(shè)計(jì)的輸出物是產(chǎn)品原型，也就是你們看到的線框圖。那線框圖是怎么產(chǎn)生的呢？這個(gè)需要從產(chǎn)品經(jīng)理那邊對功能梳理開始。

一般大一點(diǎn)的有交互團(tuán)隊(duì)的公司，比如新浪微博啊之類的，他們的產(chǎn)品經(jīng)理的工作重點(diǎn)會(huì)更加focus在功能本身到底是不是用戶所需要的，而經(jīng)過產(chǎn)品提出來的需求文檔，一般只有功能需求List和他們的優(yōu)先級，如果遇到要畫圖說明的，也就是簡略的幾一個(gè)草圖。

這時(shí)候，交互設(shè)計(jì)師會(huì)根據(jù)產(chǎn)品的提出的功能需求List去進(jìn)行整理和區(qū)分：

這里整理和區(qū)分的方法是合并，拆分和歸納。

比如功能A是可以拆分成更細(xì)顆粒度的需求A1和A2的，其中A1和A2又碰巧屬于不同的已有的兩個(gè)功能區(qū)塊，那么就可以把他們拆分到不同的功能線上，如果某些功能發(fā)現(xiàn)他們有同樣的屬性，那是不是考慮把他們整合在一起？


這樣整合完了需求，再按照優(yōu)先/重要的二維表格去劃分，最后得到一個(gè)需求量表：

然后我們根據(jù)這樣的版本需求量表優(yōu)先級和重要性，有的放矢的去設(shè)計(jì)功能入口和信息架構(gòu)，就會(huì)游刃有余：


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



如果你以為交互設(shè)計(jì)師就是畫個(gè)原型，那你就錯(cuò)了，交互設(shè)計(jì)師切記不要淪為產(chǎn)品助理……其實(shí)在真?zhèn)€UX體系中，交互設(shè)計(jì)師承擔(dān)的是最重要也是最核心的一個(gè)環(huán)節(jié)，那就是優(yōu)化用戶路徑（即優(yōu)化流量路徑）。


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

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


窮舉所有用戶路徑，看看有沒有哪一跳是可以被優(yōu)化的（以唱吧為例



這里面有很大很大的學(xué)問，如果展開說的話可能是一個(gè)幾萬字都說不清楚的篇幅。

總之，一個(gè)好的app一定是功能和產(chǎn)品形態(tài)足夠扁平簡單。

要讓產(chǎn)品形態(tài)足夠扁平簡單，就需要根據(jù)app的形態(tài)去整理和梳理交互層級，針對流量問題進(jìn)行具體的分流設(shè)計(jì)：

比如當(dāng)我們看到一個(gè)200wpv的頁面，下屬三個(gè)平行按鈕分別只有40w、12w和3wpv，刨除場景問題之外，從交互出發(fā)那是不是我們可以設(shè)計(jì)一個(gè)內(nèi)頁的segment組件去完成三個(gè)內(nèi)頁的滑動(dòng)跳轉(zhuǎn)、降低操作成本呢？

比如淘寶這樣：

又或者說，我們是不是可以未一個(gè)pv較低卻承載功能較大的頁面另外設(shè)置另多個(gè)入口呢？

比如像外賣產(chǎn)品這樣：

最后的最后，交互設(shè)計(jì)的工作產(chǎn)出就是原型了，既然都思考妥當(dāng)了，畫個(gè)圖就就沒啥好說的了...



Part 05 - UI設(shè)計(jì)



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


在這里再啰嗦一遍啊：


UI設(shè)計(jì)師的基本技能是精確的信息視覺傳達(dá)，不是視覺炫酷的界面！

UI設(shè)計(jì)師的基本技能是精確的信息視覺傳達(dá)，不是視覺炫酷的界面！

UI設(shè)計(jì)師的基本技能是精確的信息視覺傳達(dá)，不是視覺炫酷的界面！


重要的事情說三遍！


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

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


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


UI設(shè)計(jì)其實(shí)都不是鬧著玩的工作，也絕對不是純主觀感性的工作，判斷一個(gè)UI界面的好壞可以通過易用性和易讀性測試、瞇眼測試的方法檢驗(yàn)，判斷一個(gè)產(chǎn)品交互設(shè)計(jì)的優(yōu)劣也可以從易用性測試和用戶反饋中得出線索，判斷哪種交互手段和信息架構(gòu)更為可行通過ab test的方法得出結(jié)論，這一些的一些設(shè)計(jì)它都是一個(gè)有著科學(xué)的方法論作為指導(dǎo)的。


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


文章來源：站酷   作者：Seany

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


免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




評論(0) 瀏覽(1790)

從交互維度量化用戶體驗(yàn)

純純

和大家分享一些在產(chǎn)品和交互設(shè)計(jì)中的一些自己的方法。



Part - I 什么是交互

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

當(dāng)時(shí)我舉的例子是用翻頁器去控制ppt翻頁：


如上圖所示，拆解這一套交互行為：

當(dāng)我我點(diǎn)擊翻頁器的“下一頁”按鈕，我點(diǎn)擊行為附帶的心理預(yù)期是“PPT翻往下一頁”，然后我點(diǎn)擊的時(shí)候，遙控器塑膠按鈕給到我手指一個(gè)物理反饋，證明我按下的行為已經(jīng)完成了，這是“輸出端（我的手）的交互與反饋”，這時(shí)候遙控器接收到按鈕指令，把指令通過紅外線傳輸?shù)経SB接收器上，接收器把指令傳到PC端然后完成翻頁動(dòng)作，再通過大屏幕傳到我的眼（輸入端）中，我就可以確認(rèn)這一次交互反饋是符合預(yù)期的。BTW這里有一點(diǎn)想要補(bǔ)充：設(shè)備對設(shè)備（上圖中黑色箭頭），也屬于廣義的交互，只不過現(xiàn)階段大家研究的交互設(shè)計(jì)都是狹義的，人為主體的交互。


在我們?nèi)沼每萍籍a(chǎn)品的早期，有兩個(gè)東西是無法跳過的，那就是按鍵手機(jī)和PC電腦：


他們幾乎是同步在發(fā)展的，而這兩個(gè)產(chǎn)品的交互行為基本上延續(xù)到了觸屏手機(jī)時(shí)代，所以為了弄明白觸屏手機(jī)的交互，這兩個(gè)產(chǎn)品是值得講一講的。


先看按鍵手機(jī)（就是我們小時(shí)候用的非智能手機(jī)）：

在按鍵手機(jī)中，最讓用戶困惑的其實(shí)是按鍵和屏幕之間存在一個(gè)映射關(guān)系，而不同廠商缺乏一個(gè)統(tǒng)一的規(guī)范，各家映射規(guī)則不一樣。大家是否還記得當(dāng)年的手機(jī)說明書那可以說是相當(dāng)厚，因?yàn)檎f明書必須要給用戶建構(gòu)一個(gè)心理模型；比如上圖，點(diǎn)擊左上角和右上角那兩個(gè)“-”按鈕，其實(shí)一一對應(yīng)的是屏幕左下角的“Goto”和右下角的“Names”。這個(gè)一一對應(yīng)關(guān)系作為今天的用戶來看應(yīng)該是很平常而且很易懂的，但是當(dāng)年沒用過手機(jī)的人，需要花很長時(shí)間閱讀說明書，才能夠明白物理按鍵和屏幕上的映射關(guān)系，這就是觸屏手機(jī)很難用的地方，也是很反人性的地方。因?yàn)樽鳛橛脩魜碚f，心智上，我們當(dāng)然希望所觸即所得。

再來看PC，作為和按鍵手機(jī)差不多一起出現(xiàn)的載體形式，人們操作PC端人是通過媒介（也就是鼠標(biāo)+鍵盤）輸入的，其實(shí)本質(zhì)上也是我們通過鼠標(biāo)在桌面上滑動(dòng)x-y區(qū)域?qū)?yīng)到電腦桌面上指針的移動(dòng)來創(chuàng)造屏幕中x-y的映射關(guān)系，然后鍵盤上幾十個(gè)鍵配合輸入完成操作。


大家發(fā)現(xiàn)了么，上述的兩種設(shè)備其實(shí)本身就是在制造一種一一對應(yīng)的映射關(guān)系去完成交互行為，這兩種載體從出身開始就還是需要很大交互成本的。

隨著科技的發(fā)展，觸屏感應(yīng)技術(shù)推出了之后，印象中觸屏手機(jī)就是兩三年時(shí)間就摧枯拉朽的淘汰了按鍵手機(jī)，本質(zhì)上是干掉了一一對應(yīng)的交互映射，所按即所得：

觸屏手機(jī)出現(xiàn)之后，交互專家們不禁要問一個(gè)問題了：

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

答案是有很多種：

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


我們以“單擊”和“滑動(dòng)”這兩個(gè)最簡單的交互行為舉例。

所謂單擊手機(jī)屏幕，用戶其實(shí)最核心的是有兩個(gè)預(yù)期：

第一是選中一個(gè)元素，比如Radio組件。第二是邏輯上的Next，比如點(diǎn)了一件衣服，應(yīng)該Next到衣服的詳情；點(diǎn)了付款，應(yīng)該出現(xiàn)付款流程，點(diǎn)了返回，應(yīng)該back到上一路徑點(diǎn)等等。


劃動(dòng)交互也是一樣的，用戶在一塊手機(jī)屏幕上單指劃劃劃，用戶內(nèi)心的預(yù)期其實(shí)也不復(fù)雜，最核心的預(yù)期也就兩點(diǎn)：

第一是查看屏幕外的線索（前提是設(shè)計(jì)師給用戶留下線索了或者是這個(gè)UI組件長得就是可以劃動(dòng)的樣子）第二是查看相鄰標(biāo)簽的內(nèi)容，或者查看同一個(gè)標(biāo)簽下的相鄰元素，比如iOS的segment controlle組件就是典型例子：


當(dāng)我們了解了這些之后，我們在實(shí)際的設(shè)計(jì)工作中就可以根據(jù)上面這些理論來合理選擇UI組件去呈現(xiàn)對應(yīng)的信息了。




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

我們在設(shè)計(jì)工作中，選擇UI組件，本質(zhì)上就是選擇信息的呈現(xiàn)形式。

每一個(gè)常見的UI界面和UI組件，都一定也滿足上面所說的最小交互模型：



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

第一個(gè)例子：同樣的內(nèi)容，選擇不同的UI組件呈現(xiàn)，給用戶呈現(xiàn)的是完全不同的產(chǎn)品結(jié)構(gòu)：

大家看下面這張圖：


這兩個(gè)UI模塊擺在大家面前，大家應(yīng)該能清晰的感受到，左邊是一個(gè)segment控制下面內(nèi)容的UI；而右邊是一個(gè)所有內(nèi)容列表的集合頁，只不過通過tab聚類了而已。

第一件事應(yīng)該想到的是如果需要采用右邊的排列形式就必須要控制tag的字?jǐn)?shù)；然后由于右邊的tag占據(jù)了推薦貼的位置，導(dǎo)致推薦貼可能沒有左邊的那種展現(xiàn)形式更加醒目。但是相對的，圖右的優(yōu)勢在于，由于豎向排列tag可以讓一個(gè)屏幕顯示更多的tag，可以讓用戶更方便的定位內(nèi)容，比如外賣產(chǎn)品之所以用右邊這種形式是因?yàn)榱η笠黄琳故靖嗟牟耍彝赓u產(chǎn)品的左側(cè)tag一般是一家店鋪的菜的品類，用戶下滑菜品配合點(diǎn)擊品類，點(diǎn)完即走，很方便（京東和淘寶電商類平臺(tái)也是類似的）。

但是比如今日頭條，新聞?lì)惪蛻舳酥荒懿捎米筮叺倪@種形式，因?yàn)樾侣勵(lì)惪蛻舳耸切枰脩糸L時(shí)間沉浸的，比如用戶選中一個(gè)“體育”的tag之后一般要沉浸的看好久好久，用戶需要沉浸在這個(gè)tag下的內(nèi)容中，那這個(gè)時(shí)候顯然用右邊這種設(shè)計(jì)方式讓tag常駐屏幕左側(cè)是不合適的。


再來看第二個(gè)例子，就是UI應(yīng)該會(huì)隨著內(nèi)容而進(jìn)行調(diào)整和優(yōu)化：


這里舉一個(gè)唱吧的例子，唱吧從7.0到8.6之間做了三次改版，大家可以看到，唱吧團(tuán)隊(duì)幾乎是損失了屏幕效率來加大了間隔和突出了歌名，這是為什么呢？

這是因?yàn)轫撁娉休d的關(guān)鍵任務(wù)不同，大家對比著7.0時(shí)候和8.6時(shí)候的UI樣式，正好是今天快手和唱吧的對比：

大家會(huì)發(fā)現(xiàn)，其實(shí)這個(gè)頁面，快手和唱吧承載的內(nèi)容都是消費(fèi)轉(zhuǎn)化，都希望用戶點(diǎn)擊進(jìn)去消費(fèi)內(nèi)容，但是兩款產(chǎn)品做了截然不同的UI風(fēng)格，原因是什么呢？

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

所以基于這種跟深層次的邏輯，唱吧和快手兩款產(chǎn)品的這個(gè)頁面都是為了促進(jìn)消費(fèi)轉(zhuǎn)化，但是UI長相上完全不同。


我們看第三個(gè)例子：


同樣組件下，選擇不同的交互方式，也會(huì)使得效果完全不同，比如現(xiàn)在有一個(gè)UI頁面，主要由一個(gè)tab（iOS叫segment controlled）組件控制下面的內(nèi)容，樣子張這樣：


我先假定一個(gè)前提：這個(gè)app中的這個(gè)組件不支持橫劃，只支持點(diǎn)擊切換。

好了，現(xiàn)在我假設(shè)這是一款已經(jīng)穩(wěn)定運(yùn)營了一年的產(chǎn)品，為了說明問題，我假設(shè)一個(gè)理想數(shù)據(jù)：

假設(shè)每天有20W的uv訪問這個(gè)頁面，其中分流情況是：

10Wuv消費(fèi)“推薦”下的內(nèi)容

2Wuv消費(fèi)“生活”下的內(nèi)容

1Wuv消費(fèi)“段子”下的內(nèi)容

3Wuv消費(fèi)“美女”下的內(nèi)容

4Wuv消費(fèi)“游戲”下的內(nèi)容


這時(shí)候，為了優(yōu)化交互行為，有一天決定把這個(gè)tab組件從不可橫向劃動(dòng)改成可以劃動(dòng)的（并且告訴用戶這里可以滑動(dòng)了喲~），然后給你一次機(jī)會(huì)重新排列這五個(gè)tab順序，你會(huì)怎么做呢？最簡單的辦法當(dāng)然是把五個(gè)tab按照用戶消費(fèi)意愿逐一排列，即：“推薦、游戲、美女、生活、段子”。

這樣排列當(dāng)然沒有任何問題，但是還有沒有更優(yōu)解呢？我給出的解決辦法是這樣的，大家評判一下：

按照用戶的消費(fèi)量，“游戲”是消費(fèi)量第二的一個(gè)tab，毫無疑問我會(huì)把它排在第二項(xiàng)，這樣可以刺激用戶劃動(dòng)行為，然后“美女”是消費(fèi)量第三的，我會(huì)把他放在第四位，這時(shí)候我會(huì)把“段子”和“生活”這兩個(gè)消費(fèi)率最低的tab分AB test做兩個(gè)版本放在第三和第五位拿去測，以判斷之前的“段子”和“生活”是由于自身內(nèi)容不夠優(yōu)質(zhì)，還是之前交互成本太低導(dǎo)致的數(shù)據(jù)較差：



最后我們來看第四個(gè)例子：


比如一個(gè)app，他的UI張如下圖所示的這個(gè)樣子


現(xiàn)在假設(shè)在運(yùn)營和市場團(tuán)隊(duì)不做任何努力的情況下，單從產(chǎn)品交互的角度，能不能優(yōu)化上面這個(gè)版塊的點(diǎn)擊率？

首先我們來分析一下頁面架構(gòu)：

如果我們認(rèn)為，不管是點(diǎn)擊右上角的“>”，還是點(diǎn)擊留個(gè)圓形入口都算完成轉(zhuǎn)化的話，我們現(xiàn)在的這個(gè)紅色的UI組件，入口位置一共有7個(gè)。根據(jù)長尾理論，如果我們把這個(gè)圓形入口從6個(gè)擴(kuò)展到比如九個(gè)，是不是一定對轉(zhuǎn)化率有正向影響？答案并不一定：

為什么呢？因?yàn)橹饕沁@樣的改動(dòng)會(huì)帶來一個(gè)未知的泳道橫劃交互，它會(huì)產(chǎn)生一定的影響，如下圖所示：

用戶看到這個(gè)泳道之后可能出現(xiàn)三種行為：

a.“用戶完全不滑動(dòng)”——那入口就從7個(gè)變成了7.5個(gè)，別的沒有變量影響。

b.“用戶滑動(dòng)看完了之后，點(diǎn)擊某一個(gè)或者左上角的“>”進(jìn)入”——這是我們想要的轉(zhuǎn)化

c.“用戶滑動(dòng)看了這些圓形入口之后松手，就是不點(diǎn)擊進(jìn)去”——這是我們不愿意看到的結(jié)果

想到這里，那為什么我們不能讓用戶直接滑動(dòng)之后松手就跳轉(zhuǎn)呢？


想到這里，所以優(yōu)化方案如下圖所示，給與用戶一個(gè)x軸區(qū)間，滑動(dòng)手勢操過那個(gè)區(qū)間則告訴用戶你現(xiàn)在松手默認(rèn)跳轉(zhuǎn)，用戶不愿意跳轉(zhuǎn)也可以回劃，只要不足這個(gè)x區(qū)間就給與用戶自主選擇的機(jī)會(huì)：


我之前在上家工作的時(shí)候，我們把6個(gè)圓形入口變成了10個(gè)，然后用這個(gè)“松手跳轉(zhuǎn)”的交互把單元模塊的穿透率從21%提升到了31%，這是一個(gè)實(shí)戰(zhàn)當(dāng)中的真實(shí)例子。


當(dāng)然了，請大家再思考這樣的一個(gè)問題：


一個(gè)頁面的流量就這么大，一個(gè)地方漲了11%，那勢必別的地方就會(huì)相應(yīng)的損失11%。一般情況下app首頁承擔(dān)著80%以上的分流工作，根據(jù)流量漏斗來看的話每一次引流都會(huì)導(dǎo)致其他模塊的數(shù)據(jù)下降，所以設(shè)計(jì)師們應(yīng)該要根據(jù)運(yùn)營策略和公司大的產(chǎn)品OKR來合理選用合適的交互組件，以達(dá)到想要的目的，還是那句話：“小孩兒才分對錯(cuò)，大人只看利弊。”




Part - III 從交互的維度量化用戶體驗(yàn)

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，尤其是在中國的app產(chǎn)品，有兩大分歧陣營：

“扁平”陣營表示了，我們需要產(chǎn)品足夠扁平，最好就是三次交互可以觸達(dá)所有app界面：

“簡潔”陣營也表示了，我們需要頁面信息足夠簡潔，最好一個(gè)頁面只完成一個(gè)核心任務(wù)：



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


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


我們大家都是互聯(lián)網(wǎng)從業(yè)者，不管看到這篇文章的你是一位設(shè)計(jì)、產(chǎn)品、還是開發(fā)、測試、運(yùn)營人員，我們都明白用戶體驗(yàn)這個(gè)詞是由N多維度綜合而成的一個(gè)過程性評價(jià)，它和方方面面都有關(guān)系。



那既然是這么專業(yè)且牽連甚廣的一個(gè)名詞，我們真的就沒有辦法去量化評價(jià)它了嗎？

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


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


淘寶消息頁上面有“交易物流”、“通知”、“互動(dòng)”三個(gè)tab，這時(shí)候我們假設(shè)一個(gè)用戶三個(gè)按鈕下面都有消息，用戶想要看完這三個(gè)消息大概需要幾次交互？答案是至少6次：“點(diǎn)擊第一個(gè)進(jìn)去 - 返回 - 點(diǎn)擊第二個(gè)進(jìn)去 - 返回 - 點(diǎn)擊第三個(gè)進(jìn)去 - 返回”，這樣的交互顯得呆板且冗長，淘寶團(tuán)隊(duì)巧妙的把三個(gè)內(nèi)頁集合成一個(gè)頁面的三個(gè)tab形式，大大縮短的交互成本，這就是所謂的“把用戶路徑變得更扁平”：


大家在使用很多產(chǎn)品的過程中，多多留心就會(huì)發(fā)現(xiàn)原來細(xì)節(jié)里面總有魔鬼。


文章來源：站酷   作者：Seany

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


免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評論(0) 瀏覽(1434)

為什么交互設(shè)計(jì)能幫助產(chǎn)品解決問題

純純

市面上大量出現(xiàn)同質(zhì)化產(chǎn)品、設(shè)計(jì)，就是因?yàn)榇蠹叶荚诎凑宅F(xiàn)有的，常用的模版在設(shè)計(jì)，現(xiàn)在其實(shí)比早兩年會(huì)好很多，很多設(shè)計(jì)師已經(jīng)開始從美化工作逐漸深挖到區(qū)分甚至自我驅(qū)動(dòng)或者價(jià)值探尋的工作。


例如下面的案例，這是一個(gè)電瓶車電池租賃的一個(gè)產(chǎn)品。



undefined



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


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





交互不僅僅能夠讓產(chǎn)品好用的，也要讓產(chǎn)品走對方向。


另外，UI也是交互的一部分，屬于看的懂。好用可以分為看得懂，學(xué)的快，用的會(huì)，交互體現(xiàn)在人們?nèi)粘Ｋ佑|到的大部分媒介，并且與之產(chǎn)生聯(lián)系。例如一把水壺，水壺的設(shè)計(jì)形式首先通過視覺讓你感知這是一個(gè)水壺，如果把水壺的外形做成一個(gè)馬桶，你覺得它還是一個(gè)水壺嗎，這叫看的懂。學(xué)的快指的是當(dāng)我看懂了之后我馬上就可以對這個(gè)產(chǎn)品進(jìn)行基礎(chǔ)操作，例如裝水、倒水。而用的會(huì)就是這個(gè)水壺更多的附加功能，例如燒水、定時(shí)、調(diào)溫等等。



1.交互設(shè)計(jì)中媒介與人的關(guān)系


1.1順應(yīng)


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


所以在當(dāng)時(shí)人們?yōu)榱诉m應(yīng)非常有限的工具資源，改變了自然的操作方式。但現(xiàn)代社會(huì)如果說你的產(chǎn)品不為用戶的使用和場景去考慮，那基本也就涼涼了。


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



1.2遷移


平臺(tái)遷移的交互成本，很多同學(xué)可能都玩過moba類游戲-dota，這是一款在電腦端戰(zhàn)術(shù)競技類游戲。在dota中我們經(jīng)常使用的交互形式主要分為鍵盤和鼠標(biāo)的控制，鍵盤用來控制技能的釋放和其他快捷物品的使用，都是通過按按鍵的形式進(jìn)行釋放。通過鼠標(biāo)右鍵來控制人物的移動(dòng)和左鍵選擇技能和物品釋放的目標(biāo)，這是端游中基本的交互行為與操作。





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







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


另外，大家如果做b端的同學(xué)應(yīng)該也深有感觸，平臺(tái)遷移的成本非常高。想要把集成非常復(fù)雜的業(yè)務(wù)后臺(tái)切換到移動(dòng)端是一件很麻煩的事，因?yàn)樵诰W(wǎng)頁端我們有大量的空間和更自由的控件形式去承載信息，比如聯(lián)動(dòng)的左側(cè)標(biāo)簽導(dǎo)航和頂部聯(lián)動(dòng)的標(biāo)簽導(dǎo)航，在增刪改查的操作中顯得清晰高效。但是到移動(dòng)端上雖然可以到做聯(lián)動(dòng)導(dǎo)航，但是頁面顯示實(shí)在有限，很多的信息完全無法在一個(gè)界面中呈現(xiàn)，所以要么將頁面進(jìn)行左右滑動(dòng)，要么拆分進(jìn)行多步操作。但本身擁有復(fù)雜業(yè)務(wù)功能的后臺(tái)系統(tǒng)就不適宜遷移到移動(dòng)端上。


web端的工具和網(wǎng)頁通常都會(huì)有撤銷操作，按CMD（ctrl）+Z大部分都可進(jìn)行撤銷上一步操作，但是在移動(dòng)端我們無法通過特定、或者統(tǒng)一的手勢進(jìn)行撤銷，所以很多時(shí)候在表單輸入的時(shí)候會(huì)有一鍵刪除圖標(biāo)，卻無法進(jìn)行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后，刪除按鈕變?yōu)槌蜂N按鈕，有待考量。



2.交互認(rèn)知的盲區(qū)


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


中國歷史文字的演變，它并不是一個(gè)模仿的過程，而是一個(gè)從底層對文化、自由、精神、環(huán)境、人的深刻理解而發(fā)生的一種進(jìn)化過程。但現(xiàn)在其實(shí)很多的交互形式都是來源于一些大流量產(chǎn)品的模仿，更多的是擔(dān)心用戶成本過高而妥協(xié)為滿足用戶預(yù)期。



2.1信息不對稱


事實(shí)上，為什么我們講不清楚什么是交互設(shè)計(jì)，其實(shí)UI設(shè)計(jì)也一樣，她絕不可能單純的指代用工具繪制出用戶界面，其實(shí)是因?yàn)樾畔⒉粚Τ伞⒃~不達(dá)意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語


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


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


同樣的，在設(shè)計(jì)領(lǐng)域，很多設(shè)計(jì)師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲，還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞，這個(gè)詞聽起來比較抽象，讓聽者都有點(diǎn)不太好意思追問什么是呼吸感，其實(shí)你問了，說者也不知道怎么描述?？赡苷f者覺得現(xiàn)在信息太密集讓人無法呼吸，但設(shè)計(jì)者覺得現(xiàn)在剛好，所以本身就沒有一個(gè)標(biāo)準(zhǔn)，更多的就是主觀的感受，讓你不得不接受這個(gè)建議的原因是因?yàn)閮烧叩纳矸荨?/strong>


我們用我們能夠講述的語言去描繪我們不懂的事物，再例如設(shè)計(jì)師和開發(fā)還原只會(huì)說往左移動(dòng)10px，而不會(huì)說給這個(gè)view加上padding left 10px。還有你和開發(fā)為什么溝通起來那么累就是因?yàn)槟銈z完全無法站在對方的角度對這件事達(dá)成共識，設(shè)計(jì)師通常喜歡描述從左到右或者從上到下，但是在開發(fā)的語音認(rèn)知理，他需要知道的是空間坐標(biāo)，并且具體的移動(dòng)單位。所以為什么我們那么鼓勵(lì)廣大設(shè)計(jì)師去學(xué)習(xí)一些開發(fā)知識，開發(fā)也盡可能的去補(bǔ)充設(shè)計(jì)背景。


在這里，交互設(shè)計(jì)師產(chǎn)出的交互說明文檔就是能夠幫助設(shè)計(jì)師與開發(fā)有一個(gè)更好的溝通，所以能力較強(qiáng)的交互設(shè)計(jì)或者視覺設(shè)計(jì)都能夠把自己想表達(dá)的信息表達(dá)的很清楚。


再舉個(gè)例子，不知道大家有沒有編輯過問卷或者做過用戶訪談，很多時(shí)候是不是覺得收集到的信息無效、無用，其實(shí)很多的原因是因?yàn)槲覀兒陀脩魧τ谶@些問題壓根不在一個(gè)頻道，比如：你的問卷問的是，您喝酒的頻率是多少，選項(xiàng)有：從不、偶爾、經(jīng)常，在用戶的眼里偶爾可能是1年喝一次，而我們覺得差不多1個(gè)月喝一次算偶爾，再比如訪談的時(shí)候問用戶這個(gè)問題：您覺得您喜歡下面哪個(gè)頁面的風(fēng)格？用戶：“什么是風(fēng)格？”


所以交互設(shè)計(jì)師有一個(gè)能力久顯得很重要了：讓萬物都可與之對話的能力，對話需要什么，是語言。




3.交互語言的淺見


我們都知道，語言是我們溝通的根本，語言是由詞匯按照一定的語法結(jié)構(gòu)在不同的語境中所組成的復(fù)雜系統(tǒng)。不同的種族有不同的語言，不同的專業(yè)有不同的語言例如在圍棋中有長、立、并、空、頂?shù)鹊?，例如在模型手辦中有分線、滲線、勾線、補(bǔ)土等，這也都是在特頂專業(yè)領(lǐng)域中的一些術(shù)語，但這些并不是語言，只是在某個(gè)領(lǐng)域中大家總結(jié)出來便于溝通的文字符號。


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


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


語言很重要的一點(diǎn)它具有語境，語言的運(yùn)用包含了看聽讀寫4個(gè)方面，看和聽指的是輸入，讀和寫指的是輸出，那么交互設(shè)計(jì)語言中，也包含輸入和輸出兩種屬性，例如輸入指的是由不同“詞匯”組成的“句子”，比如由標(biāo)題、箭頭、色塊組成的一個(gè)itme，是一個(gè)可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發(fā)并且進(jìn)行狀態(tài)的變化和所進(jìn)行的任務(wù)跳轉(zhuǎn)。



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




還有，在漢語中“去買兩個(gè)桃子吧”，這里的“兩”肯能是虛數(shù)也可能是實(shí)數(shù)，但是在交互設(shè)計(jì)中，我們?nèi)绾伪硎军c(diǎn)擊1下和兩下或者是多次呢，一般單擊的屬性通?？梢杂幸恍┨匦缘姆枌傩运硎境鰜恚缂酉聞澗€的文字、一個(gè)帶箭頭的item、一個(gè)圖標(biāo)、一個(gè)帶有主色的文案等等，那么雙擊的話可以用雙箭頭來表示嗎，當(dāng)然不可以，雙擊在移動(dòng)端的手勢中具有放大、點(diǎn)贊、返回頂部、定位消息、定位光標(biāo)等功能。






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



4.業(yè)務(wù)背景與交互形態(tài)


4.1不同業(yè)務(wù)背景下的信息組織


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





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


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





4.2營銷工具化


通過交互手段我們也可以給運(yùn)營工具更加靈活化打基礎(chǔ)。例如我們經(jīng)?？吹降臓I銷瓷片可以劃分為非常多樣式與可能性，并且在后臺(tái)工具中靈活控制，同時(shí)除了日常的營銷目的之外，在大促或者活動(dòng)需求下更可以將整一個(gè)首屏切換為極具氛圍的信息呈現(xiàn)。


4.2.1更加靈活的控制方式




4.2.2多樣的營銷結(jié)構(gòu)



最后總結(jié)一下，我認(rèn)為交互設(shè)計(jì)也包含了視覺，所以我們在決定用什么樣的設(shè)計(jì)形式之前需要考慮更多，入業(yè)務(wù)、用戶價(jià)值等等，從而用更加有價(jià)值的交互策略提出問題、解決問題會(huì)比單純的用規(guī)范去搭建界面更加有效。






二、為什么UI配色那么難


不管是做UI設(shè)計(jì)還是畫插畫，有很多同學(xué)覺得自己是因?yàn)樘熨x不夠所以對色彩的敏感度不夠，其實(shí)不然。一個(gè)可能是大家總結(jié)的太少，從來都是憑感覺和運(yùn)氣去配色，但其實(shí)都是有講究的。本文不會(huì)給大家重復(fù)講解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認(rèn)識色彩，并且在產(chǎn)品設(shè)計(jì)中使用的。



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


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


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





大家在平時(shí)生活中都能看到，在馬路上、機(jī)動(dòng)車道上以及一些警示牌都會(huì)采用黃色、橙色等標(biāo)識，因?yàn)檫@些非常醒目。更容易被紅視錐細(xì)胞感知到，但如果你的標(biāo)識用的是冷色調(diào)那這個(gè)交通事故可能要發(fā)生的頻繁的多。



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


我們來做個(gè)實(shí)驗(yàn)，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學(xué)看上去都會(huì)覺得是個(gè)漸變色，但其實(shí)它就是一個(gè)純色，不信的同學(xué)可以自己在工具中嘗試一下。




但如果你把這個(gè)色塊拿出來后，不在這個(gè)環(huán)境中直接進(jìn)行邊緣對比，那就不會(huì)出現(xiàn)漸變的情況了。那光說原理，我們也來看一下在產(chǎn)品設(shè)計(jì)中需要注意的地方，因?yàn)樵赨I界面設(shè)計(jì)中我們通常需要把一些圖片、卡片疊加放置，這樣就會(huì)造成邊緣視覺的對比，本來不明顯的兩個(gè)元素重疊之后變的很明顯。所以例如一些標(biāo)簽的背景色和頁面整體的背景色。





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





還有，為什么被框起來的文字會(huì)看上去更加有點(diǎn)擊的欲望其實(shí)也是這個(gè)道理，因?yàn)槲淖趾捅尘隘B加產(chǎn)生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號，當(dāng)它被賦予顏色之后我們才會(huì)意識到它需要我們?nèi)プ⒁饣蛘呖杀稽c(diǎn)擊，但依然還是不夠明顯，所以為了強(qiáng)化可點(diǎn)擊這個(gè)感覺，我們才用了線框、背景色、箭頭等方式。





2.色彩在UI設(shè)計(jì)中的作用


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


一般來說，產(chǎn)品都會(huì)有一個(gè)品牌的主色。而這個(gè)品牌的主色也通常會(huì)運(yùn)用在外面的產(chǎn)品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非?；顫姟⒂腥?、好玩的特性，無論是線上還是線下都使用了這個(gè)品牌黃色，從每一個(gè)線上元素的主色，到線下包裝的印刷色。


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





而且線上覺得還OK的顏色，由于印刷的原理，實(shí)物也會(huì)更加偏低飽和和偏暗。



2.引導(dǎo)用戶視覺凹增加易讀性


我們在上一篇十萬個(gè)為什么文章里提到了人們?nèi)绾伍喿x信息，提到了一個(gè)視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會(huì)需要使用顏色的地方在于希望引導(dǎo)用戶和吸引用戶注意的地方才會(huì)使用色彩。例如下方產(chǎn)品，使用了高亮色來引導(dǎo)用戶視覺。







當(dāng)然色彩的運(yùn)用也會(huì)講整個(gè)頁面的層級凸顯出來，而不單純的用中性色來區(qū)分層級。


3.區(qū)分信息交互的狀態(tài)


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


所以不是所有的元素都要賦予顏色，這樣會(huì)使整個(gè)頁面非?；靵y





另外，UI設(shè)計(jì)中主色除了引導(dǎo)用戶的作用外，也可以表示當(dāng)前正被激活的信息狀態(tài)。例如愛奇藝app中播放詳情頁面，當(dāng)前板塊標(biāo)簽和正在播放劇集的激活狀態(tài)。





4.營造氛圍傳遞熱度


色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營造中也起了很大的作用，目前很多2c的產(chǎn)品往往會(huì)在界面氛圍的營造中運(yùn)用一些手段。例如導(dǎo)航欄、底部標(biāo)簽欄上的圖標(biāo)，或者在首頁營銷板塊的瓷片區(qū)域都會(huì)用品牌色在活動(dòng)時(shí)段內(nèi)進(jìn)行氛圍打造





3.在UI設(shè)計(jì)中色彩運(yùn)用的坑與技巧


1.色彩的正反兩面

在色彩的心理學(xué)上，大家都知道每個(gè)顏色具有一定的性格特征和表達(dá)。而且都會(huì)有正反兩面，可以看下方多種色彩的描述。





然而其實(shí)很多的產(chǎn)品使用的色彩和我們所認(rèn)知的會(huì)有一些差別，比如咖啡品牌的主色選擇，在我們常規(guī)人之中，咖啡應(yīng)該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實(shí)都用了和咖啡本質(zhì)沒什么關(guān)系的顏色





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





2.顏色的禁忌用法

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


1.高飽和度的色彩

會(huì)讓人產(chǎn)生“幻覺”！讓人產(chǎn)生視覺疲勞，例如我將餓了么這個(gè)界面的色調(diào)調(diào)整一下大家看一下，不亮瞎算我輸。




2.灰部使用過多的配色

為什么很多時(shí)候我們總覺得界面臟兮兮的。是因?yàn)槲覀冊诮缑婊蛘吲渖惺褂昧诉^多的低飽和度、灰度較多的配色。所以這個(gè)也是要避免的




3.沒有規(guī)律且過多的配色

讓界面或者插畫看起來非?；靵y。一般來說顏色的使用也需要有側(cè)重點(diǎn)，所以我們常用的方法是6、3、1的色彩配比。





4.熒光色

熒光色絕對不可以使用在UI界面中，尤其是主色。會(huì)讓你瞬間失明！





5.太輕柔的顏色

在很多dribbble的飛機(jī)稿中，經(jīng)常能看到這樣的配色和練習(xí)。無論是在練習(xí)中還是實(shí)際項(xiàng)目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點(diǎn)且輕飄飄的感覺。





6.現(xiàn)在很火的新擬物化設(shè)計(jì)

說真的，這樣的風(fēng)格確實(shí)耳目一新，但個(gè)人覺得可能不會(huì)成為主流。因?yàn)樗秃偷谖宸N一樣：信息可識別性很差。就不說色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結(jié)合感覺就是得了“白內(nèi)障”。另外我們常說的一點(diǎn)就是所有元素都強(qiáng)調(diào)就等于什么都沒有強(qiáng)調(diào)，這樣的風(fēng)格在每一個(gè)元素都具有陰影的情況下都在爭先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點(diǎn)自相矛盾的感覺。


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




7.不要將對抗色重疊

例如下方，兩種對抗色重疊后會(huì)引起視覺閃爍的感覺。是不是覺得我有點(diǎn)帥的晃眼





4.正確的UI配色方法


定義主色


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

 




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






定義中性色


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







文章來源：站酷 作者：應(yīng)駿



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


免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評論(0) 瀏覽(1551)

用戶體驗(yàn)度量模型

周周

本文介紹了幾個(gè)關(guān)于用戶體驗(yàn)度量的模型，UES模型、適合網(wǎng)站的 PLUSE、谷歌的 HEART、螞蟻的 PTECH和GSM模型，它們各有切入點(diǎn)，也各有其適應(yīng)場景。對各個(gè)模型的概念和它們相應(yīng)的維度做了詳細(xì)的介紹。

評論(0) 瀏覽(7078)

延遲增強(qiáng)——視頻信息流廣告的提轉(zhuǎn)秘訣

ui設(shè)計(jì)分享達(dá)人

伴隨短視頻平臺(tái)的崛起，移動(dòng)互聯(lián)網(wǎng)的主流內(nèi)容消費(fèi)形態(tài)向短視頻視聽語言轉(zhuǎn)變，視頻信息流廣告的時(shí)代已經(jīng)來臨。如何通過設(shè)計(jì)提升轉(zhuǎn)化，是視頻信息流廣告所面臨的挑戰(zhàn)。


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


///

延遲增強(qiáng)是什么？


視頻信息流廣告有三要素：內(nèi)容、框架、轉(zhuǎn)化組件。其中廣告內(nèi)容來源于廣告主投放的物料，基礎(chǔ)框架需對齊宿主保持一致性，所以僅有承載轉(zhuǎn)化信息和行為的轉(zhuǎn)化組件，是可設(shè)計(jì)部分。 


而“延遲增強(qiáng)”就是針對“轉(zhuǎn)化組件”的一種伴隨視頻內(nèi)容分階段/漸進(jìn)式的呈現(xiàn)方式。它由消費(fèi)者決策時(shí)的理想心理動(dòng)線，結(jié)合廣告行為推導(dǎo)得出，并經(jīng)過實(shí)驗(yàn)驗(yàn)證了其對于轉(zhuǎn)化提升的有效性。


“延遲增強(qiáng)”包括兩個(gè)階段：1.廣告展現(xiàn)初始階段，延遲展現(xiàn)廣告意圖，通過內(nèi)容吸引潛在用戶；2.廣告內(nèi)容逐步呈現(xiàn)階段，轉(zhuǎn)化組件漸進(jìn)式增強(qiáng)，輔以增益信息，不斷強(qiáng)化，引導(dǎo)轉(zhuǎn)化行為。


它指導(dǎo)了轉(zhuǎn)化組件從“呈現(xiàn)”到“增強(qiáng)”的全流程，從時(shí)機(jī)（出現(xiàn)&增強(qiáng)時(shí)機(jī)）/引導(dǎo)（動(dòng)效&互動(dòng)引導(dǎo)）/前置（信息&轉(zhuǎn)化前置）三個(gè)部分，幫助提升廣告轉(zhuǎn)化效果。



///

時(shí)機(jī)-延遲增強(qiáng)如何呈現(xiàn)？


轉(zhuǎn)化組件的呈現(xiàn)時(shí)機(jī)包含“何時(shí)展現(xiàn)”與“何時(shí)增強(qiáng)”兩個(gè)部分，前者幫助增加廣告接收率，后者提升廣告轉(zhuǎn)化率。


01/ 出現(xiàn)時(shí)機(jī)：

延遲展現(xiàn)廣告意圖，可以提升廣告賣點(diǎn)的展現(xiàn)機(jī)率


互聯(lián)網(wǎng)的快速發(fā)展使得受眾被動(dòng)卷入爆炸式增長的資訊信息體中，廣告借助這一媒介迅速發(fā)展，但也因?yàn)椴糠稚虡I(yè)廣告的過度宣傳與其降低用戶信息獲取便捷性的本質(zhì)，不可避免的使受眾產(chǎn)生了心理上的逆反與抵觸情緒，從源頭拒絕了廣告信息。

 

所以對廣告來說，在廣告展現(xiàn)初始，延遲展現(xiàn)廣告意圖，融入內(nèi)容，可以緩解受眾的抵觸情緒，提升廣告賣點(diǎn)的展現(xiàn)機(jī)率。



02/ 增強(qiáng)時(shí)機(jī)：

通過用戶行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī)，可以有效提升轉(zhuǎn)化


對廣告來說，搭配廣告內(nèi)容進(jìn)行增強(qiáng)，通過內(nèi)容積累購買欲/信任感，然后通過階段性的增強(qiáng)來提示操作，對比一成不變能起到更好的轉(zhuǎn)化效果。


我們首先嘗試了程序化的增強(qiáng)時(shí)機(jī)，在不增加技術(shù)成本的前提下，根據(jù)歷史經(jīng)驗(yàn)，面向不同的廣告均采用固定時(shí)段的階段性增強(qiáng)。


但不同的廣告物料內(nèi)容不同，不同的用戶偏好也不同，固定的增強(qiáng)時(shí)機(jī)并不能很好的滿足所有廣告需求。所以在技術(shù)能力可以承載的時(shí)候，我們采用了動(dòng)態(tài)時(shí)機(jī)策略，通過用戶行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī)，在程序化增強(qiáng)時(shí)機(jī)之后，再次實(shí)現(xiàn)了轉(zhuǎn)化提升。


undefined


///

引導(dǎo)-延遲增強(qiáng)如何引導(dǎo)轉(zhuǎn)化行為？


轉(zhuǎn)化組件如何引導(dǎo)轉(zhuǎn)化，則可分為基礎(chǔ)的視覺引導(dǎo)與進(jìn)階的互動(dòng)引導(dǎo)，前者幫助搶奪視覺注意力，后者則能夠在互動(dòng)體驗(yàn)中植入部分幫助決策的“小心思”。

 

01/ 視覺引導(dǎo)：

適當(dāng)增加視覺吸引點(diǎn)，可以有效引導(dǎo)點(diǎn)擊

 

延遲增強(qiáng)需要通過階段性的增強(qiáng)來提示操作，而如何增強(qiáng)能有效吸引注意則需要琢磨，已有實(shí)驗(yàn)表明轉(zhuǎn)化按鈕增加掃光動(dòng)效與智能取色，能有效吸引注意，引導(dǎo)點(diǎn)擊，對轉(zhuǎn)化提升有良好效果。



02/ 互動(dòng)引導(dǎo)：

讓用戶主動(dòng)選擇，可以增加廣告曝光，輔助轉(zhuǎn)化決策

 

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)對于用戶交互體驗(yàn)的追求越發(fā)極致，如影視行業(yè)走向可交互網(wǎng)劇，本質(zhì)上是從用戶接收轉(zhuǎn)變?yōu)橛脩糁鲃?dòng)參與，用戶本身對于獲得優(yōu)質(zhì)體驗(yàn)的意識逐漸覺醒。商業(yè)化產(chǎn)品也需要緊跟“體驗(yàn)”與“互動(dòng)”，將廣告變?yōu)榛?dòng)體驗(yàn)或具備使用價(jià)值的信息，讓用戶從被動(dòng)瀏覽到主動(dòng)參與，掌握對廣告的選擇權(quán)。

 

以互動(dòng)投票為例，我們通過用戶與用戶之間的觀點(diǎn)表達(dá)，以投票選擇的形式誘發(fā)群體性選擇，引起好奇心與同儕壓力。

 

若用戶選擇符合群體選擇，則帶來群體性背書，增強(qiáng)信任感；若用戶選擇不符合群體選擇，基于從眾心理，用戶極有可能對群體選擇產(chǎn)生好奇，從而瀏覽兩種選項(xiàng)的內(nèi)容，有效的增加了品牌曝光。


undefined


///

前置-延遲增強(qiáng)如何幫助轉(zhuǎn)化達(dá)成？

 

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


01/ 信息前置：

增加增益信息或前置落地頁信息，可以輔助轉(zhuǎn)化決策


購買/轉(zhuǎn)化一定是需要足夠的信息積累信任感才能達(dá)成的，在前卡適當(dāng)?shù)脑黾淤u點(diǎn)信息能夠更好的幫助用戶決策。針對下載類廣告可增加評分與星級，二電類廣告可以增加價(jià)格信息，甚至可以前置優(yōu)惠劵、圖片banner等信息，均能實(shí)現(xiàn)轉(zhuǎn)化的正向提升。


undefined


02/ 轉(zhuǎn)化前置：

縮短轉(zhuǎn)化路徑，可以幫助轉(zhuǎn)化行為更便捷的達(dá)成


在信任感積累與階段性的增強(qiáng)都達(dá)成的時(shí)候，在當(dāng)前轉(zhuǎn)化對比跳轉(zhuǎn)落地頁再進(jìn)行轉(zhuǎn)化，鏈路更短，用戶流失概率更小。比起實(shí)驗(yàn)嘗試，更像是延遲增強(qiáng)的基礎(chǔ)能力配置。


首先，我們針對表單/咨詢/電話/安卓下載都進(jìn)行了轉(zhuǎn)化前置，具有用戶明確意向的按鈕點(diǎn)擊會(huì)直接在當(dāng)前進(jìn)行反饋。



除了直接將操作前置外，針對不同細(xì)分場景的需求，還可以通過交互形態(tài)的優(yōu)化在感官上縮短路徑。

 

這里以百度的視頻MAX廣告為例，我們針對重落地頁的商家，將MAX首屏（視頻頁）與H5落地頁的關(guān)系變拼接結(jié)構(gòu)為雙層結(jié)構(gòu)，通過浮層面板承載落地頁，延時(shí)自動(dòng)彈出，強(qiáng)引導(dǎo)下方內(nèi)容，激發(fā)用戶上滑瀏覽興趣，解決了落地頁隱藏較深，轉(zhuǎn)化鏈路過長的問題，同時(shí)增加了落地頁曝光從而提升轉(zhuǎn)化。



///
結(jié)語


在視頻信息流領(lǐng)域中，延遲增強(qiáng)仍然可以繼續(xù)深挖，作為“基礎(chǔ)建設(shè)”承載未來更多細(xì)分場景下的互動(dòng)化、個(gè)性化的“精神需求”。

 

同時(shí)延遲增強(qiáng)設(shè)計(jì)方法也可以橫向復(fù)用于廣告前卡、落地頁、IM工具等各種需要在合適時(shí)機(jī)抓取用戶注意的場景中，去追求點(diǎn)擊或者轉(zhuǎn)化的提升。甚至在未來可以嘗試其在長視頻或圖文場景中的應(yīng)用。

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


免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評論(0) 瀏覽(1815)

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

純純

一、為什么動(dòng)？

首先，為什么要?jiǎng)?？可能你?huì)想到以下幾條理由：

  1. 這讓我的作品看起來很炫酷，碉堡了！
  2. 動(dòng)效會(huì)帶來流量，助我完成KPI！
  3. 別人都這么做了，我也得做！
  4. 編輯讓我這么干的！

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

那么該如何衡量一個(gè)動(dòng)效是否應(yīng)該出現(xiàn)呢，我們認(rèn)為有幾個(gè)考核標(biāo)準(zhǔn)：

1. 這個(gè)動(dòng)效是否會(huì)影響性能？

首先，這個(gè)動(dòng)效是否會(huì)影響性能？這個(gè)是最重要的，添加任何動(dòng)效前都要考慮是否會(huì)影響產(chǎn)品的性能，如果一個(gè)很酷炫的動(dòng)效會(huì)拖累性能，使體驗(yàn)變得卡頓不流暢，那么必須毫不猶豫的砍掉或簡化。

例子：化身間諜

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

比如這個(gè)例子，這是一個(gè)穿越情景的過場動(dòng)畫，隨著年份的倒轉(zhuǎn)背景出現(xiàn)各個(gè)歷史大事件，給人以歷歷在目的感覺，設(shè)計(jì)師考慮到了多張圖片會(huì)出現(xiàn)卡頓的可能性，所以特意降低了每張圖的清晰度，因?yàn)閮?nèi)容本身就是老照片的風(fēng)格，所以這種降低畫質(zhì)的手法反而增強(qiáng)了畫面的真實(shí)感。

2. 這個(gè)動(dòng)效是否會(huì)提高產(chǎn)品的可用性？

任何動(dòng)效的出現(xiàn)都必須帶有明確的目的性，能夠解決用戶在使用過程中的困惑，而不是炫技。單純的炫技只會(huì)分散用戶的注意力，弱化內(nèi)容，變得適得其反。

例子：翻頁提示

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

比如這個(gè)上滑提示。不用解釋，用戶一看知道該做什么。動(dòng)效增加了產(chǎn)品的可用性，所以這樣的動(dòng)效是非常有意義的！

3. 這個(gè)動(dòng)效是否會(huì)給你的產(chǎn)品帶來獨(dú)特氣質(zhì)？

這里所說的氣質(zhì)是動(dòng)效本身會(huì)有助于增強(qiáng)用戶對于產(chǎn)品的認(rèn)知和情緒帶入。一個(gè)相得益彰的動(dòng)效會(huì)為你的產(chǎn)品錦上添花，深化你的主題和功能，注意，一定是與主題相關(guān)的，牽強(qiáng)的搭配只會(huì)叫人覺得莫名其妙，毫無意義。

例子：人生四時(shí)

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

再看這個(gè)例子，人生四時(shí)，四根火柴依次燃燒，慢慢燃盡，這種油盡燈枯的感覺很切合的體現(xiàn)了產(chǎn)品生老病死的主題。

4. 重新審視第一條，看你的動(dòng)效是否影響性能

所以，合理的動(dòng)效不應(yīng)是花拳繡腿，而應(yīng)該是解決問題的手段。

二、哪里動(dòng)？

好，我們再看看哪里需要?jiǎng)有?，這里舉幾個(gè)例子：

1. 加載

首先是出現(xiàn)在加載環(huán)境，不管是網(wǎng)頁還是H5都不可避免的會(huì)出現(xiàn)讓用戶等待的情況，在等待的過程中為了讓用戶知道他的手機(jī)沒有死機(jī)以及網(wǎng)絡(luò)是通暢的，我們應(yīng)該在這個(gè)時(shí)候加入一些與主題相關(guān)的動(dòng)效來提醒他內(nèi)容正在加載中。

例子：化身間諜H5 loading

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

這是一個(gè)穿越類的H5，所以設(shè)計(jì)師在設(shè)計(jì)loading的時(shí)候選用了蟲洞的理念，與內(nèi)容本身緊密貼合。

2. 轉(zhuǎn)場

第二個(gè)情景是轉(zhuǎn)場。具有意義的轉(zhuǎn)場會(huì)降低產(chǎn)品割裂感，我們看兩個(gè)例子就明白了。

例子：QQ會(huì)員觀影特權(quán)

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

這個(gè)例子里元素在默認(rèn)狀態(tài)下會(huì)做上下浮動(dòng)的效果，當(dāng)我們滑動(dòng)時(shí)候，元素很自然的做了一個(gè)出場入場的效果。很自然，沒有割裂感。對吧？

3. 頁面元素的互動(dòng)

也可以為網(wǎng)頁元素增加一些必要的動(dòng)效。

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

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

看下好聲音的專題頁面，在網(wǎng)頁上的能夠點(diǎn)擊的按鈕或者文字鏈，在鼠標(biāo)經(jīng)過時(shí)都有點(diǎn)變化，這個(gè)十分必要。因?yàn)楸砻嫔系淖兓瘯?huì)給用戶一種心理暗示，那就是點(diǎn)擊后也會(huì)有變化。

4. 心理需要

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

例子：一封家書

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

一封家書，注意看，背景有飄落的雪花，漫天大雪勾起思鄉(xiāng)情，對吧，合情合理，有情有義！

三、怎么動(dòng)？

好，說完哪里動(dòng)，我們現(xiàn)在看看怎么動(dòng)。

1. 基于真實(shí)形態(tài)的模擬

基于真實(shí)的動(dòng)畫會(huì)叫人看起來自然流暢，符合規(guī)律，比如物體運(yùn)動(dòng)時(shí)的加速度現(xiàn)象。

例子：Look

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

注意看這個(gè)筆畫的動(dòng)勢，是有快有慢的，模擬了寫字時(shí)起筆收筆的那種節(jié)奏感，所以看起來是自然真實(shí)的。

2. 人物動(dòng)作夸張化

在H5的設(shè)計(jì)中，經(jīng)常會(huì)出現(xiàn)各種各樣的人物形象，夸張的人物動(dòng)作會(huì)生動(dòng)你的形象，增加趣味性，給用戶以驚喜。

例子：巴菲特這一年

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

巴菲特老爺爺，動(dòng)作很親切。

3. 給元素賦予彈性

有彈性的物體會(huì)叫用戶覺得具有生命感和真實(shí)性，彈的程度取決于你對元素軟硬度的設(shè)定。

例子：拍個(gè)大頭鬼

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

三個(gè)小鬼一跳一跳，彈性賦予了他們頑強(qiáng)的生命力。

4. 蒙太奇

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

例子：傳奇硬箱

不為動(dòng)而動(dòng)！聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

炫酷了，節(jié)奏很快，提氣！

好，以上只是一些基本的動(dòng)效手法，在實(shí)際的應(yīng)用中其實(shí)有很多手段，在這里我建議大家可以去看看迪士尼和皮克斯的動(dòng)畫，應(yīng)為動(dòng)畫本身是一種對于動(dòng)作行為高度概括的手段。雖然這些都是電影，但是他們使用的手段和遵循的理念是非常值得我們?nèi)W(xué)習(xí)和借鑒的。注意觀察這些大牛們的作品，你會(huì)發(fā)現(xiàn)他們的作品中充滿了走心的細(xì)節(jié)。

四、結(jié)語：

簡單來說，當(dāng)用戶打開一個(gè)界面，注意力首先會(huì)被動(dòng)態(tài)的物體吸引，然后才會(huì)把注意力轉(zhuǎn)向顏色對比強(qiáng)的部分，最后才是形狀。這一過程是人在進(jìn)化過程中形成的本能反應(yīng)，基本適用所有用戶。同時(shí)一個(gè)非常重要且容易被忽略的原則：用戶的注意力是有限的，而且越來越少。很可能在用戶注意到一段動(dòng)效之后，注意力和耐心已經(jīng)用盡，無法看到其他內(nèi)容就著急去下一個(gè)界面了。

所以，對于動(dòng)效這樣一個(gè)非常強(qiáng)勢的工具，一定要用在希望用戶注意的部分，并且認(rèn)真打磨。真正做到“不為動(dòng)而動(dòng)”。



文章來源：優(yōu)設(shè)   作者:程遠(yuǎn)


免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評論(0) 瀏覽(1691)

數(shù)字金融產(chǎn)品的安全感設(shè)計(jì)探究

ui設(shè)計(jì)分享達(dá)人

當(dāng)互聯(lián)網(wǎng)不斷的深入到我們的生活中，我們對安全感的需求也延續(xù)到了互聯(lián)網(wǎng)使用中，特別體現(xiàn)于互聯(lián)網(wǎng)金融產(chǎn)品。由于其具有風(fēng)險(xiǎn)性、收益性、流動(dòng)性等特點(diǎn)，用戶對于資產(chǎn)安全的掌控感更為關(guān)注，產(chǎn)品使用體驗(yàn)欠佳也直接影響客戶安全感。


以下將基于自身工作總結(jié)和行業(yè)經(jīng)驗(yàn)，聚焦互聯(lián)網(wǎng)金融產(chǎn)品分享和總結(jié)如何向用戶營造安全感。


目錄：

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

二、如何傳達(dá)出安全感？

三、怎樣體現(xiàn)出安全感？




需要什么樣的安全感？


安全感是人類最底層的需求，但不同類用戶群體需要的安全感也各有千秋，我們參考第一財(cái)經(jīng)商業(yè)數(shù)據(jù)中心×螞蟻財(cái)富的2019線上理財(cái)人群報(bào)告，將線上理財(cái)?shù)娜巳悍譃樗念悾?

分別是初入職場的95后、職場新興力量的90后、理財(cái)中堅(jiān)力量的80后和經(jīng)歷風(fēng)雨的70后。其中近一年的新增移動(dòng)互聯(lián)網(wǎng)基民中超五層為90后、95后，成為金融移動(dòng)互聯(lián)網(wǎng)的中堅(jiān)力量。


這類型的投資者由于具有碎片化處理事務(wù)的習(xí)慣和金融知識不足、理財(cái)經(jīng)驗(yàn)不豐富、資金的抗風(fēng)險(xiǎn)能力不高的特點(diǎn)，當(dāng)市場普遍行情下跌時(shí)，更容易產(chǎn)生焦慮的情緒而導(dǎo)致“割韭菜”，進(jìn)而可能會(huì)影響到卸載APP的行為。根據(jù)Mob研究院的數(shù)據(jù)顯示，在2021年3月天天基金日均卸載用戶規(guī)模為前兩個(gè)月的6倍，而當(dāng)時(shí)對應(yīng)的市場行情正為基金普遍大跌。

因此從安全感的需求上他們更側(cè)重高效的信息降維、足夠的理財(cái)產(chǎn)品的風(fēng)險(xiǎn)提示、合理的預(yù)期收益宣傳以及投后虧損及時(shí)的內(nèi)容陪伴。


而根據(jù)騰訊理財(cái)通×國家金融與發(fā)展實(shí)驗(yàn)室出品的2021年互聯(lián)網(wǎng)理財(cái)行為與安全研究報(bào)告顯示，理財(cái)知識更充足，理財(cái)經(jīng)驗(yàn)更豐富的80后、70后在安全感的維護(hù)上則更關(guān)注理財(cái)產(chǎn)品的信息披露風(fēng)險(xiǎn)、信息不透明風(fēng)險(xiǎn)、市場政策風(fēng)險(xiǎn)、個(gè)人信息泄露風(fēng)險(xiǎn)此類問題。




如何傳達(dá)出安全感？


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

這三個(gè)層次作為人類大腦的運(yùn)作的規(guī)律，映射到設(shè)計(jì)當(dāng)中，同樣是可供遵循、值得探究的。



本能層

先于意識和思維，它是外觀要素和第一印象形成的基礎(chǔ)，著重于產(chǎn)品的外觀、觸感等?！懊烙^即實(shí)用原則”人們會(huì)潛意識里認(rèn)為好看的東西也是好用的，所以在界面設(shè)計(jì)當(dāng)中，主要設(shè)計(jì)對象是視覺設(shè)計(jì)。


而金融產(chǎn)品中，常用藍(lán)、綠等冷色調(diào)的色彩，給人以冷靜，穩(wěn)定的感覺，表現(xiàn)金融產(chǎn)品的科技感和可靠性；常用紅、黃、橙等暖色調(diào)，代表著熱情、溫暖與責(zé)任。


行為層

是人類身體日常行為的運(yùn)作，行為層的設(shè)計(jì)與產(chǎn)品使用過程中的愉悅感和效率有關(guān)。好的行為層設(shè)計(jì)對應(yīng)產(chǎn)品功能傳達(dá)、易學(xué)性與易用性，以及正面的心情感受。在界面設(shè)計(jì)當(dāng)中，主要設(shè)計(jì)對象是交互設(shè)計(jì)。（將在下文通過投資場景詳細(xì)分析）



反思層

超越了本能層和行為層，存在意識和更高級的感覺、情緒及知覺。對應(yīng)的是產(chǎn)品的情感溫度，主要的設(shè)計(jì)對象是正向情感的結(jié)果反饋以及品牌信任。


良好的企業(yè)品牌形象和口碑很大程度上會(huì)給用戶帶來認(rèn)知上的安全感。用戶在初次選擇購買金融產(chǎn)品時(shí)，往往強(qiáng)大的品牌背書起到了關(guān)鍵作用，即使是同一只基金，用戶也會(huì)選擇在自己信賴的平臺(tái)里購買。

我們可以通過在頁面設(shè)計(jì)中加入更多的品牌元素，如品牌主題色、LOGO、品牌IP形象、品牌slogan等，來潛移默化地讓用戶感受企業(yè)的價(jià)值：


另一種常見于一些平臺(tái)利用強(qiáng)大的背書以及所獲的成就，清晰地向用戶展示可以提供的保障權(quán)益，責(zé)任條款及資質(zhì)介紹等來傳達(dá)企業(yè)對用戶負(fù)責(zé)的態(tài)度，提升用戶對產(chǎn)品乃至對企業(yè)的信任感：




如何體現(xiàn)出安全感？


我們將金融的生命周期分為三個(gè)階段，分別可以概括為：投資前（產(chǎn)品選擇）、投資中（產(chǎn)品交易）、投資后（產(chǎn)品管理），不同階段的關(guān)注點(diǎn)不同，而對于安全感需求各不相同：



投資前

結(jié)合文章一開始對人群的分析，由于投前的行為特點(diǎn)更多聚焦于產(chǎn)品的選擇，因此從理財(cái)小白的角度對于安全感的缺乏更集中于“買了會(huì)不會(huì)虧錢？”、“產(chǎn)品買對了嗎”、“看不懂規(guī)則”、“這個(gè)適合我嗎”等，尤其存在于一些新形式的理財(cái)組合產(chǎn)品和策略智能投產(chǎn)品中。


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

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


投資中

當(dāng)投資者已經(jīng)選擇好信任的理財(cái)產(chǎn)品時(shí)，在產(chǎn)品交易的各個(gè)界面也需要關(guān)注交易流程中安全感的反饋。

其中包括正向反饋和負(fù)向反饋。正向反饋是指用戶跟產(chǎn)品發(fā)生正確的交互時(shí)，系統(tǒng)給予用戶的正確引導(dǎo)，可以幫助用戶打消顧慮，建立信心，讓用戶感受到一切都在順利地進(jìn)行著，這對那些在設(shè)備操作方面缺乏信心的用戶來說尤為重要，用戶不會(huì)對自己的操作或?qū)ζ脚_(tái)產(chǎn)生質(zhì)疑，如：專屬的密碼輸入鍵盤、正向反饋如金額輸入時(shí)的金額提示、特別提出易誤解的交易規(guī)則等


而反向反饋是指用戶在操作過程中出現(xiàn)或疑似出現(xiàn)誤操作時(shí)，系統(tǒng)向用戶展示提示或二次確認(rèn)以促進(jìn)錯(cuò)誤的糾正或確保此操作無誤。它能確保在第一時(shí)間告知用戶出現(xiàn)了不正確操作，及時(shí)更改，使流程順利進(jìn)行，尤其是對于一些理財(cái)小白而言，合理的容錯(cuò)設(shè)計(jì)更促進(jìn)有效投資，提高未來的盈利體驗(yàn)。如撤銷操作二次確認(rèn)、購買超出風(fēng)險(xiǎn)承受能力的產(chǎn)品、輸入錯(cuò)誤金額時(shí)的反饋。

引起思考：

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



投資后

產(chǎn)品交易成功后，投資者的關(guān)注會(huì)更集中于自己的資產(chǎn)的變化，產(chǎn)品的未來走勢等，因此在安全感的提供上，需要向投資者傳達(dá)準(zhǔn)確的交易狀態(tài)、資產(chǎn)狀態(tài)、資產(chǎn)的保護(hù)等，甚至可以在產(chǎn)品購買的完成頁設(shè)置快捷加入自選和漲跌提醒等

引起思考：

在支付寶的基金總金額中，存在交易進(jìn)行中的提示文案為“買入待確認(rèn)*元”，但不少小白會(huì)產(chǎn)生疑問，當(dāng)前展示的基金總金額是否包含提示的待確認(rèn)金額，此時(shí)是否可將文案改為“含買入待確認(rèn)*元”（畢竟也有部分直銷app并不會(huì)將待確認(rèn)金額包含進(jìn)產(chǎn)品的總金額中）


另一方面的更需要考慮當(dāng)基金產(chǎn)品存在虧損時(shí)，及時(shí)向投資者傳達(dá)情感陪伴和合理的投資交易，以促進(jìn)投資者優(yōu)化持倉或保持中長期持有，避免頻繁的短期交易而導(dǎo)致不良的盈利體驗(yàn)。

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

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


免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評論(0) 瀏覽(1775)

交互小科普！你了解這5項(xiàng)最常用的交互模式嗎?

純純

為大家概括性地介紹5種流行移動(dòng)應(yīng)用中常見的界面設(shè)計(jì)模式以供大家在自己的項(xiàng)目中參考。這些設(shè)計(jì)模式有助于大家提高設(shè)計(jì)的可用性，讓界面變得更加直觀。文章將側(cè)重介紹能夠幫助大家進(jìn)行下列各方面設(shè)計(jì)的模式：

  1. 社交分享
  2. 通知
  3. 彈窗
  4. 內(nèi)容更新
  5. 用戶互動(dòng)（滑動(dòng)、點(diǎn)擊等）

一、社交登陸

在這個(gè)社交網(wǎng)絡(luò)盛行的時(shí)代，我們是不是真的還需要用這種陳舊的方式提交個(gè)人資料？社交登陸這一設(shè)計(jì)模式完全可以讓用戶輕松快捷的登陸，從而取代注冊、填寫表單之類的麻煩工作。

交互小科普！你了解這5項(xiàng)最常用的交互模式嗎？

用戶可以直接登陸自己的社交網(wǎng)絡(luò)賬號（Facebook、Twitter或者Google等），無需另外創(chuàng)建一個(gè)以后不太可能繼續(xù)使用的賬戶，這樣可以大大提高注冊效率。除此之外，這一設(shè)計(jì)模式還有下列好處：

  • 使用現(xiàn)有社交網(wǎng)絡(luò)賬號登陸用戶就不用再多記一套用戶名密碼了。
  • 用戶無需被迫在自己剛剛下載還不熟悉如何使用的應(yīng)用中輸入信息，從而簡化注冊流程。
  • 讓用戶通過現(xiàn)有社交網(wǎng)絡(luò)賬號注冊也許能讓你獲得一些有關(guān)他們的基本資料。這樣你就能更加有效的根據(jù)用戶的實(shí)際需求調(diào)整應(yīng)用。

注：在國內(nèi)這一設(shè)計(jì)演變成了：您可以使用QQ/微博合作帳號登錄，然后給你綁定，繼續(xù)回到注冊界面  – –

二、通知

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

交互小科普！你了解這5項(xiàng)最常用的交互模式嗎？

很多知名公司的移動(dòng)應(yīng)用采用了下列幾種不同的方法實(shí)施其通知設(shè)計(jì)：

  • LinkedIn在有更新內(nèi)容的標(biāo)簽上放置標(biāo)有數(shù)字的徽標(biāo)。
  • Twitter則在時(shí)間軸圖標(biāo)頂部放置一個(gè)小點(diǎn)指示有新活動(dòng)。
  • Facebook使用一個(gè)會(huì)在應(yīng)用內(nèi)垂下的彈出條幅顯示新鮮事推送中的新內(nèi)容通知。

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

通知欄該怎么設(shè)計(jì)，具體方法右戳學(xué)習(xí)：《怕打擾用戶？來看看怎樣設(shè)計(jì)通知欄不會(huì)討人厭》

三、彈窗和層疊窗口

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

交互小科普！你了解這5項(xiàng)最常用的交互模式嗎？

下面是一些彈窗設(shè)計(jì)模式幫助解決問題的案例：

  • 在用戶在應(yīng)用中執(zhí)行特定操作或達(dá)到特定時(shí)點(diǎn)時(shí)彈出并顯示與特定操作或場景相關(guān)的信息/控制方法。
  • 應(yīng)用中原來的內(nèi)容或場景仍然在背景中顯示，但彈窗可以讓用戶選擇是否要了解接下來要出現(xiàn)的內(nèi)容。
  • 彈窗可以吸引用戶的注意力并在必要時(shí)提供重要通知。在使用完成后，用戶可以點(diǎn)擊或滑動(dòng)屏關(guān)閉彈窗返回先前活動(dòng)狀態(tài)。

四、下拉刷新

在習(xí)慣了使用Facebook、Twitter或Google等社交網(wǎng)站后，我們都會(huì)很自然的使用下拉手勢進(jìn)行內(nèi)容更新。第一個(gè)使用這個(gè)設(shè)計(jì)模式的公司是Apple，在此之后這一設(shè)計(jì)就廣為流行開來了。

交互小科普！你了解這5項(xiàng)最常用的交互模式嗎？

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

五、用戶交互（滑動(dòng)、點(diǎn)擊等）

除了下拉刷新手勢外，滑動(dòng)也是智能手機(jī)上最為常用的手勢之一。很多應(yīng)用都允許用戶在文章上左右滑動(dòng)來了解詳細(xì)信息或執(zhí)行其他操作。與依賴于點(diǎn)擊鼠標(biāo)的傳統(tǒng)web應(yīng)用相比，這一方法充滿創(chuàng)新意義。

交互小科普！你了解這5項(xiàng)最常用的交互模式嗎？

在Android和iOS上有大量采用了滑動(dòng)、點(diǎn)擊及其他特定用戶交互方式的移動(dòng)應(yīng)用，你可以在自己的項(xiàng)目過程中予以參考。每個(gè)應(yīng)用對于自己的用戶來說都有不同的意義和價(jià)值。你應(yīng)當(dāng)在畫線框圖的過程中做好規(guī)劃再投入設(shè)計(jì)或開發(fā)流程。在測試過程中花點(diǎn)時(shí)間思考用戶的反饋、建議和批評。



文章來源：優(yōu)設(shè)   作者:程遠(yuǎn)



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


免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評論(0) 瀏覽(3115)

日歷

鏈接

個(gè)人資料

存檔