在日常的生活中，我們總是容易被一個故事吸引，而且更愿意傾聽故事，對故事內(nèi)容也更容易理解。講故事，是一種比較自然的溝通方式。

作為一個用戶體驗設計師，你是否有想過，利用人類對故事天然的 “親近感”，輔助我們在日常的設計工作中解決問題？

在本期的思考中，我試圖從一個好故事所具備的特質中，找到我們?nèi)粘ＴO計工作中可以借鑒的方法。

本期提綱：

• 為什么會思考 “體驗設計師可以從講故事中學到什么？”
• 梳理故事要素，全面了解用戶
• 參考故事結構，引導完成任務
• 明確主線支線，輔助聚焦目標
• 結語

為什么會思考

“體驗設計師可以從講故事中學到什么？”

這要從 B 站那些的知識區(qū) UP 主說起。

最近，在不知覺中，我養(yǎng)成了在 B 站追更知識區(qū) UP 主的習慣。比如 “法外狂徒” 羅翔老師，常以 “張三” 為主角，將嚴肅枯燥的法律知識點，串聯(lián)成一個個普法故事，妙趣橫生。這些視頻內(nèi)容，都很擅長使用最簡單的故事講述復雜的專業(yè)問題，能夠讓沒有專業(yè)背景的普通人聽得懂，看進去，學習到知識。

故事在復雜的知識和觀眾之間架起了一座溝通的橋梁。

因此，我開始思考，將故事中一些引人入勝的技巧和方法，用到體驗設計中幫助用戶理解信息、參與互動。

梳理故事要素，全面了解用戶

以下哪段描述更吸引你呢？

• “凱文到了理發(fā)店，在理發(fā)店等了一個小時，最后理了發(fā)?！?
• “上了一周班的凱文周末想剪頭發(fā)。天氣很熱，走到時凱文已滿頭大汗。開門瞬間他心一沉，顧客擠滿了理發(fā)店，他在旁無聊的等了一個小時，最后總算理了一個滿意的發(fā)型。”

這兩段描述其實講的是一個事情，但是后者包含了講故事最重要的六個要素：

因此，將這兩段描述一起比較，前者是簡陋生硬的流水賬，后者則是完整生動的故事。從生動的故事中，我們更能體會到人物的所有行動以及情緒。

通過六個要素塑造一個人物角色的故事，讓我們能快速在腦海構建一個立體的角色形象。在日常的設計工作中，每個產(chǎn)品需求對應的目標人群各有差異，設計師同樣可以使用故事的六個要素，幫助快速了解我們的用戶。

首先，在調(diào)研中，可以按照故事六要素設計的訪談問題，這樣可以幫助了解到相對全面的用戶信息。其次，調(diào)研后整理信息時，可以根據(jù)故事六要素，將素材加工成具體且有代表性的故事，能夠幫助我們不被繁雜的原始信息束縛。

下面看看故事的六要素方法在微信記賬本的改版方案中的實踐。

這次改版的目的是為了解決記賬本的流失問題。方案前期，我們根據(jù)故事的六個要素設計了訪談提綱，然后招募用戶，進行了面對面的調(diào)研訪談。

隨后，由于訪談提綱與故事六個要素對應，因此按照這個對應關系，我們從原始的訪談資料中，整理出一個具有代表性的用戶故事。

通過這個故事，我對目標用戶的身份、行為、習慣有了清晰直觀的了解。同時，根據(jù)故事中情節(jié)描述，再對照記賬本中的交互體驗，可以看出，用戶流失的核心問題主要在于，自身的記賬習慣與記賬本提供的體驗不匹配，導致用起來有阻礙，用得不習慣。

用戶的習慣是按日看賬，但是記賬本沒有聚焦在每日的統(tǒng)計上。因此，方案中我將明細頁按日分塊區(qū)隔，不僅每日的信息更聚焦，而且方便用戶進行日間的對比。

同時，用戶大部分時間都在關注當日的賬，只在月底、月初等階段性的時間節(jié)點，才會復盤整月的記賬情況。因此，我設計了 Tab 頁面結構，區(qū)分了用戶的高低頻行為。用戶進入記賬本時，會優(yōu)先呈現(xiàn)明細，通過 Tab 頁面切換，在需要時也可以看到該月的記賬統(tǒng)計。

這個方案在后續(xù)的用戶調(diào)研中，得到了不少用戶正向的反饋。由此可見，利用故事六要素設計，能幫助設計師了解用戶，能從混亂的信息中抽絲剝繭，找到清晰方向。

參考故事結構引導完成任務

積木雖然只有幾個形狀，但是通過排列組合，能有無數(shù)種結果。這跟體驗設計的工作的很像。日常工作中我們大部分時間不是在創(chuàng)造一個從未見過的事物，而是將已有的信息進行組織，讓用戶順利的完成一段符合期待的旅程。

故事的結構就是一種組織信息的方式，可以串聯(lián)起用戶在頁面、流程中的行動，讓用戶更容易朝著一個目標移動。

最常見的故事結構就是經(jīng)典的三段式結構，開頭鋪墊情節(jié)，中間描述沖突，結尾給出解決方案或行動。這種方式符合人類的認識規(guī)律，也被無數(shù)熒幕經(jīng)典驗證過。

讓我們再來跟隨朋友會員的方案，感受如何用三段式的故事結構，構建起一個順暢的任務流程。

為滿足中小商家吸引顧客消費的需要，小賬本提供了會員優(yōu)惠活動的功能。但是我們的中小商家群體一般都缺少專業(yè)的運營經(jīng)驗，為了讓他們順利完成設置活動的目標，我參考故事中的三段式結構去呈現(xiàn)頁面信息，幫助理解活動、完成設置。

