交互設(shè)計(jì)師應(yīng)具備的技能樹(4)| 交互設(shè)計(jì)師的視覺思維

2 評(píng)論 10241 瀏覽 66 收藏 28 分鐘

一個(gè)好的設(shè)計(jì),要兼顧可視性和易通性。所謂可視性,就是讓用戶知道這個(gè)產(chǎn)品怎么用,怎么操作才是合理的。所謂易通性,就是要讓用戶明白你的設(shè)計(jì)意圖,明確地告訴用戶,你設(shè)計(jì)的這個(gè)東西是干什么用的。

——唐納德·諾曼,《設(shè)計(jì)心理學(xué)》

交互設(shè)計(jì)師為什么要會(huì)視覺?不就是畫一個(gè)黑白稿,上面都是線線框框的,寫個(gè)標(biāo)注就搞定的事情,剩下的美化交給視覺設(shè)計(jì)師去做不就好了?

如果你真的這么想,那你可能還沒有理解交互設(shè)計(jì)師這個(gè)職業(yè)的重要性,也忽略了交互稿中所能傳達(dá)出來的龐大信息量。

交互稿作為產(chǎn)品從概念到實(shí)現(xiàn)的第一版原型,它需要承擔(dān)的是產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)對(duì)于這款產(chǎn)品的底層設(shè)計(jì)理念,它的設(shè)計(jì)過程需要凝結(jié)交互設(shè)計(jì)師大量的思考和心血,并不是那么容易就能做好的。

交互稿的定義過程:

  1. 定義形式要素、姿態(tài)和輸入方法;
  2. 定義功能性和數(shù)據(jù)元素;
  3. 確定功能組和層級(jí);
  4. 勾畫交互框架;
  5. 構(gòu)建關(guān)鍵線路情景劇本;
  6. 運(yùn)用驗(yàn)證性場(chǎng)景來檢查設(shè)計(jì)。

回顧上面的過程,1~5都要用到一定的視覺思維,這還真不是一個(gè)純邏輯的事情。一個(gè)優(yōu)秀的交互設(shè)計(jì)師,他做出的交互稿不僅邏輯清晰,能讓人一眼就看出每個(gè)界面的視覺重點(diǎn)、信息層級(jí),同時(shí)還標(biāo)出了用戶使用的流程步驟、轉(zhuǎn)場(chǎng)動(dòng)畫形態(tài),直接把整個(gè)產(chǎn)品的完整形態(tài)展開在你的面前,一切了然于胸。

視覺思維同樣也是交互設(shè)計(jì)師的靈魂技能,只不過側(cè)重點(diǎn)不同。但視覺思維中所包含的概念和方法實(shí)在是太多了,我在構(gòu)思今天這篇文章的時(shí)候,足足花了兩個(gè)多小時(shí)才想好這個(gè)提綱,把所有交互設(shè)計(jì)師會(huì)用到的視覺理念最終融合到三個(gè)角色中,理解起來就相對(duì)容易了。

視覺思維的三位角色:

  1. 建筑師:他賦予界面藍(lán)圖中每個(gè)模塊在這里的理由;
  2. 解說員:他讓用戶看到界面后自然就知道如何使用;
  3. 漫畫家:他會(huì)和你對(duì)話、給你反饋,還會(huì)講故事。

一、勾畫藍(lán)圖的建筑師

場(chǎng)景

在開始設(shè)計(jì)界面之前,先想好以下幾個(gè)問題:

  1. 這個(gè)界面是在什么設(shè)備上(Web、手機(jī)、電視)呈現(xiàn)的,它的分辨率是多少,適合的字體大小和最小點(diǎn)擊區(qū)域是多大;
  2. 用戶在什么場(chǎng)景下使用這個(gè)界面,是坐在電腦前、走在路上、躺在沙發(fā)上還是在開車途中?
  3. 用戶的基本輸入方式是什么,是鼠標(biāo)鍵盤還是觸摸屏,或者是電視遙控器?
  4. 用戶是怎么進(jìn)入到這個(gè)界面的,它的上下文界面(Context Interface)各是什么?

如果你沒有思考過上面四個(gè)問題就開始設(shè)計(jì),很可能犯一些基本的錯(cuò)誤:比如為高分辨率屏幕的手機(jī)設(shè)計(jì)了一個(gè)文字小到看不清的界面,或者是要用鼠標(biāo)才能點(diǎn)到的汽車中控臺(tái)界面,這是要讓人難受死么?

交互設(shè)計(jì)師也要考慮場(chǎng)景,為的就是不要設(shè)計(jì)出一個(gè)看起來合理,但實(shí)際上沒法使用的產(chǎn)品。

區(qū)塊

“設(shè)計(jì)關(guān)注的是最適于傳達(dá)某些信息的呈現(xiàn)方式?!?/strong>

——?jiǎng)P文·米萊、達(dá)雷爾·薩諾,《設(shè)計(jì)視覺界面》

界面設(shè)計(jì)是一個(gè)和信息打交道的工作,你所要展現(xiàn)給用戶看到的一切功能其實(shí)都是信息的組合,這種組合的最小單元我稱之為區(qū)塊(Block)。

以我們常用的微信首頁為例,這里有我們最近聊天的聯(lián)系人和群聊的會(huì)話列表,那每一個(gè)會(huì)話區(qū)塊是怎么構(gòu)成的呢?

這看起來再簡(jiǎn)單不過的會(huì)話區(qū)塊其實(shí)包含了很多信息,比如你看到聯(lián)系人頭像就可以快速辨別每個(gè)聯(lián)系人,比如你需要看到你和她的最近聊天記錄,還需要知道她是什么時(shí)候給你發(fā)的——不好,現(xiàn)在都五點(diǎn)了我還沒回老婆消息,死定了!

當(dāng)你花費(fèi)一定心思組合好這些元素之后,一個(gè)簡(jiǎn)單的區(qū)塊就完成了。

這時(shí)候下一個(gè)問題來了,如果是一個(gè)群聊會(huì)話怎么辦?

你需要做一些修改:

  1. 群聊是多個(gè)人的會(huì)話,所以頭像就不是特定的某個(gè)人,畫一個(gè)代表群聊的圖標(biāo)行不行?不好,這樣每個(gè)群聊都一樣,沒有辨識(shí)度了??梢园呀M成群聊的成員頭像組合起來,這樣至少能大概認(rèn)得出其中的主要成員;
  2. 群聊有時(shí)候會(huì)被屏蔽,這樣是降低騷擾了,但是有未讀消息又希望有標(biāo)記,于是可以把數(shù)字改成一個(gè)小紅點(diǎn);
  3. 既然消息被屏蔽了,那就得有個(gè)提示,加上個(gè)圖標(biāo);
  4. 最近聊天記錄要加上聯(lián)系人名,否則不知道是群聊里的誰發(fā)的。

好了,只做了簡(jiǎn)單的幾步修改,這個(gè)區(qū)塊就變成了另外一個(gè)功能,但是還保持了原來的格式,皆大歡喜。

這像不像是在設(shè)計(jì)建筑圖上的一個(gè)個(gè)房間?

每一個(gè)區(qū)塊都有各自的信息內(nèi)容,也有各自需要完成的功能,還有很多形態(tài)的衍生和狀態(tài)的變化,這都是需要交互設(shè)計(jì)師提前考慮好的事情。

布局

既然是建筑師,當(dāng)然不能只設(shè)計(jì)一堆房間了事,他還需要根據(jù)整個(gè)建筑的面積和形狀合理安排這些房間的布局,那這個(gè)布局有什么原則呢?

我推薦知名設(shè)計(jì)師Robin Williams寫的這本《寫給大家看的設(shè)計(jì)書》,簡(jiǎn)單易懂又威力強(qiáng)大。

設(shè)計(jì)的四大基本原則:

  1. 對(duì)比(Contrast):如果元素(字體、顏色、大小、形狀、線寬、空間等)不相同,那就干脆讓它們截然不同;
  2. 重復(fù)(Repetition):讓設(shè)計(jì)中的視覺要素在整個(gè)產(chǎn)品中重復(fù)出現(xiàn),既能增加條理性和統(tǒng)一性,也能降低認(rèn)知成本;
  3. 對(duì)齊(ALignment):每個(gè)元素都應(yīng)當(dāng)與頁面上的另一個(gè)元素有某種視覺聯(lián)系,任何東西都不能在頁面上隨意安放;
  4. 親密性(Proximity):彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近和歸組在一起,組成區(qū)塊或者區(qū)塊組,減少混亂,提供清晰的結(jié)構(gòu)。

這些原則實(shí)際上是互相關(guān)聯(lián)的,很少僅僅只用某一個(gè)原則,同時(shí)它們不僅在布局階段要用到,其實(shí)你在設(shè)計(jì)每個(gè)區(qū)塊的時(shí)候就已經(jīng)開始用了,整齊好看、對(duì)比鮮明的功能區(qū)塊無疑能夠?yàn)槟愕脑O(shè)計(jì)大大加分。

隨手畫了一個(gè)微信首頁的布局交互稿,里面的內(nèi)容就不細(xì)化了,你可以明顯地看到上面這四個(gè)設(shè)計(jì)原則的應(yīng)用,一個(gè)個(gè)區(qū)塊就這么妥善安放好了。

層級(jí)和瞇眼測(cè)試

布局階段,最重要的事情除了保證頁面元素的美觀和易讀,還有一個(gè)就是要注意元素間的層級(jí)是否合適。拿剛才微信首頁的例子來說,首頁最重要的元素是什么?

  1. 頁面標(biāo)題
  2. 未讀消息數(shù)
  3. 未讀的會(huì)話

設(shè)計(jì)師有一個(gè)通用的檢查層級(jí)的方法,叫做“瞇眼測(cè)試”(Squint Test)——閉上一只眼睛,瞇著另一只眼睛看屏幕,看看哪些元素突出,哪些元素模糊,哪些元素看上去分組了(親密性和區(qū)塊)。只要改變一下看問題的角度,你就能發(fā)現(xiàn)此前沉迷于細(xì)節(jié)時(shí)未曾發(fā)現(xiàn)的布局和構(gòu)成問題。

規(guī)律

設(shè)計(jì)中有一些約定俗稱的規(guī)律,比如黃金分割法、網(wǎng)格系統(tǒng)、系統(tǒng)規(guī)范等,遵守這些前人總結(jié)出的規(guī)律能讓你事半功倍,設(shè)計(jì)出更加美觀的界面。同時(shí),你還能通過使用“重復(fù)性”來制造自己的規(guī)律,同樣能提高效率和降低用戶的認(rèn)知成本。

網(wǎng)格系統(tǒng)

網(wǎng)格系統(tǒng)(Grid System)將屏幕分成多個(gè)大的水平和垂直區(qū)域,是幫助你在布局中實(shí)現(xiàn)對(duì)齊和親密性的好工具,無論是在Web還是在APP設(shè)計(jì)中都有比較廣泛的應(yīng)用。設(shè)計(jì)師可以將界面的元素規(guī)則化地布局到網(wǎng)格結(jié)構(gòu)中,適當(dāng)?shù)貜?qiáng)調(diào)高層次元素和結(jié)構(gòu),并為低層次的元素或者次重要的區(qū)塊留出適當(dāng)?shù)目臻g。

系統(tǒng)規(guī)范

系統(tǒng)規(guī)范有人覺得很煩——我愛怎么設(shè)計(jì)就怎么設(shè)計(jì),為什么要你來規(guī)定我?所以在移動(dòng)互聯(lián)網(wǎng)的早期,你的確可以看到大量的不按系統(tǒng)規(guī)范進(jìn)行設(shè)計(jì)的APP,自由是很自由,但是大部分都讓人用起來很bp,更何況每個(gè)應(yīng)用還自成體系,用的交互方式還各不相同,讓人真的有抓狂的感覺。

