前言

影響APP轉化率的因素有很多，設計也是其中重要組成部分，那設計師需要如何應對，才能助力用戶轉化呢？從用戶角度來看，助力轉化就是掃清理解障礙，提升瀏覽意愿與順暢度。

想要以設計語言達成以上目的，快速傳達有效信息是十分重要的一環，接下來，我們結合案例，聊聊快速傳達重要信息是如何通過節省用戶時間來助力轉化的。

01.為什么要快速傳達

研究表明，人類在面對非自身興趣的事物時，注意力只能高度集中 10 分鐘左右，短暫休息后再次集中注意力的時間則為7-10 分鐘[1]。

當用戶使用服務類APP的時間超過這個閾值后，就會因為遲遲沒有達到目的而產生焦躁情緒，隨之而來的負面影響要么是跳出到其他APP，亦或者對軟件產生厭煩感，而無論哪一種都不是我們想要看到的結果。這也就意味著，我們每次只有20分鐘的時間讓用戶完成從篩選到下單的時間。

因此，在用戶有限的時間與精力中，迅速的傳達有效信息，不僅可以縮短用戶從挑選到下單的流程，站在用戶角度來說，因為可以快速的找到自己想要的信息，也可以讓用戶切實的感覺到這是“好用”的軟件。

因此我們需要快速傳達的理論依據就此成立：

02.如何快速傳達

那么如何快速傳達有效信息呢？方法有很多，今天我們重點闡述以下三個技巧：

接下來我們結合實際案例看看如何運用以上手段以達到快速傳達的目的。

 · 塑造視覺焦點

什么是視覺焦點呢？就是畫面中讓我們能多停留幾秒的視覺元素，可以是一個點，一條線，一個面，通俗來講，就是頁面中最引人注意的地方，視線上交匯集中的地方，這個位置就叫做視覺焦點，而焦點可以通過構圖，色彩運用，比例等手段進行塑造。

接下來我們結合十一活動的實際案例說說如何進行焦點塑造，我們需要先構建合理的視覺層次結構，好的層級能使觀者快速瀏覽信息，位于層級頂層的信息也可以在最短的時間內讓人注意到。

根據人眼對畫面的閱讀習慣，位于頂部和正中這兩個位置的信息會最先被注意到，我們應優先將重要信息放在此處，符合了閱讀習慣之后，通過運用色彩對比，字號大小等差異化手段，可以將信息的層級提高。

大字號更容易讓人一眼看到信息，因此就算是同處高層級的信息，通過內部字號大小的對比，可以進一步細分層級，讓視覺焦點更加具體

飽和度與對比色的運用同樣重要，我們將彩色的圖片去掉顏色之后可以發現，色彩關系對畫面層次的影響，通過對灰度，明暗和色相的使用，可以使焦點位信息產生視覺前推感。

視覺焦點在具體案例中的應用展示：

58到家活動

小結：通過構建畫面層級之后，運用字號大小和顏色對比等手段做出差異化設計，可以快速將用戶注意力吸引至焦點區域，并被引導著跳過次要區域，視線按從上到下，從左到右的順序，在各個焦點位中跳躍，從而達成我們優先傳遞重要信息的目的。

· 前置思考過程

我們平時在想要達成某種目的時，需要先獲取大量信息，在腦內羅列整理，然后歸納出有用信息后，再進行處理。

用戶在使用APP時也是這樣，比如想點餐時，要挑餐廳，挑口味，挑菜品，而這一系列的信息整理過程是十分繁瑣又消耗耐性的，正因此，我們才經常面臨：不知道吃啥啊 這樣的難題。

而這個思考過程是可以通過設計語言來簡化，甚至提前完成的。通過將頁面中的信息分類后，將同類信息放置在不同組塊中的相同位置，使用相同的顏色和格式，會幫助用戶形成閱讀慣性。

 結合十一活動案例來看，每個組件中都會包含有幾類基本信息：產品名，利益點，和下單跳轉按鈕，每個組件中的信息都在固定的區域展示.

同時用高飽和度的紅色來強調，在這樣的固定排列中，用戶想要取得什么樣的信息時，可以第一時間去固定的位置尋找，大大提高了信息獲取的效率。

前置思考在具體案例中的應用展示：

小結：通過將畫面中的信息整理并歸類，我們可以縮短用戶的信息獲取與腦內整理歸納的時間，讓用戶將有限的時間更多的放在優惠對比與決策中去，這不但有助于提高下單率，易讀的版式也更容易讓用戶產生“好用”的感覺。

· 米勒定律[2]

我們先來看以下兩段數字

是不是后一段更容易記憶，這涉及到一個叫“組塊”的概念，人腦記憶一組信息的時候，這組信息內的元素數量小于7±2時最容易記憶，具體數量因人而異，老年人的記憶數量會顯著降低。

因此一長串數字看起來毫無規律難以記憶，而3個數字一組分成多個組塊后，則容易記憶很多，同一組塊內的信息越少，越容易讓用戶記憶深刻。

這個定律對設計畫面同樣有著重要的影響，一個板塊中如果包含了過多的組塊，不僅會讓用戶對這個板塊的內容難以記憶，也會因為信息過多且沒有主次而大大增加篩選成本，用戶將時間過多的花費在篩選上會延長下單之前的流程，也會提高下單之前的跳出率。

結合我們的頁面設計來看，每一區域內的組塊分布都不超過5個，同時組塊內的信息類別也只有圖片、產品名、簡要介紹與下游鏈接4部分組成，通過做減法，讓重要信息可以迅速被提取，更容易被記憶。無論對于新老用戶來說，都可以有效的降低篩選成本，新用戶能更容易理解板塊功能，老用戶則更容易記住自己想找的功能在什么區域。

米勒定律在具體案例中的應用展示：

58到家電商首頁展示

 小結：通過簡化板塊中的信息類別，能有效縮短新老用戶尋找服務的時間，同時老用戶也更容易記住想要的板塊在什么位置，下次再使用的時候，迅速觸達。

03.寫在最后

作為設計師，兼顧商業化與用戶體驗是我們的必修課，好的設計不僅僅是要“好看”，更需要兼備用戶與產品兩方面的功能性，將視覺語言與心理學、行為學的結合運用，既可以有效的提升用戶體驗，提高粘性，又能縮短下單前的必要流程，提高轉化率。

注釋：

[1]出自《教書育人》2016年1期38頁，【運用心理學規律提高課堂學習效率】章節 

[2]米勒(Miller，1956)的分析，人腦處理信息有一個魔法數字7(正負2)的限制，也就是說，人的大腦最多同時處理5到9個信息(chunks)。原因是短期記憶儲存空間的限制，超過9個信息團，將會使得大腦出現錯誤的概率大大提高。

原文地址：58UXD （公眾號）

作者：環鐵藝術家

轉載請注明：學UI網》三個小技巧，輕松提高設計轉化率

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

特別有仙氣的名稱和顏色，長春花藍是一個全新創作的顏色，代表著一種自在的信心和大膽的好奇心，期望激發個人的創意與創作力，擁抱充滿可能性的未來。

當很多網友在討論這到底是藍色還是紫色時，潘通表示它是藍色和紫紅色的混合，將前者的「恒久」與后者的「活力和興奮」結合在一起，并展示了多種配色組合方式。

其實這種分不清具體色系的顏色也出現在2001年潘通為Tiffany打造的獨有品牌色Tiffany藍，同時也成就了這個品牌。

很多女生買Tiffany大多為了這個顏色的包裝。這個品牌色在潘通色庫中是找不到的，除非是Tiffany授權，否則任何印刷廠都無法印制。

潘通就像統治了色彩世界一樣，只要跟潘通合作過的品牌色都會火，比如星巴克、可口可樂、騰訊企業官方色、華為P10的手機、歐拉汽車的粉色、五菱mini的馬卡龍色等等。

到底潘通為什么會這么火，而潘通到底是家什么公司，我們今天就來科普下。

潘通介紹

Pantone的前身是一家印刷品公司，創始人勞倫斯·赫伯特（Lawrence Herbert）原本是在一個小的廣告印刷公司做兼職。

同時擁有生物、化學雙學位的他利用自己的專業知識簡化了油墨生產流程，并且幫助公司的印刷部門實現盈利。

后來一想，印刷部門盈利都是靠我，不如就自己單干，于是花費9W美元把這個印刷部門也買了下來，并命名為潘通（Pantone）。

但在銷售自己生產的顏色時，他經常發現會與客戶需求顏色信息不對稱的問題，比如客戶需要一個湛藍色，而油墨廠可能無法調制出與客戶需求一樣的顏色，就會導致在很多色彩上認定的誤差。

他意識到解決辦法就是建立統一的色彩系統，每一種顏色都用數字代號來表示，比如設計師與印刷廠說，我要印制一個例如007顏色，而印刷廠只要拿著色卡找到與型號相符的油墨進行配置，就可以得到目的顏色，這樣會極大的降低顏色的試錯率，對印刷廠也可以減少庫存，縮減成本。

在1963年，第一代潘通（Pantone）配色系統

（簡稱PMS）上市

接下來的20年，潘通逐步建立起了一整套色彩標準體系，使原本模糊不清的顏色概念發展成一門精準的科學，減少了設計師、制造方、零售商和終端客戶間的溝通成本。

因為便捷的色彩系統使用，應用人群也越來越廣，這一套配色系統為潘通賺的盆滿缽滿，潘通也逐漸被市場認定為色彩標準的代表，就像國際通用貨幣一樣的主導地位。

可赫伯特的野心不僅僅是這樣，潘通建議所有的色卡用戶每年都購買最新版本，理由是印刷的油墨會隨著時間的推移而變黃，從而失去精準度。

呃，雖然有點道理，但一看這色卡的價錢（割韭菜還是你狠），于是“賣色卡”成了一個持續帶來現金的業務。

但是大眾也不傻，心想只要買一本色卡回去就能用好多年，于是潘通利用色卡所能涉及到的平面設計、家居裝潢、服裝紡織、工業產品的龐大人群便滲透到大眾。

在千禧年開始發布了第一個年度代表色，將天藍色命名為千禧藍（Pantone 15-4020）。

并且植入到了《穿普拉達的女王》電影中，成為了潘通里程碑的時刻，這一招是真絕，因為電影與時尚行業是最能傳播到大眾市場的，加上各大品牌與潘通合作的專屬色大火。

從這一刻開始，潘通成為了全球色彩趨勢的老大，之后的潘通每年都會推出一個新的年度代表色，每個代表色都有單獨的色卡。

利用每年的色彩流行趨勢影響著眾多產業的產品開發與采購決定，包括服裝、家飾紡織品和工業設計，以及產品、包裝和平面設計。

而作為商家想跟時尚潮流就必須使用每一年的色卡，比如今年的長春花藍，潘通的色彩帝國已經在影響著全球的消費心理和時尚變革。

最后來看看長春花籃的色彩

不得不說這顏色確實挺好看的

原文地址：修先森撩設計（公眾號）

作者：修先森

轉載請注明：學UI網》潘通（Pantone）是如何靠“色”賺錢的

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

 01.  

動效，讓點贊與眾不同 

動態表情為社交場景帶來更活躍的體驗，使得交流過程變得更加趣味性。一個動態的表情不僅活躍了氛圍，也使得通過簡單的一個符號代表了千言萬語。

最近在使用釘釘 APP 進行聊天的過程中，發現輸入框的大拇指圖標在長按的時候結合了動效的變化，對話場景中出現的大拇指表情會隨著長按而增大。結合動效和長按手勢，為點贊的圖標增加了不一樣的趣味性，帶給用戶不一樣的社交體驗。

02.  

動態提醒，增強消息的關注度 

各類通知/消息在產品中隨處可見，紅點提示剛出現的時候還引起了用戶強迫癥，短時間內也增強了消息的閱讀率。隨著紅點效應逐漸淡化，未讀消息的點擊率逐漸降低，大家都在嘗試更多提高關注度的形式。

支付寶在消息模塊的服務提醒中，采用了動態形式提高關注度。當用戶點擊消息進入界面時，小鈴鐺圖標會左右晃動，以此來吸引用戶的目光，達到增加關注度的目的。

 03.  

圖標動效，讓你脫穎而出 

在金剛區眾多的業務模塊中，想要突出重點模塊的關注度，采用動態圖標是比較常用的方式。采用動靜結合的形式，會讓動態表達得到突出。

比如 Keep App 將活動挑戰圖標動效化，在不改變配色規則和圖標設計規范前提下，依然可以達到突出主題的作用。

 04.  

博人眼球的動態懸浮廣告 

在不破壞產品結構的前提下，融入廣告的做法中，懸浮層廣告是較為明顯的形式。通常是靜態異形和動態異形較多，而動態的關注度相對更強一些。

比如 Keep App 將活動的折扣信息以懸浮層的形式表達，既不會占用太多空間（隨著滑動會隱藏顯示），又能吸引用戶的關注度。如果用戶覺得影響操作，也可以直接關閉，就不會反復提醒而形成干擾。

 05.  

內容模塊結合動效替換突出存在感 

在一些內容量比較多的產品中，比如電商產品，很多內容模塊都是百花齊放。都想要突出自己模塊的存在感，帶來更好的流量引入。而動效的結合也是不錯的選擇，但是需要考慮動效的干擾度。

當當 App 在突出今日搶購欄目時，為了不影響臨近板塊的干擾度，利用動效轉場來替換展示的商品信息?？s放替換商品時的動效既能達到差異化，也不會破壞整體的結構，算是一舉兩得的設計解決方案。

 06.  

微弱的動效也能呈現有溫度的設計 

有時候在進行產品設計的時候，動效帶來的關注度并不是需要很強的表現力，一些微弱的動效依然可以提升產品體驗，帶給用戶更有溫度的設計。

自如 App 整體的設計都是做得非常不錯的，在“我的”板塊頭部區域，結合背景插畫視覺感也是非常不錯。插畫中部分元素的微動效增強了生活氣息和真實感，讓用戶感受到這是一款有溫度的產品，提升用戶的好感度。

 07.  

動態感十足的底部標簽欄 

圖標動效運用到底部標簽欄十分普遍，在這個頻繁切換的操作中，動態的形式可以帶來更強的趣味性和關注度。

優酷 App 底部標簽欄采用多種顏色變化轉場，結合路徑動效帶來動感十足的體驗。首頁圖標還結合了刷新的功能，方便用戶進行內容的刷新，增強用戶體驗感。

 08. 

 拓展功能的動態指引設計 

針對一些功能體量較大的產品，會經常結合一些隱藏式設計，拓展出更多功能操作。通常默認為展開狀態，在滑動瀏覽內容時隱藏，通過動效吸引點擊展開，不會造成主內容的干擾。

比如平安口袋銀行底部標簽欄上方的拓展功能區，動態形式的展開與隱藏方便用戶瀏覽主頁內容。個別內容采用動態設計（點我抽獎），突出其點擊欲望。動態設計不僅提高了功能的曝光度，也能引導用戶操作，將繁瑣的操作變得更便利。

 09. 

 結合動態 IP 的下拉刷新 

針對下拉刷新這一常規操作，設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作，被很多產品設計師所采納。

美團外賣就將品牌 IP 形象結合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。

 10. 

 圖標動效帶動局部功能的關注度 

對于一些局部功能或者模塊占比較小的欄目，為了提高曝光度，獲得用戶的關注度，動態的形式是比較常用的方法。通常會在圖標部分、文字部分、裝飾元素部分等進行動效設計，帶來的效果也是顯而易見。

比如 QQ 音樂在“我的”模塊中，將活動中心、會員中心、每日簽到的圖標采用動態設計形式，雖然幾個模塊占比較小，但是依然能夠獲得用戶的關注度。

 小結 

動效表達在產品設計中的應用越發普及，不僅可以強化功能的關注度，也能帶給用戶感官體驗上的升級。優秀案例的積累和分析，有助于我們掌握更多的表現形式，靈活的運用到項目設計中。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》發現了10個非常棒的UI動效案例

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

01. Behance

https://www.behance.net/

Behance 對于設計師來說并不陌生，作為國外的一大設計平臺匯聚了眾多的設計大佬，分享了很多高質量的設計作品。

對于 UI 設計師來說，這是我們需要定期訪問的網站，里面很多 UI/UX 設計相關的作品都偏向于成套的作品輸出。不僅可以讓我們學習全案設計的思路，作品包裝設計的思路和處理技巧也是非常值得學習的。除了 UI/UX 作品以外，還包括平面、圖形、品牌、插畫、攝影、動畫等等作品，并且質量都非常高。

成為優秀的設計師離不開靈感的積累，這個網站絕對是高質量靈感來源之一。

02. Dribbble

https://dribbble.com/

Dribbble 相信很多喜歡 UI 設計打卡的同學比較熟悉，匯集了大量設計師的一些日常創意作品。該網站不同之處是發布作品需要邀請碼，就是需要有邀請碼的設計師邀請加入才能發布作品，獲得邀請碼也相當于設計能力獲得認可。

整體作品的質量還是不錯的，如果當你設計時沒有想法，這是一個不錯的靈感采集地。

03. Pinterest

https://www.pinterest.com/

這絕對是一個靈感采集的絕佳網站，經過眾多用戶的長期積累，已經匯集了全球大量的優質圖片資源，其中設計作品也是非常豐富，且質量都普遍偏高。

你可以通過關鍵詞搜索、畫板關注、以圖搜圖等操作獲得靈感，而且相似推薦還能延伸出更多類似構圖、配色、主題等圖片資源。點擊作品還能跳轉到原始出處，順藤摸瓜找到更多優質資源，真的是非常便利。

04. Mobbin

https://mobbin.design/

這是一個匯集全球優秀 APP 截圖的網站，有超過 50000 個優秀 APP，節省了下載應用的時間，對于 UI 設計師來說非常實用。

同樣的應用還提供了 iOS 和 Android 兩個不同版本的截圖，簡直非常的人性化。這是一個使用起來非常簡單的網站，海量的設計必將開啟你的靈感腦洞。

05. Medium

https://medium.com/

這是國外的一個分享專業文章的網站，各行業的大佬們會在這里分享自己的經驗和心得，帶給新人很大的幫助。作為設計師來說，一些設計技巧和經驗的學習也是至關重要的，這里也匯集了很多優質的設計類文章，相信可以帶給你更多幫助。

學習吸收國外設計師的想法也是一種擴充視野的方式，這個網站是一個知識吸收層面來說不錯的選擇之一。

06. Unsplash

https://unsplash.com/

這是個人非常喜歡的一個圖庫網站，在做一些設計作品的時候，我經常去里面搜索符合的圖片填充我的設計。這個圖庫網站的圖片都是可以免費商用的，而且你無需注冊也可以下載使用里面的圖片，是不是非常的人性化。

