1.為什么用戶使用對(duì)齊標(biāo)簽填寫表單的速度更快

想象一下，一個(gè)用戶已經(jīng)準(zhǔn)備好注冊(cè)您的站點(diǎn)了。他們會(huì)進(jìn)入你的表格并輸入他們的信息。字段標(biāo)簽對(duì)齊的方式會(huì)影響用戶填寫表單的速度。

你是想給用戶提舒適體驗(yàn)，還是想給他們一個(gè)麻煩？

如果您想讓他們的體驗(yàn)更快更容易，請(qǐng)使用輸入框上面的字段對(duì)齊標(biāo)簽.或輸入框內(nèi)的對(duì)齊標(biāo)簽?zāi)Ｊ健?

與左對(duì)齊和右對(duì)齊的標(biāo)簽相比，頂部對(duì)齊或內(nèi)部左對(duì)齊標(biāo)簽填寫起來(lái)更快、更容易。這是因?yàn)闃?biāo)簽只需要有一半多的視覺(jué)固定物。

頂部對(duì)齊標(biāo)簽還允許用戶以一個(gè)可視方向向下移動(dòng)輸入框。左對(duì)齊和右對(duì)齊的標(biāo)簽需要兩個(gè)視覺(jué)指示才能填寫。

頂部對(duì)齊標(biāo)簽的唯一缺點(diǎn)是，它們可以使表單變得很長(zhǎng)。但是現(xiàn)在用戶滾動(dòng)的頻率越來(lái)越高，所以這不是問(wèn)題。

通過(guò)減少字段之間的空白，可以減少表單長(zhǎng)度。您還可以將表單拆分成多個(gè)頁(yè)面，以使表單更短。

頂部和左/右對(duì)齊標(biāo)簽之間的差異很明顯。頂部對(duì)齊標(biāo)簽更容易在眼睛上，并使表格更容易填寫。雖然他們可以使表單更長(zhǎng)，

但用戶將從完成表單所需的時(shí)間和精力的減少中獲益更多。

如果頂部對(duì)齊的標(biāo)簽?zāi)軌蚪o用戶提供更好的表單體驗(yàn)，那么它是值得采用的。設(shè)計(jì)師應(yīng)該更多地考慮他們的字段標(biāo)簽對(duì)齊。

它可以區(qū)別于用戶填寫表單還是放棄表單。

2.為什么對(duì)話框中的“確認(rèn)”按鈕在右邊工作得最好

有很多設(shè)計(jì)經(jīng)常會(huì)問(wèn)我一些關(guān)于按鈕上的問(wèn)題那我今天也來(lái)獻(xiàn)丑講以下我對(duì)按鈕的一些理解，這段時(shí)間針對(duì)這些東西研究了很久，在對(duì)話框中放置“確認(rèn)”和“取消”按鈕的位置。“確認(rèn)”按鈕是完成任務(wù)的主要操作。

“取消”按鈕是在沒(méi)有完成任務(wù)的情況下將用戶帶回原來(lái)屏幕的輔助動(dòng)作。

根據(jù)它們的功能，最好的順序是什么？“確定”按鈕應(yīng)該出現(xiàn)在“取消”按鈕之前還是之后？

許多人提到了以下幾點(diǎn)平臺(tái)約定作為答案。雖然這似乎是一個(gè)解決問(wèn)題的方法，但實(shí)際上并非如此。它不能回答哪個(gè)位置對(duì)用戶更好，以及為什么。為了一致性而遵循平臺(tái)慣例的建議是不夠好的，給設(shè)計(jì)師留下了空手而歸的機(jī)會(huì)。

“一致性”是設(shè)計(jì)師們常用的一個(gè)詞。不深入考慮用戶面臨的設(shè)計(jì)問(wèn)題也是一個(gè)流行的借口。如果一個(gè)人不知道為什么會(huì)存在，遵循設(shè)計(jì)慣例有什么好處呢？

如果某個(gè)設(shè)計(jì)約定對(duì)用戶有害呢？設(shè)計(jì)師應(yīng)該為了一致性而盲目地遵循嗎？糟糕的設(shè)計(jì)實(shí)踐是否應(yīng)該持續(xù)下去，因?yàn)樵O(shè)計(jì)師們希望通過(guò)平臺(tái)設(shè)計(jì)的一致性來(lái)解決每一個(gè)問(wèn)題？

今天，有一些平臺(tái)設(shè)計(jì)約定被廣泛使用，因?yàn)樗鼈兪菫橛脩艄ぷ鞯?。但這里的要點(diǎn)是，平臺(tái)設(shè)計(jì)的一致性永遠(yuǎn)不應(yīng)該讓設(shè)計(jì)師滿意，因?yàn)檫@是做某事的唯一理由。理解為什么您應(yīng)該以一種方式而不是另一種方式來(lái)設(shè)計(jì)您的用戶界面的原因是關(guān)鍵。

按鈕放置事項(xiàng)

人們可能會(huì)說(shuō)，讓你的動(dòng)作按鈕突出給它更多的視覺(jué)重量和一個(gè)清晰清晰的標(biāo)簽比它的位置更重要。雖然動(dòng)作按鈕的視覺(jué)重量和標(biāo)簽是一個(gè)重要的設(shè)計(jì)方面需要考慮，但它不是唯一的方面。

只關(guān)注一個(gè)設(shè)計(jì)方面而不是其他方面是一個(gè)粗心的設(shè)計(jì)師的行為。一絲不茍的設(shè)計(jì)師會(huì)思考每個(gè)設(shè)計(jì)方面是如何影響用戶的。

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，最難搞清楚的是主動(dòng)作和次要?jiǎng)幼魇侨绾畏胖玫摹＿@就是為什么“確認(rèn)”/“取消”按鈕的爭(zhēng)論在設(shè)計(jì)師中如此流行的原因。

為什么‘確認(rèn)’按鈕在右邊工作得最好？

當(dāng)你通過(guò)了平臺(tái)慣例的爭(zhēng)論后，你會(huì)質(zhì)疑哪個(gè)位置最有效。您可以通過(guò)分析設(shè)計(jì)如何影響用戶來(lái)解決這個(gè)問(wèn)題。

減少視覺(jué)固定

一些設(shè)計(jì)師認(rèn)為，在第二個(gè)操作之前將主操作放在左邊對(duì)用戶更好，因?yàn)樗咏?，因此，點(diǎn)擊的時(shí)間更少。

這是有意義的，但您不能忽視這樣一個(gè)事實(shí)，即用戶在選擇要采取的操作之前將查看他們的所有選項(xiàng)。

這意味著大多數(shù)用戶不會(huì)盲目地單擊主操作按鈕而不查看它旁邊的輔助操作按鈕。

他們將首先看到左邊的主要?jiǎng)幼?，然后查看右邊的次要?jiǎng)幼鳌Ｈ缓?，他們?huì)把眼睛移回主要的動(dòng)作，點(diǎn)擊它。這將在多個(gè)方向上總共創(chuàng)建三個(gè)視覺(jué)固定。

將其與放置在對(duì)話框右側(cè)的主操作和放置在左側(cè)的輔助操作進(jìn)行比較。用戶從第二個(gè)動(dòng)作的眼睛開(kāi)始，然后將眼睛移到主動(dòng)作上單擊按鈕。這在一個(gè)方向上總共創(chuàng)建了兩個(gè)視覺(jué)固定，給用戶一個(gè)更快的視覺(jué)流。

用戶只關(guān)注每個(gè)按鈕一次，并在主動(dòng)作按鈕上結(jié)束。將主操作放在左邊可能會(huì)使用戶更容易到達(dá)，但是當(dāng)您從用戶的思維過(guò)程和視覺(jué)固定的角度來(lái)看速度時(shí)，將主操作放置在對(duì)話框的右側(cè)實(shí)際上更快。

用戶點(diǎn)擊或操作按鈕的心里狀態(tài)

當(dāng)用戶單擊輔助操作按鈕時(shí)，他們期望應(yīng)用程序什么也不做，并將它們帶回到原來(lái)的屏幕。因此，“取消”按鈕的功能類似于“后退”按鈕。

當(dāng)用戶單擊主操作按鈕時(shí)，他們期望應(yīng)用程序執(zhí)行按鈕所述的操作，并將其轉(zhuǎn)到下一個(gè)屏幕。因此，“確認(rèn)”按鈕的功能類似于“下一頁(yè)”按鈕。將輔助動(dòng)作按鈕放置在左側(cè)，主動(dòng)作按鈕在右邊映射到用戶可以期待的‘后退’和‘下一步’按鈕功能。

它類似于分頁(yè)按鈕的放置方式。將用戶帶到下一頁(yè)的按鈕位于右側(cè)，將用戶帶回其早期頁(yè)面的按鈕位于左側(cè)。這個(gè)按鈕的放置工作是因?yàn)樗成涞接脩魪淖蟮接业拈喿x和導(dǎo)航方向，其中右是前進(jìn)的方向，左是后退的方向。

對(duì)話框中的“確認(rèn)”和“取消”按鈕應(yīng)該遵循類似的交互模式，因?yàn)樗鼈兊墓δ茴愃朴诜猪?yè)按鈕。

不僅如此，在中國(guó)用戶習(xí)慣了左右方向的模式。

將您的主要操作放在右側(cè)，將次要操作放置在左側(cè)，將使您的對(duì)話框按鈕更容易、更直觀地為用戶所理解。

為用戶提供更有效的視覺(jué)流暢度

將您的按鈕放置在終端區(qū)域可以讓用戶看到他們最后需要采取的主要操作。這不僅改善了視覺(jué)流，也改善了任務(wù)流。

用戶在掃描時(shí)不會(huì)跳過(guò)主動(dòng)作按鈕。當(dāng)他們通過(guò)時(shí)，他們的眼睛就會(huì)盯著它，所以他們可以立刻點(diǎn)擊它。

按鈕放置在中間還是放置在左右兩邊？

另一個(gè)問(wèn)題是設(shè)計(jì)師經(jīng)常想知道他們是應(yīng)該把按鈕放在角落里，還是把它們放在一起。當(dāng)您將主操作和輔助操作放置在對(duì)話框

的角中時(shí)，它將很好地映射到左右方向。但是，由于‘取消’和‘確認(rèn)’按鈕不是導(dǎo)航按鈕，所以沒(méi)有必要遵循方向映射。有時(shí)它弊大于利。

如果應(yīng)用程序要執(zhí)行用戶無(wú)法撤消的關(guān)鍵操作，那么用戶可以看到“取消”按鈕和“確定”按鈕是很重要的。在這種情況下，“取消”按鈕的功能可能像“先前”按鈕，但更重要的是，因?yàn)樗洚?dāng)安全按鈕，以防止任何更改。

在左下角放置“取消”按鈕的危險(xiǎn)是，由于兩個(gè)按鈕之間的視覺(jué)分隔很大，它可能導(dǎo)致用戶忽略它。將“取消”按鈕和“確定”按鈕放在一起，可以使用戶更容易在一次凝視中查看和比較這兩個(gè)動(dòng)作，從而選擇最佳的操作和點(diǎn)擊。

我們經(jīng)常卸載軟件的時(shí)候一不留神就會(huì)點(diǎn)錯(cuò)，或者是我們?cè)谘b某一個(gè)軟件的時(shí)候全家桶一擁而上。所以在不同場(chǎng)景當(dāng)中我們所用的按鈕形態(tài)也是不一致的。

3.下拉菜單加圖標(biāo)和不加圖標(biāo)的區(qū)分在哪里！

大的側(cè)邊欄菜單甚至?xí)層脩艨雌饋?lái)很不雙我們應(yīng)當(dāng)如何解決這一個(gè)問(wèn)題。

其原因是設(shè)計(jì)人師在做顯示菜單項(xiàng)的時(shí)候會(huì)出現(xiàn)的問(wèn)題。

當(dāng)它們都有相同的視覺(jué)處理時(shí)，菜單項(xiàng)很難進(jìn)行識(shí)別與區(qū)分。

如果不修復(fù)這個(gè)問(wèn)題，會(huì)導(dǎo)致用戶放慢他的瀏覽速度從而導(dǎo)致用戶的流失在大的層面來(lái)講，小的層面來(lái)講閱讀不爽導(dǎo)致關(guān)閉頁(yè)面。

菜單欄沒(méi)有主次之分

當(dāng)您對(duì)菜單項(xiàng)進(jìn)行全文本或全圖標(biāo)處理時(shí)，問(wèn)題就會(huì)出現(xiàn).當(dāng)用戶掃描他們想要的項(xiàng)目時(shí)，他們的注意力分散在菜單周圍。這是因?yàn)闆](méi)有層次來(lái)吸引他們的注意力。

通過(guò)將用戶的注意力引導(dǎo)到您的主要項(xiàng)目，使您的菜單可掃描。

要實(shí)現(xiàn)這一點(diǎn)，我們可以看下面設(shè)計(jì)形式來(lái)強(qiáng)調(diào)重點(diǎn)內(nèi)容

主項(xiàng)圖標(biāo)

與其在每個(gè)菜單項(xiàng)上放置圖標(biāo)，還不如將其放置在主菜單項(xiàng)上。視覺(jué)強(qiáng)調(diào)首先將用戶的注意力引導(dǎo)到這些項(xiàng)目上。

次要項(xiàng)目上缺少圖標(biāo)，這使得它們能夠得到其余的關(guān)注。

