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

          首頁

          這逆天的效果,竟然是10秒鐘做出來的,真實大開眼界!

          lanlanwork

          莫b

          圖片

          圖片

          圖片

          再酷炫一點的,甚至可以讓3d動起來:

          這樣的效果如果做成封面,是不是老帥了!

          如果你不會動效也不會3d,沒關系,今天給大家介紹一個神奇,上面的3d動態效果非常多:

          咔咔就是一頓選擇! 還有各種屬性各種調整:

          圖片

          調整出自己滿意的效果之后,文字往上面咔咔一放:

          圖片

          圖片

          圖片

          尤其是后面的元素是動態的:

          這封面可不得了啊,做個匯報啥的,必須震懾一下老板,讓他尖叫就完了!
          (我這個動態gif圖效果是用屏幕錄制,然后用ps把mov格式轉成gif的)

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》這逆天的效果,竟然是10秒鐘做出來的,真實大開眼界!

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

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

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

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



          B端產品C端化,抱歉我想的太簡單!

          lanlanwork


          為什么要 C 端化?

          其實 B 端產品 C 端化,并不是因為傳統的 B 端產品沒 C 端好用(不是這么比的)。

          其實關鍵還是獲客模式的轉變。

          傳統的 B 端產品是銷售驅動,銷售人員通過電話、上門拜訪等形式促使客戶下單。

          一旦成功賣出,只要后續的服務不太差,客戶就沒必要更換遷移。

          現在 B 端市場越來越大、行業信息越來越透明、客戶的判斷能力越來越強,傳統銷售模式開始變為互聯網營銷。

          B 端產品在網上發布信息并投放廣告,吸引客戶自己前來試用并購買,只需提供少量客服人員即可。

          這與以往的 B 端業務模式有很大不同,所以就需要變革。

          所謂「B 端產品 C 端化」,表面上是學習 C 端的用戶體驗,背后的真正意圖是要學習人家 C 端的互聯網獲客能力

          圖片

           

          怎樣才是好的 C 端化?

          我發現 B 端產品的 C 端化程度,和他們的互聯網廣告投放力度成正相關。

          例如我在油管上經常受到 Monday、GoDaddy 這兩款 B 端產品的輪番轟炸。

          先不說好不好用(畢竟我也不是目標客戶),我發現他們用起來真的很有「C 端感」,和傳統的 B 端產品果真不一樣。

          倒不是什么“輕量化、趣味性和人文關懷”,而是因為他們在我打開網站的那一刻,就開始不斷吸引我探索使用。

          我拿 GitLab 和 Monday 的官網首頁對比一下,也許你就能感受到了:

          圖片

          前者像是一板一眼的「老實人」,后者則像是對你笑瞇瞇的「綠茶妹」,高下立判。

          “輕量化、趣味性和人文關懷”這些東西,并不足以打動用戶試用和購買,頂多只能算是「低段位」手段。

          只有「高段位」手段,才能讓用戶不自主地地被吸引,心甘情愿地掏錢。

          可是要做到「高段位」真的很不容易,我今天就總結幾個技巧吧~

           

          1. 直接坦誠

          遇到兩個陌生人:一個打官腔又遮遮掩掩的;另一個說話友善接地氣又誠實,你會更喜歡哪個?

          可能大多數人跟我一樣會喜歡第二個。

          C 端化做得好的 B 端產品,會把自己的產品預覽圖直接放到首頁供人觀看,而不是搞一張概念圖外加一堆高大上的廣告詞。

          前面放過的那張案例,這里也可能拿來用:

          圖片

          GitLab 的官網畫了一些很抽象的概念圖,寫了一些很抽象的描述,給人感覺很模糊。

          Monday 的官網明確把自己的業務類型列了出來供用戶選擇,還把每種業務對應的圖標和展示方式畫了出來,感覺很明確清晰。

           

          2. 有效互動

          遇到兩個健身房銷售:一個上來就說一個勁地介紹服務;另一個則先確認你平時的健身習慣,再根據你的情況介紹服務,你會更愿意聽誰說話?

          我肯定更喜歡第二個。

          C 端化做得好的 B 端產品,不是簡單地展示信息,而是先了解用戶,再根據用戶的需求提供不同的信息甚至服務。

          圖片

          Zendesk 的網站,會把自己的功能列出來給用戶,給的圖像和描述又很抽象,毫無互動感。

          而 Asana 會讓用戶選擇自己需要的功能,并直接給出具體案例的界面展示圖。

           

          3. 降低門檻

          遇到商場逛街時遇到兩個陌生餐館,一家在二樓;另一家在一樓,你會愿意嘗試哪家?

          肯定是第二個。

          很多 C 端化做的好的 B 端產品,會把表單用彈窗的樣式放在產品上面,讓用戶感覺只要填寫完就能立即使用了

          圖片

          比起 Trello, Smartsheet 只是在表單展示了一下產品內部,就讓用戶感覺門檻低了好多。

          即便 Smartsheet 的新用戶后面發現背后那張圖真的這是一張圖而已,要填的一點不少,但這時都已經快填完了……

           

          4. 循序漸進

          兩家陌生的兩家餐廳都把菜單擺出來了,一家的菜單寫得密密麻麻;另一家的菜單雖然菜品不多,但是推薦菜品和菜式分類很清晰,你會更愿意嘗試哪家?

          我相信很多人都會更愿意嘗試后者。

          C 端化做得好的 B 端產品,不會太在意自己的產品是不是看起來功能齊全,而是更在意用戶是否能夠很好的理解產品,不要造成心理負擔。

          圖片

          上圖來源:Figma這些交互細節,B端設計也值得借鑒

           

          Sketch 和 Figma 的屬性面板在功能上其實沒有很大的差異,但是后者看起來卻清晰簡潔許多,對新用戶更加友好。

           

          總結

          B 端產品 C 端化這個理念其實很好,但如果被誤以為只是向 C 端學習用戶體驗那就可惜了。

          用戶體驗只是手段,關鍵目的是在沒有銷售人員參與的情況下,如何從互聯網獲客。

          這次的經驗的提醒我,以后如果再看到一些很火概念,不要簡單的從表面理解,而是要站在決策者的角度,多思考背后的真實意圖。

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

          轉載請注明:學UI網》B端產品C端化,抱歉我想的太簡單!

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

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

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

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


          B端產品界面高屏效初探

          ui設計分享達人

          背景

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


          undefined


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


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


          undefined


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

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

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


          undefined


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


          undefined


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


          undefined



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

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


          undefined


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

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

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

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


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

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


          undefined


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

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


          undefined


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


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


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


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


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


          undefined


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


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

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

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

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


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


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


          undefined


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


          undefined



          實踐階段-如何設計

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


          undefined


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


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


          undefined


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


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

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


          undefined


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


          undefined



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

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


          undefined


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


          undefined



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

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


          undefined


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


          undefined


          結語

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


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

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

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

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



          設計模式丨行動號召按鈕:如何讓用戶的點擊更加順暢?

          ui設計分享達人

          What 是什么

          簡介「行動號召按鈕」是用來號召用戶點擊的進行下一步的操作按鈕/可點擊的組件。

          例子 螞蟻金融科技首頁的“開始探索”按鈕,點擊后跳轉到一個新的頁面進行下一步操作。

          undefined


          Why 為什么

          「行動號召按鈕」是在事件操作的最后一步出現的,可以讓用戶知道當按下此按鈕時,當前事件的操作流程已經完成或即將發起一個新的流程,可以給用戶一個明確的反饋。


          When 什么時候使用

          當你需要在界面中放置“完成”、“提交”、“確定”或“繼續”等按鈕時,可以使用這個模式,一般放置在一系列操作的最后一個步驟中。

          使用條件

          • 頁面中即將進行下一步操作或最終確認的時候;

          • 需要一個醒目的按鈕提示用戶結束當前流程時。


          How 如何使用

          創建行動號召按鈕時可以使用平臺默認的按鈕樣式,或者使用更大的按鈕樣式(注意不能是一個鏈接),讓它在頁面中非常醒目,讓用戶可以快速找到并點擊它。

          需要注意:

          • 按鈕可以放在頁面的底部或右邊,即任務流程最后一步的下面,也可以是你的平臺規范中規定的位置,只要能讓用戶能夠快速找到它就可以,避免用戶因為找不到按鈕而結束了這個流程;

          • 最好使用文字按鈕而不是圖標,因為文字能讓用戶更好的理解,比如像“完成”、“提交”這樣的按鈕用文字更能讓用戶理解。


          Example 案例

          案例一:Google Play商店

          用戶需求:安裝應用

          安卓設備上的 Google Play 商店中軟件名稱右下方的“INSTALL安裝”按鈕就是一個很好的案例。此按鈕放置的位置是軟件名稱的下方和右側,周圍的空白區域較大,是用戶視線最終會停留的位置,顏色是綠色與白色背景形成對比,且尺寸也很大,所以非常醒目 ,用戶一眼就能看見并點擊它。

          undefined


          案例二:12306官網

          用戶需求:查詢火車班次并預定

          12306官網的首頁的搜索火車班次的界面上就使用了強按鈕,橙色的長按鈕非常醒目,且位于信息的最下方,當一切信息輸入完畢后,用戶可以立即看到查詢按鈕并順利點擊進入到下一個頁面。

          undefined


          案例三:App Store

          用戶需求:安裝軟件

          用戶在搜索到軟件進入到軟件詳情頁面時,一眼就看到軟件名稱右方的藍色“獲取”按鈕,點擊它就可以安裝軟件,作為整個頁面唯一的動作按鈕它十分醒目,符合用戶的“Z”字形的瀏覽信息習慣,確保用戶能看到它,快速達到目的。

          undefined


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

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

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

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



          如何搭建 B 端設計規范

          ui設計分享達人

          一  設計規范的目標


          在搭建設計系統之前,我們要想清楚設計規范的目標是什么?使用者是誰?

              ·  目標:保持產品風格統一性、提高設計輸出效率、減少無效溝通。

              ·  使用人群:UI、交互、前端測試。



          二  設計原則


          設計規范要符合基本的設計原則,否則你的規范會雜亂無章。這里我總結了 6 條原則供大家參考。


              ·  Unity(統一性):頁面風格、色彩、布局等要保持全局統一,不可為了某一功能的美觀而去破壞整體性。

              ·  Accessibility(易用性):易用是首要考慮的因素,能一步解決的事情絕不兩步。

              ·  Proximity(親密性):如果信息的關聯性強,則他們的距離就要相應的縮短,讓他們看起來是一個視覺單元;反之,則距離要加大。要讓用戶對信息的區域劃分一目了然。

              ·  Alignment(對齊原則):在界面中,將元素進行對齊,即符合用戶的認知,也可以引導視覺流向,讓用戶更加流暢的閱讀信息。

              ·  Contrast(對比原則):對比是增加視覺效果最有效方法之一,同時也能在不同元素之間建立一種有組織的層次結構,讓用戶快速識別關鍵信息。

              ·  Repetition(重復原則):相同的元素在整個界面中不斷重復,不僅可以有效降低用戶的學習成本,也可以幫助用戶識別出這些元素之間的關聯性。



          三  框架布局


          這里一般采用柵格布局。說到柵格,有好多小伙伴又要再回顧一下知識點了。我今天再把柵格知識幫大家復習一遍,如果之前不是很了解柵格的,拿個小本本記下來,要考~~


          柵格布局能夠適應各種屏幕尺寸及分辨率,確保整體布局的一致性。


          柵格建議使用 1、2、3、4、6 切分布局,可以進行多種布局組合,并在整個設計中保持布局的結構的一致性。


          頁面中一般采用 24 列自適應網格,你可以使用它為各種屏幕尺寸創建靈活的布局。


          邊距 Margins、列 Columns、間隔 Gutters 分別是什么?


              ·  邊距 Margins:邊距是內容與左右邊緣之間的空間??刂婆_內容區的邊距選用 8 的倍數為設定值,一般采用 16/24px 的居多。

            需要注意的是:

                ··  減去 margin 后,列在頁面區域均分,保證每列的寬度是一致的;

                ··  在區域有 margin 的情況下,劃分列的區域不能包含 margin。


              ·  列 Columns:在電腦端列的數量是個常量(24列),每一列寬度的尺寸隨屏幕大小進行自適應調整。


              ·  間隔 Gutters:間隔是列與列之間的空隙,控制臺產品 gutter 使用固定值也要是 8 的倍數,一般采用 16/24px。


          需要注意的是:

                ··  布局的左右兩邊的分界線 gutter 可以為 0;

                ··  必須保證 column 的寬度是一致的。


              ·  邊距 Padding:padding 指一個元素的內容和其邊界之間的空間,padding 最小值是 4px,然后其余均為 8px 的倍數,建議值為 8/16/24px。


              ·  內容區定寬:此場景常用于用戶歡迎頁、結果頁等需要將內容區寬度設置為固定值的頁面。此時 column 和 gutter 保持不變,根據頁面寬度改變 margin 的值。



          四  設計風格


          4.1  Color(顏色)

          色彩內容主要包含基礎色(如品牌色、黑色、白色)和功能色(如鏈接色、提醒色等)。圖表配色為單獨的配色體系。


          在前期制定顏色規范的時候,精益求精的設定顏色,切忌顏色過多。


          顏色的狀態色盡量用原色進行轉換,設置一個合理的變色公式,讓所有顏色的狀態色都根據這個公式進行轉換。例:

              ·  Hover:H不變 S加10 B減5

              ·  Click:H不變 S加20 B減10;

              ·  Disable:HSB均不變,不透明度 30%。


          在設計規范中,盡量把顏色的色值和 rgba 值都寫出來(這里是強迫癥患者要標的,因為有時候色值完全一樣,但 rgba 數值略有不同,雖然效果一樣,但是對于強迫癥的你來說,舒服嗎?)


          狀態色有 4 狀態色:Normal、Hover、Click、Disable。


          在設定圖表顏色的時候,要考慮不同的使用樣式(柱狀圖、環形圖、餅圖等...),同時也要考慮他的延展性,比如你設定 12 個 chart 色值,在使用的時候按著順序來使用,當超過 12 個后可以為同一個顏色。



          4.2  Font(文字)

          設定統一的字體規范,使用非襯線字體在各個操作系統下都有最佳展示效果。


          首先,要設置一個字體家族,保證產品界面的最優展示。


          例如(僅作為展示,不是建議):font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";


          4.2.1  字號

          現在主流的產品中,主體字為 12px / 14px 的居多,可根據自身的產品定位以及用戶的習慣進行設定。字號不要出現奇數,否則在一些顯示器上會有對不齊像素的狀況發生。


          4.2.2  行高

          行高常規的有兩種規范:

              ·  字號+8px;

              ·  1.5倍 / 2倍 * 字號。


          我喜歡用第一種,就是字號大小 + 8px 作為行高的規范。行高是不可被忽略的重要細節之一,因為在算間距的時候,行高是要被算進去的。


          4.2.3  字重

          字重有很多,但是在真正的產品使用中,字重盡量不要太多種,2~3 種即可。


          4.2.4  字體顏色

          字體顏色數量建議在 3~4 個,不宜過多,但是每個層級之間區分要大一些。


          文本應該保持至少 4.5:1 (基于亮度值計算)的對比度以保持文本清晰;最佳對比度為 7:1。測試對比度的網站:https://contrast-ratio.com


          WCAG 2.0 中將顏色對比等級分為 3 種,A級,AA級,AAA級,等級越高意味著顏色的對比度越高,呈現出來的視覺壓力越大。

              ·  A級:對比度 3:1,是普通觀察者可接受的最低對比;

              ·  AA級:對比度 4.5:1,是普通視力損失的人可接受的最低對比度;

              ·  AAA級:對比度 7:1,是嚴重視力損失的人可接受的最低對比度。



          4.3  icon(圖標)

          設定統一的圖標使用規范,讓視覺效果更和諧。


          4.3.1  Icon 大小

          icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相鄰的兩個尺寸至少相差 4px,否則你會在后期用的時候會有選擇困難癥。同時功能 icon 盡量貼邊或盡量貼邊繪制,保證展現的視覺統一性(操作 icon 除外)。


          單獨 icon 使用的時候,盡量不要太小,最小值建議為 12px。


          4.3.2  Icon 熱區

          icon 的熱區經常被設計師和開發所忽略,本身 icon 的尺寸一般就很小,再加上如果沒有設置熱區的話,操作體驗極差。所以一定一定要設置 icon 的熱區,設置的值我建議為 icon 大小的 2倍。例:icon 大小為 14 * 14px,則熱區大小為 28 * 28px。


          4.4  size(尺寸)

          頁面內布局間、模塊間、模塊內的各部件距離。


          尺寸大部分規范中都用的是 8 的倍數,不用糾結,直接用就行。我這里有個公式:Sn = 8px * n,n為正整數。特殊:最小支持4px。


          五  交互


          交互我分為兩個方面:交互方式交互狀態


          5.1  交互方式

          交互方式指的是對某一個操作所進行的具體行為,比如刷新方式有下拉、上滑、按壓點擊等方式,這就是所謂的交互方式。交互方式有很多種,沒有最優,只有最適合。


          交互方式要保持產品的統一性,同類別的交互不可有不同的操作感受。同時交互方式要符合大眾的認知習慣,可創新但不可違背潛意識。


          隨著時代的發展,交互方式也在不斷的更新。比如最開始的手機是按鍵式的,隨著大眾對屏幕大小的需求不斷提升,到了現在的全面屏手機,如果這個時候你再去做當年火爆的按鍵手機,那你就只能跟市場說拜拜。


          總結交互方式的幾個關鍵點:創新、統一緊跟趨勢。


          5.2  交互狀態

          一個完整的產品生態是不會遺漏每一個交互狀態的。


          同樣是做售票的軟件,為什么高鐵管家就比 12306 做的好呢?是因為高鐵管家把很多交互狀態友好的做了展現反饋,而不是冰冷的數據吞吐。


          同類產品中,每個都有自己獨特的交互狀態,可能你一直用某個軟件的原因只是有個功能的交互狀態打動了你,從此你就深深愛上了它。


          現在工作中,我們都在講人效,拼命的去更新迭代,去研發新功能,開拓新產品,往往會忽略交互狀態這個點,因為很多時候付出收獲比是很低的,但是真正好的產品,這部分是不可或缺的。


          交互真的太大了,單獨寫一篇文章都寫不完,這篇我只能拋磚引玉,勾起你的思維,如果有任何要探討的,歡迎來叨擾。


          六  引導


          引導分為 5 種:Newbie guide(新手引導)、Steps guide(步驟引導)、Help / Operation guide(幫助/操作引導)、New function guide(新功能引導)Blank guide(空白頁引導)。


          6.1  Newbie guide(新手引導)

          新手引導是針對新用戶的,首次進入產品的時候,我們要著重的把自己產品的亮點以及操作快速的介紹給新用戶,讓他用最短的時候上手我們的產品。


          新手引導要言簡意賅,并且如果非必要的話,盡量給用戶一個可以直接關閉的按鈕,讓用戶有選擇權。我就非常討厭有一些產品的新手引導,必須走完全部流程后才能關閉,惡心的不行。


          6.2  Steps guide(步驟引導)

          步驟引導一般用在有固定操作步驟的場景下,指引用戶一步一步的完成想要的結果。常規的步驟引導建議在 3~5 步之間為合理。


          6.3  Help/Operation guide(幫助/操作引導)

          幫助/操作引導的展現方式是比較豐富多彩的,可以是提示語、輔助性文本、tooltips 等等,他的作用就是輔助用戶去了解并且知道如何操作這個功能。


          這個也是在產品中使用頻率最高的,運用好他,可以讓你的產品事半功倍。


          6.4  New function guide(新功能引導)

          他就是常用在新功能上線后,用戶第一次登陸相關頁面后做的一些引導,目的是為了告訴用戶我們做了新東西,你快來試試吧。


          6.5  Blank guide(空白頁引導)

          空白頁引導一般用在在缺省頁,對用戶進行一些操作指引,讓無信息的頁面變得更有價值。比如百度在一些缺省頁上就放了一些關于失蹤兒童的信息,就因為做了這個引導,幫助了千萬個家庭找到了失散的孩子。



          七  組件


          組件是設計系統里面最為龐大的東西。組件可以分為了 5 類:

              ·  Navigation(導航)

              ·  Data Entry(數據錄入)

              ·  Data Display(數據顯示)

              ·  Feedback(反饋)

              ·  Other(其它)


          基本上這幾類已經覆蓋了多數的組件,下面我把我自己整理的這幾類分別都包含哪些組件,以及組件的簡單介紹給列出來,快來保存吧。


          7.1  Navigation(導航)

              ·  Affix(固釘):將頁面元素釘在可視范圍。

              ·  Breadcrumb(面包屑):顯示當前頁面在系統層級結構中的位置,并能向上返回。

              ·  Menu(導航菜單):為頁面和功能提供導航的菜單列表。

              ·  Pagination(分頁):采用分頁的形式分隔長列表,每次只加載一個頁面。

              ·  Steps(步驟條):引導用戶按照流程完成任務的導航條。


          7.2  Data Entry(數據錄入)

              ·  Checkbox(多選框):可選擇多個。

              ·  Radio(單選框):只可選擇一個。

              ·  Switch(開關):開關選擇器。

              ·  Form(表單):具有數據收集、校驗和提交功能的表單,包含復選框、單選框、輸入框、下拉選擇框等元素。

              ·  Input(輸入框):通過鼠標或鍵盤輸入內容,是最基礎的表單域的包裝。

              ·  Select(選擇器):下拉選擇器。

              ·  Skeleton(加載占位圖):在需要等待加載內容的位置提供一個占位圖。

              ·  Time selectors and sliders(日期時間選擇過濾器):當用戶需要輸入一個時間或日期,可以點擊標準輸入框,彈出時間面板進行選擇。

              ·  Transfer(穿梭框):雙欄穿梭選擇框。

              ·  Upload(上傳):文件選擇上傳和拖拽上傳控件。


          7.3  Data Display(數據顯示)

              ·  Badge(微標):圖標右上角的圓形徽標數字。

              ·  Card(卡片):通用卡片容器。

              ·  Collapse(折疊面板):可以折疊/展開的內容區域。

              ·  Popover(氣泡卡片):點擊/鼠標移入元素,彈出氣泡式的卡片浮層(可操作)。

              ·  Tabs(標簽頁):選項卡切換組件。

              ·  Table(表格):展示行列數據。

              ·  Tag(標簽):進行標記和分類的小標簽。

              ·  Timeline(時間軸):垂直展示的時間流信息。

              ·  Tooltip(文字提示):簡單的文字提示氣泡框。

              ·  Tree(樹形控件):文件夾、組織架構、生物分類、國家地區等等,世間萬物的大多數結構都是樹形結構。使用樹控件可以完整展現其中的層級關系,并具有展開收起選擇等交互功能。


          7.4  Feedback(反饋)

              ·  Alert(警告提示):警告提示,展現需要關注的信息。

              ·  Notification(通知提示框):全局展示通知提醒信息。

              ·  Drawer(抽屜):抽屜從父窗體邊緣滑入,覆蓋住部分父窗體內容。用戶在抽屜內操作時不必離開當前任務,操作完成后,可以平滑地回到到原任務。

              ·  Modal(對話框):模態對話框和非模態對話框。

              ·  Progress(進度):展示操作的當前進度。

              ·  Spin(加載):用于頁面和區塊的加載中狀態。


          7.5  Other(其它)

              ·  Button(按鈕):按鈕用于開始一個即時操作。

              ·  chart(圖表):圖標數據顯示。

              ·  Copyright(版權):版權信息。

              ·  Divider(分割線):區隔內容的分割線。

              ·  logo(標志):logo 的使用。

              ·  LocaleProvider(國際化):為組件內建文案提供統一的國際化支持。

              ·  Text link(文字鏈):點擊有鏈接跳轉的文字。

              ·  Scrollbar(滾動條):在特定界面區域內進行內容的更多展示。


          以上組件可根據自己的產品進行增刪,把組件規范設計完成后,整個設計規范就完成了 90% 以上,可以算一個比較完整的設計規范了。



          總結


          每一個設計規范都是有靈魂的,規范是為了更好的做設計,而不是限制設計師雙手的枷鎖。


          設計規范也不是一成不變的,他在落地使用的時候多少都會有問題,需要慢慢的去反復檢驗規范的合理性,發現不合理的及時更正。

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

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

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

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





          撕開B端封印,數字時代下的可視化構建

          ui設計分享達人

          為什么說是撕開 B 端封印呢?沒接觸過 B 端的同學,很大一部分都認為 B 端不就是簡單的列表和圖形嗎?拿開源組件拼拼湊湊就可以了,有什么可設計的?


          其實這個想法完全錯了,你如果接觸后就會發現,B 端所需要的掌握的產品知識、思維邏輯、規范意識等等太多了。


          而且近幾年 B 端這個詞出現的頻率越來越高了,因為前幾年大家都在爭 C 端市場,純 C 端的流量爭奪已經進入了尾聲,B 端產品反而帶來了新的機會點,同時也被慢慢的重視起來,比起以往 B 端設計師,現在需要掌握的技能也越來越多。你可以查閱一下一些招聘網站,現在 B 端可視化方面的崗位是非?;鸨c C 端相比,人才缺口更大,未來幾年 B 端也會更加火爆,有機會接觸 B 端的話就不要錯過機會。我們團隊平均招聘一個合適的設計師基本要兩個月的時間。


          說了這么多,我們開始今天的主題吧!


          首先在座的可能有部分設計師沒有接觸過數據可視化的設計,那么第一個問題來了,什么是可視化?大家想一想。給大家三秒鐘~


          通過可視的表達來增強用戶處理數據的效率。


          接下來我會從三個方面來講解如何構建可視化:

              · 靈感需要迸發,更需要積累

              · 從零到一設計驅動

              · 設計度量



          一、靈感需要迸發,更需要積累


          1.1  數字時代下,99%的問題都是舊問題

          數字時代下仍有信息不對稱的情況,尤其是關鍵技術和設計上的問題,但是如果你用心尋找,就會發現你的新問題則是別人很久之前的舊問題了。所以要做個有心人。


          但是問題又來了,有時候真的不知道該怎么找、去哪找?這是個很常見的問題。因為可視化不比插畫、平面等這些成熟的領域,他是比較小眾的,所以靈感以及素材的搜尋是一個令新手設計師頭疼的事情,再加上對關鍵詞的熟悉程度不夠,導致很多設計師只停留在【可視化】這個關鍵詞里,最后感覺搜來搜去都是見過的圖,沒有新意。


          1.2  明確目標,知道自己想要找什么

          互聯網信息太多了,漫無目的的找靈感,只會浪費時間,一會看到這張圖好看,一會看到那張圖好看。不知不覺幾個小時就過去了。


          1.3  建立關鍵詞詞庫

          確定目標后,就要細化關鍵詞了。怎么建立關鍵詞詞庫呢?


          關鍵詞詞庫由3部分組成:終端、設計類型、業務類型。


              · 終端:大屏、移動端、web 等等。

              · 設計類型:每個細分的數據可視化類別都是有一些專有名詞的,比如最近比較熱門的車載HMI系統,那他的類型關鍵詞就是 HMI。通過這些關鍵詞,你會搜到更精準的結果。設計類型關鍵詞比如:AR/VR、HUD、HMI、FUI等等,你要了解你們公司相關類型的關鍵詞,記錄下來。以及跟你們有關聯的,都記下來,補充自己的詞庫。

              · 業務類型:智慧城市、生物醫療、監控部署等等。


          這三類單獨或組合進行搜索,就會看到更多可視化產品了。把關鍵詞詞庫建立起來后,就可以去常用的網站上搜索了,最好用的還是 behance 和 Pinterest。


          1.4  除了常用的設計網站,還有哪里可以看?

          企業官網:很多做數據可視化的公司,會在官網展示一些能體現自己業務特點、業務實力的案例,而這些案例就是這些企業最好的數據可視化設計作品了, 所以但凡有案例展示的官網,案列基本都是最典型最好的設計,所以從這些案例中找靈感,也是一個有意思且有效的方法和途徑。


          1.5  你看到了別人看不到的,設計才能有所不同

          總結一句話:你看到了別人看不到的,設計才能有所不同。如果你和別人看到的是一樣的,你怎么比別人做的更優秀?


          1.6  興趣推送

          經常刷短視頻/新聞網站的應該知道,系統會根據你的點贊、收藏、瀏覽等數據來給你安排后面的內容推送,以保證給你推送更精準的內容。設計網站亦是如此,behance 等網站上也都是千人千面,它會根據你的點贊收藏等來讀取你的喜好,進而推送更精準的作品。所以假設你是一個B端數據可視化方向的,你就經常搜、點贊收藏相關作品,之后你的首頁出現相關內容的幾率也會變大。


          1.7  定期清理,更新迭代

          最后一點,這個也是好多設計師的通病,收藏即學到。


          靈感庫要求精而不是多,每隔一段時間,回來翻一翻自己之前收藏的作品,會發現有些作品自己已經看不上了,因為在做靈感收集的過程中,我們的審美會自然有所提高,當輸入的作品樣本越來越多,我們對作品評價的維度也會更多,之前那些覺得好的作品,現在看來也就會有缺陷和不滿,這是一個很正向的結果,成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品,添加更符合自己當前審美的作品到靈感庫里。


          這樣慢慢完善你的地基,才能更高的向上走。



          二、從零到一  設計驅動


          講完第一部分,我們開始搭建產品。

          我負責從零到一的項目大大小小的得有10來個了,我認為在產品整個產品周期中設計師的話語權最高的時候就是項目初期,是可以做到設計驅動的。既然設計可以有足夠的的話語權,你就得規劃好未來的設計走向。


          產品初期,經常會有幾個爭議比較大的問題,我們來聊一下。


          2.1  設計先行還是調研先行?

          這是新項目必須要做的選擇題,再講之前你先想一下,如果是你,你會如何選擇?


          我的觀點是設計先行。(當然設計先行是建立在你至少對這個項目的行業有個簡單的了解之后,先設計再用戶調研),為什么呢?因為如果用戶調研先行的話,用戶只會反饋當下最想要的東西,從而有可能給你帶來誤導。就比如我們經常舉的一個例子:汽車出來之前,人們只想要一匹更快的馬。


          我們要解決的不是用戶當下想要的東西,而是痛點背后用戶真正需要的東西是什么。在 0-1 的這種創造性的項目,往往設計者才是當下最懂產品的人,你把決策權交給一些不懂產品的人,做到最后只能是迷失了方向,鍋還是設計來背。所以一開始設計師要把決策權拿在手中,掌握航向。


          2.2  設計先行還是規范先行?

          這個問題在現在看來相對比較統一,但有的同學還是有疑惑,所以我拿出來再跟大家聊一下。


          首先我的觀點是設計先行,在設計之前就定好規范的基本都是自己YY的,返工率極高。等你在做具體設計的時候就知道之前做的規范都是白費力氣了。一般都會選用在項目完成之后或者主風格及主要頁面完成后再輸出規范,這樣既可以減少規范的改動,也可以保證后面功能延用規范,一舉兩得。


          當然了,設計規范不是所有項目都要有的,它是為了減少工作而不是增加工作,如果是一次性項目,就不需要再額外花費精力去輸出規范了,浪費資源~


          2.3  完成和完美那個更重要?

          現在都是爭分奪秒的時代,任務是無止境的,沒有做完的時候。造成這個局面的無非就是一個問題:時間不夠用。通常的做法就是先完成再迭代,做產品久了你就會發現,完成比完美更重要,不完美你還可以再迭代,完不成就有可能錯過一個風口,從而失去了變完美的可能~


          聊完這三個問題,我們在設計的時候也要有一些注意項,真正的做到設計驅動。


          2.4  把復雜變得清晰簡單而且美

          對于設計師來說,我們的任務就是把復雜問題變得清晰簡單而且美,所以我們應該成為企業和客戶之間溝通的“架橋人”。通過設計的方法,把無形的、復雜的技術,通過有形的、可視化的方式展示出來,讓客戶更直觀、清晰的感受到產品的功能,看得懂其在業務場景中產生的價值。


          2.5  轉換視角,建立共鳴

          站在客戶視角,聚焦客戶關注的核心問題,通過情景把內容有序組織起來,快速與客戶建立共鳴,有效降低內容理解難度。


          2.6  產品架構可以不那么復雜

          把復雜的業務/功能簡單化、傻瓜化,最大的降低學習成本,能幫用戶操作的絕不讓用戶親自去操作。你要讓用戶在1分鐘之內了解你的產品是做什么的、有什么功能,你就成功了。


          2.7  大膽隱藏冗余內容

          B 端項目中內容量是巨大的,面對龐雜的信息,去粗取精,提煉各場景的核心內容,避免冗余信息阻礙內容有效傳達。話術語言不單要簡單易懂,還要嚴格控制文字長度,保證內容可以被快速掃描和理解。


          2.8  尊重用戶習慣

          不要妄想改變用戶養成的慣性思維,你要記住慣性思維大于設計思維,他的閱讀習慣、操作習慣都是不易改變的,不要為了個性化而嘗試去改變,大部分情況下結果不會是那么的理想,除非你有極大的把握。


          2.9  選用合適的圖表

          這個是常提到的,我就在這里簡單給大家提個醒。比如做數據對比,柱狀圖更能清晰表達出用戶想要的結果,你卻非要放個酷炫的雷達圖,他的本質目的都沒達到,要美觀有何用?


          每個圖表都適合哪些場景使用,像 antv、hicharts 等都有介紹,我就不一一贅述了,我之前也寫過一篇關于如何合理利用圖表的文章,大家有興趣的可以去看一下。



          三、設計度量


          產品設計的好與壞我們需要去驗證、去度量。我們怎么去驗證可視化的好與壞呢?


          美與丑也是主觀的,沒有絕對的美,也沒有絕對的丑。一個產品,總會有人喜歡有人不喜歡,但是我們要迎合大多數人的審美。


          所以就需要一個方法論來驗證產品的好與壞,現在各大廠都在做自己的一套產品驗證的方法論,阿里在這方便算是國內做的不錯的,我舉幾個常用的度量模型。

              · 阿里云:UES

              · 螞蟻金服:PTECH與易用度

              · 1688:五度模型

              · 優酷:DES


          UES 目前是國內最好的,在 5 月份的阿里設計周上也正式對外講解了 UES 模型。我拿阿里云的 UES 簡單講一下吧,這么多度量模型,無論他的方法、維度有所不同,但他們的目的是相同的:通過模型來度量設計成果。


              · 易用性:易操作性、易學性、易見性 ...

              · 一致性:整體樣式、通用框架、常用場景及組件 ...

              · 任務效率:任務完成率、任務完成時間、功能使用率 ...

              · 性能:首屏渲染時間、API 請求響應時間、頁面請求響應時間 ...

              · 滿意度:產品滿意度 ...


          UES 分為 5 個模塊,這 5 項是整個產品生命周期需要驗證的。


          關于 UES 我就介紹到這里吧,UES 模型要是展開講的話,半天都講不完,感興趣的話可以去阿里云官方發布的 UES 模型的相關資料中深度研究一下,看看適不適合自己的產品。


          上面是度量產品的模型,接下來針對我們 B 端設計師,我們也要有一些指標來度量自己是否合格。


          3.1  設計效率

          現在內卷盛行的時代,各大廠都在講人效,畢竟時間才是最珍貴的,所以現在都在想方設法的提高人效。而且 B 端相對 C 端來說,可以有更多自動化的工具。


          舉個我公司的例子,我剛去的時候基本沒有自動化工具,每個設計師每天也都在忙碌,誰也沒偷懶閑著。但是我發現有很多重復性的體力勞動是不需要多少思考就能完成的,但是卻耗費了將近 1/3 的時間。所以我就在想如何提高人效,把一些體力勞動用一些工具來代替,這樣就能釋放設計資產,去做更重要的事情。


          當時就做了第一個自動化的工具:設計系統,現在大家對這個詞應該不陌生,但是我們剛開始做的時候比較早,還沒有一些比較完善的設計系統供我們參考,所以我們也算是前幾批摸索設計系統的團隊。設計系統做好后是可以把這1/3 的設計時間節省了下來,而且團隊的規范性更加統一。


          后面的話我們也是做了一些其他的自動化工具,比如結合一些插件做到 icon、組件等發布的自動化,并且與研發同學打通,有相應的自動化提醒工具,這樣也節省了與研發的溝通成本。


          在工作中,流程上能減少一步就是成功,慢慢來,萬里長征就是一步一步走出來的。


          3.2  增長設計

          增長這個詞來源于【增長黑客】這本書,顧名思義這個詞的就是通過設計來促進產品增長。


          這個詞用在 C 端上比較多,因為 C 端可驗證的方法比較多,見效快,所以我們常見的一些增長設計的案例都是關于 C 端的,而 B 端的話,受限制的因素較多,設計只是影響增長的一部分,而且見效慢。


          但是雖說影響因素多、見效慢,我們還是可以抓住機會、多去嘗試一些方法來做到設計增長。我這個方法不行,我就換一種嘗試。大家都是在摸索中過河~


          3.3  為業務賦能

          所有的設計都是要為業務賦能、為商業買單。我們設計的本質就是為用戶解決問題,讓用戶以最直觀的方式理解產品。不要為了所謂“我認為很美”而與業務背道而馳。


          3.4  體驗創新

          用戶體驗設計師會越來越重要,近兩年逐步被重視,而且未來幾年會越來越重視。行業內需要更多動腦的人而不是僅僅會動手的人。


          現在到了互聯網下半場,拼的不僅是功能,用戶體驗的重視程度已經被提升了上來,在工作中的占比也越來越重。


          再加上現在這個超級內卷的時代,你不提升,你的競爭對手就把你干掉了。而且你如果只是一成不變的維護老版本,你去下家面試的時候都沒有拿得出手的產品。


          3.5  善用工具

          現在各種辦公類工具、軟件層出不窮,而且很多工具是比較類似的,有的設計師再選工具的時候就很糾結,我認為完全沒必要糾結,首先你要明確我想要達到什么目的,只要某個軟件滿足著你的需求就可以用。


          工具是為人服務的,我們的設計軟件從 PS – Sketch – Figma,無論怎么變化總要圍繞一個目的:更高效的完成工作。


          尤其是一些自動化工具,現在人工智能升級很快,要多關注設計自動化方面的工具,讓他來解放我們的雙手。



          總結

          最后送給大家一句話:

          這時代唯一不變的,就是變化。


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

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

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

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


          借鑒=抄襲?好的設計是怎么借鑒出來的

          seo達人



          圖片

          【視頻完整版觀看可抖音搜索: 野川設計】

          今天我們講講,好的設計如如何被借鑒出來的!

          圖片

           

          我們先來這兩張電影海報,發現什么端倪沒?

          圖片

          圖片

          尼瑪不能說是毫無關系,只能說是一模一樣!

           

          不著急,我們再來看這一組!

          我試著把兩張海報的人物扣掉對調一下

          竟然還無違和感啊,這親媽都分不出來吧?

          圖片圖片

          以上幾組設計抄襲的例子,很多人問這抄襲它等同于借鑒嗎?我想說:肯定不等于。

          圖片

          但就是這么很明確對抄襲與借鑒劃分的判斷,在度娘上竟然搜出了一千多萬條相似信息。代表著大部分設計師還是無法判斷抄襲與借鑒具體的界限在哪里,于是作為專注傳播設計內容的我來說,促使了做今天文章的原因。

          圖片

          圖片

           

          這是A作品,這是B作品,發現相似度基本可以達到90%以上,而抄襲的意思是指竊取他人的作品當作自己的,在相同的使用方式下,完全照抄他人作品和在一定程度上改變其形式或內容的行為。

          圖片

          圖片

          最直接的案例就是汽車行業里的攬勝極光告陸風X7抄襲,據說當年把攬勝極光的車主氣的半死。

          圖片

          但要屬抄襲界的最強騷操作,非眾泰改裝保時捷莫屬,當年眾泰最輝煌的時候還成為屌絲把妹專用車,甚至連保時捷車主都無法分辨。

          圖片

          圖片

          這些相似度極高,且沒有原創而只是在原有構架上使用相同方式來改成自己設計的都屬于抄襲,甚至都可以說原封不動的套娃!

          其背后原因僅僅是因為:方便!

           

          這就像X音一個視頻火了,接著你會在一周內刷到成千上萬條同樣的視頻,你甚至誤以為X音開啟了重復模式,其目的也只有一個,方便出效果!

          但試問如果都以這樣的方式展現給大眾,其帶來的后果就是以后所有人都缺少原創精神,當你要做一件事情時,不是想如何去創作,做成不一樣,而是說:“那么麻煩干嘛,現成的東西直接抄啊!”

           

          圖片

          這是A作品,這是B作品,以A作為原型做到舉一反三,透過別人作品中的某些元素提取靈感進行深度再創作,對作品的創意做了更多延展空間,使之有了自己設計的靈魂。

          圖片

          雖然一切設計的起源本質都來自于模仿與再創造,但是模仿的目的是為了鍛煉初期的扎實基礎,為了能夠讓之后的設計可以舉一反三。

          圖片

          圖片

          并且不作為商用途徑來源,而抄襲是指不但模仿他人作品還作為商用途徑獲得利益,甚至在大眾不知情的眼下,有了一定行業名聲,這才是為什么人人都痛恨抄襲者的原因,是因為他不尊重設計,更不尊重原創者。

          這里我一定要點出拼XX,每日燒香拜佛的,誰發砍一刀的立馬絕交,于是就這樣差點跟我媽絕交了圖片,兒子不孝!

          圖片

           

          圖片

          如何做到既能將好的設計借鑒到,又能原創出自己的設計呢?我們可以通過以下4個方向進行借鑒學習。

          1、借鑒其設計技法及風格

          圖片

          比如這兩張海報中,對其畫面上繪制的線條與紋理的刻畫是原設計的特點,而技法是一種設計性的能力,可以作為創造的一種條件,以及整個帶有偏國風的設計風格都是可以汲取到借鑒上。

           

          2、視覺構圖

          左邊這張海報通過5:5對等構圖,在上半部做出了大量留白,而用三角構圖的原理將視覺引導至上方焦點,也就是飛出去的猴毛,解決了上半部分大量空白的問題,并且點出了是所要表達的故事劇情。

          右邊的這張海報通過中心焦點的構圖,將視覺牢牢抓住在中心,再通過焦點所體現出的人物形象來傳達給觀眾。這兩張海報雖然構圖的方式不一樣,但是都有著相同之處就是,都不會讓主體視覺完整的展現出來,而是讓觀眾通過聯想的方式猜測這個形象,以此獲取觀眾對內容或海報的好奇觀感。

           

          3、人物刻畫

          圖片

          觀察兩張海報,人物的設計或者繪制是使用水墨和毛筆墨跡等方式的結合融入。

           

          4、畫面配色

          圖片

          使用有鮮明對比的配色,比如間隔色,互補色這樣的方式會讓畫面具有視覺穿透力,色彩的沖突可以把故事中的情緒化帶給觀眾。

          圖片

          綜合以上幾點,流體性的線條、墨態人物筆觸、局部性的展示視覺主體、以及強烈的色彩沖突,于是我作為借鑒方式設計出了這張電影海報。

          圖片

           

          圖片

           

          對比之前的幾張海報,即從中獲取到了不同的借鑒元素,同時又保留了自己設計特色。

          圖片

          比如這張海報在左右對稱式的構圖基礎上,增加三角構圖的原理讓視覺有一種從上至下的引導閱讀,再利用鮮明對比的配色使畫面有了沖突感的色彩吸引。

          圖片

          最后說回抄襲問題,畢竟設計行業又不是宮斗劇,既要天天改稿被甲方來回折騰,還要處處防范被同行小人亂蹭,本是同根生,相煎何太急,何必呢!好好吃自己的飯他不香嗎!

           

          原文地址:修先生撩設計

          作者:修先森

          轉載請注明:學UI網》借鑒=抄襲?好的設計是怎么借鑒出來的

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

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

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

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



          如何強化圖標設計的細節?我總結了12個關鍵點!

          seo達人



          1.清晰

          圖片

          大家先想想圖標在APP里的主要作用是什么呢?可以作為功能和信息的提示標識,引導用戶的操作。

          而且我們通過看圖獲取信息的速度要比閱讀文字獲取快得多,圖標作為一種通用化的視覺語言,讓頁面更容易被閱讀。

          圖片

          ▲ 圖標代表的隱喻越準確,就越容易被用戶準確識別。

           

          2.簡潔

          圖片

          圖標本身的尺寸就特別小,如果在里面摻雜著大量沒必要的裝飾性元素,會讓圖標的閱讀變得很困難。

          可以通過使用盡可能簡單的設計元素來創建圖標,保證形狀的簡潔易懂。

          圖片

          ▲ 如果在設計過程中發現圖標變得很復雜,大膽嘗試去做減法,刪除不必要的細節,只留下最重要的部分。

           

          3.風格統一

          圖片

          在Dribbble中搜索“icons”,會看到很多不同風格的圖標樣式,但同一個集合中的圖標都會保持統一的設計風格。

          圖片

          ▲ 不同風格的圖標可以在設計中穿插使用。例如在APP底部導航中,使用線形風格的圖標作為基本狀態,點擊選中時可以變換為面性風格,用來區分不同的狀態。

           

          4.基礎網格

          圖片

          網格有助于我們建立一個明確的尺寸規范,常見的網格尺寸有16×16、24×24、32×32、48×48、64×64、96×96。

          圖片

          ▲ 所有的圖標都將建立在基礎網格之上,圖標的每個部分都應該放在像素網格內。

           

          5.安全區域

          圖片

          圖標的主體部分應該保持在安全區域內,這種情況適用于大多數的場景。

          安全區域可以作為設計建議,而不是一項必須的規則,如果有需要,我們完全可以在安全區域外擴展圖標的形狀。

          圖片

           

          6.關鍵形狀

          圖片

          如果想讓一組圖標放在一起看起來很和諧,那這些圖標的視覺權重應該保持一致。

          在設計前首先確定圖標的基本形狀,例如圓形、正方形、矩形等,能有效幫助我們確定圖標的比例關系。

          可以用數學面積公式來計算一下不同形狀圖標的權重,找出近似值。

          來吧,先從圓形開始:

          圖片

          ▲ 在這個例子中,直徑d是20px,半徑r是10px,圓的面積約等于314px2。

           

          把圓的面積開個根號√,方形的邊長a大約為17.7px,四舍五入到整數,那么邊長a為18px,接下來算算方形的面積:

          圖片

          ▲ 邊長a為18px,方形的面積為324px2。

           

          最后算一下矩形的面積:

          圖片

          ▲ 邊長b為20px,邊長c為16px。

           

          最后我們根據這些科學的尺寸設計一組相對和諧的圖標:

          圖片

           

          7.描邊寬度

          圖片

          除了保持相同的視覺權重,圖標的描線寬度也應該保持一致,達到像素級統一,這里我建議描邊使用整數值,這樣更便于設計。

          圖片

          ▲ 另外,不要忘記元素之間的最小間距,應該大于或等于描邊的寬度。

           

          8.圓角

          圖片

          圖標的和諧還在于邊角的統一。尖角不用說了,保持統一的垂直90度就可以。

          這里需要重要說的是圓角,不能所有的形狀都使用同一個圓角度數,而是要根據圖標形狀的不同靈活調節圓角度數。

          圖片

          ▲ 例如一個圖標有里外兩個平行的圓角時,不能里外都使用1px的圓角,這樣會讓圖標看起來不統一。

           

          正確的做法是讓外面的圓角更大,設置為3px,里面的圓角為1px,讓圖標看起來更和諧。

          圖片

          ▲ 根據對象大小,設置不同的圓角數,保證視覺統一。

           

          9.角度

          圖片

          同一組圖標保持相同的傾角設計,可以讓圖標看起來更統一。

          圖片

          ▲ 圖標中所有傾斜的線條都限定為45度角,會讓圖標看起來更嚴謹和規范。

           

          10.視覺平衡

          圖片

          在設計圖標時,既要利用作圖軟件把握嚴格的對稱和尺寸標準,也要注意多用眼睛去觀察圖標的視覺平衡,保證圖標看起來很統一。

          圖片

          ▲ 最典型的情況就是繪制“播放”圖標時,使用軟件去調節三角形左右兩邊的完全對稱,圖標看起來反而會有點不平衡,看著感覺離左邊近,離右邊遠(右圖)。

          在這種情況下,我們就要在對稱的基礎上,將三角形向右移動一點,來保證視覺上的平衡(左圖)。

           

          11.透視 (2D/3D)

          圖片

          除了扁平的2D風格圖標外,也可以考慮使用3D風格的圖標樣式,讓圖標的體積感和空間感更強。

          圖片

          ▲ 無論使用哪一種,同一組的圖標要保持統一的樣式,比如要用3D樣式,那么這一組3D圖標要使用相同角度的透視。

           

          12.設計常識

          圖片

          上面提到了圖標設計的很多規則,在日常設計中建議大家將這些規則作為指導。

          但是任何規則都有例外,如果有必要,我們可以打破規則。

          圖片

          ▲ 左邊的圖標使用了不同的圓角和角度,來保證圖標像素級的完美;在右邊的圖標中,右下角的圖形雖然超出了安全區域,卻保證了整個圖標的平衡。

           

          結論

          圖標設計是看著容易,做起來卻很難的一類設計,把握這些關鍵細節能讓我們的圖標設計水平提升更多。

          最后為大家精心挑選了700+圖標合集源文件,可以直接用在移動端、網頁端設計中!

          圖片

          參考: Design principles for creating the perfect icon set

           

          領取方式:

          關注公眾號,后臺回復【圖標】獲取下載鏈接。

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》如何強化圖標設計的細節?我總結了12個關鍵點!

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

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

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

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



          競品分析的7個視角

          資深UI設計者

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

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

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

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

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

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

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

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

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

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

          當然,更準確地來說是競爭分析,產品只是價值的載體。做一款產品時,卻發現已經有直接競爭者、替代競爭者、潛在競爭者、預算競爭者了,而且還有一些可參考的友商。就從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国产综合