隨后,人們?cè)絹碓桨l(fā)現(xiàn)系統(tǒng)規(guī)范的好處:你可以從谷歌、蘋果、微軟這些大型互聯(lián)網(wǎng)企業(yè)的設(shè)計(jì)團(tuán)隊(duì)中學(xué)到很多設(shè)計(jì)原則,能節(jié)省很多控件的設(shè)計(jì)成本、提高設(shè)計(jì)和開發(fā)效率,同時(shí)如果大家都用同一套設(shè)計(jì)規(guī)范,那用戶的認(rèn)知和使用成本無疑會(huì)大大降低,何樂而不為?

常用的系統(tǒng)規(guī)范:

iOS的 Do’s and Dont’s?https://developer.apple.com/design/tips/

蘋果的人機(jī)交互指南?https://developer.apple.com/design/

Google Design?https://design.google

微軟的UWP設(shè)計(jì)規(guī)范?https://developer.microsoft.com/zh-cn/windows/apps/design

下半部分

上周介紹了建筑師,這周繼續(xù)介紹其他兩位:解說員和漫畫家。

這次,我想用一個(gè)實(shí)際的產(chǎn)品案例,來講講我和視覺設(shè)計(jì)師Nefish當(dāng)時(shí)是怎么使用這兩種角色理念完成小火箭的2.0改版的。

小火箭是騰訊電腦管家在用戶桌面端的加速小工具,能夠快速地幫用戶清理電腦內(nèi)存、加速電腦,廣受用戶好評(píng),改版前的日使用次數(shù)已經(jīng)超過了一億次,成為了電腦管家和用戶之間的重要連接觸點(diǎn)。

現(xiàn)在我們要對(duì)這款億級(jí)的產(chǎn)品進(jìn)行改版,要如何找到其中的優(yōu)化點(diǎn)呢?

二、教你使用的解說員

解說員(Commentator)指的是那些講解體育比賽和游戲比賽的專業(yè)人員,他們能用專業(yè)的知識(shí)和視角解讀比賽場(chǎng)上的情況、介紹雙方的背景、烘托比賽的氛圍,引導(dǎo)觀眾更好地理解和觀看比賽。

而在產(chǎn)品使用方面的解說員是誰?是產(chǎn)品說明書嗎?是新手引導(dǎo)嗎?它們當(dāng)然有些作用,但是作用最大的還是直接設(shè)計(jì)產(chǎn)品的設(shè)計(jì)師們。

他們可以精心安排界面的呈現(xiàn)方式,讓用戶更好地理解這款產(chǎn)品,甚至愛上它。

注意力

想讓用戶更好地理解產(chǎn)品,設(shè)計(jì)師最需要注意的就是管理用戶使用過程中的注意力。

管理注意力常用的工具有兩種:

  • 基本對(duì)比:大小、形狀、顏色、位置等與眾不同;
  • 動(dòng)作對(duì)比:動(dòng)與靜、動(dòng)作的方向以及動(dòng)作的時(shí)間差。

使用好了這兩種工具,我們可以有目的地引導(dǎo)用戶的注意力,更進(jìn)一步的話,還可以引導(dǎo)他的視線移動(dòng)。

舊版的小火箭,在用戶點(diǎn)擊加速之后,會(huì)展開右側(cè)的“小尾巴”,告知用戶這次加速的結(jié)果。

這是一種從左到右的視線移動(dòng),符合人們正常的閱讀習(xí)慣,似乎沒有什么問題。

但真是如此嗎?

仔細(xì)想想,“小尾巴”似乎有點(diǎn)太長(zhǎng)了,它用了“加速成功!燃燒了83MB內(nèi)存”“發(fā)現(xiàn)x個(gè)無用的殘留進(jìn)程”這樣的整句文字來描述加速結(jié)果,而這個(gè)結(jié)果的展示時(shí)間只有不到2秒,視線的移動(dòng)路徑太長(zhǎng)了不說,閱讀和理解所花費(fèi)的時(shí)間也較長(zhǎng)。

