ui和ux設(shè)計基本原理

　　UI與UX,如果您進行了有關(guān)軟件設(shè)計的任何類型的研究，您可能已經(jīng)聽說過“ UI”和“ UX”這兩個術(shù)語。
 

　　UI和UX的區(qū)別是什么?
 

　　以最簡單的形式UX設(shè)計是使界面有用的要素，UI設(shè)計是使界面美觀的要素。對于UI，這包括視覺層次結(jié)構(gòu)和界面元素的混合。要了解將好界面與好界面區(qū)分開的原因，必須了解UI設(shè)計僅僅是整個設(shè)計過程的一層。也許這就是為什么人們經(jīng)?；煜齍X和UI的原因。但是，在接下來的幾段中，我希望作為聽眾或讀者幫助您了解設(shè)計過程中差異之處。
 

　　根據(jù)Garrett在《用戶體驗的要素》中的介紹，可以從五個主要方面來理解UX。讓我們從最抽象的平面開始：
 

產(chǎn)品設(shè)計的第一平面
 

　　從較高的層次看，第一平面實際上是產(chǎn)品設(shè)計的起點。在這里，您將采用不同的研究方法，包括用戶訪談，競爭性分析，用戶角色和其他研究方法，以了解：
 

　　您要解決的問題是什么?
 

　　您的用戶需求是什么?
 

　　您的產(chǎn)品如何適應(yīng)業(yè)務(wù)環(huán)境(產(chǎn)品目標)?
 

　　第二架飛機：
 

產(chǎn)品設(shè)計第二平面
 

　　在此階段，您應(yīng)該定義平臺的功能規(guī)格和內(nèi)容要求。換一種說法：
 

　　您如何通過平臺解決問題?有哪些功能，您如何確定它們的優(yōu)先級?
 

　　設(shè)計人員面臨的挑戰(zhàn)是在優(yōu)先考慮功能的同時最大程度地權(quán)衡取舍。當然，您可能有數(shù)百個想法可以解決問題，但是您不能全部實現(xiàn)。
 

　　第三架飛機：
 

　　在此階段，您的想法應(yīng)開始形成結(jié)構(gòu)。信息架構(gòu)與應(yīng)用程序中信息的組織方式以及用戶如何認知地處理信息有關(guān)。用戶流可以勾勒出用戶通過該應(yīng)用程序進行的特定旅程，以幫助解決他們的特定需求。它涉及使您的用戶滿足其需求的最合乎邏輯的步驟。
 

　　下一個層面是事情變得不那么抽象，更具體的地方：

　　骨架平面試圖實現(xiàn)界面設(shè)計和信息設(shè)計的結(jié)構(gòu)。界面設(shè)計與特定界面元素的布置有關(guān)，以使用戶能夠與系統(tǒng)的功能進行交互，而信息設(shè)計與信息的呈現(xiàn)有關(guān)，從而有助于理解。
 

　　在此階段，您可能會發(fā)現(xiàn)UX或產(chǎn)品設(shè)計師在線框上進行設(shè)計，測試和迭代。線框的保真度非常低，通常是灰度模型，它們向用戶展示了每個界面元素的意圖。
 

　　最后，最具體的飛機：

　　顧名思義，水平面致力于獲得出色的感官體驗和視覺設(shè)計。設(shè)計師的目標是通過以一種凝聚力的形象成功傳達品牌，產(chǎn)品，價值和功能，與用戶建立內(nèi)在聯(lián)系。
 

　　在這架飛機上，您會發(fā)現(xiàn)UI設(shè)計師和視覺設(shè)計師使用諸如Sketch，Photoshop，Adobe Experience Design，Illustrator或Figma之類的工具來完成大部分工作。
 

　　接下來，讓我們進入UI設(shè)計的一些基本原理。
 

　　原則1：清晰至上。
 

　　沒有比應(yīng)用程序中的歧義更糟糕的了。該按鈕有什么作用?我怎么到這里了?我該如何回去?為了避免這種情況，設(shè)計人員應(yīng)始終問自己：
 

