• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 5個幫你消滅空狀態界面的常用方法分享—- 設計教程




    教學主題: 5個幫你消滅空狀態界面的常用方法分享

    大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

    今天的這個教學主題是: 5個幫你消滅空狀態界面的常用方法分享

    這教學的重點為這幾點 [ 方法,分享,常用,面的,狀態,消滅,用戶,一個,操作,時候, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    在做設計的時候,常常會忽略的一個頁面狀態就是空狀態,如何消滅這個影響用戶體驗的頁面?今天這篇好文,總結了存在空狀態界面的3個地方,以及消滅空狀態的5個方法,都是實用乾貨,強烈建議閱讀。

    在做設計的時候,常常會忽略的一個頁面狀態就是空狀態,如何消滅這個影響用戶體驗的頁面?今天這篇好文,總結了存在空狀態界面的3個地方,以及消滅空狀態的5個方法,都是實用乾貨,強烈建議閱讀。

    空狀態,顧名思義就是空白的狀態,比如說:一個新聞的列表中沒有新聞,這個時候列表就是空的,用戶打開之後看到的就是白慘慘的一片。空狀態的用戶體驗非常差,就好比千辛萬苦經歷九九八十一難的唐僧師徒最後取到了一堆空白的佛經一樣,用戶在經歷了查找,在萬千的APP中選中了你,然後經過漫長的下載等待和安裝,最後你竟然給我一個空頁面。用戶只會想:Are you kidding me(你在逗我玩嗎)?所以隨之而來的,用戶當然頭也不回就走了。

    當然,以上只是舉了一個例子,空狀態有可能出現在APP首次啟動時,但是卻不僅僅局限於此,有很多地方都有可能出現空狀態,一不小心就會放過這些空狀態,影響APP的用戶體驗。APP的空白狀態可能出現在如下的場景:用戶未進行操作、用戶操作結果和網絡出錯。

    1. 用戶未進行操作

    在我一開始舉的例子中,用戶第一次打開APP時有可能會空狀態,特別是一些UGC應用。當然這種設計也很好理解,用戶第一次啟動,又是UGC應用,用戶什麼操作也沒有,所以當然是空白的啦。只是,這種空白狀態看似合理,但是在合情上面卻值得商榷。而且,據我觀察,空狀態的出現不僅於此。有些APP在每次啟動的時候都會採用一個空白刷新的邏輯,這時候也會出現一個空白的頁面。所以,在設計應用啟動時,需要關注一下有可能出現的空狀態。

    2. 用戶操作結果

    第二種空狀態是一種用戶操作的結果。這種狀態常常出現在一個任務列表中的所有任務都處理完成的時候。比如垃圾郵件、廣告郵件列表,有些用戶會有清空這些郵件的習慣,清空了之後自然而然就會出現一個空狀態。其次就是,當用戶進行檢索或者篩選的時候,沒有符合的結果,這樣子沉陷出來就是空狀態。

    與第一種情況不同的時,由於用戶操作形成的空狀態是無可避免的。不可避免的意思就是說,我們只能告訴用戶這是一個空狀態,除此之外,我們沒有其他的方式。而在啟動是出現的空狀態時,我們可以通過其他方式去掩蓋“這裡有一個空狀態”的事實,具體我們下面再表。

    3. 出現錯誤

    最後一種空狀態出現在異常流的時候。比如說,當網絡錯誤的時候,可能就會出現空白狀態。當然,原理也很簡單。本來是要從互聯網中加載一些東西,現在加載不了了,所以當然就是空狀態咯。當然,一般來說,出現錯誤的時候會有錯誤描述。只是,如果只有兩行空洞的文體告訴你除了問題,貌似用戶感受起來也不會太舒服吧。所以,如果只是兩三行的文字,我個人覺得這跟空白其實區別也不大。

    對於空狀態出現的情況,暫且討論到這裡,下面談談如何消滅這些空狀態,提升用戶體驗。總結一下,主要有如下的幾個措施:①使用系統推薦項;②使用操作指引;③使用緩存;④情感化表達;⑤提供新的任務。

    1. 使用系統推薦項

    既然空狀態如此影響用戶體驗,那麼最直觀的想法當然是往空白界面填充一些東西,這樣就不是空狀態了。對於一些信息瀏覽頁面來說,這的確是一個非常簡便易行的方法。既然沒有東西,那麼我們系統就推薦一些東西給用戶,這樣界面就不會空蕩蕩啦。所以說,這種方法非常適合在應用啟動時(並且是初次啟動時)使用,而且,這種方法其實現在已經非常流行了。

    比如說:在除此打開Anyview時,系統在展示“書架”這個頁面,按理說,我沒有進行任何操作,這個界面當然是空的啦。不過既然空狀態如此不堪,那麼Anyview就自動塞進去了一堆書。這樣就完美地解決了問題。不過塞什麼東西進去是有講究的,通常是一些熱門的東西。至於Anyview,他會先讓我回答一些問題,在獲取了一些基本數據之後,它才給我推薦了這些書籍,這樣推薦的精準度也會高些。現在的閱讀軟件基本都沿用了這種方法。

    當然,在其他的瀏覽頁面,比如說lofter、花瓣等圖片社區,也會採用這種方式。所以,現在對於此類應用,空白界面越來越少見了。

    5個幫你消滅空狀態界面的常用方法分享

    2. 使用操作指引

    在有些場景下,的確是可以通過系統推薦項來達到無中生有的目的。比如說:在我的關注人的狀態中,可以插入系統推薦的狀態來以假亂真。但是,這種方法確實不是萬能的。舉個例子,假設有一款圖片分享類的應用,然後有個頁面是“我的圖片”,如果在我從來沒有發布過圖片的時候,這個頁面理所應當就是空的。並且在這個時候,第一種方法顯然是不可行的。當然,空蕩蕩的界面有不好,所以此時可以通過操作指引來引導用戶產生內容。

    這時候的邏輯是這樣子的:界面展示用戶產生的內容→用戶沒有產生內容→我們來指引用戶產生內容。這樣子即消滅了空頁面,又可以讓用戶產生內容,一舉兩得。而且,這種方法還可以解決一種問題:用戶不知道生產內容的入口在哪。所以,這麼一看,這種方法簡直是一石三鳥。

    操作指引有兩種方式,一種是通過浮層來引導操作入口,另一種是創建快捷入口。說文字比較蒼白,直接看下面的配圖吧。

    5個幫你消滅空狀態界面的常用方法分享

    △ 引導操作入口

    5個幫你消滅空狀態界面的常用方法分享

    △ 創建快捷入口

    對於這兩種方法,各有利弊吧:創建快捷入口的引導性非常強,用戶容易注意到,操作也簡便;浮層指引的話引導性沒有快捷入口那麼強,不過勝在用戶教育好,下次用戶就知道從這裡產生內容了。相比較而言,我會更加偏向浮層指引這種方式。

    3. 使用緩存

    把之前的的內容存儲下來,在展示頁面的時候先展示緩存的內容,再加載新內容,這樣就非常簡單地把空狀態消滅了。現在大多數的資訊瀏覽類的頁面都會採用這種方式,比如說朋友圈,網易新聞等等,以至於大家都習以為常了,反而忘了其實這也是消滅空狀態的一種方式。

    4. 情感化表達

    當空白界面是用戶操作的結果時,我曾說過這裡其實沒有太多的方法,我們只能老老實實地跟用戶說這裡就是空白狀態。只是,在這樣一個追求用戶體驗的年代,大家也開始把這個提醒表達得更加生動形象一些。在這裡會加入一些情感化的表達,而不僅僅只是冷冰冰的文字,比如加上俏皮的圖像,或者把文案寫得更加戲劇化一些。這些配圖在讓用戶明白當前的狀態的同時,往往也能引發用戶會心一笑,從而彌補空白頁面帶來的失落感甚至可以帶給用戶一些正面的情感。如下圖:

    5個幫你消滅空狀態界面的常用方法分享

    這是一個出錯的頁面,圖案是一個流落荒島的場景,文案是“糟糕,連接掉線了。冷靜一下,生個火然後下拉刷新一下吧”。通過一種俏皮的圖案和文案,確實可以舒緩用戶掉線時的挫敗感。

    5. 提供新的任務

    前面的四種方法其實說到底,都是在彌補當前任務失敗造成的失落感。也就是說,我們的落腳點仍舊在當前的任務中。不過,噹噹前的任務完全不可行的時候,這時候就需要考慮新的方法了。比如,提供給用戶新的任務,讓他暫時忘記當前的任務,自然而然就不會有挫敗感了。

    舉個例子吧,當在斷網的情況下用戶使用chrome瀏覽器瀏覽網頁的時候,界面會顯示一個小遊戲。這是一個通過空格鍵操縱小恐龍躲避障礙的遊戲,遊戲雖小,但是趣味性十足。在瀏覽網頁失敗的時候,提供這麼一個小遊戲去分散用戶的注意力。不得不說,這確實是一個非常好的維度。

    再舉個例子,當訪問騰訊系的網頁訪問失敗的時候,網頁除了顯示404狀態之外,還會顯示一個尋人啟事。把錯誤界面和公益結合在一起,不得不說,創意十足。既解決了空狀態的問題,又做了好事,一舉兩得。而且用戶可能可能被這個公益的舉動吸引了,然後就成功地轉移了這是一個404頁面的事實。

    5個幫你消滅空狀態界面的常用方法分享

    △ 騰訊404頁面

    洋洋洒洒講了這麼多,最後總結一下就是下面這張圖。記住空狀態可能出現的場景,當設計走到這個場景的時候留多一個心眼,然後按圖索驥即可。

    5個幫你消滅空狀態界面的常用方法分享

    看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

    希望我們所介紹的 5個幫你消滅空狀態界面的常用方法分享 這教學會喜歡

    文章標題: 骨子愛創意- 5個幫你消滅空狀態界面的常用方法分享–轉載請註明來源處

    本教學分類為平面理論教程中的 設計教程相關教學

    文章相關關鍵字為: 方法,分享,常用,面的,狀態,消滅,用戶,一個,操作,時候,

    本文永久連結 :5個幫你消滅空狀態界面的常用方法分享

    本文轉載自 :VIA