在我們設(shè)計(jì)UI有所疑惑時(shí)，可以參照以下標(biāo)準(zhǔn)做法。

這些做法并非一成不變—我只是列舉出這些方法，相信它們可以對你的日常UI設(shè)計(jì)工作有所幫助。

我們需要記住一點(diǎn)，設(shè)計(jì)其實(shí)就是跳出框框思考，這意味著，有些時(shí)候我們要打破陳規(guī)。所以，對我的建議也不要全盤接受。

1. 設(shè)計(jì)時(shí)使用密度像素（dp），而非像素（pixel）

圖中的像素值是密度像素值的三四倍

密度像素是屏幕上每一英寸所包含的像素個數(shù)，簡稱PPI（Pixels Per Inch）。dp（density-independent pixel）是密度獨(dú)立像素，也寫作dip（也有device-independent pixel之說，設(shè)備獨(dú)立像素）。

設(shè)計(jì)界面時(shí)，建議大家基于設(shè)備的密度像素，而不是像素。這樣可以保證我們設(shè)計(jì)出的圖標(biāo)素材比例適當(dāng)，適應(yīng)不同尺寸的設(shè)備。

舉個例子，假如我們以密度獨(dú)立像素dp為單位，設(shè)計(jì)了一個 200 x 50的按鍵，那么這個按鍵在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸則為400 x 100像素，即原尺寸的兩倍。

因?yàn)橛行┢聊坏膯挝挥⒋绲南袼財(cái)?shù)量要比其他屏幕多，即ppi分辨率大，為了保證設(shè)計(jì)的圖標(biāo)在不同分辨率的屏幕上都一樣大，設(shè)計(jì)師通常只是設(shè)計(jì)一個尺寸，導(dǎo)出2x、3x、4x的尺寸。

iPhone XS Max的屏幕尺寸是414 x 896。但這里的單位并不是像素，而是點(diǎn)的個數(shù)。論像素，則是1242 x 2688 px。知道了這些，給iPhone XS Max做設(shè)計(jì)時(shí)，我會以414 x 896個點(diǎn)為尺寸做設(shè)計(jì)，而后導(dǎo)出3x的圖標(biāo)素材。

2. 間距使用8的倍數(shù)（8dp）

為什么UI設(shè)計(jì)的間距都是8的倍數(shù)而不是5的倍數(shù)呢？這里有一個簡單的解釋—如果一個設(shè)備是1.5x的分辨率，我們就沒法導(dǎo)出一個奇數(shù)。

另外，現(xiàn)代主流的屏幕尺寸都是以8為單位，以8的倍數(shù)做設(shè)計(jì)可以很好地適應(yīng)這些屏幕。

以8的倍數(shù)設(shè)計(jì)可以保證設(shè)計(jì)的一致性?；谶@種慣例，大家在進(jìn)行設(shè)計(jì)工作時(shí)不用再猜測間距的數(shù)值，每個圖標(biāo)都可以完美地與其他圖標(biāo)對齊。

有關(guān)這個話題的更全面探討，請參考Bryn Jackson的文章《八像素網(wǎng)格設(shè)計(jì)》。

3. 刪減元素容器的線框

我們在設(shè)計(jì)的過程中應(yīng)該時(shí)常將自己抽離出來，審視界面中這些作為元素“容器”的線和框是否讓界面顯得過于雜亂，是否應(yīng)該予以保留。通常這些用以區(qū)隔界面內(nèi)容的線和框可以被邊界留白代替。

我們設(shè)計(jì)的大部分元素都存在于線框里，簡單清除掉這些“容器”可以讓界面看起來不那么擁擠—給元素更多呼吸的空間。

4. 無障礙設(shè)計(jì)—重視對比度

善用對比度不僅僅是為了讓用戶的注意力集中于重要的信息，更是為了使產(chǎn)品更容易訪問/使用。

設(shè)計(jì)產(chǎn)品就好比建設(shè)像圖書館、學(xué)校一類的公共場所，它的適用對象需要涵蓋每一個人，包括失明、色盲和視障用戶。

Web內(nèi)容無障礙指南（WCAG）要求文本或文本圖像的對比度至少為4.5：1。

為了保證設(shè)計(jì)達(dá)到該標(biāo)準(zhǔn)，我們可以下載Stark這款插件來檢查設(shè)計(jì)是否是無障礙的。

5. 基于用戶習(xí)慣，設(shè)計(jì)用戶體驗(yàn)

為什么有些圖標(biāo)元素會被公認(rèn)為標(biāo)準(zhǔn)？原因有多種。

假如你把一個按鈕設(shè)計(jì)成圓形，那么當(dāng)我們需要一個（字?jǐn)?shù)較多的）“Start Free Trial”按鈕時(shí)，它就會不必要地占用界面中豎直方向上的空間。

另外，用戶期待的是與其他產(chǎn)品相似的體驗(yàn)。如果你設(shè)計(jì)的網(wǎng)站、APP或軟件與用戶的既有習(xí)慣相悖，那么這樣的體驗(yàn)是不直觀的，用戶很可能會因此受挫。

故而，在我們發(fā)揮創(chuàng)造力的時(shí)候，最好以現(xiàn)有的設(shè)計(jì)規(guī)范為基準(zhǔn)和前提。不要重新設(shè)計(jì)輪子。

6. 善用顏色重量（color weight），建立視覺層次

每一種顏色都有自己的視覺重量，我們可以通過借助顏色的視覺重量來建立內(nèi)容的視覺層次，用顏色的深淺來呈現(xiàn)內(nèi)容的重要性的層級。

善用顏色視覺重量的秘訣是，一個更為重要的元素，應(yīng)該有更重的視覺顏色，以便用戶快速瀏覽網(wǎng)頁，區(qū)分重要和不重要的信息。

大字號、粗體的信息會首先被用戶注意到，而后他們會關(guān)注其下的輔助性信息。

7. 避免使用超過兩種字體

通常，設(shè)計(jì)界面會控制使用的字體數(shù)目，兩種不同的字體就應(yīng)足夠—這不是說你不能使用更多字體，只是你需要充分的理由。通常來講，僅用兩種字體會更好。

設(shè)計(jì)界面時(shí)要善用字體家族。

使用字體家族意味著我們可以使用同一字體的不同變體。字體家族的存在就是為了字體的不同變體可以更和諧地被放在一起，讓設(shè)計(jì)在保持多變性的同時(shí)兼顧一致性。

選擇字體時(shí)，盡量選擇那些有多種重量（如標(biāo)準(zhǔn)、適中、粗體、特粗）和樣式的（如長體、寬體、斜體）的字體家族（譯者注：作者此處所述選字體經(jīng)驗(yàn)的適用對象主要為英文字體。）。這樣既會給設(shè)計(jì)留出可探索的空間，也不會增加額外的字體種類。

8. 讓用戶認(rèn)知，而非記住

讓用戶去認(rèn)知產(chǎn)品是產(chǎn)品設(shè)計(jì)中所推崇的，因?yàn)?，我們?yōu)槭裁匆層脩粼谑褂玫倪^程中去思考呢？

結(jié)賬頁面、電子郵箱、搜索歷史、返回按鈕等都是很好的建立了用戶認(rèn)知的例子。

在好的設(shè)計(jì)中，結(jié)賬頁面是不需要讓用戶記住他們所要購買的物品的。用戶應(yīng)該可以清楚地從界面中確認(rèn)他要購買的物品，而非通過回憶來想起。

在Gmail郵箱中，我瞟一眼就可以知道哪些是已讀郵件，哪些是未讀郵件，這個過程不需要過腦子。同理，我登錄到自己的亞馬遜賬戶后，可以迅速地從上次購物時(shí)中斷的地方繼續(xù)開始購物—因?yàn)樗@示了我最近瀏覽過的物品。

設(shè)計(jì)時(shí)，應(yīng)讓元素、功能、選項(xiàng)明顯可見，最小化用戶的記憶負(fù)荷。用戶無需自己在操作的步驟中記住信息。系統(tǒng)的操作說明應(yīng)該在需要時(shí)很容易看到或查到。

—Nielson Norman Group（尼爾森諾曼集團(tuán)，人機(jī)交互和用戶體驗(yàn)咨詢公司，唐·諾曼是創(chuàng)始人之一）

9. 切忌拖慢用戶體驗(yàn)  

作為用戶，速度和效率是最重要的。用戶使用一個應(yīng)用程序，是為了解決某個特定的問題。

我要速度。
— Ricky Bobby（電影《塔拉迪加之夜：瑞奇鮑比的民謠》主角、賽車手）

如果將一張支票通過手機(jī)存入銀行賬戶這個體驗(yàn)是非常讓人享受的，那固然很好，但作為設(shè)計(jì)師，千萬不要讓你的創(chuàng)造力阻礙用戶實(shí)現(xiàn)他們的目標(biāo)。

關(guān)于動畫和微交互的一條經(jīng)驗(yàn)就是，如果某個體驗(yàn)只是無謂地增加了時(shí)間，那么這不是在改善用戶體驗(yàn)。

如果加入的動畫帶有目的性，則可以改善用戶體驗(yàn)；但是如果增加的只是不必要的分散注意力的元素或用戶操作，那么用戶體驗(yàn)不會變得更好。

Dribble上有很多著陸頁的設(shè)計(jì)—當(dāng)用戶向下滾動鼠標(biāo)時(shí)，動畫隨之展開。通常，這些設(shè)計(jì)展現(xiàn)出過火的動畫效果，每個元素都在淡入淡出，動來動去，而幾乎不關(guān)注體驗(yàn)本身。當(dāng)太多事情同時(shí)在界面上發(fā)生時(shí)，用戶很難知道到底哪些信息是應(yīng)該關(guān)注的，這等同于浪費(fèi)用戶寶貴的時(shí)間。

這位Dribble用戶，非常抱歉把你揪了出來:/

無數(shù)研究表明，界面中動畫的最佳時(shí)間在200到500毫秒之間，這個數(shù)字是由大腦的特征決定的。任何短于100毫秒的動畫都是一晃而過，人眼根本無法識別；而超過一秒的動畫會帶給人無聊和延遲的感覺。
—《UX微動畫設(shè)計(jì)指南》

所以，如果你要在界面中使用動畫，那么給它一個明確的目的，并且不要讓用戶等待超過500毫秒。在2019年的今天，惹惱你的用戶只需要1毫秒。

10. 大道至簡

每次我們想要增加額外的信息到界面中時(shí)，例如按鈕、文字、照片、動畫、插圖等等，它們就會跟相關(guān)的信息進(jìn)行競爭。如果一頁上有太多東西，那么某些元素的重要程度就會被削減。

谷歌搜索首頁就是典范。這個設(shè)計(jì)將全部的注意力放在了搜索這個主要功能上，沒有把用戶淹沒在不必要的信息海洋里。

對不起了雅虎，在這必須把你當(dāng)做不好的案例展示

最后，分享給大家一句我最愛的設(shè)計(jì)箴言：

臻于完美之時(shí)，不是加無可加，而是減無可減。

文章來源：UXRen

作者通過從會員體系構(gòu)成的4個核心要素對“京東、亞朵、支付寶、騰訊理財(cái)通”的會員體系進(jìn)行拆解，發(fā)現(xiàn)不同類產(chǎn)品中的設(shè)計(jì)會員體系需要注意的問題。

