首頁

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

lanlanwork


WHAT:用戶體驗地圖是什么

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

  • 是一種描述用戶故事可視化工具;
  • 是一種幫助設(shè)計師、產(chǎn)品經(jīng)理等更好地了解用戶的共創(chuàng)工具;
  • 用戶視角出發(fā),直觀展現(xiàn)產(chǎn)品流程各個觸點上用戶的痛點、需求和情緒;
  • 用戶體驗地圖繪制的形式并不唯一,可以根據(jù)項目需求,增減內(nèi)容。

圖片

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

 

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

  • 需要梳理的功能不分大小,都可以使用;
  • 做之前,務(wù)必要先調(diào)研和訪談用戶使用產(chǎn)品的情況。

建議時長:

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

參與者:

  • 必選:設(shè)計師、產(chǎn)品
  • 可選:研發(fā)、市場、其他

工具:

  • 電腦或白板+便利貼

 

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

需要發(fā)現(xiàn)和拆解產(chǎn)品現(xiàn)有問題,梳理用戶流程時使用用戶體驗地圖,可以在聚焦階段,整合用戶訴求和業(yè)務(wù)訴求,共創(chuàng)機會點,找出解決方案,通常在以下場景中使用:
  • 新產(chǎn)品設(shè)計:需要對需求進(jìn)行拆解和優(yōu)先級排序;
  • 產(chǎn)品優(yōu)化:發(fā)現(xiàn)產(chǎn)品現(xiàn)有問題,洞察設(shè)計發(fā)力點。

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

  • 更好的以用戶視角來看產(chǎn)品的體驗;
  • 通過共創(chuàng),項目成員達(dá)成共識;
  • 確認(rèn)觸點,作為我們的設(shè)計方向;
  • 通過用戶痛點找到機會點;
  • 幫助梳理產(chǎn)品流程。

圖片

△ 用戶體驗地圖共創(chuàng)現(xiàn)場

 

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

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

1. 定義原則和目的  

首先要了解我們做用戶體驗地圖的原因和目的,包括用戶是誰、解決什么問題、用戶的目標(biāo)、產(chǎn)品的整體目標(biāo)、限定條件等等,對用戶群體、整個項目背景和共創(chuàng)任務(wù)目標(biāo)有清晰、全面的認(rèn)知。

圖片

 

2. 梳理階段流程  

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

  • 在整個產(chǎn)品的范圍之內(nèi)盡量把故事、流程講完整;
  • 廣度優(yōu)先,而非深度,不要過早的沉浸到細(xì)節(jié)中。

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

圖片

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

圖片

 

3. 洞察痛點

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

圖片

 

4. 尋找機會點

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

  • 對內(nèi)容進(jìn)行對標(biāo)、討論,把公認(rèn)的點保留下來,無用的點剔除出局;
  • 根據(jù)實際情況和項目成本、進(jìn)度等條件,對新流程下的功能做優(yōu)先級排序。

圖片

 

TIPS:如何為過程提效 

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

1. 事前

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

2. 事中

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

3. 事后

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

 

原文鏈接:長弓小子(公眾號)

作者:元堯

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》詳解|用戶體驗地圖,到底該如何使用?

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


研究半天,才發(fā)現(xiàn)原來這幾個效果這么簡單就完成了!

lanlanwork


小技巧1

有一天一位同學(xué)問我這個圖形怎么切出來的:

圖片
怎么切出來的,我倒是不知道,但是我可以用其他方法做出來。
只需要兩步,第一步先用ai軟件里的螺旋線工具畫一個螺旋,具體數(shù)值可以自己調(diào)整:
圖片
不同數(shù)值可以畫出不同的螺旋線:
圖片
挑一個你覺得合適的。
但是這個描邊的粗細(xì)是一樣的,所以,我們開始第二部,讓描邊變成兩端細(xì)一點,其實很簡單,只需要選中錨點,然后按下快捷鍵shift+w(寬度工具),一拖動,描邊就變細(xì)了:
圖片
是不是很神奇。這樣剛才的圖形就出來了,想做個棒棒糖啥的:
圖片
這個小技巧必須學(xué)一下子!

 

小技巧2

大家在畫一些圖形,本來兩端是尖銳的,想讓其面的圓潤一些,比如月亮:
圖片
我們怎么讓它的兩端圓潤呢,其實在ai里面直接選中錨點就能直接變圓潤,但是在sketch里,有時候就不能了:
圖片
交大家一個萬能的方法,直接切掉尖角,然后拿一個圓形接上去就好了,看下圖:
圖片
這個方法在任何情況下都適用,在做圖標(biāo)的時候,經(jīng)常會用到。

 

小技巧3

很多同學(xué)說不知道愛心怎么畫,那種兩邊是直線的就不說了,很簡單,兩個大圓角舉行直接一拼就出來了:
圖片
那種兩邊是弧形的愛心呢?其實也很簡單,先畫一個圓,然后拉住一個錨點把圓形拉長:
圖片
然后再復(fù)制一個,鏡像后再一合并就出來了:
圖片
是不是也很簡單,單個圖形的形狀決定了合并后愛心的形狀細(xì)節(jié):
圖片
大家可以多多嘗試。

 

總結(jié)

好了,以上就是今天和大家分享幾個小技巧,趕緊練起來了吧!

 

原文地址:菜心設(shè)計鋪(公眾號)
作者:菜心設(shè)計鋪

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》研究半天,才發(fā)現(xiàn)原來這幾個效果這么簡單就完成了!

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


一篇文章看懂交互中的細(xì)節(jié)-微交互

lanlanwork

 

1 微交互的定義

微交互通常是指一些比較細(xì)節(jié)性的操作行為的反饋,通常是某單個事件或者交互行為。微交互可以是產(chǎn)品的部分功能或者就是產(chǎn)品本身,例如我們?nèi)粘I钍褂弥械恼ブ瓩C,它提供一個功能,就是將我們放進(jìn)的水果榨成鮮榨果汁,或者我們上完洗手間,把手伸到水龍頭下面的時候,水會自動的流出來,而不用按下任何的按鈕,這便是現(xiàn)實物理世界的一種微交互,因為他的設(shè)計是單個功能的動作,使水從水龍頭中流出。

所以微交互通常是專注于某個事件或某個單個任務(wù),例如我們最常使用的點贊后的反饋就是一次微交互事件。

 

1.10 微交互誕生的背景

計算機科學(xué)家拉里·特斯勒(Larry Tesler)在為施樂Xerox電腦的文字處理軟件Gypsy設(shè)計程序時,突發(fā)奇想,給軟件Gypsy加入了鼠標(biāo)操作和GUI圖形界面,這樣便大大的方便了Gypsy作為文字處理軟件的實用性與便捷性,于是在不斷體驗與嘗試的過程中,于是拉里·特斯勒在改版的時候,給Gypsy加入了復(fù)制、粘貼功能鍵。這些概念隨后成為了文本編輯與計算機操作系統(tǒng)用戶界面的基石之一。

拉里·特斯勒其實當(dāng)初設(shè)計復(fù)制和粘貼的思路便是減少用戶操作的阻力,讓用戶在使用過程中不會被其他的事物所打斷,往后的數(shù)十年,拉里都為了這個目標(biāo)在奮斗,所以“復(fù)制”和“粘貼”便是精心設(shè)計過的微交互,沒有任何提示和阻力,一氣呵成的便捷交互。

交互設(shè)計以及人機交互在不斷的發(fā)展的歷史,實際上就是微交互的歷史。今天,我們在桌面和筆記本電腦中、在移動設(shè)備中習(xí)以為常的那些交互方式, 都曾引發(fā)過微交互設(shè)計的革命。無論是保存文檔,還是把文件拖放文件夾,還是連接到Wi-Fi網(wǎng)絡(luò),都曾經(jīng)是精心設(shè)計的微交互。就連滾動和打開多個窗口這么“基本的”交互方式,也都要經(jīng)過設(shè)計。技術(shù)在快速發(fā)展,不斷對微交互提出創(chuàng)新的要求。用戶習(xí)慣了拿來就用,他們只會關(guān)注更好的交互方式,或者是那些由于技術(shù)發(fā)展催生的、或強制必須使用的微交互方式。

所以,好的微交互就像“Ctrl+C””Ctrl+v”那樣方便,會改善我們的使用體驗。

 

1.20 移動端微交互應(yīng)用場景的發(fā)展歷程

還是“復(fù)制”“粘貼”的例子,我們在功能機的時代,我們想要把一段文字從一個軟件復(fù)制到另外一個軟件上,我們通常要在兩個軟件不停止的去切換,然后通過記憶內(nèi)容然后在來輸入,這樣的效率和精準(zhǔn)度都不是很高,而且要是需要復(fù)制的內(nèi)容過于龐大,想要完成便是一件讓人頭疼和心累的事情。

但是在進(jìn)入移動智能機的時代,該功能的微交互便發(fā)生的天翻地覆的變化,第一步我們只需用長按需要復(fù)制的文字,調(diào)出復(fù)制按鈕,第二步,選中我們需要復(fù)制的文本內(nèi)容,第三步便是切換到需要粘貼文字的APP,第四步,長按調(diào)出粘貼按鈕,選擇粘貼文字,這與之前僅靠人肉記憶去輸入文字無論在效率上還是在準(zhǔn)確度上都有了不小的飛躍。

但是隨著技術(shù)的革新和從業(yè)者對于用戶體驗的理解更加深刻,我們的操作追求更高效,更精準(zhǔn),于是,該場景的交互又迎來的一次技術(shù)的變革,為了跟上時代的發(fā)展與用戶的訴求,在2016年10月19日的錘子手機發(fā)布會上,它推出了兩個功能:“Big Bang”和“One Step”。“Big Bang”的功能是長按一段文字,可以根據(jù)算法自動將文字的內(nèi)容分割獨立的詞語按鈕,只需點擊這些分割的按鈕就可以選擇想要的內(nèi)容。而“一步”可以直接將所選內(nèi)容拖動到其他目標(biāo)應(yīng)用程序中,而無需在應(yīng)用程序之間切換。這兩個功能的結(jié)合,將之前需要四個步驟的功能簡化為只有兩個步驟:第一步是按下選擇內(nèi)容;第二步,拖動到目標(biāo)應(yīng)用程序。

在2021年6月8日凌晨,一年一度的蘋果WWDC大會在線上正式舉行,ios帶來了類似于“big bang”的功能:live text,也宣告著這個小小復(fù)制粘貼功能又完成了一次新的進(jìn)化,所以,無論是“l(fā)ive text”還是“Big Bang”,這兩個功能本質(zhì)其實就是微交互的進(jìn)化,只不過用了兩個不同的名字去代表而已。

 

1.30 為什么要重視微交互

微交互在的存在是為了讓用戶在體驗過程中感覺舒適和流暢。因為微交互它可能在產(chǎn)品中出現(xiàn)頻次會比較多,以至于很多用戶會忽視甚至感覺不到它的存在。

相信很多男生的夢想都是擁有一輛法拉利的車吧,法拉利的無論是在車外觀造型上的設(shè)計還是發(fā)動機的挑選,都是讓人心曠神怡,但是,無論這輛車多么優(yōu)秀,一個車胎漏氣的法拉利都會破壞整個良好體驗中的氛圍。

所以在產(chǎn)品中的微交互絕大多數(shù)是微小且不會引起用戶的關(guān)注,但是它的存在確實讓產(chǎn)品有更加流暢且自然的用戶體驗。

通常微交互完整的可以達(dá)到以下三點目的:1.提高用戶的留存      2.放大品牌價值      3.提升可用性。

 

1.31 提高用戶的留存

設(shè)計師對于每一次微交互的設(shè)計,都是為了讓用戶自然且路徑清晰高效的完成任務(wù),用戶在潛意識要確認(rèn)對本次體驗的滿意度時,用戶自身會經(jīng)歷一種對“時間忽視”的現(xiàn)象,即會忘記本次體驗所需要花費的時間,而會專注于當(dāng)前的事情。

  • 峰終定律

無論是正向的還是負(fù)向的,開始時與結(jié)束時的感覺,這就是峰終定律(Peak-End Rule)。這條定律基于潛意識總結(jié)體驗的特點:對一項事物的體驗之后,所能記住的就只是在峰與終時的體驗,而在過程中好與不好體驗的比重、好與不好體驗的時間長短,對記憶差不多沒有影響。

所以好的微交互應(yīng)該注重于用戶的“峰終定律”體驗,如果處理得當(dāng),微交互會持續(xù)的刺激用戶大腦中的多巴胺的釋放,從而創(chuàng)造出小小的愉悅時刻。

這些會有助于改善用戶的體驗并提升用戶繼續(xù)使用我們的產(chǎn)品的可能性,有助于提升產(chǎn)品的留存率。

 

1.32 傳遞品牌記憶

微交互比較有價值的地方就是它有機會讓我們在用戶心智中建立品牌的影響,讓用戶對我們的品牌更有記憶力。

人們通常對品牌認(rèn)知記憶最基礎(chǔ)便是圖形,但是品牌的傳遞的記憶點除了圖像還可以一段標(biāo)志性的動作或者是一段旋律。

通常微交互傳遞品牌記憶有兩點:1.標(biāo)志動作   2.標(biāo)志聲音。

 

  • (1)標(biāo)志動作

我記得有次看綜藝節(jié)目,里面請到了一個選秀的出來的團叫“R1SE”,在表演完一段唱跳后,在自我介紹后,他們表演了一段團隊的“團隊動作”,這個在外人看來這無疑是“社死”尷尬瞬間,但是在品牌傳播的角度,這種標(biāo)志性的動作確實有有助于傳播,例如邁克爾杰克遜的招牌動作太空步是很經(jīng)典的一個但有兩種,一種是倒滑,另一種是側(cè)滑,還有傾斜45°,無論是誰在去模仿,都很容易容易讓人想起邁克爾杰克遜,另外一個就是諾基亞的開機畫面的“手牽手的動作”,更是陪伴一代人的青春,所以無論是哪個說唱廠牌和選秀出來的團,都是設(shè)定自己的團的固定的動作,都是有助于讓自己的特點使粉絲產(chǎn)生記憶的聯(lián)想。

而在微交互的設(shè)計結(jié)構(gòu)中,也是包含動作這一設(shè)定的。

 

  • (2)標(biāo)志聲音

我們在聽到“噔,等噔等噔”等時候,我們便會想起英特爾的廣告,所以每個手機品牌的都會給自己短信、系統(tǒng)通知和電話來電設(shè)計獨特的聲音,讓用戶在只在聽的階段,還沒掏出設(shè)備,便可以判斷是什么品牌手機。

在微交互的設(shè)計中,聲音也組成了微交互的一部分,所以合理的應(yīng)用微交互有助于用戶對品牌多維度的記憶。

 

1.33 提升可用性

微交互的設(shè)計,包含了為用戶提供持續(xù)的反饋方式,當(dāng)用戶在迅雷和百度云盤在下載成功時,除了提供的反饋,也會提供聲音的提示反饋,考慮的是一般下載大型文件的時候,我們不可能實時的等待在設(shè)備前面,我們只用通過聲音便可以知道是否下載完成了。大多數(shù)iPhone用戶遇到的一個常見的微觀交互是在鎖屏幕上輸入密碼。如果輸入了錯誤的密碼,則屏幕在清除密碼時會震動。在整個過程中,屏幕上不會出現(xiàn)任何文本來指示用戶出了什么問題,用戶也可以根據(jù)使用經(jīng)驗來判斷當(dāng)前進(jìn)行到哪一步了,所以,因為這些細(xì)微的反饋細(xì)節(jié),整個用戶體驗變得更加直觀和方便,讓用戶的可用性大大提升了。

 

