「操作介面設計模式」這本書怎麼讀？ - 嫁給RD 的UI Designer

好書推薦。

初階轉中階的設計師適用！拿來當字典也是個方法。

嫁給RD的UIDesignerAkaneLeeUIDesignerTaipei,Taiwan uiux.akane Tweetsby@akane_lee不知道有多少想當UI設計師的人買了操作介面設計模式第三版這本書呢？這是本我很喜歡的好書！大力推薦，不過很多人嫌它厚得跟磚一樣。

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

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

也滿適合非設計師的人入手，只要你把它當字典看！什麼是思維模型？這是張瓦斯爐的照片。

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

那麼下圖這種控制面板，你知道怎麼操作嗎？你也知道這些控件要怎麼動作對吧？轉、或是戳它。

但不知道這玩意控制什麼東東，按下去有什麼後果。

剛剛看到圖的那一瞬間，你是怎麼去辨識、分析面板上的控件是用轉的、還是戳的？你是怎麼覺得自己看不懂這面板在控制什麼？看到第一張瓦斯爐的照片，你有意識到自己在思考這個控制元件怎麼操作、又代表什麼意義嗎？除非你從來沒開過瓦斯爐，不然你的反應應該是這樣：「咦？為什麼我知道瓦斯爐那個轉鈕就是要這樣操作？我剛有很認真在想嗎？好像是下意識就這麼認為啊？」這代表瓦斯爐的操作在你心中已經建立起「思維模型」了。

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

不管我們是否有意識，我們每天都會使用這些模型來做思考、做決策、理解周圍的世界。

當然也包含你看到瓦斯爐照片一瞬間就能明白怎麼操作。

同樣的道理套到「介面設計」上呢？什麼是設計模式？設計模式：針對人們對軟體的理解和使用方式，對應不同任務目標和需求，整理出不同的「模型」。

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

（你總不會希望每個買自家瓦斯爐的人，都必需重新學習瓦斯爐怎麼開火關火吧？）設計模式既然是「針對不同任務不同需求」建立的模型，我們得先理解使用者是誰、他想完成什麼事、他的目標是什麼、什麼情境下使用…等等，才有辦法直接把模型搬來用。

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

這本書可以怎麼用？舉個例子：我在設計一個官方網站，他們有很多產品需要排序、搜尋。

第一反應就會是「使用者會用什麼方式來搜尋產品？」、「我可以怎麼規劃分類和排序？」甚至腦海裡可能已經飛過一堆畫面，可能可以這樣排版、那樣排版，但如果這時馬上開始刻畫面肯定會卡住。

你知道有哪些分類的方式可以用在這些產品上了嗎？「知道啊！」列舉幾種方式出來？「呃…照順序？」照什麼順序說清楚啊！初學者因為經驗不足，往往在還沒想清楚前就動手，花了很多時間摔坑撞牆幾次之後才慢慢總結出一套心得。

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

翻開目錄翻開書籍目錄，你現在想要替「很多產品分類排序」，你覺得哪一章可能有幫得上忙的內容？第1章為使用者做設計第2章組織內容：資訊架構與應用程式架構第3章「到處走走」：導航、路標、找路第4章頁面元素的排版第5章視覺風格與美學第6章移動裝置介面第7章清單第8章做事：動作與命令第9章顯示複雜資料第10章從使用者取得輸入：表單與控制元件第11章使用者介面系統和原子設計第12章在畫面之外第2章組織內容：資訊架構與應用程式架構，在這個章節裡提到怎麼編排與分類內容的方法，並舉例說明。

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

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

）接到工作指示，要設計介面時會這樣幹：打開手機或上靈感圖庫站找點子，看別人美美的作品就想試試能不能套用在手邊工作上。

但「美美的」是視覺設計，新手在還不習慣去除視覺設計的影響做介面的時候，非常容易被迷惑。

就算照樣套上去了也很不連貫，感覺像硬套上尺寸不合的衣服，哪裡都彆扭。

更糟的是自己現在什麼靈感都沒有，只好狂翻看著靈感站截圖，卻覺得通通不適合，完全不知道下一步怎麼辦。

現在已經有點「要去除視覺影響先看排版」的感覺，也覺得同種任務的畫面好像可以分成幾種類型，但也不知道哪一類比較適合自己。

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

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

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

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

打開書、看目錄，猜猜看哪一章可能幫得上忙。

心想：「註冊畫面應該是表單設計吧？」然後翻到表單設計，看看有沒有什麼和現在遇到的狀況感覺比較像的。

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

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

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

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

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

畢竟自己親身經歷過，書中說怎樣怎樣的細節要注意、該被坑的也坑過，你會學得很快、進步更快！基本款很重要雖然操作介面設計模式是2020年的書，有人會覺得這書中舉的例圖老氣。

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

嫌素色直筒牛仔褲太單調，當然可以修改，看是染色、鬼洗、刷破、改窄、加寬、刺繡亮片蕾絲…但一條褲子最基本的不就是腰圍臀圍腳踝圍等各種尺寸符合、穿著舒適嗎？想要怎麼搞變化，當然是在掌握基本型之後的事。

只有在理解基礎之後，你才知道變化型可以怎麼變，還能在變化完之後依然舒適好穿。

（所以好的服裝打版師才會這麼稀少昂貴，一件衣服的主要價值也是在版型上呀！）這是段PTT上很有名的推文：→kimgordon:我味增湯都不放味曾與豆腐改放菜頭排骨酥用肉燥提味→kimgordon:又清又香但就略油壽司改成糯米加香菇肉絲去蒸→DIDIMIN:沒有味噌還能叫做味噌？？？→kimgordon:這兩個配起來非常棒最好是加點香菜推justjihyun:那就是菜頭湯了吧..→kimgordon:不是菜頭湯這味增湯喝起來跟排骨酥湯90%口感很像→pusufu:那就是排骨酥湯阿幹有些學生看到明星大廚在巧克力加醃菜或是醬油，就覺得對方超強超有創意，自己也可以這麼跳脫…那些專家高手誰不是在熟悉基本理論條件、加上大量練習累積經驗、有了足夠多的理解，最後才跳出框架搞創意？只有在你知道自己在幹嘛的情況下，搞一些新鮮玩意，才叫創意。

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

Older»為什麼公司不做Prototype呢？«Newer做作品集怎麼拆別人家的產品？ commentspoweredbyDisqus最新課程資訊台北5月UX課CategoriesPodcast 4UI雜談 64UX相關 28Youtube 6個人經驗 51好書推薦 28爬舊文有風險 11設計思考 1課程講座 31軟體與操作 53遊記 15開發流程 38Tagcloud3D adobe Android App CLIPSTUDIOPAINT CX FlowChart FunctionalMap GrowthHack Guideline HTML HTML,CSS Illustrator iOS iPhone MacOS MagicaVoxel Mockup Photoshop Podcast Prototype Rails RWD StarWars TOOL Tutorial UI UIFlow UI和RD UI雜談 UX UX相關 Wireframe 作品集 個人經驗 公司營運 切圖 初學者 加拿大 動態效果 半途而廢 台灣 吃貨 好書推薦 工作職責 我的生活 手繪 拆解UI 接案 文具 日本 書單 服務設計 標示文件 歐洲 泰國 研究方法 簡歷 設計思考 課程 遊戲 開發流程 面試 香港