童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

魔鬼细节篇对两种特殊的数据状态进行探讨

6月10日 尘世客投稿
  优秀产品和一般产品差距往往不在大家都能感知到的显眼位置,而在那些各种异常状态下的细节处理。对于特殊状态的处理不仅能够反应设计师的细心程度,更是对产品逻辑的完整思考的呈现。笔者对两种特殊的数据状态进行探讨:数据为空和数据过多,希望对大家有所帮助。
  一、数据为空状态
  对于页面空状态的处理方法,大家应该都比较熟悉,在这里做下简单的归纳。除了基本的当前状态的显示外,还可以充分利用空页面,显示额外的信息引导,考虑展示以下三种信息:
  功能入口:提供相关功能的入口,引导用户到其他页面去查看内容(如图1QQ阅读)。
  推荐数据:提供热门数据、个性化推荐数据供用户选择。常见于电商购物车等页面,能够有效地提升转化率、购买率(如图2考拉海购)。
  操作引导:提供相关操作的示意和引导,尤其是对于一些较为隐藏的交互操作,能够起到良好的引导作用(如图3网易云阅读)。
  (图1QQ阅读、图2考拉海购、图3网易云阅读)
  要特别注意的是,对于这些额外内容,要考虑其与页面本身的关联性。只有关联性强且用户可能感兴趣的内容,才合适在页面中呈现。
  二、数据过多状态
  对于数据过多的情况,通常可以将信息进行折叠或者省略。折叠即将内容收起,显示部分内容,并提供查看更多的操作。而省略即是直接将内容折断,略去超出部分不展示。
  1、信息的折叠
  信息折叠默认只展示部分信息,同时提供一个查看全部信息的操作。对于查看更多信息的操作方式,通常有三种方式:一是点击直接在当前页面向下展开,二是点击跳转至二级页面,三是点击展开半屏浮层,在浮层上显示全部信息。
  这三种方操作方式,在界面中显示时需要能够明确的告知其操作结果,比如向下展开信息,通常配有向下箭头,示意用户内容向下展开。
  (1)入口的折叠
  入口较多无法完全展示,可以向下展开全部入口。入口有反复查看的需求,因此入口折叠后通常需要有收起操作,便于用户反复查看。
  (图4网易新闻)
  (2)内容的折叠
  多用于评论、简介等较长的文字内容。内容通常一次性阅读后继续往下浏览其他内容,较少返回页面上方,因此通常不需要收起操作。
  Case1:评论折叠后,点击更多是向下展开,还是跳到新页面?
  向下展开信息,内容自然向下延续,有利于阅读的连贯性。但当所展开的内容非常多时,会大大增加页面长度。(如图5网易新闻)
  跳转至新页面便于展示更多内容信息,同时不影响页面长度。但对当前阅读打扰较大,并且跳到新页面后需要查找上次阅读的断点继续阅读,阅读效率较低。(如图6腾讯新闻)。
  (图5网易新闻)
  (图6腾讯新闻:为了解决用户需要寻找断点继续阅读的问题,腾讯新闻在新页面中对上级页面中已显示的内容进行飘灰处理,提升了阅读体验)
  对于这两种方式,需要根据产品的定位和具体需求进行选择。对于网易新闻来说,跟贴内容是非常重要并且有特色的内容,鼓励用户多发评论和回复进行跟贴盖楼,内容越长越具有传播意义,鼓励用户多停留在跟贴页面。因此采用了向下展开内容的方式。
  接下来给大家再安利一个内容折叠展开的显示逻辑:
  Case2:默认显示内容为最多X行,多于X行后内容收起为Y行,XY。
  以网易新闻的跟贴内容为例,跟贴内容最多显示7行,多于7行后内容收起为5行。
  通常的处理方式是多于7行就收起为7行,这样就造成点击展开后可能只展开了一两个字,大大的降低了点击展开的操作和显示效率。
  收起行数小于最大显示行数的折叠展开逻辑,能够有效避免这种情况。同时保证更多内容能完全展示,也节省了折叠后空间。
  Case3:折叠后点击出现半屏浮层
  露出部分内容,点击展开半屏浮层显示全部内容,如下图。
  (图7优酷视频)
  这种方式常见于视频播放等页面。页面内承载了多个内容模块,每个模块显示部分内容,点击展开浮层显示全部内容。一方面保证了观看体验,避免跳出页面对观看体验的打断,另一方面有利于多个内容模块的展现。
  2、信息的省略
  多用于标题、昵称、简介等文字信息,通常是在内容列表页进行省略显示。需要注意的是在列表页省略的标题、简介等,在内容详情页尽量保证能够完全显示。否则在整个app内没有能够查看到完整信息的页面。如下图中在列表中标题省略后,在详情页标题需要最多显示两行保证完全露出。
  (图8网易云阅读)
  以上是笔者对数据特殊状态设计的一些总结思考,通过笔者在设计中最常遇到的案例,选取了一些角度进行分析,希望对大家在处理类似情况时有所帮助。