1.40 微交互與動效的關(guān)系

我們需要了解的是微交互與動效還是有區(qū)別的。動效囊括的范圍比較廣泛,它可以與多個功能和頁面進(jìn)行補充和解釋,而微交互則是只針對一個功能進(jìn)行優(yōu)化,所以針對一個功能的細(xì)小的動效可以算作是一次微交互,它是輔助用戶更好的對本次功能的操作。

 

1.50 微交互與交互的區(qū)別

交互設(shè)計是串聯(lián)起產(chǎn)品各個頁面與功能反饋的工作,如果缺少了某個交互環(huán)節(jié)可能會導(dǎo)致產(chǎn)品的BUG或其他負(fù)面情況,交互設(shè)計簡單的來說就是滿足了產(chǎn)品的可用性。然而微交互的存在是為了給產(chǎn)品提升易用性與好用性,能起到錦上添花的作用。

例如我們常用的點贊功能,用戶在點擊過后,一個線性的點贊圖標(biāo)變?yōu)樘畛涞募t色圖標(biāo),這是完成了一次交互行為的閉環(huán),微交互則是讓本次點贊由線性變?yōu)樘畛涞倪^程怎么更有趣,更有意思,更加讓用戶在本次點贊中得到滿足感。

 

1.60 微交互的應(yīng)用場景

微交互的在產(chǎn)品中的應(yīng)用場景也是比較廣泛,那些小的細(xì)節(jié)都可以提升用戶體驗,通常在不同的場景下也能體現(xiàn)出不同的細(xì)節(jié)。

微交互不是刻意的,而是被動發(fā)現(xiàn)問題的優(yōu)化過程,當(dāng)靜態(tài)設(shè)計不能滿足的時候,可以考慮動態(tài)的微交互設(shè)計,

所以,我們需要考慮如何滿足用戶的操作體驗,微交互是否幫產(chǎn)品的數(shù)據(jù)上有提升,設(shè)計角度上微交互是否有創(chuàng)意。

 

1.61 系統(tǒng)可見性

用戶只有知道當(dāng)前系統(tǒng)狀態(tài)是怎樣的,用戶才能做出更改,也就是說消除評估和執(zhí)行之間的鴻溝并弄清楚下一步需要做什么才能更好的完成任務(wù)。系統(tǒng)應(yīng)該在合理的時間內(nèi)通過適當(dāng)?shù)姆答佔層脩羟宄私庹诎l(fā)生的情況和目前的狀態(tài),例如,開車時儀表盤的速度指示駕駛者減速還是加速,信息獲取的缺失一般代表著控制的缺失。

 

  • (1)明確位置

無論是在現(xiàn)實還是在產(chǎn)品的使用狀態(tài),對于迷失方向感都是一件讓人沒有安全感的事情,也對接下來的操作造成比較大的影響,所以我們可以通過微交互吸引用戶的注意力,讓用戶能合理的明確自己現(xiàn)在所在的位置。

 

  • (2)反饋進(jìn)度

每當(dāng)用戶與系統(tǒng)交互時,他們都需要知道交互是否成功,如果因為各種原因,系統(tǒng)無法及時反饋,我們應(yīng)該給與用戶進(jìn)度的反饋,或者是用戶在進(jìn)行某些任務(wù)的時候,我們應(yīng)該分步驟給用戶,并在執(zhí)行的過程中給與用戶當(dāng)前的進(jìn)度,來預(yù)估完成該任務(wù)還需要多久。

 

1.62 系統(tǒng)反饋

每當(dāng)用戶和系統(tǒng)發(fā)生交互時,用戶需要知道操作是否成功。而這個反饋的過程適合的微交互可以增添用戶在使用過程中的趣味性,另外一種便是可以增強用戶在使用過程中的“確定性”,避免用戶在點擊后因為反饋不太明顯而誤以為沒有點擊的錯覺。

  • (1)點擊后的反饋

按鈕是我們在使用APP中使用頻次最多的交互功能,根據(jù)場景的不同,我們需要反饋的樣式也是不一樣的,比如,我們的點贊后的反饋微交互應(yīng)該是積極正向的,當(dāng)這個按鈕的功能屬于功能形式的時候,我們的反饋應(yīng)該是給與用戶明確的反饋,例如我們開關(guān)按鈕,讓用戶能明確當(dāng)前按鈕的狀態(tài)。

 

  • (2)引導(dǎo)視線

按鈕的能給與用戶除了功能方面的微交互的反饋外,還有一種是點擊用途的反饋,例如,我們常常使用的美團外賣,我們在選好我們想要的商品后,點擊后我們會看到商鋪成拋物線的進(jìn)了購物車,這樣微交互的就是非常明確的告訴用戶你先選擇的東西可以去哪里找到。

 

1.63.系統(tǒng)狀態(tài)

系統(tǒng)的狀態(tài)從本質(zhì)上講和溝通的透明度有關(guān),系統(tǒng)狀態(tài)的可見性是指系統(tǒng)狀態(tài)傳達(dá)給用戶的程度,理想的情況是,系統(tǒng)應(yīng)該始終在合理的時間內(nèi)通過適當(dāng)?shù)姆答伿褂脩袅私猱?dāng)前發(fā)生的情況。

  • (1)當(dāng)前的系統(tǒng)狀態(tài)

我們在生活中,要是當(dāng)前手上事情比較忙碌,無法幫助別人去處理一些事情或者無法回音別人的消息的時候,我們應(yīng)該告知對方,這是比較禮貌的一件事情。

所以當(dāng)我們的系統(tǒng)正在加載中、或者在執(zhí)行某項工作的時候,應(yīng)該通過微交互的方式告知用戶,讓用戶知道我們的產(chǎn)品并沒有宕機,而是在工作中。加載時長在6-10秒的情況下,我們一般是通過這樣的微交互會采用循環(huán)加載的動畫去呈現(xiàn),而需要等待10-15秒這樣的,或者更長的時間,循環(huán)加載的動畫也會給人一種宕機的錯覺,我們應(yīng)該適當(dāng)?shù)慕o與用戶一個進(jìn)度條,告知用戶當(dāng)前處理的進(jìn)度,可以使得用戶在焦慮不安中解放出來。

 

  • (2)內(nèi)容加載狀態(tài)

在蘋果手機發(fā)布的時期,因為網(wǎng)速比較慢,在點開APP的時候,APP的內(nèi)容都沒還加載好,所以喬布斯的解決方案是用啟動頁去遮擋下這一不完美的問題。

我們在APP在頁面的跳轉(zhuǎn)中,肯定也會遇到這樣的問題,就是用戶在點擊后,內(nèi)容不能及時的加載出來,所以我們通用的解決方案是使用一種加載容器“界面骨架”來呈現(xiàn),這種臨時用來展示的容易不僅可以緩解用戶在等待過程中的焦慮,也可以通過“界面骨架”去提前了解頁面的大體的結(jié)構(gòu),構(gòu)建用戶的預(yù)期,讓用戶的視覺得到一個緩沖的時間。

 

1.64.觸發(fā)狀態(tài)

當(dāng)用戶主動觸發(fā)的事件,我們的產(chǎn)品應(yīng)該及時的給與用戶反饋,就像我們遇到熟人打招呼,要是打完招呼對方不回復(fù),那也可以算是一件“社死”的時間了,所以觸發(fā)反饋事件中的微交互也是值得我們?nèi)タ剂康囊患虑?,它可以提升用戶對產(chǎn)品的友好度。

  • (1)提醒預(yù)通知

一般正常的消息通知都是為了提醒用戶有事情需要處理,所以,我們采用有趣味的微交互能有效的吸引用戶的視線和信息的傳遞,已達(dá)到通知的目的。

 

  • (2)預(yù)判用戶的輸入

在多數(shù)的APP 中,填寫表單信息的必不可少的步驟,比喻,比較常見的填寫注冊登陸的信息和一些比喻的資料的填寫,由于這些信息表單一般含的信息并不是很少,所以,我們需要在每一步的檢測用戶填寫的內(nèi)容是否有問題,及時的提醒用戶更正,不然等用戶全部填寫完了在提醒用戶的情緒可能會“蚌埠住了”,所以通知我們在填寫密碼的時候,要是密碼過于簡單,我們需要提醒用戶需要添加哪些內(nèi)容,郵箱的格式是不是正確的,等等。

 

2 微交互的構(gòu)成

那怎樣才能做好“微交互”呢?丹·賽弗在他的著作《微交互:細(xì)節(jié)設(shè)計成就卓越產(chǎn)品》中,提出了好的微交互應(yīng)該有的結(jié)構(gòu): 觸發(fā)器、規(guī)則、反饋、循環(huán)與模式 。我們一個個來講。

 

2.10 觸發(fā)器

觸發(fā)器,是啟動微交互的“扳機”,是微交互啟動的原點。要把識別“扳機”的成本,降得越低越好。就像沈騰在《羞羞的鐵拳》的那句經(jīng)典臺詞一樣“你過來呀”,簡單且易于識別。

觸發(fā)器一般是分為兩種,就像平時打游戲一樣,有主動技能和被動技能,觸發(fā)器也被分為手動觸發(fā),即用戶主動去觸發(fā)的,被動觸發(fā),即系統(tǒng)被動觸發(fā)的。

 

2.11 手動觸發(fā)器

手動觸發(fā)器一般是用戶自主的去點擊,所以我們盡量要去保證觸發(fā)器的識別性,以及用戶在點擊前的一些心里預(yù)期的管控。手動觸發(fā)器一般有三項設(shè)計原則:1.降低識別成本    2.對用戶的預(yù)期管控     3.考慮用戶的使用場景

 

  • (1)降低識別成本

觸發(fā)器是微交互啟動的第一步,在使用場景下必須要讓用戶能識別出來,用戶才能去點擊,所以觸發(fā)器要足夠清晰明顯。

比如,我們在瀏覽和使用視頻屏網(wǎng)站或者視頻APP的時候,網(wǎng)頁或APP上的視頻中間都有個碩大的“播放”按鈕,比如,攝像機上的錄像鍵,總是最明顯的紅色;這些都是觸發(fā)器在提示用戶,應(yīng)該點它,且外觀樣式都是采用通俗易懂的外觀樣式。

 

  • (2)對用戶的預(yù)期管控

我們一般去一家陌生的商店的時候,有的商店會玻璃門,比較高級的是自動的,一般的店鋪都會是手動的,這時候,一般的手動的玻璃在門上都會貼上這個門是用推的形式開還是用拉的形式去關(guān),這樣,我們便知道這樣去推或者拉門,是肯定可以把門打開的。

另外一種情況是要遵循用戶日常生活場景的認(rèn)知,比如,我曾經(jīng)使用過一款教育的產(chǎn)品,它有點類似與房子的home鍵是返回鍵,但是在絕大多數(shù)的APP里都是去首頁,所以,這項設(shè)計便是違反了用戶日常的認(rèn)知,沒有對用戶的預(yù)期管控。

所以我們的觸發(fā)器需要讓用戶知道我點了之后會去到哪里,在形式的設(shè)計上需要明確,比如我們的微信或郵件APP的一角會顯示未讀郵件的數(shù)量,提示用戶在點擊后肯定有未讀的郵件或消息。

 

  • (3)考慮用戶的使用場景

在我們平時工作和娛樂中使用的鍵盤,我們鍵盤的按鍵的大小都是根據(jù)用戶在日常使用場景的頻次和設(shè)計大小的,例如,用戶的最多的空格鍵,是最大的,其次是回車鍵,使用的最少的開關(guān)和其他的控制鍵是最小的,這都是考慮到我們生活中的使用場景去設(shè)計的。

我們在設(shè)計觸發(fā)器的時候也是一樣的,需要考慮到用戶在日常生活操作的具體情況來對觸發(fā)器的大小位置來進(jìn)行設(shè)計擺放,盡量讓用戶操作起來比較合適。

所以我們APP的按鈕會根據(jù)使用頻次來確定圖標(biāo)的大小的層級,方便用戶憑借第一反應(yīng)力去點擊使用。

 

2.12 系統(tǒng)觸發(fā)器

系統(tǒng)觸發(fā)器的微交互一般需要用戶滿足了某些條件才會觸發(fā)的,例如我們平時在工作時間設(shè)置的起床鬧鐘,我們微信的朋友圈的更新提示,都是屬于系統(tǒng)觸發(fā)器,在滿足了某些系統(tǒng)設(shè)定的規(guī)則之后才會觸發(fā)的。

系統(tǒng)觸發(fā)器通常會讓用手動設(shè)置何時觸發(fā),觸發(fā)的頻率狀況,比如,我最近想學(xué)習(xí),不想被朋友圈的信息影響,我可以選擇關(guān)閉朋友圈紅點提示,比如,我的鬧鐘設(shè)置的是周一到周五的工作時間去響鈴,我周三晚上加班太晚了,第二天中午十二點去上班,這個時候我就可以單獨的選擇周四這天鬧鐘不響。

 

2.20  規(guī)則

規(guī)則,用來規(guī)定微交互的過程,是整個微交互的核心。好的規(guī)則,應(yīng)該順乎人性、體貼方便。簡單的來說,規(guī)則就是要按套路出牌,不然就會讓用戶感覺到出其不意。

 

2.21  微交互的規(guī)則是什么

微交互的規(guī)則對于不是做程序員或者技術(shù)的用戶來說,是提示用戶,哪些能做哪些不能做,該怎么去做,且規(guī)則設(shè)定應(yīng)該讓用戶一眼就可以看懂,就是日常生活中開燈的開關(guān)和門的推拉一樣簡單。

比如,蘋果手機之前“滑動解鎖屏幕”這便是微交互的規(guī)則,也是最基礎(chǔ)的規(guī)則。

所以,我們可以發(fā)現(xiàn),規(guī)定的設(shè)定需要滿足兩點條件,1.名詞(通過什么去調(diào)整)即滑動條,2.動詞(用戶該怎么去做)滑動既可解鎖手機。

 

2.22  規(guī)則應(yīng)該符合用戶認(rèn)知

一般每個平臺的核心用戶都是不一樣的,使用的習(xí)慣也是不一樣,我們盡量了解用戶平時的習(xí)慣,去設(shè)定規(guī)則,我們都知道,像一般的電商都是有購物車的,都是為了方便用戶將選好的物品一起結(jié)算,而拼多多卻反其道而行之,它并沒有購物車,這便是針對用戶生活習(xí)性的不同而設(shè)定的。

拼多多的主要戰(zhàn)略是以農(nóng)村包圍城市,最開始的主要是還是流行在五環(huán)外的農(nóng)村用戶,這些用戶和淘寶或其它平臺也不是重合的,可能是從來沒有用過電商APP的用戶,而在一些偏遠(yuǎn)的地區(qū),他們的超市是沒有購物車,如果加上購物車會增加用戶的教育成本,其次,我們都知道拼單都是講究及時性的,所以,在考慮到平臺用戶的用戶背景和用戶的使用場景,就沒有增加購物車。

所以,我們在設(shè)定微交互規(guī)則的時候,依照現(xiàn)行平臺已收集到的使用者的資料來設(shè)計,利用已知情境及行為來對現(xiàn)在的互動進(jìn)行分析與調(diào)整。

 

2.23 給用戶提供選擇

在和異性聊天的時候,如果想和對象一直有話題的話,我們聊天盡量不要以陳述句結(jié)束,而是要給對象可以接的上的開放式的問題,讓對方能非常輕松的去接話。

所以,我們通過對用戶的了解和操作的場景,我們給用戶一個選項,并提示給使用者,來串連整個流程。所以,通常用系統(tǒng)默認(rèn)項>按場景出現(xiàn)項

 

(1) 系統(tǒng)默認(rèn)選項

系統(tǒng)默認(rèn)項和考慮場景的選項是相互關(guān)聯(lián)的,正常的情況,在有限的選項中為用戶提供默認(rèn)項。而默認(rèn)項應(yīng)該是大部分用戶最常用的那個選項。

例如我們在退出或者刪除的時候需要二次確認(rèn),正常的會將確認(rèn)放在我們比較好操作的位置且會高亮放大展示,一般的電商平臺上的產(chǎn)品也是種類繁多,所以一般的電商平臺都會有分類區(qū),將不同的商品歸類為不同默認(rèn)的選項,來供用戶選擇。

 

(2) 按場景出現(xiàn)的選項

按場景出現(xiàn)的選項我們將它分為兩種,一種是只在需要的時候出現(xiàn),另外一種是只提供需要的選項。

  • a. 在需要的時候出現(xiàn)

在日常的產(chǎn)品的設(shè)計中,有些功能不一定需要一直存在,所以我們需要考慮在用戶需要的時候在提供給用戶,或者是我們對的用戶在適當(dāng)?shù)臅r候在出現(xiàn)。

比如,我們在聽歌的時候,一般時候都會在手機放在一旁做別的時候或者閉上研究休息,只能只有覺得這個歌曲比較好聽以后想在KTV去唱的時候或者對歌曲有比較濃厚的興趣的時候,我們才會去查看歌曲,而網(wǎng)易云音樂也許是發(fā)現(xiàn)了這個洞察點,在我們看一會歌詞,在歌詞下面的地方,會出現(xiàn)K歌的話筒,如果用戶想練習(xí)下自己唱這個歌是什么樣的,便可以點進(jìn)去直接唱,而不是默默的在屏幕上看著歌詞跟唱。

 

  • b. 只提供必要的選項

我們大部分在中午的時候,都糾結(jié)中午吃什么這個問題,主要是糾結(jié)的點是外賣的選擇的太多了,要是公司提供食堂的話,在食堂限定的菜譜內(nèi)去選擇,我想,大部分人中午也不會那么煩惱了。

所以在某些場景中,我們需要根據(jù)場景去給用戶提供選擇,提升用戶在使用中效率,比如,我們國內(nèi)的搜索百度,主界面上只有搜索框和百度一下,簡潔明了,讓用戶一看就知道產(chǎn)品的主要功能,比如,當(dāng)我們因為軟件連接上車上的藍(lán)牙后,便進(jìn)去的車載的模式,因為開車的時候需要集中注意力去開車,所以車載模式下,很多不必要的功能便會被隱藏起來,只會提供必須的功能選項按鈕。

 

2.30 反饋

反饋,是向用戶說明規(guī)則。用戶并不知道你設(shè)計了什么規(guī)則,你要通過反饋友好地讓他知道。

你輸入字?jǐn)?shù)太少,它顯示:需要6個以上字符;你輸入簡單單詞,它顯示:密碼太好猜了;符合要求,它會按照密碼的強度,逐級顯示:弱,不錯,強,很強!

其次是及時的反饋可以增加用戶的活躍度,蝦皮購物在前幾年時也用這個手法,讓用戶每天可以免費轉(zhuǎn)兩次,之后要轉(zhuǎn)轉(zhuǎn)盤時,需要付出「蝦幣」,我即使理性上知道這可能是蝦皮回收蝦幣的手法,而且游戲贏家絕對是蝦皮,還是付了幾枚蝦幣,為了多賭幾次「我就是那個幸運兒」。只能說當(dāng)這些經(jīng)典的實體體驗移到線上,其策略與目的還是能順利運作,從中學(xué)到的是,現(xiàn)今的數(shù)位產(chǎn)品透過借鏡過去「已被驗證成功的實體體驗」,在數(shù)位產(chǎn)品上拷貝并實現(xiàn)其預(yù)期效果。

吃角子老虎機善用回饋機制來「強化行為」,提供的不可預(yù)測性是游戲的一環(huán)。

但一般來說,我們會希望在微互動中提供一致的、對我們期望的行為的正向激勵,因此回饋的應(yīng)該是「可預(yù)測」的。

同時,回饋本身就要可以解釋規(guī)則,如:按下按鈕(觸動觸發(fā)器)會發(fā)生什麼事(回饋),回饋需要告訴使用者可以對微互動「做什麼」。

 

2.31 反饋給與用戶安全感

我們給與用戶的反饋要盡量與用戶本次的操作的相關(guān),比如,用戶下載文件,我們需要給與用戶的反饋信息是,已開始下載,下載的進(jìn)度和下載完成,如果反饋在細(xì)節(jié)點,我們在下載的過程中可以提升用戶,”下載過程中會占用大量的帶寬,也許用影響您瀏覽網(wǎng)頁或者其他是上網(wǎng)操作”,反饋越是細(xì)節(jié),用戶在體驗微交互的過程中的負(fù)面情緒就越少,提升用戶在使用過程中的確定性和安全感。

 

2.32 反饋具有主次性

微交互的反饋直觀也是比較重要的因素之一,可以讓用戶更好的理解規(guī)則,降低用戶的認(rèn)知成本,我們反饋給用戶的信息應(yīng)該都是準(zhǔn)確且重要的,例如我們的消息提醒,一般都是在有幾條就提醒幾條消息,消息的傳遞需要做到少即是多,信息越是重要,反饋的層級就要越高。

 

2.40 循環(huán)與模式

循環(huán)與模式,我們可以將它理解為是規(guī)則的分支。比如,鬧鐘是你每天接觸的第一個“微交互”了吧。眼睛還沒睜開,鬧鐘就響了。你重重拍下去,這時就啟動了“再睡一會兒”這個分支的規(guī)則,也就是“模式”。如何設(shè)計這個分支,最合理呢?你可以讓它5分鐘后再響,如果再拍下去,就別叫醒他了?!澳阌肋h(yuǎn)叫不醒一個裝睡的人”。這樣合理嗎?

也許不合理。更合理的做法是,拍第一次,5分鐘后再響,拍第二次,3分鐘后再響,拍第三次,縮短為1分鐘。然后就一直響。因為你拍的次數(shù)越多,越有可能因為貪睡誤事。

循環(huán)與模式,就是一次性的或者循環(huán)的分支規(guī)則。

 

2.41 什么是模式

模式指的是:執(zhí)行一種不常用的展示形式(在某些情況下可能會影響到微交互主要要達(dá)成的目的)比如,我們的APP中都會有設(shè)置功能,我們在修改默認(rèn)的設(shè)置的時候,其實也是對APP的規(guī)則的一次修改,讓APP朝著我們想要的方向去展示。

我們都用過股票軟件去看股票行情,在行情頁面剛進(jìn)去的時候,我們是根據(jù)A股、港股、美股這樣的模式去瀏覽我們感興趣的企業(yè)股票,然后我們將我們看好的企業(yè)添加到自選里面的時候,我們下一次在打開軟件的時候,就可以在自選里看到我們感興趣的股票,這便執(zhí)行一次模式,模式便是在循環(huán)與循環(huán)不一樣的展示形式,可能是用戶自己設(shè)定的或者是軟件提供的選擇。

 

2.42 無限模式與一次性模式

正常的模式是指將一些規(guī)定好的操作單獨拿出來到另外的空間根據(jù)用戶的喜好去定義,但是我們在模式中也會分兩種情況,一直是無限模式與一次性模式。

(1)無限模式

無限模式是指用戶要在某段時間內(nèi)去使用一種狀態(tài)的時候才會選擇開始,例如,我們使用鍵盤打英文字母的時候,我們想要大寫和小寫都是可以去切換選擇的,只有我們的用戶在需要長時間的去使用大寫字母,才會按下鍵盤上的“Caps lock”去鎖定大寫狀態(tài),這種模式的好處是,用戶不會忘記自己正在一個特殊模式中。

(2)一次性模式

一次性模式是用戶自主開啟,且執(zhí)行一次便是結(jié)束,不再執(zhí)行,比如我們用siri去喊一句“siri,幫我定一個早上8.的鬧鐘”,這時,sir會告訴我們定的是幾號上午還是下午的鬧鐘,這個鬧鐘在執(zhí)行一次便會失效。

 

2.43 什么是循環(huán)

循環(huán)決定了微交互的持續(xù)時間重復(fù)的頻率,這個也和我們的規(guī)則的設(shè)定相關(guān)。

 

2.44 循環(huán)的分類

(1) 計數(shù)循環(huán)

即我們在給用戶反饋前需要來回檢查規(guī)定好的次數(shù),發(fā)現(xiàn)了問題再給用戶反饋。例如,我們的微信在網(wǎng)絡(luò)不穩(wěn)定的情況時,我們會看到微信會連續(xù)好幾次的出現(xiàn)刷新,然后才會給用戶網(wǎng)絡(luò)不好或者斷網(wǎng)的提示。

(2) 條件循環(huán)

即在滿足條件執(zhí)行后,可以進(jìn)行自行的內(nèi)部條件,比如,當(dāng)我們的房租在沒有到了交租的日子沒有交的時候,就會收到繳費的提醒,過幾天在不交就會在提醒一次,要是按時繳費了便不會在提醒。

(3)集合循環(huán)

即循環(huán)的核對數(shù)值,然后停止,和前面的計數(shù)循環(huán)有相似之處,例如我們短信系統(tǒng),會對收到的信息進(jìn)行系統(tǒng)的統(tǒng)計,然后發(fā)現(xiàn)有未讀的信息,便會在角標(biāo)上記錄數(shù)值1.

(4)無窮循環(huán)

即循環(huán)開始后,除非人為的干預(yù)讓它停止或者系統(tǒng)出問題的時候才會停止,否則會一直的循環(huán)下去,就像永動機一樣。無窮循環(huán)分為兩種一種是開放循環(huán),另外一種是封閉循環(huán)。

(5)開放循環(huán)和封閉循環(huán)

  • 1)開放循環(huán)

即在滿足條件后,執(zhí)行一次便結(jié)束,miui有個功能是可以設(shè)定手機每天早上什么開始,當(dāng)每次到達(dá)這個時間后,我們原本處于關(guān)機狀態(tài)的手機便會開機,這個指令執(zhí)行一次便不會在執(zhí)行了。

  • 2)封閉循環(huán)

是根據(jù)一定的環(huán)境或者其他的反饋可以進(jìn)行自行的內(nèi)部調(diào)整,比如,當(dāng)我們手機開機后,我們的手機屏幕的亮點會根據(jù)環(huán)境光而去調(diào)節(jié)。

  • 3)長循環(huán)

長循環(huán)可以理解為是一種陪伴用戶在使用我們產(chǎn)品時候記錄的一種微交互,使用的時間越長,這種記錄就越多,比喻我們軟件的搜索記錄和瀏覽記錄便是一種長循環(huán)。

  • 4)漸進(jìn)揭示或漸進(jìn)減少

長循環(huán)的另外一種情況便是當(dāng)用戶長期使用后對軟件越來越熟悉后,我們可以對有經(jīng)驗的用戶開放更加進(jìn)階的玩法比如一些快捷鍵,可以幫助用戶提升效率。

長循環(huán)的另外一種情況便是漸進(jìn)較少,即當(dāng)我們的用戶熟悉了我們的軟件后,有些界面上的說明解釋的提示可以適當(dāng)?shù)娜サ?,簡化界面,對用戶而言,干擾少了,也會提升使用的效率和交互的速度。

 

3 微交互的層次

微交互在產(chǎn)品中的應(yīng)用場景也是比較豐富的,一般我們的用戶首先感受到是微交互給予用戶視覺層的體驗,其次深入后是功能交互層的體驗,最后是體驗了一個容錯性比較好的心理上的愉悅,也就是情感層。

視覺層主要給予用戶感官層面的體驗,交互層是給予使用上的效率體驗,情感層主要是讓用戶體驗后心理上有滿足或者愉快的感受。

但是這些層面又不是絕對獨立的,每個微交互設(shè)計都能在上述三個層面中找到單獨或者組合,比如雙擊屏幕的反饋,就滿足了視覺層面、功能層面與情感層面的三層優(yōu)化。

 

3.10 微交互視覺層的應(yīng)用

在視覺層,考慮的轉(zhuǎn)場交互動作是否足夠流暢,視覺是否美觀,反饋交互是否有創(chuàng)意,是否加深品牌印象。

 

3.11相同的元素串聯(lián)轉(zhuǎn)場

推拉搖移是攝像中的術(shù)語。推指把鏡頭變焦到長焦端,使景物更近,拉則相反,把鏡頭變焦到廣角端,使景物顯得更遠(yuǎn),搖指鏡頭跟隨運動的物體做同方向的轉(zhuǎn)動,移指鏡頭跟隨動體做平行移動。這些手法都是經(jīng)歷過前人的無數(shù)字的實踐所總結(jié)出來的道理。

我們在做交互轉(zhuǎn)場也是一樣,合適的轉(zhuǎn)場是讓產(chǎn)品添姿增色的重要手段之一,在iOS默認(rèn)的轉(zhuǎn)場效果就是頁面從左往右去進(jìn)場,但是想要在讓你交互轉(zhuǎn)場看起來比較舒服,就需要在細(xì)節(jié)上下功夫,其中比較常見的手法就是界面中有相同的元素的時候,讓他們將他們串聯(lián)起來,這樣的交互轉(zhuǎn)場會讓你產(chǎn)品看起來更舒適。

 

3.12 卡片推開周圍的元素

在安卓的Material Design提出Z軸的概念,在扁平化的界面上讓產(chǎn)品有三維的層次感(三維就是X軸(左右)、Y軸(上下)、Z軸(前后)組成的立體世界,而二維就是只有X和Y軸的平面世界。)我們知道手機的界面是一個平面和二維的空間,Material  Design通過一些二維的表現(xiàn)手段,比如投影和動態(tài)效果,來構(gòu)建Z軸(前后)的概念。

在這個基礎(chǔ)上,我們可以在微交互上下功夫,例如當(dāng)界面中的卡片比較多的話,我們想讓產(chǎn)品的體驗更具有層次感,我們可以通過卡片與周圍元素的變化產(chǎn)生關(guān)聯(lián),營造微交互中的產(chǎn)品層次感。

 

3.13 降低認(rèn)知難度

我們每個人在遇到自己不同的領(lǐng)域信息的時候,有些信息是用戶不易理解的,而我們所服務(wù)的產(chǎn)品可能是來自各個行業(yè)的,針對比較專業(yè)的知識的時候,我們應(yīng)該專門針對這種場景處單獨的處理,降低用戶的認(rèn)知難度。

比如,我們在早上上班經(jīng)常會用到美團單車,因為是共享單車,所以有的車部分零件會出問題也是比較正常的,在騎行的用戶發(fā)現(xiàn)了車輛損壞的部位,卻無法辨認(rèn)報修的部位,所以美團單車的處理是將整車拆解,將不同的部位標(biāo)注出來,哪里有問題可以點擊直接報修。

同樣的場景也會常常發(fā)生在醫(yī)療的產(chǎn)品中,比如,我們發(fā)現(xiàn)身體哪里不舒服的時候,比較快速的可以通過了解APP來快速問診,但是通常我們不是醫(yī)學(xué)專業(yè)的,所以往往無法準(zhǔn)確的說出自己身上哪來不舒服,或者往往只能模糊的說出,所以,我們可以通過將身體部分拆解劃分,方便用戶及時說出自己哪里不舒服。

 

3.14 專屬的元素動畫樣式

我們?nèi)颂焐加泻闷嫘?,對新鮮的事物都有嘗試的心理,我們在微交互的設(shè)計中,也需要具有創(chuàng)新精神,讓用戶在視覺體驗層有與其他產(chǎn)品有不一樣的觀感,這樣有利于樹立我們產(chǎn)品的品牌感知。

比如,我們在點擊TAP時候的特殊的動畫呈現(xiàn),點贊時候獨特的反饋,都會在視覺層面給用戶留下比較深刻的印象。

3.14 強化操作過程中的趣味性

下拉刷新是我們在產(chǎn)品中日常會使用的交互,現(xiàn)在的產(chǎn)品一般都不會使用默認(rèn)的“菊花”的下拉刷新,一般會使用自己的IP或者更加有趣的MG動畫,都是為了讓用戶在使用我們的產(chǎn)品時候在視覺層有新的體驗,與其他的產(chǎn)品去拉開差距。

 

3.15 循環(huán)動畫強化產(chǎn)品氛圍

我們在酒吧857的時候,酒吧都會有氣氛組,來讓新來的客人比較快的融入到酒吧愉快的氛圍中,或者一般商業(yè)區(qū)就過節(jié)的時候,都會將街道和廣場裝扮與節(jié)日相符的燈光,都是為了讓客戶快速的融入到氣氛中。

我們在產(chǎn)品中也是,有到功能想吸引用戶的目光,或者想讓用戶快速的融入到某節(jié)日到氛圍中,都是可以通過循環(huán)都動畫去引導(dǎo)用戶。

 

3.20 微交互交互層的應(yīng)用

通過控制轉(zhuǎn)場樣式,反饋樣式與反饋時間可提高交互效率,幫助用戶認(rèn)知,提升產(chǎn)品數(shù)據(jù)。

 

3.21 交互行為主動聯(lián)動性

我們都知道,我們手機的屏幕空間是有限的,有時候的功能布局方面可能不是那么的合理,這個時候,我們的微交互就可以起作用了,比喻,我們手機上滑當(dāng)時候,就可以將某些用戶比較常用的功能常駐在屏幕上方,當(dāng)用戶想去操作的時候,不用在滑回去在去操作,在體驗上減少了用戶的操作步驟,提升了用戶在產(chǎn)品用戶過程中的舒適感。

 

3.22 合適的元素出現(xiàn)在適當(dāng)?shù)臅r機

我們經(jīng)歷過這樣的時候,當(dāng)陌生人來找我們做某些事情的時候,我們的第一反應(yīng)力都是比較抗拒的,但是熟人的話我們可能會因為各種原因不可以拒絕。

產(chǎn)品設(shè)計中也是一樣,如果我們想讓用戶去應(yīng)用商店去給我們的產(chǎn)品一個好評,肯定是不能一上來就給用戶引導(dǎo)去評價,這樣會極有可能會導(dǎo)致差評的,但是,我們可以利用用戶“啊哈時刻”去提升用戶的好評動機,例如,當(dāng)用戶覺得某內(nèi)容不錯的時候點贊了,收藏了,我們這個時候讓用戶去好評,這樣好評的幾率會大點,起碼不會引起用戶的逆反心理。

所以,當(dāng)我們想要用戶去為我們做某些事情的時候,一定需要找準(zhǔn)時機,結(jié)合微交互,提升用戶去完成某件事情的意愿。例如,當(dāng)用戶在瀏覽商品的時候,我們可以給用戶發(fā)放優(yōu)惠券,我們想讓用戶去分享我們的內(nèi)容的時候,可以在用戶在快看完的時候,出現(xiàn)分享按鈕,都是可以通過微交互去讓用戶幫我們?nèi)プ瞿承┦虑?,以達(dá)我們想要的結(jié)果。

我們的知道豆瓣是一個社區(qū)內(nèi)的產(chǎn)品,它是希望用戶在豆瓣來發(fā)表自己的想法的,所以,當(dāng)用戶看到評論區(qū)的時候,它用將評論區(qū)給展開放大,吸引用戶的注意力,從而加大用戶互動的意愿。

 

3.23 提升用戶使用效率

一個產(chǎn)品能否讓用戶高效的操作和使用,是產(chǎn)品好不好的指標(biāo)之一,產(chǎn)品通過用戶在使用過程中的高效體驗,能讓用戶通過一些不經(jīng)意的小能有“哇”感覺,能讓用戶感受到產(chǎn)品團隊的良苦用心和匠人精神。

 (1)方便用戶的操作

我們都在電商產(chǎn)品買東西的時候退過貨或者發(fā)過快遞,每次通過APP填寫的那一堆地址都很讓人頭疼,我們在別的APP上復(fù)制了地址,打開菜鳥裹裹APP,系統(tǒng)能自動識別剪貼版上內(nèi)容,自動跳轉(zhuǎn)頁面進(jìn)入寄件頁,將信息拆解為收件人姓名、電話、地址等默認(rèn)填入,可補全信息或直接提交寄件需求,無需手動錄入或一欄一欄的填寫內(nèi)容。這是將用戶在進(jìn)入APP前的行為做保留解析,當(dāng)打開APP時,為用戶預(yù)先多想一步,直接提供可能所需的功能,讓用戶減去層層點擊進(jìn)入功能頁面的步驟,高效完成目的性。

我們?nèi)ヒ粋€陌生的地方旅游也是一樣,每次找酒店住處都是一件讓人比較心累的時候,飛豬APP在在地圖找房的的基礎(chǔ)上,通手指在地圖上畫圈來定位,方便了用戶自定義找房的用戶訴求,給用戶體驗上的新鮮感。

 

 (2)減少兩次操作

我們在日常工作和生活中,我們都不喜歡返工和重復(fù)的工作,所以,我們在設(shè)計軟件的交互過程中,也是盡量讓用戶不要做重復(fù)的工作,避免引起用戶焦慮的情緒,為用戶提升使用效率。

比如,我們在微信給別人聊天的時候,可以因為各種的場景和其他因素,我們可能會給朋友發(fā)消息的時候會發(fā)錯消息,在輸入錯后,我們可以針對單條的信息進(jìn)行撤回和修改,便可以再次再次發(fā)送,不需要再次全部重新輸入,因為大部分用戶打錯字可能只是個別的字會錯,只需要單獨修改那幾個字就可以了。

另外還有一種情況是我們大部分的軟件都是采用信息流的布局,用戶在滑動很遠(yuǎn)之后在想在回來的時候,也是一件讓用戶比較痛苦的事情,所以大部分的軟件會支持一鍵返回頂部,像微信的就是雙擊頂部就可以返回,大部分的軟件都是會用戶滑動到第二屏的時候,會出現(xiàn)返回頂部的按鈕。

 

(3)為不方便而設(shè)計

因為現(xiàn)在的手機大部分都是觸摸屏,當(dāng)用戶輸入內(nèi)容出錯的時候,需要修改的時候,手指無法精準(zhǔn)的操作光標(biāo)移動,所以我們可以在設(shè)計操作上幫助用戶去解決這個痛點,盡量為用戶在操作中提供方便。

比如,夸克瀏覽器設(shè)計一個滑塊來解決這個痛點,方便了用在文字輸入中需要精準(zhǔn)修改的問題,大部分的的文字輸入工具也是同樣的解決方案。

 

3.24 預(yù)判用戶的操作

我們在看港劇的時候,一般都會看到這樣的劇情,警察在行動的時候,因為場景比較特殊,一般是不能說話交流的,因為怕打草驚蛇。所以,一般在行動的時候,行動的隊員們只需要相互打打手勢,交流一下眼神,大家都都心領(lǐng)神會了。

所以,我們在產(chǎn)品設(shè)計的過程中,也需要了解用戶的心理活動,所以好的微交互不僅僅需要滿足用戶當(dāng)年的操作,更加需要能預(yù)測用戶的下一步的操作,這樣才可以更加高效的輔助用戶完成操作任務(wù)。

 

(1) 預(yù)防用戶的錯誤操作

我們的交互無論做的多么滴水不漏,也無法可以避免用戶在操作的過程中發(fā)生各種失誤的情況,所以,我們應(yīng)該根據(jù)用戶最常會做出失誤的場景提前去糾正用戶的操作,為用戶去節(jié)省時間。

例如,我們在通常的使用中會有很多帶有自己習(xí)慣的操作,我們最常用支付寶給別人轉(zhuǎn)賬的時候,常常會將自己轉(zhuǎn)賬金額輸入到聊天框,所以每次當(dāng)支付寶檢測到用戶只是單獨輸入了數(shù)字的時候,會用小的提示框去提示用戶是不是要轉(zhuǎn)賬,將用戶的錯誤提前告知。

 

(2) 根據(jù)使用歷史預(yù)判

其實用戶的操作使用歷史有很多用途,一種是方便我們對用戶的操作的習(xí)慣的了解,方便我們?nèi)ジ纳朴脩舻牟僮黧w驗,另外一種用戶就是我們通過儲存用戶平時操作和觀看歷史,方便給用戶推薦相關(guān)興趣愛好的信息。

因為現(xiàn)在互聯(lián)網(wǎng)的迅速發(fā)展,基本上每個不同類目都會有各自的APP,每個APP都會有自己的賬戶,為了方便用戶記憶和統(tǒng)一管理,所以大部分的APP都會接入第三方的登錄方式,但是第三方登錄的賬戶也是一般是兩種到三種,所以會導(dǎo)致用戶會忘記自己上次登錄的是哪個賬戶,所以我們軟件需要幫用戶記住上次的采用的是哪個登錄方式,通過微交互的形式來在用戶登錄的時候提示和告知用戶。

 

3.25 為用戶使用場景設(shè)計

產(chǎn)品在日常的使用的過程中,用戶會遇到各種各樣的使用場景,我們體驗設(shè)計師需要針對用戶經(jīng)常在使用產(chǎn)品的過程中的不便去優(yōu)化,這些小的微交互在用戶使用過程中能增加生活的“小確幸”,讓我們的產(chǎn)品能給予用戶一絲絲溫暖。

 

(1)站在用戶的角度思考

在我們平時設(shè)計交互流程的時候,一般是保證了交互流程能夠跑通,一般不會出現(xiàn)什么大的問題,但是,我們還可以從另外的角度去思考,是不是能做的更好,更深的一層。

掃碼付款已經(jīng)深入我們?nèi)粘5纳睿ǔN覀冊诔匈I完東西讓收銀員去收款的時候,我們需要將手機轉(zhuǎn)過去讓收銀員去掃,這樣的使用場景在有時候拿的東西比較多的時候是極其不便的。支付寶在用戶打開付款碼的時候,只用輕輕將手機向下傾斜,二維碼和收款的字體也會隨之翻過去,方便對方去查看,因為收款和付款在支付寶的使用過程中也是比較常用的,這一設(shè)計便是考慮了用戶在收付款中的不便的微交互設(shè)計。

 

(2)考慮場景提供選擇

我們用戶通常在做出某些操作,肯定會有下一步的操作的,我們應(yīng)該考慮到用戶某些場景的高頻操作,給用戶提供選擇,縮短用戶在使用過程的操作路徑。

我們平時在截圖的時候,一般除了發(fā)送給朋友去觀看,其次便是在使用過程中遇到問題需要咨詢,所以我們在用戶截圖后,可以為用戶展示分享或者咨詢的入口,為用戶高頻操作提供使用方便。

我們在日常截圖在再到微信準(zhǔn)備發(fā)送圖片的時候,微信會將最新的截圖以小窗的形式求提醒用戶是否要發(fā)送,這都是基于用戶的高頻操作后提供選擇的最好的例子。

 

3.25 進(jìn)場告知用戶隱藏的功能和操作

我們做設(shè)計的時候可能經(jīng)常會遇到一些無理的要求,例如,這個功能需要強化,但是又不能去干擾用戶,每次遇到這種需求,我們設(shè)計師往往都是比較痛苦的時候,例如當(dāng)用戶沒有開通會員的時候,我們想給用戶去展示會員的一些特權(quán)和首次開通的優(yōu)惠,但是,用戶要是沒有開通,我們是沒辦法很好的去展示的,這個時候,我們可以通過微交互,在進(jìn)場的時候,將隱藏的信息展開,然后過收起來,這樣用戶即看到信息,又不會影響接下來的操作。還有就是當(dāng)我們上新某些功能的時候,想讓用戶去快速的去了解這個功能,這個時候我們可以通過演示動畫的微交互來讓用戶去快速的了解我們新功能怎么去操作。

 

3.26 元素跟隨頁面的形態(tài)改變

我們的產(chǎn)品在操作的時候難免會出現(xiàn)各種狀態(tài),為了讓每個狀態(tài)出現(xiàn)的時候都比較符合用戶的操作的習(xí)慣,這個時候我們需要考慮用戶的場景來改變頁面的布局,例如快手它的戰(zhàn)略是一個內(nèi)容分享的社區(qū),它注重的是用戶與主播之間的溝通,所以,正常的軟件,當(dāng)視頻在播放的時候想看評論,這個時候的步驟都只能側(cè)中一個,但是,快手它考慮到用戶的體驗,當(dāng)用戶在上滑的時候,為了不打斷用戶繼續(xù)觀看視頻,視頻內(nèi)容會慢慢變小,然后固定,這個時候用戶可以在看視頻的時候也可以查看評論,方便用戶與主播之間的溝通,強化了內(nèi)容社區(qū)的氛圍。

 

3.27 照顧邊緣場景

一個產(chǎn)品它的交互是否比較好,我們看的是它是不是能滿足用戶大部分的使用的場景,所以,有的時候,當(dāng)靜態(tài)的交互無法去滿足用戶的一些比較特殊的場景的時候, 我們這個時候就可以考慮微交互的設(shè)計,讓產(chǎn)品的交互體驗?zāi)芨采w的場景比較全面。

例如,當(dāng)我們在微信通訊錄想根據(jù)用戶的首字母去查找人的時候,一般左邊的字母都會做的比較小,無法精準(zhǔn)的查看到我們現(xiàn)在看到哪個字母,所以,當(dāng)我們的手去點的時候,到了某個字母的時候會放大。再比如,我們因為開會將手機調(diào)成靜音或者音量關(guān)了的時候,我們?nèi)ゲシ盼⑿诺恼Z音或者看視頻,這個時候,APP會提升我們音量未開之類的,這都是考慮到極端的場景,讓用戶的體驗更加順暢。

 

