SPARKFUL
真抱歉,这个页面尚未被翻译成你的语言,但是我们正在努力中了!

Blog

SPARKFUL x Fourdesire 团队心得与生活点滴

像鏡子一樣映射操作方式

Wei-Fan Chenuser-interface-design
name

「映射(mapping)」是設計介面的時候一個非常重要的思考方式,所謂「映射」就是操作方式與介面和要操作的對象和結果有著相似的外觀或行為,如此一來,才能讓使用者非常直覺的使用這個裝置或軟體。

在 Donald Norman 的著作中最有名的例子就是下面這個瓦斯爐了。許多瓦斯爐都設計成左邊這種令人困擾的控制方式,上面有四個 2 x 2 排列瓦斯爐,但是瓦斯開關卻設計成一排四個,這樣到底誰能搞清楚哪個開關對應哪個爐子呢?最直覺的設計方法就是讓操作介面直接映射到操作對象上。像右邊那樣開關和爐子排列方式,大家才可以最直覺的一看就了解對應的開關和爐子。

瓦斯爐和開關的對應方式

另一個比較複雜的映射例子就是汽車的方向燈開關了。方向燈開關的設計乍看之下很不直覺,上下撥對應到汽車左右邊的方向燈。但是如果你仔細觀察,方向燈開關通常設計在方向盤的左邊,由於方向盤的設計很直接,反應了車子會前往的方向,因此當你的左手放在方向盤上時,往上撥開關的時候也帶動了方向盤右轉,理所當然的右邊的燈就亮了。左邊也是反之亦然,如此一來映射的設計也可以向這樣透過一個媒介(方向盤)來達成。

方向燈和開關的映射

網站設計也需要正確的映射方式,尤其是在導覽的時候,像是部落格的單篇文章頁面,常常需要「上一頁」和「下一頁」的按鈕,通常提供向左或是向右箭頭的按鈕,可以讓使用者有如同翻書般的映射直覺。但是偶爾也有例外的時候,例如下面這個例子,這個網站的 prev 和 next 按鈕是提供向上和向下的箭頭,這是因為向下的按鈕會讓上面的內容往下捲動,而非左右捲動內容,如此才能滿足使用者預設的映射方式。

向下捲動的按鈕設計

同一個網站在不同的地方就採用了左右的箭頭按鈕,讓使用者左右捲動畫面內容:

左右捲動的箭頭按鈕

映射是使用者理解介面之後,預期目標會產生的結果。如果映射設計的好,那麼產品就能滿足使用者的心智模型,使用者有的時候和你想的不一樣,設計師應該採用正確的映射方式,才能讓設計更直覺,更好懂。


Image via NASA Webb Telescope, CC License.

Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
喜歡開發與創作各種有意義且有目的的遊戲以改變社會。 《玩心設計》作者、偶爾寫部落客與擔任講師。樂於參與大學和行業活動,興趣涵蓋遊戲設計、遊戲理論、行為設計、人機介面和交互設計。熱衷於雲端運算,同時也是一個活躍的獨立遊戲開發者 🎉
divider
相关文章
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...阅读更多
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...阅读更多
name

視差設計:如何在狹小的手機畫面中製造「空間感」

在行動裝置小小的平面螢幕裡,無論是平面風格(Flat Design)還是仿真介面(Skeuomorphism),我們是否能夠在手指滑動之間,跳脫出二維的空間,為使用者創造出額外的層次與空間感呢?也許以下影片能夠給你一些想法: ...阅读更多