手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

產(chǎn)品體驗(yàn)增長(zhǎng)中的3個(gè)核心招式

2022-3-11    周周

在互聯(lián)網(wǎng)技術(shù)日趨成熟、人口紅利進(jìn)入尾聲,產(chǎn)品的流量越來(lái)越稀缺,對(duì)外部依賴越來(lái)越大。面對(duì)當(dāng)前的局面,產(chǎn)品急需要找到自身流量正向增長(zhǎng)的方式。


不難發(fā)現(xiàn)現(xiàn)在大部分產(chǎn)品的體驗(yàn)服務(wù)都趨于同質(zhì)化,本文將以「產(chǎn)品與用戶之間的信任」為出發(fā)點(diǎn),從產(chǎn)品體驗(yàn)的角度,對(duì)比產(chǎn)品體驗(yàn)層面的差異化,為大家提供設(shè)計(jì)思路,助力產(chǎn)品數(shù)據(jù)的增長(zhǎng),設(shè)計(jì)出既好看又好用的產(chǎn)品界面。


*文章中出現(xiàn)的工具名單以及網(wǎng)址出處,我將會(huì)匯總到文章結(jié)尾,供大家學(xué)習(xí)使用。







信任,一開(kāi)始只是用來(lái)描述人與人之間的關(guān)系,而現(xiàn)在,越來(lái)越多的人也把應(yīng)用在人與物之間的關(guān)系,即用戶與企業(yè)產(chǎn)品。



一、信任是用戶購(gòu)買(mǎi)、產(chǎn)品體驗(yàn)的基礎(chǔ)


1.1  以信任為基礎(chǔ)的購(gòu)買(mǎi)決策

眾所周知,大部分公司的產(chǎn)品都是免費(fèi)的,而企業(yè)的盈利點(diǎn)在于付費(fèi)的服務(wù),那大家想沒(méi)想過(guò)一個(gè)問(wèn)題,為什么用戶愿意購(gòu)買(mǎi)你產(chǎn)品的服務(wù)?事實(shí)上,問(wèn)題的關(guān)鍵在于來(lái)自用戶對(duì)企業(yè)的信任。


“用戶在購(gòu)買(mǎi)決策的模式”有很多種,最常見(jiàn)的來(lái)自托爾曼S-O-R模式所揭示的:用戶在受到外部因素的刺激下,產(chǎn)生心理決策活動(dòng),從而會(huì)作出購(gòu)買(mǎi)決策的行為。比如下面這個(gè)例子:


因刺激而產(chǎn)生了需求:情人節(jié)要到了(刺激因素),我需要為女朋友挑選一份禮物(產(chǎn)生需求)。

了解和收集相關(guān)信息:朋友告訴我可以送口紅或者香水,我去淘寶搜索相關(guān)產(chǎn)品(心理決策活動(dòng))。

對(duì)信息的評(píng)估和對(duì)比:對(duì)比了所有產(chǎn)品的品牌、價(jià)格、評(píng)價(jià)、售后的信息(心理決策活動(dòng))。

作出購(gòu)買(mǎi)決策的行為:最終選擇迪奧999色號(hào),在淘寶上下單了,支付成功(作出購(gòu)買(mǎi)決策的行為)。



1.2  信任的「前因」

為什么我最終選擇迪奧999色號(hào),而不是選擇其他產(chǎn)品,主要原因還是在“心理活動(dòng)的階段”對(duì)迪奧999色號(hào)建立起了更高穩(wěn)固可靠的心智,迪奧這個(gè)產(chǎn)品獲取了我的信任,所以我產(chǎn)生了付費(fèi)的行為。


現(xiàn)實(shí)生活中,用戶從普通的態(tài)度到信任一款產(chǎn)品,都是基于先「認(rèn)知」、再「情緒」、定「態(tài)度」這三個(gè)階段而建立的,在用戶建立了對(duì)產(chǎn)品的心智之后,才會(huì)產(chǎn)生相關(guān)的信任力,從而產(chǎn)生相關(guān)的付費(fèi)行為。


所以說(shuō),信任的產(chǎn)生離不開(kāi)用戶心智的建立,而在用戶心智的范疇里會(huì)有很多復(fù)雜的情緒(如下圖),而對(duì)產(chǎn)品的信任是觸發(fā)用戶行為的必須要有的前置條件。



1.3  信任的「后果」

別驚訝,這個(gè)后果不是貶義詞的后果,而是指企業(yè)產(chǎn)品得到用戶信任后的結(jié)果。一個(gè)產(chǎn)品的生命周期可以劃分為四個(gè)時(shí)期,分別是起步期、成長(zhǎng)期、成熟期、衰退期,毫無(wú)疑問(wèn),當(dāng)使用者對(duì)企業(yè)的產(chǎn)品失去了信心,就會(huì)影響到用戶黏性,尤其是會(huì)影響不同生命周期下產(chǎn)品給用戶帶來(lái)的價(jià)值意識(shí),使產(chǎn)品完不成業(yè)務(wù)目標(biāo)。


提升產(chǎn)品體驗(yàn)是設(shè)計(jì)師的工作范疇,而信任對(duì)于一個(gè)產(chǎn)品體驗(yàn)是非常重要的基礎(chǔ)。






二、如何建立信任


2.1  信任的三個(gè)階段

企業(yè)信任體系建設(shè)主要經(jīng)歷3個(gè)階段流程,從滿足用戶基礎(chǔ)功能訴求——建立起用戶與平臺(tái)信任的關(guān)系——讓用戶對(duì)平臺(tái)(產(chǎn)品)產(chǎn)生信仰與依賴感,在這個(gè)流程中讓用戶不斷地付費(fèi)享受體驗(yàn),數(shù)據(jù)表現(xiàn)一定不會(huì)差。


最典型的例子是蘋(píng)果企業(yè)了,喬布斯于2010年6月8日在美國(guó) Moscone West會(huì)展中心舉辦的世界開(kāi)發(fā)者大會(huì)上展示了 iPhone 4。蘋(píng)果的全新 iOS操作系統(tǒng)使得iPhone 4不僅僅滿足了用戶的通信需要,而 APP Story的推出,讓用戶可以自由下載各種各樣的軟件(這在塞班系統(tǒng)中是無(wú)法想象的),正是因?yàn)檫@兩個(gè)原因,促使用戶對(duì)蘋(píng)果產(chǎn)品產(chǎn)生了信任感,成就了蘋(píng)果企業(yè)占全球市場(chǎng)一半市場(chǎng)份額的傲人成績(jī)。



2.2  產(chǎn)品價(jià)值和用戶的需求

我們就拿蘋(píng)果企業(yè)的手機(jī)舉例子,起初他們的手機(jī)一定要滿足用戶基礎(chǔ)功能、接著不斷優(yōu)化產(chǎn)品的質(zhì)量達(dá)到一個(gè)高標(biāo)準(zhǔn),產(chǎn)品有了安全、容易等印象后就很容易給予用戶一種信任感覺(jué),所以蘋(píng)果手機(jī)成為用戶的情感依托在生活和工作中離不開(kāi)的電子產(chǎn)品了。


如果用我熟悉的馬斯洛需求層次理論和上面我所陳述的流程結(jié)構(gòu)理解的話,我們可以得出這樣的圖表:一個(gè)產(chǎn)品首先滿足了使用者的基本需求,然后在版本更新的過(guò)程中,將產(chǎn)品的品質(zhì)提升到一個(gè)新的高度,從而達(dá)到更高的要求,在這個(gè)過(guò)程中,用戶的精神狀態(tài)必須由產(chǎn)品用不用都行、生活離不開(kāi)了(情感依托)、由基礎(chǔ)慢慢轉(zhuǎn)為驚喜的。



2.3  信任的關(guān)鍵因素

通過(guò)上面的講解,我們不難意識(shí)到想要企業(yè)更好地在數(shù)據(jù)上增長(zhǎng),與讓用戶對(duì)企業(yè)的產(chǎn)品擁有“信任”的心態(tài)是密不可分的。下面,我們來(lái)聊一聊信任的關(guān)鍵因素。


信任的關(guān)鍵因素,你可能覺(jué)得會(huì)很空泛,依舊不知道具體要做些什么,沒(méi)關(guān)系,我們可以把問(wèn)題的范圍再縮小一點(diǎn)——互聯(lián)網(wǎng)的產(chǎn)品是怎么塑造信任的感覺(jué)的?


我舉幾個(gè)例子,比如支付寶產(chǎn)品就會(huì)以政府做信任背書(shū),比如拼多多、得物、二手轉(zhuǎn)轉(zhuǎn)等電商交易平臺(tái)會(huì)借助權(quán)威的機(jī)構(gòu)來(lái)和用戶建立起信任關(guān)系。


我理解信任的關(guān)鍵因素,最關(guān)鍵的點(diǎn)那就是通過(guò)理性和感性這兩把武器去塑造產(chǎn)品,理性層面需要解決用戶最基本的核心功能的訴求;而感性層面則需要產(chǎn)品為用戶提供超出預(yù)期的服務(wù)體驗(yàn)。讓用戶不斷地在這種良好的正向循環(huán)中體驗(yàn)產(chǎn)品,產(chǎn)品的體驗(yàn)才會(huì)越來(lái)越好。





三、設(shè)計(jì)師能為信任做些什么

以上的例子都是產(chǎn)品功能上為產(chǎn)品帶來(lái)的信任,那屬于產(chǎn)品經(jīng)理的工作,那我們?cè)O(shè)計(jì)師能為產(chǎn)品的信任做一些什么呢?



3.1  以用戶為中心的增長(zhǎng)設(shè)計(jì)

每個(gè)企業(yè)的產(chǎn)品都希望自己的用戶是全市場(chǎng)最多的群體,用戶從零到最多總有一個(gè)過(guò)程,這里有一個(gè)專(zhuān)業(yè)詞匯叫做“AARRR”概念,簡(jiǎn)單地理解就是產(chǎn)品的用戶從零到最多的過(guò)程叫做用戶增長(zhǎng)。而為企業(yè)提供用戶增長(zhǎng)的設(shè)計(jì)策略,就叫做用戶增長(zhǎng)設(shè)計(jì)(User Growth Design),即簡(jiǎn)稱(chēng)UGD。


在這一概念上,加入了“以用戶為中心”的理念,即以用戶為中心的增長(zhǎng)設(shè)計(jì)。以為用戶為中心的關(guān)鍵詞就在于“同理心”,設(shè)計(jì)師則要善于運(yùn)用同理心(即以用戶的角度和思維方式)去發(fā)現(xiàn)問(wèn)題,去解決問(wèn)題的。


而我們?cè)O(shè)計(jì)師最能為企業(yè)信任做的就是以用戶為中心的增長(zhǎng)設(shè)計(jì),也就是“以同理心去思考做增長(zhǎng)設(shè)計(jì),關(guān)注產(chǎn)品增長(zhǎng)的同時(shí)盡可能地不去傷害到用戶利益和感受,在我們考慮提升產(chǎn)品數(shù)據(jù)的時(shí)候也需要考慮用戶的使用體驗(yàn)?!?/strong>



3.2 更多方面的能力

如果前幾年,你問(wèn)一個(gè)設(shè)計(jì)師怎么才能和用戶建立起信任,大部分人的第一反應(yīng)就是把圖做得好看,很多初學(xué)者都會(huì)認(rèn)為UI設(shè)計(jì)師的第一任務(wù)就是把圖做好看,所以會(huì)從形狀、色彩、質(zhì)地、構(gòu)成上面下功夫。


相信我,那已經(jīng)是過(guò)去式了,很多公司都說(shuō) UI是產(chǎn)品設(shè)計(jì)師,他們對(duì) UI設(shè)計(jì)師的要求并不是單純的視覺(jué)效果,會(huì)要求使用更多的體驗(yàn)工具、交互模型、產(chǎn)品方法論等等。





四、信任問(wèn)題等同于用戶體驗(yàn)問(wèn)題



4.1  FBM行為模式

斯坦福大學(xué)的福格教授,是一位從事行為科學(xué)的教授,他于2009年提出了一個(gè)“人的行為完成模式(簡(jiǎn)稱(chēng)FBM的行為模)”。在該模式下,他認(rèn)為,一個(gè)人的行動(dòng)是由三個(gè)因素所決定的:行動(dòng)動(dòng)機(jī),行動(dòng)能力,觸發(fā)條件。使用者的行為是由動(dòng)機(jī)、能力和觸發(fā)三者有機(jī)地組合而產(chǎn)生的。


從 FBM的行為模式可以發(fā)現(xiàn),動(dòng)機(jī)越強(qiáng)、能力越強(qiáng)(或者說(shuō)門(mén)檻越低)、觸發(fā)效果越好,就越容易達(dá)成特定的行為,達(dá)到目的。



4.2  做一個(gè)假設(shè)

如果把用戶不購(gòu)買(mǎi)、產(chǎn)品數(shù)據(jù)不增長(zhǎng)當(dāng)作一個(gè)表象問(wèn)題的話,在我看來(lái)問(wèn)題出現(xiàn)在產(chǎn)品取得不了用戶的信任,試想一下用戶都不信任產(chǎn)品了,怎么會(huì)去購(gòu)買(mǎi),用戶都不去購(gòu)買(mǎi)產(chǎn)品的服務(wù),那產(chǎn)品的數(shù)據(jù)不增長(zhǎng)就是必然現(xiàn)象。


那究竟是什么原因造成用戶對(duì)產(chǎn)品產(chǎn)生了不信任呢?在我看來(lái)就是產(chǎn)品的用戶體驗(yàn)出了問(wèn)題,用戶在一次次的產(chǎn)品體驗(yàn)中,出現(xiàn)了產(chǎn)品不好用的負(fù)面情緒,自然會(huì)給產(chǎn)品貼上“不信任”的標(biāo)簽,所以說(shuō)信任問(wèn)題等同于用戶體驗(yàn)問(wèn)題。


因此,如果想讓我們的產(chǎn)品獲取用戶的信任、提高產(chǎn)品體驗(yàn),不妨通過(guò)交互、動(dòng)效、視覺(jué)這三個(gè)因素來(lái)指導(dǎo)使用者的行為。










騰訊ISUX在《2021-2022 設(shè)計(jì)趨勢(shì)ISUX報(bào)告 · 動(dòng)態(tài)篇》中指出:“動(dòng)態(tài)能激發(fā)用戶的情緒,為靜態(tài)的視覺(jué)設(shè)計(jì)注入活力與生命力,在不久的將來(lái)勢(shì)必席卷所有人的目光,是最好提升用戶體驗(yàn)方法之一?!?/strong>



一、動(dòng)效的簡(jiǎn)單常識(shí)


1.1  為什么說(shuō)動(dòng)效很重要

有研究顯示,當(dāng)人們遇到不感興趣的事情時(shí),他們的注意力只會(huì)集中在10分鐘內(nèi),在短暫的休息之后,他們的注意力才會(huì),再次回到7到10分鐘內(nèi)。


基于上述原因,我們就要保證在用戶處于注意力集中的時(shí)間段,迅速地傳達(dá)有效信息,把用戶的需求解決完畢,讓用戶切實(shí)地感覺(jué)到我們是一款好用的產(chǎn)品。



1.2動(dòng)效的表現(xiàn)形式

動(dòng)效,現(xiàn)在已經(jīng)成為了 APP和網(wǎng)頁(yè)的常見(jiàn)的表現(xiàn)形式了,設(shè)計(jì)師經(jīng)過(guò)精心設(shè)計(jì),可以讓用戶在游戲中的操作更加流暢,操作也更加流暢。動(dòng)效就像是產(chǎn)品的潤(rùn)滑劑,通過(guò)動(dòng)效可以更好地連接用戶,提升產(chǎn)品體驗(yàn)。


動(dòng)效一般都是指向性動(dòng)效,能夠描述元素的運(yùn)動(dòng)軌跡、運(yùn)動(dòng)狀態(tài)和元素之間的邏輯關(guān)系,常見(jiàn)的表現(xiàn)形式有滑動(dòng)、放大、最小化、翻頁(yè)、平移、滾動(dòng)、切換對(duì)象、展開(kāi)堆疊、添加到列表等等。下面這個(gè)就是我找到的關(guān)于滑動(dòng)的案例,同樣是Banner區(qū)不同的產(chǎn)品對(duì)滑動(dòng)動(dòng)效的設(shè)計(jì)卻不相同。




二、動(dòng)效果的制作和交付

動(dòng)效大范圍興起始于扁平化設(shè)計(jì)之后,扁平化設(shè)計(jì)的好處在于用戶的注意力可以集中在界面的核心信息上,將對(duì)用戶無(wú)效的設(shè)計(jì)元素去掉,不被設(shè)計(jì)所打擾分散注意力,使用體驗(yàn)更加純粹自然。



2.1  常用動(dòng)效軟件

接下來(lái)我們就來(lái)看看繼扁平化之后,市場(chǎng)上都有哪些動(dòng)效軟件可以使用。


AE:實(shí)現(xiàn)算是老牌的全能選手,幾乎可以制作任何你想要的效果,包括圖標(biāo)、交互的動(dòng)效,但是操作相對(duì)復(fù)雜,第一次接觸的同學(xué)還是建議先看看教程。


Principle:操作簡(jiǎn)單,效率高,可以和Sketch和Figma軟件同步使用。適合制作快速展示用的demo或一些簡(jiǎn)單交互動(dòng)效設(shè)計(jì)。*在我公眾號(hào)斜杠7濕兄中,回復(fù)Principle可以獲得中文的版本哦。


Origami:這個(gè)軟件是Faceboook的開(kāi)源工具,他的作用和Principle軟件很像,但是它的操作方式很特別,所有的交互指令是需要拖動(dòng)連接的,而且Origami能現(xiàn)實(shí)的效果開(kāi)發(fā)就可以實(shí)現(xiàn),所以開(kāi)發(fā)對(duì)設(shè)計(jì)師說(shuō)“實(shí)現(xiàn)不了”這樣的借口了,在Origami面前是不成立的。


Figma:figma是基于jacascript開(kāi)發(fā)的工具,framer除了可以做設(shè)計(jì)稿之外,他還是一個(gè)可交互的動(dòng)效軟件,上手也比較簡(jiǎn)單,是我的主力工具。



2.2  動(dòng)效的交付方式

在產(chǎn)品中,UI目前動(dòng)效交付的方式主要有兩種,一種是文件交付,實(shí)現(xiàn)成本低,難度也比較低;另外一種是參數(shù)交付方式,實(shí)現(xiàn)成本比較高,難度比較大。


文件交付方式:實(shí)現(xiàn)方式可以是Gif或者是Mp4,開(kāi)發(fā)使用這種格式去實(shí)現(xiàn)其動(dòng)態(tài)效果?;蛘?,給開(kāi)發(fā)工程師提供一份動(dòng)態(tài)格式的文件,為開(kāi)發(fā)工程師展示動(dòng)態(tài)效果,開(kāi)發(fā)工程師在根據(jù)看到的效果找到相似的開(kāi)源文件,在開(kāi)源文件上進(jìn)行微調(diào)整。


參數(shù)交付方式:開(kāi)發(fā)工程師根據(jù)設(shè)計(jì)師動(dòng)態(tài)運(yùn)動(dòng)的文字表述,利用代碼進(jìn)行動(dòng)效果還原。



2.3  Lottie是最實(shí)用的

Lottie說(shuō)白了就是一個(gè)動(dòng)畫(huà)庫(kù),能分析 AE 導(dǎo)出的動(dòng)畫(huà) JSON 文件,開(kāi)發(fā)通過(guò)動(dòng)畫(huà)庫(kù)的內(nèi)容來(lái)解釋JSON 文件,然后再在產(chǎn)品上實(shí)現(xiàn)相同的動(dòng)畫(huà)效果,是動(dòng)效最為穩(wěn)定的一種實(shí)現(xiàn)方式。


Lottie的優(yōu)點(diǎn)在于穩(wěn)定、文件體積較小,可以兼容 Android、iOS、Web平臺(tái),并且實(shí)現(xiàn)出來(lái)的效果畫(huà)質(zhì)相對(duì)品質(zhì)較高是目前最受歡迎的一種動(dòng)效實(shí)現(xiàn)方式。


當(dāng)然了有優(yōu)點(diǎn)也會(huì)有缺點(diǎn),因?yàn)長(zhǎng)ottie 需要先通過(guò) bodymovin (AE插件)將 AE 動(dòng)畫(huà)工程文件轉(zhuǎn)換為 JSON 格式的描述文件,所以要求設(shè)計(jì)師要懂AE,前面講了AE是有學(xué)習(xí)成本的所以這是Lottie的一個(gè)門(mén)檻。


不過(guò)大家不用擔(dān)心,下面是我推薦的4個(gè)線上工具網(wǎng)站,分別是moko、Lottiefiles-Lottie player、Pixelture、FLOW,希望可以對(duì)學(xué)習(xí)Lottie的同學(xué)有所幫助。


moko:是一款在線實(shí)現(xiàn)Lottie的動(dòng)畫(huà)效果,你可以通過(guò)簡(jiǎn)單的操作就制作一個(gè)動(dòng)圖,網(wǎng)站里面也有簡(jiǎn)單的教程,上手很容易。

Lottiefiles-Lottie player:是Lottie的實(shí)際預(yù)覽工具,你可以快速查看你的Lottie實(shí)現(xiàn)的動(dòng)畫(huà)效果。


Pixelture:里面有一百五十多種麻省理工學(xué)院許可的插圖和Lottie動(dòng)畫(huà),最難得的一點(diǎn)是,可以直接在商業(yè)項(xiàng)目中使用。

Flow:這是一款可以直接從Sketch導(dǎo)入文件,并生成開(kāi)發(fā)可以使用的lottie的js文件的工具。





三、盤(pán)點(diǎn)那些好用的動(dòng)效方式


前面講了關(guān)于動(dòng)效的一些常識(shí),動(dòng)效里面還有一個(gè)不可忽視的知識(shí)點(diǎn),那就是交互手勢(shì),交互手勢(shì)是使用移動(dòng)設(shè)備最基本的手段,很多產(chǎn)品都是通過(guò)創(chuàng)新的交互響應(yīng)來(lái)更友好地解決用戶的痛點(diǎn)。


如果你仔細(xì)對(duì)比,將不難發(fā)現(xiàn),很多巨頭互聯(lián)網(wǎng)公司都是很注重交互手勢(shì)的,比如谷歌就總結(jié)了下面在移動(dòng)端常用的交互手勢(shì),那么接下來(lái),我就挑3種交互手勢(shì),來(lái)盤(pán)點(diǎn)一下咱們身邊產(chǎn)品好的交互動(dòng)效設(shè)計(jì)點(diǎn)。



4.1  長(zhǎng)按發(fā)現(xiàn)更多驚喜

長(zhǎng)按發(fā)現(xiàn)更多驚喜,比如在淘寶首頁(yè)場(chǎng)景,如果進(jìn)行下拉手勢(shì),淘寶根據(jù)拖拽距離產(chǎn)生兩種交互結(jié)果:正常短距離下拉提示“松開(kāi)刷新”;而持續(xù)下拉則會(huì)進(jìn)入淘寶二樓承接頁(yè)。這樣的方式給用戶一種驚喜感,也節(jié)省了很多Feed的展示空間。


前段時(shí)間,我還發(fā)現(xiàn)了網(wǎng)易云音樂(lè)的一個(gè)小體驗(yàn)點(diǎn),如果你從首頁(yè)進(jìn)入排行榜,再?gòu)呐判邪襁M(jìn)入下一個(gè)層級(jí)的場(chǎng)景,此時(shí)想回到首頁(yè)的(第一層級(jí))場(chǎng)景,只需要長(zhǎng)按2秒的返回鍵,就可以回到首頁(yè)的,這樣的操作,讓我覺(jué)得產(chǎn)品很有效率。



4.2  單指最便捷的操作

單指操作雖然是最常見(jiàn)的交互方式,但是也有產(chǎn)品玩出了花樣,提升了用戶體驗(yàn)。

比如在QQ聊天中的消息列表內(nèi)的小紅點(diǎn)快捷清空操作就非常有意思,用戶可以直觀地將某條消息的未讀紅點(diǎn)直接拖拽刪除,對(duì)于強(qiáng)迫癥患者來(lái)說(shuō)很友好,而且動(dòng)效也很有趣。


在視頻播放器的產(chǎn)品上大家知道通過(guò)左右滑動(dòng)、上下滑動(dòng)以及區(qū)域長(zhǎng)按等操作實(shí)現(xiàn)亮度、音量、快速進(jìn)退和速率播放等功能,但是優(yōu)酷在此功能上進(jìn)行了更貼心的設(shè)計(jì),在全屏播放狀態(tài)通過(guò)左右滑動(dòng)進(jìn)行快進(jìn)的同時(shí),屏幕會(huì)出現(xiàn)一個(gè)小窗口來(lái)實(shí)時(shí)觀察快進(jìn)到那里的畫(huà)面,讓我覺(jué)得體驗(yàn)很便捷。



4.3  雙指很有趣的手勢(shì)

高德地圖在交互手勢(shì)上有很多可取的地方,比如,在地圖縮放這個(gè)功能上就有很多手勢(shì)對(duì)應(yīng)不同場(chǎng)景的用戶需求


單手場(chǎng)景:兩指搓動(dòng)屏幕是縮放功能就不用介紹,很多帶地圖功能的產(chǎn)品都有。

雙手場(chǎng)景:但是單手場(chǎng)景下,雙擊屏幕,地圖可按一定比例放大地圖,而雙按滑動(dòng)又可以無(wú)縫縮放地圖,徹底解決單手對(duì)于縮放地圖的不友好體驗(yàn)。


bilibili上有個(gè)有趣的功能,在全屏觀看視頻的狀態(tài)下,可以通過(guò)雙指操作讓用戶隨心所欲地控制畫(huà)幅大小和角度,雖然我覺(jué)得沒(méi)什么實(shí)質(zhì)功能,但是也蠻有趣的。


講了這么多,我們聚焦一下,什么動(dòng)效對(duì)用戶來(lái)說(shuō)是好的?國(guó)外一名設(shè)計(jì)師曾這樣定義好的動(dòng)效“好的動(dòng)效應(yīng)該是隱形的,應(yīng)該是以提高可用性為前提,并且以令人覺(jué)得自然含蓄的方式提供有效用戶反饋的一種機(jī)制?!?/strong>










俗話說(shuō),知己知彼百戰(zhàn)百勝,提高用戶體驗(yàn),才能贏得消費(fèi)者的信賴。那怎么提升用戶體驗(yàn)?zāi)?,掌握交互?guī)則是前提,了解用戶心理是保障。



一、文案的力量

文案是用戶與界面交互的重要渠道,許多設(shè)計(jì)師會(huì)將需求方的文案,直接粘貼到設(shè)計(jì)中。實(shí)際上,設(shè)計(jì)師對(duì)于文案也是可以設(shè)計(jì)的,它能夠幫助用戶更好理解產(chǎn)品服務(wù),與用戶產(chǎn)生共鳴。針對(duì)文案的設(shè)計(jì),常規(guī)的我就不說(shuō)了,以下是我認(rèn)為最容易混淆概念也最容易犯錯(cuò)的兩點(diǎn)心得。



1.1  分場(chǎng)景的簡(jiǎn)潔、清晰

現(xiàn)在產(chǎn)品講究的是高效,就像張小龍所說(shuō)的“用完即走”,所以我理解大多數(shù)情況下文案的描述不應(yīng)該給用戶臃腫感覺(jué),簡(jiǎn)潔且闡明要義,用完即走,我們?cè)谠O(shè)計(jì)文案時(shí)候省略不需要的詞匯,保證文案可通暢地指導(dǎo)用戶完成操作,即可。


我說(shuō)的這些,我相信大家都能夠理解,不過(guò)我的主要目的并不是這個(gè),我想講這種“簡(jiǎn)潔”也要分場(chǎng)景去考慮,比如某個(gè)打車(chē)軟件的彈窗場(chǎng)景中,并不是文案越短越好。


文案做到簡(jiǎn)潔清晰后,還要注意文案的表述是否準(zhǔn)確有效,也就是文字表達(dá)要精準(zhǔn),不能因?yàn)楹?jiǎn)潔而丟失了關(guān)鍵信息。


比如下面這個(gè)案例,我不可否認(rèn)左面的案例看起來(lái)更加有效率,但是文案過(guò)于簡(jiǎn)單會(huì)引起用戶的異議,因?yàn)椤叭∠痹谶@個(gè)場(chǎng)景下也代表取消訂單的意思,所以在簡(jiǎn)潔的同時(shí),清晰、準(zhǔn)確地傳達(dá)信息更加重要。



1.2  提供解決辦法才是王道

我們很難保證用戶在使用產(chǎn)品中不會(huì)出現(xiàn)問(wèn)題,當(dāng)出現(xiàn)問(wèn)題時(shí)候我們應(yīng)該給予用戶解決的辦法,而不是直白地告訴用戶問(wèn)題出在哪里,因?yàn)橹挥斜WC用戶順利地完成一系列操作,達(dá)成自己的目標(biāo),我們的產(chǎn)品才能真正留住用戶,才算是滿足了用戶需求。


并且,在一些比較復(fù)雜或者是與交易金額有關(guān)的場(chǎng)景中,我建議除了把問(wèn)題標(biāo)紅之外,還可以使用這種氣泡彈窗的形式給予用戶更加明確的幫助。比如下面這個(gè)案例,不僅僅是告訴用戶“不要輸入字符”,還應(yīng)當(dāng)告訴用戶應(yīng)該輸入什么類(lèi)型的文案才能算是正確填寫(xiě)信息。





二、準(zhǔn)確勝于一切



2.1  有文案的圖標(biāo)更容易理解

在我們的界面中,圖標(biāo)隨處可見(jiàn),并且是一個(gè)非常重要的視覺(jué)表達(dá)要素。圖標(biāo)的本質(zhì)意義在于用圖形語(yǔ)言傳達(dá)給用戶信息。


我不否認(rèn)在tab欄的圖標(biāo)加入文案就是絕對(duì)正確的,市場(chǎng)上還有很多產(chǎn)品也是去掉文案只用圖標(biāo)展示的。但是你打開(kāi)手機(jī)的應(yīng)用,會(huì)發(fā)現(xiàn)很多日活過(guò)億的產(chǎn)品,都是在圖標(biāo)下面加了文案,比如淘寶,不僅在圖標(biāo)下面加了文案,并且還會(huì)在旁邊注明當(dāng)前的狀態(tài),抖音更是連圖標(biāo)都省了,直接上文案。



2.2  設(shè)計(jì)可點(diǎn)擊區(qū)域的尺寸

準(zhǔn)確除了信息傳達(dá)的準(zhǔn)確之外,還有另外一層的意思就是操作準(zhǔn)確,因?yàn)閁I設(shè)計(jì)師最開(kāi)始的載體是PC臺(tái)式機(jī)器,進(jìn)行操作一般都是由鼠標(biāo)完成,但是現(xiàn)在是移動(dòng)互聯(lián)網(wǎng)時(shí)代,很多交互操作都是由用戶的手指去完成。


基于用戶(人)的手指大小不同、移動(dòng)設(shè)備的屏幕尺寸大小也是五花八門(mén),所以我們?cè)跒橐苿?dòng)設(shè)備設(shè)計(jì)時(shí),應(yīng)該考慮到手指可點(diǎn)擊區(qū)域足夠大,以便用戶的手指能夠成功點(diǎn)擊,確保用戶的操作是流暢的。以下是我關(guān)于移動(dòng)端常用的點(diǎn)擊區(qū)域的尺寸規(guī)范,大家應(yīng)該牢記:


·蘋(píng)果規(guī)范:適用于 iOS 的 44 x 44PT。

·谷歌規(guī)范:48 x 48dp 適用于 Android。





三、直接一點(diǎn)沒(méi)什么不好



3.1  直接告知用戶下一步將發(fā)生什么

我們?cè)谠O(shè)計(jì)某些不可逆轉(zhuǎn)后果的操作的場(chǎng)景,例如永久地刪除某些數(shù)據(jù)內(nèi)容前,應(yīng)該明確告知用戶您目前進(jìn)行的操作的后果是什么,甚至用紅色的按鈕做設(shè)計(jì)都不為過(guò)。


這樣設(shè)計(jì)的目的,就是直接告知用戶下一步將要發(fā)生什么,尤其是工具類(lèi)或者表格場(chǎng)景填寫(xiě)信息的場(chǎng)景,如果不明確告知用戶后果,用戶失望的心態(tài)將無(wú)法彌補(bǔ),畢竟誰(shuí)都不愿意把工作重新再做一遍。




3.2  加載狀態(tài)展示當(dāng)前狀態(tài)

盡管我們的產(chǎn)品的硬件配置一直在更新,但并不能保證在處理大量數(shù)據(jù)時(shí)不會(huì)出現(xiàn)卡頓現(xiàn)象,所以說(shuō)系統(tǒng)狀態(tài)可見(jiàn)性是做UI設(shè)計(jì)不可忽視的一項(xiàng)原則。


一般情況下,在系統(tǒng)響應(yīng)時(shí)間不超過(guò)1秒的情況下,通常正常反饋即可。在響應(yīng)時(shí)間大于1秒的情況下,會(huì)采取加載的方式來(lái)緩解用戶的焦慮;如果在10秒鐘內(nèi)沒(méi)有回應(yīng),則會(huì)被視為該請(qǐng)求失敗,需要給用戶失敗提示以及解決方法。比如:加載失敗的提示、請(qǐng)重試刷新頁(yè)面的按鈕。


不要讓用戶去猜測(cè)目前產(chǎn)品的狀態(tài),而是應(yīng)當(dāng)快速地傳達(dá)給用戶產(chǎn)品目前當(dāng)前的狀態(tài),這種狀態(tài)不僅僅只是異常狀態(tài),還應(yīng)該包括加載的狀態(tài),只有這樣做用戶才不會(huì)因?yàn)椴恢喇a(chǎn)品當(dāng)前狀態(tài),而退出產(chǎn)品。





四、盤(pán)點(diǎn)哪些好的體驗(yàn)點(diǎn)

人體內(nèi)共有206塊骨頭,產(chǎn)品的最高境界就是把產(chǎn)品做成用戶的第207塊骨頭,與用戶的生活息息相關(guān),而給產(chǎn)品添加人性化功能,是很重要的一部分。


我梳理出一些屬于通用性的產(chǎn)品體驗(yàn)點(diǎn),你可以試著,按著下面的角度給產(chǎn)品經(jīng)理提一些,提高產(chǎn)品體驗(yàn)點(diǎn)的建議。



4.1  保護(hù)隱私

每個(gè)人都不希望看到自己的隱私泄露,當(dāng)涉及用戶信息安全、人身隱私,我們應(yīng)當(dāng)建立起一種「為用戶安全著想」的想法去設(shè)計(jì)。比如,菜鳥(niǎo)裹裹上線“線上隱私寄件”的信息保護(hù)功能,在發(fā)貨界面開(kāi)啟「隱私寄件」后,用戶的信息將會(huì)在包裹面單上進(jìn)行脫敏處理,只展示部分地址信息,這很好解決了用戶對(duì)隱私安全的顧慮。


再比如美團(tuán)評(píng)價(jià)商家的食品界面場(chǎng)景,當(dāng)用戶選擇 1 星或者2 星的低評(píng)價(jià)時(shí),產(chǎn)品會(huì)自動(dòng)勾選「匿名評(píng)價(jià)」,為的是對(duì)輸入差評(píng)的用戶給予隱私保護(hù),免招商家的騷擾。



4.2  人性化提醒

雖然我們希望用戶都有沉浸式的體驗(yàn),從產(chǎn)品營(yíng)收角度講用戶在產(chǎn)品上花費(fèi)的時(shí)間越長(zhǎng),用戶付費(fèi)的可能性會(huì)增加,但是對(duì)于連續(xù)使用 N 分鐘、或者滿足特定時(shí)長(zhǎng)的用戶,可對(duì)這類(lèi)用戶進(jìn)行休息提示,用戶會(huì)感受到關(guān)懷感,以我親身體驗(yàn)的兩款產(chǎn)品為例子,講一講我的真實(shí)感受。


抖音:當(dāng)我刷短視頻的時(shí)間較長(zhǎng)時(shí)間后,抖音就會(huì)提醒我需要休息了,這種友好的提醒會(huì)讓我覺(jué)得我使用抖音(產(chǎn)品)并不會(huì)威脅到我的健康,這種體驗(yàn)很人性化。

bilibi:我平常在地鐵里面因?yàn)榄h(huán)境噪音會(huì)很大,我習(xí)慣性地把耳機(jī)的音量變高,此時(shí),bilibi就會(huì)提醒我這個(gè)音量有損我的聽(tīng)力,我會(huì)潛意識(shí)地調(diào)到不那么大并且可以聽(tīng)清楚的程度,這樣不僅可以保護(hù)好耳朵,又可以愉快地刷劇,體感很好。



4.3  所見(jiàn)即所得

大部分用戶都不喜歡計(jì)算或者投入很多腦力活動(dòng),更希望的是產(chǎn)品整體的操作流程是簡(jiǎn)單、高效的,并且在簡(jiǎn)單、高效地體驗(yàn)同時(shí),還能保證產(chǎn)品的準(zhǔn)確性,尤其是數(shù)字類(lèi)場(chǎng)景,不會(huì)因?yàn)樽约旱睦斫忮e(cuò)誤,帶來(lái)意外的財(cái)產(chǎn)損失,我最近體驗(yàn)微信和支付寶就發(fā)現(xiàn)了下面兩個(gè)功能點(diǎn)的差別。


微信:當(dāng)在微信轉(zhuǎn)賬的場(chǎng)景中,如果輸入要打款的金額,在數(shù)字下面就會(huì)生成對(duì)應(yīng)的中文金額,減去了用戶邊輸入邊計(jì)算“這是多少錢(qián)”的腦力投入,很直接。

支付寶:支付寶在轉(zhuǎn)賬場(chǎng)景上更勝微信一籌,不僅下面同樣生成中文的金額,還有標(biāo)簽可直接備注這筆金額用于什么地方。



4.4  價(jià)格的對(duì)比

性價(jià)比是用戶衡量「付出成本與回報(bào)價(jià)值」之間的一種決策依據(jù)。沒(méi)有誰(shuí)會(huì)喜歡做付出多回報(bào)小的事情,為了讓用戶覺(jué)得自己回到很多,除了提升產(chǎn)品自我服務(wù)、實(shí)力信息的展示之外,選擇一個(gè)「參照物」來(lái)凸顯性價(jià)比,算是最好的一個(gè)設(shè)計(jì)方案了。


高德打車(chē):高德地圖的打車(chē)功能就很適合我這種對(duì)價(jià)格比較挑剔的人,他能為我展示打車(chē)場(chǎng)景下,所有車(chē)型的預(yù)估價(jià)格預(yù)覽,幫助我選擇所需價(jià)格的車(chē)型。

美團(tuán)外賣(mài):美團(tuán)外賣(mài)的減免神器,雖然我不知道他是否真實(shí)減免,但是幫助我這類(lèi)不精于算術(shù)的人,節(jié)省開(kāi)支的一個(gè)好功能。


正所謂細(xì)節(jié)決定成敗,在UI設(shè)計(jì)的工作中,往往細(xì)節(jié)的偏差只有0和無(wú)數(shù)個(gè),以上就是我針對(duì)交互層面可以提升用戶體驗(yàn)的細(xì)節(jié)點(diǎn),希望對(duì)你能有所幫助。








如何從視覺(jué)層面提高用戶體驗(yàn),我總結(jié)了14點(diǎn),可以幫助在工作中一稿通過(guò)。



一、排版是基礎(chǔ)能力

排版是信息媒介和接收者之間溝通的橋梁,也是設(shè)計(jì)師最為基礎(chǔ)的能力,可以簡(jiǎn)單地把他理解成是一種對(duì)信息進(jìn)行有序的排列方式。



1.1  模塊間距3種表現(xiàn)方式

做界面最常用的工具就是縱向網(wǎng)格系統(tǒng),所以做UI中一定要有模塊的概念,模塊也會(huì)被稱(chēng)為“容器”,是承載文字,圖標(biāo)、顏色等元素的一個(gè)載體。模塊與模塊之間的間距通常會(huì)用線、面、留白三種切割方式來(lái)表示。



1.2  留白是很好的表現(xiàn)手法

在設(shè)計(jì)過(guò)程中,我很喜歡使用“留白”這個(gè)表現(xiàn)手法,我們?cè)谠O(shè)計(jì)界面時(shí)候沒(méi)必要把所有的屏幕空間都填滿,在我看來(lái)“留白”是像圖標(biāo)、顏色、圖片一樣重要的設(shè)計(jì)元素,它可以讓整個(gè)設(shè)計(jì)都具有呼吸感。如下面這個(gè)設(shè)計(jì)案例,你有沒(méi)有覺(jué)得右邊的界面更有呼吸感。


在我眼里蘋(píng)果不僅僅是一家科技公司,更是一家很好的設(shè)計(jì)公司,不僅每年的產(chǎn)品營(yíng)銷(xiāo)案例做得好,產(chǎn)品的設(shè)計(jì)表現(xiàn)能力也是數(shù)一數(shù)二的,像蘋(píng)果的官網(wǎng)就經(jīng)常用“留白”的設(shè)計(jì)手法,如下面兩幅網(wǎng)頁(yè)設(shè)計(jì)作品,是不是覺(jué)得還是右邊的效果圖看起來(lái)更加大氣,效果更好呢?



1.3  對(duì)比&信息整理

做UI設(shè)計(jì)的,最重要的任務(wù)就是想把重要的元素突出頁(yè)面上、把信息清晰高效地傳遞給用戶。要做到這點(diǎn)其實(shí)并不難,我就聊一聊我最常用的兩個(gè)設(shè)計(jì)手法——對(duì)比和信息整理。


什么叫對(duì)比,簡(jiǎn)單來(lái)說(shuō)就是不一樣,我們通過(guò)顏色、字體粗細(xì)、空間關(guān)系、形狀等元素把重要的信息凸顯出來(lái),如下圖,僅僅是調(diào)整了字體顏色和空間關(guān)系就會(huì)覺(jué)得右邊的信息更高效。


那什么叫信息整理?這里就要講到四大排版原則中的“親密性”原則了,親密性原則就是將相關(guān)項(xiàng)的信息組織在一起,在一個(gè)頁(yè)面上,通過(guò)位置接近,表示兩者之間存在著關(guān)聯(lián)。


我們對(duì)信息的整理一般會(huì)分為3個(gè)步驟,即“理解、提取、設(shè)計(jì)”。

理解:屬于自己的思考階段,思考一下文案的信息各自都代表什么意思,信息之間是否存在關(guān)聯(lián)性。

提?。?/strong>這一步,要思考哪些信息是最重要的,哪些信息是次要的,并把信息按照重要程度進(jìn)行排序。

設(shè)計(jì):在這一步里,就要用到“親密性”原則了,通過(guò)對(duì)信息的重新整理、排序把信息重新設(shè)計(jì)出來(lái)。如果有必要的話,也可以酌情減少一些多余的信息。





二、文本的間距設(shè)計(jì)規(guī)律

在UI界面中,字號(hào)的大小決定了信息的層次和權(quán)重。層次分明的不同字號(hào)大小的排列,會(huì)讓整體的設(shè)計(jì)變得更加清晰有序。



2.1  垂直&有節(jié)奏的間距

在大段落的文章列表場(chǎng)景,對(duì)齊肯定不用講,大家都知道兩邊要留有固定的安全距離,所以文本內(nèi)容肯定是需要垂直對(duì)齊。


關(guān)于節(jié)奏我想聊的是,很多同學(xué)會(huì)認(rèn)為規(guī)范就是固定所以在處理大的段落標(biāo)題、文本中、第二段標(biāo)題、第二段文本之間都會(huì)用了相同的間距,這種做法嚴(yán)格上講并沒(méi)有錯(cuò),只是缺少點(diǎn)節(jié)奏感。我們倒不知,標(biāo)題和文本之間還是采用固定間距,第一段內(nèi)容和第二段內(nèi)容之間采用更為大一些的間距,來(lái)保證段落與段落之間層級(jí)分明,有更好的視覺(jué)層次結(jié)構(gòu)。



2.2 標(biāo)題的行高規(guī)律

標(biāo)題的文案越短小精練、一行展示完畢最好,但是也會(huì)遇到特殊情況需要兩行展示完,如書(shū)名、新聞場(chǎng)景,針對(duì)這種情況就要考慮標(biāo)題的行高問(wèn)題了。


我推薦標(biāo)題的行高是文本字號(hào)的1—1.3倍,你既可以使用文本的默認(rèn)行高去設(shè)計(jì),也可以使用我推薦的規(guī)范去試一試效果,總之,保持規(guī)范一致的前提下以你覺(jué)得合理的規(guī)范去設(shè)計(jì)行高即可。





三、要有品牌元素加入

品牌是一個(gè)很大的課題,如果你想深入地了解,可以看我這篇文章的內(nèi)容《萬(wàn)字拆解為什么你的設(shè)計(jì)沒(méi)有品牌感?》。



3.1  加入一些品牌元素

企業(yè)花了很大的成本建立起來(lái)的企業(yè)形象,提煉出來(lái)的品牌logo,作為設(shè)計(jì)師肯定是不能放過(guò)這些資源的,比如,一些大廠的產(chǎn)品就會(huì)把品牌的logo反復(fù)地出現(xiàn)在產(chǎn)品中,加深用戶印象。


小米有品:用戶登錄后進(jìn)入首頁(yè)場(chǎng)景,左上角會(huì)一直顯示這個(gè)“有品”兩字的logo,這樣的設(shè)計(jì)會(huì)加深用戶印象。

百度瀏覽器:把品牌的logo加入到高頻使用的功能中,如搜索器中,這也是一個(gè)不錯(cuò)的設(shè)計(jì)方案。



之前我們聊過(guò),如果品牌沒(méi)有運(yùn)營(yíng)的支持,那會(huì)給用戶產(chǎn)品沒(méi)有迭代的感覺(jué),所以在每一次活動(dòng)節(jié)日中也可以把特殊的節(jié)日元素放到界面中。


淘寶:在中秋節(jié)活動(dòng),淘寶的聚劃算頻道把icon變形為中秋賞月GIF版,加深用戶的視覺(jué)體驗(yàn),吸引用戶點(diǎn)擊進(jìn)入聚劃算頻道的二級(jí)頁(yè)面。

夸克瀏覽器:在冬奧會(huì)舉辦期間把運(yùn)動(dòng)員的形象和品牌logo結(jié)合,并且在中國(guó)健兒在獲得獎(jiǎng)牌的時(shí)候還會(huì)更新動(dòng)畫(huà)形象。




3.2  有場(chǎng)景就加入IP形象

擬人化的IP形象設(shè)計(jì)無(wú)疑是產(chǎn)品與用戶最有效的溝通工具,很多公司都會(huì)把ip形象放到活動(dòng)運(yùn)營(yíng)中,比如,騰訊組織的99公益日,從2018年設(shè)計(jì)師就在不同公益平臺(tái)把這個(gè)小紅花的形象加入到產(chǎn)品頁(yè)面中。


之后設(shè)計(jì)師巧妙地和集團(tuán)其他產(chǎn)業(yè)線的吉祥物相結(jié)合,輸出不同樣式的設(shè)計(jì)稿,不僅宣傳了99公益日也很好地宣傳了騰訊集團(tuán)的企業(yè)文化。






四、顏色的選擇

顏色是占界面中面積最大的元素,也是用戶體驗(yàn)最為直觀的一個(gè)設(shè)計(jì)元素。



4.1  謹(jǐn)慎使用飽和度高的顏色

雖然高度飽和的顏色,會(huì)讓產(chǎn)品看起來(lái)很好看,但當(dāng)大面積出現(xiàn)很容易讓用戶產(chǎn)生刺眼的感覺(jué),尤其是有大量文案信息的場(chǎng)景,如下圖的紅包場(chǎng)景,你會(huì)發(fā)現(xiàn)右側(cè)較為低的飽和度,文案讀起來(lái)更加舒服。



4.2  加強(qiáng)對(duì)比使文案更清晰

無(wú)論何時(shí),我們都要盡量保持文案的清晰呈現(xiàn),那如何使較淺的文案在較淺的背景(圖片)上展示呢?解決辦法很簡(jiǎn)單,如下圖,我們只需要在文案的下面加一層深色的不透明度圖層即可,或者更改文案的顏色也行,總之一點(diǎn),加強(qiáng)文案與背景的對(duì)比就可以了。



4.3  背景顏色的選擇

在電商產(chǎn)品中,產(chǎn)品展示圖雖然使用白色或者灰色充當(dāng)背景顏色,會(huì)顯示產(chǎn)品很高級(jí),但是如果想把產(chǎn)品展示多一份趣味性的話,不妨試一試選擇一些和產(chǎn)品相近的顏色,調(diào)整其明度、純度應(yīng)用在背景、文本或者是圖標(biāo)上,這會(huì)使整體的界面年輕活潑起來(lái)。



4.4  讓配色展示得高級(jí)點(diǎn)

現(xiàn)在很多電商的圖片都用充滿挑戰(zhàn)的配色去吸引用戶的眼光,我對(duì)此保留個(gè)人觀點(diǎn),我覺(jué)得還是把商品配圖的顏色設(shè)計(jì)得更為和諧、更為高級(jí)一些,能取得用戶的信任度,尤其是醫(yī)療或者藥品類(lèi)的產(chǎn)品。






五、合理地使用陰影

在現(xiàn)實(shí)的生活中一個(gè)物體的出現(xiàn)在空間內(nèi)相應(yīng)地就會(huì)有陰影出現(xiàn),雖然我們做的界面是扁平的,但是現(xiàn)在很流行把立體的效果加入到UI界面中,對(duì)于陰影的使用也有幾點(diǎn)注意。



5.1  彌撒投影的制作

很多人會(huì)選擇直接在圖層樣式上做投影,但是我更喜歡自己制作彌散投影。

比如下圖,在現(xiàn)有的元素下面再添加等大的元素,將元素縮小至70%——80%,底端對(duì)齊,然后向下豎移6——10個(gè)像素。然后再給元素添加高斯模糊效果,模糊半徑控制在6~16之間,營(yíng)造item懸停的效果。



5.2  給投影加點(diǎn)顏色

學(xué)過(guò)畫(huà)畫(huà)的同學(xué)應(yīng)該都知道,我們?cè)诋?huà)色彩景物的時(shí)候老師都會(huì)在投影里面加一點(diǎn)其他顏色,目的就是讓投影也有色彩傾向。很多人會(huì)有疑問(wèn),我觀察了啊,投影顏色是黑色的啊,為什么要加顏色,對(duì)這一點(diǎn)有疑問(wèn)的同學(xué)我建議去看看莫奈的《日出》這幅作品。


在我們真實(shí)的世界里面,如果你在一塊白布上面放一個(gè)紅蘋(píng)果,你盯著投影去看,會(huì)發(fā)現(xiàn)投影里面不單單是黑色,還會(huì)具有環(huán)境色,這就是真實(shí)生活中投影的樣子。我們制作投影效果的時(shí)候也應(yīng)該如此盡量避免使用黑色陰影,還原真實(shí)世界中投影的樣子,比如可以加入一點(diǎn)背景顏色這樣看起來(lái)更加自然。



5.1  陰影的拓展

市面上還有一種效果和陰影很像,叫“毛玻璃擬態(tài)”風(fēng)格,因?yàn)檫@種效果注重空間感,有助于產(chǎn)品與用戶建立界面的層次結(jié)構(gòu)和深度的感覺(jué),像是我們的電視就經(jīng)常會(huì)用這種效果。


后來(lái)又有設(shè)計(jì)師在毛玻璃的基礎(chǔ)上進(jìn)行再設(shè)計(jì),制作出和物理空間中真實(shí)的玻璃一樣的效果,并且很多產(chǎn)品把這種風(fēng)格應(yīng)用到圖標(biāo)上面,增添產(chǎn)品趣味性,緩解用戶視覺(jué)疲勞感。





結(jié)尾

增長(zhǎng)設(shè)計(jì)這個(gè)概念是最近幾年才廣為互聯(lián)網(wǎng)從業(yè)人員才熟知,此篇是體驗(yàn)增長(zhǎng)類(lèi)的文章,對(duì)于運(yùn)營(yíng)增長(zhǎng)這個(gè)課題另外寫(xiě)了《深度解析|流量時(shí)代私域H5營(yíng)銷(xiāo)設(shè)計(jì)的流量密碼》這篇文章,如果你有興趣也可以看一看。


文章很長(zhǎng),感謝您的耐心閱讀~




參考文獻(xiàn)

[1] 《信任力設(shè)計(jì)「縣域場(chǎng)景金融」》https://mp.weixin.qq.com/s/dVsjaOacDvd1Cna02SL5JQ

[2] 《用戶信任產(chǎn)品的三種途徑》http://www.woshipm.com/user-research/2185505.html

[3] 《游戲設(shè)計(jì)中的Fogg行為模型》https://zhuanlan.zhihu.com/p/150274571

[4] 《一朵小紅花講好公益故事》https://mp.weixin.qq.com/s/pMhbfrkt5E_aS74Rnustew

[5] 《77個(gè)ui設(shè)計(jì)小細(xì)節(jié)》  作者:馬克·安德魯

文內(nèi)出現(xiàn)的商標(biāo)及圖像版權(quán)屬于其合法持有人,只供傳遞信息之用,非商務(wù)用途。如無(wú)意侵犯到您的權(quán)益,請(qǐng)及時(shí)聯(lián)系我處理。 


工具網(wǎng)站

文章中出現(xiàn)的動(dòng)效果網(wǎng)址工具如下:

moko: https://moko-app.com

Lottie player:https://lottiefiles.com/plugins/after-effects

Pixelture:https://createwithflow.com

Flow:https://www.pixeltrue.com/free-illustrations


最近是面試季,我準(zhǔn)備了很多面試能用的資料,老規(guī)矩,資料在公眾號(hào),需要的話免費(fèi)拿走,獲取方式:關(guān)注“斜杠7師兄”公眾號(hào),發(fā)送文字“4599”,獲得獲取方式~




我有話說(shuō)

首先,感謝大家長(zhǎng)久以來(lái)的關(guān)注,


時(shí)間很快,此篇是《一招鮮》系列,最后一篇文章,本系列總共分為10個(gè)話題,有人可能會(huì)問(wèn),為什么取名一招鮮呢?不得不承認(rèn),我們?cè)谏鐣?huì)中需求工作機(jī)會(huì)都是具有競(jìng)爭(zhēng)性質(zhì)的,而怎么才能在自己的工作崗位中立于不敗之位呢?


那就是需要自己有一項(xiàng)技能,在團(tuán)隊(duì)中是沒(méi)有人可以替代的,你可以做得界面特別好、字體設(shè)計(jì)特別棒、動(dòng)效設(shè)計(jì)得特別絲滑、運(yùn)營(yíng)圖做得特別絢麗,這是取名《一招鮮》的初衷。
文章來(lái)源:站酷 作者:斜杠7濕兄

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

免責(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.88yangsc.com )是一家專(zhuān)注而深入的界面設(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è)人資料

存檔