twitter一般看什么（Twitter安卓端体验的全面革新）

（原文地址：https://medium.com/@BashaChris/overhauling-the-twitter-experience-on-android-80f5b09e7c67

作者：Chris Basha

译者：金路

交互设计教程：www.iamue.com

手机设计

第一步

我开始设计App所做的第一件事情就是记录一个功能列表作为主要导航，这些功能是由客户所描述的，使用这些功能，我做出了App的基本用户使用流程。然而，在这个项目中上述行为都是不必要的，因为twitter已经将这些事情弄清楚了。用户使用流程应该始终与最常见的用例相匹配，这样它就可以适用到用户实际的使用中去，从而使得它使用方便以及易于理解。

尝试并创建多个用户使用流程，然后测试、迭代非常重要。设计师通常会创建他的第一个版本，并坚持下去，而不是去探索新的可能性。第一个版本可能使人一见倾心，但是没有替代品相比较，就不会显示出它的缺陷和弊端。

网站通常是一个服务的出发点。用户认为网站是网络的大脑，而移动应用程序是将内容传输到他们手中“方便的方式”.所以移动应用程序类似他们服务的网站的镜像，这点很重要。因此，无论什么平台都要做到用户不必重新学习一切，基本上形成我们称之为跨平台的一致性。

Twitter的网站使用标签，任何东西都无法替代。用户在第一次启用app时会立即识别图标，知道内容在哪个期待的标签上。我可以使用文本标签来替代图标，但图标加强了品牌认知度，而这正是使他们一眼认出的原因。

大多数Android应用程序使用右侧抽屉或面板显示通知，所以我们失去了几个与其他安卓应用程序保持一致的点。但为了保持一致，我们将使用了一个标签在这里。

这个操作栏容纳了所有的Twitter导航，你可以看到用户流程图中所有重要的界面都在这个操作栏，我们将它作为一个独立元素成为使用app时候的中心点。

让我们转移到内容发表的设计。你可以在看上述图中看到的内容发表的最常见的类型：一种是正常的内容发表，一种是内容发表中带有图片，最后一种是引用转发。

马上你可能注意到，这些人的头像是不是像大多数的Android应用程序采用圆的形状，而是方形的，这些方形头像是twitter品牌细节之一。

设计指南（guidelines）可以帮助我们创建这些布局。数值测量大多基于设计指南(guidelines)，颜色是来自于twitter的官方品牌部分，而且我测试了这些颜色对色盲用户没有认知障碍。图中的图标是去除色彩倾向的，但是最好将你的设计传输到你的设备以及模拟这些色彩空间来测试这些颜色。你可以做到这一点：进入设置 > 开发人员选项 > 硬件加速渲染 > 模拟色彩空间。

如果你将这些部分组合在一起，就可以做出一个时间轴的界面了，除了FAB(浮动操作按钮)，但是我打赌你已经知道它是什么了。现在我们来说说FAB.

FAB

推文包括文本和图像，图像可以从你的设备中选择图片或视频，你也可以使用Twitter的摄像头选项进行拍摄。

这些是我考虑到创建Fab时的选项。首先我做了一种纸质fab，是一种当fab被按下时自身反应的纸质选项。我也尝试了快速拨号的方式（类似于path中的加号按钮），它包含了几个同类的次级按钮选项，但是这类fab形式的缺陷在于常态下采用一个加号图标，当按下状态下时按钮旋转类似于一个X。而且这种加号图标不适用于我。

所以我排除了所有的可选项，发现了一个更好的替代方式：在下一屏幕展现，因此消除了选择的必要，Taylor Ling称之为“互动疲劳”。这样，FAB讲述了一个简单的故事，“创建一个tweet”。

一旦我们按下fab按钮，一张新的纸将从底部展开带来一个新的界面。当用户碰触到fab按钮，一种水墨涟漪的效果便从你的指尖开始展开，它将会覆盖整个页面并引来一个新的界面。即使没有水墨涟漪的效果这种转变也非常好，但波纹动画与用户行为有直接的关系，并且用户明白是它们引起在UI上的变化，使得用户感觉一切在他们的控制中。

因此，这是内容编辑页面。我尝试了很多迭代方案，并最终定义了最合乎逻辑和最可用的一种。

让我们从底部开始。这些方框作为占位符告知这个空间可以操作，无论是通过摄像机拍摄照片或视频，或者从图片库上传图像。在这里，我们展示了5到10张来自于你的图片库中最近的图片，这样用户就不必浪费时间寻找他们最近拍摄或下载的图像。

这就是fab选项的去向。争执仍然还有，两个不同的方向，所以我们没有使用户在这里慢下来的（已经改变了用户的认知负荷）。

在这里我们可以写我们的tweet，我们可以看到tweet按钮（右上角）左侧的字符计数，因为接近意味着有关系。当用户发表的内容超过允许的字符计数，会出现一个轻微的抖动和告示，有点像它想说：“嘿，我不能让你键入任何更多的字符，你必须删除一些！”。同时它基于你剩下多少个字符数改变颜色。最后我们发表tweet并回到时间轴。

在时间轴上点击推文会导致层次结构的变化。这条推文被放置在一张纸上，然后获得一些高度和扩展，以覆盖界面。动画是这里的关键！认知负载是最小的，因为动画解释了用户在上下文和层次上的变化。

随着纸的扩展，用户意识到主界面上只是在这个纸表之下，他们可以通过点击操作栏的x按钮立即回到主界面。

我探索了这个动画的2个版本，第一个推开推文而不是覆盖底部从上面展示推文，但最终我使用后者，因为我觉得它传达的层次结构和上下文的变化更好。

Tweet界面是非常简单直观的，没有什么需要在这里解释。

你可以在这里看到所有的标签的样子。信息设计在这里非常类似于Twitter在进一步加强品牌。

你可能已经注意到了，FAB样式在邮件的选项卡与其他不一样，这就是为什么它需要一个合适的动画让用户了解这一变化。

当主页和通知选项卡之间滑动时，FAB按钮保持不变，因为我们仍在推广创建tweet。然而，在邮件选项卡中的行为是创建一个直接的消息，所以当滑动到邮件选项卡时， FAB有可能缩小下来，然后重新长出了新的图标用来吸引用户关注，让他们知道这个变化。

概念模型

有趣的是，现在的用户已经创建了应用程序的心理模型。不一定是tweet如何工作的，但是是应用程序的导航是如何工作的。他们清楚地知道层级关系，并根据他们的期望来操作一切。

以上是三维层面的视觉展示。由于material design的爆发，我认为这是3D渲染的名称。

正如我们前面看到的动画以及其他内容都是帮助用户建立这个概念模型，并掌握了导航结构。但是，由于它们可以说是沉重的细节，它们可能会变得令人厌倦，甚至阻碍用户的使用。因此为什么不在用户熟悉应用程序结构之后加速这一动画？幸运的是，Novoda一些优秀的开发商有完全相同的想法，并让程序库正在这样做！

会话界面也非常直观，但我想借此机会解释72dp关键线背后的逻辑。

根据设计规范组织一个列表项内容的最佳方式是，从左侧边缘，一个16DP间距，40dp头像，再次16DP间距，然后该项目的文本开始。

16 40 16等于72dp，所以关键线要达到的目的是使操作栏的标题与列表项的文字对齐，所以它创造了一些视觉上的布局平衡。这正是我们在时间轴上所做的，十分适用。但是这不是这里所需要的案例，因为我们没有列表项，而是会话气泡。所以，我将会话气泡与操作栏的文字对齐，是48dps，因为这在特殊的布局中是非常合理的（同时它也是一个相当不错的数字！）。

让我们来看看个人资料页面。

我真的很喜欢Twitter在Android和iPhone平台做的新的个人资料的布局，所以我的版本并不是真的那么的不同。

我把他们使用的3：1的图像作为头部使用并扩展它，所以它也涵盖了状态栏，同时也十分明显。

移动端Twitter在某些方面完全忽略颜色主题化。颜色主题化是提取标题图片中最有统治力的颜色，并将它作为一些主题UI元素。从本质上讲是Android的调色板。Twitter只有个人信息页面才用了这种提取颜色。 Twitter的具体控件如follow和Tweet仍然使用Twitter的标志色。

在这里你可以看到我用与Twitter个人资料界面上列出的同样的标签，进一步加强两个平台之间的一致性。

这里需要思考的一件事是用户信息下的子标签。Twitter将tweets进行标签分类，分成发帖、发帖及回复、图片和视频。起初我以为使用下拉菜单，但不会非常有效因为用户可能不知道在下拉列表中列出的其他选项。 “眼不见，心不见”，对不对？所以不是我用了这个布局它才用点击的方式在类型和推文之间进行切换。它花了一些时间来使它看上去正确，但是最后布局证明是相当美观和易用的。

不久前，Twitter决定去除在热门话题中的Discover选项卡，将之挪到搜索界面。这可能是经过慎重考虑以及数据分析之后作出的决定，所以我要接受这个决定并进行设计。

点击操作栏的搜索图标之后，我们展示了twitter上的10个热门趋势，每个都有简单的介绍。这是twitter新趋势界面的基础。

按操作栏中的搜索行动后，我们提出了十大趋势在Twitter上，随着每一个简要说明。这是Twitter的新趋势屏幕的底部。趋势大部分时间都是首字母缩写，所以你不可能知道他们是什么。在这个界面，热门趋势给出了一些处理并放置相关图像，搜索栏可用于搜索tweet，人物，新闻和更多。

平板设计

当我第一次开始重新设计Twitter的平板电脑，我的第一个想法是将时间轴、通知和消息划分成3种不同的面板放置成水平滚动视图。这种布局很快显示出了它的缺陷。首先，当屏幕容纳超过2个面板以上的界面，用户很难聚焦到当前界面，因而不可能在相应的面板上进行同步操作栏和FAB行为。

所以我决定在平板电脑上使用标签。这样布局更直观，用户更容易看到和理解屏幕上正在发生的事，它仍然是与网站一致。

如图这就是我所设计的。我把标签排成一排，因为我觉得放置在它们各自的栏目中是在浪费空间。

当滑动时，蓝色的纸页将收缩并升高，所以tweets可以在下面滚动。

触摸FAB导致我们前面看到与启动同样的动画，但不是蓝色的飞溅，随着波纹效果屏幕变暗，编辑器是作为一个对话框展示出来。布局与手机端的是相同的，所以这儿并不是新的 。

按tweet按钮并没有切换到一个新的屏幕上，但是tweet卡片扩展以显示额外的内容。点击x按钮就返回到它的容器之外的原始尺寸。这使得它在屏幕上停留即使Tweet已滚动起来，因为Tweet可以包含很长的回复。因此，在它的旁边有一个X按钮，允许我们退出Tweet而不是滚动查看所有内容。

是的，你可以通过点击背景来退出这条Tweet，但这不是一个明确的指标，用户在尝试之前并不知道这一功能是否存在。因此需要添加一个明确的指标，如X按钮提供了一个明确的提示。

这是我最喜欢的界面重新设计之一。这是一个基本的主详细布局，消息列表在左，对话在右。

手机端将全部清除行为放在了操作栏上，这里只是移动到了信息上面，因为它更接近布局展示的地方，这样更加合理。

这个页面看起来和网页端很像，在移动端也同样适用。一切我们谈到的在手机上有关颜色、标签和布局在这里也适用。

请注意，所有这些布局都是灵活的，可以非常容易应用到平板电脑中来。

这就是我关于Twitter的重新设计，我希望你能喜欢这篇文章并能学到一些新的东西。

本文系JDC翻译内容，如需转载请注明出处。谢谢！

,