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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

按鈕放置事項

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

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

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

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

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

減少視覺固定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

大的側(cè)邊欄菜單甚至?xí)層脩艨雌饋砗懿浑p我們應(yīng)當(dāng)如何解決這一個問題。

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

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

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

菜單欄沒有主次之分

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

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

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

主項圖標(biāo)

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

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

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

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

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

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

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

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

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

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

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

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

他們?nèi)匀粫偁?，因?yàn)樗麄兊念伾珜Ρ榷认嗟取?

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

不要使用黑色輔助按鈕

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

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

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

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

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

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

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

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

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

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

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

可用性很差。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

控制用戶的瀏覽順序

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

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

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

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

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

在內(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    等等色值

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

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

轉(zhuǎn)自：站酷

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

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

互聯(lián)網(wǎng)下半場，所有的比拼都在產(chǎn)品體驗(yàn)；然而“體驗(yàn)”是一個非常抽象的詞，我們怎么把一個抽象的概念拆解成可落地執(zhí)行的策略，作用到企業(yè)中后臺產(chǎn)品上，怎么衡量策略的有效性，這一直是我們團(tuán)隊面臨的重大課題。

1.

業(yè)界關(guān)于體驗(yàn)度量的經(jīng)驗(yàn)

目前關(guān)于“體驗(yàn)度量”比較成熟的理論模型當(dāng)屬 Google 的 HEART 模型，另外還有 ISO 9126 軟件質(zhì)量模型和Davis 的 TAM 技術(shù)接受模型。后人在此基礎(chǔ)上進(jìn)行了很多實(shí)踐，譬如 SAP 的用戶體驗(yàn)問卷（UEQ）、Oracle 的客戶體驗(yàn)價值公式（CX）等。公司內(nèi)部各個 BU 也在不斷的嘗試和探索，譬如新零售技術(shù)團(tuán)隊的 TES 模型。技術(shù)團(tuán)隊研發(fā)效能的 DEVA 模型，國際 UED 語音設(shè)計的 HII 模型，阿里云的 QoUE 模型?？v觀這些模型和實(shí)踐，大多是主觀數(shù)據(jù)和客觀數(shù)據(jù)的結(jié)合。

我們團(tuán)隊也曾提出過 TECH 、PTECH 模型，但由于模型的操作門檻較高、對埋點(diǎn)數(shù)據(jù)有不少要求，難以推廣到各條業(yè)務(wù)線。痛定思痛后，我們決定重新回歸業(yè)務(wù)，回歸“體驗(yàn)度量”的初心，去繁從簡，提高通用性。

2.

企業(yè)中后臺產(chǎn)品的特點(diǎn)

企業(yè)級中后臺產(chǎn)品最大的特點(diǎn)是任務(wù)性質(zhì)非常明確；用戶使用這類產(chǎn)品通常是為了解決某個確定的問題點(diǎn)，期待用新的解決方式降本增效。

桌面研究也表明：可用性問題是軟件行業(yè)的普遍問題：在英國，一般商用計算機(jī)用戶只有30%-40%的有效生產(chǎn)率；軟件缺陷中，48%是可用性問題。

正是基于上述原因，我們嘗試提出了“兩章一分”的標(biāo)準(zhǔn)，分別從設(shè)計驗(yàn)收、可用性測試、易用度分?jǐn)?shù)等三個維度對產(chǎn)品體驗(yàn)進(jìn)行體檢和把關(guān)。

3.

什么是「兩章一分」

1. 設(shè)計驗(yàn)收章

“設(shè)計驗(yàn)收章”主要有 3 個維度：產(chǎn)品還原度、任務(wù)流程跑通率、單頁面加載時間。

產(chǎn)品還原度：指技術(shù)同學(xué)的最終產(chǎn)出與設(shè)計稿之間的差異；

匯總?cè)斯ぶ悄芫€、技術(shù)風(fēng)險線等 5 個產(chǎn)品近 1 年的可用性測試結(jié)果。除功能、性能問題外，高頻體驗(yàn)問題主要集中在“幫助引導(dǎo)”、“操作反饋”、“任務(wù)流程”、“概念術(shù)語”、“功能入口”這 5 個方面。同時，結(jié)合之前項目沉淀的設(shè)計經(jīng)驗(yàn)和設(shè)計工具，我們最終將“產(chǎn)品還原度”的子維度定為“信息導(dǎo)航”、“幫助引導(dǎo)”、“操作反饋”、“文案名詞”；每個子維度用 2-3 句描述來進(jìn)行評分。

任務(wù)流程跑通率：驗(yàn)收確認(rèn)能跑通的主干任務(wù)流程數(shù)，在所有主干任務(wù)流程數(shù)中的占比；舉個例子，設(shè)計稿中枚舉了 10 條主干任務(wù)流程，驗(yàn)收發(fā)現(xiàn)其中 9 條已跑通，那么任務(wù)流程跑通率就是 9/10*100%=90%。

單頁面加載時間：接入雨燕性能指標(biāo)數(shù)據(jù)的產(chǎn)品看“首次有效渲染時長 fmp”這個指標(biāo)；未接入的產(chǎn)品直接主觀判斷，超過 3 秒的視為不合格。

2. 可用性測試章

“可用性測試章”也在驗(yàn)收階段執(zhí)行，同樣有三個參評維度：最終完成率、人均求助次數(shù)和高阻礙頁面。

我們沒有考慮將可用性測試的常用指標(biāo)——操作時長作為參評維度，主要原因是企業(yè)中后臺產(chǎn)品類型多、使用場景復(fù)雜程度各自不同：用語雀創(chuàng)建企業(yè)空間只需要 5 分鐘；用云鳳蝶搭建一個后臺頁面可能需要 60 分鐘，用 sofa stack 創(chuàng)建并發(fā)布一個應(yīng)用可能需要 2-3 個小時……難以確定可以作為標(biāo)準(zhǔn)的具體操作時長。

3. 易用度分?jǐn)?shù)

“易用度分?jǐn)?shù)”標(biāo)準(zhǔn)為 5.5 分。

4.

「兩章一分」的實(shí)踐

1. 案例實(shí)踐現(xiàn)狀

截至 2020 年 9 月，已有 58 個 產(chǎn)品實(shí)踐過“兩章一分”系列方法，基本覆蓋平臺設(shè)計團(tuán)隊支撐的重點(diǎn)項目及 UV 超過 100 的產(chǎn)品。詳細(xì)數(shù)據(jù)如下圖：

完整體驗(yàn)“兩章一分”的 18 個產(chǎn)品，僅可用性測試就幫助發(fā)現(xiàn) 364 個問題，平均每個產(chǎn)品發(fā)現(xiàn) 20 個問題；其中，“九州2.0 發(fā)布部署”發(fā)現(xiàn)問題數(shù)多達(dá) 53 個。

2. 實(shí)操經(jīng)驗(yàn)提煉

設(shè)計驗(yàn)收：共創(chuàng)式驗(yàn)收

企業(yè)中后臺產(chǎn)品生產(chǎn)階段中，由于一般沒有專門的測試同學(xué)，因此設(shè)計驗(yàn)收都是由設(shè)計師或 PD 單獨(dú)執(zhí)行，沒有作為必選環(huán)節(jié)，有時候甚至?xí)驗(yàn)殚_發(fā)周期緊張而直接略過；既沒有方法論，又缺乏儀式感。

“兩章一分”的實(shí)踐中，我們首次踐行“共創(chuàng)式驗(yàn)收”，以項目組會議的方式，邀請各個角色共同參與到驗(yàn)收環(huán)節(jié)中：如果產(chǎn)品沒有什么技術(shù)門檻，那么各個角色分別獨(dú)立操作核心流程；如果產(chǎn)品有一定的技術(shù)門檻，則由技術(shù)同學(xué)操作核心流程，同時共享屏幕，其他同學(xué)從旁觀察。操作完畢后，項目組內(nèi)共同討論發(fā)現(xiàn)的體驗(yàn)問題，并將問題落地到 Aone 中進(jìn)行排期管理落地。

可用性測試：引入“技術(shù)支持”+圈定測試人數(shù)+ 線上測試降成本

• 引入“技術(shù)支持”

企業(yè)中后臺產(chǎn)品通常有一定的技術(shù)門檻，以 SOFAstack的測試任務(wù)為例：

使用 sofaboot 技術(shù)棧，創(chuàng)建 “hello world” 應(yīng)用，通過“經(jīng)典版”發(fā)布部署模式發(fā)布成功。

測試過程中經(jīng)常會出現(xiàn)一些涉及到底層技術(shù)系統(tǒng)的問題，非設(shè)計同學(xué)能解決，因此我們建議做企業(yè)中后臺產(chǎn)品的可用性測試時，需要配備至少一名技術(shù)支持同學(xué)，以備不時之需。

• 圈定測試人數(shù)

Jakob Nielsen 在 2000年提出測試 5 人就能發(fā)現(xiàn) 85%的可用性問題；結(jié)合我們的實(shí)際業(yè)務(wù)場景：有些產(chǎn)品真實(shí)客戶非常難找；前期“共創(chuàng)式驗(yàn)收”已跑通核心主干流程；因此我們將測試人數(shù)限制為 3 人。

• 線上測試降成本

我們開始實(shí)操案例時，恰逢疫情期間，于是就引入了線上遠(yuǎn)程測試的方式；后續(xù)實(shí)踐下來，發(fā)現(xiàn)遠(yuǎn)程測試能在觀察、分析階段顯著降低執(zhí)行成本。

通過釘釘或阿里郎發(fā)起視頻會議，邀請參加測試和觀察的同學(xué)入會，請測試用戶共享操作屏幕，主持人錄屏捕捉用戶操作軌跡，PD、技術(shù)等項目組成員從旁觀察。測試結(jié)束后，使用語音轉(zhuǎn)文本工具，快速將音頻轉(zhuǎn)成文字。這種模式最大的好處有兩點(diǎn)：

• 突破了距離和觀察人數(shù)的限制；從實(shí)踐來看，現(xiàn)場測試結(jié)合遠(yuǎn)程測試的模式，至少能同時對 2-3 人進(jìn)行測試，執(zhí)行成本減半；
• 語音轉(zhuǎn)文本后，顯著提升了分析效率。

執(zhí)行階段的多樣化

最開始提出“兩章一分”的時候，我們原本希望這套標(biāo)準(zhǔn)能被作為判斷產(chǎn)品體驗(yàn)是否好用，能否上線的標(biāo)準(zhǔn)之一；但實(shí)際并未推動成功。這里面有很多原因，其中一個非常實(shí)際的問題是很多產(chǎn)品需要調(diào)用線上數(shù)據(jù)庫才能跑通核心流程，在測試階段沒法跑通；這就導(dǎo)致在測試階段做可用性測試無法真實(shí)還原用戶場景。

此外，設(shè)計師或 PD 新接手某款產(chǎn)品時，也希望能通過可用性測試的方式來快速了解產(chǎn)品問題?；貧w到“兩章一分”的初心——幫助產(chǎn)品發(fā)現(xiàn)體驗(yàn)問題，因此，我們拓展了方法的執(zhí)行階段，不再局限于測試或驗(yàn)證階段，只要場景適合，都可以用。

3. 典型案例：LinkE 研發(fā)運(yùn)維中心一期

產(chǎn)品簡介

LinkE 研發(fā)運(yùn)維中心是云通未來 Serverless 戰(zhàn)場的重要產(chǎn)品；業(yè)務(wù)方希望用該產(chǎn)品來整合研發(fā)同學(xué)日常高頻使用的研發(fā)、運(yùn)維、中間件平臺，大幅減少平臺割裂和跳轉(zhuǎn)，提供沉浸式的產(chǎn)品體驗(yàn)。

目前該產(chǎn)品還處于 0-1 建設(shè)的階段。

實(shí)踐過程

• 為了確保產(chǎn)品體驗(yàn)良好，設(shè)計師在驗(yàn)收階段引入“兩章一分”，進(jìn)行共創(chuàng)驗(yàn)收和可用性測試；
• 共創(chuàng)驗(yàn)收階段，邀請 PD、技術(shù) 等 8 名同學(xué)一起參與，最終結(jié)果為“通過”；
• 可用性測試階段，設(shè)計師根研發(fā)通用場景，招募 6 名研發(fā)同學(xué)參與兩個可用性測試任務(wù)，分別為：任務(wù) 1，基于代碼變更完成研發(fā)自測聯(lián)調(diào)；任務(wù) 2，基于發(fā)布完成分支的集成、預(yù)發(fā)、灰度、生產(chǎn)

結(jié)果用戶在任務(wù) 2 遇到高阻礙頁面，導(dǎo)致可用性測試結(jié)果為“不通過”，任務(wù) 2 的易用度分為僅 4.4 分，顯著低于 5.5 分的參考標(biāo)準(zhǔn)；最終發(fā)現(xiàn) 30+ 問題點(diǎn)，并推動 PD 思考產(chǎn)品邏輯設(shè)置是否合理。

實(shí)踐效果

• 經(jīng)過兩次完整實(shí)踐，LinkE 設(shè)計師已能完全獨(dú)立操作執(zhí)行“兩章一分”；
• 業(yè)務(wù)方的參與度 & 認(rèn)知度提升明顯：已開始習(xí)慣將“兩章一分”設(shè)為項目里程碑，并全員參與進(jìn)來。

4. 實(shí)踐總結(jié)

在實(shí)踐過程中，我們發(fā)現(xiàn)企業(yè)中后臺產(chǎn)品的典型場景大致可以分為 4 個場景；不同場景面臨的設(shè)計項目有所偏重；不同設(shè)計項目在體驗(yàn)度量方面的切入點(diǎn)也有所不同。譬如：云鳳蝶是一個典型的沉浸式畫布頁面，所有操作幾乎都是通過編輯器屬性面板來調(diào)整，那么如何來評估編輯器的效率呢？通過一系列實(shí)踐和思考，我們提出可以通過“高頻屬性查找、配置的步驟數(shù)和時間”、“設(shè)置相同組件屬性的耗時變化”等指標(biāo)進(jìn)行衡量。以下是我們根據(jù)不同典型場景、設(shè)計項目提出的體驗(yàn)度量切入點(diǎn)。

5.

「兩章一分」的未來

經(jīng)過 S1 長達(dá)幾個月的探索：我們制定了“兩章一分”的標(biāo)準(zhǔn)；對 30+ 產(chǎn)品進(jìn)行了易用度分?jǐn)?shù)的測試，捕捉分?jǐn)?shù)基線；提煉實(shí)操方法技巧，并賦能給各位設(shè)計師；聯(lián)合設(shè)計師和業(yè)務(wù)方跑通近 20 個案例。不管是問題發(fā)現(xiàn)數(shù)量，還是設(shè)計師、業(yè)務(wù)方的主觀反饋，都讓我們堅定“兩章一分”在企業(yè)中后臺產(chǎn)品體驗(yàn)優(yōu)化中是一個相對有效的模式。為此，S2 我們打算繼續(xù)深化。

