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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 刪減元素容器的線框

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10. 大道至簡

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

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

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

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

臻于完美之時，不是加無可加，而是減無可減。

文章來源：UXRen

年底了，大家有沒有在電腦前面忙成狗呢？我身邊設(shè)計師朋友們可都在沖刺年終 kpi 呢。

但設(shè)計需求越著急就越容易出現(xiàn)問題，不少客戶爸爸們都抱著一種「沒多少時間了，你就這么抄吧」的速成心態(tài)，殊不知這樣讓設(shè)計師很為難啊！

粉絲投稿，求問老板讓「致敬」時，設(shè)計師應(yīng)該如何應(yīng)對呢？

當(dāng)然這種抄襲的事情我們自然不能支持，但從別人的套路中總結(jié)出經(jīng)驗(yàn)還是可以的，為了給大家寫出有干貨的內(nèi)容，我收集了喜茶全年的廣告海報，做了一個設(shè)計風(fēng)格的總結(jié)，方便大家「偷師」（不是抄襲，謝謝）

第一招：港式風(fēng)格

要說新式茶飲行業(yè)最喜歡用的風(fēng)格之一，莫過于「港式風(fēng)格」了，畢竟港式奶茶也是新式茶飲行業(yè)的扛把子。

港風(fēng)兼具了：風(fēng)格強(qiáng)烈/配色醒目等諸多好處，喜茶也在 2019 年多次使用這個風(fēng)格，例如與阿華田合作的聯(lián)名款還有后面的阿喜小賣部以及吃瓜公司，還有后續(xù)的火鍋跨界多肉芒芒甘露等等都采用了港式風(fēng)格來設(shè)計

但其實(shí)港風(fēng)是非常容易操作的，只需要三步就能打造喜茶同款。

下面我們就來看看怎么搞港風(fēng)設(shè)計吧！

談到配色就逃不出一個核心話題：「港風(fēng)到底是什么風(fēng)格？」這就要從香港本土的環(huán)境開始說了，香港擁有非常高的人口密度，在鬧市區(qū)樓宇一棟挨著一棟，店鋪的招牌鱗次櫛比。

大家日常的生活環(huán)境就是每天都被高密度的信息轟炸著，所以店招想要在眾多招牌中脫穎而出自然就需要視覺上的沖擊，其中便以極其醒目的霓虹燈店招勝出。

但霓虹的制作工藝上，圖形與配色都不能太復(fù)雜，于是就形成了：手寫字體+高飽和配色+簡單圖形，這樣的固定組合形式，港式風(fēng)格也就此定型。

所以其實(shí)只要選擇好一個手寫字體你就完成了港風(fēng)的一大半！

然后再選擇一個飽和度高的顏色外加基礎(chǔ)好看的圖形就搞定了，這時你就會擁有一個喜茶同款海報了。

好看的免費(fèi)字體這里找：

第二招：傳統(tǒng)古風(fēng)

說完了港風(fēng)之后，第二個經(jīng)常被 cue 的就是傳統(tǒng)古風(fēng)，而古風(fēng)中最最最最重要的一點(diǎn)就是定好主基調(diào)色，然后選對輔助素材。

而主色調(diào)的選擇無外乎幾種常見的水墨畫、工筆畫、民國畫報等，這些都是古時候我們常用的藝術(shù)載體。

而其中工筆畫和民國畫報因?yàn)楫嬅嫒崦篮每?、畫風(fēng)具有明顯特點(diǎn)成為了現(xiàn)在年輕品牌愛用的設(shè)計形式。

當(dāng)然色調(diào)只能展現(xiàn)畫面的整體感覺，真正的神韻還是要靠細(xì)節(jié)來呈現(xiàn)，例如祥云、角飾紋樣、圓月玉兔等都是極具特色的。

古風(fēng)色調(diào)+裝飾性圖案的這種搭配，可以說在產(chǎn)品廣告中是非常百搭的，且大部分的產(chǎn)品展示都能應(yīng)用上，例如喜茶新品的荔枝季還有桂花綠的海報。

