互動學習筆記 阿里巴巴Ant Design

2021-08-22 04:52:50 字數 1905 閱讀 4757

如果資訊之間關聯性越高,它們之間的距離就應該越接近,也越像乙個視覺單元;反之,則它們的距離就應該越遠,也越像多個視覺單元。親密性的根本目的是實現組織性,讓使用者對頁面結構和資訊層次一目了然。

縱向間距:在 ant design 中,這三種規格分別為:8px(小號間距)、16px(中號間距)、24px(大號間距)。在這三種規格不適用的情況下,可以通過加減『基礎間距』(8px)的倍數,或者增加元素(分割線等)來拉開資訊層次。

橫向間距:為了適用不同尺寸的螢幕,在橫向採用柵格布局來排布元件,從而保證布局的靈活性。

文案較短、較散時,應該設定統一的視覺起點。

表單冒號右對齊方便使用者不重不漏。

數字最好小數點後位數統一,並右對齊。

主次關係對比:突出更重要或更高頻的操作。

在需要使用者慎重選擇的場景,系統應保持中立。

總分關係對比:通過調整排版、字型、大小等方式來突出層次感,區分總分關係,使得頁面更具張力和節奏感。

狀態對比:靜態對比(顏色、文字區別);動態對比(滑鼠懸停、單擊時效果)

反覆重複一些設計要素,保持設計風格統一,幫助使用者理解層次關係。

在需要編輯的地方盡量在上下文中完成,不要另開新頁面。

能在這個頁面解決的問題,就不要去其它頁面解決,因為任何頁面重新整理和跳轉都會引起變化盲視(change blindness),導致使用者心流(flow)被打斷。頻繁的頁面重新整理和跳轉,就像在看戲時,演員說完一行台詞就安排一次謝幕一樣。

二次確認覆蓋層:避免濫用 modal 進行二次確認,應該勇敢的讓使用者去嘗試,給使用者機會『撤消』即可。建議用message或  popconfirm

輸入覆蓋層:在覆蓋層上,讓使用者直接進行少量欄位的輸入。

列表嵌入層:在列表中,顯示某條列表項的詳情資訊,保持上下文不中斷。

彈出框覆蓋層:雖然彈出框的出現會打斷使用者的心流,但是有時候在彈出框中使用『步驟條』來管理複雜流程也是可行的。

根據費茨法則(fitts's law)所描述的,如果使用者滑鼠移動距離越少、物件相對目標越大,那麼使用者越容易操作。通過運用上下文工具(即:放在內容中的操作工具),使內容和操作融合,從而簡化互動。

費茨法則:到達目標的時間是到達目標的距離與目標大小的函式,具體:

實時可見工具:如果某個操作非常重要,就應該把它放在介面中,並實時可見。

開關顯示工具:如果某些操作只需要在特定模式時顯示,可以通過開關來實現。

邀請就是引導使用者進入下乙個互動層次的提醒和暗示,通常包括意符(eg:實時的提示資訊)和可供性,以表明在下乙個介面可以做什麼。當可供性中可感知的部分(perceived affordance)表現為意符時,人機互動的過程往往更加自然、順暢。

意符(signifiers):一種額外的提示,告訴使用者可以採取什麼行為,以及應該怎麼操作;必須是可感知(eg:視覺、聽覺、觸覺等)。——摘自《設計心理學 1 》

可供性(affordance):也被翻譯成『示能』,由 james j. gibson 提出,定義為物品的特性與決定物品用途的主體能力之間的關係;其中部分可感知(此部分定義為 perceived affordance),部分不可感知。——摘自《設計心理學 1 》

靜態邀請:

引導操作邀請:一般以靜態說明形式出現在頁面上,不過它們在視覺上也可以表現出多種不同樣式。 常見型別:『文字邀請』、『白板式邀請』、『未完成邀請』。

漫遊探索邀請:是向使用者介紹新功能的好方法,尤其是對於那些設計優良的介面。但是它不是『創口貼』,僅通過它不能解決介面互動的真正問題。

動態邀請:

懸停邀請:在滑鼠懸停期間提供邀請。

推論邀請:用於互動期間,合理推斷使用者可能產生的需求。

《阿里巴巴規範》筆記

1.強制 執行緒池不允許使用 executors 去建立,而是通過 threadpoolexecutor 的方式,這樣的處理方式讓寫的同學更加明確執行緒池的執行規則,規避資源耗盡的風險。說明 executors 返回的執行緒池物件的弊端如下 1 fixedthreadpool 和 singlethr...

阿里巴巴開放平台學習

1.url 請求url註解 樣例url 說明備註 gw.open.1688.com 1688開放平台公網網域名稱 param2 請求協議格式 1 cn.alibaba.open member.get api version api namespace api name api版本 api命名空間 a...

學習阿里巴巴開發手冊 6

1.在switch塊內,每個case通過break return等終止,或者說明繼續執行到那個case為止。每個switch塊內,必須包含乙個default語句且放在最後。即使什麼沒有。2.if else for while do語句中必須使用大括號,即使一行 3.表達異常的分支時,少用if els...