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

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

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

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

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

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

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

　　您要解決的問題是什么?
 

　　您的用戶需求是什么?
 

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

　　第二架飛機(jī)：
 

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

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

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

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

　　第三架飛機(jī)：
 

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

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

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

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

　　最后，最具體的飛機(jī)：

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

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

　　接下來，讓我們進(jìn)入U(xiǎn)I設(shè)計(jì)的一些基本原理。
 

　　原則1：清晰至上。
 

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

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

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

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

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

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

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

　　原則3：一致性很重要。
 

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

　
Xfinity主頁(yè)
 

Xfinity電視頁(yè)面
 

Xfinity個(gè)人頁(yè)面
 

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

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

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

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

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

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

F形閱讀模式。
 

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

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

　　例如，通常會(huì)在左上角找到徽標(biāo)。這使公司可以加強(qiáng)其品牌形象。在右上角，您通常可能會(huì)找到要導(dǎo)航的頁(yè)面，或者可能是搜索欄。這使用戶可以輕松導(dǎo)航不同的頁(yè)面，而無(wú)需在整個(gè)頁(yè)面中搜索導(dǎo)航元素。這是兩個(gè)遵循此設(shè)計(jì)模式的示例：
 

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

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

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

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

　　一，版式
 

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

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

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

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

　　現(xiàn)在呢?
 

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

　　另外，切勿將大塊副本居中。對(duì)于我們來說，閱讀左對(duì)齊的文本塊要容易得多，因?yàn)檠劬梢詼?zhǔn)確知道下一行的開始位置。
 

　　二?？崭?又稱負(fù)空格)
 

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

　　正空格=狗。負(fù)空間=目錄
 

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

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

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

　　三，顏色
 

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

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

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

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

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

　　顏色的減少不僅使照片更加突出，而且還提高了通知的有效性，因?yàn)樗鼈儾辉倥c頂部和底部導(dǎo)航欄中的顏色競(jìng)爭(zhēng)。