|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| [ work ] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Company Designs |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| May.10, 2011 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| image design 「 图形设计 」 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 11.05.10 - 11.06.16 |
client , uqude |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
有趣网是以“猜/测/评”互动内容为核心的SCS社交网站。用户可以在上面以回答问题的方式来了解知识,但因为运营、用户参与行为的不成熟导致发展不太理想。我加入的时间是01年最新的改版,中期的加入使得很多产品上、交互上、包括一些UI上的东西都不能改动。但为了让网站有新的活力决定加入一个属于有趣网的形象。 不一定每个网站都要个形象,但形象是有他的优势在里面的。比如Twitter(的那只小鸟,整个网站的交互概念和这个形象是互相吻合的,Twitter(小鸟在唧唧喳喳叫的意思。网站的和谐的天蓝色给人一种自由发言的感觉,在形象的推广提供了一些不同尺寸的icon,这只小鸟也得到了用户的一致认同。还比如stock photography这个媒体素材资源网站。他的logo是一个相机,这是网站整体的营业方向,那么loading很巧妙的用了几节在充电的电池来表现其网站的整体概念。这些细节看似没有什么,但他却是最能出动用户心灵的地方,他可以通过这些细节来记住你的网站,好的发现和感受会使人们喜悦和骄傲。一个好的概念是设计的灵魂,他代表了你看世界的角度和感受,设计中每一个元素的目的是为了通过创造与交流来认识我们生活在其中的世界。所以我作为一个设计师要努力创造出新奇的东西也要讲熟悉的东西在未知的领域再度开发,这是我对自己的要求,在做每一件事时都要知道为什么,怎样才能做的更好。 回到有趣网这个概念的来源和我的性格有些相像,用几个词来形容他一下:外星球、乳白色、液体、外表相同、随和、快乐。通过形象把网站部分视觉信息串联起来,使用户通过一种轻松的方式来了解有趣网和我们这个团队。形象的角色划分是按照运营网站每个部门的人来虚构的,这样在网站的岗位上都有相互对应的形象出现,比如网站内容的更新、bug的修复、用户反馈的回应、活动的举办、周边的动态、表情的下载等等可以让用户由简单的内容的被动接受者变为一个参与到其中的网站合伙人。这些计划是做成小形象的个人主页,但因为后期公司经济原因被搁浅。 形象身上的质感影响到了网站视觉系统的表现达方式,整个网站给人感觉是柔和、舒服、没有强烈的质感和光感。整个形象虽然没有上升到多么创新的概念这个层次,但有些设计确实受到概念的影响,整个社区倡导自由、创造、求知,不想因为一些有很强质感和个性的东西破坏每个人娱乐在网上的方式,页面中不会掺杂任何修饰的内容区域的东西,力求做到适合就好,不想因为视觉元素而打扰用户,但希望用户浏览到任何页面都心理都很确定这是在玩有趣网。好的设计应该给用户留下一些能自己探索的空间,所以我尽量不会在功能左右加入过多的产品说明,做到让功能按键在用户需要的时候简单适时的出现在眼前。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Times , 11.06.16 - 11.08.01 |
Tool , AI + PS |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 设计要有方式的规划,包括风格在内。这一步对后面的形象统一很重要。对于光感、色彩、形态、细节的把握决定了一个设计是否讲究,有自己的个性和创意的思维。选择的颜色定位比起RGB来说在视觉上更加清晰易懂,RGB整体对于颜色的控制使人们很难形象的具体到对于颜色的影响,但HSL能够通过其中的每一个数值的变化而想象到颜色的变化,比如这颜色暗了一些就可以通过增大L的数值来使得颜色亮起来。颜色灰了就靠S来调整饱和度。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ︿ 每个形象都有自己的性格和职业。因为某些原因这里用英文写一下,不会引起太多不必要的争议。前面橙色和黄色的部分是形象的介绍。后面蓝色的部分是系统的不同状态下的提示图像。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||