界面探索之灰度和色彩

   ——Translate the article on medium

                        by——三米工作室-TFboys三缺一和他们的经纪人们


随着硬件设备逐渐淡化,软件体验成为潮流,关注用户会看到并与之互动的界面设计是至关重要的。在过去数年,界面设计已经从那些可触摸,可见的物理结构和材料方面转向更扁平化,更抽象的审美。而这种新的视觉风格似乎更加吸引人,我觉得我已经丢失了一些对于直观的材料与物理的特征的亲切感。为了进一步探索这些特征,我尽力去想象那些未来的界面,试试看能不能找到一个在极简主义于物理之间的平衡点,未来人们将能够用无缝玻璃和模拟处决的按钮进行交互。 我的目标是为这项调查注入三个主要的改变: 阴影-巧妙地运用留白和不间断的阴影给人一种二维空间维度的感觉,对于界面元素的操作也能起到指示作用。一个更酷的用例就是阴影可以反映这个界面元素给人多大的压力,这些元素的操作也根据压力的不同而不同。 半透明—要记住这些数字系统是很困难的。在界面中明智的使用透明度可以让一个人了解不同的层级怎么协作,甚至也可以用来在边界打造一个特别的阴影。 视觉一致——太多的视觉一致会很快成为一件坏事;界面的每个区域看起来一样会让用户很困扰。但是,相似的,可靠的自然的互动方式会让一个人在使用这些界面的时候建立信心。 通过这三个概念的结合,以及对最新界面设计的改变,我希望给设计师展示在数字领域里使用更加自然地设计方式。

 所有新的灰度

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


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


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


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

晶莹剔透

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


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

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


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

一致性

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


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


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

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


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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • 随着硬件设备逐渐淡化,软件体验成为潮流,关注用户会看到并与之互动的界面设计是至关重要的。在过去数年,界面设计已...
    Ystarsan阅读 432评论 1 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 大家好,我是张春华,80后,一位曾经在小学、中学、大学工作过,有着15年房地产咨询顾问经验,进行过形象管理、礼...
    幸福整理阅读 365评论 0 0
  • 面试对于程序员来说是很重要的事情,面试结果的好坏直接决定了能否进入某个公司以及以什么级别和待遇进入某个公司。这篇文...
    麦子IT阅读 1,922评论 1 33
  • 那时我还小,你出门,我像个孩子一样不停地电话短信轮番轰炸,直到把你吵得不可开交,也许会看着手机响了嘴里恨恨地骂一句...
    范十一阅读 252评论 0 2