每種類型的網格都有不同的用途，通過了解不同的網格類型幫助我們在設計的時候匹配最合適的網格。

1、 基線網格

基線網格是由等距水平線組成的密集網格，用于確定文本的位置?；€網格通常與分欄網格結合使用，以確保每列中的文本在界面上均勻對齊。

基線網格最簡單的示例是一張劃線紙，準確清晰地展示設計元素的位置。

2、單欄網格

3、分欄網格

這是日常設計中最常使用的網格類型，將一個頁面拆分成多個垂直區域，然后將對象與之對齊。

報紙和雜志的排版設計、網頁和APP的設計都會廣泛使用分欄網格。

4、模塊化網格

5、像素網格

在用Photoshop作圖時，不斷放大畫布，會看到畫布上有密集的像素網格出現。

數字屏幕是由數百萬像素的微觀網格組成的，為了設計的準確性，設計師需要逐個像素地編輯圖像，同時也練就了“像素眼”。小到一個icon，大到整個網頁，都可以借助像素網格來完成。

6、層級網格

層級網格是指按照內容的重要性來組織界面元素，讓用戶能夠按照主次的層級順序瀏覽界面。層級網格主要用在網頁設計中，形式比較自由形式，大多數是結合網頁的內容來確定。

將界面中的內容進行優先級排序，按照層級結構清晰展示內容的優先級，為產品提效。

二、在UX/UI中使用網格的5個技巧

在工作中嘗試使用網格系統時，下面的關鍵要點能幫助我們實現有效、靈活的設計：

1、規劃網格與頁面的關系

2、不要只使用網格設計

當接到一個全新的需求時，很多設計師習慣以常用的網格和欄寬作為標準開始設計。

3、保持設計元素在網格內

網格中每一欄之間都會有間距作為分隔，當頁面中的文本和圖形跨越多欄時，需要保持內容在網格每一欄的邊緣，避免將元素放到間距的邊緣。

4、不要忘記基線對齊

確?；诹械脑O計中的所有文本遵循一致的基線，這樣可以大大改善頁面的和諧感和組織感。

5、考慮使用8pt網格進行設計

我們的設計必須能保證在各種設備和屏幕分辨率下都能工作并且看起來很清晰。使用基數的倍數的尺寸和間距有助于使設計過渡清晰和系統化。

最后

以上是在UX/UI設計中常見的6種網格類型和5個技巧，希望通過這些內容能讓你對網格系統的應用有更深的認識。

作者：Clippp

轉載請注明：學UI網》在UX/UI設計中使用網格系統的5個技巧

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

我們將產品劃分為三個階段：

1.0：滿足了以產品為中心的設計，達成生產售賣通順閉環；

2.0：滿足了以消費者為中心的設計，考慮更多用戶體驗；

 3.0：加入以人文中心主義的設計，人文感官品牌情懷社區。

那么明確了我們本次升級的方向后，制定了整個產品的框架，底層加入了人文感官品牌情懷的相關因素，再應用到我們現有的業務上，在協同上進行高效的鏈接，產品到設計，設計與設計，設計到開發。最終形成了我們的前臺展現頁面。

根據我們的用戶畫像以及多輪訪談調研， 得知用戶的相關正負情緒。生活當中家務工作的角色分配問題，一直是經常出現的一個場景。用戶希望通過我們的產品服務，來提升生活的幸福指數！

在以此為前提的背景下，用戶希望我們是專業標準化的、省心高效的、溫暖溫馨的、舒適的、具有親和力的等等。最終都會期望以更有品質的生活而結尾，那么“品質生活”即為我們需要來傳遞給用戶的情感。

 那么品質生活是什么呢？

其實用戶對我們的要求是一款提升生活品質及愉悅感的產品，而非工具。

綜上所述，我們確定了以品質生活成為我們的本次設計語言升級的slogan，再結合業務的自身特性，我們進行了詳細的拆分后提煉出了以下相關關鍵詞，來滿足用戶更多的情感訴求。

干凈明亮 

居住環境的潔凈會帶給人更多舒適愜意的感受。首先對品牌色進行了升級，使其更鮮明。也延展與其相匹配的輔助色來打造出完善的色彩體系。

光 

專業 

高效 

用戶攜帶訴求而來，那么減少用戶感到麻煩的情緒，對產品的識別清晰、操作便捷提升是最直接影響的。

親和力 

服務行業需必備的能力，微笑服務也成為了我們的業務情感透傳標準。提煉出微笑符號結合我們的實際場景進行運用！

慢生活… 

在對用戶的相關情感訴求結合業務進行了落地后，對效率類設計原則也進行了相應的升級。

應用整體架構也是一個應用對外呈現的基礎結構，是系統風格的體現形式之一，除了特殊設計訴求，通常情況下，應用需要使用通用的應用架構來保持系統的一致性和用戶操作的易用性。

布局不是靜態固定的，柵格系統在一個應用內的重要程度不言而喻。我們設定了以4dp / 4pt為基數的柵格系統。

文本作為產品中用戶獲取信息的主要信息載體，字號大小和字重決定了信息的層級和主次關系。對字號、字重、行高以及組合字體進行了設定，為不同的場景創造了層級分明以及清晰的信息讀取體驗。

針對頁面內容區域的通用元素間距進行了分類。設計師結合具體場景的情況，來調用間距參數的適配邏輯。以此來結合柵格系統進行更好的適應相關視覺元素符號的對應變化。

 圓角參數  

結合業務屬性保證親和力的透傳，在產品盡量避免出現銳角圖形的設計表達手法。故此針對圓角的大小也進行了系統級別的定義，進行深度統一管理！

語意原則及動效等，并依據相關設計原則產出了組件庫。

在多元化的產品時代，時刻關注并滿足用戶的情緒，是產品能脫穎而出的關鍵！在建立設計語言手冊時從提升用戶體驗和滿足商業價值整體考慮，挖掘流程當中線上線下的觸點，多維度思考并總結落地，深度傳遞品牌理念。

設計語言手冊更多時候是一個相對寬泛的閾值，并非組件的固定值，在某些業務場景下能為用戶帶來增值體驗或較高商業價值時，可以被打破。最后，核心就是在搭建語言手冊時應思考更多“為什么”這么做！

作者：58UXD

轉載請注明：學UI網》如何通過設計語言手冊來傳遞品牌理念！

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

作者：程鑫

轉載請注明：學UI網》中后臺產品的產研協同提效調研

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

現在很多公司面試UI都會面試交互能力，問你設計方案的推導、怎么量化、怎么分析、怎么做深度的設計思考等等，所以呢大部分設計師在本身視覺能力沒那么強的情況下，無奈在作品包裝中加入了推導分析的文字部分，結果，問題又來了，這些分析過程和推導其實是經不起推敲的，因為往往在實際工作中，大部分設計師沒有真的運用過這些方法、數據，靠的是參考市面上的作品集從而包裝出來，也就經不起面試官的深問。最后作品集也成為了四不像的結果。

那么如果我們的設計基本功沒那么強，但又想展示自己的思維能力該怎么做呢？我在這里并不是教大家怎么去編和套設計流程的框架和理論，而是希望大家能明白，如果要放你的思維過程，應該怎么正確的去放，如果真的沒做過，我建議不要去硬套，很容易漏洞百出。

設計師的定位和價值

一個項目的推導過程首先要明確，你在項目中扮演的是什么角色，你在整個項目中的價值是什么，是獨立負責？還是某一個環節的執行者？我相信很多同學都想把自己包裝成一個獨立負責人，恨不得整個產品從立項到調研到分析到執行都一個人包攬，但你越這樣去包裝，作品集內容就越零散。

作品集主要展示的是你個人的能力，而不是讓你去描述和介紹你的產品。很多同學都變成了后者，比如先描述項目背景、產品的用戶群體是什么、每個功能模塊分別是什么功能…..這樣的方式去包裝作品真的味同嚼蠟，沒體現能力不說，還很枯燥。

一、講故事

其實我們可以用講故事的框架，來整理項目流程以及展示你在項目中的價值。在上學的時候老師會跟我們說，要講清楚一件事，需要分別理清楚三個階段，分別是：起因、經過、結果。所以我們現在要講一件什么事呢？我們要講的是，你是如何通過設計手段幫助產品/用戶解決問題的。

那么我們就可以用起因、經過、結果三個階段來闡述我們是怎么解決問題的，把這個邏輯給梳理出來。

1、起因

起因包含了

1.有哪些問題/機會

2.你是怎么發現問題的（為什么要做這個項目）

3.導致問題出現的原因是什么

比如我舉個例子，我發現我家廁所外墻開始掉粉脫落，甚至時不時的浴室柜下方會流出一些水，所以我懷疑是不是哪里漏水了，在這里我用的是觀察法，用觀察法很直觀的看到了問題。接下來我要去找到問題的原因，到底是什么原因導致了外墻掉粉脫落以及滲水的問題。于是我先自己做了一個假設，是不是埋在地下的水管破了？因為之前有用過腐蝕性很強的通下水道的藥劑，但是這個原因被我排除了，因為如果水管漏水那么就會一直漏，而不是間歇性的出水。那還有可能是什么原因呢？浴室柜中下水管堵塞導致水流到了沒做美縫的縫隙中嗎？還是樓上漏水滲下來了？

最后經過多個原因的排除，問題找到了，是由于樓上確實漏水以及淋浴間下水不暢長期積水導致水從下水管口子邊上的縫隙流了過去，兩個原因。

所以我們再回過頭來看，作品包裝中起因應該說明哪些事項：

1.1和2可以合并在一起寫，比如通過xx方法我們找到了目前產品中存在的問題，也可以寫我們找到了xxx問題，是由于我們用了xxx方法。

2、你是怎么發現你產品中存在的問題的？

是自我經驗的觀察判斷？還是通過數據分析找到的某個現象（比如一個板塊的點擊率在逐月下降）還是通過對用戶訪談或者體驗地圖找到了某些體驗問題？你得采用一些方法，越客觀越好，比如很多同學在找問題的時候總會用一些比較寬泛的修辭來描述：首頁結構不合理、層次不清晰、體驗較差，所以看到這樣的描述，我就想問，那么具體不合理、不清晰、體驗較差的點在哪里呢？為什么你覺得不合理、不清晰、體驗較差？是你的主觀感受？還是數據表現？還是客戶的體驗？你得證明出來。所以問題的來源是很多的，有的是你專業經驗的判斷，有的是用戶的反饋，有的是數據的表現，都不一樣。

3、導致問題出現的原因是什么？比如很多同學做改版，改版原因他們就寫：結構不合理、層次不清晰、體驗較差…..這個是不對的，改版原因應該是，由什么具體事件，導致的結構不合理、層次不清晰、體驗較差，比如通過對用戶在支付任務流程中的數據表現，我發現經常有用戶在支付流程中跳失，導致轉化率下降，因此我們調研訪談了10個在支付流程中跳失的用戶，其中8個用戶在準備支付的時候找不到編輯收貨地址的功能，于是他們放棄了這次支付，這個問題凸顯的就是核心功能沒有滿足用戶預期，有效性差。至于樣本量的問題我就不展開了。

很多同學在第一階段會放很多產品的一些市場研究、定位，這些其實一點用也沒有，雷聲大雨點小，一開始切入點很大，結果這些點對描述你的設計能力沒有任何幫助，并且在后面的設計方案和策略中也完全不能體現出來有什么關聯。不如聚焦一點，針對問題直接進行展開。

小結一下，起因包含了3個問題，這三個問題可以通過幾種方法來解答：

1.你是怎么發現問題的（經驗判斷法、渠道反饋法、用戶調研法、數據分析法、可用性測試…..）

2.有哪些問題（卡片分類法、kano模型、價值分析法……）

3.導致問題出現的原因是什么（經驗判斷法、用戶訪談、觀察推測……）

二、經過

這個階段就是用來體現你是怎么解決問題的，這里我們就要來講到解決問題的策略和邏輯了。諸葛亮草船借箭大家都聽說過吧，這個事件的問題在于缺箭，為什么會缺箭呢？原因是沒有足夠的時間和材料來制作那么多箭矢，要解決這個問題怎么辦呢？招募更多的士兵？收集更多的材料？采用緩和之計爭取時間？顯然這些策略是無效的，那怎么辦？內部不行，只能靠外部來解決，于是就有了草船借箭。

