APP缺省页情感化的设计技巧

144天前发布

原创文章 / UI / 观点
UX设计笔记 原创,如需商业用途或转载请与UX设计笔记联系,谢谢配合。

未经过精心设计的缺省页面降低了用户的使用体验,并可能给用户带来困扰。

什么是缺省页?

-

缺省页,即是“空页面”,
当页面内容为空时,给到用户的反馈提示。


缺省页有什么作用呢?

-
解释说明
告诉用户当前页面的信息状态出现了什么问题
安抚用户情绪
缓解用户焦虑、挫败、疑惑…的负面情绪
引导用户操作
告诉用户解决方案并引导用户进行操作
强化品牌
传达品牌定位、格调和气氛,与用户建立情感连接


缺省页设计四大要素

-


01情感

-

内容的缺失会给用户造成情绪上的焦虑,因此情感化的设计是有必要的。
1、好的情感设计能够有效的抚慰用户的焦躁心情,减少用户的负面情绪
2、能让用户的转移到当前操作上,避免用户因为情绪的不满而放弃操作。


02创意

-


案例1-Google浏览器

⼀个迷路的灰色像素小恐龙。画面好像在 讲“我迷失在网络的世界,找不到有效的数据⽽变得灰暗,需要你的帮助,让我回到我的世界。”通过简单的创意来引发用户的思考,让用户主动去参与网络异常的修复。




案例2

1、好的创意是帮助用户赶走枯燥的利器,能让用户感到眼前一亮
2、使枯燥无味的空白页显得生动有趣,让用户更加有动力去执行之后的操作。


03规范

-


风格要统一

保持样式格调要统一,如写实的,每幅样式都应该是写实风格。
布局要一致
图形的位置今可能保持一致,就不会太大的视觉跳跃,用户就会随着产品步骤往前走。
分类要清晰
根据不同场景,分类好同个场景设计元素,例如:颜色、按钮位置等。


通过设计规范可以将可页面在设计形式做到高度统一,以及可以将设计语言贯穿始终,并减少用户的认知压力。

保持每一个模块和页面的统一性,是保证产品一致性的一部分。



04品牌

-



品牌是一个产品的设计灵魂

1、品牌设计是贯穿一个产品的始终

2、是对产品标准化、规范化、统一性的基础

3、品牌设计是我们看到产品的第一印象,让用户知道当前使用的是什么。


案例1-闲鱼

分别根据不同的场景设定不同的IP形象插画


案例2-每日优鲜

分别根据不同的场景设定不同的IP形象插画


案例3-得到

使用统一风格的插画,所有空页面使用“无内容”,网络异常使用“无网络”



方法总结

-



还有可能忽略的细节

-

很多人可能会忽略掉屏幕中各种场景,导致缺省图放置的位置偏上或偏下,导致视觉感官非常难受。

以下是可能出现的页面布局,设计时也需要考虑到各种场景的布局来进行设计。


以下就是没有合理的对齐规范案例:





感谢您耐心的读完,真心希望你能获得新知哦~


-  END  -





如果觉得有帮助,请关注我的公众号 【 UX设计笔记 】,每天推送小知识




102
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息