一般 UI 設(shè)計(jì)師剛到一家新公司會(huì)遇到2種情況:
公司的產(chǎn)品視覺構(gòu)架包括規(guī)范以及到設(shè)計(jì)團(tuán)隊(duì)建設(shè)都非常完備,產(chǎn)品體驗(yàn)從第一眼看過去就很棒,可優(yōu)化的地方屈指可數(shù)。
與第一種情況完全相反。
那么我們從第二種比較糟糕的情況開始總結(jié)該如何從1過渡到2,做一個(gè)設(shè)計(jì)與用戶體驗(yàn)的提升。
一、基礎(chǔ)問題梳理
是不是時(shí)常有面試官喜歡問這樣的問題:你覺得我們的 APP 有什么可以優(yōu)化的地方嗎?
1. 一致性原則
一致性原則是雅各布 ? 尼爾森的十大交互設(shè)計(jì)原則之一,在實(shí)際項(xiàng)目實(shí)踐中有很強(qiáng)的指導(dǎo)性作用。
因?yàn)楦魇礁鳂拥脑颍恍┊a(chǎn)品的視覺設(shè)計(jì)沒有規(guī)范,由不同批次的設(shè)計(jì)師完成,導(dǎo)致 APP 中許多界面的視覺風(fēng)格都不一致。
一致性體現(xiàn)的方面
控件結(jié)構(gòu):比如卡片底部操作區(qū)展示(點(diǎn)贊/評(píng)論/分享的固定控件樣式)的統(tǒng)一。
視覺規(guī)范:主色調(diào)與其他輔色在各界面色值的統(tǒng)一,文字樣式與主體文字大小的統(tǒng)一。
操作反饋:用戶在使用 APP 同功能時(shí)的操作統(tǒng)一,并得到統(tǒng)一的反饋,比如點(diǎn)擊彈窗關(guān)閉按鈕,會(huì)有統(tǒng)一的下滑消失反饋。
一致性的重要性
因?yàn)閷?duì)于用戶來說,同樣的控件樣式/操作反饋都觸發(fā)了相同的事情,而不同的界面視覺語言打亂了用戶的界面使用慣性, 給產(chǎn)品易用性打了折扣。
同時(shí),視覺上的不規(guī)范也僅對(duì)設(shè)計(jì)團(tuán)隊(duì)的后續(xù)版本迭代視覺規(guī)范管理有影響,對(duì)產(chǎn)品的品牌性也造成了一定影響,給產(chǎn)品帶來一種不專業(yè)感。
雖然產(chǎn)品經(jīng)理有時(shí)并不在意 APP 界面的不一致,但作為 UI 設(shè)計(jì)師應(yīng)該以理服人推進(jìn)到底 。
2. 視覺品牌性
通常我們給 UI 設(shè)計(jì)的作用定義都是通過視覺的方式優(yōu)化產(chǎn)品體驗(yàn)傳達(dá)品牌概念。APP 產(chǎn)品不同于我們常見的線下產(chǎn)品,用戶對(duì)于它的感受幾乎完全的依賴于線上界面中所提供的信息。因此除了本身的產(chǎn)品 LOGO 之外,整個(gè) APP 的 UI 都在傳達(dá)給用戶這個(gè)產(chǎn)品的定位與品牌調(diào)性。
因此如果一個(gè) APP 做出來毫無自己的調(diào)性,和 N 種競(jìng)品像素級(jí)類似,那么產(chǎn)品本身也就很難從眾多的山寨中脫引而出。
3. 用戶體驗(yàn)漏洞
我們?cè)谶@里暫時(shí)不說用戶體驗(yàn)提升,先單純說缺漏。大家可能覺得只有剛剛做完1.0版本的 APP 會(huì)有這樣的缺漏,成熟的 APP 就不會(huì)有。
二、如何做設(shè)計(jì)提升
你的設(shè)計(jì)從「能用」到「好用」有多遠(yuǎn)的距離?
1. 學(xué)會(huì)包裝
這里說的包裝,當(dāng)然不是指你把作品用各種 mock up 和排版包裝成 blingbling 的展示圖,扔到站酷上就表示你包裝成功了。
也有同學(xué)在站酷私信我,問面試總失敗的原因,看過 TA 的作品之后就發(fā)現(xiàn)一個(gè)很嚴(yán)重的問題,作品不落地的同時(shí)過多的把作品停留在視覺包裝上而非內(nèi)容的包裝。
如果你是一名在公司上班的 UI 設(shè)計(jì)師,那么在工作中很現(xiàn)實(shí)的問題就在于沒有人會(huì)輕易同意你的設(shè)計(jì)稿(除非你是業(yè)界公認(rèn)的大咖),從產(chǎn)品經(jīng)理到設(shè)計(jì)經(jīng)理甚至開發(fā)都可能從配色到風(fēng)格開始 diss 你的設(shè)計(jì)稿,那么如何從一開始就爭(zhēng)取到主動(dòng)權(quán)呢?
用完整思考路徑代替結(jié)果
無論是配色還是圖標(biāo)風(fēng)格,相信都會(huì)有你自己的思考過程,把這些加上「證據(jù)」(競(jìng)品或大咖 APP 呈現(xiàn)的效果等)做成完成的分析,最后用一個(gè)完整的分析代替單純的一頁設(shè)計(jì)稿。
就算還會(huì)有不同的聲音,但至少會(huì)讓自己在前期站住腳,拿到主動(dòng)權(quán),并且很有說服力。
2. 設(shè)計(jì)移情
這個(gè)概念也是聽過一次騰訊的大咖設(shè)計(jì)師分享之后知道的概念,當(dāng)時(shí)感覺受益匪淺。
簡(jiǎn)化來說就是學(xué)會(huì)考慮用戶使用場(chǎng)景,站在用戶角度映射使用場(chǎng)景,考慮設(shè)計(jì)可能,把設(shè)計(jì)從能用變?yōu)楹糜谩?br />
3. 培養(yǎng)產(chǎn)品思維
數(shù)據(jù)化思維
很多好學(xué)的設(shè)計(jì)師注重設(shè)計(jì)創(chuàng)造力與交互理論的積累,容易忽略了數(shù)據(jù)分析的重要性。這個(gè)大概也就需要在實(shí)際工作項(xiàng)目中去體會(huì)了。
在整個(gè)項(xiàng)目進(jìn)行中,數(shù)據(jù)分析基本可以分為:
前期調(diào)研數(shù)據(jù)
中期測(cè)試數(shù)據(jù)
后期結(jié)果數(shù)據(jù)
三、被誤解的交互動(dòng)效
動(dòng)效在很多人眼里是和輔助一樣的存在,真的這么雞肋嗎?
1. 交互動(dòng)效的用途區(qū)分
現(xiàn)在 AP P中可以用到的交互動(dòng)效按用途分,可以分為幾個(gè)類型:
反饋型交互動(dòng)效
在使用某個(gè)功能后,反饋用戶當(dāng)前 APP 功能狀態(tài)切換的交互動(dòng)效。涵蓋的范圍也非常廣,比如下拉 loading、tabbar 上的微動(dòng)效等。
功能型交互動(dòng)效
特定工具類、直播類等產(chǎn)品所需求的元素動(dòng)效。比如直播時(shí)飛過的飛機(jī)、清理應(yīng)用時(shí)轉(zhuǎn)動(dòng)的風(fēng)扇。這類動(dòng)效通過擬物化設(shè)計(jì)完成特定的重要功能,增強(qiáng)了與用戶的互動(dòng),是特點(diǎn)功能的最佳展現(xiàn)方式。
過渡型交互動(dòng)效
在頁面跳轉(zhuǎn)與功能銜接中起到重要作用的交互動(dòng)效。好的過渡動(dòng)效避免了界面快速切換時(shí)給用戶帶來的迷失,給人以極佳的使用舒適感。
趣味型交互動(dòng)效
起到錦上添花、增加趣味性和品牌調(diào)性的交互動(dòng)效。
2. Lottie 開源動(dòng)畫庫
通常我們做的偏復(fù)雜的 app 動(dòng)效,在實(shí)際落地過程中會(huì)遇到很多問題,比如:Gif 圖失真、占內(nèi)存過大、開發(fā)成本過高。
那么由 Airbnb 開源的動(dòng)畫庫 Lottie 就很有效的解決了這一系列問題。Lottie 可以直接利用 AE 導(dǎo)出的 JSON 動(dòng)畫文件,將其解析為原生代碼,在 iOS 和 Android 設(shè)備平臺(tái)上運(yùn)行。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
新聞名稱:有可以提升用戶設(shè)計(jì)體驗(yàn)的方法!
文章出自:http://jinyejixie.com/news1/312601.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、電子商務(wù)、網(wǎng)站改版、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)公司
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)