扁平化網頁設計的表現大多體現在配色、字體以及布局排版方面，這三樣結合得當都能制作出漂亮的網站。在國內很多企業網站的布局架構幾乎是一樣的，最多就是LOGO和一點顏色變化，看不出什么特色和創新。
作為設計師，應該多花點心思在創新上，比如網頁上的布局，其實它是可以變化多樣的，正如今天為大家分享yi xie布局排版好看的網頁設計作品，大家可以參考這些布局的設計，從中獲得一些靈感。
（以上圖片均來源于網絡）
（精美流程圖設計）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
ui界面設計之網站設計案例欣賞(一)
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。
APP UI設計一直在變化，就像網頁設計一樣，不停的創作新鮮、友好的產品，設計師要跟上這個趨勢，最好的方式就是多看優秀案例，下面大家一起來看看今天的精選，建議訪問官網查看更詳細的展示哦！
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了12款優秀并富有創意的交互作品，為你的產品設計注入靈感。
--手機appUI設計--
（以上圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
編輯導語：B端產品往往由于業務體量龐大，導致信息復雜，同時對業務的性的要求很高；服務于B端的業務，不能夠出信息錯誤，填錯一個信息，就會引發巨大的問題。本文結合筆者自己的工作經驗，總結了大型B端業務中表單的設計方法，供小伙伴參考。
表單是信息添加、錄入的通用形式；其作為獲取用戶輸入的重要交互方式，也承擔著將問題和答案進行配對的角色。
設計原則是任何一種解決方案的指路燈，它們體現解決方案應包含的基本目標。
針對互聯網表單設計，我倡導的原則如下：
我們先看看表單的結構，表單主要由5部分組成：
標簽根據標簽與輸入域的位置關系，分為：左對齊、右對齊、頂部對齊、內聯標簽、圖標標簽和浮動標簽。
每種標簽樣式都有自身的優點與局現性，根據不同的場景選擇適合的標簽樣式，能提高用戶閱讀效率，同時還能降低信息填寫時的錯誤率。
1）頂部對齊：根據Matteo Penzo 發布的關于標簽放置的文章表明：采用頂部對齊的標簽樣式，瀏覽表單所需的時間最短；如果希望用戶能快速掃描填寫表單，頂部對齊的標簽是一個不錯的選擇。
頂部對齊的結構，使得能放下更長的標簽；但對于縱向空間是一個挑戰，當填寫信息過多時，表單就會很長。
2）左對齊：左對齊標簽，文字開頭按閱讀視線對齊，符合人們的閱讀習慣，是有利于閱讀的。
瀏覽表單所需時間最長，但是緩慢完成率并不總是一件壞事——如果表單要求敏感數據(例如提供駕駛證、身份證、銀行卡號等，可以故意減緩用戶的填寫速度，來確保填寫的準確性）。
左對齊的結構需要更多的橫向空間，因此在移動端的呈現上可以是個問題。
此外，在屏幕空間有限的情況下，也會一定程度上限制了標簽和輸入框的長度。
3）右對齊：右對齊使得標簽和輸入之間的距離固定，有明確的視覺關聯。
對于簡短的表格，右對齊的標簽可以有很快的完成時間；但由于標簽長短不同，左邊緣參差不齊，整體掃讀表單的時候不容易了解全部信息。
與左對齊類似，在屏幕空間有限的情況下，也會一定程度上限制了標簽和輸入框的長度。
4）內聯標簽：內聯標簽由于它對空間的占比很小，往往運用于移動端的界面設計中；但如果在交互上處理不好，會有很大的缺陷。
內聯標簽是用作提示性文字，來告訴用戶應該填寫什么內容，但用戶在填寫的適合，它就會消失；因此用戶無法仔細檢查他們是否寫下了所要求的內容，這增加了錯誤的可能性。
另外一個問題是：用戶可能會把占位符文本誤認為預填數據，因此忽略它（正如尼爾森諾曼集團的眼動追蹤研究所證實的）。
5）圖標標簽：圖標標簽是內聯標簽的一種演化形式，在一定程度上緩解用戶的困惑和自我懷疑的心理。
但就圖標而言，用戶需要時間來反應它所代表的意思——若表意性不強或者并不是常見的圖標樣式，用戶就要思考和猜測它的含義。
此外，輸入項一多，還得記憶那個圖標所對應的意思。
6）浮動標簽：用戶在輸入時，內部標題（提示信息）進行浮動位移，即節省了空間，提示性信息依舊在。
但相比其他幾種標簽樣式來說，需要一定的開發成本。
關于標簽樣式的選擇
輸入域是表單的核心主體，包含了文本框、選擇器、開關、復選框、單選框、步驟條、滑塊、上傳、標簽頁等控件（按類型分）。
選擇適合的控件樣式，能在一定程度上提高表單填寫的效率。
在輸入域中，存在多種控件樣式，那么在設計產品的過程中，我們該如何選擇，如何取舍呢？
以下是我在日常工作中的一些摸索，也包括借鑒前輩的一些經驗。供大家參考。
1）文本框
文本框包含了單行文本框和多行文本框。
針對單行文本框的設計建議：
a. 選擇適合的大小，它的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。
如下圖即一典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理的話，容易誤導用戶對所需輸入金額的判斷，造成極大不安全感。
b. 采用字段掩碼，自動匹配特定數字的輸入格式。
例如：電話、身份證、銀行卡等；按照7加減二法則，根據用戶的記憶結構來最大化提升閱讀體驗。
c. 彈出鍵盤應與需要輸入的文本類型相匹配（移動端）。
d. 涉及到金額輸入時，當用戶輸入的金額超過千時，出現最高分位提示，每多輸入一位，最高分位隨之增加。
e. 文字輸入最好有自動補全、自動建議功能，減少不必要的文字輸入，減少出錯。
例如：填寫地址欄通常是表單中最成問題的部分，像地址自動填充（基于用戶的定位和輸入提供準確的建議）的工具使用戶能以更少打字量完成輸入。
f. 有限制輸入時，給予用戶明確的提示，增加用戶感知，減少出錯率。
知識擴展：什么是7加減二法則？
早在19世紀中葉，愛爾蘭哲學家漢米爾頓觀察到，有一個神奇的7±2效應；意思就是人們的短時記憶的信息量是7個，可能會上下浮動2個。
針對多行文本框的設計建議：
使用可拉伸的文本框比固定框更好，從使用體驗講，可變化的文本框使頁面整體效果更統一。
固定文的文本框當輸入文本超過其設置的寬度，會出現內滾動條，當頁面上出現兩個滾動條時（大頁面的滾動條），在使用操作上會帶來一定的混亂。
2）選擇框
包括下拉列表、選框、開關、日期選擇器等。
對于選擇框有如下幾個建議：
a. 避免設置默認值：除非您認為大部分用戶將選擇該值，尤其是必填字段。
為什么？
因為你可能會增加錯誤，用戶會快速掃描表單，所以他們可能會跳過一些已經有默認值的字段。
但是這個規則不適用于智能的默認值，也就是根據用戶的信息設置的默認值；因為智能的默認值可以使表單更快，更準確地完成。
例如：根據定位數據預先選擇用戶所在的國家/地區。
不過，請謹慎使用。
b. 當選項很多時，提供檢索功能。
c. 提示信息要明確，要讓用戶明確自己選擇的是什么。
3）單選框與復選框
a. 按一定的邏輯進行選項排序，例如根據發生的可能性、難易程度、風險大小來排序。
b. 選項應該易于理解，容易區分。
c. 盡可能提供默認選項。
4）關于控件的選擇
a. 選擇框優于輸入框。
任何高密度的操作，都會引起用戶的不適；因此，在輸入項的選擇時，用選擇來代替鍵盤輸入。
相較于輸入框，選擇操作步驟少，相對來說效率較高；同時，用戶用思考輸入值，也不用承擔輸入錯誤要重新輸入的風險。
用戶可以通過選擇項，清晰明確的知道有哪些值可以選擇，對于一些無關緊要，或者用戶較難理解的輸入項，可以預制默認值，可以照顧到各階段的用戶。
b. 單選框與下拉選擇框。
單選框較為適合選項較少（少于五個），同時選擇項之間較為類似，需要強調或對比時，可以優先考慮單選框。
另外，當選項能見度和快速響應優先時，也建議優先考慮單選框。
因為相較于下拉選擇，用戶可以通過展示出來的選項，直接選中目標選項，提升輸入效率。
下拉選擇框較為適合選項較多（超過五個），有默認選項或者選擇項之間有較大差異，同時下拉選擇，最好不要引起隨后輸入項數量以及頁面的變化；否則下拉選擇的收起以及頁面的變化，易引起用戶不適。
若選項過多，超過二十個，最好引入模糊匹配以及一定排序規則（首字母排序、數字排序等），方面用戶提前預知選項的大致位置，或通過模糊檢索找到相應的選項。
5）關于必填項
大多數情況下，所有字段都是必填項，只有幾個字段是可選的，一般用“*”標記必填字段。
但星號并不適合所有類型的用戶，記得之前客戶問星號是什么意思？
它是頁面中的標簽還是描述中的標簽；同時，并且紅色會從用戶方面引起負面關聯，因為紅色表示錯誤。
為了避免這種誤解，可采用文本框內暗提示。
它也是一個比較清晰標志必填項的方式，并且還很節省空間，也能在一定程度上起到視覺降噪的作用。
提示信息可以分為引導性提示（幫助文字、輸入框提示、錯誤提示信息）和反饋性提示兩種。
這里主要想講講錯誤提示的設計：
1）關于錯誤提示的最佳位置
Javier Bargas-Avila和Glenn Oberholzer對表單驗證的研究發現——在表單頂部顯示所有錯誤信息，會給用戶的記憶造成較高的認知符合，會強制用戶回憶每個錯誤輸入框中的錯誤消息。
錯誤信息提示在輸入框行間顯示是減少記憶認知負荷的有效方法。
它可以幫助當場識別錯誤而不是靠回憶錯誤，縮短反應時間，提高表單填寫效率。
因此，錯誤信息提示與錯誤的字段鄰近放置可以獲得最佳性能。
下面來看一個簡單的例子，如下圖：
當我們在錄入客戶信息時，假設填寫錯誤手機號碼，按照上面的論述，錯誤提示可以最直觀的顯示在這4個位置。
哪一個位置是最佳位置呢？
答案是：右邊。理由如下：
a. 錯誤信息提示右邊，符合人們從左到右的閱讀習慣；用戶視覺路徑自然流暢，很大程度上減少了用戶的精力和視覺工作。
放在左邊則恰恰相反，同時左邊與用戶期望相違背，因為左側放置更高優先級的元素，是我們的直覺。
但事實上用戶需要專注于糾正他們的輸入，因此輸入框應該是更重要的元素。
b. 對于上邊的錯誤信息提示，有著更高的認知負荷。
當標簽頂部對齊時，錯誤提示和輸入框中的提示這兩個文本靠得很近會產生視覺噪音，用戶注意力被分散，很難專注于其中一個，并且可能混淆它們。
c. 放置下邊的錯誤信息提示，雖然不符合從左到右的閱讀習慣，但它確與自然的從上倒下的閱讀流程相對應。
手機屏幕缺少水平空間，把錯誤信息提示放置在下方是個不錯的選擇。
雖然它可能會增加用戶閱讀文本時的認知負荷（與類比上邊的錯誤信息提示），但可以通過將它們隔開足夠的間隔來防止這種情況。
綜上所述，如果是web端請選擇放置在右邊，如果是移動端則放置在下邊。
當然，如果開發時間有限，都選擇放置下邊也可以，方便適配。
2）幫助信息
有時候需要幫助性信息，來輔助用戶完成表單填寫。
當文本簡短的時候，可以直接放在改輸入框的附近。
當文案過長的時候，就需要做氣泡框——獲取鼠標焦點，則展開信息，失去焦點則消失（在氣泡展開時，切忌勿擋住input輸入框）。
也有些產品是將幫助信息放在頁面頂部，如果是針對全局幫助性信息，則可以采用這種方式。
如果只是針對某個元素提醒，則應將兩者放在一起，讓用戶知道當前處于什么地方，在針對什么進行引導、輔助。
在復雜業務表單設計中采用單列布局，大家有沒有遇到過類似的問題，例如：
針對這些問題，我們團隊從自身的業務出發，對復雜業務表單布局進行了相應的探索。
首先，我們根據下圖的規則對復雜業務的表單布局進行多方案的實驗：
方案一：采用4列布局，標簽頂對齊。
那為什么標簽不采用右對齊呢？
四列布局，頁面已經很擁擠，加上標簽長度長短不一且最大長度也無法確定（用戶自定義），所以放置采用了標簽頂對齊。
總體上來看，縮減的長圖并不理想。
方案二：三列布局，標簽右對齊的方式。
由于三列布局，頁面空間較大，嘗試著把標簽右對齊，總體上達到了縮減表單長度的目的。
但字段若出現換行，則頁面信息模塊是混亂的。
根據CXL研究所的發現：單列表單比多列表單完成得更快一些。在這項研究中，參與測試的人完成單列表單的平均速度比多列表單快15.4秒；多列布局雖然縮減了表單長度，空間利用率也提高了，但整體的填寫效率降低了，這與表單設計原則相違背。
同時從開發效率來看，單列成本較低（多列需要做響應式）；從業務承載上看，單列擴展性更強，適合復雜多樣的業務場景（多列適合交單一的場景）。
綜上，最后還是采用單列布局。
面臨的問題該如何解決？
我們團隊重新審視了客戶的這些反饋：空白區域過大、留白過大、表單太長、我看不全、不知道什么時候可以填完等等。
我們嘗試把這些問題翻譯成：我無法預知表單的填寫內容，我想要是把空白的地方也利用上我是不是就看全了整個表單。
如果是這樣，用戶的本質述求就是想要掌控感。
對現有的單列布局做了以下幾個處理：
感謝閱讀！本文給表單設計提供了一個基本的指南，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。
文章來源：人人都是產品經理 作者：@Nick
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：如今，谷歌可以說是科技領域最大、最具有影響力的公司之一。正因為如此，它們的數字產品設計會對整個行業產生巨大的影響，成為人們競相模仿的榜樣。在該公司的UI&UX（用戶界面&用戶體驗）設計指南中，設計師們提到了10條原則，不管是iOS還是安卓系統都同樣適用。在這篇文章中，作者從這10條指南出發，加上自己的經驗和相關案例，在設計方面為大家提供一些建議，希望對大家設計產品有幫助。
這里的聲音特指“Hero sounds”，用于襯托一些喜慶的、重要的高光時刻，它們常被用來激起用戶的情感，或烘托一種喜悅的氣氛，從而塑造產品或品牌在用戶心中的形象。以下場合適合使用 Hero sounds：慶祝用戶進行了某項操作；歡迎用戶使用新的應用程序或體驗；確認用戶成功使用某款產品?！豆雀杪曇粼O計指南》
聲音可以被用來傳遞成功、成就或獲得回報等信息。谷歌指南中提到，Hero sounds出現的次數不應該頻繁，否則無法突出其重要性。通過在同樣的環節提供同樣的聲音，久而久之用戶會將這種提示音與成就感掛鉤，從而增加對產品的粘性。如每成功更新一次應用程序就會出現慶祝的聲音，或者每次待辦事項標記為完成后就會出現慶祝的提示音。
不管我們是否注意到這一點，我們所聽到的產品的聲音與自己的感覺都是相掛鉤的。無論是手機發出的“叮咚”的消息提示音，還是MacBook的廢紙簍在清空時發出的揉紙的聲音，都在某種程度上影響著我們的情緒，也幫助我們更加了解用戶界面上發生的一切。
觸覺可以和聲音配合使用，也可以單獨使用。舉個例子，在手機黑屏的時候，觸覺是唯一一種可以對用戶提供反饋的方式。和其他配合使用時，觸覺應該強有力、傳達愉悅的情緒?！栋沧坑|覺設計指南》
除了聲音之外，觸覺設計（如震動）也是一種刺激感覺的好方法，可以為用戶提供更加完整的體驗。用戶可以通過觸覺提示來嘗試、學習使用某一款產品。在有了不同的觸覺體驗后，我們將會對產品的某些功能有更加深入的了解。
舉個例子，如果某個用戶通過APP進行付款，但在付款過程中出現了錯誤。這時候APP會進行一連串緊張、短促的震動，對用戶進行錯誤反饋。當用戶熟悉了這種震動模式之后，下一次再感受到這種震動，就會立刻知道付款出現了問題。
產品設計師很容易忽略聲音和觸覺這兩個板塊，而過度專注于畫面。但這兩個板塊卻也扮演著非常重要的效果，可以為用戶體驗錦上添花。
圖片來自Material
動圖可以增加用戶的好感，在互動中為用戶增加個性化體驗，也可以表現品牌獨特的風格?！豆雀枋謩菰O計指南》
動圖是我自己設計的產品Confetti中一個非常重要的因素，這是一款運動追蹤APP，是為那些追蹤自己生活習慣的用戶設計的。在設計這款產品時，我希望可以為用戶創造出一種滿足感，鼓勵他們培養好習慣。在這款APP中，我大量使用切換功能，通過不同的手勢，界面或進程可以平滑過渡，使用起來非常便捷。當一個好習慣完成時，還會出現彩屑動畫飛舞的，加強用戶的滿意度。
簡言之，動圖可以應用于不同的場景，通過過渡和變化的吸引用戶。
動圖可以強化兩種元素之間的聯系，實現快速切換，迅速解決特定的任務。動圖可以讓用戶專注于眼下最重要的事，不被其他因素所干擾?！豆雀枋謩菰O計指南》
在2020年，你的產品可以在一秒之內激怒用戶。正如塔拉斯·斯凱斯基（Taras Skytski）在《用戶體驗設計中動畫使用的終極指南》中指出的那樣：“眾多研究發現，界面動畫的最佳速度在200到500毫秒之間。這一數字是通過研究人類大腦運行機制所得出的。100毫秒及以下的動畫因為速度太短而無法被識別，而超過1秒的動畫則會造成一種延遲感，讓用戶感到不舒服?！?/span>
通過動圖及產生的動畫效果（如切換）可以改善用戶體驗，同時保證可以迅速找到需要的版面，而不被其他信息干擾。但如果動圖及切換畫面的過程增加了不必要的等待時間，又不能改善體驗，那么這種環節就沒有必要存在。
圖片來自Bribble｜制圖Elena Petkovska
我們或多或少都有這樣的體驗：打開一個界面，里面充斥著太多文字和太少的圖像。在用戶體驗設計中，展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產品，而是希望通過圖像對一款產品進行直觀的視覺理解。
你所選擇的圖像應該能夠清晰地展示產品特點，不管是用戶自己上傳的圖片，專業攝影師的圖片，還是插畫風格的圖片，它們都應該能直觀展示產品外觀，反應產品的特點。——《谷歌圖像設計指南》
APP里的插圖和所有的視覺元素一樣重要，好的圖片可以讓用戶界面更加生動，使用戶體驗更加完善。恰當的圖片還能展示品牌風格，成為無聲的“故事講述者”。
我們應當有目的地使用圖像，作為總體內容的補充而非替代。照片或者插圖最好能夠傳達足夠的信息，如產品外形、風格，APP的用途，狀態等。媒體界有這么一句話：一張圖片抵得上1000個字。你可以在Unsplash、Pexels、Adobe Stock等網站上找到高質量的圖片。
圖片來自Material
用戶界面設計中應該關注產品的像素密度，讓界面可以適應不同的屏幕?！豆雀柘袼孛芏仍O計指南》
像素密度（PPI）是用來衡量每物理英寸的像素數。另一個常用的單位是DP（Density-independent pixels，有時候簡稱為DIP）。像素密度=屏幕寬度或高度（以像素為單位）/屏幕寬度或高度（以英寸為單位）。
在設計界面時，我們不應該只關注像素，還應該關注不同設備的像素密度。這樣可以讓我們在做設計時保證元素適當縮放，以適應不同屏幕的尺寸。
舉個例子，我們現在有一個按鈕素材資源，大小為200 x 50 px。在一個160ppi的屏幕上可以原畫顯示；在一個320ppi的屏幕上它就會擴大成400 x 100 px，相當于原始素材的兩倍大。
通過以上例子我們可以了解，在像素密度不同的屏幕上，素材呈現的狀態是不一樣的。在實際應用中，素材可以會被放大三倍甚至四倍，如果素材不夠清晰，就會在拉大后虛掉。這就需要我們在選擇素材時格外謹慎，嘗試在不同設備上打開并檢查。
素材密度如何適應屏幕尺寸？舉個例子，iPhone XS Max的屏幕是414 x 896 pt，注意這里的尺寸是物理尺寸pt，而非像素。如果以像素為單位計算，那么它的屏幕是1242 x 2688 px。所以當我們為iPhone XS Max設計應用產品時，我會首先考慮用414 x 896 pt的素材，然后在輸出素材時將其乘以3。
圖片來自Material
離線狀態可以讓用戶知道這款應用程序沒有連接網絡。如果你的產品有一些功能需要聯網使用，你最好能向用戶明確顯示連線狀態?！豆雀桦x線設計指南》
離線訪問功能是設計師經常忽略、對用戶體驗影響卻非常重要的一環。雖然有些功能離線也可以使用，但是在能聯網的時候，最好還是主動提示用戶，推薦他們連接網絡。
如果有可能的話，要提前告知用戶下載相關信息，以便脫機訪問。最常見的例子就是Spotify等音樂應用程序，它允許用戶下載歌曲，以便在沒有網絡的時候也能繼續聽歌。
假如你的產品不像Spotify或者Netflix那樣需要下載具體內容，你可以發揮創意來設計在線、離線兩種模式。
谷歌瀏覽器在離線頁面提供恐龍游戲就是一個著名的例子（在谷歌瀏覽器連網的過程中，離線畫面會出現一只霸王龍，按空格鍵或者向上的箭頭就能控制霸王龍——譯者注）。這個小游戲填補了用戶等待連線的時間，將消極體驗轉變成了積極體驗。
我希望這份設計指南可以為你提供一些想法。除了谷歌的設計指南之外，我們還可以在IEM Carbon、Zendesk Garden、Workday Canvas等網站找到關于用戶界面和用戶體驗的設計指導，在這一領域進行更深入地探索。
文章來源：人人都是產品經理 作者：Danny Sapio 譯者：Michiko
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
LOGO 是品牌設計當中最為重要的一環，LOGO 本身的設計不僅昭示了品牌的身份，甚至可以表現品牌的價值觀和特點。你可能想開拓新的領域，或者重塑舊有的業務，又或者是基于 2020 或者2021 年的新趨勢，將原本的 LOGO 升級，這些都是促使 LOGO 革新變化的契機。
和視覺設計不同，LOGO 的設計常規類型其實是相對固定的，通常不會有某種類型的 LOGO 占據主流，但是不同類型的 LOGO 呈現出不同的變化和趨勢傾向，下面就是 LOGO 設計在 2021 年呈現出的 11 個趨勢：
2021 年將會是 3D 在設計領域中徹底崛起的一年。而相應的，在 LOGO 設計領域，光影細節也成為了很多企業和品牌體現品牌價值和特質的一種設計策略。如果你正在尋找一種流行的風格，或者打算將已有的 LOGO 翻新升級，試試立體的 3D 設計，這可能是當下的一種設計風格。
這是最近2年又重新流行開來的一種設計風格，復雜的輪廓和陰影，筆觸細節豐富，繁雜但是令人愉悅，手寫和手繪都融入其中，從手寫風格的文本到近乎手繪的圖形圖像，你能在這樣的 LOGO 設計中感受到強烈的品質感，感知到精致的元素和獨特的個性，整體其實是給人耳目一新的感覺。
文字 LOGO 一直是 LOGO 設計中的一個比較大的門類，只需要使用特別風格化的字體來呈現品牌的名稱，就能夠很大程度上傳遞品牌的主要信息和氣質，它足夠簡明，不費吹灰之力就可以確保信息的傳達，視覺的美觀，氣質獨特，并且獲得某種程度的認可。下面的 LOGO 都是2020年新設計的文字 LOGO 中，比較有特點和代表性的作品。
有很多品牌本身，和自然元素是有關聯的。在今年這個大環境之下，大家對于自然的青睞是無與倫比的。這也是的很多和自然元素相關的品牌，會盡可能多地在設計的時候從自然汲取靈感，盡量創造富有識別度，有著平靜協調氣質，并且能夠讓人想到「自然」的設計，下面的案例就是典型：
黑白是永恒的經典。通常，黑白 LOGO 會更加考驗設計師對于形體和構成的認知。優秀的黑白 LOGO 通常輪廓分明，優雅又頗具識別度。
有意思的地方在于，2021年的黑白 LOGO 并非和往常一樣毫無新意，很多設計師會將 3D 效果、動畫和黑白 LOGO 結合到一起來進行設計。
生動的色調，明亮的色彩，只有扎眼的設計才能夠在第一時刻抓住用戶的注意力。在 2021 年，反常規、大膽的用色會是 LOGO 設計當中相當合理且出彩的一種策略。用戶會下意識地被品牌色吸引，這也能夠讓LOGO 和品牌最快發揮效用。
角色總是能夠更容易引起共情，因為一個具體的角色總能夠更加具象和立體地呈現特征、傳達情感甚至在某些方面引起互動。
值得一提的是，在品牌設計方面，設計師將想象力和品牌特征加諸角色，也可以幫用戶和觀看者構建出想象空間。
使用角色或者吉祥物構建的 LOGO 可以更加輕松地應用到海報、標牌、廣告、動畫、社交媒體等地方。這類 LOGO 設計的重難點，是如何通過簡單的角色傳遞出獨特的氣質和情緒。
在抖音風靡全世界之前，很少會有人在 LOGO 中玩故障效果。一方面是故障風并沒有那么主流，雖然很贊很賽博朋克，另一方面是和故障風在氣質上契合的品牌其實并沒有那么多。
不過在這個注意力資源稀缺的時代，前有大廠帶路，后有市場壓力，很多品牌開始在條件允許的情況下，盡可能地采用更為大膽的故障效果，瘋狂地、富有創造性地嘗試這一效果。
總而言之，如果你正在尋找一些特殊的 LOGO 效果，來試試故障效果吧。
動效，或者我們稱之為微動效，是在2020年之前就存在的東西，不過在 LOGO 設計領域的大范圍流行，應該在 2021 年。在數字硬件性能過剩的今天，讓 LOGO 動起來并不是什么大事，只要它能夠吸引用戶的注意力。
唯一的問題是在于，怎么動才會讓它恰到好處？很簡單，看看別人都是怎么做的：
和 3D 設計一樣，漸變色也一直身處設計領域的話題中心。漸變本身會賦予 LOGO 以更強的體積感和立體感，讓色彩更加有趣，即使 LOGO 不動的時候，依然具有足夠的「動感」，這大概是漸變色最富有價值的地方。
值得注意的是，隨著「擬物化」的「文藝復興」，大幅度漸變色重新成為了設計師們的寵兒，雖然這是大趨勢，但是在設計 LOGO 的時候，依然要注意堅守品牌色，同時控制好變化幅度，避免過猶不及的情況發生。
回歸簡約和基礎可能也是 2021 年 LOGO 設計的一個重要的主題。很少有東西能像基礎的幾何圖形那樣具有啟發性和趣味性。
將基礎的幾何圖形進行重新的排列組合，可以創作出各式各樣的圖形，傳達隱喻，還富有藝術性。在2021年，你可以嘗試一下這種 LOGO 設計，它巧妙且有趣。這種設計還可以結合動畫和色彩變換，創造出引人入勝的動畫效果。
相比于其他的設計門類，LOGO 設計更加考驗設計師的基本功和打磨的耐心，而與此同時還能擁抱變化的設計師，能夠在接下來的 2021年，創作出更優秀的作品。
文章來源：優設 作者：Iveta Pavlova
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
內含2020天貓雙十一全套設計高清圖集
友情提示：史上最全案例解析，2020天貓雙十一全套設計高清圖集可在文末找到獲取方式。
一年一度的雙十一今年又迎來了高峰，在今年全球疫情蔓延、國際局勢風云突變的背景下，天貓雙十一再一次刷新世界的認知，把世界記錄推上一個新的巔峰。
「 羅馬不是一天建成的！」
天貓雙十一的奇跡，也不是一蹴而就。
奇跡的背后，是所有人十年如一日的自我挑戰、追求的共同結果。但同時，對于阿里小二來講，雙十一也成為了一項無比艱巨的任務，他們需要在所有人的期待和關注下，頂住壓力給大家一個驚喜。
這其中，就有一支神秘的隊伍：天貓雙十一品牌設計團隊，正是他們在背后持續的耕耘，不斷刷新“雙十一”的顏值，在潛移默化間，讓一個購物節，開始真正擁有了“節日”的味道，讓設計和設計師，在整個雙十一中發揮出越來越重要的價值。
他們有著怎樣的堅持？又是如何突破自我？相信聽完他們的故事，你自然就會有答案。
2020天貓雙十一主LOGO
多語言版本LOGO
今年是雙十一的第12年，基本上每年雙十一品牌設計一發布，我和團隊就會陷入深深的焦慮?！懊髂昴銈兇蛩阍趺赐妫俊笔煜の覀兊呐笥芽偸窃诤臀掖蛉?，其中一半是玩笑，一半也確實是我們內心的真實寫照。
記得前兩年我就提到，天貓雙十一logo可能是最難的logo之一... 他的難點在于，在「 貓頭+11.11 」框架不變的基礎上，我們如何在僅剩下的20%設計空間中去傳達每年不一樣的主題，賦予雙十一1個新的內涵。
一年一度的挑戰
其中最大的挑戰，還是這個符號本身，這些年我們以每年幾百個方案的量來嘗試不一樣的表達、能玩的形式基本都嘗試了個遍。
在今年項目最初期，我確實也在想，“不就設計個logo嘛，想這么多有的沒的干嘛？”所以，我們倔強的嘗試從純粹的設計形式上去尋找突破口，在出了一版又一版的方案之后發現，要么似曾相識，要么完全看不懂... 這顯然是一條不歸路，但時間的壓力卻擺在那里。在這個關口，我們將何去何從？
LOGO前期DEMO
一個聲音開始不斷在腦海中響起：「 全局著眼，細節著手 」
這些年，每當項目進展陷入僵局的時候，我都會想起它。
“全局著眼”講的是不能單一、片面的看問題，要把事物放在全局里考慮，不僅要考慮事物本身，還要考慮它和其他事物的聯系和關系。只有這樣，才能洞察到事物的本質，往往無從下手是因為看的不夠廣，不夠深，找不到切入點，“眼盲所以手瞎”。
“細節著手”講的是全局的思考最后要巧妙的落在細節上，深入淺出，用細節的力量觸動人心。
共創過程
那么，我們應該如何“全局著眼” ？
首先，回到設計的本質來看，“設計的本質是將一個想法和觀點，通過設計的轉譯，巧妙的傳達給受眾?！逼渲械暮诵氖且纫业健跋敕ê陀^點”，而“想法和觀點”來自于如何通過一個全新的視角看待原本熟悉的事物。
因此，團隊的小伙伴們，開始在不斷的問自己一個問題：對于雙十一，我們還有什么新的想法和看法？“全年最便宜的一天”、“購物狂歡節”、“買買買”、“不只5折”…這些都是大家耳熟能詳的東西，是不需要去說而大家都知道的事。
那么今年這個雙十一，又和過去有什么不一樣？
今年確實不平凡。
疫情產生的連鎖反應，影響到每一個人。大家開始關注新冠肺炎的確診數、關注熔斷后的道瓊斯指數、關注受災的地區和人數、關注銀行里的存款數 … 而本該體驗美好生活的計劃被擱置或者延后，原本觸手可及的理想生活，在這一年變的異常難得。
「 生活，本該是我們珍惜的一種經驗，而不是要一起捱過去的日子 」
文學大師莫言的金句，放在當下，十分應景。假如沒有疫情的影響，我們的生活會更加理想。這是深藏在我們每個人內心的真實訴求 ...
「 理想生活，本該如此！」
一句感嘆脫口而出，它就是我們當下內心真實的寫照，是所有人都能感受到的共鳴！這一刻我們仿佛被點亮，心中莫名興奮，激動不已…
當激動的心跳逐漸平緩，頭腦恢復冷靜，我們又陷入了深深的沉思...
「 理想生活，本該如此！」然后呢？行動號召是什么？
和雙十一又有什么關系？
洞察
回顧過去，每當我們民族或自身遭遇困境的時候，總能激發起骨子里那股不服輸的精神。不管眼前有多難，現實如何殘酷，你總能見到身邊那些勤勞積極的人，面對生活的艱辛，默默的付出，想盡一切辦法讓自己好起來。這是最樸實而真實的愿望，也是扎根在我們每一個中國人骨子里的“大智慧”，正是這種“大智慧”，讓我們總能一次又一次的從困境中走出，然后又一步一個臺階，讓生活越來越接近自己理想中的樣子。
「 理想生活，本該如此！」
所以我們要“想盡一切辦法好起來” —— 每一份認真生活的理想，都值得被鼓舞。
今年的雙十一和往年相比有著更加特殊的意義 —— 作為一個國民級的購物平臺，面臨后疫情時代振興經濟的使命，我們不僅要將雙十一這個節日延續下去、同時我們還要通過這個節日讓廣大的商家和消費者，重振信心！
品牌溝通策略
因此，天貓雙十一在業務上也和往年有很大的變化：
首先是新供給：今年的雙十一，會讓更多的品牌和商家入場，不僅將原有的品牌翻倍擴充到25萬家，同時還把重點放在扶持更加需要幫助的500萬中小商家、新國貨商家、外貿企業、產業帶工廠、農產品商家，讓他們借助雙十一走出困局，煥發新生。
其次是新玩法：將原本“雙十一全球狂歡節”升級為“狂歡季”，把全年最便宜的一天，變成兩波售賣期，拉長了狂歡的時長。一方面是幫助商家帶來更多增長、更多機會，讓商家真實感受到“生意在變好”；同時也讓消費者有了更多選擇、更多便利、更低價格、更大實惠，讓消費者切身感受到 “生活在變好“。讓雙十一，通過“買買買”所帶來的理性價值，最終轉化為 “天貓雙十一，讓我好起來”的情感價值。
我們把這個情感價值，翻譯成為了和所有人溝通的語言 ——
「 Cheer Up! （生活會更好，加油?。?/span>
core idea
想到這里，今年品牌設計的方向越來越清晰，這就是我們通過“全局著眼”得到的設計方向。
接下來的任務，就需要我們從“細節著手”把「 Cheer Up! （生活會更好，加油！）」具象化的表達出來。我們再一次回到了「 貓頭 + 11.11 + ？」的公式，和之前不同的地方在于，再次回來，方向變得清晰了很多。
「 Cheer Up! 」通過什么具體的畫面能夠直觀的感受到？
當我們把這些畫面集合在一起細心的觀察，不難看出這些畫面多少都有些共同之處的細節：就是大家都會情不自禁的伸出手臂，內心活動配合肢體傳遞出自己的能量；這個動作非常直觀的讓我們感受到了向上的正能量，這是不用解釋就能理解的語言。
而當我們再把「 貓頭 + 11.11 + 振臂高揮 」結合在一起的時候，渾然天成；只是增加了一個小細節，整個符號突然有了生命力。
——— 天貓伸出圓（援）手，為你加油！
尤其是配合動態表達，一目了然... 這就是我們要的深入淺出！
把難以理解的圖形，直接轉化為一個活生生的形象，面對面 和所有人溝通。
動態Logo設計
Slogan設計
當然，搞定了Logo和Slogan，還只是整個雙十一品牌設計中的第一步。
接下來，我們還要把「 cheer up! （生活會更好，加油！）」這個核心創意延展到線上線下各個場景，讓大家全方位的感知到這股振奮人心的力量。
2020雙十一品牌全鏈路體驗地圖
天貓雙十一 · 全世界的狂歡季
2020雙十一Format 「上揚的生命力 ╱ Up」
首先，通過提取品牌心境映射中「振臂高揮」的積極態度，結合其視覺映射「上揚的生命力」的明確感知，我們定義了簡潔有力的品牌Format:「 Up ! 」
2020雙十一品牌Format「 向上的生命力 ╱ Up 」
同時我們將標識動態與品牌Format結合在一起，定義了線上動態品牌版式。不僅為適應日漸多媒體化的投放環境，也進一步增多與用戶情感化溝通的場景。
2020雙十一品牌Format動態版「 向上的生命力 ╱ Up 」
2020天貓雙十一線上會場設計
2020雙十一貓頭海報：天貓與超級品牌們、1起挺你！
2020天貓雙十一定制禮盒
在過去幾年，我向大家介紹過天貓雙十一的主風格來龍去脈；而在今年，我們在傳承雙十一節日氛圍的同時，于視覺主風格上做了進一步創新：同樣通過提取品牌心境映射中「振臂高揮」的積極態度、結合視覺映射「上揚的生命力」的感知，我們嘗試用更明確的視覺系統來傳達「Cheer Up! 」這個核心創意。
相比符號，視覺風格更直觀易感知，它可以通過形色質構形成全方位的表達。
2020雙十一視覺系統 「向上的生命波長 ╱ Up」
置身于晴空萬里無云，噴薄而出的、充滿力量的上揚繽紛飄帶 ...
當我們將這些元素結合的時候，就形成了今年雙十一獨特的視覺語言；再通過加入溫暖并有力的手寫Slogan與形色質構的拆解，應用到各個場景。
2020雙十一主視覺系統:「 向上的生命波長 ╱ Up 」
2020天貓雙十一新聞發布會：開啟的儀式！
2020天貓雙十一直播開幕盛典：天貓與眾明星1起挺你！
天貓雙十一 · 理想之城：攜手8座城市、與全中國1起挺你！
天貓雙十一主題曲：天貓 × 易烊千璽 ×千喵、1起挺你！
2020雙十一限定天貓形象「給力貓」
更為突破的是，天貓在今年、繼貓頭海報品牌資產落成后 —— 通過雙十一限定天貓形象，集結全球8個國家、108個IP，組成「挺你天團」！一起為年輕人的生活態度發聲！
「 罕見名場面！」天貓與百大IP、世紀大同框 ...
天貓攜手百大IP聯名：世紀天團集結、1起挺你！
全套高清圖集獲取方式請看文末
天貓與變形金剛、小豬佩奇、hello kitty、泡泡瑪特、海爾兄弟等世紀大同框！他們1起組成劃時代的超級聯名，為年輕人的生活態度發聲！力挺你盡情熱血、盡情自我、盡情燃、盡情佛、盡情旅行、盡情閱讀....
每一種理想生活 —— 都有我們、
以及這顆星球上的超級IP們 ...
1起挺你！
天貓雙十一，1起挺你、盡情生活！
文章來源：UI中國 作者：Ali ba baDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網頁中超過95%以上的信息都是通過文字的形式呈現。 然而，頁面文字并非毫無章法的隨意呈現。事實上，更具可讀性、視覺效果以及獨特排版和布局的網頁文本設計，更能吸引用戶，提升用戶愉悅度。這也是為什么越來越多的設計師日益重視網頁排版設計的重要原因。
BS界面是基于瀏覽器的界面，隨著人們對于用戶體驗要求的不斷提高，BS界面的設計要求也越來越高，
接下來為大家分享一下我收集到的案例：
（圖片均來源于網絡）
點擊查看更多UI/UE設計案例??????
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
彈窗是我們平時在設計APP時候繞不開的一個元素，選擇合適的彈窗形式，是我們需要多加思考的地方，避免變成只會完善產品原型的線框美工。
彈窗是我們與機器界面進行互動的一扇窗，它是一種用戶與產品直接對話的方式，它可以傳達信息，反饋狀態以及引導用戶操作。彈窗分為兩種類型：模態彈窗與非模態彈窗（有些地方可能翻譯為無模式窗口）。
模態彈窗
用戶需要先與其進行交互，才能繼續操作。也就是說它是強制性的，用戶無法忽視它的存在。確保人們收到關鍵信息，并在必要時采取心動。
非模態彈窗
存在一定的時間限制，通常用于系統反饋，用戶無需對其進行回應。
1. 對話框 Dialog / 警告框 Alerts
出現在需要打斷用戶操作的情況下，可以大致分為信息下發（被動）例如：版本更新，消息通知，運營廣告等。信息提交（主動），例如：修改信息，登錄注冊等。
通過上面幾個案例我們還能發現幾個特點，按鈕可以通過差異化設計引導用戶去點擊（例如美團的版本更新），運營類彈窗一般更注重視覺沖擊力，且刻意將關閉按鈕弱化遠離彈窗主體，背景蒙版顏色更深一點，營造更強的沉浸感。對于承載輸入功能的彈窗，需要注意鍵盤彈出后的位置。類似系統功能的彈窗，比如清理緩存可以考慮直接調用平臺的系統彈窗。
2. 浮層 Popover / Popup
通常在用戶進行交互后出現，比如常見的下拉菜單，下拉彈窗等，更加強調彈窗的從屬關系。（在騰訊ISUX騰訊文檔的文章中使用了模態浮層與非模態浮層的概念，有興趣可以去看看）。
同樣都是下拉彈窗，但是很多產品有著不同的處理方式，微博通過暗色系彈窗來明確區分彈窗內容與背景內容，釘釘通過加深背景蒙版來突出彈窗內容，大眾點評只使用了淡淡的投影，去掉了背景蒙版，使得彈窗內容與背景內容對比無法拉開，在實際體驗中相當影響用戶的識別效率。
3. 操作欄 Action bar / 操作列表 Action Sheets / 操作視圖 Activity Views
跟浮層有點類似，也是通過用戶的主動交互后喚出的功能菜單。通常出現在屏幕下方，占用屏幕比例較高，為了方便用戶使用，底部會放置取消功能。（Action Sheets和Activity Views是IOS官網規范中的叫法。）
這種類型的彈窗最常見的場景就是分享模塊，比起其他的模態彈窗，它能夠承載更多更豐富的功能（多為選擇項功能）。支付寶和微信公眾號分享算是最標準的Action Sheets，為了減少用戶不必要的記憶負擔，彈窗高度限制較低，露出更多的背景內容協助用戶記憶。
4. 卡片 Sheet
Sheet是出現在IOS人機交互指南中的一種模態窗口，形式為一張從底圖出現的卡片，幾乎覆蓋了全部的原頁面。但是未覆蓋的區域也會使用暗色蒙版來幫助用戶記憶暫停的任務。因為它支持上下拖動，所以比起浮層，它能夠承載更多的復雜信息內容，常用于一些表格無法承載的復雜任務但又非沉浸式的情況下。
比起Action Sheets，Sheet的屏幕覆蓋率更高，且更多時候承載的是信息錄入型功能。Sheet需要頂部標題告知用戶當前所處步驟信息，通過底部卡片形式的疊加讓用戶感知當前處理的任務流程為主流程的分支任務。
5. 其他補充
隨著交互體驗與產品技術的不斷發展，如今的設備都能承載越來越多復雜精細化的模塊。所以漸漸有越來越多特殊的彈窗形式。（底層邏輯是互通的）
例如網易云音樂的分享使用了沉浸式模態，多個彈窗組合的形式，還有動效引導，以此來承載自身豐富的分享形式。IOS桌面使用聚焦類型的彈窗菜單，幫助用戶進行視覺聚焦。
1. 提示框 Toast
常見用于反饋用戶的操作結果，反饋應用的狀態改變，一般持續2s左右便自動消失，可能出現在任何位置。（不能通過主動滑動關閉）
目前最常見的場景就是各種刷新反饋信息，一般來說存在感都比較弱，比如案例中的知乎，B站和INS。比起B站和INS，微博和知乎都在其中融入了自己的品牌特征：主題色點綴，雖然只是個小細節，但是對用戶的品牌感知能起到潛移默化的作用。
2. 提示對話框 Snackbar
Snackbar最早是出現在Android的一種彈窗形式，不過現在很多IOS端產品上也會出現。它有點類似Dialog和Toast的衍生，很多時候像Dialog一樣可交互，有時候又像Toast一樣有時間限制。通常出現在屏幕底部，由頁面底部向上滑動出現，向下滑動消失。
由于目前手頭木有Android手機，所以截了Material Design的官方說明案例來幫助理解。主要強調了兩個點：1.不要加Icon，2.只能有一個操作項；因為snackbar及時不操作也會消失，所以比較常見運用與工具類產品，需要保持操作的連貫性。例如郵箱類產品，用戶刪除了郵件，snackbar可以及時反饋刪除成功的狀態的同時提供撤銷的操作。
3. 透明指示層 HUD
HUD是出現在IOS端常用的一種非模態類型，最早出現在屏幕中間，由于容易影響用戶的沉浸式體驗，所以在IOS13版本中對HUD進行了邊緣化調整。
對比左側與右側的HUD就會體會到為什么早期會被那么多人吐槽，特別是在游戲類的沉浸式應用中，很容易破壞用戶的體驗。
1. 展現形式
展現形式核心是分場景，一些偏向系統報錯考慮使用最簡單系統的彈窗展現形式，運營廣告之類的可以通過特殊的設計手法來吸引用戶。但是不管怎么做，一定要讓用戶懂得，這是一個彈窗。非模態彈窗一般多以最簡單的形式出現，避免傳遞狀態信息時干擾用戶的關鍵信息獲取。
2. 按鈕模態彈窗一般情況下只放置1-2個按鈕，信息告知類型的放個“確定”，重大決策類型的放個“確定”“取消”。比較特別的是權限請求彈窗，可能會有多個按鈕?，F在很多運營廣告為了曝光率會將關閉按鈕放在邊邊上，對于用戶體驗上來說相當的不友好，但是對于運營數據上來說可能會很好看。
3. 動效因為彈窗承載文本量有限，得利于設備技術的發展，現在越來越多的產品會在模態彈窗中使用動態的形式傳遞信息，例如很多產品的功能引導。對于非模態彈窗來說，由于本身存在感較弱，動效運用于合理順應用戶的視覺動線，例如你下拉刷新后，一般刷新反饋彈窗都是出現在用戶當前的視覺聚焦點。
4. 時機頻率把握好彈窗出現的時機和頻率
模態彈窗會直接打斷用戶的操作狀態，一般只有在不可逆，或者操作會造成嚴重后果的情況下出現。但是在一些特殊的商業需求下，比如運營廣告，那就得權衡用戶與商業利益之間的關系了。非模態彈窗的話更注重出現的時機，反饋一定要足夠及時，這樣才能不會讓用戶在操作中產生疑慮。
5. 文案表述
由于彈窗的信息承載量非常小，所以一定要用最精煉，恰當的表述來告知用戶信息或者當前狀態，可以考慮使用“動詞+名詞”的組合短語，例如“刪除照片”“取消訂單”等等。特別是非模態彈窗那種會自動消失的，文案字數要更加注意（可以考慮增加一些通用icon顏色輔助表達，比如正確使用綠色打勾）。
6. 輸入內容
很多彈窗承載著表單輸入的任務，然而彈窗并不適合過多的表單輸入，特別還有一些多到需要下拉了- -如果需要用戶填寫很多表單，乖乖跳轉新頁面吧。況且彈窗本身出現就已經中斷了用戶原有的操作，還要填一大堆東西的話。。（除了IOS的Sheet，它的出現就是IOS官方為了解決常用于一些表格無法承載的復雜任務但又非沉浸式的情況。）
由于目前手頭目前沒有Android，所以截圖案例都是基于IOS端，下次有機會繼續修改更新。不過目前來說兩端很多交互形式越來越趨向共通。
借由這篇文章開了“設計控件”系列的坑，接下來會繼續學習與分享其他的設計控件相關知識。包括之前的設計原則系列，也會繼續分享設計心理學法則等等。最近一直在思考自己的學習框架，除了設計基礎原則，設計控件外，還有設計模型以及設計工具等等?？右淹诤?，接下來就靠自己一鏟子一鏟子去填了。
文章來源：優設 作者：Chinn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“小紅點”表面上是一個視覺設計問題，但背后其實是一個產品策略和如何調度用戶注意力的問題。
你是否遇到這種場景，打開一個APP想趕緊用呢，結果滿屏“小紅點”提醒，強迫癥的你必須咬咬牙把它們先消掉，才能舒心的正常使用。
這種事兒發生在微信還能接受，畢竟你媽聯系你，喜歡的人聯系你，領導聯系你，“紅色”的強提醒還是很有必要的，不然你可能錯過重要的事情。
但對于非IM產品，比如內容消費類產品，大多“小紅點”的出現對用戶并沒有那么重要和緊急，更多的是把產品意愿強加給用戶（產品導流、提活）。
這種“小紅點”對用戶來說，只是為了消除而點擊，或者麻木了連消都不想消；對平臺來說“為了消除而點擊的行為”也帶不來真正的產品價值。
那內容類產品的“小紅點”應該怎么設計呢？有什么差異化的處理手法嗎？今天跟大家分享下大牙最近的思考。
說實話我最近理“小紅點”理的，對它都起了敬畏之心。
“小紅點”表面上是一個視覺設計問題，但背后其實是一個產品策略和如何調度用戶注意力的問題。而用戶的注意力如何被調度和分配，更是一個產品長期戰略問題。
用戶對不同產品消息提醒，接受度和投入的注意力是不同的：
而且，小紅點的設計，最終需要回歸“用戶價值”。目前大部分產品對于“小紅點”所追求的是：高打開率。
解答這個問題的核心切入點有兩個：1.視覺樣式（長啥樣），2.展示策略（啥時候出現）。
因為讀我文章的更多是設計師，所以這篇重點聊一下“視覺樣式”。構成消息提醒視覺樣式的核心元素有兩個：a.色彩；b.形狀。
看了下市面大部分產品對“小紅點”的色彩解法，得出以下結論：
1）大多數互聯網產品的提示色采用的是“紅色”；
猜測原因：大家本能的認為用“紅色”總不會出錯。
追溯了下“小紅點”的由來：它最早來自于黑莓手機系統。
在諾基亞一統天下的時代，新消息的提醒是圖標+數字的形式。黑莓在2009年推出的9700系列，搭載的黑莓系統開始使用了帶星號的小紅點形式。
Apple公司在2013年注冊了相關專利，并在iOS系統上開始正式使用。
目前小紅點已經變成了一個通用的提醒機制，且出現被濫用的趨勢。
2）“品牌主色”與“紅色”接近的產品，大多傾向于采用“品牌主色”作為提示色；
猜測原因：“紅色”和“橙紅，玫紅，粉紅等相近主色”并存且柔和到一起時，頁面會顯得混亂，所以他們把自己“主色”也作為提示色。
3）雖然“黃色”也具備一定的警惕和提示性，但僅存在于少數的黑色界面產品中；
猜測原因：黃色在白色背景上看不清。
4）部分產品采用“兩種消息提醒色”，進行分層處理（1級頁面紅色，2級頁面其他顏色）。
猜測原因：1級頁面強提醒，2級頁面用弱級色彩，降低消息的打擾度，增加用戶可控感。
看到第4種方式時，我就很開心了，因為這就是我想找到的答案。平常用的時候沒有意識到，在研究“小紅點”的時候才發現他們設計的挺用心。
拿QQ郵箱舉例：
左圖，當收件箱已經有4000多封未讀郵件時，它并不是出紅點，或者紅點上“...”或“99+”來警示我。而僅是弱化的藍底+數字，告訴我里面有多少封。
基于以上分析，我覺得第四種處理方式同樣適用于內容類產品，原因是：
1）像開頭所說，用戶對于內容型消息的“實時性”，“關系穩定性”較弱，因此對于較強提示帶來干擾的忍耐度會更低。而“紅色”給人給人非看不可，不看不消的印象。
基于內容型平臺特點，其實并不是所有的消息都需要全局“紅色”那么強化。“紅色”可在一級界面保留，滿足從平臺角度的可控性即可。
b.從交通系統色彩心理角度：藍色有“指示性”作用；
當然，這也不是絕對的，有時候也得基于自己產品的主色進行具體問題具體分析。拓寬下大家對“內容類產品”消息提示的色彩思路，不用太局限于滿屏“紅”。
好，說完“色彩”接下來我們來聊聊“形狀”。
“形狀”決定著提醒控件的：色彩占比、承載信息、透穿能力。
目前市面上常見的形狀有幾種：1.小紅點、2.數字+紅點、3.文字+紅點、4.頭像+紅點。
這個就不用多說了，一般有“小紅點”的出現就以為著“這里有個新消息”或“這里有個新內容”，快來戳我。
2.數字+紅點
它是由小紅點演變而來的，增加“數字”代表里面具體有多少條未讀，一般用在社交場景或與消息相關的APP中居多，輔助用戶獲取更多信息，做出判斷。
但也有一些平臺，為了吸引用戶更多的點擊，或者對于“數字+紅點”下發的策略和規則不夠完善，濫用這種形式，內容的價值并沒有與這種形式相匹配，同時采用過于警示的紅色，有些干擾用戶。
3.文字+紅點
不可否認，有些場景光靠一個“小紅點”是傳遞不清晰的，采用“文字”的透穿能夠讓用戶點擊之前更多的了解信息，決策是否需要點擊，這種形式還是友好的，但別滿屏都是就行。
4.頭像+紅點
越是跟“人”相關的產品，越適合采用這種形式，以“人”為抓手促進點擊。
常用于QQ，微信，微博，小紅書，快手，抖音等平臺，通過你關注大V或你朋友頭像外顯，吸引你點擊。
作為內容生產者，肯定希望自己發布內容push給更多粉絲，這樣才有更多的流量嘛。
弱提醒：
當內容生產者剛被關注時，只給粉絲下發普通“小紅點”或“文字+小紅點”消息通知。
中提醒：
當通過粉絲歷史操作/觀看數據，發現TA對你的內容高度感興趣，你更新時他都愿意看且完播率高時，那平臺就可以賦能“中提醒”的樣式給你，外露更多信息帶來更多流量（轉化如果不高可再打回“小紅點”）；
整體來看，雖然它的名字叫“小紅點”，但我們在設計的時候不能只局限于“紅”和“點”。它可以是任意“顏色”，它也可以是任意“形狀”，本質是如何更和友好的提醒用戶。
文章來源：站酷 作者：蘇大牙
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：成交額4982億，同比增長26%，這是阿里巴巴今年雙十一交出的答卷。每年都有人唱衰雙十一，但每年淘寶/天貓都在大家的質疑中實現了銷售額增長，這是為什么？本文作者“貨”的角度對此展開了分析討論，與大家分享。
2018年10月，在從北京到上海的高鐵上，我接到一個機構投資者的電話——他焦急地詢問，“據說今年的天貓雙十一預售非常不理想”，“消費者和商家都已經產生了審美疲勞”，所以雙十一銷售數字要崩盤。
他想讓我求證一下，我立即回答：“沒什么可求證的，那不是事實?！钡撬匀幌胱屛仪笞C；整個市場都流傳著天貓雙十一已經尸居余氣、增長即將耗竭、明年就要沒有雙十一了，等等等等。
我確實找了許多電商行業的朋友求證，對方無一例外地回答：“這是完全不了解電商市場的外行話，沒有必要深究?！蹦且荒?，天貓雙十一成交額達到2135億元，同比增長26%。阿里巴巴的股價于當年12月觸底回升，此后的三個季度上漲了近一倍。
2019年10月，我又在虹橋機場的候機室里，接到了不止一個機構投資者的電話。你猜對了，仍然是詢問“天貓雙十一是不是要大幅減速”的問題。這個問題不僅關系到阿里巴巴，還關系到一系列的品牌商家。
因為快上飛機了，我只能簡略地回答：“不可能，增速不可能低于20%。雙十一購物節比你想象的更強大?！惫唬@次的流言再次被現實所碾碎。這年的雙十一剛結束，阿里的港股IPO流程就啟動了。
2020年……我已經不做券商分析師了，所以不會再接到機構投資者的電話。但是，在各種場合，我還是聽到有人憂心忡忡地問：“今年的天貓雙十一應該真不行了吧？”雙十一時間延長了，11月1日就開始預售，這被悲觀者視為“雙十一正在走下坡路”的最好證據。
競爭對手的雙十一促銷活動空前激烈，尤其是京東和拼多多。說實話，我的信心也有一些動搖——11月10日晚上，我在微信上緊張地與好幾個電商從業人員聊著他們的感受，刷著手機淘寶上的活動和優惠券，看著朋友圈里的曬單?？紤]到經濟形勢和競爭格局，如果今年天貓雙十一的增速驟然下滑，我覺得也是可以理解的。
結果卻比我想象的要好：今年雙十一購物季（11月1日-11日）成交額達到了4982億元，同比增長26%，這是近三年的最高水平。注意，這個數字已經考慮到了雙十一時間口徑的變動，而且不含新加入的房產、汽車等商品，具備統計上的比較意義。
根據阿里的財報，上個季度（2020年7-9月），天貓GMV同比增速為20%，淘寶GMV增速為百分之十幾；也就是說，雙十一期間淘系電商的增速大幅高于平常時間段。雙十一沒有任何喪失活力的跡象。
準確的說，是淘系電商沒有喪失活力的跡象。過去一年，市場上充斥著對淘寶/天貓的質疑或擔憂：拼多多還在大踏步地前進，京東實現了用戶增長的復蘇，快手、抖音等直播平臺建立自己的交易閉環，微信小程序的電商GMV猛增……
在這種情況下，淘系電商每個季度仍然能報出不錯的GMV、收入和利潤增速。投資者和外部人士還是半信半疑，他們不遺余力地尋找各種樂觀或悲觀的線索，以求看清淘系電商的未來。
所以，今年的雙十一才吸引了這么多眼球——人們關心的不僅僅是11月1日-11日的交易數字，還有這個數字背后的故事，以及由此推斷出的跡象。在我看來，這次天貓雙十一帶來了大量積極的跡象，可以讓樂觀者睡個好覺：
差不多兩年前，我跟一位經驗豐富的電商從業者聊天。對方說：“阿里對‘貨’的理解和掌控程度仍然是全市場第一，而且這種優勢可能一直持續下去?！?/span>
我問他，什么叫做“對‘貨’的理解和掌控”——這大概也是電商行業之外的人最想問的。這個問題很難用一兩句話解釋清楚，不過我們可以以這次雙十一為例，嘗試解釋一下：
對“貨”的理解和掌控源于高度專業化和細節化的運營。說到底，電商就是一門關于運營的生意。
天貓平臺對于本次雙十一的調研（包括商家調研和消費者調研）早在6個月前就啟動了，調研范圍從一二線城市一直覆蓋到縣級乃至村級；淘寶特價版在9月實現了與1688的全面對接，從而使得大批工廠和“廠貨”得以接入雙十一；海寧皮革城、深圳華強北等一批特色商城的線下商戶今年剛剛開設淘寶/天貓店，就以跑步速度參與了雙十一……
只有通過這種、成體系、接地氣的運營，天貓雙十一才能持續加強“貨”的豐富程度，完成“人”與“貨”的對接。因此，現在流行的“去中心化電商”（其實就是“沒有中心運營的電商”）永遠無法做出自己的雙十一；其他中心化電商平臺在運營方面各擅勝場，或許在某一個方面已經接近淘寶/天貓，但是總體上仍然有相當的差距。
在長期，阿里的下一個增長引擎或許取決于“近場零售”或曰“身邊經濟”——包括同城零售、生鮮電商、社區團購、本地生活服務在內的龐大市場，其規?？傆幸惶煲^傳統的零售電商市場。
這就是阿里在這個領域投入重兵、不斷進行收購和內部孵化的原因。美團、京東、拼多多、騰訊乃至字節跳動也意識到了這個市場的重要性，正在不惜代價地企圖占據先手。這個戰局非常復雜，可能要再花3-5年才能有階段性的結果。
在這種情況下，淘系電商的地位反而愈發重要了。淘寶/天貓的強勁增長，不但能夠為新業務提供財務資源、能夠交叉導入用戶，還能為新業務提供一個良好的立足點。餓了么、盒馬、天貓超市均加入了今年的雙十一；支付寶首次設立了“城市生活主會場”；在杭州阿里巴巴“1小時新生活圈”內，已經實現了“小時級”的送達。
顯然，一個強大、充滿活力、仍在不斷創新的淘系電商，是阿里巴巴任何新業務的基礎和大本營。這個大本營越堅固，新業務得到的支持就越多。投資者總是擔心這個大本營是不是出現了松動、是不是在激烈的競爭中有所收縮——今年的天貓雙十一再次證偽了這個擔心。
競爭格局當然是非常激烈的，但是淘寶/天貓的優勢已經形成了一個系統，我不認為這個系統會在短期內被攻破或出現松動。所以，我相信明年的天貓雙十一仍將報出一個非常亮眼的數據，盡管我還不知道那時又有什么新玩法、新模式出現。
文章來源：人人都是產品經理 作者：aria在這里
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