略大一點(diǎn)的圖標(biāo)

如果要使所有圖標(biāo)處，請(qǐng)稍微放大需要突出的圖標(biāo)。

稍微的增大會(huì)使視覺(jué)效果有很大的不同，同時(shí)字形更容易辨認(rèn)，每一行的線高也會(huì)增加。讓整個(gè)看起來(lái)更加有空間感一些。

讓用戶瀏覽閱讀起來(lái)也會(huì)更加舒暢一些。

4.在按鈕上避免顏色對(duì)比度錯(cuò)誤

想象一下，當(dāng)用戶在您的界面上遇到一對(duì)按鈕時(shí)，他們猶豫不決。

用戶向左看，然后向右看，比較它們。經(jīng)過(guò)一番思考，他們做出了選擇。

他們的選擇按鈕做出決定，而且不確定，因?yàn)槟愕陌粹o沒(méi)有層次結(jié)構(gòu)。

不要使用相同的顏色輪廓按鈕

甚多的設(shè)計(jì)師設(shè)通常喜歡使用主按鈕的輪廓形狀作為輔助按鈕。按鈕樣式看起來(lái)可能不一樣，但還不夠。

他們?nèi)匀粫?huì)競(jìng)爭(zhēng)，因?yàn)樗麄兊念伾珜?duì)比度相等。

為了給主按鈕更多的注意，削弱輪廓按鈕的對(duì)比度。與其使用重顏色，不如使用它的色調(diào)。你可以通過(guò)降低重顏色的亮度和飽和度來(lái)制作。確保對(duì)比度足夠高，以達(dá)到主要的按鈕突出性。

不要使用黑色輔助按鈕

設(shè)計(jì)師的另一個(gè)趨勢(shì)是把第二個(gè)按鈕變成黑色。他們認(rèn)為，使用中性的顏色，它是不會(huì)競(jìng)爭(zhēng)的。然而，黑色按鈕更為突出，因?yàn)樗幸粋€(gè)更高的對(duì)比度。

不要使用黑色，而要使用重顏色的色調(diào)，以使輔助按鈕比主按鈕更弱。要做到這一點(diǎn)，增加亮度和降低飽和水平。

不要在主色調(diào)上使用淺色

將彩色按鈕與中性灰色配對(duì)并不總是意味著彩色按鈕會(huì)得到更多的關(guān)注。如果主按鈕的顏色太輕，則中性輔助按鈕將更加突出

要避免這一錯(cuò)誤，請(qǐng)選擇不太明亮的顏色。明亮的顏色可能看起來(lái)很有吸引力，但它與白色背景或文字的對(duì)比不太好。在主按鈕上使用更暗的顏色，這樣第二個(gè)按鈕就不會(huì)引起注意。

5.復(fù)選框的設(shè)計(jì)與使用方式哪種更好

在界面上使用復(fù)選框之前，您必須先問(wèn)自己幾個(gè)問(wèn)題。復(fù)選框是否是在此上下文中使用的正確組件？如果是的話，最有用的顯示方式是什么？

許多設(shè)計(jì)師沒(méi)有問(wèn)這些問(wèn)題，自動(dòng)使用復(fù)選框，沒(méi)有太多的事先考慮。

因此，它們通過(guò)在錯(cuò)誤的上下文中使用它們而產(chǎn)生可用性問(wèn)題。

不僅如此，許多設(shè)計(jì)人員都很懶惰，期望前端寫成默認(rèn)選框完成這項(xiàng)工作，而不是

自定義復(fù)選框設(shè)計(jì)。但問(wèn)題是，前端默認(rèn)的復(fù)選框不能完成這項(xiàng)工作，因?yàn)樗鼈兊?

可用性很差。

大多數(shù)設(shè)計(jì)人員在復(fù)選框上會(huì)犯的幾個(gè)可用性錯(cuò)誤，這些錯(cuò)誤會(huì)破壞用戶體驗(yàn)。

單選與重復(fù)的選擇

在設(shè)計(jì)當(dāng)中我們經(jīng)常會(huì)遇到做選擇性的勾選，往往很多設(shè)計(jì)師會(huì)犯的一些錯(cuò)誤問(wèn)題和選擇障礙問(wèn)題。

通過(guò)更大的目標(biāo)來(lái)明確與用戶進(jìn)行選擇更為明確

我們?cè)O(shè)計(jì)單選框的時(shí)候這不是秘密而是讓用戶做出選擇，復(fù)選框是很難點(diǎn)擊，因?yàn)樗麄兊男糁心繕?biāo)。

設(shè)計(jì)師通常會(huì)讓標(biāo)簽點(diǎn)擊，但如果它不是直觀的，那也于事無(wú)補(bǔ)。

通過(guò)將復(fù)選框轉(zhuǎn)換為復(fù)選標(biāo)記，您可以為用戶提供更大的命中目標(biāo)和更清晰的交互提示。

重復(fù)物品的重量及數(shù)量選擇

有時(shí)你可能想提供不同數(shù)量的商品。使用多個(gè)復(fù)選框復(fù)制它會(huì)產(chǎn)生更多的文本來(lái)讀取，并使界面混亂,且讓用戶難以進(jìn)行選擇。對(duì)于增量輸入更改使用數(shù)字選擇器一次顯示該項(xiàng)會(huì)為更好些。

總結(jié)以上兩點(diǎn)，實(shí)際商用應(yīng)用案例如下所示

6.在設(shè)計(jì)當(dāng)中我們?cè)撊绾慰刂苾?nèi)容的突出性與閱讀性

新聞卡片的設(shè)計(jì)怎么才能突出信息內(nèi)容

卡片內(nèi)容有幾種文本類型，提供不同的信息功能。讓我們看看基本內(nèi)容卡的文本類型。

首先是眉毛，它是一個(gè)明確的詞或短語(yǔ)，用來(lái)描述內(nèi)容的主題。

還有一個(gè)標(biāo)題，它用一個(gè)句子中的幾個(gè)單詞告訴用戶內(nèi)容是關(guān)于什么的。

在此之后，就會(huì)有一個(gè)描述內(nèi)容的正文。

最后，就是時(shí)間與操作的按鈕

必須通過(guò)確定哪些文本類型對(duì)用戶更重要，從而為您的卡片新聞建立文本層次結(jié)構(gòu)。

此內(nèi)容新聞卡片的適當(dāng)文本層次結(jié)構(gòu)為：

1.眉毛-可以是時(shí)間，可以是新聞分類

2.標(biāo)題-最重要的是，因?yàn)樗枋龅膬?nèi)容最快。

3.正文-包含一個(gè)描述性段落，但閱讀時(shí)間最長(zhǎng)。

4.描述內(nèi)容的正文對(duì)內(nèi)內(nèi)容的簡(jiǎn)要描述。

您的內(nèi)容卡應(yīng)指導(dǎo)用戶按此順序?yàn)g覽文本類型。要實(shí)現(xiàn)這一點(diǎn)，您需要使用瀏覽控制對(duì)文本類型應(yīng)用適當(dāng)?shù)囊曈X(jué)強(qiáng)調(diào)。

控制用戶的瀏覽順序

通過(guò)適當(dāng)?shù)囊曈X(jué)強(qiáng)調(diào)，可以控制用戶瀏覽的順序，并指定反映文本層次結(jié)構(gòu)的瀏覽模式。

當(dāng)掃描遵循文本層次結(jié)構(gòu)時(shí)，用戶會(huì)浪費(fèi)更少的眼球運(yùn)動(dòng)，并且可以更快地處理信息。

下面的示例說(shuō)明了瀏覽控制如何讓眼球工作比較。不同的是強(qiáng)調(diào)不同的文本類型。

其他文本類型具有相同的強(qiáng)調(diào)度，這使得它們爭(zhēng)奪用戶的注意力。

其他設(shè)計(jì)形式及瀏覽方式

在內(nèi)容顏色的控制上我們可以為三種，重要的突出的需要用戶重點(diǎn)進(jìn)行關(guān)注的就用黑色

例如：#333333      #222222   #454545     等等色值

在不需要突出的內(nèi)容上我們可以用稍微淺一點(diǎn)的色值保證用戶能夠進(jìn)行閱讀即可，

例如：#999999      #787878   #666666     等等色值更加容易記住

其他輔助的內(nèi)容表達(dá)比內(nèi)容正文更淺

例如：#bbbbbb      #A8A8A8    等等色值

說(shuō)到這里我要說(shuō)一用戶體驗(yàn)關(guān)于文字的事情如果做出來(lái)的設(shè)計(jì)文字是給自己看的隨意設(shè)計(jì)讀沒(méi)人會(huì)說(shuō)你，有句話說(shuō)的好：現(xiàn)在

是內(nèi)容為王的時(shí)代，如果在內(nèi)容上不夠吸引或者顏色不夠吸引眼球那就是一個(gè)很失敗的案例。

轉(zhuǎn)自：站酷

作者：  東峰實(shí)業(yè)集團(tuán)

藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)