UI & UX設(shè)計(jì)師必看：如何讓你的登陸頁看起來更專業(yè)

時(shí)間：2023-09-29 06:12:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-29 06:12:02 來源：網(wǎng)站運(yùn)營

UI & UX設(shè)計(jì)師必看：如何讓你的登陸頁看起來更專業(yè)：

我們都知道“專業(yè)度”是什么，但為什么我們?cè)O(shè)計(jì)的頁面想要擁有“專業(yè)度”卻如此困難呢？

今天YES就和大家一起探索-如何才能讓我們?cè)O(shè)計(jì)的登陸頁面看起來更專業(yè)。

在進(jìn)行設(shè)計(jì)時(shí)，創(chuàng)建一個(gè)頁面需要考慮到許多要素：·圖片應(yīng)該放在哪里？·這樣的間距夠嗎？會(huì)不會(huì)太大了？·所有元素都要保持一致嗎？這個(gè)元素需要因?yàn)樘囟ǖ脑虼蚱埔?guī)范嗎？·應(yīng)該給每個(gè)部分分配多少空間呢？這里的插圖怎么樣？···但其實(shí)這些成千上萬的問題并不能幫助我們真正確定我們?cè)O(shè)計(jì)的頁面從“業(yè)余外觀”到“設(shè)計(jì)精美又具有專業(yè)度”需要做到什么。那么問題就來了，有沒有簡(jiǎn)單快捷的方法幫助我們制作更專業(yè)的頁面呢？我們將從3 個(gè)方面來探索如何設(shè)計(jì)更具專業(yè)度的頁面。

• 上折式設(shè)計(jì)模式

??前5秒十分重要

首先來引入一個(gè)“5秒測(cè)試”的概念??這是一種快速的UX設(shè)計(jì)方法，用于確保我們?cè)O(shè)計(jì)的頁面?zhèn)鬟_(dá)出信息對(duì)于用戶來說是清晰的。1. 找一位朋友（或陌生人）來完成這項(xiàng)測(cè)試2.向他們展示已經(jīng)設(shè)計(jì)好的頁面 5 秒鐘3.然后問他們提問。

由此可見“5秒測(cè)試”的流程十分簡(jiǎn)單，但重要的是向測(cè)試用戶提出的問題：· 這個(gè)頁面提供了哪些信息？· 你能從提供的信息中得到什么？· 給你提供信息的企業(yè)叫什么名字？正如我們能注意到的，這些問題的答案都基于頁面上醒目的令人難忘的內(nèi)容。甚至在這個(gè)測(cè)試中測(cè)試者并不一定是我們的目標(biāo)用戶。也就是說這個(gè)測(cè)試正在測(cè)試的是信息的清晰度，而不是用戶需求。而為了使頁面看起來專業(yè)，清晰度將成為一個(gè)重要因素。

這是為什么呢，首先我們要了解“第一印象”。

?為什么“第一印象”很重要

根據(jù)研究，“第一印象”是在 500 毫秒內(nèi)形成的。并且基于這種第一印象，用戶在頁面上做出第一個(gè)決定。

訪問頁面時(shí)，潛在客戶可能會(huì)做出以下決定：1.單擊頁面主要 CTA（如果他們感興趣）。2.向下滾動(dòng)以了解更多信息（因?yàn)樗麄兒芎闷妫蛘咚麄冊(cè)邳c(diǎn)擊之前有一些想深入了解的問題）3.用戶選擇返回（要么是因?yàn)樗麄凕c(diǎn)擊頁面鏈接的意圖與他們的期望不符，或者他們只是在頁面中體驗(yàn)感不佳。）

讓我們?cè)俅位氐?b>清晰度的話題。清晰度很重要，因?yàn)槲覀儧]有足夠時(shí)間來應(yīng)對(duì)我們所有的潛在客戶。大多數(shù)對(duì)于登陸頁標(biāo)題的建議總是：要顯而易見。道理很簡(jiǎn)單，如果讓用戶不得不考慮一些復(fù)雜的事情，那么第一印象就會(huì)混亂。這就是采用折疊設(shè)計(jì)模式的原因。

采用折疊設(shè)計(jì)模式的頁面如下：

這些頁面都是 3 個(gè)元素的組合。標(biāo)題 + CTA + 視頻或圖片

?采用“三路組合”有以下幾個(gè)原因

· 遵循“三路組合”的設(shè)計(jì)原則，有助于分解內(nèi)容，增加視覺吸引力，更令人難忘。· 不只是顯示文本和按鈕。使用好的圖像或視頻可以放大情緒，并比文字更快地幫助用戶理解信息?！?b>遵循視覺層次結(jié)構(gòu)，降低了復(fù)雜性。這給了它一個(gè)固有的默認(rèn)順序-應(yīng)該何時(shí)閱讀內(nèi)容、標(biāo)題，然后是圖像或視頻，然后是按鈕或表單。

如果不想使用上面提到的設(shè)計(jì)模式怎么辦？

不需要全部遵循，只要能找到一種以某種方式（比如在背景中）同時(shí)包含圖像、視頻或視覺樣式的方法就可以。

從以下兩個(gè)頁面的對(duì)比就可以很清晰的展現(xiàn)出差異：

一個(gè)是沒有背景圖片的頁面，一個(gè)帶有圖像的頁面；很明顯擁有圖片的頁面看起來更專業(yè)。

Tip：如果你背景圖片模糊或變暗，前面的文字信息會(huì)更加突出。

• 使用UX公開的秘密

UX（代表用戶體驗(yàn)）是一件很值得深入研究的事。

因?yàn)槟銓?duì)優(yōu)秀案例研究得越多，你就越意識(shí)到它是多么明顯；這就是為什么它們被稱為用戶體驗(yàn)公開的秘密。

秘?用戶體驗(yàn)公開的秘密包括：

·只為鏈接的文本加下劃線，不要用它來強(qiáng)調(diào)文本。那是因?yàn)槲覀円呀?jīng)將帶下劃線的文本與其他網(wǎng)站上的鏈接相關(guān)聯(lián)。如果再在普通文本下劃線，只會(huì)造成傳達(dá)信息的混亂?！?b>頁面的元素格式盡可能保持一致。如果創(chuàng)建的間距為 24 像素，請(qǐng)將頁面上所有相似的間距設(shè)置為 24 像素?！?將事物組合在一起以降低視覺復(fù)雜性。更接近的元素傾向于在視覺上（和心理上）組合在一起。您可以使用顏色來做同樣的事情?！?b>讓你的按鈕看起來像按鈕。把它們做成圓形，給它們一點(diǎn)陰影，當(dāng)鼠標(biāo)懸停在它上面時(shí)，讓它的顏色變深?！ぁぁ?b>你會(huì)驚訝于這樣的微小的“秘密”隨處可見。看看你最喜歡的頁面，你會(huì)發(fā)現(xiàn)它們都遵循這些用戶體驗(yàn)規(guī)則。

• 使其更易于瀏覽

老實(shí)說，在讀這篇文章時(shí)你可能沒有閱讀本文中的每個(gè)字，你可能大部分只是略讀了一下，但你對(duì)于你感興趣的信息你會(huì)仔細(xì)閱讀。研究表明，用戶傾向于瀏覽他們正在尋找的相關(guān)信息而忽略一些信息。

提高頁面可讀性的方法：

· 使用要點(diǎn)（就像你現(xiàn)在正在閱讀的這個(gè)，它們有助于簡(jiǎn)明扼要地說明你的好處）·突出關(guān)鍵詞（加粗或使用顏色）·使用有意義的副標(biāo)題· 保持你的段落不要太長(zhǎng)，在 60-80 個(gè)字符之間，這樣更容易閱讀?！?每段只闡述一個(gè)想法· 將最重要的信息包含在頁面更高的位置?！?b>看看是否能在完成頁面設(shè)計(jì)后將字?jǐn)?shù)減半。

使某些內(nèi)容易于瀏覽并不會(huì)降低頁面上的任何單詞的重要性。它的作用是使您的頁面更易于消化，更重要的是 -您的潛在客戶不必考慮要自己篩選信息……

希望以上的信息可以幫助大家創(chuàng)建更好看且更易于消化更具有專業(yè)度的頁面。

---

××××

喜歡文章記得贊同，收藏，點(diǎn)擊喜歡哦～

策劃：Yes Design

文字：WBY

視覺設(shè)計(jì)：WBY

部分圖片來源于網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)及時(shí)聯(lián)系我方

未經(jīng)許可，謝絕一切形式轉(zhuǎn)載