一款產(chǎn)品要想持續(xù)獲取用戶價(jià)值，前端增長和后端活躍、留存與轉(zhuǎn)化缺一不可。隨著流量越來越貴拉新成本越來越高，多數(shù)互聯(lián)網(wǎng)公司開始將用戶活躍與留存視為產(chǎn)品核心指標(biāo)，而會員體系一直以來都是最有效的活躍留存與轉(zhuǎn)化的運(yùn)營手段之一。

本文對比4款目前付費(fèi)類產(chǎn)品中比較典型的“京東、亞朵、支付寶、騰訊理財(cái)通”的等級會員體系，分別代表4種不同的等級會員體系類型。從會員體系構(gòu)成的4個核心元素：命名、層數(shù)、成長值計(jì)算、會員權(quán)益，來快速了解一款產(chǎn)品的會員體系。

希望通過這篇文章給在做會員體系抓耳撓腮的你一點(diǎn)啟發(fā)。

一、會員命名和層數(shù)

會員命名是品牌文化、用戶群體特征的體現(xiàn)，而會員層數(shù)的多少則反映了產(chǎn)品轉(zhuǎn)化路徑的長短。

1. 四個產(chǎn)品的會員命名和層數(shù)概況

京東會員分為非付費(fèi)會員（下稱等級會員）和付費(fèi)會員兩個體系。為了凸顯付費(fèi)會員，2019.9.15日起，取消了等級會員原有的銅銀金鉆制會員體系，以京享值代替。

至此，從會員命名的角度，京東的會員只有付費(fèi)會員和等級會員兩種名稱，等級會員會員之間以京享值的大小進(jìn)行區(qū)分，共分為5層。

亞朵會員在命名方面充分體現(xiàn)了“舒心微笑”的品牌特征，等級會員共分為5級，分別為注冊會員（初遇）、銀會員（識君）、金會員（知己）、鉑金會員（執(zhí)手）、黑金會員（逍遙）。括號內(nèi)的短稱分別來對應(yīng)著兩句詩詞，詳見官網(wǎng)的會員介紹。

支付寶等級會員共分為4級，分別為大眾會員、黃金會員、鉑金會員、鉆石會員。從級別數(shù)量來說，支付寶會員級別相比于前者少了1級，會員升級的難度也加大了。

騰訊理財(cái)通等級會員共分為4級，分別為普通會員、白銀會員、黃金會員與鉑金會員。顏色區(qū)分上，級別從低到高顏色分別為藍(lán)灰色、銀灰、金色、黑色，通過灰色調(diào)營造理財(cái)產(chǎn)品的嚴(yán)肅和專業(yè)感。

【注：等級會員是指，會員級別不能直接購買得到，而是要通過完成產(chǎn)品任務(wù)升級達(dá)到。付費(fèi)會員是指，用戶通過付費(fèi)購買產(chǎn)品會員特權(quán)，購買的會員獨(dú)立于非付費(fèi)會員，不是非付費(fèi)會員的某一級】

2. 會員命名和層數(shù)分析

通常會員命名會以金屬作為主線，其中金、銀、鉆石等最為常見。

這是用戶已經(jīng)熟知的命名方式，遵循以上規(guī)則有助于用戶更快的接受會員身份。但如果產(chǎn)品有特殊的品牌文化和目標(biāo)用戶，可以考慮在命名上加入品牌元素，如亞朵。

付費(fèi)會員與等級會員之間具有重疊性。

高階的等級會員分散了用戶對付費(fèi)會員的注意力，因此京東最終不得不對等級會員體系采取“除名”做法。

付費(fèi)會員必然會導(dǎo)致原等級會員體系影響力的削弱，在初始設(shè)計(jì)時(shí)需要綜合考慮付費(fèi)會員和等級會員體系在維系用戶、營銷行為等方面的價(jià)值，做好取舍。

此外，還可以參考亞朵酒店的做法，將等級會員的某一級作為付費(fèi)對象來售賣，如下圖，亞朵酒店將會員體系中的第三級【金會員】單獨(dú)售賣。

不同產(chǎn)品的會員層數(shù)不同。

電商等付費(fèi)類產(chǎn)品會員普遍采用4-5級的分層、資訊類產(chǎn)品的會員體系可多達(dá)10級，如趣頭條等；社交、游戲類產(chǎn)品更是根據(jù)玩法的不同，設(shè)置幾十級的會員等級。

會員定級層數(shù)主要取決于產(chǎn)品的轉(zhuǎn)化路徑長短：

付費(fèi)類產(chǎn)品轉(zhuǎn)化路徑短，用戶使用產(chǎn)品就一定會付費(fèi)，因此只需要根據(jù)用戶實(shí)際消費(fèi)能力進(jìn)行用戶分層，4-5層即可覆蓋用戶的全部消費(fèi)能力。

但社交類產(chǎn)品轉(zhuǎn)化路徑長，需要用戶長期活躍在產(chǎn)品內(nèi)才有機(jī)會轉(zhuǎn)化付費(fèi)用戶，會員級別需要足夠多，才能保證用戶有動力持續(xù)的活躍和留存。

此外，從成本的角度考慮，付費(fèi)類產(chǎn)品的會員權(quán)益通常為商家的折扣和返利，會員級別越高企業(yè)付出成本越高，

級別過多會導(dǎo)致企業(yè)難以承擔(dān)成本，而社交、游戲類產(chǎn)品的會員權(quán)益通常為虛擬的勛章、身份象征等，即使會員級別高達(dá)幾十級，也不會產(chǎn)生過多的成本。

下圖是趣頭條10級會員的權(quán)益，可以看到權(quán)益大多數(shù)為榮譽(yù)勛章類虛擬獎勵，企業(yè)幾乎不需要付出成本。

二、成長值計(jì)算

成長值是用于衡量會員級別的刻度，用戶通過獲取成長值來達(dá)到升級、保級的目的。成長值的獲取方式體現(xiàn)了產(chǎn)品主要的運(yùn)營動作，而計(jì)算公式也根據(jù)業(yè)務(wù)變動速度和產(chǎn)品特點(diǎn)有所不同。

1. 京東會員的成長值計(jì)算涵蓋的要素

• 計(jì)算周期：30天；
• 涵蓋產(chǎn)品：京東商城和京東金融
• 行為：消費(fèi)、活躍、信譽(yù)等方面，詳見下圖，已將需要消費(fèi)的行為進(jìn)行了特殊標(biāo)記；
• 計(jì)算方式：黑盒，并未對外展示成長值計(jì)算的詳細(xì)公式。

分析如下：

京東的主要運(yùn)營動作包括以下幾方面：提高用戶消費(fèi)，促進(jìn)用戶活躍、收集用戶信息、建立信用評分體系等。

京東成長值的具體計(jì)算公式并未明確給出，因此可以推斷其業(yè)務(wù)調(diào)整快，變動幅度大。不公布具體計(jì)算公式可以靈活的調(diào)整成長值計(jì)算公式，但也犧牲了用戶的確定性體驗(yàn)。

2. 亞朵會員的成長值計(jì)算涵蓋的要素

• 計(jì)算周期：最近12個月；
• 涵蓋產(chǎn)品：亞朵；
• 預(yù)訂渠道：亞朵APP、微信小程序、客服熱線、企業(yè)號等渠道預(yù)定；
• 行為：消費(fèi)、任務(wù)（完善信息、完成訂單）；
• 計(jì)算方式：白盒，成長值包括支付金額、入住間夜、完成任務(wù)三個部分，計(jì)算公式明確。

分析如下：

亞朵對用戶的主要運(yùn)營方向?yàn)橄M(fèi)和互動，運(yùn)營動作主要是圍繞著訂房和相關(guān)服務(wù)展開。

成長值計(jì)算兼容地區(qū)差異：酒店業(yè)務(wù)通常分布在多個城市，每個城市的消費(fèi)水平差異很大。若僅僅以消費(fèi)金額來衡量會員級別，會導(dǎo)致大多數(shù)的高級會員都集中在高消費(fèi)城市，無法實(shí)現(xiàn)對二三線城市的用戶激勵。因此，酒店行業(yè)會員的成長值通常結(jié)合間夜和消費(fèi)金額綜合計(jì)算。

酒店預(yù)定更加依賴于用戶渠道，包括OTA（美團(tuán)/攜程等平臺）、自營渠道、分銷商等。不同的渠道企業(yè)付出的成本不同，會員體系通常只給自營渠道的用戶計(jì)算成長值。如亞朵。

3. 支付寶會員的成長值計(jì)算涵蓋以下幾個要素：

• 時(shí)間：最近12個月；
• 產(chǎn)品：支付寶；
• 行為：消費(fèi)購物、生活繳費(fèi)、金融理財(cái)；
• 計(jì)算方式：白盒，所有行為可獲得的成長值均明確規(guī)定，詳見下圖梳理。

分析如下：

支付寶主要的運(yùn)營動作包括促進(jìn)用戶消費(fèi)購物、完成生活繳費(fèi)和增加金融理財(cái)。生活繳費(fèi)任務(wù)的成長值獎勵較高，可以推測占據(jù)用戶生活支付場景是主要運(yùn)營方向

支付寶的成長值計(jì)算公式為白盒，這與理財(cái)類產(chǎn)品性質(zhì)相關(guān)，由于涉及到用戶的金錢投入，更需要獲取用戶的信任，明確的計(jì)算方式能夠帶給用戶確定感。

4. 騰訊理財(cái)通會員的成長值計(jì)算涵蓋以下幾個要素：

• 時(shí)間：最近30天；
• 產(chǎn)品：理財(cái)通平臺
• 行為：購買理財(cái)、會員任務(wù)（完善個人信息和達(dá)成理財(cái)目標(biāo)）
• 計(jì)算方式：白盒，詳見下圖拆解。

分析如下：

騰訊理財(cái)通的主要運(yùn)營動作包括促進(jìn)用戶購買理財(cái)、激勵用戶完善個人信息。騰訊理財(cái)通的會員任務(wù)多達(dá)27個，收集用戶信息的任務(wù)占到1/3，可見完善用戶畫像為產(chǎn)品的主要戰(zhàn)略。

理財(cái)通會員成長值的計(jì)算公式同樣為白盒，清晰的展示用戶完成任務(wù)能獲得的成長值。

三、會員權(quán)益

• 從用戶角度來說，會員權(quán)益是用戶持續(xù)在產(chǎn)品內(nèi)活躍和留存的動力，好的會員體系應(yīng)當(dāng)有突出的核心權(quán)益，且核心權(quán)益能夠滿足用戶使用產(chǎn)品的核心訴求。
• 從企業(yè)角度來說，會員體系權(quán)益應(yīng)當(dāng)形成一個好的業(yè)務(wù)閉環(huán)，權(quán)益能夠促進(jìn)用戶的再次消費(fèi)，盡可能的挖掘用戶的剩余價(jià)值。

1. 京東會員權(quán)益構(gòu)成

• 從核心權(quán)益角度看：京東的會員以售后服務(wù)為核心特權(quán)，會員的級別越高，享受的售后服務(wù)越全面。這說明京東等級會員體系的目標(biāo)用戶更加注重售后服務(wù)，是用戶長期留存的主要原因。
• 從業(yè)務(wù)閉環(huán)角度看：京東會員體系特權(quán)強(qiáng)化了其售后能力的優(yōu)勢，為用戶的購買提供保障，提高用戶滿意度。結(jié)合京東的付費(fèi)會員，共同形成業(yè)務(wù)閉環(huán)，促進(jìn)用戶的復(fù)購。

