（一篇用案例詳細(xì)講交互設(shè)計思考和設(shè)計過程的文章~大約2500字寄症，閱讀大約需要8分鐘）
之前參與了一款面向海外用戶的虛擬銀行APP設(shè)計狼讨，前一陣收到對信用借款功能（類似花唄）的用研結(jié)果。
用研顯示酝枢，75%的用戶對現(xiàn)有設(shè)計表示滿意纺蛆，但仍存在一些問題，主要是圖1-1中“還款日期不明顯”册踩、圖1-2中“當(dāng)前選中的日期不太明顯”。
但是事情并沒有這么簡單：
圖1-1中效拭，還款日期不明顯主要因為信息量太大且沒有重點暂吉，這其實是信息架構(gòu)和頁面信息的問題胖秒。而用戶僅提出“還款日期”，說明優(yōu)先關(guān)注這個信息慕的。
圖1-2中扒怖，選中日期不明顯，可能是視覺重點不太對（Amount過強(qiáng)）业稼，也可能是期數(shù)（3 Months）太輕且沒有直觀表現(xiàn)滑塊和期數(shù)的關(guān)系，因此這是頁面重點和操作交互的不合理蚂蕴。
基于這些分析低散，我們開始進(jìn)行設(shè)計優(yōu)化。
一骡楼、嘗試解決
這個功能之前是一名初級設(shè)計師設(shè)計的熔号，我是半途接手且時間緊迫。
剛開始鸟整，我針對問題對信息做了分層引镊，通過增加新的詳情頁以降低首頁的信息量，如圖1-3篮条。
但是弟头，如果用戶想查看近期的賬單詳情，從主頁進(jìn)入均需再點擊兩次……對于這種常用操作路徑也太長了涉茧。
這就說明赴恨，現(xiàn)有的信息架構(gòu)不足以承載優(yōu)化需求，需要做出局部架構(gòu)的調(diào)整伴栓。
二伦连、設(shè)計分析
因此，我從整合信息架構(gòu)開始钳垮，逐步分析到細(xì)節(jié)優(yōu)化惑淳。
一方面是整理設(shè)計思路，另一方面給初級設(shè)計師一個解決方案饺窿，以應(yīng)對下一次接到類似的需求歧焦。
1、檢查業(yè)務(wù)邏輯的合理性
了解業(yè)務(wù)流程后短荐，發(fā)現(xiàn)還款的業(yè)務(wù)邏輯有些奇特倚舀，該功能上線時還沒有打通線上主動還款，所以依賴自動還款功能與線下還款……（此處略去向產(chǎn)品提意見的幾百字）
因此忍宋，首頁的CTA之前是“了解還款方式”痕貌，點擊可了解兩種方式。但線下畢竟比線上自動還操作成本高糠排，兩種方式并不應(yīng)當(dāng)同等對待舵稠，所以可以將按鈕修改為“設(shè)置自動還款”，如圖1-4，其二級頁面直接提供自動還款設(shè)置哺徊、底部有線下還款說明室琢。通過這樣的方式，來突出線上操作落追。
2盈滴、封裝最小單位，規(guī)劃信息架構(gòu)
因為我們從產(chǎn)品側(cè)拿到的需求轿钠，更接近業(yè)務(wù)說明文檔巢钓。那么，先從中列出這個模塊需要呈現(xiàn)的重要信息元素疗垛，并規(guī)劃信息架構(gòu)（規(guī)劃信息架構(gòu)屬于基本功症汹，這里不加贅述），如圖1-5
根據(jù)這個架構(gòu)贷腕，二級及后續(xù)頁面所包含的信息已經(jīng)比較明確了背镇，但是主頁的設(shè)計仍不明晰。
3泽裳、根據(jù)信息架構(gòu)和用戶流瞒斩，設(shè)計主頁
主頁需承載所有功能的入口，因此必須包含詳情诡壁、賬單和交易明細(xì)功能济瓢。
因為這是面向國外的產(chǎn)品，交易明細(xì)放在主頁下方是原方案中沒有爭議的設(shè)計妹卿，那么上部分應(yīng)當(dāng)如何承載詳情和賬單呢旺矾？
根據(jù)國內(nèi)相關(guān)競品分析和客戶提供的國外用戶資料，用戶經(jīng)常查看的已用額度（對應(yīng)詳情功能）和最近賬單（對應(yīng)賬單功能）夺克，所以可以以這些關(guān)鍵信息作為入口箕宙，而不是做成按鈕和圖標(biāo)，然后可將其他信息藏在二級頁面铺纽，如圖1-6柬帕。
值得注意的是，在深入了解功能和需求后狡门，我們發(fā)現(xiàn)由于存在出賬日和還款日陷寝，在一些特殊時間段內(nèi)，如已出賬且未至還款日其馏，用戶可能會關(guān)注最近兩期的賬單信息凤跑，即關(guān)注已出賬的還款金額，關(guān)注未出賬中近期交易記錄叛复。
所以仔引，主頁的賬單信息會根據(jù)時間不同而變化扔仓，這個狀態(tài)變化就需要我們分析用戶使用的全流程。
4咖耘、梳理全流程狀態(tài)
可以在紙面上畫一個時間軸翘簇，梳理出各個時間狀態(tài)。
用戶使用該功能的全流程包括：未開通儿倒、已開通未使用版保、未出賬單、已出賬單未還清夫否、已出賬單已還清找筝、已還清且下一期未出。
其中慷吊，特殊狀態(tài)有：逾期且未到下一賬單日、逾期已到下一賬單日曹抬、本期無賬單溉瓶。
根據(jù)這些狀態(tài)類型，可以根據(jù)用戶關(guān)注點的轉(zhuǎn)移谤民，設(shè)計不同狀態(tài)下的樣式堰酿，如圖1-7提供部分示例。
雖然狀態(tài)類型很多张足，但是很多狀態(tài)的可能比較相似触创，可以做成同一樣式以減少用戶的理解成本。比如“已出賬單已還清”和“已還清且下一期未出”为牍，而不需要做出差別設(shè)計（將“已還清且下一期未出”做成“下一賬單日還剩xx天”這種）
5哼绑、優(yōu)化細(xì)節(jié)
做完這些，我們可以設(shè)計出各個頁面的基本版了碉咆，但是……還沒完抖韩。
我們還需要對細(xì)節(jié)做出優(yōu)化。
初級設(shè)計師很容易遇到的兩個問題疫铜，一個是設(shè)計的優(yōu)化力度不夠茂浮，另一個是設(shè)計的吸引力不足。
（關(guān)于增強(qiáng)設(shè)計的說服力壳咕，可以參考我的另一篇文章：怎么增強(qiáng)設(shè)計對用戶的說服力-這是一個鏈接）
針對這兩點席揽，基礎(chǔ)的解決思路是：
- 先做簡單：該頁面和操作是否足夠簡單、重點足夠突出（頁面跳轉(zhuǎn)谓厘、信息量幌羞、操作方式和步驟等）？大腦思考庞呕、眼睛和手指移動是否足夠少新翎？
- 再做復(fù)雜：對用戶來說程帕，是否能再增加一些東西，減少疑惑地啰、增強(qiáng)信息明晰度愁拭？對業(yè)務(wù)來說，是否需要合適的引流和刺激亏吝？
按照這個思路岭埠，可以做出以下細(xì)節(jié)優(yōu)化
1）先做簡單
①?選擇期數(shù)的操作不夠簡單：
簽賬分期的原方案是拖動滑塊改變期數(shù)，看起來好像沒問題……但是
第一蔚鸥，可選范圍也太大了吧惜论，這是增加用戶的選擇成本；
第二止喷，在手機(jī)上拖動馆类，其實比較難精準(zhǔn)定位到某一期；
第三弹谁，用戶分期一般習(xí)慣3乾巧、6、9预愤、12期這種和季沟于、年相關(guān)的期數(shù)，一定要分7植康、11這種奇怪的期數(shù)旷太，應(yīng)該沒那么常見
所以，我們可以突出關(guān)鍵的幾個期數(shù)供一般用戶選擇销睁，有特殊需求的也可以點選供璧，如圖1-8。通過這種優(yōu)化冻记，其實是降低了一般用戶的思考成本（選項少了）和操作成本（換滑動為少量點擊）嗜傅。
②?重要操作不夠突出：
詳情頁中包含“查看賬單”和“了解還款方式”按鈕。
其中檩赢，“查看賬單”更加重要吕嘀，“了解還款方式”并不是重要的下一步操作，所以在細(xì)節(jié)上可進(jìn)一步做突出贞瞒，如圖1-9偶房。
2）再做復(fù)雜
①?增加圖表增強(qiáng)信息明晰度
詳情頁包含已用額度、可用額度和總額度3個數(shù)字军浆，可用圖表展示其中的關(guān)系棕洋。
之前畫過一個草稿，是對比“已用額度”和“可用額度”乒融，看起來好像沒有問題掰盘，但是用戶真的關(guān)心這個比值么摄悯？
他們更加關(guān)注的，應(yīng)該是“已用/總額度”或“未用/總額度”愧捕，以表達(dá)當(dāng)前的使用情況奢驯，如圖1-10。
因此次绘，在設(shè)計圖表的時候瘪阁，尤其涉及多個數(shù)據(jù)，要先明確圖表要表達(dá)什么有價值的信息邮偎，然后再進(jìn)行設(shè)計管跺。
②?增加按鈕減少操作疑惑
如果可操作，一般需要傳達(dá)可操作的感覺禾进，如圖1-11豁跑。
比如，首頁頂部雖然是張卡片泻云，但是從Outstanding Balance進(jìn)入詳情頁的可點擊感會比較弱贩绕，因此增加向右的小箭頭；
簽賬分期金額其實可以修改的壶愤，這個操作是需要被感知，因為當(dāng)金額較大時馏鹤，僅分期一部分不僅減輕經(jīng)濟(jì)壓力征椒、手續(xù)費也更低。但是由于這里有默認(rèn)值湃累，可能會感知不到這個操作勃救，因此增加“修改”按鈕
③?增加樣式對比減少疑惑
從主頁點擊到賬單頁，由于展示樣式相似治力，尤其當(dāng)UI處理不好的時候蒙秒，可能會給人內(nèi)容相似的錯覺（格式塔原理）。
因此宵统，可以通過更換對齊方式讓兩者有對比晕讲，明顯感知到是兩組數(shù)據(jù)，如圖1-12马澈。
④?增加提示為業(yè)務(wù)引流
用戶第一次使用的時候瓢省，是怎么知道這筆交易可以分期的？提示可分期的方式有很多痊班，包括大額交易的結(jié)果頁勤婚、大額交易后的短信提示。
考慮分期是這個模塊的二級功能涤伐，不宜做的過重馒胆，所以最終采用標(biāo)簽+氣泡的形式去提示缨称。
當(dāng)然，只是正向告訴用戶去用祝迂，有時是不足的睦尽，在用戶要走的時候，可以做出適當(dāng)?shù)耐炝粢菏蓿糇∧切┯行┘m結(jié)的用戶~
最后
其實這個功能繼續(xù)往后做骂删，還是能“玩出花”的。
但考慮當(dāng)下處于1.0版本四啰，還是要以提升可用性作為最終目標(biāo)宁玫。所以按照以上步驟，以檢查業(yè)務(wù)邏輯柑晒、規(guī)劃信息架構(gòu)欧瘪、設(shè)計主頁，優(yōu)化細(xì)節(jié)的設(shè)計思路匙赞，最終呈現(xiàn)佛掖、提交設(shè)計方案。
這版方案最終也受到了認(rèn)可涌庭。雖然后續(xù)有一些業(yè)務(wù)上的微調(diào)芥被，但是整體設(shè)計是禁得住考驗的。
