譯者推薦 | 著名的諾貝爾獎獲得者赫伯特·西蒙在對當今經濟發展趨勢進行預測時也指出：“隨著信息的發展，有價值的不是信息，而是注意力?！?/span>
在互聯網中，設計師多是處在執行層。通常我們會去追尋做這個項目的原因和目標，那對于整個互聯網時代，設計師如何通過設計手段緊緊抓牢人類最有限卻最有價值的注意力呢？這篇文章就是一個向導，幫助你找到方向。
摘要：電子產品正在爭奪用戶有限的注意力?，F代經濟學越來越關注人類的注意力以及產品如何吸引用戶的關注。
注意力是數字時代最有價值的資源之一。在人類主要歷史進程中，獲得的信息是有限的。幾個世紀以前很多人不識字，教育是一種奢侈。如今我們可以大規模獲取信息。任何有互聯網連接的人都可以獲取事實、文學和藝術（通常是免費的）。我們面對的是豐富的信息，但我們的大腦處理信息能力和以前一樣。每天仍然只有24小時。今天，注意力成為了限制因素，而不再是信息。
在深入討論注意力經濟之前，我們首先需要把注意力的定義闡明清楚。注意力的正式心理學定義和大多數人對注意力概念的看法是重疊的。
注意力：選擇性地專注于我們目前正在感知的一些刺激，而忽略來自環境的其他刺激。
在平常的話中，我們經常說“請注意”。這個表達意味著注意力的兩個重要特征：有限的注意力和有價值的注意力。當我們“關注”一件事，我們會消耗精神資源的預算，相應的我們會減少消耗在其他地方的注意力。關于人類注意力的理論都認為注意力的能力是有限的。心理學家兼經濟學家 Herbert A. Simon 將注意力描述為人類思想中的“瓶頸”。他也提到“豐富的信息造成了注意力不能集中”。一心多用的自負是一種謠言：人們不能同時一心多用。比如，人們可能會在看電視時拿出手機，但是如果他們將注意力轉移到手機上，他們就會錯過電視節目中發生的一些情節。
注意力是我們個人的寶貴資源。這個資源同樣受到商業、政治運動、非營利組織、還有無數其他組織的重視，他們都在試圖吸引我們去花錢或者花費時間。在1997年，Michael H. Goldhaber 寫道，全球經濟正在從物質經濟轉為基于人類注意力的經濟。例如很多在線服務是免費提供的，但在注意力經濟中，注意力經濟是資源更是一種貨幣：用戶用他們的注意力為服務付費。今天，注意力經濟的動力促使企業吸引用戶在應用程序和網站上花越來越多的時間。創建網站和應用程序的設計師明白，他們的產品是在競爭激烈的市場中爭奪有限的用戶注意力資源。吸引注意力的目標導致了很多不同設計趨勢的普及，例如：
在我們最新的語音助手研究中，我們發現當用戶在開車，亦或是他們的手或眼鏡很忙碌的時候，經常用到手機語音助手的功能。一個常見的抱怨是，Siri 或者谷歌助手在手機屏幕上顯示結果而不是大聲讀出內容。比如，即使是簡單而常見的問路任務，也可能要求司機將注意力分散在屏幕信息和道路之間。
配文：在 iPhone 上問 Siri 得到的查詢結果是展示在屏幕上的，用戶需要將注意力分散到任務和屏幕的信息上。
同樣，智能手機用戶的注意力也經常被當前使用的應用程序、網站、電視節目或其他外部刺激所分散。這就是為什么手機上的會話往往比在臺式機上的會話短：中斷的可能性很高。
為了理解一個設計是否超出了用戶的注意能力，需要在上下文中進行研究。實地研究、日記研究和訪談都可以用來了解人們在現實生活中是如何使用該系統的。
許多用戶都知道網站和應用程序在努力吸引他們的注意力。在最近的可用性測試中，一個用戶在 AllRecipes 網站上看一個關于“如何做煎餅”的視頻，當這個視頻播完后，網站會在自動播放列表中加入相關視頻，我們的測試者沒有發現暫停該視頻的選項。在視頻上出現的唯一選項是重新播放，或開始觀看播放列表中下一個視頻。
配文：AllRecipe 網站設計了自動播放視頻列表，旨在保持用戶對網站的關注
當播放列表在排隊時，用戶評論到“這似乎讓我看電腦的時間比我實際需要的時間更長了”。播放列表在每一個食譜視頻播放之前展示一個廣告——該網站有明確的經濟激勵措施，可以將訪問者的注意力集中在連續的視頻上。一些用戶對于無法控制花費在設備上的時間感到無助。數字產品的設計越來越吸引人，經常讓用戶上癮。對父母來說，花太多時間在科技上的影響尤其令人擔憂。吸引人眼球的設計可能會讓年輕人養成習慣，當設備被拿走時，他們可能會經歷“戒斷”。有些用戶會調整自身的行為。其中一些調整是有意識并采取了行動的，以限制在線時間。經過深思熟慮的調整包括設置上網時間限制、卸載某些應用程序或使用家長控制。用戶還學會以微妙的方式保護他們的注意力。條幅盲目性（Banner blindness）是對大量信息做出反應而產生適應性反應的一個例子。條幅盲目性指的是當廣告放在右邊欄或頁面頂部時，用戶往往會忽略廣告。這點就很好的說明了用戶是如何適應大量信息的。用戶也已經適應了移動設備上常見的通知轟炸：他們已經學會忽略其中的許多通知。在最近的一次可用性測試中，我看到一位女士在她的 iPhone 上瀏覽新的博客。當會話的第一個通知消失時，她向我道歉并問道：“你還用這個錄音進行研究嗎？”在我向她確保這不是個問題之后，她繼續了這個測試任務。在整個會話期間，還有幾個通知從這個用戶的手機上發出，但沒有一個通知打斷她的思路。
我們根據目前觀察到的未來預測，為注意力而設計的趨勢將會繼續演變。很多企業將會選擇創造更多抓住用戶注意力的廣告。自動播放視頻和不可跳過的廣告幾乎普遍不受用戶歡迎，但它們將繼續作為設計特色。在搶奪用戶注意力的軍備競賽中，廣告將會變得越來越身臨其境。主流的社交媒體平臺，如 Facebook、Instagram 和 Snap 都在測試增強現實廣告。
一些企業將會持續研究形成習慣的設計，來吸引用戶越來越多的關注他們。注意力經濟擁有一個樂觀的未來也是可能的：最近的發展為更公平的注意力經濟帶來了希望。越來越多的廣告采用了分成收入模式，這使得用戶可以用他們的注意力（觀看廣告）或金錢（保持他們的注意力）來支付。
配文：Spotify 允許用戶在其廣告贊助的服務上免費聽音樂，如果用戶希望避免令人分心的廣告，他們可以直接為這項服務付費
一些企業已經回應了用戶關于分散注意力設計的抱怨。Apple 最近更改了通知的設計，可以在 iPhone 上快速連續刪除多條通知，還引入了屏幕時間統計功能，允許用戶監控他們對點子設備的使用情況。
結論
數字經濟的某些事實可能不會改變。在可預見的未來，廣告將為一些免費內容提供資金，應用程序將爭奪新用戶的注意力，而人們的注意力仍然有限。但是，設計師在注意力經濟中有一個選擇：他們可以平衡業務需求——— 比如對新用戶、廣告收入和利潤的需求——同時尊重用戶的最大利益。
原文標題：The Attention Economy
原創作者：Lexie Kane
原文鏈接：https://www.nngroup.com/articles/attention-economy/
翻譯作者：櫻桃小丸子
授權獲取：張聿彤
文章審核：王翎旭
文章編輯：王鴻飛
該譯文并非完整原文，內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處，歡迎不吝指出。如需轉載，請注明來自 三分設
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：三分設 來源：站酷
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
“仰望星空，腳踏實地” ，做設計需要想象空間，也要有反思和總結的能力。
讓我們來看兩個毫無關聯的產品的界面。
BI產品
團隊協作產品
這兩個案例展現了如何選用不同的模式以實現不同的目的。
對于BI產品來說，目的是讓數據分析更徹底，提高數據分析效率；更好的整合數據，為企業提供報表，做為企業決策的依據；更好的幫助企業管理者管理企業，提高企業實力。
對于teambition來說，目的是輕松記錄要做的事，并與伙伴實時同步進展。讓彼此清楚地了解項目整體情況及事項優先級，從而完成目標。
基于產品目的我們可以看出BI產品重效率；teambition 更看重清晰以及使用是否輕松愉悅。
而產品的目的決定了它所采用的設計模式也會不同，下面我們再對照界面看下基于目的在界面設計上有什么不同。
BI產品
團隊協作產品
BI數據分析類產品的布局多是小部件組成，這樣做會方便用戶進行多任務處理。界面設計也會相對比較密集，整個界面承載了很多信息。它使用了緊密的間距、緊湊的控件、靈活的布局和排版方式。
設計模式的概念最早是建筑師克里斯托弗 ? 亞歷山大（Christopher Alexander）在他的開創性著作《建筑的永恒之道》和《建筑模式語言》中提出的。
《建筑模式語言》里面包含了253個建筑設計模式，大的如城市和道路系統的布局，小的如家庭住宅中的照明和家具。
類似地，我們在創建界面時，也在使用設計模式（組件）來解決常見的問題：使用標簽頁將內容分成幾個部分，并表明哪一個選項對應于當前的頁面；使用下拉菜單展示可供用戶選擇相關選項。
標簽頁
下拉組件
設計模式分為2類：
第一類：功能性模式（組件庫）表現為界面上的具體模塊，如按鈕、標題、表單元素、菜單等。
第二類：感知性模式（視覺規范）則是描述性的樣式，以可視化方式表達和呈現產品的個性，如配色、排版、圖標、形狀、動畫等。
功能性模式有點像名詞和動詞，它們是界面中那些具體的、可操作的部分；而感知性模式則類似于形容詞，它們是描述性的。
例如，按鈕是具有明確功能的模塊，它讓用戶能夠提交某項操作。但按鈕上的文字的樣式，以及按鈕本身的形狀、背景色、填充、交互狀態和過渡動畫不是模塊，而是樣式，這些樣式描述了按鈕是什么樣的。
唐·諾曼在《設計心理學》一書中說過：系統映像（界面）和用戶模型（用戶通過與界面交互而形成的感知）之間存在著一道鴻溝。
在設計團隊內部也是如此，比如“范圍輸入框”組件，你能想象它是一個什么樣的組件嗎？相信不同的人肯定有不同的心智模型，因為這個組件不是常用組件，在ant design、arco.design組件庫中也找不到這個名稱組件，因為它是TDesign的產物。
而每個公司都會根據自己的產品特性創造一些非常規類組件名稱，這個時候就需要在所有參與產品創建的人之間共享。只有產品內部設計語言一致，才能去培養用戶的心智模型，這樣才能去除系統映像與用戶模型之間的這道鴻溝。
例如上面這個組件，每個人都需要知道這個組件叫“范圍輸入框”，而不是“輸入框”或者“數字輸入框”。
例如，teambition的目的是“輕松記錄要做的事，并與伙伴實時同步進展”。
于是，我們可以去看產品，設計體系在實現這一目標的過程中發揮了多大作用，以及這些設計實踐的效果如何。如果視覺、交互混亂，導致無法實現上述目標，那么可以認為這套設計體系是無效的。
上面介紹了設計體系包含的內容，下面我們針對這些內容進行具體的介紹：
做B端的小伙伴應該都知道ant design，但不知道有多少小伙伴有認真的看過ant design的設計原則。 可能有小伙伴會問這個設計原則有什么用，我最開始也覺得沒什么用，后來在參與設計體系優化過程中發現這個原則就是金字塔尖。
例如：用戶沒有填寫完表單，那么表單的提交按鈕能不能點？是置灰好，還是按了以后再給彈窗提示。
例如：可編輯表格，是放一個筆狀icon來提示可編輯，還是采用鼠標觸發時出現輸入框以及指針變為文本狀態。
日常工作中總會在這些細節問題上爭論很久，美其名曰“打磨設計”，其實很多時候就是設計原則在團隊內部沒有達成共識。
為了避免出現上述問題，我們要建立一套基本的價值觀和原則。在一些公司里，尤其是在處于初創期的公司里，嘗試建立一套共同的準則是很難的。設計原則是無法量化的，因此定義這些原則可能需要多次迭代。
對于原則到底是什么，可能存在一些爭議。有些公司的設計原則偏重于品牌，有的偏重于團隊文化，有的則偏重于設計流程。
例如，Pinterest的設計原則便偏重于品牌。
Atlassian公司沒有分團隊或者產品單獨制定原則。
他們的目標是在客戶可觸及的每一點上都體現一些核心的價值觀。比如“大膽”“樂觀”“實用但不乏味”作為價值觀的體現。
不過，盡管各處的價值觀是相同的，但體現程度并不一樣。
例如，官網就會較多的提現“”大膽”，但產品里面就不會，正如Atlassian公司的設計經理Kevin Coffey所說的，“沒有人想要一個‘大膽的’服務支持頁面”。
Atlassian 官網截圖 https://www.atlassian.com/zh
Atlassian 設計體系 https://atlassian.design/
我們以TED為例。TED的一條設計原則是“追求永恒，而不是追求潮流”。永恒這個詞不光體現在TED的界面上，還體現在TED的整個品牌和設計方法上。
這意味著他們不會為了追逐潮流而采用一項新的技術或引入一個新的設計元素。
例如：定義了原則為“簡化”（讓產品盡可能簡單，簡單到幾乎感覺不到它的存在）。這種原則就是不實用也不可操作的。
怎么能讓團隊所有人都能理解？
消除無用的部分。每一個設計元素，無論大小，都必須有一個目的，并遵循它所屬元素的目的。如果你無法解釋一個元素為什么要在那里，那么它便很可能不應該在那里。這樣的定義就清晰很多。
再例如：定義了設計原則為“有用”，什么是“有用”？
從需求開始。如果你不知道用戶需要什么， 就無法做出正確的事情。去做調研，去分析數據，去與用戶交流，而不是做假設。
好的設計原則也能幫我們確定優先級和平衡點。
Salesforce公司的Lightning設計體系的原則是“清晰、高效、一致、美觀”。
這些原則的優先級必須遵從以上順序?！懊烙^”不應該高于“高效”和“一致”，而“清晰”應該始終放在第一位。按照這種方式對原則進行排序，可以讓團隊在做設計決策時明確哪些東西應該優先考慮。
Atlassian和Airbnb的團隊成員被問及他們的設計原則時，他們都能脫口而出，沒有片刻猶豫，沒有人表現出遲疑，沒有人想要去翻看品牌手冊里的原則內容。他們為什么能把原則記得這么牢固呢？因為他們的原則足夠簡單、實用、易于讓人產生共鳴。
Airbnb公司的四條設計原則（“統一”“通用”“風格化的”“對話式的”）便深深地扎根于其設計過程之中。
每當設計一個新的組件時，我們都會確保它完全滿足四條原則。如果我們沒有這一套原則，便很難就各種問題達成一致意見。----Airbnb 首席交互設計師
每個團隊建立其設計原則的方法都不盡相同：有的會召開幾輪研討會，有的可能會征求CEO或創意總監的意見。不過，無論采取哪種方式，都離不開下面幾點：
從目的開始
TED網站的主要目的可以用一句話來表述：“盡可能廣泛地傳播演講?！币虼?，TED網站的精神和價值觀便是觸及盡可能多的人群，降低使用門檻，讓產品具有很高的兼容性和可訪問性。這意味著優化性能和提升可訪問性比添加華而不實的功能更重要，清晰的文案比大膽的設計更重要。
尋找共識
如果你仍處在定義設計原則的階段，那么一個有效的方法便是讓團隊的一些人或所有人（取決于團隊規模）各自回答關于設計原則的問題。例如，在他們眼里，什么樣的設計對你們產品來說是好的設計？他們將如何用既實用又易于理解的五句話向團隊的新成員解釋設計原則？
面向正確的受眾
如果搞不清楚設計原則是為誰寫的，就一定會寫出含糊不清的原則。有的小伙伴說我們領導就喜歡“美觀”，那我們是不是把“美觀”放在第一位？一定要搞清楚為誰而寫。原則到模式
作為一個設計師，定義設計原則可能對你來說也許并不難， 但怎么把原則、品牌價值、組件相結合，怎么體現在設計模型中，這個我覺得是個挑戰。
對于 TED 來說，信息的清晰比美觀更重要。試圖將每個演講都 提煉成一個短句可能很難，所以有時候標題可能很長。對標題 進行截斷是很容易的，但對他們來說，演講信息的優先級是最 高的。
因此，他們沒有選擇相對容易的標題截斷方案，而是確保他們的設計模式可以容納長的標題。
功能性模式是界面中有形的構件（表單）。它們的目的是讓用戶能夠完成某種行為（填寫表單），或者激勵用戶完成某種行為。
功能性模式可以很簡單（標簽?字、輸?框、按鈕 ），也可以組合成更復雜的模式（搜索組件）。
標簽?字、輸?框、和按鈕
搜索組件由標簽?字、輸?框和按鈕組成
隨著產品的發展，模式也在不斷發展。包括風格，甚至功能和交互方式，都有變化。然而，它們的目的基本保持不變。
我們用頂部導航舉例：
頂部導航是由logo、搜索定位框、文字下拉框、圖標功能按鈕、通知按鈕構成。導航條里的每一個模塊都有自身的目的：搜索定位框告訴我們怎么快速找到想要的東西，導航帶領我們瀏覽全局，指引我們到想去的地方，而后面的的圖標按鈕讓我快速觸達。
總的來看，這些模塊都有一個共同的目的：引導用戶快速瀏覽使用。隨著產品的發展，模式也在不斷發展。
例如，隨著產品功能越來越多，可能會在導航上面新增設置功能，讓用戶自己去排布常用功能。又如，我們可能會對導航進行重新布局，把導航按模塊分類，采用標簽按頁展示。把模塊下面更多功能放到子頁面左側。雖然我們不斷的對模式進行迭代，希望它更好的實現各自的目的或者說更有效地激勵用戶使用。
在設計開始階段就闡明模式的目的，能避免在產品發展過程中做重復性的工作。
目的決定了其他的一切：模式的結構、內容及呈現。了解模式的目的，可以幫助我們設計和構建更加穩健的模塊。
如果說功能性模式是界面中的組件，那么感知性模式則更像是樣式——描述組件是什么類型的，給人的感受是什么樣的。下面，我們將探討感知性模式。
設想我們每個人各有一套房子，且每套房子都有以下這些家具：一張桌子、幾把椅子、一張床和一個衣柜。
不過，雖然都有這些家具，但每套房子給人的感覺截然不同：可能是因為家具的樣式、材料、顏色、紋理不同，或者是床罩的布料、裝飾品的樣式、房間的布局和燈光，甚至是房間里播放的音樂不 同。
上述這些屬性便稱作感知性模式。正是因為它們，可能你的房子就像是一個地中海風格的小窩，而我的房子就像是一個倉庫。
而數字產品感知性模式的例子包括語氣、排版、配色、布局、插圖與圖標樣式、形狀與紋理、間距、意象、交互或動畫，以及這些要素在界面中的組合和使用的具體方式。
有時，人們將這樣的特性視為產品的樣式，或稱作皮膚，也就是最外面的一層。但要想取得成效，它們必須不僅存在于表面，還必須存在于品牌的核心，并隨著產品的發展而發展。
只有這樣，感知性模式才會成為讓產品脫穎而出的強大力量。
同一領域的產品，哪怕具有相似的模塊，它們給人的感覺也是不一樣的。感知性模式通過界面傳遞品牌，并讓品牌被人記住。
看下面的圖片，你能認出它們是什么產品嗎？
這兩張圖里面并沒有太多的信息，你只能看到排版的樣式、一些圖形和顏色，以及一些圖標。然而那些視覺上的線索極具辨識度，所以你仍然很有可能看出它們分別屬于什么產品（即釘釘和飛書）。
這些視覺元素通過有意識地反復使用，便形成了模式，這就是為什么我們可以在沒有上下文的情況下認出它們。
在模塊化的系統中，想要做到視覺上的連貫統一可能是一件很棘手的事情。模塊是由不同的人根據不同的目的創建的。而由于感知性模式是滲透到系統中各個部分的，因此它們可以將系統的不同部分連接起來。如果這種連接是有效的，那么用戶就會感受到模塊之間的統一性。
例如：飛書和騰訊的相同功能的組件感知模式是不一樣的，所以兩個公司設計體系不能混用。
如果說功能性模塊反映的是用戶需要且想要的內容，那么感知性模式關注的則是他們直觀的感受或行為。
在《網站情感化設計》一書中，作者提出了一 個簡單的方法，通過創建“設計角色”捕捉產品關鍵的個性 品質。以下是一些有助于探索感知性模式的一些技巧。
情緒板是探索不同視覺主題的絕佳工具。可以使用數字化的方式創建情緒版（Pinterest或花瓣都是一種用于創建數字化情緒板的常用工具）。
如果你目前做的產品是需要體現：科技、質感、智能，那上圖應該可以滿足這些條件，你可以通過這張圖與領導進行溝通達成一致，然后從中提煉出一些顏色、元素、材質，這樣大方向就不會有太大問題，只需在細節上進行打磨。
定義好了大致的方向之后，便可以使用樣式疊片來更加細致地探究多種可能性。樣式疊片的概念由Samantha Warren提出，他將其定義為“由字體、顏色等界面元素組成的能傳遞Web視覺品牌精髓的設計交付物?！?
和情緒板一樣，樣式疊片可以為用戶和產品團隊提供有價值的討論點，并呈現他們對特定設計方向的初始反應。
arco.design 首頁這張圖可以理解為就是樣式疊片，把不同的組件樣式疊片放在一起比較，有助于準確地找到設計方向。
當功能模式和感知模式建立完成后，我們將它們集成到產品的過程，它們還將進行演變。
因為在真實的界面中，模塊、交互、樣式之間相互影響下會產生新的問題，這都是很正常的，是典型的迭代過程，這個過程會一直持續，直到設計語言最終形成。
像ant design、arco.design應該都經歷過這個過程，只是我們不知道而已，要不然也不需要花費幾年的時間打磨后才發布出來。
平衡品牌性與一致性：
過分關注一致性也會扼殺品牌性。矛盾在于，讓設計達到完美的一致性無法確保它依然具有很強的品牌性。有時，這樣做反而會削弱品牌性——在一致性和統一性之間存在著細微的差別。
《英國公開大學》的創意總監曾說過：“當你專注于產品一致性的時候，打造產品質感的一些重要的細微之處就有可能會丟失。
發展感知性模式需要為設計師賦予打破常規的權力，鼓勵設計師積極地探索更多的可能性。好的設計體系能在品牌的一致性和創造性表達之間取得平衡。
小規模試驗：
后期如果發現樣式無法滿足，我們如何將新的樣式引入設計體系呢？
可以先進行一些小規模的試驗是一種相當有效的做法。如果某些元素的效果很好，我們就逐漸將它們集成到其他界面中去。
例如，在學習者完成一個步驟時，純功能性的切換按鈕缺乏慶祝和成就的感覺。于是，我們用帶有圓形樣式、彈跳 動畫以及勾號圖標的按鈕取代了先前的按鈕。
雖然新的按鈕樣式受到了學習者們的好評，但它與設計體系的其他元素格格不入。后來，我們開始在網站的其他地方應用圓形圖案、彈跳動畫和勾號圖標。如果不這樣做，那么整個設計 體系給人的感覺就是割裂的。
數字產品都是由團隊打造的。團隊里的每個人都有各自的具體目標，都有各自的截止日期。這就意味著難免會出現草率加入的模式、重復或錯誤的模塊。
我們能確保一個產品即便有多人協作，卻仍能連貫、統一嗎？ 只要我們團隊對自己的設計體系及其運轉方式有共同的理解，我們就能做到這一點。
這意味著我們遵循相同的指導原則，我們對品牌愿景的理解是一致的，我們在設計和前端架構方面有共享的方法，我們知道什么樣的模式是最有效的，也知道它們的工作原理。換句話說，創建統一的設計體系需要共享設計語言。
許多偉大的建筑物（如圣家族大教堂、沙特爾大教堂、阿爾罕布拉宮）并不是由一位主建筑師在繪圖板上費力地創造出來的，而是由一群人構建出來的，這群人對能將這些建筑物變為現實的設計模式有著深刻的共識。
“幾組人可以通過遵循一個共同的模式語言，當場構思出他 們的大型公共建筑，就好像他們共有一個心靈?！?
——克里斯托弗 ? 亞歷山大，《建筑的永恒之道》
我們可以用類似的想法構建數字產品。設計語言可以讓人們創建出具有整體感的產品，哪怕不同的人負責不同的部分也是如此。
如果一個界面上的元素沒有恰當的名稱、團隊里人盡皆知的名。那么該元素就沒有在你的設計體系中成為有效的單元。一旦你給一個物件命了名，你就塑造了它的未來。
例如，如果你給的是一個表現型的名稱，那么它將來就會受到樣式的限制：“藍色按鈕”只能是藍色。
例如，如果你給的是一個狀態屬性的名稱：“幽靈按鈕”，它的特點是：按鈕形狀的透明按鈕，但有細實線的邊框，常用在有色背景上。
僅僅完成命名還不足以建立共享的設計語言。整個團隊都應該 沉浸到設計語言中去，讓它無所不在。
讓設計模式變得可見：
如果有條件，可以在墻上開辟一塊專門展示設計體系的空間，將它稱作“模 式墻”
讓你的設計體系更加開放，人們會感覺你歡迎他們的加入，歡迎他們提出問題甚至做出貢獻。
引用事物的名稱：
所有語言的共同特點是，只有不停地使用才能讓它保持活力。
它需要成為日常對話的一部分：
這就是為什么需要有意識地使用約定好的名稱去引用這些模式很重要——無論這個名稱聽起來有多奇怪。將設計體系作為入職培訓的一部分將設計體系的內容作為入職培訓的一部分，新員工了解設計體系就會更加容易。當新員工入職時，他們將了解到設計指南是如何創建出來的，這樣他們就可以理解為什么以及如何做出決策。在 《英國公開大學》 內部，他們創建了一個入門性質的線上課程，其中有一章專門對模式庫進行了介紹，并包含了 一些小測驗和小課程，這樣可以幫助新員工更好的理解設計體系。
定期組織設計體系會議：
每個人都討厭開會。但是，如果你希望每個人都跟得上設計體系的發展，那么組織召開設計體系的會議就是必要的。這是所有設計師和開發人員共同專注于設計體系的時間。一開始，可 以每周舉行一次，當團隊找到節奏之后，可以每兩周舉行一 次。團隊可以利用例會時間就產品的總體模式（如圖標、排版）得出一致意見。同時，這也是分享新模塊并討論其目的、 用途及可能遇到的問題的好機會。
設計體系不是一夜之間構建出來的，而是通過日常的實踐逐漸形成的。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：夜鷹YEAH 來源：站酷
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
對于B端來說，可能很多UI和前端喜歡直接套用Ant Design或Element ui組件規范；因為之前企業要求并不高，但是隨著市場和環境的發展，企業對B端越來越重視，這些模版太類同，顯然就太爛大街了。隨后字節推出Arco Design、騰訊推出企業級設計體系TDesign、有贊推出Zan Design，很多大廠都推出了適合自己產品的模版和規范，給了我們許多借鑒，能讓我們快速作出一個不出錯的方案。不過企業、市場的要求顯然不止于此，我們的設計追求也不止于此。那么我們如何才能擺脫套模版，提高界面的精致度，提升界面的交互體驗呢？
為啥要搭建設計系統？設計系統對我們開發團隊中誰有指導作用？
◆ 設計系統可以保證我們產品風格的統一性，降低用戶對新產品適應時間和學習成本；對UI設計輸出效率有很大的提高，在團隊協同中可以大大的減少無效溝通，節約時間成本
◆ 在開發團隊中，設計系統對UI、交互、前端、測試等崗位的工作都有一定的指導作用
設計原則是傳統智慧的沉淀與未來趨勢的結合體，能夠幫助我們更好的進行設計活動時代在進步，設計原則也必然需要不斷的更新以適應發展新的設計原則要求界面更友好，操作更加人性化。
這里我歸納了8條原則僅供大家借鑒學習:
◆ 可用性：有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作
◆ 易用性：易用是首要考慮的因素，能一步解決的事情絕不兩步
◆ 統一性：頁面風格、色彩、布局等要保持全局統一，不可為了某一功能的美觀而去破壞整體
◆ 親密性：信息的關聯性強，距離就要相應的縮短，讓他們看起來是一個視覺單元；反之，則距離要加大，要讓用戶對信息的區域劃分一目了然
◆ 對齊性：在界面中，將元素進行對齊，符合用戶的認知，引導視覺流向，讓用戶更加流暢的閱讀信息
◆ 對比性：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。
◆ 重復性：相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。
◆ 穩定性：沒有任何東西比產品的穩定重要，down機再好的產品也是徒勞。會影響到系統穩定的事情不能做
響應式布局，能夠適應各種屏幕尺寸及分辨率，確保整體布局的一致性簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。一般采用柵格系統布局，常用柵格一般是16列或24列。
◆ 柵格：是對界面當中元素橫向排布的一種模式，主要用于大型區塊間距的排列，不適用于圖標與文字間隔的小型元素。
◆ 模度：為界面布局的一致性和韻律感，統一設計到開發的布局語言，減少還原損耗，我們網格基數設為8，卡片寬度及間距為8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920
◆ 布局：常用左右布局或上下布局
左右布局以1920頁面布局為案例：通常B端產品左側會有一個導航菜單，假設240px,右側核心工作區域總寬1632px, 右偏移240px ,列數16列，列寬86px, 間隙16px， 左右邊距24px; 左邊導航和邊距固定不變。
上下布局以1920頁面布局為案例：通常左右會有一個留白區域，假設144px,中間核心區域總寬1632px, 右偏移144px ,列數16列，列寬86px, 間隙16px。
設計風格說白了就是用戶最直觀的感受，“商務、時尚、簡約、科技感、沉穩、年輕、高端...”?
決定設計風格的因素有這些：
色彩是UI設計的基石，人腦對于色彩的記憶度要高于形態；除了美學之外，色彩還是是情感和聯想的創造者。通過對自然的感知和行為，我們通常對色彩定義品牌色板、功能色板、中性色板，以及衍生色。
◆ 品牌色：是體現產品特性和傳播理念最直觀的視覺元素之一（例如：我們熟悉的政府藍/黨政紅/淘寶橙，他們都能直觀或間接的傳達產品特征屬性）
◆ 功能色：遵守用戶對色彩的基本認知，保持一致性，不過多的自定義干擾用戶的認知體驗，提高用戶的閱讀理解力，功能色代表了明確的信息以及狀態，比如正常、成功、失敗、警告、鏈接等
◆ 中性色：主要應用在界面的文字部分、背景、邊框、分割線等場景，根據使用場景，通常將中性色被定義為 3 類：文字、線條、背景
◆ 衍生色：B端產品中顏色的應用場景可能很廣泛，要考慮它的延展性，按照一定規則定義完畢主色，便可以自動獲得一系列完整的衍生色
設定統一的字體規范，無襯線黑體中宮更為開放，布白更為勻稱，顯示效果更為舒適，醒目利于閱讀，更利于視覺信息的傳達，在互聯網時代后期在界面設計中字體樣式還是會以無襯線體為主。
◆ 字體家族：根據系統區分Mac or Windows，如果用戶使用的是Mac系統可以優先使用Mac默認字體渲染 ；如果使用的是Win，字體兼容性選擇順序（有購買版權字體的可優先考慮），例：
◆ 字號：為了提升用戶的閱讀體驗，滿足用戶的可讀性，更為舒適、清晰，也能保證界面的層次感（結合WCAG 2.0標準），將 PC/Web 端主字體從以前的12px改為 14px。
◆ 行高：為上下文之間提供了呼吸的空間，規范的行高，可以使得界面層次清晰、重點突出
◆ 字體顏色：WCAG 2.0 中將顏色對比等級分為 3 種，A級，AA級，AAA級，等級越高意味著顏色的對比度越高，呈現出來的視覺壓力越大。字體顏色數量不建議太多，根據文字主次關系定義3-4個為宜（例：主文字、輔助性文字、提示文字、輕提示/禁用文字）
◆ 字重：字重不建議太多種，2-3種為宜（例：Regular、Medium、Light）
圖形中有圖片、圖標、圖表，都對整體風格有一定影響，設定統一的圖形使用規范，可以使視覺效果更加和諧
交互，即交流互動，也就是說我們自己通過我們的五覺：視覺、聽覺、觸覺、嗅覺、味覺來感受其他事物并和他們之間產生信息溝通的過程。在互聯網中交互對象個體主要是人和機器，所謂人機互動，相互配合，共同達成某種目的。
◆ 交互方式：保持產品的統一性，同類別的交互不可有不同的操作感受。要符合大眾的認知習慣，可創新但不可違背潛意識，例：wab端頁面鼠標交互操作一般有下拉、上滑、按壓、懸停，移動端一般左右上下滑動、下拉、上拉、雙指縮放...
◆ 交互狀態：按鈕狀態變化，頁面狀態變化，組件狀態變化...交互內容確實太大了，我個人也只接觸到的也只是冰山一角，只能拋磚引玉，勾起大家思維，相互探討學習
◆ 引導：引導一般常見5 種：新手引導）、步驟引導、幫助/操作引導、新功能引導、空白頁引導
什么是組件？組件是抽象概念,對面向過程而言是對數據和方法的簡單封裝。對面向對象而言是一些符合某種規范的類組合在一起就構成了組件。它可以提供某些特定的功能。組件出現的原因軟件工程中重復、反復出現、普遍的、有相似的問題的出現,導致開發過程中有大量的代碼需要不斷的重新設計,開發周期延長,開發復雜度增加。需要岀現一種模型通過剝離掉各個問題的特性,抽取各個問題之間的共性。從而在保證代碼的靈活性下極大的增加代碼的可重用性。組件的岀現就是為了解決這些實際問題的。
在前端眼里，組件通常是指頁面上的視圖單元，可以說，UI組件是組件的子集。組件庫大致可以分為這幾大類：
◆ 導航：固釘、面包屑、下拉菜單、下拉導航、電梯、菜單、分頁器、步驟條
◆ 數據錄入：自動完成、級聯選擇、多選框、日期選擇框、表單、輸入框、數字輸入框、提及、步進器、評分、下拉選擇、滑動條、穿梭框、文件上傳
◆ 數據展示: 頭像、標題、卡片、輪播、折疊面板、表格、拖拽排序、高亮關鍵詞、時間軸、走馬燈、空狀態、徽標數、樹、標簽、標簽頁、圖片、氣泡...
◆ 反饋: 警告提示、抽屜、全局提示、對話框、通知提醒框、氣泡確認框、進度條、結果、加載中..
◆ 其他: 錨點、回到頂部、圖標...
設計規范是為了更高效的做設計，但不是一成不變的，它在落地使用的時或多或少都會有問題，需要我們慢慢的去反復檢驗它的合理性，發現不合理的及時更正，不斷迭代，不斷沉淀，不斷優化，這樣才能不斷提高產品的用戶體驗。此次分享借鑒一些前輩的經驗，主要是整理歸納學習，如有需要補充或糾正的，歡迎大家相互探討！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：小魚ID 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
用戶體驗（用戶使用產品，系統或服務過程中的主觀感受）
用戶在使用產品過程中建立起來的一種純主觀感受。用戶體驗這個詞最早被廣泛認知是在上世紀90年代中期，由用戶體驗設計師唐納德.諾曼（Donald Norman）所提出和推廣。對于一個界定明確的用戶群體來講，用戶體驗的共性是能夠經由良好設計實驗來認識到。用戶體驗并不是指一件產品本身如何工作的，更明確的是指“產品如何與外界發生聯系并發生作用”，也就是人們如何‘接觸’和‘使用’。無論什么產品，用戶體驗總是在細微之處，往往細節最能打動人心。用戶體驗通常要解決的是用戶具體的使用場景，要兼顧視覺和功能兩方面的因素，同時解決產品所面臨的其他問題。
產品的邏輯簡易程度對于用戶體驗是一個反向指標，產品越復雜用戶體驗會越發困難。往往產品后期更新迭代中，每新增一個特性，功能或者步驟，都會增加導致用戶體驗不順暢或者失敗的機會。用戶體驗的每一個流程，對開發者而言都要經過慎重的考慮和驗證。實際上設計出一個最優的解決方案需要更多的時間和精力，往往不得不在各個方面作出妥協。但是一個以用戶為中心的設計流程保證來這些妥協不是隨機決定的。
為什么每個產品都在強調‘站在用戶的角度，提升產品的用戶體驗’，因為優秀的用戶體驗就是商機，良好順暢的用戶體驗會極大的提升用戶轉化率，增加用戶的留存率。好的的用戶體驗主要體現在兩種形式：“幫助人們工作更快”和“減少他們犯錯幾率”。牢記“以用戶為中心的設計”在開發產品的每個流程都要把用戶列入考慮的范圍，每一個流程步驟都要代入用戶的使用場景中體驗，想用戶所想。提供優質的用戶體驗是一個重要的，可持續，良性的競爭優勢，用戶體驗形成用戶對企業的整體形象，并以此來界定來與競品的差異。
在產品的整個開發流程中都要考慮用戶有可能采取每個步驟的可能性，并且理解整個流程中每一個步驟用戶的期望值。
表現層：視覺設計，我們使用無論任何設備的產品最先看到的就是表現層，內容、功能和美學匯集到一起來產生一個最終設計呈現；
框架層：界面設計、導航設計和信息設計，框架層用于優化設計布局，以達到界面中元素的最大效果和效率；
結構層：交互設計和信息架構，相對于框架層更加抽象，框架是結構的具體表達方式，明確來元素應該出現在哪里；
范圍層：功能規格和內容需求，結構層明確了產品的各種特性和功能最優的展示組合方式，這些內容構成了產品的范圍層；
戰略層：產品目標和用戶需求，成功的用戶體驗，其基礎是一個被明確表達的“戰略”。知道企業與用戶雙方對產品期許和目標，有助于確立用戶體驗各方面戰略的制定；
在五個層面應該是自下而上的建設，戰略 — 范圍 — 結構 — 框架 — 表現；不同的層面位置考慮的方向和側重點是不一樣的，隨著層面的上升我們考慮的決策變得更加具體，并且涉及越來越精細的細節表現。每一個層面都是根據下面層面來決定的，每一個層面的決定都會影響上層的可用選擇，表現層由框架層決定，框架層是建立在結構層的基礎上，結構層是具有范圍層，范圍層是根據戰略層制定的。
按照產品不同屬性分為兩大類：功能性產品/信息型產品；針對不同的類型將五要素細分展示，功能型產品更加關注的是任務，去思考用戶如何完成這個過程，用戶使用該產品完成一個或多個任務的工具；信息型產品關注的則為信息，產品應該提供哪些信息，并且方便用戶快速尋找，理解，創建一個富信息的用戶體驗；這種把用戶體驗劃分為各個模塊和層面的模式，更有利于我們去考慮用戶體驗中可能出現的麻煩。所有處在同一層面的要素都會決定最終的用戶體驗效果。
優秀的用戶體驗基礎是要有明確的“戰略”立意，知道企業和用戶對產品的期許和目標，才能更好的促進用戶體驗各方面的完善和優化。我們要用過產品獲得什么？用戶通過產品可用得到什么？回答這兩個問題有助于我們更好的明確產品目標和用戶需求，結合兩者我們組成戰略層。
產品目標：目標的制定切記不要太過具體或太寬泛我們需要在這之間找出一個平衡點，為了更好的用戶體驗我們需要保證所作出的決策都不是頭腦發熱拍腦門定出來的，每一個決策，都應該建立在我們確切了解他所帶來的聯動影響效果。明確的定義出成功的條件而不是定義成功的路徑，有時候跑的慢一定不一定就是落后者。既然是賽跑肯定會有終點有結果的產出，我們要明確“成功的標準”制定可追蹤的指標，成功的標準不僅僅影響各階段的決策，也是衡量用戶體驗工作的具體依據，埋點數據采集，上線后的客戶流存率，轉化率，新用戶的增長率，老客戶的使用反饋等等。對驅動用戶體驗的決策而言有意義的成功標準，一定是可用明確與用戶行為綁定的標準，而這些用戶行為一定是可以通過設計來影響的。
用戶需求：明確正確的用戶需求是復雜不易的，因為用戶群體存在很大差異性，確定大致目標用戶后我們還需要精細化的區分，將用戶分成較小的，有共同特性的以此來助力我們更好的明確用戶需求，通過不同的角色群體使用產品來分析他們的需求。在針對用戶需求研究時我們還可以使用一些市場調研（將你想要的信息通過具體，有效的公式化問題，讓用戶提交你正確的答案）；現場調查（完整的，有效且全面的方法，了解與產品使用生活場景最匹配的用戶行為）；創建人物角色（模擬真實用戶使用場景更加貼近用戶，再產品思考中和用戶更感同身受）。戰略應該是用戶體驗中的起點，但并不意味著項目開始之前戰略就完全確定下來，它是可以在整個工作中演變和改進的。
當我們明確了解戰略層后，我們就知道產品應該為用戶提供什么功能和服務，這些也就逐步演變為范圍層。我們要做兩個事情來定義范圍層 —過程和產品。過程的意義在于當產品還在一個雛形時，可以帶動我們去思考流程中可能存在的問題，功能實現的優先級；產品的意義在于明確最終產出的結果，團隊有明確的目標。在這其中文檔的輸出是必不可少的，有計劃性說明性的文檔輸出可以讓我們的工作更加有條不紊的推進下去。我們可以從戰略層抽象出來 — “我們為什么要開發這個產品？”轉而到范圍層變為 — “我們要開發的是什么？”在軟件開發過程中，范圍層確定的是全部功能需求和功能規格。
功能規格：功能規格說明不需要包含產品的每個細節，只需要包含在設計或開發過程中可能出現混淆的功能定義。同時功能規格說明也不需要展望產品未來理想狀態，只需要記錄在創建產品時確定下來的決議。換句話說，文檔不能解決問題，但是定義可以，我們需要不是文檔多么詳細厚重，而是要足夠的清晰和準確。功能說明要明確具體避免主觀語氣，避免出現歧義，盡可能用量化的可檢驗的標準來定義功能有助于我們的驗收。
內容需求：很多時候我們說到的內容指的是文本。但是圖像，音頻和視頻有時候比文字還要重要。這些不同類型的內容結合到一起，相互協作去滿足某一個需求。內容特性想要達到的規模，將對你所做的用戶體驗產生極大的影響，內容需求應該提供每一種特性規模的大致預估，以便在設計過程中作出最為明智的決策。盡可能早的確定某個人來負責每一個內容元素也是非常重要的，避免后期開發實現達不到我們預期的效果。內容清單的輸出也是重要的，究其原因這樣團隊中的每個人都會清楚知道自己負責的哪些部分，明確責任，提高協同效率。
學會確定需求優先級，了解“不需要做什么”也就意味的我們知道哪些是必須要“馬上去做的”，把那些需求點梳理出來，找到一種適宜的方式，讓它們符合你長期的規劃，這才是真正的價值所在。確定具體，系統的發展要求，并將任何不符合這些要求的想法作為潛在未來功能的囤積，只有通過這種更慎重的途徑，才可以真正的管理起整個項目過程。
在羅列出項目需求優先級，梳理出大致的流程，我們對于產品將會包括什么主要內容已經有了清晰的構想。然而，這些需求沒有進行全面的整合還是碎片化的存在。而結構層要做的就是整合這些創建一個概念性的結構。結構層適當的將我們關注點從抽象的決策和范圍問題，轉移到更能影響最后的用戶體驗具體因素。但是這里的交互設計和信息架構所產出的東西大部分還是概念性的內容。這兩項內容并不完全是技術，它要求開發者要有共情能力去理解用戶，理解用戶行為操作習慣，使用場景，思考方式等。將了解的這些知識代入我們開發過程中，這樣會使那些不得不使用我們產品的用戶帶來更好的用戶體驗。
交互設計：關注于影響用戶執行和完成任務的元素，即關注用戶所有操作，同時定義“系統如何配合與響應”這些用戶行為。任何一個交互設計的項目都有很大部分牽涉處理“用戶錯誤”當用戶發生錯誤時產品要給出什么提示，并且對于錯誤發生時，如何防止用戶再次發生錯誤？第一個也是最好的防止錯誤的方法，就是將產品設計為不可能犯錯的。第二個避免錯誤的方法就是使錯誤難以發生，即使一些錯誤發生，產品也應該幫助用戶改正錯誤。有效的錯誤信息和容易自我解釋的界面可以在錯誤發生之后幫用戶糾正。當用戶完成一些操作后無法糾正的錯誤，產品就該提供從錯誤中恢復的方式。對于那些不可恢復撤銷的錯誤，提供大量警告就是產品唯一可以預防的方法。
信息框架：研究人們如何認知信息的過程，對于產品而言信息架構關注的就是呈現給用戶信息是否合理并卻具有意義。在以內容為主的網站上，信息架構主要工作就是設計組織分類和導航的結構，讓用戶可以高效率，有效的瀏覽網站的內容。信息框架與信息檢索和分類體系密布可分，針對分類體系我們可以從上到下或從下到上這兩種方法來建立。
從上到下的信息架構從戰略層考慮，先從最廣泛的，有可能滿足決策目標的內容與功能開始進行分類，然后再依據邏輯細分出次級分類；從下到上根據對“內容和功能需求分析”而來，從已有的資料開始，先把他們分為最低級別的分類，然后再歸納到高一級分類，從而逐步構建出反應我們產品目標和用戶需求的結構。這兩種方法各有弊端，從下而上容易將內容的重要細節忽略，從下而上使架構過于精準的反應內容，對于后期的維護變動不是很靈活。因此我們要盡可能的從兩種方式中尋找一個平衡點。一個高效結構的優點就是具備“容納成長和適用變動”的能力。一個適應性強的信息架構體系，既可以把新內容作為現有結構的一部分容納進來也可以當成一個新的部分加入。
在充滿概念型的結構層牽引出大量需求后，這些需求都是來自我們戰略目標的需求。在框架層我們要更進一步的提煉這些需求結構，確定詳細的界面外觀，導航和信息設計，這樣才能使結構變得更加豐滿。框架層需要處理更為細節問題，在結構層我們建立了一個框架和交互設計。在框架層我們關注點就是界面的元素以及它們之間的關系。當我們提供用戶做某些事情的能力是，屬于界面設計；當我們提供用戶去某個地方能力，則屬于導航設計；當我們要傳達想法給用戶時，那就是信息設計。
界面設計：成功的界面設計就是要讓用戶一眼就看到“最重要的東西”，而另一方面，不重要的東西，不應該被注意有時候則它們根本就沒有出現在那。設計界面，平面最大的挑戰之一就是弄清楚用戶不關注的東西并減少他們的比重。將第一要表達的要素快速傳遞到用戶。
導航設計：任何一個網站的導航設計必須同時完成三個目標：1.它必須要提供用戶在網站的跳轉方式；2.導航設計必須傳達出這些元素和它們所包含內容的關系；3.導航設計必須傳達出它的內容和用戶當前瀏覽頁之間的關系；這三個目標就是必須要納入考慮的范圍，清晰的告知用戶“他們在哪里”以及“他們能去哪里”把用戶當成是“傻瓜上帝”。
習慣和反射作用是我們與這個世界交互時的基礎，我們在使用互聯網產品這么多年的時間中，絕大部分的操作效果和下意識的操作方式已經被養成，所以要讓你的界面與用戶早養成的習慣保持一致是很重要的，界面要與它自身保持一致。這并不是說，每一個界面問題的解決方式都必須毫無條件的死守這些習慣。當某種不同的方式有明顯的益處時，你反而應該嘗試謹慎的違背一些習慣，到那時需要我們做的每一個決定都要有充分的，明確的理由。有效的使用比喻，就是減少用戶在“理解和使用你的產品功能”是的猜忌，讓用戶第一眼就知道你的圖標表達的是什么意思，要有強指示性質。
內容，功能和美學匯集的地方，完成其他四個層面的所有目標并同時滿足用戶的感官感受。在框架層，我們主要解決放置的事情；在界面設計考慮可交互的元素布局；導航設計考慮在產品引導用戶移動元素安排；而信息設計考慮傳達給用戶的信息要素的排布；在向上就是表現層，我們這里要解決的就是彌補“產品框架層邏輯排布”的感知呈現問題。我們每一次經歷最終都是由我們的感覺器官來進行的。在設計的過程中這是用戶體驗的最后一站：決定我們設計最后被哪些（視覺/聽覺/嗅覺/觸覺/味覺）感受器官受到呢？
嗅覺和味覺對于用戶體驗設計師是很少考慮的范圍；觸覺更多的用于工業設計領域，關注用戶和產品之間的物理接觸；聽覺可以應用到不同類的產品中，如開機/新消息提示等；視覺：這是用戶體驗師最得心應手餓領域，幾乎所有的產品都會涉及視覺設計。代替用“什么具有美感”來評估一個視覺設計方案，應該吧注意力集中在他們能否“良好運作”，對于那些上層決定的目標，設計能否賦能幫助企業更好的變現，設計的本質就是用合適的方式幫助用戶/企業完成需求目標；
忠于眼睛評估一個產品視覺設計最簡單的方式，就是你的視覺首先落在什么地方？哪個設計要素第一時間吸引注意力？它們對于戰略目標是最需要表現的東西嗎？用戶第一時間接受的信息是你想要表達的嗎？設計還是要把握4大基本原則：對比；重復；對齊；親密性；
不管你的產品多復雜，用戶體驗都是一樣的，創建良好的用戶體驗最重要的工作內容就是大量收集解決細微的問題?！俺晒Φ姆椒ā焙汀白⒍ㄊ〉姆椒ā睔w根究底就是：1.了解你正在試著去解決的問題；2.了解這些解決辦法所造成的后果；必須要同時考慮五個層面的全部因素，這對于創建成功的用戶體驗至關重要。
提成正確的問題，面對那些用戶體驗需要解決的糾纏不清的問題，要抱有一種正確心態，不要以“節約項目時間或金錢”名義對用戶體驗問題敷衍了事。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：許小鵬 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
用戶體驗設計師經常需要兼職各個角色職責，除了線框圖和原型制作之外，還有可能與團隊一起研究、寫作等問題。這樣的例子不勝枚舉，用戶體驗是一個不斷發展的多學科領域，因此優秀的 UX 設計需要廣泛的技能開發，UX寫作位居榜首。
關注用戶從內容開始，內容策略是所有產品信息的制作和開發。用戶體驗（UX）寫作是該學科的專長，它專注于幫助用戶用語言實現他們的目標。
語言幫助用戶到達他們想去的地方，通過關注用戶想要實現的目標，內容策略可以建立忠誠度和信任度。
UX設計師思考頁面上的信息層次結構，然后，這將指導用戶操作。UX與研究人員一起測試有關語言的假設并提供專業的見解。
當您擁有 UX 寫作的基礎，并參與品牌建設時，就會發生驚人的事情，用戶體驗寫作可以讓品牌茁壯成長。
通常在產品中，使用的詞是軟件操作，請用動詞，它往往是句子中最有力的部分。它將與用戶的某些操作有關，
保障用戶使用中清楚，需要刪除技術術語并將操作置于用戶的上下文中。
簡潔不僅意味著簡短，還意味著簡單高效。當我們寫作時，需要查看我們的信息每個詞語都有不同的工作。
以上是產品寫作中的常見問題，在這里不需要標題。在系統接口中很常見，研發提供一種狀態，我們通過這種狀編寫文案。我們應該確保內容優于設計，視覺效果與要表達的內容一致。盡量不要把信息塞進不適合的盒子（代碼）里。
在這里，我們刪除了標題。正如研究表明，大多數人不會閱讀屏幕上出現的每個詞語，用戶傾向于掃描。他們的眼睛會遵循 F 形圖案。閱讀第一行，第二行，然后開始向下跳過頁面，只捕捉每個句子的第一個或第二個詞。出于這個原因，保持我們的文本不僅簡潔而且前置。將重要概念放在首位，這樣做是為了讓人們在瀏覽頁面時能看到那些重要的詞。
這個原則永遠適用，將最重要的文本放在前面，然后無情地編輯后面的內容。
號召性用語 (CTA) 引導人們進行下一步，您希望引導用戶到達他們想去的地方，號召性用語需要與用戶想要做的事情產生共鳴，這里的“好的”不是一個好的行動號召。
“再試一次”是一個不錯的選擇，這不是全部場景，如果用戶忘記了密碼，而唯一的按鈕只有“再試一次”，用戶可能會感到沮喪，我們需要給用戶多一個選項「忘記密碼」。
注意寫作時需要結合使用場景，它可能需要提供的一些基本功能，但可以提升產品的用戶體驗。
如果您注意這三個原則，您將更好地與用戶建立聯系。
這三個原則并不總是協調一致的，他們之間有一種張力在互相競爭。
當我們使文本清規則時，文案仍然很長，而且不太好閱讀。當我們使文本簡潔規則時，它使文案更短，但可能犧牲一些清晰度為代價。最后，當我們使文本有用規則時，它變得更長且更不易閱讀。
從一個品牌中，我們可以篩選出 3 或 4 個形容詞，以及希望用戶如何看待它。提取這些形容詞，可以采用頭腦風暴練習。
想象一下，如果要設計一個約會產品
您會在產品資料中加入什么詞或信息？讓它在眾多產品中脫穎而出，是什么讓用戶覺得它最有趣？
是什么讓用戶想要點擊并想要了解更多信息？
然后，您可以將這些品質提煉成描述性詞語，這些將成為您的品牌原則。
Google Pay 的原則是：新鮮、善解人意、平易近人。
想想您在不同的環境或情緒中聽到聲音是什么樣，這是語氣。
聲音和語氣之間差異，是聲音傳播手段，語氣是根據情況或內容而不斷調整的。在一個產品中，就像在不同的情況下以不同的方式與用戶交談，語氣的利用容易帶用戶進入情感化的設計。
例如：
將不同的階段映射到用戶旅程中，可確保用戶在整個產品體驗中以一致的方式使用產品文案。
對于產品，您的文案寫作可能從信息豐富到鼓舞人心或者幽默風趣。創建產品開端與終端后，您需要確定要映射的用戶旅程中的哪些時刻，考慮用戶體驗中不同的里程碑或交互，如注冊、引導、或錯誤提示之類。
為了幫助您確定這些將落在頻譜中的哪個位置，您可以考慮：
現在，我們將前面講的內容，融合在一起做一次UX 寫作練習
UX寫作原則
舉個例子，第一次使用 Android Pay 時需要對用戶說什么？
在流程開始時，從以下描述性內容開始：
思考良好的用戶體驗寫作的三個原則，文本清晰有用，但并不簡潔。讓我們查看看哪些信息是必不可少的，哪些部分可以使用視覺效果？最后編輯為如下所示：
Google Pay 的原則是：新鮮、善解人意、平易近人。
文案已經清楚，簡潔和有用，現在需要考慮語氣詞，還有就是“這段文字是否傳達了品牌？”不多，感覺很一般。
因此，回到品牌原則，需要考慮如何讓它更新鮮、更令人興奮，因為這可能是用戶的第一印象。
有了這份清單，您就可以讓產品在語言上脫穎而出：
行業對設計師的要求?直都在不斷革新，只有「?技之?」的設計師已經很難滿??業需要，產品分析已經不僅僅是產品經理的工作內容，對于 UI 設計師來說，也是必備技能之一了，尤其是對于 B 端領域的設計師來說，更需要拓寬視野，思維前置。
那么，該如何去做產品分析呢？本文將從產品分析是什么，如何做兩個方面來講述，為大家提供思路，做真正落地的對設計有幫助的產品分析，提高自己理解業務、處理業務、解決問題的能力，體現出設計師的價值。
對于 B 端產品來說，它只有一個目標，就是解決問題，通過對問題的分析得出解決方案，而任何一個問題都不會只有一種解決方案，在權衡利弊后得出了最終的解決方案，產品就是解決方案的表現形式和實際載體。
從設計師的角度來說，產品分析通常是挖掘產品缺陷，優化產品體驗，為產品迭代提供依據，比如：通過深度體驗產品，挖掘產品的在功能、交互體驗方面的不足，并通過分析制定產品優化方案。一款產品從淺至深擁有無數的可被挖掘的信息，這些信息本身是龐雜冗余無意義的，只有通過分類和清洗才能得到對人有意義的信息，本質上來說，產品分析就是在做信息分類和清洗的工作。
市場分析是對產品所在的市場進行宏觀的競爭態勢和市場規模的分析。市場分析主要包括行業背景、市場現狀和商業模式三部分?？梢钥吹?，市場分析其實是從很宏觀的一個角度來切入，更偏向于戰略層內容，因此市場分析也是三者中距離設計師最遠的一個概念。用通俗的話來說，市場分析最主要的目的就是分析產品是否賺錢。
廣泛意義上說，競品分析就是根據分析目的，找到切入角度，對競爭對手或市場進行客觀分析，找到競品或自己的優勢與不足，為下一步決策提供科學依據，其實就是「知己知彼」的過程。對于設計師而言，競品分析的目的更傾向于尋找解決方案，比如：通過競品分析來尋找參考從而解決自己當前遇到的問題。
不同于 C 端，B 端往往有很堅固的行業壁壘，所涉及業務也非常難以理解，究其原因，來自以下兩個方面：
B 端產品很多時候，都是在原有線下業務的基礎上進行數字化。邏輯的復雜度本質上是來源于這個行業多年來積累的足夠成熟的業務流程與規范，而這些東西沒有辦法速成，只能靠不斷地積累來增進理解。
C 端產品的設計中，設計師大部分情況下都或多或少地就是用戶本身，或者帶有用戶屬性，比較容易產生同理心，去發現問題解決痛點。
而 B 端產品不是給普通用戶使用的，是給特定群體使用的，這種特質就決定了設計師很難去真正地理解用戶的處境，設計師最厲害的特質——同理心也很難派上用場。
有的設計師同學，一接到產品分析的任務，到手就是先去網上看看別人是怎么做的，然后按著人家的結構對自己的產品進行一通分析，其中不乏用到了「用戶體驗五要素」、「SWOT分析」等看起來高大上的方法論。
按這樣做，產出的分析報告不能說錯，但是最起碼是不恰當的，對設計上的幫助微乎其微。其中有這樣兩個問題：
產品經理是產品的第一負責人，需要對產品的整個生命周期負責，說人話就是產品經理負責產品做什么不做什么，該什么時候做，而設計師關注的是產品的用戶體驗。產品是商業的代言人，而設計師是用戶的代言人，二者本質上的不同，就決定了在做產品分析時關注點必然不同。如果按著產品經理的思路來做產品分析，得出大環境之類的太過于泛化的結論對設計沒有什么實質性的幫助。
用戶體驗五要素，swot，等等這些高大上的方法論看起來非常有用，從多個維度把一款產品分析得非常清楚?？烧鎸嵉那闆r時，往往新手設計師同學既不懂方法論的本質，也不懂使用場景，只是盲目地套用，導致產出的是一篇「八股文」一般的產品分析報告，過于全面但沒有重點，什么都是點到為止，對自己理解業務和輔助設計沒有實質性的幫助。
我認為，「方法論」本質上是經驗主義，使用過去解決問題的方式來解決新的問題。在一定程度上，方法論是有用的，一些簡單的問題，確實是有固定解法的，而且，解決問題也更快。但是在更難更特殊的場景下，方法論不再管用了。很多時候，問題表面上看起來一樣，可是由于問題的背景不同，所以解法也是不一樣的，這時候再采用方法論，就會產生思維固化，強行去套方法流程，得到的一定不是最正確的答案。
在確定了目標和分析重點之后，我們就可以開始進行分析產出產品分析報告了，在這里我整理了幾個撰寫時的原則供大家參考：
第一點是我們要避免去主觀臆斷功能的合理性。正如我上面提到的一樣，我們并非 B 端產品的核心用戶，有些我們感覺反常的地方，但是其實有它的合理性，因為 B 端用戶的痛點往往是在特定的工作場景下產生的。因此，在不了解真正用戶和場景的情況下，僅憑經驗下的結論往往是錯誤的。
我之前的一個項目的設計中，在給圖表配色時，我最初的一個版本是用的近似色去完成的，在發給產品經理初審時被打回來了，理由是這種配色不夠明顯。我追問原因后才知道，我們的一部分用戶是年齡比較大的用戶，對比度足夠高才能方便他們看清楚。最后出的一個版本是對比度非常高的配色，盡管從設計的角度來看這種配色美觀度不足，但是能夠讓用戶看得清楚。
在這個例子中，用戶對于美觀度并沒有很高的要求，反而對于數據的識別度要求更高。我們常聽的一句話是「己所不欲，勿施于人」，然而在B端的設計中，我們更要做到「己所欲，亦勿施于人」。
B 端產品有一個很重要的特點，購買決策者與使用者的割裂。我們在思考一個功能時，不能僅僅考慮使用者的體驗，也要考慮決策者的想法。
比如釘釘的「已讀未讀」這個功能，相信大家對這個功能是槽點滿滿。但是在 B 端產品中，決策鏈上游是購買決策者即老板，因此就有了這個功能。如果只考慮到用戶體驗，這個設計從一開始就不該出現。但是，與 C 端產品的流量思維不同，B 端產品不是靠體驗來吸引用戶存活的，而是靠滿足決策者的需要來活下去的。很多大家感覺不好用或者體驗很差勁的 B 端產品，仍然活得很好，就是這個道理。
說句題外話，釘釘已經注意到了這個細節，在去年的一個演講上，釘釘總裁也提到了對這個功能點的考慮，他舉了一個場景，在不改變現有設計的情況下解決了這個問題，通過智能手表等外設來預覽消息，而手機和電腦依然顯示未讀，自己考慮好了的時候再去回復。
從戰略層到功能架構，再到每個功能細節，采用金字塔原理去遍歷，避免遺漏的同時層層深入。
在此處，我介紹一下我認為一份合格的產品分析報告應該包含的部分，各位設計師同學可以根據自己的需要進行適當調整。
因為產品分析是有一定的時效性的，且是針對某一個具體版本去進行分析的，所以在文檔開頭要列出自己所分析產品的版本，例如（飛書 V5.6.9，釘釘 6.3.35）。
即設計師進行產品分析的時間，留檔以供以后查看。
此處要回答的問題是，產品是用來干嘛的，給誰設計的以及怎么賺錢的。
即產品是用來干嘛的，不需要特別具體，只需要在大方面上對產品進行概括即可。舉個栗子，抖音定位是一款短視頻消費型產品，以“內容”的新鮮有趣為主，強調分享和信息獲取，滿足幸福快樂的美好時刻需要。
即產品是給誰設計的，在此處需要對客戶和用戶做區分?？蛻粢话闶侵钙髽I的 CEO/管理者，他們來決定是否要斥「巨資」購買一款軟件。比如說某公司的 CEO 最終決定買釘釘還是飛書作為辦公協同軟件。而用戶一般是企業內的員工，他們使用軟件來完成一些日常工作。分析目標用戶的意義是，在之后的分析中，我們都要以用戶為落腳點，去分析功能的合理性。
需要注意的是，此處并不需要去做一套完整的用戶畫像，只需要大概描述一下是產品的客戶和用戶的職位和核心需求即可。
舉個栗子，對于某客服工作臺產品，
即產品如何賺錢，在這里，我們并不需要用各種很高端的工具——比如商業模式畫布，去分析商業模式，我們僅需要知道產品的賺錢方式即可。作為設計師，我們不需要有產品經理那么專業的商業思維，但是我們也一定要能夠從商業角度理解產品的價值，一款產品最健康的狀態一定是用戶價值與商業價值并存。因為本質上而言，用戶體驗也是商業價值的一部分。
對于B端產品而言，有兩種最常見的售賣方式：
1. 本地部署 —— 按軟件數量售賣
本地部署是指產品的應用、數據都存儲在一臺計算機中，這臺計算機不與其他任何服務器、計算機相連。21世紀之前的傳統 IT 公司大部分都屬于這類，比如 Adobe 旗下的產品（盡管他們也在做云，但是更多情況下我們還是把 PS 當做本地產品來使用），那時候 B 端企業的商業模式是：主要服務于大企業客戶，通過與頂級的合作伙伴合作，推出頂級的產品，提供一整套軟硬件解決方案，并進行深度服務，一次性收取高昂的軟硬件費用，并且每年加收不少服務費。
2. SaaS —— 訂閱制
21 世紀后，隨著云計算技術的發展，越來越多的產品開始部署在云上，也就逐漸發展成了現在的 SaaS 產品，從這個角度來講，我們通常所說的 SaaS 產品其實就是將本地部署變為云端部署的產品服務。
這時候 B 端企業的主要商業模式是：不僅服務于大型企業，也服務于中小企業。以訂閱制的方式，定期收取費用，并且提供不同的版本，進行差異化定價，實現收益最大化。
舉個例子，藍湖就是提供了四個版本并且以季付或年付的方式進行收費。
將需求轉化為對應的軟件層面可實現的能力，即功能，功能可以實現需求所期望達成的目標。
一個完整的 B 端產品包含若干功能，將一套功能依據業務進行分類整合，形成的抽象化業務模型即功能架構。
功能架構指的是產品是如何由這些功能組成的。我們在分析功能架構時實際上更偏向于產品的實現模型。
信息架構是包括組織系統、標簽系統、導航系統、搜索系統在內的綜合系統。我們在分析信息架構時，分析的是這個產品是如何將不同的功能組合在一起展現在用戶面前的，分析的是產品的呈現模型。
一個成熟的 B 端產品甚至會有甚至會有三四百個功能，我們在分析功能細節前，必須要先厘清架構，以一種抽象的框架視角來全局思考，而不是也僅僅以用戶的視角來看產品的表象。
真正地去使用產品，并將產品的所有功能與模塊收集到一起。
以模塊作為分類依據，將所有功能分到不同的模塊里，必要的話，可以繼續細分子模塊。
在這里要注意，一個功能是否屬于某一個模塊，不能以這個功能是否在某個頁面為依據。一個頁面出現了某個功能，只是因為這個場景下用戶需要這個功能，而不是這個功能屬于這個頁面。
以飛書后臺為例，很多人在分析時會把首頁也作為功能架構圖中的一個節點去分析，這是錯誤的。
首頁只是功能的聚合，而非功能模塊，例如「添加成員」這一功能應該屬于「組織架構」模塊中，如果將首頁也加入分析，勢必會出現功能的重復。
在分析完整個功能架構之后，我們可以深入到每個功能的細節了。其中包括以下兩點：
通過繪制功能的使用流程，我們可以模擬用戶在使用產品時的流程，發現一些從宏觀角度上忽略的點。在繪制時，要注意的是，要控制在頁面 & 操作維度，避免拔高到功能維度甚至業務維度。
我們除了要知道這個功能該怎么用之外，還要知道功能與業務的關系 —— 功能背后的需求。
在分析背后的需求時，除了知道這一需求是什么，如果可以多走一步，對需求進行分類，那對于我們了解產品時大有裨益的。
關于需求的分級，在 C 端中常用的模型是馬斯洛需求模型，但是這一理論并不適用于 B 端，主要是由于以下原因：
一般而言，我們可以將需求劃分為功能性需求與非功能性需求。非功能性需求，指的是隱藏在功能需求背后以及開發需要考慮的的需求，也叫作“跨功能需求”。最常見的非功能性需求就是產品的響應時間，一般非功能性需求是由開發和測試同學考慮的。
而對于功能性需求，有三大類：業務需求、功能需求、產品需求。而這三類需求也有比較立體的層次關系：
業務需求，提出者是業務范圍、業務模式和業務規則的制定者，一般是指業務方的高層人物，比如 CEO、高級經理等。產品設計是服務于業務定位的，進而使得產品戰略遵循于企業的發展戰略，只有這樣產品方向才不至于發生偏差，因此，他們提出的需求一般不能違反，換句話說，他們提出的需求是整個系統設計的最高綱領。
用戶需求，提出者是基層管理者和執行者。他們關心的是如何使用產品完成自己的工作，提出的需求相對細節，例如對操作、流程上的訴求。
產品需求，由于 B 端產品的復雜性，在建設時需要考慮到功能復用問題，以及與其他系統的架構交互問題。舉個例子，語雀 App 是阿里旗下的產品，在開發登錄界面時，沒有重新開發，而是集成了阿里云的 SDK。產品需求本身對業務實現沒有價值，它的價值體現在節省人力和優化軟件架構上。
三者雖然并沒有絕對意義上的優先級順序，但是一般而言，B 端產品時優先考慮業務需求，其次關注用戶體驗，滿足用戶需求，最后才是考慮產品需求。了解了這一點，我們對功能背后的需求進行分類后，就可以從更高的視角來分析功能的設計邏輯，而不僅僅是停留在好不好看的層次上對功能進行分析。
在《交互設計原理》中是指：對于交互式數字產品、環境、系統和服務的設計，定義人造物的行為方式，即人工制品在特定場景下的反應。
在《交互設計精髓4》定義為：設計交互式數字產品、環境、系統和服務的設計，聚焦于如何設計行為。
而在《超越人機交互》中則是指：設計交互式產品來支持人們在日常工作生活中交流和交互的方式，創造用戶體驗以增強人們工作、生活以及通信的方式，聚焦在實踐上，即怎樣設計用戶體驗。
交互設計即行為設計，關注于如何設計系統如何幫助用戶更高效愉快地達成目標。
僅僅知道是什么遠遠不夠，我們更要知道如何去分析一個產品的交互設計好壞。在這里，我提供兩個思路供大家參考：
上文提到，交互設計的對象是行為，而這里的「行為」可以拆分為 3 個部分：導航，輸入和展示。
設計要點：
例如：掘金的頂部導航，既體現出來了導航本身與包含內容的關系（導航的標簽是當前內容的概括），又體現出來了內容與當前頁面的關系（當前頁面是首頁下的一個子頁面）。
這里的輸入不僅僅指我們日常中的輸入，而是一個廣義的概念，將所有用戶向系統提供信息的方式統稱為輸入。輸入可以通過多種方式完成，包括輸入命令、按下按鈕、快捷鍵、甚至打手勢、語音等方式。
設計要點：
設計要點：
尼爾森十大原則由畢業于哥本哈根的人機交互學博士 Jakob Nielsen 發表，他提出十大可用性原則，用來評價用戶體驗的好壞，我們也可以以此為依據來分析一個產品的交互設計好壞。具體的內容網上有很多資料，筆者就不再贅述。
視覺設計即 UI 設計，負責產品的圖形、圖標、色彩、視覺風格等，從視覺層面把控產品界面設計，決定營造出什么樣的視覺體驗。
視覺設計的分析內容可以拆分為形、色、字、構、質、動。在分析時，如果是網頁端，可以借助瀏覽器的開發者模式或者谷歌瀏覽器的插件「VisBug」來詳細查看各個維度屬性細節。
圖標的圓角，卡片的圓角，icon 的風格與統一度（包括：視覺大小，線段粗細，端點類型、拐點類型等）
例如，同樣是頭像卡片，QQ采用了圓形來體現靈動輕盈的風格，而主打熟人社交的微信則采用了小圓角。
色彩分析包括用色規范、色彩搭配、層級等。在 B 端產品中，色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。
字體的屬性有字號、行高、字體、字重等。通過合適字號和字重可以對界面元素劃分視覺層級，幫助用戶識別。而在一些特殊的場景下，可以運用特殊字體來提高識別度和增加頁面美觀度。
例如：支付寶使用了常用的 Din pro 作為其數字字體，其他 APP 廠商也分別使用了特殊的數字字體。
此處的構是指頁面結構，分為層級和間距兩大部分。合適的層級和間距可以幫助用戶理解頁面，并給予界面呼吸感和通透感。
質感與風格、界面風格，投影數值，扁平還是擬物。
比如說相比普通的單層陰影， Ant Design 采用了三層陰影的表達方式，讓陰影更柔和，更符合真實狀態。具體可查看 https://ant.design/docs/spec/shadow-cn
最近幾年，越來越多的公司和團隊已經意識到動效在產品用戶體驗中的重要性，動效設計已經成為產品設計語言的重要構成之一。
動效設計并不只是為了修飾，使用動效不僅可以更清晰地體現內容元素之間的邏輯和層級關系，還可以提供當前的狀態反饋，加強用戶對操作行為的感知，給用戶以可控的感覺。
除了上述內容之外，我們在分析一個產品時還可以做以下兩件事：
在被問到「你覺得這款產品的用戶體驗好嗎？」時，我想大部分設計師同學即使做完了產品分析，也很難回答這個問題。那么，我們該如何做才可以較為準確地回答這一問題呢？
基于這個問題，我們從用戶體驗的定義出發，ISO 對用戶體驗的定義有著如下解釋：
用戶體驗，即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。
從定義可以看出，用戶體驗不僅是主觀的，而且范疇非常廣，所以在描述時，我們不能僅僅用好/不好來概括。要解決這個問題，要點在于建立一個清晰合適的標準來量化用戶體驗，體驗自查就是在做這樣一件事 —— 度量體驗。
通過做體驗自查，可以達成以下效果：
本質上，設計走查表通常是設計師在完成設計稿后，用于快速遍歷方案、修正遺漏或不周的工具。在產品分析中，我們使用這個工具也可以達成體驗自查的目標。通常，我們是需要根據產品建立一套適合自己的交互設計自查表的。如果暫時沒有，也可以暫時使用網上成熟的自查表來進行。
問題位置：
即體驗問題發生的位置。
類別：
不同自查表對問題的分類不同，例如用戶體驗五要素、可用性原則等。
重要程度：
如果采用正向思考，很容易陷入“都很重要”的困境，所以這里一般采用反向分析法，也就是如果不解決這個體驗問題，會造成多大的影響。我這里將重要程度分成了三個等級，分別是：
發生頻率：
同樣是三個等級，需要注意的是，這里不是以時間頻率來定義的，而是以「每經歷 n 次業務節點就會出現這一問題」的方式來定義的，如果不好量化，也可以使用每次，經常，偶爾這樣的詞來代替。
嚴重程度：
嚴重程度 = 重要程度 * 發生頻率
這里要注意的是，我們作為設計師，提出嚴重程度的判斷僅僅是作為優先級參考，但是真正的優先級和排期還是需要產品經理來做。
問題描述：
即對體驗問題的詳細描述。
首先，對問題進行重新審查和校驗，去掉非體驗問題、重復問題、補充不完整的問題描述等，然后整理到一起，這就是整個產品存在的大大小小、各種各樣的問題了。
然后，我們通過圖表對數據進行二次加工，一般采用雷達圖或柱狀圖。
示例 - 雷達圖的使用方式
嚴格意義上說，這并不是標準的雷達圖，只是使用了雷達圖的圖表背景。
外圈：上述表格中的「分類」
數值：上述表格中的「重要程度」
為每個模塊/流程各制作一張表，然后將每個問題都以點的形式置于圖中，哪個分類問題最多，哪個模塊/流程問題最多？哪些問題較為嚴重亟待解決？一目了然。
設計的本質是為了更好的解決問題，了解業務是解決問題的基礎，也是溝通順暢的利器。但是想要成為一個業務專家，沒有長時間的沉淀上是不太可能的，但是公司一般不會給很長的時間去學習業務，那我們該如何在短期內快速掌握業務知識呢？
在理解業務時遇到的最大挑戰就是那些晦澀難懂的特殊名詞，如 json 文件，API 等開發中特定的術語。
針對這個問題，在產品分析的過程中，我們可以同步建立一個專業名詞庫，來記錄這些特殊名詞，并將這些概念用自己的語言進行描述。這樣，在了解產品的同時也對業務有了一定程度的了解。
對設計師而言，相比 C 端的各種炫酷效果，B 端設計很難做的出彩，設計的價值更多是隱形的價值，基本不存在會有人因為你把一個按鈕做得好看夸你。從這個角度來說，確實成就感比較低。
但是，通過自己的設計讓幫助用戶更有效率地完成工作，這何嘗不會帶來滿滿的成就感？B 端產品一般是用戶不得不使用的產品，作為設計師的我們更應該對自己所設計的產品有著敬畏之心。
最后，給大家分享我很喜歡的一段話，與大家共勉。
本次的分享到這里就結束了，希望可以對大家有幫助。由于文章字數較多，筆者幾經修改，仍不免有疏漏錯誤之處，如發現錯誤，請讀者于評論區或私信指出，不勝感激。
在快節奏的洪流中，保持設計的初心，做有靈魂的設計，我們下篇再見~
作者：靳凱杰ah
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
刷刷手機看看今天又發生了什么熱點大事，已經成為現代人茶余飯后消遣時間的主要方式，而搜索熱點區別于其他社區類產品，最大的優勢是能夠把大家關注的事件始末及相關知識服務快速聚合起來，幫助用戶更全面的掌握信息。設計師作為連接用戶與信息之間的紐帶，在項目實踐中也進行了系列的設計探索，除助力平臺高效聚合呈現信息外，并以更豐富的設計層次詮釋熱點，幫助用戶更便捷的獲取所需。
我們先要去了解用戶是如何消費熱點內容的，基于用戶情景認知鏈路分析用戶在事件消費的鏈路，可以分為三個重要節點：1.熱點環境的感知；2.熱點事件的理解；3.事件觀點的產生。
結合用戶的消費路徑，我們將設計邏輯框架拆分為三個層級：
1.氛圍背景層：分層呈現熱度氛圍，輔助用戶感知熱點環境；
2.信息內容層：精細化拼裝管理，幫助用戶理解熱點事件；
3.功能互動層：輕互動玩法設計，激發用戶參與抒發事件觀點。
從氛圍表現層面，助力用戶更快速的辨別事件的熱度及重要程度。設計師結合搜索熱點使用場景以及業務時效性配置訴求，歸類了兩種設計表現層次：1.日常熱度氛圍 2. 大事件熱度氛圍
1）第一個層次：日常熱度氛圍
主要應用于熱點新聞場景，時效性要求高，同時事件熱度也會在：“發酵--爆發--消退” 間實時變化，設計根據熱度“強弱”程度需求，劃分兩檔視覺展現階梯，以自動化的方式展現，滿足熱度的實時變化需求，輔助用戶感知當前事件熱度?！暗蜔岱諊比鯓撕炘O計用以展現上升/今日熱點，“高熱氛圍”色彩背景通頂效果+上榜標簽用以展現上榜熱點。
如，“馬斯克收購推特”，搜索熱度持續上升，以第一階梯-標簽方式展示低熱氛圍；在 “馬斯克收購推特” 的事件熱度不斷增長，成為熱榜事件后，以第二階梯 - 高熱氛圍自動匹配 ，通過背景及榜單標簽的呈現，明確告知用戶當前事件的火熱程度。
2）第二個層次：大事件熱度氛圍
主要應用于熱點大事件或運營活動場景，個性化展現要求高，同時事件關注度及重要程度也不同，設計根據事件的關注度及重要程度劃分為兩檔階梯，以人工配置的方式展現，超強的運營氛圍，可以讓用戶充分感知當前事件的重要程度，“A級氛圍”頭部疊加場景元素設計用以展現大事件，“S級氛圍”整頁沉浸式視覺設計用以展現重大事件。
如，冬奧會，重大事件，選用第二階梯 S級氛圍，打造超強的運營大事件會場認知。
近幾年我們不斷的經歷各類突發大事件，如：疫情/暴雨/名人逝世等等，每次突然發生的事件都讓設計師措手不及，匆忙產出運營氛圍設計方案緊急上線，保時效就很難保障質量，因此我們在想能不能總結事件類型提前儲備設計，以備不時之需。
不同突發事件會牽動網友不同的情感情緒，比如河南暴雨，我們為受難同胞擔心，為救助工作加油，為逝者哀悼；火箭發射成功，我們驕傲喝彩；名人結婚，我們送上溫馨的祝福。不同事件帶來不同的情感情緒，也要求設計師要用準確的視覺語言表達。
因此我們在前置設計時也充分考慮了事件情感因素，通過對近一年突發大事件的歸類梳理，并推導不同細分場景下的用戶情緒，通過情緒分類的方式，總結兩種視覺設計表達形式：1.實景圖合成效果滿足嚴肅/莊重/權威場景情感需求；2.手繪效果滿足積極/歡快/慶祝場景的情感需求。結合以上思路我們共儲備6大類20個子分類場景的前置氛圍+金剛位等運營物料設計，保障突發熱點運營設計質效。
截至22年Q1，前置設計已在38個熱點場景應用：
為滿足用戶不同事件場景下的信息需求，設計結合百度搜索：主要內容區（主要需求滿足）+ 延展內容區（延展需求滿足）的綜合聚合能力，通過組件分區布局+精細化規則管理，為熱點場景內容的高效拼裝打好體驗基礎。
1）主要內容區
主要內容區，能夠幫助用戶快速了解事件的主題、時間及主要內容，結合熱點事件長期的需求沉淀，設計將主要內容區又細分為主題區域及內容區域。主題區域可承載拼裝事件主題、事件倒計時、會場分發導航等主題類組件；內容區域可承載拼裝圖文/視頻/直播等事件主體內容分發組件。通過不同區域內組件拼裝規則的制定，業務可以快速選擇所需組件進行頁面組織拼裝，達成分場景個性化滿足用戶主需求的目標。
如：元宵晚會，熱點主要內容區 以“ 晚會直播時間倒計時+ 各衛視晚會分會場導航+圖文內容 ” 組件支撐起重大晚會預熱期的事件主需求滿足。
因為有設計拼裝規則，不同大事件活動，各場景內容可個性化滿足需求，交互布局設計上又可兼顧橫向一致性。
2）延展內容區
延展內容區，能夠幫助用戶了解事件相關知識信息或提供事件相關服務。業務可根據事件場景需求，選擇多個延展內容模板與主要內容區進行拼裝，搭建完整頁面以呈現不同熱點事件內容。
如：俄烏戰爭-戰事場景，脈絡卡幫助用戶快速了解事件進展 ；冬奧會-賽事場景，數據卡幫助可視化呈現賽事進展；博鰲亞洲論壇-會議場景，百科卡幫助用戶科普相關名詞知識。
通過氛圍打造和內容組織，已經達成用戶需求滿足的目標，但到此截止，搜索結果的體驗還是理智疏遠單向的，搜索場景與用戶、用戶與用戶間也無法產生對當前熱點的討論與態度表達。因此設計師對用戶的互動行為認知習慣進行分析，并采取具體的設計策略逐步引導用戶參與互動。
1）互動喚醒 - 吸引圍觀增強互動意愿
優化前的熱搜結果頁，用戶的討論內容都是隱藏在資訊落地頁評論區內，需要點擊進內容落地頁內才能參與“圍觀”或“討論”，除互動氛圍已脫離當前場景外，也削弱了用戶對此事件表態的參與積極性。
通過彈幕滾動+輸入框組件組合外顯的交互設計方式，將用戶討論外露，不僅豐富熱點事件搜索場景的內容維度，同時基于從眾心理，進一步刺激用戶的參與欲望。彈幕結合事件類型配色來更好貼合熱點事件整體環境氛圍。
2）情緒抒發-輕互動玩法降低互動門檻
而投票表態+彈幕輕互動組合效果設計，能進一步降低用戶交互心理門檻，讓用戶動一動手指就可以參與其中。在表態/投票抒發情感的同時也可以發彈幕聊聊對當前熱點事件的看法，使用戶互動情緒表達更充分。
3）驚喜反饋-強化視效打造記憶點
原有設計風格，無法在去世祭奠、頒發勛章等莊重嚴肅場景精準的表達視覺情感，無互動反饋狀態僅有互動前后狀態變化。
結合熱點場景積極外放情緒及莊重內斂情緒，視覺主要從形/質兩個維度進行優化升級，并增加互動反饋動效，同時運營可結合具體事件主題配置，綜合提升互動驚喜效果，打造產品記憶點。
視覺層：通過更立體的形態和更豐富的層次質感，更精準的表達情感
動效反饋層：以主圖形+輔助元素，通過符合場景氛圍的動態效果設計，更充分的表達情感
運營主題配置：在日常反饋基礎上，增加運營主題配置層級，為特定主題場景提供定制反饋效果
通過熱點環境感知分層呈現、內容組件合理布局拼裝滿足等設計手段，助力搜索平臺以更高效豐富的內容展現形態應對全年3萬+熱點大事件運營。會場拼裝呈現系統的應用場景也在不斷擴展，如營銷活動、品牌造節等。設計不會止步于此，我們將基于用戶需求不斷探索深耕，為用戶呈現更快速、準確、全面、有溫度的搜索熱點體驗。
作者：百度MEUX
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
2022 年即將過半，疫情在家的我們重新花一些時間，回顧今年最引為人注目的一些設計趨勢，有些已經變成現實，有些可能即將會發生。在過去的這十幾年里，全國的互聯網和移動互聯網行業蓬勃發展，引發了 UX / UI 行業的火爆，無論是在設計技術方面還是在設計實踐方面維持著快速發展狀態。設計探索受到了前所未有的關注。創新也永不停止，正在向各個方向延伸——有的是曇花一現，有的是重塑想象，有的卻循環往復。
下面我們將更詳細地向你探討一些 2022 年的設計趨勢。
The Badass Project 搗蛋派計劃
過去幾年里，大字排版的趨勢越來越明顯，字體尺寸也在增加！接下來，字體更大且幾乎沒有圖像的時尚 英雄形象 網頁設計，將成為主流風格。
（英雄形象在網頁設計中是一個特定的網頁橫幅，通常是一個包含與內容相關的大圖像頁眉）
設計師和用戶都越來越習慣在登陸頁面前面和中心位置使用超大文字。無論是怪誕的無襯線字體還是現代奢華的襯線字體——這一趨勢就是在于越大越好。通過精心選擇的字體，網站可以做出比以往更大膽的宣傳，以吸引受眾的注意力并有效地信息傳達。
這些字體選擇通過 引人注目的動畫進一步生動起來。設計師正在實現通過鼠標移動或向下滾動頁面使排版移動并與用戶產生互動的創造性效果。以粗體、動畫和交互式排版為核心，許多網站也就不使用任何背景圖像，讓外觀變得干凈且精致。
MAFF
所以一定要試試這種趨勢：把文本尺寸放大，可以將其放置在一些圖像上，制作大尺寸的動態標題，讓用戶從中獲得樂趣。最重要的是，要勇于呈現大膽強烈視覺效果，從而可以立即吸引用戶的注意力。
案例：Medium 官網——https://medium.com/
Shakib - Sneakerbumb
在經歷了充滿不確定性和陰郁的兩年，我們學會了尋找和珍惜任何享受幸福的機會。我們大量獨處時光的花在了數字空間上，這一現象也不例外。
La puce à l’oreille
為了回應這一需求，設計師從 80 年代和 90 年代獲得了巨大的靈感；將色彩豐富、質感豐富、復古風格的主題與現代氣息結合起來，打造真實的外觀。鮮艷的色彩搭配柔和蠟筆肌理、古怪的排版、紋理豐富的背景、跨頁面網格的布局、非傳統的圖像和古怪的插圖，都可能會在接下來的一年吸引你的注意力。
Kristen Ryan for MakeReign
隨著這一切的發生，我們甚至可以說，在過去幾年里，每個人都學會了賦予自己一些自由的生活態度。這為我們提供了更多的實驗空間，當然也為設計和其他領域帶來了讓人愉快的成果。這就是說，設計師們覺得有必要從簡單和實用的用戶體驗轉向有趣、搞笑甚至愚蠢的交互。出人意料的是，讓別人微笑可能會是你的網站或 app 令人印象深刻的一種方式。
Blumenkopf
野獸派設計從 1950 年代的野獸派建筑運動中汲取靈感，延用其不修邊幅、毛糙粗狂的外觀形式，和故意做出的丑陋效果。就像在建筑中一樣，野蠻主義在網站中揭露和解構(甚至慶祝)這種媒介的底層結構和重要原則。原始、大膽和反動的本性使野獸派設計一直處于數字空間的邊緣，因為原始是互聯網的全部。然而，近年來，野獸派一直在緩慢而穩定地復蘇，現在被一些人稱為新野獸派。
Caroselling
隨著互聯網上干凈、傳統的網站越來越多，個人網站變得難以脫穎而出。轉向野獸派，提供真誠、原始但獨特的視覺體驗，可能正是提升你下一個網站的方式。
無網格布局，強烈的調色板，重疊的元素，擁擠和幾乎混亂的設計只是你的野獸主義工具包的一部分。將它們與等寬和奇怪大小的排版結合起來，缺乏或極少的導航，這相當于沒有額外的“空間”或子頁面的“開放式版面”，你會得到一個引人注目的粗野派外觀。
Work with us
案例：阿里云設計官網——Alibaba Cloud Design - Not Design Just Future
當然，還有更多，但野獸派網頁設計的定義規則是沒有規則；它反對既定的規則和慣例。更重要的是，你需要用更強烈的意義價值和意圖來將你的野獸派杰作與另一個設計糟糕的網站區分開來。
Messenger
Figma、Todoist、Slack和 Messenger 等網站和移動應用程序都把時間和精力集中在桌面客戶端版本。
Todoist
越來越多的應用程序似乎也在效仿，因為研究表明，這樣用戶會感到 更舒適、更安全。用戶希望自己的應用程序遠離互聯網瀏覽器，遠離所有打開的標簽，回到指定的應用程序窗口，讓人感覺更寬敞、更專注。在使用這些應用程序時，不需要處理數分散注意力的標簽，這無疑是一種進步！此外，將通知直接發送到桌面，我們的通知管理也必然得到改善。
Figma
為阿拉伯語國家的谷歌搜索頁面布局
用戶研究團隊利用 人類心理學 領域的洞察，以及 可用性測試，已經能夠塑造界面，為用戶提供最大的滿意度和愉快的體驗感受。幾十年來，這一直是用戶體驗設計的核心。
隨著技術的快速進步，我們看到數字產品體驗的保真度有了空前的提高。這一發展也為不同用戶群體之間的細微差異提供了新的理解。年齡、文化、地理位置、日常習慣、社會結構（以及其他因素）的差異可能會導致人們對什么構成令人滿意用戶體驗的期望存在顯著的差異。因此，這些體驗可能需要類似的設計，但肯定不是相同的設計方法。
隨著技術和研究方法的到位，我們開始看到一款產品的多種變體同時推出，以滿足不同用戶的需求。隨著許多大品牌都在努力擴大他們的用戶群體，創造本地化的產品體驗可能會成為一種大趨勢——如果不是標準的話。
NhuSW- Everyfit — Fitness for Everyone
包容性不僅是一種趨勢，也是一種運作模式；人類生存和共存是一個不可否認的重要方面。在日益全球化的復雜世界中，我們不斷意識到自己與其他個人或社群之間的差異。以同理心駕馭這些差異是我們的責任，并努力將所有文化、性別、性別、種族、能力和殘疾都有意義地適當地納入全球社會。
Spotify
隨著數字空間引領著世界的全球化，它也毫無疑問地成為我們包容性努力的前沿。人們總是希望品牌和公司采用更具 包容性的敘述 和語言，并向包容性的平臺、產品和服務 邁進。他們被鼓勵在圖像、語言和視覺語言中推動多樣化的表現，這樣做不僅僅是為了營銷收益，而是為了更大的意義和價值。
這些是我們在 2022 年會看到的趨勢和現象。記住，它們是為了提醒我們當前的總體設計趨勢。可以使用它們來支持和授權您的設計決策，但不要害怕挑戰它們，或用它們為人們創造更多積極有效的體驗。
原文標題：UI/UX Design Trends of 2022
文章來源：Codeart
原創作者：Taras Bakusevych & Maja Mitrovikj
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文主要介紹等距柵格，旨在為有需要的同學解析柵格，從概念、結構和設計上更有效、自信地解決柵格問題，其實主要還是自己對柵格體系的查缺補漏。大家可以對照目錄跳著閱讀。
事實上，絕大多數的設計師都知道柵格很重要，簡單點就是等分運用在內容層。當我們仔細研究柵格相關原理時，只要不嫌麻煩，就會發現在柵格系統下能更快解決設計問題，并讓設計更具功能性、邏輯性和視覺美感。
柵格與網格的本質其實是相同的，實現有組織的設計最簡單方法之一就是應用網格系統，約束性地為你提供了一個非常基本的設計框架，這是一種久經考驗的技術，最初運用在印刷版式中。網格與柵格英文都以“Grid”來表示。但一般我們更愿意在平面設計中更多的稱為 “網格”，會存在上下或傾斜，在網頁端或移動端中更多的稱為為“柵格”。
常見網格系統有三種：直接分割，等距分割，數學分割。本文主要介紹等距柵格，網頁中的網格是指使用垂直和水平(較少)等距輔助線對布局進行的劃分，它形成了用戶界面的基本結構或框架。
平面設計一般用到的是固定的紙張規格，寬度和高度都是固定的，網格會存在上下或傾斜的視圖；在界面中柵格寬度跟隨不同設備，高度由內容多少來決定，是上下視圖。
界面柵格系統是從平面網格系統中發展而來，以依據一定的規律、合理設置基準線來指導和規范界面中的如文本、圖像、按鈕和其他元素，保證頁面的每個區域能夠穩健地排布起來。柵格系統的使用，讓界面信息呈現更美觀易讀、更具可用性，對于前端來說，網頁也將更加靈活與規范。
將柵格視為一種秩序系統來進行使用，是設計師某種特定的精神和態度的表達，它體現了設計師是以一種結構性、預見性的方式來進行構思和設計。同時，這也是一種職業信仰的體現，設計作品應該是易懂的、客觀的、功能性的和具有數學邏輯美感的。
用結構化、系統化的柵格手段進行設計，對設計是具有極為重要的意義的。使用柵格系統就意味著設計遵循普遍與合理。系統化和清晰化、集中精力看透關鍵問題、用客觀取代主觀、理性地去看待設計過程。
產品設計中，參與設計的人員越多，用戶設備越多，屏幕越多，設計師就越需創建一套柵格系統來組織內容，使設計內容與細節能適應更多場景。合理的柵格系統可以通過調整布局滿足產品各設備尺寸的需求。
有序可依，提升協同效率
對于設計師與團隊：柵格系統定義了一套底層的、統一的測量單位，當設計團隊內對此達成共識時，可以避免因屏幕適配、比例換算產生的像素偏移，適配多種屏幕，提升精致細膩程度，同時保證了設計稿件中元素屬性的一致性和規范化，并有效降低設計師的決策成本，提高不同設計師之間的協同效率。同時避免了設計師與前端工程師在細節上的反復溝通確認，提升了整個開發效率。
布局規律，減少認知成本
對于用戶：運用網格系統能夠讓設計更有秩序和節奏感，規避了不同設計師理解不同造成產出差異的問題，如頁面節奏，空白等。在保持與原先展示內容基本一致的情況下，頁面信息結構更加清晰，提高閱讀效率，減少認知成本，提供一致性體驗。
柵格使用列在水平方向上拆分頁面，以有組織的方式對元素進行布局，并模塊化設計多個頁面和組件。同時柵格還定義了一組固定的測量單位，指示每個設計元素遵守的尺寸，間距和對齊方式。
最小單元
網格的基本構成就是單元格，由格子組成網。間距都可以用最小單元來增加或者減小，最小單元格是所有設計元素（從排版到列，框，圖標和插圖）的幾何基礎，它為所有創造性的決策提供了結構和指導。所以柵格系統的重要一步就是需要先定義好柵格的原子單元大小，我們以最小單元去定義網格系統。
最小單位推薦 8px
目前 web 端最普適易用最小單位的是 8px，我們利用 8px 建立網格，8 的倍數組成了列、行、框的尺寸以及它們的邊距和填充，使用 8 的倍數來定義模塊的間距與元素的尺寸。
當我們熟悉最小的柵格單位 8px 以后，能有力的減少決策時間。整個設計的元素大小，尤其是間距可以快捷的在腦海中反應出來，8、16、24、32、40、48、56、64、72、80、88、96、192 等，這里都是 8 的倍數或能被 8 整除。讓設計師帶著工程實現的思維去考慮頁面布局，設計側和工程側對頁面一致性的解讀，能夠有效降低設計到實現的轉化成本，提高開發效率。也要注意間距不能無腦套 8 的倍數，優先用 8，當跨度太大也可以使用 4 和 12。
那為什么不選擇 4，6 或 10？
注意的是最小單位應由實際工作來決定，沒有絕對的最小單位數值。在適用性方面，4、6、8、10 這四個數值都基本可以滿足。
當使用 4px 時，頁面就會被分割的非常細碎，當 8 不夠用的時候，就要使用 4 了。
最小單元格的數值選擇需要從兩方面考慮：
屏幕尺寸和分辨率種類有增無減。使得設計師對 “維護適配性” 的難度越來越大，設計稿導出會有@0.5、@0.75、@1、@1.5、@2、@3 倍多種需求，在 1@倍設計稿，奇數（比如 5px）就會出現半像素偏移。而 6 除以 2 得 3，3 就是奇數了，10 除以 2 的 5，6 和 10 不能被 2 除盡。
使用偶數 8px 可以輕松一致地縮放各種倍數而不失真，大多數流行的屏幕尺寸都可以被 8 整除，足夠普適，以 8px 為增量進行縮放可提供大量選項，所以推薦 8px。
列 + 列間距 + 大邊距
柵格系統由 3 個部分組成：列、列間距、左右大邊距。柵格系統是由列和列間距交替分布形成的，列是柵格的數量單位，虛擬的垂直塊，用于對齊內容，我們以百分比或固定值定義列寬。豎直方向根據頁面內容是可以無限延伸，所以柵格系統在豎直方向的柵格可以不體現出來，設計時只要在水平方向保持規律變化就可以了。
通常設定柵格數量說的就是列的數量，如 12 柵格就有 12 列、24 柵格就有 24 個列。列間距把控頁面留白，數值越大，頁面留白越多，視覺效果越松散；反之，頁面越緊湊，畫片分割的越碎。
大邊距就是設計內容區以外的空間。我們在設計中一般將大邊距寬度定義為固定值，該值決定每個設計的最小呼吸空間，靈活的邊距占據了由列，列間距組成的網格后的剩余空間。左右大邊距是計算在柵格的總寬之內的，刪格系統的寬度就是列、列邊距、大邊距之和。
也有彈性大邊距，會根據不同的屏幕尺寸而變化，就是頁面邊距可以隨著屏幕尺寸的變化而變化。頁面邊距在移動設備上通常是 12px 到 40px 之間，在平板設備和桌面設備頁面邊距變化就相對多了。
容器
我們按照頁面結構從組件 – 容器 – 區塊 – 頁面 – 場景進行依次拼裝成最終形成產品設計方案。容器集合了下級組件，也可以是多個復雜元素的集合，文字、圖片、按鈕。如登錄區塊是由多個標簽、輸入框、按鈕組成。容器是成組的設計元素，形成了獨立的內容或功能盒子。區塊嵌套容器，由區塊組成了頁面內容。
柵格規范的是容器間比例，而非具體寬度。容器大小收到柵格系統的限制，柵格系統可以根據需求被 2 等分、3 等分、4 等分、6 等分、12 等分，具體采用哪種比例的組合需要根據需求來定。柵格系統 / 設備分辨率大小在變換的同時會帶動區塊大小的變化，從而使容器發生變化，如元素尺寸變化，文字換行等。
如下圖，共有 32 個容器。對于緊密相關的內容，請考慮組成區塊。頁面被分割的越碎時，設計中越難把控。
960 柵格系統
這是一個比較單純的框架。從 1990 年代后期開始就基于表格的布局開始使用的柵格系統 960 Grid System。與早期計算機相比，雖然今天的屏幕分辨率達到了很高的尺寸，但使用 960 像素的寬度依舊可以確保在許多屏幕上能夠正確顯示。
960 Grid System，是由 Nathan Smith 開發的 CSS 框架，因為早期的電腦熒幕寬度約為 1024，扣除瀏覽器的卷軸及邊框，為 960px，960 Grid System 有 12 欄位、16 欄位版本，960 正是意味著，12 能被 3、4、6 整除，能建立 3 欄、4 欄、6 欄的版面配置，網頁的使用也比較靈活。網頁版面可以輕松配置，合并，也不會有畸零數，非常適合排版。
960 Grid System 是使用固定寬度 960px，置中對齊畫面的方式呈現在網頁上，去除左右兩邊各 10px 的邊距空間，留下中間 940 px 的設計內容區，以 20px 作為槽。
而超出 960 的部分的設計元素，就使用定寬設計。
Bootstrap 網頁框架
今天市面上看見的響應式網站，多數使用了一些開源的代碼或者框架。而應用最廣泛的，就數 Bootstrap 了。
Bootstrap 是 Twitter 推出的一套強大網頁框架，是全球最受歡迎的前端開源工具庫，它支持 Sass 變量和 mixin、響應式柵格系統、自帶大量組件和眾多強大的 JavaScript 插件，也提供了快速建立響應式網頁的功能。已經更新到 V5.0.1 版本了 Bootstrap 中的柵格系統是一套響應式、移動設備優先的瀑布流式柵格系統。市面上很多前端框架會對 Bootstrap 進行補充或基于 Bootstrap 開發。
Bootstrap 提供的柵格系統，也是一樣將內容區分 12 等分。
它將系統分為 12 列，當然也可以通過變量來改變列數和列寬，水槽寬度，屏幕浮動寬度；其實設置屏幕浮動寬度就是我們看到的屏幕自適應，就是根據屏幕寬度來選擇顯示參數。Bootstrap 中的柵格流只能作為大的布局定義，那么針對最小單位是該用 8、10、15 還是多少也是需要根據需求去做分析。
12 列結構可以進一步分解 4 等分，3 等分大小的模塊。
柵格設計的第一步就是創建畫布，對于不同設計的項目，寬度設定是不同的。需要注意第一屏重點內容全部顯示，瀏覽器和 Windows 底欄都會占用屏幕的高度空間，第一屏縮減默認高度 -100px (可調整)。
屏幕寬度
設計師有存在從最大的屏幕 1920 著手設計界面的習慣，最后考慮最小的屏幕上的顯示效果。這意味著絕大多數的設計都是從大尺寸開始設計的，通常大尺寸的內容和功能更全面。從小往大適配容易，但是從大往小適配問題就特別多。以 1920px 寬設計的界面在面向小尺寸屏幕的時候多數都很不友好，甚至到了部分頁面無法正常預覽和使用的地步。所以優先設計最小適配屏幕，然后給出適配方案進行調試。
C 端設計的屏幕寬度是找全網平均數值，而 B 端的目標受眾更細分、更具體。類似政府、學校、企業等等，計算機都是統一購買的，這種情況并不需要你去統計全網和其它渠道數據，只要了解具體受眾使用什么分辨率即可，以它作為主要輸出的畫布寬度。如果 B 端設計受眾屏幕寬度實在不清楚，可以參考螞蟻中臺設計團隊統一的畫板尺寸為 1440。
是否定寬(版心)
如果是定寬的設計，便不需要考慮自適應與響應式適配屏幕寬度。版心是源用平面上的說法。根據實際情況，定寬設計如果以 1024 的屏幕為內容主體，1366、1440、1536、1600、1920 的屏幕適配 1024 的內容主體，多余的空間為左右大邊距，這種方式設計上容易輸出，適配方式更加高效，隨之就是可用性較低，對于使用高分辨的用戶來說，布局會留下很大的空白。如知乎：
還記得第一次做網頁練習的時候我使用的定寬為 1000px。
屏幕終端的寬度不等于我們要柵格的寬度。我們在確定柵格區域設計前，先來熟悉一下 web 產品界面的基礎模塊和分層邏輯，以常見的 B 端布局為例。
根據模塊自身屬性及功能定義，常見的模塊有九類，分別為頂部導航模塊、左側導航模塊、頁眉模塊、頁腳模塊、主內容模塊、左內容模塊、右內容模塊、抽屜模塊、彈窗模塊。
全局控制層為常置的功能底層，是提供穩定性和可預測性、必不可少的層級，具體有頂部導航模塊、左側導航模塊等；內容層可分為常置展示層，具體有主內容模塊、左右內容模塊或上下模塊等；臨時層為動態出現的功能頂層，始終疊加在基礎層及內容層上方，是鏈接上下體驗流程的模塊，具體有抽屜模塊、彈窗浮層模塊。
梳理了相關模塊所組合的柵格布局。Web 端有三種基礎布局和多種擴展布局。一般來說，柵格區域就是指內容層。前面我們提到了定寬(版心)，版心和內容層還是有差別的，版心+兩端頁邊距=內容區。
那其他模塊能用柵格嗎？當然可以，有需要就用，不過需要注意使用效率。
首先，創建一個低保真或高保真的原型，設計一些基本元素和交互流程之后，考慮最優的列數。列間距的區域不可以放置內容，我們一般會給列間距設定一個定值來確定列寬大小，這個列間距也是模塊間的間距。
柵格數量
常見的柵格系統通常被劃分為 12 柵格或 24 柵格。劃分的格子越多，承載的內容越精細。也有較少項目會根據實際情況也會劃分成 16 柵格、20 柵格，移動設備屏幕尺寸小于 PC 屏幕，想要有更靈活發揮空間，就必須采用列寬較小的柵格。
12 柵格
12 柵格系統在流行的前端開發開源工具庫 Bootstrap 與 Foundation 中廣泛使用，一些商業網站、門戶網站通常劃分成 12 柵格，適用于業務信息分組較少，單個容器內信息體積較大的中后臺頁面設計。根據業務場景可以很容易的將 12 柵格區域劃分成 2 等分、3 等分、4 等分、6 等分，以及根據等分容器組合的多種不等分場景，組合也是柵格作為一個界面輔助系統非常方便的原因。
24 柵格
24 柵格系統適用于業務信息量大、信息分組較多、單個容器內信息體積較小，場景復雜的頁面設計。相對 12 柵格系統，24 柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。我們常見的 B 端 web 設計一般選用 24 柵格，柵格系統大小就是 24 列+23 列間距+2 大邊距。
Ant 采用了 24 列、23 列間隔的柵格系統。其中間隔數值是固定的，內容區域減去 23 列間隔后，剩下的部分等分成 24 列。
注意：
其內容模塊必須位于若干列上，可以任意分割，比如 6×2，3×4，4×3，下面是不同分割方式設計的信息模塊。
只要父級模塊對齊柵格，子級元素可以不對齊列，同時子模塊也可以有自己的柵格系統。
列寬無法永遠精準整除，而相差的像素值往往是無法被用戶以肉眼察覺的，柵格不是為了每一像素的精確，而是為了保證瀏覽效果的秩序、協調與統一。
確定列間距與大邊距
列間距與大邊距選擇 8(最小單位)的倍數，網格將更加一致?？梢詫㈤g距值把常用的數值整理成號碼表，間距復用化：小= 8px，中= 16px，大= 24px，x 大= 32px 等等…這樣一來，保持一致性更加容易，更加合乎邏輯，并且開發人員也會高興，因為他們可以根據屏幕元素之間的關系安全地假定間距。
注意：
列間距的數值越大，頁面留白間隙越多
列間距的區域不可以放置內容模塊，內容區從列間距開始到列間距結束
非常規設計時不需要柵格系統，根據設計場景可自定義。
柵格系統適配過程中需要考慮三個原則:等比縮放、彈性控件、文字流自適應。隨著設備多樣化，通用的適配方式是自適應與響應式布局，隨之就是柵格系統的變化。我們先聊下斷點。
斷點，用瀏覽器打開一個網站，檢查元素，右上角會顯示視窗當前的分辨率，慢慢縮小視窗的寬度，找到頁面布局的變化點，就是我們上面說到的斷點或者次斷點。
斷點設計主要考慮基礎的 3 端，一般大于等于 1440 為 web 布局，1439-500 為平板布局，小于 500 為手機布局。每經過一個斷點，可以改變柵格大?。ū热?16 柵格改為 8 柵格），固定改為拉伸，樣式（文字、顏色）。制作精良的話可以設計多個斷點，如 480、600、840、960、1280、1440 和 1600px。
固定柵格
固定網格的最大特征是在網頁收縮過程中，經過一個斷點就會自動減少最邊緣元素，其他元素基本保持不變。通過在嵌入式塊中排列圖塊，在工具欄中放置圖標等，可以用固定的框來形成網格。柵格列數隨著瀏覽器寬度的減少而減少，邊緣圖塊自動換行，或者有時會溢出滾動條。
首先通過最小單位選擇一個基本尺寸，然后以基本尺寸的倍數構建每個盒子框，就會出現一個個網格。
流動柵格
流動柵格是元素隨著設備尺寸變化而比例變化，當到屏幕大小變化的斷點時，列可以增長或收縮以適應可用空間，邊緣元素被減掉。但并不是每一個斷點都需要去減少元素，可以適當的按照元素的比例進行大小調整。流動布局兼容性高，能更好的適配多分辨率。
流體柵格非常適合編輯內容，儀表板、圖像、視頻、數據可視化等。對用戶而言，縮放事物的大小比縮放可見事物的數量更為有用。
在每個斷點處，列數是固定的，在斷點范圍之間，實際列寬是柵格區域百分比縮放，而不是最小單位倍數。內容區域是動態運動，就需要運用柵格系統。
混合柵格
內容區域流動和固定柵格組合也是常見的做法，混合柵格既有流動的寬度，也有固定寬度?；旌喜季謱τ脩羰钟押?，如下圖左側是固定柵格，右側是流動柵格。
在初期，網頁使用的是絕對靜態布局為主。靜態布局中如果用戶的屏幕大于或小于設計預期，結果會出現的滾動條，過長的行以及對空間的不良使用。后隨技術發展，為了兼容各種瀏覽器，出現了針對各設備適配的解決方案，自適應布局。
后來移動互聯網爆發，html5 標準發布，與移動設備、平板電腦和智能設備(游戲機)等需要提供了更豐富的功能，用戶希望能夠使用各種設備訪問任何網站，結合自適應的思想，出現了響應式布局的概念——2010 年由 Ethan Marcotte 提出。
自適應
自適應布局是網頁內容根據設備的不同而進行適應，來判斷當前訪問的設備是 PC 端、平板還是手機，為不同終端分別提供獨立的前端代碼。自適應設計可以更好地適應用戶在現場的各種需求，缺點是成本較高。
自適應設計即創建多個布局，每個靜態布局對應一個屏幕分辨率范圍。比如你對自適應網站的窗口大小進行調整，每經過一個斷點就可以得到不同的布局（頁面元素位置發生改變），但在每個布局中，沒有經過斷點時頁面元素不隨窗口大小的調整發生變化。每經過一個斷點，布局和位置是可改變的，也有特殊，如兩個斷點間等比縮放，可以保留用戶在多個設備間的操作習慣。
自適應設計，變化沒必要過于復雜，保留必要的功能入口，不必要的可以隱藏給不同設備切換不同的樣式，在同一設備下(斷點范圍下)實際還是固定布局。
響應式
響應式是通過一套代碼，無縫匹配符合電腦、平板、手機效果的前端技術，開發成本更低，高適應性；設計成本更低，一套設計應對多端，最大化提升用戶的操作體驗；響應式不提供自適應性那么多的控制，多端同步生效，減少運營成本，保障業務效率。
一個典型的響應式布局，通過改變瀏覽器的寬度就會發生響應變化，而不是像自適應經過設備斷點時內容才發生改變。響應式布局中會出現諸多差異較小的狀態，同樣讓響應式布局更加的難以測試和預測。
響應式也存在斷點，是網頁在收縮的過程中的最小范圍。當網頁到達這個范圍以后，網頁內部的元素就要進行相應的變化，用來適應屏幕的變化。
響應式設計的前提有兩點：1，頁面布局具有規律性，元素寬高可用百分比代替固定數值；2，網頁圖片必須是可伸縮的。這正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式是順理成章和高效快捷。
響應式網頁測試工具：我有反應嗎？和 designmodo
總結一下：
自適應布局是內容根據終端不同進行適應，響應式布局是網頁的布局針對屏幕大小進行響應。響應式布局等于流動柵格，而自適應布局使用固定斷點來進行多個布局。 自適應布局給了我們更多設計的空間，因為只用考慮幾種不同的狀態；而在響應式布局中就會出現上百種不同的狀態，雖然絕大部分差異較小。
自適應與響應式如何選擇用哪個呢？
頁面功能不多，用戶交互少，不需要經常升級，響應式設計從運營的難易和維護的便利性考慮會更好，如邏輯簡單并且內容大致相同的官網和展示頁面；頁面個性化多功能方面考慮，自適應設計更合適，用戶體驗更好，如功能復雜、用戶交互頻繁的網站。
全平臺適配
除此之外，隨著移動設備的生產力逐步加強，手機、折疊屏、平板、電腦之間的界限變得模糊，端與端的差距也在縮小。蘋果推出 iPadOS，讓移動端的便捷和桌面端的超強生產力進一步融合。而從應用的開發而言 Electron、Flutter 等跨系統框架層出不窮，開發者也在不斷嘗試在不同平臺上用一套代碼提供同一套服務，減少系統隔閡所帶來的維護成本。
盡管全平臺系統設計的概念還不成熟，但我們可以看到打造流暢的全平臺體驗的必要性。這也許會成為下一代應用的基礎規則，正如當初的響應式設計。
figma 有三種不同形式的柵格可供選擇：統一網格，列和行。支持單個畫板柵格系統的使用和隱藏。
嵌套柵格
與其他工具不同，figma 不會在內容層只局限一個柵格，可以建立多層柵格嵌套?？梢岳眠@一點，在盒子內部設計時，再用柵格用作視覺輔助，可以通過顏色和不透明度來區分不同柵格。
figma 可以通過相對調整畫布大小，同步拉伸柵格系統。
內容自適應
當我們拖動窗口的寬度，模塊會發生自動布局。定義下級元素針對父模塊的響應，做到模塊變化的同時下級元素的顯示也是合理的。比如相對內容左右間距一致、對齊方向一致、尺寸固定等設置。這就是 Sketch/Figma/XD 中的自適應功能。
其實在設計稿時，使用自適應功能頻率不高，不是每個區塊都需要自適應的。
固定和拉伸混合使用，在內容自適應框架中，可以將一些元素設置為固定，將一些元素設置為填充容器并與固定和拉伸形式相結合使用。
同時可以修改圖層透明度為 0，相當于占位，可以占位搭配組件。
共享樣式
在創建柵格系統時，可能需要對不同設備尺寸或其他常見用例上的布局進行不同的更改。為了更輕松地將這些柵格應用于框架，文件和項目，可以將其中的幾個合并為一個柵格樣式(相當于組件)，然后可以從團隊庫中共享該樣式或者自己復用，簡單快捷。
同樣有三種柵格可供選擇，柵格系統統一使用和隱藏。Sketch 里自適應功能不能隱藏某對象占位，而 figma 可以，當位置隱藏后，布局就會進行調整。
sketch 使用柵格設計需先設置一個總寬度尺寸，點擊左下角默認設置還可以將自定義的柵格系統設置為默認，方便以后重復調用，但 sketch 只能儲存一組柵格系統的數值。
sketch 怎么以最小單位進行移動？
可以在首選項設置最小單位如 8px，按 shift+方向鍵就能以最小單位進行調整。
這個網站，輸入版心和分割數，自動生成柵格方案。
在實際設計過程中，柵格的使用會伴隨著限制條件。我們應當明白，柵格只是為設計師提供便捷的輔助工具，而不是限制設計師的工具。
不過從柵格這個工具來說，完全的自由反而是降低效率。如果能夠給出一定的限制，反而會使得我們的設計效率提升。我們不必關心每個區域盒子具體值是多少，只需保證它們存在正確的關系。柵格系統是對界面元素進行橫向排布時需要遵循的模式，不適用于類似圖標與文字間隔的小型元素安排，而是用于大型區塊間距的安排。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
決策疲勞在現今互聯網深度發展的時代似乎非常常見，面對眼花繚亂的APP頁面，我們通常會因為需要做出過多決策而煩躁。那么產品設計者應該如何減少決策疲勞現象，給予用戶更好的體驗。本文圍繞解決用戶決策疲勞展開了詳細講述，推薦對此感興趣的伙伴閱讀。
決策疲勞是用戶體驗圈一個路人皆知的詞匯，用于描述人們在某個時期內做出過多決策而導致厭煩的情況。研究表明，它主要發生在人類的認知能力在單位時間內隨著時間的延長而減少時。這就是為什么學習、鉆研問題，是一件非公眾都能做好的少數事件。
在產品設計中，我們要堅持減少用戶需要做出決策數量的基本原則。保證用戶使用產品來完成一項任務，能夠越順利、越直接。個人在特定時期內被要求做出的決定越多，即使這些決定是微不足道的（比如選擇播放那個節目），他們的決策質量也會越低。
當你感到疲倦時，這會顯著地影響你的決策能力，而 設計師在為用戶設計界面時必須了解到疲勞可能對用戶的影響。這個話題很有趣，因為人們在使用你的產品時可能會遇到的認知過載的原因有很多。
本文重點是介紹在你進行下一個 產品項目時減少認知過載的六種方法。
作為用戶，每天我們擁有的選擇題都在呈指數增長?；ヂ摼W讓我們可以在瞬間訪問世界上的內容。如此多的選擇會使我們思維遲鈍，降低我們的滿意度，并可能導致我們對體驗感到沮喪而不是變得更好。
當給用戶太多選擇時，他們往往會感到困惑和迷茫。一個產品可以擁有世界上所有的功能，但是當界面因為選擇過多而過于復雜時，它最終給到用戶的體驗一定很差?！度烁衽c社會心理學雜志》的一項研究表明，當我們有太多選擇時，往往會導致決策失誤和情緒沮喪。
來自哈佛商業評論的模型
在追求最大化滿足商業化可能的產品設計中，老板可能會要求在其產品中包含過多或過少的功能。通過使用哈佛商業評論提供的模型，橫軸為功能數量，三個點依次為用戶復購最大化、用戶終生價值最大化、用戶初次購買銷售最大化，公司能夠根據他們想要的結果找到適合他們的功能數量最佳點。
研究表明，人們更有可能購買提供了有限數量的商品。在這種情況下，他們也會對自己的選擇更滿意，而不是從購買前的猶豫到購買后的忐忑，從而產生更大的滿足感。
關鍵是很多產品為用戶創造了太多的選擇，這可能會造成浪費并適得其反。用戶可能會浪費時間嘗試點擊所有可能的產品，而不是按照預期進行實際購買。
在用戶體驗世界中，關于使用多少次點擊以及人腦一次可以接收多少信息，存在許多相關的說法。但最重要的是，產品設計師需要在簡單性和功能性之間取得平衡，這樣他們就不會要求用戶做太多的操作或過多考慮用戶的需求遺漏了什么。
最容易被誤解的理論之一是喬治米勒的“神奇數字 7”。有人說產品設計應該只有七個菜單選項卡或下拉列表中的七個項目。
這是個謬誤，雖然我在某種程度上同意這種觀點，因為堅持這樣的限制似乎更自然，但我們也必須考慮信息是如何隨著社會和我們的大腦發生變化的。當前的互聯網會通過網站和大屏手機向我們展示數據，而不是早年的4.0英寸的小屏手機，用戶可以輕松地一次看到他們的所有選項，并不是非要強制通過數字7的限制讓用戶一塊很大的屏幕上來回滾動。
同時現在也有一些研究表明，人們有可能喜歡有多種選擇的菜單。我們擁有的選項越多越好，因為用戶不必花時間深入查找相關信息。
比如主頁上最多包含 幾十個類別鏈接的淘寶列表）比僅提供有限選項（如沒有子類別的類別）的網站更有用。但這里要強調的是需要考慮實際的用戶場景，電商平臺的屬性導致了要為消費者提供更多的選擇，而類似工具產品，尤其是垂直工具產品，在設計選項數量時一定要謹慎。
還有另一個站不住腳的理論：從業者普遍接受但完全不靠譜的“三擊規則”，或者更加扯淡的“兩擊規則”。用戶的滿意度和事件完成率其實并不一定受幾次點擊影響，比方說付費流程，缺少必要的流程硬按點擊次數把流程縮短，導致用戶錯誤付費而產生的用戶體驗變差幾乎是不可逆的。
比菜單選項卡或下拉列表的數量更重要的是視覺體驗。視覺布局可以更輕松地掃描和記住每個選項。根據信息搜索理論，信息線索的持續感知對你的用戶體驗很重要。
人們在日常生活中要做出很多選擇，而太多的選擇可能會讓人不知所措。當我們因產品特性不得不呈現更多的信息時，重要的是信息組織方式。
你可以去嘗試減少選擇的數量，但最重要的是你的信息結構。如果你的信息沒有組織好，或者給到用戶的決策過程中涉及的步驟過多，用戶就不會費心去尋找他們想要的東西，因為他們覺得這會花費太長時間或可能沒必要去更更努力地探索。
為了在產品上讓用戶的決策中有更好的轉化，我建議去掉任何不必要的東西，例如無關的標簽和鏈接，這些標簽和鏈接會分散用戶的注意力，使其無法找到他們正在尋找的東西。同時綜合產品特性去考慮實際該有的流程數量和必要選項，平衡簡單性和功能性的關系。
現實中我們都會犯錯。它可能發生在我們所有人身上！但是，如果用戶犯了錯誤，優秀的產品設計師應該怎么做？
答案是：讓用戶輕松回到起點。
通過讓用戶走上正軌，你更有可能留住他們作為用戶，而不是導致他們離開你的網站或應用程序。
下面是我在設計用戶流程時的一些最佳實踐：
導航是任何網站或應用程序的核心。這就是讓你的設計能夠讓每個人都易于訪問和使用的原因。設計出到適合你產品的導航系統，對用戶體驗至關重要。
導航的設計應該直觀且易于使用。用戶應該始終知道它在哪里，它的意義，以及點擊它會去哪。
一個好方法是通過顏色為用戶對操作區域進行導航：比如當進行切換、更改等動作時配備不同的顏色，并用文案清楚地說明每個菜單項下是什么功能。
這些小動作有助于使瀏覽您的網站或應用程序成為一種暢快的體驗。
一個例子是 Instapage 登陸頁面。如果標題沒有箭頭，很難看出下方有更多內容：
在設計新界面時，必須盡可能降低受眾的學習成本。一個方法是利用他們已經熟悉的模式和習慣。但是你怎么知道這些約定是什么？
下面是三個常見的 設計慣例，這些慣例可以讓你的用戶在與產品內交互時感覺更熟悉，這有助于減少他們的學習成本，并讓他們更快地開始學習你試圖傳達給他們的任何內容。
簡潔的配色方案要遠比復雜華麗的配色更有效果。人眼會被顏色所吸引，因此如果你在整個界面中使用簡潔的配色方案，人們會更容易找到自己想要的信息而不是被顏色亂神。
不僅要遵循常見的用戶體驗規則，而且要在一個產品里不停的重復，不要輕易作新穎的嘗試，前輩們大多已經幫你嘗試過了。
這樣的意義在于：
人們使用你的產品感覺更輕松，因為這個產品沒什么復雜的新東西（降低了學習成本）。
一個例子是，目前無論你在那個瀏覽器查看哪個頁面，你的菜單欄都會保持在站點的頂部或底部。這會讓你產生導航認知，因為它在幫助你決定下一步需要采取什么行動時減輕了學習成本。
圖標是在你在表示操作對象是什么的好方法，它們易于理解且具有普遍可識別性，因此非常適合作為交互介質。使用在生活中已經被廣泛理解的圖標和符號有助于讓你的產品內容不會感覺難以理解和過于復雜。
圖標一定要廣為人知——例如房子。這個圖標被普遍認為是“主頁”或開始屏幕的圖標。垃圾桶也是一樣——這個圖標被認定為一個垃圾桶圖標來刪除一個元素。
我們都知道應該以用戶為中心進行設計，而不是你自己，但其實不是那么容易。當你處于設計過程中試圖弄清楚你的用戶需要什么或他們會如何反應時，其實往往會按照自己的喜好走偏。
一個方法是你可以使用一些簡單的技巧來確保你在設計時考慮到你的用戶。有些人發現從第一人稱的角度寫下他們的想法有助于將自己想象成最終被服務的用戶。
或者某些設計師會講角色分類，然后全情單線程的專注一個項目，以犧牲時間和效率為代價確保航道的正向。
以用戶為中心進行設計的最佳方式是聽取用戶的意見。當你從事一個新項目并考慮這個產品將如何服務于用戶時，請確保在進行原型設計之前先和你的用戶聊聊。
可以嘗試提出以下問題：
往往你會驚訝于他們可以提供的見解以及他們將期望如何改變你原型的方向。
你可以使用多種用戶體驗研究方法來確保你在設計時考慮到用戶：
不要提供太多的選項或功能讓用戶不知所措。
每個產品都有自己為用戶解決的核心問題，用戶希望在產品中獲得幫助并快速做出決定。問題是，很多產品經常沉迷于他們產品功能以及他可以為用戶實現什么，忘記了如果有太多選項和功能，新用戶可能會感到不知所措。
如果你負責一個產品，可以考慮你的用戶在面臨過多選擇或功能時的感受，并盡量優先突出他們最需要的選項或功能。
例如，在電子商務網站中，用戶不能從 50 種不同的衣服面料中選擇他們最喜歡的材質，如果預先只有三四個選擇，可能會帶來更好的體驗。也可以考慮隱藏一些選項，方法是使用視覺提示，例如類似“探索更多”文字的按鈕。
確保將最重要的信息呈現給用戶的一種方法是將信息流設計為金字塔形狀，首先呈現基本信息，不太重要的信息盡量放在不顯眼的地方或者想辦法隱藏。
這里提供了六種方法，幫助你減少產品中的決策疲勞，從而使用戶更有可能走上正軌，解決他們的問題，并幫助獲得更高的轉化。產品設計時把自己放到用戶的角度去思考，才能更好的服務于用戶
文章來源：人人都是產品經理 作者：公眾號：真的不一定
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
