亚洲av日韩av永久无码久久,免费的视频app网站,欧美性猛交xxxx免费看,国产成人精品三级麻豆

UI設(shè)計(jì)經(jīng)驗(yàn)分享,用實(shí)戰(zhàn)教你界面改版

2022-4-21    博博

UI的美不只體現(xiàn)在表面上,還有內(nèi)在的體驗(yàn)中


前言 


之前為大家分享過(guò)很多工作的案例,很多伙伴表示收獲頗多,之所以分享工作案例是為了,給大家講解設(shè)計(jì)思路,讓大家明白,為什么這樣設(shè)計(jì),出于什么目的,要解決什么問(wèn)題,這些正是UI設(shè)計(jì)的根本所在,掌握了設(shè)計(jì)思路就能應(yīng)對(duì)各種問(wèn)題。


接下來(lái)本期的分享,依舊會(huì)用真實(shí)案例解析從需求到設(shè)計(jì)的完整過(guò)程。



接需求與案例解析 



我司的運(yùn)營(yíng)小姐姐@我要改個(gè)產(chǎn)品的UI,下午找我聊需求。


一、準(zhǔn)備工作


提前了解產(chǎn)品,從視覺(jué)、交互上感受一遍,標(biāo)記產(chǎn)品中有疑問(wèn)的地方,這樣大概對(duì)產(chǎn)品有個(gè)概念,為接下來(lái)的溝通做好鋪墊。


二、了解業(yè)務(wù)


首先需要運(yùn)營(yíng)小姐姐講解一下業(yè)務(wù)邏輯,了解產(chǎn)品涉及到的各種角色,產(chǎn)品使用場(chǎng)景等等,期間把疑問(wèn)一一了解清楚,盡可能對(duì)業(yè)務(wù)、角色、使用場(chǎng)景有充分的了解。


通過(guò)溝通,了解到這個(gè)產(chǎn)品是一個(gè)H5問(wèn)卷后臺(tái),業(yè)務(wù)上用來(lái)查看問(wèn)卷統(tǒng)計(jì)的結(jié)果,使用的人群是公司的運(yùn)營(yíng)人員,產(chǎn)品時(shí)常會(huì)打包賣給客戶,客戶的使用場(chǎng)景不定,多數(shù)用戶會(huì)用手機(jī)端查看統(tǒng)計(jì)結(jié)果。


三、溝通需求


接下來(lái),溝通中我會(huì)先聽(tīng)她講解需求,講完后我會(huì)問(wèn)她一些問(wèn)題,確保我理解的正確。


需求溝通后,此產(chǎn)品問(wèn)題為:界面太亂,很難用,需要改的好看舒服好用。


這時(shí)候就要想到她是不是用了其他體驗(yàn)好的產(chǎn)品,如果是的話,這個(gè)產(chǎn)品可能是重要的設(shè)計(jì)參考,然而了解后并不是因?yàn)橛昧似渌a(chǎn)品,是一直以來(lái)就不好用,沒(méi)時(shí)間改而已。


接下來(lái)的需求溝通就要落實(shí)到頁(yè)面中,需要一起探討產(chǎn)品,不明白的地方要了解清楚,從中總結(jié)優(yōu)化的地方。


下面開(kāi)始案例分享:



第一個(gè)頁(yè)面改版



上圖為“統(tǒng)計(jì)問(wèn)卷”首頁(yè),A、B、C處為頁(yè)面中較為突出的點(diǎn),其中C處最為明顯,溝通后得知C處圖表的切換是為了截取圖表做ppt,僅此而已,所以此處UI設(shè)計(jì)上需要弱化。


其實(shí)用戶之所以覺(jué)得頁(yè)面看起來(lái)不舒服,是因?yàn)橄肟吹脑乇蝗趸辉摽吹膮s過(guò)度設(shè)計(jì),這樣用戶在看頁(yè)面過(guò)程就會(huì)很費(fèi)神,因?yàn)楂@取信息要躲開(kāi)視覺(jué)上被過(guò)度設(shè)計(jì)的地方。


