首页 > 网页教程 > 设计分享 > 分享:360安全桌面主题设计过程及思路总结

分享:360安全桌面主题设计过程及思路总结

时间:2012-08-07    作者:黑社会 玄天   来源:360UXC

设计背景:

用户都是个性的,在满足功能需求的前提下。越来越多的用户开始选择为软件更换主题皮肤。当功能完善到一定程度以后个性化将会是一款产品发展的另一个方向。简单来说更换主题可以放宽用户对于软件的认可程度,这个程度再简单的分析可以说是一种使用模式的改变,从被动的使用到主动的使用。

需求要点:

360安全桌面是一款集成“社区聊天、视频、音乐、新闻、游戏”等日常必备软件的系统软件。其目的是为了简化系统操作使用户能更加简洁的使用电脑进行工作或娱乐。为了可以使用户能更加自由的使用这个产品从而将一键换肤这个功能在这次的新版本开发中提上了日程。换主题是一种心情的体现,人是一种情绪生物,同一个人在不同的心情下他的喜好以及选择会有微妙的偏差。更换主题其实就是在换一种不同的心情。所以与其说这是一种功能到不如说这是一种体贴,一种开发者对使用者的无言的体贴。

创作思路:

作为一款最贴近用户的桌面产品这份主题的灵感就源自这份单纯而温馨的回忆~

一种源自生活的温馨回忆。我们希望这款皮肤可以使我们的产品更加贴近用户,这也是我们一贯设计产品的最终目标。

照片是我们对生活回忆的点滴记录,将那一瞬间的时刻保存在一张照片中然后再将照片一张张粘在相册里的那份温馨。每当翻开相册就会体会到那份温暖的回忆。

之所以我们将方向定位在“回忆”这部分最大的原因就是我们希望这款主题是温和的。就像一位可以一同分享的朋友。

视觉设计:

Icon诞生记 – 一份从无到有的过程

考虑到主题的设计初衷,发现传统照片的直角外框显得过于“锋利”。为了能更好的与主题风格相匹配以及更能体现品牌化的统一 icon边框的设计灵感源自 360文字 logo的演化,圆润的形状使icon的感觉更加的柔和。在扣题的同时更加体现了产品的统一性。

Icon部分的设计从草稿阶段到最后第一版的效果图一共只有一周的设计时间,任务很紧急。从草稿到第一版,一开始定位为比较偏向默认风格的设计方案。后来经过讨论发现这种方案不适合作为一款主题,实在是太没有特点了。所以二次回炉以后将整个风格设计的更加个性化,确定大致方向以后再次细化了一些细节的设计。

文件夹的展开动画 – 最具亲和力的交互往往都源自于生活的真实感。

文件夹给我的第一感觉就好像以前用的老相册。所以文件夹的交互设计中模仿了老相册揭开的感觉。就是那种有一块不干胶的背板覆盖了一层透明的薄膜的那种。

缓缓揭开那封存的记忆,慢慢的在脑中拼接那一幕幕的回忆。回忆都是美妙的,因为美妙的都是到达结果之前的那一段段旅程过程。

界面设计

我们要设计一款主题,首先要了解主题的范围,受众和包括哪些必要的元素哪些元素是可以个性化的哪些是必须严格遵守规范的。

前期的构思非常重要,他直接影响到后期的成型,这个阶段所占有用的时间不会小于整个项目周期的20%

丰富的界面,要想视觉清爽,空间感显得有为重要,这一点包括:主次层次之间的比例,各个模块之间的距离,单个模块里信息的间距。脱掉厚重的衣物,身体的线条自然会显现出来,但想吸引更多的目光,那就得把“面”练得好点。

作为一款桌面产品,丰富其视觉感受,我们针对一种风格定位采用以温馨为视觉设计方向。“木纹”给我们的直观感受是自然亲切的,既然皮肤的定位是以“温馨”的概念,那么整体色彩的选择也要向这一点靠近,所以我们采用黄色来成为整体主题色调。

主题的风格与产品图标白色圆润包边的形态相呼应,通过木纹材质的配合使这款产品的设计简洁而不是简单,细腻的细节处理,精致而又不繁复琐碎的,界面的合理布局和桌面壁纸显示的重点突出给这款产品设计增添了几分灵气,界面设计的把握恰到好处的展示了产品的功能性和巧妙的操作性,使用户体验有了很好的提升。

相关推荐
十五个用户体验设计(UI/UX)案例剖析
腾讯CDC分享QQ登录界面的banner设计过程点滴
移动终端全新界面设计语言“Metro”简析
20个精致漂亮的视频播放器界面设计欣赏及点评
浅谈界面设计中的结构设计
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
移动应用设计的横竖屏切换中的界面设计与体验提升
国外精彩网页界面设计案例赏析
成功的视觉设计需要给用户传达四个要点
富有灵感和创意的web布局及交互设计赏析
Photoshop教程:提高IOS设计效率的30个要诀分享
在网页设计中如何应用黄金分割比例?
优秀网页/平面设计师是怎样炼成的
符合用户操作习惯的网站界面设计分享
21个带斜线排版设计的网站设计创意欣赏
另眼观看用户界面扁平化设计的不足之外
产品视觉设计与用户心理的有趣现象
平面设计中关于控制视觉层次的设计方法
10个漂亮实用并附带源码的Web设计教程分享
创造视觉冲击力的网页设计配色技巧
在视觉设计中对像素的深度解析
网页设计中关于透明效果的小技巧分享
色彩情感对用户体验设计的影响
换汤不换药?看应用们如何“为iOS 7设计”
APP浏览体验设计的思考:如何理解用户的眼?
高效UI设计秘笈 Photoshop CC使用技巧图文教程
25个创意独特的Web表单设计案例欣赏
2014年Web网页设计的10大发展趋势前瞻
20个创意漂亮的手机应用程序登陆页面设计欣赏
界面设计教程:如何做好扁平化设计之交互篇
美工做推广?我的工资是如何从3.5K涨到9K的
移动应用图标配色诀窍 APP界面配色设计教程
网页设计教程:首屏图文混排10大技巧分享
Android应用开发教程:最常见的十大导航设计错误!
扁平化:回归真实的设计

精彩推荐

热门教程