09年的電影緩緩的落下帷幕，以及新年伊始，轟轟烈烈催人癲狂的《阿凡達(dá)》。整年里，最讓人我記憶深刻的還是《飛屋歷險(xiǎn)記》。

Carl與Ellie被南美的那個(gè)名叫“paradise-fall”的瀑布魂?duì)繅?mèng)縈，于是他們決定一天天的往容器里存錢，積攢旅費(fèi)以完成童年的夢(mèng)想?？墒?，生活畢竟不是天天祥和與順心，總是充滿著未知和意外，車子爆胎，骨折住院，被大樹壓垮房子，面對(duì)種種突如而來的變故，容器只能一次次的被打碎挪為他用重頭再來?？杉幢闳绱?，又能怎樣，每一個(gè)硬幣投入锃亮的容器，都寄托著希望和未來，當(dāng)容器漸漸變滿，空氣帶著幸福的氣息漸漸的溢出彌漫，哪怕不得已奮力打碎，瞬時(shí)散發(fā)的同樣是幸福的氣息?？释麨槿烁改傅乃麄兒翢o結(jié)果，卻依舊能并排而坐靜靜看書，執(zhí)子之手，相濡以沫。幸福的日子也在領(lǐng)帶花紋云朵形狀的變換中一幀幀年華老去，日復(fù)一日在小山坡上看暖霞西下。

回想起剛做完QQ2009視覺設(shè)計(jì)的時(shí)候，當(dāng)時(shí)周圍正轟轟烈烈的大講情感設(shè)計(jì)。我們的腦子里正在思索著一個(gè)問題：

我們到底是要設(shè)計(jì)一個(gè)符合用戶情感的事物？還是把這個(gè)事物設(shè)計(jì)成一個(gè)能讓用戶投入情感的容器？

似乎前者更適合有特定用戶群的產(chǎn)品，而后者偏重用戶群模糊，乃至情況不一的產(chǎn)品。QQ就是如此，用戶群龐大，使用者年齡、習(xí)慣、成長(zhǎng)環(huán)境、社會(huì)層次、使用目的等等諸多因素的截然不同，這個(gè)多元得時(shí)代期望用一款皮膚去征服所有用戶這是萬萬不可能做到的。

原來的我們還是處于這個(gè)階段，只是一味的提升視覺效果，期望以無限提升，讓盡可能多得使用者滿意。但設(shè)計(jì)到了一定階段道路只會(huì)越來越狹窄。縱然不能妄下結(jié)論，但是視覺效果的提升基本依賴技術(shù)手段的優(yōu)勢(shì)而對(duì)自然界真實(shí)事物的模仿再現(xiàn)，以驅(qū)動(dòng)看待事物觀念的改變。至少目前，已經(jīng)達(dá)到現(xiàn)階段的一個(gè)頂點(diǎn)。

也許很多視覺設(shè)計(jì)師在潛意識(shí)里認(rèn)為，提升產(chǎn)品的視覺享受始終是視覺設(shè)計(jì)師的第一目的?？晌矣X得，這僅僅是視覺設(shè)計(jì)師通過設(shè)計(jì)的手段而需要完成的目的之一，我們要做的還有很多，譬如：設(shè)計(jì)的產(chǎn)品是否能讓用戶產(chǎn)生情感的寄托；設(shè)計(jì)的創(chuàng)新是否超出和遵循目前產(chǎn)品的延續(xù)；設(shè)計(jì)和創(chuàng)新的內(nèi)容是否可以低成本，高效率的被呈現(xiàn)；設(shè)計(jì)的形式是否可以不借助幫助系統(tǒng)而通過產(chǎn)品的語(yǔ)義被簡(jiǎn)便的傳達(dá)。關(guān)于設(shè)計(jì)的目的，不是本文的重點(diǎn)在此不做過多的累述。

QQ2010的設(shè)計(jì)前期并沒有太多明確的頭緒，但有一點(diǎn)值得肯定的是不想在新的一輪設(shè)計(jì)中依舊停留在設(shè)計(jì)一個(gè)全新界面風(fēng)格的思路上。如此的設(shè)計(jì)過程料想又只能在習(xí)慣和超越之間反復(fù)徘徊。不斷的通過中和各方的意見過程中成為一個(gè)略顯欠缺的設(shè)計(jì)。于是“多樣化的滿足用戶需求，自由自在的使用QQ”成為預(yù)設(shè)的主題。希冀拋開視覺風(fēng)格單一的被關(guān)注，解決用戶習(xí)慣的維持和產(chǎn)品自身需要提升預(yù)期的矛盾點(diǎn)。思考再三以個(gè)性化為切入點(diǎn)依舊是個(gè)好的方向。于是在保持習(xí)慣性的界面之外，另外設(shè)計(jì)了二個(gè)風(fēng)格，試想供用戶在登錄之初根據(jù)自身喜好進(jìn)行界面風(fēng)格的選擇。

