APP設計中空頁面的設計

2020-12-11 可可可可可達鴨66

在用戶界面中,產品內的購物車為空、某界面出錯或不存在以及斷網等狀況時,都可以成為空狀態。表面上看,空狀態給人的感覺是臨時性的且微不足道的,但實際上,空狀態在界面操作的引導性、用戶體驗的愉悅性,以及保留用戶等方面有著不可忽視的作用。

空頁面也應具有趣味性

空狀態存在的意義是,讓用戶知道這個界面目前是空的還是失敗的,避免用戶進行無意義的等待;將一無所有的界面變得飽滿,告知用戶接下來可以做什麼,並提供一些快捷的操作方式。空狀態的分類有以下幾種:

系統推薦性空狀態

既然空狀態影響用戶體驗,那麼最直接的想法當然是在空白界面中填充一些東西,這樣就不是空狀態了。既然沒有東西,那麼我們就推薦一些東西給用戶,這樣界面就不會顯得很空了。

操作指引型空狀態

有些場景下,可以通過系統推薦項來填補空界面。例如,在電商類的應用中,「我的關注」等功能,可以推薦一些熱門商品來填補空白還可以提高產品的曝光率。而有些時候,比如分享類的應用,不能憑空出現未發布的內容,這就需要在空白界面中引導用戶產生內容。

操作指引型空狀態

情感表達性空狀態

當空頁面是用戶操作的結果時,我們只能提醒用戶這就是空狀態。我們會在這裡加入一些生動形象的插畫,或者將文案寫得更委婉,從而彌補空白潔面帶來的失落感。

情感表達性的空狀態

空狀態的設計需要注意的是要避免死角。空狀態不僅會出現在某個界面為空時,還會出現在界面當中的某一個板塊為空時,或者斷網、或者已發布的內容被刪除時,都需要讓用戶了解當前到底發生了什麼。好的做法是,當完成一個界面設計時要確認一遍,這個界面哪裡會沒有數據,斷網、弱網的情況下如何顯示,在用戶使用一個產品並完成一個從未用過的功能時,不能讓用戶進入死胡同,造成額外的損失。

此外需要注意的是,並不是每一個空狀態都需要精心設計。例如當一個界面有很多個板塊,其中某一個板塊或多個板塊為空時,就不需要每一個板塊都配以圖案了。因為用戶還可以瀏覽其他內容,並不想被一個空的版塊佔據太多空間。可以有以下幾種處理方案:既然沒有內容,整個板塊就不再顯示了;給當前版塊推薦相關的內容;如果處於特殊原因不能隱藏整個板塊或者沒有推薦的內容,就給其一段提示性的文字,儘可能的不影響用戶閱讀其他信息。

本人是做UI設計工作的,特借貴平臺輸出一些內容為大家分享,旨在共同學習和進步。以上部分分享內容來自《規律與邏輯》。如有部分侵權請告知,將會立即刪除。

相關焦點

  • APP界面設計之頁面布局的22條基本原則
    移動APP頁面布局(Layout)是我們設計app界面的時候,最主要的設計任務。一個app的好與不好,很大部分取決於移動APP頁面布局的合理性。下圖為APP最原始的布局模型。移動APP經典布局界面欣賞,以首頁為例展示:頁面布局顧名思義就是對頁面的文字、圖形或表格進行排布、設計。優秀的布局,需要對頁面信息進行完整的考慮。即要考慮用戶需求、用戶行為,也要考慮信息發布者的目的、目標。
  • 特殊情況下的APP設計(2):啟動頁面設計
    其實這種描述不夠嚴謹,從啟動APP到APP首頁的出現之前的頁面,都可以稱為啟動頁(新手引導頁除外:用戶第一次使用APP,有可能還會出現新手引導頁)。引導頁也是一個重要的話題,我們先按下不表,以後再聊。由於APP啟動的過程很短,從幾百毫秒到幾秒不等,所以啟動頁也被稱為閃屏。2.為什麼要有啟動頁面?
  • 網易嚴選APP品牌設計
    回歸到我們視覺設計,我們在接需求的時候,經常會聽到運營及產品對頁面設計的要求是品牌感,那麼怎麼樣設計才有品牌感?下面就談談網易嚴選APP,在品牌設計方面地嘗試,在這之前我們先來了解下網易嚴選。版式設計嚴選app首頁版面採用兩欄布局進行設計,在內容的展現上做到適度克制,從而簡化了內容,再配以淺色背景或者大面積的白色,把核心展示都留給了商品本身,整體給人簡約、寧靜的感受,不強制,不給人壓迫感。相比其他電商app的四欄乃至更多的內容呈現,從視覺上做到了較強的辨識度。
  • app界面設計的流行趨勢
    app界面設計的流行趨勢,界面作為我們認識app的第一道門檻,是app的「面子」,更是不可忽視的一項重點設計,為了建立有效的ui,設計師需要根據移動端app本身的特性和當下趨勢,作出不一樣的改變。但當今設計趨勢瞬息萬變,在沒有統一標準的設計規則之下,緊跟設計趨勢,才能保證ui對用戶的吸引力常在。一、首頁作為設計師,一定要做到多看多用才能夠找到更適合產品本身的展示方式。下面介紹一下首頁最常見的4種表現形式,分別是列表型首頁、圖標型首頁、卡片型首頁和綜合性首頁,不同類型的首頁布局承載著不同的內涵。
  • Hybrid APP架構設計思路
    本文將從以下幾個方面闡述Hybrid app架構設計的一些經驗和思考。通訊作為一種跨語言開發模式,通訊層是Hybrid架構首先應該考慮和設計的,往後所有的邏輯都是基於通訊層展開。P.S:註冊私有協議的做法很常見,我們經常遇到的在網頁裡拉起一個系統app就是採用私有協議實現的。app在安裝完成之後會註冊私有協議到OS,瀏覽器發現自身不能識別的協議(http、https、file等)時,會將連結拋給OS,OS會尋找可識別此協議的app並用該app處理連結。
  • Recurseapp:向客戶展示你的設計
    首頁 > 傳媒 > 關鍵詞 > 設計最新資訊 > 正文 Recurseapp:向客戶展示你的設計
  • 譯文| 怎樣設計App可以獲得快速增長
    用戶需要滑動屏幕翻看完引導圖後才會進入註冊頁面。然後app會跳出標準的權限要求彈窗,「祈求」用戶允許app獲取他們的位置信息。60%的新用戶選擇了「no」,然後導致app接下來的頁面都變得毫無意義。為了解決這個問題,Asatryan測試了一個完全不同的方案:假設下載這款app的用戶已經了解了獲取他們位置信息的重要性。
  • 【技術】Hybird App中原生頁面 VS H5頁面
    Web App和原生app有很多大牛們都做過比較詳細的比較以及優劣勢分析,我主要對Hybrid App來簡要分析下,談談Hybrid App裡原生頁面和H5頁面的比較和分析。Hybrid APP指的是半原生半Web的混合類App。需要下載安裝,看上去類似Native App,但只有很少的UI Web View,訪問的內容是 Web 。
  • 探尋設計價值,住小幫app為設計助力
    8 月,深圳家居界迎來多個業內盛會,深圳國際家具展、深圳國際家居生活設計展等大展接連而至,各地家裝設計師聚集深圳,住小幫app線下分享會深圳站也吸引了眾多設計師。
  • app設計有哪些設計理念?
    app設計有哪些設計理念?在app的設計中,有許多設計理念是零基礎學ui設計的新人所不了解的,雖然小編說的這些理念或許只是一些建議,但是如果你能夠梳理清楚,對於設計也有一定的幫助,話不多說,我們接著往下看吧。
  • 網站建設設計之頁面底部如何設計?
    一個網站頁面是由頁面導航、頁面內容和頁面底部信息組成,很多企業往往注重導航和頁面整體的設計而忽略了網站底部的設計。其實頁面底部的設計也是網站建設設計中重要的一部分,可以向用戶傳達很多信息,不能不重視他。那麼網站底部應該如何設計呢?
  • 15款優秀移動APP產品原型設計工具
    算是移動App原型設計神器 ,很多公司在用:quora、sina、豆瓣、36氪、ifanr…操 作輕巧簡單:先用手機拍下草圖原型(存到POP app內);然後開始編輯圖片的哪個區域(按鈕)連結到什麼頁面,添加跳轉連結熱區,就可以在iPhone上給小夥伴們演示了,並且POP內嵌的交互動作 如側滑、展開、消失等,即可滿足一般的動態演示需要。不太明白?
  • [系列]APP設計之一:啟動頁
    最近一直在花時間琢磨各種各樣的app。看得多了,對於如何設計app有了一些自己的小心得,準備針對app的常見模塊總結下自己的想法,以加深學習效果。今天從app的啟動頁開始。多數時候在解釋不清楚的時候,我們會打開一個app,然後指著啟動頁說「喏,這就是啟動頁」。贊,漂亮地解決了問題。但在這裡我還是想要說下啟動頁的定義。因為,從定義中我們可以看出一個東西的根本,有利於我們討論如何設計它。啟動頁的定義:當應用程式被用戶打開時,在程序啟動過程中被用戶所看到的過渡頁面(或動畫)都被我們統稱為啟動頁。
  • 全面分析:APP中的消息功能設計
    大多推廣、促活、新聞資訊類的簡訊,其內容一般由3個部分組成:發送者:即產品或公司名稱;核心文案:儘量一句話告訴用戶產品有什麼活動、什麼優惠、跳轉連結:一般顯示為藍色下劃線的文字連結,用戶通過點擊文字可以實現跳轉,一般是到手機wap活動頁面、app下載頁面等。
  • 值得收藏的一組精選Dribbble健康運動類APP UI設計作品
    雖然過去幾年有一大批做運動類app的已悄無聲息的不見了,但是運動類的app仍然是未來的一個主力方向。今天我們精選類一些運動類app設計概念設計,希望能帶給大家一些靈感。1,Ranjith Alingal設計的app,創建運動內容,組隊,預定比賽。
  • 手機個性籤名設計軟體哪個好?6款手機籤名設計APP推薦
    1、籤名設計大師籤名設計大師app是一款籤名設計軟體,通過籤名設計大師app你可以方便的找到適合自己的籤名,美麗有大方,對於有需要的朋友來說不錯。  功能介紹籤名設計大師app集合多位書法藝術大家於一體,提供多達三十多種籤名樣式的藝術籤名軟體。軟體展現了中華五千年書法藝術的魅力,並融合了各個時期的著名書法家的藝術風格,使每一個籤名都充滿了藝術表現力。同時,你可以在軟體內臨摹生成的籤名, 將瀟灑的籤名分享到過的國內各大SNS平臺。
  • 10個最新手機美食APP界面設計欣賞
    移動軟體時代,簡單下載美食app,動動手指,滑動幾下手機屏幕,即可足不出戶,搜索,預定和購買各路美食。然而,對於作為手機app UI 界面設計師的你來說,最大的問題並不在於如何使用這些美食軟體來方便生活,而是在於如何才能為各類餐廳,酒店,咖啡館,水果以及飲料店設計出美觀,舒適且簡單易用的手機美食App,對吧?
  • 垂直化內容電商頁面設計Tips
    第二點,淺色背景的導航界面設計的搜索效率相對較高,因為深色背景頁面的無關刺激會對用戶搜索產生幹擾作用。第三:精選內容頁面會放置一些二級頁面的主推內容,快速便捷扼要的讓用戶了解到精選頁面都有些什麼。同時首頁對移動端總結的能力越強,越有調理,越能快速的幫助用戶定位,了解移動端的主要內容。
  • App啟動頁淺析:啟動頁分類與設計邏輯
    首先簡要的概括一下什麼是啟動頁:每次喚起一個app的時候,在進入app首頁之前的等待頁面。文章目錄如下:啟動頁設計目的啟動頁分類及樣式啟動頁邏輯及細節一、啟動頁設計目的當用戶點開app時,需要對於app內的素材進行加載,比如說加載圖片信息等等,為了給用戶呈現一個完整友好的app界面,這個加載素材的過程需要一定的時間,為了讓用戶在等待這一小段時間的時候減少一些困惑
  • 如何讓登錄體驗更佳:10個頁面設計技巧和例子
    登錄頁面設計是網站用戶體驗流程的關鍵部分。好的設計有助於推動訪問者訪問你的網站,並把新用戶進行轉化。它也給返回用戶一個簡單的方式登錄到您的網站。以下案例中我們將提供:當你設計你的登錄界面的時候,你應該做什麼和不應該做什麼。不是所有的提示和例子都適用於你的產品。關鍵是選擇最適合你的。