歡迎來到上海仝薪網絡科技有限公司官網,上海網站建設公司上海網站制作公司微信網站上海競價托管公司
咨詢,就免費贈送域名與服務器,咨詢熱線:13761675098當前位置: 競價外包 > 建站知識 > 網站建設知識 >
聯系我們
電話咨詢:13761675098
E-mail:[email protected]
地址: 上海市金園一路1118弄

從零開始,帶你掌握空狀態設計的正確方法

作者/整理:admin 來源:互聯網 2018-03-12

注:空狀態是APP內必然存在的一個狀態,適宜的空狀態設計可以提升用戶體驗,實現用戶留存。鑒于空狀態在異常狀態下的重要性及容易被忽視的現狀,本文以實際設計需求為例,從拿到需求到提出疑問,再到解決疑問,提出解決方案,設計方案呈現,逐一展示空狀態設計的正確打開方式。

文章大綱:

  • 需求&提出疑問:了解空狀態設計需求,了解空狀態是什么?舊版本的問題在哪里?如何以及為何要帶給用戶關愛,背后的產品目標是什么?

  • 解決疑問:空狀態出現在APP初次使用、完成或清空內容、軟件出錯等情境下。舊版本的問題在于設計不全面,與5. 0 品牌認知不符。傳遞關愛意味著產品是有感情的,而有情感人性化的產品更受歡迎。產品目標是間接提升用戶在產品內的留存,進而帶來點擊轉化。

  • 解決方案:如何讓這個目標具體化?尋找被普遍認知&廣泛使用的情感化空狀態設計,通過對競品的解決方案的分析,發現最常用的反思設計表現方式,從側面尋找什么樣的反思設計是受用戶喜愛的,得到可以借鑒的信息。

  • 設計方案呈現:結合美啦現有資源,完成設計方案。

一. 需求&提出疑問

美啦5. 0 空狀態的設計需求,即是對美啦5. 0 空狀態進行優化設計,使之能夠緩解用戶遭遇空狀態的挫敗感,給用戶關愛。

空狀態是什么?舊版本的問題在哪里?如何以及為何要帶給用戶關愛,背后的產品目標是什么?

二. 解決疑問

1. 從 4 個方面了解空狀態

△ 空狀態的 4 個方面

(1)定義

空狀態通常在初次使用、完成或清空內容、軟件出錯等情境下出現的頁面狀態。

(2)作用

空狀態應該達成三個目標:教育用戶、取悅用戶、引導用戶。每個空狀態都有其核心需要達成的目標。

(3)出現場景

用戶未進行操作、用戶操作結果、出錯。

(4)常用解決方案

使用系統推薦項、使用操作指引、使用緩存、情感化表達、提供新的任務。

2. 梳理舊版本空狀態設計問題

(1)設計不全面

4. 0 的空狀態設計不夠全面,場景繁多,空狀態里舊的品牌形象亟待更新,甚至部分空狀態頁面沒有任何內容。這都會使用戶在遭遇異常情況時,疑慮的情緒得不到有效疏解,這些問題都需要在這次的空狀態設計中解決。

(2)品牌認知不同

美啦5. 0 設計定位精致、時尚、品質感。而4. 0 的空狀態設計已不能很好的承載全新的品牌認知。因此空狀態的設計對于整個App的品牌統一有著重要的補充意義。

(3)空狀態冗余

經整理需要優化新增的頁面總計 20 個空狀態,由于空狀態頁面較多,將某些提示功能相近的空狀態使用通用的視覺表現形式。

3. 有情感人性化的產品更受歡迎

傳遞關愛屬于情感化設計的第三層——反思設計的核心。關愛意味著產品是有感情的,而有情感、人性化的產品更受歡迎。相比冰冷的流水線機器人手臂,擁有擬人化外型的「艾娃」更受歡迎。

△ 冰冷的機器人手臂VS人形「艾娃」

4. 產品目標

通過人性化的空狀態設計來緩解用戶遭遇空狀態的挫敗感,給用戶關愛。間接提升用戶在產品內的留存,進而帶來點擊轉化。

△ 空狀態設計優化目標

三. 解決方案

1. 競品選擇

通過對競品的解決方案的分析,發現最常用的反思設計表現方式,從側面尋找什么樣的反思設計是受用戶喜愛的。鑒于美啦的美妝及社區電商屬性,分別選擇了女性時尚類App:小紅書、See、HIGO及電商類App:閑魚、網易嚴選、淘寶。

△ 競品選擇

2. 競品空狀態分析

