92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

如何構建和驗證設計風格?來看高手的實戰案例!

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

 

文章目錄

  1. 品牌定義
  2. 品牌映射(設計風格構建)
  3. 驗證方案設計
  4. 空狀態設計
  5. 驗證實施及結果
  6. 遺留問題及后續關注

品牌定義

此前,除了產品名及代言人的形象露出外,產品層面尚未有過明確且體系化的品牌概念傳達,因此無既有的概念或相關信息可遵循或參考,需從頭理清。

1. 收集相關數據

如上所述,由于目前所處階段,本次將以品牌自身單方面輸出為主,因此我們訪談了相關業務負責人,探討了產品當前在服務層面關注的方向以及力爭為用戶營造的體驗。

同時,我們也想了解用戶在使用安居客過程中所形成的總體印象并將其作為補充,因此,抓取了應用市場上安居客用戶的正面反饋并從中提煉出高頻詞匯。

△ 用戶評價詞云圖

2. 建立品牌心智地圖(Mental Map)

通過繪制品牌心智地圖,可將以上零散的信息分類及提煉,以此來組織并簡化我們對產品品牌認知的心智結構,最終描繪出一幅由品牌內核所延展出的圖景,其組成可以是品牌的各個方面,凝練了關于一個品牌之所以是一個品牌的構成。

△ 品牌心智地圖

3. 提煉品牌精髓(Brand Mantra)

進一步的,從品牌心智地圖中提煉出構成品牌的核心部分,分別從品牌功能(Brand Functions)、描述性修飾語(Descriptive Modifier)及情感性修飾語(Emotional Modifier)這三個維度去詮釋。

品牌功能描述了產品或服務的性質,即品牌能夠向用戶提供的體驗或益處的類型;描述性修飾語將進一步分類及明確品牌所傳達出樣貌之性質;情感性修飾語則解釋了給用戶帶來的益處是什么。

對安居客而言,作為連接房地產行業中中介與需求端的平臺,其本質上是一個信息服務平臺;而由其對信息的深度、廣度及有效性的努力以及對信息傳達效率的追求可看出,其力求提供的是一種專業的信息服務;結合監管機制的建設力爭為用戶營造一種可靠、安心的體驗。

△ 品牌精髓

小結

通過以上步驟,基本能夠逐漸抽象出所要表達之物??珊唵螌⑸鲜鲞^程的目的理解為定義視覺風格的方向。

△ 品牌概念抽象過程

品牌映射(設計風格構建)

明確所要表現的對象后,便可開始構建從內容到形式這一轉化過程,最終構建出契合品牌的設計風格。

1. 文案風格構建

首先,嘗試將品牌概念人格化,以作為后續推導過程中的燈塔,避免偏離航向?;谒釤挸龅钠放凭瑁堇[出以下設定:

  • 品牌性別:男性
  • 品牌角色:專家
  • 品牌性格:沉著、從容
  • 與用戶的關系:安居客之于用戶就像是一位專業、貼心的「私人顧問」,在用戶遇到問題時沉著冷靜地為其指點迷津,在用戶產生疑惑時體貼入微地為其答疑解惑。

改版前文案風格分析

現有方案中可窺見以下特征:

△ 改版前文案風格

設計策略

為了貼合所設定的人格化形象,筆者制定了以下策略來調整文案寫作風格:

  • 以書面語語體替代口語語體——遣詞更豐富、正式。如:挑選房源(去看看房子);樓盤優惠活動供你參與(快去看看哪些房子有活動吧);查看樓盤詳情(你還可以看看其他的哦~)。
  • 以平鋪直敘的敘事風格替代行銷口吻及俏皮語氣。如:除了旁觀,你也能發表自己的真知灼見(快參與你喜歡的話題發表評論吧?。?;可查看全部樓盤資訊(先看看其他人的動態~)。
  • 構建統一的句式結構。

此前,空狀態經手不同設計師,且團隊中尚無可遵從的寫作風格指南,原有文案多少顯得混雜零亂,而句式結構也是文案風格的構成要素,因此,筆者嘗試構建統一的句式結構來滿足現已發現的五十多處以及將來仍會不斷產生的空狀態在表達時的需求。

將重新設計的所有文案按句式結構的異同分類,從中可發現明顯的規律,其對應的正是針對不同場景所使用的差異化策略,對于單獨出現的句型,在分析其所屬場景及所需引導策略后,判斷其是必要句型還是可復用其他句型,最終形成了能夠覆蓋當前所有場景的五種句式結構,可指導未來同類場景的應用。

△ 句式結構構建過程

2. 視覺風格推導

風格構建

構建思路:以品牌精髓中的情感修飾語及描述性修飾語作為核心意象,同時解構對應表現形式的形態要素,其后分別以形態要素為對象將核心意象進行演繹。由于品牌精髓所處抽象層次較高,無法直接指向具體表達方式的選擇——再以得到的具體情感意象作為標尺,尋求契合的表達方式。

色:將品牌精髓以顏色能夠觸發的感受為視角進行演繹,并根據顏色與人類心理感知的映射關系確定基本色相范圍。

而對顏色具體的定義可在相同的表達訴求下進一步控制色彩要素來獲取,如中性色的視覺表現在于色相上的控制,我們通過在色相上加入藍來獲取「高級感」;而由于安居客本身的品牌色即屬綠色,因此我們直接選用;對于藍色,考慮到實際應用時與綠色的搭配,在色相上融入綠色使兩者呈現時能夠相互融合。

△ 色的定義

形:在實際建構「形」的表達方式與情緒感受的映射關系時筆者發現,不同于顏色的千變萬化,「形」在各維度的表達方式上更多的呈現一種二元對立的局面,這種情況下,不對品牌精髓進行演繹亦可對表達方式作出選擇。

△ 形的定義

風格應用

色的應用:由空狀態設計中對所有場景的意象設定,可對場景刻畫中所需的元素進行如下分類:

  • 光影
  • 背景

針對插畫,且處于空狀態這種非正常場景,當前濃郁的品牌色不便直接使用,因此從明度層面對其進行處理,以得到適用的顏色。

△ 品牌色的處理

人作為場景構建中的組成部分,并非主體,且需要與物形成對比,因此使用白色。

△ 人的顏色應用

物在場景的構筑中承擔了以下角色:

  • 與人的交互形成行為意象的傳達;
  • 作為對環境的勾勒,構成對場景的交代或環境意象的傳達。

對應到結構,分別為:

  • 作為主體的單一物件;
  • 構成近景與遠景的不同物件。

對于前者,以中性色呈現其主體,主色點綴于次一級元素;而后者,遠景作為主要場景元素施以中性色,近景混合應用主色。如此,既保證情緒色的露出,也豐富畫面的細膩程度。

△ 物的顏色應用

光影

  • 背景光:在表達虛無的場景中,以線性漸變來表達此概念,此時混合應用兩個主色來呈現調性。
  • 光照:對于自然光的呈現,另取暖色來表現光影,進一步增加質感。
  • 投影:陰影當使用中性色。

△ 光照的顏色應用

背景:白色或明亮的顏色更讓人有安全感,且我們希望圖示能融入界面中,因此設定為白色。

形的應用:元素形狀、元素方向、主體占比、主體位置。

元素形狀:避免銳利的切角,更多的用矩形及圓形這類相對更穩定的形狀。

△ 元素形狀定義

元素方向:以水平面或不同面構成的穩定體系為主,避免單獨應用斜切面。

△ 元素方向定義

主體占比:占據畫面中較大比例。

△ 主體占比定義

主體位置:置于畫面中心偏下。

△ 主體位置定義

驗證方案設計

1. 驗證思路推導

我們的設計目標是形成契合品牌的視覺風格,若目標達成,用戶應當能被具備明確視覺風格的界面激發相應感受,從而可得到如下測試過程:安排被試瀏覽相關界面,測量其情感感受。

那如何測量人的情感呢?

在對情感測量方法的搜尋中,筆者發現了心理測量(相對的是生理測量)中常用的語義差異量表(semantic differential scale),其由若干表達情感體驗的詞匯和量尺組成,由用戶根據感受程度選取相應的等級,從而獲取到情感信息。

最終,可得到如下驗證思路:

△ 驗證思路

2. 樣本量設定

定性研究方法并非如定量研究方法那般天然具備確定樣本量的統計技術,目前也尚無通用的技術,業界較為熟知的 Jakob Nielsen 所提出的「可用性研究只需測試5個用戶」的說法,由于其限于可用性研究,「測試5個用戶」的說法也只是總結性的論述,實際也需酌情判斷,因此,為了確保獲取足夠的數據,筆者嘗試尋求更和通用的解決方案,最終鎖定在了市場研究公司 Research by Design 的 Donna Bonde 所提出的指南(Qualitative market research: When enough is enough)。

筆者認為其建設性在于:

  • 從不同研究方法的用途出發,論證了定性研究適用樣本量的數量級迥異于定量研究的合理性;
  • 從實際的操作過程來探究樣本量與所發現問題數量的關系;
  • 在上述論述范圍內,再去嘗試解構對樣本量構成影響的因素,這使其能夠根據具體情況進行相對的樣本量估算;
  • 這種思路,使得其脫離了具體的使用場景——所使用的具體定性研究方法,單純針對「樣本量的設定」這一問題本身,這使其具備了相當的通用性。

因此,筆者參照其分析進行了對樣本量的設定。先根據實際項目及團隊情況,對相關因素進行賦值:

△ 樣本量設定

再根據以下公式可得出適用于本項目的樣本量:

3. 量表設計

量尺設計

量表類型:由于對評價對象提供了對立的形象,自然需要使用雙級量尺,即要求被試從0點開始向兩端方向發展的數值中做出評選。

標度數:設定標度數時需平衡兩點,足夠精細,充分滿足被試表達的需求;控制數量,避免選項太過瑣碎。

常用的標度數中,七點評分量表相比五點評分量表能夠得到更準確的結果,而11點量表所能收集到的數據雖然最接近正態分布,但對被試來說成本也會隨之增加,增大疲勞效應,因此,筆者最終選擇了七點標度:

△ 量尺標度數

修飾詞:對于量尺的數字,需要通過形容詞來賦予意義,否則被試很難進行判斷;且修飾詞需在意義上和相應數值對應,這似乎很難實現,幸而前人已對不同量尺形容詞就其表示的程度水平進行過系統的評估,使得筆者能直接繞過這個問題。

筆者按照所用的標度數,選擇了對應能產生等現間距的修飾詞:

△ 量尺修飾詞

測量對象的語義轉化

基于輸出的文案風格與視覺意象及其對應策略,可分別確定具體的測量對象,再以此設定能夠顯示其對立形象的形容詞:

△ 語義轉化過程

量表結構設計

為了避免語義啟動造成被試評價時產生偏差,需將有關系的條目隨機擺放,并將褒義詞和貶義詞分布在量表兩端而不是互相集中在一邊,以起到語義抑制效果,避免被試在作答前不經思考。

另外,在第一輪測試中,筆者發現不止一位被試在對某一條目評價時混淆了其描述對象,除了其個人認知水平外,某些條目在當前語境下所展現出的描述關系依然不夠明確,因此筆者按照條目的描述對象對其進行了分類,并說明其描述對象。

△ 量表結構

空狀態設計

關于空狀態本身,相對于本文所涉及的其他內容,其作為范式更被設計師所熟識,但在設計策略及視覺表現上似乎又并非如想象中簡單。

「空狀態」之稱乃立足于表現層之觀察,其承載的實際是若干種場景,反饋「空」只是其中的一種也是最后一種手段,條件允許的情況下,應當首先考慮如何去引導用戶。因本項目落地于空狀態,上述其他設計策略不在此展開,下文將詳述空狀態的設計。

1. 表現空狀態

空狀態內容

空狀態由兩部分構成——反饋和引導?;诋斍扒榫车姆答伳茏層脩臬@悉所發生的事;在此基礎之上,還需提供引導以幫助用戶完成最終的任務。

反饋:反饋通常由圖像與文案組成,其風格應契合品牌調性,其內容除了基本的反饋信息外也應更多地考慮如何引導用戶。

引導:此處的引導指的就是最終根據實際情境提供的操作,如無可支持的功能,可以文案形式進行表達。

空狀態結構類型

針對安居客產品中的場景,除了完整的空狀態結構,對于模塊化的頁面,由于模塊本身的高度有限,在數據為空時,只取描述文案作為反饋,并在樣式上弱化按鈕使其在當前結構下保持原有的視覺權重,以其為另一種空狀態結構。

△ 空狀態結構

視圖結構類型

空狀態本身的結構和布局應當一致,但對于平臺型產品,伴隨著業務復雜性的是頁面結構的多樣性,這使得空狀態呈現于不同容器中,為達到一致的視覺效果在視覺輸出環節就需要針對性地定義布局邏輯。

而上述所謂的一致效果即為空狀態模塊應當居中展示于所有容器中,但由于空狀態模塊的重心并非在其物理中心上,因此為達到視覺居中的效果,在將其物理居中的基礎上還需在垂直方向上作相應調整。

完整視圖:視圖的高度隨設備而變化,因此使用相對定位,布局邏輯即為將空狀態模塊相對于視圖中心垂直上移固定距離。

△ 完整視圖的布局邏輯

模塊與列表:對于相近的模塊,可統一其高度(無法通用的場景還需另外定義高度),此時可使用絕對定位,布局邏輯即為空狀態模塊相對容器頂部保持固定距離。

△ 模塊布的局邏輯

對于列表,由于其高度不固定,在空狀態時常規的處理方式是將空狀態置于背景之上或 cell 之中,前者不適用于基于白色背景的空狀態設計,而后者的形式與其實際層級關系不符,因此我們最終選擇了添加 view 來實現效果,如此就需定義高度來滿足此種場景中的所有情況,其布局邏輯也就與模塊中所應用的相同。

2. 圖示的設計策略

圖示的設計策略核心在于其內容的表達即意象的設定,常規的以空對象為意象的做法,無更多信息傳達,亦無助于信息傳達,是一種徒增冗余的可視化;以情緒為意象的做法由于其抽象程度和表意當應用于所有空狀態,這種重復容易讓用戶厭煩且無趣;而近來越來越多見的場景化表現形式,設計者對于意象的設定依舊未脫離于上述范疇,更有甚者,一股腦鉆進表現形式中不可自拔,竟無明確意象的設定。

基于上述分析,筆者認為更合適的做法是:內容上表現所引導的行為(如有),形式上以場景的構筑間接表達意象。此作法更豐滿地引導了行為,表達方式上也更具感染力。

根據場景筆者設定了三類意象:

  • 平臺無內容:虛無
  • 用戶無操作:行為
  • 異常情況:環境

對于「虛無」的概念,即以寫實的方式在空間層面描繪出來,并讓人置身其中,營造出一種孤寂的氛圍。

△ 「虛無」的意象表達

對于行為及環境,筆者將抽象的概念具象化,以其為意象。以「用戶未曾對相關對象發表評論」為例,對事物進行主觀或客觀的闡述是一種抽象的概念,難以直接可視化,因此筆者將視角落在了行為的表達或實施形式上,從中選擇了「書寫」這一動作作為意象,同時在構建場景時,打破人和物的比例關系并夸張處理,形成一種趣味性的觀感,進一步觸發用戶的共情。

△ 「評論」的意象表達

其他場景示例:

△ 其他場景示例

驗證實施及結果

定性類驗證方法相對于埋點數據這類定量方法附帶的優勢是可在設計過程中幫助改進設計,因此,整個過程中我們根據測試結果和測試過程中遇到的問題迭代著設計方案以及測試流程本身。

第一輪測試中,被試被觸發的情感感知與我們的目標方向相反,且還發現了超出我們預期的視覺可用性問題;文案方面,多組條目用戶無法感知(本身為中性對象除外)。

△  第一輪測試輪廓圖

具體分析如下:

△ 第一輪測試結果分析

經過對這些結果和反饋的分析后,我們著手調整視覺表現:進一步地分解插畫中視覺表達構成的元素,并探究不同的處理手段與受眾感受間的關系,以此摸索達成目標風格的設計策略。并在此基礎上,調整對應的形容詞詞對,使其更的表達對應的情感感受。

△ 迭代前后方案對比

其后,我們選擇了幾個具有代表性的場景進行了應用便進行了第二輪測試,在得到了命中預期范圍的測試結果后,再對其他頁面進行了統一調整。

△ 第二輪測試輪廓圖

在所有方案產出后,針對整體視覺和文案風格進行了第三輪測試,最終的結果基本都達到了預期,測試到此結束。

△  第三輪測試輪廓圖

遺留問題及后續關注

1. 明確「品牌精髓」的定義及應用

在撰寫此文的過程中,伴隨著對品牌精髓產生了更深的理解,筆者對于描述性修飾語及情感性修飾語的定義及提煉方式產生了疑問——如「專業」一詞作為描述性修飾語是否會顯得寬泛?且由于品牌精髓作為后續加工過程的源頭,決定了整個加工過程的順利和準確,因此,對其的準確理解和應用顯得尤為重要。

2. 進一步探索情感轉換及其應用

在有形產品設計領域,早在上世紀八十年代初便開始關注人的感性需求及意象與產品設計的形態要素間的關系,并形成了體系化的理論——感性工學,并從日本汽車行業的應用滲透到了日本各個產品設計領域,進而逐漸傳播到西方國家及中國等國家。但在「用戶體驗設計」行業,尚停留在對「情感化設計」一詞朗朗上口卻又渾然無知的階段。

而目前業界所「熟知」的 Donad. A. Norman 教授提出的三層次理論——亦是情感化設計領域除感性工學理論外另一個被公認的理論體系,更接近于一種世界觀,解決「是什么」的問題,而非方法論;解決「怎么辦」的問題。這和 Jesse Jame Garrett 提出的「用戶體驗要素」在軟件產品設計領域知識框架中的定位類似,因此,在實際應用于交互設計與界面設計時還需彌補中間的斷層。

借此次空狀態改版,筆者在品牌輸出的過程中摸索著情緒感受與設計風格的映射關系,形成了初步的構建思路,且在關于感性工程的相關文獻中得到了印證,但在風格應用層面,此次只是初作嘗試,尚存在很大優化空間。未來,將以此為基礎針對界面進行嘗試,并在情感轉換層面進行更深入的挖掘與探索。

3. 嘗試建立視覺情感語義詞庫

在設計量表的過程中,筆者明顯感受到為測量對象設定形容詞詞對的困難——準確把握測量對象與對應形象間的聯想關系,甚至在實際測試過程中基于用戶的測試結果和反饋,筆者持續迭代著問卷條目及對應形容詞詞對的選用。

而以筆者目前對語義差別量表的理解和應用,其作為「測量某一客體對受眾的意義」的工具,對于視覺風格的構建將會是重要的設計驗證手段。

基于此,有必要尋求并建立一套視覺情感語義詞庫,以保證量表設計的有效性。

4. 確認情感測試中建立基準線的必要性

在測試過程中,筆者明顯覺察到不同被試對相同概念顯著的理解差異,大致分為如下兩種情形:

  • 認識不一樣:如某被試對于文案是否有趣的判斷標準為是否直白。
  • 錨定偏差:如某被試認為文案就應該是比較俏皮、小清新的,當他看到的方案沒達到其預期時,便會認為其是沉悶的——實際上是中性的。

這直接影響到數據收集的準確性。

筆者當下的反應是應當對被試先建立基準線,從而能夠對數據進行加權處理,但鑒于需要針對問卷條目設計對應的問題及素材,筆者選擇了更敏捷的做法——把通過訪談所認定的存在明顯偏差的結果作為異常值剔除出最后的統計。

因此,如后期將語義差別量表列入針對視覺風格構建的標準驗證方法之中,為保證數據的準確性,有必要對是否加設「建立被試對相關概念理解及程度的基準線」這一環節進行研究和確認。

本文以項目為描述對象,因此,并未冗述所涉及到方法的更多細節(諸如其概念、優劣、使用原則、注意事項等),待時機成熟時我們會陸續輸出相關方法及工具(如定性研究中樣本量的設定、量表中量尺的設計、訪談中的注意事項、語義差別量表的設計和使用等)的使用指南,包括封裝好的文檔工具,望能拋磚引玉。

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


這些UI和UX趨勢,在2019年最值得關注

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


當你的產品短時間內無法使用時,如斷網、跨平臺無法分享等等。用戶可能會因而產生挫敗感,產生焦慮不爽的負面情緒。如何安撫用戶情緒?如何拉近用戶和平臺的距離?如何改善或提高用戶體驗呢?本期案例,就分享一些有趣的小彩蛋、微交互,讓你靈感爆棚!

往期回顧:

  1. 每月更新!10個記憶深刻的產品設計神細節?。?)》
  2. 《每月更新!10個記憶深刻的產品設計神細節?。?)》

文章目錄

  1. 我見過最贊的招聘啟事,來自程序員的別樣浪漫
  2. 斷網環境下,Google瀏覽器頁面的小恐龍可以打游戲喲
  3. 「親戚計算器」?原來小米還有這么有趣的功能設計
  4. 揉成一團的廢紙,會讓你聯想到「刪除」這個動作么?
  5. 支付寶的小無奈
  6. 優優教程網首頁里藏著的可愛表情,你發現了幾個?
  7. 2233娘真是貼心的小姐姐(*?▽?*)
  8. 讓人意想不到的團隊展示hover效果
  9. 時間走著滴答滴,iPhone的時鐘藏著自己的小秘密
  10. 有道詞典也賣萌,一句有溫度的文案會有怎樣的力量?

我見過最贊的招聘啟事,來自程序員的別樣浪漫

如果不是互聯網從業者,大概你永遠都不會發現百度主頁的代碼控制臺(console)里藏著那條最浪漫的招聘啟事。因為只有擁有開發網頁習慣的人,才會在瀏覽喜歡的網站時按下F12 調出網頁代碼查看。所以這條百度針對程序員的招聘被寫進網站首頁代碼的console里,可謂是絕對精準的招聘廣告投放了。

據說這個彩蛋的設計并非百度的獨創而是 Google 先使用過的「小心機」,可是由于無從考證,所以小編并不能確定是哪家公司有才華的程序員小哥哥想出了這個妙計(知道的大神麻煩留言告知哦)。

但不得不承認的是,很多時候我們都對程序員有太多刻板印象的誤解。那些看起來「木訥無趣」的程序員們認真起來,真的可能是最浪漫的人呢。

斷網環境下,Google瀏覽器頁面的小恐龍可以打游戲喲

Google Chrome 是一款由 Google開發的 Web瀏覽工具,大氣的界面設計、良好的使用體驗以及強大的插件擴展功能,使其受到大量用戶的喜愛。在完善產品功能的同時,Google 的設計師們也不忘花費一些「小心思」讓產品更加有趣味性:在瀏覽器出現錯誤或無網的情況下(想試試么?斷開Wi-Fi或者拔下網線看看),我們會看到這只可愛的像素小恐龍。

小恐龍出現時是靜止的,但只要你按下鍵盤的左右鍵,這只小恐龍就會跑起來,而操控上下鍵它就能躲避路上的障礙物。當出錯頁面變成可愛的小游戲,原本焦慮不爽的負面情緒好像也就沒那么嚴重了。一旦網絡恢復,瀏覽器會自動刷新到你所要瀏覽的頁面。真的是超貼心的設計了。

「親戚計算器」?原來小米還有這么有趣的功能設計

小米計算器內置「親戚計算器」的功能,各種復雜的親戚關系幫你一鍵解決。老婆弟弟的妻子應該怎樣稱呼呢?相信很多人都有過類似的對親戚關系產生疑問的困擾。

梳理親戚關系有時候真讓人頭大,小米手機就很貼心的在系統里自帶了「親戚計算器」。將日常的復雜關系都羅列了出來,真是符合中國特色的計算器設計呢~

揉成一團的廢紙,會讓你聯想到「刪除」這個動作么?

「作文紙條」App對于每日信息與文章的推送有著自己獨特的設計邏輯,如果推送內容用戶當天未讀,系統會將推送內容自動移到「廢紙簍」里。為了讓用戶在瀏覽「廢紙簍」內容時,明確感知到被刪內容與正常內容的差別,躺在「廢紙簍」里的信息視覺上模擬了揉皺紙團的形象。

如同我們在現實生活里,會將寫作時不滿意的內容從筆記本中撕掉,并揉成紙團丟進垃圾桶的行為一般。將用戶熟悉的真實生活里的行為狀態,移植到虛擬的交互設計里,會使用戶與產品的交互過程更形象生動。

支付寶的小無奈

偶然在支付寶的芝麻信用里發現滿700分,就可以免押金租用一些數碼產品了。覺得很不錯想分享這個信息給朋友,就點了一下轉發微信好友,結果發現微信不讓分享支付寶的信息。

本來分享受限的挫敗感讓人心情很不好,但當看到支付寶很無奈的提示文案「微信又不讓分享了,整個人都不好了」,不愉快的心情立馬被逗樂了。相較之前微信分享失敗的一串鏈接,這樣幽默的微文案提示真的可愛多了呢~

優優教程網首頁里藏著的可愛表情,你發現了幾個?

當初在制作優優網首頁的時候,為了不讓 hover狀態(鼠標懸?。┻^于無趣,分別在「靈感頻道」「教程排行榜 」「軟件排行榜」的 hover狀態里設計了不同的3個小表情,而且設計者大有來頭,正是人見人愛、花見花開的美丫姐。

她機靈的調整了圖標狀態后,從后臺數據來看,這里的點擊確實停駐時間長了一些,相信讓用戶會心一笑的同時,也拉近了用戶和平臺的距離感。不妨在你的下一個案例里也試試喲~

2233娘真是貼心的小姐姐(*?▽?*)

登錄網站或應用在輸入密碼時,無論周圍環境如何,我們總會潛意識里產生一絲不安全感。B站對于這個問題的處理方式顯得十分可愛,在用戶登錄賬號輸入密碼時背景里的2233娘會出現雙手捂眼的小動畫。整個輸入密碼的操作其實與其他應用可能并無差別,但因為有了這個蒙眼動作的心理暗示作用,用戶會感到自己的隱私受到保護與尊重從而產生安全感。

讓人意想不到的團隊展示hover效果

drygital設計工作室的網站有著個性又炫酷的視覺與交互效果。團隊展示界面的 hover效果,就讓人意想不到眼前一亮:當鼠標的光標移到單個成員的半身像時,原本正襟危坐的照片會變成另一張,展示該成員個性或喜好的搞怪照片。

原照片展示了團隊成員在工作中嚴謹專業的一面,而 hover效果呈現的圖片則展示了成員們私下生活里幽默有趣、個性鮮明的另一面。這樣的設計不僅突出了團隊成員的個人特色展示,利于團隊的歸屬感與凝聚力提升,也展現了團隊的開放包容與活力創新。

時間走著滴答滴,iPhone的時鐘藏著自己的小秘密

大家都知道 iOS系統的時鐘桌面圖標會始終顯示當前時間,但很少有人關注過時鐘圖標里秒針的走動方式。在常規狀態下,時鐘圖標的秒針會呈現掃秒式地轉動;但當桌面圖標處于長按狀態的晃動效果時,小時鐘的秒針會立馬變為跳秒式滴答滴答地走動起來。

據說這個隱蔽的小細節設計是想表達向傳統時鐘的運行模式致敬的意思。機械鐘秒變石英鐘,你 get到了 iPhone時鐘的小秘密了么?

有道詞典也賣萌,一句有溫度的文案會有怎樣的力量?

似信息崩潰,或加載緩慢的問題,在產品實際使用中實在在所難免,一旦出現,用戶的好情緒一定會受到影響。在這種時刻,一句生動而有溫度的文案就是可以安撫用戶情緒、改善使用體驗的利器法寶。


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

 

產品設計師必備的模態體驗知識

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


很多設計師根據直覺進行產品設計。雖然大部分情況下是沒問題的,但是已經證明了的通用標準可以更好的幫助你從邏輯上構建有理有據的UI解決方案,而不是僅僅依賴于你的直覺。


本文我們將探討UI設計中的模態通用標準,討論為什么僅有兩種類型的原因,并且分析App和網站在將信息體系結構和用戶信息流轉換為直觀的用戶界面是如何失敗的,本文將使用“Purrrfect”這個產品來講解。


兩種基本屏幕類型:模態屏幕、非模態屏幕


基本每個可視化窗口幾乎都屬于這兩類中的一個。為了理解模態與非模態的區別,我們首先要定義模態屏幕。


什么是“模態屏幕”?

模態屏幕示例模態屏幕示例

模態屏幕有不同的形狀和大?。?/span>

全屏模態視圖(左1)

彈出窗口(左2)

氣泡彈窗(左3)

燈箱彈窗(左4)

快訊/通知

...


模態屏幕和非模態屏幕這兩種類型看起來似乎很好理解,它們都從屬于App的主窗口。但是有一個重要的區別:


模態窗口

創建一個禁用主窗口的模式,模態窗口作為前面的子窗口使其保持可見。用戶必須先與模態窗口進行交互才能返回父級應用程序。

 —— 維基百科


大多數模態屏幕,特別是在桌面應用上可以輕松識別,因為它們覆蓋主窗口并且可見:主窗口背景遮罩的彈出窗,彈出菜單和彈出框對話框,燈箱彈框,警告等...


但是移動設備上的屏幕空間有限,這也是移動設備上的許多模態屏幕占據整個屏幕的原因。它們不再保持底層主窗口可見,所以很難將它與非模態屏幕區分開來:


Image title

iOS示例:移動設備上的模態屏幕


兩者的主要區別在于屏幕的交互方式不同。雖然非模態屏幕允許用戶簡單地返回到父級屏幕,但是模態屏幕要求用戶在返回主窗口之前完成操作(示例中為“保存”)或取消當前操作。


非模態屏幕最明顯可視信息便是導航欄(示例中為標簽欄)。即使在子級頁面,非模態屏幕也允許用戶在主導航來回跳轉。另外模態屏幕要求用戶在再次使用主導航之前必須關閉窗口(示例中為“Save ”或“ Cancel ”)。


為什么要使用模態?

模態屏幕解決了一個簡單的問題:用戶容易分心,所以有時候必須讓用戶全神貫注的進行操作。單一的模態屏幕正是要求人集中在單一的任務上,然后再繼續其他操作。


“模態通過阻止人們在完成任務或解除消息或視圖之前做其他事情來創造焦點” 

—— Apple


什么時候應該使用模態?

模態屏幕的規則我們已經了然于胸,與非模態屏幕相比,它能達到的目的是什么,應該在什么樣的情況下使用它呢?


試想一下,我們正在創造一個巧妙而新穎的App:“ Purrrfect ” , 一個小貓數據庫,它允許用戶上傳,查看和評論可愛的貓咪GIF。

Image title

資料來源:https://giphy.com/gifs/tDgXAst2PhIYw


我們App(簡化)用戶流程如下圖所示:用戶打開App,進入幾個可用選項卡之一(我們的小貓數據庫),點擊其中一只小貓(進入詳細的單一小貓視圖),然后點擊評論部分(進入評論部分)。

Image title

Purrrfect用戶流程


另外用戶可以在每個階段執行補充操作。例如他可以在小貓數據庫頁面中將另一只小貓添加到數據庫中,又或者他可以在小貓詳情頁中編輯數據。


如何分辨模態與非模態,其實沒有那么容易,這些只是我個人的經驗總結:對自包含過程使用模態屏幕,對其他所有內容使用非模態屏幕。


“自包含過程”是指每個操作都有明確的起點和終點。此操作有明確的時間范圍,將用戶從一般用戶流中移出,讓他專注于操作,然后再將他帶回到開始的位置。


“需要特定的用戶任務,決策或確認的關鍵信息”

——Google


對于Purrrfect App來說,這意味著主要用戶流不是模態的。但是特殊的限時操作,如添加小貓,編輯小貓和撰寫評論都是模態的。

Image title

在用戶返回主流程之前,可以取消或保存完成所有模態操作。因此模態屏幕使用取消和保存按鈕(或其他類似操作)而不是后退按鈕。如果您的后退按鈕在非模態屏幕中觸發保存操作,您可能需要考慮使用取消和保存按鈕切換到模態屏幕。如果在模態屏幕中有兩個不同的操作,例如取消和保存,則無意義(因為它們會觸發相同的操作)您可能希望切換到非模態視圖。在這種情況下,主導航(例如標簽欄)也應保持在屏幕上可見。


讓我們回到我們改變游戲規則的App,Purrrfect界面如下圖所示:

Image title

Purrrfect用戶界面


在實際情況中,模態和非模態屏幕之間的區別通常沒那么明顯。例如圖像全屏頁面在大多數應用中都是模態的,盡管它不是進程或對話框。在一些特殊情況下,模態屏幕可能會承載頁面的焦點。如果我們的App屏幕中間是沒有其他操作(如編輯或評論)的情況,我們可能使用模態(全屏視圖)。但由于它允許用戶更深入地進入信息架構并執行各種附加操作(顯示注釋,編輯  ......),因此它不再具有明確的終點,因此它是主流程的一部分,所以應該選擇非模態視圖。


設計師有責任了解清楚App的流程,評估某個操作是否應該單獨展示,從而決定來模態是否有意義。如有疑問,請記住Apple的指導方針:


盡量減少模態的使用。通常人們更喜歡以非線性的方式與應用交互。只有在獲得某人注意、任務必須完成或放棄,以繼續使用應用或保存重要數據時,才考慮創建一個模態來連接上下層級。

——? Apple


雖然不需要嚴格區分模態和非模態,界面也可以完美展現。但是模態的概念深深植根于Apple,Google,Microsoft等企業的界面生態系統中,且用戶已經形成了相應的期望值。


如果Apple時不時的違反自己的規則,那么Apple將不會是Apple。例如,新版App Store在“今日”標簽中打開亮點作為模態屏幕,但仍然允許用戶在屏幕底部導航到下一步(沒有明確的終點)。這樣用戶就可以在模態屏幕內部更深入地導航到其他流程。從推薦以外的其他內容打開相同的App屏幕會導致屏幕顯示為非模態屏幕。這將保留標簽欄和后退操作(再次單擊當前標簽欄圖標以轉到其主屏幕)。

Image title

不一致的Apple UI


左邊的不一致可以通過....來解決

A:...在非模態子屏幕中打開高亮顯示,并帶有后退按鈕并保留標簽欄

B:...一旦用戶點擊模態屏幕內的鏈接并繼續在App的父級別上的非模態子屏幕操作,從而關閉模態屏幕。


如何使用模態?

現在我們對何時使用模態有了一個大致的了解。那么“我們如何進行設計?”這是目前唯一的問題。下面是對模態屏幕檢查后得到的列表:


頂部導航欄始終顯示關閉按鈕(或“取消”/“丟棄”/“最小化”/ ...)。當用戶迷路時,可以輕松關閉疊加層并導航回App的頂層。


iOS和Android上的取消按鈕通常位于導航欄的左上角。Android更喜歡關閉/“x”圖標,而iOS則喜歡“取消”文本,但是圖標按鈕在ios也很常見,經常使用ios設備的應該都知道。


一般情況下,iOS和Android上的保存按鈕都位于導航欄的右上角。但是這種放置規則在大屏幕設備上是不可取的。所以在屏幕底部固定浮動或頁面末端的內嵌是我個人推薦的放置位置。

Image title


多步模態

一旦模態對話框由多個步驟或子級頁面組成,事情就會變得更加復雜。一般情況下,繼續按鈕顯示在右上角。第二步不會打開新的模態屏幕,而是保留在當前模態屏幕,并在現有模態上覆蓋非模態子屏幕。


當在屏幕底部放置主要操作(“保存”,“應用”或“繼續”)時,模態第二步的右上區域釋放了可選取消按鈕的空間。雖然會從左到右跳轉,但這種方案仍然比不能在子屏幕上直接關閉更好一些。

Image title


動畫

截止目前,iOS和Android在模態的使用方面非常相似。但是動畫方面并不是這樣的。


iOS:動畫在iOS中高度標準化。

非模態屏幕從右側進入框架。標簽欄在屏幕底部保持不變。頂部的導航欄也保持不變,但其內容在自定義轉換中淡入淡出。此動畫還為用于返回的邊緣滑動手勢提供了基礎。


另一方面模態屏幕從框架的底部滑入并覆蓋整個界面(新的頂部導航欄)。他們不使用邊緣滑動手勢,如果沒有保存之類的重要操作,自定義下拉關閉手勢可能會好一些。


Android: Android上的動畫更加的豐富多樣。

Google建議在Material Design指南中使用“有意義的過渡” 。Android本身并不區分動畫是否為模態或者非模態。


總結

大部分設計師根據直覺來進行產品設計。有時候直覺的確很重要。但是更重要的是要我們需要了解一些通用標準,以便于在特定的時候選擇更好的適應或者改變。


在我看來模態的概念是當今應用設計中最被忽視的UX原則之一。跨平臺和Web本地混合應用并不能很好的使用模態的指南和規范。但是模態的基本規則你應該了解,以便在必要的時候適應或者改變它。


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

 

如何讓你的設計更有商業價值

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

今年互聯網行業已步入了寒冬,整個行業大規模的裁員。美團、拉勾、阿里、京東等公司均不同程度的“縮招”與裁員,預計會持續到2020年。時代發展很迅速,社會很殘酷,永遠不要認為危機離自己很遠而安心地一直停留在舒適圈,因為當時代拋棄你的時候,并不會和你打招呼。面對環境的波動,最好的方式就是保持危機感,面對變化接受變化,并不間斷的學習。


——“在這個變幻莫測的時代,別只顧著低頭拉車,更要抬頭看路?!?


文章一共分為三個部分,它們之間的關系是循序漸進,逐層深入,又相輔相成。所以大家讀的時候,希望能夠融會貫通。


第一部分:設計行業的發展趨勢


我們正經歷著巨大的商業模式變革與互聯網轉型,在這樣的驅動下,設計師所承擔扮演的角色也會發生變化。根據設計價值,設計師被劃分為更靠近產品的UXD(User Experience)、以及在UXD基礎上提升出與業務更密切的UGD(User Growth Design),最后就是更偏純視覺的VD(Visual design)。那么在新的轉型中,設計師應當如何去打造自身的價值呢?

本文主要探討偏產品與業務方向的UXD與UGD。

Image title


一、設計與產品的關系


以前,設計師在團隊里的位置會比較尷尬,因為沒法驗證自己對業務的推動是否產生了什么明確的價值。而大數據的來臨,設計的價值變得顯性化,作為與用戶關系密切的設計師,善用好數據,可以發揮的作用其實很大。我們可以通過自己的設計思維與專業能力,為公司創造更大的價值,不單只是一個美觀的輸出。這就使得設計與產品業務關系越來越密切,是整個行業發展的必然趨勢。


舉一個設計以小成本提高業務的實例。這是我之前做的兩個雙11活動運營位的入口圖。在改動前banner點擊率大概是不到16%,改動后提高到了40%,不消耗任何其他人力、物力成本,就可以用設計讓CTR翻倍。


設計目標:提高首頁banner與入口圖的點擊通過率

現有問題:利益不突出、視覺點不夠集中、缺少點擊動機

改進方案:1、簡化文案突出利益點;2、增加商品推薦提高命中率;3、用搶的動態按鈕引導用戶點擊;4、用動態gif吸引用戶。

Image title


二、找到自身價值的重要性


前幾天幫一個朋友招設計,面完后朋友問我的意見。我說手活可以,執行也沒問題。朋友打斷我說,除了基本的專業技能外,是否還能為公司帶來更進一步的價值。很遺憾,這位設計師因缺少或者沒法證明自己有更高一層的價值,未滿足職位要求,最終沒有拿到offer。盡管我試著為她辯解說插畫畫的還是很漂亮的。PM回我一句,我們不是招插畫,我們有更專業的插畫師。

像這樣的案例比比皆是,在我看了近百份簡歷,面了不下十個設計師后,我覺得有必要跟大家分享一下設計師找到自身價值的重要性。而這個價值,不是我們覺得,而是要讓企業覺得我們能帶來他們需要的價值。


的確,很多招聘帖上會寫:會插畫、動效可以加分。但我們必須得明白,加分是滿足必要條件之后才去考慮的。如果是去年,你也許會因為有這樣的差異化優勢而拿到一份還不錯的offer,但是今年,10份簡歷中有8份都會插畫,其中至少有3份以上畫的還挺不錯。所以這個優勢就會被大大削弱。并且形勢變了,公司更看重我們的設計能給產品的發展帶來多大的價值。

Image title


第二部分:了解設計師的價值分層


設計師的價值可以分為以下三層:設計協同、設計推動業務增長、設計驅動產品。


第一層:設計協同


一個出色的執行者,能夠在拿到需求后又完美地實現落地。簡單地說就是手上功夫好。


做好這個階段需要有優秀的專業能力,良好的溝通能力,并參與到產品的探索與構思中來。

Image title


第二層:推動業務增長


這個階段的設計師,會比上一個階段更能體現設計師的設計價值,并對產品產生一定的影響力。能在以用戶為中心的基礎上,推動業務的增長,所以這個階段的設計也被稱為UGD(User Growth Design)。


需要設計師具備用戶洞見力,數據分析能力,從這兩個維度出發,去熟悉業務、分析業務,從而推動業務。這個階段的設計師,也是市場最需要并且很稀缺的。

Image title


第三層:設計驅動產品


這個階段的設計師,在團隊中的價值可以說是非常大了。從被動的需求接收方,轉化為從戰略層,能主動提出需求的一方。做到這一點的設計師是非常了不起的,也是我們UXD發展的終極方向。

Image title


第三部分:設計師需要具備的哪些思維?


一、從AARRR轉化型漏斗,培養增長思維


設計師需要去深入探索產品本身,熟悉業務,熟悉用戶。增長黑客里有一個“AARRR”流量轉化漏斗型理論,就是根據不同階段的用戶參與行為的深度和類型,將我們的整個目標拆分概括為:acquisition(獲取用戶)、Activation(激發活躍)、Retention(提高留存)、Revenue(增加收入)、Referral(傳播推薦)。在整個漏斗中,被導入的用戶在每個環節都會出現部分流失,最后層層深入到達底層的,實現最終轉化。

Image title


通過產品生命周期,設計師可以運用自己的設計思維和專業技能,將每一層的漏斗直徑做到最大化,減少用戶的流失,抵達下一層的用戶就會更多,從而提高最終的轉化。


二、運用GSA思維模型做設計


什么是GSA?

GSA分別代表的是:目標(G=Goal),策略(S=Strategy),行動(A=Action)

舉一個通俗易懂的例子,比如我想減肥,這是我定的目標(G),然后我的策略(S)就是少吃多動,最后具體的做法(A)就是,不吃晚飯、每天運動2小時。

如何在具體項目中體現呢?下圖,運用一個具體項目舉例:

Image title


GSA的特點是“以終為始”,優勢在于可以幫助我們快速聚焦到最能幫助我們達成目標、杠桿率(也就是投入產出比)最高的Action上。


三、培養數據思維,利用數據提升設計的價值


項目與需求上線后,設計師一定要去驗證自己的設計是否有效地達成了目標。這個時候你就需要去看數據反饋。沒有數據就就沒有比較,沒有比較就不能進步。


關于數據的用處有很多,舉個例子,當兩個人對各自的方案爭執不休,分別覺得對方不好,但站在各自的邏輯上似乎都能說得通,那怎么辦呢?分別做一個A/B測試,數據不會說謊,哪一個方案更有效,一目了然。


那么如何將數據結合到我們的設計中呢?首先在設計前,我們需要先定一個目標,而每一個目標就應有一項對應的數據指標。比如,提高了某一塊的CTR(點擊通過率),提高CVR(轉化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去驗證自己的的action是否完成了自己的Goal。

Image title


拿到了數據之后,還需要分析數據。不管是有沒有達到目標,都要去分析原因,進行復盤總結。復盤的好處是可以讓我們在這一次項目中吸取有價值的經驗--失敗了就找失敗的原因,方便以后避開同樣的錯誤;成功了就分析成功的原因,并將成功的策略復制運用到今后的工作中,增加以后的成功率。如此,不管有沒有成功,都能給我們帶來最大化的價值。我們也會更加的接近用戶、接近產品、接近業務。從而幫助我們進一步洞察用戶、挖掘新的需求。

Image title


小結:


以上就是今天所要分享的全部內容。再帶大家回顧一下,一共分為三部分:第一個是了解設計師的發展趨勢,第二個是趨勢下的設計師價值分層(設計協同、設計推動增長、設計驅動),第三個就是在價值分層的逐步遞升中所需要培養的用戶洞察力、GSA的策略、數據增長思維等。

最后提示一下大家,閱讀的時候多融會貫通。另外,方法不是唯一的,要懂得去掌握方法的方法很重要。

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

 

產品體驗報告 | 要深度分析,不要表面賞析

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

能知道產品改進的工具,先上車吧!

某個時間我們下載了許多優秀的APP,定了偉大的目標“每天賞析一款優秀產品,學習前沿的交互和視覺風格,努力提高自己的審美和眼界,確保在工作中能迅速找到參考^_^…”


嗯,相信大家都有過類似的做法(不管你信不信,反正我信了)。自覺更新自己審美和眼界,值得表揚啊!(先給一顆糖吃)但是,時間一長你會發現 索 mei 然 luan 無 yi 味 si、沒有突破,基本每個設計點都有共同的理論支撐,而且每次賞析只能停留在基本的交互體驗和視覺風格上。


沒有強大的數據支撐,不知道為什么這么做?只知道設計理論 卻不知產品現狀?只能看到“點” 卻不知“面”的精彩?競品的優劣勢有哪些,我們應該如何改善?不知道?因為你沒有做深度分析!


下面開始梳理我最近學習《產品體驗報告》的一些心得,先上車吧,老鐵!



一、什么是產品體驗報告?


產品體驗報告,是體驗者在深入了解某個產品的商業模式、目標用戶、使用場景、市場現狀、產品功能、交互體驗以及視覺風格,同時還包含了競品主要功能的對標,是先有深度再到廣度的分析報告,是全方位總結出來的圖文報告。


這里的“體驗者”可以是:運營、產品、交互、UI等產品相關人員,現在已經不局限于產品經理做報告了,因為行業需要多元化人才嘛,同時也為你跳槽、轉崗、晉升打好基礎嘛(重點是為漲薪帶來機會)~


既然是一份圖文報告,就必須具備可呈現、可閱讀、可傳承的相關條件,類似于我們的工作總結、項目復盤等,產品體驗報告也有特定的輸出框架和規范。



二、寫這個有什么用?


· 一般利用產品體驗報告來指導產品改進;


· 用于加深對目標產品和目標崗位的了解,深度體驗相關產品是必備流程;


· 也可以用于新入職或應聘時,為了摸清自身產品以及競品而進行的研究分析、面試時也能證明你對該產品做了充分準備;


· 當然也可以用來了解一些新生產品、感興趣的產品,拓展產品思維、設計思維。

產品體驗是一個常規的手段,也是一個必要的流程,只有隨時隨地做到對行業,市場,用戶的了解,才能在關鍵時刻提出合適的解決方案。



三、前期準備


熟悉產品&體驗產品


熟悉APP是做報告的基礎,可以根據自己的經驗、看法,去體驗它,感受它的優劣勢。正如前面所說,這個優劣勢不光是停留在視覺、交互方面,還可以包括核心功能、特色功能等,甚至是戰略層面的。每個人都是用戶,所以不要怕判斷錯誤,大膽去感受、去思考、去提意見,然后把你的想法記錄下來,零零散散的筆記沒事,后面再統一整理,第一感受是最真實的。


在記錄想法時候,最好把你的理由羅列出來:哪里好、哪里還可以優化、我應該怎么做?這個記錄好了,后面寫報告的時候會很輕松。當然也不要閉門造車,盡量和身邊的產品人員共同探討,發掘他們對產品的看法,或許能收集到你遺漏的點。


如果是你參與設計的產品,那直接把你之前的設計思考和建議 復盤即可。



收集&整理資料


資料收集是一個比較繁瑣的過程,需要多渠道去發掘信息,并把他們串聯起來再分類,相信收集過后會對整個產品的戰略層、范圍層、結構層、框架層、表現層(用戶體驗五要素)有大致的了解,后面會根據這5個層面做產品解剖。


收集具體層面:需要了解APP的市場反饋:各端下載量、使用評論,以及這個APP有哪些競品,這些競品的相關數據又是怎樣的。


如何獲得數據?可以通過:手機應用市場、APP Annie、神策數據等數據網站來收集。很多自家產品還有內部研發的“數據觀象臺”,這些都能記錄留存、轉化、用戶特征、行為、點擊事件等重要數據,是產品報告中的有力證據。

收集宏觀層面:可以直接通過公司官網、產品介紹、招聘網站、用研報告、運營報告等方式收集



分析資料


可以在寫報告的時候同時進行。如果提前做好初步的資料分析,將會提高后面寫報告的效率。



分析具體層面:


(1)根據用戶的評論反饋初步判斷,提煉關鍵信息點進行分類。同時可以查看競品的用戶評價,兩者之間做對比,分析為什么會出現這些優勢或差距;

(2)競品的行為數據我們基本看不到,是人家的產品機密,我們主要是自家產品的行為數據,競品只是參考意義;

(3)最后可以從功能、交互、視覺、運營的維度思考如何解決問題并優化,把這些都記錄下來。



分析宏觀層面:


根據搜集來的產品的背景、新聞、研究報告等信息進行分析,提煉其中的重要觀點,然后把這些觀點按照“用戶體驗五要素”歸類,把搜集來的觀點和自己對產品的想法進行碰撞,記錄思考過程。



推薦工具


為了便于共享、傳播及圖片處理,產品體驗報告通常以PPT的形式記錄,因此我比較推薦的排版工具有:office PPT、Keynote、Axure、Mockplus、Sketch、Ps、Ai。


注意:制作一份產品體驗報告,你要面向的是企業高層、上級領導、面試官、產品團隊的同事、客戶等,所以需要結構清晰,排版精美、簡潔,這樣才會讓人很有讀下去的欲望,正如文章開頭所說:可呈現、可閱讀、可傳承。特別是自己以設計師的身份拿出報告的時候,排版是否精美、信息主次區分是否明顯,也是對自身專業性的一種考量(文章最后我會分享一些簡單的模板供大家參考)



四、輸出框架


講到這里,準備工作就已經做的差不多了,現在我們開始規劃寫作思路。下面列舉的是比較全面思路,可根據現狀自定義框架(重點是產品分析那一步,綠篩那部分):


Image title


五、體驗環境


Image title


六、產品背景


產品背景可以結合上面宏觀層面收集來的資料加以描述,盡量保證描述的邏輯性,要讓現狀、痛點、價值、目標一目了然。不要記流水賬、也不要復制粘貼。具體思路如下:

Image title


可按照發散到聚焦、聚焦再發散的邏輯描述:先介紹市場環境→當前環境造成什么問題→用戶存在什么痛點→產品如何解決痛點→產品能達到什么目的→產品價值和未來的方向


為了更容易理解,下面拿Uber的一段產品背景做舉例參考:


Image title



七、產品分析


1.戰略層


產品定位:為“誰”提供什么樣的服務,解決“誰”的什么需求;

產品類型:提供服務的產品屬于哪個領域,具有什么樣的產品屬性;

Image title


功能特性:代表了一個產品核心情緒,可以從產品定位和主要功能中提煉出關鍵詞。



Image title



目標用戶&特征:大方向描述完后,現在開始對產品的主角(用戶)進行細分,用戶是誰、特征是什么、他有什么問題、使用場景是怎樣的


用戶信息可以通過用戶調研、后臺數據、產品數據、競品數據、市場數據等渠道收集,在我前2篇文章中有講到過,如果前期有做這些準備,可以提取相關信息寫入報告:


《用戶體驗旅程圖 | 概念&實操&模板》

《用戶角色模型 | 拒絕“我認為”的設計》


Image title



用戶需求&解決辦法:需求可以從實際數據和用戶反饋中提煉出來,有些運營團隊會通過組建鐵粉群、論壇、問卷調查等方式集中活躍的目標用戶,在這里可以得到他們的訴求,當然最好的方法還是面對面做訪談。解決辦法對應到需求,可以利用“KANO模型”歸類,舉例:


Image title


使用場景:通過“KANO模型”歸納了需求和解決辦法,然后就要列舉出用戶使用產品的環境:


· 什么情況下使用產品?這個情況會不會導致情緒波動?


· 什么地方使用產品?


· 這些地方網絡環境好不好?不好該怎么辦?


· 定位有沒有覆蓋到?精不精準?不精準怎么辦?


· 移動支付時賬號內無零錢怎么辦?


· 正在等車時,手機沒電怎么辦?



這個時候需要你保持一顆同理心,通過一個切入點把思維發散開,產品設計要考慮到極端情況,必須不停的問“為什么”??梢越柚鷪F隊的力量一起完善,C端產品每個人都是用戶。B端產品就需要身臨其境去現場,或者實實在在找用戶調研。


行業分析:這個分析完全是宏觀層面的東西,一般通過政策、經濟、社會、科技方面來發掘,行業新聞資料網上都能找的到,其次就是看你平時對行業的關注度了。當然一些數據平臺也有直觀的信息可以參考:


Image title


應用數據:通過對比競品在應用市場的下載量可判斷出自身產品的市場占有量。用戶評論評星可以大致分析出產品口碑。迭代記錄是個好東西,可以了解競品的研發方向。階段數據可以通過“友盟”等數據平臺接入應用市場獲?。?


Image title



2.范圍層


這里從產品提供的功能(服務)層面來分析,可以按以下2個維度區分,并描述他們帶來的價值:


· 基礎功能(必備的功能、解決問題的、代表產品屬性的)

· 特色功能(核心且重要的、打破同質化尋找差異化的、提升用戶滿意度的)



3.結構層


可以通過:功能架構圖、業務流程圖、頁面流程圖去了解產品結構,并且能清晰的看到用戶完成一個任務的路徑,中間會發生什么,有多少步驟,然后把你的看法記錄下來。


對于競品我們可以邊操作邊記錄,我建議一定要自己畫一遍,流程圖能幫助你梳理產品邏輯,畫完之后可以分析其中的優缺點,對比之下你會一目了然(解剖主要功能即可,像注冊/登錄/綁定 這些常規功能你自己看著辦~)


推薦工具:XMind、Axure



4.框架層


主要是對產品的重要界面進行分析,并總結出優劣勢和整改意見,因為這些是整個產品的靈魂,例如:一級導航頁、主要業務流程頁、重要功能頁、特色功能頁以及用戶最喜歡的頁面。



5.表現層


表現層就是一個產品注入靈魂之后的肉體,既呈現層、UI設計。人的審美觀會根據時間發生變化,所以這里是檢驗你平時有沒有經常性把玩優秀APP、有沒有關注設計趨勢。有設計基礎的當然可以盡情發揮,不是設計出生的可以對應以下幾個維度做參考:


· 視覺舒適度


每個人都有評價設計的資格,當你在使用一款產品的時候是否被包裝所吸引,一眼看上去辣不辣眼睛,這是產品最基本的臉面問題。


(1)顏色、布局、版式、微交互、精致度等,如果這些讓你的情緒產生正面增長,那么恭喜你,你已經被產品的“本能層次設計”所吸引;


(2)如果情緒波動不大,說明還看得過去~(同質化很嚴重嘛)


(3)如果從視覺上讓你感覺不舒適、皺眉頭等負面情緒產生,那只能說明:還有優化的空間(夠委婉了吧)



· 視覺和交互的一致性


比如:頁面切換方式、反饋機制、加載刷新、空狀態、功能性按鈕的狀態、圖標風格、元素細節、設備適配、視覺語言等是否將一致性覆蓋到整個產品


· 品牌感


品牌設計是最容易在視覺上打破產品同質化現象的方式,很多優秀的產品早已深入人心,比如:企鵝-QQ、熊掌-百度、豬臉-飛豬……


將這些形象元素融入到APP里面,創造屬于自己的視覺效果,這是除功能以外尋找差異化的最佳方法。我舉一個“飛豬”的栗子:

Image title


“飛豬”將一個Logo特征融入到搜索框、toast、圖標、標簽等地方,從而提升視覺的一致性和品牌感,這是一種思維灌輸式的洗腦,將品牌映入人心



· 功能可見性


圍繞“視覺服從于功能”的原則。UI設計要把握好功能的視覺權重,比如:功能優先級、入口層級、按鈕層級、哪些可操作等,這些都需要通過設計讓用戶感知到


假設一個可點擊的地方,但用戶看不出來、沒感知到,這就是功能可見性極弱,影響使用體驗。


同時還要考慮到用戶群體,如果是一款老年人、色盲者使用的產品,你的功能可見性又是怎樣的呢?


總之,我們做一個設計或者評價設計之前,腦袋里都要過一遍用戶使用場景。



八、競品分析


基于戰略層面收集到的數據,我們需要和競品做宏觀對比、具體對比,看看別人家產品是怎么做的,為什么受用戶喜歡:


宏觀對比:

Image title


具體對比:


· 功能差異化對比

Image title


· 視覺和交互對比


這里可以運用文章開頭提到的“APP賞析”,站在UI設計和交互體驗的角度做對比分析,羅列出雙方的優劣勢,并提出自己的建議。

另外,這么多資料沒有模板嵌套 會影響工作效率,我簡單整理了一些PPT,后面會把這些文件都分享出來。

Image title



九、假如我是產品經理


相信你做到這一步的時候,已經對產品了解的比較透徹了,在解剖過程中你肯定有很多疑問和自己的想法,沒關系,大膽把他寫出來,這能夠檢驗你的分析成果。


假如你是產品經理或設計負責人,你會如何優化、把控產品呢?就從以下四個方面開始你的表演吧:


· 功能問題

· 交互體驗

· 視覺風格

· 產品未來發展的設想



十、總結


(1)千萬別急著動手,先收集相關資料和數據,認真分析并做記錄;

(2)了解產品定位、用戶群體和市場現狀,知道產品為哪些人解決問題、設計機會在哪里?;

(3)找到用戶訴求,參考競品,結合產品現狀給出合理建議;

(4)與競品做對比,找到優缺點,設想改進方案。


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

 

思維方法篇:培養專業的設計思維

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

“設計思維意識形態”強調親身實踐、堅持以用戶為中心的方法解決問題,并達到設計創新,進而實現差異化、增強競爭力。這種 “親身實踐” 的、“以用戶為中心” 的方法由 “設計思維過程” 決定。

設計思維發展史

很多人都有一個誤解,認為設計思維才剛剛興起。實際上,人們對設計思維的運用已有年頭:紀念碑、橋梁、汽車、地鐵系統等都是其產物。縱觀歷史,優秀的設計師早通過以人為本(human-centric)的創造性設計過程來締造寓意深刻、富有感染力的設計方案。

早在20世紀初夫妻檔設計師 Charls 與 Ray Eames 在設計 “埃姆斯椅” 之前就堅持 “在做中學”,挖掘了椅子背后的大量需求和限制條件;這款椅子在70年后的今天,依然被投入生產制造。20世紀60年代,服裝設計師 Jean Muir 有 一個很著名的設計策略 “常識論(’common sense’ approach)”,非常重視自己設計出來的衣服在別人眼里是什么樣子。

這幾位設計師都是當時的創新先驅,他們的設計方法論也被看做是早期的設計思維——深入了解用戶的生活方式以及人們未被滿足的需求。

紐約州商業部標識 “ I LOVE NY ” 的設計師 Milton Glaser 也對設計思維做了很好的闡釋:

“ 我們一直都在思考,但并沒有真正領悟(什么是用戶真正需要的)……是關注(attention)這一行為本身讓我們真正了解了用戶的需求本質、對用戶需求有了充分認識。”

盡管早期就有了用戶為中心的設計產物,但設計在商界的地位并不高。往往事后才被人想起,也僅僅是一種提高美感的潤色手段。所以很多公司根本就沒有滿足顧客的真實需求。因此,有些公司將設計師的角色從受限的的產品開發后端前置到了產品設計之初。以人為本的設計方法(human-centric approach)也讓他們獨樹一幟:其設計產物不但滿足了用戶需求,也成功盈利。

大公司在落實以人為本前,需要一套標準化機制。設計思維(design thinking)就是一套用創造性設計流程解決傳統商業問題的規范化框架。

20世紀 Roger Martin 和 IDEO 設計師 David Kelly & Tim Brown 共同提出了設計思維,將醞釀多年的設計方法和思想概括成了一個統一的說法。

設計思維是什么?——設計思維的定義

設計思維是一個流程化的意識形態(Design thinking is an ideology supported by an accompanying process.)。要徹底理解這一概念,先要弄清楚 “設計思維意識形態” 和 “設計思維過程” 。

定義:“設計思維意識形態”強調親身實踐、堅持以用戶為中心的方法解決問題,并達到設計創新,進而實現差異化、增強競爭力。這種 “親身實踐” 的、“以用戶為中心” 的方法由 “設計思維過程” 決定。設計思維過程有6個鮮明的環節,接下來會一一詳述。

設計思維如何進行?——設計思維的過程

設計思維整體上遵循著

  1. 理解(understand)
  2. 探索(explore)
  3. 實現(materialize) 的環狀流程。
  4. 具體可細分為6個階段

(1)與用戶產生共鳴(empathize)

與用戶產生共鳴(即帶著同理心去理解用戶):開展用戶調研,了解用戶的行為、語言、思想、和感受。

假設你的目標是改善新用戶的登機體驗。那么在這一階段你需要和真實的用戶對話,觀察他們做了什么、如何進行思考、以及想要什么,同時思考 “是什么激勵著用戶或阻礙著用戶”、“用戶在哪兒受到了挫折”。其目的是收集盡可能多的信息,力求與用戶產生共鳴、真正理解他們。

(2)定義問題(define)

定義問題:根據調研結果,觀察用戶有哪些痛點(pain point)。明確用戶需求后,羅列出優化點。

該階段以上一階段為基礎,幫助我們進一步了解用戶。還以登機體驗為例,根據之前的調研結果,我們可以總結出乘客當前的體驗概況,思考不同乘客之間是否存在相同痛點,找出乘客未被滿足的需求。

(3)形成概念(ideate)

形成概念:針對用戶未被滿足的需求,腦暴一系列瘋狂的想法和創意。參與者可以自由發揮、天馬行空一番;這一階段,點子的數量重于質量。

最好整個團隊一起參與,簡要描述下各個想法。然后成員之間觀念互換,將好的點子相互融合、修正,形成一套全員認可的解決方案。

(4)繪制原型(prototype)

繪制原型:將概念方案制作成真實、可感觸的原型。其目的是分辨方案中哪些內容有效,哪些無效。同時,依據原型的反饋信息權衡我們的解決方案應該更具影響力還是可行性。

如果你的任務是設計一個全新的登錄注冊頁,繪出線框圖,在團隊內討論、匯總建議。然后根據建議快速調整方案,換一組人進行再次討論。

(5)測試(test)

測試:帶著你的原型走進用戶、獲取用戶的反饋。同時思考 “這個設計方案有沒有解決用戶痛點、滿足用戶需求?有沒有讓用戶感覺更好、思路更清晰、任務執行更順暢?”

邀請真實用戶試體驗產品原型,驗證設計目標。乘客對登機體驗的抱怨有沒有減少?新做的登錄注冊頁有沒有增加用戶的時間和金錢成本?為了實現最終的設計愿景,多測試幾遍吧。

(6)實施(implement)

實施:將你的設計愿景開發上線,確保它能為最終用戶帶來生活品質的真正改善。

這是設計思維最重要的一環,也最容易被忽略。Don Norman 說過:“我們需要做更多的設計?!?設計思維不是變戲法,空有理論而不實踐是沒用的。同時記住 Milton Glaser 的教誨:“創新設計是最難的。”

因為 ‘創新’ 是一個動詞,要花費很長的時間。我們要先在頭腦里產生一個點子,然后將它實現。通常這是一個漫長且艱難的過程,但如果你掌握到了其中的真諦,你的工作就被賦予了價值和意義。

為什么要遵循設計思維?——設計思維的優勢

為什么要學習和使用設計思維?其理由很多。通過歸納,我們發現設計思維的優勢在于:

  1. 從用戶數據著手,堅持以用戶為中心;注重真實非虛擬的用戶需求;并在真實的用戶群中進行測試。
  2. 發揮集體專家的智慧,建立集體語言,尊重每位參與者的建議。
  3. 運用多種方法解決同一問題,鼓勵創新。

Jakob Nielsen 告訴我們:“如果一個偉大的設計解決的是一個錯誤的問題,它必將失敗?!?

靈活性——設計思維可適時調整

初次接觸設計思維,你會覺得它復雜深奧。但要告訴大家的是,設計思維的6個階段不必生搬硬套,非按順序操作。我們可以把它當作指導思想,在需要時運用即可。要學會做主廚,而不是打雜的廚子:產品設計流程就像烹飪食譜,完全可以根據實際情況稍作調整。

這6個階段是可迭代、可循環的,與純線型設計過程(詳見圖2)完全相反。在完成最初的原型后,我們常常會再次回到 “理解” 的前兩個階段,與用戶進一步產生共鳴、深入定義問題。只有產出好的點子、繪制出完整的原型,你才能真正表達出你的設計理念,也能在設計之初就準確評估方案的有效性。

基于這一點,再次進行用戶調研很有價值。在決策前理清:用戶的哪些信息未被了解到,原型中的哪些用例未被調研到。

每一個階段也皆可重復操作。我們常常會在其中一個環節里多次反復,達到這一階段的目的再繼續下一個階段。

舉例說明:由于不同的參與者背景不同、專長各異,“定義問題”時會產生很多解決方法。這一階段需要全部參與者集思廣益,花費的時間普遍較長。如果大家無法達成一致,就有必要多重復幾次 “定義問題” 。每個階段的產出都應當足夠合理,以作為余下階段的指導原則,同時不要偏離我們的關注點。

可擴展性——設計思維的“雄心壯志”

設計思維方便、無障礙的本質賦予了其很強的擴展性。過去那些不肯轉變觀念的公司,現在也有了自己的設計指導規范。設計思維不僅適用于傳統的產品設計等領域,也適用于社會、環境和經濟領域等的問題解決。

設計思維簡單易懂,可被廣泛應用;但如果“問題”定義得不準確,整個設計過程將會十分棘手。設計思維既可以用于優化小的功能點,如搜索功能;也可以用來制定重大變革性方案,如為教師設計職業發展階梯,以留住更多教育人才。


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

 

如何理解產品的「核心功能」?

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

產品的核心功能及其意義


王子吻醒了白雪公主后,將白雪公主帶回了城堡,給了白雪公主應有的一切,白雪公主過得很開心,衣來伸手飯來張口,金銀珠寶取之不盡用之不竭。這一切哪里來?王子給的,因為王子愛白雪公主。國王和王后也很愛白雪公主,那是因為他們愛王子。老百姓也很愛白雪公主,因為他們愛戴國王和王后,同時也喜愛王子。白雪公主的這一切財富、幸福、快樂都來自于王子對她的愛。王子為什么愛她,因為她的美貌。是因為白雪公主的美貌,致使王子吻她,白雪公主才醒了,不是因為性格,因為她當時是死的,王子不知道她的性格怎么樣,所以白雪公主得到的這一切,都是因為她的美貌。所以白雪公主很在意自己的美貌,因為她的美貌,讓她得到了這一切。但是人都是會逐漸老去的,所以白雪公主每天都會去保養自己的容貌,每天都會去照鏡子,她擔心這個世界上會有一個比她更美的人出現在王子面前,奪走她的一切,她很不安。直到有一天,她對鏡子說:鏡子啊鏡子,誰是世界上最美的女人。


故事結束。


Image title


大家發現了嗎,白雪公主成為了童話故事里的那個王后,那個用毒蘋果的女人,現在你還會覺得王后壞么?好吧,我們今天要聊的不是這個,而是「白雪公主的美貌」,類比于「產品的核心功能」。


如果白雪公主的容顏衰老了,她就失去這一切了,即使她曾經得到過。就好像微信的核心功能是即時聊天,假設微信哪天不能即時通訊了,那它的價值就不存在了。所以它也害怕,害怕自己被其他產品取代,因為人是貪婪的,一件事物總有對其厭倦的時候,這也是為什么他們現在已經開始說自己要創造一個生態體系。以至于出現了小程序、小游戲、紅包、掃碼、支付、看一看、搜一搜等等。他們在維系這個產品給人的幻想,他們在持續性的創造這個幻想,來連接人與人之間的那一份羈絆,或者說情感。


類似于白雪公主的美貌得到了一切,而產品的核心功能帶來了用戶。


我說這個故事的目的是:不管是商業競爭,還是產品設計,其實都是一個道理,就是我們應該圍繞產品的這個核心功能去做文章,去拓展商業價值。


也許你平時看到很多文章,都在告訴你要注意產品的核心功能,你知道了核心功能的概念,但是不知道具體意思,其實還是不理解。所以我通過這個故事告訴大家,幫大家理清什么是「核心功能」以及它的意義。


為什么我們要了解并摸清產品的「核心功能」?因為只有在這個基礎上,我們才能正確做到拆解需求發現核心功能并對其進行設計,這就是我們所說的需求拆解與功能設計。


判斷產品核心功能的價值


產品的核心功能是由產品的定位決定,產品的定位是由產品的市場決定。那么要分析某一個核心功能的價值,須得從產品的市場著手分析。一般而言,產品市場可以歸納為以下三類:a.現有市場、b.細分市場、c.未來市場。


a.現有市場


現有市場,其實就是目前常見且已盈利的模式,這類模式已存在于如今的市場上,并被許多產品借鑒、供奉著。如各類互聯網產品,電商、社交、音樂等,都有一定的模式在遵循著。針對現有市場的產品,對競品的了解似乎已經成為當下產品人的必走路徑,競品在做什么,都做了什么,以及做到了什么程度,再結合自己產品的定位以及核心競爭力來斟酌某一個功能的去留及方向。正所謂知己知彼,百戰不殆。


值得一提的是,競品分析的產出物并不是抄襲,而是更多的挖掘與糾正自己產品在下一步的需求,競品不可以做的不代表自己產品不可以做,同理,競品做的好的地方我們也不能輕易跟風,每一個產品之所以能夠存活下去,都是因為有自己的核心競爭力。這段話我之前在其他文章里寫過,沒什么指導意義,就是糾正部分人對于「競品分析」的錯誤看法。


成功的,比如網易云音樂的評論功能,早期他們就是通過這個功能從其他平臺挖來了不少用戶(評論是之一,當然還有歌單,UGC 內容分布渠道)。這些用戶在聽歌的同時會沉浸在音樂的氛圍里,期待找到志同道合的人,宣泄內心感性的情緒。(不得不說現在的人其實都挺矯情的~嘻嘻)


Image title


失敗的,比如各類騎行產品,這類產品其實是借鑒了國外的模式,但各位也看到,基于國情及人民文化普及程度的區別,國內市場騎行類產品現在很難發展起來,至少目前我身邊已經有很多人想要退款某類單車服務的押金都很難了。


b.細分市場


其實就是將現有市場細分化。從用戶群體分析,每一個細分市場都是具有類似需求傾向的消費者構成的群體。比如社交這一個分類,微信出現后,隨之出現的各類「交友」軟件,如雨后春筍般崛起。其中大部分產品的功能模式都非常單一,著重突出核心點,但礙于市場價值的可供性太低,以至于能真正崛起的產品卻寥寥無幾。


原因就在于,本來市場就已經細分化,在細分化的市場里做出屬于自己的產品特性,需要考慮的因素有以下三類:

  • 差異化,該功能具不具備個性化,能不能在區別于其他產品的同時提升用戶體驗;
  • 強需求,也就是所謂的剛需;
  • 技術支持,例如產品的技術壁壘;


c.未來市場


這點類似于目前比較火的人工智能,市場盈利期沒有到,尚處于摸索階段,但也許會在未來創造出巨大的價值。這里就不展開討論了吧,因為在正常領域里,一般人達不到這樣的高度,所以討論意義不大。


實踐出真知


其實現在的很多產品都有一個問題,就是初期急忙上線新功能,后期發現效果不好,甚至到了無人去用的地步,但還是會把它掛著,不愿去掉?;仡^看目前比較成功的產品,哪一款是有這樣的功能存在的?所以在工作中,我們要堅持以下三個原則:a.砍掉殘缺功能、b.不要提用戶去思考、c.幫助用戶聚焦;


a.砍掉殘缺功能


可能很多產品已經存在上述的那種情況,那么如何來刪除那些不必要的功能呢?


首先大家第一個想到的是「刪除那些功能,那我之前的工作不是全白做了么?既浪費時間,又浪費精力,成本都收不回來了」。


沒錯,這么理解也是對的,但也不是全對。因為在迭代的過程中總會有一些自己沒辦法預知的情況,也許你之前的功能做得不好,但是不代表白做,可能在這個過程中積累了一些經驗,知道之后遇到這些類似的情況如何去處理。這個成本算是智商稅吧,這算是前期產品沒有規劃好,導致后期發生這種情況的一個代價。


所以有人會因為這塊成本原因,選擇不去刪除這些功能。說實話,這樣不僅會導致產品后期在精力上持續不必要的輸出而導致產品爛尾,還會影響用戶的體驗。所以在砍功能時,應該問問自己「為什么要留著它」,而不是「為什么要去掉它」。(好好想想這句話。)


Image title


b.不要替用戶去思考


說到這里,大家可能又會想問「你怎么知道用戶想不想要這個功能呢?」


一般來說,我們會通過數據來分析這些功能是否有存在的必要。同時從多角度去切入思考,比如前期的用戶模型、需求分析、可用性測試等等,但是千萬不要去猜測用戶想不想要這個功能。因為人一旦陷入「求全心理」的狀態中,設計者就會擔心自己漏掉了什么需求,而不是去解決問題。


所以我們要傾聽用戶的意見,但絕不能盲從。


c.幫助用戶聚焦


相信有人會反駁「那難道沒有完成一個功能前,我就完全不能去做其他功能了嗎?」

不是的,我上面也提到了,只要不影響用戶使用產品的核心功能,適當的加一些子功能是沒什么的,好比上面「微信」的例子。


產品的主要功能能夠滿足用戶的話,他們就不會太去在意你的改變。所以無論是刪除某些子功能或改進某些功能,都不要輕易的打擾用戶。


如何做到這點?

  • 確定用戶想要達到的目的,并排定優先級;
  • 找到能夠完全滿足優先級最高用戶需求的解決方案;
  • 確定用戶在使用產品過程中最常見的干擾源,并將解決這些問題的功能按難易程度排出優先級;


比如;

  • 微信的例子,用戶主要目的是社交,「游戲」和「購物」只是當中的消遣功能,之所以放在發現的子功能中,是因為它們對主流用戶來說并不重要;
  • 同樣的,因為大部分用戶的目的是社交,但是不排除少部分人會去使用這些子功能,所以要做到不能打擾主流用戶的同時,滿足部分用戶的需求;
  • 用戶在使用產品的主要功能時,我們要看到子功能是否影響用戶的使用,然后找出當中最阻礙用戶使用產品功能的干擾源,并把它解決。


小結


以上,我通過三個大點闡述了「核心功能」是什么、它的意義以及價值,工作中如何對核心功能做處理。


最后說一點,在接需求的同時,各位是否有想過這個需求背后的目的?如果有,那么是否有再進一步分析這個目的與核心功能的關系?大部分人做到了第一點卻忘記了第二點。


各位謹記:產品人/設計師的思維,就是用戶看到界面時的樣子。

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


用戶體驗旅程圖 | 概念&實操&模板

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

讓產品(服務)團隊了解用戶使用過程中的看、想、聽、做,讓他們能夠從用戶角度去考慮產品、設計產品。

什么是用戶體驗旅程圖?


概念&作用


從用戶角度出發,以敘述故事的方式描述用戶使用產品或接受服務的體驗情況,以可視化圖形的方式展示,從中發現用戶在整個使用過程中的痛點和滿意點,最后提煉出產品或服務中的優化點、設計的機會點。同時讓產品(服務)團隊了解用戶使用過程中的看、想、聽、做,讓他們能夠從用戶角度去考慮產品、設計產品。這個過程的產出物即為用戶體驗旅程圖。









由什么構成?


這里分為功能定義前和功能定義后;

定義前即為:準備規劃做的功能、進入用研階段時;

定義后:已經上線的功能、需要優化的功能。

Image title

如何做?


1、創建用戶角色模型(用戶畫像)


既然旅程圖是梳理用戶使用產品上的體驗問題,那么我們需要以用戶的真實情況為基準,這樣會使旅程圖更真實。


這里可以通過前期的用戶研究,比如:訪談記錄、行為研究、調查問卷、意見反饋等方法,獲得大量真實有效的用戶數據。


然后對產品的主要目標用戶進行分類,并為每個用戶創建角色模型(包含基本信息、訴求、期望、痛點),每個角色將對應不同的用戶體驗地圖。


Image title




2、開始制作旅程圖


這里就以功能定義前為場景,因為用戶畫像和使用行為是單獨知識體系,后面會單獨產出一篇關于用戶畫像的,敬請期待哦!


(1)為了便大家理解,我在這里列舉一個生活中都經歷過的小栗子。



開始:起床

目標:到達公司


我們先回想一下今天早上起床的過程。把這段場景分成下面幾個階段:


一級行為:


Image title


起點和終點并不代表結束,要聯想到相關的場景,比如:到到達公司后,還有沒有有可能解決上班相關的問題?


Image title


(2)在真實做項目過程中,大家在這一步可能會寫出不同顆粒度的故事,需要設計師或產品經理把控場景大小。這段場景可以再往下梳理一層顆粒度更小一點的場景,比如起床就可以再細分為:


二級行為:


Image title


剩下的場景模塊都可以繼續這樣細化并歸類。


Image title


這樣我們的主線場景就有兩個層級:一級行為和二級行為,場景從左至右形成一個時間線。

但是,真實的用戶場景不會按照你所畫的順利進行,情況會變得復雜、多變(交互設計師要考慮到異常情況和特殊場景的發生),這個時候我們可以借助流程圖的方式連接我們的場景:


Image title


(3)拆分場景

此時,我們需要在剛剛梳理的每個二級行為下面停留,繼續細化二級行為,從中獲取更多的信息。


體驗設計就是需要不斷地問“為什么”、不斷發掘潛在需求。


參與人員會圍繞這個行為場景寫出很多細節來。我們可以按照以下幾個維度對細節進行歸類:


Image title


其中情緒曲線可以通過固定的問題獲得,也可以通過用戶想法、用戶的痛點結合主觀判斷。

在這個過程中,先限制時間,讓大家按照自己的想法寫出來,每條思考寫在一張卡片上,相互不干擾,然后每個人闡述自己的卡片內容,讓參與者了解大致的信息


注意:要以完整的流程為中心,一定要廣度優先,而非深度,比如起床這個故事里面,找衣服、穿衣服這類場景在這個階段我們無須關注,不要過早的沉浸到細節中。


Image title





完成上述步驟后,你將得到一份重要的節點清單,下面需要對重要的節點進行分類,以便在繪制旅程圖時更加的方便。比較常用的做法是將所有關鍵節點寫在便利中并黏在墻上,然后將同類別的關鍵節點集中在一起,并為每個類別貼上分類標簽。分類完成后,對核心的節點進行篩選,移除掉重復、沒有價值的內容。



(4)接下來,我們可以根據問題點的數量來衡量每個節點的情緒水平了。一般可以用積極、平靜、消極這三種情緒來表達用戶的使用感受。這一步做完,我們一眼就可以看出痛點在哪個環節上了。



(5)針對痛點,討論可行的解決方案

先根據自己的經驗,對標競品,設想一些解決方案,然后組織產品、設計、leader再進行一次腦暴(核心人員即可,人多會導致喪失方向),讓大家一起進入旅程圖,以用戶的角度再走一遍流程。在這個過程中,如果發現旅程圖中有偏差和遺漏的地方,大家就可以一起修改、補充、審核。



總結并通過可視化模板記錄:






Image title


最后,結合體驗地圖行為的情緒曲線、設計的機會點,梳理優先級:


a.對情緒的最高觸點,思考還有沒有優化的空間,能否將它繼續優化做到;

b.對情緒的觸點,思考是否能將其他觸點較高的地方,分擔一部分功能(次要功能)到觸點,來均衡體驗情感;

c.可以對標競品,看看別人是怎么解決問題的,尋找適合自己產品現階段的解決辦法。


補充:

大家發現沒有?參與人員在寫想法的時候,就是頭腦風暴的過程,抓住機會,通過一些開放式、引導式的提問來刺激大家腦暴出更多的內容(有利于產品經理和交互設計師獲取靈感)比如:

Image title





總結:







Image title


另外,功能或痛點的解決優先級可以通過四象限法則歸類,與旅程圖同時交付,

做到:用戶、場景、行為、問題、解決辦法、解決時間一目了然


Image title

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

用戶角色模型 | 拒絕“我認為”的設計

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

一、什么是用戶角色模型(用戶畫像)?


概念&作用


用戶角色模型是真實用戶的虛擬代表,通過一系列的真實數據分析,得出的目標用戶模型。模型通過抽象來代表復雜的現象,好的模型強調結構的顯著關系,弱化不太重要的細枝末節。我們要了解:用戶與用戶,用戶與期望,用戶與環境,以及用戶與產品之間的關系并且將其視覺化。


這里的視覺化可理解為:海量的數據標簽(標簽化、數據可視化)。比如我們要統計每個用戶的行為特征,細分到人口基本屬性、社會屬性、生活習慣、消費行為等信息,抽象出各個具體的標簽,賦予名字、照片、一些人口統計學要素、場景描述等,最終形成一個人物原型(personas)


創建用戶角色模型的好處


· 與利益相關者、產品團隊在研發中拋開個人喜好,聚集在用戶動機和行為上,了解用戶深層次動機與心理;

(拋開個人喜好:產品團隊容易將自己的目標、動機、技巧代入產品設計中,這就是設計者心理模型)


· 避免設計陷阱,讓產品設計更聚焦,防止走偏,避免把過多的心思花在其他邊緣性功能上

(更聚焦、防止走偏:有人物模型為基準,團隊就能清晰的對功能進行優先級排序,以核心功能、解決用戶訴求的功能為主,可避免把注意力放在非核心且次要的功能點上。)


· 有助于為營銷活動、組織架構、客戶支持、戰略規劃及設計決策 提供有價值的信息。



由什么構成?


Image title


顯性畫像:用戶群體的基本信息描述,如目標用戶的年齡、性別、職業、地域分布、興趣愛好等信息,一般通過客服人員線上交流、用戶賬號數據、常關注的內容做判斷,間接獲取數據;


隱性畫像:用戶群體深層次的特征描述,如使用產品的目的、解決什么問題、偏好、訴求、場景、愿景、使用頻率等。主要以問卷、訪談、意見反饋等方式直接獲得數據。


說到底,用戶畫像就是先對逐個有代表性的用戶進行特征描述,然后對共性特征進行提煉、分類,最終將用戶標簽化、數據可視化。

Image title


二、用戶畫像構建的基本流程


用戶角色模型不是拿來既用、用完即丟的,而是建立在系統的調研分析、真實的數據統計之上得出的有力結論。


這里要考慮用戶畫像的優先級,畫像一般會存在多個(多個用戶),通常一個用戶只能有一個,不能為擁有三個以上畫像的用戶設計產品,容易產生需求沖突,要分清楚哪些是核心用戶(既目標用戶、產品的支撐者),哪些是非核心用戶,所以我們的設計目標就是維護、培養、促成核心用戶。


同時要以適合產品團隊和項目需求為出發點,用戶畫像不是一成不變的,而是根據現實情況同步更新,現在我們進行四步畫像構成法: 


Image title


1、確定分析維度


用戶角色模型是針對特定產品或特定功能的,所以人物角色的分類一般是根據用戶的目標(用戶需求)、行為和觀點(行為傾向)進行。


舉例:

目標?什么原因促使你使用該產品?解決你什么問題?

觀點?產品中最喜歡的功能?為什么喜歡?是否達到了你的預期?

行為?你最近一次使用產品做了什么?用了多久?


下面以2個維度做參考:

Image title


2、基礎數據收集


數據是有力證據,是構建用戶畫像的核心依據,在基礎數據收集方面,可以先列舉出構建用戶畫像所需要的基礎數據。


具體的思路如下:

Image title

上面列舉的數據緯度相對比較多,在構建用戶畫像過程中可根據需求進行篩選。


這些數據有三個來源:相關文獻資料和研究報告、產品數據后臺、問卷調研和用戶訪談,可以按照以下維度區分:

Image title

(這里涉及到用戶研究中重要的環節:用戶訪談、數據收集,將歸納為單獨的知識點于下篇文章分享,期待有你~)


3、分析建模

通過以上收集方式并成功采集后,下面開始對不同的角色進行分類(通常采集多個用戶做參考,如單個用戶可直接將其標簽化,然后套入完整模型中)


(1)先確定好產品屬性,按照用戶角色進行分類,比如外賣APP有:商家、消費者、騎手 三種角色,圖例:

Image title


(2)然后將角色內的用戶身上觀察到的一些顯著的行為列出不同的幾組行為變量,例如:對產品的積極性、熱情度、學習能力、熟練程度、消費觀等。


(3)將訪談對象和行為變量對應起來

這里就以電商產品為例,將用戶個性(行為變量)做成一個區間軸,再把訪談對象放到區間軸上面對應起來,不需要那么,標出相對位置即可


注意:行為變量有兩種情況

· 一種是連續性,比如使用頻率的描述是:經常到從不

· 另一種則是非連續性,比如使用的平臺:移動端、PC端


對這兩種情況,大家要視情況而定,圖例:


Image title


(4)找出重要的行為模式

把對象映射完后,尋找在變量軸上的對象群。如果一組對象聚集在6~8個不同的變量上,這很可能代表一種顯著地行為模式,而這個模式是構角色模型的基礎,圖例:


Image title



三、畫像呈現

找出行為模式后,畫像呈現即從顯性畫像、隱性畫像、場景和需求等方面,給用戶打標簽,并且增加一點描述性語言(描述人物行為和痛點,而不是描述解決方案),圖例:

Image title


四、總結


(1)確定分析維度:當前產品處于什么階段?需要什么信息?

(2)基礎數據收集:對目標用戶進行訪談,收集相關數據

(3)分析行為模式:將訪談對象和行為變量對應、找出重要的行為模式

(4)整理并呈現畫像:描述特征和行為,創建人物故事


聊到這里可能有人會問:


Q:用戶模型做出來會不會有人看?它是不是設計者虛構出來的套路?

A:用戶角色模型是設計者通過用戶訪談和觀察得出來的真實用戶行為,是有真實數據為依據的,所以不進行大量的用戶調研,不為用戶建模,不去創建用戶模型,只知道意淫需求,說著“我認為該怎么怎么做”,都是一本正經地耍流氓。用戶研究、用戶模型是我們做好產品的基礎和風向標。


Q:用戶角色模型到底什么時候開始做?

A:先確定目標用戶 → 對目標用戶進行訪談 → 訪談后再建立用于模型

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


按鈕設計,看這篇文章就夠了!

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

按鈕在UI設計中是一種常用的UI控件,在界面中作為主要的行動點,引導用戶進行相應的操作,它在用戶和產品的交互中承擔著重要的作用。


按鈕設計看似簡單,但是如果想要更好的交互體驗,引導用戶進行相應的操作,提升產品的轉化率這仍是我們需要研究的問題。下面小編將從按鈕功能類型和設計要點兩個方面進行分析。


一、按鈕功能類型


按鈕的功能類型往往決定了一個按鈕的設計方式,是需要強調還是需要弱化;文案是需要強引導,還是直接闡述功能;按鈕上是放圖標還是不放圖標等。按鈕根據功能的不同,可以分為不同的類型,主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關按鈕這六大類型。


1.行為召喚按鈕


行為召喚(CTA)按鈕其目的是誘使用戶采取某些操作, 從而提高產品的轉行率。簡單來說就是通過設計誘導或激勵用戶點擊按鈕,例如立即購買、訂閱關注、利益誘導、文字誘導等。


1)誘導購買


當行為召喚的目的是誘導購買時,按鈕的設計不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點擊,讓用戶進來第一眼就能知道該按鈕的用途。如下圖所示:

Image title



以美團外賣為例,該按鈕的顏色采用黑黃對比、形狀采用具有親和力的圓角,在樣式上加入投影同時加入送餐員的元素,配上小紅點,能夠清晰的給用戶傳遞出可點擊部分有去結算、送餐員。另外加入價格誘導,讓你可直觀看到優惠了多少錢,促使你進一步操作。


以淘寶詳情為例,該按鈕是一個組合按鈕,由加入購物車和馬上搶以及店鋪、客服、收藏等組成,作為行為召喚按鈕我們可以明確的看到,不管從顏色、形狀、樣式都能夠讓我們快速注意到。


2)訂閱關注