2. 亞朵會員權(quán)益構(gòu)成

（注：數(shù)字標(biāo)記表示用戶級別，其中高級會員擁有低級會員的全部權(quán)益）

• 從核心權(quán)益角度看：亞朵的會員權(quán)益基本圍繞住宿需求，其核心權(quán)益是消費(fèi)優(yōu)惠返利，涵蓋1-5級全部會員?？梢娋频觐惍a(chǎn)品的用戶的核心訴求還是在于更高的性價(jià)比。
• 從業(yè)務(wù)閉環(huán)角度看：亞朵酒店的會員權(quán)利累計(jì)20項(xiàng)，包括優(yōu)惠返利、住宿體驗(yàn)、飲食、服務(wù)和身份彰顯等，幾乎覆蓋了用戶住宿的全部場景。以優(yōu)惠返利為核心的會員權(quán)益和多種服務(wù)提升用戶體驗(yàn)的業(yè)務(wù)閉環(huán)，可以有效的促進(jìn)用戶的二次下單行為。

3. 支付寶會員權(quán)益構(gòu)成

• 從核心權(quán)益角度看：支付寶會員體系的權(quán)益覆蓋用戶的衣食住行多種場景，核心特權(quán)是在支付寶內(nèi)的商家小程序可以享受會員特權(quán)。滿足了用戶在支付寶以會員身份完成衣食住行的需求。
• 從業(yè)務(wù)閉環(huán)角度看：支付寶會員權(quán)益形成了對商家小程序的引流，促進(jìn)支付寶小程序的發(fā)展，進(jìn)而實(shí)現(xiàn)用戶在衣食住行各個場景下都在支付寶小程序內(nèi)消費(fèi)，實(shí)現(xiàn)了支付寶的支付業(yè)務(wù)閉環(huán)。

4. 騰訊理財(cái)通會員權(quán)益構(gòu)成

騰訊理財(cái)通會員等級禮遇如下圖所示：

• 從核心權(quán)益角度看：騰訊理財(cái)通會員權(quán)益基本圍繞用戶的理財(cái)行為，核心權(quán)益為資金流轉(zhuǎn)特權(quán)。包括周轉(zhuǎn)、還款、存取等。用戶在產(chǎn)品內(nèi)的核心需求是更加順暢的完成資金流轉(zhuǎn)。
• 從業(yè)務(wù)閉環(huán)角度看：騰訊理財(cái)通會員權(quán)益為用戶提供了流暢的資金流轉(zhuǎn)權(quán)益，用戶就可以更加放心的在產(chǎn)品內(nèi)投資理財(cái)。同時(shí)理財(cái)通的等級禮遇主要圍繞白金以上會員提供高端服務(wù)類權(quán)益，與會員權(quán)益形成業(yè)務(wù)閉環(huán)，促進(jìn)用戶的活躍和留存。

結(jié)語

通過分析會員體系的4個核心元素：命名、層數(shù)、成長值計(jì)算、會員權(quán)益，可以迅速讀懂一個產(chǎn)品的會員體系。

一個好的會員體系能夠通過選擇合適的會員命名、設(shè)置符合產(chǎn)品轉(zhuǎn)化路徑的會員層數(shù)、設(shè)計(jì)涵蓋主要運(yùn)營動作并能靈活調(diào)整的成長值計(jì)算體系、提供滿足用戶核心需求的會員權(quán)益。最終形成業(yè)務(wù)閉環(huán)，引導(dǎo)用戶價(jià)值逐步提升，實(shí)現(xiàn)用戶價(jià)值的最大化。

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

看似簡單的登錄框，暗藏了多少值得推敲的用戶體驗(yàn)？這10個細(xì)節(jié)，就是你和設(shè)計(jì)高手的區(qū)別。

技巧1：更明顯

你不應(yīng)該讓你的用戶到處尋找登錄區(qū)域。他們找的時(shí)間越長，就會越沮喪。他們越沮喪，最終登錄的可能性就越小。

一個很好的例子就是 Gmail 的登錄頁面。

你可以確切地知道你需要在何處登錄，以及要在輸入?yún)^(qū)域輸入什么內(nèi)容，上面的例子，如果你沒有 Gmail 帳戶，它允許你通過單擊「創(chuàng)建帳戶」來輕松地創(chuàng)建一個帳戶。

好的用戶體驗(yàn)是使你的登錄區(qū)域明顯，使你的用戶盡可能容易地進(jìn)行登錄操作。

技巧2：使用第三方登錄

第三方登錄正迅速成為用戶登錄賬戶的方式，理由很充分。為不同的產(chǎn)品創(chuàng)建多個賬戶既耗時(shí)又令人困惑。很難記住一堆不同的密碼和用戶名。

通過允許用戶使用用戶的第三方賬戶中的信息來創(chuàng)建一個賬戶，可以解決所有關(guān)于這些問題。

讓我們來看看下面的石墨文檔和MONO登錄時(shí)的選擇方式：

甚至還有更方便的注冊登錄方式，手機(jī)短信驗(yàn)證碼在注冊的同時(shí)登錄：

一些產(chǎn)品在用戶點(diǎn)擊第三方注冊登錄時(shí)還需要用手機(jī)號進(jìn)行短信登錄，從用戶的角度看，這很明顯是一個不好的體驗(yàn)，但是產(chǎn)品的角度去思考就不一樣了，產(chǎn)品為了獲取用戶更多的信息，則需要這樣來設(shè)計(jì)流程。

這種設(shè)計(jì)流程該不該用，這需要在產(chǎn)品和用戶之間進(jìn)行權(quán)衡，第三方與手機(jī)短信驗(yàn)證碼登錄，在提高用戶體驗(yàn)的同時(shí)，可以提高用戶的效率，使界面更加直觀。

技巧3：更簡單

因?yàn)榄h(huán)境不同，在中國很多網(wǎng)頁端的網(wǎng)站，第三方登錄很的產(chǎn)品很少。

例如，如果你的 QQ 沒有在電腦端登錄，因?yàn)榧词惯x擇第三方 QQ 登錄，你也要拿出手機(jī)—打開 QQ —打開掃一掃，進(jìn)行掃碼登錄等一些列的操作。

又或者，當(dāng)你想要登錄 behance，只要瀏覽器有記錄之前的第三登錄，點(diǎn)擊第三方登錄即可直接進(jìn)入該網(wǎng)站，甚至不用注冊。

可以看下面的騰訊網(wǎng)與 behance 的網(wǎng)頁登錄：

好的登錄體驗(yàn)應(yīng)該只有賬號、密碼兩個輸入字段，或者手機(jī)號碼、短信驗(yàn)證碼兩個字段，以及使用第三方登錄的選項(xiàng)。在簡單、的同時(shí)，并為用戶提供了很好的體驗(yàn)。

技巧4：區(qū)分注冊與登錄

如果一個用戶來到你的網(wǎng)站進(jìn)行注冊，或者想他們返回登錄界面，這就需要讓用戶清楚的知道他在何處，下一步應(yīng)該去哪里。

我們通過使用登錄字段與注冊字段的區(qū)別來幫助他們，讓我們看看下面的 dribbble 注冊界面：

創(chuàng)建賬戶的按鈕已 dribbble 的主題能很快突出在用戶面前。新用戶可以直接在頁面上注冊，而返回的用戶可以使用最上面右上角的登錄兩字。看到上面「sign in 」字段了嗎？

dribbble 使用了不同的顏色、布局去區(qū)分注冊按鈕與登錄的入口，這樣更加清晰明了。

同時(shí)可以看看 dribbble 的主頁面，他們會把 sign in 與 sign up 的進(jìn)行區(qū)分，在 sign up 加上微邊框，讓用戶能更快區(qū)分兩者的不同。

技巧5：跳過用戶名

讓用戶用他們的用戶名來進(jìn)行登錄真的不是一和很明智的做法，為用戶省去記錄你產(chǎn)品的用戶名的麻煩，應(yīng)該讓他們使用他們的電子郵件地址或電話號碼注冊來進(jìn)行代替用戶名。

ins 讓用戶有機(jī)會用他們的電話號碼或電子郵件地址登錄。

反例：

盡可能讓用戶同時(shí)用手機(jī)號碼或郵件地址來登錄，因?yàn)橛脩艨赡軙浰麄冇脕淼卿浤愕漠a(chǎn)品的電子郵件地址，所以這時(shí)，用戶能使用手機(jī)號碼進(jìn)行登錄。

技巧6：密碼可顯示

給用戶提供可顯示密碼的按鈕，減少用戶輸錯密碼的操作，當(dāng)輸錯的同時(shí)，可進(jìn)行對錯的字段進(jìn)行糾正，不用全部刪掉重新來。

讓我們來下面的脈脈和片刻：

技巧7：記住用戶信息

還有什么比再次到你之前登錄的網(wǎng)站或 app，卻發(fā)現(xiàn)你需要再次輸入賬戶密碼登錄更令人沮喪的事情嗎?

當(dāng)你的用戶返回到你的網(wǎng)站時(shí)，請確保他們已經(jīng)登錄了，或者為了方便登錄，提前為他們預(yù)先填充賬戶和密碼等字段。

谷歌在這方面做得很棒。每當(dāng)用戶需要重新登錄到 YouTube、Gmail 或任何其他谷歌品牌時(shí)，他們的登錄信息都會被記住，使登錄過程更加簡單。

盟友銀行允許用戶勾選 「保存用戶名」 復(fù)選框，允許網(wǎng)站在用戶到達(dá)網(wǎng)站時(shí)默認(rèn)記住用戶名。這是記住用戶信息的另一個好方法，展示形式可以多樣化，可根據(jù)自己產(chǎn)品與用戶需求來進(jìn)行把控。

技巧8：輕松恢復(fù)密碼

有時(shí)你的用戶會忘記他們的登錄信息。當(dāng)這種情況發(fā)生時(shí)，盡量讓恢復(fù)過程盡可能的輕松。

公眾號的賬戶密碼輸入欄有記住密碼復(fù)選框，以防用戶忘記他們的用戶名和密碼，不用每次進(jìn)來都輸入賬戶密碼進(jìn)行登錄。

印象筆記對他們的密碼做了一些巧妙的處理，讓用戶知道他們多久以前更改了密碼。

這個小小的提示可以喚起用戶的記憶，幫助他們記起密碼。

如果用戶忘記了他們的登錄信息，要讓他們清楚應(yīng)該去哪里。如果你將使令人沮喪的情況變得不那么令人沮喪，你的用戶將因此會喜歡上你的產(chǎn)品。

技巧9：讓用戶知道大寫鎖定已開啟

我們都有過這樣的經(jīng)歷：令人沮喪地輸入和重新輸入你的密碼都無濟(jì)于事，結(jié)果卻發(fā)現(xiàn)你一直開著大寫鎖定鍵。

可以通過警告你的用戶，防止這種情況發(fā)生。微軟的 Edge 瀏覽器還使用戶可以選擇在鍵入時(shí)打開大寫鎖定時(shí)打開通知。

技巧10：無密碼登錄

讓你的移動用戶使用無密碼登錄，現(xiàn)在很多特別是金融類 app，都可以讓用戶進(jìn)行指紋登錄，因?yàn)椴幌衿渌?app 一樣可以一直保持用戶已登錄狀態(tài)，在保障安全的同時(shí)能更便捷。

以上的設(shè)計(jì)技巧與案例希望能幫助各位讀者提高產(chǎn)品的用戶體驗(yàn)。

歡迎關(guān)注作者的微信公眾號：「設(shè)計(jì)探」

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

心理學(xué)在我們生活中涉及的面很廣，是每個行業(yè)都要了解的，對于設(shè)計(jì)師來說，更要了解用戶的心理，因?yàn)槲覀兊脑O(shè)計(jì)是面向用戶的 

需求整理的現(xiàn)狀

寫這篇文章的初衷，是在實(shí)際工作中遇到 PRD & DRD 文檔，對于一些交互設(shè)計(jì)圖，會產(chǎn)生不理解，或者說在實(shí)際落地畫圖的時(shí)候會發(fā)現(xiàn)一些前后不一致的問題，解釋過于冗余，不清晰。在接觸新的業(yè)務(wù)時(shí)，很難把新理解的內(nèi)容從上至下的消化完整。所以希望通過這篇文章幫助剛接觸交互的同學(xué)更好地開展交互設(shè)計(jì)工作。

在傳統(tǒng)瀑布式需求分析流程中，我們設(shè)計(jì)師往往拿到的是已成型的信息架構(gòu)圖&產(chǎn)品結(jié)構(gòu)圖&關(guān)鍵業(yè)務(wù)流程圖，只是了解一下大概是什么類型的產(chǎn)品，很難發(fā)現(xiàn)企業(yè)產(chǎn)品中真正關(guān)鍵的流程價(jià)值點(diǎn)在哪里，或者說也不清楚后續(xù)發(fā)展的走向，只能卯足了勁去做圖做說明，整理完整。時(shí)間緊迫壓力大，又要照顧整個項(xiàng)目。往往決定產(chǎn)品成功與否的，是產(chǎn)品 20% 的主要功能（二八原則）。所以在面臨初期產(chǎn)品設(shè)計(jì)中，應(yīng)該將主要精力放在重要功能流程中。

目前，在互聯(lián)網(wǎng)產(chǎn)品中，敏捷開發(fā)是所有產(chǎn)品設(shè)計(jì)者最推崇的。原因在于，能夠?qū)I(yè)務(wù)、設(shè)計(jì)、開發(fā)更有前瞻性&敏捷性。

理解業(yè)務(wù)需求，是做好交互的首要條件

產(chǎn)品交互的成功一定是建立在業(yè)務(wù)需求提煉清晰的基礎(chǔ)上。業(yè)務(wù)需求的價(jià)值提煉，也是設(shè)計(jì)師需要參與完成的。業(yè)務(wù)需求是一個比較大的任務(wù)，來源可能是老板的要求，可能是產(chǎn)品提出的，也可能是用戶的反饋。通過業(yè)務(wù)需求，我們要分析出相關(guān)的業(yè)務(wù)目標(biāo)。有個偶然的機(jī)會，了解到彩色 UML 的設(shè)計(jì)方法，在具體實(shí)踐中，感覺這個方法能夠快速適應(yīng)任何業(yè)務(wù)流程，簡單方便，易懂，并能快速發(fā)現(xiàn)業(yè)務(wù)流程中的問題，加以修正完善。

彩色UML建模

有幸認(rèn)識王海鵬老師，他推薦了早年他翻譯的彩色 UML 建模一書，作者 Peter Coad，是將彩色和企業(yè)組件集成到建模技術(shù)之中的第一本書的主要作者，是世界上經(jīng)驗(yàn)豐富的建模人員之一，他所創(chuàng)建的模型幾乎涉及到所有行業(yè)。

此書是第一本介紹用彩色來表達(dá)軟件設(shè)計(jì)的著作。作者用 4 種顏色來代表 4 種架構(gòu)型，給定一種顏色，你就知道這個類可能具有哪些屬性、鏈接、方法和交互。得到的彩色構(gòu)建塊能創(chuàng)建更好的模型，并獲得應(yīng)有的認(rèn)可。彩色和架構(gòu)型僅僅是開始。作者更進(jìn)一步將這些架構(gòu)型發(fā)展為 12 個類的領(lǐng)域無關(guān)組件。作者在過去 10 年中創(chuàng)建的每個模型，都遵循這個組件所表達(dá)的基本形狀和職責(zé)。

筆者利用彩色 UML 建模的設(shè)計(jì)方法，用于業(yè)務(wù)梳理工作，達(dá)到了意想不到的效果。以下為彩色 UML 建?；靖拍睿ń厝〔噬?UML 建模書中的介紹）。

△ 《彩色UML建模書》第9頁

△ 《彩色UML建模書》第10頁

△ 事例會員注冊

交互設(shè)計(jì)中常用圖

1. 實(shí)體關(guān)系圖（又稱ER圖）

定義：ER 圖是用來描述現(xiàn)實(shí)世界中的實(shí)體關(guān)系模型，所謂實(shí)體是指客觀上或者邏輯上存在并且可以區(qū)分的人事物。

作用：促使你以最適合技術(shù)理解實(shí)現(xiàn)的方法，來規(guī)范的描述功能模塊的核心要素，其實(shí)就是數(shù)據(jù)庫的物理結(jié)構(gòu)。而這種描述是無二義的，最清晰傳達(dá) PM 的設(shè)計(jì)思想。

2. 功能結(jié)構(gòu)圖

功能結(jié)構(gòu)圖就是按照功能的從屬關(guān)系畫成的圖表，在該圖表中的每一個框都稱為一個功能模塊。功能模塊可以根據(jù)具體情況分得大一點(diǎn)或小一點(diǎn)，分解得最小功能模塊可以是一個程序中的每個處理過程，而較大的功能模塊則可能是完成某一個任務(wù)的一組程序。用通俗的話來說，功能結(jié)構(gòu)圖就是以功能模塊為類別，介紹模塊下各功能組成的圖表。

作用

• 梳理需求，以鳥瞰的方式對整個產(chǎn)品頁面中的功能結(jié)構(gòu)形成一個直觀的認(rèn)識。
• 思考并明確產(chǎn)品的功能模塊及其功能組成。

3. 信息結(jié)構(gòu)圖

信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層，是產(chǎn)品的骨架。一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代，否則不會大改。

作用

• 幫助 PM 梳理復(fù)雜內(nèi)容的信息組成，避免信息內(nèi)容在展示過程中出現(xiàn)遺漏、混亂、重復(fù)；
• 作為開發(fā)工程師建立數(shù)據(jù)庫的參考依據(jù)。

信息結(jié)構(gòu)圖構(gòu)成要素

• 導(dǎo)航：網(wǎng)頁訪問者的訪問途徑。
• 頻道：某一個同性質(zhì)的功能或內(nèi)容的共同載體，也可稱為功能或內(nèi)容的類別。
• 子頻道：某頻道下細(xì)分的另一類別。
• 頁面：單個或附屬某個頻道或分類下的界面。
• 模塊：頁面中多個元素組成的一個區(qū)域內(nèi)容，可以有一個或多個，也可以循環(huán)出現(xiàn)，如：文章列表。
• 模塊元素：模塊中的元素內(nèi)容，以文章列表舉例，文章標(biāo)題、文章摘要、文章發(fā)布時(shí)間，這些都是元素，都是組成模塊的內(nèi)容，同時(shí)他們也是可以循環(huán)出現(xiàn)的。元素的類型可以是：文字、圖片、鏈接等等。

4. 產(chǎn)品結(jié)構(gòu)圖

定義：產(chǎn)品結(jié)構(gòu)圖是綜合展示產(chǎn)品信息和功能邏輯的圖表，簡單說產(chǎn)品結(jié)構(gòu)圖就是產(chǎn)品原型的簡化表達(dá)。

作用：它能夠在前期的需求評審中或其他類似場景中作為產(chǎn)品原型的替代，因?yàn)楫a(chǎn)品結(jié)構(gòu)圖相較于產(chǎn)品原型，其實(shí)現(xiàn)成本低，能夠快速對產(chǎn)品功能結(jié)構(gòu)進(jìn)行增、刪、改操作，減少 PM 在這個過程中的實(shí)現(xiàn)成本。

5. 業(yè)務(wù)流程圖（泳道圖）

業(yè)務(wù)流程圖，不是操作流程圖也不是頁面流程圖。它是產(chǎn)品的整體業(yè)務(wù)流程，直接和業(yè)務(wù)掛鉤，可以說是產(chǎn)品的核心流程。

作用

通過業(yè)務(wù)流程圖，鉆研關(guān)鍵事件的流程，分析為什么要這么做，探索出更深層次的問題，從而對現(xiàn)有不合理的業(yè)務(wù)流程進(jìn)行重組優(yōu)化，進(jìn)而制定優(yōu)化方案，改進(jìn)現(xiàn)有流程；闡述在項(xiàng)目中各個角色是如何產(chǎn)生相關(guān)聯(lián)系的。

繪制規(guī)范/建議

• 讓涉眾參與，不要閉門造車：與業(yè)務(wù)流程圖包含的各個參與角色代表適時(shí)確認(rèn)事情的原本流程。
• 恰當(dāng)?shù)膶哟畏纸?，不要將所有的環(huán)節(jié)都鋪到一張圖上。
• 逐漸深入，先抓枝干：切忌一開始就陷入細(xì)節(jié)。
• 流程一定有開始和結(jié)束：切忌交出來的流程圖，讓讀者問：流程的開始點(diǎn)是什么？用清晰的代表開始和結(jié)束的符號來完成第一步和最后一 步。
• 流程圖符號繪制排列順序：由上至下，由左至右。
• 同一流程圖符號大小宜相對一致。
• 編號：這是讓溝通效率更高的優(yōu)化措施。當(dāng)你有了編號系統(tǒng)，相當(dāng)于對你的流程圖都賦予了唯一識別身份證號。負(fù)責(zé)流程規(guī)則審核和優(yōu)化的部門能夠清楚在郵件里傳達(dá) H5.1 流程優(yōu)化，大家就更明確指的是什么。
• 路徑符號應(yīng)避免互相交叉。

6. 任務(wù)流程圖

任務(wù)流程圖就是通過圖形化的表達(dá)形式，闡述產(chǎn)品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時(shí)，會產(chǎn)生的一系列操作和反饋的圖標(biāo)。

作用：基于業(yè)務(wù)流程，進(jìn)行任務(wù)流程梳理，闡述角色和程序發(fā)生交互的流程，你如何進(jìn)行操作，系統(tǒng)如何進(jìn)行反饋。

任務(wù)流程與需求文檔中的業(yè)務(wù)流程并不一樣。雖然它們都是流程圖，但業(yè)務(wù)流程更偏向于業(yè)務(wù)限制、后臺邏輯等，并不過分注重用戶的操作邏輯。而任務(wù)流程則需要關(guān)注用戶如何操作、界面如何反饋等，從而引導(dǎo)用戶完成用戶目標(biāo)。

7. 頁面流程圖

定義：指電子產(chǎn)品具體所呈現(xiàn)的頁面跳轉(zhuǎn)流程圖。其承載了業(yè)務(wù)流程圖所包含的業(yè)務(wù)流轉(zhuǎn)信息。

作用：

• 交互設(shè)計(jì)/原型設(shè)計(jì)的底子，基本依據(jù)。
• 站在用戶視角，代表用戶所有可能的操作過程，頁面流程能快速發(fā)現(xiàn)體驗(yàn)問題。
• 突出頁面元素與邏輯關(guān)系，提升原型設(shè)計(jì)的效率。

8. 線框圖/原型圖

定義：頁面的模塊、元素、人機(jī)交互的形式，利用線框描述的方法，將產(chǎn)品脫離皮膚狀態(tài)下更加具體跟生動的進(jìn)行表達(dá)。

作用：用例闡釋者，用來了解用例的用戶界面；系統(tǒng)分析員，用來了解用戶界面如何影響系統(tǒng)分析；設(shè)計(jì)員，用來了解用戶界面如何施加影響及它對系統(tǒng)「內(nèi)部」的要求；類測試人員，用來制定測試計(jì)劃活動。

構(gòu)成要素

• 頁面標(biāo)題：即每一個頁面的對應(yīng)標(biāo)題，一般就是導(dǎo)航欄標(biāo)題。
• 頁面內(nèi)容：以黑白為主，保證信息規(guī)整易讀。
• 交互說明：用標(biāo)簽將其對應(yīng)起來，包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則等等。
• 主流程線：只需要畫出主流程線即可，千萬不可太多太雜，時(shí)刻考慮讀者的感受。

9. 線框圖/原型圖交互說明的幾種類型

限制

包含范圍值、極限值等。

范圍值主要指數(shù)據(jù)的取值范圍。比如，當(dāng)你的界面上出現(xiàn)了下拉菜單、篩選按鈕、滑塊等控件時(shí)，你必須標(biāo)注清楚它們的選擇范圍，否則開發(fā)人員就不清楚該如何設(shè)定，如圖所示。

極限值主要指數(shù)據(jù)的顯示限制。比如，最多應(yīng)該顯示多少字?jǐn)?shù)，過時(shí)如何顯示，是否折行等，如圖所示。

狀態(tài)

包含默認(rèn)狀態(tài)、常見狀態(tài)、特殊狀態(tài)等。

「默認(rèn)狀態(tài)」主要指默認(rèn)顯示的文字、數(shù)據(jù)、選項(xiàng)等。這些內(nèi)容需要注明，否則開發(fā)人員可能難以意識到這是用戶填完的效果，還是默認(rèn)就有的。

「常見狀態(tài)」主要指針對某一個模塊，經(jīng)常遇到的一些狀態(tài)。這些狀態(tài)都需要在原型上表述出來。比如一個普通的積分模塊，一般會出現(xiàn) 3 種狀態(tài)：未登錄狀態(tài)、登錄后未簽到狀態(tài)、登錄后已簽到狀態(tài)，如圖所示。

「特殊狀態(tài)」一般指非正常情況下的樣式、文案、說明等，如圖所示：

操作

包含常見操作、特殊操作、誤操作、手勢操作等。

「常見操作」主要指正常操作時(shí)得到的反饋狀態(tài)。比如一個普通的翻頁控件，在經(jīng)過不同操作后會立即出現(xiàn)如下的狀態(tài)。

「特殊操作」主要指一些極端情況下的操作。一般，用戶不會這么操作，但是一旦遇到極端情況，還是要想好應(yīng)對措施，因?yàn)閷τ陂_發(fā)人員來說，不管是正常的還是極端的操作情況，他們都要去編寫對應(yīng)的代碼。如下圖，是填寫用戶信息的例子，當(dāng)不寫交互說明時(shí)，開放往往會遇到很多問題：如果已經(jīng)勾選了 2 個人，再勾選第 3 個人，怎么辦？如果勾選了「張XX」，下面區(qū)塊中會相應(yīng)地出現(xiàn)張XX的信息，那么這時(shí)候允許修改張XX的身份證信息嗎？假如允許的話，修改后「張XX」還保持勾選狀態(tài)嗎？表單提交后要新增一個被保險(xiǎn)人信息嗎？若修改的是除身份證號碼以外的信息，「張XX」 還保持勾選狀態(tài)嗎？提交表單時(shí)是覆蓋原存儲信息嗎？若修改后出生日期、性別與身份證號碼不吻合怎么辦？等等。

面對各種復(fù)雜的情況，一方面要和開發(fā)人員積極探討，看看有沒有其他的解決方法可以簡化各種邏輯判斷；另一方面，在得出結(jié)論后，要把交互說明寫清楚，避免出現(xiàn)讓開發(fā)人員感到棘手的情況。

「誤操作」主要指當(dāng)用戶操作錯誤時(shí)的情況。不過我們在設(shè)計(jì)時(shí)要盡量避免有用戶犯錯的機(jī)會。如圖所示，提示中已告訴用戶「庫存5件」，如果這個時(shí)候用戶在「數(shù)量」一欄中輸入「6」會怎么樣呢？系統(tǒng)會自動幫用戶將其改為「5」省去用戶手動修正的操作。

「手勢操作」主要指用戶使用移動產(chǎn)品時(shí)的操作方式。常見的有點(diǎn)擊雙擊、長按、捏、伸、滑動等等。

反饋

用戶操作后得到的反饋動作，包含提示、跳轉(zhuǎn)、動畫等。

「提示」主要指操作后，系統(tǒng)反饋給用戶的文字說明等，如圖所示。

「跳轉(zhuǎn)」主要指點(diǎn)擊某個鏈接后，頁面跳轉(zhuǎn)到哪里。設(shè)計(jì)師需要在原型上注明跳轉(zhuǎn)時(shí)是「原頁面刷新」還是「新頁面打開」。如果是做手機(jī)應(yīng)用的話，需要注明跳轉(zhuǎn)時(shí)的轉(zhuǎn)場方式，如圖所示。

「動畫」主要指用戶操作后，系統(tǒng)通過動畫的方式反饋給用戶。動畫給人的感覺比較友好、趣味性較強(qiáng)，是非常常見的一種反饋形式。比如刪除某條信息，該信息以漸變消失的形式告訴用戶：這條信息已經(jīng)被刪除了。在移動應(yīng)用中，動畫反饋的形式更為常見。因此設(shè)計(jì)師一定要在原型上表述清楚動畫的形式，必要時(shí)可以制作 domo 動畫演示效果給開發(fā)人員。

文章來源：站酷

作為UI設(shè)計(jì)師，我相信大家都是專注于界面設(shè)計(jì)的好不好看，至于界面與界面之間如何交互，點(diǎn)擊之后如何反饋，是一個比較容易被忽略的重要環(huán)節(jié)。

那么我們怎么處理好界面交互中的加載設(shè)計(jì)，減少用戶因等待產(chǎn)生的焦慮情緒，保證整個體驗(yàn)無縫銜接，今天這篇文章就來總結(jié)下APP中數(shù)據(jù)加載模式設(shè)計(jì)。

一、為什么要加載？

1、用戶在進(jìn)行某些操作時(shí)，都要從后臺請求數(shù)據(jù)，這個過程都需要時(shí)間，系統(tǒng)應(yīng)該始終在合理的時(shí)間內(nèi)做出適當(dāng)?shù)姆答?，讓用戶了解正在發(fā)生的事情，讓用戶知道此時(shí)的操作是有反應(yīng)，減緩用戶因等待而產(chǎn)生的焦慮感。同時(shí)加載方式也可以做的有趣，吸引用戶注意力，增加沉浸式體驗(yàn)，讓用戶輕松自在的享受等待；

2、體驗(yàn)無縫銜接，減少用戶跳失，正常的等待加載時(shí)間是0.3秒以內(nèi)，同時(shí)不同場景對應(yīng)有不同的加載方式。

二、常見的加載場景及方式

a.加載場景：

不同場景有不同的加載方式，常見的加載場景一般有以下幾種：下拉刷新、上拉加載、切換新頁面的數(shù)據(jù)加載、頁面局部模塊的加載、啟動頁加載、操作按鈕加載。實(shí)際工作中，要根據(jù)不同的場景搭配不同的加載樣式，才能更好的做到緩解用戶等待焦慮，降低用戶的跳失率。

b.加載方式：

1、全屏加載

主要出現(xiàn)在手機(jī)H5頁面，例如微信的文章詳情頁。一般會有進(jìn)度條或有趣的動畫設(shè)計(jì)，減輕用戶等待時(shí)的焦慮感。加載失敗后，頁面通常為空白頁，且有重新刷新操作按鈕。

優(yōu)點(diǎn)：將整個頁面的內(nèi)容都加載出來才展現(xiàn)給用戶，能保證內(nèi)容的整體性，全部加載完才能夠系統(tǒng)化的閱讀。

缺點(diǎn)：一般等待的時(shí)間較長，容易產(chǎn)生焦躁情緒，尤其是遇到網(wǎng)絡(luò)不好的情況

2、下拉刷新加載

主要出現(xiàn)在頁面內(nèi)容為推薦類、或者信息更新頻次高的產(chǎn)品，通過刷新加載新數(shù)據(jù)，加載的loading樣式可以結(jié)合產(chǎn)品logo或IP形象進(jìn)行設(shè)計(jì)，增加趣味性，吸引用戶注意力。

3.占位圖加載

如果頁面布局樣式比較固定，可以采用占位圖加載機(jī)制，先加載頁面布局和占位圖，先給用戶展示頁面框架，后加載頁面圖片細(xì)節(jié)部分，這種加載方式相對于直接展示白屏來說，呈現(xiàn)給用戶無縫銜接的感覺，體驗(yàn)更加流暢。

4.分布加載

當(dāng)頁面中有文字和圖片時(shí)，優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素，如先加載文字，后加載圖片，圖片加載完成前使用占位符顯示，保證用戶可以順暢閱讀，縮短用戶的等待時(shí)間，提高產(chǎn)品體驗(yàn)。

優(yōu)點(diǎn)：可以幫助用戶快速閱讀內(nèi)容，了解信息。

這種加載形式更加適用于內(nèi)容閱讀型的APP或圖片、視頻類資源比較多的頁面。

5.自動加載（懶加載）

當(dāng)瀏覽信息時(shí)，不停的向上滑動，新的內(nèi)容會不停的從底部出現(xiàn)，這種方式稱為自動加載。對于自動加載，要注意每次加載多少條內(nèi)容，或者多少屏的內(nèi)容。一般會在距下面內(nèi)容一定距離時(shí)開始加載，當(dāng)網(wǎng)速非常快的時(shí)候，用戶并不能感知懶加載的動作，這樣可以營造一種無極限瀏覽的錯覺，很容易的把用戶吸引住。

優(yōu)點(diǎn)：無需用戶操作，自動加載后續(xù)內(nèi)容，營造沉浸式體驗(yàn)。

應(yīng)用：適合feed流、瀑布流、算法推薦類的內(nèi)容。

6.預(yù)加載

提前加載好頁面信息內(nèi)容，這樣當(dāng)網(wǎng)絡(luò)不好的時(shí)候，可直接從本地緩存中渲染，就不用再加載了。

比如用戶在看A頁面的時(shí)候，App在后臺加載完B頁，等用戶打開B頁的時(shí)候就不需要等待加載了，因?yàn)锳pp已經(jīng)幫用戶提前加載好了，給用戶提供無縫鏈接的感覺，弊端就是服務(wù)器壓力很大，就是要預(yù)測用戶行為，加載其他數(shù)據(jù)，這樣會消耗不少流量，所以建議在WiFi網(wǎng)絡(luò)環(huán)境下采取這種預(yù)加載機(jī)制，而在蜂窩網(wǎng)絡(luò)狀態(tài)下則不采用預(yù)加載機(jī)制。

