不論是什么產品都需要考慮到用戶的需求，對于用戶需求進行分析，確定可行性，最后進行實現；重點要關注在產品中用戶需要的是什么，對用戶的想法進行探索；本文作者分享了關于七種深度洞察用戶需求的方法，我們一起來了解一下。
需求分析是市場研究階段的重要活動，也是新產品開發流程中的一個重要環節，是產品經理經過深入細致的調研和分析，準確理解用戶對產品的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉化為完整的需求定義，從而確定產品必須做什么的過程；該階段是分析產品在功能上需要“實現什么”，而不是考慮如何去“實現”。
需求分析的目標是把用戶對待開發產品提出的“要求”或“需要”進行分析與整理，確認后形成描述完整、清晰與規范的文檔，確定產品需要實現哪些功能，完成哪些工作；此外，產品的一些非功能性需求（如產品質量、款式、特色、包裝、安裝、售后等）及約束條件也是需求分析的目標。
這些都是從客戶（產品開發或者市場部的同事）或者身邊一些人（需要更多反饋的感官專家或設計者）在一整天的訪談（包括焦點小組、一對一訪談）、開放式問卷或者與消費者接觸的過程中發現的問題；這就需要我們根據調研的初步結果進行深入的“需求分析”才能得到想要的結論和應用價值。
在組織行為學中，馬斯洛曾經在1943年發表的論文中對人類需求做出了定義，在人類動機理論中，馬斯洛提出了需求層次理論模型；這一理論可以有效地觀察人類最根本、最基礎的需求水平。
馬斯洛認為，人類具有一些先天需求，人的需求越是低級的需求就越基本，越與動物相似；越是高級的需求就越為人類所特有。同時這些需求都是按照先后順序出現的，當一個人滿足了較低的需求之后，才能出現較高級的需求，即需求層次。
馬斯洛理論把需要分成生理需要、安全需要、社交需要、尊重和自我實現五類，依次由較低層次到較高層次排列，如圖所示。在自我需要實現之后，還有自我超越需要，但通常不作為馬斯洛需要層次理論中必要的層次，大多數會將自我超越合并至自我實現需求當中。
圖馬斯洛需求層次理論圖譜
如果這些需要（除性以外）任何一項得不到滿足，人類個人的生理機能就無法正常運轉。
換而言之，人類的生命就會因此受到威脅。從這個意義上說，生理需要是推動人們行動最首要的動力。
馬斯洛認為，只有這些最基本的需要滿足到維持生存所必需的程度后，其他的需要才能成為新的激勵因素，而到了此時，這些已相對滿足的需要也就不再成為激勵因素了。
馬斯洛認為，整個有機體是一個追求安全的機制，人的感受器官、效應器官、智能和其他能量主要是尋求安全的工具，甚至可以把科學和人生觀都看成是滿足安全需要的一部分；當這種需要一旦相對滿足后，也就不再成為激勵因素了。
人人都希望得到相互的關心和照顧，感情上的需要比生理上的需要來的細致，它和一個人的生理特性、經歷、教育、宗教信仰都有關系。
人人都希望自己有穩定的社會地位，要求個人的能力和成就得到社會的承認。尊重的需要又可分為內部尊重和外部尊重。內部尊重是指一個人希望在各種不同情境中有實力、能勝任、充滿信心、能獨立自主。
總之，內部尊重就是人的自尊。
外部尊重是指一個人希望有地位、有威信，受到別人的尊重、信賴和高度評價；馬斯洛認為，尊重需要得到滿足，能使人對自己充滿信心，對社會滿腔熱情，體驗到自己活著的用處價值。
這是最高層次的需要，它是指實現個人理想、抱負，發揮個人的能力到最大程度，達到自我實現境界的人，接受自己也接受他人，解決問題能力增強，自覺性提高，善于獨立處事，要求不受打擾地獨處，完成與自己的能力相稱的一切事情的需要；也就是說，人必須干稱職的工作，這樣才會使他們感到最大的快樂。
馬斯洛提出，為滿足自我實現需要所采取的途徑是因人而異的。自我實現的需要是在努力實現自己的潛力，使自己越來越成為自己所期望的人物。
馬斯洛理論把需要分成生理需要、安全需要、社交需要、尊重需要和自我實現需要五類，依次由較低層次到較高層次，從企業經營消費者滿意（CS）戰略的角度來看，每一個需求層次上的消費者對產品的要求都不一樣，即不同的產品滿足不同的需求層次。
根據五個需要層次，可以劃分出五個消費者市場
經濟學上，“消費者愿意支付的價格≌消費者獲得的滿意度”，也就是說，同樣的洗衣粉，滿足消費者需求層次越高，消費者能接受的產品定價也越高。
市場的競爭，總是越低端越激烈，價格競爭顯然是將“需求層次”降到最低，消費者感覺不到其他層次的“滿意”，愿意支付的價格當然也低。
KANO模型是東京理工大學教授狩野紀昭(Noriaki Kano)發明的對用戶需求分類和優先排序的有用工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系，如圖所示。
根據不同類型的質量特性與顧客滿意度之間的關系，狩野教授將產品服務的質量特性分為5類。
KANO 模型（產品性能和用戶滿意之間的非線性關系）
也稱為必備型需求、理所當然需求，是顧客對企業提供的產品或服務因素的基本要求；是顧客認為產品“必須有”的屬性或功能。當其特性不充足（不滿足顧客需求）時，顧客很不滿意；當其特性充足（滿足顧客需求）時，顧客也可能不會因而表現出滿意。
對于基本型需求，即使超過了顧客的期望，但顧客充其量達到滿意，不會對此表現出更多的好感；不過只要稍有一些疏忽，未達到顧客的期望，則顧客滿意將一落千丈。
對于顧客而言，這些需求是必須滿足的，理所當然的；對于這類需求，企業的做法應該是注重不要在這方面失分，需要企業不斷地調查和了解顧客需求，并通過合適的方法在產品中體現這些要求。
例如，夏天家庭使用空調，如果空調正常運行，顧客不會為此而對空調質量感到滿意；反之，一旦空調出現問題，無法制冷，那么顧客對該品牌空調的滿意水平則會明顯下降，投訴、抱怨隨之而來。
再例如，智能手機的基本型需求有語音通話質量、信號覆蓋、操作系統兼容、安全性、日常使用和性能：待機時間、速度等；試想一下，一個智能手機沒有信號，通話質量差，操作系統不兼容，被感染病毒，待機時間10分鐘就沒電，如果手機運行速度慢到接近崩潰，這些都會使用戶的不滿情緒增加；但是上述這些需求都滿足后，并不能帶來用戶滿意度的增加，因為用戶認為這些是必須要有的。
也稱為意愿型需求，是指顧客的滿意狀況與需求的滿足程度成比例關系的需求，此類需求得到滿足或表現良好的話，客戶滿意度會顯著增加，企業提供的產品和服務水平超出顧客期望越多，顧客的滿意狀況越好；當此類需求得不到滿足或表現不好的話，客戶的不滿也會顯著增加。
期望型需求沒有基本型需求那樣苛刻，要求提供的產品或服務比較優秀，但并不是“必須”的產品屬性或服務行為有些期望型需求連顧客都不太清楚，但是是他們希望得到的，也叫用戶需求的癢處；這是處于成長期的需求，客戶、競爭對手和企業自身都關注的需求，也是體現競爭能力的需求。對于這類需求，企業的做法應該是注重提高這方面的質量，要力爭超過競爭對手。
在市場調查中，顧客談論的通常是期望型需求；質量投訴處理在我國的現狀始終不令人滿意，該服務也可以被視為期望型需求；如果企業對質量投訴處理得越圓滿，那么顧客就越滿意。
又稱興奮型需求。指不會被顧客過分期望的需求。
對于魅力型需求，隨著滿足顧客期望程度的增加，顧客滿意度也會急劇上升，但一旦得到滿足，即使表現并不完善，顧客表現出的滿意狀況則也是非常高的；反之，即使在期望不滿足時，顧客也不會因而表現出明顯的不滿意。
當顧客對一些產品或服務沒有表達出明確的需求時，求企業提供給顧客一些完全出乎意料的產品屬性或服務行為，使顧客產生驚喜，顧客就會表現出非常滿意，從而提高顧客的忠誠度；這類需求往往是代表顧客的潛在需求，企業的做法就是去尋找發掘這樣的需求，領先對手。
例如，一些著名品牌的企業能夠定時進行產品的質量跟蹤和回訪，發布最新的產品信息和促銷內容，并為顧客提供最便捷的購物方式。對此，即使另一些企業未提供這些服務，顧客也不會由此表現出不滿意。
不論提供與否，對用戶體驗無影響；是質量中既不好也不壞的方面，它們不會導致顧客滿意或不滿意。例如：航空公司為乘客提供的沒有實用價值的贈品。
又稱逆向型需求，指引起強烈不滿的質量特性和導致低水平滿意的質量特性，因為并非所有的消費者都有相似的喜好。
許多用戶根本都沒有此需求，提供后用戶滿意度反而會下降，而且提供的程度與用戶滿意程度成反比；例如：一些顧客喜歡高科技產品而另一些人更喜歡普通產品，過多的額外功能會引起顧客不滿。
前三種需求根據績效指標分類就是基本因素、績效因素和激勵因素。在實際操作中，企業首先要全力以赴地滿足顧客的基本型需求，保證顧客提出的問題得到認真的解決，重視顧客認為企業有義務做到的事情，盡量為顧客提供方便，以實現顧客最基本的需求滿足。
然后，企業應盡力去滿足顧客的期望型需求，這是質量的競爭性因素；提供顧客喜愛的額外服務或產品功能，使其產品和服務優于競爭對手并有所不同，引導顧客加強對本企業的良好印象，使顧客達到滿意。
最后爭取實現顧客的興奮型需求，為企業建立最忠實的客戶群。
因子分析是指研究從變量群中提取共性因子的統計技術。
最早由英國心理學家C.E.斯皮爾曼提出。他發現學生的各科成績之間存在著一定的相關性，一科成績好的學生，往往其他各科成績也比較好，從而推想是否存在某些潛在的共性因子（某些一般智力條件）[張樂飛1] 影響著學生的學習成績。
因子分析可在許多變量中找出隱藏的具有代表性的因子，將相同本質的變量歸入一個因子，可減少變量的數目，還可檢驗變量間關系的假設。
因子分析是社會研究的一種有力工具，但不能肯定地說一項研究中含有幾個因子，當研究中選擇的變量變化時，因子的數量也要變化；此外對每個因子實際含意的解釋也不是絕對的。在市場調研中，研究人員關心的是一些研究指標的集成或者組合，這些概念通常是通過等級評分問題來測量的，如利用李克特量表取得的變量。
每一個指標的集合（或一組相關聯的指標）就是一個因子，指標概念等級得分就是因子得分。
因子分析方法的主要應用有兩種：其一，減少變量的數量；其二，找出變量之間的結構關系。
在產品開發中，因子分析能夠用于關鍵變量的優先級排序和分組，比如：產品屬性之間的關系和產品屬性對產品偏好的影響。在實際應用中，通過因子得分可以得出不同因子的重要性指標，而管理者則可根據這些指標的重要性來決定首先要解決的市場問題或產品問題。
聚類分析是一種探索性的分析，在分類的過程中，人們不必事先給出一個分類的標準，聚類分析能夠從樣本數據出發，自動進行分類。
聚類分析所使用方法的不同，常常會得到不同的結論。不同研究者對于同一組數據進行聚類分析，所得到的聚類數未必一致。
從實際應用的角度看，聚類分析是數據挖掘的主要任務之一；而且聚類能夠作為一個獨立的工具獲得數據的分布狀況，觀察每一簇數據的特征，集中對特定的聚簇集合作進一步地分析。聚類分析還可以作為其他算法（如分類和定性歸納算法）的預處理步驟。
聚類分析的一個重要用途就是針對目標群體進行多指標的群體劃分，類似這種目標群體的分類就是精細化經營，個性化運營的基礎和核心，只有進行了正確的分類，才可以有效進行個性化和精細化的運營，服務及產品支持等。
常見業務應用場景如下：
通過對特定運營目的和商業目的所挑選出的指標變量進行聚類分析，把目標群體劃分成幾個具有明顯特征區別的細分群體，從而可以在運營活動中為這些細分群體采取精細化，個性化的運營和服務，最終提升運營的效率和商業效果（如把付費用戶按照幾個特定維度，如利潤貢獻，用戶年齡，續費次數等聚類分析后得到不同特征的群體）。
企業可以按照不同的商業目的，并依照特定的指標標量來為眾多的產品種類進行聚類分析，把企業的產品體系進一步細分成具有不同價值，不同目的的多維度的產品組合，并且在此基礎分別制定和相應的開發計劃，運營計劃和服務規劃（如哪些產品是明星類產品，那些產品是瘦狗類產品）。
聚類分析是挖掘電子商務網站數據價值的重要方法之一，通過分組聚類出具有相似瀏覽行為的客戶，并分析客戶的共同特征，可以更好的幫助電子商務的用戶了解自己的客戶，向客戶提供更合適的服務（如某B2C電商平臺上，根據用戶的搜索、瀏覽、購買記錄通過大數據分析，通過第三方平臺向客戶精準推送產品）。
聚類分析是細分市場的有效工具，同時也可用于研究消費者行為，尋找新的潛在市場、選擇實驗的市場，并作為多元分析的預處理。
多維尺度法是一種將多維空間的研究對象（樣本或變量）簡化到低維空間進行定位、分析和歸類，同時又保留對象間原始關系的數據分析方法；其特點是將消費者對產品的感覺偏好，以點的形式反映在多維空間上；而對不同產品的感覺或偏好的差異程度，則是通過點與點間的距離體現的，我們稱這種產品或項目的空間定位點圖為空間圖，空間軸代表著消費者得以形成對產品的感覺或偏好的各種因素或變量。
在分析消費者對產品功能的需求度時，首選選擇研究對象，如列出某個產品的所有產品功能；然后從目標市場中抽取一個樣本人群（通常30-50人），讓他們對產品功能的需求度打分；最后采用多維度分析獲得一張代表了產品功能需求度關系的可視化圖。
可視化圖中的維度代表了消費者對產品功能需求依賴的關鍵要素，為方便起見通常選擇2-3個維度。投保人購買保險產品時所需的第三方互聯網工具產品功能在生命周期和需求頻率上的多維度分析如圖所示；通過多維尺度分析幫產品經理區分功能優先級，做出產品決策。
投保人互聯網工具產品應用多維度分析
多維尺度分析優點是很明顯的。研究者可以利用得到的位置結構圖將研究對象進行分類，還可以對隱藏在數據背后的空間維度做出相應的判斷和解釋。
多維度分析通過把所研究對象的數量關系轉化為直觀圖形，達到直觀展現研究對象的目的；多維尺度分析的缺點是分析結果不是唯一的，結果可以在空間中旋轉和平移，這為分析者對結果的解釋制造了難度。
聯合分析法，又稱結合分析法，是對結合效應的評價，從而有效地解決了傳統調查方法中需要調研對象獨立評價屬性的問題。
聯合分析有三種主要形式，包括權衡矩陣法、兩兩比較法和全輪廓法，其中又以全輪廓法最為常用；該方法提供給研究的參與者一系列的產品描述，參與者被要求瀏覽所有的描述，做出一系列的評價，對調研結果進行數學方法分析后，就可以導出該類產品的各屬性的效用值。
對于市場研究領域，在聯合分析之前的所有方法幾乎都會使用重要性比率尺度來度量產品屬性的重要性水平，即都會直接向消費者提問一個產品中他們最看重的屬性。
這種方法有幾個嚴重的缺點：首先，調研的經驗表明，如果不限制條件的話，消費者傾向于認為每個屬性幾乎都是同等重要的；其次，消費決策很大程度上依賴的是整體的判斷。當消費者被要求分離各種屬性并且對各屬性進行量化評價并且描述某個屬性水平的高低將驅使其購買一個產品而不是另一個產品時，即使是最老練的消費者也將感到無所適從。
在聯合分析中產品被描述成為輪廓，每一個輪廓由能夠描述產品重要特征的屬性和賦予每一屬性的不同水平的組合構成。
消費者在實際購買時并不是基于產品某一屬性而是綜合考慮產品各個屬性及屬性水平從而做出購買決策的。因此消費者對某一產品輪廓的評價可以分解成構成這個輪廓多個屬性水平的評價以及不同屬性在決策時所占的權重。
在聯合分析中用分值也叫做效用來描述消費者對某一屬性水平的偏好，聯合分析能夠較好地模擬消費者購買的實際過程，從而客觀、真實地測量消費者對某一產品的偏好及產品不同屬性在購買過程中的重要性。
以QQ會員等級為例，如圖向用戶展示屬性組合以及用戶需求等級。在本例中，有8個不同屬性，每種屬性對應9種不同的屬性水平，由此構成的屬性組合可以滿足不同的QQ用戶的需求。
聯合分析（騰訊QQ群產品會員等級劃分）
聯合分析是對人們購買決策的一種現實模擬。因為在實際的抉擇過程中，由于價格等原因，人們要對產品的多個特征進行綜合考慮，往往要在滿足一些要求的前提下，犧牲部分其他特性，是一種對特征的權衡與折衷。
通過聯合分析，我們可以模擬出人們的抉擇行為，可以預測不同類型的人群抉擇的結果；因此，通過聯合分析，我們可以了解消費者對產品各特征的重視程度，并利用這些信息開發出具有競爭力的產品。
李克特量表是屬評分加總式量表最常用的一種，屬同一構念的這些項目是用加總方式來計分，單獨或個別項目是無意義的，它是由美國社會心理學家李克特于1932年在原有的總加量表基礎上改進而成的。
李克特量是目前調查研究中使用最廣泛的量表，當受測者回答此類問卷的項目時，他們具體的指出自己對該項陳述的認同程度；該量表由一組陳述組成，每一陳述有“非常同意”、“同意”、“不一定”、“不同意”、“非常不同意”五種回答，分別記為5、4、3、2、1，每個被調查者的態度總分就是他對各道題的回答所得分數的加總，這一總分可說明他的態度強弱或他在這一量表上的不同狀態。
李克特量表應用步驟“
1）收集大量（50～100）與測量的概念相關的陳述語句。
2）有研究人員根據測量的概念將每個測量的項目劃分為“有利”或“不利”兩類，一般測量的項目中有利的或不利的項目都應有一定的數量。
3）選擇部分受測者對全部項目進行預先測試，要求受測者指出每個項目是有利的或不利的，并在下面的方向-強度描述語中進行選擇，一般采用所謂“五點”量表：
4）對每個回答給一個分數，如從非常同意到非常不同意的有利項目分別為5、4、3、2、1分，對不利項目的分數就為1、2、3、4、5。
5）根據受測者的各個項目的分數計算代數和，得到個人態度總得分，并依據總分多少將受測者劃分為高分組和低分組。
6）選出若干條在高分組和低分組之間有較大區分能力的項目，構成一個李克特量表；如可以計算每個項目在高分組和低分組中的平均得分，選擇那些在高分組平均得分較高并且在低分組平均得分較低的項目。
我通常會在產品的早期創建一張范圍矩陣表，用來列出所有討論過功能和內容。這樣一個范圍工具就出現了，它可以用來支持人們討論整體的優先級別，以及每一個功能的工作量，然后決定哪些功能應該納入范圍之內，而哪些應該排除在外。
在分析每一個功能的重要性的時候，把人物角色加入這個工具中，就能讓這些用戶始終停留在每一個人的腦海中，可以大大地幫助你在決定項目范圍時，把人物角色變成其中一個積極的部分，如圖所示。
李克特5點范圍矩陣量表（功能需求度轉化）
李克特量表的構造比較簡單而且易于操作，因此在市場研究實務中應用非常廣泛。
在實地調查時，研究者通常給受測者一個“回答范圍”卡，請他從中挑選一個答案；需要指出的是，目前在商業調查中很少按照上面給出的步驟來制作李克特量表，通常由產品經理和研究人員共同研究確定。
文章來源：人人都是產品經理 作者：長乘
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
確保用戶成功且無壓力的登錄體驗需要我們不斷地思考。
大家好，我是Clippp。今天為大家分享的文章是「登錄頁」設計。幾乎所有的登錄頁看起來都大同小異，通過輸入賬號和密碼就能夠進入，但仔細思考會發現，每個登錄頁都有差異化的點，而這些點正是產品無一物二的地方。
登錄體驗是指用戶通過入口進入應用、網站或服務，建立自己的身份。
登錄流程通常由主登錄流程和恢復流程組成，其中主登錄流程包括填寫用戶名、手機號、密碼等，恢復流程包括忘記密碼、重置密碼、其他登錄方式等。登錄體驗的目標是確保用戶成功登錄帳戶。
使用簡潔、常用的頁面布局和文字，有助于用戶輕松執行熟悉的操作。保持設計簡單也有助于將體驗輕松擴展到不同設備和屏幕尺寸。
▲ Pinterest采用了居中對齊的重疊式登錄頁設計，用醒目的紅色按鈕來突出登錄動作，還支持Google和Facebook作為其他登錄方式。
登錄頁是強調品牌的首要接觸點。登錄操作最好于中心位置，頁面上的其他元素應謹慎增加，避免注意力從登錄任務上移開。
設計思考：
用戶花在登錄頁上的時間越少越好，要讓用戶盡快發現產品中的優點和價值！
登錄(或恢復)操作應引起用戶的全部注意力：
最好將登錄頁表單放在頁面中心位置；
不需要復雜或冗長的文字解釋，例如可以利用簡單的“輸入密碼”來提示用戶完成操作；
要求用戶一次只做一件重要的事情，例如將找回密碼這種復雜的流程分解為多個步驟進行。
▲ Facebook保留用戶的登錄信息，并將恢復流程分為幾個邏輯步驟。
▲ 亞馬遜將輔助恢復選項放在“更多幫助”中，這有助于使主要操作保持重點。
設計思考：
使用卡片式布局；
將操作分為主要動作和次要動作；
使用尺寸大而突出的登錄按鈕；
盡量減少次要操作的次數，以避免使頁面出現混亂。
在登錄過程的每個階段，用戶都可能會失敗。輸入錯誤的郵箱，忘記密碼或網絡問題等，所有這些問題都可能導致登錄意圖急劇下降。
因此清晰及時的反饋設計對用戶來說很重要。
▲ 信息輸入錯誤時會提示錯誤具體的原因。
▲ 密碼輸入有誤時，Facebook會在下方增加“使用Google登錄”選項。
設計思考：
鼓勵用戶嘗試合適的替代方案；
登錄失敗后，將用戶導航到單獨頁面并組織其他登錄方法；
展示最有效的登錄方法，并在發生問題時及時對用戶做出反饋。
除了輸入賬號密碼這種登錄方式，最好提供一種或兩種附加的登錄方式以便用戶選擇，同時防止忘記密碼造成無法登錄的情況。
添加過多的登錄方式會使頁面混亂，降低登錄意圖，附加選項應該限制為2或3種方式。
▲ Medium登錄表單的設計盡管很清晰，但過多的登錄方式會阻礙用戶的選擇和判斷。
▲ Airbnb登錄頁能看到大量的輔助登錄方式，過多的選項可能會導致用戶的認知負荷。
設計思考：
當前無密碼登錄正在迅速普及。在很多移動App中，基于手機號的身份驗證已成為常態，指紋和FaceID也出現在許多地方，從而實現了無縫和安全的身份驗證流程。
找到產品最適合的登錄方式，并將其作為主要選擇能有效提升效率！
登錄涉及用戶輸入敏感的個人數據，例如手機號、郵箱、密碼等，用戶愿意輸入信息意味著他們信任這個平臺或產品。
雖然減少與用戶的摩擦很重要，但有時網站也會提供額外的身份驗證來確保用戶信息的安全。
▲ B站利用文字驗證方式來增強用戶帳戶的安全性。
設計思考：
登錄表單應該代表品牌的形象，任何視覺上的變化都必須慢慢進行，因為完全改變視覺設計可能會導致缺乏信任。
登錄意圖是一種體驗，在這種體驗中用戶角色和類型可以無所不包。
可以嘗試以下方式來定義用戶的范圍以便更清楚的了解用戶：
登錄渠道：與PM合作找出在登錄流程中用戶交互和退出的關鍵階段。
登錄入口：用戶是通過郵箱、搜索引擎還是通過應用跳轉到登錄頁？
常用設備：手機、瀏覽器等設備可以為用戶帶來個性化的體驗。
用戶群組：利用年齡或地理位置等方式也能進行分離用戶群主的劃分。
通過分析具有代表性的登錄頁設計來展示登陸頁的多種設計表達。
▲ Google采用多階段的登錄方式，郵箱和密碼分兩步進行輸入。這種格式對谷歌來說有一些安全優勢，也可以在下一步為用戶提供個性化的選擇。
▲ Uber的登錄頁采用簡單的樣式，注重使用體驗，引導用戶輸入手機號來進行下一步。
▲ Facebook利用右對齊的登錄表單很好地集中注意力，左邊的空間被用來展示品牌的信息和形象。
▲ 亞馬遜的登錄頁從視覺設計上看有些陳舊，但卻是管理用戶注意力的一個很好的例子。黃色的“繼續”按鈕和簡潔的頁面使登錄看起來簡單而快速。
▲ Figma的登錄頁位于畫面中心，頂部首先展示的是以Google登錄，這可能是Figma首選和推廣的登錄形式，頁面整體的設計利用線框組成，非常簡潔高效。
文章來源：展開 作者：Clippp
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網頁的第一印象至關重要，它在很大程度上決定用戶是否有興趣瀏覽下去。而這個第一印象則是由網頁的首屏部分所決定，它是最直接傳遞出網頁的功能與印象的媒介。
一個好的首屏，也能讓你在同質化嚴重的情況下，脫穎而出實現彎道超車。好的，今天就讓我們一起來研究一下，網頁首屏部分的組成、方式以及設計手法吧。
說到首屏大家肯定第一反應是這樣的一個形式，有小伙伴可能會說，這個不就是個 Banner 嗎？那也是很多設計師的誤區，網頁首屏中存在著大量的交互元素在其中。
我們現在來看第一個網頁，這里就包括了五個互動的按鈕在其中，這個是 Banner 所不具備的功能，接下來我們快速的瀏覽一下，這個區域的主要組成模塊。
這個網頁，是一個簡單的組合形式，我們可以劃分為全局導航欄和形象部分。
這兩個網頁是類似的形式，我們稱之為大尺寸頁眉，即這整個區域都是頁眉的區域。
這其中我們又可以細分為：全局導航欄、全屏圖片和形象文案部分。
我們順著這個思路繼續分下去，看到這個網頁的首屏部分，包括了全局導航欄、形象文案和社交鏈接。
但具體我們的首屏高度要設計多少呢？這里我們可以參考 w3school 網站的數據。其他的尺寸我們直接忽略掉，剩下的我們看到 1366×768 像素的尺寸是一個最常見的尺寸。
這里我建立了一個 1920X1080 高度的畫板，點擊標記區域的 “視口高度” 將數值改為 768 像素，即可。
右面的畫板上就出現了一個虛線標記的地方，這個就是我們的視口高度。
有很多小伙伴問我，老師什么是主頁？什么是著陸頁？它們是相同類型的東西嗎？答案肯定是否定的。
我們以這個網頁為例，它是一個游戲的專題頁面，并不是這個網頁的主頁。
而是這個網頁的著陸頁，用戶點擊搜索推廣、信息流或其他形式的廣告打開的第一個頁面。著陸頁可以是網站上的一個頁面，也有直接把主頁當作著陸頁使用的情況。
進入的才是這個網頁真正的主頁部分。
如果還不理解，我們可以一本書籍為例。這個書籍的封面可以理解為首頁。而它內部的每一個頁面都可以理解為著陸頁。每個頁面都有自己專門的關鍵詞，這樣就不需要用戶，每次都是從首頁進入了，方便用戶使用。
著陸頁可以著重用來介紹專題活動或者產品。
這個著陸頁作為整個這個網站的介紹專題頁出現。用戶在搜索時，可以根據關鍵詞直接搜索到這個網頁。
這個著陸頁也同樣是起著介紹專題的作用。
著陸頁也常被用介紹產品，這樣我們在搜索這個產品的時候，就可以更快的找到了。
很多情況下，網頁首屏的形式不斷地被強調，而首屏的功能性卻總是被忽略。這樣就會出現影響用戶使用的情況，因為網頁最重要的作用就是傳遞和收集信息。
所以設計師在設計一個網頁的首屏部分時，應該更多的去考慮這個網頁想要的提供的功能是什么，而不是一味的追求形式感。當然不同的行業，所要求的網頁的功能也是不同的。接下來的部分我們主要來探討一下這個問題。
一個網頁主要受到三個因素的影響。行業、功能和形式。這三個元素又在互相影響。
首先，行業決定了功能性。我們用醫療這個大行業下的，醫院類型、保健類型和醫學院類型的網頁來說明。
首先我們來看醫院類型的網頁，這種特定的行業類型，要求的網頁功能就會比較全面。
首先就是為了方便用戶提供的預約功能。
在這個基礎上，網頁中還會加入導航功能，這是為了讓用戶更容易去找到這家醫院。
網頁設計者還會添加問診功能來方便用戶直接進行查詢。
這個網頁我們就看得更加詳細了，同樣是添加了一個問診功能。
我們來總結一下，除了最基本的形象功能外，醫院類型的網頁還添加了預約功能、客服功能、導航功能和問診功能，其本質都是為了可以更好的服務客戶。
到了保健類型的網頁時，這個功能就會相應的發生變化，由于是保健的性質，更多是從招攬客戶這個點而出發的。
所以這類的網頁，雖然同屬醫療行業，卻有了不同的功能，這里更多的是發揮著這個網頁的形象功能，增加信賴感。
這個網頁則是直接把服務流程放在了首屏部分，可以讓用戶最容易地理解整個服務流程。
這個網頁也是同樣的設計邏輯，通過展示形象來吸引用戶。
保健行業的網頁，幾乎都存在著預約功能，這樣主要是提供了一個用戶和商家互動的渠道，也是契合這類型行業的實際需求。
最后我們來看一下，醫療學校類型的網頁。
因為是屬于教育行業，所以更多是一個形象功能的展示。
這個網頁是一個護士的招聘網站，他就用過輪播視頻的方式，讓用戶能最直觀地感受到護士這個職業的內容和價值。
教育行業的網頁，則更多的是一個形象功能，向客戶傳遞自己的價值觀。
前面說了行業決定功能，以此類推，功能確定著形式，我們主要以旅行行業的網頁進行說明。
這個網頁主要是向用戶展示環境以及服務，也就是我們前面說的形象功能，所以在設計的時候直接做了一個全屏的形式，最好地向用戶展示自己的信息。
這個網頁也是同樣的功能，展示自己的形象，將自己的景色展示出來，這樣可以讓用戶最直觀的看到。
這里則是在展示形象功能的基礎上，添加了一個預定的功能，網頁的形式也發生了一定的改變。
這里還可以將預定功能的形式放在頁眉和主欄的交界處，創造一定的層次感。
這是一個酒店的網頁，在設計的時候，添加了一個銷售的功能，這樣在設計的時候網頁形式也相應的進行調整。
而最后到了形式的部分，它并不決定任何事情，而是反過來促進行業。
化妝品的行業對網頁的美觀度要求很高，當我們瀏覽到這樣的網頁時，并不會增加我們購買的欲望，甚至這樣的網頁起到的是一個反作用。
而當我們就瀏覽到這樣的化妝品的網頁時，他是可以提升我們購買力的。
我們放在一起對比一下，是不是孰優孰劣就一目了然了。前面我們說了，行業決定著功能，功能決定著形式，形式反過來促進行業。所以最終呈現給用戶的網頁是一個多方綜合的結果。
在確定了行業和功能的前提下，就需要我們多去了解網頁的設計形式有哪些。這里，給大家介紹一下現在時下流行的設計形式——等分屏式。
等分屏式很容易理解，就是將網頁一分為二，AB 兩個部分，它們既可以展示相同的信息，也可以展示不同的信息。以這種形式設計的網頁，被稱為雙專欄型的網頁。
最常見的形式為一半圖片，一半文字。這就類似于我們的畫冊結構—— 圖字組合。
第二種形式則是，左右都有圖片，它們既可以說明同一件事情，也可以截然不同—— 圖圖組合。
第三個則是大圖小圖的對比形式，這種形式會賦予網頁一定的藝術感和時尚感 —— 大小圖組合。
圖字組合的形式，和我們在觀看畫冊習慣基本相同，一半圖片一半文字，可以很好的傳遞出網頁的信息，方便用戶理解。
這個婚戒的網頁，使用這個形式，更加增添了高級感。
它們也是可以左右進行一個對調的，這個網頁同樣是依靠這種形式，傳遞出一種簡約高級的感覺。
這個網頁使用的是圖圖組合的形式，左右照片連貫，講述的是一件事情，給用戶一定的聯想和視覺沖擊力。
這里左右選擇的是一個關聯性的圖片， 創造了一定的故事性，同時也傳遞出來這個網頁的產品。
大小圖組合，更加可以凸顯出來網頁的時尚感。
上述的三種組合，并不是永恒一成不變的，就拿圖圖組合來說，我們可以通過移動網頁的分割線，創造出很多形式?？梢赃x擇縮小圖片的范圍，更多的去展示文字的信息。
也可以選擇放大圖片，這些大家都可以根據實際的需求進行操作。
大小圖的組合，也可以不局限于規規矩矩的排列形式。
我們也可以在規則內，任意移動小圖來創造出新的感覺出來。甚至可以將小圖拆分，創造出更加活潑的版面結構出來。
這個飾品的網頁就是利用這種形式，多角度的展示了自己的飾品。
這個網頁則是用這種形式，創造出一定的故事性，提高用戶繼續瀏覽這個網頁的興趣。
我們也可以更進一步的，把大圖也調整，重新布局在頁面中，就可以創造出更多的版面形式了。
使用這個形式的網頁，提升這個網頁的活潑度和設計感。
這樣調整了圖字組合和大小圖組合，我們就可以得到了 5 種完全不同的形式網頁了。
通過上面的思路，我們也可以嘗試去結合不同的組合，也可以創造出很多新的形式。更多的組合形式就需要小伙伴們自己去嘗試和發現了。
到這里大家有沒有一個感受，就是網頁設計其實是可以非常靈活的，形式也是多種多樣。
文章來源：優設 作者：研習社
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：對于不少企業來說，數字化轉型是一個新鮮事物，因此大家都是在摸著石頭過河。由于數字化轉型是極其復雜的系統工程，因此企業在轉型過程中難免會遇到各種問題。在本篇文章中，作者為我們分析了數字化轉型的本質是什么。
數字化轉型如火如荼，但很多企業并沒有意識到數字化轉型的本質是什么？數字化轉型到底要去向何方？
有的企業在數字化轉型上，高舉高打，重兵投入；有的企業拿出部分業務散點嘗試，但企業上上下下，誰也不知道數字化轉型要弄出個什么吉祥物；有的企業一臉不屑，心里嘀咕著這社會怎么了，滿嘴跑火車，盡出些不著調的新詞。
不管大家對數字化轉型抱著什么樣的心態，最重要的是在企業管理層形成“數字化轉型的本質是生產力、生產關系的重構”的共識。有的朋友可能會說，“形成共識，這怎么可能？每個人對數字化轉型的想法都不一樣，哪可能形成共識？又為什么你說的就是對的？
所以，這里有兩個問題：
漁歌嘗試分別回答這兩個問題。
因為數字化轉型牽一發動全身。數字化轉型即是一把手項目，也不光是一把手項目。數字化轉型涉及人、錢、設備，和企業的市場、業務、產品、技術、財務、法務各團隊相關，需要聯動各團隊的負責人、中層、一線工作人員。
如果各方不能達成共識，將導致數字化轉型項目走的身心疲憊、渾身踉蹌，走著走著累了，迷茫了，就更累了，更迷茫了。
大家都不知道數字化轉型到底要解決什么問題？跟自己的工作有什么關系？慢慢的，項目就擱淺了。所以，至少各團隊的關鍵角色們要對數字化轉型到底要達成什么效果，目標是什么達成共識。
然而現實往往是，企業高層指點江山，認為數字化是新方向。企業中層忙著拆解，而后各自領會任務，再向下傳達，同時看看有沒給別人埋坑，和有沒被別人埋坑。
企業一線員工接到的是已經被拆解成一顆顆螺絲釘的任務，面對沒有前言、沒有后語的任務，一線員工一臉懵逼，心里想著老板怎么這么傻，花這么多錢干沒意義的事。
類似這樣的數字化轉型，轉來轉去，企業還是會回到數字化轉型前的狀態。
所以，在企業中那些在數字化轉型前就有的問題，數字化轉型后這些問題依然存在，而且還有了數字化轉型前沒有的新問題?；蛘咿D型轉了一半，項目不得不暫停，或者項目無法收尾驗收，那些數字化轉型的服務商們留下大把眼淚。
如果企業的掌舵者們沒有意識到“數字化轉型的本質是生產力和生產關系的重構”，并與關鍵人達成一致，那就是為了數字化轉型而轉型。為了轉型而轉型，則往往因為沒有目標，把自己轉暈，又回到原點，甚至倒退。
企業管理本是非常復雜的命題。數字化轉型和企業管理中的深水區問題天生即是朋友，又是敵人。
在很早之前，漁歌寫過一篇文章“數據的本質”。數據本身是一種語言，數據本身不產生價值。好比語言本身不產生價值，但語言一旦用來交流、傳承，便產生了巨大的價值。
語言如果不用起來，那就成為古老文明，就只有觀賞和研究價值。而語言一旦用起來，那文明就可以被積累、被傳承，就形成了知識、智慧，而知識和智慧可以在企業中打破組織、系統的邊界，被更廣泛的傳承、迭代。
數據這種語言，一旦在商業世界中應用起來，將會形成巨大的化學反應，這種化學反應就是對生產力、生產關系的重構。
數據化轉型之所以能重構生產力，是因為數據這種語言將在數字化轉型后徹底被激活。
數字在數字化轉型前就像一張張卡片，被丟在各個角落，彼此不知道彼此的存在，因為數據是零散的，沒有標準的，更沒有數據應用。而通過數據化轉型，這些零散、不標準的卡片被打通、被標準化、被打透，就可以變成音符、書籍、影視作品，甚至變成科學和一家企業的血液。
數據這種語言還有其他語言沒有的功能，就是會自我化學反應，或者稍微加點催化劑，很容易就被催化成其他神奇的力量。因為自動或半自動話的數據分析、數據智能能打破人和組織的盲區，自動識別、定位問題，甚至自動解決問題。
所以數據化轉型重要價值之一是將原本被零散丟棄、沒有標準的數據通過數據采集、數據治理、數據加工，生成各種數據應用，包括但不限于有觀賞價值的數據大屏、數據可視化、數據分析、數據AI。因為通過數據可以發現，很多沒有被發現的客觀事實、問題，并找到解決辦法。
比如數字化轉型后，終于能及時在線看到渠道的串貨問題有多嚴重，到底從哪串到哪了，勁兒精準打擊。
也比如通過數據發現，原來線下經銷商搞活動，還能把線上銷量帶起來，導致線上經銷商也缺貨了，消費者、渠道商這么聰明，價格的風吹草動就能快速去搶市場機會，這是很多管理者之前沒有意料到，那如何線上、線下一盤棋，進而驅動企業渠道管理的優化；
再比如數據化轉型前，需要看一個數據的時候，需要從總部到大區再到省市，層層追問，不光等拿到數據結果就已經2個星期過去了，還得設置幾個、幾十個這樣的市場專員來搜集數據，對企業來說，人和時間就是生產力。
所以數據化轉型在生產力上提供了多重幫助：
所以數據化轉型使以前依賴人的生產力，變成可以自動化、AI化，數據變成了企業的重要生產要素和生產力，拍腦袋決定的事變的越來越少。
因為數字化轉型打破了原來的信息隔離和信息壟斷，使得人和人之間的合作，部門和部門之間的合作變得更透明、通暢。
每個人都有的自己的目標、利益、盲區，每個團隊也有自己的目標、利益、盲區，容易造成企業內部合作困難、企業內外部合作困難。企業內耗、內卷，無處不在，這是很多企業數字化轉型的底層驅動力之一。
有時候，人與人或部門與部門之間不愿意合作，因為各自的屁股不一樣，利益不一樣。單從企業的角度來說，需要提高更多的人和團隊的合作意愿和合作效率，而數字化轉型在打通企業全鏈路數據之后，使得企業中人和人、團隊和團隊，內部和外部的合作變的有更大可能性：
一方面團隊和團隊之間的盲區打開了，大家開始多了一些互相理解，另一方面，很多管理問題可視化之后，好的、不好的開始逐步暴露，遇到問題后，推脫或者不合作的理由開始越來越難找，所以逼著大家要合作。
也有時候，人與人或部門與部門之間想合作，但不知道該怎么合作，到底怎么做才是專業的，沒有人知道，誰都不服誰。而這也是數字化轉型能解決的問題，專業的數據應用是解決問題的辦法之一。大家看同一份數據，用能高度達成一致的方法和目標，去解決同一個問題。
所以數字化轉型將打破企業內部、內外部合作中原有的邊界。一旦打破，相當于在企業中重新對生產關系進行了重構，以前那些很強勢的前臺團隊變的開始尊重后臺支撐團隊，后臺支撐團隊開始理解前臺團隊的不容易，甚至有可能前后臺團隊合并成一個團隊，這種調整都取決于實際業務和管理需求。
同時，數字化轉型不是建個數據倉庫、上一堆數據應用就結束了的事。數據從零散、非標準化的形態，被標準化的鏈接、應用起來后，也就是形成了生產力，但這種數據生產力只有用起來才能成為生產力，也就是需要生產關系的驅動。
沒有數據化的運營，數字化轉型也只是一個靜止的工具。數據化運營才能真正發揮數據的生產力，而數據化運營就是一種生產關系。很多企業，沒有配備數據化運營的崗位，或者負責運營的人不懂數據，不懂數據化運營，或者內心鄙視數據化運營，那數字化轉型是白搭。
所以真正發揮數據化轉型的力量，就需要與之適應的生產關系。
數字化轉型是一種由內而外的自我變革，利用數字技術的變革。這種變革的核心是提高生產力，改善生產關系，解決以前解決不了的問題，或者用更低的成本去解決以前的問題。同時，發現以前沒有注意到的問題和市場機會。
新的生產力需要與之適配的生產關系。
文章來源：人人都是產品經理 作者：西湖漁歌
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
數據可視化設計的一些技巧
一、什么是數據可視化
把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據內在的信息和規律，促進數據信息的傳播和應用。
在當前新技術支持下，數據可視化除了“可視”，還可有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。
二、什么是大屏數據可視化
大屏數據可視化是以大屏為主要展示載體的數據可視化設計。
“大面積、炫酷動效、豐富色彩”，大屏易在觀感上給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。原本看不見的數據可視化后，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。
利用面積大、可展示信息多的特點，通過關鍵信息大屏共享的方式可方便團隊討論、決策，故大屏也常用來做數據分析監測使用。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。
三、大屏數據可視化設計原則
設計服務需求
大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業務，所以大屏設計是在充分了解業務需求的基礎上進行的。
那什么是業務需求呢？
業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。
先總覽后細節
大屏因為大，承載數據多，為了避免觀者迷失，大屏信息呈現要有焦點、有主次?？梢酝ㄟ^對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展示邏輯后，再逐級瀏覽二三級內容。部分細節數據可暫時隱藏，用戶需要時可通過鼠標點擊等交互方式喚起。
四、大屏可視化設計流程
1. 根據業務場景抽取關鍵指標
關鍵指標是一些概括性詞語，是對一組或者一系列數據的統稱。一般情況下，一個指標在大屏上獨占一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。
確定關鍵指標后，根據業務需求擬定各個指標展示的優先級（主、次、輔）。
2. 確立指標分析維度
同一個指標的數據，從不同維度分析就有不同結果。很多小伙伴做完可視化設計，發現可視化圖形并沒有準確表達自己的意圖，也沒能向觀者傳達出應有的信息，可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。
我們在選定指標后，就需要跟項目組其他小伙伴討論：我們的各個指標主要想給大家展示什么，更進一步的講，是我們想通過可視化表達什么樣的規律和信息。
我們可以從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題。
1.聯系：數據之間的相關性
2.分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律
3.比較：數據之間存在何種差異、差異主要體現在哪些方面
4.構成：指標里的數據都由哪幾部分組成、每部分占比如何
3. 選定可視化圖表類型
當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里，篩選出最能體現我們設計意圖的那個就好了。選定圖表注意事項：易理解、可實現。
易理解：
就是可視化設計要考慮大屏最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
可實現：
（1）我們需要了解現有數據的信息、規模、特征、聯系等，然后評估數據是否能夠支撐相應的可視化表現。
（2）我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難。同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難。
所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。
4. 制作圖表
當確定了要使用哪些圖表做圖后，開始進入制作流程，影響最終圖表展現效果的元素一般分為兩個層面：
非數據層：
不受數據影響樣式的元素，比如說背景、網格線、外邊框等等。這類元素起到的是輔助閱讀作用，但如果不加處理全部放出，視覺上會顯得雜亂和不夠簡潔，干擾到你真正想展示的信息。對于這類元素，應該盡量隱藏和弱化。
隱藏
·去除不必要的背景填充
·去掉無意義的顏色變化
·去掉不必要的外框
弱化
·坐標軸淡色或隱藏
·網格線淡色或隱藏
數據層：
受數據影響樣式的元素，比如說柱狀圖的柱條長度，柱條顏色，柱條展示個數，氣泡圖氣泡大小等等，這類元素的展示效果和圖表本身的數據息息相關，一旦圖表本身的數據比較極端，有可能會使得最終視覺展現不盡如人意，我們無法改變具體的數據，是否就完全無法操控這些元素了呢？
精簡數據項
在做數據報告時，不管有多少數據項，為了完整和精確性，所有的內容都會顯示出來，但在大屏中，如此滿的數據展示，不但忽略了視覺體驗，還會讓用戶抓不住重點，對于餅圖來說，建議扇區個數不要超過5個，例如保留占比前5的扇區，剩下的非重點數據全部歸到“其他”。
保留前五或后五
如果柱狀圖的數據項過多，展示時會過于密集，建議先把數據項按照數值大小排序，只保留前五或后五的數據項。
5. 頁面布局、劃分
尺寸確立后，接下來要對設計稿進行布局和頁面的劃分。這里的劃分，主要根據我們之前定好的業務指標進行，核心業務指標安排在中間位置、占較大面積；其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。
6.可視化設計
根據選定的圖表類型進行合理的可視化設計。目前來講大屏可視化主要有：指標類信息點和地理類信息點兩大可視化數據。
指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。
地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。
數據可視化大屏設計少不了動效，動效是可視化重要的組成部分，動效的增加能讓大屏看上去是活的，增加觀感體驗。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而弱化了數據的展示。
7.樣圖溝通確認
樣圖溝通環節，最初的樣圖不需要十分精致，我們可以把它理解為一個“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點，然后又大修大改的情況。
因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然后根據樣圖效果嘗試確定五方面內容：
1.之前確立的布局在放入設計內容后是否依然合適；
2.確立的圖表類型帶入數據后是否仍然客觀準確；
3.根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受；
4.已有的樣式、數據內容、動效等在開發實現方面是否存在問題；
5.大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。
大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境，這里的很多問題只有設計稿投到大屏上才能夠被發現。所以這一步在樣圖溝通確認環節非常重要，有時候需要開發出demo，反復測試多次。
8.頁面定稿、開發
事實上頁面開發階段并不是到了這一步才進行，這里說的頁面開發僅指前端樣式的實現，實際上后臺數據準備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計的樣式呈現出來。
一般開發用代碼寫不出的樣式或動效，都需要設計師切圖作支持：比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。
9.整體細節調優與測試
這部分是指頁面開發完成后，將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。
視覺方面的測試：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。
性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在奔潰、卡死等情況；后臺控制系統能否正常切換前端頁面顯示。
五、大屏設計的注意事項
1. 字體使用
字體優先使用系統默認字體，需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。
如果頁面是云端部署，需要嵌入字體包時，我們可以使用FontCreator這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。
一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字
2. 顏色搭配
（1）色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色
3. 頁面布局
主次分明、條理清晰、注意留白，合理利用大屏上各小的顯示單元，并盡量避免關鍵數據被拼縫分割。
六、問題
設計稿投到大屏上顯示效果不佳怎么辦？
大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然后投上去查看實際效果。
因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現。如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環節及時測試也很重要。
文章來源：優設 作者：Captain相
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一些日常工作心得 總結
隨著工作年限的增加，項目經驗的豐富，在能力提高的同時，設計師更應該注重團隊管理能力上的提升，互聯網公司不論規模大小，但基本的開發流程是大致相同的，基礎配備崗位如下：產品經理、UI設計、前后端開發工程師。測試人員配置不一定有，所以這邊就不列入了。以上是最基本的人員配置，該有的流程并不可少，今天我拿目前所在公司的日常工作流程聊聊心得，有時間你就慢慢往下看。
各崗位的工作流程如下：
根據流程圖我們很清楚，哪些任務是優先可以發起的，哪些任務是上一個做完才能開始的。今天重點介紹在設計環節，作為一個設計leader，是如何開展并推進的任務的。
一：需求原型理解階段
設計環節前期，設計師會收到來自產品經理的原型圖，以及需求文檔，這時候作為leader的你，首先應該了解整個產品的架構與邏輯，并且通過口頭交流、書面記錄的方式，把你的疑慮與產品溝通進而了解最終目標。只有你自己搞清楚整個產品邏輯與目標，后期才能對其他協同設計的人員遇到難題時，進行一些思路梳理。
二：交付原型于協同人員
通過第一階段，你已經明白了整個產品邏輯和目標，這時候你就可以將原型圖派發給其他協同人員，讓他們先瀏覽理解，并在必要時給出相應疑慮講解，幫助其理清思路。
三：出主視覺風格設定稿
第三階段，你通過對需求的分析，對競品風格的探索，出具2種主頁面風格定向，并提交上級領導審定。這里注意的是，并不是越多種風格越好，一定是你經過一系列思索后，給出2版你認為最有說服力的即可。
四：啟動設計
風格落定后，你應制定一套視覺規范，對于大多數小伙伴來說很疑惑，我也疑惑過。你還沒設計，怎么知道你真正想要的是什么顏色什么字號？這里我建議是，部分設計稿出來再做規范，然后慢慢的完善。但是起初一些基本的樣式，包含顏色、字體、柵格系統等基礎規范，是可以先落定的。并根據原型統計頁面，進行任務分配，并溝通完成時間。
其次對于一些內置組件，比如展示型圖標、底部tab切換，盡可能讓同一個人來負責，便于風格走向統一。至于一些內部動效，可根據團隊成員擅長領域進行分配，例如我對交互動效比較擅長，我就可以負責這塊。
注意事項：為確保設計規范統一規范，統一藍湖協作工作流（每個公司協作平臺不同），參與設計協作人員，設計過程中新增組件樣式應及時告知協同人員（以免出現你新增了，對方不知道，造成多種樣式情況）
五：任務排期表
通過使用甘特圖進行排期，不僅對于你可以了解整個設計進程，同時也讓領導清楚項目進度。
六：UI前端配合調試階段
頁面都設計好了，好記性不如爛筆頭，以每個?？鞛閱挝?，記錄下你的整改意見給到開發，記得給他捶捶背，真的很幸苦也很煩心的一件事情。其實對于頁面還原度問題，心里要有個數，95%還原，就很棒了，我有時候也不會死磕太細小且不重點的地方，尤其在項目緊急時候，把重心放在測試bug上更為重要（忽略我的字跡，字丑人還好）
七：總結
人物結束，進行一個復盤，哪里環節不夠順暢，是溝通問題，還是效率問題，都可以記錄下來，下次改進。
文章來源：優設 作者：我是黃爍啊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
產品設計的初期，為了讓產品覆蓋到更多終端，需要對網頁設計進行響應式和自適應設計，制定界面適配規則時，你是否也有過如下疑問
寬度單位我是用百分比還是px？還是rem？區別是什么？
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設備像素、css像素？瀏覽器窗口大小和設備大小和分辨率大小區是什么區別？
什么是響應式網站，自適應又是什么？兩者有何區別和聯系？
百分比寬度布局和流式布局和前者的關系是什么？
既然響應式這么流行，為何淘寶、京東等沒有去做，而是單獨開發了一個移動端版？這里面有那些坑需要避開？
歷史長廊
在早期，硬件設備落后，網頁使用的是絕對靜態布局為主，絕對固定寬度的布局被稱為是靜態布局（StaticLayout），也有叫固定布局（Fixed Layout）。
后隨時代變遷，技術發展。因瀏覽器的增多，開發者們忙于兼容各種瀏覽器。在這個期間，實際已經有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。
在當時，大多指的就是寬度自適應布局。在這種新思想下，又出現了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。
在當時，大家都還沒有響應式布局的概念，但此時出現了一個新的詞--漸進增強。漸進增強出現后，另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子：gmail和qqmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區別。
qqmail就是css hack的完美體現，你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統一。gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發布了Android，移動互聯網爆發，html5標準發布。
互聯網大戰從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網站更加看重的是用戶體驗了，所以，谷歌式的漸進增強被廣泛認可，結合自適應的思想，出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。
描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。
現如今，為何需要考慮多設備的兼顧呢，依然是因為時代發展與生活方式的變遷：
即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預知；
臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加，“主流設備”的概念正在消失；
屏幕分辨率正飛速發展，同一張圖片在不同設備上看起來，大小可能天差地別。
結合自身產品用戶訪問瀏覽器分辨率
鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。
因此我們需要在了解基本布局方式的特征下，選擇適合自身產品的布局實現方式。
靜態式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下
靜態式布局：
窗口縮小后內容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。
自適應布局：
用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。
分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態布局組成的一個系列合集，每個靜態布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小，當可視窗口改變時，不會出現橫向滾動條，UI，圖片，文字會自動縮放，元素內容、布局、交互方式基本不變。
彈性布局：
以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果。
流體式布局：
屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小，不同于百分比自適應的是隨著窗口大小的改變，頁面的布局會發生小的變化，可以進行適配調整，這個正好與自適應相補。
響應式布局：
如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活的去實現自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。
頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和刪格、布局、圖片、css media query的使用等。
狹義上講，響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
R和A上的區別
當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。
他們之間主要的區別是DOM結構，當采用響應式思維開發時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節點），而在自適應開發中我們可能會有不一樣的代碼結構和體驗。
R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始（通常采用mobile first策略），所以舊的網站要做RWD很可能要完全重建。
A只在針對幾種分辨率（如320，480，760，960，1200，1600px）進行優化，在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站（desktop version）而對于更小的分辨率做針對性的優化（適應），減小重構的成本。
兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計，例如通過自適應開發來構建定制化體驗。
兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？A+R模型結合了基于單個主要臨界點的自適應和響應式方法。
混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應布局的融合。
自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。
很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點，后面內容會講到）保持統一邏輯。
否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。
選型
如何考慮實踐過程中的判斷呢。一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類?，F在的CSS框架基本都具備響應性。
但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。
當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構上也要調整，后端服務化，應用層app化。
根據不同公司的技術特點，調整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題?？傊?，根據場景響應式可以從各種層面，各種粒度上做。這是現代web開發的特點。
建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端以下的尺寸，不過渡到平板端）響應式布局有可能造成冗余的代碼較多，對研發的要求也更高，比如如何更好地讓圖片，適配，UI動畫自適應各種布局。
大站還是要考慮數據計算和承載的問題，會對桌面和移動端輸出不同數據，減輕壓力。
實踐與技巧
首先，我們需要了解幾種分辨率的差別。
ps：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率
以一個SaaS類后臺產品為例，對于基本流量來自Web端網頁的產品而言，需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況，數據來源百度統計，如圖所示：
如上所述，選擇適配方式時，設計目標為：區分web與pad端可共享的設計布局大于手機端，且產品規劃上web端為主流量來源，pad端屬于短期兼顧?？紤]技術維護成本與開發成本的平衡，于是判斷需要選擇A+R模式來完成產品的跨端設計。
自適應（A）方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點，根據全局統計信息定義，我們會得到一些相似處：
左側的可視區代表整個屏幕小于960px時的具體布局和內容
右側的可視區代表整個屏幕大于等于960px時的另一種布局
在使用響應式（R）技術時，我們可以利用主要臨界點創建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。
通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。
這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜。
因為你要處理不同的代碼庫和環境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。
刪格
柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言，這是一項十分有效的輔助手段。
1. 列和槽（Columns and Gutters）列（Column）用于對齊內容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內容。
2. 頁面邊距（Side Margins）頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。
3，用于組成柵格的列數稱為列結構。8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分，將內容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統采用來24列的形式，如Ant-D
4，斷點是指屏幕尺寸的特定范圍，列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內，布局會根據可用的屏幕尺寸重新調整，以獲得最佳的布局視圖。
如果較小的屏幕有足夠的可用空間容納內容，則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示，該列將垂直放置圖文內容。
5，網格規則，列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位，“網紅款”8點網格指的是設計頁面時，也應該遵循8點規律。值得注意的是，列跟槽的值盡量取8的倍數，但不是非得是8的倍數。
產品中各類元素應該遵循這個倍數原則（圖標、組件大小等），不同的設計系統根據自身需求，設定這個規則。例如在Material Design中使用的是2X網格。
6.流體柵格與混合刪格
流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內容寬度，根據屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。
混合柵格既有不同的寬度，也有固定寬度。在現代布局中，一些元素超出了網格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。
如果內容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格，以充分適應內容。
設計需在技術方案前介入，根據你的產品特點，進行設計方案評估，可借助的手段有刪格，網格規則等，設計斷點規則時，需關注設備的常見系統分辨率。
移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。
但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關注技術的革新。
A與B不是硬幣的正反面，它們為了解決同一個問題而生，是同一種思想的延伸。
文章來源：站酷 作者：酷家樂UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
做設計、做交互、做產品前都離不開一個目的就是——拆解問題，達到XX預期，從而能提升自己的專業性，讓方案更加具有說服力。那么，設計師應該如何找到符合自己的設計方向和優化方向呢？
案例：
如果不去拆解問題，你知道后續的該怎么做嗎？
設計拆解：想要找到設計方向和優化方向的，請你一定要看！
我們知道了最直觀的感受信息度和社交能力弱，但是這 2 點并不能作為優化目標和設計策略。
從該截圖來看，滿足了：
1. 信息是不是很滿？
那么如果不去拆解問題，是不是就不知道如何補充信息了，那么也有社交感。用戶在主動狀態下：漂亮、萌妹、聲優也就有社交了，那么用戶在被動狀態下是什么？
2. 是不是越想越亂，找不到方向了？
這就需要去拆解問題了，可以讓你的思路更加清晰，保持在一條線上，形成大綱，可以挖掘更多的價值。
還是同樣的案例：
那么背景交代的是需要強化社交關系提升信息豐富度和社交感。經過再一輪的拆解，是不是能感覺到，自己思考的方向也多了？
我拆解問題后，獲得的好處有：
1. 思維的擴展性
舉個例子：信息豐富度為什么會讓我覺得缺少一點靈活性？信息的展示，會不會又分為外在和內在信息？那么什么是外在信息？與同平臺上的大神之間建立的關系轉化為信息？
2. 邏輯的嚴謹性
3. 產出結果的可視化
可以根據拆解，將問題變得更加清晰，從而找準發力點。
前面鋪墊了那么久，現在回歸正題拆解問題主要分為 2 種（對應著初級和中級水平，可視情況任選一種）：
還是以這個案例：
△ 這是提升信息度的模塊，問題樹太長，就只展示部分了
△ 這是提升社交感的模塊，問題樹太長，就展示部分了
挖掘到以下功能（列舉功能并記錄，進行權重分析）：
這是一個很淺的影響因素分析，到了這一步，很多厲害的小伙伴，甚至會更加詳細。也就是說我們要將方向點，統統轉化為機會點和業務新方向（那些一直抱怨沒有發言權的小伙伴可以參考一下）。
（全局問題樹展示-舉例就不做詳細展開了，理解意思就行）
整合內容進行歸類
拆分和定位分為：
整合成一個表單：
重復確認問題我們找到上級確認：是否與上級規劃的方向保持一致，不合適也能及時作出修改。
資源規劃根據權重比，進行資源規劃。適用場景對于剛上手的小伙伴，請耐心的一步步做完，老鳥的話請直接一步到位。
這一塊的內容需用到用研部分知識，以數據為主用研為輔的情況下去進行拆解問題。相對來說，流程會更加的長，但是獲得的結果更為準確一些或者說更加偏向用戶想要什么。
流程漏斗數據圖
還是以這個案例：（背景需要改動一些）
背景：某 APP 作為游戲類興趣社交 APP，個人主頁作為了解他人、建立社交關系的核心一環，目前信息豐富度和社交感偏弱，故需要進行優化 。（改為：導致流失率偏高，下單轉化極低）
目標：頁面改版核心以社交為驅動，豐富頁面信息，提升用戶建立社交概率。（添加：提升用戶建立社交概率，從而能提升用戶粘性降低流失率）
第一步：拉取數據（某一時間段，瞎編的基礎點擊事件埋點數據，看個意思就好）
△ 假的有點過分了，嘿嘿
第二步：進行梳理
先進行大綱梳理（以業務流程為主，梳理出主要問題）
△ 以用戶直接進入個人主頁舉例
第三步：假設驅動即解決復雜問題時盡可能的先找到一個合理的假設。比如：剛進頁面就流失，甚至停留時間都很短，那么你立馬給出的結論是：
TA 真丑，不符合我的審美，嚴重 P 圖。
第四步：找到用戶做這類測試的時候，當然一定要去找玩游戲的用戶且接觸過陪玩的。用戶找到-約時間-去用戶能放松的地方-開始瀏覽該軟件-進行定性測試。
第五步：匯總結果定性的方式有很多種：這里我舉例一個「think aloud」：
使用 think aloud 的流程：
最后在經過數據分析得出問題的優化重點或改版方向。
補充一句，如果條件允許，使用卡片分類法，讓用戶自主的搭配，個人主頁中功能位置。
小結：熟練分析話術，圈重點，找到核心的發力點。也能讓思考過程更加結構化、可視化。不同的話術下，找到不同的方式，幫助快速解決問題，找準切入點和挖掘機會點和后續的跟進（要玩的流暢就取決于你的樹結構的清晰程度了）。
策略其實在你分析的時候就已經產生了。
當然啦，我們是一個 team，當你產生策略的時候，需要和團隊內共同討論方案的可實行性。
1. A/B testing
進行原版和改版數據對比，重點/想改進的數據有沒有提升/下降就好了。
AB 測試就是指把少部分用戶分成平均的兩組，其中一組用戶體驗網站改版的 A 版本，另外一組用戶體驗網站改版的 B 版本，分別記錄清楚相關的所有用戶操作數據以后再進行精確的比對，最后分析得出哪一個版本是用戶最喜愛的。
2. 灰度
灰度發布則是指在新的功能上線以及沒有上線之間能夠保證新的版本可以穩定過渡的一種發布方法，可以在灰度發布的過程當中解決一些問題或者對新版本做出一些可以提高用戶體驗的調整，這是保證網站可以平穩更新到新版本的有效過程。
文章來源：優設 作者：七月Xavier
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：UI設計師在日常工作中經常會進行Banner的設計，Banner代指任何投放于線上的各種尺寸的廣告圖，在設計Banner圖時，需要考慮到多種因素，內容、受眾、效果等等；本文作者分享了關于Banner應用和交互設計，我們一起來了解一下。
Banner是每個UI設計師家常便飯的項目，聊聊banner的那些事。
banner翻譯成中文是橫幅或旗幟，為了體現產品的中心意旨，利用鮮明的內容去表達最主要的情感思想或宣傳中心，從而給整個產品起到宣傳的效果。
在互聯網時代，banner被廣泛應用在pc網頁、app設計等互聯網平臺間，作為設計師做一張banner乃家常便飯，如何才能設計一張高質量的banner呢？
創意新穎、風格貼切的banner能第一時間吸引用戶眼球，有利于banner的觸達，帶來高效率的點擊，創造更高的價值。
關鍵詞：文藝、氣質、素雅、安靜、格調。
畫面大量的留白；色彩以高級灰為主，飽和度和純度低，明度高；字體多采用襯線體，標題文案突出，輔助文案偏小，整體突出高級感；畫面點綴多采用精細的線條。
關鍵詞：高冷、時尚、大氣、品質。
色彩多以黑白灰；文字清晰簡潔內容少；焦點主圖很大，突出表現細節；畫面精簡，無點綴物。
關鍵詞：傳統、中國風、意境、韻律。
畫面采用對稱式構圖，文字排版有采用豎排；色彩上采用中國傳統顏色，采用物體的固有色，避免艷麗刺激的色彩；字體多采用書法字體，書法主要分為篆、隸、楷、行、草五種書體；圖形活用中國風元素，剪紙、燈籠、折扇、祥云、梅花、水墨等作為輔助元素。
關鍵詞：青春、活力、年輕、動感、時尚。
色彩飽和度和純度高；排版多樣性，視覺沖擊力強；運用幾何圖形裝飾在產品、背景、氛圍裝飾上。
關鍵詞：可愛、甜美、卡哇伊、Q、呆萌。
色彩鮮亮透明，營造軟萌可愛的感覺；字體采用少年字體、手寫字體、卡通字體；點綴元素多使用卡通小元素。
關鍵詞：促銷、活動、節日、熱鬧。
畫面整體氛圍熱鬧，內容飽滿，很少留白；色彩豐富，紅色、黃色、橙色、紫色偏多；主標題文字偏大，字體剛硬，視覺沖擊力強，點綴元素有光效、舞臺、五彩的漸變、沖擊性的線條或多邊形等。
關鍵詞：未來、科技。
科技類banner，文字和背景圖非常具有科技感，畫面具有空間感；色彩以冷色調為主，常見有藍色、紫色、黑色；點綴元素有光效、金屬、線條、光點。
關鍵詞：場景、趣味、手繪感、扁平。
畫面具有故事性和趣味性；色彩扁平的配色，上色沒有高光和陰影；字體偏向年輕化，圓潤、無襯線體字體；點綴元素以涂鴉的小裝飾為主。
1）創意監控
產品在用戶心中需要良好的正面形象，banner傳播對內容需要進行嚴格控制，把握好政治導向關、價值取向關和格調品味關。廣告內容需真實準確，不引起歧義。
2）情景約束
用戶體驗產品需要有愉悅感，banner需呈現積極陽光的正面情景，素材圖片傳達正向的情緒和氛圍。
3）版權約束
避免法律糾紛，圖片素材、文字等內容應該要有版權，banner中不使用來源不明的字體、圖片、視頻等素材。
1）確定文案
文案盡量簡潔明了，用詞準確、文案通順、語言生動。用詞準確是最基本要求，活動、權益、業務表述文字內容符合業務方需求，無錯別字。文案通順、表述清晰，適合產品目標群體閱讀與理解。語言生動、精簡、有吸引力，集中核心訴求點，亮點突出。
1）板式
排版結構：
banner由多元素組成，banner內在包含：色彩、構圖、風格等，外在包括文案、產品配圖、背景、點綴這幾個部分組成，設計過程通過拆分一步步執行，思路清晰且效率高。
構圖方式：
對齊構圖
畫面中相關內容遵循對齊原則，便于用戶視線快速瀏覽，接受重要信息。常見的對齊方式左對齊、右對齊、居中對齊，建議banner中只使用一種對齊方式，多種對齊方式用戶閱讀視線分散，增加用戶認知成本。
聚攏構圖
畫面內容拆分為文字區、圖片區、氛圍區，相關內容聚集在一個區域，其次聚焦一個視覺重點，弱化其他元素，視覺出現層級。
留白構圖
根據產品頁面留出適當的安全邊距，保證banner在適配過程中不會出現重要信息看不全的情況。排版時，元素之間需要留出空隙，畫面看起來有透氣感，減少用戶認知信息的負擔。
降噪構圖
色彩、文字的種類不宜過多，點綴圖形運用不合理，會分散讀者注意力，成為用戶閱讀的“噪音”。
重復構圖
排版注意整體設計的一致性和連貫性，避免出現不同類型的視覺元素，使畫面出現跳躍。
對比構圖
banner中重點信息加大與周圍元素間的視覺差異，通過顏色對比、字體的大小字重對比、構成的面積對比等方式，以便于用戶快速獲取重點信息，豐富banner的視覺層級，吸引用戶。
構圖樣式：
對稱構圖
通過對畫面的平均分割保證畫面的平衡，對稱構圖給人有力、穩固的視覺感受。
居中構圖
居中構圖很好的突出主題，畫面中規中矩，活躍感較弱；用戶視覺焦點會聚集中心位置，視覺焦點需要重點刻畫，周圍元素弱化處理。
左右構圖
左右構圖分為2種，左文右圖、左圖右文。2種構圖樣式，區別在于用戶的瀏覽過程中是先看文字還是先看圖片。
當配圖示意不明確時，建議使用左文右圖的排版。
配圖主要是根據文案內容繪制的輔助圖形，用戶只看圖無法明確活動內容，建議采用左文右圖的板式。根據“F形”閱讀模式，瀏覽習慣往往從左向右從上往下，將文字信息放在左邊有助于用戶快速瀏覽，獲取重點信息。
當配圖示意明確，圖比文字更加重要時，建議使用左圖右文的排版。
用戶根據圖片即可明白活動內容，運營或業務方希望有吸引力的活動圖片獲取用戶的注意力。
衍生構圖
基于banner受限尺寸和高度，會衍生出一些構圖方式，例如放射性構圖、傾斜構圖等。不規則的構圖，設計上具有層次感，豐富的視覺呈現給人眼前一亮，更容易吸引用戶眼球。
構成比例
banner大多為左右排版，圖文比例4:6，接近黃金分割比例0.618，文案標題比例約2:1。畫面中文案占比一定要大于配圖，用戶更關注是是內容本身。
2）配色
色彩體系：
暖色系
暖色系主要由紅、黃、橙等構成的色調。容喲聯想到陽光、火焰、熱血等場景，給用戶積極、活潑、溫暖的感覺。暖色系色彩的飽和度越高，溫暖屬性越突出，用于電商活動，渲染氣氛。
冷色系
冷色系主要由青、藍等構成的色調。容易聯想到海洋、冰雪等場景，給用戶寒冷等感覺，適宜表現恬靜、低沉、嚴肅、理性的內容，比如科技類產品。
同色系
同色系又稱單色，這種色系的搭配在產品本身顏色比較統一的情況下，提取產品鄰近色，作為畫面的搭配色，讓整體畫面變得統一和諧。
類似色系
類似色相比同色系，它具有豐富性和可變化性，基于banner整體的主色調以后通過添加與主色相近的輔助色，是整個畫面變得豐富活躍起來，同時這些配色方式也相對容易。
對比色系
對比色系，色相環上相距120度-180度之間的2種顏色（180度則為互補色），對比色之間的搭配能夠給畫面帶來華麗、跳躍、濃郁的視覺美感，高純度、高明度、等面積的搭配，會產生強烈的刺激感，干擾用戶視覺體驗。畫面中往往會考慮補色之間的面積比例、純度比例、明度比例、空間間隔的比例，平衡畫面之間的視覺感。
創新配色
除了基本的色系配色系外，還可以嘗試更多的配色風格。畫面中有目的地運用色彩元素，豐富畫面的色調。
色彩比例：
banner色彩需要考慮頁面統一性；banner尺寸較小，信息色彩不宜過多，2-3種即可。畫面主要由主色、輔色、點綴色組成，色彩的黃金法則60:30:10的法則，60%左右的主色、30%左右的輔助色、10%左右的點綴色。
3）字體
字體類型：
無襯線體
粗的黑體，具有官方嚴肅氣質，自帶有力量感，視覺沖擊強烈，與速度線條、碎片、劃痕等設計手法十分搭配。細的黑體，具有年輕、簡約、細致的感覺。無襯線體易讀性較強，常用于科技類banner中。
襯線體
襯線體裝飾性較強，給人帶來活潑、輕松的感覺。比較適用于文化、文藝、美食、女性、時尚等行業。
圓體/卡通字體
具有趣味性和活潑感，適用于兒童、寵物類、休閑食品、家居等行業。
書法體
有韻味和藝術感，視覺張力豐富，適用于中國風、藝術感等畫面。硬筆書法字體：優雅、有親切感，適合傳統、文化等畫面。
字體樣式：
考慮字體大小、字重、顏色。文案有主文案和副文案之分，需要有對比性。字體的顏色選擇需要考慮與背景色的搭配效果、banner主題間的關聯，選擇合適的顏色能凸顯文案。
4）輔助圖形
幾何圖形：
幾何圖形是banner設計中常見的輔助元素，它的多樣性和簡約性設計師十分著迷。幾何圖形可以創作無線的可能，用戶對其有意無意地進行自我詮釋。
圓形
圓形象征著圓滿、融合、自然、和諧、無窮，在設計中具有非常強的包容性，由于其自身的可拓展性，將圓形進行拉伸、疊加、重復可獲取豐富的圖形。
三角形
三角形具有方向感、變化感，它的銳利給以垂直、剛強、莊嚴、向上的感覺，其長度有穿透感，象征崇高和無限。
方形
方形具有對稱、有序、平靜、專業屬性，給人穩定安全統一感。
多邊形
多邊形的形狀會給人帶來穩重感，通過多邊形凸顯產品的尊貴感。
不規則圖形
不規則的圖形營造畫面的氛圍，突出主體元素，激發用戶點擊欲望。
流暢的線條：
流暢的線條給畫面帶來韻律感。
立體幾何圖：
立體幾何載體讓整體畫面格調顯得品質高。
5）動效
展現商品質感和工藝或者展示同商品不同狀態時，動態banner比靜態banner點擊率高。呈現商品多樣性和系列感需要靜態廣告。
1）傳達
呈現出來的畫面鮮明地表達活動主旨，文案內容，可用性。
2）美感
板式設計、配色、字體設計、風格、插圖、點綴圖案以及動效這些運用是否合理。
3）效率
整體復雜程度，后期banner修改和加工工作難度，可不可重復利用。
4）創意
畫面主題是否突出，具有吸引力，刺激用戶點擊。
現實中多是單張banner圖，而互聯網產品中大多采用多張輪播banner。有限的屏幕內采用多張輪播提高空間的利用率，其次用戶長時間盯單一廣告會疲憊，輪播banner有利于吸引用戶注意，激發用戶探索欲望。
電商產品用得比較多，全圓角矩形或不規則矩形，此類banner運用在促銷活動中，實效性特別強。
運營強度較弱，banner在頁面權重較低的專題活動會用到白底模版化banner。排版左文右圖，內容由主標題、副標題和小插圖組成，例如支付寶首頁中間位置banner。
需要吸引用戶來參與運營活動，可以采用懸浮圖標的形式，吸引用戶的注意力，對頁面布局不產生影響。
用于產品中同一個功能模塊，多個不同入口，或者不同服務類型的商品入口。商城或者熱門板塊使用。包括：兩個入口、三個入口、四個入口、五個入口、六個入口。
1）功能
banner在頁面中所承擔的責任是什么，活動運營、功能區入口、系統公告、還是第三方廣告。
2）數量
banner位置所承載內容數量是多少，同時存在幾個內容。
3）頻率
banner采用的是靜態banner還是輪播的方式。固定banner多久更換一次，輪播形式的banner，幾個banner輪播，輪播的速率是多少。
4）層級
banner在頁面中與其他功能區相比，banner位所屬的信息層級是什么樣。
1）靜態/動態
靜態banner。如果內容中有一個非常重量級的，其他的都是差不多的不怎么重要的，可以考慮只將重量級內容放在顯眼位置的Banner上，且靜態不輪播，其余內容放在別的運營位里。
動態輪播。輪播banner圖注意幀數不宜過多，加上輪播指示器，提示用戶banner的個數以及banner可以左右滑動。
2）尺寸
屏幕占比大的banner有更強的營銷感和氛圍感，常見電商平臺的頂部banner。
屏幕占比小的banner會低調些，不會干擾用戶閱讀瀏覽頁面，例如金融類平臺。
1）圖片大小
保證產品啟動加載時間和操作流暢，上傳廣告圖的大小建議在300kb以內。
2）圖片格式
輸出的格式：JPG、PNG、JPEG、BMP、GIF。
文章來源：人人都是產品經理 作者：界白
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