• 開頭，對設置會員活動有什么好處進行了鋪墊，說服商家的參與。
• 中間，給商家提供會員活動，洞察商家可能會遇到選擇活動的問題。
• 結尾，提供活動建議，根據(jù)商家的建議進行活動推薦，解決問題。

在故事中，沖突和起伏是人為創(chuàng)造出來，甚至需要戲劇性的夸大表現(xiàn)。體驗流程中，沖突是用戶使用功能中可能會遇到的問題，我們要提出解決方案，避免沖突，讓任務流程順暢。

當然講故事的結構不止一種，故事結構的本質是為了將零碎的情節(jié)串聯(lián)成一個自然的流程，方便用戶和理解。

明確主線支線，輔助聚焦目標

在故事中，一般圍繞著主角去展開故事。試想一下，西游記中如果將諸天神佛、各路妖怪的都安排成主角，那將是多么盤雜的信息量。因此故事才以師徒五人西行取經(jīng)為線索展開。后面隨著一路上斬妖除魔，整個奇幻詭譎的神話世界躍然紙上。因此，故事中，用區(qū)分主線為主、支線為輔的處理，避免用戶的注意力被分散。

回到我們用戶的旅程中也是一樣，無關緊要的操作將會將用戶分散用戶的注意力，讓用戶脫離原本的目標。因此在實際的設計工作中，要根據(jù)用戶的目標，區(qū)分清楚主線、支線。

想要區(qū)分主線支線，就必須取舍。將跟用戶目標強相關的重要信息放在主線，可以讓用戶的操作更聚焦；同時，將次要的信息放在支線，輔助充實主線。用戶有更深入的需求時，也能夠有地方獲取。

以顧客抽獎中讓商家順利完成一個抽獎活動的設置為例。如果要設置一個抽獎活動，需要設置獎品、活動周期以及開獎時間。這三項操作，我們?nèi)绻屔碳易孕胁僮?，他們的操作門檻會非常高。他們甚至會因為復雜的操作而放棄使用。

因此，根據(jù)與商家的交談，我們將用戶更重視的獎品信息設為整個活動的主線。按照商家會持續(xù)進行其他會員活動的習慣，默認設定了定期開獎，持續(xù)活動的通用規(guī)則。同時將只有部分用戶需要的修改活動形式和開獎時間的高階操作，收攏到支線中。保證主線通暢，用戶能輕松開啟活動。

如果一些支線無法很好輔助主線，甚至影響主線信息的傳遞，我們也可以舍棄。

以朋友會員中為商家生成一張傳播優(yōu)惠信息的宣傳海報為例。在過程中我們在針對為海報的設計了自定義宣傳語編輯、海報主題選擇等功能，后面發(fā)現(xiàn)用戶在編輯宣傳語、選擇海報主題等支線任務上付出了不少時間。因此，最近的方案中，我們?nèi)サ袅诉@個支線任務，雖然也是犧牲掉了一些自定義編輯的能力，但是對于復雜規(guī)則理解困難的商家而言，生成海報的路徑變得簡單清晰了。

主線支線本質上就是一種明確任務優(yōu)先級的方法，主線支線的安排要從達成的目標出發(fā)去取舍。

結語

以上就是講故事的一些具體的方法在設計流程中的作用?？偨Y一下：

• 梳理故事要素，全面了解用戶
• 參考故事結構，引導完成任務
• 明確主線支線，輔助聚焦目標

當然，因為時間的關系，以上的思考只是冰山一角，故事在設計中發(fā)揮的作用不止于此。比如講故事還可以用在日常的合作溝通中，幫助快速達成共識；故事也能用在產(chǎn)品宣傳中，讓用戶留下深刻的印象，等等。

故事在日常的設計工作中無處不在，如果你是一位用戶體驗設計師，說不定，你在平時的工作中就不知覺的就用到了講故事的能力。斯蒂夫.喬布斯曾經(jīng)說過：“世界上最有權利的人，是講故事的人。他們設定了未來世界的場景、價值和流程”。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

很多年前剛聽到這個概念的時候，一直覺得設計系統(tǒng)是個非常高大上和牛逼哄哄的事情，當時 Material Design 剛剛出來沒多久，蘋果的人機設計指南在設計圈稱王稱霸，雖然自己主要做的都是安卓系統(tǒng)，還是認真拜讀了 IOS 的 Human Interface Guidelines。

然后，其實也沒有什么然后了……

你怎么看待設計系統(tǒng)這件事呢？

關于設計系統(tǒng)，有的人會覺得類似于一種玄學，有的人認為它好是好，但容易被束之高閣，放著落灰，有的人認為它對于設計師是一種束縛……另外，還有很多和它相關的概念也經(jīng)常被混淆：設計語言、設計原則、設計規(guī)范、設計風格、設計組件……

圖 1: 設計系統(tǒng)詞云圖

為了理清設計系統(tǒng)到底是什么，我把上面的這些和設計系統(tǒng)經(jīng)常出現(xiàn)的詞語進行了分類。我認為，它們指出的，應該是基于不同角度對設計系統(tǒng)的解釋。在這些詞語里，有的解釋了設計系統(tǒng)存在的原因：追求效率，保持一致性、避免重復勞動，有助于數(shù)字產(chǎn)品形成整體性等。有的解釋了它的組成或者相關聯(lián)的內(nèi)容：設計規(guī)范、設計語言、設計原則、設計規(guī)范、設計風格、設計組件等。有的解釋了設計系統(tǒng)容易出現(xiàn)的問題：玄學、束縛、高大上，理想化等。

