好奇心日报,从用户人群定位看UI&UE设计

Logo.png

版本信息:好奇心日报3.2.1
设备机型:iPhone 6s
操作系统:iOS10.0.2
用户人群定位
纸媒体转移到新媒体,每天大量的内容在更新,人每天都在浏览大量的内容,对优质的内容有极大的需求,内容简练,但是要求规则较高。
好奇心日报和其他资讯类App(今日头条、网易新闻等)相比,内容更加适合精英人群,
人群的特点:时间成本本高,关注有品质的内容。同时好奇心日报,颜值最高的新闻阅读神器,和其他新闻类App截图对比,没有对比就没有伤害。
首页与其它页面排版.png

品质的体现
对于好奇心日报对于阅读品质的体现,将从以下三个方面进行分析。
1.内容选取类别,视角,分析的深度以及专业度,文字的锤炼,信息的准确性等,即高质量的内容。
2.内容排版方式,排版简洁,突出主要内容,在珍贵的短时间内,快速获取感兴趣的内容,高效获取信息。
3.内容阅读体验,在有限的时间内,进入无干扰的阅读模式,越快越好。
色彩
主要颜色:黄色,黑色,白色
色彩.png

黑色:严肃、精选、有质量的内容。
黄色:尽量通俗、直白的语句,阐述严肃的内容,黄色充满青春气息,朝气和活力。
白色:文章内容背景为白色。
如何体现品质定位
1.内容定位
从好奇心日报的简介以及关于我们,还有小作者我在知乎看到的一篇介绍好奇心日报的文章可以总结下以下几点。
内容核心定位:商业洞察、生活方式和年轻中产
引导页.png

商业洞察:以公司为报道主体,公司里面的人和事。
生活方式:生活方式是每个人必须选择的,在社会提供更多选择的时候。
年轻中产:在人群结构中,20~29岁的人口比例最大,支持相当大的消费,给社会商业结构带来相当大的改变,对这部分人进行阐释。

内容涉及领域

好奇心简介.png

商业:商业中最有趣的那一部分,生意,创业,竞争,用户。
娱乐:不是大街上看热闹的娱乐报道,而是分析如何沉迷,如何创造,审视生活中的浅薄和热烈。
设计:我们周围的美好的东西,它们是如何产生,如何被设计的。
智能:关注创造力,关注引起生活变化的引擎。
城市:一座城,一些人。
时尚:睨视浮华,重新定义潮流。
2.内容的排版方式

首页.png

内容的表现方式,突出新闻资讯内容,简化功能入口,排版简练,统一。
1.没有导航栏,没有菜单栏,状态栏的背景为首页轮播图。
2.其他选项的入口均为一个Icon:黑色圆形背景,黄色的Q的Logo。
首页功能入口.png

3.Z轴空间的的设计利用。唯一的Icon的阴影提供了对象的深度,使其在视觉上有更高的高度,区分了Icon的入口和内容在Z轴的空间中的位置和内容层次。

首页与其它页面排版.png

4.灰色背景,卡片式设计,主要信息:黑色文字的标题,辅助性文字与图标,相关配图;除了首页,相应页面的内容也采用了卡片式的展示,减少了用户认知和学习成本。其中在个人中心你喜欢的文章排版格式和你在首页看到的一致。
卡片图文.png

5.根据人从左往右的阅读习惯,左边文字,右边图片:文字向读者传达主要内容,标题是新闻资讯类的信息的获取重点,配图辅助文字传达信息,好奇心日报的配图的质量还是可以的。
6.主推内容是抓人眼球的,配图和文字相比更能吸引人的注意力,因此这类主要组成是较大面积的图片。
7.卡片形式统一:小卡片内容和文字为1:1的分布排版,内容展示统一用这种形式,节省你的精力去辨别和适应排版;大卡片形式以配图和文字为主,上下排版为主。
8.内容排版错落有致,大卡片和小卡片式的资讯有节奏地排版。
大卡片以下形式:
大卡片1.png

1)首页轮播图,配图,黑色半透明渐变蒙板,白色文字
大卡片2.png

2)主推文章:配图,标题,简介文字,其他(分类、评论数、喜欢数、发布时间)
大卡片3.png