當行為召喚的目的是訂閱關注時,其重要程度相比誘導購買低很多,但是在設計時我們仍然需要考慮一個問題,這個問題可直接決定該按鈕大小、樣式等,這個問題就是需要根據產品目的判斷是誘導用戶訂閱關注重要還是讓用戶閱讀內容重要。如下圖所示:

Image title



當內容重要時,按鈕的設計需要弱化處理,以優酷視頻的發現頁和星球頁為例,這兩個頁面很明顯是以內容為主的界面,在設計時直接弱化了按鈕形式,讓按鈕和整個界面相融合,但是按鈕設計的原則是讓其看上去像按鈕,因此當按鈕只是文字時可以加圖標進行引導比如優酷視頻發現頁,也可以加入弱底紋進行引導還能讓界面看上去整潔,比如優酷視頻星球頁面。

Image title


當訂閱關注重要時,按鈕的設計需要強化處理,以橘子娛樂和土豆視頻為例,橘子娛樂采用粗描邊漸變按鈕,同時加入圖標進行引導,具有較強的視覺引導作用,很容易喚起用戶的關注。土豆視頻采用黃色填充加圖標引導,在視覺上和產品內容形成強烈對比,明顯的以關注為主的界面。


3)利益誘導


當行為召喚的目的是利益誘導時,該按鈕設計根據重要程度較高,因此在設計時可以考慮顏色、形狀、加入圖標、誘導文字等設計方法。如下圖所示:

