「操作介面設計模式」這本書怎麼讀?

不知道有多少想當 UI 設計師的人買了操作介面設計模式 第三版 這本書呢?

這是本我很喜歡的好書!大力推薦,不過很多人嫌它厚得跟磚一樣。

學生反應說,這本書內容有點硬,不是看了前文忘了後文,就是不懂為什麼書裡面會這樣寫。

其實這本書很適合從初階想轉中階的設計師閱讀,把自己累積一陣子的經驗轉化吸收。

也滿適合非設計師的人入手,只要你把它當字典看!

什麼是思維模型?

這是張瓦斯爐的照片。

你肯定知道瓦斯爐怎麼操作,怎麼開火、調整火勢大小。

那麼下圖這種控制面板,你知道怎麼操作嗎?

你也知道這些控件要怎麼動作對吧?轉、或是戳它。但不知道這玩意控制什麼東東,按下去有什麼後果。

剛剛看到圖的那一瞬間,你是怎麼去辨識、分析面板上的控件是用轉的、還是戳的?

你是怎麼覺得自己看不懂這面板在控制什麼?

看到第一張瓦斯爐的照片,你有意識到自己在思考這個控制元件怎麼操作、又代表什麼意義嗎?

除非你從來沒開過瓦斯爐,不然你的反應應該是這樣:「咦?為什麼我知道瓦斯爐那個轉鈕就是要這樣操作?我剛有很認真在想嗎?好像是下意識就這麼認為啊?」

這代表瓦斯爐的操作在你心中已經建立起「思維模型」了。

思維模型:事物運作方式的一種再現,我們無法把世界上所有細節都保留在大腦裡,因此我們會使用模型把複雜的事物簡化成可理解、可組織的區塊。

不管我們是否有意識,我們每天都會使用這些模型來做思考、做決策、理解周圍的世界。當然也包含你看到瓦斯爐照片一瞬間就能明白怎麼操作。

同樣的道理套到「介面設計」上呢?

什麼是設計模式?

設計模式:針對人們對軟體的理解和使用方式,對應不同任務目標和需求,整理出不同的「模型」。

設計模式能加速開發流程、也讓使用者不需重新學習就能上手。

(你總不會希望每個買自家瓦斯爐的人,都必需重新學習瓦斯爐怎麼開火關火吧?)

設計模式既然是「針對不同任務不同需求」建立的模型,我們得先理解使用者是誰、他想完成什麼事、他的目標是什麼、什麼情境下使用…等等,才有辦法直接把模型搬來用。

有點像字典,想查一個生字,筆畫、部首、讀音…等,最少需要知道這些條件之一(知道越多當然越準確)才能查詢字典。

這本書可以怎麼用?

舉個例子:我在設計一個官方網站,他們有很多產品需要排序、搜尋

第一反應就會是「使用者會用什麼方式來搜尋產品?」、「我可以怎麼規劃分類和排序?」

甚至腦海裡可能已經飛過一堆畫面,可能可以這樣排版、那樣排版,但如果這時馬上開始刻畫面肯定會卡住。

你知道有哪些分類的方式可以用在這些產品上了嗎?「知道啊!」

列舉幾種方式出來?「呃…照順序?」照什麼順序說清楚啊!

初學者因為經驗不足,往往在還沒想清楚前就動手,花了很多時間摔坑撞牆幾次之後才慢慢總結出一套心得。

這時候把「操作介面設計模式」掏出來可以避開一些坑,有專家把細節都整理好了,自己一時沒想到也沒關係。

翻開目錄

翻開書籍目錄,你現在想要替「很多產品分類排序」,你覺得哪一章可能有幫得上忙的內容?

  • 第1章 為使用者做設計
  • 第2章 組織內容:資訊架構與應用程式架構
  • 第3章 「到處走走」:導航、路標、找路
  • 第4章 頁面元素的排版
  • 第5章 視覺風格與美學
  • 第6章 移動裝置介面
  • 第7章 清單
  • 第8章 做事:動作與命令
  • 第9章 顯示複雜資料
  • 第10章 從使用者取得輸入:表單與控制元件
  • 第11章 使用者介面系統和原子設計
  • 第12章 在畫面之外

第2章 組織內容:資訊架構與應用程式架構,在這個章節裡提到怎麼編排與分類內容的方法,並舉例說明。

像是字母順序、數字、時間、地點、階層、類別或分片等等。

