簡單明了，讓人可以立即評估自己的表現距離目標有多遠。
設計產品的時候，如果行為修正非常重要，可以把選擇架構原則考慮進去。
復雜的應用多種多樣，支持的服務和功能也千差萬別，但是無論如何呈現，此類復雜應用的設計都是非常挑戰設計師的設計功底的，需要設計師了解業務，了解用戶，并且能夠通過設計更好地提供服務。
很多時候我們會覺得情緒板設計可有可無，或者因為時間的關系不允許我們經過這一步。但，如我一開始提到的點，情緒板可以在前期幫助我們去打通很多思考的壁壘，輔助設計師在前期直觀的與產品側進行方向上的探討，從而找到大方向上的共識。
好的網頁設計具有很強的適應性并且對用戶來說始終是友好的。
遵循網頁布局的最佳實踐，能夠帶來全新的數字體驗，靈活地調整不斷變化的技術和設計趨勢，進一步實現品牌目標。
編者按：這篇趨勢分析的文章出自資深設計師 Lyudmil Enchev 之手，匯總了 2021 年在網頁設計領域值得注意的 10 個重要趨勢。
雖然移動端設計在持續地繁榮發展，但是網頁設計依然是當下硬性的設計需求。相比于以往，網頁設計所面對的要求，其實越來越高，不僅要細致到位，要功能全面，要能夠貼合趨勢，還要能兼顧桌面和移動端。
從網絡上找到靈感并不是一件復雜的事情，不過要將新的樣式應用到網頁中，給舊有的樣式翻新，都需要配合技術的進步和新的工具。
在網頁設計領域中，設計趨勢從來都不是為了設計而誕生的，相反它更像是視覺、品牌、技術、先鋒探索綜合作用下，落地到網頁作品中的一種綜合表現。越來越多的技術和設計人員將聰明才智和天才想法融入到網頁當中，才催生了如今我們看到的這些「趨勢」，而這個，就是我們今天要聊的東西。
其實嚴格意義上來說，卡通插畫一直在流行，流行了很多年。從卡通插畫在電視上成為一代又一代人的視覺和設計啟蒙開始，它就從來沒有離開過網頁設計的主流領域。
也正是因此，直到今天，當我們談及網頁設計趨勢的時候，卡通插畫也會是我們最容易想到的一個趨勢發展方向。插畫，是一位設計師自由創作發揮的通行證，而卡通插畫，是最容易帶著設計飛翔的一個設計技術。
卡通插畫足夠靈活，裝飾性非常強，在題材和風格足夠切合的情況下，能夠更快和用戶構成情緒上的紐帶，可以說是非常強大了。
當然，不止是在這一篇文章里面強調過，3D 的重要性和作為趨勢的流行程度。從文字排版到視覺圖像，3D 在視覺領域的快速增長和市場需求是大家有目共睹的。
值得一提的是，在網頁這個領域，除了諸多視覺元素的視覺設計之外，有一個非常突出的趨勢，就是運用 3D 來構建視覺景深，渲染出層次，這非常強大。
這種景深和 3D 元素所構建出來的沉浸感使得整個網頁充滿了吸引力，結合色彩，陰影、高光，在高清晰度的屏幕上，這些都成為了將用戶留下來的理由?？纯聪旅娴陌咐?，你就明白我說的意思。
失真和故障效果則是另外一個重要的趨勢。視覺噪音，隨機的元素，缺陷，故障，模糊，低保真的元素，粗野主義式的設計，這些在這個以精致細膩為上的時代，制造出了一種反主流的聲音。
并非它們必須這樣，但是這樣的視覺風格確實更容易在成堆的精致細膩設計當中脫穎而出——當然前提是你的故障和失真效果能夠做的足夠「好」。
奇怪的配色，反直覺的排版，明顯的錯位，看起來怪誕但是有趣的設計，這樣的設計通常需要設計師更好地在對錯好壞之間拿捏平衡。
感覺，感覺很重要，你明白嘛？這不是反邏輯也不是反設計，是特立獨行?？纯聪旅娴陌咐?。
懷舊也一直在流行，你知道的。但是如何懷舊？90年代，數字化設計剛剛從像素開始向著更加細致的未來前進，這個階段，有大膽的嘗試，有快速更迭，這些介乎新舊之間的數字設計，是我們對于 90 年代設計的美好回憶。
相比于 80 年代的粗陋（圖形化界面還在艱難普及中），90年代是騰飛的階段，從界面到游戲，在擬物化走到之前，那種介乎精致和復古之間的微妙感覺，是非常有趣的。
對于新世紀才出生的 Z 世代而言，90年代是陌生的，但是這個時代又是很容易可以被追溯到的，這也是使得 90 年代的數字風情有著能夠打通不同年齡段用戶的奇妙氣場，它的逐步流行，并不令人意外。
你總能在這些設計當中，get 到到某些東西，然后微微一笑。
嚴格意義上來說，微動效和微交互并不是趨勢那么簡單，在如今的 UI 和 UX 設計當中，它是必不可少的組成部分，它已經從過去的「加分項」變成了如今的「基本要求」。
微交互和微動效通常不會做得特別的顯著，但是它們會深入到 UI 界面的各個地方，按鈕，小圖標，行為召喚式的文本，翻頁按鈕，光標，產品圖，彈出框，等等等。
微交互和微動效從最初的只需要確?？捎眯?，到如今需要好看易用又有趣，可以說要求是比以往有明顯提高了。在接下來的 2021 年可以預測的是，微動效會更加強調趣味性和交互性。
如果你正在考慮這部分的設計，看看下方的設計參考吧。
在關于網頁設計趨勢的文章當中，不探討配色是不完整的。2021年的年度流行色是什么？不妨等等潘通下個月月初公布的2021年年度色。那 2021 年的在配色方法上的趨勢是什么？是實驗性配色。
在以往追求協調配色的時代，和諧的搭配是最主要訴求。不過現如今，用戶、品牌乃至于設計師都在尋求一些更加新鮮獨特的東西，實驗性的配色就是在這樣的訴求之下，逐漸流行起來。
這些實驗性的配色通常會帶有一些漸變的特質，一些反習慣和反邏輯的搭配方式，飽和度較高的藍色、紫色和紅色的融合，一些更為黯淡或者更為刺眼的搭配方式，強烈的視覺實驗仿佛是在探索用戶的接受極限在哪里。對于如何落地，多看看那些優秀而微妙的已有的范例吧。
如果說有什么趨勢在 2021 年是非常明顯的話，我只能說，是更為大膽的排版和更為粗壯的字體筆觸。當然，這些設計本身是要具備相當的視覺美感和愉悅性的。懟到出血位乃至于版面之外的文本，快速切換的字體效果是「注意力經濟」催生的一種設計策略。所有的一切——尤其是文本——仿佛在大聲地吼叫著：看我看我看我！
這大概就是這種設計趨勢誕生的本質。不過如果你設計的足夠炫酷、炸裂或者優雅，誰又會去責怪你呢？
我們似乎開始厭倦橫平豎直均分的網格，那些并不那么精準，帶著手工制作的「不夠」的元素，對于越來越多的用戶而言，似乎是更好、更加易于親近的東西。因為這樣看起來更加個性，似乎給網頁賦予了某種真實質感，甚至可以腦補出這些手寫、手繪、手撕的視覺元素背后，站著一個有血有肉真實存在的人。
這大概才是手作感真正讓人開始沉迷的重要原因。你可以開始嘗試一下這種這些自由的、非正規的、甚至有錯漏但是顯得非常友好的視覺元素，字體，插畫，排版方式，裝飾元素，等等等等。
其實我們在前面已經反復提及了3D的部分，不過現在再做一個匯總：走出平面2D的領域，來試試有趣的 3D 設計，無論是好玩逼真的建模和陰影、有趣的材質和細節、腦洞大開的動畫、充滿縱深的轉場和強化的交互，都能夠讓網頁的設計，在2021 年更加吸引人。
因為炫酷本身就足夠吸引人了不是嗎？
極簡主義最后還是要提及一下。雖然總體來說是老生常談，但是它依然是很多設計師熱衷、很多用戶喜歡的一種主流的風格，也是值得追隨的趨勢。
必須說的是，還有很多厭倦了各種流行樣式的用戶可能會擁抱極簡主義，它會作為一種持續的「趨勢」而存在。這也是極簡主義最讓人著迷的地方：將你需要的必要的部分呈現出來，且只呈現這部分東西，沒有過度裝飾，沒有無效信息，簡單直接。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
結合理論落地項目功能，從邏輯層面思考問題。
節前有一位讀者問了一個關于單選與復選框樣式選擇的問題，大概是：
看到很多單選與多選的設計形式，多種多樣，以前看到「圓點+圓圈」就知道是單選，但是為什么現在單選與多選的設計樣式五花八門，都沒有遵守前面這種規范呢？這些組件的樣式到底該如何確定呢？為什么會有一種模糊不清，不知道如何使用的情況？
我發現許多人都有一個習慣，就是喜歡把某個具象的內容抽象化，把某個具體的問題概念化。
比如認為單選就應該是「圓圈+圓點」的形式，但似乎從來也沒有任何明文規定單選就必須是這樣的形式，只不過大家看得多了，就習慣認為是這樣，覺得就是這樣規定的，但其實并沒有過這樣的規則。
要知道，樣式常常根據功能在變化。比如功能優化了，樣式也需要進行修飾，并不是說這里有一個單選操作，就必須是「圓圈+圓點」的形式給用戶選擇。無論是在電腦還是手機上，都是一樣的道理。
這樣去處理問題，常常會把實際的業務問題給處理沒了，最后變成控件選擇的問題，而不是功能本身的問題。
比如普通的彈框，也是一種單選狀態，為什么不也改成下圖右邊這樣的呢？不就是操作路徑長，點擊起來麻煩，多此一舉，而且也不好看么？
即便真的在某個場景下，非得使用上圖右邊的單選形式，那么把樣式改成下圖這樣，又有何不可呢？
只不過常規的「圓圈+圓點」被使用得多了，大家形成了共識而已，但并不代表它就是一種標準。
如果有一個規則規定說，單選必須是「圓點+圓圈」，那么各位目前所設計的絕大部分組件都將不能使用，包括各類菜單或開關。比如下圖這樣的 action sheet 就不應該存在，而它的出現也是因為功能屬性、設備遷移、操作形式等內容的演化所呈現的結果。
這就是大家在處理設計問題時，習慣做一種概括，希望能復用于絕大多數場景而導致的錯誤情況，沒有落實具體問題具體分析的原則。
包括這位讀者的問題，也是希望能夠明確單選與復選樣式的選擇問題，以便往后能夠更有條理的使用。但可惜并不是這樣，從上述我舉的控件例子可以看出，單選形式早就已經變了模樣，而多數人并沒有注意到，還在認為單選與多選就應該是圓圈與方框的形式。
設計工具/方法論，確實是有部分指導作用，但不能作為絕對性或權威性的內容來吸收，應該辯證地去看。
而之所以在移動端延伸出許多自定義組件（形式并沒有遵循所謂的市場常見規范），正是因為業務與功能的多樣性導致的結果。
樣式的選擇不單單是看到的那部分，它還可以任意變化地處理，無論是單選或者是多選，不該被樣式套牢了。而它的決定因素應該是內容。
比如，iOS 鬧鐘的鈴聲選擇，有許多可選項。
但是因為內容的明確性，大家都知道，鬧鈴只能選擇一種，不會同時有 2 個鈴聲響起來（當然也可以這么做），所以即便鬧鈴的單選形式再如何變化，大家也都知道它是單選的，這就是功能決定了操作形式的例子。
類似于，再如何變化選擇樣式，無論是圓圈、方框，或只有勾，甚至是其他情況，大家也都知道它就是單選。
而之所以用勾或圓點表示被選中狀態，只不過是人的一種正常認知意識，即使改成三角形，只要能說清楚是被選中狀態，那也不是不行，只不過三角形沒有勾來得清晰罷了，而并不是因為有什么特殊含義。
所以只要梳理出符合自己產品的「單多選」樣式，形成規范即可。一些人會感到模糊不清的原因是它本來就沒有所謂的標準，又何來的清晰呢？
寫到這，想到之前有讀者問：什么時候該遵循設計規范，什么時候不該？
要知道，設計規范本身就是基于某個具體產品內容所構建的一個整合標準，為了規范化存在共性的功能形式。而對于共性的判斷也應該是從功能來定義的，比如返回都在左上角類似的，但是一定么？
單拎出來說什么時候該遵循，什么時候不該遵循，是很概念化的一個問題，不可能存在一個具體話術標準，說什么時候應該，什么時候不應該的。
如果我回答，符合規范中已有的形式的，就遵循，不符合的就不遵循。那就是一句典型的廢話了。但除此之外，我也就不知道如何解答了，除非你把規范和具體問題發給我，我可以跟你一起討論討論。
寫這篇文章的時候，看到一位朋友發的信息：
為什么手機刷新都喜歡下拉？因為神經科學研究表明，這個動作，更容易讓人產生對不確定性和驚喜的期待，原理和賭場的老虎機類似。
很多人都會習慣性給一些操作或交互形式做類似這樣的定義。
但這么定義是不對的，因為這相當于前面說的，把業務給解釋沒了，成了形式上的討論。而為什么會使用下拉、以及下拉會有什么情況，包括它所解決的問題，都沒有任何的分析。
比如，下拉之所以讓人上癮，并不是因為「刷新」本身。下拉只是一種交互行為，它的出現也只是為了解決早期刷新按鈕占據屏幕空間的問題，希望通過下拉進行刷新，以隱藏掉屏幕上的刷新按鈕，給屏幕留出更多可用空間。
而采用下拉是因為它更符合人的直覺 —— 往下拉能看到更多新的內容。
但是人之所以會對下拉上癮，并不是因為下拉這個行為，而是因為下拉能看到更多信息。下拉本身只是解決了屏幕空間的問題，而人其實是對內容上癮。
比如我在騰訊新聞里看 NBA 的資訊，通常只會直接上滑，看下面的內容，看完了就關了，不會進行下拉刷新。
因為在騰訊新聞里，下拉刷新的新聞并不是的內容，更多是今天或今天之前的信息，不刷新反而是剛剛更新的資訊，那么下拉刷新雖然也是刷新，但是刷新出來的內容是舊的，也并不吸引我，反而成了我要避免的操作，因為只要一下拉，的資訊就會被舊的資訊擠掉，要刷掉進程重新打開 App 才會重新再顯示的。
所以就不能簡單的定義說「下拉刷新是一個容易讓人上癮的操作」，而是要關注內容，如果刷新的信息都是舊的，或者是用戶沒興趣的，那即便刷新了，也不會引起用戶的注意，也更不可能讓用戶上癮了。
讀者：
呆呆，這個圖的卡片列表里，標題用省略號合適嗎？
（因為原圖涉及讀者項目隱私，所以重畫了個草圖。）
又是一個沒有業務背景的問題。不過這個問題比較簡單，可以展開來說一下。
通常，我們會在各類產品里面見到諸如「標題超出部分用省略號顯示」這樣的設計，譬如上面這圖。
于是，許多人在自家產品的設計過程中，遇到此類情況，被開發問到時，也會搪塞一句：文案要是超出就「…」顯示吧。
大多數遇到這種情況的，都是因為之前沒考慮好，才臨時想了這個解決辦法。
而很多時候，一些產品之所以用「…」顯示，并不是因為單純地文案溢出，可能是專門設計過的。
所以，如果簡單地認為「…」就是解決溢出而使用的方法，那就有問題了。
下面舉幾個例子。
有些產品，我們幾乎看不到列表視圖里的標題是有省略號的。
因為這類產品的目的就是讓用戶讀到完整的標題信息，對眼前的內容好做判斷，從而考慮是否點進去看詳情。
所以在設定的時候，界面中標題字數的規定，與界面樣式就已經提前規劃好了，可能在后臺設置就限定死字數，要求運營人員上新時要統一界面的展示形式。
這種情況下，一般就不會再有省略號的問題，譬如一些知識付費類產品。
比較典型的還有 TED 演講視頻的標題，在《設計體系》這本書里專門提到了這個案例。
對于 TED 來說，演講標題的信息優先級是最高的，所以他們寧可保留所有標題文案，也不對文案做截斷用「…」顯示。
因為對標題做截斷是很容易的，而難的是把一個演講主題提煉成一句簡短句子，所以他們為了展示更清晰的標題，寧可在界面上保留長標題，甚至為長標題的顯示而專門設計相符合的展示形式。
反過來，他們也因為這一點而確定了界面上標題字數的上限，確保文案不會超過界面顯示的最大臨界值。
包括一些資訊類產品，在標題上也會做限制，以滿足最大化呈現且不使用省略號。意思是：假設界面上文案范圍定了 30 個字符，那么配置的時候就必須 30 個字符以內把內容表達清楚，且必須完全顯示在界面上。
所以經?？吹揭恍?UGC 產品之所以會限制標題字數，原因除了常見的標題不能過長之外，還有一點是為了在列表頁就能顯示完整。
各位在設計這類產品功能時，也要注意到這一點，而不是隨意說一個「字符不能超過 50 吧」。
而有些產品的內容列表，之所以頻繁使用省略號，它的目的是為了引導用戶點擊用的。
這類形式一般出現在營銷號發的文章里，多是營銷人員自己為了文章點擊率而做的。很少會有一款產品的所有內容都是這樣的，除非是一些內容產品，運營方是企業自己，為了讓產品上的內容有更多人點擊而這樣去設計，當中可能涵蓋了廣告，以此賺取廣告費。
不過這類內容的設計已經讓用戶開始反感，所以如果不是特殊情況，最好少這樣去做。
當然，還有同類型的，一般出現在頁面面積小且需要展示更多信息的集合類視圖，比如：
這種形式的設計，就是因為頁面上想展示的信息太多，以至于通過這類合集來展示某個模塊里的內容，營造出一種很豐富的感覺。
也就是利用「…」引導用戶點擊，表示信息沒有展示全，如果要看，就點開詳情，進二級頁面。
還有一些產品的省略號，純粹就是大家理解的，溢出就省略號顯示。
比如同樣是資訊或內容類，以文字為主的產品，雖然標題超出范圍用了省略號，但用戶基本也已經知道是什么內容（上面那個集合類視圖也是一種），且還有摘要引讀。
比如下圖：
這種標題字符限制在了兩行以內，多余字符用「…」展示，基本上已經是一句完整的話，能讓人大致了解這條信息的意思。并且還有部分摘要，已經足夠用戶判斷是否對它有興趣，如果沒興趣，直接刷走也無所謂。
包括一些電商類產品，用戶多以商品圖片為主要決策因素，商品標題作為輔助信息，優先級不高，所以標題溢出是否省略號顯示也無所謂。
這其中有一個特殊情況，就是有些產品的標題即不展示全，同時又沒有省略號，比如淘寶的商品搜索結果頁面。
因為這類列表實質是一個產品賣點集合的濃縮詞，不是完整的一句話，多余字符展示或者不展示，都不會有太大影響，所以也不重要。
當中我比較反感的還要數農藥了。
好友邀請的列表視圖里，常?？床蝗欠Q，因為好友會有游戲昵稱，微信備注會展示在游戲昵稱后面，以至于要點到游戲關系里先看全昵稱，再到匹配界面邀請好友。
既然已經區分了微信好友與游戲好友，為什么昵稱上面不也加以區分呢？
當然，經常玩的好友可能沒這個必要，畢竟頭像或昵稱都可以很快識別出來，但是偶爾一起玩的好友通過這樣的識別方式就比較難了。
這里就是簡單提一句。
通過上面提到的一些例子，以及不同場景下標題省略號的處理方式，相信大家對這塊的理解會比之前更深。
同樣，對于開篇讀者提到的問題，更符合的情況可能類似于知乎這種，有完整句子，所以標題是否省略號處理也就沒太大影響。
但具體的還是要結合業務詳情仔細考量。
而標題內容的展示是否要用省略號處理，優先要看這條信息的業務權重，以及是否會影響用戶決策。
所以各位在設計這類內容標題是否要用「…」顯示時，也要注意判斷自己的產品特性符合哪種類型，而不是隨意一句話，說「超出就省略號顯示好了」。
最近收到兩個問題，正好都與輸入框有關：一個是怎么判斷輸入框要不要放置清空按鈕；另一個是輸入框超過限制后，是禁止用戶繼續輸入，還是允許超出但會警告提示。
在一定程度上，這兩個問題的分析邏輯是類似的，所以放到一起聊正合適。
先看第一個問題：怎么判斷輸入框里要不要放置清空按鈕？
原問題是這樣的：
呆呆，我最近在優化公司的產品，遇到一個問題，就是 PM 想在聊天輸入框里加一個「清除按鈕」，可我覺得不太合適，但是說不出原因，只能說沒見過在聊天框里加清空按鈕的。這個問題要怎么判斷呢？
我們一般會在搜索、手機號輸入框里看到類似的清空按鈕，比如輸錯了就點一下，清空后再重新輸入。但是很少會在聊天框里看到清空按鈕，為什么呢？
主要是「時效性」…算了，這種概念詞用多了，發現現在人都不會講話了。說白話就是「要快」。
無論在登錄注冊還是搜索的場景下，除了內容本身之外，最注重的就是效率。
譬如有個數據大概是說，用戶登錄注冊花的時間超過某個范圍，轉化率就會對應逐步降低。而率，就是讓用戶能快速登錄注冊賬號，使用產品功能。所以設計師們會在登錄注冊的操作流程里抓住可提率的每個細節，輸入框使用效率就是其中之一。
搜索也是一樣，當用戶有明確目的使用搜索框時，關鍵詞就是用戶當下最關注的信息，如果輸錯，再一個個刪除，顯得麻煩，所以清空按鈕能在這里提高用戶的操作效率，甚至 iOS 的搜索組件也會自帶一個清空按鈕。如果是電商產品，率是能間接提高成交率的。
這里的輸錯，也有兩層意思，一個是用戶在輸入過程中發現錯字，比如登錄注冊時，發現手機號輸錯了，一個個刪除反而沒清空重新輸入來得快，因為刪了之后，號碼要重新背一遍，具體到某個數字，然后接著輸，特麻煩。
或者搜索內容時，發現有錯別字，刪除某個字再重新輸入，反而沒有清空重新輸入來得快，畢竟輸入法有串聯關鍵詞組的功能。
另一個是反饋的結果不符合用戶的心理預期。比如輸入手機號已被注冊，或者搜索結果不滿意要重新輸入關鍵詞，使用一鍵清空都是比較的。
而且輸入之后，系統需要給用戶呈現結果，如果結果不滿足用戶預期，還會存在短時間內多次輸入與清空的情況。那么，無論是錯字還是對結果不滿意，清空按鈕都可以非常便捷地幫助用戶一鍵清除上次輸入的字段，讓用戶更快速地重新輸入新字段，從而提高用戶的操作效率。
于是，我們會把這類場景下的「清空」說成是「一鍵清空」，主要是因為方便。而它的作用就是，在出錯的場景下，更快捷地給用戶重置的操作。
反過來，各位可能要說：那聊天框不滿足這個條件么？
我們接著看聊天輸入框。
我們知道，聊天輸入框的內容不是固定的，它是根據對話內容而變化的，用戶甚至需要花時間持續輸入并糾正自己的用詞，以及話術的準確度。過程中，如果輸入的內容多，而且又是即興的，耗費的時間與精力也是很大的，清空后也難以再恢復。
它不像登錄或搜索，固定的輸個數字串或關鍵詞，它是一段完整內容。雖然也會有某一句話或者某個詞輸錯的情況，但是一鍵清空的操作成本太低，對應著聊天框的高輸入成本，一鍵清空的存在與之并不相符。
于是，這里就引出了一個概念，叫做「輸入成本」與「修改成本」。
清空按鈕對應的，就是低修改成本，因為簡單點擊一下，就清空了。它所適用的場景就是低輸入成本的情況，也就是前面提到的登錄注冊或搜索 —— 輸入的內容相對固定，且可能反復。
對于登錄、搜索等指向性比較明確的輸入框來說，用戶在乎的是輸入和反饋的效率高不高。一鍵清空操作能帶來效率上的提升，而且操作后帶來的損失成本是很低的。因此，一鍵清空操作在這個場景下，對用戶來說是安全且的。
但是在聊天場景下，一鍵清空作為低修改成本的作用是不適合的，因為這時候輸入成本比較高。
用戶在聊天輸入框內表達清楚自己的想法是為了讓對方理解，達到交流的目的，這樣的內容是不確定的。而且在聊天輸入出錯情況下，我們有多種操作方式讓用戶重輸，比如鍵盤快滑定位，觸摸定位錯字等，都比一鍵清空重新輸入的成本低很多，而它所謂的「便捷性」在這里意義也就不大了。
于是乎，在衡量輸入框是否需要清空按鈕時，我們首先要知道，清空按鈕是低修改成本，那么如果輸入框的輸入成本比較低時，我們就會使用清空按鈕，來提高操作效率。而當輸入成本比較高時，一鍵清空的操作就顯得配不上這個輸入框了。所以，它在聊天框里就沒有存在的必要了。
包括其他非固定內容的輸入框，也是一樣的道理。
接著，延伸出第二個同學的問題：輸入框超過限制是禁止用戶繼續輸入，還是允許超出但會警告提示？
相信各位讀完上面的，再看這個問題，應該也能分析出原因了吧？邏輯跟上面的也差不多。
也看輸入成本，比如是固定內容的手機號，我們正常會禁止多余輸入，因為這樣用戶更容易判斷手機號是否正確。
如果是短長文，說明用戶可能是手打字超出限制，這時候如果禁止輸入，用戶不好在輸入框里做內容刪減或修改，也會打斷用戶的輸入流，畢竟還沒寫完就限制了，那得先刪掉前面的，再來思考后面怎么寫，會亂。而且如果是復制的，禁止輸入的話，超出部分就被截斷了，也要先刪減，再繼續復制剩余部分，非常麻煩。除非先在別處刪減到限制字數內，再復制過來，但這樣又增加了用戶的操作成本。
如果允許輸入但警告提醒，那么用戶就可以根據自己已經輸入完的內容做刪減修改。
所以對于這個問題，我們從這個視角出發，也能了解一二，就是通過適用場景與輸入成本來分析。
當然，以上所有內容更偏向于通用性說明，針對具體業務還需要具體分析。
1、從單復選組件反思功能設計問題
2、標題文案溢出使用「…」合理嗎？
3、怎么判斷輸入框里放不放清空按鈕？
文章來源：站酷 作者：呆總、
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
復雜應用大多情況下是偏專業和B端的一些UI界面，它們大多出現在桌面端使用環境，并且終端用戶類型多樣，涉及流程、鏈條、業務也大多呈現出多變復雜的特征。這篇文章，來自UX設計領域的存在NNGroup，作者為凱特·卡普蘭。
我們之前將「復雜應用」界定為特定專業領域當中，需要經過廣泛培訓之后使用的，有著非結構化目標、非線性工作流程的任何應用程序。這個概念可能聽起來有點抽象，不過這么說你可能會 更容易理解：從科學研究到專業人員，諸如金融分析師，它們常用的那些專業軟件應用。這類應用通常有著這些特點：
盡管不同的復雜應用之間差異很大，但是他們的共同點是，專業的從業人員對于這類工具有著極強的依賴性。
考慮到設計師和開發者在面對這類工具的時候的挑戰，我梳理總結了 8 個復雜應用的設計原則和指南。
很多研究表明，對于復雜的應用和工具，用戶更加青睞可以立刻上手開始使用而不受它復雜度影響的那類工具。
與大量的教程、文檔、幫助和設置說明相比，能夠立刻開始的任務和項目，對于用戶有著莫大的吸引力。這種現象被稱為「活躍用戶悖論」。
雖然在專業領域當中，倚靠摸索和試錯學習是不恰當也不安全的，但是一定程度的邊做邊學是必須的，因為不可能在培訓和手冊當中涵蓋所有的使用場景。
所以，在設計的時候應該提供「跳過教程」的直接上手的偏好設置，同時進行相應的安全性設置，避免新手的莽撞操作導致損失。比如可以限制這個階段的用戶執行長流程多任務的操作，讓控制面板實時顯示操作結果或者預覽結果，這樣用戶無需執行全部操作就可以知道大概的結果。
在 Salesforce 控制面板當中，就可以實時預覽面板編輯的效果。
絕大多數用戶都不是進階的專家級用戶，他們在絕大多數時候會使用基礎但是效率沒那么高的操作和執行方案。很多用戶形成習慣之后，通常不會主動做出改變，而這在日積月累之后導致大量的時間浪費，效率低下。
值得一提的是，這個時候依賴冗長的文檔和教程其實很難達成效果，更合理的方式是結合用戶所處的上下文環境，通過界面工具提示的方式，適時地告知用戶「有更方便的方法」。
通常，可以使用懸停提示，或者是彈出式工具提示來實現這一功能。
ArcMap 是一款地理信息系統類工具，它通常會通過上下文環境下的信息引導，來幫助用戶了解技巧。
復雜的應用程序，通常會有很多功能是分散的而非線性的，不同的功能組合起來可以實現特定的功能。在這類工具當中，用戶日常可能也不是很確切知道最終的目標是什么，而需要通過數據分析來逐步推進，同時，在知道確切目標的情況下，也應該可以遵循不同的路徑靈活地達成目標。
設計師這些應用的時候，設計師應該避免使用固定、唯一、 僵化的實現路徑，迫使用戶必循嚴格按照某一固定路徑來做事情。一方面，允許用戶跳過某個步驟，或者回滾到更早的路徑，另一方面，允許用戶遵循不同的方式和路徑來達成目標。
比如萬事達卡的自助服務就可以通過交互式的圖表來引導用戶完成不同的任務。
復雜的任務，通常意味著它需要很多步驟，不同的環節，而在實際的應用場景中，某個分析步驟耗費幾個小時甚至幾天，都是有可能的。在高度復雜的現實生活中，某個步驟可能會換人接手，可能會因為硬件、 網絡等問題而暫停甚至丟失，這也意味著「可追溯性」是很重要的。
所以，在這樣的復雜應用當中，應該允許用戶在使用過程中，可以便捷清晰地記錄、保存、 導出內容和記錄，允許用戶中斷，中斷后可以恢復特定的任務。在任務進行過程中可以進行注釋、保存相關的說明。
在決策建模軟件TreeAge 當中，用戶可以在分析和建模過程中進行開放式的注釋，可以后續在底部快速訪問這些筆記。
復雜的應用通常還會面臨一個狀況，就是工具本身的不足，用戶需要在多個工作空間上使用工具和內容的時候，它需要具備切換的功能。對于不具備的功能，應用程序應該允許使用第三方的應用來作為補充。
比如當軟件不支持某個操作的時候，應該允許用戶從線上的其他數據庫中獲取并導出數據來使用，可以依托外部文檔作為支持，允許用戶在應用中做注釋和評論。
減輕工作負擔的一個要點，是盡量使用通用的API、接口和標準，盡量兼容行業標準軟件，比如 Excel、Powerpoint ，盡量使用標準格式，等等。
微軟的商業分析軟件 PowerBI 就提供了標準化的導出和復制功能，非常方便
復雜應用通常旨在保持泛用性。使用場景多樣，多種不同的功能，一家汽車生產廠家，可能會和蜜蜂養殖機構采用同樣的工具和軟件來監測機器故障。但是，這種泛用性的另外一面，就是混亂性。復雜的應用可能會同時兼顧到基礎型的小白用戶和進階型的專家用戶，而后者用到的功能很小概率會被基礎用戶用到。
所以，設計者需要在不降低功能性的情況下，基于應用場景、 用戶需求來進行簡化和優化，在保持功能完整易用的前提之下，降低復雜度和混亂度。
分階段和層級展現就是一種降低混亂度但是不影響功能性的一種常見策略。當用戶進行到特定任務、特定階段、特等級別之后，再呈現特定功能，是有效的設計方法。
即使降低了混亂度，在復雜應用當中，信息量可能依然是過載的。通常，對于這種情況可以通過區分信息層級的主次來進行快速的區分，不過，從交互上來說，這可能依然不夠。
對于諸如控制面板一樣的界面，用戶可能需要時刻查看面板上的信息，需要了解次級信息但是又不能離開界面，這就體現出主次信息之間的過渡呈現的重要性了。
一般而言，使用類似與懸停顯示的方式，能夠比較柔和地將次級信息呈現出來，允許用戶查看詳細的定量數據。下面這個案例當中就是，懸停顯示更多次級信息。
復雜應用通常在界面上包含由大量的信息，而這個時候關鍵性的數據如果不在視覺上做突出顯示，會被用戶錯過。通過視覺區分、提示警報的方式，讓用戶及時注意到，才有可能規避可能存在的問題。
值得注意的是，讓關鍵信息和元素凸顯的方式，并不一定非得是使用鮮艷的色彩和較粗的字體，簡單的放大呈現，使用圖形化的元素輔助提示，或者是提供足夠的留白都可以達到目的，就像下面的案例一樣：
復雜的應用多種多樣，支持的服務和功能也千差萬別，但是無論如何呈現，此類復雜應用的設計都是非常挑戰設計師的設計功底的，需要設計師了解業務，了解用戶，并且能夠通過設計更好地提供服務。
文章來源：優設 作者：Kate Kaplan
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
雖然「玻璃擬物化」并非是全新的事物，但是確實有越來越多的設計師正在嘗試這樣的設計風格，并且在這個多災多難的2020年底能看到這樣的新東西，總歸會讓我們對未來有那么一絲期待 。
隨著網購成為了人們購買東西的第一選擇，各大平臺的競爭也逐漸轉移到了提升用戶體驗感的身上。不管購買什么東西，最終都要經歷下單這一流程。一個合理的下單流程，往往可以讓消費者體驗流暢，從而提升對平臺的好感度，進而愿意長期的使用。
這是個非常值得研究的內容，最近我在優化商城下單流程的過程中，遇到了許多問題，通過不斷地探究，也對整個模塊有了更深刻的理解，希望通過總結能給大家帶來一些啟發。
下面將從目標的提出，結合案例的解說，并最終推到出結論的方式講解。
作為漏斗模型的最終收口的購買步驟，是購買轉化的關鍵。
但往往有些產品由于對流程沒有系統深刻的理解，會有很多迷惑的操作，使得下單的流程相當混亂。我也曾經經歷過類似的購物情景，經過一輪謎之操作后，我終于下完單了，但過后會擔心剛才買的東西有沒出錯。
關于流程的優化我們遵循的原則是：先讓流程合理了，再提高用戶每步操作的效率。
怎么理解合理，必須解決以下兩個問題，整個下單流程涉及到哪些步驟？步驟之間有什么邏輯關系？
我們需要洞悉到流程之間是如何串連，信息是如何層層遞進并最終達成目的。因為只有每環節解決了對應的問題，流轉到下一環節才能更省心。才能避免信息的反復確認，影響操作的效率甚至引發出錯。
可以拆分成三個維度考量，第一是頁面布局的重點突出的提效，第二是信息展示直觀的提效；第三是交互操作簡化的提效。清晰的頁面信息傳達能讓用戶清楚并了解自己的操作結果，并快速做出決策。
下單流程按需要提交的信息進行拆分，一般下單需要先確定商品（一切影響商品價格的因素的確定，如規格）；其次是訂單信息的確認（不影響商品價格，是訂單層面信息的確認，如收貨人，備注等），而后是訂單支付，支付方式的確認。
最后是訂單進度的跟蹤。這里列出的每一步前提都是上一步內容的確定。只有這樣才能做到環環相扣，并且信息流轉。
你是否遇到過在逛商城時看到某個服務，想購買時，進入的詳情頁卻沒有價格，然后需要你點擊咨詢客服，打開了一個咨詢窗口
賣東西不標價，你賣個寂寞嗎？
作為用戶的我難免會有浪費老子時間的負面情緒出來，撇開一些特殊情況說，一個詳情最重要的兩個要素是商品信息和商品價格。因為了解商品的目的是購買，購買的決策需要價格的支撐。
這是一對不可分離的組合，沒有價格的商品陳列和沒有目標指向的價格都是沒有意義的。
那么總結一下：商品詳情必備的兩個信息：
滿足了必備元素展示后，我們還要考慮元素的放置位置，首先是突出重要的元素，其次是瀏覽順序符合用戶場景。這樣才能真正做到提高下單效率，我們來看看下面這個例子:
京東的商品詳情作為購物電商商品詳情的代表來說一下，可以看到視覺瀏覽路徑是非常流暢的，明確的實覺引導和操作指引，先看價格，再選規格，而后點擊購買。
權大師的商品詳情雖然頁面中這重要元素都非常醒目，但它卻沒有讓用戶的決策提效，我猜測費用總計為什么放在這個位置，是希望用戶直觀看到選擇不同的服務項目對應的收費的變化。
可是也忽略了金額作為重要的元素，當用戶進入詳情需要第一樣看到，導致瀏覽路徑有點繞圈圈。
攜程的詳情可以說是權大師的一個優化，同樣的考慮，頭部不僅展示了重要的價格和商品信息，給到用戶購買的預期。在規格選擇后，預定按鈕旁邊還展示商品的總價。減少用戶來回查看金額的不便。
在購物中，選擇商品或者服務的規格是一個常見的操作流程，選擇規格的目的有：
以上幾個選項，根據不同的業務會有不一樣的描述，不過可以概括兩個內容，一是影響能不能買，二是能買的話不同規格的選擇怎么影響商品價格。
圖像化選項，比如顏色外形等規格有圖像的描述就更加直觀。如果換成文字的話，用戶的生活經驗會影響對文字解讀的結果。
數值化選項，這樣不需要選中再查看總價來判斷金額的變動情況。很方便地不同選項的價格，方便對比然后選擇。
通常門票或者酒店的規格選擇會用上面這種方式展示，同樣的道理，把不同項目的價格列出來，讓項目之間的對比更直觀。
下圖的例子中參考身高這一項規格說一下，身高的規格本來就是有規律的，比如從矮到高，或者從高到矮。
如果我選擇紅色規格衣服，身高規格最后兩項灰掉了，這時就算我不看具體身高規格是多少，也大概知道紅色衣服身高最高的規格沒貨了。
這時，我想找一個有170cm身高的衣服，我就會不斷切換顏色規格，用視線的余光去看什么時候170cm的規格亮起來。規格的展示通過位置和內容的支撐，能讓用戶更快速找到變化的差異。
不影響商品價格，是訂單層面信息的確認，如收貨人、備注等。
第一步說的是商品信息的確認，這一步是訂單信息的確認，這兩個維度怎么理解呢？
舉個例子：比如你到商場買東西，你首選是挑選好要買的商品放到購物籃里，再到結算臺支付。
這時候你是有個比較清晰購物列表在腦海中的，因為在挑選時候已經經過判斷，我拿了一個薄荷味的牙膏，還拿了一個潘婷的洗發水?，F在只需要把這些給到收銀員，她再確認一次就可以了。
但試想如果在你的結算的時候，有個小孩把你購物籃的東西攪亂了，放了一些別的商品或者拿走了其中的一些商品，你在收銀臺這里就會變得十分混亂。我又得重新確認一下自己要買的東西是什么。
訂單的確認是建立在商品的確認上的，而且步驟之間本來就存在了遞進的關系。先確認能不能買，再考慮能買的話收貨人等訂單的信息。在這一步，確認的信息盡量不影響商品的單價。
淘寶這個例子的話，訂單確認的頁面需要確認收貨人信息、數量、配送方式、運費險等，這幾個元素都不影響商品單價的，都是訂單層面的信息確認。這就符合前面所說的，頁面信息層層遞進，減少相同信息反復確認的原則。
飛豬買門票這個流程中，從詳情頁到規格選擇到訂單確認，門票類型始終可以選擇，到最后填寫訂單了，還是可以選擇不同的票種。
這操作有點迷惑，前面都告訴我了當前選擇了成人票，到最后還告訴我，你還可以選擇要一張學生票噢。最后確認下單信息要把商品信息再確認一次，這就是影響下單效率的表現。
支付的確認也有兩個重要的元素，金額和支付方式的選擇。
但也有的商城也會做成下面右圖，在訂單確認頁面把支付方式也一并選擇了。
表面上簡化了步驟，但由于不同步驟確認的突出的信息是不一樣的，如果我選擇支付，那在支付前我必定會關注金額。所以右圖這樣就沒法讓突出重要信息，需要費勁地找一下金額是多少。
訂單的詳情頁里包含的信息有：商品的信息、訂單的信息、支付的信息、訂單進度的信息。這個環節，訂單的進度信息無疑是重點。
對信息展示優先級排序為：訂單進度信息 > 商品信息 > 支付信息 > 訂單信息，淘寶的訂單詳情按重要程度自上而下排列：
有的商城甚至會把一些權重低的信息收起來，如訂單信息、支付信息。想查看時候可以點擊查看更多信息，這樣做的好處是能讓界面整體更清爽，降低頁面的復雜程度，那么對重點信息的抓取就更快速了。
對訂單辦理的進度展示優化，我認為淘寶可以說是個經典的案例：
以上改動都是讓訂單進度掌控的體感更加豐滿的過程：
以上進度展示的關鍵點可以概括為：當前進度、整體流程、完成的預期。有了以上三點，用戶對于整個進度的才能有一個清晰的把握。
在訂單流程設計各環節中，如果我們明白每一步的操作的目的，提煉出關鍵點。那在優化中就能更加得心應手。如果發現本文有什么邏輯的錯誤，歡迎大家指正，一起進步。
下面附上本文的知識目錄：
文章來源：人人都是產品經理 作者：小圈學產品
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
5W1H 這種分析方法，是比較宏觀的分析工具。它的應用是針對整個項目的開展來進行，幫助我們圍繞產品需求有計劃有邏輯性的制定解決方案。
在這個框架下，就方便我們決定要引入哪些其它分析方法或者理論內容，例如 SWOT、KANO、AB TEST、RMF 等工具。
也因為我們對整體的認識更清晰，決定了我們應用理論和其它分析模型的精細度、細節方法。讓設計師在項目處理過程中可以更靈活，更專業，更游刃有余。
藍藍設計的小編 http://www.syprn.cn