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

          首頁

          用研方法論:眼動與腦電研究

          ui設計分享達人

          眼動研究


          眼動原理:

          眼動追蹤

          是指通過測量眼睛的注視點的位置或者眼球相對頭部的運動而實現對眼球運動的追蹤。

          眼動儀

          是一種能夠跟蹤測量眼球位置及眼球運動信息的一種設備,在視覺系統、心理學、認知語言學的研究中有廣泛的應用。PC/IPHONE/CAR都可使用。


          常用指標:

          注視

          在獲取信息時,眼睛停留在所加工的物體上,稱之為“注視”,超過100毫秒,認知加工。

          眼跳

          在轉移加工對象時,人眼在兩個注視點之間的快速動,稱之為“眼跳”,注視點或注視方向發生改變,獲取時空信息,無認知加工。

          跟隨運動

          當測試者與眼睛存在相對運動時,為了保證眼睛總注視這個物體,眼球會追隨物體移動。眼球追隨物體移動,有認知加工。

          眼動的本質 = 人注意力資源的主動或被動分配,選擇更有用或更有吸引力的信息。


          常用分析:

          注視軌跡

          記錄測試者在整個體驗過程中的注視軌跡,從而可知測試者首先注視的區域、注視的先后順序、注視停留時間的長短以及視覺是否流暢等。  

          注視熱點圖

          用不同顏色來表示測試者對界面各處的不同關注度,從而可以直觀的看到測試者最關注的區域和忽略的區域等。

          興趣區分析

          考察測試者在每個興趣區里的平均注視時間和注視點的個數,以及在各興趣區之間的注視順序。

          例如:用戶視覺順序


          問題:確認按鈕位置不符合玩家瀏覽路徑。

          分析:圖中是玩家的視覺動線,玩家先看見確認按鈕再看見選擇角色區域,這不符合操作順序,很可能導致有些玩家忽略了選擇角色。

          建議:調整一下角色選擇的版面布局,可以考慮將確定按鈕放在選擇角色之下。


          例如:眼動注視時間及頻率分析(客戶管理軟件的導航可用性評估)

          測試用戶的注視時間統計見表1,可以明顯發現兩個版本在眼動注視時間區別:用戶在使用舊版的系統時,注視的時間比較長;

          測試用戶的注視頻率統計見表2,兩個版本在眼動注視頻率有明顯區別:用戶在使用舊版系統時,注視次數頻率比較高,無規律性;

          通過注視時間、注視頻率和方案評價等級的對比分析,可以得出評估等級越低(數值越低表示滿意度越高),用戶眼動注視時間越短,用戶在頁面搜尋的頻率相對越少,用戶在較短的時間內能找到想要的功能,頁面影響用戶的干擾越小。


          例如:網站的可用性對比測試

          對某網站改版前(圖7)和改版后的主頁(圖8)進行可用性對比測試,通過讓用戶瀏覽首頁(不做任何點擊)判定網站的主旨和類型,來捕捉用戶注視點的軌跡圖和記錄用戶在不同位置注視時間,對比網站主頁改版前和改版后信息傳達的有效性。

          經過對采集到的數據進行分析,可發現用戶在瀏覽改版前的頁面時,眼動軌跡混亂,掃描路徑長且很多相互交叉,注視點序列分散排布,用戶注視點變換快,無明顯的興趣點,如圖這些數據表明改版前的網站首頁布局不夠合理,沒有重點。

           

          眼動研究的局限性:

          1、可以讓用研工作變得越來越有技術含量,將會在用研工作中扮演越來越重要的角色。

          2、但是需要加以輔助測試(如定性訪談)來收集更多的實驗數據,并通過結合分析來得出更多、更有效的結論。


          眼動研究的價值:

          1、眼動研究是可用性測試、問卷調查、后臺數據挖掘等研究手段難以企及的,因為是最直接的反饋用戶使用情況的手段。

          2、通過眼動研究,不但可以完整地還原測試者在各個頁面的注視軌跡,還可以通過劃分興趣分析測試者在各區域內容的關注度。

          3、眼動研究提供的信息不只是人們是怎樣“看”東西這么簡單,眼動反映了人腦的信息處理過程,眼動模式的特點與腦部的信息處理都有密切的關系。


           眼動研究的具體價值的體現:

          獲取用戶瀏覽的行為和習慣

          當用戶打開一個頁面,用戶看了些什么,沒有看什么。什么東西最先獲得用戶的關注?這些信息是很重要的,因為很多時候用戶關注的東西與設計希望用戶看到的是不一樣的,這種差別會通過眼動數據直接顯示出來。


          幫助研究人員分析和澄清問題

          在可用性測試中,遇到用戶既無動作也不說話時,研究人員是最為迷惑的。此時用戶很可能執行任務受阻,而通過實時的眼動記錄觀測,研究人員可以間接地了解用戶的處境 - 用戶是在尋找什么東西,還是有什么東西令用戶困惑(來回注視),還是用戶忽視了相關的重要元素?研究人員可以帶著觀點假設,開展眼動研究來驗證或否決,發現導致問題的真正原因。


           實現研究結果的可視化

          呈現眼動研究結果最常用到的是熱點圖,顧名思義,熱點圖呈現的是人們視線的熱點,顏色越紅代表被聚集的越多。作為可視化手段起到了良好的信息傳達的作用。



          腦電研究


          腦電研究基于腦電波,腦電波是大腦在活動時,大量神經元同步發生的突觸后電位經總和后形成的,即由腦內億萬神經元引起的頭皮表面的電位變化。含有大量的心理信息,測量腦電信號可繪制成腦電圖,以不同的波形反映出來。


          不同的波形代表著不同的心理信息,比如:

          α波

          頻率為8~13Hz(平均數為10Hz),幅度為20~100μV。它是正常人腦電波的基本節律,如果沒有外加的刺激,其頻率是相當恒定的。是大腦皮質處于清醒、安靜、閉目狀態時腦電活動的主要表現,睜開眼睛(受到光刺激)或接受其它刺激時,α波即刻消失。

          β波

          頻率為14~30Hz,幅度為100~150μV。是大腦皮質興奮的表現,當精神緊張和情緒激動或亢奮時在額葉出現此波,當人從噩夢中驚醒時,原來的慢波節律可立即被該節律所替代。

          θ波

          頻率為4~7Hz,幅度為5~20μV。在成年人意愿受挫、困倦、失望、抑郁等情緒刺激時以及精神病患者中這種波極為顯著。但此波為少年(10-17歲)的腦電圖中的主要成分。

          這些不同的波形反映了測試者所處的心理狀態。


          腦電研究是什么?

          一般來說,原始的腦電波需要一些技術處理才能讀懂,借助腦電數據分析工具,我們可以把復雜的大腦波形整理成有一個起點,然后是不同波形分布的雜合:


          經過更復雜的技術處理,我們甚至可以得到一條總體的波形圖:


          腦電波(EEG)在醫學領域已經應用了幾十年,通過對腦電信號的處理與分析,我們能了解對象的認知過程和情緒反應,目前已經逐步商用化。

          近些年,神經營銷學、神經電影學楷書走進人們的視野。前者通過腦電波等手段測量消費者觀看廣告、描述產品時的腦電情況,以此來解釋、預測他們的消費行為。后者采用腦成像技術等手段量化恐怖電影的效果,甚至考察觀眾們神經活動的同步性(群體卷入性)來檢查電影控制人們思維和情緒變化的能力。


          腦電研究的應用:

          360度游戲研究


          基于認知神經科學,無需語言,獲知他們對產品的情緒、喜好、關注點、興奮度...因為它研究的是大腦的源頭。

          除了學術界,全球眾多頂尖的游戲公司公認情緒在游戲中的重要性,并致力于打造更加Emotional(情緒化的)游戲。

          • 并不是越積極越好

          • 必須能夠喚起強烈的情緒反應

          • 讓玩家情緒不斷波動,正負情緒互相轉化


           一款成功的游戲:必須要讓玩家達到沉浸和心流情緒狀態。有三種衡量指標:


          沉浸感(IMMERSION)

          定義:參與、融入、代入感的程度

          游戲體現:故事性、技巧性、策略性、畫面效果、音效、風格

          心理體驗:強參與感、脫離現實、忘記時間、很上癮

          情緒體現:強烈的正負情緒的交替


          情緒指數EMO.I

          游戲引起玩家的情緒反應。積極的情緒反應體現玩家玩的非常開心,而消極情緒反應可能提示游戲讓玩家產生了受挫感。

           

          心流體驗(FLOW)

          定義:非常專注,非常有動力的全身投入,并非常享受的精神狀態。

          游戲體現:游戲機制、難易度平衡、目標性、反饋。

          心理體驗:持續專注、忘我投入、成就感。

          情緒體現:正向情緒為主,正負形撥動;緊張感積累,完成挑戰的成就感。


          生理指標

          游戲帶給玩家生理上的緊張程度,SCL值越大,表示游戲越刺激,玩家玩的越緊張,而SCL越低,表示游戲可能給玩家帶來了相對無聊的體驗。


          腦電波和生理指標告訴你玩家的情緒狀態




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

          文章來源:站酷 作者:61嘀嘀
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          競品分析-今日頭條、一點資訊和網易新聞

          ui設計分享達人

          隨著互聯網的發展,人們閱讀新聞資訊的方式也從紙質閱讀轉變為電子閱讀。

          本文以今日頭條、一點資訊和網易新聞這三款應用為競品,從交互和視覺兩方面進行對比分析,討論一下產品中值得我們學習的設計點以及可以進一步優化改進的地方。

          目錄

          一、體驗環境

          二、交互對比

          三、視覺對比

          四、思考與總結

          一、體驗環境

          手機型號:iPhone 8 plus

          手機系統:ios 12.1

          應用版本:今日頭條V8.5.0   一點資訊V5.9.8.0   網易新聞V86.0

          二、交互對比

          2.1 首頁-導航欄-搜索

          今日頭條:搜索框內有默認的文案,在首頁瀏覽內容時,文案一直處于靜態。點擊搜索框進入搜索頁之后再返回首頁,搜索框內文案才會改變,改變的方式是由下往上滾動播出,搜索icon靜止不動?;蛘咴谒⑿陆缑鏁r,文案也會改變。

          一點資訊:搜索框內同樣有默認文案,但不是靜態的,文案在搜索框內滾動播出。第一次打開應用時,有一條紅色漸變線圍繞著搜索框逆時針旋轉兩圈,此時的默認文案是“搜一搜你感興趣的內容”,漸變線旋轉兩圈之后,搜索框內文案發生改變,按照搜索頁熱榜的排序滾動播出。在首次打開產品或者從其它界面跳轉到首頁時,動態漸變線都會出現。

          網易新聞:搜索框內同樣有默認文案,而且也不是靜態的,文案和搜索icon一起滾動播出,播出順序按照搜索頁熱搜話題的排序進行。

          對搜索的設計,若搜索框內文案一直處于靜態,這對用戶實時了解新聞是不利的,當前社會發展迅速,信息更新速度比較快,短時間內就會有不同的新聞出現,文案在搜索框內滾動播出是比較好的選擇。這既有利于用戶掌握新聞動態,又能增加內容的曝光度。一點資訊動態的漸變線是一個非常有趣的設計點,可以吸引用戶更多的注意力,引導其進行搜索。

          2.2 首頁-導航欄-發布

          今日頭條:點擊發布icon,從屏幕下方彈出發布界面。發布界面承載的內容很多,占據了除狀態欄之外的整個界面空間。在發布界面點擊輸入框,界面還會跳轉到單獨的編輯內容頁,在編輯頁可輸入想要發布的內容,輸入完畢后直接點擊發布按鈕即可。若編輯內容后不想發布了,點擊取消,會有彈窗出現,進行操作提示,點擊之后直接返回首頁;若把編輯的內容全部刪除再點擊取消,就不會有彈窗了,界面就會直接回到首頁。若用戶只是點擊了首頁的發布icon,進入到發布界面,并沒有進入編輯內容界面,要退出的話可以向下滑動,或者點擊關閉按鈕即可。

          在發布界面,有一個“邀請你參與討論”的模塊,該模塊的最后一條文案露出一半,告知用戶在該部分下方還有未展示的內容,向上滑動可以查看更多。

          一點資訊:在首頁點擊發布icon之后,同樣會從屏幕下方彈出發布界面,發布界面承載的內容非常少,僅提供了三個功能,即發視頻、拍小視頻、寫短內容。點擊前兩者即可進行發布視頻的相關操作,點擊寫短內容之后,界面會跳轉到編輯內容頁,和今日頭條的設計類似,如在編輯界面輸入內容后點擊返回,會有彈窗提示,若編輯界面沒有內容,就會直接返回首頁。在發布界面要想退出,可以點擊關閉按鈕,或者點擊黑色遮罩層。

          網易新聞:首頁沒有提供發布功能,在個人中心界面可以發布動態,在發布界面可以直接輸入想發布的內容。和前兩者類似,在發布界面有內容的情況下退出,界面會有彈窗提示,若發布界面沒有任何內容,就可以直接返回個人中心頁。

          對提示彈窗的設計,今日頭條和一點資訊用的都是iOS官方設計指南給的警告框  (Alerts) ,不支持點擊遮罩層將其關閉,用戶必須做出操作才行。只不過今日頭條包括三個選項按鈕,一點資訊只有兩個。其實網易新聞和一點資訊的設計是相同的,只是網易新聞對源生警告框進行了自己的設計。兩者標題傳達的主要意思一致,但按鈕的位置不同,一點資訊把保存按鈕放在了左邊,網易新聞卻正好相反,放在了右邊。但兩者都對其進行了重點設計,一點資訊將字體加粗,網易新聞將按鈕用顏色填充。

          官方給的建議是肯定性操作放在右邊,否定性操作放在左邊。這里的肯定與否定并不是簡單的字面意思,而是說要把用戶最有可能點擊的按鈕放在右邊,取消操作按鈕放在左邊。例如,當用戶想刪除某些內容時出現彈窗提示,此時用戶想要點擊的是刪除按鈕,面對這種情況,就應該把刪除按鈕放在右邊,而非左邊。對于文中的情況,用戶點擊返回或者取消的意圖是想退出界面,也就是編輯頁輸入的內容不想發布了,此時的正向操作是不保存,所以一點資訊按鈕擺放的位置是嚴格按照官方指南給的建議設計的。網易新聞將保存按鈕放在右邊,其實是想讓用戶點擊保存,即便是出于某些原因用戶想退出界面,將輸入的內容暫時存為草稿也是滿足了一部分用戶的需求。

          2.3 首頁-導航欄-補充

          今日頭條:無補充。

          一點資訊:點擊搜索框內的耳機icon,可以直接將滾動選項卡定位到“一點音頻”模塊,這里的“一點音頻”和點擊底部標簽欄切換到的界面是相同的,可以看出一點資訊對音頻模塊的重視。

          網易新聞:導航欄的頂部左側是網易的logo,點擊可進行刷新。這是與今日頭條和一點資訊不同的刷新方式,后面討論刷新的時候會再次提到。除此之外,導航欄還提供了“網易熱榜和消息通知”。

          2.4 首頁-滾動選項卡

          滾動選項卡(scrollable tabs)的切換方式,三者均支持左右滑動和點擊兩種交互手勢。

          2.5 頻道定制頁-編輯標簽

          點擊菜單欄icon,進入頻道定制頁,界面從屏幕底部彈出,三個產品均是如此。這和前面提到的點擊發布icon,進入發布界面的跳轉方式一致。

          今日頭條:點擊編輯按鈕或者長按可以對某個標簽進行操作,拖動可進行排序,標簽呈抖動狀態。點擊添加,可以將感興趣的話題添加到“我的頻道”模塊,新增加的標簽添加到“我的頻道”的最后一項,并且利用徽標 (badge) 進行提示。點擊刪除按鈕,標簽從“我的頻道”中消失,并且自動歸類到界面下方的幾個分類中。下拉或者點擊關閉按鈕可以退出頻道定制界面。

          一點資訊:點擊編輯按鈕或者長按可以對某個標簽進行操作,拖動可進行排序。點擊添加后,新增加的標簽添加到“我的頻道”模塊自定義標簽的第一項(即“關注、推薦”之后),并利用徽標(badge)進行提示。點擊刪除按鈕,標簽從“我的頻道”中消失。想退出頻道定制界面需要點擊關閉按鈕。

          網易新聞:和前兩者一樣,點擊編輯按鈕或者長按可以對某個標簽進行操作,拖動可進行排序。點擊添加后,新增加的標簽添加到“我的欄目”自定義標簽的最后一項,但沒有徽標(badge)提示。點擊刪除,被刪除的標簽歸類到“最近刪除”模塊。想退出頻道定制界面需要點擊關閉按鈕。

          標簽呈可編輯狀態時,只有今日頭條額外進行了動態設計,一點資訊和網易新聞只是從視覺上呈現出來,多了刪除圖標,告知用戶標簽可編輯。個人認為,今日頭條的設計更合適一些,而且抖動狀態也和手機桌面對應用進行調整或刪除時的交互狀態一致,與用戶的認知相符。

          添加標簽后,新增標簽在選項卡中的位置,一點資訊的排序更合適一些。用戶將某個標簽添加到定制模塊,說明近期在使用產品的過程中,更希望看到與所選標簽相關的內容,將標簽盡量前置是最合適的排序方案,而且最好利用徽標(badge)進行提示。

          在刪除標簽方面,網易新聞的設計更合適,用戶將標簽刪除,說明對相關話題不感興趣,那么被刪除標簽的去向就不那么重要,但是也不排除用戶因為誤操作將標簽刪除的情況,這時網易新聞就提供了一個讓用戶反悔的機會,那就是將最近刪除的標簽歸到一類,用戶可以一目了然,準確進行頻道定制。

          2.6 頻道定制頁-向上滑動

          今日頭條:在頻道定制界面向上滑動,當“熱門精選”模塊滑動到navbar的位置時,文案置頂顯示,“熱門精選、生活娛樂、體育財經、科教文藝、其它”幾個部分相當于選項卡的形式。隨著界面向上滑動,選項卡自動定位到相關模塊。這里的選項卡不支持左右滑動的交互手勢,但可以通過點擊切換。

          一點資訊:點擊“換一換”,就可以對“添加頻道”的標簽進行換新。

          2.7 新聞詳情頁-導航欄-聽音頻

          今日頭條:在新聞詳情頁中,導航欄設置了聽音頻和搜索的功能,搜索功能比較常見,這里著重分析一下聽音頻功能。點擊耳機icon,界面出現彈窗,音符跳動,說明當前新聞正在播放音頻,導航欄耳機icon也會變為音頻播放模式。再次點擊耳機icon,可暫停播放,音符不再跳動。

          點擊彈窗,新聞文字出現黑色遮罩層,彈窗高亮顯示。點擊黑色遮罩層,可返回閱讀新聞,音頻繼續播放,彈窗收起,但不會消失。在彈窗內,新聞標題一直滾動播出(無論音頻是播放狀態還是暫停),操作按鈕包括暫停、播放下一個、關閉當前音頻。點擊播放下一個按鈕,彈窗內的縮略圖、新聞標題和音頻內容變為下一個,當前新聞文字不會變更。點擊關閉,退出音頻播放,彈窗消失。

          音頻處于播放或者暫停狀態時,退出新聞詳情頁,彈窗不會消失,位置固定。

          一點資訊:在新聞詳情頁中,沒有提供聽新聞功能,但是首頁滾動選項卡和tabbar都有“一點音頻”模塊,兩者除了導航欄設置不同之外,界面其它內容完全相同,這一點前文提到過。用戶可進入該界面播放音頻內容,模塊分類眾多。

          在一點音頻界面,點擊想播放的內容,界面跳轉至二級界面,在二級界面用戶可見音頻詳情和播放列表。當前播放內容的字體用品牌色呈現,且有音符跳動提示,百分比按播放進度顯示,點擊該模塊可進入下一級界面。

          由二級界面返回一點音頻主界面,若此前沒有聽過音頻,那么在主界面會增加用戶收聽歷史的相關模塊。在主界面內有圓形縮略圖,像唱片一樣。點擊縮略圖,窗口展開,播放時縮略圖順時針旋轉,文案滾動播出。只有文案字數過多時滾動播出,字數不多就呈靜止狀態,而且只有在播放時滾動,暫停狀態時,文案靜止。和今日頭條一樣,可對音頻進行操作,包括暫停、播放下一個和關閉,但不管用戶是否點擊上述按鈕,窗口在展開幾秒之后都會自動收回。今日頭條在點開窗口之后會有遮罩層,點擊遮罩層,窗口才會收回,這是兩者不同的地方。

          在使用網易新聞的過程中,沒有發現聽音頻的功能。

          2.8 新聞詳情頁-導航欄-更多功能 

          三個產品還把一些功能放在了導航欄的更多中(三個點),點擊更多,界面出現底部彈窗,即活動視圖(Activity Views)。今日頭條和網易新聞活動視圖的背景和界面里的icon一起彈出,而一點資訊的背景和icon依次出現,并且icon與icon之間還有時差,這些小動效的運用使產品用起來更加有趣,充滿活力。

          2.9 新聞詳情頁-導航欄-字體調整

          在更多功能中,三個產品均可以對字體大小進行調整。今日頭條和一點資訊只能通過點擊icon,之后再拖動滑塊進行設置,而網易新聞不僅可以如此,還可以通過雙指縮放大小,充分發揮了手勢交互的優勢,減少了用戶的操作成本。無論是調節滑塊還是雙指縮放,網易新聞都會有toast浮層進行提示,而不僅僅是遮罩下文字大小的變化。

          2.10 新聞詳情頁-向上/向下滑動

          今日頭條:在新聞詳情頁,隨著界面向上滑動,作者頭像、作者名稱和關注按鈕在導航欄顯示,向下滑動,導航欄無變化。

          一點資訊:在詳情頁閱讀新聞,導航欄的變化和今日頭條一樣。向上滑動,作者頭像、作者名稱和關注按鈕在導航欄顯示,向下滑動,導航欄無變化。

          網易新聞:隨著界面向上滑動,作者頭像和名稱在導航欄顯示,關注按鈕消失,跟貼人數按鈕由線性改為面性。界面向下滑動,導航欄出現關注按鈕。

          在新聞詳情頁閱讀內容,向上或者向下滑動的過程中,三個產品界面的設計大同小異。這時與競品拉開差距的關鍵便取決于一些小的設計細節,三個產品對比,關注按鈕的呈現方式有所不同。

          今日頭條的導航欄右側已經放置了三個icon,所以把關注按鈕放在了界面左側,作者名稱的后面,在向上閱讀內容的過程中,關注按鈕一直放置在導航欄。一點資訊的關注按鈕放在界面右側用戶更便于點擊的區域,和今日頭條一樣,在向上瀏覽內容閱讀新聞時,按鈕一直在導航欄。網易新聞只有當用戶向上滑動界面后再向下滑動,反復閱讀內容時,關注按鈕才會出現在導航欄左側,作者名稱的位置。

          個人認為,網易新聞的設計更加的人性化,用戶閱讀新聞,只有對內容感興趣才會反復觀看。當界面向上滑動之后再下滑,就是用戶反復閱讀的表現,用戶可能會對同一作者發布的其它內容也感興趣,此時導航欄通過動效呈現關注按鈕,恰到好處,剛好可以引導用戶關注作者。

          2.11 新聞詳情頁-評論

          閱讀新聞的過程中,想要觀看評論,點擊界面底部評論icon,產品會自動定位到第一條評論,今日頭條的icon無變化,一點資訊和網易新聞的icon都會隨之改變,再次點擊icon之后,新聞會自動回到上次閱讀的位置。

          對于第一次點擊評論icon之后,icon需不需要有所變化,我認為一點資訊和網易新聞的設計方式更合適一些,即有所變化。這樣用戶在瀏覽內容時,就可以從視覺上充分了解自己處在界面的什么位置,而不需要通過上下滑動界面來定位。

          網易新聞:點擊底部評論icon,定位到的是新聞詳情頁的第一條評論,這是上文提到的情況,但若是點擊導航欄的跟貼人數按鈕,界面則會跳轉到單獨的評論界面。

          2.12 新聞中包含視頻

          若新聞中包含視頻,并且視頻處于暫停狀態時,三個產品的處理方式是一樣的,向上滑動界面,視頻和文字一起隱藏,就和閱讀純文字的新聞一樣。

          若視頻處于播放狀態,向上瀏覽內容,三個產品的處理方式各有不同。

          今日頭條:播放的視頻窗口會始終懸浮在界面的上半部分,通欄顯示。

          一點資訊:和今日頭條不同,若視頻處于播放狀態,向上瀏覽內容,視頻窗口還是會隱藏,并且會一直播放。

          網易新聞:若視頻處于播放狀態,向上滑動界面,視頻會在較小的窗口播放,同時右側呈現新聞概要,該模塊會一直懸浮在界面的上部分。點擊“放大窗口”,播放窗口被放大,但會留有邊距,占據和文字一樣的界面寬度。

          若在新聞中包含視頻,且視頻處于播放狀態,個人是不建議學習一點資訊和純文字新聞一樣的處理方式的。今日頭條和網易新聞的方案比較合適,但兩者也有差別。用戶能夠點擊進入新聞詳情頁,說明已經通過上一級界面的標題文案對內容有一個基本的了解,點擊播放按鈕就是想觀看視頻,網易新聞多的一步放大窗口的操作,只是增加了用戶的操作成本,沒有太大的必要,所以今日頭條的處理方式更合適一些,建議學習。

          2.13 已讀內容狀態可見

          在詳情頁閱讀之后,點擊返回按鈕或者向左滑動屏幕返回首頁。閱讀過的新聞,文案變為灰色,提示用戶此條新聞已經閱讀過了,做到狀態可見。

          2.14 同類型關鍵詞條的搜索提示

          在詳情頁閱讀完某條新聞后返回首頁,今日頭條會有同類型關鍵詞條的搜索提示。一點資訊和網易新聞返回后,也只是前文提到的,新聞文案會呈灰色。今日頭條根據用戶已經閱讀的新聞內容提取關鍵詞,進行搜索提示,用戶很大程度上會點擊,這樣就可以提高產品的用戶活躍度。這是一個非常新穎的設計點,建議學習。

          2.15 點擊新聞的關閉按鈕 

          每條新聞的右下角都有一個關閉按鈕,點擊之后出現遮罩層和彈窗。彈窗不是顯示在界面中某個固定的位置,而是根據新聞模塊所處的位置不同而改變,彈窗與關閉按鈕之間的距離固定。在彈窗選擇想要關閉該條新聞的原因,點擊之后,彈窗和遮罩層自動消失,產品給用戶反饋“將減少類似內容”的相關推薦。

          今日頭條給用戶反饋的彈窗出現在界面內容區域的頂部,即滾動選項卡的下方區域,且采用灰色不透明背景層承載文案,與產品界面背景的顏色差異性不大,對用戶干擾性較小,提示作用較弱。一點資訊和網易新聞的提示彈窗均出現在界面中間部分,且采用的是黑色遮罩層作為文案背景,對用戶的干擾和今日頭條相比較大一點,更能起到提示的作用。

          我個人更傾向于使用第一種彈窗,用戶既然選擇了關閉該條新聞資訊,就說明對相同類型的內容不感興趣,基于大數據自然要減少類似內容的推薦,這是意料之中的事,彈窗浮層應該對用戶的干擾越小越好,這樣用戶就可以集中注意力繼續瀏覽其它內容。

          2.16 刷新

          三個產品都設置了兩種刷新的交互手勢,點擊tabbar的首頁icon或者下拉,這兩種刷新方式都比較常見。網易新聞除了前兩者之外,還設置了第三種,即點擊navbar的網易logo進行刷新,這是與前兩者不同的地方。

          當用戶向上滑動,閱讀了幾屏之后,tabbar的首頁icon會有刷新提示,詳細情況在視覺分析部分再討論。用戶刷新內容,產品自定義了加載動畫,加載完成之后,會有信息反饋給用戶,提示其已完成內容刷新,并且標明刷新信息的數量。

          個人認為,網易新聞第三種刷新的方式雖然很獨特,但是由于logo所處的位置在整個界面的頂部,無論用戶是左手持機,還是右手持機,都是很難觸控到的區域,這樣的加載方式通常也用不到,只是增加了開發成本。我猜測,網易新聞可能是想加強產品的品牌感,所以把logo放在了界面頂部,但又不想僅僅占據界面空間,所以增加了刷新的功能。 

          2.17 視頻頁

          三個產品在標簽欄都為視頻設置了單獨的界面。

          今日頭條:點擊播放按鈕,視頻開始播放,播放過程中點擊視頻所在區域,進度條在黑色遮罩層上呈現。今日頭條有一個和其它產品明顯不同的功能,就是在視頻區域的右上角支持音頻播放模式。

          點擊音頻播放按鈕,界面會跳轉到下一層級,此時在二級界面,音頻會從點擊按鈕之前視頻播放到的時間點開始。

          由音頻播放界面返回,在視頻界面會有音頻播放的彈窗,這和前文提到的聽新聞的交互狀態一致,而且視頻畫面還是停留在點擊音頻按鈕之前,在視頻界面音頻仍處于播放狀態。倘若點擊視頻的播放按鈕,音頻就會暫停播放,視頻從音頻播放到的時間點開始。

          一點資訊:點擊播放按鈕,視頻開始播放,播放過程中點擊視頻所在區域,進度條在黑色遮罩層上呈現。值得學習的是,在視頻處于暫停狀態時,作者的關注按鈕和視頻的分享按鈕都是隱藏起來的,在用戶點擊播放之后,兩個按鈕才會通過簡單的動效呈現出來。

          網易新聞:點擊播放按鈕,視頻在單獨的界面播放,這是與其它兩個產品不同的地方。并且界面背景采用黑色,這樣視頻區域更加聚焦,各項功能按鈕更加明顯。當前視頻播放完畢之后會自動循環從開始繼續播放。若向上滑動則會播放下一條視頻,這里的下一條視頻不是一級界面視頻頁排版中排在當前播放視頻下方的,而是播放界面根據用戶數據另外推薦的其它視頻。此時若要播放一級界面中的下一條視頻,還需要點擊返回或者左滑才可以。視頻播放界面提供了一部分功能按鈕,還有一些不常用到的收在了更多中(界面右上角的三個點)。

          從視頻處于暫停狀態到點擊播放視頻,今日頭條和一點資訊的界面交互設計是類似的,不同的是一點資訊運用了動效來顯示關注和分享按鈕。前文提到過,動態設計可以很好的吸引用戶注意力,這樣既可以引導用戶點擊關注和分享,從而加強產品的用戶活躍度,又可以讓產品用起來更有趣味,用戶體驗更好一些。所以,一點資訊的設計方式更值得學習。

          網易新聞將視頻放在單獨的界面播放,這是和當前兩大短視頻平臺(抖音和快手)相同的表現方式,比較容易讓用戶集中注意力,關注視頻內容。可是,魚與熊掌不可兼得,若想要播放一級界面內的其它視頻,就要增加用戶的操作成本,這是與前兩者不同的地方。

          兩種視頻的播放方式都比較常見,至于哪種呈現方式更好,就需要具體問題具體分析了,這里不再詳細討論。

          2.18 網易新聞-圈子

          網易新聞的圈子界面,在瀏覽內容的過程中,倘若在某個模塊停留幾秒,產品會自動彈出評論的對話框,系統會認為你對這個話題感興趣,可能有一些觀點要發表,這是網易新聞設計人性化的地方。在我用過的產品中,微博手機客戶端也有類似的設計。

          三、視覺對比

          3.1 整體布局

          今日頭條:對內容進行劃分的方式有兩種,首頁、視頻、放映廳三個主要界面,均采用白色背景+淺灰色分割線,個人中心界面采用灰色背景+白色圓角卡片。

          一點資訊:同樣采用了兩種方式進行內容劃分,其中首頁和一點音頻頁采用的是白色背景+淺灰色分割線,其實一點音頻頁的多彩圖標區和相聲評書之間也可以算是留白分割,短視頻頁和個人中心頁采用的是灰色背景+白色通欄卡片,小視頻頁則是兩列feed流卡片。

          網易新聞:四個主要界面均采用的是灰色背景+白色圓角卡片,但是個人中心頁的卡片寬度比其它三個界面略窄,這一點不太符合統一性原則。

          內容分割的方式一般有三種,分別為留白分割、線性分割、卡片分割。留白分割適用于內容較少的產品,這樣界面簡潔清晰。當信息內容較多時,若采用留白分割的方式就會浪費很多空間,這時就可以采用線性分割的方式,讓信息內容展示清楚的同時又可以充分利用界面空間??ㄆ指钍菍⑿畔⒛K化,每個卡片單獨承載一組內容,卡片與卡片之間的區分更加明顯。無論是什么產品,最好不要出現兩種以上的信息分割方式,不然界面會顯得很混亂。

          新聞資訊屬于高密度內容的產品,最好是采用線性分割或者卡片分割的方式,這樣既可以把信息內容展示清楚,又可以提高屏效。此次分析的這三款產品基本上也都是采用的這兩種分割方式。個人更建議學習網易新聞的設計,每個卡片單獨承載一組內容,卡片與卡片之間區分明顯,卡片內部利用留白進行信息層級的劃分。

          3.2 首頁

          產品品牌感傳遞的方式有很多種,色彩的運用是很重要的一個途徑。比如,提到藍色大部分用戶首先想到的產品是支付寶,提到綠色首先想到的是微信。除了用在logo中,在產品的界面元素中合理恰當的運用品牌色,也可以進一步加深用戶對產品的印象。

          首頁statusbar和Navbar的背景色,今日頭條采用的是品牌色。一點資訊默認是白色,但可以在設置里對背景色進行定制。網易新聞默認是品牌色,同樣在設置里可以更換。

          一點資訊:設置里的主題包括官方經典、天空藍、太陽橙、翡翠綠和海軍藍一共五種顏色,滾動選項卡字體選中狀態跟隨主題顏色同步變化。

          網易新聞:設置里的主題包括官方經典和極簡主義兩種模式。

          三個產品tabbar的未選中狀態均為灰色線性icon,選中狀態均為品牌色面性icon。首頁icon在不同情況下,會有不一樣的呈現方式,見下圖。

          3.3 搜索頁

          今日頭條:搜索頁熱點新聞會用紅色描邊+紅色文案的標簽來呈現,以此來吸引用戶注意力。并且頭條熱榜的排序也會用紅色數字來呈現前三名,灰色數字呈現之后的名次。

          一點資訊:搜索頁的熱榜文案前面還添加了小的icon,并且榜單排序的數字從第一名到第三名雖然都用了彩色,但隨著熱度的遞減,顏色從紅色到橙色漸變,這樣設計比今日頭條單純的用紅色更能突顯層次。但是,今日頭條運用了紅色描邊+紅色文案的提示標簽,一點資訊卻沒有類似的設計。

          網易新聞:“網易熱搜”文案進行了單獨的字體設計,排序數字前三名用彩色icon呈現,提示標簽根據“沸”、“熱”和“新”的區分,背景采用不同顏色。在搜索頁點擊“查看完整榜單”可跳轉到網易熱榜單獨界面。在該界面,頭部用紅色作為背景,這點符合用戶的認知,紅色是熱鬧與沸騰的代名詞,同時用橙色和黃色作為輔助色,來表現界面的裝飾元素。

          三者相比較,網易新聞的搜索頁設計感更強,值得學習的地方更多一些。

          3.4 頻道定制頁

          今日頭條:頻道定制界面分為“我的頻道、為你推薦、熱門精選、生活娛樂、體育財經、科教文藝、其它”幾個模塊?!拔业念l道”部分主要采用灰色底+黑色文案?!盀槟阃扑]”模塊采用彩色底+黑色/灰色文案,每個細分部分還有與背景色同色系的icon?!盁衢T精選、生活娛樂、體育財經、科教文藝、其它”幾個部分均采用灰色描邊+黑色文案。每個標簽文案的字體大小一樣,均為15號。

          一點資訊:“我的頻道”和“添加頻道”的標簽均采用的灰色底+黑色文案。每個標簽對文案字數進行控制,最多為4個字。文案字體大小保持統一,均為14號。

          網易新聞:“我的欄目”和“更多欄目”的標簽均采用的灰色描邊+黑色文案。文案在保證辨識度的情況下,在標簽內顯示,字體最小為9號,最大為16號。

          三個產品均采用了4列的排版方式。個人認為今日頭條的設計更合適一些,“我的頻道”的標簽采用灰色底+黑色文案,未添加進“我的頻道”的標簽采用灰色描邊+黑色文案,兩者不僅可以從位置上進行區分,從視覺樣式上還形成了對比。

          3.5 首頁排版

          首頁信息流主要包括大圖、三圖、左文右圖和視頻,三個產品均采用的是樣式穿插的排版方式。這樣設計,于產品而言,體現了內容的多樣性,避免信息流結構過于單一;于用戶而言,可以減小閱讀過程中的視覺壓力,使眼睛得到緩解,一舉兩得。

          新聞資訊類產品排版采用左文右圖還是左圖右文,一直是一個值得討論的點。分析的這三款產品均采用的是左文右圖的排版方式,但是也有一些產品采用的是左圖右文,例如澎湃新聞。到底哪種排版方式更適合自己的產品,我們需要具體問題具體分析,這里不再詳細討論。

          3.6 新聞詳情頁-字體

          字體屬性是在將文字大小設置為標準的情況下個人手動測量,可能存在誤差。

          三個產品的標題和正文均采用的是iOS默認字體蘋方-簡,但網易新聞在設置里還提供了其它幾種字體選項,用戶可自行下載使用。字體的字號、字重和行間距,各產品相差不大,只是一點資訊正文的字間距和今日頭條、網易新聞相比有一些差別,一點資訊字間距相對較小一些。

          排版方面,中文文案的段落與段落之間是通過首行縮進或者段間距的方式進行劃分。今日頭條的段間距和其它兩者相比較小一些,所以又進一步采用了首行縮進的方式,一點資訊和網易新聞的段間距較大,完全可以起到劃分段落的作用,所以兩者均采用了左對齊的排版方式。

          其實,這兩種排版方式都比較常見,首行縮進兩個文字是我們一直以來的中文排版規范,相對規矩傳統一些;左對齊排版從視覺上來說更加美觀、整齊。

          3.7 新聞詳情頁-評論區

          評論區的設計基本上都是用戶個人信息+評價文案+其他用戶回復。今日頭條和一點資訊的評論與評論之間用留白的分割方式,網易新聞采用的則是灰色通欄分割線。

          今日頭條用戶昵稱字體使用黑色,將其加粗,與評價文案形成對比,而一點資訊的用戶昵稱用的是藍色字體,從顏色上形成反差,對比更加明顯。網易新聞用戶昵稱的字體顏色根據用戶等級不同,顏色分為紅色、橙色和黑色,昵稱后面還用彩色icon+文案給用戶貼上了等級標簽。

          三個界面一對比明顯可以看出,網易新聞評價文案的字間距太小了,過于密集,這樣不利于對文案內容的識別,今日頭條和一點資訊對字間距的設置更合適一些。網易新聞這里的截圖評價文案字數比較少,視覺感受可能不太明顯,感興趣的朋友可以親自打開應用體驗一下。其他用戶對評價的回復,今日頭條和網易新聞都放在了下一級界面中,一點資訊則在當前評論區內展示,并通過灰色背景進行對比區分。

          今日頭條和一點資訊評論區的設計簡潔清晰,網易新聞則更注重熱鬧氛圍的表現,除了對用戶等級進行了劃分,對比較精彩的評價文案還加蓋了印章,這也是對用戶的一種鼓勵機制,可以激勵大家多發表評論,從而加強用戶活躍度,提高產品的用戶留存率。

          3.8 視頻頁

          視頻界面三者均采用的是豎向單列信息流的形式,并且視頻播放區域大致都是16:9。

          今日頭條將作者信息、視頻文案和操作功能按鈕都放在了播放區域之外,所以一屏之內僅展示一個半視頻模塊。一點資訊將視頻文案放在了播放區域,用黑色遮罩層做背景,增強文案識別度,這樣就提高了界面空間利用率,一屏之內可以容納兩個半視頻模塊。網易新聞的視頻界面留出了運營資源位,banner占據了一定的界面空間,雖然將視頻的作者信息進行了弱化,但是文案字體和其它兩個產品相比較,又占據了較多的縱向空間,所以一屏之內可以容納一個多的視頻模塊。

          個人認為,一點資訊的設計更好一些。將文案放在播放區域,這樣可以提高屏效,讓一屏之內盡可能展示多的視頻模塊。同時為了讓界面更有呼吸感,將關注和分享的按鈕隱藏,點擊播放之后,按鈕才會通過動效呈現出來。

          3.9 個人中心頁

          三個產品的重點都在引導用戶進行注冊或登錄上,因此界面最吸引人注意力的就是品牌色的登錄按鈕。

          今日頭條:界面簡單清晰,把較重要的功能icon用品牌色呈現,并且根據統一性原則,與其它icon保持一致,采用線性。由于首頁右上角有發布按鈕,這里再一次提及此功能,就沒有重點表現,同樣采用了線性的按鈕。

          一點資訊:除了登錄按鈕之外,最重要的就是運營區域了,界面中的其它icon均采用的是線性呈現。

          網易新聞:界面承載的內容很多,除了登錄、運營資源位,還提供了簽到功能。網易新聞把發布功能放在了個人中心頁,其它的界面沒有提及此功能,因此,為引導用戶發布自己的動態,按鈕采用面性呈現。界面其它icon也根據功能層級不同分別采用線性和面性呈現。

          其實很難準確的說哪種設計方案更好,每個產品都有自己的考量,界面承載的信息量也不同,說到底,選擇與自己產品更相符的方案那就是最好的。

          3.10 夜間模式/深色模式

          今日頭條和一點資訊的設置文案均是“夜間模式”,可是設計方案卻不同。今日頭條只是在日常的白色界面上覆蓋了一層黑色遮罩層,把整個界面的亮度降下來。一點資訊則是重新進行了界面設計,將界面背景和通欄卡片改為了深灰色,同時將文案和按鈕的明度降低了。網易新聞與前兩者不同,它的設置文案是“深色模式”,但設計方案和一點資訊類似,將界面背景和圓角卡片改為了偏藍的黑色,不同的是網易新聞的文案明度更高。

          這里需要明確兩個概念,夜間模式和深色模式。夜間模式注重的是弱光環境下的用戶體驗,通過降低屏幕的亮度來減弱對眼睛的刺激,這種模式在強光下體驗不佳。而深色模式也就是蘋果從iOS13開始推出的DarkMode,它是一種界面設計風格,在強弱光下均可,只是通過深色的背景突顯文字和圖片,使用戶的注意力集中在界面內容上。針對這一模式蘋果官方和Google的MaterialDesign都有給出相關色彩運用的建議。

          其實無論是iOS還是Android,官方明確說明了并不強制使用設計指南,而且近些年來iOS和Android之間的差異也越來越小了。例如此次分析的iOS端產品,一點資訊夜間模式的界面背景采用的是MaterialDesign的建議用色,其色值為#121212,而卡片顏色卻沒有嚴格按照官方的建議,一點資訊通欄卡片的色值為#181818,MaterialDesign給的建議是100%的#121212疊加5%的#FFFFFF,但從視覺上看這兩種顏色差距不大。網易新聞背景的色值為#141416,圓角卡片的色值為#1D1D1F,這些都與官方建議有所不同。當然,這些數值都是個人手動測量,可能存在誤差,但想說的重點是,官方設計指南是給我們一個參考值,按照參考值設計界面,內容有比較好的可讀性,至于具體的設計方案還是要根據自己產品的實際情況而定。

          四、思考與總結

          總的來說,今日頭條算是中規中矩的產品,一點資訊比較注重動效的運用,網易新聞在視覺表現方面更加突出。以上就是我在使用這三款產品時,遇到的一些比較有趣的設計點,如有分析不對的地方,望各位海涵。文中提到的許多細節,不僅可以運用在新聞資訊類產品的設計中,其它類型的產品也可以借鑒。當然,在這三款產品中還有許多功能沒有體驗到,如果大家發現有什么值得討論的細節,歡迎各位朋友留言。

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

          文章來源:站酷 作者:路風666
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          用戶滿意度評估模型搭建和檢驗方法探討

          ui設計分享達人

          如何科學有效的度量用戶體驗是企業和用戶體驗從業者一直在思考和研究的課題。用戶滿意度作為量化體驗度量的方法也一直備受關注。那么用戶滿意度指標是怎么來的?評估模型該如何搭建?模型好壞又要如何判斷?本篇文章聚焦用戶滿意度模型搭建與檢驗,分享模型搭建與檢驗過程中的方法與技巧。


          早在20世紀30年代,就有學者在社會和實驗心理學領域對滿意度展開研究,研究表明用戶滿意度反映的是用戶的一種心理狀態,是用戶對其明示的、隱含的需求和期望被滿足程度的主觀感受。用戶滿意度評估對企業生存和產品體驗提升都有重要的意義:一方面,隨著移動互聯網人口紅利逐漸消失,手機應用獲取新客的成本和難度變得越來越高,通過提升用戶滿意度充分激發現有用戶價值成為企業非常重要的商業策略。如美國顧客滿意度指數ACSI數據表明,用戶滿意度的提升能帶來用戶消費頻次的增加,同時也會為企業贏得更高的聲譽,帶來拉新、促活成本的降低。此外用戶滿意度通過度量產品體驗現狀和迭代動作有效性,對助力產品體驗提升起著重要作用。


          用戶滿意度模型的構建流程如下圖所示,接下來我們一起看看:



          用戶滿意度模型構建流程可分為「明確目標」「指標收集」「指標定義」「指標歸屬」「指標賦權」5個步驟:


          ///

          Step1 明確目標

          第1步是明確評估目標。明確評估目標包括明確評估用途和范疇,用戶滿意度評估的用途不同,在評估側重和衡量方式上會有不同:


          如衡量產品改版效果的用戶滿意度側重關注改版目標是否達成,更關注改版前后影響體驗目標達成的體驗點變化。用于摸底產品體驗水平的用戶滿意度側重了解產品對用戶需求和期待的滿足情況,更關注產品自身體驗長短板以及相較于其他同類產品體驗優劣勢。

          此外需要考慮評估范疇,一方面需要明確僅評估本品還是同時覆蓋競品,對于未在行業中取得絕對領先地位的產品,更應考慮覆蓋競品評估,明確體驗競爭優劣勢的同時尋求競品借鑒點。另一方面需要明確評估產品全局還是聚焦部分模塊,全局評估能獲取用戶對產品的整體感受,但在產品模塊繁多或復雜時,受制于用戶參與調研的耐心有限,針對每個模塊的評估問題數量無法設置太多,導致評估顆粒度較粗,可考慮聚焦重點模塊單獨評估。

          ///

          Step2 指標收集

          第2步是收集評估指標,用戶滿意度指標收集可結合案頭側、用戶側和專家側三方信息獲取:


          • 案頭側指標收集方式主要是案頭研究和產品走查。案頭研究可重點關注成熟評估模型以及行業趨勢、產品模式和用戶需求分析報告,結合對產品的走查分析,提煉“好的產品體驗”需要包含哪些要素。常用的案頭研究渠道和可查詢的信息如下圖:

          • 用戶側指標收集方式主要有用戶座談會和客訴反饋,座談會把目標用戶邀請到一起暢談對產品的需求和期待,邀請對產品使用程度較深的“專家級”用戶能貢獻更多有效信息。另外客訴反饋也是能集中了解用戶對產品關注點和痛點的數據渠道。

           

          • 專家側指標收集方法主要是專家訪談,通過向專家了解產品目標、目標實現方式及后續主要動作來拆解對當前產品體驗重要的維度和指標。專家訪談需要覆蓋到能決策產品方向的人,且專家職能身份盡可能的多樣化,如覆蓋產品、運營、設計、技術、市場等不同職能角色。


          ///

          Step3 指標定義

          第3步是指標定義,給指標下定義需考慮指標的體驗標準高低和文案描述兩方面:


          體驗標準選擇要符合產品本階段的目標,標準定得過高或過低都會讓指標喪失靈敏性失去價值。指標描述一般要遵循通俗性、簡潔性和單一性原則:


          ///

          STEP4 指標歸屬

          第4步是將定義好的指標進行維度劃分與歸屬來構建評估模型。維度初步劃分有「用戶接觸產品的觸點」和「產品功能模塊」兩種方式。


          拿用戶一次外出就餐的滿意度舉例,按用戶接觸產品的觸點可以分為就餐前(選餐廳、查信息、訂座等)、就餐中(菜品、服務、環境等)、就餐后(買單)滿意度。而按功能模塊劃分可以分為餐廳信息、評論信息、優惠信息滿意度。無論采用哪種先驗假設,模型構建都需要遵循“完備互斥”原則,即指標既齊全不遺漏,也沒有重復。



          ///

          STEP5 指標賦權

          因為不同評估指標的重要性程度不一樣,拿汽車產品的用戶滿意度評估為例,對普通轎車的滿意度評估更看重實用舒適,而對越野車的滿意度評估更看重汽車性能。因此在完成評估模型搭建之后,需要賦予評估指標權重,指標賦權的方法按照打權重的人不同可以劃分為專家賦權和用戶賦權兩大類:

           

          • 用戶賦權是根據用戶對某個體驗點(指標)滿意度打分和對產品整體滿意度打分之間的關系測算出來的間接賦權方法,體驗點滿意度分數變化對產品整體滿意度分數變化的解釋程度越高,體驗點對應的指標權重就越大。常用的指標賦權方法有“線性回歸”、“因子分析”和“結構方程模型”。

           

          • 專家賦權是領域專家,如產品、運營、設計等對指標重要性進行主觀判斷,因此又叫直接賦權法,常見的直接賦權法有“直接評定法”、“分值分配法”和“層次分析法”?!爸苯釉u定法”就是專家逐個判斷指標重要性,“分值分配法”是預先給定所有指標一個總分,專家把總分分配到各個指標上,“層次分析法”是專家對指標重要性進行兩兩對比,因為能更好地在對比過程中幫助專家理清指標的相對重要性,層次分析法是專家賦權中更為常用的方法。

          那么到底應該使用用戶賦權還是專家賦權呢?這兩類賦權方式具有不同的特點,用戶賦權反映了用戶對評估指標所反映體驗點的需求強度,在初次搭建模型對用戶需求強度優先級不明確時可以考慮使用,但用戶賦權受產品現狀影響較大,產品當下已經成熟和形成規模的方向更容易獲得較高權重,而對產品未來重要但目前規模較小的方向權重則可能較小。專家賦權反映專家對產品現狀和產品未來方向的綜合判斷,可以在產品較為成熟或開始嘗試創新方向時考慮使用。


          為了衡量用戶滿意度模型的好壞,完成模型搭建后需要對模型進行檢驗,模型檢驗分為「指標內容檢驗」和「結構歸屬檢驗」兩類:



          ///

          STEP6模型檢驗

          • 指標內容檢驗

          指標內容檢驗關注指標描述對想要評估體驗點的符合程度和可理解性,即指標的內容效度。

           

          指標內容檢驗可通過領域專家完成,邀請至少3名以上專家對指標內容有效性、易理解性等維度打分,專家一致評價為符合的指標占比即為模型內容效度(S-CVI)。對于專家認為不符合或專家打分不一致的指標需要咨詢專家具體原因并作出適當修改。一般而言專家一致評價符合的指標不應低于80%。常見的指標內容問題包括指標描述未能準確概括體驗點、指標描述有歧義、指標定義的體驗標準不合適等。

          • 結構效度檢驗

          結構歸屬檢驗是判斷評估指標與想要測量概念(歸屬維度)之間關系的方法,判斷歸屬關系的方式有看同一維度下指標間的相關關系,指標對測量概念的解釋程度等。常用的結構歸屬檢驗有同質性α信度檢驗、探索性因子分析和驗證信因子分析。

          每種檢驗方法都有自己判別指標歸屬和模型可靠的標準,但是在做指標歸屬調整和指標刪減的時候不應該盲從于統計數據是否達標,還需要充分考慮指標實際意義、是否有助于我們實現評估目標等實際情況進行綜合考慮。



          ///

          結語

          用戶滿意度模型需要跟隨用戶需求和產品發展變化而不斷迭代更新,保證評估模型能反映用戶需求和業務工作。以上是我們在用戶滿意度模型搭建和檢驗方面的一點經驗,希望能拋磚引玉,歡迎大家交流探討。


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

          文章來源:站酷 作者:百度MEUX
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          B端體驗設計-與復雜共處

          ui設計分享達人

          “復雜是世界的一部分,但它不應該令人困惑,好的設計幫我們馴服復雜,不是讓事物變簡單(如果復雜是符合需求的),而是去管理復雜”--唐納德·A·諾曼



          與復雜共處,這是一個有趣的話題。在這個奉行“少即是多”的時代,設計師對于復雜噤若寒蟬,認為優秀的設計應該簡潔明了,若無必要,勿增實體,而復雜則常備被視作失敗設計的標簽。設計師為了保持設計上的簡約挖空心思,甚至試圖通過削弱功能的方式來降低產品的復雜度,得到自己想象中的完美設計。然而一味追求“簡單”的設計真的符合用戶的實際需求嗎?從心理學的角度來看,復雜的事物往往功能強大,而功能強大意味著更好的服務與更高的價值,用戶也更愿意為之付費。當我們購買商品時,我們會仔細斟酌,拿著產品的功能列表反復比對,這個時候我們忘記了產品復雜與否,更多考慮的是功能是否滿足自身需求。


          對于大部分B端產品而言,復雜或許難以避免,復雜是出于實實在在的業務的需要,而非某位設計師的錯誤喜好。B端產品之所以給人感覺會相對復雜,是因為產品需要完成復雜的工作任務,界面內承載的信息內容較多,在視覺上會帶給用戶壓力,直觀感受上覺得產品很復雜。但是這些信息又都是必需的,如果缺少這些必要的信息,會對用戶理解和使用產品造成阻礙。就如同飛機的駕駛艙,密密麻麻的按鈕如此復雜,但是每一個按鈕都有著相應的功能,不可或缺。既然復雜難以避免,那么作為設計師我們不應該被動接受或盲目拒絕復雜,我們應該學會如何與復雜共處,去嘗試馴服復雜、管理復雜。


          理性看待復雜


          相信很多設計師和我一樣,經歷過現代主義浪潮的洗禮,對于簡約的設計有著或多或少的偏好。因為這種偏好,在自己進行設計時也希望能夠選用這種風格,在設計時刻意的去追求界面簡約,卻忽略了界面上的簡約不等同于產品易于理解和使用。從心理學的角度上看,復雜的事物更容易理解,簡單的事物反倒令人困惑,一味的追求簡單反而會讓事物變得復雜。


          B端產品的目標是降本提效,追求簡約的設計思想在B端產品的設計中并沒有那么適用,為了提升用戶的操作效率,我們需要將一些能夠幫助用戶理解的信息與常用的操作直觀的展示給用戶。這會在一定程度上增加界面的復雜度,但是相較于產品視覺界面會因此變得復雜,產品的易用性和操作效率對于B端產品而言會更為重要。


          與復雜共處的前提是能夠理性地看待復雜,復雜本身的含義即非褒義也非貶義。復雜描述的是事物的狀態,它在詞典上的解釋是擁有很多即錯綜復雜又相互關聯的組成部分的事物。產品復雜與否是由產品本身所從事的業務和需要完成的任務來決定,就像我們不能要求一個做機械結構設計的工程軟件做得像一個圖畫板一樣簡單,因為兩者的功能需求不是一個層面的,所以我們也不能單純的將產品簡潔還復雜作為評判一款產品優秀與否的標準。


          分清復雜與困惑


          我們之所以對復雜懷有畏懼,其實更多的是畏懼令人困惑的復雜,復雜與困惑有著本質的區別,理解他們之間的區別很有必要,復雜描述的是事物的狀態,而困惑表述的是用戶使用產品時的心理。復雜的背后可以擁有規則與邏輯,理解這些規則和邏輯,能夠幫助我們理解和使用產品。而令人困惑的產品往往缺少這樣的內在規則與邏輯,用戶難以理解產品的運轉機制,需要花費很大力氣才能完成有效操作,容易讓用戶產生挫敗感。產品可以是復雜的,但是不應該讓用戶困惑。


          在很多復雜的傳統線下業務數字化轉型的過程中,為了讓產品易于使用,設計師需要深入到一線,去了解真實用戶在線下業務場景中是如何處理日常任務的,在流程線上化過程中也需要遵循這樣的業務流程,這樣能夠讓用戶更快上手,而如果我們在設計過程中不去參考用戶在線下的操作場景,按照自己的想法去意測用戶的行為,這樣設計出的產品背離了用戶的心理模型,缺乏內在邏輯,會讓用戶感到混亂困惑,陷入深深的麻煩。


          基于產品本身功能需要,我們可能無法很主觀的去降低產品的復雜度,這就需要我們在進行產品設計時花費更多的心思,通過對業務流程、頁面布局、信息呈現上的調整與設計讓產品變得清晰,不讓用戶陷入困惑。如下圖的關于表單編輯器的A\B兩種設計,用戶在編輯器內完成一系列針對表單的編輯、配置操作,然后發布表單。方案A中將這些表單編輯配置項通過tab進行排列,這種方式結構簡單,但是擴展性較差,過多的欄目也容易讓用戶陷入困惑,不清楚需要完成哪些配置項才能進行發布。方案B中采用了步驟導航加側欄導航的雙層導航結構,在步驟導航上給出完成表單編輯配置的主要步驟,在大的步驟下用側欄導航承載小的編輯項,結構清晰,且能夠對用戶編輯表單提供一定的幫助指引。雖然兩種方案信息內容上都一致,視覺觀感上甚至方案B更為復雜,但是方案B在這里可能是更合適的方案,因為方案B在配置流程的指引上更為清晰,也更貼近用戶心理模型,即使沒有使用過在線表單的用戶也能理解產品流程,因而用戶能夠更容易的完成表單配置并發布表單。



          功能決定產品的復雜程度


          我們在使用產品時,都會有一個大概的心理預期,會認為某一類型的產品會較為復雜,某一類型的產品會相對簡單。為什么我們會有這樣的認知呢?是因為我們知道這些產品大概有哪些功能,而這些功能就決定了產品的復雜層度。產品的復雜程度由產品的業務與功能決定,而不是依照設計師的自我喜好,像如淘寶、京東這類的購物網站、擁有著很多的欄目,所以淘寶、京東的界面相對來說較為復雜;而像百度這樣的搜索引擎功能相對來說比較簡單,所以界面設計相對簡單干凈。


          我們可以容許一個功能強大的產品設計得相對復雜,但是一個功能簡單的產品設計得復雜難用就是一個災難。作為設計師我們需要根據產品的實際需要來進行設計,即不過度設計,也不執著于追求簡約,而是基于需求恰到好處的進行設計。


          復雜產品也能有好的體驗


          復雜的產品會有好的用戶體驗嗎?答案是肯定的,用戶體驗的好壞與產品是復雜還是簡單并沒有直接的關系,很多時候復雜的產品也能帶給我們良好的用戶體驗,在互聯網產品中,我們可以看到很多復雜的產品,這些復雜的軟件產品,一點點的改變著我們的生活與工作方式,讓我們生活與工作變得便捷與高效。


          首先可以看看我們的國民級電商應用淘寶,乍看淘寶的界面,可能會覺得十分復雜,甚至會給人一種眼花繚亂的感覺,但是包括我在內的許多人仍然十分喜歡逛淘寶。淘寶內除了有本身的淘寶、天貓店鋪外還有專做海淘的天貓國際,做社區團購的淘鮮達,專做拍賣的阿里拍賣等數十個板塊,業務繁多,功能復雜,但這幾乎很難改變,因為之所以做這些業務和功能背后都有著商業上的考量。從交互設計的角度看,雖然淘寶的業務和功能繁多,卻有著清晰的布局、信息對齊、內容組織,產品盡管復雜,但并不令人感到費解和困惑。購物流程也與用戶在線下購物流程相仿,貼近用戶的心理模型,用戶容易了解產品功能、容易與之交互,整體上有著良好的用戶體驗。



          又如我一直在使用的一款筆記軟件Notion,Notion相對于印象筆記、有道云筆記而言更為復雜,需要花費一定的時間成本學習才能夠從容上手使用,但是這并不妨礙Notion被眾多使用者所追捧。Notion的很多功能在使用之前,甚至都不會想到會出現在一款筆記產品里面,如甘特圖,多維表格等,這類功能一般出現在項目管理類軟件中。而Notion塊結構的布局模式,讓筆記能夠自由拖拽,擁有了極強的自由度,用戶可以很自由的用各種各樣的形式來記筆記,要是你肯再花一些心思,你甚至可以在Notion內搭建一個個人專屬網站來記錄的學習知識,打造個人專屬知識庫。將我們習以為常的線性筆記思維,轉變成縱向思維,甚至是網格狀思維。Notion無疑是復雜的,但是這樣做是為了給用戶提供的強大功能和極高的自由度,這些功能恰恰也切合了用戶的需求,創造了一種全新的筆記體驗,帶給用戶愉悅的使用感受。



          過度簡化的潛在風險


          簡單是產品追求的最終形態嗎?其實未必,很多時候產品設計的過度簡單反而會給用戶帶來麻煩。為了追求簡單的設計,不可避免的就需要隱藏一些信息或者拉長操作路徑,這是一個權衡的過程,我們在做設計時也會經常面臨這樣的抉擇,是追求視覺上的簡約美觀還是信息傳達準確性與操作上的效率。給用戶一個簡約美觀的視覺感受無疑很重要,人們對于美的事物往往更有耐心,也更愿意去探索。但是對于一款針對B端用戶的效率軟件、辦公應用而言,準確的傳達信息,幫助用戶進行判斷,頻繁使用的功能設計得更高效便捷,這些點能帶給用戶更實際價值,也是我們在設計產品時應該優先考慮的點。



          特別是在一些專業性的軟件中,如果我們為了追求簡約而弱化或者省略掉一些關鍵信息,還有可能會導致用戶錯誤操作的出現,造成嚴重的后果。試想一下當你在使用軟件編寫一個計算字段時,軟件提供給你了計算公式卻沒有就近給你提供計算公式的解釋和用法示例,導致你因為書寫上的不規范使得計算結果頻繁出錯。這時你可能會滿懷憤怒的抱怨為什么產品會如此難用,為什么不能配置過程中給到更多的反饋與幫助信息來減少配置錯誤的發生。


          如何與復雜共處


          前面我們了解了關于復雜的定義,認識了復雜與困惑之間的區別,也明確了在B端產品中復雜或許難以避免,復雜是出于實實在在的業務的需要而非某位設計師的錯誤喜好,既然復雜無法避免,我們就應該學會與復雜共處,管理與馴服復雜。那么如何與復雜共處呢,有一些策略或許可以給予我們一些思路。


          1.為產品注入規則


          復雜與困惑的本質區別在于復雜的背后隱藏著規則與邏輯,而困惑缺少這樣的規則與邏輯,讓人無法預測與揣摩,對應到軟件產品的設計,一款成功的優秀的軟件產品,應該是易學易用、能夠滿足用戶預期,用戶能夠直觀的理解產品的流程與主要功能,并通過產品實現自己的目標。那么具體到軟件的設計上我們應該怎樣做呢?


          這里可以看看我們團隊正在使用的研發管理工具TAPD,TAPD是一款敏捷研發協作工具,凝聚了騰訊研發方法及敏捷實踐精髓,其中敏捷開發的方法就是TAPD的內在規則與邏輯,有過敏捷開發經驗,理解敏捷開發流程的的開發人員能夠快速的上手使用TAPD,對于不了解敏捷開發的開發人員也可以通過產品幫助中心學習敏捷開發思想,進而理解產品的功能與流程,因此雖然TAPD功能與頁面結構相對復雜,但是基于對敏捷開發的認識用戶還是能從產品復雜的功能界面中摸索出一條操作路徑,實現自己的目標。這就是產品擁有內核思想以后能夠帶來的直觀好處,將原本零散的功能點通過特定邏輯鏈接成操作流程,幫助用戶更好地理解與使用產品。



          相同的在我們公司自己的一個項目中我們也運用了同樣的方法,在我們公司之前研發的一款crm產品中,為了給用戶提供最佳的銷售實踐,幫助用戶更快上手使用我們的產品,我們在設計產品時尋找了硅谷藍圖團隊做了顧問咨詢,并依照硅谷藍圖的銷售轉化路徑來構建我們的產品體系,確定產品功能,梳理產品中的業務流程。并希望在以后為客戶做實施的過程中能夠將硅谷藍圖的銷售方法一起帶給用戶,讓用戶能夠更好地使用我們的產品,實現產品的最高價值,為中小企業銷售團隊賦能。


          通過前面兩個案例其實我們可以感受到,當一款復雜的產品有了內在的規則與邏輯以后,用戶理解和使用我們的產品會變得更順暢,用戶不會迷失在茫茫的功能之中,通過理解規則與邏輯,用戶能夠對自己操作結果有一個大概的預期,而不是處于困惑狀態,作為設計師的我們也可以將這種規則邏輯作為我們設計的引導,讓我們的設計更為系統和有條理,讓產品不再是一堆功能的堆疊,各自為戰。


          2. 貼近用戶心理模型設計



          復雜是用戶的一種心理感受,用戶覺得產品復雜除了產品本身結構信息復雜之外,也是因為產品在設計上沒有貼合用戶的心理預期,用戶很難理解產品的流程與交互,所以貼近用戶心理進行設計就顯得尤為重要。這里我們需要先了解三個概念,實現模型、表現模型和心理模型,三個概念的釋義如下:

          實現模型:產品是怎樣工作的
          心里模型:用戶認為產品是怎樣工作的
          表現模型:通過設計來讓用戶認為產品是怎樣工作的


          表現模型越接近心理模型,用戶就越容易了解產品功能、容易與之交互。表現模型越接近實現模型,用戶越難理解產品,產品就越難使用。復雜產品在用戶體驗過程中的痛點在于用戶需要花費時間學習或培訓之后才能了解產品的運轉機制,很多B端產品在設計時更多的偏向于實現模型,用戶在使用產品的過程中會發現很多地方的交互和自己心理預期并不一致,使用過程中會遇到很多的阻礙,影響整體的使用體驗。對于一款復雜的產品而言,我們需要讓我們產品的表現模型更接近于用戶的心理模型,這樣用戶能夠更容易了解產品的功能,并與之交互。


          大家使用電腦時有沒有遇到過類似下圖這樣的電腦報錯信息,里面是一堆的專業名詞,看得人一頭霧水。這時候我們能做的只有默默的打開百度,去了解彈窗里面講的內容究竟是什么,了解后才明白原來這樣,然后按照百度上操作步驟一通操作,僥幸解決了問題。但是當下次我們遇到相同問題時,可能還是不知道如何解決,無可避免還是需要求助百度。這個就是表現模型貼近與實現模型會帶給用戶的困擾,用戶不是專業的開發者,他們不了解也不需要了解產品背后的實現邏輯,這對用戶而言是沒有價值的,給予用戶這些信息不能對用戶起到預想的幫助作用。貼近實現模型進行設計會讓用戶與產品交互變得困難,變相的是在人為的增加產品的復雜度,與復雜共處,我們需要學會貼近用戶心理進行設計。



          3.統一交互模式


          復雜的產品往往功能、頁面繁多,如果頁面內的視覺元素以及交互各自為戰,那么放大到整個產品就是一個災難,不僅是產品給用戶感官上不統一、整體性差,過多的交互模式也會增加用戶的學習與記憶成本,用戶在這些相視功能但是不同的視覺與交互的模塊之間容易陷入困惑,對用戶使用產品造成困擾。針對這個問題,現在越來越多的公司開始通過搭建組件庫的方式來規范自家產品內的視覺與交互,一個規范完整的組件庫的確能夠在很大程度上解決產品在視覺與交互上的一致性問題,通過模塊化解決方案,也能降低冗余的生產成本,實現產品快速開發。因此很多人也認為搭建好組件庫就能一次性的解決產品體驗一致性問題,但實際上就算一個產品有了一個自己的組件庫,依舊還會遇到體驗上統一性問題,這是為什么呢?


          在原子化設計理論中,粒子是構成頁面的最小顆粒,粒子構成簡單組件,簡單組件到復雜組件,再到區塊、頁面。雖然用組件能去構建頁面,但是還會遇到頁面結構、交互不一致的問題,設計師各自使用組件去搭建并不能提升我們的效率和解決設計一致性的問題,在末端設計并沒有做到約束。因此我們在構建好組件以后還需要繼續抽取出了頁面級的組裝結構和交互模式。



          這里我們拿B端產品中常見的列表頁來舉例,縱觀所有后臺列表頁面,抽取后無非就分為這么幾個區域。不同的業務可以通過基礎組件和樣式定義符合自己業務線的子模塊。比如列表頁中的篩選區,在不同的業務場景下,對篩選器的需求也各不相同,簡單的可能只需要使用標簽選擇就能夠完成篩選,復雜的可能添加很多的篩選項甚至選項之間還有且或關系,我們需要根據實際的業務場景設計適合的篩選器,但是需要注意的是一個產品中用到的篩選器形式不應太多,我們需要抽取歸納出三四種篩選器形式去覆蓋我們產品內所有的篩選場景。來保證產品內不會出現各種相識卻有各不相同的篩選器。



          B端后臺產品中比較常見的還有表單,我們可以歸納出產品內可能會使用到的表單類型,然后定義出具體的框架結構與交互,在具體的設計過程中在根據實際情況選用不同的表單區塊。


          1.分組表單

          一種常見的信息錄入以及信息展示表單,這種形式是我們最長用。



          2.分步表單

          分布表單適用于信息錄入項以及信息展示項過多,在一個頁面內已經不能合理清晰的組織傳遞信息,或者表單內容的錄入方式或者展示方式存在較大差異,不適宜在一個頁面內進行展示時。按照布局的不同也可分為橫向步驟和縱向步驟兩種。



          3.組合表單

          組合表單因其結構能夠承載更多的信息,每一個欄目都可以承載一個獨立的表單頁,有效的管理信息。


          4.彈窗表單

          很多時候我們也會用彈窗來承載表單,好處是交互銜接流暢,不用跳頁。



          將產品中類似的區塊做成最佳的交互模式范例,能夠最大的程度的規范我們產品中的交互,這樣才能真正的實現產品體驗上的統一,化繁為簡,讓復雜的產品也能夠調理清晰,上手簡單容易。在面對復雜的系統級軟件時,在統一組件樣式的基礎上還應該統一產品內的交互模式。



          信息歸納突出重心


          復雜的產品頁面內信息往往都特別繁多,如果不做好信息歸納,用戶將很難把握住重點內容,信息獲取效率低下,十分影響用戶的使用體驗,所以信息的強弱的整理十分重要,那么什么樣的信息是對用戶而言重要的信息呢?


          信息設計大師愛德華·塔夫特認為優秀的視覺設計應該是“將清晰的思考視覺化”,他還認為只有充分理解觀看者的“認知任務”及一些設計原則才能設計出優秀的產品。


          如何找到對用戶真正重要的信息需要借助到產品設計中一個十分重要的工具--用戶模型,通過調研的來得用戶模型是對于我們產品客戶的抽象歸納,通過用戶模型我們可以確定哪些功能對于用戶而言是高價值的重要內容該重點突出,哪些內容相對不是那么重要可以弱化處理,通過對于頁面內容強弱的劃分,用戶能夠更快的獲取到對自己有用的內容,盡管頁面仍舊復雜,但是信息劃分合理、層級清晰、表意明確的頁面人就能夠帶給用戶良好的用戶體驗,幫助用戶高效的處理任務。


          說在最后


          復雜是產品的本來特性,本身不含褒貶,但是如果復雜不加以控制,讓其發展為困惑與混亂,這對于一款產品而言絕對不是一件好事情,這樣即使產品功能上很優秀,用戶也無法長期忍受,一旦市場上出現替代產品,那么忍受已久的用戶也將拋棄產品轉向體驗更好的新產品。


          曾經我也是一個極簡主義的追捧者,但是經歷過越來越多的設計項目,我開始發現某些產品復雜性是必需的,將產品做得簡單并不是其核心訴求。真正需要處理的問題也不是復雜,而是混淆的狀態和由此產生的無條理性。解決的方法不是簡單的去除幾個界面元素,讓其在視覺界面上變得簡潔干凈,而是要讓產品擁有內在規則、一致且能夠被理解。

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

          文章來源:站酷 作者:Yone楊
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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





          詳解|用戶體驗地圖,到底該如何使用?

          ui設計分享達人

          用戶體驗地圖是什么 | WHAT

          用戶體驗地圖(Experience Maps)旨在通過描述用戶歷程和故事,使設計師、產品經理等項目成員更好地了解用戶和洞察訴求。所以對于用戶體驗地圖,我們可以將其定義為以下內容:

          - 是一種描述用戶故事的可視化工具;

          - 是一種幫助設計師、產品經理等更好地了解用戶的共創工具;

          - 從用戶視角出發,直觀展現產品流程各個觸點上用戶的痛點、需求和情緒;

          - 用戶體驗地圖繪制的形式并不唯一,可以根據項目需求,增減內容。


          undefined  

          △ 途家 App 用戶租房 · 用戶體驗地圖案例



          通常在接觸到需求之后,設計師就可以開始梳理現有流程、使用用戶體驗地圖了。要注意的是:

          - 需要梳理的功能不分大小,都可以使用;

          - 做之前,務必要先調研和訪談用戶使用產品的情況。

          建議時長:

          - 重要項目:120~180 分鐘- 日常項目:60~120分鐘

          參與者:

          - 必選:設計師、產品- 可選:研發、市場、其他

          工具:

          - 電腦或白板+便利貼

           

          為什么需要用戶體驗地圖 | WHY

          需要發現和拆解產品現有問題,梳理用戶流程時使用用戶體驗地圖,可以在聚焦階段,整合用戶訴求和業務訴求,共創機會點,找出解決方案,通常在以下場景中使用:

          - 新產品設計:需要對需求進行拆解和優先級排序;

          - 產品優化:發現產品現有問題,洞察設計發力點。

           

          由此可見,在設計過程中使用用戶體驗地圖作為設計工具,有以下益處:

          - 更好的以用戶視角來看產品的體驗;

          - 通過共創,項目成員達成共識;

          - 確認觸點,作為我們的設計方向;

          - 通過用戶痛點找到機會點;

          - 幫助梳理產品流程。


          undefined


          △ 用戶體驗地圖共創現場

           

          用戶體驗地圖操作流程 | HOW

          我們通常會將流程分成4 個階段:定義原則和目的 —— 梳理階段流程 —— 洞察痛點 —— 尋找機會點。


          1. 定義原則和目的

          首先要了解我們做用戶體驗地圖的原因和目的,包括用戶是誰、解決什么問題、用戶的目標、產品的整體目標、限定條件等等,對用戶群體、整個項目背景和共創任務目標有清晰、全面的認知。


          undefined


          2. 梳理階段流程 

          首先是劃分階段,將用戶的行為拆分成幾個大的階段,在整理時要注意:

          - 在整個產品的范圍之內盡量把故事、流程講完整;- 以廣度優先,而非深度,不要過早的沉浸到細節中。

          接下來我們要將主要階段拆分成單個任務,并梳理具體的任務和觸點,羅列出過程中的任務和各個觸點,要做到事無巨細。


          undefined


          然后根據任務和觸點,整理對應的用戶疑問、用戶感受/情緒。通過對用戶的觀察和訪談進行梳理,客觀的描述事實,切勿自說自話或是將自己的情緒代入其中,也不要急于猜想與分析。


          undefined


          3. 洞察痛點

          這一步需要我們匯總用戶的痛點,并將痛點分級,洞察用戶痛點背后的真實訴求。這個過程中可以先讓大家在一定時間內寫出自己的想法,每一條寫在一張卡片上,做到先相互不干擾,之后再統一整理和總結。


          undefined


          4. 尋找機會點

          通過上述總結,思考新的機會點、解決方案、優化整體流程,并對新流程下的功能做優先級排序??梢酝ㄟ^準備一些問題來刺激大家腦爆出更多的內容,比如:用戶還有其他選擇么?怎么做用戶才能更爽?其他用戶來到這里該怎么處理?等等。在這個階段需要:

          - 對內容進行對標、討論,把公認的點保留下來,無用的點剔除出局;- 根據實際情況和項目成本、進度等條件,對新流程下的功能做優先級排序。


          undefined


           

          如何為過程提效 |TIPS

          在實際的工作過程中,因為項目時間都非常緊張,繪制這樣一個完整的用戶體驗地圖比較耗費時間,所以推薦大家幾個提效的技巧,既可以減少時間浪費,也可以提高共創質量:

          1. 事前

          充分做好用戶調研,提前準備好用戶地圖模板,可以在開始之前的一到兩天發給參會人員,讓所有人對產品有一個整體梳理和思考,有助于提高大家的產出質量。

          2. 事中

          如果是優化的產品,可以將設計稿 demo 或者線上產品截圖打印出來,這樣可以增強大家的代入感,有利于想法的輸出。

          3. 事后

          整理電子版體驗地圖,需要跟隨產品的演進進行更新,上傳到項目共享空間隨時查看。


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

          文章來源:站酷 作者:Ant_Design
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          B端產品界面高屏效初探

          ui設計分享達人

          背景

          在 B 端設計領域中,不管是內部用戶、產品、設計師、開發,還是外部產品、設計師等,總能聽到關于界面「屏效」方面的訴求或吐槽。


          undefined


          「屏效」狹義理解是「界面過度留白」;廣義理解,「屏效」源自諧音“坪效”,指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數)。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。


          為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感,于是我們展開了「屏效」專題的設計探索與實踐?!钙列А箤n}探索主要以「探索」與「實踐」相結合的方式展開,將實踐過程中反復驗證有效的設計策略沉淀成設計手冊,同步將部分功能進行工程化,確??梢蚤_箱即用。


          undefined


          探索階段-為誰在何時何地設計

          用戶聲音|不同的故事相似的訴求

          面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%;認為提升屏效對體驗有提升的終端用戶占 50.6%。


          undefined


          外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里,其中就有 2 點提到關鍵字「效率」。


          undefined


          通過了解不同用戶和產品類型發現,不同的用戶在工作場景的產品使用中有著相似的特征:


          undefined



          案例收集|發現問題,大膽假設

          縱觀 B 端產品界面,發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例,為了逐步突破問題,選擇以數據產品中覆蓋率極高的表格為設計切入點,通過線上跨產品多端地毯式的體驗走查,發現表格三個層次的問題:


          undefined


          視覺、交互層在無需理解業務場景和用戶目標的情況下,都較容易發現,屬基礎問題,但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

          綜上我們提出假設:為提高屏效,可從視覺、交互、信息三個層次解決

          視覺層為提高信息查閱速度,可以通過提高信息密度;交互層為提高操作速度,可以縮短當前手勢到目標之間的距離;信息層為提高信息被理解的速度,可以通過重組織等方式。

          基于假設,我們進行了進一步的桌面研究,查閱論文等書籍,尋找設計理論的驗證和指導。


          競品分析|尋找實踐證據,謹慎驗證

          我們知道視覺上界面留白過多(過疏會增加滾屏成本,過密因易串行而影響閱讀效率),以表格「行高」為例,探索各表格在字號、字高和行高的關系,因為不同字體的同字號實際像素高度會有差異,因此選擇的是字高(即文字垂直高度的視覺大小)而非字號或字行高,決定留白的兩個重要因子是字高和表格行高,以次推演,界面元素和元素間距的留白關系,探究在視覺層怎樣的留白率能保證甚至提升屏效。


          undefined


          以數據產品中的表格為例,通過直接和間接競對的方式,分別從數據的查閱(視覺)、分析(交互)維度進行功能點和設計細節上的比對,來看看優秀產品是如何解決屏效問題。

          直接競對:內部用戶口碑較好的產品 A、B外界競對:同領域的 Tableau、網易有數、金山、微軟表格;間接競對:谷歌郵箱、AntD 等的緊湊主題的常規列表(一維表格)


          undefined


          通過競品分析可以發現,數據分析領域的表格留白率普遍較低(信息密度高),尤其是金山和微軟的電子表格,其次是同類面向數據用戶的 Tableau、網易有數,而谷歌郵箱等工作臺常用的常規列表緊湊版本中,留白率和數據領域的電子表格不相上下。


          緊湊版的使用場景也常常是面對數據量巨大的信息呈現,通過切換緊湊主題,提升信息的快速瀏覽,而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大,而在實際案例實踐中,也已經將表格行高優化至 30px,克制的使用留白。


          除此外,競品其他層次的設計也做了比對,總結來看整體設計做法:高密度、少屏數、少留白等。


          文字陷阱:中英文字高不等于字號


          舉個容易犯錯的競品參考是,谷歌在緊湊版主題下字號 12px,列表行高是 28px,但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠,缺乏呼吸感。


          undefined


          原因在于谷歌的 12px 是英文字體,實際字高只有 10px,而 AntD Table 的語境是中文字偏多,實際字高有 12px,所以留白的差異在于一個是 18px(28-10),一個是 16px(28-12),這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高,而非「字號」和表格行高,進一步推演,決定界面留白的是「元素視覺高度」和「元素間距」。


          論文查閱|尋找理論證據,謹慎驗證

          研究表明,低密度認知負荷低,但高密度任務完成率高,用戶更喜好

          參考資料:論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》

          對于信息,用戶需要需要閱讀(視覺),思考和理解(認知),需要點擊按鈕、操作鼠標和打字(行動),在人機工程學中,統稱為負荷。即認知(記憶)負荷、視覺負荷、動作負荷,即分別對應用戶體驗設計的三個層級,信息/視覺/交互。而負荷所花費資源從多到少依次為:認知 > 視覺 > 行動。


          認知負荷,舉個例子,看了但不一定懂了。你是否有這么一種體驗——刷抖音,雖然很多(信息密度小,輸出效率低),但可以一直刷下去并且刷很久;而看一門 C4D 教學視頻,即使就短短十來分鐘(信息密度大,輸出效率高),但是卻要看上半天。因為刷短視頻時,你的輸入效率遠高于作者的輸出效率,而看一門 C4D 教學視頻時,你的輸入效率遠低于作者的輸出效率??墒?,輸出效率是客觀的,輸入效率是主觀的。如果輸出效率很高,你可以通過提高自己的輸入效率(比如讓自己成為 C4D 專家)來跟上作者,從而變強;否則輸出效率很低(信息質量低),你的輸入效率很高(很專業),信息于你而言都是無效的。


          假設負荷總量不變的情況下,那么以上三類場景界面需要對用戶負擔分配大致如下,官網品宣類需要低認知成本,低視覺負擔,視覺要求高,用戶才會被吸引過來閱讀,甚至酷炫的交互更能增加互動體驗而帶來的趣味感,比如蘋果官網,信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息,而 B 端應用因為是專業使用,首先認知方面隨著員工的專業度提高而降低,因此可以通過提高視覺負擔,來降低行動負擔,進而減少操作用時,當然最佳情況是三個維度能整體降低負擔,讓總負擔降低,就需要更多設計巧思了。


          undefined


          面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中,設計師常用的 Top 3 做法為:【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。


          undefined



          實踐階段-如何設計

          通過以上的探索,我們可以確定的是,B 端產品面向專業人員的工作界面設計中,提高屏效可從視覺、交互、信息三個層次進行,視覺層-高密度,即提高屏幕信息密度;交互層-低跳轉,通過減少頁面跳轉、手勢與常用操作的距離等;信息層-有效性,通過重組織或輔助信息幫助用戶理解,甚至提供幫助手冊等以提高用戶專業能力。


          undefined


          基于以上的總結,對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,尋找運營機會點。


          如下表格經過高屏效策略優化前后對比圖,優化前相同維度下不同人群數量的對比需要視線來回跳動比對,而優化后的表格內容,更符合用戶看差異場景下分析目的數據查閱,視線鎖定相同維度,即可快速比對數值大小。


          undefined


          下面以視覺、交互、信息三個層次解剖設計過程背后的思考。


          視覺層|高密度-克制的留白

          眼動理論:研究表明,人眼最小可視視角 0.3 度,水平最大眼動舒適轉動區 30度,垂直最大眼動舒適轉動區 55度??傻贸鋈搜圩钚∽R別范圍 12px,水平視野舒適眼動寬 1200px,垂直視野舒適眼動高 2200px。參考資料:論文《基于眼動交互的用戶界面設計與研究》


          undefined


          如圖,縮小表格行高的同時,目標信息之間的眼動距離隨之縮短,在眼動舒適區內看到更多信息,便于信息的高效獲取。


          undefined



          交互層|低跳轉-高頻信息前置

          理論基礎:菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型,它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為:T=a+blog2(D/W+1),W為其中目標的大??;D為到目標的距離;T為移動到目標所用最短時間。參考資料:菲茲定律


          undefined


          表格單元格借助交互狀態,增加懸浮出現的信息組件,前置顯示目標單元格明細信息,同時通過交互出現的指示器輔助行列信息的獲取,高頻操作考慮手勢位置放置,縮短與操作目標的距離,以提高整體操作效率。


          undefined



          信息層|有效性-信息重組織

          理論基礎:交互設計四大策略「組織、刪除、隱藏、轉移」參考資料:《簡約至上》


          undefined


          用戶為了對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看,根據用戶目標,將關聯性大的數據放置相鄰列(即將要對比的人群放置列頭),即可快速查閱,減少眼跳距離。


          undefined


          結語

          設計趨勢中常見的大字體大留白界面,但在 B 端場景中,面對緊張的工作節奏,時間和注意力變得尤為可貴,相對而言,基于復雜度守恒定律, B 端信息量大且高頻訪問的產品中,「用得快」要比「看得美」更重要,「高密度」「低跳轉」詮釋的即是「空間換時間」,少一次點擊,少一次跳轉,少一份等待,就多一份時間和效率。

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

          文章來源:站酷 作者:Ant_Design
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          設計模式 | 多級撤銷 Multilevel Undo:讓用戶更有安全感

          ui設計分享達人

          What 是什么

          簡介:「多級撤銷」允許用戶撤銷一系列的操作。用戶操作的順序能被系統捕獲記錄,根據原始執行順序,一步步返回歷史操作。


          例子:用 Sketch 畫設計稿時,可以多級撤銷,允許用戶返回上一步或更早的歷史操作


          undefined


          Why 為什么

          具備多級撤銷的功能可以讓用戶覺得能夠對界面進行安全探索,不必擔心造成某些不可取消的修改。例如,如果單擊了錯誤的菜單項,不需要進行復雜的恢復,不需要退回到此前保存的文件版本,或者尋求系統管理員的幫助。


          多級撤銷也讓專家用戶更快更容易地探索工作路徑。舉例而言,一名 Photoshop 用戶可能會在一個圖片上執行一系列的濾鏡操作,研究那些結果看是不是他喜歡的,然后再逐一撤銷,回到起點。


          When 什么時候使用

          需要用戶頻繁在單一頁面上交互的用戶界面,相比普通的網站或者移動端 APP,交互操作要復雜得多。例如:文件編輯器、圖形建模工具、郵件閱讀器、數據庫軟件、寫作工具、編程環境等。該功能能使用戶撤銷一系列操作而非單一個操作。


          使用條件:該軟件的單一界面交互比較復雜和頻繁


          How 如何使用

          軟件首先需要一個強大的模型,這個模型是關于動作是什么樣的——動作的名稱、動作所關聯的對象,以及如何返回歷史動作。


          決定哪些動作需要成為可取消的操作。如果動作可以改變一個文件或者數據庫——任何將是永久性存在的對象——都應該是可取消的動作。具體而言,在大部分應用里,人們期望能撤銷下面這些改變:

          • 文檔或表單的文字輸入

          • 數據庫

          • 圖片或畫布的修改

          • 布局上的變化位置、大小、順序或分組在圖像應用程序中

          • 文件操作,例如刪除或修改

          • 對象的創建、刪除和重新組織,例如郵件消息或電子表單的列

          • 任何剪切、復制、粘貼操作


          下面這些修改基本上是不可撤銷的:

          • 文本或對象選擇

          • 窗口或頁面之間的導航

          • 鼠標光標和文本光標的定位

          • 滾動條的位置

          • 窗口或面板的位置和尺寸

          • 在一個未提交的對話框或模態對話框上的改動


          展現方式

          然后,決定以哪種方式把撤銷操作展現給用戶。大部分桌面應用程序會把“撤銷/重復”的菜單項放在“編輯”菜單下。撤銷通常也關聯到Ctrl+Z 或類似的快捷鍵。


          Example 案例

          案例一:Microsoft OneNote 筆記編輯器

          用戶需求:撤銷文字輸入

          Microsoft Onenote  文檔編輯器擋在輸入過程中需要修改可以用快捷鍵 COM + Z 撤銷,或者使用編輯菜單下的按鈕幫助用戶返回上一步。

          undefined


          案例二:Photoshop 多級撤銷

          用戶需求:回到歷史操作記錄

          Photoshop 同樣可以采用快捷鍵和菜單按鈕返回歷史操作,由于 PS 的操作修改繁瑣且復雜,所以為用戶提供了歷史記錄面板,用戶也可以點擊歷史操作步驟回到想要的歷史操作記錄。

          undefined


          案例三:美圖秀秀圖像處理 App

          用戶需求: 撤銷回到上幾步圖像處理結果

          使用美圖秀秀等圖片處理 App 對圖像進行美化操作時,常常會返回查看對比不同的效果,或者操作錯誤時返回到前幾步,頂部的撤銷按鈕可以讓用戶回到任何歷史操作步驟。

          undefined

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

          文章來源:站酷 作者:Ant_Design
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          淺談Windows 11用戶體驗設計中的不足

          ui設計分享達人


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

          文章來源:站酷 作者:壹格設計
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          為何深色模式看起來不自然?

          ui設計分享達人

          在過去的幾年中,深色模式一直是用戶最期待的一個功能。你可以自由切換你喜歡的模式來適應當前的場景,iOS和Android也都在2019年布局了系統級的深色模式,深色模式可獲得出色的視覺體驗,尤其是在弱光環境中……有助于你專注地開展工作,因為內容會較為顯眼,而顏色加深的控制項和窗口則會隱入背景之中。但真是這樣嗎,或者只是一種實際上弊大于利的操作? 


          文章內容:


          1、什么是深色模式

          2、從可用性角度看深色模式

          3、為什么深色模式看起來不自然

          4、從設計角度看深色模式

          5、結論


          什么是深色模式?


          雖然各種軟件界面的色調和顏色會有所不同,但是對深色模式的處理方式都是在深色背景上顯示明亮文本和界面元素的配色方案。相比之下,在淺色背景上顯示深色文本和界面元素的配色方案,在這里我們稱之為淺色模式。


          而事實上,深色模式比淺色模式早了幾十年。在其最初的階段,深色模式并不是一種有意的解決方案,而僅僅是當時計算顯示設備是陰極射線管(CRT),且只能顯示單色的顯示,屏幕看上去就是黑的,黑底白字或者黑底綠字就是計算機行業的早期狀態。直到1980年代彩色顯示器發明后,微軟視窗系統上線之后,黑底顯示才退出主流。蘋果在1984年推出“麥金塔”個人電腦,第一次發布采用圖形用戶界面,由此開啟了計算機屏幕白底顯示的主流之路。


                     

                    

           ibm 5151單色監視器


          淺色模式出現的確切時間很難確定,但可以追溯到施樂Parc圖形用戶界面,它也極大地影響了早期蘋果的“麥金塔”和其他操作系統,該界面使用了以白色背景為主的深色文本和界面元素。它與顯示技術的進步和現代圖形用戶界面的出現密切相關。這種能夠顯示色彩的且更先進的RGB CRT顯示器拉開了淺色模式的序幕。


                                

          1973年的施樂Alto是最早使用輕型接口模式的計算機之一


          從可用性角度看深色模式


          深色模式的實用性有多少,每個人看法也不一樣。盡管深色模式的界面可能不像淺色模式那樣觀感清晰,但深色模式的界面卻具有一定的魅力,可以讓你聯想到新穎,高端,精致,神秘,力量,奢華這些詞。但是,黑色也是一種會引起人們強烈的情感一個顏色,并且在過度使用時很容易使人無法承受。


          2019年9月,蘋果公司上線深色模式(Dark Model)時,在官網上如是宣傳道。從iPhone到Mac,當庫克決定在蘋果公司幾乎所有產品上線深色模式、甚至要求所有在AppStore上架的應用都必須兼容深色模式時,安卓陣營的谷歌、華為、三星等頭部公司也紛紛在其最新手機中推出了深色模式,相應地從WhatsApp到微信等全球主流的應用也都推出了深色模式。



                      


          但是,想要獲得良好的深色模式是相對比較難的。一方面,深色模式迫使放大瞳孔來捕獲必要的視覺信息,從而導致整體清晰度的降低。而同時界面中高亮的部分又迫使我們的瞳孔縮小去適應亮度,以便提高清晰度。這也就能理解為什么白色背景上的黑色文本在你的眼睛中通常會顯得更清晰的原因。


                       

          擴大的瞳孔讓光線更多,但感覺到的銳度受到損害



          行業對深色模式追逐的群羊效應,也進一步加劇、放大了一個見解:深色模式對眼睛更友好更健康!


          但是,事實并非如此。對于一些有散光的人來說,在某種程度上深色模式對他們的眼睛來說更糟糕,深色模式比淺色模式更友好更健康的科學仍有待討論。斯坦?!ぐ轄査寡劭蒲芯克难劭茖<覍Υ吮硎荆骸拌b于文獻中的數據,我認為深色模式對眼睛沒有任何的友好和健康?!?nbsp;這種深色模式對眼睛疲勞和潛在的眼睛健康的影響時,使用時間可能比設備的亮度或亮度更重要。


          根據美國驗光協會的說法稱,大多數人的眼睛在某種程度上都患有散光,但通常不會引起注意。據美國眼科學院統計,每三個美國人中就一個存在散光的情況,1.5億美國人需要佩戴眼鏡來矯正視力;香港理工大學針對2700多人的臨床檢測發現,在21歲的30歲的香港人中,近40%以上患有100度以上散光。


          一起看下面的說明性圖像。即使你有完美的視覺,你也很可能在黑色背景上看到白色文字周圍的光暈。



                      

          淺色模式與深色模式


          如果增加文字并降低文字的大小,這種效果可能會更強:


                       


          右邊的圖像你應該會看到更多的光暈,如果你有散光癥狀,深色模式可能會讓你看屏幕更費勁。在深色模式下,虹膜打開以接收更多的光,并且瞳孔的變形在眼睛上產生了更加模糊的焦點,因此,當你在深色屏幕上看到淺色文本時,其邊緣似乎滲入黑色背景,也就是所謂的“光暈效果”。雖然深色模式可能更適合夜晚等弱光環境下使用,但不一定能幫助更好地閱讀,對于散光患者來說,可能還會加劇視疲勞。


          當然,從實用性上講,深色模式也有它的好處,深色模式利用OLED屏幕在純黑的背景下不發光的特性,確實能有效的省電,讓你的電子設備續航上提升很大,這也是很多人一直在追求深色模式的一個重要原因,只要手機續航強比啥都重要!這也可能是蘋果公司決定在幾乎所有產品上線深色模式的一個原因。


          另外深色模式更有利于給用戶營造一種沉浸體驗,對于視覺娛樂應用尤為如此。當你想突出顯示特定類型的內容時,深色模式會特別有用。豆瓣、數字尾巴、網易云音樂是我常用的幾個軟件,它們都已經適配了深色模式。在這種模式下你的目光會更加注意到電影的海報、數碼產品和充滿活力的音樂專輯上。



                       

          豆瓣、數字尾巴、網易云音樂的深色模式


          為什么深色模式看起來不自然


          一是由于我們人腦的組織結構造成的,從多年來的多項科學研究和調查得出的結論是,從物種進化來看,人類99%的時間都是在白天中活動,人腦更傾向于在淺的背景上顯示深色的圖像。所以無論白天還是黑夜,淺色的背景都可以讓你更快地專注于顯示的元素,而深色的背景則使其難以辨別文字和視覺界面元素,從而影響你的閱讀效果并最終使你的眼睛疲勞。 其實從世界各地多個洞穴中發現的史前壁畫也能說明為什么我們傾向于喜歡淺色模式。



                      

          追逐獵物的獅子,法國Chauvet Cave,約公元前30,000-28,000


          德國帕紹大學曾經做過一次測試。在該研究要求參與者閱讀屏幕上的正極性(白色背景上的黑色文本)或負極性(黑色背景上的白色文本)的文本。隨后,參與測試的人員會執行基本的校對任務,例如查找拼寫或語法錯誤。研究人員還測量了每種模式下參與者的閱讀速度。結果是所有參與者在正極性條件下的表現都會更好,他們檢查出更多的錯誤以及閱讀的速度更快。


                                 

          可讀性差異


          另一個學習發現正極性對于在顯示器上讀取小文本特別有利。人腦具有更快的可讀性,更喜歡在光線背景下顯示的深色文本和物體。


          二是由于含有大量藍光的光源會使我們眼睛不舒服,當我們談論屏幕對眼睛的潛在破壞性影響時,我們通常是在談論“藍光”,這是由短、高能量波長構成的光譜的一部分。研究發現藍光可能是導致眼睛疲勞的一個因素,但指出長時間不眨眼的干眼也是導致眼睛疲勞的一個更嚴重的原因,當然也有是因為字體太小,以及散光這樣的原因。


          當我們身處暗室或是在黃昏或夜晚時,眼睛會切換成不同的視覺模式;在弱光環境下,人眼會從對綠色敏感變成對高能量藍光敏感,這代表我們在大量的接收藍光,因此對刺眼強光的敏感度會增強。這類情形對駕駛人而言并不陌生,當他們被來車車頭燈的強光照射時,特別是使用現代化氙氣燈或LED頭燈的車輛,可能會暫時喪失視力。


                     

          平板電腦、智能手機和其他電子顯示屏,不僅改變了我們所接觸的光譜,也使我們的視覺行為發生轉變。我們必須意識到,我們現在用于“近距離”視物的時間比以往多得多,這通常是因為背景亮度太暗所致。


          在德國光學公司蔡司官方網站上,對于藍光也作一分為二的評價:“好處是當外界環境變亮也就是藍光較多時,身體便釋放出血清素—它是其中一種快樂荷爾蒙以及皮質醇—這是一種壓力荷爾蒙。這兩種荷爾蒙能讓我們保持清醒,富有活力,同時也應用于冬季抑郁和失眠的治療中。但過多的紫外光和藍紫光可能會對肉眼造成損傷,除了可能導致令人難受的結膜和角膜發炎,也可能會破壞眼睛的晶狀體(例如白內障),尤其是傷害我們的視網膜(黃斑病變)?!?


          從設計角度看深色模式


          在WWDC 2019大會上,蘋果宣布了iOS13的深色模式功能,在令人興奮之余,作為設計師和開發人員,我們應該考慮的該如何去實現它。蘋果和安卓已經發布了為應用程序設計深色模式的設計指南。當然,沒有硬性規定要求遵循他們提供的設計指南,這些只是指導原則。


                       

          由于Material Design設計語言的原因,投影的占比是非常大的。在淺色模式下還好,但這不太適用于深色模式,因為深色背景上的黑色陰影在視覺上不容易察覺,為此安卓還提供了在深色模式下不同層級的卡片與投影上的參考。


                      

          根據設計文檔來看,iOS背景為純黑色,色值為#000000,Google 則更喜歡深灰色,色值為#121212。


                      

          通過提供的設計指南,我們可以輕易上手來設計和開發我們的軟件,但要注意的是深色模式并不是簡單的與淺色模式顏色對調,必須為所有的元素進行單獨配色。


                      

          淺色模式下的白色不會在深色模式下轉換成純黑色


          這樣也就能理解為什么很多軟件并沒有全部去適配新的深色模式,一方面使用場景決定的,另一方面就是深色模式并不是簡單地換個換個顏色就行,很多元素需要重新設計和開發。


          結論:該選擇哪種模式


          在去年的 WWDC 大會上,蘋果人機交互團隊的設計師曾對 macOS 的深色模式使用場景做了進一步的解釋。

          他指出,只有閱讀瀏覽或是內容創作型 App 才需要長期啟用深色模式,比如文字或代碼編輯。它們會借助黑底白字的高對比度特性來讓用戶視線保持集中,其它大部分軟件對于深色模式的需求反而并不強烈。


          或則你可以通過使用場景去選擇,在明亮的環境中使用淺色模式,在昏暗的環境中使用深色模式。



                      

          但是在大多數情況下,真正幫助你避免眼睛疲勞的是不要整天盯著屏幕,而不是糾結到底用深色還是淺色模式。

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

          文章來源:站酷 作者:羅小盒
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          延遲增強——視頻信息流廣告的提轉秘訣

          ui設計分享達人

          伴隨短視頻平臺的崛起,移動互聯網的主流內容消費形態向短視頻視聽語言轉變,視頻信息流廣告的時代已經來臨。如何通過設計提升轉化,是視頻信息流廣告所面臨的挑戰。


          為了提升廣告轉化效果,我們結合實際項目,通過大量的實驗與思考,梳理并總結了一套適用于視頻信息流廣告的轉化組件呈現原則,我們將其命名為“延遲增強”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見信息流場景。


          ///

          延遲增強是什么?


          視頻信息流廣告有三要素:內容、框架、轉化組件。其中廣告內容來源于廣告主投放的物料,基礎框架需對齊宿主保持一致性,所以僅有承載轉化信息和行為的轉化組件,是可設計部分。 


          “延遲增強”就是針對“轉化組件”的一種伴隨視頻內容分階段/漸進式的呈現方式。它由消費者決策時的理想心理動線,結合廣告行為推導得出,并經過實驗驗證了其對于轉化提升的有效性。


          “延遲增強”包括兩個階段:1.廣告展現初始階段,延遲展現廣告意圖,通過內容吸引潛在用戶;2.廣告內容逐步呈現階段,轉化組件漸進式增強,輔以增益信息,不斷強化,引導轉化行為。


          它指導了轉化組件從“呈現”到“增強”的全流程,從時機(出現&增強時機)/引導(動效&互動引導)/前置(信息&轉化前置)三個部分,幫助提升廣告轉化效果。



          ///

          時機-延遲增強如何呈現?


          轉化組件的呈現時機包含“何時展現”與“何時增強”兩個部分,前者幫助增加廣告接收率,后者提升廣告轉化率。


          01/ 出現時機:

          延遲展現廣告意圖,可以提升廣告賣點的展現機率


          互聯網的快速發展使得受眾被動卷入爆炸式增長的資訊信息體中,廣告借助這一媒介迅速發展,但也因為部分商業廣告的過度宣傳與其降低用戶信息獲取便捷性的本質,不可避免的使受眾產生了心理上的逆反與抵觸情緒,從源頭拒絕了廣告信息。

           

          所以對廣告來說,在廣告展現初始,延遲展現廣告意圖,融入內容,可以緩解受眾的抵觸情緒,提升廣告賣點的展現機率。



          02/ 增強時機:

          通過用戶行為和視頻特征動態決定增強時機,可以有效提升轉化


          對廣告來說,搭配廣告內容進行增強,通過內容積累購買欲/信任感,然后通過階段性的增強來提示操作,對比一成不變能起到更好的轉化效果。


          我們首先嘗試了程序化的增強時機,在不增加技術成本的前提下,根據歷史經驗,面向不同的廣告均采用固定時段的階段性增強。


          但不同的廣告物料內容不同,不同的用戶偏好也不同,固定的增強時機并不能很好的滿足所有廣告需求。所以在技術能力可以承載的時候,我們采用了動態時機策略,通過用戶行為和視頻特征動態決定增強時機,在程序化增強時機之后,再次實現了轉化提升。


          undefined


          ///

          引導-延遲增強如何引導轉化行為?


          轉化組件如何引導轉化,則可分為基礎的視覺引導與進階的互動引導,前者幫助搶奪視覺注意力,后者則能夠在互動體驗中植入部分幫助決策的“小心思”。

           

          01/ 視覺引導:

          適當增加視覺吸引點,可以有效引導點擊

           

          延遲增強需要通過階段性的增強來提示操作,而如何增強能有效吸引注意則需要琢磨,已有實驗表明轉化按鈕增加掃光動效與智能取色,能有效吸引注意,引導點擊,對轉化提升有良好效果。



          02/ 互動引導:

          讓用戶主動選擇,可以增加廣告曝光,輔助轉化決策

           

          互聯網產品設計對于用戶交互體驗的追求越發極致,如影視行業走向可交互網劇,本質上是從用戶接收轉變為用戶主動參與,用戶本身對于獲得優質體驗的意識逐漸覺醒。商業化產品也需要緊跟“體驗”與“互動”,將廣告變為互動體驗或具備使用價值的信息,讓用戶從被動瀏覽到主動參與,掌握對廣告的選擇權

           

          以互動投票為例,我們通過用戶與用戶之間的觀點表達,以投票選擇的形式誘發群體性選擇,引起好奇心與同儕壓力。

           

          若用戶選擇符合群體選擇,則帶來群體性背書,增強信任感;若用戶選擇不符合群體選擇,基于從眾心理,用戶極有可能對群體選擇產生好奇,從而瀏覽兩種選項的內容,有效的增加了品牌曝光。


          undefined


          ///

          前置-延遲增強如何幫助轉化達成?

           

          轉化組件的前置主要包含信息前置與轉化前置,前者輔助轉化決策,后者幫助便捷操作,更好更快的完成轉化。


          01/ 信息前置:

          增加增益信息或前置落地頁信息,可以輔助轉化決策


          購買/轉化一定是需要足夠的信息積累信任感才能達成的,在前卡適當的增加賣點信息能夠更好的幫助用戶決策。針對下載類廣告可增加評分與星級,二電類廣告可以增加價格信息,甚至可以前置優惠劵、圖片banner等信息,均能實現轉化的正向提升


          undefined


          02/ 轉化前置:

          縮短轉化路徑,可以幫助轉化行為更便捷的達成


          在信任感積累與階段性的增強都達成的時候,在當前轉化對比跳轉落地頁再進行轉化,鏈路更短,用戶流失概率更小。比起實驗嘗試,更像是延遲增強的基礎能力配置。


          首先,我們針對表單/咨詢/電話/安卓下載都進行了轉化前置,具有用戶明確意向的按鈕點擊會直接在當前進行反饋。



          除了直接將操作前置外,針對不同細分場景的需求,還可以通過交互形態的優化在感官上縮短路徑。

           

          這里以百度的視頻MAX廣告為例,我們針對重落地頁的商家,將MAX首屏(視頻頁)與H5落地頁的關系變拼接結構為雙層結構,通過浮層面板承載落地頁,延時自動彈出,強引導下方內容,激發用戶上滑瀏覽興趣,解決了落地頁隱藏較深,轉化鏈路過長的問題,同時增加了落地頁曝光從而提升轉化。



          ///
          結語


          在視頻信息流領域中,延遲增強仍然可以繼續深挖,作為“基礎建設”承載未來更多細分場景下的互動化、個性化的“精神需求”。

           

          同時延遲增強設計方法也可以橫向復用于廣告前卡、落地頁、IM工具等各種需要在合適時機抓取用戶注意的場景中,去追求點擊或者轉化的提升。甚至在未來可以嘗試其在長視頻或圖文場景中的應用。


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

          文章來源:站酷 作者:百度MEUX
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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