<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設計者


          在信息流產品中,個人資料卡是一個很重要的頁面。一方面,創作者通過這個頁面展示賬號價值,突顯賬號魅力,引導用戶關注;另一方面,消費型用戶通過這個頁面了解創作者,查看創作者更多內容,是眾多消費型用戶消費內容中重要的一環。只有把這個循環做好才能長期促進平臺生態發展。

          這個頁面承載著這么多的價值,該如何設計?本篇將以 QB 看點號資料卡升級的設計思路為例,進行分析解答。

          前言

          在前期分析過程中,我們發現當前版本存在諸多問題。

          從數據上看,對比公司內同類產品,關注按鈕轉化率較低(出于數據保護,數據隱藏)。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          從樣式上看,信息布局較亂,重點不突出。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          基于以上背景,我們開始對資料卡進行改版升級。

          設計前應該思考什么

          做任何一個設計前,都應該思考設計目標,否則設計出來的結果沒有意義,也缺乏過程依據和支撐。那么資料卡的設計目標是什么呢?這要從資料卡在信息流產品中的使命和價值說起。

          一方面,消費型用戶通過這個頁面了解創作者,查看更多內容;另一方面,創作者通過這個頁面展示賬號價值,突顯賬號魅力,引導瀏覽者關注。

          如果創作者能夠在資料卡充分展現自己的才華和魅力,帶來了更多瀏覽者的“關注”,那他們就更有動力分享或生產優質內容,進而使產品內容更加豐富;從而吸引更多新用戶的瀏覽、留存。

          更多新用戶的加入、瀏覽、留存,讓內容生產者有更多的漲粉空間,粉絲規模做起來之后再進行商業化。這樣對消費型用戶、內容生產者、平臺方都有利,進而處于良性循環。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          信息流產品個人資料卡如何設計?這些思路供你參考!

          如何進行資料卡設計

          了解了資料卡的使命和價值,設計目標也呼之欲出,作為平臺方,我們需要幫創作者解決兩個問題:輔助創作者吸粉 & 助力商業化變現

          當然,創作者產出優質的內容才是吸粉的關鍵,平臺方只能助攻。但不同的信息流產品有著不同的定位和側重點,吸引著不同的用戶,所以資料卡設計的樣式也不盡相同。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          1. 輔助創作者吸粉

          在輔助創作者吸粉這里,有兩個維度可以思考:

          • 內容展示維度
          • 用戶關注維度

          內容展示分析

          在資料卡中,有三個大區域:頭圖區、信息區和作品區。

          • 頭圖區:指的是頂部的頭圖區域,這里可以讓創作者設置個性化頭圖,展示個性。
          • 個人信息區:主要是作者的基本信息,包括昵稱、賬號名、簡介、粉絲數、認證信息等…這里通常還承載著一些等級、榜單,屬于信息展示和官方背書區。
          • 作品區:主要展示賬號發布的內容,這部分通常是瀏覽者最關注、瀏覽時間最長的部分。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          通過對比市面 20+信息流產品,我們發現了一些有趣的規律:

          信息流產品個人資料卡如何設計?這些思路供你參考!

          ① 頭圖區:越是社區類產品,對頭圖個性化重視程度越高,而資訊類的產品則不太重視。

          從產品功能上來看,越是偏向于社區類屬性產品,頭圖區域越大,可自定義替換的范圍也越廣。從用戶使用角度來看,社區類產品的用戶也更愛展示自我,頭圖替換的比例也更大,風格更多樣化。而資訊類產品的創作者大多使用默認頭圖,并不進行個性化設置,自定義頭圖的比例很小。

          所以我們在設計頁面布局時,需要思考自身產品定位以及創作者需求,把有限的空間利用在刀刃上。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          ② 信息區:越是追求多元化收益商業化的產品,信息區承載量越大。

          創作者不是活雷鋒,想讓他長久的留在平臺必然需要給到創作者更多收益(收益除了顯性也有隱形的,比如 B 站,很多創作者在 B 站發文平臺收益相比其他平臺少,但因為品牌聲量大、氛圍好,獲得了巨大的關注和曝光,所以即使收益低,創作者也會持續在平臺投稿)。

          除了流量分成外,平臺們也在幫助創作者實現多元化的收益,比如商鋪、直播、付費課程粉絲圈等。甚至抖音很多創作者直接把商務合作寫在了個人簡介中招商引資。所以這個區域,隨著多元化商業收入的更多嘗試,信息承載量也越來越大。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          ③ 內容區:越是長內容,越傾向于展示更多作品和更多信息;越是短內容,越是“看就完了”。

          對比多款產品我們發現,越是長內容的產品,在內容區越是注重效率選擇。通常會顯示更多內容,且單條內容會顯示更多維度幫助瀏覽者決策是否點擊查看。猜測可能是因為內容較長,瀏覽者通常會花費更多精力在選擇上。而越是短內容,把單條內容放大,促進瀏覽者點擊,直接“看就完了”,反正一條也沒太長時間。

          所以設計資料卡時,需要設計者清晰了解自己平臺內容特征以及用戶行為偏好,做出更合適自己平臺風格的設計。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          綜上,在做內容布局展示時,需要綜合考慮產品定位,思考這些區域對于產品和創作者瀏覽者意味著什么。

          比如頭圖區域,資訊類產品并不重視,畢竟賬號還是靠內容說話,即便是放張個性化頭圖,瀏覽者也不會因此而關注。而且大家都使用默認頭圖,個性化無從說起,就更沒有什么意義了。

          那么如何讓頭圖有價值?創作者愿意為此更換,而瀏覽者看到能夠感受到帳號的特殊性?

          筆者提供一個思路拋磚引玉,參考 App Store 的編輯精選:只有精選的 APP 才可以有頭圖權利,其他 APP 都是默認樣式。而稀缺性和被認可,正是人類所追逐和渴望的。如果平臺選出一些精選帳號,賦予其設置頭圖資格。作為創作者,非常有意愿去更換,因為可以體現出和其他賬號的不同。瀏覽者也可以通過頭圖感受到當前賬號的優質屬性。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          用戶行為關注調研

          既然要幫賬號吸粉,那么我需要了解瀏覽者的行為偏好,知曉瀏覽者根據哪些內容判斷是否關注該賬號。這里我們線下調研了 12 名用戶,了解他們在信息流產品中(產品不限于 B 站、抖音、小紅書、知乎、快手等)進入資料卡后,通過哪些信息和元素來決策是否關注賬號。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          通過訪談,我們得到了 12 名用戶的原始表述。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          我們發現,瀏覽者在關注賬號的時候,主要在意“內容是不是感興趣” 、“粉絲量多少” 和 “內容領域”。少量同學提到了會關注下作品數,其他信息基本不看。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          原話摘錄:

          • 主要看作者發的內容,把高播放量的看一下,如果都比較感興趣就會關注。會看一下粉絲量,粉絲量多代表質量比較好,關注不會踩坑。作品數會看一眼,如果作品太少,比如5個以下就不關注了直接看。
          • 只看內容,其他作者資料基本都不看,偶爾看一下粉絲數。教程不看粉絲數,教程如果是我需要的內容,就算粉絲少我也會關注。
          • 主要看作者別的視頻,關注主要是為收藏,不看別的只看所有視頻。會關注最近內容的播放量怎么樣,其他基本不看。
          • 那肯定是看內容是不是感興趣啊,關鍵還是看內容,粉絲量和點贊作品數會看一下,但不會作為關注的主要原因。如果粉絲量作品數多的話,關注動力會大一些。其他的都不看。
          • 還是看內容是不是感興趣。粉絲量分情況,特別需要的內容不關注粉絲量,搞笑類生活類的會看下粉絲量再考慮是不是關注。有一些作者如果只看個別內容感興趣但整個領域不感興趣的話不會關注。通過標題大概判斷是不是自己喜歡的類型,最主要的還是內容,其他的不看,粉絲量會看一下別太差就行。

          而在操作路徑上,進入資料卡后:先到作品區查看內容列表 → 拖動頁面向上查看更多內容 → 返回信息區查看粉絲量 → 關注賬號。呈現先下后上的操作路徑。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          行為路徑結合關注決策,有三個關鍵元素是形成操作鏈條并綁定在一起:內容、 粉絲數 、關注按鈕,且內容為高播放量內容。所以高播放量內容,粉絲數是決策關鍵,激發下一步關注行為。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          而且我們在訪談中發現,關注行為也是一個偏沖動行為,用戶通常在進入資料卡的幾分鐘內做出決定,在頁面停留時間越長,越不容易發生關注行為。所以在設計中,盡量縮短決策路徑,減少決策時間。

          基于以上結論我們做了兩個方案再次進行測試:

          • 方案1:傳統樣式
          • 方案2:高播放量內容,粉絲量,關注按鈕放置在同一區域,縮短決策路徑

          信息流產品個人資料卡如何設計?這些思路供你參考!

          為什么做一個傳統方案進行對比測試也是因為現在很多產品資料卡頁面趨同,大家已經形成了認知慣性,而尊重用戶習慣也是產品設計中需要考量的因素。接下來,我們又找了 12 名同學進行訪談和測試。

          出乎意料的是,大家對于新事物的接受程度很高,有八名同學選擇方案 2。雖然只是理論上的選擇,并沒有延伸到實際行為,但也佐證了大家對于高播放量內容確實存在很高的需求。對于選擇方案 1(傳統樣式)的同學來說,主要是不喜歡橫滑操作和不想改變既有習慣。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          原話摘錄:

          • 喜歡方案1,不喜歡橫滑,習慣豎著操作,標題清晰
          • 喜歡方案1,橫著這樣展示好像沒有豎著這樣展示清晰,喜歡這種長條的樣式
          • 喜歡方案2,喜歡這個,重點突出,符合我的習慣,如果高播放量內容都不錯我就會關注,省得找來找去了
          • 喜歡方案2,上面這個類似youtube的popular uploads的東西能讓你第一眼看出這個UP主牛在哪

          不管哪種樣式,內容都是重中之重。既然是重中之重,大家也會注意到,有些內容區視頻是雙列形式,有些視頻是單列形式。那么瀏覽者如何看待這種區別呢?會對關注產生影響嗎?

          基于兩種樣式進行訪談,比分最后打成平手。雖然在 2 選 1 的要求下大家各有各的選擇,但最后也都表示差不太多,都能接受。從信息利用率上來講,雙列的形態展示的內容更多,而且對視頻更加友好,預覽圖比較大。所以如果是視頻內容,可以使用雙列大預覽圖樣式。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          以上是關注吸粉的部分,設計時需要綜合考慮產品定位和用戶行為特征進行頁面布局。

          2. 助力商業化變現

          商業化能力是創作者與平臺形成強關系的紐帶。平臺為幫助創作者變現,不僅通過各類扶持政策給予補貼, 更是通過整合各類商業資源,不斷拓展商業化渠道,打通全流程商業鏈條,幫助創作者實現內容價值最大化。

          一般平臺提供商業化有三種類型:

          基礎工具

          • 商業基礎:平臺提供流量分成、現金獎勵等
          • 商業化功能:打賞、電商功能、內容付費功能、直播功能等
          • 精準推送功能:粉絲分組推送、粉絲必達等

          平臺政策

          • 扶持計劃:出臺各類流量扶持政策,賦能變現
          • 獎勵政策:MCN 簽約、創作活動

          資源整合

          商業資源整合:整合平臺內外部的廣告主資源、商業活動資源、投融資服務、新媒體賬號孵化等各類資源

          資料卡涉及到的商業化展示主要為:電商能力,內容付費,粉絲圈/粉絲付費。當有這些商業化內容的時候,通常占用信息區一行區域,大多數信息流產品多如此。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          但當多種商業化能力同時提供時,不同的產品給出了不同的解決方案。比如大多數產品合并在信息區的一行,通過橫劃展示更多,以保證其他內容的露出。畢竟對于瀏覽者來講,內容才是最重要的。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          有一些產品則沒有選擇合并的方式而每個占用一行空間,與此同時,把創作者的信息展示的也更為詳細,可能和本身社區類產品的定位有關,希望更能關注除了內容以外,創作者自身的獨特價值。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          還有一些產品則利用了內容 tab 區域承載櫥窗和付費服務,減少信息區的占用,還可以通過邏輯把不同渠道或不同場景的用戶引導不同 tab,讓瀏覽者看到更適合自己的內容。

          信息流產品個人資料卡如何設計?這些思路供你參考!

          總結

          資料卡里承載了很多的信息,從創作者的個性展示到內容到商業化變現,需要我們不斷平衡每個區域的關系。

          別的產品這么做,并不一定適合自己的業務,需要我們找準自己產品的定位,結合當下業務重點去綜合考慮。

          業務是偏資訊的還是偏社區的?是偏短內容平臺還是長內容?有沒有提供足夠多的商業變現能力給到創作者?商業化能力做的如何?不同模塊的用戶數據怎么樣?只有對現有業務充分了解,才知道哪些是現階段的重點,才能對一個頁面做出更有依據的設計。

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

          文章來源:優設   作者:騰訊設計 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          消息通知系統設計指南

          資深UI設計者

          消息通知可以及時地將狀態、內容的更新觸達到用戶,用戶則可以根據收到的消息做后續判斷。但是如果沒有及時將重要消息觸達到用戶或者濫用消息,則失去了消息通知的初衷。特別是針對涉及復雜任務流程的產品,消息類型繁雜,難以全面盤點消息類型,消息系統的設計就顯得尤為重要。

          希望通過這篇文章讓各位在設計消息通知系統的時候能夠更加全面高效。

          如何「理解」消息通知

          消息通知需要為產品服務,幫助用戶快速獲取對應的通知信息。收到一條新回復的提示、工作臺展示工作進度、朋友的來電,生活中處處是信息的交換。在 App 和網頁應用中最常見的信息交換方式則是消息通知。

          消息作為一種信息交換方式,抽象其過程,即為“在達到某一觸發條件下,由發送方發送消息給到接收方,接收方可針對此條消息提供反饋”。需要包含以下關鍵因素:

          騰訊出品!消息通知系統設計指南

          消息觸發時間與條件(何時什么事):如按周期重復的時間點,或系統狀態變更、用戶操作結果等;

          消息發送方(誰發現的事):可能是系統、第三方服務商,或者某個用戶;

          消息接收方(誰需要知道):即接收方,可能是系統中的全部用戶,也可能會根據權限劃分推送到某個用戶群組,或者是某個特定用戶;

          消息觸達渠道(怎么找到他):短信、電話、App 內通知等;

          消息通知內容(告訴他什么):短信的文本、電話對話內容、通知消息的文案等消息通知;

          消息操作反饋(他可以干嘛):主要分為只讀與操作反饋。只讀,即當前消息用戶在瀏覽后不需要做更多的操作,主要以了解為主;操作反饋,即當前消息需要用戶瀏覽,且在瀏覽后做相應的后續操作。

          好的消息系統要滿足什么條件:

          騰訊出品!消息通知系統設計指南

          全面:通知的消息項要完整全面,用戶才能放心地通過消息通知系統了解消息更新內容;

          及時:消息的觸達方式要及時有效,在消息相關事件發生后,用戶能在第一時間獲取到信息并提供操作反饋給到消息發送方;

          高效:能通過合理的消息發送途徑,允許用戶設置及合并相似信息等方式避免過多消息侵擾用戶,讓用戶能夠高效處理消息通知。

          如何「盤點」消息通知

          設計全面、及時、有效的消息通知系統需要對消息的六個關鍵因素進行全面盤點,通過分步的方式逐步完成消息通知系統的設計。主要分為以下三步:

          騰訊出品!消息通知系統設計指南

          ① 盤點系統中包含的消息項:包含其觸發條件、通知來源及通知對象。需要盤點完整消息項從而保證消息系統的完整性;

          ② 確定消息觸達渠道:包含各消息項的觸達渠道。讓所有消息都能觸達到用戶的同時,能夠讓重要信息更易觸達,保證消息通知的及時性;

          ③ 撰寫通知內容與操作反饋:包含各消息項的通知內容與操作反饋。讓消息內容能夠有效地傳達給用戶,讓用戶能快速反饋、操作。

          盤點的過程,即對消息通知清單的梳理。與產品、研發等團隊成員的溝通也將使用該清單。最終目標即完成下方表格的填寫:

          騰訊出品!消息通知系統設計指南

          1. 盤點系統中包含的消息項

          當前步驟需要對系統中可能會有的消息項進行完整的盤點。盤點消息項可以通過按消息類型走查方式完成。市場上比較有共識的消息的分類方式主要分為禁止、警告、成功三類。但是在實際設計工作中還需要配合以下的消息分類方式去更完整地盤點消息項:

          騰訊出品!消息通知系統設計指南

          盤點出的每個消息項

          都需要補充以下四個關鍵因素:

          觸發條件:結合產品核心場景梳理完整。可通過狀態圖或泳道圖查缺補漏(詳見下段內容);

          通知來源:可能是某個內部系統,可能是某個用戶組,也可能是某個具體用戶。用戶組的劃分需要提前與產品、研發同事溝通完成;

          通知對象:可能是全部用戶,也可能是某個用戶組或具體用戶。由觸發條件中的場景決定;

          重要性:需要與團隊溝通得出,可使用“高”、“中”、“低”的分類方式。

          盤點完成的消息項使用下表進行整理,方便產品、設計、研發之間的溝通。

          騰訊出品!消息通知系統設計指南

          用流程圖或泳道圖查缺補漏:

          對于 ToB 或 ToG 類含有復雜狀態轉換以及任務流的產品,除了使用分類的方式盤點消息項,還需要對照流程圖或泳道圖查缺補漏,避免消息類型的遺漏。

          如,顧客線上購買商品并收取商品的商品相關狀態變化如下圖所示,每個狀態都可對應著一條消息項:

          騰訊出品!消息通知系統設計指南

          線上購物過程中的消息流程圖示意

          當系統內包含多角色,且角色間流程有交互時,則可以使用泳道圖的方式進行梳理。在泳道圖中的每一條狀態變更線,都對應著一個狀態變更提醒。其中角色間交互的線,由于需要角色主動處理方可進入下一流程狀態,這條消息一般會成為一條待辦消息。

          什么類型的消息不要納入消息通知系統:

          需要注意的是,雖然通知的完備性很重要,但某些消息在前期梳理時就需要從清單中剔除,包括:

          • 單純問候類消息,如“好久不見”等
          • 不需要用戶知道的消息,如系統后臺數據更新等
          2. 確定消息觸達渠道

          確定要推送給用戶的消息類型后,需要給各消息匹配適合的通知方式。不同的通知方式會有不同的適用場景,可對照下表結合第一步整理的重要性配置消息的觸達渠道:

          騰訊出品!消息通知系統設計指南

          消息觸達渠道的配置結果到第一步的表格中:

          騰訊出品!消息通知系統設計指南

          平衡通知量:

          一個好的消息系統需要能有效觸達的同時不過分侵擾用戶。這就要求我們對系統實際運行中可能會出現的通知量進行預估,并適量調整通知方式,讓重要的消息能夠更有效及時地觸達到用戶。最終調整后的消息數量與提醒強度的關系最好能形成如下圖所示金字塔的模式。

          騰訊出品!消息通知系統設計指南

          提醒強度與消息數量的金字塔關系

          合并重復消息:

          對于出現頻率較高,且用戶不需及時了解每條消息的消息項,可以通過合并消息的方式減少通知的數量。合并主要有兩種方式:合并流程過往節點信息和合并同類消息。

          • 合并流程過往節點消息:對于一些流程類通知,若用戶在響應或查看前,流程已經進入到下一階段,歷史節點的信息已經無需了解時,可合并過往流程節點的消息。如淘寶在展示物流時,針對同一訂單的物流,僅保留最新的一條。
          • 合并同類信息:對于同類型消息過多,且用戶不需要一一查看,只需在用戶有需要的時候提供入口查看完整內容時,自動合并同類型的消息,減少對用戶的打擾。如 Instagram 在展示用戶動態信息時,會合并同一天同一類型的消息。

          騰訊出品!消息通知系統設計指南

          兩種合并消息方式

          智能推送:有條件的系統可根據用戶行為分析及用戶畫像,進行智能推送。如基于用戶畫像按類型推送運營類消息,基于用戶接受消息數量,判斷是否合并消息推送等。

          渠道間消息項的延續與統一:

          出于信息持續性的考慮,觸達渠道之間有部分關聯關系在制定消息觸達渠道時需要注意,如:

          • 若系統包含 App、web 等不同端,相同通知類型的消息要保持統一
          • badge 提示需要在應用內消息通知模塊有對應消息提示
          • push 消息的文案需要與應用內消息中心保持一致
          3. 撰寫通知內容與操作反饋

          通知的內容需要滿足簡明易懂的同時,還要讓用戶能夠快速處理。根據大量經驗總結,通知內容的撰寫可使用一個通用撰寫公式:

          騰訊出品!消息通知系統設計指南

          在應用撰寫公式寫內容時,需注意以下要點:

          • 重點前置:用戶觸達的第一場景,可能是手機的 push 消息,可能是多個消息的列表。這就要求在撰寫文案時要將重要信息前置,如驗證碼、還款金額、事件提醒名稱等。
          • 敏感信息保護:由于無法確認用戶獲取信息的場景是否私密。對于金額、個人信息等隱私數據,建議在應用內或其他渠道提供設置項,提供用戶自主選擇是否在消息通知中包含具體數值。如果要默認顯示,需要提前告知用戶。
          • 來源信息露出:在郵件、短信等非產品自有渠道推送消息時,用戶可能會不確定消息的來源是否官方,需要包含消息來源信息。
          • 提供觸發時間:當消息的發生時間對用戶后續判斷、操作有影響時,需要在通知內容中包含消息發生的時間。

          除了以上通用注意事項,由于渠道本身的特征差異,還需注意以下渠道相關的要點:

          電話:需要設定客服話術標準,一般需要在會話開始前先告知用戶來電是誰、有什么目的。在講述完通知內容后,還應告知用戶如何處理當前信息,如果想了解詳細內容該前往哪個渠道了解。

          短信-來源平臺:由于通知類短信的發送號碼可能會由于服務商設置的問題導致有多個發送號碼發送給用戶,用戶無法根據號碼判斷發件人身份。故需要在短信最開始說明平臺來源,建立品牌認知,避免用戶錯認為是垃圾短信。如:「騰訊科技」***

          短信-操作反饋:由于大部分短信為純文本短信,相關操作反饋需要通過鏈接或者路徑指引的方式提供。若短信包含詳情鏈接,鏈接最好能設置為保留根域名的短鏈,如:點擊了解詳情:cdc.qq.com/d8djei

          郵件:與短信相似會有來源可信度問題,郵件內容需包含品牌元素,同時發件的郵箱地址后綴使用產品官方網站。另外需要注意,某些郵件軟件會設置不自動下載圖片,郵件重要內容不要使用圖片。

          push 推送(移動端):是消息在移動端的特有觸達渠道,由手機系統發送。發送的信息格式會受系統要求有所限制。最新的推送要求可參考相關設計規范文檔或接口規范。應用的 icon 與名稱系統會自動補充,撰寫文案時不用包含。

          微信公眾號(訂閱號/服務號):由于微信對訂閱號與服務號的消息推送方式會經常變化,需要確認最新的要求并撰寫文案。

          在完成通知內容以及操作反饋的梳理后,對消息梳理表格進行更新,補充相關信息:

          騰訊出品!消息通知系統設計指南

          自此,消息項的盤點已經完成,后續可基于該表格與產品、研發溝通。當業務出現變更時,也需要對表格內容進行同步更新。

          如何「設計」消息中心

          消息通知的觸達渠道中,電話、短信、push 推送的呈現由系統決定。但是若產品有獨立 App,往往需要消息中心去承載全量的消息列表。本章會介紹如何設計消息中心。

          不同應用的消息中心處理方式受產品定位、應用框架等因素影響,設計差異化較大。但是可以通過按路徑分割去簡化設計:消息中心的入口、消息列表的組織方式、消息卡片的樣式、消息的設置等幾個部分。

          騰訊出品!消息通知系統設計指南

          1. 消息中心入口

          主要有底部 tab、個人中心附近的圖標入口、個人中心的菜單項等三種入口形式:

          騰訊出品!消息通知系統設計指南

          消息中心的三種入口

          • 底部 tab:一般適用于產品核心功能中包含大量用戶間通訊,或者希望通過強化消息露出來促進用戶上傳更多內容。對于重要的消息類型可提供數字 badge 作為未讀消息數量的提示;
          • 頂部圖標入口:一般適用于產品消息數量較少,或消息對產品核心場景的影響較少的情況。一般會在首頁的頂部,或個人中心頁的頂部有一圖標作為入口。圖標會包含數字 badge 作為未讀消息數量的提示;
          • 個人中心菜單項:一般適用于當產品頂部空間作他用,沒有圖標入口的位置時使用。

          2. 消息列表

          從消息中心入口點擊后跳轉到消息列表。由于消息的即時性,需要按時間維度排列。但是如果產品的消息類型較多,可通過分組合并或者分 tab 的方式提升用戶觸達消息的效率。

          騰訊出品!消息通知系統設計指南

          分組合并消息列表

          騰訊出品!消息通知系統設計指南

          分 Tab 合并消息列表

          對于通知類型復雜的系統,還可使用二級列表的形式對消息進一步分類展示,如微信及支付寶,由于其包含大量第三方服務,消息復雜,均設置了二級消息列表幫助用戶分類查找消息。

          騰訊出品!消息通知系統設計指南

          二級消息列表

          3. 消息卡片

          消息列表中的卡片有兩種樣式可選,一般在一級消息列表使用小卡片樣式,讓用戶有更高的瀏覽效率。大卡片樣式則用于二級消息列表,或當前應用的消息數量較少時。

          騰訊出品!消息通知系統設計指南

          消息卡片應用示意

          4. 消息中心設置

          一般位于消息中心列表頁右上角,若可設置項較多,則提供設置入口在二級頁設置。一些常用的消息設置項如下:

          全部已讀:對于消息數量較多,且未讀態會影響 badge 的展示時需要提供該設置項。點擊后設置列表消息項全部已讀。

          發起對話:若系統包含通訊功能,一般會在消息類表頁提供發起對話的快捷入口。點擊后跳轉到通訊錄或好友列表。

          設置通知提示方式:提供按消息類型設置某些通知項的接受渠道、接收時間段、各渠道之間的已讀聯動等,如微博;或者讓用戶選擇消息通知的精確度,是否包含具體信息,如微信可接收“您收到了一條信息”的模糊消息。

          打開消息推送權限:一些應用有一些狀態更新或重要的提醒需要用戶在系統設置中打開當前應用的通知權限,會包含提示用戶打開通知的功能。這些提示需要在用戶進行了如“辦理事項”、“上傳狀態”等發起流程的操作后提示。不建議在用戶啟動 App 時就彈窗提示打開通知。

          總結

          本文是對消息通知系統設計的初步介紹,希望能幫助到新手產品、交互、產品體驗設計師快速了解消息通知系統的內容盤點與消息中心的設計方法,制定及時、高效、完整的消息通知系統。

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

          文章來源:優設   作者:騰訊設計 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          如何從零開始創建新的設計原則?

          資深UI設計者

          本期提綱:

          • 為什么我們需要新的設計原則
          • 制定新的設計原則
          • 推行新的設計原則
          • 新設計原則的影響

          在本文中,我們將分享如何提煉出設計原則,并在團隊中引推廣實施的。

          去年,我們一群人聚在一起探討了一個棘手的問題:隨著 Spotify 的不斷發展,我們如何在產品迭代中保持高水平的設計質量?

          經過研究和討論,我們確定了一個方向:為了提高質量,我們需要清晰、有用的設計原則。一方面,我們認為只有定義了 Spotify 的設計原則是什么,才能夠幫助團隊評估他們是否以 “Spotify 方式” 進行設計。另一方面,我們還希望幫助設計師在討論設計目標和設計評審時使用相同的評價標準。通過不斷更新的設計原則可以實現保持高水平設計質量的目標。

          為什么我們需要新的設計原則

          為了解決設計無法標準化的問題,2013 年,Spotify 制定了最初的設計原則:內容優先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實、恰如其分,這些原則讓設計師們在輸出和討論方案的時候有方向可循。有了設計原則之后,我們的設計方案在字體、色彩、圖片、板式、信息架構和交互方式等方面都具備了一致性,即使不是設計師也能夠對我們的設計產生共鳴。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 在 2013 年制定的設計原則:內容優先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實、恰如其分。

          但設計原則是需要與我們的業務目標一起向前的,到了 2020 年,Spotify 已經發生了很大變化,我們在播客上加倍發力,我們為消費者提供的不僅僅是音樂,而是包含廣播、故事等更多元的音頻形式;我們服務的對象,不僅僅是聽眾,還有藝術家和廣告商;我們的設計師團隊也不斷的壯大,發展到現在已經有近 200 人。

          看著 2013 年制定的設計原則,我們問自己:這些設計原則對于我們現在的設計是否還是正確的?Spotify 的設計師們是否真的意識到這些設計原則的存在?答案是否定的。

          我們經過對現有設計原則的討論,發現了以下三個方面的問題:

          1. 無法滿足不同內容的需求:原本的設計原則,更專注于消費者的音樂體驗,然而隨著 Spotify 的發展壯大,我們的產品不僅僅是音樂,而是包含更多內容的音頻,但這些原則似乎并不適用于我們設計的所有內容。

          2. 概念容易混淆:比如 “lagom” 和 “do less”,都有簡約的、恰到好處的意思,在表意上存在重疊使得它們很難分辨,在評估設計方案時,我們很難確定從哪一方面評估我們的工作。

          3. 數量過多的原則很難記?。焊鶕覀兊恼{研和設計師的反饋,設計師們往往記不住這些設計原則的內容,這也就導致了他們無法很好的在設計實踐中應用。

          簡而言之,舊的設計原則需要更新。

          制定新的設計原則

          去年,我們工作組的十幾名產品設計師和用戶體驗設計師,在一個協作研討會上聚在一起討論如何制定新的設計原則,我們希望團隊中的每個人都參與進來,而不是讓一個人來決定 Spotify 的設計原則應該是什么。

          我們通過以下三個問題,指導我們制定新的設計原則:

          • 我們為什么要制定這些設計原則?
          • 它們是給誰用的?
          • 它們將如何使用?

          經過一番激烈的辯論,我們得到了答案:

          • 設計原則是為了幫助設計創造,并為評估設計成果提供衡量標準。
          • 設計原則的核心對象是我們的設計師。
          • 在設計創作過程中設計可以幫助產品設計師做出設計決策;在評估設計時,提供統一的衡量標準,避免以短暫流行風格進行判斷。

          然而真正的挑戰是應該怎樣定義新的設計原則。我們在設計時應該追求什么樣的價值觀和設計屬性?產品應該傳遞給用戶什么感受?

          對于這些問題,每一位設計師都有自己的觀點。我們讓所有人將自己對 spotify 的設計原則進行定義,并將這些想法寫在便利貼上。我們將這些想法進行總結分類,為了避免重復性的概念,我們把相似的概念歸為同一類別,并且讓大家對這些觀點進行具體的描述,來幫助大家理解他們想要的設計原則。最后,我們將所有的想法都匯集在一個巨大的矩陣圖中,通過設計師們的投票來幫助我們縮小范圍,確定大家認為合理的設計原則。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          帶有便利貼的矩陣圖

          通過上面的方式,我們提出了新原則的草案。同時我們也通過與用戶溝通,進一步了解用戶對于 spotify 設計的理解,根據這些反饋,我們進一步在設計原則的概念細節上進行調整后,確定了新的 Spotify 設計原則:相關性、人性化、統一性。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 新設計原則:相關性、人性化、統一性

          1. 相關性

          把每個用戶作為一個獨立的個體來看待。

          Spotify 是為每一位用戶量身定做的,我們希望 Spotify 具有個性化的感覺。為了給用戶提供專享的感受,在設計過程中,我們認真思考我們所展示的內容是什么、展示給誰以及在什么背景下呈現。簡單來說,我們會在正確的時間提供正確的信息給特定的人,我們不想要 “一刀切” 的體驗。

          那么我們在具體的實踐中,是怎樣體現 “相關性” 的設計原則呢?

          舉個例子,同樣是歌曲 “pure seduction” 的封面,歐美國家的用戶看到的畫面可能是激情熱吻,但對于相對內斂的東南亞國家用戶,封面的內容就會以更加含蓄柔和的方式呈現。同樣的,印度用戶大多數更喜歡聽印度語的歌曲,我們在一開始就讓他們選擇自己喜歡的音樂語言,使用戶得到與自己具有 “相關性” 的音樂內容。

          我們尊重不同的文化和社會環境,我們希望每一個視覺呈現都能夠適合當地用戶,能夠被當地用戶所理解。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 播放列表封面和注冊頁面的示例

          2. 人性化

          人性化的設計是可以與用戶交流的。

          Spotify 是依賴于推薦算法的產品,但這種技術也是基于人的喜好的。Spotify 像人類一樣,也會有情感,有自己的思考方式。我們希望用戶在使用 Spotify 時,可以有一種 “和人交流的感覺”,如果我們把 Spotify 設計得太工具化,就會失去這種感覺了。我們的每周推薦歌單封面,沒有選用精致的照片,而是直接使用用戶的個人頭像,通過這種方式我們告訴用戶 “這是只為你一個人準備的歌單”,還有什么比自己的個人形象更加 “人性化” 呢?再舉個例子,在 Spotify 的兒童版本中,我們將創建個人資料的行為變成了創建有趣的卡通角色的過程,“人性化” 的虛擬形象使 Spotify 與兒童用戶更流暢的交流。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Discover Weekly 封面和 Spotify Kids 應用程序的示例

          3. 統一性

          統一性可以使線下產品和線上產品實現品牌感。

          我們的線上和線下產品的設計風格都應該具有統一性,即使沒有過多的說明,人們看到一眼也可以知道這是 Spotify 的設計。統一的設計風格,可以讓用戶對于我們的產品有一定的熟悉感和信任感。正因如此,我們沒有完全拋棄 2013 年制定的的設計原則,去創造新的方向,而是根據之前的設計原則進行修改和優化。為了實現品牌的一致性,我們希望我們所制定的原則是可以在不同設計對象和設計場景中復用的。

          下圖中是一個營銷活動的案例,無論是線下的廣告牌、宣傳海報,還是線上的活動頁面,我們的設計風格都保持了統一性,無論你在線下還是線上看到,你都會知道這是 Spotify 的產品。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 營銷活動的示例

          推行新的設計原則

          提出設計原則是一回事,讓每個人都參與進來完全是另一回事。如果我們想讓新設計原則持續運行下去,就需要一個執行計劃。

          在推行設計原則的初期,我們在一個設計團隊的工作坊中試運行了新的設計原則。通過觀察設計師在實際工作過程中,是否由于運用了新的設計原則更好的完成了設計實踐,幫助我們判斷這些原則是否是真的發揮作用。之后,我們將這些原則納入現有的設計活動中 —— 例如,在全員設計會議中,介紹這些原則,并將它們添加到我們的設計手冊和新員工的入職流程中。幾個月后,我們與 Spotify 的所有設計團隊都開展了一系列工作坊。這樣,每個設計師都可以學習如何將設計原則應用在工作實踐當中。

          在工作坊中,我們將設計項目中應用設計原則的案例記錄下來,比如,以用戶的名字來命名歌單,建立與用戶的 “相關性”。我們將這些設計師們在真實的項目中遇到的案例整理到一起,以便其他設計師看到具體案例時,更好的理解新的設計原則。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          展示如何使用設計原則的卡片

          在推行新的設計原則的過程中,我們發現有兩點值得注意:

          1. 恰當的案例,有助于我們對新設計原則的理解

          口頭上表達 Spotify 的設計原則是 “人性化” 或是 “相關性” 是很容易的,但是什么樣子的設計才是 “人性化” 和 “相關性” 的呢?在推行設計原則時,用例子來說明這些原則的含義非常有用,案例越多越有利于我們對這些抽象設計原則的理解。

          2. 周邊產品可有助于設計師理解和記憶新的原則

          設計原則也可以通過更多的周邊產品,如海報、貼紙或其他產品去推廣。理解新的設計原則和理念需要很多時間,周邊產品可以幫助團隊理解和記憶這些原則。為了推行新的設計原則,我們已經開始設計相關的海報、文具等周邊產品。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          設計原則的在線下產品應用的示例(由 deepyellow 和 dribbble 圖形組成的樣機模板)

          在沒有 “官方” 的周邊產品時,一位設計師把設計原則作為自己的筆記本電腦桌面背景,這也是一個很好的理解設計原則的方法。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          帶有壁紙的筆記本電腦,壁紙上寫著設計原則:相關的、人性化的、統一的。

          新設計原則的影響

          我們推出了這些設計原則后,有什么變化呢?

          1. 新的設計原則更容易被大家記住和應用

          現在,大多數設計師都意識到了 Spotify 有設計原則。根據我們的設計行動小組最近的一項調查表明,設計師們已經了解了 “相關性、人性化和統一性” 的設計原則,并且在設計過程中,設計師們也會考慮這些原則。這表明新的設計原則與我們之前的六項原則(內容優先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實、恰如其分)相比,更適用且更容易被記住,也更容易在實踐中應用。

          2. 為設計評審建立了統一的標準

          設計師有時在設計評審時會參考這些原則,但在這方面還有有待改進。在評審期間,設計師仍然需要有意識的參考設計原則。隨著時間的推移,我們希望這成為設計師的本能反應。

          我們開始制定新的設計原則時,目的是幫助設計師提升設計質量。那么我們的新設計原則是否使設計質量有所提升呢?現在說還為時過早。但我們希望 “相關性、人性化和統一性” 可以傳達出 Spotify 的產品目標,這些原則能夠不斷提醒我們做得更好。

          總結

          設計原則不應該是一成不變的,設計原則需要根據我們的產品目標的不斷發展進行優化更新,不斷適應新的設計環境和設計對象,以持續保持高質量的設計輸出。

          好的設計原則應該是更容易被大家記住,并在工作實踐中應用的。好的設計原則可以幫助我們在工作中做出正確的設計決策,在設計評審中建立統一的標準。相比設計原則的制定,設計原則的推行也同樣重要,合理的推行方式可以使設計師真正的理解設計原則,并能夠像本能反應一樣在設計實踐中應用。

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

          文章來源:優設    作者:騰訊設計

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          如何讓你的設計更具有說服力?

          ui設計分享達人

          對于一家做項目型的公司而言(今天主要講的是項目性質的設計工作,產品可以繞道哦),時間就是成本這句話體現的淋漓盡致?;旧辖o到UI設計的時間,是少之又少,那么如何在一個有限的時間里,設計出優秀的作品呢?這是接下來我想跟大家一起討論的~


          我們都知道用戶體驗五要素(戰略層、范圍層、結構層、框架層、表現層),這五大點是一個個遞進的過程,是一個從初步的想法到最后落地的過程。也就是說我們最后看到的表現層(UI界面)是如何做出來的,都需要靠前面一點點的去研究、細化、分析。所以這么一個強大而繁瑣的過程,我們如何要在一個有限的時間內去完成,下面跟大家聊一聊我在實際工作中的例子。


          一、溝通


          溝通是一切事物的前提和基礎,這個溝通一定是要跟客戶的直接溝通,不管是遠程還是面對面也好。中間人的傳達會加上個人思想理解的轉化,到你這里就不再是一手消息,也許就不會那么準確。拿到一個項目之后,我們要了解項目,所以需要對項目的背景、目標用戶、產品目標、核心競爭力進行分別分析。


          項目背景

          為什么設計師的背后總是有一群指點江山的人,因為我們的設計沒有被體現在產品上,只是表層,每次給別人解釋設計理念的時候總是說“我覺得這樣好看”、“我認為這塊應該用這個顏色”,卻沒有說出這個項目本身想要表達的是一個什么理念。

          本次項目是需要把手機版的內容改版成PC端,原有需求邏輯不變。那么問題來了,現在是一個移動互聯網的天下,為什么客戶卻需要將手機端的內容移到PC上呢?因為這個產品的使用環境之一就是在工作中,試想一下,工作中一直拿著手機刷來刷去,不知道的人還以為你在劃水。考慮到用戶使用環境的因素,就需要有PC端的設計。


          目標用戶

          產品的核心是用戶。所以一切要從用戶的角度出發,做用戶滿意的產品。在用戶調研這塊,常見的用戶分析有:用戶畫像、一對一訪談、問卷調查、焦點小組、眼動測試、測評以及埋點數據分析,但是項目型工作周期短,時間緊,沒有那么多的成本去做大量的分析,所以我們基本上采用三種方式去解決這個問題。1、與我們的客戶(甲方)去溝通,他們肯定更了解自己的用戶群體;2、通過現在市場上比較知名的網站(艾瑞網)中提供的大數據分析出的結果;3、如果身邊有這種用戶群體可以對他們進行簡單訪談。通過以上三種辦法也是可以得到一個較為準確的調研數據的。

          在跟客戶的溝通中了解到,我們的主要用戶是基中層領導,目的為提升領導力。下面會有我對這部分人群的用戶畫像分析。


          項目目標

          知己知彼,要了解我們此次設計的主要目的是什么?需要解決什么問題?

          因為這已經是一個已經上線一年的產品,我在跟客戶的溝通中很明確了目前有兩大問題:第一是:如何提高完成率;第二是:國外市場用戶使用不習慣。

          這兩個信息很重要,為后面的設計提供了一個明確的方向。



          核心競爭力

          這是體現我們產品優勢的地方,我們需要盡量的把產品強有力的能力展現出來,從而獲得目標用戶的信賴。把產品的能力、優勢,可以給用戶帶來的價值,要體現在比價明顯一些的地方。

          此次是一個本身有強大的體系支撐,有一個成熟的結構,在此基礎上開發研制的一套產品,所以產品的目標用戶量,獲得的成就就可以直接展示在首頁上,并且把正在學習人數或者為多少人帶來成就都體現出來。讓用戶感受到有這么多人都在努力,有這么多努力的人已經完成了自己的目標。


          二、分析


          我首先把手機版的功能都體驗了一遍,隨時記錄了在使用過程中不喜歡的地方并且可以優化的點,這都是點點滴滴的隨記,可以為后面設計中提供一些方向或靈感。根據上面了解到的信息。

          可以得到此次設計的主要方向,第一:針對目標用戶進行用戶畫像分析,以此來確定如何才能更好的提升完成率;第二:針對國外同類產品分析,對國外市場用戶使用不習慣的了解,并且還要結合國內市場優化交互體驗。


          用戶畫像分析

          在上面一個階段了解到我們的用戶群體是基中層領導者。根據市場數據分析,一般基中層領導者主要以男性居多,年齡大概在28-35歲之間,以需要提升領導力為目的,那么從這幾個特征中我們看出,這些人都有哪些特點呢?首先28-35歲的年齡段,基本上是已經結婚的比較多,并且有很大一部分人群也有了孩子,這個年齡段的孩子還比較小,基本也是在2-6歲之間較多。對于這種類型家庭而言,無論是在工作上還是生活上都較為忙碌。并且因為是領導者的原因,時間上也較為分散,一天下來沒有辦法集中去做一件事情,開會、匯報、溝通需求、分布任務等。由于不像在學校,事情太多也太雜,很多時候沒有辦法安心去做一件事情,導致規劃能力不強,需要借助平臺可以有個推力。



          國外同類產品分析

          其次是針對國外市場用戶使用不習慣這個問題,我對國外幾個大型的相關網站做了了解。edX、Coursera、Udacity這三個網站是國外市場使用較多,知名度較大的幾個網站。分別從內容上和視覺上進行分析,去了解國外市場的設計方式,用戶使用習慣等。



          從以上的分析中最終得出了以下三個結論:

          1、操作習慣:這個與國內的差不多,都是從上到下,從左到右呈Z字形排列布局的方式,視覺的落腳點都會在畫面的左上方,所以我們在設計的時候,要把重要或者想要表達的內容放在這個位置,使用戶進入頁面后就可以很快看到它。

          2、采用Complexion Reduction設計語言:將標題放大,制造視覺上的沖擊力,拉開頁面的層級關系,這種設計方式也是國外較喜歡、較常用的一種設計方式。

          3、視覺風格:國外網站的設計整體留白較多,讓頁面更有呼吸感,頁面上幾乎沒有無用的裝飾性元素,非常簡潔,顏色使用也比較簡單,不會用過多的顏色去擾亂用戶,簡單的設計對于教育類的行業來說,可以減少視覺疲勞,讓眼睛放在有用的事物上去。



          通過以上對用戶畫像和國外同類產品分析,總結出:我們要從多維度考慮,以優化交互為目的讓頁面更有層次感,從而給用戶帶來輕松的體驗感。是這次設計的核心思想。

          1、從用戶的時間分散且忙碌的特點,得到我們需要盡量優化交互邏輯,減少用戶學習成本,讓用戶可以快速找到自己想要的東西;并且要讓用戶在本身就較為忙碌的情況下盡量輕松的學習,不要再給用戶增加壓力。

          2、通過用戶規劃能力不夠強的特點,得到我們可以給用戶定制一個“學習計劃”,幫助用戶規劃自己的學習能力,并且在學習中增加互動性,比如隨堂筆記、收藏、標記這種小功能,隨時給用戶帶來互動,讓用戶更有參與感。

          3、從國外同類產品分析中總結出,整體國外市場的喜好是簡潔、少裝飾、以大面積留白來增加頁面的呼吸感,采用盡量簡單的卡片式的設計方式來拉開頁面的層級關系。




          三、設計


          現在就到了設計階段了,上面了解分析了那么多,給我們設計提供了那么多基礎材料,這個時候就派上了用場。上面的最后提到說:我們要從維度考慮,以優化交互為目的讓頁面更有層次感,從而給用戶帶來輕松的體驗感。接下來我就要講述,如何在設計去運用了。


          輕松-這個很重要。

          如何讓用戶在生活和工作那么繁忙的情況下,還要努力的去學習,努力的提升自己呢?所以我們這里就采用插畫的形式,插畫像是動畫片,讓我們回到了小時候,并且融入了AI人機對話,沉浸式的體驗更是可以讓用戶在一個輕松的氛圍內完成自己的學習。


          增加互動性

          原有手機端的功能缺少與用戶之間的互動,看視頻就是看視頻,做題就是做題。讓用戶在使用的時候不能按照自己的意愿去支配,這種感覺不好,一定要讓用戶有參與感,讓用戶占到主導性,而不是那么強硬的讓用戶跟著你走。所以在課程這塊的設計上第一采用了全屏的方式,讓用戶不用返回,在當前就完成本階段的所有的課程,增加效率。第二在原有的功能上增加“課堂筆記”、“收藏”和“學習計劃”等一些小功能,讓用戶隨時按照自己的意愿去學習,實時跟產品進行互動。



          層次感的表達

          教育類型的網站,頁面相對來說比較干凈、整潔一些,可以有效減少用戶視覺疲勞,避免不必要的干擾元素出現影響用戶的體驗。

          在本次的設計中,學習了國外同類網站的設計風格,采用卡片式的方式,將元素與標題包裹在一起,有效與其他元素進行區分,增加投影設計,讓頁面更加有層次感和空間感。標題上面采用了Complexion Reduction的設計語言,將標題放大,制造視覺上的沖擊力,拉開元素之間的層級關系,豐富頁面的設計。這也是國外網站較喜歡的一種設計方式。





          四、走查


          設計完成之后,切圖交到開發手里之后,不能算就完成了,最后走查這一步很重要,要保證實現出來的效果跟設計稿保持一致。不然前面說的再多,設計的再炫都是白搭,實際使用的用戶可不知道你前面都做了什么,他只感受他現在感受到的。

          我一般的方法是用Word的方式,將有問題的頁面截圖并標記出來問題點,并且按照菜單進行分類。這樣開發對照看起來就特別明確,只用文字不配圖的表達都是耍流氓,誰知道你說的是哪個頁面的哪個點。用Word進行歸類最重要后面追蹤也特別容易,可以很明確看到你哪塊問題還沒有修改,不用再反復提交。



          總結一下:

          一般我的設計流程就是:了解-分析-設計-走查,因為不是產品性質的,所以最后的迭代或者驗證這一步驟就會不那么重要,如果是做產品型的后面的驗證也會是非常重要,因為是項目型的所以這里就不多做說明。以上就是我個人在設計中的案例分析,大家有想法的可以多溝通,多交流。

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



          文章來源:站酷   作者:醬油不咸

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          設計模式|合理預設:如何為用戶提前設置好默認值

          ui設計分享達人



          What 是什么

          「合理預設」是指系統提供默認選項,這些默認選項不需要用戶做任何操作,可以節省用戶完成表單的時間和精力。

          這些默認選項來的數據源包括: 先前輸入的會話數據、來自用戶帳戶的信息、當前位置、當前數據和時間等等。


          案例 釘釘的“代辦事項”設置功能,可以自動抓取到語句中的時間信息,自動幫助用戶默認填寫時間,減少用戶的操作時長:

          相關模式 :語句填空


          Why 為什么

          系統通過提供合理的默認信息和答案,分擔了用戶思考和輸入信息的工作,減少時間,提高效率。

          而就算預設信息不是用戶想要的,也為用戶提供了一個示例來說明答案應該是什么樣子的。這一點也可以節約用戶幾秒的思考時間,或者避免輸入錯誤的信息。


          另外,合理的默認值還可以幫助用戶應對一些“難題”。如果用戶跳過了一塊字段,那么可能是這個問題沒有引起他的注意。用戶可能是不理解這個問題、或是默認值的含義。輸入答案,選擇值,或單擊按鈕的動作會迫使用戶有意識地面對這個問題。


          比如疫情期間,大部分公司都需要做健康打卡,下圖中有一些選項是直接填了默認值,但是有些就沒有填。比如下圖的左圖中,有關于“請假未到崗”這些問題,因為沒有填默認值,用戶就會對這個問題有印象。然后比如“今日是否有發熱癥狀”,“是否有咳嗽”這些,因為被系統默認填了,用戶很容易就忽略過去了。

          所以一些刻意希望被關注的問題,其實最好不要提供預設值,這樣可以讓用戶感知到這個重要信息的存在,進而加深對內容的認知。



          When 什么時候使用

          當產品要求用戶提供類似表單的信息輸入(例如文本框或單選按鈕),并希望減少用戶填寫時長時,可以使用提供默認設置。


          但是當問題的答案會很敏感或是與政治相關時,最好不要提供默認值,例如密碼、性別或公民身份等。最好也不要為用戶擅自訂閱非必要的內容信息,如“請給我發送廣告郵件”等。


          使用條件

          · 用戶需要做類似表單的信息輸入操作;

          · 系統希望減少用戶需要做的工作;

          · 系統希望確保用戶填寫的準確性和一致性;

          · 可能用戶并不知道或者不關心答案,不需要引起用戶的重視;

          · 問題的答案不屬于敏感信息或是與政治無關。


          How 如何使用

          設定「合理預設」有兩種普遍的用法:

          1、使用一個通用的、常識性的、滿足大部分用戶需求的默認值,預先填寫輸入框;

          2、可以調用用戶早些時候提供給系統的信息來動態地設置默認值。例如,某個用戶提供了一個中國的郵政編碼,系統可以從這個編碼推導出用戶所在的省,甚至市和區的名稱。


          除此之外要注意幾點應用原則:

          · 使用預設的默認值不僅僅是為了防止用戶留下空白的輸入區域;

          · 要充分的了解你的用戶,默認值的設定要有絕對合理的理由 —— 否則,系統會給所有人帶來額外的工作量。


          Example 案例

          案例一:唯品會小程序在購買服飾類選擇 SKU

          用戶需求:購買服裝時需要選擇尺碼


          唯品會小程序在購買服飾類選擇 SKU 時,每個尺碼點擊后會顯示對應的衣服參數,用戶不再需要去商品描述中的尺碼表格中再找,也可以是設置好自己的身材數據,平臺會默認選中適合你的尺碼。

          案例二:螞蟻鏈實人認證表單

          用戶需求:需要根據表單內容填寫和上傳文件

          螞蟻鏈實人認證在上傳證件時會根據用戶所在國家和地區,幫助用戶默認選擇概率最大的選項,不需要用戶自己操作。

          案例三:Photoshop 創建新文件

          用戶需求:創建新文件,調整畫布大小

          在 Photoshop CC 中創建新的圖像文件時,默認情況下會從操作系統剪切板開始。這里的假設是用戶剛剛創建了一個屏幕截圖,并且正在編輯該圖像。因此,Photoshop 在剪貼板中獲取圖像的寬度和高度,并使用它們來預先填充創建新文件的尺寸,這是一種節省時間的聰明方法。不用擔心圖像和畫布會有尺寸不匹配的情況。


          當用戶想要調整畫布大小時,原先畫布的長寬尺寸會預設出現在新的畫布大小里面,方便用戶進一步進行尺寸調整。


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



          文章來源:站酷    作者:Ant_Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          為什么用戶訪談需要關注用戶目標

          ui設計分享達人

          用戶目標與用戶調研的關系

           

          • 什么是用戶目標

          設計要以用戶目標為導向,那用戶目標是什么呢?目標不等于任務或活動。目標是對最終情況的預期,而任務和活動只是達成一個或者一組目標的中間步驟。

           

          舉例:從家中抵達公司為目標。可以使用任何一種通勤方式:公交車、地鐵、打車、徒步、自行車等等,這些通勤方式是活動,使用并完成通勤方式的每一個步驟都是任務。

           



          • 為什么要關注用戶目標

          關注用戶目標方便建立更具差異化的用戶畫像,對用戶畫像劃分有顯著作用。用戶在完成目標時會決定通過哪些任務達成目標,完成任務會影響用戶行為,最終設計根據用戶行為做出優化,達成用戶體驗的提升。

           

          因為用戶目標不同,完成的任務也不同,具體的用戶行為也會有更大的差別,設計方案也需要不斷的進行優化滿足不同的用戶群體。

           

          用戶目標如同透鏡,設計師必須通過目標來考慮產品的功能。產品的功能和行為必須通過任務來處理目標,通常任務越少越好。必須牢記,任務只是達到結果的手段,目標才是最終的目的。 

           

          不關注用戶目標,只為實現商業目標的產品或商業服務,都很難滿足用戶的使用體驗。例如便利商店為了用戶成為會員從而達成商業目標,在結賬環節進行復雜引導設計,這樣的設計方案使結賬任務增加,因此用戶行為增加而又復雜,增加完成目標的困難度,最終失去了用戶體驗。

           

          • 如何關注用戶目標

          通常我們無法直接詢問一個人的目標是什么,他要么無法清楚地表述出來,要么表述得不準確,或者沒有實話實說。人們完全沒有回答這種自省式問題的準備。因此,設計者和研究人員需要認真地從觀察到的行為、對他問題的回答、非言語暗示,以及諸如書架上的書名等,環境的暗示中重新構造目標。人物模型建模中的最關鍵任務之一是要找出目標,簡明地表述出來: 每個目標表述成一個簡單的句子。     

           

          • 用戶目標的分類

          在用戶調研中了解用戶目標是非常重要的,但是用戶目標也有很多不同,可以大致分為三類:

           

          1、體驗目標是本能的體驗產品,即用戶想要從產品或商業服務中感受什么,以此為調研可以幫助我們優化產品的細節功能;

          2、最終目標是用戶操作產品的行為,即用戶想要從產品或商業服務中做什么,以此為調研可以幫助我們優化產品或商業服務的流程體驗;

          3、人生目標是個人對期待,用戶使用產品想要成為什么,以此為調研可以幫助我們優化產品或商業服務的價值體現。

           

          下面我將舉例說明三種目標如何使用。


          用戶目標分類

           

          用下廚舉例用戶的體驗目標、終極目標、人生目標是怎樣的,在進行用戶調研時需要注意哪些內容,最終可以對設計方案提供有用的價值。

           

          • 體驗目標的調研

          用戶操作下廚房的本能反應。搜索內容、瀏覽信息、點擊按鈕等操作,這些都屬于體驗目標的行為。在用戶調研中需要對用戶使用產品的行為細節進行調研,了解每一步操作會得到怎樣的反饋,通過調研結果優化產品功能體驗,完成用戶的體驗目標。

           

          • 終極目標的調研

          用戶參考下廚房菜譜完成烹飪。從瀏覽菜譜內容、購買食材、清洗切菜、上鍋烹飪、承盤食用,用戶通過下廚房的菜譜完成每一步任務學習做菜。用戶通過操作產品的行為,會達成一個結果。在用戶調研中,需要完整的了解用戶使用產品的流程,整體流程中完成每一步任務,以及每一步任務下的行為。在設計產品的時需要讓用戶有完整的流程體驗,讓用戶清楚知道每一步需要做什么,順利完成每一步任務。

           

          • 人生目標的調研

          用戶期望使用下廚房學習做菜成為一名廚師。用戶每一次使用產品會希望完成預期結果,最終成為想要的樣子。在用戶調研中需要了解用戶長久的預期,方便了解產品是否可以達成用戶。在設計產品時,產品價值需要達成用戶預期。

           

           圖片來源:www.pexels.com

           

          下面我將使用另一個案例,如何建立訪談提綱,來完成用戶目標的調研。

           

          云筆記案例

           

          • 商業背景

          某設計資源網站有100萬+的注冊用戶,該網站準備在近期開發一款云筆記軟件,用戶是面向廣大的設計師和創意工作者,希望在6個月內完成V1.0的試測產品上線。

          由于云筆記市場上的競爭對手眾多,設計資源網希望能夠出一款具有創新性設計或功能的云筆記,快速吸引一批用戶關注和使用。

          該云筆記的商業目標:用戶量快速增長,增強用戶黏性,并培養一批忠實的付費用戶。

           

          • 產品背景

          碎片化學習已經成為現代人一種常見的學習模式,如何設計一款適合碎片化學習,靈感和idea記錄的云筆記,幫助設計和創意人員進行知識的及時保存,記錄和整理。

           

          • 拆解背景得到設計目標

          云筆記作為創意工作者的工作助手,在碎片化學習大背景下,創造性的完成創意收集,靈感記錄和整理。

           

          • 分析用戶目標

          根據創意工作者通過使用云筆記,達成碎片化學習的目標,分為三類:

          體驗目標——云筆記可能的操作,記錄、瀏覽、整理等;

          終極目標——通過使用云筆記進行碎片化學習,達成階段性學習成果;

          人生目標——通過每一次階段性學習,達成長久的預期結果。

          通過拆解用戶目標分類,了解用戶達成目標要完成哪些任務,從而具體了解用戶做出了哪些行為,用戶行為便于為設計方案作出針對性的指引。

           

          • 用戶訪談大綱

          根據《用戶體驗要素》書中提到設計的順序“戰略層、范圍層、結構層、框架層、表現層”,所以在用戶調研同樣需要符合設計順序進行訪談“人生目標、終極目標、體驗目標”。

           

          了解個人特征——人生目標

          個人身份認同

          職業狀態變化

           

          碎片化學習狀態——終極目標

          碎片化學習習慣

          碎片化學習記錄

          學習內容回顧

          學習內容實踐

           

          云筆記的使用——體驗目標

          云筆記記錄操作

          整理回顧與輸出

          使用場景

          常用功能

           

          完整訪談提綱:https://shimo.im/docs/rhXhkKtyxTWgHYYC/ 

           

          • 用戶分類

          為了關注并區分用戶目標,訪談時需要層層剝繭,對用戶的學習習慣、學習場景、學習計劃,學習過程中使用云筆記的各種行為、需求、偏好等進行詳細的提問,由淺入深的訪談后最終了解用戶學習的目標。

           

          訪談過后根據設計目標選擇用戶終極目標進行用戶群體劃分,劃分后的用戶群體有著很大差異性的用戶行為,這些用戶行為將在設計方案中做出重要的指引。

           

          滿足終極目標即可完成初期的產品目標,經過不斷的迭代設計,滿足更多的終極目標即可滿足人生目標,達成產品的商業目標。當然,這些需要良好的體驗目標作為基石。

           

          • 設計建議

           

          符合用戶碎片化學習的目標。碎片化學習到云筆記的使用路徑為:學習目標——瀏覽資料——記錄材料,目前的市場流行云筆記產品,只關注瀏覽與記錄的用戶過程。云筆記設計方案需要滿足兩類用戶群的不同的行為、偏好、痛點需求,就可以完成不同目標的用戶群體,從而滿足適合碎片化學習產品價值,最終完成增強用戶粘性的商業目標。

           

          了解行業對用戶訪談的幫助

           

          任何行業都有自身的發展史、環境、現狀,有時我們不需要自身分類用戶目標有哪些,只需根據現有行業材料,即可完成用戶訪談的部分工作,達到事半功倍的效果。

           

          • 游戲玩家目標的劃分

          針對游戲產品與衍生產品的設計,需要對游戲玩家進行訪談了解游戲玩家目標,可以使用現有論文結果,對訪談結果進行整理。

           

          在《HEARTS, CLUBS, DIAMONDS, SPADES: PLAYERS WHO SUIT MUDS》論文中,論文對游戲玩家的目標展開了深度的探索,最終將游戲玩家分為四類:殺手型、社交型、探索型、成就型。直接使用論文中的結論可以方便我們快速了解玩家游戲目標,完成用戶調研。

           

          殺手型玩家目標是制造麻煩。

          游戲中的行為會具有十足的攻擊性,對其他玩家制造麻煩。例如魔獸世界中做出對立陣營的設定,并且在劇情與游戲中給予對立陣營制造沖突,同時給予獎勵,用來完成對殺手型玩家的游戲目標。

           

          社交性玩家目標不在游戲本身,而是在于游戲帶來的社交體驗

          具體行為和好朋友一起打游戲,游戲打得好不好無所謂,重要的是和朋友在一起;或者在游戲中任何網友,和網友在一起游戲,度過每一次的游戲時光。例如英雄聯盟的“雙排、三排、五黑”的游戲玩法。

           

          成就型玩家目標是挑戰,比如世界第一或通關速度挑戰等。

          具體行為是獲取積分與獎勵,從而挑戰更難的游戲關卡等。所以在針對成就動機的游戲玩家,需要做出具有挑戰性的游戲難度帶來的榮譽感。例如游戲成績榜單,競賽冠軍等設置。

           

          探索型玩家目標是體驗游戲的所有。

          具體的行為會是收集道具,體驗不同的游戲玩法,發現設計師留下的彩蛋。跟據這樣的游戲目標,我們可以在游戲中做出相應的題樣。例如收集道具、成就系統、更多的探索空間等。

           

          • 實際案例

          曾經參加游戲社區優化設計比賽,在用戶訪談中直接使用論文結果,使用戶訪談完成極為高效,用戶訪談結果極為豐滿。

           

          根據游戲玩家目的進行用戶群體劃分,在設計方案中提供滿足用戶目標的功能設計——殺手型用戶給予游戲快速攻略,社交型玩家給予開黑交友。

           

          總結

          用戶訪談是一種用戶探索方法,為了尋求用戶需求、動機、痛點等,而不是一組組冰冷的數據,用戶訪談可以讓設計師真正理解用戶,讓設計方案有血有肉。

           

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



          文章來源:站酷   作者:zhiking

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          一篇文章帶你深入了解“B端C化”的設計理念

          ui設計分享達人

          中國互聯網公司的迅速發展正在推動著整個軟件行業的審美革命,在C端產品市場逐漸飽和的情況下,互聯網大廠正在將資本逐步轉移到B端市場的廣闊藍海中?!盉端C端化“的設計理念也應運而生,認為可以用C端的模式和思維來進行B端產品的設計。 


          二、背景


          除了剛剛有說到的資本慢慢向B端市場的藍海轉移,還有一點就是中國互聯網環境的迅速發展,智能手機的大范圍普及,工作人群的年輕化,使得人們已經熟練的掌握了各種軟件的使用,并且在快速迭代的產品中慢慢變得挑剔、謹慎。 


          并且不斷優化迭代的互聯網軟件產品也在無形中為用戶完成了底層認知的搭建,一些功能、操作、交互邏輯已經深入人心,用戶也已經被教育成了"高玩"。 
          所以如今一些新型B端產品的設計理所應當的在用戶體驗五要素中最貼近用戶的結構層、框架層 和表現層中與一些C端產品在一定程度保持了一致,這種設計理念其實也很好的解決了傳統軟件的復雜、門檻高、難用等痛點,很大程度降低了用戶的認知成本和學習成本,把高效、簡單、易用的工具帶到大家的日常工作中。 


          三、對B端C化的理解


          對這個概念的理解我認為是:"B端產品在使用體驗和視覺感受這兩個方面和C端產品接近"。這是我們設計師需要特別關注的,傳統的思維中,大多數設計師會認為B端是給公司內部人員或者商家使用的,只是一個管理系統,并不需要太過于精細,至于體驗也是停留在“能用就行”的程度。但是在我看來不管是C端還是B端,其實它的使用對象都是“人”,應該要遵循人們對于事物的認知和一系列復雜的人體工程學操作習慣。兩者都需要關注用戶在使用時的體驗感受,順暢的使用流程、清晰的信息展示和高效的行為效率,以及有效的引導都能夠快速的幫助用戶完成目標任務。無論是C端設計還是B端設計,滿足這些條件無疑可以給用戶帶來更好的體驗。 


          但是也不能以偏概全的認為C端的設計思維可以完全復用過來。B端產品的場景其實比C端產品還是要復雜的多,應該說是各有各的側重點,思維和設計模式上不能完全照搬,下面我就先說說它們各自的不同處,再舉例帶你看看B端產品在哪些方面可以向C端產品借鑒學習。 


          四、B端C端的不同


          1.使用者不同


          B端使用者多是同一個組織集體,以群體為單位進行協同。比如:老板、部門主管、員工或商戶。而C端使用者相對比較單一,目標用戶群體即是主要使用人群,使用目標、偏好、個性比較明確。 


          2.業務不同:


          B端業務大多數會存在多重維度、場景,使用場景跟業務緊密相關,同一個系統不同角色使用時的業務處理和所關注的數據信息,側重點會有很大的不同,需要全局考慮。不同角色使用產品的流程差異大,需要不同業務上更專業的解決方案。而C端業務一般維度比較單一,業務邏輯相對固定,任務路徑和展示內容比較單一。 


           3.價值主張不同:


          B端注重效率、成本、管控、數據分析等。追求產品的穩定性、業務的增長性,保證產品性能和技術上的安全性。而C端注重用戶的體驗、使用簡單、有樂趣。 


          4.產品思維不同:


          B端產品多數基于服務思維,工具化思維,更加理性;更多的是幫助B端用戶提高效率,完成業務目標。而C端多數為產品化思維,游戲化思維,更感性,更多的是娛樂和情感的滿足。 


          5.產品形態不同:


          B端產品注重業務的梳理,多數會用到圖表、表格、模型,多數產品形態偏向更垂直行業或更專業的面板形態。而C端更注重用戶的感受,會用到很多夸張的動效,炫彩的顏色。 


          五、B端C化在產品中具體的表現


          1.結構層 


          結構層確定各個將要呈現給用戶的選項的模式和順序。結構層是用來設計用戶如何到達某個頁面,并且要考慮他們完成事情之后能夠去哪里。 
          具體在B端產品的表單交付場景下可以體現出,以前的B端表單往往過于冗長,借鑒C端一些注冊場景的設計,把表單拆分成3步內的行為步驟,減少用戶的疲憊感提升體驗。 

          2.框架層


          產品的框架層包括:按鈕、控件、照片、文本區域的位置??蚣軐邮怯糜趦灮撁嬖O計布局的。 
          具體在B端產品的列表頁可以體現出,列表頁中整體的按鈕、文本區域的位置、搜索和篩選的布局設計其實與C端產品中的商品詳情頁是類似的,遵循用戶的閱讀順序和視覺焦點來進行設計。 


          3.表現層


          視覺、聽覺、(觸覺)的體驗設計。多體現在一些情感化的設計也被運用在了B端產品中。 



          六、B端C化未來的設計方向



          反觀現在C端產品的一些設計風格和流行趨勢,有哪些可以運用在B端產品的設計中呢? 

          1.3D化


          B端因為對數據的展示有較強的需求,用戶在使用過程中提高效率的判斷緯度也包括信息數據的獲取效率,而3D的視覺在數據可視化層面有著天然的優勢,可以幫助用戶更快速的理解數據維度所表達的核心價值。近年來網速等硬件設施的升級也為3D化視覺帶來可落地的基礎,設計師也嘗試在產品設計中融入更多的3D化元素。 


          2.情感化


          人們對傳統B端產品的印象往往是覺得它們比較枯燥、呆板的,如今一些新型的B端產品的設計理念也試圖在拋開用戶對于產品的這種既定印象,所以很多產品在往一些娛樂化、IP化的方向嘗試,并且都達到了一些比較好的效果,未來在這方面的思考和嘗試只會越來越多。 


          3.個性化


          B端產品的同質化嚴重,所以B端產品也需要從一些產品定位去定制更加富有個性的品牌基因,可以讓用戶產生對產品的感情,達到從同類產品中能夠脫穎而出的目標。 



          七、總結:



          不管是B端還是C端,目的都是為了解決業務場景中遇到的問題,使用對象都是人,都應該站在“人性”的角度考慮問題,有人說B端產品一般都不注重設計,C端產品的設計更能滿足設計師對美的追求,我只能說它們的側重點不同,C端更注重視覺感受,要做到在視覺表現的感性層面吸引用戶,而B端其實更為復雜,需要做到底層的強大數據處理能力,產品的專業性包括交互、視覺的吸引力,這樣才能從眾多產品中得到用戶的認可并脫穎而出。設計師還需要不斷打磨細節和優化體驗來吸引和留住用戶。 
          所以說“B端C端化”也只是在某些方面通用,但核心側重點不同,不能以偏概全、一概而論,但可以借鑒與參考,B端產品也可以做的很精彩。 

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



          文章來源:站酷    作者:騰訊ISUX

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          詳解|針對某個功能,如何做競品分析和設計優化?

          seo達人


          • 案例    設計需求是:優化一款 B 端產品的「套餐售賣卡片」的原有設計:

          圖片

          △ 某 B 端產品服務購買卡片設計(優化前)

           

          你會覺得這個設計無傷大雅,但也說不上專業。于是設計師參考阿里云和華為云的服務購買卡片:

          圖片

          △ 阿里云服務購買卡片設計

           

          圖片

          △ 華為云服務購買卡片設計

           

          經過了對信息層級視覺效果的比較與思考,設計師最終將設計稿優化為下圖效果:

          圖片

          △ 某 B 端產品服務購買卡片設計(優化后)

           

          這里的 “參考” 并不是簡單的照貓畫虎,而是站在巨人的肩膀上,學習和精進自己的能力與認知。
          今天給大家詳細的介紹下,針對某個功能或元素,如何借鑒和分析競品。有以下幾個方法:
          1. 分析幾乎完全相同的產品
          2. 分析不完全相同的產品
          3. 分析完全不相同的產品

           

          1. 分析幾乎完全相同的產品

          這個方法很好理解,這類產品與你正在設計的產品在功能需求、產品形態、用戶類型等方面都很較大的相似性,也是最容易直接提供解決方案的,比如上文提到的服務卡片設計優化案例。再比如,你在做一款「云盤的登錄注冊頁面」,你可以參考「騰訊云盤」和「華為云盤」等大廠產品的登錄注冊頁面,看看他們的頁面是怎么布局的,提供了哪幾種方式,增加了哪些入口和元素,如何使用顏色和字號等等。圖片

          △ 華為云盤登錄頁面

           

          圖片

          △ 騰訊云盤登錄頁面

           

          2. 分析不完全相同的產品

          如果找不到完全相同的競品,對于不完全相同的產品,也可以分析和借鑒,這就要分幾種情況,需要你對手中的設計任務進行拆解:

          (1)需求相同,但產品類型不同:比如同樣是「云盤的登錄注冊頁面」,如果找不到完全類似的競品,你可以查找包含 B、C 端用戶的其他產品的登錄注冊頁面,取長補短。

          圖片

          △ 雨雀文檔登錄頁面  

           

          (2)結構相同,但應用場景不同:接上面的例子,登錄和注冊頁面本質上用戶填寫表單,產品收集用戶信息。因此你也可以找填寫手機號、用戶名、密碼相關的表單的設計,并不一定是登錄注冊頁面的表單,比如你在寄送快遞時填寫手機號的表單也可以用作參考,也許會提供不一樣的設計思路。

          圖片

          △ 淘寶 App 可以調動系統定位,并提供幾個最有可能的選項,用選擇代替用戶輸入

           

          3. 分析完全不相同的產品

          如果是完全不相同的產品,那學習和分析的是這類產品的設計原則和手法。接上面的例子,這次你可能借鑒的設計就是下圖中「微信通過好友申請」的頁面。

          你會發現在這個頁面中微信將能設置的好友信息都呈現了出來,讓用戶先設置之后,再通過申請,這樣就避免了很多用戶順手添加了好友而忘記設置信息。相比之下在設計登錄注冊頁面,可能也可以根據產品功能和用戶需求,適當將設置項前置。圖片好的設計,在設計思路和原則上,通常也會具備通用性。對于大多數人來說,在很多工作上都要經歷這個過程:抄(指學習) -> 操(指操練) -> 超(指超越) 掌握這幾個過程中的精髓,很重要。

           

          原文鏈接:長弓小子公眾號)

          作者:元堯

          轉載請注明:學UI網》詳解|針對某個功能,如何做競品分析和設計優化?

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

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

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

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



          這6種高級黑配色套路,太絕了!

          seo達人



          圖片

          黑色+白色

          圖片黑色是一個很強大的中性色彩,它有一種極其特殊的色彩語言,它很容易讓人著迷,而且受到各領域眾多設計師的關注。黑色給人傳遞的是一種莊重、神秘、穩重、高端、大氣等等的一系列視覺感受。因此我們在用黑色作為主色調的時候,需要注意產品性格特征,想傳遞什么樣的感受給用戶。圖片
          圖片
          在雜志化版式設計中,黑色和白色搭配出現頻率也是較高,畢竟黑色本身就有一種高級神秘感。當它與白色搭配,更體現極致簡約性格。
          圖片
          圖片
          圖片
          圖片

          圖片

          黑色+藍色

          圖片

          藍黑搭配也是最好看和運用較多的顏色,它們之間組合彰顯沉穩大氣。黑色本身更沉穩,配上藍色整體畫面感彰顯高級時尚。

          圖片

          圖片

          藍黑搭配一般在科技類產品較多出現,因為藍色本身略帶一些科技屬性,黑色本身會有一些沉悶,且藍色也不像黃色那樣高亮耀眼,因此在選擇藍色上適當提升一些明度。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          黑色+橙色

          圖片

          橙色是一種有性格的顏色,當它遇上黑色,在畫面彰顯活力與生機,與藍色不同的是,橙色更醒目與熱情,更有一絲腔調,內斂和張揚得到有效平衡。

          圖片

          圖片

          活力橙色作為暖色調,它不像紅色那樣更霸氣刺激,更純粹的多了些許陽光的溫暖,在不同層次明暗橙的對比演繹出柔和的色彩變幻以及熠熠閃光的細微差別。

          圖片

          圖片

          圖片

          黑色+綠色

          圖片

          綠色在設計圈可謂說是一直都挺火,綠色與黑色搭配可以中和黑色的沉悶,還有一種清新透亮的感覺,如果是和亮綠搭配,更有一種酷酷的潮流感。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          黑色+黃色

          圖片

          黑黃搭配,極視覺沖擊力,既能給人活潑奔放的味道,同時又有著一絲內斂與沉穩。很多設計中經常看到黃黑組合,黃色在黑色的存托下,顯得格外時尚。

          圖片

          圖片

          圖片

          圖片

          圖片

          黑色+紅色

          圖片

          紅色與黑色的配搭,在設計界也是運用較多的經典顏色組合。黑色的神秘而高級,略帶一絲沉重,配上熱情奔放的紅色,締造了一種無與倫比的時尚,成就了一種永恒的經典。

          圖片

          圖片

          圖片

          在使用紅黑搭配時,注意紅色使用占比,以及飽和度,避免過于高亮的紅色。一般在黑紅搭配過程中,其實都少不了白色在其中。

          圖片

          圖片

          原文地址:功夫UX(公眾號)
          作者:功夫UX
          轉載請注明:學UI網》這6種高級黑配色套路,太絕了

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

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

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

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


          echarts-x軸 y軸配置(字體顏色,線的顏色,分割線,y周單位顏色)

          前端達人

          
          
          1. //var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue
          2. var myChart = echarts.init(document.getElementById("echart-twoline"));//jquery
          3. var option = {
          4. tooltip: {
          5. trigger: 'axis',
          6. axisPointer: {
          7. type: 'shadow'
          8. }
          9. },
          10. legend: {
          11. data: ['計劃勞務資源', "實際勞務資源"],
          12. //align: 'left',
          13. right: 10,
          14. textStyle: {
          15. color: "#fff"
          16. },
          17. itemWidth: 14,
          18. itemHeight: 10,
          19. itemGap: 13,
          20. },
          21. grid: {
          22. left: '3%',
          23. right: '4%',
          24. bottom: '3%',
          25. containLabel: true
          26. },
          27. xAxis: [{
          28. type: 'category',
          29. data: ['1月','2月','3月', '4月'],
          30. axisLine: {/x軸線的顏色以及寬度
          31. show: true,
          32. lineStyle: {
          33. color: "rgba(219,225,255,1)",
          34. width: 0,
          35. type: "solid"
          36. }
          37. },
          38. axisTick: {
          39. show: false,
          40. },
          41. axisLabel: {//x軸文字的配置
          42. show: true,
          43. textStyle: {
          44. color: "rgba(219,225,255,1)",
          45. }
          46. },
          47. splitLine: {//分割線配置
          48. show:false,
          49. lineStyle: {
          50. color: "rgba(219,225,255,1)",
          51. }
          52. }
          53. }],
          54. yAxis: [{
          55. type: 'value',
          56. name:"單位:人",//y軸上方的單位
          57. nameTextStyle:{//y軸上方單位的顏色
          58. color:'#151515'
          59. },
          60. axisLabel: {//y軸文字的配置
          61. textStyle: {
          62. color: "rgba(219,225,255,1)",
          63. margin: 15
          64. },
          65. // formatter: '{value} %'//y軸的每一個刻度值后面加上‘%’號
          66. },
          67. axisTick: {
          68. show: false,
          69. },
          70. axisLine: {//y軸線的顏色以及寬度
          71. show: false,
          72. lineStyle: {
          73. color: "rgba(219,225,255,1)",
          74. width: 1,
          75. type: "solid"
          76. },
          77. },
          78. splitLine: {//分割線配置
          79. show:false,
          80. lineStyle: {
          81. color: "rgba(219,225,255,1)",
          82. }
          83. }
          84. }],
          85. series: [{
          86. name: '計劃勞務資源',
          87. type: 'bar',
          88. data: [38,38,42,48],
          89. barWidth: 10, //柱子寬度
          90. barGap: .5, //柱子之間間距
          91. itemStyle: {
          92. normal: {
          93. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          94. offset: 0,
          95. color: 'rgba(0, 153, 239, 0.8)'
          96. }, {
          97. offset: 1,
          98. color: 'rgba(66, 187, 255, 1)'
          99. }]),
          100. opacity: 1,
          101. }
          102. }
          103. }, {
          104. name: '實際勞務資源',
          105. type: 'bar',
          106. data: [40, 30, 42, 50],
          107. barWidth: 10,
          108. barGap: .5,
          109. itemStyle: {
          110. normal: {
          111. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          112. offset: 0,
          113. color: 'rgba(0, 242, 159, 1)'
          114. }, {
          115. offset: 1,
          116. color: 'rgba(76, 240, 254, 1)'
          117. }]),
          118. opacity: 1,
          119. }
          120. }
          121. }]
          122. };
          123. myChart.setOption(option);
          124. window.addEventListener("resize", () => {
          125. myChart.resize();
          126. });

           

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

          文章來源:csdn + 博客園

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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