如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在傳統行業打滾數年后的設計師，總是難以回避靈氣和匠氣的博弈，日常創作逐漸走入某種定式，失去了挑戰 Brief 的膽量和與打破規則的底氣。與此同時，異軍突起的新媒體互動設計卻似乎毫無包袱，以一股體驗式的視覺狂潮快速站穩了自己的商業位置，既保留了創意人的酷，也能為新型體驗創造服務。2012年，Random International 的作品《雨屋》正式開啟了大眾對沉浸式體驗的認識，近年隨著 teamLab、Punchdrunk 等互動體驗展演的火爆，沉浸式新媒體設計不僅成為了炙手可熱的包裝概念，同時也透露出人們對于新型互動的好奇心與強需求。提起新媒體作品，我們通常會自動聯想到黑科技和腦洞，卻容易忽視這些作品除了具有前衛的藝術性表征，同時也暗含著嚴謹而延展的設計內核。
2019 年初夏，Mindpark 邀請了兩位數字媒體界的先鋒代表：Moment Factory與Studio Swine，和我們共同探討了沉浸式設計在商業性實踐與實驗性探索上的思路與價值。
總部位于蒙特利爾的 Moment Factory 是一家專業打造沉浸式互動體驗設計的多媒體公司，以跨界和合作著稱的他們擁有一個超 350 人的龐大團隊。自千禧年成立以來，MF 已經成功打造了近 400 個場景設計商業項目，客戶包括微軟、索尼、NFL、麥當娜等，形式從立體光雕、數據互動到空間展覽、演唱會工程都樣樣精通，幾乎每個作品在面世時都顛覆了人們對驚艷的定義。
△ Demo Reel ©?Moment Factory
Moment Factory 的業務主要分為三大模塊：內容、互動與場景。植根于公眾場域創作的他們，善于根據場地的特點策劃和開發因地制宜的故事內容，繼而在聲光電的效果設計上加強環境與人之間的聯結，最后兩者結合形成互動閉環以構造出全局的沉浸式體驗。
△ ©?Moment Factory
Moment Factory 的工作流也基于這三大模塊多線程并行。與傳統行業不同的是，客戶對于 MF 而言并不是甲方爸爸，而是項目的共創者。他們會邀請客戶參與并確認每一個設計環節，一來可以增加客戶對項目的認知與信任度，二是考慮到多媒體物料制作成本較高，也預防階段性推翻對項目進程造成影響。
△ ©?Moment Factory
「Aura」是 Moment Factory 耗時超過一年，動用超過 100 人團隊制作的夢幻級沉浸式光雕作品。它集合了極其的視效投影技術及獨立打造的交響樂聲效，為蒙特利爾圣母大教堂打造了 40 分鐘震撼而靈動的超感官體驗。
△ AURA ©?Moment Factory
基于天主教堂自身「誕生-受難-升天-審判」的故事脈絡，AURA 的設計概念以 the Path of Light（光明之路）為主線，并根據建筑動線分為 the Birth of Light（光的誕生）， the Obstacles（苦路），the Open Sky（升天）三個章節。
△ ©?Moment Factory
在確定故事線與情緒板同時，考慮到教堂內部結構的復雜性及壁畫的還原準確性，團隊使用 3D 掃描重塑建筑模型，并進行了大量的動效推演及真實光影測試，最終利用自研的工業投影體系，讓建筑實體與投影內容的結合達到型與神的高度統一。
△ Behind the Scenes ©?Moment Factory
在細節的雕刻上，作品對主殿圣像的層級結構進行分解，營造出空間錯位的效果。另外也對苦路長廊的畫像進行精準投影，以光的擴散作為線索，一步一步引導觀眾的視線，展開故事敘述。
△ Behind the Scenes©?Moment Factory
無論是故事設定還是效果設計，Aura 都根據教堂題材順勢而為，在不破壞建筑原有氣質的前提下，放大環境硬件中的可用元素，從而達到「概念-動線-效果」的全方位合一。視覺互動的起承轉合不但將觀眾的沉浸式體驗最大化，同時也升華了圣母大教堂的神性與歷史精神。
LAX 項目是 Moment Factory 在 2013 年為洛杉磯機場打造，以時間旅行為主題的商業項目。它既是全美最大的機場多媒體環境設計項目，也是品牌體驗拓展的空間實驗。
雖然洛杉磯機場整體以「時間旅行」作為品牌主題，但出發者和到達者的動線終歸不同：除了機場主體以外，旅客的體驗還涉及到另外兩個環境——旅行目的地和洛杉磯。因此，本項目根據不同的觸點（登機口與到達大廳）針對性地設計了不同互動內容，讓出發者與到達者都能找到與環境的聯結和延伸，使整個機場體驗形成通路。
Moment Factory 為登機口都設計了實時更新的互動墻，不但能捕捉行人的動態并融入畫面，更能實時切換目的地的本土特色內容作為動畫元素，使準備出發的游客身未動而心先遠。
△ THE PORTALS ©?Moment Factory
與登機口不同的是，到達大廳的巨幕內容則根據機場的建筑結構設計，以跳水、跳躍等蒙太奇片段營造出洛杉磯愜意、清爽、驚喜的城市品牌形象；系列影片也同時在長廊和行李大廳中展映，以保持品牌語意的一致性與連續性。
△ WELCOME WALL©?Moment Factory
在機場中央，MF 團隊還打造了一個呼應主題的重點裝置——時間鐘樓。除了播放實時更新的故事短片外，設計師考慮到屏幕過于虛擬和冷感，故以機械咕咕鐘為靈感，讓鐘樓和環繞屏幕在準點切換真人報時舞蹈，既達到提醒旅客時間的作用，也讓他們在候機的空隙獲得環抱式的娛樂化體驗。
△ TIME TOWER ©?Moment Factory
從手稿到成型，LAX 項目歷時 16 個月，在三個大洲拍攝了超過 4 小時的視頻內容。而且因為機場常年不能關閉，也極大增加了項目的施工與調試難度。
△ ©?Moment Factory
《通用設計法則》中曾提到，「沉浸」即是讓人專注于當前環境，并在設計者提供的目標情境中進行互動而獲得愉悅，從而忘記真實環境的存在。Moment Factory 十分善于提取及串聯實體環境與觀眾之間的觸點，利用不同的互動技術對每一個觸點進行感官的復合強化，并以完整的敘事結構對品牌進行包裝，才屢屢在 Lumina、Kontinuum 等系列作品中打造出連貫又有趣的體驗心流。
對互聯網產品設計而言，我們能調用的觸點也許僅有區區一屏，但用戶在獲取虛擬體驗時的沉浸式感知卻和實境式體驗是相似的，因此設計師也可以參考以下幾點：
We do it in the public. We bring people together.
過去，由于娛樂產品的復制成本較高，人們大都以群體形式到電影院或劇院里進行活動，因此促進了社交互動與環境共融。但隨著媒介的升級，娛樂不僅從大眾走向個人，同時也將個人和群體進行隔離，使個人和社群、環境之間的互通性越來越弱。Moment Factory 堅持在公共場域中探索新型的體驗形式，正是因為他們堅信娛樂活動雖然可以由個人進行，但沉浸式的情感體驗仍舊需要透過真實環境下的社交互動來完成。利用數字篝火為體驗設計融合升溫，才能讓人們真正地共聚與共享真實的情感和生活。
如果說 Moment Factory 利用新媒體在環境創意、娛樂性與商業價值之中找到了發展的平衡，Studio Swine 則是利用新媒體設計的實驗性為人們開辟了觀察世界的全新角度。
Studio Swine 中的「SWINE」全稱是 Super Wide Interdisciplinary New Explorers，意味著無限跨界與探索主義。它由新派英國藝術家 Alexander Groves 及日本建筑師 Azusa Murakami 于 2011年創立，作品領域涵蓋思辨設計、裝置藝術、電影、雕塑等。他們的創作以獨特的世界觀、空間感及美學體系征服了世界各大頂尖藝術展覽，倫敦V&A博物館、巴黎蓬皮杜藝術中心與威尼斯雙年展等都曾邀請他們展出。
△ ©?Studio Swine
在西方，越來越多像 Studio Swine 這種設計師團隊選擇以跨界的形式進行研究及創作，他們也不再拘泥于設計與藝術之間的所謂界限，逐漸衍生出了新的設計流派與理論。傳統行業的設計焦點往往會落在商業策略與 Design Thinking 上，而新形態的設計則更多地向批判性與未來性上傾斜。
△ An Unresolved Mapping of Speculative Design ©?Elliott P Montgomery | EPMID.COM
2013 年前后，英國設計師 Anthony Dunne 和 Fiona Raby 提出了 Speculative Design（思辨性設計）來概括此類在藝術與設計之間的交疊學科。對比起傳統設計基于現有場景來解決現有問題，思辨性設計旨在擴充場景的可能性，以引導人們想象和思考未來社會生活、生產的狀態或矛盾。Speculative Design 以設計作為跨領域的思維實驗及方法，不僅突破了媒介、工藝的疆域，選題上也常常挑戰甚至跳脫社會倫理、文化定式、現世哲學的桎梏，而這種敢為人先的創作理念也是此類作品爭議性的源頭。
△ Redrawn from Speculative Design Practice ©? Ivica Mitrovi? | Speculative.hr
New Spring 是 Studio Swine 與 COS 合作的裝置互動項目，作品以意大利建筑的拱廊結構及櫻花樹在四季中的形態為意象設計，并將氣泡比喻花的綻放與凋亡，旨在討論時間與物質的瞬息性。在創作伊始，設計師提出了一個假設場景：在未來，物質將越來越多，而空間越來越少，植物與園林可能朝著機械化、人工化的方向發展，那么我們要怎么去模擬四季變化下生物從生到滅的過程呢？
△ COS x NEW SPRING ©?Studio Swine
為了全感官地營造未來園林的場景感與沉浸感，除了櫻花樹的意境外，Studio Swine 更與化學家合作，研制出帶有混合香味且不會立即爆破的氣泡，為互動者帶來意料之外的觸感體驗。在聽覺上，編曲家 Gavin Singleton 也特意為展覽場景打造了專屬的音樂EP。
△ ©?Studio Swine
2018年，Swine Swine 再度利用氣泡作為原型，以世界上最小且最古老的生物之一——藍細菌的光合供氧為主題，制作了高達 9 米的大型環境裝置 Infinity Blue 來模擬地球大氣層的歷史，禮贊藍細菌賜予了地球第一口呼吸。雕塑中內嵌 32 個旋渦氣孔不斷噴發出圈裝煙霧，用以比喻光合作用生產氧氣的過程。
△ Infinity Blue ©?Studio Swine
和場景設計不同，影片同樣也是另一種常見的沉浸式表現手法。近幾年越來越多的新媒體作品采用紀錄電影、開放式互動短劇、VR 短片等形式對作品進行呈現：一是影片能突破作品篇幅，更全貌地介紹項目背后的概念與調研故事；二來基于自媒體環境的蓬勃，作品能以較低的復制成本獲得更高的傳播度；三則是影片天然的敘事結構能快速激活觀眾的代入感。
Hair Highway（絲綢之路）是以紀錄片與家具設計復合呈現的極富爭議性的新媒體實驗。Studio Swine 意識到在自然資源逐漸減少的情況下，人類毛發作為一種代謝物質，也許可以成為新型的可再生資源?；谶@個洞察，他們嘗試以頭發作為原料去創造一種近似木料的全新媒材，以挑戰現有的美學標準和詮釋物質的可能性。
△ Hair Highway ©?Studio Swine
亞洲人頭發的生長速度是熱帶硬木的 16 倍，而中國作為熱帶硬木最大的進口國也是人類毛發最大的出口國，因此也被他們選為了項目的起源地。兩人在創作過程中不僅探訪了 9 個位于山東的假發工廠，更拍攝大量假發制作的工序與買賣流程作為紀錄片的生態調研資料。
△ ©?Studio Swine
Hair Highway 以絲綢為概念，用樹脂封印毛發制作出一種模擬琥珀、玳瑁紋理的板材，并糅合清代及上海 20 年代裝飾主義的紋理設計與西方抽象幾何的輪廓特征，創造出了一套極具古典神韻的系列家飾。
△ ©?Studio Swine
不破不立，Studio Swine 的作品始終緊扣著三個思辨性的特征：探索時間性、想象未來社會的形態、創造新型的物質組合，以新銳的角度挑動人們的思維的底線，而量產和商業化卻從不是他們眼中的第一要義?；蛟S怪誕，或許不安，但設計在他們的哲學里只是一條探索世界的未竟之路，而不是一個實用主義誕下的結果。
新媒體的特點之一，就是他基于時間的藝術形式。新媒體的表現很多都是時間累積的縮影，每一幀，每一個圖層，每一個數據庫的建立，以及觀眾在與之互動的時候也同時在進行一個時間的旅行。我希望互動是更加內隱和內省的，而不是僅僅基于科技的娛樂程度?！旅襟w策展人 Richard Castelli
從對娛樂效果喜聞樂見，對創作理念心悅誠服，再到如今被作品激活出新的靈感、批判或討論，受眾與作品之間的互動升維或許才是創作者最樂意觀望的局面。沉浸式新媒體設計為人們提供了孵化情感和思想的超感官空間，而互動場域中的人才是成就作品的最終環節。
真正的沉浸是思維的沉浸，環境的營造只是想象力的引路人。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
更新階段分為兩部分 父組件執行 render 或者調用 this.setState。
componentWillReceiveProps
大部分網上教程為外部 props 發生改變才觸發 componentWillReceiveProps，其實不是，當父組件進入 render 時，無論子組件的 props 發沒發生改變，都會執行該生命周期函數。
函數參數有一個，為 nextProps，為將要新的 props。
值得注意的是，在整個更新階段的生命周期函數，只有在此函數內可以調用 this.setState 方法，當然其他也可以調用，但是會造成死循環 。
shouldComponentUpdate
該函數需要返回值，如沒定義則默認返回 true。當返回值為 true 時，進入 componentWillIpdate ，如為 false ，則什么都不發生。所以說這是一個可以進行 React 性能優化的地方。函數參數有兩個 nextProps 和 nextState。我們需用做的就是在 this.props、this.state、nextState、nextProps之間進行對比，來解決重復渲染的目的。
componentWillUpdate
如果 shouldComponentUpdate 返回值為 true 的話，生命周期會進入該函數中。在這個函數中我們可以根據實際情況做一些事情，但是不能調用 this.setState。
render
在更新階段的 render 來講一講 調和 過程。 render 返回的 JSX 標簽會保存在內存中，react 會通過 diff 算法來計算出最小化改動完成差異的更新。diff 是逐層遞歸比較，首先比較類型是否一樣。如果發現 <div>和 <span> 的差別的話，react 會選擇直接放棄之前的 dom 元素， 重新渲染。所以說即使是更新階段的調和過程，也會觸發組件的掛載、卸載階段。
componentDidUpdate
在這個時候已經更新完 dom 結構，可以重新使用 dom 操作。
總結
總體來說更新的生命周期要做的最重要的事情就是性能優化，減少重復渲染次數。
在這個方面已經有很多成熟的解決方法了，在我的博客中也會介紹如何定制更新階段的生命周期函數。
在使用上，最最重要的一點就是不要在除了 componentWillReceiveProps 之外的其他更新階段生命周期函數內調用 this.setState。
相關鏈接：
淺入 React 生命周期相關（一）掛載生命周期
---------------------
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
前幾天面試問道 react 的相關知識，對我打擊比較大，感覺對 react 認識非常膚淺，所以在這里重新梳理一下，想想之前沒有仔細思考過的東西。
另外有說的不對的地方還請幫我指正一下，先謝謝各位啦。
目錄索引：
React 有一套合理的運行機制去控制程序在指定的時刻該做什么事，當一個生命周期鉤子被觸發后，緊接著會有下一個鉤子，直到整個生命周期結束。
生命周期代表著每個執行階段，比如組件初始化，更新完成，馬上要卸載等等，React 會在指定的時機執行相關的生命周期鉤子，使我們可以有機在程序運行中會插入自己的邏輯。
我們寫代碼的時候往往會有很多組件以及他們的子組件，各自調用不同的生命周期，這時就要解決誰先誰后的問題，在 react v16 之前是采用了遞歸調用的方式一個一個執行，而在現在 v16 的版本中則采用了與之完全不同的處理（調度）方式，名叫 Fiber，這個東西 facebook 做了有兩年時間，實現非常復雜。
具體 Fiber 它是一個什么東西呢？不要著急，我們先從最基本的生命周期鉤子看起。
首先看一下 React V16.4 后的生命周期概況（圖片來源）
constructor() - 類構造器初始化
static getDerivedStateFromProps() - 組件初始化時主動觸發
render() - 遞歸生成虛擬 DOM
componentDidMount() - 完成首次 DOM 渲染
static getDerivedStateFromProps() - 每次 render() 之前執行
shouldComponentUpdate() - 校驗是否需要執行更新操作
render() - 遞歸生成虛擬 DOM
getSnapshotBeforeUpdate() - 在渲染真實 DOM 之前
componentDidUpdate() - 完成 DOM 渲染
componentWillUnmount() - 組件銷毀之前被直接調用
static getDerivedStateFromProps() 這個鉤子會在每個更新操作之前（即使props沒有改變）執行一次，使用時應該保持謹慎。
componentDidMount() 和 componentDidUpdate() 執行的時機是差不多的，都在 render 之后，只不過前者只在首次渲染后執行，后者首次渲染不會執行
getSnapshotBeforeUpdate() 執行時可以獲得只讀的新 DOM 樹，此函數的返回值為 componentDidUpdate(prevProps, prevState, snapshot) 的第三個參數
關于 Fiber，強烈建議聽一下知乎上程墨Morgan的 live 《深入理解React v16 新功能》，這里潛水員的例子和圖片也是引用于此 live。
我們知道 React 是通過遞歸的方式來渲染組件的，在 V16 版本之前的版本里，當一個狀態發生變更時，react 會從當前組件開始，依次遞歸調用所有的子組件生命周期鉤子，而且這個過程是同步執行的且無法中斷的，一旦有很深很深的組件嵌套，就會造成嚴重的頁面卡頓，影響用戶體驗。
React 在V16版本之前的版本里引入了 Fiber 這樣一個東西，它的英文涵義為纖維，在計算機領域它排在在進程和線程的后面，雖然 React 的 Fiber 和計算機調度里的概念不一樣，但是可以方便對比理解，我們大概可以想象到 Fiber 可能是一個比線程還短的時間片段。
Fiber 把當前需要執行的任務分成一個個微任務，安排優先級，然后依次處理，每過一段時間（非常短，毫秒級）就會暫停當前的任務，查看有沒有優先級較高的任務，然后暫停（也可能會完全放棄）掉之前的執行結果，跳出到下一個微任務。同時 Fiber 還做了一些優化，可以保持住之前運行的結果以到達復用目的。
我們可以把調度當成一個潛水員在海底尋寶，v16 之前是通過組件遞歸的方式進行尋寶，從父組件開始一層一層深入到最里面的子組件，也就是如下圖所示。
而替換成了 Fiber 后，海底變成的狹縫（簡單理解為遞歸變成了遍歷），潛水員會每隔一小段時間浮出水面，看看有沒有其他尋寶任務。注意此時沒有尋到寶藏的話，那么之前潛水的時間就浪費了。就這樣潛水員會一直下潛和冒泡，具體如下圖所示。
從生命周期那張圖片縱向來看，Fiber 將整個生命周期分成了三個階段：
componentWillMount()，componentWillUpdate()，componentWillReceiveProps() 的三個生命周期鉤子被加上了 UNSAFE 標記
簡而言之：以 render() 為界，之前執行的生命周期都有可能會打斷并多次調用，之后的生命周期是不可被打斷的且只會調用一次。所以盡量把副作用的代碼放在只會執行一次的 commit 階段。
除了上面常用的鉤子，React 還提供了如下鉤子：
static getDerivedStateFromError() 在 render 階段執行，通過返回 state 更新組件狀態
componentDidCatch() 在 commit 階段執行，可以放一些有副作用的代碼
理解了生命周期和三個執行階段，就可以比較容易理解組件狀態的更新機制了。
這個方法可以讓我們更新組件的 state 狀態。第一個參數可以是對象，也可以是 updater 函數，如果是函數，則會接受當前的 state 和 props 作為參數。第二個參數為函數，是在 commit 階段后執行，準確的說是在 componentDidUpdate() 后執行。
setState() 的更新過程是異步的（除非綁定在 DOM 事件中或寫在 setTimeout 里），而且會在最后合并所有的更新，如下：
Object.assign( previousState,
{quantity: state.quantity + 1},
{quantity: state.quantity + 1},
...
)
復制代碼之所以設計成這樣，是為了避免在一次生命周期中出現多次的重渲染，影響頁面性能。
如果我們想強制刷新一個組件，可以直接調用該方法，調用時會直接執行 render() 這個函數而跳過 shouldComponentUpdate()。
function wait() { return new Promise(resolve => {
setTimeout(() => {
resolve(); console.log("wait");
}, 0);
});
} //......省略組件創建 async componentDidMount() { await wait(); this.setState({ name: "new name" }); console.log("componentDidMount");
}
componentDidUpdate() { console.log("componentDidUpdate");
}
render() { console.log(this.state); return null } //......省略組件創建 // 輸出結果如下 // wait // {name: "new name"} // componentDidUpdate // componentDidMount // 注意 componentDidUpdate 的輸出位置，一般情況下 // componentDidUpdate 都是在componentDidMount 后面 // 執行的，但是這里因為setState 寫在了 await 后面 // 所以情況相反。 復制代碼了解 react 生命周期和更新機制確實有利于編寫代碼，特別是當代碼量越來越大時，錯用的 setState 或生命周期鉤子都可能埋下越來越多的雷，直到有一天無法維護。。。
我的個人建議如下：
getDerivedStateFromProps() 當成是 UNSAFE_componentWillReceiveProps() 的替代品，因為 getDerivedStateFromProps() 會在每次 render() 之前執行，即使 props 沒有改變
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
這篇文章我們來談談移動端和PC端交互設計上的區別。
經常遇到一些設計師，他們之前負責的都是pc端產品，突然改做移動端，會不自覺的把pc端的一些設計理念“移植”到移動端，出現了水土不服。有經驗的設計師一看你設計的移動端頁面就知道你之前做的都是pc端，這是一件非常尷尬的事情。就好像你說了一句“nice to meet you”，別人就知道你老家是哪里一樣。那么移動端和pc端交互設計上的區別究竟在哪呢？
大屏到小屏
開門見山，移動端和pc端最根本的區別就是屏幕的大小。屏幕的大小直接決定了界面信息量，pc端一個頁面可以展示完全的信息可能需要移動端好幾個頁面來承載。
可能有的設計師覺得，屏幕尺寸不一樣做自適應不就行了，移動端頁面做長一點，讓用戶滑動就可以了。這是一個非常簡單的處理方案，但是忽略了一個重要前提：用戶愿不愿意滑動？根據埋點數據顯示，多數移動端頁面超過一屏的內容的曝光與點擊量會急劇下滑，說明用戶很少主動滑動去查看一屏以外的內容。對于移動端產品來說，一些重要的內容必須保證用戶在一屏內可以看到。
1）信息架構重構
因此，如果你要為一個pc端網站做一個移動端app，首先要做的就是信息架構的重構。pc端有足夠的空間可以把所有的功能直接展示給用戶，而移動端只能展示一些主要的功能，一些次要的功能需要放在下一層級。
例如，appstore中用戶是可以評價這條評論對自己是否有幫助的。PC端的處理方式很簡單，直接展示給用戶。而移動端是需要用戶長按這條評論才可以彈出評價列表的，可能很多用戶今天看了這篇文章才發現原來還有這個功能。沒關系，之前雖然不知道，但是并沒有影響你正常使用啊。對次要功能進行適當的降低信息層級是移動端設計師必須要考慮的。
2）一個頁面，一個任務
對于上面信息架構重構的觀點可能會有人存在異議，對于一些表單類頁面來說，例如用戶要借錢、轉賬，有些信息是用戶必須要填的。在這些場景中，我們不擔心用戶不滑動，因為用戶不滑動就無法完成操作。那么在這種情況下，是否可以繼續延續pc端的布局樣式？
以上面的轉賬流程為例，pc端是直接在一個頁面展示，而移動端是分成了兩個頁面。為什么這樣？把備注/付款說明也放在第一個頁面不行嗎？
因為移動端用戶使用環境更加的復雜多變，更容易受到干擾，所以必須保證界面信息的簡單直觀。如果在一個頁面中展示過多的信息量，容易讓用戶混亂。這里所說信息量并不是指絕對信息量，更準確的說法應該是用戶主觀感受上的信息量。同樣的幾個輸入框，可能在pc端只占了頁面的1/4，而移動端占了一整個頁面，給用戶的感觀是完全不一樣的。頁面塞的滿滿當當，容易讓用戶焦慮。
一個頁面可以完成的任務現在要跳轉好幾個頁面，增加了操作步驟。用戶害怕“內容多”，難道不害怕“步驟多”嗎？不害怕，因為頁面內容量是用戶一眼就可以看出來的，用戶無法立刻感知這個任務有多少步驟。因為無知，所以無畏。等到用戶知道這個任務步驟數的時候，整個任務都已經完成了。
借唄的這次改版，用戶要借錢必須先輸入借款金額，其余的借款期限、還款方式和利息等信息才會展示給用戶。這些信息都是跟用戶借款金額相關的，用戶沒有輸入借款金額，這些信息展示給用戶意義也不大，不如隱藏，讓用戶的注意力聚焦于完成輸入借款金額。
沒有一個放之四海而皆準的設計原則，所有的設計理論都不能罔顧實際的應用場景而機械的套用。如果前后步驟關聯性比較強，我建議不要分頁展示。例如，目前很多的短信驗證碼都選擇把“輸入手機號”和“輸入短信驗證碼”放到兩個頁面，我個人對此持保留意見。設想一個場景，如果用戶遲遲沒有收到短信驗證碼，那么他需要確定是手機號輸錯了、網絡故障還是其他什么原因。用戶需要返回到上一個頁面查看，如果手機號和短信驗證碼放在同一個頁面就簡單多了。
3）突出重要信息
前面我們提到的主要是控制移動端頁面的信息量。頁面信息量少就可以了？當然不是，我們來看一下火車換乘的場景，如果你要從南京去新疆阿克蘇，沒有直達的車次，只能從西安換乘。我們來看看下面兩款產品的處理方式，左邊是12306，右邊是飛豬。12306還是一股pc端風格迎面撲來，問題出現在哪？12306跟飛豬展示信息量差不多，唯一的區別在于12306展示了兩趟車次各自的起止時間，而飛豬只告訴用戶整趟旅程的起止時間。
顯然問題不是出現在信息量上，而是對信息的展示形式上。用戶更關注的信息，應該讓用戶更容易發現。對于一趟車次來說，用戶更加關注出發/到達站、出發/到達時間和票價。對飛豬界面進行高斯模糊處理，發現用戶的視覺焦點正好落在這些重點信息上。
12306所有的信息都屬于同一層級，讓人抓不到主次。而且界面中出現了過多的配色，更增加用戶的信息獲取成本。
鼠標到手指
pc端用戶與界面進行交互靠的是鼠標，移動端用戶靠的是手指。鼠標的操作更加精準，因此移動端界面中元素的尺寸和間距比pc端的大。以下圖為例，左邊是pc端，右邊是移動端。移動端的輸入框沿用的還是pc端樣式，而且關于利率和手續費的詳情icon過小，用戶的手指點擊的時候容易誤操作。
給你的界面做減法
前面我們主要強調了移動端產品要盡量減少界面中信息量?？刹豢梢栽诓桓淖儺a品信息架構的前提下，通過交互設計上的改動來完成目標呢？我給大家介紹兩個方法：場景化和關聯化。
1）場景化
在一個頁面中，雖然內容很多，但是用戶真正感興趣并且會與之交互的內容很少。如果我們可以獲知用戶在特定的場景下對于某個內容訴求很高，那么我們突出展示；反之如果訴求很低的話，我們可以隱藏。
舉一個之前說過的例子，知乎中，用戶在搜索結果頁滑動大概3屏后，會出現“向知友提問”按鈕。因為用戶滑動了3屏，說明用戶可能對當前的搜索結果不滿意，這時引導用戶去提問，用戶的意愿更高。如果我們全程展示這個去提問按鈕，反而會減少用戶的實際瀏覽區域，造成干擾。
上面主要提到了，同一個流程，需要根據用戶不同的使用場景提供不同的功能。其實即使是同一個功能，我們也要根據用戶不同的使用場景選擇不同的展示形式。
還是知乎，為了方便用戶可以快速的查看下一個回答，給用戶提供了一個浮動按鈕。但是這個浮動按鈕，當用戶開始滑動頁面時候就會改變樣式。這個很容易理解，當用戶剛進入這個頁面，為了降低用戶的學習成本，我們需要直接告訴用戶這個按鈕是干什么的。當用戶開始滑動進入閱讀答案的狀態，縮小按鈕的形態避免對界面信息造成遮擋。
2）關聯化
我們需要梳理信息之間的關聯性，將相互關聯的信息整合在一起，進而減少頁面中信息量。支付寶賬單的月份篩選功能，對入口進行了修改。之前用戶需要點擊日歷圖標，現在用戶直接點擊月份就可以了。用戶要篩選的就是月份，那么直接把月份作為入口更加合適。
總結
以上就是我對移動端和pc端交互設計上區別的簡單分析和總結，如果你有不同的建議和看法歡迎留言討論。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
附Java/C/C++/機器學習/算法與數據結構/前端/安卓/Python/程序員必讀書籍書單大全：
書單導航頁（點擊右側 極客俠棧 即可打開個人博客）：極客俠棧
①【Java】學習之路吐血整理技術書從入門到進階最全50+本（珍藏版)
②【算法數據結構+acm】從入門到進階吐血整理書單50+本（珍藏版)
③【數據庫】從入門到進階必讀18本技術書籍網盤吐血整理網盤(珍藏版)
④【Web前端】從HTML到JS到AJAX到HTTP從框架到全棧幫你走更少彎路(珍藏版)
⑤【python】書最全已整理好（從入門到進階）(珍藏版)
⑥【機器學習】+python整理技術書（從入門到進階已經整理好）（珍藏版）
⑦【C語言】推薦書籍從入門到進階帶你走上大牛之路（珍藏版）
⑧【安卓】入門到進階推薦書籍整理pdf書單整理（珍藏版）
⑨【架構師】之路史詩級必讀書單吐血整理四個維度系列80+本書(珍藏版)
⑩【C++】吐血整理推薦書單從入門到進階成神之路100+本(珍藏)
?【ios】IOS書單從入門到進階吐血整理(珍藏版)
--------------------------------------------------------------------------------------------------------------------
如果您已經入門reactjs,請繞道~ 這篇博客只適合初學者，初學reactjs的時候，如果你不會webpack，相信很多人都會被官方的例子繞的暈頭轉向。 ES6的例子也會搞死一批入門者。之前一直用的gulp，突然換了webpack，我也非常不習慣。在這塊也卡住了，對于想學reactjs的朋友，我的學習建議是這樣的：
nodejs => webpack => ES6 => reactjs
官方的很多例子都是ES6語法+webpack打包的，所以在學習reactjs之前，最好是會ES6和webpack，這樣能事半功倍！
1、首先來說說nodejs
先安裝版本的nodejs，npm一般都是自帶的。安裝成全局的比較方便構建項目。
npm install -g grunt-cli # 全局安裝
npm可安裝的插件可以在這里去找找 www.npmjs.com/ 如果不能安裝，可以使用淘寶的鏡象資源
2、webpack
webpack是一款打包工具，可以做一些js壓縮，sass，less轉換，圖片處理，js代碼合成，ES6轉ES5語法等很多功能，如果用過grunt，或者gulp的朋友，webpack也就不陌生了。都是需要寫配置文件。
3、ES6
github上很多案例都是用到了ES6的語法，所以，這里我們可以通過webpack的工具 babel ，把ES6的語法轉化為ES5的語法，這樣我們就可以使用github上面的demo了。
比如：
import '../css/common.scss';
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, IndexRoute } from 'react-router'
import { browserHistory } from 'react-router'
這里的import 就是ES6的語法，在webpack里面使用babel工具將其轉化為 ES5的語法。我這里用了JSX（reactjs 提供的一種簡潔的語法）如果對JSX不了解的，可以去百度下。
4、快速開發
每次我們在修改JSX文件，或者SASS文件后，都要執行webpack命令進行打包，這樣的開發效率很慢，官方提供了一個很牛X的工具，react-hot-loader + webpack-dev-server 可以幫助你快速開發，自動刷新頁面。
5、DEMO小試牛刀
這里我把自己做的一個DEMO分享給大家，如果你已經安裝了nodejs，并且npm也是全局的。下載后解壓，打開 start.bat，輸入 npm install 安裝所需的插件，安裝成功后執行 npm start ，等項目跑起來后，在瀏覽器輸入 http://127.0.0.1:3000 就可以訪問項目了。
這里是一個 react-router 的一個例子。
github 地址：https://github.com/mtsee/react-router-demo
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
按照這個來配置就好了，這里相當于是幫你把webpack需要的繁瑣的配置給你都弄好了，然后你直接從那里全部下下來就可以
記得先下好nodejs，安裝的代碼記得全都c v，不要自己敲
安裝完nodejs之后再安裝淘寶npm鏡像，安裝完了之后后面的安裝速度會快一點
npm install -g cnpm --registry=https://registry.npm.taobao.org
1
然后按照下面的五步流程一個一個來
1、全局安裝vue-cli
npm install -g vue-cli
1
2、進入目錄–初始化項目
vue init webpack my-project //這個要進入項目目錄再用，會創建一個my-project的文件夾
1
3、進入項目
cd my-project
1
4、安裝依賴
npm install
1
5、啟動項目
npm run dev
1
以上執行完后會出現一個 my-project 項目文件夾，用vscode打開后會看到以下目錄
下面解釋一下這些文件及目錄分別是干什么的
目錄結構的分析
1、bind
├── build // 項目構建(webpack)相關代碼 記憶：（夠賤） 9個
│ ├── build.js // 生產環境構建代碼
│ ├── check-versions.js // 檢查node&npm等版本
│ ├── dev-client.js // 熱加載相關
│ ├── dev-server.js // 構建本地服務器
│ ├── utils.js // 構建配置公用工具
│ ├── vue-loader.conf.js // vue加載器
│ ├── webpack.base.conf.js // webpack基礎環境配置
│ ├── webpack.dev.conf.js // webpack開發環境配置
│ └── webpack.prod.conf.js // webpack生產環境配置
2、config
├── config// 項目開發環境配置相關代碼 記憶： （環配） 3個
│ ├── dev.env.js // 開發環境變量（看詞明意）
│ ├── index.js //項目一些配置變量
│ └── prod.env.js // 生產環境變量
3、node_modules
├──node_modules// 項目依賴的模塊 記憶： （依賴） *個
4、src
├── src// 源碼目錄 5
1
│ ├── assets// 資源目錄
│ │ └── logo.png
2
│ ├── components// vue公共組件
│ │ └── Hello.vue
3
│ ├──router// 前端路由
│ │ └── index.js// 路由配置文件
4
│ ├── App.vue// 頁面入口文件（根組件）
5
│ └── main.js// 程序入口文件（入口js文件）
5、static
└── static// 靜態文件，比如一些圖片，json數據等
│ ├── .gitkeep
6、剩余的文件
├── .babelrc// ES6語法編譯配置
├── .editorconfig// 定義代碼格式
├── .gitignore// git上傳需要忽略的文件格式
├── index.html// 入口頁面
├── package.json// 項目基本信息
├── README.md// 項目說明
---------------------
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
項目概述QQ 20周年，是互聯網產品長青的一個傳說，就在 20 周年的時間節點，QQ 向用戶提供一份關于他自己的、真誠熱切的 QQ 數據總結。通過數字，匯集出每個人自己的 QQ 時光歷程，從而牽引出每個人對于成長、青春、溝通、時代流動的感知與回憶，引發 2019 年一場集體的情感共鳴。
△ QQ 20年來的一路變遷
項目歷時兩個月，從項目初期，視覺和產品密集溝通，了解需求，進行頭腦風暴，輸出多個視覺方案縱向對比，最后確定視覺風格，分配視覺工作（插畫，動畫，3D）。項目后期，包括開發還原，數據調配等眾多環節，環環相扣，缺一不可，一路過關斬將，整個 H5 需要不同崗位的高度配合和各專業的高度默契。
△ H5的項目流程圖
1. 異地合作
本次 H5 聯動了動效，3D，插畫設計師的共同合作，由于支持 3D 的設計師在韓辦公，所以大部分都是在線上全英溝通，包括前期的項目進度同步，還有后期的模型調整等環節都能及時反饋，快速反應，最后如期打磨出五款 spaceQQ。算是一次順利的異地合作。
△ 五款3D spaceQQ最終效果
2. 3D spaceQQ視覺還原
3D 鵝從設計軟件轉化為 H5 展示過程中，存在模型文件過大、材質缺失等問題，直接影響用戶體驗。在開發的過程中同學通過模型減面、重新選擇材質，還有模型拆分等解決方法，在視覺觀感和性能中建立了平衡的杠桿，最終實現了 15 個 SPACE QQ 的視覺還原。
△ 五款3D spaceQQ最終視覺還原效果
3. 視覺工作的同步進行
由于項目時間比較緊迫，而且 H5 加入了 3D 模型，還有需要大量的動效，所以需要在同一時間線上，同步進行，視覺稿輸出，動畫制作和 3D 模型打磨。考驗設計師的溝通和執行能力。與此同時，需要隨時和開發同步動畫 demo 以確保動畫可實現。和產品密集溝通，及時根據文案調整畫面。
因為 QQ 是陪伴了大多數用戶的一個產品，見證了整個互聯網社交的演變過程，容易引起用戶的情感共鳴。設計的初期，圍繞「個人軌跡」的主題發散了不同方向的視覺概念，在引起客戶共鳴感的復古元素和傳遞不斷「探索」未來的概念間尋找平衡點。最后沿用了 20 周年的太空概念貼合「探索」的主題，結合有年代特征的代表性視覺符號來引起「個人軌跡」的這一概念的用戶情感共鳴。另外，H5 運用了 3D 打造了 15 只太空鵝，打造「個人軌跡」的專屬感，既聯動用戶溫暖的回憶之余，也增添了一些小驚喜。
1. H5整體視覺風格
QQ，是陪伴了大多數人成長的一個互聯網產品，其本身帶有很多高辨識度的視覺元素，例如對話框，提醒上線的音效等。因為 H5 本身是一個大數據總結，專屬感非常強的一個產物，所以希望是喚醒用戶一些封塵已久的記憶，就像打開時間膠囊般的期待和感動。同時也象征著 QQ 一直陪伴在身邊，從而引起用戶的共鳴。
設計方面，除了通過一些標志性的視覺元素喚醒用戶的回憶之外，也加入 QQ 20周年的太空「探索」主題的元素，響應 20 周年的主題之余，也寓意 QQ 不斷地對外探索，從多個維度來看世界，尋找有趣的內容。
對話框，是承載數據的視覺符號，也是貫穿整個 H5 的重要視覺符號之一。寓意著 QQ 一直致力于「溝通」，而且不同時代的 QQ 對話框都各有特點，也是見證 QQ 時代變遷的重要元素，所以提取了三個階段代表性的對話框樣式來承載數據，并且加入有時代特征的視覺元素（如bb機，像素化的小箭頭等）作為輔助，增加 H5 的氛圍感，也算是視覺上的「小彩蛋」。
△ QQ原始對話框
H5 加入一些趣味感的元素，如笑臉，愛心等元素，背景輔以流動的彩色不規則圖案，來增加對話框的玩味。也寓意 QQ 20年來給用戶帶來源源不斷的樂趣，留下了不可取代的時代印記。
△ 重繪對話框
H5 中也加入了很多好玩的元素，不同時代所用的移動設備，融合貼近太空「探索」主題的背景；利用帶手套的手和不同的元素進行互動；增加重繪經典頭像的互動動畫，加入 QQ 空間的植物等懷舊元素，增加 H5 的可玩性和驚喜感。
△ 經典頭像的重繪
△ 經典頭像穿插在H5中的小彩蛋
△ 帶手套的手和有時代標簽的元素互動
1. 視覺動態化方案
在動畫制作前期會出一份詳細的動態化分頁策劃，以及一份盡可能表達完整的動畫 demo，能便于設計與開發能準確的估算出制作周期。在開發完成預研測試后，基于動畫 demo 共同制定一個大致的動態化方案──對話框等大面積使用代碼實現，其他裝飾性小元素全部使用序列幀。在觀眾每滑一頁即可觸發當前頁的動畫，且能保證大體動畫的流暢度。
2. 動畫制作
為了盡可能減少 H5 的運算體積，又保證畫面動態的流暢程度，導出的序列必須滿足以下所有條件：
△ 設計了4個不同的色塊流動loop，方便開發安插在每頁合適的位置
3. 導出與同步
在配合開發導出的階段，為了能明確序列的標記，所有序列文件命名為 xx-in/xx-loop/xx-out。使用同步工具以實現 AE 動畫序列導出和開發提取素材能同步進行，并保持實時更新和迭代。
△ 第6頁動畫導出序列
創建了四款全新的 spaceQQ，根據用戶的 QQ 年齡而設計。根據用戶的 QQ 年齡，分了四個款式的鵝：奢華，智能，閃亮和神秘四個概念，一個遞進的尊貴程度，刺激用戶分享欲。包括基礎款的 QQ 在內，共創造了 5 個類型的 spaceQQ。每個設計都基于基本 spaceQQ 的形式，但是套裝的顏色和細節根據各自的概念各有特色。
△ spaceQQ總覽圖
用戶可以根據自己的喜好更改這 5 款 spaceQQ 的裝扮顏色。
1. 專屬感
整個 H5 始終緊扣 QQ 20周年的太空「探索」主題，整個 H5，除了用數據喚醒用戶和 QQ 多年的點點滴滴之外，5 個 spaceQQ 概念設定，既能增加用戶的新鮮感，又能刺激用戶的分享欲，C4D 建立的 3D 形象豐富了整個 H5 的視覺層次，深化了 QQ 品牌的影響力，寓意鵝廠一直與時俱進，緊貼潮流。
2. 情緒調動
對于當下的運營活動來說，趣味性是引爆轉發量的重要元素，H5 結合 QQ 用戶創作的背景音樂和能夠調動用戶情感的設計語言來釋放用戶的情緒，比如驚喜感（用戶結合 QQ 的標志性音效創作的背景音樂），榮譽感（不同 Q 齡獲取相應的 spaceQQ）等，讓用戶產生持續的驚喜感，在懷舊和新鮮感中得到滿足，提升用戶活躍性。
QQ 20周年 H5 設計，嘗試結合了 3D，動畫，插畫等設計形態，為每一位用戶打造專屬的「個人軌跡」，通過數字，拼湊出和 QQ 的過往朝夕，引起用戶共鳴。鵝廠不斷創新探索的同時，也為用戶溫存屬于用戶自己的專屬回憶，深化 QQ 的品牌價值。
福利
考慮到部分同學想更仔細地查看、保存或收藏高清大圖的需求，我們設置了關鍵詞，微信公眾號后臺以「spaceQQ+序號」的方式回復，例如「spaceQQ1」，即可逐一獲取對應的高清頭像和壁紙。
掃碼領取專屬「個人軌跡」：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
