定義：
1.同一頁面內不同模塊描述
文章來源：站酷 作者：體驗為王UX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
去年大家看到更多的設計和文章都在圍繞“新擬物化”展開行動，隨著各種硬件的提升，代碼的優化，更多的風格和效果一一出現在我們的生活中，而今天呢，我們一起探索一下生活中最常見的，你可能沒有注意到的設計風格——“玻璃擬物化”風格，英文“Glassmorphism”，這也可能會成為新的設計趨勢。
在生活中的攝影，通過玻璃的層次感，給人以朦朧的美感，那什么是玻璃擬物化呢？
油管一管主Malewicz 小哥對于這種風格特征歸結為4點：
透明：使用帶有模糊磨砂質感背景的透明效果
懸?。簬в忻黠@懸浮感的多個層級
鮮明：使用鮮艷色彩作為強調色并且從半透明層中透出
微妙：使用輕薄微妙的邊框來強化物理質感
通過玻璃透明，加周圍顏色環境的烘托，頁面的層次能更容易的呈現出來。
你在哪，從哪里來，玻璃擬物化就很明白的告訴你了。通過透明的玻璃材質，能告訴你所覆蓋的層級。
蘋果的合計將玻璃擬物化的風格運用的惟妙惟肖，無論是mac，iPhone還是iPad，設計風格都保持著相對一致的玻璃擬物化風格。
首先：我們打開sketch，建立一個畫板，隨便找張圖片作為背景，畫一個白色矩形
接下來：調整矩形的屬性，再填充色中設置透明度為50%，邊框可以吸取一個30%透明的白色，2px，再添加一個環境色的10%陰影，做出層次感，最后就是調整玻璃模糊的效果了，玻璃擬物的關鍵就在于sketch自帶的背景模糊功能，我們常常以為這里只有一個高斯模糊，但卻忽略隱藏在里面的其他模糊效果。設置背景模糊值為10%，不用太大，太大的話模糊效果就沒有那么真實了，具體調整還是要看效果。我們看效果：
單層的效果不是很明顯，我們復制兩個調好的玻璃效果，調整他們的透明度，底部的透明度為70%、中間的為50%，最上層的為30%，看效果：
在界面設計中，就可以通過不同層級，調整對應的參數，達到更好的層級效果。
我們以這個照片的圖標為例來拆解分析，通過運用剛才繪制的玻璃面的方法，與圖標色塊組合起來，在組合的時候，調整好層級，一個輕巧且富有玻璃質感的圖標就繪制出來了，很簡單、很容易上手對不對？一起來快來試試吧
透明：使用帶有模糊磨砂質感背景的透明效果
懸?。簬в忻黠@懸浮感的多個層級
鮮明：使用鮮艷色彩作為強調色并且從半透明層中透出
微妙：使用輕薄微妙的邊框來強化物理質感
前人早已總結了讓動畫生動的技巧，早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則，該法則也是受用至今。法則雖是針對傳統動畫而制定，但對于我們日常需求中所接觸的動效/動畫需求也同樣受用。
1）動畫原則介紹
2）結合案例應用原則
3）流程方法論沉淀
4）結語
擠壓與伸展是我們最常用的運動技巧。使用擠壓與拉伸來強調物體的質感、重量、速度。擠壓和拉伸會給予物體運動時具備質量感和體積感的錯覺。例如當一個皮球正在進行下落運動，在運動過程中讓皮球體積產生一定拉伸來表現它的速度感，皮球落地后則因力的作用產生擠壓變形。
擠壓與伸展的幅度影響著物體的質感、重量。設計師們可根據物體的質感去決定擠壓伸展的幅度。動畫雖存在夸張性，但對于物體擠壓拉伸的體積盡可能保持視覺統一，避免較大的體積誤差導致運動的突兀。
預期動作可告知觀者物體運動即將發生，增強觀者的場景代入感，使運動更加生動真實。如果我們去除前期的預備過程物體所呈現的運動感知像是突然被前方磁鐵所吸引。
預期動作可對觀者視線進行引導，設計師可以根據預期動作所引導的方向來銜接鏡頭/場景的轉場。反之預期動作也可以用來欺騙觀眾，當用戶預期與畫面不符時也可增加動畫舞臺的趣味性。
每個角色/運動元素在運動過程中都會流露出獨特的態度和氣質。針對不同的角色/元素的運動特性運用不同的運鏡、表演技巧、時間節奏以及舞臺的編排技巧，傳遞貼合角色/元素氣質的動態感知。
在現今動畫工作流程中，考慮到流程效率及技巧利弊，我們可以使用兩者相互結合的方式。關鍵動作描述的是設計師們熟知的關鍵幀動畫的方式（類似AE）。在動畫設計前進行基本運動的關鍵動作提煉，再進行細化，一層層的遞進。底層的關鍵運動越完善，在后續添加細節時才不會耗費大量時間調整。而對于持續動作（逐幀動畫）的技巧，我們可以利用它處理一些復雜效果例如（涉及到運動空間的變化、形狀上的靈動變化等）。
逐幀動畫。
優點：自由且流暢的動態。
缺點：難以把控時間長短、體積大小。
關鍵幀動畫。
優點：清晰、可靠、規范。
缺點：修改成本略高。
跟隨動作指的是元素運動結束后不會立刻停止，會因為質量、慣性等因素，元素會慢慢進行振動減幅的過程。重疊動作則指的是運動不會同一時間發生，主體與附屬部分的運動會因質感、外力等因素產生不同的速率。
當一個人跳躍的時候，自身的衣帽等附屬物也會隨之擺動。跟隨&重疊動作反應著運動的力量感和速度感，利用好跟隨與重疊動作，可以更好地表現角色/元素主要動作/運動。當主要動作/運動力量大、速度快的時候，跟隨與重疊的物體運動幅度大，反之則運動幅度小。
真實世界的運動遵循著緩動運動的規律，而并非勻速運動。根據物體運動情況、動態質感去編排元素合適的運動速率。關于運動的速率編排相關內容，可以看看過往的文章-《動效的質感》。
仔細觀察可發現自然界中的運動多為弧形運動的組合，而勻速運動只存在于機械運動中。
在人物運動過程中使用弧形運動增添角色動畫表現力。比如當人物抬頭或轉頭時，通過弧度的變化映射人物的情感，是充滿好奇心的還是沮喪的。
在交互動效中，弧形運動路徑會給予觀者運動表現力較年輕活潑的感知隱喻。設計師可根據品牌調性及產品屬性去選擇運動路徑類型。
當主體在運動時，設計師可通過附屬物運動來輔助表達主體運動氣質。比如人物敲門時，捏緊拳頭的敲（代表生氣）與翹起蘭花指敲的（代表精致）區別。
在上篇文章其實我們有提到影響動效質感的原因之一就是時間，控制好物體的運動時間也是表現良好動畫節奏感的關鍵。
使用「時間偏差」的技巧，可以讓你的動畫更加生動。因為受力、質感等因素影響，主體運動時附屬部分的運動不會同時發生。比如當人物正在打哈欠時，首先是從嘴巴發力，再擴散至五官眉毛。
為保持動效的連續性以及營造自然流暢的交互體驗，適當的使用時間偏差，可避免動效元素變化過程出現空檔期，提升信息傳遞效率減少認知負荷。
通過夸張手法增添動畫表現張力，加強運動元素的吸引力令動畫更有代入感和戲劇性。
動畫設計時可通過營造鏡頭透視感、景深感模擬真實的空間感打破二維扁平視覺效果，提升畫面表現力。
一部好的動畫作品一定會有令人吸引的人事物，比如動態氣質或視覺風格等它們都能很好的吸引觀眾。除此之外，如何講好一個故事，通過趣味幽默的故事表達手法也可以增添動畫的吸引力。
通過對十二大基本原則的學習，我將技巧分為以下兩大類：設計技巧和表演技巧。
設計技巧：動畫設計的技法，增添動畫細節令動畫表現更生動自然。
表演技巧：舞臺表演的技巧，提升動畫舞臺全局的表現力。
接下來我們結合上述所提及的動畫原則，根據實際案例進行結合應用。一起來探討下當接到動效設計需求時，我們需要思考哪些點？才能使我們的動效表現力更上一層樓。
假設在項目中我們需要對設計元素（豬豬存錢罐）添加動效以提示用戶已省錢成功的情感氛圍。設計前我們先來分析下元素以什么動態/動作表現會更貼合元素性格?？紤]到豬豬的可愛屬性，采用了跳躍的運動方式。并擬定了跳躍后天上落下金幣的動畫腳本。
將腳本確定后，我們在腦海里已經有大概的運動畫面。但在進入動效設計前，還需要明確在動畫中使用哪些動畫原則來提升動畫生動性。
在添加動畫細節前，我分享下在項目中經常用到的兩個技巧。
實現擠壓與伸展的方式有很多種，最常見的是直接改變物體的縮放比例或形狀路徑來實現。但在設計項目中我們往往會遇到非矢量的設計元素，利用xxx可實現圖層的彎曲扭曲等變形效果。
質地堅硬的物體受外力的影響較小，質地柔軟的物體受外力的影響較大。而像豬豬這類柔軟的物體在恢復靜止吋肉肉會有一個跟隨&重疊動作（抖動）。在處理這類抖動的效果除了使用常規的彈性表達式外還可配合使用AE的 CC bend it 效果增加形變細節令物體運動更為生動自然。
當我們去除這些動畫原則后，再去作對比明顯的感知差異就出來了。
根據過往項目經驗，我總結了動效/動畫設計的流程思路。從業務目標的分析到動畫腳本的確定，層層遞進。前期的目標和框架確定后，之后進行動畫原則的梳理及最后的動效輸出。設計師們不妨在項目中嘗試上述的流程思路及原則技巧，將自身動畫的表現力提升一個檔次。
隨著動畫/動效的落地方式愈來愈完善，像Lottie、svga等新型的動畫落地形式所帶來的高品質畫面呈現。設計師們不能滿足于動畫僅僅只是動那么簡單，如何去塑造生動的動畫形象還有不少我們需要考慮的細節。恰好前人總結了相應的原則技巧，幫助我們站在巨人的肩膀上看得更遠。除《The illusion of life:Disney Animation》外，近期也在閱覽《動畫師的生存手冊》里面涵蓋了不少關于角色動畫的運動技巧及細節。其中部分技巧并不局限于角色動畫的設計中，下期文章我將分享關于角色動畫的知識沉淀內容。
文章來源：站酷 作者：Fiasc1
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖標風格匯總
圖標設計流程
案例講解
圖標資源輸出
線性
面型
線面
單色
雙色
漸變
不透明度
一筆成形
斷點
該風格設計感和個性都極強，很考驗設計師對造型繪制的把控，功底不夠就很容易導致設計后出現識別問題。所以設計難度較大，且延展性較弱，難以表達復雜語義，使用需謹慎。
單色
雙色
不透明度
晶白
磨砂玻璃
等軸側（2.5d）
漸變
新擬態
輕質感
明暗質感
寫實
抽象
卡通插畫
像素風格
面型不透明度風格，通過調節前后不透明度可以帶來較強的空間感，使用場景較廣泛。
晶白嚴格來說也算質感圖標（白色質感）的一種，常見于品類圖標設計，通過透明度、投影、漸變等參數調節，使整體立體感和空間感都很強。
又叫毛玻璃風格，是通過背景模糊，或剪切模糊圖層的技法來表達通透、有層次、精致的視覺感受，但由于容易與淺色背景相融，造成對比度不足難以識別的問題，所以在使用中需要注意無障設計。
也叫2.5d，有很強的趣味性，及識別度，適合重要入口或運營設計。但這類風格較為卡通，且表現花哨。使用需要注意應用場景及目標人群年齡段，避免干擾信息閱讀和不符和產品風格。
這類風格可以很好的吸引用戶注意力，在電商、美食類產品中較常見，主要注意配色干凈協調。
新擬態圖標色彩相對單一，與背景融合度較高，通過高光、投影表現一定的立體感。通常是整個產品就是新擬態風格時才使用。所以該風格局限性較大，再有這類風格與背景對比較弱，無障設計問題較大。
通過大量漸變、投影來表現立體感，整體風格偏年輕化，常見在教育類產品中，使用注意配色干凈和諧。
通過調節同一色相不同明度、飽和度來營造前后空間感，整體風格統一。
這類圖標特點很明顯，有極高的識別度，目前美團外賣品類區入口就是該風格，整體偏年輕化。主要考驗設計師造型繪制、技法表現能力。
通過幾何圖形組合、色彩使用來表達美的視覺感受。這類圖標藝術（裝飾）價值更大，不追求識別度，美觀即可。
這類風格既可以做圖標又可以做空狀態插圖，設計美觀有特色即可。
這類移動端界面較少見，目前只在一個海外電商產品（Jollychic）中看過，還有就是一些像素游戲中，比如「泰拉瑞亞」、「我的世界」。
線面
描邊插畫
粗線
細線
圓角
直角
力量感、穩重、男性等感受
安全、親和、年輕
由于圖標風格繁多，所以以上列舉并不包含所有圖標風格。
明確語義
關鍵詞詳解發散
確定風格
提取造型
創意輸出
圖標存在的目的是起引導作用，在豐富頁面視覺的同時，幫助用戶更快的獲取信息（當然圖標的使用意義還有很多）。設計師在將文字翻譯成圖標前，必須先理解其文字含義。因為最終呈現的圖標，需要用戶一眼能準確反翻譯其中含義（藝術抽象、裝飾類圖標除外）。
在C端設計中，以Tab為例，一些常見文案：首頁、分類、發現、我的，這類語義還算比較清晰的。但在B端設計或工具類APP中就會遇到一些復雜語義。以我的工作來說，目前在做一款網站搭建工具，后臺常會需要設計組件及對應的圖標，比如：滑動商品、多圖列表、上拉圖文列表這些語義比較復雜的圖標，在一定程度上會比較難精準傳達文案。
這一步有點類似情緒版使用，但不同的是：我們需要將確定的詞（A)進行詳細解釋，再將解釋文案中關鍵的詞語進行發散，得出一系列相關聯的詞（A1、A2、A3…）。有時間還可以根據這些詞找到對應的圖片，再看在這些相關聯的圖片中，有哪些細節可以傳遞最開始我們確定的那個詞（A）的意思。
我們可以借助情緒版，根據產品定位和目標用戶描述，再結合應用場景，在目前已有的風格中找到符合產品氣質，符合當前模塊視覺層級的圖標風格。
前面我們已經了解了目前常見的圖標風格有三大類：線性、面型、線面，其中還有很多細分，比如在線性中又分粗線（沉穩、力量）、細線（品質）、曲線（女性化），還有圓角、直角，每種類型所傳遞的感受都不同。在創意前期，我們將每個點合理進行隨機組合（如下圖）即可創造一種更新穎的風格。
經過關鍵詞詳解發散，其實我們已經獲得了很細節點，接下來將這些細節點進行合理融合后，就可以得到代表同一語義但形式各異的基礎圖標樣式（此時還只是想法階段，可以通過手繪方式記錄組合形式，不用特別精細化）。
圖標設計規范
圖標設計注意點
常見圖標尺寸
圖標盒子使用
在界面圖標設計中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）
圖標盒子即圖標約束網格，來源于Material design。使用圖標盒子有利于使我們創造的系列圖標保持規范與統一。
簡潔美觀
易于識別
細節統一
像素對齊
視覺大小一致
飽滿透氣
融入品牌基因
圖標是否美觀，會受設計師對圖標造型把控、圖標構成元素比例、配色等設計能力影響。在UI界面功能圖標設計中，通常會盡量減少不必要的細節，降低圖標復雜度，來幫助用戶快速識別。當然圖標也有豐富細節的做法，常見在一些重要運營入口上。
識別度的問題，在最前面明確語義中就有提到過，這里就不贅述。
在細節中包含：表現風格、描邊粗細、端點類型、圓角大小、斜角角度、配色、投影參數等（不同風格圖標的細節不同，這里只是列舉部分），上述細節在系列圖標中都應保持一致。
在圖標繪制中，需盡量避免坐標位置xy或寬高參數出現小數點，以此保證最終導出的圖標是清晰的。
由于不同圖標外輪廓不同，就會導致哪怕在物理大小上相同的圖標（假設都是24x24），但視覺上可能還是會給人大小不一致的感受，因此我們需要借助前面提到的圖標盒子進行約束調整。
圖標的飽滿透氣，不一定需要加入很多筆畫（描邊、裝飾等）細節。而是盡可能在形成風格的同時，簡化能影響識別度的關鍵筆畫，通過調節筆畫大小、長短、位置使圖標達到一個最平衡狀態。
以如下途牛_我的頁面_功能區圖標為例：
圖中標紅圖標就存在飽滿度不足，及內部較擁擠的情況，第一感受是看起來不舒適，品質感比較低。除此外，還存在如下問題：
圖標大小很明顯不一致
設計語言不統一，有圓角有直角
圖標風格不一致，有透明度+分割形式（我的保單）、有純透明度形式（專屬顧問、我的收藏）、還有其余單色實心形式
在圖標中融入品牌基因可以有效的提升產品品牌感，作為高階設計師必備技能之一，常見提取維度：
顏色
設計語言
以我之前的豆果美食項目為例，提取到如下細節：
根據提取到的基因，最終得到如下兩套風格不同，但語言相同且都具備品牌感的圖標。
Logo輪廓：在圖標中融入品牌logo外輪廓（Google Play），或根據logo輪廓結合應用特性進行延展（Microsoft）。
根據文案進行詳細翻譯，幫助我們充分理解文案。
釋義：有專門的知識或經驗，受聘為機關團體或單獨個人提供專門咨詢的人。
提取釋義中關鍵信息，生成關鍵詞：專業、專人，再根據關鍵形容詞發散一系列具象名詞。
根據產品調性和模塊視覺層級以及考慮延展性，初步確定如下風格組合起來是比較適合：
在實際查看中，發現Tab的風格為單色+不透明度+斷點風格。
為了和Tab拉開差異，最終確定以如下風格進行組合表現比較符合產品調性：
線性：雙色
面性：單色、雙色、不透明度、輕質感、明暗質感
線面：線面
通過手繪或大腦想象進行造型構思，這里我就不展示手繪過程（行吧，我承認就是畫的太丑了不敢放）。
由于不同風格對圖標造型構思有所影響，且圖標類型很多，不同特點組合起來樣式更多。案例精力有限，所以只以線性雙色風格做演示，希望大家靈活使用。
這一步就是將手繪圖形矢量化，在矢量化創意過程中，我們可能會對手繪的圖形進一步簡化細節或新增造型，這都很正常。只需注意在整個繪制過程中遵循圖標設計規范，以及注意圖標設計注意事項即可。
圖標盒子使用
創意輸出
Tips：
1or2？
最后對專屬客服進行多風格嘗試，最終效果如下：
附上部分繪制過程中的淘汰稿：
SVG：縮放無損、體積小、支持前端樣式修改參數、單色情況下方便前端修改顏色來表達圖標狀態，減少重復上傳。
PNG：支持透明格式
JPG：兼容性強，適合大尺寸高飽和度圖像
GIF：動態圖標使用，缺點是透明情況下邊緣容易出現鋸齒。
這里主要介紹靜態圖標中，svg格式在工作中如何輸出給前端同學使用（借助iconfont）。
1、圖標資源優化
在iconfont官方繪制指南中有描述，在導出前需要按如下規則優化圖標資源：
2、選中圖標導出svg格式
以Figma為例，優化圖標資源后，選中圖標將輸出格式選擇為導出svg。
3、上傳iconfont
在資源管理下，選擇需要上傳的位置。
去除顏色并提交：適合單色圖標，去除顏色提交可以方便前端使用代碼修改參數，減少不同狀態圖標重復上傳。
保存顏色并提交：適合多色圖標（注意：在單色情況下，選擇保留顏色提交，前端則無法通過代碼修改圖標顏色）。
最后當我們把圖標都上傳好后，就可以將前端同學拉入團隊項目中開心進行玩耍。
文章來源：站酷 作者：幺零三
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們今天主要來講4個主題：
1.顏色使用的誤區-紅色的警示含義
2.功能即按鈕？-兩者的區別與設計思路
3.設計中的樣式-情理之中，意料之外
4.產品體驗案例收集-寧缺毋濫
5.減少步驟就能提高轉化？-少即是多，多即是少
所以，這篇文章還挺有意思的，大伙讀讀看
最近有多個小伙伴來問問題，老師， 我的產品色是紅色，那我用紅色的按鈕會不會給人傳達很強烈的警告？還有我們的產品色是冷色，如果不用暖色按鈕會不會沒有強烈的引導感，我好糾結??！
大家瞅瞅，他像一個好人還是壞人？
吶，顏色情緒表達不在于本身，而是其使用場景。大家都知道顏色都有其兩面性，比如這樣，同樣是黑色系，但是左邊看上去是潮流、硬朗的感覺而右邊則有一些憂郁、沉重的感覺。
所以顏色怎么使用要看用在什么場景，特別是主色的使用，如果本身是紅色或者暖色的主色，那么可以在以下地方使用：
1.希望引起用戶強烈注意的地方（正向/警示）
2.核心轉化按鈕（幾個不同層級）
3.正在激活的板塊（標簽、分段）
但是暖色為主色的產品核心轉化按鈕一定不會是冷色調
所以不用在意主色是紅色而帶來的正負向情緒，因為到了不同場景它的含義自然會變化，如果本身主色為冷色調，那么主色和輔助暖色都可以用在核心轉化的按鈕上或者用其主色，我見過冷色為主色但是核心轉化按鈕是輔助色的情況，我總結了一下，大家可以看以下兩個產品的截圖，如果本身產品的輔助色使用場景和頻率很多，那么在核心轉化和重要按鈕上我們要使用品牌主色，但是如果在工具類型的產品中，輔助色的場景和出現頻率很少，那么核心按鈕和一些關鍵引導信息可以用輔助色。
如果讓你在原有的界面中設計某個功能，你會如何設計？可能我們第一反應就是先給他設計一個按鈕。
按鈕很好理解，我們先看看功能在釋義上怎么說：事物或方法所發揮的有力作用，
阿喲，這一聽，簡直太抽象了！這就好比讓媒婆描述你的相親對象長的怎么樣：小伙子看起來挺老實的，抽象但又很清晰！大家看下面兩個例子：
第一個-刷新，無論是圖標還是文字，我們的預期是點擊之后就會實現在當前狀態/頁面的數據重新獲取
第二個-支付。支付也是一個功能，相比較刷新而言是一個復雜的系統的功能，但是它無法通過一個按鈕來實現功能的全部作用。
很多同學在做信息架構的時候就很懵逼，那我要梳理的是按鈕呢還是這樣的功能呢？我好亂啊。當然，信息架構肯定不是功能的樹狀圖堆砌那么簡單啦，那個頂多叫做功能分類，信息架構需要包含更多的業務邏輯和狀態邏輯。
所以在這里就有三個結論：
有簡單有復雜，但他們都需要通過外部的、具象的元素來實現其作用。
還有滑動、長按、甚至神經控制等等，如果大家玩過賽博朋克2077這個游戲就知道，義體的控制很多來自于大腦和神經，那么這些功能肯定不需要點擊這樣的操作行為啦，所以也不存在按鈕。
我們在做設計的同時要思考，一個功能可以以什么樣的形式存在，要滿足高效、簡約、符合心智模型等約束條件，比如做一個翻頁，沒有人會在app界面中設計一個下一頁的按鈕，抖音切換視頻也不會出現一個按鈕用來切換到下一個視頻，再比如公眾號文章收起需要通過滑動到指定位置，而非設置一個按鈕。
以后再讓你設計一個功能就不要直接做出一個按鈕喔
想把設計做的出彩一定要滿足兩個條件：1.符合常規認知 2.超出常規認知
聽起來有點玄乎啊，第一眼看心知肚明，第二眼看我x，這個牛逼啊。
那其實我們在做UI設計的同時也可以多些創意和想法，不要被慣性思維和熟悉的手法所困擾。有時候你想做一些創意設計但總是被“不統一”這樣的理由所駁回，麻煩把這篇文章轉發給駁回你的人，很多有意思的設計都被淹沒在這些“風險”提示里了。
比如網易云音樂這里的tab，大家都知道tab的樣式和其交互方式，還有和segment的區別，那么如果既不想用segment樣式又不想讓用戶進行所有滑動怎么辦？
沒錯，他們在這個地方用了豎線隔開了，重新感受一下，是不是可滑動的感覺變弱了呢？
還有卡片設計中如何添加標簽可以更順滑，如何讓一個按鈕自然的融合到另一個模塊里。
排版是否可以用異形設計，例如個人中心
我看到很多同學正在體驗各種各樣的產品，然后把一些不錯的案例摘錄下來進行分析，我覺得這是一件很好的事，我在2年前就鼓勵大家這么做，因為這個也是作為一個UI設計師的基本功，除了視覺創意的積累以外也要有交互案例的積累。
但是我發現很多同學有點南轅北轍了，我們需要收錄的是一些優秀的案例，何謂優秀呢，指的就是令人驚喜的功能，而非本該具有的或者無差別的功能（可以了解一下kano模型，這里不細說）。另外就是需要有分析的能力，不是什么案例都是優秀的，有些可能存在著不好的體驗。俞軍在其產品方法論中提到：用戶價值=新體驗-舊體驗-切換成本，所以價值大不大取決于新體驗是不是足夠好。
現在看到的就是可能這個產品把字加粗了，也能寫出一大堆分析這個加粗的好處，或者一個卡片設計就能寫出非常有親和力，信息更聚焦這樣空洞的詞匯，這對于我們積累案例沒有任何的幫助。
例如以下的案例，在編輯狀態返回系統會提示，從而滑出Actionsheet。如果不做用戶體驗會很差，但是做了，用戶并沒有很驚喜，這就是一個必備的功能而已，所以對于一個案例到底是否優秀我們需要盡量客觀的看待。
所以很多交互案例并不是不好，而是還沒有達到能夠被我們收藏的地步，如果沒有撩到你的心，那我覺得咱們就矜持一些。
那什么是一個比較好的交互案例呢？好的交互案例一定是更近一步解決問題和深入場景的，比如我們在場景分析過程中對于預判這個概念的理解，例如行動按鈕前置、替換、引導等等，例如像電影app在近電影放映前彈出取票碼一樣，這個功能如果不做，用戶體驗不會很差，因為依然可以找到這個二維碼，只是用戶想不到居然還可以這樣做，但是一旦研發出來，用戶會覺得非常驚喜，這種就是優秀的體驗設計。
再比如有些你可能覺得體驗好的案例其實還沒分析到位，就像高德地圖在到達目的地時會給你很多場景的補全和選擇，你肯定認為這很人性化啊，但是我在有一次使用“原路返回”功能的時候猶豫了。高德確實在幫助用戶解決問題，但是在這里顯然細節有待商榷。
很多用過這個功能的同學會發現“原路返回”的文案是有歧義的，功能是好功能，正不正緊就看文案了。來，我們解析一下場景：用戶a通過高德地圖導航到地點x，路上非常擁堵，好不容易到達目的地后需要返回起始地，這時高德提供了一個“原路返回”的按鈕，他要不要點？
為什么說這里有歧義呢？
1.如果用戶開始的行駛過程很擁堵，你告訴他原路返回，他的潛意識會覺得原路返回是不是也很擁堵。
2.原路返回到底是不是最佳路線，因為有時候來回路線的最優解并不是同一條馬路的左右兩側。
所以，人是好人，正不正緊俺們也不知道?？傊?，這個文案讓我不得不重新導航。
小結一下，優秀與否需要親自深入的體驗，并且結合上下文、用戶、業務多角度的考慮，并非自己沒見過的就是優秀的設計，咱們寧缺毋濫，提高自己的標準。
很多人一聽到轉化率就會把它和操作步驟關聯起來，只要能減少用戶的操作步驟和縮短任務路徑就可以提升轉化率。這個想法不能說全錯，但也不能直接運用減法去當作提高轉化的手段。
不用管這人是誰，大家可以理解為能量守恒定律，也就是說在所有內容（功能、信息、元素）不變的情況下，步驟越少，單個步驟所承載的內容也就越多。比如你有100個球，給你5個盒子，平均每個盒子放20個球，但是如果拿走一個盒子，平均每個盒子就要放25個。
表面上盒子少了，但是每個盒子多出了5個球，這就意味著原來簡潔的界面包含了更多的信息內容需要用戶去理解、操作、判斷。那我們可以說減少步驟就是提高轉化率嗎？顯然不行。
比如我們看到馬蜂窩和12306在購買車票流程中的表現：
馬蜂窩
1.輸入起始地目的地
2.選擇出發時間
3.查看車次列表并選擇
4.查看車次詳情
5.選擇座位類型、添加乘客信息、選擇座位
6.確認訂單
7.支付
12306
1.輸入起始地目的地
2.選擇出發時間
3.查看車次列表并選擇
4.查看車次詳情、選擇座位類型、添加乘客信息、選擇座位
5.確認訂單
6.支付
大家可以看到馬蜂窩比12306多了一個界面，他們把查看車次詳情單獨用一個界面設計了，而12306則是座位類型、詳情、乘客信息、座位選擇都放在了一個界面，表面上看好像步驟確實少了，但我們能看到像第三方的購票軟件還有其他購票的選項，例如極速訂座、車票+酒店等，所以在這個場景中需要展開展示給用戶，那么如果把這些都放在12306的確認訂單界面就會非常擁擠，而且選中狀態也很不直觀。所以最好的解決方法就是拆成兩步。
再來看個例子，在某個產品的1級界面中，有一個添加訓練計劃的功能。左邊是在1級界面中露出直接添加的按鈕，并且添加成功后在1級界面直接展示。右側則是進入二級界面進行添加。在步驟上來說顯然左側案例的步驟更短，那我們可以說左側的用戶體驗、任務效率就更高嗎？
對嗎？大家可以思考一下。
顯然不能直接說正確與否，因為我們缺少評判的標準和案例的背景對吧。首先左側案例在添加任務流程中確實占優，但是對于需要頻繁增刪改查的用戶而言就很不方便了，而且一直添加就會使首頁下方內容推到很底部大大降低了曝光。而右側的案例則更適合用戶進行批量操作。
所以路徑的長短并不能直接表示轉化率的高低，那么有哪些情況可以縮短路徑達到提高任務完成效率的目標呢？
1.減少步驟后不影響用戶對界面和內容的理解
2.減少步驟后內容信息依然符合場景，不沖突
3.需要實時檢查任務結果
4.有足夠的版面可以進行內容合并
5.合并后對任務目標不會造成歧義
比如下面這個案例，一個書籍分類搜索原本的2個步驟是可以合并的，因為在原來的版本中，用戶如果想切換更高級別的分類需要退出再選擇，而一個界面其實就可以實現3級聯動的效果，當然僅限于這個案例，根據業務不同我們需要對這些多層級、多類目的分類做更多的考量。
再來看一個案例，下面是一個預定籃球場地的流程，在這個流程中有幾個關鍵的節點：場地類型、日期和時間，因為籃球場地和老板需求的特殊性，所以我們不橫向去比較，我們可以來看看下面這個小程序的流程，預定步驟一共5步
1.時間和場地的選擇
2.查看場地詳情和說明
3.選擇具體時間
4.確認訂單詳情
5.支付
我們先不討論里面信息字段是否合理（最后確認訂單還要填寫性別和名字是什么鬼，打個球還要查家底嗎），我們先來看這5個步驟是否可以簡化。
一定是可以的，首先，日期和時間是屬于同一緯度同一場景的信息，我在幾月幾號幾點預約一個場地，這和看電影就完全不同了，每個電影院排期不同所以不能先把日期和時間都選了，但這里是可以一起選擇完成的。那么第三個步驟完全沒有必要，直接和第一個界面結合即可。
另外，不要被先入為主的樣式給蒙蔽了，場地一定要做成列表嗎？除非特殊場地，每一個半場其實都是一樣的，可能在光線和設施上有些區別，但是對于經常打球和第一次預約的用戶來說其實沒有實質的區別，所以這里可以用宮格形式替代。
然后查看詳情和說明個人覺得也比較多余，經常預約打球的用戶已經非常熟悉場地了，對于新用戶來說也只是看一下場地的環境，所以這個頁面本身內容就不多，所以可以直接和確認訂單詳情結合，將確認訂單頁的內容做減法。這樣是不是整個流程減少了兩步，大大的提升了任務完成的效率呢？
每個人都有自己的慣性思維和刻板印象，有時候能幫助我們更高效的完成任務，但有時候這些潛意識的反應也會讓我們深陷泥潭而不自知。只有當我們深入剖析一個問題時，才能發現其本質，適當讓自己保持批判性思維是有幫助的。
文章來源：站酷 作者：應駿
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近在社群里有人問，有什么總結和復盤的經驗嗎？感覺自己表達能力很差啊。今天，彩云就跟大家分享一些我的經驗，希望能幫到有類似問題的朋友。
以上類似的問題，相信不少朋友都遇到過：
1）明明自己做的設計不差，但不懂得怎么去跟其他人推進自己的方案
2）明明自己已經很努力，設計能力也不差，但總是被其他能說的同事占了主導
3）項目做完了，不知道怎么復盤和包裝，跟面試官介紹項目的時候感覺講不出亮點
復盤表達能力在職場中的作用不用多說，大家都懂，那如何提升呢？我給你支幾招，絕對好用：
1）善于記錄，把想法轉化成文字
2）做事多想想附加價值
3）多跟別人分享，輸出倒逼輸入
4）學會模仿，掌握說話的節奏
5）復盤的具體操作
復盤和表達其實是2個能力維度的事，一個是文字總結提煉能力，一個是語言組織表達能力。所以，我在平時會有針對性的去做下面這些練習，分享給大家。
腦子中的想法和口中說的話，往往是比較零碎不系統的，而文字則讓你有更多時間思考和梳理。不管是從邏輯性還是簡練程度上，文案能力都會更加能鍛煉一個人的總結能力。
可能從一開始讓你寫大段的文章對很多人來說，是很困難的一件事，但你可以從小事開始。比如每天寫總結，記錄自己的想法，這些想法可以來自于學到的知識、突然的靈感或者對某件事的看法等等。
關于記錄，我一般先快速寫下當時的想法，幾個關鍵字，句子不通順都沒關系。但一定不能拖延，要不然過了那個時刻，你可能就覺得好像沒啥值得記錄的或者干脆就忘記了。等寫的差不多了，再回頭來調整語句，調整邏輯問題，就跟設計做改稿一樣，當時記錄的是初稿，然后再不斷優化就好了。切忌完美主義者，動手記錄更加重要。
我自己是從畢業以來一直保持著記錄的習慣，而且隨著寫的量越來越多，寫的速度也是越來越快。比如這段文字，就是在班車上20多分鐘內寫下來的。
高質量的記錄內容來自哪里？除了完成需求外，多想想這件事做完之后，還能給自己帶來什么其他的價值沒有？比如產品讓你做一個設計需求，做完它并過稿是最基本的要求，因為這部分是交換工資的價值。那還需要去思考，如何通過這個需求去放大價值。比如，這個需求能不能成為自己作品集中的一個作品？能不能把這個需求總結成一篇文章？能不能把這個需求做出亮點然后成為自己出去分享的案例等等。
如果答案是肯定的，有時間的話，一定要去達成后面的這些增值的部分。如果是有這些目標的話，你可能就會很自然的去記錄過程中遇到的問題，思考需求的前因后果，記錄最終的數據等等，因為你可能將來某一天要出去跟別人講的嘛。
通過這樣的動作，就能加深對需求本身的理解，也就是所謂的深入。有了這些記錄和思考，讓你再去寫一篇總結也就是水到渠成的事了。
把自己的想法講出來給別人，其實是一個非?？简炄说氖隆２恢来蠹矣袥]有這樣的感覺，明明這個項目是自己從頭到尾跟進的，但讓你完整的跟別人講出來卻發現很有難度。
要跟別人講明白一個道理，就必須自己真正理解透徹才可以。這就會倒逼你，真正梳理好自己的所學。而當你真正跟別人講過一次之后，關于這個知識點或者項目的細節，你會印象深刻。
我習慣在學到一個新的知識點后，興奮的找同事朋友們去分享我的收獲，一方面是能加深自己對知識的理解，進一步鞏固所學，另一方面也想鍛煉自己的表達能力。
演講也是需要練習的，沒有誰天生就擅長，講的多了，應變能力、總結能力都能提上來。
表達能力怎樣提升？模仿是一個很好的方法。我自己經常會去看一些大佬的演講，像俞敏洪的演講我是非常喜歡的。然后還有TED的演講，佩服他們能在短短5-10分鐘內，把一個內容很好的講完，并且聽眾還容易理解。
學習大佬們在什么情況下會停頓，如何與觀眾進行互動，甚至包括演講時的姿態，表情，手勢都可以模仿和研究。聽的時候，帶著目的去觀察，相信能學到很多平時不注意的細節。
注意說話時的停頓和語速，可以理解為設計中的留白和行距。好的留白間距，能使得讀者獲得更好的閱讀體驗，演講也是如此。但說的容易，做起來難，如果缺少練習，在實際的匯報、述職或公開演講中由于緊張或者其他狀況，很難讓你從容應對。
這部分也是需要對應的學習和練習的。
針對實際項目，一般可以從以下6個方面來進行復盤：
1）定位目標
從前面說的記錄中，或者可以咨詢產品、運營，某個具體的需求目標是什么，從產品維度，運營維度，設計維度等多角度進行目標回顧。
2）應對過程
簡單說，就是自己遇到這個需求后是怎么去解決這個問題的。仔細思考自己的應對過程，并分析過程中有沒有可以改進的點。
3）評估結果
最終的結果，有沒有達到預期？是好的還是不好的，把一些數據和用戶評價拉出來，作為結果。
4）分析原因
不論結果如何，都應該分析其成功或者失敗的原因，從過程中的每一個環節去思考，這些經驗都是最寶貴的。
5）發現規律
從原因中找到規律，這個規律也就是所謂的方法論，這些方法論是否具有普適性，也就是你得到的這套經驗能不能復用到其他項目中，或者沒有做過此類項目的設計師拿到你的方法論，能不能很好的復用你的經驗把項目做到你這樣的結果或者是能做的更好。
6）沉淀文檔
最終，把這些方法論、設計規范、經驗教訓等等，以文檔的形式記錄下來，就完成了一個真正的完整項目沉淀。這些也是設計師做需求時的一種價值放大，很多優秀的資深設計師都擅長做這件事。
在面試或演講時，也應該按照這樣的邏輯順序去講你的項目，心里有譜，講話才靠譜。
復盤和演講，在職場中都是非常重要的能力，但那些能說會道的人，PPT寫的很厲害的人，也并非天生就如此。他們也都是后天在工作中不斷的練習得到提升的。
像解決所有困難的事情一樣，學會拆解，總結能力也是如此。
文章來源：站酷 作者：彩云Sky
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶體驗設計是一個動態領域，每年都會為我們帶來新的趨勢，最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數字世界和現實世界之間的互動方式發生了突然的變化。人們不僅開始在網上花費更多的時間；他們的思考方式和表現方式也發生了不同。
本文主要闡述2021用戶體驗的趨勢，我們相信這將在新的一年里占據主導地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。
我們在2020年UX狀態預測中討論了語音用戶界面（VUI）。如今年所示，語音指令仍然是UX設計中最熱門的趨勢之一?？梢钥隙ǖ卣f，明年不應忽略它。
毫無疑問，到2021年，語音聊天機器人和虛擬助手將繼續流行。用戶在數字體驗方面一直在尋求簡單性和效率。市場需求，高期望值以及人工智能技術的迅速發展使品牌別無選擇，只能在其產品中包含基于語音的功能。
已經有許多企業為廣泛的VUI實施奠定了基礎。例如，星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。
極簡主義可能是當今視覺設計中最明顯的趨勢之一。用戶正在體驗越來越多的網站所有者想要傳遞的關鍵消息。Cookie彈出窗口，打折廣告和各種通知旨在吸引和轉化網站訪問者，但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設計應運而生的地方。
但是，“極簡主義”并不意味著“沉悶”或“原始”。意思是“優雅”和“高效”。盡管必須使用數量有限的顏色，設計元素和明亮的組合，但UX設計人員仍然有很大的發揮空間。此外，元素的功能最為重要，正確突出產品功能并傳達正確信息的能力需要大量的創造力。相反，僅具有裝飾目的的組件正逐漸失去其重要性。
內容，消息和導航的清晰度是UX設計的簡約方法的另一個重要方面。信息過載對于大多數現代用戶來說是一個痛苦，這意味著網站所有者應努力使自己的UX文字簡潔明了。
負空間是用戶體驗設計的一種大趨勢，它已經脫離了對簡約UI的市場需求。簡而言之，負空間是頁面布局中對象周圍（宏空間）或對象內部（微空間）的空白區域。它已經成為獨立的設計元素，在視覺美學和用戶體驗優化中起著至關重要的作用。谷歌的主頁，蘋果的官方商店以及一些用Webflow創建的網站就是很好的例子。
留出一定的空間，在設計中添加“寂靜的感覺”，必須是始終有意義的。否則，用戶可以將其視為缺少信息。負空間的主要功能是整理網頁，以吸引用戶對關鍵對象和消息的注意。建立清晰的內容層次結構有助于UX設計人員將用戶的注意力吸引到最重要的內容上。
負空間有時也稱為“空白區域”或“留白區域”。所有這些術語都是可以互換的。當區域中沒有元素時，您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。
在發生COVID-19大流行之后的在線體驗將與我們習慣的在線體驗不同。UX設計以相關方式反映了缺陷。為了使品牌的數字化形象更具關聯性，設計師有意在版面設計中實現了一些“缺陷”。 它可以是任何東西，從手繪對象到構圖或頁面的不尋常元素。
通常，不完美的設計可以很好地證明品牌的身份并突出其獨特性。但是，如果要應用這種UX趨勢，則必須記住一個關鍵規則：必須保持平衡。如果你做得過多，那是行不通的。
中性風格是UI設計中其他兩種大規模方法（擬態和平面設計）的組合，它們通常被認為彼此相對。擬態化是關于模仿現實世界中的物體以及我們與物體交互的方式。
幾十年前，當需要使用超現實元素來創建直觀且用戶友好的UI時，它很流行。垃圾桶就是例子之一。另一方面，平面設計是一個更新的，簡化的概念，圍繞二維元素，極簡主義和鮮艷的色彩。
同質性兼顧了兩者的優點。它使用圖形強度大的元素，陰影和漸變來使按鈕和卡片類似于自然界中的對象，而不是精確地重新創建它們。中性風格不會將現實主義推到極致。取而代之的是，它努力實現淺色和微妙對比度的“柔和”外觀。
在過去大約一年的時間里，同質化一直是UI / UX專業人員中討論最多的主題之一。盡管仍然沒有很多真正的數字產品的用戶界面遵循這種方法，但許多設計人員對該概念感到興奮。像Behance和Dribbble這樣的專業平臺已經包含了許多同態的例子。因此，我們有充分的理由相信，這一趨勢最終將在2021年出現在我們的手機和筆記本電腦中。
視差效果和3D元素并不是UX設計中的全新內容。我們已經看到了如何在許多Web設計解決方案中實現它們。但是，我們仍然觀察到這些用戶體驗趨勢正在逐步普及。
首先，它的使用量顯著增加。如今，3D元素和視差效果已不再是網絡上奇特的事物。它們更為常見，特別是在代表著脫穎而出的時尚和電子商務品牌的網站和應用上。
另一種趨勢是嘗試在一個界面中結合視差效果和3D圖形。使用視差滾動時，網頁背景和前景元素以不同的速度移動。僅憑它就能產生深度感。通過為此添加3D對象，您可以創建一種真正的身臨其境的體驗，并將在用戶的記憶中保留很長時間。
隨著我們設備屏幕的變寬，UI / UX設計中出現了不對稱趨勢。通常，不對稱是野獸派的一種屬性，這是藝術和網頁設計中與極簡主義相反的一種風格。但是，如果與其他殘酷的設計元素分開使用，它可以使您的網站看起來有趣，同時使它保持微妙和優雅。
不對稱布局的UI / UX趨勢通常與其他創造性的Web設計技術一起實現，例如破碎的網格，重疊的元素和分割的屏幕。您也可以將不對稱性應用于排版。如果操作正確，它將使您的品牌信息更加引人注目和令人難忘。
但是，請務必記住，非對稱設計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應該引導用戶的眼睛朝正確的方向前進，并幫助品牌強調重要信息。
今天，當我們在互聯網上進入隨機網站時，很可能會看到GIF，微型動畫，動畫插圖或其他一些運動設計元素。動畫在用戶體驗設計中仍然很流行，并且使用頻率不斷增長。
除了具有視覺吸引力之外，移動物體還可以改善用戶參與度并簡化導航。他們還可以為數字產品或服務注入生命，使它們更具個性。
如果要在用戶界面設計中使用這種軟件開發趨勢，那么明智地執行此操作至關重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑，從而促使他們甚至比計劃的要早離開網頁。動畫元素也不應使用戶界面不必要地復雜。它們始終必須是相關的，有價值的和平穩的。
信息體系結構是在頁面上組織和構造不同內容的方式。它是以用戶為中心的設計（UCD）的基本要素，旨在使用戶的數字環境更加舒適。與用戶研究和可用性測試一起，構建有效，有用且一致的信息體系結構是UCD流程的必不可少的階段。
為了創建一個實用的信息體系結構，UX設計人員需要對產品的目標受眾，其行為以及使用數字解決方案的原因有深入的了解。用戶應該無需花費太多精力就能獲得所需的結果。因此，在設計過程的線框階段始終必須考慮用戶的目標，清晰的導航和內容表示（包括盲點監視）。
我們創建此文章是為了讓您在當今競爭異常激烈的數字世界中站穩腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網站的用戶體驗。即使用戶期望很高，它們也可以使您的產品在視覺上對目標受眾更具吸引力。
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互成本是用戶在與網站交互中必須執行以達到其目標所需的精力（無論是精神上還是物理上）。
理想情況下，我們希望用戶訪問網站并在他們眼前找到他們正在尋找的答案。這將意味著零交互成本，并且是檢驗可用性的里程碑。
不幸的是，由于大多數站點和應用程序都提供了用戶可能想要做的許多事情，因此很少能達到零交互成本。大多數時候，用戶必須四處瀏覽，閱讀，可能滾動，找到有希望的鏈接，單擊它，等待頁面加載，然后重新進行整個過程。有時，一個新窗口可能會在現有窗口的頂部彈出，在這種情況下，用戶必須將注意力轉移到新窗口上，也許還需要回頭看舊窗口以將信息集成到兩個窗口中。在其他情況下，用戶可能需要記住一頁上的信息，然后將其應用于另一頁。所有這些動作都需要認知努力并彌補了交互成本。
可用站點將實現各種用戶目標所需的交互成本降至最低。也就是說，它們最小化：
閱讀
滾動
環顧四周以查找相關信息
理解提供的信息
單擊或觸摸（不會出錯）
打字
頁面加載和等待時間
注意開關
內存負載-用戶必須記住的信息才能完成其任務
這些用戶動作對總交互成本的貢獻不同。它們的相對重要性可能取決于用戶-例如，閱讀障礙的用戶閱讀時間可能比點擊周圍的時間困難，而操作障礙的用戶可能會覺得點擊困難。它們還取決于設備-連接到高速網絡的臺式機上的頁面加載可能微不足道，但是如果蜂窩網絡覆蓋較慢，則移動設備上的頁面加載可能會花費很長時間。
許多可用性準則都解決了使交互成本的各個組成部分最小化的問題。例如，網絡寫作規則通過推薦要點和簡短的要點句子和段落來降低閱讀成本。
讓我們舉一個簡單的例子。假設我們要查找“儀式”一詞的來源。我們將使用Dictionary iPhone應用程序執行此任務。我們將忽略在手機上查找應用程序所涉及的成本，并且在啟動Dictionary應用程序后立即開始分析。
啟動應用程序后出現的第一件事是啟動屏幕。
在這一點上，交互成本包括等待幾秒鐘，以使啟動屏幕消失并為應用程序的第一個可操作屏幕騰出空間：
在此頁面上，互動成本來自定位搜索框。幸運的是，搜索框非常顯眼地位于頁面頂部，因此我們可以放心地認為，用戶只需很少的精力就可以找到它。找到后，用戶需要觸摸搜索框以將輸入焦點移到搜索字段中。搜索框是一個相當大且易于觸摸的目標，因此交互成本也可能會降至最低。
接下來，用戶必須編輯搜索查詢。
當輸入焦點在搜索字段中移動時，自動建議的詞將自動顯示。
用戶必須查看自動建議并確定它們不相關，然后清除當前查詢。他們可以通過按右側的灰色x按鈕（如果他們熟悉iOS規則）來執行此操作，也可以通過按觸摸屏上的Delete鍵來逐個清除字符。
刪除后，用戶將開始輸入目標詞“儀式”。當他們開始輸入內容時，關聯詞會顯示在下方。用戶可以檢查關聯詞并決定是否要繼續鍵入或停止并選擇關聯詞。
選擇（或鍵入）單詞“ ceremony”后，用戶必須按Search進入結果頁面。他們需要等待片刻才能顯示新頁面：
用戶必須推斷Origin可能包含有關單詞來源的信息。（對于大多數用戶而言，這是一個簡單的推論，因此認知成本很低；但是，如果改用“詞源”一詞，則某些用戶可能會在閱讀和理解其含義時遇到更多麻煩；因此，“來源”是更好的選擇，因為它降低了交互成本。）
讓我們總結一下交互成本的各個組成部分，以找到“儀式”一詞的由來：
等待啟動頁面
搜索
輸入幾個字符
掃描自動提示列表，以查看所需單詞是否在其中
如果否，請輸入更多字符并在上一步中重復
如果是，請通過點擊選擇所需的單詞
找到搜索框，然后點擊將輸入焦點移至該搜索框
閱讀搜索框中顯示的查詢和自動建議
決定查詢不相關
刪除搜索框中顯示的查詢
鍵入或選擇自動建議
點擊搜索
等待結果頁面
在結果頁面上找到相關的詞源信息
向下滾動頁面并掃描內容以查找詞源信息
找到標簽并閱讀
請注意，右側還有更多隱藏的標簽
推斷詞源可能是隱藏的標簽之一
注意到滑動會向右暴露內容
向右滑動
閱讀Origin并將該單詞與目標聯系起來，以找到單詞的來源
點擊詞源
了解“儀式”一詞的來源
如您所見，一個相當簡單而輕松的過程需要很多步驟和子步驟；他們每個人都會產生互動費用。對于某些人而言，交互成本微不足道-例如，記住人們向右滑動即可顯示更多內容，因此交互成本非常低，因為人們在移動設備或Web上已經多次遇到水平滾動。可以優化其他步驟以最小化交互成本；因此，在搜索框中使用灰色的小x按鈕可以大大降低刪除顯示在搜索框中的查詢的成本。同樣，將按鈕調大可以幫助點擊目標。選項卡的位置和外觀設計會影響人們找到選項卡的速度。（當然，選項卡本身的選擇與使用其他方式來構造內容的方式也會影響用于在結果頁上查找相關信息的位置的交互成本。）
請注意，對于前面各節中的某些步驟，用戶可以有多種選擇。例如，他們可以按灰色的x按鈕刪除當前字符串，也可以多次使用Delete鍵。或者，他們可以從自動建議列表中選擇建議，也可以在最后輸入字符串。
人們如何決定采取哪種行動？答案在于預期效用的概念：
預期效用=預期收益–預期交互成本
用戶嘗試最大化一項操作的預期效用：換句話說，他們權衡了每個操作的收益和成本，然后選擇收益與成本之間最佳平衡的方案。
當有幾種方法可以實現具有相似利益的相同目標時，用戶通常傾向于選擇使估計的交互成本最小的操作。
例如，許多人可能不會在自動提示列表中向下滾動以找到“儀式”一詞，而是可能會再鍵入一個（或幾個）字符，直到可見“儀式”一詞為止，因為向下滾動小列表和掃描列表中的正確單詞比擊中一個甚至幾個字符的成本更高。
這種類型的想法也普遍適用于站點級別。如果看起來真的很難在任何給定站點上實現其目標，則除非與初始站點進行交互的收益確實很高，否則大多數用戶只會以較低的估計交互成本轉移到另一個站點。舉個例子，如果用戶真的想購買Apple電腦，他們可能會堅持使用Apple的網站，因為他們不太可能在其他地方購買。在這種情況下，用戶的動機確實很高，因此他們可能愿意忍受很高的交互成本。但是，如果用戶要購買燒烤架，則可能不在乎是否從Home Depot或Lowe's或其他站點購買，并且會離開互動成本高的站點。
營銷和品牌推廣通常會增加與特定網站或品牌互動的用戶動機和預期收益；可用性可以降低交互成本。兩種方法最終都解決了增加使用站點或軟件的預期效用的問題。
交互成本是可用性的直接度量。實際上，該概念早在人機交互時就被引入，以評估軟件系統的可用性。所有的可用性啟發將用戶的交互成本降至最低。
從長遠來看，快速評估設計的交互成本可以節省大量資金，因為它可以很好地衡量用戶界面的難易程度。它也可以用作設計備選方案之間的比較工具：通常，將交互成本最小化的方案具有更大的成功機會。
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
從6月分的全球開發者大會至今，大部分蘋果用戶都更新至iOS 14正式版系統。Widget成為新版本系統中討論度最高的部分，知乎、小紅書、公眾號各個平臺都能會看到關于桌面小組件的討論以及各種關于小組件排版設計攻略。本文帶你了解Widget的「前世今生」，除了很Android外，Widget這次為什么會成為這次iOS 14更新的重中之重，各大應用搶先適配iOS 14，搶占流量的新入口。
小部件最初來源于蘋果電腦工程師Rose的一個插件工具—Konfabulator，用來更換桌面運行工具的皮膚和外觀。2003年的Konfabulator是運行在蘋果操作系統之上的，而其中的主運行文件叫做Widget。就像現在很多的新型產品一樣，當年的Konfabulator一經發布，在美國引起眾多人的關注，兩位開發者也最終決定將這款工具命名為Widget。
一直到2004年11月Widget1.8版本正式對外發布，此時的Widget不再局限于某一平臺，而是一款跨平臺的產品。Windows和Mac用戶可以根據自己的喜好開發或使用Widget工具，這只是這款工具的開始。
時間來到2008，當時的蘋果已經推出了iOS 2。而Google聯合多家廠商開發了安卓系統，當時Android的最大特色就是開放，開發者可以根據自己的喜好隨意的修改底層文件，我們當時印象中多變的Android桌面使用的就是Widget程序。我們熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的隨意設計導致后來的Android設計語言碎片化嚴重、交互感受相互割裂。一直持續到Google將物理設計體驗帶入屏幕的設計語言Material Design，利用具象化的設計語言規范各家的開發，遵守統一的設計語言和交互感受，由于篇幅限制就不詳細展開去說。
Widget的定位其實相當于應用程序的擴展程序，使用的關鍵點在于用戶可以在不打開應用、無需加載等待的情況下，在屏幕上快速獲取信息甚至進行簡單的操作。
Widget按應用可分為三種：Desktop Widget、WEB Widget以及Mobile Widget，目前討論最多的iOS14更新的Widget其實是運行在移動設備上的Desktop Widget，又稱為Mobile Widget。
注：Widget在剛進入中國的時候，沒有通用的譯名，由當時的中搜命名為“微件”。直到這次iOS 14才使用“小組件“的命名。
蘋果多次強調Widget不是進入應用的另一種快捷方式，Widget是一種的信息展現方式，用來快速提供展示某些用戶關心的應用程序數據。
Widget按照用戶使用場景的不同，可以分為：信息小組件、集合小組件、控件小組件及混合小組件。而iOS 一直將主屏幕的控制放置于控制中心中進行交互，因此小組件類型的主要是信息小組件及集合小組件。
在人們的日常生活中有一類應用，無需進行操作，但應用需要經常性的更新信息。比如：天氣、時鐘等等。信息小部件將應用的關鍵性信息展示在小部件上，同時跟蹤相關信息的變化。根據小部件的大小選擇性的展示信息的密度。
將同一類型的眾多元素展示在小部件內，常見的比如：新聞報道、系列圖片或電子郵件等等。這類小部件有兩個特點：1.信息集合；2.點擊集合元素中的某一個元素可快速進入詳情頁進行瀏覽。集合小部件可進行垂直滾動，但在iPhone端由于交互限制，并不能進行此項操作。例如：微博、知乎。
控件小組件子除了顯示常用的功能狀態外，用戶可直接在主屏幕進行簡單的觸發操作，不需要打開相關應用，類似相關應用的外部遙控器。例如：音樂類小部件，用戶可以在當前小部件上進行簡單的暫停、切換曲目等操作。而iOS系統傳統的“控制中心”包括大部分的手機操作部分，因此iOS 14的小組件還是以展示信息為主。
實際上更多的小部件是同時具備以上兩個到三個特性的混合小部件。比如：音樂類小部件，不僅可以進行簡單的交互，同時也展示了當前播放音樂的基本數據。
蘋果作為全球化的頂級手機制作商，一直追求通用的設計語言。設計規范包括：完整性、一致性、直接操作、反饋、隱喻，用戶控制等幾個設計原則。蘋果有別于其他手機系統的封閉式系統，作為一個習慣于為用戶做決定的父系公司，雖然這次Widget的跟新被看做是蘋果對于之前控制的減少，但在iOS 14關于Widget的官方設計指南中，也有明確的關于Widget尺寸的限制、卡片式的圓角半徑的限制、展示內容形式限制、設計交互的限制。
iOS桌面小組件的內容雖然可以通過開發定制，但在手機桌面仍然保留規范的視覺規則。
Android小部件之前雖然也有限制minHeight和minWidth的大小屬性，但卻可以通過左右上下拉伸大小，調整小部件信息展示內容的多少，因此大小其實是不受控制的。
在iOS 14這次更新的小部件，同一應用限制只提供3種尺寸2x2、2x4、4x4。
小組件的核心功能是讓用戶無需進入app便可獲得信息，即少量但即時、有用且高度相關的信息。因此針對不同作用的應用需要先進行展示信息的梳理整合，明確小部件的核心目標。
2x2小尺寸的小部件類似動態圖標，僅顯示當前當地的天氣，并可以打開應用。
2x4中等尺寸以及4x4大尺寸的小部件，則可以在2x2的基礎上額外展示更豐富的信息，并且可以與用戶進行交互。
同時為了確保所有小部件的圓角看起來都是一樣的，要求所有小部件采用SwiftUI容器應用正確的角半徑。相關開發文檔ContainerRelativeShape
Android手機桌面的widget可以隨意的放置在任何位置。而iOS的小部件和之前的所有圖標一樣，仍然要緊貼其他應用吸附在屏幕的頂端，不能居住只能靠邊放置。
當在同一區域希望有多個小組件進行展示時，可以使用智能堆棧功能。根據不同的使用場景，通過上下滑動進行切換。Siri會根據時間的變化，顯示不同的小組件內容。
蘋果從iOS7開始借鑒了微軟以及谷歌的設計語言，減少視覺裝飾、拋棄了擬物化的設計風格，盡量以內容為核心，在這次的iOS小部件也對內容展示進行了限制。
聚焦內容目標點。小部件的關鍵點在讓用戶易于瀏覽，所以需要前期進行設計目標的梳理，僅展示少量的信息，專注于程序的某一部分內容。
顯示內容與大小的關聯性。創建不同尺寸的小部件時，不應該只是簡單的擴大小部件的大小，而應該是在大尺寸時考慮展示更多內容，更詳細的可視化效果，圍繞基本信息的基礎上修改表現形式，進行優化和調整。
提供真正有用的信息。小部件的意義在可以在主屏幕立即為用戶提供有意思的內容，而不是像桌面圖標一樣成為另一種快捷打開方式。
保持展示內容的更新。小組件的展示數據需要不斷的更新，否則無法吸引用戶的注意。
尋找應用的特殊性。例如日歷小組件，可以針對特定的時間和事件進行獨特的視覺處理。
合理的設置選項。長按小組件會出現“編輯小組件”的選項，可以對組件的展示內容做分層或重要程度展示。例如：天氣、時間切換城市的定位。網易云音樂“定制我的云音樂小組件”切換“每日音樂推薦、我喜歡的音樂、私人FM、歌單推薦、私人雷達”的順序。
避免在小組件中加入過多的交互元素。避免過多的目標，以至于用戶無法點擊所需的目標。根據內容小尺寸，設置一個點擊元素便可，中大尺寸的小組件，可設置多個點擊元素。如中等尺寸的微博，可以通過點擊任意一條熱點，查看熱點內容。
僅支持點擊，不具備垂直滑動。在Android的集合類小部件除了基礎的點擊交互外，支持部件內信息的垂直滑動，但在iOS系統中的小部件不具備垂直滑動的操作方式，應該是蘋果考慮到小部件在左劃的homescreen，可以無限堆疊小部件，容易引起交互操作的沖突。唯一的交互方式就是點擊打開應用。
可以看到iOS 14的widget沒有其他交互方式，只能通過點擊喚醒應用或某條資訊的詳情頁。蘋果在保證一貫簡單明了的用戶體驗外，不建議應用商設計過于復雜的樣式來呈現內容，盡可能的減少用戶電池、網絡方面的消耗。
weight設計系統內容常見布局形式，可以作為設計小組件時的參考。
由于蘋果本身自帶的話題屬性，在2020年6月22日第一次線上開發者大會—WWDC20發布的widget，到iOS14正式版上線期間，國內外熱度一直高居不下，首先各家應用廠商、個人設計開發師都推出自己對widget適配的產品；小紅書、知乎、微博等公眾流量平臺的個大私欲流量博主基于產品的適配推出各種風格主屏幕的應用攻略，widget迅速成為巨大的流量入口。
從6月分的開發者大會到正式版上線，蘋果在自家的應用App store的Today專題、iOS 14精選App對widget進行了針對性的推薦，當搜索“小組件”等關鍵詞時還會出現“超實用的小組件”專題推薦。
基于蘋果用戶的巨大市場，App能夠獲得蘋果的推薦意味著大量有效曝光以及話題熱度，此時很大一部分應用，根據產品特點，搶先適配小組件功能，獲得蘋果推薦，搶占一波流量。
從9月份開始，color Widgets、倒數日、Widgetsmith、我的天氣等多款以時鐘、計時、日歷、天氣功能的小組件應用多次輪番登上App Store應用免費榜第一。（數據來自七麥數據）
并且直到現在依然維持相對穩定排名的高度，及高下載量。
這些數據一方面不僅因為用戶在知乎、小紅書、抖音對于如于如何使用小組件的功能、如何更定制化的設計布局自己桌面的討論，還在于各大社交平臺應勢對于小組件話題的推送，使蘋果的小組件獲的了更多的關注度，與用戶關注度。
而有些設計師看到這其中的巨大流量賺的盆滿缽滿。9月20日設計師@Traf在自己的社交媒體賬號發布了自己設計的iOS 14主屏幕，立刻獲得大量用戶的喜歡。Traf轉手將自己的這套圖標以28美元的價格出售，開始就獲得了3626人的支持（有興趣的小伙伴可以點擊https://icons.tr.af/ 購買），六天就賺了10 萬美元，有人要去畫圖標了嗎？
蘋果對widget的特性定義為：簡單明了（Glanceable）、恰當展示（Relevant）、個性化定制（Personalized）。阿里和京東于9月中旬基于對iOS新特性widget的理解與限制，分別對自家產品手淘和京東進行了適配設計。
京東根據iOS 14 widget提煉出的關鍵詞：簡潔、高效、內容化。整合自己出自己品牌的設計三大原則：個性、信息、情景。在設計原則的基礎上，結合京東的業務指標和用戶場景，制定出了京東widget的四個方向：物流（工具）、直播（互動）、店鋪（私域）、秒殺（營銷）。
物流——提升獲取信息的效率。及時查看物流通知，跟蹤物流進度，提升用戶獲取信息的效率
店鋪——建立用戶與產品間的連接。利用widget的展示功能，在桌面推出店鋪的新品，方便用戶隨時隨地關注不同店鋪的新品。
秒殺——聚焦首頁獲取核心信息。為用戶實時提供秒殺商品，紅包，配合京東的簽到形式，承載京東營銷矩陣的業務背景。
直播——用戶互動。推薦熱門、感興趣的直播，預告明星直播，增加用戶與用戶、用戶與主播間的互動。
手淘根據數據得出：用戶雖然平均每天進入屏幕的次數超過90次，但停留的總時長不過幾分鐘。結合一閃而過的快速切換應用的主屏幕里，設計交互復雜的應用界面并不能契合用戶的需求。得出設計要素：一目了然、高相關性、個性化。
所見即所得的物流——將查看物流信息之前需要“打開手淘、點擊我的、進入訂單、查看物流”4步操作，簡化至前臺widget透出，用戶輕松掌握包裹的一舉一動。
強大的訂單管理——基于手淘人群60%的目標在訂單模式，快速啟動功能。以及對一些必要widget做了深色模式的顏色適配。
便捷的互動權益提醒——針對淘寶人生、淘金幣、芭芭農場等互動專區，可在widget組件上時效了解自己互動權益的完成狀態。
千人千面內容定制——基于商品、社區、直播、店鋪等手淘的廣泛產品，通過多元的方法將前臺的展示權利交給用戶。例如：關注的店鋪，關注的直播內容，愛豆的時裝秀。
京東立足于自身的業務指標和用戶場景制定京東widget的四個方向，手淘根據數據導向一目了然的用戶需求。但由于京東與手淘都是購物應用，結合widget信息展示的特點，最終的聚焦點都是在于信息的獲取效率及提醒。使用戶在不打開應用的前提下，滿足不同的場景需求。但淘寶常年的游戲營銷，淘寶人生、淘金幣、芭芭農場的互動場景使他的業務場景化比京東更游戲化，在視覺方面也更豐富。
推薦閱讀：
下面推薦幾款我自己覺得非常不錯的小組件。
開發者David Smith發布的一款用戶可以自己創建定制天氣、日期、天文等widget的應用。該應用采用了直觀的圖形界面話，精確調整每個widget包括字體、顏色、背景色等的顯示信息和樣式。支持大、中、小三個尺寸，與iOS 14的Widget 大小是完整匹配。
與其他小組件不同的是，Widgetsmith可以根據時間自動變換小組件，在編輯小組件時選擇“Add a Timed Widget”，然后在表盤上劃分時間，并添加對應的小組件。放置在桌面的小組件就會隨著時間變化成相對的畫面。
這款應用與其他天氣類應用不同的地方在于，它提供了9種的widget樣式，17個主題，滿足用戶各種風格的需求。除了常規的天氣預報外，還有實時天氣，空氣質量、世界天氣、生活指數可供選擇這款應用與其他天氣類應用不同的地方在于，它提供了9種的widget樣式，17個主題，滿足用戶各種風格的需求。除了常規的天氣預報外，還有實時天氣，空氣質量、世界天氣、生活指數可供選擇。
我的天氣同一家開發團隊的另一款小組件倒數日，是一款可以直接在屏幕上看到不同主題倒數天數的小組件，能根據自己心情更換背景。此外還可以設置日歷小組件和時鐘小組件。
西窗炷采用白底黑字簡約的界面風格，每天推送一首詩詞，點擊便可閱讀全文。也可以通過編輯小組件選擇自己想看朝代、體裁和顯示字體。
沒有買過豆瓣日歷的舉手，買完心心念念覺得自己會每天看一部電影，em……然而并沒有。豆瓣的小部件除了兩種電影日歷的樣式外，實時熱門書影音排行的界面也能讓用戶不用打開應用，便可獲得及時的影音信息，點擊進入詳情頁面。
當然也有網友做出了史上最強小組件，以及其他有趣的組件
目前每個手機用戶主屏幕上都會有越來越多的app，我們的衣食住行娛樂都需要各種app的協助完成，但隨著app的增長，用戶會將各種app按照種類、類型進行劃分，靠線索記憶或肌肉記憶，熟悉app的位置，但隨著時間的推移，我們可能又會有各種新的應用需要下載使用。重復分類、查找、點擊進入的行為，其實是很浪費時間的步驟。
首先我將之前的主屏幕全部隱藏，只留一個主屏幕頁面。數據顯示日常對手機的操作交互中，有50%左右的通過左手/右手單手握持操作，而我本人習慣左手單手握持操作。操作熱區如下圖中所示的從左到右從下到上。
其中頂部區域及右邊區域放置，豆瓣、西窗燭、我的天氣等展示類小組件；Todoist、Thing3、倒數日等任務管理類小組件；知乎、微博、頭條等咨詢類小組件則可以放置于畫面中間，不妨礙點擊某條信息。也可以使用智能堆放功能，將多種小組件放置同一區域，通過上下滑動進行切換。最后放置自己平時使用頻繁的應用圖標即可，使用頻率也是按從左向右的順序。大小方面
蘋果的app資源庫會默認經常使用應用可以直接點擊進入，在使用其他app不常用的app時，可以通過上方的查找區域進行搜索。
目前已經使用1個月左右，之前也試過各種好看的小部件，最后還是以效率為出發點，將大部分的app放置在app資源庫中。
在我們的認知中，手機桌面更像是一個應用程序的目錄。我們不會過多的在主屏幕停留，需要借助啟動圖標點擊進入應用進行操作，用戶打開某個桌面應用，在應用內進行操作；另一方面在當前app應用越來越多的現在，高頻應用與低頻應用混合，常常在使用時，陷入查找應用中，降低了信息獲取的效率。小部件的使用，使得用戶雖然還是不能在主屏幕界面進行數據處理，但小部件作為應用程序的擴展程序，用戶卻可以在不打開應用、無需加載等待的情況下，在主屏幕上快速獲取信息甚至進行簡單的操作，不得不說是在改變用戶長久以來的使用習慣。
無論是Google從碎片的Android系統轉向物理設計體驗的Material Design設計語言來規范各家的開發。還是最早提出“One productfamily，One platform，One store”希望將手指與手機觸摸交互與鼠標指針交互的打通，保證多設備的一致性，但最后卻被自己各種花樣作死的微軟磁鐵設計。各家都在嘗試統一設計語言，以及交互感受。而這次iOS 14的，我們已經看到了蘋果在iOS、iPadOS、macOS、watchOS乃至于tvOS上的聯動與融合，而小部件就是最重要的一步。
文章來源：站酷 作者：9號自習室
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“今天吃什么?。俊?
“不知道啊，看看大眾點評，哪家店比較靠前”
“一會去看什么電影？”
“我看豆瓣上，這部片子評分特別高，我們去看這個吧”
當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時，面對的選擇越多卻越不知道如何做決定，或者當下做了決定覺會一直思考做的這個決定是不是最好的，選擇困難變成了大眾病。面對用戶的選擇需求各大平臺都有自己的方式，幫助用戶做決定的同時，引導用戶購買目標產品，極大的降低了用戶的選擇成本，其中排行榜就是平臺的常用套路。用戶的選擇成本是什么？排行榜為什么能夠幫助用戶降低選擇成本？排行榜僅僅是用來降低用戶的選擇成本，為什么商家對排行榜也趨之若鶩？下面帶你了解為什么人人都愛排行榜，及我們生活無處不在的“顯性”“非顯性”排行榜。你可能都不知道，我們的生活正在被各種排行榜所支配！
排行榜的本質是一個沒有感情的信息篩選機制，某一相關的同類事物之間通過比較，反映同類事物客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可，比如我們買衣服會首選淘寶，電子類產品會首選京東，看電影會看豆瓣評分，這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選，由于錨定效應降低用戶自己的選擇成本，準備快速的做出選擇。同時由于用戶的從眾心理或者羊群效應，也會對上榜主體產生強烈的品牌認可，為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量和平臺背書標簽，比如：B站的百大up主，各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名。那這一切背后的原理是什么？
一個完整的排行榜需要平臺、上榜主體、用戶三大組成部分，俗話說屁股決定腦袋，不同的定位決定了排行對三大組成部分不同的作用，當然背后的原理也不盡相同。
在沒有各種應用前，當我們決定購買什么東西或去哪家消費，前期需要花費大量的人力、物力，搜集相關的信息進行整理集合后，對比集合信息后才能做出決定，也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后，做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本（前兩個階段發生的成本是交易費用，而不是選擇成本）。在備選集的建立過程中，包含的選擇越多，用戶選擇的難度就越大，選擇成本就會越高。
選擇性排行榜在備選集建立完成后，利用沉錨效應在用戶心理建立潛意識的目標參照，幫助用戶完成擇優決策，降低用戶的選擇成本。（另一方面平臺在幫助降低選擇成本的同時，也會影響這用戶的最終選擇，在接下來的平臺側方面會有詳細的分析）
比如說：當我需要買個耳機時，如果在沒有各大應用的前提下，我需要找到我身邊的耳機發燒友或數碼電子方面方面的內行人，收集信息建立備選集，但由于京東在電子設備方面的權威性，我會優先查看京東的耳機類排行榜，也就是說京東完成了前期的信息搜集及備選集建立，而用戶出于對平臺權威性的信任，根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息，最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找，以及用戶對信息確定性的尋找過程。
在馬斯洛需求中，當個人的生理需求和安全需求被滿足時，與他人建立情感聯系或關系成為人們最強烈的需求，即社交需求。社交又分為：為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如：QQ音樂新增的撲通社區、微博明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。
無論是“功利社交”還是“共情社交”首先需要的是溝通，溝通的本質則是信息的流通，但當雙方都沒有可以溝通的信息時則社交不成立，而類似：微博熱搜、今日頭條、澎湃新聞等信息類排行榜，則給有社交需求的用戶提供了相通的談資。
在選擇類排行榜中，提到的從眾心理（又稱羊群效應），是指人類由于對信息壓力及規范壓力，會希望融入到群體中尋求安全感的特性，即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感，會熱衷于瀏覽此類排行榜來獲取實時信息，融入群體生活。每天早上，在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件，在上班電梯或工作間隙討論各自掌握的信息，及對事件的見解，甚至在與他人有相同的見解或之后，會對對方產生莫名的親近感，滿足自己的社交需求。
過年期間各家app紛紛推出自己的用戶年度報告總結榜，不知道你有沒有參與到其中，并分享到自己的朋友圈。在我們的平常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外，還需要了解自身在大數據下的自我確認，通過各種各樣的榜單，判斷自身的能力、情緒、價值等，來達到自我認同，否則就會感到焦慮不安。
加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解“社會是舞臺，人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程，我們想要呈現給觀眾怎樣的形象，需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己，為了維持自身的平衡防止崩潰，人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己，讓用戶更加清楚的認知自己，同時通過分享，滿足自我確認以及他人確認的需求。
我目前只總結出這三種類型的排行榜，如果有小伙伴想到其他類型歡迎在評論區提出，一起參與討論。
無論哪種排行榜，用戶信任的基礎都來自對平臺的信任，那么用戶為什么信任平臺？排行榜對平臺意味著什么？背后原理是什么？
對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性，選擇成本是品牌經濟學的核心，而用戶對于排行的信任首先要建立在平臺品牌的權威性下。
從我們記事起，我們對世界的認識來自自己的父母或老師，而這些教導我們什么是對、錯，對當時的我們來說是權威的化身。長大后我們對于權威的認可更傾向于某一領域的專家，比如：醫生、律師、教授等。認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠，可以幫助普通用戶節省研究問題的工作，做出更輕松的決定，雖然不一定是正確的。
搜索我們會第一時間想到百度，影視、書籍會想到豆瓣，想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性，形成品牌號召力，推動用戶做出需求決策。另一方面排行榜中也會說明數據來源，比如京東會在排行榜頁面有明確的榜單說明，豆瓣根據平臺數據更新，汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測，獲得用戶的信任，增強平臺的權威性。那對于平臺來說權威性的建立意味著什么？
平臺權威性意味著說服力和影響力，在減輕用戶的決策壓力的同時，影響用戶做出平臺所需的決策方向；
每年蘋果發布會都會帶來范圍極大的熱度討論，而app store內的熱門推薦自帶話題度和討論熱度
排行榜作為內容輸出口，在平臺權威性的背書下，產品優化自身的價值，而平臺也可以通過排行榜優化自身平臺價值
平臺權威性下，可以通過多種方式達到盈利，比如蘋果app store應用商店內的付費應用，百度的鳳巢系統、微博熱搜的第3、4位排名等。
在平臺完成建立權威性開始利用排行榜進行商業變現時，比如百度、58的競價排名，現在大部分應用會使用明顯的方式告知用戶，防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。
上榜主體作為整個排行榜的內容中心，由于排行榜自帶的競爭機制、篩選機制，使得用戶會很樂于分享出去，比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。
由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度，以及各種潛在資源，比如：流量、資源、人脈、某一領域影響力、平臺背書等等，這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感，比如bilibili不同粉絲量級會送出相對應的粉絲牌。
而平臺方也利用上榜主體挖掘潛在的用戶，為平臺帶來更多的新用戶，加強平臺權威性，形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量，帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站，簽約西瓜視頻”，各大平臺也時不時會出現搶占流量up主的情況。
排行榜設計要達到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數足夠大，這樣才能構成排行榜設計成功的必要條件。
對于已有成功產品的公司，可以借助平臺相互間的導流完成初試資源的搭建，比如：微信初期借助QQ好友流量，帶來好友初期的爆發；抖音最初的活躍借助今日頭條的流量輸入。
不斷推送已關注好友的信息流，當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交，你要先有這個人聯系方式才能要求好友，關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區建設推送動態信息流和好友卡片推薦。
當應用建立初期，沒有很多的資源和內容時，需要平臺自行填充內容，使得排行榜信息量大，增加用戶活躍，才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等，或是平臺pgc發布推送的內容。
面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化，根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。
在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成，其他則根據不同產品類型及產品需求決定是否展示。
在首頁底部或頂部tab形式出現，多出現在以UGC或文字信息為核心的產品，以內容信息為主，常見以信息熱度為主要功能的資訊、新聞類應用。比如：知乎、今日頭條、36氪。
知乎熱榜內容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標，在36氪熱榜的中部還會出現收藏榜，綜合榜。
而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”，點擊“查看更多”后，展開“頭條熱榜”及“今日關注”“北京熱榜”，整個交互形式類似微博熱搜。
首頁功能入口處明顯排行榜圖標，優先級較高，常見自帶推薦屬性，能夠幫助用戶快速選擇，減少選擇成本，比較依賴榜單的應用。比如：豆瓣、音樂類、騰訊動漫等應用。
其中豆瓣、網易云音樂由于各種類型的排行榜很多，在圖標點擊開后，在當前頁面平鋪不同維度榜單類型，用戶進行點擊跳轉；騰訊動漫相對榜單類型較少，在左邊側邊欄切換不同的榜單。
用戶查看商品詳情時，可能會希望能夠橫向對比同類商品，才能最終決定購買那件商品。常見于電商類應用，比如：京東、拼多多、得物等。點擊后進入不同的榜單頁面，獲取更多產品信息進行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會有詳細說明）
當用戶沒有明確搜索目的時，搜索框的下方，平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。
沒有明顯排名及規則，但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前，位置越靠前，在用戶心目中的默認位置越靠前，比如淘寶的“有好貨”、編輯精選等。
在平臺建立初期沒有特別的內容供平臺呈現，這時候就需要平臺人工有目的的推薦一些內容，不同于“猜你喜歡”建立在用戶的行為數據下，編輯推薦更多的平臺希望用戶看到的內容，一方面作為平臺內容的輸出口引導用戶，另一方面內容是平臺自己發布內容，也可以保證內容的高質量。
平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期，并且存在大量的平臺用戶使用數據，“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性，各大應用平臺適用性強，一般出現在首頁部分。
朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜，這些其實是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓，清楚的認識自己。
不知道大家小時候看沒看過《第10放映室》，那是我最早關于排行榜的印象，里面會有各種最佳動作片總結、最佳男配角總結等等，以香港電影偏多，是我早年的電影信息資料庫。現在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦，這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜，從眾多選擇中選擇出部分答案，給出理由，而用戶只需在已被篩選過的內容中進行決定，節省選擇成本，比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定，但可以迎合用戶對確定性需求的各種盤點性質的排行榜，比如抖音的TOP榜哥就是盤點各種內容，人物。
相比其他排行榜，篩選后的內容已經體現了用戶的具體需求，高效明確的給用戶提供選項，引導用戶快速選擇。
排行榜一般由必需的榜單頭部、上榜主體，及非必需的榜單規則、更新信息構成；而上榜主體由必需的主體信息、排序，以及非必需的推薦理由、排名變化、熱度信息構成。
好的榜單能夠快速吸引用戶快速找到自己的需求點，引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。
當排行榜在整個應用中有且只有一個時，通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出，增加平臺的品牌權威性。
有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況，為了平臺的統一性、降低后期的維護成本，一般會使用可復用的榜單頭部，如豆瓣、京東、QQ音樂等。
得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配，但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式，通過更換文案底圖達到適用不同主題；京東就相對比較簡單，只是更換標題的文案達到多主題適配。
排行榜上榜主體由于不同的場景業務需求，一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。
純文字的排行榜一般是以內容（或標題）加排名的形式出現，常見以信息為主的排行榜，比如微博、知乎、今日頭條等以信息為主要關注點的應用，或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準，因此會在標題及排位外，增加各種突出熱度信息的表現形式，如關注熱度人數，或是“熱”“新”“爆”等等表示熱度的標簽，如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。
相對于純文字形式，圖文結合的排行榜因為圖片信息的增加，使整個榜單主體占居更多的空間也可以展示更多的產品信息，輔助用戶進行選擇。
上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式，延續了用戶閱讀新聞類資訊的習慣；而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點評、馬蜂窩則使用方版的圖片形式，大概是因為產品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報也會有豎版的形式，比如：游民星空、小黑盒）
每當設計圖文結合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會說這兩種形式沒有什么大的區別啊，有什么可糾結的！或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的，因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。
人類對畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產品列表頁中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動到上/右，然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后，向右掃動的次數會越來越少，并且會隨著向下移動，眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會越低。
因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式，比如：騰訊動漫、愛奇藝、得物等等。
說到排行榜我們一般第一個會想到領獎臺，很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜，平臺用戶的注意力大部分集中在第一名，而領獎臺的形式模仿現實生活中的獎勵形式和儀式感，將整個排行榜的關注范圍從第一名擴展至3名，另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系，增加了第一名的高度。（目前這種形式我只在微博的明星勢力榜及抖音的直播全站榜中有看到）
榜單規則是排行榜規則的描述，是平臺權威性的體現。榜單規則有些平臺本身具有數據庫，會有相關的平臺數據支持如京東；而汽車之家則依靠“汽車工業協會”外部的數據支持，增加平臺的權威性及榜單的可信度；
信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時間更新，也有類似微博熱搜是實時更新的模式，而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。
排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案，但歸根到底因為人們對于不確定性的懼怕，無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式，結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同，排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯，以及用戶操作行為背后的思考及心理效應，提出合理的設計，幫助用戶了解產品功能，滿足用戶需求。
文章來源：站酷 作者：9號自習室
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn