<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端設計師要懂的信息架構

          純純

          網上關于信息架構的知識內容參差不齊,在學習與探究的過程中查閱了很多資料,反復修改多次,盡量用直白的語言結合實例來闡述信息架構。目錄如下:





          1.1 前言

          這篇文章的起源,來源于最近看到的話題“B端設計師會被組件庫取代嗎?”。從表面上看,在組件庫越來越完善的時代,很多頁面設計依靠組件庫就能夠快速搭建。


          那么在這種情況下,B端設計師存在的意義和價值到底體現在哪里呢?其實B端設計的重點并不在頁面的視覺上,視覺只是作為設計師最終輸出成果的一小部分。個人認為B端設計師工作重心體現在做「正確的設計」,比如以下幾個方面:

          1.這個設計能否完成對應的商業目標和產品目標;

          2.我們的信息呈現是否合理以及能否解決當前需求;

          3.用戶能否在頁面上快速找到想要的信息;

          而想要弄清楚并解決上述這些問題,在眾多的話題闡述之下,我發現其論述本質上都逃離不了「信息架構」這個概念。因此我認為設計師都需要對這個概念有充分的認知,這能夠幫助我們做出正確且出色的設計。


          1.2信息架構概念

          關于信息架構的概念,在百科上面的定義大部分都比較晦澀難懂,比如維基百科和百度百科的解釋:

          相信大部分人都很難明白其中描述的意思。在這里換種思路,將信息架構拆分為信息與架構去理解。

          信息指的是內容的載體,常見的文字、圖像等都是信息;架構的含義則形容對應的組織和結構。那么信息架構就是將信息通過一定的形式組織起來,然后呈現出來。其本質就是研究信息的表達與傳遞。

          通俗點講,信息架構就是讓用戶可以更容易的理解我們的產品,讓用戶在使用我們的產品時可以更順利、更自然。因此信息架構沒有一個具體的呈現形式,它更多的是體現在產品設計的各方面。具體主要表現為組織系統、標簽系統、導航系統和搜索系統。





          為什么需要信息架構?我們都知道B端產品設計的核心是「降本提效」,在設計這一側的可以將其理解為降低認知成本,提升使用效率。

          降低認知成本需要我們更好的表達信息,讓用戶能看明白我們的產品能夠做什么,如何用;提升使用效率需要提升信息的傳遞效率,讓用戶能夠很容易的找到需要的功能;


          而信息架構從本質上來講也正是研究信息的表達和傳遞。因此我們需要通過它來幫助我們更好的完成B端產品設計。如果沒有信息架構來作底層支撐,那么我們在頁面上看到的可能就只有功能的堆疊,讓產品陷入難以上手或者不知道怎么用的尷尬境地。

          一個強大信息架構是產品質量的保證,是作為設計支撐點的骨架,它會減少可用性問題,提升整體導航行,創造對用戶友好的體驗。比如舉一個工具層面的例子:

          PS的工具欄堆疊在界面各個部分,而Figma的工具欄則集中在右側且只出現當前需要的功能。很明顯Figma在信息架構中的信息組織部分做得更為友好,PS則會顯得遜色一些。這也是我們在學習PS的時候會顯得比較吃力的原因之一。


          可以說良好的信息架構是高效用戶體驗的基礎。視覺元素,功能,交互和導航都是在信息架構的基礎上構建的。因此想要做出體驗好且合理的頁面設計,我們就需要參與到信息架構這個過程中來,和產品一起完成對應架構的梳理。而不是只完成從原型到頁面這個部分。


          如果想要搭建一個好的建筑,我們需要知道其建造的目的,是按照什么樣的結構搭建,內部有哪些系統,以及最后呈現的模樣。


          那么信息架構也同理,我們首先需要知道信息是為了什么目標服務,然后我們通過怎樣的結構來組織這些信息,以及過程中會用到的信息元素,最后如何呈現它們。這都是我們在搭建信息架構中需要進行的必要步驟。如果某些環節沒有做好或者沒有了解透徹,那么在輸出信息架構時往往會出現方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現的。


          3.1 信息獲?。合壤斫鈽I務,再談架構

          B端行業對于業務理解的要求是比較高的,只有在理解業務的基礎上,將業務需求轉化為對應的設計目標,我們才能夠輸出合理的信息架構方案。

          個人認為理解業務的基礎,就是能夠用一句話講清楚當前設計的產品。這句話可以描述為:誰在什么地方想要完成什么目標。比如「用戶想要不出門就能夠吃到東西」,這就是外賣軟件提供的產品服務。


          雖然看上去這句話很簡單,但其中包括了三個要素:用戶、場景和目標。因此我們在分析和梳理業務的過程中首先要弄清楚的就是這三個要素。


          3.1.1用戶:分清購買者與使用者

          用戶永遠是排在第一位的,也是我們首先需要弄清楚的。在B端設計中,本質上可以分為兩類角色:客戶和用戶。比如我們常用的釘釘或企業微信,購買客戶是企業,實際用戶是員工。

          對于企業:「我想要有一款軟件可以更好的管理員工」

          對于員工:「我想要這款軟件能夠更好地提高工作效率」

          客戶決定了我們產品的購買(部分情況下也兼顧使用),而用戶則決定了后續產品的復購率。因此在業務理解中,我們需要弄清楚當前產品所處的服務階段,比如初期為了打開市場肯定更傾向于客戶,而中后期為了提高產品的使用體驗又會偏向于用戶。


          因此我們首先需要弄清楚的就是當前產品是為哪些「目標用戶」服務,這也就決定了我們在設計信息架構時對應的不同側重點。


          3.1.2場景:需求源于場景

          場景是指需求產生的某種條件,這個條件包括但不限于環境、時間、地點、空間等,只有上述條件滿足,這個需求才能成立。這里可以把場景理解為產生該問題的原因。

          比如當用戶提出「她需要一件衣服」,那么我們就需要弄清楚用戶為什么需要添加衣服,是她感冒了自身覺得冷還是因為外界環境冷。這兩種場景涉及到的解決方案是完全不一樣的。


          在平日的工作中我們可以通過以下兩種方式來更好的了解業務場景:

          1.通過業務方文檔進行業務背景的初步理解。業務文檔中一般都會包括需求背景,我們可以通過文檔進行初步了解。

          2.通過業務溝通進一步加深業務背景的理解。由于很多B端業務離設計師本身的生活比較遠。因此對于需求背景中不理解或者比較模糊的部分,我們可以通過與業務方或產品多次溝通來挖掘最底層的背景。

          畢竟需求背景是理解業務的重要步驟,我們只有知道需求產生的原因,才能夠針對性的給出解決方案。


          3.1.3目標:業務目標和設計目標

          目標決定了我們的產品最終的方向。我們首先接觸到的一般都是業務目標,而我們要做的就是將業務目標轉化為我們此次的設計目標。


          A.業務目標

          業務目標就是此次業務想要解決的實際問題,它通常是一個宏觀上的描述。比如打車軟件的業務目標簡單概括來講就是讓用戶能夠更快速地打到車,減少等待焦慮。我們一般通過文檔或者溝通來了解該目標。


          B.設計目標

          設計目標是我們基于業務目標而給出的設計策略,是一種更具體的實現方式。比如我們要讓用戶快速的打到車,那么這個時候我們的設計目標就是通過將用戶位置和司機位置進行快速匹配,并通過超時補貼紅包的方案來降低用戶焦慮。從而實現業務目標。而這一過程涉及到的信息點就有:司機位置、乘客位置、等車時間、補貼金額等元素,并需要思考它們之間的關系和呈現方式。


          可以發現從業務目標轉化到設計目標這個過程,實際上就是在確定功能和信息點的過程。這樣才能讓我們更好地設計信息架構。


          3.2信息架構核心:信息組織

          從前文可以看出我們會在整體設計過程中出現很多的信息元素。如果不經過對應的組織和處理,直接堆疊在一起,那么信息含義會比較亂且難以調用。比如下方:

          而右側圖片信息的組織過程可以理解為通過將零散的數據信息進行分類,再以某種結構化的形式將它們重新組合排布的過程,直白一點就是先分類,再結構化呈現。我用一張圖來表明這個過程:

          那么這個過程中「信息組織」和「結構呈現」到底應該怎么做,也就是接下來要講的組織方式和結構類型。


          3.2.1組織方式:模糊分類和精確分類

          組織方式可以分為精確分類和模糊分類。精確分類就是我們會利用物體本身物理屬性來進行分類,比如位置、字母表、時間、類別、層級等方式進行組織。一些工具類應用例如滴答清單內容信息都是按照時間來進行組織的:

          而模糊分類則是按照更為主觀的邏輯對信息進行分類, 如主題、任務、用戶、隱喻等來進行歸類,比如我們常用的APP商城是按照不同的主題類別來進行區分的。

          但在很多時候,產品傾向于將兩種組織方式結合起來形成復合型組織方式,從而能夠使我們的整體組織形式更符合用戶的使用習慣。比如藍湖的信息組織,其中既包含了模糊分類(按使用類型等分類),也包含了精確分類(按上傳文件時間等)。

          其實在大部分B端產品中,大都按照模糊分類來進行處理,比如按照任務、流程等方式。而精確分類更多用于在頁面內的局部信息模塊,比如創建時間和文件大小等。


          歸根結底,我們分類方式的選擇需要結合我們前面提到的用戶、場景和目標,這樣才能讓我們的分類更具說服力。


          3.2.2組織結構:選擇合適的結構類型

          當信息按照分類維度組織后,我們接下來就是把整體信息進行結構化,這樣才可以將信息整體連接起來并呈現出來。一般分為以下四種組織方式:


          A.層級結構(最重要的結構)

          這是信息架構中最為常見的結構,也是比較符合用戶認知的結構。有時也稱為「樹狀結構」。以子父節點的形式一層一層延展。

          層級結構的優勢就在于可以承載復雜的多層級內容,通過層級遞進的方式將復雜的多層級拆解得更簡潔。


          但我們需要把控好內容的廣度和深度,廣度指的是在層級結構中每一層的數目,最好控制在7個以內。如果廣度太寬意味著每個頁面會給用戶展示太多的信息,增加尋找內容的負擔。深度為縱向結構,建議一般3層,最多不超過5層。過深的層級會讓用戶點擊很多次,且不容易被用戶發現。比如飛書的基本信息架構也是主要以層級結構來進行的。


          B.矩陣結構(多維度結構)

          矩陣結構是各個節點都相互連接的一種信息架構方式,通俗來講就是用戶既可以通過多個維度去觸達同一信息,也可以從單個維度連接多種信息。

          這種結構其實就更類似于我們在做相關功能時:比如當你進入電影全屏時想要退出時,既可以通過點擊按鈕退出,還可以通過鍵盤的Esc返回到,通過多點觸達同一操作。


          又比如我們的聯系人功能,我們既可以通過輸入數字撥打電話,也可以查找聯系人進行撥打,還可以查詢電話記錄進行回撥。

          矩陣結構最重要的意義在于給用戶提供多種路徑,使用戶能夠在不同路徑中尋找各自想要的東西。


          C.自然結構(隨機性)

          自然結構不遵循任何一致的模式,節點都是被逐一連接起來的。

          自然結構一般都具有隨機性和不確定性。這種更傾向于泛娛樂化的C端應用。比如我們常見視頻網站的在推薦流都是應用的自然結構。比如打開B站等視頻平臺,你很難猜到剛進入看到的是什么。

          但一般自然結構不會單獨存在,比如B站在自然結構中也綁定了層級結構來進行層級上的劃分。


          D.線性結構(單一性)

          線性結構是非常單一的一個結構,整體是一層一層向下遞進。比較強調先后順序的一種結構。


          這種結構通常用于我們常見的軟件安裝程序等,也可以用于部分功能結構,比如網站的視頻發布,一般都是經過上傳-編輯-發布這三個步驟來依次進行。

          大家可以發現在進行信息架構時,我們在很多情況下可能會運用多種組織結構方式,我們需要根據對應的用戶決策場景來考慮讓最適合的幾種方式相結合。但最終目的都是為了讓用戶能夠更快速的獲取信息。


          3.2.3注意事項:關注用戶心智模型

          在信息的組織過程中,我們需要注意用戶的心智模型。比如當我們看到紅點就知道有新信息通知,看到下拉箭頭就知道可以展開。這是互聯網產品在無形中給用戶建立的底層習慣認知。用戶目前對于普遍產品的一些基礎布局、功能名稱和交互邏輯都形成了一定的習慣,這都屬于用戶的心智模型的內容。


          因此我們在組織信息時盡可能不要去打破用戶常見的心智模型,否則必然會導致用戶的不習慣。我們常見的「掃一掃」功能,微信、支付寶和QQ會隱藏在「+」號里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。

          這樣會導致用戶難以發現該功能。因為用戶接觸新的信息時,會以最初接觸的局部信息為依據展開并形成初步認知,用戶認知中的信息組織邏輯和實際信息的吻合度越高, 他在進一步查看或尋找信息的過程中體驗會更順暢, 反之, 若一開始形成的認知與實際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個吻合程度其實就是用戶心智模型。


          雖然建議在一定程度上遵循用戶心智,但并不是說絕對遵循。對于用戶不熟知的場景或者某些專業術語,我們需要通過靈活有效的提示(比如標記注釋等)來引導用戶就可以了。比如我們剛才提出的抖音掃一掃,它的應用場景其實是用于抖音官網后臺登錄,且在后臺登錄時已經給出了對應提示,那么這樣的設計也是合理的。


          3.3信息架構支撐:標簽、導航和搜索

          當經過上面的信息組織,其實我們已經能夠歸納出一個大體的信息架構框架。但在信息組織之外,我們還需要關注以下三點:標簽、導航和搜索。這對于信息架構的完整性也有非常重要的意義。


          3.3.1 標簽系統:讓信息識別更通用

          標簽系統,通俗來講就是要我們對當前整個系統信息節點的命名,從而讓信息的呈現更容易識別。拿個最簡單的例子來進行說明:

          可以看到左側和右側關于衛生間的信息標示,可能左邊你能一眼區分,右邊可能就需要反應半天才能猜出到底代表什么含義了。


          這其實就是關于我們的信息命名是否能夠被大多數用戶所接受的場景,也就是我們標簽作用所起的作用。標簽可以分為圖片和文字標簽,都需要考慮用戶對該信息命名的認知程度,也就是前面提到的心智模型。那么如何能夠更好的去定義標簽名稱呢,這里需要注意2個方面:


          A.優先選用被行業廣泛接受的詞或圖標

          在進行標簽定義的時候,盡量選擇已經被用戶所熟知的詞語,比如「工作臺」「通訊錄」等已經被運用得非常熟練,對于類似功能就直接以該形式命名,比如我們的設計軟件中,很多圖標和功能名稱都是通用的:

          這樣做能夠很大程度減少用戶的學習成本。因此在B端設計中我們也需要注意到我們所在的行業,哪些名詞已經達成了共識,就無需再造新名詞。


          B.不確定的詞語可以參考競品或調研來決策

          當某類功能或場景的標簽難以確定時,我們就可以嘗試去找一下競品是否有類似功能,或者找該行業的領頭羊(比如聊天工具的巨頭微信),那么在進行標簽定義的時候,可以參考它的命名體系。因為它已經替我們教育了一部分用戶,會間接降低學習成本。


          如果某些標簽在上述過程中還是無法確定,那么我們結合自己經驗或者與咨詢業務相關人員來進行討論,在必要時候可以在標簽旁邊添加注釋來進一步說明。


          3.3.2 導航系統:讓用戶不迷路

          導航系統其實應該是大家比較熟知的一個系統了。就像使用導航系統來規劃行程一樣,導航系統都會存在于每個網站中。比如我們常見的側邊導航、頂部導航等。

          因為網上關于導航系統已經有很多資料的講解了,在這里闡述下四類導航的含義:

          1.全局導航:位于頁面最上層的導航,用戶幾乎在頁面的每個地方都可以看見,是最高層級的導航系統;

          2.局部導航:位于最高導航的下級子類導航,子類導航并不是必須的導航,根據場景進行取舍;

          3.情景式導航:通過點擊文字鏈接進行跳轉的導航,比如在個人資料里面植入其它網站的鏈接地址;

          4.輔助導航:這里包括網站地圖,網站索引,網站指南等輔助類型的導航。


          輔助導航的網站指南包括新手引導和演示教程等?,F階段更巧妙的功能引導,是當用戶在進行某些功能的操作時及時進行提示,這樣不僅達到了為用戶引導的效果,還減少了一連串的新手引導對于用戶的打擾。比如figma在進行組件更新后,只有當你調用組件功能時,才會及時進行提醒。


          3.3.3 搜索系統:讓用戶輕松找信息

          搜索,是我們平日最常用的查找信息的功能,它能夠幫助我們快速進行信息的檢索。雖然搜索功能非常重要,但并不是每個系統每個頁面都需要搜索。我們決策是否添加搜索時需要考慮下列三點:

          1:內容復雜度:當前頁面承載的內容復雜度如果較少,對于簡單內容頁面往往不需要搜索;

          2:內容性質:當前頁面的性質是偏向于用戶瀏覽還是查找,根據用戶行為來決定是否需要搜索;

          3.搜索場景:如果搜索場景很簡單,考慮是否只用篩選或分類就能夠解決問題;反之如果搜索內容很復雜,我們還可以搜索結合篩選來更好的查找信息;


          上述3點決定了我們是否需要考慮搜索功能。而關于搜索的其他細節點,比如搜索規則和搜索結果等,在這里不做進一步的闡述。在這篇文章中更重要的是弄清楚我們何時需要搜索功能。


          3.4信息架構表達:視覺化你的架構

          我們通過上述方法已經知道如何梳理信息架構了,那么我們應該如何呈現它呢。這部分其實也是很多資料中比較模糊的點。

          在學習的過程中,發現部分資料認為信息架構就是單純的指思維導圖,但實際上信息架構并不能單純只用思維導圖就能夠完全表示。

          因為信息架構包含了很多部分的內容。只能說思維導圖可以是信息架構的一種表現形式,其可以幫助我們在思考階段梳理整體產品的信息構成。


          這里拋出一個很有意思的觀點,那就是「功能結構圖」和「信息架構圖」到底什么關系,這里用兩張圖示例:

          可以看到,功能結構圖更多體現的形式是功能闡述,一般形式為名詞+動詞,比如頭像設置;而信息架構圖重點呈現的應該都為信息元素,一般為名詞,比如頭像圖片。

          但在大多數時候我們看到的產品架構圖,其實更偏向于功能結構圖和信息架構圖的結合。因為在很多時候闡述信息構成時需要依賴功能進行輔助說明。


          因此這篇文章講述的信息架構更偏向于基于產品的整體架構。其實信息架構對于呈現形式并沒有特別的限制,只要能夠幫助你清晰表達產品整體結構就行?!缎畔⒓軜嫞撼絯eb設計》第4版中其實也并沒有對表現形式這一塊進行嚴苛的定義,其用「顯示信息元素間的關系——站點地圖」的說法概括了信息架構的呈現形式,其表達如下:

          可以看到其表達形式包括思維導圖和流程圖等形式:思維導圖的優勢是能夠總覽全局信息,查看信息的深度和廣度,而流程圖的優勢則更能夠表達整體的邏輯關系。


          因此信息架構的呈現需要根據你的產品場景選擇合適的視覺框架表達。不必讓形式限制了我們的發揮,而是應該形式追隨于我們的架構表達。其只是一個信息梳理結構的說明結果(類似于中間態),我們需要借助它來更好的闡述思路與溝通想法。


          3.5信息架構之后:讓信息具像化

          在輸出信息架構之后,其實這里想聊一聊頁面的呈現。因為當梳理好大的框架后,剩余的頁面細節其實都需要通過原型圖來進行體現。這個過程是從框架到頁面的階段,其實對于設計師來說也是很重要的部分。在這里根據自己的理解列出了以下幾方面的注意點:

          A.頁面能夠讓用戶看懂

          這其實就是涉及到我們的信息組織和標簽系統。如果當我們的某個頁面不能讓用戶第一時間獲取到該頁面表達的信息,反思一下是在哪個方面做得不好。是標簽系統含義模糊呢,還是信息的組織分類方式不對。從頁面呈現倒推信息架構。

          綜合來說就是設計時的排列要考慮用戶的心智模型(比如網頁的常規排版和通用名詞定義等),對于某些難以理解的地方給予用戶幫助和解釋。雖然B端產品想要完全避免學習成本是不可能的,但我們可以盡量減少其學習成本。


          B.考慮用戶的視覺動線

          當我們在進行信息排列時,這時需要思考的就是用戶的視覺動線,也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對于不同的信息流來說,采用不同的動線模型能夠讓用戶更好地查找信息。

          F模型和Z模型的使用區分其實就是在使用場景上,對于內容頁面來說F模型會更為合適(比如文章或者搜索結果),適合文本類的內容。但對于非文本的頁面,則更適合用Z模型,Z型模式的設計跟蹤了人眼掃描頁面時的路線——從左到右,從上到下,能夠更好引導用戶的視線。


          C.掌控好適度的信息層級

          B端由于在視覺的發揮空間不多,那么相對來說保持良好的信息層級能夠讓整體的體驗變得更為良好。

          不管是原型圖還是視覺,整體的視覺層級要體現得更為清晰。按理說最好的視覺層級控制在三級左右。如果發現視覺層級過多,需要考慮是不是因為信息架構設計時縱向層級過深,通過調整架構的形式來更好的呈現信息。以及對同頁面的信息進行重要程度分級。


          當我們做完或者聽別人闡述對應的信息架構時,該如何評判呢,到底怎樣的信息架構才算優秀呢。個人認為可以從3方面去進行判斷:

          業務層:

          1.設計目標合理:能平衡商業目標和用戶的目標,保證客戶和用戶都有較為良好的體驗;

          2.核心任務目標:能夠讓用戶順利完成產品的核心任務,需要通過用戶測試來進行驗證

          結構層:

          1.平衡廣度和深度:在進行功能使用時不會隱藏的太深而找不到,是否有冗余步驟

          2.保證拓展性:當前信息架構在面對未來新增或者刪減信息時能夠穩定拓展

          體驗層:

          1.保證易讀性:用戶不經過介紹,通過頁面信息呈現能夠看懂該產品是用來做什么的

          2.保證易查找性:用戶在需要某個功能時能否快捷的找到,是否有多種查找方法(比如搜索或篩選)


          合理的信息架構需要具備以上條件,我們需要在做設計呈現時也盡量保證以上條件。但在很多情況下其實并不能完全滿足,這個時候我們需要根據業務目標的重要性來選擇某些點進行滿足。


          梳理一下整體文章的架構,其實是按照「是什么-為什么-怎么做」的形式來進行拆分的:

          這篇文章想要表達的觀點,不是讓設計師獨立去梳理整體信息架構,而是讓設計師擁有信息架構意識,了解其是如何進行并產生的。這樣你在看到整體架構時,有足夠的理論支撐去判斷它的好壞,并通過自己的理論認知去理解和改進不好的地方。


          當我們對信息架構有足夠的認知時,我們在設計頁面時才能有合理的思考方向,做出「正確的設計」,避免成為無情的作圖機器。信息架構作為產品交互視覺最底層的支撐,只有骨架搭好,對于用戶的使用體驗才能夠有本質上的提升。


          注:文章中不可避免會存在不足之處,如果對文章中內容有更好建議,歡迎隨時交流。


            參考資料:

          《web信息架構》第四版

          《信息焦慮》

          《用戶體驗要素》

          《信息架構設計》

          「從設計前/設計中階段,了解信息架構知識點」

          「互聯網產品如何搭建信息架構」

          文章來源:進擊的M(站酷)
          作者:進擊的M

          轉載請注明:交互深耕-B端設計師要懂的信息架構

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          B端引導設計指南

          純純

          B端產品中很常見但是很少提及以及忽略的一個領域——引導設計



          文章來源:一九互七(站酷)
          作者:一九互七

          轉載請注明:B端引導設計指南

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          2021年中國電商市場的9大趨勢預測

          資深UI設計者

          今年受到新冠疫情的影響,線上電子商務行業飛速發展。直播帶貨、社區團購等成為新的風口,未來它們還能這么火嗎?本文作者從自身工作經驗出發,對2021年中國電商市場的趨勢進行預測,與你分享。

          2020年受新冠疫情影響,線上電子商務行業飛速發展。社區團購,C2M趨勢越來越明顯,因此預計2021年將是中國電子商務市場充滿創新和擴展的一年。各商家將采用新的舉措和技術,并希望將業務擴展到低端城市。以下是2021年中國電子商務市場的10大趨勢預測。

          1. 直播將成為重要的傳播媒介。
          2. 從KOL營銷向KOC營銷的轉變。
          3. 短視頻應用程序將繼續結合電子商務。
          4. 隨著主要電子商務平臺啟動團購功能,團購將持續增長。
          5. 小程序提供新的購物平臺。
          6. 快遞運輸將更快。
          7. 中國基于數據的消費者到制造商(C2M)模式將推動電子商務的發展。
          8. 垂直電子商務網站將獲得吸引力。
          9. 跨境電子商務的格局正在發生變化。

          因此:2021年將是中國電子商務市場創新與擴展的一年。

          • 實時流媒體和短視頻為零售商和品牌提供了與消費者互動和推廣其產品的手段。
          • 新興購物渠道(包括團購和小程序)將與主導的電子商務平臺一起蓬勃發展。
          • 垂直電子商務網站將在2021年實現強勁增長。
          • 零售業中越來越多的技術采用和數據使用將使消費者對制造商(C2M)業務模型的增長以及更快的交付服務成為可能。
          • 跨境電子商務將通過阿里巴巴收購考拉平臺進行整合,從而進一步鞏固該公司在在線領域的主導地位。

          01 直播將成為更加重要的傳播媒介

          實時流媒體在2020年對消費者的購物行為產生了更大的影響,并將在2021年繼續在中國電子商務市場中發揮越來越重要的作用。這種銷售媒介類似于電視購物(例如QVC),但在21世紀得到了升級。

          直播會話的視頻內容實時廣播,觀眾可以通過在線鏈接在觀看視頻的同時購買商品。就像QVC上的導購一樣,實時流媒體主持人出售各種各樣的產品,從服裝和化妝品到電子產品和汽車。

          購物者被直播吸引的原因有幾個:

          • 精選的產品: 直播間主持人會根據粉絲的喜好精心挑選產品,這不僅吸引了觀眾,而且還提高了轉換率。的確,淘寶聲稱它在2018年的直播中擁有65%的轉化率。
          • 種類繁多的產品:通過直播,在美容,時尚和雜貨行業中推廣各種產品。一些主持人甚至賣電影票和酒店套票。
          • 低廉的價格:淘寶直播主持人經常與品牌合作,向粉絲們分發禮品或產品折扣,直播觀眾通常對價格更為敏感。
          • 抽獎:抽獎是主持人與觀眾互動的一種流行方式。例如,著名的中國主要輿論領袖(KOL)李嘉琪(被稱為“口紅之王”)通常會通過舉辦比賽來贏得戴森吹風機,iPhone11和小米電視等高價值電子產品,以此來吸引觀眾參與。
          • 數量有限和限時優惠:直播主持人經常采用快速銷售策略,每次銷售僅持續很短的時間,可用產品的數量有限。此外,主持人將定期宣布庫存余額,以增加觀眾購買的緊迫感。
          • 克服“選擇悖論”:如果向購物者提供了太多選擇,他們可能會在購買商品時感到困惑,因此什么也沒買。在直播會話期間與消費者互動,以幫助消費者專注于一種產品并更輕松地做出購買決定。

          通過這些策略,直播主持人能夠吸引大量的購物者。例如,在2019年雙十一,李佳琦直播了六個多小時,吸引了3680萬觀眾。

          在2019年雙十一期間,超過100,000個品牌使用在線直播作為銷售方式。在購物狂歡節的第一個小時內,在線直播產生的商品總銷量(GMV)超過了去年在線直播的全日總成交量??傮w而言,2019年11月11日,GMV達到200億日元(28.5億美元),約占阿里巴巴2684億日元總銷售額的7.5%。

          02 從KOL營銷向KOC營銷的轉變

          關鍵意見消費者(KOC)是通過視頻制作和帖子發布以分享自己產品使用體驗感的普通消費者。這種新興趨勢將為品牌商和零售商提供一種新的傳播途徑,使他們采用有影響力的營銷方式,而不是使用KOL。由于包括快手、小紅書和抖音在內的一些中國社交應用程序的普及,KOC可以輕松共享其產品評論,從而影響其他購物者的購買決定。

          KOC越來越受歡迎的原因之一是:消費者越來越意識到KOL是由品牌贊助來提出產品建議的人,因此他們認為提供的信息不那么可信和真實。另一方面,KOC本身就是日常消費者,他們更能提供公正的產品評論。

          KOC越來越受歡迎的部分原因是購物者希望從日常消費者那里尋求建議。例如,新父母在選擇母嬰產品時會尋求他們的朋友和其他有經驗的父母的建議。通過的社交應用,這些購物者現在可以在做出購買決定之前,觀看經驗豐富的KOC的視頻和評論。

          實際上,KOC營銷是「完美日記」營銷計劃的關鍵組成部分之一,該計劃已使其成為中國化妝品品牌之一。在公司成立之初,該品牌就開始與KOC進行大規模合作,這使普通消費者覺得該品牌非常受歡迎。

          03 短視頻應用程序將繼續結合電子商務

          短視頻應用程序已涉足電子商務市場,我們預計這一趨勢將在2021年繼續。短視頻的長度通常為10–20秒,富含了各種各樣的內容。據報道,一些用戶在短視頻應用上日平均花費數小時。借助人工智能技術和算法,鼓勵用戶根據瀏覽歷史和喜好定制個性化內容,更大提高了用戶對短視頻的擁護。

          短視頻行業在中國蓬勃發展,截至2019年,中國的用戶數量超過8.2億。據商業智能提供商QuestMobile稱,這一總數同比增長了32%。在中國10個移動互聯網用戶中,平均有7.2個使用了快手和抖音等短視頻應用程序。根據QuestMobile的數據,自2018年以來,用戶在這些平臺上花費的時間同比增長了8.6%,總計每月超過22個小時。

          為了利用這些統計數據和消費者行為模式,短視頻應用程序已采取步驟以通過其用戶流量獲利:

          • 在2019年10月,抖音添加了一項新的功能,稱為“營銷標簽”,該功能為內容分配了標簽,以幫助零售商鎖定想要搜索產品的消費者。
          • 在2019年11月,TikTok取消了限制,允許所有用戶通過平臺銷售產品。以前,社交應用程序對用戶訪問電子商務功能的要求為3,000個粉絲。此舉可以幫助擁有32億每日活躍用戶的抖音轉變為基于短視頻的電子商務網站。

          04 隨著主要電子商務平臺啟動團購功能,團購將持續增長

          到2021年,電商平臺將大力發展社區團購,如果消費者大量購買,團購將以大大降低的價格提供產品和服務。這種購物模式對預算有限的購物者特別是二、三線城市的購物者具有吸引力。

          • 自2015年成立以來,拼多多經歷了爆炸性的增長。按市值計算,拼多多目前已成為僅次于阿里巴巴,騰訊,美團和京東的第五大互聯網公司,截至2020年已超過百度。拼多多的成功在很大程度上應歸功于與其團購模式保持一致,消費者與朋友一起購物以確保獲得更好的交易。
          • 京東于2018年6月在微信上開始了其團購小程序,并于2019年4月推出了其團購應用程序。蘇寧于2018年7月建立了自己的團購應用程序。
          • 阿里巴巴于2010年推出了其快速銷售和團購平臺聚劃算。阿里巴巴的Alipay在2018年3月推出了名為拼購的功能。

          這些用戶在雙十一購物狂歡節中提供了巨大的消費能力:聚劃算報告稱,有576種產品在前兩個小時內收到了超過1000萬張訂單;京東表示,其40%的新客戶來自靖西。而拼多多在11月11日的前16分鐘內售出了1000多輛汽車。

          對品牌的影響:團購模式將以較低的價格提供給想要擴展到中國低端城市的品牌。這些地區的消費者往往對價格更為敏感,并且可能會尋找便宜貨。團購還為零售商提供了清理庫存的好機會。

          05 小程序提供新的購物平臺

          小程序可在支付寶,美團和微信等應用程序中運行。他們為品牌提供了一個額外的在線平臺來銷售其產品,用戶無需下載單獨的應用程序即可執行類似的功能。

          品牌可以使用小程序作為大型電子商務平臺的補充,而不是替代。小程序用作輔助銷售渠道,可以列出通過快速促銷快速銷售的需求商品。小程序也可以用作品牌工具——品牌可以創建交互式的視覺程序,以更好地吸引客戶并鼓勵他們與朋友分享內容。微信小程序現在支持增強現實(AR),它將虛擬圖像疊加到物理世界上。這種類型的第一個是阿瑪尼的化妝品小程序,該程序允許用戶通過用戶在手機上使用的自帶攝像頭來測試不同化妝品的外觀,例如各種色調的唇膏。

          資料來源:阿瑪尼的微信小程序

          小程序為希望打入低端市場的品牌提供了優勢,購物者可能不愿下載新的應用程序。品牌可以將小程序與團購結合起來,以訪問較低線城市的微信用戶。

          對品牌的影響:由于小程序的容量很輕,因此品牌在此投資進行營銷,客戶參與和電子商務是一件好事。微信小程序的創造者微信報告說,截至2019年,它已擁有7億用戶,他們每月使用微信小程序42.6次。

          06 快遞運輸將更快

          我們預計到2021年,物流提供商將通過升級物流基礎設施和增加保稅倉庫的產能來提供更快的交貨速度。這樣就可以為更多產品提供當天交貨。阿里巴巴的菜鳥計劃旨在通過幫助物流公司大規模部署物聯網(IoT)解決方案來數字化并加速整個交付過程。菜鳥計劃在2020年至2022年之間將1億臺智能設備連接到其IoT技術,包括其倉庫,交付機器人和算法支持的管理系統。

          菜鳥還將通過最后一公里送貨業務“菜鳥郵局”建立10萬個中轉站,以增加送貨選擇。菜鳥郵局提供定期送貨,智能儲物柜和送貨上門取件等服務。

          通過采用5G技術,物流提供商將能夠提供更,更快的交付。京東物流于2019年北京開設了首個由5G供電的智能物流園區,并使用一代的連接性對叉車的位置和路線進行實時監控,并提供異常預警情況。

          對品牌的影響:新技術將推動中國交付的進一步加速。品牌和零售商可以利用諸如智能路由之類的工具,該工具使用機器學習算法來優化交付路線,從而提高交付效率。

          07 中國基于數據的消費者到制造商(C2M)模式將推動電商的發展。

          中國的消費者對制造商(C2M)模式將成為電子商務發展的新動力,幫助企業更好地滿足消費者的需求并實現銷售增長。

          在C2M模式中,工廠變得以消費者為中心。零售商和制造商從客戶那里收集數據,并使用大數據創建客戶資料,分析消費特征并計劃生產。這有助于制造商預測產品需求并減少庫存和供應鏈風險,這也使品牌商和零售商受益。

          在2019年的光棍節購物節期間,天貓用戶搶購了1.70億個C2M產品。一家公司報告說,電動牙刷的銷量在11月11日達到了25,000。羅曼利用天貓的消費者見識來影響牙刷的設計,例如牙刷頭的尺寸和牙刷的顏色等。

          C2M模型還與中國對產品個性化需求的增長相吻合,中國由80年代后的消費者(1980-1989年出生的人)和90年代后的消費者(1990-1999年出生的人)主導。C2M模式將允許制造商和零售商根據消費者的需求生產產品。

          品牌影響:根據中國研究公司艾瑞咨詢的數據,中國的C2M市場在2018年達到175億日元(25億美元),預計到2022年將達到420億日元(60億美元),復合年增長率為24.4%。據Statista估計,這相當于2018年中國電子商務總銷售額的0.4%和2022年中國電子商務總銷售額的0.6%。品牌可以使用C2M模型更好地滿足消費者需求,并提高整個供應鏈的效率。

          08 垂直電子商務網站將獲得吸引力

          垂直市場是電子商務平臺,在該平臺上,商品和服務被出售給特定的客戶群,他們可以通過在線社區相互聯系。我們預計此類網站將在2021年蓬勃發展。Babytree(專注于母嬰產品)和Gegejia(面向女性市場的全球食品進口商)等網站和應用都是成功的垂直市場的例子。

          • 垂直平臺自然將志趣相投的消費者捆綁在一起,并形成了圍繞特定行業或產品的強大社交社區。例如,對于父母和嬰兒市場Babytree,平臺上的用戶共享嬰兒產品的育兒技巧和建議。
          • 垂直平臺提供了更好的內容,可以幫助用戶做出購買決定。根據麥肯錫(Mckinsey)在2019年的一項調查,中國三分之二的消費者使用他們從垂直網站收集的信息來影響他們的購買決定。

          對品牌的影響:隨著消費者對其購買選擇的了解越來越復雜,我們希望垂直的電商站點能夠吸引人們的注意力,不僅提供產品知識,而且還提供志趣相投的客戶可以進行交互的社區。品牌可以與這些平臺一起有效地將其產品定位到適當的消費者基礎。

          09 跨境電子商務的格局正在發生變化

          我們預計跨境電商的格局將在2020年得到鞏固。阿里巴巴于2019年9月收購了中國當時最大的跨境電商平臺考拉,并將其整合到天貓。然后,阿里巴巴將占中國跨境電商市場的50%以上:根據研究公司iMedia Research的數據,網易考拉在2019年上半年占據了27.7%的市場份額,而阿里巴巴的天貓全球市場則占據了25.1%的份額。

          這項收購將增加阿里巴巴接觸需要跨境購買商品的中國購物者的機會。這也將幫助該公司實現天貓的商業模式多樣化,該模式主要涉及邀請外國品牌在其網站上開設在線商店——考拉通常直接從外國商人那里大量購買各種商品,然后再轉售給中國消費者。首席執行官Daniel Zhang表示,阿里巴巴對考拉的收購將通過阿里巴巴整個生態系統的協同效應,進一步提升該公司為中國消費者提供的進口服務和體驗。

          10 2021電商市場趨勢總結

          實時流媒體將在2021年的電子商務中扮演更重要的角色,因為它使品牌和零售商可以實時向消費者推銷產品,并為消費者提供限時折扣的優勢。

          電商的格局將變得更加多樣化,短視頻平臺和小程序將持續開展直播帶貨,為零售商提供諸如AR之類的技術,以進一步與潛在客戶互動。電商大廠將繼續投資,以擴大產品范圍,例如阿里巴巴收購中國跨境電子商務平臺考拉,并利用技術為消費者提供更無縫的購物體驗(例如,使用5G連接簡化交付流程)。

          基于關系的營銷方法將在2021年激增:垂直市場為購物社區提供參與機會。團購將以相對較低的成本提供產品,從而成為零售商吸引來自中國二線城市消費者的一種有效方法。


          文章來源:人人都是產品經理   作者:阿木木

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


          辭典精譯 | 在UX中正確使用動畫的終極指南

          資深UI設計者

          如今,很難用界面動畫給人留下深刻的印象甚至驚喜。它顯示了屏幕之間的交互,解釋了如何使用該應用程序,或者只是引起用戶的注意力。在瀏覽有關動畫的文章時,我發現幾乎所有的文章都只是描述了關于動畫的特定的用例或一般事實,并沒有遇到任何關于界面動畫通用規則的文章。在本文中我收集了界面動畫的主要原則和規則,以便給想要設計動畫界面的設計人員提供一些幫助。


          01 動畫的持續時間和速度

          當元素改變它們的狀態或位置時,動畫的持續時間應足夠慢,以使用戶可以注意到變化,但同時也要足夠快,以免引起等待。

          在動畫中使用適當的持續時間,不要太快,更不要讓用戶過長等待


          大量研究發現,界面動畫的最佳速度在200-500毫秒之間。這些數據是基于人類大腦的特殊性得出的。任何小于100毫秒的動畫都是瞬時的,根本不會被識別。而超過1秒的動畫時長會傳達延遲感,因此對用戶來說很無聊。

          最好在界面中保留動畫的持續時間


          在移動設備上,《材料設計指南》還建議將動畫的持續時間限制在200-300毫秒之間。至于Web端,持續時間應延長30%,大約為400-450毫秒。原因在于:屏幕尺寸越大,物體在改變位置時可以克服的路徑更長。因此,在可穿戴設備上,持續時間應縮短30%,大約為150-200ms,因為在較小的屏幕上,移動距離更短。

          移動設備的大小會影響動畫的持續時間


          Web動畫的處理方式有所不同,由于我們已經習慣了在瀏覽器中即時打開網頁,所以我們希望也能在不同狀態之間快速轉換。因此,Web轉換的持續時間應比移動設備短約2倍,150-200毫秒之間。在其他情況下,用戶將不可避免地認為計算機死機或網絡連接出現問題。


          但是,如果你要在網站上創建裝飾性動畫或試圖吸引用戶對某些元素的關注,則無需考慮這些規則。在這些情況下,動畫可以更長一些。

          大屏幕電腦=慢動畫?決不是!


          需要記住的是,無論平臺如何,動畫的持續時間不僅取決于移動距離,還取決于對象的大小。更小的元素或帶有小變化的的動畫應該移動得更快。因此,大而復雜元素的動畫在持續時間稍長的時候看起來更好。


          在相同大小的移動物體中,停下來的是經過最短距離的物體。與大物體相比,小物體移動得更慢,因為它們的偏移量更大。

          動畫的持續時間取決于對象的大小和移動距離


          當物體碰撞時,根據物理定律,碰撞的能量必須均勻分布在物體之間。因此,最好排除反彈效應,只在特殊情況下使用它才有意義。

          避免使用彈跳效果,因為它會分散注意力


          物體的運動應該是清晰和銳利的,所以不要使用運動模糊。即使在現代移動設備上也很難再現這種效果,并且根本不用于界面動畫中。

          不要在動畫中使用模糊效果


          列表項(新聞卡片、電子郵件列表等)在其出現之間應該有一個很短的延遲時間,每次出現的新元素應該持續20-25毫秒。元素出現較慢的話可能會惹惱用戶。

          列表項的動畫應持續在20–25毫秒


          02 緩和

          緩和有助于使物體的運動更加自然,這是動畫的基本原則之一。這一點在《迪士尼動畫原則》(The Illusion of Life: Disney Animation)一書中得到了充分的描述,這本書是由兩位重要的迪士尼動畫師——奧利·約翰斯頓和弗蘭克·托馬斯所寫。


          為了使動畫看起來不顯得機械和人造,物體應以一定的加速或減速的方式移動,就像物理世界中的所有活動對象一樣。

          與線性動畫相比,具有緩動效果的動畫看起來更自然(這里提示下:注意看每段豎格的間距)


          2/1 直線運動

          不受任何物理力影響的物體直線運動,換句話說就是勻速運動。正因為如此,它們看起來非常不自然,對人眼來說是人為的。


          所有動畫應用程序都使用動畫曲線,我將嘗試解釋如何閱讀它們以及它們的含義。曲線顯示了物體的位置( y axis=position )在相同的時間間隔內物體的位置如何變化(x axis=time)。在當前情況下,運動是線性的,因此物體在同一時間行進相同的距離。 

          直線運動曲線


          例如,直線運動只能在物體改變顏色或透明度時使用。一般來說,我們可以用它來表示物體不改變其位置的狀態。


          2/2 緩入或加速曲線

          我們可以在曲線上看到,在開始時物體的位置變化緩慢,而速度則逐漸增加,這意味著物體正在以一定的加速度移動。

          加速度曲線


          當物體以全速飛出屏幕消失時,應使用此曲線,比如說系統通知或者是界面卡片。但請記住,只有當對象永遠離開屏幕且我們無法調用或返回它們時,才應使用這種類型的曲線。

          將卡片滑出屏幕的加速曲線


          動畫曲線有助于表達正確的情緒。在下面的示例中,我們可以看到所有物體的移動持續時間和距離是相同的,但是即使曲線上的微小變化也可以影響動畫的氣氛。當然,通過改變曲線,你可以使物體盡可能地接近于真實世界。

          持續時間和距離相同,但卻是不同的氛圍


          2/3 緩動或減速曲線

          它與緩入曲線相反,因此物體會快速覆蓋很長一段距離,然后緩慢的降低速度,直到最終停止。

          減速曲線


          當元素出現在屏幕上時應使用這種類型的曲線——它以全速向上飛入屏幕中,然后逐漸減速直到完全停止,這也可以應用于從屏幕外部出現的其他卡片或對象。

          減速曲線,使動畫更好地呈現


          2/4 緩入緩出或標準曲線

          該曲線使物體在開始時獲得速度,然后慢慢地將速度降回零。這種類型的移動是界面動畫中最常用的。當你猶豫在動畫中使用哪種類型的運動時,可以使用標準曲線。

          標準曲線


          根據《材料設計指南》,最好使用非對稱曲線,使移動看起來更加自然和真實。曲線的末端必須比它的開始更加突出,以使加速的持續時間短于減速的持續時間。在這種情況下,用戶將更加關注元素的最終移動,從而關注元素的新狀態。

          查看對稱和非對稱標準曲線之間的區別


          當對象從屏幕的一部分移至另一部分時,使用緩入緩出功能。在這種情況下,動畫避免了引人注目的戲劇效果。

          卡片在屏幕上的移動以及相應的不對稱曲線


          當元素從屏幕上消失時,應該使用相同的移動類型,但用戶可以在任何時候將其返回到先前的位置。它涉及抽屜式導航等。

          抽屜式導航從屏幕上隱藏了標準曲線


          從這些例子中可以看出,許多初學者忽略了一個基本的規律——開始動畫并不等于結束動畫。與抽屜式導航一樣,它以減速度曲線出現,而以標準曲線消失。另外,根據谷歌的材料設計語言,物體出現的時間應該更長,以吸引更多的關注。

          側面菜單的出現和消失,分別通過減速度和標準曲線實現


          使用函數cubic-bezier()來描述曲線。之所以稱為立方,是因為它基于四個點。在圖上已經定義了具有坐標的第一個點0;0(左下)和具有坐標的最后一個點1;1(右上)。 


          基于此,我們僅需描述圖形上的兩個點,這些點由函數的四個參數給出cubic-bezier():前兩個是坐標x和y第一個點,后兩個是坐標x和y第二個點。 


          為了簡化曲線的工作,建議使用easings.net和cubic-bezier.com網站。第一個包含最常用曲線的列表,你可以將其參數復制到原型工具中。第二個來源使你可以使用曲線的不同參數,并立即查看到物體將是如何移動的。

          函數三次貝塞爾曲線的不同類型的曲線及其參數


          03 界面動畫中的編排

          就像在芭蕾舞蹈設計中一樣,主要思想是在從一種狀態轉換為另一種狀態的過程中,引導用戶注意一個流動的方向上。舞蹈編排有兩種類型——平等交互和從屬交互。


          3/1 平等交互

          平等交互意味著所有對象的外觀都遵循一個特定的規則。在這種情況下,所有卡片的外觀都被視為一種流程,可以引導用戶的注意力集中在一個方向上,即從上到下。如果我們不按照順序,那么用戶的注意力將會分散。所有元素同時出現看起來也會很糟糕。

          用戶的注意力應引導在一個流動的方向上


          對于表格視圖,它有點復雜。在這里,用戶的焦點應指向對角線,所以逐個地顯示元素是一個很糟糕的主意。單個展示元素會使動畫過長,并且用戶的注意力會呈鋸齒狀,這是錯誤的。

          卡片形式的對角線外觀


          3/2 從屬交互

          從屬交互意味著我們要有一個吸引用戶注意力的中心對象,而所有其他元素都從屬于它。這種類型的動畫給人一種有序的感覺,從而引起用戶對主要內容的更多關注。


          在其他情況下,用戶將很難知道該關注哪個對象,因此他的注意力將被分散。所以,如果有多個要設置動畫的元素,則需要明確它們的運動順序,并盡可能將動畫設置為最小的對象。

          只有一個中心對象的動畫很有必要,其余元素應是被引導的。否則,用戶將不知道關注什么對象


          根據材料設計語言,當移動的物體尺寸發生不均衡變化時,它們應沿著弧線而不是直線移動。這有助于使動作更自然?!安怀杀壤笔侵肝矬w的高度和寬度的增加/減少是不對稱的,即以不同的速度進行(例如,一個正方形的卡片變成了一個長方形)。

          當移動的物體不按原有比例變化時,應沿著弧線運動


          當物體按比例改變其大小時,使用沿直線的移動。由于這種移動的實現比較容易,因此通常會忽略不成比例的圓弧移動的規則??纯磳嶋H應用的例子,你會看到線性運動的主導地位。

          尺寸的比例變化是沿著直線上運動的


          曲線上的運動可以通過兩種方式實現:第一種稱為垂直向外——物體開始水平移動并以垂直移動結束;第二種是水平向外——物體開始垂直移動并以水平運動結束。


          物體沿曲線的移動路徑必須與滾動界面的主軸線重合。例如,在下一張圖片上,我們可以上下滾動界面,相應的卡片以“垂直輸出”的方式展開-首先從右到下,然后向下。反向移動以相反的方式進行-即卡片首先垂直上升,最后水平移動。

          卡片的展開/折疊方向應與界面的軸線一致


          如果移動物體的路徑彼此相交,則它們將無法彼此移動。這些物體應通過減慢或加快自身的速度,為另一個物體的移動留下足夠的空間。另一種選擇-他們只是推開其他物體。為什么?因為我們假設界面中的所有物體都位于一個平面中。

          在移動過程中,物體之間不應相互穿過,而應為另一個物體的移動留下空間


          另一種情況,移動物體可以高于其他物體。但也不能通過其他物體消失或移動。為什么?因為我們相信界面元素的行為符合物理定律,現實世界中沒有任何固體物體能夠做到這一點。

          物體可以超越其他物體,然后移動


          結論

          從以上總結的規則和原則能明白,UX界面動畫是反映物理世界中存在的運動,如摩擦、加速等,模仿現實世界存在的行為。我們可以創建一個序列,讓用戶能夠理解期望從界面得到什么。如果動畫是正確構建的,那么它不會太引人注目,并且不會分散用戶的目標,動畫不應該影響用戶使用或完成任務。


          但是不要忘記動畫更多的是一種藝術而不是科學,所以最好的方法是在用戶身上試驗和測試你的決定。


          文章來源:站酷    作者:UX辭典


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

          工具型產品可用性測試怎么做?

          資深UI設計者

          本文將針對酷家樂旗下云端建模工具——酷大師所做的可用性測試,說明工具型產品如何去做可用性測試。

          打造一款產品的過程中,我們需要時刻保持警惕:功能是否滿足用戶核心需求?交互流程能否做到簡單流暢?是否還有未知領域可以由用戶帶來啟發?進行一次準備充分的可用性測試,無疑是解答上述問題快捷有效的方式。

          下面我將結合本次針對酷家樂旗下云端建模工具——酷大師所做的可用性測試,說明工具型產品如何去做可用性測試。

          準備階段

          第一步:明確測試目的

          測試目的不同,安排的測試任務就不同,進而就會影響最終得到的結果。所以測試之初需要考慮清楚測試目的。國際標準化組織在人體工程學設計的人機交互部分( ISO9241) 把b2可用性c 規定為 3 個指標:

          • 有效性:用戶使用該系統完成任務的精度和完整性;
          • 效率:用戶使用該系統完成任務需要耗費的資源;
          • 用戶滿意度:用戶對該系統的舒適度和認可接受程度。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          結合這3個指標,我將本次測試目的設定為:

          • 了解用戶對酷大師現有主流程的使用現狀;
          • 了解用戶對酷大師的體驗滿意度及需求滿足情況。

          第二步:確定測試時間和環境

          測試時間:

          • 測試準備時間:建議為期2天。準備相關文檔、設備、場地、任務等。
          • 用戶測試時間:建議為期3-5天。可短時間內容集中進行用戶測試,或在工作日穿插進行測試。
          • 結果整理時間:建議為期5天。用于整理測試信息、落實產品迭代任務、撰寫總結報告等。

          測試環境:

          • 線下環境:邀約用戶到公司辦公室現場測試;
          • 線上環境:考慮到用戶路程及時間等限制性因素,也可在線上進行測試。
          第三步:安排測試設備
          • 操作設備:取決于目標用戶群體主要使用的設備,假如用戶都使用ipad,就要將ipad列為主要操作設備。
          • 錄音設備:測試結束后需要進行詳細的信息整理,錄音資料可以幫助回憶溝通內容。可使用手機自帶錄音功能或專業錄音筆。錄音前必須告知用戶,在征得許可后方能進行錄音。
          • 錄屏設備:工具型產品的操作過程中涉及很多細節,錄屏資料可以幫助工作人員進行問題定位。可使用電腦自帶錄屏功能,或錄屏工具。
          • 遠程設備:由于部分用戶需在線上測試,可使用在線工具進行遠程協作,比如:zoom、騰訊會議等。
          • 記錄本和筆:測試過程中進行表格填寫時需要使用。
          • 文檔資料:主要包括測試過程中需要填寫的表格。建議打印n+2套,n是測試樣本數量,另外2套備用。
          • 場地準備:提前預約會議室,給用戶獨立的操作環境。
          • 測試酬勞:具體可根據公司政策進行準備。
          第四步.邀約測試樣本

          Nielsen在理論中認為5-8位用戶可以測試出85%的可用性問題,實踐下來確實如此,樣本數量建議控制在這個范圍。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          在同一個產品的用戶中,新手用戶、永久的的中間用戶、專家用戶這三類角色通常是共存的。我們需要讓新手用戶快速和無痛苦地成為中間用戶;避免為那些想成為專家的用戶設置障礙;最為重要的是,讓永久的中間用戶感到愉快,因為他們的技能將穩定地處于中間層。

          本次測試中,我盡量使樣本中包含這3類用戶,比例為2:3:3。測試之后,就可以大概知道對于不同類型用戶來說,產品可用性和

          易用性情況,也可以得到多維度差異化的反饋。

          第五步:設計測試文檔

          測試中需要使用一些管理用戶信息或記錄用戶反饋的表格,在準備階段就要做好表格設計和打印工作。下面是具體的表格,可根據具體需求做相應調整。

          《用戶信息&排期表》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          在這張表中管理測試用戶信息b2姓名、職業c 、測試安排「時間、地點」、測試工作人員「主持人、觀察員」。一場測試盡量安排一位主持人和一位觀察員作為工作人員相互配合。

          主持人負責與用戶溝通互動,推進測試進程;觀察員負責設備和資料保障,以及測試過程中的行為觀察和記錄。一個人獨自承擔主持人+觀察員角色的話,在用戶反饋密集而現場又出現臨時狀況時就會手忙腳亂,所以建議兩個角色分工協作。

          《用戶基本信息問卷》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          在這張問卷中可以設計與產品相關的用戶基本信息問題,問卷設計原則為:

          • 關聯性:與需要測試的內容相關;
          • 層級性:問題層級依次遞進,使用戶回答問題時能夠思維連貫,由淺入深;
          • 隱私性:盡量避免涉及用戶敏感信息,必須涉及時需解釋原因,尊重用戶意愿。比如有些用戶不愿透露年齡、收入等信息。

          這張問卷使用在線工具呈現,比如騰訊問卷;也可現場打印紙質問卷進行詢問填寫。大多數用戶比較喜歡現場填寫。

          《單任務滿意度問卷》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          測試過程中,我們需要讓用戶完成一個完整任務,該任務需要拆解成若干單任務。在每個單任務結束后,立刻對用戶進行該單任務的滿意度詢問。

          《SUS系統可用性量表》

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          用戶結束完整任務后,填寫該量表。該量表由10個題目組成,包括奇數項的正面陳述和偶數項的反面陳述。在結果整理階段,我們再對該量表進行分值計算。

          第六步:規劃測試腳本

          從開始到結束,需要主持人將整場測試的各個環節串聯起來,引導用戶操作,推動測試進程向前發展。為防止意外狀況出現,可以預設測試腳本,規劃情境和話術,并在預測試環節驗證及優化該話術。

          比如可以這樣開場:“首先非常感謝您今天能來參加我們的可用性測試,我是主持人XXX,這位是觀察員XXX。我們這次是對酷大師建模工具進行可用性測試,想了解您使用時的體驗和感受。

          在這里需要強調的是:我們測試的對象是工具,而不是您,所以您不必感到緊張……當您使用工具時,我們會觀察和記錄。今天的測試大概需要一個小時,測試過程中會有休息時間。測試過程中,請您將手機保持靜音狀態……“

          比如可以這樣進行兩個單任務環節串場:“好的,我們已經完成了第一個單任務?,F在有一份簡單的問卷,填完后可以稍微休息一下。

          「出示問卷,并作簡要填寫說明」「問卷完成后進行簡單訪談,用戶也稍稍休息后繼續」現在,我們開始進行第二個單任務「要清晰且大聲地說出這句話,以“鼓勵”測試參加者和提示記錄人員」……”

          具體話術依據需要測試的內容和情境展開,盡量做到專業、友好。

          第七步:設計測試任務

          可用性測試往往帶有一定目的性,而這些目的能不能達成,取決于任務與目的的關聯性以及用戶是否能夠給到對應反饋。通常,測試用戶是愿意給予反饋的,那么測試任務的設計就成為整個準備階段最重要的環節。

          做好測試任務的設計和拆解:需要具備從全局高度理解產品的能力;需要知道產品全鏈路的過去起源、現狀細節、未來走向;需要把控重點,拎出骨架;需要去繁就簡,以較少的任務成本測出最有價值的信息。

          本次測試中,我設計的主流程是:模型創建——材質鋪貼——模型渲染——模型發布——模型分享,并且我還希望測到拉伸、陣列、組編輯、移動、旋轉這樣的主功能。所以我將這兩塊有機結合,給到用戶創建一個「樓梯踏步模型」的任務。

          我將任務按照主流程拆解為5個單任務,主功能分布到其中幾個單任務中,且盡量做到兩個單任務中不重復使用同一個主功能。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          預測試階段

          大多數產品都存在一些限制因素導致的尚未解決的已知問題。這些問題在測試中出現的話,會轉移用戶注意力,削弱本次測試的價值,偏移本次測試的目的。

          另外,我們準備階段進行的種種規劃也需要得到驗證。結合這兩個原因,正式測試之前建議進行內部的用戶預測試。找出并修復測試環節中的漏洞,準備好各類突發狀況下的planB,以及修復影響正式測試的已知問題,提高正式測試的執行效率。

          正式測試階段

          第一步.測試開場,填寫《用戶基本信息問卷》

          本次測試是在工作日穿插進行8場一對一用戶測試。這樣可以放緩測試節奏,在兩場測試間隙有充足時間簡單整理上一場收集的信息,與下一場用戶確認測試安排,以及對突發狀況及時處理。

          正式開始前半小時,觀察員需確認設備都已調試妥當,資料都已打印完成。主持人可與用戶進行聯系,帶領用戶進入測試場所。主持人可以通過填寫《用戶基本信息問卷》了解用戶基本信息,幫助用戶消除在陌生環境下的溝通障礙。也可以使用戶以放松狀態完成測試任務,以開放心態為后續拓展性話題的展開做好準備。

          無論是填寫《用戶基本信息問卷》還是后續的問卷,建議采用主持人提問、用戶回答的方式收集信息。用戶的注意力集中于思考和溝通,就能夠提供更多有價值的信息,而不是忙于撰寫問卷。

          第二步.完成單任務,填寫《單任務滿意度問卷》

          主持人按照順序分步解說單任務。單任務測試過程中,工作人員不要去打擾用戶,也不要給用戶任何提示,所有的問題都等到測試結束再進行解答。

          觀察員需仔細觀察用戶操作,記錄用戶是否很容易判斷出如何操作,完成某個重要功能點時是否順暢;需隨時關注用戶表情,記錄下明顯表情相關聯的流程或功能點等等細節。

          一個單任務完成后,提示用戶稍事休息,然后提問《單任務滿意度問卷》中的問題。此時可以回答用戶操作過程中的疑問,也可以藉由操作中的細節做延展發散,詢問用戶操作感受。通常可以獲得很多針對該單任務的意見和建議。這些意見和建議后續就需要記錄整理,作為優化任務幫助提升產品可用性和易用性。

          第三步.填寫《SUS系統可用性量表》,了解整體評估

          整個任務完成后,可以藉由填寫《SUS系統可用性量表》,了解用戶對整體的評估。由于量表的10個題目中,包括奇數項的正面陳述和偶數項的反面陳述,所以在提問過程中一定要陳述清楚題目。如果用戶認為有些問題無法回答,則視為其選擇中間值。在后續的結果整理階段,再對量表總分進行計算。

          在問題詢問過程中,可以有針對性地詢問原因。比如針對第2個問題“我認為酷大師建模工具的操作較為復雜,其實沒必要這么復雜”。

          如果用戶認為不復雜,則可以詢問哪些點非常簡單易用;如果用戶覺得復雜,則可以詢問哪些點覺得復雜。用戶告知原因的同時,常常會說出他認為比較簡單的解決方案。這些解決方案或者來自于競品,或者來自于實踐,或者來自于創新,常常可以幫助我們開拓思路,走出認知盲區。

          第四步.拓展性訪談,測試收尾

          在這個環節可以不必拘泥于原定的測試任務。建議預留一定時間,大到行業發展,小到產品細節,與用戶進行一番深度探討。這些來自于一線的用戶常常會帶來一些新鮮的靈感,為產品未來的拓展提供一些線索,解決產品當下的一些困惑。

          由于我們一開始就對測試樣本進行了分類,所以也可以結合前面幾個環節的信息,對各分類下的用戶訴求和行為習慣進一步驗證、區分、歸納。

          結果整理階段

          第一步.SUS量表分值計算

          首先,我們需要計算SUS量表總分。奇數項計分采用“原始得分-1”,偶數項計分采用“5-原始得分”。由于是5點量表,每個題目的得分范圍記為0~4(最大值為40),而SUS的范圍在0~100,故需要把所有項的轉換分相加,最終再乘以2.5,即可獲得SUS分數。

          其次,我們可以獲得分量表得分。SUS量表中,第4和第10項構成的子量表為“易學性”(Learnability),其他8項構成的子量表為“可用性”(Usability)。

          為了使易學性和可用性分數能夠與整體SUS分數兼容,范圍也是0~100,需要對原始分數進行轉換:易學性量表轉換分數的總和乘以12.5,可用性量表乘以3.125。

          最后,我們可以將SUS量表分數換算成百分等級來解釋,找到對應評級。百分等級的意思是指測量的產品或系統相對于總數據庫里其他產品或系統的可用性程度。比如SUS得分是73分,其百分等級大約為67,意味著比大約66%的產品可用性更好。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          第二步.整理問題列表,推進迭代優化

          做完所有用戶的測試之后,我們一定會收集到很多涉及具體功能點的反饋。對于正向反饋,我們可以謙虛地接受,并且思考這些打動用戶的點如何復用;對于非正向反饋,我們應該冷靜地思考,它們將是本次可用性測試中最直接而有效的收獲!

          對這些反饋可以進行分類歸納,將其中能夠立即應用于產品的內容整理出來,按照優先級,放入產品迭代優化任務中。這些任務將提高產品可用性,在數據層面能夠幫助提升留存率。我們這次可用性測試中總共獲取97個有效反饋,其中62個整理進產品迭代任務,并且取得了用戶使用數據上的相應提升。

          第三步.撰寫測試報告

          整個測試環節通常只有2-3位工作人員,如果希望能和團隊一起分享測試的收獲,建議整理一份總結報告。可以使用word或者ppt形式,說明測試背景、測試用戶信息、主要結論、發現的問題、以及解決問題的行動項。

          總結升級

          經過幾場頗具收獲的工具型產品的可用性測試之后,我做了一些總結,希望能夠形成適應于工具型產品的可用性測試體系:

          1. 目的性

          工具型產品的可用性測試目的比較統一:幫助團隊優化體驗路徑;幫助團隊明確用戶使用產品時的體驗感受;幫助設計師驗證設計指標。

          2. 專業性

          完整的可用性測試全程都需要專業支撐,從籌備到進行,從任務到結果,每一個細節都需要考慮到位。在這過程中我們要盡量保證:流程規劃清晰;文檔整理完整;分工明確到位。

          3. 參與性

          大多數可用性測試是用戶體驗相關崗位人員發起,但是用戶對于產品的反饋與團隊每位成員息息相關,所以建議團隊共同參與。比如在這次可用性測試中,就邀請了產品經理和研發人員擔當觀察員或主持人;邀請用研人員給予專業指導培訓;在對測試反饋的問題進行優化過程中,也是團隊通力合作,推進迭代快速進行。

          4. 周期性

          可用性測試不是進行一次就結束的一場表演。而是結合產品進展情況,可持續實施的一種有效的快速驗證方式。

          可以在新產品上線后進行,可以在重要功能上線前進行,也可以在迭代優化后進行。建議周期性進行可用性測試,取得一些結果后立即應用于產品,隔段時間再次驗證,形成良性循環。亦趨近于精益用戶體驗中倡導的基本MVP理念。

          當然,每次可用性測試都需要工作人員投入大量時間和精力,所以專業賦能可以成為很好的解決方案。即團隊成員可以學習使用該方法,輪流進行周期性操作。

          工具型產品可用性測試怎么做?來看酷家樂的實戰經驗!

          寫在最后

          我們日常其實接觸并積累了大量專業方法,可用性測試只是其中一種。在不斷實踐的過程中才能真正體會到這些方法的魅力之處,在不斷落地的過程中才能打磨自身的方法論體系,形成屬于自己的一套打法,給產品設計帶來新穎的專業思路。

          文章來源:優設    作者:酷家樂UED 


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

          如何在設計中構建共情 (同理心)

          資深UI設計者

          -設計過程中,共情(同理心)的一些觀點和心得,希望能夠讓更多設計師對這些軟能力有更好的提升和應用,歡迎前來交流探討



          到底什么是共情

          ————


          在體驗設計的過程中,如果不能對設計對象有更深入的了解,設計思維就無法開始。而用戶對產品持有的觀念、態度甚至意見并不一定會表現的很明顯,這需要設計者更加主動的與用戶進行互動去構建共情。這可以使得你能夠更加了解他們的需求、想法、情緒和動機。好消息是,你能掌握多種方法來與用戶構建共情去獲取更多信息。并且當你有足夠的“正念”和經驗時,你也能成為共情他人的專家。

          “正念”:有目的的、有意識的,關注、覺察當下的一切,而對當下的一切又都不作任何判斷、任何分析、任何反應,只是單純地覺察它、注意它。



          百科

          共情(Empathy),也稱為神入、同理心,共情又譯作同感、同理心、投情等。 由人本主義創始人羅杰斯所闡述的概念,卻越來越出現在現代精神分析學者的著作中。不管是人性觀還是心理失調的理論及治療方法似乎都極為對立的兩個理論流派,卻在對共情的理解和應用上,逐步趨于一致。共情似乎為現代精神分析與人本主義的融合搭起了一所橋梁。


          通俗含義

          我們常說的感同身受、換位思考、同情心、設身處地、將心比心這都是共情的一種描述。Empathy一詞源于德語“Einfühlung”,意為讓人們跟藝術品融為一體,比喻走進一件藝術品的奇妙體驗,因此國外常常會看見“站進別人鞋子里去”的共情比喻——(Stepping into their shoes as the saying goes, in order to gain a deeper understanding of their situations.)意為正如俗話所說,站在他們的立場上,以便更深入地了解他們的處境。


          對于“共情”我更多的理解成是兩個或多個載體之間的一種共識一種情緒共鳴,然后再到行為跟思維上的影響。但實際上發生完全的共情是不可能的,有時連我們自己也會做一些無法理解的迷惑行為,并且客體是多樣化的,可以是跨物種的,跨維度的。而我們要做的就是在工作中定義共情的有效范圍,盡可能的與目標用戶產生共情以了解更多信息或需求,然后去定義和構思新的需求與設計。共情很重要,但它不是設計工作中的全部,有效而不要過度的使用也很重要。


          1. 共情載體的多樣化可以是你通過一幅畫感受到了作者的情緒表達

          2. 十字路口聽見火車的鳴笛聲,從而感知到危險的信號

          3. 當你傍晚處在城市生僻的角落,打開地圖軟件,亮起了回家的導航


          身邊的共情

          我們身邊的共情無處不在,正是這些共情使得人與人之間的情感更豐富,當然也是因為人類有強大的表達能力。通常當客體情緒在表達出來的情況下,主體是可以更容易得到共情的。所有當主體更專注的去感受客體的情緒表達時,能夠使達到共情變得更迅速。



                  常的的共情場景;


          1. 身處于電影院,看到某一段感人的情節,很多人開始淚盈眼眶。

          2. 朋友講述著自己的不幸,你聽完后的同情與表示理解他。

          3. 看著熟睡的嬰兒,人們自覺的保持了安靜的氛圍。

          4. 準備上樓,當眼看電梯門就要關上時,里面的人幫忙打開了電梯門。

          5. 正在寫報告時,突然的停電讓你措手不及,也讓你的同事措手不及。

          6. 與伙伴開黑游戲,共同取得勝利那一刻。

          7. .....


          以上都是一些生活中常有的共情場景。通常當我們與其他客體得到共情時,往往我們能夠更清楚客體傳遞的信息是什么、需求是什么,這完全可以應用到我們的設計場景中幫助我們獲取更多的有效信息。



          共情對體驗設計的作用

          ————


          如果你想要更了解你的產品用戶,從而讓你的產品更好的服務用戶得到更好的體驗口碑,那么體驗設計師如果對目標用戶沒有更深入的了解,那么產品設計中的各種設想都是沒辦法決策的,甚至都難以測試和驗證,這對產品研發一定是一個危險信號。而共情則能幫助我們洞察用戶需求和定義問題,所以共情在體驗設計中顯得基本且至關重要。


          以交互設計為例

          - 電商的界面設計:

          產品原型與交互界面時常是有所出入的,其原因在于前者更關注產品本身框架與盈利點,而后者更注重整體的用戶體驗的細節。共情用戶需求,以及思考商業盈利與用戶體驗之間平衡的點似乎是無法脫離共情應用的。這便是共情應用的一種體現,也是共情價值與設計賦能的體現。



          - 移動端常見廣告推廣界面:

          一直以來在產品營銷廣告中,始終存在一些流氓的交互方式讓用戶苦惱。往往更加注重和尊重用戶感受可以更好的提升用戶的好感與使用體驗,這便能夠使產品與用戶之間的感情升溫贏得口碑。



          - 組織產品功能架構時:

          在構建產品業務框架時,大多可能會出現以公司服務資源為中心的構建方式,但同時這種由內而外開發方式會為產品帶來更多的弊端(往往產品投入使用后,會出現超出預期的問題)。嘗試去站進用戶的鞋子里去,或者找來目標用戶甚至是相關的專家來做咨詢,減少研發迭代的彎路。



          用戶研究中的共情應用

          - 用戶畫像:

          用戶畫像是體驗設計中常見的一種設計工具,它能夠幫助產品定義目標用戶,能夠有效用于產品設計決策或者洞察用戶需求等。一個好的用戶畫像是基于真實用戶的,它不是胡編亂造的。畫像在于形成多組可供參考的角色材料,這有利于跨團隊跨層級之間快速實現共情,達到業務目標的統一性。因此一組目標用戶畫像能否幫助團隊快速實現共情是一個重要的衡量標準,而不僅是一組人口調查數據。



          - 用故事去描述:

          故事的元素通常會更豐富更有趣味,用故事敘事更能提升用戶的興趣和關注,這能便于構建共情。因此當你發布測試任務或者撰寫研究報告時,都可以加入背景故事或用故事敘事,便于對象更容易理解和共情,你甚至可以用筆繪制故事版,像四格漫畫一般,因為用圖傳達概念或信息更容易讓人記住或回想起來,并且當你用這些方法時,自身也能加強理解。共情不是單向傳遞的,不要高估對方的理解能力,讓你的信息更簡單明了的傳遞也是重要的共情應用!



          - 仔細傾聽和觀察:

          在與目標用戶進行互動的時候,通常會借助電子設備幫助記錄這個過程,目的是為了更仔細的觀察和聆聽,并注意到被忽略的信息。就像一種正念,我們會帶有目的性的觀察目標活動,并且不會進行干涉,同時不對當下發生的一切提前作出任何結論、分析或判斷,直至這個過程有了一個里程或結果,我們再將收集到的各種信息放在一起去思考。傾聽和觀察是人與人之間互動的根本方式,相對仔細完整的傾聽與觀察可以獲取到更加有效的共情,而片面的則可能產生共情偏差。



          小結:

          共情在體驗設計的應用中很廣泛也很重要,甚至還延展了許多幫助共情的工具,這些都是為了讓設計者能夠更好的了解市場、發掘用戶需求、甚至找到新的產品機會,最終幫助企業解決產品實際問題。有時在共情工作中,我們就像一個老中醫一般,對患者望聞問切。 一旦有了問題,就應該及時使用適當的方式去共情目標對象,定位問題所在,并制定解決方案。



          如何在體驗設計中構建共情

          ————


          制定共情的范圍

          為了尋求更加有價值的目標用戶進行共情研究,我們會對共情的目標進行范圍篩選,可以是根據某些用戶習慣、常使用的產品服務、某個場景、也可以是社會群體(例如學生、司機)、甚至可以是動植物(例如寵物類產品)。所以第一步你要根據需求去制定共情目標的篩選條件,然后一點點縮小和鎖定有效的目標群體,再開始招募、溝通或是進行其他下一步工作。我們沒辦法跟所有目標用戶構建共情也沒有必要這樣做。通常五個左右的用戶就能夠反映出大多數問題,并出現重疊的反饋。


          - 在不同研發階段嘗試與特殊的用戶共情

          伴隨產品的發展過程用戶也在時時發生微妙的變化,在跨度大的迭代中,嘗試與產品潛在用戶或極端用戶進行共情研究也是很有價值的。潛在用戶的需求通常存在著更多的不確定,這也意味有發現新機會的可能。而極端用戶通常會有一些更刻薄的需求,這些需求可能不是主流,但也有主流發展的潛力,不過至少這些改進會為極端用戶帶來驚喜。這就像是在公交車站下安裝一臺自動售賣機,不是大多數人的需求,也不是當前的主流趨勢,但卻能夠為部分乘客帶來方便或驚喜,我們不能忽略這些少數。




          帶有目標的進行

          在體驗設計的過程中,我們需要與目標對象構建共情時,一定是有目的有意圖的。以使用性測試為例,往往我們都會設定一些產品測試任務和目標給用戶,再進行觀察和共情。這也將允許我們能夠在同一個或相似的場景事件中發生共情,這樣才能夠獲取到更真實有效的共情。以一個吸塵器產品為例,如果對方是在地毯上測試的,而你是在木質地板的環境下去共情的,那么共情結果肯定是有所出入的。所以構建一個共情目的甚至是環境是有效共情的一個重點之一。



          情緒降噪與傾聽

          構建共情會受情緒影響,在共情前有必要去除負面情緒影響,不要為共情構建帶來更多的阻力,另外則是仔細的傾聽和理解。這就好比我們要專注學習,除了認知聽講,腦子里一旦充斥著其他負面情緒或思維影響,就很難完成專注學習的目的。同理,在用戶幫助我們測試產品或訪談時,我們也要首先做好彼此的心理建設,去除主要的負面情緒甚至去除不利的環境影響因素,例如緩解用戶緊張不安的情緒,找一個素一點且安靜的測試房間等。



          合理的工具輔助

          圖表、筆記、錄制設備是幫助我們共情的最好工具,在不同的場景下,這些工具能夠幫助我們更好的收集信息,并且便于我們思考和共情。我們在短時間能記住的信息是有限的,這也是為什么我們會用到7±2這種定律去控制信息量的原因。以用戶體驗地圖為例,在記載用戶體驗產品的過程中,便是一種很好的共情輔助工具,它能夠按照使用步驟或階段記載用戶使用情況和情緒變化等反饋。



          構建共情的要素

          在我的理解中,共情由四個主要的因素影響來構成。

          一、尊重:受到不同的環境跟經歷影響,要去準確理解一個人是很困難的,哪怕是多年的夫妻也是如此。所有首先要做到尊重,消除任何偏見,不要帶有批判或評價的心理。然而做到足夠的尊重也并不容易。

          二、觀察:觀察是獲取客體傳遞信息的主要途徑,不能掌握足夠的信息是無法做到共情的,片面的或者假設的信息都將影響到正確的共情。

          三、思考:對客體的信息與觀念進行思考,嘗試理解客體的各種行為根因以達成一致的認知。

          四、融入:將自己感受到的情緒與認知代入到共情對象的行徑中,去仔細揣摩,以洞察用戶的行為、感受、需求、思維方式以及與產品之間的關聯,就像靈魂附體一般,以達到更深入的共情來定義問題。




          共情為設計賦能

          最后便是共情結果如何應用到設計之中,將共情結果賦能到產品設計也是共情工作的價值所在。通常這套流程是共情->定義->構思->原型->測試,在這個整個過程中隨時是可以返回到前面其他階段中反復打磨的,而共情作為一個起點也揭示了其重要性。我們一切的共情工作皆為了能夠優化和解決產品的問題,使得產品體驗能夠更好,這是我們在體驗設計中不斷去共情的初衷。




          好的共情設計欣賞

          ————


          以移動端的產品來講,現在好的共情設計真是百花齊放,這正是創新技術與共情設計發展的好趨勢,也是敢于創新探索的好機遇。這里我們放三種典型的欣賞案例說一下;


          一、智能便捷型:給用戶提供更加智能便捷的服務功能,使得用戶能夠獲得更輕松流暢的服務體驗;




          二、人性化類型:通過大數據與技術手段,為用戶提供更加人性化的服務方案,提升用戶好感度、依賴性,加強產品口碑與體驗;




          三、情感關注型:有一些屬于情感關注類型的共情設計,通過獲取用戶的場景信息或其他數據共情用戶情緒,并給予用戶合適的關愛、幫助、引導。為用戶帶來軟件有情感,品牌有溫度的體驗;



          小結:

          在體驗設計中,情感化設計一定會是一個值得深入方向,我們應該關注到不同場景下用戶會產生的情緒變化,為用戶提供更加走心的服務體驗,為產品收獲更多口碑。當然,在產品完善的這個漫長過程中,我們也要隨時甄別我們所做的事情是否對用戶和企業有更高的價值。在研發資源有限的情況下,劃分這些設計點的權重,合理分配研發資源。



          共情構建中的認知偏差

          ————


          能夠對共情構建產生影響的認知偏差挺多的,這些認知上的偏差會影響到共情的正確性,不僅是構建共情的主體還是客體都會有影響。國外產品設計師Abhishek Umrao在UX MAGAZINE(https://uxmag.com/articles/6-ways-psychology-affects-your-design-work)上整理了六個關于影響UX體驗設計的認知偏差可以了解一下。這里圍繞構建共情補充了一些相關認知偏差,希望能夠在構建共情的工作中再少一些坑;


          1. Empathy gap(共情偏差)

          共情偏差是指由于經驗、預期和態度存在差異,我們很難準確地去體會他人的感受。這一點就是前文提到的我們無法做到完全共情,我們對共情的概念要有一定認知。

          建議:通過技巧去彌補,減少認知偏差。多一些耐心的聆聽,減少偏見和執念,嘗試思考如果是TA該怎么辦?


          2. Negativity bias(負面情緒偏差)

          情緒會對我們的認識和行為產生影響,而負面情緒產生的影響則是最大的,這會對我們的共情判斷產生偏差,所以前文我們會提到消除情緒噪點的概念。

          建議:盡可能的維持中立或積極的情緒狀態會更有助于共情工作,但至少是消除負面的情緒影響。


          3. Observer-expectancy effect(觀察者預期效應)

          觀察者常常會不自覺地扭曲影響因素或數據,以得到預期結果。這就好比在用戶進行產品測試的期間,向你咨詢了意見,而你很有可能不自覺的給出你的期望或者一些暗示,這會對目標產生可暗示性偏差(Suggestibility),使得目標想到的內容往往會被扭曲。

          建議:1. 對面向用戶的測試材料進行自查糾正,盡可能處于中間立場,不要干擾測試結果。2. 在主持訪談或用戶測試現場時,對于用戶的主動咨詢或交談中不要解釋過多,讓用戶理解其定義跟概念即可,說的越多越是容易出現觀察者預期效應。


          4. Automation bias(直覺偏誤)

          基于自身的認知或經歷,有時做出判斷會過度依賴個人直覺,而不去收集更多有益于做出準確判斷的證據。這一現象常常表現為產品或項目經理的一拍腦袋的決定,但是往往因為過度依賴直覺而忽略了實際的場景差異等。

          建議:對于不能直接給出有效證據的決策,要敢于質疑而去追究其正確性。當使用參考信息時要思考兩者之間的差異性??傊灰獞{借事件的相識性而忽略差異性,最終憑直覺決策。


          5. Authority bias(權威偏見)

          人們會過度倚重某些權威的意見,而忽視事情發生的實際背景。以品牌的影響力為例,兩種不同的任務實施程序,通常人們會認為大品牌的方案更好更值得信賴,而忽略了一些體驗細節。

          建議:對于相比較的軟件測試任務,我們有時會弱化甚至隱匿品牌信息。其目的便是在比較時減少這些權威偏見,不論是正面的還是負面的,這些都會影響用戶判斷,所以在特殊的場景研究下,請注意這一影響是否干擾結果。


          6. Normalcy bias(正?;`)

          人們會過度依賴先前的經驗,把一些極端事件看作正常的,認為事情很快會過去。以用戶測試為例,當6個人都正常完成了測試任務,僅有一人出現出現問題時,這是一個概念問題,我們不能忽視這僅有的一個用戶,更不能安慰自己這只是一個特例。

          建議:上文有提到嘗試與極端用戶進行交流,其實道理類似,問題純在即合理,我們有必要注重和研究這些極少數,它們極有可能帶來新的機會點。


          7. Illusion of transparency(透明度錯覺)

          人們高估自己的個人心理狀態被他人知曉的程度的一種傾向,時常表現為你以為別人都明白了你的意思,實際上別人明白的還遠遠不夠。與“知識的詛咒”這一偏差的差別在于,前者是我以為對方明白了實際對方還有諸多不解,而知識的詛咒是你無法給對方進行可理解的解釋,有著文化背景或認知的障礙,實際上這兩者偏差概念都會影響到共情工作。實際辦公中透明度錯覺時常體現在需求表達、文檔解釋、跨部門溝通中,往往你以為你說的已經很清楚了,但在實際研發中卻會體現出諸多差異。

          建議:適當的了解其他部門的專業文化,便于更好的解釋給對方。組織好信息框架,簡單易懂的信息框架易于對方理解,例如書本的目錄大綱、信息的分類等??鐖F隊或部門的PRD(產品需求文檔)盡可能的減少專業術語的應用或者進行注釋,文檔的目的不在于體現多專業而是更加易懂的傳達信息。


          趣味思考

          ————


          研究用戶從觀察自己開始。每個時代的人都會有不一樣的特質或者某些現狀,在這個大環境下,你會發現與同齡人之間有很多相似點,那么加強對自己的行為理解,是不是就等同研究了這些同齡用戶的共有特征?這些特性是否會對你的產品使用有關聯?帶著這些特性去體驗你的產品時,是否會發現新的機會點?



          參考文獻:https://uxren.cn/?p=68537#影響UX設計的6個心理偏差

          參考文獻:https://uxren.cn/?p=68382#如何構建同理心


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


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

          讓用戶愛不釋手的醫療類應用程序

          周周

          的App類別是游戲,而健康&健身幾乎沒有進入前10。2020年雖是艱難的一年,但它提供了很多機會,可以為移動應用市場引入一種新的經濟回報和有意義的醫療解決方案,直接影響人們的健康行為、并幫助他們生活得更輕松、更愉悅。

          為此,你需要一個功能強大的App,因為如果不能運行的話他就是無用的產品。但是這種強大的功能還需要通過設計來將它呈現出來。一個優秀的醫療App設計將醫藥類App最重要的細節呈現出來,并引導用戶使用,以及建議用戶接下來如何操作,最終完成必要操作。

          一個App能憑借自身成為一個的客戶開發工具和公司的核心產品。對于與健康或醫學相關的產品,UI/UX設計更為重要。

          640.png

          呼吸監測應用程序-作者: George Frigo

          在這篇對設計師和公司都有幫助的文章中,我們將探討一些醫療App設計中的最佳實踐是如何發揮作用的。

          醫療類應用類型

          值得注意的是,“醫療保健App”是一個多方面的概念,包含了大量與健康和醫學相關的數字產品。

          這里有很多類型的醫療類App,包括:

          醫療專業人員遠程病人會診的App(遠程醫療)

          電子病歷App(EMR)

          記錄和管理患者生命體征的App

          提醒患者服藥、鍛煉等的App

          醫療計算App

          提供醫療信息參考的App

          健身和運動類App

          健康的生活方式和健康App(每日飲水量、睡眠管理等)

          這似乎是一個過于寬泛的主題(例如,將卡路里計數器app與醫學教育解決方案相比較),但是也有一些通用設計經驗可以使得醫療健康類App更、讓人們有辦法得到他們想要的。

          醫療應用程序作者: Victor Nikitin

          如何為醫療健康打造移動應用

          即使一個App不是企業的主要產品,它也有可能產生巨大的價值。例如,如果它是一個醫療辦公室的配套應用程序,它可以減輕員工的負擔,為客戶提供信息和服務。如果一個健康App是企業的主要產品,比如健身或冥想應用程序,那就比較危險了。有時候,健康App的缺陷是人們放棄使用這些App的原因。

          為了避免這種情況,我們來看看醫療App設計中的一些最佳實踐技巧,以及它們如何幫助App聚焦、直觀和快速。

          醫療保健: Anatoly

          調研—成功的第一步

          在設計原型應用程序界面之前,你需要知道誰是你的目標用戶,以及他們的地理環境、社會經濟背景和心理特征,畢竟沒有產品可以迎合每個人。用戶的興趣和能力決定了他們如何與軟件互動。所以解答以下問題將有所幫助:

          誰是你的目標人群?

          他們喜歡什么?

          怎么樣的app他們每天都會使用?

          使用目的?


          通常,醫療健康軟件要么被患者使用,要么被醫生使用(如果我們將生活服務類軟件的用戶也計作患者的話)。這兩種用戶的需求在功能和UI設計上都有不同。因此,醫務人員通常需要快速獲得某些數據項:EHR/EMR(電子健康檔案/電子病歷),藥品規格標準,診斷和治療建議,參考資料等。然而患者需要的是盡可能精簡的、易于理解的信息項。因為這一群體中有相當一部分老年人或者有某種特殊障礙。

          只有進行了恰當的用戶調研,得出了相應的結論,設計師才能繼續醫療健康軟件的真實有效的設計。


          Chahua的健康管理軟件

          細化明晰每個案例

          醫學對普通人來講是復雜的學科,最好的方法反而是將醫療健康設計得相對簡單,以安撫用戶并讓他們保持專注。

          “世人總將事物搞復雜,殊不知,簡單才是至理。” ——Richard Branson

          想要給人留下深刻印象,將醫療UI設計得過于詳細是沒有意義的,最好的是界面和邏輯易于理解,即使軟件是專為醫務人員設計的(當然,不要居高臨下)。

          醫療App/檔案和活躍度-作者: Igor savalev

          設計醫療健康軟件的UI,提供有益的新用戶引導流程,使界面可直觀理解。否則,用戶會對糟糕的體驗失望,甚至等不到進入核心功能就會退出。

          所有相關方,不管是醫生還是患者,都會喜歡清晰極簡的軟件,這樣,你就不需要讓用戶學習如何操作軟件,這對醫療機構來講是個解決辦法,他們已經習慣了這些事。

          幫助用戶穩定發現功能,循序漸進地給予指導。以用戶引導流程開始,將app中每個動作劃分成可處理塊,一次提供一個操作說明。

          使用恰當的顏色(更進一步)

          利用被動輸入和自動補齊功能限制用戶必須輸入的信息的數量,調整鍵盤,動態驗證字段值。這篇文章里還有更多表單設計相關。

          所有醫療信息都得由擁有一定學歷和專業知識的專家提供,否則,這些內容要么不完整,要么包含錯誤,這在醫療健康中是不容允許的。


          醫務人員使用的醫療軟件-作者: yurig

          功能的重要性(及特色)

          醫療保健應用程序的特性和功能類型取決于它的用途和目標用戶。例如,醫療中心的應用程序需要一個賬戶,病人可以在那里查看他們的就診、推薦和預約記錄。如果沒有安全加密的視頻會議和通信功能,遠程醫療應用程序就毫無用處。

          與其他一般APP不一樣的地方,“首頁”是醫療類的app的主要功能的位置。先來回答一個問題: 為什么有人使用您的應用程序(或類似的醫療類App) ,如果一個人訪問一個應用程序來記錄或接收一些信息,聯系醫生,檢查他們的進展等,這個功能都放在“首頁”上?

          呼應前面的觀點,就是避免過多功能同時出現時的混亂。不可否認,這種情況在傳統的醫療類App中更為常見,這些應用程序有時候會分散注意力,不斷添加新的和新的功能,直到只有資深的用戶才能理解并熟練使用。

          根據二八定律的法則告訴過你,80%的用戶傾向于使用不超過20%的功能。區分優先次序,決定哪些功能對用戶最重要。

          醫藥應用App作者: Manoj Dalvadi

          導航的研究和鑒賞

          清晰的導航結構是醫療應用程序用戶界面設計的骨干必需組件。沒有它,這個App將會不再受歡迎。導航代表和易用,因此從用戶的角度來看是有價值的。一個醫療專業人士需要一個能輔助工具,因為他們已經有太多的時間花在處理EHR(電子健康記錄)上了,【類似國內的病歷本】。

          經斯坦福醫學院進行的調查發現,醫生花在每個病人身上的時間中,有62%的時間花在EHR(電子健康記錄)上。如果設計的導航不夠,那么這個App就沒有任何使用價值。就算病人目前在使用導航的頻率很低,但他們也不會樂意看到混亂的導航而放棄二次使用的機會。

          重要的導航信息應放在屏幕上顯眼的地方,并根據要求提供詳細信息。有一個“三次點擊規則”說系統的設計應該使任何信息都可以在三次轉換中使用。如果用戶在三次點擊之后找不到他們想要的東西,他們可能會感到沮喪,放棄他們原本要做的任務。

          目前采用標準的應用程序導航有:

          -漢堡菜單

          -標簽欄

          -導航抽屜

          醫療應用-作者: Alex Samofalov

          色彩的運用方法

          一般來說,應用程序的顏色選擇取決于目標用戶和應用程序的主題來決定。

          醫療保健應用程序的設計通常是在中性色調與流行的冷色調的藍色和綠色,白色為背景。在大多數情況下,設計師這樣做是為了達到某些效果: 利用舒緩柔和的顏色與醫療保健行業的共同聯系,緩解焦慮,增加可信度。所以你很少能看到明亮的紅色或黃色在醫療類App的界面。


          藍色為主的醫療類App,作者Adam Sokoowski

          然而,考慮到醫療軟件的通用性,在顏色的選擇方面沒有特別的限制。要考慮到的是,應用程序的整體外觀應該創造一個積極的印象,而不是引起擔憂,恐懼,或其他不良情緒的感覺。

          例如,下面這個健身應用程序的深色調的設計看起來很漂亮,也不過時:

          深色為主的醫療類App

          健康與鍛煉應用程序-作者: Saepul Rohman

          或者用明亮的顏色來增加一些活力:


          移動健身應用-作者: Michal Parulski

          追求個性

          移動App的個性化設計是近年來最顯著的設計趨勢之一。某些功能需要適應特定的用戶模式。

          這樣設計的目標是幫助用戶更地利用App解決他們的問題。這個系統提示了一個人接下來要指示的操作,否則這些可能會被忽略。要做到這一點,必須識別和分析用戶特征,并通過數據跟蹤用戶的行為變化。就像每個人都有自己不同的身體狀態一樣,他們也希望自己使用的App能根據他們的身體狀態提供相應的差異化體驗。即使不是醫療保健行業,也有33% 的客戶會因為個性化不足而放棄某款產品。

          在醫療App設計中,個性化定制選項有很多: 顏色主題、通知、交互元素、使用 AI 創建個性化推薦等等。

          最大化可訪問性設計

          易訪問性設計對于每個App設計都很重要,特別是醫療App。

          醫療App的用戶通常有不同程度的視力和聽力,年齡,身體和心理障礙。醫療App的功能設計需要讓不同的用戶在使用過程中都有比較好的用戶體驗??紤]不同用戶的局限性,并幫助他們努力克服局限性帶來的負面影響非常重要。例如,暈動病患者不太喜歡過多動效。

          這并不意味著在醫療App設計中只能有兩種顏色,所有的字號都必須非常大,但這確實意味對于醫療App,設計師會面臨更多挑戰。不過這是一個額外鍛煉機會,而不是負擔。從WC3的網頁內容無障礙指南開始,使用像這樣的色盲模擬器。

          App無障礙設計的例子: 把主要元素放在拇指區,不要忘記選擇改變視圖為水平模式,字號需要更大,等等。


          色盲模擬器-作者: keithar

          積極態度的力量

          醫學不僅復雜,而且通常讓人望而生畏。比較聰明的設計手法是讓你的應用看起來和醫學毫無關系。這樣可以消除人們對醫學壓力的刻板印象,讓用戶體驗更加愉悅。

          比如在用戶使用的不同階段運用積極的文案、有趣的圖片、舒緩的顏色或其他元素。醫療App界面設計中的圖片和圖標需要能夠用戶調動積極、愉快的情緒,營造一種無痛感和安全感。


          冠狀病毒APP-作者: Mahdieh Khalili

          不要將App設計成網頁

          在有醫療網站的情況下設計醫療App,老板甚至是設計師可能會將網頁頁面復制到App當中,這樣通常會導致用戶放棄使用App。

          移動端和網頁端的交互存在一定的差異性。手機的物理尺寸比電腦屏幕小。在手機上,我們的任何交互都是通過手指來完成,所以不愿意輸入冗長的文案,同時期望產品運行得更快。

          在大多數情況下,人們使用網站獲取信息,使用App完成工作。此外,App集成了手機的功能,比如加速器和攝像頭,使App的設計不同于網頁。

          健康醫療應用-作者: Grace Saraswati

          適得其反

          保持吸引力與功能平衡都很重要。醫療保健應用程序必須不能分散用戶對其內容的注意力。仔細看看上面的要點,注意好分寸就行。

          圖形元素、包括動效,應該始終履行他們的使命,即數據輸入,并說明微交互的用戶與系統,而不是僅僅只為了使一個應用程序看起來很炫酷。

          不要過度使用漸變和陰影,只將用戶的注意力集中在主要文字信息上。只使用一種字體,你可以通過改變字體的大小和其他特征來改變它,比如斜體、粗體。

          多使用簡單的配色可以獲得更清晰的品牌信息和導航。


          健康與活動跟蹤互動-作者: Dibbendo Pranto

          抄還是不抄?

          你可能會在某個時候想,如果覺得抄這個方案有用的話?是不是應該拿一些成功的競爭對手的應用程序復制一份。

          其實,照抄其他產品是不明智的行為,因為他們的設計可能很容易就不夠好。你最終可能正好抄了競爭對手的錯誤方案,從而阻礙未來應用程序市場運作。

          另一方面,你肯定應該對其他應用程序進行分析,進行競爭對手的研究。一個應用程序應該與用戶以前使用其他應用程序的經驗相關。如果事實并非如此,而且你添加了太多的原創性,那么使用這個應用程序的用戶就會覺得很麻煩,用戶也不會容忍“一切都錯了”的設計。蘋果和谷歌都有人機界面指南和材質設計。

          用戶把大部分時間花在其他事情上 ——Jacob’s Law

          有必要根據你的品牌、服務和產品的具體情況進行設計。好比如一個健身APP與一醫療APP,兩者使用方向有很大的差異。所以說必須完全符合目標受眾的要求、細節,以及應用程序的主題情況進行針對性設計。

          藥物提醒程序-作者: Martyna Zielińska

          實用性測試

          最后,要記住最重要的一點,每個設計師都可以認為這個決定是否合理。他們可能會對應用程序的架構和導航的一致性,深思熟慮的設計,以及最重要的實用價值深信不疑,以至于完全忘記了通過實踐進行測試,設計師可以提高他們的同理心水平,更好地感受客戶的需求。但事實上,這種陷阱會給應用程序帶來很多負面影響。

          只有在分析了與用戶與應用程序界面交互相關的數據之后,才能得出結論。多進行一些測試將有助于及時地獲得反饋,解決應用程序中的所有可出現陷阱一樣的場景。

          積極的用戶參與是成功的關鍵。在年齡、職業、地理位置、性別、文化和宗教背景等方面,選擇盡可能接近目標受眾的相關測試對象。越接近越好。讓他們執行你的應用程序的主要功能并收集反饋。


          病歷本App應用-作者: Alex Samofalov

          最后

          設計不單單是討論顏色搭配和字體的運用,而是能夠帶來價值和解決業務問題。健康和醫療類App是一個敏感而富有挑戰性的課題,需要特別關注。設計師們一直在努力平衡醫療應用程序極高的安全性和可用性要求與其界面的美學性,經過深思熟慮體驗和用戶界面設計成就一個很好的醫療類工具,讓用戶在一個簡單和直觀的界面的幫助下參與使用。

          文章來源:花火圓桌(ID:huahuoyuanzhuo)  作者:Kate Shokurova

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

          10分鐘帶你看懂支付寶的交互設計(首頁篇)

          周周

          支付寶作為一個“簡單、安全、快速”的支付工具,其交互設計與其他產品有何不同呢?不同的原因為何?

          這篇文章是《10分鐘帶你看懂支付寶的交互設計》的(一)首頁篇,后面還會繼續更新。

          下面進入正文:

          一、了解支付寶的產品定位

          體驗操作系統:手機iPhone6s;

          支付寶版本號:10.1.58;

          在開始產品分析前,我們先來看看支付寶的產品定位。

          所謂產品定位,包括以下三方面:使用人群、主要功能、產品特色。如圖1所示:

          圖1  產品定位

          從百度上支付寶的網頁介紹(圖2)和百度百科(圖3)的介紹中,可以看出支付寶的產品定位為:致力于為廣大用戶提供“簡單、安全、快速”的支付解決方案。

          那么支付寶的產品定位可分解為:

          • 使用人群:廣大用戶;

          • 主要功能:支付;

          • 產品特色:簡單、安全、快捷。

          圖2  支付寶網頁介紹

          圖3  百度百科介紹

          二、整體分析

          當用戶打開支付寶,看到的第一個界面,就是支付寶的歡迎界面,支付寶的歡迎界面很有特點——停留時間很短(因為時間太短,導致我無法成功截屏,所以這里就不放圖了)。為什么支付寶的歡迎界面從來不像其它APP(如抖音等)一樣會有一個廣告呢(如圖4)?

          這與我們之前提到的支付寶的產品定位有關,支付寶作為一個“簡單、安全、快速”的支付工具。當用戶打開它時,多數場景下,都是用于支付,作為一個以“快速”為特色的工具類產品,就限制了它不能在歡迎界面做太長的停留,也不能做廣告(盡管這種廣告的收入很大),因為這樣會造成用戶極大的不舒適。

          舉個例子,當你早上急急忙忙的起了床趕去教室上課,在食堂買早餐時,打開支付寶付款,(原本你的內心就很著急)卻還要像其它APP一樣看一段廣告!我想你此時一定會默默的罵馬云,并且心里會慢慢開始對支付寶產生一種厭惡的情緒。

          如果你有一天看見支付寶歡迎界面都開始做廣告的時候,請相信我,支付寶一定活不到102歲那一天!

          圖4  抖音歡迎界面的廣告

          任何一個成功的APP,用戶進去見到的第一個界面,一定是該產品最想讓你看到的界面,也是存放產品主要功能的界面。在支付寶中,它的首頁就是最主要的界面。

          從整個支付寶APP的布局來看,底部采用五個Tab導航,分別是首頁、財富、口碑、朋友、我的,當處于相應界面時,底部導航會變成支付寶的品牌“藍”(圖5所示),這個設計有三個作用:

          ①在視覺上與其它導航相區別,表示用戶當前所處頁面;

          ②利用品牌的顏色加強用戶對品牌的認知;

          ③增強APP的界面一致性。

          圖5  支付寶底部導航

          在首頁這一界面,從整體看,總共被劃分為了六個板塊,從上至下分別是核心功能區、擴展功能區、信息通知區、活動展示區、其它產品區、導航欄(如圖6)。

          整個頁面布局清晰,因為是以塊狀來劃分層次,可擴展性也比較強(可以根據需要劃分頁面層次,同時界面改變也不會太大,不會影響用戶的正常使用)。

          在未來,如果支付寶需要發展其它重量級產品,就可以很方便的加入首頁。(這里教大家一個方法——如何看出一個界面的模塊劃分,只需要把眼睛瞇起來,不去關注內容,而是關注框架,就可以輕易的看見該界面的層次結構了。)

          圖6  支付寶首頁層次劃分

          三、核心功能區

          我們按照從上到下的順序來分析支付寶的首頁。

          核心功能區位于頁面頂端,是視覺焦點,又有一個支付寶的品牌“藍”作為底色,一下就成為了視覺重心,很顯然這個位置應該存放支付寶的主要功能,也就是支付功能。

          支付寶的支付功能包括哪些呢?限于技術,目前支付寶主要通過識別二維碼進行支付,所以掃一掃自然就是最常用的功能,所以放在第一個,付錢、收錢隨后,敢預言,不管以后支付寶的版本怎么改,他的支付功能始終位于首頁,而且是首頁的視覺焦點。為什么此處卡包也置于頁面最顯眼的位置呢?

          與支付寶的很多活動有關,因為很多商業活動都靠贈送各類卡卷來實現(也就是所謂的商業需求)。將搜索框置于頂層,看似搶了核心功能的風頭,其實不然,設計師巧妙的在這里進行了處理,首先將搜索框的大小變?。ǖ遣挥绊懹脩舻恼|c擊),然后將掃一掃那一欄的圖標變大,將字號也變大,視覺重心依然回到了掃一掃那一欄。但是為什么會將搜索框置于如此明顯的位置呢?

          首先隨著支付寶的功能越來越多,由于頁面的第一層級裝不下,就會根據優先級進行排序,將優先級靠后的功能放入后一層級,因此很多功能的層級就會比較深。有了搜索框之后,用戶就可以通過首頁的搜索,快速進入用戶需要的功能(用戶需求),另外一方面,又可以在搜索框進行商業推廣(商業需求)。

          將通訊錄也置于顯眼位置,是支付寶對于社交功能的探索,從此處可以看出,支付寶對于社交功能的渴望。加號打開是掃一掃、收錢、乘車碼、智能管理,將掃一掃置于該層級,可能是為了方便單手操作的用戶,這樣不管哪只手操作,都能方便的進行使用。

          四、擴展功能區

          擴展功能區,也就是支付寶擴展業務或第三方合作方入口,4*3的設計,與上方掃一掃、付錢、收錢、卡包對齊,增加了整個頁面的整齊度,該區域的圖標、字號,都相應的減弱,避免喧賓奪主。

          大家注意看(圖7),最后一個圖標是更多,擴展性極強,只要有第三方想和支付寶合作,馬云只需要增加一個廣告位,然后笑著用自己的支付寶收錢就好了(我猜后期版本,支付寶會把“更多”這個按鈕做的比其它按鈕更搶眼一點,因為這是一個很大的流量入口,能夠滿足很多商業需求)。同時,該區域還有一個很好的交互方式,當用戶進行長按圖標,就可以進行調節,給了用戶自主權。

          圖7  首頁—更多

          五、信息通知區

          在信息通知這一欄,當有新的信息時,左邊的螞蟻會拿著一個信封微微擺動,不注意根本看不見,但是當你觀察到了,你就會覺得好可愛,支付寶好用心啊,心里默默就會給支付寶一個好評,這就是情感化體驗,給用戶一個小驚喜。同時右邊有一個小紅點,會誘惑你去點擊,去閱讀信息,當你閱讀了信息之后,就只有螞蟻的觸須在動,信封就消失了(見圖8)。

          圖8  信息通知區

          六、活動展示區

          在活動展示欄(圖9),雖然這個條目已經處于視覺中心以外,但是,聰明的設計師絕不會浪費任何一個可以利用的界面,于是設計師就利用輪播的圖片來吸引你的眼球,輪播的好處在于,一方面可以播放多個廣告(擴展性也比較好),另外一方面運動的物體可以吸引用戶的眼球(這個原理源于在古代我們的祖先為了安全,總是會關注到運動的物體,這也就是為什么大多數網頁中的廣告都采用動畫的形式,就是為了吸引你的眼球,去點擊它。

          圖9  活動展示欄

          七、其它產品區

          其它產品區,就是一些活動和商業推廣的入口(這就純屬于商業需求,為別的產品引流)。

          說一下這里的設計吧,這里的“惠支付”字號比上面都還要大,是不是會搶了風頭,答案是——不會,因為這已經是頁面底端了,如果再不通過這種方式來強調這個版塊,可能用戶根本就看不見了。

          同時,設計師利用親密性原理——在視覺上挨得近的我們會認為是一組,而沒有采用實線來分割,使整個界面簡約了不少(圖10)。

          圖10  “惠支付”

          在首頁,為了讓用戶知道下面還有內容,故意漏出一半的內容,告訴用戶下面還有內容,同時,當整個頁面下拉時,掃一掃、付錢、收錢、搜索,加號的圖標就會置于頁面上方,驗證了我之前分析的一些結論(核心功能始終置頂顯示、始終放在用戶一眼就能看見的地方),當滑到低端時,一句文案“我是有底線的”,讓人感覺這個APP還有一點人性、俏皮可愛,同時明確的告訴用戶該頁面已經結束了。

          可能是因為支付寶是塊狀的結構,為了避免發生誤觸,所以進行頁面切換時,并不支持左右滑動切,只能通過下方Tab導航進行切換。

          八、總結

          從對支付寶的首頁界面進行分析,可以看出,在進行交互設計時,不僅要重視用戶體驗,同時要兼顧商業需求(當然還有技術,但是這里我不做表述),在兩者發生沖突時,要考慮兩者的優先級和重要性,綜合考慮,尋求一個最佳點。

          比如歡迎界面的廣告,支付寶就永遠不能做,因為這樣做下來用戶體驗會很差,可能會流失一大批用戶,但是支付寶可以在APP內接入廣告來實現商業需求,這就是考慮用戶體驗、商業需求之后做出的決定,從而設計的界面,是一個很好的案例。

          很多時候,交互設計更像是做減法,知道哪些該減去,而不應該做加法,把所有功能胡亂疊加,導致用戶體驗極差。用戶體驗差的產品,商業價值一定是無法實現的。

          當然,除了像12306這種強勢的APP……

          文章來源:人人都是產品經理     作者:交互設計汪

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

          日歷

          鏈接

          個人資料

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

          存檔

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