投诉 评论

工业设计师YvesBhar:AI时代的十条设计原则随着人工智能的发展,设计师面临着全新的挑战。这是因为,在AI、机器人学和物联网方面,可遵循的设计规则或者指导尚未形成。据Fastcodesign报道,在布鲁克林的ADO设计大会……魔鬼细节篇对两种特殊的数据状态进行探讨优秀产品和一般产品差距往往不在大家都能感知到的显眼位置,而在那些各种异常状态下的细节处理。对于特殊状态的处理不仅能够反应设计师的细心程度,更是对产品逻辑的完整思考的呈现。笔者对……表单设计15个方针,构建又好又实用的表单界面表单的好坏直接影响着用户的体验,那么如何才能设计出更好更实用的表单呢?一起来看看作者分享的几个表单设计方针。无论是注册流程、多视点布局、或者是单调的纯数据录入界面,表单都……四步骤,用系统思维分析复杂系统的设计(一)这个世界有些系统是由人类构建的,比如手机APP,国家的金融系统,半导体设备,春运高铁调度系统等,有些是经过社会发展或自然演化而形成的,比如大脑的结构,黑猩猩的部落种群系统等,倘……Facebook产品设计实习生:分享其在VR之路的所见所感开工之后的第一篇译文回到VR主题。产品设计实习生的总结。我越来越喜欢FB了,他们有社交,他们有VR,他们有JohnCarmack,他们有JulieZhuo,他们有坚实且越发具有……以优酷直播项目为例,谈产品初期如何进行结构框架层设计主导意味着肩上的责任越大。设计师在项目中的主导性提升了,带来的挑战和质疑声也增多了。从美女游戏主播到素人直播,再到大型的科技产品发布会,直播作为另一种视频媒介和人的互动方……精选干货如何制作一套互联网产品的设计规范?我最近对设计规范(DesignGuidelines)很有兴趣,收集了不少有用的资料,包括什么是设计规范,做设计规范的最佳时机,如何制作设计规范等,全是精选干货,在此分享给大家。……产品防护:5种常见的短信验证码防刷策略产品人员要在防护与用户体验之间寻找平衡,结合自身产品特点选择,要未雨绸缪不应到短信被刷才进行防护。短信验证码作为重要的身份验证工具,因其操作简便、安全性高、时效性强等优点……算法驱动设计趋势已来,产品设计如何与算法进行创新合作?本文作者描述的算法驱动设计理念,正好与国内诸多公司逐渐兴起的设计自动化趋势有不少一致见解,相信认真阅读后,你还能在这变幻莫测日新月异的科技更迭之中,紧握设计价值的立足之本。……表单设计:如何规避错误,构造出彩的用户界面?表单是一个非常常见的模块,设计不易出彩却很容易出错。生活中很多地方都会涉及到表单,经常遇见的有登录注册、预订车票、填写个人信息等等。表单是一个非常常见的模块,设计不易出彩……电商后台系统:管理后台之账号管理(一)之前的一篇文章,整体的介绍了电商后台系统(从三大方面,对电商后台系统进行了整体的介绍),之后将会对每个系统的每个细分模块进行说明。系统管理模块顾名思义,是对整个系统的设置和管理……四个设计要点,提升商品列表页“逼格”电子商务网站中的商品列表页也被称为商品聚合页,用户可以在一个页面中概览数以千计的商品。商品列表页的重要特点是信息量大,所以布局清晰合理,功能易用是突出商品列表页“逼格”的设计关……
移动设备需求分析设计新解:聚焦设计与管理微软官网为何不用每字造价100美元的雅黑字体?合理限制用户的操作可用性有如此重要?为幼龄儿童设计iPad软件介面的四条心得小屏幕移动设备网页设计注意事项看FACEBOOK新群组是如何与其他功能交相呼应?理解网页中的视觉层次网页设计工作的95在于字体排印浅谈互联网产品的情感化设计用研无用?对用户研究实践的思考

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界