網(wǎng)頁版式設(shè)計和風(fēng)格在網(wǎng)頁設(shè)計中都是至關(guān)重要的元素，但它們的重要性因項目需求、目標(biāo)受眾和品牌特性等因素而異。無法簡單地說哪一個更重要，因為它們通常是相互關(guān)聯(lián)、相輔相成的。一個成功的網(wǎng)頁設(shè)計應(yīng)該既能滿足用戶的信息需求，又能給用戶帶來愉悅的視覺體驗，同時能夠準(zhǔn)確地傳達品牌的價值觀和形象。
因此，在網(wǎng)頁設(shè)計中，我們應(yīng)該根據(jù)項目的實際需求、目標(biāo)受眾和品牌特性等因素綜合考慮網(wǎng)頁版式設(shè)計和風(fēng)格的重要性，并在設(shè)計中找到它們之間的平衡點。
通過以上的實際應(yīng)用和案例分析，我們可以看到刪格系統(tǒng)和響應(yīng)式設(shè)計的結(jié)合在B端網(wǎng)頁設(shè)計中的重要性和實用性。這種結(jié)合方式能夠兼顧頁面的整體結(jié)構(gòu)和內(nèi)容的自適應(yīng)顯示，為用戶提供更加舒適、便捷的瀏覽體驗。因此，設(shè)計師在實際項目中可以考慮充分融合這兩種設(shè)計方法，以創(chuàng)造出更加出色的網(wǎng)頁設(shè)計作品。
菲茨定律在App產(chǎn)品設(shè)計中強調(diào)了目標(biāo)區(qū)域的大小和距離對用戶操作的影響。通過增大重要按鈕的大小、減少操作間距離、設(shè)計適合手勢操作的界面以及提供清晰的反饋指引，可以優(yōu)化用戶體驗，提高用戶操作的準(zhǔn)確性和效率。這個原理指導(dǎo)著設(shè)計師如何布局界面元素，使得用戶更輕松、更快速地進行交互操作，進而提升產(chǎn)品的易用性和吸引力。
在互聯(lián)網(wǎng)的廣袤世界中，門戶網(wǎng)站猶如一扇通往信息寶庫的大門，其設(shè)計的優(yōu)劣直接影響著用戶的訪問體驗和網(wǎng)站的價值。那么，在設(shè)計門戶網(wǎng)站時，究竟有哪些關(guān)鍵內(nèi)容需要我們格外留意呢？
首先，用戶體驗至上是不變的原則。門戶網(wǎng)站的布局應(yīng)當(dāng)簡潔明了，易于導(dǎo)航。用戶在進入網(wǎng)站的瞬間，就能迅速找到自己所需的信息分類和功能入口。頁面的加載速度至關(guān)重要，過長的等待時間會讓用戶失去耐心。因此，優(yōu)化圖片、腳本和代碼，確保網(wǎng)站能夠快速響應(yīng)，是提升用戶體驗的基礎(chǔ)。
視覺設(shè)計的吸引力也不容忽視。色彩搭配要協(xié)調(diào)舒適，符合網(wǎng)站的主題和定位。字體大小、行距和對比度要便于閱讀，避免造成視覺疲勞。同時，合理運用圖片和視頻等多媒體元素，能夠增強頁面的生動性和吸引力，但要注意不要過度使用，以免影響頁面加載速度和分散用戶注意力。
內(nèi)容的組織和呈現(xiàn)是門戶網(wǎng)站的核心。信息架構(gòu)要清晰合理，分類明確，便于用戶快速定位感興趣的內(nèi)容。重要的信息和熱門內(nèi)容要突出展示，采用醒目的標(biāo)題和布局。而且，內(nèi)容的質(zhì)量和更新頻率至關(guān)重要，只有提供有價值、新鮮的信息，才能吸引用戶持續(xù)訪問。
響應(yīng)式設(shè)計是適應(yīng)不同設(shè)備的關(guān)鍵。如今，用戶通過各種終端訪問網(wǎng)站，包括電腦、平板和手機等。門戶網(wǎng)站必須能夠自適應(yīng)不同的屏幕尺寸和分辨率，提供一致且優(yōu)質(zhì)的用戶體驗，確保在任何設(shè)備上都能完美呈現(xiàn)。
安全性是必須堅守的底線。保護用戶的隱私和數(shù)據(jù)安全是門戶網(wǎng)站的責(zé)任。采用可靠的加密技術(shù)，防止數(shù)據(jù)泄露和惡意攻擊，讓用戶能夠放心地在網(wǎng)站上進行操作和交流。
搜索引擎優(yōu)化（SEO）也是設(shè)計過程中需要考慮的重要因素。選擇合適的關(guān)鍵詞，優(yōu)化頁面標(biāo)題、描述和內(nèi)容結(jié)構(gòu)，有助于提高網(wǎng)站在搜索引擎中的排名，增加網(wǎng)站的曝光度和流量。
此外，交互性設(shè)計能夠增強用戶的參與感。例如，提供用戶評論、投票、分享等功能，促進用戶之間的交流和互動，讓網(wǎng)站不僅僅是信息的提供者，更是一個活躍的社區(qū)。
最后，測試和優(yōu)化是不斷完善門戶網(wǎng)站的必要環(huán)節(jié)。在網(wǎng)站上線前，進行全面的功能測試、兼容性測試和用戶體驗測試，收集反饋意見，及時發(fā)現(xiàn)并解決問題。上線后，持續(xù)監(jiān)測網(wǎng)站的性能和用戶行為數(shù)據(jù)，根據(jù)分析結(jié)果進行優(yōu)化和改進。
總之，門戶網(wǎng)站設(shè)計是一個綜合性的工程，需要綜合考慮用戶體驗、視覺設(shè)計、內(nèi)容管理、技術(shù)實現(xiàn)等多個方面。只有精心打造每一個細(xì)節(jié)，才能設(shè)計出一個功能強大、用戶友好、具有吸引力的門戶網(wǎng)站。
在數(shù)字化時代，PC端應(yīng)用作為人們工作、學(xué)習(xí)、娛樂的重要工具，其界面UI設(shè)計直接關(guān)乎到用戶的使用體驗和滿意度。一個優(yōu)秀的PC端應(yīng)用界面UI設(shè)計，不僅應(yīng)當(dāng)具備美觀的視覺效果，更要注重功能布局、交互邏輯以及用戶體驗的全面提升。那么，如何進行PC端應(yīng)用界面UI設(shè)計，以打造高效與美觀并重的用戶體驗?zāi)?？以下是一些關(guān)鍵要點。
不同操作系統(tǒng)、不同瀏覽器下的默認(rèn)字體是不同的，在網(wǎng)頁項目中可以通過 CSS 的 font-family 和 @font-face 來讓頁面渲染出適合當(dāng)前網(wǎng)頁的字體。
相信很多設(shè)計師同學(xué)都接觸過B端產(chǎn)品，對于很多設(shè)計師而言，遇上B端產(chǎn)品是一件令人又愛又恨的事情，愛是因為目前市場上大多數(shù)的公司主要經(jīng)營的都是B端系統(tǒng)，B端系統(tǒng)相對于C端來說UI界面顯得并沒有那么的重要，所以設(shè)計師的責(zé)任也相對沒有那么重，而恨是因為目前大多數(shù)B端系統(tǒng)頁面都是由前端UI框架搭建的，前端同學(xué)很多時候直接套用組件即可，所以UI設(shè)計師對于整個系統(tǒng)來講也顯得可有可無，導(dǎo)致設(shè)計師話語權(quán)也特別的低，甚至有些做B端系統(tǒng)的公司壓根不用UI設(shè)計師也能完成項目開發(fā)。
但是作為交互設(shè)計師(小公司一般是產(chǎn)品經(jīng)理)在B端卻特別吃香，并且擁有主要的話語權(quán)，因為我們主導(dǎo)這整個系統(tǒng)的基礎(chǔ)邏輯與業(yè)務(wù)邏輯設(shè)計，所以無論是前端還是后端同學(xué)都需要根據(jù)我們的設(shè)計進行開發(fā)，最終完成整個系統(tǒng)。
因此，今天這篇文章并不是告訴大家有哪些前端UI框架或后臺組件等..（相信這些大家也看得太多了，工作中都是套框架，能用得上的沒幾個），而是從交互上如何去看懂B端后臺的基礎(chǔ)邏輯以及以后自己晉升成產(chǎn)品經(jīng)理或者交互設(shè)計師時，怎樣去設(shè)計一個完整閉環(huán)的系統(tǒng)。
B端產(chǎn)品和C端不同，C端產(chǎn)品大多數(shù)都是針對個人用戶，設(shè)計的關(guān)系結(jié)構(gòu)相對來說比較簡單，每一個用戶擁有的權(quán)限都是一樣的，例如微信、淘寶等，我能看到的頁面你都能看得到，很少不存在權(quán)限差異問題。
而B端產(chǎn)品的用戶一般都是企業(yè)，企業(yè)用戶一般會管理著多個角色，也就是角色多元化（例如一些校園系統(tǒng)角色就分為：普通教師、級長、主任等角色），不同的角色對系統(tǒng)的需求和職能也不一樣，我們需要根據(jù)角色的需求去劃分不同的權(quán)限，讓他們互不干擾但又滿足他們的需求問題，因此B端產(chǎn)品的基礎(chǔ)邏輯比C端產(chǎn)品相對復(fù)雜。
看完上面文字的同學(xué)可能蒙了，又角色又權(quán)限的，能不能說點人話？
行！其實很簡單，B端系統(tǒng)無非三個邏輯（也是三個頁面）：用戶管理、角色管理以及菜單管理。（有些系統(tǒng)因為業(yè)務(wù)需求可能有部門管理，那么算上部門管理就四個）
為什么我把菜單放到最前面跟大家講？是因為菜單管理比前面兩個相對簡單，而什么是菜單也特別好解釋，大家可以直接認(rèn)為系統(tǒng)左側(cè)的頁面列表就是菜單，系統(tǒng)中擁有多少個頁面那么就有多少個菜單，你的菜單越多就以為著你的權(quán)限就越多。
菜單管理的作用就是用于管理員對整個系統(tǒng)頁面的管理（管理最主要就是增刪改查），而有一些公司為了減少開發(fā)工作量會直接不要菜單管理，有多少個頁面都由代碼直接寫死，管理員不能通過頁面進行人工配置，這樣會導(dǎo)致以后擴展會非常麻煩，當(dāng)然了，有一些系統(tǒng)的菜單幾乎不改的話，代碼寫死也沒問題。
在講解用戶之前我需要提前跟大家講一下什么是權(quán)限，準(zhǔn)確來講應(yīng)該是權(quán)限分為哪些？
在目前的后臺系統(tǒng)中，權(quán)限一共分為三種權(quán)限，分別是菜單權(quán)限（也就是上面介紹的）、數(shù)據(jù)權(quán)限以及操作權(quán)限。
菜單權(quán)限決定了用戶有沒有這個頁面，例如學(xué)校系統(tǒng)中，主任有看到所有教師的教學(xué)數(shù)據(jù)的界面，而教師卻沒有這個功能，那么在給主任新增賬號的時候就應(yīng)該把對應(yīng)菜單賦予進去?？瓷先ズ軓?fù)雜，其實具體操作就是新增的時候把對應(yīng)的菜單勾選上就可以了。
數(shù)據(jù)權(quán)限則決定用戶能不能看到對應(yīng)的數(shù)據(jù)。還是學(xué)校系統(tǒng)的例子，初中部主任只能看到初中部所有教師的教學(xué)數(shù)據(jù)，而高中部主任也只能看到高中部教師的教學(xué)數(shù)據(jù)，不同用戶能看到的數(shù)據(jù)也是不同的，所以在新增的時候需要給用戶配置（一般配置就是勾選）好對應(yīng)的數(shù)據(jù)權(quán)限。
但是這里有一個問題，配置數(shù)據(jù)權(quán)限時我們?nèi)绻粋€一個人去勾選配置的話會特別的麻煩，假如初中部主任只能看到初中部的老師，那么我在給他配置賬號的時候需要一個一個的初中老師勾選上，張三、李四、王五..等等，如果人多的話可能需要勾選成百上千次，用戶體驗就會變得特別差，因此現(xiàn)在的系統(tǒng)在配置數(shù)據(jù)權(quán)限時都是以部門為單位進行配置，也就是說，直接選擇部門就代表著擁有整個部門的數(shù)據(jù)權(quán)限。
最后操作權(quán)限即決定了用戶有沒有對數(shù)據(jù)進行操作（一般是增刪改查）的功能。還是上面的例子，初中部主任擁有查看教師的頁面以及數(shù)據(jù)，那么他能不能對教師們的數(shù)據(jù)進行增刪改查或者導(dǎo)入導(dǎo)出呢？這就取決于操作權(quán)限的配置了。目前很多的后臺系統(tǒng)在配置菜單權(quán)限的時候同時需要把操作權(quán)限進行配置（因為只能先有頁面才能進行操作），操作權(quán)限一般就是增加、刪除、修改以及查詢，當(dāng)然如果頁面還有導(dǎo)入導(dǎo)出或者其他功能，這些也需要在操作權(quán)限中進行配置。
用戶其實也很容易理解，B端系統(tǒng)的用戶其實就是需要登錄進系統(tǒng)的賬號，所以有一些系統(tǒng)的用戶管理也叫賬號管理。
因此用戶管理的作用就是對登錄進系統(tǒng)的賬號進行增刪改查等，當(dāng)我們需要對別人提供一個賬號時，我們就新增一個用戶的賬號密碼給他們，直到他們用完了再把他們的賬號進行刪除。
那么問題來了，上面我們說到，不同的用戶可能有不同的需求問題，那么就意味著我們每一個用戶給要他們分配不同的菜單去做他們的事情。
例如在學(xué)校系統(tǒng)中：普通教師只負(fù)責(zé)自己班級學(xué)生的成績錄入，所以普通教師只有班級成績錄入的菜單，但是學(xué)校主任卻不一樣，他不僅僅能看到各班學(xué)生成績，還能根據(jù)各班成績進行對比分析，年級學(xué)生排名等等..
因此在剛開始的傳統(tǒng)權(quán)限系統(tǒng)中，我們會直接把相應(yīng)的菜單權(quán)限、數(shù)據(jù)權(quán)限、操作權(quán)限賦予給用戶，每新增一個用戶我們就選擇好所有的權(quán)限都勾選上賦予給用戶，最后提供給用戶進行操作。
然而這種操作方式有一個弊端，就是如果每新增一個用戶，系統(tǒng)管理員就需要重復(fù)進行勾選相同的權(quán)限，那么就會耗費大量的精力（一個用戶要配置的權(quán)限特別多，如果用這個方式操作的話新增一個用戶可能就需要花費很長時間）。因此，為了解決這個問題，我們在用戶與權(quán)限之間建立了角色管理。
系統(tǒng)中角色的定義其實跟生活中是一樣的，我們把固定的權(quán)限集合到一起從而形成了角色。例如，生活中UI角色就負(fù)責(zé)頁面的視覺設(shè)計，而交互設(shè)計師則負(fù)責(zé)了產(chǎn)品的邏輯或者用戶體驗設(shè)計，這些角色擁有的權(quán)限一般很少變化，也幾乎不會進行刪除或者修改，就好像UI設(shè)計師或者交互設(shè)計師這些角色不會一時半刻就被完全消滅一樣。
有了角色，我們可以先把對應(yīng)的權(quán)限集合賦予給角色，然后新增用戶時，再選擇用戶對應(yīng)的角色即可。
這樣做的好處是什么呢？好處就是當(dāng)我們新增用戶的時候，如果是相同角色的用戶，我們不再需要重復(fù)去大量勾選相應(yīng)的權(quán)限了，只需選擇好該用戶是那個角色就可以間接對用戶賦予權(quán)限，并且后續(xù)要對用戶進行權(quán)限的修改也十分便捷。因此，在現(xiàn)在的后臺系統(tǒng)中，大多數(shù)都是采用權(quán)限賦予角色，然后新增用戶時再選擇用戶對應(yīng)的角色的方式。
如果看完上面的知識點還有點懵的話也沒關(guān)系，這部分給大家展示在后臺系統(tǒng)中菜單管理、角色管理與用戶管理的實際應(yīng)用是怎樣的。
第一步先查看菜單管理有哪些內(nèi)容，一般情況下，一個成熟系統(tǒng)的菜單頁面幾乎是已經(jīng)固定不變的，那么也就是說菜單管理列表中所擁有的菜單都不需要怎么操作，列表中有多少數(shù)據(jù)就代表著系統(tǒng)總體有多少菜單。
第二步進行角色管理，如果是成熟系統(tǒng)的話，角色管理的角色也早已經(jīng)分配好了，我們并不需要過多的進行操作，但如果是剛研發(fā)完成的系統(tǒng)，那么我們就需要根據(jù)現(xiàn)實的用戶需求進行角色的設(shè)置，具體添加角色的主要參數(shù)包括角色名稱、菜單權(quán)限、數(shù)據(jù)權(quán)限以及操作權(quán)限（其實也就是上文介紹的三種權(quán)限），其他的參數(shù)都是根據(jù)自身業(yè)務(wù)進行添加。
最后一步就是用戶管理，配置好角色后，我們就可以根據(jù)需求進行用戶的新增操作，例如現(xiàn)在我們需要新增一個賬號進行登錄系統(tǒng)，那么在用戶管理頁面中點擊新增按鈕，隨后填寫用戶名稱與密碼，最后選擇用戶角色，點擊確定按鈕即可完成（因此，新增用戶的三個必要參數(shù)是用戶名、密碼以及角色，有部門的需要填寫所屬部門，其他參數(shù)根據(jù)系統(tǒng)業(yè)務(wù)進行添加）。添加完成后你們可以試一試使用自己所填寫的用戶名密碼登錄后臺系統(tǒng)，隨后體驗一下作為其他角色是否能完成自身需要的業(yè)務(wù)。
用戶管理、角色管理以及菜單管理是B端系統(tǒng)最基礎(chǔ)的邏輯，也是同學(xué)們將來需要轉(zhuǎn)崗B端交互設(shè)計師或者產(chǎn)品設(shè)計師所必須掌握的知識，上面所介紹的僅僅是RBAC模型中最簡單的一種，現(xiàn)實設(shè)計中可能出現(xiàn)各種情況，因此關(guān)于這次的B端產(chǎn)品設(shè)計我想給大家?guī)cTips：
1、在現(xiàn)實開發(fā)中，后臺系統(tǒng)并不一定像我上面所說的那么完善，有些系統(tǒng)并不需要菜單管理，老板要求直接代碼寫死就好了，又或者有些系統(tǒng)就只有一個角色，那么角色管理也不需要了，這些情況都是有可能發(fā)生的，所有我們做設(shè)計的時候除了運用自己的知識以外，更多的是工作經(jīng)驗，知識是死的，人是活的，永遠(yuǎn)別忘了設(shè)計的本質(zhì)是解決用戶需求問題。
2、很多時候后臺的邏輯管理會比我上面說的要復(fù)雜的多，例如一個用戶可以擁有多個角色嗎？不同角色能不能有相同的權(quán)限？如果有角色被刪除了，那么該角色關(guān)聯(lián)的所有用戶應(yīng)該怎么處理？可能你認(rèn)為這些并不是自己目前需要考慮的問題，但是除非你以后并不想晉升到更高的位置，不然這些問題以后肯定會遇到的。
3、上面介紹的管理操作都是基于超級管理員賬號（admin）進行操作的，如果你拿一個普通賬號的話一般是沒有對應(yīng)的菜單權(quán)限，我擔(dān)心有同學(xué)看完文章后馬上登錄自己的后臺系統(tǒng)進行操作，接著登錄進去找了半天都沒有找到對應(yīng)的菜單在哪里。
好了，最后希望文章能讓大家有所收獲，如果大家有不明白或者其他想法的話，歡迎大家一起探討，共勉。
文章來源：優(yōu)設(shè)網(wǎng) 作者：北沐而川
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經(jīng)常遇到對統(tǒng)計的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們設(shè)計師在設(shè)計圖表的過程中，如果沒有系統(tǒng)的可視化知識，會出現(xiàn)設(shè)計的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么，在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設(shè)計過程有所幫助。
// 為什么要數(shù)據(jù)可視化
數(shù)據(jù)可視化就是用圖表來表示數(shù)據(jù)信息，它所傳達的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數(shù)據(jù)，用表格的形式呈現(xiàn)是很難有所洞察的；如果將各個地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn)，很容易就能看出各個地區(qū)間數(shù)據(jù)的差異，并從中洞察規(guī)律
關(guān)于如何設(shè)計好數(shù)據(jù)可視化圖表，這邊總結(jié)了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應(yīng)式適配。
一、選擇適合的圖表
數(shù)據(jù)可視化的圖表種類繁多，當(dāng)我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據(jù)是考慮所要傳達的信息意圖，即所要制作的圖表它的任務(wù)是什么，再通過分析數(shù)據(jù)關(guān)系來選擇表達方式；第二層意圖是圖表傳達內(nèi)容，這時候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強化。
1. 分析數(shù)據(jù)關(guān)系
根據(jù)數(shù)據(jù)分析的方式來看，每一種圖表都對應(yīng)了一種數(shù)據(jù)關(guān)系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu)，再結(jié)合數(shù)據(jù)關(guān)系作出選擇。了解圖表的可能知道，一般圖表的數(shù)據(jù)關(guān)系有構(gòu)成、比較、分布，以商業(yè)數(shù)據(jù)為例，常見的還有流轉(zhuǎn)關(guān)系。
構(gòu)成關(guān)系
構(gòu)成關(guān)系的圖表表達的是部分和整體的關(guān)系，用于分析總體和各部分的占比比例，構(gòu)成關(guān)系一般局部元素加起來為總數(shù)。如果只是想對比個別組成部分的大小，也可以使用比較關(guān)系的圖表。
常用圖表：餅/環(huán)圖、堆疊圖、面積圖等，如涉及到層級結(jié)構(gòu)，還會用矩形樹圖或旭日圖等特殊結(jié)構(gòu)圖表。
關(guān)鍵詞：“占比、比例、百分比”
比較關(guān)系
比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類型。在一定的取值范圍內(nèi)，通過對兩個或兩個以上的指標(biāo)分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內(nèi)數(shù)據(jù)的變化，分類對比用于比較數(shù)據(jù)規(guī)模。
常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關(guān)鍵詞：“增減、升降、漲跌、波動”
分布關(guān)系
利用空間分區(qū)來展示數(shù)據(jù)之間的分布關(guān)系，常用于體現(xiàn)兩個或以上數(shù)據(jù)的相關(guān)性。
常用圖表：散點圖、熱力圖、雷達圖等
關(guān)鍵詞：“隨著……而變化、A/B之間的相關(guān)性、交/并集”等
關(guān)聯(lián)與流轉(zhuǎn)
流轉(zhuǎn)關(guān)系是B端數(shù)據(jù)常用的一種關(guān)系，它可以動態(tài)的體現(xiàn)相關(guān)路徑下對象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個狀態(tài)或?qū)ο笾g的流動量或流動強度。
常用圖表：關(guān)系圖、桑基圖、漏斗圖、進度圖等
關(guān)鍵詞：“流程步驟、留存、轉(zhuǎn)化、關(guān)系”
2. 分析數(shù)據(jù)特征
按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類型后，第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見數(shù)據(jù)特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標(biāo)通常有兩類特征，按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會統(tǒng)計一組數(shù)據(jù)的變化趨勢，離散數(shù)據(jù)通常統(tǒng)計各分類下數(shù)量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標(biāo)系去展示多個維度變量。如果希望對比多組數(shù)據(jù)，可使用不同顏色進行分類
層級特征
多層級數(shù)據(jù)由多個部分構(gòu)成一個整體，又稱樹形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹圖表表現(xiàn)以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結(jié)構(gòu)。長方形的大小取決于各國家的平均銷售額，通過色調(diào)來區(qū)分不同類型，顏色的深淺代表分類下的子集，面積體現(xiàn)銷售占比。對比一般結(jié)構(gòu)樹圖表，它的優(yōu)勢在于可以有效利用空間。
流程特征
流轉(zhuǎn)關(guān)系是表達數(shù)據(jù)轉(zhuǎn)化流程的重要類型，不僅包含統(tǒng)計意義上的數(shù)據(jù)總和，同時還表達了信息流轉(zhuǎn)的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是?；鶊D重點強調(diào)流量的強度和走向，漏斗圖更加注重突出轉(zhuǎn)化率和效果，根據(jù)不同的表達目的選用。
二、強化視覺層次
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現(xiàn)數(shù)據(jù)特點。
1. 強化數(shù)據(jù)特性
使用圖表正確的表達信息，需要設(shè)計師在強化數(shù)據(jù)特性的同時避免偏差
2. 色彩視覺傳達
除了在設(shè)計構(gòu)圖上優(yōu)化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數(shù)據(jù)的感知，錯誤的取色會讓信息讀取產(chǎn)生誤解。我們可以通過不同的分析目的設(shè)置意圖色板，精確傳達信息同時后續(xù)的項目在選用時也可以達到用色的統(tǒng)一。
我們在之前的文章里有介紹過圖表的取色模型，通過調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調(diào)來進行分類
數(shù)據(jù)內(nèi)在沒有順序差別時，建議使用色調(diào)值（H）進行區(qū)分；如定義國家、行業(yè)等類型。如果希望圖表看起來更加專業(yè)，以下有幾項分類色板的小建議：
定量型：使用深淺色板強調(diào)內(nèi)在順序
如果在同一個分類下包含子類別，或者數(shù)據(jù)本身具有排名屬性，那么建議使用連續(xù)色板來突出他們內(nèi)在的順序，使圖表更加易讀。
三、圖表中的響應(yīng)式設(shè)計
B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁或移動端上動態(tài)顯示。不同于平面展示或匯報，在基礎(chǔ)設(shè)計完成后還需要考慮到圖表展示的環(huán)境，根據(jù)不同端去適配顯示效果，以適應(yīng)各種復(fù)雜情況。而動態(tài)顯示帶來的交互特性也讓數(shù)據(jù)展示有了更多的可能性。
1. 布局框架適配
在網(wǎng)頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài)，將非必要的的元素轉(zhuǎn)化或隱藏，保留重要的圖形元素去適應(yīng)當(dāng)前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產(chǎn)生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當(dāng)前空間的效果。
2. 圖表元素適配
要適配移動端，網(wǎng)頁端橫向延展的顯示方式需要適應(yīng)移動端縱向空間的顯示。除了呈現(xiàn)角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關(guān)的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預(yù)知客戶傳入的數(shù)據(jù)量，可能會遇到因數(shù)據(jù)量過多，造成圖表顯示不佳，數(shù)據(jù)讀取困難等問題。這種情況下，提前考慮數(shù)據(jù)極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點擊下鉆、聯(lián)動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。
// 結(jié)語
數(shù)據(jù)可視化在B端設(shè)計場景中發(fā)揮著重要作用。設(shè)計師在表達數(shù)據(jù)之美的同時更加準(zhǔn)確，才能更直觀地向用戶傳達數(shù)據(jù)的價值。使業(yè)務(wù)人員能夠從復(fù)雜的業(yè)務(wù)數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù)，確保用戶能夠更好的接收信息，才是可視化的關(guān)鍵。
* 以上圖表中均為虛擬數(shù)據(jù)，僅作為案例參考
感謝閱讀，以上內(nèi)容均由百度MEUX團隊原創(chuàng)設(shè)計，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請注明出處，違者必究，謝謝您的合作。申請轉(zhuǎn)載授權(quán)后臺回復(fù)【轉(zhuǎn)載】。也歡迎加入MEUX,視覺/交互/運營設(shè)計師，可投簡歷至MEUX@BAIDU.COM (注明信息獲取來源如：站酷）
關(guān)于我們：
MEUX,百度移動生態(tài)用戶體驗設(shè)計中心，負(fù)責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設(shè)計。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。MEUX以「簡單極致」為設(shè)計理念，創(chuàng)造極致用戶體驗的同時賦能商業(yè)，推動設(shè)計行業(yè)的價值和影響力，讓生活因設(shè)計而更美好。
博學(xué)多聞，不同凡響。
博聞美育，是一款致力于提升用戶文化素養(yǎng)的產(chǎn)品。研發(fā)團隊以“長見識，會思考，懂審美”作為核心理念，設(shè)計出《中國故事》《四方采風(fēng)》《高端文學(xué)》等的系列課程。
面對一個真正落實人文素養(yǎng)的全新課程產(chǎn)品，我們作為視覺設(shè)計師，首先希望的就是為用戶打造出最美的課堂，使用戶在高品質(zhì)的美學(xué)場景中能沉浸式體驗到學(xué)習(xí)的樂趣。當(dāng)然，我們同樣希望探尋如何通過設(shè)計幫助青少年在使用產(chǎn)品時養(yǎng)成高審美意識，加強文化自信。
在此次對博聞產(chǎn)品的視覺品牌設(shè)計中，設(shè)計團隊探尋了如何將視覺設(shè)計體驗與課程教學(xué)更好的結(jié)合，以下為我們的設(shè)計過程以及設(shè)計成果。
首先，我們通過對產(chǎn)品特性的分析，明確了此次視覺品牌探索的主要設(shè)計目標(biāo) —— 重新定義什么是提升學(xué)習(xí)體驗的人文素養(yǎng)產(chǎn)品，從用戶視角轉(zhuǎn)變?yōu)閰⑴c者，更加沉浸于課堂。
基于對設(shè)計目標(biāo)的進一步探索，我們提煉出了提升學(xué)習(xí)體驗的三種核心理念：
近年來，國潮文化與傳統(tǒng)藝術(shù)在青少年群體中“走紅”，成為青年對話傳統(tǒng)的方式。體現(xiàn)了青少年對中華優(yōu)秀傳統(tǒng)文化的價值認(rèn)同和情感認(rèn)同。我們希望在青少年養(yǎng)成審美與內(nèi)在的關(guān)鍵階段，也盡到自己的一份小小的努力。
在保留傳統(tǒng)藝術(shù)精華的基礎(chǔ)上，我們尋求視覺上的創(chuàng)新，突破設(shè)計的思維慣性，使用戶可以通過現(xiàn)代的視覺表達形式與經(jīng)典文化產(chǎn)生共鳴，傳達國風(fēng)之美，多角度喚起青少年用戶對于傳統(tǒng)經(jīng)典的文化價值和藝術(shù)價值的理解。
我們希望將國風(fēng)之美呈現(xiàn)在用戶面前，將有道博聞系列課程全面包裝成能夠讓學(xué)生身臨其境的國風(fēng)互動課堂，豐富用戶的心智，發(fā)揮產(chǎn)品的雙重價值。
確立核心理念后，我們將中國傳統(tǒng)藝術(shù)中的精髓進一步提煉，最終選擇了以下關(guān)鍵詞作為視覺設(shè)計的表現(xiàn)點：
接下來，我們基于各個關(guān)鍵詞對具體方案展開探索
容納承載，歷史淵源。
為了確保博聞三個系列的課程（《中國故事》《四方采風(fēng)》《高端文學(xué)》）在品牌視覺設(shè)計上能夠更好的進行拓展應(yīng)用、傳播差異化、與用戶情感共鳴。我們結(jié)合了三個系列課程的特點與對傳統(tǒng)文化的研究，分別為各個課程建立了代表性的元素作為超級符號，加強用戶的記憶點：
① 中國故事 —— 講述中華經(jīng)典
中國故事系列課程會通過詩、詞、歌、賦、散文、小說全類型文學(xué)作品，講述中華經(jīng)典。玉璽作為皇帝的玉印，是至高權(quán)力的象征，在各朝各代中見證了各色各樣的傳奇故事。因此選用【玉璽】作為中國故事的符號圖形。
四方采風(fēng)系列課程首次“走出屏幕”，采用文化直播結(jié)合外景采拍的形式，在歷史文化名城中講述各地的風(fēng)土人情。使用【中國古建筑】作為這一系列課程的超級符號，見證和反映了各地社會的發(fā)展和歷史變遷。
高端文學(xué)系列課程將帶領(lǐng)用戶學(xué)習(xí)重磅文學(xué)作品，該系列選用【卷軸】作為代表符號，卷軸不僅承載了國人對中國繪畫、書法的認(rèn)識，更是寫入了古人的思想與信念。
在確認(rèn)好三個系列的代表符號后，我們將構(gòu)圖一分為二，左邊作為系列的重點信息區(qū)域，右邊作為符號以及視覺表現(xiàn)區(qū)域。
濃墨淡彩，總相宜。
在視覺品牌的色彩方面，我們從古代寫意的濃墨重彩中，提取出了富有中國氣質(zhì)的一抹顏料。
歷史厚重的「紅」，風(fēng)光寫意的「綠」，靜心閱讀的「藍(lán)」代表了三個系列課程各自獨有的氣質(zhì)。
剛?cè)岵性屏魉?
我們依據(jù)行楷的筆畫特點，設(shè)計了三個系列的第一識別字體。「行楷」介于楷書與行書之間，比端正的楷書多一分活潑自由，又比隨性的行書多一份端莊。我們在此行楷的靈活中增添一抹穩(wěn)重，剛?cè)岵?，恰到好處?
第二識別字體的設(shè)計靈感來源于印章。「印章」的歷史可以追溯到戰(zhàn)國，至今仍在生活中廣泛應(yīng)用，古人鑿銅刻玉，力艱功深，我們希望這種信念依舊可以傳承在青少年的品格中。受到印章印面形式的啟發(fā)，設(shè)計了第二識別字體。文字采用現(xiàn)代字體為基礎(chǔ)，增加辨識性。
清新淡雅，水天一色。
國畫，以其永恒的藝術(shù)魅力穿越時空。國畫的繪制講求布局、造型、運筆、賦彩，不拘泥于自然物象的再現(xiàn)，強調(diào)主觀意境的創(chuàng)造，是中華民族傳統(tǒng)文化的瑰寶。我們借鑒了國畫中工筆畫的「留白」構(gòu)圖理念，并添加水墨畫中的「墨韻」作為細(xì)節(jié)補充，創(chuàng)作了既符合現(xiàn)代視覺風(fēng)格，又不失古韻的插畫；
最終，我們將提煉出的「符號」「色彩」「書法」「國畫」這四個關(guān)鍵詞融合在系列課程之中。
除了設(shè)計課程產(chǎn)品常規(guī)的講義以及線上頁面，為了進一步提升用戶的沉浸式學(xué)習(xí)體驗，有道博聞獨創(chuàng)了「手賬本」這一教輔材料，并且隨課程附贈可以使用戶進一步體驗傳統(tǒng)藝術(shù)魅力的「國風(fēng)禮盒」。
「手賬本」可以幫助用戶將課上的知識融會貫通，并收入「手抄報」「旅行MAP」「作家名片」「思維導(dǎo)圖」等模塊，讓用戶深度參與到【輸入-加工-輸出】的產(chǎn)品結(jié)構(gòu)中，使用戶充分吸收課堂知識、加入自己的思考理解，并最終輸出觀點和總結(jié)?！韭?想-做】循環(huán)，鞏固知識印象。我們最終會收集用戶的優(yōu)秀作品，并集結(jié)成刊，出版成冊，進一步提升用戶的參與度，增強他們的學(xué)習(xí)熱情。
在手賬本的視覺設(shè)計中，我們根據(jù)課程內(nèi)容繪制了精美插圖，考慮到用戶書寫的便捷性，設(shè)計了古風(fēng)的書寫外框，力求用戶可以時時刻刻沉浸在充滿國風(fēng)之美的課堂中，使視覺設(shè)計與教學(xué)內(nèi)容完美融合。
「國風(fēng)禮盒」將“長見識，會思考，懂審美”的概念植入到禮盒的選品和包裝中。封面設(shè)計我們選用了「時空穿梭」的概念，通過時空隧道，串聯(lián)古今，大開眼界。禮品內(nèi)容里，充分尊重用戶的喜好，最終選取了「國畫顏料」「手繪扇子」「國風(fēng)筆記本」「考古盲盒」。每一份禮品，都充滿著我們對它的嚴(yán)格要求和對用戶參與的期待。
“古老的種子，它生命的胚芽蘊藏于內(nèi)部，只是需要在新時代的土壤里播種?！?nbsp; ——泰戈爾
中華傳統(tǒng)文化正是一顆充滿驚喜和生機的種子，靜待著我們的細(xì)心發(fā)掘。我們會繼續(xù)探索，用設(shè)計在新時代中傳承優(yōu)秀傳統(tǒng)文化。讓傳統(tǒng)藝術(shù)擁抱青少年，讓東方美學(xué)成為青少年心中最引以為豪的文化。
本次有道博聞項目的設(shè)計過程中，我們牢記以用戶為中心的理念，做與課程產(chǎn)品融合的設(shè)計，最終收獲了一份寶貴的經(jīng)驗，也獲得了用戶的一致好評和贊許。未來，設(shè)計團隊也會堅持做以用戶為中心的產(chǎn)品，傳達設(shè)計的力量。
相信種子，相信力量。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者： 有道LCT設(shè)計團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
Apple One里面有6款不同類型的應(yīng)用捆綁在一起，頁面開篇這6款應(yīng)用圖標(biāo)橫向平鋪，隨后依次翻轉(zhuǎn)，接著Apple One也翻轉(zhuǎn)出來，向用戶強調(diào)它們被包含在該產(chǎn)品里。
品牌圖標(biāo)演化出多種圓形內(nèi)容，內(nèi)容還會不斷變化切換，最后又融合成品牌圖標(biāo)，簡單明了直觀告訴用戶這個功能可以解決用戶哪些問題。
開篇在淺黃色背景上告訴用戶智能家居應(yīng)用被重新設(shè)計，隨后不斷加深的黃色房屋造型逐漸由大變小疊加起來組成了Home app的圖標(biāo)，引出介紹內(nèi)容；通過放大品牌情感溫度從而向用戶傳達品牌理念。
為了讓更多的人使用Apple Pay，蘋果向用戶展示了真實的使用過程，降低認(rèn)知成本，讓用戶更容易接受并使用。
用全屏視頻內(nèi)容刺激用戶感官，然后內(nèi)容逐漸縮放到電視內(nèi)，一開始就把試聽體驗注入到了用戶腦海中。
背景顏色及內(nèi)容伴隨電視中的視頻一同切換，讓用戶明確感知產(chǎn)品能做哪些內(nèi)容。
特寫展示遙控器，隨著遙控器角度變化，內(nèi)容也跟著變化，就像有位銷售拿著產(chǎn)品在你面前，詳細(xì)為你講解每一個按鍵的功能。
蘋果錢包圖標(biāo)及文字逐漸放大向下移動，并將文字頂出屏幕以外；整體接著放大，錢包底子繼續(xù)下移消失，只留下錢包內(nèi)的彩色卡片，說明文字上升出現(xiàn)。
隨著頁面往下，藍(lán)色卡片向上移動，卡片內(nèi)文字漸顯，頁面整體變成藍(lán)色，蘋果巧妙的將圖標(biāo)元素與賣點內(nèi)容結(jié)合，并通過不同顏色來區(qū)分不同內(nèi)容。
滑到頁面最底部，四張彩色卡片又逐漸插到錢包里，最后再強調(diào)用戶去使用。
賣點先后出現(xiàn)，層層遞進，隨后產(chǎn)品被新功能及核心特點彈開， 將產(chǎn)品大、有多大、續(xù)航強以及新功能先后映射到了消費者腦海里。
產(chǎn)品用廣角的視角依次出現(xiàn)，一方面展示產(chǎn)品顏色規(guī)格、另一方面暗示產(chǎn)品屏幕大。
Plus和電池一同進行充電動畫，僅僅一個關(guān)鍵詞和一個圖標(biāo)，就形象的描述了電池容量大的事實，緊接著更加具體的參數(shù)逐一顯示，強化究竟有多大。
產(chǎn)品旋轉(zhuǎn)運動最后合并成一個由大變小，最后出現(xiàn)價格，強調(diào)改產(chǎn)品很實惠。
手機旋轉(zhuǎn)放大，原來的桌面壁紙變成了產(chǎn)品賣點的背景，將產(chǎn)品和賣點順滑的聯(lián)系在一起。
電池圖標(biāo)與賣點一起進行充電動畫，將賣點順其自然的表達出來。
讓每一句文案絲滑的連接出現(xiàn)，讓用戶能夠感知出產(chǎn)品低延遲的優(yōu)點，接著產(chǎn)品側(cè)影出現(xiàn)將之前內(nèi)容擦除，引出處理器的強大。
就如賣點所說，產(chǎn)品很貼心的前后為你旋轉(zhuǎn)展示它的面板，讓用戶看的真真切切。
水花下落被手機彈開，直觀的告訴用戶它是防水的。
漆黑的背景寫著14Pro的標(biāo)題，隨后標(biāo)題消失，同時產(chǎn)品從無限大縮小，看完這個動畫才發(fā)現(xiàn)，原來之前漆黑背景是新款產(chǎn)品的靈動島，隨后靈動島展示了在不同場景下的狀態(tài)，吸引了用戶注意。
產(chǎn)品說明內(nèi)容使用新款手機墻紙進行漸變顯示，加強了用戶對新款產(chǎn)品的感知。
運用視差，營造空間感，手機和里面的內(nèi)容先是很大，并且展示第一段說明內(nèi)容；隨著鼠標(biāo)往下滑，手機縮小屏幕內(nèi)容變化，營造了一個真實的場景畫面，來強化新功能的賣點。
標(biāo)題不斷放大，文字中間的圓逐漸演變成一個圓角矩形，隨后帶出靈動島功能動畫，用戶從頭到尾都沉浸在蘋果編排的情節(jié)中，用戶喜歡了解新功能也就順理成章了。
內(nèi)容往下看，箭頭按鈕從左向右滑動，顯示查看詳細(xì)內(nèi)容的入口，引導(dǎo)用戶點擊查看，這樣做沒有哪位用戶會拒絕自己的好奇心點進去看看。
最開始只有大標(biāo)題和一個科技感的芯片，隨著頁面下滑，詳細(xì)內(nèi)容顯現(xiàn)，芯片伴隨著分層鏡頭元素逐漸組裝起來，展現(xiàn)出了產(chǎn)品的科技與精密。
手機背部攝像頭用特寫鏡頭伴隨機身從平視到俯視的角度變化，將用戶視線引到攝像頭上，隨后顯示說明文案強化產(chǎn)品宣傳。
開篇全屏出現(xiàn)一朵具有科技感的3d花朵收攏綻放的視頻，隨后鏡頭后推，2臺產(chǎn)品旋轉(zhuǎn)展開，呈現(xiàn)出一個展翅翱翔的造型，傳達出產(chǎn)品性能強勁展翅高飛的勢能。
處于合起的筆記本漸漸被打開，里面播放著三維動畫界面，暗示用戶它正在處理三維任務(wù)，隨后旋轉(zhuǎn)出2臺電腦，關(guān)于電腦的核心參數(shù)被顯示出來，告訴用戶具體哪些性能有了提升。
電腦屏幕做爆炸圖動畫處理，形象展示內(nèi)部結(jié)構(gòu)，吸引用戶關(guān)注產(chǎn)品特點內(nèi)容。
多臺不同顏色的電腦旋轉(zhuǎn)排列，鏡頭不斷變換角度，最后依次排在一起用側(cè)視圖來喚出標(biāo)題，在營造出歡快的氛圍的同時，還體現(xiàn)出產(chǎn)品多彩的特點。
顏色文案內(nèi)容不斷切換，電腦變換不同組合方式輪番切換展示，接著營造歡快氛圍。
體現(xiàn)電腦薄的文案放大顯示，隨著頁面往下，文字縮小，逐漸被電腦側(cè)邊遮住，用動態(tài)對比的方式讓用戶感受到電腦的厚度很薄，再往下，屏幕微抬，搭配關(guān)于屏幕旋轉(zhuǎn)角度的賣點。
電腦切換顏色體現(xiàn)內(nèi)容發(fā)生變化，旋轉(zhuǎn)角度可以全方位看清新版插口的位置以及體現(xiàn)更方便的使用。
支持多方應(yīng)用的文案在應(yīng)用圖標(biāo)的包圍中下落，下落的過程中同步顯示的應(yīng)用可以體現(xiàn)支持的應(yīng)用多，最后和詳細(xì)介紹文案碰撞，可以很好的銜接用戶的閱讀視線。
產(chǎn)品逐漸被放大，鏡頭進入內(nèi)部，里面迸發(fā)碰撞的液體體現(xiàn)產(chǎn)品內(nèi)部有著強勁動力。
承接上一個內(nèi)容，體現(xiàn)剛才那么強大的動力的源泉就在你眼前，去選一個吧，伴隨著芯片的光影運動，讓你覺得這是一個具有魔法般的嶄新器物。
深入產(chǎn)品內(nèi)部，不同顏色的光束旋轉(zhuǎn)流動，用具象的形式體現(xiàn)產(chǎn)品在散熱方面的工作原理以及性能是多么強。
產(chǎn)品快速運動對文字造成拖尾效果，體現(xiàn)產(chǎn)品的輕，以及速度快。
文案內(nèi)容居于2臺電腦狹小縫隙之間，有一種壓迫感，體現(xiàn)出新產(chǎn)品的實力很強大，緊接著M2芯片由大變小出現(xiàn)，交代出產(chǎn)品之所以強大得益于芯片。
屏幕里的應(yīng)用在不停的變換，體現(xiàn)電腦在進行不同的應(yīng)用操作，隨后文字出現(xiàn)，強調(diào)續(xù)航能力很高。
2臺電腦屏幕旋轉(zhuǎn)變化，對比出2者間攝像頭位置做了更新。
產(chǎn)品旋轉(zhuǎn)，展現(xiàn)輕薄側(cè)面，搭配攜帶更少，攜帶更多的文案，讓消費者更加肯定它的輕薄。
看了蘋果公司網(wǎng)站中的動畫，不難看出，動畫的核心功能就是用關(guān)聯(lián)的方式強調(diào)、強化賣點
具體方法如下：
1、產(chǎn)品如果有多種顏色，那就盡量在畫面中一起體現(xiàn)
2、讓產(chǎn)品自己說話，善于利用產(chǎn)品的不同角度、運動方式強化產(chǎn)品功能特征
3、不做無用動畫，讓每一個動畫表達明確的意圖，不要讓用戶覺得它只是在動
4、把控文案展現(xiàn)在用戶眼前的先后順序，用故事把它們串聯(lián)在一起，從而掌控用戶閱讀節(jié)奏
最后我們試想一下，如果網(wǎng)站中的動畫內(nèi)容全部變成靜態(tài)，那會帶來什么樣的后果
1、內(nèi)容會變得枯燥，賣點得不到強化，用戶購買欲下降
2、靜態(tài)內(nèi)容很難描述一些抽象的功能，例如：如何體現(xiàn)產(chǎn)品散熱很好，音質(zhì)怎么個好法
3、內(nèi)容太多占空，原本一個動畫就能說明的內(nèi)容，非要寫大篇文字
藍(lán)藍(lán)設(shè)計的小編 http://www.miumiuwan.com