Google UX Design 筆記與課外連結整理 Course 5

第五課主要是學習用 Figma 繪製 mockup 、顏色對於可訪問性的應用、網頁無障礙性指導原則(WCAG)、模型中的視覺設計元素及佈局、設計原則的運用、更多的格式塔原則、導航欄的重要及設計系統運用、用戶操作上的手勢及動作、可訪性研究複習、更新拋光及如何演示作品集，以下為課外參考連結：

11 min readMar 29, 2022

Create High-Fidelity Designs and Prototypes in Figma

Week 1: Starting to create mockups.
Week 2: Applying visual design principles to mockups.
Week 3: Exploring design systems.
Week 4: Participating in design critique sessions.
Week 5: Creating high-fidelity prototypes.
Week 6: Testing and iterating on designs.

第 1 週：開始創建模型。將注意力轉向視覺設計，即產品或技術呈現給用戶的方式。開始使用視覺設計元素創建模型，如排版、顏色和圖標。元素通常使用網格、分區和留白等方法排列到佈局中。用這些視覺設計元素來設計整個證書計劃中的 App 。

第 2 週：將視覺設計原則應用於模型。使用視覺設計原則來完善您的模型。首先，使用重點來引導用戶訪問頁面中最重要的部分。再來，應用層次結構、比例和尺寸縮放來組織 App 每個頁面上的元素。然後，您將考慮統一性和多樣性，以幫助您的應用程序元素一起發揮作用或脫穎而出。最後，您將重溫格式塔原則，如相似性、接近性和共同區域，幫助用戶輕鬆解讀設計。

第 3 週：探索設計系統。了解設計系統各個部分，及使用設計系統的好處。認識各種公司的設計系統，並有機會在自己的模型中使用它們。學習如何在 Figma 中使用和創建貼紙。

第 4 週：參加設計評論會議。提供、接收和實施反饋是 UX 設計過程的必要部分。探索提供和接收反饋的有效方法、了解設計評論會議，是作為 UX 設計師的第一份工作的重要組成部分。學習如何將反饋轉化為用在修改設計的可行步驟。

第 5 週：創建高保真原型。學習在 Figma 中構建高保真原型，按照六個步驟，把模型變成可供測試的原型。探索手勢和動作這兩個新概念，它們有助於豐富用戶體驗並提高原型的可用性。

第 6 週：測試和迭代設計。通過可用性研究來測試 App 的高保真原型設計。分析收到的反饋，以提出可行的見解並迭代設計。學習設計完成如何交付給工程師進行開發。最後在專業 UX 組合的案例研究中展示您在此證書課程中創建的所有檔案。

學習 Figma 基本技能

參考文章：

創建頁面：tutorial from Figma
快捷鍵：Figma shortcuts
擬真設備 Mockup：library of device sizes

Figma mockups 教學：

創建文字：Text Tool and Fonts
選擇和編輯文字：Edit Text Layers
調整字體和字體大小：Explore Text Properties
重新排列文字： Smart Selection
位置和大小：Constraints
設置和保存預配置的字體：Create and Apply Text Styles

學習文字類型

參考連結：

選擇最佳字體：7 Things to Remember When Selecting Fonts for Your Design
排版如何影響設計：Legibility, Readability, and Comprehension

在模型中排版

假文假字

暫時替代文字 Placeholder text

通常用於低保真設計： Lorem Ipsum generator、this one

真實文字 Real copy

通常用於高保真設計

在模型中使用顏色

使用填充創建和應用顏色

調整顏色值

坡度：填色 Paints in Figma.
色調
不透明度

使用 Stroke 創建和應用顏色

填滿和筆刷應用：Figma Handbook: Fill, Stroke, and Advanced Stroke.

設置和保存顏色樣式

為顏色、文字、效果和網格創建樣式：
creating styles for colors, text, effects, and layout grids.

了解如何選擇顏色

有些顏色具有普遍意義。可使用這些含義來影響您創建的工作。
Toptal ：顏色在 UX 中的作用。
色彩理論。CareerFoundry 簡短而全面的初學者指南：色彩指南：色彩理論和調色板簡介。
使用顏色來創建具有現代感的設計：Google 的 Material Design中的這篇文章
Coolors 網站將通過單擊空格鍵生成互補色。瀏覽了幾個調色板之後，你會更了解你想在設計中使用什麼顏色。

顏色的可訪問性

作為設計師，顏色是您與用戶的情感聯繫並引起對設計某些部分的注意的一種方式。但當設計產品時，重要的是要考慮產品的所有用戶如何解釋顏色。一些用戶將難以感知某些顏色或顏色組合，因此您的設計顏色所傳達的信息可能會丟失。您的設計必須具有包容性並反映產品用戶的多樣化需求，這一點至關重要。此外，考慮可訪問性的設計使所有用戶都可以更輕鬆地與您的設計進行交互。

WCAG 無障礙設計指南

一系列改進 Web 可訪問性的指南：
許多資源可幫助設計師以大數人可訪問的方式使用顏色。
W3C 認識到需要改善殘疾人士的可訪問性，包括視覺、聽覺、身體、說話、認知、語言、學習和神經障礙。因此制定了Web 內容可訪問性指南
如何在自己的設計中使用 WCAG？

色盲

導致難以區分某些顏色。
常見的色盲分為三類：紅綠盲、藍黃盲和全色盲。
了解色盲如何影響用戶看到顏色的方式，請訪問 Colblindor色盲模擬器，您可以在其中上傳圖像並通過色盲過濾器檢查它們。

設計時牢記顏色可訪問性：

在設計中使用圖標：
除了顏色。如設計一個表單並希望指出某個字段缺少文字或格式不正確，不要只將不正確的文字變為紅色。還應該使用紅色驚嘆號圖標：將用戶的注意力吸引到帶有顏色和圖標的字段，設計對更多用戶來說會更清晰。

使用圖案和紋理來創造對比：
對比度是設計中兩個或多個元素之間的差異。
對比度通常是通過黑白圖像或大尺寸的標題文字與較小尺寸的內文文字來創建的。
如下圖，通過對比模式，除顏色外，圖表中的條形對於所有用戶都將清晰區分。

避免難區分的顏色組合。以下是色盲用戶通常難區分的顏色組合：

綠和紅 / 綠和棕色 / 藍和紫 / 綠和藍 / 淺綠和黃 / 藍和灰 / 綠和灰 / 綠和黑

請記住：若設計中使用綠色，並不需完全避免紅色、棕色、藍色和灰色。但因為這些顏色很難區分，最好不要直接放在一起，尤其是在關鍵信息。此外，應創建其他形式的對比，例如添加文字標籤以區分重要事項。如下圖：

設計應該以多種方式傳達信息，不只是運用顏色，如使用圖標、圖案、紋理和易於區分的顏色組合。

對比敏感度低

低對比敏感度的人會覺得某些物體昏暗或不清楚，而難以識別。
如具有高視力的人在黑暗的環境而螢幕太亮時、或者在明亮環境而螢幕太暗時，對比度敏感度會降低。隨著人的眼睛變老，對比敏感度也會自然減弱。
在設計時考慮到低對比度敏感度的一種方法是使用亮度對比率，即背景與背景前使用的文字顏色之間的對比率的測量。
WCAG 建議圖像和文字的亮度對比度至少滿足4.5:1的對比率。
四個對比率的例子：

