问题标签 [ui-guidelines]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
54 浏览

ios - iOS 应用的推荐控件或页面流

我有一个只实现两个主要功能的应用程序 - 一个创建表格条目的表单和另一个使用条目屏幕作为登录屏幕查找它的表单。实现这些不同功能的屏幕流导航的最佳方式是什么?可能的选项:

  1. 登录屏幕后有一个新屏幕来显示菜单以导航到表单或搜索屏幕 - 只是一个用于导航目的的屏幕不是很直观
  2. 使用标签栏控制器 - 但通常标签栏至少有 3 个项目,在我的情况下只有两个
  3. 还有其他建议吗?

在此处输入图像描述

0 投票
1 回答
3486 浏览

vim - 如何设置vim高亮ColorColumn指南透明度?

我已经设置:highlight ColorColumn ctermbg=1了,但是指南太暗了。如何增加 vim 指南的透明度,以便我可以更好地看到它背后有哪些字符?

在此处输入图像描述

或者,setcolumn 指南可以像在 Sublime Text 中一样,只是一条细线:

在此处输入图像描述

0 投票
0 回答
150 浏览

wpf - 根据 Windows 设计指南建议调整 WPF 控件大小

如何配置 WPF 以使其控件使用 Microsoft 推荐的大小?

例如,一个按钮应该是 23 像素高,包括一个 1 像素的透明边框。如何实现透明边框?Button.BorderBrush控制可见边框。

另一个例子是单行文本框,它应该是 23 像素高。

我必须手动设计所有样式吗?或者有没有办法让控件默认为原生 Windows 用户体验?


更新:这是一些差异的视觉效果。

WPF 控件:

WPF 控件

标准 Windows 控件:(来自Common Item Dialog,例如在记事本中,单击 File > Open)

通用项对话框控件

这不是一个完美的比较,因为在 Common Item Dialog 中,文件名框是 ComboBox,而不是 TextBox。我尝试比较“打印设置”和“打印”对话框(也来自记事本),但它们没有使用与打开文件对话框相同的大小按钮,甚至没有使用相同的字体。我一直忘记我在这里与微软打交道,而不是苹果。

在记事本的所有对话框中一致的按钮有一个区别,默认情况下 WPF 不匹配。如果按钮是默认按钮,则记事本中的边框会更粗。按钮的透明边框变为蓝色。对于记事本非默认按钮,您可以单击可见边框外的一个像素并仍然单击该按钮。这不适用于 WPF 按钮。

灵活性很好,但原生的它只是工作和看起来很棒的控件会非常好。如果有一个我不必考虑这些东西的插入式解决方案,那就太好了。

这是 WPF 控件的 XAML:

和代码隐藏:

0 投票
0 回答
1546 浏览

ios - iOS 13 中显示/模态演示的正确指南?

iOS 13 带有为 presentModally 呈现的工作表,创建了一个似乎不一致的更改,即使与 Apple 早期的示例应用程序也是如此。我看过 WWDC 的 iOS 13 现代化 UI: https ://developer.apple.com/videos/play/wwdc2019/224/ 阅读信息丰富的博客文章,例如: https ://medium.com/@hacknicity/view-controller -presentation-changes-in-ios-13-ac8c901ebc4e 但还没有看到关于适当应用程序行为的全面讨论(此外,我使用的是 UIKit,而不是 SwiftUI)。

示例:旧的 Apple FoodTracker 学习示例(仍然在线,但尚未升级到 Swift 3),从 Table View Cell 点击选择数据将通过“显示”segue 导航到详细视图控制器,并实现“取消”/“保存”栏按钮项目用于直接更改,而不是“< 返回”和“编辑”选项,这些选项将通过额外的步骤转换编辑。使用 Table View 上方的“+”按钮添加数据,通过 Navigation Controller 使用 present 模态方式将数据添加到 View Controller。相同的“取消”“保存”选项。下面显示了 iOS 13 中的实现: 在此处输入图像描述

在 iOS 13 中查看 Apple 的 iPhone UI,似乎在大多数(所有?)应用程序中,用户从未从选择表视图中的数据到立即在另一个视图控制器上进行编辑。相反,用户需要采取额外的步骤并选择“编辑”按钮。以下是示例,首先来自提醒: 在此处输入图像描述

值得注意的是,要查看一个项目的详细信息,您必须首先选择该项目,然后它会转换到中间屏幕,提供一个新的“i”信息圈,单击该信息圈可以查看所选项目的详细信息。还值得注意的是,虽然 iOS 13 中的拉动关闭确实向用户显示了“放弃/取消”工作表警报,但并未向用户提供“取消”栏按钮的选项。

Apple 的联系人应用程序(如下)始终将查看联系人与编辑现有联系人分开。当为现有联系人单击“编辑”时,视图控制器通过淡入淡出转换并显示新的视图控制器,而不是在新的默认“工作表”视图中从底部向上呈现模式样式,这在创建时发生一个新的联系人。虽然 Apple 表示可以将全屏用于“受益于全屏演示的复杂任务”,但此处不使用新的默认“表格”视图是否合理?从查看联系人到编辑联系人的过渡似乎确实显示了一个带有更改的演示文稿的新视图控制器。Apple 指南建议模态演示文稿(现在应该默认为 iOS13 中的“表格”样式),其中上下文为“ https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

在此处输入图像描述

在像 Food Tracker 这样的简单应用程序或我的学生正在开发的示例待办事项应用程序(下)中,推荐的 UI 行为是什么?应该使用“显示”转场从表视图转换中选择一个待办事项,其中详细视图控制器显示“取消”和“保存”的栏按钮项目(左起第二个屏幕,下方),还是应该保留“<返回”并添加一个“编辑”(左起第三个屏幕)。如果是这样,UI 是否应该以编程方式将“< Back”和“Edit”替换为“Cancel”和“Save”?这样做时是否应该使用任何其他适当的 UI 动画(Apple 的联系人应用程序似乎从查看现有联系人转换为在“编辑”时略有不同的编辑视图控制器 在现有联系人上按下按钮 - 它的动画提供淡入淡出来标记过渡)。FWIW,我注意到 Apple 较旧的“应用程序开发”示例的待办事项列表使用带有“取消”和“保存”按钮选项的单个视图控制器,而不是两步显示数据,然后编辑,它使用我在上面引用的应用程序。

在此处输入图像描述

感谢您帮助我了解最佳实践,以便我可以与我的学生分享!