• 落標(biāo)準(zhǔn)：在關(guān)鍵業(yè)務(wù)線將“兩章一分”落地到業(yè)務(wù)生產(chǎn)環(huán)節(jié)中，不過“兩章一分”就不能上線；
• 分基線：區(qū)分不同產(chǎn)品類型和迭代大小，制定不同的易用度分?jǐn)?shù)基線；
• 升方法：針對跨產(chǎn)品、跨域等難以推動的橫向體驗(yàn)項目，我們考慮升級方法，如將可用性測試升級為“用戶體驗(yàn)日”，以便更好地推動問題落地；
• 閉案例：針對 S1 已跑通的業(yè)務(wù)，我們會在 S2 進(jìn)行案例閉環(huán)測試，以驗(yàn)證優(yōu)化效果是否真的能在“兩章一分”上體現(xiàn)出來；
• 始運(yùn)營：我們會挑選一些案例在公司內(nèi)外發(fā)聲，找相關(guān)業(yè)務(wù)領(lǐng)域的團(tuán)隊進(jìn)行交流和探討；并從案例中總結(jié)和提煉設(shè)計技巧，幫助業(yè)務(wù)成長。

總結(jié)

我們團(tuán)隊當(dāng)前支持的企業(yè)中后臺產(chǎn)品以 0-1 階段產(chǎn)品為主，PD 通常缺少用戶意識和體驗(yàn)優(yōu)化手段，這就導(dǎo)致了設(shè)計稿還原度較差、產(chǎn)品上手門檻較高。針對這一現(xiàn)狀，我們嘗試性地提出了“兩章一分”這個評價標(biāo)準(zhǔn)，從設(shè)計驗(yàn)收、可用性測試、易用度分?jǐn)?shù) 3 個維度來評價產(chǎn)品當(dāng)前的體驗(yàn)現(xiàn)狀。

通過 S1 50+ 產(chǎn)品的實(shí)操，我們一邊不斷完善評價標(biāo)準(zhǔn)和實(shí)操經(jīng)驗(yàn)，一邊總結(jié)體驗(yàn)度量經(jīng)驗(yàn)；共幫助 18 個產(chǎn)品發(fā)現(xiàn) 364 個產(chǎn)品，并在 link 、sofa 等重點(diǎn)產(chǎn)品線中落地到業(yè)務(wù)生產(chǎn)環(huán)節(jié)中，在業(yè)務(wù)方層面收到良好反饋。

在這過程中，我們總結(jié)了適合不同場景、不同設(shè)計項目的體驗(yàn)度量切入點(diǎn)，驗(yàn)證了這種方式在當(dāng)前企業(yè)中后臺產(chǎn)品中確實(shí)有效。后續(xù)我們將嘗試細(xì)化標(biāo)準(zhǔn)，閉環(huán)案例，對內(nèi)對外發(fā)聲等方式，更好地推動體驗(yàn)思維在企業(yè)中后臺產(chǎn)品生根發(fā)芽；同時，也期待能跟對這塊感興趣的同行朋友們多多交流。

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

編輯導(dǎo)讀：當(dāng)各大電商平臺忙著雙十一的時候，拼多多似乎是個獨(dú)特的存在，不慌不忙，圍觀在旁。拼多多為什么不重視雙十一？他們主要在忙什么？文章從這兩個問題出發(fā)，對此展開了分析解讀，一起來看看~

孫悟空是石頭縫里蹦出來的。阿里系幾位P8Plus的朋友和阿德哥聊時說，拼多多也是石頭縫里蹦出來的！

“打京辦”成立這么多年，沒承想打出個拼多多。剛剛發(fā)布的拼多多Q3財報顯示：首次單季度盈利，第三季營收142億元；GMV達(dá)1.45萬億，同比增長73%；活躍買家達(dá)7.31億……

在資本市場上，拼多多迅速趕超京東300億美元達(dá)1600億美元市值，成為國內(nèi)僅次于阿里、騰訊、美團(tuán)的第四大互聯(lián)網(wǎng)公司。

自2014年起，投資界便開始流傳“電商已是死賽道”的共識，拼多多的崛起給了投資界一記響亮的耳光，也再次說明了“長江前浪推后浪，江山代有才人出。”

與當(dāng)年打京辦、投蘇寧等手腕比，似乎阿里對拼多多已無招可施，重啟聚劃算、推淘寶低價版眼看也只是“補(bǔ)課動作”。而拼多多，卻正在暗暗部署更多領(lǐng)域，圈內(nèi)人說，“誰如果小看黃錚的野心，就等承認(rèn)自己是一個傻X”是同樣的邏輯。

“摁不住的拼多多！”阿里的多位朋友如是說。

低調(diào)的雙11

今年的雙11因?yàn)椤澳愣摹痹蚨@得波瀾不驚，除了天貓交出4982億元、京東交出2715億元的答卷之外，似乎乏善可陳……

“拼多多天天都是雙11！”

拼多多的朋友告訴阿德哥，所以他們不希罕宣布成績。

當(dāng)然，這并非拼多多的官方回應(yīng)，官方回應(yīng)說，拼多多更在意消費(fèi)者的購物體驗(yàn)。拼多多的Slogon是，多實(shí)惠，多樂趣。

一個小混混有了另立山頭的志向后，并非馬上另立山頭，他首先做的，不是去激怒原有的老大，而是，開辟自己的新陣地，帶自己的小弟。

拼多多只是不公布成績，并非沒有參與“雙11”盛宴。

曾國藩說，聰明的人都懂得“藏拙”，但只有少數(shù)人懂得“藏鋒”。