存在原因

存在原因，也就是建設設計系統(tǒng)的目的，正是由于設計系統(tǒng)是為了幫助我們的工作工作更加有效率的一個整體工具，也就注定了設計系統(tǒng)的樣式、組成和運作方式不會一層不變，每個公司都需要自己找出適合自己團隊設計與開發(fā)之間最順暢的那個系統(tǒng)。

要知道，雖然設計系統(tǒng)聽起來很酷，但創(chuàng)建一個好的設計系統(tǒng)其實是非常消耗精力的。所以，設計系統(tǒng)的目的一定要清晰并且符合現(xiàn)狀需要。

為什么還要去創(chuàng)建設計系統(tǒng)呢？

我認為，只有對于下面這幾條，你或團隊有強烈的需求，才是生成一個設計系統(tǒng)的好時機。

• 以往的設計內(nèi)容總是需要被快速重復使用
• 需要釋放設計資源，讓人力更專注于更加復雜和有價值的問題。
• 需要在多個團隊或多個產(chǎn)品之間保持一致性
• 需要幫助初級設計師的產(chǎn)出迅速達到更高級的要求

沒有被需要的設計系統(tǒng)，就是未來束之高閣，等著落灰的一套“玄學”。

組成內(nèi)容

系統(tǒng)這個詞，是指由相互聯(lián)系的要素構成的有特定結構和功能的有機整體。設計系統(tǒng)，自然也是一個整體性的有機集合。

圖 2:設計系統(tǒng)的組成內(nèi)容

1. 設計原則

設計原則是引導設計系統(tǒng)建設的指導思想和戰(zhàn)略方向，基于大量實際經(jīng)驗提煉的高度理論化概括。

設計原則這個概念并不是為了設計系統(tǒng)才出現(xiàn)的，從完形心理學流派運用過來的格式塔理論所包括的臨近性、相似性、封閉性、連續(xù)性等設計原則，還有以“如非必要，勿增實體”為核心的簡約設計原則，來自唐納德諾曼的概念模式、反饋、限制范圍、可感知的預設用途四條設計原則等等。

為了對抽象的設計原則有更具像化的體會，我們再來看看幾個比較有名的設計系統(tǒng)的原則。

• 蘋果公司：美學整體，一致性，直接的操作性，反饋，隱喻，用戶可控
• 微軟公司：自然而然的，符合直覺和有力的，引人入勝且沉浸
• 谷歌公司：材料是一種隱喻，明顯、圖形化和有目的性的，有意義的動效

圖 3: 三大設計系統(tǒng)的原則

突然發(fā)現(xiàn)就蘋果公司沒給自己的設計系統(tǒng)專門取一個名字啊～

可以發(fā)現(xiàn)，雖然三家公司的設計原則各有不同，但幾乎都是從通用的設計原則中提煉優(yōu)化的。

建設一個設計系統(tǒng)一定需要設定自己的設計原則嗎？

我認為它不是必須的。

雖然設計原則很重要，但在設計系統(tǒng)初期的時候，遵循現(xiàn)有基礎和通用的設計原則來指導建設整個系統(tǒng)也是可以的?？偤眠^隨隨便便從基礎通用的設計原則中拿出一些詞語潤色一下，簡單的堆砌一些高大上的詞語，空泛的放在那里，等著它們逐漸變成別人口中的“玄學”吧？

正因為原則是設計系統(tǒng)高度抽象化的結晶，所以它需要基于大量實際設計經(jīng)驗再去生成，不然，很難起到指導設計系統(tǒng)達到增加效率的目的。

2. 設計風格和規(guī)范

設計風格，是這個設計系統(tǒng)給人形成的一種代表性的圖形印象。設計規(guī)范，是用于協(xié)調(diào)統(tǒng)一性的規(guī)則和范式。在 60 年代的《美孚品牌手冊》和 70 年代的 《NASA 圖形使用規(guī)范》中，就已經(jīng)包含“顏色、字體、圖形、用法和示例”等內(nèi)容。

圖 4: 設計規(guī)范

有了設計風格和設計規(guī)范并不一定就能讓使用這個設計系統(tǒng)的產(chǎn)品建立統(tǒng)一的品牌調(diào)性，只有當設計系統(tǒng)具有了一定辨識性的設計風格，并在設計規(guī)范指導下進行長期的設計產(chǎn)出后，才能夠讓使用這個設計系統(tǒng)的產(chǎn)品形成統(tǒng)一的品牌調(diào)性。

3. 設計組件和模式

對于設計系統(tǒng)里，我們最熟悉和常用的應該就是設計組件了，也就是 UI kits，包括輸入框、按鈕、文字、鏈接、下拉菜單等等。是組成界面的最小元素和這些元素的常用集合體。

圖 5: UI kits

設計模式，比元素更復雜一些，是完成任務所使用的一些基礎的、常用的交互方式，是可以解決問題的小型設計方案。比如 Material design 里的 Confirmation and acknowledgement，它提供的就是為機器在執(zhí)行操作之前向用戶確認的一系列設計方案。

圖 6: 設計模式

簡單點來說，設計組件就是一些元素，主要給設計師用的，設計模式就是一些交互方式，主要給研發(fā)工程師看的。由于兩者很相似，如今更多的會把兩者合起來看。

2013 年，前端工程師 Brad Forst 將原子理論運用在界面設計中，形成一套設計系統(tǒng)后，設計組件得到進一步擴展，可以形成比原來最初出現(xiàn)設計模式這個概念時更高層次的集合體，例如，大到幾個完整的頁面及其包含的交互方式，也可以成為某個設計系統(tǒng)的其中一個組件。