低對比率為 2 : 1。背景顏色和文字難以閱讀。
至少對比率為 4.5 : 1。背景和文字組合更易於閱讀，即使它們使用淺色。
高對比率為 16:1。設計易於閱讀，並為在背景上突出的文字使用更大膽的顏色。
最大對比率為 21 : 1。設計中的最大對比率，像這些，只使用黑色和白色。

顏色對比率參考連結：

W3的視頻具有良好對比度的顏色展示了亮度對比率如何影響用戶的日常工作，從導航街道標誌到與人交談。
WebAIM 提供對比率檢查器工具，可輸入設計中顏色的十六進制代碼。若對比率不符合上述標準，可使用工具內滑桿調整顏色並找到符合 WCAG 無障礙設計指南的新顏色。

光敏感

一些用戶對明亮的光線和明亮的色彩和對低對比度一樣敏感。光敏感是不能容忍光。對光敏感的用戶可能會在昏暗的螢幕上體驗您的設計。或者他們可能會使用設備的操作系統在明亮模式、黑暗模式和高對比度模式之間進行選擇，如下圖所示。最好允許用戶進行這些設置選擇，因此請嘗試為自己的項目設計自己的明暗模式。

考慮顏色

設計出色用戶體驗的目標是讓人們的生活更簡單、更美好。
通過遵循一些準則並在設計時考慮到可訪問性，您將創建有用且完全可訪問的產品。

了解有關使用可訪性顏色進行設計： W3C（WCAG 指南的創建者）的此視頻展示如何審查 Web 可訪問性設計：Easy Checks: A First Review of Website Accessibility。
如何將 WCAG 應用到設計的調色板：Color Safe 的調色板生成器
下載插件 Stark 以直接在 Figma 中對設計進行對比檢查，節省時間並改進工作流程：Stark — Figma。

在模型中使用圖標 icon

圖標是代表應用程序或網站中特定操作或工具的圖像或符號。在您的設計中使用圖標可以快速傳達概念，而不是用文字來解釋概念的含義。

導入和創建圖標

Figma 支持 Font Awesome，這是一組具有易於閱讀字體的可自定義圖標。
使用 Font Awesome 可以：

保持圖標原樣（常規）或使它們成為實體，以便更容易看到。
查看和複製 Font Awesome 備忘單中的項目。
右鍵單擊圖標將其複製到剪貼板並將其黏貼到 Figma 中的畫布上。

Figma幫助中心：了解更多關於圖標和 Font Awesome的信息。

或從現有設計系統中導入圖標：
Google 的Material Design或
Apple 的Human Interface Guidelines。
可將 Google Material Design 圖標直接添加到 Figma 中的工作區。

調整圖標

在 Figma 中調整圖標的大小：

通過單擊選擇要調整的圖標。
拖動圖標的角時按住 Shift 按鈕可調整大小和比例。

考慮用戶

請考慮圖標對產品所有用戶都具有包容性、可訪問性且易於理解。

使圖標通用：添加到設計之前，考慮圖標是否具有文化或地理特徵。
考慮包含一個文字標籤：通常，文字在圖標正下方的小字體中。包含文字標籤可確保使用屏幕閱讀器或新技術採用者的用戶能夠識別圖標。文字可以清楚地描述圖標的含義。
保持品牌清晰：一切應該反映你為品牌創造的形象。App 中的所有內容都需要具有相同的配色方案、相同的字體和相同的樣式。

了解圖標的更多信息

了解有關在設計中添加圖標：Icon Finder 如何在 Figma 中使用圖標
Robert Bradford ：關於在 Figma 中創建圖標的視頻。
Intechnic 的文章：有關圖標可用性的提示和技巧。

視覺設計元素

前面了解了排版、顏色和圖標在模型中的重要性。基本的視覺設計元素也很重要，如線條、大小、形狀和圖像。Tips：在設計時使用這些元素不必具有藝術性。

線：線是連接空間中兩點的直線。在 UX 設計的世界裡，線條可以用來區分 App 的各個部分，連接兩個相關的想法，或者強調設計的某些部分。例如，可在標題文本字方放置一行，強調標題。
尺寸：一個元素的尺寸與影響設計的其他元素和因素有關。在為螢幕較小的手機設計時，尺寸是特別重要的考慮因素。元素的大小可以決定用戶如何體驗您的設計，無論好壞。如一個太小的按鈕會讓用戶感到沮喪或導致他們點擊了你設計的錯誤部分。
形狀：形狀定義為包含長度和寬度的獨立空間周圍的線條。形狀幾乎在每個 App 設計中都有一席之地，無論您使用矩形、正方形、圓形還是其他形狀。如要查看 App 內的更多信息，通常會有一個圓圈，裡面有一個加號 (+)，表示用戶可以單擊該形狀展開菜單並了解更多信息。或關閉 App 中的窗口， App 設計通常使用內部帶有 X 的圓圈。
圖像：在 UX 設計中，圖像用於講述故事，無需文字就能產生影響，並增加視覺重點。圖像可以是靜態的，如圖片和插圖，或是動態的，如動畫和 GIF。無論哪種方式，都應該包含設計中相關的圖像，並且與您正在設計的用戶相關。

把它們放在一起

視覺吸引力：
考慮您的設計內容將如何實際被用戶體驗。線條是否連接或劃分了正確的設計元素？是否有任何形狀意外重疊？圖片是否正確上傳到 Figma？將需要更加關注細節來審查您的工作，特別是尋找設計中可能不是最具視覺吸引力的元素。
可訪問性：
在您設計模型時，請考慮具有各種可訪問性需求的用戶可能會對您包含的元素做出反應。如標題是否通過使用線條或其他視覺設計元素從放置的信息中脫穎而出？所有圖像都有替代文字嗎？確保每個人都可以訪問您的設計對於產品取得成功至關重要。

應用視覺設計元素參考： Usability.gov 的關於視覺設計基礎的簡短指南。

圖庫網站

Unsplash：搜索和下載免費的高解析度圖像。
腮紅blush：由來自世界各地的藝術家創作和定制免費插圖。可安裝插件或創建自己的塗鴉。

其他設計注意事項

超鏈接文字 Hyperlinked text

超鏈接是從一個頁面或文件到另一個頁面或文件的鏈接，通常通過單擊帶有下劃線的藍色文字或圖像來轉址。超鏈接使人們可以輕鬆瀏覽數位產品，並且標準樣式使鏈接在文字為藍色和下劃線時立即可識別。

在為您的模型添加超鏈接時，請記住以下幾點：

整潔的頁面更易於閱讀。超鏈接可使設計井井有條，使用戶輕鬆瀏覽您的產品。但添加大量超鏈接會降低可讀性並影響可用性。深思熟慮地選擇超鏈接，就不會用太多的藍色文字淹沒和分散用戶注意力。
滿足用戶期望。如果文字帶有下劃線和藍色，應該始終是一個鏈接。
不要忽略常見使用方式而使用戶感到困惑。
並非所有鏈接看起來都一樣。隨著用戶體驗設計的發展，數字產品中鏈接的表示方式也在發展。有時，公司的品牌標準意味著他們的鏈接不會是藍色的。圖像也可以是超鏈接。例如，許多用戶現在希望公司網站上的徽標鏈接到主頁。即使沒有底線的文字，用戶也希望圖標像超鏈接一樣。

4. 使用描述性鏈接。超鏈接文字應該讓用戶準確了解它將把他們帶到哪裡。避免超鏈接“這裡”一詞，而是使用描述性短語，允許用戶做出明智的選擇。

按鈕 Buttons

按鈕可讓用戶採取特定操作，如“取消”或“保存”。

1. 讓按鈕看起來像按鈕。按鈕應通過其形狀、大小和顏色輕鬆識別為按鈕。大多數按鈕都是矩形或圓形，星形或心形按鈕可能會使用戶感到困惑。
以下是四種最常見的按鈕樣式：

帶方角的填充按鈕
圓角填充按鈕
帶陰影的填充按鈕（方形或圓形）
具有實線輪廓的未填充按鈕（幽靈按鈕）

2. 保持一致。在整個產品中始終使用相同類型的按鈕。
如在 App 的主頁上使用幽靈按鈕，就該在每個頁面上使用相同的樣式。一致性幫助用戶識別哪些元素是按鈕。

3.留白。在按鈕周圍留出（空白）空間，使用戶可輕鬆點擊或單擊它們。
UX 設計師經常為按鈕周圍留下空間，防止頁面過於混亂。留白還可以降低用戶意外點擊相鄰按鈕的可能性。

了解有關在模型中添加按鈕：

Material Design 的按鈕綜合指南或
UX Planet 的7 條按鈕設計基本規則。

輸入框

輸入是用戶輸入信息的文字字段。應該清楚輸入哪些信息。
它也應該足夠大以適應要添加的信息。

使用視覺提示。
大多數輸入都是開放式的，這意味著用戶可以在該字段中輸入任何內容。但它們也需要用戶提供特定信息，如電話號碼或電子郵件地址。為了幫助您的用戶輸入正確的信息（並避免錯誤消息），請給他們視覺提示。
如可使用幽靈文字（提示文字）來模擬輸入所需的信息。幽靈文字通常比頁面上的其他文字更輕，一旦用戶輸入信息，它就會消失。下面的設計包括一些不同的幽靈文本示例，例如指示日期的正確格式（“mm/dd/yy”）。

使用子類別對輸入進行分組。
頁面添加超過六個輸入時，最好將它們分組。
如創建 “個人信息”類別：用戶的名字、姓氏、出生日期、性別等的輸入。
“聯繫信息” 類別：電子郵件地址、電話號碼、街道地址、城市等的輸入。
分組輸入使用戶更容易了解需要哪些信息並可視化他們的進度。

了解有關在設計中添加輸入：

Material Design 的文本字段指南或
UX Planet 的輸入字段剖析。

在模型中創建網格

網格是創建設計時使用的有用且實用的工具。網格為設計提供一致性和結構，它們有助於確保您的設計適合屏幕邊界。

基本網格具有將頁面劃分為小方塊的交叉線，使您可以輕鬆地在設計中佈置元素。有助於進行一致的設計。
佈局網格 UX 設計師更常使用，是一系列柱子和小巷。
柱子是有色塊，小巷是柱子之間的無色空間。

創建和應用網格

Figma 的幫助中心：
使用網格和探索網格類型（統一、列、行）的一些技巧，包括帶有每種網格類型示例的視覺效果。

將元素對齊到網格

以下是 Figma 中的控件，順序如下：

Figma 的幫助中心：了解更多關於對齊對象的信息。

自動佈局

自動佈局您的設計可以根據變化縮小或擴大。如以創建在編輯文本標籤時會增大或縮小的按鈕。

Figma 幫助中心：了解更多關於自動佈局的信息。

保持在界限內

使用網格有助於提高模型的一致性和視覺吸引力。
了解更多信息：

Figma 的有關對齊和分佈的視頻教程，它將引導您完成直接在 Figma 中執行這些操作的步驟。
Figma 文章：您需要了解的有關佈局網格的所有信息。
Smashing Magazine 文章：學習如何使用佈局網格構建更好的設計。

在模型中創建分區 containment

當您確定模型頁面上的元素佈局時，請務必考慮分區域。提醒一下，分區使用視覺障礙來保持設計整潔有序。換句話說，線條或顏色等障礙有助於將內容限制在設計的特定部分。

四種包含方法：分隔線、邊框、填充和陰影。

創建分隔線

分隔線是分隔設計中內容部分的單行。分隔符可以是簡單而有效的工具，用於快速分解不屬於一起的內容。

添加邊框

邊框是形成形狀（如矩形）的連續線條，用於分隔頁面的各個部分。邊框通常圍繞特定的設計元素或重要文字形成。添加邊框可以區分設計中的內容。

了解更多： Figma 有關如何應用和調整筆觸屬性的這篇文章。

選擇填充

填充將顏色分配給設計中的對象。您選擇的顏色將填充設計元素，使內容在您的頁面上脫穎而出。

在 igma 幫助中心：了解有關向元素添加填充的更多信息。

應用陰影

創建陰影尺寸，尤其是與邊框或填充結合使用時。有兩種不同類型的陰影：投影和內陰影。

陰影直接來自元素，可以向任何方向移動。陰影非常適合讓按鈕感覺像是離開了頁面。
內部陰影向內移動到元素上。內部陰影是顯示按鈕被按下的好方法。

使用陰影的詳情：如何在 Figma 幫助部分中添加陰影或模糊效果的文章。

在模型中使用負空間（留白）Negative space

除了顏色、線條和文本之外，利用空間是使您的設計具有視覺吸引力和易於閱讀的重要方式。留白是設計中元素之間的間隙或未被佔用的空間。

許多用戶體驗設計師更喜歡負空間這個詞，因為設計的背景並不總是白色的，設計中的空白空間將反映背景顏色。

在下圖中查看 Google 搜索主頁如何使用負空間。頁面上最大的元素是帶有 Google 徽標和搜索欄的 Google Doodle。頁面頂部有一些小鏈接，但大部分頁面都是留白。這種簡潔的設計使頁面具有視覺吸引力，並將他們的注意力吸引到他們需要與之交互以滿足其需求的頁面部分，即搜索欄。

負空間的重要性

為什麼在創建模型時考慮負空間如此重要？

使用留白來表示元素是否相關。如果兩個對像在頁面上靠得很近，它們之間沒有負空間，那麼它們將被認為是相關的。此概念基於格式塔接近原則。接近意味著靠近的元素看起來比相距很遠的元素更相關。在你的模型中，仔細使用負空間來表明你的設計元素是相關的還是不相關的。
負空間提請注意重要元素。用戶的注意力通常很短！如果頁面或屏幕上的信息不易掃描，您將很快失去用戶的注意力。使用負空間是幫助用戶專注於他們打開頁面或應用程序的原因的一種方法。例如，在您的移動應用程序設計中在按鈕周圍使用負空間將幫助用戶專注於最重要的操作，即單擊按鈕。
負空間給用戶視覺上的休息。負空間有助於防止用戶不知所措或分心。設計中的負數或空白可以在用戶掃描內容時為他們提供視覺上的休息。
負間距增加了可讀性。您可能已經遇到過在整個頁面上宣傳商品的在線銷售。該頁面通常非常豐富多彩，有很多信息可供篩選，包括價格和描述。像這樣的廣告往往不會包含太多的負面空間，這會使信息顯得壓倒性且難以閱讀。相反，您可以在模型中使用負空間，使文本一目了然。

在設計中使用負空間

在模型中創建負空間。行距、填充和邊距是有效使用空白的常用方法。

行間距是兩段文本之間的垂直間距。想想看書：段落中句子之間的負空間可以防止字母重疊並使內容易於閱讀。設計也是如此。
內邊距是內容周圍或邊框與設計元素之間的負空間。在用戶移動到查看設計的另一個元素之前，填充為對象提供了存在空間。在上圖中，dog walker 應用程序中的填充為設計提供了對稱性，並防止元素擁擠在一起。
邊距是設計邊界之外的空間。您可以將邊距視為讓您在設計的線條之間保持著色的一種方式。在上圖中，您會注意到設計的邊緣被邊距包圍。

應用你的學習

在設計元素之間使用負空間將有助於創造更好的用戶體驗，並可以產生一個乾淨、優雅的設計，吸引用戶的注意力。
了解更多關於使用負空間：
請觀看這個真實設計師的視頻如何使用負空間來提高對象的可讀性。

應用程序中的常見設計模式

了解現有 App 中常使用的佈局和模式會很有幫助。了解這些佈局有助於啟動您的視覺設計過程、節省您的時間並改進您的設計工作。

移動應用程序 App 中的常見頁面

有些 App 之間的佈局和外觀可能不同，但它們都有相同的目的和設計考慮。以下是一些最常見的移動應用程序屏幕類型。

主頁
主頁是用戶打開 App 時遇到的第一個首頁，顯示主要內容和功能，並作為用戶進一步探索的起點。
由於主頁必須讓用戶知道 App 提供什麼，因此內容需要易於理解、使用和導航。常見的導航元素，如底部導航菜單和搜索圖標，使應用程序的上手變得容易，因為它們為許多用戶所熟悉。
大量內容填充主屏幕可能很誘人，但這會給用戶帶來混亂和壓倒性的體驗。專注於基本內容 — — 並充分利用空白空間 — — 使主屏幕更易於使用。
引導頁面 Onboarding screens
引導頁面向初次使用的用戶介紹 App 的主要組件和功能，可幫助用戶快速入門，尤其是當 App 具有獨特或不熟悉的功能時。還可以收集信息以創建更加個性化的用戶體驗。當涉及到這些屏幕時，設計師有很多選擇，因此它們應該根據特定 App 的體驗進行定制。
良好的引導頁面可以提高用戶參與度和保留率。但是因為它們通常由多個屏幕組成，所以它們需要易於導航。設計師可以通過使用清晰、簡潔的文字和引人入勝的圖形來最大程度地減少流失，從而創造出無縫且令人難忘的體驗。
個人資料/帳戶頁面
個人資料或帳戶頁面包含用戶的個人詳細信息（如姓名和電子郵件）及其應用偏好（如訂單歷史記錄和可訪問性設置）。個人資料屏幕包含許多重要信息，應組織清晰且易於瀏覽。最好是盡可能簡單和乾淨。
結帳頁面
結帳頁面是用戶完成購買的地方。結帳可能比 App 的其他部分更複雜，因為它通常涉及一些付款和運送信息表格。此步驟可能會帶來壓力，盡可能讓用戶感到安全很重要。設計師可通過明確標題顯示輸入框需要哪些信息並添加視覺提示輸入框已正確填寫來提供幫助。還可以讓用戶知道個人數據是安全的，並在用戶成功完成購買時包含確認消息。
關鍵要點
越能將好的設計融入到你的線框圖中，設計過程的其餘部分就越容易。
您將節省時間和精力，留出空間來測試您的設計理念。

常見的 App 佈局示例：

UX Collective 的了解13 種基本的移動 UI 模式：例如啟動頁面、登錄頁面和統計頁面（您可能需要訂閱才能訪問該文章）。

不同內容的 App 佈局：

羅勒（食譜）
貓頭鷹和雙周刊（新聞內容）
起重機和拉力賽（分析）
神社（電子商務）
回复（社交媒體）

使 App 的組件適應不同環境的一般信息：

About Material Studies頁面。

在模型中運用強調

滿足用戶需求的設計始終是用戶體驗設計的目標。
強調：確保用戶理解並找到設計的重要領域的方法，表示一個對像或元素正在引起注意。當設計的一部分具有重點時，或用戶查看 App 頁面和網頁時，他們的眼睛就會被吸引到那裡。有幾種方法可以強調您的設計。

尺寸

在設計中實現元素大小的更改是一種簡單的方法，可以通過將用戶的注意力吸引到更大的物件上來強調用戶，同時傳達一個物件比另一個物件更重要。

大小的一個很好的例子是 App 設計中的可見文字。使用較大尺寸的頁面標題，如下圖中的“ watermelon 西瓜”，有助於定位用戶。該頁面名稱應該比該頁面上的其余文字更大或更粗，以顯示該特定文字的重要性。

對比

對比是創建相反的視覺元素來傳達強調或比較，是強調設計中不同或重要元素的好方法。下圖中，結帳購物車和“訂單”按鈕為亮紅色和紫色，與原本的白色和灰色應用程序形成鮮明對比。

您還可以通過更改文字的外觀來提供對比度。有幾種方法可以為文本添加對比度，例如加粗、添加顏色、下劃線、斜體和突出顯示用戶應該注意的重要信息。

紋理

紋理是物件中為對象增加深度或圖案的元素。紋理可以使一個對像在設計中從其他對像中脫穎而出，應謹慎使用以吸引用戶的目光。

在重複使用的圖像上放置線條或形狀。添加紋理可以中斷同一圖像的模式，並為用戶提供一些可以交互的東西。例如，如果您正在設計一個頁面來向用戶顯示有關您的品牌的信息，如下面 App 圖像中所示，添加紋理是增加重點並將用戶的眼睛吸引到設計的好方法。在圖中，“80% 的購物者”由餅圖的圓點部分錶示。最重要的部分是用紋理強調的。

強調真實世界

從 Google 的 About 頁面查看這個設計示例，它展示了強調的有效使用。谷歌的使命宣言使用顏色對比來抓住用戶的注意力，一目了然地強調公司使命的要點。

頁面的設計幫助用戶同時識別兩件重要的事情：

了解 Google 使命宣言的重要性，在白色背景上使用易於閱讀的黑色字體，不會分散讀者與頁面交互的注意力。
顏色對比突出了 Google 的品牌支柱，即使命宣言中最重要的領域。

這些設計選擇增加了重點，並有助於將用戶的注意力引導到頁面上的特定區域。

在您設計時，請考慮用戶為何會訪問您的網站或使用您的應用程序。通過將重點添加到頁面或屏幕上的某個位置，用戶不必費力地尋找他們需要的東西。這有助於用戶在與產品交互時獲得更好的體驗。

其他資源

增加重點有助於使設計在視覺上更有吸引力，對用戶來說更實用。
了解更多關於在您的設計中融入重點的信息：

了解可增加設計重點的更多方式，
Interaction Design Foundation 強調：設置設計的焦點。著眼於在您的設計中創建視覺焦點的機制。
設計原則將成為您在整個 UX 設計師職業生涯中使用的工具箱。
Toptal撰寫的《分解設計原則》一文引用了許多不同類型的設計原則，請牢記。

在模型中使用層次結構

設計中使用層次結構的主要目標是引導用戶。幫助用戶知道首先關注哪里及採取什麼行動。

上圖可直觀地了解層次結構的工作原理，對信息進行分組。
將信息視為一個巨大的矩形，層次結構使該信息從最重要到最不重要進行解析。

層次結構與強調不同，它是一組元素來引導用戶的注意力，而不是關注某個特定元素的重要性。

使用層次結構對於在邏輯分組中安排信息很重要，有助於用戶找到他們需要的信息並按重要性順序強調元素。
層次結構還可以幫助用戶避免對信息感到困惑和不知所措。

在設計中實施層次結構

創建一個設計時，對用戶來說最重要的信息應該放在第一位。
關注重要性的順序可以為用戶提供他們真正需要的東西，而不會讓他們對使用產品的體驗感到沮喪。

為了在設計中最好地加入層次結構，請關注您希望用戶在與產品交互時實現的主要目標。如主要目標是讓他們登錄到您的網站並與之交互，那麼層次結構應該從指向您的網站登錄或註冊頁面的清晰鏈接開始。

一旦知道主要和次要目標，就可以組織設計層次結構。
手機上 Google Opinion Rewards 的這兩種設計：

右側的設計顯示 Google Rewards App 的一個版本，它缺乏對用戶重要信息領域的任何強調。字體很小，用戶的視線沒有固定的路徑。用戶不知道首先關注哪里或者在這個屏幕上採取什麼行動，這使得它的用戶體驗很差。

左側的設計顯示 App 的當前版本，更易於閱讀和導航。添加層次結構在 App設計中創造了重點。使用更大、更粗的文字和顏色會引起對用戶獲得的獎勵的關注，並清楚地表明用戶應該知道哪些信息退出此 App 。

幫助使用輔助技術的人

對於依賴輔助技術（如螢幕閱讀器）的用戶來說，清晰的層次結構也是必要的。當您使用內容、圖像和元素填充您的設計時，App 的每個頁面都會變得更加複雜。

這種複雜性可能使屏幕閱讀器軟件難以在屏幕上遵循正確的流程，也使用戶難以理解您的界面佈局。層次結構有助於引導螢幕閱讀器按照您希望閱讀的順序在您的設計中獲取信息。下面是一個屏幕閱讀器在 Google 搜索上閱讀標題的示例。

在螢幕閱讀器框中，您可以看到正在閱讀的每個標題如何與 Google 搜索頁面中的區域相對應。如果這些標題不按順序排列，需要螢幕閱讀器的用戶就會對它們在頁面上的位置感到困惑。
內容標題的級別對信息分辨階級來說很重要，並支持設計的信息架構，有助於用戶導航和理解。

逐頁清晰地組織設計佈局，將向工程師傳達佈局的目標，並將為所有用戶提供如何與您的設計交互的期望 — 讓他們保持快樂和參與。

組織是關鍵

使用層次結構組織設計可改善產品的用戶體驗。在處理每個頁面的層次結構時，請牢記可訪問性，將使每個人的用戶旅程變得更好。
在製作模型時，從最重要到最不重要的範圍內考慮設計中每個區域的重要性。把最重要的信息放在第一位。

Tips：在設計時，頁面的層次結構可能會根據從用戶和利益相關者收到的反饋而改變。

建立你的層次結構

詳細了解在設計中添加層次結構的重要性：

Mockplus 的文章 Golden Tips and Examples to Create Visual Hierarchy in Website Design 開始創建有效的視覺層次結構的旅程。
層次結構的運作如何可視化表示，閱讀交互設計基金會的文章，確保理解基本問題：什麼是視覺層次結構？
層次結構對於設計可供所有用戶訪問的產品至關重要。
有關包容性設計的文章：UX Collective 的 A 代表可訪問性 — 設計包容性用戶體驗的 12 個重要技巧。

在模型中使用比例和比重 scale and proportion

比例和比重是可戰略性地將設計概念融入您的模型中，以幫助設計在視覺上令人愉悅並吸引用戶的注意力。

比例 scale 是一個概念，用於解釋既定元素與設計中其他元素之間的大小關係。比重 proportion 是關於被縮放的元素之間的平衡或和諧。

UX 設計師經常使用：比例 scale 來使設計中最重要的元素比不太重要的元素更大，這有助於創造強調和對比。比重 proportion有助於 UX 設計師確保元素之間的大小關係是有意義的，並且屏幕上的元素相互平衡。

在您的設計中實現比例尺 scale

比例尺 Scale 用於引起對元素的關注並幫助用戶更快地找到這些元素。
它們還可以幫助用戶了解相對大小。如賣家將耳環的圖片貼在一個常見的物體旁邊，比例分之一，你就會對尺寸有所了解。如下圖，並注意將一件事與另一件事進行比較如何幫助澄清規模。

或下圖 Google TV App 中的比例原則。
頂部的圖片 “ Love and Monsters ”，比它下面的一排電影 “ Top picks for you ” 更寬更大。此設計中使用的比例 scale 首先將用戶的注意力吸引到精選電影（頂部）上。

在你的設計中使用比重 Proportion

比重是關於物件如何相互關聯的。
如人們覺得小丑很有趣的一件事是他們鞋子的尺碼。他們的鞋子與小丑的身材不成比例。霸王龍的手臂對於它們巨大的身體來說有多小，使得它們難以完成基本的（人類）任務。霸王龍的手臂與其身體的大小不成比例。

用戶體驗設計師如何在現實中使用比重？查看下圖，了解 Google TV App 不同頁面上的比重範例。在 “ Romance TV shows ” 和 “ Mystery TV shows ” 的類別下，圖像是大小相同的圓角正方形。但在名為 “ Popular family films ” 的類別下，圖像是垂直矩形，而不是正方形。這種微妙的比例變化突出了類別之間的差異：是否屬於 “ family friendly ” 的類別。在設計中，您可能會發現像這樣的細微比例差異很容易讓用戶接受，同時仍然保持您的設計看起來乾淨。

為您的用戶創造平衡

UX Planet 的文章，了解黃金比例及如何在設計中利用比例優勢：
黃金比例：在 UI 設計中帶來平衡

在模型中使用統一性和多樣性

運用統一和多樣性的概念融入設計中，保持用戶的注意力並提高對產品的參與度。

統一性 Unity：衡量設計元素如何協同運作以創建統一的設計理念。
多樣性 Variety：使設計中的元素多樣化，以打破單調並創造視覺趣味。

用戶體驗設計師可使用統一性原則來整合不同元素。（這是還行的 UI 設計和驚人的 UI 設計之間的區別。）使用多樣性允許設計師使用不同但相似的元素來吸引用戶的注意力。
相似對於 UX 設計師來說是一個很好的工具，但是太多相似類型會使用戶筋疲力盡，並導致他們脫離產品。

統一性 Unity

統一性 Unity 是將所有元素結合在一起，實現您為產品設計建立的目標而幫助用戶的方式。
考慮在整個產品中使用統一性：

元素如何相互對齊
元素的形狀
文本元素內的連續性

下圖 YouTube Music 應用的元素中看到突出顯示的內容：

元素如何相互對齊

元素在 App 中佔用空間的方式與設計本身一樣重要。如查看左側突出顯示的示例， YouTube Music App 顯示影片和最愛。影片是佔據整個頁面寬度的矩形，而最愛是具有不同寬度的圓圈。App 上的紅色框大小相同，顯示這些元素彼此對齊不是因為形狀，而是因為它們在頁面上佔據的空間大小一致。

元素的形狀

在第二個螢幕上播放列表框具有相同的比例、比例和大小。紅色方塊的大小也都是一樣的。App 的這個頁面上有許多不同的原則，但盒子設計感覺乾淨、有條理且易於導航。

文本元素內的連續性

第三個也是最右邊圖形中，有兩種文字元素類型：章節標題和描述。章節標題具有相同的顏色、字體和對齊方式。描述也共享相同的顏色、字體和對齊方式，即使描述長於描述的允許空間也是。這些選擇都有助於保持 App 流程統一。每個元素、文字，都有固定位置，它永遠不會超出空間。

將統一應用於您的模型

