UI/UE設計師的產品體驗日記(01)

UI/UE設計師的產品體驗日記(01)

01、分類導航篩選

關鍵詞

#導航分類#主題

產品體驗

愛奇藝:頭部切換不同分類的時候,底部顏色跟著切換,氣氛跟專題搭配

騰訊視頻:頭部切換的時候,不同專題選中狀態個性化,有點突然

設計思考

愛奇藝:導航切換視覺上統一,專題顏色有帶入感,視覺上給用戶暗示視頻風格

騰訊視頻:感覺每個分類都是一個獨立的頁面,風格上都各自的排版佈局

02、表單輸入框

關鍵詞

#表單文本輸入 #選擇輸入

產品體驗

貝殼:直接選中符合自己條件的選項,按鈕直接確定篩選。

釘釘:請假頁面,類型、時間選擇,選中之後右側有一鍵清除按鈕,時長自動計算。

花借:授權的時候輸入聯繫人信息兩種屬性表單都靠右對齊。

設計思考

貝殼:視覺上閱讀左對齊,但單位離較遠,缺少親密性。

釘釘:使用大間距留白,同類型文案歸類清晰,頁面內容不多采用上下結構,合理減少頁面留白

花借:統一右對齊,分割線半開半閉,給用戶可點擊,可編輯的感受。

03、篩選結果

關鍵詞

#篩選數據

產品體驗

拉勾網:直接選中符合自己條件的選項,按鈕直接確定篩選。

餓了麼:篩選選項之後,文案提示“查看XXX商家”。

美團:篩選選項之後,按鈕顯示“完成X”個選項。

設計思考

拉勾網:求職者目標明確,知道自己的目標,所以文案不需要提示。

餓了麼:服務用戶角度,幫用戶篩選適合的商家,增加用戶留存,更加有溫度,較好的體驗

美團:用戶視角,完成多個條件篩選,只提供幾個數字,缺少點溫度。

04、標籤的使用場景

關鍵詞

#標籤

產品體驗

B站視頻:通過標籤可以引導用戶點擊感興趣的視頻。

支付寶口碑金剛位:展覽休閒突出賣點廣告位:有個光影藝術館。

愛奇藝:視頻封面標籤,視頻來源,是否付費。

設計思考

b站:視頻封面因為是用戶自己上傳,風格不同意,在封面上打標籤識別性較差。

支付寶口碑:金剛位根據賣點,廣告位推送。

愛奇藝:標籤在視頻封面上,視頻的標籤商業屬性強,給用戶直接感受,根據自己的會員身份篩選。同時提醒用戶可以開通會員獲取觀看權力。

05、商品標籤


關鍵詞

#商品賣點

產品體驗

視覺層級,幫助用戶快速篩選對自己有用的信息,品牌元素用色塊,賣點滿減信息用描邊標籤

淘寶:品牌標籤在商品名稱前面,賣點跟在價格後面。

貝殼找房:賣點跟在樓盤名稱後面。

京東:品牌跟賣點標籤都在價格後面。

蘇寧:品牌標籤在商品名稱前面,賣點標籤再價格下方。

 

設計思考

一個商品有很多信息,如何快速抓取用戶有用的信息,幫用戶快速進行篩選,提升產品使用效率,增加轉化率。

品牌標籤根據用戶對品牌對依賴性程度,公司對業務需求來定。

06、qq選擇圖片鬆手發送

關鍵詞

#拖動

產品體驗

發送圖片的時候,長按一張圖片可以拖動發送,有小字提醒“鬆手發送”。

 

設計思考

長按相冊拖動到對話框裡,隨著手指移動,完成操作,讓用戶互動有參與感。

07、貝殼找房周邊配套多了附近樓盤

關鍵詞

#推薦更多 #全景

產品體驗

之前地圖只有一些周邊配套,現在還給用戶提供了更多出口:附近樓盤,諮詢窗口,可以查看全景。

 

設計思考

給了用戶更多選擇,讓用戶置身於樓盤場景中,身臨其境,同時直接抓住用戶心裡,相同地段其他樓盤推薦,減少用戶跳出率,同時提供諮詢服務,拉新。

08、喜馬拉雅會員

關鍵詞

#付費 #會員

產品體驗

會員等級,沒開通會員的時候會送幾天會員體驗,往右邊滑動,不同等級會員卡片通過圖標、光感動效體現不一樣的尊貴感。

 

設計思考

會員的本質就是產品根據用戶的投入而給予的特權,滿足受眾的自我肯定,提升認可感和價值感,刺激用戶開會員享受服務。

09、貝殼找房戶型提問

關鍵詞

#客戶拉新

產品體驗

未登入狀態的時候,點擊戶型詳情的提問入口,會以氣泡的形式展開部分提問問題,再點擊就觸發註冊登錄彈窗。

 

設計思考

對未註冊的用戶提供部分展示信息,以氣泡發送的形式展示,刺激引導用戶點擊慾望,想要知道問答詳情,就需要登錄註冊,一個引導用戶留存的交互設計。

10、順豐速運保存地址

關鍵詞

#快捷保存

 

產品體驗

在填寫收件人地址的時候,底部有一個“保存到地址薄”的快捷操作按鈕。

 

設計思考

因為很多淘寶供應商,公司寄到合作方的合同等等情況,物流市場件多,工作量大。為提高工作效率,減少容錯率,用戶在第一次書寫地址的時候就可以選擇保存到常用地址。

11、順豐速運預計送達時間

關鍵詞

#預估價格 #送達時間

 

產品體驗

預計送達時間選擇的時候,用圖標的形式對應展示,很直觀的把物品的重量,價格、時間放在一個盒子展示。

 

設計思考

寄快遞最關心的就是時間跟價格,根據發貨物件重量對應郵費,不同時間緯度下的價格變化,給用戶一個心理價位,上面的時候預留好費用。

12、數字故宮在線逛展滑動

關鍵詞

#切換

 

產品體驗

左右大卡片滑動切換展會入口,正中央的卡片默認放大,視覺上離用戶更近一步,帶入用戶一個看展的感受。

 

設計思考

看展是體驗藝術文化的過程,需要用戶有帶入感,不像電商那種快速瀏覽,所以更深入的互動性,大卡片的那種banner 展示效果會讓用戶有點擊慾望。

13、小來打卡早起鼓勵

關鍵詞

#用戶留存 #排名文案

 

產品體驗

早起排名,超過50%(一定比例)文案鼓勵:比XX%的人起的早;起的晚低於50%之後:比760萬人起得早。

 

設計思考

打卡之後根據大數據分析你的排名,通過不一樣的數據單位展示。無論早起與否,滿足用戶自我滿足,自我安慰。從數字上鼓勵用戶早起,並能進一步刺激用戶轉發分享。

14、微信讀書-首頁卡片

關鍵詞

#社交 #拉新

產品體驗

首頁是大卡片切換區別於其他讀書類平台的沒有設置金剛位分類,微信讀書基於社交功能,提供一些跟好友的互動每日一答活動,集贊得聯名卡

設計思考

把讀書這件事情做成社交屬性,變相讓用戶主動去讀書,增加用戶活躍度,增加了用戶粘性跟用戶拉新。

15、惠擇網-便捷的客服顧問

關鍵詞

#信任感 #便捷

產品體驗

惠擇網App在首頁右側懸浮展示了客服諮詢入口,提供客服諮詢或者專業諮詢,降低用戶學習成本。

設計思考

為了降低瀏覽頁面時的干擾,上滑頁面會隱藏顯示1/3左右。以吉祥物小牛為客服形象代言,情感化的表現帶來更好的品牌傳播和親和力。帶給用戶信賴感,建立信任。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。