沒有滿減、蓋樓、升級列車、養(yǎng)貓……只有簡單的“低價”，拼多多副總裁陳秋說，本次雙11，拼多多的一切優(yōu)惠都將以最簡單的方式面向用戶，消費(fèi)者不用做滿減計算題，看到的即是最優(yōu)價。

前幾天，夫人非要去郵局給小侄子寄一堆童裝，這與阿德哥的習(xí)慣大相徑庭。可到了郵局，除了服務(wù)的眼神不對之外，價格真讓我驚喜：30多斤一大箱的衣服，郵寄費(fèi)30元。

總說國企服務(wù)沒跟上，可價格也真是“良心價”啊?！白怨耪媲榱舨蛔?，總是套路得人心”，黃崢說。

總是低價得人心！

阿德哥曾做過了多次田野訪問，得出兩個基本結(jié)論，一是老家很多親朋基本都知道淘寶，但大都卻正用拼多多；另一個是阿里、京東多年的鐵粉，居然瞬間被拼多多“拉走”。

“618”期間，一個朋友在京東購買售價1099元的Beats solo3藍(lán)牙耳機(jī)，已準(zhǔn)備在京東下手的他，突發(fā)異想去拼多多“多看了一眼”，499元。你沒看錯，不要599元！

這個朋友今天已是拼多多的優(yōu)質(zhì)用戶，幾個月時間里，貢獻(xiàn)了近三萬元的GMV。

打開拼多多APP，限時秒殺、斷碼清倉、XX特賣、9塊9特賣……不要小看這樣的戰(zhàn)陣：因?yàn)榇罅康奶貎r版塊，外加重頭推出的“百億補(bǔ)貼”，拼多多給用戶展示出的，可不就是天天雙11嘛？

而其背后的玄機(jī)則在于：通過不斷上新的各種大促，拼多多對于品牌的露出與銷量拉動，早已遠(yuǎn)超傳統(tǒng)電商“泛賣貨”模式，它一改小商家陪煉大玩家的傳統(tǒng)模式變成了“讓更多的商家可以雨露均沾”。

如果非得去探尋一下拼多多的崛起路徑，吃瓜瓤的多半會說，沒有淘寶就沒有今天的拼多多，沒有微信也沒有今天的拼多多。

這可以視為正確的廢話。

當(dāng)年抗美援朝的路上，也曾有不少志愿軍睡著了。

移動互聯(lián)網(wǎng)大潮來臨的時候，互聯(lián)網(wǎng)的生態(tài)發(fā)生了全新的變化，拉長時間線，誰臨陣換了大將，誰展開了整風(fēng)運(yùn)動？

江山代有才人出，丁磊的知音，段永平的弟子，黃崢當(dāng)立。

簡而言之，阿里為中國的電商事業(yè)立下了汗馬功勞，基本讓國人實(shí)現(xiàn)了在“消費(fèi)互聯(lián)網(wǎng)”端的揚(yáng)眉吐氣；而騰訊的QQ、微信，則讓國人實(shí)現(xiàn)了網(wǎng)絡(luò)“非主流意見市場”上聚集了最多的人。

創(chuàng)業(yè)，天時、地利、人和。黃崢不會都得，但都掙得了。

淘寶“開卷考試”帶來了最初的商家和貨品，微信“熱鬧人群”帶來了交易場景，砍價、拼單激發(fā)了社交流，拼多多，用了不到三年的時間，創(chuàng)造出了“新電商速度”。

隨后是C2M新品牌計劃，百億補(bǔ)貼的大品牌計劃，而快速上市帶來的則不僅是高光，更是贏得了“黃金時間”。

按照傳統(tǒng)電商資本套路，拼多多三季實(shí)現(xiàn)單季贏利之后，還有一年到一年半的“高增可虧損”黃金時間。換而言之，拼多多依然可以繼續(xù)實(shí)現(xiàn)補(bǔ)貼、營銷推動，而不必太在意贏利。

這樣的時間窗口，縱觀天下電商，唯拼多多有之。

有疑問的人，不妨多看看拼多多今年的前二季財報的營銷費(fèi)用率，答案擺在那兒呢。

恐怖的是，黃崢的野心并非只在“實(shí)物電商”，據(jù)說，在拼多多，更多的大殺器正在路上。

上天并非偏心，了解黃崢的人，知道，他只是大器晚成，而非天縱其才。

賣菜

并非拼多多不重視雙11，而是黃崢不重視，一是因?yàn)槠炊喽嘁焉狭塑壍?；二是因?yàn)辄S崢最近只關(guān)注另一件事——賣菜。這便是多多買菜。

疫情期間，拼多多便推出了線下團(tuán)購工具“快團(tuán)團(tuán)”，協(xié)助各地商家收集社區(qū)需求，從而實(shí)現(xiàn)在線下單。

此前8月，多多買菜正式上線，開始與興盛優(yōu)選、美團(tuán)買菜展開直接競爭，先是APP端出現(xiàn)多多買菜頻道，更是迅速推出同名小程序與“多多買菜門店端”服務(wù)號：采取的是與本地商超合作，線上賣菜、線下提菜的路徑。

與別家合作前置倉自建供應(yīng)鏈模式不同的是，多多買菜采取了只幫“合作商家”在線賣菜的方式，換而言之，多多買菜把實(shí)惠送給了合作商家，而它想要的似乎只是“用戶”。

在這一邏輯下，拼多多采取了極為激進(jìn)的補(bǔ)貼方式，以更高方式補(bǔ)貼團(tuán)長，打出的旗幟是10億量級，除此之外，還采取了“三高”戰(zhàn)術(shù)：高補(bǔ)貼拉新、高頻率回訪、率入駐。

賣菜熱不熱？

阿里、騰訊、美團(tuán)、滴滴、字節(jié)跳動盡數(shù)入局，而當(dāng)前跑得最猛的是拼多多——多多買菜。

多位競品人士告訴阿德哥，多多買菜團(tuán)隊更加年輕，除了在品控方面并未實(shí)現(xiàn)良好管控之外，其犀利程度、其執(zhí)行力，遠(yuǎn)超阿里鐵軍。

騰訊陣營拉出了興盛優(yōu)選、食享會；而阿里系除了為十薈團(tuán)、你我您合并之后的新十薈團(tuán)打通阿里供應(yīng)鏈之外，更是在近期有了新動作：菜鳥驛站團(tuán)購接入了大潤發(fā)的商超，盒馬推出了盒馬mini和盒粉群，據(jù)傳零售通事業(yè)部亦正在籌備新的社區(qū)團(tuán)購部門。

實(shí)際上，今年的互聯(lián)網(wǎng)，除了5G軟硬概念之外，最大的賽道是賣菜，它超過了前幾年前輩造出的“新零售”概念。

今年，以賣菜為核心的生鮮賽道上，目前已宣布和匯聚的資金已超過200億元。

黃崢?biāo)坪蹩礈?zhǔn)了這條賽道，而現(xiàn)在的增量搏殺，僅僅是開始。

“此一時”的策略，是黃崢鐵了心要拿下僅比外賣吃飯稍弱的剛需——買菜，既高頻，又具備想像力。

要知道，首先撬動農(nóng)村及五環(huán)外的，是拼多多。而拼多多C2M端的大成，其實(shí)在農(nóng)產(chǎn)品，賣空一個地方的農(nóng)產(chǎn)品，早已在拼多多持續(xù)實(shí)現(xiàn)。

而在未來嫁接進(jìn)自己的供應(yīng)鏈，顯然在邏輯上已是必須。而當(dāng)務(wù)之急，是拿下更大規(guī)模的“增量”用戶。

黃崢絕非魏延，僅僅是有反骨，他也更不會是鄧艾、鐘會，他是司馬一族。

黃崢如是說，我認(rèn)為最好的利用營收的方式就是投資R&D、基礎(chǔ)設(shè)施、用戶認(rèn)可度、品牌知名度。重要的是，

培養(yǎng)人們的消費(fèi)習(xí)慣，讓人們以拼多多為最主要的消費(fèi)平臺。

黃崢之野心，蒼天可鑒，近在咫尺的數(shù)據(jù)是：年活躍買家已增至7.313億人，第三季度平均月活躍用戶為6.434億人。

與之對應(yīng)的是，阿里最近的數(shù)據(jù)是：年活躍買家7.57億，2020年9月，中國零售市場移動月活躍用戶8.81億人。

有人在意ARPU值、GMV，但拼多多似乎更在意客單量、復(fù)購率和用戶數(shù)。

依阿德哥判斷，電商格局正在乾坤大挪移。

嗯，了不起的蓋茨比，摁不住的拼多多。

文章來源：人人都是產(chǎn)品經(jīng)理           作者：韓志鵬

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

亞馬遜作為一個知名的電商平臺，它的成功背后卻有一個很難讓人理解的設(shè)計邏輯：成功的設(shè)計不一定是美觀的。為什么會這么說呢？本文將從四個維度展開分析，希望對你有幫助

編輯導(dǎo)讀：如今，谷歌可以說是科技領(lǐng)域最大、最具有影響力的公司之一。正因?yàn)槿绱耍鼈兊臄?shù)字產(chǎn)品設(shè)計會對整個行業(yè)產(chǎn)生巨大的影響，成為人們競相模仿的榜樣。在該公司的UI&UX（用戶界面&用戶體驗(yàn)）設(shè)計指南中，設(shè)計師們提到了10條原則，不管是iOS還是安卓系統(tǒng)都同樣適用。在這篇文章中，作者從這10條指南出發(fā)，加上自己的經(jīng)驗(yàn)和相關(guān)案例，在設(shè)計方面為大家提供一些建議，希望對大家設(shè)計產(chǎn)品有幫助。

6. 利用聲音和觸感喚起用戶的情感

這里的聲音特指“Hero sounds”，用于襯托一些喜慶的、重要的高光時刻，它們常被用來激起用戶的情感，或烘托一種喜悅的氣氛，從而塑造產(chǎn)品或品牌在用戶心中的形象。以下場合適合使用 Hero sounds：慶祝用戶進(jìn)行了某項操作；歡迎用戶使用新的應(yīng)用程序或體驗(yàn)；確認(rèn)用戶成功使用某款產(chǎn)品?！豆雀杪曇粼O(shè)計指南》

