界面探索之灰度和色彩

    随着硬件设备逐渐淡化，软件体验成为潮流，关注用户会看到并与之互动的界面设计是至关重要的。在过去数年，界面设计已经从那些可触摸，可见的物理结构和材料方面转向更扁平化，更抽象的审美。而这种新的视觉风格似乎更加吸引人，我觉得我已经丢失了一些对于直观的材料与物理的特征的亲切感。为了进一步探索这些特征，我尽力去想象那些未来的界面，试试看能不能找到一个在极简主义于物理之间的平衡点，未来人们将能够用无缝玻璃和模拟处决的按钮进行交互。

    我的目标是为这项调查注入三个主要的改变：

阴影-巧妙地运用留白和不间断的阴影给人一种二维空间维度的感觉，对于界面元素的操作也能起到指示作用。一个更酷的用例就是阴影可以反映这个界面元素给人多大的压力，这些元素的操作也根据压力的不同而不同。

    半透明—要记住这些数字系统是很困难的。在界面中明智的使用透明度可以让一个人了解不同的层级怎么协作，甚至也可以用来在边界打造一个特别的阴影。

    视觉一致——太多的视觉一致会很快成为一件坏事；界面的每个区域看起来一样会让用户很困扰。但是，相似的，可靠的自然的互动方式会让一个人在使用这些界面的时候建立信心。

    通过这三个概念的结合，以及对最新界面设计的改变，我希望给设计师展示在数字领域里使用更加自然地设计方式。

阴影和灰度

    虽然我重新设计的第一个方面不是这个信息组件，但是我想这个APP绝对展示了阴影在界面上使用的潜能。

    列表中的每条信息被线条分开后会更加显眼还能与被标记的未被阅读的区分开来。我将这些抛开专注于简化。每张照片的空白处和名称拥有自己的空间，这让快速在列表中滑动成为可能。纯白色的背景和模糊的阴影可以让不能显而易见的消息变得清楚，并且也能促使用户去点击这些被强调过的圆形来加入对话互动。

    同样的，阴影可以有效减少显示列表造成的视觉混乱。一些人指出目前的提醒类的APP应用了一些类似卡的造型和木纹纸表现形式的实体化设计；因为我已经很熟练使用这个APP来管理我的整个学期的日常任务，站在视觉设计的角度上来说我发现这两个设计不那么有用。给每个提醒列表分配不同的颜色，分隔的模块提供了一个易于识别的身份。还有一个额外的好处：点击其中一个列表（因为我们非常喜欢阴影效果）可以更流畅的进入显示适当的提醒的第二个视野。该屏幕提供了非常明确的指示，通过“+”符号和乡下的箭头可以在该界面上进行交互。

    这些修改后的布局给了每条列表呼吸空间，对于那些视力不好的人来说操作更加容易。这样你可以花更多的时间在你自己的想法上面而不是盯着屏幕。

半透明

    上面的例子很好的说明了在某种意义和清晰的方式上阴影和灰度可以结合。同样的，他们还巧妙的将一些半透明的思想引入了一些额外的内容和个性化的东西。让我们再仔细看看。

    在最左边，你可以看见一个人的主屏幕是什么样子的。他们看到的变换的壁纸是整个界面的舒适和熟悉的源泉。我对于这种半透明银行应用程序很熟悉，并且在每个应用程序的背景中给出了暗示。你可以看到呈现在消息和提醒的乳白色画布中的蓝色渐变以及本次研究中的其他应用程序。当然，这个半透明的概念对于任务的处理来说是意义极大地。在开发过程中，在背景的颜色开始干扰应用内容的可见性的情况下，这个概念的许多变化实际上赋予了画布更高的透明度（85%甚至90%，相对于当前95%的不透明度）。

    这个新功能所带来的一个很酷的特点是背景改变界面的整体外观的微妙方法，让每个屏幕都具有更多的个性。来看看：

这是个非常微小的变化，但可能会产生非常不同的感受和选择，而不是纯白色的界面。

一致性

    正如我在上面的待办事项列表中所提到的，视觉和交互方面的一致性是一个优先事项。显而易见的是每个应用程序的“初始页面”都有一类似的布局，比如说在下面的内容之前都有一个大标题和分隔栏。除了启动页面之外，每个应用程序的内容都保持真实；将想要的页面格式想象成舒适的停留在前方的新土地上。

    对于另一个没有错误格式熟悉的应用程序，一旦一个人了解了一组交互的工作方式，他们可以确定它在所有其他应用程序中的工作方式类似。例如，采取搜索的常见操作。通过这种设计，搜索栏几乎处于隐藏状态，直到它被熟悉的向下轻扫手势召唤，此时分割栏转换为搜索栏。

次手势将适用于每个显示分隔栏的应用程序

    通过这个小小的实验，我有机会从我的舒适区走开，在我通常最小的调色板中添加更深层次的颜色和深浅的特诊。我还获得了一个伟大的新设计工具Figma的经验。这些简短的研究是我能够思考在我们生活中慢慢流行的界面，以及他们如何能够更简单，更愉快的使用。

三米工作室“TF三缺一与他们的经纪人”小组的每周优质设计文章汉化计划02篇--《Interface Exploration: Depth and Color（界面探索之灰度和色彩）》。

Medium英文原文链接https://medium.com/@ksubs1/interface-exploration-depth-and-color-5e600cb999f3