亞馬遜作為一個知名的電商平臺，它的成功背后卻有一個很難讓人理解的設計邏輯：成功的設計不一定是美觀的。為什么會這么說呢？本文將從四個維度展開分析，希望對你有幫助
在這個流量為王的短視頻時代，人人皆可拍視頻。對于短視頻創作團隊來說，腳本是提率、保證主題、節省溝通成本的重要工具。但腳本的制作并不簡單，也嚇跑了許多準備拍攝短視頻的創作者。其實，對于短視頻小白來說，寫劇本并不難用，本文作者就通過這3大黃金原則，教你寫好一個抖音短視頻腳本。
編輯導語：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
我們或多或少都有這樣的體驗：打開一個界面，里面充斥著太多文字和太少的圖像。在用戶體驗設計中，展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產品，而是希望通過圖像對一款產品進行直觀的視覺理解。
你所選擇的圖像應該能夠清晰地展示產品特點，不管是用戶自己上傳的圖片，專業攝影師的圖片，還是插畫風格的圖片，它們都應該能直觀展示產品外觀，反應產品的特點?！豆雀鑸D像設計指南》
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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：你有沒有設計過結構復雜、內容繁多的表單？在設計時有沒有什么技巧可以化繁為簡、提升填寫者的體驗感呢？本文作者為我們羅列出了表單設計中可能遇到的一些問題，并且提供了解決方案，讓我們一起來學習吧。
距離上次發文已經快半年多了，實在是慚愧，好久沒有輸出內容了，看著每周增加的零星關注人數，內心更加焦灼難安。
這半年來我換了工作，也適應了新的環境，同時也在思考新的方向，估計和大多數的設計師一樣，迷茫時常伴隨著我。前段時間寫了幾周的產品體驗日記，但覺得缺乏深度就沒發上來，后續我將會繼續寫產品體驗日記，完善后分享給大家。
2020所剩無多了，我也會將積攢下的一些內容陸陸續續發上來與大家分享，感謝關注，感謝閱讀。哈哈哈哈
你平時填寫過的最復雜的表單是什么？調查問卷還是文檔信息錄入？如果一個表單字段內容巨多、結構多變、填寫耗時耗力，那你將如何設計你的表單使之體驗更佳？
面臨的問題:
不知道大家是否看過法律合同之類的文件，多則好幾籮筐，少也有厚厚一疊；類似的文檔如果進行線上結構化，勢必要同樣要花費巨大的人力去填寫表單，完成基礎信息的錄入工作。
同時，由于錄入的時間不確定，流程不明確等問題，也制約著表單的填寫。
多個不同表單之間的互有關聯又相互區別，填寫的時候需要來回查看以確認信息，查閱和填寫相互并行，操作繁瑣。
幾乎每一個字段都有對應的關聯項，每個單選字段的不同項決定不同的內容。同時，由于字段數量，層級劃分不明確，會使填寫的人失去定位，產生迷惑。
根據業務內容分級，合理運用顏色、間距、字體大小、卡片層級等進行信息分級。
一般表單是與某項功能掛鉤的，信息會在多個入口錄入。因此在填寫長表單的時候，如果能從系統中自動獲取到數據，就可以自動為其填充，可根據業務場景，判斷是否讓其修改和更新。
一般的長表單在涉及非審批流的時候，可以讓其無限二次編輯；如果是處于審批流，則需要根據業務場景限制其編輯次數或者限定其編輯規則（草稿可編輯，一旦提交則不可編輯）。
如果一個長表單，需要多個不同的業務域的人來填寫，那么需要協同編輯，并實時顯示編輯的人員信息。
同時，為了避免信息丟失和編輯錯亂，在同一個表單下，同一時間應該限制只允許一個人進行編輯，等其提交完后，可允許其他人進行編輯。
前端實時校驗字段輸入規則，后端統一校驗信息交換規則。
比如對于數字輸入框的校驗、電話號碼的校驗、身份證號的校驗，應該在前端實時完成。
在鼠標離開焦點區域或定位到下一個字段的時候，提示其填寫有誤；這樣做的目的是減少后續修改的次數，在長表單下，統一提示其填寫錯誤會是一場災難。
在點擊保存并填寫下一步或點擊提交信息的時候，就需要跟后端交換數據，驗證錄入的信息；如果不匹配，則提示錯誤，并從上至下定位至相應的錯誤字段。
要通過多種方式，引導表單的填寫。
1）在開始填寫之前，簡要說明該表單的業務目標，大概需要花費的時間等；
2）開始填寫后，關于每個字段的特殊說明，都需要標注出來。重要的要顯示在頁面上，不重要的就收起在注釋符號中；
3）填寫的過程中，切記不要到最后才告訴用戶哪里出錯了，重要的信息一定要提示到位，否則一旦出錯，前功盡棄；
4）填寫完成后，引導其下一步的操作，或者返回至列表。
表單填寫完畢后的產出物就是詳情頁，詳情頁是需要瀏覽的。因此在設計詳情頁的時候，應該本著讓用戶瀏覽方便的原則去設計，需要注意以下幾個點：
1）結構清晰
結構清晰是指不要講內容一股腦的全堆在頁面上，要做好信息的分類；同時，注意規劃頁面的層級。
2）設置快捷導航
如果一個表單是長且復雜的，那么其對應的詳情頁也會變得復雜和冗長，因此在頁面的右側或者頂部設置合理的快捷導航是很有必要的。
快速返回頂部按鈕的使用要注意場景，如果你的頁面比較長，且沒有分組瀏覽的導航，那就需要設置快速返回頂部的按鈕。
但是在存在分組瀏覽導航和頂部懸浮標簽的情況下，不建議使用快速返回頂部的按鈕，因為在填寫表單的時候，使用快速置頂的場景比較少。
當一個模塊混雜著各種信息的時候，單純的模塊分組已經無法處理它的復雜度了，因此需要收起高頻且信息量大的模塊，可以合理的減少頁面的復雜度。
步驟條可以單純的作為步驟指示器使用，也可以作為一個表單完成度的提示區域。
在填寫大量字段的表單時，閱讀表單內容和填寫表單同樣耗時耗力。
如果我們將所有的提示信息隱藏在提示符中，一般情況下用戶不會去查看；但是如果去挨個查看提示信息，則會多花費一個步驟去點擊或者懸停來查看提示信息，浪費了大量的時間。
因此如果涉及到重要的提示信息，請直接展示在字段的后面，不要隱藏起來。
在后臺產品上，關于組件的規范統一，想必是人盡皆知的設計原則。
無論是各類平臺型設計組件，還是各個公司自造的設計組件，保持統一和規范對產品設計有著重要的作用，在這里不贅述組件應該怎樣規范統一。
因為無論是Ant Design還是其他設計語言，都有詳盡的關于組件的定義方法，我在這里講述一個產品設計更高層面或者更深層面的原因：
組件的規范統一并不僅僅是為了省時省力，而是為了使用戶在使用的過程中達到認知上的統一和行為上的統一，在進行高頻次的操作后，界面的流程或者組件樣式已大致在用戶腦海中形成固定印象。
因此在操作相同類的流程時，用戶會有更多的掌控感，試想一下：如果你在操作人事相關的流程后，去填寫績效部分的內容時，發現一個迥異的界面或者彈窗，你肯定覺得這是不是哪里出錯了，甚至會懷疑這是否是同一個系統。
目前大多數公司的管理系統經過多次縫縫補補，內部的跳轉邏輯已經異常感人，界面風格也大放異彩，但是使用起來卻無從下手，深感迷茫。
因此大到界面樣式，小到間距大小，產品設計的規范和統一應該是最基礎又不可缺少的原則。
對付復雜的表單，你需要解決的主要問題并不是填寫方式或者頁面設計，而是信息分級和結構拆分。解決了這個問題，基本上就解決了業務問題，其余部分就跟我們常用的表單一致。
將復雜度降低并不意味著減少頁面的信息，而是通過設計師合理的信息劃分，降低視覺上的復雜度和流程上的復雜度，這樣才會達到當前場景下的“最佳解決方案”。
隨著互聯網信息化的深入發展，復雜是避免不了的。
我知道大家都推崇簡潔的設計，但那只是對視覺和樣式的定義，而非對信息的定義。
我們所處的世界是復雜的，行業更是復雜的。信息的復雜度與日俱增，想要處理復雜的信息，就需要從復雜中尋求規律，這規律與業務息息相關。
B端360行，行行深如海，小伙伴們，我們一起慢慢修煉吧~
一、導語
1. 業務復雜，功能較多
2. 流程較長，操作繁瑣
3. 字段較多，關聯項較多
二、解決方案
1. 內容分組，分步填寫
2. 實時保存，避免數據丟失，提供草稿功能，避免任務中斷
3.字段分組，示意結構，聯動項隱喻
4. 信息自動帶入，節省時間
5. 提供二次編輯功能，防止信息輸入有誤
6.提供多人協作編輯功能
7. 實時檢驗
8.做好填寫引導功能
9. 詳情頁也需要注意信息分級
三、小細節，大體驗
1. 提供快速返回頂部的按鈕
2. 提供分組模塊收起展開功能
3. 步驟提供信息填寫完成度提示
4. 重要說明性文字盡量顯示而非收起
5. 產品內組件應該規范統一
6.龐大的信息錄入，表單內部要分步填寫，外部可拆分成不同的表單分別填寫
四、結語
文章來源：人人都是產品經理 作者：米蘭小鐵匠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：想要做好一個設計師，就要多研究優秀人士的作品，取長補短。現在互聯網的發達，很容易就能在網上找到相關的學習資料。本文以史蒂夫·克魯格的名著作為引入，分享20句關于界面可用性設計的名言，希望對你有幫助。
設計，以及許多其他領域，都是建立在優秀專業人士的作品和發現之上的，每個想要成為某個領域專家的人經常尋求指導來學習如何把事情做好。專業導師的各種書籍和文章現在都可以在互聯網上免費閱讀，讓努力學習知識的人很方便的找到。
我們經常會分享來自數字設計領域最優秀專家的名言和睿智的想法。你會在邁克·蒙泰羅（Mike Monteiro）所著《設計是一項工作（Design Is a Job）》里找到有關設計的短暫洞察，奧倫·沃特爾（Aarron Walter）的《為情感而設計》（Design for Emotion）以及排版大師埃里克·斯皮克爾曼（Erik Spiekermann）的一系列智慧思想也是如此。
下面我們要分享的是史蒂夫·克魯格（Steve Krug）的名著《不要讓我思考（Don’t Make Me Think）》中的一組引言。
2000 年初版，14 年后再版，《Don’t Make Me Think》在今天仍然切合時代發展，符合實際需要。史蒂夫·克魯格為界面可用性設定了一些基本原則，并與該領域的專業人士分享，這使得本書成為 UX 設計師推薦的最重要的資源之一。
可用性第一定律——“不要讓我思考”描述了關于網站可用性的要點、案例和見解。創造不需要用戶過多思考的界面設計，不僅可以解決問題，而且易于使用。這里有 20 句名言，反映了“不要讓我思考”的一些關鍵點。
1、如果某件事需要大量的時間投入——或者看起來會這樣——它就不太可能被使用。
2、讓每一頁或每一個屏幕都不言自明，就像商店里都有良好的照明：它會讓所有的商品看起來更好。訪問一個不需要我們思考的網站會讓人感覺毫不費勁，相反，為不相關的事情多花心思會浪費我們的精力、熱情、還有時間。
3、無用的客套話（“happy talk”）都是一種沾沾自喜的宣傳，你可以在蹩腳的小冊子里找到。與好的宣傳文案不同的是，它沒有傳達任何有用的信息，它一個勁的說我們有多棒，而不是描述是什么讓我們這樣棒的。指示說明必須被消滅。
4、可訪問性（Accessibility）非常重要，它不僅僅是正確的做法，而且是非常正確的做法。關于無障礙訪問，如果沒有引起足夠的重視，你就無法意識到，它能顯著的改善一些人的生活。僅僅通過把工作做得更好就能顯著改善人們的生活，這難道還不夠厲害嗎？
5、另一個讓人困惑的來源是那些看起來不太明顯的鏈接或者按鈕。作為一個用戶，我永遠不應該花哪怕一毫秒的時間來考慮這些東西是否可以點擊。
6、最近幾年里，讓產品更加易用成為幾乎所有人的責任?，F在，視覺設計人員和開發人員常常要做交互設計（決定用戶單擊、按下或滑動時下一步會發生什么）和信息體系結構（確定應該如何組織所有內容）之類的事情。
7、可用性（Usability）就是確保讓一個能力和經驗一般（甚至低于平均水平）的人，能夠想出如何使用并完成任務，而不必費事。相信我：事情就是這么簡單。
8、可用性是有關人們如何理解和使用事物，而與技術無關。
9、關于指示說明，你只需要知道一點就夠了：除非“蒙混過關”多次嘗試失敗，沒有人會去讀它們。
10、你越仔細觀察用戶，并傾聽他們明確表達他們的意圖、動機和思考過程，你就越會意識到，他們對網頁的個人反應是基于許多變量的。試圖用一維的“喜歡”或”不喜歡”來描述用戶是徒勞的，而且會適得其反。另一方面，好的設計會考慮到這種復雜性。
11、那些設計網站的人并不在乎讓事情變的明顯和容易，這會削弱我們對網站及其背后公司組織的信心。
12、然而在現實中，大多數時候我們不會選擇最佳選項，而是選擇了遇到的第一個合理的選項，即所謂的“滿意”（satisficing）策略。
13、大部分的網頁設計問題（至少是對重要的那些問題來說）都沒有一個簡單的“正確”答案。有效的答案是那些運作良好的、滿足需求的綜合設計，它們往往經過了仔細思考，良好的執行和測試。
14、刪掉每頁上一半的文字，然后把剩下的再刪掉一半。
15、設計師喜歡微妙的線索，因為微妙是復雜設計的特征之一。但網絡用戶通常都很匆忙，經常會錯過這些線索。
16、如果你在設計了很多不同的網站之后只發現一件事，那應該是：幾乎所有的設計理念——無論一開始多么糟糕——都可以通過足夠的努力，在合適的環境下變得可用。
17、你的主要職責應該是分享你所知道的，而不是告訴人們應該怎么做。
18、你的目標應該是完全刪除說明文字，讓每項內容不言自明，或者盡可能做到這一點。當說明文字絕對必要時，把它們減少到最少。
19、和遵循慣例去設計相比，設計師們面臨很大的誘惑去重新發明輪子。很大程度上是因為他們覺得自己被雇來是要做一些新的、不同的事情，而不是做原有的舊事情。更不用說，來自同事的贊揚、獎勵和高級職位很少是基于“最好地利用慣例”這樣的標準。雖然少數時候，在重新發明輪子上花的時間足以制造出新的革命性滾動設備，但通常情況下，這只是浪費時間而已。
20、如果你想要一個很棒的網站，一定要測試。因為你在這個網站上工作了好幾周，已經失去了新鮮感。你了解的太多了。要想知道它是否真的有效，唯一的方法就是測試它。
文章來源：人人都是產品經理 作者：Alina Arhipova
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：如今，谷歌可以說是科技領域規模最大、最具有影響力的公司之一。正因為如此，它們的數字產品設計會對整個行業產生巨大的影響，成為人們競相模仿的榜樣。在該公司的UI&UX（用戶界面&用戶體驗）設計指南中，設計師們提到了10條原則，不管是iOS還是安卓系統都同樣適用。在這篇文章中，作者從這10條指南出發，加上自己的經驗和相關案例，在設計方面為大家提供一些建議，希望對大家設計產品有幫助。
圖片來自Material
在沒有其他方法的情況下，圖標可以成為理想的指示工具?！豆雀璨牧显O計指南》
在《Design of Everyday Things》一書中，有“以人為本的設計之父”之稱的唐·諾曼（Don Norman）闡述了他對圖標的理解：圖標就是代表動作、同時可以指示該動作以何種方式完成的元素。在數字產品中，我們很少會出現“左滑-刪除”這樣的文字指示，而是通過左滑的動作引出一個紅色的小垃圾桶來闡明“左滑就會刪除”這樣的設定。
在用戶和產品交互之前，插入動畫效果。——《谷歌材料設計指南》
如果我們希望一款數字產品有著極簡主義外觀，那么我們可以借助動畫來達到這一點。在上圖的例子中，最開始畫面中甚至不會出現垃圾桶的圖標。在我們手指滑動后，也就是人機交互的動作產生之后，才會出現這一垃圾桶，同時也會強化“滑動表示刪除”這樣的信息。動畫效果有效簡化潔面、改善用戶體驗的功能。
圖片來自Medium｜制圖Eddy Gann
動畫可以展示圖標所代表的執行動作，從而增加流暢感和愉悅感。在兩個視覺效果之間插入帶有動畫效果的圖標，可以反映這兩個視覺效果之間的關聯。——《谷歌材料設計指南》
在兩個動作之間增加一個過渡的動畫，這個效果我們應該很熟悉。最簡單的例子就是“播放/暫?！卑粹o。在點播放后，該圖標變成了暫停按鈕；點下暫停按鈕，該圖標又變成了播放按鈕。這個變化的圖標展示了播放和暫停兩個動作之間的關系。
這只是一個簡單的案例。現在想象一段更加復雜的經驗：比如將某個產品添加到購物車中，購物車圖標會出現裝進貨物的動畫效果；或者想象某一功能無法使用時圖標的彈出效果。
帶動畫效果的圖標本身并不復雜，我們可以在Adobe XD中完成：通過給圖標添加預設效果，或者加入淡入、淡出的效果即可。
動畫效果可以根據需要設計出簡單或復雜的運動軌跡。圖標雖然小，卻是影響用戶體驗非常重要的一環，我們可以通過設計復雜的運動軌跡來強調它的重要性。——《谷歌材料設計指南》
請記住，如果界面上所有的元素和圖標都在動，那么用戶可能會不知所措。過度使用這一方法反而會削弱你想強調的重點。給圖標添加動畫應該適可而止。
調色板生成工具｜圖片來自Medium
調色板生成工具（Material’s Palette Generator）可以調出任何你需要的顏色，色相，亮度，色度等都可以通過一系列算法調節出來，通過算法調出的色彩實用又美觀?！豆雀璨牧显O計指南》
如果我們無法使用谷歌的調色板生成工具，手動調色就會變成一件非常麻煩的事。調色板生成工具最大的好處就在于它自動給你調出了同一種顏色的不同形態（如藍色從暗到明、從深到淺的形態），你就不需要再對照標準調色板一點點矯正了。不過即使沒有這樣的自動生成工具，你也應該仔細檢查并矯正自己的調色工具。
顏色對于數字產品的重要性，就像是鹽和胡椒粉對吐司的重要性一樣——添加太多了，就蓋過了吐司自身的風味；太少了，味道就會變得寡淡。在選擇配色以求增加品牌視覺效果時，一定要仔細考慮清楚給哪里添加什么顏色。
通過有節制地在APP里添加顏色，你還可以突出相應的內容，如文本、圖片、按鈕等。你可能已經注意到了，Instagram和Twitter上面布滿了色彩鮮艷的圖片和圖標，與之相對應，它的用戶界面非常簡潔，不會喧賓奪主。
色彩也可以是一種交互元素，要考慮它們在什么地方交互，希望達到什么效果。最重要的元素要用最突出的色彩?！豆雀枭试O計指南》
當一個元素的色彩與周圍環境形成對比時，用戶會更理解它的重要性。我們可以給重要的元素增加“色彩權重”，這個概念是說增加色彩的飽和度，使用更加大膽、更吸引人的色彩，制造視覺沖擊。
另外，我們可以將重要的信息加粗顯示，讓它在第一時間進入用戶的眼睛。簡單來說，如果一種信息比另一種信息更重要，那么前者就要在色彩和篇幅上勝過后者，好讓用戶直觀地進行區分。
文字類型生成工具｜圖片來自Medium
Google Fonts是谷歌研發的一款文字類型生成工具，可以使用它來調節字體、大小等。您可以根據需要調整和優化產品的文字設計。——《谷歌材料設計指南》
字體設計是一門藝術，它不僅關乎選擇某一種具體的字體，更設計如何使用、粗細調節、比例調節等，目的是增加界面的可讀性，從而增強產品的實用性。谷歌研發的這款文字類型生成工具為設計師提供了多樣的選擇和排版支持。通過這一款文字類型生成工具，可以節省時間，迅速生成段落、標題、正文、按鈕等。
文章來源：人人都是產品經理 作者：Danny Sapio. 譯者：Michiko
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：作為一個設計師，有時候在工作中會過度重視美感和創意，辨識度是有了，但是缺失了品牌感。沒有了品牌感，這個圖標就可以放在任意一個產品上使用，無法與品牌產生強聯系。那么，如何設計一個有品牌感的圖標呢？本文將從三個方面展開分析，希望對你有幫助。
我們在畫圖標的時候，往往會忽略掉一個重要的問題：缺失品牌感。也就是說，這個圖標和我們的實際品牌、業務并沒有什么聯系，它僅僅滿足了可辨識這個溫飽需求。
圖標缺失品牌感，就會導致同質化的問題，這些圖標放在任意一個產品上都可以通用。
對于產品，記憶點的缺失導致用戶看完后對于我們的業務、品牌不會產生任何深刻的印象。對于我們設計師，圖標和業務的斷層則很容易讓我們陷入反復改稿的被動局面，并且設計話語權也越來越小。
那么，有沒有什么系統、易于理解的方法來讓我們的圖標具備品牌感？
當然有。
接下來的這個圖標三步品牌化是我一直在用的辦法，而且屢試不爽，基本用了這個方法，需求方基本一稿過～
文章案例選用了對接京東物流的國際物流項目。當時有一個著陸頁的需求，需要在首屏下的優勢板塊中繪制六個圖標，分別對應平臺的六大優勢。接下來，我將詳細講解如何運用這個圖標三步品牌化方法繪制與品牌息息相關的圖標。
品牌符號從廣義上來講也就是形狀。
比如天貓最近的雙十一購物節，便是用一個貓頭來作為這次大促的品牌符號，通過每年固定時間節點的品牌形象建立心智。
再比如之前大熱的騰訊綜藝《演員請就位》，它的品牌符號就是不同矩形色塊的疊加組合形態。
通過承載的不同信息可以擴展為不同的類型，比如下面的固態層、圖片層和文字層就分別承載了內容、圖片和文字。
Google在18年于material design中新增了一整塊章節來闡述圖形語言。
google原話是：形狀可以引導注意力，讓用戶易于識別組件，識別狀態和品牌語言傳達。
也就是說，形狀并非我們以往認知中的作用，品牌同樣可以借助形狀來加強效應。
最典型的就是谷歌自家出品的google play。你可以看到google play被提煉出的三角形符號被作為外輪廓延展到來所有相關的業務icon，顯著加強了品牌記憶點。
再比如國內的螞蟻財富，便是通過提煉logo中的箭頭符號，將其延展到三個優勢圖標當中，一樣得傳達了螞蟻財富的品牌表達。
所以，基于業務目標以及行業特征，我們將倒三角這個符號作為我們這次項目的品牌符號。
至于為什么選擇這個形狀，主要考慮到了穩定性（三角形自身的穩定性、象征專線的穩定可靠）、保障性（倒三角常被用于保障承諾類的徽章標志）、隱喻物流（由飛機和定位的圖標變形而來）和三者的戰略合作（開鑼、中國制造網和京東）。
第二步相對而言就比較簡單了，不過考慮到顏色在各個場景及狀態到通用性，這里需要基于原本的品牌色額外不同明度的顏色。
這里我簡單擴展出淡色和深色，為了避免頁面過冷加入了暖色作為點綴色以提升溫度。
將圖標與業務緊密結合，能夠與其他競品拉開差異化，這是個相對簡單但是很容易出效果的品牌化的方法。
具體的操作辦法就是：首先根據所給文案腦爆出圖標所對應的關鍵詞，然后根據所在行業的特征篩選關鍵詞，或者進行二次聯想及轉化。
下面我通過此項目中的三個圖標案例來簡單講述下設計過程，僅為大家提供下思路：
運營所給文案如下：
這段文案意思就是，由于我們平臺和清關行合作，因此讓我們的業務更具有保障性，貨物可以按時送到客戶手中。
這里我一開始腦爆出了雨傘、鎖和盾牌這三個形象，并且傳統得用了盾牌符號傳達保障性。
這種任何行業平臺都可通用的形象，并不能關聯我們這個物流類的平臺。
后面聯想到到我們跨境、外貿的行業特征，將“雨傘”這個形象變形轉化為降落傘，來代替盾牌符號。
一來，降落傘外形似傘，相當于是貨物的保護傘一樣體現”保障“的感受， 另外，這種”空運“式的表達也額外傳遞出按時遞交的概念，很好得體現出典型的”跨境物流“的行業特征。
運營所給文案如下：
同樣，一開始我著眼于”跟蹤“”實時“”軌跡“這些關鍵詞，腦暴出定位、雷達之類的事物。
但是結合我們行業特征的話，其實有空間去更貼切到業務本身。
我們平臺的業務線包含了兩個站點——美國（主站）和馬來西亞。供應商發貨后，貨物的軌跡必然是反映在世界地圖中，從起點至終點得分布。
因此我用了地球儀映射全球，以定位來映射包裹收貨地，以延展到定位icon中的虛線映射軌跡。這樣產出的圖標，不僅僅是指代了文案意思，同時表達出對應的行業特征，和業務緊密貼合。
文案如下：
一開始，我傳統得想到了一個時鐘圖標來代表。但是仔細想想，這個時鐘圖標僅能代表”時效“的特征，而不能傳達”快“的感受。如何更好得傳達“快”？
發散思維，我聯想到交通運輸工具，飛機、輪船、火箭等等，最終我選取了飛機這類跨境物流專線主要使用的運輸工具，它所帶來的快捷相比輪船更加深入人心，又不像火箭那樣脫離現實。
當然并非所有的圖標一定需要去結合行業特征，其余的三個圖標暫未想到更適合的元素，所以依然選用了常見的形象來傳達概念。我們不需要完全硬坳這個方法，但是身為設計師，我們依然需要掌控我們的項目，充分發揮自己的創造力來賦予產品更多的power。
最后，我為所有圖標加入了非線性動畫。一方面為著陸頁注入了活力，增加用戶愉悅度，另一方面通過動態的表達引導用戶更好理解平臺優勢，比如地球儀通過加入軌跡的修剪動畫以及定位的彈跳動畫，來更生動得傳達物流軌跡全程跟蹤的這個概念。相比原本的靜態圖標是不是更好理解了？
更重要的是，動畫的加入也貼合了我們物流行業“運動”的特征~
篇幅原因，動畫的制作今天先略過，后面可能另抽時間單獨出個教程出來。當然，動力來自于你們的在看或轉發啊～～（手動斜眼）
我們每次接手一個需求時，都要想想，這個設計可以在哪些地方和我們的業務、品牌進行關聯？而不是每次都好像在做一個完全獨立于業務外的項目，這很容易讓你陷入反復改稿的被動局面，而且話語權也越來越小。
總之，品牌思維是需要設計師格外關注的！
最后，我們再來回顧一下這個圖標三步品牌化這個方法！
第一步，融入品牌符號；第二步，注入品牌顏色；第三步，結合行業特征。
但愿今日份的分享對你有所幫助！
文章來源：人人都是產品經理 作者：Andrewchen
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：對于老一輩人來說，他們沒有趕上互聯網興起的時候，等到想要主動“觸網”時，才發現很多操作根本搞不清楚。盡管產品設計師已經極可能考慮到了老人群體的用戶體驗，但在實際操作中，老人家還是一頭霧水。這時，操作越是簡單的產品，越能夠贏得他們的喜愛。本文作者從自身經驗出發，對這類現象進行分析，與你分享。
上周某天吃完晚飯，我媽遞過她的華為手機怯怯地問我：你有空嗎？我想叫你幫我跟那個商家說換一個快遞，我們家這邊的百世快遞的站撤了，叫他們不要用這個快遞。
我腦海中閃過一個念頭：嗯？最近我沒有幫她付款啊。但隨即也是接過她的手機打開了淘寶。我媽立刻阻止我：不是淘寶，是拼多多。隨即自己打開了她微信里的拼多多小程序，演示給我她找不到商家客服。我跟她說，這個功能要用APP才行，于是幫她下載了拼多多APP并很快解決了問題。
弄完之后，我們又展開了這樣的對話：
我媽：哎呀，這個拼多多真是太好了，物美價廉，超方便！你怎么不早教我用！
我：我自己都不怎么用拼多多?。?/span>
我媽：這個是我的舞友上周教我的！我打開一看，哇，好多有用的東西，又便宜！第一天我就買了幾百塊的！
我：但是拼多多很多假貨啊！
我媽：我又不像你們追求什么名牌！有什么假貨可言？一條裙子30塊！
我：……
我媽：而且！以前我在淘寶總要你幫我付款，現在我用拼多多自己用微信就可以支付了。
我：我早就叫你開個支付寶賬號，你自己又不開！
我媽：那么麻煩，我不會，你又不教我！而且又要綁定銀行卡，萬一哪天我的錢被人家騙走，那些什么黑客……
我：哪有黑客黑你，你又不是馬云……
我媽：還有，拼多多退貨很方便！以前我在淘寶的時候，退貨要你幫我搞，還要在家等快遞上門，很不自由，現在我自己去菜鳥驛站退就得了。
我：好吧。
我媽：以后我就用拼多多，我那些舞友都在用！
我：你開心就好。
我回頭想了想，這是一個以用戶定位和產品特征為優勢搶奪用戶的典型場景。
首先看看以我媽為原型的粗略用戶畫像：
為什么我說拼多多是從用戶定位和產品特征這兩個維度搶奪走了我媽這樣的淘寶用戶的呢？
首先，我用的是“搶奪”這個詞。
我并沒有用擠占、分流這樣的詞。因為，在跟我媽的交談里，我已經感受到她心里估計“從此淘寶一生黑”了。也確實，一個月以來我媽沒有再叫我在淘寶付款過。所以，我想我媽大概率未來不會再用淘寶了，也就是說，淘寶直接流失掉了我媽這個用戶。
其次，來看看用戶定位。
根據上面我列出的以我媽為原型的用戶，多嗎？我簡單查了一下。
根據國家統計局官網上發布的《中華人民共和國2019年國民經濟和社會發展統計公報》，60周歲以上的人口約有2.5億人，60-65周歲的人口約有83250000人，分別占人口總數的18.1%和6%；根據中國互聯網信息中心官網發布的《第46次<中國互聯網絡發展狀況統計報告>》，截止2020年6月，我國手機網民用戶規模達9.4億。
那么，根據這個比例可以推算，這樣的用戶大約在5千萬—1億的規模。
這么大的一個用戶群體，實際上是淘寶自己放棄掉的。自從前幾年淘寶打假貨的行動和品牌化（力推天貓）的戰略執行以來，實際上大量的縣城以下、60歲以上的用戶都被淘寶放棄掉了。
以我媽為原型的這批用戶，他們大多數沒有支付寶賬號，但在微信上有錢，但除了平時發發紅包，菜市場便利店買點東西，基本上還是沒有用出去。于是，這批用戶沉淀在微信錢包里的海量的錢，很難直接轉化到淘寶上。
另外一個關鍵的地方在于，他們對淘寶是有怨言的，但在拼多多出來之前，沒有替代物。某種程度上來說，對用戶而言，忠誠度是很虛無的。真正對品牌有感情而產生“忠誠”的用戶極少極少，品牌還是得需要不斷優化產品，滿足用戶的需求。
品牌也好，產品也好，本質上是為用戶提供價值，而不是要跟用戶“談戀愛”。
這是很多品牌的一個誤區。沒有在自身的產品上下功夫，去了解用戶瞬息萬變的需求，而去打“情懷”，講“文化”。所以，我們可以看到當某些品牌醉心于自己的“情懷和文化”之時，其競爭對手在了解用戶需求和優化產品而推出競品后，瞬間打垮行業老大哥的案例。
最后來講講產品特征。
我媽使用淘寶的流程是怎么樣的呢？
挑選商品——下訂單——點擊“找人付款”——發送需支付的訂單到我的淘寶賬號——退出淘寶——打開微信——告訴我發了一個訂單——發紅包給我——我看到微信或淘寶信息——點擊需支付的訂單——支付——退出淘寶——打開微信收紅包。
而她使用拼多多呢？
挑選商品——下訂單——支付。
當我列出這兩個產品使用流程之后，我猜如果你是我媽，你也會用拼多多了。
在我媽跟我的對話里，還突出強調了“退貨難”這個點。實際上是淘寶的物流服務不好嗎？并不是。我一直覺得淘寶的物流雖然不如京東，但并不差，而且也不斷在優化升級。但為什么我媽還是覺得不好呢？這一點不能單純地從物流本身來看，而得回到淘寶的產品來看。
在淘寶上，推出了一個功能，叫“找人付款”。當時我覺得這個功能很好，解決了我幫我媽買單時，她要跳出淘寶從微信給我發鏈接的麻煩。但最終卻帶來了一個重要的弊端：當要退換貨時，我這邊無法執行，她那邊又不知道如何操作。
而當我從PC端登上我媽的淘寶賬號之后，PC端的退換貨服務非常麻煩和繁瑣，讓我都研究了差不多一個小時才解決。而最后，我媽那邊又無法支付退貨費用，我在PC端也支付不了，也不能“找人付款”。總之，整個過程極其麻煩。雖然淘寶也意識到了產品上的缺陷，但目前的情況而言，這樣的產品還是對于我媽這樣的用戶非常不友好。
而拼多多呢？它基于微信這個社交生態圈。加上沒有什么太多余的功能，我媽很快就能上手了，自己操作還是比別人代操作方便多了。
談到這里，我還意識到一個重要的問題。
從產品對人際關系的影響而言，淘寶是負向的，而拼多多是正向的。從某種程度上而言，60歲以上的這代人，是被互聯網拋棄了，所以當他們想搭上這波潮流時，不得不面對自己的兒女，需要向他們請教，怎么用怎么學。這一點首先就會讓不少子女心煩，不少父母自卑。
再進一步，如果每次父母網購都得“捆綁”上子女時，對人際關系是正向的嗎？而在拼多多上購物時，他們不僅可以大大優化自己的產品使用流程，還能跟自己的老朋友們一起拼單，互惠互利，這對人際關系的影響有很大的正向作用。
你有什么被別的產品搶走的故事嗎？
一點個人小想法，想到哪寫到哪。
如果你有不同的意見和想法，歡迎評論或留言。
文章來源：人人都是產品經理 作者：@源記物語
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Apple 致力于讓每件產品都賞心悅目，與其說官網是產品展示平臺，倒不如說它是蘋果產品分支的延續。從 Apple.com 找設計靈感是每一位設計師都做過的事，那它到底有何魅力？文章對Apple的網頁設計展開了梳理分析，與大家分享。
每當有新產品發布時，我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段時間發布的 iPad Pro 也一樣。
這背后是 Apple 基于 webGL 技術，創造的一種沉浸與交互式產品體驗。
我們在產品介紹頁可以看到，蘋果使用了大量的滾動 scroll 來體現連續性。
一方面，滾動作為大多數 Web 用戶最自然的操作，學習成本極低。
另一方面，在冗長的頁面下，滾動能讓產品特性保持更自然的轉場銜接。
iPad Pro 的連續性
另外，采用了大量的動畫式轉換（animated transition），即操作時展示的動態效果，以此來增加趣味性。
伴隨著豐富的、若隱顯現的章節文案，就像電影的旁白一樣，娓娓道來。
通過滾動的方式增加交互性，這是明智之舉。試想一下，如果只放置已渲染的演示視頻，那么用戶的操作會受到限制，只能在視頻中前進或后退，毫無樂趣可言。
AirPods的趣味性
說到言之有序，我們看 iPad 的頁面介紹。四款產品，分別是：iPad Pro、iPad Air、iPad、iPad mini。
拍攝角度的秩序感，可謂妙不可言。
iPad的秩序感
如此一來，即顯得有序，也不會導致視覺疲勞。
其次，官網與 iOS 保持協同的設計語言，給用戶呈現了一致的感官體驗。
從 iOS 11 開始，蘋果就采用了 Large Title 大標題的字體風格。字重也從 Regular + Light 的組合，轉向的 Medium + Bold ，以此增強信息傳播中的識別力。
HomePod
另外，高斯模糊的標題欄背景、產品的投影等設計語言也保持系統一貫的風格。我們可以很清晰的看到 Web 設計的同步轉變。
第三是視差帶來的層次感。
蘋果奉行包豪斯的無裝飾和極簡的理念。當然，它不是那種附庸的美觀及外表的光鮮，而是將復雜難懂的技術以簡潔的形式傳達給用戶。
Mac Pro 視差滾動
在信息層次方面，Apple 的編排設計由淺入深，猶如抽絲剝繭。很好的利用了視差滾動，傳達圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。
不僅如此，樣式上富有視覺張力?；驍U張、或收縮、或吸引、或排斥之感覺，呈現刺激與震撼。舉兩個例子：
A13芯片的擴張力
擴張力：整個畫面以 A13芯片 為視覺中心點，元素和布局圍繞這個視覺中心點向外擴張。采用發散式的視覺引導，視覺張力就出現了，讓人感覺巍峨壯觀。
Pro級攝像頭的排斥力
排斥力：通過元素的大小對比，可以形成一定強度的視覺排斥力。Pro級攝像頭 輔以大特寫，傳達空間意識。視覺上被其構圖、美感觸動。
再聊聊蘋果的高級感是怎么來的？
我們都知道，高飽和度的色彩，會影響人的情緒波動。相反，低飽和度的配色，對人眼的刺激較弱，會有一種冷靜且克制的高級感。
iMac Pro 高級感
回過頭來看蘋果官網的大部分頁面，除了產品界面色彩 和 按鈕藍 之外，其他的文字、背景、控件一律采用黑白灰色系，以此營造高級感。
甚至是 iPhone 11 Pro 新出的暗夜綠，也是高級灰中加了一點點綠而已。
換言之，減少使用顏色的數量，降低色彩的飽和度都能削減色彩對人的情緒，起到提升產品高級感的效果。
iPad 留白
除此之外，恰當的留白可以更加突出產品內容，讓重要的信息更準確的傳達。并且能營造出廣闊的空間感，讓畫面得到延伸，呈現一種意境美。
所以我們做設計時應當多做減法，避免無意義的視覺元素堆砌，反而能讓你的設計更有高級的氣質。
這又印證了現代主義建筑大師密斯·凡德羅的那句話：Less Is More。
當然，只有留白是不夠的。既然是做宣傳，那么一份高分辨率、精致的配圖就顯得尤為重要。
蘋果官網大部分的產品都是采用實拍+后期修圖，而非渲染圖。目的就是為了反映真實產品的質感、以及材質光影效果，這一點能看到蘋果對于品質的追求。
Designed by Apple in California
不僅如此，蘋果產品圣經《Designed by Apple in California》，以及壁紙同樣是由攝影師拍攝完成。有興趣的同學可以看下面這個幕后制作視頻，相當硬核。
做過英文 Web 的設計師都知道，英文往往比中文更好設計，相同的布局英文出來的效果也更好看。
這不是崇洋媚外，心理學有個詞叫做「母語羞澀」。簡單來說就是，中文對于我們來說，太常見了會讓人產生一種廉價感（實際上是羞澀感）的心理感受。
老外也一樣，你可以看到美國企業：蘋果、麥當勞、星巴克都是使用圖形 Logo，而日本企業不用母語，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一臺電腦，何必是電腦。
回到蘋果官網，我們看到一部分文案是英文產品名稱，這個不會感覺羞澀。
那中文部分怎么辦呢？比較有意思的是，Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關、重復等修辭手法。雖然語感很差，但基本上能明白字面意思。
其實這樣做的目的就是為了創造一種陌生感、一種獨特的語言風格，來凸品牌氣質。舉幾個例子：
最后一點。生活要有儀式感，蘋果官網也有儀式感。
國際婦女節專題
在一些特殊的日子里，例如三八節當天，友商選擇打廣告促銷。而蘋果推出了國際婦女節專題，致敬女性的偉大，這一做法頗具人文情懷。
不過話又說回來，感動歸感動，還是參與友商的打折活動香。
文章來源：人人都是產品經理 作者：阿洋
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn