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

          首頁

          如何培養設計美感,這個方法掌握了,想不進步都難?。?/a>

          seo達人

          1.從大量閱讀開始

          為什么我們讀小學時候,每天很早去學校晨讀,目的通過這樣刻意練習加深學習記憶。

          長久以往,我們對文字理解,對寫作文就會構建起豐富的背景知識。

          那么在設計中也是一樣的,在前期,一定要每天堅持大量的閱讀,培養你的眼界。

          閱讀什么呢?我覺得可以針對性一些,比如:

           

          a.大量看UI設計作品

          網上因為作品有好有壞,如果你早期無法判定好的作品,可以去看一些獲獎的作品,比如kdesignaward、Adobe設計大獎,IF設計大獎等。

          圖片
          圖片
          Bomapp(kdesignaward)
          圖片
          DuerOS(百度車聯網)kdesignaward

           

          b.創意性網頁UI作品
          圖片
          圖片
          圖片

           

          c.品牌設計作品
          圖片
          圖片

           

          d.插畫設計作品
          圖片
          圖片

           

          e.版式設計作品
          圖片
          圖片
          圖片
          當然不止這些,比如你還可以看看一些裝置藝術、科幻藝術、三維作品、攝影作品、文化類作品,總之早期一定要堅持大量閱讀。
          我們大量閱讀是為了建立豐富的背景知識庫,積累越多,你的審美自然也會跟隨提高,當然做設計的想法就會有更多。

           

          2.什么情況下知道,我的審美提高了?

          前期大量閱讀了很多作品,這時候你需要把牛逼的作品收集起來,等半個月后,再去看看之前搜集的作品,如果發現有部分很丑,那么恭喜你又往前走了一步。

          成長是需要一個過程,切忌操之過急,關鍵是需要自己動手去執行,不能等著被改變。

          圖片
          https://www.pinterest.com/Tonyrosie666/_saved/

          我們可以去建立一個圖板,雖然很多人有這樣做,但是真正做到復盤,然后去刪除之前采集的人很少。

          如果不去復盤,不去思考,進步當然會緩慢,抱怨也是沒用的。

          低頭趕路,也不要忘了抬頭路,我們要隨時知道是朝著正確的方向努力。

           

          3.學習一些理論

          當看了大量的作品,對美有些認知,但是你還是不知道怎么表達美?這時候,你需要學習一些理論的支撐。

          我們通過閱讀大量作品構建審美認知,通過閱讀書籍、文章理論構建審美體系。

          比如,德國工業設計師迪特·拉姆斯提出好設計十項原則:

          好的設計是創新的
          好的設計讓產品更加實用
          好的設計是美觀的
          好的設計使產品更易理解
          好的設計師謹慎克制的
          好的設計是誠實的
          好的設計是經典永恒的
          好的設計是細致的
          好的設計是保護環境的
          好的設計要盡可能簡單

          又或者:

          我們可以從形、色、質、字、構、動等6個維度去拆解,又或者可以利用格式塔心理學來進行設計質量的評估,比如我們常說的相似性、親密性、連續性、焦點歸一等。

          再比如,當你看到一個吸引你的設計作品,你可以這樣思考吸引你的點在哪?

          比如:是圖形運用很巧妙還是質感表達很新潮?又或者色彩創意很棒,一般一個好的設計都會滿足形、色、質、字、構等,至少要3個以上維度。

          當然還可以通過看書積累對設計美的表達,總之就是要大量輸入,構建豐富的知識庫。

           

          4.推薦一些網站

          提升審美必須每天堅持看,這個是毋庸置疑的事情。這里,推薦一些我常常去看的網站。

          a.savee

          圖片
          https://savee.it/

           

          b.pinterest

          圖片

          https://www.pinterest.com/

           

          c.designweek

          圖片

          https://www.designweek.co.uk/

           

          d.designcollector
          圖片

          https://designcollector.xyz/design

           

          寫在最后

          提升設計審美,前期大量閱讀只是一個開始,我們還需要做的是不斷思考總結。

          同時還需要學習設計理論,這些我們可以通過看書或者和別人交流,在討論過程中,你自然知道他們是怎么評價這個設計的。

          路漫漫其修遠兮,學習是一個長期的過程,培養審美也是。

          積小步,成大步,沒有一蹴而就的成功,一切都是量變的積累。

           

          原文地址:功夫體驗設計 (公眾號)

          作者:Tony

          轉載請注明:學UI網》如何培養設計美感,這個方法掌握了,想不進步都難?。?a style="color:#428BCA;text-decoration-line:none;">

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          知識圖譜的信息可視化設計方法

          seo達人

          一、什么是知識圖譜

          1.1 基本概念

          2012年,Google公司為實現更智能的搜索引擎,提出知識圖譜的概念,2013年后在行業內和學術界開始普及。

          知識圖譜的定義:是結構化的語義知識庫,本質上是一個語義網絡(Semantic Network),用于描述物理世界中的概念及其相互關系。在技術層面,通過對錯綜復雜數據的有效加工、處理、整合,轉化為數據關系來聚合大量知識,從而實現知識的快速響應和推理;在可視化的應用中,知識圖譜表現為多關系圖(Multi-relational Graph),在圖形化界面中可讓用戶查看和互動(如圖1)。

          圖片

          圖1(引用自企查查app截圖)

           

          1.2 知識圖譜的特點:

          其特點主要包含以下兩方面內容:

          1. 它是由“節點”和“邊”構成的三元組

          三元組是知識圖譜的基本單位, 由節點和邊構成(圖2)。其中節點代表實體,是指具有區別性且獨立存在的客觀事物,如:圖1中的馬云、華誼兄弟傳媒有限公司,圖3中的美國、平方公里數等;邊代表兩個實體間的關系,是指客觀存在或推理得到的實體間的聯系,如圖1中的董事、監視、投資,圖3中的面積、人口、首都等。

          圖片

          圖2(作者依據知識圖譜相關概念繪制)

           

          圖片

          圖3(引用自網絡圖片)

          2. 它的數據以知識的角度呈現。

          知識是一種人類對于客觀世界的認知,包括事實、信息描述或教育實踐中獲得的結果的綜合。三元組也被稱為“一條語句”,或知識圖譜中的一條知識。在圖4的國家信息關系三元組中,我們就可以讀出一條語句(或是知識)為:“中國的土地面積有9,634,057平方公理”。知識圖譜可以集成Web上大量的數據及數據關系,通過有效的加工、整合和處理,將其轉化為易于計算和理解的語義知識庫,可用于描述客觀世界中的概念及相互關系。

           

          1.3 知識圖譜的作用

          1. 信息篩選,精確檢索范圍。

          2. 信息拓展,提供更豐富的信息內容。

          3. 信息連接,構建有深度和廣度的知識系統。

           

          1.4 為什么需要對知識圖譜進行可視化

          1. 知識圖譜的技術架構-側重在數據關系模型和機器學習,普通用戶很難讀取和理解。

          知識圖譜的核心技術邏輯,是由整體的“數據輸入-數據處理-知識圖譜生成”三個大環節構成。數據輸入環節包含“結構化數據、半結構化數據、非結構化數據”;數據構建環節包含“信息抽取、知識融合、知識加工”;知識圖譜系統的生成環節,是整個技術架構往復迭代、不斷更新和積累,慢慢形成的結果。數據輸入是對數據源的挖掘,數據構建是底層的模型算法應用,知識圖譜生成是數據處理結果的呈現(如圖4)。

          圖片

          圖4(作者依據知識圖譜相關概念繪制)

          這個過程在底層數據模型中運轉,對用戶可見的往往是最終的結果。比如:搜索引擎中,用戶看不到搜索過程,但可得到最匹配的搜索結果;在音樂平臺中,看不到內容匹配邏輯,但可以被推薦感興趣的歌曲。如果想利用過程數據為用戶提供服務,就需要進行可視化處理。

          2. 傳統的信息可視化-側重在數據結果的展示和篩選,較少涉及數據關系的干預。

          傳統信息可視化的方法,在設計側更多強調數據信息與圖像、色彩的信息傳達上。其方法通常集中在“如何對已經確定的數據進行圖形映射”和“如何處理信息層級”的視覺表現上,較少參與設計數據關系或影響數據結構。然而,這讓用戶知道數據“是什么”,卻不能呈現數據“為什么”。知識圖譜的可視化,可以讓數據處理過程被用戶可見、可用,從而更好的分析和使用數據。

          圖片

          圖5(作者依據傳統信息可視化方法相關概念繪制)

          3. 知識圖譜的可視化-側重在數據關系構建和處理過程的可視化

          知識圖譜技術廣泛應用在情報學、檢索引擎、自動問答、金融反欺詐等領域。目前已擴展到智能醫療、證券投資、大數據風控、聊天機器人、個性化推薦系統等更多方向[1]。這種關系語義網絡也逐漸從技術底層應用向可視化用戶界面上發展,各行各業也在探索如何時其在終端界面中被用戶可讀和可用。比如:在文化研究領域,圖譜呈現更有助于用戶對于文化知識的理解和再創造;在商品市場領域,視覺化的圖譜可讓商家洞察更多“人-貨-場”之間的內在聯系。

          對知識圖譜信息的可視化,重心落在數據信息的提取和關系構建上,將數據信息的編譯過程呈現給用戶。知識圖譜信息可視化和傳統信息可視化方法之間的關系,如圖6。

          圖片

          圖6(作者依據信息可視化方法相關概念繪制)

           

           

          二、知識圖譜的可視化設計方法

          知識圖譜在底層算法和數據模型上提供有效的技術邏輯,進而構建豐富龐大的語義網絡,但如果要在具體應用場景中給用戶可見的模式,則需要圖形化界面的呈現。在實際工作中,設計側的核心任務是“多關系圖”的信息可視化。結合知識圖譜的特征、技術原理和傳統信息可視化方法,可以將知識圖譜可視化的過程,歸納為“確定知識主題(主題層)-處理與分析數據(數據層)-構建數據三元組(關系層)-進行可視化映射(可視層)”四個步驟。

           

          2.1 【主題層】確定知識主題/可視化目標

          確定主題的過程,也是定義核心概念或目標的過程,這一環節是是知識圖譜可視化的出發點和落腳點。傳統可視化為了可視而可視,只是讓用戶更好的讀取數據,而較少考慮讀到后有什么用,怎么用。沒有主題的數據是無意義的,任何一類知識的描述,都需要圍繞某一特定主題展開。在項目實踐角度,也可以將其視為梳理業務核心訴求或定義設計目標的過程,如確定要闡述什么類型的知識、最終的可視化效果對目標用戶有什么價值、業務要利用數據達到什么目的,所有數據的設計都將圍繞著主題展開。

          確定主題的方法有很多,包括傳統的用戶需求分析方法、文獻綜述、行業研究等,可根據不同的項目訴求,選擇合適的方法和工具。如,要做電商行業的知識圖譜,通過行業研究、對用戶特征和行為動機的分析,發現電商領域用戶最關心人貨場的知識,人和貨特征及其關系就是核心要表達的主題。再如,老師想了解網絡時代的大學生都具備怎樣的社交特征,通過對學生學習、娛樂、社交等不同生活要素分類調研,選擇“學生使用社交軟件的行為特征”作為主題。

          同時,主題要清晰明確,避免模糊和過于宏大。以文化領域為例,如想呈現京劇之美,這個概念就大而泛,很難去組織數據,就有創作者將其主題拆分為:歷史之美、劇目之美、舞臺意向之美、傳承之美等幾個主題。然后再逐一分析每個主題的數據。

           

          2.2 【數據層】對數據進行提取與加工

          在未經處理前,與主題相關的可用數據是多樣且龐雜的。由知識圖譜的技術框架可知,技術模型經過信息提取、知識融合和知識加工后,才使原始數據變得有用和有效,同樣在可視化的過程中,也離不開信息提取與數據加工。

          1. 數據提取-圍繞知識主題進行數據信息的提取。

          信息提取,也就是先羅列可能有用的相關數據類型。每個主題都是一大類目的知識領域,需要經過收集、歸納、拆解后再能夠清晰的進行解釋和傳播。如,圍繞“學生使用社交軟件的行為特征”這一主題,可歸納出“好友關系、互動行為、在線狀態、信息發布”等特征。進一步,好友關系又可拆分為:好友量、關注量、粉絲量;互動行為又可拆分為:聊天次數/頻率、點贊數、評論數等。數據收集一般通過桌面研究的手工收集、數據爬蟲兩種方式。歸納和拆解數據可以使用卡片分類、思維導圖的方式。

          2. 數據加工-進行知識語義加工。

          數據加工的過程,就是將羅列出的數據進行分類和篩選,確定最能夠表現知識主題的描述緯度或數據類型。如圖7,通過分析影響因素的關聯程度,選擇具備直接影響因素的數據,或劃定數據范圍后,再進行細分??梢岳每ㄖZ模型、波士頓矩陣等方法找到數據對主題影響程度的優先級,具體的挑選方法無定式,只要能整理出適合的數據類型。

          圖片

          圖7(作者依據相關案例繪制)

          3. 數據清洗-進行數據篩選和最終確認

          定義出有用的數據類型后,并不是所有數據都能完美符合我們的訴求,比如數據挖掘能力限制,不能挖到更精準的數據或有數據缺失;比如數據解析能力不足,數據類型混雜,或有錯誤數據等。排除不足量、精準度差、錯誤率高等不可用的數據,盤點出能夠被應用于可視化的最終數據。在實際工作中,需要跟團隊的數據挖掘工程師、或業務產品負責人明確數據能力和質量。例如,“京劇傳承之美”的數據選擇過程中,作者對京劇藝術傳承上存在的“流派師承、藝學家傳、科班教育等”多種方式進行進行分類和篩選,最終提取了京劇51個流派的創始人數據、師徒數據、家族成員數據。

           

          2.3 【關系層】構建數據關系三元組

          在知識圖譜的技術架構中,這一環節體現在本體構建上,本體是個專業概念,本體構建也有多種可用的成熟模型,屬于技術側內容,本文不展開論述,僅闡述設計層面的思路。技術是讓數據更精準,而面向用戶的設計是讓數據更有用和好用。

          設計數據的關系層,也就是給不同數據類型建立關系的過程,通過確定節點和邊的內容來構建能夠解釋主題和符合其邏輯關系的三元組。數據關系的建立一般主要圍繞兩個層面,一是能夠闡述知識主題,二是通過關系三元組可推理得到更多的知識內容。比如,在“學生使用社交軟件的行為特征”這個主題中,可定義“學生(實體)-網絡社交特征(屬性)-具體行為(屬性值)“是一組關系結構,體現在數據為“張三-在線時長-5小時/天”,描述成知識語意為:張三同學社交軟件每天會在線亮起5個小時;又如,圍繞“商品銷售信息”這一主題,“產品(實體)-集合(關系)-商品(實體)”是一組關系結構,體現在具體數據為“手機-包含-華為手機”,描述成知識語義為:華為手機是眾多手機中的一種。

          當我們定義了這種數據關系,獨立的數據就變成了可描述的知識語意,當這些語義聯系在一起,用戶通過一段段知識洞察到不同的現象,或解讀出不同的結論。這種知識語義的可視化,或者說這種數據關系結構的可視化,能夠幫助用戶了解業務現象,或產品底層看不到但卻有用的信息。比如京劇文化中師承的演變,可以通過不同人物之間的關系脈絡,構建出“師承關系、家族關系、聯姻關系”幾種三元組模式,從相同節點中解讀到某個京劇演員擅長某個角色的師承因素。再比如,將某班級每個學生的聊天頻率、好友數量、QQ在線時長等網絡社交行為關系一一對應,就會勾畫出集中在某個學生身上的不同特征,把這些學生再放在一起,就呈現出一個班級學生在網絡世界的不同社交特點。(如圖8)

          圖片

          圖8: 由數據構建的三元組關系圖(作者依據相關案例繪制)

           

          2.4 【可視層】可視化圖形語義轉換/可視化映射

          當關系構建好以后,簡單的三元組是容易讀取的,但眾多三元組集成在一起,也會涉及到信息讀取效率的問題,就需要將關系結構圖形化,這一步驟也是傳統信息可視化方法中的必然環節。根據已經構建好的數據關系結構,可通過“圖表映射”和“視圖設計”兩種方式,進行可視化的語義轉換。

          1. 可視化圖表映射

          可視化圖表,是指具備通用性的標準化圖表??傮w分為統計類圖表和關系類圖表,本文主要闡述關系類圖表。關系類圖表又可分為網狀關系和層次關系。網狀關系圖包括:關系圖、弦圖、弧長鏈接圖等;層次關系圖包括:樹圖、旭日圖、矩形樹圖等。詳細的標準化圖表,可以借助E-chart、Tableau Public、Smartbi等軟件進行參考選擇(如圖9)。

          圖片

          圖9:網狀關系圖(引用自E-chart網站截圖)

          圖片

          圖9:層次關系圖(引用自E-chart網站截圖)

          如果數據關系比較清晰簡單,能夠被這兩類標準化圖表所覆蓋,則可以直接選擇把節點和關系直接映射其中。如果你的數據關系比較復雜,或個性化,則可對標準化圖標進行組合或變化,或設計個性化視圖。

          例如,在北京郵電大學彭國雁的論文《面向京劇知識圖譜的信息可視化研究與設計》的案例中,“京劇傳承之美”這一主題,“師承關系、家族關系、聯姻關系”的三元組關系較復雜,如果直接用可視化圖表映射來展示,會產生易讀性差和頁面布局難以控制的問題。于是論文作者采用不同圖表相結合的方式,并將圖形的視覺元素進行改造:1 主體采用和弦圖,人物點構成和弦圖的圓,人物關系類別采用不同顏色線條進行連接(圖10)。2 根據人物出生時間的向性特點,將人物按照某一方向進行排列,即可隱喻師徒或者親屬關系的有向性。3 采用樹形圖形式的線條表達主次人物的關系(圖11)。4 將幾種基礎關系做好映射后,再把相關節點整合在一起,就表達了整體的師承關系結構圖,最終形成“傳承之美”整體的可視化知識圖譜(圖12)。

          圖片

          圖10: 人物師承、親屬、聯姻關系和弦圖(引用自論文《面向京劇知識圖譜的信息可視化研究與設計》截圖)

          圖片

          圖11: 京劇流派師承樹形關系表(引用自論文《面向京劇知識圖譜的信息可視化研究與設計》截圖)

          圖片

          圖12:最終映射后的 “京劇傳承之美”可視化知識圖譜(引用自論文《面向京劇知識圖譜的信息可視化研究與設計》截圖)

          2. 可視化視圖設計

          本文所述的可視化視圖,是指能表達標準化圖表以外的,不同類型數據特征的語義圖形,由設計師根據與主題相關的數據類型進行構思,并關聯其不同類型數據間的關系語境,最終形成的信息圖。比如(圖13),清華大學副教授向帆老師在對“學生互聯網社交行為”這一主題的研究中,作者選擇QQ使用狀態的相關數據,將每個學生用QQ企鵝的輪廓圖形表示,在線時長為企鵝形狀大小、聊天次數為圓形嘴巴、好友數量為頭發多少,呈現出“學生-網絡社交特征-具體行為”的可視化關系圖,在最終的視圖中,可直觀的看到完全不同的每個人。

          圖片

          圖13:同班級不同的學生網絡社交行為圖譜(引用自演講《秘密的設計》截圖)

          這類自定義的可視化視圖具有獨特性和意向性的特征。獨特性是指圖形針對具體的主題和數據關系,而不能夠廣泛的為其他主題復用;意向性是指一個視圖內的圖形有一定的意向概念傳達,比如圓形代表聊天次數,也是象征嘴巴,嘴巴跟聊天相關(盡管網絡聊天用文字,但卻表達出了這種交流意向)。同時個性化圖形元素相關聯來表達數據關系,也可以直觀、高效的洞察出用單純的標準化圖表看不到的現象,比如說圖14的三個學生,一個在線時間很長但聊天很少、好友也很少;一個在線時間很短,但好友和交流時間卻很多;另一個基本不說話,但是卻有很多好朋友。這樣的現象更容易觸發同理心,從而啟發老師在教學中因材施教。

          圖片

          圖14:發現網絡社交行為最為奇特的三個學生(引用自演講《秘密的設計》截圖)

          經過以上四個步驟,就完成了對知識圖譜數據進行可視化。它不是單純的以視覺效果展示數據信息,而是從數據關系提取到關系呈現為一體的設計過程。

           

           

          三、結語

          綜上所述,基于知識圖譜的技術架構、傳統數據可視化的方法和交互設計的工作流程,本文分享了一種可在工作中易于操作的知識圖譜可視化方法。與傳統數據信息可視化相比,知識圖譜可視化更傾向于數據之間三元組關系的視覺表達,所謂“整體大于局部之和”,有了關系的建立,則更能夠發現單一數據之外的延展信息和潛在機會。希望能夠通過設計的力量,讓普通用戶也能更好的使用數據和洞察數據。

          參考文獻:

          1. 彭國雁,《面向京劇知識圖譜的信息可視化研究與設計》
          2. 1. 通俗易懂解釋知識圖譜(Knowledge Graph) – hyc339408769 – 博客園
          3. 領域本體的構建方法研究_u013263092的專欄-CSDN博客_本體構建
          4. 王昊奮,《知識圖譜技術原理介紹》
          5. 劉知遠 ,《面向大規模知識圖譜的表示學習技術》
          6. 【干貨】最全知識圖譜綜述#1: 概念以及構建技術
          7. 【干貨】最全知識圖譜綜述#2: 構建技術與典型應用
          8. 向帆,一席演講《秘密的設計》

          轉載請注明:學UI網》知識圖譜的信息可視化設計方法

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          設計效率工具趨勢 | 綜述篇

          seo達人


          一、日常積累

          設計師日常除了應對當下的需求,每天可以拿出一定時間保持學習的習慣。不僅可以讓我們緊跟最近的設計趨勢、設計潮流、設計方法,也可以讓我們潛移默化中得到提升。

          Panda|全而美的設計訂閱平臺

          圖片

          Panda幫助設計師不錯過每天的設計靈感和資訊,包括新的設計方法理念、流行潮流、也有一些新產品推出。我們可以把Panda替換Chrome主頁,每次打開瀏覽器頁面都可以隨時看到最新的設計資訊。一些英文的訂閱也可以用chrome瀏覽器的翻譯功能可以粗略查看。

          地址:https://app.usepanda.com/#

           

          Topys|創意內容平臺

          圖片

          全球頂尖創意內容平臺,作為中國成立最早、最受歡迎的創意垂直網站,以 “Open Your Mind” 為宗旨,始終專注在全球創意、藝術、靈感、人文領域尋找最有質感的聲音。

          地址:https://www.topys.cn

           

          Voicer|分享生活和設計的美學

          圖片

          我們總在生活中與「一瞬間的感動」相遇。Voicer的理念即是發現這「感動」, 將它傳遞給更多熱愛生活的人們。內容包括創意內容品牌、在線雜志等。致力于分享生活和設計之美。

          地址:https://www.voicer.me

           

          Design better|優質設計讀物網站

           

          涵蓋設計商業思維、產品設計原則、設計系統等關于推動設計團隊前進的實踐讀物,同時提供PDF和有聲格式。

          地址:https://www.designbetter.co

           

          二、研究分析

          設計師在調研過程會研究用戶、記錄用戶的行為和需求,會使用一些高效的記錄工具。同時繁多的調研的信息需要匯總整理,協作整理,這里會推薦一些記錄和整理的工具給大家。

          Noted|錄音筆記好工具

          圖片

          Noted 是一款將錄音和筆記相機相結合的軟件。我們做訪談用戶或做會議紀要的時候,經常錯過記錄的內容,如果通過一些軟件錄音的話,后期回聽需要比較多時間成本。Noted可以在記錄筆記的同時記錄輸入文字的時間點所對應的錄音,輸入的每個字的時間點都會對應到。當內容沒記錄下來時可以隨時跳到對應時間的錄音進行回聽,方便在漫長的錄音文件中快速檢索。

           

          Marginnote|文獻收集箱

          圖片

          重塑學習方式的閱讀筆記工具,更加高效閱讀書籍和學習,可以在閱讀時摘錄筆記,制作學習卡,提取關鍵詞,根據筆記生成思維導圖,梳理知識框架。非常適合閱讀專業書籍,閱讀論文以及復習。

          地址:https://www.marginnote.com/chinese/home

           

          GoodNotes|手寫筆記

          圖片

          一款功能強大的手寫筆記軟件,擁有多種筆記封面和紙張模板可以選擇,支持自定義模板,可以簡單處理圖片,可以導入pdf、ppt等文稿并做標記,也適合做電子手賬。

          地址:https://www.goodnotes.com/zh-cn

           

          騰訊文檔|在線協作

          圖片

          調研階段方便多人一起搜集資料和匯總,多人同時在線編輯,內容實時同步。隨時隨地高效協作,輕松創作。

          地址:https://docs.qq.com/home

           

          Xmind|思維導圖

          圖片

          功能強大的思維導圖軟件,極簡設計,流暢體驗,多種結構圖風格選擇,方便資料的匯集和思路的整理。

          地址:https://www.xmind.cn

           

          三、設計創作

          當設計目標確定時,接下來進行具體的創意設計。設計師除了通過腦暴進行發散方案以外,一些高效的設計工具可以讓我們事半工倍。

          3.1 靈感搜集

          Collect UI|界面靈感

          圖片

          UI設計靈感庫,基于dribbble平臺精心挑選優質內容,提高效率便捷,為設計師提供專項更好的靈感。同時支持郵件訂閱推送。

          地址:https://collectui.com

           

          Adobe Color|配色靈感

          圖片

          Adobe color不僅從各個維度解決了我們的配色需求,同時也提供找圖需求。其中包含 9 種智能調色模式可以選擇。拾取主題色、拾取圖片中的漸變色、協助工具可以合理幫助檢查不同顏色的對比、探索behance趨勢。

          地址:https://color.adobe.com/zh/create

           

          Useanimations|圖標動效靈感

          圖片

          圖標動態效果庫,當繪制的圖標需要一些巧妙的微動態效果時可以參考。

          地址:https://useanimations.com/index.html

           

          3.2 設計打磨

          FigmaEX|插件可視化

          圖片

          當插件特別多時候,FigmaEX極大的改善了Figma中使用插件的體驗,將插件可視化??梢赃M行展開,同時顯示插件的名稱與圖標。可以通過拖拽調整插件的順序,調節高度。

           

          Autoflow|流程圖插件

          圖片

          輸出交互設計稿的時候,方便快捷的在不同畫板之間連線,提升輸出效率。

          地址:https://www.figma.com/community/plugin/733902567457592893/Autoflow

           

          Skewdat|傾斜插

          圖片

          這是一個非常簡單實用的 Figma 插件,它可以幫你將任何形狀元素傾斜過來。

          地址:https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio

           

          Undraw|插畫素材

          圖片

          最棒最全的插畫庫,支持快速搜索,一鍵調整顏色。

          地址:https://undraw.co/illustrations

           

          Magic Eraser|輕松移除雜物

          圖片

          一款免費的在線服務,它通過 AI 自動去除圖片中不需要的部分,只需要上傳圖片,等待幾秒鐘即可。用鼠標把不要的部分劃掉,松開鼠標就會閃幾下,被劃掉的部分就消失了,比如去水印之類的小東西,如果用 PS 的圖章,估計要十來分鐘,而用 Magic Eraser 就幾秒鐘,簡單易用,推薦使用。

          地址:https://www.magiceraser.io

           

          3.3 設計驗證

          Checklist Design|設計清單

          圖片

          設計輸出后可以通過這個清單去做最后的檢查。網站列舉了一些通用場景(頁面、元素、流程、主題、品牌)下的基本設計要素。可以檢查你的設計在這些場景下是否符合規范。樣式、顏色、命名、易用性等是否合適。

          地址:https://www.checklist.design/?ref=prototyprio

           

          四、測試評估

          好的方案不是一蹴而就的,設計方案需要不斷的打磨和迭代。方案需要持續和用戶進行溝通和測試,才能得到完善的方案。也需要和開發工程師不斷溝通,以達到最佳的實現效果。

          4.1 用戶測試

          騰訊文檔|在線收集表

          圖片

          用戶測試階段方便高效的收集用戶反饋,一般用于定量的用戶測試。

          地址:https://docs.qq.com/

           

          Hawkeye|眼動追蹤工具

          圖片

          一般的眼動跟蹤設備比較昂貴,使用繁瑣。這個名為鷹眼的眼動追蹤APP,可以通過手機前置攝像頭捕捉用戶在使用產品時的視覺動向。

          地址:https://www.usehawkeye.com/?ref=prototyprio

           

          4.2 評估還原

          CoDesign|騰訊自研設計協作平臺

          圖片

          覆蓋產品經理、設計師、工程師協作需求。設計交付更輕松,有效管理和使用設計資產。

          地址:https://codesign.qq.com/

           

          Pixel Eye|高效視覺還原

          圖片

          在項目上線前設計師都會對最終的產品實現效果進行走查,以保證設計還原的準確性,體驗的流暢性。這是一款視覺還原工具,幫助前端工程師在頁面重構階段就能快速發現開發稿與視覺稿的差異,實時對比、實時修改,減少工程師與設計師的溝通成本,提升整體開發效率。

          地址:pixeleye.暫未對外開放敬請期待

           

          五、對外宣傳

          設計完成后匯報展示、產品的宣傳包裝等,提供更便捷優秀的展示形式。

          5.1 效果展示

          Mockup World

          圖片

          樣機的類型全面而且免費,綜合質量很高。

          地址:https://www.mockupworld.co

           

          ls.graphics

          圖片

          素材非常優質精美,有免費和付費的資源。

          地址:https://www.ls.graphics/#UI

           

          5.2 在線作品集制作

          Adobe Portfolio

          圖片

          主要面向設計師群體,幫助設計師建立個人在線作品集。幾分鐘就可以建好一個作品集網站,提供精美模板選擇。最大的特點是易于操作,無需懂網頁程式,都能在建立一個網站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收費。已訂閱用戶可免費使用。

          地址:https://portfolio.adobe.com/start

           

          Portfoliobox

          圖片

          針對設計師或者創意人員的作品展示工具,可以直接在網頁瀏覽器中搭建屬于你的作品展示平臺。

          地址:https://www.portfoliobox.net/cn/

           

          結語

          此綜述篇大家有了比較整體的了解,在設計流程中每個環節,介紹了一些比較好用的工具,后續的設計工具系列文章會針對某一環節進行更深入的探索。

          圖片

          感謝閱讀,以上文章由騰訊ISUX團隊創作,版權歸騰訊ISUX所有,轉載請注明出處,違者必究,謝謝您的合作。 

           

          原文地址:騰訊ISUX

          作者:ISUX設計

          轉載請注明:學UI網》設計效率工具趨勢 | 綜述篇

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          10個優秀的UI/UX設計技巧

          seo達人


          一、利用手勢輔助實現快捷操作

          利用手勢交互輔助隱藏式功能操作,可以在不改變當前結構的基礎上實現快捷操作,帶給用戶更加便捷化的體驗。

          夸克 APP 在訪問了多層級頁面之后,如果想要快速回到瀏覽器主頁,點擊返回按鈕一級一級返回過于繁瑣。通過底部導航欄向上進行滑動,可以快速激活返回主頁的操作,手勢輔助實現自動跳轉。該設計解決方案通過手勢輔助隱藏功能操作,提高了用戶對于產品的使用體驗。

          圖片

          圖片

              

          二、點贊設計的情感化探索

          點贊在閱讀類場景中隨處可見,用于表達用戶對內容的認可度而產生的情感共鳴,通過點贊給予贊同。點贊設計的創新已逐步在探索,通過更加情感化的設計表達提高用戶體驗,借助手勢的變化呈現出更有趣味性的點贊設計。

          今日頭條 APP 單擊點贊圖標會隨機性彈出表情化符號,多次點擊會持續彈出更為豐富密集的表情符號,長按則會像模擬持續發射的特效,伴隨著音效和震動帶來“視聽觸”等多重體驗。點贊設計的情感化探索不僅帶給用戶多重感官體驗,也是用戶釋放閱讀壓力的一種情感共鳴。

          圖片 
           

          三、情感化的點贊文案設計

          除了從點贊視覺感官層面進行設計探索以外,眾多產品也在文案提示設計上面進行情感化探索。

          AcFun APP 在對話題等內容點贊時,會彈出溫馨的文案提示,每次點贊都會出現不同的文案。情感化的文案設計提高了話題互動的活躍度,帶給用戶更好的社交互動體驗。

          圖片 
           
           

          四、突破常規的模式切換設計

          設計都在探索差異化的感官表達,如何突破常規至關重要。無論是在布局結構層面還是元素情感化表達層面,設計師都在嘗試更有創新的表達,帶給用戶不一樣的使用體驗。

          Wonder APP 在模式切換上做出了一個新穎的設計解決方案,通過環形卡片設計進行模式切換,可以單擊和滑動進行切換。動態的卡通形象增加了感官體驗,流暢的卡片切換也帶來了不錯的操作體驗,是一個在布局層、視覺感官層、互動層等方面的不錯探索。

          圖片

          [優化輸出圖像]

           

           

          五、特色的簽到展示設計

          簽到設計對于大家來說并不陌生,提高用戶簽到的參與度是大家都在不斷思考和探索的方向。

          AcFun APP 將簽到設計成日歷展示形式,點擊簽到之后彈出,配合日歷運勢的概念來設計,提高用戶的簽到興趣。內容卻不是正式的日歷運勢相關內容,配合趣味化的文案設計,讓用戶會心一笑。視覺感和情感化文案設計的融入,提高了簽到設計的感官體驗,進而提高用戶的參與度。

          圖片 
           

          六、自定義字號提高閱讀體驗

          通過公眾號等自媒體進行閱讀已經成為大家的習慣,不同公眾號編輯內容都會有所不同,字體大小和行間距等沒有特定的規范。官方雖然會有默認設置,但是無法兼顧不同的內容需求。提高小編的編輯體驗和滿足用戶的閱讀體驗,自定義的閱讀調整至關重要。

          在公眾號閱讀文章時,可以通過右上角的功能入口進入“調整字體”。用戶可以根據自己的閱讀習慣設置字體大小,在標準和自定義大小之間切換,提高用戶的閱讀體驗。

          圖片 
           

          七、自選色實現更靈活的個性換膚

          個性化的皮膚主題在眾多產品中已經運用普遍,當用戶體量增加之后,個性化的設置才能滿足不同用戶的體驗需求。

          酷我音樂 APP 在個性換膚模塊中,除了設置多個主題皮膚供選擇以外,用戶還可以通過自選色設置更加靈活的配色風格??梢赃x擇更多推薦的配色風格,也可以通過色環自己調節任意顏色,滿足不同用戶對于感官體驗的需求。

          圖片 
           

          八、自定義圖滿足用戶的創作欲

          對于一些追尋個性化較強的用戶,預裝的自定義設計已經無法滿足他們的體驗需求,激發用戶創作欲的設計迎面而來。

          酷我音樂 APP 在個性換膚模塊中,用戶可以通過“自定義圖”實現更加個性化的皮膚。用戶可以選擇任意拍攝的照片,然后通過透明度和模糊度來調節照片效果,滿足自己對背景效果的要求。針對按鈕的顏色也提供了幾個配色選擇,用戶可以根據自己調節后的背景效果進行搭配?;诟觽€性化的需求滿足用戶的創作欲,才能帶給用戶更加人性化的使用體驗。

          圖片 
           

          九、關聯功能疊加設計提高使用率

          為了提高功能的曝光度,直接展示在用戶的視野中是很多設計師的處理形式,但是卻增加了感官層面的視覺負擔。

          幸識 APP 把關聯功能進行合并式的疊加設計,不僅對視覺進行降噪,由于屬于關聯性的操作,用戶更容易通過功能聯想進行使用。當用戶點擊觀看“時間戳”時,底部功能會被替換為“發起”,發起時間戳和觀看本身就是一個流程的體驗。當我們遇到關聯性功能設計時,不一定選擇各自展示,相互疊加或者切換式的交互設計也是不錯的解決方案。

          圖片 
           

          十、趣味性爆滿的點贊設計

          點贊是用戶情緒化表達的關鍵,表示對于內容的認可度和作者的支持度。普通的點贊設計已經無法滿足一些情緒爆滿的用戶,更加趣味夸張的設計在逐步被探索。

          微博 APP 針對點贊設計單擊時,出現表情化的符號彈出,持續點擊或者長按點贊圖標則會出現色彩豐富、表情符號四處爆發的視覺效果。一場趣味性爆滿的視覺盛宴,滿足用戶釋放情緒的最大化需求。

          圖片

          源圖像

           

          小結

          在用戶使用體驗和感官體驗層面探索了這些優秀的案例,希望可以拋磚引玉,帶給大家更多啟發。發現設計背后的思路,總結設計表達的經驗,運用優秀案例的技巧,提高我們的設計解決能力。

          以上總結僅代表個人觀點,如有不足歡迎大家留言補充,我們互相進步。

           
          原文地址:黑馬家族(公眾號)

          作者:黑馬青年
          轉載請注明:學UI網》10個優秀的UI/UX設計技巧

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          太簡單了!別人要做一小時的頁面,我用這些效率插件一鍵生成

          seo達人


          01 替代重復繁瑣操作的效率插件

          智能填充

          做設計時,同學們一定遇到過這種情況,某些模塊需要用圖片或文字進行展示。

          用單調的圖形和隨意的文字占位不夠真實美觀,手動添加圖片編輯文本又太麻煩,能不能有工具幫我一鍵隨機生成并填充?

          當然可以,「智能填充」插件就是專門解決這類問題的。

          選中任意文本,即可選擇智能填充人名、時間、日期、段落及對話等 9 種不同的預設內容;選中非文本圖層、分組或畫板,就可以智能填充人物頭像、風景、美食等 8 種類型的無版權圖片。

           

          快速復制

          做設計時,很多同學會遇到一個頁面中需要出現多個相同模塊的情況,比如商品列表、視頻頁、相冊等等。

          處理起來也不難,多按幾次 Ctrl+C 和 Ctrl+V 就行。但復制出來的模塊經常重疊在一起,還需要逐個拖拽排版……時間就是被這樣浪費的。

          但其實,這些繁瑣的步驟完全可以用「快速復制」插件一鍵搞定。

          只需做好第一個,選中全部圖層,打開插件,設定好橫向與縱向的復制數量及間距,點下按鈕就能一鍵復制。

          像我演示用的這個即時設計的插件,復制完成后,還預留了按鈕,點一下就能打開「智能填充」,很貼心。

           

          ? 文本拆分

          還有專門用于處理大段文字的「文本拆分」插件,能將一個文本圖層拆分為多個,方便分別設計排版;也可以將多個文本圖層組合為一個重新編輯。

          類似的提高設計效率的插件還有很多,例如:

          「圖標尺寸調整」——可以批量調整不同 icon 及其外框大小;

          「字體替換」——批量替換設計稿中使用到的所有字體,并保持原有文本樣式屬性;

          「查找替換」——能搜索定位文本內容并替換,且不改變原有文本樣式。

           

          02 整合圖標字體的資源插件

          各種各樣的免費或付費的素材庫給我們提供了很多便利,但也不是所有類型的資源,都適合下載文件,再導入使用的。

          比如圖標和字體這兩類,使用頻率非常高,如果每次都需要下載導入安裝,無形中就增加了很多重復工作。

          所以,很需要有一些工具,來讓這兩類資源的取用更加便捷,比如,圖標插件和字體插件。

           

          海量圖標—— iconify、iconfont & IconPark

          現在的圖標庫都能直接下載 SVG 格式,所以不用太考慮顏色尺寸的問題。

          但做設計久了,就會在電腦里存下許多圖標文件,整理起來屬實麻煩,都刪掉了又可惜,萬一哪個還能用到呢?

          這時候,如果安裝幾個圖標插件,就沒有這些問題了。

          點開插件,搜索想要的圖標,選中圖標并修改尺寸和顏色,直接拖拽使用。

          國內常用的 iconify、iconfont 和 IconPark 都已有插件接入。

           

          字體方案——字由插件

          做海報、封面、banner 圖的時候,同學們應該經常會用到很多不同風格的字體。

          但經常會遇到精挑細選并下載安裝了好幾款字體后,發現用在作品里視覺效果并沒有那么好,還得重新找字體并安裝……

          面對這種情況,最省事的方式應該用類似「字由」的第三方字體插件來管理字體。

          安裝字由客戶端后,里面的字體方便查找,點一下就能激活,然后直接在設計時使用,幫我們省去了很多檢索和下載安裝字體的步驟

          這里需要提出的是,Sketch 和 XD、PS 這些本地軟件應該都是支持字由的,在線工具的話,目前只有「即時設計」支持字由,Figma 也是完全沒辦法用的。

          當然,即時設計的字體方案還是值得一說的,其實之前也提過挺多次了,“本地+云端”的多種方案,最大的亮點是:

          1. 個人設計師不止可以使用本地安裝的字體和「字由」的字體,還能免費上傳自己的字體文件到云端和其他人一起使用。

          2. 團隊的版權字體還可以直接上傳到團隊共享庫,所有團隊成員都能隨時在線使用,完全不用下載安裝。

           

          03 提供圖形配色方案的插件

          圖形生成——不規則圖形

          我經常給星球的同學們布置一些作業,而在設計過程中最常用的裝飾元素之一,就是不規則圖形,看起來簡約又高級。

          需要不規則圖形時,最常見的做法是用鋼筆工具自己畫一個,但還有更快捷的方法,用「不規則圖形」插件隨機生成斑點或者波浪。

          這類插件一般包含很多預設方案,點一下就能隨機生成。

          如果覺得隨機“搖”出來的圖形不合心意,還可以自己調節修改。斑點的錨點和曲率,波浪的高度、層數、峰數都支持自定義。

          雙擊生成的不規則圖形,還能繼續拖拽修改形狀。這么一通修改下來,只有復制粘貼才能得到兩個完全相同的圖形了。

           

          色彩使用——漸變色

          同學們在設計作品中,經常會用到漸變色,但是很多同學不擅長調出好看的漸變色,做出來的圖看起來很臟,尤其是顏色跨度較大的時候。

          這種情況下,一個收錄若干經典配色的「漸變色」插件就能幫上大忙。

          如圖我用的這個漸變色插件,就收錄了來自 WebGradients 的 180 種線型漸變配色,可以一鍵快速填充;給出的漸變色方案,也都很具備學習參考的價值。

           

          ? 色彩搭配——圖片取色

          我還找到了一個非常適合用來參考和使用色彩搭配的插件——「圖片取色」。

          優秀的攝影或設計作品中都具有極為豐富且和諧的色彩搭配,而「圖片取色」這個插件可以識別圖片中 5 種主要顏色,方便我們學習配色、汲取靈感。

          用起來也很方便,選中圖片,再點一下「圖片取色」,就能精準識別圖片中配色,并按照顏色占比依次展示。

           

          04 點一下秒安裝/卸載

          今天的插件就先分享這些了,上面的演示我都是用「即時設計」做的,Sketch、Figma 應該也都可以找到不少類似的插件。

          如果想要快速感受一下的話,可以直接打開即時設計,插件廣場里還有很多,安裝卸載也很方便,點一下就行。

          安裝完回到編輯頁面就能直接使用,展開的列表里,每個插件在名字旁邊還配有簡單易懂的圖標,一眼看過去就能更快地定位自己想要的插件。


          總結

          提高效率減少重復操作,到整合常用資源讓取用更順手,再到圖形色彩的方案提供。

          即時設計充分照顧到設計過程中最常見的一些問題,已經能滿足我大部分的需求了。

          除了已有的這些,即時設計還在持續上新,官方還表示之后也會像 Sketch、Figma 一樣開放第三方插件。

          現在只想喊他們快點開放,我已經迫不及待想看看,國內的大神能做出什么樣更好用的插件工具了!

          鏈接我放在下面了,對這些插件感興趣的同學們,可以去體驗一下~

          即時設計插件廣場:

          https://js.design/pluginSquare

           

          原文地址:菜心設計鋪(公眾號)

          作者:菜心

          轉載請注明:學UI網》太簡單了!別人要做一小時的頁面,我用這些效率插件一鍵生成

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          金剛區圖標設計的 10 大風格

          seo達人


          圖片

           

          目錄

          一、晶白風格的扁平突破

          二、磨砂玻璃質感的運用

          三、強化圖標微質感的深入

          四、2.5D 風格的巧妙結合

          五、三維的立體感強化

          六、插畫風格的簡化融入

          七、立足于品牌的圖標設計

          八、造型疊加豐富色彩搭配

          九、動效圖標強化局部差異

          十、主題化圖標風格普及

           

          一、晶白風格的扁平突破

          晶白風格是通過白色質感來實現的,通過對圖標元素進行透明度變化、投影、內陰影、外發光等進行設計,使得更有層次感。

          相較于扁平化的圖標設計來說,晶白風格更有層次感和質感,作為金剛區圖標設計運用非常普遍。除了通過白色不透明度漸變來實現以外,也會隨著背景或者環境色的變化融入色彩渲染,呈現出更豐富的設計細節。

          晶白風格圖標就是通過兩端白色漸變,配合兩端顏色不透明度來進行深淺控制,也可以通過內陰影和外發光等來增強質感。眾多設計軟件都可以實現,靈活性非常高。

          圖片

           

          二、磨砂玻璃質感的運用

          磨砂玻璃質感的設計表現是近些年較為流行的設計趨勢,被廣泛運用到視覺設計的眾多領域。在 UI場景中作為視覺感強化被普遍應用,其中在圖標設計上的表現尤為突出,呈現出了眾多的優秀案例。

          金剛區作為產品架構中的重要組成部分,也是更新較為活躍的部分,對于視覺感的要求非常重要。磨砂玻璃質感的圖標很多產品都會階段性使用,也是因為這一類風格具有典型的特點和視覺張力,能夠形成比較大的視覺差異,帶給用戶不錯的感官體驗。

          磨砂玻璃質感圖標可以通過 Sketch、Figma 等軟件的背景模糊功能實現;如果是 PS 和 AI 等沒有背景模糊功能的軟件,則可以通過模糊度結合剪切蒙版來實現。實現的方法很多,大家可以多多嘗試,這是一類比較容易掌握的圖標風格。

          圖片

           

          三、強化圖標微質感的深入

          圖標設計從寫實到扁平,再到微質感,都在不同的時期進行改變,通過風格的優化避免用戶的視覺疲勞。寫實類圖標視覺疲勞度較大,在年輕化的趨勢中顯得過于繁瑣,而介于寫實和扁平之間的微質感被深入探索。

          微質感的深入可以使得圖標風格突出,質感和層次感強化了圖標的立體空間感,在整個界面中可以形成視覺差異??梢泽w現出模塊的重要性,也是圖標設計感體現的一種方向。

          通過漸變色、不透明度漸變、投影、內陰影等形成層次變化和光影效果,多圖層刻畫來強化圖標質感和層次感。

          圖片

           

          四、2.5D 風格的巧妙結合

          2.5D 也稱之為偽三維,在前兩年非常流行,作為插畫風格延伸出來的,當時 2.5D 插畫被普遍運用到眾多領域。把一個獨立元素作為原子,通過原子的數量分布形成 2.5D 場景。

          將 2.5D 風格結合到圖標設計中,可以使得圖標更容易形成立體感,設計師不會受制于透視基礎的薄弱。無論是 C 端還是 B 端場景中的金剛區圖標都比較適合,很容易基于簡單的立體造型上設計出豐富的變化。比如結合玻璃質感、微動效或者其他設計趨勢均可,設計的駕馭度很高。

          2.5D 風格的圖標很容易掌握,只要繪制好基礎原子部分,就可以演變形成各式各樣的 2.5D 造型??梢酝ㄟ^ AI 軟件的 3D 功能輕松繪制,大部分場景都是基于立方體、圓柱體等基礎造型進行變形。

          圖片

           

          五、三維的立體感強化

          三維類的圖標設計相較于 2.5D 風格來說,空間感和透視角度更加深入,光影的變化更加豐富。圖標設計中的三維立體感強化,對于設計師的要求更高,掌握一個三維軟件需要一定的學習成本。

          隨著 C4D 等三維軟件的走熱,掀起了一股學習熱潮,被運用到金剛區圖標設計中,帶來的視覺效果也是非常不錯的。較強的空間立體感和光影效果,在界面中的視覺呈現尤為突出,也能帶給用戶更好的感官體驗。

          圖片

           

          六、插畫風格的簡化融入

          隨著用戶對于感官體驗的升級,風格特征的差異化體驗至關重要,而插畫風格的融入可以提升圖標設計的特征感。

          插畫風格運用到圖標設計中,需要做簡化處理,可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續到圖標中,不僅可以使得圖標具備差異化的視覺效果,也能烘托出整體設計的質量。

          通常矢量風格的插畫類圖標比較常用,由于圖標占比限制,不合適表現特別繁瑣的插畫風格??梢允俏鼍暗牟瀹嫳憩F,或者是局部元素的插畫表達,這一類圖標風格將會在未來被廣泛運用,以此來提高圖標設計的視覺差異化表達。

          圖片

           

          七、立足于品牌的圖標設計

          立足于品牌做設計,這是設計師需要深入探索的方向,而金剛區圖標設計亦是如此。品牌基因融入到圖標設計中,可以輔助突出產品的品牌感,也能形成設計表達的差異化。

          品牌基因化的圖標設計具備一定的特征性,也是視覺差異化的一種形式。通常的做法有將品牌色全部融入圖標中,或者品牌色作為圖標配色點綴;也可以提取品牌 LOGO 輔助圖形形成基因圖形,融入到圖標造型設計中;也有結合吉祥物來突出品牌感的,融入吉祥物造型、局部圖形、輪廓圖形等;如果圖形角度無法提煉,也有提取品牌文化、服務特征、用戶群體特征、行業特征等,從中提煉關聯性的圖形融入圖標設計中,以此來強化品牌感。

          品牌作為設計的思考起點,不僅可以輸出差異化的設計作品,也能串聯起整個項目設計的規范。

          圖片

           

          八、造型疊加豐富色彩搭配

          如果覺得質感一類圖標表現力比較繁瑣,但是又不想只是簡單的線性或者面性圖標,造型疊加和配色疊加形成的圖標風格算是介于兩者之間的存在。

          通過圖形之間疊加豐富圖標造型,疊加部分配色的調節豐富圖標色彩搭配,形成的圖標風格比較年輕化。視覺效果也是深受年輕用戶的喜歡,帶來不錯的感官體驗。

          這一類風格的圖標可以通過布爾運算設計圖形部分,顏色的疊加效果可以通過圖層樣式實現,也有一些是圖形分割之后進行分別著色的。通常疊加部分的顏色會往更深的方向延伸,大家可以嘗試不同的形式去進行配色,選擇符合主題的圖標配色效果。

          圖片

           

          九、動效圖標強化局部差異

          微動效運用到圖標設計中尤為普及,特別是在金剛區模塊,可以作為突出功能的強化。動效圖標已經成為一種獨特的表現力,相較于靜態來說更有吸引力,也能帶給用戶更加趣味性的感官體驗。

          在金剛區模塊中,動效圖標通常是用于區別特殊功能,或者需要重點突出的服務或者主題活動等。不改變整體圖標的風格,只是動態和靜態的區分,需要個別做動效,形成表現力的差異才能達到重點突出的目的。

          作為設計師來說,動效也是需要掌握的基礎技能,可以提高我們的設計表現力,也能將交互動作表達得更清楚。

          圖片

          圖片

           

          十、主題化圖標風格普及

          隨著情感化設計的普及,金剛區圖標在特定主題節日也會進行氛圍強化,主題化圖標設計越來越多。

          比如在春節、中秋節、國慶節、端午節等場景中,根據主題設計圖標更能體現我們是有溫度的產品??梢允侵黝}元素的融入,或者主題氛圍感的渲染,要嘛就是主題文案的融入,形式已經是非常豐富了。雖然不同節日主題效果各有差異,不過這一類主題化的圖標設計,已經成為非常普及的風格特征。

          除了節日主題以外,根據運營需求也會進行主題化強化,眾多自定義主題活動也會結合到金剛區圖標設計中。這一類視覺表現力比重較大,視覺感統一性較強,帶來的視覺張力和感官體驗都非常不錯。

          圖片

           

          小結

          金剛區在產品中就像百變金剛一樣,隨著眾多因素而變化,是更新迭代較為活躍的。圖標設計的風格也是豐富多樣,本文僅是拋磚引玉,總結了 10 個較為流行的圖標設計風格或者趨勢。

          希望這些案例總結可以加深大家對于金剛區圖標的風格認知,大家也要繼續體驗探索,總結出更多風格特征,強化我們的圖標設計能力。

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》金剛區圖標設計的 10 大風格

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          構圖太常規?教你一個過稿率超高的構圖技巧

          seo達人

          很多平面設計作品都喜歡用幾何圖形來進行構圖,比如把畫面布局在一個幾何圖形內,或者用一個幾何圖形與畫面主體元素進行組合。

          圖片

          圖片

          圖片

           

          一、這種構圖有幾大優點:

          1.能使畫面更整體、更聚焦。

          把畫面控制在一個幾何圖形內,就好比用柵欄把羊群圍了起來,各元素可活動的范圍縮小了,外輪廓變得更簡單了,畫面自然會更整體、更聚焦。

          圖片

           

          2.加強畫面視覺沖擊力

          幾何圖形內的圖形集中區域,與幾何圖形外的留白可以形成強烈的虛實對比、輪廓對比、色彩對比等,故視覺沖擊力可以進一步加強。

          圖片

           

          3.增強形式感

          如果畫面的元素比較單一,而且也不是很有創意和特色,那么形式感和設計感往往會比較弱,而如果用幾何圖形進行構圖,通常會對原有的圖形進行裁切或規范,畫面就會變得沒有之前那么普通。

          圖片

           

          4.減少創作時間

          這一點在插畫作品中尤為明顯,如果采用全屏式構圖,那么設計師就得把整個矩形畫布都畫滿素材,但是如果用幾何圖形構圖,那么重點展示主體區域就好,沒有足夠的空間展示太多輔助的元素和場景,所以可以省去很多創作時間。

          圖片

           

          5.便于文案排版

          對于一些文案比較多的畫面,如果畫面布局太慢,那么文案的排版就會比較麻煩,如果把文案壓在畫面上排版,既會破壞畫面的美觀性,也會影響文字的識別性。

          圖片

           

          二、常用的幾何圖形

          1.圓形

          圓形是最常用于構圖的幾何圖形,因為圓形本身就是一個很完美的圖形,美觀、平衡且聚焦性強,圓形與矩形的版面也能形成鮮明對比。

          圖片

          圖片

           

          2.圓環形

          圓環的內部空間比較小,所以適合素材比較多的情況,也常常會配合圓形一同使用。

          圖片

           

          3.半圓形

          半圓雖然沒有圓形那么好看,但是更特別、更平穩。

          圖片

          圖片

           

          4.橢圓形

          由于正圓在很多時候并不適合展現某些畫面,這時候橢圓也是一個不錯的選擇。

          圖片

          圖片

           

          5.圓角矩形

          圓角矩形融合了矩形和圓形的一些優點,既不會像矩形那么硬朗和常規,也比圓形更靈活,更能適應不同的畫面需求。

          圖片

          圖片

           

          6.菱形

          菱形的感覺比較尖銳,適合一些科技屬性比較強的風格和品牌。

          圖片

          圖片

           

          7.三角形

          三角形與菱形一樣,也具有較強的科技屬性,且通常會用到三角形而不是正三角形,因為正三角形過于平穩,缺少動感。

          圖片

          圖片

          圖片

           

          8.其他圖形

          圖片

          圖片

          圖片

           

          三、注意事項:

          1.根據畫面特點選擇合適的幾何圖形

          首先,每一類幾何圖形都有一定的調性偏向,所以要根據自己的產品調性和主體調性來選擇一些氣質合適的圖形,例如母親節、清明節的海報用三角形來構圖就不太合適。

          圖片

           

          其次,如果想把現有的畫面用一個幾何圖形進行剪切,那么這個圖形最好能夠比較完美地保留畫面的主體部分,同時也要保證該幾何圖形內的構圖是飽滿的、平衡的。

          圖片

           

          2.關于“破”的處理要節制

          用幾何圖形進行構圖時,大多數情況下都可以使用“破”的處理方式,即讓圖形內的部分元素打破圖形限制,這可以使畫面看起來更活潑。但也要節制。

          避免過多元素使用“破”的處理,否則畫面容易變得凌亂、不聚焦。

          圖片

           

           

          不是所有采用幾何圖形構圖的畫面都要使用“破”技巧。對于一些很簡約、調性比較高級、畫面是攝影圖片的設計,通常不太適合使用該技巧。

          圖片

          圖片

           

          3.排版可以呼應幾何圖形

          為了避免文字排版與圖形完全是割裂的,我們可以在排版時與幾何圖形形成呼應,比如用文字繞著圖形排版。

          圖片

          圖片

           

          或者是把文字與圖形交叉排版。

          圖片

          圖片

          圖片

          原文地址:蔥爺(公眾號)

          作者:蔥爺

          轉載請注明:學UI網》構圖太常規?教你一個過稿率超高的構圖技巧

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          近期輸出的一些UI設計探索作品

          seo達人

          軟件:Sketch & Adobe Illustrator

          圖片  

          以下作品主要是練習通過 Sketch & Adobe Illustrator 軟件配合實現立體圖標設計,掌握通過色彩的變化營造質感和光感。 

          圖片
          圖片 

          以下作品主要是練習圓柱體的繪制和光影的處理,以此來表現排行榜。配色比較趨向于年輕化,青春活潑的風格探索年輕化的設計趨勢。

          圖片
          圖片 

          這一組作品主要是研究極光風的配色和磨砂玻璃效果的結合,用磨砂玻璃層作為圖標的保護罩,帶來朦朧美的感官體驗。

          圖片
          圖片
          圖片
          圖片 

          隨著網民年輕化的趨勢,UI設計也逐漸趨近于更加青春活潑的風格。探索了一組低飽和度高明度的圖標配色,利用不透明度漸變實現晶白風格圖標。

          圖片
          圖片 

          這是在五一假期前繪制的一個相機 APP LOGO,探索多色環形組合來進行色感營造,利用簡單的內陰影和蒙版工具刻畫效果。

          圖片 

          一組帶給大家好心情的 IP 表情設計作品,超橢圓的造型和青春可愛的風格結合,練習表情設計的能力和光影把控的技巧。情感化設計的技能被逐步放大,也是提高作品亮點和視覺感的一個不錯的方向。

          圖片
          圖片 

          想要休息的時候來了一個靈感,大家都喜歡喝咖啡,我還是比較喜歡喝茶~O(∩_∩)O哈哈~有感而發繪制了一個關于茶的 APP LOGO。

          圖片 

          帶有紋理的球體繪制,你可以想象這是一個瑜伽球。利用 AI 軟件的 3D 功能進行造型繪制,然后利用 Sketch 軟件進行質感細節的刻畫完成。

          圖片 

          這組作品主要是研究 B 端設計的柵格化系統,以及配色風格的嘗試。隨著 B 端 C 化的趨勢,在 UI設計層面的風格探索中,將會變得更為大膽,突破風格定義的束縛。

          圖片
          圖片
          圖片
          圖片
          圖片
          圖片 

          以上是近期輸出的一些 UI設計探索作品,后期將會繼續探索更多設計風格和細節的刻畫。

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》近期輸出的一些UI設計探索作品

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          數字盲盒|在虛擬世界探索「盒」的邊界

          純純

          “生活就像是一顆巧克力,你永遠不知道下一顆是什么滋味?!泵ず械恼Q生,給“box”的意象又增加了一份神秘。2020年作為大眾廣為人知的盲盒元年,隨著12月第一支“盲盒股”在港交所掛牌上市,盲盒零售店和自動盲盒機都如雨后春筍一般席卷了大小消費集散地。抽盲盒、買盲盒、再到次級市場交易盲盒,一個百億盲盒市場被快速“拆”了出來。


          從潘多拉的墨盒、薛定諤的貓,再到盲盒的隱藏款,“抽盒”在搭上潮玩這趟商業快車的同時,也在不斷試探年輕的好奇心和為此豪擲千金的底線。根據《95一樣玩家剁手力榜單》顯示,收藏盲盒手辦從最開始的“亞文化”消費,已經成為當下95后熱度最高的收藏愛好。也不難理解,盲盒低至50-80元的單價,和Z世代年輕人群體逐漸下沉的消費趨勢一拍即合。而搭載了游戲及商業IP的盲盒,除了有得天獨厚的爆款產出特性,也在更多方面和更高層次上滿足Z世代年輕人的好奇心、收集欲并拓展了線下社交的可能性。


          那么同樣備受年輕人喜愛的社交產品手Q,在這趟“萬物皆可盲盒”的浪潮中,又可以扮演怎樣的角色呢?我們給出的答案是:數字盲盒。借助平臺已有的大量IP,數字盲盒相比線下實體盲盒搭乘IP紅利的成本更低,推陳出新,以速度和“量”取勝是一大優勢。同時,我們也希望以日簽打卡的方式,在滿足手Q、Z世代用戶收集欲望的同時,打造一種基于線下盲盒收集但同時潛在拓展數字“盲盒”社交的新玩法。




          01

          ——————————

          從線下到線上


          在傳承線下玩法的同時打造線上盲盒新玩法,則需要考慮到許多問題。我們留意到,線下盲盒有許多優勢是無法照搬的,比如實體盲盒的觸感,購買、拆開實體盲盒所獲得的即時心理反饋等。但盲盒的核心特點,就在于它給普通的商品增加了游戲屬性。


          因此,我們也嘗試通過挖掘虛擬盲盒的獨特之處,保留并增添整個抽盒過程的娛樂性和驚喜。從設計層面而言,我們從一下三個角度切入構思:


          1) IP:篩選線下盲盒成功案例,敲定以Q萌的盲盒為主推IP;并且線上盲盒可以實現短平快上架IP,結合時效熱點,孵化出更出圈的虛擬IP。

          2) 包裝:趨同于線下盲盒包裝,繼承實體盲盒的視覺審美體驗;線下盲盒受包裝成本所限,線上盲盒可以打磨出更新穎的盲盒包裝。

          3) 隱藏玩法:同步線下盲盒玩法邏輯,采用N+1的種類形式,在每套盲盒系列中設定一個隱藏款。在用戶抽盒過程中,整套盲盒以動畫輪播的方式呈現,隱藏款則用問號代替,驅動玩家好奇心。并且依附QQ關系鏈,引導用戶交換已經擁有的重復盲盒,從而收集整套端盒。




          02

          ————————

          IP|重中之重


          主打IP對品牌形象的構造有至關重要的作用。這種重要性不外乎企鵝之與手Q,因此敲定、完善頭部IP,是設計手Q虛擬盲盒的首要考慮。在設計的首個階段,我們選定了四類優質虛擬盲盒IP:


          1) 自有潮玩IP:選擇現有ISUX體系下已孵化成熟的精品潮玩IP,比如PUPU&藍莓之夜,UPUP牛&牛年大吉等;

          2) 自有虛擬IP:在手Q用戶群中知名度高、在禮物系統中受到粉絲熱捧的IP。比如多肉植物、Alice夢游仙境系列等;

          3) 外部虛擬IP:聯名外部爆款IP。手Q以95后年輕用戶為主,也是外部各大爆款IP的目標消費者聚集地。因此我們挖掘了包括超人氣虛擬偶像洛天依,迪士尼的達菲熊&星黛露春節系列在內的外部IP合作;

          4) 外部潮玩IP:擁抱主流盲盒潮玩IP,將消費者粉絲與盲盒的情感從線下延續至線上。知名IP包括star moly萌力星球、迷萌假日派對、達么吉發財者聯盟系列等。


          敲定IP方向后,我們綜合了幾個方面考慮虛擬盲盒的IP設計和上架思路:


          1) 目標匹配度:IP是否和手Q用戶群體產生足夠的共鳴;

          2) 品牌定位:IP是否和虛擬盲盒平臺的風格、氛圍及調性協調一致;

          3) 制作成本:在估算虛擬盲盒IP生命周期的基礎上,是否能以較低的設計、生產及修改成本進行批量生產。




          03

          ——————————

          「盒」再一次定義視覺邊界


          “從Box出發”這一理念,也淋漓盡致地體現在數字盲盒視覺設定的方方面面。


          03-1 LOGO

          在logo設定上,我們將“盒”的意象與字母Q的形態相結合,并充分考慮移動端設備屏幕的呈現空間,以30度的軸測圖視角構建出一個正方形的盒子。這樣既突顯了logo的存在感,又給整個視覺界面留出了充足的展示空間。同時,logo三維六邊形的框架設計,也突出了產品的格調和設計感。




          03-2 色彩&字體

          在配色設定方面,我們提取傳統線下盲盒品牌中核心玩家廣泛認可的粉色,也從QQ品牌色中提取出藍色,調和出一種明度更深的藍色作為互補色。字體設定上,我們選擇了造字工房元黑體搭配DIN的家族字體作為虛擬盲盒平臺的運營字體。這款字體字形較為硬朗粗壯,但同時又兼顧圓角的設定,符合虛擬盲盒品牌“活潑,潮流,可愛”的氣質定位。





          03-3 Pattern

          同時,我們在平臺界面的視覺方面也延續logo的設計思路,通過使用30度軸測圖的空間正方形,衍生為基礎圖形并在不同頁面中配合主題品牌色使用。同時,該基礎圖形也在虛擬盲盒的其他頁面結合產品形態靈活變形,強化虛擬盲盒品牌形象。


          “盒”的涉及理念也延展到頁面的涉及思路中。在抽盒延展上,我們基于30度平行透視的設計理念進行了一系列構思。首先在抽盒頁面,我們將頁面簡單分割為上下兩個部分。盒內產品放置在一個通過透視視角構建出的“桌面”上,并通過動畫進行進行系列產品展示。頁面下半部分則用于信息及其他相關操作。



          03-4 界面應用

          在ARK傳播、用戶贈送虛擬盲盒的界面,我們也利用30度平行透視的涉及思路,在分享卡片中對虛擬盲盒及相關產品進行了空間視覺處理。此外,貫穿始終的純色背景在突出盲盒產品本身的前提下,也保證了整體風格的一致性。




          03-5 盲盒包裝


          在包裝設定上,我們延續線下盲盒常規的視覺慣例,以“盒”的形式進行產品包裝,并以logo的30度側軸圖作為基礎預覽視角。眾所周知,雖然線下盲盒的包裝五花八門,比如浮雕、專色印刷,但最終還是落腳到“紙本”這一包裝形式。相比之下,虛擬盲盒包裝不受制作成本限制,發揮空間就更為廣闊。在此基礎上,我們將虛擬盲盒的包裝設計成具有磨砂質感的毛玻璃材質。這一設計不僅讓虛擬盲盒更有視覺沖擊力和格調,同時霧化的透明磨砂表面也可以隱隱透露出盒內產品的輪廓和顏色,勾起用戶抽盒過程中的緊張好奇情緒。


          在此基礎上,每個盲盒配合各系列的IP字體、規范化的系列編號、品牌LOGO和IP色,則可以高效統一IP形象,規范化輸出系列盲盒包裝。





          04

          ——————————

          讓「盒」動起來


          完成了盲盒靜態視覺的構思后,就進入了動畫設定的階段。我們將抽盒UI中的動畫種類大致分為三種:


          一、 輔助型循環動畫:限制較少的頁面動畫,主要目的是烘托抽盒界面的氛圍。


          二、 輔助操作的反饋型動畫:主要為用戶抽盒后喚醒的交互動畫,增強抽盒結果的用戶心理反饋。由于此類動畫基于用戶操作觸發,因此時長限制較為嚴格。動畫過長會直接減緩載入速度,消耗用戶等待時長,適得其反。


          三、 載入動畫:動畫形式簡單,主要目的是在等待的過程中加入趣味的細節,動畫資源要保證盡可能小。界面設計繼承品牌圖形設計思路,風格統一。



          抽盒頁面的設計是整個虛擬盲盒設計的重中之重。這就要求設計師既突出展示盲盒產品本身,又保證抽盒界面的趣味性。在底層動畫中,我們繼續延續30度平行透視視角的設計邏輯,使用After Effects的攝像機工具以Y軸旋轉的方式做成Fake 3D的效果。在制作Fake 3D動畫時,我們也使用了Lottie組件。Lottie組件的優勢在于在實現動畫高保真還原的同時,也可以通過在AE內替換對應素材即可在統一標準下實現量化輸出,規范后續動畫生產標準,提高生產效率,降低設計成本。


          在底層動畫上,我們也加入了四層動畫進行功能和效果的區分。在疊加的首層動畫上,我們對每套虛擬盲盒的所有產品進行了展示,進一步加深用戶對可能拆出的盲盒產品的期待心理。在第二層和第三層動畫上,我們以Z軸旋轉的動畫特效,將虛擬盲盒進行一種立體的空間感展示,并使用粒子效果配合光環旋轉的動畫特效環繞虛擬盲盒,引導用戶的點擊路徑。同時在最頂層,也就是第四層動畫,我們還加入了手Q具有代表性的大黃臉表情,并賦予它彈跳和位移的效果,增添抽盒界面的趣味性。



          但在盲盒抽取結果動畫設計方面,我們在項目前期的嘗試中就遇到一個難題——拆盒動畫最重要的部分就是盒子打開并告知用戶抽中了哪款盲盒。如果每一個抽盒結果都配置不同的動畫,那么單獨一套盲盒“UPUP牛&牛年限定鵝”,將至少需要設計六種盲盒結果動畫,不同系列的盲盒的動畫設計成本也將成幾何倍數增加。


          因此我們需要找到一種盡可能控制開發資源和成本,同時又不拘泥于盲盒IP類型和風格的通用方案。我們設計了一款拆盒動畫作為底層素材,并且搭配放大效果和粒子碎花下落的“撒花”慶祝的氛圍特效,最終制作出一段不超過800ms的物品從盒子“蹦出”的效果動畫,流暢處理了抽盒結果的過場動畫,也完善了整個虛擬盲盒的抽取邏輯。



          暢想:未來|無限延伸的「盒」

          本次虛擬盲盒的設計項目時間緊,需要趕在年前新版本發布之前敲定設計細節。因此設計的重點和難點,就是需要找出一個和品牌強關聯的視覺元素,提綱挈領地引導整個視覺設計方案。而我們給出的30度軸測圖視角,就成功給予了虛擬盲盒空間的概念,并將這一設計細節靈活貫穿項目始終。此外,一些視覺類設計比如盲盒Z軸旋轉,也需要從視覺設計師的視角出發,提前通過和包括開發在內的相關項目團隊進行對接,給予解決方案。這在很大程度上也節約了人力成本,推動了項目的快速落地。


          而在整個虛擬盲盒的設計過程中我們也反復思考,如何通過打磨虛擬盲盒的特點和亮點,實現超過線下抽盒的體驗。比如在一開始就提到,線下盲盒從項目創立、建模、工廠生產打樣、后期形態修正再經過一系列生產運輸到達消費者面前,時間長、成本高。而相比之下,虛擬盲盒則在抓熱點、做爆款上具備得天獨厚的優勢。通過和潮流IP快節奏展開合作,在短期內提升影響力及曝光度,觸達大批潛在受眾。


          與此同時,我們也體現出虛擬盲盒的亮點.在一些特性上做到超過線下抽盲盒體驗


          盲盒IP選擇,在線下盲盒運營策略中,從項目立項到設計師創意建模再到工廠生產打樣,反復修正盲盒最終的形態,下線生產物流到消費者面前,是一個非常冗長的過程。相比線上盲盒的節奏則會輕盈很多,我們在線上虛擬盲盒中發揮特點,篩選出一些時效性強,熱度高的IP,快速制作素材上架虛擬盲盒平臺。以「創造營2021」為例,線上盲盒可以在最短時間內響應熱點,制作出短時間內出團成員的IP素材并且上架虛擬盲盒平臺,這些都是線下盲盒所無法觸及的。


          盲盒潮玩是z世代身邊最熱門的話題之一,消費主義浪潮過后,人們從新審視「盲盒」的價值意義,未嘗不是一件好事。虛擬盲盒固然無法代替真實盲盒帶來的重量和觸摸手感,但是現實盲盒潮玩逃不開工業化的生產成本,虛擬盲盒平臺通過有低成本扁平化的策略,有溫度的情感化設計,和用戶建立起來另一種連接。

          原文地址:站酷
          作者:騰訊ISUX

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          高效動畫解決方案

          純純

          在終端APP中,動畫非常常見,它可以輔助視覺制造焦點,同時也可以讓用戶交互更加順滑,但動畫的實現卻是設計師和研發群體的一個痛點。如何輔助設計師設計高性能炫酷的動畫、如何將設計師設計的動畫準確無誤的還原到終端APP上是業界不斷探索和解決的問題。


          圖1 傳統動畫實現流程圖


          當前最好的動畫設計軟件是Adobe After Effects(簡稱AE),從AE動畫制作到終端APP呈現,傳統的實現方式如圖1所示,有三大痛點:實現成本高、溝通成本高和性能難以保證。


          近幾年,業界誕生了像Lottie、SVGA這樣的動畫工作流解決方案,雖然在一定程度上提升了生產效率,但存在AE支持能力有限、動畫性能難以保證、配套工具支持有限的問題。


          1 :PAG解決的問題

          ——————————

          PAG(Portable Animated Graphics)是騰訊PCG發布器中臺自主研發的一套完整的動畫工作流解決方案,助力于將AE動畫方便快捷的應用于各平臺終端。PAG的流程圖如圖2所示,設計師在AE上設計出動畫后,可以通過導出插件導出pag文件,同時PAG提供了桌面端預覽工具,支持實時預覽效果,在確認效果后,通過運行配置上線,各平臺終端可以通過PAG SDK加載渲染pag動畫。


          圖2 PAG動畫工作流流程圖



          與Lottie、SVGA相比,PAG增加支持了服務端。除此之外,如圖3所示,PAG動畫方案在導出動畫文件大小、AE特性支持和可編輯性方面具有較大的優勢。


          圖3 PAG和Lottie對比圖


          2: PAG支持的AE特性能力

          ——————————

          2.1 矢量特性能力的支持

          和Lottie、SVGA實現不同的是,PAG不依賴平臺端渲染接口,可以實現各平臺的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。


          2.2 BMP預合成--全AE特性支持

          無論是PAG還是Lottie、SVGA,所支持的AE特性僅僅是AE眾多特性中的很少的一部分,這在一定程度上限制了設計師的創造力。針對這個問題,PAG新增了BMP預合成的導出方式,支持導出所有AE特性,適用于不可編輯的場景。其原理如圖4所示,在合成的層面將渲染結果截取成圖片,然后進行視頻編碼。

          圖 4 BMP預合成原理圖



          針對視頻不支持透明通道而動畫需要包含透明通道的問題,在編碼的層面擴展了透明通道的支持,如圖5所示。


          圖6 PAG矢量和BMP預合成混合導出




          3: PAG導出插件

          ——————————

          3.1 不支持AE特性提示

          針對導出動畫和AE設計動畫存在偏差的問題,PAG導出插件增加了使用了不支持AE特性提醒功能,如下圖7所示。

          圖7 PAG導出面板


          在預覽界面,同樣有不支持特性的提示,如圖8所示。

          圖8 PAG導出面板預覽窗口


          在使用AE設計動畫的過程中,設計師可以方便快捷的提前查看使用了那些不支持直接導出的AE特性,換種實現方式或者導出成BMP預合成,有效的解決了設計動畫和導出動畫存在偏差的問題。


          3.2 BMP預合成一鍵設置

          在AE動畫設計的過程中,PAG導出面板提供了一鍵設置BMP預合成的方法,如下圖9所示。需要提示的是,一旦設置了BMP預合成,該合成中的文本和圖片將不能再被用戶編輯。


          圖9 BMP 預合成設置


          由于BMP預合成可能會影響到可替換圖片的數量,PAG同時會實時更新可替換圖片的數量給設計以提示。


          3.3 圖片填充模式設置

          在用pag設置的素材中,經常會遇到用戶填充的圖片與默認占位圖尺寸不一致的情況,在導出面板中PAG增加圖片填充的四個規則,如圖10所示:


          圖10 可替換圖片填充設置



          其中:


          不縮放:畫面不縮放,從左上角位置開始裁剪


          黑邊:在保持高寬比的情況下縮放到設備的可用屏幕大小,圖像不發生變形,如果圖片尺寸和填充區域比例不一致,會出現黑邊,為默認填充模式


          拉伸:不保持寬高比填充,會發生失變形


          裁剪:在保持高寬比的情況下縮放到完全填滿可用的屏幕大小


          具體效果如圖11所示。


          圖11 圖片填充效果圖


          4桌面預覽工具PAGViewer

          ——————————

          4.1 效果預覽

          PAGViewer支持桌面端預覽PAG文件動畫效果,如下圖所示。支持查看動畫文件中包含有多少個可編輯文本和可編輯圖片,且支持設計師本地填充素材,實時預覽填充效果,無需等待上線后才能確認真實效果。圖片占位圖支持填充圖片或視頻,如果PAG文件內置了音頻文件,支持播放音頻效果。具體效果如圖12所示。

          圖12 PAG效果預覽



          4.2 性能檢測

          在pag動畫實際使用的過程中,PAG經常遇到的問題是設計師辛辛苦苦設計的動畫在終端上性能表現不佳,需要進行返工優化,同樣的問題在使用Lottie方案時候也會存在。


          除了效果預覽,PAGViewer還增加了性能展示面板,可以很方便的看到pag動畫的基本信息,如時長、幀率、尺寸、bmp預合成的數量,圖層總數等,還有量化的性能指標,定量的評估pag文件的性能,如圖13所示,方便設計師進行針對性的優化,而不需要等到上線前才會暴露性能問題。具體效果如圖13所示。


          圖13 PAG性能展示面板




          5: PAG的應用場景

          目前PAG方案已經廣泛應用于騰訊公司內外幾十款產品中,涵蓋了眾多的國民級應用。



          總結下來,PAG目前主要使用在以下幾大場景:


          5.1 UI動畫

          圖15 UI動畫場景


          設計師設計出動畫文件后,研發只需要替換預設的文本內容即可,并且文件體積非常小。


          5.2 貼紙動畫

          圖16 貼紙動畫場景


          5.3 照片/視頻模板

          圖17 照片/視頻模板場景


          PAG支持將內置的圖片作為占位圖替換,并保留所有動畫效果。因此可以將整個PAG動畫設計成一個模板,把預設的占位圖替換成用戶選取的照片,自動套用效果生成視頻。全程可以讓設計師自由批量生產模板,無需研發介入。


          仍然基于圖片替換原理,PAG也支持將占位圖替換為視頻,實現視頻模板功能。



          5.4 智能剪輯

          圖18 智能剪輯場景


          智能剪輯是圍繞用戶上傳的視頻內容,生成定制化的模板,模板本身是不固定的,可以從多個PAG文件組合而成,類似活字印刷。設計師可以利用這個特性,構建自己的特效組件庫,然后對接AI的識別能力,根據一定規則組合得到無限數量的模板效果,可以做到一鍵出片。這塊目前的典型應用場景是王者榮耀的周戰報功能,隨機生成游戲高光時刻視頻。

          原文地址:站酷
          作者:騰訊ISUX

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          日歷

          鏈接

          個人資料

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

          存檔

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