互動設計概論
什麼是互動設計？
互動設計這個詞這幾年很常見，包山包海感覺上只要是各種媒體上看到會動都可以叫互動設計。有一種說法是「設計出互動產品，提供人類在日常生活或工作中使用」，更詳細的解釋則是「互動設計是人類互動及溝通上的空間」。它是一種以使用者的需求與經驗為出發點，創造出人類與科技的完美連結。 IDEO 創始人在 1984 年的一次設計會議上提出，他剛開始將互動設計命名為「軟面」（Soft Face），但這名字很容易讓人想起當時流行的玩具「椰菜娃娃」，後來將名字改為「Interaction Design」。從 Soft Face 這個最早期的命名方式可以看的互動設計的特性：沒有規則可讓人任意塑造扭曲、是在最表層如臉孔一般的存在。
反應與提示
在易用性原則裡，系統狀態的能見度、辨識而非記憶這兩點與「反應」有關。在操作 App 時，「反應」扮演著重要角色，它有著引導使用者至下一步的功能，幫助使用者理解目前狀況、繼續操作。在 iOS 上，常見的反應有數種：視覺、聽覺、觸覺。點擊某個按鈕，按鈕會變成被擊中凹下去的樣子，輸入正確會聽到叮叮的成功提示音，操作錯誤或失敗手機會震動並聽到嘟嘟的錯誤提示音等等。如果對於 App 的「反應」置之不理，使用者就無法知道自己操作的結果，對於自己的操作產生疑慮、逐漸失去對這個 App 的信賴度。
各種狀態與突發狀況
即使畫了非常精細的 UI FLOW、每一頁 Wireframe 旁也寫上詳盡的註解，但在專案後期 RD 仍是發現許多在前期規畫階段沒有被考慮進去的情況，這是為什麼呢？有一種可能性是漏了思考「各種狀態」和使用者的「突發狀況」。這會導致開發時程延後，因為訂定的規則不夠準確而再次召開討論會議確認細節。甚至發現此路不通但該功能已經做下去了無法修改進退兩難的情況。
Portrait 和 Landscape，談螢幕方向
直式螢幕稱為「Portrait」，橫式螢幕「Landscape」，頁面會依照橫直螢幕不同而改變形式的作法稱之為「Auto Orientation」。不管是 iPhone、iPad、還是 iPod，它們都是長方形的，一般情況下會直式使用，但某些情況就會轉成橫式更為合適，最明顯的例子就是遊戲類。什麼情況下會轉橫使用？橫式和直式的頁面樣子是否會不同？要怎麼調整呢？從 iOS 內建的 App 就可以發現數種切換模式與其代表的功能。
App 切圖檔案命名方式
一個 App 通常會有很多張切圖，不管是 iPhone 需要 1x、2x 圖檔，Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。在龐大的切圖數量下如何讓負責套圖的 RD 快速找到所需圖檔，檔名的命令方式就需要雙方統一格式方便大家作業。
無損圖片的介面製作方式（下）
之前在無損圖片的介面製作方式（上） 提到製作 App 介面時會面臨各尺寸螢幕解析度不同的問題，PSD 需要放大縮小使得最後產出得切圖模糊失真。本文將介紹智慧型物件、智慧型濾鏡、在ai畫好、貼到ps的技巧、遮色片、調整圖層等不同的技巧。
無損圖片的介面製作方式（上）
目前市面上最常見的被用來設計 APP 介面軟體為 Adobe 的 Photoshop 和 Illustrator。Illustrator 屬向量軟體，不管再多次的放大縮小，向量圖的質量不會因此改變。Photoshop 是繪圖影像處理軟體，像素圖片一經放大縮小後畫質會變差，偏偏目前 iOS 需製作 2 種、Android 至少也要作 3 種尺寸的圖檔，有時候還會有不知道哪邊來的交辦要 UI 協助製作「等身高大 iPhone」。為了提升畫面的精緻度（和對付這種強人所難的需求），還是盡量以無損圖片方式製作圖稿、運用比較靈活。
什麼是 Wireframe ?
老實說我受夠某客戶和某設計公司老是把 Wireframe 喊做 Storyboard 了！每次聽到都要克制翻白眼的欲望。拜託不要開口閉口說「我們很重視 UI、我們很有經驗」，卻連基本名詞都講錯。這跟義大利跟維大力一樣、相差十萬八千里啊！
為什麼要畫3次 Wireframe？
每個新案子進來，我通常會畫至少 3 次的 Wireframe，記錄靈感 > 完整繪製 > 電子化。好像重工了喔？可是你哪來的自信覺得設計 App 介面能一次到位呢？靈感乾涸對設計師來講理所當然、RD 都跳坑了才發現設計有錯缺東漏西也很正常、接手修改前人留下的舊案子卻找不到相關文件也不是什麼稀奇的事。為了要避免發生這種慘況，畫 3 次以上的 Wireframe 比較保險。
文章分類
