2

我想知道关于 ui 元素大小，尤其是按钮的 iOS ui 设计的最佳实践是什么。在我的示例中，所有按钮都基于图像，没有文本。

我看到两种方法

绝对尺寸

亲：

  • 基于图像的按钮不需要重新缩放，避免模糊
  • 界面设计器中的简单设置

缺点：

  • 相对于其他 ui 元素，按钮在更大的显示器（ipad2 与 iphone 4）上看起来更小

相对尺寸

亲：

  • 在所有显示分辨率和密度下，按钮在整个 ui 外观中看起来更好

缺点：

  • 按钮可能看起来模糊
  • 界面构建器约束将变得更加复杂

我忘了什么吗？还是我弄错了？

现在我正在设计完全相对于屏幕的用户界面。因此，假设一个按钮的宽度为屏幕宽度的 10%，纵横比为 1:1。当用户界面完全相对时，所有设备上的一切似乎都是一致的。但我的问题始于@2x 密度按钮的场景。iphone 4 的宽度（纵向模式）为 640，而 ipad2 的宽度为 768。我应该创建宽度为 77 像素还是 68 像素的@2x、10% 按钮图像？我会说 77 因为缩小比放大更好。

好吧，这引出了我的问题：

设计 UI 的最佳实践是什么？我们应该如何处理按钮的图像设计？

4

2 回答 2

0

通常问题是文本被拉伸了。

您可以按照以下步骤设置拉伸区域： https ://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/SlicinganImage.html

如果你使用渐变并且在拉伸时变得模糊，你需要使用 Core Graphics 绘制渐变。

于 2016-06-17T13:49:45.013 回答
0

我想说在 iOS 中布局图像按钮没有终极方法，它总是取决于你想要实现的目标。

在您的情况下，我会推荐以下方法：

  1. 使用布局约束来正确定位按钮。
    仅使用间距约束，没有宽度或高度约束！

  2. 设置按钮的图像（在 Interface Builder 或代码中）。
    确保以@1x、@2x、@3x 的所有三种分辨率提供每个图像资源。

  3. 如果您连续有多个按钮，请为每个按钮设置不同的水平抗压优先级。这样可以确保万一您的按钮不完全适合屏幕，一个（或多个）将按比例缩小以适合。

将图像分配给 aUIButton时，该图像将确定按钮的intrinsicContentSize。因此，按钮将自动获取图像的大小（如果不存在具有更高优先级的其他约束），并且仅在绝对必要时才会缩小（参见上面的数字 3.）。

这种方法只有在您仍然在按钮旁边留有灵活空间的情况下才有可能。例如，如果您打算将屏幕平均分成三列，并且每个按钮应该占据一列的整个宽度，那么您别无选择，只能让系统按比例缩小屏幕尺寸较小的设备的图像。它始终取决于您是否可以允许按钮自行调整大小，或者您是否需要从其父视图中强制按钮的宽度（或高度）。

于 2016-06-17T14:41:48.643 回答