網站提供了很多的圖庫資源，在搜索的時候采用英文搜索資源會更豐富一些。

07. Zhongguose 中國色

http://zhongguose.com/

你知道茶花紅是什么顏色嗎?莧菜紅你可能名字都不一定聽過，中國有很多傳統復古的顏?，這個?站相信會給你想要的答案。

當我們在做一些傳統文化項目或者需要用到國風味道的配色時， Zhongguose 這個網站列舉了很多中國色，提供給設計師進行配色參考。

08. Designspiration

https://www.designspiration.com/

該網站除了通過關鍵詞搜索圖片內容以外，在搜索欄有?個調色板的圖標，點擊可以通過指定的顏色進行搜索相關配色的圖片或者設計。在選擇顏色的時候不是單一的色彩選擇，可以選擇幾個配?組合進行搜索，對于設計師來說?常實用。

09. Adobe Color

https://color.adobe.com/zh/create

該網站是 Adobe 公司開發的，主要功能就在于超級方便的色彩選取。它提供免費的?彩主題，我們可以在任何作品上使用它們。我們也可以選擇不同的調色規則，然后使用交互式色盤、亮度以及不同顏?模式的滑塊來建立顏?。

10. 51學設計-設計規范

http://51xsj.cn/index.php?s=/index/design/categorylist.html

最后給大家推薦一個黑馬哥自己的網站 – 51學設計網，本次主要推薦的是里面的設計規范欄目。為了方便各位 UI 設計師熟悉各大平臺的設計規范，專門為大家整理了常用的設計規范合集，讓大家更方便獲取相關的資源。

當然，還有黑馬家族平時推送的一些文章合集也收錄在里面了，還有設計書籍欄目也是不錯的選擇。

小結

靈感的積累來源于日常的不斷吸收和總結，今天分享的這些網站如果大家可以經常去逛一下，相信可以帶給你很多收獲。本期先給大家分享這 10 個網站作為拋磚引玉，希望可以帶給大家更多幫助。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》UI設計新人必須要善用這10個網站

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

Fiori

在SAP的 Fiori 設計系統當中，同樣它也進行過多次的改版：

從最初的 Fiori 1.0版本的Blue Crystal

再到 Fiori 2.0版本的 Concept Design

而Fiori 1.4 版本的 Belize

而除了視覺風格的改變，更多是交互形式的一點點優化，而優化并不等于顛覆，更多是想在原本的設計框架下去調整錯誤的交互形式，在一些細節點上去做創新。

感興趣的讀者可以復制下方鏈接去看看 Fiori 的一點點改變：

https://zhuanlan.zhihu.com/p/54476972

Lightning

在 SalesForce設計團隊的 一次 YouTube 直播分享過，講到一個問題：如果想要對當前的系統進行一次小范圍的迭代，所耗費的資金可能會達到數百萬美金。

因為當你進行了改版過后，企業需要通知用戶有哪些改版內容；而銷售則需要對大型企業進行培訓；作為產品設計者你需要引導用戶，提示他修改的點；

你上面所做的一切并不能覆蓋所有的用戶，就像我這篇文章雖然大家都會轉發，但是也不是所有的B端設計師都能看到（不過大家也一定要多多轉發）。

而很多用戶不知道，也就意味著他可能需要去翻閱幫助文檔、咨詢客服。

這一系列的付出都是需要成本，因為不能簡單站在一個設計師的角度去分析改版，更多需要你多去理解改版究竟會帶來什么，特別是產品成熟階段。

而SalesForce 的案例并不是勸退設計師改版，而是在改版之前需想清楚自己的真實需求，哪怕是視覺上的好看，也要確定你的設計與其他版本之間的差距究竟有多少，來驗證自己的設計。B端設計目前難點不在設計“好看”的頁面，而是如何講清楚你設計的頁面是合理的。

Element Plus

這里也和大家聊聊 Element，不知道有沒有細心的讀者發現Element最近正在更新 Element Plus。

而關于Element的版本迭代，則是因為技術的原因。

如果你對基本的技術框架有那么一點點的了解，你就會知道 Element 是基于 vue 進行搭建的，而最近的Vue 3.0 的出現，也就意味著 Element 需要進行一次全新的迭代。

這是 Element 的技術迭代大背景下，而他的迭代過程，就需要將之前element系統當中一些基礎內容給優化，調整來滿足現如今B端市場的設計需求。

最近也在與 忠忠 一起負責 Element 的設計系統優化改版，如果你有設計系統相關經驗，有充足的時間，可以微信咨詢我。

總結

其實B端設計，更多的是優化、迭代，想要顛覆，會付出很多代價，正因如此它和C端不同，也正因如此才叫做B端。

原文鏈接：CE青年（公眾號）

作者：CE青年

轉載請注明：學UI網》組件固化、布局確定，如何對B端頁面進行大的改版？- B端問答

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

B端用戶有哪些

不同于C端消費產品的用戶比較唯一，B端產品系統更為復雜所以用戶角色也更多。本篇將從商業銷售的角度來研究B端用戶。

用戶構成

B端產品的售賣大多針對一個組織/一家企業，往往存在著產品價格高、產品體量大、適用范圍廣的情況，所以商家決定購買的決策成本更高，按照組織層級從上向下、可以歸納出「決策者」、「運維者」、「使用者」 三個層級的角色。

• 使用者 —— 一般是企業內的內部員工，在日常工作時需要一些支持性軟件來更好地辦公。比如公司內的員工進行上下班打卡，這時他們對于考勤系統就是使用者。

• 運維者 —— 一般是企業管理內部的部門負責人或管理員，他們為企業提供支持性的服務，也是產品工具輔助完成工作的管理者。

• 決策者 —— 一般是一個企業的CEO/負責人，他們來決定是否需要支付一筆不小的費用購入一款軟件，來更好地管理企業。比如某公司的CEO最終決定買企業微信還是釘釘，讓員工進行內部溝通。

關于決策鏈

B端用戶的三個角色，通過相互影響形成了產品購買的「決策鏈」。

這個“決策鏈”的作用產生在「是否購買」、以及「是否續費」兩個核心問題上，通常我們簡稱為「新購」與「續購」。

