• <track id="ur0kg"><ruby id="ur0kg"><tt id="ur0kg"></tt></ruby></track>
    <tr id="ur0kg"><strong id="ur0kg"><menu id="ur0kg"></menu></strong></tr>
  • <pre id="ur0kg"></pre><pre id="ur0kg"><label id="ur0kg"><menu id="ur0kg"></menu></label></pre><acronym id="ur0kg"><strong id="ur0kg"><listing id="ur0kg"></listing></strong></acronym>

  • <td id="ur0kg"><ruby id="ur0kg"></ruby></td>

    <td id="ur0kg"></td>

      <acronym id="ur0kg"><label id="ur0kg"><listing id="ur0kg"></listing></label></acronym>
    1. 如何設計出好的空狀態,來提升用戶體驗?

      如何設計出好的空狀態,來提升用戶體驗?

      更新時間

      2018-08-04

      QQ截圖20180731171814.png

      空狀態是指沒有數據的頁面,盡管如此,空狀態也可以提供有趣的用戶體驗。在這篇文章中,將會說明什么是空狀態以及如何設計出好的空狀態,以此來提升用戶體驗。

      從用戶進入到與APP交互的過程中,空狀態設計都是提升產品用戶體驗的不錯的方法。

      空狀態是指沒有數據的頁面,也就是說,在用戶進行某些動作后,頁面將會展示其產生的內容。盡管如此,空狀態也可以提供有趣的用戶體驗。事實上,空狀態完全可以用于指導用戶的操作,向他們介紹你的產品或展示產品品牌的個性。

      你可以將空狀態變成一個與用戶進行有意義交流的地方,為用戶提供一種參與式的用戶體驗。

      在這篇文章中,將會說明什么是空狀態以及如何設計出好的空狀態,以此來提升用戶體驗。

      什么是空狀態?

      空狀態是APP中的內容無法顯示的頁面狀態,用“空”來描述其實是不恰當的,因為空狀態頁面中還有一些內容的。事實上,空狀態可以顯示多種不同的內容來提升用戶體驗,接下來我們就會著重介紹這一點。

      例如:如果你曾經使用過一款允許你把你喜愛的內容添加到保藏夾里的APP,你就會對空狀態有所了解?;蛘吣闶褂盟阉?,有過沒有搜索結果的經歷…

      以Instagram為例:當你進入沒有添加任何照片的保藏夾時,你可能會看到一個空狀態,并告訴你還沒有添加任何照片。

      由于沒有數據內容,因此只能展示空狀態或無數據。

      Instagram的空白狀態

      但是,Instagram的保藏頁面并沒有空狀態說明,相反,它是空白的頁面。因此,他們錯過了一次引導用戶去與APP互動的機會。

      設計空狀態的原因多種多樣,最常見的原因有以下幾種:

      1. 用戶清空了所有的數據(如:清空收件箱);

      2. 用戶是新用戶,并且剛剛才登錄APP成功;

      3. 用戶遇到了某種錯誤(如:沒有WIFI連接)。

      被忽略的空狀態設計

      Shruthi Padala曾經在Medium上寫道:

      許多人認為空狀態只是輔助頁面,不需要去關注它們。

      但是空狀態會將空白頁呈現給用戶,如果能夠利用好空狀態頁面,會極大的提升用戶體驗。

      曾在Shopify擔任插畫師的Meg Robichaud寫過一篇關于空狀態研究的文章。因為與其他部分的用戶體驗不同,空狀態設計的難點就在于它需要不竭的更新。但是只有2%的用戶會看到空狀態,這也就意味著它不會是占用過長的用戶使用時間。

      這也就解釋了空狀態被忽略的原因,因為不是所有的用戶都能看到它們,所以花費過多精力在上面反而是得不償失。也正是這種心態,導致了空狀態設計被設計師給忽略掉了,進而影響最終的用戶體驗。

      最后,Meg和Shopify決定重新設計空狀態,即使只有少數的用戶會碰到這種頁面,為什么呢?

      因為,即使只有2%的用戶,他們也需要一個好的用戶體驗,它給體驗帶來了更多的細節和影響力。

      想一想,如果用戶是一個新手,正在漫無目的的瀏覽著APP,并且還沒有下定決心是否要使用這款APP,這些重要的設計將是留住用戶的關鍵細節。

      空狀態是很容易讓用戶體驗出彩的,它不是讓APP成為最成功產品的原因,但是它是取悅用戶的關鍵環節。對細節的關注還有很長的路要走,正如有句名言所說,細節決定成敗。

      使用空狀態的好處

      Spotify的用戶體驗專家Tamara Hilmes提醒設計師們時說,空狀態是一個展示產品個性化的機會,因此,在進行空狀態設計時,需要認真考慮品牌和用戶的目標和背景。

      Deliveroo的產品設計師Ryan Cordell同意Tamara Hilmes的不雅點,并進一步說:

      “設計好文字和視覺界面,是產品與用戶互動并最終實現他們目標的關鍵一步。設計團隊應該投入足夠多的時間、耐心和精力來設計任何場景下的案牘?!?/p>

      同樣,即使不是特別重要的頁面,告知用戶下一步如何操作也有著不錯的效果。如果不這樣做,空狀態就不克不及提供任何價值,其也就成為了化妝品添加劑,毫無用處。

      空狀態設計的最佳案例

      如果你打算設計一個空狀態,那么請記住這些好的做法,以便能夠幫忙到用戶去達到他們的目標。

      告訴用戶該怎么做

      如上所述,空狀態是鼓勵用戶與產品互動的絕佳機會,你也不希望把用戶進入頁面后,一臉茫然而不知所措。

      例如,你可以在空狀態頁面上放一個具有引導性的按鈕,以一款剛下載的社交APP為例來說明。

      這款APP有通訊錄標簽,但目前是空的。一個好的引導性按鈕可以告訴用戶去查找并添加本身的伴侶,這樣能夠讓他們也參與到你的APP中。你的引導能夠完整的告訴用戶,如何把空空的通訊錄轉變成好友眾多的頁面,可以看看Facebook是如何做的(上圖)?

      空狀態要保持個性化

      空狀態設計中,個性與絕望、無畏和欲望之間有著非常細微的邊界,若無法很好的平衡這兩者之間的關系,就會把展示品牌個性變成了展示絕望、無畏和欲望啦。

      但是,空狀態設計僅僅只是產品展示個性化的一個小例子,個性并不總代表著有趣,為頁面添加幽默的元素時,需要格外謹慎。某個笑話在今天可能很受歡迎,但是明天就會有用戶不再喜歡了,給人以過時的感受。

      在空狀態設計中,使用友好且合適的案牘能夠帶來不測的效果。兼具特制和適合特性的插圖,可以幫忙你設計出一個成功的空狀態。

      如果你決定要使用插圖和案牘,請確保它們要有層次感,不會彼此影響。一個好的插圖能夠為頁面帶來足夠的樂趣和參與度,此時,你可以使用簡單且常用的案牘。來看看Google是如何平衡兩者之間的關系的?

      Google的Material Design 指南中規定,如果打算使用圖片,請遵循以下規則:

      • 使用中性或幽默的語氣;

      • 與產品的品牌風格保持一致

      案牘需要遵循的規則:

      • 案牘傳達出有用的信息;

      • 在不需要操作的情況下,告訴用戶頁面的作用。

      使用空狀態來培養用戶

      你可以使用空狀態來告知用戶如何使用產品,空狀態在用戶首次體驗產品時扮演著重要角色。

      如果你想留住用戶,那么良好的首次體驗是至關重要的。

      據Appcues的消息稱:

      如果經過 3 個月的時間,當初 100 個用戶中只有 4 個用戶還在使用你的APP時,那么用戶體驗設計師就需要優化首次登錄APP的體驗了。

      以Dropbox為例,在屏幕截圖的下面,你可以看到他們是如何使用小提示向用戶解釋空狀態是什么,以及他們需要怎樣做來避免空狀態,把他們本身的文件拖進來。

      展示基礎性內容

      Material Design對此解釋說,在空狀態頁面展示一些基礎性的內容,可以幫忙新用戶快速了解到如何使用相關功能。這樣用戶能夠快速學會使用產品,也使得產品學習成本降低。

      存儲諸如音樂和電子書等內容,或使用筆記和文檔等模塊化內容的APP,可以讓用戶在閱讀基礎性內容中獲益。讓用戶擁有調整基礎性內容的權限,是維持用戶參與的一種方式,這是因為用戶可以感受到正在創建本身的APP。

      從上面的閱讀類APP的例子可以看出,它會在空狀態頁面展示一些免費的書籍,這樣的話,用戶可以以此為起點,繼續瀏覽APP的其他功能模塊。


      相關標簽
      亚洲啪啪视频
    2. <track id="ur0kg"><ruby id="ur0kg"><tt id="ur0kg"></tt></ruby></track>
      <tr id="ur0kg"><strong id="ur0kg"><menu id="ur0kg"></menu></strong></tr>
    3. <pre id="ur0kg"></pre><pre id="ur0kg"><label id="ur0kg"><menu id="ur0kg"></menu></label></pre><acronym id="ur0kg"><strong id="ur0kg"><listing id="ur0kg"></listing></strong></acronym>

    4. <td id="ur0kg"><ruby id="ur0kg"></ruby></td>

      <td id="ur0kg"></td>

        <acronym id="ur0kg"><label id="ur0kg"><listing id="ur0kg"></listing></label></acronym>