轉載請注明：學UI網》B端產品-BI分析工具
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
像這樣的夢幻色彩的 LOGO 是怎么做出來的？其實非常非常簡單，它的制作方法，沒有任何感情全靠 AI 技能。能夠熟練掌握 AI 工具對我們做 LOGO 的效率也會有大步的提升。今天我們就來分析一下如何借助 AI 的工具技能來設計 LOGO。
我們都知道 PS 的圖層混合模式有使當前圖層圖像的色彩與下層圖像的色彩進行混合的效果。很多同學不知道其實 AI 也有這個功能。在(窗口——透明度)里面就可以找到。
那現在我們就來分析一下這個 LOGO 是如何使用漸變的混合模式完成的。
首先仔細觀察這個 LOGO 由哪些元素組成。是由幾個小房子形狀的幾何圖形，以不同透明度的漸變色彩疊壓組成。其中的重點是色塊疊壓處的色彩是混合而成。
圖形來源于網絡，版權歸原作者所有，本文借用分析AI技法
第一步：先繪制出一個小房子形狀，使用傾斜工具做出透視效果。
第二步：打開效果——扭曲和變換——變換，調整數值。
到這里圖形就繪制完了，可以開始上色了。
第三步：先把圖形取消編組，給圖形填充漸變色后調整透明度為 50%。將混合模式調整為正片疊底。（下圖展示的導出的漸變色圖片失真了，實際上是很絲滑的顏色）
第四步：因為紅色與藍色疊加的關系，導致圖形的中間有些暗，我們可以給圖形添加一個高光。繪制一個圓形執行高斯模糊，將混合模式改為濾色，調整透明度讓高光更通透。
最后，再加上排版就完成啦。
看到這里是不是就明白了夢幻色彩是怎么做出來的了。其實就是不同顏色的漸變色塊的混合疊加。再按照物體的身體結構疊加上高光和陰影就可以了。是不是很簡單。
第一步：將圖形分成塊面。注意需要按照動物的生長結構去劃分 ，塊面的大小不要相差太大，不然會形成特別空的面。
第二步：將每個塊面填充漸變色，漸變色需要設置為混合模式。具體使用哪種混合模式需要按照混合模式的規律進行調整。塊面與塊面相交處還需要注意銜接自然，可以通過調整漸變的角度和透明度的方式進行過渡。
第三步：給色塊添加多彩漸變形成亮面和高光。如果一層不夠就多添加幾層，一直到色彩多變又整體協調。
第四步：給色塊添加陰影和暗面，讓圖形的色彩更通透。注意色彩混合模式需要調整，具體選擇哪個模式由底色和新色塊疊加后的效果決定?？梢远鄠€嘗試模式對比，最終選擇一個更合適的模式。
最后，把比較空的面填充一些細節，既填補了的空間又有一種動物毛發的感覺。再畫出眼睛就完成啦。
說起來不難，做的時候還是有點麻煩的，幾乎每個色塊都疊加了五六層漸變。最后看一下漸變疊加的動圖，可能會更直觀一些。
有時候做完圖形卻覺得缺少細節，這時候可以通過漸變效果塑造出 LOGO 的層次感。通過漸變色彩明暗的變化和角度的調整，可以將圖形刻畫出立體感，也可以通過多層漸變疊加的方式，刻畫出圖形的高光和陰影。
圖形來源于網絡，版權歸原作者所有，本文借用分析 AI 技法
接下來我們來解析一下這個 LOGO 是怎么做出來的?？瓷先ナ且话行囊粯?，但是其實非常簡單，只需要將其中四分之一做出來旋轉復制一圈就可以了。
首先繪制出四個圓形和十字交叉線，這樣就切出兩個圓形的基本形。但是觀察圖形是有尖角的。所以再延著豎線繪制出幾個圓形，特別需要注意的是線與線之間必須相切，這樣就可以切出尖角了。
最后再旋轉復制一圈就可以了。
接下來我們再看一下這個案例，相對于上面那個會更復雜一點，除了普通漸變還使用漸變刻畫出高光和陰影效果。
最后將背景改為黑色效果更突出，再加上排版就完成了。
圖形來源于網絡，版權歸原作者所有，本文借用分析 AI 技法
首先繪制一個三角形，拉出圓角。再畫一個圓形與三角形居中對齊。
打開（窗口—效果—變形—下孤形）這樣就得到了一個有弧度的邊。然后擴展圖形我們將上面半截裁掉，只保留下面的圖形。
以中間的圓形為軸心，將得到的圖形旋轉 120 度復制一圈。調整位置后合并圖形，這樣就得到了一個帶有弧度的三角形。
在得到的三角形上繪制一條曲線，分割出一個圖形，將得到的圖形旋轉 120 度復制三份。再使用形狀生成器進行剪切合并。這樣基礎圖形就完成了。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/04/ezgif-2-7f6141d57d.gif)
接下來為三個圖形分別填充不同的漸變色。再繪制出陰影和高光增加層次感。
繪制陰影，將陰影填充黑色，調整透明度為 50%。繪制好一個之后旋轉復制 2 份就可以了。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/04/ezgif-2-4f94649f57.gif)
高光填充白色到透明的漸變，混合模式調整為疊加。同樣也只需繪制一份，之后復制即可。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/04/ezgif-2-e5660c24bb.gif)
這樣就完成了，普通的圖形加上漸變色后變得更有層次感了。
AI2022 對 3D 功能進行了升級，可以輕松地將 3D 效果（例如旋轉、繞轉、凸出、光照和陰影）應用到矢量圖稿 ，接下來我們就來解析如何使用 3D 效果設計出更有立體感的 LOGO。
圖形來源于網絡，版權歸原作者所有，本文借用分析 AI 技法
這個圖形雖然是噴泉的形態，但是撥開多余的線條我們可以清楚的看出基礎形其實是一個甜甜圈。甜甜圈的橫切面是一個圓形，由此可以得出第一步需要先畫一個圓形。再使用 3D 繞轉功能即可得到甜甜圈了。
執行 3D 繞轉后調整數值 ，注意調整位移的數值來調整厚度。當然位移的數值由基礎圖形的大小決定。
之后需要繪制出一排黑白相間的線條，并新建為符號。PS：把所有線條選中，直接拖入符號面板就可以新建符號了。新建為符號后就可以作為貼圖使用了。
繼續打開 3D 繞轉的面板，點擊貼圖按鈕，在符號處選擇剛才新建的符號，為每一個面貼圖，選完貼圖以后需要勾選（縮放以合適）和（三維模型不可見），這樣線條才能完全覆蓋圓環。
這樣 3D 繞轉加貼圖形就完了，然后再將圖形擴展。擴展后就可以隨意調整線條了。將線條延長并且調整長度，做出參差不齊的效果模仿水流的狀態，然后將延長的圖形拉出圓角就可以了。
最后調整一下細節，再給圖形加上排版就完成了
上一個案例使用了 3D 繞轉功能，接下來這個案例就使用了 3D（經典）里面的另一個功能，3D——凸出和斜角。
圖形來源于網絡，版權歸原作者所有，本文借用分析AI技法
首先打出字母，當然做這種類型的 LOGO 時候對字母的選擇有一定的限制 。需要選擇兩個字母可以連接不突兀的才行。比如這兩個 E 就可以完全的鏈接在一起。打好字母后將 E 字母適當變形，再復制一組線條，作為中間的連接線。將三組圖形分別新建為符號(前面講解過怎么新建符號，這里就不重復了)。
接下來繪制路徑，作為橫切面。然后打開效果——3D（經典）——凸出和斜角。打開預覽，調整數值和角度。
再打開貼圖，選擇剛才新建的符號，把圖形的每個面貼上對應的符號?？梢韵冗x擇縮放以適合，再根據實際預覽效果進行調整至最佳效果。
最后將得到的圖形進行擴展，取消編組后，為圖形填充不同顏色增強圖形的立體感。
兩個案例看下來，是不是已經掌握了 3D 工具的使用方法了。那么接下來我們舉一反三，使用 3D 功能來做一個立體感的 LOGO。
第一步：肯定是先繪制出橫切面，用線條繪制出字母 B 的輪廓，注意線條不需要閉合。
第二步繪制黑白相間的條紋線條，拖入符號面板新建為符號備用。
第三步選中 B 字母的橫切面，打開效果——3D（經典）——凸出和斜角。調整凸出厚度的數值還增加圖形的立體厚度。調整角度讓圖形的視角更舒適。
打開貼圖選擇剛才新建的條紋符號。在表面那里選擇不同的面，都貼上條紋，選擇縮放以適合。
最后再在相交處繪制陰影增強立體感。這樣就完成啦，新技能 get~
第一次見這樣的立體感 LOGO，還以為是 3D 軟件做出來的。后來發現 AI 一樣也可以完成。只需要用簡單的網格就可以繪制出立體的效果。
圖形來源于網絡，版權歸原作者所有，本文借用分析 AI 技法
第一步繪制出菱形網格。網格的繪制方法也非常簡單，可以用線條建立，先畫出一排豎線，然后旋轉 120 度并復制，再重復復制就可以了。也可以使用等邊三角形連續復制進行搭建。
第二步使用形狀生成器延著網格的方向合并圖形，形成立體感的造型。兩個格子組成一個正方形，再用一個一個的正方形組成想要的幾何圖形。
第三步將生成的圖形提取出來。
第四步為圖形上色。上色的時候需要設定一個光源，根據光打過來的方向，設定每個面的顏色。通過每個方向的塊面的深淺變化，強化圖形的立體感。
最后再加上排版就完成了，是不是超級簡單。
那么舉一反三，我們也來嘗試用 2.5D 網格繪制做一個 LOGO，第一步還是按照上面的方法繪制出 2.5D 網格
第二步延著網格的角度繪制出長方形，并拉出圓角。因為將字母幾何化后，字母的形態是有兩條豎邊的，所以繪制出四個長方形為一組，方便后面合并修剪出字母結構。
第三步，按照字母的結構，先繪制出分割線條，注意線條與線條之間需要相切。因為之后需要使用形狀生成器工具進行修剪。
第四步，使用形狀生成器工具合并和剪切出字母的結構出來。
第五步，將生成的字母，復制一份進行翻轉。然后調整色彩，將字母做出立體感。
是不是很簡單。除了這個 LOGO，還有很多種類型的 LOGO，都可以借助這樣的菱形網格來完成?？烊L試吧！
AI2022 新增了一個重復功能。尤其是徑向重復，簡直太好用了。學會這個功能分分鐘做出一個 LOGO。接下來我們就嘗試使用重復工具做出下面這個 LOGO。
圖形來源于網絡，版權歸原作者所有，本文借用分析 AI 技法
先繪制一個圓形一半，將描邊模式改為尖角。復制出四個。
打開對象——重復——徑向。
拖動按鈕即可調整數量和距離。左邊的按鈕可以調整重復數量，中間的圓形按鈕可以調整元素的距離，中間的另一個按鈕可以調整重復的范圍。另外雙擊進入隔離模式可以調整單元素的方向和形態，其它的元素也會隨著單元素的變化產生實時變化。
得到想要的圖形后，將其擴展，使用形狀生成器進行修剪。最后再給圖形填充顏色就完成了。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/04/ezgif-2-122bf3c2ff.gif)
最后配色再加上簡單的排版就可以了！
重復工具真的太好用了，尤其在做重復構成 LOGO 時會提供很大的便利。下面我們就嘗試用這種方法來設計一個 LOGO。單元元素圖形直接使用英文字母 O。
首先打出一個字母 O，我們將其進行簡單變形。
打開對象——重復——徑向，調整數量和單元素的角度，調整的過程中會得到很多意料之外的好看的重復圖形。
最后再調整細節加上排版就是一個完整的 LOGO 了！
是不是有很多同學好奇像這樣復雜又有規律的線條圖形是怎么做出來的，其實也是非常簡單。接下來我們就來分析一下如何簡單快速地做出復雜的線條漸變圖形。
圖形來源于網絡，版權歸原作者所有，本文借用分析 AI 技法
我們先看這個簡單一點的線條漸變圖形應該如何做。首先還是先分析解構圖形，將它旋轉 45 度后，將線條折分開，是由細、中、粗三種粗細不同的線條組合而成一個圓形。
那么我們就先畫出三種粗細不等的線條。
再畫出三個部分的外輪廓。
將三個部分分別與剛才繪制的條紋進行剪切。使用形狀生成器，按住 alt 健減掉不需要的部分即可。
將得到的三個圖形拼合在一起后，合并所有圖形，再在相交處拉出圓角，增加細節同時也讓圖形之間更有整體感。
最后將圖形傾斜 45 度讓圖形更有張力，再加上排版就完成了。
看完這個案例，是不是對線條在 LOGO 圖形中的應用有了一定的認識，我們再來學習下面這種更復雜一些的應該如何做。
圖形來源于網絡，版權歸原作者所有，本文借用分析 AI 技法
首先將圖形進拆解，可以看出這個圖形看似復雜，其實是由兩個線條組成的圓形重復構成。重復構成的圖形我們只需要做出單元元素即可，那我們就先把單元元素提取出來。
從提取的單元元素可以看出圖形是由粗到細變化的線條組成的。從線條變化的角度是左右對稱的。所以我們先繪制出對稱變化的線條。
繪制兩個長條方形，將下面一根的一端轉為尖角。使用混合工具混合出 6 條漸變的線條。再將圖形整體復制一份進行垂直翻轉。
繪制一個圓形與剛才得到的圖形進行剪切。使用形狀生成器工具，按住 alt 鍵將不需要的部分修剪掉即可。
將線條的右側全部改為尖角，選中兩個點——右擊——平均——兩者兼有，就可以轉成尖角了。
繪制一個小圓形，居中對齊。將圖形與小圓形進行切割，將切割出的線條水平翻轉。
最后將得到的圖形旋轉 90 度，向下復制一份就完成了。
AI 的混合工具可以將兩個形狀或者顏色創建平滑的過渡，步數越多過渡也就過平滑?？旖萁∈?ctrl+alt+b。
首先我們來分解一下這個 LOGO 的圖形，先拋開色彩，只看圖形。
我們可以看出這個圖形的基礎圖形其實由兩個三角形的混合而成。還需要注意的是，三角形的頂點需要設置為圓角。
接下來我們將兩個三角繪制出來，注意線條的粗細并且選擇圓角的形式。
將兩個圖形進行混合，注意按順時針方向進行混合，圖形會更飽滿些。
是不是特別簡單，那么快去舉一反三，別光讓眼睛學會了，也照顧照顧“手”，讓它也學學。
最后看一下今天的案例匯總！
好了，今天教程就到這里啦，我們下期見！
原文地址：胡曉波工作室（公眾號）
作者：yoyo
轉載請注明：學UI網》8個AI技能給你的LOGO加BUFF
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
利用手勢交互輔助隱藏式功能操作，可以在不改變當前結構的基礎上實現快捷操作，帶給用戶更加便捷化的體驗。
夸克 APP 在訪問了多層級頁面之后，如果想要快速回到瀏覽器主頁，點擊返回按鈕一級一級返回過于繁瑣。通過底部導航欄向上進行滑動，可以快速激活返回主頁的操作，手勢輔助實現自動跳轉。該設計解決方案通過手勢輔助隱藏功能操作，提高了用戶對于產品的使用體驗。
點贊在閱讀類場景中隨處可見，用于表達用戶對內容的認可度而產生的情感共鳴，通過點贊給予贊同。點贊設計的創新已逐步在探索，通過更加情感化的設計表達提高用戶體驗，借助手勢的變化呈現出更有趣味性的點贊設計。
今日頭條 APP 單擊點贊圖標會隨機性彈出表情化符號，多次點擊會持續彈出更為豐富密集的表情符號，長按則會像模擬持續發射的特效，伴隨著音效和震動帶來“視聽觸”等多重體驗。點贊設計的情感化探索不僅帶給用戶多重感官體驗，也是用戶釋放閱讀壓力的一種情感共鳴。
除了從點贊視覺感官層面進行設計探索以外，眾多產品也在文案提示設計上面進行情感化探索。
AcFun APP 在對話題等內容點贊時，會彈出溫馨的文案提示，每次點贊都會出現不同的文案。情感化的文案設計提高了話題互動的活躍度，帶給用戶更好的社交互動體驗。
設計都在探索差異化的感官表達，如何突破常規至關重要。無論是在布局結構層面還是元素情感化表達層面，設計師都在嘗試更有創新的表達，帶給用戶不一樣的使用體驗。
Wonder APP 在模式切換上做出了一個新穎的設計解決方案，通過環形卡片設計進行模式切換，可以單擊和滑動進行切換。動態的卡通形象增加了感官體驗，流暢的卡片切換也帶來了不錯的操作體驗，是一個在布局層、視覺感官層、互動層等方面的不錯探索。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/04/ezgif-3-660415eece.gif)
簽到設計對于大家來說并不陌生，提高用戶簽到的參與度是大家都在不斷思考和探索的方向。
AcFun APP 將簽到設計成日歷展示形式，點擊簽到之后彈出，配合日歷運勢的概念來設計，提高用戶的簽到興趣。內容卻不是正式的日歷運勢相關內容，配合趣味化的文案設計，讓用戶會心一笑。視覺感和情感化文案設計的融入，提高了簽到設計的感官體驗，進而提高用戶的參與度。
通過公眾號等自媒體進行閱讀已經成為大家的習慣，不同公眾號編輯內容都會有所不同，字體大小和行間距等沒有特定的規范。官方雖然會有默認設置，但是無法兼顧不同的內容需求。提高小編的編輯體驗和滿足用戶的閱讀體驗，自定義的閱讀調整至關重要。
在公眾號閱讀文章時，可以通過右上角的功能入口進入“調整字體”。用戶可以根據自己的閱讀習慣設置字體大小，在標準和自定義大小之間切換，提高用戶的閱讀體驗。
個性化的皮膚主題在眾多產品中已經運用普遍，當用戶體量增加之后，個性化的設置才能滿足不同用戶的體驗需求。
酷我音樂 APP 在個性換膚模塊中，除了設置多個主題皮膚供選擇以外，用戶還可以通過自選色設置更加靈活的配色風格。可以選擇更多推薦的配色風格，也可以通過色環自己調節任意顏色，滿足不同用戶對于感官體驗的需求。
對于一些追尋個性化較強的用戶，預裝的自定義設計已經無法滿足他們的體驗需求，激發用戶創作欲的設計迎面而來。
酷我音樂 APP 在個性換膚模塊中，用戶可以通過“自定義圖”實現更加個性化的皮膚。用戶可以選擇任意拍攝的照片，然后通過透明度和模糊度來調節照片效果，滿足自己對背景效果的要求。針對按鈕的顏色也提供了幾個配色選擇，用戶可以根據自己調節后的背景效果進行搭配?；诟觽€性化的需求滿足用戶的創作欲，才能帶給用戶更加人性化的使用體驗。
為了提高功能的曝光度，直接展示在用戶的視野中是很多設計師的處理形式，但是卻增加了感官層面的視覺負擔。
幸識 APP 把關聯功能進行合并式的疊加設計，不僅對視覺進行降噪，由于屬于關聯性的操作，用戶更容易通過功能聯想進行使用。當用戶點擊觀看“時間戳”時，底部功能會被替換為“發起”，發起時間戳和觀看本身就是一個流程的體驗。當我們遇到關聯性功能設計時，不一定選擇各自展示，相互疊加或者切換式的交互設計也是不錯的解決方案。
點贊是用戶情緒化表達的關鍵，表示對于內容的認可度和作者的支持度。普通的點贊設計已經無法滿足一些情緒爆滿的用戶，更加趣味夸張的設計在逐步被探索。
微博 APP 針對點贊設計單擊時，出現表情化的符號彈出，持續點擊或者長按點贊圖標則會出現色彩豐富、表情符號四處爆發的視覺效果。一場趣味性爆滿的視覺盛宴，滿足用戶釋放情緒的最大化需求。
在用戶使用體驗和感官體驗層面探索了這些優秀的案例，希望可以拋磚引玉，帶給大家更多啟發。發現設計背后的思路，總結設計表達的經驗，運用優秀案例的技巧，提高我們的設計解決能力。
以上總結僅代表個人觀點，如有不足歡迎大家留言補充，我們互相進步。
作者：黑馬青年
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
我們不妨換個手寫的文藝字體，通過對比，這時會發現適合的字體可以恰當表達出一張圖片的風格。
再拍一張照片，夜晚寂靜的高架橋，符合氛圍的主題、加上好的排版方式本是一件非常浪漫的事情，但如果字體不在一個頻道里，就會破壞整個主題的氛圍。
我們不妨換個字體試試，通過對比，能看出字體在設計場景時的重要性。
一串文字，為什么通過排版設計出來還是不好看了，因為字體是一個非常細致的感受，當改變了字體形態之后，那種暗戀的感覺好像又回到了當初在校園同桌的她。
我們用英雄兩個字來示例如何分析字形判斷。
1、字形內部的空間和邊緣體飾都偏版直方正，所以缺少個性，無法給人獨特性的氛圍表達，適合敘述性場景。
2、字形內部寬厚，邊緣體飾卻帶有微微尖角，上下故意的壓扁，使著字體底盤很穩，給人一種力量和渾厚的感受。
3、毛筆性字體，天生帶有自由和揮灑豪氣的特點，但是這類字體頓挫的邊緣好像在告訴我們，它在克制自己的張力，適合做為主標題使用。
4、同樣的毛筆性字體，跟上一種就截然相反，它將字體的豪邁豪不隱藏的表現出來，能體現出一種情緒的特征化。
在實際場景使用時，以下幾種字體的使用就更能表達出恰當的字體在設計場景時是多么重要。
最后再帶來一個字體的實際案例
▽
一個建筑放置于畫面中間，兩只手拖住物體，制造夸張對比的錯視感。
再將主題文案通過穿插的版式手法放置于物體周圍，最后添加一些敘述信息填補版式的空缺，看起來排版沒有太多問題，但仔細觀察主體和場景的氣質卻沒有被烘托起來。
當我們改變字體的使用后，整體的氣質立馬顯得莊嚴和宏偉，再通過對比我們發現，原來與好的設計之間，差距也只是一個字體的使用而已。
原文地址：修先森撩設計（公眾號）
作者：修先森
轉載請注明：學UI網》如何正確使用字體的重要性
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
越是領先的科技公司，你會發現，他們對簡單大氣、重點信息明確、精致的設計越有強烈的偏好。這種趨勢逐年增多，覆蓋范圍也越來越廣，品牌和各行各業的設計師也越來越多的偏好這種風格。
例如：英國金融科技公司Revolut
Meta（2021年10月28日，Facebook宣布，該平臺的品牌將部分更名為“Meta”。）
Dribbble設計師：MoRas ? 的作品
小結：從心理學角度上說，極簡主義也是在尋求一種安全感，紛雜的物品和內容生產者無時無刻都在綁架我們的眼睛，很容易讓人沉淪其中，不能自拔。當越來越多的人開始明確自己的定位，明確這些購物和社交軟件只是滿足自己需求的一種工具，而拒絕做工具的奴隸?！赣X醒」的人越多，極簡主義的運用就會越來越普遍。
粗曠主義包含強烈的輪廓、鮮明的對比色、大膽的排版和真實的生活攝影相結合。
去年我們還在說：“ 野蠻主義設計風格短期內應該不會深入到UI設計中去，更多的會在網站，或者雜志的設計運用此種設計思想?！?
今年Spotify Wrapped（可以理解為國外的網易云年報）就給我們上了一課—野無止境。
貪吃蛇一樣的形狀配合各種高飽和顏色，穿插于各種界面和海報中，形成了巨大的視覺沖擊，令人難以忘懷。
讓我們來看看他們的設計：
流行趨勢總是輪回又輪回，但原因可能不是現在的人忽然意識到以前的回憶有多美好，而是當年的90后小孩成了行業的領頭羊以后，將童年的美好回憶拿出來沉醉一番，找個機會釋放內心的那份童真。
創意機構CPB London的設計總監June Frange將這波趨勢稱之為「年代懷舊」，短視頻平臺和明星效應的加持，以及使用者自發性的DIY內容，也使得它的影響力更加強大。
今年《王者榮耀》推出了兩個新主題的游戲皮膚，其中一個以舊版西游記為原型打造的孫行者皮膚，一經上線在銷售量上就遠遠超過了同時出現的安琪拉新皮膚。而原因卻并不是皮膚的精美，因為從孫行者皮膚的精美程度而言，官方這一次就是出了一個“原皮”。
這樣一個簡單的皮膚，卻讓無數玩家紛紛掏錢買賬，這就是懷舊的魅力。這種使用傳統神話故事元素結合官方的創新設計，讓無數玩家用一種全新的方式感受到了傳統文化的魅力所在。
雖然我玩游戲不多，但是也半夜爬起來買了個孫猴子～
10 年前，行業對排版比現在要嚴格得多，有明確的排版和字體使用規范。
不過現在，設計師們可以對標題和段落做任何想做的事情——完全取決于想象力。將字體與形狀、照片和表情符號混合，在其上添加紋理，或者選擇一種形式非常復雜的字體做裝飾。
這種設計會產生一種有趣、引人注目的效果，但它也必須要美觀和諧——我們仍需在設計時首先牢記：用戶的舒適度永遠是第一原則。
字體設計在2022年仍將占有一席之地，設計排版中融入夸張的、富有個性的字體，比如：同時擁有流暢的線條與銳利的棱角。
《魷魚游戲》的韓文片名標題，是由幾何圖形重新排列組合而成，挑戰了抽象形狀和文字之間的區別，借此突破字體必須易于閱讀的局限，創作出具有表現力的形式。
Design Bridge London的高級設計師 Chris Algar認為：「 2022 年將是字體的重要一年」。
他預測：“我們將看到排版風格融入真正夸張的個性字體，在流暢的線條和銳利的棱角形狀之間形成對比?！?
Chris 認為，顏色和活力也將在 2022 年的排版趨勢中發揮重要作用。
玻璃態已經無處不在——這是事實。有背景模糊、半透明物體，如卡片、水彩、玻璃球等等。從 Mac OS Big Sur 和 Windows 11 ，玻璃擬態已經存在了很長時間。
在去年，Glassmorphism（玻璃擬態）經過一整年的風靡也算站穩了腳跟，并未像新擬態風（Neumorphism）一樣火速崛起又火速沉寂。越來越多的設計師將這種風格融入設計中去。
不知大家是否可能還記得前一年的這個趨勢——「模糊的彩色背景」。
它在2021變得非常流行，甚至有了一個專有名詞——極光背景。
微妙、多彩、模糊的顏色看起來非常友好和有機——且更具視覺吸引力。這些飛濺和高斯模糊可以用作整個背景或置于一些重要的 UI 元素下。
這種網絡全息/霓虹燈效果很適合虛擬現實和全息界面的時代。虛擬世界提供的新可能性激發了設計師的靈感。充滿活力的、發光的顏色、抽象的圓形、全息圖紋理是這一趨勢的典型特征。
它也被廣泛用于許多加密空間，以展示這些接口的未來性。
我們大多數人還是愿意選擇環保的生活方式的，投射到設計中——可以將「生態外觀」和感覺融入設計中。
越來越多的品牌在追逐這種「紙質感」的趨勢——背景通常是灰色的，類似于可回收的紙板。排版風格極簡。對比度很高。顏色非?？酥?，看起來稍顯「暗淡」，這種風格包含現實生活中的攝影、紋理、和涂鴉。
3D 作為一種藝術風格正在變成設計趨勢和大眾流行
現在一種特殊的風格越來越受歡迎，3D最新的流行風格是粘土形態——類似于由粘土制成的對象（形狀簡單，由圓柱形/橢圓形組成，由內陰影和外陰影創造深度，但采用更「松軟」的 3D呈現方式，通常與其他極簡設計結合在一起。粘土3D有種可以按出一個坑的質感。
元宇宙（英語：Metaverse），又稱形上宇宙，此一科技詞匯由前綴“meta”（意思是超越）和詞干“verse”（通過逆向構詞法從“宇宙（universe）”得來）組成，可簡稱為MVS。這個詞通常用來描述未來互聯網虛擬環境的概念，于共享、持久的3D 虛擬空間組成一個可感知的虛擬宇宙，此合成環境包含對象、常駐用戶與其交互關系，并存在于虛擬定義的時間中。旨在提供連接用戶長時間登錄和交互。廣義上的元宇宙概念不僅指虛擬合成世界，還指整個互聯網，也包括增強現實的范圍。
Metaverse描述的是一種趨勢：越來越多的技術和媒介，都在不停地縮短虛擬和現實的距離。
人類的大量活動和時間在往數字世界進行遷移。我們的社交活動、經濟活動都是在數字世界（或者叫虛擬世界）里面，玩游戲也好，購物也好，社交也好，所以元宇宙（Metaverse）就是順應這樣的趨勢產生的，元宇宙就是個數字世界。
感興趣的朋友可以自行搜集詳細資料。
用戶體驗設計，設計師的出發點是人，讓人的使用體驗感加強，趣味性加強，使用更加方便。在此角度，設計師不僅應當對設計趨勢進行學習和分析，也要促成設計趨勢落地的執行。學習擁有國際化的全局視野，增強面對復雜的中國本土市場的應對能力和洞察力，把學習和研究成果轉化為產品設計的能力。
文獻：Diana Malewicz （UX Collective） 素材來源dribbble，侵權刪。
原文地址：站酷
作者：一個辛普森
轉載請注明：學UI網》來了！解讀2022年10種UI/UX設計趨勢
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
看上去復雜的規范，其實都可以抽離出同一套編寫思路，不管你寫的是哪一類規范（比如組件規范、動效規范、Banner 視覺規范等 ）都可以嘗試分為以下幾個步驟：
1. 定義通用原則
2. 定義事件特點
3. 定義特殊場景
4. 其它內容補充
通用原則會為你的使用者提供評價內容設計好壞、質量高低的衡量標準，定義整體設計的大方向，也會幫助使用者決策，判斷什么該做、什么不該做。
案例：
以編寫「Banner 的設計風格」規范為例，規范中的某兩條內容如下：
– 契合語義：Banner 中的元素需要與文字語義契合，并對重點內容做強化和引導；
– 樣式簡潔：以不過于吸引視線為標準，形狀不可過于復雜，面積不要過大，符合 XXXX 行業的風格特征。
經驗：
1. 通?？偨Y出關鍵的 2-5 條即可，內容在精不在多；語言精練，易記、易理解很重要。
2. 這些原則是最基礎、通用的判斷標準，在編寫的過程中要結合實際情況，使之具備真實有效的指導性。
3. 形式要從簡。寫規范不是為了彰顯設計價值，而是為了統一和更正他人的設計行為，因此形式要追隨功能，侃侃而談和花里胡哨的排版都要慎用，切忌舍本逐末。
接下來你需要對所要規范的事件本身進行描述，包括事件的特征、狀態、使用方式等細節。這就需要你對于事件本身進行有邏輯的拆解和分類，你可以按照設計流程或者組成事件的框架結構來進行描述。
案例：
以編寫「Banner 的設計風格」規范為例，你可以按照 Banner 的設計產出流程，從 Banner 的構成框架、圖案樣式、文案規范、色彩規范、輸出文件格式等方面，對其進行詳細描述，這些內容就是你對于設計產出的基礎要求和限制。
經驗：
1. 通常來說你不需要從 0-1 來定義這部分內容，而是可以借鑒現有行業中已被廣泛認可的設計原理和法則（比如視覺原則就有：視差規律、情感化設計、費茲定律等等），來為你的規范做理論背書，再結合實際產品 / 行業特點來編寫規范。
2. 規范顆粒度沒有限制，描述越細致，規范就越嚴格。規范定義得太寬松會起不到效果，太嚴格則會產生限制、不宜遵守，因此要適度。
3. 對于一些比較難理解的規范內容，可以給出一些正確 / 錯誤實例，也直接給出一些切實可用的實操模版，輔助使用者進行理解或操作。如下方 Material Design 在描述 icon 設計規范時給出的實例：
以上的通用規范和定義可以涵蓋 80% 左右的設計情況。但在具體業務中難免會出現特殊或極端情況，預判并定義這些特殊場景的使用方式也很重要。你可以把特殊場景理解為「邊界場景」，相當于找到事件位于臨界點時的處理方法。
案例：
還是以編寫「Banner 的設計風格」規范為例，對于文案規范這部分內容，當業務一定要修改現在的文字排版和布局；或者給出的文字內容很長且無法縮減；再或者要翻譯成多國語言等，對這類情況提前做好預判，給出合理的解決方案。
經驗：
1. 對于特殊場景，你可以給你自己設定一條邏輯線，有順序地思考。
2. 更可行的方法是收集實際工作中其他設計師在設計過程中遇到的各種特殊情況，進行匯總整理。
3. 特殊場景的規范不需要一步到位，隨時發現，隨時補充。
你還可以補充以下內容，讓你的規范更完整：
– 應用此規范的最佳實踐案例；
– 對于其他相關部門的同事，想要獲取相關知識，如何快速閱讀關鍵內容；
– 設立簡易的反饋和答疑方式，收取使用者的反饋，以便優化規范；
– 規范的更新時間和更新內容紀要，保留完整的記錄和歸檔。
規范的編寫過程不會是一帆風順的，不要急于求成，可以步步為營，逐漸優化。
另外，并不是說規范文檔編寫好就萬事俱備了，更重要的是要提供給規范使用者閱讀的便利性，包括：如何更快地閱讀文檔、在更新文檔之后如何同步等等。關于編寫好規范如何落地和推廣應用，你可以查看文章：如何讓「設計規范」被有效執行和落地？ 。
原文鏈接：長弓小子（公眾號）
作者：元堯
轉載請注明：學UI網》工作經驗｜如何編寫「設計規范」？這套思路一學就會！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
三星隱私視覺體驗視覺識別系統，該系統的標志以一致的方式應用于所有三星設備和服務，直觀地表明用戶的個人信息受到安全保護。
三星對隱私的關注以平易近人、外觀友好的圖形形式傳達給用戶。該可視化系統旨在幫助用戶安全、安心地訪問各種服務，并提醒所有相關人員注意保護個人信息的重要性。
阿波羅智聯（北京）科技有限公司
Roboride 是無人駕駛機器人出租車的完整解決方案。設計系統為用戶和其他交通參與者創造了一種安全感。外屏作為用戶的第一接觸點，為身份認證提供了精準的交互方式。
HMI屏幕還可以通過3D實時顯示路況、安全語音提示和定制場景讓用戶感受到更多的掌控感，增加用戶的信心和舒適度。
“FICTION PLAY”活動旨在通過添加“游戲”的概念來擺脫短篇小說的世俗體驗。NC 有七位作家和七篇短篇小說，提出了三種以各種方式和主題與人交流的方式。
從網絡小說、作者配音的有聲讀物、AR體驗到虛擬空間中尋找參與者的句子，打造全新的“PLAY”體驗。促銷活動、線下出版物和展覽空間為多種用戶體驗開放。
RTL United已經合并成為一個一致的品牌，全新外觀，色彩繽紛，超級動感。RTL 將成為多樣性、娛樂和靈感的宣言。目標：新的品牌價值，一種新的態度，一種新字體，可提供最大的易讀性并創建清晰和情感交流。
HarmonyOS建立在分布式操作系統架構之上，可以跨設備運行，是華為全場景戰略的一部分。這款新操作系統適用于移動辦公、健身、健康、社交、媒體娛樂等。
慕尼黑國家社會主義歷史文獻中心專注于納粹獨裁的歷史——最重要的是它對現在和未來的意義。
OERA由全球最權威的化妝品與美容權威Dr.Sven和MOJO創意總監Alison Goudreault聯手打造，是時尚專業公司HANDSOME旗下的首個奢華護膚品牌。
OREA 提出了“達到絕對零狀態的每日旅程”的概念，Oera通過詳細的微交互、簡單時尚的布局和增強的 3D 來提供自己的奢侈品身份。Oera 將其自身的生物技術應用到 Orea 產品上，以友好的語氣提供內容，從而最大限度地發揮 Oera 品牌的聲望氛圍。
Galaxy Watch4 配備了全新的統一平臺，因此用戶可以使用更多種類的應用程序，并且在與手機一起使用時，它提供了更好的可用性。
此外，針對圓形顯示進行了優化的精美屏幕營造出愉悅的用戶體驗。增加身體成分和睡眠分析功能，讓用戶更好地保持健康。手表經過重新設計，允許更自然的交互，從而創造更方便和愉快的用戶體驗。
Minna Bank 是日本第一家為數字原生個人創建的數字銀行服務。利用設計的力量，將傳統銀行業務重新定義為對客戶生活至關重要的數字服務。
Minna Bank 提供一系列數字銀行服務，允許用戶通過智能手機控制他們的資金，包括虛擬借記卡、預算功能和透支保護。Minna Bank 設計友好簡約，時尚插畫營造出有趣活潑的氛圍，讓用戶擺脫傳統金融機構帶來的壓力。
New Naturalist Landscape Design是歐洲領先的先進景觀理念和技術、科研景觀公司。
新自然主義景觀設計側重于棲息地露營、可持續景觀和生物多樣性恢復和改善等領域。賦予新自然主義以陽光般的生機與活力，清新美麗的空氣，水土般的自由融合。
植物群落不斷重組中的生態景觀呈現出新的生命形態，城市與自然在有限的空間中尋求無限平衡的感覺。
今年IF設計大獎還是有很多優秀的作品，我挑選了其中部分展示，大家感興趣可以去官網看看其他設計作品。
從這些設計獲獎作品中，我們可以學習的他們設計理念，設計表達形式，以及如何進行視覺包裝，最終獲得IF設計大獎?？赐旰罂梢远嗨伎?，他們為什么要這樣設計，我們能學習地方是哪里？
作者：Tony
轉載請注明：學UI網》久等了，2022 IF設計大獎作品來襲！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
以上就是日式食品海報中常常會用的一些設計技巧，當然，這些技巧并不是必須的，也不能保證你能做出優秀的設計，但優秀的設計確實會有很多共同點和方法，找到它們，并結合自己的設計需求合理使用，你就能夠事半功倍。
原文地址：蔥爺（公眾號）
作者：蔥爺
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
包豪斯（Bauhaus）以德語命名，意為“建筑之家”，由建筑師沃爾特·格羅皮烏斯于 1919 年在德國魏瑪創立。1915 年，他接管了大公撒克遜工藝美術學院，四年后該學院與魏瑪美術學院合并，形成了激進的新設計學院。
包豪斯從一開始就不僅僅是一種建筑風格，而是一所結合了手工藝和美術的學校，受到現代主義、英國工藝美術運動和建構主義的影響，包豪斯也最終成為20世紀最具影響力的現代主義藝術學校。
學校被定義為一個將工業設計、建筑、雕塑和繪畫融為一體的烏托邦工藝行會，為藝術家和設計師提供了由實踐技能、工藝、技術和理論知識組成的原創和有影響力的課程。
包豪斯的設計理念是形式追隨功能，少即是多，去除一些不必要的裝飾，也是包豪斯整個設計風格特點的精髓，包豪斯設計在保持功能性的同時體現了未來主義的外觀。
包豪斯倡導功能為主，不花哨，簡單而優雅的幾何形狀，理性化和簡潔設計為主，它偏向于實用而不是炫耀。這種理念在包豪斯產生重大影響的領域非常突出。
在設計中包豪斯更看重產品實用性，而非純美學。不過，這并不是說包豪斯在視覺上沒有吸引力，極簡美學特征就是它最大的標致，以至于流傳到現在一些經典設計，看起來依舊沒有覺得過時。
CFB 2018
Bauhaus Football Club
BRANDING ? 19-19 Cabinet d’Architecture Indépendant
BRANDING ? 19-19 Cabinet d’Architecture Indépendant
版式設計中的應用
Robert Gutmann | 20TH CENTURY DESIGN
Blockchain mobile Franko Komljenovi?
Glyphs app Brand Identity & Website
包裝設計中的應用
Plácida
包豪斯設計風格在其長達一百年的發展歷史中，仍然延續至今，也在過程中經歷了諸多挫折和逆境，在其發展的三個階段中不斷變化迭代，以及其革新的設計理念影響了當時諸多設計。在 21 世紀包豪斯風格仍然存在，激勵著前前后后的設計師學習和借鑒思考。
回個頭來我們也需要思考，為什么我們現在看一些設計風格可能就一年或者半年就被市場給拋棄了，究其原因還是過于形式化和追求華麗的外表設計。而包豪斯風格帶給我我們的設計理念就是功能為主，少即是多。
原文地址：功夫體驗設計（公眾號）
作者：Tony
轉載請注明：學UI網》百年包豪斯設計風格，憑什么這么牛？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
提到輪播首先可能想到的是廣告，我們經常在移動端首頁或網站首頁會看到各式各樣的輪播banner，不管在移動端還是網頁上通常點擊數據都是非常差的，本篇文章帶你深入了解banner輪播。
如果需要設計一個輪播，我們應該考慮哪些因素？如何讓輪播更具有價值？如何讓輪播的體驗更好？如何避免輪播常見的問題。
本篇文章通過以下幾點探索輪播的特性，預計閱讀20分鐘
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進度展示
4、輪播定位
5、輪播的切換
6、對輪播進行分類
7、使用縮略圖進行預知
8、輪播異形化
9、輪播時間
10、總結
用戶是否對輪播有感知，這個則需要根據不同的場景進行判斷，包括每個產品中的每個輪播對用戶用戶的定位也不相同，常見的應用場景品牌曝光、活動營銷、產品展示，每個場景下相關的數據也不相同。
促銷輪播banner
品牌推廣輪播banner
產品介紹輪播banner
同時還有個關鍵因素，輪播的占比，這里以pc端為例若是產品是以品牌效應吸引用戶的，大多輪播是以大的屏幕占比為主通常會占首屏的50%，如果是以營銷、內容為主的產品，輪播通常以16:9、7:4的常規比例進行展示。
用戶在使用產品時會默認忽略輪播區域，一般輪播都會有自動輪換機制，一定時間后自動輪放下一張banner，那么每當頁面上進行輪播時便會吸引用戶進行關注，效果上會有一定的提升，所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關注輪播過去的banner以此來滿足好奇心。
如果banner是作為內容傳播希望用戶通過banner了解內容，那么則要避免放在最后一位置，對于用戶而言最后一張輪播路徑過于長，并且用戶很少會手動滑動banner。
國外一家公司在針對輪播中進行了相關的研究測試，隨著頁數的增加用戶的點擊逐步下降。
那么如果想讓產品中的輪播更具有效果，則需要根據不同的場景設定策略達到目的。
不管在移動端還是手機端，輪播都有各種交互形式和尺寸，以pc為例在交互上會多樣化一些，常見的幾種則是通過滾輪滑動、通過點擊切換兩種。
如下圖某藝術網站，它則是通過鼠標滾輪進行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產品宣傳等相關的網站以此來突出產品的亮點，同時也符合用戶目標。
在看下面這個醫美網站它的切換方式則是通過鼠標點擊進行切換，并且占比也是鋪滿首屏，在醫美領域用戶更關注美感，而輪播形態也是符合用戶的心理預期更加沉浸美觀。
而在移動端輪播的形式就比較統一，大多都是自動播放+手指滑動進行切換。
在網頁中輪播都會有當前的定位點，許多用戶的習慣是點擊進度條進行切換banner這樣能夠更快的達到目標，不用一張一張切換，但是在有些產品中會忽略這一點，設計中會做的非常小導致用戶在點擊上可用性不太友好，如下圖中的banenr進度點設計上過于小導致點擊上有些阻礙。
如以下網站去除進度定位的方式，通過縮略圖預覽來告知用戶下一個banner的內容，空白區域也可以添加縮略圖引導介紹等關鍵信息，幫助用戶提前預知在體驗上相對較好。
以下國外某網站在進度定位的設計上采用了標簽文案方式進行設計，能夠幫助用戶更加全局的了解banner內容
定位主要是用來指示當前輪播的進度，像上圖中講的便于用戶更加全局的觀看banner的張數和當前進度。
以下網站的設計中則把定位與進度相結合，進度條展示該banner預計多久會切換下一張，對于自動切換的產品輪播這個更直觀的進度展示體驗上相對較好。
以下是某個國外網站，不管是pc還是移動端都在輪播底部添加了水平條，告知用戶當前位置
隨著市場上產品同質化嚴重，產品的競爭力也更依賴體驗，在下圖中的數據可視化的網站上，在進度條上就利用了產品的特性以餅狀圖的形式進行展示。
在剛才上面舉的例子中很多優秀的網站在設計上都很有創新性，但是需要注意一個點，在輪播中不只有自動播放，還需要考慮用戶手動切換，因為在實際用戶瀏覽中可能會對產品的播放時間達不到預期，此時則會使用手動切換，除去可點擊的進度點，還需要上一張和下一張的入口切換。
在此基礎上需要注意，在處于最后一張banner時，下一張切換還能不能點擊，第一張時上一張切換還能不能切換，這個取決于產品特性和輪播張數，如果輪播張數過小的話則需要進行循環播放，如果過多的頁數則第一步和最后一步不可點擊。
上一張和下一張的距離遠近取決于banner的大小，如果輪播banner占比較大時則需要考慮用戶的操作時長，距離越短時間越快，為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因為小區域banner用戶能夠更加全局的觀看，在使用上不會猶豫。
反觀移動端在輪播中除了展示banner進度外很少展示切換按鈕，移動端更加依賴手勢交互。
當輪播banner過多時利用標簽進行分類，用戶通過點擊標簽進行查看相關的輪播組合。
此方式更適合一些電商平臺、新聞網站這種內容過多的產品
如下圖國外社交媒體網站則使用了標簽進行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。
在banner首屏中，顯示的內容越多，越能激發用戶進行點擊，像上面講過的農業產品網站就使用下一張預覽圖的形式進行展示，當然不僅局限于這種形式，如下圖中的餐飲網站把所有的輪播banner展示給用戶觀看。
相對于縮放圖，圖標展示效果上也較好，空間占用更少，使用這種方式需要謹慎，對圖標的識別性要求較高，我印象中能夠使用的這種方法的網站是蘋果官網，讓產品抽象化展示。
在移動端也存在這種設計手法，但是基于分辨率原因移動端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競。
輪播最大的缺陷則是像剛開始講的用戶會默認為廣告，對此可以使用個性化設計突破用戶心理障礙，使輪播banner更具備親和力。
如下圖中的數碼科技網站，利用產品與背景的結合營造出一種功能性的展示。
再例如下圖中蘋果官網入口，結合百度的定制化功能在大搜中進行個性化處理，把常規的banner輪播以功能卡片形式進行展示，同時卡片承載產品動畫引導用戶進行點擊。
蘋果官網進入后隨意點擊產品介紹頁后會發現，蘋果把輪播結合鼠標滾輪營造沉浸式觀看，每個屏效內都展示產品一個功能特點，打破傳統banner的展現形式。
自動播放的輪播會根據用戶的耐心和用戶的訴求進行調整優先級，如我們平常使用產品時會忽略banner廣告，我們會更加關注移動中的東西，特別是在移動端上通常是banner進行輪播時才會關注。
谷歌設計團隊曾對banner輪播的時間進行測試，測試結果得出5s-7s的輪播時間最佳，在這個時間內用戶有足夠的時間對輪播banner上的產品內容進行了解。
如下圖谷歌商店的輪播時間設定在6s。
同時還需要注意，在自動播放的過程中如果用戶鼠標hover上去后，則需要判定播放暫定，避免用戶錯過感興趣的內容。
本文從輪播的樣式、特性、用戶對輪播的認知等多方面的介紹，在實際產品中輪播有很多可用性上的問題存在，我們在設計中則需要根據自己產品的特性、用戶群體特點等多維度去思考適合什么樣的輪播形式。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn