首頁

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

純純

一、為什么動(dòng)?

首先,為什么要?jiǎng)??可能你?huì)想到以下幾條理由:

  1. 這讓我的作品看起來很炫酷,碉堡了!
  2. 動(dòng)效會(huì)帶來流量,助我完成KPI!
  3. 別人都這么做了,我也得做!
  4. 編輯讓我這么干的!

呵呵,你要這么想就完了。

那么該如何衡量一個(gè)動(dòng)效是否應(yīng)該出現(xiàn)呢,我們認(rèn)為有幾個(gè)考核標(biāo)準(zhǔn):

1. 這個(gè)動(dòng)效是否會(huì)影響性能?

首先,這個(gè)動(dòng)效是否會(huì)影響性能?這個(gè)是最重要的,添加任何動(dòng)效前都要考慮是否會(huì)影響產(chǎn)品的性能,如果一個(gè)很酷炫的動(dòng)效會(huì)拖累性能,使體驗(yàn)變得卡頓不流暢,那么必須毫不猶豫的砍掉或簡(jiǎn)化。

例子:化身間諜

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

比如這個(gè)例子,這是一個(gè)穿越情景的過場(chǎng)動(dòng)畫,隨著年份的倒轉(zhuǎn)背景出現(xiàn)各個(gè)歷史大事件,給人以歷歷在目的感覺,設(shè)計(jì)師考慮到了多張圖片會(huì)出現(xiàn)卡頓的可能性,所以特意降低了每張圖的清晰度,因?yàn)閮?nèi)容本身就是老照片的風(fēng)格,所以這種降低畫質(zhì)的手法反而增強(qiáng)了畫面的真實(shí)感。

2. 這個(gè)動(dòng)效是否會(huì)提高產(chǎn)品的可用性?

任何動(dòng)效的出現(xiàn)都必須帶有明確的目的性,能夠解決用戶在使用過程中的困惑,而不是炫技。單純的炫技只會(huì)分散用戶的注意力,弱化內(nèi)容,變得適得其反。

例子:翻頁提示

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

比如這個(gè)上滑提示。不用解釋,用戶一看知道該做什么。動(dòng)效增加了產(chǎn)品的可用性,所以這樣的動(dòng)效是非常有意義的!

3. 這個(gè)動(dòng)效是否會(huì)給你的產(chǎn)品帶來獨(dú)特氣質(zhì)?

這里所說的氣質(zhì)是動(dòng)效本身會(huì)有助于增強(qiáng)用戶對(duì)于產(chǎn)品的認(rèn)知和情緒帶入。一個(gè)相得益彰的動(dòng)效會(huì)為你的產(chǎn)品錦上添花,深化你的主題和功能,注意,一定是與主題相關(guān)的,牽強(qiáng)的搭配只會(huì)叫人覺得莫名其妙,毫無意義。

例子:人生四時(shí)

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

再看這個(gè)例子,人生四時(shí),四根火柴依次燃燒,慢慢燃盡,這種油盡燈枯的感覺很切合的體現(xiàn)了產(chǎn)品生老病死的主題。

4. 重新審視第一條,看你的動(dòng)效是否影響性能

所以,合理的動(dòng)效不應(yīng)是花拳繡腿,而應(yīng)該是解決問題的手段。

二、哪里動(dòng)?

好,我們?cè)倏纯茨睦镄枰獎(jiǎng)有?,這里舉幾個(gè)例子:

1. 加載

首先是出現(xiàn)在加載環(huán)境,不管是網(wǎng)頁還是H5都不可避免的會(huì)出現(xiàn)讓用戶等待的情況,在等待的過程中為了讓用戶知道他的手機(jī)沒有死機(jī)以及網(wǎng)絡(luò)是通暢的,我們應(yīng)該在這個(gè)時(shí)候加入一些與主題相關(guān)的動(dòng)效來提醒他內(nèi)容正在加載中。

例子:化身間諜H5 loading

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

這是一個(gè)穿越類的H5,所以設(shè)計(jì)師在設(shè)計(jì)loading的時(shí)候選用了蟲洞的理念,與內(nèi)容本身緊密貼合。

2. 轉(zhuǎn)場(chǎng)

第二個(gè)情景是轉(zhuǎn)場(chǎng)。具有意義的轉(zhuǎn)場(chǎng)會(huì)降低產(chǎn)品割裂感,我們看兩個(gè)例子就明白了。

例子:QQ會(huì)員觀影特權(quán)

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

這個(gè)例子里元素在默認(rèn)狀態(tài)下會(huì)做上下浮動(dòng)的效果,當(dāng)我們滑動(dòng)時(shí)候,元素很自然的做了一個(gè)出場(chǎng)入場(chǎng)的效果。很自然,沒有割裂感。對(duì)吧?

3. 頁面元素的互動(dòng)

也可以為網(wǎng)頁元素增加一些必要的動(dòng)效。

例子:好聲音第四季首頁:

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

看下好聲音的專題頁面,在網(wǎng)頁上的能夠點(diǎn)擊的按鈕或者文字鏈,在鼠標(biāo)經(jīng)過時(shí)都有點(diǎn)變化,這個(gè)十分必要。因?yàn)楸砻嫔系淖兓瘯?huì)給用戶一種心理暗示,那就是點(diǎn)擊后也會(huì)有變化。

4. 心理需要

這里所說的心理需求是指氣氛和情景的營(yíng)造,例如節(jié)日,游戲活動(dòng)等產(chǎn)品,是需要一些動(dòng)效去滿足用戶心理需求的。大家都知道在微信里輸入“生日快樂”是會(huì)掉下生日蛋糕的,這個(gè)動(dòng)效就比干巴巴的文字有趣多了。

例子:一封家書

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

一封家書,注意看,背景有飄落的雪花,漫天大雪勾起思鄉(xiāng)情,對(duì)吧,合情合理,有情有義!

三、怎么動(dòng)?

好,說完哪里動(dòng),我們現(xiàn)在看看怎么動(dòng)。

1. 基于真實(shí)形態(tài)的模擬

基于真實(shí)的動(dòng)畫會(huì)叫人看起來自然流暢,符合規(guī)律,比如物體運(yùn)動(dòng)時(shí)的加速度現(xiàn)象。

例子:Look

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

注意看這個(gè)筆畫的動(dòng)勢(shì),是有快有慢的,模擬了寫字時(shí)起筆收筆的那種節(jié)奏感,所以看起來是自然真實(shí)的。

2. 人物動(dòng)作夸張化

在H5的設(shè)計(jì)中,經(jīng)常會(huì)出現(xiàn)各種各樣的人物形象,夸張的人物動(dòng)作會(huì)生動(dòng)你的形象,增加趣味性,給用戶以驚喜。

例子:巴菲特這一年

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

巴菲特老爺爺,動(dòng)作很親切。

3. 給元素賦予彈性

有彈性的物體會(huì)叫用戶覺得具有生命感和真實(shí)性,彈的程度取決于你對(duì)元素軟硬度的設(shè)定。

例子:拍個(gè)大頭鬼

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

三個(gè)小鬼一跳一跳,彈性賦予了他們頑強(qiáng)的生命力。

4. 蒙太奇

這是一種類似蒙太奇的手法,通過快速切換的畫面來形成一種奇妙后現(xiàn)代感覺。

例子:傳奇硬箱

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

炫酷了,節(jié)奏很快,提氣!

好,以上只是一些基本的動(dòng)效手法,在實(shí)際的應(yīng)用中其實(shí)有很多手段,在這里我建議大家可以去看看迪士尼和皮克斯的動(dòng)畫,應(yīng)為動(dòng)畫本身是一種對(duì)于動(dòng)作行為高度概括的手段。雖然這些都是電影,但是他們使用的手段和遵循的理念是非常值得我們?nèi)W(xué)習(xí)和借鑒的。注意觀察這些大牛們的作品,你會(huì)發(fā)現(xiàn)他們的作品中充滿了走心的細(xì)節(jié)。

四、結(jié)語:

簡(jiǎn)單來說,當(dāng)用戶打開一個(gè)界面,注意力首先會(huì)被動(dòng)態(tài)的物體吸引,然后才會(huì)把注意力轉(zhuǎn)向顏色對(duì)比強(qiáng)的部分,最后才是形狀。這一過程是人在進(jìn)化過程中形成的本能反應(yīng),基本適用所有用戶。同時(shí)一個(gè)非常重要且容易被忽略的原則:用戶的注意力是有限的,而且越來越少。很可能在用戶注意到一段動(dòng)效之后,注意力和耐心已經(jīng)用盡,無法看到其他內(nèi)容就著急去下一個(gè)界面了。

所以,對(duì)于動(dòng)效這樣一個(gè)非常強(qiáng)勢(shì)的工具,一定要用在希望用戶注意的部分,并且認(rèn)真打磨。真正做到“不為動(dòng)而動(dòng)”。



文章來源:優(yōu)設(shè)   作者:程遠(yuǎn)


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

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

超全面的UI界面字體選取與使用指南

純純

最初的圖形界面

文字和排版可以追溯到五千年前,而圖形化界面僅僅只有40年的歷史。最關(guān)鍵的轉(zhuǎn)折點(diǎn)出現(xiàn)在1973年的施樂,最早的圖形化界面出現(xiàn)在了他們的Alto電腦上,而這個(gè)設(shè)計(jì)就是現(xiàn)如今圖形化界面設(shè)計(jì)的基礎(chǔ)。在Alto 的界面誕生后的10年里,幾乎是它一家獨(dú)大,并且它也被大家視作為數(shù)字技術(shù)的未來。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

早期的Alto 在80年代進(jìn)化為著名的施樂之星,而施樂的這個(gè)設(shè)計(jì)方案也成為了第一個(gè)商用的操作系統(tǒng)圖形化界面。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

不過不論是Alto 還是施樂之星,都沒能真正意義上崛起。不過施樂的圖形化界面最終深深的影響了蘋果和微軟的道路,比爾蓋茨和喬布斯先后在施樂的研發(fā)中心觀摩了施樂之星的運(yùn)作,而喬布斯更是在1984年先人一步發(fā)布了著名的Macintosh 系統(tǒng),也就是后來我們所熟知的Mac OS。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

Macintosh 的發(fā)布不僅僅意味著相對(duì)成熟的GUI的出現(xiàn),而且它為大眾帶來了真正意義上的自定義字體的功能。這款系統(tǒng)內(nèi)置了許多以著名城市命名的字體,也正是在此之后才有越來越多的著名字體的數(shù)字版本在數(shù)字平臺(tái)上發(fā)布并應(yīng)用。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

仔細(xì)觀察這些早期的字體,我們能夠發(fā)現(xiàn),雖然已經(jīng)是圖形化的界面,但是其中絕大多數(shù)的界面元素都還是以純文本的形式而存在,它們以一種奇妙的方式被整合到一個(gè)界面當(dāng)中。循著界面的發(fā)展歷程沿路看過來,不難發(fā)現(xiàn),文本和排版幾乎是貫穿始終的主線,它是一個(gè)不容忽視的核心類別。

文本即界面

界面中的每一個(gè)文字、每一個(gè)字符都很重要。好的文本是好的設(shè)計(jì)。文本是最根本的界面,是我們?cè)O(shè)計(jì)師來塑造和打磨這些信息。

看看下面的天氣界面的設(shè)計(jì),想象一下將所有界面元素都擺在桌上會(huì)是什么樣的效果:無非就是兩張圖,幾個(gè)圖標(biāo)和一大堆文本。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

作為設(shè)計(jì)師,工作并不是將一堆隨機(jī)的內(nèi)容和元素排布在屏幕上,讓它們看起來夠漂亮就行了。真實(shí)的情況是,我們要從最核心的內(nèi)容和文本開始著手,然后從這里著手細(xì)化,并完善出其他的部分。這就是我們工作的核心。

文本的清晰度同樣扮演著關(guān)鍵性的角色。如果我們的大腦花費(fèi)一兩秒鐘單純只是分辨一個(gè)字形,那么清晰度上的微小差異是無傷大雅的。可是當(dāng)它們組合成為大段的文本,不同的字母組合構(gòu)成不同的詞匯、段落的時(shí)候,清晰度的影響就更大了,排版的重要性也顯得更加明顯了。

當(dāng)然,影響界面設(shè)計(jì)的文本屬性還有很多,比如平衡性,定位和層次結(jié)構(gòu),但是好的文案和排版的影響至少占據(jù)整體影響的95%。

在偉大的設(shè)計(jì)師眼里,文本不僅承載內(nèi)容,而且可以構(gòu)成界面。
– Oliver Reichenstein

我們?nèi)绾伍喿x

既然屏幕上的文本顯示是如此的重要,那么我們應(yīng)當(dāng)先了解人們是如何閱讀的,而文本顯示又是如何影響我們?cè)O(shè)計(jì)決策的。

讀過Billy Whited 的文章《Setting Type for User Interface》之后,讓我對(duì)于文本閱讀的效率有了更深的認(rèn)知。一個(gè)少于20個(gè)字母的獨(dú)立單詞放在句子中會(huì)更快被理解,而單獨(dú)放置的時(shí)候我們需要耗費(fèi)更長(zhǎng)的時(shí)間來識(shí)別。

其實(shí)這個(gè)研究結(jié)果也表明我們閱讀較長(zhǎng)句子的時(shí)候,并非是逐個(gè)單詞地閱讀,而是跳躍著閱讀功能性的詞匯,我們將這種閱讀方式稱為離散跳躍式閱讀,俗稱掃視。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

掃視讓我們的閱讀能力更強(qiáng),我們甚至?xí)^短的功能性詞匯。

我們應(yīng)當(dāng)記住這一關(guān)鍵特征,因?yàn)槲覀兊慕缑嬷兴休d的詞匯大多是孤立的單詞。簡(jiǎn)單說來,界面是無法利用掃視這種方式來獲取信息的。

總的來說,單詞在閱讀中發(fā)揮著無比重要的作用,無論是作為內(nèi)容還是作為界面元素,均是如此。無疑,選擇合適的字體就相當(dāng)重要了。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

過去,人們常常認(rèn)為眼睛和大腦是通過單詞的外輪廓(Bouma Shape)來識(shí)別單詞,當(dāng)然,后來的研究證明這個(gè)想法是錯(cuò)的,單詞的可讀性和易讀性的影響因素不止是外輪廓,字母本身的形態(tài)、細(xì)節(jié)和清晰度同樣深入的影響著它的識(shí)別度。

是什么讓字母清晰可讀?

其實(shí)這個(gè)問題一開始并不是那么好回答。閱讀很大程度上依賴于我們的習(xí)慣,越常見的內(nèi)容對(duì)我們而言越容易識(shí)別。這樣一來,我們就不那么容易判斷讓字母清晰易讀的影響因素了。為了了解這一點(diǎn),我們需要將句子分割為單詞,分解單詞為字母,在字母中查看細(xì)節(jié)。

早在2008年,維多利亞大學(xué)心理學(xué)系根據(jù)測(cè)試結(jié)果得出結(jié)論,大寫和小寫的拉丁文字母是最容易識(shí)別的,也最易于閱讀。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

這項(xiàng)研究有趣的地方在于,它揭示了一個(gè)事實(shí):每個(gè)字母延伸出來的線性端點(diǎn)是最易于識(shí)別的地方,也是每個(gè)字母的特點(diǎn)所在。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

上面的圖片標(biāo)識(shí)出了這些最易于識(shí)別的部分。每一款字體在這些部分應(yīng)當(dāng)設(shè)計(jì)為最通用、最為人所熟悉的樣式,同樣的,它們也應(yīng)該強(qiáng)調(diào)每個(gè)字母的差異。

在2010年的時(shí)候,另一項(xiàng)由 Sofie Beier 和 Kevin Larson 開啟了一個(gè)新的研究項(xiàng)目,這項(xiàng)研究專注于測(cè)試經(jīng)常被誤讀的字母和字符的識(shí)別度。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

這項(xiàng)研究表明,在相同的字體和相同的尺寸、相同字重的情況下,有些字體或者變體的細(xì)節(jié)確實(shí)比其他的更加清晰、更易于識(shí)別。這項(xiàng)研究的結(jié)果說明,纖細(xì)的字體加粗之后識(shí)別度效果會(huì)明顯會(huì)增強(qiáng),而字母的X高度如果能夠占據(jù)上伸區(qū)或者下探區(qū)的空間,識(shí)別度會(huì)更好。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

為了更好的理解字體的清晰度的概念,你可以下載我所開發(fā)的這款工具 Legibility APP 來測(cè)試不同字體在模糊、炫光等多種不同情況下的清晰度和辨識(shí)度。這是一款處于測(cè)試階段的工具,可以在Chrmoe、Opera和Safari 中運(yùn)行。

UI中的字體使用

理解了用戶閱讀的方式和字體可讀性的影響因素之后,我們應(yīng)當(dāng)開始了解UI中的字體的幾個(gè)關(guān)鍵因素。下面是UI中字體使用的10個(gè)關(guān)鍵因素。

1、可讀性

可讀性是UI中字體所需考慮的首要因素。字母字形必須清晰可辨,作為UI元素,其中不同的字母必須可以被用戶輕松辨別出差異。許多經(jīng)典的字體,甚至包括 Helvetica ,都沒辦法清晰分辨 字母 i 的大寫形態(tài) I,和大寫字母 L的小寫形態(tài) l,這在界面設(shè)計(jì)中無疑是有影響的。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

上圖中,左邊的字體為 Source Sans Pro , 右邊為 Helvetica,無疑對(duì)于 Illiterate 這個(gè)詞Helvetica 字體下前三個(gè)字母完全無法分辨。有部分用戶也同意Helvetica 并不適合作為UI界面的顯示字體而存在,因?yàn)檫@款字體終究是為平面印刷顯示而設(shè)計(jì)的,并非為屏幕而生。

在iOS 7 時(shí)代,蘋果短暫地將 Helvetica 作為系統(tǒng)的主要顯示字體的時(shí)候,曾對(duì)特定的用戶群體造成過信息識(shí)別的困擾。這也最終催生了我們現(xiàn)在所看到的蘋果官方字體 San Francisco。舊金山是為UI界面而生的字體,它的x高度比Helvetica 更高,字母間距更寬,字母間的識(shí)別度更高。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

2、適度

一款理想的UI界面所用的字體,不應(yīng)當(dāng)過于“顯眼”,而該是悄無聲息,“隱型”的。當(dāng)用戶在試圖完成某項(xiàng)任務(wù)的時(shí)候,字體不應(yīng)當(dāng)給用戶以“出戲”或者“顯眼”的感覺,也就是說,字體不應(yīng)當(dāng)超出用戶的認(rèn)知負(fù)荷,而內(nèi)容和信息才應(yīng)該成為真正的關(guān)注點(diǎn)。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

3、靈活

給UI界面使用的字體應(yīng)當(dāng)具有靈活性。我們?cè)?jīng)為 Medium 做過用戶體驗(yàn)設(shè)計(jì),作為一個(gè)網(wǎng)頁博客平臺(tái),我們很難去控制用戶的能力、內(nèi)容、瀏覽器、屏幕尺寸、網(wǎng)絡(luò)帶寬和連接速度,包括輸入法。

所以我們最終為它所選取的字體應(yīng)當(dāng)支持大量不同的內(nèi)容,在不同的尺寸下?lián)碛辛己玫淖R(shí)別度,能夠兼容不同的設(shè)備,尤其是在小屏幕上。Sans serifs 字體就是專門為小尺寸低分辨率屏幕而定制的。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

4、x高度的上限

x高度的參考標(biāo)準(zhǔn)是小寫字母x的高度,同等尺寸下,x高度更大的字體更易于識(shí)別。不過x高度也不是越大越好,當(dāng)x高度超過一定限度的時(shí)候,小寫字母n和小寫字母h就很難分辨了,這一點(diǎn)應(yīng)當(dāng)注意。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

5、更大寬高比

字母的寬度和高度的比例也是相當(dāng)重要的一個(gè)屬性。寬度和高度比例越高,字母在小屏幕上的識(shí)別度就越高。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

6、寬松的字間距

字母之間的間距和字母內(nèi)部的空間同樣是影響字母可讀的因素。字母間距太小同樣會(huì)影響整體的可讀性,而好的顯示字體會(huì)更好的控制字母間距,確保單詞在視覺上的“透氣性”,甚至可以營(yíng)造出一種韻律感。

不過字間距不是越寬松越好,太過寬松會(huì)讓整個(gè)單詞看起來過于松散。有一個(gè)值得參考的標(biāo)準(zhǔn),就是字母之間的間距應(yīng)當(dāng)比字母內(nèi)的開口縫隙略小一點(diǎn)。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

7、低筆觸對(duì)比度

許多字體不同的筆畫粗細(xì)不同,而對(duì)于UI界面而言,筆觸間的對(duì)比度越小識(shí)別度越好。較大的筆觸對(duì)比度下,字體在小尺寸屏幕上,較細(xì)的筆畫會(huì)難于分辨。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

8、OpenType 功能

OpenType 功能對(duì)于字體而言是相當(dāng)重要的。支持OpenType的字體擁有更大的靈活性,對(duì)于不同的語言和特殊的字符有著更為優(yōu)良的兼容性。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

9、備用字體

接下來要說的情況可能大家多少都碰到過。網(wǎng)頁在完全加載出來之前,部分內(nèi)容因?yàn)樽煮w沒有加載而無法顯示。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

其實(shí)這可以通過先加載本地字體,顯示內(nèi)容,等網(wǎng)頁字體加載好了之后再行替換,以達(dá)到無阻塞顯示。這種方法的缺陷是需要預(yù)先設(shè)定一個(gè)可調(diào)用的本地備用字體。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

10、Hinting

Hinting 指的是為了字體為了保證最大的可讀性而針對(duì)顯示器狀況進(jìn)行調(diào)整的過程。Hinting 可以通過匹配顯示器的像素柵格讓字體顯示更加清晰,降低誤讀的可能性。

這項(xiàng)技術(shù)最初是由蘋果公司所提出的,不過因?yàn)門rueType 字體技術(shù)的出現(xiàn),Hinting 正在消失。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

未來

隨著新的UI標(biāo)準(zhǔn)、排版技術(shù)的提升,字體技術(shù)也在不斷的進(jìn)步,在不遠(yuǎn)的未來,字體會(huì)從傳感器獲得信息,更好的兼容不同的環(huán)境、隨著亮度、設(shè)備、距離而進(jìn)行智能化的調(diào)整,甚至復(fù)雜而龐大的中文字體,也可能作為靈活的網(wǎng)頁字體而存在。

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

字體會(huì)讓我們的工作更加便捷

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

讓界面交互更快,更加觸手可及

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

讓UI更加易用

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

更加便捷

絕對(duì)專業(yè)!超全面的UI界面字體選取與使用指南

也更加清晰而高效





文章來源:優(yōu)設(shè)  作者:陳子木

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


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

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

數(shù)字金融產(chǎn)品的安全感設(shè)計(jì)探究

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

當(dāng)互聯(lián)網(wǎng)不斷的深入到我們的生活中,我們對(duì)安全感的需求也延續(xù)到了互聯(lián)網(wǎng)使用中,特別體現(xiàn)于互聯(lián)網(wǎng)金融產(chǎn)品。由于其具有風(fēng)險(xiǎn)性、收益性、流動(dòng)性等特點(diǎn),用戶對(duì)于資產(chǎn)安全的掌控感更為關(guān)注,產(chǎn)品使用體驗(yàn)欠佳也直接影響客戶安全感。


以下將基于自身工作總結(jié)和行業(yè)經(jīng)驗(yàn),聚焦互聯(lián)網(wǎng)金融產(chǎn)品分享和總結(jié)如何向用戶營(yíng)造安全感。


目錄:

一、需要什么樣的安全感?

二、如何傳達(dá)出安全感?

三、怎樣體現(xiàn)出安全感?




需要什么樣的安全感?


安全感是人類最底層的需求,但不同類用戶群體需要的安全感也各有千秋,我們參考第一財(cái)經(jīng)商業(yè)數(shù)據(jù)中心×螞蟻財(cái)富的2019線上理財(cái)人群報(bào)告,將線上理財(cái)?shù)娜巳悍譃樗念悾?

分別是初入職場(chǎng)的95后、職場(chǎng)新興力量的90后、理財(cái)中堅(jiān)力量的80后和經(jīng)歷風(fēng)雨的70后。其中近一年的新增移動(dòng)互聯(lián)網(wǎng)基民中超五層為90后、95后,成為金融移動(dòng)互聯(lián)網(wǎng)的中堅(jiān)力量。


這類型的投資者由于具有碎片化處理事務(wù)的習(xí)慣和金融知識(shí)不足、理財(cái)經(jīng)驗(yàn)不豐富、資金的抗風(fēng)險(xiǎn)能力不高的特點(diǎn),當(dāng)市場(chǎng)普遍行情下跌時(shí),更容易產(chǎn)生焦慮的情緒而導(dǎo)致“割韭菜”,進(jìn)而可能會(huì)影響到卸載APP的行為。根據(jù)Mob研究院的數(shù)據(jù)顯示,在2021年3月天天基金日均卸載用戶規(guī)模為前兩個(gè)月的6倍,而當(dāng)時(shí)對(duì)應(yīng)的市場(chǎng)行情正為基金普遍大跌。

因此從安全感的需求上他們更側(cè)重高效的信息降維、足夠的理財(cái)產(chǎn)品的風(fēng)險(xiǎn)提示、合理的預(yù)期收益宣傳以及投后虧損及時(shí)的內(nèi)容陪伴


而根據(jù)騰訊理財(cái)通×國家金融與發(fā)展實(shí)驗(yàn)室出品的2021年互聯(lián)網(wǎng)理財(cái)行為與安全研究報(bào)告顯示,理財(cái)知識(shí)更充足,理財(cái)經(jīng)驗(yàn)更豐富的80后、70后在安全感的維護(hù)上則更關(guān)注理財(cái)產(chǎn)品的信息披露風(fēng)險(xiǎn)、信息不透明風(fēng)險(xiǎn)、市場(chǎng)政策風(fēng)險(xiǎn)、個(gè)人信息泄露風(fēng)險(xiǎn)此類問題。




如何傳達(dá)出安全感?


安全感是一種感性的心理感受,而人類的情感由本能、行為、反思三個(gè)層面共同決定的。

這三個(gè)層次作為人類大腦的運(yùn)作的規(guī)律,映射到設(shè)計(jì)當(dāng)中,同樣是可供遵循、值得探究的。



本能層

先于意識(shí)和思維,它是外觀要素和第一印象形成的基礎(chǔ),著重于產(chǎn)品的外觀、觸感等?!懊烙^即實(shí)用原則”人們會(huì)潛意識(shí)里認(rèn)為好看的東西也是好用的,所以在界面設(shè)計(jì)當(dāng)中,主要設(shè)計(jì)對(duì)象是視覺設(shè)計(jì)。


而金融產(chǎn)品中,常用藍(lán)、綠等冷色調(diào)的色彩,給人以冷靜,穩(wěn)定的感覺,表現(xiàn)金融產(chǎn)品的科技感和可靠性;常用紅、黃、橙等暖色調(diào),代表著熱情、溫暖與責(zé)任。


行為層

是人類身體日常行為的運(yùn)作,行為層的設(shè)計(jì)與產(chǎn)品使用過程中的愉悅感和效率有關(guān)。好的行為層設(shè)計(jì)對(duì)應(yīng)產(chǎn)品功能傳達(dá)、易學(xué)性與易用性,以及正面的心情感受。在界面設(shè)計(jì)當(dāng)中,主要設(shè)計(jì)對(duì)象是交互設(shè)計(jì)。(將在下文通過投資場(chǎng)景詳細(xì)分析)



反思層

超越了本能層和行為層,存在意識(shí)和更高級(jí)的感覺、情緒及知覺。對(duì)應(yīng)的是產(chǎn)品的情感溫度,主要的設(shè)計(jì)對(duì)象是正向情感的結(jié)果反饋以及品牌信任。


良好的企業(yè)品牌形象和口碑很大程度上會(huì)給用戶帶來認(rèn)知上的安全感。用戶在初次選擇購買金融產(chǎn)品時(shí),往往強(qiáng)大的品牌背書起到了關(guān)鍵作用,即使是同一只基金,用戶也會(huì)選擇在自己信賴的平臺(tái)里購買。

我們可以通過在頁面設(shè)計(jì)中加入更多的品牌元素,如品牌主題色、LOGO、品牌IP形象、品牌slogan等,來潛移默化地讓用戶感受企業(yè)的價(jià)值:


另一種常見于一些平臺(tái)利用強(qiáng)大的背書以及所獲的成就,清晰地向用戶展示可以提供的保障權(quán)益,責(zé)任條款及資質(zhì)介紹等來傳達(dá)企業(yè)對(duì)用戶負(fù)責(zé)的態(tài)度,提升用戶對(duì)產(chǎn)品乃至對(duì)企業(yè)的信任感:




如何體現(xiàn)出安全感?


我們將金融的生命周期分為三個(gè)階段,分別可以概括為:投資前(產(chǎn)品選擇)、投資中(產(chǎn)品交易)、投資后(產(chǎn)品管理),不同階段的關(guān)注點(diǎn)不同,而對(duì)于安全感需求各不相同:



投資前

結(jié)合文章一開始對(duì)人群的分析,由于投前的行為特點(diǎn)更多聚焦于產(chǎn)品的選擇,因此從理財(cái)小白的角度對(duì)于安全感的缺乏更集中于“買了會(huì)不會(huì)虧錢?”、“產(chǎn)品買對(duì)了嗎”、“看不懂規(guī)則”、“這個(gè)適合我嗎”等,尤其存在于一些新形式的理財(cái)組合產(chǎn)品和策略智能投產(chǎn)品中。


在這個(gè)階段的安全感維護(hù),除了相關(guān)頁面的信息降維、必要的投教啟蒙以外,還需要考慮用戶疑問的快速解答、合理的預(yù)期收益宣傳等。另外投錢的啟蒙教育更可以考慮結(jié)合一些運(yùn)營(yíng)活動(dòng),讓小白用戶通過更有趣的方法了解產(chǎn)品,了解自己適合的產(chǎn)品。

而對(duì)于較有經(jīng)驗(yàn)的理財(cái)“老司機(jī)”而言,安全感的缺乏更集中于“過往表現(xiàn)怎么樣,如最大回撤率等”、“市場(chǎng)行情、政策是否利好”、“基金經(jīng)理的資歷”等,而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產(chǎn)品的對(duì)比等來表達(dá)產(chǎn)品的未來盈收能力可期。


投資中

當(dāng)投資者已經(jīng)選擇好信任的理財(cái)產(chǎn)品時(shí),在產(chǎn)品交易的各個(gè)界面也需要關(guān)注交易流程中安全感的反饋。

其中包括正向反饋和負(fù)向反饋。正向反饋是指用戶跟產(chǎn)品發(fā)生正確的交互時(shí),系統(tǒng)給予用戶的正確引導(dǎo),可以幫助用戶打消顧慮,建立信心,讓用戶感受到一切都在順利地進(jìn)行著,這對(duì)那些在設(shè)備操作方面缺乏信心的用戶來說尤為重要,用戶不會(huì)對(duì)自己的操作或?qū)ζ脚_(tái)產(chǎn)生質(zhì)疑,如:專屬的密碼輸入鍵盤、正向反饋如金額輸入時(shí)的金額提示、特別提出易誤解的交易規(guī)則等


反向反饋是指用戶在操作過程中出現(xiàn)或疑似出現(xiàn)誤操作時(shí),系統(tǒng)向用戶展示提示或二次確認(rèn)以促進(jìn)錯(cuò)誤的糾正或確保此操作無誤。它能確保在第一時(shí)間告知用戶出現(xiàn)了不正確操作,及時(shí)更改,使流程順利進(jìn)行,尤其是對(duì)于一些理財(cái)小白而言,合理的容錯(cuò)設(shè)計(jì)更促進(jìn)有效投資,提高未來的盈利體驗(yàn)。如撤銷操作二次確認(rèn)、購買超出風(fēng)險(xiǎn)承受能力的產(chǎn)品、輸入錯(cuò)誤金額時(shí)的反饋。

引起思考:

雖然天天基金的撤單確認(rèn)展示了退回帳戶,但是此彈窗的取消按鈕引導(dǎo)性過強(qiáng),首次操作僅通過銀行卡的列表的箭頭較難聯(lián)想到是確認(rèn)撤單的下一步操作(還以為是可選擇退的帳戶)。



投資后

產(chǎn)品交易成功后,投資者的關(guān)注會(huì)更集中于自己的資產(chǎn)的變化,產(chǎn)品的未來走勢(shì)等,因此在安全感的提供上,需要向投資者傳達(dá)準(zhǔn)確的交易狀態(tài)、資產(chǎn)狀態(tài)、資產(chǎn)的保護(hù)等,甚至可以在產(chǎn)品購買的完成頁設(shè)置快捷加入自選和漲跌提醒等

引起思考:

在支付寶的基金總金額中,存在交易進(jìn)行中的提示文案為“買入待確認(rèn)*元”,但不少小白會(huì)產(chǎn)生疑問,當(dāng)前展示的基金總金額是否包含提示的待確認(rèn)金額,此時(shí)是否可將文案改為“含買入待確認(rèn)*元”(畢竟也有部分直銷app并不會(huì)將待確認(rèn)金額包含進(jìn)產(chǎn)品的總金額中)


另一方面的更需要考慮當(dāng)基金產(chǎn)品存在虧損時(shí),及時(shí)向投資者傳達(dá)情感陪伴和合理的投資交易,以促進(jìn)投資者優(yōu)化持倉或保持中長(zhǎng)期持有,避免頻繁的短期交易而導(dǎo)致不良的盈利體驗(yàn)。

文章來源:站酷   作者:陳皮紅豆沙

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


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

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


交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

純純

為大家概括性地介紹5種流行移動(dòng)應(yīng)用中常見的界面設(shè)計(jì)模式以供大家在自己的項(xiàng)目中參考。這些設(shè)計(jì)模式有助于大家提高設(shè)計(jì)的可用性,讓界面變得更加直觀。文章將側(cè)重介紹能夠幫助大家進(jìn)行下列各方面設(shè)計(jì)的模式:

  1. 社交分享
  2. 通知
  3. 彈窗
  4. 內(nèi)容更新
  5. 用戶互動(dòng)(滑動(dòng)、點(diǎn)擊等)

一、社交登陸

在這個(gè)社交網(wǎng)絡(luò)盛行的時(shí)代,我們是不是真的還需要用這種陳舊的方式提交個(gè)人資料?社交登陸這一設(shè)計(jì)模式完全可以讓用戶輕松快捷的登陸,從而取代注冊(cè)、填寫表單之類的麻煩工作。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

用戶可以直接登陸自己的社交網(wǎng)絡(luò)賬號(hào)(Facebook、Twitter或者Google等),無需另外創(chuàng)建一個(gè)以后不太可能繼續(xù)使用的賬戶,這樣可以大大提高注冊(cè)效率。除此之外,這一設(shè)計(jì)模式還有下列好處:

  • 使用現(xiàn)有社交網(wǎng)絡(luò)賬號(hào)登陸用戶就不用再多記一套用戶名密碼了。
  • 用戶無需被迫在自己剛剛下載還不熟悉如何使用的應(yīng)用中輸入信息,從而簡(jiǎn)化注冊(cè)流程。
  • 讓用戶通過現(xiàn)有社交網(wǎng)絡(luò)賬號(hào)注冊(cè)也許能讓你獲得一些有關(guān)他們的基本資料。這樣你就能更加有效的根據(jù)用戶的實(shí)際需求調(diào)整應(yīng)用。

注:在國內(nèi)這一設(shè)計(jì)演變成了:您可以使用QQ/微博合作帳號(hào)登錄,然后給你綁定,繼續(xù)回到注冊(cè)界面  – –

二、通知

通知功能可突出顯示近期的活動(dòng)和操作。我們每天要接觸大量的信息,但百忙之中卻沒有時(shí)間(或者不愿意把時(shí)間)花費(fèi)在手機(jī)上。我們都喜歡在盡可能短的時(shí)間內(nèi)完成要做的事,然后馬上知道是否有新的活動(dòng)或者情況能夠引起自己的關(guān)注。因此,對(duì)于通知設(shè)計(jì)模式的透徹理解和妥當(dāng)實(shí)施非常重要。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

很多知名公司的移動(dòng)應(yīng)用采用了下列幾種不同的方法實(shí)施其通知設(shè)計(jì):

  • LinkedIn在有更新內(nèi)容的標(biāo)簽上放置標(biāo)有數(shù)字的徽標(biāo)。
  • Twitter則在時(shí)間軸圖標(biāo)頂部放置一個(gè)小點(diǎn)指示有新活動(dòng)。
  • Facebook使用一個(gè)會(huì)在應(yīng)用內(nèi)垂下的彈出條幅顯示新鮮事推送中的新內(nèi)容通知。

你可以模仿一下你最喜歡的解決辦法,試試這個(gè)辦法是否適合于你和你的用戶。

通知欄該怎么設(shè)計(jì),具體方法右戳學(xué)習(xí):《怕打擾用戶?來看看怎樣設(shè)計(jì)通知欄不會(huì)討人厭》

三、彈窗和層疊窗口

彈窗(也叫層疊窗口)是一種常用于互聯(lián)網(wǎng)廣告的方法。彈窗會(huì)在不創(chuàng)建新窗口的情況下遮蓋住主要內(nèi)容,無法使用攔阻軟件進(jìn)行攔截,因此用戶非看不可。一般來說這種情況很讓用戶討厭,但在有些情況下,彈窗打斷用戶的使用反而能給用戶帶來幫助。例如,用戶可能會(huì)希望在不丟失當(dāng)前用戶界面的情況下查看某些信息。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

下面是一些彈窗設(shè)計(jì)模式幫助解決問題的案例:

  • 在用戶在應(yīng)用中執(zhí)行特定操作或達(dá)到特定時(shí)點(diǎn)時(shí)彈出并顯示與特定操作或場(chǎng)景相關(guān)的信息/控制方法。
  • 應(yīng)用中原來的內(nèi)容或場(chǎng)景仍然在背景中顯示,但彈窗可以讓用戶選擇是否要了解接下來要出現(xiàn)的內(nèi)容。
  • 彈窗可以吸引用戶的注意力并在必要時(shí)提供重要通知。在使用完成后,用戶可以點(diǎn)擊或滑動(dòng)屏關(guān)閉彈窗返回先前活動(dòng)狀態(tài)。

四、下拉刷新

在習(xí)慣了使用Facebook、Twitter或Google等社交網(wǎng)站后,我們都會(huì)很自然的使用下拉手勢(shì)進(jìn)行內(nèi)容更新。第一個(gè)使用這個(gè)設(shè)計(jì)模式的公司是Apple,在此之后這一設(shè)計(jì)就廣為流行開來了。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

當(dāng)用戶需要顯示一列非靜態(tài),但不能自動(dòng)刷新的內(nèi)容時(shí),就可以適用下拉刷新模式。下拉刷新時(shí),屏幕會(huì)滾動(dòng)到頂部,刷新完成后新內(nèi)容將從頂部開始顯示。這種設(shè)計(jì)模式可以節(jié)約空間(不需要使用按鈕)而且簡(jiǎn)單易懂。這種方式還不僅局限于更新內(nèi)容,其還可以用于在一系列短信、圖片或資料更新中加載早先的內(nèi)容。

五、用戶交互(滑動(dòng)、點(diǎn)擊等)

除了下拉刷新手勢(shì)外,滑動(dòng)也是智能手機(jī)上最為常用的手勢(shì)之一。很多應(yīng)用都允許用戶在文章上左右滑動(dòng)來了解詳細(xì)信息或執(zhí)行其他操作。與依賴于點(diǎn)擊鼠標(biāo)的傳統(tǒng)web應(yīng)用相比,這一方法充滿創(chuàng)新意義。

交互小科普!你了解這5項(xiàng)最常用的交互模式嗎?

在Android和iOS上有大量采用了滑動(dòng)、點(diǎn)擊及其他特定用戶交互方式的移動(dòng)應(yīng)用,你可以在自己的項(xiàng)目過程中予以參考。每個(gè)應(yīng)用對(duì)于自己的用戶來說都有不同的意義和價(jià)值。你應(yīng)當(dāng)在畫線框圖的過程中做好規(guī)劃再投入設(shè)計(jì)或開發(fā)流程。在測(cè)試過程中花點(diǎn)時(shí)間思考用戶的反饋、建議和批評(píng)。



文章來源:優(yōu)設(shè)   作者:程遠(yuǎn)



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


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

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

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

純純

iPhone X 在 2017 年上市以來,全面屏手機(jī)就開始逐漸普及。iPhone 8 的 4.7 寸屏幕到目前最新機(jī)型 iPhone 11 的 6.1 寸屏幕,以及 Pro Max 系列的 6.5 寸,各種各樣的劉海屏、水滴屏、挖孔屏、折疊屏等等屏幕方式隨之出現(xiàn),物理 Home 鍵都被舍棄改成虛擬按鍵,甚至是沒有虛擬按鍵的手勢(shì)滑動(dòng)操作。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

而這些手機(jī)都有一個(gè)共同的特點(diǎn),就是屏幕尺寸越來越大。屏幕尺寸變大后,手握手機(jī)的方式和界面交互操作方式也隨之改變,那對(duì)于設(shè)計(jì)而言,是否也應(yīng)該隨之進(jìn)行改變呢?

拇指的操作范圍

想單手點(diǎn)擊屏幕的操作,需要手足夠靈活進(jìn)行一輪操作才能夠到屏幕上方,過程中稍有不慎,手機(jī)隨時(shí)會(huì)砸地上。作者的手機(jī)屏幕已經(jīng)修了幾次,差不多趕上一臺(tái)二手機(jī)的價(jià)格了。

在 2013 年,國外設(shè)計(jì)師 Steven Hoober 發(fā)表了一篇《手機(jī)界面設(shè)計(jì)》的研究報(bào)告中,對(duì)一千三百名手機(jī)使用者進(jìn)行量化研究數(shù)據(jù):

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

據(jù)當(dāng)時(shí)研究的數(shù)據(jù)可以看出,有近半的用戶是單手使用手機(jī)(現(xiàn)在肯定不止)。當(dāng)用戶單手操作的時(shí)候,實(shí)際拇指可以觸摸到的區(qū)域是如下圖這樣的。綠色區(qū)域是拇指的正常操作區(qū)域,黃色區(qū)域是拇指能觸碰到的最大限度范圍,紅色區(qū)域是觸摸比較困難的區(qū)域。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

然而這份研究報(bào)告的數(shù)據(jù)是在 2013 年發(fā)布,當(dāng)時(shí)還沒有全面屏的出現(xiàn),如果把上面研究結(jié)論的區(qū)域,套用到如今的手機(jī)屏幕尺寸上,頂部的紅色區(qū)域會(huì)占更大比例。以 iPhone 11 尺寸比例作為參考,如下圖:

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

拇指可操作范圍大約在 3 分之 2 的區(qū)域,可見想要觸碰到紅色區(qū)域是有一定難度的。也正是因?yàn)檫@份報(bào)告只適合當(dāng)時(shí)的手機(jī)市場(chǎng)情況,在當(dāng)今已經(jīng)不適用了,因此需要重新去考慮如何為大屏幕手機(jī)進(jìn)行界面設(shè)計(jì)

為拇指區(qū)域設(shè)計(jì)

根據(jù) 2020 年手機(jī)UX設(shè)計(jì)趨勢(shì),大屏幕設(shè)計(jì)將會(huì)成為熱點(diǎn)。根據(jù)數(shù)據(jù)報(bào)告中有說明,2018 年 10 月使用大屏手機(jī)的用戶比例是16.3%,到 2019 年 12 月,該數(shù)據(jù)已經(jīng)上升到 41%,并且會(huì)在未來更多新機(jī)型的出現(xiàn)中持續(xù)上漲。

那隨著大屏幕手機(jī)的普及,就意味著設(shè)計(jì)師在設(shè)計(jì)界面的時(shí)候,要為大屏幕手機(jī)的使用場(chǎng)景進(jìn)行界面調(diào)整,避免用戶難以使用的體驗(yàn)問題。以下是我整理的一些設(shè)計(jì)建議方案:

1. 頭部區(qū)域設(shè)計(jì)更高

通過將標(biāo)題欄的信息區(qū)域放大,盡量把主要操作內(nèi)容向拇指區(qū)域靠近。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

2. 常用導(dǎo)航與操作居于底部

比起導(dǎo)航欄放在頂部,更適合大屏幕手機(jī)的方式是將導(dǎo)航和重要操作盡量往屏幕底部放置。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

3. 手勢(shì)操作頁面切換與返回

抖音和 Instagram story 等短視頻應(yīng)用界面都是通過手勢(shì)滑動(dòng)屏幕的方式,對(duì)頁面進(jìn)行切換,操作的學(xué)習(xí)成本很低,而且主要操作也在屏幕底部。這種操作方式也會(huì)在今年越來越多地被使用。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

4. 提示彈窗從底部升起

常用的彈窗,很多是設(shè)計(jì)在屏幕中間彈出,為了適配大屏幕,不妨嘗試從底部彈出,關(guān)鍵選項(xiàng)都能輕松選擇,提高轉(zhuǎn)化率。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

5. 使用大卡片

屏幕尺寸變大以后,使用整張大卡片可以讓用戶瀏覽內(nèi)容更專注,大面積的配圖和留白,也能提高用戶的點(diǎn)擊欲望。

手機(jī)屏幕越來越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

除此以外,作為手機(jī)廠商,在發(fā)布大屏幕手機(jī)的時(shí)候,就有對(duì)界面操作做了一些對(duì)應(yīng)系統(tǒng)級(jí)的設(shè)計(jì)調(diào)整,比如界面下拉懸停,鍵盤單手模式,屏幕邊緣滑動(dòng)返回等等。

總結(jié)

大屏幕尺寸已經(jīng)是趨勢(shì),屏幕大意味著內(nèi)容可以更大限度地得到展示,有利于產(chǎn)品提供更多的服務(wù),不再糾結(jié)首屏無法展示完主要內(nèi)容。在這個(gè)信息爆炸的時(shí)代,用戶也不再滿足于小屏幕的瀏覽方式??梢哉f,大屏幕已經(jīng)是無法改變的趨勢(shì)。與其擔(dān)心問題到來,設(shè)計(jì)師更應(yīng)該思考如何去適應(yīng)產(chǎn)品的快速迭代,不斷更新自己的設(shè)計(jì)思維模型,更全面思考問題,產(chǎn)出更合理、體驗(yàn)更好的設(shè)計(jì)方案。

文章來源:優(yōu)設(shè)   作者:布萊恩臣

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


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

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


從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

純純

Peter Drucker 說過:「量化才能管理。」這個(gè)格言后來成為了我的信條。我決定將我的目標(biāo)量化,將它分解成為最基礎(chǔ)的習(xí)慣來執(zhí)行,并且以每天一定量的執(zhí)行,來實(shí)現(xiàn)最終的目標(biāo)。

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

我們先構(gòu)建了一個(gè)免費(fèi)的 Chrome 插件 Confetti ,這是一個(gè)能夠幫你追蹤日常習(xí)慣的工具,每次完成一個(gè)任務(wù),都會(huì)有五彩繽紛的紙屑效果出現(xiàn),祝賀你守住了習(xí)慣,達(dá)成目標(biāo)。

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

以下見解希望對(duì)你有所幫助!

1、一開始就要界定好產(chǎn)品特性

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

一開始,我和 Wilson 就決定使用3屏的主要功能,并構(gòu)建了一個(gè)粗糙的原型。但是,我們沒有足夠的遠(yuǎn)見,無法設(shè)想我們的產(chǎn)品最終的方向,也沒有對(duì)全部的想法進(jìn)行深入的打磨。

最終,我們向后退了一步。我們回過頭來,確定了最小可執(zhí)行原型的發(fā)布日期,以及真正的核心功能。我們?cè)?Notion 上創(chuàng)建了一個(gè)文檔,并且開始梳理和管理哪些功能是「必需品」,哪些功能「如果有了會(huì)更好」。比如,登錄、注冊(cè)、新用戶引導(dǎo)是必不可少的功能。但是,我們認(rèn)為「重新排列習(xí)慣」是一個(gè)提升體驗(yàn)但是并不亟需的功能。

我們基于這一點(diǎn),我們開始抓住核心功能,盡可能讓它們足夠易用,強(qiáng)化核心特性。通過確定核心功能的優(yōu)先級(jí),并且確定發(fā)布日期,借此緩解我們的精神壓力,確定我們不會(huì)被成堆的功能所淹沒。這也似地我們有足夠的動(dòng)力解決核心功能。

2、有很多流程和狀態(tài)需要搞定

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

在設(shè)計(jì)產(chǎn)品的時(shí)候,我經(jīng)常被提醒要處理好每一個(gè)邊緣情況,填好每一個(gè)坑,確保體驗(yàn)的順暢。從零開始構(gòu)建產(chǎn)品是一把雙刃劍:基于自己的構(gòu)想來創(chuàng)造產(chǎn)品是令人興奮的,但是相應(yīng)的,我需要經(jīng)常在舒適區(qū)以外處理問題。

我一直在 Skookum 從事產(chǎn)品設(shè)計(jì)的工作,而這些工作通常都是在一定的約束條件下進(jìn)行的,但是現(xiàn)在所要處理的產(chǎn)品則不同。之前的產(chǎn)品都可以借助現(xiàn)成的設(shè)計(jì)系統(tǒng),有早已搭建好的設(shè)計(jì)語言,有完整的組件,有明確的 UI 狀態(tài),有非常明確的基礎(chǔ)架構(gòu),但是這次是我自己的產(chǎn)品,所有的這些都沒有。而且,這個(gè)產(chǎn)品還可能會(huì)存在幾種極端的情況、流程和狀態(tài)。

比如,在注冊(cè)流程中,按鈕會(huì)有默認(rèn)、禁用、激活、填充、錯(cuò)誤、懸停等幾種狀態(tài),但是除了這些之外,我還需要考慮諸如密碼重置的流程和體驗(yàn),這可能會(huì)涉及到 6 個(gè)高度相似的 UI 界面狀態(tài):

  1. 輸入 Email
  2. 重新發(fā)送 Email
  3. Email 通知設(shè)計(jì)
  4. 輸入新的密碼
  5. 錯(cuò)誤界面
  6. 成功界面

這個(gè)過程中,有很多東西都令我一度感到迷惑,這也引發(fā)出我下一個(gè)要說的要點(diǎn)……

3、創(chuàng)建用戶流程

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

項(xiàng)目開始之后,我很快就遭遇了組織架構(gòu)問題。因?yàn)槲沂窃诠ぷ髦鄟韯?chuàng)建這個(gè)產(chǎn)品,這導(dǎo)致我犯了一個(gè)非常嚴(yán)重的錯(cuò)誤:我沒有按照傳統(tǒng)的產(chǎn)品流程來創(chuàng)建產(chǎn)品,這隨后導(dǎo)致了一系列的問題。

按照標(biāo)準(zhǔn)的產(chǎn)品設(shè)計(jì)流程,我需要從用戶流程開始創(chuàng)建,定義用戶可能會(huì)執(zhí)行的流程,并且針對(duì)主要的流程界面進(jìn)行必要的總結(jié)說明。因?yàn)檫@個(gè)項(xiàng)目和之前的工作不一樣,我一開始就忘記了遵循流程這件事情,我錯(cuò)誤地將它視作為一個(gè)包含幾個(gè)簡(jiǎn)單界面的簡(jiǎn)單項(xiàng)目(是不是聽著特別耳熟?很多所謂的小項(xiàng)目翻車都是從這里開始的)。這樣一來,當(dāng)我開始處理諸多按鈕的不同狀態(tài)和界面變化的時(shí)候,整個(gè)用戶流程變得混亂不堪,并且我很難確定其中的體驗(yàn)漏洞有哪些。

最終我停止了這種隨性的設(shè)計(jì)方式,并且在 Whimsical 當(dāng)中創(chuàng)建了完整的用戶流程。于是我很快清楚了那些環(huán)節(jié)有所缺失,以及整個(gè)界面流程的走向。

按照用戶流程來梳理界面的時(shí)候,可以對(duì)于整個(gè)產(chǎn)品的屏幕狀態(tài)有所了解,并且隨著產(chǎn)品的發(fā)展膨脹,用戶流程的重要性會(huì)隨之增長(zhǎng),成為至關(guān)重要的部分。

4、交互應(yīng)該反饋到UI中

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

的確,在完成整個(gè) UI 之前,不應(yīng)該開始向著項(xiàng)目當(dāng)中添加動(dòng)畫。但是,不添加并不意味著你無需考慮。實(shí)際上,不同的微交互和動(dòng)畫對(duì)于實(shí)際的體驗(yàn)影響是巨大的。你在思考 UI 設(shè)計(jì)的時(shí)候,就應(yīng)該考慮到微交互和動(dòng)畫的使用,避免在后續(xù)動(dòng)效和交互落地的時(shí)候,進(jìn)行不必要的修改。

比如,當(dāng)我在設(shè)計(jì)「達(dá)成成就」這一體驗(yàn)的時(shí)候,我就考慮到了需要用到的微交互的效果,所以在我設(shè)計(jì) UI 的時(shí)候可以順著我自己的喜好來進(jìn)行設(shè)計(jì),并且將可能會(huì)用到的動(dòng)效拖到某個(gè)角落暫時(shí)記下來,避免在設(shè)計(jì) UI 的階段,影響了整體的流程和效果。而后續(xù)加入動(dòng)效的時(shí)候,就會(huì)方便很多。

我認(rèn)為,將 UI 和交互結(jié)合起來考慮是非常重要的,因?yàn)閮烧吖餐ㄋ茉炝梭w驗(yàn)。如果在設(shè)計(jì) UI 的環(huán)節(jié)直接加動(dòng)效,會(huì)讓整個(gè)設(shè)計(jì)過程變得復(fù)雜臃腫。

5、盡早獲得反饋

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

其實(shí)這也是我在這個(gè)項(xiàng)目中犯的一個(gè)大錯(cuò):等了太長(zhǎng)時(shí)間才獲得反饋。

我通常是在晚上回家和周末才有空推進(jìn)這個(gè)項(xiàng)目,在很長(zhǎng)的一段時(shí)間內(nèi),我沒有真正告訴任何人。

當(dāng)我終于同我的家人、朋友、用戶以及網(wǎng)上樂于嘗鮮的用戶公布了這一產(chǎn)品之后,他們?cè)谑褂眠^程中,開始注意到了很多細(xì)節(jié)上顯而易見、但是我并沒有發(fā)現(xiàn)的問題。我意識(shí)到我作為產(chǎn)品的設(shè)計(jì)者,是很容易陷入并沉迷用戶體驗(yàn)當(dāng)中比較孤立的一部分,反而會(huì)忽略很多顯著的問題。

回想一下,如果我能盡早向用戶和朋友展示設(shè)計(jì)和原型,那么我會(huì)在更早的時(shí)候發(fā)現(xiàn)問題,并且在獲得反饋之后才進(jìn)入開發(fā)階段,彌補(bǔ)大量的損失。

6、在別處獲得啟發(fā)很重要

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

很多設(shè)計(jì)師會(huì)認(rèn)為,所有的想法都必須是原創(chuàng)的才行,否則就是欺詐。但是稍微想想,其實(shí)徹底的原創(chuàng)其實(shí)很少的。當(dāng)你看到一個(gè)優(yōu)秀的產(chǎn)品,它優(yōu)秀的配色和恰到好處的交互可能會(huì)讓你覺得:「已經(jīng)有人做出來了,我的想法在它面前完全沒法比擬?!?

這種思維方式其實(shí)有著極大的缺陷,并且抑制了你的創(chuàng)造力。

當(dāng)我發(fā)現(xiàn)我的設(shè)計(jì)有缺陷的時(shí)候,我會(huì)竭盡全力去搜索和了解更多網(wǎng)上已有的設(shè)計(jì)。我會(huì)觀察和思考別的公司和產(chǎn)品是如何設(shè)計(jì)新用戶引導(dǎo)流程的,如何管理用戶個(gè)人信息的。我從來都沒有復(fù)制被人的體驗(yàn),但是會(huì)隔三差五去鉆研別人所創(chuàng)造出來的優(yōu)秀細(xì)節(jié),然后將這些細(xì)節(jié)借鑒到我的設(shè)計(jì)當(dāng)中。

我最喜歡的一個(gè)范例,是從模態(tài)狀態(tài)下,旋轉(zhuǎn)退出的效果。這是我偶然在一個(gè)網(wǎng)站上看到的效果,因此我決定將它添加到 Confetti 當(dāng)中,我還在著陸頁的按鈕中加入了類似的特效。

事實(shí)上,一切設(shè)計(jì)都是混搭創(chuàng)造出來的。你借鑒細(xì)節(jié)并不意味著抄襲,不要害怕去發(fā)掘和學(xué)習(xí)別人的優(yōu)勢(shì)和亮點(diǎn),你要學(xué)會(huì)有機(jī)地拆解和借鑒,靈活地運(yùn)用到自己的設(shè)計(jì)當(dāng)中,它就像調(diào)制雞尾酒一樣有趣。

7、勇敢面對(duì)身份的變換

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

當(dāng)我們開始設(shè)計(jì)的產(chǎn)品的時(shí)候,我和 Wilson 頭頂上的身份就一直在變。我們是 UI設(shè)計(jì)師,要負(fù)責(zé)UX,要做交互,也制作動(dòng)效,要進(jìn)行平面設(shè)計(jì),還要考慮市場(chǎng)營(yíng)銷,要管理產(chǎn)品,我們也要扮演其他的角色。

職責(zé)如此之多,以至于我們不可避免地遇到我們能力范圍之外各種新問題。我們必須承認(rèn)自己陷入了困境,尋求外部幫助成了必要的選擇。

專注于自己專業(yè)的領(lǐng)域,其他不專業(yè)的方面來尋求外部幫助是非常合理的。比如在一個(gè)項(xiàng)目當(dāng)中,一位藝術(shù)家負(fù)責(zé)了絕大多數(shù)的風(fēng)景插畫,另一位藝術(shù)家則完成了肖像畫的部分,這很正常。

我希望產(chǎn)品的外觀和功能能夠保持高度的一致性,并且我確實(shí)做到了。但是不要誤會(huì)我的意思,我并非是不敢走出舒適區(qū)去學(xué)習(xí)代碼開發(fā),而是在這樣的項(xiàng)目當(dāng)中,我并不適合從UI和UX領(lǐng)域延伸出去,畢竟完成項(xiàng)目的開發(fā)優(yōu)先級(jí)比學(xué)習(xí)代碼更高。

8、保持簡(jiǎn)單更重要

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

盡管給 MVP 安排好了發(fā)布時(shí)間,可以防止這個(gè)項(xiàng)目被無限膨脹的功能特性和工作量所淹沒,但是這樣依然無法防止我們基于已有的功能進(jìn)行改進(jìn)。

很多人都喜歡 Reid Hoffman 的一句話:「如果你對(duì)于產(chǎn)品的第一版感覺不尷尬,那你一定是發(fā)布晚了。」不過,我們正式發(fā)布的第一版的產(chǎn)品,并不會(huì)顯得太尷尬,但是目前來看,當(dāng)時(shí)那種簡(jiǎn)單直觀的狀態(tài),比起再花費(fèi)好幾個(gè)月時(shí)間反復(fù)打磨之后再發(fā)布,來得更好。

在發(fā)布新產(chǎn)品之前,我們必須考慮2個(gè)問題:

  1. 我們是否相信我們所構(gòu)建的產(chǎn)品,能夠?yàn)橛脩魩韮r(jià)值?
  2. 我們是否竭盡全力了?

這些問題讓我們最終能夠達(dá)成目標(biāo),且按時(shí)發(fā)布,避免分心。專注交付最核心的功能,而不是被一堆冗余的次要特性所壓倒。

9、良好的交接更加省事省時(shí)

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

從項(xiàng)目一開始我就一直在做項(xiàng)目的管理和組織設(shè)計(jì)素材,以便后面進(jìn)行開發(fā)。不過,由于我一開始就使用了 Zeplin 這樣的協(xié)同工具,確保了我可以輕松地將所有的素材都順暢地交給負(fù)責(zé)開發(fā)的 Wilson。作為一款設(shè)計(jì)系統(tǒng)工具,Zeplin 讓我無需浪費(fèi)時(shí)間對(duì)素材進(jìn)行分類,非常便捷。

在交接的過程中,我還做了一些優(yōu)化:

  1. 將所有的界面都組織到了 Zeplin 當(dāng)中,并且進(jìn)行了處理
  2. 我給所有的畫板進(jìn)行了針對(duì)性的命名,方便檢索
  3. 我在 XD 中標(biāo)注了需要導(dǎo)出的素材
  4. 我保留了舊有的界面存檔,并且確保交付的新版界面是最新的

10、一次寫明所有的UX文案

從零開始設(shè)計(jì)產(chǎn)品的 10 個(gè) UI/UX 啟示

在設(shè)計(jì) UI 的時(shí)候,界面中的文案部分是臨時(shí)編寫的,這促使了一次設(shè)計(jì)完成之后,整體的文案是不一致、不協(xié)調(diào)的。

我很希望一開始就創(chuàng)建了一個(gè)單獨(dú)的文檔,一次性將文案部分全部重寫,包括提醒、注釋、標(biāo)簽、彈出框提醒等等。而實(shí)際上,我的文案都是在設(shè)計(jì) UI 的時(shí)候附帶著寫下來的,導(dǎo)致整體的一致性嚴(yán)重缺乏。

這種文案本身在調(diào)性上的缺乏,導(dǎo)致了整個(gè)產(chǎn)品在語氣和用詞上是混搭式的,一致性很差。

所以,在產(chǎn)品上線發(fā)布之后,一直在對(duì)文案進(jìn)行修修補(bǔ)補(bǔ)。



文章來源:優(yōu)設(shè)(陳子木)   作者:Danny Sapio





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


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

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


語音用戶界面設(shè)計(jì) - 對(duì)話式體驗(yàn)設(shè)計(jì)原則

博博

文章包括三部分:1.智能語音對(duì)話系統(tǒng);2.了解 VUI 相關(guān)知識(shí);3.語音用戶界面基本設(shè)計(jì)原則。

最近在閱讀關(guān)于智能語音方面的書籍,將最近零零碎碎的筆記重新整理了一番,希望能讓讀者更加快捷、高效的認(rèn)識(shí)智能語音方面的基礎(chǔ)知識(shí)點(diǎn)。



智能語音對(duì)話系統(tǒng)


語音交互界面是近年來最重要的趨勢(shì)之一,它不僅可以依托于智能手機(jī)而存在,而且可以和智能家居、車載導(dǎo)航、智能電視、智能音響等一系列產(chǎn)品結(jié)合到一起。越來越多的人更加頻繁地使用 Siri、Google Assistant、Cortana、小愛同學(xué)等。越來越多的應(yīng)用也都已經(jīng)涉及到智能語音技術(shù)。





1、語音和語言有何區(qū)別?


我們首先需要了解「語音」和「語言」的區(qū)別。


語音是語言的信號(hào)載體,語音是人的發(fā)音器官發(fā)出的,承載一定的語言意義,而語言才承載人類的智慧。通俗的講,語音是天生就存在的,嬰兒剛出生的哭喊聲也算是語音。它是人的發(fā)音器官發(fā)出具有一定社會(huì)意義的聲音。其物理基礎(chǔ)主要有音高、音強(qiáng)、音長(zhǎng)、音色四要素構(gòu)成。而語言則是需要學(xué)習(xí)不斷進(jìn)化的。在智能語音中,我們需要考慮的是如何確保在復(fù)雜的現(xiàn)實(shí)環(huán)境下,把干擾信息過濾,獲取到準(zhǔn)確的信息。




2、語音界面之間的關(guān)聯(lián)



喚醒:Amazon Echo 和 Google Home 之類的語音驅(qū)動(dòng)設(shè)備不斷地在等待喚醒詞(“Alexa ...”或“OK,Google ...”)從而進(jìn)入喚醒狀態(tài)。


反饋:一旦喚醒,設(shè)備會(huì)將隨后接收到的音頻發(fā)送到云端的AI平臺(tái)。 該平臺(tái)使用自動(dòng)語音識(shí)別(ASR)和自然語言理解(NLU)的組合來識(shí)別用戶的意圖并將其發(fā)送到支持應(yīng)用程序。 


回復(fù):應(yīng)用程序處理請(qǐng)求并通過文本進(jìn)行響應(yīng)(如果支持則提供可視化信息)。該平臺(tái)將文本轉(zhuǎn)換為語音并通過設(shè)備播放。




3、對(duì)話系統(tǒng)概述


對(duì)話系統(tǒng):能夠與人進(jìn)行連貫對(duì)話的計(jì)算機(jī)系統(tǒng),可以采用文本、語音、圖形、觸覺、手勢(shì)及其他方式與人進(jìn)行交互,常以語音交互為主。



而如今的智能設(shè)備能夠“理解你所說的話并且采取行動(dòng)”,是兩個(gè)重要技術(shù)結(jié)合的結(jié)果:一個(gè)是自動(dòng)語音識(shí)別(ASR),另一個(gè)是自然語言理解(NLU)。


自動(dòng)語音識(shí)別(ASR) — 通過聲學(xué)模型和語言模型,將人的語音識(shí)別為文本的技術(shù)

自然語言理解(NLU)— 對(duì)用戶輸入的文本進(jìn)行語義理解,包括用戶意圖識(shí)別和語義槽填充


對(duì)話狀態(tài)跟蹤(DST) — 根據(jù)所有對(duì)話歷史信息推斷當(dāng)前對(duì)話狀態(tài)St和用戶目標(biāo)

對(duì)話策略學(xué)習(xí)(DPL) — 基于當(dāng)前狀態(tài)生成下一步操作

自然語言生成(NLG) — 獲取結(jié)果文本,主要依據(jù)模板或深度生成的模型生成用戶可以理解的自然語言文本

從文本到語音(TTS) — 結(jié)果播放給用戶聽,將自然語言文本轉(zhuǎn)化成語言輸出




4、語音交互設(shè)計(jì)需要遵循什么原則?


遵循合作原則:「聽者」和「說話者」為了能夠順利交談,必須互相合作。Paul Grice 提出了這個(gè)觀點(diǎn),并將其分為以下4個(gè)準(zhǔn)則。


質(zhì)的準(zhǔn)則:說真實(shí)信息,做不到的話不要說。

舉例:對(duì)用戶說:“有什么可以幫您的嗎?”,而實(shí)際上整個(gè) VUI 系統(tǒng)僅僅能提供查詢?cè)捹M(fèi)余額。


量的準(zhǔn)則:保持對(duì)話交流簡(jiǎn)潔,減少認(rèn)知負(fù)荷。

解釋:刪除多余的措辭。比如“請(qǐng)您注意聽,因?yàn)槲覀兊倪x項(xiàng)可能已經(jīng)變了”。


相關(guān)準(zhǔn)則:所說的話需與當(dāng)前對(duì)話有關(guān),不干擾當(dāng)前任務(wù)進(jìn)行。

解釋:比如用戶想知道天氣,你給他推薦旅游的地方。


方式準(zhǔn)則:說話需清晰、明了,不要拐彎抹角。

解釋:不要使用讓用戶難以理解的「專業(yè)術(shù)語」。







了解 VUI 相關(guān)知識(shí)


語音交互界面(VUI)指的是為用戶提供可進(jìn)行語音交互的計(jì)算機(jī)平臺(tái),它能夠?qū)崿F(xiàn)自動(dòng)化的服務(wù)并且提供完整的相關(guān)流程。而設(shè)計(jì) VUI 的時(shí)候,設(shè)計(jì)師需要側(cè)重于用戶的語音交互過程,并設(shè)計(jì)出相應(yīng)的語音應(yīng)用系統(tǒng)。由于 VUI 是面向用戶的交互界面,因此滿足用戶的實(shí)際需求是至關(guān)重要的。




1、語音用戶界面 VUI 簡(jiǎn)史


20世紀(jì)50年代:貝爾實(shí)驗(yàn)室建立了一個(gè)單人語音數(shù)字識(shí)別系統(tǒng)。


20世紀(jì)60、70年代:語音數(shù)字系統(tǒng)的這項(xiàng)研究仍在不斷拓展可識(shí)別的詞匯,并且致力于實(shí)現(xiàn)“連續(xù)語音”的識(shí)別。


20世紀(jì)80年代:技術(shù)進(jìn)步讓語音識(shí)別更具實(shí)用性,使日常語音的識(shí)別成為可能。


20世紀(jì)90年代:誕生了第一個(gè)可行的非特定人的語音識(shí)別系統(tǒng)。簡(jiǎn)稱 IVR


21世紀(jì)初期,IVR 系統(tǒng)成為了主流,任何人都可以通過一個(gè)普通的固定電話和語音進(jìn)行股票詢價(jià)、機(jī)票預(yù)定、銀行轉(zhuǎn)賬、處方藥品預(yù)定、本地電影排片查詢以及收聽交通信息等。




2、那什么是 IVR 系統(tǒng)?


交互模式的語音應(yīng)答,簡(jiǎn)稱為 IVR。我們后續(xù)簡(jiǎn)稱為:交互式語音應(yīng)答(IVR)系統(tǒng)


它可以通過電話線路理解人們的話并且執(zhí)行認(rèn)為,一般都廣泛的應(yīng)用在運(yùn)營(yíng)的客服方面,即使是現(xiàn)在三大運(yùn)營(yíng)上的機(jī)器客服還是采用了這種語音應(yīng)答的方式。但是通過電話撥號(hào)的方式開始語音的問答還存在很多的缺點(diǎn),例如只能應(yīng)用在單輪任務(wù)的問答,交互方式比較單一,不能進(jìn)行中途打斷等缺點(diǎn)。


IVR,即語音增值業(yè)務(wù),是移動(dòng)運(yùn)營(yíng)商由2002年開始啟動(dòng)的業(yè)務(wù)。移動(dòng)的 IVR 分為兩大品牌:音信互動(dòng)和娛音在線,聯(lián)通的 IVR 品牌為聯(lián)通。





3、IVR 系統(tǒng)設(shè)計(jì)與移動(dòng)設(shè)備


21世紀(jì)初,IVR 系統(tǒng)已逐漸普及。起初“按鍵+語音”的混合形式(請(qǐng)按“1”或者說“1”),是很常見的模式,比如10086的查詢功能。人們創(chuàng)造了 IVR 系統(tǒng),希望它可以自動(dòng)處理一些事物,這樣客戶就不會(huì)總是需要找一個(gè)真人來解決問題了。相比與真人客服交談,很多用戶實(shí)際上更喜歡使用 IVR 系統(tǒng),因?yàn)樗麄兛梢曰ê荛L(zhǎng)時(shí)間反復(fù)咨詢信息而不會(huì)覺得他們是在“打擾”一個(gè)人類客服。


移動(dòng) VUI 設(shè)計(jì)需要注意:


1、確定它是否需要一個(gè)視覺化的呈現(xiàn),比如一個(gè)虛擬角色。


2、確定你的 VUI 在什么時(shí)候允許用戶說話?可以被打斷嗎?是否需要按鍵功能?




