<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          


          
    
  
    
          
    
                    首頁
    
          
              
          
            
            
          如何設計好消費向app產品
          
            
          
               純純                                            
          
            
          
    本文算是一篇產品分享文吧，主要科普一下消費向內容在KillTime方面都是怎么玩的。

          

          
    
          

          

          
    
          

          

          
    Part I - 消費向產品及其發展科普

          

          
    大家看上面那句英文，我用的是“Spend Oriented”，Spend這個詞本身是一個偏中性的詞，不光有花錢的意思?！跋M”一詞其實如果大家去查它的原始定義是指“利用社會產品來滿足人們各種需要的過程”今天在這里說到的其實是“用戶在上面消費內容”的app產品，這個內容可能是圖文，可能是流媒體。也就是說，今天講的app都和“Kill Time”有關。

          

          
    那我們不妨先來看下面三頁ppt：

          

          
    
          

          

          
     

          

          
     

          

          
     

          

          
    1.消費向產品的演變：

          

          
    我大概把今天要講的消費向產品分為四類，第一類游戲略過就還剩三類：

          

          
    a.圖文Feed類app產品：

          

          
     

          

          
    這一類產品其實是經歷了從門戶到app的演變的，早期互聯網時代，所有的圖文內容都在門戶網站上，這時候的門戶網站比如新浪搜狐網易，他們其實是內容為中心，用戶圍著內容轉，用戶會自己去挑選甄別自己想消費的內容進行消費。

          

          
    
          

          

          
    然后從門戶到app的過程中，最開始比如搜狐新聞app他其實是一個從門戶到app的純移植，他的本質沒有變化，還是以內容為中心，用戶圍著內容轉，不過后來隨著移動互聯網的發展，因為移動端的特性是“高頻多次”，他就不像門戶我只能上班的時候坐在電腦面前看，移動端的特性決定了我無論拉屎還是乘車，隨時隨地打開都可以看，那這個時候如果還是內容為中心，用戶每次進來都需要進行一個很長時間的甄選內容的過程，真正消費內容的時間就相應的會被壓縮，這時候就有了整個新聞移動端app產品從“內容為中心”到“用戶為中心”的轉型。第一次有了用戶中心的概念，比如有了賬號系統，用戶可以收藏點贊（Mark）一些的自己感興趣的內容，然后通過用戶的點贊閱讀點擊行為進行推送和訂閱：

          

          
     

          

          
    除了新聞門戶之外，還有一類圖文產品就是興趣聚合，最開始大家會發現都是一個產品主公一個方向，大家想看什么內容就去相應的地方：比如天涯貓撲就是一個講故事和段子社區，榕樹下主攻青年文學，虎撲是體育相關。大家在自己垂直的領域發展，互相也不怎么干涉。但是這些UGC平臺的本質還是生產者，是人，隨著每個平臺都有自己的大V出現之后，網易推出了博客，這是一個以人為中心的分發結構的產品，除了以人為中心的分發結構外，百度心里想，不是之前的門戶都很垂直么，那我是不是可以建一個平臺，讓各種興趣在我這里以”吧“的形式聚合？于是就有了一個興趣內容聚合平臺”貼吧“，然后隨著發展，大家發現博客這種東西用戶消費成本太高了，一個大V一篇文章好幾千字，生產內容也費盡，用戶看著也費盡，那不如就做一個微型博客更多的讓人發聲就好了，于是有了微博。

          

          
    △.既然說到這個了，在這里多扯遠一點，其實互聯網發展的進程都是這樣，繞不開平臺和垂直，大家想想五六年前的電商產品是不是一個道理，當年只有淘寶一家是平臺，其他的，比如京東主攻家電，一號店是零食，聚美是化妝品，美麗說蘑菇街則是衣服（蘑菇街主打職場美麗說主打校園）

          

          
    
          

          

          
    b.泛娛樂類類產品 & c.工具類產品：

          

          
     

          

          
    泛娛樂類產品我這個框子畫的很大，大概最初的原型是為了解決我們“聽歌”和”看視頻“的需求，然后最開始的幾大門戶大家都知道優酷土豆、騰訊視頻、愛奇藝、搜狐視頻、樂視等等。最開始那幾年互聯網基礎建設不行嘛，科技也沒發展到位，所以那時候視頻清晰度都好低，而且下載率非常高，大家一般消費內容會采用”在家wifi先下好然后再看“這樣的辦法，但是隨著基礎設施的加固，大家發現流量好便宜，這時候在15年才開始有網紅直播這一塊的業務出來（游戲直播是很早就有的哈），我個人會認為催生網紅直播產品的歸因是科技進步流量不花錢了。隨著網紅直播類興起的另一類產品就是短視頻類，我個人認為短視頻產品的出現本質歸因除了流量不花錢了之外，更多的是解決之前門戶視頻網站內容消費成本過高的問題，眾所周知，現在人越來越懶了，一集電視劇40分鐘，很難坐得住不分心的看完，所以現在視頻app出了倍速播放。這本質的原因是用戶消費內容的High點（達到滿足的點）越來越高了。

          

          
    再說聽歌這條線的演變，最開始聽歌，然后唱吧、全民K歌，國外的Starmaker等等出來做了唱歌app，這時候的app本質是一個工具，但是用戶UGC內容的時候沉淀了很多作品在這些工具app里，所以這一類產品就開始做去工具化，變成了一半社交一半工具的產物。另外K歌產品火了之后，才有的FM類產品，因為都是消費音頻和音頻直播嘛有共性在這里就不展開了。最后就是這類音頻產品不滿足只做音頻，所以就開始做視頻了，這就導致你現在打開全民K歌或者唱吧或者國外的好多app，你會發現只要是娛樂產品都有短視頻的原因。

          

          
    
          

          

          
    2.消費向產品的核心目標：

          

          
     

          

          
    GNT是一個羅振宇2016年年終演講時候提出的詞，我們假設平均每個人每天8點到家到晚上12點的時間是可支配時間，那中國網民每年新增數量（今年是1000w）已經穩定在和出生數量一樣了，所以我們認為網名總數不太會有啥變化，比如之前我用三個小時在優酷騰訊愛奇藝上看電視劇，一個小時聽網易云音樂，現在我大概只用一個小時看電視劇其他三個小時都在刷抖音，這時候，大家會發現消費向產品的決戰維度就不是自身的垂直領域了，之前我們會認為視頻門戶哪家片源優質哪家就牛逼，現在不是的，現在的產品除了垂直比較之外更多的競爭是在時間維度的較量，這是為什么抖音這種產品突然一下很火的原因，我稍后會著重說抖音這里就先略過了。

          

          
    3.為了占用更多的用戶時間，設計師可以發力的點：

          

          
     

          

          
    內容源是否優質（這里的”優質“指的是內容和用戶的March值）其實是用戶是否消費的最大的一個指標，因為內容源和用戶的March值主要反映在下面的前兩個問題中：

          

          
     

          

          
    給用戶展示什么內容？

          

          
    這些內容的優先級是怎樣的？

          

          
    這兩個問題一般我們設計師并不能控制，關于什么時間什么環境下給用戶展現什么內容，往往跟用戶歷史行為和算法有關，如果大家看了頭條的算法公開課大家會知道頭條的推薦算法其實是有三大類（內容維度、用戶側特征、環境特征）幾千萬個向量特征去控制的，如果不是純算法推薦也會有運營去干預內容的露出，所以這部分其實設計師可以干預的比較少，我們真正可以干預的東西是后兩個問題：

          

          
    如何讓用戶迅速找到自己感興趣的內容進行消費？

          

          
    ——這就涉及到內容源呈現方式的抉擇問題。

          

          
    如何盡可能的降低用戶消費內容時的交互成本？

          

          
    ——這就涉及到兩個問題，一是從交互上讓用戶盡可能沉浸消費，二是交叉推廣和分流的問題。

          

          
     

          

          
    
          

          

          
    Part 2 - 消費向內容的主流呈現形式：Feed Flow

          

          
    △.誰能告訴我一下Feed Flow（我們工作中所說的”Feed流“中文怎么翻譯？Orz...）

          

          
    
          

          

          
    1.RSS vs Facebook's New Feed

          

          
    如果大家是一個早期互聯網民，一定聽說過RSS的概念:

          

          
    RSS (Really Simple Syndication簡易信息聚合協議)是一種的工具，使得用戶可以在客戶端借助于支持RSS的聚合工具軟件，在不打開網站內容頁面的情況下閱讀支持RSS輸出的網站內容。舉個栗子：如下圖所示，小張在pc時代，每天會定時打開華爾街日報網，ChinaDaily，王老三的博客看里面的內容，但是每天都打開三個網站讓小張覺得很煩，這時候借助RSS工具，他可以把三個（支持RSS協議的）內容源聚合到一個第三方的RSS工具上，這樣他就不用每天反復打開三個網站了，除了獲取這三個網站的陳舊內容之外，這三個網站每天的更新內容也會被實時呈現在這個RSS中：

          

          
     

          

          
    一個RSS聚合工具內，每一個單條內容源，就稱為Feed（取的是滋養的意思，就是源源不斷的滿足用戶消費需求的含義），那早期的Feed序列大家也看到了是從RSS衍生出來的概念，Feed流的排序也是用戶定義的，比如可以按照Timeline排序，或者是按照用戶自定義Tag聚合，或者是按照interest標簽（收藏，喜歡，點贊都屬于泛意義上的interest），那大家就明白了，RSS里的Feed流本質上是一個用戶自定的，關于內容收集的工具而已。

          

          
    到了2006年，我們的爸爸Facebook開始做社交，因為Facebook是人和人的關系聚合，其實當時Facebook就借用了Feed的概念，創造出了以“關注Follow”為核心的新型Feed，在書上（我忘記是哪本書了）把它稱為Facebook‘s New Feed，它其實有三個特征：

          

          
    1、內容源從URL到人的狀態（其實本質也是一個一個URL序列）。

          

          
    2、不僅僅是Timeline的基礎排序，更多的指標參與進來決定內容排序

          

          
    3、訂閱內容中夾雜費非訂閱內容（參考微博），讓用戶永遠刷不完沒有盡頭的消費

          

          
     

          

          
    上圖是RSS和Feed的對比。

          

          
    到了今天，其實幾乎市面上所有消費向產品（新聞類、微博、Instagram、Snapchat、短視頻、等等），都在Facebook New Feed的基礎上進行了改進，所以今天我們把這種New Feed更習慣的叫做Feed，大家可以去PM社區之類的搜Feed能發現一堆文章可以閱讀，在這里就不贅述了。

          

          
    
          

          

          
    Part 3 - 匹配、分發與消費

          

          
    知道Feed的概念能方便我們理解接下去的問題，還記得接下去是什么問題嗎？

          

          
    1、如何讓用戶迅速找到自己感興趣的內容進行消費？

          

          
    ——這就涉及到內容源呈現方式的抉擇問題。

          

          
    2、如何盡可能的降低用戶消費內容時的交互成本？

          

          
    ——這就涉及到兩個問題，一是從交互上讓用戶盡可能沉浸消費，二是交叉推廣和分流的問題。

          

          
    
          

          

          
    1.先分發，再消費的app模型：

          

          
    我們不妨先來看主流的Feed分流的兩種模式：

          

          
    一種是微博這樣的關注序列插入非關注序列（推薦、廣告等），另一種就是關注序列瀏覽完用戶拉不出新Feed的時候有個分流按鈕提示，別小瞧這個小提示，往往能帶來每天5-7%（我自己的工作經驗數據）的新模塊引流。

          

          
     

          

          
    
          

          

          
    再說用戶迅速找到自己感興趣的內容進行消費的問題，這里就涉及到內容源的呈現方式。我之前唱吧的那篇文章舉過這樣一個例子：

          

          
     

          

          
    唱吧7.0到8.6的三次改版犧牲了展示效率（從7到5）HighLight了文字信息，是因為我們發現圖片信息不足以讓用戶做興趣判斷，大家看下圖就明白了：

          

          
     

          

          
    快手的圖片本身就是內容的簡略呈現形式，大家可以基本通過圖片來得知里面的內容大概是什么，如果遇到用戶難以判斷的，快手在用戶上傳視頻的時候鼓勵用戶打字說明，比如大家能看到圖中的紅字，就是說明視頻內容的。這樣的話，用戶通過圖片能清晰得到點擊之后的內容預期，比較符合用戶心智。大家再來看唱吧，大家會發現圖一圖二圖三都是漂亮的小姐姐，這個就沒辦法告知用戶里面的內容究竟是啥樣的，那支撐用戶點擊進去的除了顏值之外，更多的可能是歌名，和這個人的歌手等級，收聽量這樣的數據才能支撐用戶點擊。唱吧這么改之后我印象中模塊CTR是有明顯的提升的，但是具體數據我離職太久忘記了...

          

          
    所以其實內容源的呈現方式本質上和內容相關，這里的UI應該以“如何讓用戶迅速找到自己感興趣的內容”為核心設計目標去設計，具體問題具體分析咯~

          

          
    
          

          

          
    再來說常見的消費向內容的交互模式，最常見的就是Push&Back的模式：

          

          
    所謂Push&Back就是用戶一次點擊進到詳情頁消費內容，看完之后再點擊返回回到Feed列表，然后繼續在列表里尋找下一個想要消費的內容的模式，比如下圖：

          

          
     

          

          
    傳統的Push&Back交互成本太高，用戶看完之后需要點擊返回，然后瀏覽內容列表選擇自己想看的，然后再次點擊進入。這種就是很難達到沉浸式消費，用戶跳出率和關閉率都比較高。

          

          
    于是有了另一種模式就是讓用戶不跳出，直接挨個在當前Feed下的內容：

          

          
     

          

          
    舉個例子就是知乎的“下一個回答”點擊按鈕和下拉交互，以及微博的視頻關燈流：

          

          
    這種模式使得用戶在消費內容的時候交互極其便捷，輕輕滑動或者一次點擊就可以消費下一個內容，大大增加了沉浸的消費體驗：

          

          
     

          

          
    關于如何盡可能的降低用戶消費內容時的交互成本這個問題，上面這一種辦法，其實還有另一種，就是所謂的交叉推廣，大家看下面這個圖，前兩張是頭條Feed，后三張是陌陌：

          

          
     

          

          
    頭條點擊一個視頻后，下面會給你推和這個視頻相關的一些視頻（可能是內容維度相同都是做飯的，可能是用戶側特征相同都是美女做飯，可能是環境特征相同都是教你明天中秋節怎么做月餅）讓你去觀看（而且你發現沒頭條iOS版本和抖音iOS版本都是默認隱藏statusbar的，你看不到當下幾點了，為的就是讓你一直看下去...）。

          

          
    陌陌這款產品就更有意思了，比如我點擊第二個入口（右1）進去，這時候有個上下滑動切換的交互，app的指示意是：“切換到下一個主播”，那按照常理來說，我松手之后，應該消費的是第三個入口（左2）的內容沒錯吧？但是你會發現事實并不是這樣，它其實跳轉到了一個全新的Feed序列，所以交叉推廣的概念如下圖所示：

          

          
     

          

          
    
          

          

          
    2.直接消費的app模型：

          

          
    上面我們講的都是先分發再消費的模型，它一定要有一個內容承載的Feed頁，然后用戶根據自己興趣去選擇性的消費內容。那本著：“降低用戶消費內容時的交互成本”這個思路，有沒有可能去掉分發這個步驟，不要內容承載頁，直接上來就讓用戶消費呢？這就是大家熟悉的抖音：

          

          
     

          

          
    Musical.ly（后改名Muse然后被抖音抄然后被抖音收購）這款app創造了一種直接消費內容的產品模型，這種模型有什么特征呢？

          

          
    1、交互成本最低，打開即消費，一次上下滑動即分流，左右滑動（或一次點擊）即分流，極強的沉浸性。

          

          
    2、依靠算法把很多Feed序列整合成了一個無窮盡的Feed，完全依賴算法和用戶行為數據、短視頻數據判斷展示優先級。

          

          
    我們不妨來對比一下“先分發再消費”和“直接消費”的兩種產品吧：

          

          
     

          

          
    “先分發再消費”類的產品，由于有一個內容承載頁，用戶可以選擇性的點擊消費，比較尊重用戶。而抖音這類產品呢，直接把內容強制用戶消費，本質上是帶有一定脅迫性質的。直接讓用戶消費內容的比如抖音類產品，不給用戶自主選擇的機會，脅迫用戶消費產品提供的內容，如果內容足夠優質的話會有奇效，如果內容差強人意，戳不中用戶的High點，則有可能適得其反。

          

          
    
          

          

          
    我認為抖音這種直接讓用戶消費內容的產品模型本身是一把雙刃劍。 

          

          
    
          

          

          
    大家玩了這么多app應該也能發現了，市面上殼子抄抖音的產品現在特別多，大家會發現只有抖音好看，別的都是看一兩個就看不下去了想關掉，這里的原因就是因為用戶被脅迫消費你提供的內容。

          

          
    我們假設你是一家內容實在不怎么行的app，如果強行用抖音的模式，你第一個內容是一坨屎，用戶吃了一半滑動跳過了，這時候他發現第二個內容還是一坨屎要給他吃，用戶意愿會下降得特別厲害，甚至一兩個視頻過后就直接關掉了。但是如果是先分發的模型，里面都是一堆屎，但是我告訴你了，第一坨屎是草莓味的，第二坨屎是橘子味的，這時候用戶自己想消費哪一坨內容是他自己的點擊選擇，和你無關，你app設計者不用承擔脅迫用戶消費的風險，自然用戶對自己選擇的內容的容忍度也會高一些，可能不會看一兩個就關掉了，沒準兒會看四五個。這樣是不是瀏覽時長就增加了？

          

          
    
          

          

          
    給大家講一個理論性的東西吧，抖音內容的理想時間模型（名字是我自己隨便取的）：如下圖所示

          

          
     

          

          
    我們假設理想狀況下這個用戶沒別的事不會被中途打斷，只要想刷可以一直刷一輩子抖音，然后我們來研究內容質量和用戶瀏覽時長的關系：我們假設，每一個個體用戶都有一條平均匹配線Marchline（這個匹配可能是內容維度的比如我喜歡看dota不喜歡看lol，喜歡科普不喜歡雞湯等等），內容只要比匹配線高，對于我們的心智就是一個正向刺激（Positive）。

          

          
    我們假設每個視頻都是15s，大家會發現你們每天打開抖音的第一條視頻總是很優質（其實抖音最初冷啟動的時候準備的視頻都是1500-3000一條買的優質腳本之類的，花了幾千萬呢，所以這些優質視頻源奠定了第一波龍湖留存），如果第一個視頻總是很優質，用戶很喜歡，那心智就會上升，是一個正反饋，然后第二個視頻如果也很精彩，那就會把用戶推向high點，如果這時候第三個視頻一下子推了一個特別爛的或者沒算準給用戶推了一個用戶不是很中意的，理論上用戶交互成本很低，可能只看了一半劃過就行了，但是如果連續兩三次都給用戶推了很爛的內容，那用戶的負向刺激（Negative）越來越多，一半兩到三次就退出了。

          

          
    在這里面有一個我總結的思考就是，用戶的Marchline其實是浮動的：

          

          
    Marchline(new) = Marchline(old) + △Willing

          

          
    用戶每次打開app到關閉app的過程中正負向刺激的向量和。

          

          
    所以本質上抖音這種點開即消費的短視頻設計方法，是對自家內容極度自信之后的產物，記住抖音模型是把雙刃劍，如果你不是對自家內容那么自信或者不愿意花錢來砸內容，就盡量不要用抖音這種交互，很容易塞用戶一嘴屎得不償失！

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    3.一邊消費一邊分發的app模型：

          

          
    上文已經講過了快手（先分發再消費）和抖音（直接消費）兩種產品模型。

          

          
    他們各有利弊，但是在最近半年，熱愛創新的產品設計師們在短視頻領域讓我見到了眼前一亮的第三種模式，就是Instagram的旗下的IGTV（入口在Ins的右上角，也是一個獨立的IGTV app），它采用的是一種創新的一邊消費一邊分發的模式，可以說這個創新是很亮眼了，大家有空可以去下載體驗一下：

          

          
    
          

          

          
     

          

          
    這款產品默認打開是圖1所示，后邊的視頻是在播放的，這就滿足了直接消費，但是下面有一個推薦列表可以滑動選擇，滿足了分發，然后如果需要沉浸的觀看某個視頻，手指在圖1上下滑就會變成圖二，這就變成了一個完全沉浸式的抖音，和抖音的區別是抖音采用上下切換，IGTV采用左右切換，它最絕的地方是把消費屬性做到了極致，甚至在搜索或者在發評論的時候，后面的視頻也依然在播放。

          

          
    這就很好的解了交互效率和分發的問題，大膽預測IGTV的交互模式是明年短視頻、視頻直播、視頻社交抄的重點。（其實現在已經看到Azer之類的產品在大量采用這種交互了)

          

          
    總結一下吧，其實設計的本身在解決問題，只不過隨著時間的推進，大家的認知層次會逐漸升高，最初我們認為快手這種分發效率過低，于是抖音出來了之后大家都抄抖音，但是別的app沒有抖音這么好的內容，于是取了折中有了我個人認為更合適的IGTV這種交互模型。

          

          
    其實今天這篇文章想要闡述的一個思想是“目標導向的設計”，我們為了解決一個又一個的問題，在不斷解決問題的過程中交互一次一次的微創新，微創新到一定量就會變成一個大的創新。每次看到很多有創新的產品都會感覺到欣喜，作為設計師大家也可以多看一些app產品，大量的試用不同的app產品，然后歸類總結一下，相信也會有所收獲。

          


          

          
    文章來源：站酷   作者：Seany
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.           

          

          
    
          

          

          
    免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 

          


          
            
          
              
                評論(0)
                瀏覽(1578)
              
                          
          
          
          
                      
          
            
            
          app中的交互手勢和意符設計
          
            
          
               純純                                            
          
            
          
    
          
        
          
            
          
        
          
        
          
            PART 1 - 唐納德諾曼關于交互設計的可視性的基本原則 
        
          
        
          
            
          
        
          
        
          
            唐納德·諾曼所著《設計心理學1-4》一直被認為是設計行業經典，我在讀這一套書的時候最令我感到共鳴的不是后來被大家大書特書第四本《情感化設計》，而是第一本《日常的設計》，這本第一本書最精華的內容是闡述了交互設計的基本原則，這個原則無論是對工業設計中的人和物件交互，還是說是建筑中的人和空間交互都有很深刻的指導意義。
          

          
作為一名app產品設計，對于這幾個含義理解之后，融匯到app設計的情境下，會讓你對之前工作流中的『交互設計』有全新的認識。
        
          
        
          
            眾所周知，交互設計借鑒了心理學/設計/藝術和情感等基本原則來保證用戶得到積極愉悅的使用、情感和操作體驗。交互設計之所以可以成為一門學科，本質在于可交互，而可交互的前提，是可以被感知（這個我在app的視覺美成因分析那篇文章里面已經說到過了），那么被感知的方式，往往是和人的五感有關。
        
          
        
          
            觸覺，聽覺，視覺，味覺，嗅覺。只要能被人的五感所感知到，不論是和空間，和機器，和生活中的物件還是和人，只要發生五感的共情，我們就說是可以被交互的。（注意，本文中不考慮復雜多感交互，并且只考慮交互的一方是正常生物人。）
        
          
        
          
            在人的五感之中，本文依舊著重討論視覺，因為科學研究表明，在人五感的感知信息中，視覺視覺占比達到了驚人的83%。（其中聽覺11%，嗅覺、觸覺、味覺機加起來占比6%），而不管是什么設計，如果可視性不佳，都不能算得上優秀。
        
          
        
          
            唐納德·諾曼將交互的可視性原則歸納為和五種基本心理概念相關，這五中基本概念分別是：示能（Affordance）、意符（Signifiers）、映射（Mapping）、反饋（Feedback）和概念模型（Conceptual Models）。 
        
          
        
          
            
          