△ 喜茶的中國風(fēng)海報

以及一些節(jié)日海報的應(yīng)用都能很好的體現(xiàn)中國節(jié)日的特色

第三招：簡約風(fēng)格

如果你沒有太多時間去追求風(fēng)格創(chuàng)作但是又想要有好的視覺效果，那你也可以學(xué)學(xué)喜茶的廣告，走簡約派的路線，簡單來說這一風(fēng)格的要素就是排版要好 + 元素要少。

說白了就是畫面保持簡潔的同時還要具有設(shè)計感，這就全靠排版來撐了，相比其他的風(fēng)格，簡約風(fēng)的排版更多元化。

常規(guī)的排版方式有居中、左右、四邊構(gòu)圖。

只要選擇合適的構(gòu)圖外加上好看的照片，你就會獲得不錯的簡約風(fēng)海報了，其實(shí)這種風(fēng)格也不用拘泥于灰白色調(diào)，配上其他的顏色或是插畫圖片時效果也一樣很好。

當(dāng)然，我們在看設(shè)計作品時都是只看到了最好的一面，看不到品牌與設(shè)計師在背后反復(fù)實(shí)驗(yàn)與摸索的過程。

△ 喜茶全年海報的一小小小部分…

里面還有一些不錯的海報作品卻因?yàn)椴煌脑蛭茨芘c大家見面。

號稱茶飲界「廣告公司」的喜茶在這一年除了用心做飲品之外，也為設(shè)計圈提供了不少有價值的物料，能夠靠設(shè)計將產(chǎn)品的價值傳遞出來對于設(shè)計師來說是一個好現(xiàn)象，設(shè)計在以后的日子里會被越來越多的品牌重視起來，上面這些「套路」大家可以學(xué)起來了~

文章來源：優(yōu)設(shè)

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

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

本文對比4款目前付費(fèi)類產(chǎn)品中比較典型的“京東、亞朵、支付寶、騰訊理財通”的等級會員體系，分別代表4種不同的等級會員體系類型。從會員體系構(gòu)成的4個核心元素：命名、層數(shù)、成長值計算、會員權(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級，會員升級的難度也加大了。

騰訊理財通等級會員共分為4級，分別為普通會員、白銀會員、黃金會員與鉑金會員。顏色區(qū)分上，級別從低到高顏色分別為藍(lán)灰色、銀灰、金色、黑色，通過灰色調(diào)營造理財產(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è)計時需要綜合考慮付費(fèi)會員和等級會員體系在維系用戶、營銷行為等方面的價值，做好取舍。

此外，還可以參考亞朵酒店的做法，將等級會員的某一級作為付費(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è)幾乎不需要付出成本。

二、成長值計算

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

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

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

分析如下：

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

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

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

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

分析如下：

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

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

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

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

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

分析如下：

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

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

4. 騰訊理財通會員的成長值計算涵蓋以下幾個要素：

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

分析如下：

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

理財通會員成長值的計算公式同樣為白盒，清晰的展示用戶完成任務(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)，盡可能的挖掘用戶的剩余價值。

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)品的用戶的核心訴求還是在于更高的性價比。
• 從業(yè)務(wù)閉環(huán)角度看：亞朵酒店的會員權(quán)利累計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. 騰訊理財通會員權(quán)益構(gòu)成

騰訊理財通會員等級禮遇如下圖所示：

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

結(jié)語

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

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

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

本文分享國際化司機(jī)端首頁改版完整思考過程，化繁為簡提升司機(jī)使用效率，提升產(chǎn)品用戶體驗(yàn)。

關(guān)于國際化司機(jī)端

隨著滴滴國際化業(yè)務(wù)腳步不斷加快，司機(jī)端始終是作為承載全球化業(yè)務(wù)運(yùn)力的基礎(chǔ)保障。

