![]()
0_封面.png
改版背景
在當(dāng)前日常工作中映跟，由于碎片式迭代較多且原型由產(chǎn)品經(jīng)理直接給到世曾，導(dǎo)致設(shè)計師無法對產(chǎn)品有一個結(jié)構(gòu)化裕循、整體化的認識时迫，大部分優(yōu)化也是基于原有設(shè)計風(fēng)格和組件進行新的業(yè)務(wù)拓展椎扬，長時間積累之后惫搏，會造成設(shè)計師與產(chǎn)品經(jīng)理的業(yè)務(wù)認知差距拉大具温，在方案設(shè)計時會偏離業(yè)務(wù)。
優(yōu)化流程
其實作為設(shè)計師筐赔，日常也會向產(chǎn)品反饋一些產(chǎn)品在使用體驗上的問題铣猩，不過大多時候問題總是不了了之。
作為設(shè)計師川陆，內(nèi)心通常是崩潰的剂习。
因此，相對于口頭提需求较沪，將方案轉(zhuǎn)為視覺稿或者概念稿鳞绕，可以進一步加強說服力。
然而實際上尸曼，作為設(shè)計師要主動推動項目優(yōu)化们何，阻力是比較多的。例如控轿，當(dāng)設(shè)計師按照自己的想法去進行一些優(yōu)化時冤竹，首當(dāng)其沖的就是會面臨各種質(zhì)疑，“你為什么要怎么修改”茬射，“這和原版的區(qū)別是什么鹦蠕？“你的方案優(yōu)勢在哪里？”
不由得讓人想起《長安十二時辰》里的經(jīng)典語錄在抛，其實潛臺詞就是：
所以钟病，在進行優(yōu)化提案時，首先要對自己提問刚梭，方案是否經(jīng)得起推敲肠阱，相對于原稿做了哪些優(yōu)化，是否是過于在意視覺表現(xiàn)而忽略了業(yè)務(wù)訴求等等朴读。
不過屹徘，本次優(yōu)化也是基于對產(chǎn)品有一定的了解之后，首先按照自己對產(chǎn)品的認知衅金，進行原型圖概念設(shè)計噪伊，再通過概念設(shè)計與產(chǎn)品經(jīng)理進行溝通。
改版目標的確立
在最開始接觸產(chǎn)品時氮唯，只能確定產(chǎn)品屬于新零售行業(yè)酥宴。沒有數(shù)據(jù)、沒有明確的產(chǎn)品定位您觉、以及包括我在內(nèi)的設(shè)計師對業(yè)務(wù)的認知不夠清晰拙寡。
產(chǎn)品的數(shù)據(jù)埋點才剛開始搭建，關(guān)鍵性的數(shù)據(jù)分析很難獲取琳水，至于產(chǎn)品本身的定位肆糕，只有一個大方向就是新零售般堆，至于用戶如何使用和看待產(chǎn)品，在很大程度上都只能聽產(chǎn)品經(jīng)理的描述诚啃。
按照用戶體驗五要素來看淮摔，如果此時想進行完整的體驗優(yōu)化，難度是非常大的始赎，因為設(shè)計師對于產(chǎn)品的認知有了斷層和橙，主要負責(zé)內(nèi)容也停留在框架層和表現(xiàn)層。因此造垛，此次體驗改版則以最可能推動產(chǎn)品優(yōu)化的方案為目標入手魔招，也就是最小成本入手，只對框架層五辽、結(jié)構(gòu)層和表現(xiàn)層進行優(yōu)化办斑。
問題總結(jié)
僅從表現(xiàn)層、結(jié)構(gòu)層來看杆逗，慧徠店APP的問題可以概括為
優(yōu)化方向
基于以上問題乡翅，將優(yōu)化方向也分為以下三點
首頁問題
首頁作為產(chǎn)品最主要的頁面,承擔(dān)著產(chǎn)品的視覺風(fēng)格與主要業(yè)務(wù)，但此次優(yōu)化首先將問題聚焦于產(chǎn)品可用性上： 1.將【今日收款】功能的可點擊狀態(tài)明確表現(xiàn)出來罪郊，并根據(jù)商戶的不同狀態(tài)展示不同的功能蠕蚜； 2.將圖標按照高低頻使用做了明顯的層級劃分； 3.對于消息功能不夠吸引人的問題悔橄，則是由于原版字號過小靶累，且引導(dǎo)按鈕不夠明顯，因此優(yōu)化方向也是加大字號橄维，加強字體層級展示尺铣，并放置一個更為明顯的點擊按鈕拴曲；
4.對于有歧義的微文案進行調(diào)整争舞，如【流水查詢】改為【交易流水】等，避免給用戶造成該功能只能“查詢”的誤解澈灼。
然而首頁上竞川，點擊收款金額和賬單記錄后會進入同一個頁面，造成功能重復(fù)叁熔，于是便對【今日收款】功能進行了重構(gòu):
1.對于用戶來說委乌，查看金額不止于今日，通常會有本周荣回、本月等概覽遭贸，需要在原有基礎(chǔ)上查看多個時間段數(shù)據(jù)； 2.優(yōu)化點擊后的詳情頁心软，并將位于【我的】頁面里的【我的余額】功能放入【我的錢包】中壕吹，將產(chǎn)品中關(guān)于金融著蛙、提現(xiàn)的功能集成在一處，避免結(jié)構(gòu)或者功能混亂耳贬；
商戶頁優(yōu)化
商戶頁面的功能主要在于交互設(shè)計的不合理踏堡，因此優(yōu)化方向也是在原有基礎(chǔ)上優(yōu)化交互方式： 1.改變大卡片式的設(shè)計，實際切換卡片時只有用戶名稱進行了切換咒劲，因此在交互形式上只做商戶名稱的改變即可顷蟆；
2.改變圖標區(qū)域的的視覺呈現(xiàn)方式，從圖標形式改為列表形式腐魂，提升頁面的空間利用率帐偎，避免造成大量留白和視覺不齊的情況；
3.右上角【+】號功能分為商戶綁定和信息刷新挤渔，根據(jù)奧卡姆剃刀原理-如無必要肮街，勿增實體，現(xiàn)可以去掉手動刷新判导，并顯示隱藏功能嫉父；
4.將消息提醒功能改為snackbar，并可隨時取消眼刃，避免對用戶造成干擾绕辖。
交易流水界面優(yōu)化
交易流水頁面的問題主要在于篩選交互過于冗余，原版在篩選功能上擂红，既有快速篩選仪际，又有全部篩選，一方面造成了功能重復(fù)昵骤，讓用戶理解起來產(chǎn)生歧義树碱，另一方面，當(dāng)涉及到二次篩選時变秦，又會彈出新的彈窗成榜，在交互結(jié)構(gòu)上會顯得很復(fù)雜。因此蹦玫，交易流水的主要優(yōu)化層次方面有：
1.精簡文案赎婚，由【交易流水查詢】改為【交易流水】；
2.修改交互方式樱溉，在繼承原版交互結(jié)構(gòu)的基礎(chǔ)下（保留快速篩選）挣输，將不常用的篩選功能放置在最后一個選項里，并優(yōu)化二次篩選福贞、三級篩選的結(jié)構(gòu)撩嚼，避免出現(xiàn)過多彈窗；
3.加強固定業(yè)務(wù)展示的層級，并減少整體分割展示完丽。
對于交易流水頁面中的固定業(yè)務(wù)模塊向瓷，在考慮其邊界值時，也嘗試了多種方案舰涌，但此處只是根據(jù)原版UI做的版式優(yōu)化猖任，在功能和結(jié)構(gòu)上是否還可以進一步優(yōu)化則有待商榷。
賬單查詢
賬單查詢頁瓷耙，其主要問題也在于交互問題朱躺，對于商戶的使用邏輯來說，首先是日月賬的切換搁痛，然后才是針對不同門店的日期篩選长搀，因此在邏輯上也按照日月賬切換-門店選擇-日期選擇的順序來進行層級劃分。
賬單詳情頁原本是通過賬單頁點擊進去之后才有的鸡典，按照之前的邏輯源请，從某一個賬單單擊進去之后，依然可以進行全局的賬單切換彻况，在這種邏輯下谁尸，賬單詳情與賬單頁應(yīng)屬于并列關(guān)系而不是上下級關(guān)系。其次纽甘，對于支付情況的統(tǒng)計良蛮，目前只有四種支付方式，因此可以將統(tǒng)計方式換成更為直觀的數(shù)字統(tǒng)計悍赢，而總覽統(tǒng)計形式改為折線形式决瞳，便于用戶更直觀的觀察收入情況。
商戶詳情頁展示
商戶詳情頁被線條切割左权，整體視覺的負擔(dān)較重皮胡，且標題與內(nèi)容被切割得過于分散，使標題的從屬關(guān)系難以辨認赏迟，因此優(yōu)化后采用卡片式設(shè)計屡贺，去掉線條分割帶來的視覺負擔(dān)，并加強標題與內(nèi)容的關(guān)聯(lián)瀑梗。
之前在做表單相關(guān)的組件時烹笔，在組件使用的場景上是特別讓人頭疼的裳扯，因為修改前抛丽，數(shù)據(jù)輸入和數(shù)據(jù)展示的樣式是一致的，無論對用戶還是設(shè)計人員來說饰豺，都會造成混亂亿鲜。
表單的交互會復(fù)雜一些，不過依然可以從以下幾個點來進行優(yōu)化：
- 表單標簽
- 輸入限制
- 占位符
- input 輸入框大小
- 輸入框焦點
- 多行文字規(guī)則
- 報錯提醒
- 喚起鍵盤樣式（移動端專屬）
- 幫助性信息
- 表單屬性（是否必填）
- 結(jié)果反饋
- 微文案
結(jié)果如下圖
設(shè)計規(guī)范總結(jié)
在視覺表現(xiàn)上，增加了文字的視覺層級蒿柳，并增加了間距大小饶套，使整體的節(jié)奏感和可讀性更好。
溝通與反饋
用這套方案垒探，我分別去和組長妓蛮、產(chǎn)品經(jīng)理以及領(lǐng)導(dǎo)去進行了討論溝通，基本都得到比較正面的反饋圾叼，也因為這套方案了解到了產(chǎn)品經(jīng)理對之后業(yè)務(wù)的整體規(guī)劃蛤克，并且將產(chǎn)品中現(xiàn)存的問題和解決方案很好的反饋給了產(chǎn)品經(jīng)理。
總結(jié)
此次由于產(chǎn)品問題較多夷蚊，所以做了比較全面的優(yōu)化构挤，不過對于日常需求來說都可以使用這些方法去主動推動優(yōu)化：
1.在提出想法前，先做方案呈現(xiàn)惕鼓，并給出合理的說明筋现；
2.多方驗證，聽取意見箱歧，確保得到合理的設(shè)計反饋矾飞；
3.保持積極主動的心態(tài)。
