今天給大家?guī)淼姆窒硎恰禔R，我們從設計說起》，希望大家通過這個分享能夠快速了解AR的實現(xiàn)原理，AR的設計流程，以及在設計過程中遇到的問題，在最后會分享我這些年做AR設計的一些心得和技巧。
關(guān)于AR
AR這個詞對大眾而言并不是一個陌生的詞，但是AR的實現(xiàn)原理是怎樣的？
AR的中文名字是增強現(xiàn)實技術(shù)，它是一種實時地計算攝影機影像的位置及角度，并且加上相應的圖像、視頻、3D模型的技術(shù)。
簡單來講就是在現(xiàn)實世界上疊加一些虛擬信息，然后再實時計算它在設備上的位置以及角度的變化。
AR的目標是將屏幕上的虛擬內(nèi)容放在現(xiàn)實的世界中與之互動，幫助大眾更快捷更直觀的去獲取信息，并且AR自帶強大的商業(yè)價值。身邊的小伙伴經(jīng)常會把AR跟VR搞混，其實AR是增強現(xiàn)實技術(shù)，而VR是虛擬現(xiàn)實技術(shù)。
AR是將虛擬的物體放在我們周邊的現(xiàn)實環(huán)境，增強現(xiàn)實世界的感官體驗；VR則是將我們放在虛擬的環(huán)境中，打造一個以假亂真的沉浸式體驗。
它們在設備上進行劃分，AR對大眾用戶來說參與的門檻低，操作的門檻更低，因為AR只需要擁有一部帶攝像頭的智能手機，便可以成為一個載體，在增強現(xiàn)實世界的同時，重塑用戶的交互體驗，而VR的設備對于大眾用戶來講日常比較難接觸到，需要較為專業(yè)的設備和場地。
AR技術(shù)的核心是識別與跟蹤，它的實現(xiàn)方式分為兩種：
● 圖像檢測法；
● 全球衛(wèi)星定位系統(tǒng)法。
圖像檢測法
圖像檢測法其實是AR最常見的一種定位方式，經(jīng)常用在圖片識別和人臉的識別。它的技術(shù)實現(xiàn)流程主要分為三步：
Step 1：需要捕捉特征圖像，算法會對圖像進行規(guī)劃處理，計算有效特征點進行匹配，可以看下圖一，這些綠色的小點點就是有效特征點；
Step 2：從偏離的矩形算出一個三維坐標系，建立一個空間；
Step 3：實時跟蹤數(shù)據(jù)內(nèi)容的位置和角度的變化；
剛才講到綠色的小點點設計師應該怎么去檢測呢？這里推薦一個網(wǎng)站給大家 —— Vuforia，注冊賬號后上傳設計圖就可以直接將圖稿的特征點標記出來，并且對其進行打分，特征點越多，識別的準確率越高。（鏈接在文末)
觀察第一張圖的上下兩幅作品，可以發(fā)現(xiàn)它僅僅只是背景和深淺不同，形成的有效特征點也有所不同，因為算法在灰度對比度高的情況下會形成更多的有效特征點。
我們再觀察第二張圖，可以發(fā)現(xiàn)第二張圖在太陽的圓形部分沒有形成任何有效特征點，因為算法會排除掉一些比較平滑的曲線或元素，視為無效特征點，這種點一般出現(xiàn)在夾角處，所以為了使特征點分數(shù)更高，我們在設計的時候需要：
● 避免畫一些比較平滑或帶弧度的元素；
● 特征點需要平均分布在每一個角落。
最后看第三張圖，幾何云的部分重復出現(xiàn)在不同的位置上，它形成的有效特征點的數(shù)量和位置也一樣。因為重復出現(xiàn)的規(guī)則圖形會被算法判定為無效特征點并排除掉，所以在做設計的時候需要：
●避免用一些規(guī)則的圖形和一些重復出現(xiàn)的元素。
圖像檢測的優(yōu)點是簡單、高效和多樣性，缺點是容易受環(huán)境、光線、距離、遮擋、聚焦這些因素產(chǎn)生變化，會使虛擬內(nèi)容產(chǎn)生抖動、卡頓、誤判、識別慢、無法識別的情況出現(xiàn)。
環(huán)境光線距離就不需要多講了，遮擋就是取決于取景的角度和范圍。聚焦指的是設備，也就是我們的攝像機，我們的手機對于深色還有漸變顏色進行對焦時會較慢顯現(xiàn)。
所以在做視覺稿的時候，其實需要滿足很多條件，并且要與開發(fā)進行多環(huán)境測試、一起研討，才能得出一張比較合格的識別圖，優(yōu)秀的識別圖必須確保它的穩(wěn)定性，還有它的識別速度。
我們來看看實際項目中是如何應用的。
在2016年的時候，團隊策劃了《QQ奧運火炬手》AR活動，基本上是在一個毫無經(jīng)驗的情況之下，不斷地試錯，不斷地修正，在兩個月內(nèi)從風格到終稿花了將近3000稿，才完成六個奧運城市28張識別圖的設計，可以看到DEMO呈現(xiàn)出來的效果相對比較穩(wěn)定，而且識別速度非常快的，基本在一秒之內(nèi)完成。
這里強調(diào)優(yōu)秀這個詞，因為我們不希望用戶第一次接觸AR時就造成一些挫敗感，導致對新技術(shù)的體驗產(chǎn)生抗拒心理，所以對識別率的速度還有穩(wěn)定性做了相當多的調(diào)試，當時也獲得了世界吉尼斯紀錄的證書。
這是以前的一個小DEMO，通過手機的掃一掃識別一層一層傳遞的過程。剛才說到圖片檢測法的圖像場景，現(xiàn)在再看一下紋理識別的場景，人臉識別其實就是圖像檢測法的邊緣檢測，它可以檢測出人臉的部位，同時跟蹤這些部位進行運動，把虛擬的內(nèi)容跟肢體做無縫的貼合。
比如說經(jīng)常用到的特效掛件，大家看到市面上的一些美顏APP都有些什么樣的能力呢？
● 實時美顏
● 臉部貼合
● 動作觸發(fā)
● 臉部變形
● 換臉、扣臉
● 氛圍濾鏡
● 3D模型
其它便不一一闡述了，相信大家也有所了解。
針對QQ的一些社交場景，我們團隊也做了QQ特有的一些特效掛件，例如可以在QQ的聊天界面中的拍攝功能，還有聊天，都可以在視頻聊天看到，玩到。還有利用AI還有AR的結(jié)合，在兩人通話中做了一個小游戲，通過做表情贏取對方的紅包。
全球衛(wèi)星定位系統(tǒng)法
全球衛(wèi)星定位系統(tǒng)法是是利用GPS去定位我們所處的位置，在真實的空間里尋找一個平面，可以現(xiàn)實世界中跟虛擬物體進行互動和觀賞。
優(yōu)點是適合于室外的跟蹤，可以克服在室外場景中光照，還有聚焦等不確定因素，而缺點是很考驗設備的性能，包括當前網(wǎng)絡的環(huán)境。
可以看到這上面有兩個比較陌生的詞，一個是LBS(Location Based Service)，一個是POI(Point of Interest)。LBS其實是基于移動位置服務，配置服務GPS獲取位置的一個方式。有些AR的游戲是基于LBS去實現(xiàn)的，它們所用到的實現(xiàn)方式也就是全球衛(wèi)星定位系統(tǒng)法。而POI就是一個興趣點，它在地圖上可代表是一棟大廈，一個商鋪或者一處景點等等，它包含四方面的信息，就是名稱、類別、坐標和分類。
這個是16年日本做的一個AR游戲，相信大家都有玩過。
這個游戲是利用全球衛(wèi)星定位系統(tǒng)法去實現(xiàn)的一個游戲，為什么給大家看剛才的短片，是因為騰訊2017年新年QQ的一個運營活動跟它的玩法特別像，都是基于一個地圖上去尋找一個紅包或者一個寶藏，然后找到這個位置，再通過完成一些任務去獲得這些紅包或者禮品。
做這個運營活動的時候，需要去考慮如何體現(xiàn)AR的空間概念，譬如說要合理利用一個真實的空間，因為設計師出的設計稿再也不是750×1334的尺寸了，它是一個真實的空間，需要把這空間進行拓展，去引導用戶移動手機鏡頭，跟蹤這些虛擬物體進行移動和互動。
我們可以通過物體的走向去體現(xiàn)一個空間感，譬如說從遠到近，從左到右，從上到下等方式讓用戶移動起來。
在地圖的引導上，可以從遠近這個層次去打造一個三維空間，譬如說離我們比較近的AR點的時候，需要強化我們的信息，做一些差異化的動畫引導，再遠一點的地方就只需要給一個簡單的貼圖或者簡單的元素告知用戶，遠處也有一個紅包，或者禮品。
IP的力量是非常強大的，當時使用了QQfamily的baby Q作為財神形象給用戶發(fā)紅包，它的作用是可以跟用戶產(chǎn)生一個平等的對話，陪伴用戶一起完成一些任務，建立一個平等親密的關(guān)系。
在2016年的時候，通過《QQ奧運火炬手》活動，一推出QQ就被稱為是國內(nèi)首個AR用戶超過1億的社交應用，整個活動吸引了全球一百四十三個國家的用戶，跟AR的互動超過將近兩億次。
在2017年的時候《QQ天降紅包》運營活動用戶量超過3億，半年間就收獲業(yè)界還有一些用戶的良好口碑，QQ是一個很年輕的產(chǎn)品，它的用戶大部分都是學生。通過這樣的活動跟新的技術(shù)做結(jié)合，我們成功將QQ的品牌升級為年輕化，娛樂化，還有科技化。
過去的設計手法就是從圖形，動畫還有色彩上做一些創(chuàng)新?，F(xiàn)在我們加入一些新的技術(shù)，比如說AI、AR、音效和物理震動之后，可以升級用戶的一些感官體驗，使設計更加沉浸式，更加娛樂化。
把AI跟AR做一個很好的結(jié)合，是因為更好的AI需要更好的AR去體現(xiàn)。
那么大家都說AI就是AI，AR就是AR，其實這個說法是錯的，因為它們的關(guān)系非常密切。如果我來作比喻的話，
「AI就是人的大腦，AR就是人的一些感官體驗」
跟這些新的技術(shù)做結(jié)合，會使得設計和活動會有四個優(yōu)點，那就是話題性，串聯(lián)性，沉浸式和娛樂化。
通過一些新的技術(shù)給用戶帶來的新鮮感和話題性，再把一些時間音效還有振動影像這些元素有效地串聯(lián)在一起，讓用戶身臨其境，更加專注在操作當中，更加強化整個設計，整個產(chǎn)品的趣味性，也提高整個產(chǎn)品的娛樂價值。
去年世界杯的時候，我們推出了《QQAR穿越賽場》。
相對奧運而言，世界杯并不是全民都會關(guān)注的一個賽事，所以當時用了很大部分的時間來做用研，想方設法去提升用戶的參與感。我們對用戶的行為和心理進行分析，希望能通過新的交互形式和新的技術(shù)讓用戶更好的參與進來。
在做運營設計的時候，需要從三個部份去策劃：
● 如何去吸引用戶；
● 在用戶體驗的過程中如何制造一些驚喜；
● 希望用戶在最后有一個想要抒發(fā)自己的欲望的出口，將活動分享出去。
那如何去吸引用戶參與活動呢？可以利一些視覺線索，突出一些重點信息，通過差異化的設計去滿足用戶的好奇心。譬如說，利用一個足球的運動軌跡引起用戶的注意力，讓用戶產(chǎn)生好奇心，去點擊入口，到第二個頁面的時候，需要告訴用戶具體的活動內(nèi)容，這是比較輕的設計手法，比較直接的方式是在登錄QQ之后，直接給用戶一個活動預告。
這個需要結(jié)合QQ掃一掃的界面，并且跟活動里面的場景結(jié)合起來，打造一個新的UI風格。我們可以透過一些色彩質(zhì)感和執(zhí)行動畫告訴用戶，這是一個充滿科技感的運營活動，一個新的UI活動風格，一個新的科技感風格。
沉浸式體驗，往往也包含人的感官體驗和認知體驗。
我們需要從大眾的一些記憶里面提取一些設計元素，基于現(xiàn)在的場景、應用做結(jié)合。那么我們?nèi)绾稳ヌ崛∮脩舻囊恍┯洃浽?？可以通過我們記憶中一些片段去提取它的色彩、質(zhì)感，還有聲音、圖形、運動方式、光學和力學這樣的特征去和設計做融合。
說起穿越這個話題，大家也會想到哆啦A夢的穿越門或者哆啦A夢的時光機，還有些用戶就會想到我們近年來比較火的奇異博士其中的一個片段，我們抽取奇異博士打開穿越門的片段提取一些設計元素，譬如說它的運動方式，力學和光學特征。
首先我們需要去教育用戶“空中畫圈”，“空中畫圈”這個詞大家應該都不難理解，當時請了很多深大學生去公司做用研，當時試玩這個活動的時候，發(fā)現(xiàn)很多同學都不會玩，不是說大家沒有看過奇異博士，也不是說大家對AR沒有接觸，是因為這種新的互動形式會讓用戶的心理造成一個不確定因素，并且懷疑自己的判斷，大家更多的習慣直接在屏幕上畫圈，而不是舉起自己的手，在空中畫一個圈，開啟穿越門，甚至有一些同學直接手反過來一直在扣攝像頭，都會有這種情況出現(xiàn)。
因此才會讓我們的設計更加客觀，我們自認為很好理解的事情，其實對于一些大眾用戶來說，并不容易去實現(xiàn)。
在此次研究的基礎上我們做了圖文的結(jié)合，到最后不斷優(yōu)化了十幾個方案，不斷地去找學生做用研，最后得出了一個解決方案——模擬一個真實的畫圈場景。做了一個動畫，并且加上簡潔的文字和操作的反饋來引導用戶操作，同時也支持用戶屏幕畫圈，可是扣攝像頭還是做不到的，這是為了避免用戶在試玩的過程中會發(fā)生一些中斷。
關(guān)于AR畫圈在設計師的工作來說，設計這個點的動畫好像很簡單，其實它特別困難。開發(fā)同學需要考慮手機性能以及QQ引擎等問題，為了確保用戶的流暢體驗，設計可能需要做一些犧牲。
當時我們有一個限制，動畫必須保證在5到8幀之內(nèi)。但是它會出現(xiàn)卡頓，色差，模糊，生硬這些情況，并且我們用AE的粒子效果去做一個動畫的時候，跟開發(fā)實現(xiàn)的原理其實不太一致，所以我們要不斷去跟開發(fā)做調(diào)試跟還原效果。再者比如說AE里面的粒子效果導出PNG之后會有很大的色差，這些都是需要不斷去修正和想辦法解決的。
我們在多方面調(diào)試下，修正方案，尋找解決的方法，最后做出了一個相對比較滿意的效果。
在空中畫圈之后，它會立馬形成一個3D立體的穿越門，這個穿越門可以讓我們360度地觀看，并且可以在現(xiàn)實還有虛擬場景中來回穿梭，這需要很多的面片去做一些貼圖處理，但是會遇到技術(shù)上的問題，所以只能用最精簡的方式去達到我們理想中的效果。
對于一些引擎還有技術(shù)的限制，需要想很多的方法去將資源整合。譬如說從AR畫圈到AR穿越門，再到一個虛擬的AR賽場，其實是有四段不同的資源合成的，需要嚴格去把控整個時間的進場和退場。
第一步：需要想方設法去用一些巧妙的手法讓它過度自然；
第二步：如何讓用戶感覺到身臨其境，可以從視覺、聽覺、觸覺這三方面去提升用戶的感觀體驗；以第一人稱的視角能夠360度去觀看整個AR賽場，然后再配合現(xiàn)場真實的一些音效，像是解說員的旁白，還原一個真實感；
第三部：觸感。觸感的設計我們知道自從IOS升級之后，手機有強、中、弱三擋的振動，我們利用設計這些振動的頻率，還有長短還原踢球，球擊龍門還有球在草地上來回滾動的觸感，主要目的就是提升用戶的真實感；
第四步：如何去增強用戶的分享欲望。除了從質(zhì)感上去打造真實的報紙質(zhì)感之外，我們根據(jù)用戶的一些閱讀習慣去把內(nèi)容排版起來，分布在每一個角落。再來我們根據(jù)整個國家的球服配色，不同的贊揚文案，還有用戶畫圈的過程，會有視頻錄屏把這些元素整合在一起，打造一個魔法報紙，以這些個性化的設計去提升用戶的參與感，讓用戶有一個分享的欲望。
設計心得
關(guān)于AR的設計流程的建議：
● 在定義玩法的時候，交互和操作要盡量的簡單，降低用戶的參與門檻與操作門檻，不要讓用戶形成挫敗的心理；
● 在交互階段的時候，我們通過用研定出最佳的新手引導方案，確保用用戶懂得玩這個活動；
● 在視覺階段的時候，需要預留時間給開發(fā)做測試，反復去調(diào)試還原視覺效果，AR的設計原則其實跟大部分設計原則都是一樣的，它是一個金字塔的三角形關(guān)系，首先要確保應用性，應用性就是要有一些簡單明了的操作，還有一些引導暗示用戶是會使用AP或是會玩這個活動的，避免用戶的心理造成一些挫敗感；
● 穩(wěn)定性。需要確保整個體驗流程是通暢的，要多維度的給到一些操作反饋，避免用戶在體驗過程中發(fā)生意外或者中斷；
● 最后才是愉悅感，通過設計的手法讓用戶得到一些娛樂感和滿足感，沉浸其中，忘記真實世界的場景。
關(guān)于AR沉浸式體驗的建議：
● 情景：需要設計背景或劇情去吸引用戶，讓用戶產(chǎn)生一個探索的欲望；
● 空間：需要合理的去利用真實的空間；
● 情節(jié)：需要明確一些比較細節(jié)的目標，讓用戶的行為有一些特別的反饋，讓用戶對整個體驗有著絕對的主控感；
● 角色：可以通過創(chuàng)建一些角色關(guān)系，情景化的設計，去提升用戶的參與感；
● 氛圍：可以從視覺，聽覺，觸覺三方面去提升整個體驗的愉悅感；
● 節(jié)奏：從簡單到挑戰(zhàn)，需要慢慢循序漸進的使得用戶集中精神。
結(jié)語
最后就是我在做AR項目的一些反思。
之前我經(jīng)常就會覺得設計師的工作只是考慮怎么包裝這個APP，怎么包裝這個品牌，怎么做好看就可以了。其實并不是的，我們需要考慮用戶的一些體驗問題，還有我們要具備一些產(chǎn)品思維，所有跟新技術(shù)去做融合的設計是有很高的風險，一個好的設計其實是選擇眾多條件下的最佳方案。
我們在設計過程中會遇到很多困難、很多限制，而且需要用設計去解決一些技術(shù)問題，我們會把這些限制設為思考問題的出發(fā)點，提供一個更完善的方案，同時我也相信科技是跟技術(shù)在不斷的進步，所以有一天我們可以做到我們理想中的設計。
來源：站酷 作者：騰訊ISUX團隊
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
我們常常會發(fā)現(xiàn)：某個產(chǎn)品功能/活動上線推出后，用戶一看到就參與并使用；但你負責的某個產(chǎn)品功能/活動上線后，用戶并沒有按照產(chǎn)品或你的預期去做出相對應的行為——功能不使用、活動不參加、廣告看了沒反應…
理想很豐滿，現(xiàn)實卻很骨感；你從產(chǎn)品體驗流程到視覺表現(xiàn)復盤了一遍后都沒有問題，但是為什么用戶對你的產(chǎn)品/設計感知度如此之低，為什么用戶不按照你預期的設計去做出對應的行為，為什么用戶對你的設計不感冒…明明無論是體驗流程還是視覺表現(xiàn)都沒問題，究竟是什么原因?qū)е逻@樣的結(jié)果？你真的讓你的用戶感知到了嗎？你的用戶真的懂你的設計和流程了嗎？換句話說，你真的懂如何教育用戶嗎？
無論是C端還是B端產(chǎn)品，都面臨著不同程度教育用戶的問題，這篇文章將從設計的角度出發(fā)，幫助設計師如何通過設計手段去正確地教育用戶
想要了解怎么正確地教育用戶，需要先了解產(chǎn)品教育的本質(zhì)。什么是產(chǎn)品教育？產(chǎn)品設計的教育并不是單純地告訴用戶1+1=2，也不是讓用戶自己去完成2+2=4；產(chǎn)品教育的本質(zhì)是說服，說服用戶使用你的產(chǎn)品，說服用戶按照你的預期來使用產(chǎn)品
不管是C端還是B端產(chǎn)品，和用戶之間都存在著緊密相連密不可分的關(guān)系：
簡單來說就是：用戶產(chǎn)生了訴求，有了訴求后就衍生出相對應的產(chǎn)品，有了產(chǎn)品自然而然就產(chǎn)生了衡量這個產(chǎn)品是否是真正被需要的目標和指標，然后產(chǎn)品匹配相對應的用戶去解決他們的問題，從而去達成產(chǎn)品的目標和指標來驗證這個產(chǎn)品是成功的
在達成整個產(chǎn)品目標的過程中，存在不同階段的用戶群體，而這類用戶群體不同階段的心理在整個使用生命周期是不斷在迭代更替的：
小如一個Banner的投放，大如一個新產(chǎn)品的上線，都會經(jīng)歷「新增>轉(zhuǎn)化>裂變」這三個階段；站在用戶的視角，剛接觸這個新鮮事物的時候，存在不確定性因素，從而產(chǎn)生擔憂的心理——對新鮮事物有了一定的認知和了解后，會抱著懷疑的態(tài)度進行體驗流程——而無論處于哪個階段，核心都是為了服務產(chǎn)品的業(yè)務目標
看到這里感覺一臉懵逼：各個產(chǎn)品類型行業(yè)不同，業(yè)務目標種類又那么多，那憑什么說教育好用戶就能幫助完成業(yè)務目標呢？這里又回歸到本文的主題——產(chǎn)品教育的本質(zhì)是說服，說服用戶使用產(chǎn)品幫助你完成你的目標
通過說服用戶打消顧慮和擔憂，對產(chǎn)品就完整清晰的認知，減少不確定性因素——說服用戶取消對產(chǎn)品的懷疑，降低行為成本，提升號召用戶行為從而減少轉(zhuǎn)化周期——說服用戶的自私心理，降低消耗成本從而提升裂變的可能性，最終整體助力產(chǎn)品達成業(yè)務目標
舉個栗子：
產(chǎn)品的業(yè)務目標是提升新功能的使用人數(shù)，而這類用戶群體屬于新用戶的轉(zhuǎn)化，具體影響使用新功能的因素很多，但是很多情況下會受到其他因素干涉，（比如基礎建設、原系統(tǒng)詬病等）但是在做設計決策的時候，就可以以教育引導用戶作為切入點：注冊就送XXX大禮包、邀請新用戶送XXX等等設計手段來完成業(yè)務目標
這里可以引用兩個方法論來制定設計策略和設計方案，其中一個就是LIFT模型；LIFT模型的原理就是基于用戶的問題為基礎，設計有關(guān)問題的假設解決問題，從而提高產(chǎn)品的效益；而影響LIFT模型的六個因素分別為：價值主張、相關(guān)性、清晰度、緊迫感、焦慮感和注意力分散——簡單來說，可以把LIFT模型當作一架飛機，價值主張是這架飛機的機身，相關(guān)性和清晰度是飛機的機翼，焦慮感和注意力分散則是機翼上的推進器，緊迫感則是整架飛機的動力
通過上圖可以明顯地感受到如何進行相關(guān)設計：通過提升相關(guān)性和清晰度，降低用戶的焦慮感和注意力分散，透傳產(chǎn)品的價值主張和緊迫感來教育引導用戶；在框架交互層面可以提升相關(guān)性、清晰度和降低注意力分散；在視覺表現(xiàn)層面可以傳遞產(chǎn)品價值主張、緊迫感；通常作為方法論的使用，存在單一的形式出現(xiàn)，也會以多種組合的形式使用，也就是我們常說的「組合拳」，我們可以在很多產(chǎn)品設計中看到具體設計手段使用的案例：
這類通過直接透傳產(chǎn)品價值的場景我們很常見，往往在某個新功能/模塊上新時，都會見到此類場景；比如貝殼的VR功能，當前的業(yè)務目標是提升VR功能的點擊滲透，在新功能上線后自然要對用戶做教育引導，樣式上使用了強引導的樣式來強調(diào)新功能的入口，透過透傳功能的價值主張來引導教育用戶；
百度網(wǎng)盤則是使用承接頁空狀態(tài)來透傳功能的價值主張，數(shù)據(jù)工具類型的產(chǎn)品往往核心的目標是為了提效和安全性，所以在宣揚價值主張方面以提效安全為核心
而一些強教育場景，則會更加突出降低用戶焦慮的形式做設計，比如Focos的功能動態(tài)教育彈窗和有道云筆記的教育手冊，都是在降低用戶對產(chǎn)品理解的焦慮感
還有一種是強制和用戶綁定，引導用戶完成流程體驗的沉浸形式，此類設計常規(guī)的產(chǎn)品幾乎很少使用，因為功能眾多會對沒有此類訴求的用戶造成強干擾，從而導致用戶流失；而游戲類任務和體驗師一致的，所以此類設計更多在手游中看到，強制引導你完成某個任務章節(jié)，一方面是為了教育引導，另一方面為了讓你盡快上癮，從而減少用戶的流失率
支付寶的券商理財頁則是以「組合拳」的形式設計的，頭部通過文案+圖標的形式提煉出產(chǎn)品價值主張和展示產(chǎn)品的清晰度，順勢往下使用真實的場景設計，引發(fā)和用戶之間的情緒上的共鳴，再往下直接透傳人群，兩者上結(jié)合拉通和用戶人群的相關(guān)性；整體以展示產(chǎn)品價值主張，提升清晰度和相關(guān)性的形式設計
以上就是LIFT模型在各類產(chǎn)品中的應用，根據(jù)不同的場景、業(yè)務目標和用戶訴求，使用單個或多種形式組合對用戶進行教育和引導，其核心是從用戶心理的根本上去達到產(chǎn)品的教育目的
首先讓我們了解下福格行為模型是什么，福格行為模型的定義是表明一個行為得以發(fā)生，行為者首先需要有進行此行為的動機和操作此行為的能力，下一步如果他們有充足的動機和能力來施行既定行為，他們就會在被誘導/觸發(fā)時進行；說人話就是如果一個人有足夠的能力和動機，然后引導他做某個行為的時候，他自然而然就去做那個行為
由上圖可以看出：對用戶來說使用越簡單，動機越強，觸發(fā)引導越強，那么用戶觸發(fā)行為的概率也就越大！動機是什么？動機簡單來說是好處——對用戶有利的東西，那用戶怎么知道這個東西對他有利呢，所以我們要對用戶進行傳達和教育——告訴他這個東西對你有XXX的好處
那能力又是什么？用戶需要完成12345步操作才能拿到好處和用戶需要完成12步操作就可以拿到好處，當然第二種是更容易被用戶所接受的，那用戶怎么知道只需要完成12步操作就可以拿到好處呢，還是需要我們對用戶進行傳達和教育
有了動機和能力，觸發(fā)器又是什么呢？就是前文提到的通過設計手段進行相對的產(chǎn)品引導；有了以上三個條件后，用戶就會按照你的想法意愿去完成操作行為，去幫助你完成你的業(yè)務目標
為什么教育引導用戶是基于福格行為模型呢？還是用同一個案例來示意，貝殼VR看房業(yè)務目標是提升模塊點擊滲透率，這時候利用前文提到的LIFT制定好引導策略后，所提煉出來的價值主張對用戶來說就是產(chǎn)品給予用戶的好處，而能力方面只需要用戶進行單次點擊的交互行為，觸發(fā)器引導又實用了很強的區(qū)域高亮樣式設計，很大概率上引導教育用戶進行點擊行為，從而符合產(chǎn)品設計的預期，幫助你達成提升點擊滲透率的業(yè)務目標
開篇說明了產(chǎn)品教育的本質(zhì)就是說服，說服的流程就是展示好處，降低操作難度，在合適的時機觸發(fā)引導，而無論是展示、引導都離不開教育用戶；總結(jié)下來常用的設計方法就是基于福格行為模型的基礎，用LIFT模型制定引導教育策略，讓用戶行為符合你的設計預期，最后助力完成業(yè)務目標，拿到數(shù)據(jù)上的結(jié)果，才能體現(xiàn)設計側(cè)的價值
說一句題外話，方法論能幫助設計同學套用并且快速產(chǎn)出方案，但是很多不同場景不同業(yè)務下情況不同較為復雜，雖然方法論是針對普遍大多數(shù)場景，但是不要過度迷信方法論；除了減少設計師本身的思考外，還容易讓設計師產(chǎn)生依賴，往往輸出的交互/視覺方案沒有思考沒有靈魂，自己本身沒有能力上的提升，往嚴重了說，自然而然核心競爭力也會下降，人人都可以替代你的位置
而我們正確使用方法論的方法呢，就是將方法論作為參考；就好比方法論是系統(tǒng)推薦出裝方案一鍵天賦，系統(tǒng)一直推薦你堆護甲，對面4個魔法輸出，你不會靈活多變出魔抗，這怎么贏嘛？
正確使用方法論首先能幫助我們自身樹立正確的思考方向，至少在方案產(chǎn)出的時候，在大的方向是沒錯的；其次要根據(jù)不同場景不同人群不同情況結(jié)合業(yè)務目標進行思考，最終形成自己輸出的完美方案，這樣才能體現(xiàn)出設計的價值，才能真正意義上的設計賦能業(yè)務
作者：雨灰 來源：站酷
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
上面的場景是否很熟悉？在我們?nèi)粘Ｉ钪薪?jīng)常能聽到/看到這樣的話，但除了運氣好的那部分人，結(jié)局往往要么是「專柜不予驗貨」，要么是「吃啞巴虧被人割一波韭菜」或者要么是「十連抽！SSR！出了新通行證出了新皮膚！買?。 ?；于是這部分人開始不相信任何相關(guān)的東西，開始大肆傳播，加上一些不法分子的違法惡意行為和新聞公安宣傳，最終導致社會上絕大部分的人樹立起了很嚴謹?shù)姆纻湫?
眾所周知無論是作為互聯(lián)網(wǎng)還是傳統(tǒng)行業(yè)，無論是金融還是電商亦或者是游戲社交等等，想要賺錢，構(gòu)建平臺和用戶之間的信任是必然的。如果你無法和用戶構(gòu)建信任關(guān)系，那誰還指望用戶使用你的產(chǎn)品去消費（金錢/時間）呢？
在產(chǎn)品設計當中，作為設計師的我們?nèi)绾稳ズ陀脩魳?gòu)建信任關(guān)系，怎樣通過設計細節(jié)去逐步影響甚至改變用戶，這個話題是我最近在研究的東西，通過解析市面上的產(chǎn)品如何通過設計去構(gòu)建用戶的信任關(guān)系，提煉出我們?nèi)绾卧诋a(chǎn)品設計當中去打造信任感
首先來了解一下作為互聯(lián)網(wǎng)的產(chǎn)品中信任力是如何產(chǎn)生的：用戶要想對產(chǎn)品產(chǎn)生信任感，必須建立一個完善俱全的產(chǎn)品心智。（具體的心智設計在我之前有篇文章已經(jīng)詳細介紹過了，這里不再過多闡述）先上結(jié)論，當一個用戶從普通的態(tài)度到信任一款產(chǎn)品，這個過程是基于「認知」、「情緒」和「態(tài)度」建立的
這個過程在不同的場景所建立的時長也不相同，售賣場景當中是最常見的。舉個例子，我們經(jīng)常會在菜市場大街上看到有人吆喝賣菜刀、塑料盆各種東西，站著一圈兒人圍觀，然后會看到賣家為了展示自己商品的賣點，會很賣力地把塑料盆摔地上以此來吸引注意和展示賣點；這樣能在極短的時間內(nèi)改變消費者的情緒和認知，從而改變消費者的態(tài)度，以建立消費者對產(chǎn)品的信任，最終提升下單轉(zhuǎn)化率。說人話就是：“我這個盆怎么摔都摔不壞，不信我吧唧摔給你看，快買它?。?！”
在用戶建立了與產(chǎn)品的心智之后，才會產(chǎn)生相關(guān)的信任力，從而產(chǎn)生相關(guān)的行為
了解原理之后，那么來看一個基本的問題：信任的行為是如何產(chǎn)生的？用戶建立了和產(chǎn)品的信任心智后，怎么產(chǎn)生相對應的行為，主要依靠三種途徑：「第一手經(jīng)驗」、「可靠的建議」和「基于理智的理解」
這個途徑是日常生活中最常見的讓人信任某人或某物的方式，比如你的好朋友或者同事告訴你：XXX地方吃飯服務超棒，味道超正宗…那么基于你對好朋友或同事的關(guān)系以及他嘗試過的經(jīng)驗，你會大概率選擇去那家店試一試。通過自己熟悉的人或事，在基于過去成功的經(jīng)驗下，人們會再次選擇相信這類人的經(jīng)驗
這類情況在互聯(lián)網(wǎng)的場景中往往以KOL帶貨、探店等形式存在，早些年的小紅書微博探店測評，到近來越來越火的直播短視頻；都是基于人們在對自己信任的KOL面前，選擇信任相對應的產(chǎn)品或消費場景。諸如「我喜歡的明星都用這個，我跟著買肯定沒錯～」、「天不怕地不怕，就怕他李佳琦說Oh my God！」之類，都是由平臺借助KOL和用戶群體建立的信任關(guān)系，也就是我們常說的「種草」
如果沒有喜歡的KOL怎么辦，那就建立以自己為中心輻射的社交圈，通過自己認識的人去建立深度的信任關(guān)系，比如我們最熟悉的朋友圈種草，拼多多核心的拼小圈和淘寶的淘友圈；基于自身為圓心，利用用戶的從眾心理和窺探欲建立的關(guān)系鏈，從而幫助平臺建立與用戶的信任關(guān)系
基于他人經(jīng)驗僅限于熟人或為了解的人所建立的關(guān)系鏈，詬病往往是必須依附于熟悉的過程，這個過程是有一個時間的，但是很多場景下并沒有那么多時間和條件給用戶去建立信任這個過程，所以出現(xiàn)了多種讓用戶通過陌生渠道快速建立信任關(guān)系的形式
1.品牌的力量 我們經(jīng)?？吹绞袌錾掀放谱錾壐?，也能看到天價的品牌設計，因為品牌是對產(chǎn)品或者服務的一種保障，因為這種保障我們更傾向于使用該品牌的產(chǎn)品，因為良好的產(chǎn)品使用體驗，我們更加信任該品牌，形成一個正向的循環(huán)。而互聯(lián)網(wǎng)產(chǎn)品更加熱衷于此，比如早些年的淘寶因為假貨、刷好評曾讓平臺信任感一度降低，于是有了后來的天貓品牌；比如京東的自營標，得物的專業(yè)鑒定等，無一不是借助品牌的力量建立用戶和平臺的信任關(guān)系
2.陌生渠道詳細的經(jīng)驗 電商產(chǎn)品力商詳頁的評價系統(tǒng)相信大家一定不會陌生，如果有心關(guān)注的話，會發(fā)現(xiàn)評價系統(tǒng)一直在經(jīng)歷著改版：從起初的「好中差評」到現(xiàn)在種類繁多的評價，都是在針對信任感一直在迭代優(yōu)化，并且是一條長線的迭代。加深用戶對產(chǎn)品快速地信任，電商產(chǎn)品分階段性地在優(yōu)化評價體系。拼多多在前置鏈路當中，強引導確認收貨后的用戶進行評論反饋（具體在點擊「確認收貨」后跳轉(zhuǎn)至評價頁面強制拉起鍵盤進行輸入），而阿里系產(chǎn)品淘寶、餓了么等在前置鏈路當中以積分獎勵的形式，鼓勵用戶寫真實的評價；在后置鏈路中，強化了好評的信息，展示了「回頭客」這一概念，一方面展示了產(chǎn)品的真實性，向用戶傳遞二次復購的用戶；另一方面，打消了用戶對店鋪花錢雇人刷好評的顧慮
3.專業(yè)的權(quán)威 常見于金融、政府相關(guān)的項目產(chǎn)品中，借助當?shù)卣I(yè)權(quán)威機構(gòu)的威信來和用戶建立信任關(guān)系，有相關(guān)的組織機構(gòu)做背書，此類產(chǎn)品的用戶在整個流程中更容易做出決策；比如支付寶和地方政府的合作，寺庫和美國GIA專業(yè)鑒定機構(gòu)的合作等
對于從未看過或者聽說過的某個產(chǎn)品，可以通過讓用戶了解其工作原理來建立信任，簡單來說就是「脫光了給用戶看」；有且重要的一點是，不能因為產(chǎn)品的易用性而覺得可忽略像用戶解釋你的產(chǎn)品。因為如果用戶「感知」到自己不了解產(chǎn)品本身，那么即便是別人推薦的，依然存在部分用戶不信任產(chǎn)品
舉個簡單的例子：在互聯(lián)網(wǎng)各類產(chǎn)品建立的初期，沒有品牌，沒有背書，獲取的信息讓用戶感覺自己的隱私被暴露，存在自己的隱私數(shù)據(jù)泄漏等問題；如果向用戶展示產(chǎn)品的詳細的信息，會讓用戶更加的安心。比如Uber或滴滴新生的時候，品牌尚未建立，在打車前讓用戶明確詳細地了解用戶信息、車輛信息、駕駛員信息以及安全規(guī)則后，用戶才會更加安心地使用產(chǎn)品
闡述了用戶對產(chǎn)品建立信任的原理和途徑，那么作為設計師的我們，如何在自己的產(chǎn)品設計當中，去和用戶建立信任感并且維護信任關(guān)系，可以看看成功的產(chǎn)品怎么做的
在視覺的呈現(xiàn)上向用戶直觀地展示相關(guān)的品牌、權(quán)威機構(gòu)的標示等，能在極短的時間內(nèi)改善用戶的認知和態(tài)度，從而建立起短暫的信任感；常見的此類設計在網(wǎng)頁設計、運營視覺中比較常見，比如官網(wǎng)的合作方露出，聯(lián)名活動的品牌展示等
為什么大公司有很多規(guī)范，從柵格到彈窗到動效，在整個產(chǎn)品體驗的過程中，讓用戶感知到是在一個產(chǎn)品中完成的流程就是產(chǎn)品設計的一致性，為什么要做一致性，因為要增強品牌感和產(chǎn)品體驗的舒適度，目的就是讓用戶依賴于品牌產(chǎn)品，建立起無法分離的信任關(guān)系
從整個流程的開端到結(jié)束制定一系列的體驗來構(gòu)建信任的樞紐，用拼多多的拼小圈來舉例，從最初的引導開始，向用戶透出熟悉的頭像信息引導用戶點擊觸發(fā)，然后簡單地向用戶告知產(chǎn)品的詳情，接著通過無處不在的用戶頭像和標簽建立信任關(guān)系，利用用戶「好的、知道了等」認知慣性去影響用戶的行為，最后通過K歌影集等功能鞏固信任關(guān)系，增強用戶粘性，實現(xiàn)整個樞紐的體驗閉環(huán)（不得不感嘆多多在構(gòu)建信任感這一塊真的很厲害～）
在整個互聯(lián)網(wǎng)大環(huán)境下，針對存量精細化運營戰(zhàn)中，信任關(guān)系是有效轉(zhuǎn)化的關(guān)鍵，也是企業(yè)和品牌傳播的第一生產(chǎn)力。能否獲取用戶信任，將會成為企業(yè)商業(yè)價值大小的核心判斷標準；站在用戶的視角，只有信任了某個產(chǎn)品，才會將自己的隱私信息等向企業(yè)開放，從而產(chǎn)生一系列消費、轉(zhuǎn)換等行為；自媒體直播短視頻在拓展業(yè)務和平臺的合作中，增強了用戶與之間的粘性，而這一切，所有的原點都在于信任
上面的場景是否很熟悉？在我們?nèi)粘Ｉ钪薪?jīng)常能聽到/看到這樣的話，但除了運氣好的那部分人，結(jié)局往往要么是「專柜不予驗貨」，要么是「吃啞巴虧被人割一波韭菜」或者要么是「十連抽！SSR！出了新通行證出了新皮膚！買??！」；于是這部分人開始不相信任何相關(guān)的東西，開始大肆傳播，加上一些不法分子的違法惡意行為和新聞公安宣傳，最終導致社會上絕大部分的人樹立起了很嚴謹?shù)姆纻湫?/strong>
眾所周知無論是作為互聯(lián)網(wǎng)還是傳統(tǒng)行業(yè)，無論是金融還是電商亦或者是游戲社交等等，想要賺錢，構(gòu)建平臺和用戶之間的信任是必然的。如果你無法和用戶構(gòu)建信任關(guān)系，那誰還指望用戶使用你的產(chǎn)品去消費（金錢/時間）呢？
在產(chǎn)品設計當中，作為設計師的我們?nèi)绾稳ズ陀脩魳?gòu)建信任關(guān)系，怎樣通過設計細節(jié)去逐步影響甚至改變用戶，這個話題是我最近在研究的東西，通過解析市面上的產(chǎn)品如何通過設計去構(gòu)建用戶的信任關(guān)系，提煉出我們?nèi)绾卧诋a(chǎn)品設計當中去打造信任感
首先來了解一下作為互聯(lián)網(wǎng)的產(chǎn)品中信任力是如何產(chǎn)生的：用戶要想對產(chǎn)品產(chǎn)生信任感，必須建立一個完善俱全的產(chǎn)品心智。（具體的心智設計在我之前有篇文章已經(jīng)詳細介紹過了，這里不再過多闡述）先上結(jié)論，當一個用戶從普通的態(tài)度到信任一款產(chǎn)品，這個過程是基于「認知」、「情緒」和「態(tài)度」建立的
這個過程在不同的場景所建立的時長也不相同，售賣場景當中是最常見的。舉個例子，我們經(jīng)常會在菜市場大街上看到有人吆喝賣菜刀、塑料盆各種東西，站著一圈兒人圍觀，然后會看到賣家為了展示自己商品的賣點，會很賣力地把塑料盆摔地上以此來吸引注意和展示賣點；這樣能在極短的時間內(nèi)改變消費者的情緒和認知，從而改變消費者的態(tài)度，以建立消費者對產(chǎn)品的信任，最終提升下單轉(zhuǎn)化率。說人話就是：“我這個盆怎么摔都摔不壞，不信我吧唧摔給你看，快買它！?。 ?/strong>
在用戶建立了與產(chǎn)品的心智之后，才會產(chǎn)生相關(guān)的信任力，從而產(chǎn)生相關(guān)的行為
了解原理之后，那么來看一個基本的問題：信任的行為是如何產(chǎn)生的？用戶建立了和產(chǎn)品的信任心智后，怎么產(chǎn)生相對應的行為，主要依靠三種途徑：「第一手經(jīng)驗」、「可靠的建議」和「基于理智的理解」
這個途徑是日常生活中最常見的讓人信任某人或某物的方式，比如你的好朋友或者同事告訴你：XXX地方吃飯服務超棒，味道超正宗…那么基于你對好朋友或同事的關(guān)系以及他嘗試過的經(jīng)驗，你會大概率選擇去那家店試一試。通過自己熟悉的人或事，在基于過去成功的經(jīng)驗下，人們會再次選擇相信這類人的經(jīng)驗
這類情況在互聯(lián)網(wǎng)的場景中往往以KOL帶貨、探店等形式存在，早些年的小紅書微博探店測評，到近來越來越火的直播短視頻；都是基于人們在對自己信任的KOL面前，選擇信任相對應的產(chǎn)品或消費場景。諸如「我喜歡的明星都用這個，我跟著買肯定沒錯～」、「天不怕地不怕，就怕他李佳琦說Oh my God！」之類，都是由平臺借助KOL和用戶群體建立的信任關(guān)系，也就是我們常說的「種草」
如果沒有喜歡的KOL怎么辦，那就建立以自己為中心輻射的社交圈，通過自己認識的人去建立深度的信任關(guān)系，比如我們最熟悉的朋友圈種草，拼多多核心的拼小圈和淘寶的淘友圈；基于自身為圓心，利用用戶的從眾心理和窺探欲建立的關(guān)系鏈，從而幫助平臺建立與用戶的信任關(guān)系
基于他人經(jīng)驗僅限于熟人或為了解的人所建立的關(guān)系鏈，詬病往往是必須依附于熟悉的過程，這個過程是有一個時間的，但是很多場景下并沒有那么多時間和條件給用戶去建立信任這個過程，所以出現(xiàn)了多種讓用戶通過陌生渠道快速建立信任關(guān)系的形式
1.品牌的力量 我們經(jīng)?？吹绞袌錾掀放谱錾壐拢材芸吹教靸r的品牌設計，因為品牌是對產(chǎn)品或者服務的一種保障，因為這種保障我們更傾向于使用該品牌的產(chǎn)品，因為良好的產(chǎn)品使用體驗，我們更加信任該品牌，形成一個正向的循環(huán)。而互聯(lián)網(wǎng)產(chǎn)品更加熱衷于此，比如早些年的淘寶因為假貨、刷好評曾讓平臺信任感一度降低，于是有了后來的天貓品牌；比如京東的自營標，得物的專業(yè)鑒定等，無一不是借助品牌的力量建立用戶和平臺的信任關(guān)系
2.陌生渠道詳細的經(jīng)驗 電商產(chǎn)品力商詳頁的評價系統(tǒng)相信大家一定不會陌生，如果有心關(guān)注的話，會發(fā)現(xiàn)評價系統(tǒng)一直在經(jīng)歷著改版：從起初的「好中差評」到現(xiàn)在種類繁多的評價，都是在針對信任感一直在迭代優(yōu)化，并且是一條長線的迭代。加深用戶對產(chǎn)品快速地信任，電商產(chǎn)品分階段性地在優(yōu)化評價體系。拼多多在前置鏈路當中，強引導確認收貨后的用戶進行評論反饋（具體在點擊「確認收貨」后跳轉(zhuǎn)至評價頁面強制拉起鍵盤進行輸入），而阿里系產(chǎn)品淘寶、餓了么等在前置鏈路當中以積分獎勵的形式，鼓勵用戶寫真實的評價；在后置鏈路中，強化了好評的信息，展示了「回頭客」這一概念，一方面展示了產(chǎn)品的真實性，向用戶傳遞二次復購的用戶；另一方面，打消了用戶對店鋪花錢雇人刷好評的顧慮
3.專業(yè)的權(quán)威 常見于金融、政府相關(guān)的項目產(chǎn)品中，借助當?shù)卣?、專業(yè)權(quán)威機構(gòu)的威信來和用戶建立信任關(guān)系，有相關(guān)的組織機構(gòu)做背書，此類產(chǎn)品的用戶在整個流程中更容易做出決策；比如支付寶和地方政府的合作，寺庫和美國GIA專業(yè)鑒定機構(gòu)的合作等
對于從未看過或者聽說過的某個產(chǎn)品，可以通過讓用戶了解其工作原理來建立信任，簡單來說就是「脫光了給用戶看」；有且重要的一點是，不能因為產(chǎn)品的易用性而覺得可忽略像用戶解釋你的產(chǎn)品。因為如果用戶「感知」到自己不了解產(chǎn)品本身，那么即便是別人推薦的，依然存在部分用戶不信任產(chǎn)品
舉個簡單的例子：在互聯(lián)網(wǎng)各類產(chǎn)品建立的初期，沒有品牌，沒有背書，獲取的信息讓用戶感覺自己的隱私被暴露，存在自己的隱私數(shù)據(jù)泄漏等問題；如果向用戶展示產(chǎn)品的詳細的信息，會讓用戶更加的安心。比如Uber或滴滴新生的時候，品牌尚未建立，在打車前讓用戶明確詳細地了解用戶信息、車輛信息、駕駛員信息以及安全規(guī)則后，用戶才會更加安心地使用產(chǎn)品
闡述了用戶對產(chǎn)品建立信任的原理和途徑，那么作為設計師的我們，如何在自己的產(chǎn)品設計當中，去和用戶建立信任感并且維護信任關(guān)系，可以看看成功的產(chǎn)品怎么做的
在視覺的呈現(xiàn)上向用戶直觀地展示相關(guān)的品牌、權(quán)威機構(gòu)的標示等，能在極短的時間內(nèi)改善用戶的認知和態(tài)度，從而建立起短暫的信任感；常見的此類設計在網(wǎng)頁設計、運營視覺中比較常見，比如官網(wǎng)的合作方露出，聯(lián)名活動的品牌展示等
為什么大公司有很多規(guī)范，從柵格到彈窗到動效，在整個產(chǎn)品體驗的過程中，讓用戶感知到是在一個產(chǎn)品中完成的流程就是產(chǎn)品設計的一致性，為什么要做一致性，因為要增強品牌感和產(chǎn)品體驗的舒適度，目的就是讓用戶依賴于品牌產(chǎn)品，建立起無法分離的信任關(guān)系
從整個流程的開端到結(jié)束制定一系列的體驗來構(gòu)建信任的樞紐，用拼多多的拼小圈來舉例，從最初的引導開始，向用戶透出熟悉的頭像信息引導用戶點擊觸發(fā)，然后簡單地向用戶告知產(chǎn)品的詳情，接著通過無處不在的用戶頭像和標簽建立信任關(guān)系，利用用戶「好的、知道了等」認知慣性去影響用戶的行為，最后通過K歌影集等功能鞏固信任關(guān)系，增強用戶粘性，實現(xiàn)整個樞紐的體驗閉環(huán)（不得不感嘆多多在構(gòu)建信任感這一塊真的很厲害～）
在整個互聯(lián)網(wǎng)大環(huán)境下，針對存量精細化運營戰(zhàn)中，信任關(guān)系是有效轉(zhuǎn)化的關(guān)鍵，也是企業(yè)和品牌傳播的第一生產(chǎn)力。能否獲取用戶信任，將會成為企業(yè)商業(yè)價值大小的核心判斷標準；站在用戶的視角，只有信任了某個產(chǎn)品，才會將自己的隱私信息等向企業(yè)開放，從而產(chǎn)生一系列消費、轉(zhuǎn)換等行為；自媒體直播短視頻在拓展業(yè)務和平臺的合作中，增強了用戶與之間的粘性，而這一切，所有的原點都在于信任
作者：雨灰 來源：站酷
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大家對原型工具應該不陌生，無論是設計師還是產(chǎn)品經(jīng)理，或多或少都接觸過原型圖的工具，比如較為大眾熟知的Axure，國內(nèi)運用較為廣泛的墨刀和摹客，以及一些較為小眾的產(chǎn)品。不難發(fā)現(xiàn)，大多數(shù)工具類產(chǎn)品的運作模式幾乎都如出一轍：先免費使用一段時間，養(yǎng)成了用戶認知和習慣后，逐步開始投放廣告或者收取費用變向商業(yè)化——原型工具產(chǎn)品自然也脫離不了這種運作模式。所以在這個內(nèi)卷時代下，各大原型工具相繼脫穎而出，前段時間體驗了一下摹客RP，這次就結(jié)合摹客RP這款原型工具產(chǎn)品來聊聊：內(nèi)卷時代下工具到底應該怎么做
要說怎么做一款產(chǎn)品，首先先確立這款產(chǎn)品的定位和方向，如果定位和方向上不對，自然后續(xù)鋪墊的功能還是需求都是在錯誤的事情上繼續(xù)做錯誤的事情，相信這是每一個產(chǎn)品人都不愿看到的。但往往理想很豐滿，現(xiàn)實卻很骨感：結(jié)合自己的從業(yè)經(jīng)歷，很多時候產(chǎn)品定位和方向是很難先做到清晰，然后才開始鋪設功能的；一般情況都是跟從競品功能，快速拿到結(jié)果，才開始結(jié)合自身業(yè)務特效慢慢摸索產(chǎn)品定位和方向的
眾所周知，作為B端屬性的工具類產(chǎn)品，最為重要的無非就兩點：降本和增效，這兩點向來是B端尤其是偏工具類產(chǎn)品的核心目標；那么如何降本和增效呢？有人說降低操作成本啊，降低認知成本啊，降低學習成本啊，那到底降的是什么本？增效又是增的什么效？
從上圖可以看出，無論是降人力成本、認知成本等等，還是增加學習效率、體驗效率等等，所有對象都指向了用戶群體。有人就會問了：你這不是廢話嘛，工具不就是給用戶用的嘛？誒～還真不一樣！用戶群雖然特指一個群體，但是隸屬不同目標下，自然而然也有類別區(qū)分
為什么這樣說，因為不同的用戶群有不同的功能訴求；用戶A通過產(chǎn)品想達成目標A，用戶B通過產(chǎn)品想達成目標B，那么用戶A和用戶B從根本的目標不相同，那么他倆的體驗路徑和信息傳達也是需要有不同
的區(qū)分的，簡單來說就是用戶達成的目標不同，想看到的頁面和功能也不相同
把工具產(chǎn)品比喻成一個小中臺來說，所有用戶都是中臺的需求方，不同需求方的目的不同，但是作為小中臺來說都是需要同時滿足的。以摹客RP來舉例，作為一款協(xié)作產(chǎn)品，用戶群可大致分為產(chǎn)品經(jīng)理、UE設計師、研發(fā)等，而針對不同的用戶群目標來看，產(chǎn)品經(jīng)理的核心目標是快速通過原型具像化產(chǎn)品功能，而UE設計師則是通過產(chǎn)品經(jīng)理的思想以圖形化的形式表達出來，而身為研發(fā)的核心目標是快速了解業(yè)務邏輯，以便構(gòu)思開發(fā)結(jié)構(gòu)
綜上所述來看，無非就是針對不同的用戶群體的需求都滿足嘛，我都把功能給你做上去不就好啦？表面上的確滿足了所有用戶群的需求，可事實上無形將各類的成本分攤給了各個用戶，怎么理解呢？大家可以腦補想象自己作為一名維修工，此時你急需把一顆梅花口的螺絲給取出來，這時候你來到工具間，你最希望看到下圖中哪個場景？
毋庸置疑大家肯定都會選擇右邊那個工具間，因為功能排列整齊有序，不管你維修工是水電維修還是建筑維修還是網(wǎng)絡維修，都能在這個工具間找你能幫你完成你的目標。這便是所謂的擅百技——基于用戶群的需求全部將功能一一實現(xiàn)
還是以摹客RP舉例，當不同用戶群進入平臺，功能排列整齊有序，都有足夠的區(qū)域和節(jié)點幫助用戶群實現(xiàn)各自的目標，產(chǎn)品經(jīng)理能通過組件庫、模板等快速輸出原型圖，UE設計師則能通過多樣的圖形、動效等實現(xiàn)高保真交互稿，團隊方面則有快捷拉起會議、在線留言等功能；所謂是將目前市面上幾乎所有原型工具功能，結(jié)合自身的發(fā)展沉淀做出的平臺
可是，擅百技就足夠了么？換句話說，當你在找梅花口的的起子時，你會希望看到平口起子在眼前對你進行干擾嗎？
既然你說擅百技不好，那么接下來你是不是以為我會走極端，那就只針對產(chǎn)品經(jīng)理做一款原型工具精一技不就好了？大漏特漏！雖說術(shù)業(yè)有專攻，互聯(lián)網(wǎng)時代咱們包容性廣，咱不走極端，在每個用戶群的功能需求上更聚焦精細化不就行了，精一技不夠，咱們就精百技，每一個功能打磨透透的，卷到極致這樣夠不夠了？
這樣做OK，內(nèi)卷時代下大家都是這樣做的，但是會帶來一個新的問題：
在多維全局視角下，體驗成本實際上均是嫁接分攤于各個角色的
怎么理解這個問題呢？可以看到下面一張圖示意：
從二維視角下來看，各個角色以目標核心出發(fā)各司其職，通過工具平臺功能都能很好實現(xiàn)目標；但是我們不妨拔高一層視角來看看：
以多維全局視角來看，雖然各個角色各司其職完成了自己的目標，但是基于產(chǎn)品使用層完全是由平臺承載的，導致了各個角色的使用成本嫁接分攤給了其他角色，簡答來說就是：
角色A完成對應目標時，存在角色B和角色C的信息干擾，那么角色A無形中分攤了角色B和C的成本
舉個例子：產(chǎn)品經(jīng)理打開原型工具后，想直接拖動下拉框組件搭建一個產(chǎn)品原型，這時候選中下拉框組件想進行文案編輯，此時彈出了下拉框組件對應的編輯面板：字號、字色、字體、行高、字間距等等，然后其中部分功能則屬于設計同學關(guān)注的，例如字體、字色、字間距等，但是此類成本則分攤給了產(chǎn)品經(jīng)理，產(chǎn)品經(jīng)理在整個搭建原型的過程中，增設了過濾這些信息的成本
那有人就會說了，這很簡單啊，可以直接做成個性化定制工具平臺啊，根據(jù)每個角色身份不同進來設計師進來就只看到和設計相關(guān)的功能，產(chǎn)品經(jīng)理進來就只看到和產(chǎn)品相關(guān)的功能不就好了？而且我把每一個角色對應的功能做到專精，是不是就精一技且解決問題了？
看到這個標題大家可能會想到我們的詠春葉問老師，無論對手學的什么招數(shù)、有多少個人，葉師傅都能一人單挑全部，然后撂下一句霸氣的：“我要打十個！”
收一收，繼續(xù)回來我們的主題上來，是否將工具平臺做成個性化定制平臺并且其中功能都打磨細致，就能解決工具降本增效的問題了？其實不然，問題不能想得太復發(fā)，當然也不能想得很簡單，都知道用戶需求是分階段而不同的，可能產(chǎn)品經(jīng)理A不需要設置字號大小顏色，但是產(chǎn)品經(jīng)理B為了今年績效決定卷一卷同事，立志要出“高保真原型”，開始設置起了字號大小顏色，此時平臺功能又被局限住了
那么究竟應該怎么做呢？不妨把眼界跳出同類競品Axure、墨刀等，結(jié)合不同多角色并行的工具搭建類產(chǎn)品做競品調(diào)研，得出兩個不同的產(chǎn)品方向思路：
思路1是像葉師傅詠春拳一樣，見招拆招：平臺以通過不同身份拆分成不同時間段進行角色管理
大致以上中下游角色進行功能分發(fā)，例如產(chǎn)品初期，上游的產(chǎn)品視角進入平臺，基礎的團隊管理、項目管理、關(guān)聯(lián)PRD等，然后進行聚焦產(chǎn)品原型搭建；之后流到中游由設計師進行二次加工，包括高保真原型稿、交互動效、串聯(lián)頁面跳轉(zhuǎn)等；最后流到下游研發(fā)團隊視角，研發(fā)通過已經(jīng)二次加工過的高保真設計稿進行框架搭建、前后端接口串聯(lián)等開發(fā)評估
站在平臺的視角來看，綜上所述產(chǎn)品方向可拆解為：
時間維度：核心解決降本問題，包含時間成本、溝通成本，更加以維度追溯問題（產(chǎn)品問題追溯上游、設計問題追溯中游等等）
角色維度：核心解決增效問題，減少信息干擾、提升操作效率、溝通效率和協(xié)作效率
思路2則是基于前面?zhèn)€性化定制工具平臺的思路上進行優(yōu)化改造的，通過不同角色視角進入不同的工具平臺，通過數(shù)據(jù)打通串聯(lián)實現(xiàn)多角色同平臺操作，減少時間維度上的強依賴關(guān)系
例如產(chǎn)品進入平臺，依舊是創(chuàng)建項目、管理團隊等，然后開始進行產(chǎn)品形態(tài)輸入和原型搭建，之后UE同學便能在同平臺看到協(xié)作項目進行產(chǎn)出或者進行二次優(yōu)化，最終通過管理員權(quán)限人員進行收口；其次針對平臺來說，不斷更新同步的數(shù)據(jù)，能間接豐富平臺的多元化
無論是思路1還是思路2，不難發(fā)現(xiàn)：將原型工具的核心目標降本和增效，往上抽象出一層就是圍繞兩個維度在解決問題：一個是具備時效性的時間維度，一個是具備多元性的角色維度。從上圖可以感知到：不同時間節(jié)點，不同角色介入的時間隨著時間維度的增加而變化
因為整個項目周期，不同職能的角色一定會有先后順序，那么有了這一層抽象以后，無論你的需求刻畫多么具體，無論你的case多么邊界，只要緊貼圍繞這兩個維度進行優(yōu)化，都是從本質(zhì)上解決工具平臺的降本和增效問題
作者：雨灰 來源：站酷
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
最近很流行一個詞——B端C化，解釋出來就是可以用C端的模式和思維來對B端產(chǎn)品進行設計，討論者大致分為兩種觀點：
1.C端產(chǎn)品市場已經(jīng)趨于飽和，可拓展空間剩余不多了，B端產(chǎn)品市場還是一片藍海，于是產(chǎn)生了一些C端設計師轉(zhuǎn)型去做B端了，將一些C端的模式和思維帶到了B端設計中，導致越來越多的B端逐漸C化；
2.B端產(chǎn)品市場互相競爭，為了在同市場中打出差異化，于是一些B端市場開始招攬C端設計師培養(yǎng)轉(zhuǎn)型，并且嘗試融入C端產(chǎn)品的模式和思維在同市場內(nèi)競爭，是產(chǎn)品設計的“內(nèi)卷化”現(xiàn)象，導致市面上的C化的B端產(chǎn)品越來越多；
但上述無論哪一種觀點，都在闡述一種現(xiàn)象或者趨勢：不管是交互還是視覺還是UI，目前部分C端設計師正在往B端設計師轉(zhuǎn)型。這個現(xiàn)象的發(fā)生對整個設計行業(yè)來說無異于新增了很多新亮點——市場上越來越多的B端交互、數(shù)據(jù)可視化視覺等需求，進而導致對市場培訓行業(yè)開始產(chǎn)生B端培訓的訴求，同時也破空而出了很多優(yōu)秀的B端設計師。那么B端C化到底是什么，和傳統(tǒng)B端C端有什么區(qū)別，有這方面想法訴求的同學怎么去實現(xiàn)轉(zhuǎn)型？
由于我本人之前是做C端UI設計師，到后來轉(zhuǎn)型成為B端交互設計師，而接觸的業(yè)務恰好涉及B端和C端的聯(lián)動以及多角色之間的協(xié)作，所以這篇文章借助結(jié)合我個人的經(jīng)驗和看法，談一談自己對B端C化的理解
在談B端C化之前，需要先了解B端和C端的區(qū)別是什么。B端C端的區(qū)別網(wǎng)上有很多文章和概述了，大致歸納下來主要以四個維度去區(qū)分：受眾主體、上線周期、業(yè)務類型和產(chǎn)品側(cè)重點這四個維度，其余的維度也會有區(qū)分，但是影響較小，主要還是圍繞以上四個維度進行B端和C端區(qū)分
受眾主體也就是相對應產(chǎn)品的用戶群體。C端的受眾主體是大眾用戶，特征為多樣化，用戶與用戶之間跨度也大，但是場景和路徑較為單一的，比如C端產(chǎn)品就以年齡層、城市、性別等來劃分用戶，每個階段的用戶都有不同的訴求、認知和習慣等等；在做任何決策方面都屬于偏感性（Heart）的個人決策（Personal）；用戶穩(wěn)定性則比較差，要是對產(chǎn)品不滿意，可以立馬換另一款產(chǎn)品，轉(zhuǎn)換門檻低，有多個競爭對手產(chǎn)品可供選擇；
而B端產(chǎn)品的受眾主體則是為組織群體，特征為多場景和多維度，用戶群體較為清晰明確，可以按照崗位、角色、權(quán)限等劃分用戶群，但是之間的關(guān)系更加復雜，比如設計一個銀行內(nèi)部管理系統(tǒng)，用戶群就很明確清晰——銀行各級職員角色，根據(jù)職級關(guān)系設計不同的功能以及權(quán)限；在做任何決策方面都屬于偏理性（Head）的團隊性決策（Team）；用戶穩(wěn)定性較強，要是對產(chǎn)品不滿意，也只能被迫適應和忍受，轉(zhuǎn)換成本較高，幾乎沒有其他產(chǎn)品可供選擇
上線周期就是指產(chǎn)品從需求階段到設計階段。到開發(fā)階段直至最后產(chǎn)品上線所需要的周期。C端產(chǎn)品上線周期模式有個很明確的特點：快速迭代、敏捷，很多C端產(chǎn)品功能更新迭代的速度很快，上線周期非常短，往往半個月甚至一周就完成開發(fā)上線，加上用戶群的多樣性和跨度大，所以在上線的時候往往會需要AB實驗去驗證方案可行性；
B端產(chǎn)品上線周期則是和C端一個對立面——長，少則雙月/季度多則半年/一年等，因為B端產(chǎn)品流程上都屬于重型流程，角色之間關(guān)系復雜，交互系統(tǒng)較為繁瑣，需求的改動和迭代并沒有那么頻繁，也不需要像C端產(chǎn)品那樣快速上線搶占市場，所以B端上線周期會很慢，也導致在工作強度上相比C端較為輕松一些，但是缺點就是結(jié)果沒有C端來的那么快和明顯
C端產(chǎn)品的核心競爭力就是產(chǎn)品本身，關(guān)鍵總結(jié)就是讓用戶爽就完事了，所以C端產(chǎn)品的需求類型往往圍繞用戶群的痛點產(chǎn)生；因為C端用戶跨度大，不同的用戶群體有不同的痛點，所以導致C端的需求類型不是很明確清晰，需要不斷從用戶身上去探索挖掘需求，在不斷的試錯中逐漸得出正確的結(jié)論；
B端產(chǎn)品的核心競爭力除了產(chǎn)品本身，還依賴復雜的關(guān)系、渠道、技術(shù)和資源，你的關(guān)系夠硬、渠道夠廣、技術(shù)夠領(lǐng)先、資源夠豐富，哪怕你的產(chǎn)品很一般，一樣能領(lǐng)先其他同行業(yè)的競爭對手，關(guān)鍵總結(jié)下來就是讓用戶贏就夠了；B端產(chǎn)品的需求類型雖然也是圍繞著用戶群的痛點產(chǎn)生，但需求的目標是更加明確清晰的，加上需求變更的頻率、范圍往往都有契約/合同所約束，所以相較于C端產(chǎn)品來說，B端產(chǎn)品是需求更加明確且容易達成目標
產(chǎn)品側(cè)重點無異于區(qū)分C端和B端最明顯的門檻了，C端產(chǎn)品的側(cè)重點主要在于體驗，而B端產(chǎn)品的側(cè)重點主要在于效益
前面提到過C端產(chǎn)品核心讓用戶爽就完事了，加上基于用戶更換產(chǎn)品的成本很低：你這款產(chǎn)品我用不爽就換掉了，所以C端產(chǎn)品的側(cè)重點永遠以用戶體驗為主，前面說的需求業(yè)務類型也幾乎是圍繞用戶體驗產(chǎn)生的；大家對比市場上同類型的C端產(chǎn)品，界面、交互、功能都不會差很多，是因為經(jīng)過長時間的更新迭代，已經(jīng)沉淀下來目前最好的用戶體驗類型了，隨著產(chǎn)品量級越大，改變用戶體驗類型就越謹慎；C端產(chǎn)品就是為了尋找并解決用戶痛點、癢點和爽點，加上品牌性、用戶隱私等因素考量，產(chǎn)品側(cè)重點聚焦于用戶體驗
B端產(chǎn)品側(cè)重點則是圍繞效益了，因為作為一個團隊使用的產(chǎn)品，不管是從易用性、功能性還是安全性，為這個團隊解決問題為首要基礎，那么使用者的體驗、產(chǎn)品的美觀度等等相較于優(yōu)先級就沒有那么高了，所以導致了有一段時間大家對B端的理解依舊是老舊、丑、難用的認知上；B端產(chǎn)品就是為了使用產(chǎn)品的團隊解決效率、成本、營收的問題，加上產(chǎn)品的穩(wěn)定性、安全性等因素的考量，產(chǎn)品側(cè)重點自然更聚焦在效益上
前面了解了B端和C端產(chǎn)品的區(qū)別，接下來聊一聊什么是B端C化；簡單來說從字面意思理解就是B端的設計層面逐漸靠近C端，網(wǎng)上也有很多B端可視化、趨勢潮流的設計和文章，但是B端C化不僅僅是從視覺設計上的改良，下面我逐漸從大到小聊一下我對B端C化的理解
在做過很多B端產(chǎn)品之后發(fā)現(xiàn)，往往很多產(chǎn)品經(jīng)理是對整個產(chǎn)品架構(gòu)、功能形態(tài)一切都清晰地了如指掌，但是有時候在搭建產(chǎn)品架構(gòu)的時候，功能形態(tài)單一粗糙，步驟復雜且笨拙；站在業(yè)務產(chǎn)品的視角來看，架構(gòu)邏輯上都是沒有問題的，但是站在用戶視角來看，整體框架是混亂破碎的，步驟繁瑣且復雜，導致用戶對產(chǎn)品的認知變差，但是又不得不去用這個產(chǎn)品，只能被迫去學習使用
比如一個產(chǎn)品案例，就是一個產(chǎn)品的底層邏輯是前端輸入素材id，后端返還一個素材后就可以使用了，站在產(chǎn)品業(yè)務視角來看，這樣設計沒有什么問題，符合產(chǎn)品的底層邏輯；但是站在用戶視角就特別難受了，用戶想用一個素材，還要去尋找id然后輸入搜索，像C端那樣全部鋪出來給用戶選不好嘛？
行為習慣自然是指用戶群在該行業(yè)下的行為習慣，電商行業(yè)、社交行業(yè)等等不同行業(yè)的習慣、專業(yè)術(shù)語等都不相同，這個在C端產(chǎn)品中都很能得到體驗，比如電商行業(yè)的大紅大紫，社交行業(yè)的左右滑動等等，這類有著很明顯的行業(yè)屬性和大眾認知，一樣是B端設計中應該注意的點
最經(jīng)典的案例就是紅色綠色的定義區(qū)分，在數(shù)據(jù)產(chǎn)品認知中，綠色代表數(shù)據(jù)漲了，紅色代表數(shù)據(jù)跌了，比如GMV數(shù)據(jù)，DAU數(shù)據(jù)等，紅色為重點關(guān)注的數(shù)據(jù)；而在金融行業(yè)中，基金股票紅色代表漲了，綠色則代表跌了，所以設計的原則一定得是基于不同行業(yè)的用戶行為習慣
B端產(chǎn)品的信息量一般是很龐大的，尤其是數(shù)據(jù)、表單、審批等B端產(chǎn)品，涉及到不同角色不同權(quán)限的開放等，所以用戶能否能一眼看清關(guān)鍵信息，能否幫助用戶快速達成目標，是交互層面針對信息層級的設計處理一個重要的環(huán)節(jié)
之前很常見B端產(chǎn)品中信息處理的方法就是堆積處理，直接將信息、數(shù)據(jù)等平鋪展示，比如很久之前的某牛商家端后臺等老舊系統(tǒng)；現(xiàn)在很多新的B端產(chǎn)品都是以模塊化處理方法將信息層級區(qū)分，使得模塊之間間隔更明顯，信息處理的效率更高，宛若C端中的卡片式設計
設計語言自然是B端設計中標題、字號、顏色等規(guī)范標準，早些年把B端產(chǎn)品組件化后且開源的自然是阿里老大哥了，當時最早的AntDesign、以及后來的ElementDesign組件庫，到現(xiàn)在都被很多中小企業(yè)甚至大廠某些產(chǎn)品一直使用中，但隨著B端產(chǎn)品的普及和發(fā)展，越來越多的企業(yè)開始將自己產(chǎn)品沉淀出完善成套的設計語言，并搭建出自己的組件庫投入使用了
如何去衡量用戶體驗是否是好的，最客觀來講當然是通過數(shù)據(jù)去衡量，而數(shù)據(jù)往往在C端產(chǎn)品中很常見，不管是體驗數(shù)據(jù)還是表現(xiàn)數(shù)據(jù)，都是C端產(chǎn)品中最為關(guān)注的；然而在B端產(chǎn)品中，更多收集的一般都是業(yè)務表現(xiàn)數(shù)據(jù)，幾乎沒有衡量用戶使用平臺的相關(guān)數(shù)據(jù)，大多衡量體驗的方法都是依靠問卷反饋的形式；但在B端C化的過程中，用戶體驗的數(shù)據(jù)也逐漸被加入到B端產(chǎn)品當中來，成為體驗標準的考核之一：比如某個任務完成的時長，報錯出現(xiàn)的頻次、某某工具的使用率等
最后就是B端C化表現(xiàn)層的設計，包括目前主流的設計趨勢如大數(shù)據(jù)可視化、3D建模、材質(zhì)質(zhì)感、Dark模式等都逐漸融入到B端產(chǎn)品中，使得B端產(chǎn)品不再追求簡單的“功能優(yōu)先”和“能用就行”，而是像C端那樣追求更美觀的視覺，更極致的體驗
總結(jié)下來“B端C化”就是B端產(chǎn)品無論是從功能架構(gòu)還是視覺體驗，越來越趨于人性考慮設計，越來越關(guān)注使用者的感受和反饋，因為說白了不管B端產(chǎn)品代替成本高不高，用戶是一群專業(yè)人士還是普通職員，使用者歸根到底還是“人”在使用產(chǎn)品，那么必然會帶來體驗相關(guān)的問題；所以B端C化會逐漸形成一種趨勢，在企業(yè)平臺資源支持的情況下，會將B端產(chǎn)品的功能放大，追趕市場競爭，逐利行業(yè)內(nèi)卷，在體驗和視覺感官上也會更加的人性化，結(jié)果自然是產(chǎn)品設計者們更加的卷了（手動狗頭）
無論是現(xiàn)在的B端C化還是將來其他多元的設計趨勢，隨著市場的競爭和行業(yè)內(nèi)卷，已經(jīng)反推著設計師們不單單局限于照顧自己的“三分田地”了，無論是之前視覺設計師開始學習3D建模，還是UI設計師嘗試接觸代碼設計，設計師最大的品質(zhì)就是應該緊跟時代的趨勢變化，及時調(diào)整補充自己的能力，提升自我的競爭力，才是在當今環(huán)境下立足的根本
作者：雨灰 來源：站酷
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
1、卡片的造型
不同的圓角，所帶來的氣質(zhì)是不同的。圓角很小，視覺印象是硬朗，高冷，具有攻擊性的，多用于嚴肅、高端、沖突感強烈的設計中；而更大的圓角給人的感覺是有親和力，柔軟，安全的，多用于兒童產(chǎn)品、娛樂性強的設計中。
在設計的時候，根據(jù)自己的產(chǎn)品屬性選擇氣質(zhì)相符的圓角設計很有必要。
常見的卡片弧度形式有4類：直接、小圓角、大圓角、特殊圓角
我一般喜歡用4的倍數(shù)來設置圓角，比如圓角大小為4px、8px、12px之類的。要注意的是，圓角越大，可用面積會越小，需要根據(jù)實際場景進行平衡，以視覺上舒服為宜。
卡片的比例，我習慣遵循一些美感規(guī)律，比如黃金比例（1.618），白銀比例（1.414），青銅比例（1.732），正方形之類的比例。當然，實際設計需求中的比例，還是要結(jié)合內(nèi)容的多少具體分析。
我的經(jīng)驗是，當比較接近這些美感比例其中之一時，就直接優(yōu)化到這個比例。比如做了一個卡片，寬高比是1.5，比較接近于黃金比例，我就干脆讓它等于黃金比例。
除了正常的卡片樣式，還可以做一些異型的卡片設計。異型卡片具有較強的形式感和視覺沖擊力，所以會比較多的用在游戲或者運營相關(guān)的界面中，吸引用戶的注意力。缺點是批量化設計成本略高且因為過于風格化而不夠耐看。
2、卡片的效果
卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對比要符合界面對比度標準（ https://contrast-grid.eightshapes.com/，這個網(wǎng)站可以直接查到可用性數(shù)值，只要不是DNP就是可以用的配色），以免影響內(nèi)容本身的閱讀。如果拿不準的話，可以多用一些白色，比較不容易出錯。
純色卡片設計會讓界面顯得冷靜高級，但對配色的要求相對較高，用不好的話會顯得單調(diào)，沉悶。如果你堅持要用這種卡片配色的話，建議搭配一些圖形紋理，會更容易把控，還能提升畫面細節(jié)。
純色卡片設計
漸變色的卡片設計目前較為常見，層次細節(jié)更加豐富，畫面也顯得更活潑一些。
漸變色卡片設計https://dribbble.com/shots/12284120-Wallet-Design-App
有些朋友經(jīng)常因為配色不好而發(fā)愁，其實是需要多去找一些參考來看的，實在擔心配色不好，直接去吸優(yōu)秀的配色方案也是OK的，但要注意搭配合理。
教大家一個方法，去dribbble上搜color或直接打開https://dribbble.com/search/color這個鏈接，就可以看到非常多的優(yōu)秀配色方案了。
卡片的設計還可以結(jié)合輔助圖形，以圖案的形式與卡片進行結(jié)合。這些輔助圖形可以來源于品牌符號的延伸，讓品牌有更多的露出機會。
也可以是運用一些簡單的圖形，提升卡片的設計細節(jié)，以下是一些還不錯的設計案例。這些卡片上的圖形都有借鑒參考的價值，自己平時有時間的話，也可以多做一些作為圖形的儲備。強烈建議收藏，真的可以很有用。
來源：https://dribbble.com/shots/10513966-Gradient-Bank-cards
來源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design
來源：https://dribbble.com/shots/11313260-Finance-App-Exploration
來源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD
這里彩云給大家找了非常多的卡片設計形式，可以從中參考學習配色和紋理造型。
卡片背景也可以用圖片和視頻的形式進行設計，圖片和視頻的選擇一般會偏暗色，以不影響內(nèi)容閱讀為準。
來源：https://dribbble.com/shots/5717917-Travel-Article-Application
卡片上的文字不要太長，我的經(jīng)驗是橫向不要超過42字（關(guān)于這個字數(shù)，有資料可以查，感興趣的可以找找看），縱向不要超過5行。過多的文本不建議使用卡片形式。
其實這張卡片的設計中，我也用到了黃金比例來指導自己的設計，方便快速確定文字比例關(guān)系。
卡片上的文字間距最好有一定的規(guī)律，這里可以按網(wǎng)格法來規(guī)劃，比如8px網(wǎng)格，10px網(wǎng)格等等。網(wǎng)格的使用其實可以很靈活，比如我這里的卡片其實就用到了8px網(wǎng)格，各間距就會用8的倍數(shù)來做。大小比例就盡量用黃金比例來處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。秩序產(chǎn)生美，而效率讓你早點下班。
卡片中盡量減少線框，多用留白來進行內(nèi)容劃分。
卡片中的內(nèi)容層級要做好，標題和內(nèi)容之間的差異要明顯。這里的層次主要是通過對比拉開的，做好對比的關(guān)鍵就是對比效果要強烈，決不能模棱兩可。
比如下圖中左邊的案例只是在文字的字號上有一定的對比，但字號間相差不大，效果不明顯，就會讓人看第一時間不知道看哪。而右側(cè)的案例則用了加粗，大字號，大留白等，讓畫面有了強烈的對比，從而產(chǎn)生更好的信息層級。
只在卡片的框框里做設計，有時候未免顯得太呆板，破開卡片的邊界可以讓卡片本身更具形式感。如果被人說你的設計沒啥亮點，那內(nèi)容出界的設計就是一個很好的提升設計亮點的手法。
彩云曾經(jīng)做的一張banner就是運用了出界的手法
來源：dribbble。界面上的天氣圖標也用了出界的手法，讓畫面顯得更有亮點
卡片中的光感細節(jié)能提升設計的質(zhì)感。下面這張圖是我最近做的一張會員卡的背景設計，大家對比下，在卡片頂部加了1px高光線和斜面反光的細節(jié)前后的質(zhì)感區(qū)別。
這個小細節(jié)，我經(jīng)常會用到，執(zhí)行簡單又容易出效果。
投影的細節(jié)，不要過重，但又要能與背景分離開。有2個小技巧：
1.在取色的時候，可以選擇背景顏色的色相，然后略微加深一些，不要用純黑色來做投影，會顯臟。
2.投影的距離不要太小，太小的投影會顯得不夠自然；也不能太大，太大會很浪費界面資源。
3D卡片的設計，因為不便于內(nèi)容編排和閱讀，所以帶透視的卡片在實際UI中并不太常用。但在作品集包裝和運營頁面中，則可以帶來比較好的視覺沖擊力，可以嘗試運用。
圖片來自：Cradle
作者：彩云Sky 來源：站酷
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圍繞應用生命周期的編排設計是一種企業(yè)級技術(shù)產(chǎn)品設計策略。
它的核心是要解決設計師很難上手企業(yè)級技術(shù)產(chǎn)品，且更加難以找到體驗設計機會點的問題。我們是一群工作在企業(yè)級技術(shù)產(chǎn)品領(lǐng)域里的設計師，同時也是掘金者，這篇分享即是我們在企業(yè)級技術(shù)產(chǎn)品領(lǐng)域里探索的一些方法總結(jié)。
在我們?nèi)粘９ぷ髦?，和技術(shù)產(chǎn)品 PD 聊需求是一件非常痛苦的事情，他們講的每一個字都認識，但是組合起來就不知道是干什么的了，因此設計師也很難去想象用戶是怎么在用這些功能。
因此相較于 C 端產(chǎn)品來說，B 端的技術(shù)產(chǎn)品目前還處于基本可用的狀態(tài)，更談不上什么體驗了。
究其原因，我們總結(jié)有三點：
① 這些產(chǎn)品大多數(shù)都是由技術(shù)來主導，功能優(yōu)先
② 設計在整個流程中都處于非常被動的狀態(tài)
③ 設計與技術(shù)之間存在一定的專業(yè)壁壘，技術(shù)往往比較抽象難以理解
同時，我們的用戶并不是客戶，用戶不能根據(jù)自己的意愿喜好選擇產(chǎn)品。用戶隱藏在企業(yè)內(nèi)部，設計師日常中很難接觸到真實用戶。另一方面，用戶的技術(shù)專業(yè)背景與設計師的專業(yè)存在鴻溝，這使得設計師對用戶需求的理解也不夠深，所以說在這種環(huán)境隔離和語境不通的狀態(tài)下，設計師其實難以和用戶構(gòu)建同理心。
在這種狹小的設計發(fā)揮空間里，我們能做什么呢？
其實我們設計師有明顯的優(yōu)點：
比較擅長找規(guī)律找方法，有破局意識，從而能夠發(fā)現(xiàn)設計的機會點。
所以我們回過頭看一下之前做過的這些產(chǎn)品和功能，從它們的作用對象、出現(xiàn)時間、用戶目標、用戶行為這四個維度對他們進行歸納和總結(jié)。
我們發(fā)現(xiàn)這些產(chǎn)品具有很強的階段性，通過不同的產(chǎn)品來支撐各個階段下的用戶目標。用戶通過產(chǎn)品的功能來實現(xiàn)各種編排動作，例如對應用本身代碼的編排、對應用依賴的底層資源的編排，從而支撐用戶應用的生命周期。
因此企業(yè)級技術(shù)產(chǎn)品具有以下四個特點：
階段性
驅(qū)動性
流程性
抽象性
首先我們要針對這四個特性進行一輪判斷，了解這個產(chǎn)品的場景，場景下對應的角色，每個角色執(zhí)行的是單線還是多線任務流，以及任務流是由哪些功能支撐。經(jīng)過這層判斷之后再定位具體問題：
① 每個階段的目標是什么
② 階段下每個角色各自的小目標又是什么
③ 任務要對應用還是應用相關(guān)的內(nèi)容進行編排
④ 產(chǎn)品的功能是如何實現(xiàn)的
當找到這些問題的答案以后，我們就可以對產(chǎn)品的上下游場景進行編排，明確各階段的側(cè)重以及上下游場景的限制條件；對角色進行權(quán)限分配以及協(xié)作觸點的確定；將任務流從起點到過程再到結(jié)果進行梳理；以及最后通過對底層技術(shù)的理解，合理編排產(chǎn)品信息架構(gòu)和界面內(nèi)容。
為了能夠更加高效的完成以上信息的收集和處理，我們沉淀了 CMTD 四個小工具。
C 是 Collaboration，協(xié)同場景，主要回答四個問題：When、What、Who、Where。
① When：用以明確產(chǎn)品所處階段以及上下游階段，以全鏈路的視角看用戶的完整使用場景，因為產(chǎn)品往往可能只是解決用戶部分場景的問題
② What：定義當前場景的階段目標以及要做的事情
③ Who：當前階段的事情由哪些角色參與
④ Where：這些角色在線上或線下是如何配合協(xié)作的
例如我們要做一個技術(shù)產(chǎn)品，通過 Collaboration，我們知道它覆蓋了發(fā)布階段、日常運維階段，目的是把經(jīng)過測試的應用發(fā)布上線并進行日常維護，主要是運維人員配合研發(fā)人員和發(fā)布經(jīng)理完成線上的問題排查和線下配置文檔的交接，我們就能比較清楚的知道我們要做的是一個運維平臺。
M 是 multi-role，多角色，主要用以分析產(chǎn)品是由哪些角色共同協(xié)同驅(qū)動的。
與 C 端產(chǎn)品不同的是，我們除了對核心角色的自然人屬性進行洞察，還要定義清楚該角色的目標有哪些，目標對應的任務流以及支撐的功能和權(quán)限。并且企業(yè)級技術(shù)產(chǎn)品往往都不是一個角色就能完全執(zhí)行完成，所以該角色的上下游角色也要摸清之間的協(xié)作觸點在哪里。
多角色的信息我們可以通過在客戶現(xiàn)場或者用戶訪談來收集，并沉淀為用戶角色庫。
基于收集來的用戶信息，來定義我們產(chǎn)品的角色：
T 是 Task flow，任務流。任務流一定是基于一個用戶角色的某個目標，來定義任務的起點-過程-結(jié)果。
起點就是界面上用戶的操作入口，過程需要包含觸發(fā)操作、自操作、條件判斷以及是否有協(xié)作角色參與進來，在結(jié)果處除了提供結(jié)果反饋還要提供下一任務的去向入口，幫助用戶把流程串聯(lián)起來。
任務流可以借助現(xiàn)有流程的走查或按照 T 模型來梳理任務流信息，從而幫助我們更好的定義一條用戶的任務流是如何執(zhí)行的。
例如我們要做的運維平臺的產(chǎn)品，核心角色是運維，他其中的一個目標是為應用創(chuàng)建工作空間。按照 T 模型，我們可以很方便的將這條任務流定義出來。
D 是 deep ，深化。主要從兩個維度展開：技術(shù)架構(gòu)和邏輯原理。這是兩個在做技術(shù)產(chǎn)品的過程中經(jīng)常會接觸到的兩個概念。
在分析技術(shù)架構(gòu)時，我們可以重點關(guān)注兩個點：看由哪些功能模塊構(gòu)成，這些功能之間的靜態(tài)結(jié)構(gòu)，是包含關(guān)系還是依賴關(guān)系。分析邏輯原理，一是了解這些功能產(chǎn)生的實例，是一對一的關(guān)系還是一對多的關(guān)系，信息或流量在這些功能模塊之間如何流轉(zhuǎn)。通過這些分析，我們可以把掌握的功能特征和邏輯規(guī)律。
舉例來說，運維平臺的核心角色運維人員需要為應用創(chuàng)建工作空間，按照梳理出的任務流，用戶需要經(jīng)過3次跳轉(zhuǎn)7步完成，那這個是否還有優(yōu)化空間呢？
我們可以從 Deep 深化的角度入手，看這條任務流是由哪幾塊功能支撐的。例如工作空間內(nèi)包含網(wǎng)絡和安全組，安全組內(nèi)包含負載均衡和虛擬機。就像我們了解汽車的制動裝置，看到裝置內(nèi)包含氣室，氣室內(nèi)包含活塞體、密封墊，密封墊連接在推桿上。
再從邏輯原理圖入口，了解流量會先按照工作空間進行隔離，從工作空間走專有網(wǎng)絡還是經(jīng)典網(wǎng)絡，網(wǎng)絡將流量分發(fā)到安全組，安全組里的負載均衡會負責調(diào)配流量到虛擬機。他們之間層層遞進互相依賴。就像汽油從油箱到達制動裝置，在發(fā)動機里和空氣一起被壓縮燃燒后能量轉(zhuǎn)化轉(zhuǎn)送到動力裝置一樣。
通過上面的分析我們了解到這幾個功能其實是緊密關(guān)聯(lián)的，用戶沒有必要分散到不同的地方進行添加和創(chuàng)建，完全可以借助流程表單和抽屜把他們串聯(lián)在一起。
因此我們找到優(yōu)化體驗的機會點，把之前需要三次跳轉(zhuǎn)7步完成的任務流，優(yōu)化到1個入口5步完成。
企業(yè)級技術(shù)產(chǎn)品有四個特性：階段性、驅(qū)動性、流程性、抽象性。通過 C、M、T、D 四個小工具來幫助我們收集和歸納信息，實現(xiàn)對上下游場景的編排、角色的定義、任務流的編排以及界面的編排。
作者：Ant_Design 來源：站酷
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
很多時候，我們發(fā)現(xiàn)自己精心設計的作品總是亂亂的感覺，究其根本，大部分都是文字、圖形、色彩處理不當，后續(xù)的優(yōu)化調(diào)整也都圍繞著這幾點進行，這也是為什么設計師在制定設計規(guī)范的時候，會把文字（標題、正文、提示的字號）、色彩（主色、輔助、點綴、漸變的使用場景）規(guī)范分的很細。然而，有時候即便用好了規(guī)范，依然沒達到理想的視覺效果，這里就要提到設計規(guī)范中很少有人關(guān)注、且非常容易被忽視的「間距」問題。
優(yōu)秀的界面設計應該體現(xiàn)在每個維度，間距在設計中也是不可缺少的部分，尤其是界面元素較為密集時，需要對間距的使用掌握得當，合理的利用間距留白，能將信息更高效的傳達給用戶。
文字、圖形、色彩是UI設計的三大組成元素，間距即是這幾種元素結(jié)合的媒介，如何通過間距給用戶帶來更舒適的視覺體驗是設計過程中極其重要的一環(huán)，那么你所理解的間距到底是什么、有什么作用、如何合理有效的使用？筆者進行了整理總結(jié)，通過本篇文章揭曉。
一、間距在UI中的重要性
二、定義文字間距
三、定義元素/組件間距
四、定義模塊間距
五、間距的使用技巧及原則
六、結(jié)語
間距指的是界面各元素彼此相隔的距離，可以是文字自身的行距、與圖片、與組件、與模塊的間距，或是界面兩側(cè)的安全距離（如網(wǎng)頁的寬度為1920px，內(nèi)容區(qū)為1400px，那么安全距離為兩側(cè)各260px）等。
作為UI設計師，在設計界面的每一個元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調(diào)整間距，利用各間距之間的規(guī)律來組織界面內(nèi)容，確保信息的節(jié)奏性，給用戶輕松、預約的瀏覽體驗。
間距可以讓界面信息更有節(jié)奏，提升內(nèi)容的可讀性，還能通過不同的疏密程度來闡述各元素之間的關(guān)系，以吸引用戶的注意力，所以在控制界面間距時，一定要有“較真”的心態(tài)，任何一次的改動與調(diào)整都要先考慮清楚為什么，能給產(chǎn)品和用戶帶來什么。要做好間距，不能僅停留在視覺層面，需要進行多方面思考。
設計師層面：規(guī)范的定義間距，不必每個元素都去考慮間距的大小，有效減少決策和思考時間，提升效率。
開發(fā)層面：開發(fā)可以按照基礎間距去定義變量，長期如此，雖然不能煉成像素眼，但僅憑視覺也能看出間距的倍數(shù)。例如基礎間距以8px增量，在使用8px、16px、24px、32px、48px...等，開發(fā)直接使用基礎間距x1、x2、x3...，以此類推，在開發(fā)眼中，肉眼定然看不出1px的差別，但卻能區(qū)分出8px的差距，不必每次都去測量，還能減少誤差，高度還原設計效果。
用戶層面：有節(jié)奏且具備一致性美感的界面效果，信息的有效傳遞變的輕松，用戶體驗能得到很大程度的提升。
設計規(guī)范的目的是提升設計師的工作效率、團隊之間的高效溝通、讓設計風格始終保持高度統(tǒng)一。同理，間距也是設計規(guī)范中非常重要的一環(huán)，它作為規(guī)范中的最小單元，如果沒有遵循統(tǒng)一，將會直接影響界面整體的版式和布局，信息的疏密程度嚴重影響用戶的瀏覽。不僅是設計師，開發(fā)每次面對同樣的模塊都需要定義不同的間距也是崩潰的，毫無規(guī)律可循。
統(tǒng)一的間距能讓界面的視覺效果更有節(jié)奏，設計師在設計某些相似的模塊時可直接復用組件，即便是多人共同完成同個項目或更換成員，也不會因間距不統(tǒng)一的問題造成整個APP的風格混亂。
對開發(fā)來說，如果清楚間距的使用規(guī)律，即便有小的誤差，也能自行更正，例如使用8px增量，8、16、24...按倍數(shù)規(guī)律以此類推，若出現(xiàn)9的間距，開發(fā)會更正為8、15則會更正為16，自行多退少補，雖然設計師需要細心、盡量不出現(xiàn)這種小的出入，但任何事情都沒法做到絕對，統(tǒng)一的間距能讓減少設計的出入以及與設計師之間的頻繁溝通，能進一步提高開發(fā)效率。
▲ 從上圖可以看出，間距不規(guī)范、信息就像一鍋粥，而規(guī)范的使用間距就能將信息自動分組。
文字是UI設計中非常重要的信息元素，雖然大多數(shù)設計師對文字的屬性比較了解，但在真實設計中總會因其他信息的干擾不能合理運用，與上線后的視覺效果預期相差甚大。文字的各種間距處理看似簡單，但實際上有很多因素要考慮，例如字間距、行高、段落等，下面帶大家一起了解。
字符間距一般都是設計工具的默認數(shù)值，無需調(diào)整。當碰到多行文字需要避開頭尾的標點符號時，使用工具中的避頭尾功能即可自動調(diào)整字間距，如無此功能，則需手動調(diào)整，這里并沒有所謂的技巧與方法，頭尾避開標點符號即可。
另外，在設計卡片、瓷片區(qū)的標題時，有時需要通過調(diào)整字符間距來提升界面的舒適度，間距數(shù)值自行定義，但相同層級的內(nèi)容標題字間距一定要保持一致。
行高是指上邊框+下邊框+字號的高度之和，這里主要針對多行文本。在平面設計中，行高沒有一定的標準，如無特別需要，使用系統(tǒng)默認的行高即可。
在UI設計中，文字會有5～6個不同的等級，為便于用戶閱讀，一般會設定行高標準，尤其是新聞資訊類型的應用本身就以文字內(nèi)容為主，不同的行高對文字的易讀性會產(chǎn)生較大的影響。
文字行高一般會設定為字號的1.2～1.5倍，具體值跟字號有很大關(guān)系，文字越小，行高就越大。例如，我們可以設定字號32px為中間值（非絕對），小于或等于32的字體、行高為字號的1.5倍，大于32的為1.2倍。另外，也可以直接將所有行高固定在字號的1.5倍，不難發(fā)現(xiàn)，字體越大其折行的概率就越低，試想一下，如果將48px的文字折成幾行，界面還能剩下多少空間？
文本段落間距的重要性在移動UI界面中并不明顯，更多體現(xiàn)在網(wǎng)頁設計中。需要著重糾正一點的是，部分設計師在設置段間距時習慣性的多敲一次回車鍵，這種方式并不可取，會造成間距過大、內(nèi)容脫節(jié)。
如有需要，一定要手動設置段間距，這里沒有固定的數(shù)值和規(guī)律，視覺舒適即可。筆者習慣將段間距設定為字號的0.5倍，例如字號為30、段間距為15，字號為40、段間距為20，僅供參考。
定義間距其實并沒有一個絕對的標準，主要取決于最小單位，例如4px、5px、6px、8px都是可以的，到底使用哪個數(shù)值還得根據(jù)產(chǎn)品自身定位及內(nèi)容組織形式，前提是所有間距都要遵循最小單位并基于倍數(shù)形成規(guī)律。
在設計界面時，需要利用間距來建立信息層級、提升瀏覽體驗以及表達各元素之間的關(guān)系，這就是為什么當我們打開新聞資訊、電商類應用會發(fā)現(xiàn)信息非常緊湊，而打開工具、社交類應用時感覺信息比較寬松。間距的基數(shù)越小、頁面就越細碎；基數(shù)越大、頁面的留白就越多，使用不同的基數(shù)，呈現(xiàn)出來的視覺效果也形態(tài)各異。
筆者在工作中通常以8px作為基數(shù)，以此衍生出8、16、24、32、48、64這6個間距數(shù)值，完全能夠滿足絕大多數(shù)的使用場景。當然，針對信息較少的頁面也會使用到120、160、200...其他間距數(shù)值，例如缺省頁、登錄頁面等。不難看出，上述以8px為基數(shù)定義間距數(shù)值時，沒有40、56這兩個數(shù)值，難道他們不是8的倍數(shù)嗎？我們以8和16做對比，后者是前者的2倍，其間距的變化尤為明顯；但如果用56和64做對比，后者是前者的1.14倍，其間距的差別微乎其微。敲重點，設計師在定義間距時，需要遵循倍數(shù)規(guī)則，但同時也要為考慮界面美觀及用戶的瀏覽體驗而跳出呆板的規(guī)則，當間距數(shù)值越大時，根據(jù)基數(shù)所跳躍的倍數(shù)就越大，其實設定字號也是相同的邏輯（后期詳解）。
從信息層級角度來看，等級權(quán)重越高、間距就越大，在現(xiàn)實世界中也是如此，一個物體周圍的空間越大，就越容易吸引人們的注意力。
模塊間距分為塊內(nèi)間距（同一模塊中不同元素或信息組之間的距離）和塊外間距（同一個頁面中不同模塊的之間的距離），為了更好的區(qū)分信息層級，塊外間距一定會大于塊內(nèi)間距，也能保持塊內(nèi)信息的親密性。
如下圖所示，將裝修序列步驟、官方攻略、常用服務等看作不同的信息模塊，每個模塊內(nèi)元素的間距都會比各模塊之間的間距小很多。
需要通過各元素的間距來體現(xiàn)出信息的關(guān)聯(lián)性，格式塔原理中的“接近性”原則告訴我們，相互靠近的物體被認為比相互距離較遠的物體更有關(guān)聯(lián)性，因此，相關(guān)聯(lián)的元素之間靠的越近，用戶越能感知到信息的關(guān)聯(lián)，同時更能了解整個界面中各模塊信息的邏輯關(guān)系。
很多時候，想讓一個元素變的突出，可以用加大字號、修改色值或后加粗等方式進行強調(diào)，但這并不是突出信息的唯一方式，當所有元素都變的突出，那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出，留白也是一種強調(diào)信息的方式，它能引導用戶將注意力集中在特定的內(nèi)容上。
善用柵格系統(tǒng)（上述有詳細說明），通過最小間距值進行遞增，讓整個界面看起來更協(xié)調(diào)。柵格系統(tǒng)可以讓設計師在元素的親疏關(guān)系上更快作出決策，后續(xù)不管是迭代還是更換設計成員，都能保持統(tǒng)計的間距規(guī)范。
這個問題在很多團隊中都是硬傷，甚至在設計驗收時還被直接忽略。在主流UI設計工具中，添加文本元素時，都會有默認行高，在前面的內(nèi)容中有講過多行文本的行高為字號的1.2~1.5倍，那么單行文字的行高到底是需要手動設置還是遵循默認，筆者認為都是可以的，但一定要與開發(fā)保持一致。
行高決定著文字邊緣與定界框的間距，而開發(fā)只能看到定界框與其他元素的間距。
1）默認行高
默認行高值會隨著字號的變化基于一定的倍數(shù)自動增減，需要將此規(guī)律或倍數(shù)告知開發(fā)，開發(fā)將此規(guī)則植入代碼方能最大化還原設計效果。另外在設計界面時，尤其是多組文字元素的上下間距，需要通過計算（文字邊緣到定界框的間距+文字元素間距=實際間距）或手動測量才能達到精準狀態(tài)，下圖為例：
2）手動設置行高
手動設置即字號是多少、就將行高設置為多少，確保文字邊緣緊貼定界框，在設計過程中調(diào)整間距時，無需計算，根據(jù)設計工具的智能提示調(diào)整即可。
在同一APP應用中，根據(jù)最小基數(shù)定義的間隔值數(shù)量不易過多，一般在6個左右就能滿足絕大多數(shù)的設計場景。例如以8px的基數(shù)為8、16、24、32、48、64等，以5px的基數(shù)為5、10、15、25、40、60等。數(shù)量過多會導致界面不同元素、模塊的間距差異化不夠明顯，數(shù)量太少無法滿足多元素、模塊使用場景，也會導致間距跨度較大。
設定間距值需遵循一個原則“數(shù)值越大、遞增的倍數(shù)就越大”。當相鄰間距值的差異化較小時，用戶很難感知到界面中信息之間的邏輯關(guān)系，我們需要根據(jù)柵格系統(tǒng)中間距值的增大、設置更大的區(qū)間值，讓相鄰間距值之間的視覺差異更加明顯。
當界面中的信息較為密集、間距不足以滿足信息的突出程度時，需跳出純粹的間距規(guī)范束縛，換種方式或許更好。例如：給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調(diào)整元素大小等，需知「此消彼長」的道理。
如果在處理界面信息層級時，改來改去還是覺得很亂，不防從間距角度出發(fā)，或許會有不一樣的收獲。雖然在剛開始的時候，規(guī)范間距帶來的效果甚微，但隨著團隊規(guī)模不斷擴大、界面數(shù)量越來越多、內(nèi)容越來越復雜時就會發(fā)現(xiàn)，所有內(nèi)容統(tǒng)一間距規(guī)范，不管是構(gòu)建一致性界面視覺效果、還是對開發(fā)和設計師來說，既能提升用戶體驗、還能提高團隊的工作效率。
間距是否規(guī)范使用，決定著界面是否規(guī)整、信息傳達是否清晰，即便如此，間距也只是解決信息層級方式的其中之一，切不可讓其限制設計師的發(fā)揮和思考空間。制定設計規(guī)范有助于項目的高效運轉(zhuǎn)，間距也好、色彩也罷，設計師依然需要從實際用戶場景出發(fā)，通過不斷的思考和經(jīng)驗總結(jié)，打磨出更合理、更符合項目需求的設計規(guī)范。
作者：大漠飛鷹CYSJ 來源：站酷
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在交互設計、用戶體驗設計中，每一個細小環(huán)節(jié)都至關(guān)重要。比如說，空狀態(tài) ( The Empty State ) 是許多應用程序設計開發(fā)過程中忽略的一點，卻也有著優(yōu)化用戶體驗、改善應用程序的潛力。
一.什么是空狀態(tài)？
空狀態(tài)：顧名思義就是空白的狀態(tài)，空狀態(tài)是對沒有數(shù)據(jù)頁面的補充，一種對零數(shù)據(jù)的設計形式（如下圖所示：無網(wǎng)絡、訂單為空、沒有關(guān)注的人以及無法連接網(wǎng)絡等等這些頁面就是所謂的“空狀態(tài)”。）
空狀態(tài)是APP設計中不可或缺的一部分，特別是新用戶初次接觸到產(chǎn)品APP時，必然會面對很多空狀態(tài)。
二：空狀態(tài)的分類
第一：根據(jù)空狀態(tài)產(chǎn)生的路徑，可以將空狀態(tài)分為3類
系統(tǒng)層：本地請求異常；如：無網(wǎng)絡、服務器異常等
信息層：請求成功，數(shù)據(jù)異常；如內(nèi)容已刪除、已下架等；
空白層：請求成功，無數(shù)據(jù)；最常見的空頁面或空狀態(tài)；
第二：根據(jù)空狀態(tài)的出現(xiàn)場景又可以將其分為4大類：
初體驗：初次注冊登錄的用戶很多功能都沒有熟悉
無信息/無結(jié)果：某些功能還未使用過
完成任務：完成某項功能后反饋的結(jié)果
出錯：因為各種原因?qū)е碌腻e誤頁面
初體驗時，根據(jù)不同的產(chǎn)品，我們可以為用戶提供不同的引導
· 創(chuàng)作平臺→引導用戶創(chuàng)造內(nèi)容、推薦相關(guān)內(nèi)容、開啟權(quán)限……
· 工具類app→介紹相關(guān)功能、添加相關(guān)人、相關(guān)功能……
·學習類app→收集用戶目標、推薦相關(guān)課……
無信息/無結(jié)果時，告知用戶該如何解決問題，或者給用戶其他選擇
·購物車為空時→讓用戶購買或者給用戶推薦商品
·無收藏時→應到用戶去收藏
·搜索為空時→告知用戶換一個詞試一試
·無評論時→讓用戶搶個沙發(fā)
任務完成后，鼓勵或獎勵用戶
·郵件全部回復完→祝用戶擁有美好的一天
·書看完時→讓眼睛放松一下
·打卡成功→獎勵用戶勛章等等
程序出錯后，緩解用戶情緒，告知用戶解決辦法
·網(wǎng)絡出錯→檢查網(wǎng)絡/刷新頁面
·404頁面→讓用戶反饋情況到后臺、報錯等
三：設計空狀態(tài)頁面的好處
據(jù)調(diào)查顯示：“平均下來，APP在被下載之后的前3天時間里，日活躍用戶(DAU)數(shù)量下降了77個百分點。30天內(nèi)，下降比例達到80%”。用戶會嘗試多個同類APP，然后在接下來的3到7天內(nèi)決定其中的哪些不合適。這時候就需要通過更多好的設計和體驗來留住用戶
當然一個產(chǎn)品的好與壞不能全靠空狀態(tài)，但是空狀態(tài)對于新用戶的留存是很重要的。
Spotify的用戶體驗專家Tamara Hilmes提醒設計師們時說，空狀態(tài)是一個展示產(chǎn)品個性化的機會，因此，在進行空狀態(tài)設計時，需要認真考慮品牌和用戶的目標和背景。
四：空狀態(tài)設計原則
4.1基本原則
準確：空狀態(tài)需要清晰明確地將當前系統(tǒng)狀態(tài)傳達給用戶
直觀：簡言之就是畫面要“小而美”→簡單
高效：提供用戶快速有效地擺脫空狀態(tài)的方法
準確
準確原則要求在文字描述上做到清晰地闡述系統(tǒng)當前的狀態(tài)。
下圖為例，如果僅以“獲取不到數(shù)據(jù)”作為收件箱空狀態(tài)提示文字，用戶不清楚是系統(tǒng)異常、網(wǎng)絡異常還是僅僅因為收件箱沒有郵件而出現(xiàn)當前狀態(tài)。準確地將系統(tǒng)狀態(tài)及操作結(jié)果告知用戶是空狀態(tài)設計中十分重要的目標。
特殊原因?qū)е碌目諣顟B(tài)，也可以在附加文字中告知用戶其原因，例如郵箱賬號未登錄而導致收件箱為空的情況。
直觀：
空狀態(tài)不僅要講究視覺的美感，還要講究體驗的“美感”，要讓用戶在不用思考的情況下， 獲得最大的價值，
高效
若空狀態(tài)在系統(tǒng)中可以通過觸發(fā)操作離開，建議在空狀態(tài)的文字或操作上進行展現(xiàn)。
以站內(nèi)信空狀態(tài)為例，系統(tǒng)存在用戶可執(zhí)行的解決方案，在設計上也要體現(xiàn)。上面提到的賬號未登錄導致站內(nèi)信為空時，考慮附加文字提示‘登錄賬號即可開始’。若系統(tǒng)存在直接觸發(fā)操作的方案，可通過鏈接或按鈕的形式提供入口給用戶，便于用戶快速有效地回到功能主流程中。
4.2進階原則
有趣：有趣又易用，符合用戶的心理預期
品牌：介紹并強化品牌元素，通過恰當?shù)姆绞?、形式呈現(xiàn)
記憶：有創(chuàng)意或幽默色彩，呈現(xiàn)形式新穎，體現(xiàn)專業(yè)同時創(chuàng)造正面情緒
有趣
空狀態(tài)的設計在滿足了基本的設計原則后，還可根據(jù)產(chǎn)品的品牌特征進行優(yōu)化。一般對空狀態(tài)的圖片、文案來著手進行品牌化設計。
采用含著關(guān)懷情感的文案“哎呀，網(wǎng)絡好像出了點問題”代替“網(wǎng)絡未連接”這樣冰冷無感情的提示文字，同樣達到告知用戶系統(tǒng)狀態(tài)的目的，但修改后的文案明顯更能貼合服務工具型軟件的品牌形象。
同時結(jié)合文案主題，用有趣的插畫吸引用戶，達到緩解用戶焦慮、負面情緒的目的
例如下圖的刷新一下試試，企業(yè)IP作為粉刷匠在刷新Wi-Fi，比起一個失聯(lián)的行星就更有意思
品牌
當空狀態(tài)滿足了用戶的基本需求后，就可以考慮如何樹立品牌形象了！
目前最簡單且有效的辦法是——企業(yè)IP+插畫+文案，雖然被很多人吐槽套路、片面，但是作為剛起步的創(chuàng)業(yè)類的app，這不失為一種好辦法
設計專屬吉祥物形象，對產(chǎn)品進行擬人化表達，避免極其復雜的插畫，保障界面簡潔明快；
由于插畫不可交互，盡量與背景融合為一部分，避免使用明亮的色彩，誤導用戶點擊。
記憶
文章的開頭講過，空狀態(tài)對留住新用戶有著很關(guān)鍵的作用，那么空狀態(tài)在用戶使用的幾秒鐘內(nèi)一定要給用戶留下足夠深刻的印象才有可能留住這些新用戶，所以空狀態(tài)一定要有新意，甚至是要給用戶出其不意的視覺感受，這個階段考慮的問題要更多一些，受眾人群的特點、品牌的調(diào)性、想要達到的效果、解決問題的手法、還要注意對用戶而言是否直接有效并且準確。
阿里旗下“躺平”app的空狀態(tài)打破常規(guī)，非常優(yōu)秀的抓住了用戶人群的特性，解決了用戶的需求的同時，還給用戶樹立了非常深刻的品牌印象。
產(chǎn)品所有能傳遞情緒的場景都應該與品牌情緒一致。采用負面情緒的空狀態(tài)有一定風險，可能會起到消極作用。
用戶更容易代入場景化的故事，產(chǎn)生情感共鳴。構(gòu)思場景，需研究產(chǎn)品目標用戶群的特質(zhì)，設計他們的共同回憶，將有關(guān)的場景、片段、元素進行拼貼、組合、關(guān)聯(lián)，再找到最能勾起情緒沖動的突破口，豐滿場景。
避免正面刻板的形象（一眼就能看到底的設計），盡可能簡單有趣、不落俗套，讓用戶看到這個畫面后可以有更多想象的空間，從而吸引用戶，驅(qū)動用戶的好奇心。
五、總結(jié)
簡單總結(jié)了一些設計空狀態(tài)時整體的設計流程，如下：
功能入口：提供相關(guān)功能的入口和動作按鈕，解釋服務的功能和優(yōu)點，引導用戶到其他頁面查看內(nèi)容
標題文案：說明當前狀態(tài)，解釋當前問題出現(xiàn)原因，介紹功能概要
解說文案：如何走出當前狀態(tài)，如何解決當前問題，補充說明功能的屬性
推薦數(shù)據(jù)：提供熱門數(shù)據(jù)、個性化推薦數(shù)據(jù)讓用戶選擇；如電商搜索無結(jié)果、購物車等頁面，推 薦用戶感興趣的商品，能有效地提升購買轉(zhuǎn)化率
操作引導：提供相關(guān)操作的示意和引導，讓用戶能刪除或替換內(nèi)容
完成指導：送上任務達成的祝賀語，鞏固用戶的成就
細節(jié)備注：
文字和圖形一樣，也是一種情緒的載體，注意文字的魅力，加注重文字的情緒表達，更易調(diào)動觀者的心。
避免命令的、指使的語氣，盡量使用輕快的、戲謔的、娛樂式的語氣，婉轉(zhuǎn)傳達用戶可以去做什么；
避免傻瓜式的敘述、空洞的鋪陳，描述詞風格應該匹配產(chǎn)品調(diào)性；
如果出錯了，提供一個解決辦法
反問開場，可以調(diào)動用戶情緒，嘗試錯愕驚訝、夸張的口吻，會使情感更生動
作者：木子淺談 來源：站酷
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://sillybuy.com