再舉個例子，這兩天有點頭痛（問題），醫生說頭痛可能有多種因素造成的，例如睡眠不好、頸椎有問題、受涼、壓力大等等（原因），所以為了解決這個問題，我就可以有幾個不同的策略，如果是睡眠導致的，那么我就通過改善睡眠質量來解決，如果是頸椎導致的，那么我可以去找中醫做一下推拿，這些都是解決問題的策略。

所以在經過階段你必須講明白你是怎么選擇一種合適的策略的。舉個例子，比如有一個新的電商產品上線了，并合作了一些大品牌，但是我們發現這個品牌的銷量還不如一些不知名的品牌來的高（問題），于是我們通過第一步的研究起因，發現用戶之所以不買單，是因為他們覺得這些大品牌在你們平臺賣的是不是假貨（原因）。那么為了解決這個問題，我們就要研究一下具體的策略，怎么樣能夠讓用戶對該品牌產生信賴，而我們又如何才能讓用戶知道這個品牌是正品呢？

策略1:透出品牌資質和曝光度：告知用戶我們有品牌授權的資質

策略2:給予用戶更多保障：給用戶產品質量的售后保障和檢測權利

策略3:讓用戶提前進行體驗：可以給部分用戶試用

經過分析以及成本權衡，策略2和3實施起來較為困難，成本高，于是策略1是一個比較好的選擇。那么具體的方案就要到第三階段來呈現了。

再舉個例子，抖音大家都有用過吧，在之前的老本版中，有用戶想查看當前視頻的上下集，非常不方便（問題），因為需要點擊或者側滑進入作者首頁，然后經過滑動才能找到當前視頻的位置（原因）。所以為了解決這個問題，如果你是抖音的設計師，你會有哪些策略呢？

策略1.提高用戶查看視頻的效率：直接給用戶定位到當前視頻

策略2.提高作者制作系列視頻的便捷性：可以讓用戶不用進入主頁也能看到上下集

所以，小結一下，“經過”這個階段中找策略我們依然也可以用到一些方法：上癮模型、aarrr模型…..但是這些模型我是不建議大家在作品集里寫的，太形式化了，在大廠的設計流程中，設計策略基本上是通過產品和設計的經驗判斷給出的，不會真的說是靠這個模型工具而產生輸出的策略，比如像我們說“給用戶一種溫暖的感覺”，這是一個設計目標也可以是一個策略，但它很難說是由哪個方法論或者工具提煉出來的。

三、結果

結果，也就是我們通過設計目標和策略，選擇具體的設計方案。在作品集中，設計方案給面試官展示，這其實沒那么重要。面試官想看的是什么呢？是你雖然最后給出了a方案，但是在設計過程中，有沒有b方案和c方案，最后讓你選擇a方案的理由是什么，你是怎么思考的，也就是方案的由來。

這個才是我們展示能力的最好表現。以上面的抖音為例，通過策略1，用戶點擊主頁可以直接定位到當前視頻的區域以便用戶查看上下集，如果直接根據這個策略設計方案是很簡單和直觀的，只要定好位，并給用戶一個當前正在播放哪個視頻的狀態，做個標簽即可。

但是最終方案并不是這樣的，而是當用戶側滑或者點擊頭像后先定位到的是用戶主頁的頭部區域，而在右下方給了一個“剛剛看過”的按鈕，點擊按鈕才會定位到剛剛正在看的視頻。

這兩個方案顯然是有區別的，為什么不直接定位，而要多給出一個“按鈕”呢？原因就在于抖音更希望觀看者和作者能夠更多的產生互動和鏈接，提高作者的關注率，讓觀看者先看到作者的主頁，再去查看剛才的視頻，因為只有你關注了作者，作者才有更多動力去制作視頻，同時關注作者也會為你個人的偏好附上一個大的權重，以便于做更精準的推薦。 

這是對于兩種方案的解讀，所以方案a和方案b，為什么選b不選a，這就是理由。當你的方案呈現在作品集中，面試官就會這么問。

通常在做方案的時候，大家也總會用到競品分析，競品分析是一把雙刃劍，它可以讓你的方案至少不會出大錯，也可以讓你的方案沒有特點，所以這也很考驗設計師是怎么將產品業務的定位、用戶屬性、業務目標的差異化結合到方案中去的。競品分析大家也很喜歡單獨拿出一個板塊放在作品集里，咱先不論有沒有真實操作過，放在作品集里的內容，一定要有目的性，大家仔細品一下這句話。你想要通過放這塊內容告訴面試官什么？是你拿了一堆競品做了比較和描述，還是說你能夠結合自己業務和用戶的特性，找到和其他競品設計差異化的點，最后應用或指導到你的設計方案中去？

結果階段除了方案的探索、權衡外，還需要進行驗證和復盤。雖然咱們花了很大的力氣，從發現問題到找到原因，再到定義目標和策略，最后選擇方案，但并不意味著最后的結果是好的，因為我們不知道我們的方案到底有沒有解決最一開始的問題，你原來頭痛，最后選擇了吃藥，結果吃了一個月，還是沒好，那就說明：1.問題原因不對 2.策略有問題 3.藥吃錯了。所以如果你要以結果為導向，那么最后的驗證和復盤不可缺少。那有同學說，我們公司沒有數據，沒有用戶，那我要怎么驗證呢？那我勸你好好跟產品或者老板去談一談，雖然你想操這個心，但是老板都不在意那也沒有辦法，但是你在面試的時候需要表達出這樣的思維。

總結一下 

再說一下，分析推理部分，不是UI/UX作品集必備，你想做純視覺包裝作品集也可以，但我們要清楚，你應聘的崗位要求是什么，而你的作品集和崗位要求是否能對應起來?，F在的一些公司要求都很高，UI和UX都成為了標配要求，所以我們盡可能要把這兩塊都在作品集里展示出來。有人說，我實在沒做過這些東西，讓我編也編不出來怎么辦？那就從今天起試著開始主動找找產品存在什么問題，然后去解決它，試著走一遍：起因、經過、結果三個階段，我相信你一定會有收獲。 

1、什么是卡片？

早在互聯網時代之前，卡片就出現在了我們生活中的方方面面，如名片、不干膠標簽、便利貼、會員卡…等，不管是何種類型的卡片，它都將代表著我們現實生活中的某個特定信息。

卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨立的個體，以至于后續被引用到線上界面中，同樣具有非常不錯的信息歸納效果。

2、互聯網中的卡片式設計

卡片本身就是一個完整的信息區塊、并同時承載豐富的互動方式。在UI設計中，個性化和美感兼備的卡片式設計具有很強的易用性，它是一個UI設計組件，將標題、文本內容、圖形/圖片進行整合并模塊化，讓信息的表達更加直觀、操作也更便捷。

卡片式設計之所以能成為當今比較流行的趨勢，是因為它能讓界面信息更有層次感，從設計、交互、視覺以及用戶體驗等各方面來看，都有不錯的優點。站在用戶角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對來說，學習成本也是極低的。

二、卡片式設計價值

1、結構清晰

卡片在占用屏幕空間較少的情況下能夠將不同大小、不同類型的信息內容按邏輯進行分組呈現，使界面結構更加清晰。相比純粹的留白或分割線，卡片不僅對信息作出了分割，其本身還是一個獨立的容器，讓歸納組合后的信息能快速突出重點，將復雜內容簡單化處理。

卡片式布局整齊簡練，清晰的信息結構有助于用戶瀏覽，方便快速找到自己感興趣的內容，避免用戶產生一種費時或感覺內容超長的恐懼感，還能節省更多的時間成本。最常見的就是信息列表、圖文混排等，不僅做到了視覺上的美觀，也達到了平衡文字及圖片強弱的效果。

2、場景拓展

卡片式設計有利于場景拓展，他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體，在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節假日增加二層樓…等。

3、空間擴展

卡片式設計一度打破了移動端多為縱向操作、原有傳統的列表式布局，在空間有限的移動端設備中，還能很好的利用橫向空間。將橫向滑動區域的最后一個卡片漏出一小部分（若隱若現才是誘惑），不僅能給予用戶更多選擇與期待，其空間利用率也得到了很好的擴展，在展示更多內容的情況下依然能保持模塊的整體性。

4、突出重點

卡片式設計能很好的通過邊界襯托出內容的整體性，特別是在電商類產品中的首頁頭部、瓷片區、營銷引流區將其應用到了極致，即便在卡片數量較多的情況下，用戶依然能清晰的感知到內容的歸屬層級以及重要信息。

5、兼容多端

卡片作為一個容器，它可以自由無限的等比縮放，非常適合響應式設計。在手機、iPad、電腦等屏幕尺寸復雜的情況下，通過放大縮小或增減縱向排列數量的方式配合響應式的斷點設計，讓同一界面在不同設備之間輕易的創造出一致性的視覺體驗。

6、易于操作

卡片給人最直觀的感覺就是可以操作，它不用箭頭、按鈕或超鏈接等引導性的視覺元素提醒，節省了一定的頁面空間，還有著更大的操作熱區，無需做到精準點擊?？ㄆ皆O計很容易融入各種交出手勢，如單擊、雙擊、長按、拖動、滑動等，為用戶提供更多便捷的操作。

7、跳轉流暢

卡片可通過縮放的形式充分利用動畫進行頁面跳轉，例如App Store“Today”頻道，點擊卡片后直接等比放大至全屏，給用戶一種還停留在當前頁面的錯覺，避免了傳統的跳轉頁面而造成的信息割裂感，流暢絲滑的過渡，給用戶更自然的交互體驗。

三、常見的卡片式設計樣式

1、四周留白

這種類型的卡片在UI設計中最為常見，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內容模塊的存在感更加強烈，整個頁面信息的層級也更加清晰。

2、懸浮內容之上

懸浮型卡片并非模態彈窗，與其相比，懸浮卡片不需要主動操作觸發，可作為臨時控件或長期固定顯示，并且比模態彈窗能承載更多信息內容，可通過伸縮來定義卡片中的信息數量，或多、或少、或展示、或隱藏，在頁面中非常靈活。

例如高德地圖首頁，搜索框及右側的功能入口長期懸浮在地圖之上，而下方卡片中的內容會隨著高度的伸縮自動調節可展示的數量，非常實用。

3、通欄類型

通欄類型的卡片具有更強的視覺阻斷，對區分不同的功能模塊有不錯的效果，不過這種類型只通過頁面背景色保留上下邊間、且不會過多，不然頁面會顯得零散、雜亂。

四、卡片適用場景介紹

1、瀑布流

瀑布流主要正針對圖片較多、或以圖片為主的內容設計，它最大的優點是無需過于在意圖片的高度，最大限度的還原原始圖片效果。

卡片式設計的瀑布流對信息的組合、包容性更強，不僅能在單屏區域內顯示更多內容，同時又將每組信息組合作出了明確的劃分，在不破壞頁面整體性的基礎上也做到了相對獨立，如花瓣、Pinterest就是最好的例子。

2、信息流

信息流的展現方式主要以文字、圖片或視頻內容為主，是一種較長內容的媒介，不管哪種展現方式，其都需要用戶耗費較長時間的滑動、瀏覽來篩查對自己有用的信息。

卡片式設計將信息進行分塊處理，通過阻隔的方式快速告知用戶每個卡片的核心內容，便于用戶在長時間的滑動過程中也能快速識別重要信息。

3、左/右滑動

卡片式左右滑動組合在音樂、視頻類產品中用最為廣泛，因內容本身就圖片居多，也更適合卡片式設計，相比平鋪具有更強的層次感，對用戶的吸引力較強，尤其最右側漏出的一小部分內容營造出神秘的感覺，用戶會不由自主的想去滑動以求獲取更多信息。

4、優惠卡/券

卡/券設計實際是把生活中的實物映射到了UI設計中，通過模擬實物造型設計成卡片樣式，有效降低用戶的理解成本，并對其有了更直觀的感知，真實感尤為強烈。

5、突發事件/臨時提醒

