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