下面是个详细解析360杀毒软件设计实例教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!
【 tulaoshi.com - 平面设计 】
一、设计背景:
360杀毒是一款免费杀毒软件,集云安全与本地查杀防护于一身。在经过不断地改进、优化后,360杀毒无论在功能、性能以及稳定性方面都已有较好的用户口碑。到开发4.0版本之前,已经推出到了3.2版本。360杀毒不但在各大软件站的软件评测中屡屡获胜,还多次通过VB100、AV-TEST和AV-C等国际高端认证。然而,由于各类功能入口的不断增加,主界面也日显拥挤,功能分类出现重叠现象,界面长时间没有更新,使其设计风格、界面布局和用户体验等方面已经无法满足现在用户的审美观,因此对其进行改版已经势在必行。
二、设计需求:
在360杀毒4.0云动中,采用简洁、清新、灵动、轻量级的设计风格,突出用户关注的重点扫描操作和系统防护状态,并在不减少必要产品功能的前提下,轻量化界面,提供常用功能的快捷入口,优化交互方式。从而减少初级用户在使用产品过程中的学习成本,让用户易于操作、乐于操作和安全操作。
三、设计过程:
设计关键词:简洁、清新、灵动、轻量级
确定方案 在明确现有版本存在的不足以及新版本设计需求的基础上,尽可能广泛地搜集设计所需的信息资源,并通过对各种信息资源的归纳和分析,深入挖掘影响产品和设计的主要因素,提出了一系列可行的设计方案。在与杀毒团队的多次沟通和讨论后,大胆尝试新的设计风格,经过筛选,确定了最终的设计方案。
360杀毒4.0的主色调以蓝色为主,大面积留白的彩色搭配,减少材质和光效的运用,图标和控件基本都是单色无渐变。主要突出显示防御状态、保护时间和扫描模式功能,界面的整体风格简洁、轻薄、直观、平面化。
主界面 (图一)
界面优化 360杀毒4.0云动相对于3.2版本,取消Tab页导航,采用全新的界面布局,将智巧版和专业版统一,单界面内置导航。增加常用工具快捷入口,并提供快捷入口的替换操作逻辑,将图标、控件和弹出窗等风格统一化。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)在设计之初,蓝色要比现在的浅一些,留白处为纯白色,界面整体感觉比较清爽,个人比较喜欢,但在内部测试时发现在较差的显示器上,效果会显得苍白、刺眼,为了兼顾各种不同的显示器,经过几次调试和优化,效果最终确定为目前的色调方案。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)实时防护、工具栏展开界面 (图二)
实时防护设置和常用工具都采用菜单展开式设计,尽可能的减少页面之间的跳转。用户可以根据自己的使用习惯,通过拖拽的方式,自定义主界面上的常用工具项。在此,报个小料,除了点击下拉按钮以外,还可以通过其他方式展开实时防护设置界面,这是我们研发团队埋下的一个彩蛋,大家不妨找找看。
扫描过程 (图三)
在扫描界面中,增加了当前扫描项和返回功能,减少了标题栏的高度,使内容区域最大化。每个扫描项都有四种状态,并对应着相应的颜色,更直观的展示了当前扫描进度和安全状态。
扫描发现威胁 (图四)
在扫描过程中,发现威胁时,会自动跳转到威胁信息的详细界面,红色和橙色不仅是区分威胁类别,同时也代表着所带来的威胁程度。
换肤界面 (图五)
四、结语:
360安全中心已建成全球最大的云安全网络,服务近4亿用户,希望杀毒4.0云动版本的发布能给用户带来全新的视觉感受。产品中还有很多不足,后续我们会继续优化细节,适当的增加一些动态效果,增加产品的趣味性,提升产品的用户体验,欢迎大家多提好的建议和想法,以便我们将产品做的更好!
来源:http://www.tulaoshi.com/n/20160217/1577340.html
看过《详细解析360杀毒软件设计实例》的人还看了以下文章 更多>>