设计笔记素材首页投稿(暂停使用,暂停投稿)

快来看文章,豌豆荚一览

2015-09-23  本文已影响303人  VDing

“一览” 豌豆荚自己孵化出来一个新app。和年前的开眼一样,开始自己做app。不同是开眼是自己收集内容推送。一览则更为具体做内容集合类app。logo设计就是一个无限符,也体现出来这点。

所以这里其实一开始就引出一个点,市面上做聚合类阅读app。历史之悠久,产品之多数不胜数。那么一览又如何能够做到不一样,或者说是有什么突破吗?

我们现在就来看看

在一览产品官网上出现产品图的是Android版本跨在iOS版本前 一览的产品文字介绍,可以看出几个重点:集合、发现新应用、流畅。另外最上面的”你感兴趣的应用“,可以看出应该是可以自动判定用户兴趣点。至少是有这块方向。 截止今日,产品页做了更新,可以看到之前的一些问题比如为什么iOS优先级放在Android后面等等,都恢复成传统样式了。

1、首先是icon设计及命名部分,同为豌豆荚公司近期出品的app,俩这我都带有一定试验性质的尝试。设计风格都基本已简单构图,少量颜色。作为主基调,这点不难理解毕竟不管是一览还是开眼都是第三方聚合类产品,都不存在自主内容产出。因此尽可能减少过多的设计渲染。

不过有趣的点在于:命名的方式,一览带着自己母公司的光环前缀叫“豌豆荚一览”,开眼只是单纯叫开眼。这里理解是开眼或许因为自身定位较独特,其它同类型竞品不多。因此无需开出豌豆荚名头。而一览明显类似竞品众多,打出豌豆荚一来可以情感转移,增加用户选择的筹码和好感度,信任度。

2、启动引导页。比较任性的还在于豌豆荚一览并未在启动时候做引导页的设计。这里看到一些不同地方,我觉归期缘由会发现多少app的引导页早已经不是为了真正产品引导,而变成品牌宣传。就想开头介绍的一览似乎在追求使用流畅度上思考的比其它app要来的多,首先看看注册登录页面。

内容简单提示文字清晰明了

可以看到这里的注册和登录页面基本加上顶部的文字,基本上涵盖了3大部分的内容:

1、登录功能模块。

2、注册功能模块。

3、引导提示文字。

三者构造整个整体,相互关联且互不干扰。视觉上除了用户协议那排显的不那么舒服感觉,其它都很正好。且有一定特色和想法。大面积色块配合留白足够的文字,

这类型注册登录样式需要注意:本身页面功能为注册登录,因为本身注册登录表单项目内容较为单薄,因此上班部分内容(文字图案)一定不能抢了下半边频道具体功能模块。另外注册频道是否要默认弹出输入键盘,是否会导致页面上下位移,这点也值得注意。一览和instagram选择俩种模式,instagram选择是默认弹出键盘,只是输入注册起始页只有邮箱一项

instagram同样选择类似的登录注册样式,只是在注册环节有少许不同地方。 instagram注册起始项 instagram次级选项

以上对比会发现instagram,对比一览比较好地方史他把阅读协议这块做到了2级页面,那么首屏页面就能显示更为简单,而一览选择把精简完的内容完全做到一个页面里面为是为了更快捷操作节省用户一步操作。这里就难免出现例如注册协议的这样干扰整体设计的地方。我个人建议是在注册页面或者最后注册页面确认弹窗中做协议提示。而登录上的提示则可以直接去了。

3、文章列表页

起始页面就是文章大列表

这里看到整体布局,发现一个特点是基本弱化来源,直达文章摘要的列表页面。而且文章摘要之篇幅之大应该是同类阅读软件中占比最大的软件。

可以看到大致页面部分分为几个部分:1.顶部功能操作,2.中间文章来源及时间,3.下半部分收藏按钮。

为什么需要把收藏提到页面优先级如此高地方。我认为应该是已经发现大家收藏单做一部分功能稍后阅读来使用。另外可以看到点击收藏后是带数字的,因此这里收藏其实也合并来喜欢的功能,不过应该还是产品初期的原因看到其他人收藏躲过于1的并不多。这里也可以看出一览为了整体的缩减操作流程及

另外还有一块值得思考,顶部功能把反馈放到出来,有点不同其它app,可以看到团队对于用户反馈的重视和整个app产品处于产品初期的考量。这里另外也是因为太多阅读软件可深度挖掘的地方的确不多了。

4、文章详情页面

这里值得一提的,也是整个一览交互上最大特色地方。在文章列表页面和详情页面中间夹带着一层预览页面。且比较巧妙的是整个预览页面和实际阅读页面还有列表页面可以做到很好的交互链接。首先我们看看

文章列表页面

 

点开列表页面,首先出现的时文章预览页面,下滑动推出预览模式,重新进入文章列表 预览页面上滑继续阅读即自动进入文章详情页面,

以上是阅读的基本操作,也是该软件的核心交互操作。扩大了文章列表版面空间,尽可能做到和预览页面差异最小,而预览页面和详情页面整体不存在文章内容差异(另外这样可以省去很多app需要编写简介部分,大量减少后期编辑工作),减少层级中了用户阅读的跨跃感,整体尽量让用户感觉到操作和交互的一致性及统一。这里关键点就是中间内容差异的把控,一览的做法是尽可能文章阅读保存一致只通过部分功能按钮做到区分。

