首頁 >
熱門文章 >
UI設(shè)計 > UI/UE設(shè)計用戶體驗思考與總結(jié)（上）
UI/UE設(shè)計用戶體驗思考與總結(jié)（上）
時間：2020-12-16來源：lb577.com點擊量：次作者：Gella
時間：2020-12-16點擊量：次作者：Gella
指尖滑動屏幕的時候，多停留幾秒，捕捉一些用心的設(shè)計，記錄并反思應(yīng)用到自己的設(shè)計中去。設(shè)計讓我們更加美好!
01、分類導(dǎo)航篩選
關(guān)鍵詞
#導(dǎo)航分類 #主題
產(chǎn)品體驗
愛奇藝：頭部切換不同分類的時候，底部顏色跟著切換，氣氛跟專題搭配
騰訊視頻：頭部切換的時候，不同專題選中狀態(tài)個性化，有點突然
設(shè)計思考
愛奇藝：導(dǎo)航切換視覺上統(tǒng)一，專題顏色有帶入感，視覺上給用戶暗示視頻風(fēng)格
騰訊視頻：感覺每個分類都是一個獨立的頁面，風(fēng)格上都各自的排版布局
02、表單輸入框
關(guān)鍵詞
#表單文本輸入 #選擇輸入
產(chǎn)品體驗
貝殼：直接選中符合自己條件的選項，按鈕直接確定篩選。
釘釘：請假頁面，類型、時間選擇，選中之后右側(cè)有一鍵清除按鈕，時長自動計算。
花借：授權(quán)的時候輸入聯(lián)系人信息兩種屬性表單都靠右對齊。
設(shè)計思考
貝殼：視覺上閱讀左對齊，但單位離較遠(yuǎn)，缺少親密性。
釘釘：使用大間距留白，同類型文案歸類清晰，頁面內(nèi)容不多采用上下結(jié)構(gòu)，合理減少頁面留白
花借：統(tǒng)一右對齊，分割線半開半閉，給用戶可點擊，可編輯的感受。
03、篩選結(jié)果
關(guān)鍵詞
#篩選數(shù)據(jù)
產(chǎn)品體驗
拉勾網(wǎng)：直接選中符合自己條件的選項，按鈕直接確定篩選。
餓了么：篩選選項之后，文案提示“查看XXX商家”。
美團：篩選選項之后，按鈕顯示“完成X”個選項。
設(shè)計思考
拉勾網(wǎng)：求職者目標(biāo)明確，知道自己的目標(biāo)，所以文案不需要提示。
餓了么：服務(wù)用戶角度，幫用戶篩選適合的商家，增加用戶留存，更加有溫度，較好的體驗
美團：用戶視角，完成多個條件篩選，只提供幾個數(shù)字，缺少點溫度。
04、標(biāo)簽的使用場景
關(guān)鍵詞
#標(biāo)簽
產(chǎn)品體驗
B站視頻：通過標(biāo)簽可以引導(dǎo)用戶點擊感興趣的視頻。
支付寶口碑金剛位：展覽休閑突出賣點廣告位：有個光影藝術(shù)館。
愛奇藝：視頻封面標(biāo)簽，視頻來源，是否付費。
設(shè)計思考
b站：視頻封面因為是用戶自己上傳，風(fēng)格不同意，在封面上打標(biāo)簽識別性較差。
支付寶口碑：金剛位根據(jù)賣點，廣告位推送。
愛奇藝：標(biāo)簽在視頻封面上，視頻的標(biāo)簽商業(yè)屬性強，給用戶直接感受，根據(jù)自己的會員身份篩選。同時提醒用戶可以開通會員獲取觀看權(quán)力。
05、商品標(biāo)簽
關(guān)鍵詞
#商品賣點
產(chǎn)品體驗
視覺層級，幫助用戶快速篩選對自己有用的信息，品牌元素用色塊，賣點滿減信息用描邊標(biāo)簽
淘寶：品牌標(biāo)簽在商品名稱前面，賣點跟在價格后面。
貝殼找房：賣點跟在樓盤名稱后面。
京東：品牌跟賣點標(biāo)簽都在價格后面。
蘇寧：品牌標(biāo)簽在商品名稱前面，賣點標(biāo)簽再價格下方。
設(shè)計思考
一個商品有很多信息，如何快速抓取用戶有用的信息，幫用戶快速進(jìn)行篩選，提升產(chǎn)品使用效率，增加轉(zhuǎn)化率。
品牌標(biāo)簽根據(jù)用戶對品牌對依賴性程度，公司對業(yè)務(wù)需求來定。
06、qq選擇圖片松手發(fā)送
關(guān)鍵詞
#拖動
產(chǎn)品體驗
發(fā)送圖片的時候，長按一張圖片 可以拖動發(fā)送，有小字提醒“松手發(fā)送”。
設(shè)計思考
長按相冊拖動到對話框里，隨著手指移動，完成操作，讓用戶互動有參與感。
07、貝殼找房周邊配套多了附近樓盤
關(guān)鍵詞
#推薦更多 #全景
產(chǎn)品體驗
之前地圖只有一些周邊配套，現(xiàn)在還給用戶提供了更多出口：附近樓盤，咨詢窗口，可以查看全景。
設(shè)計思考
給了用戶更多選擇，讓用戶置身于樓盤場景中，身臨其境，同時直接抓住用戶心里，相同地段其他樓盤推薦，減少用戶跳出率，同時提供咨詢服務(wù)，拉新。
熱門推薦
UI設(shè)計
產(chǎn)品經(jīng)理
大數(shù)據(jù)分析
原畫設(shè)計
平面設(shè)計
新媒體運營 
