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

          首頁

          聊聊狀態開關按鈕如何設計

          純純

          我遇到的這個例子,和“概念模型”有關,在這里分享給大家。


          這個酒店房間的開關是這樣的:


          酒店床頭開關



          酒店客廳開關



          這個開關是觸控式的,開關本身有亮/暗兩個狀態;大家迅速看一眼,我想請問大家,你們認為,亮著的開關(圖1的5個燈,圖2的右上、左下2個燈)對應的狀態應該是打開的還是關閉的?




          如果心中有了答案了,繼續往下看。




          之前在文章從交互維度量化用戶體驗中我說過一次我個人理解的最小交互模型,大概是下面這段話:


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


          那隨之而來的另一個問題就產生了,人進行交互行為時的心理預期是從哪兒來的?


          人初生的時候都是一張白紙,每天重復的交互行為產生的心理預期會隨著不同的教育、家庭進行變化;今年我們家在廣州過年,我第一次見到兩歲的小侄子,通過這一周對小侄子的觀察更能體會出人其實是有某些說不清的潛能在里面的,舉個例子,有一天小侄子生病了,要吃兩種藥,一種是甜的,一種是苦的;吃甜藥的時候小侄子很開心,愉快的呀呀的說這藥是甜的,而吃苦藥的時候小侄子也是皺著說這藥好苦,關鍵的問題是,出生兩年來,家人從來沒有對他描述過苦味是什么,也沒有明確告訴他這兩種藥有一種是“苦味”的,但是兩歲的小孩子就能嘗到苦味的藥在沒有接觸過“苦”這個詞的時候就講得出來這是“苦”。


          再舉個例子,還是我的小侄子,我們貴州人過年一般都會真金白銀的打麻將,小侄子目睹了幾天我們在麻將桌上用大把的零錢來支付,有一天我們去公園玩,遇到一個熟人給小孩子了一個紅包,我們就問他“錢是干什么的呀”? 我小侄子脫口而出:“錢是用來打麻將的呀!”


          為什么會發生這樣的現象呢?


          大概是現在的人買東西都用微信支付寶支付,所以對于小孩子的認知來說,他們由于沒有見到過紙幣參與交易的行為,而這幾天不斷被我們麻將桌上的現金沖擊視覺,才會突然脫口而出這句話。


          可能在我小侄子的認知里,手機才是用來買東西的。


          我們互聯網圈的設計行業其實能形成理論的東西不多的,大多數時候為了佐證某些東西,我們需要從心理學、社會學、行為學中找到一些理論支撐。我在做產品設計的過程中,最長這么時間一直使用的一種方法是思考用戶在這個頁面的心理預期。(比如在商品詳情頁,業務目標肯定是引導用戶購買,但是用戶心理上之所以點進了這個商品的詳情,無非是在有購買意愿的基礎上,需要一些信息去輔助決策,這時候如果你仔細思考并模擬一下你自己在購買時候點擊詳情頁的行為,其實會發現其實影響決策的信息大多不是價格(因為價格在上一級的列表頁已經標明了),更多的可能是產品描述和用戶口碑等等)


          在做尤其是app設計的時候,能明確每一個頁面的業務目標和用戶點進來的預期,其實是一件非常重要的事情,大家可以多留心在這兩點上。



          好的扯遠了,回到狀態開關的事情上來,還記得剛剛的那個圖么?


          酒店床頭開關



          酒店客廳開關


          我相信絕大對數的人第一反應都是,亮著的開關對應的燈應該是亮的,因為這個符合常識,但是如果這個酒店也是這樣的話,我就不會舉這個例子了,沒錯,上面開關亮著的燈是關的,沒有亮的開關對應的燈是打開狀態。


          我相信設計這個開關的人是為了讓用戶在夜晚起夜的時候使用方便,但是他完全可以用更加高明的辦法,比如換成夜光材質之類的。這種設計師很愚蠢的,我觀察這么多天下來,我們所有親戚每次開關燈幾乎都會誤觸,因為我們的心智一直一直認為的是亮著的開關亮著的燈。


          這里就牽扯出一個問題,我們在app設計中如何去設計狀態開關的問題。


          首先需要明確,最無歧義的狀態開關一定是需要具備兩個意符:

          其一是表征當前狀態

          其二是表征用戶點擊之后的狀態。

          而現在市面上很多app在這兩個意符上是混的,一般都知道用icon的樣式來表征當前狀態,但是下面的輔助文字則是表征當前狀態的和點擊之后狀態的都有。


          這就會讓用戶很蒙。


          比如相機app、短視頻app、K歌app中就比較明顯會有很多狀態按鈕,如下圖所示是某相機app的截圖,這樣的設計就是“有歧義的設計”,比如“延時關閉”和“補光燈關閉”這兩個文案,會很容易讓人困惑這文案指代的是當前狀態呢還是點擊之后的狀態呢?


          給大家提供一個我個人的小tips:


          設計狀態按鈕,盡量把當前狀態和點擊行為拉出兩個層級關系來設計。


          當前狀態可以體現在icon上,但是不能只體現在icon上(比如他這個延時關閉的圖標有一個x,但是補光燈關閉又沒有x,這就更加歧義了)


          比如如果是我去設計它這個按鈕,我會這么設計:



          這樣的話,確實,用戶操作復雜度上會多一級(之前直接點icon,現在點icon之后需要再點開關),但是用戶完全沒有認知成本。


          這就是我說的把當前狀態和點擊行為拉出兩個層級關系來設計。其實這個犧牲交互成本減少用戶認知成本的方法在交互設計工作中經常被我們使用,當我們遇到一個問題實在是一步很難理清的時候,不妨可以多嘗試這種思路。不過這種提高復雜度的減少認知的方法,不適用于業務強指引型頁面(比如購買、導航之類)


          文章來源:站酷   作者:Seany

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


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

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



          如何設計好消費向app產品

          純純

          本文算是一篇產品分享文吧,主要科普一下消費向內容在KillTime方面都是怎么玩的。



          Part I - 消費向產品及其發展科普

          大家看上面那句英文,我用的是“Spend Oriented”,Spend這個詞本身是一個偏中性的詞,不光有花錢的意思。“消費”一詞其實如果大家去查它的原始定義是指“利用社會產品來滿足人們各種需要的過程”今天在這里說到的其實是“用戶在上面消費內容”的app產品,這個內容可能是圖文,可能是流媒體。也就是說,今天講的app都和“Kill Time”有關。

          那我們不妨先來看下面三頁ppt:


          1.消費向產品的演變:

          我大概把今天要講的消費向產品分為四類,第一類游戲略過就還剩三類:

          a.圖文Feed類app產品:

          這一類產品其實是經歷了從門戶到app的演變的,早期互聯網時代,所有的圖文內容都在門戶網站上,這時候的門戶網站比如新浪搜狐網易,他們其實是內容為中心,用戶圍著內容轉,用戶會自己去挑選甄別自己想消費的內容進行消費。


          然后從門戶到app的過程中,最開始比如搜狐新聞app他其實是一個從門戶到app的純移植,他的本質沒有變化,還是以內容為中心,用戶圍著內容轉,不過后來隨著移動互聯網的發展,因為移動端的特性是“高頻多次”,他就不像門戶我只能上班的時候坐在電腦面前看,移動端的特性決定了我無論拉屎還是乘車,隨時隨地打開都可以看,那這個時候如果還是內容為中心,用戶每次進來都需要進行一個很長時間的甄選內容的過程,真正消費內容的時間就相應的會被壓縮,這時候就有了整個新聞移動端app產品從“內容為中心”到“用戶為中心”的轉型。第一次有了用戶中心的概念,比如有了賬號系統,用戶可以收藏點贊(Mark)一些的自己感興趣的內容,然后通過用戶的點贊閱讀點擊行為進行推送和訂閱:

          除了新聞門戶之外,還有一類圖文產品就是興趣聚合,最開始大家會發現都是一個產品主公一個方向,大家想看什么內容就去相應的地方:比如天涯貓撲就是一個講故事和段子社區,榕樹下主攻青年文學,虎撲是體育相關。大家在自己垂直的領域發展,互相也不怎么干涉。但是這些UGC平臺的本質還是生產者,是人,隨著每個平臺都有自己的大V出現之后,網易推出了博客,這是一個以人為中心的分發結構的產品,除了以人為中心的分發結構外,百度心里想,不是之前的門戶都很垂直么,那我是不是可以建一個平臺,讓各種興趣在我這里以”吧“的形式聚合?于是就有了一個興趣內容聚合平臺”貼吧“,然后隨著發展,大家發現博客這種東西用戶消費成本太高了,一個大V一篇文章好幾千字,生產內容也費盡,用戶看著也費盡,那不如就做一個微型博客更多的讓人發聲就好了,于是有了微博。

          △.既然說到這個了,在這里多扯遠一點,其實互聯網發展的進程都是這樣,繞不開平臺和垂直,大家想想五六年前的電商產品是不是一個道理,當年只有淘寶一家是平臺,其他的,比如京東主攻家電,一號店是零食,聚美是化妝品,美麗說蘑菇街則是衣服(蘑菇街主打職場美麗說主打校園)


          b.泛娛樂類類產品 & c.工具類產品:

          泛娛樂類產品我這個框子畫的很大,大概最初的原型是為了解決我們“聽歌”和”看視頻“的需求,然后最開始的幾大門戶大家都知道優酷土豆、騰訊視頻、愛奇藝、搜狐視頻、樂視等等。最開始那幾年互聯網基礎建設不行嘛,科技也沒發展到位,所以那時候視頻清晰度都好低,而且下載率非常高,大家一般消費內容會采用”在家wifi先下好然后再看“這樣的辦法,但是隨著基礎設施的加固,大家發現流量好便宜,這時候在15年才開始有網紅直播這一塊的業務出來(游戲直播是很早就有的哈),我個人會認為催生網紅直播產品的歸因是科技進步流量不花錢了。隨著網紅直播類興起的另一類產品就是短視頻類,我個人認為短視頻產品的出現本質歸因除了流量不花錢了之外,更多的是解決之前門戶視頻網站內容消費成本過高的問題,眾所周知,現在人越來越懶了,一集電視劇40分鐘,很難坐得住不分心的看完,所以現在視頻app出了倍速播放。這本質的原因是用戶消費內容的High點(達到滿足的點)越來越高了。

          再說聽歌這條線的演變,最開始聽歌,然后唱吧、全民K歌,國外的Starmaker等等出來做了唱歌app,這時候的app本質是一個工具,但是用戶UGC內容的時候沉淀了很多作品在這些工具app里,所以這一類產品就開始做去工具化,變成了一半社交一半工具的產物。另外K歌產品火了之后,才有的FM類產品,因為都是消費音頻和音頻直播嘛有共性在這里就不展開了。最后就是這類音頻產品不滿足只做音頻,所以就開始做視頻了,這就導致你現在打開全民K歌或者唱吧或者國外的好多app,你會發現只要是娛樂產品都有短視頻的原因。


          2.消費向產品的核心目標:

          GNT是一個羅振宇2016年年終演講時候提出的詞,我們假設平均每個人每天8點到家到晚上12點的時間是可支配時間,那中國網民每年新增數量(今年是1000w)已經穩定在和出生數量一樣了,所以我們認為網名總數不太會有啥變化,比如之前我用三個小時在優酷騰訊愛奇藝上看電視劇,一個小時聽網易云音樂,現在我大概只用一個小時看電視劇其他三個小時都在刷抖音,這時候,大家會發現消費向產品的決戰維度就不是自身的垂直領域了,之前我們會認為視頻門戶哪家片源優質哪家就牛逼,現在不是的,現在的產品除了垂直比較之外更多的競爭是在時間維度的較量,這是為什么抖音這種產品突然一下很火的原因,我稍后會著重說抖音這里就先略過了。

          3.為了占用更多的用戶時間,設計師可以發力的點:

          內容源是否優質(這里的”優質“指的是內容和用戶的March值)其實是用戶是否消費的最大的一個指標,因為內容源和用戶的March值主要反映在下面的前兩個問題中:

          給用戶展示什么內容?

          這些內容的優先級是怎樣的?

          這兩個問題一般我們設計師并不能控制,關于什么時間什么環境下給用戶展現什么內容,往往跟用戶歷史行為和算法有關,如果大家看了頭條的算法公開課大家會知道頭條的推薦算法其實是有三大類(內容維度、用戶側特征、環境特征)幾千萬個向量特征去控制的,如果不是純算法推薦也會有運營去干預內容的露出,所以這部分其實設計師可以干預的比較少,我們真正可以干預的東西是后兩個問題:

          如何讓用戶迅速找到自己感興趣的內容進行消費?

          ——這就涉及到內容源呈現方式的抉擇問題。

          如何盡可能的降低用戶消費內容時的交互成本?

          ——這就涉及到兩個問題,一是從交互上讓用戶盡可能沉浸消費,二是交叉推廣和分流的問題。


          Part 2 - 消費向內容的主流呈現形式:Feed Flow

          △.誰能告訴我一下Feed Flow(我們工作中所說的”Feed流“中文怎么翻譯?Orz...)


          1.RSS vs Facebook's New Feed

          如果大家是一個早期互聯網民,一定聽說過RSS的概念:

          RSS (Really Simple Syndication簡易信息聚合協議)是一種的工具,使得用戶可以在客戶端借助于支持RSS的聚合工具軟件,在不打開網站內容頁面的情況下閱讀支持RSS輸出的網站內容。舉個栗子:如下圖所示,小張在pc時代,每天會定時打開華爾街日報網,ChinaDaily,王老三的博客看里面的內容,但是每天都打開三個網站讓小張覺得很煩,這時候借助RSS工具,他可以把三個(支持RSS協議的)內容源聚合到一個第三方的RSS工具上,這樣他就不用每天反復打開三個網站了,除了獲取這三個網站的陳舊內容之外,這三個網站每天的更新內容也會被實時呈現在這個RSS中:

          一個RSS聚合工具內,每一個單條內容源,就稱為Feed(取的是滋養的意思,就是源源不斷的滿足用戶消費需求的含義),那早期的Feed序列大家也看到了是從RSS衍生出來的概念,Feed流的排序也是用戶定義的,比如可以按照Timeline排序,或者是按照用戶自定義Tag聚合,或者是按照interest標簽(收藏,喜歡,點贊都屬于泛意義上的interest),那大家就明白了,RSS里的Feed流本質上是一個用戶自定的,關于內容收集的工具而已。

          到了2006年,我們的爸爸Facebook開始做社交,因為Facebook是人和人的關系聚合,其實當時Facebook就借用了Feed的概念,創造出了以“關注Follow”為核心的新型Feed,在書上(我忘記是哪本書了)把它稱為Facebook‘s New Feed,它其實有三個特征:

          1、內容源從URL到人的狀態(其實本質也是一個一個URL序列)。

          2、不僅僅是Timeline的基礎排序,更多的指標參與進來決定內容排序

          3、訂閱內容中夾雜費非訂閱內容(參考微博),讓用戶永遠刷不完沒有盡頭的消費

          上圖是RSS和Feed的對比。

          到了今天,其實幾乎市面上所有消費向產品(新聞類、微博、Instagram、Snapchat、短視頻、等等),都在Facebook New Feed的基礎上進行了改進,所以今天我們把這種New Feed更習慣的叫做Feed,大家可以去PM社區之類的搜Feed能發現一堆文章可以閱讀,在這里就不贅述了。


          Part 3 - 匹配、分發與消費

          知道Feed的概念能方便我們理解接下去的問題,還記得接下去是什么問題嗎?

          1、如何讓用戶迅速找到自己感興趣的內容進行消費?

          ——這就涉及到內容源呈現方式的抉擇問題。

          2、如何盡可能的降低用戶消費內容時的交互成本?

          ——這就涉及到兩個問題,一是從交互上讓用戶盡可能沉浸消費,二是交叉推廣和分流的問題。


          1.先分發,再消費的app模型:

          我們不妨先來看主流的Feed分流的兩種模式:

          一種是微博這樣的關注序列插入非關注序列(推薦、廣告等),另一種就是關注序列瀏覽完用戶拉不出新Feed的時候有個分流按鈕提示,別小瞧這個小提示,往往能帶來每天5-7%(我自己的工作經驗數據)的新模塊引流。


          再說用戶迅速找到自己感興趣的內容進行消費的問題,這里就涉及到內容源的呈現方式。我之前唱吧的那篇文章舉過這樣一個例子:

          唱吧7.0到8.6的三次改版犧牲了展示效率(從7到5)HighLight了文字信息,是因為我們發現圖片信息不足以讓用戶做興趣判斷,大家看下圖就明白了:

          快手的圖片本身就是內容的簡略呈現形式,大家可以基本通過圖片來得知里面的內容大概是什么,如果遇到用戶難以判斷的,快手在用戶上傳視頻的時候鼓勵用戶打字說明,比如大家能看到圖中的紅字,就是說明視頻內容的。這樣的話,用戶通過圖片能清晰得到點擊之后的內容預期,比較符合用戶心智。大家再來看唱吧,大家會發現圖一圖二圖三都是漂亮的小姐姐,這個就沒辦法告知用戶里面的內容究竟是啥樣的,那支撐用戶點擊進去的除了顏值之外,更多的可能是歌名,和這個人的歌手等級,收聽量這樣的數據才能支撐用戶點擊。唱吧這么改之后我印象中模塊CTR是有明顯的提升的,但是具體數據我離職太久忘記了...

          所以其實內容源的呈現方式本質上和內容相關,這里的UI應該以“如何讓用戶迅速找到自己感興趣的內容”為核心設計目標去設計,具體問題具體分析咯~


          再來說常見的消費向內容的交互模式,最常見的就是Push&Back的模式:

          所謂Push&Back就是用戶一次點擊進到詳情頁消費內容,看完之后再點擊返回回到Feed列表,然后繼續在列表里尋找下一個想要消費的內容的模式,比如下圖:

          傳統的Push&Back交互成本太高,用戶看完之后需要點擊返回,然后瀏覽內容列表選擇自己想看的,然后再次點擊進入。這種就是很難達到沉浸式消費,用戶跳出率和關閉率都比較高。

          于是有了另一種模式就是讓用戶不跳出,直接挨個在當前Feed下的內容:

          舉個例子就是知乎的“下一個回答”點擊按鈕和下拉交互,以及微博的視頻關燈流:

          這種模式使得用戶在消費內容的時候交互極其便捷,輕輕滑動或者一次點擊就可以消費下一個內容,大大增加了沉浸的消費體驗:

          關于如何盡可能的降低用戶消費內容時的交互成本這個問題,上面這一種辦法,其實還有另一種,就是所謂的交叉推廣,大家看下面這個圖,前兩張是頭條Feed,后三張是陌陌:

          頭條點擊一個視頻后,下面會給你推和這個視頻相關的一些視頻(可能是內容維度相同都是做飯的,可能是用戶側特征相同都是美女做飯,可能是環境特征相同都是教你明天中秋節怎么做月餅)讓你去觀看(而且你發現沒頭條iOS版本和抖音iOS版本都是默認隱藏statusbar的,你看不到當下幾點了,為的就是讓你一直看下去...)。

          陌陌這款產品就更有意思了,比如我點擊第二個入口(右1)進去,這時候有個上下滑動切換的交互,app的指示意是:“切換到下一個主播”,那按照常理來說,我松手之后,應該消費的是第三個入口(左2)的內容沒錯吧?但是你會發現事實并不是這樣,它其實跳轉到了一個全新的Feed序列,所以交叉推廣的概念如下圖所示:


          2.直接消費的app模型:

          上面我們講的都是先分發再消費的模型,它一定要有一個內容承載的Feed頁,然后用戶根據自己興趣去選擇性的消費內容。那本著:“降低用戶消費內容時的交互成本”這個思路,有沒有可能去掉分發這個步驟,不要內容承載頁,直接上來就讓用戶消費呢?這就是大家熟悉的抖音:

          Musical.ly(后改名Muse然后被抖音抄然后被抖音收購)這款app創造了一種直接消費內容的產品模型,這種模型有什么特征呢?

          1、交互成本最低,打開即消費,一次上下滑動即分流,左右滑動(或一次點擊)即分流,極強的沉浸性。

          2、依靠算法把很多Feed序列整合成了一個無窮盡的Feed,完全依賴算法和用戶行為數據、短視頻數據判斷展示優先級。

          我們不妨來對比一下“先分發再消費”和“直接消費”的兩種產品吧:

          “先分發再消費”類的產品,由于有一個內容承載頁,用戶可以選擇性的點擊消費,比較尊重用戶。而抖音這類產品呢,直接把內容強制用戶消費,本質上是帶有一定脅迫性質的。直接讓用戶消費內容的比如抖音類產品,不給用戶自主選擇的機會,脅迫用戶消費產品提供的內容,如果內容足夠優質的話會有奇效,如果內容差強人意,戳不中用戶的High點,則有可能適得其反。


          我認為抖音這種直接讓用戶消費內容的產品模型本身是一把雙刃劍。


          大家玩了這么多app應該也能發現了,市面上殼子抄抖音的產品現在特別多,大家會發現只有抖音好看,別的都是看一兩個就看不下去了想關掉,這里的原因就是因為用戶被脅迫消費你提供的內容。

          我們假設你是一家內容實在不怎么行的app,如果強行用抖音的模式,你第一個內容是一坨屎,用戶吃了一半滑動跳過了,這時候他發現第二個內容還是一坨屎要給他吃,用戶意愿會下降得特別厲害,甚至一兩個視頻過后就直接關掉了。但是如果是先分發的模型,里面都是一堆屎,但是我告訴你了,第一坨屎是草莓味的,第二坨屎是橘子味的,這時候用戶自己想消費哪一坨內容是他自己的點擊選擇,和你無關,你app設計者不用承擔脅迫用戶消費的風險,自然用戶對自己選擇的內容的容忍度也會高一些,可能不會看一兩個就關掉了,沒準兒會看四五個。這樣是不是瀏覽時長就增加了?


          給大家講一個理論性的東西吧,抖音內容的理想時間模型(名字是我自己隨便取的):如下圖所示

          我們假設理想狀況下這個用戶沒別的事不會被中途打斷,只要想刷可以一直刷一輩子抖音,然后我們來研究內容質量和用戶瀏覽時長的關系:我們假設,每一個個體用戶都有一條平均匹配線Marchline(這個匹配可能是內容維度的比如我喜歡看dota不喜歡看lol,喜歡科普不喜歡雞湯等等),內容只要比匹配線高,對于我們的心智就是一個正向刺激(Positive)。

          我們假設每個視頻都是15s,大家會發現你們每天打開抖音的第一條視頻總是很優質(其實抖音最初冷啟動的時候準備的視頻都是1500-3000一條買的優質腳本之類的,花了幾千萬呢,所以這些優質視頻源奠定了第一波龍湖留存),如果第一個視頻總是很優質,用戶很喜歡,那心智就會上升,是一個正反饋,然后第二個視頻如果也很精彩,那就會把用戶推向high點,如果這時候第三個視頻一下子推了一個特別爛的或者沒算準給用戶推了一個用戶不是很中意的,理論上用戶交互成本很低,可能只看了一半劃過就行了,但是如果連續兩三次都給用戶推了很爛的內容,那用戶的負向刺激(Negative)越來越多,一半兩到三次就退出了。

          在這里面有一個我總結的思考就是,用戶的Marchline其實是浮動的:

          Marchline(new) = Marchline(old) + △Willing

          用戶每次打開app到關閉app的過程中正負向刺激的向量和。

          所以本質上抖音這種點開即消費的短視頻設計方法,是對自家內容極度自信之后的產物,記住抖音模型是把雙刃劍,如果你不是對自家內容那么自信或者不愿意花錢來砸內容,就盡量不要用抖音這種交互,很容易塞用戶一嘴屎得不償失!




          3.一邊消費一邊分發的app模型:

          上文已經講過了快手(先分發再消費)和抖音(直接消費)兩種產品模型。

          他們各有利弊,但是在最近半年,熱愛創新的產品設計師們在短視頻領域讓我見到了眼前一亮的第三種模式,就是Instagram的旗下的IGTV(入口在Ins的右上角,也是一個獨立的IGTV app),它采用的是一種創新的一邊消費一邊分發的模式,可以說這個創新是很亮眼了,大家有空可以去下載體驗一下:


          這款產品默認打開是圖1所示,后邊的視頻是在播放的,這就滿足了直接消費,但是下面有一個推薦列表可以滑動選擇,滿足了分發,然后如果需要沉浸的觀看某個視頻,手指在圖1上下滑就會變成圖二,這就變成了一個完全沉浸式的抖音,和抖音的區別是抖音采用上下切換,IGTV采用左右切換,它最絕的地方是把消費屬性做到了極致,甚至在搜索或者在發評論的時候,后面的視頻也依然在播放。

          這就很好的解了交互效率和分發的問題,大膽預測IGTV的交互模式是明年短視頻、視頻直播、視頻社交抄的重點。(其實現在已經看到Azer之類的產品在大量采用這種交互了)

          總結一下吧,其實設計的本身在解決問題,只不過隨著時間的推進,大家的認知層次會逐漸升高,最初我們認為快手這種分發效率過低,于是抖音出來了之后大家都抄抖音,但是別的app沒有抖音這么好的內容,于是取了折中有了我個人認為更合適的IGTV這種交互模型。

          其實今天這篇文章想要闡述的一個思想是“目標導向的設計”,我們為了解決一個又一個的問題,在不斷解決問題的過程中交互一次一次的微創新,微創新到一定量就會變成一個大的創新。每次看到很多有創新的產品都會感覺到欣喜,作為設計師大家也可以多看一些app產品,大量的試用不同的app產品,然后歸類總結一下,相信也會有所收獲。


          文章來源:站酷   作者:Seany

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


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

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


          用戶體驗是玄學嗎?

          純純

          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,你是什么職位就做什么職位的事情,從來不越界,這樣其實是不利于人的發展的,那我們追求上進的設計師們只能自己下來多看書,多去做研究,私下來多花時間修煉自己的內功心法,才能讓自己立于不敗之地。


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


          阿里巴巴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中我們經常使用的交互形式主要分為鍵盤和鼠標的控制,鍵盤用來控制技能的釋放和其他快捷物品的使用,都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標,這是端游中基本的交互行為與操作。





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







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


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


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



          2.交互認知的盲區


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


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



          2.1信息不對稱


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


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


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


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


          我們用我們能夠講述的語言去描繪我們不懂的事物,再例如設計師和開發還原只會說往左移動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營銷工具化


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


          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.沒有規律且過多的配色

          讓界面或者插畫看起來非?;靵y。一般來說顏色的使用也需要有側重點,所以我們常用的方法是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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

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

          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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          探討交互設計

          周周

          本文主要探討交互設計

          交互設計之探索GUI和VUI

          周周

          本文主要探討GUI和VUI的交互設計 。

          你好,我是《用戶體驗四維度》

          ui設計分享達人

          你好,我是《用戶體驗四維度》,一本關于用戶體驗的新書,今天正式上市了。


          具體內容方面,我選擇了聚焦于“人”——主要探討了人與界面、人與內容、人與人和人與品牌的交互體驗——大部分話題既有宏觀上的綱領,也有微觀上的實現細節。這四類交互體驗,下文的提及會使用簡稱,所以先看下簡稱及對應的全稱。

           

          HI X:Human Interface Experience,人與界面的交互體驗;

          HC X:Human Content Experience,人與內容的交互體驗;

          HH X:Human Human Experience,人與人的交互體驗;

          HB X:Human Brand Experience,人與品牌的交互體驗。



          下面把時間交給作者李瀟,由他來做一些分享。

           

          你好,我是作者李瀟。我主要分享兩點,第一點是這本書的來龍去脈,第二點是這本書的主要特點。

           

           

          01 《用戶體驗四維度》的緣起

           

          2019 年 7 月 15 日,我在個人公眾號上發表了第一篇設計類文章《淺談 Keep 的 UI 設計》,轉到朋友圈后有很多人點贊,也有朋友說寫得不錯,轉到站酷后也有很多設計師留言稱贊。算是一個還行的開頭,這給了我信心。

           

          之所以會寫公眾號,是因為當時我成立了一個個人的設計工作室,希望借公眾號的文章引來一些客流。之所以第一篇文章會寫 Keep,一方面是因為 Keep 比較知名,另一方面是因為我比較喜歡 Keep,也是 Keep 比較忠實的用戶。

           

          當時的計劃就是挑一些個人比較喜歡的、具有一定知名度的產品來寫,每款產品至少寫兩篇文章,一篇寫 UI 設計,一篇寫交互設計,或許還可以就產品功能再寫一篇。因為我分別從事過產品經理和 UI 設計的工作,同時也兼任過交互設計的工作,有這些方面的經驗。

           

          按照計劃,第二篇文章很自然地就是關于 Keep 的交互設計,不過名字是《淺談 Keep 的用戶體驗》。因為所寫內容已經超出了“交互設計”的范疇,而“用戶體驗”恰好是一個更合適的主題。這篇文章的反響依然還行。另外,有趣的是,根據使用感受,我發現 Keep 這個擁有課程和社區的運動品牌,它的用戶體驗可以用四個維度來描述,它們分別是:人與界面、人與內容(課程)、人與人(社區)、人與品牌。沒錯,這就是本書最原始的雛形了。

           

          再加上也有讀者朋友反饋說“用戶體驗的四維度”挺不錯,有啟發。于是第三篇文章就“拐彎”了——沒寫 Keep 的產品功能,也沒寫其他產品,而是把“用戶體驗的四維度”單獨寫成了一篇文章:《淺談用戶體驗的 4 個維度》。

           

          某種程度上,第三篇文章的反響好過前兩篇,因為當時有 3 個業內比較知名的公眾號(分別是 MicroUX、應謀鬼計、UXPA,在此向他們致以謝意)轉載了這篇文章,且有一名立志成為產品經理的大學生根據這篇文章的觀點寫了一篇分析 QQ 和微信用戶體驗的文章:《從微信與 QQ 的交互比較中談用戶體驗》。另外,當時在跟一些朋友聊起我寫公眾號的近況時,有兩位設計師朋友都提了句“可以寫書/出書”。

           

          不知說者是否有意,但是聽者有心,朋友的話更加堅定了我內心逐漸萌發的寫書的想法。第三篇文章之后,我就開始認真考慮寫書這件事了:首先,“用戶體驗的四維度”這個概念比較新,或許可以作為書的框架;其次,個人對用戶體驗非常感興趣,也就是對這個潛在的書的框架非常感興趣;第三,發在網上的文章,包括“用戶體驗的四維度”這個概念,反響都還行;第四,公眾號我是全職在寫,為了質量寫得很慢(平均兩周一篇 4000 多字的文章),時間成本已然很高,還不如再增加點時間成本來寫書。

           

          所以,是不是真的可以把“用戶體驗的四維度”寫成一本書?

           

          試試才知道。于是,在參考很多書的大綱以后,2019 年 8 月下旬,我就為“用戶體驗的四維度”列好了一個初步的大綱。

           

          之后發在網上的所有文章,也就是從第四篇開始,就是按照這個大綱來寫的。也就是說,我是先把書稿寫成了網文,這種網文的更新一直持續到第 2 章 HI X(人與界面的交互體驗)的尾聲,隨后斷更。因為那時已和出版社簽好合同了,按照約定,書里的內容不再發到網上。對于那些曾在網上追過我文章的讀者朋友,在此我要說聲抱歉,請見諒。

           

          順便說下書稿和網文的主要區別。歷經編輯的指導與建議、作者的反復修改、審校流程的打磨,與網文相比:

          一,書稿的邏輯與結構更加嚴謹、合理,內容和語言也比網文精簡;

          二,書稿更加體系化,相互之間(如 HI X 部分的根需求、功能架構和信息架構)盡可能做到了“環環相扣”,章節之間的起承轉合也更加連貫、自然;

          三,書稿在內容層面進行了一定程度的修改和優化,個別章節(第 1 章的四維度,第 2 章的根需求、功能架構等)則是進行了極大程度的修改和優化。

          四,書稿在產品案例和生活案例方面也進行了一定程度的調優。

           

          以上就是這本書的一個簡單緣由,接下來分享下它的主要特點。

           

           

          02 《用戶體驗四維度》的特點

           

          這本書主要有四個特點,它們分別是:追求深度、追求卓越、展望未來、兼顧大小。當然,我也很期待你去發現這本書的其他特點,包括它的缺點。



          1 追求深度
           
          無論是宏觀上的大綱(用戶體驗四維度),還是微觀上的具體內容(根需求、功能架構、UI 設計、HH X 等),本書都著力于深挖本質。
           
          先以根需求為例。在日常工作中,“需求”是一個高頻詞匯:大到上線一個大功能,小到改一下字體顏色,都被我們稱之為“需求”。面對大大小小、林林總總的“需求”,是不是有必要關注下根需求(本質需求)?因為根需求是一切需求的根本。如果根需求有問題,往往意味著用戶的根需求沒有完全得到滿足,那由此衍生出來的一系列大小需求都會有問題;如果根需求有問題,就意味著這個行業的類似產品,依然有機會,直到用戶的根需求完全得到滿足為止。所以本書就以幾乎人人都會用的資訊產品為例,比較深入地探討了兩類用戶(生產型用戶和消費型用戶)的根需求。
           
          再以 UI 設計為例。關于 UI 設計,最近幾年出現了一些“商業化設計”“增長設計”的概念,也就是說,UI 設計的肩膀上多了“增長”“商業化”這些擔子。這不禁使人擔心,未來會不會有新的擔子,繼續加在 UI 設計的肩膀上?另外,術業有專攻,職能亦有分工,這些擔子,UI 設計擔負得起嗎?我認為未必擔負得起。就像于動物的生命而言,心肝肺各有分工、各有貢獻,總不能讓心臟負責呼吸、肝臟負責跳動、肺負責造血。于心肝肺而言,做好分內的事情就是最大的擔當與貢獻;于 UI 設計、交互設計、信息架構、產品功能等而言,情況亦然。那 UI 設計的分內事是什么?是它的本質,這便是本書關于 UI 設計的探討視角。
           
          2 追求卓越
           
          在本書中,有些話題有嘗試深挖本質,有些話題沒有。不管有沒有深挖本質,最終目的都是落腳于“如何做到更好”,也就是追求卓越。
           
          以交互設計為例,在規劃它的大綱時,我嘗試過不同的切入點:大的設計原則(iOS Human Interface Guidelines, 尼爾森十大交互原則等)、小的交互細節(微交互)、設計哲學(3-4 個要點)、設計目的(人人喜愛)。仔細斟酌之后,我發現要想實現“人人喜愛”這個設計目的,“設計哲學”這個方法的可能性是最大的,而且設計哲學本身是足夠“海納百川”足夠“獨立成章”的,所以最終果斷摒棄了其他切入點,而只保留了“設計哲學”這個切入點。具體而言,這個設計哲學就是:周到,品質,驚喜,善意。想象一下,一個為人周到、能力(品質)卓越、時不時會給身邊人帶來驚喜、同時又很善良的人,自然會受到身邊人的喜愛。類似的交互設計,同樣會受到用戶的喜愛。

          3 展望未來
           
          內容“扎根生活”是本書的追求之一。但是當探討到目前面臨困境并存在諸多不足的話題時——比如 UGC 產品(HC X 部分)——本書則會更多地展望一下未來。
           
          UGC 產品面臨什么困境,存在什么不足?
           
          以文章類 UGC 產品為例:各行各業的從業者——比如教師和律師——都有自我充電(如看到本行業高品質的深度文章)的需求,這個需求基本上能在公眾號里得到滿足;但是,不管一篇深度文章的品質有多高,公眾號這個包含各類信息的平臺,都是像黑洞一樣將其“吞噬”和“湮沒”,而不是像書店、圖書館一樣將其“陳列”和“流傳”下去。再以極其熱門的短視頻類 UGC 產品為例:得益于簡單易用等諸多優勢,短視頻類 UGC 產品在“信息和知識的大眾普惠”(尤其是針對老年人)上做出了重要貢獻;但是,短視頻類 UGC 產品也存在一定不足,比如容易使人上癮、沉迷,比如上面的信息和知識一定程度上缺乏質量保障。
           
          未來更好,或更受歡迎和尊重的 UGC 產品,會是什么樣子?
           
          個人觀點,首先是簡單清晰的分類,也即 UGC 產品需要分成知識型 UGC 和信息型 UGC,前者以知識為主,后者會包含前者。實際上這個分類目前是存在的,比如站酷、人人都是產品經理、CSDN 等社區就屬于知識型 UGC,公眾號、B 站、抖音等平臺則屬于信息型 UGC。
           
          篇幅所限,這里僅說下信息型 UGC。以短視頻類的信息型 UGC 產品為例,雖然大熱,但也飽受爭議,甚至飽受詬病。什么樣的信息型 UGC,在廣受歡迎的同時還受人尊重,甚至受人喜愛?據個人觀察,有兩大類。一類是像公眾號這樣足夠多元的“真實世界”,另一類是像 B 站、Instagram 這樣在某些方面比較美好的“理想世界”?!罢鎸嵤澜纭焙汀袄硐胧澜纭?,值得所有信息型 UGC 來學習。

          關于信息型 UGC,怎么建立更多“真實世界”和“理想世界”?關于知識型 UGC,未來更好的產品會是什么樣子?這些問題,本書都嘗試進行了探討,以供參考。

          4 兼顧大小
           
          用戶體驗的四個維度,交互設計的設計哲學,知識型 UGC 和信息型 UGC,都是比較宏觀的大話題。本書不光有這些大話題,還有與之對應的關乎“怎么實現”的小細節。
           
          還以交互設計為例,周到的、高品質的、給人驚喜的、帶有善意的交互設計會受人喜愛,那交互設計如何做到周到、品質、驚喜和善意呢?自然而然地,本書就這四個問題進行了比較深入的探討。以“驚喜”為例,本書先是將交互設計的“驚喜”分為“小驚喜”和“大驚喜”,簡單給出了定義和示例,然后又就“如何做到驚喜”分別給出了針對短期(可以立馬實現,更適合“小驚喜”)和長期(需要長期積累,更適合“大驚喜”)的建議。
           
          于 UI 設計、信息架構、功能架構、HH X 等話題而言,也是同樣的或類似的寫作手法。


          分享完主要特點,接下來請允許我簡單介紹下這本書適合哪些讀者,供你參考。
           
          5 適宜人群
           
          得益于以上幾個主要特點,再加上本書涉及的話題既有屬于基礎的根需求、功能架構、信息架構、交互設計、UI 設計,也有更進一步的 HC X(人與內容的交互體驗)、HH X(人與人的交互體驗)和 HB X(人與品牌的交互體驗),個人觀點:
           
          本書既適合一線從業者(產品經理、交互設計師、UI 設計師等),也適合相關從業者(技術人員、運營人員、市場人員等);
          既適合創業者(“根需求”“功能架構”以及“知識型 UGC”“信息型 UGC”等部分或許會使你發現更多新的機會),也適合學生。
           
          希望你能在書中找到自己需要的、或自己感興趣的內容。
           
          以上就是我的分享,接下來把時間交給《用戶體驗四維度》。
           
           
          結語
           
          好的,謝謝作者李瀟的分享,讓我意識到我的出生似乎是個意外;也謝謝李瀟把我夸得這么好,但我還是要補充一句,他的夸獎僅供參考,一切以自己的切身感受為準。
           
          用戶即人,談用戶體驗,自然離不開對人的關注。人作為高級動物,自然有其強大和理智的一面;人作為動物本身——置身于高速發展的現代社會,置身于“亂花業已迷人眼”的智能化信息社會,置身于既相互溫暖也相互競爭甚至還相互“傷害”的同類中——也有其脆弱和感性的一面。正如李宇春在《軟肋》里唱的那樣: 


          是最堅強的人,是最脆弱的人   
          是最理智的人,是最敏感的人   
          固若金湯的人,語無倫次的人   
          不過,血肉之身   


           
          同樣作為人的互聯網從業者,在打造自家產品時,在兼顧商業化的同時,有沒有可能以更美好的方式去對待這一個個用戶,一個個血肉之身?
           
          我想這是一些產品正在面臨的問題,也是所有產品都難以回避的問題(用戶利益和企業利益難免會發生矛盾)?;ヂ摼W行業在中國的蓬勃發展,不過二三十年的歷史,所以相信這也是一個布滿荊棘、充滿希望的問題?!队脩趔w驗四維度》從根本上探討的,也正是這個問題。希望我的探討,能為你帶來一點參考或啟發。
           
          最后,謝謝你的時間。


          - -  The End - -


          實拍圖:

          undefined

          文章來源:站酷      作者:SonwDesign

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

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

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



          設計師眼中的用戶體驗

          ui設計分享達人

          用戶體驗

          首先,我們先來了解什么是用戶體驗

          從字面上來說,用戶體驗就是用戶在使用產品過程中對產品的直觀感受以及評價

          這種感受非常的主觀,但又很容易影響別人對產品的判斷。這就是為什么某寶商家一直求好評,而某團騎手會為了好評跟用戶“大動干戈”的原因了


          名詞解釋

          • UI——User Interface,本意是“?戶界面”,但現在這個詞已經被擬人化了,即把那些做用戶界面的設計師們叫做UI

          • UE——User Experience,本意是“?戶體驗”,現在也變成了一個職業名詞,是指那些做用戶調研的研究員,比如用戶畫像、產品分析、競品分析等。有些公司把“交互設計師”也叫做UE,嚴格來說UE和交互是兩個職位,不過現在很多UE除了做用戶調研也會畫交互原型,所以混在一起也不奇怪了

          • IxD——InteractionDesigner,本意為“交互設計”,也就是交互設計師,現在也常常用UX(User Experience)來表示交互設計,用來跟UI進行區分。簡單來說就是幫產品畫原型的,實際上這個職位非常的關鍵,產品希望表達的邏輯,各個界面的跳轉與關聯關系,以及產品的可用性與易用性,都體現在交互上

          • UED——User Experience Design,本意為“?戶體驗設計”,現在常常表示用戶體驗設計團隊,基本上大一點的互聯網公司都有自己的UED團隊,甚至大的部門都有自己的UED團隊


          UED工作領域

          UED團隊要做的事情可多了,通常來來說主要坐下面的事情: 

          • 用戶研究

          • 產品分析

          • 交互設計

          • 產品設計

          • 視覺設計

          • 品牌設計

          • 插畫設計

          簡而言之,UED是以用戶需求為目標而進行的設計的團隊,通過團隊的經驗與設計能力給出設計方案,是幫助公司進行產品策劃的主力之一


          用戶體驗五要素

          說到用戶體驗,就不得不提用戶體驗五要素了

          現在我們所談論的用戶體驗的概念,其實最早出自一本叫《用戶體驗要素》的一本書

          《用戶體驗要素》--作者Jesse James Garrett,是美國用戶體驗咨詢公司Adaptive Path的創始人之一


          這本書出的其實比較早,英文版在2001年就出了,國內常見的是2010年出版的中文版第2版,書里的概念在互聯網設計界廣為流傳,非常值得閱讀


          當設計師在設計或重構產品,卻不知從何開始時,這時我們可以參考用戶體驗五要素


          用戶體驗五要素是一種產品分析與設計的方法論,他向教科書一樣指導我們從0到1設計一款產品。同時它涵蓋了一個產品從想法到落地的整個流程,這正是我們學習它的重要原因

          用戶體驗五要素由戰略層、范圍層、結構層、交互層、表現層等5個層級構成,由下而上像個金字塔的結構一樣,戰略層則是底部最堅定的根基,產品的起源也源自該層


          1.戰略層

          這是五要素的最底層,一般是公司負責人與產品總監、市場總監等高層之間的討論范圍層。這一層主要是確定產品目標以及用戶需求。比如:

          • 公司要做什么

          • 面向什么樣的用戶

          • 什么樣的解決方案

          • 公司的產品特色是什么

          • 競爭對手有什么

          • 將來的收益怎么樣

           

          值得一提的是用戶畫像需要在這一層定義出來。我們可以招募一些用戶進行訪談,然后為用戶分組,并結合用戶的需求確定我們的產品目標

          2.范圍層

          戰略決定范圍,這一層主要針對戰略層的需求進行更細致的分析,定義需求是什么,提出解決方案,同時要定要好需求的優先級

          3.結構層

          根據前兩層思考產品的信息架構,規劃任務流程,簡單來說這一層主要是產品PRD的輸出

          4.框架層

          頁面的具體功能擺放,信息布局,這一層主要是交互設計,輸出低保真原型

          5.表現層

          頁面最終給用戶呈現的視覺效果,這一層主要是視覺設計,輸出高保真視覺稿

          模擬案例

          作為設計師的你,接到了一個餅干公司的設計需求,公司希望你能幫他完成從產品到包裝一系列的設計,你該怎么去做呢?

          我們用用戶體驗五要素來整理設計思路:

          -戰略層

          • 先了解這家公司的產品需求和用戶需求

          • 產品需求:公司是個小型食品加工廠,主營是面包和餅干,有實體店也有網店,今年準備在圣誕節推出一款圣誕餅干

          • 用戶需求:用戶畫像是20-35歲的女性,喜歡看劇,喜歡網購,對可愛的東西沒有抵抗力。今年上映的一部電影叫《餅干俠》(虛擬)票房火爆,用戶都想買到劇中同款的餅干

          • 公司目標:希望圣誕前后一個月內盈利50w

          -范圍層

          • 分析需求:公司是做一款圣誕餅干,了解到《餅干俠》的原型是出自美國卡芙食品的一款餅干,并把它確定為競品并展開分析

          • 設計方案:列出一系列設計清單,包括品牌logo重新設計,食品包裝、網店圣誕裝飾、廣告宣傳圖等,給這些設計需求確定好優先級

          -結構層

          • 信息架構:進一步細化已列出的設計方案,輸出文檔或者設計規范,比如《品牌手冊》《食品包裝標準》等

          • 交互流程:進一步的用戶畫像與分析,收集市場同類型品牌調性,通過試用的方式整理出餅干的分類屬性,如口味、分量、包裝材質等

          -框架層

          • 從這里可以開始整體的、低保真的設計了,可以出一些比較具體的設計方案,目的是快速跟需求方進行評審,為后續的視覺設計作準備

          -表現層

          • 經過前面反復的溝通與評審,開始高保真的視覺設計,從產品包裝到廣告圖到物料,這里就是設計師們展示商品顏值,提升其商業價值的時刻到了

          • 最終產品上市



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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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