1.為什么用戶使用對齊標簽填寫表單的速度更快

想象一下，一個用戶已經(jīng)準備好注冊您的站點了。他們會進入你的表格并輸入他們的信息。字段標簽對齊的方式會影響用戶填寫表單的速度。

你是想給用戶提舒適體驗，還是想給他們一個麻煩？

如果您想讓他們的體驗更快更容易，請使用輸入框上面的字段對齊標簽.或輸入框內(nèi)的對齊標簽模式。

與左對齊和右對齊的標簽相比，頂部對齊或內(nèi)部左對齊標簽填寫起來更快、更容易。這是因為標簽只需要有一半多的視覺固定物。

頂部對齊標簽還允許用戶以一個可視方向向下移動輸入框。左對齊和右對齊的標簽需要兩個視覺指示才能填寫。

頂部對齊標簽的唯一缺點是，它們可以使表單變得很長。但是現(xiàn)在用戶滾動的頻率越來越高，所以這不是問題。

通過減少字段之間的空白，可以減少表單長度。您還可以將表單拆分成多個頁面，以使表單更短。

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

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

如果頂部對齊的標簽能夠給用戶提供更好的表單體驗，那么它是值得采用的。設(shè)計師應(yīng)該更多地考慮他們的字段標簽對齊。

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

2.為什么對話框中的“確認”按鈕在右邊工作得最好

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

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

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

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

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

如果某個設(shè)計約定對用戶有害呢？設(shè)計師應(yīng)該為了一致性而盲目地遵循嗎？糟糕的設(shè)計實踐是否應(yīng)該持續(xù)下去，因為設(shè)計師們希望通過平臺設(shè)計的一致性來解決每一個問題？

今天，有一些平臺設(shè)計約定被廣泛使用，因為它們是為用戶工作的。但這里的要點是，平臺設(shè)計的一致性永遠不應(yīng)該讓設(shè)計師滿意，因為這是做某事的唯一理由。理解為什么您應(yīng)該以一種方式而不是另一種方式來設(shè)計您的用戶界面的原因是關(guān)鍵。

按鈕放置事項

人們可能會說，讓你的動作按鈕突出給它更多的視覺重量和一個清晰清晰的標簽比它的位置更重要。雖然動作按鈕的視覺重量和標簽是一個重要的設(shè)計方面需要考慮，但它不是唯一的方面。

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

對于設(shè)計師來說，最難搞清楚的是主動作和次要動作是如何放置的。這就是為什么“確認”/“取消”按鈕的爭論在設(shè)計師中如此流行的原因。

為什么‘確認’按鈕在右邊工作得最好？

當你通過了平臺慣例的爭論后，你會質(zhì)疑哪個位置最有效。您可以通過分析設(shè)計如何影響用戶來解決這個問題。

減少視覺固定

一些設(shè)計師認為，在第二個操作之前將主操作放在左邊對用戶更好，因為它更接近，因此，點擊的時間更少。

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

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

他們將首先看到左邊的主要動作，然后查看右邊的次要動作。然后，他們會把眼睛移回主要的動作，點擊它。這將在多個方向上總共創(chuàng)建三個視覺固定。

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

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

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

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

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

它類似于分頁按鈕的放置方式。將用戶帶到下一頁的按鈕位于右側(cè)，將用戶帶回其早期頁面的按鈕位于左側(cè)。這個按鈕的放置工作是因為它映射到用戶從左到右的閱讀和導航方向，其中右是前進的方向，左是后退的方向。

對話框中的“確認”和“取消”按鈕應(yīng)該遵循類似的交互模式，因為它們的功能類似于分頁按鈕。

不僅如此，在中國用戶習慣了左右方向的模式。

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

為用戶提供更有效的視覺流暢度

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

用戶在掃描時不會跳過主動作按鈕。當他們通過時，他們的眼睛就會盯著它，所以他們可以立刻點擊它。

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

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

的角中時，它將很好地映射到左右方向。但是，由于‘取消’和‘確認’按鈕不是導航按鈕，所以沒有必要遵循方向映射。有時它弊大于利。

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

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

我們經(jīng)常卸載軟件的時候一不留神就會點錯，或者是我們在裝某一個軟件的時候全家桶一擁而上。所以在不同場景當中我們所用的按鈕形態(tài)也是不一致的。

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

大的側(cè)邊欄菜單甚至會讓用戶看起來很不雙我們應(yīng)當如何解決這一個問題。

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

當它們都有相同的視覺處理時，菜單項很難進行識別與區(qū)分。

如果不修復這個問題，會導致用戶放慢他的瀏覽速度從而導致用戶的流失在大的層面來講，小的層面來講閱讀不爽導致關(guān)閉頁面。

菜單欄沒有主次之分

當您對菜單項進行全文本或全圖標處理時，問題就會出現(xiàn).當用戶掃描他們想要的項目時，他們的注意力分散在菜單周圍。這是因為沒有層次來吸引他們的注意力。

通過將用戶的注意力引導到您的主要項目，使您的菜單可掃描。

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

主項圖標

與其在每個菜單項上放置圖標，還不如將其放置在主菜單項上。視覺強調(diào)首先將用戶的注意力引導到這些項目上。

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

略大一點的圖標

如果要使所有圖標處，請稍微放大需要突出的圖標。

稍微的增大會使視覺效果有很大的不同，同時字形更容易辨認，每一行的線高也會增加。讓整個看起來更加有空間感一些。

讓用戶瀏覽閱讀起來也會更加舒暢一些。

4.在按鈕上避免顏色對比度錯誤

想象一下，當用戶在您的界面上遇到一對按鈕時，他們猶豫不決。

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

他們的選擇按鈕做出決定，而且不確定，因為你的按鈕沒有層次結(jié)構(gòu)。

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

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

他們?nèi)匀粫偁?，因為他們的顏色對比度相等?

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

不要使用黑色輔助按鈕

設(shè)計師的另一個趨勢是把第二個按鈕變成黑色。他們認為，使用中性的顏色，它是不會競爭的。然而，黑色按鈕更為突出，因為它有一個更高的對比度。

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

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

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

要避免這一錯誤，請選擇不太明亮的顏色。明亮的顏色可能看起來很有吸引力，但它與白色背景或文字的對比不太好。在主按鈕上使用更暗的顏色，這樣第二個按鈕就不會引起注意。

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

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

許多設(shè)計師沒有問這些問題，自動使用復選框，沒有太多的事先考慮。

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

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

自定義復選框設(shè)計。但問題是，前端默認的復選框不能完成這項工作，因為它們的

可用性很差。

大多數(shù)設(shè)計人員在復選框上會犯的幾個可用性錯誤，這些錯誤會破壞用戶體驗。

單選與重復的選擇

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

通過更大的目標來明確與用戶進行選擇更為明確

我們設(shè)計單選框的時候這不是秘密而是讓用戶做出選擇，復選框是很難點擊，因為他們的小擊中目標。

設(shè)計師通常會讓標簽點擊，但如果它不是直觀的，那也于事無補。

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

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

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

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

6.在設(shè)計當中我們該如何控制內(nèi)容的突出性與閱讀性

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

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

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

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

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

最后，就是時間與操作的按鈕

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

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

1.眉毛-可以是時間，可以是新聞分類

2.標題-最重要的是，因為它描述的內(nèi)容最快。

3.正文-包含一個描述性段落，但閱讀時間最長。

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

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

控制用戶的瀏覽順序

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

當掃描遵循文本層次結(jié)構(gòu)時，用戶會浪費更少的眼球運動，并且可以更快地處理信息。

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

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

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

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

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

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

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

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

例如：#bbbbbb      #A8A8A8    等等色值

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

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

轉(zhuǎn)自：站酷

作者：  東峰實業(yè)集團

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