这里交互巧妙地方就是首先我们对于列表展现真的是需要一个表吗?当看一个标题和少量文字是不是就此足够吸引用户了,一览给大家的探索是:或许看文章就应该给大家较大篇幅预览余下时间,来源等等都不是很重要。因为你无法判断用户决定要看哪篇文章是依据什么,哪怕给用户尽可能大篇幅文章然后中标可能性会大。

可是这样做法缺点也显而易见,首先过大篇幅势必操作和浏览操作需要大幅提升。其二,过大篇幅对于文章内容质量需要有一定把控。否则ZA多于2.3篇的烂文章即可给用户强大心理压力。我们看到一览的解决方法是:提高用户操作的速度,减少不必要页面原始,及尽可能减少用户操作流程和页面层级性操作。在不可能避免的层级操作中通过交互减少用户操作成本,控制内容源的数量质量减少低质量文章出现可能性。所以就可以看到,一览的刻意减少页面元素构成,加入预览模式且通过增加手势操作的利用尽可能减少用户层级间操作时间成本控制内容源及文章质量。

在apple 6s发布会中大家也可以看到新版本iOS9配合3D touch 加入预览模式。单看iOS的操作视频我个人觉得就单纯从阅读文章这块并没有一览做的好。不说需要配合3d touch的硬件。就从视频上看需要点压等待这块,就很明显是中断用户操作。个人觉得3dtouch更多还是在游戏中配合和使用。

其它,一览的丰富手势操作也是保障其流畅操作的一个前提。 大家在一般app中都会看到有几类型,默认手势有很大冲突。较为突出文章详情页面侧滑到底是退回列表还是切换文章。  两者都是有一定支持者,一般大家都认为两者不可调和,只能选其一从之。

一览给大家一个可能性就是两者或许能够结合,在同时可以侧滑退出同时,也可以切换文章列表。那么一览是如何做到的了?

首先拆分细化区别不同侧滑手势:一正常文章页面侧滑,二是屏幕从边缘侧滑进屏幕。

其二,拆分功能:一切换文章内容,而二返回列表页面

之后就是把其一一对应,一览做法是:页面内侧滑是文章切换操作,屏幕边缘侧滑是退回文章列表页面。

文章切换(页面内左右滑动) 文章返回列表(屏幕边缘滑入) 文章阅读最后继续滑动即可关闭返回列表页

这里其实会交互上有个问题是:退回列表页面虽然右上角有关闭按钮,当看手势操作却会发现从屏幕边缘滑动操作过于隐蔽。这里一览做法是,在预览页面下下滑就可以整屏关闭退回列表页面还有就是文章阅读底部继续滑动也是退回列表页面。

这样做法有几个好处保留了通过手势切换文章和返回功能,不会因为返回功能频繁操作,而放弃右滑功能操作。另外因为前面提到的预览和列表页面内容量较为一致,左右文章切换也在一定程度上承载了文章列表功能用户接受程度能大幅提升。通过增加返回的操作方式(关闭按钮,屏幕边缘侧滑,文章结尾滑动关闭)

另外这里有点少许担心是,因为内页包括设置页面等附属页面内手势操作都是页面内滑动为返回,是否是交互统一。用户会不会混乱,好处是基本上该app还算是功能较为单一,应该用户学习成本不会太高。

其它:这里还看到部分有特色的细节,一览一开始提示叫用户开启离线缓存功能。这个离线缓存是自动的,因此你也看不到缓存进度。反正就是之间交给app就好了。他这边逻辑是我反正都帮你干了,你就尽管阅读好了,如果遇到没有缓存文章你就看其他好了,反正我多的是优质资源给你看。如果又,恰好想看又没有缓存那怎么办,我们有收藏先收藏,然后有网在看就好来。这里其实整体逻辑很ios设计逻辑,我不用你来考虑是否应该关闭每个应用,反正你就是切换退出就好了,因此ios决不会出现android那样全杀应用操作。反正你就叫给我系统就好了,你就操作你自己想干的事情,其余任何调配机器帮你优化。还有就是他的关于页面设计,很难的有个新型app能做到如此细致用心,对于用户反馈重视程度也可见一帮。

启动时候的文字动效很有特色 参与感很强的关于页面

还有就是他的引导页面也就是设置里面的产品介绍页。也比较有特色

一个用心动画就可以最为直接说明整个产品

这个产品说明兼着引导页面的产品说明,很明显可以看出来首先通过抓取自身手机内置app,比对一览自带app分析出来用户可能感兴趣的订阅源,减少用户对于筛选选择的时间。另外通过这系列说明也顺带告诉用户,我们推荐东西是根据你自身下载app总结出来的。用此增加用户信任感。

综合起来说一览通过自身对于阅读的理解和思考,整体上给了我们另外一个可能性。通过面对用户最直接的需求,尽量舍弃不必要的环节和内容功能。在剩下为数不多的页面功能上,尽可能通过合理交互细节,做到整体操作的流畅直接简单。


不判定对错,只分析原理。这个就是我最好想说的。


上一篇下一篇

猜你喜欢

热点阅读