作者：ZYUN（20191106）
預(yù)計閱讀時長：14 分鐘（3922 字；18 圖）
寫在前面
對于設(shè)計改版，我們并不陌生役拴。作為設(shè)計師惩阶，除了常規(guī)的功能迭代需求挎狸，我們肯定也都接到過設(shè)計改版的需求。
除此之外断楷，我們也常诚谴遥可以從很多設(shè)計師的分享中了解和學(xué)習(xí)到一些大廠的改版實踐經(jīng)驗和設(shè)計升級的方法論。但是冬筒，這些改版往往都需要運用到一些比較專業(yè)的工具恐锣、成熟的方法或完善的流程茅主。例如，設(shè)計前通過用戶研究和數(shù)據(jù)分析定位問題土榴、挖掘用戶需求诀姚，通過競品調(diào)研、體驗地圖等探索設(shè)計機會點玷禽，設(shè)計中通過可用性測試多輪測試設(shè)計方案学搜，設(shè)計完成后再通過用研和數(shù)據(jù)印證改版效果等等。而實際上论衍，我們的工作環(huán)境可能并不具備這樣的資源和條件瑞佩。
本文記錄的就是這樣一次設(shè)計改版的嘗試過程：在沒有完善的用戶體驗設(shè)計工作流程、沒有成熟的設(shè)計工具坯台、沒有足夠的時間和人力資源支撐的情況下炬丸，利用現(xiàn)有條件對移動端的 app 進行體驗升級。
雖然這次嘗試存在著非常多的不足和問題蜒蕾，也還是希望通過此次回顧稠炬，梳理總結(jié)出一些思路、方法和經(jīng)驗咪啡，在之后的項目中得以應(yīng)用首启、完善。
項目背景撤摸，設(shè)計目標(biāo)
今年（2019 年）上半年毅桃，公司設(shè)計、發(fā)布了全新的 IP 形象准夷，同時更新钥飞、升級了 VIS（視覺識別系統(tǒng)），因此希望對移動端的 app 進行 UI 4.0 改版衫嵌。新版本的視覺風(fēng)格討論會上也提出了改版的具體原因和目標(biāo)：(1) 加入新 IP 的元素读宙；(2) 完善、增加一些小細節(jié)（指微動畫等）楔绞；(3) 解決一致性的問題（指視覺風(fēng)格）结闸；(4) 確實看膩了（指視覺風(fēng)格）。
從上述目標(biāo)可看出酒朵，此次 UI 改版的目標(biāo)主要集中在視覺表現(xiàn)層面桦锄。
快速、長時間的功能迭代耻讽，導(dǎo)致產(chǎn)品的視覺復(fù)雜度逐漸不可控察纯，整體視覺風(fēng)格也變得相對陳舊。因此，重新定義視覺風(fēng)格饼记、對視覺元素進行梳理并產(chǎn)出規(guī)范香伴、融入 IP 形象提升品牌認(rèn)知度，是必要的具则。
然而即纲，根據(jù)之前三次視覺改版的經(jīng)驗，對我們的產(chǎn)品來說博肋，只停留在表現(xiàn)層的優(yōu)化最終都會變成 “換膚”低斋，已經(jīng)無法從根本解決問題。只更新表層的部分視覺樣式匪凡，不僅無法建立有效的視覺系統(tǒng)膊畴，而且一直以來被功能迭代淹沒的體驗問題也始終無法得到改善，產(chǎn)品長期帶疤上線病游。
基于以上背景唇跨，UI 小組經(jīng)過多次內(nèi)部討論，最終明確了設(shè)計目標(biāo)衬衬，提出了 UX 改版的想法买猖。希望能借此機會，嘗試著從產(chǎn)品的整體視角出發(fā)滋尉，以用戶體驗的思路玉控，更系統(tǒng)、更深入地挖掘體驗問題狮惜、尋找設(shè)計機會點高诺，制定改進方案，從而解決設(shè)計上的不良問題讽挟，提升產(chǎn)品可用性懒叛。
本文將側(cè)重記錄此次改版中，交互體驗上的優(yōu)化思路耽梅。
盤點現(xiàn)狀，定位問題
確定了改版目標(biāo)之后胖烛，我們以《用戶體驗要素》中的五要素作為思考框架眼姐，來分析為什么我們的 app “看上去挺好看，看上去啥都有佩番，但實際使用過程中就是覺得不咋好用”众旗。
我們知道，《用戶體驗要素》中的五要素 趟畏，分別為：
(1) 戰(zhàn)略層（strategy）：用戶需求贡歧、產(chǎn)品目標(biāo)。用戶希望通過這個產(chǎn)品得到什么，企業(yè)希望通過這個產(chǎn)品得到什么利朵。
(2) 范圍層（scope）：功能規(guī)格律想、內(nèi)容需求。根據(jù)戰(zhàn)略層中的需求和目標(biāo)绍弟，決定產(chǎn)品為用戶提供什么功能和內(nèi)容技即。
(3) 結(jié)構(gòu)層（structure）：交互設(shè)計、信息架構(gòu)樟遣。將范圍層定好的功能和內(nèi)容進行歸納組織而叼，確定以什么結(jié)構(gòu)把信息呈現(xiàn)給用戶、幫助用戶完成任務(wù)豹悬。
(4) 框架層（skeleton）：界面設(shè)計葵陵、導(dǎo)航設(shè)計、信息設(shè)計瞻佛。對結(jié)構(gòu)層中梳理好的功能和信息進行可視化的框架設(shè)計埃难，考慮交互元素的布局、引導(dǎo)用戶移動的元素的排布涤久、信息要素的排布涡尘。
(5) 表現(xiàn)層（surface）：感知設(shè)計。視覺設(shè)計响迂，設(shè)計產(chǎn)品的最終外觀考抄。
對應(yīng)以上五要素，常規(guī)的 UED 團隊設(shè)計流程大致為：產(chǎn)品 - 用研 - 交互 - 視覺 - 開發(fā)（不是標(biāo)準(zhǔn)不變的流程蔗彤，只是為了說明大致可能有這幾個環(huán)節(jié)）川梅。而我們目前的開發(fā)流程是，由產(chǎn)品經(jīng)理輸出需求文檔給 UI 設(shè)計師然遏，設(shè)計師進行視覺稿的設(shè)計贫途，之后交付給開發(fā)工程師進行開發(fā)。其中待侵，并沒有專業(yè)的 “交互設(shè)計師” 參與到整個流程中去承擔(dān) “用研” 和 “交互” 等工作丢早，加上快速的功能迭代，導(dǎo)致我們很少對 app 的整體架構(gòu)秧倾、信息層級和用戶體驗流程怨酝、體驗細節(jié)進行系統(tǒng)的、深入的思考和設(shè)計那先。
由此可見农猬，我們的 app 在 “結(jié)構(gòu)層” 和 “框架層” 的設(shè)計較不完善，導(dǎo)致可用性較低售淡，體檢較差斤葱。
制定策略慷垮，執(zhí)行落地
根據(jù)上文的分析，我們確定了此次改版的方向揍堕，即在進行視覺設(shè)計之前先在 “結(jié)構(gòu)層” 和 “框架層” 進行優(yōu)化料身，并一一制定了相應(yīng)的優(yōu)化策略。
1. 精簡鹤啡、優(yōu)化整體信息架構(gòu)
例如惯驼，在個人中心頁面的優(yōu)化中，先是明確頁面定位递瑰，分析存在的問題祟牲，之后對頁面中的功能和信息進行梳理、歸納組織抖部，調(diào)整信息結(jié)構(gòu)说贝，優(yōu)化界面布局。詳細內(nèi)容可點擊《個人中心頁面改版小結(jié)》查看慎颗。
再如乡恕，在選車首頁的優(yōu)化中，先是總結(jié)選車流程俯萎、分析目標(biāo)用戶屬性傲宜，之后采用場景化的方法，為流程中的每一步找出用戶場景夫啊，再以這些場景為基點函卒，結(jié)合頁面定位，重新組織內(nèi)容結(jié)構(gòu)撇眯、規(guī)劃信息層級报嵌，最后完成優(yōu)化。詳細內(nèi)容可點擊《運用場景思維進行產(chǎn)品功能優(yōu)化：選車功能優(yōu)化思路小結(jié)》和《運用場景思維進行產(chǎn)品功能優(yōu)化：選車首頁》查看。
2. 優(yōu)化頁面信息層級
例如，在對資訊列表頁的優(yōu)化中侵蒙，先是明確頁面定位和設(shè)計目標(biāo)，之后梳理頁面信息層級蛀蜜，完成優(yōu)化。詳細內(nèi)容可點擊《界面信息層級優(yōu)化思路小結(jié)（以列表頁為例）》查看。
3. 統(tǒng)一交互控件
例如，先對手機端「彈窗」的相關(guān)控件進行梳理云挟，總結(jié)規(guī)范，之后對當(dāng)前應(yīng)用中的相關(guān)控件進行清查转质，記錄存在的問題，進行優(yōu)化帖世，同時制作組件休蟹，以便在之后的設(shè)計中統(tǒng)一使用沸枯。詳細內(nèi)容可點擊《移動端交互控件規(guī)范總結(jié)：彈窗（一）》和《移動端交互控件規(guī)范總結(jié)：彈窗（二）》查看。
4. 優(yōu)化交互流程赂弓，完善交互細節(jié)
例如绑榴，對核心功能 “社區(qū)發(fā)帖” 的流程進行梳理、簡化盈魁，同時完成交互走查翔怎，修改和補充不合理的、欠缺的交互細節(jié)杨耙。
5. 完善其他體驗細節(jié)
例如赤套，結(jié)合具體場景對文案進行優(yōu)化。
限制條件珊膜，應(yīng)對策略
由于我們都沒有 UX 改版的經(jīng)驗容握，此次改版對我們來說既是嘗試也是挑戰(zhàn)。面對諸多的條件限制车柠，我們采取了如下應(yīng)對策略剔氏。
1. 核心問題
如上文所述，長時間的功能上新和版本迭代導(dǎo)致產(chǎn)品積累了不少的體驗問題竹祷，而這很難通過一次改版就完全解決谈跛。我們需要擺正心態(tài)，充分理解產(chǎn)品所處的階段塑陵，結(jié)合現(xiàn)有資源和條件感憾，確定優(yōu)化方向和范圍，細化為可落地的方案猿妈。
2. 時間問題
在整體的產(chǎn)品開發(fā)排期里吹菱，此次改版只是支線任務(wù)，其他主線功能和常規(guī)迭代需求也在同時執(zhí)行中彭则。因此鳍刷，我們需要熟知產(chǎn)品迭代計劃和開發(fā)周期，才能配合全局進度合理推進設(shè)計改版俯抖。
其次输瓜，為避免造成沖突和混亂，先選擇功能結(jié)構(gòu)芬萍、邏輯框架相對穩(wěn)定尤揣，且耦合性較低的模塊進行優(yōu)化，目前改動頻繁或較重要的功能暫不考慮優(yōu)化柬祠。
最后北戏，按「分析整理交互體驗問題 — 確定優(yōu)化方案 — 進行視覺設(shè)計」的流程大綱進行。
3. 工具問題
由于缺乏進行用戶研究漫蛔、數(shù)據(jù)分析的工具和資源嗜愈，導(dǎo)致我們：(1) 設(shè)計前：無法充分了解用戶痛點和需求旧蛾，發(fā)現(xiàn)問題；(2) 設(shè)計中：無法驗證設(shè)計想法蠕嫁，對比評估選擇方案锨天；(3) 上線后：無法評估改進效果，并收集用戶反饋剃毒，為下一次迭代提供參考病袄。
在這種設(shè)計環(huán)境下，我們需要充分發(fā)揮主觀能動性赘阀，調(diào)動一切可用資源益缠，主動了解用戶和產(chǎn)品，高效輸出纤壁。
收集用戶使用需求左刽、產(chǎn)品滿意度
從各個渠道獲取信息，如酌媒，瀏覽用戶在社區(qū)中的發(fā)帖和評論欠痴、通過后臺管理系統(tǒng)查看用戶的反饋意見、在其他社交平臺搜索相關(guān)關(guān)鍵詞秒咨、查看系統(tǒng)應(yīng)用商店評論等喇辽。同時，養(yǎng)成日常記錄雨席、定期整理的習(xí)慣菩咨。了解產(chǎn)品，對產(chǎn)品有一定的認(rèn)知
多與產(chǎn)品經(jīng)理溝通陡厘，了解產(chǎn)品戰(zhàn)略抽米、所處階段、迭代計劃等糙置；了解產(chǎn)品行業(yè)對標(biāo)競品云茸，尋找共同點和差異點；通過查閱文獻谤饭、收集資料标捺，了解行業(yè)現(xiàn)狀等。根據(jù)實際情況塑造 UX 工具
雖然不具備進行專業(yè)研究并產(chǎn)出完整報告的能力與條件揉抵，也可以嘗試著有意識地運用適當(dāng)?shù)脑O(shè)計方法亡容，例如：
① 啟發(fā)式評估或認(rèn)知走查 — 設(shè)計小組所有成員都可以作為評估人員，以用戶的視角在界面上完成一些具體的任務(wù)冤今，檢查是否能順利完成任務(wù)闺兢，并記錄其中存在的問題，然后開會討論戏罢、匯總列敲，找出關(guān)鍵可用性問題阱佛。
② 用戶訪談 — 針對某個問題對身邊的同事或朋友進行簡單少量的訪談帖汞。
③ 可用性測試 — 請身邊的同事或朋友體驗產(chǎn)品或某個功能戴而，觀察他們的操作行為。
④ 競品分析 — 安裝翩蘸、使用相關(guān)產(chǎn)品所意，對比相似流程，分析它們的體驗催首，通過他們的社區(qū)或應(yīng)用商品評論等了解用戶對這些產(chǎn)品的態(tài)度和滿意度扶踊。
⑤ 卡片分類法 — 請身邊同事或朋友參與分類。
4. 經(jīng)驗不足
由于經(jīng)驗有限郎任，此次改版?zhèn)戎赜诮鉀Q設(shè)計上的不良問題秧耗，暫不深入考慮商業(yè)目標(biāo)層面的內(nèi)容。
不足反思舶治，經(jīng)驗沉淀
雖然最初想法是由產(chǎn)品總監(jiān)提出的分井，但按計劃，后續(xù)的改版進程會由設(shè)計小組推動霉猛，所以此次改版依然可以看作是一次由下而上尺锚、由設(shè)計師主動發(fā)起需求的設(shè)計改版。但由于一些特殊原因惜浅，此次 4.0 改版最終并沒有繼續(xù)下去瘫辩。
其中，體驗升級這一部分也沒有取得較好的成果坛悉。這里的原因可能有以下兩點：
1. 缺乏有效的用戶體驗度量體系
如上文所說伐厌，我們現(xiàn)有資源和經(jīng)驗都有限，所以無法建立科學(xué)有效的指標(biāo)來衡量設(shè)計效用裸影、對體驗升級的效果進行評估和跟蹤挣轨。另外，也因此無法顯性地證明體驗升級的商業(yè)價值空民，無法上升到產(chǎn)品戰(zhàn)略刃唐、企業(yè)戰(zhàn)略層面。所以界轩，最終還是陷入有心無力的困局画饥。
2. 缺乏明確的時間規(guī)劃
如上文所說，此次 4.0 改版僅作為支線任務(wù)浊猾，并未正式列入產(chǎn)品迭代計劃抖甘，也沒有明確的時間規(guī)劃，所以在落地執(zhí)行時葫慎，只能頻繁讓渡時間給其他優(yōu)先級更高的需求衔彻，最終進度受限薇宠，始終無法合理推進。
作為體驗改版的初次嘗試艰额，雖然最終沒有取得比較好的成果澄港，但我們也從中累積了一些經(jīng)驗，例如：不再局限在以往的視覺改版的思維里柄沮；根據(jù)實際情況運用回梧、塑造基礎(chǔ)的 UX 設(shè)計工具；明白了設(shè)計師只有理解商業(yè)理解產(chǎn)品戰(zhàn)略祖搓、企業(yè)戰(zhàn)略狱意，才能發(fā)揮出更大的影響力等等。
我們無法保證每一次設(shè)計改版都是成功的拯欧，除了產(chǎn)品體驗上的迭代完善详囤，我們也需要不斷地優(yōu)化我們的工作方法和設(shè)計流程。
用戶體驗設(shè)計也沒有永遠完美的解決方案镐作。它不是做判斷題藏姐，而是持續(xù)不斷的取舍迭代，是站在一定的立場滑肉，在一定的環(huán)境和場景中包各，綜合審視包括用戶體驗、產(chǎn)品方向靶庙、商業(yè)利益问畅、企業(yè)戰(zhàn)略等等在內(nèi)的各方條件，最終取得一個平衡六荒、一個最佳的折中方案护姆。
以上所有內(nèi)容均為個人思考與理解，如有錯誤掏击，歡迎指正啊卵皂。相關(guān)文章鏈接：
個人中心頁面改版小結(jié)
運用場景思維進行產(chǎn)品功能優(yōu)化：選車功能優(yōu)化思路小結(jié)
運用場景思維進行產(chǎn)品功能優(yōu)化：選車首頁
界面信息層級優(yōu)化思路小結(jié)（以列表頁為例）
移動端交互控件規(guī)范總結(jié)：彈窗（一）
移動端交互控件規(guī)范總結(jié)：彈窗（二）
嘻嘻，水完這個系列最后一篇文章啦Ｑ馔ぁ（哎喲真的水灯变，但是不打個小結(jié)總覺得不舒服不完整！
所以捅膘，本著哪怕只多一個人看到只多一個人覺得有那么點用只多一個人互相交流添祸，都比躺在自己的電腦里來得好的想法，還是拖拖拉拉地把去年 app 改版嘗試寫的文章都發(fā)完啦Ｑ罢獭（完結(jié)撒花刃泌！
鄭重感謝閱讀～超級無敵宇宙級歡迎一切形式的交流～
