所谓的“左右横滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于 Windows Phone 的横向内容滑动设计。用于在同一个页面的 X 轴方向拓展内容空间，“左右横滑”的交互方式被广泛应用于各类 App 中。
横向滑动作为手势交互的一个拓展，目的初衷是提升信息“内容和操作”的拓展性。
1. “内容”拓展性：
移动端的任何类型页面内容都可能无法在一个界面呈现完整，因此滑动去呈现更多的内容，常见的当然是纵向滑动。但它无法承载所有类型内容呈现的问题，这个时候就需要横向滑动来解决。
2. “操作”拓展性：
当一个页面的内容已经是固定完整的，这时候需要用户进行一些行为操作，如常见的下载、删除、添加、管理…,而这些行为如果直接呈现在界面上必然导致混乱，因此需要配合一些横向滑动激发这些行为，从而保证界面的流畅体验。
横向滑动从移动端手势出现到现在十几年的时间已经有了非常典型的使用场景，接下来我们就来列举一下有哪些常见的类型：以下从「清晰度、效果」两个纬度进行分解
解决内容拓展问题
这类场景通常是用户最熟悉的，不论从认知清晰度、效果角度都是不错的，主要原因是场景曝光度非常高、频次非常高；比如Android\ios首页横滑切换app入口每天上百次的操作频次；
解决内容拓展问题
这类切换方式适合内容相对聚焦和单一的产品，比如垂直类电商：wish、唯品会，所有内容仅仅是通过类目来区分的产品；微视：内容统一为小视频…;百度地图：横滑查看更大范围地图…;由于内容的高度统一和整合，因此切换难度低，但在认知的初期会稍有一定的门槛，原因是大部分app都是纵向滑动feeds流，而且用户记忆是海马记忆，不会特别清楚记得app的操作，所以新打开app和新用户会有一个认知过程，但门槛不高。
解决操作拓展问题（管理列表、IM列表、通讯录list…）
解决操作问题
在所有类型中的横滑，只有这种方式不是浏览型手势而是操作型，通常这类功能隐藏在列表中，为了保证列表信息的有效性和美观度，选择隐藏操作功能，由于是低频操作，所以初期需要用户发现并成功使用该功能；不过目前很多list页面都采用这种通用的交互手势，因此用户并不难发现。
最复杂也是最容易出现问题的
解决内容拓展问题
这是最容易出错的一种场景，就是在整个界面中只有一个模块采用横向滑动，而其它内容又是纵向feeds流滑动；由于移动端内容的路径多、入口多，因此用户的核心操作流是：找入口——看信息——做任务；在这个过程中任何一个隐晦的、不常见的交互都很容易被用户忽略，比如说：饿了么品质优选、唯品会二级类目、去哪儿旅游推荐…，这些案例其实是为了横向空间拓展更多的内容而做此选择，但通常情况下隐藏内容点击率会骤降，很少有用户耐心的横滑浏览完成，因此设计师要严格把控数量以及内容的质量；在这里还有一种情况是很严重的，就是模块级的横滑内容与纵向列表之间有叠加交互，就会导致用户反复在2中操作中完成任务，这一点非常不建议使用此手势，当然以下案例并没有这种情况。
1. 几乎能够100%适配到所有设备，保持了一致性
2. 为二级信息提供了展示空间，并且不占用页面空间。
比如在图片画廊里的图片，横向滑动可以让用户预览内容，可以划过或者点击查看。
3. 横向滑动节约了纵向屏幕空间。
而不是将所有内容都展示在一个很长的页面。纵向布局让所有的信息都成小块展示。但是横向滑动更加灵活。现在，内容可以在横向和纵向两个方向同时展示。
4. 横向滑动可以让用户预知分类里的内容，通过往一边滑、向下滑，差不不同类别的内容。
两个维度让用户可以在同一个界面中看到更多的类别和选择。
5. 横向滑动的内容需要保持高质量和持续吸引力才能提升点击转化。
1. 挑选合适的使用场景
单页多维度的信息结构是“左右横滑”最适合的应用场景。传统的 List 适合纵向无限呈现单一属性的内容（比如朋友圈或知乎的回答），而对于 App 首页等多种信息聚合的页面，就适合横向开拓内容维度。
2. 显眼并适宜的主题展示
3. 引导左右滑动（可见性）
4. 控制数量并避免极限情况
5. 低效率和错误的优先级
设计师们都喜欢“左右横滑”的设计，不仅因为信息密度大，页面层次好梳理，更多也是因为操作方式“酷”。但有经验的设计师会尽可能拒绝“左右横滑”，因为它的效率还是太低。而效率低，体现在两个方面：
首先，就像上面说过的，更多的小白用户对左右滑动的预期并不强，还是更加适应纵向滑动的传统交互方式。违反了“Don’t Make Me Think”的基本原则。
其次，纵向和横向优先级常常导致预期错误。以下图 App Store 为例，所谓的内容都是 App，泳道只是用不同的维度把 App 组织起来。
如果你要购买其中一个资源位，你要更高优先级“泳道”中的第二屏位置，还是低优先级“泳道”中的第一屏位置呢？
文章来源：优设 作者：Jingwhale Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今日头条作为资讯阅读类产品，Feed流场景是资讯类产品的核心场景之一，关于Feed流的改版尝试一直在进行，针对本次优化，多次在线上进行验证后，得到一个满意的结果，也将我们关于「头条首页改版」运用到的设计方法进行分享。
观点-实验-规则
项目前期提出设计论点，通过方案和实验去验证可行性，最后结合案例形成符合当前场景的设计规则，这也是本次设计探索所运用到的论证方法。
1. 什么是阅读需求？
一组信息通过不同的字号反差组合来满足不同场景下的文字阅读需求，这称之为阅读需求，阅读需求一般可以归纳为以下3种类型：快速定位型、浏览型、阅读型。
△ 三种阅读需求
2. 今日头条首页的阅读需求是什么？
今日头条Feed的阅读需求，我们定义为快速定位型和浏览型之间。原因是在阅读Feed时，用户有获取标题关键信息的强定位属性，同时也有浏览feed信息的浏览诉求；从Feed阅读习惯的分析，我们提到两个关键词，信息的定位和浏览，后面的探索也会围绕这两个关键词展开。
△ 首页的阅读需求
1. 信噪比与界面
「信噪比」（Signal-to-Noise Ratio）原本是用在声音和图像领域的概念，指在声音传播过程中信号和噪音的比例。这个理论也可以运用在页面中，如果要将讯息完整地传递给使用者，可以选择强化原有的讯息，或是降低多余的杂讯，来提高「信噪比」（Signal-to-Noise Ratio）以增加讯息成功被判读的机率，也让使用者能更轻松地阅读资讯。
一组信息是否更好的兼容定位与浏览属性，在于信息本身是否足够强调与清晰；「信噪比」理论是帮助我们理解「信息清晰度」的存在。
简而言之，「信噪比」理论通指有效信息和次级信息的比例，控制平衡这个比例，可以有利于信息完整的传递给用户，也能更轻松的获取资讯。
通过强化页面内的有效资讯，降低多余杂讯，从而提升页面内的「信噪比」，以达到提高有效资讯传递，帮助用户能更轻松获取资讯的目的。「信噪比」理论是非常通用、使用广泛的指导理论，对信息流页面设计有明确的指导作用；
△ 提升「信噪比」的目的
2. 视觉搜寻实验
△ 视觉搜寻实验
在视觉搜寻的实验里，让受试者从许多个「X」里面挑出1个「O」，然后再让他们从「┸」里面挑出一个「┼」。我们把所有的视觉元素称作刺激总量，大部分的元素（「X」和「┸」）称为干扰物，唯一不一样的那个元素（上面例子的「O」和「┼」）称为目标物。而实验的目的，就是要检测在干扰物增加和同等情况下，受试者会不会需要花费更多时间才能找到目标物。
当我们的视觉系统在辨识影像时，有一些影像的属性很容易被大脑处理，我们的视觉系统可以很快过滤辨识这些基础特征，让我们的大脑分辨这些影像属性更容易一些。因此我们涉及到大量信息的设计时，如果能够善用这些基本特征，便可以提高用户的阅读效率。
那么，什么样的特征能够帮助讯息更快，更有效的被用户判读和接收呢？在视觉搜寻实验中，有一些基础特征很容易被我们的视觉系统所辨识出来，其中主要有4种不需注意力介入便能轻易分辨的基本特征：
△ 4种基础特征
强化信息的基本特征是增强信息被判读最有效的方式，我们可以根据场景和用户诉求，选取最合理的方式来对信息进行处理；这4个基础特征，通过反差来增强核心信息的突出程度，辅助信息更好的传递给用户。
通过「视觉搜寻实验」，我们可以得到两点结论：
这两点结论是对于」信噪比「理论的补充，处理好信息的」信噪比「关系，强化有效资讯，弱化次要杂讯，帮助用户有效接收资讯，更轻松获取资讯。
3. 首页目标的变化
资讯的生命周期中，包括了产生、传递、接收这三个重要的阶段，而每个阶段都有可能造成信息的损耗；
信息产生是源头，这里的损耗在所难免，我们所要做的，是尽可能控制」传递「和」接受「阶段的损耗；早期的头条首页承载大量信息，目的是为了让用户可以接受到更多信息，这时「效率」会是第一位。
但在承载大量信息的同时，页面信息过多，容易造成信息对比弱、布局密集，从而导致信息 」传递「 阶段的损耗，同时用户在」接受「信息时，看到拥挤的信息布局，接受信息的」效率「被降低，被迫造成损耗。
为了更好的提升首页阅读效率，我们重新审视当前的设计目标，通过对不同组合的空间调整，平衡展示效率以及阅读识别性，控制「传递」和「接受」中不必要的信息损耗；将设计目标从过去的「效率最大化」，调整为「有效，轻松的阅读」
对于这个目标，我们结合之前抽离的」信噪比「理论，进行更为细致的拆解，确保能落实到后续的设计方案中。
△ 设计目标转变
4. 回顾信噪比
「信噪比」理论可以平衡页面内有效信息和次级信息，在这样理论的引导下，提供的方案其实更具备说服力。
和图片噪点一样，噪点越低，清晰度越高，映射到页面也是如此，页面内的杂讯过多，影响到有效讯息的传递，我们需要做的，就是给页面进行「降噪」处理。
1. 文字的反差比
根据前期的」信噪比「论点和」视觉搜寻实验「，我们得出两个核心观点：
两个论点其实都提到了信息对比强弱对于用户判读的影响，由此可见，不同信息的反差关系,是增强信息传递，缩短用户接受信息耗费时间的关键指标。
如果说「信噪比」是信息流优化的理论依据，那么「反差比」则是验证页面信息反差关系的手段。
调整页面内文字反差，一般通过三种方式来提升或调整
△ 提升文字反差方式
让我们来看首页中Feed流的标题字号，我们通过 iOS 和 Android 的通用文字规范可以发现，最小阅读文字为12号字（10号字用在标签，9号字用在数字提醒，都不适合作为阅读文字），Material design中正文内容默认字号为16px，iOS规范中则定义了7个正文字阶（14、15、16、17、19、21、23)，综合多方因素，我们选取了16号字、17号字为主要验证目标.最后形成16/12 17/12这两组组合来验证线上Feed信息流。
「信噪比」和「视觉搜索」理论中，多次提到增强元素反差比，用户能越快获取资讯；所以我们也尝试了加粗字体和加大文字的实验尝试，用于验证文字反差比的上限。
△ iOS/Android 通用文字
2. 反差比公式
为了更好的验证和观察Feed流中的不同文字字号的反差关系范围，我们提出了一个坐标公式用于验证，可以直观的观察字号，字色，字重三组信息间的关系。
Y轴代表字号，X轴是不同灰阶文字颜色，我们可以将Feed信息组合中的字号放入表格中，通过科学方法检验反差范围。
关于这套验证公式，是我们为了验证文字反差比所提出的检验方法，通过不同实验组中字号的反差范围来验证哪组更适合Feed场景，最后输出成符合当前场景的通用规则。
△ 文字/灰阶反差比推导图
最后，我们选择4组方案进行首页反差比验证，同时将比字号放入坐标轴中,可以看出以下文字的反差范围
△ 在反差比范围内，选取的四种字体组合
上面4个表格分别对应4组反差比验证的字号组合，不同字号组合的反差比范围，我们都可视化出来，以便于更好验证哪个信噪比范围更合理；每组方案的反差比范围都不一样，我们会通过线上实验，选取最适合当前场景的反差比范围，并形成适用于Feed的反差比规则。
这里也是验证首页Feed反差比的上限和下限范围，有时主体并不是反差越强越好，反差也是有阈值范围，超过这个阈值范围，会导致信息展示比例不协调，用户侧也会起到反作用。
目前对于坐标公式验证文字反差比的理论还处于实验理论阶段，我们认为对于字号和灰阶之间，有合理的规则存在，单独对于规则的抽离和梳理，还需要大量样本去实验论证，后续有新的结论产出和模型迭代。
目前线上首页存在以下问题：
为了解决这些问题，我们对于首页的视觉语言进行了优化，通过」信噪比「理论，我们了解到平衡有效信息和杂讯的比例，是保持信息干净清晰，更好触达用户的保证；因此我们重新梳理不同题材的结构，确保核心信息在首页展示的唯一性，去掉了对于用户阅读过程中可能造成阻碍的信息。
△ 首页前后对比
这样，首页上核心信息的展示层级得到统一，保证了信息干净清晰，能够更好触达用户。
在「信噪比」理论和「反差比」实验的基础上，输出了用于线上测试的设计方案，为了验证首页中不同变量的影响，我们把头部，字号，字重，间距这些可能影响首页的因素都拆分验证对于首页影响；同时，根据前面」反差比「的验证理论，我们把」字号加大「和」文字加粗「也放进实验中进行验证，为后续实验积累数据样本。
△ 线上验证首页方案
综合前面的实验结果，最终我们选择了两组这两组方案，目前线上在进行最后实验。在实验中，我们也提取到几点关键指标：
用户对于灰头样式并未特别排斥，这个对于过去头条顶部必须是红色的认知有些挑战；其实当下设计趋势是在减少用户阅读的信息干扰，灰头更符合这一趋势，同时使用灰头也会提升头条整体计品质感，对于后续设计拓展有很大帮助。
加粗字体上，男性用户比较偏好加粗字体，但是女性用户和年轻用户较为反感。
增大Feed字号，信息展示确实更突出，但是影响到整个首页的感官，而且违背了我们的设计目标，同时也不利于后续设计拓展。部分用户手机的展示情况和特殊字体设置都会受到大字体影响，需慎重考虑。
前面有谈及18号字的问题，字号增大确实能增强视觉感官，但要考虑到头条用户比较喜欢运用特殊字体，特殊字体对比通用字体更加个性化，但是字体大小，展示高度并不可控，当字号比较大的情况下，再加上手写字体，效果不可控。
△ 线上手写字体情况
线上实验后，我们也进行了一次线下用户调研，用研结果中用户对新版满意度高于旧版，其中有一个点多次被用户提及到，就是调整后的全圆角搜索框。相比过去的方形搜索框，调整后的全圆角搜索框是能给用户留下深刻印象的视觉记忆。
回顾整个首页改版过程，我们总结了项目中的流程和思考，希望能帮助大家：
1. 定义当前使用场景的阅读需求：
阅读Feed的时候，用户有获取关键信息的强定位属性，同时也兼顾feed信息的浏览属性。
2. 通过「信噪比」理论，明确设计方向：
强化页面内的有效资讯，降低多余杂讯，提升页面内的」信噪比「，达到用户有效接受资讯，轻松获取资讯的目的。
3. 运用「反差比」手段，提升信息反差比，增强信息传递：
文字可以通过字号，字色，字重调整反差关系，并且通过「文字反差验证表」进行反差比范围验证，推导出更适合首页的反差范围，形成首页反差比规则。
4. 线上拆分验证，量化首页影响指标：
线上验证方案，把字号、字重、间距疏密，头部颜色多个维度拆分验证，观察不同个指标对首页影响。
5. 抽离项目中有价值的信息，后续形成统一规则：
间距样式和信息层级统一的feed模块；从矩形到全圆角的搜索框这些知识点都可以沉淀成信息流场景的认知规则，并且给予其它业务和项目理论和实践支持，将理论和线上验证相结合，形成真正有价值的设计方法。
「信噪比」理论可以广泛运用到页面信息设计中，帮助大家合理的梳理核心信息与次要信息关系，并且通过」反差比「手段，增强有效信息或弱化次要信息；保障页面内层级的合理布局，帮助用户更有效的判读信息；这次改版也是对目前认知基础上进行的一次拆解与构建，过去我们所认知的基础目前可能处于变化阶段，这也为我们后续方向探索提供更多可能性。
希望这些能为后续设计起到帮助，给予大家思路与灵感，更好的服务用户。
文章来源：优设 作者：今日头条UED
最近设计项目中涉及到「瓷片区」，于是和一些设计伙伴请教了解了一下，在此记录总结一下，也希望可以对大家有些小小的帮助。
听说：美团内部将首页的运营广告位模块称为瓷片位，其可以根据需求变动灵活调整，就像瓷片一样灵活适用，顾名思义，瓷片区也就被叫开来了。
根据下图我们可以了解到，瓷片区在产品中的应用。
瓷片区作为与 Banner、金刚区并行的三大运营板块，都负责着导流的功能。瓷片区较两者更便于在页面中进行布局，可以灵活复用。
在电商产品中，导流指的是通过某种形式，增加对商品/功能的曝光，使自己的用户群去购买或了解感兴趣的商品/功能。导流简化流程：导流入口 → 落地页 → 转化率，设计师需要通过在这个流程中收集的数据，进行复盘反思优化设计。
瓷片区属于运营区，在页面中通常位于用户容易点击的区域。通常为图文混排，常见的类型有：实物类、插画类。
1. 实物类
应用场景：需要对商品/服务有高曝光度的产品类型，如外卖、电商、旅游类等，通过对自有商品/服务的直观展示，达到吸引用户的目的。
优点：识别度高、适配千人千面、元素更换灵活；
缺点：图片质量要求较高；
2. 插画类
应用场景：常见于金融类、虚拟类产品。
优点：高度概括主题的图形，通过插画增加产品的调性和趣味性；
缺点：针对性比较强，难复用，花费时间；
1. 排版
瓷片区常见排版方式：左右排版、上下排版和对角线排版。设计师可以将三种排版方式组合设计，使页面更具有节奏感；
2. 图片
对于电商或商城类产品来说，配图的好坏是影响用户点击率最直观的元素；设计瓷片区时需要考虑全局配图和局部配图的情况：
3. 文字
4. 背景
瓷片区背景常见类型：白色/浅色背景、渐变色背景；设计师根据产品调性及业务需求对背景进行灵活使用，但要遵守以下原则：
文中从四点对瓷片区进行了一个概括性的了解总结，设计要点的话在排版设计中都是需要注意的基础知识所以未多加赘述，以此为自己在项目中遇到的知识点做一次沉淀。
文章来源：优设 作者：木子的小千世界
「小宇宙」是即刻团队开发的播客App，目前已上架各大应用商店，仅能通过邀请码使用，导致一时间微博上出现「一码难求」的情况，那它与其他播客App有什么不同?
进入App即展示「信息流」推荐，每日更新3条播客「信息流」推荐，听的时间越长，会推荐越多更加精准的播客内容。那用户如何判断推荐的单集是否有自己想要听的内容呢？如下图所示，页面上单集信息展示条目的空间较大，在首屏约能展示2条的单集内容，除了基础的节目封面、节目名称及单集名称外，小宇宙巧妙地通过将热门评论外显，辅以展示播放量及评论数量，引导用户点击进入二级页面，进而形成转化。
不同于传统播客App仅能搜节目名称，小宇宙还支持搜索单集和用户，甚至是节目内页的内容也可以搜索到。对于那些「我对栏目本身不感兴趣，只想听其中的某一集」或者「我关注某个人或某个话题，想听听看关于他的一切」的节目，使用单集搜索功能可以更简单地直达所需。
让人惊喜的是，在节目内页长按选中任意词汇可以呼出「智能搜索」功能，这个智能体现在它允许用户选择用magi搜索和用互动百科搜索相关内容。这让我想到了Mac上一款很好用的工具PopClip（通过对文本内容的扩展来提升操作效率），小宇宙的智能搜索对于边听节目边扒关键词的「考据党」来说，无疑会大幅提升在听节目时获取资讯的效率。
在单集播放界面，除了常规的进度条拖拽、快速后退/前进等功能外，还有一个点赞功能，用户听到精彩的内容或引起共鸣的部分可以通过点赞进行互动，从点赞功能的反馈到进度条的高度的升起都能够进行实时的反馈，同时也可以帮助其他听众了解单集内容的关注点，以此为⽤⼾营造出符合他当时⾏为和感知的情景，可以达到提高用户的参与度的目的。
评论页的输入框常驻于页面底部，点击后输入框高度延伸，引导用户评论互动，此时用户如果是通过单集播放界面进入的评论页面，还会出现标记时点的选项，勾选后评论内容即带上了单集内容的时点。而时点高亮色+下划线的表现形式可以引导用户聚焦注意力和点击进行内容的收听，当其他用户点击带评论中的时点即可直接跳转至对应时间点播放单集内容，为⽤⼾之间的互动建⽴起羁绊，方便用户间的讨论交流，进而提升了点击率和单集的收听率。
另外，在用户输入评论时，输入框并不是以模态的形式出现，在用户评论的过程中依然可以滚动页面进行交互操作，这样做的好处在于不打断用户操作的连续性。以iPhone X的屏幕高度为例，除去标题栏+评论输入框+键盘高度外，留给评论本身的空间仅有大约1/3左右，在空间有限的情况下，用户滚动屏幕查阅感兴趣的评论或针对性进行回复的行为非常连贯，非模态的处理可以进一步降低用户互动的门槛。
这里有一个改进小建议，输入框内的预制文案可以换成引导性更强的内容或由系统自动生成一个场景适合的评论，这样不需要用户自己思考写什么内容，降低用户评论操作的成本，提高用户参与度。
小宇宙目前在社交上的尝试处于用户友好型状态，用户可以查看他人的播客订阅列表，发现同好，即「相近信息的收集爱好者容易获得共鸣」。如果这个有共同兴趣爱好的人刚好是用户收听的主播，就可以很容易拉近听众和主播的距离，主播对于听众来说不再是手机屏幕后面冷冰冰的声音，他更像你的一个朋友，你可以去了解他的喜好，讨论共同话题，更好地跟他进行互动。
不同的主题表达了不同情感，针对不同的社会群体的设计风格也会有所不同。
回到产品本身，小宇宙根据播客节目封面的主题色来适配不同播客信息页的视觉风格，营造出适合不同播客风格的氛围，以此来传达不同播客节目的特点。
若在热门的单集下评论，且评论点赞数最高，小宇宙领航员（官方账号）会给你留言，告知「你的评论上首页啦！」，通过这种与用户互动的方式激起⽤⼾的情感认同，提升用户评论的积极性。
点击「加入播放列表」，通过动效形式给予用户反馈，让信息的展示更生动自然，为产品增添趣味性的同时，给予用户更美好的操作体验。
下拉刷新动效中以「宇宙」图形为载体，将产品的Logo融入了其中，赋予产品独有的个性和灵气，让用户切身感受到这是一个可以探索的「宇宙」，而不是一个冰冷的工具，在减少用户等待过程中引发的负面情绪的同时强化了品牌形象。
产品中使用了较多无文字按钮，对于初次使用的用户来说存在一定认知负荷，不知道这些都是什么功能。
存在相同样式的图标承载不同功能操作的问题：「播放列表」功能在「我的播客」页中点击后是加入播放列表操作，而在播放列表模态弹窗中，点击后进入播放列表的编辑状态，同个样式的按钮承载了不同功能操作，容易引起用户困惑，带来冗余的学习成本。
当你收藏了一篇文章，收藏按钮状态从「收藏」变为「已收藏」，点击「已收藏」可以取消收藏状态，这是用户对于两个状态切换已有的认知。而小宇宙的加入播放列表功能，在点击加入播放列表后，再次点击「播放列表」按钮，会提示「已在播放列表」，而不是通常认知中的「取消加入播放列表」，容易带来认知错误。
列表右侧的「已订阅」按钮，视觉感知上像是不可点的状态，点击后提示「已取消」，再次点击提示「订阅成功」。对于有明显状态变化的功能性操作可以省去toast，这里通过「已订阅」和「订阅」状态的按钮样式变化已经给予用户清晰的传达反馈，再次提示反而多余。
小宇宙的体验分析就到这里，总的来说虽然存在一些需要优化的细节（毕竟还处于邀请码体验阶段），但是设计师可以学习的设计亮点有很多，感兴趣的小伙伴可以下载体验一番，也欢迎大家一起留言交流。
我们总在期待 Next Big Thing，企盼下一次数字革命。喊了这么多年的物联网现在还没有明显起来的迹象，而 VR 也因为头戴设备的大型化和沉浸式场景的泛用性较差的原因，反倒是 AR 和 MR 依托智能手机、浴霸式镜头组和 APP 有一定起色，但是也没有到革命性改变的程度，只能算是一个小趋势。当然，人工智能/深度学习所带来的影响更加深远，但是短时间以内，它所带来的变化趋近于隐形。
而最近2年，各种双屏和柔性屏的发布，则可能是距离我们最近的硬件变革，可能和柔性屏/双屏设备有关。
也许现在说硬件交互设计到了类似 2007 年 iPhone 发布一样拐点有点夸张，但是对于现在几乎纯粹拼配置死水微澜一样的手机电脑市场而言，这种明显区别于以往的硬件设计，将会直接带来交互、设计和体验上的改变。
2019年是否算得上是双屏设备元年，现在下结论为时过早，但是去年三星 Galaxy Fold 和 Moto Razr 的发布，确实给广大硬件厂商好好打了一个样。
尽管Galaxy Fold 去年折戟沉沙了，但是高昂的沉没成本和大势所趋让三星肯定不能就这么算了， 回炉再造一番之后今年又带着船薪版本的 Galaxy Fold 2 杀将回来，顺带还兼顾女性市场整了一个对标 Moto Razr 的化妆盒手机 Galaxy Z flip。
图片来自 TheVerge
当然，华为的 Mate Xs 也是相当优秀的产品，这款明显对标三星 Galaxy Fold 2 的产品，并没有将柔性屏制作成为向内折叠，而是完全翻过来，将它作为外屏来进行设计，反向折叠，展开的时候，屏幕自然延展。
图片来自 TheVerge
不过思路最为清奇的并非是华为，而是 TCL。就在这几天，TCL 带来了两款全新的原型机，一款手机带有两个折叠轴，相当于是将传统手机屏幕延展到以往的3倍，彻底折叠开相当于是一个 10英寸的平板电脑（回过头来想，就像是将一个平板电脑反向折叠到手机的大小，但是重量不变……）。
图片来自 TheVerge
另外一款原型机则选择了抽拉式的设计，机身可以如同抽屉一样拉开，柔软的屏幕会被拉出，延展开来差不多和 iPad Mini 一个大小了。
图片来自 TheVerge
图片来自Engadget
除了这几款之外，在今年年初的 CES 消费电子展上，联想、戴尔、华硕，这些目前世界上最大的消费电子制造商，纷纷带来了各自的折叠屏和双屏设备。
联想带来的 ThinkPad X1 Fold，是一个价格昂贵的柔性折叠屏平板电脑，它额外附带了一个蓝牙键盘。
图片来自 TheVerge
考虑到联想在此之前已经发布过带有LEC+墨水屏的双屏设备 Yoga Book 2，可以说联想是已经具备了制造两种不同类型屏幕设备的能力。
作为对手的戴尔，带来了分别对标联想这两个系列的对应产品：Concept Ori 和 Concept Duet。
Concept Ori 采用的是两块传统硬屏，你既可以让一款屏幕作为屏幕，另一块作为虚拟输入键盘或者手绘板，也可以使用配备的蓝牙键盘，吸附在底下的屏幕上来进行输入，而且当键盘移动到靠近转轴的地方，还能让底下露出的半块屏幕作为触控板来使用：
图片来自 TheVerge
Concept Duet 在概念上则和 联想的 ThinkPad X1 Fold 类似，一块柔性可折叠的屏幕，便于收纳，一体连接。
图片来自 TheVerge
看了这么多硬件，是不是觉得信息量有点大？不过简单来说，所有的这些产品，都在说一件事情：屏幕要延展开，这是一个正在发生的趋势。
同时，我们还注意到一个很明显的特征，就是所有的这些柔性屏设备都非常的……骚，且贵。动辄两三千美元的起步价，如果可靠坚挺也就算了，不仅转轴易损，且屏幕也存在易损的问题。根据 ifanr 的上手评测，即使是在优化了转轴和屏幕折叠角度之后，三星所发布的 Galaxy Z Flip 的屏幕中段依然有着不可忽视的折痕，这一问题可能会是绝大多数折叠柔性屏设备的通病。
图片来自爱范儿
与之相反，采用硬质双屏设计的硬件设备，从生产成本、工艺成熟度、价格上，都更加有优势。
值得注意的是，柔性折叠屏和硬质双屏设备，在基本的使用体验和逻辑上是一致的，除了极少数特殊的设备之外（比如 TCL的双折叠式的概念机），多数情况下，两者是差不多的。
只不过存在一个问题，双屏设备的交互和体验，需要有对应操作系统支持，因为从单屏到双屏，其实交互逻辑已经发生了巨大的改变。
一直在创新且「稳健」地更新软硬件的苹果公司，应该不会在市场未曾成熟的情况下选择发布硬件，这意味着你不会很快看到双屏 iOS 硬件，而面向着大量 OEM 厂商的 Android 和 Windows 则截然不同。着两年厂商已经身体力行证明了一件事情：只要操作系统和设计跟上，硬件马上量产不是问题。
最近泄漏的 Android 11 的新特性已经出现了可折叠屏幕的影子，但是具体情况恐怕要到因为疫情跳票的 Google I/O 大会上会揭晓答案。但是另一边，贼心不死的微软，已经开始布局面向可双屏设备的新一代操作系统 Windows 10X了。
图片来自 TheVerge
去年微软发布的两款双屏设备 Surface Duo 和 Surface Neo 并不都是采用尚未发布的 Windows 10X 操作系统，但是两者都沿用了几乎相同的交互逻辑，较小的 Neo 采用的是 Android 操作系统。这两款硬件和系统交互设计，将会在未来一段时间以内，成为双屏硬件的软件交互的重要参考和主要标杆，联想和戴尔这波 OEM 厂商，无疑是参考着微软的风向标来搞硬件产品的。
图片来自 TheVerge
传统而臃肿的「开始」菜单栏在 Windows 10X 当中，被精简为我们更熟悉的模式，新的 Windows 10X 在原有的 Windows 10 的基础上，应该有对移动端（比如 ARM 架构的CPU）和小屏幕有更好的支持。
但是，更有价值的，是微软为双屏设备所制定的交互设计规范。
下面是基于微软官方文档，精简编译后的规范：
双屏交互概述
双屏设备可以基于不同的工业设计，有多种硬件样式。微软发布的 Surface Neo 和 Surface Duo 可以作为典型的双屏设备作为参考。双屏本身可以借由铰链、转轴来连接，也可以基于柔性屏来实现。
所有的双屏设备都具备有折叠、旋转、翻转的功能，两块屏幕都可以用来作为显示，也可以一个做屏幕一个承载虚拟键盘，当然也可以借由外设，构建、组合成为新的模式。所以，为这样的硬件设计的时候，需要考虑到各种不同的情况，并且适配硬件，帮助用户实现更多的目标。
:no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/19247637/akrales_190930_3649_0139.jpg)
图片来自 TheVerge
当用户打开应用的时候，它的主要界面窗口应该最大化，占据一块屏幕的全宽和全高。这样用户可以一次打开多个不同的应用，显示在双屏上。
图片来自 TheVerge
当然，你的APP 也可以完整铺满两个屏幕，这个界面布局被称为「跨屏布局」。在默认情况下，它应该像在大屏幕上一样，一个窗口跨屏幕显示。但是你可以修改这种模式，让它可以铺满两个屏幕的同时，还可以兼顾到中间有转轴和铰链的硬件。对于这个问题，我们随后有详细的讨论。
响应式布局
比起传统的响应式布局，对于双屏硬件，我们要讨论的「响应」模式要复杂得多。就像下面这张图中所说的，要为这样多样、复杂的情况进行设计：
我们默认用户在多数时候，是处于双屏展开的状态，当用户打开 APP 的时候，它的主要界面窗口，将会最大化占据一个屏幕，这个时候另一个屏幕处于空置状态，用户可以在这个屏幕上打开另外的应用，并且用户可以通过托拽窗口的方式，来重新整理窗口和APP的排布模式。
同时，单个应用程序也应该可以进行跨屏布局，既可以让单个应用分别在两块屏幕上各呈现一个窗口，也可以作为单个窗口完整铺满两块屏幕。不论是充分利用接缝的存在，还是说尽可能地利用全部屏幕区域来聚焦单个内容，应用程序应该都可以做到。当然，这些情况我们随后会单独说到。
首先，作为一个已有的应用程序，在双屏设备上应该能够继承原有的功能，并且尽可能地兼容双屏的体验。在开始讨论如何为双屏场景进行设计应用之前，我们先应该对双屏交互进行介绍。
双屏的响应式布局
首先，无论屏幕尺寸如何，方向如何，应用程序应该都可以保持良好的外观，善用 UI 平台的现有的布局技术，通过合理地缩放来自适应，填满屏幕。如果你的屏幕元素依赖屏幕长宽比，那么应该善用平台给的 API 来进行灵活的优化。
考虑到你的应用将会在很多不同尺寸、不同长宽比、不同类型的设备上运行，所以你的应用程序应该足以应对各种不同的情况。请记住，你的设计将会遭遇和以往截然不同的屏幕尺寸和长宽比，比如纵向（全景视图）、横向（较宽的全景视图）、纵向双屏分别显示等不同情况。
考虑所有的屏幕方向
用户在很多平台上有习惯的、常见的屏幕方向，比如在 Android 和 iOS 上，通常应用是竖屏显示的，在 Windows 上，多数情况下是横向全屏显示的。而在双屏设备上，这种情况会发生改变。
比如你的应用原本是为竖屏设计的，但是需要经常输入内容，那么你要考虑到双屏设备上，你的应用可能是会被横屏显示，用户会像用笔记本电脑那样来使用应用，也就是说两块屏幕都横向显示，靠下平摊在桌面的屏幕会显示虚拟键盘或者手写区域，作为输入窗口，而显示窗口也是横向的。
双屏为多任务提供更好的显示环境，你不会知道用户会在什么样的场合，以什么样的姿势来握持设备，但是考虑潜在的使用姿态，可以让你更好得对应用进行设计和优化。
根据我们的研究，如果你的应用是注重输入的应用，那么用户在平面上打字和输入将会是最舒服也最常见的姿势。那么在这种情况下，你应该针对横屏显示进行针对性的优化。
支持多种输入模式
对于新的双屏设备，通常都支持多种输入模式，包括打字输入，屏幕触摸和手写笔这样的截至。这意味着用户可以灵活地根据需求，选择不同的姿势和输入模式，并且快速切换，以适应不同的需求。
换句话来说，就是你在设计的时候，需要支持所有的输入方式，以便用户可以自由选择交互模式。
托拽交互
你的应用应该支持屏幕托拽，这不仅是为了兼容双屏设备，而是对于绝大多数的设备的使用情况而进行兼容，确保用户体验的一致和灵活。只不过相比于在屏幕单屏上进行托拽移动，在双屏上托拽移动，将会带来更多的可能性，并且这样也将会在双屏使用场景之下，最为重要的交互模式之一。
为了确保托拽操作的自然，你需要确保诸如文本、图像、视频等常见的交互对象和元素，可以在任何地方进行剪切、复制、粘贴，并且对于共享和放松之类的操作也启用托拽操作，这将最大化地利用双屏的优势。
应用的多屏呈现
用户会希望在两块屏幕上并排显示同一应用中的不同内容，因此你的你用应该支持多实例呈现和运行。
多媒体内容画中画体验
如果你的应用是一个多媒体应用，那么应该支持画中画模式，用户可以边看视频边执行别的操作。
上面提及的很多功能属于基础应用要求，并不是专门针对双屏设备而做，但是如果你的应用支持上面的功能，那么在双屏上将会明显拥有更好的用户体验。接下来，我们着重聊一下在双屏设备上进行设计的问题。
在双屏设备上，你的应用应当支持在单个屏幕上运行，也可以在双屏上运行，当一个应用在两个屏幕上显示的时候，我们称之为「跨屏」，而跨屏显示这个问题对于双屏设备而言，是至关重要的，如何显示将会带来巨大的影响。这种独特交互模式可能会解锁前所未有的使用方法。比如，有转轴和接缝的双屏设备，因为屏幕的特征而非常适合分隔并行式的生产力解决方案。
跨屏是用户的选择
用户有选择如何使用应用的方式的权力，包括何时跨屏显示。某些应用可能在单屏或者跨屏显示的时候，看起来不够好看，但是如何使用的权力，应该交给用户去选择。
尽管本文会针对如何处理多屏布局提供几种不同的方案和想法，但是请选择适合你的用户和应用的呈现方式。
考虑用户意图和设备方向
当你的两个屏幕都被利用起来的时候（横向双屏，纵向双屏），了解用户的意图至关重要。尽管还有更多的调研需要做，但是结合我们目前已有的观察，可以得出如下的趋势：
在为双屏设备设计应用的时候，有四种常见的布局方案是你需要考虑的。通常这取决于应用是单屏还是跨屏，是默认视图还是全屏视图：
1、单屏默认模式
2、跨屏默认模式
3、单屏全屏模式
4、跨屏全屏模式
当单个应用以单个窗口运行，并且跨越两个屏幕的时候，跨屏布局就出现了。如果你原有的应用从未针对双屏设备进行优化的话，那么系统会提示你「应用将会扩展并占据所有屏幕」，并且这个时候，应用界面会自行调整大小，适应新的尺寸。
这种情况下，界面中间的接缝会显得非常明显。这是双屏设备先天的副产物。要如何优雅地处理接缝？这就是下面这节内容将会探讨的问题，我们将会提供一些常见的处理方案yi。
是否总是要适应接缝？
如果你的应用不作任何优化就直接在双屏设备上投放使用，接缝并不总会给用户体验带来影响。比如地图类应用，用户可以随意移动地图内容，接缝带来的割裂并不会对使用体验造成实质性的影响。在后面「扩展画布」这一节，将会对这个问题进行深入讨论。
但是对于另外一部分应用，接缝带来的问题就非常严重了。比如在一个表格类应用当中，如果不作修改和调整，有的内容会直接被接缝给割裂开，你必须进行滚动才能正常查看。而对于某些相对更加固定无法移动的元素而言，接缝带来的体验是破坏性的。而这个时候，我们需要使用一些技术方案来处理这个问题。
规避接缝
将元素移到一边
由于两块屏幕之间有明显的接缝，因此当用户在使用应用的时候，某些 UI 元素可能会正好被穿过接缝，逻辑上这不会影响功能，但是如果将这些 UI 元素移动到屏幕的一边来显示，会提供更好的体验。最好避免在接缝处显示文本内容，这会影响可读性。
应用程序对话框应该移到屏幕的一边，尤其是需要点击按钮操作的时候。
底部菜单应该移动到屏幕一侧，而不是延伸到两个屏幕上。
用户调用上下文菜单的时候，应该将接缝视作为屏幕边界处理，尤其是在靠近屏幕边缘的地方触发菜单的时候。
应用内的下拉菜单或者可扩展容器如果可能会跨越接缝的话，应该改变扩展方向。
当整个应用界面扩展开来的时候，应该整个移动到屏幕的上侧，而不是在靠近中心的位置横跨接缝。
贴合接缝
使用偶数列并和接缝对齐
当界面中使用网格布局的时候，垂直或者水平方向尽量使用偶数行或者偶数列，这样可以让接缝和界面间隙正好重合，用户可以更加舒适地查看信息。
在网格中使用偶数列，尤其是对于容器、表单，并且考虑到接缝来控制间距。
除此之外，还有许多应用会考虑充分利用另外一个屏幕来显示弹出菜单或者下级页面的内容。这种使用逻辑确实会让应用更加易用，并且在视觉上会更加干净清爽。但是请记住，如果弹出的界面并不是全屏的，可能会暗示它是可折叠和可关闭的，因此，你需要根据实际的设计需求，来灵活的处理呈现样式。全覆盖另外一屏的弹出界面，更加适合小尺寸屏幕。
重新排列 UI 元素
移动到接缝的任一侧
还有一种用来优化响应式布局的方法是，当屏幕方向或者大小发生变化的时候，重新排列你的内容。这种方式让你可以在两个屏幕上随意扩展你的内容，你可以通过分组来重新排列，以更有目的的方式来适配屏幕和内容。
遮罩和分割
对于一些无法重新排列的元素，比如全屏图片和视频，这个时候只能使用遮罩和分割的方式来处理。
遮罩的思路是，将接缝视作为一个遮罩元素，而图片被它给遮挡了一部分，根据格式塔原理，我们的大脑会自动补足缺少的部分，遮罩遮罩处理方式适合处理多媒体（视频，图片等）这样的画布类型的场景，在这些场景下，保持图像的连续性比显示内容的完整性更加重要。
分割的思路是将内容均匀切割为两个部分，完整呈现，这对于包含有多个控件和元素的普通界面而言，是更加合理的处理方式，包括可能会出现在屏幕中间的按钮。
根据类型的不同，这两种处理方式各有优势，我们将继续跟进不同的用户行为特征，来寻求更优的解决方案。
文章来源：优设
在这之前我得先提及一本书──《简约至上：交互式设计四策略》。这本书基本算得上是交互设计的入门必读书籍了，非常适合身处项目环节中上游的人员阅读与学习。
作者 Giles Colborne 在书中提出了四个令交互设计成果最大化的简易策略：合理删除、分层组织、适时隐藏和巧妙转移。这四个策略几乎成为我设计与优化每一个页面时的自我指导方针。
我参阅了大量的应用，想总结出它们是如何运用导航栏来给产品赋能的。竟然很巧地发现，再花式的导航栏设计也难逃「四策略」手法。
首先，导航栏作为一个独立控件，它本身就已经是「分层组织」策略的一种表现形式。接下来我们来看看，优秀的产品设计是如何运用另外三种策略来设计好导航栏的。
导航栏不能轻易删除，但凡事没有绝对。什么时候我们可以合理地删除导航栏呢？
Nike Run Club（下文简称NRC）是耐克官方出品的一款跑步记录 APP。既然做产品要站在用户角度出发，那我们就来复原一下主要功能的用户使用场景。
当你的老板要求你一天出 150 个界面设计的时候，你怕了，准备跑路，同时又不想浪费一天中任何一次记录运动的机会。于是你打开 NRC，你的目的很明确：认真地跑路，并记录运动。
点击「开始」按钮，当你一旦开始跑步，手机基本就不再使用了，直到跑步结束。
△ NRC在运动状态下的界面删除了导航栏
在用户记录跑步这样一个单一事件中，NRC 知道你会专注运动，很少存在关注其他功能、浏览其他页面的可能性。于是 NRC 可以很干脆地删掉导航栏，而返回按钮用了界面中的「结束」按钮代替。
滴滴出行在呼叫快车时也做了删除导航栏的处理。用户一旦发单，开始呼叫司机时，呼叫页面内的所有操作都只聚集在界面下方的一个视觉区域内。
△ 滴滴出行在呼叫过程中删除了导航栏
上面两个删除导航栏的示例有什么共通点呢？
第一，用户在当前页面的事件状态明确，不需要导航标题提醒用户当前在什么位置，用户也极少可能在当前页面发生其他事件操作，于是完全可以去除导航标题与内容控件。
第二，虽然删除了返回按钮，但都采用了很典型的「费茨定律」，就算用户误操作，也能便捷地撤销正在发生的事件。反而这比循规蹈矩地运用导航栏来承载返回按钮合理了许多。
△ 费茨定律简易图解
既然导航栏内所有的规范元素都有可取代方案，为什么不删除它呢？正如 Giles Colborne 在书中告诉我们的：大胆地删除，但也不要极端到盲目删除。
隐藏和删除看起来十分相似，但其实不然。我们如何区分这两个技巧呢？
隐藏最常见的情况是，当导航栏的出现会成为打扰用户沉浸体验的障碍时，我们会选择隐藏，例如看视频、浏览图片等显示全屏媒体的场景，有导航栏反而会分散用户的注意力。
△ 显示全屏媒体时需要隐藏导航栏
不知道你有没有发现到一个细节，在大多数情况下，需要沉浸体验的页面不但会隐藏导航栏，同时也会隐藏状态栏，导航栏中载有当前页面的标题、导航按钮和内容控件；状态栏中会载有时间、Wi-Fi 等系统设备信息。
iOS 在人机交互指南中提醒我们，显示全屏媒体时，请考虑暂时隐藏状态栏，但请避免永久隐藏。如果没有状态栏，当用户需要查看时间或其他设备信息时必须离开应用。设计师应该让用户可以使用简单的手势重新显示隐藏的状态栏。
△ 用户可以方便地查看时间或其他设备信息
另一种情况是当前页面非常注重一屏内容展现时，我们会隐藏导航栏。
京东在用户搜索了商品之后，头部有三个信息栏，非常冗长。分别是：
△ 京东搜索商品后屏幕头部的信息栏
用户在搜索了商品之后，向上滑动页面，京东会隐藏导航栏和全局筛选栏。
一是因为用户搜索关键词后，滑动页面大概率表示已经开始在挑选商品，这时候可以大胆地猜测用户行为，认为搜索与排序的重要级下降了，搜索结果垂直内容筛选的重要级上升了，便可以只保留下重要的操作。
二是可以让内容区域高度增加，隐藏顶部两个栏目区域可以大致增加一个商品位的提前露出，增大了商品触达用户的可能性。这不就是 UI 设计为商业目标赋能的一个案例吗？
△ 隐藏导航栏，增加了屏幕利用率
基于导航栏层级始终高于页面内容的特性，随着用户划出第一屏，许多 APP 做了重要内容或重要控件转移到导航栏的设计。
豆瓣在影评讨论区，用户上滑页面时，会将当前影片的信息转移到导航栏。其实这种转移很常见，许多内容社区 APP 都有这样的交互设计，比如浏览的公众号文章，再回到顶部试试。方便用户时刻知道自己当前所浏览的内容是关于哪一个主题的。这一类转移是单纯站在用户体验角度的考量。
△ 豆瓣在屏幕滚动后转移影片信息到导航栏
但如果你仔细观察，有一类转移却是综合了用户体验与产品目标的共同抉择。如果你再稍微了解一点该产品背后的故事，甚至可以让你洞悉到，为了巩固产品的调性和目标，PM 和 UI 们在页面设计时做了多少细枝末节的引导。
知乎在用户浏览当前问题时向上滑动页面，也会像豆瓣一样，将当前问题标题转移到导航栏上，但与此同时会将「写回答」的操作也转移到导航栏。标题转移是出于用户体验，和大多数内容社区的做法大同小异；而「写回答」的按钮转移，正符合知乎想要打造一个内容交流社区的产品调性，他们希望刺激用户进行问答互动，多输出 UGC 内容，希望用「写回答」的按钮转移进一步激发用户创作内容的可能性。
△ 知乎转移「写回答」让用户更方便地进行问答互动
京东在店铺首页上滑页面时，会将「关注」按钮转移到导航栏，方便用户在浏览的过程中可以随时收藏店铺，增加了用户对品牌店铺的关注度和复购的可能性。京东靠自营模式发家，近几年来开始慢慢重视 B2C 市场，在这个小小的关注按钮上，是不是可以算略显端倪呢？虽然我不能非常肯定，可能提高用户收藏操作只是为了辅助京东更好地进行营销权重划分，不过「关注」按钮的转移，确实能为 B2C 业务的渗透提供一份助力。
△ 京东转移「关注」让用户更方便地收藏店铺
所以我这里说到的「转移」的目的，其实和 Giles Colborne 在书中讲到的并不十分一致，Giles Colborne 是希望设计师将当前页面低频、冗杂的操作转移到另一个页面中去，而我提到的「转移」反而是产品越注重什么功能，越可以利用导航栏层级的先天优势来实现转移。
合理删除、分层组织、适时隐藏和巧妙转移已经是我做设计和分析界面常用的一个手法，它并不一定是万能的，但是它多多少少可以辅助我们做出更合理的设计。
这篇文章想要告诉大家的是，在平台规范里的导航栏是死板又相对静态的，但在四个策略的辅助下，结合用户的操作手势，也可以将它变得十分灵活，帮助页面实现更好的用户体验。不要被规范限制的太死，转换设计师的角色变成用户，你可以研究出更多好玩的操作。随便打开一个应用，去研究研究，你可能会乐在其中的。
文章来源：优设 作者：UCD耍家
流利说®少儿英语是流利说®为 3-8 岁儿童定制的一款英语启蒙类产品，本次邀请到 UI 设计师 kelly，从视觉设计与输出的角度，详细地介绍该产品游戏题型的设计过程。
流利说®少儿英语，目标是帮助该年龄段的用户建立发音自信，并且能对英语学习产生持续的兴趣。基于儿童贪玩的天性，自然而然我们会想到使用游戏化的设计，将枯燥的英语学习过程变得更有趣。
△ 收集糖果
△ 警察抓小偷
△ 切水果
△ 消灭细菌
游戏为辅，教育为主。
对于视觉设计而言，游戏题型设计的主要有以下 2 个难点：
接下来我将从视觉表达、视觉层级、反馈这三点分享我的一些思考和经验。
在开始设计前，我们对 3-8 岁儿童进行了调研，发现处于该年龄段的用户，大多有以下特性：
基于以上几点，我们便总结出以下几点设计方法。
视觉形式即题型玩法
以拼图题为例，此题的目标是检测孩子拼写单词的能力。如果仅将单词挖空再让用户选择，那么孩子会觉得这道题既不会玩，也不好玩。但如果在视觉表现上采用孩子比较熟悉的拼图，就可以方便孩子更好的理解题目的意思，进而引导孩子的操作。
场景故事要有视觉连贯性
「游戏」（此处的「游戏」代指游戏题型）结束后有一个和故事设定相关的结束画面，承接前面的操作，让整个「游戏」过程能呈现出相对比较完整的体验，以增强小朋友在「游戏」过程中的沉浸感。
△ 游戏操作：切水果
△ 游戏结尾：切水果榨果汁
由于儿童缺乏成年人所具备的视觉筛选能力，他们往往很难分辨出界面中的重要元素和次要元素。尤其是 3-5 岁的孩子，他们会习惯性地去点击界面上所有吸引他们的东西。因此我们需要为不同层级的元素设置强烈的视觉区分，明确告诉他们哪些元素是可以点击的，需要被关注的，哪些元素是不可互动的。
提高教学内容易识别性
游戏题型的设计方法通常是使用游戏的形式去包装常规的教学题型，让小朋友感觉是在玩游戏，而不是在做题。因此我们需要设计恰到好处的游戏容器去承载教学内容，使其兼具教学内容的识别性又不会影响「游戏」体验。此处我们尝试去拉开游戏元素和教学内容的视觉差距──在画面中的视觉焦点处摆放教学内容，而游戏元素仅作为背景或者容器，用于衬托教学内容，并且尽量选取不易和教学内容发生冲突的形式。此外，为兼顾游戏画面的丰富性和多样性，容器的设计需要有一定的适配性。
△ 适配文字
△ 适配图片
△ 适配文字和图片
对于看文本读单词的题型，游戏容器则以烘托文字为主要目标。在该场景下，游戏容器的视觉设计重点在于外形的刻画，简化内部细节，以此将孩子的视觉重点聚焦在文本，而非容器本身。此外，为平衡字符段不同所带来的显示差异，我们对文字的大小也进行了适配。
△ 1-12 个字符──文字大小 88
△ 13-25 个字符──文字大小 76
△ 26-45 个字符──文字大小 62
背景画面的层级感
在游戏题型中，有不少故事性强，空间延续性高的设定。为加强画面的运动感和空间感，视觉输出时，我们额外增加了前景层，利用前景图片打造视差效果，以增强整个背景的层次感。
前景图片的设置，同时也能解决适配不同屏幕尺寸时，背景区域显示差异所带来的视觉问题。
纵向运动的情况下，两侧的图形如果设置在背景里，当适配到短屏幕的时候就无法呈现出来。
而单独设置成前景图，则可以灵活地适配不同屏幕比例的机型。
克制地使用过于明亮的色彩
用研时，我们发现孩子们容易被颜色醒目的东西所吸引，但如果一个页面上过度使用明亮的色彩，则会大大分散孩子们的注意力，颜色过载所导致的视觉信息复杂性会增加孩子们的使用难度。
合理的反馈包括符合交互逻辑的及时反馈和适当的正负反馈。在游戏设计中，设计师大多会通过酷炫的动效来做重要操作的点击反馈，以增加游戏爽感。这套法则，在儿童世界也同样适用。
及时反馈制造小惊喜
我们在产品的反馈设计中适时地增加一些有趣的微动画，给孩子们制造一些小彩蛋。这些小惊喜，不仅能及时地拉回小朋友的注意力，给他们带来趣味性的同时，对他们而言也是一种鼓励。
例如：当用户点击拼图题选项时，会出现 IP 相关的卡通元素，这些元素既能加强趣味性，又能加强用户对品牌的认知。
适当的正负反馈
大约从 4 岁开始，孩子们就会有输赢的概念，会因为赢而喜悦，因为输而感到焦虑。──《数字时代儿童设计》
对孩子的正向反馈宜欢呼、表扬性的动画为主，整个画面氛围可处理得热闹一点，这对孩子来说是一个很好的刺激点，能让孩子有继续玩下去的欲望。
△ 正向反馈1：IP 形象高兴地跳出
△ 正向反馈2：IP 形象高兴地跳出 + 打分星星
△ 正向反馈3：IP 形象鼓掌
考虑到孩子们会因为输而感到焦虑，因而在处理负面反馈的时候，需要考虑他们此刻的心态，动效设计应拉开与正向反馈的差别且不能过于消极，消极的反馈容易打击孩子的积极性，产生挫败感，鼓励性的反馈为宜。
△ 负面反馈：IP 形象配合鼓励性语音做加油的姿势
反馈动画的设置也需要考虑用户的可接受程度，慎用具有攻击性动效。如下图，错误反馈时 IP 形象会受到攻击而感冒，上线后发现孩子们对这种反馈表现出了害怕的心理。
以上 IP 动画由流利说®少儿英语设计团队倾情制作。
不会写代码的设计也是好开发。
视觉稿如果不能被很好的实现落地，那再好的设计稿也只能是概念，而不是一份有效的方案。在如何更好的把控视觉实现程度这一问题上，我们也走过不少弯路，和开发经过几轮的探索，最终形成了一份适合我们团队的输出模式。
在整个开发环节，设计师主要承担一部分的动画开发工作。在和开发对接的过程中，我们主要使用的软件是：
△ CocosCreator
△ SourceTree
开发搭建完框架后，设计在 CocosCreator上，完成部分元素的动画，再用 SourceTree 向开发提交动画代码。开发最后通过代码将每个动画串联起来形成一个完整的动画。
△ CocosCreator 动画编辑器界面截图
题型动画连贯且细节多，单靠视频 demo 是无法协助开发精准实现设计效果的。为了解决这个问题，我们建立了对设计落地具有指导性意义的文档──适配标注文档和动画标注文档。
1. 适配标注文档
用户机型调查结果显示，使用 0.462、16:9、4:3 这三类屏幕比例的用户占比最大。为保证不同屏幕比例上的展示效果，我们根据上述三种主流尺寸，分别输出大小为 780×360，640×360，480×360 的设计稿，并规定以 780×360 为设计基准，对另外两个尺寸进行适配。
标注内容为三个主屏幕尺寸下的缩放比例、大小位置、特定动画的起始点或终止点位置等细节调整标注，方便开发在做适配的时候能准确还原设计稿的布局。
2. 动画标注文档
该文档主要是对动画和音效的详细说明。每个题型的动画会被拆分，以最小可拆分动画为一个标注对象，对其标注时长、具体的动画效果以及运动曲线数值等，方便开发地还原 demo 的设计效果。详细的标注文档不仅方便了开发，更为后续测试和视觉走查降低了不少沟通成本。
游戏化题型的设计，需要更多的从用户的角度出发去思考和权衡游戏与教学的平衡性。对于儿童产品而言，设计服务于教育，愉悦和多变的体验是设计的方向，教学才是最根本的设计目标。
文章来源：优设
空状态作为APP中不可或缺的一部分，有着举足轻重的作用。当新用户第一次使用产品的时候空状态的设计就显得尤为重要，据相关调查显示“平均下来，app在被下载之后的头3天时间里，日活跃用户(DAU)数量下降了77个百分点。30天内，下降比例达到80%”。
随着移动优先的趋势，APP的设计也越来越受到公司重视，不断地提高APP的设计质量是每个设计师的追求，有哪些设计中的细节被你忽略了呢？让我们一起来看看这些细节你都把握住了吗。
蓝蓝 http://www.lanlanwork.com