i.示能（Affordance） 
        
          
        
          
            示能的概念和內涵來源于吉普森（J. J. Gibson）。此外，關于有形物品如何傳達出人們與它們互動的重要信息，這個特性被吉普森命名為“示能”。
        
          
        
          
            "示能"這個詞，狹義的理解一下，是從可視性的角度明確了一個物理對象與人之間的關系。示能是物品的特性與決定物品預設用途的主體的能力之間的關系。示能的體現，由物品的品質同與之交互的主體的能力共同決定。示能的存在與否取決于物品和主體的屬性。
        
          
        
          
            還是舉那個諾曼最經典的例子，如下圖所示：
        
          
        
          
             
        
          
        
          
            從視覺上看這張圖，我們從以往的生活經驗聯想一種方形的，帶紋路的黃色物質，再配合長期的視覺線索，我們會知道這張圖上是一個木塊，那從我們的視覺線索上，知道這個木板很細，（應該）能夠輕易被折斷；而且很輕，（應該）可以輕易被搬走。這些就是我們通過視覺判斷這張圖上呈現的"示能"，而明確的我們和圖上這個木材的交互關系。
        
          
        
          
            那再看這張圖：
        
          
        
          
             
        
          
        
          
            我們通過生活經驗的聯想可以知道這是一個木門，為什么會區別這是木門而不是上面的木材呢？主要原因是因為這上面有個『把手』。在人的視覺中，有時候觀測物體的某項"示能"是清晰可見的，比如上圖那個木材可以被輕易搬動，而有很多物品的"示能"是不可輕易被感知的，比如上面那張木材的圖，我們就不能感知到這個木材是可以被『軸轉動』的。
        
          
        
          
            而這張門的圖上，大家想象自己是一個什么都不知道的野人，看到上面這個圖，只有一塊特別顯眼的『把手』，你作為高智慧生物，是不是應該去觸摸一下，并且企圖能夠與『把手』進行互動？
        
          
        
          
            所以總結一下，如果這個門上沒有把手，作為我們人類的認知而言，可能會認為這個門不能從外面被打開，但是如果這就是一個能從外面被打開的門，但是忘記設計外面的把手，那就意味著，這個物體"示能"的視覺通道被堵塞。（視覺通道被堵塞的"示能"可以被認為是一種"反示能"），"反示能"對交互作用是起到抵制作用的。也就是說，如果這個門是可以從外面被打開，但是我為了不讓大家從外面打開，我在設計之初不加從外面打開的把手，一定程度上就可以抑制大家從外面打開的這種行為。
        
          
        
          
            大家明白了么？
        
          
        
          
            所以為了更有效的展現某些物體的視覺可交互，示能和反示能都必須被揭示出來，即可被覺察到。如果示能和反示能不能夠被覺察到，就需要人為的把它們都標識出來，我們聽過一些有效的手段就可以做到，比如在直立的木頭一側加上一個『把手』，這個把手就是"木頭這種物體可以被人軸轉動"這種"示能"的一個提示線索，你只需要旋轉把手，稍加用力即可發現這個"示能"。
        
          
        
          
            所以，我們把這種揭示"示能"的符號、提示功能、線索、稱為『意符』
        
          
        
          
            
          
        
          
        
          
            ii.意符（Signifiers） 
        
          
        
          
            劃重點：示能決定可能進行哪些操作。意符則點名操作的位置。
        
          
        
          
            在我的文章《交互閑談02丨app中的非必要功能和用戶界面上的流量法則》中，我對app中的意符進行了自己的定義：
        
          
        
          
            用戶界面上的意義符號，簡而言之，就是一切用戶感知中可以點擊產生反饋的功能集合。 
        
          
        
          
            但是這是在以屏幕為介質的用戶界面中我個人下的定義，但是在實際生活中，人們尋找蛛絲馬跡，尋找任何可以幫助他們應對和理解的符號。任何可能標識出有意義的信息的符號都顯得非常重要。人們所需要的和設計師必須提供的視覺線索，就是意符。
        
          
        
          
            這就是為什么蘋果第一代手機出來的時候會被大家奉為圭臬的原因，他在視覺上示能和意符都及其突出，一塊屏幕和一個按鈕，屏幕用戶點擊滑動交互，按鈕用于點擊交互，學習成本很低。大家試想一下之前的塞班系統，左上角和右上角兩個按鈕是和屏幕左下方的功能和右下方的功能映射，雖然也很易于理解，但是當大家看到蘋果這么簡單的手機的時候，相信所有人都是驚訝的：
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            
          
           
        
          
        
          
            △.示能和意符的關系 
        
          
        
          
            示能揭示了世界上作為主體的人（這里只考慮人），如何與其他東西進行互動的可能性。
        
          
        
          
            一些示能是可視覺感知的，一些則是需要視覺之后聯想感知（即不可直接感知）的。
        
          
        
          
            意符指示能操作的位置。
        
          
        
          
            一些意符是生活中的符號、標簽和圖樣，如門上用符號標記的“推”、“拉”或“出口”，或指示所要采取行動的箭頭和圖示，或是朝向某個方向的手勢，或其他的說明。一些意符僅僅是預設用途，譬如門的把手，或某個開關的物理結構。
        
          
        
          
            劃重點：在設計中，（尤其是UI設計中）意符比示能更重要。
        
          
        
          
            示能和意符是本文中最重要的，下文會說到在app中的意符設計。
        
          
        
          
            
          
        
          
        
          
            后面的映射，反饋和概念模型內容我簡略說：
        
          
        
          
            iii.映射（Mapping） 
        
          
        
          
            有一些自然映射是生物本能的或者是文化賦予的，比如如按照通常的習慣向上移動手勢意思是增加，向下移動意味著減少，。當一系列可能的操作是可見的，當控制和顯示契合自然映射時，設備就會容易使用。（具體參考我寫的交互閑談丨01里面那個視頻手勢的例子）
        
          
        
          
            iv.反饋（Feedback） 
        
          
        
          
            反饋是控制論、信息論的著名概念。當我們做出了一個操作的時候，內心的預期是需要獲得反饋的，如果在一個該獲得反饋的地方沒有獲得反饋，人就會很疑惑，比如如果一個app的按鈕點擊之后沒有跳轉或者沒有新的變化，那么人就會呆滯，如果反饋不及時，人還有可能會放棄。（比如網絡不好導致的跳出率，比如一個不可點擊的按鈕做得太逼真用戶瘋狂點擊發現沒反應之類的 = =）
        
          
        
          
            過多的反饋可能比過少的反饋更惱人。設計拙劣的反饋可能是旨在降低成本，最糟糕的是不恰當的無法解釋的反饋。指手畫腳的人通常是正確的，但他們的評論和意見如此之多，嘮叨不停，會令人分心，而不是給予幫助。我記得很多年前（大概是2010年左右），還曾經見到過一款應用，用戶但凡點擊無效位置就會彈出一個Error的模態框，簡直是令我絕望。 = =
        
          
        
          
            v.概念模型（Conceptual Models） 
        
          
        
          
            概念模型通常是高度簡化的使用說明，告訴你事物是如何工作的。概念模型只要有用就行，不必完整或準確。概念模型通?？梢詮脑O備本身推斷出來，一些模型通過人與人相授，還有一些來自手冊。（比如app新版本中那些半透明箭頭加上文字的功能指引就是概念模型的一種，手游中一開始的新手指引也是。）
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            PART 2 - 屏幕的示能與基本的交互方式 
        
          
        
          
            
          
           
        
          
        
          
            一個人和一塊（未通電的）觸摸屏幕，在不借助道具的情況下到底能衍生出多少種交互方式？從五感出發去深入剖析的話大概分為：
        
          
        
          
            嗅覺：用鼻子聞一聞這塊屏。（發現并沒有味道）
        
          
        
          
            聽覺：用耳朵聽那塊屏發出的聲音。（發現并聽不到什么聲音）
        
          
        
          
            味覺：用舌頭舔一舔這塊屏。（誒有點咸？）
        
          
        
          
            視覺：用眼睛去看這塊屏。（這是一塊光滑的類似于玻璃的物體）
        
          
        
          
            你們發現了么，對于一個原始的屏幕設備，比如手機，我們忽略按鈕什么的物理按鍵，光思考那塊沒用通電的屏幕，如果你作為一個心智未開化的人（或者現在假設你就是一只猴），你真正對屏幕有建設的交互一定是在觸覺上，我這么說大家能理解吧。我們不妨換位思考一下下，你現在是20年一個準備做概念手機的交互專家，你去窮舉任何人和屏幕的交互，唯一有『肢體接觸』的方法就是用手指（或者腳趾）去觸摸，還有就是用舌頭舔。用舌頭舔會有口水，不利于屏幕的識別，萬一漏電了畫面太美不敢想。
        
          
        
          
            所以，結論是，人類看到一塊屏幕設備，這塊屏幕設備的視覺示能最終導向了，人和屏幕的交互手段被定位在觸覺上，而腳趾相對于人類來說沒有手指靈活，所以最終我們把交互規定到手與屏幕的交互（簡稱交互手勢）。
        
          
        
          
            觸覺：
        
          
        
          
            我們來窮舉一下手指和屏幕的交互方式：（圖片來自Graphicpear，中文是我自己加上的。)
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            不要糾結于圖，往下看，其實現今的所有的手勢交互，我們基本操作分為：
        
          
        
          
            一根手指：單擊、雙擊、長按、拖動、上下滑、左右滑。
        
          
        
          
            兩根手指：單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉。
        
          
        
          
            三根手指：單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉、捏按。
        
          
        
          
            四根手指：單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉、捏按。
        
          
        
          
            五根手指：單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉、捏按。
        
          
        
          
            雙手雙指：單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉。
        
          
        
          
            雙手十指：單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉。
        
          
        
          
            （上面寫的雙手雙指是指每只手出一個手指，比如你們在手機修圖時候的某些旋轉操作）
        
          
        
          
            其實你如果還要窮舉的話，還有雙手每只手一個指頭、雙手每只手兩個指頭、雙手每只手三個指頭、雙手每只手四個指頭這些奇怪的情況，但是由于現階段手勢足夠完成日常操作，所以日常的人和屏幕交互并沒有引入這些別的奇怪的方案。
        
          
        
          
            我相信隨著科技的進步和發展，其他的雙手的交互操作也會大面積的被引入進來，起碼我個人在看類似于黑鏡啊還有別的歐美科幻片的時候，不止一次見到了這樣的畫面。（我印象最深的是黑鏡第三季06，女主角操控手機方式是四指橫滑，然后胖大叔操作無人駕駛的騎車的時候是雙手旋轉打開一個屏幕，然后再通過指頭拖動目標完成導航交互。）這些電影里面反應的人的未來科技中蘊含了很多交互方法，大家可以看電影的時候多留意一下。
        
          
        
          
            有點扯遠了，回到手機app的交互手勢，（除開游戲以外）一般單指雙指即可解決。而先現今科技下，相對于大屏幕一些的平板電腦，無論是ipad還是Andriod廠商，都會引入三指，四指甚至五指的部分交互手勢。
        
          
        
          
            由于今天的主題是手機app，那我們下一部分就著重主要來說說手機app的交互。
        
          
        
          
            PART 3 - 手機app中的意符分析 
        
          
        
          
            
          
           
        
          
        
          
            在設計中，尤其是UI設計中，意符比示能更重要。
        
          
        
          
            理解這句話的本質是因為一塊屏幕上人需要設計圖形、按鈕、內容。去讓他完成一些具體事情，所以在屏幕顯示的軟件中的意義符號就需要有很深的引導性。
        
          
        
          
            還記得之前我的定義么？用戶界面上的意義符號，簡而言之，就是一切用戶感知中可以點擊產生反饋的功能集合。
        
          
        
          
            我們閑言少敘，先來看一個例子：
        
          
        
          
             
        
          
        
          
            如圖是喜馬拉雅FM的app首頁UI，我將從功能屬性、視覺焦點兩個角度，一排一排的進行分析：
        
          
        
          
            
          
        
          
        
          
            角度一、首先從功能屬性上進行分析： 
        
          
        
          
            第一層：NavigationBar上的意符為『消息』、『搜索框』、『歷史』和『下載』，本質上是以功能名字命名的意符，其意符的表現形式為圖片+文字。沒啥好說的，每一項映射到自己的功能詳情。
        
          
        
          
            第二層：Tab的分類共有『熱門』、『分類』、『康永來了』、『直播』和『廣播』，其意符的表現形式為文字，這里大家看到『熱門』標簽本身變成橘黃色且下面有一個橘黃色細線，這是兩個符號是通過這么多年的用戶教育之后形成的意義共識，意義為：當前頁面狀態。這里我有一個小問題，大家猜如果這時候我右滑界面（采取的交互手勢是單指向左輕滑），會發生什么事情？提供兩個選項：
        
          
        
          
            A、到『分類』頁面。
          
B、到『訂閱』頁面。
        
          
        
          
            詳細絕大多數人都能答對，這里的正確答案是A，滑動到下一個tab『分類』。大家只知其所以然，感覺這里的tab本身就是靠滑動手勢來控制的，但是更深層次的原因呢？為什么？
        
          
        
          
            這里涉及到一個滑動切換tab的遍歷解構，關于這個，我的網友@HoZiN老法師（大霧）的《淺議滑動Flick切換Tab導航 - 知乎專欄》這篇文章寫得很棒，大家可以去看看。在這里我做粗淺的解釋，在喜馬拉雅這個app中，『首頁』UI中的TabBar上的『熱門』、『分類』、『康永來了』、『直播』和『廣播』都是歸屬于當前BottomBar『首頁』的，所以我們在滑動操作的時候應從當前深度的最近層開始交互。
        
          
        
          
            如@HoZiN的下圖所示：
        
          
        
          
            
          
        
          
        
          
             
        
          
        
          
            如果用戶滑動這個頁面只能在首頁的5個tab之間切換，我們認為他是下圖的第一種，也即是在單一Bottom模塊下切換（Hozin將其命名為獨立Sub Navi切換，Sub Navi的意思其實也就是底部的Bottom navigation bar的意思，我上文中就直接簡稱BottomBar了，個人命名習慣而已大家能懂是這個意思就行），而另一種情況是有些app當滑動到最后一個tab，再右滑屏幕會進入到第二個Bottom模塊，既是下圖第二種的b-C和f-G的過程。雖然現在這種設計方式已經鮮有app在繼續使用了，但是我在2017年的今天仍然是遇到了一些。并且有個特別而精彩的地方在于，一般情況下，b-C和f-G的滑動切換Bottom模塊的這個交互往往是不可逆的。這點就比較有趣了，關于這個更深層次的原因可能是開發的原因，可能是產品沒法做到每一個Bottom都有tab，也可能是因為別的app信息架構方面的原因，在這里就不展開了。
        
          
        
          
            我們再繼續單獨看這個第二層：
        
          
        
          
            215b59510beda8012193a31bbb4d.jpg 
        
          
        
          
            是不是發現有一個奇怪的格格不入的叫做『康永來了』的東西混了進來？這里我就必須吐槽一下喜馬拉雅的產品設計團隊了，作為一個普通用戶，我本能的以為這個tab下一定是和康永來了有關的內容整合，放在這里是因為運營需要，這個其實在內容平臺上很常見，大家看QQ視頻和愛奇藝他們不也經常這么干，本身是一件無可厚非的產品推廣的入口常態，然后我滑過去了發現其實他是『每日優選』的一個頻道，只不過最近主推蔡康永的這擋音頻節目：
        
          
        
          
             
        
          
        
          
            如上圖所示，這個奇怪的『康永來了』的tab歸屬到的不是康永來了的音頻詳情頁，而是一個『每日優選』的列表頁，那我就認為這個設計是欠妥的。
        
          
        
          
            我為什么說這樣的設計欠妥，其原因如下：
        
          
        
          
            因為我確實是有幾個月沒有使用過喜馬拉雅了，我不記得『康永來了』這個位置之前是不是叫『每日優選』，還是之前首頁只有四個tag，這個希望有關注的讀者下方給我留言確認一下。
        
          
        
          
            那既然我不確定，我們不妨分兩種情況去分析：
        
          
        
          
            第一種情況：之前首頁只有四個tag，而新加了一個以具體內容ip產品名（比如康永來了也好，或者明天老羅來了也罷）作為顯示，實則是每日優選的一個強視覺tag，為的是引導用戶點擊具體ip產品之后看到每日優選的這個列表，從而為別的每日優選這個列表頁導流。（我認為對于一個成熟的產品團隊，不太可能是這種情況）
        
          
        
          
            第二種情況：之前首頁就有『每日優選』這個tag，只不過后來為了運營或者強視覺需求，改成了具體ip產品名。（我傾向于第二種假設）
        
          
        
          
            我猜測喜馬拉雅的團隊本質上是希望借助類似于康永來了這樣大的ip露出，通過從視覺上的突出（視覺突出這一點確實做得很好）從而博取用戶流量，然后讓用戶通過查看『康永來了』這個具象的興趣點tab，進入每日優選的這個列表，從而為別的每日優選產品導流。
        
          
        
          
            從文案層面來說『康永來了』確實比『每日優選』更吸引人，但是如果是我來設計這個地方的話，我個人傾向還是放一個每日優選的tag，畢竟這是所有用戶都能懂的語言，而康永是誰？這個問題畢竟不是所有人都知道的。
        
          
        
          
            如果實在是通過數據或者產品運營需求表示，我們需要強調『每日優選』的話，那我會把每日優選的視覺也做得像現在康永來了一樣突出，但是名字不能變，還得叫『每日優選』。
        
          
        
          
            那如果康永來了這個ip市場運營那邊吩咐了，確實需要持久強推怎么辦？
        
          
        
          
            辦法有，比如banner位就可以直接推，而且banner位可以直接跳轉到具體ip的詳情頁，路徑更加簡短，用戶馬上就可以購買，不像現在跳到的是一個每日優選的列表，用戶還得通過一次點擊才能進入詳情。
        
          
        
          
            還有另一種極端的情況，如果有一天運營同學告訴我，banner位不允許一直放康永來了，但是市場同學又告訴我康永來了這個ip很重要，需要長時間強推。那我的辦法可能是有以下兩種：
        
          
        
          
            第一種辦法是在第三層的最前面（必聽榜的前面）加一個獨立的康永來了tag，這樣的做法是開發成本簡單易行，但是不夠優雅。但是你連『小雅音響』這種智能硬件購買頁入口都放在上面了，多放一個運營強推ip也沒毛病啊。_(:зゝ∠)_
        
          
        
          
            第二種辦法雖然比較decent一些，是在第四層和第無層的中間開辟一塊很小的次banner位去放，如下圖所示:
        
          
        
          
             
        
          
        
          
            但是我個人是不推薦這種做法的，哪怕未來這個次banner可以擴展為多個次banner輪播我也不推薦，因為如果是這樣的話，用戶首頁第一屏留給『猜你喜歡』的內容展示就很有限了。
        
          
        
          
            總而言之吧，第二層tab的『康永來了』一定是一個待埋點考量的爭議設計。我只是提出我個人的見解，不一定對，大家切勿偏聽偏信。好了我們繼續往下看。
        
          
        
          
            第三層和第四層：圖片banner和分類頻道icon，其意符的表現形式為純圖片/圖像+文字，banner嘛這個沒啥好說的，通過自動左右切換的圖片告知用戶一些產品需要告訴用戶的信息而已。分類頻道icon我之前的幾篇文章里面都有提到一些，記得在我的文章里我說到的格式塔原理么，大家打眼一看這個分類頻道icon就知道右側還有一些，是可以滑動的。
        
          
        
          
            第五層和第六層：這個就更沒啥好說的了，就是一個常規的帶圖片的宮格列表（我習慣這么叫他們，你們想怎么叫都行）頁，其意符的表現形式為圖片+文字，右上角有點擊更多有一個向右的圖標表明是可以點擊跳頁的（具體參看我寫的分割線那篇文章）。到一個內容更豐富的item列表頁。那么我問大家一個問題，為什么猜你喜歡的這個圖片不也做成左右滑動的而要做成這樣固定展示6張的呢？
        
          
        
          
            這里主要是有兩方面的原因，第一是做成左右滑的話，屏幕空間最多只能展現三張半，不如現在這個展示6張露出得多。第二是有一個很有趣的交互上需要注意的點，大家看如下圖所示：
        
          
        
          
             
        
          
        
          
            我標記藍色線框的部分大家看到了沒，這個banner也是可以滑動，分類頻道icon也是可以滑動的，整個頁面Tab也是可以點擊跳轉的。這也就意味著，如果要執行tab滑動跳轉這個交互手勢，我想能采用的滑動熱如右圖紅色所示，區域本身就已經很小了。如果下面猜你喜歡也做成可以左右滑動的話，那么Tab的滑動手勢熱區面積更小了。如果真是那樣的話，那這個Tab就不該設計成可以滑動加載的。
        
          
        
          
            所以說嘛，app中的意義符號設計直接決定了這個app的易用性。不要亂來。
        
          
        
          
            第七層：這就是bottombar具體沒什么好講的了，也就是五個圖形意符，各自表示著自己的意義映射?，F在很多app中大家會發現有些底部是只有icon沒有文字的，有些是帶了icon也帶了文字的，帶文字的目的也是為了解決圖形聯想帶來的意義映射路徑多的情況。這個不多說了。來看第二個角度。
        
          
        
          
            
          
        
          
        
          
            角度二、從視覺上進行分析： 
        
          
        
          
             
        
          
        
          
            按照視覺強弱來看，『康永來了』、『banner』、『猜你喜歡』是頁面最重的視覺部分，其次是頻道入口icon和下面的Bottombar，最后是navigationbar上的小溪、搜索、歷史和下載。從視覺上看，其實作為內容平臺的喜馬拉雅設計的很贊，沒有任何問題。內容產品本身占有最強視覺強度，功能意符占有較弱視覺強度。這就是為什么猜你喜歡要用圖片+文字的宮格列表，不用類似于item之類的原因，因為比如這里的每一個節目都換成是一個item，那視覺只集中左邊的圖片上，而不像現在三張圖片這樣聚焦。
        
          
        
          
            最后拋出一個視覺上BottomBar的問題，現在很多app會在實心icon還是線性icon上面糾結，知乎的BottomBar一直采用實心icon，而Airbnb一直采用線性icon，到底為什么？
        
          
        
          
            我會在下一期的交互閑談里面說這個問題，大家也可以想一想，其實（如果我理解的沒錯的話）答案就在我上面這段論述中。
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            PART 4 - 手機app中的意符設計需要辯證的幾小點 
        
          
        
          
            
          
        
          
        
          
            一個擅長app中意符設計的人，本質就是對appUI設計有十足把握的人，關于這里的幾點辯證只是提出來說一下，具體的UI設計過程中這樣的問題不勝枚舉，大家可以留言交流。
        
          
        
          
            
          
        
          
        
          
            一、BottomBar上的意符到底要不要加文字？ 
        
          
        
          
            手機中可供點擊反饋的意符設計分為很多種，有純圖片的（比如banner），有圖形+文字的（比如BpttomBar上的那些），有純文字的（不如上文中喜馬拉雅的切換tab，比如『點擊查看更多』、『點擊展開』、『滑動加載』之類具有誘導性的文案），還有純圖形的『比如像『一個One』這樣的app底部BottomBar是只有圖片不帶文字的』，還有一些是按鈕形式的。
        
          
        
          
            在這些意符的設計中，意義識別是尤其需要被設計的。如果一個圖形無法表現他應有的意義，那就一定要在附近加上文字形成一個完整的意符。
        
          
        
          
            舉個例子：已下載這個icon已經被所有app用爛了，大家一聽就知道應該包含一個向下的箭頭，比如歷史記錄也是，大家都能想到是一個時鐘，這就是長期教育用戶之后用戶產生的意義聯想。所以喜馬拉雅和騰訊視頻中的這兩個意符設計，一個是帶文字，一個是不帶文字，都不影響用戶識別體驗。
        
          
        
          
            但是比如再舉一個例，『我的』圖標，現在大家都習慣用一個『人頭像』，而一切新奇的產品比如說『氧氣app』，才用的是一個圓圈，那么這個時候如果是意義識別為主導的產品（比如電商啊或者用戶不是那么年輕的）就會選擇在下面加上一行中文。這樣的話在圖形上發揮得再不易識別，也可以借助文字瞬間映射到。
        
          
        
          
            那比如像『一個One』、『Medium』和『500px』這樣的眾多app，他們的BottomBar都是一個純圖形：
        
          
        
          
             
        
          
        
          
            純圖形帶來的其實是一種新奇感和簡潔的設計感。相對的，和用戶需要花更長時間的視覺判斷，比如第一張圖是『一個One』，第2，3，4個icon其實很易識別：一本書，一個音符和一個播放三角能夠很簡潔的代表文章，音樂和視頻。第二張圖相對就沒有那么容易識別了，尤其是第三個圖標，意義指向不明確，但是由于Medium是一個國外設計師聚集的網站，所以其實也還好，設計感在一定程度上會優于識別也沒問題。圖3是500px，這5個icon就更易識別了。
        
          
        
          
            所以，如果你采取無文字的BottomBar，那么請UI設計師用心設計你的icons。
        
          
        
          
            
          
        
          
        
          
            二、設置引導用戶點擊加載的意符應該如何設計? 
        
          
        
          
            有一個app需要設計這樣一個功能：文字默認折疊展示3行，但是點擊之后需要（非跳頁）加載全文，那么請問需要設置怎樣的意符引導用戶點擊？
        
          
        
          
            傳統的大概是三種方案：
        
          
        
          
            第一是在文字第三行的前四個字用其他顏色（比如藍色）標記為『加載更多』，用戶一點之后加載全部（早期知乎的做法）。
        
          
        
          
            第二種是在文字第三行結束之后再第四行的位置居中放一個『點擊加載更多』，用戶點擊之后加載全部。
        
          
        
          
            第三種是在文字第三行結束的位置放一個省略號即可，用戶閱讀之后發現沒讀完，自己會嘗試點擊。
        
          
        
          
            顯然，第三種方法僅適合社區類app或者貼吧或者問答類app，因為一般用戶讀都很難讀完，更別說給你點擊一下了。第一種和第二種也是見仁見智，一般情況下我個人推薦第一種，因為需要文字折疊成三行的頁面就說明本身畫面排布很緊張，就不要另起一個第四行放『點擊加載更多』了。
        
          
        
          
            
          
        
          
        
          
            三、app中的按鈕設計，什么時候應該有push色，什么時候應該沒有? 
        
          
        
          
            這是我的微信公眾號后臺有一個小伙伴的提問，push色這個東西在網頁上有別的更多作用，但是在app中，一般就只用來反饋行為。
        
          
        
          
            有兩種情況：
        
          
        
          
            第一種是你點擊某個意符，這個意符發生變化（顏色或樣式變化）同時跳轉。
        
          
        
          
            第二種是你點擊某個意符，這個意符完全不發生變化但是頁面跳轉。
        
          
        
          
            從用戶期待每次行為都得到反饋的心理上來說，我們當然希望所有的意符都能呈現及時反饋以證明你的點擊行為是有效的（也就是上面的第一種）。但是有時候由于反饋動效我們寫得不盡如人意問題，我們看到冗長（哪怕只有半秒）切重復的的反饋內心就會就會很煩。
        
          
        
          
            舉個例子比如原生安卓的Material Design點擊每個item都會出現一個水波動效反饋，當然原生Material Design的動效是足夠優秀的，所以我們會覺得很有新奇感。但是你們如果試試把安卓的這個動效拉長別說一倍，拉長三分之一。你們一定會崩潰的相信我。
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            PART 4 - 總結 
        
          
        
          
            
          
        
          
        
          
            1、app產品設計和UI的設計中，意符的設計是當眾最重要的一環，因為每一個意符作為產品的功能入口和行為入口，它們不光光是產品的流量節點。更是app產品信息架構的核心提現。
        
          
        
          
            2、在設計app的意符的時候，要更多的考慮到意符所蘊含的具體交互手勢（比如喜馬拉雅的tab bar就包含了滑動和點擊）以及具體的對用戶行為的思辨。
        
          
        
          
            3、app中意符的設計一定是框架層面的設計，他的本身視覺層級不易過高，最好不能超過app主體信息。
        
          
        
          
            4、意符的意義映射要盡可能的單一，最好能讓用戶一眼就了解這個意符是代表什么功能什么意義。
        
          
        
          
            5、app意符的觀察、分析、設計是一個長期的過程，大家可以試著多問自己一些為什么。
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            文章來源：站酷   作者：Seany
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.           
        
          
        
          
            
          
        
          
        
          
            免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 
        
          
        
          
            藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 
        
          
        
          
            
          
        
          
        
          
            
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(1949)
              
                          
          
          
          
                      
          
            
            
          用戶體驗是玄學嗎？
          
            
          
               純純                                            
          
            
          
    
          
        
        
          
            
          
                Part 01 - 用戶體驗和用戶體驗設計
            
          
            
          
                
          
            
          
            
          
                關于“用戶體驗”這個詞，很多剛入行的新人都覺得它玄之又玄，妙不可言。一方面是不知道他具體到底是什么，就好像那是一塊理想地，看不見也摸不著，另一方面呢糟糕的用戶體驗，作為用戶是能清晰感覺到它的存在。所以呢，在這里，會圍繞“用戶體驗”這個詞做一個科普性質的解釋和綜述，希望對初學者一些小小的幫助。
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                1.1 什么是用戶體驗？
            
          
            
          
                用戶體驗的定義有很多種，我比較傾向的解釋是：
            
          
            
          
                “用戶體驗是人對于使用一個產品、系統、服務時的預期和反應?！?            
          
            
          
                
            
          
            
          
                首先明確第一個概念，體驗是一個過程，生活中的一切皆是體驗，我們赤裸裸的來到這個世界，最后赤裸裸的離開，來人世走一遭就是來體驗來了。
            
          
            
          
                從廣義上來看，體驗的主體是人，客體可以是一切物體和事情，媒介是我們的感官；當我們的感官作用在一切事物上，會產生相應的心理行為，比如預期，比如反饋，比如情緒，著所有的一切一起作用，形成了用戶體驗過程。
            
          
            
          
                
          
            
          
            
          
                只要留心生活，你會發現用戶體驗無處不在。
            
          
            
          
                舉兩個例子：
            
          
            
          
                第一個是北京隨處可見的地鐵充值機，我經?？吹接脩粽驹谀抢镢卤疲钪饕氖撬`背了用戶的操作習慣，插卡機器的的行為總會讓人聯想到APM機，而幾乎所有的APM機器卡都是插一半然后自動吸進去的，而北京地鐵卡是需要插到底，然后還需要用力按一下才能成功識別，跟多用戶懵逼在這一步，并沒有用力按，然后以為是機器壞了沒有識別。
            
          
            
          
                
            
          
            
          
                第二個例子是我工作的地方旁邊商場一樓有一個肯德基，它有兩個門可以進入，第一個門是在商場外臨街，第二個門是在商場內。
            
          
            
          
                我連續兩周的工作日每天早上9點半到10點在這家店吃早餐，發現一件很有趣的現象，由于工作人員的疏忽，商場內的門二經常會忘記打開，因為這個商場的負二樓和地鐵站連在一起，所有很多人地鐵到站的人群從地鐵站口出直接從商場內走向街道：
            
          
            
          
                
            
          
            
          
                在這些人群里，如果他們正巧有買早餐的需求，他們往往會從門2進，如果正巧由于工作人員的疏忽，門2沒開。按照常人的思維，哪怕門2沒開，那不還有一個門1么，用戶完全可以多走幾步出去從街道門1進入啊，應該不會太影響。如果你能得出這樣的結論，又碰巧你正好是互聯網的設計或者產品人員，那么你可能有“自我安慰型人格”。
            
          
            
          
                我吃早餐的兩周里做了一個統計，10個工作日里，每天在我吃早餐的這半個小時內，試圖推開門2卻發現打不開的，平均到每天有6位，按照每個人平均買一份早餐套餐15元錢來算，10天內，由于工作人員的失誤，這個門至少阻擋了至少900元營業額。
            
          
            
          
                
          
            
          
            
          
                回到剛剛那個“自我安慰”的思維，我發現，10天內被這個門阻擋的實際62位用戶里，真正出街道從街道門1再次進入的人，只有十七位。也就是說這個實驗中肯德基早餐用戶被最短路徑阻隔之后，再次選擇次路徑完成轉化的轉化率17/62（27%）。
            
          
            
          
                別急，還有更吃驚的數據：在被門2阻隔的62個人中，有17個是自身順路要往街道右邊走路過門1的。但是由于被門2阻隔，他們17個人當中，哪怕自身行走路徑要路過門1，選擇從門1進去的也只有7位，大概在11/17（64%）（判斷順路依據是他們吃完后從門1出門往右走）。
            
          
            
          
                
          
            
          
            
          
                再看一下肯德基這個例子的數據結論：
            
          
            
          
                被門2阻攔的62個人里，45人流失。
            
          
            
          
                其余17位選擇從門1再次進入，這17人里，本身就要順路經過門一的占11位，說明大概率只有順路才會進入完成轉化。
            
          
            
          
                
          
            
          
            
          
                這個例子說明什么呢？
            
          
            
          
                在替代品遍地都在的今天，不要試圖去挑戰用戶的體驗。
            
          
            
          
                
          
            
          
            
          
                當用戶看到肯德基的門2，他們產生的預期是馬上就可以推開享受一頓早餐，這時候由于門2打不開，使得用戶預期受挫。
            
          
            
          
                受挫用戶的第一反應并不是想解決辦法（表現在例子中就是尋找另一個門進入），而是放棄它。畢竟，沒有肯德基我還可以吃麥當勞，還有星巴克，還有面包店，各種各樣的選擇。
            
          
            
          
                
          
            
          
            
          
                這就是為什么互聯網行業把產品用戶體驗看得這么重要的原因，除了社交產品以外的用戶是很難有忠誠度的，你的產品難用，你不能給用戶更大的福利，用戶一旦發現別的產品做得比你好，用戶會馬上放棄你，轉而用別的替代品。
            
          
            
          
                
          
            
          
            
          
                上面的那個例子主要表達的是用戶預期受阻帶來的糟糕體驗導致用戶流失。其實整個用戶體驗的過程當中，是有很多很的因素相互制約，協同作用的：
            
          
            
          
                
          
            
          
            
          
                
            
          
            
          
                戶體驗本身一個很龐雜繁復的系統；在一個過程內，用戶對整個過程中的元素的預期和反應（情感和生物反應）構成了整個用戶體驗系統。這里面包含了很多很多的旁支，比如人的感知、人的經驗系統和使用場景決定了人對于單個體驗的預期，而如果超過預期會帶來驚喜，促使用戶正向評價，也促使用戶再次體驗。比如人感知和體驗中客體呈現的意符決定了人的行為等等…
            
          
            
          
                
          
            
          
            
          
                用戶體驗最初的時候它只是用于表征易用性方面，而現在，它的概念更多的表現在情感的一個分支，包含設計情感互動和評估情緒 。因為人的情緒是很難拿捏的，面對不同教育背景不同生活經歷的用戶，我們最初其實很難歸納出到底什么樣的設計是具有好的用戶體驗。
            
          
            
          
                
          
            
          
            
          
                好的用戶體驗各有各的優點，但是，糟糕的用戶體驗卻很容易被歸納和識別出來。
            
          
            
          
                
          
            
          
            
          
                設計師們不斷的在識別和總結糟糕的體驗問題，慢慢在優化這些問題的過程中積累經驗，其實也慢慢的有了一些關于用戶體驗的方法論形成，這種方法論作用于各個設計行業，工業設計、服裝設計、奢侈品、廣告、互聯網產品設計各個行業產生的方法論其實不盡相同。
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                1.2 什么是用戶體驗設計？
            
          
            
          
                
          
            
          
            
          
                說起設計（Design）這個詞，那就厲害了 ，作為設計師的你聽說過解釋肯定有很多種，而我個人對”設計“的理解是：設計是一種”約束條件下，解決問題的可行的辦法“。而對于用戶體驗設計而言，早期的時候，我們僅能夠基于經驗主義去完成一些設計，這時候專家的作用會被放大，因為專家提出的不要這樣、不要那樣，往往會成為指導性方案：
            
          
            
          
                
          
            
          
            
          
                
            
          
            
          
                但是隨著發展，不斷地有人站出來嘗試描述和定義用戶體驗的邊界，比如：
            
          
            
          
                
            
          
            
          
                
          
            
          
            
          
                隨著探索者越來越多，我們最終也是大致能夠夠了出用戶體驗設計的定義范圍：既然體驗是一個過程，那么狹義的，用戶體驗設計實際上是通過改善和優化用戶與產品交互過程，從而提升用戶的滿意度的過程。
            
          
            
          
                
          
            
          
            
          
                
            
          
            
          
                這里有兩個要點：
            
          
            
          
                
          
            
          
            
          
                1、用戶體驗設計的目標是逐步不斷提升用戶滿意度，前面兩有個定語：“逐步“、”不斷”，對于用戶而言，永遠沒有所謂“最滿意”的說法，只有“相較于上一次體驗更滿意”.所以除非定義一種可量化的終極滿意度模型作為指標參照，否則用戶體驗設計是一個永遠都有優化空間的過程。
            
          
            
          
                
          
            
          
            
          
                2、用戶體驗設計是圍繞過程的設計，在互聯網行業中，這個過程主要指用戶與產品（app、PC端，客戶端、VR等）的交互過程中，所以下文重點討論的是在互聯網行業中的用戶體驗設計。
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                Part 02 - 用戶體驗設計是一個崗位嗎？
            
          
            
          
                
          
            
          
            
          
                以2018年2月為時間節點的目前來說，用戶體驗設計不是一個崗位，現階段來看，它更像是一個協同目標，每個公司的所有設計師（UI/視覺/交互），用研人員，包括開發人員其實工作的目標都是為了逐步提升自己公司產品的用戶體驗。
            
          
            
          
                
          
            
          
            
          
                雖然用戶體驗設計目前還不是一個崗位，但是它正在趨向于成為一個崗位。要解釋這一點，我們還是要從用戶體驗的定義說開去，還記得用戶體驗設計是什么嗎？用戶體驗設計是通過改善和優化用戶與產品交互過程，從而提升用戶的滿意度的過程。
            
          
            
          
                
          
            
          
            
          
                既然要改善和優化用戶與產品交互過程，那把這個句子拆分開來，大概需要的知識儲備有：
            
          
            
          
                
            
          
            
          
                1、從主語的角度看：首先你要了解用戶吧？用戶是人，要提升人的滿意度，對人感到心理滿足的機制是不是需要了解？
            
          
            
          
                
          
            
          
            
          
                2、從客體的角度看：客體是產品，在互聯網行業表現為手機（app）、pad（app）、PC（軟件）和VR設備等等。這些產品是我們著重需要關注的點，比如一個app中視覺信息的呈現，app的信息架構、app的交互設計、app的可用性和易用性等等，都是需要考慮的。
            
          
            
          
                
          
            
          
            
          
                3、既然是用戶與產品交互過程，是不是要知道人和產品（手機、app、PC）到底是如何交互的？每一次的點擊，滑動對于用戶來看心理應該是怎樣，產品的每一次反饋都意味著什么？
            
          
            
          
                
          
            
          
            
          
                吶，你現在來看，其實我們互聯網行業現在劃分的UI/視覺/交互/用研，甚至往廣了說包括產品/開發/測試，工作內容都是構成用戶體驗的要素，它需要的知識面特別特別廣，對人的綜合素質要求很高，所以目前來看，用戶體驗還不能是一個崗位，但是很多大公司，比如騰訊阿里，他們期待設計師能夠變成有更大洞察和對業務、人性有更多了解的全方位人才，而不是一個只會畫圖的美工，所以說未來，用戶體驗設計師可能會變成一個title，但是可以預料的是，用戶體驗涵蓋的這么多方面知識，每個人都是有側重和專長的：可能有些人就是很喜歡視覺設計和UI設計，那他們在精研這部分的同時，相應的懂一些交互方面的知識，這就算是優秀的偏視覺方向的用戶體驗設計師；那視覺表現很差的人能不能算優秀設計師呢？當然可以，比如他是心理學或者HCI（人機交互設計）的研究生，對人和用戶心理有自己獨特的認識，再加上精通定性和定量研究方法，對數據有獨特的敏感，那他未來可能是用戶研究方向的用戶體驗設計師。
            
          
            
          
                
          
            
          
            
          
                只不過我們現在因為崗位固化，大多數公司，每個人的工作職責僅限于那一塊，你是做視覺/UI的，那就好好畫界面，你是做交互的，那就好好研究布局，你是用研，你是DBA，你是什么職位就做什么職位的事情，從來不越界，這樣其實是不利于人的發展的，那我們追求上進的設計師們只能自己下來多看書，多去做研究，私下來多花時間修煉自己的內功心法，才能讓自己立于不敗之地。
            
          
            
          
                
          
            
          
            
          
                用戶體驗設計發展到今天，目前包含了最大的三個有模糊邊界的模塊是用戶研究、交互設計、視覺設計?，F在絕大多數互聯網公司也都是按照以上這三個模塊去設置崗位的，這樣有一個很大的問題其實是不利于設計師的發展。
            
          
            
          
                
          
            
          
            
          
                阿里巴巴1688的設計總監汪方進關于這三個崗位，有這樣的一番評述：
            
          
            
          
                比如交互崗位，如果對接的是一位能力較強的PD，他們可能把交互稿定了七八成，交互設計師完善后交付給視覺設計師，而對接的視覺設計師又有一些交互Sense，他也許把交互稿又改了改，那么這個過程下來，交互設計師的內容，還能保留多少呢？我所說的這種情況，可能也是當下我們交互設計師同學所面臨的痛。
            
          
            
          
                而視覺設計師又是怎樣的現狀呢？視覺設計師拿到交互稿后，在交互稿的基礎上美化潤色一下，自主發揮空間不太大。從我們集團總體情況來看，視覺設計師的（P級）成長是比較慢的，因為我們講求論述自身設計的價值是什么，但把視覺從整體中剝離出來，視覺設計師設計的某一個頁面，具體能帶來多少商業價值？視覺設計師很難去論述這點。
            
          
            
          
                
          
            
          
            
          
                關于用研、視覺、交互這三個模塊，我也想分開來談談，希望能對目前剛入行或者入行不久感到迷茫的小伙伴有所幫助。
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                Part 03 - 用戶研究
            
          
            
          
                
          
          
            
          
            
          
                上面我們說到，用研、交互、視覺這三個模塊構成了一個用戶體驗設計的能力維度，要搞清楚這三個維度，我們不妨先看看業界最出名的一張用戶體驗要素圖：
            
          
            
          
                
            
          
            
          
                我們一般把最下面戰略層的部分分解開，其中除了產品和公司戰略之外，關于用戶需求的定義交給用研（用戶研究）人員去完成。
            
          
            
          
                
          
            
          
            
          
                關于用戶研究，如果是一個從0到1的產品，產品初期是需要對產品用戶進行定位劃分和用戶畫像，就是我的這個產品是為了解決什么樣的用戶的什么需求的，這些用戶的屬性是怎樣的，他們具有什么樣的特質和顏色、他們一般使用產品的情景是如何的？
            
          
            
          
                
          
            
          
            
          
                這里需要注意的是，如果你不是一位有用研經驗的人去第一次嘗試做用研，需要留心我們很容易落入理想化用戶設計的陷阱。再客觀的站在用戶角度去思考，去設計也會有主觀和流于表面的情況出現。我們不能想當然的按照理想情景去思考用戶需求，用戶需求是復雜的，再加上企業自己的，以及各部門的需求紛繁，所以一般在產品迭代的過程中新的功能很容易陷入想當然的“用戶就是需要啊”的思維之中。所以對于成熟的產品來說，需要劃分核心主流和普通用戶并分別畫像。關于用戶畫像的方法有很多很多，大家可以去隨意搜索在這里就不細談了。
            
          
            
          
                
          
            
          
            
          
                還有如果是一個初次開展用戶研究的同學做用戶研究的時候，可以掌握幾種常見的方法，訪談法，焦點小組，易用性測試，問卷調查這些方法各有利弊，最重要的是找到當前情境下解決問題且行之有效的方案，比如訪談或者焦點小組，精心整理問題并邀請公司的一些員工或者核心用戶進行訪談并全程錄音，在結束后認真提煉訪談中多次被用戶提到的關鍵詞，從關鍵詞中按維度抽象整理出用戶的需要，是訪談的核心價值。并且輸出文檔，賦予思考，再以此作為整個設計改版的核心依托，讓里面用戶提到的關鍵詞在設計頁面中體現，這才是有效的設計。
            
          
            
          
                
          
            
          
            
          
                關于用戶研究的常用方法，具體推薦給大家兩本大部頭的書，大家感興趣或者不知道自己感不感興趣，可以去看看《設計調研》和《洞察用戶體驗方法與實踐》 第二版。
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                Part 04 - 交互設計 
            
          
            
          
                
          
            
          
            
          
                交互設計的輸出物是產品原型，也就是你們看到的線框圖。那線框圖是怎么產生的呢？這個需要從產品經理那邊對功能梳理開始。
            
          
            
          
                
            
          
            
          
                一般大一點的有交互團隊的公司，比如新浪微博啊之類的，他們的產品經理的工作重點會更加focus在功能本身到底是不是用戶所需要的，而經過產品提出來的需求文檔，一般只有功能需求List和他們的優先級，如果遇到要畫圖說明的，也就是簡略的幾一個草圖。
            
          
            
          
                這時候，交互設計師會根據產品的提出的功能需求List去進行整理和區分：
            
          
            
          
                
            
          
            
          
                這里整理和區分的方法是合并，拆分和歸納。
            
          
            
          
                比如功能A是可以拆分成更細顆粒度的需求A1和A2的，其中A1和A2又碰巧屬于不同的已有的兩個功能區塊，那么就可以把他們拆分到不同的功能線上，如果某些功能發現他們有同樣的屬性，那是不是考慮把他們整合在一起？
            
          
            
          
                
          
            
          
            
          
                這樣整合完了需求，再按照優先/重要的二維表格去劃分，最后得到一個需求量表：
            
          
            
          
                
            
          
            
          
                然后我們根據這樣的版本需求量表優先級和重要性，有的放矢的去設計功能入口和信息架構，就會游刃有余：
            
          
            
          
                
            
          
            
          
                
          
            
          
            
          
                而一般復雜產品新增功能的時候，往往要考量很多因素，不能一味的去做功能堆砌，還是需要把不重要的功能隱藏或轉移，突出重要的功能，再把一些同屬性的功能入口組織在一起并列，這些都是在原型之前需要思考的問題。再往下，那就是根據一個一個的信息去設計產品低保證原型圖，那就沒啥好說的了，你們看到的原型圖幾乎都差不多，但是至于你們的交互設計師的原型是不是按照我上面步驟一步一步推演出來的，那就要打個問號了，這可能是區分一般交互設計師和高級一點的交互設計師的一種辦法。（如果你見到聽到功能就開始畫低保真的交互，那…）
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                如果你以為交互設計師就是畫個原型，那你就錯了，交互設計師切記不要淪為產品助理……其實在真個UX體系中，交互設計師承擔的是最重要也是最核心的一個環節，那就是優化用戶路徑（即優化流量路徑）。
            
          
            
          
                
          
            
          
            
          
                什么叫優化用戶路徑呢，舉個例子，全民k歌是一款唱歌的app，那用戶最核心的功能就是在上面唱歌，而關于唱歌，大概有獨唱、合唱兩種維度。比如現在，我作為普通用戶，想要去完成獨唱一首歌的行為。這種行為從用戶路徑上看就是用戶從任何頁面到唱歌詳情頁。那么到底有多少條路？既是說，到底有多少個頁面可以跳轉到唱歌詳情頁？然后你會發現，其實能跳到唱歌詳情頁的，除了清唱那種獨特的方法以外，其他的都是要通過伴奏詳情頁跳轉，那么問題又來了，到底有多少個頁面可以跳轉到伴奏詳情頁呢？
            
          
            
          
                就這樣，去窮舉所有的用戶路徑，然后看看這些路徑過程中有沒有一些冗余操作是可以刪減的：
            
          
            
          
                
          
            
          
            
          
                
            
          
            
          
                窮舉所有用戶路徑，看看有沒有哪一跳是可以被優化的（以唱吧為例
            
          
            
          
                
          
          
            
          
            
          
                
          
            
          
            
          
                這里面有很大很大的學問，如果展開說的話可能是一個幾萬字都說不清楚的篇幅。
            
          
            
          
                總之，一個好的app一定是功能和產品形態足夠扁平簡單。
            
          
            
          
                要讓產品形態足夠扁平簡單，就需要根據app的形態去整理和梳理交互層級，針對流量問題進行具體的分流設計：
            
          
            
          
                
            
          
            
          
                比如當我們看到一個200wpv的頁面，下屬三個平行按鈕分別只有40w、12w和3wpv，刨除場景問題之外，從交互出發那是不是我們可以設計一個內頁的segment組件去完成三個內頁的滑動跳轉、降低操作成本呢？
            
          
            
          
                
            
          
            
          
                比如淘寶這樣：
            
          
            
          
                
            
          
            
          
                又或者說，我們是不是可以未一個pv較低卻承載功能較大的頁面另外設置另多個入口呢？
            
          
            
          
                
            
          
            
          
                比如像外賣產品這樣：
            
          
            
          
                
            
          
            
          
                最后的最后，交互設計的工作產出就是原型了，既然都思考妥當了，畫個圖就就沒啥好說的了...
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                Part 05 - UI設計
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                再往后，交互設計師會把原型給到UI設計師，UI設計師的工作范圍大家想必很了解，就是把低保真的原型變成高保真的設計稿。
            
          
            
          
                
          
            
          
            
          
                在這里再啰嗦一遍?。?            
          
            
          
                
          
            
          
            
          
                UI設計師的基本技能是精確的信息視覺傳達，不是視覺炫酷的界面！
            
          
            
          
                UI設計師的基本技能是精確的信息視覺傳達，不是視覺炫酷的界面！
            
          
            
          
                UI設計師的基本技能是精確的信息視覺傳達，不是視覺炫酷的界面！
            
          
            
          
                
          
            
          
            
          
                重要的事情說三遍！
            
          
            
          
                
          
            
          
            
          
                我們唱吧UED最近一直在招人。
            
          
            
          
                看UI的簡歷，然后發現一個很大的問題是，我發現UI設計師的簡歷真的是千奇百怪五花八門，有那種插畫畫的很好的，有那種第一眼上來就是一個很立體的3D建模渲染震撼到你的，也有那種大漸變dribbble風給你一種好像很厲害的樣子的，但是這些都不重要，如果一個界面上的內容信息沒有主次區分，或者展現得沒有層級對比，再花哨的東西都沒有用。
            
          
            
          
                
          
            
          
            
          
                關于UI需要掌握的比如格式塔啊之類的東西已經有太多人說了，在這里就不贅述，具體也可以看我的文章《形式與內容的關系 -  app的視覺美成因分析》。
            
          
            
          
                
          
            
          
            
          
                UI設計其實都不是鬧著玩的工作，也絕對不是純主觀感性的工作，判斷一個UI界面的好壞可以通過易用性和易讀性測試、瞇眼測試的方法檢驗，判斷一個產品交互設計的優劣也可以從易用性測試和用戶反饋中得出線索，判斷哪種交互手段和信息架構更為可行通過ab test的方法得出結論，這一些的一些設計它都是一個有著科學的方法論作為指導的。
            
          
            
          
                
          
            
          
            
          
                希望從此之后大家審視產品的時候不要以UI美丑這種最低級的主觀因素去思考（當然UI的一致性和美觀度很重要），但是更多的，要想想更深層次功能布局和信息架構，以及產品打的人群上往更加宏觀和抽象的高胃度進行思考。
            
          
            
          
                
          
            
          
            
          
                
          
                    文章來源：站酷   作者：Seany
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.          
                
          
                
          
                    
          
                
          
                
          
                    免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
                
          
                
          
                    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
                
          
            
          
            
          
                
          
            
          
        
          

          
          
    
          

          


          
            
          
              
                評論(0)
                瀏覽(1724)
              
                          
          
          
          
                      
          
            
            
          從交互維度量化用戶體驗
          
            
          
               純純                                            
          
            
          
    
          
        和大家分享一些在產品和交互設計中的一些自己的方法。
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        Part - I 什么是交互 
    
          
    
          
         
    
          
    
          
         
    
          
    
          
         
    
          
    
          
        狹義的交互（Interaction）定義交互主體必須是人本身，而客體可以是產品，環境，服務等等，且不論交互客體是什么，只要主體是人，人和客體去進行交互的時候，一定是人帶著心理預期施加一個行為，然后客體會根據這個行為給與一個反饋（沒有反饋本質也是一個反饋），而人會根據這個反饋是否符合預期去進行心理修正。如下圖所示，這就是我理解的最小交互模型：
    
          
    
          
         
    
          
    
          
        當時我舉的例子是用翻頁器去控制ppt翻頁：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        如上圖所示，拆解這一套交互行為：
    
          
    
          
        當我我點擊翻頁器的“下一頁”按鈕，我點擊行為附帶的心理預期是“PPT翻往下一頁”，然后我點擊的時候，遙控器塑膠按鈕給到我手指一個物理反饋，證明我按下的行為已經完成了，這是“輸出端（我的手）的交互與反饋”，這時候遙控器接收到按鈕指令，把指令通過紅外線傳輸到USB接收器上，接收器把指令傳到PC端然后完成翻頁動作，再通過大屏幕傳到我的眼（輸入端）中，我就可以確認這一次交互反饋是符合預期的。BTW這里有一點想要補充：設備對設備（上圖中黑色箭頭），也屬于廣義的交互，只不過現階段大家研究的交互設計都是狹義的，人為主體的交互。
    
          
    
          
        
          
    
          
    
          
        在我們日用科技產品的早期，有兩個東西是無法跳過的，那就是按鍵手機和PC電腦：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        他們幾乎是同步在發展的，而這兩個產品的交互行為基本上延續到了觸屏手機時代，所以為了弄明白觸屏手機的交互，這兩個產品是值得講一講的。
    
          
    
          
        
          
    
          
    
          
        先看按鍵手機（就是我們小時候用的非智能手機）：
    
          
    
          
        在按鍵手機中，最讓用戶困惑的其實是按鍵和屏幕之間存在一個映射關系，而不同廠商缺乏一個統一的規范，各家映射規則不一樣。大家是否還記得當年的手機說明書那可以說是相當厚，因為說明書必須要給用戶建構一個心理模型；比如上圖，點擊左上角和右上角那兩個“-”按鈕，其實一一對應的是屏幕左下角的“Goto”和右下角的“Names”。這個一一對應關系作為今天的用戶來看應該是很平常而且很易懂的，但是當年沒用過手機的人，需要花很長時間閱讀說明書，才能夠明白物理按鍵和屏幕上的映射關系，這就是觸屏手機很難用的地方，也是很反人性的地方。因為作為用戶來說，心智上，我們當然希望所觸即所得。
    
          
    
          
        再來看PC，作為和按鍵手機差不多一起出現的載體形式，人們操作PC端人是通過媒介（也就是鼠標+鍵盤）輸入的，其實本質上也是我們通過鼠標在桌面上滑動x-y區域對應到電腦桌面上指針的移動來創造屏幕中x-y的映射關系，然后鍵盤上幾十個鍵配合輸入完成操作。
    
          
    
          
        
          
    
          
    
          
        大家發現了么，上述的兩種設備其實本身就是在制造一種一一對應的映射關系去完成交互行為，這兩種載體從出身開始就還是需要很大交互成本的。
    
          
    
          
        隨著科技的發展，觸屏感應技術推出了之后，印象中觸屏手機就是兩三年時間就摧枯拉朽的淘汰了按鍵手機，本質上是干掉了一一對應的交互映射，所按即所得：
    
          
    
          
         
    
          
    
          
        觸屏手機出現之后，交互專家們不禁要問一個問題了：
    
          
    
          
        手和觸摸屏到底有多少種交互方式？
    
          
    
          
        答案是有很多種：
    
          
    
          
         
    
          
    
          
        越是高階越是隱藏的交互手勢越復雜，所謂的“交互成本”也越高，比如錘子三指滑動換屏保那種，就是利用了高階交互便捷實現邊界功能。那這么看起來，iOS也好還是所有的安卓手機都好，從用戶端而言，就是組合交互手勢，讓信息更好的傳達而已。那么同理，在App中也是一樣，如果我們了解了每一個交互行為的用戶心理預期，對設計工作而言就能做到有的放矢：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        我們以“單擊”和“滑動”這兩個最簡單的交互行為舉例。
    
          
    
          
        所謂單擊手機屏幕，用戶其實最核心的是有兩個預期：
    
          
    
          
        第一是選中一個元素，比如Radio組件。第二是邏輯上的Next，比如點了一件衣服，應該Next到衣服的詳情；點了付款，應該出現付款流程，點了返回，應該back到上一路徑點等等。
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        劃動交互也是一樣的，用戶在一塊手機屏幕上單指劃劃劃，用戶內心的預期其實也不復雜，最核心的預期也就兩點：
    
          
    
          
        第一是查看屏幕外的線索（前提是設計師給用戶留下線索了或者是這個UI組件長得就是可以劃動的樣子）第二是查看相鄰標簽的內容，或者查看同一個標簽下的相鄰元素，比如iOS的segment controlle組件就是典型例子：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        當我們了解了這些之后，我們在實際的設計工作中就可以根據上面這些理論來合理選擇UI組件去呈現對應的信息了。
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        Part - II 從交互維度合理選擇UI組件 
    
          
    
          
         
    
          
    
          
        我們在設計工作中，選擇UI組件，本質上就是選擇信息的呈現形式。
    
          
    
          
        每一個常見的UI界面和UI組件，都一定也滿足上面所說的最小交互模型：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        在這里我舉一些例子說明。
    
          
    
          
        第一個例子：同樣的內容，選擇不同的UI組件呈現，給用戶呈現的是完全不同的產品結構：
    
          
    
          
         
    
          
    
          
        大家看下面這張圖：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        這兩個UI模塊擺在大家面前，大家應該能清晰的感受到，左邊是一個segment控制下面內容的UI；而右邊是一個所有內容列表的集合頁，只不過通過tab聚類了而已。
    
          
    
          
        第一件事應該想到的是如果需要采用右邊的排列形式就必須要控制tag的字數；然后由于右邊的tag占據了推薦貼的位置，導致推薦貼可能沒有左邊的那種展現形式更加醒目。但是相對的，圖右的優勢在于，由于豎向排列tag可以讓一個屏幕顯示更多的tag，可以讓用戶更方便的定位內容，比如外賣產品之所以用右邊這種形式是因為力求一屏展示更多的菜，而且外賣產品的左側tag一般是一家店鋪的菜的品類，用戶下滑菜品配合點擊品類，點完即走，很方便（京東和淘寶電商類平臺也是類似的）。
    
          
    
          
        但是比如今日頭條，新聞類客戶端只能采用左邊的這種形式，因為新聞類客戶端是需要用戶長時間沉浸的，比如用戶選中一個“體育”的tag之后一般要沉浸的看好久好久，用戶需要沉浸在這個tag下的內容中，那這個時候顯然用右邊這種設計方式讓tag常駐屏幕左側是不合適的。
    
          
    
          
        
          
    
          
    
          
        再來看第二個例子，就是UI應該會隨著內容而進行調整和優化：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        這里舉一個唱吧的例子，唱吧從7.0到8.6之間做了三次改版，大家可以看到，唱吧團隊幾乎是損失了屏幕效率來加大了間隔和突出了歌名，這是為什么呢？
    
          
    
          
         
    
          
    
          
        這是因為頁面承載的關鍵任務不同，大家對比著7.0時候和8.6時候的UI樣式，正好是今天快手和唱吧的對比：
    
          
    
          
         
    
          
    
          
        大家會發現，其實這個頁面，快手和唱吧承載的內容都是消費轉化，都希望用戶點擊進去消費內容，但是兩款產品做了截然不同的UI風格，原因是什么呢？
    
          
    
          
        快手在這個頁面，其實承載的關鍵任務是：“迅速讓用戶找到感興趣的點”，它這么設計的本質原因是因為它的截圖可以幫助用戶判斷內容本身，比如第一張圖是一個人在打高爾夫，右邊是一個工人，然后第二排左邊是一個游戲的鏡頭，右邊是一個傳遞正能量，大家可以很方便的通過圖片識別里面的內容，用戶更沉浸更聚焦的去選自己喜歡的點擊進入消費就可以了。但是唱吧的視頻截圖其實是不能識別里面內容的，大家可以看到，第一張圖是一個妹子，第二場圖是一個妹子，第三張圖還是一個妹子，那用戶點擊進去的動力在哪兒了？除了這個照片長相之外，更多的其實是文字決定的，是這個人唱的這首歌的歌曲名是不是我喜歡的，或者是這個演唱者的的歌手等級。
    
          
    
          
        所以基于這種跟深層次的邏輯，唱吧和快手兩款產品的這個頁面都是為了促進消費轉化，但是UI長相上完全不同。
    
          
    
          
        
          
    
          
    
          
        我們看第三個例子：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        同樣組件下，選擇不同的交互方式，也會使得效果完全不同，比如現在有一個UI頁面，主要由一個tab（iOS叫segment controlled）組件控制下面的內容，樣子張這樣：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        我先假定一個前提：這個app中的這個組件不支持橫劃，只支持點擊切換。
    
          
    
          
        好了，現在我假設這是一款已經穩定運營了一年的產品，為了說明問題，我假設一個理想數據：
    
          
    
          
        假設每天有20W的uv訪問這個頁面，其中分流情況是：
    
          
    
          
        10Wuv消費“推薦”下的內容
    
          
    
          
        2Wuv消費“生活”下的內容
    
          
    
          
        1Wuv消費“段子”下的內容
    
          
    
          
        3Wuv消費“美女”下的內容
    
          
    
          
        4Wuv消費“游戲”下的內容
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        這時候，為了優化交互行為，有一天決定把這個tab組件從不可橫向劃動改成可以劃動的（并且告訴用戶這里可以滑動了喲~），然后給你一次機會重新排列這五個tab順序，你會怎么做呢？最簡單的辦法當然是把五個tab按照用戶消費意愿逐一排列，即：“推薦、游戲、美女、生活、段子”。
    
          
    
          
        這樣排列當然沒有任何問題，但是還有沒有更優解呢？我給出的解決辦法是這樣的，大家評判一下：
    
          
    
          
        按照用戶的消費量，“游戲”是消費量第二的一個tab，毫無疑問我會把它排在第二項，這樣可以刺激用戶劃動行為，然后“美女”是消費量第三的，我會把他放在第四位，這時候我會把“段子”和“生活”這兩個消費率最低的tab分AB test做兩個版本放在第三和第五位拿去測，以判斷之前的“段子”和“生活”是由于自身內容不夠優質，還是之前交互成本太低導致的數據較差：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        最后我們來看第四個例子：
    
          
    
          
        
          
    
          
    
          
        比如一個app，他的UI張如下圖所示的這個樣子
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        現在假設在運營和市場團隊不做任何努力的情況下，單從產品交互的角度，能不能優化上面這個版塊的點擊率？
    
          
    
          
        首先我們來分析一下頁面架構：
    
          
    
          
         
    
          
    
          
        如果我們認為，不管是點擊右上角的“>”，還是點擊留個圓形入口都算完成轉化的話，我們現在的這個紅色的UI組件，入口位置一共有7個。根據長尾理論，如果我們把這個圓形入口從6個擴展到比如九個，是不是一定對轉化率有正向影響？答案并不一定：
    
          
    
          
         
    
          
    
          
        為什么呢？因為主要是這樣的改動會帶來一個未知的泳道橫劃交互，它會產生一定的影響，如下圖所示：
    
          
    
          
        用戶看到這個泳道之后可能出現三種行為：
    
          
    
          
         
    
          
    
          
        a.“用戶完全不滑動”——那入口就從7個變成了7.5個，別的沒有變量影響。
    
          
    
          
        b.“用戶滑動看完了之后，點擊某一個或者左上角的“>”進入”——這是我們想要的轉化
    
          
    
          
        c.“用戶滑動看了這些圓形入口之后松手，就是不點擊進去”——這是我們不愿意看到的結果
    
          
    
          
        想到這里，那為什么我們不能讓用戶直接滑動之后松手就跳轉呢？
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        想到這里，所以優化方案如下圖所示，給與用戶一個x軸區間，滑動手勢操過那個區間則告訴用戶你現在松手默認跳轉，用戶不愿意跳轉也可以回劃，只要不足這個x區間就給與用戶自主選擇的機會：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        我之前在上家工作的時候，我們把6個圓形入口變成了10個，然后用這個“松手跳轉”的交互把單元模塊的穿透率從21%提升到了31%，這是一個實戰當中的真實例子。
    
          
    
          
        
          
    
          
    
          
        當然了，請大家再思考這樣的一個問題：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        一個頁面的流量就這么大，一個地方漲了11%，那勢必別的地方就會相應的損失11%。一般情況下app首頁承擔著80%以上的分流工作，根據流量漏斗來看的話每一次引流都會導致其他模塊的數據下降，所以設計師們應該要根據運營策略和公司大的產品OKR來合理選用合適的交互組件，以達到想要的目的，還是那句話：“小孩兒才分對錯，大人只看利弊?！?    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        Part - III 從交互的維度量化用戶體驗 
    
          
    
          
         
    
          
    
          
         
    
          
    
          
         
    
          
    
          
        移動互聯網產品設計中，尤其是在中國的app產品，有兩大分歧陣營：
    
          
    
          
        “扁平”陣營表示了，我們需要產品足夠扁平，最好就是三次交互可以觸達所有app界面：
    
          
    
          
         
    
          
    
          
        “簡潔”陣營也表示了，我們需要頁面信息足夠簡潔，最好一個頁面只完成一個核心任務：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        雙發你來我往，誰也說服不了誰，如下圖所示，“簡潔”陣營反駁“扁平”陣營說：你們一點都不遵守席客定律，層級扁平是扁平了，但是相應的頁面信息變得越來越多，給用戶呈現的干擾就越來越多，用戶做出決定的時間也越來越多，所以你們“扁平黨”都是辣雞。這時候“扁平”陣營也找到了反駁的論點，他們說你看你頁面足夠簡潔了，但是頁面層級就很深啊，交互成本這么高，每一次都伴隨流失，可用性這么差，你們還有理了？所以“簡潔黨”你們才是辣雞！
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        中國的互聯網產品，很難做到既簡潔又扁平，這個問題的根源在于永遠有那么多信息需要呈現，永遠有那么多功能需要添加，這個是中國的激烈市場競爭導致的，并不是說中國的產品就不如國外的好（我的哥哥之前在Facebook現在Airbnb工作，他經常感嘆道國外的互聯網產品到中國來真的都得死...）我想要討論的是，面對中國現在互聯網產品市場現狀， 如果一款產品非要你站隊上面兩派陣營，你會選哪一派？我現在的選擇是“扁平黨”，因為用戶面臨一款眼花繚亂的app，如果是經常使用，缺功能布局信息架構很少改動的前提下，早晚也會習慣和適應的，但是如果一些核心的東西不能第一時間暴露在用戶眼中，很有可能用戶就不知道你有這種功能。這個就是為什么我們設計經常會說這個產品經理傻逼吧，怎么什么東西都想展現出來，這一堆東西找個入口集合收起來頁面多干凈多清爽多好看呀~~我早年間也是和諸位一樣的觀點，但是現在我越來越覺得，界面清爽了，你的大功能feature因為設計隱藏沒有被發現，不是設計開發測試都白做了么，說好的ROI在哪里？
    
          
    
          
        
          
    
          
    
          
        我們大家都是互聯網從業者，不管看到這篇文章的你是一位設計、產品、還是開發、測試、運營人員，我們都明白用戶體驗這個詞是由N多維度綜合而成的一個過程性評價，它和方方面面都有關系。
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        那既然是這么專業且牽連甚廣的一個名詞，我們真的就沒有辦法去量化評價它了嗎？
    
          
    
          
        永遠不要忘記，用戶體驗是個過程，而我們每個人也都是用戶本身。在這里我提供一種普通用戶維度的比較好用的用戶體驗評估方法是“窮舉分析用戶行為路徑”。
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        比如你是一款外賣產品的設計師，那么用戶在不同產品模塊下定一個外賣的流程路徑大概有多少種，都窮舉出來。比如你是一款在線演唱類的產品設計師，那么用戶在產品中完成一首歌需要的用戶路徑到底有多少條，窮舉所有路徑之后一一優化，讓路徑變得更加扁平，或許是一個最“笨”但是有效的方案，怎么優化呢？用淘寶消息頁舉個例子：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        淘寶消息頁上面有“交易物流”、“通知”、“互動”三個tab，這時候我們假設一個用戶三個按鈕下面都有消息，用戶想要看完這三個消息大概需要幾次交互？答案是至少6次：“點擊第一個進去 - 返回 - 點擊第二個進去 - 返回 - 點擊第三個進去 - 返回”，這樣的交互顯得呆板且冗長，淘寶團隊巧妙的把三個內頁集合成一個頁面的三個tab形式，大大縮短的交互成本，這就是所謂的“把用戶路徑變得更扁平”：
    
          
    
          
         
    
          
    
          
        
          
    
          
    
          
        大家在使用很多產品的過程中，多多留心就會發現原來細節里面總有魔鬼。
    
          
    
          
        
          
    
          
    
          
        文章來源：站酷   作者：Seany
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.           
    
          
    
          
        
          
    
          
    
          
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 
    
          
    
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(1389)
              
                          
          
          
          
                      
          
            
            
          為什么交互設計能幫助產品解決問題
          
            
          
               純純                                            
          
            
          
      

          

          
    市面上大量出現同質化產品、設計，就是因為大家都在按照現有的，常用的模版在設計，現在其實比早兩年會好很多，很多設計師已經開始從美化工作逐漸深挖到區分甚至自我驅動或者價值探尋的工作。 

          

          
    
          
           

          

          
    例如下面的案例，這是一個電瓶車電池租賃的一個產品。 

          

          
    
          
           

          

          
    
          
           

          

          
    undefined  

          

          
    
          
           

          

          
    
          
           

          

          
    從美觀角度，左側的界面更加簡潔信息也有規律，有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側的對比圖時，大家在第一反應中，有多少人可以重啟自己的視角，還是說已經被這個頁面所拉入到不可自拔的漩渦中去了呢？ 

          

          
    
          
           

          

          
    如果讓你盯著第一個界面進行改版，我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來，或者新增一些“我們覺得”有用的板塊。但其實這整個形態就是錯的，即便將錯誤路徑3改成了路徑2，你以然還是在錯誤的路徑上，本質沒變。所以為什么我們說要做正確的事而不是正確的做事。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    交互不僅僅能夠讓產品好用的，也要讓產品走對方向。 

          

          
    
          
           

          

          
    另外，UI也是交互的一部分，屬于看的懂。好用可以分為看得懂，學的快，用的會，交互體現在人們日常所接觸到的大部分媒介，并且與之產生聯系。例如一把水壺，水壺的設計形式首先通過視覺讓你感知這是一個水壺，如果把水壺的外形做成一個馬桶，你覺得它還是一個水壺嗎，這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產品進行基礎操作，例如裝水、倒水。而用的會就是這個水壺更多的附加功能，例如燒水、定時、調溫等等。 

          

          
    
          
           

          

          
    
          
                      

          

          
    1.交互設計中媒介與人的關系  

          

          
    
          
                      

          

          
    1.1順應  

          

          
    
          
           

          

          
    交互的媒介是不可缺少的，大家是否去研究過為什么古代人們撰寫文字是從上至下，從右往左而現代人的習慣是從左右的？古代受限于工具、媒介，竹簡是主流的記錄文字信息的媒介， 有人會說竹簡可以從做往右寫不是非要從上往下啊，但是大家可以看到人們是如何打開進行閱讀的，如果是橫著閱讀但是打開是上下展開就會非常不自然了。 

          

          
    
          
           

          

          
    所以在當時人們為了適應非常有限的工具資源，改變了自然的操作方式。但現代社會如果說你的產品不為用戶的使用和場景去考慮，那基本也就涼涼了。 

          

          
    
          
           

          

          
    從2g到5g時代的發展，除了生活方式發生翻天覆地的變化外，我們所接觸到的媒介也發生了變化，從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步，讓人們對信息的獲取更加方便快捷。除了內容，外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化，從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機，改變了我們的認知也改變了我們的生活方式。 

          

          
    
          
           

          

          
    
          
                      

          

          
    1.2遷移  

          

          
    
          
                      

          

          
    平臺遷移的交互成本，很多同學可能都玩過moba類游戲-dota，這是一款在電腦端戰術競技類游戲。在dota中我們經常使用的交互形式主要分為鍵盤和鼠標的控制，鍵盤用來控制技能的釋放和其他快捷物品的使用，都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標，這是端游中基本的交互行為與操作。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    在現在非?；馃岵⑶夷Ｊ胶蚫ota相似度很高的王者榮耀手游中，我們看到了，如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動，右手拇指來控制技能的釋放，在這里大家要注意，在端游中技能的釋放是可以非常精準的，并且可以指向性釋放在某一個角色中，但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能，但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上，所以手游中只能進行非指向性的預判技能釋放。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    
          
           

          

          
    同樣在端游和手游的吃雞游戲中，端游鍵盤控制人物移動，鼠標控制射擊與視角，但是在手游中控制射擊與視角就需要2個手指來完成非常不方便，也很影響射擊的精度，但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發出了吃雞專用的輔助設備，專門用來給多余的手指進行射擊操作。 

          

          
    
          
           

          

          
    另外，大家如果做b端的同學應該也深有感觸，平臺遷移的成本非常高。想要把集成非常復雜的業務后臺切換到移動端是一件很麻煩的事，因為在網頁端我們有大量的空間和更自由的控件形式去承載信息，比如聯動的左側標簽導航和頂部聯動的標簽導航，在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯動導航，但是頁面顯示實在有限，很多的信息完全無法在一個界面中呈現，所以要么將頁面進行左右滑動，要么拆分進行多步操作。但本身擁有復雜業務功能的后臺系統就不適宜遷移到移動端上。 

          

          
    
          
           

          

          
    web端的工具和網頁通常都會有撤銷操作，按CMD（ctrl）+Z大部分都可進行撤銷上一步操作，但是在移動端我們無法通過特定、或者統一的手勢進行撤銷，所以很多時候在表單輸入的時候會有一鍵刪除圖標，卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后，刪除按鈕變為撤銷按鈕，有待考量。 

          

          
    
          
           

          

          
    
          
           

          

          
    2.交互認知的盲區  

          

          
    
          
                      

          

          
    到底什么是交互設計，這個問題其實是比較復雜的，也是我一直在思考的問題。所以也翻閱了很多文獻，嘗試做更多的案例來解釋。交互設計的概念真的挺多的，光網上能夠找到的定義就不下5種，這些對交互設計的定義中，比較頻繁出現的是行為、場景、用戶等詞匯，交互設計到底設計的是用戶的行為，還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情，我覺得可能還是沒有能夠解釋清楚交互設計的本質。 

          

          
    
          
           

          

          
    中國歷史文字的演變，它并不是一個模仿的過程，而是一個從底層對文化、自由、精神、環境、人的深刻理解而發生的一種進化過程。但現在其實很多的交互形式都是來源于一些大流量產品的模仿，更多的是擔心用戶成本過高而妥協為滿足用戶預期。 

          

          
    
          
           

          

          
    
          
                      

          

          
    2.1信息不對稱  

          

          
    
          
                      

          

          
    事實上，為什么我們講不清楚什么是交互設計，其實UI設計也一樣，她絕不可能單純的指代用工具繪制出用戶界面，其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語 

          

          
    
          
           

          

          
    例如“你可以意思一下”，單就這句話，我們大概知道最關鍵的是“意思”二字，包含了特別多的含義，含義需要通過語境、使用場景來區分，說者的“意思”是想告訴聽者什么呢？沒人知道，是一口氣干完一瓶酒，還是喝一口？還是送一點禮還是？應付一下？ 

          

          
    
          
           

          

          
    當然這句話中的“可以”也很有講究，加上“可以”說明你也能選擇不“意思”，是不是覺得這7個字讓我們整一句話都活了起來，說者與聽者如果不在一個境中，聽著就壓根不知道說者的具體表達含義。 

          

          
    
          
           

          

          
    同樣的，在設計領域，很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲，還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞，這個詞聽起來比較抽象，讓聽者都有點不太好意思追問什么是呼吸感，其實你問了，說者也不知道怎么描述?？赡苷f者覺得現在信息太密集讓人無法呼吸，但設計者覺得現在剛好，所以本身就沒有一個標準，更多的就是主觀的感受，讓你不得不接受這個建議的原因是因為兩者的身份。 

          

          
    
          
           

          

          
    我們用我們能夠講述的語言去描繪我們不懂的事物，再例如設計師和開發還原只會說往左移動10px，而不會說給這個view加上padding left 10px。還有你和開發為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識，設計師通常喜歡描述從左到右或者從上到下，但是在開發的語音認知理，他需要知道的是空間坐標，并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發知識，開發也盡可能的去補充設計背景。 

          

          
    
          
           

          

          
    在這里，交互設計師產出的交互說明文檔就是能夠幫助設計師與開發有一個更好的溝通，所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。 

          

          
    
          
           

          

          
    再舉個例子，不知道大家有沒有編輯過問卷或者做過用戶訪談，很多時候是不是覺得收集到的信息無效、無用，其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道，比如：你的問卷問的是，您喝酒的頻率是多少，選項有：從不、偶爾、經常，在用戶的眼里偶爾可能是1年喝一次，而我們覺得差不多1個月喝一次算偶爾，再比如訪談的時候問用戶這個問題：您覺得您喜歡下面哪個頁面的風格？用戶：“什么是風格？” 

          

          
    
          
           

          

          
    所以交互設計師有一個能力久顯得很重要了：讓萬物都可與之對話的能力，對話需要什么，是語言。  

          

          
    
          
           

          

          
    
          
           

          

          
    
          
                      

          

          
    3.交互語言的淺見  

          

          
    
          
                      

          

          
    我們都知道，語言是我們溝通的根本，語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統。不同的種族有不同的語言，不同的專業有不同的語言例如在圍棋中有長、立、并、空、頂等等，例如在模型手辦中有分線、滲線、勾線、補土等，這也都是在特頂專業領域中的一些術語，但這些并不是語言，只是在某個領域中大家總結出來便于溝通的文字符號。 

          

          
    
          
           

          

          
    所以我們再回到上方看一下定義，首先語言是由詞匯所組成，詞匯是由符號做組成，大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法，但這些都僅僅只是規范，而并不是語言。語言擁有更強的普適性和通用性。 

          

          
    
          
           

          

          
    那么我所認為的語言他首先包含了能夠組成詞匯的符號，這些符號大概就是指：點、線、面、體、色彩由這些點線面體可以組成的詞匯有：按鈕、文字、圖標、圖片等。但是光有詞匯不行，在漢語中有12種詞類：名詞、動詞、形容詞，在由句子組成的詞匯中包含了不同的成分：主、謂、賓、定、狀、補...這里不過多敘述。 

          

          
    
          
           

          

          
    語言很重要的一點它具有語境，語言的運用包含了看聽讀寫4個方面，看和聽指的是輸入，讀和寫指的是輸出，那么交互設計語言中，也包含輸入和輸出兩種屬性，例如輸入指的是由不同“詞匯”組成的“句子”，比如由標題、箭頭、色塊組成的一個itme，是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發并且進行狀態的變化和所進行的任務跳轉。  

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    這里的控件雖然有兩個屬性，但是還需要語境來幫助我們理解，一個是它本身所能夠輸出的默認狀態的，比如點擊之后的跳轉頁面，另外他也可以具備產品賦予的自定義屬性，例如底部滑出picker。  

          

          
    
          
                      

          

          
    
          
           

          

          
    
          
           

          

          
    還有，在漢語中“去買兩個桃子吧”，這里的“兩”肯能是虛數也可能是實數，但是在交互設計中，我們如何表示點擊1下和兩下或者是多次呢，一般單擊的屬性通常可以有一些特性的符號屬性所表示出來，例如加下劃線的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等，那么雙擊的話可以用雙箭頭來表示嗎，當然不可以，雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
      

          

          
    
          
                      

          

          
    
          
                      

          

          
    那我們發現如果把交互設計能夠做成類似于語言的系統是非常有意思，并且有用的。這會讓更多信息不對稱的情況消失，不僅僅是設計師，在產品團隊中大家都能夠有一套共性的交互語言系統，無疑是一件非常提高效率的事。但是目前的很多交互規范的文檔中，大多都是多種元素的拼合，給出常用的、可復用的控件、組件，但是大家依然還是無法從語言角度去創新，這就導致了很難會有新的、有用的交互形式的出現，比如很多搜索控件都是承載在頂部導航欄中，那么在做規范的時候也只能在這個組件上去微調，殊不知搜索這個控件的“語境”并不單單只能在頁面頂部，例如高德地圖做的就很好。這樣一來，這個組件的常規規范形式就能和很多產品區分開來了，當然要視產品形態不同。 

          

          
    
          
           

          

          
    
          
           

          

          
    4.業務背景與交互形態  

          

          
    
          
                      

          

          
    4.1不同業務背景下的信息組織  

          

          
    
          
           

          

          
    市面上有許多的新零售電商產品，頁面中的信息流也是大同小異，但是無論是交互還是產品在做設計師必須要考慮的就是產品定位與當前狀態。例如目前我們看到的都是以下的信息流樣式，但是我們要知道，30000個sku和3000個sku的展示策略肯定是不同的根據算法的瀑布流在30000個sku中可以隨意展示，但是3000個就不行了，很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    所以這樣的產品首屏策略就顯得非常關鍵。我們可以看到常規的電商產品中，首屏基本上都是呈現這樣的策略，從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區這樣的布局，從基本上能夠滿足一個大量sku電商產品的所有需求，但是如果用戶定位和產品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢？ 

          

          
    
          
           

          

          
    從交互角度入手，那么既然我們無法做到大而全，那么我們至少可以做到精準、限時，讓用戶上癮的策略，上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具，以及時間軸的商品推薦，讓有限的資源呈現更多的形式變化以及讓用戶有時間概念，每天固定時間來進行活躍。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
                      

          

          
    4.2營銷工具化  

          

          
    
          
                      

          

          
    通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經?？吹降臓I銷瓷片可以劃分為非常多樣式與可能性，并且在后臺工具中靈活控制，同時除了日常的營銷目的之外，在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現。 

          

          
    
          
           

          

          
    4.2.1更加靈活的控制方式  

          

          
    
          
                      

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    4.2.2多樣的營銷結構  

          

          
    
          
                      

          

          
      

          

          
    
          
           

          

          
    最后總結一下，我認為交互設計也包含了視覺，所以我們在決定用什么樣的設計形式之前需要考慮更多，入業務、用戶價值等等，從而用更加有價值的交互策略提出問題、解決問題會比單純的用規范去搭建界面更加有效。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    
          
           

          

          
    二、為什么UI配色那么難  

          

          
    
          
                      

          

          
    不管是做UI設計還是畫插畫，有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠，其實不然。一個可能是大家總結的太少，從來都是憑感覺和運氣去配色，但其實都是有講究的。本文不會給大家重復講解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩，并且在產品設計中使用的。 

          

          
    
          
           

          

          
    
          
           

          

          
    1.人類對色彩感知的原理
          
           

          

          
    
          
           

          

          
    大家都知道，對于不同的顏色，我們對其的感知是不同的，有人覺得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道我們眼睛內存在兩種感光細胞：視錐細胞和視桿細胞，視桿細胞能夠感知光線強弱但無法感知顏色，而視錐細胞卻相反，視錐細胞內還有3種對不同頻率光敏感的細胞。我們經常會用到視錐細胞，而視桿細胞卻用的少，更多的是在黑暗的環境中使用的多。 

          

          
    
          
           

          

          
    視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞，分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感，它的范圍包含的比較廣，特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    大家在平時生活中都能看到，在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識，因為這些非常醒目。更容易被紅視錐細胞感知到，但如果你的標識用的是冷色調那這個交通事故可能要發生的頻繁的多。 

          

          
    
          
           

          

          
    
          
                      

          

          
    1.1人對色彩邊緣的對比更加敏感  

          

          
    
          
                      

          

          
    我們來做個實驗，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學看上去都會覺得是個漸變色，但其實它就是一個純色，不信的同學可以自己在工具中嘗試一下。 

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    但如果你把這個色塊拿出來后，不在這個環境中直接進行邊緣對比，那就不會出現漸變的情況了。那光說原理，我們也來看一下在產品設計中需要注意的地方，因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置，這樣就會造成邊緣視覺的對比，本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    如果你想要讓兩個顏色接近的元素具有識別度，那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外，如果是卡片樣式的設計，背景色一定不要過于灰暗也不要過于淺白，過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比，顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    還有，為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理，因為文字和背景疊加產生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號，當它被賦予顏色之后我們才會意識到它需要我們去注意或者可被點擊，但依然還是不夠明顯，所以為了強化可點擊這個感覺，我們才用了線框、背景色、箭頭等方式。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    2.色彩在UI設計中的作用  

          

          
    
          
                      

          

          
    1.加深品牌印象與品牌感  

          

          
    
          
                      

          

          
    一般來說，產品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非?；顫姟⒂腥ぁ⒑猛娴奶匦?，無論是線上還是線下都使用了這個品牌黃色，從每一個線上元素的主色，到線下包裝的印刷色。 

          

          
    
          
           

          

          
    但一定要注意的是，如果品牌的主色偏灰偏暗的話，可能不太適合線上的產品進行通用。例如之前的嚴選、云集、711便利店、宜家等產品的主色都是偏深和暗的，所以在線上的界面用起來會非常不和諧，和整體偏淺色、輕的風格對比起來太強烈，引起不適。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    而且線上覺得還OK的顏色，由于印刷的原理，實物也會更加偏低飽和和偏暗。 

          

          
    
          
           

          

          
    
          
           

          

          
    2.引導用戶視覺凹增加易讀性  

          

          
    
          
                      

          

          
    我們在上一篇十萬個為什么文章里提到了人們如何閱讀信息，提到了一個視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產品，使用了高亮色來引導用戶視覺。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    當然色彩的運用也會講整個頁面的層級凸顯出來，而不單純的用中性色來區分層級。 

          

          
    
          
           

          

          
    3.區分信息交互的狀態
          
           

          

          
    
          
                      

          

          
    同樣是上兩張圖，大家可以清晰的看到，美團中的附近熱賣好點、滿減標簽、價格，其實都只具備信息的呈現，但不具備交互的特征和狀態。但淘票票中的“4.7萬”和“展開”卻不一樣，“展開”使用了輔助藍色，這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上，當然也會有其他的色彩來表示可點擊。 

          

          
    
          
           

          

          
    所以不是所有的元素都要賦予顏色，這樣會使整個頁面非?；靵y 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    另外，UI設計中主色除了引導用戶的作用外，也可以表示當前正被激活的信息狀態。例如愛奇藝app中播放詳情頁面，當前板塊標簽和正在播放劇集的激活狀態。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    4.營造氛圍傳遞熱度  

          

          
    
          
           

          

          
    色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營造中也起了很大的作用，目前很多2c的產品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標，或者在首頁營銷板塊的瓷片區域都會用品牌色在活動時段內進行氛圍打造 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
                      

          

          
    3.在UI設計中色彩運用的坑與技巧
          
           

          

          
    
          
           

          

          
    1.色彩的正反兩面  

          

          
    在色彩的心理學上，大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面，可以看下方多種色彩的描述。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
      

          

          
      

          

          
      

          

          
      

          

          
      

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    然而其實很多的產品使用的色彩和我們所認知的會有一些差別，比如咖啡品牌的主色選擇，在我們常規人之中，咖啡應該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質沒什么關系的顏色 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    在瑞幸剛出來的時候，很多人其實不太習慣把這個藍色和咖啡結合起來，但是為了塑造品牌差異化，瑞幸一直將“藍色”作為品牌的主基調，“小藍杯”這一稱呼不但讓消費者感到親切，也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中，主基調同樣是使用藍色，不但符合了當下消費者的視覺偏好，也在為用戶留下記憶點之后，也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    2.顏色的禁忌用法  

          

          
    但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬要避開。 

          

          
    
          
           

          

          
    1.高飽和度的色彩  

          

          
    會讓人產生“幻覺”！讓人產生視覺疲勞，例如我將餓了么這個界面的色調調整一下大家看一下，不亮瞎算我輸。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    2.灰部使用過多的配色  

          

          
    為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    3.沒有規律且過多的配色  

          

          
    讓界面或者插畫看起來非?；靵y。一般來說顏色的使用也需要有側重點，所以我們常用的方法是6、3、1的色彩配比。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
      

          

          
    
          
                      

          

          
    4.熒光色  

          

          
    熒光色絕對不可以使用在UI界面中，尤其是主色。會讓你瞬間失明！ 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
                      

          

          
    5.太輕柔的顏色  

          

          
    在很多dribbble的飛機稿中，經常能看到這樣的配色和練習。無論是在練習中還是實際項目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點且輕飄飄的感覺。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
                      

          

          
    6.現在很火的新擬物化設計  

          

          
    說真的，這樣的風格確實耳目一新，但個人覺得可能不會成為主流。因為它就和第五種一樣：信息可識別性很差。就不說色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內障”。另外我們常說的一點就是所有元素都強調就等于什么都沒有強調，這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點自相矛盾的感覺。 

          

          
    
          
           

          

          
    為了營造這樣的“新擬物”的輕量氛圍，還不得不在整個界面中簡化大部分元素，能不加文字就不能加文字，說的好聽叫做使用了奧卡姆剃刀原則，有一句話一直非常影響我做設計：“設計是需要被簡化的，但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    7.不要將對抗色重疊  

          

          
    例如下方，兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    4.正確的UI配色方法  

          

          
    
          
                      

          

          
    定義主色  

          

          
    
          
           

          

          
    首先我們必須要說，色彩肯定是需要結合產品和用戶的定位去指定和提煉的，所以前期會需要去做一些研究例如用戶畫像，品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”，從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑，并且對市面上的app進行總結，我們發現大部分的產品色，簡單來講在我們HSB模式中去色都在一個固定的范圍，就像這樣。 

          

          
      

          

          
    
          
           

          

          
      

          

          
      

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    在上文中也說到用色比例的631法則，所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎，其實輔助色沒有非常明顯的1種或者兩種，都是多色的輔助色方案，都在一個配色的系統中選取顏色即可。大部分產品目前都是這樣的策略，一個主色搭配多個輔色，如果有其他獨立的板塊可能需要重新定義專屬的配色策略。 

          

          
    
          
           

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
    
          
           

          

          
    定義中性色  

          

          
    
          
                      

          

          
    其次再定義中性色，比如字體和線條以及背景色。字體是為了讓信息有對比，顯示層級，那么通常給2-3種層級即可，至少2種，至多3種。在選擇3個層次的中性色文字是，給大家一個建議：標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50，默認文字不要大于80，大家可以去嘗試一下，且中性色不得使用純黑。 

          

          
    
          
           

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
      

          

          
    
          
           

          

          
      

          



          
文章來源：站酷 作者：應駿

          


          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.           
          

          
    
          

          

          
    免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 

          
            
          
              
                評論(0)
                瀏覽(1509)
              
                          
          
          
          
                      
          
            
            
          圖標設計，你需要了解這些...
          
            
          
               純純                                            
          
            
          
    目錄
          

          

            
    
          • 
        
            
            圖標風格匯總
        
            
    
            • 
    
          • 
        
            
            圖標設計流程
        
            
    
            • 
    
          • 
        
            
            案例講解
        
            
    
            • 
    
          • 
        
            
            圖標資源輸出
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    01 常見圖標風格匯總

          

            
    
          • 
        
            
            線性
        
            
    
            • 
    
          • 
        
            
            面型
        
            
    
            • 
    
          • 
        
            
            線面
        
            
    
            • 

          

          
    
          
           

          

          
    
          
           

          

          
    1、線性 

          

            
    
          • 
        
            
            單色
        
            
    
            • 
    
          • 
        
            
            雙色
        
            
    
            • 
    
          • 
        
            
            漸變
        
            
    
            • 
    
          • 
        
            
            不透明度
        
            
    
            • 
    
          • 
        
            
            一筆成形
        
            
    
            • 
    
          • 
        
            
            斷點
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    1.1單色 

          

          單色線性擁有簡潔、清晰的特性，在視覺層級上較低，適用于基礎功能圖標。b端較為常見，移動端常見在設置頁面或導航欄通知、分享等圖標設計上。 
          

          
     

          

          
    
          

          

          
    1.2雙色 

          

          雙色線性在單色的基礎上豐富配色，解決了單色線性原本過于單調的問題，在提升趣味性的同時，也將視覺層級進行了提高，同樣適用于基礎功能圖標。在使用過程中需要注意的是豐富的配色會偏向年輕化，需要考慮是否符合產品風格及主流目標用戶審美。 
          

          
     

          

          
    
          

          

          
    
          

          

          
    1.3漸變 

          

          線性漸變還可以在用色上進行區分，簡潔的用色可以給人帶來科技、炫酷感，在車載ui中較常見。豐富的漸變配色則更適合運營入口設計，有著年輕化、熱烈的氛圍。 
          

          
     

          

          
    
          

          


          

          

          
    1.4不透明度 

          

          線性雙色可以和不透明度風格進行很好的比較，前者視覺更跳躍，個性更鮮明。而后者在使用時普適性更強，即豐富配色細節，又避免視覺過于跳躍（可以把它理解為同類色配色）。所以在大多數使用場景下，不透明度風格都是一個很好選擇。 
          

          
     

          

          
    
          

          


          

          

          
    1.5斷點 

          

          斷點風格有線性單色&雙色該有的個性，并且在線性雙色基礎上繼續提升趣味性，使用需要注意產品目標人群年齡段。 
          

          
     

          

          
    
          

          

          
    
          

          

          
    1.6一筆成型 

          

          
    該風格設計感和個性都極強，很考驗設計師對造型繪制的把控，功底不夠就很容易導致設計后出現識別問題。所以設計難度較大，且延展性較弱，難以表達復雜語義，使用需謹慎。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2、面性
          

          

            
    
          • 
        
            
            單色
        
            
    
            • 
    
          • 
        
            
            雙色
        
            
    
            • 
    
          • 
        
            
            不透明度
        
            
    
            • 
    
          • 
        
            
            晶白
        
            
    
            • 
    
          • 
        
            
            磨砂玻璃
        
            
    
            • 
    
          • 
        
            
            等軸側（2.5d）
        
            
    
            • 
    
          • 
        
            
            漸變
        
            
    
            • 
    
          • 
        
            
            新擬態
        
            
    
            • 
    
          • 
        
            
            輕質感
        
            
    
            • 
    
          • 
        
            
            明暗質感
        
            
    
            • 
    
          • 
        
            
            寫實
        
            
    
            • 
    
          • 
        
            
            抽象
        
            
    
            • 
    
          • 
        
            
            卡通插畫
        
            
    
            • 
    
          • 
        
            
            像素風格
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          面性與線性的區別在于前置視覺面積更大，整體視覺層級比線性高。下面部分和線性風格重疊的內容就不贅述。
          

          
    
          

          

          
    
          

          

          
    
          
           

          

          
    2.1單色 

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.2雙色 

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.3不透明度 

          

          
    面型不透明度風格，通過調節前后不透明度可以帶來較強的空間感，使用場景較廣泛。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.4晶白 

          

          
    晶白嚴格來說也算質感圖標（白色質感）的一種，常見于品類圖標設計，通過透明度、投影、漸變等參數調節，使整體立體感和空間感都很強。

          

          
     

          

          
    
          
           

          

          
    
          
           

          

          
    2.5磨砂玻璃 

          

          
    又叫毛玻璃風格，是通過背景模糊，或剪切模糊圖層的技法來表達通透、有層次、精致的視覺感受，但由于容易與淺色背景相融，造成對比度不足難以識別的問題，所以在使用中需要注意無障設計。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.6等軸側 

          

          
    也叫2.5d，有很強的趣味性，及識別度，適合重要入口或運營設計。但這類風格較為卡通，且表現花哨。使用需要注意應用場景及目標人群年齡段，避免干擾信息閱讀和不符和產品風格。

          

          
     

          

          
    
          
           

          

          
    
          
           

          

          
    2.7漸變 

          

          
    這類風格可以很好的吸引用戶注意力，在電商、美食類產品中較常見，主要注意配色干凈協調。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.8新擬態（Neumorphism） 

          

          
    新擬態圖標色彩相對單一，與背景融合度較高，通過高光、投影表現一定的立體感。通常是整個產品就是新擬態風格時才使用。所以該風格局限性較大，再有這類風格與背景對比較弱，無障設計問題較大。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.9輕質感 

          

          
    通過大量漸變、投影來表現立體感，整體風格偏年輕化，常見在教育類產品中，使用注意配色干凈和諧。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.10明暗質感 

          

          
    通過調節同一色相不同明度、飽和度來營造前后空間感，整體風格統一。

          

          
     

          

          
    
          

          

          
    2.11寫實 

          

          
    這類圖標特點很明顯，有極高的識別度，目前美團外賣品類區入口就是該風格，整體偏年輕化。主要考驗設計師造型繪制、技法表現能力。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.12抽象 

          

          
    通過幾何圖形組合、色彩使用來表達美的視覺感受。這類圖標藝術（裝飾）價值更大，不追求識別度，美觀即可。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.13卡通插畫 

          

          
    這類風格既可以做圖標又可以做空狀態插圖，設計美觀有特色即可。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2.14像素風格 

          

          
    這類移動端界面較少見，目前只在一個海外電商產品（Jollychic）中看過，還有就是一些像素游戲中，比如「泰拉瑞亞」、「我的世界」。

          

          
     

          

          
    
          

          

          
    
          

          

          
    3、線面 

          

            
    
          • 
        
            
            線面
        
            
    
            • 
    
          • 
        
            
            描邊插畫
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    3.1線面 

          

          和線性雙色圖標類似，趣味性較強，具備個性化特點，可以做Tab選中狀態。 
          

          
     

          

          
    
          

          

          
    
          

          

          
    3.2描邊插畫 

          

          類似卡通插畫，在卡通插畫基礎上加入描邊。同樣顏色，在一些特定的前后交接處利用線條做區分，算是多一種設計表現形式，同樣美觀有特色即可。 
          

          
     

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    4性格 

          

            
    
          • 
        
            
            粗線
        
            
    
            • 
    
          • 
        
            
            細線
        
            
    
            • 
    
          • 
        
            
            圓角
        
            
    
            • 
    
          • 
        
            
            直角
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    4.1粗線 

          

          
    力量感、穩重、男性等感受
          
           

          

          
     

          

          
    
          

          

          
    
          

          

          
    4.2細線 

          

          品質感、精致、女性化 
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    4.3圓角 

          

          
    安全、親和、年輕

          

          
     

          

          
    
          

          

          
    
          

          

          
    4.4直角 

          

          嚴謹、正式、果斷利落 
          

          
     

          

          
    由于圖標風格繁多，所以以上列舉并不包含所有圖標風格。

          

          
    
          

          

          
    
          

          

          
    02 圖標設計流程

          

            
    
          • 
        
            
            明確語義
        
            
    
            • 
    
          • 
        
            
            關鍵詞詳解發散
        
            
    
            • 
    
          • 
        
            
            確定風格
        
            
    
            • 
    
          • 
        
            
            提取造型
        
            
    
            • 
    
          • 
        
            
            創意輸出
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    1、明確語義 

          

          
    圖標存在的目的是起引導作用，在豐富頁面視覺的同時，幫助用戶更快的獲取信息（當然圖標的使用意義還有很多）。設計師在將文字翻譯成圖標前，必須先理解其文字含義。因為最終呈現的圖標，需要用戶一眼能準確反翻譯其中含義（藝術抽象、裝飾類圖標除外）。

          

          
    在C端設計中，以Tab為例，一些常見文案：首頁、分類、發現、我的，這類語義還算比較清晰的。但在B端設計或工具類APP中就會遇到一些復雜語義。以我的工作來說，目前在做一款網站搭建工具，后臺常會需要設計組件及對應的圖標，比如：滑動商品、多圖列表、上拉圖文列表這些語義比較復雜的圖標，在一定程度上會比較難精準傳達文案。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2、關鍵詞詳解發散 

          

          
    這一步有點類似情緒版使用，但不同的是：我們需要將確定的詞（A)進行詳細解釋，再將解釋文案中關鍵的詞語進行發散，得出一系列相關聯的詞（A1、A2、A3…）。有時間還可以根據這些詞找到對應的圖片，再看在這些相關聯的圖片中，有哪些細節可以傳遞最開始我們確定的那個詞（A）的意思。

          

          
    
          

          

          
    
          

          

          
    3、確定風格 

          

          
    我們可以借助情緒版，根據產品定位和目標用戶描述，再結合應用場景，在目前已有的風格中找到符合產品氣質，符合當前模塊視覺層級的圖標風格。

          

          
    前面我們已經了解了目前常見的圖標風格有三大類：線性、面型、線面，其中還有很多細分，比如在線性中又分粗線（沉穩、力量）、細線（品質）、曲線（女性化），還有圓角、直角，每種類型所傳遞的感受都不同。在創意前期，我們將每個點合理進行隨機組合（如下圖）即可創造一種更新穎的風格。

          

          
     

          

          
    
          

          

          
    
          

          

          
    4、提取造型 

          

          
    經過關鍵詞詳解發散，其實我們已經獲得了很細節點，接下來將這些細節點進行合理融合后，就可以得到代表同一語義但形式各異的基礎圖標樣式（此時還只是想法階段，可以通過手繪方式記錄組合形式，不用特別精細化）。

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    5、創意輸出 

          

          在設計執行前我們需要先了解兩個大知識點： 
          

            
    
          • 
        
            
            圖標設計規范
        
            
    
            • 
    
          • 
        
            
            圖標設計注意點
        
            
    
            • 

          

          
    
          

          

          
    5.1圖標設計規范 

          

            
    
          • 
        
            
            常見圖標尺寸
        
            
    
            • 
    
          • 
        
            
            圖標盒子使用
        
            
    
            • 

          

          
    
          

          

          
    5.1.1、常見圖標尺寸 

          

          
    在界面圖標設計中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）

          

          
     

          

          
    
          

          

          
    
          

          

          
    5.1.2、圖標盒子使用 

          

          什么是圖標盒子？其作用是什么？
          

          
    圖標盒子即圖標約束網格，來源于Material design。使用圖標盒子有利于使我們創造的系列圖標保持規范與統一。

          

          
     

          

          
     

          

          
    
          

          

          
    
          

          

          
    5.2圖標設計注意事項 

          

            
    
          • 
        
            
            簡潔美觀
        
            
    
            • 
    
          • 
        
            
            易于識別
        
            
    
            • 
    
          • 
        
            
            細節統一
        
            
    
            • 
    
          • 
        
            
            像素對齊
        
            
    
            • 
    
          • 
        
            
            視覺大小一致
        
            
    
            • 
    
          • 
        
            
            飽滿透氣
        
            
    
            • 
    
          • 
        
            
            融入品牌基因
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    1、簡潔美觀 

          

          
    圖標是否美觀，會受設計師對圖標造型把控、圖標構成元素比例、配色等設計能力影響。在UI界面功能圖標設計中，通常會盡量減少不必要的細節，降低圖標復雜度，來幫助用戶快速識別。當然圖標也有豐富細節的做法，常見在一些重要運營入口上。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2、易于識別 

          

          
    識別度的問題，在最前面明確語義中就有提到過，這里就不贅述。

          

          
    
          

          

          
    
          

          

          
    3、細節統一 

          

          
    在細節中包含：表現風格、描邊粗細、端點類型、圓角大小、斜角角度、配色、投影參數等（不同風格圖標的細節不同，這里只是列舉部分），上述細節在系列圖標中都應保持一致。

          

          
     

          

          
    
          

          

          
    
          

          

          
    4、像素對齊 

          

          
    在圖標繪制中，需盡量避免坐標位置xy或寬高參數出現小數點，以此保證最終導出的圖標是清晰的。

          

          
     

          

          
    
          

          

          
    
          

          

          
    5、視覺大小一致
          

          

          
    由于不同圖標外輪廓不同，就會導致哪怕在物理大小上相同的圖標（假設都是24x24），但視覺上可能還是會給人大小不一致的感受，因此我們需要借助前面提到的圖標盒子進行約束調整。

          

          
     

          

          
    
          

          

          
    6、飽滿透氣 

          

          
    圖標的飽滿透氣，不一定需要加入很多筆畫（描邊、裝飾等）細節。而是盡可能在形成風格的同時，簡化能影響識別度的關鍵筆畫，通過調節筆畫大小、長短、位置使圖標達到一個最平衡狀態。

          

          
    
          

          

          
    以如下途牛_我的頁面_功能區圖標為例：

          

          
     

          

          
    圖中標紅圖標就存在飽滿度不足，及內部較擁擠的情況，第一感受是看起來不舒適，品質感比較低。除此外，還存在如下問題：

          

          

          
    
          

          

            
    
          • 
        
            
            圖標大小很明顯不一致
        
            
    
            • 
    
          • 
        
            
            設計語言不統一，有圓角有直角
        
            
    
            • 
    
          • 
        
            
            圖標風格不一致，有透明度+分割形式（我的保單）、有純透明度形式（專屬顧問、我的收藏）、還有其余單色實心形式
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    7、融入品牌基因 

          

          
    在圖標中融入品牌基因可以有效的提升產品品牌感，作為高階設計師必備技能之一，常見提取維度：

          

            
    
          • 
        
            
            顏色
        
            
    
            • 
    
          • 
        
            
            設計語言
        
            
    
            • 
    
          • 
        
            Logo輪廓 
            
    
            • 

          

          
    
          

          

          
    以我之前的豆果美食項目為例，提取到如下細節： 

          

          
     

          

          顏色：提取黃色、綠色兩類顏色 
          曲率（設計語言）：品牌Logo走線順滑、自然、圓潤，個性鮮明 
          分離（設計語言）：黃色區域與綠色區域雖不相交，但存在聯系。（分離間留白） 

          

          

          
    
          

          

          
    根據提取到的基因，最終得到如下兩套風格不同，但語言相同且都具備品牌感的圖標。

          

          
     

          

          
    
          

          

          
    Logo輪廓：在圖標中融入品牌logo外輪廓（Google Play），或根據logo輪廓結合應用特性進行延展（Microsoft）。

          

          
     

          

          
     

          

          
    
          

          

          
    
          

          

          
    03案例展示

          

          就以途牛為例，對我的頁面功能圖標進行優化。 
          

          
    
          

          

          
    1、明確語義 

          

          
    根據文案進行詳細翻譯，幫助我們充分理解文案。

          

          
     

          

          
    
          

          

          
    
          

          

          
    2、關鍵詞詳解發散 

          

          以「專屬顧問」為例：
          

          
    釋義：有專門的知識或經驗，受聘為機關團體或單獨個人提供專門咨詢的人。

          

          
    提取釋義中關鍵信息，生成關鍵詞：專業、專人，再根據關鍵形容詞發散一系列具象名詞。

          

          
     

          

          
    
          

          

          
    
          

          

          
    3、確定風格 

          

          
    根據產品調性和模塊視覺層級以及考慮延展性，初步確定如下風格組合起來是比較適合：

          

          
    
          

          

          線性：雙色、不透明度、斷點 
          面性：單色、雙色、不透明度、輕質感、明暗質感 
          線面：線面 
          

          
    
          

          

          
    在實際查看中，發現Tab的風格為單色+不透明度+斷點風格。

          

          
     

          

          
    為了和Tab拉開差異，最終確定以如下風格進行組合表現比較符合產品調性：

          

          
    線性：雙色

          

          
    面性：單色、雙色、不透明度、輕質感、明暗質感

          

          
    線面：線面

          

          
    
          

          

          
    
          

          

          
    4、提取造型 

          

          
    通過手繪或大腦想象進行造型構思，這里我就不展示手繪過程（行吧，我承認就是畫的太丑了不敢放）。

          

          
    
          

          

          
    
          

          

          
    5、設計執行 

          

          
    由于不同風格對圖標造型構思有所影響，且圖標類型很多，不同特點組合起來樣式更多。案例精力有限，所以只以線性雙色風格做演示，希望大家靈活使用。 

          

          
    
          
           

          

          
    這一步就是將手繪圖形矢量化，在矢量化創意過程中，我們可能會對手繪的圖形進一步簡化細節或新增造型，這都很正常。只需注意在整個繪制過程中遵循圖標設計規范，以及注意圖標設計注意事項即可。

          

          
     

          

          
    圖標盒子使用

          

          
    
          

          

          
     

          

          
    創意輸出

          

          
    
          
           

          

          
    Tips：

          

          在繪制造型時需注意，圖標文案詳解中的關鍵詞也有優先級，以如下「禮品卡」圖標為例，是表達禮品的意思多？還是表達卡的意思多？這個會影響圖標中相關元素的面積大小。站在商業角度看可能會更傾向于方案2，突出禮品，來吸引用戶。站在入口文案清晰傳達的角度，可能我會更傾向于方案1。 
          

          
     

          

          
    1or2？

          

          
    
          

          

          
    最后對專屬客服進行多風格嘗試，最終效果如下：

          

          
     

          

          
    
          

          

          
    附上部分繪制過程中的淘汰稿：

          

          
     

          

          
    
          

          

          
    
          

          

          
    04圖標資源輸出

          

          在將圖標輸出給前端前，需要溝通好使用何種格式，目前常用圖標格式分為兩大類： 
          

          
    
          

          

          
    矢量格式 

          

            
    
          • 
        
            
            SVG：縮放無損、體積小、支持前端樣式修改參數、單色情況下方便前端修改顏色來表達圖標狀態，減少重復上傳。
        
            
        
            
            
            
        
            
    
            • 

          

          
    位圖格式 

          

            
    
          • 
        
            
            PNG：支持透明格式
        
            
    
            • 
    
          • 
        
            
            JPG：兼容性強，適合大尺寸高飽和度圖像
        
            
    
            • 
    
          • 
        
            
            GIF：動態圖標使用，缺點是透明情況下邊緣容易出現鋸齒。
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    這里主要介紹靜態圖標中，svg格式在工作中如何輸出給前端同學使用（借助iconfont）。 

          

          
    
          

          

          
    svg圖標交接方式： 

          

          
    1、圖標資源優化 

          

          
    在iconfont官方繪制指南中有描述，在導出前需要按如下規則優化圖標資源：

          

          
     

          

          
    
          

          

          
    
          

          

          
    2、選中圖標導出svg格式 

          

          
    以Figma為例，優化圖標資源后，選中圖標將輸出格式選擇為導出svg。

          

          
     

          

          
    
          

          

          
    
          

          

          
    3、上傳iconfont 

          

          
    在資源管理下，選擇需要上傳的位置。

          

          
     

          

          
    
          

          

          選擇上傳圖標 
          

          
     

          

          
     

          

          
    
          

          

          
    
          

          

          4、選擇顏色提交模式
          

          
     

          

          
    去除顏色并提交：適合單色圖標，去除顏色提交可以方便前端使用代碼修改參數，減少不同狀態圖標重復上傳。

          

          
    保存顏色并提交：適合多色圖標（注意：在單色情況下，選擇保留顏色提交，前端則無法通過代碼修改圖標顏色）。

          

          
    
          

          

          
    
          

          

          
    最后當我們把圖標都上傳好后，就可以將前端同學拉入團隊項目中開心進行玩耍。

          

          
     

          

          
     

          

          
    
          

          

          
    
          

          

          
    好了，以上就是本篇要分享的全部內容，希望對各位有所幫助。
          

          

          

          
    
          
        文章來源：站酷 作者：幺零三
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.          
    
          
    
          
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          

          
            
          
              
                評論(0)
                瀏覽(1612)
              
                          
          
          
          
                      
          
            
            
          別光抄了，信息卡片應該這樣設計！
          
            
          
               純純                                            
          
            
          
    
          
        工作中我們經常會接到一些信息卡片的設計需求，在早期很長一段時間里都困擾著我。和大多數剛入門的小白一樣，當接觸到這類需求的時候，下意識就是打開自己的的Eagle，找合適的參考，去借鑒排版布局。但是其實最后只知道參考這樣做好看，對于作者的設計思路并不清楚。后面我嘗試去總結其中的規律，也得出了自己的一些設計思路。
    
          

          

          
    
          

          

          
    
          

          

          
     

          

          
    
          

          

          
    
          

          

          
    02 這里講的信息卡片是什么？ 

          

          
    讓我們先看下各類App中，一些比較不錯的信息卡片長什么樣：

          

          
     

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    03 一個信息卡片包含什么內容？ 

          

          
     

          

            
    
          • 
        
            
            圖片
        
            
    
            • 
    
          • 
        
            
            圖標
        
            
    
            • 
    
          • 
        
            
            文字
        
            
    
            • 
    
          • 
        
            
            標簽
        
            
    
            • 
    
          • 
        
            
            按鈕
        
            
    
            • 
    
          • 
        
            
            布局
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    1【圖片 】 

          

          
    圖片理解很簡單，就是該卡片想表達的信息主體，可以是商品、風景、插畫等，PGC內容圖片通常由運營把控，UGC內容為用戶自行上傳。雖然上線后實際上傳的圖片，對于設計來說沒有太多關系，但在設計稿中還是需要嚴格控制圖片質量。（一定程度上也能提高過稿率）

          

          
    圖片挑選需要注意如下： 

          

            
    
          • 
        
            
            高清無碼
        
            
    
            • 
    
          • 
        
            
            主體突出且簡潔
        
            
    
            • 
    
          • 
        
            
            配圖與文字信息相關聯
        
            
    
            • 
    
          • 
        
            
            多圖片情況下，視線保持同一水平線或同一角度
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    2【 圖標 】 

          

          
    圖標的出現有以下幾類：品牌特定logo、特殊字段圖形化（如性別、定位、點贊、VIP、關閉等等，將字段圖形化后可以減少該組件內的文本信息，方便設計排版的同時提升整體閱讀體驗）、氛圍點綴（主要在于豐富卡片，提升設計感來吸引用戶注意）

          

          
    圖標設計需要注意如下： 

          

            
    
          • 
        
            
            清晰度：品牌圖標避免過小，導致難以分辨。
        
            
    
            • 
    
          • 
        
            
            識別度：字段圖形化后一定需要確保擁有足夠的識別度，盡量在大眾認知范圍內。比如“+”可以代表添加和關注、“x”代表關閉，“大拇指”和“愛心”代表點贊、“皇冠”代表VIP等等。
        
            
    
            • 
    
          • 
        
            
            風格一致：氛圍點綴圖標在配色上，需要保證與產品調性一致，或在色彩情緒上，與該模塊傳遞的感受一致。還有一些細節，比如線性圖標描邊粗細，圓頭還是方頭端點，這類盡量保持一致（當然也可根據情況演變新的風格，但注意風格種類不宜過多）
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    3【 文字 】 

          

          文字即對圖片的描述信息，通常分為：標題、正文、輔助信息、優惠信息、數據信息（評分、價格、點贊評論數等） 
          

          
    文字信息處理需要注意如下： 

          

            
    
          • 
        
            
            對比：需明確頁面信息權重，突出重點，便于有效傳遞信息。移動端常見對比方式：特殊字體對比、字號差對比、色彩對比、修飾元素（點線面）點綴對比。重點需要注意，避免在一個卡片中，采用過多不同大小字號和顏色去表現信息層級，盡量使層級精簡與規范。
        
            
    
            • 
    
          • 
        
            
            對齊：保證卡片內信息之間存在某種視覺聯系，信息結構清晰。對齊方式分類：左對齊（符合左到右的閱讀習慣，閱讀體驗最佳）、右對齊（閱讀類文本比較少見，一般是為了將分好組的信息填充卡片四角）、居中對齊（居中傳遞嚴肅、正式感，在移動端中較少見，適合信息較少的情況下使用）
        
            
    
            • 
    
          • 
        
            
            親密性：將信息通過留白、分割線、色塊等方式來成組劃分，避免信息散亂。
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    4【 標簽 】 

          

          標簽指活動通知、產品賣點、重要時間、優惠信息等這類需要突出的內容，標簽按視覺層級由高到底依次劃分為：異型標簽、色塊型標簽、描邊型標簽3大類。 
          

          
    
          

          

          
     

          

          
    標簽處理需要注意如下： 

          

            
    
          • 
        
            
            視覺層級：一個卡片內可能出現不同類型的標簽，比如同時有活動通知、優惠信息、產品關鍵詞，這個時候就需要了解各類信息重要層級，正確選擇標簽形式（異型、色塊、描邊），幫助用戶快速抓住產品重點。
        
            
    
            • 
    
          • 
        
            
            極限場景：標簽內字段不宜過長，需要考慮最大寬度，進行合理布局。（牽扯到屏效比）
        
            
    
            • 
    
          • 
        
            
            呼吸感：合理定義標簽內部文字與底板的上下左右間距，避免擁擠。
        
            
    
            • 
    
          • 
        
            
            設計感：標簽多數是帶有活動屬性，在設計手法上可以嘗試破型設計，還可以嘗試加入一些小圖標、紋理，一方面營造活動氛圍，提升產品品質感。一方面圖標具有一定語義，可輔助用戶識別。（適合單個特殊標簽添加，而不是一類標簽，因為多個一樣的標簽配上圖標同時展示太亂）
        
            
    
            • 
    
          • 
        
            
            對比度：在色塊標簽中需要重點注意，通常色塊標簽又分以下3類：有彩色底板+白色文字、帶不透明度的有色彩底板+有彩色文字、消色底板+消色文字，在挑選顏色時需注意文字與底板對比足夠清晰，減少閱讀障礙。
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    5【 按鈕 】 

          

          按鈕是卡片上最重要的元素之一（部分卡片也可能沒有），作為一個行動點，Ta的作用在于吸引用戶點擊。按鈕在表現形式上和標簽一致，我們最常見的有彩色底板+白色文字、消色底板+消色文字、描邊框+文字（有彩色描邊或有彩色字）。 
          

          
    
          

          

          
    按鈕和標簽在處理上很相似，可參照標簽。 

          

          
    
          

          

          
    
          

          

          
    6【 布局 】 

          

          布局指上述所有圖片、圖標、字段等信息，在卡片內的排布方式，常見布局方式：上下布局、左右布局、居中布局。 
          

          
    
          

          

          
     

          

          
    信息布局需要注意如下： 

          

            
    
          • 
        
            
            拓展性：卡片中字段的長短對布局的影響較大，字段較長且多的情況下需要的占用的空間更多，所以常見是上下布局。
        
            
    
            • 
    
          • 
        
            
            屏效比：上述拓展性與屏效比的關聯緊密，在卡片中，為了保證一行文字最大顯示，通常文字都是單獨一行，避免左右存在元素占用文字橫向空間。但單獨一行就意味著增加了卡片高度，雖然單個卡片內文字顯示多了，但整個一屏中展示內容變少。為了便于理解上面這段話，這里我們可以看到淘寶這個案例，淘寶的推薦卡片中信息很多，在遇到文案很長的情況下，為了平衡上面講的這個問題，使用到了如下較少見的布局方式。
        
            
    
            • 

          

          
     

          

            
    
          • 
        
            
            合理性：在列表式左右布局中，是選擇左文右圖，還是左圖右文。這需要看產品類型，在新聞資訊類產品中常見是左文右圖，而在美食、電商類產品中是左圖右文。再有在信息布局上也應符合人眼左到右，上到下的閱讀習慣。
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    04 如何做好一個信息卡片？ 

          

            
    
          • 
        
            
            明確產品類型
        
            
    
            • 
    
          • 
        
            
            明確應用場景
        
            
    
            • 
    
          • 
        
            
            了解目標用戶
        
            
    
            • 
    
          • 
        
            
            劃分信息權重
        
            
    
            • 
    
          • 
        
            
            同類信息歸組
        
            
    
            • 
    
          • 
        
            
            增強信息對比
        
            
    
            • 
    
          • 
        
            
            設計細節表現
        
            
    
            • 
    
          • 
        
            
            確定最終布局
        
            
    
            • 

          

          
    
          

          

          
    1【 明確產品類型 】 

          

          
    產品類型不同主要對布局產生影響。

          

          
     

          

            
    
          • 
        
            
            以文字為主的產品，比如前面講到的新聞資訊類，通常采用左文右圖的布局。
        
            
    
            • 
    
          • 
        
            以圖片為主的產品，比如美食、電商類，通常采用左圖右文或上圖下文。 
            
    
            • 

          

          
    原因：新聞資訊類，吸引用戶產生點擊的并不是因為圖片，而是具體的標題，通過標題用戶才能了解更多關于該卡片的信息。而美食、電商類產品則相反，這類產品圖片比文字更吸引人。

          

          
    
          

          

          
    
          

          

          
    2【 明確應用場景 】 

          

          在我之前一號店改版中提到，信息卡片可以分為列表式和卡片式兩大類，對應的優缺點如下： 
          

          
    
          

          

          
     

          

          
    卡片式：在卡片式中圖片是設計的重中之重。這是因為人是視覺動物，在卡片式設計中使用高質量的圖片能瞬間抓住用戶的眼球?？ㄆ皆O計實現了圖文的完美結合，能給用戶呈現良好的視覺效果。

          

          
    應用場景： 

          

            
    
          • 
        
            
            圖片為主，需要利用圖片給用戶帶來良好的視覺沖擊，提升瀏覽過程中的趣味性，從而吸引用戶長時間瀏覽。
        
            
    
            • 
    
          • 
        
            
            適合隨機推薦的內容，不適合進行查找。
        
            
    
            • 
    
          • 
        
            
            豐富內容展示，適合元素較多情況，可以讓各種形式的元素保持井然有序。
        
            
    
            • 

          

          
    
          

          

          
    列表式：信息集合一般是簡單的圖文組合（小圖+標題）或純文本信息。由于列表垂直排列每一行內容，相對卡片式，在同樣大的屏幕中可以展示更多內容，可供用戶閱讀信息更多，新聞類和數據類應用更青睞于這種設計。

          

          
    
          

          

          應用場景： 
          

            
    
          • 
        
            
            信息直白，用戶無需點擊查看，即能盡可能了解內容信息，適合快速查找。
        
            
    
            • 
    
          • 
        
            
            文本重要程度高于圖片，需要靠標題吸引用戶點擊。
        
            
    
            • 
    
          • 
        
            
            小屏幕應用場景。
        
            
    
            • 

          

          
    
          

          

          
    
          

          

          
    
          

          

          3【 明確目標用戶】
          

          
    目標受眾的屬性，對信息權重的劃分影響很大，比如對價格敏感的用戶，優惠信息的視覺層級就需要抬高。為了便于理解下面的案例，這里我定義的就是對價格敏感性用戶。

          

          
    
          

          

          
    
          

          

          
    4【 劃分信息層級 】 

          

          
     

          

          
    定義了目標用戶后，將卡片內所有元素羅列出來，并借助四象限分析的方法，對各個元素的權重進行劃分。

          

          
    
          

          

          
    
          

          

          
    5【 同類信息分組 】 

          

          
     

          

          
    將同類信息分組，便于后面確定元素之間的親密性關系。

          

          
    
          

          

          
    
          

          

          
    6【 增強信息對比 】 

          

          
     

          

          
    前面我們借助四象限，將信息重要程度進行了劃分。接下來對元素之間親密性和對比進行處理，設計用戶瀏覽視線，在該過程中對案例中的元素進行如下處理：

          

            
    
          • 
        
            
            圖片：這里圖片及比例保持不變
        
            
    
            • 
    
          • 
        
            
            圖標：將原版會員圖標+字段的方式更改為圖標，原因有兩個：1、會員圖標+字段的方式占用了較多的橫向空間，導致標題字段信息展示減少，同時還導致用戶在閱讀完標題后，閱讀下一行內容時視覺錯行嚴重（會員圖標+字段過長導致）。2、由于會員圖標代表會員內容，這是絕大對數產品對用戶有過的教育，所以這里重設了會員圖標并單獨展示。
        
            
    
            • 
    
          • 
        
            
            字體：對標題字體進行加粗，（16pt，Medium），價格字體加大加粗（24pt，Medium），劃線價加粗（12pt，Medium），按鈕文字&活動標簽文字（14pt，Medium）精簡其他輔助信息層級（12pt，Regular）
        
            
    
            • 
    
          • 
        
            
            標簽：優惠信息標簽由0.5pt改為1pt，提升視覺層級?；顒訕撕灋樯珘K降低不透明度+有彩色文字。
        
            
    
            • 
    
          • 
        
            
            按鈕：由于標簽為描邊樣式，為了拉開差異，突出按鈕，所以將按鈕改為實心色塊。
        
            
    
            • 

          

          
    
          

          

          
    做完上面這些后，可能大部分人覺得到這就可以了，但其實我們還可以再增加設計細節，這也是你與其他設計師拉開差距的地方。 

          

          
    
          

          

          
    
          

          

          
    7【 設計細節表現 】 

          

          
     

          

          
    由于案例不同，增加細節的方式不同，所以需要具體案例具體分析。在本次案例中，我通過新增圖標設計以達到豐富卡片細節的作用。在活動標簽中新增小喇叭圖標，來增強活動氛圍、增強信息視覺上的互動性、增強代入感。在按鈕中新增時鐘圖標，配合預約文案，讓用戶預知操作后可能的結果，并且提升按鈕視覺層級、提升點擊欲望。

          

          
    
          

          

          
    
          

          

          
    8【 確定最終布局 】 

          

          
     

          

          
     

          

          
    在布局中主要考慮兩個點：

          

          
    1、合理性&拓展性 

          

          
    由于該卡片的應用場景為推薦列表，所以這里保持原有的上下布局，遵從人眼閱讀習慣。

          

          
    2、屏效比 

          

          將活動標簽選擇放置在圖片與底板分割處，好處有： 
          

            
    
          • 
        
            
            借助這個方式，使圖文內容過渡順暢，閱讀體驗更佳。
        
            
    
            • 
    
          • 
        
            
            盡可能減少了標簽對產品圖的遮擋。
        
            
    
            • 
    
          • 
        
            
            壓縮卡片高度，最終達到提升屏效的目的。
        
            
    
            • 

          

          
    
          

          


          

          解決部分人可能存在的疑惑：
          

          
    
          

          

          
    Q1: 3張設計稿中活動標簽為什么進行修改？ 

          

          
    答：稿1到稿2，活動標簽樣式修改，位置調整，對應不同的用戶，對于價格敏感性用戶，顯然稿2更能刺激他們點擊。稿2到稿3，對標簽樣式再次進行加強。稿3到稿4，考慮該應用場景是在推薦列表中，為了避免出現多個同類型活動的卡片，導致過亂，所以修改了設計樣式。

          

          
    
          

          

          
    Q2:在稿3到稿4中優惠標簽這一排內容，和預約按鈕這一排內容，上下調整的原因是什么？ 

          

          
    答：1、將文字區域看做一塊完整的矩形區域，稿3整體看起來更完整，而稿2像是右下缺了一個角。2、在信息閱讀順序設計上，稿3的處理是優先讓用戶看到優惠相關信息，更加迎合價格敏感性用戶的需求。

          

          
    
          

          

          
    Q3:你認為最終稿還有優化空間嗎？ 

          

          
    答：這個案例，是我截圖與我司相關App的。我認為如果可以，還需要再了解目標用戶畫像，了解用戶真正在意的信息是那些，這些都會對最終方案產生影響，也只有知道這些才能得出最合適的哪個方案。這里我定義的是對價格敏感的用戶，基于這類用戶來說，我認為最終方案是合適的

          

          
    文章來源：站酷 作者：幺零三
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.           

          

          
    免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 

          

          
    
          

          
            
          
              
                評論(0)
                瀏覽(1892)
              
                          
          
          
          
                      
          
            
            
          設計師如何高效溝通需求
          
            
          
               ui設計分享達人                                            
          
            
          
    前言

          

          
    ——————————

          

          
    溝通是為了完成設定的目標，把信息、思想和感情，在個人和群體之間傳遞，并達成協議的過程。溝通目的一般分為：說明事物、表達感情、建立關系、達成目標。

          

          
    
          

          

          
    需求溝通是設計師和團隊圍繞需求目標，信息傳遞的過程，是設計師展開設計工作的起點，貫穿整個設計過程，溝通質量直接影響設計和項目質量。但因溝通復雜性、開放性，對很多新手設計師來說，在需求溝通過程中，可能會碰到一些共同的溝通問題，比如前期需求不明確導致設計頻繁修改、產品和體驗發生沖突時無法說服產品、溝通過程中陷入情緒爭吵、溝通中雞同鴨講等等。

          

          
    
          

          

          
    針對這些問題，本文嘗試梳理需求溝通過程中幾種典型場景和方法，以期幫助新手設計師快速識別需求溝通中的常見問題；提升溝通效率，快速達成共識；掌握溝通竅門，更精準高效的產出需求。

          

          
    
          

          

          
    本文主要分成2個部分，第1部分主要聚焦在需求溝通過程中的不同階段，面對的典型溝通問題和解決方案；第2部分主要介紹溝通中一些常見的技巧和方法。

          

          
    
          
        
          
    
          

          

          
    
          

          

          
    Chapter 1

          

          
    ——————————

          

          
    需求溝通的目標和方法

          

          
    
          

          

          
    1.1 設計師在不同需求階段的溝通目標

          

          
    通常設計師在處理需求的流程大致可以分成4個部分：了解需求->分析需求->探索方案->實現方案。在不同的階段，設計師要解決的核心問題不同：

          

          
    
          

          

          
    了解需求階段，設計師和產品針對需求目標進行討論，并和團隊就產品目標達成共識；

          

          
    
          
          

          

          
    分析需求階段，設計師和產品針對產品策略合理性進行討論，并提出體驗訴求；

          

          
    
          
          

          

          
    探索方案階段，設計師探索設計方案，并和產品就商業目標和體驗目標達成平衡；

          

          
    
          
          

          

          
    實現方案階段，設計師和產品協調優先級，調整方案，確保方案最大程度實現還原；

          

          
    
          

          

          
    

          

          
    
          

          

          
    
          

          

          
    1.2 如何更好的了解需求，明確目標，達成共識

          

          
    在了解需求階段，設計師需要了解需求來源、背景、要解決的問題和目標?？偨Y來看需求可大致分為2類：一類是需求目標較明確，產品有明確要解決的問題，如提升產品體驗、滿足某個用戶明確需求、完成某個產品目標；一類是需求目標較模糊，比如挖掘用戶潛在需求，探索新的業務方向。

          

          
    
          

          

          
    

          

          
    
          

          

          
    對于目標較明確的需求，在了解需求背景、解決標準、需求邊界、限制條件和責任人等問題后，即可進入需求分析，策略討論階段。

          

          
    
          

          

          
    但對于方向探索類需求，如何協助產品探索目標，和團隊達成關于目標的共識，是這階段的溝通重點。以一個創業的項目為例，產品想做一個圖片社區，原因是目前國內沒有頭部圖片社區。還原項目初期的溝通過程如下：

          

          
    
          

          

          
    

          

          
    
          

          

          
    在產品的催促和時間壓力下，設計并沒有圍繞產品定位、用戶群、產品目標進行充分討論，也沒有和團隊成員達成共識。在這種情況下，選擇跟隨產品的節奏，陷入了被動執行。由于前期并沒有針對需求進行細致的推敲討論，方案的輸出過程變成了試錯的過程。產品方向修改頻繁，這種被動的溝通方式，導致整個團隊目標感不清晰、理解混亂。

          

          
    
          

          

          
    

          

          
    
          

          

          
    經過反思和問題總結，設計師發起了主動溝通，運用設計方法協助產品明確需求，提升方向說服力，探索如何就目標和團隊達成共識。首先，需要和產品明確用戶群，并尋找用研協助，或發起快速訪談了解用戶；其次，組織團隊相關成員發起關于產品目標的討論，圍繞產品決策人給出的產品初步方向，團隊成員每人寫下對產品的期待，提煉總結團隊成員的想法，提煉總結產品目標；再次，根據用戶訪談材料，利用親和圖法，提取關鍵詞，從用戶訴求中洞察提煉用戶目標。最終，產品目標得以明確，團隊也取得了關于目標的共識，同時通過快速demo，來驗證優化，項目得以順利進行。

          

          
    
          

          

          
    

          

          
    
          

          

          
    
          

          

          
    1.3 如何更好的分析需求，確保產品策略合理性

          

          
    在了解需求背景、用戶群體，明確了需求目標后，進入需求分析階段，通常產品會給一個商業假設：假如做了xxxx，用戶就會xxxxx，產品可以達成xxxx目標。以一個需求為例子：產品想做一個任務體系，通過福利吸引用戶做任務，從而拉動產品活躍。

          

          
    

          

          
    
          

          

          
    如果設計師完全按產品給的商業假設輸出，方案產出過程貌似很順利，但可能隱藏了很多問題。以本需求為例，產品的商業假設邏輯是：用戶被福利吸引->用戶為拿到福利做任務->用戶獲得福利->產品完成目標訴求；

          

          
    
          

          

          
    但這個假設是正確的嗎？設計師的價值就在于，這個時候要能找出產品假設中的問題。通過對用戶的了解和洞察，還原用戶的實際使用過程可能會發生的問題。找到這些關鍵問題并通過和產品溝通協調解決掉這些問題，才能順利實現產品目標。

          

          
    
          

          

          
    通過對用戶實際參與過程的分析，用戶在看到任務獎勵后，實際需要權衡的內容很多，如福利吸引力夠不夠大、有沒有關系親密的好友可邀請、好友要完成的任務難度大不大？分析需求過程關鍵就是找到這些問題的對應策略，強化用戶參與的動力，降低參與難度。

          

          
    
          

          

          
    

          

          
    
          

          

          
    
          

          

          
    1.4方案探索階段，如何平衡商業和體驗訴求

          

          
    在方案輸出階段，設計師和產品最常發生的爭執是商業目標和體驗之間的沖突。產品為了達成商業目標，很多時候希望把達成商業目標的手段做的很強；

          

          
    
          

          

          
    

          

          
    
          

          

          
    當發生圍繞商業目標和體驗問題，誰都無法說服對方的情境時，設計師該如何溝通呢？

          

          
    
          

          

          
    首先，作為設計師要擺正溝通立場，理解商業化是任何產品的根本目標，體驗也是實現商業化手段之一，我們反對的不是商業化，而是簡單粗暴的商業化方式，商業化的前提是對目標用戶有足夠的了解和盈利模式的清晰判斷。

          

          
    
          

          

          
    其次，應能夠識別對于曝光越多越好，越直接越有效的這種思維方式，通常是一種鳥槍法的投機心理。在沒有更巧妙的解決方式時，最節省力氣的做法就是提升曝光等方式達成目標。

          

          
    
          

          

          
    當發生爭執時，如果僅僅站在設計立場上，用設計理論說服對方，通常效果有限。嘗試找到產品實現商業化目標背后的邏輯，不要用手段代替目的，探索更好的實現商業化方式的可能性，比如嘗試在合適的路徑上推薦，或探索用戶更容易接受的內容形式。

          

          
    
          

          

          
    

          

          
    
          

          

          
    
          

          

          
    1.5 方案實現階段，如何協調優先級，推動方案最大程度還原

          

          
    在方案實現階段，很多時候由于時間緊張，產品僅完成最核心功能，部分體驗相關功能一直無法得到優化。

          

          
    

          

          
    
          

          

          
    通常如果方案產品認可，但推進意愿不高時，可能的原因是：1.當前方案不是核心KPI，產品要優先保證對kpi影響最大部分完成；2.投入產出比不劃算，方案在產品看來投入的人力/時間/資源過大，并不值得；3.方案改動可能引發數據風險，產品并無法確保改動一定能帶來數據的成長；4.資源緊張，產品也很想實現方案，但項目時間/人力/資源真的很緊張。

          

          
    
          

          

          
    

          

          
    
          

          

          
    這種情況下，首先，要和產品夠分溝通他們的疑慮和擔心，到底是哪類問題；其次，從心態上也不用急于一時，做好長期推動的準備；還有，充分優化方案，消除產品疑慮，尋找合適時機進行推動。在項目逐漸迭代的過程中，對需要推動體驗優化點持續關注，盡可能放大方案價值，結合新的需求點，思考能否從價值拓展角度，如提升品牌價值、擴展性等角度提升方案說服力；同時，從縮小成本和打消產品疑慮角度，做足準備，推動方案。

          

          
    
          

          

          
    

          

          
    
          

          

          
    Chapter 2

          

          
    ——————————

          

          
    溝通技巧的問題

          

          
    溝通的過程是一個信息螺旋傳遞的過程，表達者的信息傳遞到接收者時，因為背景、環境、理解能力、傳遞完整度等差異，接收者僅能接收部分信息，而接收者在理解消化后，再將自己的信息傳遞出去，這個過程循環往復，會導致兩個最常見的溝通問題：目標偏離以及信息衰減。學習適當的溝通技巧，可以有效減緩目標偏離和信息衰減。

          

          
    
          

          

          
    2.1 如何防止溝通目標偏離

          

          
    要防止溝通目標偏離，首先要理解什么會導致目標偏離？1.目標不清晰，比如本來想找產品聊下某功能體驗不合理，但因為產品一直說項目時間緊，被傾訴了一通苦水后，忘記了本來要溝通的問題，轉移到了其他話題上，最后不了了之；2.缺乏同理心，比如當發生爭執時雙方不能互換角度，產品一直在說實現目標手段和現階段問題難點，設計在說體驗問題和設計規范，雙方互不妥協，陷入爭吵；3.陷入情緒，表達觀點時陷入情緒化的爭執。

          

          
    

          

          
    
          

          

          
    針對這三個會導致溝通目標偏離的問題，可使用以下技巧：

          

          
    
          

          

          
    ① 設定溝通目標并保持關注：在每次溝通前想清楚自己的目標和底線，嘗試用全局視角分析自己設定目標的合理性；在溝通過程中要經常反思當前溝通的問題是否已偏離了目標，對達成目標是否有幫助；發現目標偏離可嘗試改變節奏，思考接下來說什么有助于達成目標；

          

          
    
          
          

          

          
    ② 換位思考：能夠傾聽對方的問題和困難，嘗試尋找解決問題的辦法，而不是一直表達訴求，無助于問題的解決和推進；

          

          
    
          
          

          

          
    ③ 控制/傾聽情緒：美國心理學家埃利斯創建的ABC情緒理論，拆解了事件發生和情緒之間的關系，指出事件的發生并不是導致情緒的直接原因，我們持有的信念才是。因此在溝通中不要加入太多內心戲，過度解讀事件。比如產品讓設計反復改稿時，可能會解讀為產品在故意刁難，嘗試了解反復修改背后的原因，可能對解決問題更有幫助。

          

          
    
          

          

          
    
          

          

          
    2.2 如何減少溝通過程的信息損耗

          

          
    溝通過程中表達者的模糊表達和接收者的理解偏差，會導致溝通過程中的信息損耗。比如經常會聽見產品有以下類似的表達：“設計稿盡快輸出”、“頁面太結構化了，想要更社交化一點”、“能不能做得更有創意一點，更有趣點”當出現這些類似的溝通語句時，可以嘗試通過具體化方式，進行確認。

          

          
    
          

          

          
    

          

          
    
          

          

          
    對于可能會出現理解偏差的問題，重要的信息用自己的語言組織后再次確認“你的意思是xxxx嗎？”；重要的溝通后，可梳理溝通記錄，企業微信同步周知確認；方案的溝通過程可以快速畫草稿確認；盡可能的減少因為理解不一致導致的溝通問題。

          

          
    
          

          

          
    
          

          

          
    總結

          

          
    在需求溝通過程中，我們要對不同階段的溝通目標有清晰的認識，圍繞目標進行充分準備，運用設計方法了解用戶、了解產品核心訴求，做到知己知彼，才能進行有效的溝通。

          

          
    
          

          

          
    在溝通過程中保持對目標的關注，始終牢記溝通是為了解決問題服務的。適當學習溝通技巧較少溝通過程中的信息損耗。

          

          
    
          

          

          
    溝通是解決問題，共同協作的重要方式。如果你覺得自己不善于溝通，可能要反思下溝通前是否想清楚自己的溝通目標，對于解決問題的過程、方法是否熟悉，準備是否充分？當我們能做到知己知彼、胸有丘壑時，溝通可能就變得簡單起來。

          


          

          
    文章來源：站酷 作者：騰訊ISUX
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.          

          

          
    免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          


          
            
          
              
                評論(0)
                瀏覽(1590)
              
                          
          
          
          
                      
          
            
            
          設計趨勢ISUX報告-數字內容營銷篇
          
            
          
               ui設計分享達人                                            
          
            
          
    背景
          

          

          
    數字營銷是指借助于互聯網營銷方式，幫助業務方和消費者建立觸達渠道，實現業務的商業目標達成。按業務類型分為線下產品的數字廣告和數字內容（APP、影音、動漫、游戲等）線上推廣分發。本文主要聚焦在數字內容線上推廣分發上，嘗試從用戶獲取渠道、體驗方式、內容感知、新技術帶來的變化等幾個方面，為相關從業者梳理數字內容流行的營銷方式，以期提供一些啟發和借鑒。

          

          
    
          

          

          
    

          

          
    近年來用戶內容消費呈碎片化、視頻化，多元化趨勢。短視頻內容強勢崛起，這種方式可以讓用戶更輕松、更深度消費內容。在各類營銷類型中，短視頻逐漸成為推廣的重要方式，不僅在實體產品電商領域，日益成為重要的銷售方式，在數字產品的推廣上，也發揮越來越重要的作用。漫威在短視頻平臺注冊虛構報社賬號宣傳《蜘蛛俠：英雄無歸》電影，獲得海量關注和點贊。

          

          
    

          

          
    
          

          

          
    說唱歌手Lil Nas X用《Old Town Road》做BGM在短視頻平臺發起的牛仔挑戰（#Yeehaw challenge），使這首歌曲通過短視頻成為了全球爆款。這首歌在美國地區的流媒體播放量超過了25億次，在Billboard排行榜保持了19周的冠軍。

          

          
    
          

          

          
    

          

          
    
          

          

          
    美國創作型歌手兼唱片制作人 Charlie Puth 嘗試在短視頻平臺上發布一些旋律，發起了標簽挑戰 #writethelyrics，邀請粉絲們為旋律填詞，這個標簽累計視頻觀看量達到38億次。

          

          
    
          

          

          
    

          

          
    
          

          

          
    在游戲領域，短視頻/直播內容也正成為分發重要形式。短視頻巨頭已深入游戲腹地，2020年移動游戲用戶與短視頻用戶重合率達82.5%，近六成移動游戲用戶會用短視頻主動搜索游戲內容。短視頻在和游戲內容結合上有先天優勢，消費門檻低，體驗更沉浸，同時也可以快速獲取其他玩家的感受。除此外，對于游戲制作和發行方來說，這里也是通過內容創作獲取用戶的良好渠道。

          

          
    
          

          

          
    

          

          
    
          

          

          
    游戲依托賽事直播、KOL直播，聚集了大量高質玩家，相較于傳統分發方式，直播具備互動性、真實性、及時性等三大特點。KOL主播可以將游戲最直觀的展現在玩家面前，更可以利用高人氣迅速提升游戲熱度。Facebook gaming現在采用直播feeds的方式進行游戲的推廣，使玩家對游戲體驗感受更直觀。

          

          
    
          

          

          
    

          

          
    
          

          

          
    

          

          
    
          

          

          
    黑客帝國4在官網為用戶提供了一段可交互的宣傳視頻，根據用戶的選擇不同，觸發不同類型結局。讓用戶更有代入感和掌控感。有種“我”開啟了一段故事，也更容易帶來體驗上的驚喜感。

          

          
    
          

          

          
    

          

          
    
          

          

          
    洛杉磯流行藝術家 BIIANCO 為其單曲That’s what friends are for制作了互動音樂視頻，以互動游戲的方式讓觀眾進行多次選擇，探索屬于自己的故事。

          

          
    
          

          

          
    

          

          
    
          

          

          
    在游戲類內容宣傳上，為讓玩家更直接、更低成本的體驗到游戲的玩法和特點。借助2D、3D以及交互視頻素材高度還原游戲的真實場景，音效、視覺、玩法互動與游戲本身無異，將原有的游戲體驗前置，讓用戶在短暫的廣告展示時間中快速明白游戲的核心機制。

          

          
    
          

          

          
    

          

          
    
          

          

          
    

          

          
    
          

          

          
    2021年音頻內容呈爆炸式增長，播客這種很早就有的形式，在今年煥發了蓬勃生機。因為疫情原因，音頻內容呈爆發式增長，相較于其他數字內容表達方式，音頻覆蓋了更多互動場景，用戶可以在通勤、運動和打掃房子的時候在車里播放。

          

          
    
          

          

          
    21年初熱播的《流金歲月》不僅霸屏熱播熱榜，更首次將營銷可能性轉化到“看不見的”聲音領域，最終聯手十多家播客參與多方面討論了女性、友誼、成長等話題，精細化傳播，也讓更多電臺參與創作討論，最終“我的「流金歲月」”主題內容實現了全平臺百萬級的總播放量。

          

          
    
          

          

          
    

          

          
    Beats 就聯合播客《大內密談》推出了一檔名為「一首歌的誕生」的系列節目，主播相征會在節目中和各位音樂聊一聊他們的某一首歌從譜曲、寫詞到錄制的全過程。2021年，《大內密談》連續7年獲得Apple Podcasts年度精選播，擁有400多萬忠實聽眾，單期節目收聽量超過400萬次。

          

          
    
          

          

          
    

          

          
    
          

          

          
    

          

          
    
          

          

          
    影音、游戲聯動明星、品牌、知名IP、傳統文化產業、線下活動等等具有影響力的合作方進行戰略合作，擴大雙方影響力。如英雄聯盟和LV的跨界聯動，這款由LV設計的史上最昂貴、最奢侈的游戲皮膚，還未推出就捕獲了無數LOL玩家的心，在讓玩家興奮不已之余，還引發了“這款皮膚究竟有多貴”的討論。

          

          
    
          

          

          
    

          

          
    
          

          

          
    自2017年騰訊和敦煌研究院達成戰略合作以來，王者榮耀飛天及九色鹿主題皮膚、QQ音樂“古樂重聲”音樂會、敦煌詩巾、“云游敦煌”小程序和敦煌動畫劇陸續推出。三年間，累計超過2.5億人次參與了“數字供養人”，超過4000萬年輕人在王者榮耀中遇見了敦煌飛天，“云游敦煌”小程序目前已接待超過3700萬人次線上游客，40多萬用戶設計了自己專屬的敦煌絲巾，24萬用戶在騰訊公益平臺為敦煌石窟保護項目捐款，15萬用戶在線用聲音演繹敦煌動畫劇。

          

          
    
          

          

          
    

          

          
    
          

          

          
    2021年底熱劇《風起洛陽》聯動洛陽市文化單位正式發布“華夏古城宇宙”的全新概念，并宣布“華夏古城宇宙” 首發洛陽IP中的劇集《風起洛陽》、紀錄片《神都洛陽》、動畫片《風起洛陽之神機少年》，帶領觀眾開啟探索華夏文明的旅程。

          

          
    
          

          

          
    

          

          
    
          

          

          
    

          

          
    
          

          

          
    1）內容二創，形成粉絲傳播文化

          

          
    影視劇宣發期，通過話題互動或設置傳播內容，讓用戶創作內容進行傳播，如《魷魚游戲》引發自發傳播的摳糖挑戰也引起更多受眾注意激發用戶觀看。

          

          
    
          

          

          
    

          

          
    
          

          

          
    游戲也會在上線后逐步積攢口碑和玩家數量，官方在制作游戲時和后期推廣上會提供一些方便傳播的核心素材，由游戲粉絲玩家群體自發進行二次創作產生的UGC內容，也會引發大眾關注。很多玩家會圍繞游戲內容創作出新奇舞蹈、仿妝、COS、攻略、同人剪輯、漫畫等，提供廣泛的話題和討論度。例如《CS：GO》，它通過一條開箱視頻引爆短視頻平臺，打破了消費用戶的圈層，從游戲用戶到泛娛樂用戶，最終令游戲內箱子的價格從0.8元漲至2元，極大地促進了消費。

          

          
    
          

          

          
    

          

          
    
          

          

          
    2）打造慶典活動，激發用戶共情

          

          
    通過大型慶典活動，讓用戶共情，形成記憶共享，將志同道合的人聚在一起，形成文化傳播。如英雄聯盟每年都會舉辦盛大的全球總決賽開幕慶典，并加入一些讓人印象深刻的游戲元素。

          

          
    
          

          

          
    

          

          
    
          

          

          
    

          

          
    
          

          

          
    相較于通過中心化推薦方式向用戶展示廣告內容，新的趨勢是廣告主利用用戶社交關系鏈，在facebook、微信、QQ等社交平臺進行分享傳播。通過社交流量的傳播內容，讓受眾覺得更貼近自己，也更可信。相較于其他數字內容，在游戲分發上私域流量日益重要，很多頭部社交渠道在嘗試如何更好的通過私域流量帶動游戲分發。

          

          
    1）通過社交動態通知觸達

          

          
    Facebook游戲智能助手會在玩家的對手參與游戲后，通過Facebook與Messenger提示對方繼續玩游戲，這種方式可以吸引玩家快速回歸玩過的游戲；同時在首頁好友動態中可以看到好友的游戲邀請動態和相關戰績，對游戲有較高的流量傳播；游戲的高活玩家也可以通過邀請好友對戰或分享游戲活動等方式進行裂變傳播；

          

          
    
          

          

          
    

          

          
    
          

          

          
    2）線上社區深度觸達

          

          
    Discord建立起玩家之間互推、互鑒，玩家與開發者間直接互動的社區平臺；社區內的種子玩家可以更直接地與開發者接觸，讓自己的聲音被聽到；同時他們也是優質的渠道傳播者，將優質的討論內容、游戲動態進行分享，讓渠道轉化效率更高；

          

          
    
          

          

          
    

          

          
    
          

          

          
    同時Discord可以創建「臨時」游戲語音頻道，可以讓其他成員看到頻道內成員正在玩的游戲；玩家也可以將游戲實況傳輸到服務器，在語音頻道邀請朋友共同觀看自己的游戲“現場直播”，讓玩家的朋友在沙發上重現游戲的感覺；

          

          
    
          

          

          
    

          

          
    
          

          

          
    3）利用核心玩家作為推廣資源觸達

          

          
    游戲開發者利用多圈層KOL的優勢，引導他們產出與游戲相關的UGC，OGC內容，形成話題熱議，從而觸達到目標用戶，這種方式可以增強游戲影響力，甚至產生出圈的效果；比如Youtube通過扶持優秀的內容創作者，通過他們的粉絲圈或者社交關系進行游戲推廣。

          

          
    
          

          

          
    

          

          
    
          

          

          
    2021年初爆火出圈的社交產品clubhouse，也是在早起利用名人明星和圈子的力量，通過采用邀請制的方式吸引了高質量的種子用戶，帶動app的影響力，提升其在世界產品和科技圈的熱度。

          

          
    
          

          

          
    

          

          
    
          

          

          
    

          

          
    
          

          

          
    相較于傳統的機器人客服，機器人進化出了新能力,在數字內容推廣上展現新前景。在Discord中，由第三方機構提供各種數字內容服務能力的機器人，如將Patchbot機器人添加到頻道后，可以將用戶喜歡的游戲資訊/功能更新及時推送到頻道中，讓玩家獲取信息更及時；

          

          
    
          

          

          
    

          

          
    
          

          

          
    在Discord和Telegram聊天群組中，有很多提供數字產品服務能力的機器人，為群中小伙伴定期推送和主動獲取影音資源。

          

          
    
          

          

          
    

          

          
    
          

          

          
    

          

          
    
          

          

          
    隨著元宇宙、區塊鏈技術的火爆，數字內容也展現了不同以往的展示和推廣方式。2021作為元宇宙爆發年，向我們展示了未來的一角。通過虛實結合的互動體驗，數字營銷不再局限于單一的文字/畫面，而是通過多體感的交互，讓用戶全方位的體驗數字內容，為獵奇的互聯網用戶打開了數字營銷新篇章。

          

          
    
          

          

          
    1）虛擬偶像成數字內容推廣重要方式

          

          
    2021年，隨著元宇宙基建的推進和爆款案例的頻出，虛擬偶像也迎來了新一波發展高潮，引得不少音樂公司紛紛入局。19歲的加州虛擬網紅Lil Miquela代表了Z時代的社群偶像，她在instagram，youtube，discord等平臺分享自己的時尚穿搭，與名人或朋友的合影及生活想法，甚至她還在Spotify發布了自己的15首單曲。打造了跨平臺的Vmodel身份。

          

          
    
          

          

          
    

          

          
    
          

          

          
    韓國虛擬模特Rozy，不僅在社交網絡分享自己的穿搭生活，還如同常人一樣，營造看電影的真實體驗，她的代言產品不僅涉及線下美妝，還為線上購物網站，電影等數字產品內容做宣傳推廣；

          

          
    
          

          

          
    

          

          
    
          

          

          
    

          

          
    

          

          
    
          

          

          
    2）虛擬演唱會打造多感官音樂體驗

          

          
    賈斯汀 比伯舉行了一場由真實動作捕捉的線上虛擬演唱會，比伯在演唱《Peaches》、《Hold On》等人氣單曲的同時，觀看直播的觀眾可以根據場景與比伯進行線上互動：場景切換到田野時，觀眾可以點擊不同顏色的花朵，讓田野生出花朵形狀的流光；

          

          
    
          

          

          
    

          

          
    
          

          

          
    切換到街頭場景時，觀眾可以把聊天內容或愛心發送到比伯周圍；

          

          
    
          

          

          
    

          

          
    
          

          

          
    這種虛擬演唱會的形式將全球的粉絲連接在一起，在虛擬場地形成萬人互動的沉浸式音樂體驗。寶可夢25周年，聯合說唱歌手Post Malone推出了自己的虛擬音樂會，馬龍在這次虛擬演唱中共演唱了《Psycho》、《Circles》、《Only Wanna Be With You》、《Congratulations》四首單曲，在虛擬世界中與知名寶可夢一起完成表演；也為新發售的《寶可夢：晶燦鉆石/明亮珍珠》起到宣傳作用；

          

          
    
          

          

          
    

          

          
    
          

          

          
    3）利用虛擬社區打造游戲/影視宣發新方式

          

          
    Decentraland提供了去中心化的社交世界，用戶可以創建自己的虛擬形象，在不同的游戲場館進行切換，為游戲品牌起到了更好的宣傳作用；同時Dcentraland提供了虛擬土地售賣，用戶或開發者購買土地后，通過制作3D場景，發布自己設計的各種產品或服務，這些場景也可以使用VR終端來體驗，用戶或開發者可以發揮無限的想象力進行宣傳創作。

          

          
    
          

          

          
    

          

          
    
          

          

          
    韓國劇集《魷魚游戲》熱播后，劇集中的游戲關卡在羅布樂思公司的游戲社區被“1:1”還原，其中的游戲“1、2、3”木頭人進入推薦排行榜，吸引了眾多觀眾成為玩家，也讓很多玩家去奈飛追劇，擴大了該影視資源的影響力。

          

          
    
          

          

          
    

          

          
    
          

          

          
    4）區塊鏈及NFT技術賦予數字內容流通新方式

          

          
    伴隨著區塊鏈技術的發發展，有的游戲分發公司也在嘗試通過區塊鏈技術進行游戲發行。如Ultra試圖打造一個基于區塊鏈的游戲發行平臺，通過通證經濟實現更加合理的利益分配。對游戲玩家來說，可以在下載完成前就盡情享受新買的游戲，并在玩游戲時繼續下載缺失的數據。玩家可以自主選擇是否允許游戲內彈出廣告，觀看廣告可獲得通證獎勵，邀請朋友、參與測試和策劃游戲也可獲得相應通證獎勵。因此，游戲玩家既可以即時玩獨家游戲，又可以通過多種方式賺取通證獎勵。

          

          
    
          

          

          
    

          

          
    
          

          

          
    NFT實現了虛擬物品的資產化與流通化，賦予了數字藏品/游戲/影音等內容的虛擬價值；藝術品數字資產化將拓展影視相關內容的產品鏈，因被賦予獨特的價值，使得其可以通過交易完成變現。2021年10月11日，王家衛首個NFT作品《花樣年華——一剎那》以428.4萬港元價格成交，同時創下王家衛個人作品與亞洲電影NFT作品拍賣價格新高。

          

          
    
          

          

          
    

          

          
    
          

          

          
    總結
          

          

          
    伴隨著用戶數字內容消費習慣的變化，數字內容呈現方式、渠道和分發方式都在發生變化?？梢钥吹皆谖磥?，數字內容制作方和發行方，需要為用戶提供更多元的方式深度進行體驗，同時承載數字內容的平臺也逐步由傳統的中心化渠道向私域流量轉移。作為數字內容發行方，如何有效且長線輸出高品質內容，構建內容壁壘，探索更有吸引力的表現形式、縮短和用戶的溝通渠道，是未來需要深入思考的。
          

          
    
          
        文章來源：站酷 作者：騰訊ISUX
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.          
    
          
    
          
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          

          
            
          
              
                評論(0)
                瀏覽(1660)
              
                          
          
          
          
                      
          
            
            
          簡單又不簡單的“設置”場景設計
          
            
          
               ui設計分享達人                                            
          
            
          
    一、隨處可見的齒輪

          

          
    
          

          

          
    以一個小小的齒輪（或者扳手）形象登場，“設置”在幾乎所有產品中都是不可回避的模塊，他允許用戶在彈性范圍內自定義產品，來更好地適應實際需求。

          

          
    

          

          
    在一些產品團隊的眼里，“設置”或許是一件非常簡單的事情，因為大多設置模塊的使用頻次低，無關核心業務。所以當內容看似非常簡單明確時，“設置”甚至會不經設計，由開發直接上手就干。但這樣簡單處理的結果被擺到用戶面前時，各種糟糕的體驗就紛至沓來了。找不到設置入口、不知道該如何設置的用戶吐槽屢見不鮮。所以說，“設置”，說簡單也不簡單。

          


          

          

          
    下面我們就從用戶場景出發，深入挖掘設計邏輯，重新認識這個隨處可見的小齒輪。

          


          

          

          
    
          

          

          
    
          

          

          
    二、“設置”的用戶場景

          

          
    
          

          

          
    調研發現，不同性質、體量的產品，“設置”模塊的功能設計存在著不小的差異。

          

          
    ToC產品一般會提供關于用戶自身使用習慣的設置，如界面語言、皮膚主題等。而對于ToB產品來說，除了部分與ToC產品重疊的用戶個性化設置內容外，往往還有作用于整個平臺、全體用戶的系統設置權限，當然他們的可見用戶并不是全體成員。

          


          

          

          
    從上述對功能的簡單描述可以初見，“設置”模塊的目標用戶也不會是一成不變的。

          

          
    拿我們日常高頻使用的瀏覽器產品來說，設置是開放給全體用戶的功能模塊，但它的使用頻次很低，如一些關于性能、證書的配置，即使是瀏覽器的熟練使用者也可能對它很陌生。也就是說，哪怕是產品的高級用戶，也可能是“設置”模塊的新手用戶。

          

          
    而以技術導向的工具型產品為典例，繁雜的系統設置是產品為了滿足不同客戶間、復雜多變的業務規格，在系統中留出的彈性空間。在這個需求場景中，與產品對話的用戶一般是系統管理員或技術支持人員等，他們對系統方方面面的經驗認知都很充足，甚至系統設置就是其主要工作模塊。所以，對于這類用戶場景下的“設置”模塊，“高效操作、成功結果”是至關重要的設計目標。因為高級用戶往往不追求很強的互動性，更希望跳過流程和步驟，直接切入功能得到理想結果。

          


          

          

          
    面向不同的目標用戶，自然有不同的設計邏輯，本文接下來的內容，或有共同之處，但更側重于面向第二種情況的思考。

          

          
    
          

          

          
    
          

          


          

          

          
    三、“設置”的設計邏輯

          

          
    
          

          

          
    思考“設置”的用戶場景，使得設計邏輯的探討更加有據可依。簡單來看，“設置”的設計可以從三個環節切入：

          

            
    
          • 
        
            
            設置前：如何向用戶展示設置內容
        
            
    
            • 
    
          • 
        
            
            設置中：如何設計用戶的輸入交互
        
            
    
            • 
    
          • 
        
            
            設置后：如何保存生效或發生錯誤的處理
        
            
    
            • 

          

          
    
          

          

          
    接下來我也將從這三個環節發散思考，從信息架構、展示編輯、默認值、幫助說明以及保存等多個方面來談談我對“設置”的一些看法。

          

          
    
          

          

          
    
          

          

          
    （1）做好內容的信息架構

          

          
    成熟的“設置”模塊，必然擁有良好的信息架構。這不僅是指“設置”內部的導航設計，同時也包括“設置”在整個產品的層級安排。這些導航、層級的確定，則會受內容信息體量、功能重要程度等影響。

          

          
    首先，在“設置”內部規劃一個合理且清晰的導航，需要在信息的深度和廣度之間做好平衡。平衡架構的天然敵人少不了信息量冗雜這個令人頭疼的問題。無論是在單個層級中內容過多，還是層級本身過多，都會給用戶的快速定位帶來考驗。而通過調研發現，如Google、Salesforce等產品都選擇在復雜的“設置”模塊引入了全局搜索來幫助用戶緩解查找某一功能的壓力。

          

          
    

          

          
    信息量冗雜帶來的考驗還有那些零散的、彼此關聯不強的設置項。對他們的架構安排，很容易因為不知道怎么組織，便一股腦地塞進諸如“通用”、“高級”等的模糊分類中，不過這可謂是十足的懶人設計。想要搞定這些難搞的信息，設計者需要對設置內容有更深入的研究和理解，搞清楚它改變了什么、會影響什么以及后續是否會拓展更多關聯設置，等等。

          

          
    還有一個值得思考的細節：對于豐富多樣的設置項來說，是將他們散落到直接影響的功能模塊中合適，還是匯總于一個設置模塊中更合適呢？或許在不同的場景里答案并不一致，我覺得這需要綜合考慮該設置項的放權角色、配置頻率、配置影響等因素。

          

          
    
          

          

          
    
          

          

          
    （2）設置內容的展示與編輯

          

          
    完成“設置”模塊的基本架構后，就該將目光投向那些具體的設置項了。就常見的設置內容而言，根據其適合的展示形式進行簡單的抽象，主要分為以下兩種：

          

          
    1、適合以表單形式組織的內容：一般是具有獨立影響又擁有相同特征標簽的單條數據被整合到一個分組下進行展示與配置

          

          
    2、適合以表格形式組織的內容：一般是具有相同固定結構的數據集需要進行統一管理，包括組層面的增刪等

          

          
    

          

          
    為每一個內容選擇最合適的展示形式（當然也并不僅是上述兩種），這個選擇大多時候并不困難，因為“設置”場景的目標導向往往比較明確、直接。當然也不排除部分復雜場景的存在，這就需要我們多花些心思，以用戶更易理解的展示形式完成功能性的表達。

          

          
    在“設置”模塊，展示與編輯的聯系非常緊密。直接編輯和解鎖后編輯的選擇，主要取決于用戶進入頁面的常規訴求是查看確認還是編輯修改，以及這些設置內容的改動容錯性是否良好，等等。

          

          
    

          

          
    
          

          

          
    
          

          

          
    （3）默認值與幫助說明里的用戶體驗

          

          
    在本文討論的“設置”場景中，每一個更改都可能對整個平臺乃至全體用戶產生影響。通過調研，我們發現多數用戶對于默認值的沿用性不低。故，對于那些需要默認值的設置項，選擇一個合適的默認值是值得審慎對待的問題。

          

          
    了解用戶習慣和業務需求是解題的關鍵。什么樣的默認值最貼合用戶的使用習慣，什么樣的默認值能以最佳狀態滿足業務需求。例如，我們的堡壘機產品一般將日志保留時間的默認值設為365天，便是考慮到了用戶習慣與產品性能的微妙平衡。

          

          
    除了默認值的設計，恰到好處的幫助說明也可以讓設置的用戶體驗變得更好。

          

          
    我時常看到“設計的目標應該是完全刪除說明文字”之類的論述，這好像正契合了簡約至上、不要讓用戶思考等當下流行的宗旨。但，正如尼爾森十大原則的最后一條“人性化幫助原則”也指出，幫助和使用文檔是有必要的。

          

          
    

          

          
    結合“設置”的自身的特點：這是一個對產品進行底層配置（相對其他模塊而言）的控制模塊，對用戶的認知與學習能力有著不低的門檻要求。也就是說，設置的內容對于用戶是有一定難度的。我們需要更多考慮內容的幫助說明是否充足，不要想當然覺得用戶能夠理解。

          

          
    所以，不難想象，設置模塊的說明概率會遠高于產品的主體功能模塊。進一步探究幫助說明的設計：從形式來說，它可以是文案、配圖甚至是一個視頻講解；從強度來說，它可以一次性出現、常駐于頁面或是直接跳轉幫助文檔等。大多數用戶并不希望在設置模塊獲得探索的樂趣，所以無論如何設計，幫助其快速完成任務是我們在設計“設置”時非常重要的一個追求。

          

          
    

          

          
    
          

          

          
    
          

          

          
    （4）二次提交與即時生效

          

          
    “保存了嗎”這不僅是每個設計師在電腦卡機時候會問自己的問題，也是用戶在完成一系列配置操作后的疑惑。這就牽扯到了設置何時生效的問題。最常見的交互方案有兩種：

          

          
    1、每一項配置都即時生效

          

          
    2、整個表單統一提交后生效

          

          
    

          

          
    那么，哪一種方式更好？我繼續嘗試從業務需求和用戶習慣兩個方面入手：

          

          
    “設置”模塊的操作往往牽一發而動全身，試錯成本其實是非常大的。之前聽產品經理說過一個銀行客戶因為修改了某個小小配置項，而造成了巨大實際損失的例子。所以，在這樣一個控制中樞般地位的模塊中，即時生效的選用必須謹慎評估操作風險，減少用戶輕易出錯的機會。

          

          
    同時，由于即時生效和表單提交這兩種交互方式都非常常見，用戶天然存在一種認知壓力，也就是上面提到的“保存了嗎”的不確定。所以，我們需要通過設計，讓用戶快速且準確地知道當前頁面采用的是何種保存交互。

          

          
    從調研和自身經驗得出，以下幾點都是比較好的思路：

          

          
    1、實時的操作反饋可以幫助用戶判斷是否生效

          

          
    2、盡量控制設置內容在一屏以內，這樣無論是否設計統一提交的按鈕（或者更改后出現），用戶都可以輕易感知

          

          
    3、將統一提交的按鈕以懸浮方式明顯地駐于頁面底部，減輕內容超出一屏時的認知壓力

          

          
    4、慎重處理如開關、按鈕、滑塊等帶有很強“即時生效”隱喻的控件

          

          
    
          

          

          
    
          

          


          

          

          
    四、簡單也不簡單的“設置”

          

          
    
          

          

          
    對于很多產品產品而言，“設置”是點擊率不高的輔助模塊。由開發人員直接上手，設置項很容易就變成機器語言的直譯、迭代順序下的鋪陳，而用戶是否可以接受這種簡單粗暴的處理，就成了阿甘手中的那盒巧克力。

          

          
    從關于“設置”的論述以小見大，哪怕是看似簡單的角落，也存在著不簡單的設計邏輯。我一直覺得，設計對于商業的價值在于推動溝通，即保證產品與用戶的對話“時刻”流暢。所以，不要草率處置那些不起眼的邊緣模塊或簡單功能的設計。
          

          
    
          
        文章來源：站酷 作者：齊治設計
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.          
    
          
    
          
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          

          
            
          
              
                評論(0)
                瀏覽(1453)
              
                          
          
          
          
              
          

  

          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合