<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>

          首頁

          B端表格設計的基本交互形式

          ui設計分享達人


          藍藍推薦:這是一篇很實用的表格基本交互形式文章!
          譯文:
          如果沒有將數據可視化和具備編輯數據的功能,數據就毫無用處。未來行業的成功依賴于將數據收集與更好的用戶體驗結合起來,而數據表格的設計體驗則非常重要。

          固定表頭

          -

          固定表頭讓用戶隨時都知道自己所在列的名稱。


          水平滾動

          -
          當展示大型數據列表時,水平滾動是不可避免的??梢?nbsp;將具有標識性信息的數據展示在第一列中,并固定第一列方便用戶對其他數據進行對比。


          調整每一列的寬度

          -

          調整列寬可以讓用戶看到所有的內容。


          設計表格樣式

          -

          表格的樣式有:白色和其他顏色相間的斑馬線設計,單純用線分割,自由形式等。

          正確的設計行樣式可以幫助用戶瀏覽表格數據,對只包含少量數據的表格來說,減少視覺干擾非常重要,這時候就可以采用去掉分割線、斑馬行的自由展示模式。但對于有大量數據的表格來說,自由模式容易讓用戶迷失,這時候用線分割,讓用戶能區分開每一行就顯得尤為重要。而斑馬線的設計樣式適合包含多列數據的表格,需要水平移動的大量數據表格。 


          表格密度展示

          -

          為列表設計不同的密度,用戶可以根據需要自行切換,比較緊密的行距讓用戶無需滾動就可以瀏覽更多的數據。



          數據可視化

          -

          讓數據可視化,提供表格內容的概括性預覽,讓用戶無需細讀每一條數據就能得到想要的信息。



          分頁展示

          -

          分頁設計方便用戶跳轉到相應頁面,但是也常常被無限滾動加載的方式取代,無限滾動加載指的是隨著鼠標不停地往下滾動,頁面內容也會隨之加載,這種方式適用于發現類的網站,但是對于考慮優先級的產品來說就不太合適了。


          懸停展示

          -

          當用戶懸停時顯示更多功能可以減少視覺混亂。需要注意的是,它可能會導致可發現性問題,因為用戶需要與表交互才能看到更多的功能。


          直接編輯

          -

          直接編輯可以讓用戶在當前表格內修改數據和內容,而不用額外再跳轉其他頁面進行操作。


          可擴展功能

          -

          可以擴展的表格設計允許用戶在不丟失上下文的情況下瀏覽更多詳細信息。


          快速視圖

          -

          與可擴展功能非常相似,快速視圖使用戶能夠在保持上下文的同時查看附加信息。


          彈窗

          -

          彈窗設計同樣可以讓用戶停留在表格視圖中,讓用戶更專注在附加信息和操作上。


          多層彈窗

          -

          多層彈窗功能對于活躍用戶來說非常強大,可以同時完成多種操作,或用來比較不同項目的詳細信息。


          點擊詳情展示

          -

          單擊鏈接會將表格轉換為左側為列表項和右側為其他詳細信息的視圖。它使用戶能夠解析大型數據,以及查看單獨的項目詳情而不會丟失它們的位置。


          可排序的列

          -

          排序允許用戶按照字母順序或數字順序對列進行重新排列。


          基本篩選

          -

          提供基本的篩選功能來搜索表格里的相關數據。


          列篩選

          -

          這種設計模式允許用戶將過濾參數分配給特定的列。


          可搜索的列

          -

          這種設計模式允許用戶在每列中搜索特定值。


          添加列

          -

          這種設計模式允許用戶根據需求在數據表格中添加列。


          可編輯的列

          -

          可自定義的列功能使用戶能夠選擇他們想要查看的列并進行相應的排序。 這個功能還包括保存預設后再修改的能力。


          ...


          為什么表格設計很重要

          數據正在成為全球經濟的原材料。對數據的追求推動了行業的重塑。能源、媒體、制造、物流、醫療保健、零售、金融,甚至政府都在經歷數字化轉型。


          然而,如果沒有可視化數據并對其采取行動的能力,數據就毫無意義。未來十年幸存下來的公司不僅將擁有卓越的數據;他們也將擁有卓越的用戶體驗。


          良好的用戶界面設計基于用戶的目標和行為。用戶界面反過來也會影響行為,從而推動進一步的設計決策。用戶體驗以微妙和無意識的方式改變了人類的決策方式。所看到的、呈現的位置以及交互的方式,都會影響行動。重要的是我們要做出能夠帶來更美好世界的設計決策,一個符合這個時代的數據表格設計。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:國外  彩虹BOOK翻譯
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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





          Web表單設計——你不知道的冷知識

          ui設計分享達人

          當我們設計Web表單時,往往用最直覺的設計經驗本能驅動我們去解決一些看似在界面設計中最簡單的問題,但每每到細微之處,又會有無數疑問從細節中冒出來給我們的設計造成困擾。

          例如:在表單界面Label(標簽) 和 Input(輸入框) 上下還是左右排列合理、Label要不要加冒號、輸入框到底多寬合適等等......

          以上這類問題看起來并不影響用戶完成任務,很久以來也少有人關心這些細微之處會不會對用戶有什么影響。

          以至于,我表達想寫一篇探究這些細節的文章時,同事會偷笑說:你都開始研究標簽末尾要不要加冒號了嗎......,太冷了——真是個冷知識!

          確實如此,這些偏門、細碎的內容,鮮少有人會去留意和思考。因此我在寫下這些分享內容時期望可以達到目標是:“冷知識雖然冷,但有用”。用我了解的這些表單設計冷知識:啟發你的冷思維、引出你的熱思考。


          話不閑聊,我們開始討論第一個問題:

           

          ///


          01.標簽末尾要加冒號嗎


          有個表單細節不知道你有沒有想過,標簽末尾是否要加冒號?

          這個問題在我前團隊發生過激烈爭論,有同事說:“不要加,占用間距,而且沒人會留意它......”,也有人說:“要加,從含義上講,冒號的作用就是提示上下文或總結上下文的停頓。加上之后能更好表示標簽與輸入域的關聯......."。

          聽起來好像都有些道理,那到底誰更對呢!

          首先,我們追溯一下 Web 發展史,早期可訪問性核對清單中通常堅持要標簽帶冒號,因為屏幕閱讀器一度必須依賴各種技巧才能理解標記不明的表單。


          而隨著技術發展,Web表單使用“label”標簽(tag)可以做正確的標記,那么屏幕閱讀器就能通過標記(markup)把標簽(label)和相應的字段對應起來則無需再借助冒號。

          不過在客戶端又有些意外!曾經 Windows Vista 指南中明確要求使用冒號, Mac Aqua 也有此要求但規則會稍靈活一些。這種情況是因為某些情況下屏幕閱讀器在桌面環境與可閱讀源代碼的網頁標記相比會遇到一些困難,桌面環境不會直接顯示代碼。也是這個歷史原因,造成 Vista 和 Aqua 各自都有大量其標簽包含冒號的歷史表單。因為實在沒有必要把它們全部改掉,直到今天客戶端的表單依舊延續這一規則。

          通過Web發展史我們明白表單標簽帶冒號的產生是為了解決早期屏幕閱讀器的識別,如今的屏幕閱讀器技術已轉變為識別標簽的底層代碼,無需借助這種形式了。所以從這點來看要求標簽帶冒號已經站不住腳了。

           

          那從情感角度分析標簽帶冒號的是否對用戶體驗有影響呢?

          回到最開始,我和同事們的爭論……

           

          先簡單說下答案,無任何影響!

          在《Web表單設計·創建高可用性的網頁表單》中,作者(卡羅琳·賈雷特)曾經做過大量的表單測試,最終證明從未有一名用戶談論冒號是否出現,即使是有些在其他環境中很介意標點符號的人似乎在線上表單中也未曾注意到。

           

          從以上兩個角度不難發現,無論是從技術發展還是情感體驗,都證明可不必要求表單帶冒號;因為可用性訪問清單不再有這樣的要求,用戶研究也證明幾乎沒有人會留意表單冒號是否出現。

          這樣的結論,看似表單帶冒號是失敗了……,但這并不妨礙它作為一種習慣或傳統延續至今,無論在客戶端還是Web設計系統中仍然常見。例如:蘋果電腦的Mac系統,國內阿里的Ant Design Web設計系統。

           

          因此,得到以下幾點建議:

          如果你希望自己的網頁表單與流行的桌面環境保持一致,請使用冒號。

          如果你已有大量使用冒號的表單,請保持繼續使用下去。

          如果你在建立一個新的系統,你也可以索性拋硬幣決定,不過要嚴格遵循一種方法。


          ///


          02.哪種標簽對齊方式更好


          在表單中標簽與表單域的對齊方式,如果你的團隊已有明確的規范和使用場景,你只要拿來主義即可??扇绻程煊赡阒鲗Фx一個新的表單規范時,不知道你會不會重新考慮哪種標簽對齊方式更好,怎樣區分使用場景!

          通過科學實驗發現,無論是在眼動儀的熱圖,還是在許多可用性測試的觀察結果中,用戶在填寫網頁表單時視線主要集中在輸入框的左側。他們的視線幾乎不會落到輸入框的右側,甚至都不會瞟上一眼。

          以此為基礎,我們在網頁表單設計中有3種最常見的標簽對齊方式:頂對齊標簽、右對齊標簽和左對齊標簽。你可能會說還有混合對齊標簽、內聯標簽、圖標標簽等,這些確實存在但并不是最核心的幾種對齊方式,它們基本是在這3種形式上變化,不脫離本質。

           

          下面我們逐個分析一下:

           

          1.頂對齊標簽:

          馬泰奧·彭佐從2006年7月進行眼動研究發現,從標簽移動到輸入框只需50毫秒。比左對齊標簽快了10倍,后者需要500毫秒;比右對齊標簽方式快2倍,后者高達240秒。能迅速填完頂對齊標簽表單的原因之一,是因為眼球只需要在標簽和輸入框之間進行上下單向運動。

          優勢:

          最利于減少表單填寫時間(標簽和輸入框位置最為靠近);用戶視線固定,動線一直向下(清晰的完成路徑);節省大量橫向空間(可用于以多種方式組合的相關輸入框)。

          劣勢:

          占用額外的垂直空間(如果可提供使用的垂直屏幕空間較小,應當謹慎使用頂對齊標簽);建議使用輸入框50%至75%的高度作為相鄰輸入框間距。

          適用場景:

          希望用戶快速填寫表單,完成任務;同時,當輸入項存在主次之分時,對標簽擴展性要求高。

          2.右對齊標簽:

          如果要盡量減少表單占用垂直屏幕空間,右對齊能提供快速完成時間。馬泰奧·彭佐的眼動研究發現,專家用戶和新手用戶掃視(眼睛運動)右對齊標簽表單的標簽和輸入框的平均時間分別在170毫秒和240毫秒,而填寫完成時間比左對齊快2倍。

          優勢:

          標簽與輸入框相鄰(方便快速填寫)。

          劣勢:

          右對齊布局造成左側不齊,影響了快速游覽表單的效率問題;若標簽文字寬度變寬,右對齊還存在靈活度問題。

          適用場景:

          既要減少垂直空間,又要加快填寫速度的場景。

          3.左對齊標簽:

          在頂、右、左三種方案中,左對齊表單填寫速度最慢。因為左對齊表單解析問題時眼球定位次數最多,用戶一般情況下都能將左對齊布局中的標簽和輸入框聯系起來,只是花費時間較長。根據馬泰奧·彭佐的研究,典型掃視時間為500毫秒,很長說明用戶經歷了沉重的認知壓力。

          優勢:

          容易游覽標簽;占用垂直空間較少。

          劣勢:

          標簽和輸入框的相鄰間距增大;適合于用戶不熟悉表單要收集的數據或問題無法分成易處理的內容組,左對齊標簽游覽表單問題會更容易。用戶只要上上下下閱讀標簽左欄,不會被輸入框打斷。

          適用場景:

          表單中存在較多的復雜或敏感信息,希望用戶放慢速度、仔細思考(在一些注冊類表單中較多使用)。

          單從效率角度看,頂對齊標簽>右對齊>左對齊,但是根據應用場景,效率快并不是我們選擇標簽對齊方式的唯一的指標。

          因此,得到以下幾點建議:

          如果你希望用戶放慢速度,仔細思考表單中每個表單項,左對齊標簽是個好選擇,特別是含有大量可選輸入框或高級設置的陌生數據時;

          而頂對齊標簽在一些國際化產品的表單設計時,會有更好的延展性;

          至于,右對齊標簽雖然與表單域聯系緊密,便于用戶填寫,但是要考慮好標簽的長短不齊如何解決。能否精簡標簽內容,以及確定好表單與界面的邊距。


          ///


          03.標記必填與可選字段的困惑


          許多表單設計中,有個常見問題:是否應該標記必填字段?如果表單中的大多數字段或全部都是必填的,我們是否仍然應該標記它們?

          先簡單回答:是肯定的,用戶有時需要通過必填標記來評估工作量,了解輸入信息量的最低限度。我會在下面具體解釋原因。

           

          了解不標記必填字段的誘惑

          通常,設計師會覺得每個必填字段都有一個標記是重復的、丑陋的、占空間,而且干擾界面,甚至可能看起來很擾亂(有認知負擔?。?。因此通常采取以下一種或兩種策略:

          1.在表單頂部顯示說明,說明中除非另有解釋,否則所有字段都是必填;

          2.只標記可選字段,因為它們通常較少;

          3.在某些特殊情況下,也會什么都不做:相信用戶會神奇地知道需要填寫什么字段;如果不知道,那么只需要點擊提交報錯即可。

          這些方法有什么問題?如果你這樣想,我來告訴你

          1.用戶一般不喜歡閱讀表單頂部說明。不難想象,用戶不太可能閱讀表單頂部的說明。表單字段需要自給自足,畢竟,每個字段都有特定指令——它的標簽,為什么用戶需要閱讀其他任何東西來填寫它呢?

          2.即使用戶閱讀了說明,也可能忘記。你可能會說:用戶閱讀了頂部的說明,怎么就會忘記——這么簡單的事情?

          的確容易忘記,特別是當表單很長或填寫表單被打斷時(這種情況在移動端很常見)。即使用戶記得,但這占用了工作記憶,增加了認知負荷。換句話說,你讓用戶完成任務更難了。填寫表單本身對用戶來說就相當有挑戰性——為什么要讓它更具有挑戰性?

          3.用戶必須掃描表單以確定是否為必填字段。不難發現,無論是否在表單頂部包含說明,結果都可能相同,用戶會忽略或忘記。他們會掃視表單,找到一個標記為必填或可選的標識。

          而且有些用戶甚至不會費心去環顧四周,他們只會做出假設。他們會想——“嗯,郵箱——不需要我的郵箱吧?先空著呢”。即使用戶沒有留空,也不得不暫停來思考一個字段是否需要填寫,減慢交互速度并使過程看起來更長、更乏味。

          想要解決以上問題很簡單:標記所有必填字段。盡量明確和清晰展示每個必填字段,并標記它。當然,就像有些設計師所說:界面出現大量必填標識(紅色星號*)確實會增加視覺噪聲。甚至重復的星號 * 會帶來一些認知恐慌。但相比之下,兩害取其輕,這些負面因素是輕微的。


          如何標記必填字段?

          這里包含至少有兩種方式:星號*(紅色)和“必填”提示。星號*在網頁上已經很常見,用戶熟悉其含義。優點是它不占用太多空間,也看起來與標簽文字足夠不同,所以使用它。

          可以使用其他標記形式嗎?當然可以,但是最好遵循市面上常見的形式(雅各布定律),這樣更符合用戶認知。

          星號應該在字段標簽之前還是在字段標簽之后?

          這不一定有實際影響,但將其放在標簽之前的一個原因是,只需掃視標簽的最左邊字符,就能輕松定位必填哪些字段。

          星號*是一種視覺標記,應當仔細考慮表單中的標識位置。標識在標簽左邊能指引用戶迅速瀏覽界面,并判斷出必填項。如果在右側由于輸入框形式、長度各不相同,標識和輸入框對齊會導致難以瀏覽和判斷。


          是否也應該標記可選字段?

          雖然這不是強制性的,但標記可選字段確實減輕了用戶思考:如果沒有這個標識,用戶要環顧四周,并根據其他標記字段推斷該字段是可選的。如果“非必填”在字段標簽旁邊,那該任務會變得更容易。不描述可選字段,這沒問題,但這樣做會是一個很好的額外幫助。

          為什么登錄表單沒有標記必填?

          登錄表單很短,一般由兩個字段組成:用戶名和密碼,這兩個字段總是必填的。如果使用星號*,標記這些字段的成本很低,并不會出錯。但是,絕大多數用戶都使用過很多登錄表單,他們是知道要登錄需要輸入郵箱/用戶名和密碼的。所以,在登錄表單中,可以省略這種形式。

          而在注冊表中不標記必填字段是危險的。注冊表單因產品而異——不同公司在創建帳戶時需要不同類型的信息。它不僅僅包含用戶名和密碼,所以請標記所有必填字段(包括用戶名和密碼)。

           

          因此,提出以下幾點建議:

          基礎前提,盡量去除任何不需要回答的問題,特別是涉及到用戶隱私的內容??梢愿菀鬃層脩籼钔瓯韱?。

          為了增加表單填寫的機會,請盡量減少用戶需要付出的努力和他們需要記住的信息。有很多方面有助于解決這些問題,但標記必填字段(以及可選字段)是最容易的方法之一。


          ///


          04.表單域提供一些默認值有必要嗎


          先給出答案:這是肯定的!

          在《選擇的悖論》一書中,作者巴里·施瓦茨討論了生活中選擇過多的影響。并提出策略應付無處不在的過多選擇。他特別敘述了智能默認的能量——即在滿足多數人需要的地方放置選擇——來幫助人們做出明智的選擇。

          而在Web表單中也有很多地方能利用智能默認減少不必要的選擇次數或輸入,加速表單完成過程。所以,只要合適就在表單域中預先為用戶填寫你認為他們想要的輸入值。

          通過提供合理的默認,能有效節省用戶時間,就是這么簡單。應用分擔了用戶思考或輸入答案的工作。填寫表單永遠不是一件有趣的事情,如果這個模式能把表單填寫的時間減少一半,用戶會非常感激。

          你可能會問:默認值不是用戶想要的,誤導用戶怎么辦?

          在設計有默認值的表單域時,你要思考默認值是否是大多數用戶可以接受的答案,如果不確信可以先去做一下用戶調研,了解用戶的心聲。

          就算默認值真的不是用戶想要的,至少你也為他提供了一個示例來告訴用戶答案應該是什么樣子的。這一點也可以節省用戶幾秒的思考時間——或避免一條錯誤信息。

          但并不代表所有的表單域都要給出默認值,我們只是盡可能的讓用戶節省時間。

           

          如何使用:

          在第一次向用戶顯示表單時,用一個合理的默認值預先填寫文本框、組合框或者其他控件。也可以使用用戶之前提供給應用的信息來動態地給出默認值(例:通過身份證自動識別出生日期;利用郵編,推導出對應省/市)。

          如果只是因為你覺得不應該留下空白的輸入域,那么不要使用默認模式。只有當你有理由確信絕大部分用戶,在絕大多數情況下,不會修改這個取值時才提供默認值——否則,這將會給用戶帶來額外的工作!


          ///


          05.輸入框的寬度如何設定


          有一個容易被忽視但實則舉重若輕的問題,表單中輸入框寬度如何設定?

          在表單設計中,對于 Checkbox、Radio 等控件,很明確必須跟隨內容自適應處理。但對于Input、Select等你會不會產生困惑,是定寬處理還是跟隨內容更好。

          不知道你是否試圖這么理解過?輸入框作為用戶填寫信息的主要方式,其表現形式是否可以提供給用戶填寫表單的有用線索。

          唐納德·諾曼的著作《設計心理學》中詳細講解過心理暗示方面的內容。而寬度的變化就是一種有效暗示。

          在真實場景中,大部分輸入框是存在理想長度的,那么就應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。

          下圖就是典型案例,一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理,反而容易誤導用戶對輸入金額的判斷,造成一種不安全感。

          表現形式要為用戶填寫提供有用線索,采用不同長度的文本框提供了暗示;這種暗示是一種有用線索,當輸入框長度長短不定時,用戶會很自然地思考為什么這樣;填寫輸入框時會自然考慮這些線索。

          請注意!保證暗示效果的同時,不要設定太多的寬度,反而會讓表單顯得凌亂;太少又會讓表單看起來都像四四方方的盒子。最佳方法是找到適合產品的最佳模度值和數量。


          什么是模度值和數量呢!

          落在具體設計上要先梳理產品中常見的表單類型,然后設置一個默認寬度。以此為基礎來有規律的增加長度,并考慮清楚它們的適用場景;從而定義出不同的模度,最終制定出整潔有序的模度規范。這樣就可以讓一線的設計師們跳過部分繁瑣磨人的細節思考,快速搭建出合適的表單寬度并合理有效。




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:百度MEUX

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

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

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



          B 端設計總結·前言:設計體系

          ui設計分享達人

          眾所周知,黑帕云這樣的產品幾乎使用了所有類型 B 端的組件。

          由于我司設計資源有限,所以在擁有了組件庫、設計師定好了設計規范之后,作為產品經理就直接可以手擼設計稿了。

          這是是前面一文《 B 端產品中,一個 Epic 基本功能設計的過程》 提到,作為一個長大了的產品經理,有時候沒有資源給你做交互沒有資源給你畫 UI 的,你要自己學會自給自足。


          這個系列就是作為產品經理的我,在這兩年中“自給自足”做設計的的一些總結與發現。

          自給自足的前提是,前面說的組件庫和設計規范,即擁有一個設計體系(Design System)。


          01.什么是設計體系?

          關于設計體系的定義和內容各家都不同,我找出來了以下案例供參考。


          《設計體系:數字產品設計的系統化方法》

          Tilio(一個寫作和筆記應用)聯合創始人,有十年 UX 設計經驗的阿拉·霍爾馬托娃在《設計體系:數字產品設計的系統化方法》一書中這么定義:

          設計體系是為了實現數字產品的目的而組織起來的一套相互關聯的模式和共享實踐。
          模式指的是界面中那些重復的要素:用戶流程、交互方式、按鈕、文本框、圖標、配色、排版、文案,等等。
          實踐則是我們如何創建、捕獲、共享和使用這些模式,尤其是在團隊協作時做這些事情的方法。


          書中將設計體系分成以下幾個部分:

          設計目的、設計原則、組件庫、樣式指南,以及用于提高設計師和開發人員溝通效率的工作流程和實用工具。


          整理之后,可以參考下圖:




          Salesforce:Lightning Design System


          Material Design


          可以發現,以上設計體系無論如何定義概念,都是由設計原則+設計指南+一些基礎的元素(比如 Design Token、Material Foundation、Icons)+組件庫+其他資源工具構成。


          形成這些內容的目的都是為了給自己產品建立一套保證設計質量、提升設計決策、提升溝通效率的“工具包”,從而讓產品形成自己的符合設計原則的風格。


          所以設計體系是什么不重要,重要的是如何在遵循設計原則下,能夠高效做出高質量的設計。



          02.設計原則(Design Principes)

          一個開源設計原則和方法的網站 Design Principle 這樣定義設計原則:

          Design Principles are a set of considerations that form the basis of any good product.

          譯為“設計原則是構成任何好產品的一套基礎考慮因素。”


          比如 Salesforce 的設計原則是:清晰、高效、一致、美觀。并且優先級由前到后。


          可以理解為 Salesforce 會追求清晰大于高效、一致、美觀,比如在產品設計中,讓用戶清楚的看到、理解、自信地去操作要比任何事情都要重要。

          這個準則很容易理解,可以推論出 Salesforce 在度量體驗時,將“易用性”放在了第一位,即作為一個 SaaS 產品,不能有任何讓用戶產生疑惑的地方。如果在設計上的美觀而要犧牲清晰,這就是不可取的。



          03.組件庫

          有了設計原則之后,下一步是需要一個組件庫。這里說的組件庫囊括了無論是原子化的顏色、字體、陰影、Icon 這些基本的元素,還包括了已經封裝好的組件,如 Button、Alert、Toast、Text Input。


          關于為什么要組件化,也不多說了,之前看過一篇閱文體驗設計 YUX 的《組件化思維—— 適應并推動業務及產品變革的設計案例》寫的非常清楚。

          接下來我通過 Minecraft 這個游戲來總結了組件庫。

          玩過生存模擬類游戲大家都知道,在游戲中會有一些可以靠雙手勞動得來的基礎材料,比如砍樹砍來的木頭、地上撿的石頭、挖礦挖的燧石。這些基礎材料可以合成一些簡單處理過的材料,比如把木頭合成為木板。然后可以再把半成品進一步加工,比如木棍。


          在 Minecraft 這個游戲中,如果玩家要制造一個弓箭,需要一個弓和一個箭。弓和箭的合成又需要一些半成品和成品或者原材料來加工制作,如下圖:


          對應在設計組件庫中可以對照查看,一個完整的頁面是可以通過一些元素、控件、組件、大組件組成:


          04.適用人群

          在系列開始之前,先聲明一下文章的范圍和適用人群。

          關于 「B 端設計總結」這一系列,主要是我個人在已有了我們的設計規范和組件庫后,“自給自足”的情況下探索出來的一些組件使用規則,更偏向產品經理或者交互設計師來參考。

          所以系列中不會寫設計規范,比如說字號、顏色、間距等等這些屬于設計規范中內容。而是基于已有的規范,總結之前我們功能中涉及到的該使用哪些組件,也可以稱之為狹義上的設計指南(Design Guidelines)或者設計模式(Design Patterns)。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:高拉

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

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

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



          設計思維101

          ui設計分享達人

          設計思維史

          很多人認為設計思維是全新的概念,這其實是一種常見的誤解。設計已經實踐了很長時間:紀念碑、橋梁、汽車、地鐵系統都是設計過程的最終產品??v觀歷史,優秀的設計師都應用以人為本的創意過程來構建有意義且有效的解決方案。

          在 1900 年代初期,夫妻設計師 Charles 和 Ray Eames 實踐了“邊做邊學”,在設計他們的 Eames 椅子之前探索了一系列需求和限制內容,即使在 70 年后的今天仍在生產中。1960 年代的裁縫師讓·繆爾 (Jean Muir) 以她對服裝設計的“穿著設計”方法而聞名,她非常重視自己的衣服在他人看來的穿著感受。這些設計師都是他們那個時代的創新者。他們的方法可以被視為設計思維的早期例子——因為他們每個人都深入了解了用戶的生活和用戶未滿足的需求。著名的 I ? NY 標志背后的設計師 Milton Glaser 很好地描述了這個概念:“我們一直在尋找,但我們從未真正意識到......正是對人的注意讓你真正掌握那些東西?!?

          盡管有這些以人為本產品的早期例子,但設計在歷史上一直是商業世界的事后想法,是僅用于修飾產品的美學。這種主題設計應用程序導致公司創建的解決方案無法滿足客戶的實際需求。因此,其中一些公司將他們的設計師從產品開發過程的下游(他們的貢獻有限)轉移到了起點。他們以人為本的設計方法被證明是導致公司差異化的一個因素:那些使用它的公司已經從創造符合人們需求的產品中獲得了經濟利益。

          為了在大型項目中能夠采用這種方法,需要對其進行標準化:一種將創意設計過程應用于傳統業務問題的正式框架。

          1990 年代,IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創造了特定術語“設計思維”,并將多年來醞釀的方法和想法封裝成一個統一的概念。


          What——設計思維的定義

          設計思維是一種伴隨著過程而生的意識形態。

          定義:設計思維是一種思想主張,一種注重實際操作,以用戶為中心的設計方法來解決問題的思路。這種以用戶為中心的設計想法有可能會帶來創新,而創新可以帶來產品差異化和競爭優勢。設計思維包括 6 個不同的階段,如下所示:


          How - 過程

          設計思維框架遵循 1) 理解、2) 探索和 3) 實現的總體流程。在這些更大的范圍內分為 6 個階段:同理心、定義、構思、原型、測試和實施。


          同理心:進行研究以了解用戶所做的、所說的、所想的和所感受的。

          • 想象一下,你的目標是改善新用戶的入職體驗。在此階段,你將與一系列真實的用戶交談。直接觀察他們的所作所為、他們的想法以及他們需要什么,問自己諸如“什么激勵或阻礙了用戶?”之類的問題。或者“用戶在哪里經歷了挫折?” 目標是收集足夠的觀察結果,以便可以真正理解你的用戶及他們的觀點。


          定義:結合所有研究并觀察用戶存在的問題。在確定用戶需求時,開始尋找創新機會。

          • 在定義階段,使用在“同理心”階段收集的數據來定義需求。整理所有觀察結果,并在用戶當前的體驗中進行比較分析。不同的用戶是否有一個共同的痛點?識別那些未能滿足用戶的需求。


          想法:集思廣益,提出一系列瘋狂的創意想法,以解決在“定義”階段確定下來的未能滿足的用戶需求。給你自己和你的團隊完全的言論/想法自由;在此階段沒有任何想法是不合適的,收集大家的各種想法,此階段想法的數量超過質量。

          • 在這個階段,把你的團隊成員聚集在一起,勾勒出許多不同的想法。然后,讓他們彼此分享想法,混合再混合,在彼此的想法上再產生新的想法。


          原型:為想法子集構建真實的視覺展示。此階段的目標是了解以上幾個階段形成的想法中,哪些是有效的,哪些是無效的。在這個階段,通過輸出原型的過程,來權衡想法的影響與可行性。

          • 讓你的想法可操作。比如,做一個新的登錄頁面,畫一個線框圖,并在內部尋求大家對此的反饋。根據反饋對其進行更改,然后用快速而簡單的方式繼續進行原型設計。然后,與另一組人分享。


          測試:把原型給到你的用戶來獲取用戶的真實反饋。問問自己“這個解決方案是否滿足用戶的需求?” “它是否改善了他們的感受、想法或完成任務的方式?”

          • 將你的原型展示給真正的客戶,并驗證它是否實現了你的目標。用戶的觀點是否有所改善?新的登錄頁是否會增加用戶在網站上花費的時間?在用戶操作原型時,持續測試和觀察用戶。


          實施:將設計付諸實施。確保你的解決方案得以實現并觸及到最終用戶的生活。

          • 這是設計思維中最重要的部分,但也是最常被遺忘的部分。正如唐諾曼所宣揚的那樣,“我們需要做更多的設計工作?!?nbsp;設計思維不是魔法,并不能讓你從實際的設計中解脫出來。Milton Glaser 的話引起了共鳴:“沒有“創造性”這樣的東西。仿佛創造力是一個動詞,一個非常耗時的動詞。這是在你的腦海中思考一個想法,并將這個想法轉化為現實的東西。這將永遠是一個漫長而艱難的過程。如果你做對了,那感覺就像是在創作?!?nbsp;盡管設計思維對產品的影響很大,但只有執行設計想法才能帶來真正的創新。設計思維的成功在于它能夠改變最終用戶生活的某個方面。第六步:實施——至關重要。


          Why - 優勢

          為什么我們要引入一種新的思維方式?采用設計思維的原因有很多,足以值得單獨寫一篇文章,但總而言之,設計思維實現了這些優勢:

          • 這是一個以用戶為中心的思考過程,從用戶數據開始,創建滿足真實的而不是想象的用戶需求的產品,然后用真實用戶測試這些產品。

          • 它利用集體的專業知識并在團隊成員中建立了一種大家都認同的想法,并得到廣泛支持。

          • 它通過為同一問題探索多種解決途徑的過程而來帶來創新。

          Jakob Nielsen 說:“一個解決錯誤問題的漂亮界面將會失敗。”設計思維解放了創造力,并將它們集中在正確的問題上。 


          靈活性 — 適應您的需求

          上面的過程一開始會覺得很深奧,千萬不要認為這就是打開成功之門的鑰匙,相反,應該把它當作梯子,在需要的時間和地點為產品提供支持。

          每個階段都意味著迭代和循環,而不是嚴格的線性過程,如下所示。在構建和測試初始原型后,通常會返回到理解和定義兩個理解階段。這是因為直到線框原型化并且想法把變為現實,才能真正體現您的設計。很難一次性就準確評估您的解決方案是否真的有效,在這一點上,循環進行用戶研究是非常有幫助的。為了做出正確的決策或確定開發順序的優先級,還需要了解用戶的哪些信息?之前沒有研究過的原型產生了哪些新用例?

          也可以重復階段,通常需要在一個階段內多次進行練習,以達到進入下一階段所需的結果。例如,在定義階段,不同的團隊成員具有不同的背景和專業知識,因此看待問題的方法也不同。在定義階段花費大量時間來使團隊成員對問題的認知達成一致是很有必要的。


          可擴展性——應用廣泛

          設計思維具有可擴展性。對以前那些無法改變思維方式的公司,現在有了一個大家都可以理解的指南,并增加了產品成功的可能性。這不僅適用于產品設計等傳統的“設計”主題,還適用于各種社會、環境和經濟問題。設計思維很簡單,可以在各種范圍內實踐;即使是棘手的、未定義的問題。隨著時間的推移,它可以應用于改進搜索等小功能,也可以應用于設計顛覆性和變革性的解決方案,例如:重組教師的職業階梯,以留住更多人才。 

          結論

          我們生活在一個體驗的時代,無論是服務還是產品,我們都對這些體驗抱有很高的期望。隨著信息和技術的不斷發展,它們在本質上變得越來越復雜。每一次迭代都會帶來一系列新的未滿足的需求。雖然設計思維只是解決問題的一種方法,但它增加了成功和突破性創新的可能性。




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:ZZiUP

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

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

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



          如何整理頁面交互規約,讓你的宣講無懈可擊

          ui設計分享達人

          小伙伴們畫好視覺稿后,是不是頁面的交互/視覺規約經常丟三落四,常常在設計宣講時被開發測試提問?自己表面鎮定,內心慌的一筆:這個...我沒想到,那個...我沒想到...

          要想在宣講時能夠從容應對各種問題,就需要在設計稿完成后,把設計規約提前想好,那么設計規約要從哪些方面寫起呢?往往B端產品的頁面更加復雜,要補充的交互規約更多,小Zi就從實際工作中總結一些,供大家參考~

          先來看個列子:

          頁面

          交互規約如下

           

          一個頁面,交互和標注規則很長很長,很多同學反饋說不知道交互規約從何寫起,看了上面的列子,大概從以下幾個方面來書寫規約:


          大方面我習慣于分成【整體】和【具體內容】來寫。

          整體

          一、頁面自適應規則

          首先從整體來考慮,首先要考慮頁面是如何布局的,是自適應?還是定寬?常用的網頁布局有:靜態布局、百分比布局、響應式布局;頁面的整體布局方式,也決定了頁面具體內容規約的撰寫;

          參考文章《3種常用網頁布局與設計注意點》:https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html



          二、滾動條/滾動區域

          1.頁面整體滾動區域

          滾動區域是從哪里開始?是頁面級滾動嗎?


          2.滾動條的樣式

          需要給出滾動條的視覺和交互


          舉例:

          三、初始狀態/空狀態

          頁面“加載”是做設計時常常忽視掉的,因為大家肯定是重點考慮有內容的情況,并且頁面數據是否需要加載、加載時長等等需要根據前后端接口返回情況確定。


          1.補充初始狀態的頁面;初始頁面是骨架圖還是保持不變,是否添加頁面引導?等都是需要考慮的;

          2.補充頁面數據為空的樣式;

          舉例:

          四、加載樣式

          頁面級加載的樣式是什么樣的?也需要補充到設計稿中;

          舉例:

          五、其他特殊情況的處理

          比如“無權限查看”“記錄已被刪除”“已被拉黑”等等情況;

          舉例:

          具體內容

          當補充完頁面整體上的規則之后,就可以著手補充頁面具體內容的規約了。具體內容的規則其實和整體規則從大方向是差不多的,也是那幾個方面,只是更細節:

          一、考慮是否自適應,自適應的規則

          如果頁面整體是定寬的,那么內容也是定寬的,就不需要考慮內容隨著頁面拉伸或縮小帶來的變化;如果頁面整體是自適應的,那么具體模塊可以根據功能需要來設置哪些區域自適應,自適應的規則是什么;

          舉例:


          二、考慮內容過多時的樣式

          B端產品設計場景更復雜,內容更加不可控,再加上電腦屏幕大小適配,頁面寬度可自由拉伸,種種因素都要我們更加仔細的考慮頁面的各種極限值情況,如何寫全面設計規約是難點。相信在設計評審會上開發和測試最常問到的一個問題也是:這里內容過多怎么展示?雖然我們在設計的時候是按照80%的場景去考慮,但是剩下20%的極限場景也需要我們給出設計規則。

          內容過多,具體劃分還可以分成以下幾類:文字過多、選項過多、彈窗內容過多、按鈕/標簽過多、表格內容過多、功能過多等等情況,每種情況下有哪些解決方式呢,可以參考文章《B端交互設計之內容太多怎么辦》:https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html


          舉例:


          三、考慮極限情況下的提示/反饋

          用戶反饋,頁面中肯定不少,我們畫頁面時也會畫出大部分提示,但是缺少提示/反饋依然是設計師常忽略的內容,主要是提示的場景非常非常的多,而且有很多細分情況:

          1.數據處理慢的提示

          問題舉例:操作的數據過多時,后臺數據處理慢是否有提示?


          2.操作后的提示

          成功、失敗、進行中等,還有部分成功,部分失敗的情況

          問題舉例:啟用失敗時如何提示?


          3.無權限、禁用等的提示

          問題舉例:項目列表-階段沒有權限時,需要添加tips提示;


          4.缺少二次確認提示

          問題舉例:新建頁面點擊取消是否需要二次確認提示?

          四、考慮校驗的時機和樣式

          1.校驗的時機:是失焦后還是提交按鈕時,還是實時的

          問題舉例:表單的必填校驗,是失焦實時校驗,還是在提交時校驗?

           “實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性,而不是在用戶提交表單時一次性檢查全部輸入:

          驗證消息顯示在靠近輸入的區域,并一起顯示;

          2.校驗的樣式:是在下方出提示,還是全局提示,還是什么的;

          舉例:


          五、考慮是否缺少滾動條的樣式

          不僅要考慮頁面整體的滾動區域,有些模塊也是單獨需要滾動的;

          滾動區域是哪里?包不包括表頭?標題?有沒有內容需要鎖定?滾動條的樣式?這些問題都要給出規則。

          問題舉例:信息內容過多時,容器內展示不下怎么辦?--答:展示不下時容器內出現滾動條,滾動區域是整個內容區;

          六、數字方面的問題

          1.數字輸入超長的顯示

          問題舉例:極限數字如何顯示,比如篩選結果超過三位數:999+

          2.數值是0時,是否有特殊的規則

          問題舉例:數值為0時,是否顯示此模塊?

          3.是否有輸入限制,比如,限制正整數、小數,小數精確到幾位等等;


          七、點擊熱區的范圍

          我們一般默認熱區就是觸發控件的區域,但是有時可能視覺上圖標需要小一點的,但是熱區需要更大一點,就要特殊標注出來。總之,方便用戶操作為上。

          舉例





          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:ZZiUP

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

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

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


          應用程序設計中的色彩原則

          ui設計分享達人

          顏色會潛意識地為觀看者提供有關應用程序的大量信息,即使他們從未閱讀過任何文字。


          什么是色彩心理學?

          不同的顏色實際上可以對人類的情緒甚至行為產生深遠的影響。這是全球各城市許多綠色和藍色倡議者背后的想法:綠色和藍色使觀看者感到更加平靜和放松。

          綠色對減輕壓力(和其他因素)的影響如此深遠,以至于實際上可以幫助人們延長壽命

          這對應用程序設計意味著什么?

          嗯,顏色的影響不僅僅是觀眾喜歡與否,還會影響他們的感受。例如,深淺不一的藍色會激發忠誠和可靠的感覺。綠色激發舒適和幸福。黃色與快樂和刺激有關。紅色讓人興奮并引發欲望。

          但是那些不一定是感覺的東西呢?人們是否也傾向于將某些價值觀與顏色聯系起來?

          這項調查要求人們選擇與某個詞相關的顏色。他們發現:

          • 信任 = 藍色(34% 的受訪者)

          • 速度 = 紅色 (76%)

          • 便宜或便宜 = 橙色 (26%) 和黃色 (22%)

          • 高品質 = 黑色 (43%)

          • 高科技 = 黑色 (26%)、藍色 (23%) 和灰色 (23%)

          • 可靠 = 藍色 (43%) 和黑色 (24%)

          • 樂趣 = 橙色 (28%) 和黃色 (26%)

          • 恐懼、恐怖 = 紅色 (41%) 和黑色 (38%)

          應用程序設計人員在開發應用程序時最好牢記這些關聯。然而,這些都不是應用程序開發人員絕對必須遵循的硬數據。相反,它們是開發人員可以遵循的指南,并結合下面討論的其他設計原則。


          圍繞顏色的文化差異


          在選擇顏色時,牢記應用程序的受眾始終是至關重要的。

          例如,在西方文化中,白色往往代表純潔或純真。然而,在亞洲的某些地區,白色是用來表示哀悼、厄運和死亡的。顯然,如果應用不當,這可能會產生嚴重的意外后果。

          為此,設計人員應該了解他們的受眾并相應地選擇顏色,這在日益全球化的社會中并非易事。


          選擇主調色板


          應用程序設計人員和公司等都應該在確定其品牌的主要調色板之前進行仔細研究。最重要的是考慮觀眾和他們想要傳達的內容。

          藍色是一種流行的顏色,因為它與信任和可靠性有關,但它也變得有點過度使用了。

          橙色可以與廉價聯系在一起,但也可以與樂趣聯系在一起。

          紅色可以令人興奮和振奮,但也代表恐懼。

          更好的使用顏色來設計應用將有助于塑造觀眾的感知。設計人員需要了解顏色關聯以及用戶如何下意識地查看設計以創建成功的調色板。


          色彩和諧


          一旦應用程序設計人員確定了主要顏色,就該選擇其他顏色了。使用一種顏色很簡單,通常不會很引人注目。

          但是,選擇的顏色需要很好地搭配。

          沖突的顏色會讓觀看者感到不安或有壓力。相反,應用程序設計者應該尋求創造一種賞心悅目的組合。一種會讓用戶感興趣并讓他們對應用程序感覺良好的應用程序,從而引導他們嘗試它。

          這里有一些設計師可以遵循的基本原則,以在他們的設計中創造和諧的色彩。


          單色

          首先是在整個設計中堅持使用相同的顏色,但使用不同的色調。這增加了產品的興趣但又不會很突兀。


          類似色

          另一個流行的選擇是使用類似的顏色。這種方案也很難搞砸,盡管設計人員確實需要了解每種顏色的飽和度。

          此方法可以使用色盤上彼此相鄰的顏色。例如,綠色和藍色,或橙色和紅色。


          互補色

          互補色方案使用調色板上彼此相反的顏色。例如,黃色和紫色或藍色和橙色。

          使用互補色時,設計師必須仔細選擇陰影和色調。如果做得不好,很容易創建一個視覺上不和諧的方案。

          但是,如果做得好,互補色可以使應用程序設計真正流行起來,并在眾多其他不那么吸引人的應用程序圖標中脫穎而出。這可以使用戶更有可能選擇該應用程序而不是其他類似功能的應用程序。


          分裂互補色


          這種方法有點復雜,但可以產生一些引人注目的結果。它采用三種顏色,一種顏色和兩種相鄰顏色的互補色。例如,從紫色開始,然后添加橙色和綠色。

          設計師必須小心使用這種方法,錯誤的組合會使設計從有趣變成突兀。


          正確的應用程序設計顏色

          總而言之,應用程序設計中的顏色世界非常復雜。沒有一種顏色會吸引所有觀眾,也不會適合所有品牌。然而,選擇正確的顏色絕對意味著一個成功的應用程序和一個普通的應用程序之間的區別。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:ZZiUP

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

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

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

          B端數據可視化組件設計規范:平臺級項目復盤

          ui設計分享達人

          關于數據可視化項目


          在貝殼,有店東、圈經、CA等多種服務角色依賴數據信息作業,各種各樣的數據被用于管理、分析和制定目標。但是,房產垂直領域的數據非常龐雜,數據體量也在急劇增長,圖表的應用場景越來越復雜,除了pc和移動端的數據看板,還出現了線下門店大屏場景。


          與此同時,數據展示一直處于無可視化規范的狀態,導致頻頻出現“數據堆疊”“數據出界”“數值無單位”等可讀性低的問題。因此,把這些復雜、抽象的數據,通過更直觀更容易理解的可視化方式展示出來,建立一套專注于房產領域的可視化組件規范,變得尤為重要。


          圖1 數據部分展示現狀


          Kecharts項目從匯總和梳理數據展示問題出發,聚焦并抽象問題點,旨在建立起統一的可視化規范。同時,我們還對極端數據的展示進行計算規則處理,從人工配置的效率考量,系統性地幫助用戶進行高效分析和決策。


          1.從不統一到有規范


          數據規范的第一步,解決“知道什么數據用什么圖表,了解顏色的使用規范、數據排版展示的要點、適配性原則”等基礎規范,從配色、布局、基礎展示規則上,滿足數據展示的美觀度和可讀性。



          2.極端情況的處理規則


          最難解決但也最有價值的痛點是:數據體量大、維度多帶來的“不確定性問題”,想要把海量、高維的數據以準確有效的方式展示,需要建立高質量的交互和配圖規則。因此,我們在梳理基準展示規范的基礎上,也對極端情況進行了一系列的規則處理。



          3.人員可配的高效性


          數據往往是由平臺自上而下傳達到城市,再由專業的商業分析師對數據進行分析和處理,很多數據需要人工繪制和展示。因此,Kecharts在設計數據規則展示的同時,也要考慮數據的可配置輸出規則,盡可能減少人工操作成本,降低由于人工分析水平不同導致的報告質量方差。



          一、建立圖表可視化

          基礎規范


          建立基礎可視化規范,是為了將圖表展示拉到基準線水平,也是當前要做的第一步。基礎的規范建立,可以讓圖表迅速換身衣服,第一時間提升用戶的感受。所以,第一步首先解決配色的使用、基礎的布局、圖形的基本表達等方面的規范問題,滿足數據的基礎美觀度。



          1. 配色

          更科學的配色帶來嶄新的視覺感受


          圖2 配色色板圖示(局部)


          優化前,Kecharts各種配色之間關聯性低,與整體平臺的表現層形式不統一。優化后色板的樣式與KeDesign貝殼設計系統,“UXD筆記”公眾號后臺回復“貝殼”,領取VI規范文檔)無縫融合?,F有配色方案飽和度更協調,閱讀體驗更友好。


          由于數據體量大,我們嘗試將8種常用色擴展成10種常用色以及24種擴展色來更好地滿足業務需求。并且根據不同品牌主色,進行明度調整。除此之外還增加了更沉穩的商務主題以及暗黑主題配色,滿足特殊業務場景的使用。


          圖3 配色的概念圖


          2. 布局

          更合理的布局帶來清晰準確的表達


          基礎布局

          圖表的構成,由一系列獨立的圖形與法元素結合而成,如包含標題區、操作功能區、面包屑、圖例區、單位區和圖表區,通過合理的基礎布局增強圖表的秩序性一致性,同時規范標題、圖例等元素的展示適配規則。


          圖4 數據基礎布局規范(局部)



          精細圖形

          整體的圖形展示細節也做了統一調整,從整體排布、字體、字號、圓角、描邊粗細、數據軸、標簽等方面進行了優化設計,使整個圖表看起來更加精細。


          基礎的配色、字號、布局調整之后,基本滿足了數據的展示基準,從基礎合理性展示和視覺感提升上,有了一定的改良。


          圖5 基準規范后的對比



          3.適配

          更靈活的規則帶來細膩的交互體驗


          圖6 柵格化設計圖示



          定義圖表的適配規則

          定義四種圖表卡片的適配方案,當圖表放大或縮小到某一區間時,內部布局會根據圖表大小變化進行有權重的刪減,使圖表在多種區間內能夠將核心數據表達的更清晰。


          圖7 柵格化設計圖示



          二、極致探索

          極端情況規則


          滿足了數據的基準展示,并沒有達到完整的可視化展示規范,海量和高維帶來的展示問題依舊存在。所以,在建立基準規則的基礎上,結合貝殼數據的特色,需要集中處理極端情況帶來的問題,從基準線提升到具有易用性的“標準線”。

          圖8 以餅狀圖為例的極端情況分析



          1.解決數據量過載

          導致的不確定問題


          過濾數據

          首先從底層數據進行過濾,過濾底層占比0%的數據,減少數據呈現量。將占比為0%的大部分數據在圖表的可視化展示中去除,轉移到圖例中展示,滿足了用戶需要完整數據的訴求外還大幅度提升了圖表的可視化程度。


          元素優化

          優化標簽、線條、指示等元素的展示規范,從定義邊界位置、規范標簽的展示內容上,對圖表內元素的極端情況做適配處理。


          智能檢測

          為了消除信息過載帶來的標簽碰撞,我們制定了標簽的智能檢測規則,當兩個標簽重疊超過1/3時,自動化地隱藏部分標簽,被隱藏的部分可以通過懸停展示詳細信息,不經意間大幅度的提升圖表的展示美感和用戶的瀏覽體驗。

          圖9 餅狀圖為例的處理過程


          2.拓展通用性極端處理規范


          從單點問題擴展為通用性規范處理,在不同類型圖表的極端情況處理過程中,從全局的角度出發,對極端情況下出現的核心問題做匯總并抽象,在顏色、碰撞、超圖形等方面,輸出極端情況處理規范。


          圖10 通用性智能檢測規則(局部)



          三、提升人工配置

          的高效性


          數據分析和傳達的過程,依托于人工過濾、處理、繪制和展示,考慮數據的配置輸出,人為水平難以把控,盡可能減少人工不必要的操作成本,從而提升數據報告產出的質量。


          在配置自由度時結合產品定位、屬性和功能進行思考。用戶希望數據通過配置層處理后轉化為可視化圖表。普通用戶期望通過簡單的操作快速搭建數據看板;高級用戶希望對可視化圖表有精細化的自定義需求。


          我們盡量用智能處理代替人工對數據無效數據的篩選,對數據的展示做智能的適配,如指標卡的展示,前置設置了一系列的展示模版,在用戶選擇指標數據的同時,會根據指標的數量做自動化貼合排布。與此同時,保留了一定的人工可配置自由度,支持用戶可自由配置指標卡的細節展示等。

          圖11 指標卡用戶配置示意



          因此,針對大量雜亂的數據,數據的呈現通常需要兩層呈現給用戶。第一層是數據庫和數據源,會自動過濾掉存在的垃圾數據和無效數據


          第二層是數據分發層,盡可能的通過自動化的配置去輔助操作員進行數據的分發和最終數據面板的呈現效果。通過簡化操作流程和匹配人為操作習慣,降低學習成本,提升操作效率,為操作者提供“順其自然的設計”。


          圖12 數據處理分層圖示



          結語


          Kecharts的初衷是保證數據的真實、高效展示數據、遵循美學原則。我們遵循數據能夠真實呈現的原則,在可視化表達中確保不遺漏、不誤導,確保數據準確性。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:大魔V

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

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

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

          怎么將畫像與體驗工具打通賦能設計

          ui設計分享達人

          什么是體驗可視化地圖

          它們是一種體驗洞察和形成參考材料的工具,能夠幫助業務人員探討決策使用,它們都是結合真實用戶反饋形成的。另外這些地圖本身并不能直接提供答案,而是用于促進對話或作為決策導向,它能跨部門讓人們聚在一起討論業務目標,指出潛在的機會或達成一致的價值觀與目標,使解決方案更可行。即促進共同參與、共同思考、共同目標、共同發力。像心智模型、空間地圖、服務藍圖、用戶體驗地圖、客戶旅程地圖都屬于體驗可視化地圖,也有稱為對齊圖。


          用戶畫像&用戶體驗地圖介紹

          用戶畫像 本身可以反映出服務對象的特征,便于改進業務服務,幫助研究用戶需求或產品痛點,因此在一些體驗可視化地圖中會配合使用。并且可以幫助設計師指導產品功能、導航、交互、甚至視覺設計方面的決策,是一種聯系用戶訴求與設計方向的有效工具,總之它能讓你知道產品是給什么人用的,他們有什么特征或訴求。


          用戶體驗地圖 以個體在某個產品或領域中的體驗經歷為主,關注產品是如何契合個體用戶體驗的,通過用戶個體的行為觸點與視角來洞察商業機會。是一種比較視覺化、有助于引發共鳴和聚焦用戶體驗的工具,比較貼合情感化設計的理念,適用于洞察用戶視角下與產品系統交互的可視化地圖。


          所以在作品集里經??匆娺@些體驗地圖就能夠理解了,一方面是作為戰略層的研究報告說明,用于佐證設計或決策的依據。另一方面是為了其他讀者達成共識,便于共情設計目標。當然豐富和美化作品集也是一方面,更多的則是希望不要濫用起來,形同虛設,成了一個沒有深入作用的裝飾工具。


          兩者工具的差異與特性

          用戶畫像的因素

          用戶體驗地圖的因素

          如何打通用戶畫像與用戶體驗地圖

          方便直觀易懂的去解釋用戶畫像與用戶體驗地圖之間的關系作用,這里我通過流程、相互作用來解釋一下;

          從流程上看

          體驗地圖是基于用戶研究開展的,所以要考慮研究誰,研究什么問題,在什么場景或領域進行,因此就需要借助用戶畫像去界定范圍,以及形成用戶材料,再去考慮用何種體驗可視化地圖展現,而用戶畫像也將一直貫穿始終提供可參考的用戶信息;

          相互作用上看

          用戶體驗地圖一般都是聚焦于既定范圍的目標群體,一份完整的用戶體驗地圖應該包含用戶畫像信息,應交代清楚目標用戶的背景、場景、需求、痛點等關聯信息,方便讀者了解,以便于代入用戶視角深入到用戶體驗地圖的討論中。


          而用戶畫像盡管提供了由外而內的視角或部分設計見解,但并不能滿足項目多樣化視角的需求,且不足以形成一系列的設計見解洞察,所以用戶畫像始終需要與心智、情景、體驗地圖或研究報告等結合使用。也就是說用戶畫像需要與用戶體驗地圖配合輸出,兩者誰也替代不了誰。


          體驗可視化工具的一般流程簡述

          一個正式且有效的體驗可視化地圖一般必須經過四個階段才能完成,最后再得出結論達成一致;

          一、項目啟動;通過內部識別或收集用戶反饋找到需求點,計劃研究目的,制定目標。

          二、開始調研;通過研究手段向用戶收集優化資料或數據,為創造體驗可視化地圖提供可靠的數據。

          三、闡述分析;選擇闡述方式,通過體驗可視化地圖將研究結果與核心價值進行呈現,為后面探討做準備。

          四、達成一致;使相關業務人員共同參與研討,結合地圖報告進一步的思考,指出潛在機會或達成一致的觀點。

          五、展望未來;根據研討結果設計解決方案,提出價值主張,進一步跟進和實施起來。

          真實應用中不用急著畫圖準備填充,先明確目標再從用戶研究或資料收集開始。如果沒辦法找到目標用戶進行訪談或測試研究,那么至少找到一線的人員進行訪談或測試,不要依賴自己的見解或認知套用,這些地圖的精髓在于打破內部視角建立起一場具有包容性的對話,不同部門的參與者多多益善,所以這些地圖只是研討中心的參考物。


          如何正確Get用戶原型與畫像

          構建和使用畫像時大致可以分為兩類;

          1. 根據用戶研究建立正式的用戶畫像

          2. 建立人物角色原型

          具體取決于用途與條件情況等,制作任何一組用戶畫像都非依托想象力,都是基于事實或用戶研究的。并且不只是簡單的人口數據或個人信息描述,如果一組不能達到共情效果的用戶畫像也就失去了核心價值《如何有效快速共情-點擊查看》,就像一份簡歷,沒能體現出個人能力與專業素養一樣。


          人物角色原型

          制作一個正式的用戶畫像是一個漫長的過程,還需要開展用戶研究,如果你沒有現成的調研對象或調研條件,你就可以采用人物角色原型,該方法是由《Lean UX》的作者Jeff Gothelf提出的,他描述到;

          “人物角色原型是一個正式人物角色的變式,其最大不同在于人物角色原型不是用戶研究的結果,而是更多的源于頭腦風暴的結果。公司成員會從公司理念出發,基于自身領域的專業性和直覺,來明確誰是公司產品或服務的目標用戶,用戶的動機和需求是什么。”引:Jeff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)

          這類角色原型不用花費大量時間去做用戶調研,它們是基于已知的特征情況或預期的目標用戶,適合臨時性使用,便于開展前期工作或達成一致的見解,但是人物角色原型并不能代替基于可靠數據的用戶畫像。


          構建人物角色原型的方法

          就是跨部門集體參與貢獻觀點與數據來構建。前線相關業務人員是必備的,人數控制在5-8個人就行,要有主持人把控節奏和參與度,盡可能收集到不同業務視角下的問題反饋,討論開始前可以提出一兩個角色原型來激發討論,然后充實起來,盡管最后可能形成了多個角色甚至有些看起來有沖突,不過沒關系,重點是讓這些人物角色清晰明確下來,不一致的地方可以進一步的討論。


          人物角色原型的構成內容

          一般人物角色原型在一頁的篇幅內就可以顯示完,主要五個板塊。值得注意的是,一定不要脫離了產品主題的范圍;

          一、角色基本資料:角色頭像、姓名、頭銜、單位或一些可用的輔助資料。

          二、人口統計特征:一般包含性別、年齡、職業、收入等與主題相關的人口統計指標(類似簡歷中的個人信息)。

          三、心理統計特征:與主題相關聯的因素,主要指不可輕易觀察的心理活動、態度、信仰、動機、觀念的個人特征。

          四、產品相關行為:指與產品體驗有主要關系的行為或是行動,包括興趣愛好、個人習慣、專業活動等。

          五、需求與痛點:用戶有哪些與主題相關的需求或痛點,你的設計可以滿足用戶那些需求和痛點緩解。



          用戶畫像

          用戶畫像本身可以幫助發現問題或進行決策,同時也反應出了對用戶或用戶視角的共同理解,并且可以在日常研發工作中持續使用,例如一些材料歸檔、分享、更新、輔助其他可視化地圖等,以發揮出更多的余熱。


          如何打造可用的用戶畫像

          定性還是定量類型

          根據產品需求選擇定性還是定量分析,亦或者結合,一般定性適用于用戶需求深挖或業務創新等情況,講究的是“為什么”,而定量更像是通過數據驗證“有多少”,常用于數據分析、趨勢分析、數據驗證、做精細化運營和用戶精準投放。  

          定量需要足夠的數據支撐,如果項目需要畫像且企業不穩定、用戶量級不夠不能滿足數據需求,則可以借助市場數據報告、白皮書、第三方數據服務平臺、調研服務公司等來參考,這些數據也都是可靠的。大數據殺熟就是數據畫像的反面引用,通過畫像對用戶進行分層,再挑出用戶中的軟柿子或老實人欺負。


          識別用戶群體優先級

          對目標群體要有認知,要根據特征劃分層級或類型,例如典型用戶、潛力用戶、專家用戶。這些用戶的界定范圍需要業務相關人員去制定,類似一份簡歷我們可以根據能力對標級別,一般我們可以通過4個比較有影響力的指標進行劃分,至于權重我們可以采用常見的四象限或卡諾模型;

          在制作用戶畫像前可以合理的根據人物角色原型的特征過濾目標用戶群體,但不要過分依賴,你只是需要找到符合的目標群體,而不是根據原型找到理想的那個人。

          最終調研對象的關系表呈現;

          定性類畫像不用邀請很多用戶參與研究,一般在5人左右,只有研究資源充沛時才會考慮邀請更多研究對象,一方面是研究發現5人左右就能反映出絕大多數問題了,另一方面是出于時間精力和預算情況考慮。


          定性類用戶畫像要做什么

          一、確認研究對象的優先級,根據需求背景或目標確認重點跟次要群體來挖掘不同用戶視角下的問題;



          二、通過線上招募(APP內或相關平臺發布有償邀請,亦或者尋求第三方服務公司幫助)、客戶群(相關的用戶答疑群邀請)、論壇社區(發布招募帖子等)、專家咨詢、產品線上推送等方式,尋找目標群體并建立聯系;


          三、選擇線上訪談、可用性測試、問卷調查、焦點小組等有效的用戶洞察方式,并設計好相關問題或材料準備與用戶進行深入研究(主要圍繞已知問題或新的設計方案驗證,再就是新的業務需求洞察為主);



          四、整理用戶資料,圍繞研究主題建立用戶畫像信息,完成主要信息模塊,可以根據業務需要,將用戶技術特征、職業特征、環境因素進行補充(需要考慮是否與業務有一定關聯或影響,否則無意義);



          五、完善用戶畫像的細節,將價值信息同步到畫像中,并對有效信息的細節進行補充,增加可信度還原真實性;


          用戶畫像并沒有一個模版標準,具體還是要看業務需求,而且網上的模版挺多的,自己甄別吧。另外在用戶洞察的過程中,我們可以結合可用性測試、繪制故事板(這兩種研究方法有興趣可以查閱資料,一兩句講不清楚,有機會展開講)等方式一同進行,而不只是把目的停留在建立用戶畫像上,這樣反而獲取的有效信息受限了。


          定量類用戶畫像要做什么

          一、數據采集

          通過有效途徑將用戶產生的數據集中,不論是產品數據庫、數據埋點、第三方數據統計或是定量調研的結果,這些數據都是重要構成部分,同時也決定了信息的范圍,比如你拿不到用戶的出行數據,那么就根本沒辦法構建相關標簽或指標。

          二、數據定義

          對數據進行清洗整理,識別出用戶行為數據、用戶偏好、生命周期等數據,并進行標簽化分類整理,這些標簽或指標可以體現出某些維度的趨勢或用戶行為預測。不過值得注意的是,在構建這些標簽或指標時盡量結合業務流程或生命周期來梳理,考慮畫像建成目的與業務場景同時,也要思考標簽的權重問題,標簽不等于越多越好。 

          三、構建畫像

          根據產品階段或業務需要,把相關業務標簽結合用戶群特征信息整合成用戶畫像,一般的業務標簽類型有增長策略、用戶偏好、用戶價值、營銷觸點等,這類畫像可以包攬多個維度信息,還能對周期數據可視化顯現趨勢變化,但是在用戶痛點或需求上,可能不會很直觀,需要進一步的結合用戶場景帶入思考。



          通?;ヂ摼W產品前期,沒有構建標簽或數字畫像的經驗,可以考慮讓團隊引入相關第三方數據畫像服務,它們可以更便捷的接入到你的產品中并幫助你打標簽做統計;

          以下截圖來自第三方大數據畫像工具(神策)

          *第三方數據分析輔助產品也不少,這里只做交流使用


          如何讓畫像角色更生動

          畫像中的角色應該更加生動,能夠讓我們感受到真實的存在,只有這樣才能產生共鳴,賦予畫像價值,為此我們可以通過控制以下六點來做的更好。


          一、不要特殊化

          特殊能加深印象,但是特殊化并不代表產品的典型群體,同時在實際應用時容易擾亂共情或分散注意力,例如用戶群體是普通青年,就不要描述成一個帥氣的學霸,也不要為用戶添加一些奇怪的癖好,這些不相干的信息并不能讓畫像更加生動;



          二、合理應用頭像

          通常作品集中的頭像都比較美觀個性,這沒事兒。但實際畫像應用中,頭像也是很重要的一部分,會馬上映入眼簾,這些頭像不要使知名人群的,且貼合真實用戶標簽,不用暴露性感或是丑陋異樣的,也不要使用插畫、卡通、3D形象,不要有奇怪或不自然的行為動作。


          三、充實細節

          以一款線上教育產品作為背景,舉例原本我們的用戶信息寫到:

          那么即可根據產品屬性結合實際情況進行豐富補充,例如調整為以下描述;

          雖然沒有過大的變化,但是已經將貼合教育產品的地域信息、課程階段、收入情況進行了完善刻畫;

          接著再例如,虞溪女士的需求寫到;

          簡單來看確實是透出了線上教育產品的需求,但是需求并不深刻,也沒有刻畫出虞溪女士的核心訴求,為此我們可以結合創造情景故事的方法,融合角色、場景、行動、事件、評價、情節這些元素去深度刻畫描述,例如以下調整;

          結合創造情景故事的辦法是為了刻畫出更多細節,不僅可以讓瀏覽者更好的沉浸在角色視角,也能在完善的過程中深挖出更多有價值的思考;


          四、創造情景故事

          情景故事不會很枯燥會更抓人心,能夠傳達更多信息的同時,將產品信息與真實情景交融在一起,方便團隊記憶理解以及更好的促進討論。創造情景故事的元素通常有:角色、場景、行動、事件、評價、情節??雌饋砭拖袷窃诿枋觥拔遗cxx產品的一天”。

          1. 角色:故事的主人翁或是參與者,不可缺少的重要部分;

          2. 場景:故事發生的時間地點物理環境,例如早上八點半我在擁擠的地鐵上搶到了座椅,并打開了手機;

          1. 行動:能夠觀察到且與主題有影響的行為動作,例如我被這個問題難住了,解鎖手機并打開了這個APP;

          2. 事件:發生了什么事兒,角色間做出了什么反應產生了何種結果;

          1. 評論:角色怎樣評估并作出決策,有了怎樣的目標,并如何進行下一步。其中任務目標是驅動的核心;

          2. 情節:一系列行為與事件的演變過程再到結果,從問題的發生到角色推進目標到結局。例如經典的戲劇結構:

          *創造情景故事是要花費時間精力的,如果時間充裕你可以慢慢將相關描述進行轉換,時間有限責挑取重點轉化;


          五、不要孤立使用畫像

          在前文就有描述到畫像需要配合其他體驗可視化地圖一起才能更好的發揮效用,畫像通常始終保持著個體視角,而且沒有辦法傳達一系列完整的體驗報告,所以為了更好的滿足項目多樣化視角的需求,盡量不要孤立的使用畫像。



          六、定期更新

          產品發展中,會經歷不同的階段與市場變化,用戶群體自然會變。如果說產品在研發新的功能去開拓年輕化的市場,那同樣意味著目標群體趨向年輕群體,這種時候就需要變更或新增用戶畫像,就不要使用舊的畫像起步了。



          基本上做好以上細節,你的用戶畫像就大功告成了,這就像是結合STAR法則優化項目經歷一樣。最簡單的標準就是業務人員能夠去理解這些角色并代入角色視角思考,可以有效共情或決策。


          如何用好用戶體驗地圖

          首先我們回顧一下用戶體驗地圖的關鍵詞:既定的用戶群體、應用場景或領域,用戶以某個持續性目標驅動與你的產品或服務發生交互,并且涉及多個階段來實現目標,地圖會通過由外而內的視角洞察產品服務是否契合用戶的體驗。



          由此可見在與用戶研討時,我們的問題或測試任務應該覆蓋相關階段或重要的任務流程,以此來獲取體驗地圖的相關重點信息。另外很多產品比較龐大,服務頗多,因此控制好體驗的階段范圍也很重要,不僅會拉長工期也會使得焦點分散。

          用戶體驗地圖的構成簡述

          用戶體驗地圖主要包含三個層面的內容,一、用戶目標階段,二、用戶與產品服務交互,三、痛點機會洞察;

          其實礙于不同產品和服務類型,體驗地圖的構成元素也有差異,不過在漫長的應用發展中也逐步趨于穩定。



          常見的構成元素:

          一、用戶需求或目標:
          在體驗地圖中,用戶以需求或目標驅動與產品發生交互,需求或目標既定了要做什么,應該需要什么服務。


          二、行為階段:

          行為階段是界定場景的重要部分,以目標任務階段的生命周期或者關鍵節點展開,不一定所有階段托盤而出,階段太多則不聚焦,細分太多則費時間也不一定快速見效。


          三、采取的行為觸點或步驟:

          用戶使用產品或服務展開的行為或接觸的設備、泛功能應用等。


          四、想法與問題:

          在體驗服務的過程中出現的問題或是一些真實的想法感受。


          五、情緒波動與精神狀態:

          情緒和精神狀態通常是反映服務好壞或用戶滿意度的重要因素,但同時也難以觀察或量化,通常會根據用戶對問題的描述來共情情緒,亦或者向用戶提供情緒表情標簽。


          六、痛點或機會揭示:

          結合上層階段行為與用戶的反饋信息向下垂直洞察產品服務的痛點或機會。


          七、設備或其他圖例補充:

          例如跨端跨設備或包含特殊標簽信息的補充說明。


          *示例模版


          用戶情緒板怎么用才對

          表情包早已成為網友互動和情緒表達的重要部分,但是在實際的可用性測試或訪談中,用戶會相對拘束一些,也不會把各種各樣的表情掛在臉上,所以才說用戶情緒很難研究和洞察,更別說量化執行了。有些人可以進行表情管理,情緒更是難以琢磨;


          那么體驗地圖中的情緒板怎么搞定呢?


          就用戶體驗地圖中的情緒塊來講,通常一定不只是表情icon來做表達,這樣費解還缺乏實際價值,所以一定會加上相關描述來揭示用戶情緒與觀點。心智模型中用戶情緒感受便是靠的文本描述來傳達。


          早期Pieter·Desmet在其《Designing Emotions》一書中提出了如何衡量情緒的研發方法,他開發了一款叫做產品情緒度量儀的工具,其原理就是為用戶提供各種表情表達的卡通形象,用戶在體驗過程中根據自己情緒選出最匹配的那個卡通形象來示意自己情緒。這個工具經過不斷迭代并豐富聲音后已授權到:https://www.premotool.com/,我們可以在度量用戶情緒或其他體驗可視化地圖中配合使用。 


          另外在使用表情標簽應用時,并不大推薦常見的微信表情、QQ表情等,這些表情在長時間的使用中,用戶都會形成一些偏好,這會影響使用決策


          在服務體驗的過程中,很多時候情緒變化并非是單一線型上起伏變,例如:

          我在觀看電影高潮的部分突然網絡異常,那么我的情緒應該是多樣化的,一邊是代入高潮部分的激動,另一方面是網絡帶來的失落感,同時還有等待網絡恢復的焦急。

          為此我們通常有兩種方法來傳遞情緒變化;

          1、將喜、怒、哀、樂、悲、恐、驚或需要的情緒標簽化,每種情緒用一個顏色表示,然后使用同軸的趨勢圖結合用戶行為階段來表示;


          2、即使一次展示多種情緒,也難免有積極情緒與消極情緒同時出現的情況,這種時候可以圍繞一條分界線劃分兩類情緒區間,使用情緒曲線結合關鍵因素描述來顯示更加全面而復雜的情緒心理,對應每個關鍵情緒節點可以使用不同表情圖標細化輔助,使得情緒起伏的信息更充實有價值;


          怎樣完善用戶體驗地圖

          1、建立正確的項目目標是第一步,用戶體驗地圖的優勢與作用都有在前面講過(如果忘了可以在“兩者工具的差異與特性”中開始回顧),使用用戶體驗地圖是有目的性地,它不是優化體驗的萬金油,通常都是收集用戶反饋知道某一些階段或環節存在問題,而建立優化目標開展的工作;



          2、鎖定存在問題的階段,建立用戶問卷、焦點小組或用戶測試進行聚焦研究,嘗試收集用戶的意見或優化方案;



          3、通過白板或線上協作工具建立簡易的用戶體驗地圖框架,并將研究用戶的畫像信息與碎片信息填入地圖。白板共創的辦法其實就是根據用戶體驗地圖的框架,結合用戶視角將自己的觀點寫到便簽貼到對應的區域,避免你一句我一句難以記載和整理;



          4、關注每個階段的過渡,通常問題很容易出現在這些地方,例如付費前到付費后階段,如何進入后者階段就成了關鍵點,另外沒啥優化空間或體驗良好的階段可以折疊起來留出更多空間關注核心;



          5、用戶體驗地圖的畫龍點睛之處在于跨部門協作完成,而不是閉門造車,邀請一兩個其他部門的人說明要求和完善地圖并不是什么難事,只有這樣最后的結果才能達成戰略一致,而不是自己繪制完后要求其他人被動接受結果;


          檢驗用戶體驗地圖的標準

          一、首先看你是否與用戶建立聯系,用戶體驗地圖的個體對象是用戶不是你自己,盡可能的獲取真實的用戶的信息。

          二、一個產品運作是需要多個部門協作的,所以至少要有三個不同部門的人員參與進來。

          三、協作完成用戶體驗地圖和達成共識后,你會驚奇的發現問題如何解決,各個部門該怎么配合實現都清晰明朗了。


          前一陣子跟UXren社區主理人寶珠老哥討論過,就如截圖所示,更重要的是將企業各部門協同在一起,達成一致的戰略目標,共同參與探討出解決方向為業務賦能,這才是體驗地圖的精髓所在。


          什么是觸點模版工具

          用戶體驗地圖通常包含了一系列階段,而每一個階段都會由多個觸點編排成一段微型體驗,而觸點模板工具將會很好的為你建立和打開一片微型的體驗模型,這種模型是由羅伯特·羅斯曼(j·Robert·Rossman)[美]與馬修·迪尤爾登(Mathew D·Duerden)[美]在《最佳體驗》中提出的一種體驗洞察工具,它可以很好的結合體驗地圖去進一步的深挖某段流程或階段里需要優化的體驗,它們之間的關系就像一條路線圖與一份詳細的指引說明。當你完成某個觸點模版時,你會對該觸點上的體驗設計有清晰的認識,并且會形成一份書面報告與執行團隊共享和交流,觸點模板可以很好的解釋體驗是如何設計的,并且將相關執行團隊的角色聯系在一起,這不是噱頭,你可以根據后文指引進行嘗試。


          體驗類型的框架

          體驗是復雜的,在用戶觸點模版工具中,體驗被劃分為平淡的、專心的、難忘的、有意義、革新性五種類型,并且它們具有連續性,是通過關鍵特征與關鍵屬性定義出來的,它們結合了心理學理論基礎,目的是方便更好的理解體驗,并在設計實踐中起到指引作用促進交流,因此我們在設計時也應該對用戶體驗結果有意向性的去設計,框架如圖;

          *關于參與感的兩種系統思維是兩種不同的思維狀態,系統1更像是慣性思維,憑借認知或經驗更加快速和自動化的思考,而系統2就會開始更主動的更深入的進行思考,參與階段越高思維越深思。


          而三個階段分別是;

          一、接受:個體意識到和接受體驗過程中正在發生的事情。

          二、思考->處理->計劃:個體開始積極的思考體驗,并對正在進行中的事物做出處理與反應,同時可能開始計劃各種應對方案。

          三、行動:深入的參與到體驗中并引入新的觸點和元素來維持互動,從而共同創造體驗,例如《魷魚游戲》上映后,影片中的“扣糖餅”又帶火了糖餅。

          當新的事物被第三階段引入后,又會重新開始接受并循環,不過這并不代表所有的體驗都能夠完整經歷這三個階段。


          觸點模板框架

          觸點是用戶進行交互的重要部分,其周期可長可短,會產生不同感受,而一系列的心理感受會促成最終階段或完整的體驗。觸點模版由11個部分組成,它們互相作用指導和揭示體驗設計的方向與細節,并把設計結果引向預期的體驗方向。


          抬頭信息

          • 編號:對應到體驗地圖的階段編號或是觸點編號,隨著觸點設計逐步完善,對應的位置可能會發生轉移。

          • 標題:對應該觸點模版主題的標題或是任務觸點的名字。

          • 體驗類型:觸點的體驗類型或整體的體驗目標,從平淡的到革新性的五個體驗類型。

          • 期望的反應:我們把期望的反應視為觸點預期結果的北極星指標,它可以是多個。我們通過用戶反應逐步提煉出預期的結果供予用戶體驗,例如期望的反應是笑容,那么我就可以提煉出“講個笑話、開黑游戲”等可以促成反應的體驗結果,同時期待的反應應該盡可能的傳遞用戶價值。

          核心組成部分

          • 期望的結果:根據期望的反應,我們要提供給用戶哪些體驗來實現。同時期望的結果應該跟類型相匹配。一般我們可以根據 “1. 產生積極情緒、2. 吸引注意力、3. 幫助發展和加強關系、4. 從更宏大的視角給人來帶意義、5. 提升能力、6. 孤立自由選擇” 這些類型內容作為起點,并根據體驗項目的情況細化,例如“心情低落想要刷刷手機產生積極情緒”Change“在App上刷會兒短視頻,看點有趣搞笑的段子來緩解下低落的情緒”


          • 體驗場景元素:觸點模板工具沒有特定的行業或業務模式,因此這些元素根據需要完善即可。而實際的元素應用中也會有不同的權重,注意重點元素的設計應用。

          • 互動設計:可以是人與人互動、人機交互或更為復雜的互動,就是有意向性的將元素進行編排與用戶產生互動獲取必要的信息或傳遞。


          • 貢獻者:整個體驗階段中,可見的幕前服務人員與后臺的服務員,他們是組成完整體驗的重要部分,例如餐飲店的服務員與傳菜員就是可見的幕前服務貢獻者,而廚師們就是幕后的貢獻者。


          • 共同創造:共同創造和可供性是促進用戶參與的兩個重要的方法,并且參與度有高有低。好的體驗更多是與用戶共同創造的,建立合適的觸點與用戶共同創造體驗是重要的!以微信的“拍一拍”來看就是個很好的例子,拍一拍功能本身是加強了微信聊天的可供性,給用戶提供了更多的互動可能,同時用戶可以自己編輯被拍以后的文本,加強了體驗的趣味性,這便是共同創造的過程??晒┬詾橛脩籼峁└嗷芋w驗的可能,而共同創造為用戶提供DIY的空間。

          • 優化:對觸點進一步的優化,加深體驗感受。一般分成了兩大類型,一類是技術優化、一類是藝術優化。例如讓一個App加載短視頻更快更流暢,這就是技術型優化,如果為一個服務器未響應的404界面配上緩解焦慮的插圖,這便是藝術型優化。


          • 過渡:觸點與觸點之間的過渡可能波動、異常、緩慢、復雜等,如何引導用戶正常的過渡到下一個觸點也是重要的一部分,它可以是自動化的隱式過渡也可以是引導性的顯式過渡,就像是安全通道的指示燈一樣將用戶從一個地點帶往另一個地點。


          *觸點模版(可直接下載原圖進行打印使用)


          如何構建一個觸點模版

          通過一段音頻聊天室互動體驗之旅來揭示觸點模版用法與效果,音頻聊天室大家應該都熟悉了,這里就不聚焦用戶畫像與用戶體驗地圖了,觸點發生在用戶第一次進入歌廳音頻房間,那么應該怎么設計體驗來為用戶留下好印象呢?



          觸點是發生在注冊后的第二個階段,即首頁房間列表(編號A02),完成注冊階段后見到的第一個界面。標題則暫定為“一次非凡的音頻互動之旅”,我們希望新用戶在選擇好一個房間進入后能夠有一次愉悅難忘的體驗經歷,而相應的期待反應則是“有人帶我玩真棒!這個聲音我好喜歡,下次還來找Ta們”。體驗類型則希望是從平淡的體驗類型升華到難忘的。

          其中體驗場景除了設備自身與軟件環境,更多真實的環境因素碰撞我們無法預測和控制,因此僅鎖定軟件自身的場景元素?;釉O計則是關鍵,軟件本身更多是工具支持,我們需要利用好運營資源跟用戶產生互動來促成體驗結果,這里我們會根據技術可行性優先考慮能為用戶提供的體驗結果,再到互動設計部分。其次就是過渡部分,預期的過渡觸點實際上會有多個方向,我們優先以充值消費作為一個觸點(轉化)、私信關注為另一個觸點(形成互動聯系方式),完善后的觸點模版如圖;


          在該觸點模版中,主要揭示了如何為用戶打造理想的體驗之旅,不僅涉及到運營方法也包含了軟件的重點優化部分,它很好的展示了如何通過角色之間在軟件中的互動來促成體驗與商業價值,當你把這份資料在團隊里分享后,完全可以清晰的對體驗設想進行解釋,以促進團隊內的深入討論與細節推進。至于相關功能的細節推敲同樣可以采用觸點模版繼續深入。



          接著A02觸點模版中提到的標簽體系優化,我們再一次的結合觸點模版進行標簽的體驗設計,編號設定為“A03”,這是一個泛觸點,它涉及到用戶注冊進入時、房間互動、系統消息、消費與充值、裝扮標簽的著落頁,但歸根還是在應用內。標題為“讓標簽為用戶賦能意想不到的體驗”,在這段泛觸點中我們期望圍繞標簽為用戶打造難忘的體驗,讓標簽產生更多的價值與業務轉換,經過初步的體驗設計后,新的觸點模版如下;


          在這個觸點模版上我們對標簽的作用價值進行了定義,并對功能及業務流程上進行了設想,已經初步的形成了標簽體驗的設計,接下來只要將裝扮標簽的著陸頁與房間內的應用進行完善設計,在輔以條件判斷與消息通知打通閉環就算是完成主要工作了,再此后的內容你是繼續用觸點模版還是設計交互原型都是可以的,至少目標是明確的。相信寫到這里,觸點模版的應用與功效你已經一目了然了。


          觸點模版小結

          觸點模版的板塊跟信息維度較多,但是考慮到觸點或項目的實際情況,模板內的信息填充不用完整。并且它的確可以很好的將體驗設計的思路整理出來并形成材料分享,對于多個觸點只需要根據體驗地圖上的順序打上編號后,即可將多個觸點模版的關系連接起來,你可以將打印填充后的模版依次排列或張貼在白板上的體驗地圖上。


          觸點模版就像是一份交互自檢表,它從多個維度去考慮和解釋了觸點體驗的設計,盡管沒有勾畫出詳細的設計細節,但是體驗設計思路與執行團隊的任務已經很明確了。


          另外完成觸點模版時,并非是要按照模版里的板塊順序作業,比如有時候我們是根據體驗結果考慮運用哪些體驗場景,如果有固定的場景,那么你就可以根據場景情況開始考慮,一般更傾向于先設定體驗結果進行倒推。再就前面啰嗦過的,我們根據項目情況完善需要的模塊即可。


          服務藍圖介紹

          更完整的服務流程可視化工具,可以結合用戶體驗地圖對服務流程進行優化或調整,相比傳統的業務流程圖,它在用戶角色關系與前后端分離上有明顯優勢。是一種服務可視化的工具,利于讓產品保持精益(識別價值點、優化流程)

          多角色的引入,雖然使得藍圖更加復雜,但是能夠反映出更多角色的交互與流程關系。

          服務藍圖的因素:

          服務藍圖的構建元素:


          結語

          客觀來講,這些體驗地圖時常保持爭議,特別是逐步大范圍在業內曝光后,形式化、假把式、濫用等標簽也愈發明顯吶,這些體驗洞察工具并不總是能夠在項目中發揮預期作用,它們也需要區分使用場景跟項目需求情況,如果你沒有嘗試過,可以積極引用,當你熟悉應用后你會發現收獲更多的是一種體驗設計的思維,一旦需求或痛點擺到面前時不再像一只無頭蒼蠅。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:泡泡bing

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

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

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

          “留量”時代,做設計需要運營思維

          ui設計分享達人

          寫在前面


          今年的“雙十一”,朋友圈異常安靜,沒有了以前電商活動的氛圍,沒有漂亮的數據,沒有曬圖,有人說是用戶消費疲軟了?數據不會騙人,今年”雙十一”一天的GMV還是比去年高了將近500億,而且一大波尾款人在11月1日就已經結束。再加上直播電商,用戶購買渠道變多了。李佳琦直播帶貨一晚就超100億的GMV,說明用戶的消費意愿和消費力還是很強的。算一下,50個李佳琦直播一晚上就能抵上“雙十一”一整天的GMV,有點厲害。中國偉大復興的道路還在繼續,隨著人民生活水平的提高,文化素養提高,互聯網普及,消費力只會增不會減,只是戰場在變化。


          前些日子發了PP微助手的優化作品,本篇將結合改版思路和最近對互聯網設計行業的思考進行一些分享,希望對大家有一定的幫助,歡迎大家來指正吐槽~


          點擊可以查看   PP微助手改版優化







          流量變“留量”




          互聯網產品最重要的就是流量,沒有流量,就算產品設計的再好,早晚也會運營不下去??v觀這些年移動互聯網的發展,市場已經被分割的差不多了,各個行業都有龍頭企業(社交:微信、購物:京東淘寶、出行:滴滴哈羅、外賣:餓了么美團、旅游:攜程等等),各大互聯網公司業務也趨于穩定,紅利期已經過去,流量市場已經變成了“留量”市場。就像淘寶這種大流量的產品,也在吃流量老本。




          回歸到設計,在互聯網公司做設計,一直在強調需要有產品思維、用戶思維,然而在“留量”的時代,更需要我們具有運營思維,同行業的業務趨同、需求趨同,可挖掘的需求少之又少,可以打開同一行業的各類app一看,就知道產品形態大同小異。所以只能在“留量”里下功夫,既要減少存量用戶的流失,還要在這基礎上讓存量用戶創造更大的價值。必然,我們在做設計改版的時候就需要結合一些運營知識。






          曝光



          “曝光”一詞相信大家都聽過,在拍照時,“曝光”時間越長,照片細節就越豐富,當然過度“曝光”,也會讓照片失真。在運營一個互聯網產品時,也需要用到“曝光”,這里的“曝光”是指產品內容的“曝光”。


          用戶在進入某款產品的時候,都是帶有一定目的性,通常情況都會經歷三步操作,從看見內容,到與產品互動,最后得到想要的結果。




          這里的“看見”,就要說到產品承載信息的曝光,合理的信息曝光才能更精準快速的觸達用戶。同時,運營同學最關心的數據和流量,也是需要安排合理的信息曝光才能有有效的數據和流量。在手機這么一小塊屏幕想把所有內容都曝光出來,是不太現實的,就算能,也不合理。把過多的信息一下子全部曝光給用戶,效果反而會很差。通常做法就是對頁面進行樓層的分割,流量進行合理的分發。大流量的產品,每個樓層都需要單獨部門去運營的,這樣就會出現業務主次和優先級,不然各部門就會為了爭奪"屏幕地盤",無限撕逼。




          作為設計師,就需要和運營部門做好以下確認:


          1、樓層怎么分割,哪些樓層是產品部門控制,哪些樓層是運營部門控制,每個樓層顯示哪些內容,設計師需要根據每個樓層的重要性,去定義屏占比


          2、哪些模塊需要首屏曝光,哪些是需要第二屏曝光,依此類推,這個至關重要,設計師就要考慮各類機型適配問題,比如iPhoneX一屏能顯示下的內容,在其他手機未必能顯出來,這樣會直接影響曝光,導致數據不好(等著背鍋吧~),嚴格來講要根據實際用戶使用機型占比去定義首屏顯示的內容。


          3、每個模塊內容的信息層級,明確信息優先級才能結果為導向去做交互布局和視覺呈現,這時候就是你發揮的時候,對比、親密關系、留白等等,都可以上了。






          這里結合PP微助手的一些改版優化(非全套),分享一些改版思路。


          PP微助手改版思路解析


          項目背景:PP微助手是取代電視遙控器一部分功能開發的一款小程序,核心需求有幾點


          1、賬號統一,PPTV時代的用戶,大多都是使用的PPTV的賬號,為了方便管理蘇寧易購賬號體系,會引流把PPTV尚未升級的賬戶統一升級合并至蘇寧易購賬號。

          2、投屏功能,看影片終端還是以電視機為主,所以只做投屏,不做在線播放功能

          3、智能語音,結合蘇寧小biu智能語音系統,可以和電視機語音互動,實現交互功能

          4、會員業務,移動端開通會員比電視端更方便,同時可以用一些運營手段促進用戶開通會員

          5、推送活動,電視機打開頻次不如移動端,推送活動給用戶,移動端可以實時看到



          電商行業通常會把用戶分成“大明”、“笨笨”、“小閑”三大類用戶,在視頻類產品,絕大多數用戶都是“小閑”用戶,來平臺都是找樂子打發時間的。




          思路一:架構改變(產品思維):


          PP微助手本來就是輔助電視機的,用戶覺得用遙控器操作麻煩才會選擇用小程序操作。在設計的時候,把用戶當成是一個并不想動腦子并且很懶的傻子,產品設計越簡單越好,否則用戶干嘛要用小程序,遙控器挺好的,遙控器的大多交互都已經習慣,也沒啥學習成本。






          從用戶角度分析,進入小程序無非就是找片源、看片以及看片過程中的一些基礎控制操作(播放、暫停、快進等等),所以簡化了產品整體框架,從原來底部5個tab(首頁、片庫、遙控、搜索、我的),改為3個tab(首頁、遙控、我的)。產品呈現給用戶的樣貌更加簡單直觀,也相應的培養了用戶心智,讓用戶對PP微助手這款小程序有個基本定位。





          思路二:樓層分割(運營思維):


          首頁改版前,按照iPhoneX的尺寸,首頁第一屏也就曝光了3個分類,而且下滑到底總共也就幾個分類,片源的曝光度不高,banner呈現也相對普通,就是那種正常電商類頭部banner。同時交互成本也高,要點擊“更多”才能看該分類影片的全部列表,要知道多一步操作就會多損失一部分用戶轉化。


          改版后,針對第一樓層推薦影片采用電影宣傳時的大海報樣式,視覺焦點更強烈,同時曝光也更強烈一些,你去電影院的時候,看到的電影宣傳海報,大多都是這類豎版的,用戶已經有一定的心智模型,所以在這里采用豎版更為好一些。這些推薦影片在這里也作為“hook”,后面會講。當然像電商類產品,首頁需要考慮嚴謹的屏占比,這類尺寸肯定不合適。


          第二樓層是影片的分類,采用文字tab左右滑動的方式,這種分類方式雖然沒啥設計感,也普普通通,但是在一個分類眾多的產品里,這種處理方法相當不錯。減小了樓層的沖突,也提高了內容的曝光。像騰訊視頻、愛奇藝、優酷,分類tab都是吸頂固定的,很直觀的傳達給用戶影片信息。下拉的時候,這里采用feed流,用戶在交互習慣上,連續操作時,對同一種交互會有慣性和依賴,上滑時查看更多影片,能滿足用戶的預期,也不會因為調整新的交互(上述的點擊跳轉查看更多)方式讓用戶反感。在視覺形式上,采用了橫版的樣式,是為了和第一樓層形成對比,也是為了節省屏幕空間,能曝光更多的內容。二樓的影片內容也可以分布一些“hook”



          搜索也是一種用戶找片源的方式,后面再講,這里要考慮到流量分發的情況。





          思路三:引導用戶(運維思維)


          按照福格模型B=MAT,完成行為的三要素:動機、能力和觸發器。



          用戶進了影片詳情,說明已經有動機了,這時候需要抓住機會,按照產品需求可以完成兩個行為目的,一個是讓PPTV賬號升級成蘇寧易購賬號,二是轉化成會員用戶。


          這里要看一下進入詳情的數據,是“hook”進來的用戶多還是非“hook”進來的用戶多。如果是“hook”進來的多,說明用戶主觀意愿不是很強,這部分用戶可能會流失,如果是非“hook”或者搜索進來的更多,說明平臺用戶主觀意愿更強,有較高的粘性,更容易促進會員的轉化。



          對平臺來說,希望用戶進來完成兩條路徑:


          1、未登錄的用戶,點“推送”和“開通會員”按鈕,進入下一步登錄或者升級賬號流程。當然這一步會流失用戶,部分用戶會反感登錄這種操作。


          2、已登錄的用戶,可以快速推送影片,完成自己的看片目的,如果是會員影片,這里就需要用戶先開通會員,當然只是引導,還會有一部分用戶不想開通會員,選擇離開。





          防止用戶過多的流失,就需要平臺一定的干涉,加強登錄或者開通會員的意愿,可以從以下幾點入手:


          1、沉浸式體驗,進入詳情,頭部區域自動播放影片花絮或者預告,快速讓抓取用戶眼球,增加下一步操作的意愿。

          2、醒目的豆瓣評分,“hook”影片選擇一些評分高的,用戶針對豆瓣評分已經有一定的認知,評分優質的影片,用戶更有意愿觀看,更容易促進下一步動作,提高會員的轉化率。

          3、各類標簽,比如:首播、獨家、會員免費、會員半價、4K高清等等,能清晰定位影片,捕捉各類用戶看片心智。

          4、會員相關信息展示,未登錄的提示“登錄領券、限時活動等”,非會員提示“會員權益、開通會員的利益點等”刺激用戶。



          思路四:優惠券吸引用戶(運維思維)


          改版前優惠券和體驗券在不同入口,流量分散了,券的目的就是要讓用戶去使用,需要縮短路徑,更直觀的展示給用戶,能讓用戶快速做決策。如果券種類多的話,還需要區分各種券樣式,需要讓用戶快速定位想使用的券。

          其中已使用和已過期的券對用戶來說就是已經沒用的券,并不需要再用單獨的tab分類,并且弱化處理。因為PP微助手會員券相對比較少,不像電商一樣,會送很多商品券,所以用最簡單的形式展示給用戶就行。


          值得注意的一點,不是說已過期的券就沒用了,如果運營把控好節奏,發券有一定規律,用戶看到過期的券會有一定的挫敗感,就會經常來關注券?!皬U券再利用”也能增加用戶的粘性。針對快過期的券,必要時候可以做二次提醒,給用戶造成緊張感,會激發用券欲望。


          說服用戶下決定,一般從以下三個點去考慮:時間緊迫性、暗示稀缺性、后果恐嚇性







          流量分發和流量承接



          產品的流量來源有很多,除了自身用戶進入產品的流量,還有線下廣告、線上廣告、分享鏈接等等各種來源。目前主要的流量分發方式包括:搜索分發、算法分發、社交分發、人工分發、付費分發。PP微助手主要應用算法分發、搜索分發、人工分發。




          先講一下“hook”,在電商里是“鉤子商品”,這里我把“hook”當做是“鉤子影片”,運營精準推薦的一些“hook”,會取到不錯的轉化效果。



          用戶在產品內的行為路徑是不可控的,一大波流量進入首頁,每個用戶都有自己的目的,所以需要對用戶進行分流。一部分用戶去了搜索,這類用戶目的很明顯,知道自己想看的影片名稱,這部分就是搜索分發的流量;一部分用戶被“hook”勾走了,"hook"激發了用戶的看片動機,這部分就是人工分發的流量,需要運營去干預;一部分用戶在不停的瀏覽,在瀏覽過程中找自己的影片,產品會分析用戶行為,顯示千人千面的首頁,這部分就是算法分發的流量。


          有流量分發,那必然就有流量承接,流量承接都是相對流量分發的,在電商產品里,站內的流量承接一般都在商詳,以及對應的后置鏈路(訂單確認、結算等等),從各渠道進來的流量,最終匯總在商詳。在商詳,會突出各種利益點和產品自身優勢去刺激用戶下單。至于利益點,活動時候的各種優惠信息就是典型例子,產品自身優勢,比如:淘寶的先享后付、京東有京東物流次日達等等。在PP微助手這里流量承接就是影片詳情以及后置鏈路會員套餐頁,具體可以看上面的“思路三”的分析,怎么去承接流量,怎么去促進轉化。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:胖冷不冷

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

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

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


          用戶體驗設計-基本概念,與藝術的區別,工作中的職責,職位上的分類

          ui設計分享達人

          一、設計和藝術的區別

          藝術:

          藝術是感性、天馬行空、富有創造力的,表達創造者的個人意識

          設計:

          設計是理性、精密的,為了解決用戶的問題

                

          (你看得懂嗎?你有什么見解?為什么大家見解不一樣?這就是藝術的魅力)


          二、用戶體驗及用戶體驗設計

          什么是用戶體驗?——————使用一個產品時的主觀感受

          用戶體驗設計?———————為了提升用戶體驗而做的設計

           

          1.用戶體驗設計

          首先要解決用戶的某個實際問題--讓問題變得容易解決--最后給用戶留下深刻的印象。(視覺只是其中一部分,并不是設計的全部)


          Eg:充電插座的苦惱--錯開位置

          尿液四濺--廁所里放一只蒼蠅,用戶會去瞄準上廁所(設計美觀且有趣味性)

           

          2、用戶體驗設計的特征

          (1)嚴謹、理性、創意

          先關注要解決的問題----其次思考有趣的創意幫助用戶得到更好的體驗。

          (2)提供特定問題的解決方案

          設計目標是什么,為什么人解決問題,如何解決

           

          Eg:鋼鐵俠u盤死死按住關機鍵;樓梯是為殘疾人設計的嗎,我懵了?


          (3)不讓用戶思考

          用戶感到挫敗,會放棄。你的設計不要用戶一頭霧水。

          (我到底怎么走?)


          (4)趣味橫生

          尿液四濺貼提示語效果不好,放一只蒼蠅效果很好?

          因為:抓住了用戶的心理和行為習慣,同時充滿趣味,吸引用戶

           

          Eg:path推出的商店功能,在里面買自己喜歡的貼紙,搖晃手機貼紙也搖晃,感覺很好玩吧~帶來好的體驗感

           


          3.用戶體驗設計師遇到問題如何思考




          三、各種設計師的區分

          1.怎么和別人解釋用戶體驗設計師

          A:“你用一個網站的時候,有沒有出現:某個功能找不到了,點擊按鈕沒有反應,填寫的信息不知道哪里錯了總是不能提交成功?”

          B:我們的工作就是改善這種情況,讓你使用網站時有一個好的體驗,同時能讓用戶感到愉悅和不受打擾。

          工作中:除了考慮用戶還要讓公司有利可圖


          2.交互設計師

          通過分析用戶心理模型、設計任務流程、運用交互知識把業務邏輯(需求/功能)以用戶能理解的方式表達給用戶,最終實現產品戰略(公司需求和用戶需求的平衡點)的過程。

          即:從公司戰略角度考慮問題,在公司需求的基礎上讓用戶覺得好用、易用

           

          交互設計師的產出物:不是原型,你不是畫圖的工具,重要的是解決問題的能力

          工作內容:競品分析文檔、用戶反饋整理、流程圖、設計草圖、原型...

           

          3.視覺設計師

          原畫:設計者很強的手繪能力,作品充滿藝術表現力

          平面:傳達思想,較強的感染力

          推廣運營設計師:突出重點抓眼球

          UI:良好的審美、具備一定的交互知識

                                (原畫)                              (平面)                                              (推廣運營)

          4.用戶研究員

          通過各種分析和研究,深入了解用戶特征,用戶行為習慣,為產品運營推廣提供必要的方向

          工作內容:市場分析、競品分析、創建人物角色、問卷調查、焦點小組、用戶訪談、可用性測試

           


          四、用戶體驗設計師的作用和價值

          1、用戶價值商業價值

          用戶通過優秀的設計快速達到目標,企業也會財源滾滾

          eg:改變一個按鈕的顏色,點擊率提高35%;優化操作流程,轉化率提高50%...


          2、項目價值

          跟進各個環節,保證產出物質量

          推進統一及標準化,提升設計效率

          促使項目流程合理,有規劃

           


          五、交互設計師的作用和價值

          1.工作內容

          分析重塑需求;與用研配合,了解用戶特征與行為;設計結構、流程、界面、動態效果;跟進視覺、前端、開發;及時整理上線問題,準備下次迭代...


          2.品牌價值

          維護和突出品牌形象,統一的設計理念

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加:ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:一團雯子

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

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

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


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

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