例如A處,用了頁(yè)面中唯一的橘黃色,當(dāng)初設(shè)計(jì)者應(yīng)該是為了能強(qiáng)化區(qū)別上下題目的分界,但也成了突出的視覺(jué)干擾項(xiàng)。


其實(shí)分析后,頁(yè)面中用戶要看的是兩個(gè)地方,一個(gè)是B處答題的比例數(shù)據(jù),另一個(gè)是旁邊的“小記”數(shù)據(jù)量,而B(niǎo)處進(jìn)度條的設(shè)計(jì)過(guò)于突出,與文字沒(méi)有良好的視覺(jué)比重。


結(jié)合以上問(wèn)題進(jìn)行改版:




解決A處問(wèn)題
把每道題設(shè)計(jì)為卡片式,這樣能很好的區(qū)別上下題的界線,題號(hào)從突出的橘黃色改為黑色,使得頁(yè)面視覺(jué)上不那么跳躍。


解決B處問(wèn)題

弱化變細(xì)進(jìn)度條,與文字視覺(jué)比重相當(dāng),不會(huì)顯得突兀,排版上下排列改為左右排列,這樣能夠縮減表格的高度,頁(yè)面可以顯示更多的內(nèi)容。


解決C處問(wèn)題

圖表切換是個(gè)弱功能,使用頻率較低,所以放到卡片的右上角弱化設(shè)計(jì),用切換的方式展示。


不僅僅是以上的問(wèn)題,排版的細(xì)節(jié)也會(huì)大大提升產(chǎn)品的質(zhì)感。



舊版所有元素的排版間距幾乎沒(méi)有什么規(guī)律,這也是導(dǎo)致用戶對(duì)產(chǎn)品有亂糟糟印象的原因。


改進(jìn)后,用間距去表達(dá)元素之間的關(guān)系,間距設(shè)計(jì)常常會(huì)用到“黃金比例”五分原則,黃金比例不必多說(shuō),五分原則就是相關(guān)的元素用周邊0.5倍的距離表達(dá)親密關(guān)系。



當(dāng)設(shè)計(jì)好第一個(gè)頁(yè)面后,需要先給到需求方評(píng)審,確認(rèn)沒(méi)問(wèn)題后再繼續(xù),這樣就盡可能保證了后面的設(shè)計(jì)是符合他們需要的。



上圖只是個(gè)最終的結(jié)果,過(guò)程中做過(guò)一些小改動(dòng),最初發(fā)給需求方設(shè)計(jì)的頁(yè)面,需要做簡(jiǎn)單的設(shè)計(jì)注解,這樣才會(huì)更容易被理解,且具有說(shuō)服力,最終確認(rèn)沒(méi)問(wèn)題再繼續(xù)其他頁(yè)面的設(shè)計(jì)。



第二個(gè)頁(yè)面改版



上圖是給做問(wèn)卷的人配置紅包獎(jiǎng)品的頁(yè)面,看完后我表示心疼我們的運(yùn)營(yíng)人員。


A處本可以切換項(xiàng)目,但現(xiàn)在的設(shè)計(jì)顯然是不可點(diǎn)擊切換的狀態(tài)。


B處是這個(gè)項(xiàng)目總金額統(tǒng)計(jì),目前排版色彩雜亂且擁擠。


C處是給問(wèn)卷配置紅包獎(jiǎng)品的各個(gè)屬性信息,然而元素間沒(méi)有層次,依舊雜亂擁擠。


D處按鈕沒(méi)有主次關(guān)系,排版擁擠。


E處是個(gè)“增加獎(jiǎng)品”按鈕,現(xiàn)在看起來(lái)沒(méi)太大問(wèn)題。



改版后頁(yè)面延續(xù)了首頁(yè)的卡片風(fēng)格,保持一致性。