同時，在移動通信技術(shù)高速發(fā)展的背景下，不同國家間的傳輸速度與硬件設(shè)備差距正在不斷縮小，用戶對應(yīng)用產(chǎn)品的期望由基礎(chǔ)的可接受、可使用、功能齊全，向更易用、簡約、更為專注的產(chǎn)品使用體驗(yàn)上轉(zhuǎn)變。

在新階段下，「為全球司機(jī)用戶提供一個「克制」「可依賴」的產(chǎn)品使用體驗(yàn)」、「為業(yè)務(wù)拓展提供有力的體驗(yàn)支撐」是體驗(yàn)設(shè)計團(tuán)隊在新的階段下提出的目標(biāo)。

現(xiàn)狀分析

2018 年 9 月我們與產(chǎn)品同學(xué)深入拉美當(dāng)?shù)貙λ緳C(jī)側(cè)進(jìn)行為期 2 周的產(chǎn)品體驗(yàn)調(diào)研。雖然在當(dāng)?shù)氐臅r間較為短暫，但是我們依舊感受到了拉美國家的習(xí)俗文化和人文特點(diǎn)。

相比中國人的含蓄內(nèi)斂，巴西與墨西哥人顯然更加熱情隨和。

在巴西，這個世界上假期最多的國家，處處體現(xiàn)著人們對生活的享受才是自始至終的追求。無論是世界杯一個月狂歡長假，還是周末下午兩點(diǎn)開門的商區(qū)，總會讓人羨慕的同時刷新你對享受生活的認(rèn)知。

而娛樂至上的墨西哥人，熱情友好，能歌善舞，我們常說的放飛自我在這里幾乎成為墨西哥人每天的生活常態(tài)。他們喜歡享受當(dāng)下，后天下之憂而憂。他們覺得工作賺錢就是為了更好的休息，大多數(shù)人每天都是開朗樂觀的處世態(tài)度。

同樣，落后的基礎(chǔ)建設(shè)、糟糕的交通狀況、教育水平低下、價格昂貴的電子產(chǎn)品以及相對不太穩(wěn)定的社會環(huán)境，也是它們共同存在的問題。

在當(dāng)?shù)?，我們通過實(shí)地調(diào)研與用戶訪談等方式，針對產(chǎn)品體驗(yàn)的問題與司機(jī)進(jìn)行面對面溝通。收集了很多寶貴的用研資料與司機(jī)訴求，如司機(jī)希望平臺為他們推薦訂單引導(dǎo)，司機(jī)希望獲得更多的實(shí)時動態(tài)訊息和司機(jī)每天都可以查看自己的收入狀況等，集中體現(xiàn)在效率、感知、體驗(yàn)這三大方面。

其次，伴隨著業(yè)務(wù)的不斷增長，越來越多的功能使得我們的產(chǎn)品變的更加復(fù)雜，舊版的框架布局早已是不堪重負(fù)，無論是現(xiàn)存的體驗(yàn)優(yōu)化問題，還是未來業(yè)務(wù)功能的拓展問題，舊的框架體系都是難以為繼，無法再通過簡單的修補(bǔ)來滿足用戶和業(yè)務(wù)未來的訴求。

明確改版及對應(yīng)目標(biāo)

改版升級對產(chǎn)品本身來說是一件非常重要的事情，需要對多方因素進(jìn)行慎重考慮。經(jīng)過多次的溝通討論，權(quán)衡改版對產(chǎn)品可能產(chǎn)生的利弊關(guān)系，采用小步快跑，快速試錯，分階段分模塊的方式進(jìn)行。

首頁既作為承載核心功能（發(fā)車）的載體又是其他重要板塊的分發(fā)的入口，在內(nèi)容呈現(xiàn)與用戶感知上都存在很大的體驗(yàn)提升空間；我們通過拆解業(yè)務(wù)中長遠(yuǎn)需求規(guī)劃得知，大多數(shù)重點(diǎn)需求依賴于首頁框架布局，而現(xiàn)存首頁框架無法滿足業(yè)務(wù)訴求；在競品的改版中首頁的變化最大，并在司機(jī)群體中取得比較正向的反饋；通過上述分析，決定率先對首頁進(jìn)行優(yōu)化改造。

首先我們與產(chǎn)品、運(yùn)營側(cè)進(jìn)行深入討論，結(jié)合用戶訪談?wù)淼挠脩粼V求，對此次首頁改版的目標(biāo)達(dá)成一致。

聚焦核心訴求 提升首頁體驗(yàn)

1. 首頁框架具備較強(qiáng)的業(yè)務(wù)拓展與靈活配置特性

在舊版的框架體系中，大量信息在首頁呈現(xiàn)，功能層級復(fù)雜，重點(diǎn)功能難以突破和查找，關(guān)聯(lián)較弱的信息架構(gòu)嚴(yán)重影響和分散了司機(jī)的關(guān)注點(diǎn)。隨著業(yè)務(wù)模式不斷擴(kuò)展，首頁新需求類型逐漸增多，一套更加具備靈活的拓展能力和管理能力的首頁框架尤為重要。

首先我們將舊版的首頁布局打破重建，對現(xiàn)有模塊進(jìn)行整理。功能相似、定義模糊、司機(jī)操作相對低頻的模塊進(jìn)行合并、刪減。

對司機(jī)高頻操作模板進(jìn)行場景劃分，將相關(guān)信息進(jìn)行聚合處理，通過對入口的強(qiáng)化，來明確司機(jī)對不同模塊的認(rèn)知。

出車管理

將與出車相關(guān)信息進(jìn)行組織聚合，結(jié)合司機(jī)不同的使用場景，將功能與模塊進(jìn)行結(jié)合，加強(qiáng)認(rèn)知，減少司機(jī)多余的思考與判斷，快速響應(yīng)，提升工作效率，同樣也為業(yè)務(wù)在有關(guān)出車功能方面提供靈活可拓展的組件框架。

收入管理

通過顯示司機(jī)最關(guān)注的今日收入信息，為司機(jī)提供方便快捷的查看功能，使司機(jī)更專注于工作本身。同時對收入管理入口起到了強(qiáng)化認(rèn)知作用。

信息管理

對關(guān)于個人相關(guān)的信息通知及功能操作進(jìn)行聚合，方便司機(jī)對個人信息進(jìn)行快速查看，提高查看效率。

通過對框架模塊的標(biāo)準(zhǔn)化定義，后續(xù)的業(yè)務(wù)需求便可以進(jìn)行歸類管理，根據(jù)不同需求的不同屬性，結(jié)合功能使用場景，選擇合適的模塊進(jìn)行展示，提高司機(jī)使用效率同時增加首頁的業(yè)務(wù)框架擴(kuò)展能力。

2. 精簡信息呈現(xiàn) 明確核心操作

通過對框架的重構(gòu)，有效的解決了首頁信息承載壓力過大，功能層級復(fù)雜的問題，同時地圖的面積相比舊版首頁也大幅增加，信息呈現(xiàn)更加簡潔、輕量。

出車操作作為首頁的核心功能，通過調(diào)研得知，司機(jī)普遍反映在舊版首頁中存在出車操作感知弱、收出車狀態(tài)區(qū)分不明顯的問題，對司機(jī)的操作體驗(yàn)和感知體驗(yàn)造成了比較大困惑。

在首頁改版過程中我們著重對出車操作進(jìn)行了設(shè)計分析，基于對業(yè)務(wù)的了解和競品的分析，得出以下三個結(jié)論：

• 強(qiáng)化發(fā)車按鈕。突出核心功能，鼓勵司機(jī)更多更主動的發(fā)車。
• 強(qiáng)化接單中的狀態(tài)。增強(qiáng)司機(jī)對接單狀態(tài)的感知度，減少司機(jī)對于所處狀態(tài)的困惑。
• 弱化收車按鈕。對司機(jī)收車按鈕進(jìn)行收納，減少司機(jī)的誤操作的行為。