　　為什么在這里?這有意義嗎?我還能探索什么其他可能性?
 

　　優(yōu)秀的設(shè)計師知道如何探索界面布局的各種可能性，每種界面的潛在權(quán)衡，以及了解哪種設(shè)計可以幫助用戶最好地實現(xiàn)其目標。設(shè)計上的清晰度使用戶在瀏覽您的應(yīng)用程序時感到自信。
 

　　原則2：提供清晰，有意義的反饋
 

　　我們都使用了網(wǎng)站或應(yīng)用程序來嘗試單擊按鈕，并且我們想知道系統(tǒng)是否注冊了該點擊。
 

　　簡而言之，每個動作都需要一種反應(yīng)。例如，如果您是Web開發(fā)人員，則更改按鈕的：hover狀態(tài)是一種常見的反饋形式，它可以使您的用戶了解其懸停操作。

　　一個很好的例子是Facebook使用其骨架加載狀態(tài)。當用戶等待其內(nèi)容加載時，內(nèi)容形式的加載狀態(tài)會為用戶提供有意義且相關(guān)的反饋，以使用戶了解其內(nèi)容正在加載。
 

　　原則3：一致性很重要。
 

　　當提到一致性時，我指的是整個產(chǎn)品中界面元素或語言的一致性。用戶開始學(xué)習如何使用產(chǎn)品后，就不必重新學(xué)習它了。讓我們來看一個不良一致性的例子。
 

　
Xfinity主頁
 

Xfinity電視頁面
 

Xfinity個人頁面
 

　　上面的示例可能看起來像來自3家不同公司的3個網(wǎng)站，但實際上并非如此。是什么讓人們覺得呢?好吧，每個頁面的導(dǎo)航欄使用不同的顏色，布局和字體樣式集。作為用戶，這可能會造成混亂和迷惑，并且用戶可能會忘記這些都在一個網(wǎng)站下。
 

　　作為設(shè)計師，您如何在整個應(yīng)用程序中保持一致性?您可以使用一致的網(wǎng)格系統(tǒng)設(shè)計應(yīng)用程序，例如在移動應(yīng)用程序和圖標設(shè)計中找到的常見8點網(wǎng)格系統(tǒng)。您還可以在整個屏幕上保持一致的配色方案和導(dǎo)航元素。這些元素都可以植根于樣式指南中：

　　關(guān)鍵是：良好的一致性和結(jié)構(gòu)會讓您的用戶有賓至如歸的感覺。

　　原則4：如有疑問，請使用已建立的設(shè)計模式。

　　在這里請不要誤會我的意思，即創(chuàng)新是令人敬畏的，而且值得鼓勵，但創(chuàng)新不應(yīng)該以犧牲用戶體驗為代價。如果車輪在完成工作方面做得很好，則無需重新發(fā)明車輪。例如，如果您不確定圖標是準確還是直觀地表示一個單詞，則只需在該位置使用該單詞即可。或堅持常見的顏色模式，例如紅色陰影以警告/警告用戶，或綠色以標記完成。
 

　　為什么要使用既定的設(shè)計模式?好吧，其中之一，許多已確立的設(shè)計原則都基于人類的感知。在讀取內(nèi)容塊時，讓我們采用F形讀取模式或眼睛掃描模式。
 

F形閱讀模式。
 

　　這是根據(jù)從眼睛跟蹤實驗收集的數(shù)據(jù)生成的熱圖。紅色區(qū)域代表查看最多的部分，而藍色區(qū)域代表最少的部分。如您所見，生成的熱圖在某種程度上類似于字母F。但這對設(shè)計師意味著什么?
 

　　這意味著您應(yīng)該將最重要的內(nèi)容放在左上角。

　　例如，通常會在左上角找到徽標。這使公司可以加強其品牌形象。在右上角，您通?？赡軙业揭獙?dǎo)航的頁面，或者可能是搜索欄。這使用戶可以輕松導(dǎo)航不同的頁面，而無需在整個頁面中搜索導(dǎo)航元素。這是兩個遵循此設(shè)計模式的示例：
 

　　隨著您在頁面上越走越遠，用戶的注意力可能會枯竭。因此，將最重要的內(nèi)容放在頂部，并為用戶提供大膽的標題，以使您的內(nèi)容易于掃描。
 

　　原則5：使用視覺層次結(jié)構(gòu)。
 

　　什么是視覺層次?嗯，元素的排列方式暗示了相對重要性。這是設(shè)計師嘗試引導(dǎo)眼睛感知呈現(xiàn)的信息的順序。
 

　　我們感知信息的方式是通過促成幾個因素的影響如何，我們排名布局中的內(nèi)容的層次結(jié)構(gòu)。讓我們跳入一些層次結(jié)構(gòu)基礎(chǔ)知識：
 

　　一，版式
 

　　什么是好的排版?兩個主要因素是可讀性和移植性。
 

　　易讀性是一種字體的先天品質(zhì)，它使每個單獨的字母形式彼此區(qū)分開。這完全取決于字體，因此您無法做任何使字體更清晰的事情，因此請適當選擇。
 

　　可讀性取決于您如何操作特定字體以使其更易于理解。

　　注意頂部字體比底部字體難讀嗎?如果不…
 

　　現(xiàn)在呢?
 

　　決定某項內(nèi)容易于閱讀的另一個因素是行長。如果行太短，并且閱讀器不斷在行與行之間跳動，則閱讀器很難吸收信息。如果線長太長，也會發(fā)生同樣的情況-眼睛很快就會疲勞。
 

　　另外，切勿將大塊副本居中。對于我們來說，閱讀左對齊的文本塊要容易得多，因為眼睛可以準確知道下一行的開始位置。
 

　　二?？崭?又稱負空格)
 

　　有沒有人看過菜單/網(wǎng)站/界面，然后想到：“這看起來很棒，但我不確定為什么嗎?”現(xiàn)在好了。答案是空格?？瞻子兄跇O大地提高可讀性和理解力。一項研究(Lin，2004年)發(fā)現(xiàn)，在段落之間以及左右邊界處充分利用空白可以將理解力提高近20%。讀者發(fā)現(xiàn)更容易集中精力處理大量的內(nèi)容。
 

　　正空格=狗。負空間=目錄
 

　　許多人認為空白取決于“味道”。我認為這比這更客觀。我們可以有意地使用空白來創(chuàng)建強大的層次結(jié)構(gòu)。讓我們看一下Helen Tran的網(wǎng)站，以及她如何有意地使用空白：

　　請注意如何有4個清晰的內(nèi)容塊。讓我們進一步分解一下：

　　Helen使用行高，字體大小，顏色和空白的組合來分隔每個塊本身內(nèi)的內(nèi)容。這使用戶可以輕松自然地瀏覽這些內(nèi)容塊的各個部分。
 

　　三，顏色
 

　　顏色理論真的非常復(fù)雜。我的目標不是解釋顏色理論的全部，而是為您提供一些廣泛的概念，您也許可以立即在UI設(shè)計中加以利用。
 

　　如果您凝視上面的圖片，您會注意到左側(cè)的藍色方塊感覺更遠，而右側(cè)的紅色方塊感覺更近。暖色朝您身上，而冷色則逐漸淡入背景。讓我們在UI示例中看一下：
 

　　在上面的設(shè)計中，我們可以看到設(shè)計師如何使用暖紅色將號召性用語(立即更新)向前移動，而如何使用較冷的藍色將導(dǎo)航移到更遠的背景中。左圖中的情況相同。紅色的閃電圖標立即在界面的其余部分中脫穎而出。
 

　　您還可以使用顏色將相似的界面組件組合在一起：
 

　　最后，少即是多。顏色越多，每種顏色的影響就越小。一個很好的例子是Instagram最近的重新設(shè)計：
 

　　顏色的減少不僅使照片更加突出，而且還提高了通知的有效性，因為它們不再與頂部和底部導(dǎo)航欄中的顏色競爭。