<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>

          首頁

          動效不知如何落地?

          濤濤

          一直有很多朋友會問一些關于移動端實現動效的方法,平時也會給大家做一些解答,但是可能沒有那么系統性,這次抽點時間總結歸納下這方面的內容,跟大家分享下我日常設計中是如何完成動畫實現的。

          實現動畫的方式

          設計輸出的方式大概可以分為位圖和矢量兩種,與常規的圖片輸出并無太大的差異。位圖方式:PNG序列幀、APNG、GIF;矢量方式:Lottie、SVG動畫。

          動效不知如何落地?看完騰訊高手的經驗就明白了

          當然除了以設計提供的方式之外,還可以設計完成好demo,開發通過代碼進行實現例如:javascript直接實現、SVG(可伸縮矢量圖形)、CSS3 transition、CSS3 animation、Canvas動畫、requestAnimationFrame由于超出個人能力范疇就不展開講了。

          實現動畫常用的工具

          實現動畫,首先還是得了解有哪些工具可以制作及合成相關的動效,我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等軟件。另外最近準備學習一個新的專門制作svg動畫的軟件-KeyShape。

          • Principle:可以輸出GIF、視頻等格式;
          • AE:可以輸出PNG序列,結合插件可以輸出GIF等等;
          • bodymovin:輸出json文件(也就是所謂的Lottie動畫);
          • iSparta:使用PNG序列合成APNG、GIF圖片格式除此之外;
          • Keyshape:主要是可以制作比較強大的路徑變換動畫,然后輸出svg動畫格式。

          動效不知如何落地?看完騰訊高手的經驗就明白了

          格式說明

          • PNG序列:以單幀圖像呈現,輸出后會生成一個序列組的文件夾;
          • APNG:實際上是把PNG序列合成一張可動畫化的PNG,類似GIF,但相比GIF質量要高,圖片后綴依舊是「.png」。
          • GIF:可動的位圖,但質量較差,壓縮到臨界值時會出現鋸齒邊和白邊,個人比較不喜歡用。
          • Json(Lottie動畫):實際上是一個用代碼描述的文檔,通過代碼描述路徑、節點的方式來完成動畫效果,與開發實際通過代碼實現動畫類似,通過bodymovin輸出后減少開發實現的時間,提高了開發實現的效率。
          • SVG動畫:與Lottie的方式比較類似,可以減少開發的動畫工作量,可以通過keyshape設計并導出,后綴為「.SVG」。

          如何輸出文件?

          接下來講解下各個軟件輸出對應格式的方法,實際上操作并不會太難,動效本身更重要的還是在于創意本身,因此當你把握了這些方式之后可以考慮進行創意設計。

          由于GIF文件多種工具都可以輸出,這里就不再作詳細說明

          1. PNG序列

          • 在AE中制作好動畫
          • 通過AE預渲染,然后選擇PNG序列,直接渲染出序列幀到本地文件夾
          • 導出序列幀后需要進行壓縮,常用的是tinypng,壓縮后較小的文件再進行交付

          具體如下視頻

          2. APNG

          如上導出到PNG序列幀,拖拽到iSparta軟件中,合成即可。合成時可以選擇幀率、循環次數(0為無限循環)、導出質量等。如下視頻

          3. Lottie

          • AE中需要安裝bodymovin的插件
          • 制作好動畫后,在窗口打開插件-bodymovin、
          • 選擇導出的位置,直接渲染一下,即可在本地生成json文件
          • 插件帶有預覽能力,但較差??梢栽?a target="_blank" style="color:#262626;text-decoration-line:none;transition:all 0.2s ease 0s;border-bottom:1px solid #525252;word-break:break-all;">https://lottiefiles.com/preview中進行預覽查看

          更多Lottie相關可以前往https://lottiefiles.com/學習,里面有豐富等Lottie動畫效果和一些插件下載,去研究下吧

          4. SVG動畫

          • 下載keyshape軟件,屬于付費軟件,可以下載14天試用版
          • 可以通過圖形制作動效,可以設置自動補間
          • 導出svg文件,導出時可以設置運動是循環或是一次

          建議大家自己下載軟件后嘗試

          5. 格式大小比

          通過試驗幾種格式的大小大概是排序依次為:PNG序列>APNG>GIF(質量較差)>Lottie / SVG,json文件和SVG動畫文件比較接近,因此可以根據實際考慮決定即可,GIF雖然可以壓縮到比較小,但是本身圖片質量也較差,因此建議慎重考慮。

          動效不知如何落地?看完騰訊高手的經驗就明白了

          應用案例

          動效在UI設計中的應用場景很多,這里梳理了一下,之前我在項目中嘗試過的動效,給大家分享下一些案例,希望可以對大家有所啟發。

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          動效不知如何落地?看完騰訊高手的經驗就明白了

          最后總結

          學習用什么工具導出什么格式的文件只是第一步,更重要的還是如何制造出一個有創意的動效,因此不要過于強調工具,更多應該培養自己思考設計的習慣。

          文章來源:優設    作者:ID設計站

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


          如何讓你的「按鈕設計」上檔次?

          濤濤

          按鈕在界面設計中,屬于最基礎的元素部分組成,按鈕設計的精致,整個頁面的品質也會上升不少的檔次。今天給大家分享這篇文章,主要講解在設計按鈕時我們應該考慮哪些因素,包括視覺上,有哪些萬能的方法及公式,能夠正確的制定按鈕的設計標準,來提升整個設計的系統性。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          按鈕有哪些作用?

          在設計按鈕之前,需要先理解按鈕起到的代表含義。什么地方該加按鈕,什么地方不加按鈕,在系統化設計思路中需要非常有講究。通常按鈕在頁面,主要起到以下三點作用:

          1. 某一類型的功能操作

          這種比較常見,如一些控件形態的按鈕,比如加減、折疊、展開,下拉等。這類按鈕會起到一些功能形態的作用,常用于交互場景。所以在這類按鈕設計中,應當弱化按鈕形式,重點強調功能,突出主體信息。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          2. 下一步的明確指引

          當頁面內容信息過多后,用戶容易失去信息焦點,從而忘記下一步操作。信息種類越多,用戶權衡的時間就會越久,用戶選擇罷手及跳出的幾率也會越大。所以這個時候,在合適的地方增添按鈕,能夠很好的引導用戶進行下一步操作,提升整體操作的成功率。其次從體驗層面,也一定程度能起到頁面動線的引導作用,比如下方的一組卡片,在增添了按鈕后行動點很明確,非常有點擊欲望~

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          3. 固定習慣,明確心理預期

          當用戶知悉某個按鈕能指向某個操作,或者獲取某類信息后,長期以往用戶就會形成使用這個按鈕的習慣,這樣對提升復訪及固定心智是非常有效果。

          所以如果你認為你負責的產品或者是內容,能持續為用戶帶來價值,那么在頁面的關鍵節點,不如將按鈕設計的更醒目。這樣用戶下次再看到這個按鈕時,固定習慣會引導他持續的點擊。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          按鈕有哪些類型?

          這里我不以按鈕的長相來區分按鈕的類型,如漢堡按鈕或者別的什么的,意義不大。我主要還是想通過以按鈕的功能區分,來劃分類型,這樣大家理解起來更為清晰。

          1. 功能性質按鈕

          這類按鈕見到的最多,我們常用的APP里,大量都充斥了這類按鈕,這類按鈕會起到重點的功能交互,幫助用戶得到TA想要的信息。其次樣式上面,其實圓形的點擊欲,會更強一些,看起來也更利于點擊。而方型的按鈕,則顯得更為正式、嚴謹。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          公式:如果是圓形按鈕,圓角的半徑=高度的50%比較合適,而如果是方按鈕,邊角的小圓角半徑控制在15%以下比較合適,我個人喜好用10%。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          2. 聚焦大按鈕

          這類按鈕通常見于一些核心頁面的強指引,比如登錄、注冊、提交表單、或者是保存,等對頁面全局進行操作的一些按鈕。需要注意的是,這類按鈕只適合對頁面全局進行操作,而且頁面中大按鈕的數量不宜超過2個,信息盡量需要保持聚焦。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          公式:基于@2x,這類大按鈕的高度≥72px是比較合適的,通常的尺寸有 80px、88px、96px,大家可以根據產品面向的人群來定高度,如果頁面面向的人群較為廣泛,我建議采用 88px 或者是 96px 的這種大號版本,畢竟操作起來更為方便。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          3. 吸底按鈕

          這類按鈕的優先級,在整個頁面屬于最高,頁面的所有信息,都將聚焦在這個按鈕中。由于按鈕是吸底的,所以會一直浮在頁面上,不受頁面篇幅影響控制。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          需要注意的是,吸底按鈕一定是頁面最重要的功能,或者是整個頁面的下一步指引,比如淘寶的立即購買,或者是餓了么、美團的立即下單,又或者是常見的充值界面。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          公式:基于@2x,吸底的高度≥80px是比較合適,常見的尺寸有88px、100px、112px ,按鈕的大小可以根據內容來定,建議高度保持在72px以上比較合適。這里需要注意的是,吸底的按鈕,需要產出兩套設計稿,一套為常規稿,一套為iPhoneX的適配稿。iPhoneX底部控件的區域高度為68px,所以iPhoneX設計稿的吸底高度=常規設計稿吸底高度+68px

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          按鈕有哪些狀態?

          另外在設計按鈕的時候,也別忘了補充按鈕的多個狀態的設計稿。常見的狀態,有以下四種:

          1. Normal-正常態

          這個為按鈕的正常顯示態,就是正常頁面中的顯示效果。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          2. Hover-懸浮態

          這個為按鈕的懸浮態,一般只會出現在使用鼠標的時候。當鼠標指針停留在按鈕時,按鈕發出的特殊反饋,則為懸浮態。這類形式在移動端交互中無作用,所以移動界面設計中不需要考慮這個狀態。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          公式:正常情況 Hover 態增加 10% 黑色就可以,原理如下

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          3. Pressed-點擊態

          這個為按鈕的按壓態,就是按鈕在被點擊或者是按壓后的效果。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          公式:在APP設計中,點擊后的效果我們設一個標準值讓開發實現就好了。常用的值有按鈕減少20%的透明度,或者增添20%的暗度,這兩個都可以。通常我建議在亮色上的按鈕,使用暗度疊加(增添20%的黑色),在暗色上的按鈕,則使用透明度減少(透明度改為80%),實現效果原理參考 Hover 態那張配圖

          4. Disable-禁用態

          當信息未填充完整,或者是某類條件未到,按鈕會出現不可點擊的狀態,處于禁用形式,這個時候,按鈕就會呈現禁用態。這個禁用態無論是web還是app,很多場景都會用到,所以建議設定一套標準的設計規范,避免重復定義這個效果。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          公式:禁用態尺寸及大小不變,僅使用色值做區分。建議使用灰色或者是不透明色,常用的禁用色有#CCC或者#999,需要盡可能把樣式做弱,避免用戶做無效的點擊。

          按鈕的風格及尺寸

          在目前移動互聯網設計中,雖然按鈕的種類很多,但風格變的逐漸統一,更多都是色值及細節上的差異。從大的風格來看,按鈕還是分為這這幾種類型:扁平化、輕擬物、重擬物及游戲按鈕。

          1. 扁平化按鈕

          這類按鈕我們設計用的最多,信息簡潔,操作方便,形式追隨功能。這里也給大家分享一下我在設計扁平化按鈕的一些經驗,比如高度寬度,以及陰影的色值。

          公式:按鈕高度,這個通常是文字字號的2.4倍然后取4的倍數整數,比如字號是24,那么按鈕的高度=57.6,離4倍數最近的是56,所以高度=56,圓角=10%的高度,取整后是6px。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          另外如果覺得不合適,也可以單位往8遞增或者是遞減即可,例如 56、64、72、80、88 px

          按鈕寬度:如果不是那種全局按鈕,通常按鈕的寬度=最多容納字數的寬度+按鈕高度,就好啦。還是以上面那個例子為例,按鈕高度=56,文字寬度=96,那么按鈕的寬度=56+96=152

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          2. 輕擬物按鈕

          這類按鈕近幾年變的非常流行,甚至QQ、淘寶,都開始大面積使用,因為這類按鈕在保持信息簡潔的同時,仍然有較強的點擊欲,視覺上面也能夠增添頁面的品質感。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          公式:漸變方向,建議采用水平漸變,重色在右側,輕色在左側更為合適。陰影色值我之前就寫過,不知道大家還記得么,陰影顏色=按鈕顏色的 Alpha50%,x=0,y=按鈕高度的20%,模糊值=按鈕高度的50%,擴展=按鈕高度的 -15%,高級又簡單,完美!

          如果覺得這個彌散陰影太大的同學,也可以自己手動簡單調整下,不礙事。(這個公式僅適用于Sketch,用PS的同學,也可以按照這個邏輯自行研究一下)

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          另外說一句,實際上這個陰影公式并沒有什么很多的依據,大多數都是我個人原創總結出來的,簡單好用。比如下面的這些按鈕的樣式,用了公式后的效果大家可以自行感受~

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

           

          3. 重擬物及游戲按鈕

          在一些營銷頁面中,按鈕的樣式通常需要做的比較游戲化。游戲化的按鈕,大部分會采取游戲場景中的元素,再采用擬物的手法,來進行打造。

          通常游戲化的按鈕,需要重點幾個部分組成,學過素描的同學應該會知道,立體的物體,通常會有幾大特征,分別為高光,亮部,暗部,投影及反光。那么如果我們需要繪制一個在營銷或者游戲場景中使用的按鈕,只需要保證這個按鈕有高光,亮部,暗部,投影及反光的這些特征,然后飽滿一點就,立馬就可以出效果啦。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          當然,我舉的這幾個例子都是最基礎版本,如果你想做的更豐富一些,那也是沒問題的,這個可以case by case 來定。

          這個沒有太多的公式可以總結,更多的是看設計師的基礎美術水平啦~~

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          新擬態按鈕

          在寫這篇文章的時候,突然刷到了一套新擬態的控件設計風格,有種眼前一亮的感覺。雖然這套設計視覺上很有層次很好看,不過感覺短時間之內,比較難大面積推廣,因為開發實現起來還是會比較耗費成本。

          如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

          我把源文件保存下來了,對這個感興趣或者好奇這種效果如何實現的同學,可以下載源文件研究~~ sketch、psd、Figma 格式都有。

          文章來源:優設    作者:UX小學

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

          這樣設計光影輕擬物,想不脫穎而出都難!

          濤濤

          還記得2019年4月上映的復仇者聯盟4么,漫威電影宇宙的第三階段結束了,電影很精彩,但最令人震撼的是先導版的電影海報!就是那個「五彩斑斕」的黑~

          這樣設計光影輕擬物,想不脫穎而出都難!

          從設計上看,海報的設計師是把光運用到極限了,通過逆光和環境塑造出了酷+神秘的視覺感受。光是一切視覺表現的基礎,是構圖和傳遞調性的關鍵,也是視覺表現重要的組成部分。所以今天就和大家聊聊啥樣的光是一個牛X的光以及如何塑造一個合格的光影?

          光影的基本原理

          常見形式1-聚光

          這樣設計光影輕擬物,想不脫穎而出都難!

          這樣設計光影輕擬物,想不脫穎而出都難!

          △ 圖片來源:小米米家臺燈1S

          聚光是最常見光,也是在設計中用到最多的光,通常在塑造一個物體的時候就會用的到。

          這樣設計光影輕擬物,想不脫穎而出都難!

          因為聚光的原因,場景更像個舞臺,凸顯「主角」的存在。具體的原理可以根據下圖去理解。

          這樣設計光影輕擬物,想不脫穎而出都難!

          常見形式2-自然光

          這樣設計光影輕擬物,想不脫穎而出都難!

          自然光其實就是陽光,理論上講其實光源是太陽也是聚光,但由于光源太過于龐大,無法真正的聚焦,所以就把這種光當成一種泛光源就好。在產品設計中也會經??吹筋愃频墓庠闯霈F,比如行為召喚按鈕:

          這樣設計光影輕擬物,想不脫穎而出都難!

          因為不需要強有力的表現和氛圍的營造,所以通常產品設計中更需要自然光來作為核心光源,通過泛光源去統一控制產品的光影體系就好(發布的 Mac OS – big Sur 的整體光源同樣是自然光,下文會講到)。

          常見形式3-逆光

          這樣設計光影輕擬物,想不脫穎而出都難!

          坦誠的講逆光也是聚光的一種,只不過由于角度特殊,呈現的視覺效果也非常不一樣,所以就單獨把逆光拿出來說一說。當畫面需要逆光來營造氛圍的時候,只需要在固有色上加上黑色蒙板和邊緣的高光就可以大概塑造出一個處于逆光的物體了。

          這樣設計光影輕擬物,想不脫穎而出都難!

          小米是典型的逆光氛圍營造高手,但萬變不離其宗,依舊可以從海報里看到相同的方法。

          這樣設計光影輕擬物,想不脫穎而出都難!

          △ 圖片來源:小米傳播物料

          光影的塑造(光影層級)

          通?,F實中的光源并非那么理想,光線的復雜超出肉眼所見。所以我們在繪制的過程需要注意到,可以適當的抽象。舉個例子,自然光是普照的,所以我們抽象為四個小光源平均分布,依次打到物體上:

          這樣設計光影輕擬物,想不脫穎而出都難!

          在他們疊加的部分可以清晰的看到,1是最重的,2其次,3再次。按照這個辦法就可以獲得光影的層級關系,在繪制輕擬態的圖標或者運營活動中更加細膩。

          這樣設計光影輕擬物,想不脫穎而出都難!

          體積塑造+色彩對光影的影響(反光/對比光)

          這樣設計光影輕擬物,想不脫穎而出都難!

          △ 圖片來源:09UI設計工作室-陌陌直播禮物設計

          所有的光影其實都是幫助主體塑造體積感,一個合格的立體圖形必須具備:高光/過度色/明暗交界線和反光這四個基本屬性。

          這樣設計光影輕擬物,想不脫穎而出都難!

          然后需要一點超現實主義的手法,把太陽光過濾下,從「赤橙黃綠青藍紫」的色調里提取跟主體和諧的顏色(通常是補色),營造出介于真實與玄幻之間的美妙效果hiahia~

          這樣設計光影輕擬物,想不脫穎而出都難!

          然后再在投影上加一點點色彩傾向,一個完美的黑八就出現啦~按照這種方法,你可以試著去嘗試更多的物體/場景。(下圖是筆者作品「插著紅旗的地球」hiahia)

          這樣設計光影輕擬物,想不脫穎而出都難!

          光影/材質與產品設計中的層級關系

          這樣設計光影輕擬物,想不脫穎而出都難!

          影響主體的除了光影之外就是材質了,近年來的三大巨頭apple/Microsoft/Google的設計都在材質上下足了功夫,蘋果的毛玻璃,微軟的亞克力和谷歌的「紙」。

          從趨勢上看,材質的引入對產品中拉開層級關系上有巨大意義,以往的設計僅僅是通過光影和焦距來拉開關系,這兩個維度在少量的疊加界面中還能有效果,但到了復雜的多窗口互壓互疊里就不是那么奏效了,所以鐵子們要善于運用材質區分產品顯示的優先級。

          這樣設計光影輕擬物,想不脫穎而出都難!

          圖標與插圖的光影使用技巧

          這樣設計光影輕擬物,想不脫穎而出都難!

          △ 圖片來源:Eric Hoffman – Big Sur Mac Icons

          這樣設計光影輕擬物,想不脫穎而出都難!

          △ 圖片來源:JIAJIE – WeSing Live gift

          圖標好壞除了造型之外最重要的就是質感了,通常圖標也就是4種形式(如下圖),類似蘋果的系統圖標和抖音直播間禮物的圖標都是最后一種形式。

          這樣設計光影輕擬物,想不脫穎而出都難!

          但如果僅僅是這樣就太水了,既然都說了是干貨預警,那就要拿出哥們看家的本領~此圖是大家關注公號后就會收到的推圖,主體就是一個POI的圖標加上微信的對話框和代表干貨的小星星營造出的氛圍。

          這樣設計光影輕擬物,想不脫穎而出都難!

          刨析下這個圖,三個發光體和底下的投影,通過上文的講解依次繪制完成~

          這樣設計光影輕擬物,想不脫穎而出都難!

          之后就到了amazing的時刻了,打開photoshop找到「濾鏡-模糊畫廊-場景模糊」設置幾個key-point,調試模糊值和透明度/亮度,最終完成對光影的塑造。

          這樣設計光影輕擬物,想不脫穎而出都難!

          借助環境塑造光影

          空氣中的灰塵相信大家都不陌生,這種情況多數是一束光影從窗戶里射入后,在光的折射下把平時看不到的灰塵統統照了個遍。

          這樣設計光影輕擬物,想不脫穎而出都難!

          如果你是mac用戶一定熟知keynote里的動畫效果「轟然墜落」,這個效果是在模擬物體振動后彈開周圍灰塵,非常震撼。在PPT的設計中你也可以同樣借助光和霧來營造你想要的效果,下圖是我在做工作總結的時候為了凸顯Q4工作采用的辦法。

          這樣設計光影輕擬物,想不脫穎而出都難!

          小結一下

          光影輕擬物在產品設計中的應用面還是很廣的,比如:圖標、數據可視化、插圖等等。而在大量扁平設計時代適量使用會顯得很出彩,當然再好的教程也比不上大家多動手試試練練,所以鐵汁們行動起來咯~

          文章來源:優設    作者:Nana的設計錦囊

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

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          濤濤

          一套 UI 界面當中,核心的 APP 圖標是用戶每天都要接觸、經常使用的視覺組件和交互對象。設計圖標的時候,要用到大家最熟悉的元素才能貼合用戶認知,要醒目、統一,也要足夠「隱形」,避免喧賓奪主。今天這篇文章,來自著名的 Tubik Studio 團隊,他們為華為旗下的 EMUI 10 系統設計了核心的圖標系統,來看看他們的設計過程吧。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          我們總不會低估一個操作系統基礎圖標,對于產品的可用性和合意性的影響?;A圖標雖然小巧,但是對于整個操作系統而言,總是極具影響力的,因為他們是用戶界面的核心元素,幫助用戶快速直觀地在系統中定位、瀏覽、導航。但是,對于設計師而言,圖標的設計始終是挑戰,它看起來最為簡單,但實則為最為艱難的工作。

          圖標需要,讓人一目了然,但是也要具備良好的可識別性,在傳統和創新之間達到平衡。這一次,Tubik Studio 設計團隊將要給華為的 EMUI 10 來設計圖標,而這篇文章將會為你揭示背后的設計過程。

          這次的項目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 來負責。這次的設計項目從最初的探索構思入手,逐漸開始繪制草圖,探索樣式,一直到最后打磨,完成設計。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          項目內容

          為華為 EMUI 10 系統的用戶界面設計基礎的圖標

          客戶介紹

          我們在 2019 年夏季,收到了來自華為的邀約,這次的項目要重新設計 EMUI 這套基于 Android 系統的用戶界面基礎圖標,這套圖標會用來適配華為旗下的旗艦手機,這些圖標將會隨著新版的系統部署到這些手機產品當中。我們的任務,是創建總計 54 款符合當下潮流趨勢的圖標,這些圖標要能夠貼合品牌和已有用戶的偏好,并且能夠吸引新的用戶。

          這個圖標設計項目如今已經在當下的華為旗下手機產品中應用且部署好了,最早使用這套圖標的智能手機型號為 Mate 30 ,緊接其后的是 P40。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          設計過程

          在整個操作系統中,這些圖標是始終位于用戶視野以內、最基礎的最核心的交互元素,通常用戶每天都會同這些核心的基礎 APP 進行交互,有時候一天多達幾十次,因此它們應當具備良好的功能性,還應該足夠美觀,給用戶帶來滿足感。同時,這套圖標的設計,也應當足夠統一,以協調的體驗切入到整個 EMUI 的設計系統當中,貼合整體的樣式特征。

          所以,我們使用了一整套圖標網格系統,應對不同需求,在設計的過程中,這套網格有助于確保所有圖標外部尺寸的一致性,也保證了內部元素的統一性。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          為了發掘全新的視角,我們決定從傳統的手繪圖標開始,尋找重新塑造圖標設計的方法。這些圖標所涉及到的元素,早已為全球數百萬用戶所熟知,要重新設計圖標外觀,并且還要成套且統一,這本身就是一個巨大的挑戰。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          比如「電話」圖標所對應的聽筒元素、「信息」圖標所對應的氣泡對話框這樣的元素,是不可能完全拋棄重新創造的,所以我們的真正的切入點是在形態和色彩上尋求解決方案。

          越是簡單的東西,重塑起來就越難。

          在實際的設計過程中,我們嘗試了數以百計的造型變體,從完全放飛、非常規的的外部造型,到極其常規,大家熟知的造型解決方案,我們都逐一試過。而在色彩上的嘗試相對會顯得更加具有實驗性:我們嘗試使用明亮的紫羅蘭色、栗色和淺綠色來進行混搭。

          當然,我們很清楚,這樣的實驗性的工作是探索過程中的一小步,但是它是必須的,是創造新設計的種子,是尋求正確答案的必經之路。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          在設計過程在,有一件有趣的事情發生在設計「相機」圖標的過程中。我們嘗試過很多不同的圖標造型,不同的元素,不同的樣式,但是其中始終有一個細節是不變的,那就是右上角的小紅點。這是為了暗示用戶,華為的攝像頭模組來自徠卡,這個紅色的小點就是向其致敬的標識。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          而下面的概念設計,則是強化了圖標之間的幾何輪廓的差異,從而提升圖標在智能手機屏幕上的對比度和識別度。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          下一步,我們基于幾何圖形外觀差異性,設計了多種造型不同但同樣優雅的圖標。在基于這種風格概念進行延伸的過程中,我們會優先考慮圓形的元素。而「天氣」圖標明顯既不適合圓形也不適合方形來呈現,所以我們使用的是云和太陽兩種元素的組合。「錢包」圖標使用的是矩形,然后搭配卡片的組合。盡管造型整體上是相對自由的,但是所有的圖標都是遵循圖標網格,并且在視覺權重上盡可能統一。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          在色彩和樣式上,我們則更加傾向于漸變。沒有色彩漸變,純扁平的圖標顯得過于幼稚和「古早」,沒有足夠的品質感,所以,我們在新的圖標設計上,開始加入漸變色彩,提升質感。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          不過,在最終版本當中,我們還是保留了圖標外部的圓角矩形的外輪廓,然后將圖標元素的內徑進行了適當地縮減,漸變和核心的簡約幾何特征依然是整套設計的最高優先級。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          這套設計方案展現了在整套 UI 界面中,圖標這個小元素的設計上所需要投入的精力和潛在的難度。想要圖標足夠協調、美觀、易用還要貼合品牌特征、還要區別于以往,是一件相當不容易的事情。

          Tubik Studio 是怎么為華為定制整套 UI 圖標的?

          細節里藏著魔鬼,任何細小的元素、線條輪廓、色彩的變化都可能會在屏幕上放大、被感知到。

          文章來源:優設    作者:Tubik Studio

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

          又發現一個!攝影師出品的免費可商用圖庫!

          濤濤

          大家平常都習慣去哪些免費圖庫網站找圖呢?雖然有一些老牌、圖片數量充足的圖庫,像是 Unsplash、Pixabay、Pexels,但后來經過人工智能和大數據學習的搜尋工具更深得我心,也能通過算法將質量較低、不適合使用的圖庫圖片先排除掉,大幅節省搜尋時間。如果在尋找圖片素材時想盡量避免使用和其他人重復的內容,試試看由攝影師親自拍攝的小型圖庫或許是個不錯的方法。

          往期回顧:

          本文要介紹的「DesignersPics」是一個持續更新、每個月都會加入新相片的圖庫,由攝影師 Jeshu John 親自拍攝修圖,收錄各種類型的相片,包括建筑、商業活動、概念、美食和飲料、大自然、人物、科技等等,照片數量不多,但有一定的獨特性。

          DesignersPics 的相片都具有非常高的分辨率和畫質,可自由下載用于個人或商業用途,例如網站、投影片、包裝、標簽、HTML/PSD 模版、T-Shirts、廣告橫幅、商店或辦公室裝飾等等,無需標示出處來源。

          DesignersPics

          網站鏈接:http://www.designerspics.com/

          使用教學

          開啟 DesignersPics 從右上角的「Categories」選擇要瀏覽的相片分類,或是直接從首頁以日期方式瀏覽,網站亦提供搜尋功能,不過圖庫本身相片量不多,瀏覽上不會耗費太多時間。

          每張相片會有預覽圖、標題和免費下載的按鈕。

          進入圖片頁面,還能看到圖片尺寸、大小等等信息,點選「Download」就能下載取得 .jpg 格式的圖片文件。雖然 DesignersPics 沒有硬性規定必須標示作者來源,但如果你喜歡可以協助推廣。

          值得一試的三個理由:

          • 由 Jeshu John 親自拍攝,每個月都會更新加入新的相片素材
          • 相片都具有大尺寸及高畫質,免費下載取得 .Jpg 格式

          • 可自由使用于個人或是商業用途

          文章來源:優設    作者:Pseric

          2020潘通年度流行色經典藍出爐!附配色方案

          鶴鶴

          2020潘通流行色




          一覺醒來,2020 年潘通年度色就這么發布了。

          2020年年度潘通色:「經典藍」

          這款被命名為為「經典藍」(Classic Blue)的色彩沉穩耐看,雋永優雅,按照潘通官方的說法,「經典藍」仿佛暮色四合時的天空,寧神靜心,讓人駐足?!附浀渌{」是一種穩固可靠的色彩,給人確信感,撫慰著每一個期待穩定者的心靈。

          為什么會選擇這樣一種藍色,潘通色彩研究所的執行董事 Leatrice Eiseman 在潘通官網上,予以詳細的解釋。

          解讀「經典藍」

          「我們生活在一個亟需信念和信任的時代。潘通 19-4052 經典藍 ,這種色彩正是自信和恒久的外化體現,這種堅實可靠的藍色調,更能與人產生深層的共鳴,令人心安。一望無際的藍色能夠喚起人類對于廣袤無垠夜空的無限遐想,經典藍鼓勵著我們透過顯而易見的事實,拓展思維,放飛想象。

          經典藍敦促著我們更加深入地思考,開闊視野,進行更加深入的交流?!?

          ——Leatrice Eiseman 潘通色彩研究所執行董事

          從色彩心理學的角度上來看,藍色色相本身有著信任、信念的含義,也是的色相。在此之前,潘通曾經多次選擇藍色作為年度色, 2000 年的時候選擇天藍色(Cerulean),在 2005 年的時候則選擇了藍綠色(Blue Turquoise),2008 年的年度色叫鳶尾藍(Blue Iris),2016 年的年度色則是靜謐藍(Serenity)。

          相比于這4種藍色,「經典藍」更為沉靜穩重,沒有一點攻擊性,也不顯得沉重,輕松而易于互動。

          「經典藍」無疑是一個略顯保守,但是非常貼合當下語境的色彩。它充滿了確信感,讓人覺得安全,屏蔽了焦慮。同 2019 年充滿前進感的「活力珊瑚橙」相比,「經典藍」更加內斂和篤定,悄無聲息地增加每一個的信心。

          除了發布這一年度色彩之外,潘通色彩研究所還專門制定了5套配色方案,這些配色方案應該會在接下來的 2020 年,得到更加廣泛的應用。

          「經典藍」的5套官方配色方案

          沉思

          這是一套舒緩的配色方案,涼爽的藍色調和同樣柔和的暖色組合到一起,給人以沉靜的感覺。


          呼吸

          這套名為呼吸的配色方案當中,加入了更為經典的黑白色,選擇了對比更加強烈、更加富有活力的搭配方式。這樣的色彩搭配更容易喚起觀者的幸福感,讓你的設計更加具有田園牧歌的氣息。

          沙漠暮色

          「經典藍」的靈感來源之一就是夜幕降臨時的天空。而這套名為沙漠暮色的配色方案,就與此相關。充滿金屬質感的潘通色更能夠凸顯「沙漠」的閃亮質感,而恰為對比色的「經典藍」讓這套配色方案優雅無比。

          異域風情

          這套配色方案比起之前的配色更加豐富,更顯混搭,仿佛加入了天然的調味料。這種健康而自我的色彩搭配方式,讓人仿佛身在異域,不同于此地的文化,迥異與此時的感覺,獨特卻令人著迷。


          非傳統

          打破常規的桎梏,選擇異乎尋常的色彩搭配,而足夠傳統的「經典藍」恰恰構成了這種搭配方式當中,作為基礎的底色。這套配色方案指向時尚,突破規則,如同小品,有趣而俏皮。

          「經典藍」的9套精選配色方案

          為了更加方便線上的設計師來使用這些配色方案,優設的小編從官方提供的這些配色方案當中,精心挑選了 9 套適合進行數字設計的配色方案,并且標注上了相應的 HEX 值便于精準取色,請盡情取用:


          轉自:站酷——hicatherine86 




          Mapbox教你出圖:今天你的圖炫酷了嗎?

          前端達人


          Xiao素材 |MapBox應用

          本期精選 / MapBox應用教程,讓你的底圖超乎預料的炫酷

          點擊查看原圖

          e2dd47236b5d498897ffd34b915764f5.jpeg


          今天給大家帶來炫酷MapBox的具體應用

          相信大家在繪制平面類分析圖時

          都遇到過地圖獲取的問題

          在此之前

          我們也提供給了其他的類型的方式來繪制分析底圖

          1. 其他方式

          百度個性地圖

          通常地圖形式如下

          點擊查看原圖


          喜歡用這種類型地圖的小伙伴

          網址接好咯

          http://developer.baidu.com/map/custom/

          文末素材有百度個性地圖代碼

          谷歌個性地圖

          老規矩放一波樣式給大家看一看

          點擊查看原圖



          但是這些

          都不是我們今天能的重點

          2. MapBox效果

          因為真要說到可操控性可調整性

          非MapBox莫屬

          先來看看官方效果

          點擊查看原圖

          65aa1549b0b644d7aae99fee9d4889d7.jpeg

          981462bfba7f4130bf2b40e27a87cff6.jpeg

          點擊查看原圖f789b95081ed47f2bc018e26d85c3539.jpeg

          e6474a09d55d49e18573d6dce54627d5.jpeg9534841a9a2848baadeba880b5f0c490 (1).jpegc5a73c2cfbb74721853f54a33c2874c4 (1).jpeg677ba2b536b74c218b6eddf8fbc897aa.jpeg5c3e52bc67754db5ad4a889c6eb73411.jpeg97c752d4aded4ff8a2d8da6bb95275f1.jpeg




          是不是已經超級酷炫好看了

          那看到這里你就以為完了嗎

          NO NO NO NO NO

          再來看我們根據模板花幾分鐘改的底圖

          點擊查看原圖點擊查看原圖


          點擊查看原圖


          看到這的第一眼

          是不是覺得這才是

          自己想要的分析底圖

          誤區

          想想平常我們自己繪制的底圖一般像這樣

          純苦力類

          5cf701cc0dc24970b0c2a557ec14aa8e (1).jpeg0625c8b515d148d394940fd09acc4542 (1).jpeg


          96fe6d94ea294e0e8288008b86a06587 (1).jpeg


          怎么樣

          是不是想立即Get一波呢

          別急,來看視頻學習一下

          大致分為四個板塊

          3. 四大板塊

          第一個板塊

          基本步驟

          首頁—Get Started—選擇合適的風格

          (建議開啟網頁翻譯哦)

          點擊查看原圖點擊查看原圖


          點擊查看原圖


          第二個板塊

          怎樣來操作

          右鍵旋轉視圖

          中間縮放視圖

          左鍵平移視圖

          右側箭頭菜單—還原視圖—

          Reset Pith&重設正北方向 Reset North


          點擊查看原圖d979898158e84454ad11e19bdee498ba (1).jpeg



          第三個板塊

          這一個板塊相對復雜一些

          同學可以看著視頻配著幕布食用

          左側為參數調整欄

          直接點擊地圖元素的相應位置

          即可修改相應參數

          36372fb4c78b4efba0f245bf9ce906db.jpeg


          d454efb44d1b4bab9061463f1bd28bea.jpegded94da53b064c78a6f1c73890ead363.jpeg


          第四個板塊

          添加圖層和修改數據

          Add Layer/Select Data里面內容含

          數據資源—類型—綻放級別Zoom—過濾器

          具體怎么操作一定要看視頻哦

          aeead05900694ec4b66e47098b06ffd3.jpeg



          如果覺得觀看視頻還是不太清楚的小伙伴

          不要慌張

          作者還貼心的為大家準備了

          MapBox的知識結構圖


          點擊查看原圖


          今天就和大家分享到這里了

          轉載自:搜狐

          作者:

          大地視覺設計軟件



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




          酷炫的 FUI 圖形設計

          前端達人

          作者通過以進度條的設計深入淺出的講解關于FUI的設計思路。雖然FUI設計看起來很復雜,只要找準規律,從一些作品中總結分析細節,再運用到我們的設計中。想要了解的小伙伴可以嘗試一下。

          前言

          看到上期小伙伴想了解一下 FUI 的設計教程,所以這次再次和大家聊一下關于 FUI 的設計風格,我們以“進度條”的設計教程為例,深入淺出的聊一下關于 FUI 的設計思路,因為主要設計思路的延展,所以不會出現具體的數據參數,小伙伴們要諒解啊。

          目錄

          1.風格介紹

          2.設計思路

          3.總結

          1.風格介紹

          關于 FUI 的定義,閱讀過我上一篇文章的小伙伴可能對 FUI 的定義有了一個較為清晰的定義,即 FUI 是:虛構的、未來的、幻想的用戶界面。

          1.png



          我們仔細閱讀關鍵詞:“虛構的、未來的、幻想的?!睆膶?nbsp;FUI 關鍵詞上我們進行粗略的分析可以得出這么一條簡單的結論:FUI 的設計不依據現實為基礎的界面設計,為設計師留有巨大的想象空間。所以朋友們,請把腦洞開大一點吧,不受到當前的技術和硬件載體的制約,FUI 本身就是一種創新發明。

          2.png




          接下來我會向大家簡單介紹一下 FUI 主要的兩大設計風格:軍事風格和機甲風格(也可以叫做機械風格)。 


          1.軍事風格

          軍事風格的特點在于:“直接明了”。因為在殘酷的戰爭中時間就是生命,士兵必須保證“快速、準確、直接”才能保證戰斗的勝利,所以會盡量避免與操作業務無關的。你也可以理解為當下最前沿的的設計理念“less is more?!崩缦聢D,在界面設計中幾乎都是利用簡單的幾何設計語言完成。

          3.png




          軍事風格成為 FUI 的主流設計形式有著必然的原因。首先簡單的從我們熟知的影視作品中來講,在諸多科幻動作為主的故事題材的影視作品中,正義的一方都有軍隊的支持,其中不可避免的會出現的許多設備的界面;再則隨著科技的發展,許多高科技都會用運用到軍事設備的研發上,精密的結構線和反復數據讓我們覺得其中的科技含量很高。


          4.png




          2.機甲風格

          機甲風格相對于軍事風格的最大特點就是:“具有一定的裝飾圖形元素,或多或少?!睓C甲風格最大的特點便是具有機械或者機甲風格的裝飾元素,其中多為異形元素。其靈感來源于工業設計,從機械和機甲的工業設計語言中提取圖形元素,在運用到界面設計上。如下圖,異形的機甲風格讓機器人的頭部設計顯得更加統一,如果換成當前流行的扁平化設計,可能就顯得有點奇怪了。

          5.png

          機甲風格的發展歸功于科幻題材故事的發展,為人們打開腦洞,暢想更多的可能性。在設計上激發了 FUI 的誕生,無論是賽博朋克、廢土題材、還是漫威、DC宇宙中的科幻影視作品中我們都能看到機甲風格的界面設計。

          6.png



          2.設計思路

          設計樣式 – 軍事風格

          我們從以上的設計風格中抓去我們需要的關鍵詞進行示例設計,首先我們看軍事風格的關鍵詞是“直接明了、快速、準確、直接,”我們轉換成我們平時的設計語言就是:“極簡風格,”這樣是不是更好理解了。例如圖例中,頁面整體十分統計,利用簡潔幾何語言進行設計。

          7.png




          接下來我們做一個簡單的軍事風格的進度條:第一步,找參考?。?!這一步很重要,很多同學都很容易就忽視這一點,一心一意的閉門造車,絕不借鑒學習其它優秀作品。這里向大家推薦 HUDS + GUIS 設計公司,這里有我們許多我們耳熟能詳的影視作品中的 FUI 設計。

          第二步,臨摹,臨摹可以說是學習他人技巧的最快方式,從中我們可以學習到許多設計中的細節,日后我們可以運用到自己的設計當中。我借鑒臨摹了下面的進度條樣式。


          8.png



          第三部,修改細節,舉一反三。臨摹就一定是是抄襲么?當然不是!創意設計,是把再簡單不過的東西或想法不斷延伸給予的另一種表現方式(百度百科),所以我們可以通過對設計組件內部進行重新組合或者修改其中的細節參數來達到自己在設計的目的。通過總結分析,我選用了最簡單直白的結合圖形作為設計元素進行設計,如下圖:

          9.png


          我們可以放入界面當中感受一下視覺效果:

          10.png



          設計樣式 – 機甲風格

          我們再來進階一下,設計一個機甲元素的的進度條。

          機甲風格看似裝飾圖形復雜,設計難度復雜,但其實我們只需要掌握好 – “提煉元素”這項技能就能完美應對機甲風格的設計。

          我們再回顧對創意設計的定義:是把再簡單不過的東西或想法不斷延伸給予的另一種表現方式。這里我們可以理解為將機甲元素進行提煉總結,延伸到彈框設計當中。例如下圖,漂亮的小姐姐一秒鐘變機械美女,就是通過對機械元素延展到模特身上。

          11.png12.png13.png

          第一步,照一張你喜歡的不錯的參考,這里你可以找成熟的界面設計作品,也可以找一張不錯的關于機甲風格的參考,以便于自己進行元素提取。這里我們以大家熟悉的高達為例:

          14.png



          第二部就是元素組合,我們需要提取了我們可能需要的元素,就像我們設計時面對自己手機素材一樣,這個時候我們不要急于立馬去設計,要仔細思考其設計形式,元素的位置安排。我們還是以以高達為例,途中我圈出了我可能用到的圖形元素。


          15.png



          我們從中提取我們需要的圖形,如下圖:


          16.png

          最后我們我們需要仔細思考將圖形進行組合,多嘗試幾次他們的組合方式。這里我對提取的元素進行了二次加工,將圖形一和圖形四進行了結合,打破固有的組合規律,讓圖形看起來更加生動。

          17.png

          最后我們可以放入界面當中感受一下視覺效果:

          18.png



          3.總結

          FUI 的設計看起來復雜,難以下手,但其實也是有規律可循,我們可以從作品中理性的去分析其中的設計細節,提煉總結,最終再落實到實際的設計作品當中。當然最好你能先了解一下它的設計理念以及發展,就像 FUI 是“虛構的、未來的、幻想的界面設計”一樣。

          ---來自姜正


          轉載自簡書

          作者:極創設計

          鏈接:https://www.jianshu.com/p/77665c771153

          來源:簡書

          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。



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


          騰訊游戲標志設計字標篇

          濤濤

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

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



          前言:


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

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




          圖標的類型劃分

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

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



          線性圖標

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

          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. 線面結合圖標的基礎分析及想法

          線面比例

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




          組合形式

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




          繁簡對比

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


          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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 平面設計服務


          日歷

          鏈接

          個人資料

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

          存檔

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