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

                 HMI是Human Machine Interface 的縮寫,“人機接口”,也叫人機界面。凡是參與人機信息交流的領域都存在著人機界面。本文將深度剖析車載界面的設計要點及注意規范。

                 智慧城市的建設趨勢越來越顯著,政府對于汽車智能化、信息化發展非常重視,汽車駕駛體驗感與個性化的設計也會成為我們對于汽車選購的參考和方向,自從人們對于用戶體驗的重視,人機交互設計工作內容也成為重要環節。

                 對于人機界面,首先我們要明確一些概念。


          1、人機界面與人們常說的“觸摸屏”有什么區別?

          從嚴格意義上來說,兩者是有本質上的區別的。因為“觸摸屏”僅是人機界面產品中可能用到的硬件部分,是一種替代鼠標及鍵盤部分功能,安裝在顯示屏前端的輸入設備;而人機界面產品則是一種包含硬件和軟件的人機交互設備。在工業中,人們常把具有觸摸輸入功能的人機界面產品稱為“觸摸屏”,但這是不科學的。


          2.人機界面產品中是否有操作系統?

          任何人機界面產品都有系統軟件部分,系統軟件運行在HMI的處理器中,支持多任務處理功能,處理器中需有小型的操作系統管理系統軟件的運行。基于平板計算機的高性能人機界面產品中,一般使用WinCE,Linux等通用的嵌入式操作系統。

                 我們做的交互場景是有車輛行駛的,所以首先是要考慮安全因素,美觀其次,因此在特殊環境下操作車載系統,我們無法用傳統移動端沉浸式的設計思維來設計車載的界面與功能,需要放下所謂的美學,緊扣實際場景下的交互方式與用戶需求來設計,因為在極短時間內導致我們必須對所有可能用到的功能入口一步即達,對信息的布局必須做到一眼即見。



                 汽車HMI有自己的設計原則和設計規范以及美學理念。

          汽車行業本身是一個有著強烈美學理念和設計規范的行業,其實準確的說應該是汽車HMI中控設計是基于自身傳統規范,結合互聯網移動端和Web端的基礎上,慢慢形成了一種新的設計規范。


                 在開始講解之前,我們首先要了解官方的一些設計規范。

          1. 阿里 Alios 開放平臺

          https://miniapp.alios.cn/index#/document

          2. 百度車載生態開放平臺

          https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

          3. 谷歌駕駛

          https://developers.google.com/cars/design/design-foundations

          4. 蘋果 Apple Car Play

          https://www.apple.com.cn/ios/carplay/

          5. 華為車機三方應用交互設計規范

          https://developer.huawei.com/consumer/cn/doc/50902

             

                 我們還要了解車內屏幕的類型,主駕駛前面的儀表盤、HUD和中控屏幕,副駕駛和后排的娛樂屏幕。

          1. 儀表盤

          汽車儀表盤是反映車輛各系統工作狀況的裝置。一般由時速表、轉速表、機油壓力表、水溫表、燃油表以及電子指示燈等組成。汽車儀表是駕駛員與汽車進行信息交流的重要接口。當今純液晶屏的儀表盤占市場主導地位,純機械、燈顯、段碼將退出歷史舞臺。

          2. HUD

          平視顯示器(Head Up Display),最早是航空器上的飛行輔助儀器,運用在戰斗機上,由于戰斗機上很多信息需要飛機駕駛員隨時查看,避免駕駛員低頭看儀表而分心,隨后又普及在民航客機上,由于HUD的方便性以及能夠提高飛行安全,這項技術后來也發展到汽車行業,汽車搭載的HUD抬頭數字顯示功能,是利用光學反射的原理,將重要的行駛信息胎壓、速度和轉速等信息投射到駕駛艙前段玻璃上面,在駕駛過程中不用分心看儀表盤,減輕眼睛的疲勞,給駕駛帶來便利和安全。


                 此前,HUD前裝市場基本被日本精機、德國大陸、日本電裝、偉世通等國外巨頭壟斷,且競爭格局高度集中,前五名企業市場份額超95%。近三年,隨著國內智能駕駛技術商業化落地加快,不少自主品牌供應商開始嶄露頭角,且爆發力十足。HUD的發展會越來越迅猛,原因主要有以下幾點。

          1、HUD作為ADAS人機交互的窗口,可以呈現駕駛輔助信息,提升駕駛的安全性和舒適性,使駕駛者擁有更佳的應用體驗;

          2、為提升市場競爭力,車企對自動駕駛和智能座艙重視度提升,尤其是自主品牌車企近年在國家智能網聯發展戰略的推動和扶持下,轉型動作快、力度大,產品創新和應用上也更加大膽和前衛。、

          3、HUD技術上取得突破,顯示效果大幅改善;

          4、隨著技術升級,HUD配套價格逐漸下降,性價比逐步提升;

          3. 娛樂屏幕

          后排娛樂屏更像是一個平板,主要功能點為視頻、音樂、游戲等等,幫助后排乘客打發時間,所以后排的娛樂系統就是為娛樂而生,無需考慮安全性。

          車載界面的設計原則

          1.迅捷性

          與人們常常所說的三秒設計原則類似。移動端系統為沉浸式操作,而車載系統不一樣,在駕駛過程中,用戶95%的精力在于聚焦駕駛上行為上,用戶只能抽取僅5%左右的精力與時間來操控車載。因此也就決定了車載系統的功能邏輯,信息布局都必須在極短的時間內以最好的方式呈現。

          而如果用戶沒有在這個時間以內完成操作任務,要么用戶選擇放棄,重新再來;要么用戶花費更多時間和精力,但這樣駕駛的危險系數會成倍增長。經筆者多次在不同路段試驗,統計下來平均每次操作,即視線與注意力專注在車載上的時間,無法超過三秒,事實上,當進入第三秒時,已不得不需要利用余光開始注意前方路況了。

          因此,在三秒以內,無論是用戶第一次操作失敗,重新注意路況后,再重復操作,還是用戶持續操作直到任務完成,都是非常危險的行為,在這里,由于用戶試錯的成本非常巨大,也因此交互的設計與信息布局的設計都需要做到最極致的狀態。


                 隨著大屏、多屏化的發展趨勢,觸摸和語音控制應時而生,為了增強操作合理性,以及減少或避免觸摸屏的誤觸功能。從信息輸入來看,以觸控、語音為主,手勢、視覺交互為輔;從反饋輸出來看,以視覺、語音、觸控交互為主,嗅覺交互為輔。

          人機交互定義需要區分車輛是行駛中還是靜止狀態,車輛在行駛中,對于需要駕駛員操作反饋的交互行為需要遵循3S原則(上面提到的三秒原則),降低安全隱患。甚至有一些交互動作在車輛行駛過程中需要禁用的。

          2. 聚合性

          得益于計算機算法的強大,汽車功能越來越完善,信息量也越來越大,為了讓用戶有更好的體驗,避免過多信息的干擾,必須做到界面顯示輕量化。

          這也是為什么飛機駕駛艙內、國際空間站內的各種操控開關拉桿都是星羅密布式的擺放,并非以如今的科技無法做到像科幻片里一樣簡潔干凈的操控臺,而是因為考慮到在實際應用場景下,專業素質的人員不需要也沒有時間去欣賞美觀的界面,學習我們所認為的交互方式。


          保障關鍵信息是醒目的,容易讓用戶視覺快速捕獲,在各種環境場景下具有良好的可見性和易讀性,無需駕駛員費力尋找和識別。

          3. 及時性

          這里所說的及時性指的是反饋信息的及時性,我們要考慮實現全方位的信息提示,著重考慮視覺層面和聽覺層面。

          在駕駛的過程當中,司機的雙手被占用,于是眼睛和耳朵感知要提高,與移動端的視覺顯示不同,HMI設計師需要注意除了基礎的視覺顯示規范外,還需格外注意與安全相關信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

          在車輛行駛過程中,對于司機來說,聽覺反饋也是很有必要考慮的場景,通過語音反饋司機需要獲取的信息,能讓司機盡量保持視覺焦點在路況上。多場景的融合考慮信息獲取的效率,能減少在開車過程中的安全隱患。

          我們不僅要考慮設計層面,還要考慮到交互層面。

          交互方式

          (1)觸控

          這里分兩種,一種是通過按鍵控制;一種是通過觸屏控制。

          都是通過不斷的觸控功能按鈕行程鍛煉肌肉記憶,現在的趨勢越來越趨向重觸屏,輕按鈕,這樣不僅系統迭代成本小,功能可以動態分布。

          但是對于一些精準調節的功能還是按鍵控制好一些。

          微軟 的Surface Dial可以給我們很好的啟發,智能旋鈕可以解決大部分屏幕調節的不精準的痛點,而效率又高。

          (2)語音

          在汽車人機交互中,語音交互被認為是車內場景下最自然的交互方式,而語音交互需要一個載體來傳達多樣化的情感。

          語音控制的前景主要在于兩個因素,一個是可以把除了界面以外的利用起來,一個可以與HMI自由交談,二是最小化HMI手動操作產生的干擾,增加安全性。

          (3)手勢

          手勢交互是對語音交互、觸控交互的很好補充,能夠讓車主通過簡單的手勢和語音就能完成車內的交互任務,也是能夠增加交互趣味性、表達情感、傳達情緒的另一個自然交互方式。

          常用的手勢:單指滑動(上下左右)、雙指滑動(左右)、五指抓取等。

          HMI的交互手勢不同于手機和IPAD,手機和IPAD握在手里,左右手都可以操作,多指組合的可能性也多,而HMI的手勢定義,更多的是需要滿足駕駛員的使用場景,屏幕是固定在車上的,要規避掉一些不方便的手勢。

          比如雙指往上滑動就很不方便,向上推不靈活,也有阻力。

                 所以要想系統整體跳出基礎可用性范圍,進階到好用的層次,系統對各種復雜交插的應用場景的處理需要更加智能(如導航中的來電,緊急路況的提示),對車內環境控制(如聲音、氣溫)需要更加敏感。車載系統的設計相比于移動端有著更明顯的約束,不論是從空間、時間、行為、心智,都有著明顯獨特的場景和特點,要做好車載系統設計,我們需要有豐富的同理心以及親身體驗并反復驗證設計。

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

          文章來源:站酷 作者:弧形線

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

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

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



          在VR當中,尼爾森10大設計原則是否依然適用?

          資深UI設計者

          這篇文章出自著名的尼爾森諾曼集團(nngroup),也是著名的尼爾森十大設計原則的提出者。文章作者 Alita Joyce 在這篇文章當中深入探討了尼爾森十大設計原則虛擬現實設備中的具體應用,對于正在探索VR中 UI 設計的同學而言,有著非比尋常的價值:

          對于界面,現在已經不再僅僅局限于傳統意義上的網頁界面和移動端 UI 了,從廣泛意義上來說,虛擬現實,增強現實,這些界面同樣開始在一定程度上開始普及和應用了。Jakob Nielsen 的界面設計 10 大可用性啟發式是否依然適用?今天的文章,希望能夠給你答案。

          這篇文章將會重新探討在 虛擬現實 的應用場景之下的 10 種設計啟發式,而主要的測試設備用的是 Oculus Quest 頭戴式虛擬現實設備。

          注意,文中所用到的截圖來自 3D 的虛擬環境,在 2D 環境之下查看的時候,它的陰影效果和視覺畸變會顯得比較不太正常,但是實際效果并非如此。

          1、狀態可見性原則

          系統應該在合理的時間周期內,給予及時的反饋,讓用戶能夠了解正在發生的事情。

          清楚地呈現當前的系統狀態,能夠促進產品的可信度和可預測性。

          在 Oculus Quest 的主要導航當中,采用的是通用的菜單設計,左下角會始終顯示相關設備的電池電量的狀態,而這三個狀態分別代表的是左右控制器和頭戴設備本身。每個點代表的是 25%的電量,當你將光標移動到上方的時候,可以看到更為具體的電量百分比。這種信息呈現的方式,將會直接影響到用戶在日常使用時候的決策。

          在VR當中,尼爾森10大設計原則是否依然適用?

          同樣的,在虛擬寵物交互游戲 Bogo 當中,心型的圖標將會一直以明顯且易于理解的方式,告訴你你需要積累多少能量才能進入下一個階段的冒險。一旦圖標被填滿,就可以繼續。

          在VR當中,尼爾森10大設計原則是否依然適用?

          2、環境貼切原則

          設計應該以用戶熟悉語言和方式來傳遞信息,而不是使用專業術語。

          絕大多數人幾乎沒有在虛擬現實中進行操作的經驗,僅有在現實當中交互的經驗,而這些經驗大都是基于真實的數據和物理規則來的。所以,用戶需要根據現實世界中的心智模型來預測 VR 世界中的用戶交互,而這是非常合理的。而事實上,由于虛擬現實和真實世界在維度上的相似和可遷移性,相比于2D設計師而言,3D設計師更容易實現經驗上的關聯。

          Immersed 是一種虛擬現實的工作環境,它讓用戶在咖啡館和會議室這樣大家比較熟悉的環境之下進行協同合作。在這種熟悉的環境之下,用戶可以在白板上集思廣益,就像在現實世界當中一樣。不過在這個數字化的環境之下,絕大多數的交互邏輯和現實世界類似,還有一些交互則是更為數字化的,比如可以進行鎖定和解鎖。

          在VR當中,尼爾森10大設計原則是否依然適用?

          3、用戶可控原則

          用戶經常會出現錯誤的操作,用戶需要有明確的「出口」來幫助他們終止不需要的操作。

          身陷虛擬現實的環境之下,可能會是非常沮喪的。通過「返回」或者「退出」這樣的按鈕,快速地結束讓自己不適的狀態和體驗。

          比如在電子游戲 Beat Saber 當中,可以自定義和隨機生成角色形象,即使不小心點擊了死亡按鈕,同樣可以通過點擊「取消」或者「返回」按鈕來消除錯誤的操作,恢復之前的狀態。

          在VR當中,尼爾森10大設計原則是否依然適用?

          而在ESPN的應用當中,當提示用戶使用 Comcast 或者 Hulu 等供應商帳號來登錄的時候,用戶路徑是單向的,如果用戶改變主意想要折返回去換一個方式登錄,會發現再也無法進行選擇。在虛擬現實的環境之下,類似的狀況會更加令人沮喪,后退按鈕將會是用戶進行折返的主要方式,否則他們可能會選擇直接關閉硬件。

          4、一致性原則

          用戶不會因為術語感到迷惑,不需要懷疑不同的情況是否意味著同樣的事情,設計和體驗遵循著平臺的規范和行業的范例。

          對于你的 APP 或者網頁而言,你的用戶將會把絕大多數的時間和精力投入在你的產品之外的地方,因此,你需要盡可能遵循通用的設計標準和邏輯,來貼合用戶的通常習慣。違反這些通用的邏輯,會增加用戶的認知負擔。

          切換式開關是一種非常常見的、幾乎在所有的數字界面中都看到的一種開關。在虛擬現實環境下,其實也非常常見。用戶可以在兩種互斥的選項之間,做出選擇,比如打開或者關閉開關。在Gravity Sketch 這個3D繪圖工具當中,本來應該設計成成切換式撥動開關的按鈕,被設計成為一個滑塊,帶來的體驗是非常混亂的,增加了不必要的交互成本。在設置界面當中,如果用戶想要打開網格的選項,需要先單擊按住這個選項,然后拖動,這樣的交互涉及到2個不同的維度,比起日常的交互要更加費力,并且無法滿足絕大多數用戶對于這一功能的期望。盡管在這些設計功能的選取上,并不夠優秀,但是起碼 Gravity Sketch 的內部,整套設計系統是一致的,并且在視覺設計上保持著高度的一致。

          在VR當中,尼爾森10大設計原則是否依然適用?

          在VR當中,尼爾森10大設計原則是否依然適用?

          和 Gravity Sketch 不同,Oculus 當中的撥動開關遵循著設計標準。

          5、防錯原則

          正確的錯誤提示信息是非常重要的,但是好的設計會盡量提前防止問題發生。要么消除容易出錯的情況,要么盡量在用戶提交某些操作之前,提供確認操作的選項。

          考慮到虛擬現實交互本身的特殊性,用戶無法在移動的時候看到現實世界的狀況,因此通常會設置一個安全范疇,避免撞到或者被絆倒。

          通常用戶需要預先設置一個監護人和運動的邊界。在 Oculus 當中,當用戶在操作過程中接近預定義的監護人或者邊界的時候,會提示用戶安全距離和范疇,確保體驗的可靠和安全。比如人在 Vader Immortal 這個游戲當中,當用戶即將超出范疇的時候,會出現如下提示:

          在VR當中,尼爾森10大設計原則是否依然適用?

          這些信息通常會:

          • 巧妙的鼓勵用戶盡量移動到相對更開闊的區域
          • 在游戲的時候強調安全,避免物理傷害,防止出錯

          同樣的,在國家地理的 VR 程序中,如果用戶即將離開安全區域,他們會推送安全提示,以此提示用戶不要離開區域范疇,否則會丟失活動進度:

          在VR當中,尼爾森10大設計原則是否依然適用?

          6、易取原則

          通過讓元素、操作、選項盡可能可見,最大限度降低用戶的記憶負荷。用戶不必記住全部的信息,借助設計,讓用戶可以在需要的時候獲得必須的信息,或者可以快速檢索獲得。

          人類的短期記憶是非常有限的,在虛擬現實環境之下,交互的情況可能會更加復雜。不要讓 VR 用戶去記大量的額外信息,避免過重的信息負擔。

          所以,通常大家會使用工具提示來幫助用戶了解特定按鈕和圖標的功能。有意思的地方在于,Oculus 中,有過多的圖標對于用戶而言都是全新的,導致系統經常因為過多的工具提示占內存而導致內存不足。通常,用戶可以通過懸停在特定圖標上,查看對應的工具提示,不過這樣依然會需要用戶不斷去記憶各個工具和按鈕的功能。

          在VR當中,尼爾森10大設計原則是否依然適用?

          相比之下,在國家地理的 VR 程序當中,會盡可能促進用戶去識別功能,而非是提供說明,讓用戶去記憶,盡可能直觀地將標簽和圖標一起展示,讓用戶直接理解,而無需看解釋。

          在VR當中,尼爾森10大設計原則是否依然適用?

          7、靈活高效原則

          好的產品需要同時兼顧到新手和資深用戶。新用戶對功能需求明確清晰,老用戶則更需要高效。產品不應僅僅迎合某一種用戶,應該允許用戶針對頻繁的操作進行定制化處理。

          虛擬現實和傳統的 UI 界面有所不同,但是同樣必須同時兼顧到新老用戶。良好的初始設定對于每個用戶都很重要,但是應該提供快捷方式和定制化功能,來確保有經驗的用戶可以按照自己的需求來進行優化。

          在VR當中,尼爾森10大設計原則是否依然適用?

          Firefox Reality 為用戶定制了一個專門的虛擬現實瀏覽器,用戶可以根據自己的偏好來定制瀏覽器的窗口大小。

          在VR當中,尼爾森10大設計原則是否依然適用?

          8、簡約原則

          不要包含不相關的或者低頻次的信息和交互,頁面中每多一個冗余的信息,都會降低關鍵信息的可見性。

          虛擬現實界面可能會做得比較復雜,那么如何優選出最重要的元素就顯得非常重要了。比如 Youtube 的 VR 應用提供了 360 度的環繞視角和優先級極高的搜索引擎和常用標簽頁。

          在VR當中,尼爾森10大設計原則是否依然適用?

          而 Pokerstars VR 的菜單設計則顯得混亂而分散注意力,在游戲過程中,打開這個開關,會顯得特別的雜亂,甚至影響操作:

          在VR當中,尼爾森10大設計原則是否依然適用?

          9、容錯性原則

          錯誤提示信息應該以通俗的語言來表達,指明問題,給出解決方案,而非提供錯誤代碼。

          清晰有效的錯誤提示信息是相當重要的。不幸的是,在 Firefox Reality 當中,如果用戶無法使用語音命令,那么無法收到 Firefox 提供的建設性意見。在使用過程中,程序一直無法理解提供的語音信息導致一直提示「請再試一次」。目前尚不清楚這種問題的根源在哪里,但是它們提供的錯誤信息幾乎是沒有幫助的。

          在VR當中,尼爾森10大設計原則是否依然適用?

          Pokerstars VR 則通過新手訓練的方式,提供主要的游戲交互,其中復雜的手勢可能是絕大多數用戶所不熟悉的。如果用戶一直無法正確使用手勢,那么系統會引導用戶使用另外的易于實現的非官方的手勢,來達成相同的效果。這種工作流程能夠幫助用戶識別錯誤,并且能優化、適應病解決問題。

          在VR當中,尼爾森10大設計原則是否依然適用?

          10、幫助和文檔

          系統最好通過合理的設計讓用戶無需閱讀文檔就能進行正常使用,但是另外還得提供文檔以防萬一,并且內容應該是易于被搜索的,針對問題告知用戶具體的步驟。

          虛擬現實場景下通常包含大量的交互,對于很多用戶而言,這些交互可能是復雜的,不熟悉的,在這個時候,有文檔能夠幫助用戶解決問題,重回正軌。

          Immersed 為用戶提供了快速可訪問的幫助文檔,并且提供了包括視頻教程、問答、文檔說明等多種形態的支持。當你在VR 的瀏覽器中訪問的時候i,能夠看到組織結構良好的文檔信息和關鍵詞系統。

          在VR當中,尼爾森10大設計原則是否依然適用?

          結語

          在虛擬現實應用當中,不合理的用戶體驗設計會阻礙本身的發展潛力。無論你認為 VR 是被高估了的技術,還是真正意義上的未來,它都一直堅定不移地往前發展。從用戶體驗的角度上來說,VR 還有很大的增長空間。盡管作為用戶界面而言,2D和3D有著顯著的差別,但是根本上,用戶體驗的原則和啟發式則是相通的。

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

          文章來源:優設  作者:Alita Joyce

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

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

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




          關于toG系統的一些總結思考

          資深UI設計者


          寫在前面


          近幾年云計算和大數據的興起,以及政府數據化戰略的升級,G端逐漸出現在大眾視野里,受到各大互聯網公司、IT廠商的青睞,BAT也在2018年宣布進軍G端市場,給信息化市場帶來了新的氣息。


          由于工作需要,經常會和客戶溝通,總結出來G端客戶有一個特性是,他們大部分為高知人群,從學歷、社會地位、經濟收入、家庭背景等都占有相當的優勢,長期在政府部門工作,他們習慣于政令形式、層級森嚴的環境,會有工作任務固定、重復率高、失誤率低的需求。


          與toB相比,toG產品項目的特點是——


          1/ 客戶業務主導性強

          調研對象政府相關部門的領導和科員,對業務主導性強


          2/ 改變用戶行為難

          原系統運行時間較長,形成了用戶習慣,接受新系統難度較大


          3/ 項目工期短

          部分toG項目要求工期緊,系統需求調研、開發時間較短


          4/ 系統應用阻力大

          涉及原系統、單位內部環境等問題,系統使用過程需要長期博弈



          工作以來做了不少toB和toG的項目,這兩者相似卻又不同。


          【相同點】


          • 都是服務于用戶,需要站在用戶的角度分析用戶需求,為用戶解決問題

          • 都是要把產品和項目做好,兼顧功能的同時,使用戶體驗更好,才能實現盈利

          • 都是重功能、輕視覺,要符合產品的實際需求,并有效提升業務運營的效率

          • ...



          【不同點】


          1/ 面對的客戶群體——

          toB是面向企業客戶的,一般為企業內部人員使用,不向大眾公開。

          toG是從toB衍生出來的一種特殊劃分,面向的企業是政府相關單位。


          2/ 資金來源——

          toB通常由企業撥出資金

          toG通常由國家財政撥出預算,并非完全基于自身的組織或企業的資金。


          3/ 決策機制——

          toB一般為客戶、公司管理層

          toG的話,不同層級的決策者有不同的考量,比如高層領導希望打造影響力來獲得政績,中層領導希望體現布局和價值,小領導希望解決自身申請項目和提升職稱等的需求,最終用戶能否用起來,反而不是很重要。所以解決方案要滿足不同層級和角色的需求。


          4/ 產品需求——

          toB滿足剛性需求并滿足一線使用者需求為主

          toG非常多的產品功能非剛性,通常會讓研發人員難辦,因為比較難證明產品或研發價值,但在售前和控標階段,大而全的功能又會成為各產品之間的軍備競賽,最后將產品功能補齊,開啟同質化競爭。所以更多的是滿足非剛性、但有利于搞定決策人的、有價值的功能需求。

          5/ 產品標準化——

          toB面對中小型客戶,需求淺、沒有足夠的談判籌碼,不需要定制化;大客戶的話,需求更深入,定制化不可避免。

          toG比較難實現標準化,因為toG本質上是重政績輕實用,這就導致相關決策人總希望做出不一樣的東西,不僅別人有的我要有,我的還要有特色。所以可以從兩方面入手,一是只做通用層能力,定制化找合作伙伴來做,保證渠道和底層能力的核心競爭力;一是自建定制化團隊,專做定制化需求,避免拖累正常的產品迭代。


          6/ 視覺設計——

          toB一般冷色系居多,整體簡潔

          toG要根據客戶喜好來設計,最好能體現單位或地方特色;視覺方面,界面不能過于簡單,互聯網扁平化并不適用,要盡可能充實界面,但要把握「度」,不能太花哨,一般配色以紅&藍為主,莊重、大氣;內容方面,要遵循國家相關要求和當下政策環境,不可隨意亂造,最好是當前業務測試內容;交互方面,不可有過多的交互層級和特效,操作路徑要盡可能短一些,一般是一到兩個交互動作就可以完成任務,要考慮40-50歲人群的體驗習慣。

          (這里可參考之前寫的一篇文章,詳細介紹了簡化操作路徑的案例,一站式解決問題,有需要的同學可以看看,鏈接如下https://www.zcool.com.cn/article/ZMTIxNDg4NA==.html)


          7/ 產品迭代——

          toB一般有一定的周期

          toG產品項目,一般第一次上線之后,客戶會提出一系列問題,返工重新做的情況也是有的。所以toG很適合MVP(最小可行性產品),因為政務用戶不同層級的需求和對需求的認知不同,造成了對統一功能不同用戶的意見有很大的不同,其實第一次上線運行就相當于一次內部測試,返工的時候不必太挫敗,只要做到核心業務流程和業務模塊完整即可。接下來再通過幾次的測試、收集意見反饋,討論決定最后的需求,這就是很多toG項目需要去客戶現場駐場的一個原因,采用小版本、多迭代、多溝通,及時解決問題。


          PS: 關于去客戶現場,這里想多說幾句。

          通常情況下,是產品經理和開發團隊駐場居多,但有時候設計方面常會遇到一種情況是,客戶需求不明確。通過產品經理在客戶和設計師之間來回轉達消息,效果也并不是很好,這個時候就需要設計師主動爭取機會去客戶現場。有一個典型的案例是,去年做GAB的項目,需要設計一個登錄界面。設計稿做了很多,客戶一直不滿意,于是我申請到客戶現場進行面對面溝通,去的時候會帶幾個有代表性的風格給客戶看,先把不想要的風格排除掉,然后把握大的設計方向。具體設計的時候同步表達自己的設計理念,一步步引導客戶,客戶中途一步步給意見建議,參與其中,這樣更容易明確需求,客戶也會覺得這是自己與設計師共同的成果,會更容易接受,做出雙方都滿意的設計,促進驗收,最后雙贏。

          這就是那個「看起來平平無奇 · 但解決了實際問題 · 客戶很滿意」的登陸界面,如下圖:



          8/ ...




          很多toG的產品項目上線后造成的客戶影響不好,這個時候要調整好心態,只要你設身處地站在用戶的角度思考,分析場景和需求,用我們的專業技能來解決問題,當你經歷各種否定和困難最終得到客戶的認可,這種打磨過后的成就感真的難以言喻。

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

          文章來源:站酷  作者:Alita Joyce


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

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

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



          競品分析的正確方式

          資深UI設計者



          互聯網行業,競品分析已不僅僅是產品經理的工作內容,對于UI設計師來說系統地分析競品并且做出有理有據地分析已經成為必不可少的技能了。


          *文章中出現的工具名單以及網址出處,我會匯總到文章結尾,供大家學習使用。












          一、競品分析的概念


          競品分析(Competitive Analysis)一詞最早源于經濟學領域,是指對現有的或潛在的競爭產品的優勢和劣勢進行分析。


          通過找尋市場上存在競爭關系,高品質的產品,把他們進行分類和對比,輸出結論為下一步決策提供正確的方向,它就像是武林中的吸星大法武功秘籍一樣,可以把各家的絕招都變成自己的武功招式。


          他山之石,可以攻玉。競品分析是一個長時間定期持續積累,不斷挖掘和分析的一個過程,我理解它更像是一種解題公式。設計產品最終目標就是追溯用戶需求本身,解決用戶痛點,而競品分析就是解決用戶痛點這道大題的思路方法,就好比要解開一道復雜的數學題,需要用到很多公式,而競品分析就是一個環節中的一種公式而已。





          二、競品分析的框架


          一套完整的競品分析主要由以下七個模塊組成,因為企業資源的原因一般是不需要全部輸出出來的,需要根據具體需求進行重點分析,并不是每次競品分析都是面面俱到的。



          正是因為企業為了適應小步快跑的產品迭代頻率,要求在做競品分析時候都會盡量地精簡化,比較有針對性,所以市面上就出現了三種不同表現形式的競品分析,分別是商業模式分析、交互體驗分析視覺體驗分析。




          3.1 產品經理——商業模式分析


          如果你以為產品經理只是拍腦袋想需求的這樣一個工作者的話,那你就大錯特錯了,其實在現實工作中產品經理有一半以上的時間是做競品分析的。


          產品經理作為架構產品核心功能,排期產品迭代頻次的主要負責任人,考慮的多數是產品盈利問題。所以產品經理關注的是產品的商業模式的分析,多有對產品數據層、產品層、用戶層、盈利方式等維度的分析。





          3.2 交互設計師——交互體驗分析


          交互體驗的分析,顧名思義,就是對產品功能場景交互結構的分析。對于體量小一點的公司會把這項重任都交付給UI設計師了。


          交互體驗分析可以分為三個層次的分析分別是

          ·核心功能:對產品的基礎交互框架的分析。

          ·次核心功能:對產品易用性、提升效率、消除擔憂的功能點的分析。

          ·輔助功能:對產品情感化設計、特殊狀態處理、特定使用場景優化等交互功能的分析。




          3.3 視覺設計師——視覺體驗分析


          視覺體驗的分析,一般是由UI設計師和運營設計師兩個職業完成的工作:


          ·UI設計師:主要是對比競品中圖形、顏色、字體、頁面布局構成、質感、動態效果等元素。

          ·運營設計師:是近幾年剛剛興起的一個職業,主要負責設計風格、品牌影響力和內部運營渠道的分析。

          *有人還會說要分析設計規范,我覺得沒必要,因為不可能看到競品的設計規范,另外與其說是看設計規范,倒不如說對比頁面的還原程度。






          三、 競品分析的2個視角



          3.1 宏觀視角——縱向分析


          以宏觀的視角,根據不同的版本迭代,拉長戰線進行縱向的對比總結,這類做法雖然并不常見,但是可以提煉出很多競品的設計思路,在做產品規劃起到很好的借鑒作用,常用于產品定位、商業模式、運營思路模塊的分析中。




          3.2 深入視角——橫向分析


          以深入勘探的視角,通過在不同的產品上相同或者類似的功能(這類的相同的功能可以是一個功能或者是一組功能)上作比較。這種橫向的分析方法有助于在相對關鍵的場景中找到競品的功能亮點, 常用于產品體驗、產品功能、UI視覺等模塊的分析比較多。





          3.3 競品分析&體驗報告的不同


          值得一提的是,很多新手在制作競品分析的時候,上面就寫幾個競品分析的模板,也有同學直接上來就開始寫文檔,寫的和產品體驗報告,傻傻分不清楚。這里我就講解一下兩者區別。


          我舉一個例子,如果有人問“這個男生怎么樣子,那就這就產品體驗;你看別人家的男朋友在看看你,這個就是競品分析。”競品分析比較強調“產品功能的對比”,即指兩款以上產品的差異化;而產品體驗則強調對“產品體驗的深度”。





          四、為什么做競品分析


          隨著互聯網的發展,競品分析被應用在互聯網產品發起項目或者改版初期階段,幫助我們摸清產品規律和對手弱點的一個工具。



          4.1 競品分析的三個意義


          對于產品經理而言:他是避開之前產品迭代功能坑的試金石,比如:有一天,老板覺得我競品的這個功能就不錯,想把這個功能弄到我們的產品上,我們沒有參考行業里面的競品,直接按照老板的意思實現了,效果應該不會理想。為什么會這樣,主要是因為在做新功能如果都是拍著腦袋想需求,是很缺乏經驗的一種表現,結果肯定不會特別理想。


          對視覺設計師而言:競品分析其實可以作為一個設計決策的依據和支撐。比如說別人在質疑你設計風格或者是顏色選擇,兩方不能很好地達成一致觀點,這個時候你就可以說我這個東西是調查、分析過的,而不是“我認為”這種蒼白無力的表述,用專業的水平說服對方目前方案是最優方案。


          對整個團隊而言:競品分析可以讓團隊更好地了解這個行業,了解對手,了解別人都在做什么,在和競爭企業PK中取得勝利。通過競品分析,確定其自己的產品的優勢和劣勢,并制定有效的產品策略或者設計策略。






          五、競品分析的目的


          通過關注競爭對手與自己的差異化,分析其設計背后的原因,取其精華,去其糟粕,發現自己的產品問題,為產品后期的迭代提供最為合適的方案。










          競品分析有三個關鍵詞發現——分析——論證。一套完整的競品分析要具備了解、目的、競品、對比、分析、總結六個步驟。






          一、 大視野了解信息


          做競品分析最忌諱的就是直接找到競品進行對比,我們第一步應該做的是了解,比如在抖音的競品分析中就有對視頻行業的分析,如圖:




          1.1 了解哪些維度信息


          了解行業信息其實就是了解我們目前產品的生態環境,例如了解整個行業背景、競品的產品定位、現階段行業內發生了什么事件、新的功能玩法等等,這些信息都可以了解,這里提供四個了解信息的維度(以下內容不用全寫,挑幾項重要的即可):


          ·產業鏈路圖:行業中產業鏈圖,從生產到服務之間的產業鏈條之間的關系是如何進行的。

          ·成員規模:公司內成員的規模和產品的核心目標以及在行業中的品牌影響力、企業價值、slogan等。

          ·盈利情況:季度、年度的盈利數值、各條產品線資金重點投入的信息,投資占比。

          ·用戶群體:用戶群體覆蓋面積、市場占有率、運營盈利模式、產品的注冊用戶量。




          1.2 搜集信息的兩種渠道


          很多人不知道從哪些渠道獲取行業或者市場的信息,可能在第一個步驟出了問題,這里我推薦兩個渠道進行信息搜集,一個是用戶的意見的渠道另一個是第三方平臺的行業信息報告。


          ·收集用戶意見渠道:如qq群、微信群、知乎、 微博、百度論壇(現在用比較少)、用戶訪談、在做可用性測試對用戶的詢問問題、看應用商店的評論等等。


          ·第三方平臺信息渠道:這類渠道市場上有很多,我推薦幾種如酷傳咨詢、易觀智庫、比達咨詢、企鵝智庫等找一些行業分析報告,通過這些報告了解目前行業發展現狀、國家政策的支持方向、競爭對手占有市場份額等。(下圖大家也可以收藏使用)


          在競品分析上展示的了解的信息可以不具體,但是一定要有了解的過程,因為了解信息是競品分析是有科學依據的證明,所有不關注市場趨勢和行業現狀的競品分析都屬于功能性的競品分析,是沒有說服力的。




          1.3 呈現形式案例借鑒


          通過行業和市場的了解,為了梳理一個對自己產品和競品的認知、觀點,如下圖這樣表格的形式把自己的認知和觀點一一梳理出來。


          或者可以梳理得更加精細一些,如把產品定位差異化、關鍵詞、產品特點都梳理出來。


          再或者像是摩拜單車這種,以產品生命周期為橫向維度把每個階段的產品當時確定的戰略目標都書寫出來。





          二、明確分析目標


          目的決定一切,明確目標也是競品分析前最為關鍵的一個步,目標確立直接關系到后續競品選擇、分析思路和結論的輸出。


          許同學在做競品分析的時候會被其他產品的某一個功能所吸引,導致后續在推導結論的過程中失去了方向。帶著問題,帶著目的去分析體驗競品,只有這樣才不會流于表面,學習到表象。所以我們在做競品分析之前就要想好我們想要得到什么,也就是做競品分析的目標。




          2.1 不妨多問自己幾個問題


          做之前不妨多問問自己幾個問題,希望通過競品分析,獲得什么?資訊or知識or行動方案?需要通過競品分析抄襲這個新功能嗎?不做行不行,為什么?這些新功能會和產品的其他模塊有什么聯系?等等。當我們以自我反省式的問法向自己提問時候,并給出答案時候,這個答案就是我們做競品分析的目標了。





          2.2 三種常見的目標類型


          在工作中做競品分析基本出于這三個目的,第一次做競品分析的同學可以按照我這三個目的找出自己項目的競品分析目標:


          ·了解市場動向:如果是“為了了解行業的動向,把確定下一個季度作為目標的話”,那分析側重點應該放在行業新聞領域,查閱一些行業競品的日活月活情況,盈利模式等宏觀層面上的信息。


          ·幫助做出決策:如果“為了敲定新功能是否上線的話作為目標的話”,那分析側重點應該圍繞有這個功能的競品的功能對比上,多思考新功能解決什么問題,新功能和其他模塊的功能有什么聯系,競品是怎么做這個新功能的等。


          ·借鑒競品優點:如果‘為了確定下一版本采用什么UI風格作為目標的話”,那分析側重點應該圍繞有視覺設計做得好的競品,對比分析競品的UI用了什么設計風格和設計元素等等。




          2.3 不同階段目標側重點不同


          眾所周知,每個產品都是具有周期的,分別是進入期、成長期、成熟期、衰退期(衰退期一般不做競品分析),產品所處的周期不同那產品所處的階段就不同,進去期的產品處于開拓階段、成長期的產品處于成長階段、成熟期的產品處于防守階段。


          接下來聊一聊產品處于的階段不同,那產品的需要關注的問題不同,競品分析的目標(內容)也會有所不同。


          ·產品進入期——開拓階段:作為一個行業的新產品,活下去是最重要的事情,關注的問題應該是做什么產品?關注核心應該行業情況。

          比如行業發展史、經營環境、市場規模及增長趨勢、產品發展史、目標客戶、業務流程、盈利模式等維度分析。


          ·產品成長期——成長階段:在成熟期的產品總會遇到自身的瓶頸,如何在激烈的市場提出創新性需求,更好地服務和其他競爭對手拉開差距這是成熟期要考慮的問題。

          關注的側重點是我要做出什么樣子的產品?怎么實現?怎么去運營推廣?怎么和競品拉開差距?關注核心應該是競爭對手經營數據和經營策略,產品功能、用戶規模、研發技術成本、用戶體驗設計等維度。


          ·產品成熟期——防守階段:經歷了成長期后,可以證明產品在行業中是有一定的競爭優勢,產品需要考慮的問題就是如何守住原有的用戶,不被其他競爭對手侵占市場份額。

          關注側重點是市場份額不被吞噬、侵占,關注核心應該是監控追趕競品的各項指標及行動舉措等維度。


          為什么要講這個,很多時候我們接到的競品分析需求都是不明確的,我們可以結合自己產品所處的階段,更明確地分析出競品分析的目標。






          三、尋找·劃分 ·挑選競品


          明確了競品分析的目標,就可以進行第三步挑選競品了。對于不知道怎么選擇合適的競品的同學可以用“尋找——劃分——挑選”這三個步驟選出最合適的競品。





          3.1 尋找·競品的三種方法


          尋找好的競品無外乎就是考察自己的“搜商”能力,這里我推薦三種方法,幫助大家在搜索階段找到競品:


          ·習慣搜索方法:最常用的辦法就是通過“關鍵詞”在瀏覽器上進行搜索,注意的是這個“關鍵詞”不用太具體,比如自己產品是大學生咖啡,我在瀏覽器中搜索“大學咖啡”,是沒有這類競品的,那可以用瑞星咖啡來代替。


          ·資源搜索方法:除了在瀏覽器進行搜索,還可以去應用商店或者第三方平臺的“排行榜”找競品,這種方法我經常用,因為可以直觀地看到各個維度的競品分析數據指標,比較高效。


          ·推薦搜索方法:就是找公司的產品經理詢問相關競品,因為公司里面的員工比較了解公司業務說出來的競品會比較有針對性。也可以上脈脈這種平臺找行業大牛,問問他們的想法,唯一缺點就是在脈脈上等待回復的時間比較長,建議提前詢問。


          *資源搜索方法,我推薦四個可以查發布的時間、排行榜、版本號、注冊用戶量競品的網站,分別是酷傳咨詢、易觀分析、七麥數據、it橘子。




          3.2 劃分·競品的三個種類


          找尋到競品之后不用全部分析,工作量太大,可以按照競爭關系給競品劃分種類。競品大致分為直接關系的競品(核心競品)、間接關系的競品(重要競品)和其他關系(翹楚競品)這三類。


          垂直競品:是指市場目標方向一致,用戶群體針對性較強,產品核心功能和用戶需求相似度較高的產品,如優酷和愛奇藝。


          ·間接競品:是指在功能需求方面互補的產品,用戶群體高度重合,先階段不是直接市場利益的競爭者,但是有可能成為潛在的競爭關系,如大眾點評和小紅書。


          ·翹楚競品:是指沒有直接的用戶群重合,在市場利益上也沒有競爭關系,但有高水準前瞻性的產品,如夸克和躺友。





          3.3 挑選·競品的二八原則


          競品的選擇不在量多,而在質優,接下來的重點在于“挑選”,在這個環節我建議可以通過二八原則挑選競品,其目的就是縮小競品范圍,比如在直接關系中挑選前1到2個算是頭部的直接競品來分析,然后挑選個別優秀的間接競品和翹楚競品中比較優秀的競品。



          a 垂直競品找相似、差異化設計

          垂直競品中因業務線高度吻合所以比較適合對比相似設計與差異化設計特點。


          ·所謂相似化設計,就是針對自己產品有相似的功能可以直接借鑒。比如在做優酷和愛奇藝兩款產品對比發現,視頻的固定比例16:9、彈幕功能都是在最左側,并且都會對新注冊的用戶進行VIP會員服務購買的指引,反觀自己的產品在做視頻播放功能也可以采用視頻的固定比例16:9,引導VIP服務購買指引的功能,不要出現3:4等其他尺寸影響用戶的慣性體驗。


          ·差異化的設計,就是考慮其相同功能,但是產品背景原因不同造成設計不同的樣式,比如快手和抖音兩款產品,都有關注功能,快手關注后會有標簽展示,而抖音卻沒有。分析后可以得出結論是兩款產品的頁面布局不同,抖音有底部tab欄而快手沒有,如果抖音關注后也有“已關注”的標簽展示,加上tab欄的高度有可能會遮擋住視頻畫面,影響用戶直觀感受,我們在設計類似視頻功能時候,是不是也要考慮一下有tab欄的設計樣式和沒有tab欄如何選擇呢。



          b 間接競品找相同設計

          通過間接競爭找相同設計和通過垂直競品找相似設計有些類似。間接競品因為用戶群體高度重合,業務領域或是核心功能上有類似的地方,是找相同的設計點很好的辦法,這些共同點都是我們需要借鑒和避免踩坑的地方。


          比如大眾點評/小紅書都是種草社區的產品,在首頁Feed流推薦的功能上,卡片的設計上就可以找到相同的設計( 圖片比例、內容布局、播放圖標樣式),降低用戶的學習成本,促成大眾點評用戶往小紅書產品上用戶流量的轉換。



          c 翹楚競品找靈感設計

          如果我們在做競品分析時候只挑選垂直類和間接類的產品進行分析,最后的結論只能是和競品很像很難走出“抄襲”的困境,在這個時候同類競品就派上用場了。


          利用同類競品可以激發靈感創造更多可能性,比如自如的設計師可能借鑒了喜馬拉雅產品滑動Banner背景圖片更換的設計亮點,再加上騰訊動漫對主題形象破形的處理手法,形成了現在獨特的自如Banner表現形式。


          當然他們的設計不僅如此,還增加了更有趣的設計亮點,Banner采取重力感應設計方式,圖片中的所有元素會實現x軸的位移。


          當手握住手機左右搖晃的時候,可以感受Banner元素竟然會動,這不失為一種通過翹楚競品找尋靈感的設計案例。






          四、需要對比什么


          挑選出合適的競品之后,我們不可能把全部的競品功能都做對比,一般都會分析以下四個維度進行對比功能對比、價格對比、用戶體驗對比和服務對比,如圖:






          五、需要分析什么


          產品的分析是指對原始信息進行整理、歸納、推理,使信息轉化為有價值結論的過程,接下來我就以網上一個咸魚的競品分析案例,梳理一個產品大致可以從以下4個維度進行分析。


          a 對產品屬性的分析

          在了解行業信息那一個部分,我們講到通過第三方平臺查閱對行業、市場的研究報告,這個時候就派上了用場。


          前面做的行業了解,都是為了進一步對自家產品的分析,比如我們就可以從七麥數據這個平臺,獲取一些咸魚和競品的數據。



          b 對用戶畫像的分析

          對用戶的分析可以從用戶的基礎屬性和用戶消費這兩個維度入手,看看彼此的目標用戶的需求上有哪些異同點,比如對核心用戶的分析(最忠誠的用戶群體是那類); 對主流用戶的分析(占領最大的用戶群體是那些); 用戶構成的分析(各類用戶群體的比例構成)。


          基本屬性:姓名、性別、學歷、婚姻狀況、興趣愛好等。

          用戶消費:從事行業、職業、收入水平、設備型號。


          對用戶進行分析之后并沒有結束,最重要的是得出自己產品的用戶畫像,可以參考以下四個問題給予自己分析維度的思考:

          ·競品的目標用戶是誰?有哪些關鍵特征?與自己產品的目標用戶群一致嗎?

          ·競品的用戶數據,包括活躍用戶數、付費用戶數、ARPU值等。

          ·用戶對競品優、劣勢的看法。

          ·用戶喜歡產品的哪些功能?不喜歡產品的那些功能。



          d 對功能對比的分析

          另外就是對產品功能的對比分析,可以把競品的主要功能路徑畫出來,思考競品為什么做這個功能,做這個功能會給產品帶來什么好處,把自己認為重要的功能列舉出來,再看看哪些平臺有,哪些平臺沒有等等。


          對競品功能對比分析并不是把功能簡單地羅列出來,最重要的是通過功能的對比,幫助梳理出用戶需求的痛點,發現自己產品的問題,尤其對后續的改版的方向都可以在對產品功能的解析中找到答案。



          e 對功能數據的分析

          對于數據的分析可以理解為對功能對比分析的升華,假設我們提案一個產品功能是否值得上線,這時就需要產品的數據增長波動,來佐證提案的可行性。


          一般在進行產品數據收集的時候我們可以把目光鎖定在兩個數據維度——基礎數據和趨勢數據,我們需要用兩個維度的數據去判斷產品的體量和目前的階段狀態。


          基礎數據的范圍有:產品的日活躍用戶數字、周/月活躍用戶數字、使用時長/下載次數、版本號/最后更新時間。

          趨勢數據的范圍有:產品在一年內的用戶的增長情況或者固定周期的總注冊用戶量/下載量/有效轉化率的趨勢情況、產品平臺及官方的排名情況。這里再推薦兩個針對查詢產品數據趨勢比較好用的網站。






          六、以終為始復盤總結


          以上5步全部做完還是不夠的,最重要的還是競品分析的結論,也就回到了開篇那個問題,我們的目的是什么?達到了嗎?


          很多同學的競品分析,就是為了分析而分析,并沒有總結出一個結論。沒有結論前面所有的分析豈不是就沒有任何的意義, 沒有結論的話又按照什么方向去迭代產品升級改版呢?所以說


          ·一定要有最后的結論:雖然結論很主觀但是也要有結論,沒有結論的競品分析是展示報告,是沒有意義的。

          ·結論要具有真實性:是推導出來的而不是硬加上去的,要知道一個錯誤的結論比沒有結論的后果更可怕。


          文章很長,我們來做一個小練習吧~











          有些同學們在做競品分析時候,先找到市面上的最火爆的直接競品,把自己的產品與直接競品一一對照,把設計亮點直接copy;或者是找到間接競品、翹楚競品找到與自家產品共有的功能,取一部分粘貼復制到自己產品身上。


          這樣的做法并不是錯誤的,只會讓自己產品與競品相似度很高很難讓我們的設計改版具有創新性。為什么大家做競品分析相似度很高,我認為問題出在目標不夠明確和方法使用不正確這兩點上。


          接下來我就用錘子和釘子的關系,向同學們一一說明,競品分析的十錘法則,希望大家在不同的競品分析目標面前用對競品分析方法。





          一、對比表格法——最為直觀的對比工具


          釘子:

          常用于競品的橫向比較,比如想要全面地了解一個功能的概況。或者是當我們思考某個功能元素是否需要保留,可使用對比表格法。


          錘子:

          對比表格法是競品分析最經常用到的一種分析方法,衍生的還有打勾比較法、評分比較法和描述比較法三種形式,常用于視覺競品分析里面。


          打勾比較法通過與競品的功能一一對比打勾,有的話就在表格上對應位置打勾,不存在就空著。用這種方法來了解自己產品與競品在產品功能上的差異,全方位地了解競品的功能分布,為自己的產品是否加入這個功能規范做參考依據。


          評分比較法多用于體驗設計中,把自家產品都有的功能得分列成一行作為一個標準,把競品的數據依次排列,可以直觀看到與競品之間數據的差異。


          另外描述比較法這種方法比較的是競品的功能細節、界面的比較等功能,并且跟上自己的觀點和看法,在競品中也很常用,如圖。





          二、用戶體驗地圖——發現用戶痛點的工具


          釘子:

          當自己不知道產品的問題是什么?或者想避免自己產品在產品體驗上犯同類錯誤的時候,可以使用用戶體驗地圖,算是一種尋找產品問題、用戶痛點的方法。


          錘子:

          用戶體驗地圖的意義是在于分析前模擬用戶的視角去發現用戶整個行為的痛點,發現用戶要的是什么,而不是說我們想在產品上放什么。


          建立多張用戶體驗地圖可以對比不同的產品在流程中的不同,發現并記錄流程中的共同的問題來幫助設計師避免自己產品犯同類錯誤。






          三、競品畫布—— 最小可行性方案


          釘子:

          當時間排氣不充足,但是需要快速出一份競品分析的場景交付到領導面前的場景時候,可以采用競品畫布的方法。


          錘子:

          競品畫布是提前避免不符合領導需求造成返工和浪費時間的工具,比如領導想讓你寫一份競品分析報告,先通過競品畫布快速地寫明分析的目標、挑選競品范圍等信息,再找領導確認是否符合領導要求,確認和領導所期望的目標一致后再投入大量精力做詳細的競品分析。

          以下是我在網上找到的制作競品畫布的要點,建議大家收藏。

          1、競品分析的目標要明確,最好能夠解決產品當前面臨的問題。

          2、選擇競品時先發散后收斂,初選階段可以把眼界放寬,避免遺漏重要的競品;精選階段要收斂,聚焦到3個左右的競品做重點分析。

          3、分析維度取決于分析目標,最好寫出分析維度的選擇理由。

          4、搜集競品信息時,除了常規渠道,還可以考慮合法的非正式渠道。找不到關鍵信息時,可以嘗試在公司內部尋求幫助。

          5、優勢、劣勢是企業內部的,最好不超過5個。

          6、機會、威脅是外部環境,最好不超過5個。

          7、建議總結要具體,不要泛泛而談,同時要考慮可操作性。





          四、精益畫布 ——分析商業模式的工具


          釘子:

          精益畫布應用于以下兩個場景:


          ·想知道自己產品商業模式是否完成或者存在紕漏或者是想清楚競品在某一個功能上這樣做在商業上是怎么想的。

          · 想判斷產品的商業模式、運營渠道等各個方面是否一致等問題。



          錘子:

          精益畫布常用于產品成熟階段的產品,做產品商業模式分析,建立產品全局觀,檢查產品商業功能清單來使用,一般產品經理或者是產品戰略者的角色會使用。比如OFO這種體量比較大的公司會用到精益畫布,制定產品戰略,如圖


          以下是關于 精益畫布的模塊構成,需要的自行復制吧:

          1、問題:目標用戶最需要解決的3個問題是什么?用戶有哪些痛點?

          2、用戶細分:你的目標用戶是誰?這些用戶有哪些關鍵的特征?

          3、獨特賣點:為什么用戶要選擇你的產品而不選競品?你能以清晰、獨特、令人印象深刻的方式說明為何你的產品更加優異或者卓爾不群嗎?

          4、解決方案:你能為現存問題找到正確的解決方案嗎?

          5、渠道:如何將產品或服務送到用戶手中,又如何收取用戶支付的款項?如何與用戶保持連接?

          6、關鍵指標:哪些數據指標能讓你了解產品的真實狀況?

          7、競爭壁壘:如何為產品構建“護城河”?無法被對手輕易復制或買去的競爭優勢有哪些?

          8、成本分析:做這個產品的直接成本和間接成本都有哪些?

          9、收入分析:產品如何賺錢?收入能大于成本嗎?何時能達到盈虧平衡?





          五、PEST 模型 ——預測市場、大環境的工具


          釘子:

          屬于宏觀層面的分析,是一種想要了解市場大環境、市場趨勢,直觀地找出機會與威脅所在的方法。

          比如2018年p2p網貸行業集體暴雷,因為政府的監管制度的完善,一大批不合法律法規的p2p平臺倒閉,預測未來p2p的市場份額將會減少。再比如,當今中國市場人口老齡化嚴重,年齡分布不均勻等情況屬于社會分類的范疇,預測未來適老化的產品可能會成為互聯網市場下一個風口。


          錘子

          在一張大白紙上畫出4個格子,團隊成員分別代表“政治、經濟、社會、技術”盡可能多地羅列關鍵詞填寫到4個格子中,最后集體投票,每個格子選出得票較高的3~5個點子作為PEST分析的結果。






          六、競品雷達圖 ——不同競品功能對比的工具


          釘子:

          不知道自己產品的競品如何分類的,常用來對比多個產品或者同一產品的多個方面的非常好的工具。


          錘子:

          雷達圖起源于財務狀況的綜合評估方法,通過雷達圖的繪制可展現公司各項財務指標,后被人應用于互聯網行業,稱競品雷達圖(又叫蜘蛛圖)。

          競品雷達一般選6個-9個維度分析,這9個維度參考尼爾森的十大可用性原則自行組合,進行產品分析。





          七、四象限矩陣 ——區分競品類型的工具


          釘子:

          對自己產品的優勢、劣勢不明確,判斷現有的產品是否需要重新定位,并幫助我們重新找到合理的定位的場景的工具。


          錘子:

          矩陣分析法是一個場景的分析法,以四維矩陣的方式分析自己的產品與競品的定位、特色或優勢,最大的好處就是可以梳理清楚市場中存在的空白點。以下圖為例,在嚴肅和親民這個范圍領域就是沒有這個產品,企業是否可以在戰略層面上投入開發成本,開發這個空白領域的產品,搶占市場。





          八、SWOT 模型 ——制定戰略規劃的工具


          釘子:

          SWOT是一種基于四個要素的戰略規劃方法,與PEST模型不同的是這個SWOT模型不僅可以幫助梳理產品優勢和劣勢,還可以制定企業的競爭策略和未來開發的計劃規劃,是一種既可以分析產品/公司內部(優勢、劣勢)外部(機會、威脅)競爭環境的工具。


          錘子:

          S、W 指產品內部有哪些優劣勢,O、T 指的是產品外部市場存在哪些機會和威脅。簡單地來說就是將與研究對象密切相關的各種主要內部優勢、劣勢和外部的機會和威脅,通過四個格矩陣排列出來,加以分析,從中得出一系列相應的結論,而這個結論是帶有一定決策性和預測性。


          我自己使用的時候會把這個方法放到競品分析和總結的那部分,比如在競品分析前半部分把宏觀層分析完、競品的功能亮點對比完,最后進行輸出總結歸類到產品的優勢和劣勢,再預警一下現階段可能會出現的問題,預測一下以后的機會。





          九、五層九緯度法


          釘子:

          對于做競品分析一點頭緒都沒有的同學,可以使用這個五層九緯度法(也叫用戶體驗五要素)。


          錘子:

          一套完整的競品分析其實和做產品思路一樣,將復雜的事物抽象成分層的模型,能讓人直觀、清晰地獲取其內在的邏輯,算是比較常規的方法了。





          十、可用性測試 &用戶訪談


          釘子:

          使用場景分為兩個,第一個是針對競品分析前不知道競品哪個功能來說對用戶意義重要;第二個是競品分析后驗證自己產品中某個功能改版是否成功。


          錘子:

          可用性測試的意義在于如果不用競品的產品,自己可能不能真實地感受到競品好在哪里,就不能真實找到競品在體驗層面上值得我們借鑒的功能是什么。它除了可以還原競品功能對用戶真實的體驗之外,更是一個驗證功能改版是否成功的工具。之前講到了數據是有欺騙性,數據會受環境因素所影響,有些數據是代替不了可用性測試和用戶訪談的結論的真實性。










          通過以上的講解,我相信大家對“競品分析”會有一個更為深入的認知,雖然大家較為清晰地知道了競品分析的概念、制作流程以及方法,但是在我實際工作中經常出現以下9個問題,值得注意。




          一、要注重平時積累


          人的認知是有局限性的,尤其是接受一個不太熟悉的觀點時候,就好比你讓雕刻工刻一個馬的扶手,因為描述不清楚的問題,他可能會刻成一個驢的扶手。


          我們在論證一個觀點最好就是舉例論證,這樣才能做到有理有據,所以要注重平時的素材積累,有一定的知識儲備,做到觀點都有資料可以佐證避免假大空,不會出現低級錯誤。最好把競品分析當作一個產品來做,用產品思維(有邏輯性)做競品分析。






          二、不要定過大的目標


          競品分析絕對不是說找不同,競品分析方法千千萬,無論是在分析前,還是分析后,跟著目標走才能得出有價值的結論,最終做到產品設計人無我有,人有我優的終極目標。我梳理了兩類目標,供大家思考自己做競品分析的目標。


          現在互聯網公司的發展相當快,已經沒有那么多時間讓我們做大而全的競品分析,對于初創公司來講,有可能做完競品分析公司都倒閉的尷尬局面。所以,小而精地分析、跟緊產品、業務的腳步才是企業需要的。





          三、分清楚給誰看


          知己知彼,百戰不殆。分清楚給誰看也是容易犯的一個錯誤,最好要問清楚最終呈現給誰看,因為同事、領導、老板的角度不同所以需要看的切入點就不同。


          ·老板的角度:競品在行業中的影響力、目前行業的經營狀況如何、自己產品的發展方向怎么樣,競爭對手的經營狀況怎么樣。


          ·團隊/領導的角度:競品的產品功能、交互設計、視覺的優點和缺點是什么;有沒有創新性的產品體驗點可以應用到產品迭代中去,決策是采納A方案啊,還是采納B方案或者是還有更好的C方案。


          ·自己/同事的角度:為了更好地執行領導們定的目標,自己或者團隊內部協調的同時,需要用到什么方法把任務完成好。





          四、多用事實佐證結論


          分析是一個嚴謹的過程,得有理有據讓人信服。在分析報告里面,發現很多分析的數據沒有標明來源,可信度真的不高。設想如果是把這樣一份數據來源不明確的報告遞到一個企業決策者辦公桌上,他敢作出決策嗎?我看很懸。


          所以在分析報告中,事實一定是嚴謹可信的,是市場上認可的,這樣通過分析得出來的觀點才會不帶有主觀臆測的。






          五、注重產品深度&上下文邏輯


          正所謂,學我者生,像我者死!在與競品進行比較階段的時候,并不是什么情況下去模仿照搬,應該把關注點放到競品這么做的背后原因。一個上層建筑的高度和樣式必定由其底層地基決定,產品也是如此,雖然是一個簡單的功能,也可以從數據、產品定位、用戶群體、經營策略等層面,多注重自己產品與競品的對比,挖掘產品策略背后的原因,為后期迭代思考我們是否可以去優化做準備。


          另外一點我想說的是注重邏輯,有些競品分析一會兒分析市場大環境,一會分析產品核心功能,看似面面俱到,但是分析的主線思路不清晰,缺乏邏輯關系,形式歸于表面。





          六、選擇最為合適的分析方法


          做競品分析常規的方式是先挑選3-5個競品,圍繞用戶體驗要素(戰略層、范圍層、結構層、框架層、表現層)對競品展開分析,我知道大家都是受了ajax之父jesse james garrett的經典之作《用戶體驗要素:以用戶為中心的產品設計》的影響,我最開始入行的時候也是我的啟蒙書。


          但是大家要清楚“由于產品不同、受眾用戶不同、產品階段不同、分析目標不同競品分析最終呈現的樣子就會不同,”如果大家都用這五層去寫的話,避免不了有套模板的嫌疑。


          這里列舉一個不恰當的例子,2015年時候互聯網很流行“互聯網+傳統行業”的創業概念,但互聯網+并不是適合所有行業,要認清自己產品適合“互聯網+傳統行業還是傳統行業+互聯網”,了解清楚自己產品的特長,清楚誰主導誰的,處于什么產品階段后再做決策,不要跟著主流輿論裹挾,盲目做選擇。


          除了我所講的通過適合競品的方法來審視自己產品之外,還有一點值得大家注意的就是設計方案的合理性,尤其是在UI設計當中,并不能保證設計方案是一直對的,只能說在某一個產品階段或者應對某一個問題設計方案是最好的方案,更為精準的說法是設計方案沒有絕對的正確和錯誤,只能說那個設計方案更合適當前這個需求。





          七、形式與內容同樣重要


          我看了很多競品分析,內容深度很深,視角也很獨特,觀點也很鮮明有價值,只是其表現形式太難讓人閱讀下去。我們是設計師,競品分析的結論固然重要,但是精心包裝才能更好地傳遞競品分析的價值本身,這也是體現我們基礎設計師價值的一部分。


          設計領域中的眼球理論也是如此,一份好的競品分析,務必在視覺包裝上下點功夫,通過合適的邏輯結構進行梳理,可以讓你的觀點更易于理解并接受,配上適當的圖文制作成PPT,保證文字信息可以高速清晰地進行傳達,讓讀者第一眼就有繼續閱讀的興趣。正所謂好的內容+好的設計形式=易于別人接受,才能發揮最大的效用。





          八、務必要自我檢查


          細節決定成敗,很多同學按照流程步驟一一分析了,得出了結論也是真實有效的,認為競品分析就完成了。


          我們的目的不是交付100分的答卷,而是交付100+的答卷,自我檢查是提高自己的能力的好方法,如果工作周期允許的情況下,還是要從頭到尾,把競品分析查缺補漏,這樣也利于發現更有價值的信息。





          九、持續跟蹤,保持節奏


          競品分析不是一次性的事情,它對團隊來說是每時每刻的,因為市場和需求是不停地更新,做競品分析也是一個了解市場了解產品的手段,需要持續更新的。可以說它是貫穿整個產品迭代的始終的,把握節奏可以讓你更從容地應對市場的變化,建議至少半年更新一次。










          總結


          競品分析在不同的階段能給我們的產品帶來不同的效益,學習好競品分析也能避免走很多的彎路。


          最后,感謝文章內容案例的作者,寫這篇文章著實不容易 ,查閱了大約40個競品分析,但編成系統方法寫出來真的很耗心神。


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

          文章來源:站酷  作者:斜杠7濕兄

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

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

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


          從易讀性和易操作性兩大方面,如何做好表格設計

          資深UI設計者

          導語:提起中后臺,除了高效、靈活和強大之外,不可忽視的還有它的海量數據。海量數據的篩選與呈現,直接決定決策人員的效率高低。本文作者主要是結合自己在實際工作中遇到的表格設計問題,針對Web端數據呈現方式之一,表格的設計進行探討。

          表格,是一種常見的信息組織整理手段。常用來展示、保存、對比分析、排序、篩選 、歸納等,是最清晰、高效的數據展現形式之一,由內、外兩部分組成。

          • 內部:由表頭、表體、表尾共3部分組成;
          • 外部:由篩選區域、操作按鈕區、分頁區共3大類組成。

          從易讀性和易操作性兩大方面,教你做好表格設計

          說完表格的組成,接下來將會從易讀性和易操作性兩個方面來分析下表格設計。

          易讀性

          1. 行與列

          表格的組成,也可以看作行與列的自由組合,這種組合賦予了表格多樣性的特點。行與列構成了單元格的長與高,不同的長高會有疏密之分,充實與透氣之感。

          B端中后臺通常會對應不同的角色及場景需求,根據目的及信息主體的不同,讓用戶根據自己的需求來定義表格的展示列及列的順序,也可以通過行與列的顯隱變化,來更好的滿足信息的傳達。

          但需要注意的是系統應記住用戶上一次的自定義列設置,減少用戶重復操作。對于列的選擇,應盡量減少列的數量,既要展示用戶必要信息,又要避免出現用戶無關數據,以免信息冗余,影響信息閱讀效率性。對于用戶需要的非重點、輔助性信息可以通過入口提供的方式來解決。

          默認排序,應從用戶目的出發,遵循用戶查看數據的習慣,尊重數據之間的關聯性,設計用戶查看、操作數據的路徑,而非隨機排列。

          從易讀性和易操作性兩大方面,教你做好表格設計

          2. 數據展示

          B端中后臺中的表格展示的數據多且雜,這就要為用戶先一步對數據進行梳理歸納,提高用戶獲取信息速度。

          為便于對數據進行對比分析,一般需要在原始數據的基礎上給出差值、升降變化、平均值、總計等數據處理結果,減少用戶二次加工數據的過程,提升用戶閱讀信息的效率。

          數據匯總展示

          在表頭或者表尾分別提供了總計的數據,方便用戶進行快速查閱。

          從易讀性和易操作性兩大方面,教你做好表格設計

          數據對齊展示

          常用對齊方式有數字右對齊,文字左對齊,混合型文本左對齊,列標簽的對齊方式與數據的對齊方式保持一致。這樣能形成的視覺邊界線,便于視線的流動,從而快速提升數據的瀏覽、對比效率。

          從易讀性和易操作性兩大方面,教你做好表格設計

          空數據展示

          B端中后臺數據類型較多,對于空數據,切忌不要與數據為“0”進行混淆,對于空數據通用做法是用“-”表示,而不是什么都不顯示,會讓用戶誤以為是沒有數據還是“0”數據。

          最好做法就是為空數據做出釋義,可以加在“列標簽”的名詞解釋文案中。

          從易讀性和易操作性兩大方面,教你做好表格設計

          數據的關鍵屬性標識展示

          對于用戶重點關注的數據狀態、上升和下降等,可以用符號進行標識,幫助用戶快速定位到目標信息。

          從易讀性和易操作性兩大方面,教你做好表格設計

          3. 固定表頭、固定列和固定分頁

          在有限屏幕內,有限的內容展示區域內,閱讀豐富且繁多的表格時,用戶不得不拖動橫向或縱向滾動條來閱讀信息。

          固定表頭、固定列和固定分頁,能夠讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思。

          固定表頭

          在固定的小區域內滾動會非常局促,而且區域滾動和全屏滾動同時存在時體驗也很不好。固定表頭可幫助用戶識別信息,在全屏滾動上去后固定表頭,有利于用戶向下翻屏時能夠便利的閱讀數據。

          從易讀性和易操作性兩大方面,教你做好表格設計

          固定列

          固定列的內容可視業務及目標用戶的訴求而定,一般采用方法是固定比較重要信息,方便用戶進行數據定位與對比,最好可以讓用戶自定義,滿足不同用戶訴求。

          從易讀性和易操作性兩大方面,教你做好表格設計

          固定分頁

          分頁處理目前有放在上部、下部或上下部均有,需要根據場景來選擇。分頁固定目的是為了省去用戶需要翻到頂部或底部進行操作的麻煩。

          特別是可以自定義每頁的數量和需要橫向拖動數據查看,這就需要把分頁固定在底部,方便用戶橫向拖動滑條查看信息和進行翻頁操作。

          從易讀性和易操作性兩大方面,教你做好表格設計

          4. 分頁

          在Web端中的表格,涉及到跨頁的數據操作時,分頁會帶來不便。

          但往往受限于數據加載的壓力,這種情況在大廠中尤其突出,加載數據都是億量級別的,在Web端和手機端都需要實時下載數據的終端,我們通常做法就是提供分頁展示數據來緩解服務器的壓力。

          表格中的的數據內容超過一定“數量”時需要提供翻頁功能,而這個“數量”是由表頭的數據的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定。

          原則上整張表不要超過一屏,考慮到每個用戶的使用習慣,我們一般提供可以讓用戶自定義每頁的顯示的數量,相比于跨屏翻頁而言,向下滾屏會更便利,也更符合瀏覽信息路徑。

          從易讀性和易操作性兩大方面,教你做好表格設計

          5. 全屏查閱

          表格全屏展示是非常有必要的:

          • 特別是在小屏設備上,全屏模式下可以直接屏蔽掉左側導航欄、上方的報表區域和頂部的導航欄,可為用戶提供更多可視區域。
          • 在大量數據前面,可為用戶提供沉浸式閱讀體驗,讓用戶更加專注,可減少與表格無關的視覺干擾。
          • 用戶可通過ESC鍵或關閉按鈕隨時退出全屏模式,操作成本低。

          從易讀性和易操作性兩大方面,教你做好表格設計

          易操作性

          1. 篩選

          在大量的表格信息中,如果沒有篩選查找信息簡直猶如大海撈針,而表格跟篩選是不分家的。

          說到表格一定會說到篩選,篩選也就是數據過濾,常在數據量較大的場景中使用,其目的是通過關鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內容。

          對于表格外部篩選,如果有時間會單獨出一篇詳情介紹。這里不展開詳細說。

          篩選根據篩選功能的位置不同,可分為表外篩選和表內篩選。

          • 表外篩選:篩選功能位于表格上方,與表內篩選的不同之處是過濾值可以不限“表格列”的內容、可單次進行多列的交叉篩選。
          • 表內篩選:篩選功能位于表格內,也就是放置在列標簽上的篩選,受“表格列”內容的限制,僅能做單次單列的篩選。

          從易讀性和易操作性兩大方面,教你做好表格設計

          2. 數據選擇

          在信息列數較多的情況下,數據的選擇就尤為重要。當鼠標指針懸停在表格列或行時,給予視覺狀態的變化提示,可以讓用戶捕捉到所在的位置,而不至于視覺上的錯行,能夠降低人的心理壓力和增加掌控感。根據數據選擇功能分為單個選擇和批量選擇。

          單個選擇

          鼠標指針懸停在整行時應與默認態有所區分。當標識選中行或選中行的數量,選中行可操作的命令狀態須同步,明示當前行可操作的命令或反饋當前已選行的數量。

          從易讀性和易操作性兩大方面,教你做好表格設計

          批量選擇

          提供選擇當前頁部分行、選擇全部行、取消選擇全部行三種功能;狀態反饋分為半選態 、未選態、全選態共三種。

          • 當用戶未進行選擇時,表頭的選擇框的狀態是未選態;
          • 當用戶選擇一行數據時,此時表頭的選擇框的狀態切換為半選態,同時反饋此行的數量;
          • 當用戶在表頭勾選“當前頁所有行”時,表頭的選擇框切換成了全選態,且給出了選擇“全部所有行”的操作。

          從易讀性和易操作性兩大方面,教你做好表格設計

          3. 數據操作

          對于數據的操作,主要針對表格內部來說。表格操作大體可分為顯性操作和隱形操作。

          顯性操作

          指操作選項顯示在行內,優點是明顯直觀,可以根據列表上的信息做出快速的判斷并且高頻發生的操作。

          適用列數較少的列表。但弊端是信息過載,尤其是列數較多,可展示列數會隨操作數增加而減少,同時誤操作率較高。對于危險系數比較高的操作,也不建議采用這種設計。

          從易讀性和易操作性兩大方面,教你做好表格設計

          隱性操作

          當鼠標懸?;螯c擊時才顯示其他低頻、高危的操作選項,優點是界面簡潔明快,信息密度低,可以幫助頁面突出更加重要的信息,可減輕空間壓力,減少干擾。

          弊端是增加用戶的點擊次數和提高了操作門檻。列數較少的表格不適用隱性操作。

          從易讀性和易操作性兩大方面,教你做好表格設計

          4. 數據下載

          為方便用戶對數據進行再次整合分析、統計分析等,可提供數據下載功能及多種下載格式。

          從易讀性和易操作性兩大方面,教你做好表格設計

          5. 空表

          對于B端中后臺來說,表格顯示最多就是兩種情況:一種就是表格有數據,這種最容易解決,有數據就顯示相應數據;還有一種表格是沒有數據,也就是空表狀態,這也是讓很多設計師容易忽略掉的頁面。

          空表分兩種:可創建和純展示

          可創建

          是用戶有創建訴求,數據是由用戶或系統產生的,可創建分兩種:

          • 比較輕量的方式,是直接示意用戶創建數據,無須給出表格樣式。
          • 在表格的空白內容處加入創建的快捷入口,引導用戶新建。

          從易讀性和易操作性兩大方面,教你做好表格設計

          純展示

          沒有創建訴求的,數據是系統產生的,不是由用戶創建的,直接告之暫無數據。

          從易讀性和易操作性兩大方面,教你做好表格設計

          寫在最后

          看上去平淡無奇的數據表格,其實是非常重要的,通過合理的組織架構和呈現方式,使原本枯燥的數據呈現出生命力,這是一件很神奇的事。

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

          文章來源:優設  作者:WOWdesign


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

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

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



          常見的網頁布局設計

          資深UI設計者

          為什么了解網頁布局很重要?網頁布局在很大程度上決定了網站的訪問者將如何與網頁內容進行交互。

          這里將介紹一些常見的網頁布局形式,例如卡片式、分屏布局、網格布局……一起來看看吧!

          卡片式網頁布局

          卡片式布局被Pinterest、臉書和推特等網站所使用,它非常適合在新聞網站和博客上使用,因為卡片式布局可以在頁面上放置大量內容,同時又保持每部分內容各不相同。

          卡片式布局主要有兩種形式:

          網頁中每個卡片的尺寸相同,卡片的排列非常標準,例如Dribbble的網頁布局;

          用一篇文章,帶你了解12種常見的網頁布局設計

          使用不同尺寸的卡片組成頁面的布局,卡片間沒有固定的排序,例如Pinterest、花瓣的頁面布局。

          用一篇文章,帶你了解12種常見的網頁布局設計

          分屏布局

          當兩個元素在頁面上具有相等的權重時,分屏布局是一種流行的設計選擇,并且通常用于文本和圖像都需要突出顯示的設計中。

          分屏設計特別適合電子商務網站上的產品頁面。產品圖片需要在頁面上突出顯示,但價格、規格、購物車按鈕等信息也要顯示。

          用一篇文章,帶你了解12種常見的網頁布局設計

          大標題

          隨著移動設計的盛行,大標題排版變得流行起來。大號字體在標題中特別流行,在一些網站的正文中也能看到。

          用一篇文章,帶你了解12種常見的網頁布局設計

          較大的文本更具可讀性,可以改善使用體驗。另外它還提供了強大的視覺效果,因此這種布局在極簡主義設計中特別受歡迎。

          用一篇文章,帶你了解12種常見的網頁布局設計

          個性化推薦

          個性化算法推薦可以根據每個人的喜好量身定制數字體驗。人工智能技術的發展讓算法變得更易用,能精確分析用戶的喜好。

          根據用戶之前的訂閱習慣,Netflix可以為用戶個性化推薦他們最有可能觀看的電影。

          用一篇文章,帶你了解12種常見的網頁布局設計

          像Medium這樣的網站會基于用戶以前閱讀和喜歡的內容,向他們展示很多同類型的文章。

          用一篇文章,帶你了解12種常見的網頁布局設計

          網格布局

          網格為設計提了視覺上的平秩序感,以一種平衡且有組織的方式呈現內容,使內容更易于人們使用。

          用一篇文章,帶你了解12種常見的網頁布局設計

          在網格設計中使用不同大小的內容可以在保持內容有序的同時增加視覺吸引力。

          用一篇文章,帶你了解12種常見的網頁布局設計

          雜志版式布局

          雜志和期刊的布局方式影響了網絡雜志的版面設計。這些網頁布局很適合有大量內容的網站,尤其是每天都需要更新內容的網站。

          用一篇文章,帶你了解12種常見的網頁布局設計

          單頁布局

          單頁布局將網站的所有主要內容放在一個網頁上,通過滾動完成導航,有時還使用視差滾動效果。

          用一篇文章,帶你了解12種常見的網頁布局設計

          對于內容稀疏的網站,單頁布局是一個很好的解決方案。同時它也是內容敘事的完美選擇,比如交互式兒童讀物。

          用一篇文章,帶你了解12種常見的網頁布局設計

          F型&Z型布局

          F型和Z型布局是指用戶的視線如何在頁面上移動,即用戶如何掃描內容。F型布局有非常明確的視覺層次結構,因此適合內容更多的頁面。

          用一篇文章,帶你了解12種常見的網頁布局設計

          Z型布局將視線吸引到頂部,然后沿對角線方向向下延伸到底部,然后再次延伸。

          用一篇文章,帶你了解12種常見的網頁布局設計

          不對稱布局

          在設計中,不對稱會產生動態化的視覺沖擊力。大多數情況下不對稱是由于圖像和文本間無法平衡而造成的。

          用一篇文章,帶你了解12種常見的網頁布局設計

          由于不對稱會產生動態的、充滿活力的視覺印象,因此對那些想要傳達這種形象的品牌來說是非常有用的。

          用一篇文章,帶你了解12種常見的網頁布局設計

          簡潔布局

          這種布局的優點在于完全專注于內容,沒有視覺上的混亂。

          干凈簡單的布局幾乎適用于任何類型的網站。許多優雅的網站都可以被認為是“簡潔的”,無論它們包含什么設計形式。

          用一篇文章,帶你了解12種常見的網頁布局設計

          導航標簽

          導航標簽適合用于包含少數項目的菜單,否則導航會顯得很混亂。

          用一篇文章,帶你了解12種常見的網頁布局設計

          輪播

          輪播內容包含圖像和文本,通常出現在網站的頂部,用來突出顯示內容。

          用一篇文章,帶你了解12種常見的網頁布局設計

          總結

          好的網頁設計具有很強的適應性并且對用戶來說始終是友好的。

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

          文章來源:優設  作者:Clip設計夾

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

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

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



          如何做好網頁頭部內容設計?

          資深UI設計者

          無論作為設計師還是普通瀏覽者,大家觀看一個網站時最先接觸到的就是網頁的頭部區域,這部分內容為網站的其他各個方面設定了基調,在網頁設計中起著非常關鍵的作用。

          尤其是如今簡潔設計比較盛行,多數時候把頭部內容設計好就變成了吸引用戶眼球最好的辦法。網頁設計師在設計網站頭部時投入了大量精力,同時要兼顧創造力和實用性。根據一項Google的研究,用戶只需要短短數秒就可以形成對一個網站的看法,甚至有些觀點是在令人難以置信的1秒內形成的。用戶對品牌的了解就是從這么短的時間內開始的。

          頭部區域在哪兒?

          在通常網頁設計中,首頁上方的整個空間都被視為頭部區域。作為人們在加載網站后的最初幾秒內看到部分,頭部信息起到了一種邀請作用,它應該提供有關網站的基本信息,以便用戶能夠在幾秒內了解網站的主要內容。

          如果以招聘活動站點為例,整個頭部區域設計要明確傳達企業形象,及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象,企業已向你發出邀請,我們對人才十分渴求,等等信息… 如果有線上線下活動同時參與,那么在整體風格上盡量保持一致。

          如何做好網頁頭部內容設計?來看 58 設計師的總結!

          包含哪些內容與功能?

          網頁頭部的任務是給用戶提供一些基本問題的答案:代表什么品牌,提供什么服務等等。如果我們在內容上引起了用戶情感上的共鳴,那么就是正確的設計。

          那么主要元素通常包括:

          • Logo 或品牌標識
          • 交互指引
          • 標題Slogan
          • 導航要素
          • 搜索功能

          在設計網站頭部內容時,從思維層面來講沒有任何東西會限制你的創造力,它應該是令人難忘的、簡潔和兼具實用性的,是一個可以展示創造性的開放領域。

          下面讓我們一起來看看頭部內容設計的一些技巧。

          1. 關于尺寸

          對于網頁頭部圖片的大小是沒有統一的答案。有時候設計師希望提供相對固定的數字,但網頁設計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同,分辨率也可能不同,因此用戶看到的內容也不一定完全一樣。

          因此,我們不要拘泥于精確的像素概念,最好遵循經驗積累的常識規則。

          如何做好網頁頭部內容設計?來看 58 設計師的總結!

          頭部的高度本著不干擾內容感知的基本原則。對于一些展示信息資源的頁面,較小的頭部區域是一個不錯的選擇,而對于落地頁或者企業客戶首頁,頭部區域可能會更大,而且多數大客戶會有主視覺單屏展示頁。

          如果某些網頁,例如落地頁頭部內容較長的情況下,最好在首屏給下一屏內容露出一些空間,這樣用戶就可以意識到下一頁還有內容,引導用戶滾動。

          2. Logo展現

          當一個人發現自己在陌生網站上,總是習慣于從屏幕的左上角開始瀏覽網站。盡管設計師有時候認為打破常規的布局也可以帶來不錯的效果,但是多數用戶如果他們常規位置找不到預期的信息,將會不假思索地認為這個頁面是難用的和不規范的,需要花費很多的努力才能理解。這就要看你的設計目的和受眾群體能夠接受哪些程度的變化,我們今天主要說大多數受眾。

          如何做好網頁頭部內容設計?來看 58 設計師的總結!

          Logo ——與居中或右側放置相比,用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo,那么可以把它居中放置,盡管它的有效性仍然比放在左側要低。

          3. 吸頂導航欄

          吸頂導航,換句話說就是「粘性標題」,當你滾動頁面時,導航區在頁面中跟隨,現在成為一個網頁設計標準。如果不違反網站整體設計理念,請將導航欄吸頂固定。無論是PC端還是移動端設計,這都是一個好的選擇:

          • 例如長頁面展示、瀏覽內容同時客戶需要導航區總是在視線范圍內。
          • 如有滾動信息,不斷提示客戶點擊,則可置頂或置底處理。

          如何做好網頁頭部內容設計?來看 58 設計師的總結!

          可根據頁面內容展示要求,向下滾動時調整導航背景透明度,盡量少的影響內容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導航欄樣式或高度,使用戶能找到但又不過于搶眼。

          總之,固定導航欄有助于提升用戶體驗,保持用戶導向并給予了他們更多控制權。

          3. 關于圖片的應用

          頭部內容所用圖片可以選擇直接和要表達的業務相關性很強的,例如招聘類網站使用招聘場景圖片;也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內容;

          如何做好網頁頭部內容設計?來看 58 設計師的總結!

          高質量圖片——攝影對于網頁設計師來說是一個強大的工具。它可以講述一個故事,喚起用戶的情感,并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網站,試著做一個透明的標題,它可以更好地顯示圖像,并保留了主要鏈接。

          如何做好網頁頭部內容設計?來看 58 設計師的總結!

          輪播圖片——如果客戶給了幾張代表該企業業務的出色照片,這種方式就沒錯!企業希望用戶可以滾動瀏覽一組精美的高分辨率圖像。

          如何做好網頁頭部內容設計?來看 58 設計師的總結!

          插畫——網站的頭部圖片必須能引起讀者的共鳴,建立起人與人之間的聯系。如果圖片是獨特的且易于辨認,即使是從網站標題中剪切出來,效果也會很好,可以利用當今的插圖潮流來實現這一點。

          4. 視頻或動畫

          當然我們也不能只關注靜態圖片,添加視頻也是最有效的網站頭部創意之一。如果可能的話,嘗試著在頭部內容中添加主題視頻材料,很多網站利用在背景中添加短視頻來吸引用戶,盡可能以最好的方式展示他們的公司或產品。

          如何做好網頁頭部內容設計?來看 58 設計師的總結!

          △ 華夏幸福校招官網首頁動畫,撥云見日的效果加上中式剪紙風格的運用,將公司各業務線融合到幾個轉輪中,產生了故事性的動畫場景。

          如果想要使設計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網站頭部內容變得非???。以每季校園招聘企業站點為例,各大公司對應屆生群體的追逐,很大程度上體現在對該群體審美和喜好的迎合上,年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。

          當然不一定只有滿屏大型動畫,一般動畫越復雜面積越大占用流量越多,客戶打開延遲也影響觀感。這時候我們可以根據功能不同,設計一些交互性的動畫,去提升客戶使用感受,盡量不影響網頁打開速度。

          5. 移動端頭部設計

          網頁頭部不可能只顯示PC端的網頁上,還應該正確顯示在移動端的網頁上。因此,在近年的設計中,網頁必須具有響應性,并且能夠很好地適應各種移動設備,這樣才能帶給用戶完整的設計體驗。

          移動設備的日常使用廣泛性早已影響網站設計,即使在PC中,也有一些細節看起來像是面向移動設備的網站設計。例如,Banner和漢堡包菜單都起源于移動設計。

          如何做好網頁頭部內容設計?來看 58 設計師的總結!

          移動端有著與PC端不同的屏幕尺寸和操作方式,很多時候需要設計師在一開始就考慮到兩種界面的適應情況,比如在PC上頂部一條的導航,到移動端就演變為一個漢堡包菜單。而原本PC頁面中展開顯示的內容,在移動端會向下層延伸,首層界面成為一個內容聚合頁。

          寫在最后

          網站是以頭部內容為先導的,它就像是一張獨特的名片。因此,我們在設計網站時,盡可能最大限度地關注該區域。

          最后還要提醒大家,一定記得定期更新網站頭部內容哦!以校園招聘大客戶為例,大多數企業都會在每年春秋兩季的招聘旺季更新其招聘主題風格,以保持網站的新鮮感和時效性。

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

          文章來源:站酷  作者:58UXD

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

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

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




          中臺組件設計指南:系統布局

          資深UI設計者

          用戶在操作系統時所看到的頁面框架其實就是系統布局,它是一個產品最外層的框架結構,一般包含了頂部導航、側邊導航欄、面包屑、圖文、卡片、內容等元素。

          對于設計師而言,想要了解一個中臺,首先要了解它的系統布局,系統布局是頁面設計的基礎,它與頁面的關系,就如同建筑與地基的關系。日常完成需求時,UI 界面反復的調試頁面寬度與卡片比例會占用我們大量的時間。為了提高工作效率,并且把更多的時間放在業務、視覺創新等方面,我們就應該需要一套完整的布局規范。

          對整個公司產品體系而言,內部員工與普通用戶使用的操作系統達到幾十甚至上百個,單一的頁面布局滿足不了各個子項目的使用場景。所以我們從前期的布局框架設計調研到產品業務的特性,定義了中臺界面的幾大類型,并且在我們的設計規范中定義了幾大類型系統布局方式,根據其布局方式定制好柵格,方便日后在各個業務場景中使用,從而能夠保持一致性、并且可擴展,方便快速迭代和維護。

          了解布局

          1. 布局方法論

          視覺層次

          對于中臺的 UI 設計師們而言,良好的理性思維相對比感性的視覺思維更加重要,因為在 UI 設計師設計頁面時需要把很多互不相關的元素有秩序的組織在一起,正確引導用戶操作與使用。亨利·亞當斯(Henry Adams)曾經說過:「混沌是自然法則,秩序是人類的夢想」。人們總是喜歡秩序,因為秩序可以讓事情變得更容易理解。這同樣適用于數字產品的用戶界面,當 UI 元素被有序組合和結構化時,人們可以輕松的使用應用程序和網站,并對產品感到滿意,所以設計頁面時需要結合視覺層次理論。視覺層次理論是設計過程的核心方法之一。最初是建立在格式塔原理的基礎上,它觀察到了用戶對相互關聯元素的視覺感知,并展示了人們如何將視覺元素歸為一類。那么什么是視覺層次呢?官方概括:視覺層次結構致力于一種用戶能夠理解的方式呈現產品的內容,以便用戶可以理解每個元素的重要性級別。它可以組織頁面內容,以便大腦可以根據物理差異例如:大小,顏色,對比度,樣式等區分對象。

          蘋果的設計一直以來都是引領著設計趨勢,其設計被國內外用戶所認可,所以就以蘋果官網作為案例。其中,字重對比:蘋果官網在字重上給人眼前一亮的感覺,它采用 Medium+Bold 的字重使得標題與詳情內容產生強烈的大小對比,用戶進入官網的第一眼便能了解核心內容。顏色對比:在顏色上使用黑色背景承托產品和內容,強烈的黑白對比增強了信息傳播中的識別度和對比度。圖文排版:在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果,使得頁面層次感更加的豐富。如下圖:

          大廠高手出品!中臺組件設計指南:系統布局

          格式塔理論

          往往用戶打開頁面進行閱讀或者操作界面時視覺的第一感受是產品的整體效果,而并不會感知到一些較細節的元素。往宏觀來講當人們感知到一個物體由許多元素組成的復雜對象時,人們會采用有意識或無意識的方法將這些部分安排到整個組織的系統中,而不只是簡單的元素級。它適用于不同級別的感知,但是視覺部分似乎是設計師設計界面時最能體現價值的部分,這其實就是格式塔理論,格式塔(Gestalt)這個術語來自德語單詞 Gestalt,中文翻譯為「形狀,形式」。

          格式塔心理學家庫爾特·科夫卡(Kurt Koffka)的一句話可以捕捉到這一運動背后的基本思想:「整體不是元素基因的總和」。官網概括:「在心理現象中,人們對客觀對象的感受源于整體關系而非具體元素,也就是說知覺不是感覺元素的總和,而是一個統一的整體,部分之和不等于整體,因此整體不能分割」。格式塔理論中元素之知見的原則分別為臨近,相似,連續,封閉和連接。

          在我們的現實生活中有很多自然規律都遵守了格式塔原則,比如說每到秋天,北方的嚴寒氣候不再適合大雁生存,這時候大雁便會飛往較暖和的南方,當人們看到天空正在南飛的大雁隊伍,它們組織鏈接得十分嚴密,并且群體在往同一個方向移動,所以隊伍的形狀在我們的大腦中將它們視為一個群組的一部分,產生人字形或一字形的圖形。

          大廠高手出品!中臺組件設計指南:系統布局

          信息框架

          剛剛我們也介紹了視覺層級結構和格式塔理論,接下來簡單介紹一下信息框架,它也是在系統布局中需要考慮的內容。信息框架是將信息內容進行組織分層,一個產品的信息框架取決于其特有的業務,他與業務強相關并且需要了解用戶群體目標。根據業務和用戶目標將內容組織搭建信息框架,形成系統布局的骨架,方便用戶在瀏覽或操作頁面時能夠快速找到重點內容,提升用戶使用效率。我們用今日頭條 Web 端和飛書 Web 端兩個線上產品作為案例分析吧,今日頭條和飛書屬于兩種完全不同類型的產品,那么其信息架構也完全不同。

          今日頭條屬于門戶類新聞客戶端,主要是生產內容展現給用戶,首先進入到產品映入眼簾的是無窮式的信息流,它不需要用戶登錄/注冊作為身份門檻,而是直觀的把內容展示給用戶,推送用戶感興趣的內容,也不需要用戶決策任何選擇,用戶只需沉浸式的閱讀體驗即可,目的是方便第一時間抓取用戶、吸引用戶達到留住用戶的目的。當用戶產生興趣以后想要進入下一步操作如:點贊、評論時才會彈出登錄/注冊,一方面是獲取用戶的身份等信息,另一方面是間接性的把用戶留下來。從產品業務屬性來看,今日頭條的布局把重要的內容放入中間,并且占有整個布局的一半大小,其次放在內容兩側;

          大廠高手出品!中臺組件設計指南:系統布局

          飛書屬于工具協作類產品,用戶第一次打開產品需要注冊才能使用。與新聞閱讀類產品不同的是工具類型產品用戶目的比較明確,所以首頁做成一個功能介紹頁面,作用是引導用戶了解產品核心功能從而轉化成產品的用戶。當然功能介紹頁也是一個網站的門面,首頁想要出彩,不僅需要在布局上做的合理還需要考慮網站的色彩、插圖等元素的統一性。在設計網站時,首頁的功能介紹頁一定要充分突出自身產品特色,強調出自身產品的優勢和亮點,如飛書首頁主要是想突出其產品能夠提高工作效率,所以直接把「在飛書,享高效」slogan 這句話放在了首頁的第一屏,輔助文案詳細的介紹了產品的核心功能,直接抓住用戶的痛點。用戶完成注冊以后,進入到功能頁面,如右下圖可以看出,其系統布局的模塊分成三份,占面積最大的模塊屬于產品最核心的部分也就是聊天窗口,較重要部分是聯系人部分,最小區域是功能 Tab 部分。

          大廠高手出品!中臺組件設計指南:系統布局

          小結

          所以對于設計師而言,在設計頁面時必須熟練掌握一些基本設計基礎知識,并且將這些知識靈活運用到實際的工作當中。比如設計師在搭建系統布局時需要熟知頁面視覺層次、格式塔理論、信息框架等知識才可創建合理的布局基礎。當然布局框架只是整個產品的基礎骨架,在骨架確定之后,設計師才可進行下一步的設計,如統一的視覺表達元素,清晰的功能操作,流暢的交互表達。

          大廠高手出品!中臺組件設計指南:系統布局

          2. 布局的設計原則

          系統布局規范,需要通過統一的設計元素和間距規范去引導使用者們(使用規范的設計師)跨平臺使用并且能夠適配不同屏幕尺寸,目的是達到一致性,可適配、可控性原則。

          大廠高手出品!中臺組件設計指南:系統布局

          一致性:對于界面來講,界面中的元素和結構需要保持一致性,如:在使用布局時應當使用一致的網格,基準線和填充,在使用設計元素時配色、圖標、文本等需保持一致。

          可適配:布局是可自適應的,根據用戶在不同的設計環境下能夠通過交互動效、界面樣式有效作出極致適配反應。用戶操作后需給出即時反應。

          可控性:當用戶看到界面時應直觀有效傳遞內容,如界面中模塊區域明確、內容組織明確、表意明確都能使得用戶快速理解。界面需要簡單直白,讓用戶快速識別,減少用戶記憶負擔。

          3. 適配方案

          在設計過程中,為了減少設計師們的日常溝通和理解成本,在設計內部我們統一了一套設計畫板尺寸為 1280。經過我們官方調研得出在中臺系統中用戶使用的電腦屏幕主流分辨率分別為:1440*900、1366*768、1920*1080、1280*800,而1280 是主流分辨率中最小且最為保險的的一個尺寸,在設計頁面時設計師如果能夠在 1280 尺寸下,縮小寬度或拉升頁面寬度都能保證沒有遮擋或擠壓問題,那么設計是合理的。在我們的規范中頁面再小于 1280 時需要吊起系統的橫向滾動條。在中臺系統中考慮到用戶效率問題很少做響應式,所以常規情況下設計師會限定界面的一個最小值。如果設計師把畫板設置為 1440 或者 1366 時可能會存在其在畫板中頁面大小正好合適,但是頁面上線以后縮小瀏覽器可能會發生遮擋或擠壓的情況。所以我們建議設計師們使用 1280 寬度畫板畫圖。

          大廠高手出品!中臺組件設計指南:系統布局

          4. 框架

          首先先分析一下界面框架,我們將頁面的用戶操作行為進行層級區分。我們至下而上將元素進行層級分層,目的是把用戶界面模塊化。界面可分成背景區域、內容層、全局控制層、內容彈層,每一層都具備獨特性,將界面中所有的信息層級提取分類并且按結構屬性分層,目的是能夠使得頁面視覺和交互邏輯符合用戶的習慣認知。之前我們有提到過視覺層次、格式塔理論和信息框架,設計師在創建這一步的時候可以用來指導搭建一套合理的頁面信息層級,一個內容模塊都屬于一個容器,容器可以承載各種內容元素。

          大廠高手出品!中臺組件設計指南:系統布局

          背景層

          背景層樣式固定,在界面中永遠置于界面底部,并且一般會給予背景層中性色,作用是方便突出內容層和全局控制層。

          大廠高手出品!中臺組件設計指南:系統布局

          內容層

          視圖結構中最核心和復雜的一層,他與業務強相關,內容層的容器承載了業務場景的用戶需要獲取的核心信息以及輔助核心任務的操作。容器承載了內容,從 Material Design 中的 Elevation(海拔)概念中可以了解到,它屬于第二層級內容,基本布局結構有平行結構或者父子結構。如下圖卡片屬于容器,卡片中承載了數據圖表等內容,整個卡片+內容就屬于內容層。

          大廠高手出品!中臺組件設計指南:系統布局

          全局控制層

          全局控制層我們定義他在內容層之上,屬于頁面第三層級內容,一般在業務場景中對整個網站的控制以及導航功能如:Header menu、Sidebar menu 組件,如下圖中 Header menu 浮在內容層之上。

          大廠高手出品!中臺組件設計指南:系統布局

          內容彈層

          當前任務或者內容相關的臨時出現層,優先級高于內容層,一般承載當前需要臨時處理的任務或者需要進行內容補充說明等功能。如:Modal(Dialog 各個平臺叫法不一致)、Tooltip、Popover、Notification 等組件 。其中 Modal 是以滑出或者彈出的形式展現給用戶。Modal 它包括兩種類型,一種是模態內容層不可操控,被蒙版遮罩禁用,比如在業務中需要較為聚焦的分支流程操作時使用。另一種是非模態,吊起彈出層后不印象內容層操作。當然,Tooltip、Popover、Notification 都屬于非模態,反饋較輕,不干擾用戶使用界面。如下圖的頁面中的內容彈層使用了 Popover,在次頁面它的功能就是加以補充說明。

          大廠高手出品!中臺組件設計指南:系統布局

          網格基礎

          1. 單位

          隨著科技高速發展,屏幕分辨率也越來越多樣化對于 UI/UX 設計師來講必須熟練的基本知識方便日常工作所需。首先我們先了解一下屏幕中的一些單位。

          • 「PX」pixel,像素,大多數電子設備成像的基本單元,同樣尺寸的屏幕成像單元越細小、越密集的屏幕,分辨率就越高;
          • 「PT」point,點,這個單位,就同時出現在 iOS、CSS、還有傳統的平面設計里,與 px 相比 px 是相對單位而 pt 絕對單位,如在設計稿中如果導出一倍圖 1px=1pt 那么導出二倍圖就是 2px=1pt,它是一個絕對長度,為1/72英寸;
          • 「PPI」pixel per inch,每英寸像素數,決定電子設備的物理顯示尺寸,只有涉及到顯示才有意義。該值越高,則屏幕越細膩;
          • 「DPI」dot per inch,與PPI一致,唯一區別是它表示每英寸多少點,該值越高,則圖片越細膩;
          • 「DP」density-independent pixel,是安卓開發用的長度單位,1dp等于屏幕像素密度為 160ppi 時 1px 的長度,因此dp 在整個系統大小中是固定的。
          • 「SP」scale-independent pixel,安卓開發用的字體大小單位,可以認為 SP=DP。
          2. 像素密度

          在高密度屏幕下每英寸具有比低密度屏幕更多的像素,可能導致開發實現稿的視覺不符合設計師心理預期,比如:相同像素尺寸的 UI 元素在低密度屏幕上顯得較模糊,而在高密度屏幕上則比較清楚。同一物理尺寸(肉眼所見尺寸)下,低密度顯示器的像素個數明顯小于高密度顯示器的像素個數。

          其實像素是與密度沒有關聯,我們簡稱密度為 DP (讀作 DIP,英文全稱 Density-independent pixel ),它是可縮放的靈活單位,可在任何屏幕下現實相同的尺寸,如圖顯示,紅色網格為像素密度,被放大內容為 UI 元素物理尺寸。

          大廠高手出品!中臺組件設計指南:系統布局

          所以我們可以得出,DP 可以自適應屏幕的密度,不管屏幕密度怎么變化,實際顯示的物理尺寸相同,DP 可以保證物理尺寸的一致性,所以 DP 是目前比較適合 UI 設計的單位。當屏幕的密度為 160 的一個物理像素時,1PD=1PX。要計算屏幕密度,可以使用以下公式得出:DP=(PX*160)/PPI。

          3. 網格

          關于網格

          網格線(Grid Line),網格線又稱布局分割線,它是構成網格結構的分界線。一般在布局中它們是由行網格線和列網格線組成。如下圖是模擬網格做了一個示意,其中橘黃色兩根線分別是行網格線和列網格線。

          大廠高手出品!中臺組件設計指南:系統布局

          網格軌道(Grid Track),兩個相鄰網格線之間的空間。你可以把它們想像成網格的行或列。如下圖橘黃色的行網格線和列網格線之間的空間既是網格軌道。

          大廠高手出品!中臺組件設計指南:系統布局

          網格單元格(Grid Cell),兩個相鄰的行網格線和兩個相鄰的列網格線之間的空間屬于網格單元格。這是網格系統的一個「單元」。如下圖橘黃色的行網格線和列網格線交叉處即是網格單元格。

          大廠高手出品!中臺組件設計指南:系統布局

          網格區域(Grid Area),由單個或多個網格單元格組成,它是可以用來擺放頁面元素。如下圖所示,橘黃色的行網格線和列網格線交叉處即是網格區域。

          大廠高手出品!中臺組件設計指南:系統布局

          網格設置

          在設計界面時可以通過網格定制能夠使界面更加有序、整齊、規范,網格的主要用途之一是保持設計元素對齊和排序。通過建立一個網格系統,設計師可以為自己創建一個結構來適配不同的屏幕寬度。

          在我制定的規范中一般會把網格的基數設置為 4,它不僅符合偶數的思路同時也能夠匹配多數主流的顯示設備,如中臺系統的用戶主流分辨率用 1440*900、1366*768、1280*800。我們可以通過設置網格規范幫助設計師快速搭建頁面,使用有律可循的布局空間的設計給到開發減少溝通成本。下圖所示設計布局網格由三個元素組成:列寬,間距,邊距。

          大廠高手出品!中臺組件設計指南:系統布局

          在 Sketch 中設置網格,在菜單欄中找「視圖」-「畫布」-「網格設置」-彈出浮層可設置網格大小,網格設置的基數設置成4,之后在設計界面時可按照網格基礎的倍數作為組件的大小和頁面元素間距分割,如下圖:

          大廠高手出品!中臺組件設計指南:系統布局

          我們放大頁面局部大家可以看到,把網格基數設置成 4,每個網格單元格為 4*4 大小。同理,如果把網格基數設置成 8 以后,每個網格單元格大小為 8*8 大小。

          大廠高手出品!中臺組件設計指南:系統布局

          定義布局模塊

          界面框架內系統布局是頁面所有模塊的組合方式,我們定義一個頁面框架中基礎模塊和內容模塊的數量最好不超過 3 個。經過調研和歸納總結出 3 大布局類型,分別是上下布局、左右布局、T 字型布局。

          1. 上下布局

          上下布局布局是 Web 端運用最廣泛的布局方式之一,頁面內容區以 feed 流形式展現,一般用在 Web 端官網首頁。設計師普遍做法是對兩邊留白區域為內容區并進行最小值的定義,一般定義值為 1200 較多(具體寬度要設計師如何設置柵格,后面會講到如何設置柵格),當留白區域到達極小超過極限值之后需要對中間的內容區域進行動態縮放或遮擋,此邏輯需設計師根據業務所需而定。也有少部分設計師會設計成全屏布局,內容隨瀏覽器寬度自適應。

          大廠高手出品!中臺組件設計指南:系統布局

          其優點是頁面結構清晰簡單,強突出內容區,但缺點是布局的規矩呆板,變化少。設計師如果不注意合理的視覺元素和色彩細節變化,用戶很容易感覺到乏味,此布局適用于層級較為簡單頁面。

          巨量引擎(Ocean Engine)是字節跳動旗下的營銷服務品牌,整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車帝、Faceu 激萌、輕顏、穿山甲等產品的營銷能力,為全球廣告主提供綜合的數字營銷解決方案。我在設計此官網時正是采用了上下布局作為頁面布局,頂部導航整合了所有子頁面的內容,導航下方為主要內容區并且內容定寬,當時采用此布局原因第一是因為次官網層級較簡單只有三個層級內容,第二是官網更需要的是突出內容區,所有頁面使用次布局更為合適。

          大廠高手出品!中臺組件設計指南:系統布局

          2. 左右布局

          設計師在設計重內容,輕導航類型網站是常用左右布局作為基礎框架進行頁面設計。此布局把系統頁面分為兩大模塊,其中設計師常見的做法是將左側設置成導航欄模塊并且固定,常常用來控制全局內容。而右側區域設置成工作區域或內容區,內容區可進行動態縮放。

          大廠高手出品!中臺組件設計指南:系統布局

          下圖為飛書溝通窗口截圖,由于關系到內部信息保密性我把內容進行了模糊,從外觀結構上看還是能大致了解飛書結構是采用了左右布局,整個布局結構清晰有理也是符合左右布局特點。從交互體驗分析左側屬于導航區,它承載了不同功能并且固定。飛書屬于即時溝通產品設計師考慮到瀏覽器窗口有限所以對導航設計成較小模塊,而右邊為聊天窗口對于業務屬性分析它更為重要,所以模塊較大。其導航欄固定,內容區可進行動態縮放。

          大廠高手出品!中臺組件設計指南:系統布局

          3. T字型布局

          T 字型布局常用在 Web 端的中臺系統中,因為中臺系統業務結構復雜、層級多,而 T 字型布局能夠解決復雜結構的問題。使用此結構能夠把頁面結構清晰化,主次更加分明。設計師常常的做法是將頂部作為一級導航欄方便控制全局,二左邊設計成是二級導航并且固定導航欄固定,右邊的內區域可進行動態縮放(一般會把其設計成柵格動態區域),內容隨瀏覽器寬度自適應。

          大廠高手出品!中臺組件設計指南:系統布局

          下圖是 Material Design 設計文檔,首先簡單介紹一下 Material Design,它是由谷歌的設計團隊創建的一種語言,宗旨是幫助設計師們創建易用性和實用性較強的網站和應用程序,其設計理念是將現實中的物理學帶入進設計中。Material Design 設計文檔中的結構使用了 T 字型布局作為基礎布局。頁面分為了三個模塊,其中頂部導航作為頁面一級內容進行全局控制,接下來左邊為側邊導航作為二級內容控制頁面,右邊是內容區滿足用戶使用瀏覽。從放眼望去整個頁面架構清晰明了。

          大廠高手出品!中臺組件設計指南:系統布局

          4. 小結

          以上為 Web 最常見的三大布局,但是需要大家在實際的工作中靈活運用。設計師在日常工作中可能會遇到更為特殊的業務場景,設計師可以通過整理基礎模塊然后分析其業務的信息框架,將模塊進行相互組合、嵌套歸納可以總結出更多的 Web端布局框架并落地到業務中。

          網頁柵格

          剛剛在定義布局模塊中已經分析過了三大布局類型,接下要分享的是 UI 設計師更為關注內容「網頁柵格」。網頁柵格也是設計師口中常常提及的柵格系統。其實網頁柵格系統是從平面柵格系統中發展而來,它延續了平面設計的方法與風格,在網頁中使用柵格能夠使得網頁信息展現更加清晰明了、美觀易讀。

          首先網頁柵格系統基本由是柵格總寬度/頁面總寬度(W)、一個柵格的寬度(a)、柵格與柵格之間的間隙(i)、一個單元的寬度(A)、外邊距(M)組成。

          1. 列寬

          一個柵格的寬度(a),我們稱之為列寬,一個列寬包涵了N個網格單元格(Grid Cell)我們也可以把它看成一個網格區域(Grid Area),在上面我們已經講到過網格的內容,主要目的正是為柵格做鋪墊。其中我把一個網格單元格設置為4(原因在網格中也解釋過,如果忘記的同學可以爬樓看下)。由此可見列寬非固定值,這樣可以使內容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。

          2. 水槽

          柵格與柵格之間的間隙(i),我們稱之為水槽,一個水槽寬度大于等于1個網格單元(Grid Cell)。在柵格中水槽為一個定值,寬度可以是N個網格單元,如網格單元格設置成4,那么水槽可以是4、8、12、16…N*4。

          3. 柵格單元

          1個列寬+1個水槽寬度即一個單元的寬度,一個柵格總寬是由N個柵格單元組成,次寬度不固定,由屏幕尺寸決定。

          4. 柵格總寬

          列寬+水槽再成以N即是一個柵格的總寬,公式為:W=(A*n)-i。

          大廠高手出品!中臺組件設計指南:系統布局

          5. 柵格設置

          經過調研我們得出常見的柵格分為 12 列柵格系統和 24 列柵格系統。其中 12 列柵格系統在流行的前端開發開源工具庫Bootstrap 與 Foundation 中廣泛使用,適用于業務信息分組較少、業務結構較簡,單個盒子內信息體積較大的中后臺頁面設計。24 等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計;相對 12 柵格系統,24 柵格系統變化更加靈活,更適合內容比較多樣復雜的場景。如下圖分別是 12 柵格系統(左)和 24 柵格系統(右)。

          大廠高手出品!中臺組件設計指南:系統布局

          大廠高手出品!中臺組件設計指南:系統布局

          大廠高手出品!中臺組件設計指南:系統布局

          6. 小結

          在柵格系統結合布局結構和網格做了我做了一些知識結合,其實前面所講的網格版塊和布局版塊都是為柵格做一個鋪墊,利于同學們更加深入的了解網格、布局、柵格三者的關系。

          寫在最后

          系統布局只是網頁中的基礎部分,但也是核心內容,一個產品布局需要根據其業務屬性決定。布局搭的好相當地基打得好,但是同時在對美感的追求之上,還應當結合可用性來看待設計。在實際的工作中肯定還會遇到各種形形色色較奇葩的需求,所以希望這篇文章能夠做的不是限制而是啟發,大家可根據此次分享內容能夠進行舉一反三利用到實際的工作當中。

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

          文章來源:優設  作者:熊細輝Neo


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

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

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




          競品分析的7個視角

          資深UI設計者

          知彼知己,百戰不殆。
          ——《孫子兵法》

          產品經理的崗位職責之一是在市場中建立和維護產品的競爭優勢,競品分析是產品經理的一項常規工作,分析質量決定著決策質量,影響著對業務取長補短的效果。但在競品分析時,常遇到以下問題:

          • 沒有養成日常習慣,分析時無從下手
          • 企圖以此尋找需求或印證自己的觀點
          • 由領導發起,找模板套公式,交作業
          • 分析維度雜亂淺顯,結論無參考價值

          那么,競品分析應該怎么做呢?

          當我剛剛喜歡上一個姑娘時,卻發現已經有人喜歡她了,而且張三已經表白,李四也有好感,怎么辦呢?

          大腦會在荷爾蒙的牽動下情不自禁做起了分析和策略。先從人類視角思考一下世界觀、人生觀、價值觀、婚戀觀,確定一下自己要談一場什么樣的戀愛。

          再從戀愛角度來了解姑娘,哪里人呀?啥家庭呀?啥衣食住行呀?啥愛好?啥性格呀?符合夢中情人的樣子么?這么一通觀察下來,那多久約一次會、吃什么飯、唱什么歌、送什么禮也就心里有數了。張三李四都干啥了就得有差異化。

          進一步了解之后又要返回到婚戀觀,問自己真誠否?關系合適否?只有對自己真誠,對姑娘真誠才能情投意合。既然雙方感覺都不錯,繼續更深一步互動,少了一些遮掩,偶有矛盾,知道雙方喜歡啥,雷區是啥。如此,言談舉止便要有所分類,分類即尊重,相容即相愛。

          咔,到這里,沒有張三李四的事了。良久,兩人有了結婚的想法,要雙方家長見面聊聊呀,聊聊兩個大家庭的想法,聊聊小家庭的打算,真心地切合實際地聊??孔V!

          咔,姑娘到手。結婚的過程又一次鞏固了小家庭的使命、愿景、價值觀,那就過日子吧??傊谂c姑娘相處的每個階段、每個事上都要真誠以待。競品分析更是如此了,要與用戶談戀愛。

          當然,更準確地來說是競爭分析,產品只是價值的載體。做一款產品時,卻發現已經有直接競爭者、替代競爭者、潛在競爭者、預算競爭者了,而且還有一些可參考的友商。就從7個角度觀察分析:

          1. 從上帝視角看市場,了解產業和行業的運作模式、所處環境和市場數據,便于篩選目標市場;
          2. 從市場角度看用戶,了解目標市場中全部用戶的分層及畫像,便于篩選目標用戶;
          3. 用研發角度看產品,了解開發生命周期中的差異;
          4. 從市場角度看產品,了解產品生命周期中的差異;
          5. 從產品角度看用戶,了解產品中存量用戶的細分,便于精細化運營;
          6. 從用戶角度看產品,了解用戶不同的體驗和評價;
          7. 從產品背后看企業,了解競爭者的資源配置情況。

          在頻率上可以日常分析、定期分析、突發性地專項分析;在分析粒度上可以大到對行業趨勢的分析,中到對競品方案的分析,小到對競品功能點的分析;在呈閱對象上,可以是BOSS、PM、設計師、研發人員等。

          總之,PM做競爭分析時要在產品所處的每個階段、工作的每個細節上都真誠以待,這樣才能得到客觀有用的結論。這是對競品分析的工作思想,開始分析吧!

          • 分析目的有哪些?
          • 分析對象有哪些?
          • 分析角度有哪些?
          • 競品信息的來源有哪些?
          • 競品信息的處理流程有哪些?
          • 分析方法有哪些?
          • 結論如何呈現?

          一、7個分析目的

          用戶價值、商業價值、用戶價值與商業價值間平衡,這三類的預期和現狀之間有所差距,想找到解決方案減少差距唄,那還是會遇到7種不同的情況:

          1. 知道差距,沒方案,尋找方案
          2. 知道差距,有方案,不知道方案對不對
          3. 知道差距,有方案,不知道方案如何實施
          4. 知道差距,有方案,但方案行不通,咋辦
          5. 知道差距,多種方案,不知道選擇哪個最好
          6. 知道現狀不是想要的,說不清預期,沒方案
          7. 知道預期就是想要的,不清楚現狀,沒方案

          往細來說,大概會在開拓市場時,尋找市場切入點、尋求差異化、規劃業務、策劃運營方案等;在挖掘用戶需求時,分析用戶和分析需求等;在觀測市場時,做行業預測、競爭預測等;在……時,進行……

          二、5個分析對象

          以“目標用戶類型”、“核心需求”、“產品或服務的特征”和“用戶購買預算”為依據大致可以劃分為5類競品。

          競合

          ★代表相似,?代表不同,- 代表可有可無

          三、7個分析角度

          3.1 從上帝視角看市場

          從整體上看,市場的構成如下圖要素構成。在這個視角,我們主要做產業分析、行業分析和市場分析。

          競合

          3.1.1 產業分析

          產業是指由利益相互聯系的、具有不同分工的、由各個相關行業所組成的業態總稱。一個產業可以跨越(包含)幾個行業。產業結構、產業分類、技術結構、技術分類一般都有國際或國家的分類標準,百度可見;其中產業結構中各角色的互動關系如下圖所示:

          競合

          圖中的互動關系也可稱之為“產業鏈”中的“供需鏈”。

          產業布局是指產業在一國或一地區范圍內的空間分布和組合的經濟現象。在靜態上看是指形成產業的各部門、各要素、各鏈環在空間上的分布態勢和地域上的組合。在動態上表現為各種資源、各生產要素甚至各產業和各企業為選擇最佳區位而形成的在空間地域上的流動、轉移或重新組合的配置與再配置過程??捎谩爱a業地圖”來表示:

          示例一:按資源、生成要素的流動展示

          競合

          圖中的流動關系也可稱之為“產業鏈”中的“價值鏈”,而完整的價值鏈如下圖:

          競合
          示例二:按在各產業和各企業的流動展示

          競合
          圖中的企業關系也可稱之為“產業鏈”中的“企業鏈”。

          示例三:按地理空間展示

          競合

          圖中的地理關系也可稱之為“產業鏈”中的“空間鏈”。

          匯總一下,對產業的了解可從時間、空間和程度三個方面來研究,如圖所示:

          競合

          3.1.2 行業分析

          行業指一組提供同類相互密切替代商品或服務的公司。選定行業就一定能看到我們的競爭者有哪些。從供需關系上看,就是研究目標市場的供給側的生產者有哪些?

          競合

          當然了,分類的話,還是分為競爭分析的5個對象。

          競合

          那么,對行業分析,有哪些維度呢?

          3.1.2.1 生命周期

          即老生常談的引入期、成長期、成熟期、衰退期。

          競合

          3.1.2.2 競爭類型

          分為完全競爭、壟斷競爭、寡頭競爭和完全壟斷。

          競合

          3.1.2.3 行業要素

          分析一個行業的主要影響要素及要素密集度。包括五類:

          1. 資本型,如房地產
          2. 技術型,如制造業
          3. 勞動型,如防治業
          4. 知識型,如創意設計
          5. 資源型,如煤炭、發電

          3.1.2.4 經濟周期

          分為三類:

          1. 增長型,如人工智能、云計算、物聯網
          2. 周期型,如鋼鐵、煤炭、金融產品
          3. 防守型,如醫藥、旅游、家電

          3.1.2.5 行業結構

          常從三個維度分析:

          1. 各產品的市場規模及結構變化
          2. 各地區的市場規模及結構變化
          3. 各消費群體的規模及結構變化

          競合

          3.1.2.6 主要數據

          行業的發展分析時經?;仡櫄v史、分析現狀和預測未來。

          回顧、分析和預測哪些數據呢?

          主要有市場規模、毛利率、銷售增長率和凈資產收益率等。

          3.1.3 市場分析

          市場泛指商品交換的領域。

          3.1.3.1 分析對象

          • 針對產業做分析
          • 針對行業做分析
          • 針對企業做分析

          3.1.3.2 分析范圍:

          • 全局的
          • 細分的

          3.1.3.3 市場概覽

          • 過去近十年的數據:市場規模、GDP占比、復合增長率(GAGR)、線上化率(=線上市場規模/總市場規模)
          • 現狀分析:宏觀環境因素分析(PEST)、對標其他國家和相近行業
          • 判斷未來趨勢:數據擬合預測

          3.1.3.4 市場集中程度:

          CRn(concentration ratio)n一般用10。也就是在這個市場市占前10的公司,加起來的總和占整個市場的百分比,百分比越高,證明這個市場的集中度也就越高。

          競合

          3.1.3.5 市場消費模式

          • 價格型
          • 理智型
          • 沖動型
          • 想象型
          • 習慣型
          • 隨意型

          3.1.3.6 上下游市場分析

          • 上游:政策、上游原材料構成、原材料價格走勢、主要供應企業的供應量
          • 下游:政策、下游消費市場構成、消費市場結構變化趨勢、主要消費群體的消費量

          3.1.3.7 市場數據

          ① 規模

          • 市場整體規模
          • 線上市場規模
          • 我司市場規模(市場占有率)

          ② 數據

          • 量(用戶數):下載量、注冊量、活躍用戶量、付費用戶量等
          • 次(訂單數)
          • 額(交易額)
          • 利(營收、毛利潤、凈利潤)
          • 率(轉化率、毛利率、增長率、凈資產收益率)

          ③ 趨勢

          • 增長
          • 持平
          • 下降

          3.2 從市場角度看用戶

          從供需上看,就是研究目標市場的需求側的消費者有哪些,該角度一般是在做新產品前對所有的消費者進行研究。

          競合

          3.2.1 分析對象

          目標市場中的消費者。

          3.2.2 分析目的

          • 消費者分層,即市場細分,或是叫用戶分層
          • 找準目標用戶

          3.2.3 分析范圍

          更多是全局分析

          3.2.4 分析方法

          3.2.4.1 定性調研:訪談、焦點小組、卡片分類、參與式設計

          3.2.4.2 定量調研:調查問卷

          3.2.4.3 場景調研:分為三類場景

          • 用戶場景:用戶遇到問題、產生想法,發現解決方案的場景
          • 使用場景:用戶使用產品時的場景
          • 營銷場景:用戶看到產品、選擇產品、購買產品時的場景

          3.2.5 分析維度

          ① 口碑調查

          • 口碑結構
          • 口碑的地域性差異
          • 品牌滿意度
          • 凈推薦值

          ② 產品價格

          客戶希望為這個產品支付多少錢?競品價格如何?

          ③ 購買動機,購買的影響因素及比重

          ④ 購買習慣,如購買渠道、購買時段等等

          ⑤ 產品感知及體驗

          3.2.6 分析產出

          產出一:用戶故事版,或是用戶畫像之User Persona

          競合

          產出二:價格分析圖

          競合

          產出三:滿意度和凈推薦值

          競合

          產出四:購買因素及比重競合

          產出五:購買習慣

          競合

          3.3 用研發角度看產品

          想要了解競品是如何研發出來的,就需要關注和比較雙方的開發什么周期的各個動作。要“比、學、趕、超”不斷迭代,當然也要“你打你的,我打我的”,堅持自己得定位。

          競合

          3.3.1 產品定位

          • 我是一個什么樣的產品
          • 什么背景基因下產生
          • 為哪些目標市場服務
          • 服務的邊界是什么

          3.3.2 產品定義

          ① 定義用戶:

          • 選擇哪類用戶作為目標用戶
          • 目標用戶畫像之User Persona特征

          ② 定義場景:

          • 用戶場景:問題、想法、發現解決方案
          • 使用場景:使用
          • 營銷場景:看到、選擇、購買

          ③ 定義價值:

          • 用戶價值
          • 商業價值
          • 用戶價值與商業價值的平衡

          ④ 全局思考:

          • 產品的持續性
          • 產品的增長性

          3.3.3 戰略規劃

          • 組織架構從上到下的戰略傳遞
          • 產品組合策略
          • 產品路線圖

          3.3.4產品設計

          • 基于場景和需求拆分用戶的任務
          • 基于任務拆分為功能和交互、內容和信息架構
          • 基于全局考慮業務閉環、產品結構的可拓展性

          3.3.5產品研發

          • 界面設計(設備、交互、UI等)
          • 技術研發
          • 可用性測試及用戶體驗測試等
          • 持續迭代

          3.3.6 產品運營

          上線前基于產品的運營計劃

          3.3.7 分析產出

          • 用戶畫像之User Persona
          • 用戶旅程圖
          • 產品階段戰略
          • 產品路線圖
          • 應用架構圖
          • 產品功能框架圖
          • 界面對比結論

          3.4 從市場角度看產品

          在新產品推向市場后的銷售營銷、運營、根據需求演變的產品迭代,也要經過進入期、成長期、成熟期和衰退期是個階段。

          競合

          在不同的產品生命周期階段,企業經營行為的側重點不同。

          競合

          3.4.1 產品商業模式

          競合

          3.4.2 產品/市場匹配(PMF)

          PMF是Product Market Fit的簡寫,是指產品和市場達到最佳的契合點。象征著產品正好滿足市場的需求,令客戶滿意,這是產品成功的第一步。

          競合

          競合

          PMF的實現標準(臨界點)的判斷,各行各業因其特性均不同,網上有些判斷方法僅供參考:

          • 財務狀況增長率+利潤率大于40%
          • 次日留存大于30%
          • 每周使用天數超過3天
          • 付費轉化率大于5%
          • LTV/CAC>3
          • 用戶月流失低于5%
          • 用戶獲取成本的回本時間少于12個月
          • 不能再使用該產品會感覺非常失望的用戶量占比大于40%(調研分四擋:非常失望、有點失望、沒有失望和不適用)

          3.4.3 產品功能

          • 主要功能
          • 次要功能
          • 附加功能

          3.4.4 所用技術

          • 技術類型
          • 技術架構
          • 技術水平

          競合

          3.4.5 運營推廣

          3.4.5.1 內容運營

          3.4.5.1.1 企業介紹

          3.4.5.1.2 企業新聞

          • 融資信息
          • 客戶簽約信息
          • 戰略合作信息
          • 產品動態信息

          3.4.5.1.3 產品手冊

          3.4.5.1.4 客戶成功案例

          3.4.5.1.5 行業白皮書

          3.4.5.1.6 行業解決方案

          3.4.5.1.7 行業報告、干貨資料

          • 行業熱點分析
          • 行業趨勢解讀

          3.4.5.1.8 期刊、書籍等出版物

          3.4.5.1.9 電子書

          3.4.5.1.10 課程講義

          • 老板專欄/高管專欄/大咖專欄
          • 特定選題的課程

          3.4.5.2 活動運營

          3.4.5.2.1 線上

          • 微課
          • 直播

          3.4.5.2.2 線下

          • 主辦型活動
          • 聯合型活動
          • 贊助型活動
          • 企業參訪活動
          • 會銷活動
          • 培訓活動、沙龍活動
          • 游學活動
          • 線下公開課

          3.4.5.3 渠道運營

          3.4.5.3.1 官網媒體

          3.4.5.3.2 自媒體:公眾號、頭條、搜狐號等等

          3.4.5.3.3 全員營銷

          3.4.5.3.4 聯合推廣渠道

          • 自媒體大號聯盟
          • 行業俱樂部及協會
          • 行業媒體、雜志體

          3.4.5.3.5 貢獻線索渠道

          • 廣告渠道、SEM
          • 垂直行業網站
          • 同客異業合作
          • 產業上下游企業合作

          3.4.5.3.6 代理商渠道

          • 渠道加盟商
          • 交易平臺,如用友云市場

          3.4.5.3.7 社群運營

          3.4.5.3.8 運營體系及風格

          3.4.5.3.9 運營事件分析,關注和研究顯著的增長點

          3.4.5.3.10 關注各類運營數據及轉化率

          3.4.6 銷售/營銷

          3.4.6.1 定價策略

          3.4.6.2 市場營銷

          3.4.6.3 銷售模式

          • 直銷
          • 代銷
          • 經銷
          • 網絡銷售
          • 電話銷售

          3.4.6.4 銷售渠道及渠道策略

          3.4.6.5 品牌管理

          關于定價方法,UCPM的總結比較全面到位,這里羅列一下,百度即可。重在比較不同競爭者的定價策略。

          競合

          競合

          3.5 從產品角度看用戶

          當產品中沉淀了一些存量用戶之后,為了實現用戶需求的異質性、并集中有限資源進行有效市場競爭的行為。企業在明確的戰略業務模式和特定的市場中,根據用戶的屬性,行為等因素對用戶進行分類,并提供有針對性的產品、服務、銷售、運營模式,達到用戶價值和產品目標的最大化。

          系統實施層面,是在抽象理論的指導下,用算法進行標簽化統計、分類,并以用戶畫像的形式表現,最后在策略上、界面上、運營方式上進行“量體裁衣”。

          競合

          3.5.1 分析對象:產品中現有的用戶

          3.5.2 分析目的:對用戶細分,精細化運營,不同用戶采用不同的運營策略

          3.5.3 分析內容:

          • 用戶畫像之User Profile
          • 標簽分析、標簽標注
          • 用戶相關方利益分析
          • 不同用戶消費特點
          • 用戶習慣
          • 用戶同理心分析
          • 用戶行為旅程
          • 用戶體驗

          越來越多的產品也逐漸從更多細致的維度來分析消費者,對2C用戶的分析維度分為以下五類:

          競合

          對2B企業的分析維度,大致分為以下三類:

          競合

          3.5.4 分析方法

          • 定性:人種學現場調查、眼動跟蹤、可用性實驗室研究、用戶反饋分析
          • 定量:埋點數據分析、A/B測試、用戶體驗調查問卷

          3.6 從用戶角度看產品

          我們通常需要以不同的角色來體驗和感受產品,而且能在各個角色之間切換自如。角色可以分以下幾類:

          • 用戶、商家、廣告商
          • 小白用戶、普通用戶、專家用戶
          • 決策者、購買者、使用者、影響者、信息管理者
          • 界面設計面向的主要人物、次要人物、補充人物、客戶人物、接受服務人物、負面人物

          3.6.1 產品覆蓋的場景有哪些?能滿足哪些需求?能給我帶來什么價值?

          3.6.2 多端比較:

          • Android
          • IOS
          • WP

          3.6.3 多商業入口分析:

          • APP
          • H5
          • PC
          • 公眾號
          • 小程序

          3.6.4 功能:

          • 主要功能
          • 次要功能
          • 附加功能

          3.6.5 UI與交互

          • 主要功能入口是否清晰明確?
          • 各入口間跳轉是否會迷失?
          • 最重要的頁面有沒有直接展示?

          3.6.6 其他

          • 安全性
          • 性能:是否穩定,不卡頓,響應速度
          • 獲得性:客戶能否方便的獲得服務
          • 易用性:操作便利性、學習的難易程度
          • 后續服務:不斷升級,維護報修服務的便利性
          • 用戶評價

          3.7 從產品背后看企業

          企業本質上是“一種資源配置的機制”,其能夠實現整個社會經濟資源的優化配置,降低整個社會的“交易成本”。從產品背后看企業,才能看到產品的基因與營養。

          3.7.1 分析對象:產品所屬的企業

          3.7.2 分析目的:分析競品所屬企業的資源配置機制

          3.7.3 分析方法

          • 定性:歷史追蹤法、主觀體驗與評價
          • 定量:特征羅列、要素列舉

          3.7.4 分析領域

          3.7.4.1 企業背景

          3.7.4.2 企業歷程及重大節點

          3.7.4.3 企業定位

          3.7.4.4 企業愿景

          3.7.4.5 發展戰略

          • 進攻
          • 防御
          • 橫向擴張

          3.7.4.6 業務模式

          • 上游
          • 下游

          3.7.4.7 產品矩陣

          • 波士頓產品矩陣
          • 產品組合策略

          3.7.4.8 產品戰略

          • 組織架構從上到下的戰略傳遞
          • 產品路線圖

          3.7.4.9 商業模式(商業畫布)

          3.7.4.10 人力資源:

          • 創始人概括
          • 核心骨干人員優勢
          • 團隊背景
          • 組織架構
          • 人員數量

          3.7.4.11 財務資源:

          • 投融資情況
          • 盈利能力
          • 運營投入

          3.7.4.12 實物資源:

          • 工廠車間
          • 機器設備
          • 工具器具
          • 生產資料
          • 土地
          • 房屋等具有物質形態的固定資產

          3.7.4.13 技術資源:

          • 技術專利
          • 影響用戶體驗的技術
          • 市場發展的技術

          3.7.4.14 社會資源:

          • 政府關系
          • 合作伙伴
          • 社會名人
          • 重要事件

          3.7.4.15 其他資源

          • 時空資源
          • 信息資源
          • 品牌資源
          • 文化資源
          • 管理資源

          四、4類信息來源

          4.1 來自分析者自身的信息

          1)成為用戶

          2)體驗產品

          3)輪崗實習

          4.2 來自用戶的信息

          1)用戶調研

          2)用戶反饋

          3)用戶數據分析

          4.3 來自競爭者的信息

          4.3.1 公司官網

          • 財務報表
          • 融資情況
          • 活動線索:產品發布會、行業峰會,展覽會,推廣活動
          • 媒體線索:官網、微博、公眾號、媒體報道、高管訪談、產品的運營事件和運營信

          4.3.2 產品使用

          產品體驗、產品文檔

          4.3.3 競爭者的員工

          • 客服人員:作為消費者給競品客服打電話咨詢問題
          • 離職人員:在合法范圍內做咨詢

          4.3.4 互動交流

          4.4 來自第三方的信息

          1)政府機構:查看政府的工作統計報告

          2)行業研究機構:行業報告、案例研究和論文,能了解行業現狀和市場格局

          3)第三方調研機構

          4)專利機構:可檢索競品涉及的專利

          5)合作伙伴:從合作伙伴處了解競品

          6)應用商店的數據統計平臺:查看產品排名、用戶評價、下載量統計、活躍用戶規模、版本迭代記錄等

          五、3個信息處理步驟

          5.1 信息收集

          1)編寫

          2)爬取

          3)問卷、訪談

          4)數據庫調取

          5)購買

          5.2 信息清洗

          5.2.1 重復信息

          • 合并
          • 刪除重復項

          5.2.2 殘缺信息

          • 補全。補全缺失的信息
          • 估算。用樣本統計的估算值代替缺失信息
          • 推導。用樣本模型計算出來的值代替缺失信息
          • 忽略。忽略掉與分析目標相關度小的信息
          • 遺留。做缺失記錄,暫時不做處理。

          5.2.3 錯誤信息

          • 更正
          • 刪除

          5.2.4 不一致信息

          • 相互關聯
          • 相互統一

          5.3 信息加工

          將清洗過的信息加工成我們想要的信息:

          • 提取。從多段信息中提取某個專題需要的信息
          • 計算。利用已有數據按公式計算出另一數據
          • 分組。合理分組,合并同類項,排列組合
          • 轉化。信息類型間的轉化,格式統一

          5.4 信息抽樣

          個別信息,尤其數據類的信息,需要抽樣檢查。

          5.5 信息更新

          市場變化快,信息須及時更新。

          六、6類分析方法

          6.1 主觀與客觀

          1)主觀:體驗、描述、評價

          2)客觀:特征羅列、流程呈現、要素列舉、公式計算

          6.2 定性與定量

          競合

          6.3 理論模型

          有一些現成的理論模型是可以直接套用的,列舉如下:

          • PEST
          • STP理論
          • 波特五力模型
          • 波士頓矩陣分析
          • 用戶體驗五要素
          • $APPEALS
          • SWOT

          6.4 分析方法

          6.4.1 對比分析法

          最簡單的對比是羅列要素,進行Yes/No的打鉤。

          • 同一時空,同樣條件下,不同指標的比較
          • 同樣條件,同樣指標,在不同時空的比較

          6.4.2 綜合評價分析(權重評分法)

          • 專家訪談法
          • 德爾菲法

          6.4.3 結構分析法

          • 漏斗分析
          • 杜邦分析

          6.4.4 四象限法(矩陣分析法)

          一般選擇兩個關鍵競爭要素,通過四象限來分析競品之間關鍵指標的分布情況。如波士頓矩陣法也屬于四象限法。

          6.4.5 歷史跟蹤法

          • 迭代版本的追蹤
          • 運營手法的追蹤

          七、報告模板

          競合

          參考資料:

          1. 海比研究院《2021年中國SaaS市場研究報告》
          2. 艾瑞咨詢部分行業報告、《UCPM產品管理知識體系》
          3. 《ToB運營-低成本獲客與續費》
          4. 《產品經理裝備書》
          5. 《交互設計精髓4》。

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

          文章來源:人人都是產品經理  作者:七牛

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

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

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




          需求評審指南

          資深UI設計者

          令很多產品新人非常頭疼的會議就是需求評審,害怕在會上“懟”不過研發,也害怕被“懟”的“體無完膚”。本篇文章里,作者圍繞需求評審會議的五個方面為我們全方位解讀要如何才能不被“懟”,一起來看看吧。

          對于產品新人而言,日常最頭疼的會議就是需求評審。

          在做產品的這幾年,筆者開過上百場需求評審會,曾經被研發在會上懟哭過一次,也遇到過研發和產品大吵半小時、最終有一方摔門而出的情況。

          但這都是剛開始一段時間的慘案了,那時一想到要一個人面對近10個研發就戰戰兢兢瑟瑟發抖。而如今,幾乎每一次的需求評審都變得相當順利,時間和結果都能達到預期,甚至都不需要太多額外的準備。

          很多產品新人擔心自己懟不過研發,但事實上,「懟」這個詞就把自己和研發置于了對立面。很多需求評審中的爭吵和爭論在會后看來是沒必要的,大多都源自于信息差和溝通能力的問題。

          因此,今天想和大家分享下如何做好需求評審、不再怕被懟。本文將從產品、研發和團隊等多個角度來談,以下為目錄,希望大家能提前在心里有一個框架:

          • 需求評審的意義到底在哪?
          • 一次標準需求評審的階段和流程
          • 如何很好地進行需求評審的會議管理
          • 需求評審會上,前端、后端和測試分別都關注什么?
          • 3個壓箱底的需求評審技巧!

          一、需求評審的意義到底在哪?

          直接用一堆正確的話來告訴大家需求評審的意義,可能并不會有太深刻的體會。所以我們不妨另辟蹊徑,一起來試想一下:如果一次迭代沒有任何需求評審、研發完全按照產品需求文檔進行開發,會有什么樣的結果?

          看起來貌似節約了大量的溝通時間,也避免了團隊內的爭論和爭吵,但實際開工之后呢?

          一方面,在開發過程中,研發發現出現了部分需求遺漏、有些看似一句話的需求實現起來成本反而非常高、有些需求未考慮到數據修復、數據查詢量過載的風險等,這時候,經驗豐富一些的研發會主動找到產品進行討論并要求進行需求變更,而另外一些研發新人可能就埋頭照做了,到真正上線后才發現實際有一大堆問題,甚至可能造成不可挽回的損失。

          另一方面,產品上線之后,銷售和售后部門的同事發現需求是滿足了,但卻一點都沒法用,這時候,客戶也接二連三的反饋系統怎么越改越難用了,根本沒法解決他們的問題!

          這樣看來,省去了需求評審之后,產品經理的工作雖然「單純」了很多,但卻很難兼顧全局,也無形中將所有的風險和壓力擔在了自己一個人身上,浪費了團隊的智慧和經驗。

          因此,一場好的需求評審能夠幫助我們很好地管理需求方(業務/銷售/售后部門)的預期,同時也能通過一次次評審和糾偏,幫助整個產研團隊就需求場景和優先級達成一致,及早進行風險評估及查缺補漏,有效提升團隊開發效率和產品可用性。

          那么,接下來我們就來看看一次完整的需求評審是怎樣的?

          需求評審的本質分為2個維度:其內容是用于需求評審,其性質則是有組織的連續性會議。因此我們把需求評審拆解為:需求評審+會,即需求評審流程和會議管理2個方面來講。

          二、需求評審流程

          不同公司不同業務不同客戶的需求評審流程都有所不同,有些只有1次,有些要開3、4次。但是,無論開幾次,其本質都是在主要和2類人開會:需求方和研發。

          B端產品經理的需求方一般是老板、甲方爸爸、業務部門、銷售部門和售后部門等,無論你們公司具體業務如何,需求評審的第一步都是要和需求方確定5W1H中的為什么做(why)、什么時候做(when)以及大致做什么(what)。

          第二步則是先和研發部門同步前面討論好的why、when和what,再和大家一起討論具體做什么(what)、誰來做(who)和怎么做(how)。

          那么,下面提供一個較為通用的標準評審模板,分為范圍評審、低保真評審和方案評審3次。

          1. 范圍評審

          • 評審目標:明確需求范圍,難點在于明確不做什么
          • 文檔準備:內容需要包含需求場景、需求清單、客戶調研報告、競品調研報告等
          • 參會人員:產品、需求方(業務、銷售、售后、老板等)
          • 評審產出:達成一致的需求范圍清單

          (Axure頁面列表)

          (通過用例圖描述需求場景)

          2. 低保真評審

          • 評審目標:初步明確大致的樣式交互及業務邏輯方案,難點在于做好需求和成本間的衡量
          • 文檔準備:低保真稿(包含核心業務邏輯說明及核心頁面交互)
          • 參會人員:產品、需求方、研發(前端、后端)、UI/UE
          • 評審產出:就核心業務邏輯及核心頁面交互達成一致

          3. 方案評審(或稱高保真評審)

          • 評審目標:關注粒度更細的方案細節,難點在于邏輯覆蓋的全面程度
          • 文檔準備:高保真稿(包含全部業務邏輯說明和頁面樣式交互說明),是可以直接開始研發的終稿
          • 參會人員:產品、研發(前端、測試)、UI/UE
          • 評審產出:理想狀態下,就全部業務邏輯和頁面交互達成一致

          以上就是較為常見的3次需求評審流程。但是需求評審只是一個里程碑,產品經理大部分的時間都花在每兩次會議之間的文檔準備中,要不是在和需求方掰頭,要不就是在和研發掰頭。

          三、如何很好地進行會議管理?

          第二部分就來看看需求評審相關的會議管理內容。

          大部分人在做產品經理之前,極少有會議組織的機會和經驗,更多都是在被動參會。而一旦入行產品,就需要開始頻繁組織各種各樣的會議,而需求評審就是其中最不可避免的一類會議。

          曾經有同事分享過羅伯特議事規則,也有一類專門做會議組織研究的咨詢公司。由此可見,會議組織其實是一門非常高深的學問。

          羅伯特議事規則》(Robert’s Rules of Order,RONR)是一本由美國將領亨利·馬丁·羅伯特于1876年出版的手冊,搜集并改編美國國會的議事程序,使之普及于美國民間組織,也是目前美國最廣為使用的議事規范。

          作品內容非常詳細,包羅萬象,有專門講主持會議的主席的規則,有針對會議秘書的規則,當然大量是有關普通與會者的規則,有針對不同意見的提出和表達的規則,有關辯論的規則,還有非常重要的、不同情況下的表決規則。

          但這里不展開來講(筆者自己也沒有掌握那么深),就只和大家分享一些較為基礎的會議管理方法,只要能夠很好地服務于需求評審和日常工作即可。

          從時間角度來看,一場會議可以分為會前、會中和會后3個階段。那么每個階段我們都需要做什么呢?

          1. 會前準備

          • 準備會議資料:需求評審則需要按照評審內容提前準備好文檔,并根據實際情況提醒大家提前閱讀并做好問題整理
          • 創建會議:盡量提前2-3天拉會,給參會人留有充足時間調整其他日程和準備本次會議;并在日程中提前告知會議目標、會議資料地址等信息

          2. 會中把控

          需求評審過程中,最主要的3個點就在于節奏把控、爭論處理和情緒管理。

          節奏把控:

          一般而言,產品是會議主持人,那么自然就擔當著會議節奏把控和主持的角色。當角色眾多時,其實是比較容易出現討論內容溢出的問題,大家一聊開就上頭了,結果導致會議開了足足幾個小時都還沒有產生定論。

          所以,需求評審中產品要做的第一件事就是把控整個會議的節奏,既要及時把聊得起興的大家拉回評審中,還要盡量按照參會人的精力去做好節奏的規劃,讓整場會議高效而輕松。

          如果你剛剛入門,還不知道怎樣能夠很好地把控節奏,那么可以嘗試提前根據評審內容進行時間和會議內容規劃。

          例如,前10分鐘同步信息和背景,中間10分鐘講權限業務邏輯模塊,然后預留5分鐘時間討論,接下來繼續講權限配置的頁面交互,再預留5分鐘時間討論等。全程盡量嚴格按照自己的議程來,看看實際情況和自己規劃是否相符,如果出現不符合,那么問題出在哪里?后續怎么進行改進?

          多來幾次,你就會有不錯的節奏把控能力了,甚至于整個會議實際開完的時間和你預期的時間相差不了幾分鐘。

          爭論處理和情緒管理:

          需求評審中出現爭吵的原因常見于以下幾點:

          • 表達或理解不準確,導致出現了信息差
          • 情緒管理不佳,一上頭就開始對人不對事
          • 會前就需求溝通不足,導致會上出現較大分歧

          既然是團隊中很多角色坐一起評審,每個角色的視角和關注點不同,那么自然會出現很多討論點甚至于爭論點。那么,當會上有2個人產生了爭論時(通常是產品經理和其他人),怎樣處理才比較妥善呢?

          首先最重要的一點,做好自己的情緒管理

          在一場需求評審過程中,產品經理既是會議主持人,又是參會人。如果你自己都亂了,那么整個會就尬在那里沒人收場了。所以,一個成熟的產品經理需要盡量顧全大局、擺正自己的心態,盡量以結果為導向、對事不對人。

          其次,換位思考,嘗試先根據對方表達的看法去梳理他的思路,然后用自己的理解復述一遍,看對方是否認可你的理解。接下來,再根據你的理解去進行判斷并闡述自己的觀點,看是否能夠得到對方的認可。

          最后,如果實在在會上沒法溝通,那就告知大家:自己會先記錄下待討論的問題,會后再進行討論,后續的議程繼續。「下來再討論」真的是一句解決會上沖突的萬能金句。

          3. 會后同步和跟進

          會議結束之后,確實可以長舒一口氣,開始準備下一階段的工作了,但注意:會后還是需要做好會議紀要、會議同步和后續問題的跟進。

          筆者的需求評審會議紀要一般分為3部分:待討論、待完善、已確認。

          • 待討論:指會上的遺留問題
          • 待完善:指會上確認要改的問題,后續自己要完善在文檔中
          • 已確認:指會上討論得出要做/不做的結論的點

          整理好會議紀要后,及時將內容同步好發給參會同事,如果后續還有待討論的問題,則與相關人員定一個討論的待辦,避免大家忘記。

          這里其實想分享一個筆者和UI小姐姐之間蠻有意思的小故事。

          低保真評審時,我們還會順路確認好UI出圖的范圍。因為大多數都是產品帶電腦投屏,所以自己會順手記錄下UI出圖的范圍并發給UI小姐姐。本意是為了更好地把控會議后續質量,沒想到這個順手的行為得到了UI小姐姐的肯定。

          從這個小故事中,筆者發現,如果日常能夠在需求評審中的灰色地帶稍微多做一些、多為對方思考一些,那么,整個團隊互相之間的信任和協作會越來越nice~

          四、評審時,前后端/測試都關注什么?

          前面和大家分享了完整的需求評審流程,現在就來帶大家換個思路,看看前端、后端、測試在一次需求評審中都關注什么?

          以下素材來源于筆者和研發同事們的親身采訪

          后端:

          • 關注方案可行性的評估,重點在需求邏輯可行性、技術難度、工作量和改動成本上;
          • 關注需求邏輯的覆蓋度,幫助產品經理做好邏輯的查漏補缺
          • 關注研發過程中的實現風險

          前端:

          • 關注需求場景及業務合理性
          • 關注頁面樣式交互,為產品經理提出一些更合理的樣式交互建議
          • 關注技術方案和成本評估,尤其關注新頁面中交互與已有統一標準組件的評估

          測試:

          • 關注需求的邏輯性及合理性
          • 關注需求描述的準確程度、是否排除二義性等(認為好的需求文檔應該是一把標準的尺子)
          • 關注整個迭代的質量風險及進度,保證交付的穩定性

          從上面的回答中能夠很明顯的看出不同角色看待需求的視角。當我們要將需求講給不同的人聽時,就要提前站在他們的視角和關注點去思考問題,獲得更多溝通的前提信息,從而更順暢地進行溝通。

          五、3個壓箱底的需求評審技巧!

          從被懟到在現場止不住的哭,再到現在可以輕輕松松開玩笑回懟研發,筆者踩了很多坑、也積累了一些經驗。所以,最后就和大家分享3個壓箱底的需求評審技巧!

          1. 先零售溝通,再批發溝通

          此處標題來自邱岳《產品訓練營》中的內容,指我們在做需求評審的時候,不能把各式各樣的問題全部都堆到1-2h的需求評審會上來解決,而是應當先和相關人私下進行討論(零售溝通),取得共識后再和相關角色統一進行討論(批發溝通)

          因為,一場需求評審中往往會出現來自不同部門的不同崗位和角色,每個人的關注點都有所不同。如果,所有問題都在會上一并討論,那么不僅容易范圍溢出、干擾討論,也容易耽誤他人時間、讓聽眾失去了耐心。

          例如,本次迭代中課次和班級的關系到底應該如何設計?班級和課次是1對n還是n對n的關系?這明顯是與后端直接相關的問題,那么,在需求評審前,這類問題就需要提前與后端同學溝通確認好,會上只討論大家公共關注和需要共同確認的問題。

          這樣一來,整個會議中大部分時間都在做同步,小部分時間在討論一些公共問題及小問題,整個會議的效率會得到極大的提升。

          2. 識別并搞定關鍵人

          項目管理中有一類管理叫做「干系人管理」,指的是我們需要識別項目中的干系人stakeholders,并對他們進行一定的管理。

          而我們則可以把需求評審當作一次小型的項目,項目如果要順利推進,就需要對其中的干系人做好管理。而干系人中,又可以根據話語權及意見影響程度分為關鍵人和追隨者,用一句互聯網黑話來形容就是找到關系人中的「抓手」人物。

          因為,需求評審中不僅角色眾多,人員也很復雜,很難兼顧和滿足每一個人的想法。因此,在大方向上,我們就需要提前去搞定關鍵人,因為他們擁有更多的視野和做決策的信息,某種程度上,也是意見領袖。

          如果你的想法和大部分人都不一致,那可以先嘗試和關鍵人進行溝通。在取得關鍵人認可后,再去推進那些想法搖擺不定或者沒有太多主觀想法的人,整個過程相對就會順利一些。

          3. 適當放權,避免太過獨斷

          不知道大家有沒有做過DISC性格測試,筆者身邊大多數產品經理都是D型居多,即支配型/控制者Dominance。

          D型行為風格的關鍵詞是:積極進取、爭強好勝、強勢、愛追根究底、直截了當、主動的開拓者、堅持意見、自信和直率。

          但是這類人也往往具有以下這些缺點:

          不知道你有沒有躺槍,D型人格的產品經理在需求評審中一些問題的討論上難免會有些過于強勢。當然,大家都知道天才產品經理喬布斯就是一個極度強勢和獨斷專行的人,但我們大部分人都難以達到那樣的高度,如果真的像喬幫主那樣處事,可能最后就只能被迫做一個全棧產品了吧。

          因此,在需求評審中我們需要對自己的決策做出一些取舍。大方向上一定要堅持自己的想法和意見,而一些優先級低的需求和細節可以適當放權,給予團隊一些發揮空間,這也算能夠堅持自我想法的一種迂回之策吧。

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

          文章來源:人人都是產品經理  作者:冰冰醬

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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