聲音可以被用來傳遞成功、成就或獲得回報等信息。谷歌指南中提到，Hero sounds出現(xiàn)的次數(shù)不應(yīng)該頻繁，否則無法突出其重要性。通過在同樣的環(huán)節(jié)提供同樣的聲音，久而久之用戶會將這種提示音與成就感掛鉤，從而增加對產(chǎn)品的粘性。如每成功更新一次應(yīng)用程序就會出現(xiàn)慶祝的聲音，或者每次待辦事項標(biāo)記為完成后就會出現(xiàn)慶祝的提示音。

不管我們是否注意到這一點(diǎn)，我們所聽到的產(chǎn)品的聲音與自己的感覺都是相掛鉤的。無論是手機(jī)發(fā)出的“叮咚”的消息提示音，還是MacBook的廢紙簍在清空時發(fā)出的揉紙的聲音，都在某種程度上影響著我們的情緒，也幫助我們更加了解用戶界面上發(fā)生的一切。

觸覺可以和聲音配合使用，也可以單獨(dú)使用。舉個例子，在手機(jī)黑屏的時候，觸覺是唯一一種可以對用戶提供反饋的方式。和其他配合使用時，觸覺應(yīng)該強(qiáng)有力、傳達(dá)愉悅的情緒?！栋沧坑|覺設(shè)計指南》

除了聲音之外，觸覺設(shè)計（如震動）也是一種刺激感覺的好方法，可以為用戶提供更加完整的體驗(yàn)。用戶可以通過觸覺提示來嘗試、學(xué)習(xí)使用某一款產(chǎn)品。在有了不同的觸覺體驗(yàn)后，我們將會對產(chǎn)品的某些功能有更加深入的了解。

舉個例子，如果某個用戶通過APP進(jìn)行付款，但在付款過程中出現(xiàn)了錯誤。這時候APP會進(jìn)行一連串緊張、短促的震動，對用戶進(jìn)行錯誤反饋。當(dāng)用戶熟悉了這種震動模式之后，下一次再感受到這種震動，就會立刻知道付款出現(xiàn)了問題。

產(chǎn)品設(shè)計師很容易忽略聲音和觸覺這兩個板塊，而過度專注于畫面。但這兩個板塊卻也扮演著非常重要的效果，可以為用戶體驗(yàn)錦上添花。

7. 通過動圖表達(dá)獨(dú)特的風(fēng)格、塑造個性化品牌體驗(yàn)

圖片來自Material

動圖可以增加用戶的好感，在互動中為用戶增加個性化體驗(yàn)，也可以表現(xiàn)品牌獨(dú)特的風(fēng)格?！豆雀枋謩菰O(shè)計指南》

動圖是我自己設(shè)計的產(chǎn)品Confetti中一個非常重要的因素，這是一款運(yùn)動追蹤APP，是為那些追蹤自己生活習(xí)慣的用戶設(shè)計的。在設(shè)計這款產(chǎn)品時，我希望可以為用戶創(chuàng)造出一種滿足感，鼓勵他們培養(yǎng)好習(xí)慣。在這款A(yù)PP中，我大量使用切換功能，通過不同的手勢，界面或進(jìn)程可以平滑過渡，使用起來非常便捷。當(dāng)一個好習(xí)慣完成時，還會出現(xiàn)彩屑動畫飛舞的，加強(qiáng)用戶的滿意度。

簡言之，動圖可以應(yīng)用于不同的場景，通過過渡和變化的吸引用戶。

動圖可以強(qiáng)化兩種元素之間的聯(lián)系，實(shí)現(xiàn)快速切換，迅速解決特定的任務(wù)。動圖可以讓用戶專注于眼下最重要的事，不被其他因素所干擾?！豆雀枋謩菰O(shè)計指南》

在2020年，你的產(chǎn)品可以在一秒之內(nèi)激怒用戶。正如塔拉斯·斯凱斯基（Taras Skytski）在《用戶體驗(yàn)設(shè)計中動畫使用的終極指南》中指出的那樣：“眾多研究發(fā)現(xiàn)，界面動畫的最佳速度在200到500毫秒之間。這一數(shù)字是通過研究人類大腦運(yùn)行機(jī)制所得出的。100毫秒及以下的動畫因?yàn)樗俣忍潭鵁o法被識別，而超過1秒的動畫則會造成一種延遲感，讓用戶感到不舒服?！?/span>

通過動圖及產(chǎn)生的動畫效果（如切換）可以改善用戶體驗(yàn)，同時保證可以迅速找到需要的版面，而不被其他信息干擾。但如果動圖及切換畫面的過程增加了不必要的等待時間，又不能改善體驗(yàn)，那么這種環(huán)節(jié)就沒有必要存在。

8. 通過圖像進(jìn)行交流，并區(qū)分和突出產(chǎn)品特性

圖片來自Bribble｜制圖Elena Petkovska

我們或多或少都有這樣的體驗(yàn)：打開一個界面，里面充斥著太多文字和太少的圖像。在用戶體驗(yàn)設(shè)計中，展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產(chǎn)品，而是希望通過圖像對一款產(chǎn)品進(jìn)行直觀的視覺理解。