對于用戶主動觸發或系統臨時發起的非固定性內容，利用卡片式設計會讓信息布局更靈活、視覺更突出，在不影響用戶使用的前提下，可出現在任何位置。

6、部分頁面頭圖

卡片式設計可以將個人中心、個人主頁、會員等頁面中的關鍵信息進行概括，并在頭部位置進行重點突出，不僅讓原本單個的內容形成整體，還能營造出沉浸式的氛圍。

五、卡片式設計原則及小技巧

1、一致性原則

為了保持界面設計的一致性，需要將卡片樣式納入設計規范，例如卡片是否通欄、是否需要設定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數值的確定等，大部分情況下都需要遵循設計規范。

2、功能定位決定卡片形式

在同一產品中，雖然要遵循設計規范以確保一致性的視覺效果，但并非所有頁面都適合卡片式設計。

那么，到底是否需要采用卡片形式、使用哪種卡片類型？這還得根據頁面內容屬性及目標定位來決定。例如社交產品中的臨時會話列表、動態圈子使用卡片形式，很浪費縱向空間、甚至會顯得很“雞肋”，用分隔線或間距留白來區分信息組顯然更合適；但對于電商類型的產品，利用卡片將不同的商品分隔后又進行歸納，會更容易識別，信息的可讀性也會更強。

3、避免過多卡片嵌套

卡片式設計本身就包含了容器與背景的層級表現，為了保持內容的正常展示與用戶瀏覽體驗，避免在卡片中嵌套多層卡片，以免信息層級雜/亂而增加用戶的視覺負擔。

如果再同一卡片中需要再次區分多個信息組，可利用間距留白、分割線或淺色背景等元素屬性來區分，依然能達到想要的效果。

4、合理利用橫向空間

因為卡片內、外的雙向間距留白，在空間有限的移動端設備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當利用左右滑動來擴充橫向隱性空間。

例如淘票票首頁，在1.5屏的范圍內，幾乎每個模塊都能橫向滑動查看更多內容，從用戶體驗角度出發，這是縱向空間無法比擬的。

5、降低縱向空間的浪費

卡片式設計不是目的，其主要是用來更好的區分信息層級、提升用戶瀏覽體驗，因為卡片要作為獨立空間的存在，必定會增加上下間距而導致頁面拉長，因此，如無必要，不必盲目采用卡片式設計。

例如美團APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式，而「消息」頁則采用分割線進行信息分組，試想一下，如果為了統一規范而使用卡片，不僅造成很強的割裂感、還會極大的浪費縱向空間。

6、長文表達不適合卡片

這點不用多說，新聞資訊類產品的內容詳情頁就是最好的證明，不管其他頁面是否采用卡片形式，但詳情頁并不會跟隨形式，一方面可以讓同屏展示更多內容、增加空間利用率，另一方面可減少無關元素對用戶產生的干擾、給予沉浸式的瀏覽體驗。

7、突出一個核心內容

很多時候，我們總會聽到PM說這個很重要、那個也很重要，都需要突出一點，殊不知當什么都突出了也說明什么都沒有突出。在單個卡片中，組始終牢記這個準則：一次只突出一個核心信息，以便于用戶快速、精準捕捉，切記不可貪多。

六、結語

卡片式設計之所有能快速流行起來且經久不衰， 其主要得益于自身的靈活性，尤其是在跨設備、跨屏幕上有著純天然的優勢，能忽略設備的差異給用戶提供更好的服務?？ㄆ⒉皇呛唵蔚臉邮皆O計，它是一種自由布局的設計語言，通過多種方式的信息組合、結合豐富的交互操作，給用戶創造出極致的使用體驗。

信息的呈現方式雖有不同，但最終的目的都是為了服務于內容，卡片式設計只是其中的一種形式而已，在設計過程中，我們需要根據內容結合實際情況作出合理的判斷，切勿拘泥于形式而忽略內容本身的重要性。

任何設計風格及展現形式都有可能成為歷史，卡片式設計也不會例外，但絕對不是這么快就結束，它依然值得我們去深究，力求打造更好的信息布局、更舒適的用戶體驗。

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉載請注明：學UI網》卡片式設計 | 掌握這些技法，快速提升界面效果！

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、底部標簽欄主題化設計

1、底部標簽欄圖標主題

在不改動結構的情況下，替換底部標簽欄圖標是最方便的形式。通過主題化的圖標也非常容易傳遞氛圍，無論是在節日慶典、購物季、主題活動等場景中，這個形式都是最直觀的表達之一。

比如優酷 APP 在中秋節的時候，就將底部標簽欄圖標替換為各式各樣的月餅造型，主題營造也是非常的明顯。將原本的圖標造型融入到月餅圖案中，鑲嵌圖案的設計非常巧妙，不僅保留原本的識別特征，也強化了主題氛圍感。

除了在圖標造型上面發揮以外，也可以將主題文案融入到設計中，這也是較為直接的表現形式。作為特定主題來說一目了然，需要把控主題文案數量。

2、底部標簽欄背景層

底部標簽欄的設計中，除了通過圖標設計附和主題之外，也可以在背景層進行主題氛圍營造。由于底部屬于操作頻繁區，背景層的設計不能過于搶眼，容易干擾功能的識別與操作。比如前段時間抖音 APP 將底部標簽欄背景層進行主題營造的時候，在黑色層上面運用的色調比較深一些，與原本黑色的沉浸式體驗有差異，在白底上面呈現效果還可以。

沒過多久抖音設計團隊便進行了更新，壓暗了背景元素的色調，弱化了視覺感。更符合原本的感官體驗習慣，也能強化主題感。

除了抖音以外，小紅書 APP 前段時間也在底部標簽欄背景層上面進行了營造。如果營造面積比較大的話，在無圖標形式（純文字版底部標簽欄）上面比較適合。如果帶有圖標的話，適合做局部強化。

二、頂部視覺區強化主題感

頂部視覺區包含狀態欄、導航欄和頂部內容區域，通常是白底、灰底、品牌色底和運營主題背景等為主。也是強化視覺感的常見區域，作為營造主題氛圍來說也是非常好的選擇。

該區域不僅可以作為功能性活動入口，也能在特殊時間段作為氛圍營造。很多產品都會在頂部視覺區域做應變處理，滿足多場景的需求發揮。