當年我還是菜鳥…

(當年我還是菜鳥的時候,曾經用過這種滿頭問號的方式在工作。)

接到工作指示,要設計介面時會這樣幹:

  1. 打開手機或上靈感圖庫站找點子,看別人美美的作品就想試試能不能套用在手邊工作上。
  2. 但「美美的」是視覺設計,新手在還不習慣去除視覺設計的影響做介面的時候,非常容易被迷惑。
  3. 就算照樣套上去了也很不連貫,感覺像硬套上尺寸不合的衣服,哪裡都彆扭。
  4. 更糟的是自己現在什麼靈感都沒有,只好狂翻看著靈感站截圖,卻覺得通通不適合,完全不知道下一步怎麼辦。
  5. 現在已經有點「要去除視覺影響先看排版」的感覺,也覺得同種任務的畫面好像可以分成幾種類型,但也不知道哪一類比較適合自己。

然後就卡住了,東挪挪西改改,連自己都不知道自己在做啥,反正時間到總是會有東西交出去。

邊實戰邊學介面設計的方法

操作介面設計模式 這本書不能說是完全的字典,除了介紹解釋各種模式,還講述許多的互動設計、視覺設計、資訊架構、動態設計等知識。

初學者拿起這本書肯定會被資訊量嚇到,很硬不是太好啃。

先當字典用,萬一真搞不懂使用者是誰、任務、目標、需求,只少你肯定會知道「啊、我現在要設計註冊畫面了怎麼辦」。

打開書、看目錄,猜猜看哪一章可能幫得上忙。心想:「註冊畫面應該是表單設計吧?」然後翻到表單設計,看看有沒有什麼和現在遇到的狀況感覺比較像的。

拔掉所有視覺影響,先照書裡介紹的模式套上自己專案的資料,再來看看細節可以怎麼微調。

內容、控件、版面啥的都搞定了,最最最後才是視覺設計。

如果你覺得這本書很硬,看前文忘了後文,原因之一是缺乏練習,所以沒有代入感,自己當然也記不住。

可以先從做專案開始,專案有遇到的畫面、去翻目錄,把書中那一章對應目前遇到狀況的內容讀完,通常就能夠兜個像模像樣的畫面出來交差。

書裡提到的例子非常常見,實作練習幾次之後,書籍內容應該也被仔細閱讀過大半,這時去補足其它理論部份,你會發現突然變得好懂很多。

畢竟自己親身經歷過,書中說怎樣怎樣的細節要注意、該被坑的也坑過,你會學得很快、進步更快!

基本款很重要

雖然操作介面設計模式 是 2020 年的書,有人會覺得這書中舉的例圖老氣。

嘿!這可是基本款中的基本款。

嫌素色直筒牛仔褲太單調,當然可以修改,看是染色、鬼洗、刷破、改窄、加寬、刺繡亮片蕾絲…

但一條褲子最基本的不就是腰圍臀圍腳踝圍等各種尺寸符合、穿著舒適嗎?想要怎麼搞變化,當然是在掌握基本型之後的事。

只有在理解基礎之後,你才知道變化型可以怎麼變,還能在變化完之後依然舒適好穿。(所以好的服裝打版師才會這麼稀少昂貴,一件衣服的主要價值也是在版型上呀!)

這是段 PTT 上很有名的推文:

→ kimgordon:我味增湯 都不放味曾與豆腐 改放菜頭排骨酥用肉燥提味

→ kimgordon:又清又香 但就略油 壽司改成糯米加香菇肉絲去蒸

→ DIDIMIN:沒有味噌還能叫做味噌???

→ kimgordon:這兩個配起來非常棒 最好是加點香菜

推 justjihyun:那就是菜頭湯了吧..

→ kimgordon:不是菜頭湯 這味增湯 喝起來跟排骨酥湯90%口感很像

→ pusufu:那就是排骨酥湯阿幹


有些學生看到明星大廚在巧克力加醃菜或是醬油,就覺得對方超強超有創意,自己也可以這麼跳脫…那些專家高手誰不是在熟悉基本理論條件、加上大量練習累積經驗、有了足夠多的理解,最後才跳出框架搞創意?

只有在你知道自己在幹嘛的情況下,搞一些新鮮玩意,才叫創意。

連自己都不知道自己在幹嘛就瞎搞一番,這不叫創意,叫做賭一把、祈求老天爺顯靈,瞎貓碰到死耗子。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close