于是我們綜合分析了幾種小火箭的結(jié)果頁面,重新定義了用戶的視線移動(dòng)路徑:

從上圖可以發(fā)現(xiàn),前三類方案大大縮短了用戶的視線移動(dòng)路徑,結(jié)合動(dòng)畫的顯示方式,用戶的閱讀效率大大提高了。

第四類方案是為運(yùn)營(yíng)類消息設(shè)計(jì)的,這類消息顯示的時(shí)間更長(zhǎng),希望用戶完整閱讀所有文字,并且強(qiáng)調(diào)點(diǎn)擊率,因此我們?cè)诒WC信息展示的前提下,控制每個(gè)元素的出現(xiàn)時(shí)差和視覺層級(jí),暗示和引導(dǎo)用戶用“Z字型”的路線來進(jìn)行閱讀。

下圖是第四個(gè)方案的視覺效果,至于前面的那種方案如何呈現(xiàn),我會(huì)在下面的“示能”中進(jìn)行說明。

示能

示能性(Affordance)是心理學(xué)家詹姆斯·吉·布森(James J. Gibson)首次提出,而后由唐納德·諾曼(Donald Norman)博士在《設(shè)計(jì)心理學(xué)》一書中作為重要的設(shè)計(jì)理念引入,它指的是物體呈現(xiàn)出來的屬性讓你自然地明白它的功能,比如一張平面的椅子,你自然知道可以坐。

在實(shí)際的設(shè)計(jì)場(chǎng)景中,我覺得這個(gè)理論可以再細(xì)化,才更具有實(shí)際的指導(dǎo)意義,我叫它——符合直覺的設(shè)計(jì)。

我們要認(rèn)知一個(gè)事物,有兩種不同的思考路徑:

  • 一個(gè)是意識(shí)路徑,我們通過觀察、閱讀和理解,看懂了按鈕上的文字和屏幕上的數(shù)字,用“理性腦”的思考打通意識(shí)環(huán)節(jié),讓信息經(jīng)過整理后觸達(dá)了內(nèi)心。
  • 另一個(gè)是潛意識(shí)路徑,我們通過視覺、聽覺、觸覺等感官感受到了物體的屬性,如可旋轉(zhuǎn)的圓形旋鈕、亮著綠燈的開關(guān)和燃?xì)鉅t火焰的大小,用“感性腦”的感知打通了潛意識(shí)環(huán)節(jié),讓信息通過“直覺”直接觸達(dá)了內(nèi)心。

這兩種路徑不分優(yōu)劣,各有自己的使用場(chǎng)景,但有時(shí)候一些簡(jiǎn)單的信息傳遞,我們更適合通過“潛意識(shí)路徑”進(jìn)行優(yōu)化。

原本加速結(jié)果是用“加速成功!燃燒了83MB內(nèi)存”這么長(zhǎng)的文案來表達(dá)信息,但這里的信息冗余度太高了,其實(shí)只有“83MB”這個(gè)數(shù)字是最有意義的、每次都會(huì)看的,那為什么不把其他不必要的閱讀內(nèi)容用圖形化的方式表現(xiàn)出來呢?

于是我們想到了把“燃燒”這個(gè)詞具象化,變成一團(tuán)火焰,在下方寫上燃燒掉的內(nèi)存值,這樣一來,通過對(duì)注意力的管理和示能的表現(xiàn),用戶感知這一信息的速度就大大加快了。

同理,我們還把“太棒了!電腦已經(jīng)是最快了”這種提示沒有內(nèi)存可優(yōu)化的文案改成了閃閃發(fā)光的獎(jiǎng)杯、掉落的宇航員這類好玩的隨機(jī)獎(jiǎng)勵(lì),讓用戶覺得使用小火箭加速很有意思。

最終效果如上圖。我們還驗(yàn)證了這次改動(dòng)之后用戶對(duì)于結(jié)果頁的理解度,完全理解人的達(dá)到了93%,說明這種大膽的改動(dòng)確實(shí)是可接受的。

基于這個(gè)設(shè)計(jì)理念,我們還為小火箭增加了一個(gè)電腦內(nèi)存占用過高時(shí)的高危提醒態(tài),不是簡(jiǎn)單的用紅色填滿,而是加入了閃電和溢出的感覺,讓用戶一眼就能發(fā)現(xiàn)它、理解它,而且真的很想點(diǎn)……

關(guān)系

人類的視覺是整體的,我們的視覺系統(tǒng)會(huì)自動(dòng)對(duì)視覺輸入構(gòu)建結(jié)構(gòu),并且在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區(qū)域,形狀和圖形在德語中是Gestalt,因此這些理論也就叫做視覺感知的格式塔(Gestalt)原理。

——Jeff Johnson,《認(rèn)知與設(shè)計(jì):理解UI設(shè)計(jì)準(zhǔn)則》

講到設(shè)計(jì)中的關(guān)系,就不得不提到鼎鼎大名的“格式塔原理(Gestalt Principle)”,相信大家都已經(jīng)很熟悉了,我就只列其中和交互最相關(guān)的三條:

  1. 接近原則:元素之間的相對(duì)距離會(huì)影響我們感知它們是否和如何在一起,常用于元素的分組;
  2. 相似原則:那些明顯具有共同特性(如形狀、大小、顏色等)的事物會(huì)被我們的視覺組合在一起,即相似的部分在感知中會(huì)形成若干組;
  3. 共同命運(yùn):一起運(yùn)動(dòng)的物體被感知為屬于一組或者是彼此相關(guān)的。

我們?cè)谠O(shè)計(jì)小火箭的時(shí)候,就有意識(shí)地使用了這個(gè)原理,因?yàn)橛脩酎c(diǎn)擊這個(gè)小火箭控件,是真的會(huì)飛出一個(gè)火箭來的,要怎么讓人感知到這兩者是一個(gè)整體呢?

如上圖,鼠標(biāo)移到這個(gè)控件上的時(shí)候,里面會(huì)先出現(xiàn)一個(gè)“迷你火箭”,開始旋轉(zhuǎn)和飛行,它和我們正式的火箭很像(相似性),讓你對(duì)后面的行為有一個(gè)潛意識(shí)上的心理預(yù)知。

點(diǎn)擊之后,迷你火箭快速向上飛出,正式的火箭接著從下往上飛出來,位置上的一致(接近性)和動(dòng)作上的一致(共同命運(yùn))讓你馬上知道兩個(gè)火箭其實(shí)是一組的,新出現(xiàn)的火箭也就和桌面控件形成了一個(gè)整體。

三、會(huì)講故事的漫畫家

對(duì)話

軟件產(chǎn)品要怎么與用戶對(duì)話?只能用文字語言嗎?

在設(shè)計(jì)師手中,可以用來和用戶對(duì)話的手段有很多,最基本的就是——操作反饋。

這種反饋可以是你鼠標(biāo)移上去之后一個(gè)小巧的Hover動(dòng)畫,也可以是點(diǎn)擊之后飛出來一個(gè)小火箭,還可以是超出你預(yù)期的一個(gè):

平時(shí)有什么節(jié)日或者大事件,我們會(huì)給你的小火箭換一套節(jié)日皮膚,但是在一些特殊的日子(比如你的生日),我們?yōu)槭裁床荒芙o你制造一點(diǎn)小驚喜呢?

這就是小火箭的“音爆彩蛋”的設(shè)計(jì)初衷,也是它與用戶的一次暖心對(duì)話。

分鏡