7.漸進(jìn)式加載

一般出現(xiàn)在圖片類產(chǎn)品，比如pinterest、unsplash等，當(dāng)瀏覽圖片的時(shí)候，經(jīng)常是先看到一張模糊圖或與圖片較為相似的色彩值圖片，然后再漸漸的變得清晰，這種效果就叫做漸進(jìn)式加載。漸進(jìn)式加載能夠大大的提升體驗(yàn)感。

8.后臺加載(異步處理)

用戶在前端執(zhí)行操作后，客戶端立即給予操作成功反饋提示，然后把請求放到后臺與服務(wù)器交互，這一過程用戶是看不到的，也不需要等待，體驗(yàn)是非常棒的。

例如在用微信發(fā)朋友圈時(shí)，會覺得特別流暢，即使在網(wǎng)絡(luò)不好的情況下，會看到你的動態(tài)立即展示在朋友圈列表，并不會提示你網(wǎng)絡(luò)不好，操作失敗，全部以操作成功來顯示，其實(shí)它只是將你發(fā)布的操作記錄了下來，等網(wǎng)絡(luò)一好就將動態(tài)上傳到服務(wù)器，從而完成發(fā)布行為，微信的點(diǎn)贊也是同樣的操作，你給好友點(diǎn)了贊，并不會提示你網(wǎng)絡(luò)不好，操作失敗，而是提示你點(diǎn)贊成功了，其實(shí)它只是將你點(diǎn)贊的操作記錄了下來，等網(wǎng)絡(luò)一好就將點(diǎn)贊的行為上傳到服務(wù)器，從而完成點(diǎn)贊行為會，給用戶帶來體驗(yàn)流暢的感覺。

所以這種加載方式是需要根據(jù)具體使用場景來權(quán)衡使用的，對于一些重要的操作，建議還是使用模態(tài)的方式加載，對于一些小操作，如點(diǎn)贊、訂閱、關(guān)注，可采用后臺加載的方式。

9.模態(tài)加載

以上幾種方式都是采用非模態(tài)加載，不會對用戶造成干擾，用戶可以做別的事情，不需要等待加載完成，大大降低了等待的焦躁感。

模態(tài)加載對用戶干擾比較大，需要中斷用戶的其他操作，用戶只能等待加載結(jié)束，因?yàn)槿绻脩魣?zhí)行了其他操作就會打斷正在進(jìn)行的加載過程，實(shí)現(xiàn)不了用戶的目標(biāo)。

應(yīng)用：用戶執(zhí)行的操作本身不能和其他操作同時(shí)進(jìn)行，例如登錄，退出，應(yīng)用啟動，手機(jī)支付等場景。

三、具體實(shí)施方法小結(jié)

1、能用非模態(tài)加載的盡量不要去用模態(tài)加載，如果非得用模態(tài)加載，也盡量給一個能取消的按鈕，方便用戶在不愿意等待的情況下取消操作。

2、如果加載的時(shí)間比較長，最好能告知用戶加載進(jìn)度，讓用戶心理有個預(yù)期，這樣用戶更愿意等待，不會因?yàn)榈却a(chǎn)生焦慮感，分分鐘卸載你的產(chǎn)品?？茖W(xué)的實(shí)驗(yàn)證實(shí)，先慢后快的進(jìn)度條是讓用戶心理感受上最快的設(shè)計(jì)，這是因?yàn)橛脩糇钊菀子涀∽詈笠凰查g的感覺，如果最后一瞬間，感知到了快，就覺得很順暢了。

3、數(shù)據(jù)加載本身就是很考驗(yàn)用戶心態(tài)感受，所以盡量通過一些有趣的動畫來轉(zhuǎn)移用戶的注意力，營造沉浸式體驗(yàn)，同時(shí)增加了趣味性，給予了產(chǎn)品人性化的設(shè)計(jì)。

總結(jié)

作為產(chǎn)品設(shè)計(jì)人員，盡量給用戶好的體驗(yàn)，我們應(yīng)該讓產(chǎn)品自己去解決問題，而不是把問題拋給用戶。在考慮人與客戶端交互的同時(shí)也要把客戶端和服務(wù)端之間的數(shù)據(jù)傳輸考慮進(jìn)來，站在用戶、客戶端和服務(wù)器閉環(huán)的角度去思考產(chǎn)品，才能設(shè)計(jì)出體驗(yàn)更好的數(shù)據(jù)加載方案。

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。

導(dǎo)航模式是提高可用性的捷徑。當(dāng)你查看近年來最成功的交互導(dǎo)航設(shè)計(jì)時(shí)，顯而易見的贏家是那些完美執(zhí)行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式，但有些規(guī)則是你不能打破的。以下是創(chuàng)建出色的移動導(dǎo)航的四個重要原則：

簡單

首先，最重要的是，導(dǎo)航系統(tǒng)必須簡單。良好的導(dǎo)航應(yīng)該感覺像一只無形的手，引導(dǎo)用戶。一種方法是根據(jù)移動用戶最有可能執(zhí)行的任務(wù)來確定移動應(yīng)用程序的內(nèi)容和導(dǎo)航的優(yōu)先級。

可見

正如雅各布·尼爾森（ Jakob Nielsen）所說，識別物體比記憶更容易。這意味著你應(yīng)該通過使操作和選項(xiàng)可見來最小化用戶的記憶負(fù)擔(dān)。導(dǎo)航應(yīng)該始終可用，而不僅僅是在我們預(yù)期用戶需要導(dǎo)航的時(shí)候。

明確

導(dǎo)航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導(dǎo)的情況下用戶應(yīng)該一目了然的知道如何從A點(diǎn)轉(zhuǎn)到B點(diǎn)。試想一下購物車圖標(biāo)，它作為一個標(biāo)簽或查看項(xiàng)目的標(biāo)識符。用戶無需考慮如何導(dǎo)航才能進(jìn)行購買；此元素將指導(dǎo)他們執(zhí)行適當(dāng)?shù)牟僮鳌?

一致性

所有視圖的導(dǎo)航系統(tǒng)應(yīng)相同。不要將導(dǎo)航控件放在不同頁面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導(dǎo)航應(yīng)該使用“最不意外的原則”。導(dǎo)航應(yīng)該激勵用戶參與并與你所提供的內(nèi)容互動。

大拇指設(shè)計(jì)法則

史蒂文·霍伯在對移動設(shè)備使用情況的研究中發(fā)現(xiàn)，49%的人依靠一個拇指在手機(jī)上完成任務(wù)。在下面的圖中，手機(jī)屏幕上的圖表是近似可達(dá)圖，其中顏色表示用戶可以觸及的屏幕區(qū)域，并與拇指交互。綠色表示用戶可以輕松到達(dá)的區(qū)域；黃色表示需要伸展的區(qū)域；紅色表示需要用戶改變握住設(shè)備的方式的區(qū)域。

在設(shè)計(jì)時(shí)，要考慮到你的應(yīng)用程序?qū)⒃诙喾N環(huán)境中使用；即使是喜歡使用雙手握手機(jī)的人也不一定總是使用多個手指，更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣，通過單手和拇指的交互即可輕松達(dá)到目標(biāo)。

另一個重點(diǎn)是底部導(dǎo)航應(yīng)該用于具有相同重要性的最高層級目標(biāo)。是需要從應(yīng)用程序中的任何位置都可以直接訪問的。

最后，也是很重要的一點(diǎn)，要注意點(diǎn)擊目標(biāo)區(qū)域的大小。Microsoft 建議 你將觸摸目標(biāo)區(qū)域大小設(shè)置為9平方毫米或更大（135 ppi顯示器上的48×48像素，縮放比例為1.0倍）。避免使用小于7平方毫米的觸摸目標(biāo)區(qū)域。

觸摸目標(biāo)區(qū)域不應(yīng)小于44像素到48像素（或11毫米到13毫米），包括填充。

標(biāo)簽欄

許多應(yīng)用程序使用標(biāo)簽欄來顯示應(yīng)用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。

底部導(dǎo)航設(shè)計(jì)的三個關(guān)鍵因素

導(dǎo)航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地，這些目的地需要從應(yīng)用程序中的任何位置直接訪問。好的底部導(dǎo)航設(shè)計(jì)應(yīng)該遵循以下三個原則。

1.僅顯示最重要的目的地

避免在底部導(dǎo)航中使用五個以上的訪問標(biāo)簽，因?yàn)門AP目標(biāo)之間的距離太近。在標(biāo)簽欄中放太多標(biāo)簽會使人們很難點(diǎn)擊他們想要的標(biāo)簽。而且，隨著每個額外的選項(xiàng)卡顯示，就會增加了應(yīng)用程序的復(fù)雜性。

避免使用五個以上的目的地。

避免滾動內(nèi)容

對于小屏幕來說，部分隱藏的導(dǎo)航似乎是一個非常好的解決方案，因?yàn)槟悴槐負(fù)?dān)心有限的屏幕空間，只需將導(dǎo)航選項(xiàng)放入一個可滾動的選項(xiàng)卡即可。但是，可滾動的內(nèi)容效率較低，因?yàn)橛脩舯仨毾葷L動才能看到所需的選項(xiàng)，因此最好盡可能避免。

該避免在選項(xiàng)卡欄中放置太多項(xiàng)目，以防止用戶滾動，然后才能單擊所需的選項(xiàng)。

2.明確當(dāng)前位置

應(yīng)用程序菜單上最常見的一個錯誤是沒有明確用戶的當(dāng)前位置?！拔以谀睦?？“是用戶遇到的基本問題之一。用戶應(yīng)該第一眼就知道如何從A點(diǎn)轉(zhuǎn)到B點(diǎn)，而不需要任何外部引導(dǎo)。你應(yīng)該適當(dāng)?shù)氖褂靡曈X提示（圖標(biāo)、標(biāo)簽和顏色），這樣導(dǎo)航就不需要任何解釋。

圖標(biāo)

底部導(dǎo)航應(yīng)該與圖標(biāo)的內(nèi)容進(jìn)行適當(dāng)?shù)慕Y(jié)合。盡管有一些用戶熟悉的通用圖標(biāo)，但大多數(shù)圖標(biāo)代表的功能包括搜索，電子郵件，打印等。

在適用于Android的先前版本的Bloom.fm應(yīng)用程序中，很難理解用戶的當(dāng)前位置。

顏色

避免在底部選項(xiàng)卡欄中使用不同顏色的圖標(biāo)和文本標(biāo)簽。相反，遵循這個簡單的規(guī)則，用應(yīng)用程序的主顏色為當(dāng)前的底部導(dǎo)航（包括圖標(biāo)和任何顯示的文本標(biāo)簽）著色。

左：不同顏色的圖標(biāo)使你的應(yīng)用看起來像一棵圣誕樹。右：只使用一種原色。

這是iOS的Twitter應(yīng)用程序中的底部欄菜單。消息視圖處于選中狀態(tài)。

如果底部導(dǎo)航欄是彩色的，請確保對當(dāng)前位置的圖標(biāo)和文本標(biāo)簽使用黑色或白色。

左：避免將彩色圖標(biāo)與彩色底部導(dǎo)航欄配對。右：使用黑色或白色圖標(biāo)。

文本標(biāo)簽

文本標(biāo)簽應(yīng)為導(dǎo)航圖標(biāo)提供簡短且有意義的定義。避免使用長文本標(biāo)簽，因?yàn)樗鼈儾粫財(cái)嗷蜃詣訐Q行。