在這里我還是重審下背景：出現的新購與續購概念，好像看起來已經脫離了本篇文章的主題，但這確實非常重要。對于B端產品，產研開發的核心目的還是將產品賣出，設計師作為產研的一員也需要背負這樣的任務。所以我們需要研究用戶，并且從商業的角度出發給出建議?；诖耍沦徟c續購的商業概念可以幫助大家更好的聚焦用戶場景與設計策略。

關于新購:

新購即指從未買過產品的商家、初次購買的過程。

對于新購，有的商家是自上而下決策：決策者主動有意愿有想法，從而購買產品。

這樣的方式在購買后對產品的推廣和使用更為容易，下面人員的配合度更高，產品取得的效果也就更好，更容易成為優秀的標桿案例。

有的商家是自下而上決策：從運維者主動有意愿有想法，并通過游說決策者、讓其理解當前企業存在的問題、通過什么樣的產品去解決，從而購買產品。

這樣的方式取決于決策者獲取到產品價值從而支持購入，如果沒獲取或不認同，則導致產品售賣失?。坏珱]獲取，卻因為其它因素（比如競品企業都在用了），可能會進行購買。但這樣的方式因為不能獲得決策者最大限度的支持，在推行起來會存在一些障礙和困難，因為B端產品往往牽扯組織內多個部門或人員，所以往往啟動較慢，產品效果也不能保證。

所以在這個階段決策者的態度與意見是非常重要的，運維者提供一定的建議，使用者通常沒有話語權。

關于續購:

續購即指已經購買過的商家，續約產品的過程。

決定續購的核心標準：產品是否有效果，翻譯到產研側就是產品是否被用起來了。

在這個問題上，因為決策者幾乎不會參與過程，所以更考驗運維者本身的使用策略，同時也非?？粗厥褂谜叩膶嶋H使用體驗。

在決策鏈上，核心角色的建議權，往往比決策權還重，是否被用起來以及用起來的效果是一個從下向上檢驗的結果。所以在這個階段，運維者和使用者的體驗非常重要。

對癥下藥:

在了解基礎的概念后，還要知道他們關心什么才能將設計對癥下藥。

對于決策者來說，擁有最終購買決定權，但因其并不是實際業務執行人，所以會考慮其他角色的建議與意見。他們關注營收增長、效率提高、減少成本等方面的問題。一般都是階段性的查看成果，權衡產品價值。

對于運維者來說，是提供重要意見的核心建議者，也是實際業務的執行人會對產品有更多的要求和考慮。他們同樣關注營收增長、效率提高、減少成本等方面的問題。但更多的是實際執行時的種種細節問題，具體些：管理方面的功能完不完備（比如社區中是否能精選評論、是否能自定給精選評論發獎勵）、數據能力完不完善等等。

對于使用者來說，前期幾乎只能被動接受，但承載著后期衡量產品實際使用效果的作用。他們關注產品便捷性、是否為自己解決問題。幫他們解決問題，他們才愿意用，產品才能用的起來、用的好。

如何尋找用戶

對B端用戶有一個大概了解后，我們再來了解下設計師如何介入用戶、了解用戶與用戶相處，讓我們的設計更打動人心。

不同于C端可以較為自由的選取用戶，B端產品對于用戶的選取與接觸較為受限。

產品供應企業針對所服務的商家會提供一套售前+售后的服務體系，并配備了不同的人員分管各個階段，例如有客戶銷售、客戶成功、專屬運營等。設立的目的是針對性的個性化服務，面對不同商家情況不同，所轉述的產品價值甚至價格都會有所區別，當然這些信息也都非常敏感和隱私。

所以當你想尋找用戶做調研時，一般要找到對應的商家運營，告知目的后幫你推薦合適的用戶與聯系方式，除此之外，在話術方面例如什么可以溝通、什么不可以溝通，如何回答敏感問題等更為嚴格（這個我們后文會再詳細描述）。

如何接觸用戶

在認知用戶基礎信息所處身份后，還需了解如何與用戶接觸，本文將從接觸時機與接觸渠道兩個方面闡述，內容來自實際經驗總結以供參考。

接觸時機:

功能類變動

• 在涉及操作的流程設計前后，需要跟進商家意見，看是否真正解決商家問題、減少成本或符合習慣。
• 在大模塊頁面優化前后，需要調研是否符合使用習慣或預期。

視覺類變動

• 在重要的視覺表現設計上（比如證書樣式、皮膚設置等），需要調研是否符合其審美。

接觸渠道:

除了尋求運營幫助推薦單個用戶，還有一些渠道方式可以幫助你接觸用戶。

• 日常溝通商家群

一般一個商家會建立一個包含該商家的運維者、B端的產品經理以及運營的群，用來解決對接問題以及日常咨詢，所以設計師可以通過加入這個群，就能了解商家如何使用、都在反饋些什么問題。一般商家反饋的最多的是某某功能如何使用和bug類。

• 產研反饋優化群

不同于商家群的人少而精的特點，問題反饋群更多匯集了各類技術與全部運營銷售人員，用以處理運營在平時遇到的商家的各種問題、還有商家從故障平臺等多個方面回收的使用反饋。這個群不僅可以幫你了解商家更關注哪些功能、還能通過技術對于問題的解答更加了解產品邏輯。

如何跟進用戶

一般B端產品的用戶數量有限，使用深度也更高，除了非常少頻的調研問卷，更多采用訪談的形式來進行問題的挖掘與調研。這些跟進方式其實在各個領域已經非常成熟，作者通過自己的實際經驗羅列一些方法和區別以供參考。

實地拜訪:

通過實地走訪，真實的走入用戶的實際使用場地，近距離、近環境的接觸用戶。

操作指南

• 一般運營聯系商家用戶確定上門的時間以及目的來發起一次拜訪。
• 拜訪時在設計師提前準備好問題的情況下，過程中因為B端商家的使用場景往往不能預想，且面對面聊天會更加激發用戶的表達欲，所以在深度追問的過程中，用戶的回答可能不會按照預想的方向進行，會經常跑偏，此時需要根據你的目的視情況引導談話方向。
• 溝通時，用戶除了回答產研預設的問題、還會提一堆優化需求或是功能需求，此時要注意避坑，除了自己能力范圍外的，不能擅自答應，但同時也需要給出比較委婉的解決方案安撫用戶。
• 用戶所有提出的問題、給出明確的后續反饋時間、并同步組內其它產研同學、及時跟進和反饋結果，不然商家會覺得一直在提重復的問題給不同的人，但沒什么反饋，造成不良印象。

實地拜訪好處是面對面增強真實感、更準確的解讀用戶需求，也能一次性了解商家幾乎全部的用戶類型，有更為全面的用戶源可了解，同時更容易跟用戶熟悉起來，建立長期的關系。壞處是，成本高、費時間。

線上訪談:

一般遇到沒辦法花時間實地拜訪的情況，線上聯系也是一種好方法。此時需要聯系好運營確認好溝通訴求后，自行線上聯系用戶進行調研。

操作指南

• 聯系前要說明來意、并預約時間（區別于C端直接打電話開始訪問），一般商家都會很高興（可能因為畢竟花了錢）。
• 需要提前準備好問題，一般會按照問題逐個回答，很少跑偏。

線上調研的好處是便捷快速的聚焦問題，壞處是對問題的理解還有回答的準確度判斷可能沒那么高。

調研問卷:

不同于C端場景，B端產品因為用戶體量上的原因，較少用到問卷。但依然有一些必要場景會用到，比如針對某一功能的認知、產品的滿意度等。

操作指南

• B端問卷的一個難點在于“如何發放”。C端一般在產品內留有問卷入口，因為用戶量大、總會收集部分反饋，但B端用戶較少，若要確保收集到一定量的問卷就得主動出擊提高觸達率。目前作者所在團隊每周會針對運維者進行答疑直播活動，相當于每次直播都自動匯集一群目標用戶，在直播過程中可以穿插問卷及入口，能夠極大概率的收到反饋（當然填寫獎勵必不可少，可以準備一些公司周邊小禮品抽獎）。
• 問卷如何設計按照普遍方式進行即可在此不詳述。

如何維護用戶

建立個人用戶庫:

通過以上方法我們已經開始并可以與各類用戶認識、并進行調研了。做完調研后，我建議可以針對一些愿意發聲的用戶建立更深一層的關系，比如直接幫助他們解決設計問題、解答功能疑惑等，用戶其實是樂于接受更多交流的。這樣可以構建個人用戶庫，它可以幫助你避免重復的走預約流程，更加便捷的獲取用戶信息，讓你對用戶也能夠更加了解。

關于B端的標桿客戶

在B端產品迭代中，我們經常聽到這樣的話“我們要打造一個標桿”“目前這個功能還沒形成標桿”等，這里涉及到一個詞“標桿客戶”。其實除了企業內部角色的劃分，針對企業本身，也是有不同維度的劃分，「標桿」相當于企業的一種分層維度。

什么是標桿:

標桿客戶指該B端產品在商家內部推行后、使用的效果超過預期，對商家某問題起到了極大的正面作用。

標桿的作用:

• 驗證產品可行性

只用通過標桿的建立，才可以一定程度證明產品能力是符合市場需求的。如果遲遲沒有標桿產生、可能產品本身就得重新考慮定位與方向了。

• 為產品站臺增強說服力

在很多銷售售賣產品時，如果只是單薄的產品邏輯講解，往往商家沒那么容易理解獲取產品價值，但如果有標桿案例，銷售將標桿商家是如何運營、如何取得成果的流程闡述出來，基本上同行商家能夠立馬理解產品價值。

所以商家對標桿是很看重的，且要求會越來越高，不僅是同行標桿、有的還會要求有細分行業的案例給到（比如除了同樣是家居行業、更希望有硬裝行業、甚至家居-硬裝-瓷磚行業的案例）

為B端用戶做設計的避坑指南

關于「如何為B端用戶做設計」又是一個宏大的主題，在此先不做系統性的分析和展開，僅提供一些經歷實戰后的小技巧以供讀者參考。

• 產品模塊對B端商家的作用不同、需求不同、要保證適配各類商家的靈活性
• B端產品往往復雜，更注重頁面引導、新功能的解釋，所以每做一個新功能對于“能不能理解”的新人引導設計非常必要（且是人性化的）

• 避免個人經驗主義，B端場景往往不能共情，不能依靠個人生活經驗去做設計判斷
• 決策者和使用者有時會在功能模塊上有利益沖突，需要根據該功能對產品購買的影響程度，來權衡利弊（參考決策鏈）

• B端產品是用戶花錢買的，與C端的免費使用是一個本質區別，“買的東西去享受”和“免費的東西去享受”，感受與包容度是完全不一樣。買，代表有所需，使用時，會有準確的預期，在產品設計時需要考慮該功能商家是否買單，是不是當初買這份產品所預期的，如果不是，謹慎添加，且要保證不增加任何認知/操作成本
• 商家更注重儀式感，對于某些一次性場景不可因頻率不高而忽視視覺表現，比如產品初始化設置。

最后

B端用戶既是普通消費者也是企業打工人，在使用B端產品時天然擁有兩重身份、會有職業屬性的因素存在，所以拆解好這兩種角色并對癥下藥，就可以了解他們深入他們設計出極致的產品。

以上內容來自作者在實際業務中的探索、學習與實踐經驗總結，未必足夠系統與細致，歡迎留言討論其中內容~

聲明: 本文插圖icon部分取自酷家樂內部圖標系統；部分C4D插圖取自UI中國-悶悶小悶悶的圖標分享。

原文鏈接：酷家樂用戶體驗設計（公眾號）

作者：十禾

轉載請注明：學UI網》設計師搞定B端用戶初級指南

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

余秋雨曾說：這是一個浮躁的時代 ；我說：這是一個需要獨立思考的時代。

我們每天忙碌的過著互聯網民工起早貪黑的生活，每天接受著外界各種嘈雜的聲音，都沒完整的獨立思考空間。為了緩解焦慮，有些設計師，每天拼命的學習，像海綿一樣不斷吸收知識，看似乎很努力，但是實際上是沒有方向的努力，是平庸的努力。

回過頭來想想，確實如此。無意義的學習浪費了時間還沒有成效，這是最笨的一種方式。

在這個時代，我們需要保持獨立思考，每個人都需要重新認識自己。比如我們想成為一個什么樣的人？然后成為這樣的人，需要具備的能力，最后付出行動，做就完了。

比如，你繪畫比較好，那么就工作之余多去畫畫；如果你喜歡演講，那就多參加一些演講活動；又或者你只會畫界面，那就大量做出更多精品作品。如果實在沒有任何優勢，那就去挖掘，先動起來，只有動起來才有變化的機會。

這種有目標的行動，用一分力，就能獲得十分的效果，這才是聰明的做法。在努力過程中，不斷收獲正向反饋，激勵你有更大動力前行。

2.建立壁壘，創造不可替代性

企業都在建立自己的護城河，建立競爭壁壘，那么我們設計師同樣的需要這樣做，創造不可替代性。如何構建自己的競爭壁壘，其實很簡單，就是這個領域的知識體系。

知識體系的重要性，設計師在面對任何難題，任何場合，都能隨機應變，并應用結構化思維去解決難題。

上圖是大廠設計師第一層級的能力模型圖，也是設計師的知識體系建構的底層模型，因此可以從這幾個維度構建自己專業競爭壁壘，打造屬于自己的知識體系框架。

這里，我們拿專業知識來舉例，首先你對本職工作的專業知識了解多少？能做到什么程度？如果不足有沒有思考過怎么去提升？任何一個小的點，做好了都能給我們產生很大正面影響。

我們在構建自己的專業知識模型時，勿要貪多，覺得自己啥都會，全能型，最可怕的就是不知道還說自己知道。

我們成長過程都是一步步往前走的，所以不急不躁，踏實穩步前行，方能走得更穩更遠。

3.破圈，走出去

之前聽到一句話，很受震撼，分享給大家，“你之所以焦慮，就是因為你的認知不足導致的”確實，我們所有的焦慮就是因為知道的太少了，對周遭事務理解有限。對于設計師來說，這個圈子本身很小，我們更要踏出去。

如果我們想要和同齡人拉開差距，那么破圈就是其中一個不錯的方法。大家都擠在同一個地方，當你還沒有競爭力時候，你的機會自然更少，所以努力走出第一步。

破圈思維的好處：“圈子鑄就動能，圈子鑄就眼界”，眼界開闊，思維開竅，自然對自己人生有了更多的想法和思路。

那么如何破圈呢？其實就是去認識更多的牛人，看看他們平時在做什么？怎么思考的？如何學習的？時間怎么分配的？可以從中找到一些適合的方法，然后加以優化用在自己的身上。

很多人說，如何認識一些牛人，以及該認識哪些牛人？我覺得不一定是設計師的圈子，其他行業圈子都是可以的。只要能幫助到自己，對自己有價值的都可以的。成事在人，我相信沒有什么做不成的。

4.時間分配，保持初心，全速前進

What 是什么

簡介：「加載提示」是用戶在提交操作之后，程序響應結果前顯示的動畫和指示。

加載提示通常是儀表或溫度計式的動畫，用于顯示某項耗時較長的任務的關鍵數據。例如，上傳大型文件或圖像，或者在移動設備上加載移動應用程序時的動畫，表示當前的狀態以及完成任務剩余的時間。

例子： 使用 Ant Design 組件-加載中 搭建的kitchen頁面加載時的效果

Why 為什么

「加載提示」可以讓用戶通過一個指示器看到系統正在積極進行響應，讓用戶感受到當下的交互反饋是實時的，使用戶有耐心保持在等待的狀態，不離開當前頁面。特別是當一個頁面其他部分都不能操作的時候，更應該加上加載提示，這樣用戶在等待的時候會更有耐心。

When 什么時候使用

當一個耗時的操作會打斷用戶繼續操作，或需要在背后運行，耗時超過一秒時就可以應用此模式。

原因為：

• 不到十分之一秒時，用戶會感覺他們在與界面進行“實時”交互，軟件的響應讓用戶感覺是即時的，沒有感覺到延遲。
• 在十分之一秒到一秒之間，用戶會感受到略有延遲，但他們會等待并立即繼續。

• 超過一秒時，用戶可能會認為他的操作對任務推進不起作用，導致其可能放棄當前任務。此時若使用使用加載指示，用戶就能明確知道系統正在工作，他可以選擇繼續等待或者在此期間進行其他活動。

使用條件

• 當前的操作系統需要一秒以上時間處理
• 為了讓用戶明確知道當前系統正在運行

• 想讓用戶留在當前頁面等待

How 如何使用

在頁面中放置一個文字或者圖形的指示器，指示當前已經完成的進度。告訴用戶：

• 當前正在做什么；
• 已經完成了多少比例；
• 還需要多少時間才能完成；
• 如何停止這項任務。

有時加載提示的時間不一定十分精準，但是只需要保證出錯時能很快回到準確的時間就可以了。當一個用戶界面無法推斷耗費時長時，可以使用加載提示告訴用戶當前系統的處理狀態。

Example 案例

案例一：Apple 音樂 APP啟動頁面

用戶需求：選擇在線音樂聽歌

在用戶進入APP時使用了加載提示動畫，通常應用于輕微等待的場景下。目的是讓用戶知道“系統正在工作，請稍等”。

案例二：語雀和釘釘郵箱上傳附件

用戶需求：上傳文件

在上傳大文件時，等待的時間可能比較久，此時的進度條可以讓用戶知道當前的上傳進度，用戶能夠預估大概還需要多久才能傳完。

案例三：安卓端Google Play 商店

用戶需求：下載軟件

Google Play商店中將軟件下載到用戶的安卓設備上時會顯示加載指示條，將文件大小，進度提示等信息都顯示在上面，可以讓用戶知道需要多長時間，并可以等待、取消或做其他事情，稍后再回來。

案例四：Adobe Creative Cloud desktop manager

用戶需求：下載軟件

Adobe 在其macOS桌面的 Creative Cloud 應用程序中使用了加載指示。 在頁面中放入了進度條，讓用戶知道安裝進度。

原文地址：Ant_Design（站酷）

作者： 六六

轉載請注明：學UI網》設計模式丨加載提示：如何讓用戶看到任務執行進度？

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

原文地址：百度MEUX（公眾號）

作者：運營設計中心

轉載請注明：學UI網》盲盒熱潮-設計師必備工藝揭秘

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

什么是汽車HMI？

什么是汽車HMI呢？咱們先把這個概念拆分成兩個關鍵詞：汽車+HMI。

先來說一下HMI，HMI是Human Machine Interface的縮寫，“人機接口”，也叫人機界面。

HMI(人機界面)是系統和用戶之間進行交互和信息交換的媒介，它實現信息的內部形式與人類可以接受形式之間的轉換。

知道了HMI的定義后，我們把“汽車”這個前綴加上，汽車HMI是指用戶與汽車系統之間進行人機交互的媒介。

當然汽車HMI并不局限于界面中，而是作為功能的集合，例如汽車儀表盤、HUD抬頭顯示器、交互媒介(語音、觸覺)等，都是汽車HMI設計包含的內容。

聊聊汽車HMI的發展

目前我們說到的汽車HMI最早是在80年代初推出的。

在當時，普通汽車需要實現的功能在迅速增加，設計師的任務之一就是為駕駛員提供控制，保證駕駛員能夠使用和管理這些新功能。

對于新功能的增加，主要遵循兩種方法：

• 一是添加模擬控件，為新功能添加物理按鈕。例如想在車內開空調，需要空調開關控制按鈕；想在車里聽音樂，需要添加換歌/調節音量按鈕。
• 二是添加具有動態內容的汽車屏幕系統。例如展示車速的動態儀表、可以導航的動態地圖。

第一種方法在德系車中比較流行，而第二種方法在美系和日系車中比較流行。

現在看來也是這樣，雖然現在汽車都在用車載大屏來代替物理按鍵，但德系車的物理按鍵仍然要比日系車多。

別克汽車在1986年最早推出了車載屏幕系統，用戶可以在單色觸摸顯示屏中控制電臺和天氣。

另一個典型的案例是日產推出的CUE-X概念車，具備可觸摸和彩色圖形的車載系統。能夠看出來，當時車內功能控件的位置和設計跟現在的車內飾已經很像了。

現在的汽車HMI更像是汽車控制中心與娛樂系統混合的數字座艙，提供的功能更多更強大，同時兼備娛樂屬性。

汽車HMI設計重點關注這些原則

設計美觀有效的HMI，需要將藝術性與功能性合為一體。藝術性和功能性應該是平等和諧地協同工作，讓用戶沉浸在體驗中。以下是一些基本的設計原則：

給用戶控制感

汽車HMI應該始終在合理的時間內，通過適當的反饋，告知用戶當前的狀態。

這一點在用戶開車時尤為重要。如果系統在沒有通知駕駛員的情況下就采取某個行為，很可能會對駕駛員造成干擾，產生不好的后果。

駕駛員駕駛汽車，實際上就是在控制汽車做出各種行為。這既是一種控制，也是一種反饋，控制的是汽車的功能，反饋的功能帶來的結果。例如利用指示燈、速度儀表等各種動態化信息，隨時告知駕駛員當前的狀態。

遵循“安全第一”法則

HMI系統主要的好處是可以幫助我們避免事故。現代汽車配備了許多傳感器，傳感器可以收集信息，再利用這些信息跟蹤駕駛狀況。

HMI系統可以實時監控情況，防止交通碰撞和事故的發生。系統對條件的響應包括：

反應型：系統會通知駕駛員剛剛發生的事，例如胎壓過低或疲勞駕駛，并向駕駛員發出警告。

主動型：系統分析狀況，預測可能發生的情況，并基于潛在的不良情況向駕駛員發出警告。例如系統分析天氣狀況，并建議用戶避免在道路結冰的日子開車。

在設計系統響應時，重要的不是用大量信息淹沒用戶，而是要制定可靠的通知策略。發送給用戶的反饋應該是：

• 有價值的：用戶只看到他們關心的反饋。
• 及時的：反饋應該在需要時準確發送給用戶。
• 清楚的：在設計信息反饋時，依據模塊化和格式塔原則很重要，確保用戶能夠快速理解反饋表達的含義。這些信息越容易理解，安全性就會越好。

認知負荷最小化

認知負荷是使用系統需要付出的腦力成本、思考成本。用戶在使用產品時付出的成本越小，說明這個產品至少是簡單易用的。

話說回來，如果一個車載系統要求用戶承擔大量認知負荷時，說明這個系統存在很大的改進空間。

首先，不要去強迫用戶記住汽車駕駛相關的信息。大家都知道，用戶在短期記憶中不能記住太多信息，特別是多個容易混淆的功能或抽象的概念。

預先考慮用戶在駕駛過程中可能遇到的問題，例如機艙溫度是多少？現在在聽什么音樂？怎么導航去商場？基于這些場景和問題進行系統的設計，以此來解答用戶的問題。

其次，基于現有的心智模型構建HMI至關重要。為什么大多數汽車的儀表、中控的分布位置都很相似呢？

實際上這些都是在用戶與汽車的交互行為中建立起來的使用習慣，遵循熟悉的設計方式，能最大限度減少學習使用系統所需的工作量。

減少不必要的分心

駕駛過程中，駕駛員沒有什么理由去看手機，因為HMI能夠做任何在手機上能夠做的事情。可能會有人說，現在車載大屏尺寸那么大，會吸引用戶的注意力，對駕駛造成一定影響。

所以現在越來越多的智能汽車推出各種車載語音助手，將聲音——而不是觸摸，作為用戶與系統交互的主要媒介，通過語音來控制場景，例如切歌、撥打電話、調節溫度等。

不言自明的導航體驗

可發現性(在系統中找到特定功能)和導航體驗應該在設計中處于最高級別。

現在很多車載系統面臨著操作層級過多/過深的情況：用戶需要點擊很多次才能找到他們想要做的功能。

通過仔細規劃系統的信息架構，將常用的功能放置在第一層級，可以避免這種情況。

改進視覺效果

在美即適用效應的影響下，用戶更傾向于認為好看的、有吸引力的產品更實用。

設計師可以通過改進系統的視覺效果，改善用戶對系統的感知態度。例如為導航渲染逼真的3D模型，能幫助用戶更快地理解他們現在所在的位置和要去的地方，并獲得很好的體驗。

驗證HMI是否合理，不僅要衡量操作完成的時間和發生錯誤的數量，還要注重用戶滿意度。

最后

用戶對汽車HMI的期望很高，有時候甚至會依據汽車HMI體驗的好壞來決定是否購買汽車。

如果你下次設計HMI系統，可以將這些要求作為基準：

• 給用戶一種控制感；
• 提供良好的學習能力；
• 避免分散注意力；
• 不斷了解用戶偏好并提出更改建議；
• 激發用戶積極的情緒反應。 

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》還不知道什么是汽車HMI設計？進來帶你快速了解

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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