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