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