你所選擇的圖像應(yīng)該能夠清晰地展示產(chǎn)品特點(diǎn)，不管是用戶自己上傳的圖片，專業(yè)攝影師的圖片，還是插畫風(fēng)格的圖片，它們都應(yīng)該能直觀展示產(chǎn)品外觀，反應(yīng)產(chǎn)品的特點(diǎn)?！豆雀鑸D像設(shè)計指南》

APP里的插圖和所有的視覺元素一樣重要，好的圖片可以讓用戶界面更加生動，使用戶體驗(yàn)更加完善。恰當(dāng)?shù)膱D片還能展示品牌風(fēng)格，成為無聲的“故事講述者”。

我們應(yīng)當(dāng)有目的地使用圖像，作為總體內(nèi)容的補(bǔ)充而非替代。照片或者插圖最好能夠傳達(dá)足夠的信息，如產(chǎn)品外形、風(fēng)格，APP的用途，狀態(tài)等。媒體界有這么一句話：一張圖片抵得上1000個字。你可以在Unsplash、Pexels、Adobe Stock等網(wǎng)站上找到高質(zhì)量的圖片。

9. 關(guān)注產(chǎn)品的像素密度

圖片來自Material

用戶界面設(shè)計中應(yīng)該關(guān)注產(chǎn)品的像素密度，讓界面可以適應(yīng)不同的屏幕?！豆雀柘袼孛芏仍O(shè)計指南》

像素密度（PPI）是用來衡量每物理英寸的像素數(shù)。另一個常用的單位是DP（Density-independent pixels，有時候簡稱為DIP）。像素密度=屏幕寬度或高度（以像素為單位）/屏幕寬度或高度（以英寸為單位）。

在設(shè)計界面時，我們不應(yīng)該只關(guān)注像素，還應(yīng)該關(guān)注不同設(shè)備的像素密度。這樣可以讓我們在做設(shè)計時保證元素適當(dāng)縮放，以適應(yīng)不同屏幕的尺寸。

舉個例子，我們現(xiàn)在有一個按鈕素材資源，大小為200 x 50 px。在一個160ppi的屏幕上可以原畫顯示；在一個320ppi的屏幕上它就會擴(kuò)大成400 x 100 px，相當(dāng)于原始素材的兩倍大。

通過以上例子我們可以了解，在像素密度不同的屏幕上，素材呈現(xiàn)的狀態(tài)是不一樣的。在實(shí)際應(yīng)用中，素材可以會被放大三倍甚至四倍，如果素材不夠清晰，就會在拉大后虛掉。這就需要我們在選擇素材時格外謹(jǐn)慎，嘗試在不同設(shè)備上打開并檢查。

素材密度如何適應(yīng)屏幕尺寸？舉個例子，iPhone XS Max的屏幕是414 x 896 pt，注意這里的尺寸是物理尺寸pt，而非像素。如果以像素為單位計算，那么它的屏幕是1242 x 2688 px。所以當(dāng)我們?yōu)閕Phone XS Max設(shè)計應(yīng)用產(chǎn)品時，我會首先考慮用414 x 896 pt的素材，然后在輸出素材時將其乘以3。

10. 考慮設(shè)計在線/離線狀態(tài)

圖片來自Material

離線狀態(tài)可以讓用戶知道這款應(yīng)用程序沒有連接網(wǎng)絡(luò)。如果你的產(chǎn)品有一些功能需要聯(lián)網(wǎng)使用，你最好能向用戶明確顯示連線狀態(tài)?！豆雀桦x線設(shè)計指南》

離線訪問功能是設(shè)計師經(jīng)常忽略、對用戶體驗(yàn)影響卻非常重要的一環(huán)。雖然有些功能離線也可以使用，但是在能聯(lián)網(wǎng)的時候，最好還是主動提示用戶，推薦他們連接網(wǎng)絡(luò)。

如果有可能的話，要提前告知用戶下載相關(guān)信息，以便脫機(jī)訪問。最常見的例子就是Spotify等音樂應(yīng)用程序，它允許用戶下載歌曲，以便在沒有網(wǎng)絡(luò)的時候也能繼續(xù)聽歌。

假如你的產(chǎn)品不像Spotify或者Netflix那樣需要下載具體內(nèi)容，你可以發(fā)揮創(chuàng)意來設(shè)計在線、離線兩種模式。

谷歌瀏覽器在離線頁面提供恐龍游戲就是一個著名的例子（在谷歌瀏覽器連網(wǎng)的過程中，離線畫面會出現(xiàn)一只霸王龍，按空格鍵或者向上的箭頭就能控制霸王龍——譯者注）。這個小游戲填補(bǔ)了用戶等待連線的時間，將消極體驗(yàn)轉(zhuǎn)變成了積極體驗(yàn)。

11. 總結(jié)

我希望這份設(shè)計指南可以為你提供一些想法。除了谷歌的設(shè)計指南之外，我們還可以在IEM Carbon、Zendesk Garden、Workday Canvas等網(wǎng)站找到關(guān)于用戶界面和用戶體驗(yàn)的設(shè)計指導(dǎo)，在這一領(lǐng)域進(jìn)行更深入地探索。

文章來源：人人都是產(chǎn)品經(jīng)理           作者：Danny Sapio           譯者：Michiko

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