4、VUI 的優(yōu)勢(shì)是什么?



速度快:語音輸入的方式比手動(dòng)輸入快很多,同樣的時(shí)間可以輸出更多的信息。


釋放雙手:釋放雙手與機(jī)器進(jìn)行交互,比如駕駛狀態(tài)下,通過語音輸入完成用戶需求,安全和便利。


直覺性:說話更自然,更容易??梢灾苯油ㄟ^語音輸入的方式來表達(dá)你的意愿。


同理心:語音包含了語氣、音量、語調(diào)和語速,且傳遞了大量的感知信息,不僅僅是文字那么簡(jiǎn)單。




5、哪些場(chǎng)景不適合使用 VUI ?


公眾場(chǎng)所:開放的環(huán)境辦公,比如:咖啡館、圖書館等。環(huán)境影響因素較大,不利于用戶語音的錄入和接收。


不適應(yīng)對(duì)計(jì)算機(jī)說話:并不是每個(gè)人都喜歡對(duì)計(jì)算機(jī)大聲說話,即使是在私人空間。


更喜歡打字:許多人習(xí)慣每天在手機(jī)上花幾小時(shí),大部分的時(shí)間都是在打字。


隱私安全:比如身份證、銀行密碼等。GUI 比 VUI 更加適合高效安全輸入。




6、哪些場(chǎng)景適合使用 VUI?


使用場(chǎng)景需要騰出雙手,比如車載導(dǎo)航、智能音響。


作為家庭的控制中心,打造智能家具居控制的切入點(diǎn)。


語音記錄病歷,不管對(duì)醫(yī)生來說還是患者來說,都是提高看病效率的很好助手。


幫助用戶簡(jiǎn)單記錄、查詢、照顧用戶的作息時(shí)間等。




7、VUI 設(shè)計(jì)師的工作內(nèi)容


VUI 設(shè)計(jì)師思考的是在系統(tǒng)和終端用戶間,從開始到結(jié)束的整個(gè)對(duì)話過程。他們思考正在解決的問題以及用戶需要什么來達(dá)成他們的目的。VUI 設(shè)計(jì)師在項(xiàng)目中扮演著非常重要的角色。通常會(huì)參與項(xiàng)目全程的工作,并與團(tuán)隊(duì)合作完成在技術(shù)、體驗(yàn)、設(shè)計(jì)上的優(yōu)化。



如果 VUI 需要與后端系統(tǒng)進(jìn)行交互,他們要考慮需要處理的請(qǐng)求。如果流程中有人的因素,比如客服需要交接,那么設(shè)計(jì)師需要考慮如何進(jìn)行交接,以及如何培訓(xùn)客服。







語音用戶界面基本設(shè)計(jì)原則



1、對(duì)話式用戶界面


對(duì)話式設(shè)計(jì)定義:思考如何與 VUI 系統(tǒng)進(jìn)行一輪以上的交互。


因此,需要設(shè)計(jì)一輪以上的對(duì)話,并思考用戶接下來可能會(huì)做什么。不要強(qiáng)迫用戶展開新一輪對(duì)話,而是去嘗試了解用戶的意圖并允許用戶繼續(xù)交談,同時(shí)有必要為用戶近期所說的話保留歷史記錄。





2、多模態(tài)界面


與 IVR 系統(tǒng)不同的是,在移動(dòng)設(shè)備上我們可以增加一個(gè)可視化組件。


比如在向用戶傳達(dá)信息、確認(rèn)信息,以及告訴用戶什么時(shí)候輪到他們說話等。(比如:百度地圖的小度,他會(huì)告訴用戶什么時(shí)候可以說話,目前所處的狀態(tài),說完之后給予的反饋)


如果有一個(gè)可視化組件,則會(huì)讓移動(dòng)設(shè)備增強(qiáng)優(yōu)勢(shì)。允許用戶同時(shí)使用語音和屏幕進(jìn)行交互。(手機(jī)上虛擬助手,有些雖然以語音交互為主,但是在用戶的智能手機(jī)上也會(huì)有一個(gè)配套的APP)。





3、設(shè)定用戶期望


優(yōu)秀的對(duì)話式設(shè)計(jì)不僅僅是精心制作的友好提示。Google 交互設(shè)計(jì)師 Margaret Urban 建議:如果你不能理解答案,就不提問。


“當(dāng)某個(gè)人成功完成了一次語音交互,伴隨著腦內(nèi)咖(endorphin)的升高,用戶會(huì)獲得一種成就感和滿足感。此時(shí)正是一個(gè)絕佳的時(shí)機(jī)來告訴用戶”你做的很棒,要不要再試試這個(gè)?”


是否讓我們想到了網(wǎng)頁登陸驗(yàn)證的時(shí)候,需要完成一塊拼圖,但是你再慢他也告訴你超越全球96%以上的人。


“如果你已經(jīng)設(shè)計(jì)了一個(gè)設(shè)置鬧鐘的功能,但是你沒有提供用戶取消設(shè)置的方式,這就像給人一條浴巾但是沒給他香皂一樣。如果你設(shè)置了可以完成某項(xiàng)任務(wù)的語氣,請(qǐng)務(wù)必考慮與之相關(guān)的任務(wù)?!?/strong>





4、確定策略時(shí)需注意的幾點(diǎn)


輸入確認(rèn):必須確保用戶感覺到自己是被理解的,同時(shí)有助于讓用戶知道,什么時(shí)候 VUI 不理解他們所說的話。


1、確認(rèn)錯(cuò)誤的后果是什么?比如:預(yù)定錯(cuò)誤的航班?制定錯(cuò)誤的任務(wù)?播放錯(cuò)誤的歌曲?


2、系統(tǒng)將如何反饋?比如:會(huì)有音頻提示嗎?是否有視覺反饋嗎?比如Amazon Echo上的光環(huán)。


3、是否擁有屏幕?比如:車載導(dǎo)航、手機(jī)屏幕、智能手表。


4、選擇合適的確認(rèn)形式?比如:明確確認(rèn)、含蓄確認(rèn)、混合式的確認(rèn)。




5、確認(rèn)策略的兩種方案


顯性確認(rèn):重要信息,需強(qiáng)制用戶確認(rèn)信息。


隱性確認(rèn):讓用戶知道他的話接收到了,但不需要他們確認(rèn)。




6、確認(rèn)信息的方式




三級(jí)置信度:


系統(tǒng)將在一定的閾值內(nèi),以明確的形式確認(rèn)信息,拒絕較低置信度的信息,并以隱性確認(rèn)來確認(rèn)置信度超過80%閥值的信息。


1、80%以上,使用隱性確認(rèn)。如果是誤識(shí)別代價(jià)高的話,考慮采取顯性確認(rèn)。

2、45%-80%,使用顯性確認(rèn),以明確的形式確認(rèn)信息。

3、45%以下的,拒絕確認(rèn)信息。


舉例:用戶:幫我再買一份口香糖。

VUI:(置信度大于80%,使用隱性確認(rèn))好的,已經(jīng)為您再購買一份口香糖。

(置信度45%~79%,使用顯性確認(rèn))您是想再多買一份口香糖,是嗎?

(置信度小于45%)對(duì)不起,我沒有聽清您講的話,您想買什么?



隱性確認(rèn):


1、只使用隱性確認(rèn),不要求用戶進(jìn)行操作。

2、將「答案」和連同「原始的問題的一部分」一同回復(fù),讓用戶知道系統(tǒng)識(shí)別到的是哪個(gè)問題。

3、當(dāng)置信度高的時(shí)候,也可以不用連同問題,這樣更自然流暢。



非語言式確認(rèn):


1、僅需行動(dòng)反饋,而不需要口頭響應(yīng)。

2、通過視覺確認(rèn),比如小米智能家居,可以通過語音交互打開燈光、電視、窗簾等。

     a、如果沒有延遲,沒必要再對(duì)其回復(fù)。

     b、如果有3-5秒延遲,需進(jìn)行回復(fù),讓用戶知道并不是設(shè)備沒有聽到她的聲音。

3、使用一個(gè)“聲音標(biāo)識(shí)”,即簡(jiǎn)短的、有識(shí)別度的聲音。這樣有助于幫助用戶快速知道他們已經(jīng)到了哪一步。



通用確認(rèn):


1、在某些對(duì)話式系統(tǒng)中,最好不要詢問用戶具體說了些什么 - 哪怕是隱性確認(rèn)。

2、通用確認(rèn)可以讓用戶分享更豐富的體驗(yàn),因?yàn)檫@類反饋能適應(yīng)用戶輸入的各種信息,并讓對(duì)話繼續(xù)進(jìn)行。通常人與人之間的對(duì)話,也不會(huì)句句必回復(fù),也會(huì)有 “嗯” “哦 ”“啊” “然后呢”等。 



視覺確認(rèn):


1、確認(rèn)一個(gè)項(xiàng)目清單,通過屏幕顯示進(jìn)行溝通會(huì)更加有效。人的記憶有限,通常用戶一次性不能記住超過大約7個(gè)聽覺項(xiàng)目。

2、用來確認(rèn)用戶的選擇。用戶可以通過說話或按下按鈕來回復(fù)。而 GUI 的反饋指令更加明確。




7、判斷你的 VUI 適合哪種類型


目前大多數(shù)的 VUI 系統(tǒng)都是“命令 - 控制”模式,這意味著當(dāng)用戶想要說話時(shí),必須給出明確的指示。


1、用戶可以隨時(shí)向系統(tǒng)詢問 / 發(fā)出命令嗎?


2、是否參與一個(gè)有明確開始和結(jié)束的封閉式對(duì)話?




8、命令-控制模式



喚醒系統(tǒng)方式:按鍵通話(車載導(dǎo)航、Siri等)、直接進(jìn)行關(guān)鍵詞呼叫(“OK Google”“小度”等喚醒詞)。


喚醒系統(tǒng)反饋:系統(tǒng)檢測(cè)到用戶說話完成,通常會(huì)使用某種非語言的音效進(jìn)行提示,然后做出相應(yīng)處理(比如:“?!钡囊宦暬蛘咭曈X反饋:聲波線、點(diǎn)狀動(dòng)效、設(shè)備逐漸發(fā)光等)。


系統(tǒng)聆聽時(shí)間:用戶說出喚醒詞或按下按鈕后,系統(tǒng)保持聆聽狀態(tài)的時(shí)長(zhǎng),根據(jù)經(jīng)驗(yàn)來看,10秒 是個(gè)不錯(cuò)的起始時(shí)間段。



喚醒響應(yīng)時(shí)間與反饋方式


喚醒響應(yīng)時(shí)間與喚醒反饋方式有關(guān),不同喚醒反饋方式下,最佳響應(yīng)時(shí)間不同:


1、當(dāng)喚醒反饋為"燈光"反饋時(shí),喚醒響應(yīng)速度越快越好,在200ms時(shí),用戶響應(yīng)舒適度最高(對(duì)響應(yīng)時(shí)間評(píng)價(jià)為剛剛好的用戶比例),73%的用戶對(duì)速度滿意。


2、當(dāng)喚醒反饋為"燈光+音效"時(shí),喚醒響應(yīng)速度的舒適時(shí)間為300ms左右,76%的用戶對(duì)速度滿意。


3、當(dāng)喚醒反饋為"燈光+人聲"時(shí),喚醒響應(yīng)速度的舒適時(shí)間為500ms左右,74%的用戶對(duì)速度滿意。


數(shù)據(jù)來源:百度人工智能交互設(shè)計(jì)院智能音響時(shí)間測(cè)試實(shí)驗(yàn)



喚醒等待時(shí)間體驗(yàn)感


用戶請(qǐng)求及反饋階段響應(yīng)時(shí)間對(duì)等待體驗(yàn)的影響:


1、1250ms以內(nèi)是用戶認(rèn)為響應(yīng)速度較優(yōu)的區(qū)間,其中650ms為最佳體驗(yàn)值。在450ms時(shí),少量用戶覺得響應(yīng)速度太快了,用戶會(huì)感覺到緊迫感和壓力,難以接受。


2、在1450ms時(shí),有53%的用戶開始感覺響應(yīng)有延時(shí),但仍能夠接受。


3、從2150ms開始,有20%的用戶認(rèn)為音箱響應(yīng)太慢,不能夠接受。我們認(rèn)為20%的用戶不滿意,已經(jīng)不足以被稱為一個(gè)優(yōu)秀的產(chǎn)品。


數(shù)據(jù)來源:百度人工智能交互設(shè)計(jì)院智能音響時(shí)間測(cè)試實(shí)驗(yàn)




9、對(duì)話模式


1、不要強(qiáng)迫他們不斷地去表明他們將要開始說話,自然地對(duì)話技巧進(jìn)行話輪轉(zhuǎn)換。


2、通過更精細(xì)的設(shè)計(jì),使 VUI 系統(tǒng)可以處理一些常見的微妙表達(dá)方式。(用戶處理完畢說“謝謝”,你可以設(shè)置系統(tǒng)忽略這種情況,或回復(fù)“不用客氣”,而不是提示或者報(bào)錯(cuò)。)


3、不要問你都無法理解的反問句。


4、打破話輪轉(zhuǎn)換的情況,用戶在系統(tǒng)說完之前就進(jìn)行提問。


5、在命令 - 控制模式和對(duì)話模式之間進(jìn)行切換。喚醒之后進(jìn)行自然的對(duì)話。




10、對(duì)話式標(biāo)識(shí)


使 VUI 更加人性化、更具吸引力,對(duì)話式標(biāo)識(shí)是讓用戶了解交談進(jìn)展以及進(jìn)展情況的重要方式,當(dāng)系統(tǒng)在對(duì)話中使用了一些基本的對(duì)話禮儀后,用戶的參與度會(huì)更高,并且會(huì)以同樣的方式進(jìn)行回復(fù)。



反面案例:

虛擬助理:你昨晚你睡了幾小時(shí)?

用戶:大約7個(gè)小時(shí)。

虛擬助理:你昨天吃了幾份水果和蔬菜?

用戶:大概有4份。

虛擬助理:你昨晚吃藥了嗎?

用戶:吃藥。

虛擬助理:再見。


正確案例:

虛擬助理:我會(huì)問你幾個(gè)有關(guān)你身體健康的問題。第一個(gè)問題,昨晚你睡了幾小時(shí)?

用戶:大約7個(gè)小時(shí)。

虛擬助理:不錯(cuò)。你昨天吃了幾份水果和蔬菜?