考慮產品設計中的統一性時，請創建的目標陳述。
產品的每一個元素是否實現這個目標的？若否定則需重新考慮設計中元素的用途。

多樣性 Variety

用戶對設計的興趣通常取決於您向他們展示元素的程度。
作為 UX 設計師，可能會從事令人興奮的項目，但也可能會從事普通（或無聊）產品。了解多樣性如何改善用戶與產品交互的方式非常重要。

Google Photos App 提供了一種解決方案，可在其設計中實現多樣性。

注意上面圖片大小的多樣性。Google Photos 的設計師原本可以選擇在整個照片集中保留代表圖像的典型正方形網格。但設計師讓一些圖像保持其原始尺寸為矩形。這些矩形以美觀的方式穿插在方形圖像中。圖像中的這種多樣性使用戶與 App 保持互動。

將多樣性應用於您的模型

成為一名成功的用戶體驗設計師的一部分是找到讓用戶對產品感到興奮的方法。即使產品不是很令人興奮。將一些變化應用到元素上可大大有助於讓用戶對您創建的設計感興趣。模型中有哪些地方過於重複？想想在多樣性方面學到的，並嘗試一些不同的東西。

考慮您的整體產品設計

在設計過程的初期考慮統一性和多樣性等原則是一個好主意。在產品中融入這些概念可以幫助您創建真正引人入勝的產品，確保用戶繼續與您的產品設計進行交互。

了解統一性背後的原理，如何在平面設計中發揮作用及如何應用到設計中， DesignMantic 的視頻：什麼是統一性 Unity？
UX Collective 的文章，了解 UX 設計師如何意識到多樣性可改善產品設計：多樣性：設計之鹽。

考慮額外的視覺設計元素和原則

探討使用色值、飽和度和方向等視覺元素來增強用戶體驗。
隨著繼續開發高保真設計，將更關注視覺、美學和功能。

色值 Value

色調 Hue：是顏色系列（如紅色、綠色或藍色）
色值 Value：是顏色的明度或暗度。任何顏色的最亮值是白色，最暗的是黑色，如上圖。色值是在您的設計中創造對比的關鍵。如具有較低色值的顏色在深色背景下突出，使設計更容易看到。

飽和度 Saturation

飽和度：顏色的強度和豐富度。將最高飽和度視為顏色的最純粹形式。
如最飽和的紅色是大膽而明亮的。通過降低飽和度使其顯得更加柔和來柔化純紅色。一直降低飽和度會留下灰色陰影，就像黑白電影一樣。

飽和度選擇取決於您希望設計中的顏色有多大膽。高度飽和的顏色非常適合吸引用戶的注意力。如霓虹燈、螢光筆和警報器— 這些都使用強烈的飽和度來強調它們的重要性。

方向 Orientation

方向 Orientation：設計的佈局。方向通常與設計的平台或設備相對應。如桌上電腦往往是水平（或橫向）方向，而手機和平板允許用戶在垂直（或縱向）和水平方向之間交替。

有些設備不是水平或垂直定向的。如智能手錶通常是方形的，因此智能手錶 App 設計師需要考慮到這一點。可將方向視為幫助您規劃設計以適應不同形狀的網頁。

內在興趣 Intrinsic interest

內在興趣 Intrinsic interest ：視覺元素對用戶的吸引力。
某些設計元素，如徽標或動畫，旨在吸引用戶的注意力。如上圖中，章節標題大而粗，吸引了讀者的注意力。內文的文字更小，更易讀。

圖像左側的圖形使用了顏色、比例和構圖的變化，這使得它比章節標題更加突出。漏斗的圖像也有助於吸引用戶的注意力，圖像通常比文字更引人注目。

確保最重要的元素脫穎而出— 以及最不重要的元素融入其中來利用對設計的內在興趣。如許多雜誌使用襯線字體作為文章標題，使用無襯線字體作為正文。襯線為標題添加風格，與其他內容區分開來。

感知的物理重量 Perceived physical weight

感知的物理重量：每個視覺元素所傳達的重量和體積的錯覺。在創建模型具有物理重量的物件元素時，每個元素的尺寸與其他元素成比例地相關。

在上圖，從量杯到牛奶罐，每個容器似乎都裝有不同體積的液體。
容器的相對尺寸範圍從小而輕到大而重。是單人份和多人份的區別。

豐富用戶的旅程

選擇不同的視覺元素可以讓你創造出更有趣、更吸引人、更實用的設計。
每個元素都可以豐富用戶與產品的交互與體驗。

有關元素和其他設計選擇：交互設計基金會的設計原則的這篇文章。
Springboard 的文章探討：16 條重要的新手 UX 設計原則。
成功設計的基礎知識：Adobe 的 UI 設計的 4 條黃金法則。
Usability.gov ：用戶界面設計基礎知識供您在設計時牢記。

了解界面設計原則 interface design principles

在模型中使用視覺設計原則（強調、層次、比例和比重、統一和多樣性以及格式塔原則）的知識。
設計的最終目標是為您的用戶創建可用的體驗。
精心設計的 UI 支持更好的用戶導航，可改善用戶在產品中的流程。
在設計時牢記 UI 的可用性：

Adobe 文章了解有助於創建成功 UI 設計的基本原則：
UI 設計的 4 條黃金法則。
Usability.gov 的文章中有很好的 UI 設計基礎知識列表，及在設計時應該牢記的最佳實踐列表：用戶界面設計基礎知識。

在模型中包含導航

創建模型時還需要考慮一件事：幫助用戶瀏覽應用程序的導航。
使用簡單、直觀的導航系統設計產品對於提供良好的用戶體驗至關重要。

導航類型

在設計中使用幾種常見的導航類型：導航欄、標籤欄、導航菜單和導航中心。

導航欄 Navigation bar

導航欄：在螢幕一個區域的單欄位中顯示指向產品最重要頁面的導航鏈接。根據設計，此條可以是水平的或垂直的。導航欄很容易找到，讓用戶清楚地看到他們可與之交互的網站的所有區域。可幫助用戶準確地到達他們想去的地方。對於像作品集這樣的網站，一個簡單的導航欄供潛在雇主瀏覽會更有益。
在上圖，來自 Googler Lisa 的 Lucere App，導航欄沿著屏幕頂部運行，便於導航，並清楚地表明用戶可以從導航欄中選擇哪些頁面。
要查看 Lisa 使用的設計流程，請訪問她的作品集網站。

The Creative Momentum 的文章，最有效的導航欄所需的重要信息：設計理想的導航欄

標籤欄 Tab bar

標籤欄 Tab bar 與導航欄非常相似，但它們將頁面鏈接顯示為可以單擊和關閉的選項卡。標籤欄可以是圖標，也可以是文字，也可以兩者都有。標籤欄是整理內容並使用戶與網站上的內容保持互動的好方法。
在上圖，Googler Kartik 的 Google Clock App 設計，標籤欄沿著屏幕頂部運行。每個選項都會在 App 的該區域內更改，但不會更改 App 的主頁面。用戶可以根據名稱和圖標下方的突出顯示和下劃線知道他們所在的標籤。要了解 Kartik 如何構建此設計，請訪問他的作品集網站。

導航菜單 Navigation menu

