物料设计:形状-通过更改元素的形状来改进Android应用程序(不仅是)的GUI的技巧



来自翻译


你好 我之所以进行翻译,是因为我最近开始在Android中处理Shape,我决定在material.io周围闲逛,并在那里找到了这些用法提示集合。 这对我来说似乎很有趣,有用并且有用,所以我决定与俄罗斯的移动应用程序开发人员分享。

在我看来,这个主题非常重要,因为对界面元素使用不同的形式会使应用程序更加有趣,甚至可能变得更加严肃。

当用户看到普通接口元素的某些非标准实现时(当然是由于某种原因),这引起了人们的注意。 此外,这种应用程序的用户在潜意识里将理解,开发人员不仅在编辑器中投入了组件,而且还发挥了创造力并提出了自己的想法。

我希望您可以从阅读中受益,并可能提高应用程序的质量。

目录


引言



表格层次



形式作为表达手段



运动中的形状



引言


材料设计样式GUI元素可以采用多种形式。 自定义元素形式吸引了用户的注意力,使您的产品更具表现力,并改善了使用印象。



元素形状


默认情况下,在“材料设计”中,所有元素都是带有圆角(4dp)的矩形。 可以通过调整以下参数来更改其形状:

  • 圆角的圆度
  • 角度性

因此,您可以稍微更改元素的形状,或使其完全不同。



定制材料设计元素的标准形式。



申请书


重点


由于表单的独特特征使它们在屏幕上脱颖而出,因此可以将用户的注意力集中在表单的不同部分。



圆形按钮和圆形底部面板的这种组合在屏幕上任意位置的普通矩形元素的背景下显得突出。

物品识别


表单使用户能够通过含义识别界面元素,以猜测其目的。



您可以通过形状来猜测这些插入物的用途。

状态显示


您可以使用表单显示元素的状态更改。 使用表单显示状态更改时,每次要显示状态更改时都使用相同的表单。



元素会部分更改其形状以显示选择。

品牌推广


要使您的品牌具有可识别的视觉风格,请将表格与其他自定义方法(例如颜色)结合使用。 在整个应用程序中对表单进行小的上下文更改将改善使用的印象。



正确使用应用程序中元素的形式有助于改善其使用效果。



表格显示


当轮廓与背景形成对比时,形状特别清晰可见。 默认情况下,Material Design使用阴影来强调形状的轮廓。 突出显示形状的其他方法(例如颜色或透明度)可以与阴影结合使用。


怎么办
按钮的填充颜色与背景形成对比,从而使按钮的形状引人注目。
怎么不做
按钮的半透明背景及其颜色会削弱其形状的可见性。




元素之间的关系


表单可用于反映接口组件之间的依赖关系。 文本或图标可以帮助增强语义负载,但前提是元素的形状清楚地表明了思考的方式。


怎么办
下拉菜单具有尖角,类似于指向导航的箭头
面板,演示了两个组件之间的关系。


怎么不做
如果您认为该表格会产生歧义,请拒绝使用该表格。 取消按钮意味着返回到上一个阶段,而其形状类似于“前进”箭头,会产生错误的印象,即该按钮会将用户带到下一个阶段。



需要更改表格


组件形状会影响用户体验。 形状更改的必要程度取决于以下因素:

  • 一个组件多少取决于另一个组件
  • 组件是否符合人体工程学要求


怎么不做
请勿使用会使组件完全无法识别的表格。


怎么不做
不要使用妨碍用户互动的表格。 此按钮的点击区域太小。


怎么不做
请勿使用会使组件完全无法识别的表格。 这些按钮与上面的插图具有相同的形状。 因此,很难将一个组件与另一个组件区分开。



表格层次


表单可以吸引人们注意界面的重要元素并显示组件之间的关系。



层次结构开发


独特的形状


具有独特形式的组件从其余元素,周围内容以及整个界面中脱颖而出。 该表格强调了它们的重要性,并引起了用户的注意。


怎么办
使组件形状与周围环境形成对比。 此按钮的圆形使其在矩形元素的背景下脱颖而出,而黑色与白色背景形成对比。


怎么不做
如果元素具有相同的形状,则很难与其他元素区分开。 由于该按钮位于形状相同的元素之中,因此很难注意到。



元素关系


使用表单连接元素


元素形状可以帮助用户了解它们之间的关系。

相同的元素


元素的相同形式表示它们的相互联系和一般含义。

相关项目


如果其中一个元素补充了另一个元素,但又不是它的精确副本,则此关系可以用形式表示。 例如,形状的尖角可以表示指向相关元素的箭头。

不相关的元素


使用图形,您还可以强调这些元素没有相互连接,而是分开工作。



怎么办
白色元素的圆角强调它与紫色无关。
怎么办
在此,右下角的按钮形状表示未连接到后面的元素。



怎么办
卡的形状和大小表明这些元素属于同一组。


怎么不做
除非该元素与其他元素关联,否则不要使用指针形式。 在此,对话框的形状指向后面的卡,给人以它们已连接的印象。




形式作为表达手段


表格可以显示商品的状态,并使您的品牌易于识别。

状态显示


表单可以显示元素的各种状态,例如选择,数据处理结果等等。

元素互动


要使用表单显示元素的交互性,请在用户与元素进行交互时使用表单更改。 例如,更改元素的形状以在触摸用户后显示其选择,或者用图标标记选择元素。

缺乏互动


如果该元素不是交互式的,则应为其选择一个表单,以使用户不认为您可以与此元素进行交互。


怎么办
更改表格应与用户的某些操作或其他明显原因明确相关。 在此,滑动后元素的形状会向右更改,并且相应的指示符会出现在元素的角上。



