本文我們將帶領同學們了解強調原則在設計中的重要性，以及你應該強調什么內容。

強調意味著吸引注意力的東西。想象一個公眾演講者正在演講，不強調任何一個單詞，或者一個鋼琴家在演奏歌曲時沒有強調任何音符，缺乏重點會分散聽眾的注意力，讓他們很難跟上。

同樣的想法也適用于視覺設計，我們用強調來有意地引導用戶到我們想讓他們注意的地方。那么如何在視覺設計中強調一些東西呢？

?

為了突出設計的一部分，你可以給它更多的視覺重量。視覺重量是一種元素對吸引眼球所施加的力的量度，使用尺寸、顏色或對比度等變量可以給元素更大的視覺權重。

?

上圖是由谷歌用戶體驗設計師Josh創(chuàng)造的模型，這個軟件可以幫助用戶追蹤香料、香草和調味料。模型設計相當簡單，但它使用了強調原則，通過使用空白和簡單的基礎字體讓用戶自然而然地被應用的主要內容所吸引，將目光放到姜黃等香料的圖像上，這些圖像很大，色彩豐富，視覺效果與周圍的文字和背景相比很突出。

?

當你決定要強調什么時，需要考慮的關鍵因素是，你想在哪里吸引用戶的注意？用戶的目標是什么？有策略地使用重點可以讓用戶更容易地完成任務，從而創(chuàng)造優(yōu)秀的用戶體驗。

看看遛狗程序上的預約界面，什么最引人注意，以及為什么。用橘色來突出Book Sarah按鈕，預約遛狗人是用戶旅程中最重要的步驟之一，所以相比About和客戶評價部分，它被更加強調出來。無論是醒目的橙色，還是比周圍內容大的按鈕，這些設計決策都是為了強調這個功能，并引導用戶采取行動。

01

|?設計中的層次原則

Hierarchy?principle?in?design

?

首先，定義層次結構。層次是一種視覺設計原則，對頁面上的元素進行排序，并強調它們的重要性，層次結構的目的是引導用戶，調整大小和顏色是在視覺設計中區(qū)分層次常用的方法。用戶體驗設計中的層次可以幫助用戶理解不同元素之間的相對重要性。

為了瀏覽新聞，你通常都會先看頭條，大多數人這樣做是為了快速了解每個故事的內容。標題是頁面上突出的元素，因為最重要，標題下面是故事的摘要，字體及其權重會更小，在這種情況下，排版在主頁上創(chuàng)建了層次結構。

我們?yōu)槭裁葱枰獙哟谓Y構呢？在用戶體驗設計中，我們總是想讓用戶明白首先應該關注哪里，采取什么行動。有了層次結構，信息越重要，我們就越應該讓它在視覺上突出。

這個頁面是預約的第二步的一部分：

?

文本“Select the dog walker”，在頁面的頂部排列這些文本表明它下面的大部分內容將包含關于這個過程的信息，將文本的大小調整得更大更清楚。

?

“Availability based on your date and time”比“Select the dog walker”要小，但比其他細節(jié)都重要，用戶會知道所有列出來的遛狗人都可以在當天預約到。

?

關于遛狗者的微妙設計向用戶表明了他們應該首先關注遛狗者的名字，然后再看其他細節(jié)。

層次結構還會影響用戶的可訪問性，就像屏幕閱讀器，通過在線框中使用可訪問性注釋，用戶將按層次順序讀取元素。

?

通過指示屏幕上的元素應該讀取的順序，可訪問性注釋創(chuàng)建了一個可視層次結構。此外，這些注釋還可以幫助用戶理解他們與每個元素交互的順序。

02

|?比例和尺度

Scale?and?proportion

尺度是用來解釋設計中給定元素與其他元素之間的大小關系，那么為什么尺度對用戶體驗設計很重要呢？

首先，操縱單個元素的大小，就像按鈕，這是一個創(chuàng)造強調的好方法。為了強調一個元素，你可以對這個元素使用縮放，讓它比周圍的元素都大，比如使用放大鏡可以立即擴大你對一個物體的視野，同樣，在你的設計中創(chuàng)造某些元素的大小變化，可以幫助你突出特定的區(qū)域。

另外，尺度還可以用來傳達視覺層次，例如在排版方面，我們很容易用不同的尺度來強調頁面上的內容。

?

對用戶體驗設計師來說，尺度和比例是非常密切相關的概念，但它們并不完全相同。

?

比例是指被縮放的元素之間的平衡或和諧。換句話說，比例有助于用戶體驗設計師確保元素之間的大小關系是有意義的，這意味著這些元素看起來是相互平衡的。如果你設計中的一個元素增大了尺寸，其他元素為了保持比例也會相應地增大。

?

那我們該如何確保設計中的比例是平衡的？一種方法是在更改特定元素的比例后查看頁面，確保設計的整體平衡仍然是正確的；另一種保持比例一致的方法是，在設計系統(tǒng)中包括設計的特定尺寸規(guī)格。

03

|?設計的統(tǒng)一和變化原則

Unity?and?variety?principles?in?design

一個統(tǒng)一的設計是令人賞心悅目的，讓用戶清楚，易于理解。統(tǒng)一可以通過使用一致的配色方案、互補的字體和一致的間距來實現。

?

另一個是多樣性，這是關于改變設計中的元素，以打破單調，使用不同的元素可以增加活力，有無數的方法可以在你的設計中融入多樣性，比如使用不同的形狀、顏色、紋理和圖案。

在低保真線框的初始階段，創(chuàng)造多樣性的統(tǒng)一不是重點。當你制作低保真線框時，你的按鈕和圖形通常只是黑白占位符。在這個階段，你更應該關注的是各種功能如何一起工作，而不是它們的外觀。

?

當你最終開始設計模型時，你可以關注于整個畫面，問自己是否以一致和有目的的方式使用顏色？使用的類型是否配合的很好？是否有足夠的多樣性來保持自己的設計有趣？

一個新聞媒體應用程序的大多數故事都會在白色背景上使用黑色文本，如果是有關于天氣的突發(fā)新聞報道，突破性的新故事背景可能會變成明亮的顏色，如紅色或黃色，將此變化添加到通知中有助于打破連貫性，并增加故事的緊迫性，這樣的多樣性元素幫助突發(fā)新聞脫穎而出，但它們之所以有效是因為其他故事的風格是統(tǒng)一的。

但多樣性不一定會影響統(tǒng)一，事實上多樣性和統(tǒng)一可以和諧地合作，就像太多的一致性會讓用戶很難知道該關注哪里，以及識別文本和重要信息。

統(tǒng)一性和多樣性的平衡結合可以在為用戶提供視覺提示的同時保持他們的注意力，你也要確保使用產品的視覺效果令人滿意。顏色、字體、形狀等的變化可以讓一切都不同，這種變化可以增加重點，引導用戶按下按鈕，或者將他們的注意力轉移到頁面的某一部分。但是要注意，太多的多樣性會降低和諧，并使它更難閱讀，關鍵是平衡。

04

|?格式塔原則

Gestalt?Principle

?

格式塔原則描述了當我們感知物體時，如何將相似的元素分組，識別模式，并簡化復雜的圖像。換句話說，人類的大腦會試圖簡化和組織復雜的圖像，通過下意識地將各個部分排列成一個連貫的整體。

格式塔原則幫助我們更好地理解我們所做的所有個人設計選擇是如何結合在一起的，以及用戶如何理解它們。格式塔原則也為設計師提供了一種退一步回顧的參考方法，設計師很容易沉迷于細節(jié)而忽視整體項目。格式塔原則可以讓我們真正注意到我們的設計元素如何協(xié)同工作，類似于我們如何使用多種視覺設計原則來創(chuàng)建重點。幾個格式塔原則可以應用于一個模型設計，同時建立視覺上的聯系。

我們主要介紹三種格式塔原則：相似性、鄰近性和共同區(qū)域。

?

相似性原理表明看起來相似的元素被認為具有相同的功能。換句話說，相似性集中在事物上以及用戶如何將這些項關聯起來。

?

遛狗軟件中使用的相似性原則：你會注意到橙色被用來表示動作，選中的遛狗人有復選標記。

用戶可以選擇的所有動作都使用了相同的顏色，即使打開應用的新界面，橙色仍然繼續(xù)指示用戶需要采取的行動。這是一個用顏色來組合我們所看到的東西的例子，你的大腦會自動將這些橙色元素組合在一起，因為它們是一樣的顏色，所以被認為具有相同的功能。

這張圖的下半部分是相似原理的另一個例子，每一個圓圈都代表一個用戶資料，所有的圓圈在頁面上都具有相同的視覺權重，無論用戶擁有頭像還是首字母縮寫，你的大腦會自動認為這些相似的形狀代表著相同的內容。

?

鄰近性即那些緊密結合的元素似乎比間隔較遠的元素更相關。

?

換句話說，人類將彼此接近的物體視為有聯系的。上圖是鄰近性的一個例子，字母或字符之間沒有間隔告訴你這些字母或字符組成了一個單詞，而這些字母或字符組之間和之后的空間，讓你知道一個新的單詞開始了。

?

遛狗程序也使用了鄰近性原則。當用戶正在安排和遛狗者的預定時，這個程序提供了用戶寵物的名字的橫向列表：Charlie、Broccoli、Rover......這些按鈕的緊密程度讓你知道它們是相關的。另一方面，與其他元素之間的間隔表示它們之間是不相關的。

?

還有共同區(qū)域原則，位于同一區(qū)域的元素被認為是組合在一起的。盡管它與鄰近性原則有關，共同區(qū)域的原則是不同的，因為它和元素之間的間隔關系不大，更多的是使用視覺元素來組成部分。

?

這個應用程序的模型由Google用戶體驗設計師Kaiway創(chuàng)造，名為Rostery，它的創(chuàng)立是為了幫助大學教授用簡單有趣的方式記住學生的臉和名字。在這個屏幕上，應用程序被分為三個部分，頂部的導航欄，記憶進度表和教授想記住的學生的名字，每個部分包含多個元素，如圖形、照片和文本。通過共同區(qū)域的原則，你的眼睛會自動將相同區(qū)域的內容分組在一起。在這個例子中，Kaiway為每一組元素添加了邊框，這是創(chuàng)建一個共同區(qū)域的簡單方法。

?

在遛狗程序中，在選定內容后面使用了藍色背景，創(chuàng)建了一個共同區(qū)域，用戶能夠快速識別藍色背景上的項目，而白色背景上的內容則作為未選中的項目。

格式塔原則的關鍵結論是我們應該了解大腦自然組織元素的方式，確保我們的設計行得通。

更多知識干貨以及其他海外留學的資訊可以關注UXD交互工業(yè)產品設計分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對于設計初學者，完成從0開始創(chuàng)作幾乎是不可能的，就像學習過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學們完成最初的設計想法積累，基于這樣的基礎再進行個性化的創(chuàng)作，最終才能做出高質量的作品集。全球院校最新作品集免費拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產品設計學院是尤克斯國際旗下的一家專注于交互、服務、工業(yè)、產品設計專業(yè)的頂級設計學院。除了一對一設計課、基礎技能課程、小組課題、設計評圖、聯合教學外，我們提供不定主題的公開課和內部小組課，教學計劃課程由三大部分組成，包括基礎軟件技能教學、設計理論系統(tǒng)講座、申請必備知識解析等。

本文版權歸UXD尤克斯所有

部分圖片來自于網絡

如有侵權請與我們聯系