9 本 UX/UI 設計電子好書，設計師想找靈感就快下載來精進 App 設計力

《TO》導讀：UX/UI 很重要我們都知道，但是好的界面要怎麼做出來？不僅靠天分還得靠後天培養，以及對於使用者的了解。以下文章編譯自 Medium，作者 Muzli 專門在網路上探討界面設計相關議題，推薦 9 本 UX/UI 設計電子書，並且一一挑出其特點，想要精進設計力，就來瞧瞧有哪些好書可以納入囊中。

• 1. You’re Designing It All Wrong!

作者：Webydo & Tal Florentin

Webydo 與 Tal Florentin 聯手寫出一本能幫助你更完善設計 UX/UI 界面的免費電子書，身為專業的 UX/UI 界面設計師的你不下載對不起自己呀！

下載請點我

• 2. The UX Reader

作者：MailChimp

這本電子書是現今最流行的 UX 新聞的集大全，不載不行啊！

下載請點我

• 3. Butterick’s Practical Typography

作者：Matthew Butterick, Erik Spiekermann

普通讀者愛讀電子書的排版集大全：Butterick’s Practical Typography。

下載請點我

• 4. Value For Money

作者：nuschool

了解如何為你的設計工作爭取更高的報酬。新的誠實，不說廢話的指導定價、談判和如何保持讓客戶滿意。

下載請點我

• 5. PIXEL PERFECT PRECISION HANDBOOK 3

作者：Matt Gypps

新增超過 40 頁的新內容，以及更新原有內容，讓第三代手冊擁有更多、更好、更美的內容。

下載請點我

• 6. COMPLETE A BOOK APART LIBRARY

書籍約 100 多頁，介紹界面完美比例設計大小，包含 HTML5、CSS3、內容策略、響應式網頁設計等。

下載請點我

• 7. Mobile & Multi-Device Design

作者：Luke Wroblewski

細緻入微的用戶界面設計細節和大畫面思考行動和多個裝置設計用於個人電腦、平板電腦、電視的彙編。

下載請點我

• 8. Real-Life Responsive Web Design

作者：smashing magazine

即將出版的新書，探討與現實生活中的敏感選項衍生的智慧型前端技術和設計模式。

下載請點我

• 9. 10 Keys to Great LandingPages

在這本書內，你會熟​悉使用到達頁面（Landing Page），如何定義自己的目標，並得到規劃的實用技巧，並打造自己的成功到達頁面。

下載請點我

（資料來源：Medium；本文作者：Muzli；圖片來源：baldiri，CC Licensed）

文 / TechOrange 科技報橘

文章來源: FLiPER   http://flipermag.com/2015/11/25/ux-ui/

UI 炫技要不得！設計師別求花俏，簡單明瞭才最重要

要知道使用者介面裡的動畫不全都是壞事，壞的是那些過度濫用動畫以至於影響使用者體驗的設計師。一個好的設計師應該要知道該如何取捨使用的時機，以下幾點將會告訴各位，在什麼樣的情況適合使用動畫，讓你在未來不會再不必要的時機亂用動畫。

• 太過刻意

以下的例子指的是現在迪士尼化的 UI 動態設計，看起來是有點誇張沒錯，但還真的這樣設計的 UI 其實不在少數。

這樣的設計看起來就好像我們用隱形的橡皮筋把這些符號 Icon 垂吊在半空中讓它一直晃，一點都不好看。

• 過度使用

動畫就像殺蟲劑一樣，你用太多就會失去它的效果。

• 動畫原則

很多 UI 設計師常常會建議大家多去看看迪士尼的動畫製作原則，但其實這種東西只會讓使用者的介面使用起來更緩慢而已。

很多 UI 設計師常常把介面當成動畫展示區，但除非你真的是想進到皮克斯當動畫家，最好還是少用那些太過卡通化的動畫效果。

• 到底什麼才是介面

介面存在的目的就是將不斷流通的資訊傳達出去，對於設計師來說，他們的工作就是決定何時是他們介入流通資訊中的最好時機。

• 動畫在 UI 設計中扮演的角色

以下是幾個使用動畫的基本原則:

你是否能確定使用動畫能幫助到使用者。「看起來很好看」不是一個正當的理由

盡量讓動畫出現的時間少於 300 毫秒

避免使用線性移動的動畫，因為這會讓整個介面看起來遲緩無趣

99% 的動畫都應該使用簡單的緩入緩出效果

只有在極少數的情況下才會使用彈簧 (Spring)，彈跳 (Bounce) 等效果

• 通知動畫

簡單的通知動畫最常不要超過 300 毫秒，這樣的設計才能真正幫助使用者，因為它能吸引到使用者的目光。

• 吸引你的使用者

從以上的例子我們可以看到，通知的強度在第二次點擊的時候大大的增強。

1. 第一次點擊時，通知緩慢地出現。

2. 第二次點擊時，通知列的訊息激烈的震動。

當使用者不斷的點擊按鈕時，介面會出現另外的訊息通知使用者。

設計師也可以改變安鈕的顏色來吸引使用者的注意。

• 擴張訊息

這個設計非常的簡單且有效，常常在行動裝置上能看到它的蹤跡。它特別的點是，使用者即使在擴張列表之後，原先的畫面還是維持在原本的狀態。

在上方的案例中，我刻意將關閉鍵的出現時間稍微延長，我也使用轉折的動畫讓使用者把目光聚集在較重要的資訊上。

• 訊息重要性的優先順序

身為一位設計師與軟體開發者最重要的就是決定 UI 上哪個設計元素才是優先選擇， 以下方法可以用來強調:

1. 使用標題

2. 畫底線或是加上粗黑字體

3. 使用顏色

4. 使用形狀與圖片

5. 動畫

沒有人會把文件裡每一段文字都改成標題大小，同樣的，也沒有人會把介面裡的每一個符號元素都改成動畫。請把動畫當成一隻螢光筆，只在重點的部分運用。過多的使用會讓人很難抓到重點，造成你想傳達的訊息流失掉。

• 功能性 vs 美觀

如果你開始聽到團隊裡有人提到他的 UI 動畫能讓使用者 「賞心悅目」，那你就該當心了，因為單純為了美觀而設計的動畫幾乎都不是什麼好設計。

記住，簡潔就是美，功能性的設計永遠勝過純粹為了美觀的動畫。

不要讓你的動畫影響使用者的體驗，想想看為什麼飛機的導航介面為什麼從不使用動畫。你也許會覺得 300 毫秒的動畫又無傷大雅，但對於使用者來說，你多餘的動畫只會煩死大家，不會讓任何人 「賞心悅目」！

• 結語

你就盡情的運用動畫吧，把動畫當成一個能更快傳達資訊的工具，但記得，功能性遠比美觀更重要，多為使用者著想，不要讓他們在你的介面上多浪費那幾毫秒。

( 資料來源: 翻譯自 Sophie Paxton ；圖片來源: Pixabay、Sophie Paxton、Wikipedia )

文章來源: FLiPER   http://flipermag.com/2015/10/14/ui-3/