當然，由于各個產(chǎn)品的需求、場景和定位等不同，越大的合成組件將會越復雜。

圖 7: 原子設計理論

4. 內(nèi)容資產(chǎn)

在某些設計系統(tǒng)的定義里，可能會把內(nèi)容資產(chǎn)作為設計規(guī)范的一部分，但我這里想強調(diào)的是其作為資源的一部分。

由于設計系統(tǒng)是一個有機的整體，在它不斷的服務于各產(chǎn)品線的同時，也一定會需要不斷填充不同的內(nèi)容，比如應用里使用的圖標、字體、插畫、模型等等，這些內(nèi)容積累下來，也應該成為這個設計系統(tǒng)的一部分，如果有其他的應用或產(chǎn)品需要，就可以直接取用，從而提高整體的工作效率。

內(nèi)容資產(chǎn)比較常見的有圖標庫、字體庫和音效庫，分別提供了多種圖標、多種字體和多種音效可以給不同的產(chǎn)品或應用使用。隨著插畫風格、三維風格的留下，未來必然還會出現(xiàn)隸屬于某個設計系統(tǒng)的插畫庫、模型庫，以及在產(chǎn)品里經(jīng)常使用的文案集合。

圖 8: 內(nèi)容資產(chǎn)

5. 工具、流程

這兩塊主要是針對設計系統(tǒng)適用的具體環(huán)境，在協(xié)同性要求下我認為需要納入設計系統(tǒng)的內(nèi)容。簡單的舉例來說，就是如果使用藍湖做自動化標注，就團隊統(tǒng)一使用藍湖，而不是有的人使用藍湖，有的人使用摹客。

6. 設計語言和設計方針（guidelines）

還有兩個經(jīng)常提到，但我剛才畫的設計系統(tǒng)圖示里沒有提到的概念。

設計語言：語言，是一個能夠達到相互交流的符號系統(tǒng)。人類學家索緒爾認為，語言能反映出多變言語活動背后的穩(wěn)定規(guī)律。所以，我認為這里的設計語言，應該等同于設計規(guī)范，是設計規(guī)范另一種表述。

設計指導方針（Design Guidelines）：按照中文翻譯理解，我認為它是說明、介紹設計系的文檔，沒有包含在設計系統(tǒng)內(nèi)。

常見問題

最后，設計系統(tǒng)的詞云圖里出現(xiàn)的玄學、理論化、落灰、空中樓閣……這些都是創(chuàng)建設計系統(tǒng)時很容易遇到的一些問題，尤其是實用性最高的設計組件，更是首當其沖。之前我組織我們團隊的設計師做復盤性質的workshop，單就設計系統(tǒng)的設計組件部分，大家就提出了20多條問題。

圖 9: 設計組件復盤 workshop

綜合來說，設計系統(tǒng)常見的問題有三類：

1. 定義性問題

設計系統(tǒng)從大的框架性定義到具體設計組件的定義都不是件一蹴而就的事情，它從 0 開始，每一次的更新和迭代，對于當前的團隊來說都需要是既關鍵又有效的。關鍵是指設計系統(tǒng)當前定義下來的內(nèi)容是后面的產(chǎn)品線經(jīng)常性使用的，有效是指這些定義確定下來的內(nèi)容是可以使用現(xiàn)有的資源去完成的，即以現(xiàn)有團隊的能力、時間和設備是可以完成并達成其效果的。

2. 使用性問題

目錄不清晰，文檔說明不全，包含資源不完整，這些都是使用時的問題。如果把設計系統(tǒng)看作一個產(chǎn)品，讓用戶（設計師或研發(fā)人員）覺得好用，才是它不會被束之高閣的解決方法。

3. 協(xié)作性問題

不知道有更新，收不到反饋，不了解使用者的情況……協(xié)作性的問題催生了市面上諸如藍湖、摹客、墨刀、Codesign以及很多設計軟件的云服務功能等。

雖然現(xiàn)在市面上有非常多優(yōu)秀的設計系統(tǒng)可以參考，但正如在存在原因中提到的，由于它是為了幫助我們自己所在的團隊更有效率的工作，終究還是需要靠自己基于實際情況去做變化。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

分享一個自己封裝的 axios 網(wǎng)絡請求

主要的功能及其優(yōu)點：

將所有的接口放在一個文件夾中管理（api.js）。并且可以支持動態(tài)接口，就是 api.js 文件中定義的接口可以使用 :xx 占位，根據(jù)需要動態(tài)的改變。動態(tài)接口用法模仿的是vue的動態(tài)路由，如果你不熟悉動態(tài)路由可以看看我的這篇文章：Vue路由傳參詳解（params 與 query）

1.封裝請求：

1. 首先在 src 目錄下創(chuàng)建 http 目錄。繼續(xù)在 http 目錄中創(chuàng)建 api.js 文件與 index.js 文件。
2. 然后再 main.js 文件中導入 http 目錄下的 index.js 文件。將請求注冊為全局組件。
3. 將下面封裝所需代碼代碼粘到對應的文件夾

2.基本使用：

//示例：獲取用戶列表 getUsers() { const { data } = await this.$http({ url: 'users' //這里的 users 就是 api.js 中定義的“屬性名” }) }, 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

3.動態(tài)接口的使用：

//示例：刪除用戶 deleteUser() { const { data } = await this.$http({ method: 'delete', //動態(tài)接口寫法模仿的是vue的動態(tài)路由 //這里 params 攜帶的是動態(tài)參數(shù)，其中 “屬性名” 需要與 api 接口中的 :id 對應 //也就是需要保證攜帶參數(shù)的 key 與 api 接口中的 :xx 一致 url: { // 這里的 name 值就是 api.js 接口中的 “屬性名” name: 'usersEdit', params: { id: userinfo.id, }, }, }) }, 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

4.不足：

封裝的請求只能這樣使用 this.$http() 。不能 this.$http.get() 或 this.$http.delete()

由于我感覺使用 this.$http() 這種就夠了，所以沒做其他的封裝處理

如果你有更好的想法可以隨時聯(lián)系我

如下是封裝所需代碼：

• api.js 管理所有的接口

// 如下接口地址根據(jù)自身項目定義 const API = { // base接口 baseURL: 'http://127.0.0.1:8888/api/private/v1/', // 用戶 users: '/users', // “修改”與“刪除”用戶接口（動態(tài)接口） usersEdit: '/users/:id', } export default API 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

• index.js 邏輯代碼

// 這里請求封裝的主要邏輯，你可以分析并將他優(yōu)化，如果有更好的封裝方法歡迎聯(lián)系我Q：2356924146 import axios from 'axios' import API from './api.js' const instance = axios.create({ baseURL: API.baseURL, timeout: '8000', method: 'GET' }) // 請求攔截器 instance.interceptors.request.use( config => { // 此處編寫請求攔截代碼，一般用于加載彈窗，或者每個請求都需要攜帶的token console.log('正在請求...') // 請求攜帶的token config.headers.Authorization = sessionStorage.getItem('token') return config }, err => { console.log('請求失敗', err) } ) // 響應攔截器 instance.interceptors.response.use( res => { console.log('響應成功') //該返回對象會綁定到響應對象中 return res }, err => { console.log('響應失敗', err) } ) //options 接收 {method, url, params/data} export default function(options = {}) { return instance({ method: options.method, url: (function() { const URL = options.url if (typeof URL === 'object') { //拿到動態(tài) url let DynamicURL = API[URL.name] //將 DynamicURL 中對應的 key 進行替換 for (const key of Object.keys(URL.params)) { DynamicURL = DynamicURL.replace(':' + key, URL.params[key]) } return DynamicURL } else { return API[URL] } })(), //獲取查詢字符串參數(shù) params: options.params, //獲取請求體字符串參數(shù) data: options.data }) } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

• main.js 將請求注冊為全局組件

import Vue from 'vue' // 會自動導入 http 目錄中的 index.js 文件 import http from './http' Vue.prototype.$http = http

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



    分享此文一切功德，皆悉回向給文章原作者及眾讀者
轉自：csdn.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



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



     

我這里為了同學們好理解，把所有元素都寫到一個頁面。

1.第一步安裝插件

    


        


            


            

        

        


            

                npm install file-saver
            

        

    

    


        


            


            

        

        


            

                npm install xlsx
            

        

    

2.第二步在mian.js中設置全局

    


        


            


            

        

        


            

                // vue中導出excel表格模板
            

        

    

    


        


            


            

        

        


            

                import FileSaver from 'file-saver'
            

        

    

    


        


            


            

        

        


            

                import XLSX from 'xlsx'
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                Vue.prototype.$FileSaver = FileSaver; //設置全局
            

        

    

    


        


            


            

        

        


            

                Vue.prototype.$XLSX = XLSX; //設置全局
            

        

    

