當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

提升UI細(xì)節(jié)和體驗(yàn)的10個(gè)常用方法

 2020-10-28 14:46  來(lái)源: 優(yōu)設(shè)   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

如果你覺(jué)得你的 UI 設(shè)計(jì)起來(lái)很無(wú)聊,想讓它看起來(lái)更加有趣,其實(shí)是有很多相對(duì)通用的方法。這些方法大都不算復(fù)雜,稍加調(diào)整,總會(huì)有不俗的效果。如果你想試試,不妨試試我所總結(jié)的這些賦予 UI 以個(gè)性的10個(gè)方式。

01

給文案注入生命

無(wú)論是新用戶引導(dǎo)流程還是加載信息,本身都能夠給用戶以帶來(lái)樂(lè)趣。這就是為什么諸如 Old Spice 和 Geico 這樣的品牌下的產(chǎn)品有著如此之廣的認(rèn)知度和影響力。

通過(guò)將幽默和個(gè)性化的元素引入到營(yíng)銷(xiāo)當(dāng)中,能夠帶來(lái)更好的廣告效果和內(nèi)容呈現(xiàn)。

MailChimp 的UX設(shè)計(jì)總監(jiān) Aarron Walter 說(shuō):「我們發(fā)現(xiàn),將幽默感、彩蛋、吉祥物以及許多個(gè)性化的元素塞入工作流程當(dāng)中,可以將原本平凡的任務(wù)轉(zhuǎn)變成為大眾所期待的體驗(yàn),讓人不愿錯(cuò)過(guò)?!?/p>

「加載中……」和「我們訓(xùn)練有素的猴子們正在努力……」之間的區(qū)別在于,后者更加富有生命力。

好的文案并不一定意味著它幽默。當(dāng)然,在不同的行業(yè)當(dāng)中,對(duì)于幽默的需求是不同的。有的網(wǎng)站和 APP 本身應(yīng)該嚴(yán)肅,就最好不要使用幽默的文案了。

在設(shè)計(jì)下一代產(chǎn)品的時(shí)候,請(qǐng)考慮如何將用戶體驗(yàn)做得更加幽默、更加引人入勝。

02

加入圖標(biāo)和表情符

添加表情符和圖標(biāo)能夠讓你的設(shè)計(jì)更加一目了然。看到放大鏡圖標(biāo),你會(huì)立刻意識(shí)到點(diǎn)擊這個(gè)圖標(biāo)能夠搜索。

我喜歡 Pieter Levels 對(duì)于他的網(wǎng)站 NomadList 的設(shè)計(jì),其中使用表情符讓它更加富有吸引力,更加友好。這使得你的 UI 更加具有視覺(jué)吸引力,更加簡(jiǎn)單有效。

除此之外,需要注意兩件事情,一是不要用得過(guò)多,二是不要重新發(fā)明輪子或者「過(guò)于創(chuàng)新」地使用它。盡量讓它有趣,而不是讓人感到惱怒,「+」就是添加,購(gòu)物車(chē)圖標(biāo)就意味著購(gòu)物車(chē),齒輪圖標(biāo)就是設(shè)置,這些約定俗成的就不要?jiǎng)恿恕?/p>

下面是我獲得圖標(biāo)的表情符號(hào)的來(lái)源:

http://emojione.com/

http://icons8.com/

http://boxIcons.com/

http://feathericons.com/

http://material.io/icons

03

通過(guò)插畫(huà)讓你的產(chǎn)品更加人性化

你可以通過(guò)插畫(huà)輕松地傳達(dá)復(fù)雜的的信息。

我們從小就經(jīng)歷過(guò)將語(yǔ)言和復(fù)雜的視覺(jué)進(jìn)行聯(lián)接的培訓(xùn),我們小時(shí)候看到的各種插畫(huà)和兒童讀物,都是學(xué)習(xí)的素材。

在產(chǎn)品設(shè)計(jì)種添加插畫(huà),能夠平衡界面,吸引用戶注意力,讓界面的功能和信息更容易被理解。

但是更重要的一點(diǎn)在于,插畫(huà)需要具有明確的目的性,能作為內(nèi)容的補(bǔ)充,而不是替代。插畫(huà)應(yīng)當(dāng)能改進(jìn)用戶體驗(yàn),不能干擾操作,樣式與界面應(yīng)該保持一致,不會(huì)顯得格格不入。

我平時(shí)獲取插畫(huà)的地方一般是:

http://icons8.com/ouch

http://freepik.com/

http://undraw.co/

http://humaans.com/

04

深色模式

如果你此刻正在開(kāi)發(fā)的 APP 有深色模式,那么對(duì)于我這種常年生活在深色模式下的用戶而言,簡(jiǎn)直是福音。深色模式讓雙眼更容易適應(yīng),讓人不用感覺(jué)像一直盯著刺眼的燈泡。

深色模式和淺色模式在設(shè)計(jì)上,并沒(méi)有太多本質(zhì)上的差異,它無(wú)非是修改整個(gè)配色方案,只不過(guò)在色彩配置上需要根據(jù)規(guī)范細(xì)致調(diào)整。我建議讓用戶自行決定是要用深色模式還是淺色模式,模式之間的切換能夠給用戶帶來(lái)良好的體驗(yàn),并且給用戶更強(qiáng)的掌控感。

05

高素質(zhì)的圖片

在APP 當(dāng)中,圖片和其他元素一樣非常之重要。你需要非常慎重地選擇高素質(zhì)的圖片,這樣能讓 UI 和 體驗(yàn)非常的生動(dòng)有趣,增強(qiáng) UI 界面的總體效果。有很多很棒的地方可以找到高素質(zhì)的圖片,下面是我的最?lèi)?ài):

http://unsplash.com/

http://pexels.com/

http://freepik.com/

http://stock.adobe .com/

http://pixabay.com/

06

讓出錯(cuò)狀態(tài)不那么令人沮喪

你應(yīng)當(dāng)將你的 App 當(dāng)中每一個(gè)事件——哪怕是不那么好的出錯(cuò)狀態(tài)——都視作為給人留下正面的、深刻印象的契機(jī)。

出錯(cuò)狀態(tài)給人的感知通常是消極的。但是,如果你能夠幫助用戶解決問(wèn)題,同時(shí)還可以通過(guò)個(gè)性和樂(lè)趣將其轉(zhuǎn)變?yōu)榉e極的體驗(yàn)。

我一直非常青睞 Google Chrome 瀏覽器在「網(wǎng)絡(luò)已斷開(kāi)」報(bào)錯(cuò)界面下的設(shè)計(jì),它幾乎提供了所有的必要信息,包括引導(dǎo)你如何修復(fù)網(wǎng)絡(luò),以及一個(gè)好評(píng)不斷的小恐龍跑酷小游戲!簡(jiǎn)直是天才的設(shè)計(jì)!

另外我很喜歡 Dribbble 的 404 頁(yè)面的設(shè)計(jì)。它之所以出色,是因?yàn)樗O(shè)計(jì)得確實(shí)很走心,并且用戶會(huì)快速回到各種設(shè)計(jì)作品當(dāng)中去。

07

加入動(dòng)效

從動(dòng)效進(jìn)入設(shè)計(jì)流程到如今,它已經(jīng)成為設(shè)計(jì)過(guò)程中不可缺少的部分了。無(wú)論是基于插畫(huà)的動(dòng)畫(huà)效果,還是基于UI元素的微交互,動(dòng)效無(wú)處不在。

在 Dribbble 上,動(dòng)效百花齊放。但是對(duì)于用戶而言,他們始終還是期望動(dòng)效能夠盡可能貼近現(xiàn)實(shí)世界中的實(shí)際體驗(yàn)。期望物體按照通常的物理規(guī)則來(lái)運(yùn)動(dòng)。

比如說(shuō)緩動(dòng)。一個(gè)球,我們給它施加力量,踢它的時(shí)候它會(huì)先加速,再減速,這個(gè)過(guò)程是逼真的。這些物理規(guī)則是動(dòng)效的基礎(chǔ),是真實(shí)的基礎(chǔ)。

諸如 Pincipled、XD 的動(dòng)畫(huà),Invision Studio、AE、Lottie、Flinto 等工具逐步興起,讓設(shè)計(jì)師可以更好更快地制作動(dòng)效。

我更喜歡 XD 內(nèi)的自動(dòng)動(dòng)畫(huà)功能,它很直觀,在我投入大量的時(shí)間精力之前,就可以快速驗(yàn)證創(chuàng)意的可行性。

我最近經(jīng)常使用另外一個(gè)很棒的工具,Airbnb 出品 的 Lottie。Lottie 讓我可以輕松地將任意 AE 轉(zhuǎn)化為對(duì)網(wǎng)頁(yè)更加友好的 SVG 動(dòng)畫(huà)。你可以查看下面的文章入門(mén):

與插畫(huà)類(lèi)似,動(dòng)畫(huà)應(yīng)該具有針對(duì)性,應(yīng)該體驗(yàn)優(yōu)先,而不是分散用戶注意力。如果你想制作系統(tǒng)化的動(dòng)效,不妨看看 Material Design 所提供的設(shè)計(jì)規(guī)范。

08

通過(guò)微交互來(lái)幫用戶關(guān)注細(xì)節(jié)


和動(dòng)畫(huà)類(lèi)似,微交互能夠給用戶帶來(lái)意想不到的微妙體驗(yàn),可以讓你在 APP 當(dāng)中感知到真實(shí)世界的體驗(yàn),并且微用戶交互帶來(lái)有效的即時(shí)反饋。

在 Medium 當(dāng)中,鼓掌(點(diǎn)贊)這一微交互對(duì)于體驗(yàn)的增強(qiáng)是一個(gè)非常典型的案例,這和 Youtube 當(dāng)中的點(diǎn)贊是截然不同的,Youtube 當(dāng)中,點(diǎn)贊只有簡(jiǎn)單的顏色變化,從灰色變?yōu)樗{(lán)色,沒(méi)有動(dòng)畫(huà)效果。這和兩個(gè)平臺(tái)本身的內(nèi)容屬性有直接的關(guān)聯(lián):文本內(nèi)容需要微交互來(lái)強(qiáng)化感知,而在視頻平臺(tái)當(dāng)中,這樣的微交互會(huì)喧賓奪主,分散用戶注意力,因此需要弱化。

09

加入圖案和漸變

圖案和漸變是讓不那么吸引人的內(nèi)容變得更加醒目美觀的一種有效方法。在圖像或者背景中加入紋理、圖案、漸變能夠迅速讓平淡無(wú)奇的設(shè)計(jì)增加風(fēng)味。

當(dāng)然,你可以根據(jù)實(shí)際情況來(lái)發(fā)揮你的創(chuàng)意,但是一定要注意一件事情,就是不要讓它喧賓奪主。

10

用好陰影,增加層次縱深

不要忘記視覺(jué)上的 Z 軸!

陰影是增加設(shè)計(jì)深度的一種好方法,它可以讓設(shè)計(jì)在視覺(jué)上更加立體。

不同的元素有著不同的縱深,而在視覺(jué)上,越靠近用戶的元素越重要,而這種重要就是靠陰影來(lái)呈現(xiàn)。

但是僅僅因?yàn)殛幱啊缚雌饋?lái)不錯(cuò)」就使用它,也是有問(wèn)題的。在設(shè)計(jì)決策的時(shí)候,要有目的性。在添加陰影的時(shí)候,記得篩選優(yōu)先級(jí),為最重要的部分添加陰影。

結(jié) 語(yǔ)

提升UI的細(xì)節(jié)感、視覺(jué)感、體驗(yàn)有很多技巧,帶著目標(biāo)來(lái)進(jìn)行設(shè)計(jì),有方向了總會(huì)有提升的方法。

文章轉(zhuǎn)自公眾號(hào):優(yōu)設(shè)(ID:uisdcer),作者:陳子木。

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門(mén)排行

信息推薦