<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設計分享達人

          交互成本是用戶在與網站交互中必須執行以達到其目標所需的精力(無論是精神上還是物理上)。

          理想情況下,我們希望用戶訪問網站并在他們眼前找到他們正在尋找的答案。這將意味著零交互成本,并且是檢驗可用性的里程碑。

          不幸的是,由于大多數站點和應用程序都提供了用戶可能想要做的許多事情,因此很少能達到零交互成本。大多數時候,用戶必須四處瀏覽,閱讀,可能滾動,找到有希望的鏈接,單擊它,等待頁面加載,然后重新進行整個過程。有時,一個新窗口可能會在現有窗口的頂部彈出,在這種情況下,用戶必須將注意力轉移到新窗口上,也許還需要回頭看舊窗口以將信息集成到兩個窗口中。在其他情況下,用戶可能需要記住一頁上的信息,然后將其應用于另一頁。所有這些動作都需要認知努力并彌補了交互成本。

          可用站點將實現各種用戶目標所需的交互成本降至最低。也就是說,它們最小化:

          • 閱讀

          • 滾動

          • 環顧四周以查找相關信息

          • 理解提供的信息

          • 單擊或觸摸(不會出錯)

          • 打字

          • 頁面加載和等待時間

          • 注意開關

          • 內存負載-用戶必須記住的信息才能完成其任務


          這些用戶動作對總交互成本的貢獻不同。它們的相對重要性可能取決于用戶-例如,閱讀障礙的用戶閱讀時間可能比點擊周圍的時間困難,而操作障礙的用戶可能會覺得點擊困難。它們還取決于設備-連接到高速網絡的臺式機上的頁面加載可能微不足道,但是如果蜂窩網絡覆蓋較慢,則移動設備上的頁面加載可能會花費很長時間。

          許多可用性準則都解決了使交互成本的各個組成部分最小化的問題。例如,網絡寫作規則通過推薦要點和簡短的要點句子和段落來降低閱讀成本。

          交互成本示例

          讓我們舉一個簡單的例子。假設我們要查找“儀式”一詞的來源。我們將使用Dictionary iPhone應用程序執行此任務。我們將忽略在手機上查找應用程序所涉及的成本,并且在啟動Dictionary應用程序后立即開始分析。

          啟動應用程序后出現的第一件事是啟動屏幕。


          在這一點上,交互成本包括等待幾秒鐘,以使啟動屏幕消失并為應用程序的第一個可操作屏幕騰出空間:


          在此頁面上,互動成本來自定位搜索框。幸運的是,搜索框非常顯眼地位于頁面頂部,因此我們可以放心地認為,用戶只需很少的精力就可以找到它。找到后,用戶需要觸摸搜索框以將輸入焦點移到搜索字段中。搜索框是一個相當大且易于觸摸的目標,因此交互成本也可能會降至最低。


          接下來,用戶必須編輯搜索查詢。

          當輸入焦點在搜索字段中移動時,自動建議的詞將自動顯示。

          用戶必須查看自動建議并確定它們不相關,然后清除當前查詢。他們可以通過按右側的灰色x按鈕(如果他們熟悉iOS規則)來執行此操作,也可以通過按觸摸屏上的Delete鍵來逐個清除字符。

          刪除后,用戶將開始輸入目標詞“儀式”。當他們開始輸入內容時,關聯詞會顯示在下方。用戶可以檢查關聯詞并決定是否要繼續鍵入或停止并選擇關聯詞。


          選擇(或鍵入)單詞“ ceremony”后,用戶必須按Search進入結果頁面。他們需要等待片刻才能顯示新頁面:


          用戶必須推斷Origin可能包含有關單詞來源的信息。(對于大多數用戶而言,這是一個簡單的推論,因此認知成本很低;但是,如果改用“詞源”一詞,則某些用戶可能會在閱讀和理解其含義時遇到更多麻煩;因此,“來源”是更好的選擇,因為它降低了交互成本。)



          讓我們總結一下交互成本的各個組成部分,以找到“儀式”一詞的由來:

          1. 等待啟動頁面

          2. 搜索

            1. 輸入幾個字符

            2. 掃描自動提示列表,以查看所需單詞是否在其中

            3. 如果否,請輸入更多字符并在上一步中重復

            4. 如果是,請通過點擊選擇所需的單詞

            5. 找到搜索框,然后點擊將輸入焦點移至該搜索框

            6. 閱讀搜索框中顯示的查詢和自動建議

            7. 決定查詢不相關

            8. 刪除搜索框中顯示的查詢

            9. 鍵入或選擇自動建議

            10. 點擊搜索

          3. 等待結果頁面

          4. 在結果頁面上找到相關的詞源信息

            1. 向下滾動頁面并掃描內容以查找詞源信息

            2. 找到標簽并閱讀

            3. 請注意,右側還有更多隱藏的標簽

            4. 推斷詞源可能是隱藏的標簽之一

            5. 注意到滑動會向右暴露內容

            6. 向右滑動

            7. 閱讀Origin并將該單詞與目標聯系起來,以找到單詞的來源

            8. 點擊詞源

          5. 了解“儀式”一詞的來源

          如您所見,一個相當簡單而輕松的過程需要很多步驟和子步驟;他們每個人都會產生互動費用。對于某些人而言,交互成本微不足道-例如,記住人們向右滑動即可顯示更多內容,因此交互成本非常低,因為人們在移動設備或Web上已經多次遇到水平滾動??梢詢灮渌襟E以最小化交互成本;因此,在搜索框中使用灰色的小x按鈕可以大大降低刪除顯示在搜索框中的查詢的成本。同樣,將按鈕調大可以幫助點擊目標。選項卡的位置和外觀設計會影響人們找到選項卡的速度。(當然,選項卡本身的選擇與使用其他方式來構造內容的方式也會影響用于在結果頁上查找相關信息的位置的交互成本。)


          預期效用

          請注意,對于前面各節中的某些步驟,用戶可以有多種選擇。例如,他們可以按灰色的x按鈕刪除當前字符串,也可以多次使用Delete鍵?;蛘撸麄兛梢詮淖詣咏ㄗh列表中選擇建議,也可以在最后輸入字符串。

          人們如何決定采取哪種行動?答案在于預期效用的概念:

          預期效用=預期收益–預期交互成本

          用戶嘗試最大化一項操作的預期效用:換句話說,他們權衡了每個操作的收益和成本,然后選擇收益與成本之間最佳平衡的方案。

          當有幾種方法可以實現具有相似利益的相同目標時,用戶通常傾向于選擇使估計的交互成本最小的操作。



          例如,許多人可能不會在自動提示列表中向下滾動以找到“儀式”一詞,而是可能會再鍵入一個(或幾個)字符,直到可見“儀式”一詞為止,因為向下滾動小列表和掃描列表中的正確單詞比擊中一個甚至幾個字符的成本更高。


          這種類型的想法也普遍適用于站點級別。如果看起來真的很難在任何給定站點上實現其目標,則除非與初始站點進行交互的收益確實很高,否則大多數用戶只會以較低的估計交互成本轉移到另一個站點。舉個例子,如果用戶真的想購買Apple電腦,他們可能會堅持使用Apple的網站,因為他們不太可能在其他地方購買。在這種情況下,用戶的動機確實很高,因此他們可能愿意忍受很高的交互成本。但是,如果用戶要購買燒烤架,則可能不在乎是否從Home Depot或Lowe's或其他站點購買,并且會離開互動成本高的站點。

          營銷和品牌推廣通常會增加與特定網站或品牌互動的用戶動機和預期收益;可用性可以降低交互成本。兩種方法最終都解決了增加使用站點或軟件的預期效用的問題。

          為什么您應該關心交互成本

          交互成本是可用性直接度量。實際上,該概念早在人機交互時就被引入,以評估軟件系統的可用性。所有的可用性啟發將用戶的交互成本降至最低。

          從長遠來看,快速評估設計的交互成本可以節省大量資金,因為它可以很好地衡量用戶界面的難易程度。它也可以用作設計備選方案之間比較工具:通常,將交互成本最小化的方案具有更大的成功機會。

          文章來源:站酷 作者:ZZiUP

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


          Widget-網絡革命新思維

          ui設計分享達人

          從6月分的全球開發者大會至今,大部分蘋果用戶都更新至iOS 14正式版系統。Widget成為新版本系統中討論度最高的部分,知乎、小紅書、公眾號各個平臺都能會看到關于桌面小組件的討論以及各種關于小組件排版設計攻略。本文帶你了解Widget的「前世今生」,除了很Android外,Widget這次為什么會成為這次iOS 14更新的重中之重,各大應用搶先適配iOS 14,搶占流量的新入口。

          小部件最初來源于蘋果電腦工程師Rose的一個插件工具—Konfabulator,用來更換桌面運行工具的皮膚和外觀。2003年的Konfabulator是運行在蘋果操作系統之上的,而其中的主運行文件叫做Widget。就像現在很多的新型產品一樣,當年的Konfabulator一經發布,在美國引起眾多人的關注,兩位開發者也最終決定將這款工具命名為Widget。

          一直到2004年11月Widget1.8版本正式對外發布,此時的Widget不再局限于某一平臺,而是一款跨平臺的產品。Windows和Mac用戶可以根據自己的喜好開發或使用Widget工具,這只是這款工具的開始。

          時間來到2008,當時的蘋果已經推出了iOS 2。而Google聯合多家廠商開發了安卓系統,當時Android的最大特色就是開放,開發者可以根據自己的喜好隨意的修改底層文件,我們當時印象中多變的Android桌面使用的就是Widget程序。我們熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的隨意設計導致后來的Android設計語言碎片化嚴重、交互感受相互割裂。一直持續到Google將物理設計體驗帶入屏幕的設計語言Material Design,利用具象化的設計語言規范各家的開發,遵守統一的設計語言和交互感受,由于篇幅限制就不詳細展開去說。

          Widget的定位其實相當于應用程序的擴展程序,使用的關鍵點在于用戶可以在不打開應用、無需加載等待的情況下,在屏幕上快速獲取信息甚至進行簡單的操作。

          Widget按應用可分為三種:Desktop Widget、WEB Widget以及Mobile Widget,目前討論最多的iOS14更新的Widget其實是運行在移動設備上的Desktop Widget,又稱為Mobile Widget

          注:Widget在剛進入中國的時候,沒有通用的譯名,由當時的中搜命名為“微件”。直到這次iOS 14才使用“小組件“的命名。

          蘋果多次強調Widget不是進入應用的另一種快捷方式,Widget是一種的信息展現方式,用來快速提供展示某些用戶關心的應用程序數據。

          Widget按照用戶使用場景的不同,可以分為:信息小組件、集合小組件、控件小組件及混合小組件。而iOS 一直將主屏幕的控制放置于控制中心中進行交互,因此小組件類型的主要是信息小組件及集合小組件。

          信息小組件

          在人們的日常生活中有一類應用,無需進行操作,但應用需要經常性的更新信息。比如:天氣、時鐘等等。信息小部件將應用的關鍵性信息展示在小部件上,同時跟蹤相關信息的變化。根據小部件的大小選擇性的展示信息的密度。

          集合小組件

          同一類型的眾多元素展示在小部件內,常見的比如:新聞報道、系列圖片或電子郵件等等。這類小部件有兩個特點:1.信息集合;2.點擊集合元素中的某一個元素可快速進入詳情頁進行瀏覽。集合小部件可進行垂直滾動,但在iPhone端由于交互限制,并不能進行此項操作。例如:微博、知乎。

          控件小組件

          控件小組件子除了顯示常用的功能狀態外,用戶可直接在主屏幕進行簡單的觸發操作,不需要打開相關應用,類似相關應用的外部遙控器。例如:音樂類小部件,用戶可以在當前小部件上進行簡單的暫停、切換曲目等操作。而iOS系統傳統的“控制中心”包括大部分的手機操作部分,因此iOS 14的小組件還是以展示信息為主。

          混合小組件

          實際上更多的小部件是同時具備以上兩個到三個特性的混合小部件。比如:音樂類小部件,不僅可以進行簡單的交互,同時也展示了當前播放音樂的基本數據。

          蘋果作為全球化的頂級手機制作商,一直追求通用的設計語言。設計規范包括:完整性、一致性、直接操作、反饋、隱喻,用戶控制等幾個設計原則。蘋果有別于其他手機系統的封閉式系統,作為一個習慣于為用戶做決定的父系公司,雖然這次Widget的跟新被看做是蘋果對于之前控制的減少,但在iOS 14關于Widget的官方設計指南中,也有明確的關于Widget尺寸的限制、卡片式的圓角半徑的限制、展示內容形式限制、設計交互的限制。

          iOS桌面小組件的內容雖然可以通過開發定制,但在手機桌面仍然保留規范的視覺規則。

          三種尺寸

          Android小部件之前雖然也有限制minHeight和minWidth的大小屬性,但卻可以通過左右上下拉伸大小,調整小部件信息展示內容的多少,因此大小其實是不受控制的。

          在iOS 14這次更新的小部件,同一應用限制只提供3種尺寸2x2、2x4、4x4。

          小組件的核心功能是讓用戶無需進入app便可獲得信息,即少量但即時、有用且高度相關的信息。因此針對不同作用的應用需要先進行展示信息的梳理整合,明確小部件的核心目標。


          • 2x2小尺寸的小部件類似動態圖標,僅顯示當前當地的天氣,并可以打開應用。

          • 2x4中等尺寸以及4x4大尺寸的小部件,則可以在2x2的基礎上額外展示更豐富的信息,并且可以與用戶進行交互。


          同時為了確保所有小部件的圓角看起來都是一樣的,要求所有小部件采用SwiftUI容器應用正確的角半徑。相關開發文檔ContainerRelativeShape

          位置吸附

          Android手機桌面的widget可以隨意的放置在任何位置。而iOS的小部件和之前的所有圖標一樣,仍然要緊貼其他應用吸附在屏幕的頂端,不能居住只能靠邊放置。

          智能堆棧

          當在同一區域希望有多個小組件進行展示時,可以使用智能堆棧功能。根據不同的使用場景,通過上下滑動進行切換。Siri會根據時間的變化,顯示不同的小組件內容。

          蘋果從iOS7開始借鑒了微軟以及谷歌的設計語言,減少視覺裝飾、拋棄了擬物化的設計風格,盡量以內容為核心,在這次的iOS小部件也對內容展示進行了限制。

          • 聚焦內容目標點。小部件的關鍵點在讓用戶易于瀏覽,所以需要前期進行設計目標的梳理,僅展示少量的信息,專注于程序的某一部分內容。

          • 顯示內容與大小的關聯性。創建不同尺寸的小部件時,不應該只是簡單的擴大小部件的大小,而應該是在大尺寸時考慮展示更多內容,更詳細的可視化效果,圍繞基本信息的基礎上修改表現形式,進行優化和調整。

          • 提供真正有用的信息。小部件的意義在可以在主屏幕立即為用戶提供有意思的內容,而不是像桌面圖標一樣成為另一種快捷打開方式。

          • 保持展示內容的更新。小組件的展示數據需要不斷的更新,否則無法吸引用戶的注意。

          • 尋找應用的特殊性。例如日歷小組件,可以針對特定的時間和事件進行獨特的視覺處理。

          • 合理的設置選項。長按小組件會出現“編輯小組件”的選項,可以對組件的展示內容做分層或重要程度展示。例如:天氣、時間切換城市的定位。網易云音樂“定制我的云音樂小組件”切換“每日音樂推薦、我喜歡的音樂、私人FM、歌單推薦、私人雷達”的順序。

          • 避免在小組件中加入過多的交互元素。避免過多的目標,以至于用戶無法點擊所需的目標。根據內容小尺寸,設置一個點擊元素便可,中大尺寸的小組件,可設置多個點擊元素。如中等尺寸的微博,可以通過點擊任意一條熱點,查看熱點內容。

          • 僅支持點擊,不具備垂直滑動。在Android的集合類小部件除了基礎的點擊交互外,支持部件內信息的垂直滑動,但在iOS系統中的小部件不具備垂直滑動的操作方式,應該是蘋果考慮到小部件在左劃的homescreen,可以無限堆疊小部件,容易引起交互操作的沖突。唯一的交互方式就是點擊打開應用。

          可以看到iOS 14的widget沒有其他交互方式,只能通過點擊喚醒應用或某條資訊的詳情頁。蘋果在保證一貫簡單明了的用戶體驗外,不建議應用商設計過于復雜的樣式來呈現內容,盡可能的減少用戶電池、網絡方面的消耗。

          weight設計系統內容常見布局形式,可以作為設計小組件時的參考。

          由于蘋果本身自帶的話題屬性,在2020年6月22日第一次線上開發者大會—WWDC20發布的widget,到iOS14正式版上線期間,國內外熱度一直高居不下,首先各家應用廠商、個人設計開發師都推出自己對widget適配的產品;小紅書、知乎、微博等公眾流量平臺的個大私欲流量博主基于產品的適配推出各種風格主屏幕的應用攻略,widget迅速成為巨大的流量入口。

          從6月分的開發者大會到正式版上線,蘋果在自家的應用App store的Today專題、iOS 14精選App對widget進行了針對性的推薦,當搜索“小組件”等關鍵詞時還會出現“超實用的小組件”專題推薦。

          基于蘋果用戶的巨大市場,App能夠獲得蘋果的推薦意味著大量有效曝光以及話題熱度,此時很大一部分應用,根據產品特點,搶先適配小組件功能,獲得蘋果推薦,搶占一波流量。

          從9月份開始,color Widgets、倒數日、Widgetsmith、我的天氣等多款以時鐘、計時、日歷、天氣功能的小組件應用多次輪番登上App Store應用免費榜第一。(數據來自七麥數據)

          并且直到現在依然維持相對穩定排名的高度,及高下載量。

          這些數據一方面不僅因為用戶在知乎、小紅書、抖音對于如于如何使用小組件的功能、如何更定制化的設計布局自己桌面的討論,還在于各大社交平臺應勢對于小組件話題的推送,使蘋果的小組件獲的了更多的關注度,與用戶關注度。

          而有些設計師看到這其中的巨大流量賺的盆滿缽滿。9月20日設計師@Traf在自己的社交媒體賬號發布了自己設計的iOS 14主屏幕,立刻獲得大量用戶的喜歡。Traf轉手將自己的這套圖標以28美元的價格出售,開始就獲得了3626人的支持(有興趣的小伙伴可以點擊https://icons.tr.af/ 購買),六天就賺了10 萬美元,有人要去畫圖標了嗎?

          蘋果對widget的特性定義為:簡單明了(Glanceable)、恰當展示(Relevant)、個性化定制(Personalized)。阿里和京東于9月中旬基于對iOS新特性widget的理解與限制,分別對自家產品手淘和京東進行了適配設計。

          京東根據iOS 14 widget提煉出的關鍵詞:簡潔、高效、內容化。整合自己出自己品牌的設計三大原則:個性、信息、情景。在設計原則的基礎上,結合京東的業務指標和用戶場景,制定出了京東widget的四個方向:物流(工具)、直播(互動)、店鋪(私域)、秒殺(營銷)。

          • 物流——提升獲取信息的效率。及時查看物流通知,跟蹤物流進度,提升用戶獲取信息的效率

          • 店鋪——建立用戶與產品間的連接。利用widget的展示功能,在桌面推出店鋪的新品,方便用戶隨時隨地關注不同店鋪的新品。

          • 秒殺——聚焦首頁獲取核心信息。為用戶實時提供秒殺商品,紅包,配合京東的簽到形式,承載京東營銷矩陣的業務背景。

          • 直播——用戶互動。推薦熱門、感興趣的直播,預告明星直播,增加用戶與用戶、用戶與主播間的互動。

          手淘根據數據得出:用戶雖然平均每天進入屏幕的次數超過90次,但停留的總時長不過幾分鐘。結合一閃而過的快速切換應用的主屏幕里,設計交互復雜的應用界面并不能契合用戶的需求。得出設計要素:一目了然、高相關性、個性化。

          • 所見即所得的物流——將查看物流信息之前需要“打開手淘、點擊我的、進入訂單、查看物流”4步操作,簡化至前臺widget透出,用戶輕松掌握包裹的一舉一動。

          • 強大的訂單管理——基于手淘人群60%的目標在訂單模式,快速啟動功能。以及對一些必要widget做了深色模式的顏色適配。

          • 便捷的互動權益提醒——針對淘寶人生、淘金幣、芭芭農場等互動專區,可在widget組件上時效了解自己互動權益的完成狀態。

          • 千人千面內容定制——基于商品、社區、直播、店鋪等手淘的廣泛產品,通過多元的方法將前臺的展示權利交給用戶。例如:關注的店鋪,關注的直播內容,愛豆的時裝秀。

          京東立足于自身的業務指標和用戶場景制定京東widget的四個方向,手淘根據數據導向一目了然的用戶需求。但由于京東與手淘都是購物應用,結合widget信息展示的特點,最終的聚焦點都是在于信息的獲取效率及提醒。使用戶在不打開應用的前提下,滿足不同的場景需求。但淘寶常年的游戲營銷,淘寶人生、淘金幣、芭芭農場的互動場景使他的業務場景化比京東更游戲化,在視覺方面也更豐富。

          推薦閱讀:

          京東APP iOS14適配解鎖

          來了來了,iOS14 和淘寶新功能一起來了??!

          下面推薦幾款我自己覺得非常不錯的小組件。

          開發者David Smith發布的一款用戶可以自己創建定制天氣、日期、天文等widget的應用。該應用采用了直觀的圖形界面話,精確調整每個widget包括字體、顏色、背景色等的顯示信息和樣式。支持大、中、小三個尺寸,與iOS 14的Widget 大小是完整匹配。

          與其他小組件不同的是,Widgetsmith可以根據時間自動變換小組件,在編輯小組件時選擇“Add a Timed Widget”,然后在表盤上劃分時間,并添加對應的小組件。放置在桌面的小組件就會隨著時間變化成相對的畫面。

          這款應用與其他天氣類應用不同的地方在于,它提供了9種的widget樣式,17個主題,滿足用戶各種風格的需求。除了常規的天氣預報外,還有實時天氣,空氣質量、世界天氣、生活指數可供選擇這款應用與其他天氣類應用不同的地方在于,它提供了9種的widget樣式,17個主題,滿足用戶各種風格的需求。除了常規的天氣預報外,還有實時天氣,空氣質量、世界天氣、生活指數可供選擇。


          我的天氣同一家開發團隊的另一款小組件倒數日,是一款可以直接在屏幕上看到不同主題倒數天數的小組件,能根據自己心情更換背景。此外還可以設置日歷小組件和時鐘小組件。

          西窗炷采用白底黑字簡約的界面風格,每天推送一首詩詞,點擊便可閱讀全文。也可以通過編輯小組件選擇自己想看朝代、體裁和顯示字體。


          沒有買過豆瓣日歷的舉手,買完心心念念覺得自己會每天看一部電影,em……然而并沒有。豆瓣的小部件除了兩種電影日歷的樣式外,實時熱門書影音排行的界面也能讓用戶不用打開應用,便可獲得及時的影音信息,點擊進入詳情頁面。

          當然也有網友做出了史上最強小組件,以及其他有趣的組件

          目前每個手機用戶主屏幕上都會有越來越多的app,我們的衣食住行娛樂都需要各種app的協助完成,但隨著app的增長,用戶會將各種app按照種類、類型進行劃分,靠線索記憶或肌肉記憶,熟悉app的位置,但隨著時間的推移,我們可能又會有各種新的應用需要下載使用。重復分類、查找、點擊進入的行為,其實是很浪費時間的步驟。

          首先我將之前的主屏幕全部隱藏,只留一個主屏幕頁面。數據顯示日常對手機的操作交互中,有50%左右的通過左手/右手單手握持操作,而我本人習慣左手單手握持操作。操作熱區如下圖中所示的從左到右從下到上。

          其中頂部區域及右邊區域放置,豆瓣、西窗燭、我的天氣等展示類小組件;Todoist、Thing3、倒數日等任務管理類小組件;知乎、微博、頭條等咨詢類小組件則可以放置于畫面中間,不妨礙點擊某條信息。也可以使用智能堆放功能,將多種小組件放置同一區域,通過上下滑動進行切換。最后放置自己平時使用頻繁的應用圖標即可,使用頻率也是按從左向右的順序。大小方面

          蘋果的app資源庫會默認經常使用應用可以直接點擊進入,在使用其他app不常用的app時,可以通過上方的查找區域進行搜索。

          目前已經使用1個月左右,之前也試過各種好看的小部件,最后還是以效率為出發點,將大部分的app放置在app資源庫中。

          在我們的認知中,手機桌面更像是一個應用程序的目錄。我們不會過多的在主屏幕停留,需要借助啟動圖標點擊進入應用進行操作,用戶打開某個桌面應用,在應用內進行操作;另一方面在當前app應用越來越多的現在,高頻應用與低頻應用混合,常常在使用時,陷入查找應用中,降低了信息獲取的效率。小部件的使用,使得用戶雖然還是不能在主屏幕界面進行數據處理,但小部件作為應用程序的擴展程序,用戶卻可以在不打開應用、無需加載等待的情況下,在主屏幕上快速獲取信息甚至進行簡單的操作,不得不說是在改變用戶長久以來的使用習慣。

          無論是Google從碎片的Android系統轉向物理設計體驗的Material Design設計語言來規范各家的開發。還是最早提出“One productfamily,One platform,One store”希望將手指與手機觸摸交互與鼠標指針交互的打通,保證多設備的一致性,但最后卻被自己各種花樣作死的微軟磁鐵設計。各家都在嘗試統一設計語言,以及交互感受。而這次iOS 14的,我們已經看到了蘋果在iOS、iPadOS、macOS、watchOS乃至于tvOS上的聯動與融合,而小部件就是最重要的一步。

          文章來源:站酷  作者:9號自習室

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



          交互設計中排行榜設計詳解

          ui設計分享達人

          “今天吃什么?。俊?

          “不知道啊,看看大眾點評,哪家店比較靠前”

          “一會去看什么電影?”

          “我看豆瓣上,這部片子評分特別高,我們去看這個吧”

          當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時,面對的選擇越多卻越不知道如何做決定,或者當下做了決定覺會一直思考做的這個決定是不是最好的,選擇困難變成了大眾病。面對用戶的選擇需求各大平臺都有自己的方式,幫助用戶做決定的同時,引導用戶購買目標產品,極大的降低了用戶的選擇成本,其中排行榜就是平臺的常用套路。用戶的選擇成本是什么?排行榜為什么能夠幫助用戶降低選擇成本?排行榜僅僅是用來降低用戶的選擇成本,為什么商家對排行榜也趨之若鶩?下面帶你了解為什么人人都愛排行榜,及我們生活無處不在的“顯性”“非顯性”排行榜。你可能都不知道,我們的生活正在被各種排行榜所支配!


          排行榜的本質是一個沒有感情的信息篩選機制,某一相關的同類事物之間通過比較,反映同類事物客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可,比如我們買衣服會首選淘寶,電子類產品會首選京東,看電影會看豆瓣評分,這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選,由于錨定效應降低用戶自己的選擇成本,準備快速的做出選擇。同時由于用戶的從眾心理或者羊群效應,也會對上榜主體產生強烈的品牌認可,為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量和平臺背書標簽,比如:B站的百大up主,各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名。那這一切背后的原理是什么?


          一個完整的排行榜需要平臺、上榜主體、用戶三大組成部分,俗話說屁股決定腦袋,不同的定位決定了排行對三大組成部分不同的作用,當然背后的原理也不盡相同。

          1.選擇類排行榜-降低用戶選擇成本

          在沒有各種應用前,當我們決定購買什么東西或去哪家消費,前期需要花費大量的人力、物力,搜集相關的信息進行整理集合后,對比集合信息后才能做出決定,也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后,做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本(前兩個階段發生的成本是交易費用,而不是選擇成本)。在備選集的建立過程中,包含的選擇越多,用戶選擇的難度就越大,選擇成本就會越高。

          選擇性排行榜在備選集建立完成后,利用沉錨效應在用戶心理建立潛意識的目標參照,幫助用戶完成擇優決策,降低用戶的選擇成本。(另一方面平臺在幫助降低選擇成本的同時,也會影響這用戶的最終選擇,在接下來的平臺側方面會有詳細的分析)

          比如說:當我需要買個耳機時,如果在沒有各大應用的前提下,我需要找到我身邊的耳機發燒友或數碼電子方面方面的內行人,收集信息建立備選集,但由于京東在電子設備方面的權威性,我會優先查看京東的耳機類排行榜,也就是說京東完成了前期的信息搜集及備選集建立,而用戶出于對平臺權威性的信任,根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息,最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找,以及用戶對信息確定性的尋找過程。

          2.信息類排行榜-滿足社交需求

          在馬斯洛需求中,當個人的生理需求和安全需求被滿足時,與他人建立情感聯系或關系成為人們最強烈的需求,即社交需求。社交又分為:為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如:QQ音樂新增的撲通社區、微博明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。

          無論是“功利社交”還是“共情社交”首先需要的是溝通,溝通的本質則是信息的流通,但當雙方都沒有可以溝通的信息時則社交不成立,而類似:微博熱搜、今日頭條、澎湃新聞等信息類排行榜,則給有社交需求的用戶提供了相通的談資。

          在選擇類排行榜中,提到的從眾心理(又稱羊群效應),是指人類由于對信息壓力規范壓力,會希望融入到群體中尋求安全感的特性,即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感,會熱衷于瀏覽此類排行榜來獲取實時信息,融入群體生活。每天早上,在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件,在上班電梯或工作間隙討論各自掌握的信息,及對事件的見解,甚至在與他人有相同的見解或之后,會對對方產生莫名的親近感,滿足自己的社交需求。

          3.分享類排行榜-自我確認需求

          過年期間各家app紛紛推出自己的用戶年度報告總結榜,不知道你有沒有參與到其中,并分享到自己的朋友圈。在我們的平常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序,人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外,還需要了解自身在大數據下的自我確認,通過各種各樣的榜單,判斷自身的能力、情緒、價值等,來達到自我認同,否則就會感到焦慮不安。

          加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解“社會是舞臺,人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程,我們想要呈現給觀眾怎樣的形象,需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己,為了維持自身的平衡防止崩潰,人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己,讓用戶更加清楚的認知自己,同時通過分享,滿足自我確認以及他人確認的需求。

          我目前只總結出這三種類型的排行榜,如果有小伙伴想到其他類型歡迎在評論區提出,一起參與討論。

          無論哪種排行榜,用戶信任的基礎都來自對平臺的信任,那么用戶為什么信任平臺?排行榜對平臺意味著什么?背后原理是什么?

          對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性,選擇成本是品牌經濟學的核心,而用戶對于排行的信任首先要建立在平臺品牌的權威性下。

          1.平臺權威性—用戶側

          從我們記事起,我們對世界的認識來自自己的父母或老師,而這些教導我們什么是對、錯,對當時的我們來說是權威的化身。長大后我們對于權威的認可更傾向于某一領域的專家,比如:醫生、律師、教授等。認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠,可以幫助普通用戶節省研究問題的工作,做出更輕松的決定,雖然不一定是正確的。

          搜索我們會第一時間想到百度,影視、書籍會想到豆瓣,想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性,形成品牌號召力,推動用戶做出需求決策。另一方面排行榜中也會說明數據來源,比如京東會在排行榜頁面有明確的榜單說明,豆瓣根據平臺數據更新,汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明,減少用戶做出決定中的思考、猜測,獲得用戶的信任,增強平臺的權威性。那對于平臺來說權威性的建立意味著什么?

          2.平臺權威性—平臺側

          • 影響用戶的決策方向

          平臺權威性意味著說服力影響力,在減輕用戶的決策壓力的同時,影響用戶做出平臺所需的決策方向;

          • 平臺自帶話題性

          每年蘋果發布會都會帶來范圍極大的熱度討論,而app store內的熱門推薦自帶話題度和討論熱度

          • 輸出口優化

          排行榜作為內容輸出口,在平臺權威性的背書下,產品優化自身的價值,而平臺也可以通過排行榜優化自身平臺價值

          • 平臺盈利

          平臺權威性下,可以通過多種方式達到盈利,比如蘋果app store應用商店內的付費應用,百度的鳳巢系統、微博熱搜的第3、4位排名等。

          3.平臺權威性—廣告告知

          在平臺完成建立權威性開始利用排行榜進行商業變現時,比如百度、58的競價排名,現在大部分應用會使用明顯的方式告知用戶,防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”,淘寶、小紅書推薦猜你喜歡的“廣告”。

          上榜主體作為整個排行榜的內容中心,由于排行榜自帶的競爭機制、篩選機制,使得用戶會很樂于分享出去,比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。 

          由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度,以及各種潛在資源,比如:流量、資源、人脈、某一領域影響力、平臺背書等等,這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感,比如bilibili不同粉絲量級會送出相對應的粉絲牌。

          而平臺方也利用上榜主體挖掘潛在的用戶,為平臺帶來更多的新用戶,加強平臺權威性,形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量,帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站,簽約西瓜視頻”,各大平臺也時不時會出現搶占流量up主的情況。

          排行榜資源的建立

          排行榜設計要達到用戶攀比的效果,很重要的充分條件就是相同需求好友基數足夠大,這樣才能構成排行榜設計成功的必要條件。

          1. 同系同門資源導流

          對于已有成功產品的公司,可以借助平臺相互間的導流完成初試資源的搭建,比如:微信初期借助QQ好友流量,帶來好友初期的爆發;抖音最初的活躍借助今日頭條的流量輸入。

          2.自建用戶體系

          不斷推送已關注好友的信息流,當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交,你要先有這個人聯系方式才能要求好友,關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等,不斷社區建設推送動態信息流和好友卡片推薦。

          3.偽造

          當應用建立初期,沒有很多的資源和內容時,需要平臺自行填充內容,使得排行榜信息量大,增加用戶活躍,才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等,或是平臺pgc發布推送的內容。


          面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化,根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。

          在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成,其他則根據不同產品類型及產品需求決定是否展示。

          1.頁面tab

          在首頁底部或頂部tab形式出現,多出現在以UGC或文字信息為核心的產品,以內容信息為主,常見以信息熱度為主要功能的資訊、新聞類應用。比如:知乎、今日頭條、36氪。

          知乎熱榜內容完全展開;36氪分為話題榜、人氣榜,話題榜僅展示前5條,人氣榜展示10條,僅在前5條有名次圖標,在36氪熱榜的中部還會出現收藏榜,綜合榜。

          而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”,點擊“查看更多”后,展開“頭條熱榜”及“今日關注”“北京熱榜”,整個交互形式類似微博熱搜。

          2.圖標入口

          首頁功能入口處明顯排行榜圖標,優先級較高,常見自帶推薦屬性,能夠幫助用戶快速選擇,減少選擇成本,比較依賴榜單的應用。比如:豆瓣、音樂類、騰訊動漫等應用。

          其中豆瓣、網易云音樂由于各種類型的排行榜很多,在圖標點擊開后,在當前頁面平鋪不同維度榜單類型,用戶進行點擊跳轉;騰訊動漫相對榜單類型較少,在左邊側邊欄切換不同的榜單。

          3.商品詳情頁榜單入口

          用戶查看商品詳情時,可能會希望能夠橫向對比同類商品,才能最終決定購買那件商品。常見于電商類應用,比如:京東、拼多多、得物等。點擊后進入不同的榜單頁面,獲取更多產品信息進行篩選。(淘寶的商品詳情頁沒有排行榜,但在首頁卻存在隱形排行榜,在隱形排行榜模塊會有詳細說明)

          4.搜索-篩選(無明確搜索目的)

          當用戶沒有明確搜索目的時,搜索框的下方,平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶,比如:微博熱搜、淘寶熱賣、抖音熱榜等。

          沒有明顯排名及規則,但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前,位置越靠前,在用戶心目中的默認位置越靠前,比如淘寶的“有好貨”、編輯精選等。

          1.編輯推薦/小編推薦

          在平臺建立初期沒有特別的內容供平臺呈現,這時候就需要平臺人工有目的的推薦一些內容,不同于“猜你喜歡”建立在用戶的行為數據下,編輯推薦更多的平臺希望用戶看到的內容,一方面作為平臺內容的輸出口引導用戶,另一方面內容是平臺自己發布內容,也可以保證內容的高質量。

          2.猜你喜歡/相關推薦

          平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期,并且存在大量的平臺用戶使用數據,“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性,各大應用平臺適用性強,一般出現在首頁部分。

          3.年度總結排行榜

          朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜,這些其實是用戶自己確定了解自己,且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓,清楚的認識自己。

          4.TOP排行榜

          不知道大家小時候看沒看過《第10放映室》,那是我最早關于排行榜的印象,里面會有各種最佳動作片總結、最佳男配角總結等等,以香港電影偏多,是我早年的電影信息資料庫?,F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦,這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜,從眾多選擇中選擇出部分答案,給出理由,而用戶只需在已被篩選過的內容中進行決定,節省選擇成本,比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定,但可以迎合用戶對確定性需求的各種盤點性質的排行榜,比如抖音的TOP榜哥就是盤點各種內容,人物。

          5.搜索-篩選(有明確搜索目的)

          相比其他排行榜,篩選后的內容已經體現了用戶的具體需求,高效明確的給用戶提供選項,引導用戶快速選擇。


          排行榜一般由必需的榜單頭部、上榜主體,及非必需的榜單規則、更新信息構成;而上榜主體由必需的主體信息、排序,以及非必需的推薦理由、排名變化、熱度信息構成。

          好的榜單能夠快速吸引用戶快速找到自己的需求點,引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、復用性榜單頭部。

          1.唯一性榜單頭部

          當排行榜在整個應用中有且只有一個時,通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出,增加平臺的品牌權威性。

          2.復用性榜單頭部

          有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況,為了平臺的統一性、降低后期的維護成本,一般會使用可復用的榜單頭部,如豆瓣、京東、QQ音樂等。

          得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配,但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案;馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式,通過更換文案底圖達到適用不同主題;京東就相對比較簡單,只是更換標題的文案達到多主題適配。

          排行榜上榜主體由于不同的場景業務需求,一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式,其中主體信息及排序為排行榜必須信息,而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。

          1.純文字形式

          純文字的排行榜一般是以內容(或標題)加排名的形式出現,常見以信息為主的排行榜,比如微博、知乎、今日頭條等以信息為主要關注點的應用,或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準,因此會在標題及排位外,增加各種突出熱度信息的表現形式,如關注熱度人數,或是“熱”“新”“爆”等等表示熱度的標簽,如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化

          2.圖文結合形式

          相對于純文字形式,圖文結合的排行榜因為圖片信息的增加,使整個榜單主體占居更多的空間也可以展示更多的產品信息,輔助用戶進行選擇。

          • 圖片形式

          上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式,延續了用戶閱讀新聞類資訊的習慣;而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖,因此沿用至線上使用的也是豎版圖片形式;而京東、大眾點評、馬蜂窩則使用方版的圖片形式,大概是因為產品的多樣性需要考慮多種圖片的適配問題。(視頻、游戲類由于使用場景大部分采用橫版圖片形式;但由于游戲封面、宣傳海報也會有豎版的形式,比如:游民星空、小黑盒)

          • 左文右圖VS左圖右文

          每當設計圖文結合的部分,首先要考慮到底是采用左圖右文還是左文右圖的形式呢?可能很多人會說這兩種形式沒有什么大的區別啊,有什么可糾結的!或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的,因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。

          人類對畫面的閱讀及掃描方式通常為三種布局方式,包括:古騰堡圖(Gutenberg),Z型(z-pattern)和F型(f-pattern)。其中產品列表頁中最常使用的就是F型布局模式,F型布局是雅各布·尼爾森(Jacob Nielsen)在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是,眼睛從上/左,水平移動到上/右,然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后,向右掃動的次數會越來越少,并且會隨著向下移動,眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面,即自左向右自上而下的閱讀模式,越向下信息獲取效率會越低。

          因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式,比如:騰訊動漫、愛奇藝、得物等等。

          3.橫排+列表表現形式

          說到排行榜我們一般第一個會想到領獎臺,很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜,平臺用戶的注意力大部分集中在第一名,而領獎臺的形式模仿現實生活中的獎勵形式和儀式感,將整個排行榜的關注范圍從第一名擴展至3名,另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系,增加了第一名的高度。(目前這種形式我只在微博的明星勢力榜及抖音的直播全站榜中有看到)

          榜單規則是排行榜規則的描述,是平臺權威性的體現。榜單規則有些平臺本身具有數據庫,會有相關的平臺數據支持如京東;而汽車之家則依靠“汽車工業協會”外部的數據支持,增加平臺的權威性及榜單的可信度;

          信息更新一般存在在榜單頭部和上榜主體的中間,有些是固定時間更新,也有類似微博熱搜是實時更新的模式,而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。


          排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案,但歸根到底因為人們對于不確定性的懼怕,無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式,結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同,排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯,以及用戶操作行為背后的思考及心理效應,提出合理的設計,幫助用戶了解產品功能,滿足用戶需求。

          文章來源:站酷  作者:9號自習室

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


          9招,提升設計中的空間感!

          ui設計分享達人

          空間感是指藝術形象通過一定手法引起的類似現實空間的審美感受。包括作品直接表現的空間和作品具體形象之外的使人想象到的空間。這種空間感,一定程度上決定著版面的視覺效果與美感。巧妙的利用空間,可以集中觀眾的注意力,豐富的層次感使作品更具觀賞性,同時又可以讓作品主次分明,更有效的傳達信息。

          通過對設計作品的參考分析,設計師深海總結了營造空間感的方法,大致分為以下九個類別,希望這篇文章能對大家有所幫助。



          一、遮前掩后

          “遮前掩后”的意思是:通過畫面設計元素之間的遮擋,交代空間關系,從而產生一定的空間感。這種形式可能空間感較弱,但易于表達,可以使文字和圖片更好的結合。


          設計時為了保證信息的傳達,普遍會選擇將文字信息完整的展示出來。其實像上面兩個案例一樣,適當使用遮擋關系,反而能讓文字與圖像結合的更好。

          人的大腦有“慣性閱讀”的能力,這使得即使文字被遮擋,也不會影響太多識別性。


          利用蒙版,然后局部破出,這也是營造空間感常用的手法。本質上,這也屬于使用遮擋關系的一種方式,這種效果空間感更強,讓觀眾有一種打破次元壁的感覺。

          使用這種樣式時需要注意:用作蒙版的圖形或文字,必須簡潔,并且識別性足夠高,否則會影響信息的傳達。



          二、以小見大

          “以小見大”指的是:利用近大遠小、近疏遠密的基本透視原理,來營造空間感的一種方式。

          在平面設計中,面積大的元素使我們感覺更近,面積小的感覺更遠,即使是單一的設計元素,只要遵循基本的透視原理,也能塑造出空間感。


          從這兩個案例可以看出,元素的面積大小變化越大,空間的縱深感就越強;通過控制元素之間的位置關系,可以使空間看起來平整或者曲折,表現力非常豐富。



          三、山重水復

          “山重水復”是“以小見大”的進階版,同樣是利用近大遠小的物理規律,塑造空間感。不同的是,通過元素的無限重復,會讓空間感更強,對排版的把控能力也要求更高一些。


          重復的元素會讓畫面有很強的沖擊力,強烈的空間感讓觀眾仿佛在無限的跌落。使用這種版式一定要注意近疏遠密的空間關系,否則會降低畫面的可信度。



          四、橫峰側嶺

          “橫峰側嶺”是指:通過變形,改變元素的透視,在整個版面中塑造多個平面,以此來增強作品的空間感。


          將同一平面的元素對齊,創造出虛擬的邊界線,借助這些參考線來塑造不同方向的平面。如果覺得空間感不夠強烈,可以借助輔助線加強透視。使用這種形式的重點在于,要注意閱讀順序和空間平面之間的關系,不要為了畫面,一味地堆砌空間,信息的傳達永遠都是最重要的。


          最近非常流行的立體效果,因為空間感強,很容易出效果,深受設計師們喜愛。其實這種類型也是通過透視和多個平面來塑造空間感,制作時大多需要3D軟件進行輔助,才能實現如此真實的透視效果。



          五、冰厚三尺

          “冰厚三尺”指的是通過給元素添加厚度,增強元素的立體感,從而提升空間感。這是一種非常簡單粗暴的方式,立體化后的元素,可以展現更多的角度,使排版方式更加多變,畫面也更加靈動。


          最常見的2.5D風格,去除了透視感,依靠立體元素來營造空間感,可以使整個版面更加穩定和諧。有些設計師還會引入矛盾空間,讓設計作品看起來更有趣味性,吸引用戶目光。



          六、潛蹤隱跡

          “潛蹤隱跡”的意思是:通過改變透明度,模擬霧中的物體,距離越遠的元素可見度越低,從而營造出空間感。


          在中國傳統國畫中,就會通過控制水墨的濃淡,來展現畫面的空間感。因此這種方法很適合中國風的設計,讓整個作品富有神秘、幽寂的氣質。



          七、霧里看花

          “霧里看花”和“潛蹤隱跡”很相似,通過虛實的變化,模擬現實世界中的景深效果,從而塑造空間感。這種方法是最常見的,也是最出效果的,在塑造空間感的同時,還可以強調主體信息。


          在對版面元素進行模糊處理的時候,要考慮元素與焦點的位置關系:距離焦點越遠,模糊程度越高,普遍情況下,會將最主要的視覺元素作為焦點,保證信息的準確傳達。



          八、浮光掠影

          有光的地方就存在影子,投影本就是空間感的一種直接反應,“浮光掠影”就是利用光影的變化,在平面中營造視覺上的空間感。


          光影的變化非常豐富,因此,光影的表現方式也是五花八門。殊途同歸的是,所有的光影都是為空間感服務的,所以大多數情況下,都要遵循現實世界中的規律,確定一個光源,保證整個畫面的光影統一。



          九、鏡花水月

          隨著軟件功能越來越強大,重現現實世界越來越容易?!扮R花水月”指的就是:參考現實世界的折射、反射等自然現象,在平面空間塑造空間感。這種方式看起來質感很強,效果也非??犰?。


          需要注意的是:在設計之前一定要考慮好效果與內容的關系,一味的堆加效果,除了炫技毫無價值。

          文章來源:站酷  作者:設計師深海

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


          什么是數據可視化

          ui設計分享達人

          什么是數據可視化:概述


          什么是數據可視化?

          數據可視化即數據的圖形表示,旨在以更易于掌握和理解的有效方式傳達大量海量數據。從某種意義上說,數據可視化是原始數據和圖形元素之間的映射,它決定了這些元素的屬性如何變化。可視化通常是通過使用圖表,折線或點,條形圖和地圖來進行的。

          • Data Viz是描述性統計的一個分支,但它需要設計,計算機和統計技能。

          • 美學和功能齊頭并進,以直觀的方式傳達復雜的統計信息。

          • Data Viz工具和技術對于做出以數據為依據的決策至關重要。

          • 在形式和功能之間取得了很好的平衡。

          • 每個STEM領域都將從了解數據中受益。


          Jorge Rey的化石燃料Dataviz 

          它是如何工作的?

          如果我們能看到它,我們的大腦就可以內在化并對其進行反思。這就是為什么理解圖表和查看趨勢比閱讀大量的文檔要花費大量時間和精力進行合理化更容易和有效的原因。我們不想重復人類是視覺生物的陳詞濫調,但這是事實,可視化更加有效和全面。

          在某種程度上,我們可以說數據Viz是講故事的一種形式,目的是幫助我們根據數據做出決策。這些數據可能包括:

          • 追蹤銷售

          • 識別趨勢

          • 識別變化

          • 監控目標

          • 監測結果

          • 合并數據

          秘密7 –塞爾吉奧·費爾南德斯(Sergio Fernandez)提出離婚可視化的理由 

          什么時候使用?

          數據可視化對于每天處理大量數據的公司很有用。必須立即顯示您的數據和趨勢。勝過瀏覽龐大的電子表格。當趨勢立即脫穎而出時,這也可以幫助您的客戶或觀看者理解它們,而不會迷失在混亂的數字中。

          話雖如此,Data Viz適用于:

          • 年度報告

          • 簡報

          • 社交媒體微敘事

          • 信息手冊

          • 研究

          • 趨勢販運

          • SciViz

          • 燭臺圖,用于財務分析

          • 確定路線

          可以看到數據可視化的常見情況是在銷售和營銷,醫療保健,科學,金融,政治和物流中。


          娜塔莉·祖伊娃(Natalie Zuieva)的租金和薪金統計信息圖 

          為什么要使用它?

          簡短的答案:決策。數據可視化具有快速識別模式和解釋數據的不可否認的好處。更具體地說,它是確定以下情況的寶貴工具。

          • 識別變量關系之間的相關性。

          • 獲得有關受眾行為的市場見解。

          • 確定價值與風險指標。

          • 隨時間監視趨勢。

          • 通過頻率檢查速率和潛力。

          • 應對變化的能力。


          太空垃圾-BBC科學焦點,作者:Federica Fragapane

          數據可視化類型

          您可能已經猜到了,Data Viz不僅僅是簡單的餅圖和圖形,而且還具有視覺吸引力。該分支用于可視化統計信息的方法包括一系列有效類型。

          地圖

          地圖可視化是一種很好的方法,可以分析和顯示與地理位置相關的信息,并通過地圖準確地將其呈現出來。這種直觀的方法旨在按區域分布數據。由于地圖可以是2D或3D(靜態或動態),因此可以使用多種組合來創建Data Viz地圖。

          COVID-19支出數據可視化POGO,George Railean

          但是,最常見的是:

          • 區域地圖:顯示國家,城市或地區的經典地圖。對于每個區域中的不同特征,它們通常以不同的顏色表示數據。

          • 線圖:它們通常包含空間和時間,由于對特定場景進行了分析,因此通常是路線選擇的理想選擇,尤其是該地區的駕車或出租車路線。

          • 點地圖:這些地圖分發地理信息的數據。它們是企業確定區域中建筑物確切位置的理想選擇。

          • 熱圖:它們根據特定屬性指示地理區域的權重。例如,熱圖可以按區域分布感染者的飽和度。

          圖表

          圖表以圖形,圖表和表格的形式顯示數據。由于圖形確實是圖表的子類別,因此它們經常與圖形混淆。但是,兩者之間的差別很小:圖形顯示數據組之間的數學關系,并且僅是表示數據的統計圖方法之一。

          圖表數據可視化,作者:Madeline VanRemmen

          順便說一句,讓我們談談數據可視化中最基本的圖表類型。


          條狀圖

          他們使用一系列的條形圖來說明數據。它們是較輕量數據的理想選擇,并遵循不超過三個變量的趨勢,否則,條形變得混亂且難以理解。


          餅狀圖

          這些熟悉的圓形圖按部分劃分數據。切片越大,部分越大。它們非常適合描述整體的各個部分,它們的總和必須始終為100%。當您需要顯示一段時間內的數據發展或缺少任何部分的價值時,請避免使用餅圖。甜甜圈圖與餅圖具有相同的用途。


          線形圖

          他們使用一條線或多條線來顯示隨著時間的發展。它允許同時跟蹤多個變量。一個很好的例子是跟蹤品牌多年來的產品銷售情況。面積圖與折線圖具有相同的用途。


          散點圖

          這些圖表使您可以通過數據可視化查看模式。它們有兩個不同值的x軸和y軸。例如,如果您的x軸包含有關汽車價格的信息,而y軸包含有關薪水的信息,則正向或負向關系將告訴您某人的汽車所反映的薪水。


          表格

          與我們剛剛討論過的圖表不同,表格幾乎以原始格式顯示數據。當您的數據難以以視覺方式呈現,并且旨在顯示應該閱讀而不是可視化的特定數值數據時,它們是理想的選擇。

          數據可視化| Aishwarya Anand Singh的養蜂與否 


          例如,圖表非常適合顯示特定區域內一段時間內特定疾病的數據,但是當您還需要了解具體原因(例如原因,結果,復發,治療時間和治療方法)時,最好使用表格。


          數據可視化與信息圖表

          5個主要差異

          它們并沒有什么不同,因為它們在視覺上都代表數據。通常,您搜索信息圖表并找到標題為“數據可視化”的圖像,反之亦然。但是,在許多情況下,這些標題都不會引起誤解。這是為什么?

          1. 數據可視化僅由一個元素組成。它可以是地圖,圖表或表格。另一方面,信息圖表通常包含多個Data Viz元素。

          2. 與可能簡單或極其復雜且繁重的數據可視化不同,信息圖表簡單易行,并且面向更廣泛的受眾。即使對于信息圖表代表的研究領域之外的人,后者通常也是可以理解的。

          3. 有趣的是,數據Viz不提供敘述和結論,而是提供這些敘述和結論的工具和基礎。雖然信息圖表在大多數情況下提供了故事和敘述。例如,數據可視化地圖的標題可能是“按區域劃分的空氣污染飽和度”,而帶有相同數據的信息圖則顯示為“ A區和B區在C國污染最嚴重”。

          4. 數據可視化可以在Excel中進行,也可以使用其他自動生成設計的工具,除非將其設置為演示或發布。但是,信息圖表的美學非常重要,其設計必須吸引更廣泛的受眾。

          5. 在交互方面,數據可視化通常提供交互式圖表,尤其是在線形式的圖表。另一方面,信息圖表很少互動,通常是靜態圖像。

          Skype通過可視化.com進行可視化


          如何創建有效的數據可視化?

          5有用的技巧

          該過程自然類似于創建信息圖表,并且圍繞了解您的數據和受眾。更準確地說,這些是準備有效的數據可視化以使您的查看者立即了解的主要步驟和最佳實踐。

          1.做功課

          準備工作已經完成了一半。在甚至開始可視化數據之前,必須確保您了解該數據的最后細節。

          不可否認的是,了解您的數據查看對象是另一個重要部分,因為不同的人對信息的處理方式不同。您要為數據可視化的對象是誰?他們如何處理視覺數據?只需給他們一張餅圖就足夠了,否則您將需要更深入的可視化報告?

          您正在可視化什么樣的信息,它能反映出您的目標嗎?

          最后,考慮要使用多少數據并加以考慮。

          圖片來自Brodie Vissers

          2.選擇正確的圖表類型

          在上一節中,我們列出了可在數據可視化中使用的基本圖表類型。要確定最適合您工作的人,需要考慮的因素很少。

          • 圖表中將有多少個變量?

          • 您將為每個變量放置幾項?

          • 值之間的關系是什么(時間段,比較,分布等)

          話雖如此,如果您需要展示整個項目的各個部分,那么餅圖將是理想的選擇。例如,您可以使用它來展示特定產品的市場份額的百分比。但是,餅圖不適用于時間范圍內的分布,比較和跟蹤趨勢。在這些情況下,條形圖,散點圖,s和折線圖更為有效。

          另一個示例是如何在圖表中使用時間。使用水平軸會更準確,因為時間應該從左到右。它在視覺上更直觀。

          Oberhaeuser的MagnaGlobal廣告市場海報 

          3.對數據進行排序

          首先刪除所有不會增加價值并且基本上是圖表多余的數據。有時,您必須處理大量數據,這不可避免地會使您的圖表變得非常復雜且難以閱讀。不要猶豫,將您的信息分成兩個或多個圖表。如果這對您不起作用,則可以使用突出顯示或使用更合適的內容更改整個圖表類型。

          提示:使用條形圖和柱形圖進行比較時,請按值(而不是字母順序)以升序或降序對信息進行排序。

          圖片由薩曼莎·赫爾利(Samantha Hurley) 


          4.利用顏色發揮自己的優勢

          在每種可視化形式中,顏色都是您最好的朋友和最強大的工具。它們產生對比,重音,強調并直觀地引導眼睛。即使在這里,色彩理論也很重要。

          設計圖表時,請確保不要使用超過5或6種顏色。除此之外,任何其他操作都將使您的圖表不堪重負,并且難以為觀眾閱讀。但是,您可以使用顏色強度來發揮自己的優勢。例如,當您在不同的時間段內比較同一概念時,可以將數據從所選顏色的最淺陰影到其較深的顏色進行排序。它會創建適合您時間線的強烈視覺效果。

          選擇顏色時要考慮的事項:

          • 不同類別的顏色不同。

          • 系列中所有圖表的采用一致調色板,方便以后將進行比較。

          • 最好使用對色盲友好的調色板。

          Jamie Kettle可視化塑料廢物污染數據 

          5.獲取靈感

          當您想成為數據可視化設計中的佼佼者時,請多多發揮自己的靈感。查看優秀的示例、信息圖、其他人的工作,并了解哪種方法最適合您需要實現的每種數據。

          下圖這個Twitter帳戶數據可視化是一個很好的例子。同時,我們還將精選一些令人稱贊的示例,這些示例將使您有信心開始為數據創建視覺效果。

          lilit Hayrapetyan創作的大數據紀錄片的人臉 

          8個數據可視化示例

          作為另一種藝術形式,Data Viz為一些令人驚嘆的精心設計的圖表提供了沃土,這些圖表證明了數據也可以是美麗的。現在,讓我們來看看一些例子。

          1.黑暗之魂III體驗數據

          我們從孟小偉的個人項目開始,介紹他玩《黑暗之魂3》的經驗。這是信息圖表和數據可視化也是個人設計工具的完美例子。這項研究非常龐大,但非常專業地歸類為針對不同概念的不同類型的圖表。所有數據可視化都使用相同的調色板進行制作,并且在信息圖表中看起來很棒。

          我的黑暗之魂3孟小偉在播放數據 

          2.有史以來最偉大的電影

          凱蒂·西爾弗(Katie Silver)根據評論家和觀眾的評論匯總了有史以來最偉大的100部電影。可視化顯示了每部電影的關鍵數據點,例如發行年份、奧斯卡提名和獲勝、預算、利潤、IMDB得分、類型、拍攝地點、電影背景和制作工作室。所有電影均按發行日期排序。

          凱蒂·西爾弗(Katie Silver)的100部最佳電影數據可視化 

          3.最暴力的城市

          費德里卡·弗拉加帕內(Federica Fragapane)顯示了2017年全球50個最暴力城市的數據。這些項目根據人口在垂直軸上排列,并根據兇殺率在水平軸上排序。

          4.家族企業作為數據

          這些數據可視化和插圖由Valerio Pellegrini為《透視》雜志制作。它們顯示了一個餅圖,其中包含行業細分以及對就業貢獻的散點圖。


          視角雜志–家族企業by Valerio Pellegrini 

          5.太陽系的軌道圖

          該地圖顯示了太陽系中18000多個小行星的軌道數據。每個小行星都顯示在1999年除夕的位置,并按小行星的類型進行了著色。

          埃莉諾·盧茲(Eleanor Lutz)的太陽系軌道圖 

          6.標題的語義

          KatjaFlükiger對頭條新聞的故事情有獨鐘。數據可視化旨在傳達銷售對算術的影響程度。該項目在馬里蘭大學藝術學院完成,目的是可視化對移民的引用,并對用詞選擇和上下文所暗含的價值判斷進行顏色編碼。

          標題語義學KatjaFlükiger 

          7.月球和地震

          該數據可視化用于回答月球是否引起地震。該圖顯示了根據月球的相位和軌道位置而發生的地震的時間和強度。

          月亮與地震艾西瓦婭·阿南德·辛格(Aishwarya Anand Singh) 

          8. Nanosats的黎明

          可視化效果顯示了從2003年到2015年發射的衛星。該圖表示了專注于項目的機構類型以及為其提供資金的國家。左側顯示了每年的發射次數和衛星應用次數。

          有線英國–由Nanosats拍攝的黎明(Valerio Pellegrini) 

          最后的話

          數據可視化不僅是一種科學形式,而且還是一種藝術形式。其目的是幫助任何領域的企業快速理解復雜數據,并開始根據該數據做出決策。為了使您的圖表高效且易于閱讀,這一切都與了解您的數據和受眾有關。這樣,您就可以選擇正確的圖表類型,并使用可視化技術來發揮自己的優勢。


          文章來源:站酷  作者:ZZiUP

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


          情緒版設計-助你打開設計創意

          ui設計分享達人

          1.情緒版的概念

          首先我們要明確什么是情緒版?我的理解是:情緒版既不是初稿也不是最終的風格方向,而是設計師在了解了相關的產品背景后,基于自己對于產品的理解給出的一個較為初始的設計建議,并且希望可以通過這個初始的建議與產品側達成一些相關的設計共識。

           

          2.情緒版的大概流程

          情緒版的設計流程大概分為前中后三個階段,前期:分析-收集,中期:篩選-組合,后期:打磨-呈現。

           

          前期:分析-收集

          主要是分析產品相關背景或需求本身的方向,結合產品背景及需求本身再進一步分析大概的設計方向并收集相關素材內容。

           

          中期:篩選-組合

          當我們收集完成后需要對現有素材進行二次篩選并組合,基于現有素材組合大概的設計方案結構。

           

          后期:打磨-呈現

          基礎方案組合完成后需要進行二次打磨,細化方案的內容表現,檢查整體的一致性及完整度,最后呈現給產品方。

           

          3.為什么要做情緒版

          可能很多設計師會疑惑為什么要做情緒版,直接設計初稿不就好了嗎?如果有這個疑問,可能還沒實際了解到情緒版到作用。但我們可以試著從我們在設計過程中遇到的痛點來了解情緒版的作用或者意義。

          在設計的過程中你是否會存在下面幾個問題:

          前期思考不夠——設計產出方案少;

          設計不懼探索性——設計來源沒有考究;

          初稿多次修改沒能達成共識——設計表達不出對方想要的;

          設計中期出現不一致——設計沒有貫徹始終。

           

          4.情緒版的作用

          從這幾個問題中,我們可以得到一個比較統一的結論就是:前期設計呈現內容不夠,導致溝通不足而產生方向不統一。因此基于這個關鍵點,我們再來看情緒版的作用

           

          (1)輔助構建世界觀

          在前期,世界觀、背景方面的內容大多是以文字的方式呈現,因此設計師可以通過情緒版的方式,來輸出對應的世界觀設計表現,這樣可以更加直觀的表現出對應的視覺語言。

           

          (2)具象設計想法

          在初期與產品側溝通時,單純靠語言表達的方式很難讓對方達到一種腦補的狀態。因此借助情緒版的方式更加直觀的呈現設計想法,通過具象的圖形或者圖形,大大降低雙方的溝通成本。

           

          (3)明確設計方向

          基于第二點的溝通,我們可以明確的了解到產品側的一些喜好。為后續設計初稿時起到一個清晰的方向作用。

           

          (4)提高前期設計的效率

          從零到一設計一套完整的方案往往需要耗費較長的時間,借助情緒版設計的方式來快速響應一些想法及創意,這樣可以大大提高前期的輸出效率。

           

          5.情緒版的基本原則

          從多次的嘗試中,我總結梳理了幾個基本原則,了解這些原則可以讓我們在做的時候更加嚴謹,輸出更加準確的設計方案。

           

          (1)多方向性

          情緒版的設計與我們日常設計一樣,需要給出不同的方向建議,單一的方案往往難以抉擇。多方案輸出除了提升抉擇空間之外,還可以增加方案碰撞的情況,往往可能是方案A的某部分內容疊加方案B的某部分內容才能產生最初的方向。

           

          (2)嘗試性

          此階段的所有輸出皆屬于嘗試與探索,因此不必過于考究設計細節,重點在于表達出需要相關的設計概念及思考想法,把更多的時間留作設計思考及方案嘗試。

           

          (3)效率性

          情緒版的輸出重點在于前期溝通而達到一個比較好的共識,因此在保證質量的情況下,避免花費過多的時間而影響輸出的效率性。盡量做到快與準。在過往中項目組,基本上是以半天(4個小時左右)為一個單位來完成一套方案。

           

          (4)試探性

          情緒版是一種非常有效試探產品側想要往那種方向去推動的方式,因為我們在實際的設計過程中,產品側可能也對整體的設計大調并不少特別有明確的腦補,因此設計師可以借助情緒版的設計來挖掘產品側想要往哪個方向進行發力。

           

          6.情緒版設計的方法

          這里總結情緒版的設計方法大概有這幾種:1.借助圖像/插圖、2.結合實際場景引申、3.借鑒摘取同類型設計、4.繪制草稿。

           

          (1)借鑒圖像/插圖

          在我們設計一些專題活動或者繪制插圖相關的一些設計時,可以考慮使用這種方法來輸出你的情緒版設計,可以通過借鑒一些設計網站或插圖網站上的現有素材來拼接,并表達自己在這方法的一些設計意圖及想法。

           

          (2)結合實際場景引申

          從更概念化的角度出發,通過引用一些實際場景、物品、圖像,來拓展相關的圖形、質感、色彩方面的設計,并且輸出相關的設計雛形。例如我們在設計LOGO或者圖形類的一些設計,使用這種方法就可以幫助我們突破一些現有的認知壁壘。

           

          (3)借鑒摘取同類型設計

          在設計之初,我們通常會有一個大概的思考雛形,但如果直接開始設計往往效率上并不高。因此可以借助一些設計網站上的設計,通過摘取組合的方式呈現自己的初步想法。我通常會在UI新版或者改版的時候使用這種方式,但只能表達大概的想法且不能代表最終的初稿設計。

           

          (4)繪制草稿

          當我們想要表達一些溝通或者框架的設計時,我們可以使用草稿繪制的方式來表現,這個方式簡單快捷,可以很有效率的對齊大部分的設計共識。

           

          7.情緒版設計的注意事項

          基于原則及方法,我們可以來簡單了解下情緒版設計中需要注意的一些事項,通過這些內容讓你在實際操作過程中少踩一些坑。

           

          (1)控制方案的數量

          設計方案控制在2-3個左右即可,前期大多是屬于試探性方案呈現及找方向,太多則容易導致選擇困難。

           

          (2)避免篇幅過長

          篇幅過長往往容易降低別人閱讀的耐心,對于情緒版的輸出也是如此。結合過往的經驗,建議以16:9的畫面為一頁來呈現一個方案。

           

          (3)區分重點次要

          在一頁內呈現的方案避免過于平均,可以適當突出某些想要重點表達的內容,例如在這個方案中想要重點突出圖標、顏色等,那么這里需要突出這部分在畫面中的比例,適當縮小其他模塊的尺寸。

           

          (4)結合世界觀

          在輸出情緒版設計方案時還可以適當考慮結合產品的世界觀,通過一些具象化的圖形或者插圖來表現相關的內容。例如我們之前在游戲中心改版的嘗試中,就發散了幾個相關的世界觀,因此我們在輸出方案時,則只需要把對應的世界觀作為方案,通過情緒版的方式表現出來即可。

           

          (5)保持整體風格一致性

          一致性是表現一個設計師是否具有系統化、全局觀的思考思維,因此我們在表現情緒版時也需要關注這方面的內容,避免整體的調性不匹配。

           

          (6)完整性表達

          在呈現方案時,盡量多維度的進行對比,呈現一個完整性、系統性的設計。例如我們在設計UI相關的內容,從圖標、顏色、字體等等一系列的內容需要細致的闡述清楚,讓人更加能夠了解你的意圖。

           

          8.UI情緒版模版分享

          由于我日常以設計UI為主,因此可以給大家重點分享我在UI情緒版設計的經驗。希望可以幫助到大家快速上手。

          當你在做UI設計情緒版時,需要明確了解UI設計中的結構,更系統性的去思考整體的內容。我們在UI設計中往往需要包含以下這些內容:圖形系統(圖標+輔助圖形)、顏色系統、字體字形系統、質感形態、界面形態、插圖風格、動效系統、影像系統,等等這些部分的內容。

           

          UI情緒版模版

           

          過往實際案例分享

          案例一:整體風格比較偏個性一些,頁面嘗試用深色的背景設計

          優點:整體風格比較酷,配色比較未來感符合年輕的人的審美,深色的背景讓內容更加聚焦。

          缺點:深色的設計接受度是否可以,是否適合平臺類APP設計

           

          案例二:整體風格3D化的設計,包括頁面的一些體驗上都可以增加視察的效果來設計

          優點:整體設計風格比較新穎,符合現在的設計趨勢,整體感覺也比較年輕多彩

          缺點:3D的制作成本相對較大。

           

          案例三:整體風格比較清爽,白色融入漸變的設計也會顯得比較年輕

          優點:整體頁面清爽,可以滿足任何內容的透出,漸變色的圖標和按鈕的設計補充了細節

          缺點:整體氛圍感、娛樂感較弱。

           

          9.最后總結

          很多時候我們會覺得情緒版設計可有可無,或者因為時間的關系不允許我們經過這一步。但,如我一開始提到的點,情緒版可以在前期幫助我們去打通很多思考的壁壘,輔助設計師在前期直觀的與產品側進行方向上的探討,從而找到大方向上的共識。


          文章來源:學UI網   作者:妙妙

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


          B2B用戶畫像的創建與使用

          ui設計分享達人

          01 什么是用戶畫像(what)

          02 B2B用戶畫像的特色(what)

          03 為什么要構建B2B用戶畫像(why)

          04 如何構建B2B用戶畫像(how)

          05 B2B用戶畫像的傳播與使用(how)

          本文嘗試通過what-why-how的結構,結合自己的工作做一些實踐,和大家分享下B2B用戶畫像的整體概念框架以及構建方法。出于對我司數據的保密,無法直接分享給大家細粒度且對應的數據,所以分享過程中我會結合業界和其他前輩在網上分享的內容和數據作為案例,如有不足和錯誤之處,還望大家批評指正。

           

          那在講B2B用戶畫像之前,我想先來說說用戶畫像的概念,在看一些文章時發現有些作者混淆了用戶畫像的兩種概念??赡芎芏嗳藳]有注意到,用戶畫像這個詞包含了2種不同的含義,一種是User Persona,一種Use Profile。

           

          1.1 User Persona

          User Persona是對一個用戶群體的整體抽象。這一概念最早源于交互設計領域,是Alan Cooper在《About Face:交互設計精髓》一書中提到的研究用戶的系統化方法。“贏在用戶”這本書將其翻譯為“人物角色”,目前業內使用“用戶畫像”這個術語。表達的意思一樣,是真實用戶的虛擬代表,是在深刻理解真實數據的基礎上得出的一個的虛擬用戶。

          • 研究方法:定量+定性研究,更注重的是定性的研究;
          • 畫像用途產品&交互&設計使用,是他們了解用戶目標和需求、與開發團隊及相關人交流、避免設計陷阱的重要工具;
          • 研究方向:更深和細,會更為深入的去挖掘底層用戶的動機、原因、動機、欲望、痛點等屬性,Persona幫助我們了解why產品的用戶為什么會有這個行為。

           

          1.2 User Profile

          User Profile是對每一個個體的畫像,是在產品用戶量有一定規模以后進行的。利用用戶的行為數據或者填報的資料進行的用戶屬性標簽提取,更多被運營和數據分析師使用,它是各類描述用戶數據的變量集合。在大數據時代,企業通過對海量數據信息進行清洗、聚類、分析,將數據抽象成標簽,再利用這些標簽將用戶形象具體化的過程。

          • 研究方法:偏向于定量研究與數據分析;
          • 畫像用途:主要運營&市場使用,個性化推薦、廣告系統、活動營銷、內容推薦、興趣偏好都是基于用戶畫像的應用,比如說我們通??吹胶芏嗑W站,千人千面,其實也是User Profile 精細化運營的結果;
          • 研究方向:更廣和全,更多的是研究人的基礎屬性、社會屬性和行為習慣,更關注的相關性的數據分析和挖掘。幫助我們了解what產品為誰而設計。

          兩類畫像的對比如下圖:

          明確了兩種畫像的區別,那本文我們就重點談談User Persona類型的B2B用戶畫像(后續文中簡稱“用戶畫像”)。至于User Profile,比較適合用戶體量大的產品,而B端產品除了頭部企業,很難達到這個量級,無疑用User Persona更合適,本文就不再贅述。

           

          不管是B2B還是B2C產品也好,不論是商業層面上(比如在資源有限情況下聚焦關鍵用戶類型)、或是在產品層面上(更好理解用戶想要什么,確定功能的范圍和優先級),建立用戶畫像的本質都是為了輔助一些決策。

          不同之處在于C端面向的是大量且分散的個人用戶,用戶畫像的主要目的是把用戶聚類,更好的了解不同類型用戶的特點和偏好。而B端產品,面向的是企業級用戶,滿足的是企業的管理或經營需求,關注的是成本和效率。畫像的目的是針對業務不同環節中、具有類似任務的用戶進行更立體、豐富的需求整理和挖掘,往往和角色相關。

          其決定了B2B用戶畫像的幾個特點:

           

          2.1 受企業生命周期的影響

          伊查克·愛迪思(IchakAdizes)提出了企業生命周期理論,企業的發展大致有初創期、成長期、成熟期和衰退期四個階段。不同階段的企業,其組織形態、關注點、管理方式等都會有所不同,產品需求側重點不同,用戶畫像的方向和調研方式也會有不同。

          初創期:產品立項階段

          這個階段往往指的是公司剛成立,此時產品、企業文化尚未成形,處于客戶積累階段,較為關注引流。需要通過用戶畫像定位細分市場、產品模式及功能,這個階段需做定性調研了解目標用戶,初步形成用戶畫像為需求做底層支撐,這個階段的用戶畫像顆粒度可以粗些,旨在幫助團隊快速就“我們的用戶是誰”達成共識。

           

          成長期:產品運營中(已有數據積累)

          這個時候產品已有demo或已上線迭代,產品處于完善、升級的階段??墒褂谩?strong>數據挖掘+定量篩選+定性豐富”的方式,結合項目的已有數據,使用定量篩選用戶,做大量微觀且具體的用戶調研,基于后臺、第三方平臺監控發現問題,定位問題關鍵及原因分析,優化產品功能及運營模式,再通過調研訪談了解具體的行為細節和態度。該階段的用戶畫像可用來驗證問題、完善或發現新的機會點

           

          成熟期:產品相對穩定

          客戶資源相對穩定,可能已有一定的規模,內部管理需求增長,市場地位趨于穩定,日常工作也大多以維護為主。且現有增長點已遇上了瓶頸,用戶活躍將不可阻逆地緩慢下降,即使你做再多產品優化、燒錢運營都無法改變產品終將走向衰退的命運,時間問題。企業急于尋找突破口和新的增長點,用戶畫像又將被賦予新的使命:基于用戶畫像進行“新增長點”的分析,定性挖掘藍海,再定量進行驗證

           

          衰退期:產品活躍度快速下降

          進入到這個階段,說明產品沒有成功轉型。這時候再做用戶畫像的意義其實不大,如果一定要做,除了提高回流率、挖掘增長點外,可以定性了解原因,調整產品。

           

          2.2 產品使用角色多樣性

          不同于C端產品的的用戶單一性,B端產品的用戶畫像對應的不是一個個體,而是一個組織或機構,同時涵蓋組織機構中不同的人員。產品面向的使用對象可能從普通員工到企業高層,覆蓋銷售、技術、行政人事部分等,基于工作場景不一樣,對產品的需求可能也大相徑庭。

          以一個CRM系統為例,一個復雜的B端產品可能會涉及以下四種角色的用戶:決策者、主要使用者、次要使用者、間接使用者。如下圖所示:

          決策者:下決策購買產品或服務的人,可能是業務線負責人,也可能是公司董事長、CEO,他們常常不是產品的使用者,使用頻次低甚至完全不用,他們通常都是從公司的整體利益出發,更關注產品能否給公司業務帶來幫助,降本還是提效了。其評價某個功能的好壞,往往與使用者的感受是相悖的,如釘釘的“DING一下”,他們并不太關注使用過程、體驗,更關注產品的核心價值,將利益最大化。

          滿足決策者的需要是做好B端產品的前提,也是制作用戶畫像所要明確的方向;很多體驗做的不好、難看的產品之所以也能在B端市場有一席之地,就是因為滿足了企業的需要。比較理想的情況下,團隊對目標客群有一定深入的研究,形成趨于標準化的產品,就能打動目標客戶群的大部分決策者。

          主要使用者:真正頻繁使用產品的人,也是產品/設計師想要提升產品體驗要瞄準的人群

          他們可能更關注產品的具體使用,是不是易用,有沒有幫助他們更便捷地完成工作,有沒有提高他們的工作效率。主要使用者是最容易識別的,以CRM系統為例,如果沒有銷售日常在系統中錄入客戶數據,管理層就無法查看成單量、進度等他們所關注的信息。

          次要使用者:使用產品頻率相對主要使用者更低,用到的功能也比較少,只在某個中間流程涉及少量操作。如CRM系統中人事、財務會涉及到其中錢或出差的審批對他們而言,主要需求是能快速找到自己的任務并完成就可以了。

          間接使用者:不直接使用產品但會被產品影響的人群,產品和設計師在設計過程如果有資源和精力能兼顧他們的需求和體驗,那就太貼心了。如審計、政府人員,屬于不緊急,非必要需求。

           

          2.3 崗位職責決定了用戶目標和使用場景

          B端用戶使用場景多和業務形態密切相關,產品通常要解決的是某類角色工作時發生的問題,所以不同于C端用戶畫像,從用戶視角出發,關注用戶個人的場景、訴求、痛點和情緒,核心是滿足用戶的需求,關注用戶的年齡、性別、收入、個性、習慣、消費模式等標簽。

          但是在B端產品中,我們拋開了用戶作為個人存在的標簽,我們更關注用戶所代表的角色,他的崗位職責是什么,它在工作場景中需要完成哪些任務,這些任務要做什么的,其崗位職責決定了它完成任務的目標、場景、使用什么工具去,需要跟其他角色配合嗎等信息。

          所以B2B畫像更關注角色的分類、工作/使用場景、用戶目標、操作鏈路、角色協同等信息,很難看到類似這個人是不是已婚,小孩多大這些不知道如何應用于產品設計的內容。而在一個C端產品用戶畫像上很少看到有哪些讓他壓力山大的KPI等信息。

          仍然以CRM系統為例,其主要使用者-銷售的目標就是用該系統錄入商機、線索等,然后根據數據情況制定客戶溝通回訪計劃等,聚焦的是該系統能否讓他很好的履行了其崗位責任。和他這個人在哪個城市、已婚未婚等個人特性是無關的。

           

          2.4 由客戶畫像和角色畫像構成

          B2B產品面向的是企業用戶,滿足的是產業鏈中各企業的經營需求,這時B2B畫像應該具備行業、客戶屬性這一維度;但是最終購買者、使用者都是企業中的某一角色,這決定了B2B畫像還有角色這一維度。所以,小編認為,B2B用戶畫像是企業和多個核心角色共同構成的畫像,建立B2B畫像,需要客戶(企業)畫像和角色畫像兩部分的信息。

           

          1)客戶畫像

          客戶畫像指的是使用B端產品或服務的企業用戶,具有行業特征、企業特征及角色特征。其的目標是促成銷售,主要用來幫助銷售/運營人員他們快速定位目標企業,幫助他們更好的認識我們客戶是什么樣的人,讓他們的工作更有方向。

          一個典型的客戶色畫像會包括:

          基本信息:外在的標簽,如所處行業、地域、人員規模、收入規模(年營業額)

          業務模式:線下的實際業務流程-視行業而定,如商業模式(靠什么賺錢)、業務模式(業務怎么運作)

          組織機構:自上而下都有哪些機構,彼此之間的關系。

          關鍵角色:各個機構里有哪些崗位/工種,決策鏈上有哪些角色、誰才是有價值的關鍵角色,角色話語權。企業的關鍵決策人隨企業大小而不同,一般中小型企業都是老板、合伙人等。而大型企業采購B端軟件都是需要經過內部流程的,最終審核人是老板,但其中影響決策最大的往往是商務經理負責人。

           

          2)角色畫像

          B端產品雖然面向企業,但是最終使用執行的還是人,這些執行層(終端使用者)也是產品的檢驗者。在企業決定購買產品之前,執行層沒有話語權,但是在續費的時候,他們的話語權比重會開始顯著提升

          因此在我們的產品設計階段,會更關注執行層的角色畫像。當我們討論產品、需求、場景、用戶體驗的時候,往往需要將焦點聚集在這類人群上。

          一個典型的角色畫像會包括:

          基本信息:如角色名稱、照片、角色/工種、平臺偏好、文化水平、辦公場地、使用頻次,角色名稱以及照片是為了更有代入感的個人情況說明,但值得注意的是,這里的情況更多圍繞職業情況展開,比如工作年限,工作職責,能力維度等,那些在C端中常見的家庭情況,幾個孩子什么的統統不重要。

          用戶行為驅動:用戶的工作目標、工作任務和考核指標,B端角色通常是企業員工,為了薪酬,有一般都會有結合任務而完成的考核指標,了解考核指標可以在設計過程中更明確知道哪些內容是用戶最關注的東西;

          使用場景:工作的時間、地點及工作內容是什么,使用場景是重要但容易被忽略的一個內容,尤其要搞清楚使用產品的場景有哪些、用戶平時的工作流程是如何的、主要使用什么功能。可用一個真實、普遍、易懂的故事勾勒一下

          使用期望:日常工作面臨的挑戰和痛點,期望獲得的幫助。

          角色畫像和客戶畫像之間沒有直接關系。因為目標不同,所以會有不同的用戶細分:客戶畫像的目標是成銷售,獲取利益;角色畫像是為了解決問題和為用戶創造價值,進一步為公司創造價值。但是在刻畫B2B用戶畫像時,如果只考慮執行者的話,沒有客戶畫像作為指引、摸清決策者的特征與行為,你的產品功能或者體驗設計上可能就會出現嚴重偏差,甚至方向錯誤。

          3.1 客戶畫像的價值

          產品和服務只是企業將價值傳遞給客戶的一種工具和媒介,無論產品形態如何,其本質都是在解決客戶的問題。如果沒法滿足客戶的業務需求,基本上該產品對客戶是沒有價值的。客戶畫像作用貫穿產品生命全周期,產品/市場/銷售較為關注,它的價值主要體現有三點:

          對產品:明確為誰服務,快速的了解客戶的需求和狀況,確定產品功能設計,學會識別用戶的解決方案和用戶在場景下的訴求,不斷迭代調整產品;

          對市場/運營人員:建立對客戶盡量全面的了解并基于客戶畫像確定營銷內容、營銷策略和渠道選擇,使產品的服務對象更聚焦;

          對銷售人員:幫助銷售進行客戶篩選,找到有效客戶,提高轉化率,確定業務方向和銷售打法。合理配置團隊,完成KPI。

          客戶畫像越早建立越好,但是務必注意控制深度和成本,因為不同階段的企業其側重點有所不同。在初創期,產品團隊可以通過關注典型客戶來積累定性數據,從而低成本搭建客戶畫像;而到了成長期和成熟期,在擁有大量客戶數據的前提下,企業可以逐漸過渡到使用定性&定量相結合的方式來形成更為清晰的客戶畫像。

           

          3.2 角色畫像的價值

          以前業界有種說法,做B端,能用是第一位,用戶體驗不重要。所以除了一些成規模的SaaS公司,設計師在B端幾乎無用武之地,成了組件化的搬運工、工具人。所以大部分的企業在跑馬圈地時期是不注重用戶體驗的,企業有客戶畫像,卻未必有角色畫像。

          還說用戶體驗不重要的人,可以看看有贊CEO白鴉的公開說明。

          圖片來源于網絡

          2020年,疫情為企業級SaaS帶來流量,在今年2月宣布延期復工后,釘釘搜索量激增數倍,無論中大型企業還是小微企業都紛紛加入了遠程辦公的行列,協同辦公SaaS獲得了大量的“試用客戶”,加快了市場激活的進程,但接下來,流量轉化和用戶留存成為后疫情時代的核心關注點。

          后疫情時代,對企業來說,改善產品用戶體驗,了解使用產品的終端用戶,構建角色畫像愈加重要。而角色畫像作為產品和設計師比較關注的畫像,有以下三點價值

          設計前:幫助確立設計目標、設計策略與準則

          設計中:解決架構混亂問題,明確需求功能的合理性和優先級;解決需求爭議問題和溝通問題,與團隊成員就服務目標達成共識,

          設計后:解決可用性測試問題,幫助我們鎖定合適的測試用戶;

          總結一下就是角色畫像是產品的根基,客戶畫像是產品的外延生命力的象征,兩者相輔相成。

           

          對于這個章節。我將以我所負責的一款企業產品為例,來講述用戶畫像的創建過程。在這個項目中我們通過定性研究創建了用戶畫像,當然如果必要,大家也可以在后期再通過定量研究對得到的用戶畫像進行驗證。

          用戶畫像的創建可分為以下幾個步驟:

           

          Step 1:研究準備與數據收集

          B端用研和C端有一點不同,企業用戶的使用場景基于業務,背景復雜、角色多樣、使用工具特殊(如企業自有后臺系統)等,導致無法在可用性實驗室中切實地模擬出來,所以我們得接近用戶、基于業務場景去了解用戶。

          小編大致總結了一下,B端用研有以下3大痛點:

          信息獲取難:B端產品主要針對用戶工作和業務開展,一般都是強制使用產品不存在“挑剔”的選擇空間,導致用戶的反饋就非常少,信息的獲取壁壘較高?!吧疃仍L談”是最核心也是獲取信息性價比最高的一種方法,但是出于對信息用途的不了解,對商業隱私、生意經驗泄露的擔憂,B端用戶可能不愿意配合調研或不信任你。

          業務復雜:缺乏行業經驗,難以理解業務,這會讓用研對象覺得你不專業,仿佛雞同鴨講、對牛談琴。而且在不理解業務的情況下,設計師在訪談過程中會過于關注基礎業務,無法進行更深層次的訪談,采集的信息并非用戶的真正需求。

          視角不同:設計師視角容易缺乏框架性思考,搞不清每個業務模塊/功能的邊界以及它們之間的關系,不能站在用戶(決策者、使用者)的角度思考問題,以至于被用戶牽著鼻子走,用戶說什么就是什么,能和用戶產生共鳴的部分極少。

          俗話說“磨刀不誤砍柴工”,針對以上三大痛點,項目伊始有必要進行一輪全面的桌面研究,幫助我們快速建立對行業的全局認知并了解業務,另一方面,也有助于我們更好地和用戶進行溝通。

           

          研究內容:

          • 1.產品的定位、盈利點及目標客戶
          • 2.當前的業務目標是什么,主要解決什么問題
          • 3.整體業務框架,核心業務流程和使用場景
          • 4.不同角色之間如何協同以及每種角色的價值和目標
          • 5.專業術語的理解
          • 6.達成業務目標的關鍵資源和能力

           

          研究途徑:

          • 1.公司官網、競品網站、查閱行業內相關報告、參加行業會議等,形成對行業的整體認知,如艾瑞網、易觀、CBDNData等專業網站。(部分報告需開通會員才能查閱)
          • 2.通過搜索引擎查詢關鍵詞查詢相關文章。
          • 3.最快捷的方式是向產品經理/業務方要相關文檔或直接向他們請教。
          • 4.銷售??/客服/實施顧問等,一般上線的產品都會有客戶反饋群或來收集整理客戶實時反饋的需求信息,可以通過他們大概了解到目前產品有哪些問題
          • 5.如果有這方面的專家用戶,可以虛心向這些專家用戶請教,他們對業務的理解更加深入。

           

          Step 2:確定目標與畫像維度

          此處有2個注意點:

          • 1.如何篩選出目標用戶?
          • 2.畫像維度有哪些?

          針對以上2三點,下文將依次展開說明。

           

          1、如何篩選出目標用戶?

          Cooper指出,不能為超過3個以上的用戶畫像設計產品,這樣容易產生需求沖。當有多個用戶畫像的時候,需要考慮用戶畫像的優先級。前面講B2B畫像特點的提到過,由于是企業產品,僅僅產品中一條業務線,角色也是多樣的,所以在篩選目標用戶時有一點尤其要注意:應識別出關鍵的用戶畫像

          以我公司的招聘業務為例,為了便于大家在宏觀上確定什么樣的企業是我們主要的目標用戶,我們的做法是按企業類型定義了三個KA客戶畫像。由產品、市場、以及各組leader一起來完成用戶畫像的優先級排序工作。確定用戶畫像優先級時,我們可以主要從以下幾個方面來考慮:

          • 使用頻率
          • 市場大小
          • 收益的潛力
          • 競爭優勢/策略等

          然后再找關鍵的角色畫像,即角色畫像中的決策者和主要使用者,次要使用者和間接使用者因時間、金錢的關系,現階段不做考慮。我司產品的客戶主要是勞動密集型企業,作用是幫助客戶解決藍領用工問題和發薪合規問題。以招聘業務線為例,想把這個產品賣給某企業,首先要打動該企業的HR總監,再說服CEO/董事長,再讓招聘部員工-HR試用

          那么這條決策鏈上的關鍵人就包括了HR總監、CEO/董事長、HR。那在這個案例中,HR總監是決策鏈的關鍵人物,因為只有他認可之后,才會申請購買或在CEO面前夸這個產品。而HR是最終產品的使用者,雖然他們在企業購買產品前沒有話語權,但是在續費階段,他們的話語權最大。對于處于成長期的產品來說,我們現階段的調研目標也是為了獲取HR總監和HR兩類角色的用戶畫像,每個角色訪談4~6人;

           

          2、畫像維度有哪些?

          篩選出了目標用戶,那畫像維度有哪些呢?。以本案例為例,在本次用戶畫像的設計中,因我司產品處于優化迭代階段,做用戶畫像的目的是了解用戶的使用情況,比如各功能的使用頻率、使用中遇到的問題,定位問題關鍵及原因分析,優化產品功能及運營模式,同時也希望通過了解用戶的具體行為細節和態度,發現新的機會點。

          對于企業,主要了解其企業規模、行業屬性、業務流程、組織架構、機構里有哪些崗位/工種。這個信息主要由產品或銷售采集,應該前置于角色畫像。而我們第一步的業務研究中,很大一部分內容也來自于此。

          對于決策者,主要向其了解企業管理、業務等方面的需求信息,對于本產品決策者關注的是營收增長、效率提高還是減少成本等方面的問題。

          對于主要使用者,側重了解用戶特征、產品認知、使用場景與痛點,各功能的使用頻率、使用中遇到的問題等

          根據前面前文提到的的用戶畫像構成要素和自身業務情況,有選擇性的摘取,最終梳理出本案的用戶畫像維度如下:

           

          Step 3:確定調研方法

          明確了調研對象后,就可以展開調研了。一般有三種方式:

          • 定性研究,基于小樣本的研究,如用戶訪談、實地調研、輪崗-理解現象原因;
          • 定量研究,收集更大規模樣本的調查數據,如問卷調研、數據分析-發現現象;
          • 定量+定性研究,兩者的結合。

          定量和定性調研究雖各有優劣,但定量較為昂貴、費時,也需要有精通統計分析的認為協助,在B端調研方式中并不太實用。對大多數團隊而言,定性是性價比最高、最合適的。它不僅提供了“用戶是誰、他們想要什么”,還是基于數據、經濟高效較為快捷的一種方式。

          采用何種研究方法,主要根據企業生命周期、研究目的、項目時間和經費等進行綜合考量,本案中我們選擇深度訪談收集一手資料。

           

          Step 4:采集角色資料

          在明確目標與方法后,需要對整個研究進行細化,制定具體詳實的執行計劃并開始招募用戶采集資料了。可通過前中后三個階段性策略的來進行訪談。

           

          1. 訪談前:搭建信任基礎

          在構建用戶畫像的step 1中,我們已經對業務和要訪談的用戶角色有了一定的了解。只需在訪談時間的4-7天前,根據確定的畫像維度來設計訪談大綱。設計大綱的目的是避免訪談過程中對話內容發散、混亂而無法收集到足夠多的有效信息。

          需要注意的是:大綱需要針對訪談的每一條需求,做到詳細、縝密,同時要考慮用戶對訪談題目的理解,可根據產品使用順序,由易到難、客觀到主觀、概括到具體的順序展開,比如產品功能的使用頻率就可以作為一個客觀問題放在問題的開始。且要考慮訪談的時間,因為訪談的時間不易過長,所以訪談提綱也不能過于冗長,典型的訪談大綱模板如下圖所示:

          并提前將訪談目的告知受訪者,能讓他們看到訪談的直接或間接價值(提高工作效率、降低成本等),也就能更好地建立雙方的信任。因此,我們需要提前確認整個訪談的規劃,并主動將相關信息告知受訪者,包括訪談的時間、地點、方式、目的、流程,還有過程中可能涉及的問題、后續發放的獎品等。

           

          2. 訪談中:表現專業特質

          開場介紹

          跟C端訪談一樣,正式訪談開始之前的開場白非常重要!除了再次介紹自己(不管是什么崗位,此刻我就是用戶研究員),說明這次訪談的目的,一定還要強調訪談的隱私性和數據安全性,畢竟他們面對的是真金白銀的生意。

           

          暖場

          在正式訪談前,可以先和用戶閑聊2~3分鐘,通過一定的溝通活躍氣氛,讓用戶更加放松,同時增強用戶對我們信任。暖場和開場介紹可穿插進行,沒有絕對的先后之分,在訪談者自我介紹完成之后,也可以讓被訪者進行自我介紹。

           

          一般問題

          一般問題是指一些比較基礎性問題,用戶不需要進行太多思考即可回答,比如“你最常用的功能是哪些”、“使用時間多長”。

           

          深入問題

          深入問題是用戶行為和想法更加深入的探索,會更關注用戶行為細節和行為背后的動機。一般在問這些問題時,訪談者需要不斷地詢問用戶為什么,直到用戶無法繼續回答。深入問題是整個訪談的核心,也最容易挖掘到用戶需求和痛點。

           

          回顧與總結

          每部分的訪談結束后可進行簡單的小結。訪談者通過回顧訪談過程對用戶的行為和態度進行客觀闡述,一方便有助于訪談者梳理思路,另一方面讓用戶對訪談結果再次確認。

           

          3. 訪談后:實現長線共贏

          最好和訪談對象建立長期聯系,尤其是一線業務人員。人和人面對面聊過后,會產生基本的信任感和好感,要借助訪談的機會,拉近和業務人員的距離。如果后續項目中遇到問題,想獲取最真實的一線反饋,可以聯系之前的訪談對象,尋求幫助。

           

          Step 5:分析建模

          1)根據角色對訪談對象分組

          將用戶訪談后得出的重點信息寫在便利貼上(或Excel表中打印后切片),設計師需要根據產品用戶角色不同,將受訪的用戶歸類分組,如HR和HR總監。

           

          2)找出行為變量

          分組后,需要識別關鍵的行為變量,將調研到的用戶與行為變量進行一一對應,并識別差異化行為模式。如下圖所示

           

          3)映射訪談對象與行為變量的關系

          再將不同的角色間同類行為模式歸納(合并同類項),進行行為描述。此處需注意以行為變量為依據進行用戶對應時,不必追求絕對的精準,只要相對能映射清楚即可。梳理完后,觀察可發現某些用戶群體聚集在幾個行為變量上,它們構成了一個顯著的行為模式,由此聚類出某個角色類型。依此類推,可以發現幾個不同的行為模式。為保證全面,映射完最好遍歷一下,檢查是否有用戶或變量的遺漏。

           

          4)找出共性行為模式

          完成映射后,尋找在變量軸上的對象群。梳理完后,如果一組對象聚集在多個不同的變量上,則可以代表一類角色存在顯著的共性行為表現(通常每類角色會有2~3個共性行為)。共性行為能幫我們識別標準化產品需要滿足的用戶需求,而差異化行為可以根據企業需求做定制化服務,一個B端產品是不太可能滿足所有用戶的需求的。

           

          Step 6:畫像呈現

          一旦我們找到共性行為,就可以創造用戶畫像了。梳理出每類角色的行為、目標、痛點等維度特征,形成畫像的基本框架。最后再完善用戶畫像,此時我們需要做的事情主要是:

          • 1)結合真實的數據,選擇典型特征加入到用戶畫像中
          • 2)結合使用場景進行故事描述,在描述中體現行為變量等因素,讓畫像更加豐滿、真實。
          • 3)讓用戶畫像容易記憶,比如用照片、名字、年齡、幾條簡單的關鍵特征描述,都可以減輕讀者的記憶負擔

          最終客戶畫像呈現如下圖

          數據已脫敏,非真實數據

           

          最終角色畫像呈現如下圖 

          數據已脫敏,非真實數據

           

          用戶畫像作為一個強大的設計和交流工具,能夠讓利益相關人目標始終保持一致,它的價值在于傳播與使用。舉個例子,90年代,庫珀將用戶畫像的描述做成一頁紙貼在墻上,一個產品的一個用戶畫像做一頁紙,這樣設計團隊成員每天走進辦公室就能看到。

          用戶畫像制作出來后,與整個項目團隊共享定義的用戶畫像是很重要的,千萬不要讓他在共享文檔里積灰或掛在墻上當擺設。你要做的是讓用戶畫像從紙上躍起,走進你同事的心里,讓他在每次討論、每個決策時,自然、自發地被提起。所以用戶畫像的使用也是極其重要的,不然前面的工作都是無用之功。

          所以,你可能需要:

          向團隊介紹用戶畫像。花點時間介紹研究的過程,展示照片給他們看,聊一聊畫像的需求,期望,痛點,性格等。最好以故事性的方式進行引導,并長期地在會議里提到并討論它

           

          在你的用戶故事中使用用戶畫像?!叭绻沂?*業務招聘員,我想要快速識別出今天某門店招聘的人數和到崗的人數”。設計時,花點時間想象一下軟件會被用戶在工作中如何應用。

           

          造訪不同團隊,介紹用戶畫像,包括它從何來,如何用。教他們怎么招募有代表性的用戶進行測驗,如何寫用戶情景來啟發設計或作為可用性測試任務

           

          總的來說,在你能力范圍之類的地方,宣傳用戶畫像的商業價值,提升大家的信任。畢竟用戶畫像可以幫助產研團隊跳出自己的需求,了解真正使用產品的人的需求。當越來越多的團隊使用用戶畫像,那么用戶畫像就會越來越像一個真實的用戶,幫助團隊從用戶的角度出發去設計產品。

           

          值得注意的一點是,用戶畫像并非一成不變的,很大程度上受環境和周期的影響,所以我們要定期回顧自己的用戶畫像,對他們進行一些更新,確保和現實一致性。市場變化和策略的變化可能會重新定義你的業務受眾,也可能出現其他的細分,這也是重新調整用戶畫像的好機會,否則它們最終將失去生命力。希望你的用戶畫像也能始終對業務起到幫助,為體驗助力。

          文章來源:學UI網   作者:小紐扣

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



          我們對2021年的用戶體驗有何期待?

          ui設計分享達人

          用戶體驗設計是一個動態領域,每年都會為我們帶來新的趨勢,最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數字世界和現實世界之間的互動方式發生了突然的變化。人們不僅開始在網上花費更多的時間;他們的思考方式和表現方式也發生了不同。

          本文主要闡述2021用戶體驗的趨勢,我們相信這將在新的一年里占據主導地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。


          語音介面

          我們在2020年UX狀態預測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設計中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應忽略它。

          毫無疑問,到2021年,語音聊天機器人和虛擬助手將繼續流行。用戶在數字體驗方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術的迅速發展使品牌別無選擇,只能在其產品中包含基于語音的功能。

          已經有許多企業為廣泛的VUI實施奠定了基礎。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。



          簡約的UI

          極簡主義可能是當今視覺設計中最明顯的趨勢之一。用戶正在體驗越來越多的網站所有者想要傳遞的關鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉化網站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設計應運而生的地方。

          但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優雅”和“高效”。盡管必須使用數量有限的顏色,設計元素和明亮的組合,但UX設計人員仍然有很大的發揮空間。此外,元素的功能最為重要,正確突出產品功能并傳達正確信息的能力需要大量的創造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




          內容,消息和導航的清晰度是UX設計的簡約方法的另一個重要方面。信息過載對于大多數現代用戶來說是一個痛苦,這意味著網站所有者應努力使自己的UX文字簡潔明了。


          負空間

          負空間是用戶體驗設計的一種大趨勢,它已經脫離了對簡約UI的市場需求。簡而言之,負空間是頁面布局中對象周圍(宏空間)或對象內部(微空間)的空白區域。它已經成為獨立的設計元素,在視覺美學和用戶體驗優化中起著至關重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創建的網站就是很好的例子。






          留出一定的空間,在設計中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負空間的主要功能是整理網頁,以吸引用戶對關鍵對象和消息的注意。建立清晰的內容層次結構有助于UX設計人員將用戶的注意力吸引到最重要的內容上。




          負空間有時也稱為“空白區域”或“留白區域”。所有這些術語都是可以互換的。當區域中沒有元素時,您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。

          不完美的元素

          在發生COVID-19大流行之后的在線體驗將與我們習慣的在線體驗不同。UX設計以相關方式反映了缺陷。為了使品牌的數字化形象更具關聯性,設計師有意在版面設計中實現了一些“缺陷”。 它可以是任何東西,從手繪對象到構圖或頁面的不尋常元素。







          通常,不完美的設計可以很好地證明品牌的身份并突出其獨特性。但是,如果要應用這種UX趨勢,則必須記住一個關鍵規則:必須保持平衡。如果你做得過多,那是行不通的。



          同態

          中性風格是UI設計中其他兩種大規模方法(擬態和平面設計)的組合,它們通常被認為彼此相對。擬態化是關于模仿現實世界中的物體以及我們與物體交互的方式。

          幾十年前,當需要使用超現實元素來創建直觀且用戶友好的UI時,它很流行。垃圾桶就是例子之一。另一方面,平面設計是一個更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

          同質性兼顧了兩者的優點。它使用圖形強度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對象,而不是精確地重新創建它們。中性風格不會將現實主義推到極致。取而代之的是,它努力實現淺色和微妙對比度的“柔和”外觀。



          在過去大約一年的時間里,同質化一直是UI / UX專業人員中討論最多的主題之一。盡管仍然沒有很多真正的數字產品的用戶界面遵循這種方法,但許多設計人員對該概念感到興奮。像Behance和Dribbble這樣的專業平臺已經包含了許多同態的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現在我們的手機和筆記本電腦中。



          3D元素和視差

          視差效果和3D元素并不是UX設計中的全新內容。我們已經看到了如何在許多Web設計解決方案中實現它們。但是,我們仍然觀察到這些用戶體驗趨勢正在逐步普及。

          首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網絡上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時尚和電子商務品牌的網站和應用上。




          另一種趨勢是嘗試在一個界面中結合視差效果和3D圖形。使用視差滾動時,網頁背景和前景元素以不同的速度移動。僅憑它就能產生深度感。通過為此添加3D對象,您可以創建一種真正的身臨其境的體驗,并將在用戶的記憶中保留很長時間。


           



            

          不對稱

          隨著我們設備屏幕的變寬,UI / UX設計中出現了不對稱趨勢。通常,不對稱是野獸派的一種屬性,這是藝術和網頁設計中與極簡主義相反的一種風格。但是,如果與其他殘酷的設計元素分開使用,它可以使您的網站看起來有趣,同時使它保持微妙和優雅。


          不對稱布局的UI / UX趨勢通常與其他創造性的Web設計技術一起實現,例如破碎的網格,重疊的元素和分割的屏幕。您也可以將不對稱性應用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




          但是,請務必記住,非對稱設計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應該引導用戶的眼睛朝正確的方向前進,并幫助品牌強調重要信息。

          動畫制作

          今天,當我們在互聯網上進入隨機網站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運動設計元素。動畫在用戶體驗設計中仍然很流行,并且使用頻率不斷增長。

          除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導航。他們還可以為數字產品或服務注入生命,使它們更具個性。



          如果要在用戶界面設計中使用這種軟件開發趨勢,那么明智地執行此操作至關重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑,從而促使他們甚至比計劃的要早離開網頁。動畫元素也不應使用戶界面不必要地復雜。它們始終必須是相關的,有價值的和平穩的。

          信息架構

          信息體系結構是在頁面上組織和構造不同內容的方式。它是以用戶為中心的設計(UCD)的基本要素,旨在使用戶的數字環境更加舒適。與用戶研究和可用性測試一起,構建有效,有用且一致的信息體系結構是UCD流程的必不可少的階段。



          為了創建一個實用的信息體系結構,UX設計人員需要對產品的目標受眾,其行為以及使用數字解決方案的原因有深入的了解。用戶應該無需花費太多精力就能獲得所需的結果。因此,在設計過程的線框階段始終必須考慮用戶的目標,清晰的導航和內容表示(包括盲點監視)。

          最后的想法

          我們創建此文章是為了讓您在當今競爭異常激烈的數字世界中站穩腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網站的用戶體驗。即使用戶期望很高,它們也可以使您的產品在視覺上對目標受眾更具吸引力。


          文章來源:站酷   作者:ZZiUP

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


          我們對2021年的用戶體驗有何期待?

          ui設計分享達人

          用戶體驗設計是一個動態領域,每年都會為我們帶來新的趨勢,最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數字世界和現實世界之間的互動方式發生了突然的變化。人們不僅開始在網上花費更多的時間;他們的思考方式和表現方式也發生了不同。

          本文主要闡述2021用戶體驗的趨勢,我們相信這將在新的一年里占據主導地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。


          語音介面

          我們在2020年UX狀態預測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設計中最熱門的趨勢之一。可以肯定地說,明年不應忽略它。

          毫無疑問,到2021年,語音聊天機器人和虛擬助手將繼續流行。用戶在數字體驗方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術的迅速發展使品牌別無選擇,只能在其產品中包含基于語音的功能。

          已經有許多企業為廣泛的VUI實施奠定了基礎。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。



          簡約的UI

          極簡主義可能是當今視覺設計中最明顯的趨勢之一。用戶正在體驗越來越多的網站所有者想要傳遞的關鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉化網站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設計應運而生的地方。

          但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優雅”和“高效”。盡管必須使用數量有限的顏色,設計元素和明亮的組合,但UX設計人員仍然有很大的發揮空間。此外,元素的功能最為重要,正確突出產品功能并傳達正確信息的能力需要大量的創造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




          內容,消息和導航的清晰度是UX設計的簡約方法的另一個重要方面。信息過載對于大多數現代用戶來說是一個痛苦,這意味著網站所有者應努力使自己的UX文字簡潔明了。


          負空間

          負空間是用戶體驗設計的一種大趨勢,它已經脫離了對簡約UI的市場需求。簡而言之,負空間是頁面布局中對象周圍(宏空間)或對象內部(微空間)的空白區域。它已經成為獨立的設計元素,在視覺美學和用戶體驗優化中起著至關重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創建的網站就是很好的例子。






          留出一定的空間,在設計中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負空間的主要功能是整理網頁,以吸引用戶對關鍵對象和消息的注意。建立清晰的內容層次結構有助于UX設計人員將用戶的注意力吸引到最重要的內容上。




          負空間有時也稱為“空白區域”或“留白區域”。所有這些術語都是可以互換的。當區域中沒有元素時,您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。

          不完美的元素

          在發生COVID-19大流行之后的在線體驗將與我們習慣的在線體驗不同。UX設計以相關方式反映了缺陷。為了使品牌的數字化形象更具關聯性,設計師有意在版面設計中實現了一些“缺陷”。 它可以是任何東西,從手繪對象到構圖或頁面的不尋常元素。







          通常,不完美的設計可以很好地證明品牌的身份并突出其獨特性。但是,如果要應用這種UX趨勢,則必須記住一個關鍵規則:必須保持平衡。如果你做得過多,那是行不通的。



          同態

          中性風格是UI設計中其他兩種大規模方法(擬態和平面設計)的組合,它們通常被認為彼此相對。擬態化是關于模仿現實世界中的物體以及我們與物體交互的方式。

          幾十年前,當需要使用超現實元素來創建直觀且用戶友好的UI時,它很流行。垃圾桶就是例子之一。另一方面,平面設計是一個更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

          同質性兼顧了兩者的優點。它使用圖形強度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對象,而不是精確地重新創建它們。中性風格不會將現實主義推到極致。取而代之的是,它努力實現淺色和微妙對比度的“柔和”外觀。



          在過去大約一年的時間里,同質化一直是UI / UX專業人員中討論最多的主題之一。盡管仍然沒有很多真正的數字產品的用戶界面遵循這種方法,但許多設計人員對該概念感到興奮。像Behance和Dribbble這樣的專業平臺已經包含了許多同態的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現在我們的手機和筆記本電腦中。



          3D元素和視差

          視差效果和3D元素并不是UX設計中的全新內容。我們已經看到了如何在許多Web設計解決方案中實現它們。但是,我們仍然觀察到這些用戶體驗趨勢正在逐步普及。

          首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網絡上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時尚和電子商務品牌的網站和應用上。




          另一種趨勢是嘗試在一個界面中結合視差效果和3D圖形。使用視差滾動時,網頁背景和前景元素以不同的速度移動。僅憑它就能產生深度感。通過為此添加3D對象,您可以創建一種真正的身臨其境的體驗,并將在用戶的記憶中保留很長時間。


           



            

          不對稱

          隨著我們設備屏幕的變寬,UI / UX設計中出現了不對稱趨勢。通常,不對稱是野獸派的一種屬性,這是藝術和網頁設計中與極簡主義相反的一種風格。但是,如果與其他殘酷的設計元素分開使用,它可以使您的網站看起來有趣,同時使它保持微妙和優雅。


          不對稱布局的UI / UX趨勢通常與其他創造性的Web設計技術一起實現,例如破碎的網格,重疊的元素和分割的屏幕。您也可以將不對稱性應用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




          但是,請務必記住,非對稱設計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應該引導用戶的眼睛朝正確的方向前進,并幫助品牌強調重要信息。

          動畫制作

          今天,當我們在互聯網上進入隨機網站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運動設計元素。動畫在用戶體驗設計中仍然很流行,并且使用頻率不斷增長。

          除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導航。他們還可以為數字產品或服務注入生命,使它們更具個性。



          如果要在用戶界面設計中使用這種軟件開發趨勢,那么明智地執行此操作至關重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑,從而促使他們甚至比計劃的要早離開網頁。動畫元素也不應使用戶界面不必要地復雜。它們始終必須是相關的,有價值的和平穩的。

          信息架構

          信息體系結構是在頁面上組織和構造不同內容的方式。它是以用戶為中心的設計(UCD)的基本要素,旨在使用戶的數字環境更加舒適。與用戶研究和可用性測試一起,構建有效,有用且一致的信息體系結構是UCD流程的必不可少的階段。



          為了創建一個實用的信息體系結構,UX設計人員需要對產品的目標受眾,其行為以及使用數字解決方案的原因有深入的了解。用戶應該無需花費太多精力就能獲得所需的結果。因此,在設計過程的線框階段始終必須考慮用戶的目標,清晰的導航和內容表示(包括盲點監視)。

          最后的想法

          我們創建此文章是為了讓您在當今競爭異常激烈的數字世界中站穩腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網站的用戶體驗。即使用戶期望很高,它們也可以使您的產品在視覺上對目標受眾更具吸引力。

          文章來源:站酷   作者:ZZiUP

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

          你的屏幕「太黑了」!深色模式到底怎么用?

          ui設計分享達人

          深色模式并不萬能 


          從移動屏幕到大型電視,深色的UI界面隨處可見。深色模式可以表達力量、奢華、精致和優雅,但這種設計模式也會帶來很多挑戰,應用不當難免會被用戶吐槽。所以開始設計前,大家最好深色熟慮下,是否真的需要做深色。


          物理學家說,黑色并不是一種真正的顏色,它沒有光。艾薩克·牛頓爵士在通過棱鏡照耀陽光的實驗中,甚至沒有將黑色包含在顏色光譜中。


          在色彩心理學中,大多數色彩代表不同的人、不同的事物。西方文化里,黑色常與死亡、神秘和邪惡聯系在一起;綠色與生長、自然相關;藍色可以使人平靜,因為它讓人聯想到天空和水,所以,顏色是飽含情感的。其他影響還來自文化,例如紫色仍與奢侈品聯系在一起,在許多古代文化中,紫色是昂貴稀有的,只有貴族才能負擔得起。


          深色界面的數字產品,是未來發展的一大趨勢。人們常說,這種模式可以減輕眼睛疲勞,但并沒有相關證據表明是真的。在某些情況下,它還代表著節省電池壽命,也是一種美學意義上的選擇。



          深色模式應用限制

          并非所有界面都適合深色主題。設計師應考慮品牌契合度、文化適應性和顏色心理學,在選擇搭配時考慮情感影響,雖然這些因素不容易平衡。針對千禧一代的金融類應用程序,可能會用深色模式營造炫酷的效果,但對于以大眾作為目標人群的銀行網站就不太合適了。當用戶想要查看自己的余額與支付賬單時,太黑暗、太時髦都會顯得華麗不實用。


          B2B SaaS應用程序的深色模式很難設計,標準的Web UI組件(例如數據表、窗口小部件、表單和下拉菜單)在深色界面中看起來可能很奇怪。由于許多配色方案不適用于深色界面,對于某些品牌和產品來說,深色模式并不是最優選擇。


          從未接觸過深色模式的設計師,如果想要搭建一個深色界面,不妨參照以下條件,先來判斷下是否需要,什么情況下建議使用深色模式?

          -當設計版面相對稀疏,極簡型的內容比較少時;

          -適用于連貫呈現的內容,例如夜間娛樂應用程序;

          -想要創造醒目的戲劇性外觀時。


          以下這些情況下不建議使用深色模式:

          -出現大量文本時(在深色背景上閱讀相對困難);

          -當設計需要多種顏色時。


          深色模式下的桌面應用信息中心 by Ramotion 


          在深色模式中形成對比

          深色模式并不非要設計成黑色的,你可以將它理解為是一種「低光」模式。設計的核心點之一,就是表達出足夠的對比度,這樣視覺元素就會被分離開,且文本也會變得清晰易讀。大多數設計師認為多用黑色,是獲得強烈對比度的最佳選擇。我的建議是,最好不要將純黑色(#000000)用于背景或者盡量少用,把它留給其他UI元素,比如較小的圖形或邊框性質類的圖形。


          Google的Material Design深色模式,推薦使用深灰色(#121212)作為界面主色,目的是為了表達出更有深度的空間感。在定義配色方案時,往深灰中添加一些微妙的深藍色,可以讓數字產品的界面擁有更好的深色調性。


          Brittany Chiang網站將深灰色與藍色融合,形成了令人愉悅的深色模式


          使用灰色的優點在于,它給了設計師更多發揮的空間,去表達更廣泛的顏色?;疑{同深藍色有同樣功能,幫助畫面更有深度,也更輕松地看到元素陰影。


          需要特別注意深色模式中的文本對比,網頁內容可訪問性指南(WCAG)要求——「文本的視覺呈現對比度,至少應為4.5:1」,大型文本的對比度至少在3:1。設計師需要確保文字內容在黑暗模式下能夠清晰可辨認。


          另外,測試其他UI元素(例如卡片、按鈕、字段和各種顯示器上的圖標)之間的對比也是一個好辦法。如果UI元素之間沒有突出的對比,那么設計就需要調整下了,枯燥無味的設計對于用戶來說也是一種折磨。


          左側的深色模式中,文本和背景之間的對比明顯不足


          重點注意一:配色

          顏色在深色模式中非常突出,最好使用淺色、飽和度低的配色方案,避免過于刺激視覺。顏色與文本一起使用時,需要參照WCAG的AA標準,至少4.5:1。Google建議顏色數量不必太多,使界面都處于深色中。


          Jabra Sound +應用程序只給深色模式配色選擇了2-3種顏色


          適宜的配色方案能營造出非常好的對比效果。Colorable在線工具,只要輸入色號就能看到文本和背景色組合在一起是否合適;Google的Material Design網站上也有一個調色板生成器,設計師可以使用它創建調色板,應用到UI上。


          文字和基本元素(例如按鈕和圖標)在深色背景上顯示時應符合易讀性標準。如上面的Jabra Sound +應用程序所示,文本和圖標可以使用白色以外的顏色進行搭配。


          “使用強烈對比色來提高可讀性。人們對于顏色的感知會受到許多因素影響,包括字號、字重、顏色亮度、屏幕分辨率和照明條件。” ——Apple人機界面指南


          深色模式并不需要大量顏色來堆砌


          重點注意二:利用負空間,少即是多

          成功的深色模式設計,需要巧妙利用負空間。如果設計不當,會使數字產品顯得笨拙與沉重。為了平衡這一點,設計師可以利用極簡主義中的負空間,讓深色界面更輕巧,也能讓用戶更容易識別信息內容。


          UI元素周圍的大量負空間使界面被重新定義,而且元素也不會出現密集與混亂感。如果沒有呼吸空間,用戶在閱讀界面時,可能很快的略過,因為大腦沒有快速的識別出重要內容。


          充斥著太多元素和文本的界面,是導致深色模式體驗差的禍根。設計師需要仔細考慮深色模式中的視覺層次結構,從而提升用戶體驗。


          極簡主義的深色模式界面 by Denys Tyrynskyi


          重點注意三:版式

          深色模式中的每一段文字都需要仔細檢查,更需要關注2個方面——可讀性和對比性。首先,界面中的文本必須足夠大,以確保清晰易讀(深色背景上的小文字,閱讀起來體驗很差);其次,文本和背景之間必須有明顯的對比。設計師可以通過增加對比度,為較小的文本調整字體大小、字符間距和行高,去優化可讀性問題。


          W3C AAA建議常規尺寸的文本(如果不是粗體,則小于18pt)的對比度至少應為7:1。這也適用于其他UI元素——圖標、文本圖像和文本標簽(按鈕標簽),設計師有責任確保所有人都能正確應用界面。


          深色模式中應用優秀字體很有必要,像Google字體和字體庫,以及Adobe Typekit都能提供便捷的設計支持。


          AirPods Pro頁面使用超大字體和強烈的對比,以達到最好的效果


          重點注意四:空間深度感

          深色模式不應該是平淡的,在正常明亮模式下,元素的高光或是陰影都會讓界面產生深度感。而深色界面更具挑戰性,建議設計師可以使用類似3-4多個層面,以及相應的配色方案來傳達深度感。


          為什么要有深度?深度感是與物理世界的一種呼應。我們的視覺有深度感知的能力,因為人們是生活在3D世界中的。表面的照明方式不同,以表示不同的海拔高度。位置越高,越接近隱式光源,表面就越亮。一個非常亮的表面,更容易區分組件之間的高度,還有助于查看陰影,使每個表面的邊緣線更明顯。


          表面越亮,越接近隱藏光源 by Material Design


          設置每個級別的表面顏色需要小心,建議不要超過4或5個級別,最好在設計系統中將元素的文本顏色指定為純黑色(#000000),以在淺灰色背景上實現良好的對比度。


          深色模式設計啟發

          基于上述原則,以下是一些優秀的深色模式示例:


          The Atom Finance website


          Atom Finance利用深色模式打造了精致外觀,并將其強調色限制為3種。復雜的金融網站采用了極簡設計,而且很好地使用了陰影來表現不同組件的深度感。


          電子商務網站 by Daniel Klopper


          電子商務網站 by Darion Mitchell


          IBM儀表板 by Ruben Fernandez


          盡管處理SaaS的深色模式遇到了挑戰,但IBM的數據可視化儀表板仍是典范。強調色的數量最少,并且該網站使用細微的陰影顯示不同元素的深度。


          Wego,Spotify和Apple的深色模式APP(Android和iOS)


          使用深色模式固然好,但需要依據實際產品屬性來判斷,不應出于時髦、流行甚至是與眾不同或模仿他人等因素確定。設計者應有充分的選擇依據,并考慮其內容、使用環境以及顯示設備是否適合來最終敲定。


          深色模式適用于一些數字產品,而非所有產品,界面簡潔非常關鍵。對于復雜且數據繁重的B2B平臺,以及文本繁多的頁面,深色模式都是不適合的。對于從情感和美學角度去探索深色模式的設計師來說,他們開辟了一個新的領域。

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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