頂部視覺區的強化也是增強頁面感官體驗的方式之一，除了靜態背景的營造以外，也可以使用動態或者流體漸變等形式。

三、金剛區圖標設計主題化

金剛區也是作為主題化設計最常見的區域，由于該區域像百變金剛一樣，較強的靈活性方便元素替換和重組。

1、圖標主題化

在一些特定主題日活動中，可以將金剛區圖標替換為帶有主題元素的設計，以此增強活動氛圍。通常是階段性時間內展示，可以是圖標造型層面主題化，也可以是主題文案鑲嵌在圖標造型中，靈活性相對比較高。

2、局部動效化表達

除了整體金剛區變動以外，也可以在局部圖標上進行設計發揮，這樣帶來的干擾性比較低。通常是以圖標微動效為主，以此來突出個別功能和活動主題等。不適合過度動效，容易互相干擾，適合局部動效化表達，突出局部內容的關注度。

金剛區作為曝光度較高的區域，經常作為流量分發的關鍵場景，主題化發揮也是非常具備靈活性的。

小結

產品設計除了常規性的視覺升級和功能優化以外，主題化設計也是至關重要的，可以讓用戶時刻感受產品的變動。一成不變的體驗使用時間長了也會麻木，結合節日慶典和一些主題活動進行視覺呈現，可以在感官體驗層面得到提升。

本文觀點屬于個人經驗總結，不足之處歡迎大家補充，我們互相進步。

作者：黑馬青年

轉載請注明：學UI網》UI 場景中常見的 3 個主題化區域

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、設計一個開放的圓

圓是最完美的圖形，所以把很多東西設計成圓形都會很好看，logo也一樣，但如果設計成一個封閉的圓，可能會給人不夠靈活、缺少變化的感覺，所以，我們可以嘗試把logo設計成一個開放的圓，即只要一個半封閉狀態的圓，或者是設計一個不完整的圓，比如下面這些案例：

▲ 由于這種logo屬于半封閉的圖形，所以也比較容易處理成正負圖形。

把logo設計成一個開放的圓有以下幾個好處:

? 視覺平衡。因為圓形本身是對稱圖形；

? 視覺聚焦。圓形會讓人的視覺往中心集中；

? 有設計感。因為通常把一個圖形設計成圓形都需要簡化和規范，這會增加圖形的設計感。

示例一

幾年前我接觸了一個品牌名稱首字母為“s”的電子公司，也用這種方式做了一個logo方案，字母S加上圓。在下面的兩種組合方式中，很明顯第二個更開放、更有設計感一些。

但僅僅如此肯定還不行，一是這個S太普通，二是圖形沒有經過規范，所以我在草圖上嘗試了幾個方向，最終選擇了下圖來執行，簡單、抽象，在感性的柔和中夾雜著一點理性的堅硬。

對于這種簡約風的幾何圖形，通常都是通過采用圓形裁剪來制作，這樣會更快捷、也更嚴謹，在草圖的基礎上通過多次調整，最終確定了如下圖的輔助線(如果你的草圖不是很規范，那么就不必太遵循草圖)。

通過這些輔助線我們就能得到中間這個比較規范的“S”圖形。

運用AI中的路徑查找器中的工具，我們很快就能得到如下圖形，填上顏色這個開放的圓形logo就做完了。

在最終的圖形中，我們除了能看到圓和S以外，我們甚至還能看到握手和循環圖形，這些對于企業來說都是非常好的寓意，這也為我們寫標志說明提供了一些不錯的思路和依據。

二、塑造矛盾空間

矛盾空間是一種在三維世界中并不存在的二維圖像，矛盾空間的形成通常是利用視點的轉換和交替，在二維的平面上表現了三維的立體形態，我們熟知的埃舍爾就是這個領域的藝術大師。

這種手法也常常被用在logo設計中。

使用塑造矛盾空間設計的logo具有以下幾個好處:

? 有趣。帶有視覺欺騙效果的logo會讓人忍不住想多看幾眼；

? 富有藝術效果和創意。設計這樣的logo需要一定的空間感和想象力；

? 具有良好的寓意。比如無限、無止盡、可持續等。

示例二

我的一個朋友開了一家裝飾藝術品工作室，名字叫首工藝場，英文名為：First Technical Field，于是委托我設計一個logo，他是這樣說的：我沒什么要求，只要簡單、大氣、好看、現代、獨特、富有藝術氣息就好了，真的，我沒什么要求?！?

這個logo其實并不好做，老實說，我當時也沒啥思路，于是我用品牌英文名的首字母在畫紙上隨意搗鼓，天知道我畫了多少稿，終于我發現用兩個字母F左右對稱排列，中間形成的空間剛好可以加入字母T。

這個圖形讓我想到了曾經看過的一件矛盾空間作品。

純二維的效果過于普通，我覺得可以嘗試在此基礎上加入矛盾空間效果，這樣會更符合設計需求，于是得到了下面這個圖形。

最后，在AI中用矩形工具進行規范制圖，于是就得到了下面這個矛盾空間logo圖形，客戶表示非常滿意，畢竟他給的實在太少了。

三、立體漸變

即通過漸變色使圖形呈現出立體效果，這樣的logo也非常多，并且在前些年很流行。

雖然現在logo設計的大趨勢是扁平風，但是仍有不少設計師和客戶青睞這種立體漸變風，比如近兩年才面世的北京冬奧會logo、IE瀏覽器新logo等等。

因為這種風格的logo其優勢也是顯而易見的，比如:

? 美觀。這類圖形既有細膩的顏色變化，又有層次感，很容易得到驚艷的視覺效果；

? 有很強的品質感。這種圖形通常都需要倚仗曲線，再加之漸變色和立體效果，所以細節會比較豐富；

? 視覺沖擊力強。豐富的顏色變化和對比關系，可以大大加強圖形的視覺沖擊力。

示例三

第三個客戶是一家名叫東瑞的生物科技有限公司，主要是銷售酵素、膠原蛋白之類的產品，logo設計要求簡單、時尚、能體現行業屬性。對于這張logo，比較穩妥的做法還是運用品牌名的首字母來做，由于沒有英文名，所以我選擇了品牌名拼音的首字母“D”和“R”來做創意組合。

由于字母D是一個完全封閉的圖形，所以我想到了用正負形的方式來設計，即把字母R作為D的負形，行得通嗎?應該是可以的，因為大寫的字母R可以簡化成下圖效果，與字母D一結合就能得到我們想要的效果。

組合的方式有兩種，我個人更喜歡開放的圖形，并且我覺得第一種組合方式很普通，造型不是很好看，所以我選擇了第二種方向?，F在我們開始正式制圖。

第一步：在AI中用矩形工具畫一個正方形，然后用直接選取工具把右邊的兩個直角拉成圓角，拉到最大。

第二步：把描邊加粗到一個比較合適的效果，主要考慮字母D的負形大小與描邊粗細的比例，是否符合字母R的特點，確定描邊粗細以后，將路徑擴展外觀，使其變成一個輪廓圖形，然后把左邊的直角也拉成小圓角。柔和一點更符合企業的調性。

第三部：畫一個直角梯形對字母D進行裁剪，梯形的寬度和傾斜角度是關鍵，盡量保證R的識別性和圖形的美觀性，裁剪完以后得到如下效果。

第四步：把圖形的部分轉角處也拉成圓角，然后給其填充一個藍色，到這里基本的造型就做好了。

但是這樣的效果還是有點過于普通，也體現不出行業特性，于是我想到了添加立體漸變效果。

第五步：在現有的圖形基礎上畫如下兩個圓，我們的目的是要用下圖中兩條黑色的路徑對圖形進行裁剪，而這兩條路徑一定要很自然地融入圖形中，所以，畫圓要很講究，依據是找到圓與圖形的切點和交叉點，如右圖中的四個點。

第六步：在上圖基礎上用路徑查找器里面的工具對進行裁剪、合并等操作得到如下圖形，原來的圖形被弧線切割成了三部分。

第七步：給圖形的三個部分分別填上由淺到深的漸變色，使其呈現出立體效果，考慮到企業的行業屬性，我使用了藍色到青色、綠色到黃色、黃色到橙色三個漸變色，最終效果還可以。

logo圖形設計方案合集:

logo設計得太常規容易被客戶說沒有品質感、體現不出企業或品牌的價值感，所以合理地使用一些技巧是有必要的，這會客戶會覺得你的logo設計還是花了一些心思的，看起來比較專業，所謂得套路者得人心，希望這篇文章對你有幫助。

作者：蔥爺

轉載請注明：學UI網》3個技巧瞬間提升logo設計的價值感

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

前言概述

百度教育“好詩連連”是一款輕松有趣又別具中國古典美韻的學習平臺，在2022年先后榮獲設計界三項國際知名大獎：德國紅點品牌與傳達設計獎、美國Muse Creative Awards 金獎、韓國K-design 設計獎。本文分享設計團隊是如何通過精湛的多維設計打造詩詞視聽盛宴，讓用戶感受到傳承千年的詩詞魅力，喚起用戶對古典文化的熱愛。

一、設計主旨：沉浸式國風視聽盛宴，傳承詩詞文化之美一  唯美意境 詩詞悟得到 · 打造沉浸式國風視聽盛宴

王勃《滕王閣序》中千古名句 “落霞與孤鶩齊飛，秋水共長天一色” ，勾勒出一幅寧靜致遠的畫面讓人動容，中華古詩詞之美，含蓄而生動。我們在設計上營造唯美意境，體現詩詞的韻味之美。通過提取中國傳統文化中的古典色彩及傳統紋樣、琵琶與古箏的音韻，將傳統元素與現代審美融合，重組詩詞新國風設計語言，還原詩詞意境，構建全新【寓教于樂】的游戲化學習體驗，賦予詩詞新的文化魅力。

1.視覺語言體系

1.1 從東方古典色中提煉色板

我們從壁畫丹青、紫禁紅墻中汲取色彩靈感，采用低飽和度、柔和而優雅的配色，使東方色彩美學的悠然、自然與詩意自洽融合；同時還采用山水碧綠中的翠濤、醽醁，紅墻中的海天霞、十樣錦，壁畫中的青鸞、檀唇，構成整個畫面中的古典色彩秩序。

1.2  提煉中國風視覺語言符號，形意結合，傳情達意

通過借形法、取意法、形意結合法提煉國風元素與圖騰、傳統文化中寓意吉祥的紋樣，傳達美好寓意；東方古老的鳳凰展翅高飛，指代源遠流長的中華文化；烏紗帽與宮殿寓意學業精進、金榜題名；寄情山水與出淤泥而不染的荷花，更為文人雅士所鐘愛。

1.3  確立繪畫手法

運用類工筆的繪畫手法，白描勾線，結合筆墨丹青的暈染，來營造詩詞如畫卷般的唯美意境。

2. 聽覺語言

古代詩歌最早是用來吟唱，它注重聲律、音韻、平仄、對仗，講究韻律和諧、抑揚頓挫；白居易《琵琶行》中描寫 “轉軸撥弦三兩聲，未成曲調先有情”，沈約《詠箏》“秦箏吐絕調，玉柱揚清曲” 中描寫箏曲抑揚自如，清妙悠揚；在音效的選擇上，采用古箏、琵琶的音色來營造古風意境，音符配合點擊、滑動、任務完成等反饋，讓人沉浸于詩詞的氛圍中。

二  趣味學習 詩詞背得快 · 搭建趣味玩法及激勵機制

趣味化游戲機制，基于心流理論設計，解決了詩詞學習體驗中用戶常見的枯燥、挫敗的負面體驗，構成了詩詞知識獲取、學習和背誦的完整學習機制。設計了詩詞連線、詩詞對戰、成語填空三種多元游戲模式，加強詩詞背誦和相關知識的扎實記憶，讓學習更快更有趣。

傳承古典詩詞文化之美

通過百度教育好詩連連，我們讓沉睡在紙質典籍中，以詩詞為代表的文化遺產煥發時代光彩與蓬勃生機，鼓勵用戶學習和感受傳承千年的詩詞魅力，重新喚起當代年輕用戶對傳統詩詞文化的熱愛和理解，也使便捷輕松地獲得詩詞知識樂趣成為可能。

