史上最經(jīng)典的8個(gè)UI動(dòng)效

UI動(dòng)效仿佛是數(shù)字產(chǎn)品的調(diào)味料:添加太多會(huì)破壞作品的精髓荞下,但是適當(dāng)?shù)靥砑泳陀兄诋a(chǎn)品展現(xiàn)其最好的品質(zhì),在瞬間傳達(dá)出或復(fù)雜隐岛、或新穎猫妙、或激進(jìn)的想法。

盡管很少得到應(yīng)有的認(rèn)可聚凹,動(dòng)效是任何數(shù)字體驗(yàn)(和產(chǎn)品)的基本組成部分割坠,因此,我們整理出了8個(gè)最重要的用戶界面動(dòng)效妒牙。它們隸屬于不同的時(shí)代彼哼、空間和媒體,但有一個(gè)共同點(diǎn):每一個(gè)都代表著我們與技術(shù)和思想互動(dòng)方式的一次飛躍湘今。

1. 閃爍的光標(biāo)(1967)

光標(biāo)仿佛自互聯(lián)網(wǎng)誕生起就已經(jīng)存在敢朱。就像任何真正的藝術(shù)經(jīng)得起時(shí)間和媒介的考驗(yàn)。

1967年摩瞎,Charles A Kiesling首次申請(qǐng)了這項(xiàng)專利拴签。目前,光標(biāo)仍在手機(jī)旗们、atm機(jī)蚓哩、電腦、瀏覽器上被使用上渴,當(dāng)然還將被運(yùn)用到未來(lái)的設(shè)備上岸梨。它是UI動(dòng)效的蒙娜麗莎——簡(jiǎn)單喜颁、經(jīng)典、并為整個(gè)流派的藝術(shù)表達(dá)奠定了基礎(chǔ)曹阔。

光標(biāo)建立了一個(gè)至今仍在使用的約定半开,它讓我們知道屏幕的焦點(diǎn)在哪里,并告訴你赃份,它已經(jīng)為您的輸入做好了準(zhǔn)備稿茉。就像最忠實(shí)的朋友一樣,閃爍著的光標(biāo)陪伴并見(jiàn)證著我們的進(jìn)步芥炭。

2. 世嘉創(chuàng)世紀(jì)( Sega Genesis )的閃屏(1989)

每臺(tái)游戲機(jī)都有自己的開(kāi)場(chǎng)動(dòng)畫(huà)漓库,但最具標(biāo)志性的當(dāng)屬“世嘉創(chuàng)世紀(jì)”(Sega Genesis)。

世嘉創(chuàng)世紀(jì)是一個(gè)好斗的對(duì)手园蝠,相比之下渺蒿,任天堂的Super NES要保守得多。世嘉的刺猬索尼克很有個(gè)性彪薛,而馬里奧是一個(gè)謙虛的笨手笨腳的水管工茂装;世嘉的硬件是光滑而黑色的,任天堂則是灰色而笨重的善延。品牌個(gè)性在用戶使用的第一秒便得以傳達(dá)少态。

每一款世嘉創(chuàng)世紀(jì)游戲的開(kāi)機(jī)動(dòng)畫(huà)都是如此的不同。(從Blockbuster租借一款新游戲易遣,觀看其獨(dú)特的開(kāi)機(jī)動(dòng)畫(huà)彼妻,可能會(huì)讓一個(gè)11歲的孩子興奮不已)。與此同時(shí)豆茫,任天堂娛樂(lè)系統(tǒng)(1985年發(fā)布)和超級(jí)NES(1991年發(fā)布)都跳過(guò)了開(kāi)屏的設(shè)計(jì)侨歉,從而錯(cuò)過(guò)了一個(gè)能制造些許樂(lè)趣的機(jī)會(huì)。

世嘉幫助任天堂和電子游戲達(dá)到了另一個(gè)高度揩魂,但在21世紀(jì)頭10年逐漸沒(méi)落幽邓。然而90后的孩子永遠(yuǎn)不會(huì)忘記:世嘉的動(dòng)畫(huà)意味著一場(chǎng)有趣的經(jīng)歷的開(kāi)始。

3. AOL的登錄界面(1995)

2019年火脉,一切都是在線的牵舵。我們甚至能在口袋或廚房里有這樣一部揚(yáng)聲器,只要我們喚一聲它的名字倦挂,它就立刻把我們和互聯(lián)網(wǎng)連接起來(lái)畸颅。

但曾幾何時(shí),上網(wǎng)是一種有意識(shí)的行為妒峦。你需要坐下來(lái)重斑,整理好你的日程安排(和電話線),并在精神上做好與世界各地的陌生人聯(lián)系的準(zhǔn)備肯骇。

對(duì)許多人來(lái)說(shuō)窥浪,AOL是他們接觸網(wǎng)絡(luò)的第一個(gè)窗口,他們認(rèn)為自己并不孤單笛丙。它的最后一幀漾脂,一個(gè)人轉(zhuǎn)變成一個(gè)群體的一部分,是網(wǎng)絡(luò)最初的樂(lè)觀承諾胚鸯。

4. Windows XP的下載界面(2001)

曾經(jīng)骨稿,下載速度如此之慢,我們需要一種視覺(jué)上的安慰姜钳,告訴我們:是的坦冠,那個(gè)文件正在一個(gè)字節(jié)一個(gè)字節(jié)地下載中。

時(shí)間估算欄總是讓人抓狂哥桥,但看著這些文件從左到右懶洋洋地飄浮辙浑,會(huì)讓你進(jìn)入催眠狀態(tài)。你接受了自己的命運(yùn)拟糕。在某個(gè)地方判呕,數(shù)據(jù)慢慢地流入你的電腦,你很快就能看到同事們引人入勝的TPS報(bào)告送滞,或者你在TRL上聽(tīng)到的那首難聽(tīng)的歌侠草。

5. Mac的沙灘球(2001)

早期的mac的加載是一個(gè)滴答作響的手表。窗口隨著沙漏加載出來(lái)犁嗅。這仿佛是你的設(shè)備在提醒著你:你的生活中有多少時(shí)間正隨著加載而白白流逝边涕。

之后,加載變成了一個(gè)旋轉(zhuǎn)的沙灘球褂微。我們?nèi)匀徊幌矚g等待奥吩,在現(xiàn)代設(shè)備上,這通常意味著出了真正的問(wèn)題蕊梧。但至少OSX設(shè)備給了我們一些視覺(jué)上好看的東西霞赫,讓我們對(duì)等待有了一些耐性。

6. iMessage的“輸入中” (2007)

這一標(biāo)志性的動(dòng)效不僅意味著你的朋友正在輸入,這也是永遠(yuǎn)使你焦慮的三個(gè)小點(diǎn):

“我的玩笑成功了嗎?我會(huì)被拒絕嗎?對(duì)方在策劃一場(chǎng)惡狠狠的反擊嗎”

雖然我確信這一設(shè)計(jì)的初衷只是讓用戶知道他們的聯(lián)系人在打字捧弃,但它最終是對(duì)人類狀況的一種映射:我們永遠(yuǎn)無(wú)法真正了解人們對(duì)我們的真實(shí)想法菠净。

7. Uber的打車搜索動(dòng)效(2010)

打開(kāi)Uber,看到一小排可選的私人司機(jī)旅东,感覺(jué)很奢侈,但也覺(jué)得很安全十艾。這將可怕的拼車化為一種美妙的體驗(yàn):無(wú)論你身在何處抵代,想如何到達(dá)目的地,你都可以回家忘嫉。

8. Twitter的下拉刷新(2010)

在這個(gè)內(nèi)容永無(wú)止境的時(shí)代荤牍,刷新是需要進(jìn)行重大革新的傳統(tǒng)之一案腺。洛倫·布里切特(Loren Brichter)發(fā)布Twitter應(yīng)用Tweetie時(shí),推出了移動(dòng)應(yīng)用中最具革命性的UI動(dòng)效之一:“下拉刷新”(the pull torefresh)康吵。

現(xiàn)在劈榨,“下拉刷新”幾乎是每個(gè)應(yīng)用程序的一部分,也是它自己的一種藝術(shù)形式晦嵌。它是我們?nèi)粘I钪泄逃械囊徊糠?就連小孩子也本能地知道如何用這種方式使用觸摸屏同辣。

刷新的吸引力一直存在在我們身上,只是一個(gè)Twitter應(yīng)用程序讓它浮出了水面惭载。


原文作者:Nicole Beckerman(InVision團(tuán)隊(duì))旱函、Sean Blanda(InVision團(tuán)隊(duì))

原文鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市描滔,隨后出現(xiàn)的幾起案子棒妨,更是在濱河造成了極大的恐慌,老刑警劉巖伴挚,帶你破解...
    沈念sama閱讀 216,843評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件靶衍,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡茎芋,警方通過(guò)查閱死者的電腦和手機(jī)颅眶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)田弥,“玉大人涛酗,你說(shuō)我怎么就攤上這事⊥迪茫” “怎么了商叹?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,187評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)只泼。 經(jīng)常有香客問(wèn)我剖笙,道長(zhǎng),這世上最難降的妖魔是什么请唱? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,264評(píng)論 1 292
  • 正文 為了忘掉前任弥咪,我火速辦了婚禮,結(jié)果婚禮上十绑,老公的妹妹穿的比我還像新娘聚至。我一直安慰自己,他們只是感情好本橙,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評(píng)論 6 390
  • 文/花漫 我一把揭開(kāi)白布扳躬。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪贷币。 梳的紋絲不亂的頭發(fā)上击胜,一...
    開(kāi)封第一講書(shū)人閱讀 51,231評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音片择,去河邊找鬼潜的。 笑死骚揍,一個(gè)胖子當(dāng)著我的面吹牛字管,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播信不,決...
    沈念sama閱讀 40,116評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼嘲叔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了抽活?” 一聲冷哼從身側(cè)響起硫戈,我...
    開(kāi)封第一講書(shū)人閱讀 38,945評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎下硕,沒(méi)想到半個(gè)月后丁逝,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,367評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡梭姓,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評(píng)論 2 333
  • 正文 我和宋清朗相戀三年霜幼,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片誉尖。...
    茶點(diǎn)故事閱讀 39,754評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡罪既,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出铡恕,到底是詐尸還是另有隱情琢感,我是刑警寧澤,帶...
    沈念sama閱讀 35,458評(píng)論 5 344
  • 正文 年R本政府宣布探熔,位于F島的核電站驹针,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏诀艰。R本人自食惡果不足惜柬甥,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望涡驮。 院中可真熱鬧暗甥,春花似錦、人聲如沸捉捅。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,692評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)棒口。三九已至寄月,卻和暖如春辜膝,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背漾肮。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,842評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工厂抖, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人克懊。 一個(gè)月前我還...
    沈念sama閱讀 47,797評(píng)論 2 369
  • 正文 我出身青樓忱辅,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親谭溉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子墙懂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 改進(jìn)UI交互的實(shí)用建議 讓我們來(lái)看一些UI動(dòng)效從良好到優(yōu)秀的例子,只要稍稍調(diào)整扮念,就可以使用動(dòng)效來(lái)提升UI模式损搬。 列...
    Ystarsan閱讀 813評(píng)論 0 0
  • 我們花了很多時(shí)間來(lái)改進(jìn)數(shù)字體驗(yàn),而之后才進(jìn)行構(gòu)建動(dòng)畫(huà)柜与。實(shí)際上巧勤,很多設(shè)計(jì)師沒(méi)有動(dòng)效設(shè)計(jì)的經(jīng)驗(yàn),我們很多動(dòng)效的設(shè)計(jì)都依...
    LuluZhang_閱讀 3,261評(píng)論 0 19
  • 2018.06.13 太陽(yáng)的白世界橋:跨越心智的鴻溝弄匕,才能迎來(lái)嶄新的未來(lái)颅悉。 每日踐行:想要除掉花園中的雜草,最好的...
    天涯海角_a50e閱讀 158評(píng)論 0 0
  • 1,初見(jiàn)碧瑤 文/顏克 午后粘茄,從馬尼拉出來(lái)一直向北,在平原行車6個(gè)小時(shí)后签舞,再繞2個(gè)小時(shí)的山路,就到了幻想中的碧瑤柒瓣。...
    顏克閱讀 183評(píng)論 2 0
  • 習(xí)題一:第一個(gè)程序 習(xí)題二:注釋和井號(hào) 習(xí)題三:數(shù)字和數(shù)字計(jì)算 習(xí)題四:變量和命名 習(xí)題五:更多的變量和打印 習(xí)題...
    張毛毛的成長(zhǎng)記錄儀閱讀 230評(píng)論 0 0