3.第三步使用 

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="daochu">
            

        

    

    


        


            


            

        

        


            

                <el-button @click="o" type="success" round>導出</el-button>
            

        

    

    


        


            


            

        

        


            

                <el-table
            

        

    

    


        


            


            

        

        


            

                id="ou"
            

        

    

    


        


            


            

        

        


            

                :data="tableData"
            

        

    

    


        


            


            

        

        


            

                style="width: 100%"
            

        

    

    


        


            


            

        

        


            

                :default-sort="{ prop: 'date', order: 'descending' }"
            

        

    

    


        


            


            

        

        


            

                >
            

        

    

    


        


            


            

        

        


            

                <el-table-column prop="date" label="日期" sortable width="180">
            

        

    

    


        


            


            

        

        


            

                </el-table-column>
            

        

    

    


        


            


            

        

        


            

                <el-table-column prop="name" label="姓名" sortable width="180">
            

        

    

    


        


            


            

        

        


            

                </el-table-column>
            

        

    

    


        


            


            

        

        


            

                <el-table-column prop="address" label="地址" :formatter="formatter">
            

        

    

    


        


            


            

        

        


            

                </el-table-column>
            

        

    

    


        


            


            

        

        


            

                </el-table>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                tableData: [
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                date: "2016-05-02",
            

        

    

    


        


            


            

        

        


            

                name: "王小虎",
            

        

    

    


        


            


            

        

        


            

                address: "上海市普陀區(qū)金沙江路 1518 弄",
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                date: "2016-05-04",
            

        

    

    


        


            


            

        

        


            

                name: "王小虎",
            

        

    

    


        


            


            

        

        


            

                address: "上海市普陀區(qū)金沙江路 1517 弄",
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            

                o() {
            

        

    

    


        


            


            

        

        


            

                let tables = document.getElementById("ou");
            

        

    

    


        


            


            

        

        


            

                let table_book = this.$XLSX.utils.table_to_book(tables);
            

        

    

    


        


            


            

        

        


            

                var table_write = this.$XLSX.write(table_book, {
            

        

    

    


        


            


            

        

        


            

                bookType: "xlsx",
            

        

    

    


        


            


            

        

        


            

                bookSST: true,
            

        

    

    


        


            


            

        

        


            

                type: "array",
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                try {
            

        

    

    


        


            


            

        

        


            

                this.$FileSaver.saveAs(
            

        

    

    


        


            


            

        

        


            

                new Blob([table_write], { type: "application/octet-stream" }),
            

        

    

    


        


            


            

        

        


            

                "sheetjs.xlsx"
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            

                } catch (e) {
            

        

    

    


        


            


            

        

        


            

                if (typeof console !== "undefined") console.log(e, table_write);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return table_write;
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

可以看到已經(jīng)導出 

實際工作中導出按鈕單獨抽離出去做到可以復用才是比較合理的

最近幾年以來，大家能看到B端設計趨勢已經(jīng)越來越火熱，在B端設計中關于圖表的設計算是為數(shù)不多的視覺發(fā)揮點了。那么怎樣才能做好圖表設計，讓設計出來的圖表高大上，符合業(yè)務需求，讓業(yè)務方和總監(jiān)對你贊不絕口，本文就必須看完和收藏了，因為實在是太實用！

彩云之前也在我的公眾號上分享過一篇關于數(shù)據(jù)可視化的干貨，《如何做好數(shù)據(jù)可視化設計，國外大神給出了十條實用建議》，今天的這篇算是更加系統(tǒng)和完善了。

應用設計越來越依賴數(shù)據(jù)驅動，對高質量的數(shù)據(jù)可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導的數(shù)據(jù)圖表，但我們其實可以通過遵循一些簡單的規(guī)則來改變這個情況。

1. 選擇一個正確的圖表可視化類型

選擇錯誤的圖表類型，或默認為最常見的數(shù)據(jù)可視化類型，可能會讓用戶感到困惑或導致對數(shù)據(jù)的誤解。根據(jù)用戶希望看到的內(nèi)容，可以用多種方式表示相同的數(shù)據(jù)集。盡量做到每一次做數(shù)據(jù)可視化時都能從數(shù)據(jù)集類型分析和用戶訪談開始。 

2. 根據(jù)正負值使用正確的繪圖方向

當使用水平條時，在基線的左側繪制負值，在右側繪制正值。不要在基線的同一側繪制負值和正值。 

3. 條形圖總是以0基線開始

刪數(shù)據(jù)起點會導致曲解。在下面的例子中，看左邊的圖表可以很快的得出結論，值B比D大3倍多，而實際上，兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數(shù)據(jù)表示。

4. 折線圖應該要清晰體現(xiàn)y軸上的趨勢變化

對于折線圖，總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢，因此根據(jù)給定時期的數(shù)據(jù)集調(diào)整比例并保持直線占據(jù)y軸范圍的三分之二是很重要的。 

5. 使用折線圖時要考慮時間連貫性

折線圖是由線連接的“標記”組成，通常用于可視化時間間隔內(nèi)的數(shù)據(jù)趨勢。這有助于說明數(shù)值是如何隨時間變化的，并且對于較短的時間間隔非常有效，但當數(shù)據(jù)更新不頻繁時，這可能會導致混淆。 

例如: 使用折線圖來代表年度收入，如果數(shù)據(jù)是每月更新的，則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值，而在特定時間實際的收入數(shù)字是未知的，所以可能會產(chǎn)生誤會。在這種情況下，使用垂直條形圖可能是一個更好的選擇。 

6. 不把折線圖強行”平滑“

平滑的折線圖可能在視覺上很好看，但它們錯誤地反映了背后的實際數(shù)據(jù)，而且過粗的線會模糊真正的“標記”位置。 

7. 避免使用比例不同的雙軸折線圖

通常，為了節(jié)省可視化空間，當有兩個具有相同度量但大小不同的數(shù)據(jù)系列時，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導的方式代表了兩個數(shù)據(jù)系列之間的比較。大多數(shù)用戶不會密切關注比例，只是瀏覽圖表，然后就得出了錯誤的結論。 

8. 限制餅圖中顯示的切片數(shù)量

餅狀圖是最流行的也是經(jīng)常被誤用的圖表之一。在大多數(shù)情況下，條形圖是更好的選擇。但如果你決定做一個餅狀圖，有2個比較好的建議:

1）不要超過5-7片，保持簡單

2）可以將額外的最小段分組到“其他”切片 

9. 在圖表上直接標注

如果沒有適當?shù)臉撕?，無論你的圖表有多好，它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數(shù)據(jù)和對應的部分。 

10. 不要在切片上貼數(shù)據(jù)

將數(shù)據(jù)放在切片上可能會導致多個問題，在可讀性問題上和窄切片上都會有挑戰(zhàn)。相反，添加黑色標簽能清晰的鏈接到每個部分。 

11. 保持餅圖切片秩序以提升閱讀效率

在確定餅片秩序時，有幾種常用的方法:

1）將最大的切片放在12點的位置，然后將下一片切片順時針降序排列

2）把最大的切片放在12點的位置，第二大的放在順時針相鄰位置，第三大的放在11點的位置，其余的切片按順時針降序排列 

12. 避免隨機排列

同樣的建議也適用于其他許多圖表。不要默認采用字母排序，將最大的數(shù)值放在頂部(對于水平條形圖)或左側(對于垂直條形圖)，以確保最重要的數(shù)值占據(jù)最突出的空間，減少眼球運動和閱讀圖表所需的時間。 

13. 窄的餅圖是難閱讀的

餅圖通常不是最容易閱讀的圖，因為比較相似的值非常困難。當我們把中間部分去掉，創(chuàng)建一個圓圈圖表時，我們騰出了空間來顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會變得毫無用處。 

14. 視覺效果不要搶了數(shù)據(jù)風頭

不必要的造型不僅會分散注意力，還可能導致對數(shù)據(jù)的誤解和用戶的錯誤印象。你應該避免:

1）3D元素，明暗面

2）陰影、漸變和其他扭曲的多彩色

3）斑馬圖案，過多的網(wǎng)格線

4）過度裝飾，斜體，粗體或襯線字體 

15. 選擇與數(shù)據(jù)性質相匹配的調(diào)色板

顏色是有效的數(shù)據(jù)可視化的組成部分，在設計時考慮以下3種顏色類型:一個定性調(diào)色板最適合顯示分類變量。為確保易用性，所分配的顏色應該是不同的。連續(xù)調(diào)色板最適合需要按特定順序放置的數(shù)字變量。使用色相或亮度或兩者的組合，可以創(chuàng)建一個連續(xù)的顏色集。

發(fā)散調(diào)色板是兩個連續(xù)調(diào)色板的組合，中間有一個中心值(通常為0)。通常不同的調(diào)色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現(xiàn)的概念相匹配。 

看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以幫助你生成各種調(diào)色板。 

16. 設計的可訪問性

根據(jù)美國國家眼科研究所(National Eye Institute)的數(shù)據(jù)，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。

1）在調(diào)色板中使用不同的飽和度和亮度

2）把現(xiàn)有配色去色然后檢查對比度和可讀性。 

17. 關注易讀性

確保排版能夠準確傳達信息，幫助用戶專注于數(shù)據(jù)，而不是分散用戶的注意力。

1）選擇易讀的字體，避免襯線和裝飾過度的字體

2）避免使用斜體、粗體和全部大寫

3）確保與背景有高對比度

4）不要旋轉文字

 

18. 使用水平條形圖代替旋轉標簽

這個簡單的技巧將確保用戶能夠更有效地閱讀圖表，而不會扭傷他們的脖子。 

19. 事先選擇合適的圖表庫

如果你的任務是在web和移動項目中添加交互式圖表，你應該問的第一個問題是我們將使用什么圖表庫?現(xiàn)代圖表庫包含了許多前面提到的交互和規(guī)則?；谝讯x庫的設計將確保易于實現(xiàn)，并能提供大量交互想法。 

20. 做成動態(tài)圖表

幫助用戶通過改變參數(shù)，可視化數(shù)據(jù)進行探索。然后得出結論，最大化價值和洞察力。在下面的示例中，你可以看到IOS Health應用使用了各種數(shù)據(jù)表示的組合。 

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

文章來源：ui中國   作者：彩云Sky 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

今天和大家聊聊設計中的分割，很多人新人做設計時，會經(jīng)常糾結頁面分割用什么方式處理，是用線還是留白，還是用投影？今天我們來系統(tǒng)的研究下，分割的類型以及設計時候我們?nèi)绾稳ミ\用。

更多設計文章，設計交流，歡迎添加 | 微信ddm7212

關注#公眾號：SKY蓋哥 ，第一時間獲得設計干貨和分享內(nèi)容。

一、分割線的作用

分割顧名思義就是做設計時候，分割頁面的設計手法，它的目的是讓我們的設計更加有序，不同內(nèi)容在頁面中呈現(xiàn)的方式更加讓用戶容易理解。是幫助內(nèi)容組織的很重要方式。當然分割有很多種形式，色彩，線，間距，投影，圖標，圖文等等，今天我們來系統(tǒng)的研究下分割在設計中到底如何使用的，以及什么時候使用什么樣的分割最合理，希望大家通過這一篇文章學會和掌握。

很多人提到頁面分割，可能腦海第一個想到，就是分割線，或者是色塊，其實不然，分割有很多種類型，不同類型在頁面中效果也不太一樣。那接下來，我們一起來看看頁面分割到底有幾種類型。

二、用線進行分隔

▲使用水平的分割線來區(qū)分頁面內(nèi)容，除了分割內(nèi)容外，還做到分組的效果。如上圖阿迪的app和電商app都是通過類似的方式來處理。常用在表單中，能使界面瀏覽效率更高，更快速去檢索內(nèi)容；是頁面分割中最為常見的。

▲比如在airbnb的案例中，分割線就是用來分割內(nèi)容，起到分組的作用，讓頁面閱讀起來更加有節(jié)奏。

▲在dropbox的設計中，分割線也可以搭配icon來使用，讓頁面看起來視覺層次更強，同時分類更加明確。

▲分割線可以說是我們每天都在運用的，無論今天的內(nèi)容設計，還是像dropbox這樣的工具產(chǎn)品都離不開分割線。但是分割線運用時候，需要注意分割線顏色不要太深，否則會有山寨感。

▲線太深會讓頁面不夠精致，顯得山寨，所以常用的分割線一般是#CCCCCC,#EEEEEE,或者黑色的10%透明度

三、用色塊分割

▲除了線以外，色塊分割也是比較常用的，一般在頁面中用灰色色塊來分割，這個色塊高度一般20px左右，常用于分割上下兩組的內(nèi)容為主。

▲華爾街新聞app設計中，大量運用色塊對頁面進行分割，頁面模塊更加清晰。

▲谷歌瀏覽器的設計中，運用了色塊的分割，模塊更加明確。如果你們的產(chǎn)品需要很明確的劃分組和組的關系，可以運用這種方式。

▲在很多電商設計中，這種風格目前還是主流，對于頁面內(nèi)容比較復雜的頁面，需要這種分割明顯的樣式去區(qū)分模塊和功能。

缺點是風格陳舊

用色塊分割，需要考慮產(chǎn)品整體的風格規(guī)則，這種分割方式一個最大弊端就是風格會有些陳舊，在當今留白，輕量化設計當?shù)澜裉欤嗌珘K割裂感強，會顯得陳舊，所以使用的時候需要根據(jù)產(chǎn)品整體風格去把握。

四、用圖標進行分割

▲除了線，色塊還會通過一些插入式的圖形進行分割，如上圖，整個都是列表的信息流，在列表的前面適當加一些圖標來錨定整個頁面，會讓頁面看起來有更大的空間，瀏覽起來也更順暢。

▲谷歌瀏覽器的設計，也是通過圖形來錨定頁面節(jié)奏，讓設計看起來更加合理和秩序感。

▲谷歌新聞的列表設計，表單前面通過數(shù)字來錨定整個頁面的節(jié)奏和空間，讓大段文字看起來沒那么累。

▲谷歌的產(chǎn)品系列中，表單前面增加圖形或者文字會比較多，也成為他風格統(tǒng)一的非常重要的一個DNA。在表單前面加圖標或者其他視覺元素能讓頁面呼吸和留白更加的通透。

五、用留白進行分隔

常用的的線，灰色色塊，圖標分割這些都比較傳統(tǒng)，且對于頁面來說一個最大缺點是占據(jù)了很多空間，本身移動端屏幕就很有限，線，色塊，圖標，無形增加了用戶認知負擔，所以隨著設計趨勢的發(fā)展，用戶也更加關注內(nèi)容本身，所以慢慢的設計開始嘗試用空白去分割頁面，同時還能消除了頁面多余的視覺噪音。

留白在頁面中是設計師沒有放任何視覺元素，使得混亂的頁面看起來有了喘息的空間，空白的原則創(chuàng)建了空間，通過格式塔的運用，用戶自動在視線上形成了分割，同時空白為頁面增加了很多呼吸空間，并且讓設計看起來更加簡潔，在當下也是越來越流行。

▲國外知名社交電影軟件MUST整個頁面都是采用的空白分割運用在它設計中，通過內(nèi)容去區(qū)分頁面模塊信息。

▲有序的留白，從始至終貫穿著整個頁面設計，這種風格也不需要任何線條就能將頁面層次很好的傳遞出來。

▲知名藝術電商網(wǎng)站Artsy就是運用空白分割，頁面干凈富有藝術氣息?？瞻讈矸指钤絹碓匠蔀橐环N主流設計手法。

六、用色彩進行分割

色彩也同樣可以用來分割內(nèi)容，將色彩運用的好，不僅能吸引用戶將關注力停留在頁面上，更主要是能讓用戶更方便的注意到你想表達信息內(nèi)容。

▲Headspace整體頁面大多是通過這樣的色彩進行分割，色彩本身就是和其他內(nèi)容有隔離關系，恰到好處的構圖，加上色塊的運用，很好的將內(nèi)容和模塊區(qū)別開來。

▲在他的產(chǎn)品中到處可見這樣的設計，不僅讓頁面非常的年輕活潑，同時這樣的配色也會讓整體設計讓人印象深刻。但是需要注意是不能色彩太花了，圖形存在是為了內(nèi)容做烘托的，最要還是讓用戶關注內(nèi)容本身。

▲Stadium live這款直播產(chǎn)品，將色彩玩到了極致，整體頁面就通過色彩來區(qū)分內(nèi)容，非常符合娛樂化產(chǎn)品定位。

▲在它頁面很多地方都隨處可見色彩的大膽運用，這個對于設計師配色功底要求較高。

▲這款APP也是我非常喜歡的一款產(chǎn)品，大家感興趣可以去下載體驗。也是用色彩做分割非常成熟的一款產(chǎn)品。

七、用投影做分割

陰影在設計中是非常重要的一個設計元素，除了能給頁面帶來設計層次，同時也能很好的區(qū)分內(nèi)容，業(yè)內(nèi)最出名的莫過于的google的材料設計語言，其中就是大量運用投影來營造頁面氛圍。

▲在google系統(tǒng)產(chǎn)品中，運用投影來做頁面分割非常多，投影除了能拉開頁面的空間感，同時在視覺上能更加突出。google日歷案例中，導航和核心操作加號按鈕都加深了投影。

▲google新聞頁面中同樣如此，除了導航區(qū)域，在卡片上也通過投影方式來分割內(nèi)容，增強層次。

▲在蘋果新聞的產(chǎn)品上，同樣看見了類似設計手法，通過按鈕或圖片的投影，增強頁面深度的運用，不同于google的是蘋果的投影更加柔和。

▲Instacart產(chǎn)品也是如此，通過投影來區(qū)分內(nèi)容，他們的卡片外面都增加了投影加強頁面深度?？傊队笆欠浅：玫囊环N增強頁面層次和細節(jié)的一種手法，大家運用時候定好場景和規(guī)則。

八、行業(yè)趨勢

以上7種分割方法，基本覆蓋了所有視覺的分割手法，雖然沒有放品牌和網(wǎng)頁的案例，但是大體都是相同的，今天無論我們選擇哪種分割手法，本質都是沒有錯的，關鍵是要和整體的設計語言調(diào)性匹配起來，如果選擇一種就運用一種，切忌多種混搭，這樣就不會出現(xiàn)頁面錯亂的感覺。從整體移動端設計趨勢來說，曲線、留白和投影來分割是一個大的方向趨勢，值得我們多多關注。

最后

今天這篇文章只是一個設計中的基礎，它在于幫助我們梳理設計的內(nèi)容細節(jié)，別看一個小點的知識，當你掌握的這些小點知識多了后，你的知識體系就會形成面，最終幫你帶來質的提升，今天這篇文章是讓你打開系統(tǒng)的思考，希望大家在使用時候，根據(jù)自己場景去定義。設計沒有一個絕對正確的標準答案，試了才知道。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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