作者：文教互娛用戶體驗

轉載請注明：學UI網》打造詩詞視聽盛宴，傳承古典文化之美 | 百度教育

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

用戶體驗設計首先字面意思是用戶+體驗。

01 座艙內的用戶除了駕駛員還要考慮非駕駛員， 非駕駛員也有多種角色：老人/兒童/青年。

02 體驗：用戶發生使用操作的感受。

但實際用戶體驗一定是脫離不了場景的，場景是用戶發生行為的一個大環境。

03 考慮場景的時候除了考慮的當下現實場景還有未來場景。

場景案例：充電全屏展示充電信息

場景案例：導航交互體驗，先展開詳細信息，然后再收起信息

場景案例：蔚來的360泊車系統開啟時不能喚醒nomi

而且產品的研發和功能創新，用戶的體驗都是依據場景體系建立的。所以HMI設計過程當中，場景體系化的建立尤為重要。

二、智能座艙的場景體系化搭建

1、搭建流程

01 場景發掘：競品分析、用戶畫像定位、產品定位、用戶旅程圖

場景發掘首先要把場景和使用的用戶做定位，結合實際項目進行用戶畫像定位，確定場景主題，尋找到目標用戶進行實車訪談和拍攝。

02 場景數據細化：網絡數據、用戶訪談、實車測評數據、常見高頻數據

這一步主要是把用戶訪談收集上來的數據，進行拆分和細化，然后篩選出有價值的數據進行錄入。

用戶訪談數據錄入到數據庫里，產品經理和設計師會針對收集上來的用戶反饋，進行痛點/和爽點的挖掘。提出需求解決方案。

03 場景應用設計：原型設計、界面設計

基于場景的應用設計會分為兩個步驟、一個是原型設計、一個界面設計、原型設計時我們更多是組內評估、找專家來提供指導性意見，到了界面設計時候除了專家評審、可以做出demo給用戶進行測試來獲得反饋。

04 場景走查：還原場景

在設計方案產出完成之后，給用戶還原到我們發掘的場景去進行走查，根據用戶旅程圖查看有沒有遺漏的用戶場景和不同的用戶反饋。

2、搭建工具

整個智能座艙的場景體系化搭建需要幾個工具，競品分析、用戶畫像定位、產品定位、用戶旅程圖。

用戶調研方法有很多，我們需要掌握（調查問卷、用戶畫像、用戶體驗地圖、用戶訪談、焦點小組、）

今天核心介紹使用頻率最高的三種用研方法。

2.1 用戶旅程圖

關注用戶在駕駛階段的行為、方式、心情、痛點、期待。

關鍵步驟：

① 設定場景、目標、期望（用戶畫像）

② 確定行為路徑

③ 建立核心地圖

④ 包裝地圖

⑤ 繪制故事板

2.2 可用性測試

可用性測試已經成為獲得用戶反饋的流行手段，主要因為他們上手快，能快速反應出問題。

關鍵步驟：

① 明確測試目的

② 問卷框架的設計

③ 投放調研問卷

④ 組織測試

⑤ 整理輸出結論

2.3 5W+1H法則

5W+1H 是選定的項目、工序或操作，可以從原因(Why)、對象(What)、地點(Where)、人員(Who）、時間（When）、方法(How)等六個面進行思考。

① 原因—立項背景？

② 對象—什么功能？

③ 地點— 什么場景下？

④ 人員–駕駛員？/非駕駛員？

⑤ 時間–什么時機？哪個流程之后？

⑥ 如何–什么方式操作？

三、細化座艙用戶體驗的三階段

1、用戶體驗的三階段

體驗的時間性有三個主要組成成分，及熟悉程度、功能依賴和情感依賴。

1.1 初識體驗：

我們在產品使用初期的階段，都會對產品有個使用預期。例如期望產品能提供一個好的體驗，或者怕產生不好的體驗。

1.2 使用體驗：

使用體驗分為兩個階段：使用產品初期和使用產品深度期

進入到車內試駕或者試乘，試駕員和銷售除了會讓用戶體驗車機的基礎功能外，主要介紹的就是和競品車型的競爭功能。

產品深度體驗期的時候，長期的可用性變得更加重要，而不是最初的易學性。從而產品的實用性成為影響我們整體評估判斷的主要因素。

1.3 獲得體驗：

最后，當我們接受了產品，在我們的日程生活中它參與了我們的社交活動。成為了生活當中的固定解決問題的工具，這個階段產品體驗就具有可識別性了。

2、體驗的三條路線

2.1 體驗線路是感官線

我們現在座艙內的交互感官有、觸感、聽感、視覺、嗅覺、語音。用戶在人機交互的時候第一時間獲得直觀感受。

2.2 體驗線路是情感線

情感線是諾曼強調感情在塑造體驗中的重要性。比如燈光秀、寵物模式、和擬人化的汽車助手。帶給用戶都是情感上的滿足。這些情感構成了與汽車的首次互動體驗。

2.3 體驗線路的流暢

就像C端和B端一樣，我們交互體驗的線路效率和流暢程度，能給用戶增強駕駛樂趣。或者最大限度減少信息元素的干擾，讓駕駛員沉浸在當下。

3、把握用戶體驗的多樣性

3.1 個人價值觀的差異

首先個人的因素，因為我們成長的環境不同，造成了對價值觀的差異，有的人喜歡刺激新穎的產品，有的人喜歡乏善可陳的產品。

3.2 產品屬性問題

第二可能是產品屬性的問題，游戲產品帶給用戶就是不斷的快感刺激，工具類型的產品用戶使用流程流暢會更好。

3.3 跟隨時間線的體重心變化

用戶的使用體驗對于時間的變化，通過用戶旅程圖，他們對產品的關注點會產生變化，例如用戶剛開始對產品互動中更關注新的功能和刺激的體驗。但在使用過一段時間后他們可能不會再關注他的新穎程度，更關注產品的實用性和效率。所以需要我們在不同的使用階段重新幫助用戶提升體驗。

原文地址：七醬設計筆記

轉載請注明：學UI網》基于智能座艙場景的用戶體驗設計

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司