2022-4-21 博博
前言
之前為大家分享過很多工作的案例，很多伙伴表示收獲頗多，之所以分享工作案例是為了，給大家講解設(shè)計(jì)思路，讓大家明白，為什么這樣設(shè)計(jì)，出于什么目的，要解決什么問題，這些正是UI設(shè)計(jì)的根本所在，掌握了設(shè)計(jì)思路就能應(yīng)對各種問題。
接下來本期的分享，依舊會用真實(shí)案例解析從需求到設(shè)計(jì)的完整過程。
接需求與案例解析
我司的運(yùn)營小姐姐@我要改個(gè)產(chǎn)品的UI，下午找我聊需求。
一、準(zhǔn)備工作
提前了解產(chǎn)品，從視覺、交互上感受一遍，標(biāo)記產(chǎn)品中有疑問的地方，這樣大概對產(chǎn)品有個(gè)概念，為接下來的溝通做好鋪墊。
二、了解業(yè)務(wù)
首先需要運(yùn)營小姐姐講解一下業(yè)務(wù)邏輯，了解產(chǎn)品涉及到的各種角色，產(chǎn)品使用場景等等，期間把疑問一一了解清楚，盡可能對業(yè)務(wù)、角色、使用場景有充分的了解。
通過溝通，了解到這個(gè)產(chǎn)品是一個(gè)H5問卷后臺，業(yè)務(wù)上用來查看問卷統(tǒng)計(jì)的結(jié)果，使用的人群是公司的運(yùn)營人員，產(chǎn)品時(shí)常會打包賣給客戶，客戶的使用場景不定，多數(shù)用戶會用手機(jī)端查看統(tǒng)計(jì)結(jié)果。
三、溝通需求
接下來，溝通中我會先聽她講解需求，講完后我會問她一些問題，確保我理解的正確。
需求溝通后，此產(chǎn)品問題為：界面太亂，很難用，需要改的好看舒服好用。
這時(shí)候就要想到她是不是用了其他體驗(yàn)好的產(chǎn)品，如果是的話，這個(gè)產(chǎn)品可能是重要的設(shè)計(jì)參考，然而了解后并不是因?yàn)橛昧似渌a(chǎn)品，是一直以來就不好用，沒時(shí)間改而已。
接下來的需求溝通就要落實(shí)到頁面中，需要一起探討產(chǎn)品，不明白的地方要了解清楚，從中總結(jié)優(yōu)化的地方。
下面開始案例分享：
第一個(gè)頁面改版
上圖為“統(tǒng)計(jì)問卷”首頁，A、B、C處為頁面中較為突出的點(diǎn)，其中C處最為明顯，溝通后得知C處圖表的切換是為了截取圖表做ppt，僅此而已，所以此處UI設(shè)計(jì)上需要弱化。
其實(shí)用戶之所以覺得頁面看起來不舒服，是因?yàn)橄肟吹脑乇蝗趸?，而不該看的卻過度設(shè)計(jì)，這樣用戶在看頁面過程就會很費(fèi)神，因?yàn)楂@取信息要躲開視覺上被過度設(shè)計(jì)的地方。
例如A處，用了頁面中唯一的橘黃色，當(dāng)初設(shè)計(jì)者應(yīng)該是為了能強(qiáng)化區(qū)別上下題目的分界，但也成了突出的視覺干擾項(xiàng)。
其實(shí)分析后，頁面中用戶要看的是兩個(gè)地方，一個(gè)是B處答題的比例數(shù)據(jù)，另一個(gè)是旁邊的“小記”數(shù)據(jù)量，而B處進(jìn)度條的設(shè)計(jì)過于突出，與文字沒有良好的視覺比重。
結(jié)合以上問題進(jìn)行改版：
解決A處問題
把每道題設(shè)計(jì)為卡片式，這樣能很好的區(qū)別上下題的界線，題號從突出的橘黃色改為黑色，使得頁面視覺上不那么跳躍。
解決B處問題
弱化變細(xì)進(jìn)度條，與文字視覺比重相當(dāng)，不會顯得突兀，排版上下排列改為左右排列，這樣能夠縮減表格的高度，頁面可以顯示更多的內(nèi)容。
解決C處問題
圖表切換是個(gè)弱功能，使用頻率較低，所以放到卡片的右上角弱化設(shè)計(jì)，用切換的方式展示。
不僅僅是以上的問題，排版的細(xì)節(jié)也會大大提升產(chǎn)品的質(zhì)感。
舊版所有元素的排版間距幾乎沒有什么規(guī)律，這也是導(dǎo)致用戶對產(chǎn)品有亂糟糟印象的原因。
改進(jìn)后，用間距去表達(dá)元素之間的關(guān)系，間距設(shè)計(jì)常常會用到“黃金比例”或“五分原則”，黃金比例不必多說，五分原則就是相關(guān)的元素用周邊0.5倍的距離表達(dá)親密關(guān)系。
當(dāng)設(shè)計(jì)好第一個(gè)頁面后，需要先給到需求方評審，確認(rèn)沒問題后再繼續(xù)，這樣就盡可能保證了后面的設(shè)計(jì)是符合他們需要的。
上圖只是個(gè)最終的結(jié)果，過程中做過一些小改動，最初發(fā)給需求方設(shè)計(jì)的頁面，需要做簡單的設(shè)計(jì)注解，這樣才會更容易被理解，且具有說服力，最終確認(rèn)沒問題再繼續(xù)其他頁面的設(shè)計(jì)。
第二個(gè)頁面改版
上圖是給做問卷的人配置紅包獎(jiǎng)品的頁面，看完后我表示心疼我們的運(yùn)營人員。
A處本可以切換項(xiàng)目，但現(xiàn)在的設(shè)計(jì)顯然是不可點(diǎn)擊切換的狀態(tài)。
B處是這個(gè)項(xiàng)目總金額統(tǒng)計(jì)，目前排版色彩雜亂且擁擠。
C處是給問卷配置紅包獎(jiǎng)品的各個(gè)屬性信息，然而元素間沒有層次，依舊雜亂擁擠。
D處按鈕沒有主次關(guān)系，排版擁擠。
E處是個(gè)“增加獎(jiǎng)品”按鈕，現(xiàn)在看起來沒太大問題。
改版后頁面延續(xù)了首頁的卡片風(fēng)格，保持一致性。
解決A處問題
“子入口切換”用戶很難理解，因?yàn)椴皇谴_切詞，例如換成“項(xiàng)目切換”“問卷切換”就很容易理解，當(dāng)然也是可以去掉的，因?yàn)檫\(yùn)營人員對每個(gè)項(xiàng)目都很熟悉，沒必要注解。
解決B處問題
重新定義排版后，顯而易見會比之前要清晰透氣很多，動態(tài)變化的金額用顏色突出強(qiáng)調(diào)，未配置金額為次要信息，用灰色表示。
解決C處問題
改變排版樣式，視覺上有主有次，“配置數(shù)量”跟“個(gè)數(shù)”為重復(fù)信息，只留一個(gè)即可。
解決D處問題
按鈕“已啟動點(diǎn)擊禁用”拆分為“點(diǎn)擊下線”按鈕，和問卷狀態(tài)（進(jìn)行中），“展開”按鈕放到最左邊，和“編輯”并列。
解決E處問題
“新增獎(jiǎng)品”按鈕，如果增加配置獎(jiǎng)品列表，就會把按鈕擠到不可視區(qū)域，這樣的設(shè)計(jì)不是特別推薦，所以設(shè)計(jì)成懸浮按鈕，舊版本已經(jīng)建立用戶的按鈕功能認(rèn)知，懸浮按鈕上面配加號圖標(biāo)，用戶就會很容易理解。
第三個(gè)頁面改版
上圖還是第二個(gè)改版頁面，此次要改版的是，點(diǎn)開“展開”按鈕顯示的屬性，目前的問題是有很多重復(fù)的信息，例如時(shí)間，上面已經(jīng)顯示時(shí)間，最下面又出現(xiàn)同樣的時(shí)間。
最嚴(yán)重的問題是，所有灰色字的注釋，不符合邏輯，不應(yīng)該在展開的屬性下面提示，因?yàn)檫@已經(jīng)是編輯好的內(nèi)容，再去提示就意義不大了。
模擬一個(gè)場景，比如上圖紅圈的地方，已經(jīng)設(shè)置好了獎(jiǎng)品名稱為“幸運(yùn)紅包”，展開后有個(gè)灰色字提示“用戶中獎(jiǎng)后，用于顯示給用戶看”，如果發(fā)現(xiàn)理解錯(cuò)了，然而在此頁面是不可以改正的，所以灰色字應(yīng)該在“新增獎(jiǎng)品”的編輯中提示，用戶在輸入信息的場景下，提示才是最合理的。
頁面改進(jìn)后，去掉重復(fù)的屬性信息，去掉灰色字的提示，（去掉這些內(nèi)容是提前跟需求方探討過的）最后用最少的空間展示了所有的信息，更清晰明了，其實(shí)展開后的卡片高度，完全也是可以考慮去掉“展開”“收起”的功能。
然后
第四個(gè)頁面改版
當(dāng)我看到這個(gè)頁面時(shí)，不知道為什么要有A處的信息，所以再次請教需求方尋求答案，給我的答案是“子入口”“IP”是為了給開發(fā)人員提供便捷查詢，例如這個(gè)中獎(jiǎng)?wù)叽嬖谒⒓t包行為，可以通過A處的信息進(jìn)行查詢。
很顯然這并不合理，因?yàn)閷τ脩魜碚f沒有用，還造成了認(rèn)知負(fù)擔(dān)，如果存在不良行為，提供編號信息就可以搞定了。
B處的設(shè)計(jì)，讓頁面沒有條理，更是一個(gè)信息干擾項(xiàng)。
頁面改進(jìn)后，依然沿用首頁卡片式的設(shè)計(jì)，去掉“子入口”“IP”“昵稱”多余屬性，去掉昵稱是因?yàn)榇饐柧硪话悴粫@取到用戶昵稱。
“中獎(jiǎng)”和“未中獎(jiǎng)”卡片，設(shè)計(jì)上有明顯的視覺比重差異，去掉未中獎(jiǎng)的綠色標(biāo)示，只突出中獎(jiǎng)?wù)摺?
最后一個(gè)頁面改版
上圖是做問卷用戶答案頁，頁面的彈窗偏小，使用起來很憋氣，A處不知道什么意思，詢問后可以直接去掉，B處是一個(gè)不合理的“確定”按鈕，原因是用詞錯(cuò)誤，應(yīng)該叫“關(guān)閉”更合適，因?yàn)檫@個(gè)頁面是查看信息，并沒有執(zhí)行某些任務(wù)操作。
改進(jìn)后加大彈窗，去掉頁面中的多余元素顏色，上下題目用留白間距隔開，去掉“確定”大按鈕，因?yàn)樘济娣e，改為右上角“關(guān)閉”按鈕。
最后
當(dāng)我們看到一個(gè)頁面時(shí)，如果只看到美與丑，那是不客觀的，這可能是對UI設(shè)計(jì)最大的誤解，UI的美不只體現(xiàn)在表面上，還有內(nèi)在的體驗(yàn)中。
UI設(shè)計(jì)一般都會帶著一種目的進(jìn)行設(shè)計(jì)，目的絕不只是設(shè)計(jì)的好看，更多的是創(chuàng)造一個(gè)良好的產(chǎn)品體驗(yàn)，同時(shí)能夠助力業(yè)務(wù)，實(shí)現(xiàn)產(chǎn)品價(jià)值。
UI設(shè)計(jì)師對于業(yè)務(wù)要積極的去了解，對需求不要總被動接收，要有意識的去探討挖掘，對業(yè)務(wù)的熟知，需求的準(zhǔn)確拿捏，是你開始設(shè)計(jì)前最好的基石。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com