首頁

APP注冊流程及視覺優(yōu)化

用心設計

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

 

本次分享闡述了我關于理財APP注冊流程的視覺及結構上的改進,分為理論闡述、競品分析、改版實踐三個部分。

主要向大家講解一下當一個UI設計師在做UI設計改版的時候,他在思考什么,他做出這一步設計的原因是什么。同時在大家的討論反饋中,我作為一個UI設計師,也能更好的明白產(chǎn)品看待一個界面設計的角度。

一、關于注冊

一旦用戶體驗時涉及到資金進出,留言互動以及定制個人信息等內(nèi)容,那么就會觸發(fā)注冊或者登錄環(huán)節(jié)。

目前,手機已經(jīng)成了移動互聯(lián)網(wǎng)時代的天然身份證,而且可以實時驗證。這也是互聯(lián)網(wǎng)金融領域基本都采用的注冊方法。

手機注冊都是通過手機短信獲得驗證碼,注冊效率極高。好的注冊頁,就是“簡約而不簡單”,做到體驗流暢又抓住了核心。

二、設計中“5w+1H”原則的實踐

1.WHAT(目標):

石投金融移動端注冊流程+視覺的優(yōu)化

現(xiàn)版本石投金融移動端的注冊截圖

其實光從視覺上,我們的APP其實屬于市面較大眾的類型,沒有追求設計趨勢,但是中規(guī)中矩,在很多網(wǎng)貸APP中都能見到。但是我們應該思考的是,注冊作為吸引新用戶的重要一環(huán),我們能否做的更好?

2.WHY(優(yōu)化原因):

石投金融目標用戶為40歲的中年人,我對此設定其實是不太同意的,使用過程中我注意到其實對于產(chǎn)品的結構流程來說,

3.WHO(目標用戶):

中凈值用戶(年齡結構為30-45歲之間,對互聯(lián)網(wǎng)新事物有開放性心態(tài),對APP的設計水平有一定要求,并且操作流程不可像PC端一樣交互繁瑣死板。產(chǎn)品偏好:安全保障三件套(風險準備經(jīng)+陽光保險+資金托管)+高收益,運營拉新策略:促銷+再促銷+拉好友+再拉好友)

4.WHERE(使用場景):

互聯(lián)網(wǎng)金融領域方向的移動端APP。用戶、需求和場景是產(chǎn)品設計前必須要考慮的三大核心要素,只有能滿足目標用戶在特定場景下特定需求的產(chǎn)品,才有可能成長為獨角獸產(chǎn)品。

5.WHEN(何時使用):

用戶體驗時涉及到資金進出及個人信息等內(nèi)容。

6.HOW:

后文闡述。

三、產(chǎn)品的注冊流程

定了這個研究主題之后,我著手研究了APP的注冊流程。用戶點擊【我的】icon之后,彈出登錄頁面,注冊按鈕位于次要按鈕區(qū)域,用戶需要點擊之后才能進行注冊。首先我考慮的是,對于一個剛下載APP的用戶來說,登錄是比注冊更高優(yōu)先級的交互嗎?從第一步開始,我們的流程就在消耗用戶的手指點擊次數(shù)。點擊次數(shù)越少,用戶使用產(chǎn)品感受越舒適流暢,注冊轉化率越高。

然后用戶點擊注冊之后,會讓他輸入手機號。這時又涉及到一個小的交互缺陷,就是用戶需要再次點擊輸入框才會彈出鍵盤開始輸入,又消耗占用了一次用戶的手指點擊次數(shù),屬于無效交互。

下面我們終于到了輸入手機號的環(huán)節(jié),用戶輸入手機號,如果用戶早就注冊了我們的產(chǎn)品,但是忘記了,輸入了已經(jīng)注冊的手機號之后,我們產(chǎn)品現(xiàn)版本的流程是【彈窗告知用戶“您的手機號已注冊”】,需要用戶點擊“確認”才能關閉這個彈窗,然后就什么操作都沒有,停留在這個輸入手機號的頁面。用戶需要手動點擊“登錄”文字按鈕才能切換到登錄界面。如果是一個40歲的中年人,他的使用APP經(jīng)驗不多,他可能會適應這個硬中斷的過程,反應一下確實是自己操作問題,是自己的過錯,而乖乖的去點擊“登錄”按鈕,但是如果是一個30歲左右的年輕人,在各種APP如親媽一般的母愛關懷下,他可能就很不舒服,對APP的印象不好從而流失。

現(xiàn)版本注冊錯誤的界面交互

四、相關理論——分步注冊

1.分步注冊適合移動端設計:移動端屏幕小、加上彈出鍵盤,假設將多個輸入項放在一個頁面,會給用戶造成擁擠感,然而分步注冊則可以較好地解決該問題。

2.分步注冊可減少用戶點擊輸入框的次數(shù):幾乎所有的注冊關鍵步驟中都有:輸入手機號、獲取驗證碼、設定密碼這3個步驟。如果這三個步驟在同一個頁面,則需要用戶手動點擊輸入框呼出對應鍵盤來填寫這些信息。如果遵循分步注冊,分成三個頁面的話,進入每個頁面都會自動置入焦點并彈出鍵盤,將減少用戶手動點擊輸入框的次數(shù)。

3.分步注冊在一定程度上可以提高轉化率:Facebook曾經(jīng)針對分步注冊與非分步注冊做過A/B Test,其結果指出分步注冊的轉化率遠高于非分步注冊。由此可見,非分步注冊強行減少注冊頁面倒不如拉長戰(zhàn)線,給用戶輕負荷的操作,讓用戶在不知不覺中完成注冊流程。

上頁我們講述了【分步注冊】的理論,結合這個理論我們來看APP的第二步——輸入驗證碼及輸入密碼。屬于非分步流程。雖然看似減少了用戶的操作步驟,但是使用過程中用戶需要經(jīng)過等待驗證碼——點擊喚出數(shù)字鍵盤——輸入驗證碼——點擊喚出英文鍵盤——輸入密碼——點擊注冊(如果驗證碼或者密碼有一項錯誤,便會彈出錯誤提示之后停留在此頁面等待用戶重新點擊輸入框自己刪除輸入的數(shù)據(jù)然后重新填寫)這樣的流程。寫到這里我的頭有點疼,所以不做過多闡述,大家可以自己體會。

五、競品分析

由于市面上網(wǎng)貸APP數(shù)量太多,但是注冊流程都一致為【輸入手機號】-【輸入驗證碼】-【輸入密碼】這類三要素流程,所以我選取了A級網(wǎng)貸產(chǎn)品微貸網(wǎng)、翼龍貸、拍拍貸及支付寶(副參考)作為分析對象。由于我沒有可用于注冊的多余手機號,所以很多流程沒有進入輸入驗證碼之后的下一步,但是已經(jīng)足夠看出一個APP關于注冊流程的優(yōu)化思路。

拍拍貸

拍拍貸的流程其實跟我們產(chǎn)品的比較一致,最后一步屬于非分布流程。但是第一步的注冊登錄判定以及設計上的通過字號對比讓用戶明確自己所處的位置這樣的iOS11設計理念值得我們參考學習。拍拍貸的最后一步點擊完成注冊之后如果輸入有誤的體驗也不好。我還有不滿意的地方是拍拍貸的整體界面設計偏簡潔清晰、以內(nèi)容為主,而作為最重要的頁面之一的登錄注冊頁顏色大面積的使用了他們產(chǎn)品不怎么突出強調(diào)的藍色,視覺觀感非常的沉重,跟整個產(chǎn)品的基調(diào)嚴重不符。

微貸網(wǎng)

前不久剛發(fā)布版本——“七年微貸”的微貸網(wǎng)的注冊流程是與我的改版方向高度一致的,這點我感到很榮幸。它從用戶頁面就開始合并登錄和注冊的判定。用戶點擊【登錄/注冊】按鈕之后自動彈出數(shù)字鍵盤,用戶輸入手機號之后系統(tǒng)判定是否注冊,如果已注冊,引導用戶進入登錄界面,自動彈出英文鍵盤填寫登錄密碼,如果沒有注冊,引導用戶填寫自動發(fā)送的驗證碼并跟隨頁面切換自動彈出數(shù)字鍵盤,減少用戶的點擊次數(shù),優(yōu)化產(chǎn)品使用體驗。

翼龍貸

翼龍貸的注冊流程中規(guī)中矩,從注冊中就讓用戶感受到自己是傳統(tǒng)金融企業(yè)的這個概念。它有很多可取之處,包括注冊首頁的活動拉新(但是做成入口圖形式會讓用戶一直想點擊并且分散其它信息的注意力)、通過主色調(diào)紅色的步驟進度條讓用戶明確流程總共幾步和自己所處的位置,最后的獎勵回饋,還有開通存管賬戶的適當引導都是我可以從中學習到的一些設計思路,跟我們的產(chǎn)品理念也非常一致。

我們的注冊完成獎勵反饋提示。作為小白用戶以及30歲左右的目標人群的我來說,我看懵了,反應不過來這些獎勵對我來說意味著什么,我不知道積分是啥概念,我也不知道投標本金是什么概念,而且關閉或者開通存管賬戶之后我也不知道這些獎勵具體去哪里找和使用。但是這個不屬于注冊流程的優(yōu)化,所以我只做了部分改動,具體可能會在以后分析改進。

支付寶

爸爸的APP,不想多夸。采用了分步注冊設計保證了用戶每步操作的視覺焦點都在自己要輸入的內(nèi)容上。輸入4位驗證碼之后自動判定驗證碼是否正確,如果不正確,清空所有驗證碼并且配合手機震動和錯誤提示紅字抖動告訴用戶輸入錯誤,減少彈窗打斷,降低錯誤反饋造成用戶心里的不愉快。之所以賬號已經(jīng)注冊的提示放在輸入驗證碼之后,是因為用戶點擊【立即登錄】的話,會直接登錄,而驗證碼就自動變?yōu)榈卿浶枰邮盏尿炞C碼,這點也是做得挺出乎意料的。

六、最終改版結果

首先,我對產(chǎn)品做了一個視覺上的改版。采用了iOS11大對比的設計理念。首先分析頁面信息優(yōu)先級,將頁面信息按權重排序,依次為核心步驟層、內(nèi)容輸入層、輔助信息層,還有包含可點擊交互操作的操作引導層。然后通過字號、字色與字重拉開信息層級間的差距,最終將用戶聚焦到核心信息上來。

a.核心步驟層:是指用戶在短暫時間內(nèi)瀏覽頁面時,能讓其一目了然的獲知當下應該操作的某個步驟。例如“輸入手機號碼”是這個頁面的重點核心內(nèi)容,其設計需要重點突出,且精煉文字。

b.內(nèi)容輸入層:是指用戶被核心步驟層吸引后,需要進行相關內(nèi)容的輸入,例如昵稱和密碼的輸入等等。其設計需要引導用戶進行輸入操作,并且在輸入中給用戶帶來便捷性。例如包括密碼明文/暗文的切換,以及輸入驗證碼到最后一位后直接進入下一步,來確保便捷性。

c.輔助信息層:是指用戶理解了以上兩個信息層后,輔助信息層會有更多信息讓感興趣的用戶去了解。這里往往提供更多說明或者跳轉鏈接,例如使用條款和隱私政策等。

我在視覺上使用了CR設計語言(iOS11的設計風格)。Complexion Reduction設計語言是指使用更加簡化的界面顏色,更大更突出的標題字體,以及簡潔的圖標,來拉開頁面信息層級,突出頁面主要功能。作為用戶體驗設計師應該進行“最小化設計”和“逐步簡化”的設計模式,毫不留情的砍掉“沒有重要功能的元素”,使用戶快速關注到信息的本質(zhì)。

改版前:

改版后:

1.簡單且突出的告知用戶在頁面中需要做的唯一一件事

2.減少零碎信息的展現(xiàn),最大限度的精簡文案

3.各類信息分組,拉大信息戰(zhàn)線層級

七、具體改動內(nèi)容

1.增大了輸入內(nèi)容的字號,簡單清晰明了。延續(xù)舊版本,對手機號碼進行344的分布

2.增加一鍵清空icon

在輸入時偶爾會出現(xiàn)輸入錯誤,如果沒有清除的icon,用戶只能一直按鍵盤中的清除按鈕,需要一直按住直到輸入框為空。點擊注冊時候,注冊按鈕變?yōu)榧虞d狀態(tài),清空icon與鍵盤同時消失/收起。

3.優(yōu)化了不可點擊狀態(tài)的按鈕狀態(tài)表達

舊版本不可點擊狀態(tài)為灰色,比較老舊過時,并且顏色的視覺層次不高。

4.手機號位數(shù)不對/格式錯誤時,按鈕為不可點擊狀態(tài)

當input為空時,關聯(lián)按鈕為disabled的狀態(tài),這是采用了防錯的原則:如當使用條件沒有滿足時,常常通過使功能失效來表示(一般按鈕會變?yōu)榛疑珶o法點擊),以避免誤按,這是在提交之前的視覺驗證輸入的另一種方式。

5.修改了按鈕上按鈕的名稱

表單按鈕應該準確描述用戶正在執(zhí)行的任務——創(chuàng)建帳戶或登錄等。

另外,我還優(yōu)化了文字的顯示層級,共分為五類

涉及到文字/色彩規(guī)范是一個很大的工程,我們的理財APP在這點做的不是很好,因為這次改版設計是私下在做,所以我便做得隨心所欲了一點,甚至重新定義了品牌色:)。

關于負反饋的處理

所謂負反饋,指用戶行為出現(xiàn)問題時出現(xiàn),比如投資金額小于可投金額,或者密碼不正確等等。雖然負反饋在產(chǎn)品交互設計中對于警示用戶不該做的行為或者是該行為會導致不良后果的可能時起到了不可或缺的作用。但是顯然更多的時候人們不愿意收到負反饋,任何用戶在得到負反饋的時候都會感到沮喪,因此盡量減少通過特定的反饋頁面來進行負反饋。

1.盡量減少用戶犯錯的機會,包括突出的標題及重要文字,清晰的文案,分步輸入等

2.輸入驗證碼步驟中,如果用戶輸入的驗證碼有誤,驗證碼自動清空并且輸入欄返回第一個,降低用戶操作及點擊數(shù)。

3.采用了手機振動+文字震動加文字標紅的方式提示用戶的輸入錯誤,用比較輕量化的反饋來弱化。

1.優(yōu)化文案

·將會讓用戶看暈的獎勵文案整合至【我的獎勵】中,方便后續(xù)查看。

·增加了銀行存管的解釋文案,使強突出按鈕更有指向性,也更好的引導用戶去開通銀行存管。

2.優(yōu)化主輔按鈕表達

這里我參考了翼龍貸的設計思路,但是做了一個優(yōu)化,將主按鈕調(diào)整到右側。大數(shù)據(jù)表明,一般將傾向于用戶點擊的按鈕放在右側,點擊率更高。

七、最終成果動效展示

 

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

你的設計,用戶真的看得懂嗎?

資深UI設計者

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

設計師經(jīng)常犯的一個錯誤就是上帝視角,高估了用戶的理解能力。一頓操作猛如虎,結果用戶可能根本沒看懂你的設計。

前段時間個人所得稅app 上線,用戶可以在線辦理個稅專項扣除申報。我自己也嘗試使用了一波,在申請房貸利息抵扣的時候發(fā)現(xiàn)了一個問題。

在房貸信息模塊里需要我輸入證書編號,但是我根本不知道到底要哪個證書編號。輸入提示非常的簡潔,就三個字「請輸入」,到底要輸入什么?這樣的表單在很多產(chǎn)品中都可以看到,讓用戶輸入生日,但沒有告知日期的格式。日期格式真的太多了,用戶到底選擇哪種?

設計師經(jīng)常犯的一個錯誤就是上帝視角,高估了用戶的理解能力。一頓操作猛如虎,結果用戶可能根本沒看懂你的設計。

更快:交互層

有的時候用戶并不是看不懂你的設計,而是沒時間看你的設計。如果我們做了一個抽獎活動,用戶看了一眼主界面沒有弄明白是怎么玩的,那么這個抽獎大概率是失敗的。你或許會不服,我明明把活動規(guī)則已經(jīng)寫在下方了,可是用戶根本不會看。因為他們真的很「懶」。

所以讓「用戶看懂你的設計」,首先我們應該做到「讓用戶更快的看懂」。我們需要提升信息的傳遞效率。

1. 信息可視化

俗話說「字不如表,表不如圖」。用戶對于具象元素(表格、插畫、icon和圖像等)的感知能力更強,具象元素也更能傳遞情緒。例如:道路兩旁的路標多數(shù)是以圖形為主體的。這是因為在車子高速行駛的過程中,司機沒有足夠的時間閱讀標示上的文字。

場均122.4分,30.6個助攻,45.0個籃板……這些數(shù)據(jù)對于我們來說只是冷冰冰的數(shù)字,我們很難理解其背后的含義。雷達圖對球隊數(shù)據(jù)進行了可視化處理,提升了信息的可讀性。因為相較于純文本,大腦處理圖形的速度要快得多。

以谷歌日歷為例,如果我要做瑜伽,那么就會在日程詳情頁配一個瑜伽墊的插畫;如果我要跑步,那么就會配一幅跑鞋插畫。用戶甚至不用看文字,通過插畫上所描繪的場景就可以知道自己接下來的行程。用戶可以更快地看懂。

2. 合適的組件

選擇合適的組件可以降低用戶的學習和操作成本。以上面的生日為例,與其通過輸入提示告訴用戶日期格式,還不如直接給用戶提供一個日期組件。

多數(shù)的選擇場景中我們都會使用底部動作欄來承載選項,如選擇優(yōu)惠券/銀行卡。參考了一些產(chǎn)品,發(fā)現(xiàn)他們都在底部加上了關閉/確定按鈕。我們不妨來思考:動作欄界面底部需不需要提供關閉/確定按鈕?

決定一個元素的去留,我們需要明白它的作用是否可以被替代。底部的按鈕是供用戶點擊關閉底部動作欄的,光看「關閉動作欄」這個動作,底部按鈕并不具備不可替代性。因為點擊上方的空白區(qū)域或者把關閉按鈕放在右上角都可以關閉動作欄。

這樣一看,底部的按鈕是可以刪除的。那為什么其他的產(chǎn)品都保留了呢?因為我們忽視了組件的信息屬性,我們沒有考慮如果沒有它是否會對用戶了解系統(tǒng)當前的狀態(tài)造成影響。

沒有底部的按鈕,用戶無法確定底部動作欄是否正常加載。用戶不知道我是只有一張銀行卡還是只加載出來一張銀行卡。

更準:文案層

前段時間去體檢,發(fā)現(xiàn)排隊顯示屏中有的人前面有咖啡圖標,有的人沒有。好奇的我特地找護士問了一下,發(fā)現(xiàn)咖啡意味著接下來的體檢項目不需要空腹,你可以去吃早飯了。圖標的確很簡潔,可是有多少人看到這個咖啡圖標會立刻意識到自己可以吃早飯了呢?

過度追求信息傳遞的效率,而忽視了精度,從一個極端走向另一個極端——簡潔易懂的文案是保障信息準確性的重要措施。

前段時間針對報錯文案做了一個梳理,發(fā)現(xiàn)了一些文案中的共性問題。

1. 沒有提供解決方案

一個合格的報錯文案應該由:報錯場景、報錯原因和解決方案共同構成。首先告知用戶具體遇到了什么樣的報錯場景并且解釋原因,最后提供解決方案。多數(shù)文案都只做到第一步,只描述了報錯場景,這并不能滿足用戶的需要。

  • 如果照片上傳失敗,用戶需要知道是因為格式不對還是圖片太大了。
  • 如果因為系統(tǒng)升級,導致服務暫停,用戶需要知道什么時候可以再次提供服務。
  • 如果把報錯場景看成是一個坑,那么報錯文案應該告訴用戶你掉進了一個什么樣的坑,為什么掉進來以及怎么樣才能爬出去。

2. 擁抱數(shù)字

多數(shù)的文案都不愛提供數(shù)字,用戶能獲取的信息也比較模糊。我們盡量給用戶提供準確的數(shù)字,包括時間、金額、次數(shù)等,讓用戶對當前的狀態(tài)有一個準確的認識。

輸入手勢密碼錯誤是有次數(shù)限制的,可是你并沒有告訴用戶今天還剩幾次機會。

我們經(jīng)常會遇到資料審核的場景,最常見的方法就是告訴用戶「資料審核中」,非常的省事。但是用戶會疑惑到底要審核多久,給用戶提供一個大致的審核時間,讓用戶有目的的去等待。

備胎:在線客服

如果前面兩個方法都不能解決用戶的疑問,那么我們只好給用戶提供在線客服了。

1. 入口的必要性和統(tǒng)一性

客服的入口一般在首頁或者用戶的個人信息頁,除此之外我們需要在用戶有客服訴求的場景中給用戶提供客服入口。如果不提供入口,用戶遇到問題就要返回到首頁或者我的頁會很繁瑣。如果用戶在一個表單頁中錄入信息,突然對某一項內(nèi)容不確定,返回到首頁找客服咨詢。這樣可能會導致用戶之前填寫的信息丟失,用戶需要重新輸入一遍。

以下圖為例,這是一個借款的表單頁,用戶在這里錄入借款信息。我們會給用戶推薦一款借款人安全險的保險產(chǎn)品,提示文案是「保費60元,貸款利息可節(jié)約55.33元」。

但是用戶反饋不知道這個60元的保費是一次性扣除還是每月都會收取,并且這個利息節(jié)省是什么意思。因為對收費標準不確定,用戶的購買意愿也會受到影響。這里的文案表述不清楚,我們可以給用戶提供一個客服的入口。

因為在線客服是一個共有的模塊,不同的業(yè)務線都可能會調(diào)用。那么在入口的設計上,我們需要注意一致性。當然我們也不能過于死板的追求一致性,因為不同場景用戶對于客服的訴求是不一樣的。就以支付寶為例,生活繳費和螞蟻借唄兩者在線客服的入口是不一樣的。

因為相對來說,用戶對借錢的場景更加敏感,有更多的疑問去確認。這筆貸款的利率怎么算的?還款方式是怎么樣的?會不會影響我的個人征信?所以在借唄頁中,用戶對于客服的訴求更高,所以在布局上會放在更加顯眼的位置。

2. 對話式交互

用戶進入客服系統(tǒng)不意味著立馬可以跟客服小姐姐聊天。咨詢問題一般會經(jīng)歷以下幾個步驟:

  • 提供猜你想問的問題;
  • 客服機器人;
  • 真人客服。

以支付寶為例,首先會根據(jù)你的來源給你推薦你可能想問的問題。例如:你從充值中心進入客服,首先會給你推薦充值繳費相關的問題。

如果提供的問題列表里沒有用戶想問的,用戶就需要手動去查找問題。這時客服機器人登場,根據(jù)你輸入的關鍵詞,給你提供相應的解決方案。如果客服機器人不能解決你的問題,那么可以召喚真人客服來幫你解答。

京東金融與支付寶的客服流程大同小異,其中的一個區(qū)別在于它額外提供搜索框來查找問題,而支付寶是通過對話式交互來查找問題。

對話式交互也是近年來比較熱門的一個話題。對話式交互主要的優(yōu)點在于學習成本低,我們現(xiàn)有的交互體系都是建立在人工智能不夠智能的基礎上。如果足夠的智能,未來的產(chǎn)品界面可能就是兩個對話框,你只要打出或者說出你的需求就可以了。

年初一下午我要看韓寒的新電影,幫我預定一張票。系統(tǒng)根據(jù)你的行程和之前的觀影記錄,猜測出你當天觀影的影院和時間順便根據(jù)你的喜好選好座位,生成了一個訂單或者同時生成好幾個訂單供你選擇,你確認一下就可以。

當然這只是一種設想,目前的技術還無法實現(xiàn),系統(tǒng)無法真正分析出用戶的真實意圖并且做出反饋。例如,在現(xiàn)實人與人的對話中,同樣的一句話,不同的語境下有著不同的意思。

把這個場景帶入客服中,我們輸入「修改」可以發(fā)現(xiàn)有這么多相關的問題。如果我從白條頁面中進入客服,我輸入「修改」,那么應該優(yōu)先從白條相關的問題中篩選出與「修改」相關的問題。而目前來說,不管從哪個模塊進入客服,輸入「修改」給你推薦的問題都是一樣的,沒有考慮語境。在這種不夠智能的情況下,對搜索結果的展示上傳統(tǒng)的搜索框模式更加合適。

總結

以上是我簡單的分析和總結,如果你有不同的看法和建議歡迎留言。


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。

 

平面中的構圖技巧

用心設計

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

 

平面中的9種構圖,但有的同學還不是太明白,所以小編今天細說里面其中一種構圖:視覺引導線,加深大家的理解。

視覺引導線構圖

什么是視覺引導線?(視覺動線)

視覺動線會將觀眾視覺引導到特定的方向,先創(chuàng)造一個視覺中心點,之后會提供一條讓觀眾可隱約跟隨的視覺路徑,劃分視覺階級明顯讓觀眾知道元素之間的相對重要性。引導線是運用元素本身的原始形象或直接畫出實體線條,借用這些引導線觀眾的視線可以被指向畫面的其它元素哦。

上圖中使用了視覺動線 + 留白,留白可以讓海報中的「手」更加搶眼,使觀眾第一眼就會看那只手。接著就是視覺引導線了,引導線不一定是實體線條,它可以是元素本身的原始形狀、人物視線以及元素組合等等,借用這些引導線讓觀眾的視線可以被指向畫面中的其它元素。

說到這里,我想大家也知道上圖的引導線是什么了吧?引導線是手與線的組合,觀眾的第一視線是手,然后會順著手拉的線方向延伸,最后停留到右下角的小字里。這幾行小字就是作者要表達的主要信息。

但為什么不直接居中非要弄個引導線?雖然可以用這些中規(guī)中矩的構圖,但往往會顯得無趣,也不一定能吸引用戶去看了。

下面小編用一些案例來讓大家更好理解。

案例:

上面的海報設計是很好的例子,首先利用視覺中心點讓觀眾集中到大字區(qū)域,然后順著線條查看下方的內(nèi)容,先是 bla 的內(nèi)容,接著就是 zer,所以這圖主要信息應該是 RYDER BLAZER(但小編不知道是啥……)

上圖中,人物的視線也可以算是一種引導作用。

總之好的視覺引導線可以讓作品富有故事性和藝術性,還能提升作品視覺上的觀賞度。所以我們創(chuàng)造時應該重視構圖。

 

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

原來日本設計還能這么萌!53歲老頑童的“腦洞之作”風靡日本!

資深UI設計者

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

說起日本設計,你腦子里冒出的第一個印象是不是「性冷淡」

MUJI、優(yōu)衣庫、nendo工作室,清一色的簡單灰白掛,看了就讓人想到「斷舍離」。

但是,并非所有的日本設計,都是這個調(diào)調(diào)的,也有可能是下面這樣的。

平淡無奇的紅綠燈,搖身一變竟然變成了楓葉的形狀?

綠、黃、紅三色正好對應不同季節(jié)下楓葉的顏色,有了它就算一路碰到紅燈,情緒也不會暴躁咯。

那些乘電梯永遠不看腳下的小孩,銀杏落葉鋪成的電梯,足夠吸引你的目光了吧?這玩意兒可比「注意腳下」的標語好使多了。

以上這些腦洞大開的設計全都來自于日本GOES公司創(chuàng)始人前田賢剛,他是個53歲的老頑童,低調(diào)到日站君只能找到他的這么一張小照片。

雖然公司總共就5個人,但卻和資生堂、奧林巴斯、加拿大觀光局等大客戶都合作過。

看了他們的作品之后,或許會顛覆你對日本設計的認知。原來日本人認真賣起萌來,也是一把好手吶!

居家好物篇

看到這個日站君忍不住哼出聲「童年的紙飛機終于飛回我手里~」

但是千萬別真飛出去,因為它的真實身份其實是一個鹽罐。

「靈魂撒鹽」都弱爆了,「紙飛機撒鹽」了解一下,做飯的時候還能順便追憶下童年。

欸,這堆雪是干嘛的?

答案揭曉,其實這是一個門擋。

或者用來做書立也可以。永遠不化的積雪,簡直圓了南方孩子一個「看雪夢」,以后再也不用花5塊錢,雇北方人在雪上寫名字了。

雖然摸清了前田賢剛「不按套路出牌」的秉性,但日站君看到下面這個還是迷茫了,曲別針被掰彎了?

而它的實際用途竟然是固定海報的釘子!一眼掃過去,毫無違和感。不知道的可能還想求鏈接,哪家的回形針這么剛連墻都能戳穿。

回形針都能釘海報了,所以這肯定不是普通辦公用的燕尾夾。

沒錯,從底部的桿子就能看出些端倪,人家就是個吧臺椅。

事情變得沒那么簡單了,看GOES家的作品,仿佛演變成了一個「猜猜我是誰」的游戲。偶爾加班來一瓶啤酒,還挺有情調(diào)的。

哈哈你又猜錯了,它只是提醒你工作的便利貼。

有情調(diào)的來了,磁帶卷筆刀。

高科技儀器卷筆刀,連削鉛筆都能變成一件有儀式感的事。

吃貨篇

一塊吐司,看上去松軟香甜,讓人忍不住想咬上一口。

不過別真咬,因為它是個如假包換的手機殼。這樣的手機殼千萬別給我,我每天都會餓醒的。

藏了塊「蛋糕」的茶杯,有了它喝水都是甜甜的。

一箱來自遠方的包裹,中間透出的紅蘋果又大又圓,任哪個快遞小哥看了,都會輕拿輕放吧。

嘿嘿又被騙啦,人家只是一卷膠帶,就是長得逼真了點。

夏日炎炎,來把「五花肉扇子」扇扇風。友情提醒,別在午飯前夕使用,不然可能會慘遭同事群毆!

再穿雙「牛排拖鞋」,總覺得腳底板好像油油的。

冰淇淋掛鉤,牢固性有待檢驗,總擔心天一熱就化了……

還有新鮮出爐的「蔬菜瓜果戒指」,青椒、草莓、胡蘿卜、玉米,應有盡有,敢戴出去的,日站君敬你是條漢子。

萌寵篇

之前的巧克力總算知道是被誰偷吃的了,巧克力上的貓腳印透露了一切。

想和你家阿喵玩躲貓貓嗎?紙袋子就是個不錯的藏身處噢,露出的一截小尾巴,能萌死個人。

往袋子里一瞅,果然在這兒躲著呢。

喵星人款「暗中觀察」插座,你家主子盯著呢,看你還敢忘拔插頭!

路障也貼上阿喵的照片,醒目值立馬翻了個倍。

這只萌萌的小兔子表盤,總覺得少了點什么。

如果你穿的是小白鞋,調(diào)整好角度抬眼看,少的兩兔子耳朵終于補齊了。

難以想象,這些居然全出自一個大叔之手,所以說,千萬別小看大叔,他可能比20多歲的你更有少女心。

宅男篇

一個畫著美女的扇子,就能夠成為宅男愛用品了嗎?

那是你沒get它的正確使用方式,只要角度找的好,就能營造出下圖的場景,簡直是單身男性的福音哇。

誰說露肩裝是女性的專屬?

男生照樣可以擁有。穿上它,保準你是整條街最靚的仔。

精神病人思維廣,中二少年歡樂多,漫畫式鏡子專為每一位中二魂爆棚的你而設。

每天起床一照鏡子,誰還不是故事的主人公。

一般的傘都不夠符合中二少年的氣質(zhì),得撐這一把才行。

別人在明你在暗,再也不怕和陌生人進行迷之眼神對視了。

要是嫌那把不夠炫酷,八星八箭全鉆石豪華版足夠閃瞎你的眼了吧?

下面是新時代年輕人必備的手機三件套,自帶打光板的手機,絕對的合影利器!

手機也得好好防曬,「臉基尼」也給用上。

手指不夠長的少年,只需一根「手指加長器」,單手按到手機屏的各個角落,從此不再是夢。

這突破銀河系的腦洞,日站君不禁想為它們雙擊666。

GOES公司的理念是要做「引人注意而獨特的idea」,看了他們的作品應該沒有人會覺得他們沒做到吧。

人們總會忽視眼前的風景,前田把生活中的小物件摘出來,再融入自己的腦洞。

于是當大家再看到它們時會眼前一亮,然后會心一笑,感受到創(chuàng)意的美好,這就是設計的意義吧。

當性冷淡、極簡風大行其道,他們卻致力于把普通平凡的事物玩出新花樣,告別無聊的日常。果然有趣的靈魂才是萬里挑一!

以上小物均為良心介紹,如有種草概不負責,別問日站君要鏈接,因為日站君也沒有。2019年都到了,我們也稍微來點改變唄,或許比起性冷淡,不如賣萌來的贊。

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

2019廣告營銷案例搶先看

用心設計

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

 

2018年已過,轉眼又到了2019,但營銷圈中戰(zhàn)火從未消停過……

2018年各大品牌營銷玩出了新花樣,優(yōu)秀的營銷案例層出不窮,攬獲了眾人的芳心。

面對2019新的一年到來,各大品牌當然也不會放過一個大好的借勢營銷黃金機會,都爭先恐后搭上了這趟“借勢營銷”的順風車,為打響2019年第一炮,自然是無可厚非的。

然而,迎來2019新年,各品牌紛紛借勢“?;ㄕ小保什惠斖?,各種多元化新玩法碰撞在一起產(chǎn)生了巨大的火花,再次燃燒整個營銷界。因此,在這個競爭激烈的營銷戰(zhàn)場上,頻繁出現(xiàn)了眾多品牌活躍的身影,各種刷屏級的案例也相繼誕生。

下面為大家盤點的刷屏案例,看看這些品牌都是如何借助“新年”這個熱點事件的勢能,迅速搶占超級流量,賺足眾人的眼球?

特侖蘇

主題文案:更好的2019,做更好的自己!

點評:往年的特侖蘇代言人只有陳道明、靳東,而今年又有兩位新代言人加入特侖蘇——張鈞甯和鄧倫。特侖蘇邀請了這四大代言人共同拍攝了2019廣告,又以一個全新的面孔面向用戶。

廣告中花式植入產(chǎn)品,將產(chǎn)品巧妙融入到畫面情境中,以達到潛移默化的宣傳效果,順理成章地符合了產(chǎn)品植入講究“隨風潛入夜,潤物細無聲”的最高境界。

四大代言人共同拍攝廣告,無疑是突破了傳統(tǒng)的廣告模式,強大陣容助陣,可大大體現(xiàn)出明星在營銷中的號召力與影響力,明星背后帶著龐大的粉絲群體,推動這次廣告更廣泛地覆蓋目標受眾。加大了此次廣告營銷的宣傳力度,從中也表達了特侖蘇堅持“從更好的開始”的品牌主張。其次,對于用戶而言,特侖蘇這波新年廣告帶給大家更多的是驚喜與新年的美好祝愿:更好的2019,努力做更好的自己。

京東白條

主題文案:“一點當?shù)湫小本W(wǎng)紅店橫空出世

點評:就在2018年尾聲已敲響時,京東白條又出來“搞事情”了,竟然在京城“四大兇宅之首”—— 朝內(nèi)81號開了快閃店,使得擁有百年歷史的“京城第一鬼宅”, 搖身一變,成為了一家網(wǎng)紅店,吸引眾多時尚潮人前來打卡,深夜排隊的壯觀場面實在令人驚嘆。

京東白條精準洞察年輕人現(xiàn)實痛點和情感需求,以及抓住了他們的獵奇心理,將無數(shù)傳說的冒險勝地——朝內(nèi)81號,首次改造成京東白條“一點當?shù)湫小保瑸榇蟊娞峁┝巳碌拇碳こ蓖骟w驗。讓年輕人通過【當與換】的儀式感,把負能量、情緒、雜念統(tǒng)統(tǒng)“分期”丟掉,切身感受“一點改變,好過一成不變”,告別社畜、廢青的過去,獲得新生,在2019開始更好的人生。

京東白條“一點當?shù)湫小本W(wǎng)紅店的問世,可謂打破傳統(tǒng)印象中的金融理財玩法和當鋪玩法,從一點事務局到一點當?shù)湫?,京東金融始終在突破體系和行業(yè)的限定,持續(xù)打造坐擁“潮人”人設的品牌。同時也彰顯出一個擁有年輕人的潮玩精神、有溫度的品牌,更有效建立了品牌與用戶深度溝通的情感紐帶。不得不說,這一反常態(tài)玩起時尚新潮,簡直是顛覆了人們對京東白條的印象,京東白條這波營銷實在是妙!

據(jù)悉,2019年將會有5期系列活動陸續(xù)落地全國,既佛系又喪的年輕人,不可錯過!

OLAY

主題文案:下一站,無懼年齡

點評:新的一年里,BBDO廣州攜手OLAY,帶來無懼年齡的《下一站》,OLAY這支反逼婚廣告,戳中了多少人的心窩?相信,給了你不少啟發(fā)。

廣告中講述的是一個發(fā)生在“年齡列車”上的故事,女主手握一張名為“年齡”的車票,正在尋找著自己的位置,突然驚奇發(fā)現(xiàn)這里的車廂都是按照年齡劃分的。通過這極為扎心的故事情節(jié)激發(fā)更多“大齡剩女”的思考,但也引發(fā)了更多女性產(chǎn)生堅定的想法,不應該因為年齡而倉促步入婚姻的殿堂。

其實,這一廣告刷屏朋友圈,那是因為這廣告基于對女性的心理洞察,找準眾多女性的痛點,讓人產(chǎn)生強烈的代入感,更能給予女性啟發(fā),正確面對自己的每一個年齡階段。由始至終,OLAY給人傳達了一種“不畏年齡,勇敢做最真實的自己”的精神,無形中體現(xiàn)了OLAY對用戶的最切實的關懷,使得其品牌深得人心。

迪士尼

主題文案:“夢想成真”

點評:迎來新的一年,這支由迪士尼推出的暖心廣告正式上線后,獲得眾多網(wǎng)友的一致好評,都稱這已被故事中的“小白鴨”所吸引。

廣告片講述了一只小白鴨費盡千辛萬苦,終于和偶像唐老鴨見面的故事。以呆萌的“小白鴨”形象,然后制造感人的故事,直擊用戶的內(nèi)心深處的情感,從而引起用戶的共鳴,加強了用戶對品牌的認同感。

這次廣告貼合了現(xiàn)實生活,從用戶的情感出發(fā),喚醒人們的夢想,不忘初心,勇往直前,因此,迪士尼給人傳遞的不只是對美好生活的向往,更多的是對夢想的追求與執(zhí)著。還有向用戶表達了:盡管我們都長大了,迪士尼還在守護我們最童真的夢想。所以,迪士尼通過這一波觸動人心的情感營銷,為品牌與用戶之間架起了一座真正的情感橋梁。

榮耀手機

手機性能測試

(掃描二維碼觀看視頻)

點評:說到手機的耐摔性,很多人都會想到諾基亞,但諾基亞在現(xiàn)如今的手機市場普及性明顯不如其他品牌。而在今年,榮耀手機開始耍出了新招——推出一創(chuàng)意廣告,鐵證榮耀手機才是“堅強者”。

這是一支榮耀測試手機性能的宣傳片,讓手機歷經(jīng)各種考驗,包括油煙考驗、零下40度的超低溫測試、高達55度的超高溫測試、殘酷的刮擦實驗等,最后用結果彰顯:榮耀手機的性能強大。

所以,榮耀手機通過展示這優(yōu)質(zhì)的手機性能來加強用戶對其產(chǎn)品的認知,刷新用戶的榮耀手機原有的印象。從用戶的角度考慮,用實驗證明,體現(xiàn)產(chǎn)品的最大價值,從而滿足用戶對手機產(chǎn)品的各種需求,也引導用戶對榮耀手機產(chǎn)生正面的認識。最后也突顯了“生活中1%的可能,也要100%的做到”的品牌理念,然而,既有可看性,又“用實力說話”的產(chǎn)品廣告,自然會把人征服得心服口服。

網(wǎng)易云音樂

主題文案:“遇見你真好”年度聽歌報告

點評:2018年的網(wǎng)易云音樂的年度報告,居然在2019年的第四天才遲到出現(xiàn),網(wǎng)易云音樂的“遇見你真好”年度聽歌報告,又雙叒叕刷屏了……

眾所周知,網(wǎng)易云音樂于2013年4月23日正式發(fā)布,也是國內(nèi)首個以“歌單”作為核心架構的音樂APP,每次網(wǎng)易云音樂的營銷與“走心”產(chǎn)生了密不可分的關系,大眾千呼萬喚始出來的網(wǎng)易云音樂年度總結報告終于出來了,雖然QQ音樂、酷狗音樂也在年前亮出了年度音樂總結,但偏偏是網(wǎng)易云音樂的年度聽歌報告刷屏了。

這次的年度總結,滿足了用戶對音樂的需求,也滿足了一些有情懷的用戶,而且其歌單給予用戶滿滿的成就感,輕易地完成了一次階段總結。吸引更多用戶參與其中,紛紛曬出自己的年度歌單報告,使得這次網(wǎng)易云的年度聽歌報告,引發(fā)了廣泛的傳播。

屈臣氏

主題文案:“做自己,美有道理”

(掃描二維碼觀看視頻)

點評:就在2019年到來的鐘聲一響起,大家便紛紛立了新的flag,而屈臣氏上線的H5,彰顯著“做自己,美有道理”的品牌主張,剛好迎合了各大女性在新的年“追求更完美的自己”的美好愿望。

視頻中的“四位小姐姐”show出了“不跟隨、不妥協(xié)、不偽裝”的模樣,還有人的語言配合動感的畫面,折射出現(xiàn)實生活中年輕女生渴望表達自我,追求個性與態(tài)度。呼喚大家在新的一年,立起了2019新flag。同樣也展現(xiàn)了屈臣氏就是一個有態(tài)度的品牌。

只想說,在這2019新年之際,屈臣氏推出了這一波滿滿正能量的廣告,能俘獲用戶的芳心也是毋庸置疑的了。

縱觀以上品牌營銷案例,可謂各有千秋,但共同點旨在使得品牌深入人心。

然而,眾多品牌營銷過程中需要從用戶角度出發(fā),都說,一個成功的營銷,是因為“走心”,在傳達品牌產(chǎn)品信息的同時,也能使得受眾與品牌成功產(chǎn)生情感的共鳴,讓用戶更深刻地記住其品牌。

當然,我們也更期待2019,品牌主們能推出更多刷屏級的好案例。

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

關于產(chǎn)品的需求分析方法,這篇全幫你總結好了!

資深UI設計者

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

隨著互聯(lián)網(wǎng)產(chǎn)品的不斷向前發(fā)展,「產(chǎn)品設計導向」一類的概念已經(jīng)不僅限于大公司中,在往日越來越注重「短期效率」的小公司也都紛紛開始注重產(chǎn)品設計方面的建設。

所謂的「產(chǎn)品設計導向」指的是產(chǎn)品建設之前要圍繞著產(chǎn)品的立項、目標用戶等等去規(guī)劃產(chǎn)品的功能點,明確產(chǎn)品核心價值;在產(chǎn)品上線之后,通過數(shù)據(jù)分析和功能反饋,發(fā)掘更多的需求,去規(guī)劃下一步的「功能增刪改」,將產(chǎn)品的設計方向引導到更正確的位置,提升用戶留存率,延伸挖掘出產(chǎn)品更多的可能。

另一方面,從現(xiàn)在的設計環(huán)境而言,對所有的設計師既是機遇,又是挑戰(zhàn)。大量的 UI專用工具(Sketch、Principle、Flinto、Origami等)的出現(xiàn),大大提升了產(chǎn)品前期 UI設計師的工作效率,所以現(xiàn)在「全鏈路思維」已經(jīng)從剛出現(xiàn)時的「概念化思維」變成了「主流化趨勢」。所以現(xiàn)在很多的 UI設計師在站酷發(fā)布自己的作品的時候大部分都喜歡加入一些產(chǎn)品前期分析(功能設計、用戶畫像等)內(nèi)容。

但是很多設計師的分析環(huán)節(jié)明顯就是為了證明「有」而去「做」,缺少了真正的分析部分。給我印象很深刻的就是之前看到的一個二手房買賣的UI設計作品,典型用戶畫像里主流用戶是:「男、七十歲、目標是給自己的兒子購買婚房」。實際上這種所謂的產(chǎn)品分析流程對于設計師而言是沒有任何幫助的,只是從形式上走個過場罷了。

本篇主要講述產(chǎn)品設計中的一些分析方法,范圍從「個人練習式設計」到「團隊合作式運作」,適合初級產(chǎn)品經(jīng)理、交互設計師,在工作中職能范圍與產(chǎn)品規(guī)劃有關的 UI設計師,想要學習產(chǎn)品設計的新人閱讀。

產(chǎn)品運作流程概覽

我遇到的比較普遍的問題是:很多設計師對于自己所在公司產(chǎn)品的運作流程并不是十分了解。這樣會在你實際配合工作的時候感到無從下手。有的甚至于同一家公司的不同設計師對于產(chǎn)品設計方面的理解也不盡相同。所以說要從淺到深的學習產(chǎn)品功能設計,就必須先理清當前工作的常規(guī)流程,例如常見的產(chǎn)品運作流程。

上面是一個相對規(guī)范的產(chǎn)品開發(fā)流程,實際上你在看到上述流程圖后,對照自己公司的情況,會發(fā)現(xiàn)有一些崗位上的缺失。出現(xiàn)這種情況最大的原因是因為很多公司會把一些職能進行合并用來節(jié)省成本,現(xiàn)在仍然有大多數(shù)的公司并沒有交互設計師的崗位,但是交互設計的職能不代表沒有,而是被產(chǎn)品經(jīng)理或者視覺設計師兼任了。你需要明確團隊中各個人負責的職能部分,才能更好地提升溝通效率。

個人思考方法(一):空·雨·傘

上面講到了設計師的「全鏈路思維」現(xiàn)在已經(jīng)成為了一種主流的觀點,將來前期的鐵三角「產(chǎn)品經(jīng)理、交互設計師、UI設計師」很有可能結合變成是「交互視覺二合一」甚至是「產(chǎn)品交互視覺三合一」的狀態(tài)。所以現(xiàn)在很多的設計師開始嘗試自己去 DIY 一個需求或者做ReDesign 這樣的設計,希望可以通過這樣的方式完成自己跨領域能力的一個積累。但是當他們打開電腦的時候,大部分人會發(fā)現(xiàn)自己突然變得沒有思路,從產(chǎn)品方向點確定到產(chǎn)品視覺產(chǎn)出之間出現(xiàn)了斷層。

其實做過設計練習的人都知道,由于一些現(xiàn)實場景的不同,一些人在做設計練習的過程中會受到很多條件的局限,尤其是在孤立無援的情況下,你面對自己的練習作品往往會無從下手。當然,不同的場景下有不同的分析方法。

在團隊協(xié)作的時候,分析方法要全面、嚴謹、反復推敲。

在個人練習的時候,分析方法要、直接、簡化不必要的流程,以培養(yǎng)自己的分析能力為主。在這種場景下,空·雨·傘就是一個非常好的思考提升方法。

簡單概述「空雨傘」思考方式:觀察(事實) → 思考(內(nèi)在) → 產(chǎn)出(解決方案)。

運用在設計上就是:發(fā)現(xiàn)痛點 → 思考原因 → 提出解決方案?!缚铡び辍恪挂驗楹唵巍⒊杀镜?、易上手,可以作為設計入門培養(yǎng)思考能力的一種方法,但是在使用空·雨·傘的分析方法時需要結合一定的具體調(diào)研(或者輕量級的用戶研究)相配合,不然又會變成一味的「拍腦門兒」式的主觀臆測,對于分析能力提升沒有絲毫幫助。

個人思考方法(二):邏輯樹

邏輯樹又稱問題樹、演繹樹或分解樹等。很多咨詢公司分析問題最常使用的工具就是「邏輯樹」。邏輯樹是將問題的所有子問題分層羅列,從最高層開始,并逐步向下擴展。

簡單來形容一下邏輯樹:把一個已知問題當成樹干,然后開始考慮這個問題和哪些相關問題或者子任務有關。每想到一點,就給這個問題(也就是樹干)加一個「樹枝」,并標明這個「樹枝」代表什么問題。一個大的「樹枝」上還可以有小的「樹枝」,如此類推,找出問題的所有相關聯(lián)項目。邏輯樹主要是幫助你理清自己的思路,不進行重復和無關的思考。

如果你要運用邏輯樹方法去分析產(chǎn)品,主要的一點在于學會細化拆解目標。

舉個例子:在2017年我創(chuàng)建了自己的個人號,但在發(fā)布了一部分的文章之后,我開始意識到文章的可讀性始終不高。在這個時候我們就可以按照邏輯樹的分析方法去進行拆解分析,去發(fā)現(xiàn)自己提升的空間。

如上圖,就是邏輯樹最簡單的一種場景應用。確定目標后向下進行拆分,拆分出三級邏輯樹是比較容易的,甚至你可以沿著已經(jīng)列出來的大綱繼續(xù)深入細化,再拆分出更細更深層的各種提升點。

邏輯樹分析法在個人作品中的主要作用是發(fā)散思維;在實際工作中的作用則是針對特定問題進行分析,理清思路??偠灾?,是讓你在分析的過程中更加有條理,避免重復思考。但是邏輯樹分析也有一個缺陷,就是在邏輯樹分析的過程中,根據(jù)現(xiàn)象分裂出子層級的步驟十分依賴你的認知能力,就如同做設計一樣,當你感覺界面的視覺出現(xiàn)問題的時候,需要利用你學出來的知識去進行視覺優(yōu)化,如果你對設計理論知識掌握程度并不是很強,那就不能采用邏輯樹分析法解決問題。

總而言之,邏輯樹分析法適用于對問題研究十分深入的情況下,如果你對當前的環(huán)境認知并不充足,那么就很容易走入歪路,跑偏主題。

實際項目:用戶調(diào)研訪談

在一些實際項目中,用戶調(diào)研是需求來源的主要渠道。提起用戶調(diào)研,很多人會覺得這不屬于 UI設計師應該做的事情。其實行業(yè)逐漸規(guī)范的現(xiàn)在,用戶調(diào)研、分析需求的能力也成為了衡量 UI設計師能力的一個標準?,F(xiàn)在的互聯(lián)網(wǎng)產(chǎn)品種類繁多,從早期只做主流行業(yè),到現(xiàn)在基本所有的冷門行業(yè)都有涉及。作為設計者,大多數(shù)設計師已經(jīng)開始在設計的過程中心有余而力不足。

造成這種現(xiàn)象的主要原因是隨著行業(yè)的細分以及范圍的擴大,我們距離用戶的真實場景偏離太遠,導致我們在設計中很容易理所當然地賦予給用戶大量無用的東西,偏離了用戶所需要的主要軌道。因此對于很多的設計師來說,學會了解用戶以及分析需求成為了十分重要的事情。

下面是我整理的在用戶調(diào)研過程中的幾點認知。

1. 保證調(diào)研的目標的準確性

我們需要明確,我們希望通過調(diào)研達到怎樣的目的?例如:提升部分頁面轉化率,收集用戶對于產(chǎn)品不滿意的地方,通過用戶使用產(chǎn)品發(fā)現(xiàn)用戶潛在的痛點。

2. 有目標的選擇用戶

一般來講互聯(lián)網(wǎng)公司都有收集客戶反饋的部門,他們掌握著所有客戶的反饋意見。我們在選擇調(diào)研用戶的時候,最好可以根據(jù)我們在調(diào)研行動確立初期擬定的目標去選擇調(diào)研目標。

3. 適當?shù)臏蕚湔{(diào)研內(nèi)容

當我們確定了調(diào)研目標和調(diào)研用戶之后,就可以根據(jù)現(xiàn)有狀況去準備調(diào)研內(nèi)容。調(diào)研內(nèi)容一定是要在事先擬定好(開始調(diào)研之后根據(jù)實際情況進行改動)。

一般市場調(diào)研細分的維度通常有四種,分別是:地理、人口統(tǒng)計、行為、心理統(tǒng)計。運用在互聯(lián)網(wǎng)產(chǎn)品里面就更加的復雜。以B端產(chǎn)品為例:我們在調(diào)研中可能要把調(diào)研對象分為客戶(老板)和用戶(業(yè)務員)去進行不同情況的信息跟蹤,而且根據(jù)產(chǎn)品的屬性不同,需要提前預設好調(diào)研內(nèi)容的側重。

4. 調(diào)研過程中

在調(diào)研過程中,我們可以適當結合上文講述到的「空雨傘」方式去進行調(diào)研觀察,收集用戶需求。

在調(diào)研過程中,除了思考之外更多需要注意的是對用戶洞察的記錄與剖析,在記錄用戶行為的過程中,需要遵循「不干擾」、「不引導」、「記錄客觀」等原則,這樣才可以保持用戶行為記錄的準確性。

5. 獲取反饋整理結果

在調(diào)研結束后,我們應該產(chǎn)出一份完整的調(diào)查報告,按照本次調(diào)研預設目標進行整理,規(guī)劃出合適的大綱,把調(diào)研收獲轉化為明確的產(chǎn)出,產(chǎn)出形式最好以報告(PPT、PDF),而不是口述或者微信消息,這兩者之間差別很大。

需求歸類:KANO模型

雖然說現(xiàn)在很多的公司都開始建立了用戶體驗類的部門,但是因為用戶調(diào)研或者體驗類的工作很難去量化產(chǎn)出。而且在大部分情況下當產(chǎn)品按照用戶調(diào)研反饋的結果進行調(diào)整后,往往很少會出現(xiàn)我們幻想中的「逆襲」、「口碑急劇上升」,有時還會因為受到一部分用戶觀點的帶偏導致產(chǎn)品口碑下降,用戶表示不滿;又或者會出現(xiàn)需求級規(guī)劃混亂,重要功能反而后上線這種尷尬的情況。

所以這驅(qū)使著團隊中負擔「用戶體驗」職能的角色對用戶需求進行正確的分類和排序。

這個時候就可以運用到卡諾模型(KANO模型)。

KANO模型是東京理工大學教授狩野紀昭(Noriaki Kano)發(fā)明的對用戶需求分類和優(yōu)先排序的有用工具,以分析用戶需求對用戶滿意的影響為基礎,體現(xiàn)了產(chǎn)品性能和用戶滿意之間的非線性關系。根據(jù)不同類型的質(zhì)量特性與用戶滿意度之間的關系,狩野教授將產(chǎn)品服務的質(zhì)量特性分為五類。

1. 基本型需求

用戶對企業(yè)提供的產(chǎn)品或服務因素的基本要求。是用戶認為產(chǎn)品「必須有」的屬性或功能。當其特性不充足(不滿足顧客需求)時,用戶很不滿意;當其特性充足(滿足用戶需求)時,用戶也可能不會因而表現(xiàn)出滿意。對于基本型需求,即使超過了用戶的期望,但用戶充其量達到滿意,不會對此表現(xiàn)出更多的好感。

例如對于網(wǎng)盤類產(chǎn)品來說,用戶的基本需求是能快速地上傳和下載。如果下載速度達不到用戶的期望,則用戶滿意度將一落千丈。對于顧客而言,這些需求是必須滿足的,理所當然的。對于這類需求,企業(yè)的做法應該是注意不要在這方面失分,需要企業(yè)不斷地調(diào)查和了解顧客需求,并通過合適的方法在產(chǎn)品中體現(xiàn)這些要求。

2. 期望型需求

提供該功能,用戶滿意度提高,如果不提供該功能,用戶會感覺到不滿。當然在這里要補充一句,這里的需求并不都是我們整理出的主觀需求,也有可能是用戶在使用的過程中產(chǎn)生的客觀類需求,例如遇到不會的體驗,需求得到響應時我們給的反饋。

例如對于一些 O2O類的產(chǎn)品,雖然做的都比較成熟,但是由于體量龐大的原因,偶爾也會受到糟糕的體驗,用戶在受到糟糕的體驗之后往往會期望能通過反饋得到心理上的安慰。例如攜程(旅程預計時間偏差)、美團(酒店體驗差)、餓了么(用餐體驗差)等。在用戶遇到這種糟糕體驗之后,期望能通過投訴建議獲得官方的反饋,那么官方把這種問題解決的越圓滿,用戶的滿意度也會隨之提高。

3. 興奮型需求

興奮型需求又稱魅力型需求,指的是不會被用戶過分期望的需求。對于興奮型需求,隨著滿足用戶期望程度的增加,用戶滿意度也會急劇上升,但一旦得到滿足,即使表現(xiàn)并不完善,用戶表現(xiàn)出的滿意狀況也是非常高的。反之,即使在期望不滿足時,用戶也不會因而表現(xiàn)出明顯的不滿意。

4. 無差異型需求

不論提供與否,對用戶體驗無影響。是質(zhì)量中既不好也不壞的方面,它們不會導致顧客滿意或不滿意。

5. 反向型需求

用戶沒有這個需求,提供后用戶滿意度反而會下降。

按照 KANO模型分析可以對收集到的產(chǎn)品需求進行分類,篩選掉一些不合理的需求。更好更有目的性的完成產(chǎn)品待辦清單的記錄。

最后

對于設計師來講,不管是個人設計練習還是團隊項目,都應該掌握一定的產(chǎn)品需求收集和分析的方法。如果你真的下定決心要向交互設計、用戶體驗方向發(fā)展,那就更需要下定一些功夫去學習相關的知識,學會形成自己的思考方法。一開始可能會很痛苦很累,但是如果一味的試圖走捷徑,最后只會得不償失。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。


輕量級的時尚主題

用心設計

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

 

目前從官方介紹來看,UI組件還相當齊全,可用它來快速搭建漂亮、時尚的網(wǎng)頁和UI設計作品,下面一起來看看介紹。

bootstrap 4 主題:shards

關于 Shards 這個主題雖然免費,但并不代表它只有「表面」,制作者還為性能性能考慮,壓縮版僅12KB大小,實在太好了,以這樣的大小,制作出來的網(wǎng)頁直接能秒開。

它并不是直接使用 Bootstrap 的設計樣式,所有的組件都是重新設計,以便得到統(tǒng)一的風格!

著陸頁演示

這是非常不錯的UI KIT素材 ,它還包含了10個額外的自定義組件,可以讓使用者快事制作著陸頁。

演示地址:https://designrevision.com/demo/shards/extra/app-promo.html

演示地址:https://designrevision.com/demo/shards/extra/agency-landing.html

UI 組件演示

Shards 含有豐富的 UI 組件,網(wǎng)頁端常用的元素幾乎包含了,大方便用戶自由定制。

顏色:

字體

圖標支持900+ Material icons 和 Font awesome 兩大圖標庫!

表單上的細節(jié),也不容忽視:

還有日期組件的設計:

卡片

按鈕

導航菜單

我想這些漂亮的元素,已經(jīng)足夠你設計一般的網(wǎng)頁,即使不夠,也完全可以自己利用 Sketch 源文件或 HTML 模板再創(chuàng)作。

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

交互設計、人機交互、用戶體驗設計三者有何異同

資深UI設計者

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

本文將從歷史沿革、現(xiàn)有狀況、未來發(fā)展三個方面,對交互設計,人機交互,用戶體驗設計進行詳細分析。

關鍵詞:交互設計,人機交互,用戶體驗設計。

在學習和生活中,我們經(jīng)常會遇到三個名詞:“交互設計”,“人機交互”,“用戶體驗設計”。這三個名詞是否是同一個意思呢?如果不是,他們的異同點又是什么呢?本文嘗試從歷史沿革,現(xiàn)有狀況,未來發(fā)展三個方面,對這交互設計,人機交互,用戶體驗設計進行分析。

一、歷史沿革

1.1 交互設計起源

交互設計起源于網(wǎng)站設計和圖形設計,但現(xiàn)在已經(jīng)成長為一個獨立的領域。現(xiàn)在的交互設計師遠非僅僅負責文字和圖片,而是負責創(chuàng)建在屏幕上的所有元素,所有用戶可能會觸摸,點按或者輸入的東西:簡而言之,產(chǎn)品體驗中的所有交互。

淺析交互設計,人機交互,用戶體驗設計三者的異同

 圖1.1 比爾.摩格理吉

交互設計在于定義人造物的行為方式(the “interaction”,即人工制品在特定場景下的反應方式)相關的界面。

交互設計作為一門關注交互體驗的新學科在二十世紀八十年代產(chǎn)生了,它由IDEO的一位創(chuàng)始人比爾·摩格理吉(Bill Moggridge)在1984年一次設計會議上提出,他一開始給它命名為“軟面(Soft Face)”,由于這個名字容易讓人想起和當時的玩具“椰菜娃娃(Cabbage Patchdoll)”,他后來把它更名為“Interaction Design”,即交互設計。

1.2 人機交互起源

1959年美國學者B.Shackel從人在操縱計算機時如何才能減輕疲勞出發(fā),提出了被認為是人機界面的第一篇文獻的關于計算機控制臺設計的人機工程學的論文。

1960年,Liklider JCR首次提出人機緊密共棲(Human-Computer Close Symbiosis)的概念,被視為人機界面學的啟蒙觀點。

1969年在英國劍橋大學召開了第一次人機系統(tǒng)國際大會,同年第一份專業(yè)雜志國際人機研究(IJMMS)創(chuàng)刊??梢哉f,1969年是人機界面學發(fā)展史的里程碑。

淺析交互設計,人機交互,用戶體驗設計三者的異同

 圖1.2 人機工程學

在1970年成立了兩個HCI研究中心:一個是英國的Loughbocough大學的HUSAT研究中心,另一個是美國Xerox公司的Palo Alto研究中心。

1970年到1973年出版了四本與計算機相關的人機工程學專著,為人機交互界面的發(fā)展指明了方向。

20世紀80年代初期,學術界相繼出版了六本專著,對的人機交互研究成果進行了總結。

人機交互學科逐漸形成了自己的理論體系和實踐范疇的架構。

理論體系方面,從人機工程學獨立出來,更加強調(diào)認知心理學以及行為學和社會學的某些人文科學的理論指導;實踐范疇方面,從人機界面(人機接口)拓延開來,強調(diào)計算機對于人的反饋交互作用。人機界面一詞被人機交互所取代。HCI中的I,也由Interface(界面/接口)變成了Interaction(交互)。

1.3 用戶體驗設計

淺析交互設計,人機交互,用戶體驗設計三者的異同

圖1.3 唐納德.諾曼

用戶體驗這個詞最早被廣泛認知是在上世紀90年代中期,由用戶體驗設計師唐納德·諾曼(Donald Norman)所提出和推廣。身為電氣工程師和認知科學家的Don

Norman加盟蘋果公司之后,幫助這家傳奇企業(yè)對他們以人為核心的產(chǎn)品線進行研究和設計。而他的職位則被命名為“用戶體驗架構師”(User Experience Architect),這也是首個用戶體驗職位。

1.4 歷史沿革分析結論

由上述資料不難看出:交互設計這個名詞起源于計算機領域,軟件專家在進行設計時發(fā)現(xiàn)人和計算機的交互產(chǎn)生許多問題,于是交互設計這一名詞應運而生。人機交互則是由人機工程學發(fā)展而來,是以人與機器的關系為切入點開始進行研究的。和交互設計與人機交互這兩個名詞不同,用戶體驗是以心理學和認知科學為基礎提出的,從心理學和認知科學的角度對人和外界環(huán)境的關系進行探討。

二、現(xiàn)狀

2.1 定義整理

在這里,首先整理出權威的交互設計,人機交互,用戶體驗的定義。

交互設計:英文叫做Interaction Design。

交互設計是指設計人和產(chǎn)品或服務互動的一種機制 , 以用戶體驗為基礎進行的人機交互設計是要考慮用戶的背景、使用經(jīng)驗以及在操作過程中的感受,從而設計符合最終用戶的產(chǎn)品,使得最終用戶在使用產(chǎn)品時愉悅、符合自己的邏輯、有效完成并且是使用產(chǎn)品。

交互設計的目的是使產(chǎn)品讓用戶能簡單使用。任何產(chǎn)品功能的實現(xiàn)都是通過人和機器的交互來完成的。因此,人的因素應作為設計的核心被體現(xiàn)出來[1]。

人機交互:人機交互(Human-Computer Interaction, 簡寫HCI):是指人與計算機之間使用某種對話語言,以一定的交互方式,為完成確定任務的人與計算機之間的信息交換過程。有很多著名公司和學術機構正在研究人機交互。在計算機發(fā)展歷史上,人們很少注意計算機的易用性?,F(xiàn)在,很多計算機用戶抱怨計算機制造商在如何使其產(chǎn)品“用戶友好”這方面沒有投入足夠的精力[2]。

用戶體驗:英文叫做User Experience,縮寫為UE, 或者UX。

它是指用戶訪問一個網(wǎng)站或者使用一個產(chǎn)品時的全部體驗。他們的印象和感覺,是否成功,是否享受,是否還想再來/使用。他們能夠忍受的問題,疑惑和BUG的程度[3]。

2.2 分析和結論

由交互設計,用戶體驗,人機交互三者的定義可以得出:在現(xiàn)階段,交互設計,用戶體驗,人機交互都有研究人和外界環(huán)境關系的含義。但相對而言,交互設計研究的是人和產(chǎn)品互動的機制。人機交互研究的是人和計算機的對話過程。用戶體驗研究的是研究用戶訪問產(chǎn)品時的體驗。從研究對象廣度上說:用戶體驗》人機交互》交互設計。這三者既有相似之處,也有不同之處可以得出分析圖如下:

淺析交互設計,人機交互,用戶體驗設計三者的異同

圖2.1 交互設計,用戶體驗,人機交互三者之間的關系

2.3 數(shù)據(jù)分析

淺析交互設計,人機交互,用戶體驗設計三者的異同

圖2.2 交互設計,人機交互,用戶體驗在媒體中出現(xiàn)頻率(數(shù)據(jù)來源:百度指數(shù))

由圖2.2可知,從2011年到2018年九月,在交互設計,人機交互,用戶體驗三個詞中,媒體報道最多的詞匯是用戶體驗,其次為人機交互,最后為交互設計。作為一個互聯(lián)網(wǎng)名詞,用戶體驗傳播最廣,人們對于它也更為了解。而人機交互和交互設計則在一定程度上屬于專業(yè)名詞,還尚不為人們所熟知。

三、未來發(fā)展

3.1 數(shù)據(jù)分析

人工智能是近年來新出現(xiàn)的名詞,這里結合人工智能對交互設計,人機交互,用戶體驗的發(fā)展趨勢進行分析。

淺析交互設計,人機交互,用戶體驗設計三者的異同

圖3.1 人工智能與三個詞的匹配程度(數(shù)據(jù)來源:百度指數(shù))

要結合人工智能對交互設計,人機交互,用戶體驗發(fā)展趨勢進行分析,就要看,三個詞匯中哪個詞與人工智能的相關度最高,當用戶搜索“人工智能”的同時搜索“用戶體驗”,就說明“人工智能”和“用戶體驗”存在相關性。在這里收集了用戶搜索“人工智能”和“交互設計”;搜索“人工智能”和“人機交互”;搜索“人工智能”和“用戶體驗”的數(shù)據(jù),用以研究人工智能和這三者的相關性。

由圖3.1可知,人工智能與交互設計的相關性最強(用戶搜索人工智能的同時搜索交互設計的數(shù)量最多),其次為用戶體驗,最后為人機交互。

下邊從時間維度分析人工智能與三個詞匯的相關性變化

淺析交互設計,人機交互,用戶體驗設計三者的異同

圖3.2 人工智能和三個詞的搜索指數(shù)變化(數(shù)據(jù)來源:百度指數(shù))

由圖3.2可知,隨著時間的推移,人工智能與用戶體驗,人機交互,交互設計的相關性越來越明顯(當人工智能搜索量增加時,用戶體驗,人機交互,交互設計的搜索量也增加)。

3.2 結論

隨著時間的推移,人工智能與用戶體驗,人機交互,交互設計的相關性逐漸增強。其中,人工智能與交互設計的相關性最強。


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。

 

用迪士尼動畫原則,提升UI動效體驗

用心設計

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

 

迪士尼動畫的12條原則是設計師必須要掌握的經(jīng)典指導性原則,是由Ollie Johnston和Frank Thomas在他們的書《The Illusion of Life》中提出來的觀點(譯者注:這本書在豆瓣的評分有9.3分,值得一看)。這些原則最初是用來為動畫片這種傳統(tǒng)的形式設計的,然而,這些原則也同樣適用于UI設計。所以,我想在這里做一個有趣的嘗試,看能否將這些動畫原則聯(lián)系起來。

用迪士尼動畫原則,提升UI動效體驗

一、擠壓和拉伸

在動畫中,擠壓和拉伸代表了物體的重力,質(zhì)量,重量和靈活性。舉例來說,當一個彈球在它撞擊地面時會發(fā)生形態(tài)變化,就是擠壓和拉伸。

在界面中,擠壓和拉伸很容易就聯(lián)想到按鈕。當一個按鈕被按下時,就可以理解為受到了擠壓,通過控制按鈕的擠壓和拉伸,我們可以很輕易的做好一個按鈕的交互動畫。除了按鈕之外,這種原則也可以應用于UI中的任何交互元素上。

按鈕在交互時的擠壓和拉伸

擠壓和拉伸被應用于側邊欄

二、預期動作

讓觀眾能預先知道接下來將會發(fā)生什么,它是先于下一步會發(fā)生的動作。舉例來說,迪士尼動畫里經(jīng)常有從高空往下跳躍時會先彎曲膝蓋再跳、正在跑步的人要停止跑步前會逐漸變慢步伐等等。

在界面中,懸停狀態(tài)就是很好的例子。當我們把鼠標懸停在元素上時,元素會提供反饋,表明它是可以點擊的,并且在點擊時,又會有一些別的反饋。

懸停的交互通常會暗示這個按鈕是可以點的

在有水平滾動界面里,通常在交互時會顯示下一個元素的部分內(nèi)容。這其實是一個很好的例子,因為它是在告知用戶下一步的一些信息。

三、時間節(jié)奏

在傳統(tǒng)動畫中,時間會決定關鍵幀的繪制方式。幀數(shù)越多,動畫就越流暢,同時也更慢,時間能夠給動畫賦予情緒和性格。

時間的節(jié)奏感是任何動畫的基礎,速度在元素編排中起著非常重要的作用。速度太慢,用戶會不耐煩,速度太快,用戶又會錯過一些內(nèi)容。一般來說,大多數(shù)UI動畫在200-600ms之間,其中懸停和反饋交互時長大約為300ms,精細的轉場動畫大約在500ms。也可以去參考谷歌的動畫規(guī)范(https://material.io/design/motion/speed.html#duration),里面非常詳細的解釋了每種動畫類型的持續(xù)時間。

一些設計系統(tǒng),如Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把運動的節(jié)奏感視為一個很重要的方面,并為每種類型的過渡都制定了嚴格的規(guī)范。

右邊的過渡動畫顯得太過于漫長,繁瑣。

四、漸快與漸慢

在現(xiàn)實世界中,大多數(shù)物體都遵循著緩動運動規(guī)律。也就是說,物體的運動并不會瞬間開始或瞬間結束,就像一個物體自由落體,也是一開始很慢后面才變會變快。

左側的卡片是沒有緩動的,右側的是帶有緩動的,看起來會自然很多。

給UI中的元素加上緩動會讓它看起來更加自然,緩動和節(jié)奏感都是可以有效的提升動畫的品質(zhì)。

五、呈現(xiàn)方式

舞臺中的表演需要合適的編排才會精彩。也就是說,對象在場景中如何擺放,每個動畫又如何出現(xiàn),關乎演出的質(zhì)量。通過這種編排,能夠?qū)⒆⒁饬σ蜃钪匾慕巧?

在界面中,呈現(xiàn)方式能夠決定元素的位置,以及在交互時,它應該如何編排才能將用戶的注意力引向預期的元素。

比如現(xiàn)在有一個基于興趣的音樂APP,對這個應用來說,最重要的事就是讓動畫引導用戶選擇他們所喜歡的音樂。因此,有必要將類似的操作與其他元素分開編排,有目的的引導用戶。

六、弧形軌跡

一個從高處拋出的小球,運動軌跡會做拋物線軌跡運動,弧線能使物體的運動更加自然。

在界面中,沿著對角線的元素沿著弧線軌跡將會使運動變得更加自然。當需要凸顯出元素的運動路徑時,多嘗試使用弧線軌跡。

通過對比,能夠發(fā)現(xiàn)右側的弧線運動軌跡會比左側的直線運動軌跡顯得更加自然。

七、附屬動作

在動畫中,次要動作能夠起到烘托主要動作,比如動畫中的角色在走路時,頭部的晃動就是次要動作,卻能夠讓角色行走顯得更加自然。

在界面中,次要操作能夠起到強化關鍵動作,當元素需要向用戶提供反饋時,這個方法非常管用。所有的微交互都是基于這個附屬動作原理。

按鈕邊上的粒子效果強化了主按鈕的點擊效果

八、夸張和吸引力

場景中的重要角色通常會采用一些比較夸張的動作來獲得更多的注意力。

在界面中,重要的交互也會通過一些夸張的動畫來引起用戶的注意。谷歌設計規(guī)范中的FAB按鈕就是一個很好的例子,F(xiàn)AB按鈕在不動的時候也比較能引起注意,因為它通常會帶有比較鮮明的顏色,并且是獨立懸浮在界面元素之上的。當它被點擊時,F(xiàn)AB的動畫被放大,把整個界面都占滿,使得它完全占據(jù)用戶的注意力。

FAB 夸張的交互形式

對于支付這么重要功能的按鈕,通過夸張的動效引起用戶的注意

九、跟隨動作和重疊動作

想象一只兔子從高處跳下來,當兔子開始起跳時,它的耳朵動作會與身體動作發(fā)生錯位。然后當它著陸時,它的身體停下來了,但是耳朵還在動。前者稱之為跟隨動作,后者被稱為重疊動作。其原理說的就是:沒有任何一種物體會突然停止,物體的運動是一個部分接著另一個部分的。

在界面中,可以使元素在停止之前超過它們原本的位置,使得元素運動更加自然。(譯者注:大白話就是我們常說的回彈效果。)

界面有一定的回彈,會顯得更加自然。

當界面滾動時,文字會跟隨圖片的運動,圖片與文字以不同的速度運動會更加自然。(譯者注:像是被拖著走的那種感覺)

總結

界面中的每一次交互都必須在適當?shù)膱鼍爸芯脑O計,讓整個體驗更具沉靜感。在正確的地方使用這些原則能夠確保產(chǎn)品中的交互體驗更加協(xié)調(diào)自然。

這些原則正在以不同的形式應用于當今的數(shù)字產(chǎn)品中,值得敬畏的是,30年前設計的一套規(guī)則到今天仍然適用。

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

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