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