3.30 微交互情感層的應(yīng)用

通過趣味幽默化的轉(zhuǎn)場與反饋動畫可以降低產(chǎn)品的負(fù)面體驗或者讓用戶產(chǎn)生愉悅感。

 

3.31 幽默拉近用戶

當(dāng)我們看到有趣的東西的時候總是想和身邊的人去分享我們的喜悅,這是比較底層的邏輯,我們的APP產(chǎn)品也是這樣的,當(dāng)我們想讓用戶持續(xù)去體驗我們的產(chǎn)品或者想要用戶去主動的分享我們的產(chǎn)品,那么,我們可以將產(chǎn)品做的有趣一點。

比如,轉(zhuǎn)轉(zhuǎn)在登陸的時候為了吸引用戶的注意力,它會在用戶登錄的時候做一個比較有趣的小動畫,也消除用戶在多一步操作時候的負(fù)面的情緒。

 

3.32 同理心場景

用戶在使用產(chǎn)品的時候,總有會各種各樣的問題和情緒,我們需要通過視覺緩解用戶的情緒,通過設(shè)計喚起用戶同理心,解決用戶與平臺之間的矛盾。

我們美團和餓了么點外賣的時候,訂單超時配送是最讓人心煩的事情,特別是遇到極端的情況,訂單超時也是常發(fā)生的,所以,設(shè)計時需要在視覺、內(nèi)容來換起用戶的共情心理,從而緩解用戶低谷的情緒,通過設(shè)計給用戶帶來溫暖,降低用戶的差評與投訴。

 

3.34 為特定場景增加儀式感

我們之所以喜歡去線下看演唱會和LIVE,一是可以和自己喜歡“愛豆”親密接觸,其次就是一種氛圍感覺,而一般在線上看直播缺少這種氛圍的儀式感,隨著全球的疫情加劇,我們很多線下的活動和LIVE都不能開展,大部分都只能退而求其次在到線上去開展。所以,在大環(huán)境的趨勢下,我們線上活動是越來越多了,我們需要將以前線上的思維轉(zhuǎn)換,為線上觀看體驗增加儀式感和場景的氛圍。

愛奇藝的電視劇在播放到一些比較“甜”場景的時候,都會在交互上下一些功夫,例如,當(dāng)劇情放到有親親的情節(jié)的時候,會出現(xiàn)“心動震動”的彩蛋交互,提升用戶在沉浸體驗過程中的儀式感,讓用戶能更加能貼心的感受到心動時刻。

 

3.35 轉(zhuǎn)場加載占位符

我們在日常的APP使用中,總會遇到像信號不好的情況,這個時候,我們心里是比較著急的,特別是比較緊急的情況,負(fù)面的情緒是比較大的,我們需要將這點考慮進(jìn)去,為了避免用戶在等待時候的焦慮感和負(fù)面的情況,我們一般會使用加載的占位符和加載的進(jìn)度條,讓用戶知道我們的軟件是在工作中,而且是在賣力的工作中,這樣,可以緩解用戶的負(fù)面情緒。

 

3.36 產(chǎn)品的儀式感

對于我們來說,儀式感是很重要的,比如結(jié)婚紀(jì)念日要去慶祝一下,生日的時候一定要和朋友去high一下,這都是來自我們生活的中的儀式感。

儀式感在產(chǎn)品中也很重要,他可以提升我們用戶的幸福感,例如微信在給朋友發(fā)送生日快樂的時候,屏幕中會掉下蛋糕,在過年的時候發(fā)送新年快樂,屏幕中也會掉落紅包,微信將我們?nèi)粘I钪兴枰膬x式感搬到了產(chǎn)品中,通過微交互來提升我們?nèi)粘5男腋8小?

 

3.37 3D touch判斷用戶的情緒

我們?nèi)硕际歉星閯游铮屛⒔换M足人們的日常的情緒需求也是很不錯的角度,例如facebook的點贊功能可以通過人點擊的力度大小去判斷人當(dāng)天的情緒,例如,點擊的力度越大,說明你的心情比較好,或者對那個觀點比較贊同,如果你點擊的比較輕,說明的你心情不怎么好。

 

4 微交互實際案例的思考

交互是保證這個功能的流程能走的通,用起來沒有問題,而微交互則是讓用戶用起來更順手,是解決了交互做不到的事情。

 

4.10 評價內(nèi)容增加流量曝光入口,信息層級優(yōu)化

例如我們的需求是要在看房的列表處新增精選房源的功能,提升我們房源列表的點擊率,讓用戶不用點進(jìn)去就可以預(yù)判大致的其他用戶對這個房源的評價,但是,產(chǎn)品方可能會考慮的一個問題是如果只展示一條房源精選的評價,可能會讓用戶以為我們是故意只放一條在上面,有故意哄騙用戶進(jìn)去的嫌疑。所以從產(chǎn)品的角度,會考慮多放幾條,讓用戶感覺產(chǎn)品是好評如潮,且展示的不是刻意挑選的。

所以我們在最初給的設(shè)計方案可能是在列表上可以展示多條評精選評論,但是這種情況會導(dǎo)致在靜態(tài)層面會出現(xiàn)一些視覺上的問題,有的列表有精選的評論,有的不夠三條的展示,會導(dǎo)致列表也看起來不是很整齊,用戶在閱讀上的體驗就會非常的不好。

這個時候,在不改變產(chǎn)品經(jīng)理的需求的框架下,我們需要通過微交互的角度去思考,在經(jīng)歷過與產(chǎn)品和開發(fā)的反復(fù)碰撞下,我們發(fā)現(xiàn),在不改變列表的結(jié)構(gòu)下,我們需要通過微交互來解決列表不統(tǒng)一的情況。

首先,先要確定我們列表信息展示的位置,然后精選的評論信息在一個合適的位置上下去滾動,這樣不僅僅決解決了列表高度的不統(tǒng)一的視覺問題,也可以通過動態(tài)元素提高產(chǎn)品的視覺層面的活躍度,吸引用戶的視覺注意力。

 

4.20 細(xì)化產(chǎn)品的分類,提升轉(zhuǎn)換率

在之前的版本中,頂部的TAP欄是可以切換房源、詳情的選項,而在這次的新版本中加入了房源相關(guān)的功能,并把分小區(qū)和推薦功能一起放到首屏。這樣在首屏,便把房源拆分為安居房,人才房,普通房,年付四個tab?;巾撁娴诙?,一級到tab房源,詳情,小區(qū)和推薦并慢慢的出來了,二級tab安居房,人才房,普通房,年付置于一級tab下方。

所以,這樣頁面就出現(xiàn)了比較影響體驗的雙tab,且雙tab一直處于頂部,占用頁面的高度資源,影響用戶去瀏覽頁面。

 

設(shè)計切入點

雙tab的形式在靜態(tài)視覺層面已經(jīng)是無法在優(yōu)化了,因為考慮以微交互的形式去解決當(dāng)前的版本的所存在的視覺問題。

商品的tab作為當(dāng)前頁面的名稱是可以不需要一直顯示的,因此考慮將“安居房”,“人才房”,“普通房”,“年付”滑動到屏幕頂部時合并收納進(jìn)“房源”的tab內(nèi),這樣處理即滿足了用戶需要發(fā)現(xiàn)改功能的需求,又滿足了不占用頁面過多空間的需求。

 

用戶無法感知tab間的收起

由于需要用戶滑動至屏幕頂部時將雙tab合并,所以需要讓用戶100%的了解當(dāng)前消失的tab何去何從,方便下次使用該功能時能方便且快速的找到。然后問題是,當(dāng)用戶滑動頁面比較快的時候,tab的收起很難引起用戶的注意力,這樣對用戶的體驗是很差的。

 

方案:增加首屏雙TAB之間的差異化,增加合并動畫

方案1:運用「斗轉(zhuǎn)星移」法,在用戶滑動頁面至二屏?xí)r,將“安居房”,“人才房”,“普通房”,“年付”作為關(guān)鍵聯(lián)動元素,整體收攏至頂部Tab欄,并最后出現(xiàn)下拉小三角,告訴用戶,原先的四個類目已經(jīng)統(tǒng)一被收攏到一個類目中。這個收攏的動作雖然在動效表現(xiàn)層上,動靜大了些,但是對新版本功能傳遞,避免用戶誤操作有良好的效果。

 

最終方案

最后我們在“安居房”,“人才房”,“普通房”,“年付”文字上部加入了圖標(biāo), 增加用戶對新功能Tab的感知,讓一級Tab與二級Tab差異更加顯性化。

 

實現(xiàn)價值

幫助產(chǎn)品強化新功能認(rèn)知,幫助用戶理清兩個層級間的關(guān)系,避免用戶誤操作、誤下單。

 

5 總結(jié)

成功產(chǎn)品的設(shè)計細(xì)節(jié)是必須在每個層面的體現(xiàn),細(xì)節(jié)不僅僅讓用戶更加堅定的選擇了我們,也可以讓我們在競爭中脫穎而出,而微交互恰恰就是那個四兩撥千斤的設(shè)計亮點。

 

原文地址:站酷

作者: Endings

轉(zhuǎn)載請注明:學(xué)UI網(wǎng) ? 一篇文章看懂交互中的細(xì)節(jié)-微交互

今天一個總監(jiān)和我說,app頁面是3維空間的,我震驚了!

lanlanwork


拿滿屏都是封面的頁面為例,比如視頻類、動漫類的產(chǎn)品頁面,我們可以從以下三個緯度來思考:

1.y軸(高度)的空間節(jié)省

2.x軸(寬度)的空間節(jié)省

3.z軸(深度)的空間節(jié)省

 

1.y軸(高度)的空間節(jié)省

y軸,顧名思義,就是高度,我這里舉三個例子來說明下:

第一個例子,我們來說說封面,我們看國內(nèi)的漫畫平臺,比如快看,大部分是豎封展示:

圖片

但是國外的很多漫畫平臺都是橫封展示居多:

圖片

二者單從高度占比來講,橫封會矮一些:

圖片

第二個例子,也是關(guān)于封面的,國內(nèi)外都會有一些方形封面,但是國內(nèi)的方形封面一般一排只有兩個,而國外的會相對多一點:

圖片

單看高度,右邊的會節(jié)約一些縱向空間。

第三個例子,我們還可以在一些信息上進(jìn)行整合

比如,快看最近瀏覽這個模塊,標(biāo)題是放在上面,信息是放在封面下面的:

圖片

但是有一些產(chǎn)品比如波洞,標(biāo)題是左側(cè)的,而信息文字是放在封面上的:

圖片

信息也能看的清,相比之下,后者高度上節(jié)約了太多空間:

圖片

這也是合理節(jié)約高度空間的一種方法。方法還有很多,大家可以多多思考嘗試。

 

2.x軸(寬度)的空間節(jié)省

x軸,就是寬度了,正常我們只是思考如何在屏幕內(nèi)進(jìn)行節(jié)約空間,那是否可以利用屏幕外的空間呢?

當(dāng)然是可以的,國外有很多常規(guī)模塊都有利用這一原理來進(jìn)行展示作品,比如:

國內(nèi)可能主要用在猜你在追,瀏覽歷史這種模塊多一點。是否可以在更多模塊內(nèi)使用這一展示方式,可以根據(jù)自身產(chǎn)品定位來嘗試。

 

3.z軸(深度)的空間節(jié)省

z軸,那就是屏幕的前后景深了,也就是深度,不僅僅只是思考二維平面的寬高了,而是思考如何利用屏幕縱像的空間。

舉個最簡單的例子,想嗶哩嗶哩漫畫這種:

就很好的利用了z軸的空間,物體不僅僅只是在二位平面內(nèi)展示,而是延伸到屏幕里面,有了深度,相同平屏幕大小,展示更多空間的內(nèi)容。

再比如,最早在韓國app看到的這種交互方式:

圖片

也是很好的利用頁面縱向的空間,達(dá)成一定的亮點和空間利用率。

再再比如,下拉頁面后,在頁面的后面出現(xiàn)一些內(nèi)容:

原理也都是類似的,當(dāng)二維空間無法滿足我們的內(nèi)容擺放需求的時候,我們就可以想辦法拓展維度,讓我們的空間變得更廣,利用率更高,還容易產(chǎn)生一定的創(chuàng)意!

 

總結(jié)

以上就是我個人在節(jié)約利用移動端空間的小小總結(jié),當(dāng)然,有時候信息展示也不能緊緊只考慮面積占比問題,還需要從用戶體驗的爽感、信息層級、點擊轉(zhuǎn)化等多個維度來思考,我這里只是單純從占比這個點來思考,希望能給大家提供一點思路,僅供參開!

 

原文地址:菜心設(shè)計鋪(公眾號)
作者:菜心設(shè)計鋪

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》今天一個總監(jiān)和我說,app頁面是3維空間的,我震驚了!

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

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

桌面和大屏幕上導(dǎo)航欄要怎么設(shè)計其實是一個經(jīng)常被拿來探討的問題,如今這也是 B 端設(shè)計中繞不開的一個設(shè)計問題。Jennifer Rose Kingsburg 曾經(jīng)有針對網(wǎng)頁的三級菜單導(dǎo)航進(jìn)行過一份研究,結(jié)論是在左側(cè)設(shè)置導(dǎo)航好處多多。此外還有很多類似的研究,你可以在這里看到很多相關(guān)研究的摘要。值得注意的是,這些研究大都是 2017年之前的研究成果,而如今很多設(shè)計范式發(fā)生了變化。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

1、左側(cè)導(dǎo)航更容易瀏覽

Eyetrac?荷蘭國際集團的研究表明,用戶習(xí)慣于使用 F 式的瀏覽路徑,這使得左側(cè)導(dǎo)航在一般情況下有著相對更強的可用性,它不需要用戶視線上的查找,因為用戶會下意識注意到它們的存在。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

2、頂部導(dǎo)航更加節(jié)省空間

如果我們經(jīng)常使用筆記本電腦來瀏覽頁面,會很容易注意到不同的導(dǎo)航模塊對于頁面空間的占用比例,左側(cè)導(dǎo)航所占用的頁面控件通常是同樣內(nèi)容量的頂部導(dǎo)航的占用空間的3倍,因為縱向的側(cè)邊欄導(dǎo)航需要考慮到橫向的標(biāo)題占用空間,再加上搜索等功能模塊的加入,這種空間占用就成了不可避免的結(jié)果。即使左側(cè)的菜單欄可以折疊,這種處理方法也不總是有效的,因為這可能會隱藏相關(guān)條目的標(biāo)簽信息,降低了導(dǎo)航的可用性。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

3、側(cè)邊導(dǎo)航更容易縮放和收納

也正是左側(cè)導(dǎo)航本身的排版邏輯,它通??梢燥@示比頂部導(dǎo)航多一倍的條目內(nèi)容,如果你的信息架構(gòu)本身涉及到的一級菜單條目較多的時候,采用左側(cè)邊欄導(dǎo)航是明顯更合理的選擇,而且這種導(dǎo)航非常適合隨著時間推移逐漸增加條目的需求。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