（圖一 第一期的另外兩個(gè)界面）

但這似乎并不是一個(gè)好方法，如果僅僅從數(shù)量上去解決問題，只是將原來的個(gè)性皮膚上升到默認(rèn)皮膚的重要程度，隨之帶來的問題依舊和先前的個(gè)性皮膚一樣，陷入一個(gè)“人?！痹O(shè)計(jì)。這與設(shè)計(jì)和創(chuàng)新的內(nèi)容是否可以被低成本，高效率的呈現(xiàn)的目的是相違背的。在第一輪的內(nèi)部評(píng)審后，三個(gè)方向還是進(jìn)行著，并對(duì)各自優(yōu)勢(shì)點(diǎn)做了深入。尤其將個(gè)性化這個(gè)切入點(diǎn)用在了單一的風(fēng)格上，似乎看到了一絲光線。

（圖二 個(gè)性化切入點(diǎn)在一個(gè)界面上的反映）

在與團(tuán)隊(duì)進(jìn)行另外一輪內(nèi)部溝通后，被詢問到：“既然可以在一個(gè)界面做個(gè)性化的深入，那么三個(gè)方向的界面是否可以通過個(gè)性化的設(shè)置在一個(gè)界面上全部體現(xiàn)呢？”答案或許是可以的，只是未曾嘗試。我想容器應(yīng)該是出現(xiàn)了，讓用戶可以投入自身情感，從而產(chǎn)生的寄托的容器出現(xiàn)了。

隨后的一切異常順利，我決定將以往設(shè)想的方法在QQ2010上做個(gè)實(shí)踐。看是否能成立，試圖改變一下界面視覺設(shè)計(jì)上固有的設(shè)計(jì)觀念。

界面很快成型,默認(rèn)保持了習(xí)慣性的藍(lán)色。第一感覺可能平淡無奇，毫無吸引人的地方，但這正式我們需要提供給用戶的。因?yàn)槲覀兲峁┑氖且粋€(gè)樸素的容器，至于如何塑造以符合用戶的情感投入由用戶自己去把握。我們不能用自身既定的思維去限定或者認(rèn)定用戶的審美傾向，要做的僅僅是去提供用戶能投入自身情感物體的有效的、便捷的途徑。這里很多人或許會(huì)問，我們?yōu)槭裁床蝗ヅ袛嘤脩魰?huì)去投入什么？我們?yōu)槭裁床蝗陀脩羰孪扰袛鄬徝郎险純?yōu)的物體？因?yàn)槲覀兊挠脩羧糊嫶螅楦斜磉_(dá)不一，任何我們覺得不錯(cuò)的觀念，都會(huì)得到正反兩面的回應(yīng)。當(dāng)然我們可以去推薦，但這不能成為唯一的手段，以不變應(yīng)萬變的方式不可避免的帶有一種守株待兔式的機(jī)械。所以設(shè)計(jì)師在設(shè)計(jì)時(shí)重心應(yīng)該傾向于設(shè)計(jì)一個(gè)完美的手段，讓用戶根據(jù)自身特點(diǎn)去設(shè)計(jì)完美的結(jié)果。從設(shè)計(jì)的切入點(diǎn)上轉(zhuǎn)變以往的設(shè)計(jì)觀念。

（圖三 藍(lán)色的默認(rèn)界面）

依據(jù)這種觀念，以個(gè)性化作為切入點(diǎn)，提供給用戶可以任意投入情感的容器，開始對(duì)設(shè)計(jì)做了以下幾個(gè)方面的調(diào)整來符合成為容器的標(biāo)準(zhǔn)：

容器可以承載任何的情感投入。

容器必須是軟性的材質(zhì)，才可以讓用戶根據(jù)自身的需求，不斷的變換形狀用以適合不同物體。設(shè)計(jì)的同時(shí)，將界面的各個(gè)圖層、呈現(xiàn)方式做了重新設(shè)計(jì)，同時(shí)在設(shè)計(jì)階段就做到符合程序?qū)崿F(xiàn)的預(yù)期。

但這點(diǎn)在界面的最終表現(xiàn)上是沒有區(qū)別的。

足夠多的情感供用戶選擇。

用戶的情感是豐富的，相對(duì)應(yīng)的在設(shè)計(jì)時(shí)的呈現(xiàn)方式必然需要豐富。個(gè)性化方式主要體現(xiàn)在換色和底紋上，這兩個(gè)內(nèi)容在QQ2009上就已經(jīng)存在，但原來?yè)Q色方式收到一定的限制，底紋又需要依賴顏色的存在，設(shè)計(jì)調(diào)整的個(gè)性化顏色和底紋，又需要和程序的呈現(xiàn)進(jìn)行換算，并且在設(shè)計(jì)的制作問題上更是復(fù)雜。

因此在2010的設(shè)計(jì)階段，重新設(shè)計(jì)了界面的換色方式。真正意義上用戶可以選擇所有真實(shí)環(huán)境中存在的顏色，設(shè)計(jì)師調(diào)配的顏色也能一一對(duì)應(yīng)在真實(shí)界面環(huán)境中得到體現(xiàn)。底紋的呈現(xiàn)也擺脫了顏色的約束而獨(dú)立生存。并且在界面的效果影響更大范圍的吸引用戶的眼睛。

（圖四 換色后和透明度的界面）

（圖五 換底紋后的界面）

用戶情感的投入足夠簡(jiǎn)便。

QQ2010設(shè)計(jì)了兩個(gè)緯度的個(gè)性化設(shè)置：登錄前和登錄后。

當(dāng)用戶第一次登錄時(shí)提供默認(rèn)界面顏色、默認(rèn)推薦的顏色和底紋。讓用戶根據(jù)自身的喜好簡(jiǎn)略選擇，如此界面風(fēng)格的習(xí)慣性和跨越性方能得到中和解決。不同的用戶打開的是同一個(gè)產(chǎn)品，卻打開了符合自身預(yù)期的不同界面。

用戶在使用過程中同樣可以對(duì)個(gè)性化進(jìn)行調(diào)整，且設(shè)置的功能將更加強(qiáng)大。底紋、顏色、自身調(diào)節(jié)分門別類。對(duì)個(gè)性化內(nèi)容的選擇、添加、刪除、調(diào)節(jié)都做了集中體現(xiàn)。

底紋導(dǎo)入設(shè)計(jì)了多種的操作方式，目前版本僅僅在設(shè)置面板添加和文件夾拖入做了支持，后續(xù)還會(huì)有更為多樣、有趣的導(dǎo)入方式。

（圖六 主面板個(gè)性化設(shè)置界面）

（圖七 文件夾底紋拖動(dòng)的導(dǎo)入方式）

讓用戶的情感投入帶來更多的期望產(chǎn)生依賴。

用戶可以將與不同人的聊天過程中獲得的圖片信息設(shè)置成底紋；用戶可以在上網(wǎng)過程中將自己喜好的圖片設(shè)置成底紋；用戶可以將當(dāng)下外界流行的圖片信息（包括電影、人物、風(fēng)景、紋樣）設(shè)置成底紋；用戶可以將和自身生活有關(guān)的圖片信息（自己、父母、戀人、孩子）設(shè)置成底紋，等等。同時(shí)底紋呈現(xiàn)的放大作用一定程度上降低了用戶對(duì)個(gè)性皮膚的依賴，對(duì)設(shè)計(jì)師來說能提高極大的效率，莫不是額外的好處。

（圖八 用戶使用過程中由自身喜好決定的界面底紋）

如何使用戶的情感寄托獲得更大范圍的依賴，界面設(shè)計(jì)的在整體性上進(jìn)行把握，讓色彩和底紋對(duì)界面的影響最大化。在界面設(shè)計(jì)上就得遵循一些原則，比如：整體得視覺一致性，信息可讀，圖形可識(shí)別，效果符合用戶的使用體驗(yàn)??

以上是一個(gè)項(xiàng)目的總結(jié)，也是設(shè)計(jì)觀念的轉(zhuǎn)變?cè)谡鎸?shí)項(xiàng)目上的實(shí)踐檢驗(yàn)，當(dāng)然任何一種觀念不可能十全十美，帶來優(yōu)勢(shì)的同時(shí)，不可否認(rèn)也會(huì)攜帶著劣勢(shì)。如默認(rèn)界面的視覺效果被削弱就是一個(gè)不可避免的因素。但這僅僅是一個(gè)起點(diǎn)，QQ2010被設(shè)計(jì)成用戶投入情感的容器，諸多個(gè)性化的功能還在繼續(xù)完備，在以后的版本中不斷會(huì)帶給用戶。設(shè)計(jì)方式隨著設(shè)計(jì)觀念的變化也會(huì)繼續(xù)促使趨于完善。我們?cè)谂?，也?qǐng)大家拭目以待。更歡迎討論交流獲得共同提升。

Ps：如今是一個(gè)快捷的時(shí)代，愿意靜下來看完長(zhǎng)篇累牘式的啰唆文字純屬不易，萬一不幸看完，真誠(chéng)說一聲：“感謝您，受累了?！?^_^

版權(quán)所有 ? 2008
您看到的文章來自?騰訊CDC博客 http://cdc.tencent.com

原文鏈接為?http://cdc.tencent.com/?p=2200 ，轉(zhuǎn)載時(shí)請(qǐng)注明出處。