從“太陽(yáng)”到“時(shí)光企鵝”:一個(gè)QQ設(shè)計(jì)師眼里的界面變遷史

1 評(píng)論 4064 瀏覽 8 收藏 13 分鐘

從1999年OICQ的誕生到如今的“時(shí)光企鵝”,QQ不僅是一個(gè)社交工具,更是幾代人的青春記憶。本文將帶你穿越時(shí)光,回顧QQ從最初的極簡(jiǎn)界面到如今的極簡(jiǎn)卡片設(shè)計(jì)的演變歷程。

前幾天看到騰訊發(fā)了個(gè)消息,挺有意思:全球第一個(gè)QQ等級(jí)達(dá)到滿(mǎn)級(jí)256級(jí)的人出現(xiàn)了!恭喜全球首位256級(jí)QQ用戶(hù)獲得“金企鵝” 這位“大神”足足掛了22年才達(dá)成這個(gè)成就。更特別的是,達(dá)到這個(gè)等級(jí)會(huì)解鎖一個(gè)全新的圖標(biāo),叫“時(shí)光企鵝”。

現(xiàn)在大家可能不太在意這個(gè)了,但回想零幾年那會(huì)兒,大家都很沉迷”掛QQ”,等級(jí)就是“排面”。轉(zhuǎn)眼這么多年過(guò)去,想想還挺懷念的。

我上高中才接觸QQ,當(dāng)時(shí)掛QQ追求的是要沖到太陽(yáng)。記得那時(shí)候等級(jí)是按在線時(shí)長(zhǎng)算的,為了加速升級(jí),我們經(jīng)常拜托去網(wǎng)吧通宵的同學(xué)幫忙掛著。一臺(tái)電腦掛好幾個(gè)QQ,簡(jiǎn)直是常規(guī)操作。后來(lái)有了手機(jī)QQ,手機(jī)QQ基本上可以一直在線,加上注意力轉(zhuǎn)移,慢慢地就不太在意等級(jí)了。

在那個(gè)網(wǎng)絡(luò)剛剛普及的年代,大家都特別熱衷于在虛擬世界里打造自己的身份標(biāo)識(shí)。QQ等級(jí)、QQ空間裝扮、QQ秀… 現(xiàn)在回頭看,可能有點(diǎn)難理解,為什么會(huì)對(duì)這些虛擬的東西那么著迷?

后來(lái)微信流行起來(lái),我登錄QQ的次數(shù)逐漸就少了,唯一的用處就是登錄QQ用來(lái)截圖。沒(méi)想到的是,畢業(yè)多年后,我竟然加入了QQ團(tuán)隊(duì),當(dāng)上了QQ的設(shè)計(jì)師!

我在QQ做的第一個(gè)設(shè)計(jì)是QQ運(yùn)動(dòng),后來(lái)又開(kāi)始做厘米秀,從2D做到3D。不過(guò),不知道是自己年紀(jì)大了,還是玩膩了這類(lèi)東西,我發(fā)現(xiàn)自己慢慢不再是這些功能的目標(biāo)用戶(hù)了。

時(shí)代的車(chē)輪不停向前轉(zhuǎn),每個(gè)產(chǎn)品都會(huì)經(jīng)歷成長(zhǎng)、成熟和逐漸淡出。但作為一名設(shè)計(jì)師,回過(guò)頭去研究這些曾經(jīng)的“頂流”APP,看看設(shè)計(jì)潮流是怎么一路變化的,依然很有價(jià)值。這不僅是學(xué)習(xí),也是一種紀(jì)念。

這份懷念一涌上來(lái)就停不住,干脆就徹底整理一下吧!我把QQ從誕生到現(xiàn)在,關(guān)鍵界面的設(shè)計(jì)變化都梳理了一遍,也算是在找回自己那些“逝去的青春”。

好,我們穿越時(shí)光,從1999年開(kāi)始。

1999年:OICQ誕生

時(shí)間回到1999年,那一年是OICQ誕生的日子。當(dāng)時(shí)的界面極簡(jiǎn),基本沒(méi)啥UI設(shè)計(jì),都是系統(tǒng)默認(rèn)的窗體?!癘ICQ”這個(gè)名字的含義是”O(jiān)h, I Seek You“,借鑒ICQ,后因版權(quán)爭(zhēng)議更名。

圖片來(lái)源于網(wǎng)絡(luò)

2000年:改名“騰訊QQ”

2000年,正式更名“騰訊QQ”,界面布局有微調(diào)但風(fēng)格上基本沒(méi)有啥太大變化。

圖片來(lái)源于網(wǎng)絡(luò)

2001-2002年:交互小創(chuàng)新

2001-2002年,風(fēng)格沒(méi)變化,但在交互上做了創(chuàng)新。增加“隱身”登錄狀態(tài)選項(xiàng)。把登錄流程要填的內(nèi)容做了分拆,登錄的首界面更簡(jiǎn)潔易懂。

圖片來(lái)源于網(wǎng)絡(luò)

2003年:第一次大改版

2003年,首次全面改版了界面,圖標(biāo)設(shè)計(jì)和按鈕設(shè)計(jì)有了一些質(zhì)感。這個(gè)版本奠定了后續(xù)十年QQ的界面框架基礎(chǔ)。

圖片來(lái)源于網(wǎng)絡(luò)

2004年:設(shè)計(jì)感初顯

2004年,慢慢多了一些設(shè)計(jì)感了,估計(jì)是從這個(gè)版本開(kāi)始,UI設(shè)計(jì)師開(kāi)始深度介入,色彩更鮮明,布局也更緊湊,擬物時(shí)代的設(shè)計(jì)特點(diǎn)都有了。

圖片來(lái)源于網(wǎng)絡(luò)

2005年:優(yōu)化與精簡(jiǎn)

2005年,界面進(jìn)一步被優(yōu)化,去掉了一些文字說(shuō)明,把一些信息做了更好的分組。整體的風(fēng)格保持了延續(xù)。

這一年,我注冊(cè)了自己的第一個(gè)QQ號(hào)。

圖片來(lái)源于網(wǎng)絡(luò)

2006-2007年:個(gè)性化開(kāi)端

2006年,界面支持更換主題,設(shè)計(jì)上做到了更加個(gè)性化。經(jīng)典界面逐步定型了下來(lái)。界面更加干凈,信息分組越來(lái)越清晰。

圖片來(lái)源于網(wǎng)絡(luò)

2008年:經(jīng)典“國(guó)民QQ”

2008版,因穩(wěn)定性和功能全面性,成為用戶(hù)記憶中最經(jīng)典的“國(guó)民QQ”。界面設(shè)計(jì)上的變化相對(duì)較少。

也似乎是從這一年開(kāi)始,后面的日子過(guò)得越來(lái)越快了,經(jīng)常會(huì)有種錯(cuò)覺(jué),分不清2008和2018,不知道你有沒(méi)有這種感覺(jué)?

圖片來(lái)源于網(wǎng)絡(luò)

2009年:大幅精簡(jiǎn)

2009年,界面內(nèi)容做了非常大的精簡(jiǎn)。

圖片來(lái)源于網(wǎng)絡(luò)

2010年:高度自定義

2010年,界面可以自定義的內(nèi)容更多了,支持全界面自定義皮膚(透明度、顏色、圖片)。

圖片來(lái)源于網(wǎng)絡(luò)

2011-2012年:平穩(wěn)過(guò)渡

2011年,界面變化相對(duì)較小,處于一個(gè)穩(wěn)定的狀態(tài)。

圖片來(lái)源于網(wǎng)絡(luò)

2012年。

圖片來(lái)源于網(wǎng)絡(luò)

2013年:情感化與自然風(fēng)

2013年,QQ的UI設(shè)計(jì)理念更加貼近自然,如登錄界面飄揚(yáng)的云朵、天氣面板中的動(dòng)態(tài)效果等。同時(shí),QQ開(kāi)始強(qiáng)調(diào)情感屬性,如弱化按鈕設(shè)計(jì),提升用戶(hù)辨識(shí)度。

這一年也是我從大學(xué)畢業(yè)的日子,大家所有的情愫和溝通,全部都是寄托在了QQ里。

圖片來(lái)源于網(wǎng)絡(luò)

2014年:擁抱扁平化

2014,QQ進(jìn)行了重大UI設(shè)計(jì)變革,引入了扁平化設(shè)計(jì)理念,界面變得更加簡(jiǎn)潔、清爽。同時(shí),QQ更注重用戶(hù)體驗(yàn),如聊天窗口的優(yōu)化、消息提醒的改進(jìn)等。

圖片來(lái)源于網(wǎng)絡(luò)

2015-2017年:延續(xù)與微調(diào)

2015-2017年,這幾年的風(fēng)格也沒(méi)太大變化。

圖片來(lái)源于網(wǎng)絡(luò)

2018-2022年:極光理念與移動(dòng)優(yōu)先

2018-2022,采用了極光的設(shè)計(jì)理念。經(jīng)典品牌文化的延續(xù)性,從企鵝的家極地周?chē)沫h(huán)境衍生出極光的概念。移動(dòng)優(yōu)先與極簡(jiǎn)主義,適配移動(dòng)端操作習(xí)慣,平衡功能豐富性與界面簡(jiǎn)潔性。

這一年,我加入了QQ,開(kāi)始了極光之旅,時(shí)間也如極光一般,美麗卻又短暫的一晃而過(guò)。

圖片來(lái)源于網(wǎng)絡(luò)

2022年之后,我就基本上很少再用QQ了,大家對(duì)最新的界面也都很了解了,就不再贅述去寫(xiě)了。

這些年,界面一直在變,QQ的形象也有一些變化。最初的版本,QQ團(tuán)隊(duì)選擇的是一個(gè)胖乎乎的版本(2000年的時(shí)候),因?yàn)樗涌蓯?ài)。當(dāng)時(shí)的設(shè)計(jì)師樁子認(rèn)為,企鵝形象不一定要對(duì)稱(chēng),有一定的差異反而更有靈動(dòng)感,因此他將企鵝的眼睛設(shè)計(jì)成了wink狀,翅膀一高一低。

企鵝形象終稿手繪圖,圖片來(lái)源騰訊QQ

到現(xiàn)在慢慢的為了適應(yīng)QQ品牌心智的需要,QQ的比例變得更加年輕,外形也更加簡(jiǎn)潔。

圖片來(lái)源于網(wǎng)絡(luò)

圖片來(lái)源于網(wǎng)絡(luò)

最近這些年,QQ的重心在移動(dòng)端,PC客戶(hù)端的界面大的改動(dòng)變少了,更多是細(xì)節(jié)上的優(yōu)化。不過(guò),這些年的設(shè)計(jì)趨勢(shì)不也是沒(méi)啥太多變化嗎?似乎也是一種印證?;谟脩?hù)的需求,大的方向是減少視覺(jué)噪聲,讓用戶(hù)的體驗(yàn)更加聚焦。

總結(jié)這些年QQ的設(shè)計(jì)變化趨勢(shì):

1)形態(tài)演變。 純文字列表 → 立體化圖標(biāo) → 扁平動(dòng)態(tài)設(shè)計(jì) → 極簡(jiǎn)卡片  (1999純文本 → 2003立體化 → 2013扁平化 → 2023 NT架構(gòu))

2)設(shè)計(jì)哲學(xué)。 實(shí)用性 → 個(gè)性化 → 情感化 → 效率化 (早期能用就行→中期強(qiáng)調(diào)自我表達(dá)→近期追求無(wú)縫體驗(yàn))

本文由人人都是產(chǎn)品經(jīng)理作者【彩云sky】,微信公眾號(hào):【彩云譯設(shè)計(jì)】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 懷念那個(gè)年代的QQ,掛機(jī)沖等級(jí)的日子真讓人難忘,現(xiàn)在雖沒(méi)那么執(zhí)著,但看到這256級(jí)的設(shè)計(jì),還是能感受到情懷和傳承。

    來(lái)自山東 回復(fù)