创见聚光灯之移动媒体阅读:基本款应用

假设我们已经有媒体,然后现在要为自己的媒体制作一款移动应用,不求外型上多么酷炫狂霸拽,只求能满足用户在手机上阅读媒体内容的基本需求就好,那么这款应用应该是怎样的呢?一款移动媒体阅读应用应该具备哪些功能?常用交互设计有哪些?我们又应该选择什么样的交互才能适配自己的用户群?

小编测试了数十款国外知名媒体的移动应用,初选时删掉数款没有适配 iPhone 4 寸屏的app,二选时删掉产品角度来看太过平庸、毫无存在感、毫无想象力的那些 app,最终留下各有亮点的九款 app。

接下来让我们以这九款 app 为例来回答第一段提出的问题。

一步一步来考虑,将整个 app 的设计分解为如下问题:

一、媒体内容都是有分类系统的,那么是否要向用户提供分类选项?如果提供,分类菜单放在哪里?怎样触发菜单?怎样呈现菜单?

1、默认首页不提供分类菜单,提供触发分类菜单的按钮,按钮一般是三条水平平行线形状,点击按钮触发菜单。

采用这样设计的app有:CNN,NBC News,USA Today,路透社,赫芬顿邮报,TechCrunch,BuzzFeed。

CNN 点击首页菜单按钮,触发根目录,继续点击可触发下级目录,如图。

赫芬顿邮报的导航栏非常特别,可以左右划动大图图标选择分类,可以点击下方“+”按钮对不同类别进行个性化订阅,可以点击上方的设置按钮对app进行各种设置。

左右划动选择进入不同分类,大图是当时的该分类头图:

个性化订阅选项非常细致,设置服务业非常丰富。

但是,设计创新又酷炫的副作用是用户学习成本较高,小编揣摩了一会儿才明白用法。

2、默认首页不提供分类菜单,从左到右划动触发分类菜单。

采用这样设计的app有:NBC News,路透社,TechCrunch,BuzzFeed。

路透社可以通过点击菜单按钮和从左向右划动两种方式触发导航栏,如图。

3、默认首页提供分类菜单,在顶层或底部设置分类导航栏。

采用这样设计的app有:The Verge。

The Verge 没有采用新开始流行的侧滑交互,但对于 The Verge 网站用户来说,这样的上下两排导航栏设计上手就可以用,是非常实用的功能,小编比较喜欢的是分享到稍后阅读 Pocket 的功能。并非最流行的就是最好的,最合适的才是最好的。但这种旧式设计在大屏手机时代,缺陷越来越明显——用户的手机够不到安置在顶部的按钮。

The Verge 顶层分类菜单栏:

The Verge 底部分类菜单栏:

菜单设计最常采用方案:不设置顶层和底部的分类导航栏,在默认首页左上角设置三条水平平行线的正方形按钮,点击按钮可触发内容分类菜单与操作菜单二合一的导航栏,同时从左至右划动屏幕,也可以触发导航栏。

5、首页从左至右划动,可触发导航栏,那么从右至左划动,将会触发什么呢?

A、什么都不会触发。

B、触发热门文章排行榜,比如 TechCrunch。

C、触发单篇文章的功能菜单,比如 NBC News。

6、app 是否可以从左往右划动触发导航栏跟开发者的选择有关。从左至右的划动操作只有一个,但想要用它来触发的任务却有调用导航栏和切换分类两个。有的开发者选择实现前者,有的开发者选择实现后者,选择后者的 app 便无法右划触发导航栏了。

二、app 的操作菜单包括哪些按钮?如何调用操作菜单?交互如何?

上文已述,一般情况下,点击左上角按钮或者从左至右划动屏幕,可以触发内容分类菜单与操作菜单二合一导航栏。操作菜单包含的功能按钮大致有下述 9 类:

1、搜索。2、设置。3、报告新闻线索。4、离线新闻。5、版权声明。6、自我介绍。7、阅读历史。8、书签或收藏。9、是否允许通知。

三、用户打开 app 使用之时第一眼看到的是什么界面?换一种说法,app 呈现给用户的默认首页首屏是怎样的?

1、头条大图大标题、下接标题配小图的信息流。

2、大图大标题内容卡片为单位元素的信息流。

3、图为主的瀑布流。

四、每个内容分类下呈现的首页首屏是怎样的?不同分类之间如何切换?

1、每个分类下内容呈现与首页板式相同。

切换方式分以下三种:

2、不同分类之间通过左右划动屏幕来切换。

3、不同分类之间通过上下滑动屏幕来自动衔接。

4、不同分类之间的切换需要先返回导航栏再点击分类名

五、每篇文章的缩略内容卡上可以触发哪些操作?

1、点击阅读。

2、左或右划动,触发分享、点赞、评论、收藏等功能按钮。

六、每篇文章的阅读页面是如何呈现的?

1、头图+标题+正文,发布时间,作者,所属分类。

2、可以左右划动屏幕来进入同分类下的上一篇、下一篇。

3、可以上下滚动,文章滚动到末尾,继续滚动将自然衔接下一篇。

4、顶部导航栏上设置有返回目录、点赞、收藏、分享等功能按钮。

CNN 可左右划动进入其他文章:

七、app 在文章页还应提供给用户哪些服务?如何交互?

1、字体、字号设置。

2、复制网页地址。

3、分享到稍后阅读 Pocket、印象笔记等收藏应用。如果是安卓应用,都可分享,iOS 应用就需要开发者想到这些问题了。

4、离线到本地。

5、收藏到本应用。

6、评论

7、分享到Facebook、Twitter、新浪微博等社交网站。

8、分享到短信、电邮。

9、个性化订阅

八、在哪些细节上,设计可以调皮一下?可以玩视效?怎样做?

1、下滑刷新的小动画

2、等待载入的过场动画

3、点击打开文章的过场动画

4、发挥创造力……

来源:tech2ipo

您可能还喜欢…

发表评论

邮箱地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>