閱讀心得|iOS Human Interface Guidelines

經過了文組班3/4/7 一直很不想面對閱讀心得這個作業,所以一直沒有認真地打開資料來閱讀,Peter 我對不起你 XDDD。

雖然來學習的是swift語言,但是一個app的完成,除了利用code讓它完整,沒有美的介面、沒有操作的順暢、沒有易識別的icon、沒有透過使用者經驗(UX)的設計…等等。我個人的認知是,這個app還是會有一種差一點點的感覺。

有幾個關於UI/UX的資料與大家分享。

UI/UX也是一門很深的學問,有興趣的可以研究研究。

https://designtongue.me/category/ui-ux/

https://medium.com/uxabc

不管是哪方面的設計,都有各自的Design Guidelines,各自的基本原則。

如同Pater教我們做人的基本原則 — -『要專一』。

Human Interface Guidelines一開始就提到ios有別於其他平台的三大原則

  • Clarity (清晰)

無論是字體、顏色、icon、留白、介面編排…等等,組合起來必須要清晰明確。

  • Deference(遵從)

清爽美麗的介面有助於使用者使用的流暢度。目前ios介面設計幾乎都是滿版的呈現,盡可能少用邊框、漸變、陰影使得畫面輕量化,可使用「半透明」「模糊」的手法,讓內容能夠更突出。

  • Depth(深度)

關於深度的部分,我的理解是,因為畫面是透過Xcode裡的storyboard處理完成的,介面的層次感能夠讓使用者在使用的過程中感到愉悅,對於使用者的理解也是很有幫助的。

另外有幾個原則也是需要注意的

  • Aesthetic Integrity(美學完整性)

美學完整性簡單來說不是探討介面做得有多好看多完美,而是要提醒設計師在設計界面的時候,是否有搭配該功能的呈現來設計。比較容易理解的是「icon」,適當的icon設計,對於使用者要進入該功能是非常有密切的關係。

  • Consistency(一致性)

一款app當中,無論字體、顏色、介面風格、icon…等等,都是需要統一的,才不會讓app是東一塊西一塊的感覺。既不完整也不一致。自然在使用操作上也容易混亂。

  • Direct Manipulation(直覺操作)

介面設計要讓使用者直覺性的操作,看到畫面就能夠知道要怎麼執行以及使用該功能。比方,介面中button的設計就很重要。

  • Feedback(回饋)

在執行功能也好,或者是在功能上提供與使用者的微互動也好,這部分跟使用者經驗(UX)的學問可能比較有關係。適當的回饋(趣味性的回饋、提示性的回饋、引導性的回饋)對於使用者在操作app的愉悅程度也是有影響的。

  • Metaphors(隱喻)

隱喻這個部分是我個人覺得很有趣的部份,利用視覺的設計手法,讓使用者在功能操作的時候可以達到前面提到的「直覺操作」、「回饋」。比方,滑動開關的操作、看電子書翻頁的操作…等等。

  • User control(使用者控制)

關於使用者控制,重點是在「使用者」而不是「控制」。比方我們在寫email的時候,可能因為不小心誤按,畫面會呈現選項。

讓使用者覺得是自己在控制的,而不是被控制。這也是我覺得蠻有趣一個準則。

參考資料如下

無論是UI/UX設計師,還是讓app生龍活虎的程式工程師,都是一條漫長的路。大家一起加油吧!!!

--

--

Kimmy Hsu
彼得潘的 Swift iOS / Flutter App 開發教室

Industrial Designer|UX learner|UI learner|PM Learner|Code learner