導(dǎo)語

隨著各類App的業(yè)務(wù)功能不斷豐富，小紅點已經(jīng)成為互聯(lián)網(wǎng)從業(yè)者們最常使用的運營工具之一，每當(dāng)有新的運營內(nèi)容或新功能上線，大家的做法往往是“在那放個紅點就行了”。然而簡單粗暴的形式以及不加節(jié)制的投放，讓小紅點變成了人人厭煩的“小妖精”。本文從設(shè)計的角度出發(fā)淺談小紅點的一些設(shè)計細(xì)節(jié)，期望引起大家對小紅點的關(guān)注，在這里拋磚引玉，也期待感興趣的小伙伴一起探討。

煩人的小紅點

人類似乎天生對不對稱，不和諧的事物有厭煩心理，并且想要去糾正這些“錯誤”，簡而言之就是大家平時所說的“強迫癥”。而小紅點則完美利用了這一人性的弱點，它就像白嫩臉頰上長出的一顆小痘痘，讓人忍住不去要去擠破它。因此，小紅點也成為了一把產(chǎn)品運營利器，只要投放在某個業(yè)務(wù)入口，就幾乎沒有用戶會對它熟視無睹，而當(dāng)用戶忍不住要去輕觸消除它時，產(chǎn)品側(cè)為業(yè)務(wù)導(dǎo)流的目的也就達(dá)到了。

那么問題來了，用戶喜歡小紅點嗎？在Google和必應(yīng)上搜索關(guān)鍵詞“App 小紅點”，幾乎有一半的搜索結(jié)果是“教你如何消除小紅點”。

在過去的幾年當(dāng)中，網(wǎng)絡(luò)上所流傳的各種設(shè)計和開發(fā)資源，在素質(zhì)上有明顯的提升。其中有一些已經(jīng)幾乎成為了設(shè)計師和開發(fā)者必備的工具，但是其中絕大多數(shù)由于其應(yīng)用范疇的局限，或者傳播不夠廣，導(dǎo)致它們大多并廣為人知。將這些素材集中到一起，很大程度上是希望它們的目標(biāo)用戶能夠明白，需要這些工具的時候，上哪兒找。

這次的前端干貨合集內(nèi)容也很齊全，仔細(xì)看看，總能找到幾款你所需要的。

MuzzleApp

表單設(shè)計中，各種設(shè)計模式和技巧已經(jīng)越來越成熟了。在諸多設(shè)計技巧當(dāng)中，懸浮標(biāo)簽這一設(shè)計手法，應(yīng)該是對于用戶體驗提升最明顯的一種。早在2013年8月的時候，我第一次考慮在自己設(shè)計的表單中運用懸浮標(biāo)簽，這個想法很簡單，在占位符文本中，借助動畫加入一個圖標(biāo)顯示，確保用戶不會在填寫過程中迷失。

不知道大家有沒有這樣的情況發(fā)生，自己設(shè)計的作品，“乍一看不怎么樣，仔細(xì)一看，還不如乍一看”！

其實不耐看，或者不敢放大看的原因都是細(xì)節(jié)做的不到位。

最近在做手機OS的主題圖標(biāo)，對細(xì)節(jié)的感觸很大，今天結(jié)合主題圖標(biāo)來和大家聊聊，我們可以從哪些方面注意自己的設(shè)計細(xì)節(jié)，大綱如下：

• 給造型加點細(xì)節(jié)
• 多加點質(zhì)感的細(xì)節(jié)
• 不要讓圖標(biāo)看著灰灰的
• 風(fēng)格特點的運用

1. 給造型加點細(xì)節(jié)

造型是所有設(shè)計執(zhí)行的第一步，造型做不好，說別的都沒用。

那如何能給造型加點細(xì)節(jié)呢？

打個比方，我們要畫一個圓角矩形：

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

很多設(shè)計中，我們付出20%的精力就可以應(yīng)付80%的 Normal Case，而剩下20%的 Special Case 卻會花費我們80%的精力。換言之，普通情況誰都會處理，而為了應(yīng)對一些少數(shù)派，我們將要付出更多。

Loading 失敗時的錯誤提醒、搜索無少結(jié)果時的空白頁面、打了車卻沒車接單……除了這正常流程下的失敗反饋以外，最耗時間的是那些特殊流程或所有情況同時在一個頁面堆砌出現(xiàn)的情況。

在設(shè)計前期，我們就應(yīng)該盡可能地羅列特殊情況，即便它們出現(xiàn)的概率很低，也應(yīng)留足設(shè)計時間。而應(yīng)對非常規(guī) Case 時，有一條原則幫了我很多次：

