数极客首页

打造舒适的阅读空间—云阅读iPad3.0设计总结交互篇

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

项目背景

关注云阅读iPad版的朋友会发现,我们有一段时间没有更新了。针对手机版云阅读经过几轮迭代增加的云端同步、阅读圈、多账号登录、社交分享等中心
功用
,这次的iPad版要一并参与

。怎样
把这些功用
在iPad上中止

重设计,怎样
优化现有信息架构,是我们遇到的第一个应战

另外一个方面,相关于
手机端的用户,iPad用户更关注应用的质量
感。经过
之前的一些用户访谈,我们了解

到,用户会在车上、家里等一些相对稳定的环 境下运用
iPad, 每次的运用
时间也较长。我们希望经过
一些的创新,让用户在这种沉浸式的运用
情形
下,体验到到温馨
愉悦的阅读感受。进而加深网易云阅读的品牌印象,打造产品 的市场口碑。

 

设计理念

做产品的时分
,要从商业的角度来看我们的努力能否
胜利

,常常
会权衡
设计计划

惹起
预期用户行为的频率(例如,订阅数、举荐

数、生动

度)。那么,究竟

是 什么样的要素
会引发用户去与产品发作
互动,致使

产生一定的忠实
度,这其中我们设计师能够

做什么? Trevor van Gorp在他的《Design for Emotion》中提到:一个胜利

的产品必需
与能与用户树立
起一种良好的关系,关系的树立
取决于我们体验到的有用(useful)、可用(usable) 和令人愉悦(pleasurable)的水平

。而从用户角度权衡
交互度的规范

就是运用
者能否
抵达

“心流”状态,一种认识
具有高度条理性,积极投入的体验, 诺曼也称其为“聚精会神

的持续性流利
状态”。为此,产品设计要设计有用的任务、达成良好的互动、发明

恰到益处

的吸收
力,来均衡

用户的情感状态以控制留意
力 和发明

流(flow)体验。

准绳
总是说起来比较

笼统
,举个生活中的栗子吧。周末闲暇
的时分
,我喜欢去钱江新城的杭图坐坐,在那里看看书,翻翻杂志,觉得
蛮惬意的,一不留意

就待了一个上午。想了想,为什么会喜欢去那里,可能有下面这些缘由

  1. 空间很大,书籍杂志报刊应有尽有,让我特别的有满足感。(有用)
  2. 区块划分很明晰
    ,还有各种引导,想看什么书很快就找到了,很快捷很便当
    。(可用)
  3. 有一个难得的阅读的氛围

    ,让人觉得
    很自由

    很温馨

    :身边有很多看书的人,有人气又不打扰

    ;随处可见的沙发、桌椅让我能够

    随时坐下来,温馨

    地看书。(有氛围

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

我们想要云阅读iPad新版也是这样一个让人觉得温馨
的阅读空间,适用
、好用、有觉得
,陪伴你渡过每一段阅读的时光

首页信息架构探求

在iPad上,为了充沛

应用
空间优势,减少整屏切换,App常常
采用更扁平化的层级结构

,所以首页的交互设计就十分

重要。 在这次的iPad版云阅读中,我们增加了杂志分类、阅读圈功用
,丰厚
了个人主页,原来的结构

曾经
不能适合

往常

的需求。怎样
样让用户能便利
地找到入口,同时 各个内容得到很好的呈现?我们尝试了不少iPad端常见的设计方式

1.竖导航 把我、书籍、资讯、杂志、阅读圈、音讯

作为独立的tab,列在左边,点击tab切换右半部分

的内容。把操作类按钮(如搜索、整理、离线下载、添加内容)等放在顶部。与之相对应的,在阅读圈中采用单一视觉走向的列表流设计。

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

这样设计的优点是:结构

逻辑明晰
,操作效率高。在网易新闻、微博等iPad客户端中采用的就是相似

的结构

关于
我们来说,竖导航的缺陷
是:由于导航占领
了屏幕边上的一部分

空间,右边主要内容的排布会遭到
影响,特别
在竖屏状况

下;阅读圈单屏显现
内容有限,原来文章正文的版式会被突破

,影响阅读体验,这与我们的初衷相背。

2.分屏平铺 在现有架构的基础

上,主页内容包括书籍、资讯、杂志,采用顶部tab切换。点击顶部两端的相关入口,能够

去往左面整屏阅读圈、右面整屏资讯中心或书城。

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

这样设计的优点是,每屏内容相对独立,划分明

确,在“多看”iPad旧版中也采用了相似

的信息架构设计。假定

我们这样设计,对现有首页改动比较

小,阅读圈的设计也能够

少一些限制,但是这种架构拓展性比较

差,未来

假定

参与

更多的内容分类,又要推倒重来。

3.Tab切换 这 能够

说是最基本

的一种设计方式

,思索
是不是要和手机端的信息架构统一,我们一开端
出了一个双tab的计划

,但经过
快速的用户测试和对iPad运用
习气
的分 析,这个计划

很快的被招认

了。这是由于
固然
都是IOS系统,但在iPhone上屏幕更小,用户容易留意
到底部内容,底部也更易于单手操作。在iPad上, 由于屏幕较大,用户留意
力集中在屏幕中心的内容,底部易被疏忽

,在操作iPad时,底导还容易被遮挡、成为盲区。我们又进一步思索
了改进

计划

,把资讯、书 籍、杂志、阅读圈作为顶部导航 ,与我相关的操作和页面入口收在一同
放在界面右下角。经过
tab来扁平化层级关系,把阅读圈与其他内容并列,我们把一切
信息都铺开呈往常

你面前,就像一个 承载信息流的容器,首页变得更地道
了。

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

让每一条分享都美观
,说说朋友圈信息流设计

在这次的iPad版中,阅读圈是一个很重要的新功用
。假定

把云阅读比喻成一个图书馆的话,阅读圈就是一个让读者感遭到
人气的中央
,我们希望用户能够

在这里发现到优质的内容,进而找到值得关注的人。它就像一个衔接
内容与人的纽带,让阅读变得有温度。这样的理念也辅佐

我们明白
了阅读圈的设计目的
:以内容 为中心,引导读者与读者之间树立
联络

明白
了设计目的
,要以怎样
样的方式
来组织用户分享的内容呢?依照

手机端的思绪
推到pad上,很容易联想到相似

微博的纵向单列表方式

。但是这种方式一屏展示

的内容比较

少,从信息流中翻开
单篇文章的方式也比较

局限,会突破

现有正文版式,不能很好满足用户深化
阅读的需求。

云阅读是一个包含了书籍、资讯、杂志的综合性产品,这使得我们的分享内容比较

多样,而用户互动、评论所生成的内容也不固定。要在iPad的大屏幕上 满足多结构

信息流的表现,我们又想到了比较

常见的瀑布流方式

。但从快速的用户考证
中能够

发现。瀑布流的信息排布不规则,用户的视野
需求
不时
腾跃
,比较

适合

以图片为主的分享。而在阅读圈中,标题这类文字信息常常
是用户最关注的,连续
的视觉流让人看起来比较

累。

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

最终,阅读圈采用了规则的卡片化设计。面对不固定的分享内容,怎样
把它们呈往常

统一高度的卡片里?我们设计了一种渐进式的处置
方式:针对文章、源、 书籍等多种分享内容,定义了显现
优先级,优先显现
信息标题、转发赞和最新评论,假定

有多余空间,进一步显现
摘要或多图。以下是部分

的交互呈现规则:

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

在视觉上,我们还做了不同的版式和对齐处置
,让每一种内容的分享都看上去丰满

美观
。这样的设计,保证了不论

信息流内部怎样
变化,它的外观都是稳定的。标题显现
在一条顺畅的视觉流上,不同的内容构成
了一种赋予变化的节拍
,让阅读圈的阅读
体验温馨
而不单调

任务流程的简化和细化

云阅读iPad新版增加了本地书上传云端同步,经过
这个功用
,用户能够

吧自己

的本地书上传到多端查看,还能够

资源共享,结交书友。在手机端上,这个功用
曾经
上线有一段时间了,这次在iPad上中止

了一些重设计。剖析

整个任务流程,大致上包含以下一些步骤:

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

iPad的空间比较

大,我们第一
思索
是不是能够

对流程做一些简化。从数据上能够

得出用户运用
Wifi传书的占大多数,我们依据

用户的运用
情形
,兼并
了1、2两个步骤的页面,在上传书区域着重突出了Wifi传书,当PC端开端
传书该区域就会变成上传的进度列表,下面是手机端和iPad端的界面对比

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

在云端同步页面中,我们运用
了矩阵列表,以便显现
更多书籍,初始状态时顶部的操作栏显现
上传总数和全选按钮,在同步开端
时该区域会变成进度条,显现
上传的总进度。这样的状态切换比较

好地俭省
了空间,用户也会容易了解

完成了对流程主要页面的交互设计,工作还远远没有完成。分别

用户在iPad上运用
云阅读的场景,我们在上传书页面也添加了云同步入口。还有一些不容忽视

的细节,比如

整个任务流程中会呈现
的一些特殊状态,上传本地书的各种显现
状况

,都需求
在交互稿中逐一

去定义。

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

从任务设计的角度上来说,本地书上传同步的流程并不算复杂,但是思索

下来,要留意
的问题还不少,除去步骤自身

的优化思索
,关键页面的内容规划
,特殊状态的处置
等每一个小点都会影响到整个流程的运用
体验。

给交互找点觉得

在交互层面,我以为
,动效设计是落实情感化设计的重要环节。在引见
细致

的理论
之前,想回到开头的话题稍稍深化
一下。我们曾经
知道

要带来更好的体验, 产品要能很好地照顾用户心情
、引导用户留意
。Trevor曾提出过用户留意
力与心情
的模型,辅佐

我们认识这其中的关键影响要素

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

而经过
恰如其氛的交互动画,产品能够

在需求
主导的时分
唤起用户的留意
力,在需求
坚持
用户专注于任务的时分
,流利
操作,减少消极心情
。在云阅读iPad3.0中,我们丰厚
了过渡动效,并尝试了新版本引导动画,希望为你的阅读体验带来一些额外的乐趣.

A.明白
层级线索

在阅读圈中,用户翻开
分享的文章,能够

点评论头像进入他人

主页,相关详情,致使

另外的文章。我们设计了分歧
的动画,每一个新翻开
的页面都会从下往上 掩盖
前面的页面,让人觉得
像一张张的报纸盖上去,堆叠起来。经过
这种方式,我们直观地让用户感遭到
一种层级关系,避免

了用户在复杂的嵌套关系中迷失。在原 型表现上,我们运用
Axture制造
了可交互的动画原型,让工程师在开发的过程中很便当
地随时查看对照。

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

B. 衔接

操作

在阅读
阅读圈的时分
,想去评论或回复是一个很常见的运用
场景,我们希望这个过程能为阅读圈增加互动性,但又不要太过打断用户的阅读
过程。在这里,加 入了一个动画,点击更多按钮或用户评论,该条分享块会展开弹出,轻点其他区域就能够

返回之前阅读圈位置,比较

好地处置

了这个问题。

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

C. 轻巧过渡

新版本中的社交分享,在选择完分享渠道后会上下翻转出分享输入页面。从水平

到垂直的翻转过程,让分享输入有一种亮相的觉得
。动画辨别

了任务阶段,也 处置

了前后页面高度不一过渡不平滑的尴尬

,带来了一定的兴味

性。这个动画我们运用
AE完成动画原型的,AE完善的3D功用
让效果表现变得很简单。

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

D. 营造氛围

第一次翻开
新版本,你可能会留意
到我们的动画引导:春花烂漫的含糊

背景上,iPad里的封面图冉冉
划开,显露
全新的首页,代表丰厚
内容和社交分享的 图标从后面弹出扩散;云端同步引见
,多个设备流利
地划入,悄然
升起的一朵小云里,云同步表示
图标在转圈;阅读圈引见
,Ui元素和图形元素从屏幕的顶部和底 部弹上来靠拢
,带出底部的登录按钮。加了动画,原来比较

板滞
的新手引导变得更有生命力了,希望看到的你能会意
一笑,感遭到
我们的诚意。

点我看iPad3.0动画引导视频

在这里,顺便给大家引见
一款新工具。这个跟随手指的交互动画原型是运用
以下工具完成的:

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

Adobe animate CC是adobe 推出不久的交HTML5动画工具,能够

参与

各种动画效果、交互动作并输出网页格式的动画。作为一个还在完善中的工具,它的特性
是上手简单,导出的动画格式 便当
查看,内置的缓动曲线和交互效果也比较

丰厚
,能满足快速制造
原型的需求。下面是我们新版本引导的设计源文件截图:

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

小结

云阅读iPad3.0上线前,我们做了一些用户访谈和可用性考证
,用户关于
这个版本的运用
感受和品牌印象如下:信息丰厚
、功用
完善、交互操作便利
有新意、视觉简约
清新

、看内容很温馨
。这与我们的设计初衷是相符的。在访谈的老用户中,有80%表示等候

新版本早日上架,会第一时间更新。而上线之后的口碑也让设计的理念和预期得到了考证
,下面是App Store 上的部分

用户评论截图:

打造温馨的阅读空间—云阅读iPad3.0设计总结交互篇

接下来,我们会对操作流利
度,系统性能,交互细节等中止

持续优化,提升体验的愉悦度,努力让云阅读成为你在iPad上的阅读首选。

原文来自:网易UED

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章