(1)競品空狀態內容

小紅書、閑魚、淘寶使用品牌形象作為空狀態的主體形象,主體形象使用品牌形象既能實現空狀態功能,也能不斷的增強品牌在用戶心中的形象。網易嚴選、HIGO、See使用了文字、圖形作為空狀態的主體形象。

各App的空狀態從不同角度體現了各自的品牌認知。

(2)情感關懷

小紅書、閑魚使用了萌萌的小紅薯和閑魚,淘寶使用了小人,網易嚴選使用了場景相關的物品,See和HIGO使用了文字及圖標。擬人的形象更能拉近產品與用戶的距離。

3. 結論

通過對競品空狀態的分析,主體形象使用品牌形象帶給用戶的情感關懷最好,同時品牌認知也比較明顯。

四. 設計方案呈現

1. 空狀態主體形象

從上述分析得出,主體形象使用品牌形象帶給用戶的情感關懷最好,同時品牌認知也比較明顯。

美啦5. 0 空狀態使用了品牌新形象:美啦兔——活潑又愛美兔子和她的小伙伴——負責送妝品的博克斯,一起作為美啦的代表與用戶互動。我們希望用戶在美啦的體驗是順暢的,但當她遇到空狀態時,有美啦兔陪伴她。

△ 美啦兔和她的小伙伴博克斯

2. 腦暴關鍵詞繪制草圖

確定主體形象和基本的結構之后,就需要在腦海中構思不同的場景,賦予美啦兔故事情緒。把所想到的場景都用文字記錄下來。比如購物車:趁年輕要剁手,快來填滿我,是時候拔草了;比如刷新,正在變美,馬上就好了。盒子里灑出妝品,你的包裹小盒到了。發散到一定程度的時候,可以進行收斂,把部分比較確定的場景用草圖表現出來。

草圖可以使大家更早看到實現效果,以及更快的做出設計調整。比如404,迷失在星空里,在山谷搜索信號,都可以表現出信號丟失的感覺,但是這樣的場景跟美啦美妝、女性社區品牌相距較遠。于是考慮用戶更熟悉的城市場景,同時用妝品替代城市的建筑,美啦兔在妝品的城市里,找不到回家的路。

3. 統一色彩規范

美啦5. 0 的品牌色仍然是美啦粉色,應用于主形象,并貫穿于整個空狀態;輔助色黃色,應用于輔助形象等;輔助色綠色、藍色作為場景元素等。

4. 統一設計元素

  • 右側來光,視角主要為正視。

  • 形象全部替換為最新的美啦兔,以美啦兔為主體,產生互動。

  • 微質感、淺淺的投影。主體元素有陰影,使之形象更豐富。局部描邊塑造結構。

  • 收斂出幾個容易引起用戶共鳴的場景,用詳細些的文案故事來描述,同時把成品圖和場景故事放出來, 404 的頁面、通用為空、購物車為空、刷新。

5. 場景展示

場景一

通用的「網絡異常」場景,美啦兔在妝品的城市里,找不到回家的路了。妝品的城市呼應美啦的品牌特色,形式的表達上選擇最具有代表性的口紅。美啦兔拿著信號接收器在口紅的高處尋找方向。

場景二

美啦兔也跟所有的小仙女一樣,想要一直都美美的。但是有時候美麗需要等待,就像刷新一樣,遇到網絡不那么好的時候,就需要小仙女美美的稍等一會哦。

更多場景(部分)

6. 空狀態界面

空狀態占頁面的面積情況分為 2 種:

  • 第一種全屏空狀態:導航+空白內容顯示區域。

  • 第二種非全屏空狀態:導航+部分內容+空白內容顯示區域。

全屏空狀態的空白區域較大,空狀態的視覺表現屬于主要內容,可以突出表現。

非全屏空狀態有部分正常的內容顯示,空白區域較小,空狀態的視覺表現屬于次要展示的內容,視覺表現需要服從主要的內容。

五. 小結與反思

空狀態的設計已經完結,但是美啦APP內情感化運營并沒有結束,在閃屏、運營活動、話題帖子、彈窗等的設計還在繼續。全面,并且連續不斷的情感化設計像一股暖流,給予用戶持續的關愛。

關于作者

Jenny黃靜雯 (微信公眾號:「Jenny黃靜雯」),平安銀行視覺&插畫設計師。微博設計美學博主,花瓣認證設計師,優優網入駐設計講師,深圳市插畫協會專業會員,視覺中國簽約設計師。

重庆时时彩官方网站app