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

          首頁

          產品體驗思考

          ui設計分享達人

          一、好的收藏體驗該怎么做?

          用戶喜歡在網上收藏各種東西,把收藏到的東西占為己有,滿足自我的占有欲,每個用戶都為此而樂此不疲。

          很多互聯網產品在用戶點擊收藏后,讓用戶去選擇收藏夾。其實用戶并不喜歡去選擇,他們只想簡單的把自己喜歡的東西收藏下來。



          選擇本身并不是一件很容易的事情,尤其是對于那些有選擇困難癥的人來說。實際上,我每次都是選默認那個。

          這并不是一個好的用戶體驗。


          微信收藏潤物細無聲

          當然也有一些做的很好的體驗,比如微信的收藏,收藏后會出現一個“收藏成功”的非模態反饋。

          同時可以添加標簽,但這個并非強制,為了滿足那些有這種需求的用戶。添加標簽的目的是為了方便用戶在日后的檢索。



          在收藏列表,微信會根據收藏的內容自動分成鏈接、文件、圖片和視頻等,最近使用位于第一位。

          也就是說并不需要用戶去創建自定義分類。


          你也可以搜索標簽來找到之前收藏的內容。通過這些方式基本上滿足了大部分用戶的需求。



          拼趣(pinterest)智能識別收藏夾

          網站會根據你采集的圖片在極短的時間內,自動識別出圖片對應的收藏夾類型??梢灾苯硬杉綄奈募A。

          然而經過測試,經常會出現誤差。因為圖片的分類其實很復雜的,屬于高度自定義,很顯然,智能識別并不是一個好的解決方案。



          花瓣的快速采集

          花瓣是一個設計師收集靈感的網站,該網站常見的用戶使用場景是,設計師在瀏覽素材時,會大量采集自己感興趣的素材,但每次都要選擇文件夾,非常繁瑣且低效。

          后來花瓣網加入了快速采集的功能,其邏輯是網站會默認選擇上一次采集的收藏夾,這大大提高了用戶采集圖片的效率。

          而如果你需要選擇其他文件夾則可點擊普通采集。這兩種采集方式滿足了設計師的不同需求。


          二、互動信息的隱私保護

          社區類產品有各種點贊,收藏等互動信息,但用戶又不想被別人知道這些信息。

          因此,在規劃產品時需要考慮到用戶互動隱私的保護,這是用戶側的剛性需求。


          私密的點贊列表

          抖音個人主頁的點贊列表,我記得剛開始是公開的,且不能設置為私密。

          用戶點贊的視頻會出現在這里,卻少有人希望這些信息被別人看到,總有些點贊視頻你并不想被別人看到。

          如果點贊列表可見,那么用戶在點贊的時候就會有所顧慮,這不利于平臺的互動率。


          特別是隨著抖音上熟人也越來越多,強關系社交場景在漸漸加強。


          抖音后來也發現了這個問題,把它設計成了默認隱藏。(當然可以自己設置為公開,但只有極少數用戶會這樣做。)



          由于點贊是私密的,用戶可以隨心所欲的點贊自己喜歡的視頻,毫無社交壓力。


          這是為何?

          源于人性心理學:窺私欲。人人都喜歡窺視別人的隱私,而不喜歡自己的隱私被窺視。

          不然為何如今的QQ空間基本上都設置了權限,畢竟,誰想被別人窺視當年那個煞筆的自己呢?


          公眾號“在看”和視頻號“私密贊”的邏輯

          現在訂閱號打開率越來越低,朋友圈分享曾是訂閱號流量來源的一大入口。

          朋友圈早已淪為了一個人設打造的陣地,現在的人發圈越來越謹慎。

          用戶似乎越來越不愿意在朋友圈分享文章了,除非是有利于自己人設打造的內容。

          為了減輕用戶的這種社交壓力,微信推出了“在看”的功能。


          用戶點了“在看”后,此文章會出現在看一看這個模塊,且七天前的分享將不可見,這就相當于一個弱化版的分享功能。



          這將大大減輕用戶分享的社交壓力。對于公眾號主來說,相當于增加了一個流量入口,激發他們創作更多的內容。


          視頻號點贊也是同理,會被朋友看到,導致用戶在點贊的時候就會有所顧慮。


          他會考慮,我點贊了這個視頻,我老師、上司、父母、親戚、朋友會不會看到?他們會怎么想?


          但他在抖音上點贊是沒有這么多顧慮的,單純的喜歡就行。


          第一,抖音是弱關系平臺;

          第二,抖音上的點贊默認是私密的。


          因此,微信才推出了私密贊的功能,需要長按才能觸發。

          這并是一個優雅的解決方案,一是操作成本有點高,二是用戶存在較高的學習成本。



          微信作為一個強關系社交場景,這正是微信與抖音不一樣的地方。

          以上兩者的目的都是一致的,那就是為了減輕用戶的社交壓力。


          三、確定按鈕放左邊還是右邊?

          同時用過mac OS和windows系統的用戶不知是否發現,這兩個操作系統的彈窗按鈕“確定”和“取消”的位置是不一樣的?



          mac的彈窗按鈕確定在右,取消在左;而windows的剛好反過來,確定在左,取消在右。


          為什么會有這樣的差異?哪一種更加合理?


          模態反饋定義

          在交互設計中,這種彈窗叫做模態反饋,艾倫·庫珀在《About Face 4》中提到:模態模式一種臨時模式,它通過遮罩將用戶當前看到的內容和之前看到的內容區分開來,界面中只有 popup(彈出層)組件具有可交互行為,需要用戶操作才能退出該模式。模態的優勢在于讓用戶專注于完成某個任務而不被干擾。


          哪個優先級更高

          首先我們要明白這兩個按鈕哪個使用率更高,一般來說,“確定”的點擊率要遠遠高于“取消”。這是因為大多數用戶對于自己的操作行為是明確的。


          所以這兩個按鈕在視覺上一定要做出差異化,“確定”的視覺層級要高于“取消”,這樣用戶才會一目了然,不會感到困惑。


          兩者背后的邏輯差異

          回到剛才的問題,逆向思考這兩者背后的邏輯差異。


          windows彈窗的背后邏輯:

          人的閱讀習慣是從左到右,所以把點擊率更高的按鈕放在左邊更加符合人的正常閱讀習慣。


          mac彈窗的背后邏輯:

          根據一般的任務的流程,“取消”在左代表返回上一步操作,而“確定”在右代表進入下一步任務流程。


          看上去似乎都有道理,這兩種交互方式本身沒有絕對的對與錯。只要在整個系統中保持一致性,讓用戶形成操作習慣就沒有啥問題。


          從個人的使用習慣而言,個人更傾向于mac的這種方式。



          四、手機的實體鍵怎么放才合理?

          手機上的實體按鍵電源鍵和音量鍵通常有兩種分布方式,放在左右兩側或都放在右側,前者以iPhone為代表,后者以安卓手機為代表。



          這兩種方式有什么區別?哪種方式更加合理?電源鍵和音量鍵屬于完全不同類型的兩種按鍵,且都是高頻使用,它們的功能自然不用贅述。


          用戶場景

          我們先來看看都放在右側會有什么問題,以下使用場景相信用戶不會陌生:


          用戶a,在地鐵上玩王者,聲音有點大,想把聲音調小,結果不小心按到了電源鍵,導致手機息屏,而此刻你正在激烈的團戰,內心有一萬只“草尼瑪”奔騰而過……


          用戶b,每次按電源鍵(解鎖或鎖屏)都會不小心同時按到音量鍵,結果直接就截圖了!這種情況發生了不止一次,因為這兩個按鍵離的太近了……


          用戶c,自家的小米11,電源鍵位于中間位置,右手拿時大拇指會觸碰到,左手拿時中指剛好會觸碰到,而電源鍵又有指紋鎖功能,導致手機在不斷的解鎖,而你毫無察覺……


          通過上面的案例,可以得出結論:若按鍵都放在右側,會導致用戶經常誤觸而造成不必要的麻煩。


          放在兩側就不會有這樣的問題??梢杂行Х乐拐`觸,尤其是盲按,不用擔心按錯,減少誤操作的幾率。


          電源鍵并非一開始位于右側

          值得一提的是,iPhone手機的電源鍵一開始是位于頂部位置,這是為何?



          因為剛開始時手機都是小屏幕(3.5~4寸左右),對于iPhone5S及以前的手機來說,單手操控,拇指Home,食指電源,剛剛好。


          所以電源鍵放在頂部既按得到又可以減少誤操作。


          后來隨著手機大屏的趨勢(4.7寸以上),這個時候單手已經不方便按到頂端了,從6代開始就把電源鍵放在右側了。


          但無論是哪種方式, 兩個按鍵都是分開放。


          按鍵不在中間的原因

          還有一個小細節,iPhone的實體鍵不是在右側正中間,而是在靠上的位置。



          iPhone設計理念是單手持握,并且大多數人右手握手機,大拇指經常會碰到右側邊框,若果放中間,這樣會造成誤觸音量鍵和靜音鍵。


          其實上面的案例3就已經說明了按鍵放在中間的弊端。


          我想起了當年的錘子T1,左右按鍵一樣大且位于兩側的中間,這是典型的為了追求完美的對稱而向用戶體驗妥協。

          iPhone從初代開始就已經建立了自己的設計理念,不管是工業設計還是界面設計,并沿用至今。



          五、iPhone靜音鍵有存在的必要么?

          從初代開始,iPhone機身左側音量鍵上方就有一個靜音鍵。

          這些年來,iPhone一直在減少各種實體按鍵以及外部接口,比如3.5mm耳機孔、home鍵。

          但直到如今這個靜音鍵卻一直保留下來,為何iPhone對于這個按鍵情有獨鐘?



          靜音鍵開啟后,任何來電或通知都是無聲的,震動也會消失。

          在無需點亮屏幕的情況下實現一鍵靜音,方便快捷,深受用戶的青睞。


          哪些場景用戶會開啟呢?

          根據自身的使用習慣以及用戶研究,無非以下幾種使用場景,比如看電影、開會、上課等:


          1.進電影院看電影前,我一般都會撥一下,避免在看電影的過程中被來電鈴聲打擾,影響了自己和別人觀影。

          2.開會的時候也會撥一下,以防在開會的時候突然被來電鈴聲所打擾,避免不必要的尷尬。

          3.學生黨在上課前一般也會開啟,這樣整節課都不怕打電話進來了。


          總之,就是不希望自己的手機鈴聲打擾到自己和別人,帶來不必要的麻煩。


          如果是虛擬靜音鍵,需要先解鎖手機,對著手機屏幕一頓操作。

          而實體鍵不需要這么麻煩,可以盲操作,放在褲兜里都不影響操作。


          安卓手機為何沒有實體靜音鍵?

          這個按鍵這么重要,卻很少看到安卓手機上有(除了一加基本上沒有)。

          實體靜音鍵并非蘋果首創,之前的Palm、Blackberry(黑莓)早已有這樣的設計。


          可能的原因是安卓控制中心很早有靜音按鈕,甚至有些定制系統還可以把靜音按鈕直接放在桌面上,設置靜音非常方便,也就沒必要再多加一個實體鍵了,顯得多余又徒增成本。


          一加三段式按鍵

          上面提到過的,作為安卓陣營唯一的靜音鍵,一加手機引以為傲的三段式按鍵,該設計可以通過物理鍵直接實現在靜音、免打擾與正常模式當中快速切換。



          但個人認為這個設定復雜了,三種模式遠比兩種模式復雜。用戶并不一定能搞明白,有一定的學習成本。


          iPhone設計靜音實體鍵的初衷

          在早期,iPhone的控制中心并沒有靜音按鈕,想要設置個靜音并不是一件容易的事情,而這個功能又是必須的,蘋果索性直接做了一個實體物理鍵。


          這樣靜音的時候只需要把靜音鍵撥過來就可以了,一步到位,使用體驗也很好,所以一直保留至今。


          雖然現在iPhone的控制中心已經加入了勿擾模式,但考慮到老用戶的使用習慣,以及品牌調性,蘋果對于這個實體按鍵的去掉還是顯得很謹慎。


          考慮到之后iPhone在防水、機身內部空間的改進,不排除蘋果終有一天會取消iPhone上這個靜音鍵。


          靜音鍵的缺點

          靜音鍵雖好,但也并非沒有缺點。用戶有時候會無意中觸發這個按鍵而不自知,或者開啟后忘記關閉,導致錯過了一些重要的電話。


          靜音并非絕對

          雖然開啟了靜音鍵,但并不是絕對的靜音。如果是鬧鐘,鈴聲還是會響起,因為鬧鐘的優先級要遠高于靜音模式。

          蘋果這是考慮到了如果有用戶不小心觸發了靜音鍵,或者開啟后忘記了關閉,害怕用戶耽誤了重要事情。

          這就很好的解釋了為何明明開啟了靜音模式,卻還可以調解音量大小的原因所在。細微之處方見真功夫。



          六、經典的旋鈕式交互

          在日常生活中,旋鈕是個很常見的東西,比如音箱,微波爐,收音機,老式電視,車載旋鈕……

          在機械產品上,旋鈕凸起的把手和它下面的圓盤刻度,是最明顯不過的旋轉暗示,符合人的自然感知。



          旋鈕式交互是個人非常偏愛的一種交互方式,我認為這種交互跟iPhone的home鍵一樣經典,主要原因有三:

          1.操作簡單

          旋鈕操作簡單,看到這種按鈕,一歲小孩子都會忍不住用手去抓。對于用戶來說,幾乎不需要學習成本。

          2.盡在掌控

          在旋轉的過程中,可調大調小,一切盡在用戶的掌控之中,用戶感覺到有十分的安全感。

          3.即時反饋

          在調節的過程中,調大調小都能立刻收到即時的反饋,這是用戶最喜歡的交互方式。


          我們在觸摸屏上很少看到這種旋鈕式交互,因為這種交互是要建立在抓住旋鈕實物的感受。

          而觸控屏是個二維的世界,沒有真實抓握的手感,無法還原出三維世界的真實手感。


          汽車上最常見的旋鈕就要數音量和空調了。然而自從特斯拉在車上推廣大屏幕后,越來越多的國內廠家開始盲目跟風,把絕大部分的功能按鈕集成到屏幕中,比如空調,不僅不方便,行車中使用還容易造成危險駕駛。



          車上的觸控體驗跟手機上是完全是兩碼事,使用場景也完全不同。最大的區別在于后者沒有安全問題。

          都知道開車不玩手機,可是行車時操作中控屏跟玩手機有什么兩樣?


          車載旋鈕有什么優勢?

          1.駕駛更加安全

          對于駕駛員來說更加安全,通過旋鈕調節空調,熟悉后完全可以實現盲操,邊開車邊操作毫無壓力。

          如果是觸控屏,你必須看著屏幕,一頓操作猛如虎,而在開車過程中眼睛哪怕離開前方一秒鐘就意味著危險。

          而安全是汽車駕駛的重中之重。

          2.更加真實的反饋

          用戶的操作有真實的物理反饋,旋鈕阻尼。

          屏幕上虛擬按鍵反饋根本無法與實體旋鈕相提并論。

          3.更加穩定的機械結構

          軟件系統用久了會變卡,可能會死機,難免會有bug。而這些不穩定因素將成為汽車駕駛的潛在危險因素。

          一旦屏幕失靈,或者系統死機了,那所有按鍵都失效了。

          雖然特斯拉為了提升其車載系統的穩定性下了很大功夫,但是問題從來都沒有停止過。

          但是硬件基本上很少會出問題,物理旋鈕才讓人100%放心。



          無論廠家如何吹噓,虛擬屏幕按鍵在大多數情況下都不會比實體按鍵有更好的使用體驗。

          因此,有一些實體鍵出于安全駕駛的考慮還是應該保留,將各種功能按鈕都集成在屏幕里并不見得是一個明智的選擇。盲目的把實體按鍵變為觸摸按鍵存在安全隱患。
          文章來源:站酷   作者:CdzhcHappy

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


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

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

          產品用戶體驗案例分析

          純純

          目錄


          1.百度網盤 :會員標識

          2.當當:搜索記錄隱藏

          3.當當:分享動效 ? 一鍵制作朋友圈分享海報

          4.抖音:點擊復制 ID

          5.飛書:效率工作—語言自動轉化

          6.美團:優惠卷新到提示

          7.墨跡天氣:一鍵登錄(大部分應用已上線該功能,部分應用仍未上線)

          8.起點讀書:長按可進行互動

          9.騰訊視頻:亮度調節的動效設計

          10.微博:點贊動效設計

          11.知乎:刪除搜索記錄

          12. QQ:可隱藏會話

          13. QQ 音樂:搜索入口的聽歌識曲

          14. QQ 閱讀:長按復制的放大設計


          一、百度網盤:會員標識別


          在開通會員后百度網盤會進行對于應用圖標的更換,使得應用圖標更加高級,在分享鏈接時也會加入會員分享的標識。


          屬于用戶激勵體系中的一個板塊,增強用戶的標識和身份。




          二、當當搜索記錄隱藏


          搜索隱藏功能設定。


          我們在使用各大應該的搜索功能時總會遇到過這樣的場景,當你要某人或者在某種場景下需要進行搜索時,來不及刪除自己的搜索記錄出現社死的情況。


          而當當的搜索隱藏就可以完美的解決這個問題,退一步講我們可以思考一下為什么別的成熟型應用,沒有采用這樣的方式。大部分是沒有這個功能,其余則是在搜索這一個功能上已經添加了其余用戶體驗的設計。所以在這一塊就沒法加入這個設計。




          三、當當:分享動效 ? 一鍵制作朋友圈分享海報


          在當當應用中點擊分享進入頁面后不同于傳統的分享頁面,而是把分享到微信和分享到朋友圈進行了動態設計。并且在分享到朋友圈的右上角加上了海報的標識。我們點擊會自動跳轉生成海報。


          這樣的設計可以更加吸引用戶的眼球并且自動生成海報可以激發用戶在朋友圈轉發的次數。



          動效展示



          四、抖音:點擊復制 ID


          主頁 ID 點擊可進行復制  很多應用都有 ID 。但是當我們要進行 ID 搜索的時候,我們便需要一遍一遍的反復查看或者記住這個 ID 然后再進行搜索。


          目前部分的應用也上線了類似的功能,讓用戶點擊 ID 區域可進行復制。對于用戶體驗的提升有著很顯著的效果。




          五、飛書:效率工作語言自動轉化


          飛書屬于一款協同辦公類的應用


          在飛書的設置用有語音直接轉換文字的說明,飛書本身便是一款協同辦公類的產品。此產品效率便是產品關鍵詞之一,所以加入這樣的設置可極大的提升用戶的體驗。




          六、美團:優惠卷新到提示


          有提示用戶新到多少張優惠卷的提示


          可以促進用戶消費的同時能幫助和提醒用戶去使用消費卷不僅提高了商家的銷量還使得用戶在消費中發現自己的優惠卷及時使用




          七、墨跡天氣:一鍵登錄(大部分應用已上線該功能,部分應用仍然未上線)


          一鍵登錄


          應用登陸中目前主流為(1.第三方登錄,登陸之后需要再次綁定手機號。2.手機號注冊登陸,登陸之后可選擇是否綁定第三方。3.一鍵登錄,登陸之后可以選擇是否綁定第三方)在設計流程中,設計開發者需要盡可能的減少對流程的復雜化。


          一鍵登錄在為看來是最喜歡的一種登陸方式。導致現在如果需要各種注冊綁定,除非必要的情況下,我會直接放棄這款應用。





          八、起點讀書:長按可以進行互動


          長按頁面可以框選當前的段落,并且出現互動選項。

           

          增加用戶和用戶之間,用戶和作者之間的互動。使得用戶在讀書的同時有著較強的參與感。




          九、騰訊視頻:亮度調節的動效設計


          滑動可調節亮度

           

          左邊的小動效的設計加上右邊的漸變進度條,使用戶可以更加明確的知道自己所處于一個什么樣的觀看環境,并且加入了漸隱漸現的出場和入場。

           

          用一個小巧的動效設計幫助用戶確定自己的亮度屬性,




          動效展示




          十、微博:點贊動效設計


          點擊點贊會出現彩色的波浪并且不斷擴散的同時有小表情彈出。


          增加趣味性和互動性。




          動效展示




          十一、知乎:刪除搜索記錄


          清空時會在進行確認,再次點擊全部刪除方可刪除。


          在下方列表中可逐一刪除,上面清空中不是點擊后就全部清空。而是再次出現,起強調和確認的作用。


          增加用戶體驗,幫助用戶進行二次確認和防止用戶誤觸。作為一款咨訊類應用用戶的搜索記錄也是比較重要的。




          十二、QQ:可隱藏會話


          前幾天發現的一個神級功能(雖然我已經不用 QQ 進行社交了),當時我外甥和我講述了這個功能他么00后戲稱為養魚神器。


          在好友的設置中可隱藏會話,開啟隱藏會話以后。此聯系人發來的消息不會顯示在聯系人列表。需要自己手動去設置隱藏會話列表去尋找。


          應用的功能更加多樣化滿足多種不同的需求。




          十三、QQ 音樂:搜索入口的聽歌識曲


          在搜索入口加入了聽歌識曲且進入界面后可進行聽歌識曲和哼唱識別的切換


          搜索歌曲界面的使用場景為:1.用戶得知該歌曲的名稱或者歌詞進行搜索。2.用戶聽到了某一首很好聽的歌曲想進行搜索。此時在場景二的情況下,正好可以進行聽歌識曲。聽歌識曲此功能在比較舊的版本屬于主頁中的一個模塊,把聽歌識曲放到搜索入口處更加符合用戶場景。


          對用戶場景進行細致的研究,增加了用戶體驗。




          十四、QQ 閱讀:長按復制的放大設計


          長按復制會有放大鏡設計


          當用戶處于復制文案的場景下時,由于復制需要拖動,在拖動的過程中會按壓住自己所處于的復制內容位置。所以在用戶進行復制時加入放大鏡的設計會使得用戶清楚的明白自己復制到哪里,不需要后續用戶在進行刪減。


          極大的加強了此場景下的用戶體驗


          動效展示


          文章來源:站酷    作者:張陽光Designer

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

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

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


          交互設計之探索GUI和VUI

          純純

          一、GUI和VUI的定義:


          1.1GUI


          GUI(Graphical UserInterface)圖形界面,市面上最常見的交互方式。點觸,滑動,作為主要輸入方式。圖像顯示作為主要輸出方式。




          1.2VUI


          VUI(Voice User Interface)語音界面,常見沒有屏幕的智能音箱/耳機,靠語言輸入和交流,如我們常見的小艾同學,天貓精靈等。





          二、GUI和VUI的發展歷程:


          2.1GUI的發展歷程


          1973年第一個可視化操作的Alto電腦在施樂帕洛阿爾托研究中心(Xerox PARC)完成。Alto是第一個把計算機所有元素結合到一起的圖形界面操作系統。它使用3鍵鼠標、位運算顯示器、圖形窗口、以太網絡連接。

          1981年施樂公司推出了Alto的繼承者Star,Alto曾首次使用了窗口設計。

          1983年蘋果電腦公司推出Apple Lisa個人電腦,是全球第一款搭載圖形用戶界面(GUI)的個人電腦。

          1984年蘋果電腦公司推出Macintosh。

          1986年首款用于Unix的窗口系統X Window System發布。

          1988年IBM發布OS/2 1.10標準版演示管理器(Presentation Manager),這是第一種支持Intel計算機的穩定的圖形界面。

          1992年微軟公司發布Windows 3.1,增加了多媒體支持。

          1995年微軟的Windows 95發布,其窗口操作系統的外觀基本定型。

          1996年微軟發布Microsoft Bob,此軟件具有動畫助手和有趣的圖片。

          1996年IBM發布OS/2 Warp 4,它的交互界面得到顯著改善,至今仍有不少ATM機運行這樣的系統。

          1997年KDE和GNOME兩大開源桌面項目啟動。

          1997年蘋果電腦公司發布Mac OS 8,這個系統具有三維外觀并提供了SpringLoaded Folder功能。

          2000年蘋果電腦公司推出Mac OS X系統的默認外觀Aqua。

          2001年微軟發布Windows XP,實現了主題支持。

          2003年Mac OS X v10.3提供了一鍵單擊訪問任何已打開窗口的功能。

          2003年Sun公司的Java桌面系統為GNOME桌面添加了和Mac類似的效果。

          2006年微軟發布Windows Vista,對此前其視窗操作系統的外觀作了較大的修改,實現了Aero功能。



          2.2VUI的發展歷程


          20世紀90年代,誕生了第一個可行的、非特定的(每個人都可以對他說話)的語音識別系統,交互式語音應答(Interactive Voice Response,IVR)系統的出現代表了VUI的第一個重要時期。人通過電話線路進行交互并執行任務,如機票預訂、銀行轉帳、業務查詢等。


          目前很多像siri、Google這類集成了視覺和語音信息的APP,以及Amazon Echo這類純語音的設計產品,逐步發展并成為主流。隨著語音識別技術、AI技術、互聯網技術的發展,我們已經可以在手機設備中用語音處理很多事情,但還有很多事情目前無法通過語音完成,需要我們探索。




          三、GUI和VUI的設計要領:


          3.1GUI



                  交互的多樣性:


          不同于PC機通過鼠標來點擊,在觸控設備上通過手指點按,由于手指的精確度相對于鼠標指針差很多,所以子啊移動頁面設計當中的交互元素一定得辨識作用,手機并沒有懸停操作所以圖標如果特征不明顯時一定要加文字識別,設計時也應注意圖標和菜單元素的尺寸。


          拖拽和移動是很相似的交互工作,被拖拽的元素始終跟隨著緊貼屏幕的指尖


          除了使用單指之外,還可以用兩個手指放大,縮小圖片,如果設計了一些新的多指交互一定要給用戶提示和指導。


          3.2VUI


          3.3VUI的適用場景


          智能家居

          在智能家居領域VUI應用越來越廣泛,相信在不久的將來我們一定能夠享受到更多的VUI所帶給我們的便利。


          輔助駕駛

          車載語音交互系統使得我們可以在開車的同時接聽電話、聽廣播等。


          企業應用

          未來大型企業中將會多領域應用VUI,用于書寫、記錄等工作。


          醫療教育

          智能記錄病例、管理病例的出入。


          四、VUI的語言設計注意事項


          過多的聲音干擾,不但會增加用戶的心智負擔,將會引起用戶感到厭煩,尤其是,語音在資訊的負荷量上又比單純的聲音來的更多,考量是否存在存在的必要性就放在格外重要。而言,可以尋找替代的方式,透過震動和燈光甚至狀態變化來提示,減少使用者的認知負荷,并確保聲音只會在特定的時間點出現,并提供使用者自行設定關閉聲音的功能


          除了聲音本身的設計外,還要考慮整體環境的影響因素,可能周遭受非常的吵雜。換句話說,在KTV的包廂,吵雜的環境,會使用者無法聽到消防警鈴響,而容易造成危險事件的產生。也因為如此,消防警鈴的聲音頻率設計就應該介于2kM到4kM,因為研究指出人類的耳朵對于這個范圍的聲音最敏感


          從音量的角度來看,耳朵對不同頻率的音量有不同的感知程度,有些聲音聽起來很響亮,有些則是很沉悶因人而異,但比較客觀的量化體驗指標就是分貝(decibel,dB) ,在尺度上超過70分貝以上,會讓人產生憂慮不安,并引發各種癥狀,因此要盡量避免尺寸大小過大的設計, ,,降低主動的侵入性?;谶@些因素總和來說,還要考量到用戶和產品間的距離,與產品愈近,對于體積的需求量較大,反之為然


          在聲音體驗設計(Amber Case,2018)一書指出,當警告或提示音出現的頻率愈高,就應該設計成愈短,但不足就是,如果把聲音設計成短而急促,從而使用者需要集中相反地,事件發生時間間隔長且久,則聲音提示更需要明顯且激烈的聲音來提醒用戶,例如手機鈴聲響時,需要告知用戶

          文章來源:站酷    作者:張陽光Designer

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

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

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

          交互設計九大定律

          純純


          先舉個例子來理解一下:我要點擊手機上的確認按鈕所需要的時間,和 手與按鈕的距離(D)   按鈕的大?。⊿)有關。  當距離越長,所需要的時間越長。當按鈕越大,所需要的時間越短。

          undefined


          自我理解:我們將日常看到的界面元素進行去色彩和去信息化,把這些控件/元素等都變成灰色色塊,其實也就變成了最簡單的原型圖。這些灰色色塊拋開了視覺上的屬性,其實有兩大最基本的屬性,即色塊的位置和大小。  菲茲定律告訴我們,要通過控制色塊或者說界面元素的    大小和位置(絕對距離和相對距離)   來進行界面布局,進而控制交互時間,達到我們設計或者業務層面的目的。

               

          a  合理的自身大小

          這里是說合理的大小。一般來講越大用戶越容易到達,但是屏幕的大小是一定的,某一按鈕/目標越大就會降低其他按鈕/目標的大小。所以大小是相對制衡的,要根據具體情景和需求制定合理的大?。òㄈ庋鄞笮『蛯嶋H熱區大?。?。但是關于手指點擊的最小熱區有規定是44x44px,一般的圖形的熱區大小都要高于這個大小,才能便于點擊。其他大小要根據功能需求進行制定。

          undefinedundefined


          b 控制合理的相對距離

          相對距離指的是界面內部各個元素與控件之間的距離。一般通過研究 整個流程 的交互動作,相互關聯的操作元素/操作手勢 距離會相對比較近,這樣能有效減少操作的時間。

          undefined

          undefined



          c 特殊的絕對位置:屏幕邊界

          屏幕邊界是可以確定的(鼠標向某一方向一直移動終會停留在屏幕邊界),但是屏幕中央確是較難確定的(四個方向鼠標均能延展出去)。一些重要和主要的操作放在屏幕的邊界,可以方便用戶快速到達,也是菲茨定律的普遍應用。

          undefinedundefined



          d  反向設計:增加時間來達成業務目標

          業務目標有時候是與用戶目的是相違背的,也需要根據具體場景來判斷菲茨定律的使用走向。在特殊情境下也會通過距離和自身大小來反向增加使用時間來完成目的。

          undefined

          undefinedundefined


          自我理解:席克定律也在研究交互時間。我們需要通過控制席克定律所總結的兩大因素:數目和復雜程度 進而去左右界面布局的形式,從而縮短交互時間,達成良好的體驗。


          a 精簡選擇的余地

          選擇增加也就意味著事情可以發展的方向更加多元化,用戶就需要權衡事情該往哪個方向發展,而這就需要時間。不要讓你的用戶思考太多,所以一般給出的選項在滿足需求的情況下要盡可能的少。(這里注意:一般情況下要少但也不能太少,強迫用戶也是不可取。)

          undefined


          undefinedundefined


          b  減少事情的復雜程度

          事情越復雜,越難處理。盡可能的將復雜的事件通過交互或者版式等手段進行簡化,讓用戶覺得容易把握,而不是大量事物/流程/元素的堆砌。

          undefined

          undefined

          undefined


          undefined


          undefined


          自我理解:米勒定律對人的記憶數目進行了定量的研究,即 5-9 個是人腦接受起來比較合適的,多了就容易混亂。


          a 控制選項的數量

          同一類型或者同一層級的元素出現,數目一般控制在5-9個。

          undefined


          b 將多信息進行分段處理,便于理解記憶

          面對有大量信息的時候(數字/文字/段落)將其分割到5-9個等大腦容易記住的數量。

          undefined

          undefined


          c 順應時代的取舍

          看到了有一些設計并沒有按照米勒定律去執行,因為隨著時代的發展,有一些定律并不是萬能適用的。定律不可照搬,要根據具體情境去做取舍,以最終效果為導向。

          undefined


          undefined


          自我理解:和四大基本原則的親密性原則類似,即在界面布局的時候性質相同的事物要相接近,不相同的要遠離,這樣更符合人們的既定認知。


          a 將相近的功能的分為一組

          在面臨很多復雜功能時,簡單的堆砌顯得啰嗦,需求又不能隨意刪減。這時候就可以將相類似的功能放在同一個組別里面進行收納整理,這與席克定律也相接近。

          undefined


          b 按照事物性質和關聯程度嚴格把握布局的間距

          這里與視覺設計也有很多重疊,即落實到頁面的高保真的細節。保證內容想接近的元素間距要小,內容有區分的間距要大。

          undefined

          undefined

          undefined


          自我理解:任何事物都有其復雜性,不可避免。某些事物一旦失去其復雜性,其作用本質就可能失去效果。不要抱怨某些流程和工作,他們的復雜性是其發揮作用所必然帶來的。所以才需要你來優化和簡化。

          a 把復雜性降到最低點

          事物的復雜性是固定,但是要思考你所面對的是最簡程度的復雜性么。首先優化內部系統的整個流程和不必要的步驟能夠有效降低系統本身的復雜性。

          undefined


          b 把復雜性進行轉移 組合 隱藏

          再把復雜性降低到最低程度之后,事物/流程仍然表現出一定復雜性時。就要考慮造成復雜的元素是什么,是否要將造成復雜的元素進行收納組合,甚至隱藏。

          undefined

          undefined


          自我理解:在相同前提下我們選擇最簡單有效的。單純的炫技是可恥的。


          a 給用戶清晰的引導

          想清楚這張界面的主要目的是什么,順著這個目標去引導用戶,其他元素的視覺層級要讓步,來讓用戶抓住重點。


          b 少即是多

          少代表流程/步驟/界面元素的減少,多意味著用戶量的增加 體驗感的增強。

          undefined


          c 衡量產品功能的取舍

          產品在功能迭代改版上,會出現大量不同的聲音和方向。但功能不是越多越好,用戶的時間是確定的,在某一功能上消耗的時間長,在其他功能上就短了。奧卡姆剃刀就要求我們找到主功能點,其他功能點要做出讓步妥協甚至砍掉。



          自我理解:關于防錯定律和我的上一篇文章入門(一)的放錯和容錯原則基本近似,只是分類的更細致一些,分解到了操作的前中后階段來防止錯誤。上一篇有更多解釋。


          a  操作前  禁止操作或者預告結果

          有一些功能在你操作之前就禁止操作,避免了錯誤的發生。或者通過告知操作之后會產生的不良后果

          undefined


          b 操作中 提醒用戶

          在操作過程中,進行錯誤提醒,有效避免錯誤的進行


          c 操作后給用戶彌補錯誤的機會

          用戶在使用app的過程進入錯誤的路線,需要給用戶彌補的機會




          自我理解:這一點主要體現在產品設計上,通過對未完成任務的提醒,來去博得用戶的注意力,進而達到商業目的。


          a 倒計時/讀條等交互反饋

          倒計時會給人一種緊促感,逼迫用戶去注意,無形之中給用戶規定了任務,這個任務也就是咋們的業務目標。倒計時 讀條等交互方式也應該謹慎恰當使用,因為不是每一個任務場景都需要給用戶緊迫感。

          undefined


          b 定向反饋提醒

          這一點也是利用未完成任務的相關信息反饋達到讓用戶去完成任務的業務目的。

          undefined



          自我理解:在上一篇一致性原則里面講到了和競品保持一致/和迭代版本保持一致,其實是我拓展的。這一定律是明確指出了一致的根本原因。在產品設計的時候,用戶的心理就是我希望你的使用方式/操作和主流一致,超出預期的就會有人群不接受,就會有用戶流失。


          a 能不創新就不創新

          創新意味著改變,改變的不僅僅是你的界面還有用戶習慣和長久以來的認知模型。破壞習慣重建習慣是有很大風險的。

          undefined

          undefined


          其實能看到很多Dribble頁面很有特點,也不是完全沒有落地性,但是實際國內產品并沒有看到這樣的設計,原因就是不符合雅各布定律。


          b 好的的產品都是創新的 不同的

          這一點好像和上一點有點相悖。但是其實也不違背,有很多分寸的拿捏往往不是理論能完全決定的。微信后來居上絕不是因為照搬qq,如果新的創新帶來的優勢能夠彌補不相同所帶來的不足,也是可以嘗試的。

          undefined


          文章來源:站酷    作者:花城丶

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

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

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



          交互設計:如何做到驚喜?

          純純

          保持好奇,巧妙融合,追求卓越,自然而然

          一家之言,未必全面,甚至未必正確。歡迎交流探討。


          01
          交互設計的驚喜,是什么?

          之前的文章,有簡單定義過交互設計的“驚喜”,即為:超出用戶預期,并讓用戶開心。

          具體而言有兩類,分別是:小驚喜、大驚喜。

          1 小驚喜

          所謂小驚喜,是指一些頗具趣味性或人文屬性的交互設計小細節。


          先說趣味性。常見的有兩類,第一類是比較好玩的動效,第二類是一些小功能。第二類有時也會包含第一類。

          動效這塊,大家比較熟悉的,有 iPhone 上刪除應用前圖標的抖動,仿佛是嚇的發抖,也可能是在搖頭求饒;還有移動端登錄 B 站、輸入密碼時,動畫人物的捂眼捂臉動作。

          (B 站登錄頁面)

          小功能這塊,也可以分成兩類。一類是隱藏的小功能,一類是有趣的小功能。


          很多隱藏功能,頭幾次用的時候,多少會有一些驚喜之感。

          比如在訂閱號消息列表頁,某個公眾號你已經幾個月沒看過,對它失去了興趣和信任。這時,嘗試長按這個公眾號的頭像或名稱,會呼出一個包含“刪除消息”和“取關”功能的彈窗。

          (訂閱號消息列表)

          還有些隱藏功能,既能讓用戶覺得驚喜和方便,又能引發用戶思考。這種思考,可能會讓用戶感嘆設計之妙,也可能也會給用戶一種猜對謎語的欣喜之感。

          比如用墨刀的時候,嘗試按數字鍵 1,會呼出“內置組件”這個使用頻率非常高的功能,會讓人覺得墨刀很聰明。

          如果再仔細看一下,會發現,“內置組件”的縮略圖標,和其他 4 個諸如“我的組件”、“圖標”等功能的縮略圖標,并成一列。這 5 個縮略圖標的排列順序(上到下),和它們快捷鍵("、"鍵和數字鍵1、2、3、4)的排列順序(左到右),是完全一致的。不得不說,這是一個簡單又巧妙的設計。


          再比如朋友圈里,某個不熟的好友每天都發集贊的小廣告,搞的我們不勝其煩。長按其頭像,會呼出設置權限(屏蔽等)的功能。

          有意思的是,長按好友名字,則不會呼出這個功能。要知道點擊頭像或名字是都能進入好友主頁的;另外剛才那個例子,長按公眾號頭像或名字,也都能呼出取關的彈窗。

          個人的理解,生活中,我們用力長按一個人,通常是表達強烈不滿,比如打架時。比起長按名字,長按頭像更像是長按真人,所以也更能表達我們的不滿。


          說完隱藏的小功能,再說下有趣的小功能。比如微信聊天里的扔骰子、石頭剪刀布,微信給朋友發生日快樂后漫天飄落的蛋糕,拍照軟件里的貼紙,等等。

          最后說下帶有人文屬性的交互設計小細節。常見的有如下類型:幫助弱勢、關照情緒、表達情感、保護隱私。


          幫助弱勢這塊,比如 iPhone 的輔助功能,里面有針對視力障礙的放大鏡功能、有針對不識字群體的旁白功能。

          關照情緒這塊,很重要的一點,就是避免引起用戶的負面情緒。比如微信的刪好友是單方面刪除,被刪時我們很難察覺到,而且微信也不會通知我們。個人覺得,微信之所以不通知我們,其中一點,就是不給我們添堵。類似的還有,微信消息沒有“已讀”功能,這就大大減輕了接收者的回復壓力。

          表達情感這塊,比較為人所知的例子,5 月 20 號這天,微信紅包的限額,從 200 元升到了 520 元。還有一個例子,在微信聊天里發一個“ohh”,長按并點翻譯,結果也是一個驚喜。

          保護隱私這塊,比如借助 iPhone 的“引導式訪問”功能,可以讓小朋友只能訪問你的某個視頻應用來看動畫片。再比如別人用你電腦的時候,如果你不想讓對方看到你的微信,就可以通過手機微信來鎖定或退出電腦版微信。

          2 大驚喜

          所謂大驚喜,是指那些系統性大創新,并且能夠引領潮流、代表未來的交互設計。通常而言,這些大驚喜,最開始給用戶的感覺,就是酷。

          iPhone 就是典型例子之一 。

          2007 年的初代 iPhone,帶來了當時的大屏幕:3.5 寸屏幕,以及純觸摸屏,和極為靈敏的觸控體驗。

          2011 年,Siri 同 iPhone 4S 一起問世,為我們帶來了語音交互。如今,在 100 元就能買到品牌類智能音響的情況下,依靠語音交互的智能音響也在慢慢走入尋常百姓家。

          也許后喬布斯時代的 iPhone 創新不如以前,但不可否認的是,時至今日,iPhone 依然在引領潮流,在給我們大驚喜。比如這幾年流行的手機無線充電和以 AirPods 為代表的極簡的無線耳機。

          以上是比較廣為人知的交互設計,還有一些不太為人所知的設計。比如在家里網購一條床單,但是不知道床的尺寸,家里又沒有尺子。這時,打開 iPhone 里的測距儀這款 App,就可以量出床的尺寸,會不會覺得有點酷。

          (測距儀 App)

          微信在引領潮流方面也有一些建樹,比如極大的普及了二維碼和掃一掃。小程序作為一種體驗接近原生 App、同時又不用下載的產品,也正在引領新一輪的潮流。

          還有一個比較酷的功能,就是以圖搜圖。筆者最早用過百度和谷歌的相關功能,主要是在電腦上搜索相似的圖片,使用頻率極低。

          假設一個場景,比如在路上看到一個陌生人的外套很好看,但又不好意思上前問,就可以拿起手機,利用淘寶的拍立淘功能,拍張照就能馬上看到相同或相似的商品。

          如果淘寶上沒有搜到類似商品,還可以用微信的掃一掃識物。和拍立淘相比,區別之處有兩點。第一,不用拍,直接能識別,不過通常得等 1-3 秒;第二,識物結果里面,除了商品,可能還會有百科詞條和資訊。


          02
          交互設計:如何做到驚喜?

          個人覺得,有 4 個要點:既要有好奇心,又要有卓越心;既要天馬行空,又要保持自然。

          聽起來可能有點亂,且聽筆者一一道來。


          1 保持好奇心

          筆者觀察身邊讀小學的小孩,發現,當大人聊天時,特別是談正事時,小孩特別喜歡坐在旁邊聽,而且聽的很認真。小孩有時也會說兩句,或是問問題,或是發表自己的看法。

          看得出來,小孩對成年人的世界,懷有極大的好奇心。實際上,不止于成年人的世界,小孩對周遭世界都有比較強烈的好奇心。

          整體而言,成年人對周遭世界的好奇心,遠不如小孩。我們互聯網從業者也不例外。

          好奇心和交互設計,有什么關系?

          交互設計,某種程度上,也是一種創作。好的創作,一定來自生活。這就需要我們去觀察生活。

          觀察生活,非常重要的一點,就是好奇心,對周遭人、事、物要有足夠的好奇心。

          比如上文提到的例子,在 iPhone 上刪除應用前,應用圖標會抖。這種抖是一種趣味隱喻,既可以理解成嚇的發抖,也可以理解成搖頭求生。如果對生活沒有足夠的好奇心,是很難留意到這種生活細節,并把它們作為一種隱喻運用到交互設計中的。

          以上是關于好奇心,還有一種特質,也是在小孩身上表現突出,同時也和本文主題有關,那就是:童趣。

          還是上文的例子,在 B 站 App 上輸入登錄密碼時,動畫人物會捂眼睛。這個設計,可能不會打動所有用戶,但至少一部分用戶會覺得比較有趣。如果我們內心沒有一點童趣,可能也會覺得,這個設計,沒啥意思。

          玩是人的天性。對于比較好玩的交互設計,大部分人是比較容易產生共鳴的。實際上,據筆者觀察,我們大部分從業者是有童趣的。我們比較缺的,是好奇心。

          那么,怎樣判斷自己是否擁有足夠的好奇心,其標志是什么?

          個人觀點,有兩個標志。第一,是對與個人利益無關的生活小事的關注,遠多于對個人利益本身的關注。第二,觀察和思考,遠多于評價和自大;追本和溯源,遠多于偏見和傲慢。

          為什么會提到個人利益?

          因為,通常而言,個人利益,尤其是短期利益(比如少花時間設計和修改原型),往往會和用戶體驗存在一個此消彼長的關系。

          如果過于關注個人利益,不僅很難照顧到用戶體驗,甚至會傷害用戶體驗。至于給用戶帶來驚喜,就更無從談起了。

          回到現實當中。在時代洪流面前,好奇心的兩個標志,顯得很難,該如何實現?

          關鍵在于找到背后的源動力。這個源動力,在筆者看來,有兩點,分別是:求知若渴、淡泊寧靜。


          求知若渴,可以源源不斷的驅動我們去觀察、去思考萬事萬物的規律和聯系。

          淡泊寧靜,正如諸葛亮在《誡子書》中所說,“非淡泊無以明志,非寧靜無以致遠”。人的心力和精力終歸是有限的,如果我們沉迷名利、物欲、享樂,就難有興趣和精力去琢磨萬事萬物了。

          所以,只要找回自己童年的那種求知若渴,同時修身養性到淡泊寧靜,這份好奇心,就會回來。

          2 巧妙融合

          某種程度上,很多帶給我們驚喜的交互設計,都是一種巧妙融合。

          筆者把這種巧妙融合,初步分成了三類,分別是:簡單融合、直接融合、委婉融合。


          簡單融合,最常見的就是隱藏功能。把一個較為簡單的操作動作,比如長按、雙擊、下拉、左滑等,和一個合適的功能,融合在一起。用電腦時我們常說的快捷鍵,也屬于這一類。

          通常而言,操作對應什么功能,講究的是合適,并無固定章法束縛。比如在微信朋友圈,發表文字的功能可以靠長按(相機圖標)喚起,設置權限的功能也可以靠長按(好友頭像)喚起。所以,簡單融合這塊,可供我們發揮的空間很大。

          另外,簡單融合最常見的形式——隱藏功能,既實現了界面的簡潔,又帶來了一定驚喜。

          簡單融合,既簡單,又實用。建議大家充分開發這一塊。

          直接融合,是指將生活中的趣味性,直接搬到軟件中,搬到交互設計中。比如微信聊天中的扔骰子、石頭剪刀布,以及漂流瓶、抽獎等。

          這一類融合,有點像商場里的電玩城,雖然我們不會經常去玩,但確實比較好玩。

          委婉融合,是指用明喻或隱喻的手法,將生活中微不足道的一些細節,移植到交互設計中。

          這種移植,有時是直白的。比如 Mac 上打開應用時,其圖標會在 dock 欄里有規律的彈跳,這會讓我們聯想到皮球的彈跳。

          這種移植,有時是隱晦的。比如 iPhone 上刪除應用前,其圖標會抖。這種抖,是害怕還是求饒,任憑我們想象。

          這種移植,有時是無聲的。比如在朋友圈,要想呼出隱藏的設置權限功能,只能長按頭像,長按名字則不行。這個設計,不乏想象空間。如果不嘗試長按名字,則不會發現這個細節。

          委婉融合,有時會帶一些趣味性。更為重要的是,它能夠引發我們的思考和想象,所以是一種很出彩的融合。這種融合,也會賦予交互設計,一種禪的味道。

          整體而言,筆者非常推薦委婉融合。

          3 追求卓越

          如果目標是小驚喜,則保持好奇心、并做到巧妙融合,基本足矣。

          如果目標是大驚喜,則需要雄心壯志,需要舍我其誰,需要追求卓越。

          日常工作中,可能會有這樣的對話?!斑@個動效/功能,實現不了”。

          大驚喜里的幾個例子,比如初代 iPhone 的觸控體驗,iPhone 里的測距儀,微信的掃一掃識物。這種設計,意味著要修一條最好的長城,背后往往有很多技術難題要攻克,有很多臟活累活要做。

          如果團隊文化就是做出最優秀的交互設計,那么,“實現不了”這句話,估計就聽不到了。取而代之的,可能是:“還在研究中”,“下個大版本能上”。

          4 自然而然

          提到驚喜,還有一款值得研究和學習的產品,那就是錘子手機的 Smartisan OS。

          個人觀點,在小驚喜方面,Smartisan OS 頗有建樹。在大驚喜方面,Smartisan OS 也進行了一些值得學習的探索。

          先說小驚喜,比如華麗而細膩的桌面翻頁動畫,比如四指橫劃桌面可以切換桌面背景。還有一些貼心的小功能,比如靜音可以設置時間,比如方便的長截屏。

          (靜音可設置時間)

          (長截屏)

          再說大驚喜。2016 年 10 月發布的一步和大爆炸,是比較大比較系統的功能,在當時也很新。錘子公司也一直有宣傳這兩個功能。所以相對而言,這兩個功能是 Smartisan OS 的大驚喜。

          筆者的備用機是錘子手機,身邊也有朋友在用錘子手機。以一步為例,這個功能,筆者體驗過很多次。但平常很少用,身邊朋友的情況也類似。

          (一步)

          根據使用情況和主觀感受,個人覺得,一步這個大驚喜,還存在進步空間,主要有兩個方面。

          第一,宏觀層面。一步作為新生事物,好比一顆新種子。種子破土而出時,是一顆嫩芽,而不是一棵大樹。新生的一步功能繁多,猶如一棵破土而出的大樹,一方面有違自然規律,另一面因為功能繁多,很多用戶無法一下子看懂,看不懂可能就不想用了。

          第二,微觀層面。一步這棵新大樹,結了很多不同的果子,比如拖拽圖片到其他應用、切換后臺應用、展示最近圖片/文件等。這些果子,是用戶真正需要的嗎?這個是要存疑的。

          比如拖拽圖片到朋友圈就能發朋友圈這個設計。通常而言,我們發到朋友圈的圖片都是精挑細選的,會占用一定量的時間,比如旅游或聚會結束后發的照片。一步解決的是效率問題。發朋友圈的時候,少點幾下這種效率問題,優先級是比較靠后的,我們沒那么在乎。

          還有拖拽圖片/文件這個交互動作,大家通常在電腦上用的比較多,在手機上是沒有這個習慣的,實際上應用場景也少。在手機上,大家一般只習慣拖拽應用圖標。

          還有切換后臺應用這塊,大家第一個想到的,一定是系統自帶的,已經用慣了。而且喚起速度比一步快,點擊面積也比一步大。

          總的來說,微觀層面上,比較缺讓大家能馬上想到一步的功能點。

          最后,總結一下。對于領先時代、引領潮流的交互設計,需要做到自然。

          具體而言,就是,大驚喜是一種系統性的大功能,好比一棵大樹。這棵大樹,最好有一個從種子到果子的生長過程,這樣最自然,生命力也會最旺盛。

          因為,從破土而出的嫩芽階段,就可以通過用戶反饋和數據來檢驗,這種嫩芽,是不是真的對用戶有價值。如果價值不大或沒有價值,還可以再調整。如果長成大樹結滿果子,再去調整,就很難了。


          結語

          交互設計小細節,如果有一定的趣味性或人文屬性,則是小驚喜。

          系統性工程的交互設計,如果最初感覺很酷,而且能引領潮流、代表未來,則是大驚喜。

          始終保持孩童身上那種非功利的好奇心,用心觀察并思考生活中的小事;

          將生活小事和交互設計巧妙融合起來;

          以上兩點,可以幫我們做出小驚喜類的交互設計。

          追求卓越,獨立思考,做最酷最好的交互設計;

          酷是結果也好,是目標也好,都不是最重要的。最重要的是,避免刻意和心切。醞釀大驚喜,猶如培養一個新生的孩子,需要投入極大耐心和精力,需要讓孩子自然成長。沒有家長會教半歲的孩子唱歌、把 3 歲的孩子送到高中念書。

          再加上以上兩點,可以幫我們做出大驚喜類的交互設計。

          最后,用愛因斯坦的一句話來共勉。

          想象力比知識更重要。

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

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

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


          交互設計之尼爾森的十大可用性原則

          純純

          系統應該在合適的時間內通過適當的反饋,始終讓用戶了解正在發生的事情——尼爾森


          自我理解:用戶無論在界面上做什么,都應該及時告知他發生了什么或者進展到什么程度。可以理解為人與人的溝通,界面需要及時告訴我們做了什么,現在是什么情況。


          a.  這種告知應該是及時的。

          加載任務在互聯網中是最常見的,在加載過程中應當及時傳達加載過程,減少用戶的心理等待時間。在外部加載總時間無法優化的時候,使用何種方式能有更好的用戶體驗是設計時需要考慮的。

          undefined

          undefined

          undefined


          b.  應當告知用戶你在哪里

          你的界面需要引導用戶來操作,即作為用戶應該清楚的明白我在什么位置,我下一步可以去做什么操作。

          現在app的很多設計基礎包括頂部的導航分欄和底部的tab bar都是為了告訴用戶他在哪里。

          在做一些概念設計時候,如果單純是為了更好的視覺效果,就對這些基礎分欄進行大刀闊斧的設計,最終導致了好看是好看,可是用戶都不知道這頁面是干什么的結果,很明顯是違背了最基本的交互原則 狀態可見原則。

          undefined


          c.  應當告知用戶事情怎么樣了

          用戶在你的界面是要做什么事情,這是你在設計之前應該思考的問題。

          如何把用戶要做的這件事情更好的呈現給用戶,反饋給用戶以及有哪些信息需要反饋給用戶都是你要從交互的角度思考的,這包括過去發生的信息和即將發生的信息,也包括正向反饋和負向反饋。(這種操作是否成功了?這種操作進展到什么程度了?如果這樣操作會有什么后果?點擊之后會達到什么頁面?這里是否可以點擊?)


          很多概念性的設計很酷,從交互的角度上來看也是因為界面對信息進行了很好的反饋,比如下面的設計就是對登山的信息進行了很直觀的反饋。(來自設計設計師anastasia  原地址https://dribbble.com/shots/8291047-Tourism-App-Mobile-Concept


          undefined


          undefined


          自我理解:不同的人生活在不同的環境里面,不同的界面也有不同的外部環境。盡量保證界面在自己產品定義的風格里面,如果有機會還原真實世界的狀態也很好。


          a.  根據用戶制定產品語言

          在制定產品語言時,要了解產品的用戶人群,使用相對應的用戶群體所熟悉的文字語言 圖形語言  板式結構  配色方法。要讓我們的用戶覺得這個產品很符合自己,而不是讓一個老大爺去滑滑梯的感覺。一般來講即便是同一產品,在國內外的產品語言也是有所不同的。

          a. 模擬真實環境

          產品在一些展示上模仿現實世界的樣子,可以讓用戶快速接受,并感受到真實易懂。不僅僅局限于靜態外觀的模仿,還包括模擬真實物品的動態效果 聲音等 都能給用戶良好的使用體驗

          很多逼真的動效也是來自真實世界的映照。比如下面的可樂瓶的晃動就和真實世界很接近,讓用戶有很強的代入感。(作品來自設計師dannniel 原地址:https://dribbble.com/shots/6351526-Select-Drink-Animation

          自我理解:為了不讓用戶進入一個錯誤的場景或者結果,對于一些特殊操作應該給予撤回重做,讓用戶能夠充分的確定接下來的行為。

          a.  返回到原始狀態

          可以理解為悔棋,即已經發生的行為返回到原始的頁面狀態,這個條件的設置也應該有一些條件的限制,不能一直無限返回。





          自我理解:君子常常言行一致,好的產品也是一樣。保持為一個統一的整體,包括產品內部和產品外部,也包括線上和線下。


          a.  與競品保持一致

          很多人講現在的同一類產品的同質化現象嚴重,其背后也是有一定原因的。相同或相似產品的用戶習慣保持一致,即意味著用戶需要更少的時間去學習甚至不需要學習。從產品設計上講,用戶使用越方便易用,產品設計的越成功。和相關主流競品做出比較大差異化設計時候,雖然擺脫了同質化的問題,但是很多常規操作卻需要用戶重新學習,這樣帶來的后果很有可能就是用戶流失。所以,沒有充分的理由,請與競品保持一致。



          b.  請建立一套完整的規范

          一套完整的規范包括組件 色彩 間距  版塊結構 等。規范可以讓你的產品一致性更強,你要讓用戶能夠對你的產品產生一定的規范性印象,當他看到一張頁面就能聯想到這是什么產品。

          undefined


          c.  請保持產品迭代的一致性

          現在隨著互聯網市場的不斷穩定,很多產品進入了穩定的迭代期。但是在迭代期也應該以保持產品語言 用戶使用習慣的一致性為一大重要原則,版本的迭代也應該逐步進行,不要急功近利。盡量保持原有的設計元素一致性,新功能的創新也盡量不要損害原有用戶的使用體驗。


          自我理解:再發生錯誤之前采取措施來避免。


          a. 引導用戶,不要讓錯誤出現。

          很多app迭代更新之后會有操作指引,目的就是為了讓用戶學習,減少錯誤操作。很多引導頁也有相類似的功能。


          b. 給予提示,尤其是用戶在做一些重要操作的時候

          一些重要的敏感操作,產品通過二次詢問得到用戶的確認,




          自我理解:能讓你的軟件產品來記住,就不要讓你的用戶來記。盡可能的在設計產品的時候,不要讓用戶去記憶,把用戶當傻瓜。

          a 記住用戶的使用操作記錄

          這個記錄不單單是在某一設備上,一般來講都是跨設備進行同步。用戶在使用的時候不用來回調整,體驗感是很強。

           


          b  讓用戶選擇信息而不是填寫

          填寫是一件成本極大的事情,很多用戶不愿意在這上面花費時間。所以產品在設計的時候要盡量讓用戶去選,而不是去寫。

          undefined

          c 自動讀取

          思考產品一些功能的使用場景,有沒有自動智能化的需要。即不用問候產品使用者,自動提供解決方案。注意,這里講的是提供方案,不是解決方案。提供大多數的解決方案,可以節省使用者的交互步驟或者瀏覽時間等,也是易用性高的表現。

          d 提供適量的信息

          其實另外一個交互定律法則(以后會講)其實提到了選擇的數量,移動端的選項一般不會超過五個,超過五個用戶的頭腦就會混亂。所以要考慮信息的擺放位置在哪里,一方面是需求決定的,另一方面也應該控制每一個選項的數量,不要讓用戶感到焦慮。


          自我理解:一般來講產品的用戶群體是多樣化,用戶的使用熟悉度也是有差別的。要照顧到絕大多數用戶群體的使用體驗,所謂的高頻是每一個用戶群體比較常使用。


          a.  設置快捷/重復入口

          講產品常用或者主打的功能放在產品容易操作的位置或者重復出現,用戶可以高效的完成自己的需求。

          一般來講用戶的使用頻率越高越要放在操作熱區和表面,反之亦然。

          b.  用戶自定義常用功能

          照顧到不同用戶對于某些功能的需求不同,對產品的部分功能進行用戶自定義化操作,提高用戶使用的靈活性。


          c.  給用戶默認選項

          將用戶經常使用的選項作為默認,減少用戶操作時間,達到靈活高效的目的。像淘寶都會設置默認的收貨地址,每次下單不用每次都輸入,十分高效。(當然也有翻車的時候)



          自我理解:互聯網用戶閱讀產品的一個很重要的特點就是快。即不是來閱讀不是來看,而是掃一眼。所以要求頁面上的內容能夠清晰可見,方便用戶快速捕捉到自己喜歡閱讀的信息,減少不必要的干擾,簡潔高效。

          a.  清晰的板塊劃分

          把頁面內容的優先級別進行分級,清晰的板塊劃分將會引導用戶操作。還可以將頁面的主推內容向用戶展示,避免用戶分不清重點。


          b.  減少視覺噪音

          注意頁面的主角是誰,在平面設計中也有相同的概念。不要讓背景或者裝飾嘩眾取寵,而影響主要信息的傳遞,視覺設計是來輔助業務表達的。如果核心需求沒有傳遞好,那就會單純地成為一件藝術品,而不是設計作品。所以在設計過程中,要權衡視覺點,減少不必要的噪音干擾。


          c. 嚴格遵守設計的四大基本原則:親密  對比  重復   對齊

          落實到界面上包括間距 字號 字重 版式節奏 。其實看到看到很多界面做的不精彩不優美,就是基礎性的原則就沒有完全落實貫徹。這里就不舉例,基本所有的設計都要遵守的原則,很重要,很重要,很重要。


          undefined


          自我理解:要考慮到頁面可能發生意外,錯誤發生后要及時彌補。


          a.  提供清晰地說明和解決方案

          考慮到可能會達到的錯誤界面。在發生的錯誤結果上,使用明確清晰的語言告知錯誤的原因,并給予解決方案。

          自我理解:要考慮到頁面可能發生意外,錯誤發生后要及時彌補。這一部分其實主要進行一些說明,讓用戶操作方便,相當于使用說明書。

          a.  無需文檔

          進行新頁面的設計盡量直觀清晰,符合用戶習慣,無需引導即可使用。

          b.  一次性提示

          改版引導或者新功能引導給予一定的提示

          c.  常駐性提示

          對于產品的操作性功能或者操作必須注意到的問題,產品需要進行一定說明

          d.  幫助文檔

          用來解釋一些常見問題。



          文章來源:站酷    作者:花城丶

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

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

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



          詳解|用戶體驗地圖,到底該如何使用?

          ui設計分享達人

          用戶體驗地圖是什么 | WHAT

          用戶體驗地圖(Experience Maps)旨在通過描述用戶歷程和故事,使設計師、產品經理等項目成員更好地了解用戶和洞察訴求。所以對于用戶體驗地圖,我們可以將其定義為以下內容:

          - 是一種描述用戶故事的可視化工具;

          - 是一種幫助設計師、產品經理等更好地了解用戶的共創工具;

          - 從用戶視角出發,直觀展現產品流程各個觸點上用戶的痛點、需求和情緒;

          - 用戶體驗地圖繪制的形式并不唯一,可以根據項目需求,增減內容。


          undefined  

          △ 途家 App 用戶租房 · 用戶體驗地圖案例



          通常在接觸到需求之后,設計師就可以開始梳理現有流程、使用用戶體驗地圖了。要注意的是:

          - 需要梳理的功能不分大小,都可以使用;

          - 做之前,務必要先調研和訪談用戶使用產品的情況。

          建議時長:

          - 重要項目:120~180 分鐘- 日常項目:60~120分鐘

          參與者:

          - 必選:設計師、產品- 可選:研發、市場、其他

          工具:

          - 電腦或白板+便利貼

           

          為什么需要用戶體驗地圖 | WHY

          需要發現和拆解產品現有問題,梳理用戶流程時使用用戶體驗地圖,可以在聚焦階段,整合用戶訴求和業務訴求,共創機會點,找出解決方案,通常在以下場景中使用:

          - 新產品設計:需要對需求進行拆解和優先級排序;

          - 產品優化:發現產品現有問題,洞察設計發力點。

           

          由此可見,在設計過程中使用用戶體驗地圖作為設計工具,有以下益處:

          - 更好的以用戶視角來看產品的體驗;

          - 通過共創,項目成員達成共識;

          - 確認觸點,作為我們的設計方向;

          - 通過用戶痛點找到機會點;

          - 幫助梳理產品流程。


          undefined


          △ 用戶體驗地圖共創現場

           

          用戶體驗地圖操作流程 | HOW

          我們通常會將流程分成4 個階段:定義原則和目的 —— 梳理階段流程 —— 洞察痛點 —— 尋找機會點。


          1. 定義原則和目的

          首先要了解我們做用戶體驗地圖的原因和目的,包括用戶是誰、解決什么問題、用戶的目標、產品的整體目標、限定條件等等,對用戶群體、整個項目背景和共創任務目標有清晰、全面的認知。


          undefined


          2. 梳理階段流程 

          首先是劃分階段,將用戶的行為拆分成幾個大的階段,在整理時要注意:

          - 在整個產品的范圍之內盡量把故事、流程講完整;- 以廣度優先,而非深度,不要過早的沉浸到細節中。

          接下來我們要將主要階段拆分成單個任務,并梳理具體的任務和觸點,羅列出過程中的任務和各個觸點,要做到事無巨細。


          undefined


          然后根據任務和觸點,整理對應的用戶疑問、用戶感受/情緒。通過對用戶的觀察和訪談進行梳理,客觀的描述事實,切勿自說自話或是將自己的情緒代入其中,也不要急于猜想與分析。


          undefined


          3. 洞察痛點

          這一步需要我們匯總用戶的痛點,并將痛點分級,洞察用戶痛點背后的真實訴求。這個過程中可以先讓大家在一定時間內寫出自己的想法,每一條寫在一張卡片上,做到先相互不干擾,之后再統一整理和總結。


          undefined


          4. 尋找機會點

          通過上述總結,思考新的機會點、解決方案、優化整體流程,并對新流程下的功能做優先級排序??梢酝ㄟ^準備一些問題來刺激大家腦爆出更多的內容,比如:用戶還有其他選擇么?怎么做用戶才能更爽?其他用戶來到這里該怎么處理?等等。在這個階段需要:

          - 對內容進行對標、討論,把公認的點保留下來,無用的點剔除出局;- 根據實際情況和項目成本、進度等條件,對新流程下的功能做優先級排序。


          undefined


           

          如何為過程提效 |TIPS

          在實際的工作過程中,因為項目時間都非常緊張,繪制這樣一個完整的用戶體驗地圖比較耗費時間,所以推薦大家幾個提效的技巧,既可以減少時間浪費,也可以提高共創質量:

          1. 事前

          充分做好用戶調研,提前準備好用戶地圖模板,可以在開始之前的一到兩天發給參會人員,讓所有人對產品有一個整體梳理和思考,有助于提高大家的產出質量。

          2. 事中

          如果是優化的產品,可以將設計稿 demo 或者線上產品截圖打印出來,這樣可以增強大家的代入感,有利于想法的輸出。

          3. 事后

          整理電子版體驗地圖,需要跟隨產品的演進進行更新,上傳到項目共享空間隨時查看。

          文章來源:站酷  作者:Ant_Design

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

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

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



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

          純純

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


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


          酒店床頭開關



          酒店客廳開關



          這個開關是觸控式的,開關本身有亮/暗兩個狀態;大家迅速看一眼,我想請問大家,你們認為,亮著的開關(圖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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務




          日歷

          鏈接

          個人資料

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

          存檔

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