11月1号我们发布了官方网站2.0版本，这次网站从设计到实现由2个人完成，耗时23天，每天16小时工作强度，这天是对我非常有意义的一天，让我来跟大家分享背后的故事与设计思路。
某日约见客户，客户对我们的能力表示极大的认可，因为出于砍价，客户说我们的网站做的还没他们好，因为我们的战略就是服务于对互联网认知极高的客户，所以我们的客户公司自己一般都会有很多设计师，当谈及到这点时，显得我们很不专业，他们时需要更好的设计，而并非一般的，因为他们自己的设计师就可以搞定。当时我被问的哑口无言，因为我自己都承认之前的官网是敷衍的、丑陋的，我连自己都说服不了，这件事好好的给我上了一课，专业的人就要去做专业的事。
回来后，我与我们的技术总监商讨了一下，决定放下我们两个手中的事，用最少的资源做一件有意义的事，因公司前期发展不能抽取过多的人参与到这个想法中，所以在前期网站定位上，我们采用纯手绘的方式，这样就不用去买素材了:)
我起初对网站进行了风格设计，我希望他是低调、沉稳、有内涵的，他不喜欢说话，也不喜欢表现自己，他像一杯咖啡，如果你慢慢的品他，会发现他会有很多细节感染到你。所以SparkDesign官网我们是从头的一盏灯部开始设计的。
LOGO
一盏灯，不需要过多修饰，他在拐角处，静静在那。在设计这盏灯的时候，大量光源用到了图层叠加模式，在做到前端的时候，很多前端工程师直接会将合层导出png，而这时候叠加效果会消失，原来通过叠加出来的蓝色光源就变成白色光源，而这是很多不做设计的同事看不到的细节，所以我们在团队合作的时候，最好与你的搭档进行沟通或提交技术文档，最好的方法就是帮助他们导出png，而因为我的技术总监也会做设计，所以他直接规避了这个问题，这也让我感觉到，一个配合默契的团队会大大的提高效率。
菜单
在阴暗处伸出的展示台，这个展示台没有用木头、金属等材质，我希望他不要宣兵夺主，只要做个载体就好，这就是他最大的价值。在展示台上，原始状态是没有文字的，弹起状态才会有文字的显示，分别为——首页——工作——服务——我们，在图形设计上我用了形态表现方式，三角、圆、方，可能你起初认为这图标的识别性不高，但是在用过一次后，你会被这些最简单的图形而留下深刻印象，再去寻找目标时，就不需要进行思考。
新闻／音乐
新闻栏目，我们设计成一个电视机，他在切换的时候会出现雪花点的动效，电视机右侧设计了音乐播放器，点击他可以进行音乐的播放和暂停。我们在开关上进行了很多尝试，刚开始在音乐播放器的转动上，我们采用gif，但是透明背景会出现锯齿，除非与背景切成整体，而起初的设计，电视机是可以进行视差滚动的，所以背景会出现无拼合色块。再尝试多种优化方式后，我们将播放器的一小块采用flash，与电视机进行无缝拼接，这样只有几kb的大小，而且动态效果也可以产生的非常自然。
视差－镜头
在主动画区域，我们第一个要展现的是“视觉”，所以我设计了一个镜头，依然没有过多修饰，只是一个镜头的正面主体，
采用jQuery进行视差滚动效果，镜头是球体，所以在设计运动方式上，让他从上掉落下来，进行弹跳。在毫秒的计算上进行了大量的调试，每一种运动规律与不同时间段组合都会产生不同效果。时间控制好，就可以让图形说话。
视差－盒子
第二个主题是“交互”，我将设计师的工具元素投入到环境里，用吊车的方式，体现“工程”的概念，设计不仅仅是一张图而已。为了增加趣味性，我将其中一个集装箱出了一点小事故，有很多朋友给我建议，这样寓意不好，但我不想有太多无关紧要的东西限制和干扰，这只是为了来点趣味性而已，如果因为这个小事故说明我们设计能力有问题，那就有点扯了。
视差－速度
第三个主题“速度”，我想体现设计给用户带来的还有“便捷”，隐藏在逻辑性之后带给用户“拒绝思考”的快感。我设计了速度盘，在他的身后是各种形式的控件元素，设计是理性的。我还在速度盘里设计了新的细节，放在了二期优化上。在做视差的时候，由于他有运动规律和出现顺序，所以要将时间轴的概念画在纸上方便开发者搭档理解，运动规律还有一个“挤压”“拉长”的概念，由于jq的限制，我们也把这个细节放在了未来计划之中。
工作／服务
作品展示鼠标移动上去的效果是每天加班到晚上，开了灯，屏幕上会出现投影，我将主体模糊，将公司的灯映射到上面，为了让焦距感更强，在上面增加了细微的颗粒用来交代屏幕上的脏。
拖动条用了移动端的进度条，可以观察到我们阅读的位置和容量。
在屏幕的左右定位了两条遮罩层，让作品移动到边缘可以直接隐去。
联系我们
厨房是厨师的重地，不可侵犯的，设计师的工作室也是神秘的，所以我设计了一扇门，门底透出工作的灯光，返回按钮设计成安全出口与风格统一。
表单
当用户提交需求的时候，因为界面的元素而给双方的身份进行定位，对你是甲方，我是乙方，但是你是寻求帮助，而我们是提供帮助。所以我在输入框设计了一个听诊器，这样的身份定位，才能让我们能站在正确的位置去达成共识，做好事情。
设计者／开发者
设计了一个滚动按钮来展示此网站的设计者和开发者。
外部链接
除微信是二维码展示，其他都是新窗口打开链接，所以从头部下拉一个射灯，光源打开，投出二维码。
预加载
设计加载是从头部灯延伸出去，所以设计了插座，加载时电流从下往上，链接到灯泡时，灯变亮，主场景出现。
404
404则是电线断了，因为404页面要考虑到页面加载问题，所以去除了之前的渐变背景，改为纯色，直接用css写背景颜色，这样对网站优化非常好。
彩蛋
希望网站是有内在的，除去主功能之外，还有一些隐藏的东西可以给大家挖掘。喜欢的朋友可以去找找这个彩蛋在哪哦！
网站还有很多设想的没有启动，但是我会不断的更新优化他，因为看到他，我会想起和同事每日每夜去不断给他注入新东西的快乐，在设计的过程中一点也不疲劳，甚至睡不着觉，这是一种享受。希望大家多多支持，感谢收看。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
SparkDesign官方网站2.0地址：http://www.sparkdesign.cn/
新浪微博:邵飞微帮助 www.shaofei.com.cn www.sparkdesign.cn
某日约见客户，客户对我们的能力表示极大的认可，因为出于砍价，客户说我们的网站做的还没他们好，因为我们的战略就是服务于对互联网认知极高的客户，所以我们的客户公司自己一般都会有很多设计师，当谈及到这点时，显得我们很不专业，他们时需要更好的设计，而并非一般的，因为他们自己的设计师就可以搞定。当时我被问的哑口无言，因为我自己都承认之前的官网是敷衍的、丑陋的，我连自己都说服不了，这件事好好的给我上了一课，专业的人就要去做专业的事。
回来后，我与我们的技术总监商讨了一下，决定放下我们两个手中的事，用最少的资源做一件有意义的事，因公司前期发展不能抽取过多的人参与到这个想法中，所以在前期网站定位上，我们采用纯手绘的方式，这样就不用去买素材了:)
我起初对网站进行了风格设计，我希望他是低调、沉稳、有内涵的，他不喜欢说话，也不喜欢表现自己，他像一杯咖啡，如果你慢慢的品他，会发现他会有很多细节感染到你。所以SparkDesign官网我们是从头的一盏灯部开始设计的。
LOGO
m_1385002099655.jpg
一盏灯，不需要过多修饰，他在拐角处，静静在那。在设计这盏灯的时候，大量光源用到了图层叠加模式，在做到前端的时候，很多前端工程师直接会将合层导出png，而这时候叠加效果会消失，原来通过叠加出来的蓝色光源就变成白色光源，而这是很多不做设计的同事看不到的细节，所以我们在团队合作的时候，最好与你的搭档进行沟通或提交技术文档，最好的方法就是帮助他们导出png，而因为我的技术总监也会做设计，所以他直接规避了这个问题，这也让我感觉到，一个配合默契的团队会大大的提高效率。
菜单
m_1385002201888.jpg
在阴暗处伸出的展示台，这个展示台没有用木头、金属等材质，我希望他不要宣兵夺主，只要做个载体就好，这就是他最大的价值。在展示台上，原始状态是没有文字的，弹起状态才会有文字的显示，分别为——首页——工作——服务——我们，在图形设计上我用了形态表现方式，三角、圆、方，可能你起初认为这图标的识别性不高，但是在用过一次后，你会被这些最简单的图形而留下深刻印象，再去寻找目标时，就不需要进行思考。
m_1385002202969.jpg
新闻／音乐
m_1385002203578.jpg
新闻栏目，我们设计成一个电视机，他在切换的时候会出现雪花点的动效，电视机右侧设计了音乐播放器，点击他可以进行音乐的播放和暂停。我们在开关上进行了很多尝试，刚开始在音乐播放器的转动上，我们采用gif，但是透明背景会出现锯齿，除非与背景切成整体，而起初的设计，电视机是可以进行视差滚动的，所以背景会出现无拼合色块。再尝试多种优化方式后，我们将播放器的一小块采用flash，与电视机进行无缝拼接，这样只有几kb的大小，而且动态效果也可以产生的非常自然。
视差－镜头
m_1385002204595.jpg
在主动画区域，我们第一个要展现的是“视觉”，所以我设计了一个镜头，依然没有过多修饰，只是一个镜头的正面主体，
m_1385002205485.jpg
采用jQuery进行视差滚动效果，镜头是球体，所以在设计运动方式上，让他从上掉落下来，进行弹跳。在毫秒的计算上进行了大量的调试，每一种运动规律与不同时间段组合都会产生不同效果。时间控制好，就可以让图形说话。
视差－盒子
m_1385002206512.jpg
m_1385002207268.jpg
第二个主题是“交互”，我将设计师的工具元素投入到环境里，用吊车的方式，体现“工程”的概念，设计不仅仅是一张图而已。为了增加趣味性，我将其中一个集装箱出了一点小事故，有很多朋友给我建议，这样寓意不好，但我不想有太多无关紧要的东西限制和干扰，这只是为了来点趣味性而已，如果因为这个小事故说明我们设计能力有问题，那就有点扯了。
视差－速度
m_1385002208311.jpg
m_1385002209391.jpg
第三个主题“速度”，我想体现设计给用户带来的还有“便捷”，隐藏在逻辑性之后带给用户“拒绝思考”的快感。我设计了速度盘，在他的身后是各种形式的控件元素，设计是理性的。我还在速度盘里设计了新的细节，放在了二期优化上。在做视差的时候，由于他有运动规律和出现顺序，所以要将时间轴的概念画在纸上方便开发者搭档理解，运动规律还有一个“挤压”“拉长”的概念，由于jq的限制，我们也把这个细节放在了未来计划之中。
工作／服务
m_1385002210243.jpg
作品展示鼠标移动上去的效果是每天加班到晚上，开了灯，屏幕上会出现投影，我将主体模糊，将公司的灯映射到上面，为了让焦距感更强，在上面增加了细微的颗粒用来交代屏幕上的脏。
m_1385002210779.jpg
拖动条用了移动端的进度条，可以观察到我们阅读的位置和容量。
m_1385002211217.jpg
在屏幕的左右定位了两条遮罩层，让作品移动到边缘可以直接隐去。
联系我们
m_1385002212122.jpg
厨房是厨师的重地，不可侵犯的，设计师的工作室也是神秘的，所以我设计了一扇门，门底透出工作的灯光，返回按钮设计成安全出口与风格统一。
表单
m_1385002212801.jpg
当用户提交需求的时候，因为界面的元素而给双方的身份进行定位，对你是甲方，我是乙方，但是你是寻求帮助，而我们是提供帮助。所以我在输入框设计了一个听诊器，这样的身份定位，才能让我们能站在正确的位置去达成共识，做好事情。
设计者／开发者
m_1385002213593.jpg
设计了一个滚动按钮来展示此网站的设计者和开发者。
外部链接
m_1385002214257.jpg
除微信是二维码展示，其他都是新窗口打开链接，所以从头部下拉一个射灯，光源打开，投出二维码。
预加载
m_1385002214852.jpg
设计加载是从头部灯延伸出去，所以设计了插座，加载时电流从下往上，链接到灯泡时，灯变亮，主场景出现。
404
m_1385002215524.jpg
404则是电线断了，因为404页面要考虑到页面加载问题，所以去除了之前的渐变背景，改为纯色，直接用css写背景颜色，这样对网站优化非常好。
彩蛋
m_1385002215925.jpg
希望网站是有内在的，除去主功能之外，还有一些隐藏的东西可以给大家挖掘。喜欢的朋友可以去找找这个彩蛋在哪哦！
网站还有很多设想的没有启动，但是我会不断的更新优化他，因为看到他，我会想起和同事每日每夜去不断给他注入新东西的快乐，在设计的过程中一点也不疲劳，甚至睡不着觉，这是一种享受。希望大家多多支持，感谢收看。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
SparkDesign官方网站2.0.jpg
SparkDesign官方网站2.0 (1).jpg
SparkDesign官方网站2.0 (2).jpg
SparkDesign官方网站2.0 (3).jpg
SparkDesign官方网站2.0 (4).jpg
SparkDesign官方网站2.0 (5).jpg
SparkDesign官方网站2.0 (6).jpg
SparkDesign官方网站2.0 (7).jpg
SparkDesign官方网站2.0 (8).jpg
SparkDesign官方网站2.0 (9).jpg
SparkDesign官方网站2.0地址：http://www.sparkdesign.cn/
新浪微博:邵飞微帮助 www.shaofei.com.cn www.sparkdesign.cn
标签
