阅读类app设计理念（阅读app功能设计介绍）
用户体验十大可用性原则
当我们在使用一款产品的时候，怎样的设计才能让我们觉得这是一款好产品呢？产品的设计到底是哪一点在打动你使用它？我们可以通过【十大可用性原则】来观察，好的产品都具备什么的共同性。
【十大可用性原则】是由人机交互学博士（Jakob Nielsen）提出于1995年1月1日发表，对比现在很多成熟优秀的产品，都可以用它去评估一个产品是否可以达到好的产品的概念，同时可对我们自己的产品进行审视与修正。
可见原则
产品设计要在适当的时间告知用户现在到底发生了什么事。这个也是最基本的产品设计理念，目的是在使用过程中，知道当前状态来辅助使用。用户在网页/APP上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。即时是指页面响应时间小于用户能忍受的等待时间。
可见性原则需要保证界面的内容可见、状态可见、变化可见，看起来是特别基本的要求，但很多产品其实都做不到，很多产品基本让用户不知道所措，用户找不到信息、不知道当前的情况、不明白发生了什么，都是不符合可见原则的例子。
我们来看一下符合该原则的例子
菜单tab是否明显？ 菜单Tab可以让用户知道自己当前在哪个位置，否则他们就会在我们的产品里迷路。比如天猫的页面中有一个菜单，当你迷失在产品里时，点击它能让你随时回到首页。
数据加载是否有进度提醒，很多时候，用户不是不愿意等待，只是等待的时间过长，用户也不知道还有多久，索性就把应用给关了，如果加上一个进度提示，让他知道页面加载和跳转大概还有多久，他就会更加耐心。 如在线视频的加载提醒，会显示加载的速度和预计播放时间，H5页面的页面加载进度条等
滴滴用户端，可见车辆的移动方向和车头朝向，让用户随时掌握车辆的动态信息
微博博文输入页面、微信公众号的文章标题输入字数限制，短信的输入限制以及剩余字数的提示；
信息底部的「喜欢」按钮，点击喜欢按钮时，填充颜色变化，当把鼠标悬浮上去时，按钮就会由原来的透明状态变成淡粉的填充色，这一过程是瞬间的，这就运用了状态可见原则，反馈给用户的信息是：是的，您的操作是对的，鼠标点击下去吧！
微信的发送信息时，信息文本左边有个半透明白灰色的转轮给出发送中的反馈，发送失败时会出现红色感叹圆给出发送失败的反馈；
点击微信右上角+，即时给出显示相应的操作按钮的反馈；
页面预加载提示，比如Facebook、的预加载页面，能够让用户知道我已经在很努力的加载了，再等等，马上出来的呈现方式就是这样的。
场景贴切原则
产品的功能操作、内容表现需要符合用户的使用场景，设计时要充分进行考虑，才会有良好的用户体验。产品里所有的图标或者术语是否都在用户的理解范围内？有没有容易产生歧义的图标？所有的术语文字，用户是不是都能读懂？有没有技术性语言是贴近技术而不是贴近用户的？系统的一切表现和表述，应该尽可能贴近用户所在的环境，而不要使用系统的语言，尽量使用还用户能够明白且易懂和约定俗成的表达。
我们来看一下符合该原则的例子
滴滴司机版端充分考虑了用户在行驶中使用APP时的场景，视线和注意力没有那么集中，需要更大的图标才能方便点击使用；
手机的单手操作功能模式，考虑的就是用户只有一只手是时候可以操作手机的场景；
手机输入法单的单手输入模式，考虑到大屏手机单手打字的困难性；
阅读类APP产品的夜间模式能给到夜间用户阅读时很好的体验，苹果手机也在IOS系统增加了暗黑模式，以适应用户的夜间使用；
地图类APP在下雨天时会变成下雨状态，如滴滴打车、百度地图，同时还会根据雨量的大小做出不同的显示；
微信的发现页面，每个子功能的图标和表述都贴切用户的常见，图标采用拟物化，表述采用用户熟悉的语言；
可控原则
用户要能对当前的情况有一个很好地了解和掌控，用户才会有安全感，才会信任你的产品。如果用户发现你的产品无法控制而产生恐惧，就会离开你的产品，所以我们设计产品功能的时候要考虑每个页面是否支持让用户掌控。
我们来看一下符合该原则的例子
典型的视频播放界面，如果只有播放和暂停，你能想象到这个产品会有多垃圾吗？
手机响铃和震动模式，响铃如果不能切换，或者只有响铃模式，你能受得了这样的产品吗？
IPhone的Home 键也是基于可控原则的功能，无论在什么地方、遇到什么问题、发现不知道该怎么办，只需要按下 Home 键，就回到桌面了。
微信的消息撤回功能，也是符合可控原则，用户总是会出错的，设置一个这样的，支持消息撤销重新编辑，能让用户在聊天时更加的愉悦。
一致性原则
用户需要在同一个产品中接受同一套规范或者逻辑，同一用语、功能、操作保持一致。同样的语言，同样的情景，操作应该出现同样的结果。这是很多产品也会忽视的，在功能、交互和视觉上不考虑用户的学习成本，同时也给用户造成麻烦，让用户对功能很难产生统一性认知。
我们来看一下符合该原则的例子
在社交产品中，关注你的人会被称为『粉丝』，在另一个页面又变成了『关注者』；
电商文案里的用户和客户，商家与商户；
在一些提醒框中，确定按钮有的时候在左侧，有的时候又在右侧，颜色也会有所不同；
在工具类操作中，红色有时候表示正确，有时候又表示警告和提醒；
知乎产品的一致性就做的很好，不管PC、APP还是H5页都保持了一致的内容；
防错原则
通过网页的设计、重组或特别安排，淘汰掉有出错导向的条件或是在提交前设置确认操作等，防止用户出错。这样比比出现错误信息时在告知用户要贴心的多。如果不能锁住可能的错误，那就尽量用足够多的提醒设计，如文字tips、弹窗提醒、二次确认提醒等，减少用户可能的犯错。
防错在用户体验中至关重要，新用户对产品不熟悉，需要做更多的引导和提示，才能让用户顺利的使用你的产品。当用户的操作出现问题时，用户会想为什么不早点提醒我，为什么非等出了问题后才通知我。用户不会责怪自己，只会认为你的产品设计是有问题的。
我们来看一下符合该原则的例子
在容易犯错的重要操作点里加入二次确认。比如发布朋友圈页面的取消按钮；
在做出删除等不可恢复的操作之前，文字提示或二次确认，比如手机重置时要抹去所有数据、手机相册删除照片
微信的附近的人功能，使用时会弹窗提示，提示用户位置信息会泄漏，防止用户无意中泄露了自己的地理位置信息，从而防止出错。
协助记忆原则
不要让用户在使用产品的时候记忆太多的东西，在需要记忆某些信息的时候，产品能从功能上要帮助用户记忆，才能促进用户更好的完成某项任务。
我们来看一下符合该原则的例子
订单确认页，当你在淘宝购买东西到支付时，肯定不希望自己再回忆一遍所有的订单内容，再点确认
在网页上已填写好的资料页，在最终确认时，向用户展示所有内容，以示确认，这也符合用户在线下提交材料的思维方式；
银行卡转账时都会给你一个二次展示信息的确认页；
输入法的记忆功能，当你输入某个词后，下次再次输入，就会优先展示；
石墨文档等云端产品，每隔一会儿就会自动保存内容；
微信公众号文章阅读到一半时，下次进入还会在一半的时候开始，以及没读完的微信文章可以作为一个悬浮球暂停，待下次阅读。该功能也正适应了用户在碎片化时间使用习惯，在各种切换和退出返回时，能回到用户原来的位置。
简约易读原则
简约易读就是要让界面保持清晰，用户能够快速找到想要的信息，尽一切努力设计页面，让页面简洁美观，保证页面的可读性与易读性，同时又能突出页面的重要信息。
我们来看一下符合该原则的例子
重要的功能/内容是否突出，如商品页的促销信息、价格信息，版面划分是否清楚？ 不重要的功能是否隐藏或转移或弱化，如抽屉式菜单
微信、支付宝、微博、网易云音乐的个人中心页面，信息繁杂和简约主义
微软这个USB弹窗提示，说实话这么多年真没看懂，相反的国产软件会让你清清楚楚的明白，诶呀！原来我wps这个软件还有文档没有关闭呢；
灵活高效原则
产品设计要满足大多数用户需求，但也不要低估，轻视其他用户，保持产品的灵活高效，不论是普通用户还是高级用户都能够很顺利的使用你的产品。
我们来看一下符合该原则的例子
朋友圈单纯发文字到朋友圈功能：已经有了图文发布功能还要提供纯文字发布功能，就是在对特殊用户群提供的特殊功能，以体现产品的灵活；
提供的两种编辑模式：「Markdown编辑器」和「富文本编辑器」，「富文本编辑器」简单，通用，方便，在为普通用户提供「富文本编辑器」的同时也为高级用户提供了「Markdown编辑器」，更快速的实现编辑，这就是一种非常灵活高效的设计；
微信的发现页面的子功能默认全部显示，但在设置中可以对每个子功能的启用停用，满足不同用户的需求，保持灵活高效原则。
容错原则
向用户提醒犯错的可能，并提供给用户挽回错误的方法。要在用户可能犯错的时候进行提醒，越严重的错误提醒就越重。面对错误信息应该用可以看得懂的语言表达，较准确地反应问题所在，并且提出一个建设性的解决方案。
我们来看一下符合该原则的例子
在里删除文章时都会有二次确认是否删除的提示容错，相同的公众号里删除推送文章时会扫码进行二次确认。
在我们访问网站的时候，偶尔会因为一些特殊原因导师页面的404，对普通用户看到会一脸茫然，而设计一个温馨的404错误页会抚慰访问失败对于用户造成的不佳体验，告知的“网页不存在的原因”，提供了返回首页的链接。
微信用户误删好友后，直接通过群找到好友，添加到通讯录，不用好友通过验证，恢复好友。
用户误打开附近的人，位置信息泄漏，用户可以点击页面右上角的清除功能可随时手动清除位置信息。
人性化帮助原则
在任何时候，考虑到用户需要得到帮助的情况，并予以提示。
用户可能会在任何时候都会产生疑问，需要得到帮助，帮助性提示最好的方式是：第一无需提示；第二一次性提示；第三常驻提示；第四帮助文档；第五客服帮助。
我们来看一下符合该原则的例子
用户第一次安装APP打开时的启动轮播页，让用户在未使用产品前，就对产品有了一个初步认知；
用户第一次使用产品的某个功能时的引导使用；
网站的小图标提示功能，鼠标滑过或点击的时候进行说明；
淘宝购物完成支付后，在订单支付成功页的*** 提示文字；
某功能的操作流程说明；
淘宝商家入驻时，要求商家先学习如何在淘宝开店；
微信发朋友圈的状态时，文字文本会出现“这一刻的想法…”提示用户这里可以写下想法。
所有网页或APP都会提供帮助与反馈的功能，提供常见问题、相应功能的快捷帮助以及意见反馈。
十大可用性原则为我们在体验产品和设计产品时，提供了最佳的判断依据，当然产品设计也不是一蹴而就的，我们可以遵从这些原则对我们的产品进行迭代优化，从而提升产品的价值，另一方面我们还可以利用这些原则去体验和感受其他的产品，从而为自己的产品设计道路奠定更好的基础。
关于内容型APP的几点设计方式
内容型APP的展示形式，无外乎就是列表和卡片的组合展示。如何设计出恰当的展示形式，是设计的关键。下面我重点总结下旅游平台的展示，以“美团旅行”为例，谈谈内容型APP的几点设计方式。
“美团旅行”首页的内容可分为“特卖专区”、“旅行研究所”、“周末去哪儿/国内好去处/海外精选”、“精选目的地”和“猜你喜欢”五个模块，我会同别的APP对标，分析其优劣，并进行优化。
特卖汇应该是美团旅行的特色服务，包括限时抢购和主题折扣。我想，美团应该希望把特卖汇里面的主要内容都展示出来。就是如上图显示的三块内容。但是，这三块内容的排列显得略混乱。
想象一下用户看到“特卖汇”的时候，第一眼应该是被图片吸引，其次是“特卖汇”三个字，当看到“两天一夜”和“限时抢购”，会困惑这三者之间的关系。那么我们来理理这三块的逻辑关系，在具体针对每一块设计。
进入第二页，可以看到“特卖汇”包括了“限时抢购”和“主题折扣”，不难猜出“特卖汇”与“限时抢购”和“主题折扣”是包含关系，“限时抢购”与“主题折扣”是并列关系：
根据上面简单的逻辑分析，我将特卖汇的结构大致排列了一下：
“美团旅行” VS “携程”、“途牛”、“淘宝”
如果要说“限时抢购”最能抓住用户眼球的地方，可能就是倒计时了。因为人的注意力最容易被动态的事物吸引。下面比较几大平台“限时抢购”的设计：
（1）携程虽然将“限时抢购”的“限时”飙红加粗，并没有在第一时间内，产生用户心理冲击，让用户有点击的冲动。
（2）再看看淘宝和途牛，深谙此道。用户第一眼就会注意到倒计时，出于好奇，一定会点击进去看看。
综合上述分析，“限时抢购”可以采用途牛和淘宝这种方式设计——直接将时间放在首页，使用户产生紧迫感。
理清楚了逻辑和设计的细节，我对特卖专区这一块做了重新设计：
“美团旅行”VS“马蜂窝”
我个人对“旅行研究所”的理解，是分享吃喝玩乐的地方，类似于攻略性质的，以博客文章为主。在排版上还可以优化，让用户一眼就能明白，这一块主要有哪些内容。可以对比马蜂窝的攻略排版方式：
（1）马蜂窝 可以看到马蜂窝的“每日蜂首”也是分为两个模块，一个是可以横向滑动的每日文章精选，一个是推荐文章，不用点击“查看更多”，就可以很清楚知道这一块的主要内容。
（2）美团旅行 美团的“旅行研究所”，同样分成了两块，“周末去哪儿”专栏和推荐文章。当用户看到“周末去哪儿”的时候，可能以为“旅行研究所”中只有跟“周末去哪儿”相关的内容，如果图片和标题不够吸引力人，很容易让用户失去进入二级页面查看更多的兴趣。
根据以上分析，我们可以将“旅行研究所”中几个主要的模块放在上面，可以像马蜂窝那样，以左右滑动的形式展示更多内容。
综合以上分析，对这个模块我做了如下设计：
设想一下使用场景：当用户看到“2017最适合私奔的18个地方，去过3个忍不住想结婚”的标题，被吸引后会点击。那么这个时候用户的诉求是希望看这篇文章讲的具体内容。但是，进去看到的是很多文章列表，已经找不到想看的那篇文章了。
“美团旅行”VS “飞猪旅行”
可以比较飞猪旅行的内容在页面之间的切换时如何做的：
点击文章之后，跳转到二级页面，将展示的文章显示在第一条。
再看看美团旅行：
点击想看的文章，跳转到二级页面后找不到了。出现了断层。
“美图旅行” VS “Airbnb”
动效方面，点击跳转到二级页面时，页面从右往左移出来，这总交互方式是否是最优呢？
我们可以看看Airbnb的设计：
从一级页跳转到二级页的时候，用户明显可以看到页面切换时，内容的变换轨迹。这种交互让人感动。针对以上分析，我做了如下优化：
可以看到，这一块叠加了很多块内容，横向的tab下面又包括了产品列表。在操作动作方面比较复杂：用户左右滑动，可以看到某一个tab下面的产品列表。如果用户注意到了上面的tab，需要点击，才能看到该tab下面对应的产品列表。
“美团” VS “今日头条”、“APP STORE”
我们知道，在手机端tab最好的交互效果是滑动，而不是点击。可以看看“今日头条”的tab切换，用户使用时仅仅靠滑动会感觉很方便。
还可以看看App store，在界面中也同样很好地实现了滑动产品列表展示：
综合上述分析，我将“周末去哪儿”这块作了重新设计：
关于精选目的地，我将照片替换成了手绘图片，视觉上可能会更好：
“美团旅行” VS “携程”、“MEDIUM”
可以看到，美团旅行的“猜你喜欢”用的是列表形式展示。列表式排版有很多卡片式无法匹及的优点。但是，如果所有的内容全部使用的列表式，时间长了，视觉上是否会疲劳呢？因此需要增加一些变化元素，让用户在视觉上有所缓解。
我们来看看携程的排列方式：
可以看到携程在“猜你喜欢”这个模块中添加了新的模块，比如“北京精选玩法”。我们暂不评价他的逻辑是否合理，但是这种增加新的排列方式，确实很能在视觉上提升体验。
再看看国外一个博客网站——medium，他们在面对全部都是同类型的内容时，式如何处理的：
可以看到，他们在列表的方式中穿插了卡片，以列表为主，与卡片结合的方式；每放几个列表内容之后，放一个卡片形式的内容，再放几个列表式的。这样有很多好处，除了视觉上减少单一模式的枯燥，可能还有些商业价值。
针对上面的分析，我作了如下优化：
“美团旅行” VS “淘宝”、“携程”
列表的优势除了可以提高浏览效率，可以一屏展示更多内容，还可以放更多与产品相关的细节。所以，细节在列表类设计时需要注意。
我们可以比较“美团旅行”、“淘宝”、“携程”这三者，对细节是如何处理的：
（1）美团旅行 产品名和价格的排列位置比较好，但是 消费人数 的位置不统一，用户在阅读时，对于同一个位置出现不同类型信息，会感到困惑
（2）携程 信息位置一致，但是较重要的“价格”被放到了右下角，用户在浏览信息时，视线迂回，不太理想
（3）淘宝 信息很一致，主次分明，非常清晰
根据以上对比，我们在设计时，既要保证信息的一致性，又要使得用户第一时间注意到重要信息。那么，当信息较多，而空间较狭小时，我们需要将信息重要性做个排列：
产品名 价格 消费人数、评分 标签 距离（对于所有产品而言，周边游的产品除外）
我们可以根据重要性，排列这些信息：
根据以上的结构图，我重新设计了列表的细节：
总结：以上就是针对内容型APP排版方式的几个设计方式，基本上就是列表和卡片排版方式的综合运用。至于什么时候该采取什么样的形式，我们应该具体问题具体分析。产品对标，场景分解，注重细节。