4、側(cè)邊導(dǎo)航支持定制化導(dǎo)航結(jié)構(gòu)

側(cè)邊導(dǎo)航本身雖然占用的空間更大,但是它也有著更多的空間根據(jù)需求來定制各種不同的需求,相比于頂部導(dǎo)航,側(cè)邊導(dǎo)航甚至可以直接將分層的二級菜單直接展現(xiàn)出來,就像 Outlook 的側(cè)邊欄和 Slack 的側(cè)邊欄導(dǎo)航。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

5、側(cè)邊欄更和桌面端系統(tǒng)更一致

你會注意到 macOS 和 Windows 操作系統(tǒng)當(dāng)中,系統(tǒng)默認(rèn)的用戶界面大都采用了靈活的側(cè)邊欄導(dǎo)航設(shè)計,很多 web 應(yīng)用也是如此,它們會將頂部空間留給系統(tǒng)默認(rèn)的菜單模塊。采用側(cè)邊欄導(dǎo)航的 UI 界面可以和操作系統(tǒng)的邏輯保持一致。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

6、懸停激活下級菜單在頂部導(dǎo)航中更好用

懸停激活抽屜式下拉菜單的設(shè)計在頂部導(dǎo)航當(dāng)中是非常自然的,但是在側(cè)邊欄導(dǎo)航當(dāng)中,這種設(shè)計可能會在一定程度上遮擋住下級菜單,如果使用在旁邊展開的方式,可能會占用大量的空間,總而言之,它更貼合頂部導(dǎo)航的交互模式。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

7、頂部導(dǎo)航欄適合做超級菜單

頂部導(dǎo)航正是因為和懸停出發(fā)下級菜單的功能很搭,所以很多電商和大型網(wǎng)站上會使用它來呈現(xiàn)條目眾多的超級菜單。它是用來一次容納超多條目的下級菜單的有效方式,這種布局也為產(chǎn)品展示和廣告留出了足夠多的空間。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

8、盡量避免重設(shè)計時改變導(dǎo)航模式

如果一種導(dǎo)航模式看起來不夠好用,那么是否要借助重設(shè)計的機會,切換到另外一種模式呢?根據(jù) Jira 的用戶測試,95% 的早期用戶對于這種情況會感到非常迷惑,即使是再小的導(dǎo)航功能修改都可能直接影響到大量用戶的日常使用,因此不管哪種導(dǎo)航模式,一旦選定,盡量不要改變。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

9、不論哪種導(dǎo)航欄都面臨響應(yīng)式設(shè)計的挑戰(zhàn)

對于沒有太多條目的頂部導(dǎo)航,在移動端上依然可以直接在頂部呈現(xiàn),不過如果太多了就需要使用漢堡菜單來承載,或者切換為垂直的側(cè)邊欄導(dǎo)航。而側(cè)邊欄導(dǎo)航在移動端上相對好一點,因為導(dǎo)航模式本身是一致的,但是有限的空間內(nèi)如何呈現(xiàn)大量的導(dǎo)航條目同樣存在挑戰(zhàn)。

頂部導(dǎo)航 vs 側(cè)邊導(dǎo)航,到底哪種更好用?

結(jié)論:用哪種導(dǎo)航欄取決于需求

頂部導(dǎo)航:占用空間小,在頁面的位置最為顯著,涉及條目不多的時候效果非常好。對于層次結(jié)構(gòu)簡單的中小型網(wǎng)站,頂部導(dǎo)航還是很好用的,對于層級較少但是二級條目特別多的超級導(dǎo)航,頂部導(dǎo)航也是不二選擇。

側(cè)邊導(dǎo)航:側(cè)邊導(dǎo)航支持一級條目較多且層級較多的導(dǎo)航需求,擴展性良好,對于復(fù)雜的產(chǎn)品和自定義需求較多的產(chǎn)品、涉及到管理功能、 桌面級產(chǎn)品、 都適合使用側(cè)邊導(dǎo)航。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:優(yōu)設(shè)  作者:Taras Bakusevych

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

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

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


Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?

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

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

印象中,Windows 就一直伴隨著我們的成長,它有著 35 年的豐富歷史并不斷帶給我們新的體驗,它的存在充分展現(xiàn)了計算機如何豐富我們的生活習(xí)慣:用 Word 寫下第一篇文章,用 Paint 畫出第一幅畫,或者用電腦寫出第一行代碼。

設(shè)計下一代 Windows 需要我們理解過去,但更重要的是對當(dāng)前和新興人類需求的深切共情,以及對技術(shù)如何更好落地的理解。當(dāng)我們開始 Windows 11 的設(shè)計之旅時,我們研究了過去 18 個月世界是如何變化的,包括疫情大流行暴露出未被滿足的需求和新的行為方式。更重要的是,我們與人們談?wù)撍麄兊膲粝牒捅ж?fù),這樣我們就可以了解什么驅(qū)動著他們,以及他們需要從他們的技術(shù)中獲得什么來實現(xiàn)他們的目標(biāo)。Windows 11 的設(shè)計專注于對人的關(guān)注,計算機如何賦予他們力量,以及用戶到底喜歡什么。

創(chuàng)造大量的愛需要大量與人的溝通,我們喜歡這種溝通,因為以人為本是我們設(shè)計理念的核心。在 85 個以上的專題研究和數(shù)萬輪測試中,我們與所有人進(jìn)行了交談,從喜歡我們產(chǎn)品的忠實粉絲,到希望 Windows 更容易和更平易近人的新用戶。

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

Windows 10 之前使用 Metro 設(shè)計語言,Windows 11 使用 Fluent 設(shè)計語言

(彩云注,可能有的朋友分不清這 2 個設(shè)計語言,彩云專門研究了一些資料,也跟大家一起分享下:

Metro UI 是一種界面展示技術(shù),和蘋果的 iOS、谷歌的 Android 界面語言最大的區(qū)別在于:后兩種都是以應(yīng)用為主要呈現(xiàn)對象,而 Metro 界面強調(diào)的是信息本身,而不是冗余的界面元素。顯示下一個界面的部分元素在功能上的作用主要是提示用戶信息的存在。同時在視覺效果方面,這有助于形成沉浸感。

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

Fluent Design System(以下簡稱 FDS)主要包括五大核心元素:Light(光感)、Depth(深度)、Motion(動畫)、Material(材質(zhì))和 Scale(縮放)。

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

Fluent UI 設(shè)計語言的核心就是在美觀的前提下,應(yīng)用的使用更加自然和流暢。在體驗上用戶會獲得全新的過渡動畫、視覺效果、半透明和模糊等等。毛玻璃效果重新成為趨勢就是微軟通過這套設(shè)計全新語言一手帶起來。

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

這是 Windows 有史以來最受人期待的發(fā)布之一,這得益于基于研究過程中得出的一個關(guān)鍵設(shè)計指導(dǎo)原則:平靜的技術(shù)讓我們的生活真正變得更好。在今天的世界中,平靜是非常需要的,它往往取決于我們掌控、放松和信任的能力。Windows 11 通過讓人感受到熟悉的基本體驗,軟化了以前冰冷的 UI,并增加了情感聯(lián)系,最終促進(jìn)了這一點。這些改進(jìn)讓你更接近你最愛的東西:家庭、朋友、激情、娛樂和創(chuàng)作。Windows 11 是將所有東西結(jié)合在一起的地方,對它的需求從未像現(xiàn)在這樣強烈。

就像它對所有東西造成的影響一樣,疫情也影響了 Windows 11。雖然移動設(shè)備的崛起讓 PC 從聚光燈下淡出,但去年它又重新回到了舞臺中心。在個人與專業(yè)相結(jié)合的新型虛擬模式中,PC 的強大功能和靈活性使我們能夠在家中的各個角落工作。它始終是一個值得信賴的工具和伙伴,跨越工作、家庭和學(xué)校,靜靜地等待我們的輝煌時刻。

過去的一年充分展示了人類的智慧。在一片混亂中,我們看到人們實時學(xué)習(xí)如何在混合環(huán)境中工作,幫助孩子學(xué)習(xí),并找到新的連接和娛樂方式。我們在 Windows 11 的設(shè)計上不斷迭代,努力創(chuàng)造一種深受大家喜愛的體驗,讓我們更容易專注于對我們每個人來說最重要的東西。

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

情緒板捕捉各種新的圖標(biāo)、主題、UI 和插圖。

以用戶為中心

微軟的 Windows 設(shè)計團隊是由創(chuàng)造性的實用主義驅(qū)動的。為超過 10 億人設(shè)計需要同理心。它依賴于將人類的需求內(nèi)化,以建立一個包容所有人的解決方案,同時仍能傳遞獨立的個性。隨著 Windows 躍入下一個時代,它的演變故事再次被講述,通過以人為本的產(chǎn)品設(shè)計,以及打造最具包容性和個性化的操作系統(tǒng)的承諾愈加堅定。

以“開始”菜單為例:Windows 體驗的基礎(chǔ)被移到了核心位置。在聽到人們在使用“開始”時希望提高效率、減少噪音后,我們設(shè)計了一種更干凈、更簡單的體驗,通過優(yōu)先排序人們喜歡的應(yīng)用和他們需要的文件,將用戶置于中心位置。它還適配現(xiàn)代設(shè)備的尺寸因素,使所有屏幕尺寸的訪問更容易,從 Surface Go 到超寬顯示器都能獲得一致的體驗。

在微軟,這些設(shè)計決策不是輕易做出的。團隊癡迷于每個像素,我們更新了“開始”Logo,以配合我們新的視覺語言和動畫,為互動增加樂趣和信心。我們也有意地選擇了壁紙,開機畫面,并調(diào)整了新的中心對齊,使用戶的體驗更加平衡和集中。我們希望你進(jìn)入 Windows 11 的旅程從一開始就真正處于中心。(彩云注:大廠的設(shè)計團隊做項目更看重整體品牌感知,各個元素間都要能形成一致的設(shè)計語言。這里連居中對齊都可以跟設(shè)計理念聯(lián)系上,值得學(xué)習(xí)的思路。)

我們對讓技術(shù)更人性化的關(guān)注也反映在“開箱即用”體驗上,這個體驗曾經(jīng)的歡迎詞是你“進(jìn)來”,但現(xiàn)在是歡迎你“回來”。我們知道不是每個人都是新用戶,我們渴望通過我們的設(shè)計來尊重我們與長期忠實客戶的關(guān)系。你也可以在安裝過程中給你的電腦起一個名字,這樣 Windows 就會給你一種獨特的感覺,比系統(tǒng)設(shè)置中使用的隨機名字更人性化。Windows 是你們的,我們設(shè)計它是為了慶祝你們的生活和工作方式。(彩云注:在文案上也是精雕細(xì)琢,也是為了緊貼他們的設(shè)計理念)

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

新的 Windows 11 主題提供了個性化和自我表達(dá)的不同主題選擇

一旦你開始正常使用,Windows 11 就會記住你是誰,以及你在日常生活中需要什么。一鍵交互將帶你從一個任務(wù)到另一個任務(wù),而不會中斷你的工作流程。在過去的一年里,工作和生活的界限被重新定義了。在新版本的 Windows 中,組織活動的能力是我們密切關(guān)注的東西,確保無論環(huán)境如何變化,你都能保持專注和心流狀態(tài)。窗口和截圖功能已經(jīng)被重新設(shè)計,以記住你的喜好,所以當(dāng)你離開工作流去查看新聞的時候(新的窗口部件故意設(shè)計來尊重你的工作流程),系統(tǒng)會記住你是如何組織你的空間的。我們創(chuàng)造了一個數(shù)字版的辦公桌,它就像依偎在你家里的辦公桌,讓你能夠?qū)崿F(xiàn)一些偉大的事情,同時又能感受到與生活的緊密相連。

這些變化通過一種優(yōu)美的新設(shè)計語言來實現(xiàn),使 Windows 在體驗上比以往任何時候都更加連貫。聽到人們對更加柔和、友好和優(yōu)美 UI 的渴望,我們進(jìn)化了視覺和聽覺表達(dá)。我們圓滑了尖銳的棱角,并創(chuàng)建了一個溫暖的調(diào)色板,以構(gòu)建一個更人性化、更平易近人的語言,同時不會妨礙你的工作效率。

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

一些新的 Fluent 圖標(biāo),UI 和插圖內(nèi)容的選擇,以及我們的 Segoe UI 變量字體的示意

不僅僅是一個操作系統(tǒng)

如何為超過 10 億有著不同和獨特需求的人開發(fā)產(chǎn)品?傾聽、迭代、適配。通過用戶的洞察,我們通過軟化邊緣、減少雜亂和一致性設(shè)計,使 Windows 11 更加人性化和受歡迎。這些變化還通過新材質(zhì)、字體、新調(diào)色板、新壁紙和主題包來提升自我表達(dá),以兼顧廣泛的品味。

在 Windows 11 中,我們看到了一種從單純的功能性技術(shù)向情感、人性和個性化技術(shù)的轉(zhuǎn)變。Windows 不僅僅是一個操作系統(tǒng),它是編織在我們生活中的一塊織物,讓我們更接近我們所愛的一切,幫助我們創(chuàng)造和連接。

如文章開頭所說,彩云為大家搜集到了 Windows 11 最新設(shè)計語言 Fluent UI 的設(shè)計組件,供大家參考學(xué)習(xí),

Windows 11全新設(shè)計語言如何引領(lǐng)設(shè)計新趨勢 ?(附源文件下載)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:優(yōu)設(shè)  作者:彩云譯設(shè)計

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

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

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


高級美!8個激動人心的2022年視覺設(shè)計趨勢

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

2021 年已經(jīng)九月份了,毫不例外,今年也給大家準(zhǔn)備了明年的八個視覺設(shè)計趨勢,這些將在 2022 年出鏡率繼續(xù)升高。設(shè)計趨勢一直都處于不斷變化與輪回之中,設(shè)計風(fēng)格技法也跟隨時代潮流在不斷變化。

“趨勢不一定每年都全新,但是趨勢每年都很重要”,與大家共勉。下面,我們一起來看看明年視覺設(shè)計大方向,到底有多精彩。 style="font-size:16px;white1;margin-top:0px;margin-bottom:30px;padding:0px;width1;caret-color:#525252;color:#525252;font-family:"letter10000000149011612px;"> 高級美!8個激動人心的2022年視覺設(shè)計趨勢

幻彩立體也是 3D 設(shè)計的演化,在 2022 年它會依然會瘋狂的出現(xiàn)。不過風(fēng)格上有些微妙的變化,質(zhì)感更輕盈純粹、色彩更少量、圖形上更幾何塊面化,保持更真實的空間立體感受,直觀自然。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

我們可以從 Dribbble 上面看到像 UI8、craftwork、Is 等,他們的 3D 作品逐漸趨近走向更簡潔風(fēng)格調(diào)性,減少復(fù)雜的光影,這也是在扁平化中找到的思路。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

幾何分形

高級美!8個激動人心的2022年視覺設(shè)計趨勢

美國電視頻道 Turner Classic Movies

今年發(fā)現(xiàn)越來越多幾何形狀在平面作品或者 UI 中出現(xiàn),新的幾何圖形更具表意,更趨于表達(dá)真實情感。少了一些圖形的抽象化裝飾,更多的是傳達(dá)設(shè)計理念,品牌符號穿透。當(dāng)分形形狀與色彩完美結(jié)合,可以創(chuàng)建出極具吸引力的視覺效果。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

Goodfood Market

高級美!8個激動人心的2022年視覺設(shè)計趨勢

高級美!8個激動人心的2022年視覺設(shè)計趨勢

高級美!8個激動人心的2022年視覺設(shè)計趨勢

HANBOK CULTURE WEEK

高級美!8個激動人心的2022年視覺設(shè)計趨勢

unipapa 推出的衛(wèi)生紙,以簡潔純白的包裝令人眼前一亮。

NFT 藝術(shù)

高級美!8個激動人心的2022年視覺設(shè)計趨勢

Gucci 發(fā)布首款只能在數(shù)字環(huán)境中穿著的虛擬運動鞋

AR 和 VR 這個大家都知道,前幾年就火起來了。今天主要提一下今年備受關(guān)注的 NFT 藝術(shù),什么 NFT?其中文名稱是非同質(zhì)化代幣,一種應(yīng)用區(qū)塊鏈技術(shù)驗證的數(shù)字資產(chǎn)。它最容易理解的外號,是數(shù)字藝術(shù)品。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

Andrés Reisinger 在 2 月份售出支持 NFT 家具

將 NFT 與平面設(shè)計聯(lián)系起來,就是我們所說的數(shù)字平面藝術(shù)。它的到來對設(shè)計師影響有很大變化,橫向能力要求有所提高,比如了解虛擬數(shù)字化設(shè)計,以及對全新審美和新三維技術(shù)有更高的要求。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

Beeple 一幅拼貼畫,經(jīng)過區(qū)塊鏈驗證的藝術(shù)品在拍賣會上以超過 6900 萬美元的價格成交。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

Beeple 的其中一幅作品

Moooi 與 3D 藝術(shù)家 Andrés Reisinger 合作完成了這把不能生產(chǎn)的虛擬椅子

超萌趣圖標(biāo)

高級美!8個激動人心的2022年視覺設(shè)計趨勢

來源:騰訊 ISUX 出品

圖標(biāo)設(shè)計一直是社交領(lǐng)域的重頭戲,自從去年大量在設(shè)計作品中后,截止今年依然很強勁。因為很多設(shè)計師意識到單一的枯燥圖標(biāo)無法滿足一些特殊場景的情感化設(shè)計表達(dá),平面超萌趣圖標(biāo)來了,帶來更強的視覺觀欣賞性與生動性。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

來源:騰訊 ISUX 出品

高級美!8個激動人心的2022年視覺設(shè)計趨勢

經(jīng)典襯線字體

高級美!8個激動人心的2022年視覺設(shè)計趨勢

襯線字體在今年 Behance 作品集首頁上,可謂出鏡率可比以往高,喚起一種懷舊的感覺。也許是因為看多了襯線字體版式,設(shè)計師更多想嘗試用襯線字體來打破僵局,設(shè)計出新穎的視覺效果。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

自然設(shè)計

高級美!8個激動人心的2022年視覺設(shè)計趨勢

Vocation

自然設(shè)計,主張可持續(xù)性發(fā)展與環(huán)境建立聯(lián)系,是一種新生活態(tài)度,是百轉(zhuǎn)千回,回歸本源的理想之態(tài)。設(shè)計師通過設(shè)計表達(dá)對環(huán)境的敬意,與產(chǎn)品建立強相關(guān),既能表達(dá)產(chǎn)品自然純粹之意,又可以宣傳品牌貼近我們生活自然之意。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

&SMITH 涼茶包裝“循環(huán)生活”理念

高級美!8個激動人心的2022年視覺設(shè)計趨勢

TR?VE

高級美!8個激動人心的2022年視覺設(shè)計趨勢

超變形字體

高級美!8個激動人心的2022年視覺設(shè)計趨勢

dia Design studio

今年很多平面海報設(shè)計、品牌符號的動態(tài)系統(tǒng)設(shè)計中,都可以看到字體被扭曲、變形,以一種新的形態(tài)出現(xiàn)在眼前,沒錯,這就是超變形字體。它打破常規(guī),以不同尋常的路子出現(xiàn)在大眾視野中,帶來全新視覺體驗。

高級美!8個激動人心的2022年視覺設(shè)計趨勢

動態(tài)包裝

1. Pinterest Sans

說到動態(tài)包裝,這是在國內(nèi)外這兩年火起來一個大趨勢,首先微軟早期各種產(chǎn)品宣傳視頻,在到 Google、IBM、Apple 的視覺語言更新宣傳視頻?,F(xiàn)在越來越多廠商喜歡廠商動態(tài)包裝產(chǎn)品,這樣比平面展示更多細(xì)節(jié)與生動。

2. Rise

格拉斯哥設(shè)計工作室 Need 為 Rise 全新重塑品牌,同時通過動態(tài)展示品牌延展設(shè)計。

今天的趨勢分析差不多到這結(jié)束了,設(shè)計趨勢沒有好壞之分,選擇合適的應(yīng)用在設(shè)計中,將發(fā)揮不可估量的作用。希望今天的分享能給大家?guī)硪恍﹩l(fā)。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:優(yōu)設(shè)  作者:功夫UX

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

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

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



讀完10萬字,我才懂如何有效競品分析

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

最近讀了《有效競品分析》這本書,書中系統(tǒng)地介紹了競品分析方法論,全面、透徹,收獲頗多;為了更好地形成知識體系,加深理解和印象,書寫成文,分享給現(xiàn)在看到的你。


書中說這是好產(chǎn)品必備的競品分析方法論,作為設(shè)計師,總說要有產(chǎn)品思維,那么學(xué)習(xí)產(chǎn)品必備技能,便是一個培養(yǎng)產(chǎn)品思維的重要途徑。

這篇小文,將從四個模塊講述如何有效競品分析。



01 認(rèn)識競品分析


競品分析顧名思義,是對競爭對手的產(chǎn)品進(jìn)行比較分析。


不同的角色做分析的方向是不同的,UX設(shè)計師做產(chǎn)品體驗分析,從視覺和感覺兩個方面去分析;產(chǎn)品經(jīng)理做競品分析從功能、框架、技術(shù)、戰(zhàn)略等,分析產(chǎn)品背后的部分,比如競品為什么這么做?是如何做到的?下一步會怎么做……這里作者主要是分析產(chǎn)品層面的競品分析。



02 競品分析的意義


競品分析的意義根據(jù)產(chǎn)品發(fā)展階段不同,可歸納為以下四點:


1. 了解產(chǎn)品

通過競品分析,可以快速了解這個行業(yè)、市場、競爭對手的產(chǎn)品以及自己的產(chǎn)品。


2. 決策支持

從產(chǎn)品戰(zhàn)略層面來說,可以為企業(yè)制定戰(zhàn)略、布局規(guī)劃提供依據(jù);可以通過MVP來測試產(chǎn)品是否符合市場預(yù)期,找準(zhǔn)產(chǎn)品定位。


3. 預(yù)警避險

做競品分析會讓我們時刻關(guān)注競爭對手,關(guān)注環(huán)境的變化,關(guān)注政策的變化等,有效的競品分析可以預(yù)警避險。

4. 全局判斷

定方向、定目標(biāo)、定策略,包括競品分析、用戶研究、需求分析、產(chǎn)品規(guī)劃、產(chǎn)品設(shè)計等。


03 競品分析流程


輸出一份完整的競品分析,需要完成六個核心流程:



明確目標(biāo):明確為什么要做、想解決什么問題、競品分析的目標(biāo)是什么

選擇競品:選擇要分析的競品、直接競品、間接競品、參照品

確定分析維度:根據(jù)競品分析目標(biāo),確定要從哪些維度分析競品

收集競品信息:從各種渠道收集競品信息

信息整理與分析:對收集到的競品信息進(jìn)行整理與分析

總結(jié)報告:得到競品分析的結(jié)論,輸出競品分析報告


明確目標(biāo)

在第一部分全面認(rèn)識競品分析中有提到競品分析的意義,也是競品分析的目標(biāo)所在,概括的可以分為四類:決策支持、學(xué)習(xí)借鑒、市場預(yù)警、機會探索。


根據(jù)產(chǎn)品生命周期不同,競品分析的目標(biāo)和側(cè)重點不同。所以在競品分析之前一定要了解當(dāng)前產(chǎn)品處于什么階段,需要分析的目標(biāo)是什么。



選擇競品

競品的選擇,首先要了解競品的分類:直接競品、間接競品、替代品、參照品。然后根據(jù)目標(biāo)針對性的選擇產(chǎn)品。


直接競品

是指產(chǎn)品形式和目標(biāo)用戶群是完全相同的產(chǎn)品。比如生活中最鮮明的例子:可口可樂 VS 百事可樂。

間接競品

是指產(chǎn)品形式不同,目標(biāo)用戶群類似的產(chǎn)品。比如:可口可樂 VS 元氣森林,都是飲品。

替代品

是指產(chǎn)品形式不同、品類不同,目標(biāo)用戶群類似,能滿足用戶相同需求的產(chǎn)品。比如:公交車 VS 滴滴打車。

參照品

是指有參考價值的產(chǎn)品,可能是跨界的各種產(chǎn)品,開放式的產(chǎn)品類別。



競品的選擇不是數(shù)量越多越好,而是要選擇合適的,做深度分析,分析出有價值的信息。


確定分析維度

分析維度是指從哪些方面、哪些角度去分析,在這個階段要確定產(chǎn)品分析的廣度和深度??梢詮漠a(chǎn)品視角和用戶視角兩個不同的視角去確定分析維度。


產(chǎn)品視角:從產(chǎn)品本身的信息量上去選擇要分析的維度。以功能、框架、技術(shù)、體驗、用戶……等維度進(jìn)行分析;


用戶視角:從用戶最關(guān)注的信息上去選擇要分析的維度。以$APPEALS(客戶需求分析)框架作為分析框架。


$APPEALS方法是IBM在IPD總結(jié)和分析出來的客戶需求分析的一種方法。它從8個方面對產(chǎn)品進(jìn)行客戶需求定義和產(chǎn)品定位。具體如下:

  1. $-產(chǎn)品價格(Price);

  2. A-可獲得性(Availability);

  3. P-包裝(Packaging);

  4. P-性能(Performance);

  5. E-易用性(Easy to use);

  6. A-保證程度(Assurances);

  7. L-生命周期成本(Life cycle ofcost);

  8. S-社會接受程度(Social acceptance)。



收集競品信息

收集競品信息的渠道總結(jié)為三種:官方渠道公開資料、第三方競品分析平臺獲取、打入產(chǎn)品自行體驗或與用戶接觸調(diào)研出來的等。


在之前公眾號文章里曾分享過有關(guān)用戶分析、產(chǎn)品分析等數(shù)據(jù)分析平臺的匯總表。



信息整理與分析

信息收集完成后,并不是所有信息都是可用的,需要對其進(jìn)行篩選、分類、剔除、評級等,得到有效信息,針對有效信息進(jìn)行分析。


這里也是競品分析重要的一個環(huán)節(jié),不同的目標(biāo),需要選擇不同的分析方法,匯總一下競品分析的方法有:比較法、矩陣分析法、競品跟蹤矩陣、功能拆解、探索需求、PEST分析、波特五力模型、SWOT分析……(下一部分會具體講解)


總結(jié)報告

所有的分析步驟都完成之后,需要對分析結(jié)果進(jìn)行總結(jié),從中挑選出有價值的信息,形成一份分析報告,報告的格式可根據(jù)展示場景輸出選擇適當(dāng)?shù)母袷健?


04 競品分析方法


比較法

與競品做橫向比較,深入了解競品,并通過分析得出優(yōu)勢、劣勢。


打勾比較法:有無某功能,如果產(chǎn)品功能復(fù)雜,要拆解成2級功能等再橫向比較
評分比較法:應(yīng)用于用戶體驗設(shè)計評估和$APPEALS要素評估
描述比較法:通常會用“界面截屏+文字描述”的形式



矩陣分析法

以二維矩陣的方式分析產(chǎn)品與競品的定位、特色或優(yōu)勢。


競品跟蹤矩陣

跟蹤競品的版本更新,找到競品各版本的發(fā)展規(guī)律,以推測競品下一步的行動計劃。競品跟蹤矩陣包括幾個要素:時間、版本號、版本變化要點(新增、優(yōu)化、刪除)以及外部環(huán)境變化。


功能拆解

把競品分解成1級功能、2級功能、3級功能,甚至4級功能,以便更全面地了解競品的構(gòu)成,避免遺漏。



探索需求

挖掘競品功能所滿足的深層次的需求,以便找到更好的解決方案,提升產(chǎn)品的競爭力。


PEST分析

PEST分析法是對宏觀環(huán)境進(jìn)行分析,以便找到機會,認(rèn)清威脅與挑戰(zhàn)。


所謂PEST ,P是政治(Politics),E是經(jīng)濟(Economy),S是社會(Society),T是技術(shù)(Technology)。



波特五力模型

對行業(yè)環(huán)境進(jìn)行分析,評估某一行業(yè)的吸引力、利潤率。


SWOT分析

PEST分析和波特五力模型可歸納出SWOT分析中的機會和威脅,通過SWOT分析找出產(chǎn)品的優(yōu)勢、劣勢、機會、威脅,以便制定競爭策略。



加減乘除

產(chǎn)品越發(fā)展難免會進(jìn)入同質(zhì)化的競爭,與其更好,不如尋找更好的機會點。在競品的基礎(chǔ)上做“加減乘除”,以便進(jìn)行差異化創(chuàng)新。


05 競品分析工具


借助精益畫布、競品畫布、戰(zhàn)略畫布這三個工具可以提升競品分析的效率。


精益畫布

精益畫布是關(guān)于產(chǎn)品商業(yè)模式分析的一種很實用的工具,可以用來做產(chǎn)品商業(yè)模式規(guī)劃和分析。精益畫布可以幫助產(chǎn)品更全面的思考、決策,從系統(tǒng)、商業(yè)的角度來規(guī)劃產(chǎn)品、分析產(chǎn)品,建立產(chǎn)品的全局觀。



精益畫布在日常工作中的使用場景包含:編寫PRD、項目立項、商業(yè)計劃書……


知己   用精益畫布--規(guī)劃自己的產(chǎn)品

知彼   用競品畫布--規(guī)劃競爭對手的產(chǎn)品


競品畫布

競品畫布是前面提到的競品分析的一種方式,是把競品分析的六個步驟固化到一張表上,作為一個規(guī)范性的模板,引導(dǎo)大家更規(guī)范的做競品分析。


競品畫布相當(dāng)于競品分析報告的MVP(最小可用產(chǎn)品),用來低成本快速驗證分析的思路是正確的,避免返工。



很多人在剛接觸一個新產(chǎn)品時,很容易盲目的去分析,找不到方向,此時借助競品畫布這個標(biāo)準(zhǔn)化的模板,一步步的去分析產(chǎn)品,可以很快地了解一個產(chǎn)品。


戰(zhàn)略畫布

戰(zhàn)略畫布是做產(chǎn)品差異化競爭的有效工具,是通過價值曲線的方式,在某一時間段內(nèi)尋找到有用戶價值的戰(zhàn)略方向。


價值曲線

