規則是死的,人是活的

第一部分基礎的交互設計原則,第二部分iOS10人機界面設計指南中的設計原則    

(題外話,推薦深入了解下查理.芒格介紹的100種思維模型,掌握各個學科最典型的思維模型,不僅可以運用在設計中,還可以幫我們更好的決策和更睿智的生活)


1.基礎的交互設計原則

1.1尼爾森可用性原則


1.狀態可見原則 Visibility of system status

用戶在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋?!凹磿r”是指,頁面響應時間小于用戶能忍受的等待時間。

簡而言之:用戶操作了就告訴他你做了什么,大概要等多久


2.環境貼切原則Match between system and the real world

網頁的一切表現和表述,應該盡可能貼近用戶所在的環境(年齡、學歷、文化、時代背景),而不要使用第二世界的語言。多使用易懂和約定俗成的表達。

大家都懂才是真的好。


3.撤銷重做原則User Control and Freedom

為了避免用戶的誤用和誤擊,網頁應提供撤銷和重做功能。

讓用戶有反悔的機會,畢竟生活中可反悔的機會可不多,讓用戶在互聯網體驗當上帝的滿足感。


4.一致性原則Consistency and Standards

同一用語、界面風格、布局、功能、操作保持一致。


5.防錯原則Error prevention

通過網頁的設計、重組或特別安排,防止用戶出錯。


6.易取原則Recognition rather than recall

好記性不如爛筆頭。盡可能減少用戶回憶負擔,把需要記憶的內容擺上臺面。

比如用戶輸入過的郵箱,輸入第一個字就應該有關聯出完整的郵箱,用戶只需點擊即可輸入完成,從N步—2步簡化操作。


7.靈活高效原則Flexibility and efficiency of use

中級用戶的數量遠高于初級和高級用戶數。為大多數用戶設計,不要低估,也不可輕視,保持靈活高效。

為大多數中級用戶設計的同時要兼顧其他用戶,做到靈活高效。


8.易掃原則Aesthetics and minimalist design

互聯網用戶瀏覽網頁的動作不是讀,不是看,而是掃。易掃,意味著突出重點,弱化和剔除無關信息。


9.容錯原則Help users recognize, diagnose and recover from errors

幫助用戶從錯誤中恢復,將損失降到最低。

如果無法自動挽回,則提供詳盡的說明文字和指導方向。


10.人性化幫助原則Help and documentation

幫助性提示最好的方式是:無需提示>一次性提示>常駐提示>幫助文檔


1.2格式塔原則

總的來說,就是物體間的遠近或者形態的不同對我們的認知的影響。

主要是以下幾個原理:接近性原理;相似性原理;連續性原理;封閉性原理;對稱性原理;主體/背景原理;共同命運原理。


接近性原理

物體之間的相對距離會影響我們感知它是否以及如何組織在一起?;ハ嗫拷ㄏ鄬τ谄渌矬w)的物體看起來屬于一組,而那些距離較遠的則自動劃為組外??康慕娜菀妆晃覀儦w為一組。

下面3個圖,無論形狀的不同或是顏色的不同,我們都會自然而然把相近的東西歸為一組,可見接近性原理權重要大于相似性原理。

undefined

undefined

undefined

相似性原理

如果其它因素相同,那么相似的物體看起來歸屬于一組。長得像的容易被我們被歸為一組。

下圖可見,形狀相似我們會歸為一類,顏色相近的我們又會歸為一類,并且顏色權重大于形狀。

undefined

undefined

連續性原理

視覺傾向于感知連續的形式而不是離散的碎片。一個連續的圖案,即使中件少了一段,也會被我們自己補腦出來是連續的。

undefined

封閉性原理

視覺系統自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。下圖我們會感覺他就是個圓形。

undefined

對稱性原理

我們傾向于分解復雜的場景來降低復雜度。如此復雜的海報,我們自動會把它分為一個圓形和一個矩形來識別。


undefined

主體/背景原理

我們的大腦將視覺區域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素,其余則是背景。當物體重疊時我們習慣把小的那個看成是背景之上的主體。

當我們聚焦于中心的小圓的時候,為了不影響我們的注意力,周邊的其他物體會被模糊成背景。

共同命運

與接近性、相似永生原理相關,都影響我們感知的物體是否成組。指出一起運動的物體被感知為屬于一組或者是彼此相關的。Path的動效,點擊+彈出的功icon,會被感知為一組東西。

undefined



1.3尼爾森F型視覺模型

undefined

我們在第一次觀看頁面時,視線會呈 F的形狀關注頁面

先從頂部開始從左到右水平移動

目光再下移開始從左到右觀察但是長度會相對短些

以較短的長度向下掃視,形成一個 F形狀,此時我們的閱讀速度較慢,更為系統和條理性

設計時,將重要的內容放在最左邊,用戶快速掃視時能第一眼看到。例如淘寶等電商APP類的商品列表,信息都是靠左對齊。

undefined



1.4菲茨定律Fitts’ Law(費茨法則)

undefined

在文章的最后,回顧一下費茨定律給我們的啟示:

做點擊按鈕要大點,更易于點擊。反相過來,不常用按鈕做小點,可降低點擊率。

將按鈕放在離開始點較近的地方,更容易點擊到。屏幕的四角與四邊是「無限可選中」位置。


1.5神奇數字 7±2 法則

人類頭腦最好的狀態能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息后人類的頭腦就開始出錯。與席克定律類似,神奇數字 7±2 法則也經常被應用在移動應用交互設計上,如應用的選項卡不會超過 5 個。


1.6奧卡姆剃刀原理Occam's Razor (簡單有效原理)

這個原理被稱為“如無必要,勿增實體”,即如有兩個功能相等的設計,那么選擇最簡單的。


1.7二八法則

例如:百分之20的功能決定產品的成敗,重點要抓住那重要的20%


1.8泰思勒定律Tesler's Law(復雜性守恒定律)

該定律認為每一個過程都有其固有的復雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。如對于郵箱的設計,收件人地址是不能再簡化的,而對于發件人卻可以通過客戶端的集成來轉移它的復雜性。


1.9席克定律Hick's Law(??朔▌t)

定律內容:一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。用數學公式表達為反應時間 T=a+b log2(n)。在人機交互中界面中選項越多,意味著用戶做出決定的時間越長。例如比起 2 個菜單,每個菜單有 5項,用戶會更快得從有 10 項的 1 個菜單中做出選擇。

席克定律多應用于軟件/網站界面的菜單及子菜單的設計中,在移動設備中也比較適用。



2.iOS10人機界面設計指南中的設計原則

三大原則


清晰Clarity

清晰易懂,突出重點,表達可交互性


遵從Deference

輕量化,突出內容


深度Depth

層次結構


其他原則

美學完整性Aesthetic Integrity

不易察覺且不引人注目的圖形、標準化控件和可預知的交互行為從而讓用戶保持專注。


一致性(Consistency)

相同的標準和規范,應用所包含的特征和交互行為是符合用戶心理預期的。


直接操作(Direct Manipulation)

能夠提升用戶的參與度并有助于理解。讓用戶獲得及時可視的反饋


反饋(Feedback)

認證交互行為,呈現結果,并通知用戶,臨時高亮、進度指示器。動效和聲音加強對結果的提示


隱喻(Metaphors)

使用來源于現實生活的用戶體驗,或已培養出來的習慣,能讓用戶快速學會使用應用


用戶控制(User control)

用戶主導,應用僅為用戶行為提供建議,嚴重后果的發出警告,不提用戶做決定。讓用戶可預知,可隨時取消


遵從這些原則更好的幫助我們設計出來的產品好用易用,更加符合用戶的心理預期。當然規則是死的,人是活的,如果我們有更好的解決問題的方式,能根本的解決設計中的問題,那也可以不用遵循設計原則。


聯系電話:0431-88544977

公司地址:長春市朝陽區建設街宜家國際A座7層

公司郵箱:[email protected]

打麻将的规则 pk10牛牛官网 来丫江西麻将 甘肃11选5走势图 qq游戏捕鱼大亨 上海天天彩选4专家预测 微乐吉林长春麻将 幸运赛车开奖网 融资股票可以买吗 互联网金融行业赚钱