導航菜單：當用戶單擊屏幕邊緣的三行圖標時出現的菜單。這些有時被稱為“隱藏”菜單（因為它們可以再次隱藏起來）或“漢堡”菜單（因為它們的形狀）。這些菜單通常位於屏幕的左上角或右上角，便於用戶快速定位。它們還通過“隱藏”菜單的細節直到用戶點擊打開它，使頁面看起來更具視覺吸引力。導航菜單是展示您想要包含的所有鏈接的好方法，而無需使它們適合您的設計。如 Google 員工 Andrew 的作品集網站設計 Halo 中，導航菜單提供了指向其網站所有重要區域的鏈接，而不必擔心將這九個鏈接放入設計本身。訪問他的作品集網站。

連結是 Enginess 的資源，解釋了導航菜單的優點和缺點、如何及何時放在產品中：移動和網頁設計中的隱藏菜單。

導航中心 Navigation hub

導航中心：在網站主頁上顯示一組鏈接。用戶通常必須返回主頁才能更改頁面。有助於一次減少頁面上的內容量。每個頁面上通常都有一個可見的返回按鈕，可將您帶回到所有導航鏈接所在的主頁。如果您的設計沒有很多頁面，導航中心可能是您的理想選擇，但若您的用戶需要執行多項任務並從一個頁面移動到另一個頁面，導航中心可能不是最佳選擇。
在谷歌同方的作品集網站上，每個頁面只有幾個選項可供查看，然後用戶必須返回主頁連結其它頁面。

導航設計元素

導航組織信息，以便用戶可以與產品的其他部分進行交互。導
航設計由按鈕和圖標等元素組成，為用戶創建了一條清晰、簡單的路徑，以便他們實現目標。

按鈕：可以設計成完整按鈕或可點擊的元素，如文字或圖標。
按鈕可能會被動畫化以看起來可點擊或在它們下方有一條線以顯示它們的交互性。
圖標：圖標就像大腦的視覺快捷方式。常見的圖標包括代表電子郵件收件箱的信封圖標、將用戶帶到主頁的房屋圖標或將用戶帶到社交媒體頁面的社交媒體網站的圖標。

導航元素被認為是可供性 affordances 。
可供性 affordance 是界面內物件用途的視覺提示。
他們通過提供有關其文字的提示來 “ 提供 ” 您執行操作的機會。
可供性是創建有效導航的重要組成部分。如按鈕只是頁面上的文字，則用戶需要某種啟示才能知道該文字是交互式的。

有關可供性的更多信息：UX Planet 的如何在用戶界面中使用可供性。

以下是導航的附加資源：

有關導航世界的全面、深入的指南，請參閱 JustinMind 的文章：導航設計：您需要了解的幾乎所有內容。
很難判斷哪種導航設計適合您的產品，UX Booth 的文章，列出了一些很好的指導原則：現代導航規則。

探索流行的設計系統

設計系統是一系列可重複使用的元素和指南，使團隊按照預定標准設計和開發產品。UX 設計師利用設計系統來提高工作的速度和一致性。
設計系統可以幫助新手更好地了解設計中的最佳實踐，並且可以顯著提高您自己設計工作的質量。

探索設計系統，可查看 App 或網站時遇到的一些流行示例：

從設計系統中獲取靈感

UX 設計師創造令人驚嘆的視覺效果對於吸引用戶、保持產品的一致性和建立品牌至關重要。
某些視覺元素使該產品的品牌可以立即識別，甚至可能吸引您購買。
產品上的設計可能有標誌性字體、獨特的調色板或巧妙的圖標。
公司努力創建智能設計和可以應用於所有產品的完整設計系統。

設計系統是一系列可重複使用的元素，允許團隊按照預定標准設計和開發產品。設計系統是公司產品的視覺基礎，是吸引用戶的關鍵。
設計系統是保持設計和產品之間一致性的好方法。

下面是虛構的藝術雜誌 Artniche 的基本設計系統的圖像。
設計系統概述了 Artniche 使用的設計元素，如排版、顏色和按鈕。
排版和調色板在雜誌的 App 和網站中使用，確保一致性並使設計更容易。

設計系統中包含的元素數量取決於您，且取決於產品目標。
要記住的重要一點是，創建設計系統來概述使用的設計元素是創建品牌和產品一致性的最佳方式，並可為設計師節省大量時間。
設計系統塑造了產品背後的世界。

設計系統的真實示例

Google 的設計系統，稱為Material Design，適用於所有產品，從 Google Search 到 Gmail 再到 Android。
材料廣泛可用，您可在設計中免費借用。
可下載基線 UI 工具包，在 Figma 上用於你自己的設計。

在 Figma 中查找和導入設計系統，請轉到社區部分並滾動瀏覽選項。

在作品集中展示設計系統

Google UX 設計師 Dane 為一個班級項目共同創建了一個名為 Pocket 的應用程序。在 Dane 的作品集案例研究中，他包含了有關產品設計系統的詳細信息，例如排版、圖標和按鈕，如下圖所示：

作品集裡應該在每個案例研究中記錄您的設計選擇。
無論您是創建一個包含大量元素的綜合設計系統，還是簡單地勾勒出您經常使用的圖標和顏色，包括一個設計系統都是突出您的創意選擇和豐富您的作品集的好方法。

了解更多信息，來自 DesignerUp ：10 個最佳設計系統以及如何從中學習（和竊取）的資源。

設計評論會議

設計評論會議是用戶體驗設計師向團隊成員展示他們的工作並聽取反饋的計劃時期。
在評論期間，團隊聚集在一起探索設計的新想法和可能的方向。這些都是提前計劃好的議程和設定的目標，您將有時間準備並提出新的想法。無論是面對面還是虛擬聚會，都可以建立融洽的關係並鼓勵團隊之間的協作。

設計評論角色

設計評論會議由三組參與者組成：

主持人 Facilitator
演示者 Presenter
審閱者 Reviewer

促進者 Facilitator

主持人 Facilitator：負責運行評論會議並指導反饋過程。他們可以控制時間並為會議創建議程和目標。

主持人負責確保會議中的每個人都參與進來並分享他們的想法。無論是因為個人的個性特徵還是群體的偏見，主持人確保每個人都有機會分享。並非所有的設計評論都包括一個引導者，但在許多情況下，尤其是在與一個大型團隊合作時，主持人可能會很有幫助。

演示者 Presenter：是設計師，在整個會議期間與團隊分享他們的工作。
也可能是一群一起工作的設計師。他們可能會直接從 Figma 或 Adobe XD 共享他們的設計，如螢幕共享，或可能會在 Google 幻燈片或 Microsoft PowerPoint 中使用他們的設計圖像創建展示文稿。作為設計師，您經常會扮演展示者的角色。確保您在會議中與其他人互動，並準備提出問題並提供反饋。

審閱者 Reviewer：對所展示的設計以及改進設計所需的步驟提供反饋。通常有多個審閱者和多個評論會議從不同的角度看待設計。

記錄者 notetaker：記錄想法並跟踪所有反饋，以便對話可以不間斷地進行。記筆記者可能會在數字文檔中記錄筆記，以便以後可以與整個小組共享筆記。

所有這些角色共同創造有效的解決方案來加強您的設計。在您的 UX 設計職業生涯中，您將有機會在評論會議中主持、展示和審查。

設計評論過程

設計評論可以採取多種形式，具體取決於所審查的工作和參與成員的數量。因為沒有一種“正確”的方式來進行評論，所以提前準備和計劃會議很重要。

通常，主持人通過回顧會議的目的和目的來開始會議。這些目標應該是明確的和特定時間的。如“我們需要在下週之前更新所有當前的模擬。” 然後，演示者分享他們的設計，在此期間審閱者開始準備他們的反饋並收集任何想法或問題。審閱者應該記下他們喜歡什麼以及他們希望在設計中改進什麼。

