金融類App交互與視覺設計規范二

本編主要詳解移動端UI組件的交互與視覺規范

UI組件交互與視覺設計規范

按鈕Button

按鈕由文字和/或圖標組成。

按鈕文字必須預示點擊后的內容，且符合使用者的預期。

按鈕的文案應該把該操作說清楚，且不啰嗦。包含語意的按鈕，例如「確認提交」比「確定」要好

1）常規按鈕

按鈕的設計應當和應用的顏色主題保持一致。

關鍵操作按鈕

Call To Action button（下稱CTA）

當頁面中的CTA 按鈕隨著頁面滾動消失在用戶視野中時，該操作將出現在頁面底部，并保持鎖定。此動畫可逆。

CTA 按鈕建議使用色塊按鈕。

文本框 Text field

文本框可以讓用戶輸入文本。

它們可以是單行的，也可以是多行的。點擊文本框后顯示光標，并自動顯示鍵盤。

吐司 Toast

吐司是用來做通知的組件，告知用戶眼下發生了什么，內容應該輕量，just come and go。

如果通知內容需要常駐在界面上，應該使用通知欄。

吐司從樣式上分為兩類：常規吐司與帶圖標的吐司

對話框 Dialog

對話框用于提示用戶做決定，或者是完成某個任務時需要的一些其它額外的信息。

所有的對話框都是模態對話框。對話框只能通過點擊操作按鈕關閉，不允許點擊遮罩區域關閉，以確保用戶看到當前的內容。

對話框從頁面底部向上升起，操作區域保持在頁面下部，即用戶單手操作的舒適區域。

下一遍將詳細介紹特殊情況下的規范