相信很多人在開車時(shí)都用過手機(jī)或車機(jī)上的地圖導(dǎo)航，而今天 Alibaba Design 想和大家分享的就是大家常用的地圖導(dǎo)航的換代升級版——車道級導(dǎo)航。
先來說說車道級導(dǎo)航有哪些不一樣。相比于傳統(tǒng)地圖，車道級地圖導(dǎo)航在信息精細(xì)度、定位準(zhǔn)確性、動(dòng)態(tài)信息豐富度上有大幅提升。比如，車道級導(dǎo)航能清晰顯示道路上的虛實(shí)標(biāo)線、自己的車行駛在哪條車道上，還能在地圖上看到車身攝像頭和雷達(dá)檢測到的周圍車輛、錐桶、防撞桶等。
車道級導(dǎo)航在智能汽車的駕駛場景中，有兩方面的用戶價(jià)值：
目前，高德已經(jīng)發(fā)布搭載了車道級導(dǎo)航能力的量產(chǎn)產(chǎn)品——高德第三代車載導(dǎo)航，已在小鵬P7車型的NGP*自動(dòng)導(dǎo)航輔助駕駛系統(tǒng)中落地。
*NGP 是高級智能輔助駕駛系統(tǒng)，可以在全中國大部分高快速道路上進(jìn)行自主并線、超車、駛?cè)朐训赖取?
車道級地圖導(dǎo)航承載的信息與傳統(tǒng)地圖有明顯差異，如何將這些信息加工轉(zhuǎn)化為愉悅的駕駛體驗(yàn)，就是設(shè)計(jì)師要解決的問題了。下面分享一些我們在車道級導(dǎo)航設(shè)計(jì)中的思考。
車道級導(dǎo)航應(yīng)用于智能汽車的人車共駕場景，需要同時(shí)考慮用戶的駕乘體驗(yàn)和車企客戶的設(shè)計(jì)定制訴求。包含三部分內(nèi)容：
車道級地圖中所呈現(xiàn)的數(shù)據(jù)元素對比普通地圖更多更復(fù)雜，而且在不斷采集更新中，但大致能劃分為三類：動(dòng)態(tài)識別元素、高精道路元素以及場景氛圍元素，如下圖所示。
我們要做的設(shè)計(jì)，就是將以上這些數(shù)據(jù)元素以三維視覺化的方式進(jìn)行呈現(xiàn)，最終服務(wù)于駕駛場景中的駕駛者。我們總結(jié)了幾個(gè)重要的構(gòu)建原則：
「 清晰的空間關(guān)系展示 」
數(shù)字地圖的優(yōu)勢在于能清晰展示復(fù)雜世界的空間結(jié)構(gòu)、空間關(guān)系?？臻g關(guān)系的清晰表達(dá)能讓駕駛者更了解當(dāng)前所處道路環(huán)境，心里更有底，這對于開啟自動(dòng)駕駛的車輛尤為重要。
空間關(guān)系表達(dá)的關(guān)鍵在于表現(xiàn)道路的上下層級和聯(lián)通關(guān)系、坡度變化，加上仿真的車輛及視角變化，實(shí)現(xiàn)高架穿橋而過、相機(jī)視角由遠(yuǎn)及近的場景展示。
空間關(guān)系表達(dá)的另一重點(diǎn)在于道路與周圍環(huán)境的關(guān)系，比如道路與山脈，通過高精地圖可以看到遠(yuǎn)方道路的彎曲路形，提前減速，提升山路駕駛安全性。
「 簡約元素風(fēng)格提煉 」
地圖設(shè)計(jì)時(shí)整體風(fēng)格選擇需要克制，既要保證地圖中各元素之間的區(qū)隔度，又要保證地圖整體與上層業(yè)務(wù)組件拉開視覺層級。這樣才能更好的突出當(dāng)前需要駕駛者注意的重點(diǎn)元素，提升整體的信息傳達(dá)效率和體驗(yàn)。
既要讓駕駛者能快速識別地圖中的元素是什么，又需要讓畫面整體有序，主次明確。所以我們使用介于寫實(shí)與抽象風(fēng)格之間的簡約風(fēng)格，既能寫實(shí)展示元素的關(guān)鍵特征，整體又不復(fù)雜。
對于單個(gè)元素的設(shè)計(jì)上，主要是通過元素現(xiàn)實(shí)中的關(guān)鍵特征提取，去掉一些不影響認(rèn)知的細(xì)節(jié)，讓駕駛者一眼就能明確這個(gè)元素是什么。
「 動(dòng)靜風(fēng)格統(tǒng)一 」
靜態(tài)元素是由高精地圖生成，而運(yùn)動(dòng)元素則是車輛傳感器識別的車輛、交通設(shè)施等。地圖上的這些元素的仿真表達(dá)，能夠反應(yīng)車周圍的實(shí)時(shí)動(dòng)態(tài)環(huán)境信息，增強(qiáng)駕駛者對車輛感知能力的信任。
對于這些動(dòng)態(tài)識別元素，我們推薦客戶在設(shè)計(jì)風(fēng)格上與地圖相呼應(yīng)，在保證識別性的前提下，兩者風(fēng)格盡量統(tǒng)一，形成整體感。
下面是客戶設(shè)計(jì)團(tuán)隊(duì)制作的動(dòng)態(tài)元素模型：
對于行人、自行車等出現(xiàn)人體的元素，我們通過循環(huán)的骨骼動(dòng)畫原地播放，以及傳感器確定的運(yùn)動(dòng)軌跡，來模擬對應(yīng)的人體運(yùn)動(dòng)。
地圖畫面是由渲染引擎程序的攝像機(jī)拍攝出來的。攝像機(jī)的位置、俯仰角、投影中心、裁剪區(qū)域等都會影響用戶看到的畫面內(nèi)容。
「 遠(yuǎn)近兼顧的視野 」
為了讓駕駛者有全局的掌控感，車道級地圖的攝像機(jī)視野需要兼顧眼前和遠(yuǎn)方的信息呈現(xiàn)。在地圖上既可以看清眼前的車道標(biāo)線、周圍的車輛，又可以看到 500 米甚至一公里后的路形變化、高速出口等。
「 自動(dòng)駕駛動(dòng)態(tài)視角 」
我們與客戶設(shè)計(jì)團(tuán)隊(duì)一起，對自動(dòng)駕駛場景拆分做了多次討論，最后決定對車速和并線這兩個(gè)變量設(shè)計(jì)動(dòng)態(tài)視角。
在自動(dòng)駕駛場景中，攝影機(jī)與自車的距離會隨著車速大小在一定范圍內(nèi)變化。當(dāng)車速較慢時(shí)，拉近攝影機(jī)與自車的距離，以強(qiáng)化顯示自車周圍的動(dòng)態(tài)信息。當(dāng)車速較快時(shí)，拉遠(yuǎn)攝影機(jī)與自車的距離，獲得更遠(yuǎn)的視野和足夠的預(yù)判時(shí)間。
自動(dòng)駕駛的關(guān)鍵場景是車輛自動(dòng)并線。為了強(qiáng)化駕駛者對車輛并線決策的感知，在汽車進(jìn)入并線等待狀態(tài)時(shí)，相機(jī)的投射中心會移動(dòng)到目標(biāo)車位。
「 車道級導(dǎo)航動(dòng)態(tài)視角 」
與自動(dòng)駕駛相對的是人駕駛的場景。按與下一個(gè)轉(zhuǎn)向路口的距離遠(yuǎn)近，人在駕車導(dǎo)航時(shí)可抽象為 4 個(gè)階段：順行、預(yù)判、確定、動(dòng)作。
不同的駕駛階段需要不同的攝像機(jī)視角，來強(qiáng)調(diào)最相關(guān)的信息。例如：當(dāng)下一個(gè)轉(zhuǎn)彎路口在幾公里以后時(shí)，駕駛員對幾公里范圍內(nèi)路況的需求要強(qiáng)于對前方路口位置的需求；當(dāng)臨近路口時(shí)，駕駛員對前方從哪里轉(zhuǎn)彎、走哪條車道的需求又會強(qiáng)于對幾公里后路況的需求。
下面詳細(xì)介紹一下臨近路口時(shí)，攝像機(jī)視角的動(dòng)態(tài)過渡策略：
過程 1：根據(jù)用戶位置和交通情況，提示用戶并線，此時(shí)將攝像機(jī)拉近，畫面從 2D 地圖視野平滑放大到車道級地圖視野，突出并線引導(dǎo)和目標(biāo)車道；
過程 2：保持?jǐn)z像機(jī)與自車距離不變，仰角隨著自車與路口的距離逐漸減?。存i定路口在屏幕上的位置）。這樣既能有清晰的路口距離感知，又能讓路口形狀逐漸清楚，規(guī)避了大仰角導(dǎo)致的離路口越近，路口形狀越扁平的問題。
不同的路口形狀適合不同的仰角參數(shù)。例如分叉路口用“大仰角”就能既看清路口形狀，十字路口則需要偏鳥瞰的“小仰角”才能看清路口形狀。另外，當(dāng)轉(zhuǎn)彎路口之前很近的位置還有一個(gè)路口時(shí)，還需要調(diào)整相機(jī)的旋轉(zhuǎn)角度，來清晰傳達(dá)兩個(gè)路口的位置和形狀，防止駕駛員走錯(cuò)。
車道級地圖與自動(dòng)駕駛關(guān)聯(lián)緊急，且依賴于車輛的精準(zhǔn)定位能力，是車輛智能化的核心功能展示，對于設(shè)計(jì)上每個(gè)車企都會考慮進(jìn)行深度定制，與自身 HMI 風(fēng)格統(tǒng)一，且功能上有與其他車企的差異化與賣點(diǎn)，這就需要我們考慮規(guī)?；O(shè)計(jì)中的效率問題。
規(guī)?；y點(diǎn)在于，與客戶產(chǎn)研設(shè)團(tuán)隊(duì)的合作鏈路摸索和優(yōu)化；車道級元素種類多、狀態(tài)多，設(shè)計(jì)產(chǎn)出的落地文件生成方式也不同；預(yù)覽驗(yàn)證困難，導(dǎo)致新接觸的客戶設(shè)計(jì)師理解門檻高，缺乏對應(yīng)的工具集。
「 低成本風(fēng)格定制 」
第一階段，我們?yōu)榭蛻籼峁┝烁鱾€(gè)設(shè)計(jì)階段需要的設(shè)計(jì)規(guī)范、源文件、教程。第二階段，客戶可以使用高德設(shè)計(jì)團(tuán)隊(duì)打造的 D-Map 平臺，通過所見即所得的方式進(jìn)行設(shè)計(jì)方案配置，并且能快速預(yù)覽設(shè)計(jì)效果。
「低成本增減元素」
對于車道級地圖中新增三維元素，梳理了對應(yīng)的元素新增流程，規(guī)范前期建模中的模型面數(shù)、坐標(biāo)、法線等，減少返工調(diào)整。
傳統(tǒng)導(dǎo)航地圖的使用對象只是人，而車道級導(dǎo)航地圖是人車共用的。在自動(dòng)駕駛時(shí)，車道級導(dǎo)航地圖不僅為自主駕駛系統(tǒng)提供地圖和導(dǎo)航路徑，駕駛者與乘客也可以通過地圖更清楚地了解車輛做決策的依據(jù)，增強(qiáng)對于車輛的信任感；而在人駕駛時(shí)，通過車道級的精細(xì)引導(dǎo)，可為駕駛員帶來更舒適、更安全的導(dǎo)航體驗(yàn)。
地圖是人類文明的坐標(biāo)，隨著科技進(jìn)步，地圖不斷被賦予新的內(nèi)涵。對于車道級導(dǎo)航的設(shè)計(jì)探索才剛開始，未來，我們也會嘗試?yán)貌粩嘣鰪?qiáng)的車載硬件算力，與車企一起創(chuàng)造次世代的車載導(dǎo)航體驗(yàn)，為用戶提供更準(zhǔn)確好用的高德地圖。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：優(yōu)設(shè) 作者：AlibabaDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?liá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ù)
隨著這幾年電商行業(yè)的飛速發(fā)展，國人年輕一代審美不斷提升，對設(shè)計(jì)的要求自然不可能停滯不前，更多的是注重品牌、平臺屬性、差異化、用戶體驗(yàn)等?；仡欁罱鼉赡陜?yōu)秀的電商設(shè)計(jì)案例，我們嘗試總結(jié)一下2021年電商設(shè)計(jì)的重點(diǎn)和方向。
文章來源：優(yōu)設(shè) 作者：美工美邦
藍(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ì)和文章都在圍繞“新擬物化”展開行動(dòng)，隨著各種硬件的提升，代碼的優(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ù)
隨著科技的進(jìn)步和互聯(lián)網(wǎng)的發(fā)展，過去機(jī)械的單向交互方式逐漸被打破，用戶使用移動(dòng)端的場景越來越豐富，設(shè)計(jì)師也開始需要通過主動(dòng)的觀察用戶所處的不同場景，感受用戶情感，預(yù)判用戶意圖，來為用戶提供更智能更便捷更貼心更高效的服務(wù)，場景化設(shè)計(jì)已經(jīng)融入互聯(lián)網(wǎng)設(shè)計(jì)的方方面面，下面的文章當(dāng)中，我將從三個(gè)方向去闡述和列舉場景化設(shè)計(jì)。
隨著移動(dòng)端的不斷發(fā)展，從固定電話到移動(dòng)電話，移動(dòng)端的設(shè)計(jì)漸漸的融入在用戶的身邊，深度的跟隨著用戶，陪伴著用戶，慢慢的，開始觀察用戶，感受用戶，在這個(gè)過程背后當(dāng)中，場景設(shè)計(jì)逐漸產(chǎn)生，設(shè)計(jì)師通過針對用戶所在的實(shí)際場景來設(shè)計(jì)，建立用戶與場景之間的聯(lián)系，給用戶帶來更貼心，更高效的體驗(yàn)設(shè)計(jì)。
如今各大產(chǎn)品都在上線了“青少年模式”，越來越多的產(chǎn)品關(guān)注到了成人與兒童這兩個(gè)不同的用戶群體，騰訊視頻在青少年模式中推出的播放器護(hù)眼模式，通過攝像頭來獲取用戶當(dāng)前距離手機(jī)屏幕的距離，當(dāng)用戶離屏幕太近會有提醒并停止播放，當(dāng)用戶位置在正常距離以后，提醒消失。幫助青少年養(yǎng)成合理觀看手機(jī)，愛護(hù)視力的好習(xí)慣。
滴滴打車新增了“關(guān)懷模式”，在關(guān)懷模式下，整體的頁面字號放大，在功能上，更極簡的打車模式，將復(fù)雜的任務(wù)拆分為拆分為目標(biāo)清晰的子任務(wù)，并提供清晰的反饋，來方便用戶的使用，關(guān)懷模式更有利于老年用戶以及視障用戶使用產(chǎn)品。
產(chǎn)品在體驗(yàn)上的提升不應(yīng)該僅僅是針對主要群體，跟多的是考慮到特殊群里的體驗(yàn)，以上兩個(gè)案例，根據(jù)不同的年齡人群“青少年和老年”，適應(yīng)了不同的產(chǎn)品體驗(yàn)?zāi)Ｊ?，讓更多的用戶群體都能夠得到更好的產(chǎn)品體驗(yàn)。
當(dāng)用戶在騰訊地圖設(shè)置中開啟左手操作功能，首頁地圖上的側(cè)方操作控件會移動(dòng)到屏幕的左側(cè)，方便左手用戶點(diǎn)擊和操作，人性化的設(shè)計(jì)容納了擁有不同使用習(xí)慣的用戶。
在地圖軟件當(dāng)中，我們通常都會用紅色表示路段擁堵，綠色表示通暢，在色盲色弱人群當(dāng)中，紅綠色盲也是比較常見的色盲類型，所以在高德地圖中，為色盲色弱用戶做了專屬的路況配色，貼心的考慮到了特殊人群的體驗(yàn)。
優(yōu)酷視頻在更多模式選擇中，為用戶提供了“色弱模式”，并有不同色弱人群的細(xì)分“紅色弱”“綠色弱”“藍(lán)黃色弱”
在餓了么送貨騎手中，約8%受色盲色弱的困擾（全國男性群體中紅綠色盲色弱占比達(dá)8%-9%，餓了么騎手男性占比90%），為此餓了么設(shè)計(jì)團(tuán)隊(duì)在2019年對app的進(jìn)行了重新設(shè)計(jì)，包括使用WCAG無障礙色彩對比度，以及無障礙色盤，以及調(diào)整字階，使用輔助圖形等設(shè)計(jì)手段來解決部分騎手在送貨途中使用APP的痛點(diǎn)問題。
外賣行業(yè)本身就具有一定的時(shí)間屬性細(xì)分，用戶早中晚點(diǎn)餐上肯定會有不同的訴求，美團(tuán)外賣在不同的時(shí)間順應(yīng)用戶的不同訴求來推薦不同的內(nèi)容，幫助用戶挑選在該時(shí)間段內(nèi)的用餐。
美團(tuán)在一些周末和特殊節(jié)日上，用戶在不同時(shí)間的訴求不同的，相關(guān)推薦也會有所不同。
QQ音樂會根據(jù)不同的時(shí)間，給用戶推薦不同的個(gè)性化push通知，早上是“每天起床氣一句”“最氣不過起床氣” 冬日是“冬夜需要”。結(jié)合用戶當(dāng)前時(shí)間段下推薦相關(guān)的push，不僅增加了用戶的點(diǎn)擊欲望，也拉近了和用戶的距離，讓用戶時(shí)而暖心，時(shí)而感到有趣，這么可愛的push通知，也是辛苦QQ音樂的運(yùn)營小編了～
在iOS12系統(tǒng)當(dāng)中，新增了地點(diǎn)勿擾模式，長按勿擾模式的按鈕，可以選擇“直至我離開此位置”，用戶在看電影，會議或一些特定的地點(diǎn)可以靈活的使用該功能。
在使用大眾點(diǎn)評時(shí)，當(dāng)我的地理位置在我的常駐地北京時(shí)和將地理位置切換到“重慶”時(shí)，首頁展示的信息和內(nèi)容框架都發(fā)生了變化，產(chǎn)品根據(jù)我的地理位置推斷出我現(xiàn)在搜索的目標(biāo)地不是我的常駐地，預(yù)判到我可能存在即將出游到當(dāng)前定位的城市，會直接給我推薦一些攻略，和一些“怎么玩”“”訂住宿“”游景點(diǎn)“的旅游攻略向內(nèi)容。
iPhone在用戶接電話的場景下，根據(jù)用戶所處環(huán)境不同，適配了不同的方案。不同的當(dāng)iPhone處于息屏狀態(tài)接電話時(shí)滑動(dòng)接聽，防止誤觸；當(dāng)iPhone在使用時(shí)接聽電話為按鍵接聽。減少用戶操作成本。
在支付寶的收款碼掃一掃功能中，用戶向他人展示收款碼時(shí)，手機(jī)向下傾斜后，掃碼的提示文字和用戶的頭像會發(fā)生旋轉(zhuǎn)，其他功能會相應(yīng)弱化或者直接消失，以便方便付款人閱讀，充分考慮到了現(xiàn)實(shí)中的操作環(huán)境，保證了雙方的使用體驗(yàn)。
支付寶等金融類的產(chǎn)品，在用戶開啟后臺后，會對頁面進(jìn)行高斯模糊處理，避免了后臺場景下用戶無意中泄漏自己的信息，也防止了被偷窺。（支付寶在頁面底端還添加了溫馨提示：支付寶全力保護(hù)你的信息安全）
在輸入車牌省份時(shí)，會直接彈出各省/直轄市的縮寫專用鍵盤，并且可以直接進(jìn)行大寫字母與城市簡稱的切換，降低了用戶的輸入成本，提高了整個(gè)功能的使用效率。
百度鍵盤在游戲模式下，會接入游戲快捷回復(fù)語并自動(dòng)開啟和諧模式，增加趣味性的同時(shí)方便了我們在游戲進(jìn)程中的快捷輸入，將九宮格按鍵進(jìn)行等比縮小展示，方便用戶點(diǎn)擊。
Pad OS鍵盤在使用中，可雙指捏合可以快速縮小鍵盤，然后將它移到合適的位置，即能單手打字，又能給你的app留出更多的空間，并且增加了快速輸入的功能，只需要在鍵盤之前輕掃，即可打字。
情景預(yù)判的交互設(shè)計(jì)是建立在整個(gè)產(chǎn)品的框架上和對用戶深刻理解上的細(xì)節(jié)迭代。預(yù)判設(shè)計(jì)主要有兩類目的：一是在用戶初次體驗(yàn)?zāi)撤N功能時(shí)引導(dǎo)用戶，避免用戶陷入困惑；二是提前判斷用戶行為，縮短行為路徑。新功能引導(dǎo)更傾向于產(chǎn)品功能本身的邏輯和價(jià)值，這次我們主要主要講第二點(diǎn)，提前判斷用戶行為。
預(yù)判設(shè)計(jì)強(qiáng)調(diào)主動(dòng)性和智能性,是決定產(chǎn)品是否體貼、聰明的重要因素，是走向人工智能的基礎(chǔ)，對微交互中的預(yù)判設(shè)計(jì)進(jìn)行分類研究有助于加深對其了解和認(rèn)識,進(jìn)而在實(shí)踐中應(yīng)用以提升用戶體驗(yàn)。預(yù)判設(shè)計(jì)可以很好的在用戶的操作過程當(dāng)中進(jìn)行簡單高效的引導(dǎo)和預(yù)判，幫助用戶更流暢舒適的使用產(chǎn)品。
在互聯(lián)網(wǎng)發(fā)展中，產(chǎn)品功能的流程越長，操作步驟越多，越要求用戶的理解能力和學(xué)習(xí)成本更大，耗時(shí)也會相應(yīng)增加。因此體驗(yàn)設(shè)計(jì)師在理解用戶行為的交互設(shè)計(jì)的基礎(chǔ)上能夠做到減少冗余步驟，簡化操作流程。順應(yīng)用戶行為的預(yù)判設(shè)計(jì)也可總結(jié)為四個(gè)字：以簡馭繁。拋開繁雜的操作過程，運(yùn)用更少的任務(wù)和行為來達(dá)成用戶目標(biāo)。簡約不僅僅是視覺的形容詞，同樣適合行為。
聊天頁轉(zhuǎn)賬：在支付寶聊天頁，很多時(shí)候我們想給對方轉(zhuǎn)賬，會習(xí)慣性的在輸入框中輸入相應(yīng)的數(shù)字，但在操作錯(cuò)誤之后，支付寶會在輸入框上方彈出相應(yīng)數(shù)字的轉(zhuǎn)賬，點(diǎn)擊之后會直接進(jìn)入轉(zhuǎn)賬頁面進(jìn)行操作。對我來說，這個(gè)功能已經(jīng)不是簡單的幫助用戶糾錯(cuò)，現(xiàn)在更像是一個(gè)快捷鍵一樣方便著我們的操作。
手機(jī)號轉(zhuǎn)賬：當(dāng)我們復(fù)制手機(jī)號后打開支付寶轉(zhuǎn)賬功能，會彈出該號碼的轉(zhuǎn)賬氣泡引導(dǎo)，提前判斷了用戶通過手機(jī)號去轉(zhuǎn)賬的路徑。用戶可以點(diǎn)擊氣泡一鍵跳轉(zhuǎn)到轉(zhuǎn)賬頁面。
消息頁 - 找人轉(zhuǎn)賬：在消息頁面，當(dāng)用戶開始上滑操作時(shí)，會出現(xiàn)「找人轉(zhuǎn)賬」的氣泡提示，點(diǎn)擊進(jìn)入用戶列表的簡約頁面，去掉了一些生活號服務(wù)號企業(yè)號等無用的對話框，提高了用戶尋找的效率。
一個(gè)轉(zhuǎn)賬的功能，在不同的頁面不同的場景下，支付寶在體驗(yàn)上把用戶情景預(yù)判設(shè)計(jì)做到了極致，事實(shí)上，用戶的行為中滲透了意識。從用戶的行為推斷用戶意圖，將用戶的意圖結(jié)果化，結(jié)合用戶的使用場景，順應(yīng)用戶的行為，縮短用戶的路徑，才能給用戶帶來最流暢的交互體驗(yàn)。
正如《一目了然》中所說，“當(dāng)一個(gè)軟件設(shè)計(jì)得很糟的時(shí)候，我們往往能立刻指出哪里做的很差；但一個(gè)優(yōu)秀的軟件，你卻往往難以解釋優(yōu)秀從何而來”，因?yàn)槌两降牧鲿丑w驗(yàn)為你減輕了很多思考的路徑與時(shí)間。
在新建收貨地址的場景下，填寫復(fù)雜的地址信息的過程往往都是繁瑣而費(fèi)時(shí)的，而設(shè)計(jì)師在此場景下考慮到用戶需要地址的多樣性，以及用戶行為背后的含義，當(dāng)用戶復(fù)制了一段收貨地址，打開新建地址頁面時(shí)，App將主動(dòng)提示彈窗“是否粘貼剛復(fù)制的信息”點(diǎn)擊“確認(rèn)粘貼”即可粘貼收貨地址到對應(yīng)列表項(xiàng)，這種預(yù)判設(shè)計(jì)對于用戶來說是自然且讓人愉悅的。我們不僅順應(yīng)了用戶的操作行為，還在其中大大的幫助用戶減少了很多操作。
預(yù)判設(shè)計(jì)的主體是用戶行為，從用戶的視角出發(fā)，分析用戶行為，是設(shè)計(jì)師建立在整個(gè)產(chǎn)品的交互里路程和功能框架上，對用戶的行為深刻洞察后進(jìn)行細(xì)節(jié)的改進(jìn)。
當(dāng)我們使用電腦時(shí)，總會發(fā)現(xiàn)找不到鼠標(biāo)位置的情況，iMac設(shè)計(jì)師在識別到用戶開始連續(xù)晃動(dòng)鼠標(biāo)時(shí)，分析到用戶當(dāng)前的狀態(tài)可能是在尋找鼠標(biāo)的位置，會對鼠標(biāo)做一個(gè)放大的效果，幫助用戶快速定位到鼠標(biāo)的位置。
在抖音我們刷到一些連載視頻后，我們都會去進(jìn)入作者的個(gè)人頁去尋找上下集，在作者個(gè)人頁作品很多的情況下，可能要尋找好久，抖音在個(gè)人頁的作品卡片上添加“剛剛看過”的提示，方便了用戶在瀏覽中能夠更快速的定位到剛才的視頻。方便繼續(xù)銜接觀看。雖然一個(gè)小小的功能提示，我們從用戶行為，預(yù)判到用戶的需求，帶給用戶更方便更快捷的體驗(yàn)。
在美團(tuán)外賣中用戶可以在訂單頁面直接點(diǎn)擊「再來一單」按鈕選擇和上次一模一樣的商品加入購物車，如果一家店沒有營業(yè)的話那么則會顯示一個(gè)「相似商家」按鈕。
結(jié)合實(shí)際我們操作的場景，外賣產(chǎn)品，我們重復(fù)下單的頻率會比較高，當(dāng)我們來到這個(gè)訂單頁面，「再來一單」的按鈕可以更方便更快速的幫助我們下單，但當(dāng)商家休息的時(shí)候，這個(gè)時(shí)候繼續(xù)展示「再來一單」按鈕對用戶來說也是無效的，我們往往會回到首頁去搜索相關(guān)類似的相關(guān)產(chǎn)品，然后再重新下單，而這時(shí)候「相似商家」按鈕直接幫助用戶一鍵定位到后續(xù)的一系列操作，真正的做到在分析用戶行為中，預(yù)判用戶操作。
設(shè)計(jì)師做需求時(shí)，往往需要考慮在特定情景下，用戶行為背后的思考與需求。因此符合情景的預(yù)判，我們也可稱其為“符合用戶感知的預(yù)判”。思考用戶使用產(chǎn)品的情景，及時(shí)而高效的迎合用戶對于當(dāng)前場景的需求。
墨跡天氣的降水雷達(dá)走勢圖，進(jìn)入之后，放大、縮小屏幕就可以查看全中國的云圖了，墨跡天氣的云圖可以查看到降水情況、閃電、積雪（冬天才有的功能），并且伴有文字提示，在未來兩個(gè)小時(shí)的天氣情況，方便了有出門需要的同學(xué)實(shí)時(shí)查看天氣。
在微信聊天功能中，我們可以對兩分鐘以內(nèi)的消息進(jìn)行撤回，但相信大家都有跟我一樣的尷尬經(jīng)歷，發(fā)了錯(cuò)誤的內(nèi)容想要撤回，卻一不小心點(diǎn)了刪除，再也沒有機(jī)會撤回了。
微信在這個(gè)功能上做了很好的改進(jìn)，當(dāng)我們的發(fā)出的消息小于兩分鐘時(shí)，該消息只能撤回，去掉了刪除功能，在該消息超過兩分鐘后，則撤回按鈕消失，只能進(jìn)行刪除操作，兩個(gè)功能進(jìn)行了互斥處理，很好的避免了這個(gè)場景下用戶會誤觸。
當(dāng)我們選擇好評的時(shí)候，會自動(dòng)勾選到“公開狀態(tài)”，當(dāng)我們勾選差評時(shí)，系統(tǒng)會自動(dòng)取消”公開“狀態(tài)勾選，默認(rèn)匿名發(fā)送該評價(jià)，很好的保障了差評用戶的人身安全問題和個(gè)人隱私問題。
當(dāng)我們在淘寶搜索電腦包時(shí)，展示的內(nèi)容下方會自動(dòng)展示商品的容量標(biāo)簽“可放14寸電腦”，幫助用戶在列表頁面就能篩選到更合適自己的商品，當(dāng)搜索玩具時(shí)，也會展示當(dāng)前商品適用的年齡段。產(chǎn)品根據(jù)用戶搜索的內(nèi)容，自動(dòng)匹配能夠幫助用戶進(jìn)行篩選的標(biāo)簽。
預(yù)判設(shè)計(jì)當(dāng)中我們從三個(gè)層面進(jìn)行了分析，從順應(yīng)用戶行為的預(yù)判設(shè)計(jì)，到分析用戶行為的預(yù)判設(shè)計(jì)和符合用戶行為的預(yù)判設(shè)計(jì)。一個(gè)好的產(chǎn)品，往往會更多的使用用戶語言，通俗易懂地讓用戶可以對整體的使用方式一目了然，而不是產(chǎn)生一系列的問題，迫使用戶停下來，進(jìn)行不必要的思考。用戶的每一次停頓對我們來說可能都是一次用戶流失。而預(yù)判設(shè)計(jì)要做的，是根據(jù)用戶的行為/用戶所在的場景，讓功能主動(dòng)找到用戶，并讓用戶與之產(chǎn)生自然的交互。
場景化設(shè)計(jì)中，以情感化為目標(biāo)的設(shè)計(jì)同樣需要具體場景具體分析，通過細(xì)節(jié)上的改變使得產(chǎn)品在當(dāng)前場景下能夠與用戶產(chǎn)生更多共鳴，主要從細(xì)節(jié)出發(fā)滿足用戶在當(dāng)前場景下的情感需求，讓用戶感動(dòng)，給用戶驚喜。
其實(shí)用戶在使用產(chǎn)品的過程中，同樣渴望在使用產(chǎn)品時(shí)能夠得到情感上的互動(dòng)，這反映在設(shè)計(jì)上即是產(chǎn)品情感化設(shè)計(jì)。情感化把握得好的產(chǎn)品往往更能抓住用戶的心。
躺平是一款阿里旗下的生活方式APP可愛的小人和擬人的語氣，設(shè)計(jì)師讓每一個(gè)空白枯燥的空頁面瞬間變得可愛和有趣起來。
快手在每一個(gè)特殊的節(jié)日都會給用戶送來精美的開屏祝福，讓用戶在節(jié)日當(dāng)天打開app就能接受感受到產(chǎn)品滿滿的心意和祝福。
在用戶生日的這個(gè)特定時(shí)間和特定場景下，很多產(chǎn)品都給予了用戶不同的生日祝福，B站是一張有關(guān)于星座的動(dòng)漫海報(bào)，快手給用戶定制了專屬生日開屏，網(wǎng)易云音樂的每日推薦為用戶獻(xiàn)上生日快樂歌，不同的產(chǎn)品結(jié)合自身不同的產(chǎn)品屬性，給一位用戶都帶來了不同的生日祝福。
想必大家都有熬夜刷劇的經(jīng)歷，在騰訊視頻中，在全屏模式下點(diǎn)擊退出清屏模式下，頁面上方的時(shí)間旁邊會顯示夜深了，只是簡簡單單的三個(gè)字，這深夜在這個(gè)場景下，感覺內(nèi)心也有一瞬間被人關(guān)心的觸動(dòng)，體驗(yàn)了一個(gè)產(chǎn)品的人文關(guān)懷和對用戶的體貼。
QQ音樂的綠鉆到期挽留彈窗真的是別出心裁，推薦了4首歌曲，連起來就是VIP我們舍不得重要的你，用歌曲的的名字來表達(dá)對用戶的訴求，趣味化的設(shè)計(jì)讓這個(gè)小小的挽留彈窗不僅沒有感覺到打擾，還感覺很有趣。
當(dāng)有特殊天氣時(shí)，我們打開美團(tuán)外賣的配送頁面時(shí)，頁面會在頁面中做當(dāng)前天氣的擬實(shí)物效果，下雨天整個(gè)頁面也是下著大雨，下雪天整個(gè)頁面飄著雪花，甚至霧霾天氣整個(gè)頁面是是伴著黃黃沉沉的云，設(shè)計(jì)師預(yù)判到用戶打開該頁面是想看外賣到了哪里，看到外面的天氣如此糟糕，大家都不忍心催促外賣小哥了，大大減少了特殊天氣下配送不及時(shí)的投訴率。
在B站輸入密碼的時(shí)候，頁面上方的小人會遮住眼睛，潛臺詞：我不看，你放心輸入吧。在輸入密碼的情景下，設(shè)計(jì)師用趣味生動(dòng)的卡通形象給用戶帶來了更信任更安全的感知。
黃油相機(jī)的加載動(dòng)畫，是一個(gè)可愛的切黃油的小人，并且加載當(dāng)中的文案，會告訴用戶當(dāng)去前正在加載的內(nèi)容是什么，能夠讓用戶對于加載的時(shí)間有預(yù)期，讓等待加載的過程不會枯燥。
蘋果新增 13 個(gè)與殘障人士相關(guān)的 emoji，包括導(dǎo)盲犬、輪椅、義肢、戴著助聽器的耳朵等。有意思的是，蘋果不僅按照以往的做法為涉及人物的 emoji 按照性別和膚色提供多個(gè)版本，而且在表示輔助器具的 emoji 中還做了細(xì)節(jié)上的區(qū)分，比如輪椅有手動(dòng)和自動(dòng)之分，不同導(dǎo)盲犬的導(dǎo)盲鞍樣式也有所不同。
回看歷年蘋果emoji的更新，從膚色平等，到性別、性向平等，再到為殘疾人設(shè)計(jì)，這讓我想起了蘋果為殘章人士做的廣告 - 科技屬于任何人
最近，快手B站豆瓣等都陸續(xù)上線了“紀(jì)念賬號”，產(chǎn)品的意義不僅僅是留住生者的精彩瞬間，更多的也是留住逝者的人生印記，對已故用戶的賬號進(jìn)行保護(hù)，豆瓣在已故賬號上做了悼念用戶的活動(dòng)“在他/她的頭邊放一束山茶花”的方式來紀(jì)念已故的用戶。
騰訊公益的404頁面，這個(gè)項(xiàng)目的靈感源于歐洲失蹤兒童聯(lián)合會主導(dǎo)的，名為“NotFound Project”的網(wǎng)絡(luò)公益工程。就是利用404頁面展示那些被拐賣兒童、失蹤兒童的信息，幫助那些孩子重新找到家人。
丁香園404頁面界面展現(xiàn)了因惡性醫(yī)患遇害的醫(yī)生同道，文案是“你所訪問的頁面就如那些遇害的同道，已離我們遠(yuǎn)去?！毕旅孢€會有這些白衣天使的照片和名字。以這樣的方式悼念亡者，也側(cè)面展現(xiàn)了丁香園的社會價(jià)值。
在頁面走失的這種特殊場景下，404頁面視作可被利用的空間，來呈現(xiàn)公益信息，這種方法暫時(shí)減弱了用戶對產(chǎn)品頁面走失的憤怒，將注意力轉(zhuǎn)向?qū)θ鮿萑后w或社會問題的關(guān)心，側(cè)面感受產(chǎn)品的社會價(jià)值，這種方法適用于社會公益性質(zhì)或相關(guān)業(yè)務(wù)的產(chǎn)品。以上的騰訊公益和丁香園對于這塊的設(shè)計(jì)都是很好的案例參考。
在快手搜索一些負(fù)面的情緒詞匯時(shí)，會提示用戶“別怕，我們都在”。并附有24消失免費(fèi)心理危機(jī)咨詢熱線，從推薦位banner點(diǎn)擊后會進(jìn)入一個(gè)群聊，里面都是其他用戶留下的暖心話語，這些情感化的設(shè)計(jì)讓那些正在經(jīng)歷困難，或者想要終止生命的人傳遞以溫暖。我們可以幫助你，你并不是孤單一人。微信/知乎等搜索引擎下都有不同的對于該情況的情感化設(shè)計(jì)。
在京東搜索穿山甲，會直接挑戰(zhàn)到保護(hù)瀕危動(dòng)物頁面，傳遞出了一個(gè)企業(yè)對動(dòng)物的保護(hù)意識。頁面中的穿山甲≠治病，向全民科普瀕危動(dòng)物的現(xiàn)狀和對于人們對于野生動(dòng)物的錯(cuò)誤認(rèn)知。淘寶更是對野生動(dòng)物保護(hù)啟動(dòng)了綠網(wǎng)計(jì)劃，搜索穿山甲/象牙等都會進(jìn)入到該活動(dòng)頁面。
情感化離不開場景化設(shè)計(jì)，上面四個(gè)案例分別是兩個(gè)404頁面以及兩個(gè)搜索引擎的不同設(shè)計(jì)，不同的產(chǎn)品賦予了不同的含義。不同的場景下設(shè)計(jì)師也需要有不同的思考，陪伴產(chǎn)品一同進(jìn)步。
情感化設(shè)計(jì)更多的是帶給用戶瞬間感動(dòng)，很難形成長期的用戶激勵(lì)或用戶增長，因此情感化設(shè)計(jì)主要目的是通過情感累加，提升產(chǎn)品品牌形象；產(chǎn)品不僅是所有功能的集合，他們真正的價(jià)值可以是滿足人們的情感需求，而其中最重要的需求就是建立自我形象與社會地位。 反思層是包含并超越前兩個(gè)層次，我們要經(jīng)常思考，為什么同類型的產(chǎ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ù)
文章來源：ui中國 作者：百度MEUX
藍(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ù)
文字，是最常見的動(dòng)效對象之一。我們可以通過對透明度、位置或者角度的改變，制作出豐富的動(dòng)態(tài)效果。但你可能不知道的是，AE內(nèi)置了超多的文字預(yù)設(shè)，只需用鼠標(biāo)點(diǎn)擊幾下，就可以完成復(fù)雜絲滑的文字動(dòng)效。
在AE的窗口中打開“效果和預(yù)設(shè)”面板，所有和文字有關(guān)的效果都在動(dòng)畫預(yù)設(shè)中的Text文件夾內(nèi)，共十七種動(dòng)效類型
將動(dòng)效預(yù)設(shè)拖動(dòng)到對象上，即可應(yīng)用動(dòng)效。
十七種類型分別為：3D文字動(dòng)效、入場動(dòng)效、離場動(dòng)效、模糊動(dòng)效、曲線動(dòng)效、表達(dá)式動(dòng)效、填充與描邊動(dòng)效、圖形動(dòng)效、亮度與透明度動(dòng)效、機(jī)械化動(dòng)效、多樣化動(dòng)效、多行文案動(dòng)效、擬態(tài)化動(dòng)效、路徑動(dòng)效、旋轉(zhuǎn)動(dòng)效、縮放動(dòng)效以及字間距動(dòng)效。
有些效果可以相互疊加組合，理論上我們能做出成百上千種不同的效果。
文章來源：UI中國 作者：設(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ù)
設(shè)計(jì)是溝通，是人和人、人和物之間，通過某些形式傳遞和反饋信息的過程。
設(shè)計(jì)時(shí)刻都在為產(chǎn)品或商業(yè)提供有價(jià)值的幫助，例如產(chǎn)品轉(zhuǎn)化率的提升、品牌好感度的提升、還有商業(yè)變現(xiàn)等等；與此同時(shí) 創(chuàng)新性的設(shè)計(jì)，很可能會帶來數(shù)據(jù)上的質(zhì)變，體驗(yàn)上的顛覆，甚至是改變某個(gè)領(lǐng)域的發(fā)展方向。
-
設(shè)計(jì)的本質(zhì)，是對人性視角的轉(zhuǎn)化。
通過洞察用戶在產(chǎn)品使用過程中的痛點(diǎn)，提出全新體驗(yàn)的可能性，實(shí)現(xiàn)體驗(yàn)和業(yè)務(wù)的平衡；
設(shè)計(jì)不是產(chǎn)品可視化，它是全局的，是通過用戶視角對設(shè)計(jì)機(jī)會點(diǎn)的洞察。
-
設(shè)計(jì)包括，但不僅僅是形式。
形式是設(shè)計(jì)的外層映射，設(shè)計(jì)本身是廣義的；設(shè)計(jì)形式是設(shè)計(jì)理念的承載，是設(shè)計(jì)滿足用戶需求、實(shí)現(xiàn)商業(yè)目標(biāo)和呈現(xiàn)品牌調(diào)性的具象化結(jié)果。
-
設(shè)計(jì)的價(jià)值在于創(chuàng)新，探索出解決問題的更多可能性。
設(shè)計(jì)是通過創(chuàng)新思維，對問題本質(zhì)的探尋和對常規(guī)框架的突破，為體驗(yàn)和業(yè)務(wù)賦能。
-
設(shè)計(jì)是價(jià)值導(dǎo)向的，需要為業(yè)務(wù)負(fù)責(zé)，為行業(yè)負(fù)責(zé)；好的設(shè)計(jì)，需要能比常規(guī)方案產(chǎn)生更多價(jià)值，驅(qū)動(dòng)業(yè)務(wù)和行業(yè)發(fā)展；設(shè)計(jì)不是單獨(dú)的原型圖或者視覺稿，而是一個(gè)全局性的創(chuàng)新型解決方案。
我們在做的設(shè)計(jì)，是大設(shè)計(jì)。
文章來源：站酷 作者：樂信用戶體驗(yà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ù)
本文對2020-2021的色彩趨勢做了淺顯的總結(jié)與運(yùn)用分析，希望能對大家有所幫助，歡迎一起交流與探討！全文閱讀大概需要12分鐘。
文章來源：UI中國 作者：貳元
藍(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ù)
2021趨勢已悄悄來襲，還不趕快來看這些落地實(shí)例...
前言
在這艱難又魔幻的2020年的尾聲，有必要系統(tǒng)匯總下關(guān)于UI/UX的設(shè)計(jì)發(fā)展方向，為接下來的2021的開篇帶個(gè)好頭。本文在了解這些趨勢的同時(shí)，分析特點(diǎn)并舉例落地實(shí)例，來幫助大家啟發(fā)創(chuàng)意設(shè)計(jì)工作的思考切入點(diǎn)。
流行趨勢跟人們所處的環(huán)境密切相關(guān)，從最初的方塊馬賽克——>追求極度寫實(shí)——>扁平風(fēng)——>到現(xiàn)在的質(zhì)感擬物，扁平設(shè)計(jì)霸屏的這幾年，設(shè)計(jì)風(fēng)又向更立體、豐富、更有層次感的方向發(fā)展，所以說趨勢就是一個(gè)輪回。設(shè)計(jì)風(fēng)格沒有絕對的好壞，在審美達(dá)到一定疲勞時(shí)，就會開始出現(xiàn)新的設(shè)計(jì)風(fēng)格。每一個(gè)新風(fēng)格都值得設(shè)計(jì)師去拆解、思考，本質(zhì)都是為了提升更好的交互體驗(yàn)。
而在進(jìn)入下一個(gè)十年的過程中，我們對數(shù)字產(chǎn)品和體驗(yàn)的依賴將日益增長，預(yù)測真正勝出的將會是3D動(dòng)畫和用戶界面/用戶體驗(yàn)設(shè)計(jì)的結(jié)合設(shè)計(jì)，5G技術(shù)的發(fā)展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創(chuàng)意、鼓舞人心的發(fā)展階段。在這里讓我們來看看未來那些不可忽視的設(shè)計(jì)趨勢吧。
（注:圖片來自網(wǎng)絡(luò)，均標(biāo)明出處及作者，若有侵權(quán)請告知?jiǎng)h除）
1、3D與UI結(jié)合
隨著高效且易用的3d軟件工具的出現(xiàn)，3D 元素已經(jīng)開始變得越來越受歡迎，而在這之前，UI界面一直被平面設(shè)計(jì)所主導(dǎo)。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動(dòng)效、電商到平面視覺，在所有的設(shè)計(jì)類型中都能找到它，3D現(xiàn)實(shí)主義已是各個(gè)領(lǐng)域的大勢。
圈中也出現(xiàn)了很多免費(fèi)或付費(fèi)的3D預(yù)設(shè)元素及場景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。
特點(diǎn)：
? 直觀感受；
? 立體真實(shí)；
? 形態(tài)豐富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ?
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
實(shí)例應(yīng)用：
各大廠都開始紛紛嘗試在產(chǎn)品中加入3D元素，將自家IP立體化，植入到各個(gè)品牌靜態(tài)頁面，加深品牌印象滲入。3D技術(shù)雖然已經(jīng)出現(xiàn)有一段時(shí)間了，但是為了保證速度和性能表現(xiàn)，較少應(yīng)用到產(chǎn)品中，隨著軟件技術(shù)的提升，立體渲染產(chǎn)品將開始慢慢運(yùn)用到更多的界面交互、H5活動(dòng)中。
▲閑魚、QQ、花椒直播的3D啟動(dòng)頁
▲得物（毒）的3D空間動(dòng)效
▲樂無登錄頁
網(wǎng)易云音樂每年的音樂總結(jié)報(bào)告都追隨著最新的設(shè)計(jì)潮流，今年還可以自由選擇人物形象，增強(qiáng)了用戶的主觀代入感，以下是每年的設(shè)計(jì)風(fēng)格變化：
▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景
▲2020-總結(jié)陳詞H5
▲總結(jié)報(bào)告Banner的動(dòng)效
其中IP立體化最多的當(dāng)屬K12教育領(lǐng)域，除了制作IP周邊外，3D效果能適應(yīng)豐富的運(yùn)營場景，高度還原現(xiàn)實(shí)世界，給小朋友帶來最真實(shí)的學(xué)習(xí)互動(dòng)體驗(yàn)。
▲洪恩識字（3D學(xué)習(xí)場景）、騰訊開心鼠英語ABCmouse
▲IP在播放兒歌時(shí)的互動(dòng)
值得一提的是今年蘋果發(fā)布的macOS Big Sur除了玻璃擬態(tài)的變化，圖標(biāo)還加入了3D維度的擬物視覺層次。
蘋果的 mac OS 的人機(jī)交互指南中也明確指出：“圖標(biāo)不僅是裝飾性的，而且在與用戶交流中起著至關(guān)重要的作用，它應(yīng)該傳達(dá)應(yīng)用程序的主要目的并暗示用戶體驗(yàn)。”這次扁平化和擬物化的結(jié)合，將又要引領(lǐng)一波設(shè)計(jì)趨勢。
2、軟漸變（Soft gradients）
過于強(qiáng)烈的漸變不再是趨勢，大多數(shù)設(shè)計(jì)師都開始喜歡使用非常簡單和微妙的漸變，如果產(chǎn)品的目標(biāo)用戶人群需要輕松溫和的視覺環(huán)境，那么此風(fēng)格再適合不過。
軟漸變包括背景、陰影、反光，常與線條平面圖形結(jié)合，應(yīng)用于界面、網(wǎng)站、圖標(biāo)、icon等設(shè)計(jì)中。
特點(diǎn)：
? 低調(diào)溫和
? 微妙漸變
? 清新愉悅
2.1、柔和背景
在設(shè)計(jì)網(wǎng)站中我們已經(jīng)看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創(chuàng)造多彩的模糊背景。它使設(shè)計(jì)看起來非?，F(xiàn)代、不打擾、清新而令人愉悅，其中畫面內(nèi)容是主要視覺焦點(diǎn)。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
實(shí)例應(yīng)用：
▲咔咔、美柚
2.2、柔和陰影
柔和的彩色陰影使UI有了更微妙的深度變化，在圖標(biāo)設(shè)計(jì)中經(jīng)常需要漸變或陰影來塑造物體，柔陰影使設(shè)計(jì)元素更豐富立體，并且它們有助于區(qū)分內(nèi)容之間的層次結(jié)構(gòu)。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
實(shí)例應(yīng)用：
▲有道數(shù)學(xué)（已下架）
▲Uki
3、玻璃擬態(tài)（Glassmorphism）
去年新擬態(tài)掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會出現(xiàn)問題，新擬態(tài)更適合用在局部的少量元素點(diǎn)綴，無法完整地使用在整套應(yīng)用程序中。
▲Alexander Plyut
伴隨著今年蘋果發(fā)布的 MacOS Big Sur 操作系統(tǒng)的發(fā)布，新的擬物風(fēng)格正式回歸大眾視野，整體風(fēng)格應(yīng)用了新擬態(tài)（Neumorphism）的設(shè)計(jì)思路，利用大量的毛玻璃質(zhì)感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur最新的圖標(biāo)也加入了 3D 質(zhì)感設(shè)計(jì)，設(shè)計(jì)語言更為時(shí)尚簡潔。蘋果設(shè)計(jì)師 Alan Dye 在發(fā)布會上也提到了設(shè)計(jì)風(fēng)格轉(zhuǎn)變的原因，主要是希望「降低視覺的復(fù)雜度，讓用戶能夠?qū)⒆⒁饬性趦?nèi)容上」。
而最新的玻璃擬態(tài)則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質(zhì)感，模糊的邊界有細(xì)微的淺色邊框，整體效果就是讓元素之間有虛實(shí)結(jié)合的特殊空間。毛玻璃運(yùn)用在界面中對關(guān)鍵信息起到強(qiáng)調(diào)作用，用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實(shí)的玻璃一樣。
特點(diǎn)：
? 透氣磨砂
? 層級空間
? 簡潔擬物
▲引領(lǐng)新擬態(tài)風(fēng)格的Alexander的最新作品也朝著玻璃擬態(tài)變化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
實(shí)例運(yùn)用：
▲毛玻璃視覺可追溯到2007年發(fā)售的Windows Vista，而當(dāng)時(shí)的 OS X Yosemite 也大量使用了這種設(shè)計(jì)語言
▲最新的MacOS Big Sur操作系統(tǒng)
▲圖標(biāo)的變化
4、暗黑模式
暗黑模式是白色界面的相反版本，適用于午夜時(shí)分。之前用了很長時(shí)間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經(jīng)常提到的夜間模式是有區(qū)別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對比亮度；夜間模式則專為夜間場景設(shè)計(jì)，重在降低對比度，以降低在暗光環(huán)境下屏幕對人眼的刺激。
特點(diǎn)：
? 突出內(nèi)容
? 減輕干擾
? 沉浸體驗(yàn)
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ?
實(shí)例應(yīng)用：
▲有道詞典
▲愛范兒（ifanr）
最常使用暗黑模式的車載系統(tǒng)：
▲小度車載
暗黑模式的靈感最早引起大家注意的應(yīng)該是抖音，在這之前大部分的應(yīng)用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗(yàn)還是很棒的，在這之后也相繼出現(xiàn)了以黑色為主的APP設(shè)計(jì)：
▲MOO音樂(可手動(dòng)切換顏色模式)
▲Space FM
5、多彩高對比度界面
受Material Design調(diào)色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風(fēng)格，我個(gè)人就非常喜歡熒光色，現(xiàn)在要是談到該風(fēng)格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風(fēng)格已經(jīng)成為清新、酷炫、數(shù)字時(shí)代的代名詞，而在2021一趨勢還將會繼續(xù)影響UI、平面、廣告、插畫等領(lǐng)域。
特點(diǎn)：
? 活潑大膽
? 對比鮮明
? 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在網(wǎng)站設(shè)計(jì)中的應(yīng)用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
實(shí)例應(yīng)用：
▲GoFun出行
▲開言英語
6、抽象幾何元素
從上世紀(jì)初開始，抽象構(gòu)成中的簡單幾何形狀就已經(jīng)用于視覺藝術(shù)中，多用于主背景主題或色彩細(xì)節(jié)，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設(shè)計(jì)看起來既規(guī)則又有趣。
幾何圖形可以運(yùn)用到UI設(shè)計(jì)中 ，將它們混合在一起以創(chuàng)建馬賽克的效果，形成具有品牌意向符號的記憶點(diǎn)。
特點(diǎn)：
? 規(guī)則組合
? 品牌印象
? 重復(fù)記憶
▲Johnny Nova
▲Vladimir Gruev
實(shí)例應(yīng)用：
最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風(fēng)格，那就是SHINee的正規(guī)六輯合輯《‘The Story of Light’》，采用紅黃藍(lán)三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。
▲專輯的主視覺
當(dāng)然，幾何形狀不止用于色彩圖案細(xì)節(jié)，在UI界面布局中經(jīng)常使用大塊面圖形，這種設(shè)計(jì)方法受到越來越多的關(guān)注。
7、極簡風(fēng)
極簡設(shè)計(jì)的前身是2010年代中期精巧又花哨的設(shè)計(jì)，這種設(shè)計(jì)已經(jīng)存在很長一段時(shí)間了，但在2020年，人們每天需要消化的信息量越來越多，所以現(xiàn)在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會選擇更簡潔專一的界面。
特點(diǎn)
? 專注信息
? 清晰易用
? 簡單操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
談到極簡主義，就不可避免會涉及到無鍵趨勢，因?yàn)榘存I越少就意味著設(shè)計(jì)越簡潔，而這種簡化過的設(shè)計(jì)將讓手勢操作和語音交互更為流行。
▲Taras Migulko
▲Gleb Kuznetsov?
實(shí)例應(yīng)用：
▲夸克瀏覽器的夸克寶寶
8、將視頻應(yīng)用到UI中
在 2020 年，信息的觸達(dá)的速度將會變得更快，而視頻是很好的載體，各個(gè)年齡段的用戶都喜歡觀看引人入勝的動(dòng)畫，無論是選擇通過短視頻還是電影的方式來推廣產(chǎn)品，都很好地灌輸品牌理念，建立與受眾群體的關(guān)系，加強(qiáng)用戶忠誠信任感。
特點(diǎn)：
? 營造氛圍
? 類型多樣
? 品牌調(diào)性
▲Fireart Studio
▲Ehsan Rahimi
實(shí)例應(yīng)用：
▲moo音樂登錄頁
▲蝦米音樂歡迎頁
9、插畫與3D的界線越來越模糊
藝術(shù)插圖從2017年開始到現(xiàn)在仍然很流行，幾乎適用于任何類型的設(shè)計(jì)行業(yè)，是設(shè)計(jì)領(lǐng)域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產(chǎn)品背后的故事，為了把故事講好，我們可以創(chuàng)造出一個(gè)品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產(chǎn)品問題。這是在產(chǎn)品設(shè)計(jì)中講好故事的基礎(chǔ)，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經(jīng)看到了3D與插畫的結(jié)合，藝術(shù)家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細(xì)節(jié)和質(zhì)感都放大到了熒幕上，在劇中還采用對比強(qiáng)烈的大色塊擴(kuò)大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術(shù)家們是怎么把片子做得這么酷！
▲3D人物的畫筆觸感
▲畫面光源處由波普圓點(diǎn)組成的背景
▲紙本漫畫書中的“聲音詞”
▲漫畫經(jīng)典線條
▲Entei Ryu在3D建模使用插畫質(zhì)感
▲Minh Pham ?在ui界面中的嘗試
實(shí)例應(yīng)用：
騰訊旗下音樂平臺JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個(gè)風(fēng)格之間來回切換，給我們帶來了一個(gè)多元的音樂世界。各大視頻網(wǎng)站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關(guān)注微信視頻號“UoU_Studio”觀看完整視頻。
在3D開始迅速發(fā)展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強(qiáng)互動(dòng)性，而3D插畫與動(dòng)效的結(jié)合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。
10、更多的微交互動(dòng)效
最后一點(diǎn)，還是要強(qiáng)調(diào)動(dòng)效在UI中的的作用，微交互最早出現(xiàn)在 2018 年，讓用戶更好地理解系統(tǒng)如何工作，并在引導(dǎo)其獲得更好的體驗(yàn)方面扮演著非常重要的角色。它們在 UI 設(shè)計(jì)中決定了一個(gè) App 或網(wǎng)站是普通還是優(yōu)秀，從點(diǎn)擊反饋、加載等待、導(dǎo)航交互等等，為用戶界面設(shè)計(jì)增加了動(dòng)態(tài)性，交互性和直觀性。
動(dòng)效起到的作用：
? 引起人們對應(yīng)該做什么或接下來將要發(fā)生的事情的關(guān)注；
? 創(chuàng)造流暢和視覺愉悅的過渡；
? 帶給使用者美觀的享受；
? 指導(dǎo)我們進(jìn)行復(fù)雜的操作；
? 確認(rèn)用戶使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
實(shí)例應(yīng)用：
▲GoFun選擇車輛后的頁面轉(zhuǎn)場動(dòng)效
結(jié)尾：
2020的趨勢在滿足用戶的美學(xué)要求上，側(cè)重內(nèi)容和感情表達(dá)，還會根據(jù)不同設(shè)備載體、新的技術(shù)而變化，為用戶提供最大程度的豐富體驗(yàn)。
借用Adobe設(shè)計(jì)副總裁 Jamie Myrold 的一句話：如今設(shè)計(jì)師要思考的，絕不僅僅是設(shè)計(jì)一款A(yù)pp、網(wǎng)站或設(shè)計(jì)工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設(shè)計(jì)。
設(shè)計(jì)趨勢還在快速增長變化，有些趨勢總能長期霸屏，未來還將迎來更多新技術(shù)，每個(gè)設(shè)計(jì)人員都可以找到自己喜歡的方向，不管哪種趨勢最受歡迎，最重要的是如何學(xué)習(xí)并合理地運(yùn)用到產(chǎn)品中，以產(chǎn)生最大的設(shè)計(jì)商業(yè)價(jià)值。
文章來源：UI中國 作者：_阿丹a_
藍(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ù)
文章來源：tob.design 作者：三魚先生
藍(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