設(shè)計方法論

2022-5-31    ui設(shè)計分享達(dá)人

“先有思想,后有設(shè)計”設(shè)計師自身應(yīng)該逐步建立一套自己的設(shè)計體系,需要對設(shè)計方法論有專業(yè)的認(rèn)識和理解。一直想收集整理日常說到的各類設(shè)計理論知識,也希望通過整理和總結(jié)能有新的收獲,加深記憶。



格式塔心理學(xué)是視覺排版及設(shè)計中應(yīng)用比較廣泛,主要指人的眼腦作用是一個不斷組織、簡化、統(tǒng)一的過程,正是通過這一過程,才產(chǎn)生出易于理解、協(xié)調(diào)的整體。格式塔的理論核心是整體決定部分的性質(zhì),部分依從于整體,人腦知覺到的東西要大于眼睛見到的東西。

  1. 圖形與背景的關(guān)系原則:在有一定配置的畫面內(nèi),有些對象凸顯出來形成圖形,有些對象退居到襯托成為背景,圖形和背景的區(qū)分度越大圖形就越突出成為感知對象,要讓圖形成為突出對象,不僅需要有突出的特點(diǎn),還要有明確的輪廓/明暗度/統(tǒng)一性。運(yùn)用到設(shè)計中,做海報banner時要盡量弱化背景突出視覺中心,減少背景的細(xì)節(jié)和色彩,可以讓用戶更加聚焦視覺中心。
  2. 接近或鄰近原則:接近強(qiáng)調(diào)位置,實(shí)現(xiàn)統(tǒng)一的整體,某些距離較短活互相接近的部分,容易組成整體。
  3. 閉合性原則:人們傾向把不連貫的圖形盡可能在心理上使之趨合,即是閉合性原則。人們在感知圖形的時候通常會先整體后局部,從整體上找到一個近似匹配,然后填補(bǔ)空白,這個空白是我們認(rèn)為我們應(yīng)該看到的內(nèi)容,可以省去部分的輪廓,同時還會提供完善的定界/對稱和形式
  4. 相似性原則:相似強(qiáng)調(diào)內(nèi)容,人們通常把那些明顯具有共同特性的(如顏色,運(yùn)動,形狀,大小等)事物組合在一起。
  5. 對稱性原則:人們往往容易感知圍繞中心對稱的形狀,對稱性給了我們堅固和穩(wěn)定的秩序感,這種本能會讓我們在組合物中尋找一種平衡感,雖然很多設(shè)計中并不需求完全對稱。利用這一點(diǎn)可以在設(shè)計中反向的打破對稱性,制造畫面的沖擊力。
  6. 連續(xù)性原則:如果一個圖形的某些部分可以被看作是連接在一起的,那么這些部分就相對容易被我們知覺為一個整體。
  7. 簡單原則:在人的眼腦認(rèn)知中習(xí)慣將事物簡化,通常會根據(jù)已有的認(rèn)知來確定元素,一個簡單明確的對象會比一個復(fù)雜具體的形象更快更有效的傳遞信息
  8. 共方向原則:同方向元素會比固定元素或者不同方向的元素更為緊密。不管元素相距多遠(yuǎn)或者看起來有多么不同,只要他們按照同一方向運(yùn)動,就會被認(rèn)為有相關(guān)性。



古登堡法則是又稱對角線平衡法則,由14世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出。古登堡圖表將要畫面顯示的東西分成了四個象限:

1.第一視覺區(qū)(Primary Optical Area):左上方,讀者首先注意到的地方。

2.最終視覺區(qū)(Final Optical Area):右下方,視覺流程的終點(diǎn)。

3.強(qiáng)閑置區(qū)(Strong Follow Area):右上方,較少被注意到。

4.弱閑置區(qū)(Weak Follow Area):左下方,最少被注意到。

通過古登堡法則我們知道用戶的視覺中心往往在頁面的左上方,而結(jié)束瀏覽時視線往往落在右下角,所以合理利用這個法則可以幫助用戶更好地獲取內(nèi)容并采取行動。自上而下的界面設(shè)計,自左向右的界面設(shè)計,頁面中通常將操作按鈕放在右下角。



交互七大定律

菲茲定律:從一個起始位置移動到一個最終目標(biāo)所需的時間由兩個參數(shù)來決定,到目標(biāo)的距離和目標(biāo)的大小(圖中的 D與 W),用數(shù)學(xué)公式表達(dá)為時間 T = a + b log2(D/W+1)。意味著小而近的目標(biāo)用戶不需要花費(fèi)太大的精力就能輕易觸及或者關(guān)注,相反小而遠(yuǎn)的目標(biāo)則需要花費(fèi)用戶更多的時間和注意力,菲茲定律闡述的是效率相關(guān)的問題