3)好奇心研究所(参与好奇心的话题研究):Icon+标题、分享图标、简介文字。
大卡片4.png

4)推荐关注&已关注,左右滑动可预览。卡片套卡片。大卡片:Icon+标题、关注图标+分享图标、小卡片。其中小卡片:配图,标题,简介文字,其他(评论数、喜欢数、发布时间),灰色线描边。内容排版的形式和卡片1相类似。
大卡片5.png

5)今日应用&为什么读书:基本和“推荐关注&已关注”排版一致,只是小卡片的大小不同,小卡片的比例和手机和书本的比例感觉相似-长方形。
大卡片6.png

6)开你脑洞,一张你的头像(默认头像有点痞子的味道),加你的关键词的标签图;小卡片的相关推荐栏目:配图+名称+添加Icon,已经订阅的人数,这个会吸引人去订阅(从众心理吧)。
毛玻璃模糊效果.png

9.毛玻璃的的模糊效果的背景,留白处理,突出主要内容,营造了高大上的氛围。
3.内容阅读体验
首页浏览交互.png

1.无分类,下滑不断展示:主推资讯,关注内容,推荐关注内容的浏览等。
2.沉浸式的阅读体验,通过一个Icon来实现,除了展现的主要阅读内容,几乎没有任何多余元素干扰用户的阅读体验。
3.在滑动浏览的时候,好奇心日报的浮动的图标是隐藏的,在不滑动的时候出现。
详情的完全沉浸式阅读.png

4.进入内容详情,用户需要的主要操作位于页面底部,同样没有导航栏,菜单栏
5.滑动浏览,图标消失,状态栏隐藏(这个,厉害了word哥),手机全屏式的浏览,完全的沉浸式浏览。
6.内容详情的阅读,用户几乎不用变化手持手机的位置,就可以完成所需要的操作。
7.App的进入的页面返回之后,都到达首页。
轮播图的杂志式的阅读体验.png

8.轮播图:杂志式的阅读体验,全屏的封面+加标题,下一屏为内容详情。
历史浏览记录.png

9.一篇文章阅读之后,返回到首页,再次点击进入文章,文章会保留在上次阅读的位置。
设置字体大小.png

10.内容详情,可调整字体大小。
逗比的提示文案.png

11.逗比的提示文案,搞笑的配图,阅读完之后,虽然是弹窗提示,但会让用户感觉很好玩。
其它-微交互设计
隐藏菜单栏展开动效.png

1.点击浮动图标,隐藏的分类内容出现,内容分上下两部分,分别从上向下,和从下向上跳出,充满动感。
2.点击关闭按钮,关闭按钮向下跳出屏幕,Q的Icon按钮跳进屏幕,这个自己可以感受下。
加载.png

3.与App主题色一致的,动感的加载图标(小太阳在转动,其他为静态),转动,向用户传达在加载。
喜欢动效.png

4.点击喜欢图标,图标的动效变化,喜欢数量的即时更新。
5.可优化的交互手势:全局统一的左右滑动切换手势。部分页面左右滑动可切换,部分不可以切换。
消息反馈.png

6.消息反馈,同浮动icon的排版一致,黑色背景+黄色文字。
推荐订阅交互.png

7.推荐订阅:同样采取左右滑动可以预览,这个交互好友好,不用进入下一页面便可以浏览所有。添加关注,消息提示后,此订阅消失,实时更新。

结语:我们处在一个传媒高度发达的时代,信息史无前例地增多,门户网站以及崛起的自媒体充斥我们的生活,分散我们大量的注意力,同时精英人群的时间成本逐渐增高,选择性阅读、高质量的内容以及阅读效率称为人们阅读信息的趋势,好奇心的日报的设计就是在满足精英人群的阅读需求:在碎片化时代,人在用碎片时间来阅读,高效快速地阅读。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,046评论 25 707
  • 本文发表时使用的好奇心日报P版本为:Version 3.1.0。使用的手机为Android系统。 好奇心日报的定位...
    龙隐阅读 1,598评论 2 12
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,658评论 22 664
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4 60
  • 前段时间Facebook COO 雪莉·桑德伯格丈夫突然去世的消息备受关注,同时也把雪莉·桑德伯格这个人物推上舆论...
    sindla阅读 545评论 0 1