價值曲線是以圖形的方式描繪出一個產(chǎn)品在各個競爭元素上表現(xiàn)得相對強弱程度,由此可以看出一個產(chǎn)品的戰(zhàn)略輪廓。


橫坐標(biāo)顯示產(chǎn)品的競爭元素、價值點(用戶在意點)等,通過用戶的評價就可以了解到對于用戶來說他們最在意的是什么,他們使用產(chǎn)品的原因是產(chǎn)品給他們帶來了什么,這就是要尋找的競爭元素的來源。


縱坐標(biāo)顯示相對水平。



通過價值曲線的方式,可以清晰的看到產(chǎn)品與競品間的差異點,戰(zhàn)略畫布是做產(chǎn)品差異化創(chuàng)新的有效工具。


最后,利用思維導(dǎo)圖結(jié)構(gòu)化的方式,整合了競品分析核心知識點,分享給看到的你:



06 總結(jié)


看似這些競品分析的方法論是在做一些與設(shè)計無關(guān)的事情,但很多方法論是通用的,可以應(yīng)用到視覺、交互的競品分析當(dāng)中;作為設(shè)計師不能給自己設(shè)限,要多去學(xué)習(xí)跨界的知識,了解這些競品分析的方法論后,以后再接觸新項目,便可以借助文中的規(guī)范嘗試做競品分析,助力自己快速了解業(yè)務(wù)、行業(yè)等。


總之,多讀、多看、多學(xué),步履不?!?br />

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷  作者:做設(shè)計的小仙草

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

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

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


界面設(shè)計中的對比類型

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

世界中從不缺少的就是對比,人和人的對比,價格和價格的對比,生活和生活的對比,而今天我說的,是設(shè)計中的對比,是按鈕、顏色、排版布局的對比,設(shè)計中通過有效的對比技法,可以更加快速的傳遞產(chǎn)品信息,從而提升用戶體驗。


1、什么是對比

對比,是把具有明顯差異、矛盾和對立的雙方安排在一起,進(jìn)行對照比較的表現(xiàn)手法。對比是把對立的意思或事物、或把事物的兩個方面放在一起作比較,讓讀者在比較中分清好壞、辨別是非。


那么,為什么說對比度很重要呢?因為人眼最快速捕捉到的就是對比度。而圖像的最高可能對比度,我們稱它為對比度或動態(tài)范圍。更重要的是,對于色盲等弱視視覺障礙的人來說,對比度顯得更加重要,因為事物的對比度是成為他們看到的物體的核心特征,使他們能夠區(qū)分它們,沒有了對比度,對他們而言,也就失去了視覺。


在學(xué)術(shù)藝術(shù)中,對比是處理對立元素和效果的一種排列方式,例如:明暗顏色、大小形狀、粗糙或光滑的紋理。在這種情況下,對比不僅可以用來吸引注意力,還可以設(shè)置情緒和氛圍,在藝術(shù)品中創(chuàng)造多樣性、視覺趣味和戲劇性。


在設(shè)計中,對比度還是影響效果的關(guān)鍵因素之一。 不管是PC端網(wǎng)頁還是手機中的APP,它們的視覺層次、結(jié)構(gòu),設(shè)計師在通過對比度設(shè)計后,也能夠以一種獨特的方式呈現(xiàn),并告知用戶哪些交互點是重要的,哪些是次要的。同時,對比度還可以有效地吸引用戶的注意力并將其吸引到特定元素上,因此它在產(chǎn)品的直觀引導(dǎo)和可用性方面也發(fā)揮著重要作用。

Lucibel的網(wǎng)站設(shè)計展示了純粹的單色顏色對比,為頁面構(gòu)建了堅實的視覺層次結(jié)構(gòu)。


LAUDEMIO的品牌網(wǎng)站使用黑色背景和產(chǎn)品主體進(jìn)行層次分離,最后加上白色文案說明



2、UI設(shè)計中的對比類型

對比在UI中具有很多不同的特征屬性,其中就包括:

  • 顏色:顏色是人眼最快發(fā)現(xiàn)和最明顯對比之一,它適用于各種內(nèi)容下使用,例如:通過互補色、對比色或類似色進(jìn)行多種組合。這鞋方式最廣泛地用于潔面按鈕、導(dǎo)航、卡片、產(chǎn)品背景等地方,就是希望用戶能在打開的第一時間看到,并快速進(jìn)行操作使用。

  • 大小:這種對比類型是希望重要元素或內(nèi)容首先引起用戶注意所使用的,多數(shù)情況下設(shè)計師會將元素設(shè)計成明顯大于其他元素。

  • 形狀:這種對比類型屬于形狀改變,通過使一個元素的形狀與其他元素不同來吸引用戶的眼球。

  • 位置:在這種類型中,設(shè)計師以這種方式更改行中一個元素的位置,使其看起來不同,我們看到最多的這種對比案例就是閱讀文本片段時,新段落會以縮進(jìn)開頭。

  • 紋理:這里的差異是由于使用彼此明顯區(qū)分的紋理而建立的。

  • 方向:在這里,設(shè)計師通過更改元素的物理位置,使其使用其他或意想不到的方向進(jìn)行,通過這種不尋常的方式來吸引用戶的注意力。


以上這幾種對比類型,我現(xiàn)在通過可視化的方式為大家呈現(xiàn)一遍,這樣可以加深大家對對比的理解。


不同特征屬性的對對比方式


其實,多數(shù)人只要想到對比,我想第一想到的會是黑白的東西吧。在沒有陰影和多種顏色的情況下,單色的對比度是表現(xiàn)潛力最好的形式。更重要的是,與藝術(shù)品或攝影作品相比,對比度不僅會影響美感,而且對布局的可用性和可見性也有重大影響。因此,對比度的使用應(yīng)該算是用戶最友好、最易于使用的方法了。

F2Pool APP的界面中,顏色對比有助于數(shù)據(jù)和內(nèi)容形成分割,便于用戶閱讀使用


區(qū)塊鏈APP界面通過使用多色的插畫設(shè)計,使整體產(chǎn)品更加具有活力和動感,同時吸引力更強


根據(jù)相關(guān)數(shù)據(jù)結(jié)果表明,“黑白”的配色方式,是對用戶幫助和引導(dǎo)最大的。所以,使用黑白配色進(jìn)行對比,可以有效提升用戶的體驗。當(dāng)然,多色對比也是可以的,這里我提供一個色輪配色法,大家可以自行采納。

色輪可以幫助設(shè)計師找到最佳水平的顏色組合



3、排版對比

除了剛才說到的哪些,接下來我在說一種對比類型,它主要是基于字體的區(qū)別進(jìn)行做排版對比的。


這里提供幾種關(guān)于字體、排版的對比方式:

  • 尺寸:通過對字體字號的設(shè)定進(jìn)行對比實現(xiàn),可以有效的展示主次分明。比如以及標(biāo)題使用30px的字號,而內(nèi)容文本則使用24px的字號。

  • 重量:主要的方式是將字體加粗呈現(xiàn),在視覺上看起來更加具有厚重感,這樣加粗的文本在視覺上會更加具有地位和突出性。

  • 結(jié)構(gòu):形式在這里可以理解成是字體的字像,通過改變字體字象進(jìn)行區(qū)別,比如標(biāo)準(zhǔn)的蘋方體和花體就是很好的視覺對比。

  • 形式:將字體加以傾斜,也可以呈現(xiàn)出不一樣的結(jié)果。

  • 顏色:這里的顏色不光是指字體顏色本身,同時也可以為字體添加背景色,用來襯托字體。

  • 方向:通過改變單個字體的方向、或一句話的排列方向,都可以形成有效的對比效果。

藝術(shù)學(xué)院概念展示的不同類型排版對比



4、對比的輔助功能

說了剛才那么多,可能你已經(jīng)抓住了設(shè)計的要害,那就是對比度越高,設(shè)計就越好。其實,并不是這樣的,任何事物都需要掌握一個度,超過那個度,有時候就會適得其反。雖然我們知道對比度會使內(nèi)容更加明顯,但是你還應(yīng)該知道,過高的對比度也會使用戶感到疲勞。按照文本視覺呈現(xiàn)的正確比例,我們應(yīng)該將對比度控制在7:1之間才是比較合適的選擇。

在當(dāng)前這個概念A(yù)PP界面中,通過明顯的顏色來提升按鈕的視覺焦點,同時,加粗的文本也是重點提醒,這些手法都是便于閱讀和操作的方式



5、需要考慮的要點

除了剛才說到的這些對比方式和規(guī)則外,作為設(shè)計師,還應(yīng)該考慮的一些問題。


內(nèi)容加在了圖片上,要是用高對比度

由于圖片本身的體積較大,覆蓋面積也大,所以用戶在瀏覽時,視覺很容易會被圖片吸引過去,但是,由于圖片內(nèi)容的情況,很多相關(guān)文案就會顯得柔弱不堪,在這種情況下,一般的對比就無法解決視覺問題了,而是需要你加大提高文案和背景的對比,比如使用了類似黑色圖片的背景,就要使用純白色文本,如果使用了亮色的圖片背景,文本就需要考慮使用暗色。



注意對比度給用戶帶來的傷害

這種情況多數(shù)出現(xiàn)在閱讀類產(chǎn)品上,比如我們?nèi)粘J褂玫男≌f類app,產(chǎn)品里就有一種功能叫做背景自定義,它的主要目的就是擔(dān)心用戶在長時間閱讀的情況下產(chǎn)生視覺疲勞,所以需要設(shè)計柔和的背景進(jìn)行自定義切換。有的產(chǎn)品還會增加字體大小、顏色修改、夜間模式等多個功能,都是為了降低對比度,使用戶在體驗上不再那么刺眼。



留白的重要性

留白是極其重要的設(shè)計手法之一,它同樣是產(chǎn)生對比的好技法,通過給產(chǎn)品界面留有適當(dāng)?shù)目瞻子嗟?,可使產(chǎn)品具有通透感,用戶在使用產(chǎn)品時也不會產(chǎn)生壓抑,另外由于留白是大面積的空白空間,這也就產(chǎn)生了和密集內(nèi)容的強烈對比。



6、為什么對比度很重要

最后總結(jié)一下所有的內(nèi)容,我們可以定義一下對比度的幾個關(guān)鍵優(yōu)勢和好處:

  • 更強的視覺層次

  • 更好的專注

  • 創(chuàng)意氛圍

  • 增強可讀性

  • 與人類自然感知和反應(yīng)的對應(yīng)

生活充滿了對比,無論你會采取什么方面。對于所有的生命,我們必須學(xué)會如何接受這一點,并嘗試享受如此多樣化和不可預(yù)測的生活。與現(xiàn)實相呼應(yīng),設(shè)計也充滿對比,并盡可能多地借鑒。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷  作者:西瓜的設(shè)計

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

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

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

5個方面改善用戶體驗

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

當(dāng)你在一個既定的服務(wù)領(lǐng)域工作,但想要進(jìn)行革新時


1.詳細(xì)研究當(dāng)前的用戶體驗


分析當(dāng)前的服務(wù)體驗,解讀用戶旅程中涉及到的行為,接觸點,出現(xiàn)的痛點。構(gòu)建現(xiàn)有的體驗旅程圖可以捕捉到服務(wù)體驗的全貌,立即發(fā)現(xiàn)需要重新設(shè)計的關(guān)鍵問題,促進(jìn)組織內(nèi)部的一致性。對于這種復(fù)雜的服務(wù),根據(jù)分析結(jié)果建立服務(wù)藍(lán)圖也大有好處,可以捕捉到流程中的關(guān)鍵問題還有不同接觸點的關(guān)系中的重要方面。

建議:
自己進(jìn)行嘗試,能夠有效地發(fā)現(xiàn)細(xì)節(jié),涵蓋分析中的所有步驟。


2.分析服務(wù)構(gòu)建


體驗和過程只是服務(wù)的一部分:在分析現(xiàn)有服務(wù)時,我們也要考慮底層系統(tǒng)是如何搭建組件和動態(tài)結(jié)構(gòu)的。只有對系統(tǒng)進(jìn)行全面理解,我們才能發(fā)現(xiàn)連接缺失,精力和資源的潛在浪費和重復(fù)。創(chuàng)建一個系統(tǒng)地圖有助于讓團隊成員明確這些問題,討論潛在的改善機會。

建議:
我們需要將系統(tǒng)中的所有行為者聯(lián)系在一起,全面理解系統(tǒng)過程,減少重復(fù),彌補差距。


3.設(shè)定具體的目標(biāo),指導(dǎo)設(shè)想


在開始構(gòu)思之前,花些時間來思考系統(tǒng)和體驗的分析結(jié)果,并通過重新設(shè)計確定自己達(dá)到的關(guān)鍵目標(biāo)。目標(biāo)可以是橫向的(比如 “優(yōu)化整個旅程中的信息流”),也可以是非常具體的(比如 “入職:從填寫表格到熱情的歡迎會”)。最重要的是,我們首先要詳細(xì)了解現(xiàn)狀,才能設(shè)定目標(biāo),制定正確的方法,同時意識到急需解決的潛在局限性和障礙。

建議:
我們也可以將期待體驗設(shè)定為目標(biāo)旅程,為體驗中的每一步設(shè)定一個具體目標(biāo)。


4.創(chuàng)造新點子和解決辦法


提出新的想法,解決旅程中所有已知痛點或系統(tǒng)中的差距,以及抓住有趣的機會。這些想法包括既稍微改進(jìn)一些特定功能,也可以影響整個服務(wù)模式的寬泛概念。在這個階段,不要限制自己的想法數(shù)量,更不用考慮可行性:捕捉每一個想法,與其他團隊成員分享,并在彼此的思考之上建立一個新想法。

建議:
快速構(gòu)思是一種頭腦風(fēng)暴的練習(xí),團隊中的每個人都寫下他們心中的每一個想法,然后再進(jìn)行小組討論。


5.確定最有可能實現(xiàn)的概念


收集所有想法,確定下一步的行動計劃。如果項目很簡單,我們可以簡單地將所有的想法整合成一個重新設(shè)計方案,逐步發(fā)展。在其他情況下,你可能最終得到50多個想法,對當(dāng)前的服務(wù)體驗進(jìn)行創(chuàng)新,但顯然我們不能訴諸于每個想法,那么……從哪著手呢?我們可以建立一個評估矩陣,確定標(biāo)準(zhǔn),分析每個概念(例如,對用戶的價值,實施成本,獨特性等),并對它們進(jìn)行相應(yīng)的評分。這樣我們就可以篩選出最有可能實現(xiàn)的想法,創(chuàng)造較大的價值(這些想法可能是最先開發(fā)的)。簡略的概念可以很好地改善部分服務(wù),但不會產(chǎn)生較大的影響(容易實現(xiàn)的目標(biāo));而較復(fù)雜的概念從長遠(yuǎn)來看會對服務(wù)體驗產(chǎn)生更積極影響,但需要投入大量的時間和精力。

建議:
我們需要考慮的最核心內(nèi)容是新概念給用戶和組織帶來的價值,而不是實施的可行性或復(fù)雜性-但這可以根據(jù)具體環(huán)境而改變。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷  作者:馬克筆設(shè)計留學(xué)

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

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

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

日歷

鏈接

個人資料

存檔