Paragraph2-Hey, what's up? Drop me a line and I will respond in 24 hours. If I don't, it must be eaten by spam folder :( You can try my social accounts instead.

Large Heading

Product Design Checklist - Reading Notes

For Entrepreneurs

Page Title-SYMBOLS

30

min

45

min

hrs

Combination these tools together become a compelling app!

  • UX design: Site map & wireframes

  • Prototype (Flinto):  Doing the usability testing

Design process article posted on Tencent Design Blog by Beibei

时常和sns相关工作的同事们一起讨论社区类网站的风格设定,logo的设计,排版等等问题,这里就工作中的实践经验和大家做分享,还有很多不足之处期望和大家共同努力。

关于视觉风格定位:

当时市面上已经有着一大批以不同明度,纯度的蓝色为主色调的sns产品

所以要让用户在众多同类产品一眼中认出来,必须给你的产品创造产异化,又根据校友的用户定位我们为校友选择了绿色作为主色调。
青葱岁月、绿色给人轻松、积极、清新的感觉,而且又和同类产品造成了视觉上较高的识别性。
下图是对外发布的第一版的QQ 校友

来经过无数次小的迭代,下面是去年一次较大的改版:

改版中的过程稿:

关于logo设计:

之前我们也给出了多个方案以及适用环境的效果比照。大家会倾向于选择写实四叶草的方案。

在产品推出公测前,我们对logo作了一次用户调查,得到了一个比较满意的反馈。下面是用研的方法和报告:
方法:以用户访谈的形式给20名在校大三以上的本科生和研究生看logo的设计稿件(包括环境使用效果图)请各自说出自己对各方案logo的理解并给出自己的评分(10分制)

关于构架布局:

这类网站的信息量很大、在整体界面的搭建上要简洁便于信息的阅读。因此网站栅格的搭建和信息的编排布局很重要。

关于文字编排:

由于大量的信息内容,文字的排版很重要,这里举出一些编排上的细节给予参考(以feed为例)。

注意:这类网站会有很多的子级页面所以在模块的分栏等细节设计上要考虑周全便于全站的统一。

关于iCON:

这类社区网站使用到icon的地方会比较多,但这类图标起的是一定范围内适度上的提醒,而不会过度打扰到用户。
因此这期间我们对icon做了次较大的优化,优化方向在颜色上更柔,造型上更平稳方正。

关于其他设计:

常常讲到这类网站的设计约束性,但设计师更要为产品挖掘亮点,为产品加分。

以上仅是个人的实践和经验总结,欢迎大家指出不足之处并提供更多宝贵建议。
希望这些分享对大家做sns方面的设计能有所帮助。

If you ask me what type of person Beibei is?


This reveals who she is!


But I promise she is prettier than this penguin :)

Design process article posted on Tencent Design Blog by Beibei

前言:项目的成就感来源于大家~~必须先感谢一切该感谢的人!

(旁白:写了很多次设计实录分享,这次是最百感交集的一次,话多这习惯还大家海涵~嘻嘻)

游戏界面截图:

项目背景 — 最大的自由
在接到项目的时候是既兴奋又紧张。兴奋的是项目种类是游戏、模式是连连看,操作平台是iPhone端,其他的都给予的设计师最大的自由。紧张的是这是我也是项目组第一次尝试游戏产品,有很多东西需要我们去学习和摸索。

“画饼” — 需求分析~勾勒宏伟蓝图
前期我们去收集了各方对产品的一个期望、建议以及衡量标准,总的来说~~就是要有好的品质。
好的品质怎么做?从游戏主题、故事脚本、角色设计,场景规划、操作界面,交互动画以及声音特效都要有好的配合。这就要求在做每个具体设计的时候有全局的考虑。
围绕用户对休闲小游戏,轻松、调节碎片时间等积极意义的感情诉求,在一次次的讨论中和产品同学一起勾勒出一个色彩缤纷,热情洋溢的夏威夷海滩,从画面、音效、到情绪表达、全方位的给用户带来开怀嬉戏、放松度假般的感受。(旁白:我们对给自己勾勒出的蓝图,也感觉到责任和压力的重大,但我们不畏惧奋起努力。最后做的还不够的地方还请海涵)。

草图设定 — 夏威夷风情~爱你不容易

在角色设定,风格定位,场景规划的过程中我们在没有看到结果的时候,内心也是充满了纠结,犹豫和斗争。有些草图因为绘制时间成本问题,草的连自己看都不好意思。开发同学在拿到全局草图尝试开发bate版时是也顶着外界对未看见最终效果的怀疑和大量的图将会有多次替换的压力下奋力工作。大家依靠的就是团队里对彼此的信任和鼓励而挺了下来。(旁白:重点就是我们都没去过夏威夷,非常期望能为了工作不辞辛苦实地考察一番~~被打中)。

精心绘制 — 静心

当全部的界面都已经画出草图确定后,大批量的精修绘制工作又扑面而来。从一草一木、到大的场景绘制、操做界面绘制、icon绘制。(旁白:这也是整个项目中心情最放松,迎来一个个喜悦的时候)

动画特效 — 创意、体力

互动动画给我们带来了更多体验和沟通的乐趣,大家创意的思绪都是欲罢不能。但是逐帧的绘制也让我们非常囧~~铛~铛~铛~这时天赐靠谱男,帮了我们大忙啦~。(旁白:动画的韵律、节奏、神情、表达的情绪、创意都是需要精心打造~辛苦大家了)

最后阶段 — 繁琐、沟通、坚持

在产品接近完成后,就开始了一系列的功能和性能测试,这样可以不断驱使我们去优化产品本身,并能及时发现bug且快速修复,然而设计和开发团队又分属深圳北京两地。可想而知,这个阶段对我们来说是多么繁琐。但这个环节对于游戏产品是非常必要的,可以说直接影响了产品的质量好坏。

收获分享

摸索总结出小游戏的设计流程:

产品发布以后在app store畅销榜蝉联冠军两周,在未做推广前提下在业界受到了相当热烈的反馈,得到用户以及客户的肯定。

重要后记
感谢一切该感谢的人!
在项目总结会上,S说他在项目中得到了从前没有过的成就感,他的成就感不是来源自己专业上的突破,而是来源于我和c和大家对每个部分工作的认真负责为一个共同目标努力奋斗。(旁白:我那个感动啊~心中的共鸣~翁~翁~翁~)
iPhone版QQ连连是大家克服重重困难自主研发完成!这里凝聚了团队里每一位成员的汗水,可以说是iPhone上最好的连连看游戏,是居家旅游之必备,希望各位能喜欢~~~~~~还等什么快去下载体验吧!

Design process article posted on Tencent Design Blog by Beibei

1. 写在前面

经过android QQmusic的洗礼后,我们将战场转到了iOS平台,这是一个更加封闭、竞争更加激烈、要求更为严格的战场。国际版图上,spodify、last.fm、pandora已酣战多时,大陆战场更有摸手、九天、豆瓣fm、虾米早早加入。姗姗来迟的iPhone QQmusic如何后来居上?这是我们继android后在iOS平台上的又一次尝试,我们总结了中间跌跌撞撞、折腾不息的过程,并希望以此积蓄经验和力量。

2. 调整产品定义

  “一个可以不断自我完善的解决方案才能真正改善状况并得以更有效地执行。”从android QQmusic开始,我们就已经尝试引入“产品定义描述”(Application definiation statement),鼓励设计团队更早地切入整个产品设计过程。同样是解决移动场景的听歌问题,不同的生态系统会给产品定位与目标受众带来差异,一端是开放的android,一端是封闭的iOS,习惯了磁盘管理思维的中国用户在iTunes中难以适从。“丢掉那根可恶的数据线!”——这是我们整个团队对产品的再一次共鸣。

3. 深入场景 狠抓用户痛点

  “细节决定成败。”除了更深入地理解一般性的“听歌”场景,我们还会更多地关注细微的用户痛点,分析用户在iTunes使用过程中遇到的不便:

(1) 家里和公司,iTunes列表难以统一管理;

(2) 追加少量歌曲不得不启动“牛刀“——iTunes;

(3) …

4. iPhone用户使用场景调查

5. iPhone 用户人群分布调查

 对用户痛点的精准把握以及行之有效的解决方案,使得这款app在需求层面就切合了用户真实的需要。

6. 餐巾纸式快速原型

“画几笔画比说一千句有效得多。”

经过前面对产品定位的讨论和需求分析,下一步应该是把“想法”表现出来。很多设计师喜欢马上打开各种原型工具,并“单打独斗”地画起图来,其实,要将一个想法转变为实际的产品形态,一支笔和一张白纸(或白板)就足够了。我们鼓励让产品经理一起参与绘制线框图,并即时表达各自的想法。在彼此碰撞中,我们会发现设计对产品的细微影响,这种逐渐培养起来的全局视野能帮助设计师更好地理解产品,当然,产品经理也得以更好地理解设计。

7. 视觉风格提案

交互定稿后正式进入视觉设计阶段。经过几番讨论后我们决定以蓝天白云为主题,打造一个温馨、轻松氛围的界面。

8. 视觉终稿界面展示

根据对于目标用户,属性特征,使用习惯,使用场景,使用时间,使用时的情感诉求,抽象情感的画面化等方面着手分析的两千多份有效问卷中表明:目标用户的教育程度和收入会比较好,爱好音乐的人们在精神上较之会比较感性。用户们在用iphone听歌的时候,80%是在使用耳机,主要使用场景是在路上或是睡前。用音乐作为陪伴,营造出一个自我的空间,在音乐里畅游,从中得获得心灵和情感上的抚慰与放松。因此我们希望,当早上您启动QQ music 的时候,金色阳光洒向云海,就像虽然我不在您身边,但依然在对您说:“ good morning,加油!又是美好一天的开始!”

动态的播放界面,深夜,带您到星辰中去漫步。也可以与您一起去深海里畅游。当悲伤的音乐响起,雨水打在玻璃上,让世界模糊起来。 我们无法触及您所有的感情,但期待与您的感情相会时刹那的交流与感动。(我们对给自己勾勒出的蓝图,也感觉到责任和压力的重大,但我们不畏惧奋起努力。最后做的还不够的地方还请海涵。)

9. 启动ICON

 ICON为保持QQMusic一直的视觉识别采用了QQMusic的LOGO为主体配以界面的主色调蓝色。

    在整个设计流程中,我们引入了一些细小的变化,成效不错。iPhone QQmusic在上架9个小时后就登上了免费app第一位,评分达到了史无前例的4.5颗星。成绩固然令人欣喜,不过问题同样存在,我们的性能还不够完美,体验还不够流畅,中间还因为对框架缺少深入的理解,导致了一次较大的调整,我们愿以此为鉴,继续前行。

最后,感谢iPhone QQmusic团队,他们为爱音乐的孩子谱写了一首游响停云的乐曲,希望你们喜欢。

WEB DESIGN 

Social network site,  Travel website,  E-commerce website, Brand design.

QZONE
POTONO
TRAVEL
Show More

© 2018 BeibeiDesign  |  All rights reserved  |  The Web made with love by your truly