如何优化我负责的产品更是每个UI设计师的目标,但作为设计师,我们可以从视觉级别系统优化APP,使产品更有趣。刚刚进入市场的许多设计师总觉得他们不是。让我们开始,然后我们可以一起讨论它。
为什么要进行视觉优化?
大多数人似乎从视觉层面来说是微不足道的,因为它不会给产品带来实际好处。但作为产品的性能层,视觉语言可以为用户传达不同的心理感受。
战略层面:通过视觉手段进行品牌升级,使产品更符合品牌定位,打造用户信赖的品牌;
产品等级:目前市场上的产品高度均匀化,有必要根据产品的特点设计不同的产品,以提高产品的友好性;
个人层面:设计一个好的产品也反映了设计师自身的价值,给设计师一种成就感。
如何优化?
1.找到切入点
要从视觉级别优化应用程序,我们可以从许多方面入手。如何找到合理的优化入口点也非常重要,因为产品版本迭代通常不会提供足够的开发资源,因为它只会优化愿景。因此,如何合理地提高视觉设计师的视觉需求并实现着陆更为关键。这允许视觉设计师通过子模块进行优化并批量迭代,这为用户提供了每个版本的一些视觉惊喜。
2.子模块优化
从视觉角度来看,我们可以总结出多个模块。由于空间限制,我们将使用产品的四个模块作为设计分析的示例。
01.加载模块
通过用户加载整个行为路径,合理的加载方法将极大地增强用户体验。装载设计对产品的影响可分为三个层次:
为用户提供及时有效的反馈;
消除用户等待的焦虑,使装载变得有趣,忘记了时间的概念;
通过加载进行品牌传播,加深用户眼中品牌的印象。
从使用场景中,可以分别针对下拉负载,全局负载和滑动负载负载优化视觉。我们可以通过分析市场上的负载来分析和总结优秀的产品。如下图为百度外卖,途牛旅游和熊猫阅读装载设计:
下拉装载:
下拉装载是一个重要的设计点,使用优秀的形式可以有效地揭示品牌,增加产品的友好性。
百度外卖采用吉祥物,头盔,电动车,房屋等设计元素为外卖兄弟制作送出场景,并立即将用户带入外卖场景。风格可爱有趣,加上循环效果。下拉装载增加了用户的及时兴趣,同时增加了品牌的兴趣,并通过使用吉祥物增加了品牌曝光的机会;
通过牛徽标延伸的吉祥物,图牛旅游以旅游建筑景观为背景,给用户一个旅程场景,正确展示产品口号,品牌传播高度。
熊猫阅读通过可爱的熊猫插图和书籍的可爱效果让阅读变得有趣。
全球负荷:
全球加载和使用场景相对较宽。当网络不好时,如何消除用户等待加载的焦虑是非常重要的。
百度外卖采用拉下来加载统一的设计元素,整体风格一致,及时反馈,趣味,品牌传播并存。
Tuniu Tourism使用文案和吉祥物的线性轮廓作为加载方法,加载动态效果时显示品牌颜色。整体比较直观而简洁。
熊猫通过书中的元素和吉祥物的轮廓进行阅读,以实现装载过程。
滑动装载:
上滑载荷是相对频繁的用户行为,并且所有三种产品都削弱了载荷效果。
通过使用品牌颜色的简单装载环并加载副本来显示百度外卖;
Tuniu Tourism由吉祥物的轮廓和品牌的颜色呈现;
熊猫阅读直接以副本的风格显示。
总结:
设计出色的加载方法,同时满足及时的反馈,趣味,品牌传播功能,设计师可以通过以下几点进行优化:
场景设计:通过场景设计,用户可以即时沉浸在产品中,加深用户对产品的印象。
吉祥物的使用:使用这个元素主要是使产品更贴近用户,并能充分展示产品的特点和乐趣
动态效果的使用:巧妙的动态设计将使人们大放异彩,操作过程更顺畅
外围元素的使用:外围元素是指产品属性,例如,如果它是一个阅读产品,我们可以在设计中找到一些相关元素,如书籍,文字,纸张,笔等,以提炼和应用于该设计。
文案的使用:文案是最直接的呈现方式,通过口号的呈现可以更直观地传达品牌理念。
品牌颜色:用户对颜色的记忆清晰,品牌颜色用于加深用户对产品的印象。
02.默认模块
目前,市场上很多产品都有特殊设计的默认模块。即使没有搜索结果或网络有问题,用户也不会感到不舒服。有趣的默认状态会给用户带来一点安慰。下图显示了淘宝和百度外卖的默认状态:
事实上,良好的默认状态是它拥有自己独特的设计系统,而不是设计师可以轻松绘制插图。以上图片是淘宝和百度外卖的默认状态:
淘宝的默认状态是以主题方式呈现,相关的外围元素根据不同的默认状态,如使用空的购物车来表示购物车是空的,网络无法通过行星和Wi连接 - Fi元素表达与品牌颜色的使用相结合,为用户传达最准确的主题信息。
百度外卖默认状态以场景方式呈现。通过设计产品吉祥物和相关的状态元素,每个默认状态都有一个场景,这是一个故事,使默认状态更加生动和具体。并拥有自己品牌的独特风格。
总结:
场景化和设计默认状态的方式可以使页面更有趣,但每个都有自己的优点和缺点。主题设计风格更加通用,页面风格更弱。场景设计风格更有趣,但可扩展性较弱。每个默认状态都有自己的状态,这使设计人员的设计成本更高。
03.默认图表模块
在产品设计中,默认地图非常常见,例如,未加载屏幕时的默认地图,没有登录的默认地图或没有替换头像的第一次登录。默认地图似乎很简单,如何设计与产品匹配的地图也需要设计师仔细审查。
默认加载地图:
下图显示了加载默认图形的三种方案:A方案是纯灰色默认地图,B方案是带有图片图标的默认地图,C方案是带有产品徽标的默认地图。事实上,我们经常在市场上看到的三个程序产品,从视觉方面来看,C程序更好,它不仅实现了加载默认地图的功能,还增加了品牌的曝光度,使设计更有价值。
头像默认地图:
实际上,默认的头像模块有一个很大的优化空间,通常默认的头像是灰色的头像,设计略显单调。如下图所示:
从视觉角度来看,设计师如何通过设计打破单调,并在界面上平衡统一与丰富之间的关系。作者总结了几种常用的设计方法:
方法1:Illustrator表单
设计人员可以根据产品定位设计默认图像,并根据不同的用户组设计图像。例如,面向产品的用户是高中生。可以根据学生图像设计默认图像。如果面向产品的用户是白领,可以根据白领的特点进行设计。有针对性的图像设计不仅使页面更精致,而且使用户进入熟悉的场景,增加了页面的亲密度和用户的身份。如下所示(默认头像取自网络):
方法2:文本爬网表单
如果用户使用更多默认图像,我们可以使用技术手段执行批量匹配,在视觉上预设头像背景的颜色,然后抓取用户名的前两个单词或最后两个单词以生成用户头像。也就是说,它不会那么单调,整体视觉风格相对统一。如下图所示:
方法3:使用相关照片
一些更垂直的产品默认头像可以根据自己的产品功能进行匹配。例如,对于宠物友好型应用程序,默认头像可以使用不同的可爱宠物照片,使产品具有自己独特的色调。如下图所示:
方法4:产品吉祥物或主题图像填充
如果产品有自己的吉祥物或产品形象,设计师也可以通过设计元素进行设计,并通过相关配件或丰富的表情来装饰默认的化身,这不仅避免了化身的单调,而且加深了用户的品牌。印象。
总结:
默认的图形模块设计方法多种多样,但设计师需要掌握品牌和形式的两个核心要素。细节由设计师精心设计,不仅可以增强用户体验,还可以加深用户对品牌的认知度,同时也可以从侧面展示设计师的专业能力。我们可以找到更多的设计和探索方法,以便设计师可以获得更多的灵感和想法。
04.新手启动模块
新手指南是一种表示形式,允许用户快速学习产品的新功能。它主要分为两种类型:产品的主推功能通常基于开机画面引导;因为逻辑很强,步骤稍微多一点。通用功能更改的功能或位置通常以气泡的形式显示。
启动屏幕启动表单:
下图为百度地图新手指导设计:界面设计简洁,主题清晰,图片有趣,使用户可以清楚地了解被推送产品的功能。
设计使用产品吉祥物元素,加上需要展示的主题,使画面有趣,故事丰富;
布局排列在文本的顶部和底部,视觉语言统一;
副本简洁,主要和次要都很清楚;
在交互方面,用户可以在任何页面上关闭页面,体验更人性化,操作更方便。
泡泡指导表
气泡形式是一种相对简单有效的方式来告诉用户发生了什么,但这种提示也会在一定程度上干扰用户的操作路径。因此,当产品需要引导用户时,如何减少用户对产品的负面影响是设计师需要考虑的问题。下图显示了两种气泡引导产品的不同选项:
自由鱼APP采用新手指南形式的半覆盖方法,以尽量减少对用户的干扰;交互式关闭功能允许用户随时离开;该设计采用图形和文字的组合,通过吉祥物的形象引导用户阅读短信并最大限度地减少各方面的干扰。
百度地图采用另一种呈现模式,采用全覆盖方式,给用户最清晰的显示;交互式“查找”按钮取代了直接关闭按钮,使交互更加情绪化; design吉祥物超级可爱的表情引导用户浏览图形信息,使页面更像故事。
总结:
无论使用哪种设计形式,页面指南都可以实现产品的功能。在引导用户注意新功能的同时,有必要提高产品的良好性并避免对用户的干扰。
因此,新手指南页面不宜过多,最好是3+页面,用户可以耐心地阅读信息,不会引起用户的厌恶;
设计形式尽可能新颖有趣,以吸引用户的注意力;
需要完成交互,以便用户可以随时退出,并尽量不强制用户的设计。
3.结合模块之间的关系
在从视觉角度优化每个模块的同时,我们必须注意它们之间的相关性。虽然每个模块都相对独立,但品牌特征需要统一。品牌特征的传达反映在产品的每个细节中。一致的视觉语言将使用户对产品有更深刻的印象。因此,选择产品的每个模块的颜色,使用设计元素和大型设计风格需要设计师精确控制。
总结
通过上面的例子,我希望小伙伴们可以打开设计思路,让他们有更多的设计解决方案来解决设计问题。
作为视觉设计师,我们首先要做的是满足设计的业务需求,但在此基础上,如何使界面更加精致和美观。设计感是设计师努力工作的方向,因此设计师应该更全面地了解每一个。模块,更深入的设计探索,使设计更有价值。同时,对交互逻辑和业务需求的全面深入理解是设计人员更高水平的进步,跟上UXD趋势,使他们能够不断探索新事物,保持创新理念,提升设计价值和他们自己的社会。竞争力。
作者:网易UEDC高级视觉设计师季光如
本文来自大家都是产品经理合作媒体@网易UEDC,作者@姬广如
该地图来自unsplash,基于CC0协议