用戶:大概有4份。

虛擬助理:了解了。最后一個(gè)問題,你昨晚吃藥了嗎?

用戶:吃藥。

虛擬助理:好的,暫時(shí)就這些了,我明天還會(huì)再問你的,回見。




11、異常處理


“當(dāng)你與人類交談時(shí),永遠(yuǎn)不會(huì)出現(xiàn)不可恢復(fù)的錯(cuò)誤狀態(tài)?!?

— ABI JONES, Google 設(shè)計(jì)主管


“你偶爾因?yàn)榉稿e(cuò)和不知道某些事情導(dǎo)致評(píng)分降低造成的影響,比你每次做對(duì)一件事情重要百倍。” 

— 英特爾語音助手部經(jīng)理 Pilar Manchon


如果處理的得很好,錯(cuò)誤情況就不會(huì)影響用戶,你可以讓用戶回到正常流程,并順利完成任務(wù)。但如果處理不好,用戶不僅這次無法完成任務(wù),他們以后都可能再也不用你的產(chǎn)品了。


一個(gè)好的設(shè)計(jì)師應(yīng)該知道,你不能只設(shè)計(jì)正常的情況, 你還要對(duì)出錯(cuò)的情況做出設(shè)計(jì)。這對(duì)于 VUI 設(shè)計(jì)來說尤為重要,因?yàn)槌鲥e(cuò)情況是家常便飯。



未檢測(cè)到語音 / 檢測(cè)到語音,但沒有識(shí)別


1、什么情況下可以明確說出來?

     a、你的系統(tǒng)只使用語音

     b、用戶沒有其他的回復(fù)方式

     c、必須要用戶回復(fù)后,系統(tǒng)才能繼續(xù)進(jìn)行任務(wù) / 對(duì)話


2、什么情況下可以什么都不做?

     a、用戶可以通過其他方式進(jìn)行下一步操作(比如通過按鍵選擇)

     b、就算什么也不做,也不會(huì)中斷對(duì)話

     c、系統(tǒng)沒有理解時(shí),用視覺信息提示告訴用戶,比如:提示列表等

     d、利用虛擬表情形象反饋,疑問、微笑等動(dòng)作表達(dá)



其他異常處理


1、當(dāng)出現(xiàn):語音被正確識(shí)別,但系統(tǒng)無法處理

     a、程序?qū)﹃P(guān)鍵屬性理解不明,寫了錯(cuò)誤的回復(fù)

     b、沒有針對(duì)一些情況的回復(fù)

解決:對(duì)用戶可能會(huì)說到的所有情況做更完善的預(yù)測(cè),通過數(shù)據(jù)收集來避免此問題


2、當(dāng)出現(xiàn):部分語音識(shí)別錯(cuò)誤

     a、什么也不去處理,因?yàn)檫@不是你想要的結(jié)果

     b、匹配錯(cuò)誤的行為

解決:可以用 N-Best 列表來智能匹配最有可能的識(shí)別結(jié)果


3、增強(qiáng)錯(cuò)誤提示

     a、當(dāng)需要用戶說話的時(shí)候,使用這種增強(qiáng)錯(cuò)誤提示策略

     b、必要的情況下,進(jìn)階錯(cuò)誤行為提示可以更為詳細(xì),并提供更多的幫助

     c、如果你正在設(shè)計(jì)一個(gè)可以提供真人輔助的系統(tǒng),可以為錯(cuò)誤數(shù)量設(shè)置一個(gè)閾值,當(dāng)達(dá)到該閾值時(shí),將用戶轉(zhuǎn)移給人工助手  




12、新手和專家用戶


如果你的用戶會(huì)定期使用你的系統(tǒng),那么在設(shè)計(jì)中就需包含不同的策略。


“務(wù)必確保你的目標(biāo)不是簡(jiǎn)單的訓(xùn)練你的用戶,應(yīng)當(dāng)適應(yīng)用戶的行為,而不是用已有的命令讓用戶感到厭煩?!?

— Google 交互設(shè)計(jì)師 Margaret Urban


我們?cè)?VUI 設(shè)計(jì)上該如何更好的交互設(shè)計(jì)?


1、減少冗長(zhǎng)指令以及其他引導(dǎo)提示。通過計(jì)算 APP 使用次數(shù)和頻率來確認(rèn)是否切換模式。


2、縮短解釋性提示。但是請(qǐng)務(wù)必使用“對(duì)話式標(biāo)識(shí)”。


3、啟動(dòng)效應(yīng)。



什么是啟動(dòng)效應(yīng)?


指某人受到某種特定的刺激后(例如一個(gè)詞語或者圖像)會(huì)影響他們對(duì)之后刺激的反應(yīng)。首先讓用戶預(yù)先知道你會(huì)問他們幾個(gè)確定數(shù)量的問題,為后面會(huì)發(fā)生的事情提供了暗示,用戶就會(huì)知道如何去準(zhǔn)備。比如以下情況:


1、當(dāng)給人們呈現(xiàn)一個(gè)還沒完成的草圖,隨著這個(gè)草圖越來越完整,人們就越來越辨認(rèn)出這張圖畫的是什么。之后,再給他們呈現(xiàn)其他還沒完成的草圖時(shí),他們會(huì)更早辨認(rèn)出這張圖畫的是什么;


2、如果當(dāng)給人們呈現(xiàn)一組漢字,假如里面含有 “河” 這個(gè)字,隨后讓他們寫出部首是 “氵” 的字時(shí),這些人回答 “河” 的幾率會(huì)更大。



談?wù)勛约簩?duì)新手和專家用戶的理解


01、專家型用戶:代表老用戶且愿意探索你的產(chǎn)品或服務(wù),有著很大的包容度。并會(huì)積極提出各種改進(jìn)的建議和享受產(chǎn)品帶來的驚喜感。


02、新手:什么叫新手,就是剛剛下載你的產(chǎn)品,準(zhǔn)備使用的用戶,對(duì)產(chǎn)品功能都還處于陌生摸索的階段。他們不會(huì)因?yàn)槟愕募夹g(shù)而使用你的產(chǎn)品,使用你的產(chǎn)品目的是完成某項(xiàng)任務(wù)。他們有興趣使用更高級(jí)更復(fù)雜的產(chǎn)品,但卻不愿意接觸全新的東西,要想讓他們認(rèn)可,那么產(chǎn)品就必須足夠簡(jiǎn)單。




13、持續(xù)跟蹤上下文


持續(xù)跟蹤信息并不容易,但如果不跟蹤這些信息,你的 APP 就只能做單輪的對(duì)話行為。


指代:用兩個(gè)不同的詞語指同一個(gè)東西。比如: “他”  “哪些”





14、幫助和其他通用部分


我們?cè)谠O(shè)計(jì) IVR 系統(tǒng)時(shí),我們會(huì)確保每個(gè)狀態(tài)都包含一組通用組件:重復(fù)、主菜單、幫助、操作和再見。





15、延遲


產(chǎn)生原因:糟糕的連續(xù)性能、系統(tǒng)處理進(jìn)程、數(shù)據(jù)庫訪問


處理方式:告知用戶關(guān)于延遲的情況(比如:“請(qǐng)稍等,正在查找相關(guān)記錄”)、非語音和視覺的提示(比如:延遲提示音以及加載狀態(tài))、可視化效果(比如:加載中的動(dòng)態(tài)圖標(biāo))


處理細(xì)節(jié):延遲的時(shí)長(zhǎng)可能為0~10秒,在沒有延遲的時(shí)候最好也插入幾秒的延遲。因?yàn)槿绻谙到y(tǒng)說“請(qǐng)稍等”之后,緊接著就繼續(xù)對(duì)話的話,會(huì)給用戶帶來異樣的感受。很多設(shè)備針對(duì)喚醒詞采用了本地化識(shí)別的方式,這樣喚醒的會(huì)更快。




16、消除歧義


問題來源:用戶只會(huì)提供執(zhí)行命令所需的部分信息,而沒有提供所有的細(xì)節(jié)。


舉例:用戶可能會(huì)詢問某地的天氣,而很多地方都有叫這個(gè)名字的地點(diǎn),諸如“湖南路”那邊的天氣怎么樣。


解決方案:


1、依靠任何已知的信息來確定答案,而不是再次詢問用戶。


2、根據(jù)上下文線索進(jìn)行判斷。


3、反問用戶進(jìn)行確認(rèn),確保系統(tǒng)對(duì)用戶同一個(gè)問題的各種各樣的回復(fù)形式都有良好的適應(yīng)性。


4、指令不明確。比如“給胡歌打電話,撥打工作電話還是家庭電話?”,系統(tǒng)以隱性的形式對(duì)名字進(jìn)行了確認(rèn),系統(tǒng)對(duì)這個(gè)名字有很高的置信度,并且僅有一個(gè)胡歌。


5、用戶回答的信息超初了你的 VUI 系統(tǒng)可以處理的范圍時(shí),你可能需要縮小范圍消除歧義。




17、設(shè)計(jì)文檔


我們需要制作:示例對(duì)話(sample dialogs)和會(huì)話流(dialog flow)文檔外其他一些情況。例如:在設(shè)計(jì)過程中,你還需要?jiǎng)?chuàng)建提示列表、完善對(duì)話每個(gè)狀態(tài)指定完整的語法規(guī)則等等。





18、無障礙設(shè)計(jì)


“一開始,我就很討厭屏幕閱讀器的工作方式。為什么它會(huì)被設(shè)計(jì)成這樣?當(dāng)以視覺的方式來展示信息沒有任何意義時(shí),屏幕閱讀器只是簡(jiǎn)單地將文字轉(zhuǎn)換成音頻。所有那些應(yīng)用花在創(chuàng)造完美用戶體驗(yàn)的時(shí)候和精力此時(shí)都變得沒有任何意義,甚至有的給盲人用戶帶來了更糟的體驗(yàn)?!?   — 克里斯·莫里(Chris Maury)





19、典型 VUI 項(xiàng)目交付項(xiàng)內(nèi)容


示例對(duì)話:系統(tǒng)和用戶之間可能產(chǎn)生交互行為的預(yù)設(shè)對(duì)話,對(duì)話看起來就像電影劇本一樣,包括兩個(gè)主要角色之間來回往復(fù)對(duì)話。


流程圖:展示下一個(gè)狀態(tài)分支的所有方式,不一定要羅列所有的交互或示例對(duì)話,也可以是功能的分組、文本的分組等。


提示列表:如果沒有屏幕可以使用配音演員或語音合成來播放提示列表。


產(chǎn)品原型:如果這是一個(gè)多模態(tài)產(chǎn)品,有屏幕、支持觸摸交互。




參考文獻(xiàn):

《語音用戶界面設(shè)計(jì):對(duì)話式體驗(yàn)設(shè)計(jì)原則》-【美】Cathy Pearl(凱瑟 彼爾)

語音交互入門:從概念,原理到如何設(shè)計(jì)VUI產(chǎn)品 - 杜松

AI時(shí)代的語音設(shè)計(jì)經(jīng)驗(yàn)漫談 - 少夫白杰

語音用戶界面設(shè)計(jì) - 對(duì)話式體驗(yàn)設(shè)計(jì)原則 - walle_x






文章來源:站酷   作者:Sabaku_no_Gaara

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

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

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

UX設(shè)計(jì)全方案思考與呈現(xiàn)

純純


配色/圖標(biāo)什么的是基礎(chǔ)嗎?

之前一直沒有太多關(guān)注過如何定義一個(gè) APP 的配色,或者如何畫一個(gè)漂亮的 icon。曾經(jīng)的上級(jí)指示都是這些基礎(chǔ)對(duì)商業(yè)的不可量化。于是我在思考一個(gè)問題,就是沒有直觀商業(yè)價(jià)值的設(shè)計(jì)要素都失去了意義變成了所謂基礎(chǔ)的事情嗎?

半年前面試字節(jié)的時(shí)候,面試官問了我有關(guān)配色的定義,細(xì)節(jié)到為什么是這個(gè)色值。當(dāng)時(shí)十分震驚于這么細(xì)節(jié)的問題,之后我就想起了之前有位朋友給我發(fā)送過一份有關(guān)支付寶「藍(lán)」的定義 pdf,洋洋灑灑幾十頁就是為了解釋他們?yōu)樯队眠@個(gè)有點(diǎn)臟的藍(lán)色#108ee9 當(dāng)主色。

所以其實(shí) APP 的配色/圖標(biāo)與主品牌是一脈相承的,它是品牌的延續(xù)與象征。它以最直觀的態(tài)度傳達(dá)給用戶,這個(gè)產(chǎn)品以及品牌的調(diào)性,并以此建立最強(qiáng)有力的視覺識(shí)別性。所以我覺得它是可以有條件地展示在我們?cè)O(shè)計(jì)方案里的,但一定注意它的篇幅和表達(dá)的方式,維度在品牌傳達(dá)這一層就對(duì)了。

至于如何展示和定義你的 APP 配色,一般 2 類情況。

1. 在品牌主視覺配色基礎(chǔ)上的適配

這種情況一般適用品牌主視覺方案已經(jīng)設(shè)計(jì)完畢,APP 端作為延續(xù)。這個(gè)時(shí)候一般注意配色從 CMYK 模式到 RGB 的轉(zhuǎn)換,所以作為 APP 的配色,具體色值上可以稍作調(diào)整,使它更適配于 LED 屏的用戶感知與舒適度。

另外可以使用透明度進(jìn)行色彩分階段,一般從 0-100% 分為 10 階就足夠我們?nèi)粘=缑嬖O(shè)計(jì)使用了。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

2. 0-1定義APP配色

這種情況下我們從感性和理性 2 個(gè)角度去定義顏色。

從感性的角度分析:情緒板應(yīng)該大家都熟知的了,根據(jù)不同的行業(yè)和用戶定位得到相應(yīng)的關(guān)鍵詞。對(duì)應(yīng)不同的關(guān)鍵詞再搜集對(duì)應(yīng)的圖片,從圖片和自然感知中提煉出主色。

從理性的角度分析:我們把色彩分為對(duì)比色、近似色、復(fù)合色、單一色、三角對(duì)立色和漸變色六種。根據(jù)產(chǎn)品的類型和定位,我們決定使用什么樣的配色。比如一個(gè)年輕大學(xué)生專用的社交型 APP,我們可能就傾向更多地使用對(duì)比色這樣的撞色得到更多潮流與青春的味道。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

