将确认按钮放置在最右边 (#10804)

一般来说:

1. **确定**:通常放在最右边,因为“确定”通常表示用户已经完成了他们的选择或操作,这是一个终结性的动作。

2. **取消**:通常放在中间,因为用户可能会在做出最终决定之前选择取消,这样可以让用户更容易找到。

3. **删除**:通常放在最左边,因为删除是一个潜在的危险操作,需要用户谨慎考虑。将其放在最左边可以减少意外删除的可能性。

这种顺序的目的是根据用户的心理模型和常见的行为模式来设计,以最大程度地减少用户错误操作的可能性。
This commit is contained in:
Jeffrey Chen 2024-03-31 09:33:47 +08:00 committed by GitHub
parent d3b68fe56d
commit c80ceb67b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 4 additions and 4 deletions

View file

@ -35,9 +35,9 @@ const editDialog = (customName: string, customMemo: string) => {
<textarea class="b3-text-field fn__block" placeholder="${window.siyuan.languages.aiCustomAction}"></textarea>
</div>
<div class="b3-dialog__action">
<button class="b3-button b3-button--error">${window.siyuan.languages.delete}</button><div class="fn__space"></div>
<button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
<button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button><div class="fn__space"></div>
<button class="b3-button b3-button--error">${window.siyuan.languages.delete}</button>
<button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
</div>`,
width: isMobile() ? "92vw" : "520px",
});

View file

@ -34,9 +34,9 @@ const editLayout = (layoutName?: string) => {
<input class="b3-text-field fn__block" value="${layoutName || ""}" placeholder="${window.siyuan.languages.memo}">
</div>
<div class="b3-dialog__action">
<button class="b3-button b3-button--error${layoutName ? "" : " fn__none"}">${window.siyuan.languages.delete}</button><div class="fn__space"></div>
<button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
<button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button><div class="fn__space"></div>
<button class="b3-button b3-button--error${layoutName ? "" : " fn__none"}">${window.siyuan.languages.delete}</button>
<button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
</div>`,
width: "520px",
});