解決A處問(wèn)題

“子入口切換”用戶很難理解,因?yàn)椴皇谴_切詞,例如換成“項(xiàng)目切換”“問(wèn)卷切換”就很容易理解,當(dāng)然也是可以去掉的,因?yàn)檫\(yùn)營(yíng)人員對(duì)每個(gè)項(xiàng)目都很熟悉,沒(méi)必要注解。


解決B處問(wèn)題

重新定義排版后,顯而易見(jiàn)會(huì)比之前要清晰透氣很多,動(dòng)態(tài)變化的金額用顏色突出強(qiáng)調(diào),未配置金額為次要信息,用灰色表示。


解決C處問(wèn)題

改變排版樣式,視覺(jué)上有主有次,“配置數(shù)量”跟“個(gè)數(shù)”為重復(fù)信息,只留一個(gè)即可。


解決D處問(wèn)題

按鈕“已啟動(dòng)點(diǎn)擊禁用”拆分為“點(diǎn)擊下線”按鈕,和問(wèn)卷狀態(tài)(進(jìn)行中),“展開(kāi)”按鈕放到最左邊,和“編輯”并列。


解決E處問(wèn)題

“新增獎(jiǎng)品”按鈕,如果增加配置獎(jiǎng)品列表,就會(huì)把按鈕擠到不可視區(qū)域,這樣的設(shè)計(jì)不是特別推薦,所以設(shè)計(jì)成懸浮按鈕,舊版本已經(jīng)建立用戶的按鈕功能認(rèn)知,懸浮按鈕上面配加號(hào)圖標(biāo),用戶就會(huì)很容易理解。



第三個(gè)頁(yè)面改版



上圖還是第二個(gè)改版頁(yè)面,此次要改版的是,點(diǎn)開(kāi)“展開(kāi)”按鈕顯示的屬性,目前的問(wèn)題是有很多重復(fù)的信息,例如時(shí)間,上面已經(jīng)顯示時(shí)間,最下面又出現(xiàn)同樣的時(shí)間。


最嚴(yán)重的問(wèn)題是,所有灰色字的注釋,不符合邏輯,不應(yīng)該在展開(kāi)的屬性下面提示,因?yàn)檫@已經(jīng)是編輯好的內(nèi)容,再去提示就意義不大了。


模擬一個(gè)場(chǎng)景,比如上圖紅圈的地方,已經(jīng)設(shè)置好了獎(jiǎng)品名稱為“幸運(yùn)紅包”,展開(kāi)后有個(gè)灰色字提示“用戶中獎(jiǎng)后,用于顯示給用戶看”,如果發(fā)現(xiàn)理解錯(cuò)了,然而在此頁(yè)面是不可以改正的,所以灰色字應(yīng)該在“新增獎(jiǎng)品”的編輯中提示,用戶在輸入信息的場(chǎng)景下,提示才是最合理的。



頁(yè)面改進(jìn)后,去掉重復(fù)的屬性信息,去掉灰色字的提示,(去掉這些內(nèi)容是提前跟需求方探討過(guò)的)最后用最少的空間展示了所有的信息,更清晰明了,其實(shí)展開(kāi)后的卡片高度,完全也是可以考慮去掉“展開(kāi)”“收起”的功能。

然后


第四個(gè)頁(yè)面改版



當(dāng)我看到這個(gè)頁(yè)面時(shí),不知道為什么要有A處的信息,所以再次請(qǐng)教需求方尋求答案,給我的答案是“子入口”“IP”是為了給開(kāi)發(fā)人員提供便捷查詢,例如這個(gè)中獎(jiǎng)?wù)叽嬖谒⒓t包行為,可以通過(guò)A處的信息進(jìn)行查詢。


很顯然這并不合理,因?yàn)閷?duì)用戶來(lái)說(shuō)沒(méi)有用,還造成了認(rèn)知負(fù)擔(dān),如果存在不良行為,提供編號(hào)信息就可以搞定了。


