<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          不為動而動!聊聊動態效果在體驗設計中的應用

          純純

          一、為什么動?

          首先,為什么要動?可能你會想到以下幾條理由:

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

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

          那么該如何衡量一個動效是否應該出現呢,我們認為有幾個考核標準:

          1. 這個動效是否會影響性能?

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

          例子:化身間諜

          不為動而動!聊聊動態效果在體驗設計中的應用

          比如這個例子,這是一個穿越情景的過場動畫,隨著年份的倒轉背景出現各個歷史大事件,給人以歷歷在目的感覺,設計師考慮到了多張圖片會出現卡頓的可能性,所以特意降低了每張圖的清晰度,因為內容本身就是老照片的風格,所以這種降低畫質的手法反而增強了畫面的真實感。

          2. 這個動效是否會提高產品的可用性?

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

          例子:翻頁提示

          不為動而動!聊聊動態效果在體驗設計中的應用

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

          3. 這個動效是否會給你的產品帶來獨特氣質?

          這里所說的氣質是動效本身會有助于增強用戶對于產品的認知和情緒帶入。一個相得益彰的動效會為你的產品錦上添花,深化你的主題和功能,注意,一定是與主題相關的,牽強的搭配只會叫人覺得莫名其妙,毫無意義。

          例子:人生四時

          不為動而動!聊聊動態效果在體驗設計中的應用

          再看這個例子,人生四時,四根火柴依次燃燒,慢慢燃盡,這種油盡燈枯的感覺很切合的體現了產品生老病死的主題。

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

          所以,合理的動效不應是花拳繡腿,而應該是解決問題的手段。

          二、哪里動?

          好,我們再看看哪里需要動效,這里舉幾個例子:

          1. 加載

          首先是出現在加載環境,不管是網頁還是H5都不可避免的會出現讓用戶等待的情況,在等待的過程中為了讓用戶知道他的手機沒有死機以及網絡是通暢的,我們應該在這個時候加入一些與主題相關的動效來提醒他內容正在加載中。

          例子:化身間諜H5 loading

          不為動而動!聊聊動態效果在體驗設計中的應用

          這是一個穿越類的H5,所以設計師在設計loading的時候選用了蟲洞的理念,與內容本身緊密貼合。

          2. 轉場

          第二個情景是轉場。具有意義的轉場會降低產品割裂感,我們看兩個例子就明白了。

          例子:QQ會員觀影特權

          不為動而動!聊聊動態效果在體驗設計中的應用

          不為動而動!聊聊動態效果在體驗設計中的應用

          這個例子里元素在默認狀態下會做上下浮動的效果,當我們滑動時候,元素很自然的做了一個出場入場的效果。很自然,沒有割裂感。對吧?

          3. 頁面元素的互動

          也可以為網頁元素增加一些必要的動效。

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

          不為動而動!聊聊動態效果在體驗設計中的應用

          看下好聲音的專題頁面,在網頁上的能夠點擊的按鈕或者文字鏈,在鼠標經過時都有點變化,這個十分必要。因為表面上的變化會給用戶一種心理暗示,那就是點擊后也會有變化。

          4. 心理需要

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

          例子:一封家書

          不為動而動!聊聊動態效果在體驗設計中的應用

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

          三、怎么動?

          好,說完哪里動,我們現在看看怎么動。

          1. 基于真實形態的模擬

          基于真實的動畫會叫人看起來自然流暢,符合規律,比如物體運動時的加速度現象。

          例子:Look

          不為動而動!聊聊動態效果在體驗設計中的應用

          注意看這個筆畫的動勢,是有快有慢的,模擬了寫字時起筆收筆的那種節奏感,所以看起來是自然真實的。

          2. 人物動作夸張化

          在H5的設計中,經常會出現各種各樣的人物形象,夸張的人物動作會生動你的形象,增加趣味性,給用戶以驚喜。

          例子:巴菲特這一年

          不為動而動!聊聊動態效果在體驗設計中的應用

          巴菲特老爺爺,動作很親切。

          3. 給元素賦予彈性

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

          例子:拍個大頭鬼

          不為動而動!聊聊動態效果在體驗設計中的應用

          三個小鬼一跳一跳,彈性賦予了他們頑強的生命力。

          4. 蒙太奇

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

          例子:傳奇硬箱

          不為動而動!聊聊動態效果在體驗設計中的應用

          炫酷了,節奏很快,提氣!

          好,以上只是一些基本的動效手法,在實際的應用中其實有很多手段,在這里我建議大家可以去看看迪士尼和皮克斯的動畫,應為動畫本身是一種對于動作行為高度概括的手段。雖然這些都是電影,但是他們使用的手段和遵循的理念是非常值得我們去學習和借鑒的。注意觀察這些大牛們的作品,你會發現他們的作品中充滿了走心的細節。

          四、結語:

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

          所以,對于動效這樣一個非常強勢的工具,一定要用在希望用戶注意的部分,并且認真打磨。真正做到“不為動而動”。



          文章來源:優設   作者:程遠


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

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

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

          純純

          最初的圖形界面

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

          絕對專業!超全面的UI界面字體選取與使用指南

          早期的Alto 在80年代進化為著名的施樂之星,而施樂的這個設計方案也成為了第一個商用的操作系統圖形化界面。

          絕對專業!超全面的UI界面字體選取與使用指南

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

          絕對專業!超全面的UI界面字體選取與使用指南

          Macintosh 的發布不僅僅意味著相對成熟的GUI的出現,而且它為大眾帶來了真正意義上的自定義字體的功能。這款系統內置了許多以著名城市命名的字體,也正是在此之后才有越來越多的著名字體的數字版本在數字平臺上發布并應用。

          絕對專業!超全面的UI界面字體選取與使用指南

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

          文本即界面

          界面中的每一個文字、每一個字符都很重要。好的文本是好的設計。文本是最根本的界面,是我們設計師來塑造和打磨這些信息。

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

          絕對專業!超全面的UI界面字體選取與使用指南

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

          文本的清晰度同樣扮演著關鍵性的角色。如果我們的大腦花費一兩秒鐘單純只是分辨一個字形,那么清晰度上的微小差異是無傷大雅的??墒钱斔鼈兘M合成為大段的文本,不同的字母組合構成不同的詞匯、段落的時候,清晰度的影響就更大了,排版的重要性也顯得更加明顯了。

          當然,影響界面設計的文本屬性還有很多,比如平衡性,定位和層次結構,但是好的文案和排版的影響至少占據整體影響的95%。

          在偉大的設計師眼里,文本不僅承載內容,而且可以構成界面。
          – Oliver Reichenstein

          我們如何閱讀

          既然屏幕上的文本顯示是如此的重要,那么我們應當先了解人們是如何閱讀的,而文本顯示又是如何影響我們設計決策的。

          讀過Billy Whited 的文章《Setting Type for User Interface》之后,讓我對于文本閱讀的效率有了更深的認知。一個少于20個字母的獨立單詞放在句子中會更快被理解,而單獨放置的時候我們需要耗費更長的時間來識別。

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

          絕對專業!超全面的UI界面字體選取與使用指南

          掃視讓我們的閱讀能力更強,我們甚至會跳過短的功能性詞匯。

          我們應當記住這一關鍵特征,因為我們的界面中所承載的詞匯大多是孤立的單詞。簡單說來,界面是無法利用掃視這種方式來獲取信息的。

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

          絕對專業!超全面的UI界面字體選取與使用指南

          過去,人們常常認為眼睛和大腦是通過單詞的外輪廓(Bouma Shape)來識別單詞,當然,后來的研究證明這個想法是錯的,單詞的可讀性和易讀性的影響因素不止是外輪廓,字母本身的形態、細節和清晰度同樣深入的影響著它的識別度。

          是什么讓字母清晰可讀?

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

          早在2008年,維多利亞大學心理學系根據測試結果得出結論,大寫和小寫的拉丁文字母是最容易識別的,也最易于閱讀。

          絕對專業!超全面的UI界面字體選取與使用指南

          這項研究有趣的地方在于,它揭示了一個事實:每個字母延伸出來的線性端點是最易于識別的地方,也是每個字母的特點所在。

          絕對專業!超全面的UI界面字體選取與使用指南

          上面的圖片標識出了這些最易于識別的部分。每一款字體在這些部分應當設計為最通用、最為人所熟悉的樣式,同樣的,它們也應該強調每個字母的差異。

          在2010年的時候,另一項由 Sofie Beier 和 Kevin Larson 開啟了一個新的研究項目,這項研究專注于測試經常被誤讀的字母和字符的識別度。

          絕對專業!超全面的UI界面字體選取與使用指南

          這項研究表明,在相同的字體和相同的尺寸、相同字重的情況下,有些字體或者變體的細節確實比其他的更加清晰、更易于識別。這項研究的結果說明,纖細的字體加粗之后識別度效果會明顯會增強,而字母的X高度如果能夠占據上伸區或者下探區的空間,識別度會更好。

          絕對專業!超全面的UI界面字體選取與使用指南

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

          UI中的字體使用

          理解了用戶閱讀的方式和字體可讀性的影響因素之后,我們應當開始了解UI中的字體的幾個關鍵因素。下面是UI中字體使用的10個關鍵因素。

          1、可讀性

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

          絕對專業!超全面的UI界面字體選取與使用指南

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

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

          絕對專業!超全面的UI界面字體選取與使用指南

          2、適度

          一款理想的UI界面所用的字體,不應當過于“顯眼”,而該是悄無聲息,“隱型”的。當用戶在試圖完成某項任務的時候,字體不應當給用戶以“出戲”或者“顯眼”的感覺,也就是說,字體不應當超出用戶的認知負荷,而內容和信息才應該成為真正的關注點。

          絕對專業!超全面的UI界面字體選取與使用指南

          3、靈活

          給UI界面使用的字體應當具有靈活性。我們曾經為 Medium 做過用戶體驗設計,作為一個網頁博客平臺,我們很難去控制用戶的能力、內容、瀏覽器、屏幕尺寸、網絡帶寬和連接速度,包括輸入法。

          所以我們最終為它所選取的字體應當支持大量不同的內容,在不同的尺寸下擁有良好的識別度,能夠兼容不同的設備,尤其是在小屏幕上。Sans serifs 字體就是專門為小尺寸低分辨率屏幕而定制的。

          絕對專業!超全面的UI界面字體選取與使用指南

          4、x高度的上限

          x高度的參考標準是小寫字母x的高度,同等尺寸下,x高度更大的字體更易于識別。不過x高度也不是越大越好,當x高度超過一定限度的時候,小寫字母n和小寫字母h就很難分辨了,這一點應當注意。

          絕對專業!超全面的UI界面字體選取與使用指南

          5、更大寬高比

          字母的寬度和高度的比例也是相當重要的一個屬性。寬度和高度比例越高,字母在小屏幕上的識別度就越高。

          絕對專業!超全面的UI界面字體選取與使用指南

          6、寬松的字間距

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

          不過字間距不是越寬松越好,太過寬松會讓整個單詞看起來過于松散。有一個值得參考的標準,就是字母之間的間距應當比字母內的開口縫隙略小一點。

          絕對專業!超全面的UI界面字體選取與使用指南

          7、低筆觸對比度

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

          絕對專業!超全面的UI界面字體選取與使用指南

          8、OpenType 功能

          OpenType 功能對于字體而言是相當重要的。支持OpenType的字體擁有更大的靈活性,對于不同的語言和特殊的字符有著更為優良的兼容性。

          絕對專業!超全面的UI界面字體選取與使用指南

          9、備用字體

          接下來要說的情況可能大家多少都碰到過。網頁在完全加載出來之前,部分內容因為字體沒有加載而無法顯示。

          絕對專業!超全面的UI界面字體選取與使用指南

          其實這可以通過先加載本地字體,顯示內容,等網頁字體加載好了之后再行替換,以達到無阻塞顯示。這種方法的缺陷是需要預先設定一個可調用的本地備用字體。

          絕對專業!超全面的UI界面字體選取與使用指南

          10、Hinting

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

          這項技術最初是由蘋果公司所提出的,不過因為TrueType 字體技術的出現,Hinting 正在消失。

          絕對專業!超全面的UI界面字體選取與使用指南

          未來

          隨著新的UI標準、排版技術的提升,字體技術也在不斷的進步,在不遠的未來,字體會從傳感器獲得信息,更好的兼容不同的環境、隨著亮度、設備、距離而進行智能化的調整,甚至復雜而龐大的中文字體,也可能作為靈活的網頁字體而存在。

          絕對專業!超全面的UI界面字體選取與使用指南

          字體會讓我們的工作更加便捷

          絕對專業!超全面的UI界面字體選取與使用指南

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

          絕對專業!超全面的UI界面字體選取與使用指南

          讓UI更加易用

          絕對專業!超全面的UI界面字體選取與使用指南

          更加便捷

          絕對專業!超全面的UI界面字體選取與使用指南

          也更加清晰而高效





          文章來源:優設  作者:陳子木

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


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

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

          數字金融產品的安全感設計探究

          ui設計分享達人

          當互聯網不斷的深入到我們的生活中,我們對安全感的需求也延續到了互聯網使用中,特別體現于互聯網金融產品。由于其具有風險性、收益性、流動性等特點,用戶對于資產安全的掌控感更為關注,產品使用體驗欠佳也直接影響客戶安全感。


          以下將基于自身工作總結和行業經驗,聚焦互聯網金融產品分享和總結如何向用戶營造安全感。


          目錄:

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

          二、如何傳達出安全感?

          三、怎樣體現出安全感?




          需要什么樣的安全感?


          安全感是人類最底層的需求,但不同類用戶群體需要的安全感也各有千秋,我們參考第一財經商業數據中心×螞蟻財富的2019線上理財人群報告,將線上理財的人群分為四類:

          分別是初入職場的95后、職場新興力量的90后、理財中堅力量的80后和經歷風雨的70后。其中近一年的新增移動互聯網基民中超五層為90后、95后,成為金融移動互聯網的中堅力量。


          這類型的投資者由于具有碎片化處理事務的習慣和金融知識不足、理財經驗不豐富、資金的抗風險能力不高的特點,當市場普遍行情下跌時,更容易產生焦慮的情緒而導致“割韭菜”,進而可能會影響到卸載APP的行為。根據Mob研究院的數據顯示,在2021年3月天天基金日均卸載用戶規模為前兩個月的6倍,而當時對應的市場行情正為基金普遍大跌。

          因此從安全感的需求上他們更側重高效的信息降維、足夠的理財產品的風險提示、合理的預期收益宣傳以及投后虧損及時的內容陪伴


          而根據騰訊理財通×國家金融與發展實驗室出品的2021年互聯網理財行為與安全研究報告顯示,理財知識更充足,理財經驗更豐富的80后、70后在安全感的維護上則更關注理財產品的信息披露風險、信息不透明風險、市場政策風險、個人信息泄露風險此類問題。




          如何傳達出安全感?


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

          這三個層次作為人類大腦的運作的規律,映射到設計當中,同樣是可供遵循、值得探究的。



          本能層

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


          而金融產品中,常用藍、綠等冷色調的色彩,給人以冷靜,穩定的感覺,表現金融產品的科技感和可靠性;常用紅、黃、橙等暖色調,代表著熱情、溫暖與責任。


          行為層

          是人類身體日常行為的運作,行為層的設計與產品使用過程中的愉悅感和效率有關。好的行為層設計對應產品功能傳達、易學性與易用性,以及正面的心情感受。在界面設計當中,主要設計對象是交互設計。(將在下文通過投資場景詳細分析)



          反思層

          超越了本能層和行為層,存在意識和更高級的感覺、情緒及知覺。對應的是產品的情感溫度,主要的設計對象是正向情感的結果反饋以及品牌信任。


          良好的企業品牌形象和口碑很大程度上會給用戶帶來認知上的安全感。用戶在初次選擇購買金融產品時,往往強大的品牌背書起到了關鍵作用,即使是同一只基金,用戶也會選擇在自己信賴的平臺里購買。

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


          另一種常見于一些平臺利用強大的背書以及所獲的成就,清晰地向用戶展示可以提供的保障權益,責任條款及資質介紹等來傳達企業對用戶負責的態度,提升用戶對產品乃至對企業的信任感:




          如何體現出安全感?


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



          投資前

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


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

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


          投資中

          當投資者已經選擇好信任的理財產品時,在產品交易的各個界面也需要關注交易流程中安全感的反饋。

          其中包括正向反饋和負向反饋。正向反饋是指用戶跟產品發生正確的交互時,系統給予用戶的正確引導,可以幫助用戶打消顧慮,建立信心,讓用戶感受到一切都在順利地進行著,這對那些在設備操作方面缺乏信心的用戶來說尤為重要,用戶不會對自己的操作或對平臺產生質疑,如:專屬的密碼輸入鍵盤、正向反饋如金額輸入時的金額提示、特別提出易誤解的交易規則等


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

          引起思考:

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



          投資后

          產品交易成功后,投資者的關注會更集中于自己的資產的變化,產品的未來走勢等,因此在安全感的提供上,需要向投資者傳達準確的交易狀態、資產狀態、資產的保護等,甚至可以在產品購買的完成頁設置快捷加入自選和漲跌提醒等

          引起思考:

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


          另一方面的更需要考慮當基金產品存在虧損時,及時向投資者傳達情感陪伴和合理的投資交易,以促進投資者優化持倉或保持中長期持有,避免頻繁的短期交易而導致不良的盈利體驗。

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

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


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

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


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

          純純

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

          1. 社交分享
          2. 通知
          3. 彈窗
          4. 內容更新
          5. 用戶互動(滑動、點擊等)

          一、社交登陸

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

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

          用戶可以直接登陸自己的社交網絡賬號(Facebook、Twitter或者Google等),無需另外創建一個以后不太可能繼續使用的賬戶,這樣可以大大提高注冊效率。除此之外,這一設計模式還有下列好處:

          • 使用現有社交網絡賬號登陸用戶就不用再多記一套用戶名密碼了。
          • 用戶無需被迫在自己剛剛下載還不熟悉如何使用的應用中輸入信息,從而簡化注冊流程。
          • 讓用戶通過現有社交網絡賬號注冊也許能讓你獲得一些有關他們的基本資料。這樣你就能更加有效的根據用戶的實際需求調整應用。

          注:在國內這一設計演變成了:您可以使用QQ/微博合作帳號登錄,然后給你綁定,繼續回到注冊界面  – –

          二、通知

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

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

          很多知名公司的移動應用采用了下列幾種不同的方法實施其通知設計:

          • LinkedIn在有更新內容的標簽上放置標有數字的徽標。
          • Twitter則在時間軸圖標頂部放置一個小點指示有新活動。
          • Facebook使用一個會在應用內垂下的彈出條幅顯示新鮮事推送中的新內容通知。

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

          通知欄該怎么設計,具體方法右戳學習:《怕打擾用戶?來看看怎樣設計通知欄不會討人厭》

          三、彈窗和層疊窗口

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

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

          下面是一些彈窗設計模式幫助解決問題的案例:

          • 在用戶在應用中執行特定操作或達到特定時點時彈出并顯示與特定操作或場景相關的信息/控制方法。
          • 應用中原來的內容或場景仍然在背景中顯示,但彈窗可以讓用戶選擇是否要了解接下來要出現的內容。
          • 彈窗可以吸引用戶的注意力并在必要時提供重要通知。在使用完成后,用戶可以點擊或滑動屏關閉彈窗返回先前活動狀態。

          四、下拉刷新

          在習慣了使用Facebook、Twitter或Google等社交網站后,我們都會很自然的使用下拉手勢進行內容更新。第一個使用這個設計模式的公司是Apple,在此之后這一設計就廣為流行開來了。

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

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

          五、用戶交互(滑動、點擊等)

          除了下拉刷新手勢外,滑動也是智能手機上最為常用的手勢之一。很多應用都允許用戶在文章上左右滑動來了解詳細信息或執行其他操作。與依賴于點擊鼠標的傳統web應用相比,這一方法充滿創新意義。

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

          在Android和iOS上有大量采用了滑動、點擊及其他特定用戶交互方式的移動應用,你可以在自己的項目過程中予以參考。每個應用對于自己的用戶來說都有不同的意義和價值。你應當在畫線框圖的過程中做好規劃再投入設計或開發流程。在測試過程中花點時間思考用戶的反饋、建議和批評。



          文章來源:優設   作者:程遠



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


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

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

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          純純

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

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          而這些手機都有一個共同的特點,就是屏幕尺寸越來越大。屏幕尺寸變大后,手握手機的方式和界面交互操作方式也隨之改變,那對于設計而言,是否也應該隨之進行改變呢?

          拇指的操作范圍

          想單手點擊屏幕的操作,需要手足夠靈活進行一輪操作才能夠到屏幕上方,過程中稍有不慎,手機隨時會砸地上。作者的手機屏幕已經修了幾次,差不多趕上一臺二手機的價格了。

          在 2013 年,國外設計師 Steven Hoober 發表了一篇《手機界面設計》的研究報告中,對一千三百名手機使用者進行量化研究數據:

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

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

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          然而這份研究報告的數據是在 2013 年發布,當時還沒有全面屏的出現,如果把上面研究結論的區域,套用到如今的手機屏幕尺寸上,頂部的紅色區域會占更大比例。以 iPhone 11 尺寸比例作為參考,如下圖:

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          拇指可操作范圍大約在 3 分之 2 的區域,可見想要觸碰到紅色區域是有一定難度的。也正是因為這份報告只適合當時的手機市場情況,在當今已經不適用了,因此需要重新去考慮如何為大屏幕手機進行界面設計

          為拇指區域設計

          根據 2020 年手機UX設計趨勢,大屏幕設計將會成為熱點。根據數據報告中有說明,2018 年 10 月使用大屏手機的用戶比例是16.3%,到 2019 年 12 月,該數據已經上升到 41%,并且會在未來更多新機型的出現中持續上漲。

          那隨著大屏幕手機的普及,就意味著設計師在設計界面的時候,要為大屏幕手機的使用場景進行界面調整,避免用戶難以使用的體驗問題。以下是我整理的一些設計建議方案:

          1. 頭部區域設計更高

          通過將標題欄的信息區域放大,盡量把主要操作內容向拇指區域靠近。

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          2. 常用導航與操作居于底部

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

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          3. 手勢操作頁面切換與返回

          抖音和 Instagram story 等短視頻應用界面都是通過手勢滑動屏幕的方式,對頁面進行切換,操作的學習成本很低,而且主要操作也在屏幕底部。這種操作方式也會在今年越來越多地被使用。

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          4. 提示彈窗從底部升起

          常用的彈窗,很多是設計在屏幕中間彈出,為了適配大屏幕,不妨嘗試從底部彈出,關鍵選項都能輕松選擇,提高轉化率。

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          5. 使用大卡片

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

          手機屏幕越來越大,UX設計師面臨哪些挑戰?

          除此以外,作為手機廠商,在發布大屏幕手機的時候,就有對界面操作做了一些對應系統級的設計調整,比如界面下拉懸停,鍵盤單手模式,屏幕邊緣滑動返回等等。

          總結

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

          文章來源:優設   作者:布萊恩臣

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


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

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


          從零開始設計產品的 10 個 UI/UX 啟示

          純純

          Peter Drucker 說過:「量化才能管理。」這個格言后來成為了我的信條。我決定將我的目標量化,將它分解成為最基礎的習慣來執行,并且以每天一定量的執行,來實現最終的目標。

          從零開始設計產品的 10 個 UI/UX 啟示

          我們先構建了一個免費的 Chrome 插件 Confetti ,這是一個能夠幫你追蹤日常習慣的工具,每次完成一個任務,都會有五彩繽紛的紙屑效果出現,祝賀你守住了習慣,達成目標。

          從零開始設計產品的 10 個 UI/UX 啟示

          以下見解希望對你有所幫助!

          1、一開始就要界定好產品特性

          從零開始設計產品的 10 個 UI/UX 啟示

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

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

          我們基于這一點,我們開始抓住核心功能,盡可能讓它們足夠易用,強化核心特性。通過確定核心功能的優先級,并且確定發布日期,借此緩解我們的精神壓力,確定我們不會被成堆的功能所淹沒。這也似地我們有足夠的動力解決核心功能。

          2、有很多流程和狀態需要搞定

          從零開始設計產品的 10 個 UI/UX 啟示

          在設計產品的時候,我經常被提醒要處理好每一個邊緣情況,填好每一個坑,確保體驗的順暢。從零開始構建產品是一把雙刃劍:基于自己的構想來創造產品是令人興奮的,但是相應的,我需要經常在舒適區以外處理問題。

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

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

          1. 輸入 Email
          2. 重新發送 Email
          3. Email 通知設計
          4. 輸入新的密碼
          5. 錯誤界面
          6. 成功界面

          這個過程中,有很多東西都令我一度感到迷惑,這也引發出我下一個要說的要點……

          3、創建用戶流程

          從零開始設計產品的 10 個 UI/UX 啟示

          項目開始之后,我很快就遭遇了組織架構問題。因為我是在工作之余來創建這個產品,這導致我犯了一個非常嚴重的錯誤:我沒有按照傳統的產品流程來創建產品,這隨后導致了一系列的問題。

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

          最終我停止了這種隨性的設計方式,并且在 Whimsical 當中創建了完整的用戶流程。于是我很快清楚了那些環節有所缺失,以及整個界面流程的走向。

          按照用戶流程來梳理界面的時候,可以對于整個產品的屏幕狀態有所了解,并且隨著產品的發展膨脹,用戶流程的重要性會隨之增長,成為至關重要的部分。

          4、交互應該反饋到UI中

          從零開始設計產品的 10 個 UI/UX 啟示

          的確,在完成整個 UI 之前,不應該開始向著項目當中添加動畫。但是,不添加并不意味著你無需考慮。實際上,不同的微交互和動畫對于實際的體驗影響是巨大的。你在思考 UI 設計的時候,就應該考慮到微交互和動畫的使用,避免在后續動效和交互落地的時候,進行不必要的修改。

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

          我認為,將 UI 和交互結合起來考慮是非常重要的,因為兩者共通塑造了體驗。如果在設計 UI 的環節直接加動效,會讓整個設計過程變得復雜臃腫。

          5、盡早獲得反饋

          從零開始設計產品的 10 個 UI/UX 啟示

          其實這也是我在這個項目中犯的一個大錯:等了太長時間才獲得反饋。

          我通常是在晚上回家和周末才有空推進這個項目,在很長的一段時間內,我沒有真正告訴任何人。

          當我終于同我的家人、朋友、用戶以及網上樂于嘗鮮的用戶公布了這一產品之后,他們在使用過程中,開始注意到了很多細節上顯而易見、但是我并沒有發現的問題。我意識到我作為產品的設計者,是很容易陷入并沉迷用戶體驗當中比較孤立的一部分,反而會忽略很多顯著的問題。

          回想一下,如果我能盡早向用戶和朋友展示設計和原型,那么我會在更早的時候發現問題,并且在獲得反饋之后才進入開發階段,彌補大量的損失。

          6、在別處獲得啟發很重要

          從零開始設計產品的 10 個 UI/UX 啟示

          很多設計師會認為,所有的想法都必須是原創的才行,否則就是欺詐。但是稍微想想,其實徹底的原創其實很少的。當你看到一個優秀的產品,它優秀的配色和恰到好處的交互可能會讓你覺得:「已經有人做出來了,我的想法在它面前完全沒法比擬。」

          這種思維方式其實有著極大的缺陷,并且抑制了你的創造力。

          當我發現我的設計有缺陷的時候,我會竭盡全力去搜索和了解更多網上已有的設計。我會觀察和思考別的公司和產品是如何設計新用戶引導流程的,如何管理用戶個人信息的。我從來都沒有復制被人的體驗,但是會隔三差五去鉆研別人所創造出來的優秀細節,然后將這些細節借鑒到我的設計當中。

          我最喜歡的一個范例,是從模態狀態下,旋轉退出的效果。這是我偶然在一個網站上看到的效果,因此我決定將它添加到 Confetti 當中,我還在著陸頁的按鈕中加入了類似的特效。

          事實上,一切設計都是混搭創造出來的。你借鑒細節并不意味著抄襲,不要害怕去發掘和學習別人的優勢和亮點,你要學會有機地拆解和借鑒,靈活地運用到自己的設計當中,它就像調制雞尾酒一樣有趣。

          7、勇敢面對身份的變換

          從零開始設計產品的 10 個 UI/UX 啟示

          當我們開始設計的產品的時候,我和 Wilson 頭頂上的身份就一直在變。我們是 UI設計師,要負責UX,要做交互,也制作動效,要進行平面設計,還要考慮市場營銷,要管理產品,我們也要扮演其他的角色。

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

          專注于自己專業的領域,其他不專業的方面來尋求外部幫助是非常合理的。比如在一個項目當中,一位藝術家負責了絕大多數的風景插畫,另一位藝術家則完成了肖像畫的部分,這很正常。

          我希望產品的外觀和功能能夠保持高度的一致性,并且我確實做到了。但是不要誤會我的意思,我并非是不敢走出舒適區去學習代碼開發,而是在這樣的項目當中,我并不適合從UI和UX領域延伸出去,畢竟完成項目的開發優先級比學習代碼更高。

          8、保持簡單更重要

          從零開始設計產品的 10 個 UI/UX 啟示

          盡管給 MVP 安排好了發布時間,可以防止這個項目被無限膨脹的功能特性和工作量所淹沒,但是這樣依然無法防止我們基于已有的功能進行改進。

          很多人都喜歡 Reid Hoffman 的一句話:「如果你對于產品的第一版感覺不尷尬,那你一定是發布晚了?!共贿^,我們正式發布的第一版的產品,并不會顯得太尷尬,但是目前來看,當時那種簡單直觀的狀態,比起再花費好幾個月時間反復打磨之后再發布,來得更好。

          在發布新產品之前,我們必須考慮2個問題:

          1. 我們是否相信我們所構建的產品,能夠為用戶帶來價值?
          2. 我們是否竭盡全力了?

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

          9、良好的交接更加省事省時

          從零開始設計產品的 10 個 UI/UX 啟示

          從項目一開始我就一直在做項目的管理和組織設計素材,以便后面進行開發。不過,由于我一開始就使用了 Zeplin 這樣的協同工具,確保了我可以輕松地將所有的素材都順暢地交給負責開發的 Wilson。作為一款設計系統工具,Zeplin 讓我無需浪費時間對素材進行分類,非常便捷。

          在交接的過程中,我還做了一些優化:

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

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

          從零開始設計產品的 10 個 UI/UX 啟示

          在設計 UI 的時候,界面中的文案部分是臨時編寫的,這促使了一次設計完成之后,整體的文案是不一致、不協調的。

          我很希望一開始就創建了一個單獨的文檔,一次性將文案部分全部重寫,包括提醒、注釋、標簽、彈出框提醒等等。而實際上,我的文案都是在設計 UI 的時候附帶著寫下來的,導致整體的一致性嚴重缺乏。

          這種文案本身在調性上的缺乏,導致了整個產品在語氣和用詞上是混搭式的,一致性很差。

          所以,在產品上線發布之后,一直在對文案進行修修補補。



          文章來源:優設(陳子木)   作者:Danny Sapio





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


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

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


          語音用戶界面設計 - 對話式體驗設計原則

          博博

          文章包括三部分:1.智能語音對話系統;2.了解 VUI 相關知識;3.語音用戶界面基本設計原則。

          最近在閱讀關于智能語音方面的書籍,將最近零零碎碎的筆記重新整理了一番,希望能讓讀者更加快捷、高效的認識智能語音方面的基礎知識點。



          智能語音對話系統


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





          1、語音和語言有何區別?


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


          語音是語言的信號載體,語音是人的發音器官發出的,承載一定的語言意義,而語言才承載人類的智慧。通俗的講,語音是天生就存在的,嬰兒剛出生的哭喊聲也算是語音。它是人的發音器官發出具有一定社會意義的聲音。其物理基礎主要有音高、音強、音長、音色四要素構成。而語言則是需要學習不斷進化的。在智能語音中,我們需要考慮的是如何確保在復雜的現實環境下,把干擾信息過濾,獲取到準確的信息。




          2、語音界面之間的關聯



          喚醒:Amazon Echo 和 Google Home 之類的語音驅動設備不斷地在等待喚醒詞(“Alexa ...”或“OK,Google ...”)從而進入喚醒狀態。


          反饋:一旦喚醒,設備會將隨后接收到的音頻發送到云端的AI平臺。 該平臺使用自動語音識別(ASR)和自然語言理解(NLU)的組合來識別用戶的意圖并將其發送到支持應用程序。 


          回復:應用程序處理請求并通過文本進行響應(如果支持則提供可視化信息)。該平臺將文本轉換為語音并通過設備播放。




          3、對話系統概述


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



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


          自動語音識別(ASR) — 通過聲學模型和語言模型,將人的語音識別為文本的技術

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


          對話狀態跟蹤(DST) — 根據所有對話歷史信息推斷當前對話狀態St和用戶目標

          對話策略學習(DPL) — 基于當前狀態生成下一步操作

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

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




          4、語音交互設計需要遵循什么原則?


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


          質的準則:說真實信息,做不到的話不要說。

          舉例:對用戶說:“有什么可以幫您的嗎?”,而實際上整個 VUI 系統僅僅能提供查詢話費余額。


          量的準則:保持對話交流簡潔,減少認知負荷。

          解釋:刪除多余的措辭。比如“請您注意聽,因為我們的選項可能已經變了”。


          相關準則:所說的話需與當前對話有關,不干擾當前任務進行。

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


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

          解釋:不要使用讓用戶難以理解的「專業術語」。







          了解 VUI 相關知識


          語音交互界面(VUI)指的是為用戶提供可進行語音交互的計算機平臺,它能夠實現自動化的服務并且提供完整的相關流程。而設計 VUI 的時候,設計師需要側重于用戶的語音交互過程,并設計出相應的語音應用系統。由于 VUI 是面向用戶的交互界面,因此滿足用戶的實際需求是至關重要的。




          1、語音用戶界面 VUI 簡史


          20世紀50年代:貝爾實驗室建立了一個單人語音數字識別系統。


          20世紀60、70年代:語音數字系統的這項研究仍在不斷拓展可識別的詞匯,并且致力于實現“連續語音”的識別。


          20世紀80年代:技術進步讓語音識別更具實用性,使日常語音的識別成為可能。


          20世紀90年代:誕生了第一個可行的非特定人的語音識別系統。簡稱 IVR


          21世紀初期,IVR 系統成為了主流,任何人都可以通過一個普通的固定電話和語音進行股票詢價、機票預定、銀行轉賬、處方藥品預定、本地電影排片查詢以及收聽交通信息等。




          2、那什么是 IVR 系統?


          交互模式的語音應答,簡稱為 IVR。我們后續簡稱為:交互式語音應答(IVR)系統


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


          IVR,即語音增值業務,是移動運營商由2002年開始啟動的業務。移動的 IVR 分為兩大品牌:音信互動和娛音在線,聯通的 IVR 品牌為聯通。





          3、IVR 系統設計與移動設備


          21世紀初,IVR 系統已逐漸普及。起初“按鍵+語音”的混合形式(請按“1”或者說“1”),是很常見的模式,比如10086的查詢功能。人們創造了 IVR 系統,希望它可以自動處理一些事物,這樣客戶就不會總是需要找一個真人來解決問題了。相比與真人客服交談,很多用戶實際上更喜歡使用 IVR 系統,因為他們可以花很長時間反復咨詢信息而不會覺得他們是在“打擾”一個人類客服。


          移動 VUI 設計需要注意:


          1、確定它是否需要一個視覺化的呈現,比如一個虛擬角色。


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




          4、VUI 的優勢是什么?



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


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


          直覺性:說話更自然,更容易。可以直接通過語音輸入的方式來表達你的意愿。


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




          5、哪些場景不適合使用 VUI ?


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


          不適應對計算機說話:并不是每個人都喜歡對計算機大聲說話,即使是在私人空間。


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


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




          6、哪些場景適合使用 VUI?


          使用場景需要騰出雙手,比如車載導航、智能音響。


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


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


          幫助用戶簡單記錄、查詢、照顧用戶的作息時間等。




          7、VUI 設計師的工作內容


          VUI 設計師思考的是在系統和終端用戶間,從開始到結束的整個對話過程。他們思考正在解決的問題以及用戶需要什么來達成他們的目的。VUI 設計師在項目中扮演著非常重要的角色。通常會參與項目全程的工作,并與團隊合作完成在技術、體驗、設計上的優化。



          如果 VUI 需要與后端系統進行交互,他們要考慮需要處理的請求。如果流程中有人的因素,比如客服需要交接,那么設計師需要考慮如何進行交接,以及如何培訓客服。







          語音用戶界面基本設計原則



          1、對話式用戶界面


          對話式設計定義:思考如何與 VUI 系統進行一輪以上的交互。


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





          2、多模態界面


          與 IVR 系統不同的是,在移動設備上我們可以增加一個可視化組件。


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


          如果有一個可視化組件,則會讓移動設備增強優勢。允許用戶同時使用語音和屏幕進行交互。(手機上虛擬助手,有些雖然以語音交互為主,但是在用戶的智能手機上也會有一個配套的APP)。





          3、設定用戶期望


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


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


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


          “如果你已經設計了一個設置鬧鐘的功能,但是你沒有提供用戶取消設置的方式,這就像給人一條浴巾但是沒給他香皂一樣。如果你設置了可以完成某項任務的語氣,請務必考慮與之相關的任務?!?/strong>





          4、確定策略時需注意的幾點


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


          1、確認錯誤的后果是什么?比如:預定錯誤的航班?制定錯誤的任務?播放錯誤的歌曲?


          2、系統將如何反饋?比如:會有音頻提示嗎?是否有視覺反饋嗎?比如Amazon Echo上的光環。


          3、是否擁有屏幕?比如:車載導航、手機屏幕、智能手表。


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




          5、確認策略的兩種方案


          顯性確認:重要信息,需強制用戶確認信息。


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




          6、確認信息的方式




          三級置信度:


          系統將在一定的閾值內,以明確的形式確認信息,拒絕較低置信度的信息,并以隱性確認來確認置信度超過80%閥值的信息。


          1、80%以上,使用隱性確認。如果是誤識別代價高的話,考慮采取顯性確認。

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

          3、45%以下的,拒絕確認信息。


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

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

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

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



          隱性確認:


          1、只使用隱性確認,不要求用戶進行操作。

          2、將「答案」和連同「原始的問題的一部分」一同回復,讓用戶知道系統識別到的是哪個問題。

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



          非語言式確認:


          1、僅需行動反饋,而不需要口頭響應。

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

               a、如果沒有延遲,沒必要再對其回復。

               b、如果有3-5秒延遲,需進行回復,讓用戶知道并不是設備沒有聽到她的聲音。

          3、使用一個“聲音標識”,即簡短的、有識別度的聲音。這樣有助于幫助用戶快速知道他們已經到了哪一步。



          通用確認:


          1、在某些對話式系統中,最好不要詢問用戶具體說了些什么 - 哪怕是隱性確認。

          2、通用確認可以讓用戶分享更豐富的體驗,因為這類反饋能適應用戶輸入的各種信息,并讓對話繼續進行。通常人與人之間的對話,也不會句句必回復,也會有 “嗯” “哦 ”“啊” “然后呢”等。 



          視覺確認:


          1、確認一個項目清單,通過屏幕顯示進行溝通會更加有效。人的記憶有限,通常用戶一次性不能記住超過大約7個聽覺項目。

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




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


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


          1、用戶可以隨時向系統詢問 / 發出命令嗎?


          2、是否參與一個有明確開始和結束的封閉式對話?




          8、命令-控制模式



          喚醒系統方式:按鍵通話(車載導航、Siri等)、直接進行關鍵詞呼叫(“OK Google”“小度”等喚醒詞)。


          喚醒系統反饋:系統檢測到用戶說話完成,通常會使用某種非語言的音效進行提示,然后做出相應處理(比如:“?!钡囊宦暬蛘咭曈X反饋:聲波線、點狀動效、設備逐漸發光等)。


          系統聆聽時間:用戶說出喚醒詞或按下按鈕后,系統保持聆聽狀態的時長,根據經驗來看,10秒 是個不錯的起始時間段。



          喚醒響應時間與反饋方式


          喚醒響應時間與喚醒反饋方式有關,不同喚醒反饋方式下,最佳響應時間不同:


          1、當喚醒反饋為"燈光"反饋時,喚醒響應速度越快越好,在200ms時,用戶響應舒適度最高(對響應時間評價為剛剛好的用戶比例),73%的用戶對速度滿意。


          2、當喚醒反饋為"燈光+音效"時,喚醒響應速度的舒適時間為300ms左右,76%的用戶對速度滿意。


          3、當喚醒反饋為"燈光+人聲"時,喚醒響應速度的舒適時間為500ms左右,74%的用戶對速度滿意。


          數據來源:百度人工智能交互設計院智能音響時間測試實驗



          喚醒等待時間體驗感


          用戶請求及反饋階段響應時間對等待體驗的影響:


          1、1250ms以內是用戶認為響應速度較優的區間,其中650ms為最佳體驗值。在450ms時,少量用戶覺得響應速度太快了,用戶會感覺到緊迫感和壓力,難以接受。


          2、在1450ms時,有53%的用戶開始感覺響應有延時,但仍能夠接受。


          3、從2150ms開始,有20%的用戶認為音箱響應太慢,不能夠接受。我們認為20%的用戶不滿意,已經不足以被稱為一個優秀的產品。


          數據來源:百度人工智能交互設計院智能音響時間測試實驗




          9、對話模式


          1、不要強迫他們不斷地去表明他們將要開始說話,自然地對話技巧進行話輪轉換。


          2、通過更精細的設計,使 VUI 系統可以處理一些常見的微妙表達方式。(用戶處理完畢說“謝謝”,你可以設置系統忽略這種情況,或回復“不用客氣”,而不是提示或者報錯。)


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


          4、打破話輪轉換的情況,用戶在系統說完之前就進行提問。


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




          10、對話式標識


          使 VUI 更加人性化、更具吸引力,對話式標識是讓用戶了解交談進展以及進展情況的重要方式,當系統在對話中使用了一些基本的對話禮儀后,用戶的參與度會更高,并且會以同樣的方式進行回復。



          反面案例:

          虛擬助理:你昨晚你睡了幾小時?

          用戶:大約7個小時。

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

          用戶:大概有4份。

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

          用戶:吃藥。

          虛擬助理:再見。


          正確案例:

          虛擬助理:我會問你幾個有關你身體健康的問題。第一個問題,昨晚你睡了幾小時?

          用戶:大約7個小時。

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

          用戶:大概有4份。

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

          用戶:吃藥。

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




          11、異常處理


          “當你與人類交談時,永遠不會出現不可恢復的錯誤狀態?!?

          — ABI JONES, Google 設計主管


          “你偶爾因為犯錯和不知道某些事情導致評分降低造成的影響,比你每次做對一件事情重要百倍?!?nbsp;

          — 英特爾語音助手部經理 Pilar Manchon


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


          一個好的設計師應該知道,你不能只設計正常的情況, 你還要對出錯的情況做出設計。這對于 VUI 設計來說尤為重要,因為出錯情況是家常便飯。



          未檢測到語音 / 檢測到語音,但沒有識別


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

               a、你的系統只使用語音

               b、用戶沒有其他的回復方式

               c、必須要用戶回復后,系統才能繼續進行任務 / 對話


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

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

               b、就算什么也不做,也不會中斷對話

               c、系統沒有理解時,用視覺信息提示告訴用戶,比如:提示列表等

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



          其他異常處理


          1、當出現:語音被正確識別,但系統無法處理

               a、程序對關鍵屬性理解不明,寫了錯誤的回復

               b、沒有針對一些情況的回復

          解決:對用戶可能會說到的所有情況做更完善的預測,通過數據收集來避免此問題


          2、當出現:部分語音識別錯誤

               a、什么也不去處理,因為這不是你想要的結果

               b、匹配錯誤的行為

          解決:可以用 N-Best 列表來智能匹配最有可能的識別結果


          3、增強錯誤提示

               a、當需要用戶說話的時候,使用這種增強錯誤提示策略

               b、必要的情況下,進階錯誤行為提示可以更為詳細,并提供更多的幫助

               c、如果你正在設計一個可以提供真人輔助的系統,可以為錯誤數量設置一個閾值,當達到該閾值時,將用戶轉移給人工助手  




          12、新手和專家用戶


          如果你的用戶會定期使用你的系統,那么在設計中就需包含不同的策略。


          “務必確保你的目標不是簡單的訓練你的用戶,應當適應用戶的行為,而不是用已有的命令讓用戶感到厭煩?!?

          — Google 交互設計師 Margaret Urban


          我們在 VUI 設計上該如何更好的交互設計?


          1、減少冗長指令以及其他引導提示。通過計算 APP 使用次數和頻率來確認是否切換模式。


          2、縮短解釋性提示。但是請務必使用“對話式標識”。


          3、啟動效應。



          什么是啟動效應?


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


          1、當給人們呈現一個還沒完成的草圖,隨著這個草圖越來越完整,人們就越來越辨認出這張圖畫的是什么。之后,再給他們呈現其他還沒完成的草圖時,他們會更早辨認出這張圖畫的是什么;


          2、如果當給人們呈現一組漢字,假如里面含有 “河” 這個字,隨后讓他們寫出部首是 “氵” 的字時,這些人回答 “河” 的幾率會更大。



          談談自己對新手和專家用戶的理解


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


          02、新手:什么叫新手,就是剛剛下載你的產品,準備使用的用戶,對產品功能都還處于陌生摸索的階段。他們不會因為你的技術而使用你的產品,使用你的產品目的是完成某項任務。他們有興趣使用更高級更復雜的產品,但卻不愿意接觸全新的東西,要想讓他們認可,那么產品就必須足夠簡單。




          13、持續跟蹤上下文


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


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





          14、幫助和其他通用部分


          我們在設計 IVR 系統時,我們會確保每個狀態都包含一組通用組件:重復、主菜單、幫助、操作和再見。





          15、延遲


          產生原因:糟糕的連續性能、系統處理進程、數據庫訪問


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


          處理細節:延遲的時長可能為0~10秒,在沒有延遲的時候最好也插入幾秒的延遲。因為如果在系統說“請稍等”之后,緊接著就繼續對話的話,會給用戶帶來異樣的感受。很多設備針對喚醒詞采用了本地化識別的方式,這樣喚醒的會更快。




          16、消除歧義


          問題來源:用戶只會提供執行命令所需的部分信息,而沒有提供所有的細節。


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


          解決方案:


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


          2、根據上下文線索進行判斷。


          3、反問用戶進行確認,確保系統對用戶同一個問題的各種各樣的回復形式都有良好的適應性。


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


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




          17、設計文檔


          我們需要制作:示例對話(sample dialogs)和會話流(dialog flow)文檔外其他一些情況。例如:在設計過程中,你還需要創建提示列表、完善對話每個狀態指定完整的語法規則等等。





          18、無障礙設計


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





          19、典型 VUI 項目交付項內容


          示例對話:系統和用戶之間可能產生交互行為的預設對話,對話看起來就像電影劇本一樣,包括兩個主要角色之間來回往復對話。


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


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


          產品原型:如果這是一個多模態產品,有屏幕、支持觸摸交互。




          參考文獻:

          《語音用戶界面設計:對話式體驗設計原則》-【美】Cathy Pearl(凱瑟 彼爾)

          語音交互入門:從概念,原理到如何設計VUI產品 - 杜松

          AI時代的語音設計經驗漫談 - 少夫白杰

          語音用戶界面設計 - 對話式體驗設計原則 - walle_x






          文章來源:站酷   作者:Sabaku_no_Gaara

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

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

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

          UX設計全方案思考與呈現

          純純


          配色/圖標什么的是基礎嗎?

          之前一直沒有太多關注過如何定義一個 APP 的配色,或者如何畫一個漂亮的 icon。曾經的上級指示都是這些基礎對商業的不可量化。于是我在思考一個問題,就是沒有直觀商業價值的設計要素都失去了意義變成了所謂基礎的事情嗎?

          半年前面試字節的時候,面試官問了我有關配色的定義,細節到為什么是這個色值。當時十分震驚于這么細節的問題,之后我就想起了之前有位朋友給我發送過一份有關支付寶「藍」的定義 pdf,洋洋灑灑幾十頁就是為了解釋他們為啥用這個有點臟的藍色#108ee9 當主色。

          所以其實 APP 的配色/圖標與主品牌是一脈相承的,它是品牌的延續與象征。它以最直觀的態度傳達給用戶,這個產品以及品牌的調性,并以此建立最強有力的視覺識別性。所以我覺得它是可以有條件地展示在我們設計方案里的,但一定注意它的篇幅和表達的方式,維度在品牌傳達這一層就對了。

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

          1. 在品牌主視覺配色基礎上的適配

          這種情況一般適用品牌主視覺方案已經設計完畢,APP 端作為延續。這個時候一般注意配色從 CMYK 模式到 RGB 的轉換,所以作為 APP 的配色,具體色值上可以稍作調整,使它更適配于 LED 屏的用戶感知與舒適度。

          另外可以使用透明度進行色彩分階段,一般從 0-100% 分為 10 階就足夠我們日常界面設計使用了。

          從零到一系列:UX設計全方案思考與呈現

          2. 0-1定義APP配色

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

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

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

          從零到一系列:UX設計全方案思考與呈現

          至于圖標的話我就更不用多說了,大家肯定都記得那些非常基礎的繪制圖標的法則。個人認為圖標也不太需要放一個單獨的篇幅去展示,除非它有一些新奇有趣的亮點。

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

          在之前的文章中有寫過,匹配產品定位的界面框架一旦輸出,對整個 APP 之后的迭代與功能設計都有很直接的影響。定義整體的UX 框架方案,是實踐設計目標與策略的過程,基本圍繞著這 3 個出發點:匹配產品定位、滿足業務拓展性、符合舒適度美學 。

          1. 定義整體框架

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

          舉個例子,就是在定義平臺框架的時候要考慮這個框架與容器是不是同時適用于底下的子業務線,同時當這個框架到了 H5、小程序、PC 的時候需要做哪些適配調整,是否都可以很好地進行兼容適配。

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

          其次從微觀的角度來說,遍地就都是細節了。舒適度美學這一說,其實難免有些抽象,我們把它轉為相對合理一些的落地原理就會清晰很多,像大家熟知的間距 4 倍數原理、對齊原則等等。但是這些微觀的內容不建議大家放到方案展示里,因為它并沒有針對單個方案的特殊性,更像一種大眾共識。

          從零到一系列:UX設計全方案思考與呈現

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

          2. 具體容器解析

          我們特地把單獨的容器部分拿出來解析,是因為自定義容器是展示核心業務最主要思考呈現,同時還可以配合運營做很多提升業務效率的配置。在做具體設計的時候,我們需要區分「端上固定」模塊和「運營配置」模塊之間的差別。

          「端上固定」模塊

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

          「運營配置」模塊

          相對「端上固定」,「運營配置」就不需要跟著發版,可以隨時后臺上傳替換模塊內的內容,適用于需要 PGC 生產的內容。說到這里很多童鞋可能馬上就聯想到 banner,彈窗的運營位了,但其實除了這些之外還有很多容器模塊是需要靈活配置為「運營配置」模塊才能更有效地提升運營業務價值。

          我們可以這樣來區分「運營配置」模塊類型。

          一種是純運營配置模塊,即設計與開發輸出框架、定好配置字段限制之后,運營可以獨立完成后臺配置的。比如:資訊 app 0-1 前期的資訊列表內容。

          另一種是運營設計配合模塊,即需要設計配合運營輸出一定的設計圖才可以進行后臺配置的。比如:常見的 banner、彈窗、熱門推薦專題等。

          在 0-1 的設計方案中,更推薦大家展示「運營配置」模塊的內容與解析,因為 0-1 是個以拉新為主的階段,運營顯得尤為重要,所以我們的設計需要側重考慮整體的運營效率與轉化。

          從零到一系列:UX設計全方案思考與呈現

          如何展示亮點設計?

          在我們概述完大部分的整體思考路徑與設計方案后,我們需要由面到點,從全局提煉細節,突出自己的設計方案亮點。

          而如何提煉這個亮點呢?是挑一個我設計的最好看的界面呢?還是直接放最復雜的那個流程?以下是推薦選擇的亮點設計:

          1. 完成理論實踐,并可以量化價值的設計case

          大家應該都了解,一些和設計息息相關的數據 UV/PV/GMV/ 相關業務指標等,以及一系列在實踐中很好應用來解釋設計方案的理論支撐比如 5W1H、GSM 與五度分析……這些數據和理論是支撐我們設計更飽滿更有說服力的重要支點。

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

          從零到一系列:UX設計全方案思考與呈現

          那些你在完成踐行設計策略完成設計目標時獲得的數據指標要提前預知,養成習慣之后,你就可以快速輕松地察覺到哪里有可以做 A/B test、進行埋點數據比對的地方了。

          2. 影響上中下游環節的設計case

          除了對業務提升價值的項目外,我們有時候也需要注意對品牌設計、產品、運營、技術等上中下游造成影響力的設計項目。通常這類設計大部分也都是設計自驅發起的,能起到提升各方人效和業務效率的作用。

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

          從零到一系列:UX設計全方案思考與呈現

          規范與組件庫的定義真的備受關注?

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



          文章來源:優設(土撥鼠)   作者:Nana的設計錦囊



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


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

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


          界面交互動效核心知識的分類與總結

          純純

          一.  什么是界面交互動效?

          界面交互動效是展現界面間的轉換和界面內元素變化的交互反饋。而效果就表現在觸發與結束的過程中,表現清晰的層級關系,自然的引出與結束。交互動效有著承上啟下的重要作用。

          二. 界面交互動效是用來干什么的?

          • 讓用戶清晰地感受到當前所處場景和層級關系。
          • 多種UI元素之間的相互轉換。
          • 給用戶制造驚喜感使用戶愉悅。

          三. 界面交互動效五大注意點

          • 避免動效過于花哨、酷炫、標新立。
          • 在效率型應用中,過度、無意義的動畫只會阻塞任務流程。
          • 動作動效不超過1秒。
          • 用戶專注內容時,不要用吸引注意的動畫去打擾。
          • 出現頻率高的操作動效,避免用戶反感,延遲操作時間。

          四. 如何設置緩動曲線與時間讓動效更加自然,可以看下面的一些總結

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

          超全面!界面交互動效核心知識的分類與總結

          五. 界面交互動效如果以動效的表現屬性來分可以分為兩種

          第一種:為銜接類型動畫

          主要針對不同界面直接的銜接,為帶來更流暢的操作觀感所做的設計,彌補兩個界面直接的差異所帶來的用戶感知落差。

          第二種:特效類動畫

          特效的核心目的是為了吸引用戶的注意力,提高信息敏感度,在游戲界面設計當中使用更為廣泛,能夠帶來更加絢麗的動態畫面。

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

          第一類:界面內的交互動效

          在一個界面內的交互動效特別多,例如點擊加號出現下拉菜單,出現浮層動畫提示,點擊舵式導航出現選擇類型和遮罩,點擊按鈕出現評論點贊,當前頁面的展開收起,加載等等。如下圖所示:

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          第二類:界面間的交互動效

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

          超全面!界面交互動效核心知識的分類與總結

          △ 硬切到下一頁

          超全面!界面交互動效核心知識的分類與總結

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

          超全面!界面交互動效核心知識的分類與總結

          △  下一頁從下往上彈出

          超全面!界面交互動效核心知識的分類與總結

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

          總結:

          • 動效創意方面的創新要依據用戶的認知模型。單純很炫很酷的動效如果脫離了用戶的認知模型,那么這樣的交互動效對于整個產品來說是有害的。
          • 做界面交互動效的目的是為了更好地落地。如何更好地高效地表現我們設計的動效。同時使得我們制作的動效可以很好的運用到實現落地中,這是很重要的,不然所有的一切都是海市蜃樓。
          文章來源:優設  作者:程遠

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


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

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


          超長篇干貨!如何從交互維度量化用戶體驗?

          周周

          這篇文章,和大家分享一些在產品和交互設計中的一些自己的方法。

          日歷

          鏈接

          個人資料

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

          存檔

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