審閱者也應該花時間解釋這些反饋。然後，演示者將澄清反饋並指導每個人完成他們的設計過程。最後主持人通過解決會議中的問題或主題來結束。

評論會議的最佳實踐

在設計評論會議上進行演講時，準備是關鍵。這是您向同行展示您的作品的機會。確保你能講述你的設計故事。需要引導審閱者了解設計背後的想法，並解釋它們如何與產品目標保持一致：

你在為誰設計？
你想解決什麼問題？
您的設計如何解決或不解決這些問題？
你在設計過程中的哪個階段？
您在設計的哪些方面尋求反饋？

這些問題可以幫助您總結設計的核心方面，以便您可以更好地解釋它們。準備答案還將幫助審閱者為您提供更好的反饋。注意會話的長度。你需要足夠的時間來展示你的想法，與審稿人討論你的想法，並允許提出後續問題。
優化此過程的一種方法是在會議開始前與每個人分享您的設計，以便他們可以準備好與您討論他們的反饋

接收反饋

現場處理反饋可能會讓人不知所措，因此請不要猶豫，請審閱者解釋他們的想法。您還可以在會議結束後花時間計劃如何應用您在會議期間收到的反饋。

積極傾聽收到的每條評論。除非被要求這樣做，否則不要打斷審稿人或提供解釋。相反，專注於就他們的反饋提出問題，以掌握他們的觀點。
計劃讓一個記錄者記錄所有反饋，尤其是如果您知道這將是一個較長的會話。知道您以後會有筆記要查看，這將使您能夠專注於討論。

您負責您的設計，不必採納收到的每條建議；考慮一下否拒絕他人的反饋是因為您依附於當前版本的設計，還是因為您的想法實際上更適合用戶。

批評會議的價值

評論會議是提高您的設計技能並與您的隊友建立關係的好方法。
初級設計師，需要解決設計問題時，將有機會更加適應這個過程並拓寬您的視野。
請查看 Medium 上的文章：運行有效的設計評論。

探索手勢和動作的類型 gestures and motion

手勢 Gestures

手勢是用戶使用觸摸與設備上的信息進行交互的任何方法。
手勢描述了您如何使用手指或觸控筆與屏幕進行交互。常見的手勢包括：

滑動 Swipe：滑動是指用指尖或觸控筆在屏幕上水平或垂直進行的短暫移動。
如用戶經常從手機屏幕的右側向左滑動，以便在應用程序的屏幕之間移動。滑動也常用於與內容輪播進行交互。
點擊 Tap：是指尖或觸控筆對屏幕的短暫觸摸。可以從一個指尖到四個指尖自定義點擊。單指點擊通常用於選擇屏幕上的項目。用兩根手指輕敲可以作為快捷方式來顯示上下文菜單（也稱為右鍵選單）。
拖移 Drag：在屏幕上點擊並按住，在屏幕上移動指尖或觸控筆時繼續按下。如用戶可以拖動屏幕上的項目以將其移入和移出視圖。拖動通常用於手機上的主通知選單。
捏 Pinch：指兩根手指相互靠近或遠離的動作。捏合使用戶縮放屏幕上的項目，例如放大或縮小網站、地圖或照片。

了解手勢，請查看 Google 的 Material Design 的手勢動畫。

手勢和操作系統

Apple 的 iOS 和 Google 的 Android 在手勢設計理念上存在差異。

iOS 基於Human Interface Guidelines，簡稱 HIG
Android 基於Material Design。

HIG 和 Material Design 為設計人員和開發人員提供了用於特定操作系統的手勢指南。作為設計師，了解這些準則是我們的工作，因此我們可以創建易於使用並滿足用戶期望的設計。

如要撤消 Apple iOS 設備上的文字，請從屏幕右側向左滑動三指。
要撤消 Android 設備上的文字，請點住文字以選擇它，然後按刪除鍵。
這些是您在創建設計時需要考慮的重要差異。

動作 motion

動作 Motion是一種對靜態設計元素進行動畫處理以吸引用戶注意力並講述故事的方法。Motion 可以使應用程序和網站更具吸引力且更易於使用，
如將注意力吸引到網站的焦點或在您將其拖動關閉時看到菜單消失。

上圖中，若您有智能手機，您可能熟悉的動作示例。
如是 Apple iOS 設備，您可以長按某個應用圖標，這會使主屏幕上的所有應用進入“j iggle mode 抖動模式”，此時應用圖標會晃動，左側會出現一個減號— 手的角落。此動作讓用戶知道他們能夠編輯應用程序。

如是 Android 設備，則此動作要微妙得多。通過按住主屏幕上的應用程序圖標，將僅顯示該應用程序的選項菜單。應用程序圖標會輕微上下跳動，以提醒您正在編輯哪個應用程序的設置。這些是動作如何幫助用戶與他們正在使用的產品進行交互和理解的示例。

了解動作的更多信息：

Nielsen Norman Group的動畫和運動在 UX 中的作用
Motion Manifesto on Medium。

增強高保真原型的其他方法

聲音

聲音通過向用戶提供有關他們已採取的操作的反饋來增強可用性。它指示用戶在應用程序中的狀態，並幫助用戶了解他們下一步可以做什麼。

將聲音融入高保真設計可以讓用戶體驗更好，因為人類對聲音有情感反應。使用聲音使用戶交互更加人性化；好像應用程序正在以聲音響應所採取的操作。但是這些聲音應該增加或增強用戶對他們在流程中的位置或確認操作的理解，例如用戶點擊按鈕後的點擊聲音。當操作完成或不成功時，一種聲音可能會通知用戶，如上傳失敗或下載完成。

但如果被濫用，聲音也會分散注意力或不受歡迎。用戶在與設計交互時可能不想要聲音，因為這很煩人，或者他們處於需要靜音的位置。如用戶選擇不使用聲音，您應該讓他們關閉聲音變得簡單。

影片

影片增強了用戶的沉浸感，並在用戶與您的原型交互時引起他們的興趣。Netflix 的用戶體驗是視頻增強設計的一個很好的例子。當您打開 Netflix 時，將開始播放精選的電視節目或電影。此選擇通常針對您的觀看歷史進行個性化設置，並鼓勵您觀看您可能不知道或表示感興趣的內容。

在高保真原型中使用影片是立即吸引用戶注意力並將其集中在應用程序特定區域的一種方式。影片為原型增加了維度，並有助於吸引用戶的興趣。
加入影片後，用戶也更有可能使用應用程序或在網站上停留更長時間。

在您自己的設計中使用影片時，請確保用戶能夠調整音量、重播影片和停止。此外，如用戶對內容不感興趣，他們應該有機會將視頻自動靜音或停止影片自動重播。

使用影片和聲音也有助於支持用戶應對可訪問性挑戰。使用的任何視頻和聲音都應包括文字記錄和字幕，或替代通知，以便所有用戶都可以訪問。

創造更好的用戶體驗

在設計高保真原型時，考慮將與您的產品設計交互的不同類型的用戶。想想使用聲音和影片的可能優點和缺點。

請查看 Toptal.com 的資源，有關在 UI 設計中聲音建議：設計 UX 聲音的快速指南。
從 NNG 的文章10 Usability Heuristics For User Interface Design中詳細了解與聲音相關的一些原則以及如何使用它們來建立對您公司品牌的信任。
以下是來自 UX Planet的影片最佳實踐列表，更深入地探討了在將影片添加到設計時包含所有用戶的方法 — 包括那些具有可訪問需求的用戶。