界面中的信息过载如何设计?.docx
《界面中的信息过载如何设计?.docx》由会员分享,可在线阅读,更多相关《界面中的信息过载如何设计?.docx(27页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、从两个大环境下看待这个问题,一个是移动端产品,另一个是PC端产品,这 里我们主要讨论移动端产品。由于移动端页面尺寸较小的特性,常常无法像PC端那样在一个页面中展 现出多信息多任务,因此在面对多级的信息架构设计时,最常规且传统 的做法是将某一场景/任务下的信息,通过设计页面的跳转/或增加页面 的长度来实现。但是一个现实的问题在于,用户愿不愿意滑动?根据埋点数据显示,在 首屏没有做好内容曝光的前提下,多数移动端页面超过首屏的内容点击 量会急剧下滑,说明用户很少主动的查看一屏以外的内容。因此对于移动端产品来说,一些重要的内容必须保证用户在一屏内可以 看到,而用户有必要进一步阅读的内容也需要做好用户浏
2、览行为的引 导。从适用场景角度,可将信息超载的设计类型分为I页面展示信息超载 和页面版块信息超载,本文将分为上下两节针对此将进行详细的案 例分析提供。页面展示信息超载根据不同的用户需求以及适用场景,当用户仅限于当页的浏览时,如何 保证大量的信息能有节奏、有目的的传达给用户是我们需要考虑的。案例展示:无限加载快速回到顶部海M播(HH聚划算SB SB CD 学HAi书旗小说一快捷翻页引导23:50同花喉App描器 关注.快讯 问步 靛费参赛“庄股”现形?三股寓奇连续跌停.最惨暴跌遍40%!金科文化16事长被查股价重挫南岭民。10 0-, *H文化 ,r多家高科技公司被列入“实体清单” 光启、大疆、
3、中芯国际回复称膨光伏隆念板块拉升走强多只个股涨停川菊般倒8.08%京山吐机9.98.我心口含 2.2pAit HB13 29刷新点新U的C共商.464加出C57 AS. 龙头股!近期市场风格极1割口.费金抱EB明显.过去 以小为美.现在以大为美,过去大合股搭台小 食股屿戏.现在基大盘股庵台自己唱戏,$.,11X8 1746人旬,4小药断SRISA同花顺书旗小说一快捷翻页引导无限加载寻找感兴趣的内容23:58!*=,Q华为智黑屏愫自实时用尸话题视筑盐透专栏 Live华为智.H解S系列发布 如何评价华为于12月21日发布的华为智意牌S系列?有BB些亮点和缺乏?江中雪月:定位低于中HIV和高端XJR
4、-l W列,但在屏文音箱和芯片等传统电视不乏! 297 网 8评论昨天18 49二.一:丁华为窗意屏S系列65英寸产品总价4999元 起,如何评价这一定价策略?部者N大:这个相对亲和的累列朴齐了华 力咎”自上吒下的旧图,更壬要的景6费固昨天W14船遗号栏2020年华为手机选购指南来自-020年手机送司指南) 近期由于贸U战华为芯片库存吃装,全线机里都在不断 潴价.看中的话建议迅速入手.不必等.华为终罐包括贴 3-9万热从性价比来说华为智慈国值得买吗?BlockO:修为电视智MJW.且匐玄斯个大MMHHF 的品建分类华为智!,走品位皓HHE9 Q 。5。 a M *n知乎一滑动前12:38V 4
5、G ,,言 W *夕 m&waptusftAB ut“f 假设、0精选呈做F新品 M 突患KK3r-(LEG0R*tfiF*7582 迈双伦.*119.oo” WSW1BW80t?Q*MIS微博23:58”:!宅Q华为管理屏、*遹大他人 U;19.8万人关注4GB运行内存,综合来说配置是比索超超制屏PRO要好 的.华为/4Q解展是可以通过忧思安典安卓取住的.60费向 68评论 72-13髯读华为智超层S系列:“十年不过时”将成大展行业标配海蜂国科技:能J(正实现全场景智U无,切横.果用鸿*2,0的华为UMMS系.1*7* :新发布的华为隹发第s65寸和荣超智裁屏X1 65寸4g版比照照个值得购
6、买呢?/虎牙苍云1E 13万很雉说,6桢18 M国Pr坏配在PPT拥有 姓名画册方面华为智M9TS65玄两点比5 同 7评论T0小时一华为智慧属简单评测耀涂蛋蚕:总之.华为招必展给人带来 的!8象很大,未来已来,未来可触很快29 同 16 评论 2019-10-01让交大=iv知乎一快速滑动后交互细节:对于这类交互形式,最高频的用户需求是回到顶部和资讯内容的刷新以 快速寻找感兴趣的内容。回到顶部这类需求常规解决问题的方式是点击界面顶部回到顶部(iOS用户常用操 作),除此之外最常规的操作是在页面右下角的回到顶部悬浮按钮。还有一种结合用户心理认知的交互行为设计底部栏首页icon的利 用,如上面案
7、例的淘宝和同花顺,点击首页icon可回到初始位置重新加 载,淘宝/同花顺过把这一隐藏操作显性化,并且合理利用用户回到顶部 的需求,当用户不断下滑页面时icon变成火箭/刷新的样子,点击后立即 回到顶部并可进行所有资讯的重新浏览。寻找感兴趣的内容无限加载最大的优势就是能帮助用户快速浏览以找到感兴趣的内容,但 当页面本身预加载的内容就都不能吸引用户兴趣,就需要考虑如何通过 设计帮助用户找到真正感兴趣的内容。如上面案例的同花顺和知乎,当浏览同花顺时,长时间没有点击进入任 何一篇文章时,在浏览中部就会出现刷新提醒;当在知乎的搜索结果页 滑动大概3屏后,知乎会分析判断用户没有找到他想要的信息,于是出 现
8、“向知友提问”的按钮,引导用户直接提问自己想要的(亮点之处在于 对用户行为进行潜意识分析,而不是全程展示这个提问按钮,防止减少 用户实际浏览区域,造成干扰)。向下展开按钮在pc端的网页中,为了折中分页和加载的利弊,常常会选用“查看更多” 的按钮,点击后向下继续进行加载,同时也能给用户更多的停顿和节奏 去主动的获取更多的信息。而对于不停强调活跃度的移动端的产品来说,向下展开的“查看更多”按 钮,不仅仅只是折中的思考,还有运营层面的考虑。(向下展开更多的情况还分为两种,一种是向下展开更多项选择择,另一种 是向下展开看到全部内容,以下讲的更多是后者)优势:产品运营层面1、增加点击促进引流/转化引导注
9、册、关注、付费等的转化2、为精准推荐提供更多依据网站可以通过用户点击“阅读更多”按钮的行为,获取有效点击的用户 数,精准收集用户阅读喜好,开发完善用户画像,便于日后精准推送某 个作者、某类作者、某类文章给点击的用户以及相似的用户群体,优化 智能推荐。3、判断文章真实质量通过文章点击的人数、点开率等对创作者进行管理,便于把控平台内 容质量,重点支持优质创作者,从而建立更好的内容生态。用户层面1、增加半遮面的神秘感2、保证稳定快速的阅读体验,提升加载性能3、降低阅读本钱劣势:假设不是为了提升转化率或者增加曝光率,仅是展示型文章,就会牺牲掉 局部的用户体验。适用性:适用于需要考核的内容创造者、需要收
10、集更多用户数据的产品案例展示:向下展开15:16返回nW/电八UI 6fflnaHiam s/口/1六 “286 3/9241 mm G SQM)*4 1439WfT EDVIMT 曲”!(Vnvs|近福田中心区f2【限时特】ZcnKRl ififf届中心i牝以鼻妁1白备肥RQTSttKANI.不措V22S3/MV2413/B 48 l:u *4$ :Airbnb15:06公司探秘心新*曷,千? 315震3军的产品杼本团队 mS9。*墀情BXT面试点大公开I技术大佬谈招ef bi Gfi Kfi MM”BOSS直聘23:22-r就令。lon低,标题右侧M:多用于横向滑动展示的模块,一定程度上契
11、合用户浏览动线的设计,具 备一定的动机,也仍具备跳转本身带来的劣势一一易对用户引发没有预 期的压力。A、T:标题的右侧导致按钮设计的空间从一开始就是被限制,易由于不显眼、 面积不大而导致的触发缺乏、能力受阻。按钮的设计:只要具备一定的合理性动机,可以通过体验上的设计提升用户的触发以 及能力。如具体化引导文案让用户对后续内容有所预期(如下方案例:蛋卷基金、哗哩哗哩);通过线性或者面型的容器承载文字,让它看起来更易辨识和易点击(如下方案例:网易云音乐);加入主色让它更加(如下方案例:蛋卷基金)。标题右侧兴全低波动小确幸8.62-.00;4423:24,电影投麻留务让机构做你的投费修问MAMA优3金
12、日训仓热门指数nraa. VMM2.15聚焦海外中国好资产n-算收马方足中H:al50ETF。堆人网MA51.29科技赛道百里挑一13.67专注股息率鸵明指数*国中久?Mae新起|弘市场焦点百的,穴1刖F4基金名人堂千亿以宏张坤Bi&aSMi&Sd “,io*.EH双创50来了,你怎么?rn震鼎行情如何买基金?提供你的买基攻第回 a *tt:K0*WM*蛋卷基金C杨千撵为你推荐国内即将上映全球值得期待哗哩叫鹿少女的折榜向左走on Ptppor网易云音乐标题iconM:儿乎适用任何场景,但动机的产生单纯依靠标题以及内容的展示标题iconM:儿乎适用任何场景,但动机的产生单纯依靠标题以及内容的展示
13、A、T:信息传达无学习本钱,节省页面空间,但点击区域小;位于顶端,对于 内容超过一屏的模块,用户需要上滑返回才能点击板块底部M:底部的位置符合用户垂直向下的视觉动线,更容易被展示内容吸引而顺 理成章的接受引导进入内页;但仍具备上述提及跳转本身的劣势。A、T:由于底部可设计的空间较足,查看更多除了文字链接的设计以外,还可 以有更多发挥空间,层级也能得到显著,进而提高触发条件和点击能 力。按钮设计:竖向的展示设计,势必会导致占用更多的页面空间,因此在页面模块较 多的情况下,仍应该注意不必因强调“查看更多”而占用过多的页面空间。潦俄市 06/24-06/25景点/地址/房源名Q夏季特惠房源AfflJ
14、RV.低至5折板块底部海美【诲梵KS)”IICBDI会履禧日C8D/会展中心/华强北/ 中心用I田双口鼻M地铁ns/ainaNi/【穴】286 叩朦241 3,候 6.0(,M(433 iBBIRffI量大的n白】一个关于正京 人的故事iwiaVdnus近福田中心区I艺【眼时特JB】Zen和凤|近蛇国中心I北欧新约I巨幕彩成口笔街整租双人间,不橹225*4Y241x/*4.8 L - - -*4 9美食196 8 万 17NssaftiaM.爆悌炒面配上使 华莉兄弟这只竹网不欢吃力 呵ga品,迁晦了悬大林自 子.没方法,只好去对边裨了Airbnb哗哩哗哩场景刷新目的实现当前版块更多内容的即时更
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 界面 中的 信息 过载 如何 设计
限制150内