<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設計者

          本文將針對酷家樂旗下云端建模工具——酷大師所做的可用性測試,說明工具型產品如何去做可用性測試。

          打造一款產品的過程中,我們需要時刻保持警惕:功能是否滿足用戶核心需求?交互流程能否做到簡單流暢?是否還有未知領域可以由用戶帶來啟發?進行一次準備充分的可用性測試,無疑是解答上述問題快捷有效的方式。

          下面我將結合本次針對酷家樂旗下云端建模工具——酷大師所做的可用性測試,說明工具型產品如何去做可用性測試。

          準備階段

          第一步:明確測試目的

          測試目的不同,安排的測試任務就不同,進而就會影響最終得到的結果。所以測試之初需要考慮清楚測試目的。國際標準化組織在人體工程學設計的人機交互部分( ISO9241) 把b2可用性c 規定為 3 個指標:

          • 有效性:用戶使用該系統完成任務的精度和完整性;
          • 效率:用戶使用該系統完成任務需要耗費的資源;
          • 用戶滿意度:用戶對該系統的舒適度和認可接受程度。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          結合這3個指標,我將本次測試目的設定為:

          • 了解用戶對酷大師現有主流程的使用現狀;
          • 了解用戶對酷大師的體驗滿意度及需求滿足情況。

          第二步:確定測試時間和環境

          測試時間:

          • 測試準備時間:建議為期2天。準備相關文檔、設備、場地、任務等。
          • 用戶測試時間:建議為期3-5天。可短時間內容集中進行用戶測試,或在工作日穿插進行測試。
          • 結果整理時間:建議為期5天。用于整理測試信息、落實產品迭代任務、撰寫總結報告等。

          測試環境:

          • 線下環境:邀約用戶到公司辦公室現場測試;
          • 線上環境:考慮到用戶路程及時間等限制性因素,也可在線上進行測試。
          第三步:安排測試設備
          • 操作設備:取決于目標用戶群體主要使用的設備,假如用戶都使用ipad,就要將ipad列為主要操作設備。
          • 錄音設備:測試結束后需要進行詳細的信息整理,錄音資料可以幫助回憶溝通內容??墒褂檬謾C自帶錄音功能或專業錄音筆。錄音前必須告知用戶,在征得許可后方能進行錄音。
          • 錄屏設備:工具型產品的操作過程中涉及很多細節,錄屏資料可以幫助工作人員進行問題定位??墒褂秒娔X自帶錄屏功能,或錄屏工具。
          • 遠程設備:由于部分用戶需在線上測試,可使用在線工具進行遠程協作,比如:zoom、騰訊會議等。
          • 記錄本和筆:測試過程中進行表格填寫時需要使用。
          • 文檔資料:主要包括測試過程中需要填寫的表格。建議打印n+2套,n是測試樣本數量,另外2套備用。
          • 場地準備:提前預約會議室,給用戶獨立的操作環境。
          • 測試酬勞:具體可根據公司政策進行準備。
          第四步.邀約測試樣本

          Nielsen在理論中認為5-8位用戶可以測試出85%的可用性問題,實踐下來確實如此,樣本數量建議控制在這個范圍。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          在同一個產品的用戶中,新手用戶、永久的的中間用戶、專家用戶這三類角色通常是共存的。我們需要讓新手用戶快速和無痛苦地成為中間用戶;避免為那些想成為專家的用戶設置障礙;最為重要的是,讓永久的中間用戶感到愉快,因為他們的技能將穩定地處于中間層。

          本次測試中,我盡量使樣本中包含這3類用戶,比例為2:3:3。測試之后,就可以大概知道對于不同類型用戶來說,產品可用性和

          易用性情況,也可以得到多維度差異化的反饋。

          第五步:設計測試文檔

          測試中需要使用一些管理用戶信息或記錄用戶反饋的表格,在準備階段就要做好表格設計和打印工作。下面是具體的表格,可根據具體需求做相應調整。

          《用戶信息&排期表》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          在這張表中管理測試用戶信息b2姓名、職業c 、測試安排「時間、地點」、測試工作人員「主持人、觀察員」。一場測試盡量安排一位主持人和一位觀察員作為工作人員相互配合。

          主持人負責與用戶溝通互動,推進測試進程;觀察員負責設備和資料保障,以及測試過程中的行為觀察和記錄。一個人獨自承擔主持人+觀察員角色的話,在用戶反饋密集而現場又出現臨時狀況時就會手忙腳亂,所以建議兩個角色分工協作。

          《用戶基本信息問卷》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          在這張問卷中可以設計與產品相關的用戶基本信息問題,問卷設計原則為:

          • 關聯性:與需要測試的內容相關;
          • 層級性:問題層級依次遞進,使用戶回答問題時能夠思維連貫,由淺入深;
          • 隱私性:盡量避免涉及用戶敏感信息,必須涉及時需解釋原因,尊重用戶意愿。比如有些用戶不愿透露年齡、收入等信息。

          這張問卷使用在線工具呈現,比如騰訊問卷;也可現場打印紙質問卷進行詢問填寫。大多數用戶比較喜歡現場填寫。

          《單任務滿意度問卷》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          測試過程中,我們需要讓用戶完成一個完整任務,該任務需要拆解成若干單任務。在每個單任務結束后,立刻對用戶進行該單任務的滿意度詢問。

          《SUS系統可用性量表》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          用戶結束完整任務后,填寫該量表。該量表由10個題目組成,包括奇數項的正面陳述和偶數項的反面陳述。在結果整理階段,我們再對該量表進行分值計算。

          第六步:規劃測試腳本

          從開始到結束,需要主持人將整場測試的各個環節串聯起來,引導用戶操作,推動測試進程向前發展。為防止意外狀況出現,可以預設測試腳本,規劃情境和話術,并在預測試環節驗證及優化該話術。

          比如可以這樣開場:“首先非常感謝您今天能來參加我們的可用性測試,我是主持人XXX,這位是觀察員XXX。我們這次是對酷大師建模工具進行可用性測試,想了解您使用時的體驗和感受。

          在這里需要強調的是:我們測試的對象是工具,而不是您,所以您不必感到緊張……當您使用工具時,我們會觀察和記錄。今天的測試大概需要一個小時,測試過程中會有休息時間。測試過程中,請您將手機保持靜音狀態……“

          比如可以這樣進行兩個單任務環節串場:“好的,我們已經完成了第一個單任務?,F在有一份簡單的問卷,填完后可以稍微休息一下。

          「出示問卷,并作簡要填寫說明」「問卷完成后進行簡單訪談,用戶也稍稍休息后繼續」現在,我們開始進行第二個單任務「要清晰且大聲地說出這句話,以“鼓勵”測試參加者和提示記錄人員」……”

          具體話術依據需要測試的內容和情境展開,盡量做到專業、友好。

          第七步:設計測試任務

          可用性測試往往帶有一定目的性,而這些目的能不能達成,取決于任務與目的的關聯性以及用戶是否能夠給到對應反饋。通常,測試用戶是愿意給予反饋的,那么測試任務的設計就成為整個準備階段最重要的環節。

          做好測試任務的設計和拆解:需要具備從全局高度理解產品的能力;需要知道產品全鏈路的過去起源、現狀細節、未來走向;需要把控重點,拎出骨架;需要去繁就簡,以較少的任務成本測出最有價值的信息。

          本次測試中,我設計的主流程是:模型創建——材質鋪貼——模型渲染——模型發布——模型分享,并且我還希望測到拉伸、陣列、組編輯、移動、旋轉這樣的主功能。所以我將這兩塊有機結合,給到用戶創建一個「樓梯踏步模型」的任務。

          我將任務按照主流程拆解為5個單任務,主功能分布到其中幾個單任務中,且盡量做到兩個單任務中不重復使用同一個主功能。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          預測試階段

          大多數產品都存在一些限制因素導致的尚未解決的已知問題。這些問題在測試中出現的話,會轉移用戶注意力,削弱本次測試的價值,偏移本次測試的目的。

          另外,我們準備階段進行的種種規劃也需要得到驗證。結合這兩個原因,正式測試之前建議進行內部的用戶預測試。找出并修復測試環節中的漏洞,準備好各類突發狀況下的planB,以及修復影響正式測試的已知問題,提高正式測試的執行效率。

          正式測試階段

          第一步.測試開場,填寫《用戶基本信息問卷》

          本次測試是在工作日穿插進行8場一對一用戶測試。這樣可以放緩測試節奏,在兩場測試間隙有充足時間簡單整理上一場收集的信息,與下一場用戶確認測試安排,以及對突發狀況及時處理。

          正式開始前半小時,觀察員需確認設備都已調試妥當,資料都已打印完成。主持人可與用戶進行聯系,帶領用戶進入測試場所。主持人可以通過填寫《用戶基本信息問卷》了解用戶基本信息,幫助用戶消除在陌生環境下的溝通障礙。也可以使用戶以放松狀態完成測試任務,以開放心態為后續拓展性話題的展開做好準備。

          無論是填寫《用戶基本信息問卷》還是后續的問卷,建議采用主持人提問、用戶回答的方式收集信息。用戶的注意力集中于思考和溝通,就能夠提供更多有價值的信息,而不是忙于撰寫問卷。

          第二步.完成單任務,填寫《單任務滿意度問卷》

          主持人按照順序分步解說單任務。單任務測試過程中,工作人員不要去打擾用戶,也不要給用戶任何提示,所有的問題都等到測試結束再進行解答。

          觀察員需仔細觀察用戶操作,記錄用戶是否很容易判斷出如何操作,完成某個重要功能點時是否順暢;需隨時關注用戶表情,記錄下明顯表情相關聯的流程或功能點等等細節。

          一個單任務完成后,提示用戶稍事休息,然后提問《單任務滿意度問卷》中的問題。此時可以回答用戶操作過程中的疑問,也可以藉由操作中的細節做延展發散,詢問用戶操作感受。通??梢垣@得很多針對該單任務的意見和建議。這些意見和建議后續就需要記錄整理,作為優化任務幫助提升產品可用性和易用性。

          第三步.填寫《SUS系統可用性量表》,了解整體評估

          整個任務完成后,可以藉由填寫《SUS系統可用性量表》,了解用戶對整體的評估。由于量表的10個題目中,包括奇數項的正面陳述和偶數項的反面陳述,所以在提問過程中一定要陳述清楚題目。如果用戶認為有些問題無法回答,則視為其選擇中間值。在后續的結果整理階段,再對量表總分進行計算。

          在問題詢問過程中,可以有針對性地詢問原因。比如針對第2個問題“我認為酷大師建模工具的操作較為復雜,其實沒必要這么復雜”。

          如果用戶認為不復雜,則可以詢問哪些點非常簡單易用;如果用戶覺得復雜,則可以詢問哪些點覺得復雜。用戶告知原因的同時,常常會說出他認為比較簡單的解決方案。這些解決方案或者來自于競品,或者來自于實踐,或者來自于創新,常??梢詭椭覀冮_拓思路,走出認知盲區。

          第四步.拓展性訪談,測試收尾

          在這個環節可以不必拘泥于原定的測試任務。建議預留一定時間,大到行業發展,小到產品細節,與用戶進行一番深度探討。這些來自于一線的用戶常常會帶來一些新鮮的靈感,為產品未來的拓展提供一些線索,解決產品當下的一些困惑。

          由于我們一開始就對測試樣本進行了分類,所以也可以結合前面幾個環節的信息,對各分類下的用戶訴求和行為習慣進一步驗證、區分、歸納。

          結果整理階段

          第一步.SUS量表分值計算

          首先,我們需要計算SUS量表總分。奇數項計分采用“原始得分-1”,偶數項計分采用“5-原始得分”。由于是5點量表,每個題目的得分范圍記為0~4(最大值為40),而SUS的范圍在0~100,故需要把所有項的轉換分相加,最終再乘以2.5,即可獲得SUS分數。

          其次,我們可以獲得分量表得分。SUS量表中,第4和第10項構成的子量表為“易學性”(Learnability),其他8項構成的子量表為“可用性”(Usability)。

          為了使易學性和可用性分數能夠與整體SUS分數兼容,范圍也是0~100,需要對原始分數進行轉換:易學性量表轉換分數的總和乘以12.5,可用性量表乘以3.125。

          最后,我們可以將SUS量表分數換算成百分等級來解釋,找到對應評級。百分等級的意思是指測量的產品或系統相對于總數據庫里其他產品或系統的可用性程度。比如SUS得分是73分,其百分等級大約為67,意味著比大約66%的產品可用性更好。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          第二步.整理問題列表,推進迭代優化

          做完所有用戶的測試之后,我們一定會收集到很多涉及具體功能點的反饋。對于正向反饋,我們可以謙虛地接受,并且思考這些打動用戶的點如何復用;對于非正向反饋,我們應該冷靜地思考,它們將是本次可用性測試中最直接而有效的收獲!

          對這些反饋可以進行分類歸納,將其中能夠立即應用于產品的內容整理出來,按照優先級,放入產品迭代優化任務中。這些任務將提高產品可用性,在數據層面能夠幫助提升留存率。我們這次可用性測試中總共獲取97個有效反饋,其中62個整理進產品迭代任務,并且取得了用戶使用數據上的相應提升。

          第三步.撰寫測試報告

          整個測試環節通常只有2-3位工作人員,如果希望能和團隊一起分享測試的收獲,建議整理一份總結報告??梢允褂脀ord或者ppt形式,說明測試背景、測試用戶信息、主要結論、發現的問題、以及解決問題的行動項。

          總結升級

          經過幾場頗具收獲的工具型產品的可用性測試之后,我做了一些總結,希望能夠形成適應于工具型產品的可用性測試體系:

          1. 目的性

          工具型產品的可用性測試目的比較統一:幫助團隊優化體驗路徑;幫助團隊明確用戶使用產品時的體驗感受;幫助設計師驗證設計指標。

          2. 專業性

          完整的可用性測試全程都需要專業支撐,從籌備到進行,從任務到結果,每一個細節都需要考慮到位。在這過程中我們要盡量保證:流程規劃清晰;文檔整理完整;分工明確到位。

          3. 參與性

          大多數可用性測試是用戶體驗相關崗位人員發起,但是用戶對于產品的反饋與團隊每位成員息息相關,所以建議團隊共同參與。比如在這次可用性測試中,就邀請了產品經理和研發人員擔當觀察員或主持人;邀請用研人員給予專業指導培訓;在對測試反饋的問題進行優化過程中,也是團隊通力合作,推進迭代快速進行。

          4. 周期性

          可用性測試不是進行一次就結束的一場表演。而是結合產品進展情況,可持續實施的一種有效的快速驗證方式。

          可以在新產品上線后進行,可以在重要功能上線前進行,也可以在迭代優化后進行。建議周期性進行可用性測試,取得一些結果后立即應用于產品,隔段時間再次驗證,形成良性循環。亦趨近于精益用戶體驗中倡導的基本MVP理念。

          當然,每次可用性測試都需要工作人員投入大量時間和精力,所以專業賦能可以成為很好的解決方案。即團隊成員可以學習使用該方法,輪流進行周期性操作。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          寫在最后

          我們日常其實接觸并積累了大量專業方法,可用性測試只是其中一種。在不斷實踐的過程中才能真正體會到這些方法的魅力之處,在不斷落地的過程中才能打磨自身的方法論體系,形成屬于自己的一套打法,給產品設計帶來新穎的專業思路。

          文章來源:優設    作者:酷家樂UED 


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

          拼多多搶走了我媽,從淘寶手里

          周周

          編輯導讀:對于老一輩人來說,他們沒有趕上互聯網興起的時候,等到想要主動“觸網”時,才發現很多操作根本搞不清楚。盡管產品設計師已經極可能考慮到了老人群體的用戶體驗,但在實際操作中,老人家還是一頭霧水。這時,操作越是簡單的產品,越能夠贏得他們的喜愛。本文作者從自身經驗出發,對這類現象進行分析,與你分享。

          上周某天吃完晚飯,我媽遞過她的華為手機怯怯地問我:你有空嗎?我想叫你幫我跟那個商家說換一個快遞,我們家這邊的百世快遞的站撤了,叫他們不要用這個快遞。

          我腦海中閃過一個念頭:嗯?最近我沒有幫她付款啊。但隨即也是接過她的手機打開了淘寶。我媽立刻阻止我:不是淘寶,是拼多多。隨即自己打開了她微信里的拼多多小程序,演示給我她找不到商家客服。我跟她說,這個功能要用APP才行,于是幫她下載了拼多多APP并很快解決了問題。

          弄完之后,我們又展開了這樣的對話:

          我媽:哎呀,這個拼多多真是太好了,物美價廉,超方便!你怎么不早教我用!

          我:我自己都不怎么用拼多多啊!

          我媽:這個是我的舞友上周教我的!我打開一看,哇,好多有用的東西,又便宜!第一天我就買了幾百塊的!

          我:但是拼多多很多假貨??!

          我媽:我又不像你們追求什么名牌!有什么假貨可言?一條裙子30塊!

          我:……

          我媽:而且!以前我在淘寶總要你幫我付款,現在我用拼多多自己用微信就可以支付了。

          我:我早就叫你開個支付寶賬號,你自己又不開!

          我媽:那么麻煩,我不會,你又不教我!而且又要綁定銀行卡,萬一哪天我的錢被人家騙走,那些什么黑客……

          我:哪有黑客黑你,你又不是馬云……

          我媽:還有,拼多多退貨很方便!以前我在淘寶的時候,退貨要你幫我搞,還要在家等快遞上門,很不自由,現在我自己去菜鳥驛站退就得了。

          我:好吧。

          我媽:以后我就用拼多多,我那些舞友都在用!

          我:你開心就好。

          我回頭想了想,這是一個以用戶定位和產品特征為優勢搶奪用戶的典型場景。

          首先看看以我媽為原型的粗略用戶畫像:

          • 年齡特征:60歲左右
          • 工作與生活特征:退休在家,時間較多
          • 消費能力:退休金4000元左右
          • 家庭情況:已有孫輩
          • 人際關系:以廣場舞舞友、同學、工友、插友為主的人際關系圈,集聚在微信上
          • 消費態度:不追求牌子,追求低價
          • 網購習慣:淘寶的老用戶,但沒有支付寶賬號;網購品類主要為衣物及家居用品
          • 觸媒習慣:微信(微信群、朋友圈)、今日頭條

          為什么我說拼多多是從用戶定位和產品特征這兩個維度搶奪走了我媽這樣的淘寶用戶的呢?

          首先,我用的是“搶奪”這個詞。

          我并沒有用擠占、分流這樣的詞。因為,在跟我媽的交談里,我已經感受到她心里估計“從此淘寶一生黑”了。也確實,一個月以來我媽沒有再叫我在淘寶付款過。所以,我想我媽大概率未來不會再用淘寶了,也就是說,淘寶直接流失掉了我媽這個用戶。

          其次,來看看用戶定位。

          根據上面我列出的以我媽為原型的用戶,多嗎?我簡單查了一下。

          根據國家統計局官網上發布的《中華人民共和國2019年國民經濟和社會發展統計公報》,60周歲以上的人口約有2.5億人,60-65周歲的人口約有83250000人,分別占人口總數的18.1%和6%;根據中國互聯網信息中心官網發布的《第46次<中國互聯網絡發展狀況統計報告>》,截止2020年6月,我國手機網民用戶規模達9.4億。

          那么,根據這個比例可以推算,這樣的用戶大約在5千萬—1億的規模。

          這么大的一個用戶群體,實際上是淘寶自己放棄掉的。自從前幾年淘寶打假貨的行動和品牌化(力推天貓)的戰略執行以來,實際上大量的縣城以下、60歲以上的用戶都被淘寶放棄掉了。

          以我媽為原型的這批用戶,他們大多數沒有支付寶賬號,但在微信上有錢,但除了平時發發紅包,菜市場便利店買點東西,基本上還是沒有用出去。于是,這批用戶沉淀在微信錢包里的海量的錢,很難直接轉化到淘寶上。

          另外一個關鍵的地方在于,他們對淘寶是有怨言的,但在拼多多出來之前,沒有替代物。某種程度上來說,對用戶而言,忠誠度是很虛無的。真正對品牌有感情而產生“忠誠”的用戶極少極少,品牌還是得需要不斷優化產品,滿足用戶的需求。

          品牌也好,產品也好,本質上是為用戶提供價值,而不是要跟用戶“談戀愛”。

          這是很多品牌的一個誤區。沒有在自身的產品上下功夫,去了解用戶瞬息萬變的需求,而去打“情懷”,講“文化”。所以,我們可以看到當某些品牌醉心于自己的“情懷和文化”之時,其競爭對手在了解用戶需求和優化產品而推出競品后,瞬間打垮行業老大哥的案例。

          最后來講講產品特征。

          我媽使用淘寶的流程是怎么樣的呢?

          挑選商品——下訂單——點擊“找人付款”——發送需支付的訂單到我的淘寶賬號——退出淘寶——打開微信——告訴我發了一個訂單——發紅包給我——我看到微信或淘寶信息——點擊需支付的訂單——支付——退出淘寶——打開微信收紅包。

          而她使用拼多多呢?

          挑選商品——下訂單——支付。

          當我列出這兩個產品使用流程之后,我猜如果你是我媽,你也會用拼多多了。

          在我媽跟我的對話里,還突出強調了“退貨難”這個點。實際上是淘寶的物流服務不好嗎?并不是。我一直覺得淘寶的物流雖然不如京東,但并不差,而且也不斷在優化升級。但為什么我媽還是覺得不好呢?這一點不能單純地從物流本身來看,而得回到淘寶的產品來看。

          在淘寶上,推出了一個功能,叫“找人付款”。當時我覺得這個功能很好,解決了我幫我媽買單時,她要跳出淘寶從微信給我發鏈接的麻煩。但最終卻帶來了一個重要的弊端:當要退換貨時,我這邊無法執行,她那邊又不知道如何操作。

          而當我從PC端登上我媽的淘寶賬號之后,PC端的退換貨服務非常麻煩和繁瑣,讓我都研究了差不多一個小時才解決。而最后,我媽那邊又無法支付退貨費用,我在PC端也支付不了,也不能“找人付款”??傊?,整個過程極其麻煩。雖然淘寶也意識到了產品上的缺陷,但目前的情況而言,這樣的產品還是對于我媽這樣的用戶非常不友好。

          而拼多多呢?它基于微信這個社交生態圈。加上沒有什么太多余的功能,我媽很快就能上手了,自己操作還是比別人代操作方便多了。

          談到這里,我還意識到一個重要的問題。

          從產品對人際關系的影響而言,淘寶是負向的,而拼多多是正向的。從某種程度上而言,60歲以上的這代人,是被互聯網拋棄了,所以當他們想搭上這波潮流時,不得不面對自己的兒女,需要向他們請教,怎么用怎么學。這一點首先就會讓不少子女心煩,不少父母自卑。

          再進一步,如果每次父母網購都得“捆綁”上子女時,對人際關系是正向的嗎?而在拼多多上購物時,他們不僅可以大大優化自己的產品使用流程,還能跟自己的老朋友們一起拼單,互惠互利,這對人際關系的影響有很大的正向作用。

          你有什么被別的產品搶走的故事嗎?

          一點個人小想法,想到哪寫到哪。

          如果你有不同的意見和想法,歡迎評論或留言。


          文章來源:人人都是產品經理           作者:@源記物語


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

          Apple 的設計哲學:網頁篇

          周周


          Apple 致力于讓每件產品都賞心悅目,與其說官網是產品展示平臺,倒不如說它是蘋果產品分支的延續。從 Apple.com 找設計靈感是每一位設計師都做過的事,那它到底有何魅力?文章對Apple的網頁設計展開了梳理分析,與大家分享。


          一、沉浸與交互式體驗

          每當有新產品發布時,我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段時間發布的 iPad Pro 也一樣。

          這背后是 Apple 基于 webGL 技術,創造的一種沉浸與交互式產品體驗。

          1. 連續性

          我們在產品介紹頁可以看到,蘋果使用了大量的滾動 scroll 來體現連續性。

          一方面,滾動作為大多數 Web 用戶最自然的操作,學習成本極低。

          另一方面,在冗長的頁面下,滾動能讓產品特性保持更自然的轉場銜接。

          iPad Pro 的連續性

          2. 趣味性

          另外,采用了大量的動畫式轉換(animated transition),即操作時展示的動態效果,以此來增加趣味性。

          伴隨著豐富的、若隱顯現的章節文案,就像電影的旁白一樣,娓娓道來。

          通過滾動的方式增加交互性,這是明智之舉。試想一下,如果只放置已渲染的演示視頻,那么用戶的操作會受到限制,只能在視頻中前進或后退,毫無樂趣可言。

          AirPods的趣味性

          二、言之有序

          1. 秩序感

          說到言之有序,我們看 iPad 的頁面介紹。四款產品,分別是:iPad Pro、iPad Air、iPad、iPad mini。

          拍攝角度的秩序感,可謂妙不可言。

          iPad的秩序感

          • iPad Pro 的拍攝角度接近于正側面。
          • iPad Air 是四分之三側面。
          • iPad 是正面。
          • iPad mini 是俯視。

          如此一來,即顯得有序,也不會導致視覺疲勞。

          2. 設計語言

          其次,官網與 iOS 保持協同的設計語言,給用戶呈現了一致的感官體驗。

          從 iOS 11 開始,蘋果就采用了 Large Title 大標題的字體風格。字重也從 Regular + Light 的組合,轉向的 Medium + Bold ,以此增強信息傳播中的識別力。

          HomePod

          另外,高斯模糊的標題欄背景、產品的投影等設計語言也保持系統一貫的風格。我們可以很清晰的看到 Web 設計的同步轉變。

          三、層次

          1. 視差

          第三是視差帶來的層次感。

          蘋果奉行包豪斯的無裝飾和極簡的理念。當然,它不是那種附庸的美觀及外表的光鮮,而是將復雜難懂的技術以簡潔的形式傳達給用戶。

          Mac Pro 視差滾動

          在信息層次方面,Apple 的編排設計由淺入深,猶如抽絲剝繭。很好的利用了視差滾動,傳達圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。

          2. 視覺張力

          不僅如此,樣式上富有視覺張力?;驍U張、或收縮、或吸引、或排斥之感覺,呈現刺激與震撼。舉兩個例子:

          A13芯片的擴張力

          擴張力:整個畫面以 A13芯片 為視覺中心點,元素和布局圍繞這個視覺中心點向外擴張。采用發散式的視覺引導,視覺張力就出現了,讓人感覺巍峨壯觀。

          Pro級攝像頭的排斥力

          排斥力:通過元素的大小對比,可以形成一定強度的視覺排斥力。Pro級攝像頭 輔以大特寫,傳達空間意識。視覺上被其構圖、美感觸動。

          四、高級感

          再聊聊蘋果的高級感是怎么來的?

          1. 視覺降噪

          我們都知道,高飽和度的色彩,會影響人的情緒波動。相反,低飽和度的配色,對人眼的刺激較弱,會有一種冷靜且克制的高級感。

          iMac Pro 高級感

          回過頭來看蘋果官網的大部分頁面,除了產品界面色彩 和 按鈕藍 之外,其他的文字、背景、控件一律采用黑白灰色系,以此營造高級感。

          甚至是 iPhone 11 Pro 新出的暗夜綠,也是高級灰中加了一點點綠而已。

          換言之,減少使用顏色的數量,降低色彩的飽和度都能削減色彩對人的情緒,起到提升產品高級感的效果。

          iPad 留白

          除此之外,恰當的留白可以更加突出產品內容,讓重要的信息更準確的傳達。并且能營造出廣闊的空間感,讓畫面得到延伸,呈現一種意境美。

          所以我們做設計時應當多做減法,避免無意義的視覺元素堆砌,反而能讓你的設計更有高級的氣質。

          這又印證了現代主義建筑大師密斯·凡德羅的那句話:Less Is More。

          2. 配圖

          當然,只有留白是不夠的。既然是做宣傳,那么一份高分辨率、精致的配圖就顯得尤為重要。

          蘋果官網大部分的產品都是采用實拍+后期修圖,而非渲染圖。目的就是為了反映真實產品的質感、以及材質光影效果,這一點能看到蘋果對于品質的追求。

          Designed by Apple in California

          不僅如此,蘋果產品圣經《Designed by Apple in California》,以及壁紙同樣是由攝影師拍攝完成。有興趣的同學可以看下面這個幕后制作視頻,相當硬核。

          3. 蘋果式文案

          做過英文 Web 的設計師都知道,英文往往比中文更好設計,相同的布局英文出來的效果也更好看。

          這不是崇洋媚外,心理學有個詞叫做「母語羞澀」。簡單來說就是,中文對于我們來說,太常見了會讓人產生一種廉價感(實際上是羞澀感)的心理感受。

          老外也一樣,你可以看到美國企業:蘋果、麥當勞、星巴克都是使用圖形 Logo,而日本企業不用母語,而是用英文,比如 SONY、TOYOTA、Canon。

          你的下一臺電腦,何必是電腦。

          回到蘋果官網,我們看到一部分文案是英文產品名稱,這個不會感覺羞澀。

          那中文部分怎么辦呢?比較有意思的是,Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關、重復等修辭手法。雖然語感很差,但基本上能明白字面意思。

          其實這樣做的目的就是為了創造一種陌生感、一種獨特的語言風格,來凸品牌氣質。舉幾個例子:

          • 重復:比如說 iPad Pro「你的下一臺電腦,何必是電腦。」
          • 雙關:比如說 AppleWatch 的「它會時時關心你的心?!?/span>
          • 排比:比如說 iMac的「從極速,到神速,任你提速?!?/span>
          • 押韻:比如說 配件 的「可重復充電,又可圈可點。」
          • 對比:比如說 iPad mini 的「身量小,能量大?!?/span>

          4. 儀式感

          最后一點。生活要有儀式感,蘋果官網也有儀式感。

          國際婦女節專題

          在一些特殊的日子里,例如三八節當天,友商選擇打廣告促銷。而蘋果推出了國際婦女節專題,致敬女性的偉大,這一做法頗具人文情懷。

          不過話又說回來,感動歸感動,還是參與友商的打折活動香。

          #相關閱讀#

          Apple 的設計哲學:交互篇

          Apple 的設計哲學:UI 篇

          Apple 的設計哲學:聲音篇


          文章來源:人人都是產品經理           作者:阿洋


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

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          資深UI設計者

          最近國外的設計平臺頻繁出現一類內容,大概類似于「產品設計中的倫理道德與用戶體驗」,里面的內容有引起我的一些思考。

          我先給大家舉個例子,來解釋一下上面這句話的意思。

          以前,我們聊界面的設計,說界面當中如果有兩個按鈕,就要引導用戶走向主要操作,弱化次要的。類似于下圖:

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          這時候一定會有一些設計師告訴你說,這類界面,要以左邊這種形式去設計,因為無論從視覺角度、優先級角度還是企業利益角度來說,左邊這種都更符合用戶操作的邏輯。

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          或者,如 PayPal 上底部的「移除卡」功能,故意在層級上做的很弱,顏色的處理讓按鈕看起來甚至是不可點擊的。

          雖然「移除」對于產品來說是一個危險操作,產品不希望用戶進行這一操作。但是對于用戶來說,當他們想要這個功能的時候,說明意愿強烈,這時候這種設計會讓用戶產生糟糕的體驗。

          于是就有人提出說:

          • 為什么呢?難道就不考慮想要跳過的那部分用戶了么?
          • 產品設計就是只考慮對企業有利的用戶,而忽視掉那些不想付費的用戶?
          • 為什么我們的界面設計不能從更公平的角度去考慮呢?
          • 難道因為這些糟糕的設計頻繁的出現,我們就要認為這是好的設計了么?

          為什么,用戶登錄注冊就這么簡單,但是有些用戶想要注銷賬號卻如此麻煩?難道對于這些想要注銷賬號的用戶來說,用戶體驗就不重要了么?

          其實,我覺得這個問題,可以從兩個角度來說明,分別是「目的」和「義務」。

          作為產品團隊的一員,我們的價值在于給公司創造利益,想方設法得到用戶的支持與廣告商的青睞。所以我們設計的產品都會有特定的目的。

          比如,引導用戶去購買產品或平臺中的商品,以讓企業能夠存活,持續運營下去。

          但這并不是說,企業把一些對用戶無用的商品賣給了用戶,用戶買的這份商品,對他們來說一定是有價值的。產品并不是在欺騙用戶購買無意義商品。

          比如平臺支付了音樂或視頻的巨額版權費,方便用戶在線上收聽與觀看,那么用戶為這些內容付費是否應當?

          企業做這些事,從用戶與廣告商身上獲取利益,本質就是為了賺錢,這一點無可厚非。

          所以在產品界面的設計中,如文章開頭的示例,采用左圖的形式,突出辦理會員的按鈕,引導用戶付費成為會員,似乎也沒什么問題。

          它不過是利用了「信息優先級」的概念。我們需要幫助用戶去理解界面上所呈現的信息,目的是為了讓用戶更好的操作。如果所有信息的權重是一樣的,反而會影響用戶的使用,甚至造成體驗障礙。

          而逆向的,比如不辦理、跳過類似的出口也有給到用戶,雖然從視覺上相對弱化了,但絕不應該阻礙用戶去點擊。

          從這點來說,上圖示例的問題不是在弱化了按鈕的視覺效果上,而是按鈕太小,可能會導致用戶誤觸「去辦理」,讓不想辦理的用戶頻繁點錯;或者過分弱化界面上的重要元素,明明在眼皮底下,卻給用戶找不到的錯覺,這才是根本性的問題。

          比如一些引導頁,在屏幕上設置了三個類似「跳過」的按鈕,結果只有一個是有效的,產品為了讓用戶點擊廣告給企業創造收益,利用這樣的方式達到目的,這才是所謂倫理道德的缺失。

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          我再舉個例子。

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          連續包月,相比普通包月,策略大多都是第一個月有優惠價,以引導用戶辦理連續包月服務。好處是,大多數用戶辦理了連續包月,就會長期使用,它弱化了用戶的決策意識。

          除了部分辦理完第一個月就取消服務的用戶,只是為了這個月用,利用這樣的漏洞省點錢,不過這也僅限于第一次辦理了。

          那么我們作為設計師,就應該從為公司盈利的角度去設計界面,引導用戶辦理連續包月服務,而不是普通包月,在界面上做出差別。

          同樣的,當每個月用戶需要自動扣費時,就應該告訴用戶,過兩天又要一次扣費了,做一個提醒。而不單單是成功辦理后,就再也不通知了,這是不對的,畢竟用戶每個月都在為產品付費,這樣的通知是產品的義務。

          如果用戶辦理的是年會員,已經單次就付清年費,那就沒必要反復提醒(也沒什么可提醒的)。

          在這個例子中,用戶體驗與倫理道德的界限很清晰,所以我并不覺得它們是相互矛盾的。

          我們還可以舉很多例子來說明這個問題。

          比如 Windows 系統下卸載軟件頻繁的下一步,甚至還會有錯誤引導的設計。

          為什么用戶注冊這么簡單,想注銷卻如此麻煩?

          再比如,在一些產品里關注了某個人,但是有一天想取關的時候,總是找不到取關按鈕?;蛘?,一些產品里并不重要的信息,總是閃著紅點引導用戶去點擊等等。

          我們常常會去分析按鈕的各種樣式,比如是否有圓角,是否有投影,是否要漸變等等;也會去梳理按鈕與文案的關系,比如按鈕中的文案與邊框的間距,文案的大小要適配載體的比例等等;甚至,還會去分析按鈕的位置,比如取消按鈕應該在左邊還是右邊,取消按鈕與關閉按鈕的區別等等。

          但似乎,我們很少會去探討按鈕背后的這些事件,我們都知道按鈕是用戶與某個事物間接的交互控件,但我們從來都只注意于按鈕的外形與按鈕位置所應有的邏輯,而沒有真正去探討按鈕所承載的這些問題。

          比如用戶點擊了「會員辦理」的按鈕,會發生什么事情?我們是否應該在下個月用戶扣款之前提醒他們?或者,頻繁的在產品里濫用并不重要紅點提示,會不會影響用戶對于該產品的使用頻率?

          這才是我們需要延伸出來思考的事情,而不單單是按鈕或者某個控件本身。我們思考的遠不止目的,還有義務。

          所以。

          我并不覺得在產品界面上引導用戶執行操作有什么問題,相反,問題在于在引導的同時,不能阻礙用戶進行其他的操作,給予用戶合理的控制權,才是最重要的。

          產品設計的目的在于正向邏輯的用戶操作體驗,而產品設計的義務在于給予用戶拒絕的權利。


          文章來源:優設    作者:和出此嚴


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



          交互設計原則之格式塔定律

          ui設計分享達人

          在做交互設計或者視覺設計時要遵循一些既有的原則,其中非常重要的一條就是【格式塔定律】

          一、什么是格式塔原理?

                  格式塔心理學誕生于1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的:我們的視覺系統自動對視覺輸入構建結構,并在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域?!靶螤睢焙汀皥D形”在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。

                 格式塔學派主張人腦的運作原理屬于整體論,“整體不同于其部件的總和”。例如,我們對一朵花的感知,并非純粹單單從對花的形狀、顏色、大小等感官資訊而來,還包括我們對花過去的經驗和印象,加起來才是我們對一朵花的感知。

                 格式塔心理學家認為這些原則之所以存在,是因為頭腦具有天生的傾向,可以根據某些規則感知刺激中的模式。(是不是覺得hin神奇)

                 比如,這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景,白色為圖形,則是一個花瓶;如果以黑色為圖形,白色為背景,則是兩個人的側臉。它也反映了圖形和背景對一幅圖的影響。

          二、什么是格式塔原理?

          1、接近性原理
          接近性原理說的是物體之間的相對距離會影響我們感知它是否以及如何組織在一起。互相靠近(相對于其它物體)的物體看起來屬于一組,而那些距離較遠的則自動劃為組外。              

          接近性原理的應用1--將相關元素彼此靠近放置

          使用不同數量的空格來合并或分離元素是傳達有意義的分組的關鍵。例如,在Ant Design的標題區域中,“ 搜索”功能與站點的主要導航位于同一行。但是,主導航和搜索之間的多余空格表示它們屬于不同的組,因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出,此空格至關重要。


          但是,在較小的屏幕上,無法保持此間距。為了避免將這些區域視為一個整體,頁面收縮寬度的時候,搜索后的文字隱藏了。



          接近性原理的應用2--構建清晰的結構

          應具有固定或鎖頭標題的網站特別可以從使用獨特的背景顏色或清晰的邊框中受益,從而有效地將標題與下面滾動的頁面內容區分開。此外,大頁腳的單一統一背景色  可有效地表示該區域中的所有鏈接都屬于一個組。

          創建清晰的邊界是一種強大的視覺提示,可以壓倒其他分組原則,例如接近性或相似性。因此,當需要包含幾種不同類型的UI元素或無法調整對象之間的空白量時,它是一種強大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區分,那么我們可以用線框畫出邊界來達到目的。

          2、相似性原理

          如果其它因素相同,那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理,這也就是我們平時做視覺設計時的原理,比如我們設計稿宣講時可能會被開發、產品以及測試同學問到“為什么用這個形狀?為什么這里用這個顏色?為什么這兩個尺寸不一致?等等,細細體會這個相似性原理就會給我們答案,讓我們在畫設計稿時能夠有理有據。


          A相似性原理之形狀:

          在上圖中,我們頭腦中自然而然的會分成“四列”,也就是圓形一列,三角形一列,然后再圓形一列,三角形一列,而不會看成“三行”


          B相似性原理之顏色:

          應用共享的顏色來表示某些項目是相關的,因此可能具有相似的功能,這很有效。通用顏色往往比其他特征(例如形狀)更加突出,因此可以用于組合不同類型的元素并傳達它們確實相關。         

          在用戶界面設計中,顏色通常用于指示常用功能。例如,使用單個鏈接顏色作為與用戶交流可點擊內容,鏈接顏色應僅保留給交互式文本和其他可單擊元素,因為用戶會意識到所有具有此特征的項目都是相關的,并且以相同的方式工作。因此,鏈接顏色不應用于關鍵字,不可點擊的標題或實際上不可點擊的附近圖標。

          如上圖,就是一個用色的反面例子,“ 消息中心”中的所有按鈕均為綠色,因此用戶必須花時間確定哪個是提交表單的主要按鈕。(此外,“ 提交”按鈕離消息區域很遠,并且根據Fitts的定律,這種缺乏接近性也會降低用戶的速    度。)

          相同顏色的按鈕將被視為具有相同的重要性級別。因此,應為主要操作性按鈕保留單獨的顏色,以幫助它們在輔助按鈕中脫穎而出。

          C相似性原理之大?。?/span>大小也可以用來表示關系。大小相似的對象可能被認為是相關的,通常具有相同的重要性。

          在用戶界面中,我們經常使用大小來強調內容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度,并且在所有其他條件相同的情況下,將共享該屬性的所有元素連接在一起。一致地使用大小會創建視覺層次結構,并使頁面易于掃描,因為人們可以立即看到并理解這些類型分組。

          例如,在產品列表頁面中,每個單獨的產品列表都以相同的大?。ê拖嗤男螤睿╋@示。這種一致的視覺樣式告訴我們該區域中的所有物品都是產品。共享大小將其與其他不同的UI元素分開。當某項商品在此列表中以不同的大小或形狀出現時,就會突出顯示為不屬于產品分組。下面這個產品集合的促銷以單個產品列表大小的兩倍顯示。


          下面是我最開始嘗試的招聘系統首頁的改版:

          根據上面的相似性原理和接近性原理就可以很容易看出來,這個頁面結構和邏輯不清晰:

          1.待處理和招聘日程兩個模塊之間的區分不夠清晰:因為這兩個模塊右側應用了同樣的形狀和顏色的按鈕(相似性原理),讓用戶在心理上產生聯想,同時這兩個模塊之間只靠間距來區分,區分的太弱了(接近性原理)

          2.招聘日程頭部日期與下面的面試安排卡片聯系太弱:因為面試卡片用了非常強的邊界區分的線條(接近性原理-構建清晰的結構)確實在面試模塊之間構建了清晰的結構,與此同時卡片與頭部的日期之間看起來沒有什么關聯。

          3.首頁的選中效果太弱,分析這個頁面的層級,左側首頁選中才應該是最重的,能讓用戶第一眼就知道在系統中的位置,很顯然目前來看很容易忽視首頁這個位置,關注點被吸引到了快捷入口。這并不是我們想要傳達給用戶的。

          根據格式塔原理中的相似性原理和接近性原理,對頁面的結構進行了調整,就看起來清晰多了。

          所以,我們在制作完設計稿后,可以應用格式塔原理,分析下最終呈現給用戶的結構和邏輯是否清晰。而這也是做視覺的理由和底氣。


          3.連續性原理

          視覺傾向于感知連續的形式而不是離散的碎片。

          連續理解起來是很簡單的,但連續卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環連接成一個整體。在引導頁中經常會用到這個。

               

           4、封閉性原理

          視覺系統自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。

          閉合可以實現統一整體,這不難理解。但是有一個非常有趣的現象值得我們去觀察和思考,就是不閉合時候也會實現統一的整體,更確切的說,這種現象是一種不完全的關閉。這些圖形與設計給人以簡單,輕松、自由的感覺。所以,完全的閉合是沒有必要的。最著名的應用便是蘋果公司的logo,咬掉的缺口喚起人們的好奇、疑問,給人巨大想象空間。

          5、對稱性原理

          我們傾向于分解復雜的場景來降低復雜度。


          6、主體/背景原理

          我們的大腦將視覺區域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素,其余則是背景。這個原理經常會在海報設計中應用,這也是為什么我們做海報,做平面時,一定要制作好背景,背景的氛圍很重要。

          文章來源:站酷   作者:ZZiUP

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

          如何在設計中構建共情 (同理心)

          資深UI設計者

          -設計過程中,共情(同理心)的一些觀點和心得,希望能夠讓更多設計師對這些軟能力有更好的提升和應用,歡迎前來交流探討



          到底什么是共情

          ————


          在體驗設計的過程中,如果不能對設計對象有更深入的了解,設計思維就無法開始。而用戶對產品持有的觀念、態度甚至意見并不一定會表現的很明顯,這需要設計者更加主動的與用戶進行互動去構建共情。這可以使得你能夠更加了解他們的需求、想法、情緒和動機。好消息是,你能掌握多種方法來與用戶構建共情去獲取更多信息。并且當你有足夠的“正念”和經驗時,你也能成為共情他人的專家。

          “正念”:有目的的、有意識的,關注、覺察當下的一切,而對當下的一切又都不作任何判斷、任何分析、任何反應,只是單純地覺察它、注意它。



          百科

          共情(Empathy),也稱為神入、同理心,共情又譯作同感、同理心、投情等。 由人本主義創始人羅杰斯所闡述的概念,卻越來越出現在現代精神分析學者的著作中。不管是人性觀還是心理失調的理論及治療方法似乎都極為對立的兩個理論流派,卻在對共情的理解和應用上,逐步趨于一致。共情似乎為現代精神分析與人本主義的融合搭起了一所橋梁。


          通俗含義

          我們常說的感同身受、換位思考、同情心、設身處地、將心比心這都是共情的一種描述。Empathy一詞源于德語“Einfühlung”,意為讓人們跟藝術品融為一體,比喻走進一件藝術品的奇妙體驗,因此國外常常會看見“站進別人鞋子里去”的共情比喻——(Stepping into their shoes as the saying goes, in order to gain a deeper understanding of their situations.)意為正如俗話所說,站在他們的立場上,以便更深入地了解他們的處境。


          對于“共情”我更多的理解成是兩個或多個載體之間的一種共識一種情緒共鳴,然后再到行為跟思維上的影響。但實際上發生完全的共情是不可能的,有時連我們自己也會做一些無法理解的迷惑行為,并且客體是多樣化的,可以是跨物種的,跨維度的。而我們要做的就是在工作中定義共情的有效范圍,盡可能的與目標用戶產生共情以了解更多信息或需求,然后去定義和構思新的需求與設計。共情很重要,但它不是設計工作中的全部,有效而不要過度的使用也很重要。


          1. 共情載體的多樣化可以是你通過一幅畫感受到了作者的情緒表達

          2. 十字路口聽見火車的鳴笛聲,從而感知到危險的信號

          3. 當你傍晚處在城市生僻的角落,打開地圖軟件,亮起了回家的導航


          身邊的共情

          我們身邊的共情無處不在,正是這些共情使得人與人之間的情感更豐富,當然也是因為人類有強大的表達能力。通常當客體情緒在表達出來的情況下,主體是可以更容易得到共情的。所有當主體更專注的去感受客體的情緒表達時,能夠使達到共情變得更迅速。



                  常的的共情場景;


          1. 身處于電影院,看到某一段感人的情節,很多人開始淚盈眼眶。

          2. 朋友講述著自己的不幸,你聽完后的同情與表示理解他。

          3. 看著熟睡的嬰兒,人們自覺的保持了安靜的氛圍。

          4. 準備上樓,當眼看電梯門就要關上時,里面的人幫忙打開了電梯門。

          5. 正在寫報告時,突然的停電讓你措手不及,也讓你的同事措手不及。

          6. 與伙伴開黑游戲,共同取得勝利那一刻。

          7. .....


          以上都是一些生活中常有的共情場景。通常當我們與其他客體得到共情時,往往我們能夠更清楚客體傳遞的信息是什么、需求是什么,這完全可以應用到我們的設計場景中幫助我們獲取更多的有效信息。



          共情對體驗設計的作用

          ————


          如果你想要更了解你的產品用戶,從而讓你的產品更好的服務用戶得到更好的體驗口碑,那么體驗設計師如果對目標用戶沒有更深入的了解,那么產品設計中的各種設想都是沒辦法決策的,甚至都難以測試和驗證,這對產品研發一定是一個危險信號。而共情則能幫助我們洞察用戶需求和定義問題,所以共情在體驗設計中顯得基本且至關重要。


          以交互設計為例

          - 電商的界面設計:

          產品原型與交互界面時常是有所出入的,其原因在于前者更關注產品本身框架與盈利點,而后者更注重整體的用戶體驗的細節。共情用戶需求,以及思考商業盈利與用戶體驗之間平衡的點似乎是無法脫離共情應用的。這便是共情應用的一種體現,也是共情價值與設計賦能的體現。



          - 移動端常見廣告推廣界面:

          一直以來在產品營銷廣告中,始終存在一些流氓的交互方式讓用戶苦惱。往往更加注重和尊重用戶感受可以更好的提升用戶的好感與使用體驗,這便能夠使產品與用戶之間的感情升溫贏得口碑。



          - 組織產品功能架構時:

          在構建產品業務框架時,大多可能會出現以公司服務資源為中心的構建方式,但同時這種由內而外開發方式會為產品帶來更多的弊端(往往產品投入使用后,會出現超出預期的問題)。嘗試去站進用戶的鞋子里去,或者找來目標用戶甚至是相關的專家來做咨詢,減少研發迭代的彎路。



          用戶研究中的共情應用

          - 用戶畫像:

          用戶畫像是體驗設計中常見的一種設計工具,它能夠幫助產品定義目標用戶,能夠有效用于產品設計決策或者洞察用戶需求等。一個好的用戶畫像是基于真實用戶的,它不是胡編亂造的。畫像在于形成多組可供參考的角色材料,這有利于跨團隊跨層級之間快速實現共情,達到業務目標的統一性。因此一組目標用戶畫像能否幫助團隊快速實現共情是一個重要的衡量標準,而不僅是一組人口調查數據。



          - 用故事去描述:

          故事的元素通常會更豐富更有趣味,用故事敘事更能提升用戶的興趣和關注,這能便于構建共情。因此當你發布測試任務或者撰寫研究報告時,都可以加入背景故事或用故事敘事,便于對象更容易理解和共情,你甚至可以用筆繪制故事版,像四格漫畫一般,因為用圖傳達概念或信息更容易讓人記住或回想起來,并且當你用這些方法時,自身也能加強理解。共情不是單向傳遞的,不要高估對方的理解能力,讓你的信息更簡單明了的傳遞也是重要的共情應用!



          - 仔細傾聽和觀察:

          在與目標用戶進行互動的時候,通常會借助電子設備幫助記錄這個過程,目的是為了更仔細的觀察和聆聽,并注意到被忽略的信息。就像一種正念,我們會帶有目的性的觀察目標活動,并且不會進行干涉,同時不對當下發生的一切提前作出任何結論、分析或判斷,直至這個過程有了一個里程或結果,我們再將收集到的各種信息放在一起去思考。傾聽和觀察是人與人之間互動的根本方式,相對仔細完整的傾聽與觀察可以獲取到更加有效的共情,而片面的則可能產生共情偏差。



          小結:

          共情在體驗設計的應用中很廣泛也很重要,甚至還延展了許多幫助共情的工具,這些都是為了讓設計者能夠更好的了解市場、發掘用戶需求、甚至找到新的產品機會,最終幫助企業解決產品實際問題。有時在共情工作中,我們就像一個老中醫一般,對患者望聞問切。 一旦有了問題,就應該及時使用適當的方式去共情目標對象,定位問題所在,并制定解決方案。



          如何在體驗設計中構建共情

          ————


          制定共情的范圍

          為了尋求更加有價值的目標用戶進行共情研究,我們會對共情的目標進行范圍篩選,可以是根據某些用戶習慣、常使用的產品服務、某個場景、也可以是社會群體(例如學生、司機)、甚至可以是動植物(例如寵物類產品)。所以第一步你要根據需求去制定共情目標的篩選條件,然后一點點縮小和鎖定有效的目標群體,再開始招募、溝通或是進行其他下一步工作。我們沒辦法跟所有目標用戶構建共情也沒有必要這樣做。通常五個左右的用戶就能夠反映出大多數問題,并出現重疊的反饋。


          - 在不同研發階段嘗試與特殊的用戶共情

          伴隨產品的發展過程用戶也在時時發生微妙的變化,在跨度大的迭代中,嘗試與產品潛在用戶或極端用戶進行共情研究也是很有價值的。潛在用戶的需求通常存在著更多的不確定,這也意味有發現新機會的可能。而極端用戶通常會有一些更刻薄的需求,這些需求可能不是主流,但也有主流發展的潛力,不過至少這些改進會為極端用戶帶來驚喜。這就像是在公交車站下安裝一臺自動售賣機,不是大多數人的需求,也不是當前的主流趨勢,但卻能夠為部分乘客帶來方便或驚喜,我們不能忽略這些少數。




          帶有目標的進行

          在體驗設計的過程中,我們需要與目標對象構建共情時,一定是有目的有意圖的。以使用性測試為例,往往我們都會設定一些產品測試任務和目標給用戶,再進行觀察和共情。這也將允許我們能夠在同一個或相似的場景事件中發生共情,這樣才能夠獲取到更真實有效的共情。以一個吸塵器產品為例,如果對方是在地毯上測試的,而你是在木質地板的環境下去共情的,那么共情結果肯定是有所出入的。所以構建一個共情目的甚至是環境是有效共情的一個重點之一。



          情緒降噪與傾聽

          構建共情會受情緒影響,在共情前有必要去除負面情緒影響,不要為共情構建帶來更多的阻力,另外則是仔細的傾聽和理解。這就好比我們要專注學習,除了認知聽講,腦子里一旦充斥著其他負面情緒或思維影響,就很難完成專注學習的目的。同理,在用戶幫助我們測試產品或訪談時,我們也要首先做好彼此的心理建設,去除主要的負面情緒甚至去除不利的環境影響因素,例如緩解用戶緊張不安的情緒,找一個素一點且安靜的測試房間等。



          合理的工具輔助

          圖表、筆記、錄制設備是幫助我們共情的最好工具,在不同的場景下,這些工具能夠幫助我們更好的收集信息,并且便于我們思考和共情。我們在短時間能記住的信息是有限的,這也是為什么我們會用到7±2這種定律去控制信息量的原因。以用戶體驗地圖為例,在記載用戶體驗產品的過程中,便是一種很好的共情輔助工具,它能夠按照使用步驟或階段記載用戶使用情況和情緒變化等反饋。



          構建共情的要素

          在我的理解中,共情由四個主要的因素影響來構成。

          一、尊重:受到不同的環境跟經歷影響,要去準確理解一個人是很困難的,哪怕是多年的夫妻也是如此。所有首先要做到尊重,消除任何偏見,不要帶有批判或評價的心理。然而做到足夠的尊重也并不容易。

          二、觀察:觀察是獲取客體傳遞信息的主要途徑,不能掌握足夠的信息是無法做到共情的,片面的或者假設的信息都將影響到正確的共情。

          三、思考:對客體的信息與觀念進行思考,嘗試理解客體的各種行為根因以達成一致的認知。

          四、融入:將自己感受到的情緒與認知代入到共情對象的行徑中,去仔細揣摩,以洞察用戶的行為、感受、需求、思維方式以及與產品之間的關聯,就像靈魂附體一般,以達到更深入的共情來定義問題。




          共情為設計賦能

          最后便是共情結果如何應用到設計之中,將共情結果賦能到產品設計也是共情工作的價值所在。通常這套流程是共情->定義->構思->原型->測試,在這個整個過程中隨時是可以返回到前面其他階段中反復打磨的,而共情作為一個起點也揭示了其重要性。我們一切的共情工作皆為了能夠優化和解決產品的問題,使得產品體驗能夠更好,這是我們在體驗設計中不斷去共情的初衷。




          好的共情設計欣賞

          ————


          以移動端的產品來講,現在好的共情設計真是百花齊放,這正是創新技術與共情設計發展的好趨勢,也是敢于創新探索的好機遇。這里我們放三種典型的欣賞案例說一下;


          一、智能便捷型:給用戶提供更加智能便捷的服務功能,使得用戶能夠獲得更輕松流暢的服務體驗;




          二、人性化類型:通過大數據與技術手段,為用戶提供更加人性化的服務方案,提升用戶好感度、依賴性,加強產品口碑與體驗;




          三、情感關注型:有一些屬于情感關注類型的共情設計,通過獲取用戶的場景信息或其他數據共情用戶情緒,并給予用戶合適的關愛、幫助、引導。為用戶帶來軟件有情感,品牌有溫度的體驗;



          小結:

          在體驗設計中,情感化設計一定會是一個值得深入方向,我們應該關注到不同場景下用戶會產生的情緒變化,為用戶提供更加走心的服務體驗,為產品收獲更多口碑。當然,在產品完善的這個漫長過程中,我們也要隨時甄別我們所做的事情是否對用戶和企業有更高的價值。在研發資源有限的情況下,劃分這些設計點的權重,合理分配研發資源。



          共情構建中的認知偏差

          ————


          能夠對共情構建產生影響的認知偏差挺多的,這些認知上的偏差會影響到共情的正確性,不僅是構建共情的主體還是客體都會有影響。國外產品設計師Abhishek Umrao在UX MAGAZINE(https://uxmag.com/articles/6-ways-psychology-affects-your-design-work)上整理了六個關于影響UX體驗設計的認知偏差可以了解一下。這里圍繞構建共情補充了一些相關認知偏差,希望能夠在構建共情的工作中再少一些坑;


          1. Empathy gap(共情偏差)

          共情偏差是指由于經驗、預期和態度存在差異,我們很難準確地去體會他人的感受。這一點就是前文提到的我們無法做到完全共情,我們對共情的概念要有一定認知。

          建議:通過技巧去彌補,減少認知偏差。多一些耐心的聆聽,減少偏見和執念,嘗試思考如果是TA該怎么辦?


          2. Negativity bias(負面情緒偏差)

          情緒會對我們的認識和行為產生影響,而負面情緒產生的影響則是最大的,這會對我們的共情判斷產生偏差,所以前文我們會提到消除情緒噪點的概念。

          建議:盡可能的維持中立或積極的情緒狀態會更有助于共情工作,但至少是消除負面的情緒影響。


          3. Observer-expectancy effect(觀察者預期效應)

          觀察者常常會不自覺地扭曲影響因素或數據,以得到預期結果。這就好比在用戶進行產品測試的期間,向你咨詢了意見,而你很有可能不自覺的給出你的期望或者一些暗示,這會對目標產生可暗示性偏差(Suggestibility),使得目標想到的內容往往會被扭曲。

          建議:1. 對面向用戶的測試材料進行自查糾正,盡可能處于中間立場,不要干擾測試結果。2. 在主持訪談或用戶測試現場時,對于用戶的主動咨詢或交談中不要解釋過多,讓用戶理解其定義跟概念即可,說的越多越是容易出現觀察者預期效應。


          4. Automation bias(直覺偏誤)

          基于自身的認知或經歷,有時做出判斷會過度依賴個人直覺,而不去收集更多有益于做出準確判斷的證據。這一現象常常表現為產品或項目經理的一拍腦袋的決定,但是往往因為過度依賴直覺而忽略了實際的場景差異等。

          建議:對于不能直接給出有效證據的決策,要敢于質疑而去追究其正確性。當使用參考信息時要思考兩者之間的差異性??傊灰獞{借事件的相識性而忽略差異性,最終憑直覺決策。


          5. Authority bias(權威偏見)

          人們會過度倚重某些權威的意見,而忽視事情發生的實際背景。以品牌的影響力為例,兩種不同的任務實施程序,通常人們會認為大品牌的方案更好更值得信賴,而忽略了一些體驗細節。

          建議:對于相比較的軟件測試任務,我們有時會弱化甚至隱匿品牌信息。其目的便是在比較時減少這些權威偏見,不論是正面的還是負面的,這些都會影響用戶判斷,所以在特殊的場景研究下,請注意這一影響是否干擾結果。


          6. Normalcy bias(正?;`)

          人們會過度依賴先前的經驗,把一些極端事件看作正常的,認為事情很快會過去。以用戶測試為例,當6個人都正常完成了測試任務,僅有一人出現出現問題時,這是一個概念問題,我們不能忽視這僅有的一個用戶,更不能安慰自己這只是一個特例。

          建議:上文有提到嘗試與極端用戶進行交流,其實道理類似,問題純在即合理,我們有必要注重和研究這些極少數,它們極有可能帶來新的機會點。


          7. Illusion of transparency(透明度錯覺)

          人們高估自己的個人心理狀態被他人知曉的程度的一種傾向,時常表現為你以為別人都明白了你的意思,實際上別人明白的還遠遠不夠。與“知識的詛咒”這一偏差的差別在于,前者是我以為對方明白了實際對方還有諸多不解,而知識的詛咒是你無法給對方進行可理解的解釋,有著文化背景或認知的障礙,實際上這兩者偏差概念都會影響到共情工作。實際辦公中透明度錯覺時常體現在需求表達、文檔解釋、跨部門溝通中,往往你以為你說的已經很清楚了,但在實際研發中卻會體現出諸多差異。

          建議:適當的了解其他部門的專業文化,便于更好的解釋給對方。組織好信息框架,簡單易懂的信息框架易于對方理解,例如書本的目錄大綱、信息的分類等??鐖F隊或部門的PRD(產品需求文檔)盡可能的減少專業術語的應用或者進行注釋,文檔的目的不在于體現多專業而是更加易懂的傳達信息。


          趣味思考

          ————


          研究用戶從觀察自己開始。每個時代的人都會有不一樣的特質或者某些現狀,在這個大環境下,你會發現與同齡人之間有很多相似點,那么加強對自己的行為理解,是不是就等同研究了這些同齡用戶的共有特征?這些特性是否會對你的產品使用有關聯?帶著這些特性去體驗你的產品時,是否會發現新的機會點?



          參考文獻:https://uxren.cn/?p=68537#影響UX設計的6個心理偏差

          參考文獻:https://uxren.cn/?p=68382#如何構建同理心


          文章來源:站酷    作者:泡泡bing


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

          學會「交互設計五要素」,幫你更快Get到設計關鍵點! 我要投稿

          資深UI設計者

          B端浪潮下設計師的「尷尬」

          供應鏈資源整合是企業發展態勢。企業對內部多崗位協作、企業與企業間的協作效率有更多訴求。

          企業級服務系統的智能在線處理、數據準確、信息安全等特征,成為企業實際作業的得力助手。(以下簡稱B端)

          系統提供商也便對業務型產品、設計、開發、運營等人才有更多需求。

          在C端浪潮中,設計師通過創造用戶流暢和驚喜的體驗,發揮了顯而易見的價值。

          然后B端系統的業務復雜特性,普遍認知產品經理、開發會體現更大的價值。

          設計師作為中間角色,難免「尷尬」,甚至淪為產品經理原型的高保真繪制人員,缺少發言權,或初次接觸對海量信息無從下手。究本質原因:

          未直接接觸業務方和用戶,無法對需求場景有深入的了解,缺少系統性設計分析、設計判斷能力

          我在幾年的實戰中,運用辛老師 「交互設計五要素」 基礎原理,融合于B端業務體系,形成一套自己的思維圖譜。(以下簡稱五要素)

          從「五要素」出發,會更快速地get到關鍵設計點,抱著開放的態度與產品討論方案,總會愉快地達成一致,順利對接開發。

          B端「五要素」詳解

          就像我們寫小說「講故事」一樣:時間地點人物、有什么目標、使用什么工具,完成什么事情,故事才完整?;贐端實際業務場景的五要素,阿飛解說如下:

          1. 用戶-角色、權限

          角色:

          老板、運營、銷售、物流、采購、庫管、財務等(不同崗位日常事項不同)

          權限:

          主子賬號(涉及到模塊間的操作權限、數據權限)

          2. 目的

          用戶目標:

          B端一般是具有明確的作業目標,更地完成工作。老板一般希望節約人力成本,且可即時響應客戶需求

          商業目標:

          為客戶賦能、提升下單率、支付率、新業務滲透力、裂變等

          業務目標:

          產品會不斷的迭代,了解當下需求中的業務目標

          設計目標:

          基于以上目標,設計需符合用戶思維習慣,提高處理效率,同時避免誤操作等

          任何場景下,人的行為都是有「目標動機」

          當以「目標」為出發點,可以增強設計判斷力,輸出有效方案。另外真正有價值的商業目標一般都是和用戶終極目標所吻合。

          3. 場景

          時間、地點是場景的必要組成

          When:

          隨時隨地在線或工作日期間,如:售后客服需要隨時在線;財務人員一般工作日處理任務

          Where:

          辦公室、倉庫、戶外等。需考慮線上線下結合,系統是為用戶的線下作業場景服務

          4. 工具或媒介

          臺式電腦、筆記本電腦、手機、平板、掃碼槍、PDA、打印機、肢體、智能運輸車等

          互聯網媒介又包含web網頁端,web客戶端,小程序,H5,App

          系統功能承載在媒介中,媒介承載在實際作業下使用的工具,存在多終端配合使用。比如倉庫移動作業時,會使用到平板進行盤查核對等。

          5. 行為

          需要完成什么事?通過典型的任務流分析是否可達到目標

          學會「交互設計五要素」,幫你更快Get到設計關鍵點!

          △ 倉庫移動作業場景

          「五要素」帶來的機遇和價值

          B端復雜業務下,設計師主動了解用戶實際的場景后,五要素作為必需思考元素,經過實戰驗證,帶給設計師的機遇價值至少有2方面:

          1. 對設計師自身:

          有利于設計分析、判斷思維體系的完善,考慮更全面;所輸出的方案符合用戶思維和習慣,更容易得到各方的認可

          2. 對于業務價值

          可作為考量產品方案可行性的判斷準則
          另外,產品原型一般基于「功能」本身,而設計師從用戶實際場景規劃用戶的任務流,可以優化產品邏輯,補全缺失場景,也會給予創造性解決方案

          舉個實戰栗子

          比如「開發票」功能 :

          • A購買B的服務后,系統會統計時間段內訂單金額;
          • A可向B申請開發票,B接收到申請工單
          • B線下開票后,上傳發票憑證,單據變成已完成狀態(系統不對接發票打印接口)

          在需求評審中,針對于「A向B申請開票,A撤銷申請不需要B操作同意」這點,我提出建議:「需要B線上同意」

          首先確實是要避免無謂的用戶線上流程操作,但針對這點,我分析如下:

          • 用戶是財務人員,「開發票」是其重要嚴謹的工作事項之一
          • 線上線下場景結合。B看到A的申請單據,極有可能B線下已開發票還未錄入系統。
          • 此時申請取消開票,若不需要B同意/拒絕,會造成糾紛,平臺需要負責。

          所以「A撤銷申請B需要線上操作同意或拒絕」

          學會「交互設計五要素」,幫你更快Get到設計關鍵點!

          △ 打印發票

          以「五要素」的分析思維的表述,最終與產品、技術達成一致。

          在設計中,考慮到「A申請撤銷」的單據,對于雙方都是需要優先確認和處理的。所以除有即時消息通知外,列表中我做了2點設計:

          • 會把這批單據使用淺紅色底,起到提示作用
          • 優先放在分頁列表最前面

          (若不這樣,在分頁列表中特殊單據很有可能從第二頁后才出現,用戶都發現不了)

          學會「交互設計五要素」,幫你更快Get到設計關鍵點!

          △ 狀態操作參考框架示例-原創

          總結

          回顧下B端交互設計五要素

          • 用戶:角色、權限
          • 目標動機:商業、業務、用戶、設計,
          • 場景:什么時候?在哪里?
          • 工具或媒介:作業場景中使用各種工具
          • 行為:基于用戶任務流的行為設計

          設計師的分析、判斷能力是非常重要,五要素則作為系統性的思維支撐。

          B端浪潮中,設計師仍有很大的機遇和價值?;谖逡胤治觯瑫I務有所優化和補充,或提出創造性的解決方案。

          設計不僅是一種技能,而是對事物本質的感知和洞察能力

          交互設計五要素不僅對設計師有幫助,同時對產品、運營等人員同樣具有價值。

          文章來源:站酷    作者:Aber UX設計



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


          想讓交互更走心?這4種可見狀態微交互技巧一定要學會

          周周

          在經典的尼爾森十大啟發式當中,「系統狀態可見性」可以說是如今交互設計領域當中,最為重要的原則之一。通過向用戶展現當前的狀態,讓用戶擁有對系統的控制權,建立用戶對于產品的信任感,這也是這種設計啟發式的最重要的價值之一。

          但是,想要做到可靠、易用,系統狀態展現的技巧是很講究的。這里梳理了4種最為常用的方法,結合了不少實用的案例,希望對你有所幫助。

          1、展示用戶位置、進度的視覺反饋

          1.1、讓用戶知道自己在哪

          沒有人會喜歡迷失方向,但是無論在現實生活還是在數字領域當中,這種情況都會發生。讓用戶知道他們在哪里是創建良好導航體驗的關鍵。應用程序和網站都應該凸顯當前的導航選項,幫助用戶了解他們所在的位置。

          Google 的底部導航欄設計

          1.2、要經過多少步驟來完成任務

          這也是一個非?;镜牟僮?,通過展現步驟數量,幫助用戶來預估完成這個過程所需要的時間。

          Selecto 的調查問卷的設計

          2、輔助用戶交互的視覺反饋

          數字界面畢竟不是現實世界中的真實硬件機構,用戶更多只能借助交互過程中的即時視覺反饋來確定是否完成了操作,即時的視覺反饋因此顯得非常重要。

          即時的視覺反饋讓用戶的操作得到了視覺上的「認可」,從而強化了「確信感」,這樣一來一回的確認可以避免錯誤的發生,比如可以避免用戶因為「感覺沒有點下去」而反復點擊。

          這種視覺反饋的設計,最常見的范例就是點擊按鈕按下的微交互動畫,它告知用戶「系統已經捕捉到點擊交互了」。

          AliAli 所設計的懸停點擊動畫

          但是在某些狀況下,按鈕的視覺反饋還有很多不同的呈現形式,有更多可見的、可理解的新形態,可以在原有的基礎上探索更多可能性,比如下面的

          2.1、單擊點贊按鈕

          Spread love, not viruses ,作者  Charles Patterson

          2.2、開關按鈕

          這個開關按鈕不僅有點擊動效,而且色彩和按鈕標識也隨之改變,更為清晰地表明狀態,甚至兼顧到了視覺障礙用戶

          Switcher XLIV , 作者 Oleg Frolov

          2.3、書簽按鈕微交互

          這個書簽按鈕通過色彩的虛實變化來呈現書簽已添加的狀態,頗為巧妙。

          Bookmark interaction,作者 Oleg Frolov

          2.4、添加購物車微交互

          在這種情況下,視覺反饋非常明確且優雅地告知用戶已經添加到購物車里面了。

          咖啡下單動效,作者 Nhat M. Tran

          3、呈現系統狀態的視覺反饋

          3.1、系統正忙于什么事情

          當系統正在加載,正在執行,正在運行的過程中,通過動效來告知用戶系統并沒有停止,而是正忙于執行某件事情,是避免用戶誤解的手段。在用戶等待的過程中,通常會實用無限加載的動效(一般使用在低于10s的操作中):

          對于超過10s的更長的執行過程,無限加載的動效會顯得令人沮喪,這個時候實用進度條會更好:

          這些視覺反饋很大程度上降低了系統給人的不確定感。

          對于移動端應用,在初始加載階段所使用的啟動動畫界面,是否精心設計,決定了用戶對于整個產品的第一印象,優秀的初始加載動畫能夠將用戶的注意力從焦躁的等待中解放出來。

          Logo 閃屏 ,作者 Gleb Kuznetsov?

          3.2、內容加載

          當用戶需要時間來加載內容的時候,建議使用一種特殊的的容器「界面骨架」來展現。這種臨時的內容容器不僅能夠幫助用戶快速地了解界面的整體框架,構建用戶預期,并且能夠在后臺快速地加載數據,漸進式地幫用戶獲得信息。

          內容加載,作者 Ginny Wood

          這種設計方式對于移動端和桌面端的設計同樣適用:

          界面骨架加載動效,作者 Shane Doyle

          4、觸發事件

          4.1、通知和提醒

          有效的通知和提醒,能幫用戶意識到有新的事情正在發生。在多數時候,我們建議設計師使用微妙的動畫來進行通知,因為動畫效果會自然地吸引用戶的注意力,人類的雙眼的動態視覺其實是非常強的。

          Aleksei Kipin 設計的通知動效

          4.2、提示用戶采取行動

          在很多情況下,用戶界面中會有很多地方會需要用戶提交信息。比如,需要用戶提交表單,或者用戶創建了一個密碼,但是在復雜度上不足需要修正,或者填寫郵箱來訂閱信息的時候,郵箱格式出錯,等等。使用適當的視覺反饋總能夠更加有效地將問題告知用戶。

          內聯郵箱驗證機制,作者 Derek Reynolds

          結語

          讓用戶有掌控感,就是為用戶創造更好的體驗。在很多設計方案中,視覺反饋會因為種種原因被削弱了,甚至被忽略了。但是當用戶在和 UI 進行交互的時候,期望度和可動性其實是高度依賴于這些動效和微交互,而這正是設計師需要設計出優秀視覺反饋效果的原因所在。

          文章來源:優設     作者:Nick Babich

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

          汽車交互手勢,這樣設計才有趣

          資深UI設計者

          隨著車內屏幕越來越多,越來越大,駕駛者在開車過程中因操作屏幕而分心機率逐漸升高。眾多汽車制造商均希望探索出一種降低或避免「駕駛員分心」的安全性技術。

          手勢,是指人手、手和手臂結合產生的動作,作為解決「駕駛者分神」這個痛點的解決方案之一,正在全世界的汽車制造商中掀起「熱浪」。

          你只需要隨意的揮一揮手,就能掛斷電話;將手指向順時針或者逆時針方向移動,就能調整音量大小。

          互聯網基因:屏內手勢交互

          汽車手勢的出現,源于對車內屏幕的操作。而這些操作均來自于移動端的設計標準,比如蘋果IOS設計規范中的標準手勢或者谷歌Mertiral Design中的標準手勢。

          汽車交互手勢,這樣設計才有趣

          △ 移動端常見交互手勢

          常見的手勢如上圖,分別為

          • 點擊:激活控件或選擇一個項目
          • 滑動:上下滑動,或者左右滑動來連續移動需要查看的內容
          • 按住并拖動:在屏幕上左右或者上下移動某個元素
          • 雙擊:放大或縮小內容或圖像,并使之居中
          • 捏:外捏時放大,內捏時縮小
          • 長按:進入文本或內容編輯狀態

          為了滿足手機屏幕外觀改變,屏內顯示內容越來越多元化的需求,設計師們也在探索屏內手勢的新玩法。

          汽車交互手勢,這樣設計才有趣

          △ android底部導航欄按鍵從左至右分別為:返回上一級、返回主頁、多任務

          2017年iPhoneX的發布,正式開啟了全面屏時代。為了替代Home鍵及android底部導航欄,各大手機廠商相繼開始擁抱「全面屏手勢交互」。

          在車機系統中,部分汽車制造商也在積極迎接變化,比如理想one采用「三指下滑」的手勢交互替代「返回主頁」的圖標按鍵。

          汽車交互手勢,這樣設計才有趣

          △ 「 三指下滑」表示返回主頁

          2019年的Google I/O大會上,新版本Android Q選擇與IOS采用一樣的手勢操作邏輯,即在屏幕下方提供一個指示條,用戶在左側頁面邊緣右滑代表「返回上一級」、提示條區域上滑代表「返回主頁」、提示條區域上滑并懸停代表「多任務」。

          汽車交互手勢,這樣設計才有趣

          △ android系統中的三種全面屏手勢

          隨著全面屏手勢在手機端的操作交互上達成一致,相信在不久的將來,也將越來越頻繁的在車機端看到全面屏手勢的「身影」。

          車機新玩法:多屏聯動交互

          當汽車與數字屏幕相遇,如何讓屏幕與內飾結合的更加完美,又能突顯品牌特性,似乎給內飾設計師帶來了許多挑戰與機遇,「一字屏」、「T字屏」、「7字屏」、「旋轉屏」應運而生。

          汽車交互手勢,這樣設計才有趣

          △ 拜騰M-Byte 一字屏

          汽車交互手勢,這樣設計才有趣

          △ 理想one的T字屏

          汽車交互手勢,這樣設計才有趣

          △ 合創007的7字屏

          汽車交互手勢,這樣設計才有趣

          △ 比亞迪王朝系列的旋轉屏

          與此同時,因為成本及技術的限制,汽車制造商的量產車型不得不在屏幕上做出妥協。理想one的妥協方案是利用3塊屏幕組合,在視覺上形成「大長屏」的既視感。

          汽車交互手勢,這樣設計才有趣

          要讓3塊屏幕「變」成一塊屏幕,僅僅在視覺上做足功夫顯然還不夠,多屏聯動手勢交互也不能「缺席」。

          事實上,多屏聯動手勢交互依舊來源于IOS及android系統中的標準手勢,它將不同的手勢進行組合,并與頁面聯動顯示,形成了多屏聯動手勢。

          理想one在停車模式下,用戶長按并向左滑動,即可將副駕娛樂屏上的信息「甩動」至中控屏。

          汽車交互手勢,這樣設計才有趣

          天際ME7不僅有3塊屏幕組合而成的前排「一字屏」,還有2塊后排乘客娛樂屏,5屏聯動的手勢交互,天際采用「手勢+屏幕顯示」來解決。

          汽車交互手勢,這樣設計才有趣

          在中控屏、副駕娛樂屏和后排娛樂屏上采用五指抓取手勢進入多屏互動頁面,比如想把中控屏上的內容分享給副駕娛樂屏,第一步是單擊選中副駕娛樂屏,第二步按住并拖動中控屏至副駕娛樂屏位置,第三步在副駕娛樂屏中點擊確認。

          視頻版交互演示:https://v.qq.com/x/page/w08791lhqus.html

          未來已來:隔空手勢交互

          通過隔空手勢接聽或者掛斷電話,這似乎是科幻電影中才有的情節。但正如開篇所說,車內屏幕數量增多,尺寸加大的同時「駕駛者分心」的機率也增加了,盲操手勢與隔空手勢的出現,是解決這個痛點的一種嘗試。

          目前量產的汽車中,盲操手勢主要是通過標準手勢與聲音反饋的組合來實現。

          比如在理想one中,用戶在空調屏上左右滑動可以調節風量,上下滑動調節溫度,且系統通過聲音反饋告知用戶操作成功與否。

          與盲操手勢相比,隔空手勢似乎科技感十足,備受汽車制造商的青睞,我們不僅可以在各種概念車上窺見它的蹤影,在君馬SEEK上,也可以實際操作一番。

          君馬SEEK提供8種隔空手勢。

          汽車交互手勢,這樣設計才有趣

          △ 左圖:接聽電話 右圖:掛斷電話

          汽車交互手勢,這樣設計才有趣

          △ 左圖:上一曲 右圖:下一曲

          汽車交互手勢,這樣設計才有趣

          △ 左圖:音量升高 右圖:音量降低

          汽車交互手勢,這樣設計才有趣

          △ 左圖:音樂播放/暫停 右圖:玫瑰花

          與君馬SEEK相同,寶馬提供「向左」手勢代表上一曲、「向右」手勢代表下一曲,「yeah」手勢代表播放或暫停。

          但在許多其他操作上,寶馬與君馬的手勢操作則各有特色。

          君馬SEEK使用手掌的正面與反面來區分不同的操作,正面表示接聽電話·/音量增加,反面表示拒聽/音量降低。

          寶馬則選擇向屏幕方向點擊代表接聽電話,手掌向右揮動代表拒聽電話,手指順時針畫圈代表音量增加,手指逆時針畫圈代表音量降低。

          在倒車影像中,手指向右揮動代表調整視角。

          汽車交互手勢,這樣設計才有趣

          △ 圖片來源于「汽車界的扛把子」的短視頻《寶馬手勢控制詳細演示》

          在手勢交互上,拜騰也交出了自己的「成績單」。

          拜騰的手勢識別共五種,手掌向下激活手勢識別,手掌向上啟動主頁面,手指移動代表移動光標,ok手勢代表確定,五指捏合可拖拽內容。

          汽車交互手勢,這樣設計才有趣

          △ 圖片來源于太平洋汽車網《拜騰Concept手勢感應系統操作演示》

          這些高大上的技術看起來令人興奮,但在實際使用的過程中,依舊存在識別范圍有限、識別精度不靈敏、識別后的響應速度慢等等問題,而各個廠家的手勢識別沒有形成統一的標準,且沒有大規模在在用戶中進行推廣,必然會增加用戶的學習成本。

          手勢識別對用戶來說是「真香」還是「雞肋」,相信時間會給出答案。

          參考文獻:

          寫在最后

          汽車內手勢的交互設計,是一個有趣又好玩的課題,但如何讓這個課題在好玩但同時易用、好用,恐怕只有設計師不斷思考,并不斷采用一些用戶測試的方法進行驗證才能獲得答案。

          文章來源:優設    作者:點滴DESIGN

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

          2020年越來越火的車載交互該怎么設計?來看前輩的經驗總結!

          資深UI設計者

          這次我們不聊視覺,也不暢想未來,只說說當下 HMI 產品設計與交互體驗。

          本文內容會涉及一些專業的汽車知識名詞,因為篇幅有限,如有些知識名詞不太明白可以百度一下。

          別看錯了,不是HDMI!

          說到 HMI 大多數設計師應該是既熟悉又陌生,HMI 是 Human Machine Interface 的縮寫,「人機接口」,也叫人機界面,人機界面(又稱用戶界面或使用者界面)是系統和用戶之間進行交互和信息交換的媒介, 它實現信息的內部形式與人類可以接受形式之間的轉換,凡參與人機信息交流的領域都存在著人機界面。

          聽起來是不是覺得這不就是 UI 嗎?有什么區別嗎?似乎差不多,幾乎是沒有區別的,只不過是在某些場合和設備上管他叫 UI,比如移動端設備,而在另外某些場所和設備上管他就叫 HMI,比如汽車車機和數控機床。所以這個概念也不用去特別較真,HMI 就權當作是汽車上的 UI 界面吧。畢竟汽車是高科技與工業結合的完美產物,「HMI」念出這個詞時候就感覺是蠻專業的!很般配!

          HMI前世與今生?

          剛才說 HMI 最早更應用于工業上,比如常見的各種機床、制造裝備。

          或者說讓時間再向前推進一點!

          而這里通常意義的 HMI 則更加聚焦點,基本特指汽車車機或者車載多媒體設備。

          說到這里還是要從車載儀表盤說起,從德國人卡爾·本茨發明世界第一輛汽車,距今已經 100 多年的時間了,在那些還沒有 HMI 這個名詞的年代,那么他是以什么形態出現的?那就不得不提「儀表盤」了。

          當然寫這篇文章并不是去評測誰家 HMI 更優秀,而是希望通過一些假設、實驗和推斷,和大家一起來探討一下如何更有效地設計 HMI。

          屏幕越大越好?車內到底需要幾塊屏幕?

          我們先從屏幕開始。

          說到屏幕,設計師都是比較敏感的,因為我們最終的設計交互創意都是需要都是在屏幕上顯示展示出來的,HMI 當然也不例外?,F在在車載屏幕上你能看到最大尺寸多大?

          拿特斯拉為例,Model S 和 Model X 車型都是 17英寸,Model 3 為 15 英尺。

          當然他肯定不是最大的,熟悉汽車朋友你應該知道我想說誰了,沒錯就是他!擁有 48 寸可多段升降屏幕的 BYTON 新能源概念車 M-Byte!48 寸的確很夸張,難道屏幕越來越大就是未來 HMI 的方向嗎?

          當然這個問題肯定是否定的,為什么?那就要從車載屏幕的作用來說起。

          首先我是作為一個曾經就職于汽車公司的設計師,并且是一名地道的汽車發燒友,憑借對汽車還算熟悉和熱愛做出一些產品交互分析,以下如有不妥之處還望海涵。

          汽車內屏幕的作用

          按照功能場景總體可分為三類:主行駛狀態信息、附設備狀態信息、多媒體 & 外設

          不可缺少還需要與使用者、場景結合,我們先來做一個大概的用戶畫像。

          對應這些需求,汽車需要有儀表臺(屏)控制和顯示的區域有五個。

          五個區域分別是:

          • 主駕駛儀表屏
          • 中控臺控制(屏)
          • 后排娛樂屏
          • 副駕駛信息屏
          • 扶手控制臺(屏)

          其中前三個是主流配置,后兩個比較少見。

          關于汽車設備這塊我們不做深入展開了,畢竟這篇文章主要討論的還是設計,直接看結果!

          題外音:屏幕安全性的考量

          汽車是比較特殊的設備,基于安全性考慮,汽車內屏幕尺寸不宜太大與太多。

          屏幕總體為玻璃材質,但與車窗擋風玻璃的材質不同,當汽車遭遇碰撞的時候,車內屏幕極易破損并形成尖銳物,極大可能會乘坐人員造成二次傷害,所以車內屏幕不易太多,更不易太大。雖然車載屏幕變大變多已不可逆轉,而且隨著屏幕技術的提升,柔性 OLED 的應用也將會在一定范圍解決安全問題。但也需要汽車相關設計者多在安全方面進行考慮,任何產品體驗應該建立在安全基礎之上的,特別是交通工具。

          物理實體按鈕過時了?

          為什么大屏幕操控成為了當前的 HMI 主流了呢?那不得不去提一下另外一個我們熟悉的設備——手機!

          同樣一個有限的區域,如果用物理按鍵那么這個區域只能是固定的功能,而屏幕就可以無限擴展。特別是在汽車中控屏上集成內容會很多,體現就更加突出。

          但是在汽車上的全部使用屏幕真的是最佳選擇嗎?顯然這是有待商榷的。

          不可否認屏幕的確有很強的擴展性,但是缺點也是明顯的:1.觸控反饋缺乏 2.交互效率不高

          對于這樣的判斷,我們可以通過兩個實驗來進行驗證。

          將類似于 Surface Dial 這種智能按鈕交互裝置引入汽車的屏幕控制中,每個按鈕可以根據情景進行自定義,并且吸附到汽車屏幕的任何位置進行交互操作,相信這一定是一種全新的使用體驗。當然這一定是需要解決比如吸附力、安全性等一系列問題。

          屏幕觸控反饋

          雖然目前的屏幕還無法做到完美觸控反饋,但已經出現了一些新的硬件技術來試圖解決這些問題,比如 Tanvas Touch,其定義為 「手指與觸摸界面之間的電子壓力控制」。簡單來說他們的產品就 「皮膚的磁鐵」 一樣,能夠更加精準地感應手指的動作,最后結果就是比 Apple 的 3D Touch 更加具有壓感的觸摸操作表現。

          原理是利用手指尖觸摸顯示屏時產生的靜電引力來模擬觸感,通過電磁脈沖把更的反饋發送到用戶的指尖。

          Tanvas 也正在與汽車制造商們合作把這項技術嵌入到汽車或屏幕上,讓人們更容易感觸受到不同物體的表面。

          也許在未來我們真的會遇到他。

          文章來源:優設    作者:殘酷de樂章

          日歷

          鏈接

          個人資料

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

          存檔

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