好奇心日报，从用户人群定位看 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.推荐订阅：同样采取左右滑动可以预览，这个交互好友好，不用进入下一页面便可以浏览所有。添加关注，消息提示后，此订阅消失，实时更新。
结语： 我们处在一个传媒高度发达的时代，信息史无前例地增多，门户网站以及崛起的自媒体充斥我们的生活，分散我们大量的注意力，同时精英人群的时间成本逐渐增高，选择性阅读、高质量的内容以及阅读效率称为人们阅读信息的趋势，好奇心的日报的设计就是在满足精英人群的阅读需求：在碎片化时代，人在用碎片时间来阅读，高效快速地阅读。
文／Sherry被注册了
关键字：UI设计, UE, 设计
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
