<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設計者

          符號所承載的內容是從其對象體內容中提取極其具識別潛質的內容直接或間接延伸出的。

          符號所承載的內容是從其對象體內容中提取極其具識別潛質的內容直接或間接延伸出的。從視覺,功能,精神等層面一步步推導設計的邏輯與標準,向公眾傳播一種正面的社會啟迪意義,實現一種更為合理的生存方式。



          前言:


          TGideas與DesignStudio兩個設計團隊以及品牌團隊在長達八個月的時間里一起嘗試品牌體系系統梳理,品牌設計定位以及搭建整體的VI,曾嘗試過很多新的創意點,不同的方向出了很多有趣的設計,最終慢慢的確定了一個品牌概念關鍵詞:發現。國際化品牌概念詞:spark。關于這個概念的推導簡圖過程請看下圖。由于此片文章 主要是針對標志字標部分 這個板塊去做的一些細節思考,在這里就不對于概念與品牌本身做過多闡述。


          一:關于圖形設計

          圖形設計前期版本非常多,我們做了很多嘗試,選擇了此版本設計圖形,主要理由是:標志由一個中心放射的火花構成,標志中所有光線由中心向外放射,形成多層次的結構設計,代表騰訊游戲豐富的品類和產品,廣泛的受眾,以及對創造出風多元價值的探索。標志的圖形概念是內部團隊與英國DesignStudio團隊一同探討出來的。英國DesignStudio團隊作為國際知名設計公司在創意階段給予非常有價值的探索與合作。下圖moodboard整理來源于jackyyyu.





          針對確定好的品牌概念,需要對圖形設計進行不同的嘗試,我們內外一致出了數多方案,最終把方案鎖定在了下圖四個范圍中。





          標志圖形結構網格中心是以黃金分割點作為重心的,散發出來的火花嚴格控制在了網格與黃金分割點的周圍,在比例關系中是非常規范優美的弧形組成,但是由于多處交錯處有很多沒有對齊的細節,我們在把控整體重心的情況下對交錯重疊點做了調試與優化,使得其圖形在嚴謹比例下顯得更佳有層次。


          二:中文字標設計

          思考:騰訊游戲圓潤體是受騰訊體啟發制作的,字體設計里的漢字骨架與騰訊體是共通的,這與騰訊體傳達的部分理念相一致。沉穩的重心,均勻的字白,傳達出勇往直前的領導力與前瞻性。這款字體同樣有騰訊體沉穩的重心,而且相比之下更加放松的中宮與較為纖細的筆劃,而且保持了騰訊體向右傾斜8度的特色。騰訊體大多為科技感的直線,硬朗的切角設計,傳達了前瞻科技感與驅動力的字體氛圍。而圓潤體保持整體的字架同時加入更多曲線設計,為的是能在保持前瞻與沉穩特質的基礎上更突出的表現快樂與探索的感受.

          關于“戲”字的傾斜不穩問題解決方案思考:

          “戲”字的字體結構比前面3個字體都要特殊,特別是字形上面左右結構,字白左大右小,單從字的重心來看本就有些偏右倒,這是“戲”的字形本身決定的,再者從“騰訊游戲”這四個字體來看,前三個字體結構都屬于很平穩的字形,“戲”字就顯得更加“薄”,整體會有不平衡的感受。以上是“戲”看上去“倒”的感受原因的分析。那解決辦法這里是從以下幾點出發:1.“戲”字在左偏旁擴大了字白部分,讓文字相比之下更加飽滿,因為這里沒辦法對筆劃進行加粗,嘗試過效果并不明顯。2.“戲”字右邊的豎彎鉤部分是進行了拉長延伸的,特別在尾巴部分,也是希望對比騰訊體更加“站穩”,傾斜度來看更偏90度,希望的是不要過于傾斜導致重心偏右,畢竟這個字體是斜體,視覺感受要控制在斜體基礎上的“穩”。3.文字在折筆處都有增加彈性設計,因為本質上它和騰訊體的折筆處是有很大不同的,它更強調的是“溫度”,“戲”的折角處會更加柔韌,沒有在接近字面框的下面部分做很“實”的落筆,這里我覺得更加有圓潤體的特色。


          圓潤體在遵循與承襲原有的視覺資產的前提下進行了如下設計優化:

          1.對字形進行調整,將字體中宮放松,使得整體更加放松協調,更具親切感。
          2.將字體筆劃粗細調整更細,使得字廓在游戲場景中或移動端縮小的情況下識別性更強。
          3.文字折筆處加入更多曲線設計,為了是能在保持前瞻與沉穩特質的基礎上更突出的表現快樂與探索的感受。




          三:英文文字標設計

          選一款好字體,直接使用,一款好的字體,原本就是為了讓使用者在正常排版下就能達到統一和諧的效果而制作,盡量活用好素材本身的價值。幾款推薦的幾何型體無襯線體:futura,avant gaede gothic,avenir next Frutiger.其中Frutiger是一款劃時代的字體,“以穩重,舒適”的特性出名。我之所以選用這款字體是因為Frutiger設計溫和及清晰的特點,協助品牌在全世界范圍內保持一致。Neue Frutiger延續了Adrian Frutiger 設計的同名字體Frutiger,這套字體是他在70年代中期為巴黎附近的戴高樂機場設計的。易讀性和可識別性在整套字體中貫穿始終,Monotype 的字體設計總監小林章先生將其描述為具有“某種有機的且友好的意味”,它可廣泛用于從打印到屏幕的各種媒介。futura是一款現代的,極具幾何特征的字體,設計表層突出的是“合理性,簡潔性”。avant gaede gothic是20世紀70年代在美國最具有平面設計創意的字體,“厚重,有趣”是他的主要特征。下圖為挑選出來的比較經典的西文字體。




          在此之前,DesignStudio團隊給我們帶來了一款制作的英文字體設計,如下圖:


          這款英文字體面臨的問題:

          英文字體沒有與中文進行搭配設計,為單獨設計,在中英文混排上面效果需要與中文對齊。以中文為主,英文為輔,從字體的粗細與字形上需要優化的更整體,目前英文對比中文比較粗,由于很多個性化的倒角設計,在縮小后字形識別性會變弱一些,主次上更希望突出中文,搭配更簡潔的英文。


          問題:如何解決在繼承英國DesignStudio團隊英文字體的基礎上去更加符合中國的排版習慣與使用習慣?

          最終在確定好英文字標設計后,我們把中英文進行了搭配,得到了最終版本的英文字標,如上圖最后版本,并根據這套字標的字形特征請供應商制作了一套新的英文字庫。

          新的騰訊游戲字庫的設計也給騰訊游戲新品牌帶來更多元化的使用場景,讓品牌更佳具有說服力。

          如下圖。







          小結:優秀的品牌擁有一個強有力的品牌符號,并且圍繞這個符號展開符合其品牌定位的視覺識別系統為傳播框架。當這個系統通過品牌傳播傳遞給消費者的時候,其顯著地激發了消費者的認知,使消費者將所有品牌消費體驗和感知記憶都歸結到這個符號上。符號所承載的內容是從其對象體內容中提取極其具識別潛質的內容直接或間接延伸出的。從視覺,功能,精神等層面一步步推導設計的邏輯與標準,向公眾傳播一種正面的社會啟迪意義,實現一種更為合理的生存方式。

          文章來源:站酷

          全面的圖標設計類型和風格總結

          ui設計分享達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          圖標是 UI 設計中極為重要的一個環節,我們在做每個界面的設計幾乎都會涉及到圖標的表達,出色的圖標設計可以讓界面表達更加精致、有趣。圖標的設計往往也體現著設計師的基本功,因此除了日常多畫提升對圖標造型的把控力外,我們也更需要了解和學習圖標設計的趨勢類型,從而幫助我們提高在設計中的效率。

          基于自我學習的目的,平時在瀏覽一些設計網站時也會做相對應的收集。因此本文主要對于圖標設計的 「類型、風格」 進行了整理,以及自己對于每種圖標類型的思考。




          圖標的類型劃分

          設計網站上的圖標可以說是多種多樣,不同類型的圖標都有著獨特的魅力。例如,線性圖標簡潔輕量、面性圖標厚重直接,當然同一種類型的圖標也具有很多不同的表現形式。

          因此基于本人對圖標的理解,大致劃分為三類:線性、面性、線面結合。結合三種基礎類型的表達方式可以創造出各式各樣的表現形式。



          線性圖標

          使用輕量的線條勾勒的圖標,整體感受也趨向于精致、細致而具有銳度感。不同的線條表現具有不同的視覺感受,細線輕量、直線硬朗、曲線柔美。

          1. 線型圖標基礎分析及想法

          粗細對比

          粗細不同,圖標的力度和重量感就會有差異。粗線的圖標,視覺關注力來說會更加突出,但較于細線的圖標也會顯得粗壯、厚重。細線的圖標,精致、透氣、秀美。

          但在設計時需要依據 「整體的 UI 風格」 來決定線的粗細,而并非單純的考慮圖標的關注度,反而更需要考慮圖標與界面整體的平衡感。

          柔度對比

          直角與圓角決定了外形的感知和風格的走向,如下圖對比中看出,圓角越大圖形越趨向于可愛柔美(如下右圖),圓角越小則越直接、硬朗和陽剛(如下左圖)。因此剛或柔或中間值完全取決于早期對于整體風格的定調。




          繁簡對比

          除了輕量化和簡潔之外,圖標的識別性也是極為重要。如下左圖,「過度簡潔」 導致圖標失去該有的識別度而出現歧義,而下右圖的元素疊加使得圖標稍顯復雜。在繁與簡的平衡中,應該保持在不影響圖標識別度的情況下,最大限度的提升圖標的簡潔程度。




          特征的識別度

          除了簡潔程度,也需要考慮圖標該有的特征。例如下圖 「評論」 圖標的案例,當我把圖標中的「三個點」 去掉時,圖標依舊具有 「對話/評論」 的表意,而當我把下面的 「箭頭」 去掉保留 「三個點」 時,則會出現歧義,它可以被表意為 「更多」 的意思,因此在設計圖標時需要對于表意做精準把握,避免歧義出現。




          保持圖標的特征美感

          如下面的 「心形」 圖標,下左圖是我們具有普識性的圖標,與圓形組合之后依然保持著原有的形態美感。但我們不時也會看到第三種設計,整體外形雖然保持著愛心,但為了與整體風格「一致」 強行對外輪廓進行切割,與原圖形在美感上則稍微有些出入,這也是我們需要思考的關鍵點。




          組合型比例

          組合型的比例會影響到圖標的精致程度,準確的 「比例值」 能讓整體的造型趨向平衡,更具有美感。如下圖案例嘗試了兩組不同比例的效果,這里以圖標窄邊作為 「基準值」 進行嘗試。當內形為外形的 1 : 2 時(下圖2),圖標的整體視覺效果較為平衡;當大于 1 : 2 并接近 4 : 3 時,圖標內部結構會顯得過于飽滿。而小于 1 : 2 并接近 4 : 1 時(下圖3)則會產生稀疏不緊湊的效果。(這里的比例只是案例需要,實際設計以最終的視覺感知為準)



          2. 線性類型拓展

          基礎的理論,結合延展的應用,可以迸發出更多的創意想法。線形圖標也并非只有一種設計形態。通過以下案例,可以看看線型圖標設計類型的多樣性。

          極簡風格

          整體風格極為簡約,沒有多余的線條,通過線條還原圖形的本質,外形 「簡單」 卻具有很強的識別性,在視覺感知上輕松、干凈。

          極簡的風格圖標在于對圖形的把控,多一筆可能顯得復雜,少一筆可能影響識別程度。以上圖為例,圖標的組合元素保持在 2 個左右,整體較為干凈。

          實際應用:Instagram、Airbnb、Facebook、Twitte




          雙色

          相較于 「純色的圖標」 更具表現力,細節上也會更加豐富,形態感知上多了一層變化。結合顏色的疊加、對比、互補提升了圖標的層次感和豐富度。

          同色系:同為冷色系、暖色系或同一色系的表達形式。如下圖案例,以暗色為主色,亮色點綴提亮,使得圖標具有一種高光提亮的感覺。




          另一組案例是亮色主色結合暗色,整體圖標效果還算可以,但較亮的顏色沒有應用在圖標的關鍵特征上,使得圖標第一眼的感知稍有減弱。





          對比互補色:顏色跨度更大,層次更加分明。如下圖案例,紅色與藍色的撞色之后相比單色的圖標更加出彩和具有記憶點。





          實際案例:騰訊動漫我的頁面





          透明度變化

          本質上與上面一種為一個類型的設計,通過透明度的疊加和變化,提升圖標的層次感和空間感,降低圖標的壓迫性。




          實際案例:愛奇藝9宮格圖標




          漸變層次疊加

          漸變帶出了圖標的質感,結合「不同深度」或「不同飽和度」的變化,讓圖標更具有細節和層次。





          黑白+品牌色

          黑白色作為主色調,結合品牌色作為點綴色。與常規的黑白圖標相比,既產生了變化,同時兼顧了品牌色的透出。




          實際案例:大眾點評攻略頁面圖標





          線性漸變

          結合漸變的顏色,豐富了整個圖標的視覺表達,并提升了圖標的視覺沖擊力和設計感。案例結合黑白背景作為嘗試,白底:粗線比細線的視覺效果相對較好,漸變也能較為清晰地被表達;黑底:細線比粗線的視覺效果顯示得更加精致和具有銳度感。





          實際案例:網易考拉、NAVER




          一筆成形

          此類圖標在視覺表達上具有較高的線性流暢度和設計感,關注點在于整組圖標的 「開口起始點」 設定上需保持一致。例如,「從左到右」或「從右到左」形成一體化的連貫線條,開口起始點不一致會影響整組圖標的一致性,應用在頁面時也會顯得雜亂。



          斷點圖標

          與上一種較為類似,但沒有連貫度的要求。在線形圖標基礎上面,尋找一個缺口來打破 「全包邊圖標」 的沉悶感,使得圖標具有透氣性和線條的變化。缺口的位置盡量保持統一的方向及大小,另外需要控制開口個數避免過多導致圖標外形過于零碎。




          實際案例:騰訊體育、京東



          面性圖標

          面性圖標比線性圖標更能表達出圖標的力量感和重量感,比線性圖標會更加容易吸引用戶目光。在識別度上,面性圖標更加依賴于外輪廓的清晰度,因此在設計時對于外形的打磨是重中之重,清晰的外輪廓可以幫助提高識別度。


          1. 面型圖標基礎分析及想法

          輪廓對比

          輪廓的差異會體現出不同的氣質,如下圖的左邊和右邊的區別,一個氣質較為直接硬朗,另一個則較為柔美可愛。流暢的外形可以讓面形圖標的整體更加簡潔、規整,如下圖中間的圖標在輪廓的處理上則顯得比較碎,整體外輪廓造型的連貫度有所欠缺。





          鏤空對比

          適當的鏤空除了補充了圖形的識別度之外,還提升了面性圖標的設計細節。另外需要控制好鏤空部分與整體的外形比例,過小或過大都可能影響圖標的平衡感。如下圖的中間和右邊,鏤空過小對圖標的辨識度并沒有多大作用,沒有鏤空則少了一些透氣感。




          形體對比

          形態上的差異也會具有不一樣的視覺感知。以「星」和「心」為案例,單獨形體與組合之后的形體相比視覺感知更直觀些,而組合形的圖標相對會精致一些,多了一些層次。在日常設計中的經驗是:越小的圖標形體應該越簡單,因此建議單體出現較好;若圖標的尺寸足夠大時可采用組合型的設計,補充圖標的細節。



          繁簡對比

          設計面性圖標時,對于多余細節的管理也很重要。隨著細節的增加,塊面切割過多,會使得整體圖標變得過于零碎(如下右圖)。保持簡約的設計提高圖標的識別度,在關鍵的特征細節上做補充(如下中間圖的相機閃光燈)。


          2. 面性圖標類型拓展

          面性圖標在設計時也可以結合各種不同的表達方式,來提升圖標的質感和創意,而非只是簡單的填充顏色。

          單色面+點綴色

          整體的外形使用統一的顏色,結合圖標的屬性感知使用不同的顏色進行點綴,通過點綴色提亮了圖標的視覺效果,達到既統一又具有差異化。





          多彩雙色

          通過對比色、鄰近色的搭配來營造整體的圖標氛圍,提升了圖標的層次和豐富度,雙色的表達也增添了圖形的趣味性。在日常使用的 APP 中極為常見,簡單且容易出效果。




          微質感漸變

          微弱的漸變提升了圖標的質感。漸變的方向會影響整體圖標的視覺效果,因此可以根據不同設計的需要進行調整。如下圖案例:




          實際案例:全民K歌





          透明度/灰度變化

          透明度/灰度的變化,讓原來單色的圖標變得更加具有層次感和空間感,設計細節更加豐富,降低了單色面性圖標的厚重感。





          實際案例:企鵝FM我的頁面




          透明度變化+漸變

          漸變的設計提升了面性圖標的質感,從顏色上具有一定的豐富度。在漸變的基礎上對組合型做透明度差異化,使得圖標具有了層次感。




          透明疊加的圖標+漸變的背景

          此類圖標常常被應用在 UI 界面中的列表或者頂部入口的位置。





          實際案例:全民K歌點歌頁面





          顏色疊加穿透

          圖標透明疊加之后產生了交錯的負形,疊加出第三個面。雖然整體設計依然保持著扁平化,但卻多了一份層次感,并且增加了圖標的細節。




          實際案例:百度網盤





          漸變層次疊加

          整體的效果與透明度變化的圖標較為接近,通過漸變的深淺變化,使得形狀的銜接處出現了明暗對比,因此圖標也具有了厚度感和層次感。





          實際案例:NAVER、掌上生活





          高斯模糊

          此類圖標基本沒有在 APP 中看到,與「透明度變化」或「顏色疊加」相比都更具層次感和空間感,同時圖標也具有較強的設計感。





          線面結合

          結合了線性和面性的優點,既保持了面性的重量感,同時具有線性的精致、細膩。因此在設計時可以根據圖標具體想要表達的感覺對線面比例進行把控,不同比例可以呈現出不同的視覺感知。



          1. 線面結合圖標的基礎分析及想法

          線面比例

          線面比例的差異,圖形呈現出來的張力也會有不同的感受?;谥虚g填充的圖標形態嘗試了三種不同的比例,從下圖中可以看出,當填充與外形窄邊比為 1 : 3 時(左圖)圖標呈現往內收的感覺;填充與外形窄邊比為 1 : 2 時(中間)圖標整體較為平衡;當填充與外形窄邊比為 2 : 3(大于1:2)時(右圖)整體具有外擴趨勢。




          組合形式

          線面可以通過不同的組合形式進行繪制。基于不同的組合形態可以設計出多種多樣的線面圖標,不同的組合形式會體現出不同的設計風格,因此在設計時盡量多發散思考,尋找出適合你的組合方式。




          繁簡對比

          線面結合本身就由兩種形式組合,因此在設計的時候更需要對整體造型進行把控,單體(線和面)造型必須保持較高的簡潔程度,這樣最終組合形成的圖標才不會過于復雜(左圖),若本身形態過于復雜,則會降低圖標的辨識度和視覺美觀度。


          2. 線面結合圖標類型拓展

          線面結合的圖標集合了線性和面性的優點,在設計方式上也繼承了兩者的優點。設計方式也是基于以上兩種的結合,因此可以結合出更多設計的可能性。

          黑白線+面性品牌色

          與「線性+品牌色」的做法較為接近,統一的線性顏色疊加品牌色的透出。




          實際案例:好好住、soul




          線面雙色

          基于線面的基礎上,在線和面的顏色上做差異。具體做法與線性或面性的雙色接近。




          線面結合-陰陽

          線和面的結合按 50% 的比例進行設計,依據上下、左右、居中等基礎方式的結構化設計,整體圖標的視覺效果較為跳躍,非常規。



          線面雙色+錯位

          在雙色圖標的基礎上,線和面按照統一的 「百分比」 進行縮放,并進行透視和位移的設計,整體呈現出來的是一種交錯疊加的視覺效果,相比普通的線面雙色更加豐富。




          實際案例:閑魚底部tab、臉球底部tab




          線面錯位+漸變

          基于上一種風格,對面或者線的顏色進行漸變設計,豐富了圖標的質感和顏色更加細膩。




          線面透明度變化

          與「線面透明度變化」的設計方式大致一樣。如下圖案例,「弱線強面」的第一識別度較弱,而「弱面強線」 的外形識別度較高,也更符合圖標的表達。




          實際案例:新浪微博、騰訊新聞

          基于三種基礎的類型表達,可以拓展出多種多樣的設計形式。除了以上的案例之外,還收集了一些其他的設計。





          線面結合 – 插畫

          整體比較偏向插圖的感覺,細節和元素較多,常見于一些 APP 的空白頁設計。




          線面結合 – 卡通插畫

          整體感覺比較可愛、卡通、二次元,常見于一些二次元或漫畫類的 APP。





          面性 – 漸變強質感

          整體風格的光影質感會比較強烈,常在一些活動運營或小游戲的界面出現。




          面性 – 扁平寫實

          整體感覺比較扁平,細節的豐富度與現實感知接近。





          線面+漸變插畫

          整體風格比較偏向絢麗多彩的顏色風格,質感和細節較為豐富。


          寫實風格




          3D質感圖標

          由于 C4D 的制作成本相對較高,目前較少在常規的 APP 中看到。但 3D 作為一個主流的設計趨勢,在時間和能力允許的情況下需要多做這方面的嘗試。




          等距的線面結合

          等距的設計,讓原本線面的圖標豐富了層次,并具有立體透視的感覺。




          除了以上這些之外,我們在實際場景中也會發現一些較為特別的圖標設計。

          Facebook 更多頁面的列表圖標

          整體風格偏向插畫風+漸變質感。由于更多的頁面為純列表的設計,因此整個頁面在圖標的設計上做了很大膽的嘗試,與常規的單色圖標相比更具有吸引力。為了區別不同的業務,系統性質的功能圖標做了色調的區分。




          APP Store 游戲和新APP界面下的類別列表圖標

          整體為具象化扁平風格的設計表達,圖標的顏色還原了最基本的現實感知。




          iOS 系統辦公類軟件的起始頁面圖標

          整體風格比較偏商務簡約,具象的圖形表達+輕微的漸變質感。




          QQ手機版中延展的功能圖標

          整體風格偏向輕寫實+微弱漸變。每個圖標都具有豐富的細節表達,色調方面基于業務屬性結合品牌色進行了區分,整體既統一又具有差異化。




          大眾點評頂部入口的圖標

          整體風格偏向寫實+強漸變+炫光感,每個圖標都具有豐富的細節表達。




          旅法師營地

          游戲、二次元類的 APP,因此在圖標的設計上也偏向細節較為豐富的插畫風格。




          嗶哩嗶哩動漫

          圖標風格偏向卡通插畫,選中態與默認態的設計較為巧妙。



          總結

          本文的重點在于透過這些設計類型或者技法的了解,幫助我們在日常設計中提升輸出效率。圖標雖然作為 UI 設計的基礎,卻有很深的學問,精致的圖標更是可以起到點睛的作用,提升界面的質感和氛圍。

          圖標的種類遠遠不止本文所提到的這些內容,但是萬變不離其宗,都是「線性、面性、線面結合」 再結合 「透明度、漸變、顏色疊加、質感、多維空間」等等的表達方式而設計出來的。

          我們除了需要掌握這些內容之外,還需要提升圖標設計的造型能力,更需要日積月累的練習和思考,從量到質的變化。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。


          社交互動創新 | 從點贊到擊掌

          資深UI設計者


          如何在產品功能上做更多的創新來體現設計價值一直是設計師關注的話題,尤其是在體系成熟的產品里,如何對完善的基本框架和功能進行突破、如何挖掘用戶的互動訴求并拓展更多的互動行為等對于設計師來講都是很大的挑戰。我們從前期互動行為的挖掘、情感化的視覺體驗打磨以及趣味的玩法升級三個方面,剖析Qzone擊掌功能的整個設計歷程,或許能為大家提供一些參考性的思路和設計方法。


          2 何為互動

          我們先從真實生活場景中的互動說起。

          人與人之間的互動無處不在,它是我們生活中必要的組成部分,也是整個人類社會的基石。從本質上來講,社交產品要解決的問題就是人們之間互動的問題。那么如何定義互動呢,我們可以從日常的生活場景中窺得一二。


          反饋鏈

          首先,讓我們來看一看日常生活中的互動案例:

          這是一個很常見的熟人互動案例,我們可以看到,熟人間很容易產生話題,并持續互動下去。但是如果同樣的話題發生在不是很熟悉的人之間,可能就會是另一番場景:

          在例二中,因為A與B互相不熟悉,所以A沒有對B的回復產生進一步互動,對話因此而結束。我們可以進一步推理,其實在這個案例中,不管原因變成什么,只要A沒有響應B的反饋,那么A與B的互動就大概率會終止。

          這是因為良好的互動行為一定是雙方(或多方)的互相行為,一旦因為某些原因導致其中的反饋中斷,互動將無法持續。由此可以總結出:

          互動在本質上是由一系列的反饋(互動)組成的一條反饋鏈

          反饋質量

          但是光有反饋鏈還遠遠不夠,在社交場景下,我們往往希望反饋鏈足夠長,這樣才能讓互動雙方產生感情升溫。在例二中,其實是存在著一條很短的反饋鏈的,A與B只互動了一個回合。A沒有繼續響應B的反饋,是因為B的反饋質量較低。試想,當A向B問好時,若B的回復是“早上好,你今天穿的真精神!”,那么A會不會響應B的反饋呢?我想大概是會的。由此可見:

          反饋鏈的長短取決于每次反饋(互動)的質量。

          高質量的反饋具備很多特點,其中有三個尤為重要

          1 反饋鏈中的指向性

          我們日常生活中的互動行為,一般都會以一個“握手機制”作為開端。這個握手機制可以是顯性的(直接喊出對方的稱呼,可以是名字、外號,也可以是關系稱謂),有時也可以是隱性的(眼光的對視、話題的流轉等)。這個握手機制幫助互動雙方建立了互動的場景,讓雙方達成"開始交流"的共識,以便信息的接收者做好傾聽并回復的準備,這就是互動中的指向性。

          任何互動行為都是發生在兩個或者多個明確的對象之間的,因此在良好的互動行為中,指向性顯得尤為重要——沒有人會去響應別人的自言自語。在互動的過程中,指向性不明確的互動行為是低質量的,不容易獲得進一步的反饋,例如評論區中的統一回復、群發的新年問候、領導在臺上的講話等。反之指向性明確的互動是高質量的,比較容易獲得反饋,例如群聊中@某個人、收件人為某個人而非郵件組的郵件、多人聊天時眼光的對視等。

          2 適度的互動行為

          互動行為的適度包含兩個方面:信息適度及行為適度。

          一方面,由于互動行為本質上是信息的傳遞過程,因此每次反饋的信息質量會直接影響到反饋的整體質量。好的反饋應該傳達適度的信息,讓接收者可以對傳遞的信息進行輕松的接收及處理,降低接收者的反饋門檻。

          另一方面,傳遞信息的行為也應該是適度的。在生活中,不同的場合下,我們會選擇不同的行為來表達同樣的意思,比如比較正式的場合會選擇握手作為問好,而與家人久別后的見面則可能是一個熱情的擁抱。


          3 反饋的即時性

          互動行為是依賴于一定語境的,當語境消失,互動也將停止。在社交產品的互動場景中,互動語境一般會隨時間流逝而逐漸減弱直到消失,所以反饋的質量也隨時間的流逝而逐漸衰減,若想讓反饋鏈可以得到延續,要盡量保證在語境消失前產生反饋行為,因此即時性的反饋就顯得十分重要。


          3 點贊到擊掌的互動探索

          有了以上的理論基礎,接下來分析一下Qzone中的互動行為。

          Qzone中的互動方式可以歸為三類:評論、轉發、點贊。其中,評論和轉發都可以產生完整的反饋鏈。針對評論,用戶還可以繼續通過評論、點贊等方式進行反饋;針對轉發內容,用戶也可以進行進一步的評論、轉發、點贊。而對于點贊行為,反饋鏈到此戛然而止,用戶無法對點贊行為進行直接的反饋。

          因此,為了讓用戶的點贊可以形成完整的反饋鏈,我們的設計目標就呼之欲出——為Qzone中的點贊行為尋找一個具有指向性的、適度的、具有即時性的反饋行為。互動場景的選擇


          互動場景的選擇

          既然要設計的是一個具有指向性的互動行為,我們就必須在可以接收到贊的場景里去做這件事。所以我們首先遍歷了主人態下,所有可以看到別人給自己點贊的場景。

          但是以上的場景中,并不是都適合承載點贊的反饋行為。根據用戶的行為目的,我們可以把以上場景分為兩類:圍繞點贊行為的關鍵行為路徑(圖c.消息列表、圖d.點贊列表)、不以點贊為核心目標的其他場景(圖a.好友動態、圖b.個人主頁)。顯然,我們應該把圍繞點贊行為的關鍵行為路徑作為主要互動場景。并且所有對于點贊的反饋都是直接依附于點贊行為本身的,使反饋行為具有明確的指向性。


          適度的語義及交互

          前文提到,適度的互動包含“信息適度”和“行為適度”兩個方面,落地到產品里,就是定義互動行為的“語義”和“交互行為”。

          關于點贊反饋行為的語義表達,我們列舉了很多來自現實社交場景中的備選方案,然后以動作的情感程度和成熟程度劃分了4個象限,對這系列動作進行歸類。

          由于點贊行為本身所傳達的情感是比較輕量化的,我們更傾向于選擇一個輕量化的情感表達方式作為點贊的反饋;同時由于Qzone的用戶群體以年輕用戶為主,我們還需要選擇一個盡量貼合年輕用戶感官的語義。因此我們在象限圖中初步選中位于左下角的“擊掌”和“剪刀手”兩個概念。考慮到“擊掌”比“剪刀手”具有更為明顯的指向性,所以確定“擊掌”為最終的落地方案。

          同時,因為點贊行為本身是一個及其輕量化的行為,所以我們也用最輕量的交互操作作為它的反饋,只需要一次點擊即可。


          反饋的及時觸達

          用戶每次收到針對點贊的反饋,都會收到一條與點贊相同的消息提醒,通過push、首頁新消息提醒、紅點等讓用戶第一時間知曉。在消息箱列表中,每一條點贊和回贊都成為單獨的一條消息,可以讓用戶最直觀的查看并進行反饋。

          綜上所述,我們確定了整個反饋鏈的交互框架:

          4 情感化的視覺體驗打磨

          擊掌的視覺設計是一個發現問題到解決問不斷循環的過程。在這個過程中,推動解決方案逐步升級的核心方法是情感化設計。

          擊掌動作本身就帶有豐富的情緒,而情感化的設計方法可以讓情緒的釋放更大化,所以在視覺設計階段,我們以情感化設計作為方法去推進方案逐步完善,最終建立起用戶與產品、用戶與用戶間的情感連接,加深用戶對功能的認可和共鳴,帶來更加有趣的體驗。

          情感化設計具象到擊掌這個功能,需要解決兩個問題:

          1.如何喚起用戶在現實場景中的擊掌記憶;

          2.如何符合空間用戶群體的基本調性。


          喚起用戶在現實場景中的擊掌記憶

          設計之初,我們用平面icon的形式來表現擊掌,雖然可以滿足基本的功能訴求,但是在視覺體驗上乏善可陳,我們又嘗試更豐富的各種視覺表現以此引起用戶對擊掌這個動作的共鳴。

          在設計推敲的過程中共經歷了三個階段,在不斷發現問題和解決問題的循環中尋找更優的設計方案:

          Step 1 | 靜態展示到動勢塑造

          我們用兩個手掌疊加的樣式構造了擊掌icon的基本造型。為了增強用戶對于“擊掌”的語義感知使用了漫畫中常用的動態線條,讓用戶從視覺上直觀感受到這是一個動態的互動行為,而非簡單的單方面點亮icon,以此加強用戶對擊掌這個互動行為的認知。


          Step 2 | 2D動畫演繹

          但是這樣的動勢表達仍然具有局限性,動態線條的表達方式并不具備普適性,無法保證用戶可以理解其中的含義。因此我們在第二個階段的設計迭代中使用更加直觀的動畫來幫助用戶理解,使其與現實生活中的動作產生呼應。


          Step 3 | 3D表現

          在解決了語義表達的問題后,我們遇到了一個新的挑戰,由于整個動畫的展示視范圍較小,在視覺表現力上并不理想。因此在第三個設計階段中,我們通過放大動畫、嘗試3D表現形式的方法解決上述問題。同時,3D的表現手法還可以通過光影和質感來傳達更多信息,更加直觀易懂,具有極強的代入感。

          符合空間用戶群體的基本調性

          空間的主流用戶以年輕人居多,為了匹配用戶群體的基本調性需要打造一個“年輕”、“有趣”的3D擊掌動畫。為此,我們以“3D”、“young”、“fun”作為關鍵詞收集參考素材,以此建立情緒版。

          1 趣味和輕量的質感

          如前文所述,對于擊掌反饋行為是一個輕量化的互動,為避免3D表現手法過于寫實而帶來不必要的厚重感,同時也為了增加動畫的趣味性,我們選擇卡通的手掌造型進行建模;在材質的選擇上我們偏向黏土材質,弱化高光,讓視覺上體驗更加輕量。

          2 彈性曲線讓動畫更生動

          現實生活中的擊掌動作是一個減速運動,但是為突出擊掌的動勢和加強趣味性,我們采用了非寫實的彈性曲線來打造這個動畫,以此加強動畫的趣味性。

          3 禮花烘托氛圍

          在后續的產品迭代優化過程中,我們引入了無限擊掌的玩法,用戶之間可以無限回贊。這就導致動畫被重復播放,會加速用戶對動畫的審美疲勞。所以為配合產品玩法的升級對動畫的設計也進行了迭代,基于擊掌次數設計了不同的展示彩蛋——在擊掌達到特定次數后,會有彩帶禮花蹦出,在烘托多次擊掌的熱情氛圍的同時,給用戶帶來更多趣味和驚喜。

          在擊掌功能的設計過程中,我們不斷在發現問題、解決問題的循環中不斷尋求更優解,逐步把一個不到100像素范圍內的擊掌icon做到更好,以此來喚起用戶的對現實擊掌的記憶,建立起與用戶情感上的連接。

          另外,通過趣味性的視覺表現手法不斷推敲動畫設計,讓Qzone的年輕用戶不僅從心理上建立連接,在表現層也能感知到符合自身標簽的趣味調性。


          5 趣味性的玩法升級

          除上文提到的彩帶禮花以外,在擊掌玩法升級過程中,我們也拓展了更多內容:


          給用戶制造驚喜

          隨著用戶間反復擊掌次數變多,粒子效果會不斷升級,并加入富有層次的入場效果;而且達到關鍵擊掌次數的時候,會展示擊掌的次數,通過用戶的成就感來刺激其產生更多的擊掌行為。

          個性化的延展

          為了豐富手掌樣式的選擇,給用戶提供更多樣的體驗,我們和增值團隊一起設計了更多的手掌形式,同時引入一些IP形象,讓擊掌更能喚起用戶的共鳴,也更加有趣。

          6 寫在最后

          擊掌這個功能從前期探索到上線和二次迭代經歷了很長一段時間,整個項目對設計師來說也是一次收獲滿滿的過程。


          創新也可以是從1到N的過程

          創新并不都是從0到1從無到有的創新,尤其對于功能和框架體系成熟的產品,盲目的追求創新去改變用戶的認知和習慣是不妥的,從小的問題點著手去深挖和思考,找到合適的解決方案并打磨細節給用戶創造驚喜,以小博大去做創新也能達到四兩撥千斤的效果。


          打磨細節創造驚喜

          探索和挖掘到一個不錯的想法之后,打磨細節也是同樣重要的,我們出了各種不同的擊掌效果方案,去找到給用戶驚喜和操作輕量的平衡,這個功能上線以后我們也一直在關注用戶的反饋,從用戶反饋中發現還可以做驚喜升級,從一個點出發,把這個點不斷的擴充做的更細致和更加閉環。


          從生活中來,到生活中去

          擊掌這個功能之所以有這個好的數據和用戶認可度,有一個很重要的原因是因為本身這個行為和現實生活中的場景是相對應的,所以讓用戶能很快的理解和操作,符合用戶真實場景的認知所以學習成本比較低,我們在做設計的時候用生活場景挖掘產品,能達到事倍功半的效果。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計  包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          Tab Bar 圖標動效設計類型總結

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          Tab bar 作為整個 APP 的第一觸點,給用戶傳遞的理念及信息在整個 APP 中具有不可替代的重要性。我們的第一感受是粗糙或是精致,都會通過這個簡單的操作切換而感知。因此 tab bar 的設計,往往也是檢驗整個 APP 設計是否精致的標準。

          Tab bar 設計中,有一個很重要但卻常常會被設計師們遺漏的關鍵點──tab 切換時的 「圖標動畫設計」。如這些 APP 的底部 tab 設計都使用了這一種方式(以下視頻):

          Tab bars圖標動畫的作用

          精彩的圖標動畫,對整體的設計具有畫龍點睛的作用,降低 tab 切換時的枯燥感,提升操作的愉悅度和期待感。甚至可以通過 tab 的動畫設計給用戶傳達出整個 APP 設計的品牌及理念。

          1. 動靜對比

          動態的設計豐富了圖標更多可能性的表達,結合不同的動態效果表達出不同的情緒或情感。而除了情感的表達之外,最基礎的作用在于動態比靜態更加吸引眼球,增加視覺關注度,因此在切換 tab 時具有更強的視覺沖擊力。

          2. 柔和與生硬

          緩動的動效過渡,相比于無動效的設計,在 tab 切換時整體的視覺感受會更加柔和、輕量。過渡直接的反饋,容易造成生硬而不具美感。

          3. 趣味的表達

          由于動效的加入,我們在設計 tab 切換時會變得更加多元化,而不是單純的設計一個動作的反饋。在過渡的時間差中,可以進行很多趣味的表達。

          3. 情緒代入

          圖標結合表情的設計,運用動效的設計,讓整體的情緒感受更加直觀。如下圖案例,默認態與選中態通過前后的差異對比,點擊后出現的表情驚喜,具有不一樣的情緒變化。

          Tab bar圖標動畫的基礎類型

          動畫的設計是多樣化的,Tab bar 圖標動畫的類型實際上并沒有明確的劃分,這里主要列舉的是自己在日常瀏覽設計網站時的收集,以及個人認為比較常見的一些類型。我們可以基于這些常見類型的設計,對我們的設計進行再升華,從而提高整體設計的質感和趣味。

          1. 縮放動畫

          點擊后通過一定的比例 「縮放」 反饋,突出 tab 之前的變化,從而強化了 tab 操作的感知,提升對于操作區域的視覺聚焦。結合不同的縮放效果,可以呈現出不同的視覺感知,縮放動畫大致分為線性和彈性兩種類型。

          線性縮放

          圖標在放大或縮小的過程中,使用了勻速的動畫效果,整體動畫一步到位、干凈利落。整體視覺感知較為柔和。

          彈性縮放

          帶有彈性縮放的 tab 反饋,讓整體的設計更加具有趣味性,相比線性縮放也更有視覺沖擊力。圖標的運動規則:先從 0 放大到最大(數值根據實際情況設定),然后再回彈至正常大小。

          2. 透明度自然過渡

          讓 tab 切換之間的過渡更加自然、柔和。相比于純靜態切換只多了一層透明度變化,但卻具有完全不一樣的視覺感受。

          3. 位移

          位移出現的圖標會產生一定的速度感,但需要控制位移的速度,過快容易忽略中間的運動軌跡,而影響自然過渡的效果。

          4. 抖動

          通過圖標的左右、上下快速位移或旋轉形成,整體的動畫效果節奏較快,具有一定的速度感。情緒表達上較為俏皮。

          左右抖動

          點擊后,圖標反饋進行上下快速位移。建議來回位移次數不宜太多,控制在 1-2 次左右,次數太多容易顯得拖沓。

          跳動的圖標

          點擊切換后,圖標從底部彈起再回到初始位置,整體視覺感受具有跳動的韻律感。

          晃動的圖標

          旋轉抖動的圖標比上下或左右會更加具有趣味感。設定圖標的中心點或角點為旋轉軸,通過來回晃動而形成的效果。

          5. 填充

          切換時,默認 tab 由線性向面性的轉變。填充類型的動畫效果整體簡單、直接,直觀地表達出圖標切換前后的對應關系。關鍵點在于處理好線性與面性圖標的細節轉換。

          中心填充

          使用某種幾何圖形(可以是圓形或其他)通過發散放大的設計方式,結合一定的節奏韻律擴展至填滿整個圖標。

          掃描填充

          動畫效果從圖標的一側,通過劃動變化至填滿。

          6. 畫線-線性軌跡

          以線性圖標或線面圖標中的線運動為主,在設計整套圖標時,運動軌跡需要保持統一(線的初始與結束的位置/方向等)。軌跡不一致,容易導致圖標的一致性被破壞。

          局部細節畫線

          選擇圖標的關鍵細節或圖標的特征進行畫線設計,增強圖標的特征細節,提高圖標的記憶點。

          整體畫線

          與局部細節畫線基本一致,差別的點在于表達了不同的視覺感受。整體畫線從視覺感受上會相對更加飽滿。但需要根據圖標的復雜程度而定,圖標過渡復雜,可能容易造成拖沓的動畫效果。

          7. 結合容器

          結合不同的幾何形作為選中圖標的當前態的背景,在背景上設計出現的動畫效果。既強化了選中當前態,整體的 tab 切換的一致性也較高。

          8. 元素介質

          設計上結合某種圖形元素作為當前選中態,在切換時通過元素的位移、跳動等方式來達到 tab 切換的動畫效果。

          Tab圖標動畫的組合形

          除了以上單種類型的動畫方式外,還可以嘗試多種方式結合。通過不同的方式結合可以產生出更多的可能性,讓你的設計更加具有創意和打破常規。

          1. 填充+畫線

          2. 填充+抖動

          3. 彈性縮放+填充

          4. 元素介質+抖動

          5. 位移+透明度

          更多案例(來自dribbble)

          總結

          tab bar 的圖標動畫最大的作用在于解決切換時的枯燥與單調,我們在設計時除了單純追求動畫的變化及多樣性之外,更多需要思考的是什么樣的動畫更符合我們的設計。

          本文的主旨是分享自己日常看到的一些動畫效果,以及對收集的內容進行的分析。實際的動畫樣式或者效果肯定遠遠不只這些,我們可以通過基礎的方法再結合自己的創意發揮出更多滿足自我設計的表達方式。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          虎牙公司級全新LOGO發布,打造直播里的平行世界!

          ui設計分享達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          虎牙直播是以游戲直播為主的彈幕式互動直播平臺,累計注冊用戶2億,提供熱門游戲直播、電競賽事直播與游戲賽事直播,手游直播等。

           

          最近虎牙在上市一周年之際,發布了全新的公司級LOGO,也就是為虎牙母公司設計的全新企業品牌形象系統。

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


          logo的造型結合大寫英文字母“H”和小寫英文“hy”,將其演化為平行空間的兩個45度對稱且平行的立面圖像。


          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

           

          文字logo上由虎牙和拼音“huya”兩部分組成,中文字也進行了筆畫的調整,將虎“h”筆畫末端進行了切斜收尾的處理,從而來呼應新logo的平行表現形式。

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=gif&wxfrom=5&wx_lazy=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

           

          不同形式組合的新logo效果

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=gif&wxfrom=5&wx_lazy=1

           

          在新logo的顏色方面,選用了比較青春具有活力,且明亮的陽光黃星云紫。

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=gif&wxfrom=5&wx_lazy=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

           

          圖形部分的延展也極具靈活性,靈活的視覺變化使品牌更具多樣性,也同時表現虎牙在數字時代的不同場景中,所呈現的多元化和創新。

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

           

          圖形延展效果

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

           

          再來看看,虎牙新logo應用在各種衍生產品的效果。

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

           藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。

           

          從0到1 —— 一組圖標的誕生

          ui設計分享達人


          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          圖標——界面設計最重要的元素之一。


          菜心經常寫關于圖標的教程和感悟,可見圖標設計在我日常工作中占了很大比重,所以我始終堅信能夠把圖標做好,也是難得的特長之一!


          這里拿幾個月前做的第一版小說模塊圖標為例(目前已經改版為2.0,等正式上線后會再次與大家分享),簡單介紹下我的圖標設計思路,大綱如下:


          1.風格設定

          2.創意腦爆

          3.設計執行

           

          1.風格設定

          在開始構思之前,我們首先需要確定圖標的設計風格,風格可以根據整體產品的設計語言推導,需要符合目標人群的喜好以及產品的屬性定位。


          雖然我們是小說模塊,但還是附屬于動漫產品體系之下,前期的種子用戶還是產品原有的動漫人群,所以我將風格鎖定在原有動漫的視覺風格之上,大家可以看下當時動漫標簽欄圖標的樣式:


          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


          由此小說模塊圖標與上圖保持一致,設定為描邊與色塊結合風格。


          2.創意腦爆

          鎖定風格之后,就要構思創意了,也就是如何在這樣的風格之下去表達你的內容。


          這一步很關鍵,如何讓圖標不普通,大部分因素都就體現在內容表達上(因為風格其實也就那么幾種),我的方法是盡量去發散核心關鍵詞,讓圖標的含義標新立異,舉兩個這次圖標腦暴的例子:


          第一個,人氣圖標的腦暴路徑:


          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


          這里選詞有個小技巧,我會遵循兩個原則,具象二層。


          首先來說具象:其實很好理解,如果詞匯太抽象,你是很難表達的,比如流行這個詞,你是很難表達的,而就很具象,很容易表現。


          再來說二層:指的就是盡量不要選擇核心關鍵詞延展出來的第一層詞匯,因為這些詞是大家都能想到的,并且用爛的,比如人氣直接延展出來的、獎杯等等。(但是如果你的圖標沒有文字提示,需要表意特別明確,建議還是使用第一層延伸詞,可以在風格上做些差異化表現)。


          所以在上面兩個原則下,我最后設定人氣圖標使用愛的手勢,如下圖:


          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

           

          因為看到有些同學把搖滾的手勢弄混,所以說下它們的區別:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          希望大家在使用的時候不要搞錯哦!


          第二個,完結圖標的腦暴路徑:

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

           

          也是通過具象二層原則,最后使用了商店掛的打烊門牌這一創意來延展:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

           

          每個關鍵詞的腦暴都會產生很多詞匯,各不相同,我們需要學會篩選,盡量避開過于抽象或者過于普通的詞匯,避開抽象等于具象,可以方便執行;避開普通等于特別,如果所有的設計都是大家用爛的創意,那作品一定會很平庸,以上就是我在腦暴時使用的方法。

           

          我們需要讓自己產出的每一套設計至少有一個特別出現,不然如何體現自己的價值呢?

           

          3.設計執行

          這一步就是根據前面得到的靈感圖來進行設計,我們來看下執行對比圖:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

           

          對于執行需要注意的基礎細節,之前有寫過《圖標設計五維自檢法》,有興趣的同學可以看一下,除此之外這里再補充一點——如何讓圖標做到有細節!

           

          本次設計總結了三個方法供大家參考:

           

          3.1 設計技法的細節

          比如給描邊增加短線風格:

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

          再比如線條增加面形色塊的組合:

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

           

          3.2 根據事物本身特征增加細節

          比如一個木質門牌的細節:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

           

          3.3 俏皮的那一筆

          比如書架上歪著的一本書:

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


          再比如一根線條的破局:


          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

           

          當然增加細節的方法有太多種,總的目的就是防止圖標過于簡單、簡陋,希望你也可以有自己的一套秘方來進行設計,大家互相學習。

          最后再看下圖標整體的效果吧:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


          附上過程中的一些稿子,哈哈,別嚇到你:


          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

           

          對于執行這一塊,別人再怎么說,你不做大量的練習與思考也是無濟于事,這個道理毋庸贅言了。效果圖如下:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

           

          接下來分享的也是這幾個圖標,不過是延伸版,切入的角度會略有不同。

           

          這次改版背景很簡單:首頁整體架構調整的同時,主圖標的設計語言改成了面性,而由于時間緊,小說圖標還沒來得及改,所以這次的設計目標就一個,把第一版圖標改成面性的。

           

          本來我以為,直接由線性改成填充的形式就可以了,分分鐘搞定,但沒想到改過來的效果是這樣的:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          于是經過調整又得到這樣的:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          為什么還是不好看?

          我也不知道??!

          這種情況就去多找參考,分析分析別人的優秀作品,比如下圖谷歌的圖標:

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

          為什么人家的看起來就那么好看,那么精致?

           

          我個人覺得最大原因就是它的透氣感比較好,導致透氣感好的原因在于,它采用了多元素組合的方式,并且使用大量留白與彩色形成對比。

           

          在這樣的分析之下,我對圖標進行了重新構思,直接在腦暴階段就重新思考(因為原有圖標是一個元素,很難再拆分成兩個元素來進行組合)。

          為了能做到獨特,我最終選用的圖標含義如下(盡量避開用爛的詞匯):

           

          書架:兩本書互相依靠

           

          熱門:手捧愛心

           

          免費:冰淇淋甜筒(創意來自甜筒經常會有第二份半價,或者買一  送一的活動)

           

          完結:黑子手捧完結的牌子

           

           

           

          最后的執行效果如下:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          新版圖標也是利用元素的組合,并且圖標內有大量留白使圖標更加透氣。

           

          除了透氣以外,我還在圖標之中融入了一些有生命感的內容,比如手,品牌形象,擬人化的書等等:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          使圖標變更加可愛,有情感,充滿一些故事感。

          除此之外,對圖標還增加了一點點的小細節作為小彩蛋:

           

          一般我們在做一組東西的時候,都希望能夠有一個主旨貫穿始終,這樣解釋起來更加有說法,有說服力。

           

          比如上面這組小說圖標,設計關鍵詞是溫暖,情感,可愛,在這樣的理念下,我將溫暖轉化為陽光作為視覺語言。

           

          可是陽光怎么落地呢,我當時能想到的就是高光和投影,本次使用的就是充滿光感的長投影:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          當然,為了使圖標輕量化,投影不宜過重,起到點睛的作用即可:

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

          除此之外,像前面所說,為了體現可愛的主旨,融入了手,品牌形象等有生命的元素(并且整體圖形都是比較圓潤,避免尖角的出現),這也是貫穿主旨的一條路徑。

           

          方法很多,各不相同,其本質目的還是希望大家做設計的時候要有適當的理念貫穿!

           

          整個設計過程就差不多這些了,其實花在調整細節的時間還是比較多的,隨便一個圖標有了大方向和思路之后,還是需要不斷的修改修改再修改。

           

           

           

          顏色的搭配、五官的間距、元素之間的大小關系等等,都需要不斷的調整,而真正考驗我們的也就在這些細節當中。

           

          這里再補充兩個增加可愛度的實用小技巧:

           

          五官緊湊

          一般情況下,縮小五官的間距,可以一定程度上實表情更加可愛,尤其是嘴鼻和眼睛的間距:

           

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

          腮紅

           

          一般來說,在我的印象中只有可愛的東西才會有腮紅,五大三粗的大老爺們加個腮紅,咦~,不敢想!

           

          所以畫可愛的形象或表情時,可以考慮加個腮紅:

          /var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

          不過我這次由于元素太多,所以沒加,大家可以根絕實際情況自行實踐。

           

          最后:

          看萬卷書,行萬里路!不走,書白看。

          看萬篇文,練萬個習!不練,文白看。

           

           

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 平面設計服務。

          快速利用AE來制作一個點贊動效

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          Image title


          Image title

          Image title

          Image title


          Image title

          Image title

          Image title

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

           

          QQ20周年展 | 策劃與設計執行

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          即便QQ已經陪伴大家20周年,我們依舊懷揣初心,保持科技改變生活的熱衷。應運而生我們設計了太空企鵝探索科技作為本次20周年的品牌理念,來寓意新的里程碑到來。

          Image title

          Image title

          Image title

          https://v.qq.com/x/page/l087071z1ua.html

          01 概述 | Overview


          QQ 20周年,是互聯網產品長青的一個傳說,也是家喻戶曉企鵝IP形象的成長,同時也代表了鵝廠精神的堅韌與奮進。即便已經陪伴大家20周年,但我們依舊懷揣初心,保持科技改變生活的熱衷。應運而生我們設計了太空企鵝探索科技作為本次20周年的品牌理念,來寓意新的里程碑到來。就像宇航員勇于探索未知宇宙知識一樣,QQ帶著初心不斷保持變革與成長,為用戶提供更具科技力與創新的服務!也寓意鵝廠不斷探索未來與科技向善的愿景!

          02 logo設計?Logo Design


          我們在設計的第一階段,logo設計,就是圍繞“有趣和科技”來展開發散設計。我們決定從數字“20”開始入手,把QQ和20不斷結合,同時融入宇宙太空元素,寓意QQ不斷的對外探索,從多個維度來看世界,尋找有趣的內容。我們為了貼合“宇宙探索”這風格,為這次展覽設計了專屬徽章,徽章設計沿用了太空的概念,結合星球,星空,宇航員等科幻元素。簡約的幾何形狀和大膽的配色貼合“QQ更好玩”的年輕潮流氣息。


          Image title

          03 概念設計?Concept & Design


          1. Space QQ


          太空QQ的太空服設計指的是科幻電影如《星際穿越》和《火星救援》中的太空服,我們也將的時尚潮流,2018年以來運動鞋領域最為明顯的趨勢,將 ugly & oversize 的潮流風格注入到運動鞋的設計當中。這種將時尚潮流與太空服相結合的新型運動鞋,使整體設計看起來時尚而風趣。如果沒有它,太空服可能只是一個淺顯的概念。


          Image title


          太空QQ創意草圖


          Image title


          運動鞋設計草圖


          Image title


          3D原型


          Image title


          2. QQ X PUPU


          本次設定,由兩只企鵝背靠背組成,20周歲的QQ與1周歲的PUPU,鵝廠擁有著各種企鵝IP形象,除了經典的企鵝QQ,還有各種其他特色企鵝,包括PUPU,BabyQ等等,同時PUPU來自外太空也是企鵝FM產品的主形象,經典企鵝QQ攜帶了新生代PUPU共同探索科技太空,寓意企鵝在不斷創新與擁抱新生代相互合力,為年輕用戶提供更具科技力與社交娛樂化的服務。


          Image title

          Image title


          04 最終設計?Final Design


          Image title

          Image title


          05 8米QQ模型制作?8m QQ Model 


          對于實際生產出這個巨型模型是個大挑戰,我們先利用電腦三維模型生產出8米高的泡沫模型,反復檢查生產的泡沫模型是否和設計模型一致,不斷的打磨調整,待到確定泡沫模后開始翻模工作。


          Image title


          先給泡沫模噴上泥巴水,便于脫模,之后噴上石膏水,并加入麻絲增加石膏的牢固性,待石膏模晾干,把石膏里的泡沫模掏出后開始往里面涂一層泥巴水(便于后面玻璃鋼脫模),然后涂上樹脂和纖維布/氈,干了之后砸爛石膏模,里面的玻璃鋼模型就出來了。


          Image title


          玻璃鋼定型之后給內部焊接鋼鐵骨架,作為加固作用。剛脫模的玻璃鋼是非常粗糙的,于是對玻璃鋼的外觀進行打磨,使得表面光滑和調整細節,打磨完成后開始批灰和上底色,前后三次,為的是填補空隙瑕疵使模型更逼真完整。接著我們便調模型身上的顏色,在不斷嘗試中調出最接近效果圖的顏色,開始逐步上色。


          Image title


          上色完成后再噴保護漆防止褪色,待模型的漆干后清洗整個模型,為貼上專屬貼紙做準備,接著確定貼紙位置并逐一貼上。最后開始搭建安裝,因為在搭建過程中模型會有磨損,搭建完后再做最后的修補工作,最后巨型QQ模型完美地呈現出來。


          Image title


          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          06 貼紙設計?Sticker Design


          配合QQ20周年慶,我們要給8m的巨型QQ模型搭配上了貼紙設計,以slogan “QQ更好玩” 為設計的出發點,希望把有趣好玩的態度注入各個品牌中,為品牌logo嚴肅的視覺帶來玩味感和潮流感。同時配合巨型QQ宇航員的造型,我們在設計貼紙時參考了航天飛機,科幻機器等機械圖案元素,每個品牌的設計方案除了有趣值得玩味外,同時需要貼合宇宙科技探險的風格。


          Image title


          我們針對這個大方向再進行了幾輪細化,選出能代表各個品牌的最終的設計方案,并把貼紙模擬在太空QQ模型上反復測試貼紙最適合的位置,讓貼紙和模型的整體風格可以完美契合。通過各個品牌的logo再設計貼紙和太空QQ的碰撞,把品牌推廣做到最大化。


          Image title

          Image title

          07 搪膠玩具設計?Figure Design


          作為QQ20周年慶的驚喜,我們制作了與巨型太空QQ同款的迷你搪膠玩具,在這次玩具設計上我們加入了小機關,在玩具內部放置了小磁鐵,使得QQ和PUPU可以方便拆卸組合。


          Image title

          Image title


          同時為其設計了專屬包裝盒,包裝設計從“太空宇宙”的角度出發,以黑色為主基調,圖案印花設計選用了太空QQ來進行設計,把太空QQ模型線體化,配合QQ20周年logo進行設計,利用燙金工藝與醒目的圖形搭配,更有效的展現了QQ年輕化的品牌特點。同時為了減少后期生產制作之間的溝通誤會,我們同期將幾個較重要的角度的包裝3D效果圖快速渲染出來,有著非常直觀的參考對照作用。


          Image title

          Image title


          08 品牌物料設計?Product Design


          1. 海報設計


          設計QQ20周年展的宣傳物料,我們采用了最能代表這次展覽的太空QQIP為主體,作為本次展覽的專屬元素,太空QQ貼近科技,同時又具有趣味性和潮流感。我們結合了太空探索的特性,提煉出宇宙元素作為宣傳的內容,讓海報設計具有更多內容可看性和觀賞性。


          Image title

          Image title


          2. T恤設計


          配合QQ20周年展,結合宇宙太空元素,并從QQ20周年logo圖形中延展設計出各類代表圖形,正面簡潔直接地顯示出本次主題,把醒目的圖形放置于T恤背后,利用坐標軸和經緯度的信息圖案配合各個抽象化的宇宙元素,增加T恤設計的科技感,更明確地展現了科技向善的愿景。


          Image title

          Image title


          09 QQ20周年展覽?Exhibition Design


          QQ聯合深圳福田星河COCO Park 舉辦了“QQ20周年主題展覽”,展館外形模擬宇宙太空站,以太空白灰色為主調,搭配簡潔的立方體造型,白色燈條勾勒大門,并以QQ20周年專屬徽章做門面,科技未來感撲面而來,就如大型QQ太空站坐落于地球。


          Image title

          Image title


          展館大門旁的墻上安置了頗具科幻氣息的全息投影裝置,上面展示著QQ在不同時期的形象以及20年關鍵大事記。代表著不同時期的QQ形象用全息投影的方式展現出來,從最開始的胖QQ到現在的新版QQ,讓你一眼了解QQ演變史。中間放著QQ歷屆各個跨界Figure展示,總有一款捕獲你的心!


          Image title


          Image title


          同時本次展覽還和% Arabica咖啡跨界合作,% Arabica咖啡展臺設計簡潔透氣與QQ20周年展覽風格完美融合。一邊喝美味咖啡,一邊暢游展館,兩全其美。


          Image title

          Image title


          藍色發光的隧道科幻神秘,一進去馬上感受到了超強的氛圍感,仿佛時光碎片擦肩而過。用QQ掃描墻上的二維碼,立刻生成你的專屬時光隧道“QQ個人軌跡”,各種瞬間涌上心頭。


          Image title

          Image title


          聯合天天P圖,用13個LED屏組成了“復古頭像畫廊”。走進互動裝置小屋里,往鏡頭前一站,稍作等待后,以你的形象即時合成的13個復古頭像就會出現在面前的13塊屏幕上,體驗即時“變臉”效果。讓自己的頭像和曾經用過的QQ經典頭像合二為一,形成專屬的復刻版頭像海報。


          結語


          QQ20周年展不僅包含了展館設計,還包含了市場營銷,運營活動,周邊商品等多個設計環節,環環相扣,缺一不可,一起構建了整個QQ20周年展的設計體系;展覽設計了太空企鵝攜帶著新生代PUPU共同探索科技,寓意鵝廠不斷創新探索與科技向善的愿景,為年輕用戶提供更具科技力與社交娛樂化的服務,在打造“QQ更好玩”的路上奮力前行。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計  包裝設計 、 圖標定制  用戶體驗 、交互設計、 網站建設 、平面設計服務。


          設計師都應該了解的Loading動畫知識

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          Loading動畫,在現在的設計中已經是一個必須要設計的系統元素,它能減緩用戶等待焦慮的心態,也能用來作為品牌透傳,增加曝光。


          那關于loading動畫相關知識,我覺得對于設計師來說是有必要去了解的,所以我找到了這篇優秀文章,讓大家能夠深入了解loading動畫,透過現象看本質,學以致用。


          Image title

          圖片來源:Domaso



          沒有人喜歡等待

          在用戶心目中,優秀的應用、工具、網站都應該是制作精良且能快速響應他們需求的產品。


          舉一個真實的例子:最近我們新發布了一個用戶評價的應用,第一個版本并不完美,loading延遲在2-3秒。


          你猜怎么著?


          很多人認為這3秒是一個故障。在實際開發中,你可能要面對龜速的網絡,沒有優化的代碼,操作時間長或數據處理太多等問題。因此,App的運行速度可能沒有用戶預期中的那么快。雖然早期用戶可能會給你的產品第二次機會,但絕大多數人會立即退出它。


          除非你的產品界面對用戶的行為提供了明確的即時反饋。剛才發生了什么?是操作錯誤還是在等待服務器的請求?用戶需要等待多長時間才能正常使用這個工具或網站?用戶為什么要等待呢?


          讓我們一起深入了解Loading動畫:

          1、loading動畫的歷史由來

          2、優秀loading動畫所具備的特征

          3、細節可以做出精彩

          4、簡單處理還是精心制作



          loading動畫的歷史由來

          對于這種類型的反饋,設計師會使用進度條、loading示意圖、預loading、或旋轉器。它們向用戶解釋什么時間發生了什么或正在loading的過程,以減少用戶的心理焦慮。


          你覺得設計師是從什么時候開始考慮加上這種反饋的?


          我很驚訝的看到關于Nielsen Norman的一篇文章,提到響應時間和loading動畫是在1993年(參考1985年的資料):


          如果計算機無法提供快速響應,則應該以百分比的形式向用戶提供持續反饋?!綧yers 1985 論文,“計算機-人機界面百分比進度指標的重要性”】


          顯示進度的三個主要優點:向用戶保證系統沒有崩潰且正在處理他們的問題;告訴用戶還需要等待多久時間,讓用戶能騰出時間來做其他的事而不只是干等;甚至可以向用戶提供一些可以閱讀和查看的內容,減少等待的焦慮?!?Jakob Nielsen, on January 1, 1993


          自從Web 1.0以來,幾乎每個網站都有loading狀態,用戶可以注意到當頁面內容正在loading時,這些Loading動畫活躍的身影。


          在2007年的時候,網站的Loading形式大概是下面這張圖上的樣子:

          Image title

          2007年時的Loading


          在那個年代,你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator (2009)這樣的工具來做這些 loading動畫。


          到了2010年,隨著CSS3的迅猛發展,出現了很多教程教大家如何做CSS3動畫,也能找到大量的loading 動畫預設包。設計師也可以在Ps cs5中做這種loading動畫,這個在10年前是非常流行的。


          在那時,Loading動畫更像是web的專屬問題,因為頁面loading確實是一個問題。在2010年的時候,很多Flash網頁都做了一些很有創意的loading動畫:


          Image title

          30個創意Flash loading案例(https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/)


          漸漸地,設計師們開始不滿足于簡單的進度條和旋轉Loading,到2014年-2016年的時候,變得更加關注這塊的設計。所以,你能發現更多關于loading教程,免費的Loading設計資源,插件和開源項目。


          Image title

          2016年出現的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)


          設計趨勢和方法已經發生了變化,但向用戶提供有效反饋的原則依然需要遵循。



          優秀loading動畫所具備的特征

          在一個完美的世界里,loading動畫應該:


          盡可能少的顯示給用戶

          如果你的工具或網站工作的足夠快,那就是非常完美的?;蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A期,顯示好看的loading動畫只是一個緩兵之計,等待太久了一樣會惹惱用戶。所以,首先應該是解決內容的loading問題。


          給出具體時間

          它可以是一條簡單的文本信息,告知大致的等待時間,也可以是可視化的圖形來表示??偣采蟼髁硕嗌傥募??更新需要多少分鐘?已經進行到了什么階段?這些體驗上的設計細節都可以給用戶預期并減少焦慮。


          Image title

          宇航員數據loadingby Cream M.



          告訴用戶為什么需要等待

          一些應用的loading過程,通常讓用戶不大容易理解。一個好的Loading動畫,應該要告知用戶等待的原因以及等待的背后軟件正在做什么:


          Image title

          文件獲取動畫 by Vinoth


          讓我們說回我的案例,那個反饋工具軟件。當我們的等待時間超過1秒時,我們決定給這段等待時間增加一段解釋。動畫說明應用目前正在處理截圖資源,這清晰的表明,我們的工具沒有崩潰,它只是正在處理請求:


          Image title

          好的loading動畫



          讓等待的過程不那么讓人無聊

          可以放一個有趣的動畫來吸引人,讓用戶的眼睛始終保持忙碌。


          Image title

          動畫來源:Alex Kunchevsky



          減少用戶等待時間的心理感知

          這與上面提到的一點非常相關,如果你在等待的過程中發現了一些能夠吸引用戶注意力的東西,那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配,有趣的想法,或者是一個什么特別的東西。


          Image title

          蛋糕loading by Pierre Kleinhouse



          透傳公司品牌形象

          如果用戶在用你的應用或者網站時會有一段等待時間,為什么不機智的利用好這段時間呢?我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中,讓它成為一個非常重要的設計細節:


          Image title

          BCG的車票應用動畫 by Antonin



          細節可以做出精彩

          雖然有些人可能會認為Loading只是一個很小的UI細節,但它其實也有許多類型和變化。一般來說,我把loading動畫分為幾類,進度條,無限循環的loading圖和骨架圖。


          進度條

          當可以明確loading時間時使用,進度條可以通過數字或視覺化的形式來表現。


          有數字進度的,有時也稱為百分比指示符。他們可以簡單直接,也可以很有創意,需要對你的用戶業務表達更有效:


          Image title

          一個app loading頁 by Nguyen Tran



          你也可以找到有趣的進度條和循環動畫結合的loading圖。


          Image title

          Loading動畫by Dragonlady



          進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態。根據UI需求的不同,進度條也可以是線性的,沒有百分比的形式。


          想想Gmail,它沒有顯示進度百分比,但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創意的例子:


          Image title

          Image title

          Gamil loading和一個創意loading動畫 by  Allen Zhang



          無限loading動畫

          當loading的時間是未知的時候來使用,它可以是默認的旋轉圖,也可以是一些創意動畫,顯示應用正在做一些事情。


          Image title

          計算loading圖標 by Hoang Nguyen



          創意性loading動畫一樣可以與業務緊密相關,并幫助支持品牌發聲。請思考下那些應用會使用這種loading動畫?


          Image title

          LittlePin Spinner by Daniel Sofinet



          無限循環動畫要求用戶在上傳或執行某些操作時等待,但不要求具體需要多久時間,它們可能會非常簡單或非常有創意。


          Image title

          Loading cat by domaso. So cute!


          Image title

          Infinity by Eszter Balogh. 看起來非常有趣,但是你并不想他們永遠不停下來。


          如你所見,如今的loading動畫不僅僅只是一個系統狀態的UI元素。



          骨架動畫

          骨架動畫展示了loading頁面的變化過程,你可以把它理解為開始是一些頁面占位圖,逐步加載上一些可見的圖片,文本和其他內容。


          這個詞最早出現在Luke Wroblewski 的文章中,Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持,并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應用。


          舉個栗子,如果你使用的是網頁設計工具Figma,你會在頁面頂部看到一個進度條,同時還在逐步loadingUI:首先你會看到占位符,然后才是可用數據:


          Image title

          Figma UI



          簡單處理還是精心制作

          除了這篇文章中所展示的一些優秀案例和Dribbble上的設計概念,在目前大多數應用中,你可能能看到還是一個默認的Loading。


          有一段時間,簡單的Loading被大眾所推崇,因為他們對于性能的影響最小(尤其是對于web)。使用默認的或開源的loading要容易的多,不需要設計師和開發花心思來設計和實現它。


          如果你正在開發MVP或者項目的第一個版本,那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段,即使把loading動畫做的再怎么有創意,也并不會對你的產品有多么大的幫助,如果它不能解決真正的需求。


          Image title

          一些簡單的loading動畫案例



          有趣的是,在2016-2019年,我們可以看到非常多精心的loading動畫。注重細節,日益成熟的設計公司,更好的科技環境,更方便的設計工具,這些都使得loading動畫變得更加富有創造性。如果你瀏覽Dribbble,能找到非常多超贊的Loading動畫,所以這也成了展現自己設計能力的一種方式。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計  包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

          日歷

          鏈接

          個人資料

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

          存檔

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