漫畫家會(huì)精心設(shè)計(jì)每一頁的分鏡構(gòu)成,讓你雖然看的是紙質(zhì)漫畫,卻能通過“腦補(bǔ)”形成一系列真正的動(dòng)態(tài)畫面,以致于屏息凝神,為劇情所深深吸引。

而交互設(shè)計(jì)這個(gè)職業(yè)的有趣之處也正在此,我們畫的雖然不是漫畫,卻需要設(shè)計(jì)在用戶操作之后,軟件所觸發(fā)的每一個(gè)動(dòng)作,分解到具體的每一步。

(上圖是小火箭托盤形態(tài)的部分交互稿)

你思考得越多、越深入,你就越能夠體察用戶當(dāng)時(shí)的使用場(chǎng)景,也就越能夠設(shè)計(jì)出讓用戶感到體貼、感到自然、感到有意思的產(chǎn)品。

所以我推薦交互設(shè)計(jì)師都應(yīng)該學(xué)一點(diǎn)漫畫分鏡和動(dòng)畫設(shè)計(jì)的知識(shí),交互動(dòng)畫不只是視覺設(shè)計(jì)師的工作,更應(yīng)該由交互設(shè)計(jì)師事先做好分鏡定義,然后再和視覺同學(xué)一起商量和修改,共同打造你們心目中最完美的設(shè)計(jì)呈現(xiàn)。

故事

一部漫畫有了對(duì)話、有了分鏡,當(dāng)然還需要一個(gè)好故事。

我們的小火箭一鍵點(diǎn)擊就能加速電腦,那是否可以通過長(zhǎng)按的方式激活一個(gè)更厲害的火箭,完成一次更強(qiáng)的加速呢?

通過這個(gè)靈感來源,我們打造了一個(gè)“穿越蟲洞”的故事。

用戶長(zhǎng)按小火箭后,能夠觸發(fā)一個(gè)蟲洞,一松手,就有一個(gè)快到極致的火箭從里面出現(xiàn)。原先整個(gè)火箭的發(fā)射時(shí)間只有不到0.5秒,要怎么才能更快?我們想到了用電影里《駭客帝國(guó)》用的“子彈時(shí)間”概念,逆向思考,讓火箭從極快突然切換到極慢,通過強(qiáng)烈的對(duì)比,讓你感受到它極致的速度和力量。

這樣的火箭一穿而過,產(chǎn)生的加速效果當(dāng)然是非同凡響的,“當(dāng)當(dāng)當(dāng)”的動(dòng)畫閃過,有了一個(gè)通知——“你探索到了一個(gè)新功能!”

如同發(fā)現(xiàn)新大陸一般的喜悅。


以上就是我們?cè)趦赡昵袄靡曈X思維完成小火箭2.0改版故事的一小部分,我省去了前期的分析調(diào)研、過程中的路徑拆解和其他的一些案例,主要是想以此為例子講講視覺思維。這次的改版從用戶口碑和使用數(shù)據(jù)上都獲得了極大的成功,也讓我們備受鼓舞。

也許我們做得還遠(yuǎn)遠(yuǎn)不夠好,但我們一直在追求更好體驗(yàn)的路上。

感謝我的搭檔Nefish,正是他的創(chuàng)新理念和實(shí)現(xiàn)能力,才能讓這次的改版能有如此出色的視覺呈現(xiàn)。

相關(guān)閱讀

交互設(shè)計(jì)師應(yīng)具備的技能樹(1):產(chǎn)品思維

交互設(shè)計(jì)師應(yīng)具備的技能樹(2):設(shè)計(jì)師的用戶思維

交互設(shè)計(jì)師應(yīng)具備的技能樹(3):設(shè)計(jì)師的邏輯思維

 

作者:WingST,騰訊高級(jí)交互設(shè)計(jì)師,微信公眾號(hào)“落羽敬齋(ID:wingstudy)”

本文由 @WingST 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 很不錯(cuò),謝謝,有資源

    來自北京 回復(fù)
  2. 就技能樹的總結(jié)就值得點(diǎn)一個(gè)贊

    回復(fù)