思考結(jié)論:1.必要時讓按鈕更大,2.讓相關(guān)信息更近

??硕?span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#080808;">一個人面臨的選擇(n)越多,所需要作出決定(t)就越長。用數(shù)學(xué)公式表達(dá)為反應(yīng)時間T=a+b log2(n)。在人機(jī)交互界面中選項(xiàng)越多,意味著用戶作出決定的時間越長。如比起2個菜單,每個菜單有5項(xiàng),用戶會更快從有10項(xiàng)的1個菜單中做出選擇。席克定律在產(chǎn)品應(yīng)用中主要用于通過合理的選項(xiàng)及功能規(guī)劃提高用戶的決策及完成任務(wù)效率

應(yīng)用場景:

1.分類編組,提高決策效率

2.過濾選項(xiàng),隱藏/刪除低頻率功能選項(xiàng)

3.分布執(zhí)行,提高流程轉(zhuǎn)化率



米勒定律:頭腦最好的狀態(tài)能記憶含有7(±2)項(xiàng)信息塊,在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯。米勒定律在產(chǎn)品應(yīng)用中主要在于合理的信息布局和信息處理可以提高用戶對信息的獲取效率和記憶難度。

應(yīng)用場景:

1.控制數(shù)量,減少用戶選擇

2.信息分段,輔助用戶記憶

3.流程分步,優(yōu)化用戶操作

4.信息排序,引導(dǎo)用戶記憶

臨近性原則:當(dāng)對象離得太近的時候,意識會認(rèn)為它們是相關(guān)的。在交互設(shè)計中表現(xiàn)為一個提交按鈕會緊挨著一個文本框,用戶會理解為按鈕于文本框有關(guān)聯(lián)性。換句話說當(dāng)相互靠近的功能塊是不相關(guān)的話,就說明交互設(shè)計可能是有問題的。

泰斯勒定律(復(fù)雜守恒定律):定律認(rèn)為每一個過程都有其固有的復(fù)雜性,存在一個臨界點(diǎn),超過了這個點(diǎn)過程就不能再簡化了,你只能將固有的復(fù)雜性從一個地方移動到另外一個地方。

應(yīng)用場景:

1.合理縮短用戶使用路徑,在設(shè)計中可有適度的簡化縮短操作流程但是到一定的程度可能會影響整體的功能和價值。

2.將固有的復(fù)雜性從一個地方轉(zhuǎn)移到另一個地方,例如搜索中歷史記錄,信息商品的收藏等功能,實(shí)際都利用了此定律。

3.將功能進(jìn)行拆分,一次性無法降低復(fù)雜度的功能可以進(jìn)行拆分。

奧卡姆剃刀原理:奧卡姆剃刀原理只承認(rèn)確實(shí)存在的東西,認(rèn)為那些空洞的普遍性的東西都是沒有用的,應(yīng)該剔除掉,概括起來就是“如非必要,勿增實(shí)體”實(shí)際上無論實(shí)體、視覺或認(rèn)知上,多余的負(fù)擔(dān)都會削弱表現(xiàn)效能,去除解決方案的雜質(zhì),讓最后的設(shè)計會更嚴(yán)謹(jǐn)、更純粹。在設(shè)計蘋果產(chǎn)品的時候,喬布斯一直堅持認(rèn)為:為了實(shí)現(xiàn)一個功能而造出一堆復(fù)雜的東西,沒用,簡單的才最好。Google專注于搜索,主頁上也只有搜索,其他搜索引擎就沒有做的這么徹底,這也是為什么Google用戶量最多的原因之一。

防錯原則:最早應(yīng)用于汽車制造領(lǐng)域中,工程師新鄉(xiāng)重夫(豐田精益生產(chǎn)莊家)于上世紀(jì)60年代,創(chuàng)造了這個理念。防錯原則認(rèn)為大部分的意外都是由設(shè)計的疏忽,而不是人為操作疏忽,例如硬件設(shè)計上的 USB 插槽,醬油瓶口。防錯原則有四項(xiàng)基本原則包括,輕松原則,簡單原則,安全原則和自動原則。

尼爾森十大交互原則

狀態(tài)可見原則:保持界面的狀態(tài)可見,變化可見,內(nèi)容可見。讓用戶知道發(fā)生了什么,在適當(dāng)?shù)臅r間內(nèi)做出適當(dāng)?shù)姆答仭?比如用戶在網(wǎng)頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應(yīng)即時給出反饋。



貼近場景原則:用用戶的語言,用詞,短語和用戶熟悉的概念,而不是系統(tǒng)術(shù)語。遵循現(xiàn)實(shí)世界的慣例來呈現(xiàn)信息,功能操作符合用戶的使用場景。進(jìn)一步來說貼近場景,也是要求在設(shè)計的時候要考慮,產(chǎn)品面對的人群和人群所在的環(huán)境,比如,同一款產(chǎn)品在不同地區(qū)呈現(xiàn)形式需要考慮文化差異。不同屬性的產(chǎn)品例如兒童教育和辦公產(chǎn)品,需考慮使用人群的特性。

可控原則:操作應(yīng)該是可逆的,可以支持“撤銷”和“重試”,以此來離開“非預(yù)期” 的狀態(tài),簡單來說就是不要讓用戶走進(jìn)死胡同,提供出口和退路。例如微信發(fā)送消息可以撤回可重新編輯等。很多web端的表單,文章發(fā)布等都支持自動保存,很大程度上避免錯誤或者意外操作。



一致性原則:遵循平臺的慣例。也就是,同一用語、功能、操作保持一致。

防錯原則:核心觀點(diǎn)是如何有效的在用戶出錯之前就盡量避免錯誤發(fā)生,在互聯(lián)網(wǎng)產(chǎn)品中,比起回退修改錯誤信息或者操作更好的是,用設(shè)計防止這類問題發(fā)生。很多轉(zhuǎn)賬功能中輸入數(shù)字后會顯示千萬等說明文字,用戶輸入卡號后會自動識別關(guān)聯(lián)銀行,避免用戶出錯。

1.限制操作范圍和條件。例如很多手機(jī)登錄等交互中默認(rèn)設(shè)置手機(jī)號為11位避免了用戶出錯,提高了易用性。

2.對有風(fēng)險的操作進(jìn)行二次確認(rèn)。



易取原則:盡量減少用戶對操作目標(biāo)的記憶負(fù)荷,動作和選項(xiàng)都應(yīng)該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統(tǒng)的使用說明應(yīng)該是可見的或者是容易獲取的。 很多產(chǎn)品搜索功能的關(guān)鍵詞聯(lián)想搜索,即使用戶不能完全記住關(guān)鍵詞也能輕松搜索。

1.讓用戶選擇而不是輸入,選擇和輸入的操作成本相差巨大,產(chǎn)品應(yīng)給給用戶提供選項(xiàng),讓用戶可以直接選擇,而不是自己輸入,比如填寫收貨地址。

2.自動讀取、記錄信息、減少操作路徑。在用戶使用產(chǎn)品的過程中,會產(chǎn)生一些需要記憶的內(nèi)容、或者操作路徑,這個時候我們要避免用戶記憶,把信息直接提取出來,送到用戶手里



高效靈活原則:為大多數(shù)用戶設(shè)計,兼容少部分特殊用戶。允許用戶進(jìn)行頻繁的操作,更加便捷靈活的代碼和反饋。各大產(chǎn)品中常使用的搜索功能,提供歷史搜索功能。微信朋友圈發(fā)布中選擇可見/不可見人群時,提供上次選人記錄。
1.提供快捷入口,例如支付寶的首頁可以自主配置常用的小程序,微信下拉對話頁面可以快捷進(jìn)入歷史小程序
2.方便用戶重復(fù)操作,例如外賣平臺中自動定位常用地址,訂單中可以再來重復(fù)的一單等

3.預(yù)知用戶操作縮短操作路徑,例如截圖后打開微信對話框會關(guān)聯(lián)截圖發(fā)送

簡約原則:審美和簡約設(shè)計,頁面不應(yīng)該包含無關(guān)緊要的信息,頁面的每個額外信息都會降低主要內(nèi)容的相對可見性。

容錯原則:錯誤信息應(yīng)該用語言表達(dá)(不要用代碼),較準(zhǔn)確地反應(yīng)問題所在,并且提出一個建設(shè)性的解決方案。比如404。

人性化幫助原則:有必要提供幫助和文檔。任何信息應(yīng)容易去搜索,專注于用戶的任務(wù),列出具體的步驟來進(jìn)行。幫助性提示最好的方式是:1、一次性提示;2、常駐提示;3;幫助文檔。



通過這些方法的總結(jié)歸納,我發(fā)現(xiàn)其實(shí)很多原則原理我們在平時的設(shè)計中有意無意的總會用到,在實(shí)際工作中設(shè)計很大程度上是做選擇,哪一種是對產(chǎn)品對用戶最優(yōu)的方案,有的設(shè)計師可以通過自己的經(jīng)驗(yàn)作出選擇,沒有經(jīng)驗(yàn)的可能需要多多理解這些原則原理,交互設(shè)計之父阿蘭·庫珀說過“除非有更好的選擇,否則就遵從標(biāo)準(zhǔn)”只有反復(fù)的遵循使用標(biāo)準(zhǔn)才能建立自己的一套設(shè)計方法論,讓工作更加得心應(yīng)手。

來源:站酷
作者:有魚MUMU

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、

分享本文至:

日歷

鏈接

個人資料

存檔