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

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

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

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

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

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

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

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

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

          于是就有人提出說:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          我再舉個例子。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          所以。

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

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


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


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



          這就是儀式感設計?看完我懂了

          資深UI設計者

          隨著生活品質的提高,我們越來越注重“儀式感”,過年、過節、生日等,我們都想有一些儀式感來慶祝,設計產品也不例外,這些小小的儀式感可以給人帶來好感;本文作者分享了關于儀式感的設計,我們一起來看一下。

          在我們日常生活中,存在著各種各樣的儀式感:婚慶、過節,升國旗奏國歌,它可以使我們的生活充滿各種趣味性,是人們表達內心最直接的方式。

          而在互聯網產品中,為了使用戶的產品體驗更貼近于真實生活、有情感共鳴,不少產品在儀式感這塊也下不了不少功夫;不管是出于競爭需要,還是日常用戶運營。

          所以這次寫下這方面的內容,以便給自己的設計提供更好的切入點和靈感參考,避免毫無頭緒。

          一、有意思的大廠案例

          先來看看一些大廠的、有意思的儀式感設計:

          網易云音樂:收聽特定的歌曲時,會有右上角會有’LTL’入口。

          這就是儀式感設計?看完我懂了

          點擊會聯動觸發手機閃光燈,對歌曲賦予濃濃的演唱氛圍(黑夜中效果更絕,親測~)。

          這就是儀式感設計?看完我懂了

          愛奇藝:中秋國慶期間,點擊視頻時會有“煙花”效果,讓用戶看視頻也能過節。

          這就是儀式感設計?看完我懂了

          QQ音樂:用戶生日時 直接將歌單封面設置成祝福語,一進入應用就能感受到滿滿的祝福。

          這就是儀式感設計?看完我懂了

          財付通:實名首次進入后,以“vip客戶卡”的形式歡迎用戶。

          這就是儀式感設計?看完我懂了

          看了以上例子,相信你對儀式感的作用也有一定的了解,它可以:

          • 營造使用氛圍,增加用戶好感度;
          • 構建產品形象,傳達品牌感知;
          • 提供差異化表現,增加競爭力。

          除了以上作(廢)用(話)之外,個人覺得最好的一點,就是可以加強設計師的創意表現,讓設計方案更加有創新點。

          二、如何設計儀式感?

          看了這么多例子,相信你自己有的判斷;在筆者個人看來,互聯網產品的儀式感設計無非由兩部分組成:特定的場景支持+貼近現實的表現。

          舉例說明:微信讀書的電子簽名。

          只有在微信讀書里購買書籍后(場景觸發),才會模擬現實生活進行簽名(現實表現)。

          這就是儀式感設計?看完我懂了

          三、特定的場景支持

          任何形式的設計都是需要場景支持的,否則無從談起。

          筆者覺得,以下3個切入點足以覆蓋絕大多數場景,幫助挖掘出可設計儀式感的點。

          1. 時間與日期

          1)時間

          一天中某個時間點、時間段,引發該時刻里對用戶的情緒與感知;可應用的時效性較長,可以用于每天中的某個時刻。

          舉例:

          下班點打卡,釘釘都會對辛勤工作的員工進行暖心慰問,用儀式感來減少工作一天的負面情緒。

          這就是儀式感設計?看完我懂了

          之前企業微信的啟動頁,針對深夜時間段會進行員工關懷。

          這就是儀式感設計?看完我懂了

          而除了上訴之外,是不是還有更細分的時間維度等著我們去挖掘與設計呢?

          像清晨與黃昏、早上/下午/晚上、早茶/下午茶/宵夜/時間點?是不是可以挖掘出更多儀式感場景?

          2)日期

          可以是各種節日、特定事件日期、天數、季度等等;這種應用的時效性不是很強,只能滿足于特定的日期,一般作為運營事件使用。

          如百度搜索“愚人節”時,出現的結果會倒轉過來,愚你一下很開心。

          這就是儀式感設計?看完我懂了

          抖音會記錄用戶的使用日期,針對性進行信息提示。

          這就是儀式感設計?看完我懂了

          遇到喜慶或沉痛節日時,不也得針對其氛圍進行儀式感設計。

          這就是儀式感設計?看完我懂了

          文章開頭的QQ音樂對用戶生日的祝福、愛奇藝國慶期間的煙花點擊效果。

          2. 特定的行為條件

          這個不像前面都是產品/系統主動觸發儀式感,而是只有當用戶滿足一定的條件才會觸發。

          是一種較為被動的反饋設計。如操作結果、等級階梯。

          1)操作結果

          當用戶執行對應的任務后,根據任務的狀態、屬性等關鍵詞提煉出合適的儀式感。

          愛奇藝在直播預約成功后,針對預約成功以“入場券”的形式設計。

          這就是儀式感設計?看完我懂了

          和平精英在吃雞(游戲結束)后,不也有一個舉杯勝利的表現。

          這就是儀式感設計?看完我懂了

          文章開頭的微信讀書也是一個例子,在用戶購買完成后觸發。

          繼續舉一反三的話,除了操作成功、結束之外,像無法操作、操作失敗、操作中斷等狀態,是不是也可以挖掘出對應的儀式感呢?

          2)等級階梯:

          當用戶的操作/任務累積到一定的門檻、等級或階梯后,所賦予的一種榮譽、獎勵設計。

          鼓勵用戶執行更多的操作/任務,以獲取更珍貴、稀有的目標。最常見的就是各種勛章、會員、積分設計。

          這就是儀式感設計?看完我懂了

          3. 首次與新事物推薦

          這種應該是被運用得最廣的方式,常見于首次進入/對新用戶的歡迎、新功能的介紹、新內容的推薦。

          1)首次使用的歡迎:

          如有道精品課,首次進入時以“入學通知書”的方式歡迎用戶,打造符合產品調性的儀式感。

          這就是儀式感設計?看完我懂了

          再如健康160的歡迎新老用戶回歸。

          這就是儀式感設計?看完我懂了

          還有文章開頭的財付通vip卡歡迎動畫。

          2)新內容的推薦:

          如UC瀏覽器,對首次進入的用戶都會引導選擇感興趣的內容類型,以便推送更符合興趣的資訊信息。

          這就是儀式感設計?看完我懂了

          暫時以這些場景舉例說明,其他的你是不是也能舉一反三呢?歡迎底部留言一起討論。

          四、貼近生活的表現

          有了相應的場景支持后,具體的儀式感設計才能順利成章。

          而儀式感在表現上由2個因素構成:主體與環境。

          1. 主體

          組成儀式感的核心部分,是傳達感知、引起情緒的重要體現。

          而主體的設計,往往模擬現實生活中某事物元素,將其特征點進行圖形化,是最直接的靈感來源。

          這就是儀式感設計?看完我懂了

          這就是儀式感設計?看完我懂了

          2. 環境

          雖然主體的設計已完成了儀式感的大部分工作,但是鮮花也需要綠葉的襯托呢。

          擁有環境的襯托,可以讓主體的整體氛圍更上一層樓,文章開頭的網易云音樂就是一個例子。

          還有58同城的勛章設計,有環境光的襯托顯得更加閃亮。

          這就是儀式感設計?看完我懂了

          五、最后

          說了這么多,儀式感的設計更多也只是 在基礎內容/功能上做體驗優化,屬于一種“錦上添花”的作用。

          應該先滿足基礎內容/功能的“好用易懂”的情況下,再來設計儀式感上的“好看好玩”,不要本末倒置。

          ???還有,???不同的儀式感存在著不同的用戶心理,因此需要特別注意該場景下的用戶心理或情緒。

          這就是儀式感設計?看完我懂了


          文章來源:人人都是產品經理    作者:和出此嚴


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

          今天為大家帶來的文章是「地圖標簽」設計。很多App會內嵌地圖功能,這些地圖的功能相對簡單,更多是起到查看和引導的作用,但在產品中又不可或缺~

          除了常見的地圖類App,還有其他很多產品會根據使用需求嵌入地圖功能,通過在地圖頁中添加引導性的交互標簽,讓用戶了解所處的位置或者導航路線。

          如何保持地圖頁面與產品風格統一,同時又方便用戶使用呢?通過系統化的方法可以快速實現地圖組件的選擇和歸類。

          地圖組件的四種類型

          1. 圖標

          地圖上只標記圖標,這種呈現方式能地顯示地圖上的信息,減少內容遮擋,也是在設計中首先要考慮的類型。

          簡單實用!系統化總結「地圖標簽」設計

          2. 文本

          如果地圖上標記的內容沒有合適的圖標能展示出來,可以直接利用文本來描述。

          簡單實用!系統化總結「地圖標簽」設計

          3. 圖標和文本

          隨著地圖的放大縮小,氣泡信息的詳細程度也會發生變化。地圖放大時將圖標和文本相結合可以顯示更多的信息,而縮小時只顯示圖標。

          簡單實用!系統化總結「地圖標簽」設計

          4. 圖標、文本和注釋

          圖標,文本和注釋相結合的形式雖然能顯示更多的信息但是需要謹慎使用,因為氣泡的尺寸太大會遮擋地圖的內容,反而影響使用。

          簡單實用!系統化總結「地圖標簽」設計

          只有當氣泡內容能顯著提升用戶體驗時,才使用這種類型。

          簡單實用!系統化總結「地圖標簽」設計

          地圖組件的視覺樣式

          大多數場景中,地圖組件的底部會有一個突出的箭頭,用來標記確切的信息或地址。

          考慮到后期開發的難度,箭頭的位置應始終位于組件的中間。另外如果一個頁面中有多個地圖組件,可以將箭頭調整到頂部,防止發生重疊。

          簡單實用!系統化總結「地圖標簽」設計

          1. 顏色

          組件的顏色比較靈活,默認情況下是白色,但可以通過改變背景色來匹配品牌色。

          顏色通常出現在圖標后面用來強調信息,如果沒有圖標可以把整個氣泡組件都填充上顏色。

          簡單實用!系統化總結「地圖標簽」設計

          根據背景色的不同,文本和圖標盡可能使用黑色或白色,減少對內容的干擾。

          簡單實用!系統化總結「地圖標簽」設計

          2. 狀態

          地圖氣泡尺寸的大小根據點擊需求確定。白色輪廓加上膠囊形狀讓用戶能夠快速識別出可點擊的對象,選定后氣泡顏色會反轉。

          簡單實用!系統化總結「地圖標簽」設計

          3. 內容縮放

          組件基于地圖縮放級別和縮放速度展示不一樣的動畫效果。

          簡單實用!系統化總結「地圖標簽」設計

          組件可用性指南

          如何判斷設計出來的組件是否適合用戶使用?組件需要怎樣設計才能適用于不同的使用場景中,有沒有統一的規范?

          1. 組件狀態

          面對不同場景中的組件,提供多種狀態:重疊、可見、收縮、聚類、分離。

          簡單實用!系統化總結「地圖標簽」設計

          2. 密度

          地圖中至少要保持40%的內容是始終可見的,這樣用戶可以明確位置信息,防止產生誤操作行為。

          簡單實用!系統化總結「地圖標簽」設計

          利用聚類功能將相鄰的氣泡組件合并在一起,通過數字顯示包含的內容,這種形式利于用戶理解和操作。

          3. 易讀性

          易讀性在地圖中很重要,例如用戶手持使用手機時組件中的字體為15pt,當用戶駕駛導航時組件的字體會變為24pt。

          簡單實用!系統化總結「地圖標簽」設計

          另外還要考慮語言的選擇對組件的影響,最好避免在氣泡組件中使用長串字符,以防止地圖中的信息被遮擋。

          簡單實用!系統化總結「地圖標簽」設計

          如果必須要顯示長串字符,需要把氣泡組件的尺寸水平拉長至地圖尺寸的75%,然后換行且最多只能顯示兩行文本。

          總結:點擊即導航

          在開始設計地圖UI界面之前,有必要花費時間了解地圖組件的樣式、類型和可用性指南。

          通過這些信息可以幫助設計師更快地確定方向,從而設計出清晰美觀的地圖界面。

          文章來源:優設    作者:Clip設計夾


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


          《跨域------>三種跨域底層分析》

          前端達人

           轉載:   原創作者: 

          在這里插入圖片描述

          1.方式一:利用< script >標簽,< script >不存在跨域問題


          在這里插入圖片描述

          2. (服務端解決)SpringMVC的controller中加入注解@CrossOrigin(value = “http://localhost:8080”)

          即:給響應頭設置一個Access-Control-Allow-Origin屬性

          在這里插入圖片描述
          在這里插入圖片描述
          在這里插入圖片描述

          3.(客戶端解決)使用Ajax中的JSONP實現跨域(常用)

          3.1原理:利用< script >標簽

          3.2代碼

          將callback當成一個參數傳遞下去在這里插入圖片描述
          在這里插入圖片描述
          前后端運行結果
          在這里插入圖片描述
          在這里插入圖片描述
          在這里插入圖片描述

          炫酷的大數據可視化設計賞析(六)

          前端達人

          隨著大數據產業的發展,越來越多的公司開始實現數據資源的管理和應用,尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時,用戶界面設計者需要呈現相應的視覺效果。


          隨著信息化的發展,智慧城市、智能油田、政務云、企業云等一系列信息化目標逐一實現。實現了以云平臺為目標的各資源管控、資源業務的管理。隨著管控觸角的延伸、云存儲的各種大數據,如何監控、分析、展示出核心數據和重點數據其尤為重要。

          在集團企業中、以運維中心人員為用戶群體,通過大屏實時掌握業務數據情況,在系統設計時既要考慮數據的直觀性,又要考慮視覺疲勞,在其界面構思上要結合行業特點、數據特性進行策劃,以立體感形式表現更佳。


          接下來為大家介紹大屏可視化的UI設計。

          jhk-1603104417830.jpg

          jhk-1603104448545.png

          jhk-1603104465945.jpg

          jhk-1603104511381.jpg

          jhk-1603104526366.jpg

          jhk-1603104561136.png


           --大屏UI設計--

          --大數據可視化ui設計賞析--

          (圖片均來源于網絡)

          點擊查看更多UI/UE設計案例??????

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



              更多精彩文章:

                 

           大數據可視化設計賞析(一)

            大數據可視化設計賞析(二)

            大數據可視化設計賞析(三)

            大數據可視化設計賞析(四)

            大數據可視化設計賞析(五)

            大數據可視化設計賞析(六)

            大數據可視化設計賞析(七)





          地圖基礎知識及通用設計原則

          資深UI設計者

          Part 1. 地圖的發展

          地圖作為記錄地形傳遞路線信息的載體,在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時代技術的發展而變化,從石板、動物皮革,到絲綢、紙張。當互聯網走進千家萬戶,地圖也步入電子化時代。

          相較于紙質地圖,電子地圖優勢顯著:更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖(后文簡稱地圖)的出現也影響著人們的出行方式,尤其當智能手機普及,我們可以隨時查詢地點、發起導航,再也不需要提前記下高速出口和轉向路口了。

          Part 2. 地圖在滴滴的重要性

          滴滴擁有網約車、代駕、騎行、公交、自駕導航等眾多業務,是一站式出行平臺。而地圖作為承載出行服務的重要載體,橫向支撐著各業務線的發展。以網約車業務為例,調研結果顯示絕大部分乘客都會關注并使用地圖。

          隨著各業務線對體驗的要求不斷提升,單一的地圖模式已經不能滿足業務訴求及用戶需求,需要進一步細分場景、精細刻畫地圖樣式,于是地圖的設計也變得愈發重要。

          滴滴出品!地圖基礎知識及通用設計原則

          Part 3. 解構地圖

          地圖承載的信息種類復雜、數量巨大,初期可能會找不到設計切入點。我們可以先了解下它的定義和實現方式,或許就能從中找到答案。

          定義:地圖是依據一定的數學法則,采用地圖語言,經過制圖綜合來表示地球表面的圖形。

          實現流程:

          • 采集真實世界的地點信息,經過編譯轉化成數據
          • 數據信息中包含了地點的坐標、分類、名稱等
          • 數據經過渲染形成可視化雛形地圖
          • 雛形地圖經過設計最終變成策略完整、視覺美觀的電子地圖。

          滴滴出品!地圖基礎知識及通用設計原則

          結合“從雛形到完整地圖”這一步流程的實現方式,進而可將地圖拆分為基礎層、策略層和感官層。幫助各職能角色找到對應切入點。

          • 基礎層,指的是地圖的數據和能力。數據大家已經有所了解了,能力指的是引擎渲染能力、定位能力、圖像識別能力等。有了數據及各類能力作為基礎,才能設計出信息精準、交互明確的地圖。
          • 策略層,則指的是如何使用這些基礎數據和能力。地圖數據量非常龐大,無法全部展示,需要結合不同的場景及用戶需求,有重點的呈現。
          • 感官層,便是我們給數據穿上的衣服,會根據品牌調性、對應場景訴求等去設計最終的配色、圖標等。

          滴滴出品!地圖基礎知識及通用設計原則

          解構地圖后,我們不難看出,感官層是設計側需要關注的重點層級。

          Part 4. 地圖設計原則

          1. 元素分類

          面對如此復雜的地圖信息,為了梳理出清晰的思路,我們會對地圖元素進行分類:根據數據的類別和呈現狀態,可拆分為點、線、面三類元素。

          • 點元素:地名、POI*等。數量龐大,是城市規模的體現,尤其POI信息,它是地圖中顆粒度最細的位置信息。
          • 線元素:道路、地鐵線、水系線、鐵路線、航線、邊界線等。線元素呈現了道路的走向、區域的劃分等,描繪出了城市的樣貌。
          • 面元素:陸地、草地、湖泊海洋、AOI*。面元素以色塊形式出現,很大程度上決定了一張地圖的色調。

          名詞解釋:POI, Point of Information的縮寫,即“信息點”。一個POI可以是一棟房子、一個商鋪。

          名詞解釋:AOI, Area of Interest的縮寫,即“信息面”。指的是區域狀的地理實體,如醫院、小區等。

          滴滴出品!地圖基礎知識及通用設計原則

          2. 核心設計原則

          從定義可以看出,地圖是一種特殊的圖形語言,是以上所有元素的集合體。相比我們所了解的UI設計、運營設計,地圖有屬于自己的設計原則。以下為大家總結了一些核心的原則:

          符合制圖學和公眾認知

          地圖發展到現在已經成為了一門學科,我們會發現即使語言不通,拿到一張地圖時也能看懂,這是因為有制圖學和公眾認知在規范著地圖設計。如地圖默認北向上、草地水系基本遵循物理世界的顏色、省界線是實線、停車場圖標大多用P來代表等等。符合制圖學和公眾認知,大大降低了用戶的學習成本和記憶負擔,使地圖可以作為一種世界通用語言流通起來。

          保證識別度

          地圖屬于信息類工具,其上出現的元素均需清晰可識別,保證可讀性是最基本的設計原則。所以在設計時會限制顏色對比度、最小字號等,而具體規則會根據場景確定。

          清晰有層次

          地圖的層次清晰包含了兩個方面:信息主次清晰,視覺具有整體性。

          信息主次清晰,地圖信息龐雜,沒有主次關系會影響用戶的讀圖效率。在設計時需要考慮元素本身的特點、重要性,可通過顏色、icon/文字大小、線形寬窄等表達。做到同類元素有關聯性,不同元素有差異性。同時,信息主次也會根據比例尺的變化有所調整。

          視覺具有整體性,在滴滴的業務場景中,地圖通常作為最底層組件出現,上層還會有很多業務組件。因此在設計時需克制用色,既要保證地圖中各元素之間的區隔度,又要保證地圖整體與其他業務組件拉開視覺層級。這樣才能更好的突出當前業務模塊的重點,提升整體的使用效率和體驗。

          細分地圖模式

          地圖在各業務模塊中應用廣泛,用戶需求也不盡相同,設計時需要根據使用場景區分不同模式。以網約車場景為例,業務信息始終處于上層,地圖用來幫助用戶定位、快速發單。因此,網約車場景的地圖整體性強、色調偏冷、視覺層級后退,能更好的搭配網約車模塊的整體設計,保證用戶的操作效率。

          滴滴出品!地圖基礎知識及通用設計原則

          具有品牌特性

          品牌調性一直是滴滴設計層面非常關注的原則,品牌基因貫穿了所有產品,始終具有獨特的視覺風格。遵循品牌的視覺語言,使地圖可以更好的融合到產品中,保證了設計的統一性。

          文章來源:優設    作者:CDX創意設計中心


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


          Vue 組件封裝之 Result 結果頁

          前端達人

          一、Result 結果頁

          組件說明:

          實現 Result 結果頁。

          效果展示:
          在這里插入圖片描述

          實現的功能:

          1. 提交或者操作完成之后,進入一個成功或者失敗的結果頁。
          2. 包含成功或者失敗的狀態插圖。
          3. 包含成功或者失敗的文案表述(標題及詳情)。
          4. 包含取消(推出應用)和確定(繼續填寫)兩個按鈕。

          二、使用案例

          <template> <div> <el-result :item="item" @on-cancel="cancel" @on-submit="submit" /> </div> </template> <script> export default { name: "Result", data(){ return{ item: { title: '提交成功', submitText:"繼續填寫", cancelText:"退出應用", status:"success" }, } }, created(){ let item = this.$route && this.$route.query; if(item.status==='fail'){ this.item = { title: '提交失敗,請聯系開發人員', submitText:"重新填寫", cancelText:"退出應用", status:"fail" } } }, methods:{ cancel(){ dd.biz.navigation.close({ onSuccess : function(result) { /*result結構
                       {}
                       */ }, onFail : function(err) {} }) }, submit(){ this.$router.go(-1) } } } </script>  
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 43
          • 44
          • 45
          • 46
          • 47
          • 48
          • 49
          • 50

          三、API 使用指南

          屬性 說明 類型 默認值
          item 頁面展示的靜態內容集合 Array []
          title 描述標題 String
          submitText 提交按鈕文本 String
          cancelText 取消按鈕文本 String
          status 輸入值字段 String
          on-cancel 取消按鈕事件 Function
          on-submit 提交按鈕事件 Function

          四、源代碼

          Result.vue
          文件路徑:share/result/Result.vue

          <template> <div class="cm-tx-c cm-mt-08 cm-p-02"> <el-image :src="item.status==='success'?successBg:failBg" style="width: 250px" > <div slot="placeholder" class="image-slot"> 圖片加載中<span class="dot">...</span> </div> </el-image> <div :class="item.status==='success'?'success-title':'fail-title'">{{item.title}}</div> <div>{{item.describe}}</div> <div class="cm-flex cm-jc-sa"> <div  @click="cancel()" class="cm-btn-cancel">{{item.cancelText}}</div> <div  @click="submit()" class="cm-btn-submit">{{item.submitText}}</div> </div> </div> </template> <script> import successBg from '../images/result-success.png'; import failBg from '../images/result-fail.png'; export default { name: "ElResult", data(){ return{ successBg, failBg } }, props:{ item:{ type:Object, default:{} } }, created(){ }, methods:{ cancel(){ this.$emit('on-cancel',''); }, submit(){ this.$emit('on-submit',''); } } } </script> <style scoped> .success-title{ padding: 0.4rem; font-size: 0.35rem; color:#15bc83; } .fail-title{ padding: 0.4rem; font-size: 0.35rem; color:#f25643; } </style> 6
          
          
          
          
          
          
          
          
          轉載 作者: 2020-10-19 09:24:19 分類專欄: # Vue通用組件封裝
          
          

          超贊的網頁設計作品+精美流程圖設計案例

          前端達人

          扁平化網頁設計的表現大多體現在配色、字體以及布局排版方面,這三樣結合得當都能制作出漂亮的網站。在國內很多企業網站的布局架構幾乎是一樣的,最多就是LOGO和一點顏色變化,看不出什么特色和創新。

          作為設計師,應該多花點心思在創新上,比如網頁上的布局,其實它是可以變化多樣的,正如今天為大家分享yi xie布局排版好看的網頁設計作品,大家可以參考這些布局的設計,從中獲得一些靈感。

          附加精美流程圖設計與賞析。

          jhk-1601983879159.jpg

          jhk-1601984100579.png

          jhk-1601984141200.jpg

          jhk-1601984500863.png

          WechatIMG394.png

          WechatIMG443.jpeg

          WechatIMG444.jpeg

          WechatIMG444.jpeg

          WechatIMG445.jpeg

          WechatIMG446.jpeg

          WechatIMG447.jpeg

          WechatIMG448.jpeg

          WechatIMG449.jpeg


          (以上圖片均來源于網絡)

          (精美流程圖設計)



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



            更多精彩文章:

                 ui界面設計之網站設計案例欣賞(一)

                 超贊的創意頁面排版設計,打造“視”不可擋的網頁設計


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

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

          日歷

          鏈接

          個人資料

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

          存檔

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