通過「兩強(qiáng)一弱」，減少司機(jī)困惑提升發(fā)單效率的同時，間接的延長司機(jī)的在線時長。

完成頁面設(shè)計后我們發(fā)現(xiàn)，操作按鈕通過靜態(tài)視覺角度去表達(dá)收出車空間位置關(guān)系是十分困難的，僅通過 Toast 提示會造成用戶理解的斷層，于是提出使用動效去進(jìn)行「搭線」串聯(lián)，搭線發(fā)車前按鈕的點(diǎn)擊和收納后的位置提醒進(jìn)行視覺體驗(yàn)上的串聯(lián)，從而達(dá)成感知增強(qiáng)，解決視覺體驗(yàn)層面不容易解決的問題。

3. 增強(qiáng)獎勵信息首頁曝光度及展示樣式 縮短查看獎勵路徑

豐富的訂單獎勵活動是我們與競品相比重要的競爭優(yōu)勢，司機(jī)在完成定量訂單的同時提供了更多的額外收入。查看每日獎勵活動，已成大多數(shù)司機(jī)每日上線必做的事情。

與舊版相比，在新版首頁中通過提升獎勵入口層級，縮短了查看獎勵活動操作路徑，從而方便司機(jī)快速查看。

通過首頁透傳的獎勵卡片，司機(jī)在首頁即可獲取到推送的獎勵相關(guān)信息，及時獲取到獎勵預(yù)告和進(jìn)度，提升了司機(jī)工作效率的同時加強(qiáng)了司機(jī)對獎勵活動的感知。

4. 設(shè)計語言升級

在經(jīng)歷了快速奔跑的粗放階段，我們也在思考司機(jī)端產(chǎn)品究竟以怎樣的品牌氣質(zhì)傳遞給海外的司機(jī)群體。

在當(dāng)?shù)兀覀冊谒緳C(jī)心目中更像是合作伙伴，憑借真誠互利的態(tài)度贏得了當(dāng)?shù)厮緳C(jī)的用戶。

真誠、熱情與融合我想這就是我們想要傳達(dá)的核心品牌情感，而克制、可依賴將作為產(chǎn)品體驗(yàn)的設(shè)計原則貫穿始終。

顏色系統(tǒng)

司機(jī)端顏色系統(tǒng)在基于現(xiàn)有品牌色基礎(chǔ)上，結(jié)合不同國家顏色文化的理解，新增加符合本地化的輔助色系，以提升產(chǎn)品的親和力，傳遞品牌情感。

文字系統(tǒng)

針對司機(jī)用戶的操作使用場景，對文字字號梯度進(jìn)行提升，通過文字粗細(xì)、顏色、大小加強(qiáng)信息對比度，使司機(jī)在更多復(fù)雜場景下可快速獲取重要信息，提升閱讀體驗(yàn)。

在此次改版中新引入 Barlow 與 DIN Alternate 字族作為模式數(shù)字展示字體，兩款字體分別為 Android 及 iOS 系統(tǒng)下默認(rèn)包含字體，相比 Roboto 與 SF Pro text 兩款字族，在數(shù)字展示上更為明確、識別性更強(qiáng)，同時因?yàn)樽陨怼咐w瘦」的特性，在屏幕橫向面積上節(jié)省更多空間。

結(jié)語

業(yè)務(wù)在不同的階段有不同的側(cè)重方向及打法，設(shè)計側(cè)根據(jù)業(yè)務(wù)所處階段應(yīng)及時的調(diào)整自身的目標(biāo)定位，快速響應(yīng)，積極探索設(shè)計的機(jī)會和突破點(diǎn)，在不同的階段發(fā)揮自身價值，助力業(yè)務(wù)達(dá)成共同目標(biāo)，為用戶創(chuàng)造更便捷的產(chǎn)品使用體驗(yàn)。