怎么不做
如果要显示元素的状态,则不要使用太小的指示器形式。
怎么不做
但是不要太大。 它使用了超大的指示器形状。



整齐地
在某些情况下,元素的形式可能会产生歧义-这是状态的反映,还是仅仅是开发人员的筹码? 在这里,卡的弯角只是造成了这种歧义。 用户可能不清楚弯角是指示卡已突出显示还是已添加到收藏夹中。 您可以通过以下方式之一解决这种歧义:

  • 将卡片角度的变化绑定到特定的用户操作,突出显示或添加到收藏夹
  • 通常删除弯曲模拟,但是如果您想将其用作芯片,则保留角圆角



怎么办
使用一种形式显示一种状态。 此处的圆角表示选择纸牌。
整齐地
它使用不同的形式来显示一种状态,这使用户难以感知。




品牌知名度


使用形式形成品牌风格


将表格与其他自定义选项(例如颜色和字体)结合使用,可以创建品牌的视觉风格。 重复形状将有助于使您的品牌独特和可识别。 您的应用程序还可以将一具有相似形式的表单用于不同的组件。 集合中形状的样式应与您的品牌样式相匹配。

风格创作


创建表单样式时,请避免:

  • 德语互动
  • 模棱两可的形式
  • 使用困难

混合使用不同的样式会使将任何形式与您的产品或品牌相关联变得困难。

滥用使用


过于频繁地使用被认为是品牌筹码的表格会降低其本身的感知程度。


怎么办
明智地使用表格有助于塑造产品的视觉风格。 此应用程序使用基于其徽标的表单。


怎么办
此应用程序使用类似于徽标形状的形式。



整齐地
过于频繁地使用一种形式会对它的感知产生负面影响。
怎么不做
不要使用不属于您应用程序表单集的表单。



运动中的形状


由于内容或用户操作的更改,表格可能会更改。

申请书


表单更改是响应表单中内容的更改,状态更改或用户操作而发生的事件。 例如,将设备移动到水平位置时,界面元素可以更改其大小,这将导致形状变化。

还可以更改表单,以保留应用程序的视觉样式,或显示将新对象添加到某个集合的功能( 请注意翻译器:例如,将卡片添加到工作表中 )。

表格动态变化的主要原因:

  • 该项目不适合屏幕
  • 人机工程学
  • 更改元素的含义
  • 应用程序样式不匹配
  • 捕捉/与另一个元素相关



怎么办
表单可以响应于界面中的其他更改而更改。 该按钮的切口将动态显示在底部面板上。
怎么办
一个项目可能反映状态变化。 在此应用程序中,形状在您选择卡片时会动态扩展,同时保持角的圆角。



动态改变形式


变更表格


随着元素大小的变化,其形状也会变化。 她可以将当前位置保留在屏幕上,但同时要拉伸或收缩。



尺寸图



怎么办
更改时,表格可以保留其原始大小和位置。 相对于“ A”部分,“ B”部分保留其原始尺寸和位置,而“ C”部分则被拉伸。


怎么办
可以调整元素的大小以保持形状。 为了维持倾斜角度,“ A”部分的高度与元件的宽度成比例地变化。



伸缩


表单可以伸缩以响应组件的大小调整。 变换应保留原始形状的比例。


怎么办
随着此元素的拉伸,其形状仍可识别,因为其独特的圆角保留了其原始尺寸。


怎么不做
避免在切割或拉伸时使元件变形。 该图形的角部不保留其原始尺寸,而是按比例延伸。



调整大小


调整表单大小时,请保持表单的纵横比,以免变形。


怎么办
角的倒圆半径根据其与模板尺寸的初始比率来更改尺寸。



转换为另一种形式


形状可以更改为完全不同的形状。


整齐地
在转换过程中,将形状更改为完全相同但具有不同参数的形状看起来很平滑。 在转换过程中,将形状更改为与原始形状不同的形状可能看起来很奇怪或可笑。



内容显示


内容可见度


元素中包含的所有内容必须对用户可见,并且即使在更改表单期间也不会裁剪。



怎么办
元素的形状应根据内容的变化而调整大小,但要保留其原始识别。
怎么不做
避免将表单与内容分开。 此应用程序的面板形状与面板本身分开会产生对按钮的错误理解。



默认形式


默认情况下,“材料设计”样式的组件为矩形。 它们可以转变成其他东西,反之亦然。 例如,圆形按钮可以变成相反方向的矩形菜单。

矩形形状为滚动内容提供了最大的空间,并与屏幕上的其他形状混合。 结果,该元素注意其内容。

使用标准表单,您可以添加工具提示(例如,展开和折叠图标)以显示如何进行更改。


怎么办
圆形按钮转换为矩形菜单,以提供最大的内容空间。


怎么不做
选择适合其显示内容的可扩展元素的形式。 此圆形菜单保留了按钮的形状,因此妨碍了用户对内容的感知。


怎么办
通过将圆角转换为标准直角来实现显示列表的最大空间。

注意范围


矩形形状与其他矩形形状合并,使您可以集中精力。


怎么办
当下拉列表处于活动状态时,顶层的形状将消除圆角的倒圆角,从而减少了其他形状的选择,使用户将注意力集中在过滤器设置上。




翻译结论


好,仅此而已。 您可能已经注意到有些时刻重复了几次,这是事实。 我还删除了一些非常明显的重复内容,这些重复内容是原始内容中的重复内容,但我尝试尽可能地遵循源文本。

您是否对如何进一步改善使用该应用程序的体验有任何想法? 我很高兴在评论中阅读您对此的看法!

Source: https://habr.com/ru/post/zh-CN428816/


All Articles