Image title



以大眾點評為例,其領獎按鈕明顯比賺積分的層級高,因此為了突出領獎按鈕采用了色塊設計的樣式,同時賺積分按鈕采用描邊設計進行弱化處理。


以騰訊doki為例,其打榜頁面沖榜的重要層級較高,因此在設計時不僅采用了色塊、加入動效圖標、同時還加入了誘導文字,讓按鈕更明顯同時誘導用戶點擊,其他去瀏覽按鈕則采用描邊樣式弱化處理。


4)文字誘導


文字誘導簡單來說就是通過文字,誘導用戶進行下一步操作,多用于空頁面、活動頁面中,因此在設計時采用簡單的色塊填充即可,如果該頁面為活動頁面也可增加漸變或投影樣式,讓按鈕更有空間感,進而突出按鈕。如下圖所示:

Image title



以得到為例,當你還沒有學習計劃時,它會對你進行提示“開始制定學習計劃”,同時其按鈕采用重要程度較高的色塊+投影的方式,誘導用戶點擊。


以大眾點評為例,當你還沒有攻略時,它會對你進行提示“我也要創建攻略”,同時其按鈕采用漸變填充的方式,誘導用戶點擊。


2.懸浮按鈕


懸按鈕浮是 Android 應用中最常見的一個控件。不過隨著Android和iOS規范的不斷融合,在iOS中也經常會看到各種各樣的懸浮按鈕。在設計上懸浮按鈕應該采用顯眼的顏色,以抓住用戶的注意力。同時它應該是積極正向的交互,比如創建、分享、探索等,同時并不是所有頁面都需要加懸浮按鈕。如下圖所示:

Image title


以UC瀏覽器為例,懸浮按鈕在訂閱頁面的右下角出現,將按鈕和界面結合很容易看出創建內容的意思,同時點擊按鈕還可呼出圖文、視頻等操作圖標。


3.標簽按鈕


標簽按鈕往往呈多個出現,多使用在二級導航或條件篩選下面;以及表單頁面作為切換條件選中。因此在設計樣式上有選中狀態和默認狀態,同時其重要程度較低,在設計時不能喧賓奪主,需要弱化處理。如下圖所示:

Image title

以支付寶為例,它主要用在投保的表單頁面,其主要目的就是一個切換條件,重要程度遠不及我要投保按鈕,因此在設計時默認用的描邊處理;選中采用淡淡的色塊。


以轉轉為例,它主要用在導航下方,其主要目的也是切換條件,用戶主要操作是看下方篩選出的內容,因此在設計時也進行弱化處理。


4.表格按鈕


表格按鈕也就是由一個白色網格加文字組成的按鈕,從視覺上看和頁面融為一體,特別不突出。因此多用在個人中心中不太重要信息或者不想讓用戶操作的退出登錄界面中。如下圖所示:

Image title

以愛奇藝為例,在我的界面中,關于我們和退出登錄都是用的表格按鈕,由于關于我們是不太重要信息,退出登錄又是不想讓用戶操作的內容,因此采用表格按鈕最為合適。


