UI产品设计如此高级,让你爱不释手

发布时间:2024-09-06 17:00:21 浏览量:177次

前言

最近我们接到了火星时代教育产品—伴正事下载页视觉改版的需求,为了提升用户体验,我们对这次改版设计进行了一些重要调整。

一、产品背景

伴正事是一款由火星时代科技研发的企业服务软件,致力于提升中小微企业的生产经营效率。作为传播移动端产品的重要入口,伴正事下载页不仅是一个工具页,更是展示火星时代品牌形象的重要方式。

现有的伴正事下载页存在风格老旧、设计不统一等问题,为了和时俱进,我们决定对其进行视觉优化,以提升用户体验和品牌认知度。

伴正事下载页

二、重新设计伴正事的下载页

需求分析

在开始设计之前,我们进行了仔细的需求分析。从视觉角度来看,我们发现下载页存在的问题主要包括设计风格过时和无法有效区分各功能模块的差异。

为了解决这些问题,我们制定了视觉升级、品牌传达和吸引用户的设计改版目标。

下载页设计问题示例

三、设计拆解

灵感搜集

通过研究国内外优秀案例,我们确定了改版设计风格定位。最终,我们选择了消失弥散搭配真实样机和3D插画搭配毛玻璃质感的设计风格。

设计风格示例
设计风格示例

(图片来源:网络)

四、视觉规范优化

1.布局

我们采用全屏布局形式,引入12栅格系统,使页面信息展示更为科学合理。

页面布局示例
页面布局示例
页面布局示例
2.色彩

我们采用品牌色蓝紫色作为主色,配合辅助色形成统一的配色方案,增强品牌记忆度。

配色示例

在下载页整体页面的配色中,我们尝试了多色渐变来提升品牌记忆度。

渐变色示例
3.字体

我们使用无衬线字体思源黑体,保证可读性和统一性。

字体设计示例
4.图标

针对核心功能内容,我们采用毛玻璃质感材质设计,以突出重点。

图标设计示例
5.情感化设计

重新设计了2.5D风格插画,以呈现不同功能的区别,增强产品的视觉吸引力。

插画设计示例

为了突出各功能的区别,我们融入了不同的设计元素,如闪电形状和盾牌设计。

功能标识示例
6.层级

采用接近性原则,使页面布局更清晰,让用户更容易获取信息和感知内容。

层级设计示例
7.设计效果

我们尝试了两种风格方案,并进行了输出参与视觉评审,为研发实现上线做好准备。

设计效果方案一
设计效果方案二

五、反思和总结

通过本次视觉风格的改版,我们成功优化了下载页的设计,为提升用户体验迈出了重要一步。接下来,我们将继续优化交互层面的内容,打造全新的设计语言,提升火星时代品牌的设计品质。

想要了解更多火星时代教育相关专业培训课程,欢迎点击点击咨询

热门课程推荐

热门资讯

请绑定手机号

x
确定