設計規(guī)范的學習

之前閱讀了各家的設計規(guī)范之后自己總結(jié)匯總了一下,輸出這篇文檔,現(xiàn)在放上來


使用戶清楚和愉悅

交互設計引導用戶一步一步進行操作,給予用戶反饋,引導用戶往下進行操作。

好的交互設計使用戶感覺智能,對整個操作的過程充滿好奇,好的界面給用戶在合適的時間提供合適的工具。

設計與功能的整合

視覺表象和交互行為要與其功能良好的整合在一起。例如,一款協(xié)助用戶完成重要任務的應用應該使用不易察覺且不引人注目的圖形、標準化控件和可預知的交互行為從而讓用戶保持專注。反之而言,一款沉浸式體驗的應用(比如游戲),就需要吸引人的視覺表象,在鼓勵用戶探索的同時帶來無窮的樂趣和刺激。

隱喻

當一個應用的虛擬對象和行為與用戶熟悉的體驗相似時——無論這種體驗是來源于現(xiàn)實生活或是數(shù)字世界,用戶都能更快速地學會使這款應用。比如,他們拖曳(drag)和滑動(swipe)對象,他們撥動(toggle)開關(guān),移動(move)滑塊,滾動(scroll)數(shù)值選擇器,他們甚至通過輕掃(flick)來翻閱書籍和雜志。Material design中是使用紙片隱喻現(xiàn)實世界。

信息架構(gòu)清晰

信息架構(gòu)方面要清晰,使得用戶能在虛擬架構(gòu)中明確自己所在的位置,在當前位置可以做什么。導航需要告訴用戶,當前在哪,可以去哪,如何回去等問題。信息架構(gòu)的設計要與用戶現(xiàn)有的心理模型保持一致,從而減輕用戶的認知負擔,也有助于用戶將新設計感知為熟悉的。除了要有清晰的導航形式,還應該確保對象間的路徑是合理的,符合預期的且容易追溯的。設計一個能夠快速簡單地訪問內(nèi)容的信息結(jié)構(gòu)。合理地組織你的信息結(jié)構(gòu),保證它只用最少次數(shù)的點擊、橫掃和屏幕間跳轉(zhuǎn)就能訪問相應的內(nèi)容。

不要包涵多段的面包屑路徑。返回按鈕只能執(zhí)行一個單獨的操作,即返回到上一屏。如果你認為用戶可能會因為忘記到達當前屏的完整路徑而迷路,請考慮扁平你的app層級。

使操作簡潔明顯

交互的設計要建立在人們已有的心智模型的基礎上。熟悉,清晰和選項的區(qū)別性可以降低用戶的認知負荷,使人們更專注于任務。

減少用戶不必要的操作,附加工作消耗用戶的精力,但是不直接實現(xiàn)用戶的目標。消除附加工作,可以提升操作效率,改善產(chǎn)品的可用性

在設計構(gòu)思時可以進行任務分析,梳理產(chǎn)品流程,在研究基礎上選取最優(yōu)最簡的流程。

界面精簡

頁面信息的精簡,盡量只展現(xiàn)當前對用戶有意義的信息,避免對用戶認知帶來負荷。一個頁面最好能突出一個重點,讓用戶快速理解和完成任務。避免頁面上出現(xiàn)其它與用戶決策和操作無關(guān)的干擾因素。特別是在任務導向的頁面中。

一致性

系統(tǒng)內(nèi)所有設計遵循貫徹相同的標準和規(guī)范,使用系統(tǒng)提供的界面元素、風格統(tǒng)一(眾所周知)的圖標、標準的字體樣式和一致的措辭。使得界面的表現(xiàn)能符合用戶的心理預期。設計的一致性也可以使用戶對產(chǎn)品產(chǎn)生熟悉感。

層次(Hierarchy)

層次是 UI 很重要的元素,讓重要的、不重要的東西區(qū)隔開來,引導使用者的閱讀視線。區(qū)分層次的手法有很多,如大小、粗細、顏色、間隔、形狀、排列方式……等等。

減少輸入

在手機較小的空間里,無論是點擊鍵盤輸入還是點擊界面元素,信息輸入都是一個冗長的流程。由于用戶在使用應用時是任務導向的,總是希望盡快達到自己的目的,冗長的輸入會消磨用戶的耐心。因此,需要注意以下幾項:要盡可能展示選項給用戶選擇;可以從系統(tǒng)中獲取的信息不要要求用戶輸入;只有系統(tǒng)運行真正必須的信息才使用必填項;盡可能在用戶輸入后就立馬檢查輸入值;提供可靠的默認值幫助用戶縮短做決定的時間從而加快流程。

即時的反饋

反饋認證交互行為,呈現(xiàn)結(jié)果,并通知用戶。即時恰當?shù)姆答伳芨嬖V用戶下一步該做什么,幫助用戶做出判斷和決定,讓用戶知道系統(tǒng)運行良好穩(wěn)定。如按鍵之后的水波紋效果等,顏色變化等。但是要避免給用戶看到太多包含無關(guān)緊要信息的警告。

身份驗證

在涉及到用戶的身份認證的時候需要體現(xiàn)安全感,設計需要使用戶安心。

要求用戶進行身份驗證時應該用有價值的東西交換,比如個人化體驗、獲得更多功能、購買內(nèi)容或者同步數(shù)據(jù)。為了避免減少應用的樂趣,需要盡可能將登陸流程設計得快速簡單并且低調(diào)。

應用內(nèi)部如果需要登錄,盡可能地延后登陸。在做一些有用的事前強制用戶登陸會使得用戶想要離開應用,在強制用戶前給他們一個愛上你的應用的機會。

如果需要登錄,請展示適合的鍵盤來減少數(shù)據(jù)輸入,因為用戶都是懶的。

結(jié)合環(huán)境場景

用戶的使用環(huán)境一直在變化,設計要考慮到手機用戶時刻移動,易被打斷的場景

要考慮設備的持握方式?

橫屏和豎屏時對內(nèi)容的顯示和交互都會產(chǎn)生影響。

單手持握手機時可交互區(qū)域的難易程度(左)內(nèi)容可讀性區(qū)域的難易程度(右)


單手持握可交互區(qū)域:顏色深到淺:BEST,OK,HARD? ?
內(nèi)容可讀性區(qū)域:? ? ?顏色由深到淺:BEST,GOOD,OK


手勢

交互手勢要避免復合的手勢,如雙擊,按住一定時間等,因為這類手勢通常是偶然觸發(fā)才能被發(fā)現(xiàn),時長很難準確估計。

一般使用標準手勢。用戶已熟悉了標準手勢,使用標準手勢用戶就不用花費多余的時間去學習和記憶手勢。注意對于標準的手勢不要用于執(zhí)行非標準的操作,否則容易使用戶混亂。

交互控件庫

需要根據(jù)實際項目積累,控件庫可以保持產(chǎn)品的一致性,同時節(jié)省開發(fā)成本

使用語言?

通過用戶研究和任務分析獲得用戶熟悉的詞匯,使用用戶熟悉的語言進行設計

使用簡潔的,含有任務氣息的,引導性更強,如使用“全選”“發(fā)送”,“添加”,“完成”等字眼

熱區(qū)

操作的熱區(qū)要大于實際按鈕的大小。

頁面層級規(guī)范

用于規(guī)范頁面元素所屬層級、層級順序及組合規(guī)范。

交互自查表

對于移動應用來說,移動情景非常復雜,交互設計需要充分考慮細節(jié),確保不遺漏特殊狀態(tài)。交互設計自查表可以幫助設計師深入審查自己的設計。

配色

注意考慮色盲, 避免把這些顏色組合作為區(qū)分兩種狀態(tài)或值的唯一方式。比如,用紅色方塊和綠色圓形來表示下線和上線狀態(tài),而不是用紅色和綠色的圓形。

Animation

動效要為功能服務,避免無意義的動畫和動效。動效要力求真實和可信,符合自然和物理規(guī)律。

參考資料:

微信設計文檔https://weui.io/

IBM設計文檔https://www.ibm.com/design/

Ant designhttps://ant.design/docs/spec/proximity-cn?

Material design? https://material.io/? ?

IOS Human Interface Guildelines? https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

如何建立交互設計自查表http://uedc.163.com/12870.html?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容