避免換行，截?cái)嗪涂s小文本標(biāo)簽。

菜單元素應(yīng)易于理解。用戶應(yīng)該能夠理解點(diǎn)擊元素時(shí)會發(fā)生什么。

目標(biāo)尺寸

使目標(biāo)區(qū)域足夠大，以使其易于點(diǎn)擊或單擊。要計(jì)算每個底部導(dǎo)航動作的寬度，請將視圖的寬度除以動作數(shù)量?；蛘撸瑢⑺械撞繉?dǎo)航動作設(shè)置為最大動作的寬度。Android建議移動設(shè)備底部導(dǎo)航欄的尺寸如下。

顯示了移動設(shè)備上的固定底部導(dǎo)航欄，單位為密度獨(dú)立像素（dp）

標(biāo)簽上的微標(biāo)

你可以在標(biāo)簽欄圖標(biāo)上顯示微標(biāo)，以表明存在與該視圖或模式相關(guān)的新信息。

考慮對標(biāo)簽欄圖標(biāo)加微標(biāo)以保持通俗易懂。

3.使導(dǎo)航不言而喻

良好的導(dǎo)航感覺就像是一只看不見的手，可以引導(dǎo)用戶前進(jìn)。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內(nèi)容也沒有用。

行為

每個底部導(dǎo)航圖標(biāo)必須指向目標(biāo)目的地，并且不應(yīng)打開菜單或其他彈出窗口。點(diǎn)擊底部的導(dǎo)航圖標(biāo)可以引導(dǎo)用戶直接進(jìn)入相關(guān)的視圖，或者刷新當(dāng)前活動的視圖。不要使用標(biāo)簽欄為用戶提供對當(dāng)前屏幕或應(yīng)用程序模式下的元素起作用的控件。如果需要提供控件，請改用工具欄。

每個底部導(dǎo)航圖標(biāo)必須通向目標(biāo)目的地。

上面的控件是工具欄而不是底部導(dǎo)航。

保持一致性

盡可能在各個頁面上顯示相同的選項(xiàng)卡。最好是你能給用戶一種視覺穩(wěn)定性的感覺。

當(dāng)選項(xiàng)卡的功能不可用時(shí)，不要刪除它。如果在某些情況下刪除了某個選項(xiàng)卡，但在其他情況下沒有，替換使應(yīng)用程序的UI無法預(yù)測。最好的解決方案是確保所有選項(xiàng)卡都已啟用，但要說明為什么選項(xiàng)卡的內(nèi)容不可用。例如，如果用戶沒有本地文件，則Dropbox應(yīng)用中的“本地”選項(xiàng)卡將顯示一個頁面，說明如何獲取文件。

Dropbox應(yīng)用的空狀態(tài)頁面

滾動時(shí)隱藏標(biāo)簽欄

如果屏幕是滾動的，則當(dāng)人們滾動查找新內(nèi)容時(shí)，標(biāo)簽欄可以隱藏，而當(dāng)他們開始回到頂部時(shí)，標(biāo)簽欄可以顯示。

標(biāo)簽導(dǎo)航可以在滾動時(shí)動態(tài)消失。

視覺愉悅

避免使用橫向運(yùn)動在視圖之間轉(zhuǎn)換。活動視圖和非活動視圖之間的過渡應(yīng)使用淡入淡出動畫。

圖形圖標(biāo)：創(chuàng)意導(dǎo)航

屏幕尺寸是將你的觀點(diǎn)傳達(dá)給用戶的主要挑戰(zhàn)。使用圖形圖標(biāo)作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標(biāo)的圖形說明了點(diǎn)擊它后將會進(jìn)入什么頁面，這種導(dǎo)航模式更加節(jié)省屏幕空間。

Google Material Design，浮動操作按鈕

Google Material Design 對這種類型的導(dǎo)航使用術(shù)語“浮動擦操作按鈕”。它們的區(qū)別在于浮動在UI上方的帶有圓圈的圖標(biāo)，并具有運(yùn)動行為。

像Evernote這樣的應(yīng)用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。

Tumblr具有漂亮的圖形圖標(biāo)以及適當(dāng)?shù)臉?biāo)簽。當(dāng)你在應(yīng)用程序中滑動屏幕時(shí)，這些圖標(biāo)也很方便地消失。

然而，這種模式有一個明顯的缺點(diǎn)-浮動操作按鈕隱藏內(nèi)容。從用戶體驗(yàn)的角度來看，不便于用戶頻繁點(diǎn)擊操作

而且，許多研究人員表明，圖標(biāo)難以記憶，而且效率極低。只有普遍理解的圖標(biāo)才能被很好的記憶（例如，打印，關(guān)閉，播放/暫停，回復(fù)等）。這就是為什么使圖標(biāo)清晰直觀*，并在圖標(biāo)旁邊引入文本標(biāo)簽的*重要原因。

結(jié)論

導(dǎo)航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應(yīng)用程序時(shí)，要始終考慮用戶角色以及他們的目標(biāo)。然后，定制導(dǎo)航以幫助他們實(shí)現(xiàn)這些目標(biāo)。為用戶設(shè)計(jì)。一個產(chǎn)品對他們來說越容易使用，他們使用它的可能性就越大。

轉(zhuǎn)自：UI中國-Coldrain1

在做交互文檔之前，我們先要明白什么是交互文檔、為什么要做以及做了給誰看。

一、什么是交互文檔 

交互文檔，即交互設(shè)計(jì)說明文檔。英文 Design Requirement Document ，簡稱DRD。主要是用來承載設(shè)計(jì)思路、設(shè)計(jì)方案、信息架構(gòu)、原型線框、交互說明等內(nèi)容。

二、為什么需要交互文檔          

有些人可能對文檔這種東西比較反感，尤其是從事工作不久的朋友。其實(shí)工作得越久，越會發(fā)現(xiàn)文檔的重要性，它可以幫助你理清思路，并記錄下來，便于回顧。

通常，一個比較基礎(chǔ)、規(guī)范的交互文檔（DRD）由：文檔封面、更新日志、文檔圖例、設(shè)計(jì)背景/思路、業(yè)務(wù)流程、頁面交互、全局通用說明、廢紙簍八部分組成。當(dāng)然，這不是絕對，你可以根據(jù)你的實(shí)際工作需要進(jìn)行增減。

比如，如果是C端產(chǎn)品的話，用戶調(diào)研的結(jié)論、用戶畫像、用戶體驗(yàn)地圖等等，都可以放進(jìn)去給看的人一個參考。尤其是在如今這么關(guān)注用戶體驗(yàn)、產(chǎn)品思維的一個大環(huán)境下，這些數(shù)據(jù)支撐很有力量。同時(shí)還可以幫助開發(fā)人員、界面設(shè)計(jì)人員培養(yǎng)產(chǎn)品思維、體驗(yàn)思維，大家一起將產(chǎn)品變得更好。

其次，交互文檔的整潔與美觀也很有必要。相信在過去幾年不少人有遇到過這樣的產(chǎn)品經(jīng)理（兼交互），他們會輸出一些有時(shí)連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。當(dāng)開發(fā)和界面設(shè)計(jì)的人提出質(zhì)疑的時(shí)候還美其名曰線框不重要，重要的是里面的業(yè)務(wù)邏輯。。。其實(shí)用產(chǎn)品思維想，交互文檔就是交互設(shè)計(jì)師的產(chǎn)品，而看的人就是用戶，保持良好的可讀性，可謂至關(guān)重要。

1、文檔封面

交互文檔的封面如上圖，通常包括產(chǎn)品的名稱、Logo、版本號以及版本發(fā)布時(shí)間、所屬部門、對接負(fù)責(zé)人/對接人。

2、更新日志

我們都知道，在產(chǎn)品的迭代的過程中，需求/功能是會不斷調(diào)整的。而更新日志，就是為了迭代而生。它一般由修改日期、修改內(nèi)容、修改人、版本號和備注組成。如果是新增的功能或模塊，建議是要加上鏈接可直接跳轉(zhuǎn)至新增內(nèi)容的，如上圖。

版本號也是同理，都應(yīng)加上對應(yīng)的版本鏈接，便于查看者回溯之前的內(nèi)容，與當(dāng)前的新版本形成對比。這一點(diǎn)對開發(fā)人員來說很重要，其次對于新同事深入理解產(chǎn)品也能起到很大的幫助。

修改日期，通常是按時(shí)間倒序排列，查看起來會比較方便。

3、文檔圖例

文檔圖例，顧名思義就是關(guān)于此文檔的一些輔助說明，目的是為了讓讀者更好地理解文檔。如上圖的：操作/跳轉(zhuǎn)圖例、標(biāo)簽圖例、流程圖例以及手勢操作圖例。

4、設(shè)計(jì)背景/思路

因?yàn)槲医衲陮幼罹玫氖且粋€B端產(chǎn)品的項(xiàng)目，所以整理了一個產(chǎn)品畫像，僅供參考。

5、業(yè)務(wù)流程

業(yè)務(wù)流程圖，不是操作流程圖也不是頁面流程圖。它是產(chǎn)品的整體業(yè)務(wù)流程，直接和業(yè)務(wù)掛鉤，可以說是產(chǎn)品的核心流程。

例如淘寶APP，買家購物由始至終的流程就是它的業(yè)務(wù)流程。通常用泳道圖的形式展示，多數(shù)情況下是由產(chǎn)品經(jīng)理繪制。

以上是我所負(fù)責(zé)產(chǎn)品的核心業(yè)務(wù)的流程圖。因?yàn)槭荁端產(chǎn)品，涉及角色較多，針對3個代表性角色分別進(jìn)行了繪制，僅供參考。(涉及到保密協(xié)議，所有關(guān)鍵詞都去掉了)

6、頁面交互

（1）信息架構(gòu)

信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層，是產(chǎn)品的骨架。一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代，否則不會大改。

（2）權(quán)限說明

如果是C端產(chǎn)品，權(quán)限這一塊相對簡單，比較好整理的。B端產(chǎn)品涉及角色眾多，可能要單獨(dú)拎出來分析整理。以上僅供參考，大家具體情況具體分析。若是功能很單一的產(chǎn)品，交互文檔中也可省去這個模塊。

（3）操作流程圖

產(chǎn)品操作流程圖就是通過圖形化的表達(dá)形式，闡述產(chǎn)品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時(shí)，會產(chǎn)生的一系列操作和反饋的圖標(biāo)。

上圖是登錄、注冊和找回密碼的操作流程圖。僅供參考。模板源文件下載，后臺回復(fù)“交互”即可。

（4）頁面線框圖

頁面線框圖，是通過圖形化的表達(dá)形式，闡述產(chǎn)品在頁面層面的信息。包括： 

【頁面標(biāo)題】即每一個頁面的對應(yīng)標(biāo)題，一般就是導(dǎo)航欄標(biāo)題

【頁面內(nèi)容】以黑白為主，保證信息規(guī)整易讀

【交互說明】用標(biāo)簽將其對應(yīng)起來，包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則 等等

【主流程線】只需要畫出主流程線即可，千萬不可太多太雜，時(shí)刻考慮讀者的感受

以上是注冊/登錄的線框圖和詳細(xì)的交互說明。將重點(diǎn)內(nèi)容用紅色標(biāo)記，可以讓查看者一目了然更好理解文檔。

7、全局通用說明

（1）常用控件

