恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

浅谈空状态页面

原创文章 分类: 经验/观点 版权: 举报
684 6 4 0
2020-06-17
3.9
普通推荐

分享一下自己绘制空状态页面的一些思路,不足之处请指教



前言


本文以实际空状态设计需求为例,讲述我从了解需求到分析需求,然后设计页面,一步步设计空状态页面的思路



了解需求


1.为什么要设计空状态


产品经理在原型设计过程一般只绘制涉及产品功能的页面,空状态并非产品主要功能的页面,因此很容易被遗漏。如果设计师没有注意到这一点,去完善空状态页面的设计,则内容区会显示空白,会让用户认为系统异常,让用户不知所措。



2.空状态使用场景及作用


制作空状态页面前,先了解一下空状态有哪些使用场景,梳理一共需要绘制多少张页面


第一类场景是用户请求服务器正常的情况,这里又分为有数据和无数据。


(1)有数据:如果用户初次体验产品时,还未在本产品创作内容。此时空状态页面的作用就是帮助用户快速了解当前状态,引导用户产生内容,增加留存。


(2)无数据:用户访问服务器正常,但是此数据可能已被后台隐藏,也可能已被删除或者服务器无此类数据,所以用户端显示无数据。无数据的时候,可以增加系统推荐,毕竟商业设计赋值于业务,提高数据转化也是设计的重要价值之一。所以可以增加系统推荐功能,推荐内容通常展示在空状态页面下方,增加内容曝光率,吸引用户点击。




第二类场景用户请求服务器失败时,提示用户请求提交失败,如无网络。此时空状态的作用则是安抚空数据的页面给用户带来的负面情绪,缓解用户焦虑




分析需求


经过上面的了解,我们列出来了那些页面需要设计空状态。这里我列举设计无网络的例子。接下来我们需要去了解市面上比较流行空状态的表现形式。表现形式分为以IP吉祥物为主角代入场景和无吉祥物的情况。


IP吉祥物为主角代入场景画面的情况:在当今信息爆炸的时代,在有限的消费者心中占据一席之地,与其他品牌形成差异化,让用户记住产品,是每个品牌追求的目标。在心理学中,图像往往比文字更容易为人识别、记忆与喜爱,所以很多品牌都会塑造品牌吉祥物,通过亲和可爱的吉祥物拉近与用户的距离,建立用户粘性,从而加深品牌记忆。




无吉祥物的情况:当产品无吉祥物的情况下,通常采用虚拟的小人物代入场景,或者使用与空状态有共性的事物表达当下状态。




由于我们的产品没有吉祥物,所以我设计空状态页面时,选择采用与空状态有共性的事物来表达空状态。


下面列举我设计“无网络”空状态页的设计思路,我采用插图+文字的表现形式设计这一页面,首先是进行关键词事物联想,思考与“无网络”相关的关键词,再从思维发散的众多关键词中筛选出几个关键词,然后进行联想组合设计。




我选择了“宇航员”“星球”“WiFi”这几个关键词,当时的想法是太空中没有网络,加上宇航员,那就做的有趣点,宇航员把网络搬到太空去了,表达无网络的意思,再结合品牌色,设计了下面的页面




感觉页面有点单调,需要丰富了一下细节。加入其他小星球丰富画面元素的前后关系,增加页面空间层次。小星球跟前面的大星球让画面有了大小对比,画面没那么死板,然后再用噪点笔刷增加画面的细节与质感



一张空状态页面就这样完成了


希望我的思路对你有启发

Powered by Froala Editor

方臭臭

想找份UI实习,坐标广深

10粉丝/39关注

叫兽一鸣惊人收藏家lv.3原创小生
宠物狗服装研究室(附样机)浅谈插类型与绘制

你确定要举报浅谈空状态页面

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年06月17日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

方臭臭

TA已经获得7枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN