<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          淺談數據可視化及經驗分享(上)

          ui設計分享達人

          結合學習的可視化知識以及自身的經驗寫下了這篇關于數據可視化的分享


          轉自:站酷-四喜sixi 

          10天,5個百度Doodle,成千上萬的抗“疫”英雄

          ui設計分享達人

          他們是“最美逆行者”

           

          前幾天,當大家打開百度首頁時,可能發現了一些小變化:搜索框上方不再是熟悉的紅藍標志,而是展現出了一系列人物形象。


           


          這些人物都是一直奮戰在抗擊新冠肺炎疫情一線的“最美逆行者”——我們想用這樣的方式,向他們致敬。

           

           

          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

          10部好片,評分9+,給你腦洞一個解釋

          ui設計分享達人

          探索全球頂尖設計好物



          大部分人今年過年基本的生活狀態如下



          如大家所知疫情緊急,

          我們雖心系前線卻無力支援,

          盡量避開人群不出門也算為國家做了些許貢獻。

          但是宅家除了刷短視頻玩游戲,

          作為設計師的童鞋們,

          咋能不趁此長假好好充實自己呢

          (學技能估計太難了),

          在此推薦幾部經典的設計片,

          娛樂的同時,也豐富下自己的設計知識。


          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

          《デザインあ》

          《??!設計



          《??!設計》是NHK一檔經典設計節目,

          每一集邀請重量級設計師講述設計的秘訣,

          深澤直人、仲條正義、祖父江慎、伊東豐雄,柴田文江……


          雖是面向兒童,但視角獨特、充滿對思維的啟發,

          贊嘆日本設計教育的同時也讓我們反思。

          這部片放到大學設計系的課程都不為過,

          因為很多一些基本的設計常識,

          即使已經就業的童鞋可能都不了解,

          值得設計師好好觀看。


          10

          《夢と狂気の王國》

          《夢與狂想的王國



          該片為日本的一部紀錄片,

          由砂田麻美執導,探秘吉卜力手繪動畫創作過程,

          展現了宮崎駿、高畑勛、鈴木敏夫,

          三位老人以及新時代年輕人對動畫的執著與熱愛。


          關于宮崎駿、吉卜力的紀錄片已經很多了。

          《夢與狂想的王國》則是選取了宮崎駿創作封筆之作《起風了》和高畑勛創作《輝夜姬物語》的這段時間為記錄對象,

          著力表現了兩人的友誼歷史和之后的創作分歧。


          宮崎駿乘坐火車去看自己的試片會。

          看完后,他走上臺只說了一句話,

          “對不起,生平第一次看自己的電影哭了。”

          相信看完后,大家都會想再刷一遍宮崎駿的電影。


          這10部紀錄片,都是設計片中的經典,

          可以收藏起來反復的觀看,

          每個設計階段都會有不一樣的感悟。

          片子通過搜索都可以找到片源,

          找不到的可以在后臺回復(紀錄片),

          會推送片源鏈接。


          最后希望大家身體健健康康的,

          祝福祖國早日抗疫勝利,加油!

          轉自:站酷-Hang5174

          耍好控件 | 了解圖標落地,讓前端再愛你一次

          ui設計分享達人

          文中涉及到的所有工具與插件,考慮到部分小伙伴可能下載外網資源太慢,我已將相關插件全部打包整理完畢,可在公眾號中領取!

          如期而至,這是標簽欄控件總結的第二期。

           

           

          這一期我們來聊一聊標簽欄中的關鍵元素——圖標。在此之前,如果你還沒有了解標簽欄的平臺規范,可以回顧:《沒弄懂標簽欄之前,先不談用戶體驗》

           

          圖標其實存在于界面中的許多地方,但因為這一期主要分析標簽欄,所以我會借標簽欄中較主流的圖標樣式,總結一套圖標制作與落地方法。這些方法在圖標制作過程中都是相通的,大家可以舉一反三。

           

           

          一、標簽欄圖標規范

           

          1.1 圖標樣式

           

          圖標具體樣式風格的定義是非常主觀的,網絡上也流傳著許多的教程教大家如何設計五花八門的圖標,所以在這里我就不再贅述了。我主要來總結一下基礎的標簽欄圖標一般有哪些樣式變化。

           

          我調研了諸多的應用程序,發現主流的APP標簽欄樣式變化,大致分為以下五種。其中最占比最多的是“由線型轉面型”。

           


           

          調研的應用程序中,所有使用到線性圖標的應用程序,都將描邊粗細限制在1pt-2pt之間。

           

           

          1.2 圖標視覺大小

           

          上一期我們講到,iOS定義了一套標簽欄圖標的尺寸規范。

           

           


          iOS在這里所定義的尺寸并不是圖標文件最后輸出的尺寸,而是給設計師作圖時,針對不同圖標形狀的參考尺寸,目的是為了讓圖標的視覺大小看上去一致。

           

          那么為什么iOS會根據不同的圖標形狀給出不同的圖標尺寸呢?因為50px*50px的正方形比50px*50px的圓形面積更大,所以正方形的視覺大小也會大于圓形。為了統一圖標的視覺大小,正方形要做適當的面積收縮處理。(矩形同理)

           

           

          于是我們看到許多平臺都推出了圖標輔助網格規范。其實如果遵從“面積相等”原理,理論上所有的圖標網格都應該由下面這一套推理公式得出(以Material Design 標準圖標網格為例):

           

           

          但實際情況是,不同平臺的圖標輔助網格規范建議尺寸都有一定的差異。原因就在于,雖然有時候我們參考“面積相等”原則對圖標視覺尺寸進行了規范,但項目落地后發現視覺上可能還是有一些不協調,所以最終設計師還是會憑借自己的主觀判斷再進行微調

           
          記住:好的設計作品是理性的設計理論與設計師本身感性的碰撞結果,二者缺一不可。

           

          1.3 圖標輸出尺寸

           

          iOS規定標簽欄圖標的輸出尺寸統一為31pt*28pt;Material Design規定標簽欄圖標的輸出尺寸統一為24dp*24dp。

           

          但我們發現,在借助了圖標網格解決了圖標視覺大小的問題之后,每一個不同形狀的圖標,尺寸其實是不同的。為了方便前端落地,我們在輸出切圖文件時,要保持每一個圖標文件的輸出尺寸是相同的。該怎么辦呢?

           

          于是我們將一組圖標都放置在一個比圖標本身略大的相同尺寸容器中。而圖標與這個容器之間的空白像素,正好也幫助我們規避了圖標落地后,切圖邊緣像素可能被截斷的現象發生,所以我們稱這個區域為“安全邊距”。

           

           

          對于安全邊距的規定:Material Design全平臺規定圖標的安全間距統一2dp;iOS則根據不同的圖標使用場景給出的不同的圖標網格和圖標安全間距。


          二、靜態圖標


          標簽欄的圖標一般分為靜態圖標和動態圖標兩種。


          靜態圖標的實現方法相對容易,可以與前端溝通確定本次項目交付的標簽欄圖標文件是采用位圖還是矢量圖。如果是位圖建議交付.png格式文件;如果是矢量圖建議交付.svg格式文件。


          2.1 位圖圖標

           

          使用位圖時請注意以下兩點:

           

          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。

           

           

          2.2 矢量圖

           

          位圖切圖會面臨交付的倍率圖過多、容易失真、文件大小難控制等問題,但對于矢量圖,這些問題都得到了解決。目前.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動畫。

           

          3.1 Lottie的背景

           

          Lottie是Airbnb開源的一個跨平臺動畫庫。表現層面它是一張圖片,但實現的方式是通過代碼,所以它是矢量的。很花式的動畫也可以把文件大小做到非常小。

           

          UI與前端對接是通過交付一個json代碼文件。

           

          如果這是你第一次接觸Lottie,再好不過的體驗方法就是玩一玩阿里提供的一站式動畫平臺:犸良動畫 。它最底層采用的技術就是Lottie,只是被阿里二次封裝了許多預設的動畫效果,你可以自定義其中的元素與參數,然后試著導出你的第一個json文件~

           

          3.2 Lottie如何上手

           

          接下來是簡單粗暴的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耍家 

          交互設計:如何做到驚喜?

          ui設計分享達人

          保持好奇,巧妙融合,追求卓越,自然而然


          上一篇,探討了如何做到品質。這一篇,探討下如何做到驚喜。

          一家之言,未必全面,甚至未必正確。歡迎交流探討。


          01
          交互設計的驚喜,是什么?

          之前的文章,有簡單定義過交互設計的“驚喜”,即為:超出用戶預期,并讓用戶開心。

          具體而言有兩類,分別是:小驚喜、大驚喜。

          1 小驚喜

          所謂小驚喜,是指一些頗具趣味性或人文屬性的交互設計小細節。


          先說趣味性。常見的有兩類,第一類是比較好玩的動效,第二類是一些小功能。第二類有時也會包含第一類。

          動效這塊,大家比較熟悉的,有 iPhone 上刪除應用前圖標的抖動,仿佛是嚇的發抖,也可能是在搖頭求饒;還有移動端登錄 B 站、輸入密碼時,動畫人物的捂眼捂臉動作。

          (B 站登錄頁面)

          小功能這塊,也可以分成兩類。一類是隱藏的小功能,一類是有趣的小功能


          很多隱藏功能,頭幾次用的時候,多少會有一些驚喜之感。

          比如在訂閱號消息列表頁,某個公眾號你已經幾個月沒看過,對它失去了興趣和信任。這時,嘗試長按這個公眾號的頭像或名稱,會呼出一個包含“刪除消息”和“取關”功能的彈窗。

          (訂閱號消息列表)

          還有些隱藏功能,既能讓用戶覺得驚喜和方便,又能引發用戶思考。這種思考,可能會讓用戶感嘆設計之妙,也可能也會給用戶一種猜對謎語的欣喜之感。

          比如用墨刀的時候,嘗試按數字鍵 1,會呼出“內置組件”這個使用頻率非常高的功能,會讓人覺得墨刀很聰明。

          如果再仔細看一下,會發現,“內置組件”的縮略圖標,和其他 4 個諸如“我的組件”、“圖標”等功能的縮略圖標,并成一列。這 5 個縮略圖標的排列順序(上到下),和它們快捷鍵("、"鍵和數字鍵1、2、3、4)的排列順序(左到右),是完全一致的。不得不說,這是一個簡單又巧妙的設計。


          再比如朋友圈里,某個不熟的好友每天都發集贊的小廣告,搞的我們不勝其煩。長按其頭像,會呼出設置權限(屏蔽等)的功能。

          有意思的是,長按好友名字,則不會呼出這個功能。要知道點擊頭像或名字是都能進入好友主頁的;另外剛才那個例子,長按公眾號頭像或名字,也都能呼出取關的彈窗。

          個人的理解,生活中,我們用力長按一個人,通常是表達強烈不滿,比如打架時。比起長按名字,長按頭像更像是長按真人,所以也更能表達我們的不滿。


          說完隱藏的小功能,再說下有趣的小功能。比如微信聊天里的扔骰子、石頭剪刀布,微信給朋友發生日快樂后漫天飄落的蛋糕,拍照軟件里的貼紙,等等。

          最后說下帶有人文屬性的交互設計小細節。常見的有如下類型:幫助弱勢、關照情緒、表達情感、保護隱私。


          幫助弱勢這塊,比如 iPhone 的輔助功能,里面有針對視力障礙的放大鏡功能、有針對不識字群體的旁白功能。

          關照情緒這塊,很重要的一點,就是避免引起用戶的負面情緒。比如微信的刪好友是單方面刪除,被刪時我們很難察覺到,而且微信也不會通知我們。個人覺得,微信之所以不通知我們,其中一點,就是不給我們添堵。類似的還有,微信消息沒有“已讀”功能,這就大大減輕了接收者的回復壓力。

          表達情感這塊,比較為人所知的例子,5 月 20 號這天,微信紅包的限額,從 200 元升到了 520 元。還有一個例子,在微信聊天里發一個“ohh”,長按并點翻譯,結果也是一個驚喜。

          保護隱私這塊,比如借助 iPhone 的“引導式訪問”功能,可以讓小朋友只能訪問你的某個視頻應用來看動畫片。再比如別人用你電腦的時候,如果你不想讓對方看到你的微信,就可以通過手機微信來鎖定或退出電腦版微信。

          2 大驚喜

          所謂大驚喜,是指那些系統性大創新,并且能夠引領潮流、代表未來的交互設計。通常而言,這些大驚喜,最開始給用戶的感覺,就是酷。

          iPhone 就是典型例子之一 。

          2007 年的初代 iPhone,帶來了當時的大屏幕:3.5 寸屏幕,以及純觸摸屏,和極為靈敏的觸控體驗。

          2011 年,Siri 同 iPhone 4S 一起問世,為我們帶來了語音交互。如今,在 100 元就能買到品牌類智能音響的情況下,依靠語音交互的智能音響也在慢慢走入尋常百姓家。

          也許后喬布斯時代的 iPhone 創新不如以前,但不可否認的是,時至今日,iPhone 依然在引領潮流,在給我們大驚喜。比如這幾年流行的手機無線充電和以 AirPods 為代表的極簡的無線耳機。

          以上是比較廣為人知的交互設計,還有一些不太為人所知的設計。比如在家里網購一條床單,但是不知道床的尺寸,家里又沒有尺子。這時,打開 iPhone 里的測距儀這款 App,就可以量出床的尺寸,會不會覺得有點酷。

          (測距儀 App)

          微信在引領潮流方面也有一些建樹,比如極大的普及了二維碼和掃一掃。小程序作為一種體驗接近原生 App、同時又不用下載的產品,也正在引領新一輪的潮流。

          還有一個比較酷的功能,就是以圖搜圖。筆者最早用過百度和谷歌的相關功能,主要是在電腦上搜索相似的圖片,使用頻率極低。

          假設一個場景,比如在路上看到一個陌生人的外套很好看,但又不好意思上前問,就可以拿起手機,利用淘寶的拍立淘功能,拍張照就能馬上看到相同或相似的商品。

          如果淘寶上沒有搜到類似商品,還可以用微信的掃一掃識物。和拍立淘相比,區別之處有兩點。第一,不用拍,直接能識別,不過通常得等 1-3 秒;第二,識物結果里面,除了商品,可能還會有百科詞條和資訊。


          02
          交互設計:如何做到驚喜?

          個人覺得,有 4 個要點:既要有好奇心,又要有卓越心;既要天馬行空,又要保持自然。

          聽起來可能有點亂,且聽筆者一一道來。


          1 保持好奇心

          筆者觀察身邊讀小學的小孩,發現,當大人聊天時,特別是談正事時,小孩特別喜歡坐在旁邊聽,而且聽的很認真。小孩有時也會說兩句,或是問問題,或是發表自己的看法。

          看得出來,小孩對成年人的世界,懷有極大的好奇心。實際上,不止于成年人的世界,小孩對周遭世界都有比較強烈的好奇心。

          整體而言,成年人對周遭世界的好奇心,遠不如小孩。我們互聯網從業者也不例外。

          好奇心和交互設計,有什么關系?

          交互設計,某種程度上,也是一種創作。好的創作,一定來自生活。這就需要我們去觀察生活。

          觀察生活,非常重要的一點,就是好奇心,對周遭人、事、物要有足夠的好奇心。

          比如上文提到的例子,在 iPhone 上刪除應用前,應用圖標會抖。這種抖是一種趣味隱喻,既可以理解成嚇的發抖,也可以理解成搖頭求生。如果對生活沒有足夠的好奇心,是很難留意到這種生活細節,并把它們作為一種隱喻運用到交互設計中的。

          以上是關于好奇心,還有一種特質,也是在小孩身上表現突出,同時也和本文主題有關,那就是:童趣。

          還是上文的例子,在 B 站 App 上輸入登錄密碼時,動畫人物會捂眼睛。這個設計,可能不會打動所有用戶,但至少一部分用戶會覺得比較有趣。如果我們內心沒有一點童趣,可能也會覺得,這個設計,沒啥意思。

          玩是人的天性。對于比較好玩的交互設計,大部分人是比較容易產生共鳴的。實際上,據筆者觀察,我們大部分從業者是有童趣的。我們比較缺的,是好奇心。

          那么,怎樣判斷自己是否擁有足夠的好奇心,其標志是什么?

          個人觀點,有兩個標志。第一,是對與個人利益無關的生活小事的關注,遠多于對個人利益本身的關注。第二,觀察和思考,遠多于評價和自大;追本和溯源,遠多于偏見和傲慢。

          為什么會提到個人利益?

          因為,通常而言,個人利益,尤其是短期利益(比如少花時間設計和修改原型),往往會和用戶體驗存在一個此消彼長的關系。

          如果過于關注個人利益,不僅很難照顧到用戶體驗,甚至會傷害用戶體驗。至于給用戶帶來驚喜,就更無從談起了。

          回到現實當中。在時代洪流面前,好奇心的兩個標志,顯得很難,該如何實現?

          關鍵在于找到背后的源動力。這個源動力,在筆者看來,有兩點,分別是:求知若渴、淡泊寧靜。


          求知若渴,可以源源不斷的驅動我們去觀察、去思考萬事萬物的規律和聯系。

          淡泊寧靜,正如諸葛亮在《誡子書》中所說,“非淡泊無以明志,非寧靜無以致遠”。人的心力和精力終歸是有限的,如果我們沉迷名利、物欲、享樂,就難有興趣和精力去琢磨萬事萬物了。

          所以,只要找回自己童年的那種求知若渴,同時修身養性到淡泊寧靜,這份好奇心,就會回來。

          2 巧妙融合

          某種程度上,很多帶給我們驚喜的交互設計,都是一種巧妙融合。

          筆者把這種巧妙融合,初步分成了三類,分別是:簡單融合、直接融合、委婉融合。


          簡單融合,最常見的就是隱藏功能。把一個較為簡單的操作動作,比如長按、雙擊、下拉、左滑等,和一個合適的功能,融合在一起。用電腦時我們常說的快捷鍵,也屬于這一類。

          通常而言,操作對應什么功能,講究的是合適,并無固定章法束縛。比如在微信朋友圈,發表文字的功能可以靠長按(相機圖標)喚起,設置權限的功能也可以靠長按(好友頭像)喚起。所以,簡單融合這塊,可供我們發揮的空間很大。

          另外,簡單融合最常見的形式——隱藏功能,既實現了界面的簡潔,又帶來了一定驚喜。

          簡單融合,既簡單,又實用。建議大家充分開發這一塊。

          直接融合,是指將生活中的趣味性,直接搬到軟件中,搬到交互設計中。比如微信聊天中的扔骰子、石頭剪刀布,以及漂流瓶、抽獎等。

          這一類融合,有點像商場里的電玩城,雖然我們不會經常去玩,但確實比較好玩。

          委婉融合,是指用明喻或隱喻的手法,將生活中微不足道的一些細節,移植到交互設計中。

          這種移植,有時是直白的。比如 Mac 上打開應用時,其圖標會在 dock 欄里有規律的彈跳,這會讓我們聯想到皮球的彈跳。

          這種移植,有時是隱晦的。比如 iPhone 上刪除應用前,其圖標會抖。這種抖,是害怕還是求饒,任憑我們想象。

          這種移植,有時是無聲的。比如在朋友圈,要想呼出隱藏的設置權限功能,只能長按頭像,長按名字則不行。這個設計,不乏想象空間。如果不嘗試長按名字,則不會發現這個細節。

          委婉融合,有時會帶一些趣味性。更為重要的是,它能夠引發我們的思考和想象,所以是一種很出彩的融合。這種融合,也會賦予交互設計,一種禪的味道。

          整體而言,筆者非常推薦委婉融合。

          3 追求卓越

          如果目標是小驚喜,則保持好奇心、并做到巧妙融合,基本足矣。

          如果目標是大驚喜,則需要雄心壯志,需要舍我其誰,需要追求卓越。

          日常工作中,可能會有這樣的對話。“這個動效/功能,實現不了”。

          大驚喜里的幾個例子,比如初代 iPhone 的觸控體驗,iPhone 里的測距儀,微信的掃一掃識物。這種設計,意味著要修一條最好的長城,背后往往有很多技術難題要攻克,有很多臟活累活要做。

          如果團隊文化就是做出最優秀的交互設計,那么,“實現不了”這句話,估計就聽不到了。取而代之的,可能是:“還在研究中”,“下個大版本能上”。

          4 自然而然

          提到驚喜,還有一款值得研究和學習的產品,那就是錘子手機的 Smartisan OS。

          個人觀點,在小驚喜方面,Smartisan OS 頗有建樹。在大驚喜方面,Smartisan OS 也進行了一些值得學習的探索。

          先說小驚喜,比如華麗而細膩的桌面翻頁動畫,比如四指橫劃桌面可以切換桌面背景。還有一些貼心的小功能,比如靜音可以設置時間,比如方便的長截屏。

          (靜音可設置時間)

          (長截屏)

          再說大驚喜。2016 年 10 月發布的一步和大爆炸,是比較大比較系統的功能,在當時也很新。錘子公司也一直有宣傳這兩個功能。所以相對而言,這兩個功能是 Smartisan OS 的大驚喜。

          筆者的備用機是錘子手機,身邊也有朋友在用錘子手機。以一步為例,這個功能,筆者體驗過很多次。但平常很少用,身邊朋友的情況也類似。

          (一步)

          根據使用情況和主觀感受,個人覺得,一步這個大驚喜,還存在進步空間,主要有兩個方面。

          第一,宏觀層面。一步作為新生事物,好比一顆新種子。種子破土而出時,是一顆嫩芽,而不是一棵大樹。新生的一步功能繁多,猶如一棵破土而出的大樹,一方面有違自然規律,另一面因為功能繁多,很多用戶無法一下子看懂,看不懂可能就不想用了。

          第二,微觀層面。一步這棵新大樹,結了很多不同的果子,比如拖拽圖片到其他應用、切換后臺應用、展示最近圖片/文件等。這些果子,是用戶真正需要的嗎?這個是要存疑的。

          比如拖拽圖片到朋友圈就能發朋友圈這個設計。通常而言,我們發到朋友圈的圖片都是精挑細選的,會占用一定量的時間,比如旅游或聚會結束后發的照片。一步解決的是效率問題。發朋友圈的時候,少點幾下這種效率問題,優先級是比較靠后的,我們沒那么在乎。

          還有拖拽圖片/文件這個交互動作,大家通常在電腦上用的比較多,在手機上是沒有這個習慣的,實際上應用場景也少。在手機上,大家一般只習慣拖拽應用圖標。

          還有切換后臺應用這塊,大家第一個想到的,一定是系統自帶的,已經用慣了。而且喚起速度比一步快,點擊面積也比一步大。

          總的來說,微觀層面上,比較缺讓大家能馬上想到一步的功能點。

          最后,總結一下。對于領先時代、引領潮流的交互設計,需要做到自然。

          具體而言,就是,大驚喜是一種系統性的大功能,好比一棵大樹。這棵大樹,最好有一個從種子到果子的生長過程,這樣最自然,生命力也會最旺盛。

          因為,從破土而出的嫩芽階段,就可以通過用戶反饋和數據來檢驗,這種嫩芽,是不是真的對用戶有價值。如果價值不大或沒有價值,還可以再調整。如果長成大樹結滿果子,再去調整,就很難了。


          結語

          交互設計小細節,如果有一定的趣味性或人文屬性,則是小驚喜。

          系統性工程的交互設計,如果最初感覺很酷,而且能引領潮流、代表未來,則是大驚喜。

          始終保持孩童身上那種非功利的好奇心,用心觀察并思考生活中的小事;

          將生活小事和交互設計巧妙融合起來;

          以上兩點,可以幫我們做出小驚喜類的交互設計。

          追求卓越,獨立思考,做最酷最好的交互設計;

          酷是結果也好,是目標也好,都不是最重要的。最重要的是,避免刻意和心切。醞釀大驚喜,猶如培養一個新生的孩子,需要投入極大耐心和精力,需要讓孩子自然成長。沒有家長會教半歲的孩子唱歌、把 3 歲的孩子送到高中念書。

          再加上以上兩點,可以幫我們做出大驚喜類的交互設計。

          最后,用愛因斯坦的一句話來共勉。

          想象力比知識更重要。


          “抗擊肺炎”數據產品體驗分析報告

          ui設計分享達人

          站在設計師的角度去分析這場戰疫下各大互聯網公司快速響應產出的數據產品“抗擊肺炎”專題。

          轉自:站酷-Yuki_yee

          實戰:如何利用柵格系統做響應式設計- 后臺設計經驗總結(2)

          ui設計分享達人


          左右布局響應策略動態演示??紤]到gif被壓縮后效果不理想,所以做了一小段視頻來幫助大家更好的理解響應策略。視頻如果看著不清晰,選擇清晰度為1080p藍光觀看即可

          Image title

          Image title

          一、什么是響應式?

          按照本人自己的理解,響應式就是通過合理的設計方案配合規范的技術實現策略,使同一個Web頁面在各個終端(設備)不同分辨率屏幕上都能有最佳的用戶體驗。

          Image title

          這里說是用戶體驗而不是視覺效果是因為用戶體驗包含了性能、交互、效率等多方面內容,也就是說,對于一個線上的響應式頁面,我們不僅要關注視覺上看到的,也要關注我們操作、使用時的感受,這些綜合因素最終影響著用戶使用后臺系統時的效率與體驗。而這里我提到的“合理的設計方案”就是本篇文章跟大家分享的重點:如何利用柵格系統完成后臺頁面的響應式設計。對于交互與性能方面內容,本篇文章不做介紹,因為兩者涉及到我不太了解的技術相關知識。我提出這個觀點主要希望大家在執行設計時,能有更全局的考慮,多跟交互與開發溝通,協力打造更好的用戶體驗



          三、響應式的目的是什么?


          后臺系統做響應式設計的目的:提高屏幕利用率,最大化操作效率


          1、提高屏幕利用率最簡單的理解就是在大屏幕上顯示更多內容,在小屏幕上通過數據篩選展示關鍵信息。一直以來大家普遍認為移動端碎片化嚴重,但實際上桌面端設備的分辨率也是有著不太均勻的分布,而隨著新設備的更新,更多高分辨率屏幕不斷加入,這種碎片化的趨勢會更加明顯,因而要想利用好每一塊屏幕,讓不同分辨率的用戶都有好的體驗,顯然傳統固定的布局是做不到了。

          Image title


          2、后臺系統的應用特性,決定了響應式在后臺設計中具有很高的實用價值。后臺系統有兩大主要功能:查看與操作。查看主要是各種數據,是系統自動生成的內容;操作是需人工干預、人工決策的任務,查看的數據為操作提供了依據,而操作支撐了公司或部門業務的正常運行。所以后臺系統設計最基礎的目標之一是如何通過良好的數據展示幫助用戶提高操作、決策效率,而充足的展示空間顯然是實現這一目標的基礎,響應式設計通過為每個分辨率設定合理的版式布局,使數據在每塊屏幕上都盡可能展示的最佳。優化后的數據展示,幫助用戶更獲取信息,從而提高了用戶使用后臺系統的效率與體驗。

          Image title



          四、為何要利用柵格系統來進行響應式設計


          響應式可以響應的前提有兩點:1、頁面布局具有規律性、2、元素寬高可用百分比代替固定數值,而這兩點正是柵格系統本身就具有的典型特點,所以利用柵格系統進行響應式的設計是順理成章的,也比較快捷,所以響應式與柵格化天生一對好搭檔


          柵格系統頁面布局具有規律性、元素寬高可用百分比表示

          Image title



          五、利用柵格系統完成后臺頁面響應式設計的步驟


          1、確立設計稿基準尺寸


          設計稿基準尺寸是指我們從哪一個分辨率開始設計,也就是我們新建畫板時畫板的尺寸應該是多大。而這個尺寸確定的主要依據是我們后臺系統所面向的主要用戶的屏幕分辨率;我們分兩大類情況來討論這個問題。


          (1)、如果我們的系統是給公司內部員工使用,由于公司批量采購設備的原因,公司內部員工的屏幕分辨率往往會比較統一,這種情況下我們需要拿到這個數據,然后以它作為基準尺寸開始設計。因為雖然響應式設計的目標是讓頁面在每個分辨率下都有最佳的體驗,但實際開發中畢竟存在損壞,設計還原很難100%,因而大多數情況下還是基于基準尺寸的設計與開發,在用戶端顯示效果最佳、體驗最好

          。

          (2)、如果我們的系統是平臺級面向全網用戶,或者雖然是公司內部使用,但是并不能統計到內部員工屏幕分辨率情況,就可以以1440*900作為基準尺寸開始設計。從統計數據來看,目前國內PC端用戶屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900;1440的尺寸實際上是處于中間位置,如果以它為基準設計,最終向上向下響應適配后,相對誤差最小,從而達成用戶體驗的最大公約數。

          Image title



          2、確定頁面布局結構


          頁面的布局結構,是頁面基本框架,后續的設計都是在這個大的框架下完成的,所以確定頁面基準設計尺寸后,需要跟交互設計師或產品經理配合,根據實際業務情況討論確定頁面布局結構。一般來講,后臺系統有兩種最典型的頁面布局結構:左右布局與上下布局(這兩種布局是最典型也是最基礎的布局形式,其余布局,下期內容講)


          上下布局

          Image title

          上下布局的結構在傳統網頁中非常常見,而在后臺系統中并不常用。這種布局的優點是符合用戶認知,遵循用戶從上而下瀏覽頁面獲取信息的習慣;貫穿全屏的導航欄設計也使頁面顯得正式穩重,除卻導航欄之后相對較大的空間也為內容展示提供了比較充足的空間。缺點是頂部一級導航受頁面寬度限制,數量會比較局限,同時導航層級較深時,交互效率也不夠理想。所以該布局適合那些導航層級較少,內容展示充分的后臺系統設計


          左右布局

          Image title

          擁有側邊導航的左右布局頁面結構,是在后臺系統中更常見的頁面布局形式。側邊導航欄可以固定也可以收起,相對比較靈活,同時文字橫向排列的形式可以在豎向上展示更多內容,因此側邊導航比頂部導航能容納更多一級內容,而層疊式的內容展示也使得一、二、三級導航內容關聯更為順暢,可擴展性也得到加強;由于側邊欄可以常駐在頁面左側,所以對于右側內容的指示性也優于頂部導航,切換起來也更加方便。但同時,因為側邊欄的常駐,導致右側內容區域空間被擠掉部分,所以相對上下布局的結構,左右布局的結構,內容區域空間會比較小;一般為了與頁面其它區域做區分,導航部分會用更深的顏色、安排更多的圖標和文字,這也導致了在視覺上左右布局的頁面不夠平衡,會有左邊重右邊輕的感覺。


          3、對內容區域建立柵格系統


          根據不同的布局類型,對頁面內容區域建立柵格系統。對于一個利用柵格系統做響應式設計的頁面來講,主要有三大數值需要規范:Column、Gutter、Margin;對于Column、Gutter我們在上一期內容中已經有很詳細的介紹,不再贅述,而Margin是頁邊距,主要確定了內容區域距離頁面邊緣的距離,它分布在內容區域的兩側,主要作用是通過留白把內容區域與周圍環境隔離出來,從而突出內容區域的顯示,此外還可通過Margin值來調整內容區域顯示比例,使頁面在視覺上有更好的呈現效果。所以一個用于響應式的柵格系統事實上由Columns、Gutters、Margins三部分組成。


          上下布局結構與其對應的柵格系統

          Image title


          左右布局結構與其對應的柵格系統

          Image title


          4、根據實際業務內容確定盒子(Box)比例


          上下布局結構的盒子

          Image title


          左右布局結構的盒子

          Image title


          5、確定響應策略


          響應策略就是當視窗(Viewport)發生變化時,內容區域的元素如何去響應,具體到我們當前的柵格系統,就是Columns、Gutters、Margins以及由Columns跟Gutter組成的盒子(BOX)四者的值(主要是寬度)如何變化,以及在這種變化之下我們頁面的布局如何調整。


          為了方便直觀的向開發工程師與團隊里的其它小伙伴溝通,我們可以把這個響應策略制作成如下的表格,并在頁面中標注說明相關元素的變化規律,供自己與開發參考。


          由于帶左側導航的響應式規則相對復雜,所以我先以它為例跟大家交流下響應策略如何制定


          左右布局響應策略表

          Image title


          如圖,響應式是以視窗的最小寬度作為基本依據來制定每種寬度下Columns、Gutters、與Margins的響應策略,也就是說Viewport Min-width是做出響應的觸發條件,視窗每達到一個最小寬度,就會觸發該寬度下預設的頁面布局方式,而每種布局都是在該寬度下的最佳布局,也是因此,響應式才會在各種復雜分辨率條件下都能給用戶比較好的體驗。


          每個視窗寬度的最小值是觸發響應的關鍵值,因此我們給這些用于觸發的關鍵值起了個名字叫“Breakpoint”,每個Breakpoint觸發一種響應策略,而每個策略持續(保持)的寬度范圍就是圖中綠色矩形的范圍。以圖中第二行矩形為例,該矩形代表的響應策略是:欄目數是8、水槽寬度16(SM)、頁邊距32、側邊欄收起且僅展示圖標,當點擊側邊欄展開圖標時側邊欄以Push的方式展開,該策略觸發的Breakpoint是768,保持范圍是577~768。也就是當視窗寬度縮放至768時,欄目數量由上一級的12變為8,水槽寬度由24變為16,側邊導航由完全展開狀態自動收起文字部分,僅保留圖標,然后保持這些關鍵數值不變,直到視窗寬度達到另一個Breakpoint。需要特殊說明的是,第一行矩形中0~576(Min&Fixed)這個范圍的視窗寬度是固定的,也就是在該套響應策略中,頁面最小響應到576的頁面寬度,當視窗到達這個寬度時,瀏覽器會限制視窗進一步縮小,因為當頁面寬度比它還小時已經無法有效展示數據了,所以進一步的縮放是毫無意義的。


          左右布局響應策略動態演示

          考慮到gif被壓縮后顯示效果不理想,所以我做了一小段視頻來幫助大家更好的理解上述響應策略在實際頁面中如何發揮作用。視頻如果看著不清晰,選擇清晰度為1080p藍光觀看即可


          左右布局響應策略標注

          Image title


          對于上下布局的后臺系統我們根據內容區域(Container)寬度定義的不同方式,可以把它們分為兩類:


          1、內容區域定寬的后臺系統( Fixed-width Container )


          內容區域定寬是指內容區域在每一組視窗寬度區間內,都會設定一個最大值(Max-with),當內容區域寬度小于最大值時,區域內元素會響應視窗的變化;達到最大值后,內容區域不再響應視窗的變化,而是寬度保持該最大寬度值不變,此時我們通過增加頁面兩側的margin值來響應視窗的變化。Flex Margin就是應對此情況的動態頁邊距。

          Image title


           上下布局響應策略表(內容區域定寬( Fixed-width Container ))

          Image title


          2、內容區域寬度流式 (fluid-width Container) 


          內容區域寬度流式 (fluid-width Container) 的后臺系統,它的內容區域 (Container) 距離頁面兩側的頁邊距Margin是定值,因此視窗有多大內容區域就展示多大。




          Q&A


          1、后臺系統必須做成響應式么?


          并不是必須的,是否要做響應式主要是根據后臺產品面向的用戶來定的。如果是公司內部使用的系統,且員工配備的桌面設備都是有統一的分辨率,就可以不做響應式;如果是面向全網用戶的后臺產品(比如淘寶商家的后臺管理系統,阿里云的控制臺)或公司(部門)內部的桌面設備并沒有統一的分辨率規格,那么就需要做成響應式。當然了,更實際的環境中是否做響應式還有技術實現、時間、人員成本等各方面因素的考慮,有時為了盡快的讓業務運營起來,后臺系統會做的比較“簡陋”



          2、為什么柵格系統沒有適配到移動端的分享?


          因為后臺管理系統的使用場景主要是工作時間在桌面設備上使用,由于龐雜的數據內容在移動設備上展示困難、操作不便,因而很少有公司會把后臺系統響應到移動端使用,所以我們今天說的后臺響應式僅針對桌面設備屏幕。



          3、對于iMac4k、5K這類超高分辨率的屏幕如何做響應式設計?


          對于左右布局的后臺系統,實際上它是全屏展示的,也就是屏幕有多大就展示多大,因而iMac的響應策略也是按照左右布局響應策略表里的策略來響應對于上下布局,內容區域定寬的后臺系統,iMac的響應策略使用上下布局響應策略表里的策略來響應即可;


          對于內容區域寬度流式的后臺系統,iMac的響應策略可以參考左右布局的響應策略表來處理欄目、水槽的變化,頁邊距保持定值即可。



          4、在以8為原子單位的柵格中,Margin需要按8n的規律變化么?


          能以8n的規律變化是最好的,如果無法做到也可以使用其它數值。Margin是頁邊距,主要作用是通過留白的方式將頁面內容區域與周圍環境隔離區分出來,從而突出內容;一般我們會優先考慮內容區域匹配8n的變化規律,安排完內容區域后剩余的空間自然成為頁邊距(margin)



          5、響應策略制定的時機是什么?如何去制定?文中示例的策略表我可以借鑒套用么?


          響應策略表一般是在主要頁面設計完成,要交付開發實現的時候來跟開發一起商定。這塊需要注意兩點:


          1、如果開始設計時就已確定頁面是要具備響應式的能力,那么最好開始設計時就去跟開發溝通,看他們現有技術是如何來做響應式的,因為他們很有可能是在用Bootstrap、Foundation這類組件庫來做開發,而這些組件庫一般都有自己現成的響應規則,這種情況下我們需要了解開發他們的規則,讓自己的設計匹配已有的策略。當然了,如果他們的規則并不能很好滿足我們的業務需要,一般也是可以在這些組件的基礎上讓開發去修改調整的。


          2、響應策略表只是對響應方式的結果的呈現,而這個策略的制定事實上是從設計開始執行時就要去考慮的,從我個人經驗來講,我一般會挑兩類頁面來做響應策略的研究與適配,一個是控制臺(Dashboard)頁面,另一個是表單(Form)頁面。優先規劃這兩個頁面的設計,考慮他們在各個Viewport下如何布局如何展示如何縮放變化,并且跟開發溝通想法,聽取意見,制定初步的響應計劃,當這兩個頁面設計完成,就可以更大范圍的執行設計。


          3、文中示例的策略表是基于我自己項目經驗總結而來,具有實際應用價值,可以借鑒。但我更想做的是通過那個表希望跟大家分享一種與開發交流、溝通的方法和技巧。實際工作中我們并非一定要做出那么一個經過精心設計細致考慮的表,我們可能會找張紙畫一畫給開發看就可以了,這塊的重點是如何把我們設計師的想法更可視化更直觀準確的傳達給開發工程師。所以那張表是啟發而非標準。


          控制臺(Dashboard)頁面示例(素材圖片作者:Coderthemes)

          Image title


          表單(Form)頁面示例

          Image title

          轉自UI中國-BYMD



          柵格系統及其在后臺設計中的應用—后臺設計經驗總結01

          ui設計分享達人

          關于柵格系統文章不少,但鮮有專門針對柵格系統在后臺設計中相關應用的介紹。本文拋磚引玉,希望引起更多同行的交流與討論

          Image title

          Image title


          柵格系統的目的


          柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考,它讓頁面設計變得有規律,從而減少了設計決策成本;柵格化提高了頁面布局的一致性跟復用性;避免了設計師與開發者在細節上的反復溝通確認,從而提升了整個設計開發流程的效率、并能幫助開發者實現較為理想的設計還原。

          但實際應用中,由于對柵格系統理解的不充分,很多設計師在應用柵格系統的實踐中產生了各種問題,本來幫助設計的工具現在反而成了設計中需要解決的問題。結合我自己后臺設計的經驗,本篇文章跟大家聊聊柵格系統在后臺設計中如何應用。



          建立柵格系統的方法與規則


          1、第一步:確立柵格系統的原子單位(網格)


          如圖,一個比較完整的柵格系統是由許多規格一致的小網格組成,這些網格輔助我們更規范的排版、布局。

          Image title

          后臺系統設計中,由于后臺頁面主要以Web形式呈現,而對于web,用戶已習慣通過鼠標滾輪或滾動條(scrollbar)來縱向瀏覽頁面內容,因此,在不考慮內容優先級的情況下,Web可以實現豎直方向的“無限”加載,即豎直方向可以無限延伸,因此基于Web的后臺頁面,它的柵格系統在水平方向的柵格可以不體現出來,我們在執行設計時只要在豎直方向保持規律的變化就可以了。標準的柵格系統簡化為適用于Web后臺的設計如下圖所示

          Image title

          如上圖,對于后臺設計來講,柵格系統是由欄目(Column)跟水槽(Gutter)交替分布形成的,欄目(Column)是接納網頁內容的容器,水槽(Gutter)用來調節相鄰兩個欄目間距,把控頁面留白;由于欄目跟水槽的寬度是以網格作為基本單位來增加或者減小,所以柵格化的第一步需要先定義好柵格的原子單位“網格”的大小。根據本人的設計實踐以及其它已有規范經驗,目前后臺柵格系統網格大小定義為8是最普適易用的。具體原因有以下幾點:


          (1)目前主流桌面設備的屏幕分辨率在豎直與水平方向基本都可以被8整除,使用8作為最小原子足夠普適.


          我們選取4、6、8、10、12為柵格的候選原子單位,然后用目前主流屏幕分辨率與其相除,判斷各個分辨率在豎直(Y)與水平 (X)方向能否被候選原子整除,統計結果如圖。

          Image title

          顯然,對于目前市場桌面設備屏幕而言,4是整除率最高的一個原子,接下來依次是8、10、6、12。但4作為基本原子實在過于小了,太小的步進單位將導致我們決策成本的增加,因為我們將元素間間距增加4px或者減小4px視覺感受到的差異并不明顯,這種情況下我們為了找到那個“合適、滿意”的間距,就需要反復調試,這就造成了時間上的浪費,尤其對于沒有經驗的新人,這點會更為突出。但這種調整并不合適,原因是后臺管理系統設計重點在于面向用戶使用的效率與邏輯,其次才是視覺呈現,使用柵格系統的目的之一也是想減少設計師在“細節”上的糾結,希望設計師站在更全局的角度看待設計,合理安排時間,因此我們舍棄4。在剩下的6、8、10、12四個單位中,8的整除率最高(80%),以8像素作為一個步進單位的變化,我們視覺上也是能感受到較為明顯的差異,因此選取整除率最高的8做為柵格系統的原子單位。



          (2)以8為單位符合“偶數原則”。偶數原則可以在頁面縮放中的避免類似于0.5、0.75、1.25等次像素的出現,從而使頁面各類元素在大多數場景下都能有比較精致的細節表現


          雖然對于后臺設計而言,通常設計師是直接在目標尺寸下進行設計,并在此基礎上標注、切圖給開發實現,并不存在像移動端那樣需要對各種尺寸、各種像素密度的設備進行適配的情況,但對于Web頁面來講,仍存在向上向下適配的可能,因而從頁面的兼容性、可擴展性及可維護性層面來講,我們設計師還是有必要考慮的更加長遠,遵循“偶數原則”可以上避免各種潛在的問題。

          Image title


          (3)開發工程師使用的前端開源組件庫比如Metronic、Antdesign等也是基于8的原子單位來設計,因此如果設計師也使用以8為基本單位的柵格系統,開發與設計師相互對接就會更加方便,開發實現頁面時也能更高品質的去還原我們設計師的稿件



          2、第二步:建立基于原子單位的柵格系統


          經過第一步討論,我們現已確定后臺設計的原子單位為8,而我們也知道柵格系統是由欄目(Column)跟水槽(Gutter)交替分布形成的,所以接下來我們要利用原子單位確定欄目跟水槽在具體的頁面中如何分布以及它們各自的寬度。


          通常,在一套后臺設計系統中,水槽寬度會是幾個比較固定的數值(因為后臺系統的頁面相對于其它類型的Web頁面,表現的更加整齊、規律,所以留白的方式比較固定,加之后臺往往有大量的數據、內容需要呈現,所以要盡可能提高頁面利用率,可以留白的空間也比較有限);而欄目寬度更加靈活,它可以根據頁面水平方向尺寸的改變而增大或減小以響應頁面的變化(遵循8n的變化規律,此處變化規律在下期文章《柵格化與響應式》里會詳細介紹)。


          當我們做后臺設計的時候首先需要確定在什么樣的分辨率下做設計,也就是首先需要確定設計稿的尺寸,當設計稿尺寸確定后,便可建立基于該尺寸的柵格系統。假設頁面內容區域寬度為W,欄目個數為A,水槽個數為B,欄目(Column)寬度為C,水槽(Gutter)寬度為G,則W=A*C+B*G。柵格系統建立初期,由于我們并不確定之后會有什么樣的內容呈現我們的頁面上,所以為了讓柵格更加靈活、普適,我們先假定單個欄目與水槽的寬度是相同的,即C=8n(n=1、2、3、4...)=G,然后以此將頁面內容區域等分,形成初步的柵格,之后再按實際內容需要,按比例調整兩者寬度或者按比例對兩者進行組合,形成承載業務內容的盒子。目前有兩種比較主流的等分方式:12等分與24等分。


          12等分的柵格系統在流行的前端開發開源工具庫Bootstrap與Foundation中廣泛使用,適用于業務信息分組較少,單個盒子內信息體積較大的中后臺頁面設計;

          Image title


          24等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計;相對12柵格系統,24柵格系統變化更加靈活,更適合內容比較多樣復雜的場景。

          Image title



          柵格系統的應用


          1、頁面布局與版式設計


          (1)、了解承載業務內容的盒子模型(Box Model)


          建立好柵格系統后,就可以根據自己的實際業務,在柵格系統上安排內容了。頁面上最終承載內容的其實是一個個“盒子(Box)”,這個盒子的高度由盒子要容納的內容與頁面版式設計決定,按8n規律變化;寬度則由欄目與水槽按比例組合得到。


          在柵格系統上容納業務內容的容器我們把它稱之為盒子(Box),柵格系統上的盒子其實跟前端工程師寫頁面時用到的盒子是一致的。如圖所示,當我們瀏覽任何一個網頁時,右鍵>檢查元素(審查元素),然后在style菜單下就可以看到這個盒子結構了。其中Padding就是主體內容(Element)距離盒子外側的距離,我把它稱之為內邊距,(Element可以是一個按鈕,一段文本、一張圖片或者一個表格等;)而Margin就是相鄰兩個盒子間的距離,對應在后臺柵格系統中其實就是水槽的大小。了解完柵格系統的盒子模型之后,下一步我們需要根據具體業務內容來確定盒子的寬度,也就是如何利用柵格系統做實際內容的布局與版式設計

          Image title


          (2)、根據業務內容分配頁面比例,確定盒子寬度


          以24柵格系統為例,一個24柵格系統可以根據業務需要被2等分、3等分、4等分、6等分、8等分、12等分,還可以被1:1:1、1:2:1、1:3:2、2:3:3、1:2、1:3、1:5、3:5等不對稱分割,具體采用哪種比例的組合需要我們根據自己業務需求來定,我們此處所說的比例實際上就是盒子的寬度。

          Image title

          上圖展示了盒子在24柵格系統上的分布情況,圖中只列舉了部分比例,實際業務中,同一個頁面上使用一到兩組比例值的組合來布局是比較合適的(如下圖),組合形式過多頁面就會顯得瑣碎、雜亂,不利于閱讀和使用。因為盒子的高度根據內容來定,故下圖中沒有體現高度這一維度的變化規律。

          Image title

          當我們完成上圖規劃后,需要做的便是根據實際內容往每個盒子里安排內容,做視覺與交互的落地了。



          2、元素對齊與間距設定


          柵格系統大的層面可以幫助設計者更好的進行版式設計與內容布局,而小的方面可以輔助設計師規范頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講,這兩者同等重要,從執行層面來講,我們一般先做版式設計與布局,然后再填充內容、調整細節。


          柵格系統輔助對齊的作用類似于各種設計軟件中的參考線,它能讓我們更直觀的安排、調整內容的位置及對齊方式,可以使內容變得規律、有序,方便用戶瀏覽閱讀,幫助用戶提高獲取信息的效率。


          柵格系統對于元素間間距設定的幫助是直觀的,當我們定義了柵格原子單位為8時,這意味頁面上各元素間距的變化也應遵循8n的規律,一致的變化規律讓頁面富有節奏感跟韻律感,在提高頁面一致性的同時也減少了設計決策成本。我們知道,柵格系統中水槽與欄目的變化也遵循8n的變化規律,此處n為大于0的正整數,即n=1、2、3...;但是用于規范元素間距的8n,n可以是0.5、1.5這類包含二分之一8的情況,原因是實際工作中,我們面臨的情況是復雜的,這樣處理可以讓間距的設定適應一些特殊的場景,從而使其更靈活普適。

          Image title



          注意事項


          1、水槽寬度的設定


          確定好內容模塊比例后,我們會發現由于之前等分的緣故,此時水槽較寬,我們需要調整水槽寬度到一個合適的值。


          水槽的寬度是8n,也就是水槽可以以8為基本單位去增加或減小。為了減少設計決策成本,我們會事先設定好一系列水槽寬度,并定義好每個寬度對應的使用場景,然后設計中根據每個場景使用對應數值就可以了。我定義了一組水槽的值是8、16、 24、32 、40,為了區分它們的使用場景我們依次為其命名為XS、SM、MD、LG、XL。根據實踐經驗,正常情況下,兩個盒子間距(水槽)的值為24(MD)時,視覺上是最為舒適。

          Image title


          柵格化工具推薦(插件請在附件中下載)


          Ps柵格系統工具


          1、PS自帶柵格系統設定:新建參考線版面(重點推薦)


          Ps有個功能叫做“新建參考線版面”,打開這個面板后,在預設這里可以看到Ps已經預設了8列、12列、16列、24列的柵格系統,選擇對應列數就可以看到頁面上參考線的變化。預設中“裝訂線”的寬度即柵格系統中水槽的寬度。默認均為20px,我們可以根據之前討論的8的倍數原則,將其手動更改為24;


          如果預設的柵格系統無法滿足我們工作需要,我們也可以自定義柵格系統,并能將柵格參數保存為預設,這樣就可以重復利用自定義的柵格系統了;柵格系統還可以選擇將其應用在當前畫板或者所有畫板,十分方便易用。由于是Ps自帶的參考線,所以它可以通過快捷鍵靈活的控制顯示或隱藏

          Image title

          Image title



          2、利用Ps標注工具Assistor Ps 進行柵格系統的建立


          Assistor Ps在之前主要是一款頁面標注工具,但是隨著藍湖等自動標注工具的流行,這個小軟件基本沒人用了,但我發現它設置參考線的功能還是很強大的,可以媲美大名鼎鼎的guideguid(這款插件目前對Ps cc 2017及以上版本貌似已經不支持,軟件本身安裝也挺麻煩),所以就介紹給大家。(安裝包在文末下載,Win&Mac,解壓后跟常規裝軟件一樣,正常安裝就行)。但是這個插件由于很多數值都要自己算,實際上沒有Ps自帶的新建參考線面板的功能好用。算是一個工具的補充吧

          Image title



          Sketch柵格系統工具


          1、Sketch自帶柵格系統設定:Layout Settings

          Image title

          Sketch端利用sketch自帶的柵格工具Layout Settings即可完成柵格系統的設置,由于sketch的柵格工具是自帶的,與Ps類似,它也可以通過快捷鍵快速顯示或隱藏,點擊左下角“Make Default”還可以將自定義的柵格系統設置為默認的柵格系統,方便以后重復調用,但sketch貌似只能儲存一組柵格系統的數值,而Ps可以儲存多組。



          2、Sketch柵格系統插件:BootstrapGrid-maste


          BootstrapGrid是一個專門用于建立柵格系統的插件(插件在文末附件中下載),插件可以對柵格系統的基本數據做個性化的設定,可以對多個形狀同時建立柵格系統,還可以通過快捷鍵快速調用。具體用法:先選中要建立柵格的畫板或者畫板里的形狀(可以多選),然后:插件>Bootstrap Grid(Plugins -> Bootstrap Grid)


          柵格系統參數設計

          Image title



          單個形狀(畫板)建立柵格系統動圖演示

          Image title



          多個形狀(畫板)建立柵格系統動圖演示

          Image title



          跨平臺的web端柵格工具 http://grid.guide/


          GridGuide 最大優點是可以針對一種柵格系統生成4組不同水槽寬度的柵格化方案,能比較直觀的比較不同水槽寬度下各個柵格系統的視覺感受。使用方法:在右上角設置好頁面寬度以及欄目數量,頁面內就會自動生成可以下載為png圖片的柵格。


          Image title


          QAQ(常見問題解答)


          (1)當柵格系統中奇數不可避免的出現時,如何處理?


          理想狀態下,我們應該調整內容區域的大小,使其盡可能成為可以被8整除的尺寸,但實際應用中,有時會出現無法整除的情況?;趯凶幽P偷睦斫?,此時我們保持padding、margin的值不變,改變盒子的大小去適應奇數的頁面(元素)即可,因為一致性跟效率才是柵格化要達成的首要目的,偶爾有一些不“完美”的尺寸是完全允許的,因為用戶在實際使用頁面時,并不能看到我們使用的柵格系統,也很難注意到那幾像素的變化,他們能感受到的是頁面整體呈現出來的節奏與韻律感,以及持續、一致的視覺語言帶給他們的嚴謹、可靠的心里感受。



          (2)柵格系統必須以8作為原子單位?使用其它數值是否可以


          首先需要指出的是使用其它數值當然也可以,柵格系統只是手段,提升設計效率、減少溝通成本、提高頁面一致性才是最終目的,所以如果你所在團隊有其它柵格化習慣,且一直以來效果良好,那么繼續使用它也是沒問題的。但是對于設計新人來講,如果能理解前人的經驗,并能較好的運用,對于他們來講,是會少一些彎路,更好的完成設計工作。



          (3)柵格系統建立初期是否必須使欄目寬度與水槽寬相等,并等分內容區域?


          建立柵格系統時并不是必須使欄目寬度與水槽寬相等,并等分內容區域。本篇文章介紹柵格系統時采用這種處理方式是為了讓大家更好的理解柵格系統建立的原理與過程,事實上,欄目的寬度在實際應用中往往大于水槽寬度,我們通常會先計劃好水槽的寬度、內容區域總寬度與欄目的數量,這時候欄目的寬度通過計算可得到,對于響應式頁面,欄目的寬度可以是百分比而不是具體的數值(關于響應式的內容下期文章跟大家分享)。

          轉自UI中國-BYMD


          觸覺之美-如何進行觸覺設計

          ui設計分享達人

          觸覺給人類帶來的情感體驗是不可或缺的,如果沒有它的存在,我們在日常生活中與現實物體互動的過程將變得索然無味。

          內容概覽

          一.我們的觸覺

          二.什么是觸覺反饋

          三. iPhone 的振動模塊

          四.安卓手機的振動模塊

          五.觸覺設計的用途

          六.如何設計

          七.結語

          一.我們的觸覺


          “她滑滑的,明亮著,像涂了‘明油’一般,有雞蛋清那樣軟,那樣嫩”,這是朱自清的散文《綠》中對梅雨潭的一段描寫?!盎?、“軟”、“嫩”是對觸覺賦予意蘊的獨特表達,這些我們一旦聽到就會在腦海里浮現畫面的描述是來自于生活中無數次觸覺帶給我們的獨特體驗。


          在人體的五種感覺中,觸覺與其他感覺相比與我們身體的接觸面更廣,人體全身上下都是觸覺信號的接收器。盡管如此,人類的觸覺能夠傳遞的信息是有限的,通常觸覺傳遞的信息只有視覺信息的 1 %。不過,觸覺給人類帶來的情感體驗又是不可或缺的,如果沒有它的存在,我們在日常生活中與現實物體互動的過程將變得索然無味??萍籍a品也是如此,無論是 VR 體感游戲機還是日常使用的手機,通過振動帶來的觸覺反饋起到了畫龍點睛的作用。


          二.什么是觸覺反饋


          觸覺反饋,通常是通過硬件的振動模擬人的真實觸覺感受,通常應用于用戶隨身攜帶的手持、穿戴、觸摸等設備上,現在也開始大規模應用于體感游戲、4D 視頻內容、機器人、醫療等領域,可以補充視覺和音頻反饋的不足,增強互動效果,提升用戶體驗。


          根據觸覺技術領域的創新公司意美森的用戶反饋和調查顯示,用戶在使用帶觸覺體驗的游戲后,給予了游戲更多的正面評價,并且活躍和分享意愿明顯提高。隨著硬件廠商對用戶體驗的愈發重視,觸覺設計在產品設計中更多地得到應用。接下來會向大家介紹移動 App 產品如何配合硬件設計出優質的觸覺體驗。


          三.iPhone 的振動模塊


          軟件的體驗升級需要依賴硬件的不斷迭代。iPhone 的振動體驗一直被用戶贊嘆不已,這源自于與蘋果對用戶體驗的追求,即使在大多數用戶看來無關痛癢的振動功能,蘋果也一直進行不斷升級迭代,提高振動模塊的性能,帶來更舒適的體驗。


          在 iPhone 振動模塊的升級過程,蘋果不斷增大振動模塊體積,從轉子馬達到線性馬達的更新換代讓震感越來越細膩,如下圖所示。

          (上圖內硬件圖片來自知乎用戶「云子可信」)


          直到后來, iPhone 7 / 7 plus 上全新線性馬達 Tapitic Engine 問世,iOS 10 的振動接口向開發者開放,如此高配置的線性馬達提供的細膩反饋不但使 iOS 系統 更具科技與藝術的融合之美,更是賦能大量第三方應用,調用此功能的第三方應用可以自定義地使用振動反饋來提高產品體驗。


          可能有些讀者會疑惑,全新的 Tapitic Engine 振動模式和以往有什么不同之處呢?我們先回憶一下在以往各種手機的振動給我們帶來的體驗,基本都是嘈雜的聲音加上酸麻的手感,體驗非常拙劣。而 Tapitic Engine 實現了在不發出聲音的情況下提供更細膩舒適的振動體驗,如下圖。


          另外振動給我們另一個負面影響就是其干擾性太強,大多數其他手機提供的振動并沒有進行時間和強度的分級,這帶來的問題是無論在何種場景下,手機都會給我們同樣的振動反饋,沒有進行任何場景的細分。比如對于危險操作可能需要時長久強度大的反饋,而一些輕量化的提示只需要輕微的振動即可,但是由于硬件的限制,大部分安卓手機都是一視同仁。而擁有 Tapitic Engine 的 iPhone 則可以自定義三種不同的強度、不同次數和時間,還可以穿插強度使用模擬更多場景,后文會詳細介紹相關應用。


          四.安卓手機的振動模塊


          剛才提到,絕大多數的安卓機型不可以對振動的強度進行自定義,因此不管在系統軟件還是第三方軟件中,如果場景需要振動輔助,基本都是振動到手麻的一聲“嗡”就不了了之了,手機如果在桌子上這種劣質的振動甚至能把手機震得掉到地上。只有少數有極客精神的安卓廠商會在振動體驗上不遺余力,向蘋果看齊,但由于大部分第三方應用開發者難以針對各個安卓機型不同的硬件振動模塊進行適配,所以大部分安卓機型上的第三方 App 如果需要振動都是調用單一強度,仍然未對振動強度做場景細分,體驗依然不盡人意。


          五.觸覺設計的用途


          盡管觸覺傳遞的信息遠遠少于視覺和聽覺,但我們通常也不會將觸覺作為傳遞信息的主要手段。我們只將其作為視覺反饋和聽覺反饋的一種補充和配合部分。電子設備的振動模塊產生的觸覺反饋,可以有效提高交互的易感知性,并賦予產品生命力,增強用戶的情感化體驗。


          ( 1 )  交互反饋


          a.更敏感的反饋方式


          我們在使用電子設備時獲得反饋的三種形式:視覺反饋,聽覺反饋,觸覺反饋。觸覺比視覺和聽覺的傳達更迅速被用戶感知,由于以人體為介質,觸覺反饋會為對表皮以及對肌肉中感受器進行刺激,因此其要被視覺與聽覺更加敏感和強烈。


          我們可以將這種特性應用到相應的產品設計中,比如很多產品的下拉刷新都從之前的文字提示改為了振動提示,可以使用戶更快速地獲得反饋。當用戶下拉的距離到達臨界值并觸發振動后,用戶感受到振動后松手就刷新了,而不用再使用“繼續下拉刷新、釋放刷新”等冗余的文案來提示用戶,如下圖的下廚房應用。


          b.強化物理動作


          蘋果手機從 iPhone 6s 升級到 iPhone 7 最大的變化之一就是經典的 Home 鍵從可以按下去的實體鍵變為了虛擬鍵。剛開始很多果粉還擔心可能產生的體驗下降問題,但是經過使用后才發現虛擬按鍵加上升級的線性馬達提供的震感,逼真地模擬了真實的按壓觸感,乃至很多用戶反饋說使用了 iPhone 7 很久時間都還以為 Home 鍵仍然是可以按壓的實體鍵。


          振動反饋還可以給輸入法應用帶來真實的敲擊感,來自馬薩諸塞大學的一份研究顯示,虛擬鍵盤如果加入振動反饋,可以提升用戶輸入時的準確度。


          c.彌補異常情況下的反饋


          由于網絡延遲,用戶進行某些操作后可能需要等待一段時間才能收到反饋,如果時間過久,用戶會懷疑是自己操作不當,但如果加入振動反饋,會在其他反饋信息出現前打消用戶的顧慮。


          如下圖,知乎的鼓掌功能。用戶點擊鼓掌后,通??蛻舳藭埱蠓斩说臄祿缓箫@示已點贊的狀態,這個過程會收到用戶網絡狀況的影響。如果網絡狀況較差,用戶不能及時從屏幕獲取視覺變化的反饋,就會懷疑自己是不是沒有點擊到正確的熱區或者操作不當,因此用戶可能進行重復點擊從而影響體驗。但若加入振動反饋,用戶在點擊鼓掌后,首先一定會收到振動反饋,因為振動反饋不會受到網絡的影響而不會延遲,之后即使視覺反饋有些許延遲也不會讓用戶懷疑是自己點擊失誤了。


          ( 2 )  情感化設計


          人們容易對自己熟悉的事物產生好感。在產品設計中,我們經常使用日常生活中常見的視覺形象和聲音進行隱喻關聯,與用戶建立情感聯結。觸覺也不例外,日常生活中各種各樣的現實物體都會給我們帶來不同的觸覺感受。電器按鈕的阻尼感、節日煙花爆炸傳遞的震感、撥動齒輪帶來的摩擦感等等都是我們與現實世界之間的觸覺交互。iPhone 的線性馬達提供的不同等級的振動反饋可以充分地模擬并給我們帶來逼真的觸覺體驗。


          下面就向大家介紹一些將觸覺設計用于情感化設計中的一些精選案例。


          a.單一強度


          前文給大家提到,iPhone 手機自 iPhone 7 開始開放了振動接口,可供第三方應用開發者調用,其中有三種強度可供選擇,分別是 Light、Medium 和 Heavy 。單一強度指的是,某個功能只使用了 其中一個振動強度來設計。

          如下圖的荔枝的私人 FM 功能,當我們撥動齒輪時,振動模塊就會伴隨著我們撥動的手指產生強度為 Medium 的振動反饋,模擬現實生活中的真實體驗。


          b.多強度組合


          多強度組合指的是,某個功能使用了 Light、Medium 和 Heavy 三種強度進行組合使用,從而模擬出變化的振動效果。它比單一強度的體驗更加豐富,而且通過設計者巧妙的構思出來的不同的組合形式,它可以模擬出各種獨出心裁的表現效果。


          為了研究不同產品上振動帶來的反饋感受,我體驗了很多產品,但論將振動反饋運用到的,不得不提 QQ 的戳一戳功能,它振動的時間節點、強度與每一幀的動畫效果是匹配的,其設計團隊的匠心獨具,可見一斑。為了直觀地讓大家感受振動變化,以戳一戳中的「放大招」為例制作了效果圖給大家展示大概的振動強度隨時間變化過程。下圖中,動畫的過程可以拆解為 大招的能量收集、大招發射、大招撞墻、屏幕搖晃,分別對應不同的振動強度,使得體驗極為真實和令人驚喜。


          當我們使用 iMessage 發送短信時,如果選擇了煙花,在短信發出的一瞬間,全屏幕就會布滿驟然綻放的煙花。更令人驚喜的是,線性馬達在此時進行大大小小的振動模擬出煙花的爆裂感,仿佛煙花就是在我們手里綻放一般。


          不僅僅是上述案例,通過振動帶來的觸覺反饋在應用設計層面給我們帶來了巨大的想象空間。槍擊,拋硬幣,鼓點,齒輪,等等等等,再加上視覺和聽覺的配合,更是帶給了用戶身臨其境的體驗。


          c.適配問題


          由于之前提到過的安卓機型割裂嚴重,有些旗艦安卓機型的振動模塊體驗優質,但是大部分安卓手機的振動還是差強人意,因此大部分第三方應用開發者難以針對各個安卓機型不同的硬件振動模塊進行適配,所以大部分安卓機型上的 App 如果需要振動都是調用最原始的振動模式,這種模式的體驗感很差,與 iPhone 的 Tapitic Engine 分級振動體驗不可同日而語,因此即使某個場景需要振動滿足情感化需求,一般情況下在安卓端也是不會加入的,比如荔枝 FM 的私人 FM 功能中的振動、QQ 的戳一戳中的振動都只在 iOS 端做了適配,安卓端是沒有的。


          六.如何設計

          ( 1 )  iOS


          在日常體驗 App 產品時,我們可能會發現,在同樣的 iPhone 機型上,有的 App 中某個功能的振動反饋細膩舒適,但有的 App 的振動反饋的強度很不合時宜且體驗感差。這里可能存在設計師與開發人員的溝通問題,設計師并沒有先主動搜集資料去了解 iPhone 的振動有多種強度選擇,只是簡單地讓開發人員將某個功能加入振動反饋,于是開發人員任意選擇了一個振動強度就草草上線。最終,導致設計出來的振動反而降低了體驗。優秀的設計需要平穩的落地,在我們決定要為某個功能設計振動后,我們要完成以下步驟。


          1.選擇振動強度;

          2.確定振動次數;

          3.如果振動多次,確定每兩次之間的間隔時間;

          4.確定是否循環。


          如果設計的振動是多強度組合,最好將上述參數確定后以可視化的形式(如表格)交接給開發人員,方便其理解。由于部分開發人員可能并未深入了解 iOS 的振動模塊的調用實現方式,因此為了各位設計師朋友能夠更加暢快地與開發溝通,我在文章后面附上了 iOS 調用振動的相關代碼,大家可以將相關代碼直接發給發給開發人員供參考使用。我在附錄列舉了三種震動方式,其中的「 UIImpactFeedbackGenerator 震感」就是上文提到的可以自定義三種強度的方式,推薦大家使用,附錄里還列舉了每種振動方式的支持機型和系統、優缺點和我的個人建議。


          ( 2 )  安卓


          由于安卓自定義系統過多,且硬件之間差異過大,第三方應用開發者難以額外花費時間和精力去適配不同安卓手機硬件,因此通常只使用默認的振動調用方法。因此在與開發工程師交接時,一般我們只需要做后三步。


          1.確定振動次數;

          2.確定每兩次之間的間隔時間;

          3.確定是否循環。


          七.結語


          電子產品每一次的硬件迭代總是會給設計師帶來巨大的想象空間,作為設計師,我們需要在技術日新月異的時代不斷開拓視野,拓展設計的邊界。同時也是由于技術的進步,可能本文的技術實現方案在未來的某個時間就被淘汰和拋棄,所以希望大家對本文持批判性態度,對文章內可能的疏漏予以指出,我將及時更新或更正。在這里也感謝公司的 iOS 開發小伙伴的支持,犧牲休息時間與我一起檢驗各種實現方案帶來的不同震感,提高本文的嚴謹性。


          (附) iOS 振動調用代碼


          ( 1 )  UIImpactFeedbackGenerator 震感

          代碼

          a.微弱短振-Light

          UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleLight];

          [generator prepare];

          [generator impactOccurred];


          b.中等短振-Medium

          UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleMedium];

          [generator prepare];

          [generator impactOccurred];


          c.明顯短振-Heavy

          UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleHeavy];

          [generator prepare];

          [generator impactOccurred];


          ( 2 ) 長振動震感

          代碼

          AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);


          ( 3 ) 3D touch震感

          代碼


          a. Peek 觸感

          AudioServicesPlaySystemSound(1519);


          b. Pop 觸感(比 Peek 震感強,且比「UIImpactFeedbackGenerator震感」中的 Heavy 還強烈)

          AudioServicesPlaySystemSound(1520);


          c.三次連續短振(三次 Peek 觸感連續振動)

          AudioServicesPlaySystemSound(1521);


          參考書籍:

          《微交互》 作者: 塞弗 (Dan Saffer)


          轉自:站酷-Ballen貝林

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合