首頁

干貨來襲!淘寶設(shè)計師談動效的設(shè)計與交付

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

在手機淘寶中,大至鏈路的銜接,小至一個按鈕的點擊響應(yīng),動效是體驗無處不在的潤滑劑,為用戶每一步的操作提供了合理的預(yù)期與過渡。而通過動效銜接不同界面或不同響應(yīng)狀態(tài),無論對流暢直觀地表達流程意圖,還是精雕細琢讓體驗更絲滑的微動效,動效設(shè)計都是淘寶設(shè)計師日常工作中非常重要的一環(huán)。

動效是體驗鏈路散點間的“領(lǐng)路人”

針對項目不同階段、不同使用需要,針對性地選用的工具,輔以便于理解的交付方式,是設(shè)計和落地環(huán)節(jié)溝通提效的關(guān)鍵。

相比提及動效首先都會想到的巨無霸AE而言,F(xiàn)linto、Principle、Kite、Adobe XD等許多專門為體驗設(shè)計量身打造的輕量級工具,更聚焦在互聯(lián)網(wǎng)產(chǎn)品設(shè)計的高頻功能上,多數(shù)工具都能快速輸出視頻或GIF,以及在移動端上進行實際的交互體驗。

為體驗設(shè)計量身打造的輕量級工具

這些工具在原型和動效快速表達方面獨特的敏捷、的優(yōu)勢,讓它們逐漸成為迭代頻繁的國內(nèi)互聯(lián)網(wǎng)行業(yè)許多設(shè)計團隊的新寵。

上述工具的核心功能都比較接近,各有千秋,差異多在于時間與屬性之間關(guān)聯(lián)的展現(xiàn)形式上,這里不做過多展開,也不做任何孰優(yōu)孰劣的判斷。畢竟工具只是兵器,提起趁手的兵器快刀斬亂麻,才是設(shè)計功力的體現(xiàn)。

本文將結(jié)合手機淘寶的動效設(shè)計實際案例,介紹淘寶設(shè)計師們在項目過程中進行動效設(shè)計、并與開發(fā)溝通的經(jīng)驗。

針對不同階段,選把趁手的兵器

淘寶這樣的大型應(yīng)用中,任意提及一個細分鏈路都頗具復(fù)雜度,每個場景或大或小的版本迭代背后,都是設(shè)計師從交互流程設(shè)計、具體界面的視覺設(shè)計,再到最終交付落地,經(jīng)歷層層評審和修改完善的過程。

產(chǎn)品設(shè)計的2大不同階段

那么在不同階段,選用怎樣的工具更符合我們對“”的追求?下面將按階段拆分問題,分別進行分析:

1、廣義的動效:流程Demo設(shè)計階段

產(chǎn)品流程、交互行為的設(shè)計與串聯(lián),無論是作為可以實際體驗的可交互原型,還是純用作展示,實際上也是一種最基礎(chǔ)的廣義動效。

曾幾何時,交互流程的設(shè)計輸出物是用流程箭頭清晰標注每個控件交互行為的交互稿。

但在淘寶內(nèi)各子產(chǎn)品“小步快跑”的版本迭代極度頻繁,每天提案、評審這類快速碰撞不斷的情況下,即使經(jīng)過了合理的流程拆解、耦合度不是非常高的交互稿,對設(shè)計師而言改動返工量依然巨大。

更何況無論業(yè)務(wù)方還是設(shè)計內(nèi)部評審時,其實沒有人有時間仔細閱讀你精心撰寫的交互說明。

只適合在交付開發(fā)階段采用的靜態(tài)交互文檔

(鞋類測碼功能為例)

因此,這類交互稿如今最大的用途只在交付開發(fā)的環(huán)節(jié)。在快速碰撞方案的階段,通過輕量級的動效工具迅速產(chǎn)出可交互原型是目前團隊內(nèi)更同行的做法。在評審中直接演示,可以幫助團隊成員更好地對方案實際效果有一個更直觀的體驗。

在流程設(shè)計階段,F(xiàn)linto是一個非常好用的工具。同為體驗設(shè)計專屬的輕量級設(shè)計軟件,F(xiàn)linto和Principle有很多共通之處,也經(jīng)常被一起比較,但底層思路都是通過定義元素的各項屬性變化來實現(xiàn)過渡。不過,兩者在定義方式上卻有比較大的不同,簡單概括來說,F(xiàn)linto是通過元素的附加事件,而Principle則是通過不同畫板間的屬性差。

Flinto更擅長流程級表達

這點上的不同,決定了Flinto優(yōu)勢在于流程級表達,而Principle更擅長界面級(或很短的流程級)交互細節(jié)表達。

以分享寶貝、邀請好友出主意的“幫我選”功能中的新建清單流程為例:

「幫我選」新建清單流程Demo

流程對應(yīng)的Flinto實現(xiàn)方式如下:

「幫我選」新建清單流程對應(yīng)的Flinto工程文件

產(chǎn)出流程Demo時,只需要表達基本的頁面結(jié)構(gòu)與跳轉(zhuǎn)關(guān)系即可。轉(zhuǎn)場無需表達得很準確,以不引起誤解為原則即可,時間有限的情況下,最簡單的處理方式就是統(tǒng)一用漸隱漸現(xiàn)。

各種與頁面滾動位置有關(guān)的動效也暫時不用表達,例如下滑時頂欄的狀態(tài)過渡。同樣,也完全沒有必要讓每個元素都可點擊,這些交互細節(jié)以及分支用例,都更建議在交付開發(fā)階段通過交互說明表達,寥寥數(shù)語可能就足夠準確傳達了。

與頁面滾動位置聯(lián)動的動效,可以在界面級設(shè)計中細化

2、微交互動效:界面級設(shè)計階段

當(dāng)產(chǎn)品流程確定后,進入界面級設(shè)計階段,就輪到對局部微動效逐一進行細化。

對不涉及位置聯(lián)動的交互動效而言,在Flinto和Principle中的制作成本相差無幾。例如純粹由點擊觸發(fā)的事件:

不涉及位置聯(lián)動的動效

但對于涉及位置聯(lián)動的動效,Principle就比Flinto的表現(xiàn)優(yōu)秀很多了。

Principle更擅長界面級動效表達

Principle中,時間軸和位置聯(lián)動的設(shè)置比Flinto自由度更高,可以快速進行精細的設(shè)計和調(diào)整。例如在頁面上滑過程中,導(dǎo)航欄跟隨手指上滑動作而上移隱藏的動效:

導(dǎo)航欄隨手指上滑動作而上移隱藏

下面是一些來自淘寶近年已上線項目有趣的動效示例:

案例一:手機淘寶導(dǎo)購產(chǎn)品“有好貨”的商品列表中,會穿插視頻及知識內(nèi)容,在這些特殊內(nèi)容滑動到用戶視線中時會動態(tài)擴展,將內(nèi)容自身特點完全呈現(xiàn)。注意,這些動效只能應(yīng)用在特殊內(nèi)容數(shù)量少、質(zhì)量高的場景,否則會過于干擾。

視頻形態(tài)擴展動效

知識形態(tài)擴展動效

案例二:用戶在手淘中關(guān)注某個頻道后,手淘首頁會提供進入該頻道的快捷入口,這個邏輯通過文案很難清晰的表達,因而采用了直觀的動效呈現(xiàn)。

關(guān)注頻道后的提示

實際項目中的動效產(chǎn)出方法

上文分別介紹了流程級和界面級動效的設(shè)計建議,那么在實際項目設(shè)計中,我們需要有什么樣的產(chǎn)出呢?

依據(jù)設(shè)計稿所起的作用,大致分為3種:

3個階段的不同產(chǎn)出物

1、用于實操的demo:根據(jù)自己所希望表達的側(cè)重點(流程還是細節(jié)?)選用一種工具完成全部設(shè)計;

2、用于演示的視頻:可以同時使用兩種工具完成不同部分的設(shè)計,分別錄制視頻再合并;

3、用于開發(fā)的方案:對需要動態(tài)呈現(xiàn)的部分單獨提供動效設(shè)計稿及說明等產(chǎn)出物,然后再將所有設(shè)計以Keynote等載體整合起來。

手淘在動效設(shè)計過程中,也摸索出了一套便于與開發(fā)同學(xué)溝通、最優(yōu)最快實現(xiàn)設(shè)計效果的設(shè)計產(chǎn)出方法。產(chǎn)出物包括2部分:

1、效果演示demo和視頻:使開發(fā)同學(xué)快速了解設(shè)計效果;以寶貝詳情主圖的擴容與評價聯(lián)動氣泡為例:

效果演示和視頻

2、動效參數(shù)文檔:將自己在設(shè)計動效時所設(shè)置的全部參數(shù),翻譯為開發(fā)可以輕松讀懂的圖形表達方式。對于比較復(fù)雜的動效,雖在撰寫文檔時會多花一些功夫,但能夠讓開發(fā)一次性還原出理想的設(shè)計效果,免去后期反復(fù)溝通修改的麻煩。

下面以手機淘寶首頁的2018年雙11主會場入口為例,說明動效設(shè)計的輸出方式。

我們選用Principle制作了所有動效,整體效果如下:

手機淘寶首頁的2018年雙11主會場入口

可以看出,動效包含以下幾個部分:

1、主會場入口背景圖旋轉(zhuǎn)

2、主會場商品圖及按鈕出現(xiàn)

3、“立即搶購”按鈕文案切換

我們要分別輸出以上3部分的視頻示意以及具體的動效參數(shù)。以其中相對復(fù)雜的第2部分“主會場商品圖的出現(xiàn)和切換”為例,提供給開發(fā)的視頻如下。注意在這個案例中,因為開發(fā)是針對圖形元素的容器來編寫動效,所以我們需要將圖形抽象為容器。

經(jīng)抽象為圖形元素容器的交付版本

同時需要提供給開發(fā)的是動效參數(shù)。下圖是我們使用的參數(shù)圖形化表達方式,縱向為各個元素,橫向為動效時間軸。

動效參數(shù)產(chǎn)出物

實際上,各位同學(xué)也可以根據(jù)自己的實際情況來繪制,原則是清晰明確即可。

結(jié)語

從合理的工具選型,到嚴謹清晰的文檔交付,技法層面的干貨就寫到這里。文章的最后,筆者想談的是互聯(lián)網(wǎng)產(chǎn)品中動效初心。

動效并非炫技的手段,而是實實在在用于銜接用戶在各個體驗散點之間的潤滑劑,符合用戶心理預(yù)期、不打擾用戶,甚至讓用戶幾乎無所察覺的動效,才是真正優(yōu)秀的動效。

許多創(chuàng)意網(wǎng)站上初見確實驚艷的動效,如果在用戶實際使用中過度使用,輕則有拖沓之感,重則引起焦躁。這一原則對于旨在讓用戶“買買買”更的淘寶而言,尤為重要。

動效技法只是基本功,在“不打擾”中體現(xiàn)同理心和精巧的構(gòu)思,是動效設(shè)計更重要的導(dǎo)向。重劍無鋒,大巧不工,與所有Motion designers共勉。

 

藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

UX七大黃金定律在UI中的運用

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

好的UI設(shè)計師應(yīng)該是理論結(jié)合實踐,好的理論是指導(dǎo)實踐,所以今天我?guī)砹诉@一篇文章。講講什么是黃金ux七大定律以及它們?nèi)绾卧赨I中的運用。

1、費茲定律

費茲定律(fitts’law) 是心理學(xué)家 paul fitts 所提出的人機界面設(shè)計法則,主頁定義了游標移動到目標之間的距離,目標的大小和所花費的時間之間的關(guān)系。

定律內(nèi)容是從一個起始位置移動到一個最終目標所需的時間由兩個參數(shù)來決定,到目標的距離和目標的大小

用數(shù)學(xué)公式表示為 時間T=a+blog2(D/W+1)

用這張圖來說明,當(dāng)d(起始點到目標之間的距離)越長,使用者所花費的時間越多;而當(dāng)w(目標物平行于運動軌跡的長度)越長,則花費的時間越少,使用的效能也比較好。

我們來看新浪微博的轉(zhuǎn)發(fā)功能,因為隨著功能的復(fù)雜性,轉(zhuǎn)發(fā)功能包含了下一層級三個子功能,分別為快轉(zhuǎn),轉(zhuǎn)發(fā),分享。這個轉(zhuǎn)發(fā)icon一觸發(fā),在很近的距離,3個點擊目標也設(shè)計的很大這樣容易很快的操作,利用費茲定律,提升了用戶的效能。

2、席克定律

當(dāng)你走近一家餐廳,你看著琳瑯滿目的菜品是不是無從下手。在生活日常中你會對各種各樣的選擇而困擾,其實有時候不是你的問題,而是對方給予你的選擇太多。

Hick’s Law (席克定律)中說道:“一個人面臨的選擇(n)越多,所花費做出決定的時間(T)就越長。

用數(shù)學(xué)公式表達為 RT=a+b log2(N)

  • RT:反應(yīng)所需時間
  • a:與做決定無關(guān)的花費時間(閱讀,操縱花費的時間)
  • b:根據(jù)對選項認識的處理時間
  • n:具有可能性的相似答案總數(shù)

劃重點

當(dāng)選擇增加時,我們做決定的時間就會相應(yīng)增加

如果在你的服務(wù),產(chǎn)品中“時間就是關(guān)鍵”,應(yīng)該將做決定的選項減少到最少,以減少所需反應(yīng)的時間,降低犯錯的概率。也可以對選項進行同類分類和多層次分布,提高用戶的使用效果。

3、奧卡姆剃刀原則

奧卡姆剃刀原則也被稱為:“簡單有效原理“,由14世紀哲學(xué)家,圣方濟修士奧卡姆.威廉(William ofOccam)提出。這個原理告誡人們“不要浪費較多東西去做用較少東西也可以做好的事情?!惫P者認為和后來包豪斯密斯.凡德羅提出的:“少就是多”有異曲同工之妙。

一個簡潔的網(wǎng)站能讓用戶快速找到他們所找到的東西,當(dāng)你在銷售產(chǎn)品時候尤為關(guān)鍵。如果你的網(wǎng)站充斥著很多無關(guān)緊要的東西。比如小彈窗,無用鏈接。用戶會因為不能快速找到自己想要的東西而關(guān)閉網(wǎng)站。

合理的使用奧卡姆剃刀原則,能更好的傳達你想要表達的內(nèi)容,更容易吸引廣告投放者,給訪客帶來更好的用戶體驗。

4、泰思勒定律

泰思勒定律又被稱為:“復(fù)雜不滅定律”

中心思想是:“每一個程序都有必然有其與生俱來,無法縮減的復(fù)雜度,唯一的問題,就是誰來處理它。”

泰思勒定律定律認為每個過程都有其固有的復(fù)雜性,存在一個臨界點,超過這個點過程就不能再簡化了,你只能將固有的復(fù)雜性從一個地方移動到另外一個地方。

從手機的演變過程來看,智能手機簡化了物理操作按鍵,通過技術(shù)手段降低了手機操作的復(fù)雜度,尤其是復(fù)雜的交互手勢操作,雜度的降低是通過大量的技術(shù)和資金投入解決,體現(xiàn)了復(fù)雜守恒定律。

5、神奇數(shù)字7±法則

1956年喬治米勒對短時間記憶能力進行了定量研究,他發(fā)現(xiàn)人類大腦最好的狀態(tài)能記憶含有7(±2)項信息塊,在記憶里5-9項信息后人的大腦后開始出錯。

6、防錯法則

防錯原則是通過設(shè)計來將過失降低到最小化。該原則及時地告訴用戶哪里操作錯了。比如在填寫表單時,系統(tǒng)給出及時地報錯提示;重要、謹慎的操作,系統(tǒng)通常會有二次確認;為用戶提供撤銷的機會;為用戶提供糾錯的機會

7、接近法則

接近法則是格式塔理論中我們最熟悉的,也最常運用的一項法則。當(dāng)對象離的太近時候,意識會覺得它們是相關(guān)的

我們來看看利用接近法則在移動端的案例,相同的模塊這兩款app都用空間間隙來做出了區(qū)分,讓人在移動的場景更能快速的尋找想要的信息。

總結(jié)

在UI設(shè)計中,不僅僅是為了美觀的界面,更要有有理有據(jù),在設(shè)計時應(yīng)該學(xué)會運用這些法則,不僅可以讓你的界面更專業(yè),同時也更有說服力。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

通知類界面整理詳情

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

 

微信圖片_20190411093404.jpg微信圖片_20190411093409.jpg微信圖片_20190411093412.jpg微信圖片_20190411093415.jpg微信圖片_20190411093419.jpg微信圖片_20190411093422.jpg微信圖片_20190411093426.jpg微信圖片_20190411093501.jpg微信圖片_20190411093458.jpg微信圖片_20190411093454.jpg微信圖片_20190411093441.jpg微信圖片_20190411093436.jpg微信圖片_20190411093433.jpg微信圖片_20190411093430.jpg微信圖片_20190411093511.jpg微信圖片_20190411093517.jpg微信圖片_20190411093520.jpg微信圖片_20190411093523.jpg微信圖片_20190411093529.jpg微信圖片_20190411093533.jpg微信圖片_20190411093537.jpg微信圖片_20190411093602.jpg微信圖片_20190411093558.jpg微信圖片_20190411093556.jpg微信圖片_20190411093552.jpg微信圖片_20190411093549.jpg微信圖片_20190411093546.jpg微信圖片_20190411093541.jpg微信圖片_20190411093605.jpg微信圖片_20190411093609.jpg微信圖片_20190411093613.jpg微信圖片_20190411093616.jpg微信圖片_20190411093622.jpg微信圖片_20190411093630.jpg微信圖片_20190411093635.jpg微信圖片_20190411093641.jpg微信圖片_20190411093638.jpg

 

 


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

驚艷到爆的字體設(shè)計,美不勝收!

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

微信圖片_20190411093752.jpg微信圖片_20190411093807.jpg微信圖片_20190411093810.jpg微信圖片_20190411093813.jpg微信圖片_20190411093816.jpg微信圖片_20190411093819.jpg微信圖片_20190411093822.jpg微信圖片_20190411093825.jpg微信圖片_20190411093829.jpg微信圖片_20190411093832.jpg微信圖片_20190411093835.jpg微信圖片_20190411093839.jpg微信圖片_20190411093842.jpg微信圖片_20190411093845.jpg微信圖片_20190411093850.jpg微信圖片_20190411093853.jpg微信圖片_20190411093908.jpg微信圖片_20190411093911.jpg微信圖片_20190411093928.jpg微信圖片_20190411093937.jpg微信圖片_20190411093941.jpg微信圖片_20190411093946.jpg微信圖片_20190411093949.jpg微信圖片_20190411093953.jpg微信圖片_20190411093956.jpg微信圖片_20190411094001.jpg微信圖片_20190411094004.jpg微信圖片_20190411094007.jpg微信圖片_20190411094014.jpg微信圖片_20190411094017.jpg微信圖片_20190411094019.jpg微信圖片_20190411094026.jpg微信圖片_20190411094028.jpg微信圖片_20190411094030.jpg微信圖片_20190411094033.jpg微信圖片_20190411094035.jpg微信圖片_20190411094042.jpg

藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

130+精彩電影節(jié)海報,設(shè)計感和創(chuàng)意都不缺

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

海報是電影的門面,好的海報作品不僅可以完美傳達電影本身的美學(xué)與內(nèi)涵,而且也能散發(fā)超越電影作品的附加韻味,創(chuàng)造獨特的藝術(shù)價值與設(shè)計美感。

近日第九屆北京國際電影節(jié)公布官方海報,因其“詼諧粗糙”的設(shè)計引發(fā)了影迷的熱烈討論,目前全球已有成百上千個電影節(jié)每年都在進行著各類展映和學(xué)術(shù)活動,大到歐洲三大電影節(jié),小到第三世界的地區(qū)影展,其中設(shè)計感出類拔萃的電影節(jié)海報也不在少數(shù),今天就為大家推薦一些近年的電影節(jié)海報設(shè)計佳作(國內(nèi)影展也多走走心)。

希臘塞薩洛尼基國際電影節(jié)

法國拉羅謝爾電影節(jié)

莫斯科國際電影節(jié)

莫斯科國際實驗電影節(jié)

New British Film Festival

索爾福德電影節(jié),位于英國曼徹斯特地區(qū)

布拉格國際電影節(jié)

Dwa Brzegi – 10th Film and Art Festival

Cult Film Festival

Semibreve festival

Beat Film Festival

Wildlife Film Festival 位于荷蘭鹿特丹

2018年第71屆戛納電影節(jié)官方海報,致敬《狂人皮埃羅》(1965)

第51屆導(dǎo)演雙周單元海報

2019年柏林電影節(jié)官方海報

2018年第75屆威尼斯電影節(jié)

2018年第31屆東京電影節(jié)東京電影節(jié)

2018東京臺灣未來映畫周

日本山形國際紀錄片節(jié)

釜山國際電影節(jié)正式海報

韓國富川奇幻電影節(jié)

Student Indie Film Festival 澳大利亞墨爾本 威廉斯鎮(zhèn)

Open City Documentary Film Festival 位于英國倫敦

Moving Festival — Film Festival 位于西班牙巴塞羅那

臺北電影節(jié)

英國獨立電影節(jié)

A Design Film Festival 位于新加坡

平地學(xué)生電影節(jié),位于香港,平地映社策劃,香港藝發(fā)局資助

澳門國際紀錄片電影節(jié)

香港獨立電影節(jié)

香港國際電影節(jié)

藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

國外畫冊的圖文版式參考

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

國外的版式一直對圖文排版要求很高,即便沒有花哨的元素設(shè)計,也能通過簡單的圖文進行最大限度地編排,重點以展示內(nèi)容為主,使版面更實用。今天小編為大家分享一組圖文排版不錯的國外雜志設(shè)計,也是小編喜歡的設(shè)計風(fēng)格,希望會給你帶來不同的排版靈感。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

設(shè)計師都應(yīng)該了解的Loading動畫知識

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

Loading動畫,在現(xiàn)在的設(shè)計中已經(jīng)是一個必須要考慮的系統(tǒng)元素,它能減緩用戶等待焦慮的心態(tài),也能用來作為品牌透傳,增加曝光。

那關(guān)于loading動畫相關(guān)知識,我覺得對于設(shè)計師來說是有必要去了解的,所以我找到了這篇優(yōu)秀文章,讓大家能夠深入了解loading動畫,透過現(xiàn)象看本質(zhì),學(xué)以致用。

圖片來源:Domaso

沒有人喜歡等待

在用戶心目中,優(yōu)秀的應(yīng)用、工具、網(wǎng)站都應(yīng)該是制作精良且能快速響應(yīng)他們需求的產(chǎn)品。

舉一個真實的例子:最近我們新發(fā)布了一個用戶評價的應(yīng)用,第一個版本并不完美,loading延遲在2-3秒。

你猜怎么著?

很多人認為這3秒是一個故障。在實際開發(fā)中,你可能要面對龜速的網(wǎng)絡(luò),沒有優(yōu)化的代碼,操作時間長或數(shù)據(jù)處理太多等問題。因此,App的運行速度可能沒有用戶預(yù)期中的那么快。雖然早期用戶可能會給你的產(chǎn)品第二次機會,但絕大多數(shù)人會立即退出它。

除非你的產(chǎn)品界面對用戶的行為提供了明確的即時反饋。剛才發(fā)生了什么?是操作錯誤還是在等待服務(wù)器的請求?用戶需要等待多長時間才能正常使用這個工具或網(wǎng)站?用戶為什么要等待呢?

讓我們一起深入了解Loading動畫:

  • loading動畫的歷史由來
  • 優(yōu)秀loading動畫所具備的特征
  • 細節(jié)可以做出精彩
  • 簡單處理還是精心制作
  • 有用的工具和資源

Loading動畫的歷史由來

對于這種類型的反饋,設(shè)計師會使用進度條、loading示意圖、預(yù)loading、或旋轉(zhuǎn)器。它們向用戶解釋什么時間發(fā)生了什么或正在loading的過程,以減少用戶的心理焦慮。

你覺得設(shè)計師是從什么時候開始考慮加上這種反饋的?

我很驚訝的看到關(guān)于Nielsen Norman的一篇文章,提到響應(yīng)時間和loading動畫是在1993年(參考1985年的資料):

如果計算機無法提供快速響應(yīng),則應(yīng)該以百分比的形式向用戶提供持續(xù)反饋。【Myers 1985 論文,“計算機-人機界面百分比進度指標的重要性”】

顯示進度的三個主要優(yōu)點:向用戶保證系統(tǒng)沒有崩潰且正在處理他們的問題;告訴用戶還需要等待多久時間,讓用戶能騰出時間來做其他的事而不只是干等;甚至可以向用戶提供一些可以閱讀和查看的內(nèi)容,減少等待的焦慮。—?Jakob Nielsen, on January 1, 1993

自從Web 1.0以來,幾乎每個網(wǎng)站都有l(wèi)oading狀態(tài),用戶可以注意到當(dāng)頁面內(nèi)容正在loading時,這些Loading動畫活躍的身影。

在2007年的時候,網(wǎng)站的Loading形式大概是下面這張圖上的樣子:

2007年時的Loading

在那個年代,你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator (2009)這樣的工具來做這些 loading動畫。

到了2010年,隨著CSS3的迅猛發(fā)展,出現(xiàn)了很多教程教大家如何做CSS3動畫,也能找到大量的loading 動畫預(yù)設(shè)包。設(shè)計師也可以在Ps cs5中做這種loading動畫,這個在10年前是非常流行的。

在那時,Loading動畫更像是web的專屬問題,因為頁面loading確實是一個問題。在2010年的時候,很多Flash網(wǎng)頁都做了一些很有創(chuàng)意的loading動畫:

30個創(chuàng)意Flash loading案例(https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/)

漸漸地,設(shè)計師們開始不滿足于簡單的進度條和旋轉(zhuǎn)Loading,到2014年-2016年的時候,變得更加關(guān)注這塊的設(shè)計。所以,你能發(fā)現(xiàn)更多關(guān)于loading教程,免費的Loading設(shè)計資源,插件和開源項目。

2016年出現(xiàn)的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)

設(shè)計趨勢和方法已經(jīng)發(fā)生了變化,但向用戶提供有效反饋的原則依然需要遵循。

優(yōu)秀loading動畫所具備的特征

在一個完美的世界里,loading動畫應(yīng)該:

1、盡可能少的顯示給用戶

如果你的工具或網(wǎng)站工作的足夠快,那就是非常完美的?;蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A(yù)期,顯示好看的loading動畫只是一個緩兵之計,等待太久了一樣會惹惱用戶。所以,首先應(yīng)該是解決內(nèi)容的loading問題。

2、給出具體時間

它可以是一條簡單的文本信息,告知大致的等待時間,也可以是可視化的圖形來表示。總共上傳了多少文件?更新需要多少分鐘?已經(jīng)進行到了什么階段?這些體驗上的設(shè)計細節(jié)都可以給用戶預(yù)期并減少焦慮。

宇航員數(shù)據(jù)loadingby Cream M.

3、告訴用戶為什么需要等待

一些應(yīng)用的loading過程,通常讓用戶不大容易理解。一個好的Loading動畫,應(yīng)該要告知用戶等待的原因以及等待的背后軟件正在做什么:

文件獲取動畫 by Vinoth

讓我們說回我的案例,那個反饋工具軟件。當(dāng)我們的等待時間超過1秒時,我們決定給這段等待時間增加一段解釋。動畫說明應(yīng)用目前正在處理截圖資源,這清晰的表明,我們的工具沒有崩潰,它只是正在處理請求:

好的loading動畫

4、讓等待的過程不那么讓人無聊

可以放一個有趣的動畫來吸引人,讓用戶的眼睛始終保持忙碌。

動畫來源:Alex Kunchevsky

5、減少用戶等待時間的心理感知

這與上面提到的一點非常相關(guān),如果你在等待的過程中發(fā)現(xiàn)了一些能夠吸引用戶注意力的東西,那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配,有趣的想法,或者是一個什么特別的東西。

蛋糕loading by Pierre Kleinhouse

6、透傳公司品牌形象

如果用戶在用你的應(yīng)用或者網(wǎng)站時會有一段等待時間,為什么不機智的利用好這段時間呢?我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學(xué)技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中,讓它成為一個非常重要的設(shè)計細節(jié):

BCG的車票應(yīng)用動畫 by Antonin

細節(jié)可以做出精彩

雖然有些人可能會認為Loading只是一個很小的UI細節(jié),但它其實也有許多類型和變化。一般來說,我把loading動畫分為幾類,進度條,無限循環(huán)的loading圖和骨架圖。

進度條

當(dāng)可以明確loading時間時使用,進度條可以通過數(shù)字或視覺化的形式來表現(xiàn)。

有數(shù)字進度的,有時也稱為百分比指示符。他們可以簡單直接,也可以很有創(chuàng)意,需要對你的用戶業(yè)務(wù)表達更有效:

一個app loading頁 by Nguyen Tran

你也可以找到有趣的進度條和循環(huán)動畫結(jié)合的loading圖。

Loading動畫by Dragonlady

進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態(tài)。根據(jù)UI需求的不同,進度條也可以是線性的,沒有百分比的形式。

想想Gmail,它沒有顯示進度百分比,但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創(chuàng)意的例子:

Gamil loading和一個創(chuàng)意loading動畫 by  Allen Zhang

循環(huán)Loading動畫

當(dāng)loading的時間是未知的時候來使用,它可以是默認的旋轉(zhuǎn)圖,也可以是一些創(chuàng)意動畫,顯示應(yīng)用正在做一些事情。

計算loading圖標 by Hoang Nguyen

創(chuàng)意性loading動畫一樣可以與業(yè)務(wù)緊密相關(guān),并幫助支持品牌發(fā)聲。請思考下那些應(yīng)用會使用這種loading動畫?

LittlePin Spinner by Daniel Sofinet

無限循環(huán)動畫要求用戶在上傳或執(zhí)行某些操作時等待,但不要求具體需要多久時間,它們可能會非常簡單或非常有創(chuàng)意。

Loading cat by domaso. So cute!

Infinity by Eszter Balogh. 看起來非常有趣,但是你并不想他們永遠不停下來。

如你所見,如今的loading動畫不僅僅只是一個系統(tǒng)狀態(tài)的UI元素。

骨架動畫

骨架動畫展示了loading頁面的變化過程,你可以把它理解為開始是一些頁面占位圖,逐步加載上一些可見的圖片,文本和其他內(nèi)容。

這個詞最早出現(xiàn)在Luke Wroblewski 的文章中,Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設(shè)計師的支持,并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應(yīng)用。

舉個栗子,如果你使用的是網(wǎng)頁設(shè)計工具Figma,你會在頁面頂部看到一個進度條,同時還在逐步loadingUI:首先你會看到占位符,然后才是可用數(shù)據(jù):

Figma UI

簡單處理還是精心制作

除了這篇文章中所展示的一些優(yōu)秀案例和Dribbble上的設(shè)計概念,在目前大多數(shù)應(yīng)用中,你可能能看到還是一個默認的Loading。

有一段時間,簡單的Loading被大眾所推崇,因為他們對于性能的影響最?。ㄓ绕涫菍τ趙eb)。使用默認的或開源的loading要容易的多,不需要設(shè)計師和開發(fā)花心思來設(shè)計和實現(xiàn)它。

如果你正在開發(fā)MVP或者項目的第一個版本,那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段,即使把loading動畫做的再怎么有創(chuàng)意,也并不會對你的產(chǎn)品有多么大的幫助,如果它不能解決真正的需求。

一些簡單的loading動畫案例

有趣的是,在2016-2019年,我們可以看到非常多精心的loading動畫。注重細節(jié),日益成熟的設(shè)計公司,更好的科技環(huán)境,更方便的設(shè)計工具,這些都使得loading動畫變得更加富有創(chuàng)造性。如果你瀏覽Dribbble,能找到非常多超贊的Loading動畫,所以這也成了展現(xiàn)自己設(shè)計能力的一種方式。

即使在我們只有5人的初創(chuàng)公司里,我們也會考慮更好的用戶體驗,讓我們用戶等待的體驗更愉快。否則,我們做的反饋工具可能會失去用戶,沒有人希望失去用戶。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

Material Design 之響應(yīng)式柵格布局

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

Material Design 響應(yīng)式布局柵格適應(yīng)屏幕尺寸和方向,確保布局的一致性。

列、間距和邊距

Material Design 布局柵格由三個元素組成:列、間距和邊距。

內(nèi)容放置在包含列的屏幕區(qū)域中。

列寬是使用百分比而不是固定值來定義的,以允許內(nèi)容靈活地適應(yīng)任何屏幕大小。網(wǎng)格中顯示的列數(shù)由查看屏幕的斷點范圍(預(yù)定屏幕大小的范圍)確定,無論是移動設(shè)備,平板電腦還是其他尺寸的斷點。

間距

間距是列之間的空間,它們有助于分離內(nèi)容。

間距在每個斷點范圍內(nèi)的值是固定的。為了更好地適應(yīng)屏幕,間距寬度可以在不同的斷點處改變。更寬的間距更適合大屏幕,因為它們在列之間創(chuàng)建了更多的空白。

邊距

邊距是內(nèi)容和屏幕左右邊緣之間的空間。

邊距寬度定義為每個斷點范圍的固定值。為了更好地適應(yīng)屏幕,邊距寬度可以在不同的斷點處改變。更寬的邊距更適合更大的屏幕,因為它們在內(nèi)容的周邊創(chuàng)建了更多的空白。

自定義柵格

可以調(diào)整布局柵格以滿足您的產(chǎn)品和各種設(shè)備尺寸的需求。

自定義間距

可以調(diào)整間距以在布局的列之間創(chuàng)建更多或更少的空間。

自定義柵格

可以調(diào)整頁邊距,以在內(nèi)容和屏幕邊緣之間創(chuàng)建或多或少的空間。頁邊距對每個斷點使用固定值。

正文副本可讀性的理想長度是每行40-60個字符。

間距和邊距

在同一斷點內(nèi),間距和邊距寬度可以彼此不同。

水平柵格

Material Design布局柵格可以被水平滾動的觸摸UI自定義。列、間距和邊距從左到右排列,而不是從上到下排列。屏幕的高度決定水平柵格中的列數(shù)。

在非觸控和web平臺,水平滾動的UI并不常見。

可以定位水平柵格以適應(yīng)不同的高度,從而為頂部的app欄或其他UI區(qū)域留出空間。

斷點

斷點是具有特定布局要求的預(yù)定屏幕大小的范圍。在給定的斷點范圍內(nèi),布局將根據(jù)屏幕大小和方向進行調(diào)整。

Material Design基于以下列結(jié)構(gòu)提供響應(yīng)式布局。使用4列,8列和12列柵格的布局可用于不同的屏幕、設(shè)備和方向。

每個斷點范圍決定每個顯示大小的列數(shù)、建議的邊距和間距。

柵格特點

彈性柵格

彈性柵格使用可縮放和調(diào)整內(nèi)容大小的列。彈性柵格的布局可以使用斷點來確定布局是否需要顯著更改。

固定柵格

固定柵格使用固定大小的列,具有流體邊距,以在每個斷點范圍內(nèi)保持內(nèi)容不變。固定柵格的布局只能在指定的斷點處更改。

UI(用戶界面)區(qū)域

布局由多個UI區(qū)域組成,例如側(cè)面導(dǎo)航,內(nèi)容區(qū)域和應(yīng)用欄。這些區(qū)域可以顯示操作、內(nèi)容或?qū)Ш侥繕恕I區(qū)域應(yīng)跨設(shè)備保持一致,同時適應(yīng)不同屏幕尺寸的不同斷點。

為了提高設(shè)備之間的熟悉度,為桌面設(shè)計的UI元素應(yīng)該以與移動UI一致的方式進行組織。

永久UI區(qū)域

永久UI區(qū)域是可以在響應(yīng)柵格之外顯示的區(qū)域,如導(dǎo)航抽屜。這些地區(qū)不能重疊。

持久UI區(qū)域

持久性UI區(qū)域是可以隨時根據(jù)命令顯示的區(qū)域,或者它們可以保持可見。它們可以打開或關(guān)閉,出現(xiàn)或消失。當(dāng)它們出現(xiàn)時,它們會壓縮內(nèi)容和柵格。

當(dāng)持久性UI區(qū)域可見時,其可見性不受與屏幕上其他元素交互的影響。

臨時UI區(qū)域

臨時UI區(qū)域暫時出現(xiàn),當(dāng)它們出現(xiàn)時,它們不會影響響應(yīng)式柵格。當(dāng)它們可見時,可以通過點擊其區(qū)域中的項目或其區(qū)域外的任何空間來隱藏它們。

當(dāng)UI區(qū)域可見時,其他屏幕元素不是交互式的。

原型

原型是結(jié)構(gòu)化布局,為布局、分層和陰影提供一致的方法。它們是一個起點,旨在在進行修改以滿足產(chǎn)品的特定需求。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

UI設(shè)計師除設(shè)計外所需要具備的能力

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

我們已經(jīng)或多或少看過一些優(yōu)秀作品,也知道了一些設(shè)計方法和技巧,了解到了一些相關(guān)的理論知識,自己也做過一些項目或者是練習(xí),總體來說都掌握了一定的設(shè)計能力;但是設(shè)計師想要擁有更多的資源(指薪資、工作機會等等)或者是想職業(yè)進階,除了一定的設(shè)計能力之外是遠遠不夠的。

設(shè)計師還需要掌握更多的能力,才能讓自己成長提升,并且擁有他人無法取代的價值。我通過自己的經(jīng)歷和整理收集,發(fā)現(xiàn)目前如今不同階段的設(shè)計師對待同一個問題不同的角度以及特征,如下圖所示:

不難發(fā)現(xiàn),當(dāng)大家還是初級設(shè)計師的時候,剛剛接觸設(shè)計行業(yè),我們更多的是去觀察、學(xué)習(xí)、臨摹一些“好看”的作品,熟練地使用設(shè)計軟件和提升設(shè)計技法,最后的是自己做出來的產(chǎn)品是否漂亮美觀,最重要的是客戶/老板是否會買單,而自己無法清晰地定義自己設(shè)計的產(chǎn)品價值,也不能很好表達出自己的想法和觀點。所以產(chǎn)品走向會根據(jù)老板/客戶的水準來定義,輪到自己表達只是支支吾吾,最后只是做為執(zhí)行無休止地改改改。一切由老板/客戶說的算,無法清晰地了解自己產(chǎn)品的定位,缺乏表達觀點的能力,缺乏一定的審美,作為執(zhí)行角色無休止加班成為了初級設(shè)計師最大的痛點。

而經(jīng)過一段時間的學(xué)習(xí)和工作后,逐漸轉(zhuǎn)型成為中級設(shè)計師后,有了一定的設(shè)計技法和軟件使用熟練度,有了一定的審美和視覺表現(xiàn)能力,平臺規(guī)模合作團隊也逐漸變大,基本能滿足老板/客戶/業(yè)務(wù)方提出的需求。開始學(xué)習(xí)一些設(shè)計相關(guān)理論,開始拆解自己或別人產(chǎn)品的交互架構(gòu),更多地開始關(guān)注用戶體驗起來,也會融入品牌元素到自己的產(chǎn)品當(dāng)中,為自己的產(chǎn)品做情感化設(shè)計和制定設(shè)計規(guī)范,會組織一些專業(yè)語言和業(yè)務(wù)溝通以及陳述自己的產(chǎn)品。但是如何從眾多的設(shè)計方案中找到最優(yōu)的方案來解決問題,如何更多地體現(xiàn)產(chǎn)品的價值,產(chǎn)品利益鏈如何形成商業(yè)閉環(huán),如何在團隊/設(shè)計圈體現(xiàn)自己個人的價值,如何提升自己的個人影響力,成為了中級設(shè)計師這階段的痛點。

通過三年五年的沉淀,成為高級設(shè)計師后,形成了自己獨有的一套方法論和設(shè)計思維,能熟練地拆解每款產(chǎn)品和定義產(chǎn)品,視覺表現(xiàn)層已經(jīng)完全能駕馭,能清晰地闡述自己的設(shè)計思路和結(jié)論,產(chǎn)品用戶體驗層也有了一定的經(jīng)驗和方法,在團隊中或者設(shè)計圈有自己一定的個人影響力,更多地會在工作中思考產(chǎn)品帶來的社會價值和商業(yè)價值,會用不同的思維去思考產(chǎn)品的各個維度,找到最優(yōu)的方法解決問題,會把固有的利益鏈轉(zhuǎn)換成商業(yè)閉環(huán),提升用戶轉(zhuǎn)化率等等。而這階段的設(shè)計師的主要痛點就是面臨著團隊管理和溝通,朝著資深設(shè)計師和設(shè)計專家轉(zhuǎn)型,以及如何為平臺帶來的利益價值考核等等問題。

資深設(shè)計師或者設(shè)計專家這里不談,因為這階段所思考的問題大都和設(shè)計無關(guān)了。通過上述不難發(fā)現(xiàn),每個階段的設(shè)計師都有各自的特征和痛點,雖然其中都包含著設(shè)計相關(guān)的能力,但是隨著階段的進階設(shè)計相關(guān)的能力占比逐漸變少,更多的是其他的能力增長,所以設(shè)計師除了設(shè)計以外其他能力的重要程度顯而易見,那么我們來看看除了設(shè)計以外,設(shè)計師應(yīng)該掌握其他什么能力。

思考能力(Thinking)

思考能力作為首要的能力,不僅僅是設(shè)計師,其他職業(yè)一樣需要這個能力,這里所涵蓋的面太廣泛了也說不了,這里主要針對三點來講:核心競爭力、批判思維和分析能力。思考分為兩個層面:自我層面的和業(yè)務(wù)層面的思考;自我層面的思考就是要通過深度剖析自我,發(fā)掘自己處于哪個階段,有什么長處和不足,自己想要什么,需要往怎樣的方向發(fā)展;而業(yè)務(wù)層面的則是要需要思考業(yè)務(wù)產(chǎn)品的結(jié)構(gòu)框架、用戶體驗、商業(yè)價值等等等等,前者更加關(guān)注自身的成長,后者更加關(guān)注業(yè)務(wù)的成長。

· 核心競爭力

核心競爭力就是有與別人不一樣的競爭力,想要做到別人無法替代你的地步,就要有自己個人核心的競爭力。如果你會做一張 Banner,我也會做一張 Banner,你會搞一個頁面,我也會搞一個頁面,那么你這個人就成為了可有可無的螺絲釘,唯一的優(yōu)勢就是年輕能拼能熬,等你熬銹了老了,隨時可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段,我們要深度剖析自己,認清自己的優(yōu)勢劣勢,并采取相應(yīng)的措施。

剖析自己的核心競爭力給大家一個大致思路,從異樣性和共通性入手。自己周圍或多或少有團隊,條件不足的話現(xiàn)在網(wǎng)絡(luò)各大平臺都很發(fā)達,也能融入一些設(shè)計圈子中,和不同的人對比尋找自己的核心競爭力。異樣性是當(dāng)前的優(yōu)勢,找出其中的優(yōu)點,不斷地放大深造,變成你的核心競爭力,而和別人不一樣的缺點找出來摒棄改正;共通性就是和大家一樣的地方,可以看作是偽劣勢,因為諸多共通性中總有你最喜歡最擅長的一個,將它單獨拿出來不斷擴大,逐漸就拉開了差異性,慢慢就轉(zhuǎn)化成你的核心競爭力了,而大家都有的缺點,你把它糾正了,就成為你的核心競爭力了。

來舉一個栗子:小王是一名工作了3年的設(shè)計師,研究生畢業(yè),由于公司的原因平時工作最多接觸的就是一些運營圖 banner,也有過很多品牌 VI 的經(jīng)驗,逐漸自己在視覺表現(xiàn)上有自己一定的見解和想法,也更加感興趣做視覺表現(xiàn)的東西。

那么他的共通性就有:1.工作3年之久;2.研究生畢業(yè);3.視覺表現(xiàn)能力強也更感興趣;4.做過品牌 VI 的經(jīng)驗;5.有自己的見解和想法。

由此推斷出小王的共通性是:1.工作經(jīng)驗豐富;2.視覺表現(xiàn)力強;3.有想法和見解;

異樣性是:1.學(xué)歷優(yōu)勢;2.品牌 VI 相關(guān)經(jīng)驗

那么小王可以保持自己學(xué)歷優(yōu)勢下,可以繼續(xù)深造品牌 VI 相關(guān),逐漸轉(zhuǎn)型成為高學(xué)歷的品牌 VI 設(shè)計師,那么學(xué)歷和很多品牌 VI 的經(jīng)驗就是小王的核心競爭力;也可以通過熱愛去學(xué)習(xí) C4D 動效等軟件繼續(xù)增強自己視覺表現(xiàn)力,配合自己豐富的工作經(jīng)驗逐漸轉(zhuǎn)型成高學(xué)歷的創(chuàng)意藝術(shù)設(shè)計師,然后通過將自己的想法見解通過分享會、文章等模式產(chǎn)出,將這一點升級成個人影響力,那么綜合下來更加優(yōu)秀的視覺表現(xiàn)力、豐富的工作經(jīng)驗和個人影響力也會逐漸變成小王的核心競爭力。

只有通過不同維度深度地剖析自己,找到自己的共通和異樣點,清晰自己的價值定位,然后制定出適合自己成長目標和方案,不斷放大增加自己的核心競爭力,成為不可取代的那個人。

· 批判思維

批判思維是一名設(shè)計師必須具備的思維能力,我們不僅僅要學(xué)會批判別人的作品,還要學(xué)會自我批判。這里不是指無腦的批判(之前遇到過一個實習(xí)生剛進到公司里,就把之前所有人做的東西全部批判了一遍,重點是只說產(chǎn)品好看與否,完全不顧及平臺一致性商業(yè)價值用戶體驗等等,最后只批判卻沒有任何實質(zhì)性的建議,頗有一種指點江山的感覺,然后后面再也沒見到過他了),這里是指在自己通過批判別人或自我的方案,不斷地優(yōu)化糾正,最后產(chǎn)出最優(yōu)質(zhì)的方案,這是批判思維的出發(fā)點。

不同的人有不同的經(jīng)歷,看待問題的維度是多種多樣的,所以一個方案產(chǎn)出后,通過不同的人思考后的結(jié)果是最好的解決方案。這也印證了波克定理:只有在爭辯中,才可能誕生最好的主意和最好的決定。所以當(dāng)設(shè)計師接到產(chǎn)品交互給到的原型圖后,不要上手就做圖,要通過自己經(jīng)驗和想法去看待原型圖,然后提出更加優(yōu)質(zhì)的方案進行討論,如果你的方案更加優(yōu)質(zhì),那么不僅是產(chǎn)品的質(zhì)量得到了優(yōu)化,你個人的經(jīng)驗也得到了沉淀,下次遇到相同的場景就可以拿出來復(fù)用,直到遇到更好的方案。

唯一注意的事項就是注意溝通的方法,這里后文會提到,比你資歷高的人提出的觀點更加具有建設(shè)性,在毫無頭緒沒有創(chuàng)新的情況下就聽比你更有經(jīng)驗的人的;遇到比你資歷低的人提出的觀點也不要嗤之以鼻,抓取其中有用的點,沒準是一個新的思維方向;總之,有數(shù)據(jù)說數(shù)據(jù),沒數(shù)據(jù)舉案例,沒案例講觀點,如果連觀點都沒有的話,照著大佬說的話做就是了。

· 分析能力

分析能力也是設(shè)計師必須掌握的能力之一,無論你是創(chuàng)意藝術(shù)設(shè)計師,還是用戶體驗設(shè)計師,譬如一張 Banner 氛圍傳遞或者文案排版,譬如插畫的配色或者場景搭建,譬如產(chǎn)品的布局結(jié)構(gòu)或者用戶體驗,這些都需要有一定的分析能力。通過拆解改版/競品/參照產(chǎn)品等,明確產(chǎn)品的最終目的、商業(yè)價值等等,有了這些準備后才能對自己的產(chǎn)品進行設(shè)計或者改版。而分析產(chǎn)品可以以用戶體驗五要素的角度來分析,分別是:戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層,具體相關(guān)的文章站酷、PM 社區(qū)、36氪等等都搜的到,這里不再細說;之前在分析產(chǎn)品的時候發(fā)現(xiàn)有些產(chǎn)品強行套用這五個要素進去不適用,因為有些產(chǎn)品的頁面它不存在戰(zhàn)略層或者范圍層的東西,所以我總結(jié)歸納了三個角度來分析產(chǎn)品。

案例就用淘搶購 v4.1 頁面(已上線)來講,三個角度主要是:表現(xiàn)層、用戶體驗層和價值層。表現(xiàn)層主要就是產(chǎn)品頁面的配色、布局結(jié)構(gòu)之類的;用戶體驗層就是產(chǎn)品的心智透出、交互流程之類的;價值層就是產(chǎn)品深度的價值體現(xiàn)了,比如商業(yè)價值、社會價值和用戶留存率之類的;大致可以套用這個公式去思考:為什么這里會用這種表現(xiàn)形式,它想要表達怎樣的效果,它要達到怎樣的最終目的,如果是自己去設(shè)計會怎樣做。舉例:因為淘寶規(guī)范為卡片式設(shè)計,在視覺表現(xiàn)上要統(tǒng)一,所以淘搶購 v4.1 的業(yè)務(wù)目的是統(tǒng)一視覺樣式,并且它需要給用戶產(chǎn)生一種“商品很便宜快去搶購再不搶購就沒了”的心智認知,它的最終目的是引導(dǎo)用戶去商品 Detail 頁面購買商品和提高商品的點擊率,這樣通過協(xié)調(diào)關(guān)系形成平臺、商家和用戶之間的利益鏈商業(yè)閉環(huán)。

想要提升自己的分析能力除了項目和時間的沉淀外,更多的時候需要自己平時的積累,站酷等平臺有很多優(yōu)秀的作品,作者會把自己設(shè)計的分析和思路寫出來,我們可以看看別人的想法是否值得借鑒,然后再去分析一下,最后思考如果是自己的話會怎么去做;其次做設(shè)計的時候帶著同理心去做,把自己當(dāng)作用戶去看待自己的產(chǎn)品,通過不斷的積累提升自己對產(chǎn)品的敏銳度,將一些產(chǎn)品的隱性問題挖掘出來;另外可以多看一些好的設(shè)計分析書,比如《U一點料1、2》、《以匠心 致設(shè)計》等等,將學(xué)到的分析方法代入自己的產(chǎn)品或作品中,逐漸分析能力就增強了。

規(guī)劃能力(Plan)

規(guī)劃能力是日常工作生活中所需要掌握的能力,主要講業(yè)務(wù)規(guī)劃和職業(yè)生涯規(guī)劃,業(yè)務(wù)規(guī)劃能力應(yīng)對的是我們工作中處理業(yè)務(wù)所需要具備的能力,而職業(yè)生涯規(guī)劃應(yīng)對的是我們整個人生職業(yè)生涯規(guī)劃的能力。掌握這個能力后前者會給我們帶來業(yè)務(wù)處理效率上的提升,后者給我們帶來整個人生有益的好處,所以這個能力非常重要。

· 業(yè)務(wù)規(guī)劃

很多時候我們還在有條不紊地處理某個需求,心想著下班去吃個飯買水果回家洗澡睡覺的時候,突然來了一個緊急的需求,就把我們整天的計劃給打亂了,火急火燎地處理完這個需求,然后又把之前的需求做了,最后加班改改改導(dǎo)致整個計劃泡湯了。工作中遇到這樣的情況很多很多,處理方法有很多種,最經(jīng)典的就是四象限法則,把事情的緊急重要程度分為:重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個象限。

很多時候都是道理我們都懂,可是一遇到情況依舊手忙腳亂,根本原因是沒有認真地把它代入自己的工作生活當(dāng)中。畫一個象限表,把自己今天所要處理的事務(wù)陳列出來五分鐘都不需要,一開始可能因為事情不多就沒堅持下去,一旦養(yǎng)成習(xí)慣后,將來遇到多種緊急情況突發(fā)的時候就能認識到這個習(xí)慣給你帶來的好處了,所謂養(yǎng)兵千日,用兵一時就是這個道理。

在做業(yè)務(wù)需求的時候,可能會碰到有些需求價值高,有些需求價值低但又很緊急,不知道怎么處理之間的關(guān)系,我們依舊可以套用四象限法則來制定一個四象限表:價值高且緊急、緊急但價值低、價值高不緊急和價值低不緊急。什么是價值高的需求呢,就是能讓你有充分思考和分析的需求,比如某個頁面的改版;價值低的需求則是相對不怎么需要思考和分析的需求,比如根據(jù)已有的規(guī)范改個顏色之類的。在時間的優(yōu)先級前,價值高的需求大于價值低的,最后剩下的就是價值不高且不緊急的。因為我們無法拒絕需求,需求來了肯定要是做的,工作不是愛好可以有多種選擇性,但我們要學(xué)會將需求分解成不同類型的,對自己有成長沉淀的需求那可以作為最高優(yōu)先級去處理,留夠充裕的時間去思考分析,然后沉淀經(jīng)驗穩(wěn)定提升。

· 職業(yè)生涯規(guī)劃

這個在大學(xué)期間就學(xué)過相關(guān)的課程,只不過當(dāng)時并沒有太深的感觸,而是等工作以后才知道這項能力的重要性,它相當(dāng)于關(guān)系著你每個階段的里程碑,當(dāng)成游戲中的成就任務(wù)也不為過,還是自己設(shè)定的成就任務(wù)。某個階段想要達成什么樣的目標,想要獲得怎樣的成就,都是要自己一步一步慢慢規(guī)劃并且完成出來的。

因為我遇到過幾個非常努力的人,努力到讓人心悸的地步,每天除去吃飯睡覺工作時間就是在努力學(xué)習(xí),到最后還是很迷茫,不知道做什么,不知道如何體現(xiàn)自己的價值。這類沒有目的的努力的人是很可怕的,他們努力得沒有錯,但是這樣下去沒有成效的努力會讓他們覺得努力并沒什么用,然后逐漸開始產(chǎn)生抱怨、泄氣和放棄等負面情緒。

舉個例子來說明:如果你剛畢業(yè),給自己制定的長遠的職業(yè)生涯規(guī)劃是在工作3~5年后進到大廠工作提升自己,那么所拆分下來就需要一些項目工作經(jīng)驗和優(yōu)秀的作品,再拆分下來就是如何做出優(yōu)秀的作品,細分到最后就是作品當(dāng)中的元素,比如圖標排版布局之類的,那么就制定一段時間內(nèi)的練習(xí)就按照各類元素去做,比如圖標畫兩個星期,APP 設(shè)計排版布局練習(xí)兩個星期,插畫練習(xí)畫兩個星期,這樣堅持下來就組成一個完整的項目作品了,以此類推。有了規(guī)劃目標并且在自我驅(qū)動的推動下,逐漸實現(xiàn)自己的職業(yè)目標。

執(zhí)行能力(Execute)

執(zhí)行能力是指自我在工作&學(xué)習(xí)中執(zhí)行的能力,執(zhí)行能力為一個設(shè)計師最主要的核心技能,一切的能力都凌駕于這個基礎(chǔ)之上;哪怕你再能說會道,能賦予你的設(shè)計各種價值,能給予你的設(shè)計各種環(huán)境,但這些都是第二步,第一步就是你的設(shè)計表現(xiàn)達到期望值,如若第一步稿子都不好看,那么沒人愿意會聽你敘述的。前文已經(jīng)提及到了,設(shè)計師在初級至中級階段的時候大多數(shù)注重的就是表現(xiàn)手法,如同學(xué)說話一樣,表現(xiàn)手法可以看作是漢語拼音,然后才是組成一個個字,最后組成一句完整的話語。

· 自我執(zhí)行力

提升自我執(zhí)行的能力我大致分為兩個步驟:看和做。

首先先來說看,看其實是提高自己審美的一個過程,通過看一些平臺網(wǎng)站的優(yōu)秀設(shè)計作品,久而久之自己的審美能力才會提高,然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或?qū)W習(xí)時間,通過瀏覽設(shè)計網(wǎng)站采集學(xué)習(xí)一些你覺得好看的作品;采集是一個很好的習(xí)慣,我覺得是每個設(shè)計師必須養(yǎng)成的習(xí)慣,把自己平時覺得好的表現(xiàn)形式收集起來,等到某一天需要用到的時候,腦海中對當(dāng)前場景會有一定的印象,再根據(jù)印象去尋找采集到的作品,能很大程度上節(jié)省自己腦爆的時間,哪怕沒有采集或者文件丟失,自己的腦中大致也會有一個雛形方向。而帶有目的性地看是指針對某一個模塊去搜集整理,比如今天我需要做一個關(guān)于內(nèi)容的模塊,那么我就會去尋找一些做內(nèi)容的產(chǎn)品設(shè)計,搜集到的各類關(guān)于內(nèi)容的表現(xiàn)手法,然后結(jié)合自己的經(jīng)驗和分析,找出最適合自己產(chǎn)品的一種。

僅僅看是不夠的,在看過之后我們需要動手嘗試才能算真正地沉淀自己所看到、學(xué)到的東西。做設(shè)計最忌諱的就是“眼高手低或者眼低手高”這種狀態(tài),有了審美但表現(xiàn)手法跟不上,或者說表現(xiàn)手法有但是審美跟不上。一定要在自己吸收了一定的審美后,通過自己的嘗試去做出來,才能真正的沉淀到自己的大腦當(dāng)中,變成自己的表現(xiàn)手法之一。最后通過大量的積累,結(jié)合對商業(yè)需求的判斷形成設(shè)計策略,才能從容應(yīng)對不同的產(chǎn)品需求,哪怕你今天做金融相關(guān)的產(chǎn)品,還是明天做電商的產(chǎn)品,后天又改做工具類產(chǎn)品,一旦形成了自己不同的應(yīng)對策略,才能做到真正意義上的游刃有余。

很多時候我們只關(guān)注到魚的大小、魚的肉質(zhì)是否鮮美那20%層面的東西,往往忽視了80%最重要的捕魚技巧和方法;看到的只是產(chǎn)品是否好看,交互是否流暢,體驗是否良好,沒有往更深層次地去想這個產(chǎn)品的商業(yè)背景是什么,設(shè)計師為什么要這樣設(shè)計,如果換做自己的話會去怎么做;畢竟我們所做的一切訓(xùn)練、思考都是為了更好地為工作服務(wù),就如同脫離了商業(yè)背景以后,有些設(shè)計就只是單純的炫技,并沒有解決問題的價值,而設(shè)計師的工作核心就是解決問題,所以我們要結(jié)合作品的背景、價值等因素,去看、去做、去學(xué)相應(yīng)的表現(xiàn)手法才是自我執(zhí)行的核心所在。

表達能力(Express)

表達能力是設(shè)計師除去執(zhí)行能力外第二重要的能力,小到平日里的溝通對接,大到述職晉升面試,都離不開表達能力的支持。有些設(shè)計師經(jīng)常面試怎么都過不了關(guān),我本以為是作品集的問題,可是看完之后作品方面完全沒有什么問題,具體了解后才知道是在面試過程當(dāng)中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導(dǎo)致表達斷斷續(xù)續(xù)不順暢,面試官就會覺得這個人不靠譜然后 PASS,明明做圖很優(yōu)秀卻輸在了表達上,這種情況就很憋屈。在廣告公司中,一個 LOGO 或者廣告視頻往往只是贈品,出售的卻是這個品牌VI的故事;如果一個設(shè)計師不懂得怎么闡述自己的業(yè)務(wù),不懂得怎么推銷自己的方案,不懂得拓寬自己的個人影響力,就單純的只會執(zhí)行作圖的話,那么這名設(shè)計師是不合格的。網(wǎng)傳有一個段子“一個公司的工資排名規(guī)律:用 Word 的不如用 Excel 的,用 Excel 的不如用 PPT 的,用 PPT 的不如講 PPT 的,講 PPT 的不如聽 PPT 的,聽 PPT 的不如聽匯報的,聽匯報的不如決定的,決定的不如簽字的”,由此可見表達能力在職場中的重要性。

· 業(yè)務(wù)表達

業(yè)務(wù)表達是指在自己工作的過程當(dāng)中,對自己的設(shè)計方案進行闡述。大部分設(shè)計師會遇到一個困擾,當(dāng)設(shè)計稿做完以后就不知道怎么去表達自己的設(shè)計理念,被業(yè)務(wù)方/面試官/老板提出質(zhì)疑時,比如:“你這產(chǎn)品的設(shè)計為什么要用紅色?”、“聊天信息這塊兒為什么要用小氣泡的樣式?”,往往不知道怎么去說,有一種當(dāng)時就覺得好看所以這樣做了,也沒有去想那么多的感覺,或者其他優(yōu)秀的作品/競品是這樣做的,我也就這樣做了;那么結(jié)果往往就是自己的專業(yè)性遭到質(zhì)疑,然后轉(zhuǎn)變成業(yè)務(wù)方/老板進行設(shè)計主導(dǎo),形成“改來改去還是第一版好”這樣類似的惡性循環(huán)中。

那么如何提升自己的業(yè)務(wù)表達能力呢?首先設(shè)計師要提升在設(shè)計領(lǐng)域的專業(yè)度,通過學(xué)習(xí)吸納設(shè)計相關(guān)的知識,然后代入自己的設(shè)計當(dāng)中去試著闡述設(shè)計稿,準備工作先做到位,收集相關(guān)的數(shù)據(jù),掌握相對應(yīng)的設(shè)計理論,先說服自己再去說服別人。比如:“通過色彩心理學(xué)得知,紅色能帶給人興奮、激動、熱情等積極情緒,而我們產(chǎn)品所需要透出的氛圍是熱情的、積極向上的,相對應(yīng)地激發(fā)出用戶的正向情緒,所以我這里使用紅色?!薄ⅰ案鶕?jù)近半年數(shù)據(jù)研究得出,產(chǎn)品聊天信息模塊使用過程當(dāng)中女性用戶占總用戶數(shù)的85.9%,而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好,通過 A/B 測試結(jié)果得出,使用小氣泡樣式后數(shù)據(jù)上漲了15%左右,所以聊天信息模塊整體改版成小氣泡的樣式。”

通過自己前期的準備(設(shè)計理論知識補充、用戶調(diào)研、數(shù)據(jù)測試等),將自己的設(shè)計理念表達出來,主導(dǎo)整個設(shè)計的方向,必要時可以理性地堅持自己的設(shè)計方案,畢竟無論是老板還是業(yè)務(wù)方,出發(fā)點都是希望自己的產(chǎn)品能做到最好最完善,只要你給出數(shù)據(jù)支撐和專業(yè)性的建議,他們一定都會采納接受的,而最后你的能力和專業(yè)性也得到了對應(yīng)的認可。

· 書面表達

我本人是強烈建議在能力達到一定程度的時候,通過寫作來檢視自己成果的。因為往往很多東西自己是明白的,但是寫出來讓其他人看懂是另外一種能力了。自己一段時間的職業(yè)經(jīng)驗總結(jié)、對設(shè)計的見解看法、自己獨特的設(shè)計思維、一本書的讀后感等等都可以通過書面表達出來,某個知識理論難的不是學(xué)習(xí),而是將它教授出去,因為只有你想要把某件事說明白,闡述得其他人都能看懂,那么首先你要對這件事理解得很透徹,然后通過自己的經(jīng)驗和見解,轉(zhuǎn)化成通俗的語言說給別人聽。最好的狀態(tài)就是與你同樣級別的人你能與他用專業(yè)術(shù)語對話,級別比你低的人你能把理論轉(zhuǎn)換成他能聽懂的語言進行交流,這樣才算是對理論概念理解透徹到位。

大家也明白,學(xué)習(xí)最有效的方法不是輸入而是輸出,設(shè)計也是一樣的。在學(xué)習(xí)某種理論方法后,通過書面表達出自己的見解和想法,并代入到相應(yīng)的例子當(dāng)中,做到舉一反三才能算是真正的學(xué)到了這個知識點。

· 述職

述職一般出現(xiàn)在晉升報告或者面試當(dāng)中,“諸侯朝于天子曰述職,述職者,述所職也?!笔雎毧梢哉f是工作報告中的總結(jié)性報告。向自己的老板述職是為了升職加薪,向面試官述職是為了獲取更好的工作機會;工作成果有了,但是述職做不好的話,在老板/面試官眼里你就做了無成效的工作,述職沒有想象的那么簡單,但是也沒有那么難,很多人都會經(jīng)歷兩個述職的誤區(qū),這些誤區(qū)我經(jīng)歷過也看到過,所以總結(jié)出來警醒大家。

一、把述職當(dāng)作流水賬

把述職當(dāng)作流水賬是很多新人容易犯的錯誤,當(dāng)述職的時候,有的人就會陳列出自己今年做了多少多少工作:“我今年改版了 XXX 模塊”、“我設(shè)計了 XXX 的首頁”、“我通過調(diào)查研究自主推導(dǎo)改版了 XXX 模塊并落地成功”等等,這時候你的老板/面試官會心里會想:“所以呢?”“然后呢?”,工作結(jié)果固然重要,但是決定你能否晉升/錄用的,不僅僅是把你做的工作進行流水賬般的描述就夠了的。

二、把述職當(dāng)作邀功大會

這個誤區(qū)相對來說更高端一些,述職的時候有的人常常會像邀功一樣:“我今年通過改版了 XXX 模塊,導(dǎo)致用戶量從50%上漲到了80%”、“通過調(diào)查研究改版了 XXX 模塊,最后通過 A/B 測試發(fā)現(xiàn)數(shù)據(jù)上漲了5%,最后落地全部實施新的設(shè)計方案”,這些看似闡述了產(chǎn)品的背景、自己做了什么以及結(jié)果,但是往往來說還是不夠的,以上統(tǒng)統(tǒng)可以歸為無效述職。

你做了什么重要嗎?沒那么重要,重要的是你帶了什么樣的價值。述職所需要你做的,老板/面試官所想要了解的就是:分析為什么產(chǎn)品之前數(shù)據(jù)會那么低?你是通過那些方法得出解決方案的?為什么那么多種解決方案里你要選擇這一種?你這樣的方法能否沉淀成體系?如果換一個人來按照你的方法做是否可以得到同樣的效果?有效述職也就是決定你能向上一步的,是把你在工作中的感性認知上升到理性規(guī)律的歸納總結(jié)的能力體現(xiàn)。

· SCQA 模型

SCQA 模型是一個“結(jié)構(gòu)化表達”工具,是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的,而這個模型可以套用在業(yè)務(wù)表達、書面表達以及述職任何場景當(dāng)中;S是指場景(Situation),C是指沖突(Complication),Q是指問題(Question),A是指解決方案(Answer)。

無論你是在向業(yè)務(wù)方/老板闡述方案做工作匯報,還是自己寫作梳理都可以用到這個模型;S場景陳述的通常是大家都熟悉的事、普遍認同的事、事情發(fā)生的背景。由此切入既不突兀交代了事情背景又容易讓大家產(chǎn)生共鳴,產(chǎn)生代入感,然后引出沖突C。Q是其中發(fā)現(xiàn)的問題,最后A給出相對應(yīng)的解決方案,是對Q的回答也是接下來我們要闡述的內(nèi)容。整個結(jié)構(gòu)其實是形成良好的溝通氛圍,然后帶出沖突和疑問,最后提供可行的解決方案。

我們熟知的廣告詞經(jīng)常使用這個套路:

得了灰指甲——描述場景【S】

一個傳染兩——發(fā)生了沖突【C】

問我怎么辦?——提出問題【Q】

馬上用亮甲!——給出解決方案【A】

這個模型無論作為演講的開場白,作為向業(yè)務(wù)方/老板闡述設(shè)計方案的開場,還是作為一篇文章的序言都是屢試不爽的。S場景需要讓對方產(chǎn)生共鳴,必須讓對方產(chǎn)生一種:“是的,你說的好有道理”的反應(yīng),只有場景被認同了才能繼續(xù)故事的發(fā)展,這時候打破你給對方營造的安全感,制造C沖突,相繼提出Q問題,共同確認面臨的一個問題,然后你給出你的A解決方案,而這個解決方案就是你整個敘述的核心和中心思想。

比如你要向業(yè)務(wù)方/老板闡述你的設(shè)計方案,就可以這樣來描述:“在 XXv2.0 版本上線后(交代場景),收集了近半年以來的數(shù)據(jù)發(fā)現(xiàn),女性用戶相對減少了20%(發(fā)生沖突),為什么會減少20%的女性用戶(提出疑問),根據(jù)我的調(diào)查研究發(fā)現(xiàn)原因是改版后整個產(chǎn)品色調(diào)偏男性化,由于我們產(chǎn)品的受眾群體大多是女性用戶,男女比例為1:3,所以在 v.2.1 的改版中我將整個產(chǎn)品色調(diào)改為偏女性化的方向(給出解決方案)”。

同樣,我寫這個章節(jié)的思路就可以這樣理解:設(shè)計師們工作中通常會面臨述職、面試以及寫文章等情況(交代場景),但是往往很多設(shè)計師不知道如何去表達,思路也不是很清晰,導(dǎo)致述職無效、面試失敗等情況(發(fā)生沖突),要如何避免這種情況發(fā)生?如何鍛煉自己的表達能力?(提出疑問),那就要多通過 SCQA 模型在生活工作中去練習(xí)表達(給出解決方案)。

生活能力(Lives)

最后是生活能力,設(shè)計不是工作的全部,工作不是生活的全部,我們應(yīng)該過好自己的生活,產(chǎn)品設(shè)計都是從生活中獲得靈感和啟發(fā)的,我們?nèi)绾螌Υ约旱纳睿覀兙蜁玫皆鯓拥姆答?。多陪伴下自己的家人、培養(yǎng)一個興趣愛好、保持學(xué)習(xí)新鮮事物的動力等等,成為一個有趣的靈魂。往往設(shè)計師能從多樣化的生活中發(fā)現(xiàn)靈感和啟發(fā),也能從生活中找到不同用戶的痛點和感知;如何做一名好的設(shè)計師,就是帶著同理心去做設(shè)計,如何帶著同理心做設(shè)計,就是將自己當(dāng)作用戶,而用戶是融入到生活中的。下面我就來例舉兩個通過生活中的啟發(fā)改變產(chǎn)品設(shè)計的例子。

· 用戶擁有感

在購買星巴克的時候,為什么服務(wù)員要把顧客的名字寫在杯子上呢?難道僅僅是為了分辨嘛?像其他奶茶店一樣貼一張打印好的便簽不就好了么?去宜家購置家具的時候,為什么要讓顧客自己親手組裝家具?可口可樂為什么可以定制自己城市的易拉罐?因為這一切都是要給用戶塑造擁有感,人是一種很不理性的生物,只要先拿到一個東西,就會覺得自己擁有這個東西,就不想放掉它了,這就是擁有感最根本的示范。從心理學(xué)的角度來說這被稱為稟賦效應(yīng),意思就是我們對于自己所擁有東西的價值往往會看得更重。這就是為什么小時候玩的玩具、收集的畫冊、穿的衣服都已經(jīng)沒什么用了,我們還要留著當(dāng)紀念的原因。因為我們的人性對于擁有感非常執(zhí)著,對于自己得到的東西非常迷戀,當(dāng)我們覺得要失去它的時候,會有一種損失感,覺得很不舍,會覺得心里很難受,這就是稟賦效應(yīng)在我們身上發(fā)生了最明顯的效果。

而這樣的營銷策略被用到產(chǎn)品設(shè)計當(dāng)中,例如前段時間很火的軟件 Zepeto,每個人都不一樣的生成圖片洗刷著我們的朋友圈;例如每年年末的賬單、網(wǎng)易云音樂總結(jié)等等,賬單它只是一份賬單,根據(jù)不同用戶生成不同的賬單,也就賦予了不同的意義;又例如各種 H5 性格測試生成的分享卡等等,這些都是產(chǎn)品設(shè)計中從生活中營銷案例中汲取經(jīng)驗的體現(xiàn)。

· 線下導(dǎo)購轉(zhuǎn)線上

每當(dāng)我們?nèi)サ缴虉鼍€下商店的時候,導(dǎo)購員和我們素未謀面,但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產(chǎn)品,然后向我們推銷對應(yīng)的產(chǎn)品,如若剛好觸動我們的需求,于是我們就會發(fā)生購買這個行為。生活中線下導(dǎo)購的方式也被運用到線上導(dǎo)購的產(chǎn)品中,同樣平臺和用戶素未謀面,可是可以通過掌握大數(shù)據(jù),分析用戶近半年、近一個月的購買和瀏覽商品的數(shù)據(jù),結(jié)合相對應(yīng)季節(jié)等因素推送給用戶所需要的產(chǎn)品。比如我平時經(jīng)常瀏覽一些潮牌個性的衣物,現(xiàn)在正值冬季,想買一件冬季穿的棉衣,那么當(dāng)我打開淘寶的時候,系統(tǒng)會推送一些潮牌大衣等冬季衣物在首頁,我正好有這個需求又符合我的口味愛好,自然而然就會點進去購買了。

有一條創(chuàng)業(yè)準則是這樣說的:“如果有點兒閑錢,還有點時間,但又找不到商機,最好的辦法就是去鬧市、電梯、小區(qū)人流量最高的那個大門口,端杯茶,靜靜的聽人們抱怨。”,谷歌、蘋果公司的設(shè)計思維首當(dāng)其沖的就是帶著同理心去設(shè)計、去制定設(shè)計策略,同理心來源于生活,而這一切只有設(shè)計師把自己的生活經(jīng)營好,才能從當(dāng)中獲得啟發(fā)和感悟,然后代入自己的設(shè)計理念當(dāng)中,設(shè)計出真正能根本解決問題的產(chǎn)品。

其次偶爾會從網(wǎng)上看到或者聽說 XX 設(shè)計師猝死,XX 設(shè)計師檢驗出 XX 疾病等等,每每看到此類消息都會感到痛心,工作不是生活的全部,如果連自己的工作和生活都處理不好的話,那么說明這個人生活能力真的很糟糕。如果一個人整天筋疲力盡打不起精神,那么他的工作會做得好嘛?所以在這請求大家合理安排好工作時間,勞逸結(jié)合,多鍛煉身體,多花些時間陪伴父母、家人,這樣才能帶著健康的身心去工作,從而取得更好的工作成果,形成一個良性的循環(huán)。你怎樣對待生活,生活就會怎樣對待你。

總結(jié)

以上是我總結(jié)的除設(shè)計之外設(shè)計師需要掌握的技能,如果將這些比喻成大樹的話,設(shè)計能力是大樹的根部,是設(shè)計師立足的根本;而執(zhí)行能力則是這根樹的枝干,是支撐設(shè)計師全部的基礎(chǔ);表達能力是樹枝,撐起設(shè)計師的整個世界;思考能力則是樹葉花果,是設(shè)計師綜合的產(chǎn)物;大地就是生活能力,當(dāng)設(shè)計師的產(chǎn)物(物質(zhì)、地位等)“落地”時,滋養(yǎng)著大地,大地越“肥沃”,越能催生出茂盛的枝葉;而規(guī)劃能力就是一位辛勤的園丁,什么時候需要澆水,什么時候需要修剪枝葉,都是由園丁來承擔(dān)。

想要跑贏別人,首先得跑過那個跑得最快的自己。





藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

UI中如何做好產(chǎn)品需求分析

用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