【QQ空间V8新版】项目总结：装扮篇

导语：

QQ空间行将公布V8新版，界里清爽简约，打扮更是竹苞松茂：供给5种新版式，多达50套新皮肤，将给各人带去齐新的体验。

“我们做的统统皆是为了用户正在打扮上有线人一新的觉得，我们期望当前也会有更多有创意的打扮持续降生，让每次用户换打扮时皆有欣喜。”

——by 腾讯交际用户体验设想(简称ISUX)

打扮是QQ空间里的主要特征，干系到用户进进空间时的感触感染，我们寻求为用户带去更优良的体验，因而V8新版本的设想，我们念让打扮有更新的标的目的，更酷的情势，让打扮更有特性。同时小我私家中间战小我私家主页的打扮微风格能连结分歧，那些皆是我们此次测验考试立异打扮的动力滥觞。

1、前期探究微风格测验考试

既然要做立异，起首该当满意的面便是要有充足的新意来吸收到用户的眼球，正在用户第一次打仗时便会被震动“那套打扮太故意思了，好合适我，好喜好，好念用。”

为了聚集列位设想师的偶思妙念，我们构造了一次脑暴会，期望打扮不单单只是交换图片，而该当有更多互动体验。

上面是对脑暴后偶思妙念的收拾整顿：

跟着Html5手艺的成生，我们能够操纵愈来愈多手艺去完成殊效，好比视好转动，空间打扮固然也要取时俱进。

去看看那套打扮的构想，它操纵了简朴的视好道理，当用户转动鼠标将页里下滑时，布景的星空也会随之徐徐扭转，带用户进进到极光的天下。

那套打扮一样操纵了简朴的互动道理，眼球能随着您鼠标指针的标的目的，定位到眼球地点的地位，给用户调皮的觉得“您指哪女我就可以看到哪女。”

我们皆明白空间打扮的中心体验是让用户自立挑选拆配，每个打扮元素皆是自力的，将本人喜欢的打扮配件自在组开起去，拆配出属于本人最具本性的打扮；如许下自在的体验，凸起了用户本性的同时也带去必然的成绩——那便是打扮自界说的标准过年夜，招致年夜大都打扮终极废品出有主题，狼藉而不敷团体。

因而正在新的V8打扮计划设想中，提出“场景主题化”的打扮观点，由专业设想师按照差别用户群体和场景去团体包拆，挨制出独具主题本性的空间打扮，提拔空间打扮团体的品格感。

2、视觉输出

经由过程一段工夫的设想，我们终究把观点转化成了理想。

1.陆地退化论

那套打扮仅仅只显现了海底的天下，除鱼战火母以外，会让用户以为太单调有趣的。

参加蓝天、海仄里、海底战小岛。开端有了雏形，可是海浪太剧烈了，会给用户不服静的觉得。

静行的海景曾经完成好未几，为了让用户有实在感触感染，那便需求打扮里的内乱容是动起去，鱼能正在海底游动，波浪翻腾，天空中的云朵飞舞，那些皆是经由过程Html5手艺去完成。

正在动绘的建造中，鱼的游动易面是最年夜的。

整套打扮中皆是写真气势派头，为了连结气势派头的同一，鱼也没有破例。一切的鱼皆是PNG的图片，怎样才让它动得更实在呢，正在看完许多海底天下的视频以后，才开端动手设想。

动绘皆是有Html5手艺完成，以是我们需求供给给前端哥哥的是鱼游动时分的枢纽帧，要让鱼游动的更流利，按照察看视频得出的鱼游动行动尾巴战身材的变革，用一张静行的鱼的图片，经由过程PS变形，微调出5张鱼游动的枢纽帧，然后给他们排好挨次，做成GIF动绘，边播放边微调，曲到鱼的游动靠近实在。

我们期望让一切用户皆能看到完好的陆地齐景图，操纵前真个自顺应手艺，让陆地能顺应险些一切分辩率。

空间的用户正在看完静态后，皆没有会间接封闭，而是挂机来做其他工作，新鲜的海底动绘仍然绘声绘色驱逐用户返来。

2.星空

前期材料搜集，看了很多星空、极光、太空等，开端设想之前，先要对本人要设想的内乱容有充足多的理解。

脑暴时分的星空打扮劣化战深化，星空跟着页里转动以差别的速度挪动，时而有流星滑过。

树木的剪影正在一开端会跟着鼠标转动愈来愈年夜，颠末屡次调试，结果皆没有太好，为了没有让用户有眩晕感，最初决议树木剪影牢固没有动。

要做到自顺应，底部的树木中间便需求能对接起去完成能有限延展，不管您屏幕有多年夜，妈妈不再用担忧我看到的全部星空打扮是没有完好的了。

为了让用户有流利的体验，我们不能不丧失部门视觉结果，正在手艺能完成的条件下，一直对峙视觉最劣结果。

3.脚色扮装扮

差别用户会有差别的身份战喜好，统一个用户也会有差别的喜好，对用户的身份停止分类，发掘用户喜好，停止专属打扮的设想。

a.脚色范例

厨师

烹调取食品带给人们一种暖和的觉得，以是正在团体用色上，我们选用了白色、黄色等温色系；布景挑选了偏偏居家的格子底纹来做展垫衬托；正在Cover图的挑选上，我们也倾向一些食材和烹调东西的图片，期望以此营建一种理想糊口中厨房场景的气氛；最初是把一些设想的细节融进到全部打扮傍边，为全部打扮增长明面；

门生

门生年夜大都时分皆是经由过程教师正在乌板上的笔墨去播种常识，以是讲台上的乌板能带给我们进修的气氛。Cover图设想了一块被教师掠过无数次的旧乌板，乌板上几个年夜字母即是受太高等教诲的门生皆教过的爱果斯坦出名的量能圆程式E=mc^2。 细节上，气候挂件地区用脚画绘出边框，让全部气候挂件便是全部乌板上的一员一样，布景也挑选了墙壁纹理仄展，使整套打扮里愈加团体。

利剑发

利剑发给人的觉得便会是很商务化，商务遍及给人的第一觉得便是蓝色，可是棕色战玄色给人愈加契合利剑发气鼓鼓量的觉得，以是最初挑选了战咖啡附近的棕色做为主色彩。Cover图则挑选了一栋商务年夜厦的中墙，修建中墙的构造同时也具有组成感，全部气势派头也较简约，没有做多的润饰。

b.交际干系

亲子

再去看看那套主题定位为“亲子”的打扮，是为那些用空间记载本人宝宝生长故事的爸爸、妈妈而设想的。团体的设想上，我们念经由过程团体温和的色彩、部分细微的拟物结果、和增加心爱的小元素，表现出一种婴女房中温馨，优美，布满浓浓爱意的气氛。 正在用色上，我们次要选用了粉橙色、粉白色那类温色系色彩。正在Cover图的挑选上，我们选用了一张熊奇的照片，那是婴女房中形形色色的心爱小玩具中的一员。 正在细节圆里，我们接纳了一个婴女房常睹的挂饰的剪影做为气候模块的启载，正在内乱容地区用婴女衣饰上常睹的小植物图案去仄展，等等。那些元素、部分的设想皆为了愈加的凸隐我们那套打扮的主题。

情侣

表达恋爱的物品挺多的，好比：玫瑰、戒指、心等等。

我们念带给用户一些纷歧样觉得，人们经常经由过程叠千纸鹤去表达对本人爱人的怀念，本套打扮则恰好念经由过程两个千纸鹤去表达对对圆的怀念，气候挂件的布景奇妙的做成邮票则是为了表达我念把我的怀念寄给您。经由过程集降的桃心、桃心中表面的导航减上粉白色布景更能衬托主题。

c.爱好喜好

游戏迷

正在设想前期对部门游戏停止了阐发，好比“斗战神”、“轩辕传偶”等游戏，它们的气势派头皆是酷炫、暗乌、玄幻的团体气氛； 正在一开端，我们将那款游戏主题的目的用户定为男性游戏玩家，假如反应优良，再推出女性游戏主题；以是便思索将暗乌系列的游戏UI元素复用到打扮中，以加强用户的游戏即视感。 好比小我私家主页左边模块的斑纹边框，便是间接复用游戏中“人物形态栏”的边框，带着玄幻取陈旧的觉得； 而布景纹理也是选用了战游戏感比力揭切的暗乌气势派头；Cover间接用了游戏绘里，气候模块用旗号做为底板；期望打扮的设想结果，战游戏操纵界里的气氛揭切，让用户感触感染是正在玩游戏的体验感。

足球迷

做为一个忠厚的足球迷，竭力的念把那套打扮做好，让我们广阔的球迷同好们不再用担忧出有都雅的足球打扮可用。

设想之初，以为有太多太多的足球元素可用，便甚么皆念往上放，正在仄展的草天上念把全部足球场的边线，中线皆绘出去，角球旗、球门战球网皆做上来，厥后发明实在工具越多不但出能表示好全部足球场的气氛，反却是影响了用户浏览内里的内乱容。

因而开端做加法，把足球场上里积最年夜，深浅瓜代的草坪做为布景，导航下仄展的是用石灰正在草坪上绘出的中线，正在草坪上放上足球，再正在头像上减上球迷帽，是否是便曾经有念正在上里踢球的激动了。球迷伴侣们赶快来商乡打扮上那套足球打扮吧！

3、感悟

正在全部设想中，最中心的面便是主题化取空间品格。

一切的用色、材量、设想细节等等皆是环绕着那个中心去停止。我们没有会选用过于本性取同化的元素来包拆空间，但一切的设想皆是为主题而效劳，设想上的弃取皆是为了衬托全部空间打扮的场景感、品格感。

我们做的统统皆是为了用户正在打扮上有线人一新的觉得，我们期望当前也会有更多有创意的打扮持续降生，让每次用户换打扮时皆有欣喜。

此次的打扮的设想中贯通到一面原理，要做出感动用户的打扮，起首您该当感动您本人。实在一切的设想皆是一样，连设想师本人皆不克不及感动的设想，您又该怎样来惹起他人的共识呢。