至于圖標(biāo)的話我就更不用多說了,大家肯定都記得那些非?;A(chǔ)的繪制圖標(biāo)的法則。個(gè)人認(rèn)為圖標(biāo)也不太需要放一個(gè)單獨(dú)的篇幅去展示,除非它有一些新奇有趣的亮點(diǎn)。

界面框架,只是框架而已嗎?

在之前的文章中有寫過,匹配產(chǎn)品定位的界面框架一旦輸出,對(duì)整個(gè) APP 之后的迭代與功能設(shè)計(jì)都有很直接的影響。定義整體的UX 框架方案,是實(shí)踐設(shè)計(jì)目標(biāo)與策略的過程,基本圍繞著這 3 個(gè)出發(fā)點(diǎn):匹配產(chǎn)品定位、滿足業(yè)務(wù)拓展性、符合舒適度美學(xué) 。

1. 定義整體框架

首先我們從宏觀角度分析,一方面產(chǎn)品的業(yè)務(wù)線處于什么情況,是相對(duì)獨(dú)立的業(yè)務(wù)主線產(chǎn)品(舉例:拉勾)?還是平臺(tái)級(jí)產(chǎn)品(里面包含了許多垂直的業(yè)務(wù)線,舉例淘寶)?如果是平臺(tái)級(jí)產(chǎn)品在整體框架設(shè)計(jì)時(shí)就需要考慮跨端跨業(yè)務(wù)的框架拓展型。

舉個(gè)例子,就是在定義平臺(tái)框架的時(shí)候要考慮這個(gè)框架與容器是不是同時(shí)適用于底下的子業(yè)務(wù)線,同時(shí)當(dāng)這個(gè)框架到了 H5、小程序、PC 的時(shí)候需要做哪些適配調(diào)整,是否都可以很好地進(jìn)行兼容適配。

另一方面,整體框架設(shè)計(jì)的類型是否符合設(shè)計(jì)目標(biāo)。舉個(gè)例子,無框式超大留白的框架設(shè)計(jì)雖然看上去很厲害,但在大部分商業(yè)產(chǎn)品中它的實(shí)用性卻非常低的。假設(shè)說我們今天需要做一個(gè)電商類的 app,設(shè)計(jì)目標(biāo)是希望能夠提升業(yè)務(wù)轉(zhuǎn)化以及購買效率,那么展示效率與功能分區(qū)就顯得尤為重要,它就更適合一個(gè)相對(duì)緊湊的卡片式為主的框架設(shè)計(jì)。

其次從微觀的角度來說,遍地就都是細(xì)節(jié)了。舒適度美學(xué)這一說,其實(shí)難免有些抽象,我們把它轉(zhuǎn)為相對(duì)合理一些的落地原理就會(huì)清晰很多,像大家熟知的間距 4 倍數(shù)原理、對(duì)齊原則等等。但是這些微觀的內(nèi)容不建議大家放到方案展示里,因?yàn)樗]有針對(duì)單個(gè)方案的特殊性,更像一種大眾共識(shí)。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

△ 多說無益,直接上最終的效果圖,方便大家參考

2. 具體容器解析

我們特地把單獨(dú)的容器部分拿出來解析,是因?yàn)樽远x容器是展示核心業(yè)務(wù)最主要思考呈現(xiàn),同時(shí)還可以配合運(yùn)營(yíng)做很多提升業(yè)務(wù)效率的配置。在做具體設(shè)計(jì)的時(shí)候,我們需要區(qū)分「端上固定」模塊和「運(yùn)營(yíng)配置」模塊之間的差別。

「端上固定」模塊

顧名思義就是開發(fā)端上需要寫死的模塊。寫死的模塊意味著,無論一個(gè)配圖還是一句文案,也只有開發(fā)童鞋修改后通過發(fā)版才能實(shí)現(xiàn)內(nèi)容變更。一般適用于相對(duì)固定的產(chǎn)品功能以及 UGC 用戶生產(chǎn)內(nèi)容。比如:拉勾上傳簡(jiǎn)歷功能、斗魚的直播間列表。

「運(yùn)營(yíng)配置」模塊

相對(duì)「端上固定」,「運(yùn)營(yíng)配置」就不需要跟著發(fā)版,可以隨時(shí)后臺(tái)上傳替換模塊內(nèi)的內(nèi)容,適用于需要 PGC 生產(chǎn)的內(nèi)容。說到這里很多童鞋可能馬上就聯(lián)想到 banner,彈窗的運(yùn)營(yíng)位了,但其實(shí)除了這些之外還有很多容器模塊是需要靈活配置為「運(yùn)營(yíng)配置」模塊才能更有效地提升運(yùn)營(yíng)業(yè)務(wù)價(jià)值。

我們可以這樣來區(qū)分「運(yùn)營(yíng)配置」模塊類型。

一種是純運(yùn)營(yíng)配置模塊,即設(shè)計(jì)與開發(fā)輸出框架、定好配置字段限制之后,運(yùn)營(yíng)可以獨(dú)立完成后臺(tái)配置的。比如:資訊 app 0-1 前期的資訊列表內(nèi)容。

另一種是運(yùn)營(yíng)設(shè)計(jì)配合模塊,即需要設(shè)計(jì)配合運(yùn)營(yíng)輸出一定的設(shè)計(jì)圖才可以進(jìn)行后臺(tái)配置的。比如:常見的 banner、彈窗、熱門推薦專題等。

在 0-1 的設(shè)計(jì)方案中,更推薦大家展示「運(yùn)營(yíng)配置」模塊的內(nèi)容與解析,因?yàn)?0-1 是個(gè)以拉新為主的階段,運(yùn)營(yíng)顯得尤為重要,所以我們的設(shè)計(jì)需要側(cè)重考慮整體的運(yùn)營(yíng)效率與轉(zhuǎn)化。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

如何展示亮點(diǎn)設(shè)計(jì)?

在我們概述完大部分的整體思考路徑與設(shè)計(jì)方案后,我們需要由面到點(diǎn),從全局提煉細(xì)節(jié),突出自己的設(shè)計(jì)方案亮點(diǎn)。

而如何提煉這個(gè)亮點(diǎn)呢?是挑一個(gè)我設(shè)計(jì)的最好看的界面呢?還是直接放最復(fù)雜的那個(gè)流程?以下是推薦選擇的亮點(diǎn)設(shè)計(jì):

1. 完成理論實(shí)踐,并可以量化價(jià)值的設(shè)計(jì)case

大家應(yīng)該都了解,一些和設(shè)計(jì)息息相關(guān)的數(shù)據(jù) UV/PV/GMV/ 相關(guān)業(yè)務(wù)指標(biāo)等,以及一系列在實(shí)踐中很好應(yīng)用來解釋設(shè)計(jì)方案的理論支撐比如 5W1H、GSM 與五度分析……這些數(shù)據(jù)和理論是支撐我們?cè)O(shè)計(jì)更飽滿更有說服力的重要支點(diǎn)。

雖然在 0-1 的項(xiàng)目里,我們基本不太用得上優(yōu)化數(shù)據(jù)比對(duì)(因?yàn)楫a(chǎn)品初期用戶數(shù)量少,產(chǎn)品體驗(yàn)路徑也是一直處于不斷試錯(cuò)階段),但是我們還是可以借用上文所述的一些方法論或者 A/B test 來完成我們的方案思考過程展示。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

那些你在完成踐行設(shè)計(jì)策略完成設(shè)計(jì)目標(biāo)時(shí)獲得的數(shù)據(jù)指標(biāo)要提前預(yù)知,養(yǎng)成習(xí)慣之后,你就可以快速輕松地察覺到哪里有可以做 A/B test、進(jìn)行埋點(diǎn)數(shù)據(jù)比對(duì)的地方了。

2. 影響上中下游環(huán)節(jié)的設(shè)計(jì)case

除了對(duì)業(yè)務(wù)提升價(jià)值的項(xiàng)目外,我們有時(shí)候也需要注意對(duì)品牌設(shè)計(jì)、產(chǎn)品、運(yùn)營(yíng)、技術(shù)等上中下游造成影響力的設(shè)計(jì)項(xiàng)目。通常這類設(shè)計(jì)大部分也都是設(shè)計(jì)自驅(qū)發(fā)起的,能起到提升各方人效和業(yè)務(wù)效率的作用。

舉例的話,我能馬上聯(lián)想到的就是多方協(xié)作的大型線上組件庫,可以參考阿里的 Ant design、滴滴的魔方,在之后的版本拓展中甚至可以延展成功能更加強(qiáng)大的多方協(xié)作 UX 設(shè)計(jì)資源中心。

從零到一系列:UX設(shè)計(jì)全方案思考與呈現(xiàn)

規(guī)范與組件庫的定義真的備受關(guān)注?

感覺近期面過的 80% 的公司都對(duì)組件庫的定義非常關(guān)注,所以我們要做的不僅僅只是放一個(gè)視覺規(guī)范或者組件庫的全景圖,而需要對(duì)組件庫進(jìn)行拆解。



文章來源:優(yōu)設(shè)(土撥鼠)   作者:Nana的設(shè)計(jì)錦囊



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


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

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


界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

純純

一.  什么是界面交互動(dòng)效?

界面交互動(dòng)效是展現(xiàn)界面間的轉(zhuǎn)換和界面內(nèi)元素變化的交互反饋。而效果就表現(xiàn)在觸發(fā)與結(jié)束的過程中,表現(xiàn)清晰的層級(jí)關(guān)系,自然的引出與結(jié)束。交互動(dòng)效有著承上啟下的重要作用。

二. 界面交互動(dòng)效是用來干什么的?

  • 讓用戶清晰地感受到當(dāng)前所處場(chǎng)景和層級(jí)關(guān)系。
  • 多種UI元素之間的相互轉(zhuǎn)換。
  • 給用戶制造驚喜感使用戶愉悅。

三. 界面交互動(dòng)效五大注意點(diǎn)

  • 避免動(dòng)效過于花哨、酷炫、標(biāo)新立。
  • 在效率型應(yīng)用中,過度、無意義的動(dòng)畫只會(huì)阻塞任務(wù)流程。
  • 動(dòng)作動(dòng)效不超過1秒。
  • 用戶專注內(nèi)容時(shí),不要用吸引注意的動(dòng)畫去打擾。
  • 出現(xiàn)頻率高的操作動(dòng)效,避免用戶反感,延遲操作時(shí)間。

四. 如何設(shè)置緩動(dòng)曲線與時(shí)間讓動(dòng)效更加自然,可以看下面的一些總結(jié)

  • linear曲線(勻速運(yùn)動(dòng))除了一些特殊場(chǎng)景如加載、很少被使用。
  • easeIn(先緩后快)使用場(chǎng)景較少,主要在掉落、中使用。
  • easeInOut(頭尾緩、中間快)通常在輪轉(zhuǎn)切換的動(dòng)畫中使用,這類動(dòng)畫的觸發(fā)對(duì)象與運(yùn)動(dòng)對(duì)象并不是同一個(gè)元素。
  • easeOut(先快后緩)最常見的效果,其觸發(fā)對(duì)象與運(yùn)動(dòng)對(duì)象往往是同一個(gè)。主要用在展開、收起、出現(xiàn)、移動(dòng)等動(dòng)畫中。當(dāng)不知道用哪個(gè)緩動(dòng)曲線時(shí),用這個(gè)一般不會(huì)錯(cuò)。
  • 曲度主要表現(xiàn)運(yùn)動(dòng)過程的力的大小,曲度越大,啟示力或阻力越大。
  • 回彈則表現(xiàn)的是運(yùn)動(dòng)的劇烈程度及對(duì)象的質(zhì)地。
  • 運(yùn)動(dòng)時(shí)間一般都控制在0.3s-0.8s之間,過長(zhǎng)的時(shí)間會(huì)讓人感覺拖沓,不自然。

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

五. 界面交互動(dòng)效如果以動(dòng)效的表現(xiàn)屬性來分可以分為兩種

第一種:為銜接類型動(dòng)畫

主要針對(duì)不同界面直接的銜接,為帶來更流暢的操作觀感所做的設(shè)計(jì),彌補(bǔ)兩個(gè)界面直接的差異所帶來的用戶感知落差。

第二種:特效類動(dòng)畫

特效的核心目的是為了吸引用戶的注意力,提高信息敏感度,在游戲界面設(shè)計(jì)當(dāng)中使用更為廣泛,能夠帶來更加絢麗的動(dòng)態(tài)畫面。

六.界面交互動(dòng)效如果以界面的維度來說可以分為以下兩類

第一類:界面內(nèi)的交互動(dòng)效

在一個(gè)界面內(nèi)的交互動(dòng)效特別多,例如點(diǎn)擊加號(hào)出現(xiàn)下拉菜單,出現(xiàn)浮層動(dòng)畫提示,點(diǎn)擊舵式導(dǎo)航出現(xiàn)選擇類型和遮罩,點(diǎn)擊按鈕出現(xiàn)評(píng)論點(diǎn)贊,當(dāng)前頁面的展開收起,加載等等。如下圖所示:

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

第二類:界面間的交互動(dòng)效

幾個(gè)界面之間的的交互動(dòng)效通常是平緩過渡到下一頁。常見的有以下幾類:

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

△ 硬切到下一頁

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

△ 下一頁從右往左推入(上一頁從左往右推出)

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

△  下一頁從下往上彈出

超全面!界面交互動(dòng)效核心知識(shí)的分類與總結(jié)

△  上一頁的元素過渡到下一頁

總結(jié):

  • 動(dòng)效創(chuàng)意方面的創(chuàng)新要依據(jù)用戶的認(rèn)知模型。單純很炫很酷的動(dòng)效如果脫離了用戶的認(rèn)知模型,那么這樣的交互動(dòng)效對(duì)于整個(gè)產(chǎn)品來說是有害的。
  • 做界面交互動(dòng)效的目的是為了更好地落地。如何更好地高效地表現(xiàn)我們?cè)O(shè)計(jì)的動(dòng)效。同時(shí)使得我們制作的動(dòng)效可以很好的運(yùn)用到實(shí)現(xiàn)落地中,這是很重要的,不然所有的一切都是海市蜃樓。
文章來源:優(yōu)設(shè)  作者:程遠(yuǎn)

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


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

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


超長(zhǎng)篇干貨!如何從交互維度量化用戶體驗(yàn)?

周周

這篇文章,和大家分享一些在產(chǎn)品和交互設(shè)計(jì)中的一些自己的方法。

日歷

鏈接

個(gè)人資料

存檔