B處的設(shè)計(jì),讓頁(yè)面沒(méi)有條理,更是一個(gè)信息干擾項(xiàng)。



頁(yè)面改進(jìn)后,依然沿用首頁(yè)卡片式的設(shè)計(jì),去掉“子入口”“IP”“昵稱”多余屬性,去掉昵稱是因?yàn)榇饐?wèn)卷一般不會(huì)獲取到用戶昵稱。


“中獎(jiǎng)”和“未中獎(jiǎng)”卡片,設(shè)計(jì)上有明顯的視覺(jué)比重差異,去掉未中獎(jiǎng)的綠色標(biāo)示,只突出中獎(jiǎng)?wù)摺?



最后一個(gè)頁(yè)面改版



上圖是做問(wèn)卷用戶答案頁(yè),頁(yè)面的彈窗偏小,使用起來(lái)很憋氣,A處不知道什么意思,詢問(wèn)后可以直接去掉,B處是一個(gè)不合理的“確定”按鈕,原因是用詞錯(cuò)誤,應(yīng)該叫“關(guān)閉”更合適,因?yàn)檫@個(gè)頁(yè)面是查看信息,并沒(méi)有執(zhí)行某些任務(wù)操作。



改進(jìn)后加大彈窗,去掉頁(yè)面中的多余元素顏色,上下題目用留白間距隔開(kāi),去掉“確定”大按鈕,因?yàn)樘济娣e,改為右上角“關(guān)閉”按鈕。



最后 

當(dāng)我們看到一個(gè)頁(yè)面時(shí),如果只看到美與丑,那是不客觀的,這可能是對(duì)UI設(shè)計(jì)最大的誤解,UI的美不只體現(xiàn)在表面上,還有內(nèi)在的體驗(yàn)中。



UI設(shè)計(jì)一般都會(huì)帶著一種目的進(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ì)師對(duì)于業(yè)務(wù)要積極的去了解,對(duì)需求不要總被動(dòng)接收,要有意識(shí)的去探討挖掘,對(duì)業(yè)務(wù)的熟知,需求的準(zhǔn)確拿捏,是你開(kāi)始設(shè)計(jì)前最好的基石。


    • 文章來(lái)源:站酷   作者:吳星辰

      分享此文一切功德,皆悉回向給文章原作者及眾讀者.

      免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

      藍(lán)藍(lán)設(shè)計(jì)( www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、
      BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com

存檔

隔壁小寡妇让我爽了一夜| 国产女人aaa级久久久级| 中国成熟妇女毛茸茸| 久久国产avjust麻豆| 在线精品国产一区二区三区| 精品一区二区三区无码免费视频 | 亚洲精品无码久久久久| 日本亲近相奷中文字幕| 无码久久久久久久久| 极品粉嫩小泬白浆20PA片| 污视频在线观看| 又大又长粗又爽又黄少妇视频| 成人av视频免费观看| 推特怎么在国内使用| gogogo高清在线播放| 人妻少妇一区二区三区| 国产农村熟妇出轨videos| 国产精品永久免费| 熟妇五十路六十路息与子| 天天干天天日| 欧美乱人伦人妻中文字幕| 男人桶女人30分钟| 亚洲精品无码| 色情久久久av熟女人妻网站| 精品国产精品国产偷麻豆| 高中女学生破苞视频免费| 51久久成人国产精品麻豆| 久久久久无码国产精品不卡| 饥渴偷公乱第400章| 久久久久99精品成人片| 日本少妇又色又爽又高潮| 欧美又黄又嫩大片a级| 国产在线视频一区二区三区| 国产亚洲精品久久久久久久| 老熟女重囗味hdxx70星空| 88国产精品视频一区二区三区| 三个人c了我半小时| 国产乱妇无码大黄aa片| 人人妻人人藻人人爽欧美一区| 精品人妻无码一区二区三区不卡| 欧美性xxxxx极品少妇|