確保多數(shù)人體驗的前提下，才去解決少數(shù)人的問題。

這不是說要為了多數(shù)人放棄少數(shù)人，還是造例子來說吧。

案例一：重復(fù)利用的物流單號

如果你在天貓有過退貨經(jīng)驗就會知道，申請退貨并得到商家確認(rèn)后，需要填寫退貨的物流單號，當(dāng)商家收貨后才會把錢退給你。這里有個奇妙的問題，設(shè)計上是否允許多個用戶填寫同一個退貨單號？

先來看看如果允許，會出現(xiàn)什么非常規(guī)情況：消費者AB兩人各自在同一個商家C處購買了兩臺 iPhone，并且商量好分別發(fā)起七天無理由退貨流程，商家C均同意。然后，消費者A先將手機按要求寄出，獲取物流單號一個后填寫到退貨系統(tǒng)；同時，消費者B直接使用消費者A的退貨單號填入系統(tǒng)，但不寄送自己的手機。

極端情況體現(xiàn)在，許多商家的店鋪與倉儲是分開的，當(dāng)倉庫收到A寄來的手機并確認(rèn)收貨后，店鋪工作人員收到系統(tǒng)通知兩個退貨流程都已收貨（其實是同一個單號），若不進行額外確認(rèn)，就會把錢都退回去了。

再來看不允許重復(fù)填寫同一個物流單號的情況：很簡單，AB兩個消費者是好人，但希望節(jié)省快遞費，就商量好把兩個手機放在一個包裹里寄回。此時若規(guī)則只允許一個單號只能填寫一次，這種做法就無法實現(xiàn)。

錯誤的設(shè)計方法是這樣的：用戶填寫退貨單號時，新增一個流程詢問用戶該單號是否只關(guān)聯(lián)了一個訂單，訂單號是多少；或者在原有基礎(chǔ)上新增一個聯(lián)合退貨的功能，讓多個用戶合伙拼單退貨。

正確的設(shè)計方法是這樣的：消費者端流程全部不變，允許重復(fù)填寫物流單號，但必須在后臺記錄一條單號被使用的次數(shù)。對于被多次填寫的單號，在商家端告知商家須額外注意，一定與倉庫確認(rèn)好包裹內(nèi)物品再進行退款操作。

錯誤方法的錯誤原因很簡單，我們不能為了一些極端情況就去修改主流程，也不能為了少數(shù)人的需求就影響所有正常用戶。

案例二：互相沖突的 Toast 提醒

天貓客戶端的商品詳情頁中，當(dāng)點擊“收藏”按鈕會有一個 Toast 告訴用戶“收藏成功”，同樣當(dāng)點擊“加入購物車”后，也會有 Toast 告訴用戶“加入成功”。這樣看好像沒什么問題，但若用戶點完“收藏”后馬上點擊“加入購物車”，就會出現(xiàn)兩個 Toast 相互沖突的情況——視覺上互相重疊，或后一個 Toast 無法出現(xiàn)。再極端一點，如果出現(xiàn)了一個腦殘用戶，為了測試反復(fù)快速點擊兩個按鈕，甚至?xí)?dǎo)致代碼錯誤。

為了追求設(shè)計和代碼邏輯的嚴(yán)密，我和開發(fā)同學(xué)花費了不少時間討論對于這種極端情況，要如何設(shè)置 Toast 的出現(xiàn)和沖突機制。甚至為了應(yīng)對極端情況，還需要調(diào)整 Toast 出現(xiàn)消失的動畫過程與邏輯。但最后，我只設(shè)置了2個 Toast 在極短時間內(nèi)前后觸發(fā)的交互，也就是新的 Toast 慢慢把舊的推上去，并各自做淡入淡出動畫——畢竟兩次短促的操作是比較可能會發(fā)生的。

什么？你問我那個腦殘用戶怎么辦？不好意思，為了滿足所有正常用戶的訴求，腦殘用戶的體驗就只好先放一放了……

案例三：神出鬼沒的 Loading

我們在客戶端上做了一個比較酷的動畫，對一個模塊長按后可以彈出一張卡片，并在卡片中閱讀一些詳情（有點像 3D Touch）。問題在于，彈出卡片中的信息是觸發(fā)卡片后才向服務(wù)器請求數(shù)據(jù)并加載的，正常情況下沒有問題，但是弱網(wǎng)條件下，數(shù)據(jù)加載可能會花費不少時間。為此，第一版我們?yōu)檫@個數(shù)據(jù)請求設(shè)計了一個 Loading 的小動畫（好吧，你就當(dāng)是轉(zhuǎn)菊花）。

這樣做的結(jié)果是，對于網(wǎng)絡(luò)非常流暢的用戶，他們喚起這張卡片時，會看到一個菊花飛快地閃過，然后才看到數(shù)據(jù)加載——再流暢的網(wǎng)絡(luò)下，數(shù)據(jù)也需要加載時間，哪怕是1ms，都會讓菊花快速閃爍。

當(dāng)然，不要 Loading 也明顯不合理。弱網(wǎng)條件下，必須避免用戶盯著空白的卡片發(fā)呆而不知道系統(tǒng)正在干什么。

所以，合理的做法是，為 Loading 動畫的出現(xiàn)時間設(shè)置一個延遲：在卡片彈出的200ms內(nèi)（卡片不可能突然閃爍出現(xiàn)在用戶面前，必須有一個進場過程），如果數(shù)據(jù)加載完畢，則不顯示 Loading 動畫，直接顯示數(shù)據(jù)。如果卡片進場完畢（200ms后）數(shù)據(jù)還沒回來，則開始顯示 Loading 動畫。

這樣，我們保證了正常用戶的正常體驗，避免他們每一次操作都為弱網(wǎng)這一極端情況買單。同時，也保障了弱網(wǎng)用戶的體驗。

最后，再總結(jié)一下我們的設(shè)計原則：確保多數(shù)人體驗的前提下，才去解決少數(shù)人的問題。

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

即使你遠(yuǎn)離設(shè)計領(lǐng)域，對于用戶體驗這一詞也不會陌生。用戶和產(chǎn)品之間進行交互過程中，產(chǎn)生的一般態(tài)度和情感反饋就是我們常說的用戶體驗。在用戶體驗設(shè)計中，有幾個關(guān)鍵性的因素的是設(shè)計師所關(guān)注的，比如可用性（usability）、工具性（utility）、合意性（desirability）、吸引度（attractiveness）等。如今，用戶體驗設(shè)計和視覺設(shè)計幾乎達(dá)到了同等重要的程度。雖然仍有一些企業(yè)和團隊在懷疑用戶體驗設(shè)計是否有必要，但是總體上，大家對于它的認(rèn)可度還是非常高的。

用戶體驗設(shè)計為何重要？

許多公司為了讓產(chǎn)品產(chǎn)品的體驗和效率更高，而花費更多的時間和金錢?，F(xiàn)代商業(yè)競爭背景下，事實已經(jīng)證明，產(chǎn)品和服務(wù)的成功很大程度上是取決于用戶對于產(chǎn)品的喜愛程度。UX設(shè)計旨在通過讓產(chǎn)品更易于使用而提高用戶的滿意度。

有些人可能還認(rèn)為用戶體驗設(shè)計的核心是視覺設(shè)計，其實它的范疇遠(yuǎn)不止于此。UX設(shè)計是一個復(fù)雜的過程，涵蓋了用戶研究，線框圖、原型、視覺稿、動畫、開發(fā)、測試等許多不同的環(huán)節(jié)和階段，其中許多環(huán)節(jié)甚至是并發(fā)和交叉的。真正有效的用戶體驗需要時間來開發(fā)，也需要足夠的知識來作為支撐，這種復(fù)雜的開發(fā)體系使得它或多或少地需要超出預(yù)期的額外投資。然而，UX設(shè)計對于初創(chuàng)和非初創(chuàng)公司而言，同樣有益，它確確實實從不同的方面幫助企業(yè)創(chuàng)造成功的產(chǎn)品，無論是參與度、可用性還是轉(zhuǎn)化率。

如果你擁有一個復(fù)雜的電商網(wǎng)站系統(tǒng)，那么用戶體驗一定是影響它實際效用的重要因素。內(nèi)容組織是否系統(tǒng)，導(dǎo)航是否清晰，都會影響到產(chǎn)品的銷售，用戶的黏度。太復(fù)雜、不便捷的產(chǎn)品會讓用戶流失，這是肯定的。

有數(shù)據(jù)表明，近年來95%的移動端APP 在上線一個月內(nèi)就宣告失敗而退出。這很大程度上是因為激烈競爭之下，沒有足夠優(yōu)秀的用戶體驗來留住用戶所造成的結(jié)果。結(jié)合現(xiàn)有的研究和我們自己的經(jīng)驗，我們在今天的文章中總結(jié)出了優(yōu)秀產(chǎn)品的7個關(guān)鍵的用戶體驗設(shè)計要素。

1、有效的可用性設(shè)計

現(xiàn)如今，“簡單”一詞和無聊的設(shè)計并無關(guān)系，而是成功產(chǎn)品設(shè)計的關(guān)鍵性要素。在Don Norman 的《設(shè)計心理學(xué)》系列教材中指出，良好的設(shè)計通常都會具有易于發(fā)現(xiàn)和易于理解兩個特性。用戶期望他們所使用的產(chǎn)品是簡單明了的，能夠讓他們不花費太多精力就可以搞定，也可以從中獲得自信。而這些都是用戶體驗設(shè)計的工作范疇以內(nèi)。

用戶體驗設(shè)計師的目標(biāo)是為數(shù)字產(chǎn)品創(chuàng)造一致的體驗，讓用戶能夠安心使用。有效的用戶體驗設(shè)計能夠通過網(wǎng)站和APP為用戶循序漸進、有效地展示內(nèi)容。而UX設(shè)計人員則可以通過數(shù)據(jù)分析和案例研究，消除不必要的設(shè)計、搞定問題、去除隱患，提升產(chǎn)品的可用性。UX設(shè)計師還能通過不同環(huán)節(jié)的引導(dǎo)服務(wù)來幫助用戶更加快速的熟悉產(chǎn)品，讓用戶感到貼心而不會緊張。

2、驅(qū)動用戶深度參與

參與度是衡量用戶有效行為的度量，而它也是產(chǎn)品價值的重要體現(xiàn)之一。每個企業(yè)都希望有高素質(zhì)的用戶參與到產(chǎn)品建設(shè)當(dāng)中來，而他們也知道，最終還是要通過創(chuàng)造優(yōu)秀的用戶體驗來解決這一問題。

UX設(shè)計有一個熱門的解決方案是游戲化設(shè)計。將游戲化的元素應(yīng)用到非游戲類的使用場景中來。游戲化設(shè)計讓網(wǎng)站和APP擁有更多有趣的元素，吸引用戶，提升參與度。游戲化設(shè)計的具體方法和策略有很多，設(shè)置任務(wù)、發(fā)放獎勵都是很常見的手法了。挑起用戶的好奇心和激情，他們會堅持不懈地執(zhí)行任務(wù)，在你的網(wǎng)站和APP中花費更多的時間。

3、產(chǎn)品的獨特性

很難說市場上到底有多少APP存在，但是絕大多數(shù)的應(yīng)用和網(wǎng)站在起步的時候，就已經(jīng)失敗了。當(dāng)你要開始投放一個APP到市場的時候，可能已經(jīng)有好幾十個同類的產(chǎn)品已經(jīng)存在了。所以，企業(yè)和開發(fā)團隊一直在尋求讓用戶選擇他們產(chǎn)品的原因和方法。UX設(shè)計師能夠通過分析目標(biāo)受眾的需求和實際市場狀況，來判斷和預(yù)測用戶對于自己產(chǎn)品的反應(yīng)。如果你想給別人帶來愉悅的體驗，滿足用戶的需求，并且力圖讓自己的產(chǎn)品擁有足夠的特性從競爭中脫穎而出，那么你的產(chǎn)品就具有了同其他產(chǎn)品區(qū)分開來的獨特性。

4、省錢

UX設(shè)計的成本并不低，但是相比于修復(fù)可用性的問題，它的花費依然很低?；谟脩粞芯?，UX設(shè)計師能夠準(zhǔn)確地挑選出功能組合，并且規(guī)劃用戶的交互過程，排除可能存在的問題。通過對目標(biāo)受眾的研究和測試，分析和改進整個產(chǎn)品的流程與細(xì)節(jié)，而這些過程對于產(chǎn)品開發(fā)和運營的補充，相比于在產(chǎn)品上線過再根據(jù)反饋進行調(diào)整，要省錢省心得多。

5、用戶忠誠度

用戶的口味越來越刁鉆了。令人不快的體驗會讓他們很快不耐煩，然后迅速和你的APP說拜拜，然后再也不會回來了。用戶的忠誠度要維持起來并不容易，你需要創(chuàng)造足夠優(yōu)秀的產(chǎn)品，要讓人喜愛、沉迷，還得足夠快速地幫用戶排查問題。這種局面下，用戶體驗設(shè)計的價值無疑是不可估量的。如果你的產(chǎn)品能夠始終保持令人舒服愉悅的體驗，用戶習(xí)慣了就很難轉(zhuǎn)向別家了。另外，別忘了，快樂的用戶更喜歡向朋友推薦你的產(chǎn)品。

6、高轉(zhuǎn)化率

采取設(shè)計者預(yù)期行為的用戶所占總?cè)藬?shù)的百分比就是我們常說的轉(zhuǎn)化率。最典型的轉(zhuǎn)化率就是購買產(chǎn)品的用戶數(shù)所占打開電商網(wǎng)站的用戶總?cè)藬?shù)的百分比。用戶體驗設(shè)計師通常會掌握一系列的分析技術(shù)，來幫助產(chǎn)品提高轉(zhuǎn)化率。通過深入分析用戶行為和用戶離開產(chǎn)品的原因，找到痛點，解決問題，從而提高轉(zhuǎn)化率。

7、積極的品牌體驗

品牌識別不僅僅取決于視覺形象設(shè)計，還和體驗息息相關(guān)。許多用戶在第一次使用產(chǎn)品的時候，會記住品牌給他們的感覺。這種第一次的體驗對于用戶和品牌本身都至關(guān)重要，如果處理不好，可能會失去不少潛在用戶。良好的UX設(shè)計可以保證品牌擁有積極而良好的用戶體驗。提供用戶喜歡的產(chǎn)品，可以提升品牌的認(rèn)知度，因為用戶不會忘記他們喜歡的東西。

結(jié)語

優(yōu)秀的用戶體驗設(shè)計對于企業(yè)無疑是有利的。很多時候，它的價值并非是一眼可以看出來的，但是事實上，優(yōu)秀的用戶體驗是成功產(chǎn)品中不可剝離的組成部分。令人信服的UX設(shè)計能夠節(jié)省資金和精力，這比起投資解決低質(zhì)量的產(chǎn)品要來得有效得多。更重要的是，現(xiàn)代產(chǎn)品一旦初次互動不利，后面想要扭轉(zhuǎn)過來就很難了。

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

Facebook 設(shè)計副總裁有個問答欄目，今天的問題是：對于設(shè)計師來說，什么才代表著成功？在這篇譯文里，她分享了自己的觀點。

每個設(shè)計師多少都有一點強迫癥，有時候會為一個像素的間距而糾結(jié)，有時候又會割舍不下自己做的元素，滿屏的信息都想突出，導(dǎo)致畫面混亂。設(shè)計師培養(yǎng)自己對畫面的全局觀是很重要的，所以我們的腦子里時刻都需要有一把“尺子”在，這把尺子，就是“點線面”。在使用這把“尺子”的時候，拋開那些裝飾和顏色還有材質(zhì)，將畫面抽象成點線面來把控你的設(shè)計，也許會有不一樣的啟發(fā)和看到畫面不和諧的原因所在。

設(shè)計師對版面的全局觀，就是“點線面”的處理?！包c線面”是所有視覺畫面的基本結(jié)構(gòu)，點線面可以把不同的部分或者元素組合成一個整體，進而打造一個視覺舒適平衡的版面。

搜索幾乎是現(xiàn)在所有網(wǎng)站，APP甚至操作系統(tǒng)的標(biāo)配，不論是電商還是論壇等等。它是一個站內(nèi)給用戶直接到達(dá)目的地的通道，起到了一個引導(dǎo)用戶走向的重要作用。在不同的系統(tǒng)，不同用途的網(wǎng)站上搜索呈現(xiàn)的方式都有所不同。

用搜索的原因

使用搜索時，用戶可以自己掌握瀏覽該網(wǎng)站的路徑，從哪一頁進入到哪一頁，自己控制如何使用這個網(wǎng)站。沒有必要根據(jù)網(wǎng)站的頁面設(shè)計來決定瀏覽頁面的先后順序。這也是為什么很多網(wǎng)站用戶一進入就直接使用搜索功能的原因。

另一個原因是，當(dāng)用戶瀏覽網(wǎng)頁到一半不知道接下去該干什么的時候，往往會使用搜索直接去找到自己想找的內(nèi)容。

一個完整的后臺，由菜單/導(dǎo)航、數(shù)據(jù)/圖形展示、表格、表單、控件/組件以及彈窗等構(gòu)成，下面跟大家分享后臺中的表格和表單的設(shè)計細(xì)節(jié)。

當(dāng)接到一個全新的網(wǎng)頁后臺項目時，首先確定設(shè)計風(fēng)格，然后考慮這個后臺尺寸是做居中固定式，還是全屏響應(yīng)式。全屏響應(yīng)式的網(wǎng)頁設(shè)計，除非有規(guī)定，否則你可以選擇任意主流尺寸作為基尺寸來設(shè)計網(wǎng)頁。當(dāng)然，不管選擇什么尺寸，都得基于做好一個后臺而開展工作。