想想你發(fā)現(xiàn)的最后一個(gè)很棒的網(wǎng)站?,F(xiàn)在想想為什么它很棒。您不太可能想到其中包含的令人驚嘆的圖像(盡管它們可能有所幫助)或您在那里閱讀的內(nèi)容豐富的副本(盡管這可能也有所幫助)。不:您更有可能對(duì)網(wǎng)站印象深刻,因?yàn)槟焖佟⒂行腋咝У赝瓿闪四臣?。?shí)現(xiàn)這一目標(biāo)的關(guān)鍵方法之一被稱為用戶界面設(shè)計(jì)(或簡稱UI 設(shè)計(jì))。
UI 設(shè)計(jì)很重要,因?yàn)樗芾砘ヂ?lián)網(wǎng)用戶與您的網(wǎng)站以及您的產(chǎn)品或服務(wù)的交互。最好的用戶界面可以讓用戶忘記您網(wǎng)站的技術(shù)細(xì)節(jié),繼續(xù)他們想要完成的任務(wù)。盡管這聽起來像是 Web 設(shè)計(jì)的基本原則,但設(shè)計(jì)頁面和設(shè)計(jì)界面的過程是截然不同的,UX、UI、Web 設(shè)計(jì)和 Web 開發(fā)之間存在重大差異。在本文中,四川vi設(shè)計(jì)公司將定義什么是用戶界面設(shè)計(jì),什么是好的 UI 設(shè)計(jì)以及幫助您創(chuàng)建好的 UI 設(shè)計(jì)的四個(gè)規(guī)則。
—
用戶界面設(shè)計(jì)是數(shù)字界面美學(xué)體驗(yàn)的設(shè)計(jì),特別是視覺接觸點(diǎn),如按鈕、導(dǎo)航菜單、圖標(biāo)和排版。重點(diǎn)圍繞界面的外觀和感覺,以及用戶在使用和視覺外觀上是否有流暢和愉快的體驗(yàn)。簡而言之,UI 設(shè)計(jì)是四川vi設(shè)計(jì)公司和開發(fā)人員創(chuàng)建用戶友好界面的過程,這些界面將您的客戶與您的產(chǎn)品或服務(wù)聯(lián)系起來。
圖形用戶界面——這些是按鈕、菜單或控制面板的視覺表示,基本上是用戶將與之交互的任何東西。這方面的一個(gè)例子是您的計(jì)算機(jī)的桌面或手機(jī)的界面。
語音控制界面——聽起來,這些界面需要語音來啟動(dòng)操作。這些天來,這些變得越來越流行。一些例子是蘋果的 Siri、亞馬遜的 Alexa 或谷歌的 Bixby。
基于手勢的界面——在這些界面中,用戶的手勢會(huì)影響產(chǎn)品的操作。這方面的一個(gè)例子是虛擬現(xiàn)實(shí)游戲。
這些設(shè)計(jì)模式中的每一種都對(duì)設(shè)計(jì)師施加了不同的限制,并且必須仔細(xì)研究每種模式,以使用戶獲得盡可能無縫的體驗(yàn)。
與任何設(shè)計(jì)過程一樣,產(chǎn)生良好UI 設(shè)計(jì)的關(guān)鍵是仔細(xì)考慮您想要實(shí)現(xiàn)的目標(biāo)。通常,定義您想要制作的網(wǎng)站或應(yīng)用程序的類型比定義一組到達(dá)那里的規(guī)則更容易。
事實(shí)上,定義好的UI 設(shè)計(jì)的特征相對(duì)簡單。這里也有一些要記?。?/p>
為用戶帶來愉快的體驗(yàn),同時(shí)也使他們能夠快速輕松地完成所需的任務(wù)。
它考慮了不同用戶的不同需求——換句話說,它是可訪問的
界面簡單且美觀,但不會(huì)過度勞累或分散注意力。用戶應(yīng)該能夠看到如何輕松完成特定任務(wù)。
重點(diǎn)是您的產(chǎn)品或服務(wù),并充當(dāng)客戶訪問它的橋梁。
它允許人們以他們選擇的方式導(dǎo)航和交互,但隨時(shí)準(zhǔn)備在需要時(shí)介入并提供幫助或提供幫助。
當(dāng)所有這些元素結(jié)合在一起時(shí),您最終會(huì)得到一個(gè)既簡單又強(qiáng)大的UI 設(shè)計(jì):它允許用戶快速實(shí)現(xiàn)他們想要的東西,而無需搜索多個(gè)頁面來查找必要的信息。
——
現(xiàn)在,讓四川vi設(shè)計(jì)公司稍微超越良好 UI 設(shè)計(jì)的基本定義,開始研究可用于實(shí)現(xiàn)這一目標(biāo)的規(guī)則和技術(shù)。盡管每個(gè)網(wǎng)站和應(yīng)用程序都不同,但幾乎所有優(yōu)秀的 UI 設(shè)計(jì)都共享一組核心功能。因此,讓我們一個(gè)一個(gè)地瀏覽它們。
也許偉大的UI 設(shè)計(jì)中最重要的元素是一致性。理想情況下,您網(wǎng)站的每個(gè)元素都應(yīng)該向您的用戶準(zhǔn)確地表明他們在哪里,盡管不會(huì)妨礙他們對(duì)您網(wǎng)站的體驗(yàn)。這意味著開發(fā)優(yōu)質(zhì)網(wǎng)站的第一步是為文本和配色方案制定品牌指南,因此您的用戶永遠(yuǎn)不會(huì)懷疑他們是否仍在同一個(gè)網(wǎng)站上。
像這樣的顏色和品牌方案也可用于向您的用戶指示如何使用您的網(wǎng)站。顏色可以讓用戶輕松識(shí)別您網(wǎng)站的重要功能。例如,“請求更多信息”按鈕應(yīng)該類似于“請求演示”,這樣用戶只需快速掃描網(wǎng)站即可輕松找到他們正在尋找的類似操作。
應(yīng)用和開始按鈕設(shè)計(jì)一致的主頁
為您網(wǎng)站上的每個(gè)操作創(chuàng)建不同的顏色、按鈕和字體會(huì)使時(shí)間緊迫的用戶更難快速找到他們正在尋找的鏈接。同樣,為兩個(gè)完全不同的操作創(chuàng)建具有相同字體、大小和顏色的按鈕可能會(huì)導(dǎo)致混淆。例如,您永遠(yuǎn)不會(huì)希望“取消”和“提交”按鈕的顏色相同。
——
最好的網(wǎng)站可以讓用戶輕松完成復(fù)雜的任務(wù),您可以通過從它們中刪除盡可能多的工作來實(shí)現(xiàn)這一點(diǎn)。最好的UI 網(wǎng)站使用各種各樣的技術(shù)來做到這一點(diǎn),從使文本更易于閱讀到更復(fù)雜的構(gòu)建內(nèi)容和頁面的過程以實(shí)現(xiàn)最大效率。要開始減少對(duì)用戶的工作,請考慮以下事項(xiàng):
視覺清晰度
在這里您可以安排網(wǎng)頁上的元素以顯示它們的重要性。例如,更大、更鮮艷的按鈕或鏈接會(huì)吸引某人的注意力,從而表明它們更重要。
另一個(gè)技巧是為用戶提供大量的視覺提示。您可以提供視覺輔助和參考點(diǎn)來幫助引導(dǎo)用戶通過您的界面。這個(gè)想法是使您的網(wǎng)站導(dǎo)航盡可能可預(yù)測。您永遠(yuǎn)不會(huì)希望訪問者想知道按鈕或鏈接的用途或位置。
文字和圖像的平衡
另一個(gè)重要提示是減少您網(wǎng)站上的文字?jǐn)?shù)量。網(wǎng)站訪問者的注意力已經(jīng)很短了,強(qiáng)迫他們閱讀長文本不會(huì)讓他們的事情變得更容易。用戶應(yīng)該能夠?yàn)g覽并輕松識(shí)別他們需要查找的部分和信息。
簡單的過程
您網(wǎng)站的大部分功能,無論是注冊、購買還是索取更多信息,都應(yīng)該遵循三鍵規(guī)則。聽起來,您希望確保您的用戶可以在不超過三下鼠標(biāo)點(diǎn)擊的情況下達(dá)到目標(biāo)。
——
出色的UI 設(shè)計(jì)使用戶可以輕松地以他們想要的方式瀏覽您的網(wǎng)站,賦予他們權(quán)力并灌輸一種控制感。您應(yīng)該確保您的網(wǎng)站適合您的用戶,而不是強(qiáng)迫他們學(xué)習(xí)復(fù)雜的用戶界面才能訪問您的服務(wù)。
有很多方法可以做到這一點(diǎn),這里是最常見的:
包括某種主菜單或帶有指向常用頁面的鏈接的錨點(diǎn),以便他們可以輕松瀏覽您的網(wǎng)站。
讓網(wǎng)站訪問者輕松回溯并返回到之前訪問過的頁面。這不僅使您的網(wǎng)站更易于使用,而且還鼓勵(lì)用戶瀏覽您的網(wǎng)站并讓他們能夠控制自己的旅程。
當(dāng)某個(gè)動(dòng)作完成或某個(gè)動(dòng)作的結(jié)果時(shí),確認(rèn)或提供反饋。例如,創(chuàng)建密碼,讓用戶知道什么符合要求,什么缺少。
提供系統(tǒng)狀態(tài)的實(shí)時(shí)更新,防止用戶不耐煩(即當(dāng)界面上的請求完成時(shí),用戶可以看到狀態(tài)更新以線性進(jìn)度條的形式在“處理中”、“交付中”、 ”“下載”等)。
提供視覺和文字標(biāo)簽。通過使用常用符號(hào)和清晰的標(biāo)簽,明確哪個(gè)選項(xiàng)卡用于哪個(gè)操作。
啟用自動(dòng)保存以避免用戶在錯(cuò)誤單擊按鈕時(shí)丟失之前的工作。
在同一主題上更進(jìn)一步,應(yīng)仔細(xì)制作錯(cuò)誤消息以避免引起挫敗感。錯(cuò)誤消息應(yīng)包含指向可能有助于解決他們遇到的問題的頁面的鏈接,例如重置密碼的鏈接。
帶有指向網(wǎng)站其他部分的有用鏈接的錯(cuò)誤頁面
良好的UI 設(shè)計(jì)讓每個(gè)用戶都感到舒適,并讓每個(gè)訪問者都能實(shí)現(xiàn)他們想要的結(jié)果。這意味著確保您網(wǎng)站的所有訪問者在訪問您的網(wǎng)站時(shí)都感到舒適和自信。四川vi設(shè)計(jì)公司的方法是:
避免行話
不要使用聽眾聽不懂的語言。想想你的聽眾,并使用他們會(huì)知道和使用的術(shù)語和語言。例如,一些在服裝行業(yè)工作的人可能會(huì)將“買一送一”的優(yōu)惠稱為 BOGO,但在您的網(wǎng)站上放置“BOGO 免費(fèi)”以宣傳該優(yōu)惠對(duì)許多訪問者來說沒有意義。它可能會(huì)混淆和阻止客戶訪問您的網(wǎng)站。
包容
請記住,您網(wǎng)站的用戶可能存在多種差異,例如視力低下、聽力障礙、認(rèn)知障礙或運(yùn)動(dòng)障礙。通過確保您的網(wǎng)站可以迎合不同的人群,將確保您包括每個(gè)人。在設(shè)計(jì)用戶界面時(shí)請記住這一點(diǎn)。
這可能意味著盡可能使用簡單、高對(duì)比度的設(shè)計(jì),并將視覺噪音降至最低。避免不必要的圖形或指向與您的產(chǎn)品或服務(wù)提供的內(nèi)容不完全相關(guān)的頁面的鏈接。
一旦您開始查看一些出色的UI 設(shè)計(jì),您就會(huì)發(fā)現(xiàn)包容性的價(jià)值遠(yuǎn)不止為能力較差的用戶提供出色的體驗(yàn)。通過確保您的頁面或應(yīng)用程序吸引盡可能多的人,您最終會(huì)得到一個(gè)更簡單、更優(yōu)雅、更易于所有人使用的設(shè)計(jì)。
使用用戶已經(jīng)知道的提示
當(dāng)您在數(shù)字世界中使用來自物理世界的視覺提示時(shí),用戶已經(jīng)知道其含義。只需看看您的計(jì)算機(jī),您就會(huì)看到看起來像文件夾的文件夾和用于丟棄文件和文檔的垃圾箱。用戶已經(jīng)了解文件夾和垃圾箱的功能,并將在數(shù)字空間中以相同的方式使用它。
另一個(gè)例子是許多用戶知道要退出屏幕,他們需要單擊右上角的“x”(如果您是 PC 用戶,則單擊左上角)。您要做的最后一件事是設(shè)計(jì)一個(gè)彈出窗口或屏幕,該功能位于屏幕底部。這肯定會(huì)讓用戶陷入困惑,甚至可能會(huì)感到沮喪。
——
歸根結(jié)底,良好的用戶界面設(shè)計(jì)的目標(biāo)是讓用戶輕松愉快地瀏覽網(wǎng)站或應(yīng)用程序。這鼓勵(lì)用戶探索您的產(chǎn)品或服務(wù),而不會(huì)覺得太難或害怕失敗。
最好的UI 設(shè)計(jì)不僅僅如此,它也是向世界展示您的品牌的一種方式。由于您的網(wǎng)站是您的品牌或產(chǎn)品的代表,因此您應(yīng)該在設(shè)計(jì)時(shí)考慮到您的客戶,并確保他們擁有您希望他們擁有的體驗(yàn)。無論這意味著自己閱讀 UI 設(shè)計(jì)技術(shù)還是聘請四川vi設(shè)計(jì)公司,您的目標(biāo)都應(yīng)該是相同的——為每個(gè)人提供出色的體驗(yàn)。
總監(jiān)微信
復(fù)制成功
業(yè)務(wù)咨詢 何先生
業(yè)務(wù)咨詢 何先生
搜索感興趣的內(nèi)容