5.命令按鈕


命令按鈕也就是該按鈕具有明確的指令,多出現在彈框中,通常會有一個文字或2個文字出現的情況。其要求是文字語義要明確,盡量不要用確定、好的、要等詞匯,同時根據用戶右手操作習慣居多,因此將重要的按鈕放在右側。如下圖所示:

Image title



以京東金融為例,左圖是京東金融退出的二次確認頁面,右圖是我調整文字之后的頁面。我們說到文字需要表意明確,因此將確定換成退出后表意更加直白,降低用戶理解度。


6.開關按鈕


開關按鈕也是我們很常見的一個組件。表示兩種相互對立的狀態間的切換,多用于表示功能的開啟和關閉。當按鈕開啟后可能還會帶來其他的相應操作。開關按鈕最常見的就是手機設置中,但是也有很多APP將其用到界面中使用。如下圖所示:

Image title



以美團外賣和小豬短租為例,它們在提交訂單頁面時都采用了開關按鈕,同時在小豬短租中,當按鈕打開底部會將“您可再入住完成10天內補全信息”進行展開顯示,提示用戶去填寫。這種點擊展開的操作還可增加更多的功能相關內容。



二、按鈕設計要點


1.根據產品為按鈕選擇適合的形狀


在按鈕設計時,需要根據整個界面風格設計合適的按鈕,按鈕樣式主要有直角、小圓角、全圓角三種樣式。

Image title

直角的含義:嚴謹、力量、高端。適用于金融類、奢品類產品中,讓產品給人嚴謹安全、高端的感覺。例如寺庫。


半圓角的含義:活潑、年輕、安全。適用于兒童類、年輕化、娛樂類、購物類的產品中,提升親和力,拉近用戶的距離。例如土豆。


小圓角的含義:穩定、中性。適用于用戶跨度較大的常規類產品中,例如微信。


Image title

以寺庫、微信、土豆為例,寺庫是品類電商,因此在設計時需要提現高端,因此在按鈕設計時采用直角設計。而微信的用戶群體上到七八十歲,下到幾歲其年齡范圍廣,因此采用穩重的小圓角較為穩妥。土豆短視頻其用戶群體較為年輕活潑,因此采用全圓角較為適合。


2.使用合適的狀態


在部分界面設計中需要考慮按鈕的不同狀態的設計,從而提高用戶操作流暢度。移動端完整的系統按鈕可以分為正常狀態、按壓狀態、禁用狀態。

Image title

其中,正常狀態和加載狀態展示的是APP的主色;按壓狀態在正常態的基礎上疊加不透明度15%的黑色#000;禁用狀態是設置灰色或者將正常態設置不透明度45%,該狀態適用于提交界面中使用,比如登陸注冊、轉賬等。如下圖所示:

Image title

以京東金融為例,當未輸入轉賬金額時,按鈕禁用為灰色,當輸入金額時按鈕為正常狀態。不過隨著互聯網的發展,寬帶速度不斷的提高,按壓狀態慢慢被拋棄,他存在的意義不像以前網絡不發達的時候,點擊還需要時間反應。


3.提供恰當的反饋


當用戶點擊按鈕時,他們希望界面可以給些恰當的反饋。如果沒有任何反饋,用戶會以為系統沒有收到他們的操作,然后就會重復點擊。這種行為常常導致多個不必要的操作。如下圖所示:

Image title



以土豆短視頻為例,當點擊關注時為了避免用戶點擊沒有反應的情況,可在按鈕上添加加載狀態,當關注成功后圖標狀態改為禁用狀態,同時文字變為已關注。



總結


按鈕設計看似簡單,但是如果想要更好的交互體驗,引導用戶進行相應的操作,提升產品的轉化率這仍是我們需要研究的問題。本篇主要將從按鈕功能類型和設計要點兩個方面進行歸納總結。


按鈕功能類型:主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關按鈕這六大類型。在使用我們需要根據對應的功能和重要程度選擇適合的設計。


按鈕設計要點:主要有根據產品為按鈕選擇適合的形狀;使用適合的狀態;提供恰當的反饋這三大注意要點。

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

 

日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
99久久伊人久久99| 综合激情成人伊人| 国产精品1区2区| 在线激情免费视频| 雨宫琴音一区二区三区| 97国产真实伦对白精彩视频8| 亚洲欧美激情诱惑| 99久久视频| 欧美在线视频观看免费网站| 国产一区二区不卡老阿姨| 欧美日韩国产精选| 韩国美女久久| 久久这里都是精品| 美女黄毛**国产精品啪啪| 欧美福利影院| 人人澡人人澡人人看欧美| 久久亚洲国产精品尤物| 米奇精品关键词| 久久精品二区亚洲w码| 日韩亚洲国产中文字幕欧美| 狠狠色丁香婷综合久久| 五月激情综合色| 日韩伦理一区二区三区| 欧美乱大交做爰xxxⅹ性3| 日韩福利一区二区三区| 亚洲美女视频在线| 欧美成人中文字幕在线| 欧美精品videossex性护士| 欧美精品在欧美一区二区少妇| 欧美激情在线看| 激情五月综合婷婷| 亚洲第一页在线| 伊人久久综合97精品| 亚洲国产中文在线二区三区免| 欧美日韩国产成人在线| 国产精品186在线观看在线播放| 亚洲成人自拍网| 最新国产在线观看| 日韩欧美一区二区三区在线观看| 538国产精品一区二区在线| 永久免费观看精品视频| 欧美精品久久| 亚洲欧美视频在线| 日韩中文字幕1| 亚洲欧洲日本在线| 中文字幕一区二区日韩精品绯色| 国产综合色视频| 色帝国亚洲欧美在线| 日韩免费在线电影| 综合激情一区| 亚洲欧美日韩精品| 欧美在线极品| 中文字幕日韩欧美| av电影一区二区| 亚洲男人的天堂在线播放| 秋霞午夜一区二区三区视频| 最新69国产成人精品视频免费| 风间由美一区二区av101| 精品999在线观看| av一区二区三区免费| 北条麻妃在线一区二区免费播放| 久久久之久亚州精品露出| 97se亚洲综合在线| 欧美在线免费| 国产精品成人观看视频免费| 国产一区二区三区久久悠悠色av| 成人全视频高清免费观看| 精品婷婷色一区二区三区蜜桃| 西西人体一区二区| 亚洲成a人v欧美综合天堂麻豆| 综合精品一区| 欧美日高清视频| 亚洲影院高清在线| 亚洲综合色丁香婷婷六月图片| 色婷婷国产精品综合在线观看| 国产精品一区二区不卡| 欧美日韩亚洲综合一区| 日韩经典一区二区| 久久最新资源网| 亚洲精品有码在线| 久久久久久久久久久av| 欧美日韩在线精品| 欧美午夜精品久久久久久孕妇| 91精品国产高清久久久久久| av在线不卡一区| 精品免费视频| 牛人盗摄一区二区三区视频| 亚洲欧美影院| 精品人伦一区二区色婷婷| 蜜桃av一区二区三区| 另类中文字幕国产精品| 在线观看日韩一区| 国产乱码精品一区二区三区不卡| 欧美性受xxxx黑人xyx| 在线成人激情| 亚洲国产精品久久久久婷婷老年| 国产成人精品免费视频网站| 久久最新网址| 一区二区三区无码高清视频| 视频一区日韩精品| 日韩情涩欧美日韩视频| 欧美尤物一区| 日本高清不卡aⅴ免费网站| 亚洲免费毛片| 久久成人免费网站| 中文字幕在线精品| 欧美丝袜一区| 国产极品嫩模在线观看91精品| 日日av拍夜夜添久久免费| 99riav一区二区三区| 欧美精品一区三区在线观看| 亚洲欧美一区在线| 日韩视频免费大全中文字幕| 国产va免费精品观看精品| 在线亚洲自拍| 综合久久2o19| 精品国产欧美成人夜夜嗨| 日本一区免费看| 亚洲视频精品| 欧美另类极品videosbestfree| 亚洲成人一二三| 欧美日韩一级片在线观看| 性久久久久久| 久久青草伊人| 重囗味另类老妇506070| 国产精品久久久久久久一区探花| 国产精品一线| 草草影院在线观看| 日韩高清中文字幕| 日韩久久久久久久久久久久久| 一区二区三区午夜视频| 91在线高清免费观看| 国内精品伊人久久久久av影院| 国产精品丝袜黑色高跟| 日本不卡在线观看| 亚洲综合999| 久久精品人人做人人爽电影| 黑人一区二区三区| 欧美国产视频日韩| 国产乱论精品| 99精品视频免费观看视频| 欧美电影院免费观看| 久久综合一区二区| 一二三四区精品视频| 葵司免费一区二区三区四区五区| 欧美精品情趣视频| 成人香蕉社区| 亚洲人成网站999久久久综合| 毛片av中文字幕一区二区| 成人欧美一区二区三区黑人麻豆| 亚洲黄色av| 尤物yw午夜国产精品视频明星| 欧美在线免费播放| 久久精品这里热有精品| 欧美色xxxx| 亚洲精品一区二区三区四区五区| 亚洲第一中文字幕| 久久国产精品色婷婷| 久久久久久久久久亚洲| 亚洲综合激情网| 亚洲欧美色图小说| 综合日韩在线| 欧美日韩中国免费专区在线看| 在线视频精品|