首頁改版從立項(xiàng)到設(shè)計再到研發(fā)，多部門同學(xué)緊密配合，在有限的時間內(nèi)最大化的完成預(yù)期上線效果。

全量上線后，通過問卷對首頁改版進(jìn)行滿意度收集，司機(jī)對新版首頁的滿意度平均值高達(dá) 93%。取得的成績離不開每一位參與改版的同學(xué)支持，也得益于國際化團(tuán)隊自始至終對產(chǎn)品體驗(yàn)的重視與認(rèn)同。

作為司機(jī)端體驗(yàn)升級的第一步，首頁改版只是一個開始，希望通過不斷的打磨優(yōu)化，秉持初心，為全球司機(jī)提供更克制、可依賴的出行平臺。

文章來源：優(yōu)設(shè)

一、建立一個庫



1、git clone [url]    // 克隆代碼



2、設(shè)置貢獻(xiàn)者



      git config --global user.name ""   // 設(shè)置當(dāng)前本地庫username



      git config --global user.email ""   // 設(shè)置當(dāng)前本地庫useremail



      git config --global user.email   // 查看當(dāng)前本地庫useremail



      git config --list   // 查看所以配置項(xiàng)

二、git的三個區(qū)

1、工作區(qū)：本地編寫代碼的地方叫工作區(qū)

2、暫存區(qū)：工作區(qū)改好的代碼先提交到暫存區(qū)，然后由暫存區(qū)將代碼提交到版本庫

     - 作為過渡層

     - 避免誤操作

     - 保護(hù)工作區(qū)和版本區(qū)

     - 分支處理

TypeScript是什么

Type+EcmaScript6

TypeScript是JavaScript的強(qiáng)類型版本。然后在編譯期去掉類型和特有語法，生成純粹的JavaScript代碼。由于最終

在瀏覽器中運(yùn)行的仍然是JavaScript, 所以TypeScript并不依賴于瀏覽器的支持，也并不會帶來兼容性問題。

TypeScript是JavaScript的超集，這意味著他支持所有的JavaScript語法。并在此之上對JavaScript添加了- -些擴(kuò)

展，如class / interface / module等。這樣會大大提升代碼的可閱讀性。

和JavaScript若類型不同，TypeScript這種強(qiáng)類型語言最大的優(yōu)勢在于靜態(tài)類型檢查,可以在代碼開發(fā)階段就預(yù)知一

些低級錯誤的發(fā)生。

●-種類似于JavaScript的語言，在JavaScript的基礎(chǔ)之上增加了類型，同時增強(qiáng)了JavaScript部分語法功能

●遵循EcmaScript 6標(biāo)準(zhǔn)規(guī)范

●由微軟開發(fā)

●Angular2框架采用TypeScript編寫

●背后有微軟和谷歌兩大公司支持

●TypeScript可以編譯成Javascript從而在支持Javascript的環(huán)境中運(yùn)行

●TypeScript和javascript的關(guān)心就好比less和css的關(guān)系



javascript 是動態(tài)的

可以在執(zhí)行階段重新賦值不同的類型數(shù)據(jù)

.ts 后綴表示一個TypeScript文件

Typescript兼容es6

TypeScript為javascript增加了類型的概念

Typescript是強(qiáng)類型 一旦定義數(shù)據(jù)的類型 不能動態(tài)修改這 樣幫我們在開發(fā)階段避免很多低級錯誤

1.全局綁定滾輪事件，獲得dataZoom的位置：



myChart.on('dataZoom',function(event){

    if(event.batch){

    start=event.batch[0].start;

    end=event.batch[0].end;

    }else{

    start=event.start;

    end=event.end;

    };

});

2.把的start和end賦值給要更新的option



window.setInterval(function () {

    num=Math.random()*num+100;

data0.splice(0,1);

data0.push(num);

 

option.dataZoom[0].start=start;

option.dataZoom[0].end=end;

myChart.setOption(option);    

},3000);