產品體驗思考-設計案例第4彈(31-40篇)
編輯導語:產品體驗是一個很好的培養自己閱讀習慣和設計思維的方法,但閱讀并把自己理解的東西寫出來呈現給別人確是一個很艱難的過程。本篇文章作者為我們分享了他自己在產品體驗中培養和運用設計思維的過程,從產品設計到對設計的思考,作者自己思考分析了自己關于設計的理解和經驗,一起來看。
設計成長在于日常的學習積累,多看多想多寫是最基礎的一種方式,體驗產品的一些設計點,思考并記錄能讓自己學習理解的更深。除了可以豐富自己的設計體系之外,也能從優秀的設計中吸收更多的東西賦能在自己的日常工作當中。產品體驗其實是一個很好的培養自己閱讀習慣和設計思維的方法。
簡單便捷易獲取,但閱讀并把自己理解的東西寫出來呈現給別人確是一個很艱難的過程。因為大家對于設計理解的也會千差萬別,所以內容的表達理解若有不恰當或站友不認同之處,歡迎指摘和交流討論。
內容不求有多出彩,只希望能彼此共勉,設計總結均由自己思考編寫,體驗中注明使用機型和產品版本、設計點類型,便于大家了解,文章篇幅過長,近1w字,閱讀時間會比較久,感謝你的細心閱讀,如你有疑問或建議可反饋留言!
2022產品體驗思考第4彈目錄:
- 01 飛書—好“特別”的首頁底部導航欄
- 02 釘釘—這個日歷功能設計細節滿滿
- 03 飛豬—好用的“始發-終點”站點篩選條件
- 04 掌上英雄聯盟—真的完全被你套路到了
- 05 鯊魚記賬—賬單內容竟然可以這樣修改
- 06 滴滴出行—多方式觸達打車出行頁面
- 07 微博—不同維度的用戶評論內容查看
- 08 極客時間—瀏覽和專注兩種學習模式
- 09 自如—Banner設計的無限可能性
- 10 招商銀行—主題的豐富程度的快趕上QQ了
01 飛書—好“特別”的首頁底部導航欄
1. 設計描述
(1)飛書底部tab導航欄框架主要是“業務功能”按鈕和“更多”按鈕組成,最多只能展示5個功能按鈕,主要功能總共有7個:消息、日歷、工作臺、云文檔、視頻會議、任務和通訊錄;點擊“更多”在底部會彈出 Actionbar(動作欄),顯示其他功能,點擊任一功能,在“更多”模塊下顯示相對應的頁面內,同時彈窗右上方有文字“編輯”按鈕,可以對7個主要功能就行編輯(顯示、隱藏、調整功能順序)。
(2)在功能編輯頁面中分為“底部導航”和“更多”模塊,在底部導航模塊可以點擊“減號”按鈕,對應的功能會自動落到更多模塊中,在底更多模塊可以點擊“加號”按鈕,對應的功能會自動添加到底部導航模塊中,按鈕點擊可以控制業務功能的現實隱藏,手勢拖動可以在兩個模塊之間調整功能的順序和隱藏展示,在操作過程中,下方的底部導航欄可以實時預覽調整效果。
2. 設計思考
(1)在工具類應用中,飛書的底部tab導航欄的功能按鈕的設計比較特別和富有新意,正常產品應用底部tab欄下方最多展示五個按鈕,在交互設計原則中有描述,“4+/-1”的數量是比較符合人的記憶習慣。飛書的底部最多也是5個功能,只是多增加了一個“更多”的模塊,讓模塊變為6個部分,用于業務功能的編輯。
編輯的內容包括對功能展示、隱藏和順序的調整。用戶在使用產品的過程中可以針對自己比較高頻的應用場景去選擇功能。靈活的功能編輯在某種程度上確實可以讓用戶選擇更加的方便。
(2)對于飛書的底部tab欄的交互設計方式類似工具類應用的金剛區編輯方式,飛書將這種可編輯的交互設計嫁接到底部tab上。創新的設計固然有可取之處,但是難免也會打破很多用戶的操作使用習慣。
底部導航欄中的每一個模塊在產品中是一個個比較獨立的功能,主要功能相對于次要功能,重要性會更強?!案唷本褪亲鳛橐粋€對其他功能的編輯輔助,當點擊更多按鈕時,彈出 Actionbar(動作欄),會有其他的一些功能,當點擊某一功能時,這個功能的內容還是處于更多模塊中,如點擊“消息”模塊時,消息還會是在更多的模塊中,但是這個會使內容和標題模塊不對應,雖然頁面左上方也會顯示頁面標題,但在內容表意上,讓用戶感知不明顯。
當用戶只選擇一個功能時,底部只有兩個模塊,會顯示的底部導航很空。飛書的設計可能在時考慮用戶的使用場景,讓用戶自己靈活選擇,但是否可以限定最小數量展示,讓功能更多被使用,空間合理利用。
02 釘釘—這個日歷功能設計細節滿滿
1. 設計描述
(1)釘釘日歷默認進入至展示一周的時間,當查看其他時間,當選擇“非今天”的日期,今天和選擇的日期會有明顯的樣式區分。如上右圖,16號為深藍底白色文字,農歷時間為藍色字,今天的日期為淺藍底背景作區分。釘釘日歷中增加未來7天天氣情況查看的功能,今日至后面一周的天氣,在日期時間下方會有天氣情況的圖標樣式。
當左右滑動查看臨近一周的時間信息時,中間會僅顯示此一周的開始和截止日期時間的文字(如:上右圖左滑,中間顯示“12月 19日-25日”字段,停頓數秒后再顯示下一周的具體時間)。
當手動操作下滑拉動日期,會顯示更多的時間內容,背景底部會有當月月份的數字顯示,此狀態下也可以左右滑動查看相鄰月的時間信息。
若選擇非今日的時間時,右下方會有一個返回按鈕,點擊可以直接回到今天。選擇的時間<今天,返回按鈕朝右,選擇時間>今天,返回按鈕朝左。同時日歷視圖還可以根據日、3日、月、列表進行設置展示。
2. 設計思考
(1)釘釘日歷可以作為一個用戶日?;顒邮录挠涗浌δ?,日歷視圖可以根據分類有多種形式的展示,相關日期的天氣情況展示,切換中的數字時間段提示,下方的返回按鈕的設計。
(2)日歷視圖根據分類可以將頁面上下分或整個平鋪。用戶可以根據自己的時間或閱讀習慣選擇自己所需要的展示方式,用戶可以根據“日,3日”分類選擇內容上下展示的方式,瀏覽時間和日程,同時還可以也可以使用“月”的展示方式,讓內容平鋪整個頁面,閱覽當月時間日程的更多信息,用戶還可以在已有的日期中直接點擊修改或者新建。用戶還可以根據“列表”形式時,讓日程會以文字列表的方式從上往下排列去瀏覽。
日歷的豐富形式可以滿足不同類型用戶的使用需求。日歷對應的日期會展示未來一周的天氣情況,可以幫助用戶的出行安排。周時間段的切換過程中,有幾個細節,首先切換中增加時間段的顯示,用戶在工作中比較關注對應的工作日期,日常工作安排都是以具體時間為準,時間段的增加能很好幫助用戶記憶一周的開始和結束時間。
其次就是文字字段的處理如“12月 19日-25日”,將月和“日時間段”單獨分離開,將本來的一個整體時間段拆分成兩個部分,一連串的文字對于用戶記憶花費的時間更多,這樣的設計更便于用戶理解和記憶。
03 飛豬—好用的“始發-終點”站點篩選條件
1. 設計描述
(1)飛豬在使用乘坐火車的交通方式時,在選擇好“始發-終點”地點開始搜索火車票后,車次列表頁面可以展示當日所有的列表班次信息,在標題欄的中間會顯示始發終點站和當天次班次數量的信息。
如上右圖,進入頁面前我選擇出發地的時候是自動定位選擇了上海市,進入頁面后會顯示所有的“上?!蔽淖珠_頭的車站到終點站的班次。在頁面提示信息的下面。是始發和終點車站的條件選擇。
若進入頁面之前選擇的是(始發/城市-終點/車站),那頁面中的篩選條件中的終點車站會有選中的標記,當再次點擊此標記,終點站的搜索會變成整個城市所有的站點。如進入頁面前選擇(上海市-銅陵站),進入車次頁面,“銅陵站”會被標記,標題欄上的文字變為“上海市-銅陵市”,若再點擊“上海站”和“銅陵站”,選擇始發站點后,車次列表信息就會重新刷新,始發和終點會變成唯一的地點。
2. 設計思考
(1)飛豬的火車票購買流程中,在車次列表頁面中將重要且頻繁的篩選條件(“始發-終點”站點)單獨放出來。這個篩選設計也滿足了用戶針對性的場景使用需求:用戶如何去有效率選擇的合適的站點,進行搜索。
市面上的購票應用中,所有的車票信息展示都是按照時間去排序。時間選擇確實也是用戶購票的第一需求。相比較地點,車次時間的選擇也更方便用戶進行合理的安排。但在平時的購買火車票的環節,我們有時候不會第一時間去鎖定車次信息,進行購買。
用戶會去考慮自己出發和到達的位置,會去挑選距離自己最近的車站去乘車,考慮去選擇離最終目的地更近的終點站。當沒有任何條件篩選時,也會出現不同始發站但相鄰近的時間點車次。這樣對于用戶選擇的干擾很強。
實際購票過程中我確實也因為這個問題,不止一次錯誤的的完成車次購買,很容易增加誤操作的幾率。車站的條件篩選不會影響時間維度的車次信息展示。車次不管在什么篩選條件下時間都是正序的排列展示方式。
這樣的篩選結束后,我們可供選擇的車次信息會更加精準,不過任何設計也不可能百分百的避免發生錯誤,但是合理的設計能讓錯誤在某種程度上有效的被避免,盡可能的解決用戶操作中的問題。
站點篩選條件的位置至于車次上方,不干擾頁面車次信息,更易于操作點擊,選擇點擊站點后可實時在列表查看車次信息。飛豬購票的設計也不是最完美的,比如說他沒有往返車次的購買,車次信息展示也沒有攜程全。
04 掌上英雄聯盟—真的完全被你套路到了
1. 設計描述
(1)打開掌上英雄聯盟app,在首頁會彈出一個異性彈窗圖,彈窗圖展示一些運營活動信息,引導用戶去進去相關活動頁面。彈窗內容主要包括關閉按鈕,運營活動異性圖,頁面入口按鈕,“不再顯示”的選框,彈窗彈出時默認勾選“不再顯示”,點擊關閉按鈕,彈窗不會再出現,當不勾選“不再顯示”彈窗,點擊關閉按鈕,彈窗消失,當點擊頁面中的內容進入查看后再退出,會再次彈窗運營活動過彈窗引導用戶點擊。直到用戶勾選“不再顯示”,點擊關閉按鈕,彈窗才會消失,不然在點擊頁面中的內容退出后都會彈出彈窗。
PS場景:首次進入app時,勾選“不再提示”后,點擊關閉按鈕后,彈窗短暫消失后會再次重新彈窗,進行第二次重復操作,當再次點擊關閉按鈕后,彈窗才消失不再出現。
2. 設計思考
(1)掌上英雄聯盟這個彈窗設計,在設計體驗上個人認為挺奇怪的,甚至有點被強制和“欺騙”的味道,但是在引導用戶運營活動轉化率上應該是非常有效果的。下方勾選框的作用,主要是控制彈窗的出現,但設計上默認是勾選“不再提示”,用戶點擊關閉按鈕就不會再出現了,但它根據用戶心智和操作習慣做了些的微小調整。
我們在使用app過程中經常會有一些操作提示彈窗,但是這種默認勾選,如果再沒有注意到旁邊文案的時候,會讓人下意識的去認為這個勾選了是不是對我會有什么影響,下一步都會選擇取消掉,這樣讓用戶覺得我已經規避了什么麻煩的事情。
當你取消的時候你就掉進了產品設計的坑了,這樣彈窗會再次彈出,增加用戶點擊的幾率。正常的用戶操作習慣,如電腦中文件夾多個同名文件的替換時,彈窗中的選框都是默認未勾選,用戶選擇再確認,所以掌上英雄聯盟的彈窗就很“反常識”的設計。
(2)產品設計彈窗機制的時候,目標是為了增加彈窗的轉化率,若用戶勾選了“不再提示”,用戶在進入其他內容頁面后,還是會有退出彈窗,彈窗強制展示給用戶。首先產品設計了這樣的彈窗機制,考慮到用戶體驗,如果一直彈出會讓用戶很反感,所以在彈窗的下方增加取消彈窗提示的操作。這樣讓用戶可以有地方能將煩人的彈窗提示取消掉。不至于太影響用戶體驗。
05 鯊魚記賬—賬單內容竟然可以這樣修改
1. 設計描述
鯊魚記賬首頁的賬單列表中,每一個列表支出賬單都是有三個部分組成:支出圖標類型,支出備注、支出費用,每個部分都可以單獨點擊進行修改。
點擊圖標進入支出類型頁面,重新選擇類型圖標進行替換,點擊支出備注,支出備注內容區域以外部分會有黑色遮罩效果,備注修改時,鍵盤上方有一個常用(系統會記錄每一次修改的備注作為常用備注)的備注選項,點擊支出費用是和修改支出備注的效果一樣,都會有遮罩效果,鯊魚記賬自帶的數字鍵盤中會有日期選擇,可以進行支出日期選擇,若選擇非當天的日期后,這條列表的內容會從當日的記賬列表內容中抽離出來,自動落到當天記賬內容的下面。在同一天的記賬列表中對其中的一個內容進行修改,修改完成后,當前列表會自動置于列表內容的頂部。
2. 設計思考
(1)鯊魚記賬的賬單列表數據修改更加簡單和獨立細致了,支出賬單的核心三個內容主要是消費支持類型、消費備注和消費金額,簡單在于用戶可以在修改備注和支出金額時,都可以直接在當前頁面掉起鍵盤對文字進行編輯。點擊消費支出類型圖標進入支出類型的選擇。獨立細致的設計是在操作使用中,點擊和輸入是兩個完全不一樣的用戶行為,消費類型時通過點擊圖標的形式進行修改和選擇,備注和金額是通過文字來展示。
這個相比較“口袋記賬”??诖涃~的賬單內容修改是在同一個頁面中。實際操作時,進入頁面就會出現數字鍵盤,上方展示所有的類型圖標,但是鍵盤的存在會占據頁面空間,擋住下方的圖標顯示。這樣操作的區域和靈活性就不會那么容易被把控。
(2)簡單獨立的的設計讓用戶賬單內容修改的效率也會高更多,在記賬過程中,整個賬單都要重新修改的問題應該是比較少見的,因為如金額的信息都是很準確的,修改比較頻繁可能是比較有疑惑的描述或類型選擇。
例如我只是想修改備注描述,那我可以直接在當前頁面點擊備注文字區域直接進行修改,這樣修改觸達的時間非??於珳?。修改類型可以直接類型頁面,進入頁面就能看到圖標,沒有冗余的操作和信息干擾。鯊魚記賬也是秉承工具類產品的原則:風格樸素,操作簡單。有記賬習慣的朋友還是可以試試它的!
06 滴滴出行—多方式觸達打車出行頁面
1. 設計描述
(1)滴滴出行首頁中,可以有三種操作方式進入到出行打車頁面,點擊功能按鈕、地點信息輸入模塊下拉、地圖觸控等都可以進入打車頁面。首頁第一屏默認主要顯示地圖,地點選擇、其他業務功能等。點擊按鈕,整個頁面從右至左滑動顯示,首頁地點信息輸入區下拉拖動,地圖顯示區域增多,信息地點選擇模塊消失后重新從底部彈出,完成打車頁面切換過渡。地圖區域觸控操作的轉場過程和“地點選擇模塊”下拉一致。
(2)打車頁面中,地圖中會展示和很多標記性的設計樣式,進入頁面會自動定位,之前的定位圖標會抖動變為一個指示牌,里面展示定位的地點名稱。點擊可以進入地點選擇頁面,地圖中還有行駛的模擬小車、用戶目前的位置和提供兩個附近建筑的可以上車的點。
2. 設計思考
(1)打車是滴滴出行的主要業務。在首頁的整個頁面布局里面可以看到,打車功能占據了首頁的一半以上的空間,由于新業務的滲透和新功能的增加,滴滴首頁也是為這些內容省出了一些空間。但是主營業務的打車出行功能還是主推的。在基礎功能的第一個位置就是“打車”。
打車功能在頁面空間上的收縮,也讓滴滴在交互形式上做了很多補充。打車頁面觸達方式和路徑有很多,方式有點擊和下拉、觸控三種方式。首頁中地圖和地點信息輸入,在視覺設計上獨立又統一。信息輸入覆蓋在地圖上,整個模塊外邊框又增加粗描邊效果讓兩部分包在一起,和其他內容有區分。
(2)在打車頁面,當用戶定位后,提示附近建筑哪里是可以上車的點。這個讓用戶也是比較方便直接的去到合適的地點等待車輛。打車軟件的定位功能已經越來越精準了,用戶在移動過程中,隨時重新切換地點,司機都能找到你。但是對于路況復雜的城市,用戶和司機都是雙向努力的。
滴滴設計用戶可以上車的點的提示,除了讓自己乘車更有效率,同時也能幫助司機規避違規停車的風險。比較了下同類的打車軟件,高德地圖基本覆蓋了滴滴出行的功能,唯一的變化是在那個定位后的文字展示上,除了地點名字之外還有一個到達時間的提示。哈嘍單車的打車流程基本是沒有什么好的體驗,操作很難受,需要點擊圖中的全屏按鈕才能進入到完整的打車頁面。
07 微博—不同維度的用戶評論內容查看
1. 設計描述
微博首頁“推薦”模塊,點擊列表中的博主或各大官方機構發布的內容,進入到內容詳情頁,在評論內容查看區域的右上角,有個條件篩選的控件,用戶可以選擇不同的緯度去查看其他人的評論內容,默認按熱度排序,點擊控件,在文字下方會出現一個彈出框,彈出框中有幾個篩選條件選擇,分別為“按時間、按正序、按倒序、按熱度”,點擊篩選條件后,評論標題一欄會直接吸頂,用戶可以上下滑動查看評論內容,同時頁面下方會彈出可以博主關注的浮層。
點擊關閉按鈕浮層退出。當進入頁面上滑查看更多信息時,當評論區內容滑動頁面中間位置后,底部也會彈出浮層。
2. 設計思考
(1)微博的博主評論區一直是粉絲吃瓜討論的重要區域。評論區的留言多而龐雜。不是所有的精彩評論都會被看到,隨著評論的增加,很多有價值的評論會被覆蓋掉。評論增加條件篩選,時間維度上分為倒序、正序去調整評論區展示,按熱度可以講一些討論比較激烈,比較多的有價值的內容放出來。
其實對于評論的內容在任何終端頁面顯示上都是一個比較煩的存在,因為頁面的承載空間無法完全高校的將龐大的內容信息展示給用戶。有很多評論信息還是不能被我們抓取。但是篩選條件的存在可以讓比較一部分有意思的評論能夠被用戶了解到。雖然還是不能最大化的錯過討論吃瓜的機會!用戶在瀏覽感興趣的討論內容時,博主關注的浮層引導能夠讓用戶更加接近關注博主。
(2)在篩選功能也可以做一些交互優化,現在的交互效果是點擊出現下拉框,下拉框展示曬選條件,評論條件的曬選其實可以參照旁邊“贊”的篩選控件設計,它將篩選條件平鋪左右滑動去點擊。目前評論展示的篩選條件比較少,而且針對不容博主內容篩選條件都會有所不同,但是后續如果增加篩選條件,在交互操作簡易程度上:滑動>點擊>輸入,左右滑的查看方式也更加方便,也能和產品其他功能的交互控件設計統一。
08 極客時間—瀏覽和專注兩種學習模式
1. 設計描述
極客時間的學習模塊有兩種學習模式,分別為“專注模式”和“瀏覽模式”,默認模式為瀏覽模式,展示學習歷程、學習軌跡、正在學習、輕松堅持學、熱門劃線等模塊,切換到另外的專注模式下,主要展示當前正在學習的一些課程。
所有信息僅一屏展示,不支持上下滑動,頁面標題欄有上方是按鈕,在兩種模式下,點擊都會進入有聲播放詳情頁面,退出頁面后,有聲播放按鈕消失,下方會出現有聲播放詳情頁浮層入口,關閉浮層,右上方按鈕恢復。
頁面中有個類似書籍的設計輪播展示樣式,可支持左右滑動,查看其他講師的課程,滑至最后一個課程時,最右邊會出現查看更多的課程按鈕。書籍封面展示課程的信息,包括講師頭像,課程名稱,課程的數量、學習進程等,下方展示用戶的學習軌跡。
2. 設計思考
(1)針對用戶的學習目的性強和弱的場景,極客時間將學習板塊分為兩個模式,幫助用戶在學習過程中的的狀態切換,“瀏覽模式”和“專注模式”主要區別是頁面內容上,瀏覽模式展示的信息會更多,專注模式讓用戶專注課程學習,收縮信息量,將課程更專一的推送給用戶。
不管在何種模式下,頁面下方的浮層入口的隱藏或顯示和右上角的按鈕聯動。有聲聽說已經越來越被用戶適應,在同等時間內,有聲閱讀的成本相比較純文字的閱讀要低,所以這也是極客時間想要保留和極力促進用戶使用的功能。但是對于有聲播放的入口和按鈕的聯動在其他模塊都會存在,但聯動的主要目的也是為了展示或者隱藏這個功能。
如果這個功能確實比較重要,其實也是可以考慮刪除浮層入口中的關閉按鈕,采用其他的設計方式,每一個模塊都要為了聯動而去增加一個按鈕來聯動確實比較浪費也看空間。因為如果不關閉它,就是需要一直顯示,也不會影響用戶使用和瀏覽。
(2)頂部的模式切換入口的文案,在語意理解上也是非常繞,比如上方顯示專注模式,那現在這個算是專注模式還是瀏覽模式。如果是“專注模式”,那這么多信息內容符合“專注”的語意表達么?
還有一個模式中不同的模式還需要用不同的按鈕來表示,其實這個功能主要是用意圖就是模式切換。所以在按鈕和文案上我覺得可以略作修改。按鈕統一使用有“切換”語義的按鈕。文案可以做如下修改,在默認模式瀏覽模式下,文字表達為“切換至專注模式”,雖然文案略長,但是讓用戶能明白我現在是什么模式,點擊按鈕切換的又是什么模式。
09 自如—Banner設計的無限可能性
1. 設計描述
(1)自如的首頁輪播Banner上有兩種非常富有新意的交互方式,一種是正常的左右滑動操作,輪播圖會出現元素拆分閉合的場景,另外一種是手握設備進行不同角度晃動時,頁面中Banner區域相關元素給用戶的感應反饋。
Banner的是由圖片背景和文字或小元素部分組成,當用戶左右滑動操作時,前一張輪播背景圖在當前位置消失,第二張的輪播背景圖慢慢漸現,文字內容以及原本在背景中被拆分的元素也隨著滑動操作出現,和背景圖融合,在每次切換的過程中,輪播圖都會在水平方向進行有次序的拆分和閉合。
當用戶手持手機通過三維空間進行搖晃,背景圖和文字、小元素等會隨著要懂得方向進行移動,背景圖會移動到屏幕里,小元素會移動到輪播圖區域之外,形成錯位移動的即視感。
2. 設計思考
自如的輪播圖設計真的刷新用戶認知,讓設計充滿了無限的可能性。這種錯位聯動、搖晃感應的操作給產品增加了不少亮點。用戶對于輪播圖的設計認知,還停留在整張圖片讀秒切換階段。
輪播圖切換通過左右滑動的交互方式讓元素拆解拼合,同時進行聯動,形成錯位感,晃動通過借助傳感器來獲取當前手機傾斜的方向和角度,計算元素需要移動的距離,產生傾斜移動的的錯位效果。一個簡單的banner模塊也可以通過設計思考和結合技術手段呈現出富有創新型的玩法。
自如在輪播圖中具有差異化的設計方式,也支持了自己產品在用戶體驗方面負有競爭力。這個有趣的設計值得思考的是:當技術壁壘被打破之后,設計就不會那么的被限制,能創造出更多的有趣的東西,賦予產品更多的價值。
10 招商銀行—主題的豐富程度的快趕上QQ了
1. 設計描述
招商銀行我的模塊的設置功能里,點擊主題中心進入主題庫。里面有豐富的主題可供用戶選擇,主題庫中會提供用戶集中免費的主題。剩下的主題需要用戶用過積分兌換、活動領取等用戶行為來獲得。
當用戶點擊免費主題時,可以進行設定或預覽。當點擊預覽時,會進入主題應用預覽頁面,使用“我的模塊”頁面作為預覽效果的呈現,點擊設定會直接返回到我的頁面。主題皮膚的主要應用區域在解鎖頁面、底部導航欄的圖標、我的頁面。
在底部導航欄每個模塊都會變成對應主題的圖標設計。我的模塊的頂部區域和賬戶總覽模塊也是對應的添加了主題的元素和對應的顏色,用戶頭像上也會有比較豐富的主題設計;應用退出后再次點進進入,切換到我的模塊會出現頁面解鎖,也會有對應主題元素。
2. 設計思考
銀行軟件中基本很少會看到這種功能,主題皮膚設置是和銀行業務相互綁定的。銀行現在都會出IP聯名卡,通過不同的IP形象來吸引客戶辦卡,提升銀行業務。
招行銀行主題種類非常繁多,在主題設置選擇中,將聯名卡業務也穿插進來。有基礎的主題給用戶選擇,也有通過申請聯名卡獲得對應主題。海量的皮膚選擇可以增加用戶粘性,主題設置更類似一個娛樂的功能。
在設定之后,用戶可以實時查看主題在頁面中的效果。用戶可以反復去嘗試裝扮自己的頁面,獲得趣味感。底部tab的icon全部換成主題元素了。這樣的設計讓頁面變得非常場景化,富于變化。聯名卡申請獲得對應主題也讓辦卡業務能夠很好的被銜接起來。一網通登錄、積分兌換、聯名卡辦理等方式讓主題的獲得途徑也變的極其豐富。
總結
產品體驗思考用于自己的日常積累學習,助力自己養成勤于寫作和思考的習慣。提升自己的撰寫和表達能力!
案例內容的表達和理解有不恰當或站友不認同之處,歡迎指摘和交流討論,碼字不易,謝謝支持!
本期分享到此結束。持續學習,助力成長!
本文由 @Q什伍 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
- 目前還沒評論,等你發揮!