當前位置:編程學習大全網 - 編程語言 - 淺談 UI 設計中的可供性(affordance)

淺談 UI 設計中的可供性(affordance)

可供性是壹個很值得玩味的專業詞匯。壹方面,在中文語境下這個詞很難翻譯得準確,它包含太豐富的語義。另壹方面,這個詞匯又可以用在很多的設計語境中,任何壹個不好的設計,妳都可以說它可供性不好,因為可供性跟設計目標幾乎是息息相關的。那麽可供性究竟是怎麽定義的?先看維基:

從維基的定義來看,可供性是產品壹種不言而喻的功能隱喻,讓人壹眼就能看出它具有什麽功能,該如何操作它。《通用設計法則》這本書則把 affordance 翻譯為「功能可見性」,這樣翻譯似乎更通俗易懂點。書中舉了 Don Norman 這個經典的案例來說明 affordance ,門把手的功能可見性是「拉」,但「推」的標示卻跟門把手互相矛盾,解決方案是右圖,用平面金屬板代替把手,消除「拉」的功能可見性。

可供性的設計理念首先是從工業產品發端的。壹件好的工業品,使用者可以不假思索地使用它。原研哉的書中經常提到可供性這個概念,強調產品應該融進使用場景,其實就是產品可供性的外延。

上圖的兩個案例,第壹個下垂的拉繩提供強烈的下拉隱喻,壹個不假思索的下拉動作,音樂隨即響起。第二個案例中的雨傘,設計者為了解決壹手提袋子壹手拿雨傘的窘境,在雨傘把手上設計出了壹個凹下去的凹痕,讓使用者不用思考就學會了把袋子掛把手的操作。這兩個案例是對可供性這個概念的很好的詮釋。通俗點講,可供性就像是文章的上下文語境,工業產品通過造型和周邊環境的映襯,來給用戶足夠的操作和功能隱喻。

為了不使討論過於泛化,我們可以把可供性在 UI 中可以理解為隱喻,比如常見的圖標、按鈕、控件就是 UI 中的隱喻要素。壹個齒輪圖標代表設置,壹支筆的圖標表示編輯功能。這種隱喻在 UI 設計中隨處可見。但 UI 是二維的,它的功能可供性跟工業產品不壹樣,工業品可以通過觸感、嗅覺、光影等等去增強可供性,UI 只能通過平面的手段去尋找辦法。

比如谷歌的 material design 企圖通過模擬材料本身的特性來提供界面隱喻。比如光影、質感、符合物理定律的運動等都是為了解決數字世界中的的交互隱喻,提供更有力的可供性。MD 的投影隱喻界面中的層次感,並借鑒了傳統的印刷設計——排版、網格、空間、比例、配色,來構建用戶熟悉的視覺世界。而這壹切都建立在谷歌的理論根據之上:人對材質觸感有著天然的感知,這是壹切隱喻的基礎。

與谷歌截然不同的另壹套界面設計理念,蘋果在 iOS 7 之後提出的,俗稱毛玻璃效果,則從利用玻璃質感來構建 UI 的層級關系。正如 iOS 設計指南中寫到:

毛玻璃的效果確實更接近真實世界的視覺經驗,距離 iOS 7 發布四年過去了,大眾早已習慣了毛玻璃,眾多安卓廠商都在競相模仿,Material Design 那壹套為數字虛擬世界構建的隱喻體系似乎打動不了用戶,這說明真實世界的映射映射是多麽重要。

在圖形化界面的初期,人們對界面的認知是空白的,毫無經驗的,所以軟件圖標基本都是擬物化的,設計者都希望用戶可以借用現實經驗來理解這些虛擬的數字化產品,所以容量圖標畫個實體硬盤,主頁圖標畫個房子,設置畫個齒輪等等,但隨著用戶對數字化產品的認知逐漸加深,不再需要借用現實經驗來加強用戶認知了,因為它本身已經自成體系。

以 iOS 的桌面圖標為例,從 iOS 6 到 iOS 11,圖標原有擬物化的質感被去掉,代之以抽象的色塊、漸變、線條、符號,圖標的歷史使命,即幫助人們從真實世界跨向虛擬世界的認知躍升已完成。現在 UI 中的圖標,已經基本脫離現實的隱喻,想想百度、淘寶、京東等主流應用的圖標吧,完全是基於虛擬世界構建的視覺認知。

雖然界面中的圖形已經逐漸脫離現實經驗的隱喻,但在壹些跟實體有關聯的產品中,我們還能看到很多用現實經驗隱喻來增強界面的使用體驗。比如音樂播放界面用唱片機的樣子,讀書產品的頁面跳轉模擬真實翻書的效果,***享單車 APP 還是用單車的形象等。UI 利用現實隱喻來增強界面功能可供性的做法會壹直存在,只是隨著人們虛擬世界的經驗越來越豐富,會越來越少而已。

可供性在 UI 設計中的討論越來越少了,可能是因為扁平化到現在,很多界面越來越多的使用文字按鈕了,功能所見即所點,隱喻似乎沒有必要了。在更有未來感的科幻片中,妳也會發現所有的操作面板幾乎都是文字按鈕,這樣更直觀,符合人機交互的理想境界:忘記界面,自如操控。

《Universal Principle of Design》by William Lidwell、Kritina? Holden、Gil Butler

《The Design of Design》by 原研哉

《iOS Human Interface Guideline》by Apple

《Materila Design》by Google

  • 上一篇:淺談STEM教育真諦,國內STEM教育缺失的是什麽呢?
  • 下一篇:怎樣使用myeclipse工具
  • copyright 2024編程學習大全網