360安全桌面主题的设计小结 360安全桌面风格设计

所属分类: 网页制作 / CSS 阅读数: 1284
收藏 0 赞 0 分享
360安全桌面主题设计小结 脚本之家
  设计背景:
  用户都是个性的,在满足功能需求的前提下。越来越多的用户开始选择为软件更换主题皮肤。当功能完善到一定程度以后个性化将会是一款产品发展的另一个方向。简单来说更换主题可以放宽用户对于软件的认可程度,这个程度再简单的分析可以说是一种使用模式的改变,从被动的使用到主动的使用。
  需求要点:
  360安全桌面是一款集成“社区聊天、视频、音乐、新闻、游戏”等日常必备软件的系统软件。其目的是为了简化系统操作使用户能更加简洁的使用电脑进行工作或娱乐。为了可以使用户能更加自由的使用这个产品从而将一键换肤这个功能在这次的新版本开发中提上了日程。换主题是一种心情的体现,人是一种情绪生物,同一个人在不同的心情下他的喜好以及选择会有微妙的偏差。更换主题其实就是在换一种不同的心情。所以与其说这是一种功能到不如说这是一种体贴,一种开发者对使用者的无言的体贴。
  创作思路:
  作为一款最贴近用户的桌面产品这份主题的灵感就源自这份单纯而温馨的回忆~
  一种源自生活的温馨回忆。我们希望这款皮肤可以使我们的产品更加贴近用户,这也是我们一贯设计产品的最终目标。
  照片是我们对生活回忆的点滴记录,将那一瞬间的时刻保存在一张照片中然后再将照片一张张粘在相册里的那份温馨。每当翻开相册就会体会到那份温暖的回忆。
  之所以我们将方向定位在“回忆”这部分最大的原因就是我们希望这款主题是温和的。就像一位可以一同分享的朋友。
  视觉设计:
  Icon诞生记 – 一份从无到有的过程
  考虑到主题的设计初衷,发现传统照片的直角外框显得过于“锋利”。为了能更好的与主题风格相匹配以及更能体现品牌化的统一 icon边框的设计灵感源自 360文字 logo的演化,圆润的形状使icon的感觉更加的柔和。在扣题的同时更加体现了产品的统一性。
  Icon部分的设计从草稿阶段到最后第一版的效果图一共只有一周的设计时间,任务很紧急。从草稿到第一版,一开始定位为比较偏向默认风格的设计方案。后来经过讨论发现这种方案不适合作为一款主题,实在是太没有特点了。所以二次回炉以后将整个风格设计的更加个性化,确定大致方向以后再次细化了一些细节的设计。
  文件夹的展开动画 – 最具亲和力的交互往往都源自于生活的真实感。
  文件夹给我的第一感觉就好像以前用的老相册。所以文件夹的交互设计中模仿了老相册揭开的感觉。就是那种有一块不干胶的背板覆盖了一层透明的薄膜的那种。
  缓缓揭开那封存的记忆,慢慢的在脑中拼接那一幕幕的回忆。回忆都是美妙的,因为美妙的都是到达结果之前的那一段段旅程过程。
  界面设计
  我们要设计一款主题,首先要了解主题的范围,受众和包括哪些必要的元素哪些元素是可以个性化的哪些是必须严格遵守规范的。
  前期的构思非常重要,他直接影响到后期的成型,这个阶段所占有用的时间不会小于整个项目周期的20%
  丰富的界面,要想视觉清爽,空间感显得有为重要,这一点包括:主次层次之间的比例,各个模块之间的距离,单个模块里信息的间距。脱掉厚重的衣物,身体的线条自然会显现出来,但想吸引更多的目光,那就得把“面”练得好点。
  作为一款桌面产品,丰富其视觉感受,我们针对一种风格定位采用以温馨为视觉设计方向。“木纹”给我们的直观感受是自然亲切的,既然皮肤的定位是以“温馨”的概念,那么整体色彩的选择也要向这一点靠近,所以我们采用黄色来成为整体主题色调。
  主题的风格与产品图标白色圆润包边的形态相呼应,通过木纹材质的配合使这款产品的设计简洁而不是简单,细腻的细节处理,精致而又不繁复琐碎的,界面的合理布局和桌面壁纸显示的重点突出给这款产品设计增添了几分灵气,界面设计的把握恰到好处的展示了产品的功能性和巧妙的操作性,使用户体验有了很好的
更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多