我把整體分為了三個部分
1.空洞的設計方法（因為大多數的人對設計的方法論都處在一個看了、學了、但是用不上的階段，主要是講在我分享的內容中可能會用到的一些設計理論和方法）
2.很一般的設計流程（這個優化設計的流程其實千千萬，最重要的還是和真實的項目相結合，每一個點都值得拿出來寫一個長篇大論，有機會具體來說說）
3.不成熟的實際應用（設計流程大多復雜而冗長，對于處在初創期或者發展期的產品來說，可能并沒有那么長的時間線來實踐，這一點也是我想和設計同行一起探討的問題）
“奧卡姆剃刀原理”是設計師們耳熟能詳的一個理論，即“如無必要，勿增實體”，在UI\UX設計中，我的理解是，如果能夠在用戶的行為路徑上和交互方式做出優化，就不要增加新的功能。
這個理論會貫穿在整個產品設計流程中。
用戶體驗五要素，是我們在學生時代就會聽到的一個理論，但其實對于五要素真的對應著什么，意味著什么，可能并沒有一個確切的概念。
我說說我的理解：
這五個要素，從戰略層到表現層，是一個從抽象到具象的過程，是一個易用產品背后必不可少的東西。
戰略層：用戶需求、產品目標——就是說在使用完這個產品之后，能不能很好的滿足了用戶的需求，達沒達成做這個產品的目的。
范圍層：在產品定位明確的情況下，我們要有什么樣的功能和內容——具體需求
結構層：各頁面、功能的聯系，用戶通過一個什么樣的路徑、什么樣的層級關系完成一個流程
架構層：按鈕、控件、圖片、文本區域的布局，用戶對頁面的整體感知
表現層：長什么樣，顏色啊、風格啊等等）
所謂KANO模型，它和接下來要說的消極選擇、NUF評估篩選都可以理解成為一個需求篩選的方法，他們都能夠幫助設計師在眾多需求當中，找到最合適和最合理的那個。
KANO模型中，我們可以把需求或者說創意點分成5個屬性
1.魅力/驚喜屬性
用戶意想不到，如果沒有這個功能用戶可能感知不到，但是做了這個功能，用戶會非常驚喜和滿意。（我們有沒有這樣的功能？首頁tab bar動效）
2.期望/期待屬性
做了這個功能，用戶滿意度會提升，否則反之，會降低
3.必備/必要屬性
一個產品的有效性功能，最基本的功能。如果做了用戶滿意度不會提升，覺得理所當然，但是如果沒有，滿意度會大幅下降。
4.無差異因素
做和不做對用戶的影響并不大，用戶也不太在意。
5.反相/錯誤因素
你不做還好，一旦做了用戶反而會反感，降低滿意度。
對于一個產品，最重要的即是必要屬性和期望屬性。
消極選擇其實是我們在生活當中也用得到的篩選方法，簡單來說就是：當我們想到的兩個idea都能用來解決一個問題，那么我們要選這兩個當中實現成本低的那個或者說“性價比”最高的那個。
NUF評估篩選相比前兩種方法，就顯得稍微繁復一點，用起來可能并不如前兩種方法更容易。
它其實是，在新穎、使用、可行三個維度，對我們要篩選的點進行打分，再根據分值進行篩選。
用起來其實比較消耗時間。
我把這一部分分成了4個步驟，分別是：桌面研究，用戶研究、概念提煉、設計方案
產品深度使用，提問并分析（比如素養課頁面，有多少卡片類型，有多少內容分類？哪些課程點擊率比較高，為什么？等等）-同類產品分析-用戶體驗診斷，舒適體驗和不是體驗-確定設計方向，產品定位、改版（優化）目的、用戶群體、價值點）（確定大致設計方向，提出假設，如：經過我們上述的研究和分析，發現豐富、高質量的內容和清晰的布局，能夠讓用戶有瀏覽和互動欲望，從而達到轉化目的
我們一般通過定量問卷和定性訪談來從用戶那里獲得想要的信息點以得出用戶畫像和驗證我們前期的假設
在做訪談之前，要明確的就是我們要得到什么，或者說我們要訪談用戶的哪些方面
即：用戶習慣的研究、用戶行為模式的研究、用戶行為動機的研究
在設置問題時，要明確每個問題的背后我們關注的點在哪里，不可能在不相干問題中浪費時間。
通過前面的兩個階段，我們已經可以得到很多東西了：完整清晰的用戶畫像、同理心地圖、As is 旅程圖。我們通過這些東西，找到我們可以優化、可以提升用戶體驗的地方，即機會點，然后利用我們之前提到的篩選方法，進行創意決策。
（同理心地圖）
（As is 旅程圖 來自：池喜太厚）
通過前面完整的研究和決策，在此階段，得出交互設計方案、UI設計方案等等
這一部分是我想和大家探討的，前面所說的設計流程，多數時候在實際工作當中應用起來并不容易，這也是很多設計師對設計方法嗤之以鼻的原因，覺得設計方法都是玄學，胡說胡有理，這里我也說說我的一些思考。
在我們日常的工作當中要把上述的所有流程都走到，所有設計方法都應用，顯然是不現實的。而且，在產品的不同階段，優化和迭代的驅動力是不同的。在初創和成長階段，一般為問題驅動，在成熟期，一般為價值驅動。
也就是說，平時的工作可能是一個，發現問題到解決問題的過程，我們需要把成熟的方法和流程進行拆分，進行小部分流程的應用，這樣也能夠讓我們得出一個合理的設計方案。
轉自：站酷-鹿爺不是咸魚
保持好奇，巧妙融合，追求卓越，自然而然
在網上找UX汽車相關的材料和文章是相當困難的。（學習君說：表示相當贊同：（ ）盡管有關移動和臺式設備UX的信息太多，但要獲得關于HMI（人機交互）原理的見識似乎要困難得多。為什么？
我的回答是，與為手持設備和計算機進行設計相比，這可能是一門利基學科，再加上汽車屏幕出現的時間不長。當然，車輛上的用戶體驗不僅僅是屏幕，只有旋鈕和物理按鈕時已經是用戶體驗了，但是在這種知識上也沒有太多分享。
但是，主要原因可能是缺乏標準化。如果您現在看一下市場，您會發現有太多不同的方法和解決方案（滿足相同的需求），很難提出一套共享的規則。屏幕可以是橫向或縱向屏幕，可以是直角或傾斜角度，可以是一個或2個或3個或更多，超寬或更大的正方形，儀表板上的高度或膝蓋以下的高度，等等。與這種混亂相比，我們在手機上擁有的屏幕尺寸數量似乎是在開玩笑。
另一個原因是所有車載系統都需要非常全面的測試。用戶在可能致命的情況下與這些對象進行交互。因此，測試必須絕對優先。搞砸移動應用程序上的按鈕的位置或大小可能會帶來麻煩，但在汽車操作系統上這樣做（我不是說“信息娛樂”，因為在這一點上，它是一個簡化的術語）會造成生命損失。上面提到的缺乏標準化使得很難將先前測試的結果用于其他系統并在其他系統上重用。
各種研究表明，黑暗的UI在汽車環境中是最安全的選擇。深色界面可減少干擾和眩光，但是，存在一個組件，從暗模式切換為亮模式可能有助于提高可讀性，這就是導航圖。在幾乎所有導航系統中，地圖都會自動從暗切換為亮，反之亦然。
Android Auto
文字應略讀，因此所有的號召性用語，菜單和所有文字通常都應保持最少。除非是在不運動的情況下閱讀的文本，否則任何文本都不應排在兩行或更多行上。
眼睛到中央顯示器的平均距離約為60厘米/ 24英寸。該數字只是根據市場上最常見的配置進行的平均測量，但是同樣，由于沒有適當的標準，因此該距離可能會有很大差異。
假定此措施為有效基準，則在運動情況下字體的最小尺寸為5.3 / 6毫米（不同的研究表明最佳做法略有不同）?？紤]到1mm為6.299 dp（@ 160dpi），則文本應為34/38像素高，用于應該在行駛時讀取的文本。
應該只有一個主要動作，而第二個動作則盡可能少。同樣，我們希望用戶快速瀏覽并一眼就能找到所需的內容。
（美國）美國國家公路交通安全管理局（NHTSA）指南指出，駕駛員應該能夠在1.5秒的一系列掃視中完成一項任務，并且花在離開道路上的累積時間不超過12秒。
Apple CarPlay — phone call: 1 primary CTA
自從誕生以來，車載操作系統已超越了信息娛樂功能。通過鏡像智能手機甚至系統內部的鏡像，我們可以訪問多種功能，例如消息傳遞，日歷和提醒，流視頻等等。但是，用戶在使用這些系統時要尋找的主要功能是3：
音樂/播客/有聲讀物
導航
撥打/接聽電話
這三個主要功能在駕駛時應該比其他功能更醒目且易于使用。
圖標優于文本標簽，但圖標的含義必須絕對清楚，不能解釋誤解。圖標標簽的字體大小可以小于第3點指示的最小字體大小。
Porsche Panamera UI
駕駛情況下的理想對比度至少應為7：1，因此絕大多數系統都將白色（或淺灰色）變成黑色（或深灰色）。
對于行駛中未使用/讀取的組件，最小值應為4.5：1。
旋鈕和物理按鈕的性能仍然優于GUI組件，這是由于其具有肌肉內存映射功能，觸摸屏上的可視元素要求駕駛員每次查看屏幕。但是，數字接口的靈活性毋庸置疑，世界正在朝這個方向發展。盡管大多數（如果不是全部）現代觸摸屏都支持各種類型的交互，例如您的常規平板電腦，但由于易于執行，因此它們是首選的：
單點
向左/向右/向上/向下滑動
滾動（帶有捕捉）
應避免使用其他更復雜的手勢，例如觸摸和按住，雙擊，捏合，多點觸摸手勢，或者在非運動情況下使用。
關于滾動的注意事項：在列表或卡片上自由滾動不是理想的選擇。垂直和水平滾動動作均應具有捕捉效果，以始終將滾動項鎖定在同一位置
Scroll with snapping on the left, free on the right
非接觸手勢是許多OEM嘗試的新事物。目前，這項技術似乎還遠遠不夠完美，但是除此之外，在這種情況下使用的手勢通常并沒有真正令人難忘和自然。
雖然語音控制似乎是理想的選擇，但根據研究，在某些情況下，精神工作量可能會超出預期。在VUI并不是真正的“對話式”的較早系統上，情況更是如此，諸如Google Assistant或Siri之類的現代助手對信息較長的字符串的理解程度更高，從而減少了用語表達命令的精力。
但是，我們應該考慮不能選擇說話的情況，例如，當嬰兒在后座上睡覺或某人有言語障礙時，并提供一種安全，可視/觸覺的方式來執行所有動作。
與移動設備甚至與帶有臺式計算機和椅子的辦公室設置不同，在汽車中，座椅相對于屏幕呈固定角度，屏幕也固定在適當的位置。因此，必須考慮屏幕的可達性及其可讀性。考慮到左側的駕駛員，屏幕右側的元素將導致可讀性和可訪問性降低（當然，在方向盤位于右側的汽車中會發生相反的情況）。
避免使用重影按鈕，輔助功能應非常清晰可見。主要行動和次要行動均應清晰可辨
Tesla Model 3 UI
當然，這也不意味著丑陋（不幸的是，那里有一些丑陋的車載體驗）。但是，在為車載屏幕設計時，您必須考慮告別微妙的色調，細膩的對比度，筆觸細膩的圖標，淺色字體，細小的文字……
極簡主義受到歡迎，但它是由更少的可見組件組成的極簡主義。
正如本文開頭所述，這些原則只是經驗法則，不能以任何方式跳過嚴格的測試。但是，如果您是第一次使用智能手機和計算機的UX來接觸汽車的HMI，那么這可能是您開始著手涉足這一復雜學科的起點。
菲茲定律在交互設計中的應用是很普遍和廣泛的，有時候在我們設計界面之時，不知不覺就應用了菲茲定律，但是我們卻未察覺。
關于菲茲定律的具體內容，可以說是大家耳熟能詳，甚至在學生時代就有所了解：從一個起始位置移動到最終目標點所需的時間由兩個參數來決定，到目標的距離（D）和目標的大小（W），可以用數學公式表達為：
在當今互聯網背景下簡單來解釋說，就是大而近的目標區域意味著用戶用需要耗費太大的精力即可輕易點擊或者關注到目標，反之，小而遠的目標區域則意味著用戶將耗費一些時間和動作才能觸及到目標。在一般情況下，讓用戶耗費時間和動作的操作，會使人產生負面的用戶體驗。
以上說的，其實是對菲茲定律表象的解釋，每個人在網上也會搜到很多類似的解釋。當你搜索時會發現，關于對菲茲定律的應用，網上絕大多數的資料都是在以PC端界面作為定律的解釋，但移動界面卻少之又少，這里面的一部分原因是菲茲定律提出的時間，一部分也是因為在移動端的設計中，菲茲定律會變得很零散和瑣碎，很難真正用幾句話來總結，這篇文章也是我第一次試著在移動端的交互設計的范疇內對菲茲定律的應用進行簡單的總結。
1. 讓按鈕更大一些
我在這一部分分了幾種情況，分別進行討論，其一呢，就是fab button。在現有的fab button中，大家會發現，雖然按照正常iOS的設計規范，一般按鈕的大小都會被設計為88px，但是在設計fab button時，我們一般都會選擇大一些的尺寸，例如100px、110px、120px。
其二就是頁面內功能按鈕的大小，我們在做界面設計的時候，都知道做到統一性，但很少去深入地想，界面統一的背后是在像用戶傳達一個什么意思。
舉個例子，這是【洋蔥數學】和【360家庭防火墻】的登錄界面，市面上的登錄界面大多大同小異，基本組成就是賬號+密碼+按鈕（或手機號+按鈕等）的組合。
那我們來思考一個問題：為什么在手機號只有11位已經確定的情況下，輸入框和【下一步】按鈕還要做這么長，接近通欄的一個樣式。
我試著來找到這個問題的答案，第一個，是對于品牌設計規范的執行，對邊距是有一定要求的，也就是我們常說的保持頁面元素的統一性；第二個，即是對菲茲定律的應用，在這個頁面中，最核心的兩個功能【輸入】和【下一步】給予他們一個足夠的大小，會讓用戶的注意力更加集中，避免被分散精力。
2. 讓相關聯的信息內容距離更近
這也和設計原則中的親密性相一致。依舊可以用我們常見的信息輸入界面來加以印證。這兩個界面是我隨手做的，對比一下即可看出優劣。
在相關性比較強的功能中，拉近彼此距離，既能夠給信息一個清晰的層級，更能夠減少用戶的操作成本。
3. 界面的邊界會讓用戶操作更加精準和容易
在研究交互界面的時候，我們總聽到一個說法，“界面的邊界是無限的”，它當然不是在說界面是無限大的，對于一塊屏幕來說，在進行操作的時候，無論是PC的鼠標光標，還是移動屏幕的手指，在操作到界面邊緣時，因為無法延伸，所以最精準。
這也是我們看絕大多數fab button彈出的菜單是在界面邊緣，而不是在界面中央的原因。
除此之外，還有在很多安卓手機中，卸載app時會讓用戶把要卸載的app拖拽到屏幕上邊緣的區域進行卸載，這樣相比給一個【X】按鈕，會更加精準，而且拖拽的操作也會給用戶更多思考的空間和時間，減少誤操作的概率。
但是，這個但是很重要，不要把所有既定的法則都奉為圭臬，所有事物都要辯證著看，在沒有限定條件的情況下，菲茲定律的應用不會有任何問題，但是如果加以條件的限定，就不是這么簡單了。
簡單舉個例子：在進行刪除等負向操作時，很多app會把確認刪除等操作做得離你的上一步操作區域更遠，或者讓確認按鈕更加不明顯，這是在幫助用戶，或者說希望用戶在做負向操作時，有更多的思考空間和時間，規避誤操作的影響。
在《看懂設計》這個系列里，我會選擇性地對在交互設計中常常被應用的設計心理學、方法論等進行簡潔有案例的解析，例如大家耳熟能詳的交互設計7大定律、斯金納箱理論、邊際效應、錨定效應、格式塔理論等等讓大家盡可能地在實際案例中找到它們的應用，而不是讓這些方法論成為我們腦海中的空中樓閣，知道、聽說過，但是不會應用。
轉自：站酷-鹿爺不是咸魚
他們是“最美逆行者”
前幾天，當大家打開百度首頁時，可能發現了一些小變化：搜索框上方不再是熟悉的紅藍標志，而是展現出了一系列人物形象。
這些人物都是一直奮戰在抗擊新冠肺炎疫情一線的“最美逆行者”——我們想用這樣的方式，向他們致敬。
2月9日-2月10日，致敬抗疫醫護人員
2月11日-2月12日，致敬抗疫志愿者
2月13日-2月14日，致敬抗疫建設者
2月15日-2月16日，致敬抗疫專家組
2月17日-2月18日，致敬抗疫解放軍
當大家點擊這些 Doodle 圖片時，會進入相關的戰“疫”專題內容頁，在這里可以實時了解抗疫英雄的資訊動態。
醫護人員、志愿者、建設者、專家組、解放軍，他們用堅定的信念和堅毅的身軀，為這場戰斗筑起了最堅固的防線，守護著無數人的生命安全。我們向這些英雄致敬！
此前，我們向廣大網友發起了“抗疫英雄系列 Doodle”征集活動，希望各界設計師用手中的畫筆為抗疫英雄們創作特別的百度 Doodle，讓更多人看見疫情中的勇氣與希望。
最終，五組致敬 Doodle 在百度首頁上線。除此之外，我們還收到了26幅來自百度網友投稿的設計作品。謝謝大家的用心創作！
一起來欣賞吧!
蔡依彤
林文煌
劉昱
輕撫淡抹素人妝
相超
蔡依彤
林文煌
麥芽
董一孛
林文煌
劉昱
姚思思
趙會娟
不將就
李小蘭
李鈺
林文煌
孫紅花
陶澤崧
嚴安琪
張晶
馮勝方
高旭
林文煌
楊曉婧
張晶
在這場疫情狙擊戰中，不論是什么角色、什么崗位，都能貢獻自己獨特的力量。而這些精美的 Doodle 設計作品，正向人們傳達了必勝的信心和能量。我們衷心感謝所有設計師的用心創作.
除了通過百度 Doodle 為抗疫工作鼓勁，我們還運用技術的力量，專為疫情防控研發了各種產品和服務，希望為大家帶來實用有效的幫助，為戰“疫”貢獻一份力量。
我們成立了3億元的疫情及公共衛生安全攻堅專項基金，用于支持新型冠狀病毒等新疾病的治愈藥物篩選、研發等一系列抗擊疫情工作。
我們上線了“拒絕野味”的搜索提示，在百度 APP 搜索“蝙蝠”、“果子貍”、“穿山甲”、“豪豬”、“狍子”、“蛇”、“野豬”等關鍵詞時，大家都能看到“不可食用”的警告。
從百度“問醫生”免費在線咨詢，到新冠肺炎智能自測工具；從“疫情小區”地圖，到患者同乘查詢；從免費開放智能外呼平臺，到 AI 體溫檢測落地北京清河火車站……百度一直在行動。
當所有的決心、愛心和信心匯聚在一起，我們知道，陰霾和灰暗一定會被驅散，春暖花開的日子一定會到來。眾志成城，我們共渡難關！
轉自：站酷-百度BMD
探索全球頂尖設計好物
大部分人今年過年基本的生活狀態如下
如大家所知疫情緊急，
我們雖心系前線卻無力支援，
盡量避開人群不出門也算為國家做了些許貢獻。
但是宅家除了刷短視頻玩游戲，
作為設計師的童鞋們，
咋能不趁此長假好好充實自己呢
（學技能估計太難了），
在此推薦幾部經典的設計片，
娛樂的同時，也豐富下自己的設計知識。
01
《Abstract: The Art of Design》
《抽象：設計的藝術》
這是由Netflix公司出品的一部文化創意紀錄片，
豆瓣評分高達9.4，紀錄片總共8集，
每一集都探訪一位全球頂尖的設計師，
涉及插畫、建筑、汽車、攝影、平面、室內、場景、球鞋等領域，
用獨特的拍攝敘述手法展示設計師的創作過程，
揭開世界設計師非凡創意的藝術理念。
此片由《連線》雜志的主編Scott Dadich 創作并擔綱制片，并由奧斯卡最佳紀錄片導演Morgan Neville和Elizabeth Chai Vasarhelyi執導，
每一集都可以欣賞到電影畫面般的浸入感。
02
《The Genius of Design》
《設計天賦》
此片是BBC英國廣播公司
播出的一系列關于產品設計紀錄片，
一共包括五集，每集60分鐘，
通過采訪各知名設計師及相關的設計評論者，
講述產品設計的歷史和未來。
不管你喜歡Dieter Rams的隱忍
還是Phillipe Stark的奔放，
每個從事產品設計工作的朋友都能從這部紀錄片得到一些啟發。
03
《Modern Masters》
《現代藝術大師》
此片由BBC英國廣播公司
推出的一檔電視系列節目，
總共4集，分別介紹了20世紀四位重要的藝術大師：
安迪·沃霍爾（Andy Warhol）、馬蒂斯（Henri Matisse）、畢加索（Pablo Picasso）和達利（Salvador Dali）的工作與生活。
通過走訪四位藝術家們生前的居所、
藝廊及博物館等地，
向觀眾展示了他們偉大的藝術貢獻以及驚人的后世影響力。
你會發現，麥當娜的專輯封面、米菲兔的文具、
甚至是你家的沙發和電話，也許就來源于這四位大師的創作……
04
《Simon Schama's Power of Art》
《藝術的力量》
此片是由BBC英國廣播公司推出年度紀錄片，
總共8集。
講述卡拉瓦喬、貝尼尼、倫勃朗、雅克、透納、梵高、畢加索以及羅斯科八位藝術家的生平。
該系列結合了戲劇化的重塑、壯觀的攝影技術，
以及Simon Schama獨特而富有個性化的敘事，
全面剖析藝術大師們孕育和誕生藝術品時扣人心弦的故事。
這部紀錄片榮獲國際艾美獎最佳藝術節目、
2007年第60屆英國電影電視藝術學院獎最佳攝影紀實類等多項國際大獎。
05
《Design for Life》
《創意生活》
這是一檔BBC真人秀設計師比賽節目，共6集。
國際知名設計師Phillipe Starck
尋找英國最有前途的新人設計師。
通過全國選拔，
12名懷抱熱情與夢想的設計師來到到巴黎史塔克設計學院學習，
他們的目標是把自己的設計思路變成真實的產品。
Phillipe Starck設計了一系列任務，
挑戰設計師們的才華創意，但最后的贏家只有一個，
走到最后的人將獲得和世界頂尖設計師一起工作的機會，
準備面試的設計師們更要好好看一看喔。
06
《Objectified》
《設計面面觀》
這是一部以工業設計為主題的長篇獨立紀錄片。
展示了創造工業產品流程的實錄片斷，
并記錄了與世界頂尖設計師們的交談與討論。
采訪到的設計師們包括：
紐約現代藝術館館長Paola Antonelli，
慕尼黑BMW首席設計師Chris Bangle，
巴黎兄弟設計組合Ronan & Erwan Bouroullec，
美國明尼阿波利斯市Walker藝術中心平面設計師Andrew Blauvelt等世界最具影響力的設計師。
導演Gary Hustwit用洞察深切的鏡頭
記錄了這些在我們身邊隨處可見的工業設計產品，
看似稀松平常的設計背后，
卻是設計師們傾盡全力的良苦用心。
作為從事工業設計的童鞋來說，
自己的專業領域能被拍成紀錄片也是一件感到自豪的事。
07
《Urbanized》
《城市化》
Gary Hustwit 紀錄片設計三部曲的最后一部，
著重記錄一座城市的規劃與設計，
突出了致力于解決城市問題和提出對策的世界頂尖建筑師、規劃師、決策者等人。
世界上一半以上的人口生活在城市地區，
到2050年這個比例將變為75%以上。
雖然一些城市正在經歷爆炸式的增長，
但其他一些城市卻處在正在壓縮的過程中。
在住房、流動性、公共空間、民眾參與、經濟發展和環境政策之間取得平衡的挑戰正迅速成為一個普遍關注的問題。
中國的城市化進程也是如此，
因此觀看該片，會有更深刻的體會。
08
《我在故宮修文物》
由中國中央電視臺出品的一部三集文物修復類紀錄片，紀錄故宮里稀世珍奇文物的修復過程和修復者的生活故事，
把工匠精神這件嚴肅的事講得細膩、
溫軟且富有人情味。
該片是一部內蘊優裕的紀錄片，
在一個個對于文物修復師而言的稀松日常里，
我們能夠看到比修復鐘表、青銅器、木器、古琴更多的東西。
片中提到一句“修復文物是穿越古今與千百年前進行對話的特殊職業和生命體驗”，
在故宮神秘的身影下，這似乎更令人感到驚艷。
作為中國設計師，更應好好觀看，
正所謂，民族的，才是世界的。
09
《デザインあ》
《?。≡O計》
《啊！設計》是NHK一檔經典設計節目，
每一集邀請重量級設計師講述設計的秘訣，
深澤直人、仲條正義、祖父江慎、伊東豐雄，柴田文江……
雖是面向兒童，但視角獨特、充滿對思維的啟發，
贊嘆日本設計教育的同時也讓我們反思。
這部片放到大學設計系的課程都不為過，
因為很多一些基本的設計常識，
即使已經就業的童鞋可能都不了解，
值得設計師好好觀看。
10
《夢と狂気の王國》
《夢與狂想的王國》
該片為日本的一部紀錄片，
由砂田麻美執導，探秘吉卜力手繪動畫創作過程，
展現了宮崎駿、高畑勛、鈴木敏夫，
三位老人以及新時代年輕人對動畫的執著與熱愛。
關于宮崎駿、吉卜力的紀錄片已經很多了。
《夢與狂想的王國》則是選取了宮崎駿創作封筆之作《起風了》和高畑勛創作《輝夜姬物語》的這段時間為記錄對象，
著力表現了兩人的友誼歷史和之后的創作分歧。
宮崎駿乘坐火車去看自己的試片會。
看完后，他走上臺只說了一句話，
“對不起，生平第一次看自己的電影哭了?！?
相信看完后，大家都會想再刷一遍宮崎駿的電影。
這10部紀錄片，都是設計片中的經典，
可以收藏起來反復的觀看，
每個設計階段都會有不一樣的感悟。
片子通過搜索都可以找到片源，
找不到的可以在后臺回復（紀錄片），
會推送片源鏈接。
最后希望大家身體健健康康的，
祝福祖國早日抗疫勝利，加油！
文中涉及到的所有工具與插件，考慮到部分小伙伴可能下載外網資源太慢，我已將相關插件全部打包整理完畢，可在公眾號中領?。?
如期而至，這是標簽欄控件總結的第二期。
這一期我們來聊一聊標簽欄中的關鍵元素——圖標。在此之前，如果你還沒有了解標簽欄的平臺規范，可以回顧：《沒弄懂標簽欄之前，先不談用戶體驗》
圖標其實存在于界面中的許多地方，但因為這一期主要分析標簽欄，所以我會借標簽欄中較主流的圖標樣式，總結一套圖標制作與落地方法。這些方法在圖標制作過程中都是相通的，大家可以舉一反三。
圖標具體樣式風格的定義是非常主觀的，網絡上也流傳著許多的教程教大家如何設計五花八門的圖標，所以在這里我就不再贅述了。我主要來總結一下基礎的標簽欄圖標一般有哪些樣式變化。
我調研了諸多的應用程序，發現主流的APP標簽欄樣式變化，大致分為以下五種。其中最占比最多的是“由線型轉面型”。
調研的應用程序中，所有使用到線性圖標的應用程序，都將描邊粗細限制在1pt-2pt之間。
上一期我們講到，iOS定義了一套標簽欄圖標的尺寸規范。
iOS在這里所定義的尺寸并不是圖標文件最后輸出的尺寸，而是給設計師作圖時，針對不同圖標形狀的參考尺寸，目的是為了讓圖標的視覺大小看上去一致。
那么為什么iOS會根據不同的圖標形狀給出不同的圖標尺寸呢？因為50px*50px的正方形比50px*50px的圓形面積更大，所以正方形的視覺大小也會大于圓形。為了統一圖標的視覺大小，正方形要做適當的面積收縮處理。（矩形同理）
于是我們看到許多平臺都推出了圖標輔助網格規范。其實如果遵從“面積相等”原理，理論上所有的圖標網格都應該由下面這一套推理公式得出（以Material Design 標準圖標網格為例）：
但實際情況是，不同平臺的圖標輔助網格規范建議尺寸都有一定的差異。原因就在于，雖然有時候我們參考“面積相等”原則對圖標視覺尺寸進行了規范，但項目落地后發現視覺上可能還是有一些不協調，所以最終設計師還是會憑借自己的主觀判斷再進行微調。
記?。汉玫脑O計作品是理性的設計理論與設計師本身感性的碰撞結果，二者缺一不可。
iOS規定標簽欄圖標的輸出尺寸統一為31pt*28pt；Material Design規定標簽欄圖標的輸出尺寸統一為24dp*24dp。
但我們發現，在借助了圖標網格解決了圖標視覺大小的問題之后，每一個不同形狀的圖標，尺寸其實是不同的。為了方便前端落地，我們在輸出切圖文件時，要保持每一個圖標文件的輸出尺寸是相同的。該怎么辦呢？
于是我們將一組圖標都放置在一個比圖標本身略大的相同尺寸容器中。而圖標與這個容器之間的空白像素，正好也幫助我們規避了圖標落地后，切圖邊緣像素可能被截斷的現象發生，所以我們稱這個區域為“安全邊距”。
對于安全邊距的規定：Material Design全平臺規定圖標的安全間距統一2dp；iOS則根據不同的圖標使用場景給出的不同的圖標網格和圖標安全間距。
標簽欄的圖標一般分為靜態圖標和動態圖標兩種。
靜態圖標的實現方法相對容易，可以與前端溝通確定本次項目交付的標簽欄圖標文件是采用位圖還是矢量圖。如果是位圖建議交付.png格式文件；如果是矢量圖建議交付.svg格式文件。
使用位圖時請注意以下兩點：
1）不同項目環境輸出的切圖套數不同
· 交付iOS原生的標簽欄圖標切圖需要 @1x/@2x/@3x 三種倍率的切圖文件；
· 交付Android原生的標簽欄圖標切圖需要 @1.5x/@2x/@3x/@4x 四種倍率的切圖文件（@0.75x和@1x切圖層分別用于ldpi和mdpi分辨率設備，但這些設備現在幾乎已退出市場，所以可不考慮，但最終視項目真實需求確定。）；
· 交付web項目的切圖需要試情況而定，一般常用 @2x 切圖，因為@2x向下適配@1x、向上適配@3x，都不會產生太大的圖片失真。但有時候前端小哥會要求用到其他倍率切圖，所以最終以具體需求而定。
請注意：這里我所提到的倍率全都是“絕對倍率”，這個概念非常關鍵。
“絕對倍率”指的是：以上所有的倍率都是針對 @1x 設計稿下的輸出倍率尺寸。而當你使用@2x作圖時，為了保證“絕對倍率”不變，你的切圖輸出倍率就應該設置為 @0.5x/@1x/@1.5x 。
如果你在@2x下作圖，卻依然保持輸出 @1x/@2x/@3x 的切圖，那你輸出的文件尺寸最終其實是 @2x/@4x/@6x。
有一點繞的話，我們以Sketch導出位圖切圖為例：
所以如果你日常使用的是Sketch，也是用Sketch原生導出工具，那你的切圖預設應該根據你的作圖尺寸而定，見下表：
如果你日常使用的是PS，用Cutterman切圖，那么Cutterman會自動識別你當前的畫板，然后根據它的寬（橫屏情況下是高）來設定它的基準分辨率。那么你在任何情況下輸出 @1x/@2x/@3x 的切圖，其實都是“絕對倍率”，不用像Sketch當中一樣換算。前提是“設置當前畫布為：Auto（自動識別）”。
假設你在@2x下作圖，執意不管不顧“絕對倍率”，又忘了交代前端人員手動處理切圖尺寸的話，那你所有的切圖尺寸實際都是設計稿所需圖標尺寸的2倍。就算前端小哥幫你手動處理了切圖尺寸，每一張切圖所包含的像素信息，都比項目真實所需的要多很多，完全就是在徒增所需切圖文件的大小。
2）注意切圖文件大小
切記，公司的線上項目中，用戶從服務器下載的每一單位的流量都是要公司花錢的，所以許多項目管理者都是很在意控制線上文件大小的。于是壓縮切圖是UI必備的技能之一。
雖然圖標的文件大小一般只有幾KB，但是項目大了難免積少成多，所以在真實項目中，不管任何切圖我都會手動壓縮一次。
這里推薦一個壓縮.png文件大小，但幾乎不會產生失真的免費網站 tinypng。
位圖切圖會面臨交付的倍率圖過多、容易失真、文件大小難控制等問題，但對于矢量圖，這些問題都得到了解決。目前.svg矢量圖落地也在項目中越來越流行了。UI可以在Sketch或Ai中制作。
一般與前端人員對接有在線圖標庫對接與本地文件對接兩種。
在線矢量圖標庫有很多，國內比較流行的是阿里巴巴矢量圖標庫-iconfont；本地對接就是直接將文件發送給前端人員，他們會自行進行項目文件的管理與調用。
如果.svg切圖輸出后，與設計稿中樣式不符，請注意排查以下三點：
1、svg不支持漸變顏色填充；
2、svg不支持描邊，請將所有的描邊輪廓化。Sketch中可通過“圖層-輪廓化”（快捷鍵??O）；Ai中可通過“對象－路徑－輪廓化描邊”；
3、要確保一組圖標的文件尺寸一致，需在圖標下方增加一個透明方形，和圖標一同導出。
為了提升用戶體驗和產品趣味性，動效微交互的標簽欄圖標也越來越流行了。
動效在前端落地的方法其實有很多：
· 前端代碼直接實現：代碼是很強大的，但通常用代碼直接寫復雜動效會很浪費項目時間。簡單維度的動效如位移、透明度、大小變化等可以借助代碼，但復雜動效就不要去打擾前端小哥了；
· 直接剛gif：這已經是老舊技術時代的動畫解決方案了，文件大且請求文件也需要時間，有時候無法給用戶及時的觸控反饋。再者它是位圖的原因，在高分辨率屏幕上縮放容易失真。
· png序列幀：我們知道，動畫是一張一張的靜態圖交替變化形成的。如果將每一幀動畫都拆分成一張圖片，就有了png序列幀。所以一套動畫的png序列幀往往非常多，文件大小自然就變大了。所以后來也有團隊引進了雪碧圖的方式，但文件大小依然不樂觀。并且同樣是位圖的原因，高分辨率屏幕容易失真。
· Facebook Pop/Rebound/Keyframes：Facebook Pop/Rebound是Facebook給iOS和Android提供的常用動畫預設，是較早將動效代碼化的開源技術方案，但動畫效果預設只有彈簧/衰減等一些簡單樣式。后來Facebook又推出了Keyframes，允許設計師自己在Ae中自定義動畫并導出，然后交付給前端人員。
· Lottie動畫：和Facebook Keyframes相同，都是結合Ae輸出動畫代碼。但是Lottie更厲害的地方在于，它比起Facebook Keyframes來支持的Ae樣式更多，例如蒙版、遮罩、修剪路徑等等。
所以綜上所述，落地標簽欄動態圖標，目前最可行的還是Lottie動畫。
Lottie是Airbnb開源的一個跨平臺動畫庫。表現層面它是一張圖片，但實現的方式是通過代碼，所以它是矢量的。很花式的動畫也可以把文件大小做到非常小。
UI與前端對接是通過交付一個json代碼文件。
如果這是你第一次接觸Lottie，再好不過的體驗方法就是玩一玩阿里提供的一站式動畫平臺：犸良動畫 。它最底層采用的技術就是Lottie，只是被阿里二次封裝了許多預設的動畫效果，你可以自定義其中的元素與參數，然后試著導出你的第一個json文件~
接下來是簡單粗暴的UI與前端對接實現Lottie動畫落地的全步驟參考。在此之前，想要全方位了解Lottie的相關信息，請參閱Lottie官方說明文檔。
· 步驟一：安裝Ae和bodymovin
制作Lottie動畫，首先你必需兩個工具：Ae和bodymovin插件。
Ae版本要求為Ae CC2014。又因為據很多設計師反饋，目前bodymovin在漢化后的Ae中使用會出現諸多問題，所以后面的教程都是基于Ae英文版。如果你漢化了Ae，最好在需要制作Lottie動畫時取消漢化。
然后獲取bodymovin。bodymovin插件更新至今，版本已非常多，并不一定版就適用于你當前的項目，因為前端使用的bodymovin解析包可能無法解析你用版bodymovin插件輸出的json文件。
一旦確定使用Lottie，前端人員會在GitHub查詢Lottie相關文檔的，所以UI只需要配合前端確定一下合適的bodymovin插件版本就可以了。最終走查時，一定要確保當前bodymovin輸出的動畫在項目所需要運行的所有環境中可運行，才說明UI使用的bodymovin插件和前端使用的bodymovin解析包版本是兼容的。
獲取了bodymovin后，將bodymovin拖入到ZXP Installer中，ZXP Installer會自動識別插件安裝到Ae。
安裝完成后，就可以在AE的“窗口-擴展”中看到bodymovin啦~
· 步驟二：將Sketch或Ai中的文件導入Ae
如果你技術嫻熟，當然也可以直接在Ae中繪制圖案動畫。但如果你還是習慣先在其他軟件中繪制好基礎圖案，再到Ae中制作動畫，那你需要了解如何將圖案導入Ae。
Ai和Ae都是Adobe旗下的工具，所以Ae是可以完美解析.ai文件的，如果你是使用Ai作圖，可直接存儲為.ai文件，再在Ae中打開。
如果你使用的是Sketch，可以先導出為.svg，再用Ai打開該.svg文件，轉換存儲格式為.ai，最后到Ae中打開。
當然，Sketch還有直接和Ae對接的插件，AEUX（前身Sketch2AE）。需要在Sketch和Ae中同時安裝AEUX插件，Sketch負責傳送，Ae負責接收。具體的使用方法可以在官網教程中查看，我就不再贅述了。
·步驟三：制作動效并輸出
和靜態圖標同理，為了保證落地時圖標視覺大小一致，一組動效圖標輸出的文件尺寸應該是相同的。所以在你制作動畫之前需要確定合成文件的尺寸。Lottie官方建議：因為Lottie輸出的是矢量動畫，所以建議以@1x輸出動效，前端人員在任何屏幕上放大并不會失真。
在制作之前請務必詳細閱讀Lottie所支持的Ae參數文檔，以免辛苦做出的動效，前端無法解析。特別提醒：原生環境中bodymovin是不支持解析Ae表達式的。
完成制作動效后，就可以通過bodymovin導出動效了。
·步驟四：預覽與交付
導出完成后在你的目的地文件夾中將存在一個.json文檔，如果你的動效中還使用了位圖，系統還會自動生成一個images文件夾。這些都是你需要交付給與你對接的前端開發人員的文件。
.json文件中記錄的動效代碼UI不需要過多關心，但是其中兩個信息你是一定要了解的。它們是你與前端對接溝通和獲悉文件信息的一些關鍵參數。
UI自檢動效或其他相關人員需要預覽動效的時候，可以用LottieFiles，拖入.json文件即可預覽。iOS和Android還可以下載LottieFiles APP，掃描預覽頁中的二維碼即可在移動端預覽。
整個制作圖標的流程我已經全部整理出來了。首先要注意圖標的規范，然后制作位圖、矢量、動效圖標時的注意點，我幾乎把我在真實項目中踩過的坑都告訴大家了。剩下的創造性的環節就交給你了！
轉自：站酷-UCD耍家
保持好奇，巧妙融合，追求卓越，自然而然
藍藍設計的小編 http://www.syprn.cn