常用控件類似UIKit，通常將極具復(fù)用價(jià)值的控制整理在一起，方便及時(shí)調(diào)用。

（2）復(fù)用界面

（3）時(shí)間規(guī)范

（4）缺省頁匯總

五、總結(jié)

文檔、軟件只是工具，最重要的還是要落地、實(shí)行起來才能對產(chǎn)品有所幫助。所以在撰寫文檔的每時(shí)每刻，都應(yīng)該站在“讀者”的角度思考，他們看的時(shí)候感受會是怎樣的，會覺得很難理解嗎？

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。

競品分析是UX設(shè)計(jì)師的標(biāo)準(zhǔn)工具之一， 且用戶體驗(yàn)設(shè)計(jì)師的主要交付品之一就是競品分析報(bào)告。在設(shè)計(jì)一個新的方案之前，我們往往會查看其他類似的產(chǎn)品，了解其他人做的相關(guān)工作，希望從中找到任何弱點(diǎn)或者優(yōu)點(diǎn)，并期望在此基礎(chǔ)上進(jìn)行改進(jìn)，這將利于你的設(shè)計(jì)。事實(shí)上，競品分析已經(jīng)不再局限于一種工具方法，更是一種思維模式，如何對比分析，如何批判性的進(jìn)行比較以及從差異中獲取價(jià)值。

UX設(shè)計(jì)項(xiàng)目會遇到哪些類型的競爭對手？

這個問題可以理解為，我們要分析哪些競爭對手？一般來講，所有UX項(xiàng)目都面臨兩種競爭，一種是直接競爭對手，即業(yè)務(wù)有直接沖突，涉及到具體的利益沖突，商業(yè)沖突。例如滴滴和uber，淘寶和京東。另一種則是“間接競爭對手”，往往針對某些相似的產(chǎn)品模塊，這里的競爭并沒有準(zhǔn)確的定義，只是為了比較而給與的一個名稱。 例如你在進(jìn)行自家產(chǎn)品登錄注冊模塊的設(shè)計(jì)，此時(shí)你不僅僅可以研究一些直接競品，也可以研究其他擁有此功能模塊的產(chǎn)品。而該產(chǎn)品與你的產(chǎn)品并沒有構(gòu)成競爭的關(guān)系，只是提供了一個參考方向。

為什么要進(jìn)行比較？

關(guān)于這個問題有兩個答案，首先，調(diào)研競品發(fā)掘哪些功能或服務(wù)是他們不能做或者沒有實(shí)現(xiàn)的，這就是我們的產(chǎn)品可以利用的機(jī)會點(diǎn)，以提供新穎的或者說更強(qiáng)大的功能，從而提高產(chǎn)品競爭力。例如順豐快遞首先開創(chuàng)了機(jī)器填寫快遞信息的功能，從而大大提高用戶填寫訂單的效率、準(zhǔn)確度和滿意度，進(jìn)一步提高品牌競爭力和服務(wù)水平。

其次，檢查其他設(shè)計(jì)師對相同需求的解決方案必然會對你有所啟發(fā)，有利于你從中獲取靈感來優(yōu)化自家產(chǎn)品。例如信息架構(gòu)的優(yōu)化、或者簡單地操作流程的優(yōu)化。參考競品意味著你可以不斷從中學(xué)習(xí)，把競品的每個模塊、步驟拆解開來，分析其背后的設(shè)計(jì)原因及它們?nèi)绾伟l(fā)揮作用，這將有利于你的產(chǎn)品設(shè)計(jì)。

參考競品首先意味著你能夠達(dá)到和競品同一水平的用戶體驗(yàn)，因?yàn)橛辛藚⒄諛?biāo)準(zhǔn)相當(dāng)于指路明燈，競品的優(yōu)秀體驗(yàn)也會督促你不斷優(yōu)化自己的產(chǎn)品。但競品雖然為你創(chuàng)造了一個標(biāo)準(zhǔn)，同時(shí)也會限制你的思路和想法，使你可能錯過一些更優(yōu)秀的解決方案，參考競品能讓你追趕別人，但無法讓你完全超越他人。因此僅僅復(fù)制是不夠的，必須融入自己的見解且時(shí)刻保持創(chuàng)新意識。

對直接競爭對手進(jìn)行分析

通常，競品分析發(fā)生在項(xiàng)目的早期，你或許會尋找市面上是否會有競爭對手，然后嘗試著從競品中尋找優(yōu)點(diǎn)和弱點(diǎn)，以推動自己的產(chǎn)品。如果沒有競爭對手時(shí)，往往可以從目標(biāo)用戶入手，因?yàn)橛脩魧?shí)際上擁有自己的解決方案或者說策略，例如在滴滴流行起來之前，對應(yīng)的用戶群往往使用出租車來代替出行方式。目標(biāo)用戶在這之前是如何解決他們的需求的？你應(yīng)該可以獲得一些間接可比的方案，收集用戶的相關(guān)想法有利于推動你的產(chǎn)品設(shè)計(jì)。

在產(chǎn)品上線后的運(yùn)行階段，仍然需要做競品分析，此時(shí)或許存在一些新興的的競品，雖然是后來者，但往往會在交互、體驗(yàn)或者運(yùn)營策略等方面碰撞出一些新的創(chuàng)意。根據(jù)競品的功能策略，你需要進(jìn)行一定的調(diào)整，不斷對產(chǎn)品迭代優(yōu)化。除此之外，產(chǎn)品有時(shí)需要做一些追隨趨勢的更新，例如視覺風(fēng)格、新的交互設(shè)計(jì)語言等。

如何從間接競爭對手那里獲得靈感

間接競爭對手也會給你一定的啟發(fā)，作為一個用戶體驗(yàn)各種產(chǎn)品時(shí)，留心那些優(yōu)秀的設(shè)計(jì)，可能是視覺方面也可能是交互方面，總之這些優(yōu)雅的設(shè)計(jì)將會成為你的靈感之源。然而所有的設(shè)計(jì)都有其適用場景及背后的設(shè)計(jì)原理支撐，在海外設(shè)計(jì)經(jīng)驗(yàn)中一再強(qiáng)調(diào)的 context（上下文）就是這個意思。

優(yōu)秀的設(shè)計(jì)都是最適合自己的產(chǎn)品和策略的設(shè)計(jì)，而不是最美觀或最的。因?yàn)樵O(shè)計(jì)不僅僅包涵體驗(yàn)更是要兼顧業(yè)務(wù)。同一個設(shè)計(jì)在一個地方發(fā)揮作用并不意味著移植到其他地方仍然有效。

例如一個簡單的登錄模塊的設(shè)計(jì)，按照常規(guī)經(jīng)驗(yàn)，以目前微信的受眾數(shù)量做參考，可以無腦選擇微信快捷登錄，這無疑是最便捷的方案，但為什么很多產(chǎn)品仍然采用手機(jī)登錄？因?yàn)橐粋€注冊的手機(jī)號碼能為公司的未來帶來極大的增值，每個號碼背后都是一個用戶，且通過手機(jī)號可以對這個用戶進(jìn)行持續(xù)的推廣營銷，如拼多多的短信推廣，移動聯(lián)通的電話推廣。

所以，一切的設(shè)計(jì)都應(yīng)以設(shè)計(jì)背景，業(yè)務(wù)訴求為基本原則來進(jìn)行，盲目的追尋極限的視覺和效率，盲目的信奉設(shè)計(jì)潮流趨勢都是不可取的。好的設(shè)計(jì)和時(shí)尚的設(shè)計(jì)不同，好的設(shè)計(jì)有持久的價(jià)值，是美學(xué)和體驗(yàn)的結(jié)合，并以基于心理學(xué)社會學(xué)的用戶研究為后盾。這樣的設(shè)計(jì)符合用戶的需求同時(shí)能為企業(yè)帶來收益。而時(shí)尚的設(shè)計(jì)則會隨著時(shí)間流逝而銷聲匿跡。

一味追尋潮流的應(yīng)用程序設(shè)計(jì)，公然違背基本的可用性慣例，違背交互設(shè)計(jì)的基本原理，很有可能在市場中失敗。——Prototyper.io UX首席負(fù)責(zé)人Miklos Philips

競品分析時(shí)謹(jǐn)記五個原則

為了保證你所進(jìn)行的競品分析的有效性，需要謹(jǐn)記以下五個原則。 

1.理解背后的需求

分析任何設(shè)計(jì)之前都需要理解設(shè)計(jì)背后的核心需求，這并不是簡單的查看表面內(nèi)容，除了交互體驗(yàn)上的思考，更要深入產(chǎn)品本身，去更多的理解業(yè)務(wù)層商業(yè)策略等方面的內(nèi)因。每個設(shè)計(jì)都有對應(yīng)的場景、上下文甚至各種限制條件。只有理解這些你才清楚這個設(shè)計(jì)是否適合你的產(chǎn)品，或者是否有一定的參考意義。

比如觀察淘寶的搜索功能你會發(fā)現(xiàn)首頁的搜索和店鋪的搜索有很大差異，即首頁的搜索比重要遠(yuǎn)遠(yuǎn)大于店鋪的搜索。店鋪中的搜索按鈕僅僅展示一個雙指面積的btn，而首頁則是展示一個接近通欄的搜索條。那么分析下來，店鋪的搜索btn小巧精致，簡易美觀是否應(yīng)該借鑒，答案是看情況。淘寶首頁入口提供的是一級搜索，涵蓋了淘寶百億級別的商品，因此搜索功能的優(yōu)先級極高。而店鋪商品有限，用戶瀏覽商品往往按照分類，很少使用搜索功能，這種情況下搜索的優(yōu)先級很低。 

因此，理解設(shè)計(jì)背后的理念，解決的問題、如此設(shè)計(jì)的原因才是競品分析重點(diǎn)關(guān)注的方向。切記浮于表面。

2.確定真正的競爭者

認(rèn)清自己的競爭者，他們往往并不僅僅是表面的直接對手。事實(shí)上應(yīng)用程序只是一種幫助用戶達(dá)成目標(biāo)的技術(shù)手段從用戶角度，有很多可選方向，而你的產(chǎn)品想要獲得成功，你就要做那個體驗(yàn)最好，滿意度最高的選項(xiàng)?；叵胍幌?，便利貼的功能應(yīng)用程序是否能實(shí)現(xiàn)？答案是肯定的，但現(xiàn)在為止并沒有任何應(yīng)用程序能夠撼動便利貼的霸主地位。因此，滴滴的競品真的只是其他網(wǎng)約車公司嗎，事實(shí)上滴滴最大的競品是出租車。通常，你最強(qiáng)大的對手并一定不是和你一樣的科技產(chǎn)品。

3.通過標(biāo)準(zhǔn)來判斷，而不是個人臆測

每次進(jìn)行比較都意味著根據(jù)某個標(biāo)準(zhǔn)來進(jìn)行判斷，如何決定兩者的功能孰優(yōu)孰劣，最好的方法是引入標(biāo)準(zhǔn)或者用數(shù)據(jù)說話。例如競品某個模塊轉(zhuǎn)化率高，那必然有其內(nèi)因。另外，我們可以根據(jù)業(yè)界的標(biāo)準(zhǔn)來評判產(chǎn)品的可用性體驗(yàn)，如尼爾森的啟發(fā)式評估原則（后面會詳細(xì)講到）。

4.盲目模仿是導(dǎo)致失敗的罪魁禍?zhǔn)?/strong>