前言
互聯網瞬息萬變，在產品不斷更迭的過程中，我們經常說要保證產品設計的一致性和質量，提升產研鏈路的效率。但現實情況是：產研團隊長期面對的是產品越來越復雜，體量越來越大，一個個復雜的產品下包含N個業務線，N個業務團隊，甚至還有外部合作的業務，每個迭代都要面對數以百計的功能上線，經常容易出現各種相同但不一致的功能，上線質量參差不齊，執行者也容易陷入日復一日的需求海洋而沒有更多精力去挖掘更有價值的事情。
所以如何解決團隊效率和產品質量問題？我們的解法是抽象體系化的解決方案：設計模式化和代碼化，設計從原子到全局進行統一和優化，并形成系統化的設計指導，由開發進行模式代碼化，提供靈活可配置的規則。以此，設計有更系統化的設計原則，整體的統一性和體驗有保障，設計和開發周期也可以縮減，甚至大部分日常需求可直接由產品對接開發直接上線。
1.1 什么是系統化解決方案？
大多數日常需求大多是從單點出發，當點變多變復雜了，就容易出現上述說到的現狀問題。所以解決方案需要基于業務全盤進行設計抽象：從元素——組件——區塊——頁面——功能流程沉淀設計規則并代碼化，來靈活提供拼裝N個不同頁面的機制，幫助團隊更系統化的進行產品設計。從組成內容不難看出，解決方案是需要建立在基礎組件基礎上，與基礎組件、復雜組件、行為模式共同組成設計系統的【功能模式】部分。
解決方案是一套相對穩定的設計機制，所以在產品初期或團隊建立初期，產品可能經常會調整的情況下，并不適合做。初期可以借助成熟的設計系統來減少投入成本。而到成長期可以根據業務的發展梳理基礎元素、組件，選擇性的建立部分穩定且利用率高的解決方案，并持續發展，保證解決方案可以起到指導和提效的作用。隨著產品或團隊逐漸成熟，解決方案也應該隨著一起成長，相互影響相互作用。
1）對產品頁面（尤其是重點功能）進行盤點，劃分頁面類型：比如列表、表單、詳情、dashboard；
2）對頁面中的內容進行區塊歸類
3）對區塊中的信息進行拆解
這三個過程下來，對于問題、規則、規律都會有一定的概念。以一個后臺系統為例
1、頁面大類主要是：列表、表單、詳情。
2、其中列表的內容大致區塊分為：頁面標題區、列表操作、列表篩選、列表內容，到這個階段已經可以發現，相同區塊位置就存在不穩定，在后臺系統中可能影響面不會非常大，但對于內容復雜繁多的工具或C端界面就會容易出現找不到的情況。
3、不同區塊的內容拆解，同樣也會發現一些細節問題，比如篩選的樣式、規則不一致，列表操作的方式、位置、樣式、交互不一致等等
2.2、抽象、重組：從布局——區塊——組件——設計規則
從第一步全盤的信息拆解和歸納, 已經發現問題, 這一階段主要2點：第一是如何通過設計規則來避免同樣的問題產生，第二是如何通過簡單的規則重組減少多人合作記憶復雜度。思路類似于設計一個界面，首先得有一個布局劃分，不同的區塊要放哪些內容，再到區塊里的細節內容規則，從而抽象出由布局到區塊的設計規則和可復用的組件。
以前面說的列表為例
1) 區塊主要是4類，明顯的問題是區塊位置不穩定，所以在布局結構上，需要定義1-2個穩定的可配置的布局框架來適應不同的內容
2）不同區塊梳理組成內容，內容細則
3）標記出可組件化的內容及規則
4）提煉整個過程中通用的設計規則，作為全局的指導。如：國際化、排版規則、超限規則、適配規則、文案規則等等。
通過布局——區塊——組件——設計規則，可以靈活的進行頁面拼搭
區分通用層和業務層，通用層落地到通用模板市場，利用腳手架生產新頁面。業務層面的落地則是基于通用庫封裝具備業務屬性（如：業務主題、業務數據、業務拓展方案）的業務庫來生產新頁面。
目前群核設計團隊建立了一套平臺通用的解決方案，適用于所有中后臺產品。業務屬性比較強的產品也基于通用解決方案封裝業務層面的解決方案，同樣的思路也應用在不同體系的工具場景中。整體實踐下來，產研效率提升近50%，甚至完全解放了一條業務線的設計資源。產品體驗的一致性、上線質量也有明顯的提升
三、解決方案的管理和發展
解決方案作為設計系統的一部分，與設計系統一同管理，業務設計師使用系統來輸出，反饋問題或需求給系統，有系統設計師判斷可行性，周期性的管理，及時更新并在內部互通，促進互相成長和發展。
解決方案與設計系統的發展有一點不同的是解決方案有更多業務化的內容，業務團隊根據業務迭代維護解決方案。當業務的方案達到通用級別，則列入到通用庫。
這些方法和思路也并不限制行業或產品類型，僅是在我們當前服務的產品體系下總結的方法。當然解決方案并不能解決所有問題，只是希望在提供更系統化的設計方法和模式的同時能減少重復工作提升效率，讓產研團隊有更多的精力和時間投入更有價值的事情。
作者：酷家樂UED
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作為設計師，設計是我們的專業，也是我們用來解決商業問題的工具。
我們過去也許都曾思考過類似設計的價值、意義或是本質之類的問題。思考這類問題在某種意義上或許都是為了當我們遇到困難、沖突、低谷或是不確定性的時候給自己找一些能夠堅持下去的理由。
設計師在從業的不同階段，對設計的理解不同。從追求工具技能到表現力、方法論、風格到影響行業甚至社會審美意識等等。不斷的錘煉之后，對設計意義也會有不同理解。
我們奉為的大師，都擅長用自己的知識架構定義對設計的理解。
保羅·蘭德就是一位我們公認的設計大師、藝術家。他是當今美國乃至世界上最杰出的圖形設計師、思想家及設計教育家之一。他最出名的企業標志設計，包括IBM，UPS，ABC標志以及為史蒂夫·喬布斯設計NeXT.那段經典橋段。
去研究這些前輩們如何看待設計、理解設計以及如何與設計相處一生，是另一種設計哲學的思辨。
保羅·蘭德說：
“設計是一種行為，是想象力馳騁的過程和產物?！?/strong>
設計表現可能看似是簡單的組裝、排序或是美化的過程，但設計的過程也是賦予信息意義的過程。不斷的簡化、厘清、修飾甚至可能去說服、去取悅過后，設計就是把散文變成詩歌的過程。
設計師是孤獨的，大部分時候他們是一個人在戰斗。
設計是個人行為，即便在設計成熟度較高的國家、企業或是大型團隊，設計師仍需在一線才能真正掌控在這場戰斗中可能遇到的極其細節的變化和給人傳達的感受。
設計需要沖突來加深傳達的“戲劇性”。但設計過程也面臨種種沖突。這是設計的商業價值與藝術價值平衡的過程。正是因為這種關心很難平衡，才會出現雇主與設計師之間的沖突。
企業的目標是達到商業、經濟、政治甚至社會性目的。對設計師而言，設計是一種創造和實驗行為。通過這種行為來平衡之前的目標。
設計品質最終決定設計師與核心決策者之間的關系。關心越是緊密，設計的產出就越有可能出彩。這其實并不難理解，對設計完成度有高追求的企業，CEO也大多都跟設計團隊或是設計咨詢公司有較為緊密的往來。就比如蘋果的喬布斯與喬納森是我們都公認的CEO與設計師高緊密度關系的典范。
當今社會，市面上依然存在太多糟糕的設計。
一來，核心的決策者對設計專業的理解度不夠。
二來，很多決策依賴于市場調研，既得利益的權重大于長遠利益。
再就是我們回避不開的話題，設計師在某種意義上話語權不夠。
抉擇者很多時候不了解或是存在對某類元素特定的喜好偏見，他們有評價權，但卻缺乏對設計專業知識的儲備。所以就會普遍出現外行指導內行的情況。過往（現在好一些），他們將設計師看做一套繪圖工具，一個合作供應商而不是一個業務團隊里重要的組成部門。
體系完整的企業可能會引入市場調研團隊，調研團隊為營銷提供定位信息，設計師來解讀和演繹那些信息。如果調研團隊能理解設計師的工作過程與其產生共鳴，就有可能促成正確決策甚至產生驚喜的創意作品。
但很多時候，我們聽到了太多這樣的回復：
我喜歡它；
我不喜歡它；
它太簡單了；
它太復雜了；
它讓我想起某某...
常常一句“我不喜歡”就可以終結任何設計作品。
就像當初一位IBM的主管第一次看到這個條紋logo時嘲弄到說“這東西讓我想起格魯吉亞的鎖鏈囚犯”。
每個人所能感知的信息都不盡相同。
有人既看不到logo的意義，也看不到它的功能。也正因為過于用喜好而不是專業去評判，才讓糟糕的設計一直留存于我們的世界。而大眾對糟糕的設計要比對好設計更加熟悉，于是大家習慣于選擇不好的設計，因為和他們朝夕相處。
新事物讓人感受到威脅，而舊事物讓人安心。
要判斷一個設計的內在價值，決定性因素不是使用期，而是它所設定的“品質預期”。這是設計師的價值，也是設計師該練就的“知覺”。
何為知覺？
我們可以把知覺暫定為“瞬間的洞悉”。設計師在做設計決策的時候大部分都是依賴過往的知識儲備以及慣性技能。不斷的嘗試，都是通過瞬間對各方向的可能性判斷。
本能、預感、沖動、洞悉之后的綜合“洞悉”，這就是知覺。
說到logo，我們常把logo當成品牌價值傳遞的重要符號。
它是一面旗幟、一個簽名、一個路標。大部分時候，雇主期待logo能描述一個行業，但歷史上最成功的logo都沒能做到。蘋果、勞斯萊斯、可口可樂、或是IBM等等...不可否認的是它們都是歷史上最成功的logo，但它們卻無法做到能傳遞它們的行業屬性。因為logo遠不如它所代表的產品重要，它所代表的比它看起來的樣子更重要。
因為只有logo與它所屬的公司、產品、服務聯系起來時，它才具備真正的意義。一流的產品和公司的logo傳遞出一流的形象。反之一個公司如果是二流的，那么它的logo最終也會被歸為二流。
logo首先要告訴人們“是誰”，而不是“是什么”。這才是它最基礎且最重要的功能。它所扮演的角色就是“指示”?！昂啙崱笔沁_成指示的手段。所以設計過程中的特點、好記以及清楚都是需要設計師在打磨細節前首先要做好的決策。一個復雜、挑剔、模糊的設計潛藏著自我毀滅性的風險。
“好的設計帶來好的生意”。但不可否認，即使不好的設計，也可能帶來好的生意(比如下圖)。如果這樣，還需要好的設計么？
好的設計可以增添額外的附加價值，很多時候，也許光看著它就能給人們帶來快樂。它們更尊重感官，并通過這種友好的感官體驗，給企業帶來回報。人們更容易記得精美而不是一團糟的形象。它折射出一個考慮周全，目標明確的企業，反映了它的產品或者服務的品質。
所以，這個世界需要好的設計，設計師要做的就是用設計向世界傳遞一些更有價值的觀點。這是設計師的工作，也是設計該有的意義。
來源：站酷 作者：大寶頻道
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在百度百科的定義中，阻力是物體在流體中相對運動所產生與運動方向相反的力。自然界中存在許多類型的阻力，比如空氣阻力、水流阻力，各種各樣的生物因此進化出相應的身體特征去減少阻力。如下圖所示，擁有流線型外形的海豚掌握獨特的減少湍流摩擦阻力的游泳方法，這使其游速在某些條件下可以達到每小時 70-100km，遠超現代潛艇的航速。
人類為了擺脫自然界設計的阻力，做了許許多多的努力。采用纖維模仿鯊魚皮膚結構的鯊魚皮泳衣能夠降低 30% 的水阻，提高人類游泳速度。汽車的流線型設計減小渦旋作用或避免渦旋的形成大大地減低了空氣對其的阻力。
在人類社會，人為設計的阻力也無時無刻不在。為了公共安全設立的安檢、為了交通安全而嚴格控制不同區域的最高車速、為了社會安定而設立的法律，諸如此類的阻力都無時無刻規范著人類的行為。
類似地，對于互聯網產品，用戶在使用時也會被刻意地或非刻意地設計出的阻力所影響，這些阻力會阻礙用戶完成目標。
在認知心理學中，我們接受外部世界的刺激之后做出反應的過程中，涉及到我們如何感知、學習、推理、記憶，以及如何把意圖轉化為行為。人類數十萬年的進化過程中，對于感知、學習、推理、記憶的神經結構已經初步進化形成，大多數的人保持著相似的認知能力和認知缺陷。用戶在使用產品時感受到的阻力往往來自于設計師未能充分了解用戶的認知能力，從而設計出容易導致用戶犯下認知性錯誤的產品。以下常見的人類的認知特點影響了我們感知和獲取信息的過程。
對于一件新事物，我們感知它的方式通常受到三個因素影響：過往的經驗、周圍的環境、當下的目標。我們通過過往的經驗將已知概念套用在新事物上，幫助我們理解。一旦產品界面中與用戶的經驗預期相悖，就會產生阻力。
面對一個我們從未使用過的機器設備時，我們很少愿意耐心閱讀完它的說明書再去使用它，而是自信滿滿的希望通過簡單的擺弄和熟悉就能夠了解它的使用方法。《點石成金：訪客至上的Web和移動可用性設計秘笈》一書中的第一條可用性原則就是“Don't let me think（不要讓我思考）”，作者認為設計者在設計一個界面時，最好能夠做到讓界面清晰易懂、一目了然，讓用戶能夠不必過多的思考就能夠使用它，幫助用戶跨越思考過程，讓用戶能夠輕松做出復雜的決策，減少認知壓力。
我們可能都經歷過心流狀態，當我們在極度專注地做某件事時完全沉浸其中并且非常高效，但如果意外地被打擾，會讓我們很煩躁。
有關任務執行的研究文獻中就曾經提到過：中斷會導致錯誤，而且人們容易遺忘之前的位置或狀態。當一個任務打斷了另外一個，重新啟動需要的時間會讓每個任務都變慢。
打擾我們的事情可能是工作時突然的一聲噪聲，也可能是在使用軟件時冗余的彈窗、過多的頁面跳轉、無意的誤操作等等。界面中過多的干擾會打斷用戶的心流，造成用戶的使用阻力。
認知負荷理論（Cognitive Load Theory）是在 20 世紀 80 年代由澳大利亞教育學家 J.Sweller 提出，由于對人類學習認知和教學指導提供了新的理論框架，該理論在教育領域成為重要的心理學指導理論，在交互設計領域也存在著借鑒意義，理論的主要內容如下：
認知負荷是指外部信息進入個體短期記憶后中后所需要的注意力資源和記憶容量，被分類為內在認知負荷、外部認知負荷以及相關認知負荷（如下圖）。當任務需要消耗的注意力和記憶容量超出學習者的極限時，就會導致認知超負荷，超出的部分將不會被學習者有效獲取。
不同的呈現形式形成的外部認知負荷是不同的，一般來說，文字>圖式>視聽。因此，為了避免認知超負荷給用戶帶來的使用阻力，我們應該設法簡化信息來降低內在認知負荷，通過更合理的信息可視化形式和信息架構構建降低外部認知負荷。
如下圖，基于上述的用戶的認知能力分析，合理的降低阻力，能夠讓用戶在使用產品時效率更高，成本更低。在提高交互效率方面我們可以通過減少操作步驟、提高傳達效率、減少頁面跳轉來達到目的。在降低交互成本方面，我們可以通過降低操作難度、減少用戶思考來實現,同時通過降低認知負荷減少用戶的認知負擔。阻力并不是越小越好，在某些場景下，我們需要增加阻力和提高用戶的使用成本，進而提升用戶體驗或達成產品目標。通過提高防錯能力、提供安全感和營造儀式感來優化體驗。通過篩選用戶和內容把控社區生態。通過功能引導和歧視性策略來迎合商業目的。
類似于一個倒金字塔結構，交互流程中的每一個步驟都伴隨著流失。通過以下減少操作步驟的方法，可以降低用戶行為路徑中的阻力。
不同的控件有著不同的應用場景，控件的選用不當會形成多余的操作步驟。我們需要深入了解每個控件的屬性和應用場景才能夠做到靈活運用。
舉一個例子，在微信的朋友圈發布頁中編輯內容后點擊取消后，彈出警告框顯示“不保留”和“保留”按鈕，但是考慮到用戶可能會誤操作點擊取消按鈕的場景，此處應增加一個按鈕讓用戶回到編輯狀態，否則不管用戶選擇哪個選項都會退出發布頁重新進入，從而使用戶多了一步操作。下廚房的發布頁就考慮到了這個問題，使用了默認有返回操作的上拉菜單控件作為提示方式，即使在誤操作場景下也不會增加操作步驟。
控件方面這里就不展開講了，大家可以通過閱讀 iOS 人機交互指南和安卓 Material Design 規范來深入學習。
任務都存在其復雜性，當我們無法簡化它時，可以考慮將復雜性移交給系統，使其代替用戶操作。
比如我們可以利用用戶已經在產品中填寫過的信息來幫助用戶填寫相關信息。例如通過身份證號碼自動識別出用戶的生日和性別，自動為用戶填充。
預判用戶行為分為兩種方式，第一種是在用戶操作前，預判可能發生的用戶行為，以建議的形式為用戶提供選擇，縮短用戶行為路徑。
比如拍攝照片后，打開微信聊天頁面，微信會以氣泡的形式詢問用戶是否要發送圖片，如下圖。
第二種是由于用戶的認知錯誤進行了非目標操作時，系統提前識別引導用戶進入正確的流程并完成任務。
比如支付寶聊天界面中，很多用戶誤以為可以直接通過輸入框輸入金額數后點擊發送就可以轉賬，但實際上只會發出一條消息。支付寶貼心地在用戶輸入數字后外顯轉賬功能，從而避免了用戶的錯誤操作，如下圖。
不合理的信息架構和流程設計會增加用戶的操作步驟。比如最新 iOS13 的信息應用，將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式，導致從一級頁面（A）進入到二級頁面（B或C）后，如果想切換信息列表還需要返回到一級頁面再次選擇，增加了一步操作。iOS13 的這種改動可能考慮到用戶切換信息列表的頻率沒有那么高，希望用戶專注于當前的信息列表，但是我這樣的用戶經常查看過濾信息列表，擔心是否有重要信息被屏蔽，多出的一步操作還是給我帶來不小的使用阻力。
淘寶訂單模塊的做法就比較合理，從一級頁面（A）進入二級的任何頁面（B 或 C）后，二級頁面可以在標簽欄互相切換，而不需要退回一級頁面再次選擇二級頁面，從而節省了一步操作。
快捷方式有跳轉類和功能類兩種，跳轉類的快捷方式可以幫助用戶快速觸達或回退到某個頁面。
比如我們可以通過長按 iOS 應用圖標調出功能的快捷方式使用，減少中間的操作步驟。淘寶可以在大多數頁面通過快捷方式快速回退到首頁。
功能類的快捷方式提供給用戶更快捷的方式完成復雜或較多的任務，比如嗶哩嗶哩的一鍵三連。被蘋果收購的應用快捷指令可以自定義系統以及第三方應用的復雜任務，并且在下次一鍵即可完成。
米哈里·契克森米哈賴在《心流：最佳體驗心理學》中將“最佳體驗”定義為：當我們在做某些事情時，那種全神貫注、投入忘我的狀態。這種狀態下，我們身心合一，甚至感覺不到時間的存在，技術水平也會達到頂峰，在這件事情完成之后我們會有一種充滿能量和非常滿足的感受。然而，周圍突然的干擾或環境刺激都有可能打破心流體驗。
用戶在使用軟件產品時很少有心流體驗，因為過多的頁面的跳轉和刷新會中斷用戶心流，冗余的頁面層級會增加用戶的理解成本和操作成本。針對這個問題，我們可以提高單個頁面的動態容量，在不跳轉頁面的前提下使用戶完成任務，為用戶創造在視覺感受層面上的心流體驗，下面是一些方法舉例。
覆蓋層是出現并覆蓋在原頁面上層的一個彈出窗口，可以由用戶觸發或系統自動觸發，在網頁端和移動端都有著廣泛應用。我們通?？梢詫⑵溆糜谳斎雰热荨⒏郊有畔?、子頁面信息外顯、顯示操作指令等。
模態覆蓋層一般由點擊觸發，通常出現后會伴隨亮盒效果，使用戶聚焦于覆蓋層上的任務，用戶操作完畢后才可以進行覆蓋層外的其他操作。模態覆蓋層的大小不固定，它可以是一個小型的顯示警示信息的彈窗，也可能是一個篇幅很大的信息介紹，在保持上下文的情況下展示更多信息，避免了用戶迷失在各種頁面跳轉中。
如下圖，behance的首頁點擊一個作品后，會在當前頁面上生成一個模態覆蓋層供用戶瀏覽詳細的作品內容，而不是跳轉到新的頁面。在設計師瀏覽單個作品的場景中，一般只需要 1-3 分鐘的瀏覽后就會關閉頁面，模態覆蓋層的方式使得打開和關閉的操作更加流暢，提高了設計師的瀏覽效率。
模態覆蓋層在移動端同樣也有著應用。如果前后兩個頁面存在較強的關聯性，為了避免用戶產生明顯的割裂感，一般適合采用模態覆蓋層的方式展示新頁面。如下圖，知乎使用模態覆蓋層展示評論。
詳情覆蓋層在網頁端通過光標移入觸發，觸發后不需要刷新頁面既可顯示附加信息。如下圖Boss直聘中光標移入某條招聘介紹時，會觸發詳情覆蓋層展示出次級頁面的詳細崗位信息，避免了跳轉新頁面。
嵌入層類似于抽屜，需要的時候將其展開，不需要的時候將其收起。與模態層不同之處在于，展開后也不會遮蓋頁面的其他信息和影響其他操作。嵌入層的主要的應用場景有：拓展內容、展示下級內容。
如下圖，微博的發現頁面的功能圖標可以通過嵌入層進行拓展從而展示更多功能。
Xmind的嵌入層展示了格式的下級內容，可以在保持能夠繼續編輯腦圖的前提下進行格式設置。
對于內容豐富的頁面，希望用戶能夠通過盡可能少的跳轉就能夠觸達。我們可以將列表導航、宮格導航修改為標簽導航或分頁的形式。
把某些操作難度大耗費成本高的操作使用新技術解決，比如人臉識別和 OCR 技術可以降低信息輸入成本，不但幫助用戶使用較少的時間完成任務，也降低了用戶的犯錯幾率和使用阻力。
手勢的優化也是降低操作難度的可行方法，優化的方式有增加多手勢操作和加大熱區。比如在 App Store 首頁進入應用推薦頁后，針對不同使用場景的用戶提供了三種退出的方式，大大降低了操作難度。
舉一個反例，得到的書籍詳情頁中，查看詳情的按鈕熱區只存在于文字上，但是用戶的使用習慣會誤認為整塊區域都可以點擊，因此每次點擊多次失敗后才理解熱區的正確位置，如果將熱區擴大到整個區域就可以降低操作的難度。
想要了解更多交互手勢知識可以拓展閱讀： 交互手勢的容錯性和邏輯性
用戶的每一次思考都伴隨著流失的風險。有時用戶對于我們提供的選擇不是很了解，會糾結和疑惑不同選擇之間的區別，最終可能導致放棄選擇進而流失。我們需要做的是為用戶提供默認選擇，同時允許用戶切換到其他選擇，以此來減少思考，降低使用阻力。
以手機淘寶查看相似寶貝功能改版為例，在舊版中，長按淘寶某個商品會出現「找相似」和「找同款」的按鈕選項，點擊后會跳轉到對應頁面。在新版中，長按淘寶某個商品會直接跳轉到「相似寶貝」頁面展示商品，同時可以通過分段控件切換為「同款寶貝」。我猜測的改版原因是，由于舊版的第二步給用戶的兩個選項讓用戶過多思考，導致第二步的流失率過高，很多用戶沒能體驗到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁展示給用戶，同時也很方便地去切換到「同款寶貝」，這種交互形式的變化讓用戶無需思考就可以迅速體驗到功能的特色、并在熟悉后下次會繼續使用。
我們通過過往的經驗將已知概念套用在新事物上，幫助我們理解。一旦交互界面中與用戶的經驗預期相悖，就會產生阻力。
上文提到過，我們習慣于從過去獲得的經驗中獲得對于當下問題的解決方案。甚至對于重復出現的問題，我們已經形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此，當設計缺乏一致性時，不但會導致我們已經形成的條件反射和肌肉記憶失效，還會更容易導致錯誤的發生。此時我們不得不從條件反射的無意識操作轉換為消耗注意力的緩慢操作，從而形成阻力。為了避免這些阻力，我們需要確保按鍵的一致性、交互文案的一致性、交互手勢的一致性。
如下圖，警告框的按鈕位置一旦第一次用戶經過使用熟悉后，之后用戶會進行無意識地快速操作，此時如果某個警告框缺乏一致性就會導致錯誤的發生。
內在負荷是任務中包含的信息和用戶固有的認知結構產生交互作品而形成的負荷。體現在界面中的信息就是文案的設計了，它也是產品設計中重要的一環。悖于用戶認知結構的文案設計會帶給用戶理解上的阻力。一份合格的文案設計需要做到簡潔易懂、重點突出、無歧義性和保持一致。
如果能夠做到簡潔，就不要冗余。確保每一個字都有其存在的意義。大部分用戶會對冗余的大段文字產生畏難情緒，從而放棄閱讀。詞匯的選擇要符合用戶人群的認知范圍，不應該使用用戶難以理解的各種黑話和行話。在此基礎上，如果能夠通過形象生動的修辭手法幫助用戶快速理解，就更勝一籌了，比如針對垃圾分類，一些網友發明的快速記憶方法就是一個很不錯的例子，如下圖。
一段文案中可能有些是重點內容，有些是解釋內容，并不是所有內容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點內容告知用戶，能夠引導用戶下一步行動就足夠了，至于其他解釋性或者不重要的內容弱化即可。
針對前兩條規則，我們以 12306 以及飛豬的學生票和成人票的選擇彈窗作為案例進行對比。如下圖所示，每一次購買火車票的過程中，當我遇到 12306 的這個彈窗，都會讓我用不少時間去進行理解和思考。首先在個人看來，“溫馨提示”在任何彈窗上都是占用空間沒有實際意義的存在，如果沒有標題，直接展示正文即可；其次，正文的內容重點信息不突出，其中有一個句子“請憑購票時所使用的有效身份證件原件和附有學生火車票優惠卡的有效學生證原件換票乘車?！边^于長和復雜，很考驗用戶的短期記憶和耐心；最后，按鈕文字沒有提供操作路徑，用戶想知道如何操作需要先閱讀完上面的文案。
飛豬的案例就避免了 12306 所存在的問題，做到了簡潔易懂和重點突出，如下圖。
表意清晰指的是文案傳達的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案，文案的歧義讓用戶疑惑“取消”按鈕是取消約會還是取消本次操作。經過修改后歧義性就消失了。
同一個軟件系統中，表達相同概念的用詞一致。模塊中的相似文案，語法表達方式一致。上文提到我們人類很少愿意思考的特點，一旦一個軟件系統出現表示同一個概念，但是名稱不一樣的詞語，我們大腦就不得不開始被迫思考：“這個詞語和之前那個很接近但是有些不一樣，它們是同一個東西嗎？”這個思考過程從而形成了不小的阻力。《認知與設計》一書中提到一條規則：“同一個名稱，就是同一個東西；不同的名稱，就是不同的東西。”因此，一致性是撰寫交互文案的一條重要原則。
當信息的內在負荷不能再進行降低時，通過改變信息的呈現方式、結構設計和邏輯安排來將復雜信息可視化，降低外在負荷，使信息更容易被用戶接受和理解。這里涉及到信息可視化這個課題，這里就不做展開了。
阻力并不是越小越好，在某些場景下，我們需要提高阻力提高用戶的使用成本達成某些目的。
類似于馬路上的減速帶，在車輛進入需要低速行駛區域時進行阻礙。我們通常在用戶容易犯錯的操作前設定一定的阻力，減緩用戶的操作的節奏，達到防錯的目的。如下圖，在藍湖中如果要刪除一個項目，就需要先輸入項目的名稱后才能成功刪除，通過增加阻力提高了防錯能力。
針對涉及到用戶隱私的敏感操作，通過設計特定的交互流程讓用戶體驗到安全感，比如通過增加指紋、面部識別等操作降低用戶對于危險和風險的擔憂，增加用戶的確定感和可控感。
生活中大部分的時刻都是單調乏味的，我們需要使用各種儀式點綴它。與此類似，在用戶的操作行為路徑里增加一些不必要的過程，也能成為用戶體驗旅程中的點睛之筆。
就像多年前堅果手機一代的包裝，設計師別具匠心的將包裝設計為一次充滿著童趣的體驗，雖然拆包裝的過程時間增加，但是給予用戶似曾相識的場景是不可替代的。
看似使用起來費力的微信搖一搖，可以加強用戶的參與感和儀式感，就仿佛融合著一種占卜未知世界的神秘體驗，這種感覺是點擊無法給予的。當初支付寶基于 LBS 和 AR 技術推出了 AR 實景紅包，眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包，并樂此不疲。盡管增加了操作成本和使用阻力，但是這些富于互動性和趣味性的體驗帶給用戶的儀式感也是不可多得的。
用戶的屬性和其產生的內容質量對于產品的社區生態建設有很大的影響。對于社區的認同感越高的核心用戶越多，內容質量就越高，進而社區對潛在用戶的吸引力就越大。一旦一些修養低或居心不良的用戶大量涌入社區，就會同時帶來大量的負面內容，造成對其他用戶的干擾，甚至導致他們大量流失。因此，為了讓一個產品的社區生態能夠健康發展，我們需要采取一些篩選方法來設置阻力，以此來篩選出對平臺有益的用戶和內容。
很多產品在冷啟動階段，為了避免垃圾用戶和提高社區質量，會設立邀請制來控制用戶來源，然后根據現有用戶的使用反饋進行可控的優化迭代。這種方式可以有效地降低初期的運營成本，保持服務器穩定，甚至可以制造一種供不應求的感覺，獲得更多的討論度。
網絡騙局在社交類產品屢見不鮮，婚戀類產品更是重災區。很多推行高端婚戀或高端社交的產品為了保證用戶質量，不僅嚴防死守，還會設立價格門檻，不付費直接無法使用，這在現今已經廣泛推行的基礎服務免費、增值服務收費的收費模式中很少見，但是確實有效地進行了用戶篩選。
通過設置測試題將用戶分成不同的群體，進行具有針對性的權限設置。比如 B 站轉正時需要完成具有社區特色的晉級考試，需要花費的時間成本比較高，通過這種方式篩選出真正認同 B 站社區文化的優質用戶，給予這些用戶更多在社區中互動的權限，從而也大量減少了低質量用戶的負面行為。
上述的三種用戶篩選方法是否適用，需要考慮的產品屬性。不同維度的篩選用戶的方法還有很多，這里只是簡單舉例。
不同的內容形式對于社區的價值是不一樣，我們可以通過一定的方式引導用戶生產對于社區建設更有利的內容。比如微信發布朋友圈時并沒有直接給用戶提供純文字信息的輸入方式，如果用戶想要發布純文字內容，需要長按發布按鈕才能進入相應界面。原因是微信官方認為相對于純文字內容，附有圖片的內容對于其他用戶更具有吸引力，通過阻礙用戶使用純文字發布、鼓勵用戶使用配圖發布使得整體的朋友圈社區的內容能夠吸引用戶瀏覽更長的時間，從而也可以使朋友圈廣告得到更多的曝光。
有時產品的商業目標和用戶目標存在一定沖突時，損失一定的用戶體驗滿足商業目標是不得不進行的選擇，這需要我們進行合理的平衡。
為了迎合商業目標，我們有時需要針對一些功能設置一定操作阻力將其進行弱化，然后引導用戶去使用我們希望其使用的一些特定功能。這類阻力設計最為常見，比如通過強化按鈕對比進行功能的引導，如下圖。
歧視性策略常見的的應用方式就是通過 VIP 制度或等級制度將用戶進行身份區分，針對身份等級低的用戶設置使用阻力，以便于引導其投入更多精力和資源，或者通過此方式給予高等級用戶優越感，刺激其進行分享炫耀。
16 年發布的支付寶生活圈就是一個很好的案例，芝麻信用 750 分以上才可以使用的歧視性策略非常簡單粗暴。很多達標的土豪用戶在朋友圈炫耀生活圈的截圖，等待朋友們的膜拜點贊?；ヂ摼W產品中，每增加一個動作，用戶都會呈幾何級流失，但是支付寶的歧視性策略給了用戶巨大的動力完成了截圖、保存、打開微信、分享照片等一系列動作，幫助支付寶生活圈實現了刷屏傳播的效果。
雖然讓用戶暢通無阻地使用產品是我們的目標，但是有時還需要我們合理地限制。不同的使用場景和商業目的共同影響著設計策略。在如今互聯網產品越來越趨于存量競爭的態勢下，我們更多的工作開始專注于產品的優化。希望本文能夠提供相應的思路，助力你在產品優化探索中找到可行的切入點。
參考資料：
《微交互：細節設計成就卓越產品》作者：Dan Saffer
《心流》作者：米哈里·契克森米哈賴
《web界面設計》作者：Bill Scott / Theresa Neil
《認知與設計》作者：Jeff Johnson
《阻力設計：探索質量和數據間的平衡點》IXDC 演講，作者：王毓瑩
《點石成金》作者： 史蒂夫·克魯克
《設計心理學2:管理復雜》作者：唐納德·A·諾曼
作者：Ballen成明
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
最近新的一批應屆生開始步入職場，讓我想到自己剛入設計這一行時，遇到的大大小小問題感到很是無助。今天這篇是結合自身經驗寫給入行不久的設計，希望你們眼中有光心中有夢對設計仍不忘初心。
相信你在設計工作中一定遇到過這樣的場景，當好不容易拿著設計稿推進時，被各種角色提出意見：
“我覺得這個設計不高級”，“我覺得這里可以再大一點，顏色更亮一點”，“我覺得可以試試競品那樣”，“算了，還是用第一稿吧”等等，然后陷入無限改改改的循環中，往往做著做著就開始懷疑自己是不是不適合設計
我認為有3個方面的問題
每個人的審美不一樣，天然會摻雜著主觀因素，導致每個人都能很容易的提出自己的意見。而我們對設計的關注往往是各種好看概念稿、當前流行趨勢等等，導致我們過于追求視覺表現，而忘記從需求層面出發
每個需求都是有具體的目標用戶，用戶身份不同，同一個問題背后的需求也是不一樣的，當與真實用戶脫節，業務理解不到位，很可能就把整個需求理解錯誤，這樣修改的幾率就很大
沒有理解每個功能是什么，背后要解決的問題是什么，滿足了什么需求，能夠得到的價值是什么
產品或運營提出一個需求的背后，往往都有一個非常明確的結果預期，他們也需要層層審核。我們不應該想“他是不是對我有意見”“他不懂設計的吧，就喜歡瞎BB”“每次都這樣針對我，設計做的真沒意思”等等，而是需要主動溝通，了解為什么？只有充分的理解需求，才能尋找更正確更好的解決方案。
我們做稿子時常存在問題是我們僅僅關注了設計視覺表達環節，整個項目流程我們理解的過于狹隘，騰訊百度這些大廠設計流程往往從項目立項設計已經開始介入了
想要提升設計方案的說服力，首先要從思想上改變對設計認知，然后再從執行層上落實每個小點
這里需要設計師站在更高的視角，把設計從表現和執行抽離往前后延展，在整個過程中往前去挖掘需求和規劃產品結構，往后做到把控和沉淀，跳出視覺認知層，才能宏觀看待整個業務改版
從不同的視角看待問題，學會拆解問題和解決問題，從產品、設計、開發不同的角度來全盤看整個產品，分析這個需求的投入產出比是否足夠，是否能達到目標（包括設計目標和產品目標）。設計、產品、開發從來都不是對立的，都是不同角色為了整個產品發力。
我們在開始著手項目的時候，不要單點去看要在某個頁面要做什么改動，而是從問題入手，和產品同學對齊好目標，結合設計理念。
最后找到發力點在哪里，循序漸進，這樣很大程度上能避免項目的反復，對設計流程的準確把控也是輸出優秀設計方案的基礎。
有些新設計師認為創新就是把原項目進行翻天覆地的改變，初入職場會覺得負責的業務和項目都很小，沒有什么意思，其實創新的維度有很多，包括設計工作流程的優化，還有從小的問題點著手去深挖和思考，找到合適的解決方案并打磨細節給用戶創造驚喜。
陌陌情感化設計和貝殼旗下被窩家裝產品圖標設計異曲同工之處，大方向上都是利用大色塊、細節處用線條勾勒，整體設計輕量化符合年輕人喜歡，但兩者又有不同之處。陌陌對表情和動作的處理線條更簡潔更抽象，而被窩家裝圖標融入品牌IP趣味化表達，傳達出詼諧、幽默的正面情感
設計師往往對信息的獲取比較片面，很多往往坐等原型，然后刷網站找圖接著打開軟件擼圖，這種不充分理解需求就開始做設計的行為，屬于思維懶惰，就被稱為常說的美工
我們在需求階段設計師應該主動跟需求方深入溝通，搞清楚以下方向的問題：
明確目標是為了最終設計方案可衡量，設計師工作不是提供一個天花亂墜的方案，而是盡可能走在一個正確道路上提供給需求最合適的方案，只有大方向不錯的情況下才有好壞之分
在業務探索初期，舊版滿足了業務方和用戶的基本訴求。但是隨著業務擴張與更新迭代，我們逐漸發現現有的租售模塊實價登錄信息不能提供用戶有效的參考價值，該頁面點擊到實價登錄頁面的用戶量極少
這個改版的背景是在租售業務上優化實價登錄社區的需求，租售詳情頁的上內容的呈現還是舊版，現有框架和內容對社區價值點展示不足。
解決辦法：優化信息框架，豐富該房屋社區信息，滿足用戶找房時了解社區資訊需求
比如整個社區在該市的排名、整個社區的配置圖、口碑評分等以及在實際找房場景過程中，用戶會找這個社區內同格局同戶型的房屋等等
整個591APP是臺灣地區關注度最高房屋的產品，但是從二手房引流過來的用戶很少，埋點數據不理想
解決辦法：除了在視覺上也要與本身租售的業務分開，讓用戶理解注意到該模塊的價值外，另外在體驗層也需要優化
為了更好的明確實價登錄的價值定位，以及確認用戶期望什么的信息呈現，我們在實際改版時對用戶做了多輪的摸底調研，挖掘用戶在使用關注功能時的真實場景訴求。
在調研過程中，我們發現使用實價登錄的用戶分兩類，分別是觀望期的用戶和決策期的用戶，這兩類用戶雖然都使用，但是對實價登錄功能的場景訴求是不一樣的。
觀望期用戶一般是有買房計劃，但是對于自己要買什么樣房或能賣什么樣的房子需求沒有那么明確。這類用戶大多數是了解為主，從慢慢對比中做到心中有數
決策期的用戶大多已經線下看過房，有些甚至已經到了和議價階段，他們對于自己的購房訴求已經十分清晰。在這個階段的用戶，期望提供更多有關體現房源價值的信息，比如掛盤時間、成交表、周邊完善程度等等，這些信息一方面可以展示出目前房源再市場內的定位，重新調整價格預期；另一方面也能了解到業主心里預期，提升線下斡旋的成功率
我們可以從這兩類用戶的使用訴求看到，大家都期待能提供更豐富有效的信息，幫助自己明確需求和輔助決策。
由上述信息得出我們的設計目標，提高租售模塊的實價登錄的點閱、降低跳出率，當我們的設計方案每個細節，都是以目標為導向時，你輸出的方案將更有說服力
結合實價登錄歷史現狀和不同階段用戶場景使用預期。我們在本次關注改版上制定了對應的設計策略。
舊版分析：僅滿足用戶基本使用，其中承諾的誤差率未達標，與內政部信息同步也存在問題；同時，視覺上更像是內容說明展示，點擊感不明顯
優化策略：圍繞用戶買房租房場景，為用戶提供最新的實價登錄信息，同時添加點擊指向性箭頭，告知用戶可點
通過對首屏不斷的優化和迭代，打磨體驗細節和設計細節，首頁的點閱提升了43%
從框架層對功能和層級進行梳理，原層級主要功能不突出，根據功能的重要層級以及用戶使用頻次進行梳理，將入口進行提煉，同時針對多樣化需要增加新的入口
舊版分析：用戶在不了解社區情況下缺少關注動機；折線圖不明所意；同社區是否有成交與當前用戶缺乏聯系；查看更多實價登錄卻到社區詳情頁與預期不符
優化策略：圍繞用戶買房租房場景，展示與用戶切身利益相關信息
關于顏色
整個產品主色是橙色，但是目前租售詳情頁上藍色橙色混用，當然設計的改版也需要鍥機，所以我們這次改版沿用橙色，當好區別之前的藍色，達到凸顯實價登錄模塊的目的
配色從樸素到亮眼跟從LOGO配色，“暗藍色”到“亮橙色”增強年輕感，加強了顏色的對比度，讓品牌感知更加直接，增加品牌視覺分量
關于圓角
圓角，代表友好、親和，具有更強的內指向性。我們對于圓角的取值上也做了足夠的思考：結合房屋特性，卡片內需承載的內容信息眾多，圓角太大會影響邊角信息的呈現，所以我們在圓角選取上將圓角數值整體縮小，采用了可根據場景精細程度選擇合適數值的圓角(4-6-8px)，使卡片容器信息展示更聚焦。
設計師不僅要會設計，還要能夠有理有據的，跟需求方陳述自己的設計方案。尤其是在項目合作和設計推進時，非常重要。方法可以分為以下幾點：a.有邏輯；b.能堅持；c.會妥協。
向別人推進自己方案之前，先把自己要表達的內容梳理清晰，進行調整和簡化。試想你小時候全校上臺發表考試獲獎感言，是不是有個長長的稿子
多問自己一些為什么，比如下面稿子類似于廣告位的地方，當前目標是提高點擊率。但是整個模塊展示是在另外的業務上，也是存在突出的同時不能太突出的問題
初稿給出的時候也是出于2個方向考慮，方案一是出于頁面整體風格一致性同時優化視覺，稍作強調；方案二考慮到方案一視覺引導弱了，用重色強引導達到產品目標。2個設計方案都可達到產品目標，剩下的就是調優了
在符合最終產品目標的設計方案，必須堅持。但是，你要有證據證明為什么它值得或者能夠堅持。
這里再分享一個案例來，臺灣用戶往往特別注重個人隱私，基本不開通系統定位，但是買房租房位置選擇及交通地域選擇是第一步，否則后續搜索無法定位到用戶預期。所以此次產品目標是加強導航的視覺層級，當然這只是優化需求里面一個小需求
經過競品分析、加強品牌感知和用戶使用習慣等方面確定使用品牌橙。但是這個橙飽和度比較高，在測試階段非專業人士提出疑問導航這個太刺眼，讓整個頁面感覺不高級，讓產品和交互再次懷疑這個橙色是否需要調整
這個時候設計堅持是非常有必要的，因為大量結果驗證是可達到產品預期也符合用戶使用習慣，僅因為大陸同事質疑就在測試環節隨意修改，這個是非常沒必要的。測試環節離上線時間是非常緊迫的，這個急促的時間推翻重來結果也可想而知
體驗設計會有很多不可控的因素，是在各種局限下做出最合適的選擇。要處理好問題的優先級，分清楚哪些是核心目標，哪些是兼顧目標，這樣才能更有效的管理自己的時間以及項目的進度。
清晰設計層面來說就是方案能做到方向明確，方案明了；有效字從設計層面來說就是輸出的方案可以解決存在的問題，能達到設定的目標以及可以切實落地。
清晰和有效的維度是不一樣的：清晰更多是針對設計，在于不同方向/方案的差異度和側重點；
有效更多需要聯合設計上下游（用戶/產品/開發），對于優秀的設計方案來說兩者相輔相成，缺一不可
數量并不代表一個設計師的專業，最多只能說明設計師技法嫻熟。在評審的過程中，不建議將所有的設計方案直接平鋪。而是你要先經過自己思考、衡量與推敲，挑選出最優的 1~2 個方案進行方案評審，并給出設計說明，陳述方案的思考邏輯。
在設計最初期先思考有哪些途徑達到目標，確保所有實現手段的方式都有考慮到，整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸，才能在合理范圍內整理出具有不同思考維度與目標側重的提案方向。
之前的例子比如目標答案是提高點擊率和閱讀量，我從3個方面闡述方案的可行性
方案一：沿用當前頁面的比較扁平設計樣式，選用大間隔大標題區分模塊，在頁面里加入品牌色裝飾強調我們的模塊，吸引用戶點擊；
方案二：可以采用卡片式設計突出點擊感，吸引用戶點擊；
方案三：因為頭部有用橙色裝飾強調，所以整個頭部模塊不用卡片式呈現，突出后面2個模塊
這樣3個方案給需求方，即滿足對方產品需求，又滿足設計需求，對方就不會全盤否認設計方案，走入改改改模式了，就算對方有修改意見也能說出具體點去修改，而不是說我覺得不好，不夠突出這樣非常主觀的想法
強調一點：我們在方案都沒說服自己的情況下不要推出去，專業度是每次和對方碰撞中中慢慢建立起來的，如果說服不了自己的情況下，推出去對方很大可能性要你試無數稿對比；另外在闡述發需求方時候，也要注意語言的引導，慢慢理解對方的意圖
初入行時認為滿足了需求方便是好的設計，當其他角色提出不同意見就會覺得他們不懂的設計。這些現象是因為設計師在項目前期沒有正確思考需求本身需要解決什么問題、方案能否達到團隊共同設定的目標，以及方案是否能平穩落地這三個維度
我們在實際輸出方案的時候，不能從產品經理的需求文檔開始，而是要把考量維度更前置，從項目現有的問題出發。這個問題的搜集包括外部用戶的反饋，內部團隊的聲音，同時對問題進行篩選和甄別。
比如下面同一個產品按鈕2種懸浮狀態，左側案例按鈕hover狀態是由正常狀態面型變成線型；右側案例按鈕hover狀態是正常狀態下加投影。
如果我們僅從產品需求文檔開始，不去深究其背后的原因，很可能把右側hover狀態直接變色處理，沒有去思考hover的幾種樣式哪種是更適合當前場景的的，這樣簡單粗暴的處理方式多了之后使得產品體驗大大折扣
問題還需要結合目標一起考慮，解決問題的思路并不完全等同于目標，目標是大家一起制定的未來產品的發展方向。比如之前導航的案例，未發版前部分工作人員認為顏色偏重，但是從產品目標和品牌調性及目標用戶審美上是沒有問題的
在輸出設計方案的時候，需要考慮到開發實現的可行性，需要消耗多少資源去實現這個需求，最低成本達到目標的路徑是什么。最常見的就是情感化設計，下圖案例2個空狀態下的場景，原本考慮到趣味性及品牌屬性加入動效，但是開發的業務需求已經排到下月，最后只能以靜態圖展示，先滿足基本需求后續有時間再進行優化
再例如下面三組數據的排版方案一：文字最左邊間距30px，文字最右邊間距30px，中間一組數據中間對齊；
方案二：三組數據分別在360px寬的格子里距離左邊30px。方案一在視覺上可能更加合理，當寬度是1200時右側不會空太多，但是按方案二的邏輯寫更加便捷，一組數據樣式可以解決3組數據的排版，大大提高開發效率，如果用方案二評審加入開發實現方式的思考，那么按過稿率大大提升了
以上是跟進項目一整個具體過程，了解背景、分析問題、設定目標、到方案推導及執行輸出、再到方案的落地，整個過程與產品研發溝通非常順利，最后也獲得良好的用戶反饋，整個團隊滿滿的成就感是非常開心的
進入互聯網公司工作初期，大多數人對設計的理解更多停留在表現層，對設計的判斷標準更多是好不好看、喜不喜歡。但作為設計師我們不要盲目的去畫設計圖，只有在設計方案前，更好的理解和分析了需求，才能很好地服務用戶幫助用戶使用產品；同時，只有站在用戶的角度去分析理解產品，才可以幫助產品站在全局的視角提升用戶體驗和設計需求，從而打造優秀的用戶體驗。這2點綜合起來才是設計師價值的體現。
原文地址：站酷
作者：貝賢設計筆記
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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、搜索定位框、文字下拉框、圖標功能按鈕、通知按鈕構成。導航條里的每一個模塊都有自身的目的：搜索定位框告訴我們怎么快速找到想要的東西，導航帶領我們瀏覽全局，指引我們到想去的地方，而后面的的圖標按鈕讓我快速觸達。
總的來看，這些模塊都有一個共同的目的：引導用戶快速瀏覽使用。隨著產品的發展，模式也在不斷發展。
例如，隨著產品功能越來越多，可能會在導航上面新增設置功能，讓用戶自己去排布常用功能。又如，我們可能會對導航進行重新布局，把導航按模塊分類，采用標簽按頁展示。把模塊下面更多功能放到子頁面左側。雖然我們不斷的對模式進行迭代，希望它更好的實現各自的目的或者說更有效地激勵用戶使用。
在設計開始階段就闡明模式的目的，能避免在產品發展過程中做重復性的工作。
目的決定了其他的一切：模式的結構、內容及呈現。了解模式的目的，可以幫助我們設計和構建更加穩健的模塊。
如果說功能性模式是界面中的組件，那么感知性模式則更像是樣式——描述組件是什么類型的，給人的感受是什么樣的。下面，我們將探討感知性模式。
設想我們每個人各有一套房子，且每套房子都有以下這些家具：一張桌子、幾把椅子、一張床和一個衣柜。
不過，雖然都有這些家具，但每套房子給人的感覺截然不同：可能是因為家具的樣式、材料、顏色、紋理不同，或者是床罩的布料、裝飾品的樣式、房間的布局和燈光，甚至是房間里播放的音樂不 同。
上述這些屬性便稱作感知性模式。正是因為它們，可能你的房子就像是一個地中海風格的小窩，而我的房子就像是一個倉庫。
而數字產品感知性模式的例子包括語氣、排版、配色、布局、插圖與圖標樣式、形狀與紋理、間距、意象、交互或動畫，以及這些要素在界面中的組合和使用的具體方式。
有時，人們將這樣的特性視為產品的樣式，或稱作皮膚，也就是最外面的一層。但要想取得成效，它們必須不僅存在于表面，還必須存在于品牌的核心，并隨著產品的發展而發展。
只有這樣，感知性模式才會成為讓產品脫穎而出的強大力量。
同一領域的產品，哪怕具有相似的模塊，它們給人的感覺也是不一樣的。感知性模式通過界面傳遞品牌，并讓品牌被人記住。
看下面的圖片，你能認出它們是什么產品嗎？
這兩張圖里面并沒有太多的信息，你只能看到排版的樣式、一些圖形和顏色，以及一些圖標。然而那些視覺上的線索極具辨識度，所以你仍然很有可能看出它們分別屬于什么產品（即釘釘和飛書）。
這些視覺元素通過有意識地反復使用，便形成了模式，這就是為什么我們可以在沒有上下文的情況下認出它們。
在模塊化的系統中，想要做到視覺上的連貫統一可能是一件很棘手的事情。模塊是由不同的人根據不同的目的創建的。而由于感知性模式是滲透到系統中各個部分的，因此它們可以將系統的不同部分連接起來。如果這種連接是有效的，那么用戶就會感受到模塊之間的統一性。
例如：飛書和騰訊的相同功能的組件感知模式是不一樣的，所以兩個公司設計體系不能混用。
如果說功能性模塊反映的是用戶需要且想要的內容，那么感知性模式關注的則是他們直觀的感受或行為。
在《網站情感化設計》一書中，作者提出了一 個簡單的方法，通過創建“設計角色”捕捉產品關鍵的個性 品質。以下是一些有助于探索感知性模式的一些技巧。
情緒板是探索不同視覺主題的絕佳工具?？梢允褂脭底只姆绞絼摻ㄇ榫w版（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咨詢、用戶體驗公司、軟件界面設計公司
臨摹是一個很好的學習方法，人類學習就是從模仿開始的，而對于設計師來說，臨摹作品對于提升學習效率尤其有用。
但在做具體臨摹練習時，就會發現一些問題，比如在星球里看到同學們做日常打卡練習時會遇到臨摹的原作本身質量不高，不會分析作品優缺點，不知道如何用到自己的項目中等等。所以我在星球里的月度分享會上跟大家聊了這方面的經驗，今天也將部分內容整理成文章分享給大家，希望能提高學習效率。
分享的內容分以下幾點：
1、為什么需要做臨摹練習？
2、臨摹的幾個階段
3、如何找到優質臨摹作品？
4、如何做臨摹思考？
5、保持行動力的秘訣
6、總結
有些新人在剛入行的時候，出于對設計天馬行空的想象，不屑于做臨摹練習，覺得作為設計師就應該多發揮一些自己的原創能力。想法是很好的，但此時更多的是手上的輸出跟不上腦子中的想法，產出的原創作品質量往往不高。而臨摹是站在巨人的肩上做事，提升動手能力的同時吸收優秀的設計思路對自己的提升來說非常有幫助。
其實不光是小白需要臨摹，很多資深設計師甚至藝術家也會采用臨摹的方式提升自己的能力，從中學習別人的創作思路、表達方式，學無止境。
不同的階段，臨摹的目的也有所區別。一般來說，前期臨摹更多的是練習軟件、技法，后期才會是練習別人的風格表達，綜合運用。所以，我把臨摹分為3個階段：
因為是練習技法，訓練的是自己的軟件操作能力和觀察解構能力，所以我通常會選擇稍難一些的作品進行臨摹，目標是跟原作盡可能的一模一樣。
比如我6年前臨摹的Mike大神作品，就比較考驗技法，適合初期剛入門階段做練習。
這個階段主要是練習思考和分析能力，嘗試理解原作者這樣設計的原因和目的。這個階段，我通常會選擇臨摹一些有特點的圖標或者界面，并嘗試改動原作中的一些小的元素，目標是有保留原作的特征，又會加入更多自己的思考讓作品在細節上有所區別。
比如在2015年做的界面練習，同時還會記錄自己的思考
其實經過一段時間的練習，你肯定已經積累了不少創意，現在有實現能力就可以盡情發揮了。雖說是原創，其實也會大量找參考。剛入行設計的時候，我一直覺得，大師應該是可以完全自己創造出新的作品，但后來知道，優秀的作品大部分都是建立在融合非常多優質作品精華之上完成的。之前看過暴雪的設計師分享，他們做一個場景效果，光找參考都要花掉一半的時間，可見找參考的重要性。
這個作品當時是我在圣誕節前做的，是有參考笑臉、塑料口袋、光碟、進度條光帶等等結合起來的原創作品。
既然是希望通過臨摹從別人的作品中學到東西才去做，那么臨摹優質作品就很關鍵。我一般會從Dribbble,Behance,Pinterest,Instagram和大廠出品的應用中找臨摹對象。判斷是不是優質作品，可以從推薦上，細節上，吸引你的點上進行選擇。
比如，我想做一些細節豐富的UI控件，那平時大家打王者的時候，里面的UI細節都是非常精致的，包括按鈕樣式，排版，造型，動效，可以從中學到的知識點可太多了。
在比如在Dribbble中，用關鍵詞進行搜索，再篩選為熱門，時間選擇最近一年，就能知道流行趨勢和設計佳作了。從中選擇一些很有感覺的作品來臨摹練手，肯定很有動力了。
不要無腦臨摹，做的過程一定要多加思考，我一般會從以下幾個方面來做分析：
同一個作品，閃光點的判斷因人而異，但你既然喜歡它肯定就有你看中的地方。你喜歡的那個細節，就可以是它的亮點，記錄下來就是你的思考。這些記錄會成為你下次創作時的靈感，在實際做項目的時候就不會腦袋空空了。
比如下面這張作品，我就很喜歡它的光影細節表達，在開關的邊緣還會有小光源的顏色影響，會有紅色和綠色的邊緣光。我覺得這張圖值得學習，所以就臨摹了下來，這張圖就是我臨摹之后的效果。
記錄你覺得是問題的地方就行，不講對錯，只需有你自己的理由就行，然后嘗試給出自己的優化方案。沒有完美的作品，但如果確實暫時看不出來也沒關系。
在做臨摹的過程中，會遇到哪些問題，比如某些效果跟原作有差異，某些字體大小間距不好把握等等，這些就是你可以學習的地方。
比如我在最初做UI的時候，就不清楚具體的設計規范，我就逐個把原作用到的間距，字體，尺寸全都量出來，然后用到臨摹的界面中，自己來摸索出設計規范，而不是去死記硬背。更多當年我的打卡日記系列請見https://www.zcool.com.cn/work/ZODAxNzI2MA==.html
做練習，最重要的是堅持，讓很多人苦惱的是做了幾天看不到效果就沒了動力了，但其實想要堅持做事也是有方法的。
就像挖井一樣，每次打井就要打通看到水才行，設計練習也是如此。一段時間專注一個能力的練習，學到會運用才算是真正掌握。這里我的方法是按主題系列來執行，比如這周我主要打卡練習美食類的圖標設計，那么就會找各種差異化的風格來練習。系列感的練習也更容易出效果，獲得滿足感。今天練這個，明天練那個，心態很容易浮躁。
往往做練習的時候，很多時間會花在糾結到底練什么內容上。減少選擇的辦法就是列好清單，提前規劃好每天做的內容，具體可以直接執行的程度。
學習最忌諱的是三天打魚兩天曬網，保持規律，每天進步一點點很重要。忙的時候，也要至少保證自己比昨天有點進度。這個進度哪怕只是改個顏色，調個比例，或者有點思考記錄都是行的。做兩天又中斷幾天，很容易產生挫敗感，而每天進步一點點的本質就是讓你獲得心態上的穩定感，這會成為你堅持下去的持久動力之一。
千萬別悶頭做東西，多尋求反饋，不論是發設計作品到平臺還是朋友圈，亦或是在星球里跟一群相同想法的人互相打卡點贊，這些反饋和認同感都會不斷激勵自己堅持下去。當你因為堅持一件事而有收獲的時候，就能體會到一種成就感與滿足感。不斷給予自己一些正向激勵會讓自己進入一個良性循環，更不容易放棄。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
最近幾年以來，大家能看到B端設計趨勢已經越來越火熱，在B端設計中關于圖表的設計算是為數不多的視覺發揮點了。那么怎樣才能做好圖表設計，讓設計出來的圖表高大上，符合業務需求，讓業務方和總監對你贊不絕口，本文就必須看完和收藏了，因為實在是太實用！
應用設計越來越依賴數據驅動，對高質量的數據可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導的數據圖表，但我們其實可以通過遵循一些簡單的規則來改變這個情況。
選擇錯誤的圖表類型，或默認為最常見的數據可視化類型，可能會讓用戶感到困惑或導致對數據的誤解。根據用戶希望看到的內容，可以用多種方式表示相同的數據集。盡量做到每一次做數據可視化時都能從數據集類型分析和用戶訪談開始。
當使用水平條時，在基線的左側繪制負值，在右側繪制正值。不要在基線的同一側繪制負值和正值。
刪數據起點會導致曲解。在下面的例子中，看左邊的圖表可以很快的得出結論，值B比D大3倍多，而實際上，兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數據表示。
對于折線圖，總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢，因此根據給定時期的數據集調整比例并保持直線占據y軸范圍的三分之二是很重要的。
折線圖是由線連接的“標記”組成，通常用于可視化時間間隔內的數據趨勢。這有助于說明數值是如何隨時間變化的，并且對于較短的時間間隔非常有效，但當數據更新不頻繁時，這可能會導致混淆。
例如: 使用折線圖來代表年度收入，如果數據是每月更新的，則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值，而在特定時間實際的收入數字是未知的，所以可能會產生誤會。在這種情況下，使用垂直條形圖可能是一個更好的選擇。
平滑的折線圖可能在視覺上很好看，但它們錯誤地反映了背后的實際數據，而且過粗的線會模糊真正的“標記”位置。
通常，為了節省可視化空間，當有兩個具有相同度量但大小不同的數據系列時，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導的方式代表了兩個數據系列之間的比較。大多數用戶不會密切關注比例，只是瀏覽圖表，然后就得出了錯誤的結論。
餅狀圖是最流行的也是經常被誤用的圖表之一。在大多數情況下，條形圖是更好的選擇。但如果你決定做一個餅狀圖，有2個比較好的建議:
1）不要超過5-7片，保持簡單
2）可以將額外的最小段分組到“其他”切片
如果沒有適當的標簽，無論你的圖表有多好，它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數據和對應的部分。
將數據放在切片上可能會導致多個問題，在可讀性問題上和窄切片上都會有挑戰。相反，添加黑色標簽能清晰的鏈接到每個部分。
在確定餅片秩序時，有幾種常用的方法:
1）將最大的切片放在12點的位置，然后將下一片切片順時針降序排列
2）把最大的切片放在12點的位置，第二大的放在順時針相鄰位置，第三大的放在11點的位置，其余的切片按順時針降序排列
同樣的建議也適用于其他許多圖表。不要默認采用字母排序，將最大的數值放在頂部(對于水平條形圖)或左側(對于垂直條形圖)，以確保最重要的數值占據最突出的空間，減少眼球運動和閱讀圖表所需的時間。
餅圖通常不是最容易閱讀的圖，因為比較相似的值非常困難。當我們把中間部分去掉，創建一個圓圈圖表時，我們騰出了空間來顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會變得毫無用處。
不必要的造型不僅會分散注意力，還可能導致對數據的誤解和用戶的錯誤印象。你應該避免:
1）3D元素，明暗面
2）陰影、漸變和其他扭曲的多彩色
3）斑馬圖案，過多的網格線
4）過度裝飾，斜體，粗體或襯線字體
顏色是有效的數據可視化的組成部分，在設計時考慮以下3種顏色類型:一個定性調色板最適合顯示分類變量。為確保易用性，所分配的顏色應該是不同的。連續調色板最適合需要按特定順序放置的數字變量。使用色相或亮度或兩者的組合，可以創建一個連續的顏色集。
發散調色板是兩個連續調色板的組合，中間有一個中心值(通常為0)。通常不同的調色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現的概念相匹配。
看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以幫助你生成各種調色板。
根據美國國家眼科研究所(National Eye Institute)的數據，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。
1）在調色板中使用不同的飽和度和亮度
2）把現有配色去色然后檢查對比度和可讀性。
確保排版能夠準確傳達信息，幫助用戶專注于數據，而不是分散用戶的注意力。
1）選擇易讀的字體，避免襯線和裝飾過度的字體
2）避免使用斜體、粗體和全部大寫
3）確保與背景有高對比度
4）不要旋轉文字
這個簡單的技巧將確保用戶能夠更有效地閱讀圖表，而不會扭傷他們的脖子。
如果你的任務是在web和移動項目中添加交互式圖表，你應該問的第一個問題是我們將使用什么圖表庫?現代圖表庫包含了許多前面提到的交互和規則?；谝讯x庫的設計將確保易于實現，并能提供大量交互想法。
幫助用戶通過改變參數，可視化數據進行探索。然后得出結論，最大化價值和洞察力。在下面的示例中，你可以看到IOS Health應用使用了各種數據表示的組合。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
B 端產品主要是 Web 端產品，空間大、操作多，內容相對復雜。需要通過頁面布局或者視覺設計表達出明確的邏輯關系，從設計角度降低用戶的學習成本。而用戶有固定的認知規律。格式塔原理揭示了人類視覺的認知是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區域。
格式塔主要包括 7 個基本原則：
今天我們就來總結下，格式塔原理在 B 端產品中是如何應用的？
我們先看 2 張截圖，分別是不同分辨率下的界面效果。
可以明顯的感覺到高分辨率下，菜單列間距離較大，菜單的歸屬關系很清晰。而低分辨率下，菜單間的距離變小，特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則，距離近的關聯親密，距離遠的就各自獨立分組。
當我們想要傳達給用戶層級關系時，就需要善于利用接近性原則。例如表格上方的功能按鈕，通常我們將高頻、核心操作放置在左側，低頻、輔助功能放置在右側。通過增大元素間的距離，達到功能分區的目的。
相似性原則是通過顏色、尺寸、圖形等方面的共同屬性，實現信息的分組或者高可讀性。
例如在可視化圖表中，不同范圍值的指標采用不同的背景色。通過背景色的差異，將同一范圍內的數據形成視覺關聯，提高用戶對信息的識別效率。
通過圖形尺寸的相似性也可以構建內容分區。例如阿里云、騰訊云控制臺的首頁，都采用了雙列設計，左側主要以高頻的業務功能信息為主，右側是輔助運營信息。兩列尺寸寬度有明顯差異，用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內容差異，并有效地突出業務信息。
IBM、蘋果的 Logo 設計，無論是“用刀砍過”，還是被“偷咬了一口”，用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現方式。
在 UI 設計中，則會通過對齊方式，形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內容空間。而微信公眾號則是平鋪背景色，內容區借助標題、卡片對齊形成視覺閉合空間，最終將頁面劃分為左側導航菜單和內容區兩個空間。視覺表現上更輕量化。
另外閉合性是需要元素之間相互輔助的，單獨的元素無法構建出閉合空間。以下圖為例，雖然四個小的卡片做了間距分割，但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認知。
用戶更習慣于從左到右的橫掃閱讀，因此連續性主要體現在橫向空間中。
下圖中，雖然左側的標簽文字與右側的內容信息有較為明顯的間距，高度尺寸差距也比較大。但是用戶不會將內容看作是 4 個獨立的個體，而是理解為兩組信息。
在某些場景中，如果信息平均分布，不會產生連續性的視覺感知。
例如下圖指標監控中，指標都是采用小卡片，間距、尺寸較為統一。這種情況下用戶就很難對信息分組處理。在我看來這些指標只是一個個的視覺散點，沒有明確的視覺重點。用戶無法感知到內在的邏輯性。用戶想要找到某個指標時，需要逐個檢索，花費的成本更高。
通過上述很多圖片，我們可以看出頁面元素基本都是橫平豎直，中規中矩的元素和分割方式?；蛟S有些單調乏味，但是勝在簡單，不會帶來額外的視覺噪點。
特別是 B 端產品，基本看不到異形的存在，甚至全圓角矩形都很少見到。即使有異形，也只是作為視覺表現元素存在于內容中，而不會作為空間的劃分邊界。
主體與背景原則最典型的應用就是蒙版彈窗。通過拉大主體與背景的差異性，凸顯彈窗信息。
當我們需要著重表現內容時，同樣適用于主體與背景原則。例如登錄界面的設計，會通過差異化的背景、陰影等方式，帶給用戶清晰的視覺層級，適當凸顯輸入框的主體地位。
而 B 端內容區是核心空間，基本都是采用純白背景，與頁面背景形成對比，從而占據信息的主體地位。
共同命運原則聽起來有點玄學，指的是相同運動特征的元素會被認為是同一組或者是具有相關性的內容。運動的元素在 B 端產品中應用很少，我沒有找到合適的案例解釋這個原理。
在移動端產品中有些應用案例。比如 iOS 系統中，桌面布局編輯態下抖動的圖標，可以與靜態不可編輯的內容形成隔離效果，視覺引導性更強。同樣今日頭條頻道編輯時，也采用了抖動效果。
雖然 B 端產品沒有 C 端色彩豐富，表現力上沒那么炫酷。但是兩者對信息傳達的要求是一樣的，要求和諧、有序、層次分明，輔助傳達內在的業務層信息。靈活地運用格式塔原理將對產品的體驗提升會有很大的幫助。
格式塔原理不僅限于視覺表現，產品經理或交互設計師在原型設計時，也要重視格式塔原理，輔助設計方案表達，提高團隊間的協作效率。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
簡介： 按鈕組是把相關的動作組織成一組按鈕的設計模式。按鈕組的內部內容彼此水平或垂直對齊，并采用相似的視覺設計。如果超過三個或四個動作，往往會采取多個分組。
例子： 語雀編輯器的頂部工具欄
按鈕組可以讓界面不言自明。在復雜的布局中，被精心安排過的按鈕組會很容易被用戶感知和使用。一方面，它們在界面上往往非常明顯，用戶能夠一眼看到有這些功能可以進行相關操作。
大家所熟知的格式塔原則（Gestalt principles）也在這里起作用。彼此相鄰的按鈕往往暗示著這些按鈕的功能相近，因此會讓用戶感覺到這一組按鈕可以完成類似的功能。相對的，不同的按鈕分組往往暗示著不同的功能類型，因此彼此間應該保持間距，或用不同的形狀，或用分割線進行區分。
如果你需要在界面上展示許多操作按鈕，且需要確保它們隨時在界面上可見。但同時，你又需要用圖形化的方式組織它們，以使它們看起來不會特別散亂。
這些動作中有許多是彼此相似的 —— 它們有相似或互補的效果，比如，它們的功能語義相類似 —— 由此它們可以三五成組地放在一起。
按鈕組可以用在對產品全局有效的操作上（例如「打開」和「選項」操作），或特定的一些通用操作（「保存」、「編輯」和「刪除」），或特定的某些操作（例如布局的「對齊」、「分布」）。不同范圍的操作不應當被到一個組中。
使用條件：
· 存在大量操作按鈕；
· 希望用圖形化的方式組織這些按鈕；
· 操作按鈕間存在功能相關性和差異性；
這個模式的總結簡單到像是一句廢話：把相關的操作按鈕分成一組。
但如果詳細展開就會有更多的介紹。比如：
· 如果需要包含文本說明，盡量使用兩個字或三個字的動詞短語，不要使用專業術語。
· 不要把不同功能范圍的按鈕放在一個組，應當將它們分成不同的分組。
· 同一組的按鈕應該有同樣的視覺設計：邊框、顏色、高度或寬度、圖標風格、動態效果等。
· 在空間排布上，可以將它們并排起來作為橫排放置，如果空間不太適用的話，也可以考慮一列縱列放置（例如Photoshop的左側工具欄）。
· 如果某一個動作是核心動作，可以將其區別對待。例如網頁表單中的“提交”按鈕。核心動作是希望大部分用戶都需要（或期待）執行的動作。讓這個按鈕擁有更加強烈的圖形或視覺風格來讓它在顯得更為突出。
· 如果按鈕足夠多，而且它們都有小圖標，你也可以把它們放在工具條或者像工具條那樣的狹長條上，放置在頁面的頂部。
通過使用按鈕組可以避免界面上按鈕或鏈接過于擁擠混亂，也可以避免一長串冗長的動作列表看起來毫無關聯或區別。
通過這一模式，你可以創建一個較為清晰的元素層級結構：用戶可以一眼看出哪些動作是彼此相關的，哪些是重要的。
用戶需求：編輯設計文件中的對象
Sketch 也是個很典型的應用了按鈕組的設計工具。Sketch頂部的按鈕不少于15個， 有很多要理解和追查。 但是得益于精心的視覺和語義組織，界面按鈕始終保持一定的可理解性。
用戶需求：按自己需求對文件進行顯示修改和操作
這個案例顯示了來自 macOS 的 Finder 窗口的頂部按鈕組。 秉承其設計傳統，按鈕風格明顯。 導航組是放置在左側中的按鈕組。 布局相關的按鈕組放在了中間，文件操作相關的按鈕組放在了右側。這樣的設計使得界面變得易于理解和使用。
用戶需求：項目執行相關操作
這個案例顯示了 Webstorm 的頂部功能操作區。WebStorm 采用了按鈕組的模式，將項目執行的相關操作和Git相關的操作聚合在一起，中間使用了分割線進行了區分。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn