(视频较大,请稍待加载)
传统的纸媒应用主要依靠大量的高质量内容取胜,在应用设计和信息架构上难免会臃肿复杂,而卫报客户端最近在设计和体验上的更新却让人非常惊喜。
第一点,卡片设计
卡片本身是一个消化能力较强的设计形式,它可以将不同类型的信息比较整齐地排布在一起。
在卫报客户端首页上,你可以看到有很多不同类型的卡片组合排列。
首先有三种标准卡片。第一种是焦点图组合卡片,有图、有标题,下面还有一些可以横向滑动的卡片元素。第二种小型图的卡片,这种卡片尺寸较小,一行可以放置多个。第三种是纯字的卡片,卡片利用文字的颜色、底色和 Icon 区分不同的样式。
这样的设计之下,即便有大量的文字,整体版面看起来也并不死板。
除了标准卡片还有特制化卡片。这种卡片除了文字或者图片之外,会根据卡片具体内容的模板做出特制化的设计。特质化卡片的设计优点是:虽然信息的类型各异,却能够被卡片系统地整合起来,既规范美观,又不影响内容的形式的丰富性。
在产品设计中,当不同类型与内容的信息需要在同样的架构下展示时,使用卡片可以规范整体的页面版式,使之整齐美观。与此同时,卡片设计也有自己的弊端,你需要根据不同的产品做出最佳的调整。
第二点,文章中的扩展阅读
卫报客户端在内容的扩展阅读中也做出了独特的设计,当文中涉及一些延伸阅读的时候,文章里会嵌入像组件一样的东西,帮助用户去理解它的上下文,获取更多的详细信息。
比如,你在阅读一篇文章的同时,可以查看关于某一话题的展开报道,还可以查看到一些常用的问答,在一些文章中,甚至可以直接嵌入 Twitter 的推文。这样一系列的动作会让文章的体验丰富很多,与现实世界的连接也更加鲜活。
在产品设计上,产品经理也可以参考这样的一种方式:以一篇文章为起点,去串连起所有的上下文和背景信息。这样的设计优点可以让读者在一篇文章中获得沉浸阅读,并能够找到更多感兴趣的相关文章。
第三点,手势导航设计
第一个场景:打开列表页后,点击进入一篇文章,如果我们将手指放在屏幕中间向左或向右滑,这样的操作可以切换不同的文章查看详情;如果我们将手指从边缘开始往右划,页面会回到列表页。
从屏幕中间滑和边缘滑动,效果是截然不同的,这是一个非常大胆的设计,优点和缺点都很有争议。
第二个场景:当从一篇文章的链接中跳转到另一篇文章时,如果我们把手指按在中间向左滑的时候,并不会出现更多文章详情跳转;而将手指向右滑的时候,导航抽屉会被打开,你可以从抽屉上定位到后面或者其他类目。
这样的设计十分巧妙,当用户以某篇文章为起点进行探索的时侯常常会脱离整体的信息架构。这时用户是迷失在整个架构里面的,所以当我们在右滑的时候,系统会把导航展示给用户。让用户快速找到回家的路。
手势导航的不同是一个非常大胆的设计。因为它造成了一个应用中同样手势的不同反应,也许这样的设计会出现不稳定和混乱的感觉,但对于沉浸阅读来说,它或许又是一个十分优秀的交互设计。
这种设计是完全根据用户路径去判断场景并给出反馈。或许,你可以将这样的思路用在其他产品设计中,扬长避短。
精选留言
2017-12-02 12:25:13
我理解的产品的核心路径一般是主要用户场景路径或主要变现路径,不知道你是不是指这个
2017-12-02 09:51:46
2017-12-02 16:56:54
就是想说,入门和大神级作品真的相差很多,Trigraphy 艺术感特别强,中间那个丢骰子产生随机效果绝对是结合生活场景的具体应用。从交互来说,主要页面切换与融合特别赞,只是了解更多都是跳转网页端去处理的,例如进入 Instagram 或是官网查看教程,承载的内容还显得不够完整,但不妨碍这款应用的用户体验和价值。
今天学习了内容呈现形式与产品交互设计,最后关于手势导航设计试用后在来分析。
最后就是,看完今天的视频,回音较重,有些混沌,推断应当是在空旷的房间内进行的。从角度上,录制一期视频节目会比较辛苦,可能是带了移动摄像头来完成的。
我在想,能否用直接屏幕录制应用来解决?整体上讲解与说明可能会更加简单,无论是手势还是产品设计应当能够合理展现。
2019-03-21 22:24:59
2、扩展阅读,信息流的顺畅引导,让用户在感兴趣的内容中不断快速切入/跳转,增加沉浸感。
3、同一个手势,在不同路径/场景下,代表不同含义(够大胆,有创意,也有争议,毕竟牺牲了一定稳定性/统一性)
2017-12-02 11:56:22
2017-12-02 09:27:18
2017-12-23 11:11:55
2017-12-03 15:11:52
2017-12-03 12:30:04
2017-12-02 11:05:36
1. 设计信息架构的时候应该注意些什么,一个好的产品信息架构有哪些共性?
2. 项目管理中有关键路径的概念,产品设计中,怎么找到产品的核心路径,路径往往有多条,设计核心路径的时候,如何取舍?
2024-07-12 01:22:40
2022-10-19 13:04:48
2021-01-05 21:40:24
2020-10-29 22:11:29
2019-10-17 07:12:11
信息扩展,提高沉浸阅读体验
手势交互,利用用户路径和信息结构
2018-06-12 01:02:50
手势非常适合移动交互的方式,除了点滑动屏幕位置的不同外,手势操作的不同也有很多不同操作,比如TIM最近更新的大幅度下拉展示to do list,还有miui全面屏手势触控中,屏幕底端上滑返回桌面,上滑悬停调出任务栏。这些跳转关系的交互设计很有趣。
2018-05-24 13:07:44
2018-05-20 14:11:02
2018-04-21 23:13:38
2018-02-06 18:02:44