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