設計指南第七章：在形式與功能之間找到平衡
設計並不只是於好不好看，好不好用也很重要。要能優雅地在兩者之間取得平衡，將取決於設計師的功力。
如果我們告訴你，身為一個設計師，你的邏輯思考能力與美感直覺都同等重要，你會怎麼想？
本章目標：探索平面設計（Graphic Design）的基本概念，以及如何轉化到數位產品上。
讓我們先聚焦在一個迷思上：設計只是為了讓東西變得好看。
事實上，身為產品設計師，依照我們處理的媒介（Medium）本質，我們經常將大多數的精力花費在處理介面背後的邏輯架構。例如去了解背後運作的原理、使用者體驗、設計系統（Design System）如何應用於不同情境上。所以設計師的日常工作中，大多數的時間會用到大腦的理性面並思考如何處理複雜的互動細節。
不過，我們也想讓產品看起來美觀又簡潔。我們知道美學（Aesthetics）會很大幅度影響人們對於體驗的認知，也會影響到品牌形象。所以，如果能簡單清楚的視覺、字級、以及介面的佈局 — 這些就像是設計師在打造一個出色產品時能夠使用的材料 — 再加上正確的顏色、圖片以及動態，設計師可以設計出能使用者愉悅的產品。
身為一個設計師，在功能（易用性）以及形式（美學）之間取得平衡是最有挑戰又有成就感的部分，你會不斷地聽到這件事情。在業界，有些公司會將這兩個領域分開，由 UX 設計師（或互動設計師）專注在功能設計上，而視覺設計師（或 UI 設計師、品牌設計師）會負責設計上的呈現。當然，也有些公司的設計師會兼顧兩個領域，但最重要的是，從設計的角度上來說，功能跟呈現兩者是密不可分的。有些人或許會比較專注在其中一個面向，但在設計師職涯發展中，你必須持續精進這兩個領域的能力。
資訊只有在能夠被人們理解時有用處（Information is only useful when it can be understood.） — Muriel Cooper
平面設計是透過字型學（Typography）、攝影學（Photography）、圖標設計學（Iconography）以及插畫（Illustration）等元素來處理視覺呈現以及解決問題的方式。平面設計在生活中無所不在 — 舉凡床頭櫃上的書本封面、早餐喝的柳橙汁的包裝標示、客廳牆上的電影海報、網站的插圖等。
創造出視覺上吸引人、能激發使用者情緒的設計、以及用設計來說故事等概念等，都是自古以來都有的。不過，視覺設計的風格以及基準從過去到現在也有了非常大的轉變。如果你試著觀察手機裡下載的 App ，你會發現現代設計師其實已經發展出非常特定的視覺風格，但我們也會觀察到在這個風格之中，隨著時間的演進也會流行不同的視覺風格。
好的設計是一種語言，不是風格；風格只是一時的。（Styles come and go. Good design is a language, not a style.） — Massimo Vignelli
對於身為設計師的你來說，學習藝術史、平面設計史是很重要的。理解他們演進的形式會比背誦他們的名字跟年代來得更重要。舉凡藝術跟手工藝品，例如畫作、海報、雕像或是建築，都是一種創作者對於人生、社會及政治觀點的詮釋。也許你曾聽過現代主義（Modernism）—它是一個在 20 世紀初對於過去浮誇華麗的藝術風格進行的反動。或是像德國知名藝術機構包浩斯（Bauhaus），致力於整合後現代行為藝術（Mass Production）以及個人藝術的原則，將令人愉悅的美學及日常生活結合在一起。有很多當時定義出的設計原則，至今仍依舊深刻地影響我們的生活。所以，理解過去的經典能幫助我們釐清哪些值得保留、哪些可以被汰換，來幫助我們建構出更好的未來。
了解設計的基礎原則，而非直接開始設計介面，可以幫助我們培養長期的思考能力與技能。以下的推薦閱讀清單只是一個開始，但非常鼓勵你按照自己的興趣來探索這些入門的概念。
閱讀清單
一、設計的法則：125 個影響認知、增加美感，讓設計更好的關鍵法則
三、平面設計簡史
大英百科全書中對於平面設計的歷史沿革，從古埃及、中國、希臘文化，到十五世紀印刷術的普及。
五、視覺層級背後的基礎
正確地建構與編排這些介面元件，能讓使用者可以輕鬆瀏覽和了解產品，透過字體和視覺層次結構創造引人入勝的故事是每個設計師都應該擁有的能力，不僅是視覺美學，更是對體驗有重要的影響。
視覺層級的構成原則
- 格式塔原理（Gestalt principles）：我們的大腦傾向於將物體自然結合在一起解讀成一個整體，而不是每個小物件，包含簡約性（simplicity）、相似性 （similarity）、接近性（proximity）、封閉性（closure）、圖地反轉（figureand ground）、連續性（continuity）、順序性（order）、對稱性（symmetry）和同步性（synchrony）。可以參考產品設計師 Jon Yablonski 創建的 UX法則網站，是個很好的參考準則。
- 眼睛掃描的模式：大多數的文化在閱讀內容時眼睛移動傾向於從左至右、從上到下閱讀。許多研究提到，我們傾向於使用「F」和「Z」的掃描模式瀏覽頁面。
3. 顏色與對比度：目的性地使用顏色與對比度是很重要的，可以區分重要和不重要的元素，使重要的功能脫穎而出。
4. 字體 (Typography) ：通常建議使用3種字型級別來建構你的設計，第一級別用於讓使用者注意核心資訊，第二級別用於輕鬆幫助使用者瀏覽內容的元素，第三級用於內容與其他資訊。
5. 空白空間：空白是最容易被忽略的設計原則，但空白能夠確保放大重要內容、提供舒緩的空間、避免頁面上混亂，根據國際人因工程組織（Human Factors International） 研究，保留空白能將理解力提高將近 20%。
6. 大小：越大越明顯並非總是好的，最簡單的做法是，你認為最重要的元素應該是要最大的，考慮正確和相關的資訊讓使用者吸引至適當的內容中。
建立視覺層級是任何成功產品的基礎，它有助於創建焦點，為使用者提供開始使用設計的切入點，並為他們提供最重要的信息。
六、視覺元素在產品設計中的力量
我們為何稱自己為「視覺動物」並非無科學依據ー我們人類有 40% 的腦神經是與視網膜相連，有 90% 進入腦海中的事物由視覺刺激觸發，而大腦可以用比眨眼快 10 倍的速度去捕捉這些視覺訊息。在一些研究中發現：65％ 的人是視覺學習者，傾向藉由連結資訊與視覺元素來學習或理解。如在 Facebook 的觀看影片數據中，其中有 85% 的播放沒有打開聲音的。
本文中將更進一步用數據的方式解釋ー視覺元素如何影響我們的感知、理解和記憶保存。
- 幫助人們更快的理解
在《人類視覺系統的處理速度》(The processing speed in the human visual system)和相關研究報告顯示表明：
a. 大腦處理圖像只要 150 毫秒，另外需要 100 毫秒來理解圖像的意義。
b. 速度上，識別圖像等視覺元素比單詞或中等長度的文本還要快 6 萬倍。
c. 但圖像和圖標並不能替代文本和標籤。通過將它們結合起來，你可以更快、更有效地進行界面的心理處理。
d. 年齡性別等因素的不同可能會影響辨識速度。 - 幫助人們可以記憶得更久
在《學習一萬張圖片》(Learning 10000 pictures ) 的研究和相關文中發現：
a. 在二者測試中：圖像記憶的正確率為 98%，而字句則為 88%
b. 圖像比文字具有更好的存儲率；保存圖像的容量在大腦中近乎無限。越是生動的圖像比正常的圖像更好地保留在我們的大腦中。
c. 以聽覺相比，視覺記憶在三天後的長期記憶有六倍以上保留程度。
d. 年齡性別等因素的不同可能會影響記憶長度。 - 讓人感到舒心
在《心安使笑逐顏開》(Mind at ease puts a smile on the face) 的研究表明，當我們的大腦通過少量的認知努力就可以快速理解時，即使肉眼無法辨識，我們的身體就會做出愉悅感反應的動作與表情。 - 引導注意力
Nielsen Norman Group 的研究中發現，即使文字內容比照片多占了 316％ 的螢幕空間，使用者在觀看照片所花的時間卻比閱讀文字要多 10％。
在 UBER 的登錄頁實例中，利用了中央構圖以及不同照片的置換提高的標題和視覺轉化率有三倍。 - 幫助產品更通用
當來自不同國家的人們使用該應用程序或網站時，界面中的圖標、顏色、插圖和其他類型的視覺組件可以使應用程序或網站更易於了解。
七、UX 原則
作者用美麗的海報形式解釋 UX 常用的認知原則，諸如 Hick’s Law、Fitt’s Law 等。
八、動畫使用指南
這篇文章統整介面動畫的常見問題及實作建議。總的來說，介面動畫需符合我們認知的實體運動方式，這樣使用者更容易理解如何操作介面。幫助使用者完成任務是設計的最高目的，因此動畫不應該使任務的過程變慢或甚至卡關。不要讓動畫惱怒使用者並讓其感到礙事。以下分成三部分解釋：
動畫的持續時間及速度（Duration and Speed）
- 適當的動畫時間應該是讓使用者能察覺變化，但又不產生等待感。
- 研究指出最適的介面動畫時間應介於 200 至 500 毫秒間。低於 100 毫秒的動畫過快而不易被察覺，長於 1 秒則會讓使用者感覺遲滯。然而清單型項目適合的動畫為 20 至 25 毫秒短的時長。
- 動畫的過度時長會因為裝置而有所不同。Material Design Guidelines建議，平板裝置上的過度時長比手機多30%，穿戴裝置則比手機少30%。
- 物件大小會影響使用者的動態感。例如小物件會比大物件移動地更慢，因為同樣距離下，小物件的移動距離更大。
- 移動過程的動畫應簡潔，因此不建議使用動態模糊特效（Motion Blur）。
緩動（Easing）
- 緩動能使物件的移動看起來更自然、更有個性。物件通常不是照著同樣的速度移動（線性方式），而是使用定量的正負加速度。
- Ease-in 是指物件有著正加速度前進，很像從 0 開始加速的汽車。常用於跑出螢幕且不會回來的物件，例如滑去的系統通知。
- Ease-out 是指物件有個負加速度前進，很像減速至 0 的汽車。常用於跑進螢幕的物件。
- Ease-in-out 是讓物件一開始加速前進，但當快到終點時變減速至 0。它是最常用的緩動選項。特別注意的是，減速的過程建議比加速的過程長，這樣讓使用者更容易注意在最終減速後的物件狀態。
- 更多的緩動方式資訊可以參考 easings.net 及 cubic-bezier.com.
動畫的編排（Choreography）
- 移動的物件們應遵守一樣的軌跡及出現方式。例如清單型項目應該從上而下，依序地出現。
- 如果要透過動畫凸顯某個元素，盡可能限制數量。例如聯絡人卡片點開，只放大大頭照，接著依序出現聯絡人資訊，可能讓使用者由上往下更容易導覽。
- 物件的移動方式視有無變形。當等比例放大時可走直線，而變形放大（例如方形變成長方形）則走弧線，這樣可以呈現更自然的動畫。
- 多個物件變換位置時，避免讓物件重疊，或以陰影去模擬高低差。例如手機上長按後拖移物件的動畫。
九、設計練習（Designercize）
提供一系列的模擬設計專案情境，幫助你練習實際的設計問題。
二、Dieter Rams — 產品設計的大膽新世界
德國工業設計師 Dieter Rams 受木工祖父與建築學背景啟發，致力將大膽創新的視野帶入 1950 年代（德國戰後）的現代設計，並陸續為德國家電百靈（Braun）和英國傢俱品牌 Vitsœ 設計了無數經典產品，包括有「白雪公主之棺」暱稱的著名留聲機 SK-4。
百靈的成功，使擔任首席設計的 Rams 得以將他的設計思維運用於家用電子產品上，在德國漢堡美術學院（HFBK）的教學經驗，更讓他發展出著名的《設計十誡》，其最後一項「少即是好」（Less is better），深深影響了包含英國傢俱大師 Jasper Morrison、日本無印良品設計總監深澤直人，及前蘋果首席設計師 Jonathan Ive。
1960 年，Rams 為 Vitsœ打造了經典置物櫃系統（606 Universal Shelving System），Rams 表示，他希望即便產品被使用一段時間後，其仍能持續保有變化空間。而自產品問世後近五十年，他仍在為該設計增添新功能。他認為設計師對未來有極大的責任，應保持樂觀心態來做設計。
相關資料參考
三、設計有意義的動畫
四、百年包浩斯
反思時間
- 哪個設計原則讓你最驚艷？這個原則是如何應用在你每天使用的產品上？
來實踐吧
精進 UI 設計技能的秘訣在於透過各種管道學習。當我們學到更多技巧，就更容易表達出自己的設計理念以及解決方案。你可以透過設計師入門案例分析中得到更多實戰經驗的分享，或是參考業界案例，像是 Slack 是如何將使用者納入大型設計專案的一環。
你需要透過練習來學習視覺設計。你可以選擇任一設計軟體來臨摹或重新設計一個自己喜歡的 App，在這過程中，你也可以更熟悉這些設計工具的使用方這些設計工具的使用方式。網路上有許多設計資源如模板或是實戰守則可以供你參考、探索，以及運用在你的設計上。
這份指南得以中文的姿態出現在設計師社群中，都要歸功於自告奮勇的轉譯團團員：Irene Chuang、吳健群、QMO、Lily Pai、Chi、Irene Kuo、Erin Huang 感謝你們！（此翻譯已經過原作者同意授權）