前言
說起按鈕，很多做設計的小伙伴是熟悉的不能再熟悉了，它是我們在設計界面時最常用、最重要的組件之一，也是易被忽略的元素之一，所以在設計之前，做好對按鈕組件的認識、了解非常有必要。
從我們有記憶認知開始，按鈕就時刻在和我們打交道，墻上的電燈開關、電視機的調節按鈕、遙控器的按鈕等等，這些物理按鈕不僅僅是當下UI按鈕組件的前身，且不會消失，依然會有很多非數字化的產品及機器設備在持續延用，不管如何演變，基本不會脫離實物參考。按鈕最吸引我們的莫過于通過簡單觸摸就能輕松滿足自己的行為需求，按鈕設計的直觀性及易用性會影響著人們完成一件事情的意愿及效率。
在UI設計中，如何完美的避開問題、把按鈕設計的更好，是每個設計師需要深思的問題。按鈕設計的好壞，將直接關系著用戶引流、觸發行動、產品轉化率等至關重要的問題。另外，精致的按鈕也會讓整個頁面的視覺提升檔次。本篇文章將對按鈕作出解析，介紹在設計按鈕時需要著重考慮的因素及設計標準，并將理論付諸于實踐。
分享目錄
一、按鈕的作用
二、按鈕的類型
三、按鈕的狀態
四、按鈕的大小及風格
五、常見誤區及避坑指南
六、總結
一、按鈕的作用
1. 什么是按鈕
在UI設計中，按鈕是一個明確指示交互行為動作的組件，主要用于觸發某一個即時操作，很多時候，我們需要采取下一步行動或返回到上一步，都要通過按鈕（部分場景可用手勢交互）來完成。
在視覺層面，按鈕的組成看起來很簡單，由一個底色塊/線框加上一組文案即可組成，但真正要將按鈕設計好，僅停留在視覺層面并不嚴謹，其大小、位置、色值、文案...等每一個細節的處理都關系著用戶的操作體驗，下面的這幾種情況大家肯定有碰到過：
2 按鈕有什么用
通常，我們在設計按鈕之前，需要詳細理解按鈕所存在的意義，哪里該加、哪里不該加、為什么要加，主要從以下幾點來體現按鈕的作用：
2.1 功能性操作
這種按鈕很常見，比如展開、收起、下拉、加減等，按鈕視覺較弱，重點強調該頁面的功能，突出主體信息，在操作之后會發生一些交互變化，這類按鈕主要起到功能形態的作用。
2.2 明確引導下一步操作
當用戶完成一個頁面的內容填充或信息確認，就會失去視覺焦點，而下一步按鈕就會聚焦視覺重心，通過文案告知用戶下一步該怎么做，常見的有保存、下一步、支付、確定...等。
另外，用戶需要完成某個任務，但同一個任務流程的信息、種類較多，這時就會通過分步驟、分頁的方式，并在每個步驟的末尾增加一個能起到上下銜接作用的按鈕，明確引導用戶進入下一步操作，以此來提升用戶完成整個任務的成功率。
2.3 培養行為習慣
如果在操作某個按鈕之后得到了一定的利益，且能持續為用戶帶來價值，那么不妨將這個按鈕設計的更醒目，并在同等級但不同的地方保持視覺的統一，持續培養用戶點擊習慣，當用戶下次再看到類似這種按鈕時，慣性思維就會引導點擊。
3 按鈕的組成
在大部分的認知中，最常見的按鈕就是一個底色塊加上一句文案就完成了，殊不知一個好的按鈕需要經過很多細節的把控，才能發揮出按鈕的最大作用。例如文案的長短/邊距、容器的大小/圓角、填充色的主/次之分...等，下面我們來看看一個按鈕到底是由哪些屬性、元素組成。
◇ 圓角：傳達出按鈕的氣質，決定用戶的視覺感受，最常見的為小圓角，也有較為嚴謹、力量型的全直角、卡通可愛、年輕化風格的全圓角。
◇ 圖標：用于按鈕含義的圖形化抽象表達，例如加載中、編輯；
◇ 容器：整個按鈕的載體，容納文案、圖標等元素；
◇ 邊框：確定按鈕的邊界，常用于次級按鈕描邊；
◇ 文案：用文字表達按鈕的含義，精簡文案；
◇ 背景：表達按鈕的當前狀態，對按鈕合理的使用主體色能有效傳播品牌氣質；
◇ 投影：讓按鈕具有層次感，配合漸變背景能體現出微質感的效果。
二、按鈕的類型
1 功能類型
按照功能屬性分類，可將按鈕類型分為流程控制和功能選項操作。
流程控制：常見的傳統按鈕，如支付、下一步、確定、保存等，容器承載著圖標、圖標+文案、文案。
功能選項：開關/加減控件、標簽欄/分類、狀態切換等，操作之后只針對當前頁面做出屬性的調整，不涉及流程的變化。
2 視覺樣式（橫向）
視覺樣式有所區別，在不同的頁面可能存在同等級的權重。
常規按鈕：最常見的按鈕，當同一個頁面出現多個常規按鈕時，會有主次之分；
虛線按鈕：常用于添加、上傳等操作；
文本按鈕：僅用文字作為觸發點，部分會用主色、右側箭頭、下劃線等方式突出。
3 層級分類（縱向）
高權重：帶有填充色的主操作按鈕，當同一個頁面存在多個按鈕，只允許存在一個高權重（主操作）按鈕；
中權重：帶邊框輪廓的概述按鈕，同一頁面可存在多個中權重的按鈕；
低權重：純文本按鈕，以及淺色填充+淺色文字的按鈕，同一頁面可存在多個低權重按鈕。
三、按鈕的狀態
在設計按鈕時，為了體現按鈕不同的具體含義，以及后續設計、開發的統一性，明確按鈕交互樣式是設計過程中不可缺少的重要組成部分。設計師需要在不干擾界面視覺的前提下，對每個按鈕的樣式、狀態有清晰的定義，與其他元素、布局區分開來，以確保按鈕的可供性。常見的狀態主要有以下幾種：
◇ 待激活狀態：需要完成一定的操作、或有一個以上必要的前置條件后才允許交互；
◇ 正常狀態：按鈕的正常顯示狀態，可進行交互操作；
◇ 點擊狀態：觸碰效果，表示按鈕正在進行交互且未結束，會在正常狀態的基礎上增加一個純黑色不且透明度為10%的蒙層，交互完成后，即會引發此按鈕的真實作用；
◇ 加載狀態：產生交互后沒有立即執行、或系統需要一定的時間才能執行完成；
◇ 禁用狀態：系統默認暫不允許操作、或需要用戶離開此頁面去完成一定的前置條件才能使用。
四、按鈕的大小及風格
1 按鈕的尺寸
在PC端設計按鈕時，因為鼠標的精準點擊，我們通常會將按鈕設計的小一些，同時也能讓整個界面看起來更加細膩，只要不影響操作，36px~48px范圍內的按鈕是比較常見的。但移動端的按鈕設計，我們要更多的考慮到物理尺寸，即手指（指尖）在操作時需占用的實際范圍。
iOS的設計規范中，將按鈕的最小點擊區域規定為44pt，一旦小于這個數值，操作時就會出現精準度較低的情況，導致操作失誤或無效。
在實際的iOS界面中，很多應用在設計按鈕時并未嚴格遵循最小44pt的這個標準，例如很多一、二級界面的次級功能入口，有些連30pt都不到，也并未對用戶造成多大的影響，可能是對應的功能權重、用戶點擊頻率都非常低的原因，還有一部分文字按鈕，其本身永遠都不可能達到最小的觸控標準（觸控熱區加大即可），所以關于按鈕的尺寸大小并非規定的很死板。
費茨定律告訴我們「目標尺寸越大，移動至目標所花費的時間就越短」，所以，在滿足手指觸控范圍的同時，還要根據所對應功能的權重占比來適當調節按鈕的大小。不難理解，當某個元素的尺寸越大就越吸引眼球，就更容易被視覺捕捉到，也更容易被「點擊」，精準度被降低的同時，也減少了用戶的操作成本。
我們以8像素柵格系統、iOS的2倍圖為例，較為常見的有：小型-64px、中型-80~88px、大型-98px、超大型-隨機這四種按鈕。
2 按鈕的風格
在UI設計中，幾乎每個頁面都存在按鈕，樣式、種類也有很多，但設計風格常見的也就幾種，例如扁平化、微質感、擬物化、新擬態（概念）...
2.1 扁平化按鈕
通常在容器中填充一個純色即可，沒有多余的視覺干擾，操作簡便，這種類型的按鈕一般在應用中用的最多。例如：工具型應用、B端應用等。
2.2 微質感按鈕
相比扁平化，填充漸變色再加上淺淺的投影，不僅能保持信息內容的簡潔、讓用戶產生更強的操作欲望，還能讓頁面具有品質感，更加耐看。例如：年輕化應用、娛樂類應用、兒童應用等。
2.3 擬物化按鈕
大多設計的很立體，3D質感、屬性樣式豐富多彩，參考現實世界中的事務或攝取應用場景中的某些元素，使其更加逼真，有較強的代入感。例如：游戲類應用、H5專題、運營banner等。
2.4 新擬態按鈕
2021年風靡一時，幾乎無人不知，但要想落地卻不太現實，實用性不強，也只能在飛機稿中出出風頭，隨著時間的流逝，逐漸銷聲匿跡，不知哪天會不會經改良后再次面世（當初扁平化問世，也是幾經波折，經多年改良才逐漸被大眾所接受）。目前只有少數工具類應用使用了新擬態，例如：計算器、AI設備控制、有道云筆記等。
五、常見誤區及避坑指南
1 主/次操作層級分明
當同一個頁面出現多個按鈕時，只允許存在一個主操作按鈕，其他不做特別設定。當然，如果次要操作較多，也不益過多的出現次級按鈕，可根據權重降級處理，以小圖標或文字按鈕的方式呈現。
2. 統一樣式
主/次操作按鈕要統一樣式，用戶需操作時，盡可能的減少其思考及選擇時間，按鈕應該迎合用戶固有認知及慣性思維，節省時間成本，提高操作效率。
3. 圓角值
在大多數界面設計中，我們通常所見到按鈕還是小圓角和全圓角居多，也有部分按鈕完全直角，需要根據產品的行業屬性與氣質來選擇最合適的圓角類型。不管如何，盡量避免大圓角（卡片除外）按鈕，不方不圓、不倫不類的，顯的不夠成熟也不好看。
3.1 小圓角
小圓角按鈕的圓角值通?？刂圃诟叨鹊?/5、1/6，兒童類型的應用也有1/4（較大）的，并非絕對值。如果習慣使用8像素網格，根據按鈕的尺寸大小，直接將圓角值固定在8px、16px、24px（較大）這幾個數值，能減少設計組件的數量，也利于開發做組件封裝后續調用。
3.2 全圓角
全圓角按鈕的圓角值固定為高度的1/2，或者在軟件的圓角設置中直接將數值拉到極限。
3.3 直角
不設圓角值，在PC端較為常見，也有部分較為嚴謹的移動端應用使用直角按鈕。
4. 按鈕中的文字
按鈕中的文字要便于用戶理解，不能過于陌生或繞口，用戶碰到不易理解的信息會產生困惑，甚至誤導用戶導致操作失誤從而造成損失。除此之外，文字還需要精簡，不能過多或折行且能合理的引導用戶完成操作。
上圖的文案歧義就很明顯，自以為聰明的設計師想要挽留用戶，刻意將主次按鈕樣式對換，希望用戶操作不成功，那么用戶在需要取消訂單時就疑惑了，到底是點擊「確定」還是主操作按鈕「取消」才能取消成功呢？或許稍加思考，用戶也能反應過來，但無疑增加了選擇難度、思考時間及操作成本。
5. 文字與按鈕比例
按鈕中的文字太大或太小都會影響用戶對信息接收的效率，大小比例需要適中。文字太大會感覺很擁擠（跟大家衣服買小了感覺一樣），沒有呼吸感，要給文字四周留下足夠的空間，同時文字太小會顯得小氣，看起來也會比較吃力，不利于信息接收。
6. 按鈕與其他組件的區分
設計好按鈕組件之后，頁面中的其他組件或元素要與按鈕有很明顯的區別，避免讓用戶產生不必要的誤解。
7. 彈窗主/次按鈕的位置
在彈窗中，主按鈕是在左？還是在右？這是一個爭論不休的問題，那么不爭了，在移動端的彈窗設計中，主按鈕靠右就行了，不一定絕對正確，但絕對不是錯的。根據調查數據顯示，單手使用右手操作手機的用戶比左手操作手機的用戶量高，且用戶也有一定的意識，左側為上一步、右側為下一步，頂部左側為返回，右側為保存或確定。
8. 無障礙設計
可訪問性是按鈕設計最重要目標之一，不僅要樣式統一，還應符合用戶的認知，讓用戶能快速知曉這個元素能否點擊？點擊之后會發生什么？甚至有種似曾相識的感覺。如果將按鈕樣式設計的與用戶認知有較大的偏差，不易于用戶理解。
9. 減少使用禁用按鈕
在表單設計中，大部分都需要用戶完成一定任務之后才能正常操作下一步按鈕，在完成之前，需少用禁用按鈕，在前面有講到「待激活狀態」，即在按鈕中填充淺淺的主體色等待用戶完成任務激活。
通常系統默認不允許操作或存在時間限制會用到填充為灰色的禁用按鈕，即便如此，也要盡量讓系統將其隱藏，萬不得已的情況下需要在按鈕附近說明情況，以免使用不當引起用戶的負面情緒。
10. 投影的使用
在給按鈕添加投影時，選擇灰色或純黑色加調整不同明度即可滿足基本效果，但如果想要更好的視覺體驗，可以基于按鈕本身的色值來調整，讓投影效果看起來更舒適，跟頁面更搭。另外，切勿過度使用投影，寧缺毋濫，若按鈕的投影太深，看起來粗糙臟亂，還不如不用，顏色較淺的按鈕盡量不使用投影，否則可能會影響按鈕的識別度，讓這個頁面看起來不夠清爽。
六、總結
對于設計師來說，按鈕作為設計組件之一，有很多細節容易被忽略，我們需要對每一個細小的元素進行深入思考，如論任何大小組件，都需要做到精益求精，才能給用戶帶來更好的使用體驗。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
以下內容主要分成兩大部分，第一是聊聊響應式和自適應的區別和原理，以及我們應該如何去設計響應式界面；第二部分也是比較關鍵的B端系統設計的核心，B端設計中臺完整構建過程的具體步驟，以及應用到的格式塔原則，和命名的一些注意事項，內容較多，大家可以根據上述目錄來選擇性閱讀。
簡單概括多端兼容設計的發展史，最早是桌面端，比如桌面的一些應用；后來出現了移動端，針對移動端大家用的都是WAP，指一種無線應用協議，大家在用手機瀏覽一些網站，會把網站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因為當時網絡不好，早在3G和2G時代移動端用的都是WAP；在2008年之后出現了響應式，也就是做一套代碼可以兼容三端（網頁、移動端、iPad）設備，在發展的同時也遇到很多問題，但響應式同時也遇到了很多問題；于是又出現了自適應，指不同的設備打開不同的頁面進行自適應，自適應能增加效率，但需要增加工作量；2017年以后直到現在看到最常用的就是漸進式，類似完整的像在使用一個APP。這是多端兼容設計的整體的發展。
可以理解成用戶在手機、電腦、ipad打開同一個界面，所呈現的界面是一樣的。需要考慮移動端設計和網頁端怎么通過一套代碼進行兼容。
自動布局算是響應式的一種，但平時看到很多響應式其實并不是真正的響應式，而是自動布局，因為界面在不同的設備用的是不同的模板，當我們用電腦打開呈現的是一套模板，而用手機打開則是另外一套模板，這種看起來是響應式，其實不是。因為當我在開發者模式下調節不同設備展示時，就會發現，其實是換了一個網址來根據不同的設備進行自適應的，而真正的響應式是不需要刷新的，在拖小窗口的時候就會變成手機端的那個樣子。
漸進式布局是近幾年比較新起的，這種布局設計，很像一個網站或者本身它就是一個網站，但用起來就像一個APP一樣，看到這里大家很容易相到，小程序就是漸進式布局得一種，小程序明顯是一個網頁，但通過技術的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時候感覺小程序就是一個APP，但核心技術還是web網頁。
響應式的原理是通過定位的方式來做響應式的各種開發，需要在頁面中至少標出這十個點：中心點，上下左右點，上左上右點和下左下右點，這幾個點其實就代表了做響應式和做布局相應的位置。這樣可能大家不容易理解，其實結合figma來看，這些點對應的就是這樣（如下圖），在figma中的布局點。設計師通過調節圖形的布局點，可以做到在頁面拉伸時，讓想動的元素跟隨變化，不動的元素靜止不動，這就是響應式的原理。換言之，我們做響應式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現的。
01、響應式
如下圖是響應式的優點和缺點。響應式其實就是只開發一套頁面，這個頁面兼容三端。雖然做了響應式，但如何響應是需要設計師去設計的。比如我們設計了一個移動端界面，然后全部做好對應的自動布局，再進行頁面拉伸，內容隨之會發生變化，比如當拉伸到1024*768的時候，也就是iPad的尺寸，就會發現局部在設計上有些不合實際情況，這時就需要設計師在對應尺寸的設計稿上進行內容上的微調，比如按鈕不可能那么長，就把按鈕設計的短一點。當繼續進行拉伸到1440網頁的寬度時，然后再酌情針對網頁尺寸的呈現樣式，局部進行尺寸的調整，比如文字和按鈕被拉伸到網頁版都需要居中對齊，電腦端的樣式就需要設計師重新排版了。
通常在B端系統，設計師需要做響應式設計時，往往是從大往小做設計，這也取決于這個B端產品是否需要進行移動端的設計，《B端設計總概二》中提到過什么情況下進行設計B端移動端。如果需要設計B端移動端，就需要我們將網頁改成移動端設計，比如B端的側邊欄導航在拉伸到移動端時，就會變成用一個折疊懸浮的iocn來替代等等這樣設計上的改變。在figma中，做三端拉伸時候，可以用斷點插件來進行演示，通過對斷點插件的設置，就可以完美的看到頁面在三端不同情況的適配呈現，斷點插件用來做演示非常方便。
02、自適應
如下圖是自適應的優點和缺點，其實就是一個項目開發三個頁面，分別做定制設計，網頁端、移動端和Ipad端。
我們都知道2021年也就是今年是我國新基建的元年，十四五規劃2035遠景目標里提到重點發展傳統企業數字化轉型，尤其是今年我們設計師更能深刻體會，C端和B端已經是完全兩個不同的行業，C端發展近十年，已經很難再做到創新上的突破，該做的功能和創新都已經做了，而B端這片藍海才剛剛開始發力，很多企業也都在考慮B端系統的搭建，降本提效率成了很多公司新的指標，因此數字化轉型重點在于B端系統探索，B端重點在于中臺的搭建！設計師通過設計中臺，構建出基本的業務類型，再分類到業務中，構建出不同的業務界面，所以設計中臺非常關鍵，很多公司經常會用這兩個系統去構建，Antdesign和Elemnet就是設計中臺，我們會發現用Antdesign可以做出很多的系統，那怎么進行設計中臺的設計呢？和我們設計師有什么樣的關聯度呢？帶著這個問題，我們深度探索B端設計中臺的落地！
概念：中臺是互聯網的術語，一般應用于大型企業，中國互聯網的變革永遠是從大型互聯網開始，大型互聯網公司引發了技術的變革，這也是中臺的興起，一般指搭建一個靈活快速應對變化的架構，快速實現前端提的需求，避免重復建設，達到提高工作效率目的。
作用：降本提效。如果沒有組件庫，普通設計師一天最多做十個頁面，再多就不太可能了，如果有組件化得產生，一天可以做一百個左右的界面。在面對B端系統這樣幾千個頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因為設計師設計的組件只是一個樣式，而前端需要把組件進行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復用，和前端代碼的復用，可以大大提高設計師的工作效率。
基本庫指的是一些色彩系統、字體系統、圖標系統、柵格系統、間距系統等等，之所以強調系統兩個字，有系統就要統一規則和統一規范，然后進行調用應用在系統中的各個地方，比如我們想調用一個顏色，不是去隨選用一個顏色，應該嚴格的從色彩系統中去調用，如果系統組件庫里沒有這個顏色，我們也絕對不可以使用，可以先用替代色做或者根據業務再進行補充顏色進組件庫為了后續的調用，這是一種比較嚴謹的使用方式。所以在建立組件庫的時候我們要考慮全面，組件庫中如果沒有相應的組件，我們應該試著反推一下，是否要加進組件庫中去，來進行系統的調用。在做中臺的過程中，我們一直使用Antdesign，我們對組件的名稱，組件的分類其實一點都不陌生，其實Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進行查看），所以并不是Antdesign組件庫形成了一定的規則，它也是在沿用別人的規則，而這些規則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現在這樣的組件庫，那中臺設計，首先要搭建基本庫，把基本庫里的基礎一些系統搭建好后，我們繼續去做擴展庫。
如下圖，擴展庫中包含了很多內容，比如分了四類，導航系統，數據錄入，數據展示和反饋系統。其中導航系統又包含了，面包屑導航、下拉菜單、導航菜單、頂部導航等等，包括后面的數據錄入、數據展示、反饋系統也包含了很多內容。我們做這樣的擴展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節Arco組件庫，因為它們面向的是系統級的解決方案，各行各業都可以用它，它面向的是一個大系統，也許我們只涉及到了其中的20%，因為也沒有一個系統能用到它所有的組件，所以我們自己在設計組件庫的時候，一定是按照我們自己項目的范圍去做組件庫，而不是做一個大而全的，大而全的組件庫對我們也沒有意義。它們做的是公共平臺，而我們要做的是一個專屬平臺。
形成完基本庫和擴展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時候用，比如我做了一個多選框，這個多選框應該什么時候用，是不是只要遇見一個選擇就去用多選框，肯定不是，應該加以說明什么時候用這個多選框。類似于是組件的設計說明。
最后再做一個案例庫，最佳實踐庫，具體組件什么時候用我們知道了，接著案例庫就是在告訴我們應該如何正確的使用，或者說的方法是什么。比如標簽的左對齊和右對齊，這種情況都對，什么時候用頂對齊，什么時候用左對齊，什么時候用右對齊呢？那么根據眼動儀實驗數據數據來看，并且結合給出一些工作中業務中的最佳實踐得案例放進去，給使用的人去做指引。
所以設計師做的事情，不僅僅是應用組件庫和創造組價庫，還應該指導其他設計師，指導開發人員在去復用每個頁面組件的的時候，應該怎么正確的使用，這也是在B端設計中一個關鍵的環節，同時我們的視覺系統一定也是和業務有關聯度的，所以在B端中做設計一定也不會脫離業務去做，我們一定要聯系到實際的業務場景中，這個業務場景指的就是業務和視覺的結合，在做C端的時候，業務場景一定不會比B端多，C端的業務場景大多是定制化的業務場景，它要求的是個性化，不要求通用，盡量得個性化，比如圖標、按鈕、頁面，而B端需要統一化，中臺組件庫的落地，可以大大提高設計師的工作效率和開發人員的協同效率，嚴謹的調用組件使用組件，可以使得系統頁面保持高度的一致。
如圖1：可以看出縱列的關系更緊密，因為縱間距小于行間距。
如圖2：可以看出行間距大于列間距，它得橫向關系更加緊密。通過圖中這樣的視覺設計為什么會感覺間距更加緊密呢？這屬于用戶心理學的應用，如果元素相鄰的更近，元素之間的關系就會更加的緊密。
如圖3：如果元素相鄰的關系都是保持一樣的，那么它們的關系是相對對等的。
由此可以得出結論，如果相鄰的關系越近，它們的關聯度就越近，如果相鄰的越遠，它們的關聯度就越遠。
應用案例：如圖4卡片中得標題和內容，設計中把標題和內容進行區分，所以我們會做大量的留白，這樣的留白就會讓信息結構具有層次感，層次感就是指它們信息結構的關聯度，如果想讓它們有關聯度，就讓它們距離近一點不要做區分，如果不想讓它們有關聯度，或者關聯度出現一個等級的區分，那么就可以加一條線，讓它們之間的關聯度分隔開。這就是格式塔接近性的應用。
如圖5：如果去區分右邊的形狀，通常我們會根據形狀進行區分，因為人的潛意識會認為相似的形狀會更有相關的分類性。這就是格式塔中的相似性原則。
應用案例：如果文字的標題大小是保持一致的，包括它有統一的大小，統一的色彩，統一的字號，那系統中的其他同樣功能的地方，都應該用統一的文字，這就是格式塔相似性的應用，比如圖標也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標進行表達，圖標之間的設計才具有相似性。
如圖6：可以看到有一個L，是主體與背景進行了區分，如果在設計的時候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨特，或者將背景的顏色變得更加分明，這樣就可以做到那個L看的更加明顯。這就是主題與背景區分原則。
應用案例：比如警告彈出，可以用色彩去區分，目標就是讓用戶看的更加得清晰，當警告的時候給用戶一個警告的信息，當成功的時候給用戶一個成功的信息。還有類似對話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關系的原理。因此應用在我們設計系統中，前景和背景進行區分的時候，我們就可以通過色彩進行區分，色彩的區分要保持統一，比如背景色彩透明度50%同時加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個平面上，距離平面越近，它得陰影越短，距離平面越遠，它得陰影越長，這也是陰影的層級關系。
如圖7：可以看出這是一個四分之一的圓形。
如圖8：這個圖可以看出是一個五角星。
封閉性應用案例：當一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候，并不影響人們對這個形狀額外得認知，一定會腦補出另外一個形狀，這個原則和我們UI的關系是什么呢？比如一個loading，半圓一直在旋轉，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當前的進程和位置，封閉性原則通常應用在圖標的設計，圖表的設計和步驟條的設計中。
如圖9：可以看出用一些簡單得形狀來體現，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個是一組，可以看出它們具有連續性；另外一組三角形箭頭指向右下角，可以看出它們是連續的一組。不同的形狀會有連續性，箭頭也特別有指向性，這就是為什么返回和前要進放在不同的位置，當我們的數據需要有連續的時候，我們也要使用相似的形狀來表達，這就是連續性原則的應用。
同理如圖10：連續性一定是要有連續等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續等階變化，通過色彩的透明度也可以做到連續性。
很多公司或者不同公司有不同的命名方式，這個需要和團隊開發提前做溝通，主要以方便開發習慣操作為主，如果不命名也不能非得說成是錯誤的，命名可以理解成是一件錦上添花的事情，因為一切都以效率優先，命名自然會影響工作效率，通常情況，組件的命名可以分成組件的名稱、級別、尺寸、狀態，這樣的命名順序來進行，這樣命名開發使用也比較方便，因為是按照了開發的統一規則來進行命名的。如圖所示：
當英文不好的時候，推薦大家記常用組件英文名，以及常用狀態名、級別名、內部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~
至此B端系統設計總概系列為終結篇，回顧第一篇主要內容是如何正確設計組件庫，B端業務調研的具體過程步驟，以及視覺規范的建立，可以看出第一篇屬于B端設計的方法論或者設計指導，也是為開展B端設計前的一些準備工作；回顧第二篇總概主要內容是如何設計表單、表格、圖標、儀表盤這些經常用到的設計難點，第二篇更加講究設計落地過程中遇到的疑難雜癥，專業技法；回顧當前總概三，主要內容就是中臺規范的建立和自適應、響應式適配的難點，主要是成系統的B端設計步驟。我們都知道B端市場剛剛打開，而且當下對B端設計師的需求還遠遠不能滿足我國現代化建設，數字化推進這么的大市場，作為UIUX，更早的拓寬一條路是我們當下必要的選擇，謝謝閱讀，祝愿各位2022乘風破浪，B端設計學有所成，如虎生翼！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
在產品設計過程中，了解需求是產品落地的基礎之一，而在B端產品中，需求可能會涉及到業務需求、用戶需求及管理需求三個方面，具體該如何保障B端需求的快速洞察、快速實現呢？不妨看看作者的總結和梳理。
需求是產品存在的基礎，貫穿整個產品的整個生命周期。本文聊聊需求的管理方法論。需求管理方法論概念包含了，需求調研和挖掘、需求分析、需求管理（輸出需求文檔），也可以用一句話來說明，就是收集客戶想要什么，最終確定實際做什么。
本文會涉及到面試過程中問到的需求相關內容，可以先收藏后細品。
在我看來，B端需求主要分為業務需求、用戶需求和管理需求。
在下文中會用這三類需求進行詳細說明。
1）調研的8大科學方法已經前面寫過，這邊介紹一下調研時的幾個小技巧。
① 用圖形作為調研助手
用圖形會引導大家的討論方向一致，收斂，不易跑題。圖形會引起參與者的視覺共鳴，從而加速、加深理解的程度。圖形的邏輯清晰，可以避免討論結果似是而非的現象，為后續需求變動提供證據（甩鍋）。
② 找到調研的合適顆粒度
對于顆粒度的把握，是沒有一個定數，但如果調研結束后，不需要再向客戶進行咨詢就可以進行設計工作了，那么這個調研就做到位了。第一次調研現場，顆粒度盡量越細越好，因為后續的調研會增加更多成本。
2）業務流程優化的一個方法-ESEIA方法ESEIA流程優化方法是由五個首字母組成，包括E（Eliminate）清除、S（Simplify）簡化、E（Establish）增加、I（Integrate）整合和A（Automate）自動化，用來減少流程中的非增值活動，增加流程中的增值活動，然后進行整合和自動化，如圖所示。
案例：藍湖SaaS，是一款針對產品設計到開發階段的流程優化工具，從產品原型設計——原型上傳——UI設計師打開——根據原型設計——設計稿切圖——打包上傳——程序員下載——打開設計稿并查找相應切圖——開發時不定時查詢，一系列流程中找到可清除的不增值的活動，簡化相應活動，增加增值的活動（在線編輯和設計），整合后使流程連貫，數據上云，讓整個上傳下載自動化，提高流程處理速度和質量。
需求的來源會有各種不同的渠道，有內部同事、領導、自己產生的需求。也有外部市場、用戶、競品分析、行業規范等產生的需求。我們需要先把他們產生的需求分類，擺正位置，才能對癥下藥。不管是哪個渠道來的需求，在上文有說到，可分為三類，業務需求、管理需求、用戶需求。業務需求和管理需求分別來自于業務流程優化和管理流程方面，如圖（房產營銷部分業務流程）。
1）業務需求，那需要從直接相關方和上下游的間接相關方來看，比如房產營銷中的客戶鎖定期和解鎖期，就會可能影響到銷售、財務、采購、管理者等各個相關方，需要每個相關方都接觸了解后才能設計。
2）管理需求，主要在上層管理的需求，一般只需要針對相關領導的需求就行，但需要知道需求方真實的需求，和該需求是否能夠實現。由于管理流程是附加于業務流程之上的，所以如果業務流程沒有能夠產生這個管理需求的能力，那就需要從業務流程中去重新審視這個管理需求的真實性和可行性。
3）用戶需求，這個就比較簡單了，主要就是使用習慣，交互等事宜?？梢詮耐粚蛹壍闹苯酉嚓P方了解后進行分析。
1）方法一：邏輯演繹
當產品經理不清楚客戶的業務但又感到有問題時，可以用邏輯推演來判斷，通過邏輯推演可判斷客戶的需求是不是合理的、正確的。
例如：為什么需要做這個功能？缺少這個功能會如何？這個功能與其上游的工作流的關系，與下游的工作流的關系？思考新需求對現有業務邏輯的影響，會不會影響現有業務功能，當然也同樣要考慮到一些潛在的影響，這同樣是你對需求評估的一個重要標準。
2）多維度觀察
產品經理與客戶在專業知識方面是不對等的，客戶并不知道他提的需求將來在系統中會帶來什么后果，產品經理也未必聽懂了客戶的真實需求，因此對客戶提的“表面需求”要經過側面的判斷才能確定為“真實需求”。為了解決這個問題，可以參考使用5W1H分析法幫助做好判斷工作：
在需求調研中使用5W1H方法，首先要理解的是What、How，而作為判斷的重要依據的是Why，其他Where、When、Who是附屬信息，沒有經驗的產品經理只會從正面進行調研，即詢問“做什么”“怎么做”，但是最為重要的“為什么做（Why）”卻往往不問，這樣就會失去多維度觀察需求的機會，也同時失去了識別需求的虛實的機會。
3）價值判斷
對于復雜的、規模較大的需求，用簡單的、操作層面的能夠做評估的依據難以確定是否是真實的需求，可以用“目的、價值和功能”三要素來分析和判斷。目標，客戶的需求目標是什么？價值，確認該目標達成后，客戶可以獲得什么價值？功能，做什么功能可支持該價值的實現？
如果針對某個需求的判斷符合下述條件，那么它就可能不是真實的需求。
從各個渠道來的需求，經過上述的分析后，可以放入到需求池中。需求池里的需求主要有：
過濾了一些偽需求，通過挖掘知道了用戶的真實目的，確定了需求方意愿度，明確了需求價值點，根據需求價值來提供解決方案，整理出了需求池，接下來就是對需求的優先級排序：
1）從需求分類的層級來排序，在B端產品中，因為業務需求是所有需求的底層，所有業務需求是第一位的，然后才是管理需求，最后才是用戶需求。這就是為什么很多B端產品不講究交互設計，而在業務流程上做了很大的投入。
2）可以從兩個緯度四個象限進行劃分，一個是緊急程度，一個是重要程度。按照優先級劃分為重要緊急、不重要緊急、重要不緊急、不重要不緊急。
如果產品在0-1階段，那根據KANO模型的基本型需求>期望型需求>興奮型需求來判斷，如果產品在1-N的迭代期，根據，產品價值大實現成本低>產品價值大實現成本高>產品價值小實現成本低>產品價值小實現成本高來判斷（圖來自網絡）。
功能需求整理輸出產品方案，做需求文檔輸出時，為了全面考慮產品方案的邏輯完整性和流程的完整性，可用以下三個點來自查自檢。
1）前置條件：觸發該流程的前提條件，如領取優惠券的前置條件為“注冊且登錄賬號”，甚至還有其他比如是否是新用戶等等。
2）數據來源：流程中數據來源，如審核功能中：審核人員審批下級發起的審核單。審核人員的操作流程中，下部發起審核產生審批單就是審核人員的操作流程中的數據來源；數據來源通常是在發生數據流轉的場景下需要進行說明。
3）角色及權限：即用戶在系統中承擔的作用的抽象，是否已經把功能抽象到權限中去，這樣可針對權限的設置來分配某些角色可以用，某些角色不可以用。
1）事件：主要是指功能的交互規則及邏輯判斷。
這個模塊用來說明用戶和系統之間發生的交互。交互規則是泛指的交互規則，包含功能的頁面布局、觸發功能的動作及觸發后的交互效果；邏輯判斷則是指當用戶在前端發生行為，系統對用戶行為進行識別、判斷并返回相應的動作的過程。
2）觸發反饋：指用戶與系統完成交互后，用戶和系統會得到什么樣的反饋及產生什么樣的數據和結果。
3）異常處理：是對主流程補充，我們盡可能全的羅列并寫清楚異常流程時，可以有效避免在產品設計時的場景遺漏。異常流程的梳理建議是參考測試同事的正反例原則。
1）數據埋點：埋點就不多進行贅述，但不管是采用第三方系統還是自己的埋點體系，都要做好數據分類，后續提取數據時能減少很多功夫。
2）數據需求：主要為業務方和產品經理在使用和運營提供決策依據，在設計產品方案時一定要規劃相對的監控數據指標，以便于后續運營和迭代時有數據進行支撐。
3）數據字典：不要出現這個數據在這是姓名，到另外一個頁面成為了用戶名這樣的事情。以上，是我對B端產品（項目）的理解，后續會對業務需求、管理需求、用戶需求分別分析一下。
文章來源：人人都是產品經理 作者：pm老潘
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著媒體發展，品牌廣告演變出眾多創新十足、彰顯品牌調性的創意。廣告創意日益精進的同時用戶體驗閾值也不斷提升，如何實現創意突破、觸動用戶心弦、實現用戶體驗與商業價值的雙贏是品牌廣告面臨的挑戰。
百度品牌廣告為尋求自我突破，塑造對用戶有價值、對客戶強權益的新型廣告形態，從全局進行思考，打破現有樣式的局限，進行創新形態重構。我們將結合卡間聯動的創新實踐分享品牌廣告的創意探索。
超級品專是品牌廣告的重要產品形態，通過品牌廣告結合自然搜索結果，逐步幫助客戶構建在百度搜索生態的品牌運營陣地，同時給用戶帶來更完整的品牌信息獲取滿足（下圖左）。在實際運用中發現，超級品專在樣式上希望進一步做突破：
1）沉浸感：提升下方白色組卡品牌調性。
2）觸達率：提升下方組卡的觸達及感知。
基于以上分析，我們進行了系統性的樣式創新，推出卡間聯動創新形態，該形態的本質在于通過彩卡形態提升沉浸感，通過互動化的炫動浮層動效引導用戶下滑瀏覽探索，從而提升品宣和數據效果，達到品效雙贏的終極目標。
1. 整體視覺升級，沉浸式彩卡，突顯品牌調性
界面背景上做了多種設計嘗試，將白卡區升級為彩卡，提取頭卡物料進行智能取色，使頭卡和下方組卡更融合，強化整體性，提升沉浸感，將整體區域打造成“品牌運營陣地”。
2. 首屏強動效吸引，提升視覺沖擊力，增強品牌認知
首屏以動效形式展現品牌主推信息，加強用戶感知，使用戶快速理解品牌亮點，獲取品牌信息。此外，我們針對不同行業、不同營銷目標，以差異化的動效形式作為品牌服務的延伸，增強視覺沖擊力，突顯產品亮點，強化品牌認知。
3.下滑展現動畫，強化品牌賣點，激發用戶探索興趣
組卡區結合品牌信息，根據用戶搜索品牌的訴求和目標，強化品牌的 2-3 個賣點，通過用戶下滑操作觸發一段動畫，引導視覺動線持續向下，玩法上增加了驚喜感，激發了用戶的探索興趣，吸引用戶關注到價值信息后形成點擊轉化。
4. 控制展現時長與展現頻次，減少對用戶的干擾，注重用戶體驗
前續通過動效傳遞品牌信息價值，同時我們還以不干擾用戶操作為目標，控制動效展現時長及展現頻率，讓用戶更專注并沉浸于內容本身，體驗更加友好。
那么卡間聯動設計創新是否真正實現品效雙贏？實現商業價值與用戶體驗的共贏？我們通過線上數據分析和用戶體驗調研，來揭秘卡間聯動效果。
1. 數據分析顯示：有效提升轉化效果和停留時長
首發客戶來自汽車行業，通過該客戶投放超級品專和卡間聯動樣式的實驗對比，后者數據顯著提升，點擊率平均提升 11%，停留時長提升 20.2%。
2. 定性調研顯示：有效激發用戶興趣，增強品牌認知和記憶
在調研方法的選擇上，考慮到卡間聯動的設計創新效果與用戶視覺注視息息相關，因此，我們引入眼動追蹤技術，通過記錄用戶的視覺注視過程，獲取客觀數據，同時結合問卷評分和深度訪談，從主客觀全面了解用戶的真實體驗感受。
在調研用戶的選擇上，為了找到最具代表性的目標用戶，我們根據行業用戶畫像設定年齡和性別配比，同時結合百度 App 使用習慣進行篩選。
評估維度的選擇，重點參考了廣告效果評估理論模型（AIDMA 模型），該模型闡述了用戶對品牌從“注意”到“行為”轉變的心理過程，基于該心理機制，結合品牌廣告關注品牌吸引和印象增強的特點，從中提煉了注意興趣、情感偏好、記憶效果三個維度來衡量品牌宣傳效果。
關于這個模型的詳細介紹：
在實驗設計上，我們對比了超級品專和卡間聯動樣式。調研結果如下：
1. 注意興趣：卡間聯動吸引用戶關注，引起用戶興趣，可提升品牌宣傳效果
卡間聯動能有效提升用戶注意興趣，整卡的注視時長提升 37.5%。用戶在瀏覽整頁過程中，分配更多的時間在卡間聯動樣式區域，注視時間占比從 46.6%提升至 55.8%，增幅 19.7%，注意吸引提升效果明顯。
進一步細分數據發現，卡間聯動首屏和下方組卡注視時長均有所提升，其中首屏動效最先吸引用戶，提升效果更明顯。
2. 情感偏好：卡間聯動用戶主觀偏好更高，增強用戶對品牌的印象
整體上，用戶對卡間聯動表現出更高的情感偏好，其中，卡間聯動廣告設計感和驚喜感提升效果最好，評分提升高于 50%。
結合來自用戶的主觀反饋可以看到，卡間聯動提升用戶情感偏好的原因主要為動效生動形象，互動性強，能更好的突出品牌特征，傳達品牌調性。
3. 記憶效果：卡間聯動視覺沖擊力強，有互動感，用戶印象更深刻，品牌記憶效果更好
卡間聯動通過動效突出品牌賣點，用戶可回憶起更多的品牌細節，相較于超級品專，用戶記憶印象更深刻。
綜上，卡間聯動設計樣式，在效果數據和品牌宣傳上均有不錯的表現，是品牌廣告“品效雙贏”的一次成功嘗試。我們不僅考慮樣式的精品化，更注重行業的通用性和規模化，目前卡間聯動樣式已覆蓋了汽車、旅游、食品飲料、奢侈品等行業客戶的通用訴求，滿足新品宣發、賣點展示等多維度營銷訴求。
同時最大程度降低物料制作難度，賦能客戶低成本實現創意表達，如汽車行業客戶僅需提供汽車前視圖、側視圖、頂視圖三張圖片，即可生成炫酷的動效效果，快速投放。
在品牌廣告自我突破和創新發展的道路上，我們也將繼續探索、持續優化，始終不變的初心是，用設計創新的力量，提升用戶體驗，創造價值。
文章來源：站酷 作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“時間”作為人機交互界面中經常出現的元素，本質上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯網產品時會發現，關于“時間”的顯示狀態或形式在不同場景、不同頁面里往往是不太一樣的，這是出于怎樣的考慮呢？今天我們就來聊一聊，如何在產品設計中把握“時間”顯示的訣竅，讓其在頁面中發揮最大的作用。
按照“時間”元素在頁面中的出現場景和所起到的作用，可以大致歸為以下幾類：
時間作為描述整個事件的重要組成部分，缺失后會對原本所要傳達的內容產生嚴重的影響，進而影響用戶的使用預期和結果，比方說用戶可能不能以一個較低的價格完成商品購買，或錯過了產品發布會的時間。
指用戶本人作為行為主體或行為的接收對象，在某一動作發生后為其所打上的時間標記，比方說“我”購買商品下單的時間或收到一封郵件的時間。
用戶在使用產品進行內容消費時，時間作為該條內容的附屬信息，起到補充說明的作用，比方說一條短視頻或新聞的發布時間。
在上面的案例中，我們會發現“時間”在對應場景里所發揮的作用不同，用戶在使用產品時往往對時間存在不一樣的關注程度。因此我們在做頁面設計時，要根據具體場景和用戶訴求判斷“時間”元素的重要性和優先級，通常情況下：時間作為事件的關鍵構成要素＞行為的時間標記＞內容的附屬信息，之后再思考用什么樣的設計形式去展示來達到我們的目標。
“時間”的呈現方式和運用技巧
在討論“時間”元素的設計之前，我們先共識一些有關時間的理解和概念。時間可以劃分為“時間點”和“時間段”兩個維度，類似我們高中物理時學過的“時刻”和”時間間隔“的概念。
拿開會舉例子：“下午 4:30 會議開始”、“下午 6:00 會議結束”描述的是事件開始、結束的時間點，而“整個會議持續 1.5 小時”、“會議時間為下午 4:30-6:00”描述的是事件過程的時間段；但是，我們在會議開始時也可以這樣講“會議將在 1.5 小時后結束”。
通過上面的例子我們可以發下，同樣是描述一件事情，運用不同的時間點、時間段的方式去表達，意思一樣但卻傳遞出不一樣的情感，并且兩者存在如下的“換算”關系：
1）時間段加上定語會變成時間點（但同樣是時間點，“下午 6:00”是絕對時間，而“1.5 小時后”是相對時間，剛好對應到我們設計時兩種時間戳類型）；
2）兩個時間點之間則表示時間段。
所以，我們在平時表達或設計時，要先想清楚用“時間”是想側重表達某一事件、動作發生的即刻時間節點？還是想描述其所持續的時間過程？之后我們再針對不同語境去選取合適的文案和呈現方式。
時間的呈現方式離不開：時間戳類型、時間顯示格式、時間顆粒度。其中，時間顆粒度指的是描述時間的最小單位，往往顆粒度越細，給用戶傳達的確定感越強（如轉賬時間是 12 日 15:15:20），對用戶的激勵作用越明顯（如距搶購結束僅剩 00 時 01 分 23.6 秒）。
1. 絕對時間戳
絕對時間可理解為事物發生時的確切時間，由具體日期（年、月、日）和時間（時、分、秒）組成。使用絕對時間戳的優勢是信息傳達精準，顯得正式，給人確定感和安全感，同時排布規整，便于形成認知習慣；但缺點是內容顯示過長不利于閱讀，并且占用空間較大。
在時間顯示格式的選擇上，為了避免混淆，推薦使用文字格式或“-”分隔符來分隔日期，而“/”分隔符在不同國家有不同的展示順序習慣，容易造成誤解，盡量少用。
時間顆粒度的選擇依情況而定，一般場景總結如下：
2. 相對時間戳
相對時間在產品設計領域通常是指內容生產、到達、或狀態發生改變時，距當前時間點的時間差值，多用于 push 通知、信息流產品，側重強調內容的時效性；而“倒計時”也算相對時間的一種，側重營造時間的緊迫感。使用相對時間戳的優勢是用戶辨識、理解成本低，不用通過計算來判斷時間過去或還剩下多久；缺點是不夠精確、正式，并很難衡量兩個時間點的臨近性。
在使用相對時間時，要注意格式友好。時間單位可隨著時間的推移自動改變；數字不要過多，盡量取整；并且可設置其與絕對時間轉換的臨界點。
在設計界面中的“時間”元素時，要遵循場景貼合、便于閱讀理解的總體原則；之后根據場景和目標，再選取合適的“時間”呈現方式（包括時間戳類型、時間顯示格式、時間顆粒度）。
當時間作為“A.事件的關鍵構成要素”時
一般情況下使用絕對時間，并且要看是為了強調某一關鍵時間節點，還是側重表達整個持續過程。此外，選用關聯場景的文案或者運用倒計時（相對時間）的形式，可一定程度上促進用戶更加集中注意力，提升對信息的關注度，并達到特殊的激勵作用和轉化效果。
當時間作為“B.行為的時間標記”時
該場景通常是為了追求確定感，通過提供精準的時間和日期便于用戶定位到過去或將來的某個時間點（段）去查找、回顧相應內容，因此大多數采用絕對時間，時間顆粒度依具體情況而定。
當時間作為“C.內容的附屬信息”時
如果所設計的產品供給內容的更新速度快，用戶活躍度高，并且此時內容的時間信息準確性不那么重要反而更側重于內容的時效性，那么通常會使用相對時間。部分信息流產品（比如新聞資訊類、社區類）會在列表頁使用相對時間，在詳情頁使用絕對時間，時間顆粒度也是依情況而定；并且會隨著時間推移，在某一時間節點前把相對時間轉換為絕對時間。
文章來源：優設 作者：VMIC UED
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們在周圍的世界中看到了許多熟悉的設計模式。例如，大多數道路用實線或條紋線分隔車道。還有交通燈和道路標志可以幫助您在道路上行駛。如果每個國家/地區使用不同的系統，司機將不得不為他們想要駕車經過的每個國家/地區學習新的駕駛模式——但這不切實際！
UX 設計模式的工作原理類似。它們使用戶無需學習新系統即可熟悉瀏覽數字產品或網頁。
什么是用戶體驗設計模式？
UX 設計模式是用于構建用戶界面的常見構建塊。設計師使用 UX 設計模式作為可重用組件來解決常見的可用性問題。
例如，我們經?？吹降囊环N設計模式是面包屑。面包屑向用戶顯示他們所在的頁面以及返回主頁的路徑。
UX 設計模式如何改善用戶體驗
設計模式為設計人員提供了構建塊以更快地創建用戶界面，但它們也增強了用戶體驗。
UX 設計模式通常遵循用戶熟悉的通用設計標準，從而減少學習和瀏覽新產品或網站所需的時間和認知負擔。
在《我們如何決定》一書中，作者喬納·萊勒 (Jonah Lehrer) 寫道，識別熟悉的模式會釋放出多巴胺——一種與動機、獎勵、記憶和注意力有關的化學物質。當用戶體驗模式按預期工作時，多巴胺命中會增加。
使用有效的UX 設計心理學技術的設計師，例如熟悉的 UI 設計模式，可以增強用戶體驗并使產品交互更加愉快。
UX 和 UI 模式之間的差異
大多數設計師交替使用UX 模式和UI 模式這兩個術語，因為區別很小，有很多重疊，并且可能會引起混淆！
UX 模式：用戶流和導航的可重用模式——在社交媒體平臺或網站上無限或連續滾動。用戶認識到他們可以向下滾動以刷新頁面。
UI 模式：用于視覺和交互設計的可重用模式——一個漢堡圖標。用戶知道漢堡包圖標將打開導航。
何時以及如何應用設計模式
知道何時使用設計模式對于產品設計和用戶體驗至關重要。設計人員必須僅在有明確的可用性原因時才使用設計模式。
以下是識別用戶需求和應用設計模式的四步、以問題為中心的方法：
查明問題——您可以通過分析和可用性測試的組合來識別問題。例如，您注意到在獲取客戶詳細信息時，您的產品注冊流程有很高的流失率。通過可用性測試，您了解到一個常見的痛點是注冊過程耗時太長——您的注冊表單要求填寫全名、電子郵件、年齡、性別、城市和手機號碼（其中許多細節與使用產品無關） 。
通過市場和競爭對手研究找到解決方案——尋找競爭對手和流行的設計庫，以找到常見的 UI 模式來解決您的問題?；氐轿覀兩厦娴睦樱鷷l現競爭對手通常只在注冊時詢問用戶的全名和電子郵件地址。它們還允許用戶使用社交媒體帳戶進行注冊和登錄，從而簡化注冊流程。
自定義設計模式——您必須自定義新的設計模式以匹配您的品牌和現有設計系統。對于我們的用戶注冊示例，此自定義可能包括調整輸入、社交媒體按鈕和提交按鈕的圓角半徑。占位符文本、輸入標簽和錯誤/成功消息將使用您的樣式指南中的顏色。
測試您的設計模式——最后，您必須始終測試新的設計模式實現，以確保它們滿足可用性和品牌要求。
上面的例子展示了可用性測試的重要性——識別和應用用戶界面設計模式以測試開始和結束。
不要因為競爭對手有一個設計模式或者你認為這是正確的做法就添加一個設計模式。例如，您的網頁設計是否需要面包屑導航？對于電子商務，可能有必要讓用戶返回到產品類別或知道他們在結賬序列中的位置。但是，對于大多數其他網站，它只是添加了額外的數據點供用戶處理。
UX 設計模式的常見示例
設計模式分為六大類：
A. 數據輸入輸出
B. 內容結構
C. 導航
D. 社交媒體和分享
E. 激勵
F. 等級制度
數據輸入和輸出
數據輸入和輸出是最常見的用戶/產品交互之一。用戶輸入信息，系統返回數據或完成一個動作。
一個很好的例子是許多網站和應用程序使用的日期選擇器。盡管它們看起來略有不同，但大多數日期選擇器顯示類似的布局和功能——標題中的月/年、星期幾和日期。
當用戶單擊一個日期時，它會突出顯示以選擇。最后，有一個 CTA（有時是一個取消按鈕），用戶可以在完成并準備繼續時單擊。
數據輸入和輸出的其他示例包括：
a) 表單提交
b) 成功/失敗消息
c) 應用通知
d) 進度條/步驟
內容結構
你有沒有注意到大多數界面使用類似的塊布局和圖像縮略圖？或者，管理界面的左側導航面板和右側的內容如何？
使用這些熟悉的內容結構和 UI 模式可以幫助用戶快速瀏覽新的數字產品或網站。目標是最大限度地減少摩擦（例如學習新界面），以獲得無縫和愉快的用戶體驗。
導航
熟悉的 UI 模式可以幫助用戶輕松瀏覽網站或數字產品。桌面和移動界面有不同的導航模式。
例如，主導航位于桌面網站或應用程序的標題中或左側。在移動應用程序中，主導航欄位于頁腳中，只需用拇指觸碰即可。
無限或連續滾動是 Instagram 和 Pinterest 使用的典型導航設計模式。當用戶滾動時，系統會刷新以顯示更多內容。這種設計模式很熟悉并增強了用戶體驗，因為用戶不需要單擊下一步按鈕或分頁來查看更多內容。
社交媒體與分享
設計師可以使用多種社交媒體和共享設計模式，包括：
a) 鏈接的品牌社交媒體圖標
b) 共享圖標 - 向右彎曲的箭頭或三個點的共享圖標
c) 引言——用引號引用此人的姓名和形象
這些熟悉的設計模式可幫助用戶找到社會認同，以建立對您的產品和品牌的信任。
這些設計模式利用心理學，鼓勵用戶執行所需的操作。這里的目標是在用戶和產品之間建立聯系。
激勵
激勵 UX 模式利用設計心理學來鼓勵用戶執行任務和操作，從而創建用戶/產品關系。
設計師鼓勵使用設計模式通過積極的反饋、認知、游戲化等來吸引用戶。
例如，游戲化模式鼓勵用戶邀請朋友來獲得獎勵。UI 模式將通過 CTA 向用戶顯示他們當前的積分，以邀請更多朋友賺取更多。
等級制度
層次結構模式類似于內容結構，因為它們為用戶創造了即時的視覺熟悉度，以便快速瀏覽界面并知道如何完成所需的操作。
博客的兩種常見層次結構模式包括標題和目錄。用戶可以滾動頁面以快速找到他們想要的內容或使用目錄跳轉到特定部分。
面包屑是電子商務網站用來幫助用戶瀏覽產品頁面和結賬流程的另一種層次結構模式。
總結
UX設計模式是用戶體驗的重要組成部分，因為它們最大限度地減少了產品的學習曲線和人類認知負擔。設計師必須知道何時使用這些 UX 設計模式，而不僅僅是出于習慣或模仿競爭對手而實施它們。
分析和可用性研究可幫助設計人員確定界面中缺少哪些 UX 模式，然后測試他們是否實施了正確的模式。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021年，標志設計師朝著更大膽、更具創新性的設計邁出了一大步。與平面設計趨勢類似，品牌推廣大量采用軟循環動畫和鮮艷的配色方案。它還開辟了實驗排版，鼓勵創造性思維重新審視標志設計。
2022年的標志設計趨勢很可能會延續這一大趨勢，我們希望看到上述美學在全球范圍內得到重塑。您會看到設計師同樣選擇極簡主義和卡通標志、3D 和平面標志、花卉和文字標志。我們認為2021年是創作自由的一年。然而，看起來在2022年，我們將看到它真正的肆無忌憚。
1) 簡單的幾何圖形和基本形狀
2) 高大的標志
3) 飽和顏色和漸變
4) 象征主義和極簡主義代替現實主義
5) 涂鴉和草圖
6) 粗體字標標志
7) 無襯線標志
8) 花藝和微妙的裝飾
9) 黑白標志
10) 3D與平面樣式
簡單的幾何圖形和基本形狀
在2022年，擁有基于復雜圖形的標志幾乎會很少見。此類標志通常難以記住，客戶可能會很難發現在品牌與其圖形表示之間的聯系。對于尋求加強存在感和提高品牌知名度的大企業來說，這可能是一個巨大的問題。因此，公司傾向于拒絕此類標志，而傾向于使用一些基本的東西。
基本的幾何形狀是各種三角形、圓形、正方形、點和線，它們使標志設計成為簡單的圖像。作為優化，建議設計師使用充滿活力或獨特的配色方案。或者相反，切換到黑白，將這種極簡效果發揮到極致。最后，還有負空間，這是另一種采用簡單幾何形狀并保持視覺趣味的好方法。
高大的標志
雖然2022年的大多數標志設計趨勢與我們兩年、三年或五年前曾經擁有的一切產生共鳴，但高大的標志就像一口新鮮空氣和創造力。反對過度使用的三角形、方形和圓形標志。正如我們從多個Behance項目中看到的那樣，它們的美學非常適合尋求領先的時尚公司、精品店、創意工作室和大品牌。
高大的標志部分借鑒了裝飾藝術風格，它們特別喜歡優雅的垂直框架。高大的標志同樣具有波西米亞風美學和現代幾何元素。事實上，這種標志設計趨勢的根源并不那么重要。真正重要的是新的形狀讓設計師想出了新的標志創意，所以在這里我們希望他們以不同的方式處理字體和圖形元素。
飽和顏色和漸變
實踐表明，標志的顏色工作和色彩的選擇是一個非常個人化的故事，通常很難跟蹤全球趨勢或與特定顏色相關的任何標志趨勢。有人更喜歡黑白標志。有人會選擇現在特別流行的單色、裸色或大地色。然而，如果我們看看大品牌，我們將能夠在標志設計中使用生動、飽和的顏色來定義一個巨大的趨勢。
對標志設計中顏色的興趣已經發展到這樣的程度，創作者不僅要增加飽和度，還要選擇純粹、生動的解決方案，同時盡可能地簡化標志。太多的細節和顏色會造成混亂的外觀，因此選擇其中一個至關重要——在極簡主義時代，選擇很明確。然而，我們不禁強調鮮艷的色彩很難處理——尤其是糖果色。它們可以使品牌標識看起來廉價甚至業余。因此，當您關注這一標志設計趨勢時，重要的是要取得平衡——否則您將面臨使用可疑標志的風險。
象征主義和極簡主義代替現實主義
有多種與簡化標志和極簡主義相關的標志趨勢——這可能是最能說明問題的。我們每個人都將標志創建為一件真正的藝術品。動物、花卉、神話和生物——在標志內，它們展示了精湛的技藝和對細節的迷人關注。誠然，這樣的標志確實看起來很引人注目，但從響應式設計的角度來看，它們失去了其他類型的標志。
您可能還記得響應式標志，這個術語是在大約4年前引入的。這些是可以適應不同屏幕尺寸或其他媒體的標志。為此，設計人員可以刪除字標、簡化或隱藏標志。今天幾乎沒有人認為響應式標志是一種獨立的現象或趨勢。相反，響應性是標志的自然特征，象征主義和極簡主義的運動正好證明了這一點。
涂鴉和草圖
2022年，草圖和涂鴉將作為圖形設計趨勢回歸，因此它們作為單獨的標志設計趨勢出現。其復興的關鍵是人們對設計師個人品牌方法的興趣增加。顯然，沒有什么比以獨特風格繪制的快速草圖、卡通人物和形狀更好的了。
因此，要為標志設計中的更多涂鴉以及企業品牌中草率的卡通標志和快速繪制的吉祥物做好準備。以快速和樸實的方式制作的手繪標志也受到歡迎，我們已經看到以這種方式書寫品牌名稱的項目和團隊。
粗體字標標志
如果我們考慮2021年的標志設計趨勢，粗體字標志將是最好的例子。于2020年底推出的實驗排版項目專注于不常見的幾何解決方案。難怪品牌和標志設計師不能忽視這種大規模的圖形設計創新——在這里，我們在標志設計方面有了一個全新的方向。
許多跨國公司選擇字標標志。例如H&M、可口可樂、Zara、谷歌、Visa等品牌。然而，幾乎沒有人認真考慮使用實驗字體進行品牌重塑。這就是為什么此類文字商標標志主要在獨立工作室、小型企業、精品店、沙龍和個人創作者中傳播。也許，這些大膽標志的特征是其吸引力的另一個關鍵。您可以將它們視為那些知道要注意什么的鑒賞家的標志——或者那些想要感受品牌美學的人。
無襯線標志
雖然使用大膽的實驗排版并不是每個人的趨勢，但無襯線字體是每個人都知道和理解的。自從設計師拒絕花哨的腳本和襯線字體而支持無襯線字體以來，已經有一段時間了。但由于存在普遍趨勢，我們可以說它仍然是2021年的標志設計趨勢——順便說一下，這得到了我們上面寫的極簡主義和基本幾何形狀的流行的支持。
拒絕花哨字體的動機非常簡單——使用無襯線字體要容易得多。使它們適應不同的屏幕和畫布尺寸并不復雜，因此它們更適合響應式標志。有趣的是，幾年前，我們觀察到了一個相反的過程：許多公司從無襯線字體切換到襯線字體，因為復古設計非常流行。今天，隨著復古狂熱慢慢釋放出來，健康的實用主義出現了，無襯線字體再次相關。
花藝和微妙的裝飾
我已經不知道設計師和產品創造者用極簡主義制作了一系列標志多少年了。與此同時，許多小企業繼續選擇和使用它們，所以這些標志不會退縮——就好像它們剛剛出現在市場上一樣。所以請放心，它們將與您共存數個季節，同時還會定期推出新款式，例如2022年風靡一時的Boho。
也許，這種標志設計趨勢是最流行的。優雅的線條看起來令人著迷，因此使用它們的誘惑很大。2019年如此，2022年依舊如此。 事實上，這種微妙的視覺風格并不僅僅集中在花藝上。有很多日常用品：從家具到文具和衣服。重要的是這些標志模板是如何制作的！
黑白標志
隨著我們繼續從各個方面學習了解極簡主義，讓我們在這個市場中傳遞2022年的另一個自信趨勢：黑白標志。實際上，將黑白色調視為一種趨勢是很奇怪的，因為它是一種經典的解決方案，并且它的存在與時間和風格的變化無關。所以，我們需要讓您注意到對此類標志的興趣是日益增加的，其中最重要的例子是GoDaddy的重新設計之一。他們逐漸簡化了他們的標志，現在他們似乎到達了最后階段——帶有帶有無襯線字體和保留標志的黑白標志。
黑白標志的最佳之處在于它們令人難以置信的風格靈活性，這使得它們在品牌設計師中流行起來。它們完美地適應了品牌的審美，因此可以將它們用于字體、裝飾元素和幾何形狀的各種實驗。極簡主義、創造性的排版、花卉、象征主義、原始幾何——一切都與黑白標志相得益彰。
3D與平面樣式
3D是2021年最有前途的圖形設計趨勢之一。隨著技術的發展，這種圖形變得如此龐大，以至于我們永遠無法預見。甚至可以在直觀的在Spline或 Procreate的最新更新中進行高質量3D對象的制作。圖像質量也得到了發展。
然而，在標志設計中，情況頗有爭議。設計師將平面樣式的 logo 轉換為3D，反之亦然，力求使 logo 風格更加生動和簡潔——后者對于舊版本的3D和假3D尤為典型。出于同樣的原因，他們付出了很多努力來探索類似于3D的方向——等距藝術。它允許在視錯覺、鮮艷的色彩、漸變、陰影和形狀的幫助下獲得大量圖像。可能它看起來比3D更適用于標志設計——但時間會證明公司和客戶會習慣什么。
最后
顯然，2022年和2021年的標志設計趨勢沒有明確的界限。大多數處于巔峰的趨勢已經伴隨我們很長一段時間了。
但是，我們可以肯定地說，例如之前非常受歡迎的故障風格，不太可能成為本季標志設計的主角。在過去的幾年里已經有很多這樣的事情。動畫標志也是如此，這是2021年最有希望的標志趨勢之一。動畫本身繼續引起人們的興趣，這是展示品牌的一種成功技術——但不幸的是，它并沒有被證明是可行的。
最后，3D的命運也沒有確定，我們還不能說3D或扁平風格的標志設計是否會成為一種趨勢。我們已經寫過，設計師的立場是模棱兩可的，一個方向和另一個方向都有品牌重塑。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計原則是設計師為規范和塑造他們的作品而制定的規則。這些原則強調焦點設計元素，遵循它們有助于幫助設計師與廣泛受眾產生共鳴。
盡管設計原則聽起來可能限制了自由，但它們的創建是為了支持設計師的工作，而不是設置障礙。您可以將它們視為建立一般順序但不干擾作者創造力的拼寫規則。因此，設計工作依賴于設計原則，一旦使用得當，就會開始吸引觀眾的注意力和興趣。理解這些原則意味著理解并控制整個項目、創建它的過程以及每個涉及的設計元素。
不同的團隊和工作室區分不同數量的設計原則。然而，七項原則被認為是基本原則。它們是平衡、層次、統一、對比、強調、比例和重復/節奏。
1. 平衡
平衡可能是最明顯和最容易理解的原則。這也是讓視覺內容感覺舒適的一個重要功能。這個想法是設計的每個元素——比如字體、顏色、圖形、背景、形狀、圖案、按鈕、文本等——都有它們的視覺重量。較重的元素會迅速吸引觀眾的注意力，而較輕的元素則不會，主要用于完成整個場景的整體性與和諧性。
有兩種類型的平衡，對稱和不對稱。對稱平衡是通過沿中心軸對齊的等重元素實現的。不對稱平衡與鏡像相反。它使用不同權重的元素并且更常見。這樣的構圖圍繞一個或幾個突出的部分排列，因此創作者尋求輕元素和重元素之間的平衡以獲得視覺圖像。
2. 層次結構
層次結構是網頁和應用程序設計中最重要的設計原則之一。它用于對設計元素進行優先級排序，并根據其重要性設置重點。這里有一個簡單的規則：如果一切都標記為重要，那么一切都不重要。
層次結構引導用戶跨界面從焦點對象到二流對象，并有助于按邏輯順序了解事物。如果忽略了這一設計原則，構圖就會顯得雜亂無章，而且很難找到必要的信息。
設計中有兩種主要類型的層次結構：視覺和排版。可以通過場景內對象的比例和顏色強調獲得視覺層次。排版層次結構是通過不同的字體、大小和字體粗細來實現的。
3. 統一
你可能遇到過這樣的網站、印刷品，甚至是室內設計概念：大量的元素很難融合在一起，所以整體形象看起來一團糟。為了解決這種圖形的混雜，使用統一的原則，應該創造視覺和心理的和諧。
統一意味著與品牌理念和信息的聯系，因此每個制作的設計，無論是網站頁面、T恤印刷品還是廣告，都應該成為其中的一部分。它與設計系統密切相關，是大多數平面設計公司和項目應該考慮的原則。
4. 對比
雖然統一和平衡創造了易于交互的視覺上可接受的設計，但多樣性增加了吸引注意力的細節。如果沒有多樣性，即使是最平衡、最精心組織的概念也會缺乏對比，變得單調乏味。
這個設計原則為項目添加不同的視覺元素、圖案、符號或排版。事實上，這是設計師可以盡情發揮創造力并順應潮流的地方。
5. 強調
強調是通過在構圖中設置焦點元素來創建畫面的設計原則。這意味著它們會吸引觀眾的眼球，但不會超過其他元素，否則平衡就會傾斜。這就像一個好的海報設計：你立刻就能看到正在演奏的樂隊，并且找到細節：音樂會的日期和地點、門票價格等。
強調可以通過比例、重量、位置、顏色、形狀和樣式來實現。創建一個大膽的、色彩鮮艷的元素是不夠的，因為一切都應該在一個設計中連貫地顯示。
6. 比例
比例是指元素相互之間的大小，是最全面的設計原則。調整比例并根據物體的大小和視覺重量對物體進行分組有助于突出重點并保持構圖的統一。
設計組合中比例的主要思想是，越重要的元素越大，不重要的元素越小。就像著陸頁、文章或海報一樣，對象之間的比例關系與其對讀者的重要性相關。
7. 重復/節奏
這兩個設計原則相輔相成，相互補充。重復是指在設計中實現相同或相似的元素：如圖像、按鈕、顏色、字體或形狀。它用于創建統一性和一致性。通過使用相同的圖標、背景或風格化元素，可以輕松實現重復。如果使用得當，它可以控制瀏覽者在頁面上的移動，因為重復元素可以成為吸引和引導注意力的絕佳方式。
元素重復的方式創造了一種節奏感。當設計中有節奏感時，觀者將其視為旋律。有五種類型的視覺節奏：隨機、規則、交替、流動和漸進。
隨機— 沒有特定規則間隔的重復元素。
定期— 重復進行相同的間隔。它通常是通過創建一個網格或一系列垂直線來獲得的。
交替— 允許在設計中重復多個元素。
流動— 模仿自然流動并顯示遵循各種彎曲和曲線的重復元素。
漸進式— 通過在重復時改變元素的一個特征而獲得。
最后
定義要使用的設計原則并不總是有意義的，因為它們可能會在創作過程中參與和拒絕，而設計師的主要目標仍然是傳達重要信息，創造和諧構圖，設計可用的界面。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計趨勢可以塑造一切，從設計師的創作方式到用戶界面設計，再到從網站到包裝設計的未來迭代。
讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021年末開始出現的趨勢，這些趨勢是為來年奠定基礎的，以及一些即將流行的趨勢設計。
有趣、樂觀的設計
時尚的形狀、顏色，甚至是面孔都可以帶來很多樂趣。設計師正在使用網頁設計趨勢，為從網站的所有內容提供有趣、樂觀的設計。這些設計的共同點是它們為世界注入了一點額外的快樂。
充滿樂趣和樂觀的圖像具有面孔、較輕的字體，以及散發出積極情緒的顏色。為了充分利用這一趨勢，請考慮更輕的元素，并避免選擇較重的字體或顏色。
黑白配色方案
黑白配色方案是今年最鮮明、最美麗的設計趨勢。沒有顏色，你可以在限制范圍內思考和設計。
大膽和實驗性的排版
在2022年，沒有錯誤的排版方式。大粗體字體——甚至襯線字體——無處不在。在玩這種網站設計趨勢時，請考慮字體將如何響應以及如何最大限度地對訪問者產生影響。
三維設計元素
雖然2020年和2021年有很多設計師網站處理完整的3D 設計，但新興趨勢是將3D元素與更扁平的整體美感結合起來。
具有3D風格的元素可能包括陰影、動畫或圖層效果，以創建深度和維度。
三維設計也延伸到視覺敘事。考慮如何以突出景深和陰影的方式捕捉您的故事或產品。
近乎野獸派
野蠻主義是人們想要加入的網站設計趨勢，但對于大多數項目來說，它過于苛刻和尖銳。
這些設計使用了許多相同的鮮明效果。不是單色字體，更容易看到襯線是常態。即使有一些明顯的邊界和線條，元素之間也有足夠的空間。沒有太多的裝飾或其他視覺效果，只留下顏色和文字來真正承載這些項目。
滾動文本元素
雖然總是希望文本元素可讀，但它們也可以是動態的。滾動文本元素——通常使用超大字體、幾個詞、在一個位置——可以增加對關鍵詞的強調并激發用戶的興趣。
輪廓字體是一種流行的選擇，保持可讀性的關鍵是使用簡短、常用的單詞或短語。
玻璃態
玻璃態的第一個展示于2020年末和2021年初的新態，并演變成現在流行的更完整的玻璃效應。
正是您可能想的那樣：設計元素的外觀讓人聯想到玻璃。可能有透明度、冷淡或光澤的元素。
設計師們一直在Dirbbble上以一種主要方式使用這種風格，并找到了網站設計的方法。
更多漸變
漸變是不斷出現的設計趨勢。2021年，設計中的大部分漸變出現在背景中。
到 2022 年，漸變將采用兩種新形式：
1) 用于文本顏色填充（例如上面的示例）以提供最大的影響和強調
2) 作為用其他線條填充插圖或圖標以創建紋理深度效果
沒有圖像的主頁
無需圖像即可設計，您將在 2022 年緊跟潮流。
使用不同類型的用戶界面或設計技巧來充分利用沒有圖像的主頁。在此處的示例中，Kirifuda 使用了漂亮的黑白配色方案，在文本元素之間具有疊印效果。超大的排版和手寫風格的字體有助于將它們融合在一起。
分屏美學
分屏美學重新奏效。幾年前的趨勢當時出于可用性和響應的原因而起作用，現在它更像是一種新設計。
這些視覺效果可以包括水平或垂直分割的屏幕，每一切面有不同的功能。
交互式字體
在屏幕上與您一起移動的文本是交互式字體背后的支柱。在大多數情況下，這可以使用懸停狀態，盡管您可以嘗試一些其他更復雜的效果。
在考慮交互式文本元素時，請考慮可讀性和理解力。文本效果只有在其中的文字仍然可讀和可理解的情況下才有效。
包容性設計
設計師正在努力打造一個更具包容性的網絡，它幾乎在所有發布的內容中都有體現。從圖像到語言再到替代文本，沒有理由不嘗試讓您的項目更加包容所有人。
包容性延伸到種族、性別中立、文化、可及性和能力。共同的主題是您的網站應該以這樣的方式組合在一起，以便任何想要訪問內容的人都可以訪問內容，并且人們也可以在屏幕上看到他們可以與之相關的其他人。
結論
就網站設計趨勢而言，新的一年已經開始以非凡的方式爆發。如何將這些元素合并到現有項目中是作為設計師該考慮的問題。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為什么設計師要有成本思維，以及成本思維在做我們做設計時對我們有什么幫助。
不僅僅在工作中我們需要思考成本，在生活中我們也無時無刻都在計算成本。成本總是和收益掛鉤，所以貝克爾在《人類行為的經濟學分析》中提到：人的任何行為都是理性選擇的結果，無利可圖的事人們事不會去做。雖然這句話不能覆蓋所有的人，但是大多數人就是如此。
在夜深人靜的夜晚你饑腸轆轆想吃夜宵，你可以選擇下樓到周邊小吃店就餐，也可以選擇叫外賣，前者付出的成本是你需要通過身體行動來交換最后的結果，后者則是花費一定的金錢來代替前者的行動。
那么我們通常會如何選擇呢？如果這兩種成本有很大的差異，比如需要到很遙遠的地方那么除了身體行動成本外，時間成本也會計算其中，所以相比后者成本陡然增大，于是我們就會選擇成本低收益大的方式。但是假如你現在極度想要吃那家的夜宵，外賣點餐會特別影響口感，那么你可能會選擇前者，這里由于外賣口感和主觀意愿影響到了我們理性的選擇?！?
成本決定了收益的效率、大小和方式，小到你伸手拿一支筆你會選擇最近的，大到我們人生的投資。成本與收益之間并非是直接關系，收益的大小的不取決于成本的大小，還有風險因素。例如我們在對UI界面進行優化，可以選擇的方式有很多：
1.只調整視覺，替換樣式
2.對頁面邏輯進行重構
3.整體功能進行重新分類組合
......
我們的目標是讓用戶獲得更好的體驗并且提升業務價值。3種方式需要的成本高低不同，我們都希望付出最小的成本達到最好的效果，于是我們就會考慮到風險因素，假如新流程用戶不會用怎么辦，假如新版本導致的數據下滑怎么辦，假如行業出了新政策了怎么辦等等。所以除了這些成本外也要考慮應對風險的成本。
你看為什么有錢人都會坐頭等艙是因為頭等艙可以幫他們節約更多的時間，提供更好的環境與服務，讓他們產出更多的價值。還有假如你的車壞了，你最直接的方法就是花錢找人幫你修而不是自學自修，因為你將花費太高的成本。
再舉一個例子，我們想提升能力，有的人選擇自學、白嫖，有的人選擇報培訓班，這也只是時間和金錢上的成本選擇，如果你的自學（白嫖）在短時間收益很大那就毫無疑問幫你省了一大筆錢，但是如果自學很久都毫無效果，那么時間就是你花費的成本，時間和金錢不同的是，時間不可逆?？雌饋砘ㄥX比花時間更好？不是，花錢也有風險，比如課程質量和服務很差，錢沒了還學不到，甚至賠上了時間。但如果你選對了，那么收益就遠遠會大于自學。
實現成本指的是想法與落地中間需要付出的行為、時間和其他損耗，例如我們希望提升用戶下單的轉化率，我們可以選擇：1.減少整個流程的步驟 2.將按鈕設計的更明顯 3.給用戶發放優惠券 4.給用戶營造搶購氛圍，在這幾個方案中最低成本是2，因為只需要調整樣式和簡單開發就可以實現，但收益并不是最高的，而其他的方案需要更多的角色花費更多的時間來參與，但是收益也不是顯而易見的。所以如果你的產品比較成熟，那么我們一定選擇成本更低的方案，反之我們會進行更高成本的嘗試。
還有比如我們找工作，新公司福利待遇比現在公司好50%，平臺也更大，是否不需要思考直接去呢？當然不是，你需要考慮通勤成本、生活成本、自身成長成本等等因素。如果你50%薪資漲幅換來的是996、每天通勤時間3、4個小時，不僅僅是時間精力，還有我們的身體健康的成本，我會覺得遠遠不值，成本太高。
我們先來看一下定義：機會成本是指面臨多方案抉擇時，被舍棄的選項中價值最高的就是本次決策的機會成本。舉個例子，比如當前版本我們有1個開發一個設計一個產品，我們面臨著兩個需求，但是資源和時間只夠我們做一個需求，這時候2選1，那個被拋棄的需求所擁有的價值就是我們所選擇的那個需求的機會成本，相當于我們放棄了那個需求所擁有的價值。
再通俗一點講，我現在有100萬，面臨著兩個選擇：1.銀行理財，年收益4%，4000. 2.做生意投資，年收益8%，8000，那么就相當于我花費了這4w的潛在成本獲得了8萬的收益。
邊際成本的理解很簡單，我們可以理解為我們每付出一定的成本收貨的收益或者每收獲1個單位的收益所付出的成本。用一個通俗一點的例子來講，比如你一共學習10天，第一天學完你考了30分，第二天學完你考了50分……第8天學完你考了94分，第9天學完你考了98分第10天學完你考了100分，花費的單位天數一樣但是每次增加的分數卻越來越少，收益也就越來越少。
在做產品設計的時候，我們往往會有一個板塊叫為你推薦，比如微信閱讀中的這個板塊，它一次提供了用戶6本書，雖然算法可以算出有許多書，但是這里每次只提供給用戶6本，是因為涉及到了邊際成本，少量多次提供能夠讓用戶更聚焦，更快的選擇好書本進行閱讀，每多提供幾本書，用戶選擇閱讀的時間成本就會越大。有同學會問：那我只給1本不就好了，用戶就能馬上讀了，何必要推薦6本？
我們如何保證那一本剛好是用戶想讀的，沒有辦法做到如此精準，如果每次只推薦一本書，而用戶嘗試了幾次都不喜歡，他們就會放棄，所以這里就會選擇一個臨界值，比如我們可以選擇每次放不同數量的書，根據數據判斷在給用戶幾本書的時候用戶閱讀轉化和選擇時間成本更低。
體驗成本也是我們設計師需要時刻關注的，俞軍老師在產品方法論中提到，用戶價值=新體驗-舊體驗-替換成本，體驗成本可以包含很多信息，最主要的就是認知與交互的成本。
如何降低認知成本可以從以下這些點進行優化
文案的設計要求是簡單易懂，避免產生歧義，之前給大家舉過的一個高德地圖導航在到達目的地之后給出一個“原路返回”按鈕的分析，大家可以再思考一下，是否會產生歧義。還有確定、確認大家是否知道怎么用呢？
文案也需要有情感化，避免生硬、帶負面情緒的問題等等
視覺最為直觀，一個按鈕一個控件的樣式是否能滿足用戶的心智和預期，將會影響用戶的認知，例如以下的幾個按鈕，出現在不同場景用戶會出現一系列問題：為什么我點了沒用？為什么還不能點？我到底該點哪里？
還有你的品牌是否識別度高，也決定了用戶對你的認知，最近小米花了百萬請大師做了新的logo，在視覺上更加圓潤，在圓logo的基礎上做了很多的微調，實際上也是避免了太大的logo變化導致品牌認知成本的提高，認知成本一旦太高，品牌市場的敏感度和曝光度還有各種替換、衍生、配套的隱性成本也會大大增加。所以這一舉動是明智的。
比如我們希望新用戶去關注一些大咖、kol獲得更好的推薦，但是如果我們只是將推薦者的頭像和昵稱給新用戶，那么這個策略就是失敗的。因為我們沒有考慮新用戶的認知：1.我為什么要關注她 2.關注她我能獲得什么。所以僅僅依靠頭像和名字在這里對用戶的認知是沒有任何幫助的。
我們通過利用肢體來和媒介進行交互，目的是完成某項任務。其實只需要你抬手，那么就是產生了成本，只不過某些成本是固定的無法減少的，比如你要去騎車那就需要去解鎖，如果沒有鎖車可能就會被偷走，這是出于安全考慮。
行為成本在具體數字產品中我們可以發現很多，例如你只需要將手機拿起，屏幕就會亮，相比于找到解鎖鍵再按一下成本就低了很多。而亮屏后不直接解鎖是為了防止誤觸或者隱私，所以還需要通過指紋或者人臉進行識別。
例如幾種不同的驗證方式，利用滑動拼圖來解鎖和輸入相關驗證碼解鎖，前者比后者的學習成本和操作成本都低。
在移動端我總結了幾個減少交互成本的方法，不妨來看下：
soul音頻處理
日期選擇
iPhone底部橫條切換窗口
游戲昵稱隨機
股票買入數量
這里也有同學會問，既然都可以代替，那滑動能否代替輸入？必須也是可以的，例如iOS自帶的計時器中選擇時間的控制器，還有鬧鐘設置，這里要注意的是，滑動代替輸入是要基于本身該信息是由范圍內并且不需要精細化控制的，比如房價篩選，房價本身量級很大，用戶篩選也不會精確到個位數，在這里用點擊和輸入會比滑動的成本更低。
反例就是音量、明暗控制，大家可以感受一下輸入在這里的雞肋。你需要精確控制選輸入，需要大致的范圍選點擊，非常模糊的感受選擇滑動。
例如我們在開車進行導航的時候，打字輸入非常不便，于是加入了語音輸入。還有在微信進行賬號切換時，我們可以選擇利用語音輸入數字來驗證身份。
對于新用戶操作復雜功能和界面的時候，提供更多提示能夠很大程度上減少用戶的操作成本。
在iOS或者安卓的手勢控制中，我們會發現又一些常用的手勢比如：點擊、拖動、輕掃、雙擊、縮放，這里我們可以定義為一級手勢。還有一些不常用的比如：重按、長按、三指滑動、三指縮放等，這些手勢的認知成本和行為成本都很高，定義為二級手勢，不建議頻繁使用。
設計師在日常工作中接到的需求繁多，無論是在做需求之前還是在思考設計方案的時候，成本思維可以幫助我們很好的規避一些問題和風險，我們追求控制成本使收益最大化。所以學會控制成本的設計師不僅僅題可以提高個人工作效率還可以幫助公司創造更多價值。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn