]]>
在本文中，我們將分享ISUX設(shè)計(jì)趨勢(shì)報(bào)告的最后一部分“用戶體驗(yàn)趨勢(shì)”。用戶體驗(yàn)是產(chǎn)品、人與環(huán)境共同作用下，用戶使用產(chǎn)品的感受。隨著科技不斷進(jìn)步，新的產(chǎn)品和服務(wù)層出不窮，消費(fèi)者的行為和心理也在不斷變化。我們從技術(shù)、硬件、環(huán)境和人四個(gè)維度，來分析和總結(jié)用戶體驗(yàn)趨勢(shì)，在這個(gè)多變的行業(yè)中，大家進(jìn)行新的設(shè)計(jì)和改進(jìn)設(shè)計(jì)時(shí)，加以對(duì)趨勢(shì)的了解，為即將到來的未來做準(zhǔn)備。
為了更好的了解趨勢(shì)出現(xiàn)的原因，我們從影響趨勢(shì)的客觀條件中歸納了一些信號(hào)：
2019年是5G元年
思科最新研究表明，2022年，全球近12%的移動(dòng)數(shù)據(jù)流量來自5G連接。5G超高速率讓內(nèi)容推薦更加個(gè)性化和精準(zhǔn)化，萬物互聯(lián)會(huì)帶來更多的智能終端和更多細(xì)分場(chǎng)景，AR將會(huì)有更多應(yīng)用場(chǎng)景。
2019年00后進(jìn)入20歲
00后的特點(diǎn)更加多樣化，千人千面時(shí)代到來。他們喜歡多社交和多互動(dòng)，內(nèi)容是激發(fā)他們互動(dòng)的工具，會(huì)對(duì)自己感興趣的領(lǐng)域投入更多時(shí)間和金錢。
人工智能技術(shù)加速落地和擴(kuò)大應(yīng)用
近年來，人工智能技術(shù)在移動(dòng)互聯(lián)網(wǎng)廣泛應(yīng)用，人工智能手機(jī)研究報(bào)告指出，消費(fèi)者最常用的AI功能有語音助手、人臉解鎖、智能識(shí)圖、智能拍攝和美顏，圍繞語音和視覺的核心應(yīng)用場(chǎng)景技術(shù)將會(huì)持續(xù)升級(jí)。
智能手機(jī)的差異化
全面屏的出現(xiàn)，讓Face ID逐漸取代了Touch ID；各大手機(jī)廠商也試圖在產(chǎn)品形態(tài)上創(chuàng)新，推出了折疊屏手機(jī)。
01. 個(gè)性化體驗(yàn)
互聯(lián)網(wǎng)的產(chǎn)品從大眾化轉(zhuǎn)向個(gè)性化，越來越多的產(chǎn)品通過定位細(xì)分找到了新的機(jī)會(huì)。設(shè)計(jì)從同質(zhì)化的體驗(yàn)轉(zhuǎn)向追求個(gè)性化和創(chuàng)新。設(shè)計(jì)師必須了解與自己完全不同的目標(biāo)人群，進(jìn)行用戶細(xì)分研究，通過良好的用戶體驗(yàn)留住用戶，提升產(chǎn)品價(jià)值。
01-1. 個(gè)性化內(nèi)容推薦
在大數(shù)據(jù)背景下，個(gè)體興趣多樣，隨著機(jī)器學(xué)習(xí)和人工智能的技術(shù)的發(fā)展，產(chǎn)品越來越注重個(gè)性化推薦。
“更懂你”的信息流推送讓用戶不需要從一堆歌單中去尋找你喜歡聽的歌曲，豆瓣的音樂地圖和Google的For you讓你的偏好一目了然。
01-2. 個(gè)性化應(yīng)景設(shè)計(jì)
用戶經(jīng)常在不同地方使用手機(jī)，場(chǎng)景化生活特征被互聯(lián)網(wǎng)設(shè)備所感知。設(shè)計(jì)師需要感知用戶當(dāng)前場(chǎng)景，理解當(dāng)前場(chǎng)景的需求來進(jìn)行精準(zhǔn)的應(yīng)景設(shè)計(jì)，提升用戶的驚喜感和愉悅感。
Snapchat能識(shí)別聚會(huì)拍照的地點(diǎn)，在app里在線預(yù)定打車到那個(gè)位置。
麥當(dāng)勞個(gè)性化推薦技術(shù)，讓餐廳根據(jù)天氣、時(shí)間和顧客的點(diǎn)餐記錄來調(diào)整菜單。
在電影院選座位能感受到座位的真實(shí)觀影角度，快到電影院時(shí)會(huì)推送電影票二維碼。
02. 語音交互
AI語音技術(shù)的快速普及，幫助人們改變使用習(xí)慣和觀念，用戶越來越多的使用語音交互。據(jù)ComScore的報(bào)告稱，預(yù)計(jì)在2020年，用戶使用搜索功能時(shí)，50%會(huì)用語音搜索；72%擁有智能語音助手的用戶表示這已成為他們生活的一部分。各大科技公司出了自己的智能音箱，AI智能設(shè)備改變了與界面的交互方式，從GUI到VUI，不依賴觸摸屏的輸入，出現(xiàn)無導(dǎo)航、無按鈕、無菜單界面。就目前而言，國內(nèi)的AI音箱還是比較初級(jí)的人工智能，經(jīng)常被用戶病垢為人工智障般的語音系統(tǒng)。
02-1. 語音更趨近自然
隨著人工智能和機(jī)器學(xué)習(xí)的不斷發(fā)展，Google的智能語音助手快速進(jìn)化，從去年I/O發(fā)布的Continued Conversation（連續(xù)對(duì)話），用戶不用每下一個(gè)指令都要說一聲‘hi google’，到今年已經(jīng)不需要說喚醒詞，拿起手機(jī)就可以讓它幫助你。
去年發(fā)布的Google Duplex，可以打電話給飯店或理發(fā)店等商家，幫你預(yù)約，到今年可以幫你租車、回復(fù)消息、找照片分享給好友、寫郵件等一系列跨app的任務(wù)。
技術(shù)進(jìn)步必然帶來效率的提升，AI越來越能全面理解用戶提出的高度個(gè)性化需求，語音交互可以像人與人互動(dòng)一樣自然且同時(shí)快速處理跨app的多任務(wù)，降低用戶操作成本，縮短操作鏈路，成為用戶的日常“助手”。
02-2. 語音交互的泛娛樂
對(duì)用戶來說，語音的使用不僅僅是它的便利性，娛樂性也是重要因素之一。短視頻在聲音交互和語音識(shí)別上進(jìn)行了補(bǔ)位。Snapchat推出聲音濾鏡，不僅能根據(jù)聲音音量做出反應(yīng)，還能識(shí)別語音指令，觸發(fā)對(duì)應(yīng)的動(dòng)畫。
Google的Live Caption的語音識(shí)別技術(shù)，可將視頻語音內(nèi)容轉(zhuǎn)化成文本字幕顯示在聊天界面，還可識(shí)別關(guān)鍵詞，形成文本鏈接，用戶可直接點(diǎn)擊跳轉(zhuǎn)。
聲控游戲和聲音社交不斷興起，語音讓體驗(yàn)更加多元化。騰訊NEXT新作《疑案追聲》，以聲音表現(xiàn)故事，聽聲音進(jìn)行推理破案，用聲音來打造沉浸式體驗(yàn)。
03. 秒驗(yàn)身份認(rèn)證
登錄app身份認(rèn)證從以前五花八門的“用戶名 密碼”的模式優(yōu)化到獲取手機(jī)動(dòng)態(tài)驗(yàn)證碼，這種身份校驗(yàn)的方式在使用體驗(yàn)上談不上好用。驗(yàn)證碼的收取、輸入都需要用戶花費(fèi)一定的時(shí)間和精力。全面屏手機(jī)的出現(xiàn)使Face ID取代了Touch ID，當(dāng)全屏設(shè)備越來越普及時(shí)，越來越多的app將加入面部識(shí)別認(rèn)證，實(shí)現(xiàn)更實(shí)時(shí)更精準(zhǔn)的一鍵登錄。
04. 手機(jī)新形態(tài)帶來新體驗(yàn)
各大手機(jī)廠商為了調(diào)動(dòng)消費(fèi)者的換機(jī)熱情，從全面屏、升降攝像頭、雙面屏到最近的折疊屏，手機(jī)新形態(tài)的出現(xiàn)會(huì)帶來不一樣的操作體驗(yàn)。
折疊屏折疊時(shí)能讓手機(jī)背面成為一個(gè)附加的交互空間，方便用戶同時(shí)使用兩塊屏幕進(jìn)行不同app操作，例如打游戲的同時(shí)，不用切換退出游戲，直接翻過屏幕處理社交消息。
折疊屏展開能使空間更大，在小屏中運(yùn)行的app，會(huì)自動(dòng)調(diào)整大小匹配大的布局，并展示更多的功能。還可以進(jìn)行多窗口操作，避免多個(gè)應(yīng)用之間來回切換。
全屏手機(jī)的出現(xiàn)，讓手勢(shì)操作取代物理按鍵。折疊屏的出現(xiàn)，雙屏幕的操作會(huì)增加更多手勢(shì)操作，需要在設(shè)備中模擬人的自然的、習(xí)慣的手勢(shì)。
05. AR 融入到生活每個(gè)角落
AR技術(shù)會(huì)隨著5G發(fā)揮更大價(jià)值，創(chuàng)造更多的新場(chǎng)景。人們借助AR，能讓原本虛構(gòu)的數(shù)字世界融入到現(xiàn)實(shí)的物理世界。2018年Gartner調(diào)查顯示，2020年，約有46%的零售商計(jì)劃將AR/VR技術(shù)融入到顧客的購物體驗(yàn)中。
Snapchat可以使用相機(jī)掃描物理對(duì)象，會(huì)展示Amazon的購買鏈接，還可以掃描歌曲或者數(shù)學(xué)題。
通過Nike App的“掃一掃”，對(duì)雙腳進(jìn)行全面掃描和評(píng)估，會(huì)有左右腳長寬顯示，根據(jù)選擇的運(yùn)動(dòng)鞋款，會(huì)推薦該鞋款最適合的鞋碼。
AR讓數(shù)字世界的物體更具象。當(dāng)你搜索到想買的一副畫，可通過AR把畫放入現(xiàn)實(shí)場(chǎng)景中，用一種全新的方式看看該物體的大小、顏色和自己家搭不搭。
Google地圖推出了AR實(shí)景導(dǎo)航。屏幕上面部分會(huì)展示實(shí)景內(nèi)容，底部顯示數(shù)字地圖，屏幕中會(huì)有大大的3D引導(dǎo)箭頭引導(dǎo)。AR的交互行為模擬真實(shí)世界中的用戶行為，讓用戶能很快明白怎么使用。因此需要通過最簡單的模擬真實(shí)環(huán)境的呈現(xiàn)方式，來傳遞核心信息，3D元素的設(shè)計(jì)能聚焦視覺引導(dǎo)用戶操作，加上符合物理性的動(dòng)效，對(duì)現(xiàn)實(shí)生活中的重力、慣性模擬，使3D元素看上去更真實(shí)自然。
Google首款支持多人AR交互的Just a Line，通過相機(jī)拍攝，點(diǎn)擊屏幕進(jìn)行繪畫，畫出你想表達(dá)的畫面。
06. 產(chǎn)品表現(xiàn)向 3D 發(fā)展
除游戲外，有許多以3D為展示形態(tài)的產(chǎn)品進(jìn)入了我們的視線，如使用3D Avatar為用戶定制形象的“ZEPETO”、“IMVU”；使用3D的角色作為界面設(shè)計(jì)元素的“BOO!”，“ZENLY”在界面卡片使用陀螺儀效果讓卡片擁有立體的效果變化。3D的手法已經(jīng)在產(chǎn)品設(shè)計(jì)中的使用的更加頻繁。
除了更新鮮的視覺感受外，3D的手法也可以更好地服務(wù)于“商品”的展示，讓用戶對(duì)產(chǎn)品有更直觀的了解。我們可以看到更多真實(shí)環(huán)境或產(chǎn)品的展示使用三維的方法表現(xiàn)。
設(shè)計(jì)師也可利用三維空間的表現(xiàn)力，將產(chǎn)品頁面打造成一個(gè)更加立體與真實(shí)的空間。在用戶操作屏幕的過程中，帶來更流暢與真實(shí)的體驗(yàn)感受。
07. 為內(nèi)容設(shè)計(jì)
“知夜晚而不睡”的人群越來越多，他們擁有更多碎片化和大段閑暇時(shí)間來消費(fèi)內(nèi)容，app的設(shè)計(jì)需要更有沉浸感。
07-1. 舒適便捷的使用體驗(yàn)
屏幕尺寸越來越大影響著用戶日常操作的方便性。界面的設(shè)計(jì)如何能提升大屏手機(jī)的操作效率和使用體驗(yàn)？三星的One UI讓手機(jī)屏幕分成兩個(gè)區(qū)域，上面的區(qū)域用于查看內(nèi)容，下面的區(qū)域用于交互操作。
為了方便頁面層級(jí)切換，增加了下滑退出的手勢(shì)。
屏幕上的操作和內(nèi)容根據(jù)用戶操作發(fā)生變化，讓用戶更容易注意到已完成的操作，并提示下一步的操作。信息在用戶需要的時(shí)候呈現(xiàn)，減少用戶的認(rèn)知負(fù)荷。
更靈活與有連續(xù)性的頁面轉(zhuǎn)換效果也可以幫助用戶在頁面跳轉(zhuǎn)間更好的記住產(chǎn)品路線，同時(shí)帶來更舒適的使用感受。頁面之間的轉(zhuǎn)換不再只有簡單的四個(gè)方向的進(jìn)入或拉起，而更是與內(nèi)容形態(tài)相關(guān)的靈活的轉(zhuǎn)換過程。用戶通過手勢(shì)對(duì)頁面進(jìn)行有方向的操作時(shí)，將得到連貫的操作體驗(yàn)。
07-2. 沉浸式的全屏表現(xiàn)
為了更好地服務(wù)于內(nèi)容，我們看到許多的產(chǎn)品去掉了頂部的“色塊”的設(shè)計(jì)。需要帶給用戶更沉浸的體驗(yàn)，所有“生硬”的分割形式也將不再流行。而在這其中，白色與黑色的全屏幕底色可以更加凸顯產(chǎn)品內(nèi)容本身的差異化，而不是頁面表現(xiàn)的差異。
在4月底Facebook推出了新的更簡單、更沉浸式的“FB5”設(shè)計(jì)風(fēng)格，除開去掉厚重的頂部藍(lán)色塊的設(shè)計(jì)外，新加入的“黑暗模式”將先出現(xiàn)在視頻觀看的模塊中，這將更好地服務(wù)于視頻內(nèi)容的觀看。
“黑暗模式”將出現(xiàn)在更多APP在設(shè)計(jì)中。在滿足用戶在瀏覽內(nèi)容時(shí)的“沉浸感”的同時(shí)，APP可以在夜間幫助用戶開啟“黑暗模式”，服務(wù)于用戶在夜間暗環(huán)境下的使用，減輕屏幕過亮的視覺疲憊。
07-3. 用戶深度參與內(nèi)容
00后喜歡多互動(dòng)強(qiáng)體驗(yàn)，內(nèi)容 互動(dòng)賦予了內(nèi)容新的可能性。互動(dòng)視頻讓用戶增加代入感、獲得個(gè)性化的游戲體驗(yàn)，也讓內(nèi)容更具有娛樂性和新鮮感。
電影、游戲、網(wǎng)劇都推出了互動(dòng)作品，用戶從第三視角轉(zhuǎn)向第一視角進(jìn)行主動(dòng)參與選擇，成為高度個(gè)人化的內(nèi)容。互動(dòng)視頻不僅要保證故事內(nèi)容的優(yōu)質(zhì)，還要保證互動(dòng)體驗(yàn)，對(duì)內(nèi)容的交互必須是有意義的、影響劇情發(fā)展的，這樣的互動(dòng)才有效、才能更加觸動(dòng)用戶的情感。
07-4. 內(nèi)容從吸睛到吸金
00后不看電視，主要用智能手機(jī)獲取感興趣的商品和服務(wù)。移動(dòng)支付改變了用戶的付費(fèi)習(xí)慣，用戶愿意為自己感興趣的內(nèi)容付費(fèi)。
以內(nèi)容為載體的電商給用戶帶來更加信息豐富化和娛樂化的體驗(yàn)方式，用戶消費(fèi)內(nèi)容的同時(shí)可以隨手進(jìn)行購物。
08. 感性審美的提升
年輕的互聯(lián)網(wǎng)用戶們，在高速發(fā)展的科技與文化環(huán)境下成長。也自然地造就了這些用戶對(duì)產(chǎn)品審美上更高的追求。近幾年，擁有自我個(gè)性的“小而美”的設(shè)計(jì)也更容易打動(dòng)用戶。
08-1. 符號(hào)化的圖標(biāo)設(shè)計(jì)
從Office365的新圖標(biāo)設(shè)計(jì)中，我們可以看到更抽象與符號(hào)化的圖標(biāo)表現(xiàn)。降低圖標(biāo)上的具象（文字區(qū)域）占比，使用更多的抽象形狀表達(dá)圖標(biāo)所具備的含義。圖標(biāo)向更簡潔與幾何的方向發(fā)展，同時(shí)使用豐富的色彩和質(zhì)感變化滿足圖標(biāo)的辨識(shí)度。
此外，圖標(biāo)的設(shè)計(jì)也更講究適配效率。Office使用了svg格式的資源以適應(yīng)于不同平臺(tái)的應(yīng)用擴(kuò)展。
08-2. 貼近自然感的操作響應(yīng)
隨著表現(xiàn)手法的進(jìn)步，如3D元素的使用；以及動(dòng)畫實(shí)現(xiàn)技術(shù)的進(jìn)步，在響應(yīng)動(dòng)畫表現(xiàn)上也將更加細(xì)膩。而模仿自然的運(yùn)動(dòng)規(guī)律也將更為流行，“弧線運(yùn)動(dòng)”“光感”“粒子表現(xiàn)”“三維空間”等等也將提升產(chǎn)品的設(shè)計(jì)表現(xiàn)。
對(duì)界面中的控件而言，控件的設(shè)計(jì)將越發(fā)貼近真實(shí)的物理規(guī)則。設(shè)計(jì)師們可以通過對(duì)控件在動(dòng)畫上的表現(xiàn)賦予它們更真實(shí)的觸感。
有趣的響應(yīng)動(dòng)畫也可以帶給用戶更愉快和親切的感受，而在動(dòng)畫中體現(xiàn)更多的“人情味”便是帶來愉悅體驗(yàn)的關(guān)鍵。我們可以感受到圖標(biāo)所傳達(dá)出來的情緒與性格。
08-3. 風(fēng)格化的插畫表現(xiàn)
審美的提升帶來最為直觀的感受即是對(duì)圖形本身追求的進(jìn)步。所以在界面插畫中，視覺藝術(shù)性的追求也更加重要。用戶們?cè)缫褏捑肓饲宦傻膸缀涡∪嘶蚴呛唵蔚木€性圖標(biāo)，更具有個(gè)性的角色表現(xiàn)及繪畫手法將更受年輕人的歡迎。
08-4. 彩蛋
越來越多的電影流行彩蛋，一個(gè)小小的彩蛋能帶給用戶驚喜感和儀式感。我們?cè)跐M足用戶需求和打造用戶體驗(yàn)的同時(shí)，可以給用戶設(shè)計(jì)一些觸動(dòng)人心的設(shè)計(jì)。
Google搜索在《復(fù)聯(lián)4》熱映時(shí)，加入了滅霸的彩蛋。點(diǎn)擊無限手套，搜索結(jié)果就會(huì)隨機(jī)“消失”一半。
Google地圖在愚人節(jié)發(fā)起了貪吃蛇游戲，可以在不同的地圖上，讓蛇（地鐵或巴士）吃掉目標(biāo)不斷變長。
Google 為 Chrome 的生日埋了個(gè)小彩蛋，在 Dino Game 中加入了派對(duì)元素：當(dāng)小恐龍吃蛋糕后即可戴上生日帽。
總結(jié)
2019年我們可以看到科技對(duì)設(shè)計(jì)、體驗(yàn)產(chǎn)生的巨大影響?！秳?chuàng)新者的窘境》一書中描述：“每個(gè)技術(shù)由慢到快到發(fā)展至瓶頸時(shí)，另一個(gè)顛覆式的技術(shù)會(huì)悄悄萌芽，并替代上一個(gè)技術(shù)”。因此有些設(shè)計(jì)趨勢(shì)會(huì)由于技術(shù)驅(qū)動(dòng)突然爆發(fā)，也有可能會(huì)因?yàn)榧夹g(shù)的顛覆而消失。作為設(shè)計(jì)師，要學(xué)會(huì)識(shí)別設(shè)計(jì)趨勢(shì)中的變與不變，來進(jìn)行創(chuàng)新和設(shè)計(jì)改良。
科技和產(chǎn)品最終都是回歸到以人為本，設(shè)計(jì)師要洞察人性底層的需求，除了關(guān)注屏幕內(nèi)的設(shè)計(jì)，還需關(guān)注屏幕外的設(shè)計(jì)，改善人們使用產(chǎn)品或服務(wù)的設(shè)計(jì)就是未來的趨勢(shì)。
相關(guān)文章：
1、《2019-2020 設(shè)計(jì)趨勢(shì)：圖形篇》
2、《2019 – 2020 設(shè)計(jì)趨勢(shì)：IP形象篇》
3、《2019-2020 設(shè)計(jì)趨勢(shì)：Avatar角色篇》
4、《2019-2020 設(shè)計(jì)趨勢(shì) · 用戶體驗(yàn)篇》
文章來自公眾號(hào)：騰訊ISUX
(https://isux.tencent.com/articles/isux-designreport-2019-part4）
那接下來我們就結(jié)合一些實(shí)際案例，來看提升產(chǎn)品體驗(yàn)感的5個(gè)動(dòng)效指南吧。
1
反饋當(dāng)前狀態(tài)
雖然顏色和動(dòng)畫都能比較好地引起用戶的注意，但為什么還要加入動(dòng)效呢？
一方面，由于數(shù)十萬年的自然習(xí)得，讓我們對(duì)于檢測(cè)周圍的運(yùn)動(dòng)特別敏感，從而快速應(yīng)對(duì)從任何一方接近的危險(xiǎn)。
另一方面，動(dòng)效其實(shí)對(duì)于視障人士來說更加友好。下面這幅圖是正常人和視障人士看到的同一個(gè)畫面，純色彩突出的情況下視障人士是很難感知到錯(cuò)誤提示的。
（左為正常視角，右為綠色盲視角）
在色彩突出失靈的情況下加入動(dòng)效呢？當(dāng)用戶注意到這樣的抖動(dòng)動(dòng)畫時(shí)，他們立即就能理解動(dòng)作。
（加入動(dòng)效反饋后）
2
保持動(dòng)作的關(guān)聯(lián)性
在真實(shí)的物理世界中，一切動(dòng)作都有它的“來源”和“去向”，這可以幫助我們很好的理解行為動(dòng)作。動(dòng)效也是一樣的，正確的動(dòng)畫可以幫助用戶理解方向，而不會(huì)感覺內(nèi)容突然發(fā)生變化。
這里用京東和淘寶為例。同樣都是加購物車的設(shè)計(jì)，兩者之間有什么差異呢？
（左為京東，右為淘寶）
京東使用「投遞動(dòng)作」強(qiáng)調(diào)了加車的過程，搭配上+1的圖標(biāo)會(huì)讓用戶的感知更加明顯。而且無需任何文字就告訴了用戶——我已經(jīng)成功把商品加入購物車了。
淘寶雖然使用了文字告訴用戶，已經(jīng)成功加入了購物車，但文字還有一個(gè)理解的過程。
3
注意展現(xiàn)方式
受限于移動(dòng)設(shè)備的尺寸限制，動(dòng)效是展現(xiàn)更多信息的一個(gè)好方法，利用圖片/文字在有限范圍內(nèi)的滾動(dòng)，從而在有限的空間范圍內(nèi)展示更多的信息。
不過在展現(xiàn)方式這里也容易出差錯(cuò)，從天貓的動(dòng)效設(shè)計(jì)里，我們可以同時(shí)看到可取和不可取之處。
（左為天貓超市，右為天貓）
在天貓的首頁功能板塊區(qū)有一個(gè)「免費(fèi)領(lǐng)水果」(天貓超市左側(cè))，它由3塊內(nèi)容共同組成了一條完整的信息，因此用戶只需要閱讀而不需要選擇權(quán)。
而且這樣比起純文字的“免費(fèi)領(lǐng)水果”，豐富的水果品類和更加突出的免費(fèi)字樣帶來的刺激會(huì)更強(qiáng)烈。
而天貓超市的動(dòng)效，首先是卡片運(yùn)動(dòng)不規(guī)律，每次進(jìn)入后運(yùn)動(dòng)變化都不一樣；其次每個(gè)卡片都是獨(dú)立的分區(qū)信息，但用戶卻沒有選擇權(quán)，只能讓卡片自動(dòng)劃走或點(diǎn)進(jìn)去查看。如果錯(cuò)過了某個(gè)分區(qū)信息，就只能退出再重新進(jìn)入。
4
增加情緒的傳遞
除了功能型的用處外，還能將情感化設(shè)計(jì)以動(dòng)效形式表現(xiàn)出來，增強(qiáng)某種情緒的感覺，向用戶傳遞我們所想要表達(dá)的情緒。
同樣都是一鍵清除未讀消息，為什么QQ的愉悅感會(huì)更強(qiáng)烈一些呢？我們來看一下京東金融、QQ兩款清除未讀消息的對(duì)比。
（左為QQ，右為京東金融）
有看出什么差異嗎？是的，京東金融的消息清除更像是一個(gè)功能按鈕，除了消失的紅點(diǎn)沒有任何反饋。
再看QQ，除了消失的“煙霧”效果之外，那種拖拽的感覺以及逐個(gè)消失的爽感，就像一個(gè)一個(gè)捏爆泡泡紙的感覺。同樣都是一鍵清除未讀消息，有融入情感動(dòng)效的QQ反而會(huì)讓人感到更加愉悅。
5
避免強(qiáng)烈的反差
最后還有一個(gè)小點(diǎn)，動(dòng)效有時(shí)還會(huì)作為銜接兩個(gè)畫面的過渡態(tài)，如果兩個(gè)頁面之間反差過大，眼睛受到的刺激就會(huì)較大。就像在暗處待久了，突然強(qiáng)光來襲的不適應(yīng)感。
（左為片刻，右為QQ）
所以動(dòng)效還應(yīng)該去避免強(qiáng)烈的反差造成的不適應(yīng)感。日簽君就比較喜歡片刻的夜間模式切換，它不是很突兀的模式切換，而是通過動(dòng)效營造了一個(gè)日出日落的場(chǎng)景，去緩和這種刺激。反而QQ的夜間模式切換就顯得反差太大了。
五個(gè)動(dòng)效指南，你都記住了嗎？就像前面提到的，動(dòng)效不是為了炫技，每個(gè)動(dòng)效都應(yīng)該有它對(duì)應(yīng)的目的，幫助用戶更好地理解正在發(fā)生的事情或如何更有效地使用你的產(chǎn)品，這也正是動(dòng)效能夠提升產(chǎn)品體驗(yàn)感的原因。
作者：艾體驗(yàn)AIUX
公眾號(hào)：艾體驗(yàn)AIUX
]]>印刷中也會(huì)用到柵格，但就本文而言，我主要想討論的是用于PC和移動(dòng)設(shè)備上的柵格系統(tǒng)設(shè)計(jì)。
紫色塊放內(nèi)容
內(nèi)容塊包括文本，圖片或者是兩者的組合形式，背景顏色實(shí)際上不能算是內(nèi)容元素，除非是作為文本或者圖片的容器。
上圖中的粉色塊作為柵格中的列，它們構(gòu)成了內(nèi)容寬度。一般來說，列寬是不會(huì)變的，只是列數(shù)會(huì)隨著設(shè)備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動(dòng)端變?yōu)?列。嚴(yán)格來說，你其實(shí)可以定義任何想要的列寬，但大多數(shù)情況下的網(wǎng)格列寬都設(shè)置在60-80px之間。選擇合適的列寬是最重要的，因?yàn)樗莾?nèi)容寬度的主要決定因素。
水槽是在列與列之間的空間。20px是一個(gè)常見的尺寸設(shè)置，當(dāng)設(shè)計(jì)塊狀或者卡片元素的網(wǎng)格時(shí)，這種間距非常重要，比如做照片類設(shè)計(jì)的時(shí)候。有些系統(tǒng)會(huì)隨著設(shè)備寬度的增加而增加水槽的寬度，但也可以保持固定。
外邊距也稱為外水槽，是內(nèi)容寬度之外的空白區(qū)域。為了更方便的設(shè)計(jì)，外邊距會(huì)隨著設(shè)備寬度的增加而增加。移動(dòng)設(shè)備的邊距通常為20-30px，而在平板電腦和PC端，這個(gè)間距通常會(huì)差異很大。
下面會(huì)介紹一些基本的準(zhǔn)則，但要明白在實(shí)際設(shè)計(jì)中其實(shí)沒有任何硬性的規(guī)定。
1. 內(nèi)容元素必須位于若干列上
其核心思想是內(nèi)容元素必須位于若干列上，你可以任意分割，比如6×2,3×4,4×3。下面的例子中，我展示了不同分割方式設(shè)計(jì)的信息卡片。
不同柵格設(shè)計(jì)展示
很棒，這看起來很簡單對(duì)吧。有的時(shí)候，你想把內(nèi)容嚴(yán)格的套用在柵格布局上，會(huì)發(fā)現(xiàn)可能不夠美觀，比如下面的例子。
如果我們把內(nèi)容都放在網(wǎng)格上，文本內(nèi)容會(huì)顯得很長，最佳的位置是不嚴(yán)格在任何網(wǎng)格上，這也是可以的，只要理解了整個(gè)元素實(shí)際上是一個(gè)不可見的，更大的容器就行。
這也是4×3的布局，只是給了它內(nèi)部不可見的填充。當(dāng)把這樣的設(shè)計(jì)稿給到開發(fā)時(shí)，他們就能很直觀的知道這一點(diǎn)，所以這更利于去理解如何實(shí)際地分配好內(nèi)容。
2. 不要將內(nèi)容元素留在水槽中
內(nèi)容元素應(yīng)該要在列寬以內(nèi)，而不能流出在水槽之外，這樣會(huì)違背柵格化的目的。
3. 只要父級(jí)元素對(duì)齊柵格，子級(jí)可以不完全對(duì)齊列
有些時(shí)候，你想要將設(shè)計(jì)和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒有完全落在一列上，文字被迫以一種奇怪的方式自適應(yīng)。其實(shí)不用擔(dān)心，只要“父”容器對(duì)齊柵格，這就沒有關(guān)系。
父子級(jí)內(nèi)容柵格排版示意
4. 除非有意，否則不要把列作為外部填充
所有重要內(nèi)容都應(yīng)該與柵格列寬相適應(yīng)。一開始會(huì)覺得奇怪，因?yàn)槿绻涣?xí)慣使用網(wǎng)格，可能會(huì)把網(wǎng)格寬度當(dāng)成全部內(nèi)容區(qū)域，所以還需要給它設(shè)定一定的內(nèi)邊距。此時(shí)外邊距就起到了留白的作用，它們充當(dāng)了內(nèi)邊距。不要在網(wǎng)格內(nèi)部利用列寬當(dāng)成內(nèi)邊距，而是要與網(wǎng)格最外面保持對(duì)齊，利用網(wǎng)格外的間距來當(dāng)做留白區(qū)域。根據(jù)代碼實(shí)現(xiàn)方式，要么網(wǎng)格內(nèi)的內(nèi)容按比例縮放，邊距固定，要么外邊距與內(nèi)容同時(shí)縮放。
正確的內(nèi)容填充方式和不正確的把柵格當(dāng)做邊距
所以如果有人說“我需要一個(gè)1200px寬的設(shè)計(jì)”，這并不意味著你的設(shè)計(jì)就是1200px寬，這其實(shí)是說設(shè)計(jì)內(nèi)容寬度在1200px的畫布內(nèi)，實(shí)際內(nèi)容占位是960px，這樣就會(huì)有空間留出外邊距。
5. 完全出血的元素或紋理圖形應(yīng)該設(shè)計(jì)在畫板邊緣，并理解為出血的列網(wǎng)格
這個(gè)頁面布局的頂部圖片被設(shè)計(jì)成完全出血
這是一個(gè)例外的規(guī)則，當(dāng)背景顏色或者圖片在完全出血的情況下，開發(fā)同學(xué)會(huì)把它理解為一個(gè)全屏的內(nèi)容元素。
如果設(shè)計(jì)的是裝飾元素之類的內(nèi)容，可以接受它被裁切掉，此時(shí)也可以脫離柵格化的設(shè)計(jì)。
一些圖片和文字的出血設(shè)計(jì)
頁眉和頁腳有時(shí)也有例外，它們不被認(rèn)為是內(nèi)容的一部分。有些設(shè)計(jì)將它們固定在瀏覽器邊緣，有些則喜歡保持內(nèi)容的寬度，這取決于自身功能和內(nèi)容的情況。將它們保持在內(nèi)容寬度內(nèi)的好處是，當(dāng)用戶在寬屏顯示器上看頁面時(shí)，不需要來回掃視；將它們固定在瀏覽器上的好處是可以為導(dǎo)航元素提供更多的空間。
柵格化布局如何做到響應(yīng)式
圖片來源Intuit
在傳統(tǒng)的柵格化系統(tǒng)設(shè)計(jì)中，列的寬度和水槽的寬度是保持不變的，只是列的“數(shù)量”發(fā)生變化。為什么要這么處理呢？這是為了讓設(shè)計(jì)更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會(huì)顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調(diào)整，因?yàn)橐呀?jīng)知道它位于第四列上了。
在手機(jī)上，答案也很簡單，只需要一張卡片，其他的就會(huì)自動(dòng)堆到下面的行中。如果你愿意，也可以變得有創(chuàng)意，選擇只在手機(jī)上顯示一張卡片，或者做一個(gè)水平滾動(dòng)。這些列的自適應(yīng)對(duì)于代碼來說就是很簡單的參考。
實(shí)際上，web必須呈現(xiàn)任何瀏覽器的寬度。例如，有一個(gè)大顯示器，它可以看到1600像素寬的東西，實(shí)際上pc端的網(wǎng)頁設(shè)計(jì)是1200px寬，平板電腦上是768px寬，手機(jī)是360px寬。所以你會(huì)看到一個(gè)小于1200px的設(shè)計(jì)，有大量的留白。但是當(dāng)你的瀏覽器再小一個(gè)像素，1199px，會(huì)發(fā)生什么呢？
固定網(wǎng)格
固定柵格示意
如果開發(fā)那邊寫了一個(gè)固定柵格，當(dāng)你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時(shí)，你不會(huì)看到任何變化，設(shè)計(jì)就像是被剪掉了一樣。但當(dāng)達(dá)到768px臨界點(diǎn)時(shí)，設(shè)計(jì)馬上就會(huì)改變，平板電腦上的顯示效果就會(huì)好起來。如果繼續(xù)減小這個(gè)值，同樣的事情也會(huì)發(fā)生，在到達(dá)另一個(gè)臨界值之前，設(shè)計(jì)看起來都是不變的。
流動(dòng)網(wǎng)格
流動(dòng)網(wǎng)格的示例
現(xiàn)在來看看流動(dòng)網(wǎng)格的特點(diǎn)，當(dāng)窗口縮小時(shí)，內(nèi)容將動(dòng)態(tài)的發(fā)生變化，文本會(huì)進(jìn)行換行，元素也會(huì)變窄。然而，這些元素在內(nèi)容寬度縮小到下一個(gè)臨界值之前，布局是不會(huì)變化的。
所以我想說的是，設(shè)計(jì)的臨界值只是一個(gè)更改布局的參考點(diǎn)。這就是為什么列寬和水槽在網(wǎng)格中不會(huì)改變的原因，因?yàn)槲覀兿胱屧O(shè)計(jì)師在考慮布局時(shí)能夠更容易地創(chuàng)建一致性。
混合網(wǎng)格
在實(shí)際項(xiàng)目中，使用流動(dòng)網(wǎng)格和固定網(wǎng)格的組合也是常見的做法。網(wǎng)站通常是流動(dòng)網(wǎng)格，因?yàn)樗ミm應(yīng)各種不同終端的大小。
一些做的很酷的柵格系統(tǒng)
不需要太死板地去堅(jiān)持傳統(tǒng)柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設(shè)計(jì)中使用柵格系統(tǒng)做的很棒的設(shè)計(jì)靈感。
Invision’s Genome Project
可以看到，他們的設(shè)計(jì)故意不去使用任何的水槽，所以看起來是無縫的。
這個(gè)網(wǎng)站不僅設(shè)計(jì)的很好，他們還利用了在設(shè)計(jì)中展示他們自己的柵格系統(tǒng)來讓整體的設(shè)計(jì)變得更加酷炫。
Dropbox Design
他們沒有設(shè)計(jì)水槽和外邊距，相反，整個(gè)頁面被分成兩半，然后將內(nèi)容填充到這兩部分。
WordPress
WordPress創(chuàng)建賬號(hào)頁面
使用網(wǎng)格的方式取決于你自己。你可以在主要內(nèi)容部分使用網(wǎng)格，次要內(nèi)容則不使用。在Wordpress的例子中，頁面中間的部分使用柵格化設(shè)計(jì)，左側(cè)的側(cè)邊欄則沒有使用。
The Mockup Club
內(nèi)容和網(wǎng)格也并不總是從中間開始，對(duì)于模型網(wǎng)站，內(nèi)容在左邊也未嘗不可。
我非常確定的說，Instagram的PC端是用上了6列柵格布局。
要點(diǎn)總結(jié)
寫這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計(jì)中使用柵格系統(tǒng)。我知道對(duì)于我自己來說，我花了很多年的時(shí)間寫了大量的代碼來理解網(wǎng)格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個(gè)人都在關(guān)注它為什么重要，卻不去注重到底怎么在自己的項(xiàng)目中使用這些原則。
你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設(shè)計(jì)是如何對(duì)齊元素的，你將會(huì)開始看到這些模式。為了幫助理解，這里有一些設(shè)計(jì)系統(tǒng)概述了它們的網(wǎng)格使用：
Google’s Material Design System (https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins)
Intuit’s Design System (https://designsystem.quickbooks.com/foundations/responsive-column-grid/)
IBM’s Carbon Design System (https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals)
…And here’s huge list of other systems you can look through (https://designsystemsrepo.com/design-systems/)
在完全理解了網(wǎng)格的工作原理之后，我已經(jīng)成為了一名更好的設(shè)計(jì)師，因?yàn)槲抑牢业脑O(shè)計(jì)將如何在臨界值之間進(jìn)行轉(zhuǎn)換。我也可以落地我的設(shè)計(jì)，使它們能夠有一個(gè)完美的像素對(duì)齊。這樣的規(guī)范帶來了更一致，更簡潔的設(shè)計(jì)，當(dāng)用戶從一個(gè)界面到另一個(gè)界面流轉(zhuǎn)時(shí)，這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計(jì)中去應(yīng)用這些網(wǎng)格，并和開發(fā)一起，以相同的方式將它們落地，這將會(huì)是一個(gè)非常不錯(cuò)的進(jìn)步。
作者：Christie Tang
譯者：彩云Sky
原文：https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01
]]>
WingST（寇敬），男，33歲，騰訊高級(jí)交互設(shè)計(jì)師、騰訊學(xué)院認(rèn)證講師，9年工作經(jīng)驗(yàn)的資深互聯(lián)網(wǎng)人，曾任 MIG 桌面安全產(chǎn)品部 軒轅設(shè)計(jì)組組長，目前在騰訊游戲 NEXT Studios 工作室負(fù)責(zé)《樂高無限》創(chuàng)造型沙盒游戲的用戶體驗(yàn)設(shè)計(jì)。負(fù)責(zé)過的產(chǎn)品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網(wǎng)游助手等。曾在OPPO手機(jī)、金蝶軟件等企業(yè)工作，有著PC、Web、移動(dòng)端等多平臺(tái)的豐富設(shè)計(jì)經(jīng)驗(yàn)。
相信很多人都跟我一樣，非常喜歡蘋果的設(shè)計(jì)理念以及軟硬件環(huán)境，我自己就在用著MacBook、iMac、Apple Watch和iPhone X，以及macOS上的非常多軟件。
今天就來講講蘋果的設(shè)計(jì)理念，先來看看這部真正打動(dòng)我的手機(jī)。
蘋果的首席設(shè)計(jì)師 喬納森·艾弗（Jonathan Ive） 在介紹iPhone X的時(shí)候說：
十多年以來，我們都希望能打造一個(gè)擁有整面屏幕的iPhone。它能讓你在使用的時(shí)候完全沉浸其中，忘記了它的存在。
這里的“忘記了它的存在”英文原文是“Disappear”，也就是“消失”，我覺得這兩個(gè)字很好地闡釋了蘋果的設(shè)計(jì)理念。
iPhone X最有特色的兩個(gè)亮點(diǎn)是什么？
1.全面屏
去掉了底部經(jīng)典的Home鍵，正面的屏幕占比超過90%以上，和所有的邊框都等間距，甚至連四角的圓弧部分也覆蓋到了，只有最頂部有個(gè)“劉海”；
2.Face ID（面部解鎖）
在頂部的“劉海”里布滿了紅外鏡頭、泛光感應(yīng)元件、環(huán)境光傳感器和點(diǎn)陣投影器等等一系列裝置，通過它們，iPhone X會(huì)在你的臉上投射超過3萬個(gè)肉眼不可見的光點(diǎn)，然后繪制出一個(gè)專屬于你的3D面部圖，在需要解鎖的時(shí)候，它會(huì)通過紅外線掃描，將你的面部和之前存儲(chǔ)的數(shù)據(jù)進(jìn)行對(duì)比，從而做到正確而快速地解鎖。
這兩點(diǎn)，恰恰就是用來讓iPhone X“消失”的。
想想看，任何時(shí)候當(dāng)你拿起手機(jī)時(shí)，它就會(huì)自動(dòng)點(diǎn)亮，識(shí)別你的面部，然后自動(dòng)解鎖，顯示出上面原本隱藏的信息，這時(shí)你順手輕輕一劃就能開始使用它。
這個(gè)過程是不是很流暢？
我相信，等到這個(gè)功能進(jìn)一步改進(jìn)，總有一天手機(jī)能做到你拿起就用，完全沒有任何所謂的“解鎖”，是你的就是你的，別人用不了，而對(duì)你來說，它就和你身體的一部分一樣使用自如。
這個(gè)設(shè)計(jì)的簡便之處在于，所有人都不需要教，只要拿起就用誰不會(huì)？
他們希望“解鎖”這個(gè)概念從人們腦海中“消失”。
相比之下，曾經(jīng)的Touch ID（指紋解鎖）是不是弱爆了？你拿起iPhone 6的時(shí)候還要“有意識(shí)”地把右手大拇指放在Home鍵上讓它識(shí)別，等到識(shí)別成功之后再按下去才能進(jìn)入主界面，這種感覺并不是我們真正想要的，也不是蘋果想要的。
就算為此需要給頂部留下一個(gè)難看的“劉海”也在所不惜。
并不是蘋果的設(shè)計(jì)師不知道這樣做不好看，他們?yōu)榱俗龅饺嫫辽踔翣奚怂姓娴目臻g，甚至用了新的柔性O(shè)LED也要覆蓋到所有的角落，如果有辦法去掉這個(gè)“劉海”，他們?cè)趺磿?huì)不做呢？
說到全面屏手機(jī)，不妨來對(duì)比下。
發(fā)現(xiàn)沒有？這么多家里只有iPhone X做到了屏幕和所有邊框等間距這一點(diǎn)，其他家都有一個(gè)很明顯的“下巴”，甚至頂部還有一些更明顯的東西。
想象一下，當(dāng)你站在大街上，打開iPhone X的手機(jī)攝像頭，幾乎無邊框的屏幕上映出了眼前的街道，這時(shí)路面上出現(xiàn)了一個(gè)用AR（增強(qiáng)現(xiàn)實(shí)）技術(shù)生成的、栩栩如生的大象，你會(huì)不會(huì)感覺到虛擬和現(xiàn)實(shí)已經(jīng)融為一體了？
這時(shí)，手機(jī)從你的眼前消失了，只剩下一個(gè)觀察世界的新窗口。
說起這種關(guān)于“消失”的設(shè)計(jì)哲學(xué)，我想無印良品的設(shè)計(jì)師深澤直人一定有話說。
這個(gè)壁掛式CD機(jī)就是他“無意識(shí)”設(shè)計(jì)這一理念的最好體現(xiàn)。
什么叫做“無意識(shí)”設(shè)計(jì)？
只要是年紀(jì)稍微大一點(diǎn)的人，一看到這個(gè)掛在墻上、垂下一根帶著拉手的線的CD機(jī)，馬上就會(huì)想到以前的臺(tái)燈、電風(fēng)扇等等，都是靠拉線進(jìn)行開關(guān)的，所以他就會(huì)很自然地去拉這根線。
于是音樂響起，就和臺(tái)燈照亮了房間一樣，這份旋律也充滿了整個(gè)房間。
整個(gè)過程中，是習(xí)慣在產(chǎn)生作用，似乎沒有讓人感覺到有設(shè)計(jì)的存在。
這就是“無意識(shí)”設(shè)計(jì)，用戶不用想太多就能自然地使用產(chǎn)品，和蘋果正在使用的設(shè)計(jì)理念很像。
這個(gè)CD機(jī)的拉手如是，iPhone X的面部解鎖也如是。
這樣的產(chǎn)品還有嗎？
當(dāng)然還有，而且曾經(jīng)我們很多人都還嘲笑過。
對(duì)，就是這對(duì)“甩頭就丟”的蘋果無線耳機(jī)——AirPods。
它讓什么消失了？
從耳機(jī)盒中拿起，戴到耳朵上，耳機(jī)就自動(dòng)連上了，不需要開關(guān)，不需要點(diǎn)擊連接；
當(dāng)你拿下一邊的耳機(jī)時(shí)，音樂會(huì)自動(dòng)暫停，不需要點(diǎn)擊；
當(dāng)你再戴回去的時(shí)候，音樂又繼續(xù)播放了，自然而然；
你不想聽了，把兩個(gè)耳機(jī)拿下來，手機(jī)上的音樂自然停止，耳機(jī)斷開并待機(jī)。
發(fā)現(xiàn)沒有，整個(gè)過程中，你所做的一切動(dòng)作都是自然而然的，你并沒有按耳機(jī)上任何一個(gè)按鍵（它也沒有實(shí)體按鍵），所有的操作都是它自動(dòng)幫你完成的。
它讓那些“有意識(shí)”的控制操作消失了，剩下的只是你應(yīng)該做的動(dòng)作。
這不是“少即是多”，也不是“如無必要，勿增實(shí)體”那么簡單。
我覺得蘋果自己說的“Disappear（消失）”已經(jīng)很貼切了，所以就叫它“消失”式的設(shè)計(jì)哲學(xué)吧。
所以盡管當(dāng)初我們吐槽iPhone X貴上天，吐槽AirPods容易丟，我們還是都買了，而且越來越多。
因?yàn)樗鼈儞糁辛宋覀兊奶煨?mdash;—懶惰，哦不，方便。
還有什么產(chǎn)品讓你感覺到了“消失”？
原文鏈接：https://uxren.cn/?p=62511
]]>
前言
“信息無障礙”譯自“Accessibility”，指的是任何人在任何情況下都能平等、方便、無障礙地獲取信息并利用信息。以互聯(lián)網(wǎng)環(huán)境為例，互聯(lián)網(wǎng)產(chǎn)品可以被老年人、視障者、聽障者、讀寫障礙人士等用戶順利使用。
近年來，隨著互聯(lián)網(wǎng)的快速發(fā)展，很多人已經(jīng)開始廣泛使用電子政務(wù)，政府也越來越多地以在線方式向大家提供信息和服務(wù)。據(jù)國家統(tǒng)計(jì)局和殘疾人聯(lián)合會(huì)數(shù)據(jù)顯示，我國 65 歲及以上的老年人有1.4 億，殘疾人士有 8502 萬，分別人數(shù)為：視力殘疾 1263 萬人；聽力殘疾 2054 萬人；言語殘疾130 萬人；肢體殘疾 2472 萬人；智力殘疾 568 萬人；精神殘疾 629 萬人；多重殘疾 1386 萬人。目前我國 31 個(gè)省、276 個(gè)地市、1197 個(gè)縣級(jí)的殘聯(lián)都開通了網(wǎng)站，積極推動(dòng)殘疾人證智能化工作，發(fā)展“互聯(lián)網(wǎng)+殘疾人服務(wù)”。為了讓殘障人士能無障礙地使用電子政務(wù)，給他們提供更便捷、高效的服務(wù)，政務(wù)網(wǎng)站的無障礙建設(shè)尤其重要。網(wǎng)站構(gòu)建的所有內(nèi)容都應(yīng)該盡可能具有包容性，易讀性和可讀性，為每一個(gè)人設(shè)計(jì)，為每一個(gè)人服務(wù)。
殘障人士分析
信息無障礙涉及廣泛的殘疾類別，包括視覺、聽覺、身體、語言、認(rèn)知、語言、學(xué)習(xí)以及神經(jīng)殘疾。我們可能無法滿足所有類型、程度和多重殘疾人群的需要，但可以占比基數(shù)較多的特殊人群開始分析研究。
- 視障人士：1.低視力，由于各種原因?qū)е码p眼視力障礙或視野縮小，難能做到一般人所能從事的工作、學(xué)習(xí)或活動(dòng)；2.色盲，分為全色盲和部分色盲（紅色盲、綠色盲、藍(lán)黃色盲等），不能分辨各種顏色或某種顏色；3.色弱，包括全色弱和部分色弱（紅色弱、綠色弱、藍(lán)黃色弱等），能看到顏色，但辨認(rèn)顏色的能力遲緩或很差；4.失明人士，眼睛患有疾病或受到意外傷害而導(dǎo)致雙目失明。
- 聽障人士：雙耳聽力喪失或聽覺障礙，聽不到或聽不清周圍環(huán)境的聲音，包括全聾、重聽、聽力弱化等人士。
- 運(yùn)動(dòng)障礙人士：這里主要指手部不靈活或需要使用輔助設(shè)施的人士，也包括在某些環(huán)境下，不能正常通過手部操作的人士。
- 讀寫障礙人士：一種最常見的特殊學(xué)習(xí)困難，閱讀方面會(huì)跳字漏行、增字、替換字、倒反念，或無法理解閱讀內(nèi)容混淆相似字。
- 老年人：會(huì)出現(xiàn)身體機(jī)能下降、記憶力減退、視力下降等特征。
一個(gè)網(wǎng)站如果全站做到信息無障礙需要花費(fèi)很多時(shí)間，進(jìn)行很多研究和用戶測(cè)試才可以完成，但我們可以分階段逐步去推進(jìn)改造，例如先從整個(gè)網(wǎng)站的顏色對(duì)比度開始入手，解決低視力人士的問題。
1. 為低視力人士設(shè)計(jì)
使用良好的顏色對(duì)比度
確保顏色對(duì)比度符合 WCAG 2.0（內(nèi)容無障礙指南）標(biāo)準(zhǔn)，是信息無障礙中非常重要的一步。如果我們?cè)谠O(shè)計(jì)當(dāng)中做到這一點(diǎn)，也可以保障低視力人士能更好地獲取信息。
根據(jù) WCAG 2.0 的標(biāo)準(zhǔn)：
- 對(duì)比度（AA 級(jí)）: 文本的視覺呈現(xiàn)以及文本圖像至少要有 4.5:1 的對(duì)比度；
- 大文本: 大號(hào)文本（字重為 Bold 時(shí)大于 18px，字重為 Regular 時(shí)大于 24px ）以及大文本圖像至少有 3:1 的對(duì)比度；
- 對(duì)比度（AAA 級(jí)）: 文本視覺呈現(xiàn)以及文本圖像至少有 7:1 的對(duì)比度；
- 大文本: 大號(hào)文本（字重為 Bold 時(shí)大于 18px，字重為 Regular 時(shí)大于 24px ）以及大文本圖像至少有 4.5:1 的對(duì)比度。
在附屬內(nèi)容中，未激活的界面組件、純粹的裝飾、文本作為標(biāo)志或品牌名稱的一部分，這些情況都沒有最低對(duì)比度限制。
WebAIM 可以幫助我們測(cè)試對(duì)比度，并且可以在線調(diào)整符合標(biāo)準(zhǔn)的顏色
Contrast Grid 可以測(cè)試多個(gè)顏色組合是否符合 WCAG 2.0 的對(duì)比度標(biāo)準(zhǔn)
使用 Contrast Grid 測(cè)試了兩個(gè)國內(nèi)省級(jí)政務(wù)服務(wù) 網(wǎng)站的顏色，發(fā)現(xiàn)基本上只有主要文字和次要文字的顏色能達(dá)到標(biāo)準(zhǔn)，用于網(wǎng)站上大面積的品牌藍(lán)色（鏈接色）在大于 18px 字號(hào)下才符合對(duì)比度要求。
英國政府網(wǎng)是目前全球數(shù)字政府中做的最好的政務(wù)網(wǎng)站，在英國，政務(wù)服務(wù)是所有服務(wù)里面使用時(shí)間最久、提供量最大的服務(wù)。他們網(wǎng)站設(shè)計(jì)也很注重信息無障礙，在這方面付出了很大的努力。
檢測(cè)后發(fā)現(xiàn)英國政府網(wǎng)使用的顏色都有足夠高的對(duì)比度，滿足了 WCAG 2.0 的標(biāo)準(zhǔn)，而且整體顏色都使用了偏低飽和度和明度的顏色。加強(qiáng)顏色的對(duì)比度，不只是為了讓低視力人士能更好地使用我們的產(chǎn)品，同時(shí)也可以讓使用較差顯示設(shè)備的用戶、老年人有更好的產(chǎn)品體驗(yàn)。
2. 為色盲色弱人士設(shè)計(jì)
避免僅使用顏色傳遞信息
顏色在設(shè)計(jì)中起著重要作用，能喚起情感，感受和想法，并且可以幫助增強(qiáng)品牌的信息和感知。然而，當(dāng)用戶無法看到它們或以不同方式感知它們時(shí)，顏色的作用就會(huì)消失。對(duì)于無法辨別顏色的色盲色弱人士，如果只用顏色作為傳達(dá)信息，提示信息重要性或區(qū)分視覺元素的唯一途徑，他們是很難感知的。
Stark（Sketch插件）可以模擬不同類型的色盲色弱人士所看到的效果，來幫助我們?cè)O(shè)計(jì)
某個(gè)政務(wù)網(wǎng)站上的注冊(cè)表單，在沒有填寫任何信息的情況下點(diǎn)擊注冊(cè)按鈕，必填項(xiàng)出現(xiàn)的錯(cuò)誤提示是在下方用了紅色的文字，這種方式對(duì)于普通用戶來說是可以感知的。右側(cè)圖則是模擬紅綠色盲人士看到的效果，這種情況下，錯(cuò)誤提示的引導(dǎo)性就會(huì)降低很多。
英國政府網(wǎng)的錯(cuò)誤提示對(duì)于色盲色弱人士就友好很多，除了紅色的提示文字外，輸入框的邊框還會(huì)加粗處理，并且加上豎線提示對(duì)應(yīng)沒填寫的表單項(xiàng)，提醒用戶注意。除此之外，其實(shí)還有很多視覺處理的方法來達(dá)到傳遞信息的目的，例如在輸入框內(nèi)或者提示文字前加上感嘆號(hào)的圖標(biāo)，這種方式對(duì)于普通用戶來說，也會(huì)有更明確的提示。
3. 為失明人士設(shè)計(jì)
支持鍵盤導(dǎo)航
網(wǎng)站支持鍵盤導(dǎo)航是無障礙很最關(guān)鍵的一個(gè)方面，無障礙指南中提到要使所有功能都能通過鍵盤來操作，對(duì)于依賴于屏幕閱讀器的失明人士和沒有精確肌肉控制的人士，都需要使用鍵盤來導(dǎo)航內(nèi)容。
當(dāng)你瀏覽網(wǎng)站時(shí)，整個(gè)頁面導(dǎo)航順序應(yīng)該是有邏輯，可預(yù)測(cè)和直觀的。選項(xiàng)的順序應(yīng)該遵循規(guī)則：從左到右，從上到下，由頂部導(dǎo)航到內(nèi)容內(nèi)容區(qū)，最后是頁腳。
我們可以嘗試只用鍵盤操作來測(cè)試網(wǎng)站，使用 Tab 鍵移動(dòng)焦點(diǎn)，用 Enter 鍵選擇元素。測(cè)試所有的交互元素是否可預(yù)測(cè)且有序。如果可以在沒有鼠標(biāo)的情況下瀏覽整個(gè)網(wǎng)站的所有內(nèi)容，證明這個(gè)網(wǎng)站已經(jīng)滿足了支持鍵盤導(dǎo)航的基本要求。
下圖是國內(nèi)某個(gè)政務(wù)網(wǎng)站首頁的導(dǎo)航區(qū)，標(biāo)注的數(shù)字是獲取焦點(diǎn)的順序，在用鍵盤導(dǎo)航的過程中，整個(gè)頁面導(dǎo)航順序都比較混亂，某些元素也無法通過鍵盤來獲取。
相反，英國政府網(wǎng)和澳大利亞政府網(wǎng)首頁的導(dǎo)航邏輯就會(huì)比較清晰，整個(gè)網(wǎng)站遵循從左到右，從上到下的原則，每個(gè)交互元素都可以通過鍵盤來獲取，讓用戶感知到整個(gè)網(wǎng)站的布局，確定每個(gè)內(nèi)容的位置。
用戶通過 Tab 鍵導(dǎo)航網(wǎng)站交互元素時(shí)，焦點(diǎn)就是提供了當(dāng)前所選組件的可視化指示，焦點(diǎn)可幫助用戶了解界面上哪些元素有鍵盤焦點(diǎn)，并幫助他們了解導(dǎo)航網(wǎng)站時(shí)的位置。很多網(wǎng)站都是用了瀏覽器默認(rèn)的焦點(diǎn)樣式，但我們也可以根據(jù)內(nèi)容設(shè)計(jì)出符合網(wǎng)站風(fēng)格，與品牌相呼應(yīng)的焦點(diǎn)樣式。
英國政府網(wǎng)就是重新設(shè)計(jì)了焦點(diǎn)樣式，使用黃色來突出焦點(diǎn)，讓用戶更明確當(dāng)前焦點(diǎn)所在位置。根據(jù)不同的元素，樣式也會(huì)有所變化。
蘋果官網(wǎng)的焦點(diǎn)樣式也進(jìn)行了重新設(shè)計(jì)，在圓角輸入框上焦點(diǎn)也做了相應(yīng)的調(diào)整，使焦點(diǎn)和頁面元素更為融合。
為非文本內(nèi)容添加替代文本
視障人士經(jīng)常會(huì)利用屏幕閱讀器來“聆聽”我們的網(wǎng)站，網(wǎng)站上的文字、圖片、組件等信息都是通過屏幕閱讀器說出來。這時(shí)候如何為這些非文本內(nèi)容添加描述準(zhǔn)確的輔助替代文本就非常重要。
以下圖為例，左圖搜索框按鈕的替代文本為“按鈕”，這種描述就會(huì)很抽象，增加了視障人士的理解門檻，容易讓他們產(chǎn)生一個(gè)疑問：這是一個(gè)什么作用的按鈕？相對(duì)來說，右圖的處理則清晰很多，按鈕的替代文本很明確地告訴用戶這是一個(gè)搜索按鈕。
圖片很多時(shí)候在設(shè)計(jì)中用于傳達(dá)特定的感覺和渲染氛圍，如果需要通過用替代本文來傳達(dá)圖片信息的時(shí)候，我們可以嘗試用簡練的語言去描述圖片內(nèi)容，讓視障人士能快速獲取信息，在腦海里形成畫面，而不只是告訴他們這是一張圖片。
如果我們沒有對(duì)圖片添加替代文本，屏幕閱讀器就會(huì)直接把一串字符的文件名字讀出來。嘗試打開屏幕閱讀器，閉上眼睛去“聽”這種圖片，是一種非常難受的體驗(yàn)。
除此之外，英國政府網(wǎng)還有很多細(xì)節(jié)的處理值得學(xué)習(xí)。他們添加的標(biāo)簽描述都很清晰，焦點(diǎn)切換到列表的第一項(xiàng)時(shí)會(huì)告訴用戶這個(gè)列表總共有多少個(gè)項(xiàng)目，下拉菜單目前是一個(gè)怎樣的狀態(tài)，讓視障人士對(duì)于整個(gè)網(wǎng)站有一個(gè)布局感受，同時(shí)也大大提高了他們安全感。
提供多種驗(yàn)證碼方式
賬號(hào)注冊(cè)是用戶開始業(yè)務(wù)辦理的第一步，可是往往這一步就給了視障人士一個(gè)很大阻力。目前很多政務(wù)服務(wù)網(wǎng)注冊(cè)流程的驗(yàn)證方式都只提供圖形驗(yàn)證碼，但屏幕閱讀器是無法識(shí)別驗(yàn)證碼中的文本信息。如果注冊(cè)流程都有障礙的話，其他業(yè)務(wù)辦理即使有做無障礙改造，對(duì)視障人士來說都是沒有意義的。我們除了圖形驗(yàn)證碼之外，還應(yīng)該提供多種驗(yàn)證方式讓用戶選擇，如手機(jī)驗(yàn)證碼、語音驗(yàn)證碼等。
蘋果網(wǎng)站的注冊(cè)流程中，驗(yàn)證方式除了提供圖形驗(yàn)證碼之外，還會(huì)提供語音驗(yàn)證碼。
快速訪問內(nèi)容
對(duì)于只使用鍵盤導(dǎo)航的用戶來說，在熟悉網(wǎng)站后，他們是希望直接訪問頁面內(nèi)容的。但是很多網(wǎng)站的頂部導(dǎo)航存在多個(gè)菜單，在用戶獲取頁面內(nèi)容之前，他們需要逐個(gè)切換鏈接才可以去到頁面內(nèi)容部分，打開一個(gè)新的頁面，又是重復(fù)這樣的步驟。
面對(duì)這樣的問題，我們可以提供更友好的解決方案。當(dāng)用戶開始使用鍵盤導(dǎo)航頁面時(shí)，提供一個(gè)“跳至內(nèi)容”的鏈接，直接跳過每個(gè)頁面重復(fù)的內(nèi)容，提高視障人士或者鍵盤使用者的操作效率。
在使用鍵盤導(dǎo)航時(shí)，F(xiàn)acebook 還提供了頁面內(nèi)模塊和其他頁面的導(dǎo)航菜單，讓用戶可以更快速地跳到指定的內(nèi)容上，使用起來更高效。
4. 為聽力障礙人士設(shè)計(jì)
為視頻添加字幕
網(wǎng)站上的視頻都應(yīng)盡可能配上字幕，讓聽障人士可以結(jié)合視頻畫面理解內(nèi)容。在政務(wù)網(wǎng)站上，為辦事指南的視頻教程里添加字幕，也有助于聽障人士更好地獲取信息，更容易完成辦事流程。除此之外，我們也可以提供詳細(xì)的圖文指南讓用戶選擇。
5. 為運(yùn)動(dòng)障礙人士設(shè)計(jì)
支持鍵盤導(dǎo)航
部分運(yùn)動(dòng)障礙人士如果無法控制鼠標(biāo)，其實(shí)也是需要使用鍵盤來導(dǎo)航網(wǎng)站的，網(wǎng)站支持鍵盤導(dǎo)航不只是為了盲人用戶而設(shè)定，對(duì)于其他的殘障人士也是非常重要。
交互元素易于點(diǎn)擊
在設(shè)計(jì)控件時(shí)，也應(yīng)該更加關(guān)注運(yùn)動(dòng)障礙人士和老年用戶的使用體驗(yàn)，適當(dāng)增加可點(diǎn)擊的目標(biāo)區(qū)域，讓按鈕、菜單選項(xiàng)和鏈接足夠大，以便他們更容易操作。
6. 為讀寫障礙人士設(shè)計(jì)
圖形、圖片和文字結(jié)合的排版
由于讀寫障礙人士對(duì)文字閱讀有一定的難度，閱讀方面會(huì)出現(xiàn)跳字漏行、增字等情況。網(wǎng)站上應(yīng)盡量減少同一位置上出現(xiàn)大篇幅的文字，WCAG2.0 中也提到的單行寬度不超過 40 個(gè)中文字符或符號(hào)，保持簡練的文字表達(dá)和清晰的內(nèi)容，通過使用標(biāo)題、圖片和列表來分解內(nèi)容，緩解他們的閱讀壓力，以便為用戶提供心理休息和提高內(nèi)容的可讀性。
保持一致性的對(duì)齊方式
整個(gè)網(wǎng)站都盡可能保持統(tǒng)一的對(duì)齊方式，英國政務(wù)網(wǎng)的每個(gè)模塊的內(nèi)容都采用左對(duì)齊的方式，遵循用戶從左到右瀏覽習(xí)慣，讓其更自然和高效。本來讀寫障礙人士對(duì)于閱讀就有障礙，如果出現(xiàn)多種對(duì)齊方式，則會(huì)讓他們更加眼花繚亂。
7. 為老年人設(shè)計(jì)
使用較大的字號(hào)
為了確保老年人用戶能清晰瀏覽網(wǎng)站，而且考慮到并不是每個(gè)用戶都使用高分辨率的顯示設(shè)備，大字號(hào)的界面對(duì)于他們來說是很重要的。同時(shí)，我們還需要避免出現(xiàn)擁擠的大段文字，盡量把信息進(jìn)行合理的分解，增加留白空間，通過排版組合讓用戶更清晰明確地獲取信息。
英國政務(wù)網(wǎng)的文字體系里，整理都選用了較大的字號(hào)，最小的正文也使用到 19px字號(hào)。
考慮到用戶對(duì)于字號(hào)大小顯示的不同需求，香港政府網(wǎng)的頂部導(dǎo)航還提供了字形大小的入口，指引用戶在不同瀏覽器下如何設(shè)置字號(hào)大小，讓他們可以設(shè)置最適合自己閱讀的顯示效果。
減少手動(dòng)輸入
很多老年人達(dá)到了一定年齡，身體機(jī)能和記憶力會(huì)開始逐漸衰退，這使得他們操作網(wǎng)站界面變得更加困難，拼寫輸入就是其中一個(gè)很大障礙，我們應(yīng)該盡量減少讓用戶手動(dòng)拼寫輸入。在業(yè)務(wù)辦理流程中，對(duì)于填寫個(gè)人信息部分，可以優(yōu)先從賬號(hào)信息中拉取相關(guān)內(nèi)容，其他信息補(bǔ)充部分，能提供選擇項(xiàng)的內(nèi)容都盡可能使用選擇控件。
瀏覽路徑簡單明確
為了老年人能更好地瀏覽網(wǎng)站內(nèi)容，應(yīng)該保持頁面清晰的布局和模塊劃分，為他們提供一個(gè)簡單明確的視覺動(dòng)線，讓整個(gè)網(wǎng)站的內(nèi)容都是是直觀和易于理解。
小結(jié)
根據(jù)不同類型的用戶群體，我們應(yīng)該思考如何為他們?cè)O(shè)計(jì)和提供更高效的服務(wù)，讓所有人都能平等、方便、無障礙地獲取信息。
為視障人士設(shè)計(jì)
- 使用良好的顏色對(duì)比度
- 使用適合閱讀的字號(hào)
- 使用顏色、圖形和文字結(jié)合的方式傳達(dá)信息
- 支持鍵盤導(dǎo)航
- 為非文本內(nèi)容添加替代文本
為聽障人士設(shè)計(jì)
- 為視頻添加字幕
- 用標(biāo)題、圖片、列表等方式分解內(nèi)容
- 保持內(nèi)容清晰簡潔
- 有邏輯的版面布局
為運(yùn)動(dòng)障礙人士設(shè)計(jì)
- 支持鍵盤導(dǎo)航
- 交互元素易于點(diǎn)擊
為讀寫障礙人士設(shè)計(jì)
- 使用圖形、圖片和文字結(jié)合的排版
- 保持一致性的對(duì)齊方式
- 保持內(nèi)容清晰簡潔
為老年人設(shè)計(jì)
- 使用較大的字號(hào)
- 瀏覽路徑簡單明確
- 減少手動(dòng)輸入
- 交互元素易于點(diǎn)擊
無障礙設(shè)計(jì)并不意味著會(huì)讓網(wǎng)站變得不好看，相反，它會(huì)在我們思考的過程中融入一些條件限制。在這些條件限制中去探索如何讓我們的設(shè)計(jì)能適用于所有用戶，為每一個(gè)人設(shè)計(jì)，為每一個(gè)人提供更好的政務(wù)服務(wù)。
參考文獻(xiàn)
《Designing accessible products》 Adhithya
《Accessible Interface Design》 Nick Babich
《Designing for accessibility is not that hard》 Smashing Magazine
《Designing For Accessibility And Inclusion》 Pablo Stanley
《How to make accessibility easier for service teams》 Angela Collins Rees
《7 Things Every Designer Needs to Know about Accessibility》 Jesse Hausler
《Web 內(nèi)容無障礙指南 (WCAG) 2.0》
感謝你的閱讀，本文出自 Tencent CDC，轉(zhuǎn)載時(shí)請(qǐng)注明出處，謝謝合作。
格式為：Tencent CDC（http://cdc.tencent.com/2018/08/13/【to-g設(shè)計(jì)賦能】政務(wù)網(wǎng)站信息無障礙設(shè)計(jì)-研究篇/）
]]>
在用戶體驗(yàn)設(shè)計(jì)中，app動(dòng)畫呈現(xiàn)了無限的創(chuàng)造可能性，同時(shí)也是目前引起熱議的設(shè)計(jì)趨勢(shì)。在今天的文章中，我們將討論在app設(shè)計(jì)中如何使用動(dòng)畫來獲得積極的用戶體驗(yàn)和流暢的交互操作。
因?yàn)樗袞|西都被整合到一個(gè)頁面，app動(dòng)畫必須是功能型元素而不是裝飾性元素。動(dòng)效元素應(yīng)該在策劃用戶旅程初期就考慮。設(shè)計(jì)動(dòng)畫時(shí)，你需要分析它們?cè)诳捎眯院涂善谕陨系挠绊?mdash;—如果你看不到積極的影響，就要重新考慮下。在交互過程中，動(dòng)效的優(yōu)點(diǎn)和效用必須是顯而易見的，并且要超過可能出現(xiàn)的缺陷。好的UI動(dòng)畫可以達(dá)到錦上添花的作用。讓我們回顧一下能增強(qiáng)用戶界面體驗(yàn)的最流行的幾種動(dòng)畫類型。
反饋型動(dòng)畫
反饋型動(dòng)畫告訴用戶特定的操作是成功了還是失敗了。即使在最基本的操作中，這種動(dòng)畫也能保持用戶和app之間的交流。某種程度上，它能在物理世界引發(fā)和真實(shí)物體之間的互動(dòng)。比如，當(dāng)你按一個(gè)真的按鈕時(shí)，你能感受到這個(gè)動(dòng)作的力度和按鈕的阻力。在移動(dòng)設(shè)備上，這種情況是不可能的：你只是點(diǎn)擊屏幕，但是卻沒有相應(yīng)的反饋。這就是為什么在與傳感器屏幕交互時(shí)，我們通過震動(dòng)和視覺符號(hào)來獲得反饋。這是UI動(dòng)畫拯救游戲的時(shí)代。如果動(dòng)作完成，動(dòng)畫按鈕、切換、開關(guān)、滴答或交叉符號(hào)會(huì)迅速通知用戶。
比如，這是cinema app買票的交互流程。從放映頁面到選擇座位的過渡，是通過電影海報(bào)動(dòng)畫完成的，屏幕變成了電影大廳的樣子。按下所需的座位，用戶可以看到按鈕顏色的變化，理解系統(tǒng)并獲取數(shù)據(jù)。打鉤的動(dòng)畫標(biāo)志著任務(wù)的結(jié)束。
另一個(gè)例子可以在澆水跟蹤app的交互中看到：澆水后，用戶按下按鈕，圖像從水滴形狀變成打鉤符號(hào)，表示所需操作已經(jīng)完成。
即使是基本的導(dǎo)航，移動(dòng)動(dòng)畫添加的可能不僅僅是反饋，還可增加樂趣。反思這個(gè)可擴(kuò)展按鈕的概念：通過少量運(yùn)動(dòng)，它模仿了像果凍這種物質(zhì)的物理特性。
進(jìn)行中的動(dòng)畫
如果交互的過程稍長，用戶必須等待，他們更愿意了解發(fā)生了什么，以及進(jìn)展如何。這種動(dòng)態(tài)交互的最大優(yōu)點(diǎn)是為用戶提供了保證，使他們?cè)谑褂卯a(chǎn)品的過程中能夠感知并且保持信心。一個(gè)自信的用戶意味著積極的用戶體驗(yàn)，并為留住高水平用戶提供了良好的基礎(chǔ)。進(jìn)度條、時(shí)間線和其他動(dòng)態(tài)元素的動(dòng)畫可以起到一箭雙雕的作用：
– 告訴用戶目前的進(jìn)度。
– 提供娛樂性元素，減少等待中的負(fù)面情緒。
– 優(yōu)雅原創(chuàng)的設(shè)計(jì)可能成為現(xiàn)象級(jí)功能，用戶將愿意與他人分享，并吸引更多用戶參與其中。
下面，你會(huì)看到一個(gè)時(shí)間軸app：等待的時(shí)間是由從白天到黑夜的過渡插畫來支持的，數(shù)字顯示的是等待的時(shí)長。
加載動(dòng)畫
這是移動(dòng)端使用最多的動(dòng)畫。它可以被認(rèn)為是進(jìn)度動(dòng)畫的子動(dòng)畫，因?yàn)樗嬖V用戶加載過程是活動(dòng)的。加載動(dòng)畫有不同的變體，如加載，預(yù)加載、下拉刷新。
這是Slumber app對(duì)下拉刷新的運(yùn)用：拉下新一集，用戶等待時(shí)會(huì)看到加載小菊花的微動(dòng)畫，表示正在刷新過程中。而動(dòng)效插畫使用戶在等待過程中也不至于太無聊。
吸引注意動(dòng)畫
這種動(dòng)畫在用戶與你的app交互時(shí)起著用戶體驗(yàn)可供性作用，它支持一般的視覺層次，通過動(dòng)作捕捉用戶的注意力，并將其導(dǎo)向必要的細(xì)節(jié)處。這樣可以節(jié)省掃描整個(gè)屏幕的寶貴時(shí)間，使導(dǎo)航更加清晰直觀。
這一組美味漢堡app的互動(dòng)動(dòng)畫功能是，改變價(jià)格。它給這個(gè)過程增加了生氣，使它變得自然。而且通過移動(dòng)，它會(huì)立刻吸引用戶的眼球，以這種方式提供一個(gè)提示信息。
過渡動(dòng)畫
過渡的動(dòng)畫在交互過程中，從一個(gè)屏幕到另一個(gè)屏幕，給APP增添了個(gè)性，使其變得優(yōu)雅。
這是完美菜譜app的過渡動(dòng)畫：用戶可以自定義他們的菜單，根據(jù)他們的目標(biāo)和飲食限制?；瑒?dòng)的目標(biāo)卡之間的轉(zhuǎn)換，給用戶積極的體驗(yàn)。
是的，這不僅僅是美觀的問題。在我們最近的文章《關(guān)于移動(dòng)應(yīng)用程序的概念性UI動(dòng)畫》中，我們展示了一些例子，說明了過渡動(dòng)畫如何在元素之間添加更多空間的錯(cuò)覺，從而使布局變得透氣、明亮，如下所示：
當(dāng)用戶從餅狀圖到列表視圖，保存和標(biāo)記顏色時(shí)，這里還有一個(gè)關(guān)于轉(zhuǎn)換過程創(chuàng)造性動(dòng)畫的例子:動(dòng)畫使屏幕與數(shù)據(jù)可視化之間的連接緊密相連，讓用戶看到這一聯(lián)系。
營銷型動(dòng)畫
品牌與UI設(shè)計(jì)的巧妙結(jié)合對(duì)提高品牌認(rèn)知度有重要作用。在大多數(shù)情況下，它是動(dòng)態(tài)的logo、吉祥物類似的，通常被有效地應(yīng)用于啟動(dòng)頁。APP的營銷動(dòng)畫通常集中于吸引人們注意品牌標(biāo)志。這是我們?yōu)閃hizzly設(shè)計(jì)的動(dòng)畫logo，這是一個(gè)用來推銷年輕人才的APP。動(dòng)畫很迷人，令人印象深刻，具有生動(dòng)的感染力。
動(dòng)效通知
通知能吸引用戶去更新app。在不那么引人注目的動(dòng)畫支持下，通知變得更加吸引人，讓用戶不錯(cuò)過重要信息。下面你可以看到Home Budget app中的一個(gè)例子:通知不僅以明亮的顏色突出顯示，還模仿了脈動(dòng)進(jìn)行突出顯示。
滑動(dòng)動(dòng)畫
滾動(dòng)是我們?cè)趙eb和移動(dòng)端中使用的典型交互之一。這種動(dòng)畫增添了美感和優(yōu)雅氣質(zhì)，使產(chǎn)品變得時(shí)尚、創(chuàng)意、和諧。記住，滾動(dòng)可以應(yīng)用于不同的方向，不僅是垂直的，也可以是水平的，如下圖所示。
講故事和游戲化
在APP中使用動(dòng)畫的另一個(gè)原因是它成為故事或游戲的一部分。動(dòng)畫貼紙、徽章、獎(jiǎng)勵(lì)、吉祥物——這些是讓應(yīng)用界面變得有趣和生動(dòng)的幾種方法。比如，這里你可以看到Mood Messenger使用的動(dòng)畫貼紙，它反映出了不同的情緒，使用它們可以增加強(qiáng)烈的情感吸引力。
UI動(dòng)畫的利弊
在APP中使用動(dòng)效，設(shè)計(jì)師應(yīng)該分析它們可能對(duì)APP產(chǎn)生的正面和負(fù)面影響。我們簡單的整理下，將有助于你的決策。
在APP中使用動(dòng)效的好處：
1、節(jié)省屏幕空間
2、增加可用性
3、創(chuàng)意
4、方便和簡單的交互
5、能夠同時(shí)完成多項(xiàng)功能
6、加快互動(dòng)過程
7、向用戶提供清晰的反饋
8、創(chuàng)建必要的期望
另一方面，設(shè)計(jì)師不得不考慮的缺點(diǎn)：
1、加載時(shí)間
2、干擾因素
3、耗時(shí)費(fèi)力的技術(shù)實(shí)現(xiàn)。
歡迎關(guān)注我的公眾號(hào)：愛設(shè)計(jì)的狐貍
原文地址：tubikstudio
譯文地址：站酷
譯者：愛設(shè)計(jì)的狐貍
]]>MBE風(fēng)格是怎么來的呢？其實(shí)MBE不是什么單詞的縮寫，MBE是一名法國的設(shè)計(jì)師，他于2015年年底在dribbble網(wǎng)站上最先發(fā)布了這種風(fēng)格的作品，紅遍了全世界，所以這類風(fēng)格以MBE命名。然后世界各地的設(shè)計(jì)師根據(jù)風(fēng)格的特點(diǎn)做出了很多優(yōu)秀的作品，以下是我總結(jié)的幾處觀點(diǎn)與大家分享～
一、MBE風(fēng)格特點(diǎn)
任何設(shè)計(jì)都有其自身的特點(diǎn)，也有同其它物質(zhì)所持有的共性，特點(diǎn)就是與眾不同掌握這些與眾不同的特性，就可以嫻熟的使用出這項(xiàng)技能。
1、線條
MBE風(fēng)格最大的特點(diǎn)就是，比原本插畫更粗更大的線條光環(huán)一般把作品詮釋的更加閃耀。在使用的這些線條的時(shí)不但要結(jié)合色彩學(xué)還要對(duì)作品寄予情感理解的更加通透，當(dāng)然也不能缺少對(duì)審美的認(rèn)知。
?有斷點(diǎn)
黑色線條好處是可以突出內(nèi)容，壞處就是會(huì)產(chǎn)生壓抑感削弱內(nèi)容主題使物體失去生動(dòng)特性，MBE很好的用斷線的處理方法解決了這個(gè)難題,這些斷線的處理并不是根據(jù)圖形的去限定個(gè)數(shù)，它們的數(shù)量多少是跟位置有直接關(guān)系的。
1：圖中的鯨魚和恐龍都是體積比較龐大的動(dòng)物，大面積過度的線條讓動(dòng)物本身顯得有點(diǎn)嚴(yán)肅，作者在鯨魚的嘴部、噴泉的尾后部分都適當(dāng)使用了斷線結(jié)合動(dòng)物本身的特點(diǎn)處理出來斷點(diǎn)的既能起到效果又不失美觀。
2：寶塔和鎖的處理都是在密集的線條交匯處做斷點(diǎn)，破除了畫面的壓抑感讓整體看起來更加透氣。
3：杯子和狐貍的看起來雖然都是獨(dú)立的個(gè)體，但是仔細(xì)觀察他們都有一個(gè)圍繞的共同特性，杯子里面裝著水大狐貍抱著小狐貍這樣的設(shè)計(jì)內(nèi)容是要更突出他們之間的緊密關(guān)聯(lián)所以設(shè)計(jì)師們只選擇一處做斷點(diǎn)，此時(shí)如果在他們之間多加幾處斷點(diǎn)就會(huì)破壞這種氣氛使畫面的關(guān)系產(chǎn)生被分離的感覺。
?無斷點(diǎn)
扁平化圖形＋黑色粗線＋斷線處理是MBE風(fēng)格的固定搭配，但是斷線的處理并不適合在所有的圖形上，既要保持這種新風(fēng)格又要完成想表達(dá)的設(shè)計(jì)，在線條的顏色和粗線處理上就要有些不同的處理手法。
1:汽車的整體構(gòu)造屬于比較精致細(xì)膩的圖形，如果使用黑色粗線勢(shì)必會(huì)遮蓋住車體細(xì)膩的結(jié)構(gòu)無法表達(dá)出一輛精致跑車的視覺傳遞，設(shè)計(jì)師將描邊線條調(diào)細(xì)并把黑色改為深灰色在地面部分適當(dāng)增加斷線處理，既突出整體的精致奢華又保留的設(shè)計(jì)獨(dú)有風(fēng)格。
2：元寶圖形的使用環(huán)境是在煙花點(diǎn)綴的簇?fù)碇腥绻褂眠^多的斷線處理畫面整體就會(huì)感覺被散開，設(shè)計(jì)師使用了紅色中偏黃并降低飽和度的顏色很好的消除原本使用黑色線條的壓抑感，并且這種偏暖的紅色會(huì)更加增加元寶金光閃耀的色澤。
溢出
MBE風(fēng)格除斷線以外最大的特別就是色塊的溢出，其含義應(yīng)該是想表達(dá)物體通過光照折射出來的陰影因?yàn)橥ǔＲ绯龅姆较蚨际歉吖獾膶?duì)側(cè)。MBE早期使用色塊溢出作品較多后期基本已經(jīng)很難見到，原因是因?yàn)樵缙谧髌穲D形都偏于簡單色塊溢出的處理可以給畫面營造質(zhì)感增加對(duì)風(fēng)格的印象，而后期作品復(fù)雜度提升溢出部分無論在顏色還是整理型上很難融合，讓圖形本身突兀破壞本來想傳遞設(shè)計(jì)思想。
2、色彩
?單色系
分析物體包含內(nèi)容是否屬于一種（材質(zhì)、數(shù)量、介質(zhì)）上述特性屬性唯一時(shí)，即可使用單色系搭配方法找出物體的深淺關(guān)系營造質(zhì)感，畫面表達(dá)會(huì)更為完整明確。
?鄰近色＋補(bǔ)色
在色系上作者M(jìn)BE有時(shí)候也會(huì)用不同色系制造圖形的氛圍，顏色的基本范圍會(huì)控制在三種顏色以下，分別采用鄰近色加補(bǔ)色形成，以下圖形中包含的紅、黃、綠、在色環(huán)上角度分別為22.5°的兩色間，色相差為1的配色，均屬于鄰近色相配色。而藍(lán)色角度為180°左右，色相差為8的配色，稱為補(bǔ)色色相配色。
當(dāng)想要表達(dá)的物體在一個(gè)數(shù)量以上或者物體本身某一處的材質(zhì)與其它地方不同，使用顏色區(qū)分能更好的傳遞畫面所要的表現(xiàn)的內(nèi)容，不用刻意保持色相的單一性。
?鄰近色＋類似色
鄰近色是指在色環(huán)上相近的兩個(gè)顏色，在色彩學(xué)中還有類似色相配色、對(duì)照色相配色，在模仿和研究MBE風(fēng)格時(shí)不用墨守陳規(guī)的去遵循作者的設(shè)計(jì)元素，在找到規(guī)則之后可以靈活使用才是設(shè)計(jì)的王道。
中國設(shè)計(jì)師SA 9527這組的設(shè)計(jì)中使用了另外一組鄰近色加上類似色的使用（紅、粉、橘、黃）更好的表達(dá)了一種新年的氣氛。
?寫實(shí)派
在色相的使用上，設(shè)計(jì)師會(huì)遵循色彩基礎(chǔ)原理來進(jìn)行配色，但是在不同環(huán)境下為了能更明確的表達(dá)物體本身之間的關(guān)系，在藝術(shù)形態(tài)上會(huì)更加具象。
立陶宛的設(shè)計(jì)師Justas Galaburda在表現(xiàn)形式上更加貼近現(xiàn)實(shí)，藍(lán)天、白云、國旗、漢堡和薯?xiàng)l中的配色均采用現(xiàn)實(shí)中的物體顏色做為填充。
3、圖形
MBE風(fēng)格的背景圖最初只有圓形、小花瓣、加號(hào)三種也是最常用的三種圖形，它們是隨著MBE而來也這種風(fēng)格標(biāo)志直到今天也一直被沿用。
當(dāng)然天生具有靈活思維的設(shè)計(jì)師們不會(huì)僅僅停留在這三種元素的組成，通過不同位設(shè)計(jì)師的演變它們被改變顏色、位置、大小另外也衍生了一些與扁平風(fēng)格的結(jié)合，這種改變都是通過圖形本身特有的氣質(zhì)而改變。
1:鯨魚的背景圖形重新組成之后是不是有噴出水花的感覺。
2:小蜜蜂飛舞的足跡結(jié)合扁平的漸變色加上漫天飛舞的小星星真的很有feel。
3:茶壺中間的葉子很好的區(qū)分的茶具之間靠色的問題，并給畫面增加了茶水很新鮮的意味。
4:山體中間的云也是自然恰到好處。
5:太陽會(huì)因日出而東日落而西，太陽的動(dòng)態(tài)氣氛給畫面增加了幾分活力。
6:仙女棒五彩繽紛的氣氛，光照出來的時(shí)候會(huì)閃閃發(fā)光。
MBE風(fēng)格看似簡單但是其中好的作品總結(jié)出來的經(jīng)驗(yàn)也是通過設(shè)計(jì)師們的實(shí)踐經(jīng)驗(yàn)得來的,有了這些設(shè)計(jì)理論在設(shè)計(jì)的時(shí)候?qū)ξ覀冏罱K達(dá)成的效果的會(huì)有著很大的幫助。
以上總結(jié)觀點(diǎn)希望能對(duì)大家的設(shè)計(jì)有一些些的幫助，歡迎大家留言討論更多設(shè)計(jì)風(fēng)格的研究。
二、MBE風(fēng)格制作教程
1：畫一個(gè)圓，選中兩端的錨點(diǎn)各縮進(jìn)4px，復(fù)制粘貼這個(gè)圓去掉填充色選擇描邊顏色設(shè)置描邊10x，用鋼筆工具在描邊上增加幾個(gè)錨點(diǎn)，選擇中間錨點(diǎn)刪除就可以形式一個(gè)圓的斷點(diǎn)。
2：將填充色改為粉色，復(fù)制兩次使用路經(jīng)查找器切割出一個(gè)圓的一小部做為圓的陰影，再用同樣的方法做出一個(gè)高光。
3：復(fù)制兩次圓，將其中一個(gè)圓縮小擺放到合適的位置使用路徑查找器切割出（這是小優(yōu)的眼鏡）眼鏡的位置，然后填充為藍(lán)色，復(fù)制眼鏡關(guān)閉填充色設(shè)置描邊10px，再復(fù)制眼鏡和臉部高光使用路徑查找器切割出眼鏡高光的部分設(shè)置色值
4：使用上面相同的方法做出一朵花和眼鏡上白色高光，一個(gè)小優(yōu)的頭部就做好了。
文章來自：優(yōu)酷土豆用戶體驗(yàn)設(shè)計(jì)中心
]]>
我們終將以自然的方式與機(jī)器交流
在2012年圣丹斯獨(dú)立電影節(jié)上，影片《機(jī)器人與弗蘭克》贏得特別獎(jiǎng)，該片講述機(jī)器人Robot照顧患有老年癡呆癥弗蘭克的故事，選取影片中兩張圖，一張是人與人的交流，另一張是人與機(jī)器的交流，在2017年AI大熱之年，人們能否像電影里的弗蘭克那樣，以人對(duì)人的方式與機(jī)器交流，這在人機(jī)交互學(xué)科里定義為“人機(jī)自然交互”。
何為自然交互？簡而言之就是以日常交流方式與計(jì)算機(jī)進(jìn)行交互，何為日常交流方式？就是人們通過語音、肢體、手勢(shì)、眼神、表情等形式進(jìn)行交流互動(dòng)。
人機(jī)交互正邁上新臺(tái)階
人機(jī)交互（HCI – Human Computer Interaction）的發(fā)展是從人類適應(yīng)計(jì)算機(jī)到計(jì)算機(jī)不斷適應(yīng)人類的過程，劃分四個(gè)階段：代碼指令交互、圖形用戶界面交互、人機(jī)自然交互和人機(jī)情感交互。【引自《人機(jī)情感交互》】
每個(gè)階段的發(fā)展都是以技術(shù)作為基石，以此帶來的人機(jī)交互更為直觀，也更趨近于人與人的自然交互，同時(shí)會(huì)拓寬更多的使用場(chǎng)景，會(huì)覆蓋全年齡段的所有人。如下圖所示，指令 – 專業(yè)技術(shù)人員操作早期計(jì)算機(jī)；鼠標(biāo)鍵盤 – 受過教育的普通人使用PC機(jī)進(jìn)行學(xué)習(xí)工作；觸屏 – 更廣泛的人群使用智能手機(jī)進(jìn)行社交、資訊、娛樂等；自然交互 – 所有人將以自然的行為方式與智能產(chǎn)品互動(dòng)。
隨著AI技術(shù)的發(fā)展，智能產(chǎn)品在感知層面的能力正在變強(qiáng)，它能感知人們的語音、肢體語言、手勢(shì)動(dòng)作、表情眼神等，實(shí)現(xiàn)了人機(jī)自然交互的可能性，這是正在發(fā)生的事情。
未來智能產(chǎn)品的趨勢(shì)是將擁有情感計(jì)算能力（Affective Computing），通過認(rèn)知人類的語音信息、人臉表情、肢體動(dòng)作等，從而調(diào)整自身的反饋來適應(yīng)人們那一刻提出的需求，交互會(huì)變得越來越容易，它會(huì)更懂你。
智能產(chǎn)品能感知人的自然動(dòng)作和讀懂人的情感，都屬于信息輸入層面。在信息輸出層面，智能產(chǎn)品如何設(shè)計(jì)才能達(dá)到“人與人自然交流”的感覺，為此我們將從六個(gè)維度給出設(shè)計(jì)建議，分別是人物設(shè)定、外觀造型、語音、動(dòng)作、界面和光效。正如同人與人交流時(shí)對(duì)方的脾氣性格、外貌印象、聲音特點(diǎn)、肢體語言、表情和眼神。
以語音交互為核心功能的智能產(chǎn)品設(shè)計(jì)建議
1. 人物設(shè)定的設(shè)計(jì)建議
①人設(shè)是要為用戶服務(wù)；
人設(shè)是高級(jí)的虛擬形象設(shè)計(jì)，不由設(shè)計(jì)師的個(gè)人喜好來擬定，要充分考慮產(chǎn)品所服務(wù)的目標(biāo)用戶，譬如病人希望看見的是專家級(jí)醫(yī)生，旅客希望能獲得空姐甜美的服務(wù)，食客希望迎賓的店小二是熱情好客的，這些形象在我們的腦海里栩栩如生。比如Amazon Echo是成熟職業(yè)女性的形象（類似有Google Home、天貓精靈、京東叮咚等），Olly給人潮流的設(shè)計(jì)感，它們?yōu)楦髯缘哪繕?biāo)受眾群體去設(shè)定形象。
②人設(shè)可以通過抽象的方法進(jìn)行傳達(dá)，并非一定要具象化；
比如小米智能音箱定義的“小愛同學(xué)”是二次元形象，在今年11月底做出限量版手辦，把形象落地到成具象的實(shí)體物品。對(duì)此，仁者見仁智者見智，有人說她不是心目中的“小愛”，所以在人設(shè)形象的傳達(dá)上，我們建議可以通過藝術(shù)的手法達(dá)到目的，比方說用音樂、繪畫、文學(xué)、電影等藝術(shù)進(jìn)行包裝抽象成一套視覺來傳達(dá)，達(dá)到“空山不見人，但聞人語響”的境界。
③人設(shè)與產(chǎn)品要融為一體的進(jìn)行考慮；
以語音交互為核心功能的智能產(chǎn)品，其“人聲”會(huì)讓用戶自動(dòng)的聯(lián)想與之對(duì)應(yīng)的形象，同時(shí)需考慮與外觀造型相匹配，才能符合用戶預(yù)期。有些智能產(chǎn)品有動(dòng)作輸出，例如人設(shè)定義為蠢萌的jibo，它的動(dòng)作就要顯得有趣可愛。如果考慮不周全，就會(huì)導(dǎo)致認(rèn)知失調(diào)產(chǎn)生落差，比如小魚在家，當(dāng)用戶問它幾歲時(shí)，它卻用其成熟女性的聲音回答“我今年兩歲了”，而Amazon Echo的回答是“按照人類的出生年齡計(jì)算我今年兩歲”，后者更能讓人接受與理解，即使是微不足道的一句文本都可能會(huì)讓用戶“出戲”，所以人設(shè)要與整個(gè)產(chǎn)品的信息輸出層面融為一體的去考慮。
2. 外觀造型的設(shè)計(jì)建議
①充分考慮目標(biāo)用戶的審美與喜好；
根據(jù)目標(biāo)客群打造其喜歡的外觀造型，比如小朋友會(huì)喜歡jibo勝過Echo，追求新潮的人更喜歡raven R，因?yàn)槟芘c之載歌載舞。與以屏幕為主的智能手機(jī)不同，用戶可不能更換主題皮膚找到自己的喜好，而Google Home也只能是通過“換褲子”來迎合用戶偏好與家居風(fēng)格。
②基于使用場(chǎng)景考慮造型設(shè)計(jì)；
要考慮用戶會(huì)在哪種現(xiàn)實(shí)環(huán)境的場(chǎng)景下使用，目前市面上的智能語音產(chǎn)品多數(shù)放置在桌面上，體積大小就要認(rèn)真思考，比如大了點(diǎn)、重了些，就不方便自由移動(dòng)隨處擺放，如果定義為多個(gè)使用場(chǎng)景，那便攜上得做到位。比如raven H頂部的“點(diǎn)陣觸控屏”蓋子，用戶能輕松取下進(jìn)行語音和指觸交互，于是不受固定位置的限制。
③避免掉進(jìn)恐怖谷；
避免與人全特征的過度相似，建議采用抽象的方法提取擬人元素進(jìn)行設(shè)計(jì)表達(dá)，這有助于產(chǎn)品向用戶傳達(dá)情感信息，從而有效的提升用戶好感度。例如蔚來ES8搭載的人工智能nomi，還有百度的度秘，都是通過此類設(shè)計(jì)方法打造智能情感的交互，讓一個(gè)工業(yè)產(chǎn)品，升級(jí)成一個(gè)有生命，有情感的新伙伴。
但如果與人的特征過度相似，現(xiàn)階段的技術(shù)能力，造型上做不到寫實(shí)逼真像人，同時(shí)語音、表情、動(dòng)作也無法達(dá)到自然完美的匹配，所以這不倫不類的設(shè)計(jì)會(huì)給用戶帶來糟心的體驗(yàn)，例如Blue Frog Robotics公司推出的Buddy，很容易讓用戶掉進(jìn)“恐怖谷”。
“恐怖谷理論”是由日本機(jī)器人專家森昌弘提出， 他認(rèn)為，人形玩具或機(jī)器人的仿真度越高人們?cè)接泻酶?，但?dāng)達(dá)到一個(gè)臨界點(diǎn)時(shí)，這種好感度會(huì)突然降低，越像人越反感恐懼，直至谷底，稱之為恐怖谷。如圖所示，谷底處能動(dòng)的僵尸比靜止的尸體更恐怖，雖然尸體已經(jīng)夠恐怖的了。
3. 語音的設(shè)計(jì)建議
①自然感；
避免單調(diào)乏味，做到像人說話一樣的自然，語氣上聽起來積極主動(dòng)，有意愿的感覺，每一個(gè)音素合成的詞句清晰可辨，自然流暢。人類語音的信息含有語音聲學(xué)特征和文本語義，語音聲學(xué)特征主要是韻律特征（指音素組合成語句的方式），包括聲調(diào)、重音、停頓、語速等，漢語是一種有調(diào)語言，聲調(diào)攜帶非常重要的情感信息。語音屬于自然交互的一種，它需要達(dá)到“自然”的感覺，才能讓用戶感知可用。
如何讓Siri聽起來更像人那般自然？
iOS11版本關(guān)于Siri的升級(jí)目標(biāo)是“讓Siri聽起來更像人那般自然”，實(shí)現(xiàn)方法是通過深度學(xué)習(xí)，每一種表達(dá)都有略微不同的聲波，每一句話都包含幾十或者幾百個(gè)音素，Siri為每一次發(fā)聲找出完美的聲音組合，其中音素是由蘋果挑選出的候選人進(jìn)行發(fā)音采集，情感語料的獲取是蘋果以匿名的方式進(jìn)行收聽，然后用于深度學(xué)習(xí)進(jìn)行Siri的訓(xùn)練。
②一旦確定“人聲”不宜隨意更改；
一旦人設(shè)的聲音已根植在用戶的耳朵里，不宜隨意更改，如果說手機(jī)界面換背景圖就像人換一身新衣裳，而以語音交互為核心功能的智能產(chǎn)品更換“人聲”，就像重新認(rèn)識(shí)一位陌生人，古語說“如聞其聲，如見其人”，人們會(huì)很自然的把聲音與某個(gè)人進(jìn)行關(guān)聯(lián)，新的聲音是誰，就會(huì)重新進(jìn)行“人物建模”。
③像人和人那樣進(jìn)行對(duì)話；
首先是對(duì)話流暢，做到及時(shí)反饋，如有停頓，不宜過長。話術(shù)簡短而有效，不要主動(dòng)終止對(duì)話，盡可能的推動(dòng)持續(xù)交流，當(dāng)然不能以命令的形式讓用戶去完成某個(gè)任務(wù)，這不是一個(gè)合適的對(duì)話，它或許有點(diǎn)像上下級(jí)的關(guān)系，會(huì)導(dǎo)致用戶帶來反感和抵制。
④在感知用戶后嘗試主動(dòng)發(fā)起對(duì)話；
再過些時(shí)日，可能Amazon Echo它能夠根據(jù)說話者的語音情感進(jìn)行識(shí)別計(jì)算，通過韻律學(xué)特征（語調(diào)、響度、節(jié)奏、語音質(zhì)量等）更懂用戶說這句話的此刻心境，就像電影《Her》里的那句臺(tái)詞“你今天聽起來有點(diǎn)不開心”，它能感知你，試著主動(dòng)發(fā)起一次對(duì)話。
4. 動(dòng)作的設(shè)計(jì)建議
①使用國際通用的認(rèn)知?jiǎng)幼鱾鬟_(dá)，同時(shí)考慮個(gè)地方的風(fēng)俗習(xí)慣；
例如
]]>
Material Design提供了設(shè)計(jì)APP時(shí)所需的整套工具和指南，幫助你在用戶體驗(yàn)設(shè)計(jì)過程中遇到困難時(shí)做出明智的決策。但當(dāng)你的app不那么符合特定的使用案例該怎么辦？在谷歌，當(dāng)設(shè)計(jì)師要做的產(chǎn)品不那么適合這份指南的時(shí)候會(huì)如何？
Material Design指南應(yīng)當(dāng)因事制宜。透過此文，我們將細(xì)看Keep和Inbox這兩個(gè)谷歌app，來理解它們?cè)O(shè)計(jì)過程中是如何改變一些規(guī)則，領(lǐng)會(huì)Material Design指南的整體精神后進(jìn)行實(shí)際應(yīng)用。
Inbox：探索印刷網(wǎng)格
在谷歌設(shè)計(jì)一款全新的電子郵件Web應(yīng)用可謂一個(gè)相當(dāng)有野心的任務(wù)，尤其是在Gmail已經(jīng)存在的情況下。借助新的Materail Design規(guī)則，Inbox團(tuán)隊(duì)企圖創(chuàng)建更密集的UI、更特別的用戶體驗(yàn)和品牌標(biāo)識(shí)。就在Inbox設(shè)計(jì)團(tuán)隊(duì)在整合最初的設(shè)計(jì)時(shí)，Material Design尚仍在開發(fā)中。這提供了他們一個(gè)絕佳的機(jī)會(huì)：建立Material Design 網(wǎng)頁標(biāo)準(zhǔn)，以解決密集UI的設(shè)計(jì)問題。
密集的UI設(shè)計(jì)
Inbox最初的設(shè)計(jì)不夠靈活，因?yàn)樵?3英寸屏幕上只有7封郵件的空間。這相比較于Gmail能展示16-20封郵件而言實(shí)在太少。Inbox的視覺設(shè)計(jì)首席Tim Smith解釋道：
“如果你分別打開Gmail和Inbox，在視覺密度上有很大區(qū)別。在內(nèi)容和留白之間找到理想的平衡就成了我們最大的挑戰(zhàn)之一。”
通過調(diào)整網(wǎng)格、行高、文字表達(dá)，Inbox成功建立了密集型網(wǎng)頁UI的設(shè)計(jì)標(biāo)準(zhǔn)，做到能展示12-17封郵件，每個(gè)郵件存在于一張Material Design卡片中。字體大小和外觀也被設(shè)計(jì)成因個(gè)人設(shè)備不同而有所調(diào)整改變。例如，電子郵件的主題行會(huì)根據(jù)屏幕尺寸的增長而變化字體尺寸。
INBOX為了在小尺寸屏幕上適應(yīng)盡可能多的信息而設(shè)計(jì)，設(shè)定了密集網(wǎng)頁外觀的MATERIAL DESIGN標(biāo)準(zhǔn)。
利用顏色、圖像和Icon承前啟后
與Gmail比較，Inbox的視覺差異體現(xiàn)于頭圖的使用，頭圖會(huì)與捆綁的郵件內(nèi)容相關(guān)。如果一個(gè)人使用Inbox來計(jì)劃去紐約的一次旅行，舉個(gè)例子，他們將會(huì)看到曼哈頓天際線的圖片。Inbox還在左側(cè)導(dǎo)航欄中使用了大量的icon，這些icon會(huì)根據(jù)它們?cè)赼pp中的功能被賦予不同的色彩。例如，當(dāng)用戶點(diǎn)擊或輕觸綠色的“完成”按鈕，標(biāo)題欄的背景色也會(huì)變成綠色，讓用戶持續(xù)的知曉變化和前后聯(lián)系。
這種承前啟后的圖像使用也是Inbox不同的品牌體驗(yàn)的另一個(gè)鮮明特征。
INBOX會(huì)給綁定的郵件增加圖像從而賦予它們意義。例如，去紐約旅行的飛機(jī)票和酒店預(yù)訂郵件會(huì)配上城市的天際線照片。
為網(wǎng)頁設(shè)計(jì)標(biāo)題欄
對(duì)Inbox團(tuán)隊(duì)的另一個(gè)挑戰(zhàn)是app標(biāo)題欄的設(shè)計(jì)。最初的提議是設(shè)計(jì)成一個(gè)可調(diào)的標(biāo)題欄，不會(huì)拉伸填滿整個(gè)瀏覽器窗口，但取而代之的是會(huì)匹配內(nèi)容的寬度。
“我們研究了這個(gè)方案的十幾個(gè)變體，知道最終確定為你今天看到的全寬度標(biāo)題欄。我們還通過幾個(gè)原型的探索來決定最佳的搜索區(qū)域樣式。”——視覺設(shè)計(jì)首席Tim Smith
既然Inbox的卡片能夠縮放，這意味著每一次用戶和郵件交互的時(shí)候都必須進(jìn)行頭部的調(diào)整。App的標(biāo)題欄還包括了搜索區(qū)域和展示其他谷歌應(yīng)用的菜單。這一處理方式讓Inbox無需復(fù)雜化它的外觀就能保持良好的響應(yīng)。
Keep：改變導(dǎo)航模式
Keep是一款跨平臺(tái)的筆記應(yīng)用，擴(kuò)展折疊屏幕上的Material卡片讓用戶在添加筆記時(shí)集中注意力。改進(jìn)過的底部導(dǎo)航欄也讓人們能夠通過一個(gè)輕觸快速地新建筆記。
通過空狀態(tài)和動(dòng)效來鼓勵(lì)用戶行為
空狀態(tài)主要出現(xiàn)在沒有任何內(nèi)容展示給用戶的時(shí)候。Keep通過這種設(shè)計(jì)模式給用戶一個(gè)空畫布來起草他們的想法。貧乏的UI鼓勵(lì)用戶更多去探索app的搜索欄元素，擴(kuò)展到顯示圖標(biāo)篩選器；分類菜單讓用戶在列表顯示和網(wǎng)格顯示之間切換；左側(cè)導(dǎo)航抽屜用于調(diào)整app的主要設(shè)置?？ㄆㄟ^放大和縮小來提示用戶其前后關(guān)系。
KEEP利用空狀態(tài)來鼓勵(lì)用戶創(chuàng)建新的筆記。
“動(dòng)效方面我們耗費(fèi)了諸多努力，從筆記流動(dòng)展示的動(dòng)態(tài)，到你打開和關(guān)閉它們的方式。”
——谷歌KEEP軟件工程師GENEVIEVE CUEVAS
為你的app使用正確的Material模式：底部導(dǎo)航欄 VS. 懸浮按鈕（Floating Action Button）
當(dāng)你重新設(shè)計(jì)一款app時(shí)，Keep團(tuán)隊(duì)的設(shè)計(jì)師和研發(fā)人員仔細(xì)研究了Material Design模式，并且最終應(yīng)用了一些組件，比如讓筆記與筆記區(qū)分開的卡片、讓app設(shè)置更容易操作的左側(cè)抽屜式導(dǎo)航和根據(jù)筆記內(nèi)容不同而變化的菜單，比如在列表內(nèi)容上加上勾選框以便于檢查每條內(nèi)容?？偠灾?，這些不同的設(shè)計(jì)模式最終創(chuàng)造了一個(gè)全新的功能體驗(yàn)，它建立在用戶的使用場(chǎng)景和需求之上，是Keep這個(gè)應(yīng)用的簡單易用的關(guān)鍵。
再設(shè)計(jì)的過程中，Keep團(tuán)隊(duì)對(duì)Material核心導(dǎo)航做了一些實(shí)驗(yàn)，測(cè)試讓一個(gè)可擴(kuò)展的懸浮按鈕替代現(xiàn)有的底部導(dǎo)航欄。需要指出的是，底部導(dǎo)航提供了簡單的一鍵式動(dòng)作來創(chuàng)建新的筆記。新型懸浮按鈕則需求兩步操作，第一步擴(kuò)展選項(xiàng)，第二步才創(chuàng)建筆記。
“當(dāng)我們發(fā)布了懸浮按鈕后，一些用戶抱怨沒有了能夠一鍵創(chuàng)建筆記的功能。”
——谷歌KEEP軟件工程師GENEVIEVE CUEVAS
這個(gè)改變看似對(duì)app的老用戶和已經(jīng)習(xí)慣了單觸式導(dǎo)航的用戶而言是個(gè)退步。Keep在測(cè)試后最終放棄了諸如懸浮按鈕這樣的核心Material組件，這是一個(gè)很好的例子來告訴人們，在使用Material指南時(shí)應(yīng)該堅(jiān)決拒絕強(qiáng)行套用不適合產(chǎn)品的指南的行為。
指南不是法則
Inbox和Keep團(tuán)隊(duì)都利用了Material Design指南來幫助設(shè)計(jì)和開發(fā)應(yīng)用。但當(dāng)他們遇到一個(gè)對(duì)產(chǎn)品無用的案例時(shí)，他們會(huì)相應(yīng)地調(diào)整設(shè)計(jì)。Material Design給了非常多的指引，這是建立于谷歌多年的UX經(jīng)驗(yàn)之上的，但它不可能包羅萬象。希望以上這些例子能告訴你，在符合其整體精神的基礎(chǔ)上，設(shè)計(jì)時(shí)要按照實(shí)際需求來改變你的運(yùn)用方式。