行業對設計師的要求?直都在不斷革新，只有「?技之?」的設計師已經很難滿??業需要，產品分析已經不僅僅是產品經理的工作內容，對于 UI 設計師來說，也是必備技能之一了，尤其是對于 B 端領域的設計師來說，更需要拓寬視野，思維前置。
那么，該如何去做產品分析呢？本文將從產品分析是什么，如何做兩個方面來講述，為大家提供思路，做真正落地的對設計有幫助的產品分析，提高自己理解業務、處理業務、解決問題的能力，體現出設計師的價值。
對于 B 端產品來說，它只有一個目標，就是解決問題，通過對問題的分析得出解決方案，而任何一個問題都不會只有一種解決方案，在權衡利弊后得出了最終的解決方案，產品就是解決方案的表現形式和實際載體。
從設計師的角度來說，產品分析通常是挖掘產品缺陷，優化產品體驗，為產品迭代提供依據，比如：通過深度體驗產品，挖掘產品的在功能、交互體驗方面的不足，并通過分析制定產品優化方案。一款產品從淺至深擁有無數的可被挖掘的信息，這些信息本身是龐雜冗余無意義的，只有通過分類和清洗才能得到對人有意義的信息，本質上來說，產品分析就是在做信息分類和清洗的工作。
市場分析是對產品所在的市場進行宏觀的競爭態勢和市場規模的分析。市場分析主要包括行業背景、市場現狀和商業模式三部分。可以看到，市場分析其實是從很宏觀的一個角度來切入，更偏向于戰略層內容，因此市場分析也是三者中距離設計師最遠的一個概念。用通俗的話來說，市場分析最主要的目的就是分析產品是否賺錢。
廣泛意義上說，競品分析就是根據分析目的，找到切入角度，對競爭對手或市場進行客觀分析，找到競品或自己的優勢與不足，為下一步決策提供科學依據，其實就是「知己知彼」的過程。對于設計師而言，競品分析的目的更傾向于尋找解決方案，比如：通過競品分析來尋找參考從而解決自己當前遇到的問題。
不同于 C 端，B 端往往有很堅固的行業壁壘，所涉及業務也非常難以理解，究其原因，來自以下兩個方面：
B 端產品很多時候，都是在原有線下業務的基礎上進行數字化。邏輯的復雜度本質上是來源于這個行業多年來積累的足夠成熟的業務流程與規范，而這些東西沒有辦法速成，只能靠不斷地積累來增進理解。
C 端產品的設計中，設計師大部分情況下都或多或少地就是用戶本身，或者帶有用戶屬性，比較容易產生同理心，去發現問題解決痛點。
而 B 端產品不是給普通用戶使用的，是給特定群體使用的，這種特質就決定了設計師很難去真正地理解用戶的處境，設計師最厲害的特質——同理心也很難派上用場。
有的設計師同學，一接到產品分析的任務，到手就是先去網上看看別人是怎么做的，然后按著人家的結構對自己的產品進行一通分析，其中不乏用到了「用戶體驗五要素」、「SWOT分析」等看起來高大上的方法論。
按這樣做，產出的分析報告不能說錯，但是最起碼是不恰當的，對設計上的幫助微乎其微。其中有這樣兩個問題：
產品經理是產品的第一負責人，需要對產品的整個生命周期負責，說人話就是產品經理負責產品做什么不做什么，該什么時候做，而設計師關注的是產品的用戶體驗。產品是商業的代言人，而設計師是用戶的代言人，二者本質上的不同，就決定了在做產品分析時關注點必然不同。如果按著產品經理的思路來做產品分析，得出大環境之類的太過于泛化的結論對設計沒有什么實質性的幫助。
用戶體驗五要素，swot，等等這些高大上的方法論看起來非常有用，從多個維度把一款產品分析得非常清楚?？烧鎸嵉那闆r時，往往新手設計師同學既不懂方法論的本質，也不懂使用場景，只是盲目地套用，導致產出的是一篇「八股文」一般的產品分析報告，過于全面但沒有重點，什么都是點到為止，對自己理解業務和輔助設計沒有實質性的幫助。
我認為，「方法論」本質上是經驗主義，使用過去解決問題的方式來解決新的問題。在一定程度上，方法論是有用的，一些簡單的問題，確實是有固定解法的，而且，解決問題也更快。但是在更難更特殊的場景下，方法論不再管用了。很多時候，問題表面上看起來一樣，可是由于問題的背景不同，所以解法也是不一樣的，這時候再采用方法論，就會產生思維固化，強行去套方法流程，得到的一定不是最正確的答案。
在確定了目標和分析重點之后，我們就可以開始進行分析產出產品分析報告了，在這里我整理了幾個撰寫時的原則供大家參考：
第一點是我們要避免去主觀臆斷功能的合理性。正如我上面提到的一樣，我們并非 B 端產品的核心用戶，有些我們感覺反常的地方，但是其實有它的合理性，因為 B 端用戶的痛點往往是在特定的工作場景下產生的。因此，在不了解真正用戶和場景的情況下，僅憑經驗下的結論往往是錯誤的。
我之前的一個項目的設計中，在給圖表配色時，我最初的一個版本是用的近似色去完成的，在發給產品經理初審時被打回來了，理由是這種配色不夠明顯。我追問原因后才知道，我們的一部分用戶是年齡比較大的用戶，對比度足夠高才能方便他們看清楚。最后出的一個版本是對比度非常高的配色，盡管從設計的角度來看這種配色美觀度不足，但是能夠讓用戶看得清楚。
在這個例子中，用戶對于美觀度并沒有很高的要求，反而對于數據的識別度要求更高。我們常聽的一句話是「己所不欲，勿施于人」，然而在B端的設計中，我們更要做到「己所欲，亦勿施于人」。
B 端產品有一個很重要的特點，購買決策者與使用者的割裂。我們在思考一個功能時，不能僅僅考慮使用者的體驗，也要考慮決策者的想法。
比如釘釘的「已讀未讀」這個功能，相信大家對這個功能是槽點滿滿。但是在 B 端產品中，決策鏈上游是購買決策者即老板，因此就有了這個功能。如果只考慮到用戶體驗，這個設計從一開始就不該出現。但是，與 C 端產品的流量思維不同，B 端產品不是靠體驗來吸引用戶存活的，而是靠滿足決策者的需要來活下去的。很多大家感覺不好用或者體驗很差勁的 B 端產品，仍然活得很好，就是這個道理。
說句題外話，釘釘已經注意到了這個細節，在去年的一個演講上，釘釘總裁也提到了對這個功能點的考慮，他舉了一個場景，在不改變現有設計的情況下解決了這個問題，通過智能手表等外設來預覽消息，而手機和電腦依然顯示未讀，自己考慮好了的時候再去回復。
從戰略層到功能架構，再到每個功能細節，采用金字塔原理去遍歷，避免遺漏的同時層層深入。
在此處，我介紹一下我認為一份合格的產品分析報告應該包含的部分，各位設計師同學可以根據自己的需要進行適當調整。
因為產品分析是有一定的時效性的，且是針對某一個具體版本去進行分析的，所以在文檔開頭要列出自己所分析產品的版本，例如（飛書 V5.6.9，釘釘 6.3.35）。
即設計師進行產品分析的時間，留檔以供以后查看。
此處要回答的問題是，產品是用來干嘛的，給誰設計的以及怎么賺錢的。
即產品是用來干嘛的，不需要特別具體，只需要在大方面上對產品進行概括即可。舉個栗子，抖音定位是一款短視頻消費型產品，以“內容”的新鮮有趣為主，強調分享和信息獲取，滿足幸?？鞓返拿篮脮r刻需要。
即產品是給誰設計的，在此處需要對客戶和用戶做區分。客戶一般是指企業的 CEO/管理者，他們來決定是否要斥「巨資」購買一款軟件。比如說某公司的 CEO 最終決定買釘釘還是飛書作為辦公協同軟件。而用戶一般是企業內的員工，他們使用軟件來完成一些日常工作。分析目標用戶的意義是，在之后的分析中，我們都要以用戶為落腳點，去分析功能的合理性。
需要注意的是，此處并不需要去做一套完整的用戶畫像，只需要大概描述一下是產品的客戶和用戶的職位和核心需求即可。
舉個栗子，對于某客服工作臺產品，
即產品如何賺錢，在這里，我們并不需要用各種很高端的工具——比如商業模式畫布，去分析商業模式，我們僅需要知道產品的賺錢方式即可。作為設計師，我們不需要有產品經理那么專業的商業思維，但是我們也一定要能夠從商業角度理解產品的價值，一款產品最健康的狀態一定是用戶價值與商業價值并存。因為本質上而言，用戶體驗也是商業價值的一部分。
對于B端產品而言，有兩種最常見的售賣方式：
1. 本地部署 —— 按軟件數量售賣
本地部署是指產品的應用、數據都存儲在一臺計算機中，這臺計算機不與其他任何服務器、計算機相連。21世紀之前的傳統 IT 公司大部分都屬于這類，比如 Adobe 旗下的產品（盡管他們也在做云，但是更多情況下我們還是把 PS 當做本地產品來使用），那時候 B 端企業的商業模式是：主要服務于大企業客戶，通過與頂級的合作伙伴合作，推出頂級的產品，提供一整套軟硬件解決方案，并進行深度服務，一次性收取高昂的軟硬件費用，并且每年加收不少服務費。
2. SaaS —— 訂閱制
21 世紀后，隨著云計算技術的發展，越來越多的產品開始部署在云上，也就逐漸發展成了現在的 SaaS 產品，從這個角度來講，我們通常所說的 SaaS 產品其實就是將本地部署變為云端部署的產品服務。
這時候 B 端企業的主要商業模式是：不僅服務于大型企業，也服務于中小企業。以訂閱制的方式，定期收取費用，并且提供不同的版本，進行差異化定價，實現收益最大化。
舉個例子，藍湖就是提供了四個版本并且以季付或年付的方式進行收費。
將需求轉化為對應的軟件層面可實現的能力，即功能，功能可以實現需求所期望達成的目標。
一個完整的 B 端產品包含若干功能，將一套功能依據業務進行分類整合，形成的抽象化業務模型即功能架構。
功能架構指的是產品是如何由這些功能組成的。我們在分析功能架構時實際上更偏向于產品的實現模型。
信息架構是包括組織系統、標簽系統、導航系統、搜索系統在內的綜合系統。我們在分析信息架構時，分析的是這個產品是如何將不同的功能組合在一起展現在用戶面前的，分析的是產品的呈現模型。
一個成熟的 B 端產品甚至會有甚至會有三四百個功能，我們在分析功能細節前，必須要先厘清架構，以一種抽象的框架視角來全局思考，而不是也僅僅以用戶的視角來看產品的表象。
真正地去使用產品，并將產品的所有功能與模塊收集到一起。
以模塊作為分類依據，將所有功能分到不同的模塊里，必要的話，可以繼續細分子模塊。
在這里要注意，一個功能是否屬于某一個模塊，不能以這個功能是否在某個頁面為依據。一個頁面出現了某個功能，只是因為這個場景下用戶需要這個功能，而不是這個功能屬于這個頁面。
以飛書后臺為例，很多人在分析時會把首頁也作為功能架構圖中的一個節點去分析，這是錯誤的。
首頁只是功能的聚合，而非功能模塊，例如「添加成員」這一功能應該屬于「組織架構」模塊中，如果將首頁也加入分析，勢必會出現功能的重復。
在分析完整個功能架構之后，我們可以深入到每個功能的細節了。其中包括以下兩點：
通過繪制功能的使用流程，我們可以模擬用戶在使用產品時的流程，發現一些從宏觀角度上忽略的點。在繪制時，要注意的是，要控制在頁面 & 操作維度，避免拔高到功能維度甚至業務維度。
我們除了要知道這個功能該怎么用之外，還要知道功能與業務的關系 —— 功能背后的需求。
在分析背后的需求時，除了知道這一需求是什么，如果可以多走一步，對需求進行分類，那對于我們了解產品時大有裨益的。
關于需求的分級，在 C 端中常用的模型是馬斯洛需求模型，但是這一理論并不適用于 B 端，主要是由于以下原因：
一般而言，我們可以將需求劃分為功能性需求與非功能性需求。非功能性需求，指的是隱藏在功能需求背后以及開發需要考慮的的需求，也叫作“跨功能需求”。最常見的非功能性需求就是產品的響應時間，一般非功能性需求是由開發和測試同學考慮的。
而對于功能性需求，有三大類：業務需求、功能需求、產品需求。而這三類需求也有比較立體的層次關系：
業務需求，提出者是業務范圍、業務模式和業務規則的制定者，一般是指業務方的高層人物，比如 CEO、高級經理等。產品設計是服務于業務定位的，進而使得產品戰略遵循于企業的發展戰略，只有這樣產品方向才不至于發生偏差，因此，他們提出的需求一般不能違反，換句話說，他們提出的需求是整個系統設計的最高綱領。
用戶需求，提出者是基層管理者和執行者。他們關心的是如何使用產品完成自己的工作，提出的需求相對細節，例如對操作、流程上的訴求。
產品需求，由于 B 端產品的復雜性，在建設時需要考慮到功能復用問題，以及與其他系統的架構交互問題。舉個例子，語雀 App 是阿里旗下的產品，在開發登錄界面時，沒有重新開發，而是集成了阿里云的 SDK。產品需求本身對業務實現沒有價值，它的價值體現在節省人力和優化軟件架構上。
三者雖然并沒有絕對意義上的優先級順序，但是一般而言，B 端產品時優先考慮業務需求，其次關注用戶體驗，滿足用戶需求，最后才是考慮產品需求。了解了這一點，我們對功能背后的需求進行分類后，就可以從更高的視角來分析功能的設計邏輯，而不僅僅是停留在好不好看的層次上對功能進行分析。
在《交互設計原理》中是指：對于交互式數字產品、環境、系統和服務的設計，定義人造物的行為方式，即人工制品在特定場景下的反應。
在《交互設計精髓4》定義為：設計交互式數字產品、環境、系統和服務的設計，聚焦于如何設計行為。
而在《超越人機交互》中則是指：設計交互式產品來支持人們在日常工作生活中交流和交互的方式，創造用戶體驗以增強人們工作、生活以及通信的方式，聚焦在實踐上，即怎樣設計用戶體驗。
交互設計即行為設計，關注于如何設計系統如何幫助用戶更高效愉快地達成目標。
僅僅知道是什么遠遠不夠，我們更要知道如何去分析一個產品的交互設計好壞。在這里，我提供兩個思路供大家參考：
上文提到，交互設計的對象是行為，而這里的「行為」可以拆分為 3 個部分：導航，輸入和展示。
設計要點：
例如：掘金的頂部導航，既體現出來了導航本身與包含內容的關系（導航的標簽是當前內容的概括），又體現出來了內容與當前頁面的關系（當前頁面是首頁下的一個子頁面）。
這里的輸入不僅僅指我們日常中的輸入，而是一個廣義的概念，將所有用戶向系統提供信息的方式統稱為輸入。輸入可以通過多種方式完成，包括輸入命令、按下按鈕、快捷鍵、甚至打手勢、語音等方式。
設計要點：
設計要點：
尼爾森十大原則由畢業于哥本哈根的人機交互學博士 Jakob Nielsen 發表，他提出十大可用性原則，用來評價用戶體驗的好壞，我們也可以以此為依據來分析一個產品的交互設計好壞。具體的內容網上有很多資料，筆者就不再贅述。
視覺設計即 UI 設計，負責產品的圖形、圖標、色彩、視覺風格等，從視覺層面把控產品界面設計，決定營造出什么樣的視覺體驗。
視覺設計的分析內容可以拆分為形、色、字、構、質、動。在分析時，如果是網頁端，可以借助瀏覽器的開發者模式或者谷歌瀏覽器的插件「VisBug」來詳細查看各個維度屬性細節。
圖標的圓角，卡片的圓角，icon 的風格與統一度（包括：視覺大小，線段粗細，端點類型、拐點類型等）
例如，同樣是頭像卡片，QQ采用了圓形來體現靈動輕盈的風格，而主打熟人社交的微信則采用了小圓角。
色彩分析包括用色規范、色彩搭配、層級等。在 B 端產品中，色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。
字體的屬性有字號、行高、字體、字重等。通過合適字號和字重可以對界面元素劃分視覺層級，幫助用戶識別。而在一些特殊的場景下，可以運用特殊字體來提高識別度和增加頁面美觀度。
例如：支付寶使用了常用的 Din pro 作為其數字字體，其他 APP 廠商也分別使用了特殊的數字字體。
此處的構是指頁面結構，分為層級和間距兩大部分。合適的層級和間距可以幫助用戶理解頁面，并給予界面呼吸感和通透感。
質感與風格、界面風格，投影數值，扁平還是擬物。
比如說相比普通的單層陰影， Ant Design 采用了三層陰影的表達方式，讓陰影更柔和，更符合真實狀態。具體可查看 https://ant.design/docs/spec/shadow-cn
最近幾年，越來越多的公司和團隊已經意識到動效在產品用戶體驗中的重要性，動效設計已經成為產品設計語言的重要構成之一。
動效設計并不只是為了修飾，使用動效不僅可以更清晰地體現內容元素之間的邏輯和層級關系，還可以提供當前的狀態反饋，加強用戶對操作行為的感知，給用戶以可控的感覺。
除了上述內容之外，我們在分析一個產品時還可以做以下兩件事：
在被問到「你覺得這款產品的用戶體驗好嗎？」時，我想大部分設計師同學即使做完了產品分析，也很難回答這個問題。那么，我們該如何做才可以較為準確地回答這一問題呢？
基于這個問題，我們從用戶體驗的定義出發，ISO 對用戶體驗的定義有著如下解釋：
用戶體驗，即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。
從定義可以看出，用戶體驗不僅是主觀的，而且范疇非常廣，所以在描述時，我們不能僅僅用好/不好來概括。要解決這個問題，要點在于建立一個清晰合適的標準來量化用戶體驗，體驗自查就是在做這樣一件事 —— 度量體驗。
通過做體驗自查，可以達成以下效果：
本質上，設計走查表通常是設計師在完成設計稿后，用于快速遍歷方案、修正遺漏或不周的工具。在產品分析中，我們使用這個工具也可以達成體驗自查的目標。通常，我們是需要根據產品建立一套適合自己的交互設計自查表的。如果暫時沒有，也可以暫時使用網上成熟的自查表來進行。
問題位置：
即體驗問題發生的位置。
類別：
不同自查表對問題的分類不同，例如用戶體驗五要素、可用性原則等。
重要程度：
如果采用正向思考，很容易陷入“都很重要”的困境，所以這里一般采用反向分析法，也就是如果不解決這個體驗問題，會造成多大的影響。我這里將重要程度分成了三個等級，分別是：
發生頻率：
同樣是三個等級，需要注意的是，這里不是以時間頻率來定義的，而是以「每經歷 n 次業務節點就會出現這一問題」的方式來定義的，如果不好量化，也可以使用每次，經常，偶爾這樣的詞來代替。
嚴重程度：
嚴重程度 = 重要程度 * 發生頻率
這里要注意的是，我們作為設計師，提出嚴重程度的判斷僅僅是作為優先級參考，但是真正的優先級和排期還是需要產品經理來做。
問題描述：
即對體驗問題的詳細描述。
首先，對問題進行重新審查和校驗，去掉非體驗問題、重復問題、補充不完整的問題描述等，然后整理到一起，這就是整個產品存在的大大小小、各種各樣的問題了。
然后，我們通過圖表對數據進行二次加工，一般采用雷達圖或柱狀圖。
示例 - 雷達圖的使用方式
嚴格意義上說，這并不是標準的雷達圖，只是使用了雷達圖的圖表背景。
外圈：上述表格中的「分類」
數值：上述表格中的「重要程度」
為每個模塊/流程各制作一張表，然后將每個問題都以點的形式置于圖中，哪個分類問題最多，哪個模塊/流程問題最多？哪些問題較為嚴重亟待解決？一目了然。
設計的本質是為了更好的解決問題，了解業務是解決問題的基礎，也是溝通順暢的利器。但是想要成為一個業務專家，沒有長時間的沉淀上是不太可能的，但是公司一般不會給很長的時間去學習業務，那我們該如何在短期內快速掌握業務知識呢？
在理解業務時遇到的最大挑戰就是那些晦澀難懂的特殊名詞，如 json 文件，API 等開發中特定的術語。
針對這個問題，在產品分析的過程中，我們可以同步建立一個專業名詞庫，來記錄這些特殊名詞，并將這些概念用自己的語言進行描述。這樣，在了解產品的同時也對業務有了一定程度的了解。
對設計師而言，相比 C 端的各種炫酷效果，B 端設計很難做的出彩，設計的價值更多是隱形的價值，基本不存在會有人因為你把一個按鈕做得好看夸你。從這個角度來說，確實成就感比較低。
但是，通過自己的設計讓幫助用戶更有效率地完成工作，這何嘗不會帶來滿滿的成就感？B 端產品一般是用戶不得不使用的產品，作為設計師的我們更應該對自己所設計的產品有著敬畏之心。
最后，給大家分享我很喜歡的一段話，與大家共勉。
本次的分享到這里就結束了，希望可以對大家有幫助。由于文章字數較多，筆者幾經修改，仍不免有疏漏錯誤之處，如發現錯誤，請讀者于評論區或私信指出，不勝感激。
在快節奏的洪流中，保持設計的初心，做有靈魂的設計，我們下篇再見~
作者：靳凱杰ah
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
刷刷手機看看今天又發生了什么熱點大事，已經成為現代人茶余飯后消遣時間的主要方式，而搜索熱點區別于其他社區類產品，最大的優勢是能夠把大家關注的事件始末及相關知識服務快速聚合起來，幫助用戶更全面的掌握信息。設計師作為連接用戶與信息之間的紐帶，在項目實踐中也進行了系列的設計探索，除助力平臺高效聚合呈現信息外，并以更豐富的設計層次詮釋熱點，幫助用戶更便捷的獲取所需。
我們先要去了解用戶是如何消費熱點內容的，基于用戶情景認知鏈路分析用戶在事件消費的鏈路，可以分為三個重要節點：1.熱點環境的感知；2.熱點事件的理解；3.事件觀點的產生。
結合用戶的消費路徑，我們將設計邏輯框架拆分為三個層級：
1.氛圍背景層：分層呈現熱度氛圍，輔助用戶感知熱點環境；
2.信息內容層：精細化拼裝管理，幫助用戶理解熱點事件；
3.功能互動層：輕互動玩法設計，激發用戶參與抒發事件觀點。
從氛圍表現層面，助力用戶更快速的辨別事件的熱度及重要程度。設計師結合搜索熱點使用場景以及業務時效性配置訴求，歸類了兩種設計表現層次：1.日常熱度氛圍 2. 大事件熱度氛圍
1）第一個層次：日常熱度氛圍
主要應用于熱點新聞場景，時效性要求高，同時事件熱度也會在：“發酵--爆發--消退” 間實時變化，設計根據熱度“強弱”程度需求，劃分兩檔視覺展現階梯，以自動化的方式展現，滿足熱度的實時變化需求，輔助用戶感知當前事件熱度?！暗蜔岱諊比鯓撕炘O計用以展現上升/今日熱點，“高熱氛圍”色彩背景通頂效果+上榜標簽用以展現上榜熱點。
如，“馬斯克收購推特”，搜索熱度持續上升，以第一階梯-標簽方式展示低熱氛圍；在 “馬斯克收購推特” 的事件熱度不斷增長，成為熱榜事件后，以第二階梯 - 高熱氛圍自動匹配 ，通過背景及榜單標簽的呈現，明確告知用戶當前事件的火熱程度。
2）第二個層次：大事件熱度氛圍
主要應用于熱點大事件或運營活動場景，個性化展現要求高，同時事件關注度及重要程度也不同，設計根據事件的關注度及重要程度劃分為兩檔階梯，以人工配置的方式展現，超強的運營氛圍，可以讓用戶充分感知當前事件的重要程度，“A級氛圍”頭部疊加場景元素設計用以展現大事件，“S級氛圍”整頁沉浸式視覺設計用以展現重大事件。
如，冬奧會，重大事件，選用第二階梯 S級氛圍，打造超強的運營大事件會場認知。
近幾年我們不斷的經歷各類突發大事件，如：疫情/暴雨/名人逝世等等，每次突然發生的事件都讓設計師措手不及，匆忙產出運營氛圍設計方案緊急上線，保時效就很難保障質量，因此我們在想能不能總結事件類型提前儲備設計，以備不時之需。
不同突發事件會牽動網友不同的情感情緒，比如河南暴雨，我們為受難同胞擔心，為救助工作加油，為逝者哀悼；火箭發射成功，我們驕傲喝彩；名人結婚，我們送上溫馨的祝福。不同事件帶來不同的情感情緒，也要求設計師要用準確的視覺語言表達。
因此我們在前置設計時也充分考慮了事件情感因素，通過對近一年突發大事件的歸類梳理，并推導不同細分場景下的用戶情緒，通過情緒分類的方式，總結兩種視覺設計表達形式：1.實景圖合成效果滿足嚴肅/莊重/權威場景情感需求；2.手繪效果滿足積極/歡快/慶祝場景的情感需求。結合以上思路我們共儲備6大類20個子分類場景的前置氛圍+金剛位等運營物料設計，保障突發熱點運營設計質效。
截至22年Q1，前置設計已在38個熱點場景應用：
為滿足用戶不同事件場景下的信息需求，設計結合百度搜索：主要內容區（主要需求滿足）+ 延展內容區（延展需求滿足）的綜合聚合能力，通過組件分區布局+精細化規則管理，為熱點場景內容的高效拼裝打好體驗基礎。
1）主要內容區
主要內容區，能夠幫助用戶快速了解事件的主題、時間及主要內容，結合熱點事件長期的需求沉淀，設計將主要內容區又細分為主題區域及內容區域。主題區域可承載拼裝事件主題、事件倒計時、會場分發導航等主題類組件；內容區域可承載拼裝圖文/視頻/直播等事件主體內容分發組件。通過不同區域內組件拼裝規則的制定，業務可以快速選擇所需組件進行頁面組織拼裝，達成分場景個性化滿足用戶主需求的目標。
如：元宵晚會，熱點主要內容區 以“ 晚會直播時間倒計時+ 各衛視晚會分會場導航+圖文內容 ” 組件支撐起重大晚會預熱期的事件主需求滿足。
因為有設計拼裝規則，不同大事件活動，各場景內容可個性化滿足需求，交互布局設計上又可兼顧橫向一致性。
2）延展內容區
延展內容區，能夠幫助用戶了解事件相關知識信息或提供事件相關服務。業務可根據事件場景需求，選擇多個延展內容模板與主要內容區進行拼裝，搭建完整頁面以呈現不同熱點事件內容。
如：俄烏戰爭-戰事場景，脈絡卡幫助用戶快速了解事件進展 ；冬奧會-賽事場景，數據卡幫助可視化呈現賽事進展；博鰲亞洲論壇-會議場景，百科卡幫助用戶科普相關名詞知識。
通過氛圍打造和內容組織，已經達成用戶需求滿足的目標，但到此截止，搜索結果的體驗還是理智疏遠單向的，搜索場景與用戶、用戶與用戶間也無法產生對當前熱點的討論與態度表達。因此設計師對用戶的互動行為認知習慣進行分析，并采取具體的設計策略逐步引導用戶參與互動。
1）互動喚醒 - 吸引圍觀增強互動意愿
優化前的熱搜結果頁，用戶的討論內容都是隱藏在資訊落地頁評論區內，需要點擊進內容落地頁內才能參與“圍觀”或“討論”，除互動氛圍已脫離當前場景外，也削弱了用戶對此事件表態的參與積極性。
通過彈幕滾動+輸入框組件組合外顯的交互設計方式，將用戶討論外露，不僅豐富熱點事件搜索場景的內容維度，同時基于從眾心理，進一步刺激用戶的參與欲望。彈幕結合事件類型配色來更好貼合熱點事件整體環境氛圍。
2）情緒抒發-輕互動玩法降低互動門檻
而投票表態+彈幕輕互動組合效果設計，能進一步降低用戶交互心理門檻，讓用戶動一動手指就可以參與其中。在表態/投票抒發情感的同時也可以發彈幕聊聊對當前熱點事件的看法，使用戶互動情緒表達更充分。
3）驚喜反饋-強化視效打造記憶點
原有設計風格，無法在去世祭奠、頒發勛章等莊重嚴肅場景精準的表達視覺情感，無互動反饋狀態僅有互動前后狀態變化。
結合熱點場景積極外放情緒及莊重內斂情緒，視覺主要從形/質兩個維度進行優化升級，并增加互動反饋動效，同時運營可結合具體事件主題配置，綜合提升互動驚喜效果，打造產品記憶點。
視覺層：通過更立體的形態和更豐富的層次質感，更精準的表達情感
動效反饋層：以主圖形+輔助元素，通過符合場景氛圍的動態效果設計，更充分的表達情感
運營主題配置：在日常反饋基礎上，增加運營主題配置層級，為特定主題場景提供定制反饋效果
通過熱點環境感知分層呈現、內容組件合理布局拼裝滿足等設計手段，助力搜索平臺以更高效豐富的內容展現形態應對全年3萬+熱點大事件運營。會場拼裝呈現系統的應用場景也在不斷擴展，如營銷活動、品牌造節等。設計不會止步于此，我們將基于用戶需求不斷探索深耕，為用戶呈現更快速、準確、全面、有溫度的搜索熱點體驗。
作者：百度MEUX
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
2022 年即將過半，疫情在家的我們重新花一些時間，回顧今年最引為人注目的一些設計趨勢，有些已經變成現實，有些可能即將會發生。在過去的這十幾年里，全國的互聯網和移動互聯網行業蓬勃發展，引發了 UX / UI 行業的火爆，無論是在設計技術方面還是在設計實踐方面維持著快速發展狀態。設計探索受到了前所未有的關注。創新也永不停止，正在向各個方向延伸——有的是曇花一現，有的是重塑想象，有的卻循環往復。
下面我們將更詳細地向你探討一些 2022 年的設計趨勢。
The Badass Project 搗蛋派計劃
過去幾年里，大字排版的趨勢越來越明顯，字體尺寸也在增加！接下來，字體更大且幾乎沒有圖像的時尚 英雄形象 網頁設計，將成為主流風格。
（英雄形象在網頁設計中是一個特定的網頁橫幅，通常是一個包含與內容相關的大圖像頁眉）
設計師和用戶都越來越習慣在登陸頁面前面和中心位置使用超大文字。無論是怪誕的無襯線字體還是現代奢華的襯線字體——這一趨勢就是在于越大越好。通過精心選擇的字體，網站可以做出比以往更大膽的宣傳，以吸引受眾的注意力并有效地信息傳達。
這些字體選擇通過 引人注目的動畫進一步生動起來。設計師正在實現通過鼠標移動或向下滾動頁面使排版移動并與用戶產生互動的創造性效果。以粗體、動畫和交互式排版為核心，許多網站也就不使用任何背景圖像，讓外觀變得干凈且精致。
MAFF
所以一定要試試這種趨勢：把文本尺寸放大，可以將其放置在一些圖像上，制作大尺寸的動態標題，讓用戶從中獲得樂趣。最重要的是，要勇于呈現大膽強烈視覺效果，從而可以立即吸引用戶的注意力。
案例：Medium 官網——https://medium.com/
Shakib - Sneakerbumb
在經歷了充滿不確定性和陰郁的兩年，我們學會了尋找和珍惜任何享受幸福的機會。我們大量獨處時光的花在了數字空間上，這一現象也不例外。
La puce à l’oreille
為了回應這一需求，設計師從 80 年代和 90 年代獲得了巨大的靈感；將色彩豐富、質感豐富、復古風格的主題與現代氣息結合起來，打造真實的外觀。鮮艷的色彩搭配柔和蠟筆肌理、古怪的排版、紋理豐富的背景、跨頁面網格的布局、非傳統的圖像和古怪的插圖，都可能會在接下來的一年吸引你的注意力。
Kristen Ryan for MakeReign
隨著這一切的發生，我們甚至可以說，在過去幾年里，每個人都學會了賦予自己一些自由的生活態度。這為我們提供了更多的實驗空間，當然也為設計和其他領域帶來了讓人愉快的成果。這就是說，設計師們覺得有必要從簡單和實用的用戶體驗轉向有趣、搞笑甚至愚蠢的交互。出人意料的是，讓別人微笑可能會是你的網站或 app 令人印象深刻的一種方式。
Blumenkopf
野獸派設計從 1950 年代的野獸派建筑運動中汲取靈感，延用其不修邊幅、毛糙粗狂的外觀形式，和故意做出的丑陋效果。就像在建筑中一樣，野蠻主義在網站中揭露和解構(甚至慶祝)這種媒介的底層結構和重要原則。原始、大膽和反動的本性使野獸派設計一直處于數字空間的邊緣，因為原始是互聯網的全部。然而，近年來，野獸派一直在緩慢而穩定地復蘇，現在被一些人稱為新野獸派。
Caroselling
隨著互聯網上干凈、傳統的網站越來越多，個人網站變得難以脫穎而出。轉向野獸派，提供真誠、原始但獨特的視覺體驗，可能正是提升你下一個網站的方式。
無網格布局，強烈的調色板，重疊的元素，擁擠和幾乎混亂的設計只是你的野獸主義工具包的一部分。將它們與等寬和奇怪大小的排版結合起來，缺乏或極少的導航，這相當于沒有額外的“空間”或子頁面的“開放式版面”，你會得到一個引人注目的粗野派外觀。
Work with us
案例：阿里云設計官網——Alibaba Cloud Design - Not Design Just Future
當然，還有更多，但野獸派網頁設計的定義規則是沒有規則；它反對既定的規則和慣例。更重要的是，你需要用更強烈的意義價值和意圖來將你的野獸派杰作與另一個設計糟糕的網站區分開來。
Messenger
Figma、Todoist、Slack和 Messenger 等網站和移動應用程序都把時間和精力集中在桌面客戶端版本。
Todoist
越來越多的應用程序似乎也在效仿，因為研究表明，這樣用戶會感到 更舒適、更安全。用戶希望自己的應用程序遠離互聯網瀏覽器，遠離所有打開的標簽，回到指定的應用程序窗口，讓人感覺更寬敞、更專注。在使用這些應用程序時，不需要處理數分散注意力的標簽，這無疑是一種進步！此外，將通知直接發送到桌面，我們的通知管理也必然得到改善。
Figma
為阿拉伯語國家的谷歌搜索頁面布局
用戶研究團隊利用 人類心理學 領域的洞察，以及 可用性測試，已經能夠塑造界面，為用戶提供最大的滿意度和愉快的體驗感受。幾十年來，這一直是用戶體驗設計的核心。
隨著技術的快速進步，我們看到數字產品體驗的保真度有了空前的提高。這一發展也為不同用戶群體之間的細微差異提供了新的理解。年齡、文化、地理位置、日常習慣、社會結構（以及其他因素）的差異可能會導致人們對什么構成令人滿意用戶體驗的期望存在顯著的差異。因此，這些體驗可能需要類似的設計，但肯定不是相同的設計方法。
隨著技術和研究方法的到位，我們開始看到一款產品的多種變體同時推出，以滿足不同用戶的需求。隨著許多大品牌都在努力擴大他們的用戶群體，創造本地化的產品體驗可能會成為一種大趨勢——如果不是標準的話。
NhuSW- Everyfit — Fitness for Everyone
包容性不僅是一種趨勢，也是一種運作模式；人類生存和共存是一個不可否認的重要方面。在日益全球化的復雜世界中，我們不斷意識到自己與其他個人或社群之間的差異。以同理心駕馭這些差異是我們的責任，并努力將所有文化、性別、性別、種族、能力和殘疾都有意義地適當地納入全球社會。
Spotify
隨著數字空間引領著世界的全球化，它也毫無疑問地成為我們包容性努力的前沿。人們總是希望品牌和公司采用更具 包容性的敘述 和語言，并向包容性的平臺、產品和服務 邁進。他們被鼓勵在圖像、語言和視覺語言中推動多樣化的表現，這樣做不僅僅是為了營銷收益，而是為了更大的意義和價值。
這些是我們在 2022 年會看到的趨勢和現象。記住，它們是為了提醒我們當前的總體設計趨勢?？梢允褂盟鼈儊碇С趾褪跈嗄脑O計決策，但不要害怕挑戰它們，或用它們為人們創造更多積極有效的體驗。
原文標題：UI/UX Design Trends of 2022
文章來源：Codeart
原創作者：Taras Bakusevych & Maja Mitrovikj
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
無論作為設計師還是普通瀏覽者，大家觀看一個網站時最先接觸到的就是網頁的頭部區域，這部分內容為網站的其他各個方面設定了基調，在網頁設計中起著非常關鍵的作用。
尤其是如今簡潔設計比較盛行，多數時候把頭部內容設計好就變成了吸引用戶眼球最好的辦法。網頁設計師在設計網站頭部時投入了大量精力，同時要兼顧創造力和實用性。根據一項Google的研究，用戶只需要短短數秒就可以形成對一個網站的看法，甚至有些觀點是在令人難以置信的1秒內形成的。用戶對品牌的了解就是從這么短的時間內開始的。
在通常網頁設計中，首頁上方的整個空間都被視為頭部區域。作為人們在加載網站后的最初幾秒內看到部分，頭部信息起到了一種邀請作用，它應該提供有關網站的基本信息，以便用戶能夠在幾秒內了解網站的主要內容。
如果以招聘活動站點為例，整個頭部區域設計要明確傳達企業形象，及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象，企業已向你發出邀請，我們對人才十分渴求，等等信息… 如果有線上線下活動同時參與，那么在整體風格上盡量保持一致。
網頁頭部的任務是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務等等。如果我們在內容上引起了用戶情感上的共鳴，那么就是正確的設計。
那么主要元素通常包括：
在設計網站頭部內容時，從思維層面來講沒有任何東西會限制你的創造力，它應該是令人難忘的、簡潔和兼具實用性的，是一個可以展示創造性的開放領域。
下面讓我們一起來看看頭部內容設計的一些技巧。
1. 關于尺寸
對于網頁頭部圖片的大小是沒有統一的答案。有時候設計師希望提供相對固定的數字，但網頁設計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經驗積累的常識規則。
頭部的高度本著不干擾內容感知的基本原則。對于一些展示信息資源的頁面，較小的頭部區域是一個不錯的選擇，而對于落地頁或者企業客戶首頁，頭部區域可能會更大，而且多數大客戶會有主視覺單屏展示頁。
如果某些網頁，例如落地頁頭部內容較長的情況下，最好在首屏給下一屏內容露出一些空間，這樣用戶就可以意識到下一頁還有內容，引導用戶滾動。
2. Logo展現
當一個人發現自己在陌生網站上，總是習慣于從屏幕的左上角開始瀏覽網站。盡管設計師有時候認為打破常規的布局也可以帶來不錯的效果，但是多數用戶如果他們常規位置找不到預期的信息，將會不假思索地認為這個頁面是難用的和不規范的，需要花費很多的努力才能理解。這就要看你的設計目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數受眾。
Logo ——與居中或右側放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側要低。
3. 吸頂導航欄
吸頂導航，換句話說就是「粘性標題」，當你滾動頁面時，導航區在頁面中跟隨，現在成為一個網頁設計標準。如果不違反網站整體設計理念，請將導航欄吸頂固定。無論是PC端還是移動端設計，這都是一個好的選擇：
可根據頁面內容展示要求，向下滾動時調整導航背景透明度，盡量少的影響內容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導航欄樣式或高度，使用戶能找到但又不過于搶眼。
總之，固定導航欄有助于提升用戶體驗，保持用戶導向并給予了他們更多控制權。
3. 關于圖片的應用
頭部內容所用圖片可以選擇直接和要表達的業務相關性很強的，例如招聘類網站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內容；
高質量圖片——攝影對于網頁設計師來說是一個強大的工具。它可以講述一個故事，喚起用戶的情感，并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網站，試著做一個透明的標題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業業務的出色照片，這種方式就沒錯！企業希望用戶可以滾動瀏覽一組精美的高分辨率圖像。
插畫——網站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯系。如果圖片是獨特的且易于辨認，即使是從網站標題中剪切出來，效果也會很好，可以利用當今的插圖潮流來實現這一點。
4. 視頻或動畫
當然我們也不能只關注靜態圖片，添加視頻也是最有效的網站頭部創意之一。如果可能的話，嘗試著在頭部內容中添加主題視頻材料，很多網站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產品。
△ 華夏幸福校招官網首頁動畫，撥云見日的效果加上中式剪紙風格的運用，將公司各業務線融合到幾個轉輪中，產生了故事性的動畫場景。
如果想要使設計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網站頭部內容變得非?？?。以每季校園招聘企業站點為例，各大公司對應屆生群體的追逐，很大程度上體現在對該群體審美和喜好的迎合上，年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。
當然不一定只有滿屏大型動畫，一般動畫越復雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時候我們可以根據功能不同，設計一些交互性的動畫，去提升客戶使用感受，盡量不影響網頁打開速度。
5. 移動端頭部設計
網頁頭部不可能只顯示PC端的網頁上，還應該正確顯示在移動端的網頁上。因此，在近年的設計中，網頁必須具有響應性，并且能夠很好地適應各種移動設備，這樣才能帶給用戶完整的設計體驗。
移動設備的日常使用廣泛性早已影響網站設計，即使在PC中，也有一些細節看起來像是面向移動設備的網站設計。例如，Banner和漢堡包菜單都起源于移動設計。
移動端有著與PC端不同的屏幕尺寸和操作方式，很多時候需要設計師在一開始就考慮到兩種界面的適應情況，比如在PC上頂部一條的導航，到移動端就演變為一個漢堡包菜單。而原本PC頁面中展開顯示的內容，在移動端會向下層延伸，首層界面成為一個內容聚合頁。
網站是以頭部內容為先導的，它就像是一張獨特的名片。因此，我們在設計網站時，盡可能最大限度地關注該區域。
最后還要提醒大家，一定記得定期更新網站頭部內容哦！以校園招聘大客戶為例，大多數企業都會在每年春秋兩季的招聘旺季更新其招聘主題風格，以保持網站的新鮮感和時效性。
以上只是在工作中的一些點滴體會，微不足道。感恩能在UXD集體中不斷成長。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
2020年已經過去一大半，這些時間以來，我一直在關注數字設計領域未來的設計趨勢。從年初就開始收集，到今8月份了，我想是時候將發現的一些趨勢風格分享出來，這些風格很有可能繼續延續到2021的產品設計上。
對于UI界面視覺趨勢，同樣需要我們高度重視。畢竟每年改版方向，視覺風格研究是必不可少的一個環節，下面正式開始。
今年在各網站上看到大面積的漸變色設計，相對前兩年來說越來越少，設計上有所克制。大面積的漸變色雖然視覺沖擊力強，但大部分停留在概念中。
從今年設計中我們可以看到設計更加理性與克制，將漸變色彩運用到關鍵功能上，突出強調重要信息。
機票選購界面，將漸變色運用到頭部位置去強調功能。
運用在功能卡片上，突出重點信息。
如上圖，設計上同樣只將漸變色運用在背景上，其他卡片上基本沒有漸變色。
幾何圖形設計是目前運用最多一個設計手法，今年發現一些比較抽象藝術化包豪斯風格幾何圖形，在UI設計中大量運用，且效果還不錯。
這種圖形帶來好處就是記憶性強，應用廣，它不僅可以拓展在品牌包裝，品牌圖形延展，還可以運用在UI設計中。
卡片設計采用一些具有意向符號的圖形，來表達功能的設計，形成記憶點。
品牌設計上，也是重復這種極簡包豪斯風格幾何圖形。將logo元素提取，進行包豪斯風格化，重復運用在設計中。
今年這樣的設計屢見不鮮，大量3D運用在界面設計中，二維的界面已經不再滿足當前設計需要。設計師去探索更多維度學科與UI界面融合，形成一種全新的視覺感官。
uber的概念官網就通過3D來呈現，表達功能亮點。
將二維世界三維化，將是2021年重要的趨勢。目前國內外線上有一些產品，開始在部分功能模塊使用這樣設計手法，如Naver，支付寶等。
可以說是趨勢輪回，毛玻璃的效果又回來了。這也是今年在各網站設計上出現頻次多一些的設計。
新的毛玻璃效果更加去注重功能說明，用在視覺強調的地方。
如上圖設計，毛玻璃運用在頂部關鍵信息上。這樣設計即可減少其他色彩運用，還可以對功能信息進行強調。
毛玻璃效果運用在個人中心，人物頭像位置，進行設計強調。
運用毛玻璃去包裝UI界面，可以提升品質感與神秘感。
將功能與場景融合設計，用戶在使用產品過程中，能產生更多情景體驗感觸。這也是最近今年喊的比較火的一種設計思路。在各網站上，這樣設計出現次數越來越多，設計效果沖擊力強，得到很多設計師的認可。
場景中關鍵人物元素與設計進行巧妙集合。
運用超現實設計手法，將人物與酒店場景進行排版布局。
將制作材料與產品集合。
擬真植物元素與土地進行巧妙集合，在視覺上傳達逼真效果。
雜志化設計風格鮮明，可以有助產品去打造強化記憶點。雜志化設計的優勢可以不受到網格約束，排版使用大字體，同時設計排版上更加個性。我們在做產品概念探索前期，可以多去嘗試這樣的風格。
擬物圖標又回來了，Apple新版本的Big Sur系統，就采用擬態圖標，這也是一個新的嘗試，當然也是一個開始。我們很有必要時刻關注這個趨勢，未來將會在更多設計中看到擬物化圖標的出現。
不過這種風格也不能大面積運用在界面中，我們可以運用在一些關鍵功能入口設計上。
在天氣上的運用，相對之前扁平化設計，目前具有空間的擬物化設計，增加了真實感。
圓形趨勢，我想大家也許會忽略的點，最近幾年設計中，圓形的設計無處不在。它的好處不言而喻，親和力強、場景覆蓋廣，幾乎任何設計都能去用圓形。因此我們有必要去注意圓形運用技巧。
星巴克的web UI概念設計，采用圓形與產品進行集合設計排版。
新擬態趨勢是2020年受到廣泛關注的趨勢之一，這種趨勢大量使用了柔和的陰影和微弱漸變，使設計既具有未來感又具有現實感，并且為熟悉的界面帶來了新的感覺。相對之前大面積濃厚陰影而言，目前新的簡化擬態界面，會克制使用這些元素。
2021年擬態界面，更注重功能與體驗。擬態效果會使用在關鍵功能上，如儀表、按鈕，又或者需要重點強調的地方，避免了大面積使用這種設計手法。
2021年的趨勢相對來說，有繼續延續2020年一些設計風格，這些風格將會在繼續加強，同時我們也有發現，目前越來越多3D元素與二維界面進行集合設計，能更生動傳達功能與將故事，2021年大家務必要注意這種趨勢的延續。
作為設計師，我們對設計的思考不能只停留在表象層面，而更多的需要圍繞信息傳達這一設計的本質功能，以充滿自省的精神深化和反思自己的設計意識，同時要時刻保持對趨勢的敏感度。將新趨勢合理的運用在產品設計中，以產生最大化收益。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
很多人很喜歡國外的極簡設計，先不看 Dribbble 上五花繚亂飛機稿，哪怕是博客編輯器 Wix.com 上的模板看著都很令人羨慕。為啥國外的網站都那么極簡，國內就學不來呢？
十年前，我以為這是因為國民審美和設計師水平沒上來?，F在，我發現這件事情沒那么簡單啊！假想一下，你去下一個國外的極簡 UI 模板來，把文字改成中文，評審時能過稿嗎？
我估計十有八九過不了，產品經理肯定有一大堆信息、功能和運營入口要塞進去。可這應該怪萬惡的資本主義，為了賺錢而不把審美自由當回事嗎？
尼爾森（Jakob Nielsen）和 Yunnuo Cheng 在 2016 年做過一次研究試驗，發現不光是中國的公司決策層，就連中國的用戶也未必就喜歡非常極簡界面。
這次研究中，12 個中國人和在中國生活的外國人（應該是歐美為主）被邀請來，在 8 個網站上完成簡單的任務，并且一邊使用一邊說出他們的想法和意圖（Think Aloud）。
P.S. 這 8 個網站中有簡潔的也有復雜的，對中國人展示中文，對外國人展示英文，以此形成對比。
很多外國人在使用較為復雜的網站時（被翻譯成英文的中文網站），抱怨比較多。他們在中國生活，對這種網站設計已經見怪不怪了。
雖然也有人說好話，稱贊信息展示明確直白，但也有人抱怨很難用的。至少大部分外國人對于復雜頁面的問題比簡潔頁面的問題要多得多。
而相比他們，中國人普遍不覺得那些復雜頁面有什么特別的，因為那些很“普通”、“正?！保踔痢皞鹘y”。
相反，抱怨簡潔頁面難用的反倒更多，例如：
“單從設計角度來看，圖標、圖片、布局都很好，符合很多人，至少年輕人都喜好。簡單、干凈，既沒廣告，又沒有無用信息。但問題是，它也沒什么有用信息——我在這些網站里看不到什么有用的東西。所有的功能介紹都只是在玩文字游戲，沒有實際含義，沒點真實內容?！?
P.S. 以上是從英文資料的翻譯。
中文的信息傳遞效率就是比英文高，我們也早就習慣了這一點?！堵摵蠂鴳椪隆繁环g成六種語言，其中就數中文最薄。
2017 年，Twitter 把原有 140 個單詞的限制放寬到了 280，卻唯獨沒有把這改版提供給中文、日文和韓文，理由就是語言密度足夠大了。
所以說，中文用戶對單頁信息量要求更高，這就是很正常的事了。
同樣的一句話，雖然中文更簡短，但是視覺密度更高啊。
會點排版的人都知道，視覺密度的節奏很重要，要全局考慮的。如果有一個地方的視覺密度比較高，那么整個頁面的視覺密度都要匹配上才能和諧。否則一下子太疏一下子太密，就會喪失統一感。中文的間隙和比劃之間的間隔都比較小，也注定了頁面的其它部分為了匹配上這個節奏，不能太疏。
這就是為什么，把一些英文板式直接拿來填充中文會很奇怪。難怪我去一些繁體中文網站時，會感覺比簡體中文網站更復雜擁擠。其實咱們大陸地區由于使用簡體字，視覺密度已經比繁體字要松很多了。
說到這里，不是要為一些又復雜又不好用的設計進行辯解。只是說，簡潔并不代表好用。當我們隨口說出“少即是多”這種設計概念時，也不可忽視，凡事都有個度?？吹絿饽欠N極簡設計時，也稍微自信點，簡潔并不是我們唯一追求的方向。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
動態設計（Motion Design）有助于創建令人愉悅且直觀的用戶界面。好的動態設計，不僅能引導用戶對數字產品的體驗，還可傳達有關產品的品牌信息。本文將介紹近來最流行的動態設計趨勢，這些令人驚艷的動效表現手法，在不久的將來勢必席卷所有人的目光。
動態能激發用戶的情緒，為靜態的視覺設計注入活力與生命力。有趣、奇妙、吸引人的動態，能讓你的產品展現與眾不同的魅力。另一方面，動態有助于支持可用性，通過自然流暢的物理運動，突顯元素在過渡時的關聯性與狀態變化，增強用戶對產品功能的感知。
因此，動態設計必須是有意義的，同時兼具可用性與美感，UX 行業也將動態設計視為多學科的交集，細分成一個專業的設計門類。作為 UI 和 UX 設計中重要的組成部分，動態設計從三個層面發揮影響力：
提高連貫性（Increase Continuity）
讓界面元素在用戶流程中順暢地轉變與過渡，將用戶操作導向期望的任務結果。
連接場景（Connect Scenes）
在轉換場景的過程中扮演潤滑劑的角色，闡明場景之間的位置、層級與空間的關系。
視覺吸引（Visually Appealing）
聚焦用戶視線，將其注意力放在重要的事情上，從而起到信息傳達、提升識別度的作用。
植基于 UI 和 UX 設計而發展的第三維度，動態設計的趨勢自然與兩者密不可分。綜觀近年，多數作品巧妙地運用絢麗的動態圖像（Motion Graphics）與動效設計，讓新的視覺手法得以表現更為出彩。再者，隨著移動端芯片性能提升，跳脫二維平面的表現形式不再難以實現，讓設計師能夠解開束縛，發揮無限的想像空間。2021 年的動態設計可歸納為三個趨勢：
增強表達（Enhance Expression）
運用引人注目的表現手法將信息傳遞給用戶，包括變形、動態文字和背景動畫。
創造層次（Create Hierarchy）
在視覺平面中創建空間層次結構，遮罩與視差是常用的表現手法。
擴展維度（Expand Dimensions）
突破二維限制，將界面元素多維化營造空間感，例如 3D 動態圖形和攝像機運動。
變形創造了一種連續的敘事狀態，告知用戶元素的狀態或作用發生變化，是一種最引人注目的表現手法，能將形狀、圖像、色彩無縫地融合與過渡。
動畫插圖 Animated Illustrations
2021 年看到許多有趣、吸引人的插圖，而更多的設計師開始為靜態圖像添加動態，也讓 GIF 和動畫插圖越來越受歡迎。
動畫插圖看起來更生動，并帶有敘事性質。在示例中，運用動畫插圖來呈現這杯果汁是由哪些水果打成，比起文字描述更能吸引觀眾的注意力。
by Lobster
通過動畫插圖來呈現同一系列的轉變，有利于延續外形上的特征，讓不同的物體具有連結性。比如從桌子、衣柜到燈具的連續變化，同樣風格的系列家具利用動畫來體現一致性。
by Graceful illustrations ?
流體動態 Liquid Motion
動態的有機形狀，包括流體、煙霧和火焰等粒子效果，能夠極大地增強視覺效果。流體動態并非明確的過渡與場景轉換，而是顏色在流動的液體中擴散，進而創造出抽象或真實的視覺形狀。這種風格能實現無縫過渡，并為設計增添有機感，也是 2021 年最引人注目的動畫趨勢之一。
運用流體動態來展現抽象的有機體，除了輕易地攫取受眾目光，還讓人不自覺地佇足在畫面上，感受流體變化的韻律與美感。這類動態設計可作為烘托主題的背景動畫，或是吸引目光焦點的主角。
by ?anton mishin?
流體動態運用到網站設計所營造的視覺沖擊力更為驚艷，能為用戶帶來獨特、新鮮的視覺感受， 使得流體動態深受風格前衛的設計師喜愛。網站還能利用鼠標懸停與流體進行互動，因此會在許多特效網站見到流體動態的蹤跡。
by Gilles Tossoukpé
動態漸變 Dynamic Gradients
扁平化設計缺少現實質感的元素，搭配漸變色能有效緩解不足，為設計創造深度與層次。變化中的漸變色同時帶有動感與舒緩，充滿活力卻又平靜。使用動態漸變能讓設計師展示一系列不斷變化的情緒，許多內容創作者和品牌已經注意到這一點，開始在廣告活動、識別設計和數字內容使用動態漸變。
by Pixelz Studio
微交互 Micro Interactions
在用戶體驗設計中微交互變得日益重要，而動態設計正是微交互的靈魂所在，即使只是微小的視覺提示或反饋，都是人機交互易于使用的關鍵。從經典案例來看，微交互的動畫細節必須帶有明確的目的性，讓用戶獲得實時反饋，指導用戶進行下一步。從近幾年的設計趨勢來看，微交互已成為不可或缺的存在。
by Илья Бабушкин
by Google
動畫商標 Animated Logos
過去幾年動畫商標是最流行的動畫趨勢之一，通過各種視覺效果，設計師能創造出不同類型的動畫商標，許多企業開始采用動畫商標作為吸引注意力的手段。多數情況下，商標是進入網站時最先看到的東西，因此商標應該令人難忘、引人入勝，并使用符號或排版來揭示品牌個性。結合動畫的優勢，設計師可以運用一些動態或效果來講述簡短的故事以強調品牌特征，并為靜態排版和商標注入一股活力。
by Yulia K.
by Meta
動態文字是使用移動文本來吸引注意力的動畫技術，許多卓越的品牌在網頁設計中使用動態文字，為網站外觀增添動感和視覺沖擊力，是近年 UI 動畫的趨勢之一。
設計師使用動態文字為單詞或句子添加生動的元素，借此定下情緒氛圍與設計基調，吸引用戶的注意力。幾種常見的表現手法，擠壓和拉伸一個詞能會喚起一種俏皮感，而連續重復這個詞則具有催眠感和前衛感。另外，使用大號和粗體字體來增強份量以強調某些信息，也是動態文字的特征之一。
無論在電商網站、電視廣告或音樂視頻，動態文字都占有舉足輕重的地位，有利于加深用戶對品牌的關注與印象。
by HOLOGRAPHIK®
by Hrvoje Grubisic
通過背景動畫來強化敘事，成為許多行業常用的品牌傳播手段。你可以創建動態的品牌故事，展示有趣的制造過程、產品的使用場景。背景動畫深獲大眾喜愛，它能讓用戶在進入登錄頁或網站首頁時，輕易地了解更多有關公司或產品的信息。調研顯示，從銀行、醫療保健公司、電商零售商、餐館到 B2B 供應商，這些跨越不同細分市場和行業的網站都開始使用背景動畫。
by Carlo Soleri
by Kirill Zhukovsky
遮罩過渡是將幾何或有機形狀作為銜接下個場景的遮擋物，等同于舞臺幕布設計，能在界面元素進場或退場時創造連續性效果。這種表現手法簡潔高效，是最常見的過渡動畫之一。
切換場景 Scene-Switching
其中一種遮罩過渡，是將當前場景完全置換，如同揭開蒙在上層的布，逐漸展露疊在下方的景，并利用景物相似性和動作延續性，讓兩個場景能夠順暢地銜接，不致于差異過大，造成用戶心理負擔。
by intent
by Minh Pham ?
狀態變換 State Transformation
另一種遮罩的表現形式，較無明顯的場景過渡，而是利用遮罩來表現景物的狀態變化，界面元素和布局基本保持一致，以此塑造無縫過渡的視覺效果，這種手法被廣泛地使用，例如氣候變化、人物換裝、產品組合等。
by Daniel Tan
by Outcrowd
視差是利用不同的界面元素以不同的速率移動，創造前后景深的分離效果，借此在平面中塑造空間層次，已成為網站首頁最為普遍的表現形式。
視差之所以能形成一股風潮，廣為各個行業所接受，一方面是信息層級更加清晰，明確定義各種元素的關系，讓用戶專注于主要操作和內容，將背景或非交互元素往后退，同時保持設計的完整性。另一方面是豐富的層次變化，當用戶滾動或滑動時，能在扁平化界面拉開空間關系，利用不同的速率和縱深，塑造多層次的感官體驗。
by Studio V?R
by Studio V?R
近年來，結合 3D 動態圖形的界面設計呈現爆炸式增長，雖然創建 3D 動畫需要更多的時間、技巧與協作，但不可否認的，3D 動畫比 2D 圖形更加逼真，從而提供更具吸引力和互動性的用戶體驗，并有效地展示品牌的活力。
更生動的表情 Lively Emoji
動畫的吸引力在于能夠創建各種角色，并為無生命物體注入生命力，表情符號就是一個很好的例子。作為獨特的網絡語言，表情符號生動地描摹日常面對面交流的非言語信息，隨著圖形界面的設計趨勢逐漸結合 2D 與 3D，運用 3D 動態圖形來創造更加動感、擬人化的表情，能讓這些非言語信息更加豐富，有機會引領下一波風潮。
by Outcrowd
營造空間感 Spatial Awareness
3D 動態圖形為平面設計建構了空間敘事框架，在扁平化界面中展現立體感，從而表達空間中元素的位置與層級關系。多維化的發展趨勢，推動了視覺表達形式的演變，空間感讓界面設計更符合人類的認知邏輯，運用各種 3D 運動特效，包括旋轉、翻轉、折疊、透視、Z 軸位移等，打造令人難忘的感官沖擊。
by UI8
by Bruno Ortolland
擬人動畫 Anthropomorphic Animations
擬人化能讓物體、植物、動物等非人類事物，表現出人類屬性的行為與狀態。動畫片運用擬人的手法是最普遍的，1927 年迪士尼第一部系列動畫《幸運兔子奧斯華》的主角便是擬人的兔子形象。由于人們容易被以人類行事的事物所吸引，越來越多設計師在界面中添加擬人元素，利用這種效果讓畫面更加生動有趣，增強用戶體驗的愉悅感。
by Gregory Riaguzov
在動態設計中，攝像機運動是最自由、靈活的一種表現形式，能讓畫面過渡更有張力，突破 2D 平面在視角上的限制，創造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機運動，包括推近、拉出、平移、跟拍等方式，備受動態設計師青睞，讓用戶以多變的視野探索數字產品。
推近/拉出 Dolly In/Dolly Out
推鏡頭是指被拍攝的對象不動，攝像機由遠而近，朝著對象不斷推進， 用來突出人或物的主體。鏡頭推近的運動方式，用來呈現從整體到局部、由分散到集中的變化，引領用戶進入故事情景，給人一種身臨其境的感受。
相反地，拉鏡頭則是將攝像機后退，使畫面逐漸遠離被攝主體，側重的是從局部到整體、由點到面的轉變，強調主體所處的空間環境。隨鏡拉出的景象，能激起人們無限的想像。
水平/垂直移動 Truck/Pedestal
水平向左或向右，垂直向上或向下移動攝像機，使畫面不斷變化，讓用戶跟隨鏡頭視角一起移動，產生一種置身其中的感覺。這種運鏡方式，通常用于具體的場景，利用角色或景物的延續性來消除場景過渡時的邊界，表現出一種流動感，無論是手勢滑動或鼠標滾動都能有順暢的操作體驗。
結合多種運鏡 Multiple Camera Movements
運用多種攝像機運動相當普遍，既能擴大視野，又有很強的空間感，可以更加自由與多樣地展示不同視角和情景。比方說結合橫搖（Pan）、直搖（Tilt）和跟隨（Tracking）鏡頭，連續而詳盡地展示一個產品，由于畫面始終跟隨一個主體，有利于突出產品特征，并讓用戶從不同的角度和距離觀看產品，是一種增強臨場感和參與感的有效方法。
一鏡到底 One Shot
在電影中為了不將觀眾的情感和注意力割裂，使用一個鏡頭來完成全片的場景刻畫和敘事，這種拍攝手法被稱作一鏡到底或長鏡頭。連續鏡頭逐漸被運用到界面過渡，以此增強操作過程的流暢性，例如一氣呵成的購物體驗，或是貫穿全場的人物角色，其特點是給用戶最沉浸的感官體驗，無間斷地體驗整個流程。
動態設計作為近年熱門的創作形式，廣泛應用到各個領域，逐漸成為設計的主流趨勢。受益于技術演進與發展，從創意生產到落地實現，動態設計的門檻不再遙不可及。設計師得以將想法轉化為生動、有趣的作品，并有機會創造新的表現手法，玩出許多新花樣，成為 2021 年動態設計的特色。
本文歸納的設計趨勢，有助于啟發設計師對動態設計的想像，激發更多創作靈感，為靜態界面賦予靈魂，打造令人難忘的視覺體驗和品牌形象。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
20 世紀末到 21 世紀開始，宣傳品牌與產品的陣地不再局限于印刷品，電視、電臺及現場活動，而是出現了網站，網站可以鏈接更多陌生人，而且沒有時空限制。
1997 年的谷歌網站
美國最火的設計風格只要有人將資料放到網上，遠在日本的一名中學生都可以去學習了解，所以也打破了過去信息差的優勢。本回我們要跟大家聊聊網頁設計的發展，但在展開內容前，要搞清楚一個問題，就是網頁設計屬于平面設計嗎？
國內早在差不多 20 年前，建站公司就開始獨立存在，所以這個問題蠻有爭議，尤其是 UI 設計也很成熟之后，大家更愿意認為此學科是獨立的。
中國建于 1994 年的第一個網頁，主要對外溝通
平面設計的定義不管怎么粉飾，簡單而言就是：以某種目的，將文字、圖像、圖形安排在一起。網頁設計也是如此，唯一區別是網頁具有動態，但這種動態屬于若干個靜態設定的切換關系，其關鍵幀也是平面設計。
2003 年時候的淘寶網
我在國內蠻早就從事網頁設計工作，早年甚至可以自己獨立完成網站，除了頁面設計，還包括套 ASP 程序（Active Server Pages 動態服務器頁面），用 table 布局前端等，當然這些技術如今早已過時。
12 年前史太濃獨立完成的網站
因此這段歷史我就是參與者之一，所以本回不僅是對搜集資料的剪裁分析，還會結合不少自身經歷體驗跟大家分享。
首先我們來簡單回顧下互聯網的發展與網頁設計的演變。
互聯網發展到如今已經像空氣一樣存在，斷網已經如同缺氧那么嚴重，而互聯網的誕生最初跟兩件事情相關。
第一件大家也許比較熟悉，就是在 20 世紀 50 年代末美國國防部高級研究項目總署（the United States Department of Defense，Advanced ResearchProjects Agency，簡稱 ARPA）成立了。
美國國防部高級研究項目總署 logo
其成立的根本原因是冷戰背景下，蘇聯不但先于美國在 1957 年將衛星送上太空，而且世界第一枚多級遠程彈道火箭發射也試驗成功，因此蘇聯宣稱可以將核彈送往地球任何地區。這對美國而言實在太嚇人，所以 ARPA 是一個專門研究國防技術的“事業部”，聚合美國當時最牛的幾百位科學家，研究如何將最先進技術應用到美國國防。
人類第一個衛星由蘇聯在 1957 年發射
由于這些科學家當時分散于全國各地，因為如此厲害的科學家肯定本身有重要事務，而不是放著隨傳隨到，因此大伙無法專門聚在一起專門干這事，而是遠程協作，所以就需要一個有效的遠程溝通工具。
這個工具不能只局限于語言聲音，還要做到資源共享，更關鍵的是要高效安全，信息不可被盜取，當時負責研究此事的人是麻省理工科學家約翰·利克利德(John Licklider)。
麻省理工科學家約翰·利克利德
此處省略一堆過程與專業技術術語，反正如此這般，利克利德因為 ARPA 組織這個溝通交接需求無意中發明出“國際互聯網網絡”（the World Wide Web）。
互聯網時代開啟
事后證明，國不國防是一回事，這才是他們最偉大的發明。這種技術能做到資源共享與防止盜取的一個重要原因是可以將信息分解成“數據包”，將他們發送到目的地后可以重新組裝，也就是“分組路由”的雛形。大家了解到這個程度就可以了，再往深里說意義不大，況且我也說不清楚，
而時間很快去到 1987 年，這是第二件事情，這一年蘋果電腦公司向外界報道了一款可在網絡上尋找資料的軟件，名為“超級文件”（Hypertext）。
蘋果 1987 年的“超級文件”軟件
比如在電腦上打“設計史太濃”就可以將當時整個網絡與此相關的文字內容集中起來（當時網絡上的內容其實非常有限），等于是谷歌百度的前身了。
后來這個軟件進化為“超級媒體”（Hypermedia），除了可以檢索文字，還可以找到圖形、聲音、電影及電視圖像。
蘋果軟件“超級媒體”軟件
再然后，蘋果公司將這種技術跟日本索尼公司發明的 CD-ROM（compact disc read only memory，于 1982 年發明）進行結合，變成“互動光盤”，這種光盤就等于是如今網站的鼻祖版本了。在大致容量 600MGB 的 CD 中，蘋果公司的工作人員往里面塞進了文字、圖形、動畫，而且形成一個復雜的索引架構。
CD-ROM 中的互動界面
這樣一來就形成一個靈活且可互動的內容庫，大家可以根據需要選取想看的部分，有首頁、二級欄目、三級欄目、內容詳情頁等。在此過程中還發明設計出一些后來常見的網站架構邏輯，比如“平行文本”、“多層”“矩陣”“網絡系統”等，這里作很簡單的介紹：
平行文本就是可以在看一篇文字時候可一邊看到它相關的摘要跟縮寫，這等于如今的鼠標經過效果。
網頁中的“鼠標經過”效果
多層就是看一個內容的時候可以看到其它相關部分，等于如今網站中的“相關推薦”。
網頁中的“相關推薦”效果
矩陣就是將資料布局到一個網格中方便大家查詢，等于現在的產品系統，新聞系統一類。
網頁中的“產品系統”效果
網絡系統就是可以聯系外部信息，其實就等于友情鏈接一類了。
當時間去到 1991 年，美國政府開始投入資金將“互聯網”引入公共學校，而經過 6 年，世界上就有 3000 萬個網絡用戶，2000 年左右，美國就有三分之一的家庭實現了聯網。有流量就有商機，于是就有人將“互動光盤”這樣的呈現方式搬到互聯網上變成網站，變成一種宣傳展示的渠道，不亦樂乎。
90 年代可口可樂的官網
所以最初的“互動光盤”設計其實就等于第一代網頁設計。
1994 年時候，中國有個人因為公務出差去美國見證過互聯網的神奇，回國之后辭職，在 1998 年創立了一個如今市值 1.8 萬億的公司—阿里巴巴，這人就是馬云。
阿里巴巴早期的網頁設計樣式
20 世紀 90 年代恰好是網站建設數量急劇暴增的時候，充滿了商機，大家可以理解為近幾年短視頻暴增一樣，根據回顧統計，在 1997 年時候僅僅一年美國本土就新增了 80 萬個新網頁。
所以用“網頁”一詞是因為最初蠻多網站都是靜態，網站后臺是后來慢慢才發展形成。
1997 年時候的麥當勞網站設計
但網頁設計最初的暴增還沒有直接為平面設計師創造崗位，因為第一代網頁設計師其實大部分由程序員轉型而來。后來不斷發展競爭升級才將程序、前端、網頁設計及推廣優化這樣的崗位分來，以便有更專業的表現。
我在 2010 年時候開始從事網頁設計，恰好是一個將網站建設不同崗位獨立出來的時代。當時我所在公司中企動力屬于國內最大型建站公司，大部分老同事都曾經是程序前端設計甚至推廣這樣一條龍為客戶提供服務。
史太濃在 2010 年前后的網頁設計
他們本質上就是從一名開發人員入行，所以他們會從實現效果端來規劃設計，跟后來網頁設計崗獨立后完全不同。蠻多網頁設計師其實根本不管程序實現問題，也因此產生出更多更好的視覺效果，反推程序開發與前端制作的進步。當時在公司經常見到的就是網頁設計跟前端或者開發同事“干架”，爭論要點就是很多效果程序根本做不出來。
史太濃在 2010 年前后的網頁設計
這樣的事情其實一直在全世界發生，所以網站制作技術也是以飛一般的速度在發展。比如我剛剛學會 Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起來，而程序開發端則是 asp 到 asp·net 到 php 到 java 等不同開發語言在不斷進化。
史太濃在 2010 年前后的網頁設計
這樣的變化結果就是不斷優化網頁設計的表現效果。
那時候我們往往在掌握一門自認為很牛的必殺技后不到兩年就也許會過時，最典型例子莫過于 Flash 的“死亡”。2010 年前后，懂得用 fash 建站的人非常吃香，因為人才稀缺，收入可以是我們的 2-3 倍，那時候最流行就是用 flash 做所謂的“體驗館”。
全 Flash 網站
“體驗館”的大致效果就是能在網站場景中做一些換部件，換顏色，或者點擊指引箭頭切換畫面等操作。印象中當時有一個奢侈品平臺站就是純 flash 網站，開發制作費用高達 300 多萬。
但好景不長，因為智能手機的崛起與 4G 通信技術的發展，互聯網的主陣地慢慢往移動端遷移，而智能手機中的瀏覽器是明確不支持 flash 組件的。所以很快 flash 就跌落神壇，而我們這一代網頁設計從業者可以說見證了全過程。
全 Flash 網站
當時身邊就有同事因為精通 flash 被挖去甲方企業開發純 flash 的眼鏡商城，據說后來項目就沒發展起來。
說到商城，網頁設計還有一個重要的主題變化，就是從企業網站到平臺網站到電子商城再到手機網站，App 應用，公眾號，小程序這樣的不斷切換。到了移動端其實網頁設計就被“UI 設計”（User Interface 用戶界面）這樣更專業化的稱謂取代。
史太濃 2013 年前后的 UI 設計
因為革命性的屏幕觸摸技術的誕生，很多網站本身就可以通過觸屏控制，所以從定義上來說，UI 設計可以說包含了網頁設計。
史太濃 2013 年前后的網頁設計
隨著移動互聯網的不斷發展其實也拔高了 UI 設計門檻，因為要考慮很多交互體驗問題與技術規格標準，有點像當時烏爾姆學院做產品設計那一套，有很多理科屬性的知識融入進來。
所以網頁設計經過僅僅 30 年的發展，就走向細分領域的拆解，分裂出企業網站設計（偏向品牌與廣告）、電商設計（偏向營銷）跟移動端設計（偏向交互體驗）。
史太濃 2018 年前后的電商網站設計
但不管如何，這個過程中平面設計的本質屬性仍然沒變，只是要解決的問題更多元化，更具體了。
根據歷史紀錄，美國的設計師杰西卡·哈芳德（JessicaHelfand）是較早以平面設計師身份參與到網頁設計中的，比如 90 年代她為美國“發現頻道”設計了網站。
美國“發現頻道”90 年代的網站
哈芳德生于 1960 年，目前還活躍于設計圈，她也許是最有資格感嘆互聯網設計形式劇烈變化的人之一。
杰西卡·哈芳德
本期內容沒有談及太多具體人物及作品，因為在有限篇幅里本期內容已經高度濃縮，更多是在給大家整理一個框架。
關于網頁設計發展的經歷，也歡迎大家根據自己的體會參與到討論中，說出你們的故事。
本期故事講到這里，感謝各位，下期再會！
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
移動端網頁在今天雖然已經變得越來越重要，但我們在日常使用中依然會遇到一些糟糕的頁面。近日，開發者Umer Mansoor就總結了開發移動網頁時應該避免的“七宗罪”。
在移動端方寸地，有細節才能抓住用戶，可以參閱這《60個以小見大的設計細節！》，保證會學到很多。還有，記得不要犯《ANDROID應用中十大常見UX錯誤》
眾所周知網頁加載速度是網站性能的一項重要衡量指標，畢竟很多時候用戶并不總是在WiFi狀態下瀏覽網頁，所以加載緩慢無疑是移動頁面七宗罪之首。移動網頁在設計時應該避免集成過多高分辨率的圖片以及累贅的腳本文件。
當網頁映入眼前，凌亂的文字排版當然也是訪客難以忍受的。就像人們在現實生活中傾向于和思路清晰的人交流一樣，當用戶和網頁“交流”時也希望能快速找到自己需要的信息。所以雜亂的排版同樣是移動網頁應該避免的設計誤區之一。比如Eurosmartz的移動版完全不像是為移動設備設計的網頁。
隨著移動設備性能的提升，很多移動網頁設計者傾向于在移動端堆疊更多的內容，這時導航功能就變得必不可少了。可諸多移動頁面在設計導航功能時又沒有足夠重視其可操控性，比如按鈕太過緊密、鏈接間距過小、菜單過于隱蔽等等。各種社交網站的點贊功能尤其容易在滑動網頁時誤點擊。蹩腳的導航無疑嚴重影響了用戶和網頁“互動”的過程，以至于有些用戶要“抱怨”自己手指太肥。
某些時候我們可能會遇到一些桌面端和移動端頁面風格差異巨大的站點，比如Toybox。一些對此站點不熟悉的用戶在從Toybox的桌面端跳轉到移動端時，也許很難意識到這是同一個網站的兩個不同版本。雖然Toybox桌面端的動態效果挺好，但這種會給用戶造成極大困惑的設計明顯難以得到用戶的喜愛。
網頁彈窗在桌面端已經令用戶厭煩不已，可不幸的是一些移動端的網頁設計者還是把其帶到了移動頁面上。毫無疑問由于移動設備屏幕尺寸的限制在移動端彈窗明顯會有更好的傳播效果，但無疑也會遭受到用戶更多的厭惡。
當用戶使用iPad訪問某一個網站時將其自動重定向到適配iPad的版本，這聽上去的確是一個好想法，可在實際操作中一樣會遇到問題。比如當一個網站的移動版由于以上的種種問題讓用戶感到難以接受而想切換回桌面版時，自動重定向基本上讓用戶陷入了死循環。此外由于重定向而導致瀏覽器無法打開網頁的現象也時常出現。所以在使用自動重定向功能時應該三思而行。
作為用戶當然可以理解網頁開發者在頁面上設置一些廣告，可橫幅形式的廣告無疑應該被歸為“七宗罪”之一。從互聯網的發展歷程來看，橫幅廣告的思維好像還停留在1999年，可現在已經是2013年末尾了。
總結看來，Umer Mansoor列舉了頁面加載緩慢、排版凌亂、導航功能不易使用、桌面端和移動端頁面風格差異巨大、彈窗、自動重定向、橫幅廣告共七種讓移動頁面體驗糟糕的“罪惡”。如果自己設計的頁面中包含這其中的某些項，也許是時候考慮做一些改進了。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
提到網頁設計，最先想到的是當今主流的韓國設計和扁平化設計，當然個性化排版、視頻代替文本、全屏大視野、滾動視差、多平臺全適應等設計形式已經進入了我們的視野。西方簡單、功能性的美學精神”少即是多”這一設計理念攻占了我們的大腦，很多時候，在開始做設計之前腦子里會來回浮現這些風格的設計。那么，怎樣在主流設計方式中做出有自己特色的網站呢？我們從以下幾點介紹在大環境下提升網站設計形式的方法。
那么，怎樣在主流設計方式中作出自己的特色呢？我們從以下幾點介紹些提升網站設計形式的方法：
在眾多的設計師追逐主流風格的同時，民族文化感覺的設計越來越少，不光在國內，在世界各地都出現了這樣的情況。當然不可否認還有很多設計師在為民族設計而努力。下面這幾個站點雖然只有簡單的設計和動態效果，但是卻有一種非常淳樸的民族風格，這也是最吸引人的地方，每個細節都流露出民族的特點和氣氛。不是只有文化性質的網站才能賦予文化設計風格，在商業產品類型的設計推廣中同樣適用。
日本眼藥水網站，將現代工業社會的產物與傳統鬼神文化中的五種妖怪以卷軸、插畫傳統形式展示，與漫天遍地的明星代言廣告形成對比，同樣是眼干、眼澀、眼疲勞，同樣是以辦公室、上班族為消費群，文化創意上的突破使人眼前一亮。
(小編按：那個妹子是我的女神橫山美雪，嗎？)和風服裝店，日本特色的風鈴、簡約的插畫，”和風”，大和民族追求與自然的和諧之美，從這個服裝網站上我們可以看到日本設計文化體現了對自然的尊重，反映了樸素美學的內斂性格。
緬甸傳統舞蹈音樂合奏網站，緬甸古代戲劇舞蹈，是從緬甸傀儡戲、古典戲劇及阿迎舞等古典藝術中產生的?？軕蛑械囊恍┕澞亢透鞣N傀儡角色的不同的舞蹈動作被大量移植到現代緬甸舞中?？芪柚小笨懿健?、”傀儡爬跳”等成為現代緬甸舞的基本動作，是文化多樣性的輝煌繼承。黑白圖片和大面積留白的海報設計形式，突出舞蹈者主體，用在網站上更顯神秘。
http://www.itwillbeastounding.com/
俄羅斯莫斯科大劇院是莫斯科的地標性建筑之一，是莫斯科有名的芭蕾舞與歌劇劇院；是俄羅斯歷史最悠久的劇院，享譽天下，是世界上最著名的劇院之一。它不僅繼承了歐洲芭蕾的歷史傳統，更重要的是，在俄羅斯豐富的民族音樂與舞蹈的沃土上，建立和發展了自己的芭蕾體系。將沙俄古典風格融匯于設計版塊中，同樣大量留白處理給了圖片展示更多的空間。
大面積整站或局部性使用高清圖片，在之前設計分享中我們見到了很多案例，這里介紹幾個日本以圖片展示為主的網站，精致的圖片不需要過多的裝飾。
坂本龍一是日本當代最讓人尊崇的音樂家之一，音樂領域涉獵甚廣，在先鋒電子樂領域擁有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等，為1992年巴塞羅那奧運會開幕式譜曲并擔任指揮……坂本龍一成為”大眾明星”的原因，一方面在于他個人對于電子、搖滾、爵士等多重音樂風格極具靈感的把握；另一方面則在于他能在商業、藝術和實驗之間找到平衡點，作出既有實驗意義又有動聽旋律的作品。
http://moonlinx.jp/special_issue/003/
日本設計強調材料的內在之美，注重與大自然的和諧，珍惜自然材質，這與日本自然資源相對稀缺有很大的關系。日式風格中，回歸自然是最大的特色，推崇貼近自然、強調自然主義，讓使用者有置身自然的感覺。用產品的工藝制作圖片作為網站的主體和背景，拉近了觀者與產品的距離。
http://www.ishiyamasenko.co.jp/
傳統工藝美妝店鋪，單從cover引導頁的圖片就能看出該店鋪的賣點。特色產品圖加上柔美的動態散花效果，為網站加分，導航中加入商城外鏈可直接在線購物，利于用戶體驗。
日本聯合新聞社，社內的場景圖片很好的展示要表達的主旨。
街區是一個城市的重要標志性特色，將這樣雜亂無章的舊街道作為網站通欄頭圖，配合簡介的形式設計，也能很出彩。
美寶蓮日本網站，將實體店作為網站背景，搭建成實景的巨幅海報展板，這種形式是否比存粹的明星代言更接地氣些？！
對比下面兩個日韓服飾類網站，可以看出日本網站在圖片選擇上更注重產品本身，極具質感和張力的圖片真實樸素，力求展示產品與人的關系。而韓國則更注重整體的氛圍的搭配，通過環境的營造來提升產品的品味和檔次，產品只是搭建系統中的一部分。
圖素質量低是我們在設計過程中經常遇到的情況，我們通常用到最多的方法莫過于高斯模糊、柔光、濾色、添加紋理質感，將圖片處理成做舊、仿古、年代感、單色……又會是什么效果呢？！
箔工藝，金銀箔具有很好的延展性，將金銀打展成薄膜狀，與絹結合，應用于古代服飾中。此文化再京都有四百余年的歷史，現在主要用于文物修復。取箔工藝品的一個局部，重新組合作為整張背景，貼片處理的文字與背景的融合更顯古代文化的精妙。
http://www.hiroto-rakusho.com/
人物素材粗糙的情況下，采用水彩的濾鏡效果，背景加入點狀網格，極具形勢感的箭頭做引導，個性十足。
全日本劍道聯合會，網站采用時間軸展示的形式，從1950－2000年每一期獲勝者的照片和信息，可以看出由于70年代以前都是黑白照片且像素低，和近期的彩色照片反差較大，所以網站設計成了古樸做舊的年代感風格，加入很多早期照片中的截圖作為插畫元素，確保了風格統一。
http://www.kendo.or.jp/champ/#/about
Daum是韓國最大的門戶網站之一，以郵件和社區產品為核心，是韓國第一個電子郵件服務網站Hanmail的前身。牛仔藍單色照片處理更像電影和動漫場景。
也有整體黑白加入局部彩色色的案例，將復雜圖片簡化處理，對于簡潔的頁面設計來說，這是個不錯的方法。每個版塊都是黑白照片做背景，文字做JS動態移入效果，在圖片的某個元素上加入VI主體顏色，故事感很強。
手繪、矢量圖形設計的圖形場景環境，用在食品、旅游、地圖、嬰幼兒等方向的設計上更容易拉近消費者，給人放松愉悅的心情。相比圖文混排更貼近生活。
狗糧推廣網站，將網站設計成寵物樂園，各個品種的狗狗們都有自己的一段視頻，內容是狗狗們對幾種產品的喜好對比。
http://www.solvida.jp/solpa/#/MainPage/001
企劃創意公司，技術上只是一個簡單的FLASH站，但空間跨越性思維設計卻給這個網站帶來了不凡的效果。由局部的空間延伸出各種異空間的交匯，加入互動效果而引發的更多驚喜也進一步提升了用戶參與度。
用3D拼圖建造起一個小型城市，4個建筑代表網站要展示的4個心理學的具體分類，建筑物夸張的擬人化動作實現頁面跳轉。
http://www.soc.nara-u.ac.jp/kokoro/
日本兒童專用雞蛋，此網站將所有產品相關內容裝進雞蛋中，食用后產生的剩余物可大變身繼續用于其它物品的生產，循環利用避免環境污染，所以在首頁展示上才會有類似瀑布流的大量周邊產品展示。網站首頁是自動向下播放展示的瀑布流效果，hover及跳轉都伴隨非?？蓯鄣囊魳泛蛣討B，恰當音樂的播放和觸碰hover的小驚喜也會給網站增添色彩。
日本山形放送局的地區地形圖，大家都看過現實版的景點手繪地圖，該網站也用了這種形式。比較有意思的是他的功能非常強大，是一個可放大縮小的真實版地圖，沒有跳轉，完整的手繪google地形圖。以小青蛙作為代言人對每個景區的優勢作手繪圖形注解，以當前彈出的形式展示該地的歷史、自然、觀光、社會、祭祀、美食、傳統等信息的詳細圖文、視頻解析。
http://www.nhk.or.jp/yamagata/mitekero/
九州熊本天草村,用動態圖形化完整的對天草村進行了設計演繹，重要景點默認做了動態處理，跳轉后都是另一個完整的實景矢量圖。對景點中的標志性小建筑做了頁面彈出實景詳細講解。
這種形式在新加坡兒童樂園的設計中也同樣得到了使用。
設計風格也是體現一個國家文化的重要方式，嚴寒漫長的冬季成為俄羅斯的標志，在頁面上打造一個同色系的冰雪世界，反而使彩色的主體信息更加突出。
一個優秀的網站它的交互性也非常重要，擁有好的交互性可以讓瀏覽者有著更高的參與感，并且也能增大網站自身傳播效果，還可以提高用戶對自己的網站的依賴性和忠誠度。
Panasonic剃須刀產品JS展示站，設計形式與松下電子實現”星羅棋布的網絡社會”和”與地球環境共存”的理想呼應，整站的背景都是由動線點組成的動態圖形面拼合而成，圖片和文字的展示停留在這星羅棋布的空間組合中。此時網站要表達的不僅是展示產品，還有松下文化。
http://panasonic.jp/shaver/lamdash/dna/index.html
東京交響樂團，該網站對用戶的參與性做到了極致，從網站主內容上沒有關于東京交響樂團的圖片文字信息，用戶可以在頁面專屬音樂鍵盤提示的情況下，用獨創音樂的新穎形式創作屬于自己的個性音樂，并對音樂逐幀做了記錄，可以返回欣賞創作成果，并分享到各網站。
SPECIAL-T 綠茶網站，玩過網游的同學們都知道游戲中做任務有地圖尋路功能，該網站采用了這個原理，在大海中建立類似于西游記的龍宮，用戶在沒有任何導視的情況下，360度無死角在海洋里自由探尋，最終的成果便是在一段時間的遨游后到達網站的終點產品引導頁，闡釋special的感受。
http://ogreen.special-t.com/en/
如果你想要一種優雅而直觀的產品展示方式，全屏視頻網站是一個不錯的選擇。全屏視頻網站能一瞬間點燃人們的好奇心，當然也可能馬上讓訪客失去興趣，這都取決于你是否能夠駕馭這類高大上的設計風格。
日本福祉大學，校園內外學生學習、活動氛圍的場景視頻作為背景播放展示，視頻上一層則是手動切換的內容介紹字幕，一個大學的網站更像是一個微電影展示。
http://www.n-fukushi.ac.jp/lifestyle/
Mikihiko Kyobashi 海底攝影記錄展示站，整站視頻展示配上海洋真實的聲音。透過視頻看到的海洋不是一汪死水，陽光穿透海面，碧海藍天，比靜態的照片更能展示生命的氣息。
bc服裝網站，暗色的動態視頻做背景，與前層簡單的圖文排版形成反差，圖片hover的3D立體效果令人耳目一新。
圖片與視頻的混排切換展示，拉伸后展開整站播放效果。
http://getgoingtoday.org/beyond
日清食品，微距拍攝的視頻，用時間倒數計時的方式，記錄在這一碗日清方便面泡好的3分鐘內，世界各國家不同膚色年齡的人群品嘗日清食品的狀態緩慢特寫，加入了用各國語言描述倒數計時的聲音，視頻中間穿插有和日清logo呼應的裝飾語言，隱藏在頁面下方的時間軸可以找到每一分每一秒的畫面禎，時間可自行選擇切換到想要的那一幀。
以上五點都是當下主流設計中另辟蹊徑找創意，簡單五點很難將所有好的創意都涵蓋在內，除此之外大家肯定也有更好更多的想法。網頁設計總是立足于瀏覽者的審美、文化，以及信息傳播的習慣、方式，還有網頁開發技術的進步。對于絕大部份網站來說，沒有強大的專業力量去研究用戶新的習慣和需求，也不可能開發出新的技術功能，只能在一些大型的網站中窺見一些發展的趨勢，再從中找到自身可借鑒的地方。這種借鑒如果成為普遍性，那我們也很難在互聯網的大潮中有自己的一席之地。網頁設計已逐漸往多元化方向發展，更好的創意、更新的想法都來源于我們真實的生活感受，想要我們的網站變得更強大、擁有更好的用戶體驗，無可厚非，我們應該做的是大膽、大步地去嘗試。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
藍藍設計的小編 http://www.syprn.cn
