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

          首頁

          沒想到用上圓形后,設計感瞬間強了很多!

          lanlanwork


          1.圓的線性語言

          圖片

          線性圓形,它的粗細可自由變化,根據當前設計語言的風格調性特征決定的。線性圓形的作用絕大部分都是裝飾,豐富畫面視覺感官,它們大多情況下都是以單色或者黑白灰出現。

          圖片

          如果我們把上圖的圓形線條去掉,設計感自然就弱幾分。當然如果非要去掉也不會影響閱讀,有了圓形形式感自然增強許多。

          圖片

          LOGO符號應用,變為粗線條

          圖片

          UI界面中應用圓形

           

          2.圓形的漸變語言

          漸變圓形基本都是以粗塊面為主,它可以呈現出豐富細膩的質感、厚度、虛實變化的光影。

          圖片

          Sedigas

           

          西班牙天然氣協會Sedigas的品牌LOGO更新,通過圓形設計語言提取,在多場景下貫穿圓形的應用。

          Sedigas(可點擊圖片查看視頻或 點擊Sedigas查看原文中內視頻)

           

          在品牌視覺語言動態介紹過程中,我們可以看到圓形的應用和豐富的變化,圓形與物理世界萬物連接。

          來看看其他案例

          圖片

          圖片

           

          3.圓形面的特征

          當圓形以塊面的姿態出現時,它更隨和,更加溫潤。塊面的圓形和線性的不一樣,塊面圓形更加厚實,整體性,更聚焦。大部分情況下作為背景或者承載內容的容器。

          圖片

          UI界面中,有時候圓形也可作為功能承載,操作區域更直觀可視化。

          圖片

          當以時裝飾元素使用, 圓形一般都會用作強調一些重要信息,同時也增加設計形式感,張力,可玩性。

          圖片

          圖片

          圖片

           

          4.圓形參數化特征

          參數化圓形,它簡單純粹,以一種單一形態不斷重復幾個甚至幾十個上百個的相同的形態,這些重復出現的圓形,大部分都是以裝飾視覺效果呈現。

          圖片

          我們可以看到大部分圓形以線性姿態不斷重復,而且重復中帶有規律可循,比如朝著某個方向拓展開,這個方向可以是斜方向、水平或者垂直。

          圖片

          以同心圓的方式向外計算擴散開。

          圖片

          圖片

          圖片

           

          5.圓形的肌理

          上面我們講到了圓的線,塊面圓、參數化形態和漸變特征,那么在最后這個模塊,我們可以看到圓形還有一種特殊的存在,那就是肌理,這里說的肌理不是貼圖的那種材質,而是通過幾何演變來實現的,比如通過多條線的組合而形成,下面來看看。

          圖片

          上圖的圓形,由多個長條幾何形狀不斷重復形成,這些重復幾何條狀物就形成了一個大圓形的肌理視覺特征。

          圖片

          右上角圓形線性陣列,通過重復小短線條而形成,在一些特殊場景下,這種陣列圓形圖還可以用來打造視覺記憶點或者品牌DNA序列。

          圖片

          圖片

          圓形應用遠遠不止這些,比如還有立體、真實物理質感,還有多形態、空間感營造等等。

           

          今天列舉出來的這5種形態是我們設計中常用,不過在使用時候還是需要依據產品視覺調性合理應用,形式要追隨功能。

          原文地址:友設青年(公眾號)

          轉載請注明:學UI網》沒想到用上圓形后,設計感瞬間強了很多!

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

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

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

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

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


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

          lanlanwork


          一、日常積累

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

          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|設計清單

          圖片

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

          地址: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咨詢、用戶體驗公司、軟件界面設計公司



          B端產品-StreamLake-RTC

          lanlanwork



          (本作品所有數據均為Demo演示,非真實數據,知識產權屬快手所有,未經許可不得轉載)

          (本作品所有數據均為Demo演示,非真實數據,知識產權屬快手所有,未經許可不得轉載)

           

          原文地址:站酷
          作者:三魚先生

          轉載請注明:學UI網》B端產品-StreamLake-RTC

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

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

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

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

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



          B端產品-BI分析工具

          lanlanwork


          (本作品所有數據均已脫敏,非真實數據,知識產權屬快手所有,未經許可不得轉載)

          (本作品所有數據均已脫敏,非真實數據,知識產權屬快手所有,未經許可不得轉載)

           

          原文地址:站酷
          作者:三魚先生

          轉載請注明:學UI網》B端產品-BI分析工具

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

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

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

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

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


          8個AI技能給你的LOGO加BUFF!

          lanlanwork


           

          圖片

          像這樣的夢幻色彩的 LOGO 是怎么做出來的?其實非常非常簡單,它的制作方法,沒有任何感情全靠 AI 技能。能夠熟練掌握 AI 工具對我們做 LOGO 的效率也會有大步的提升。今天我們就來分析一下如何借助 AI 的工具技能來設計 LOGO。

           

          圖片

          我們都知道 PS 的圖層混合模式有使當前圖層圖像的色彩與下層圖像的色彩進行混合的效果。很多同學不知道其實 AI 也有這個功能。在(窗口——透明度)里面就可以找到。

          圖片

          那現在我們就來分析一下這個 LOGO 是如何使用漸變的混合模式完成的。

          首先仔細觀察這個 LOGO 由哪些元素組成。是由幾個小房子形狀的幾何圖形,以不同透明度的漸變色彩疊壓組成。其中的重點是色塊疊壓處的色彩是混合而成。

           

           

          圖片

          圖片

          圖形來源于網絡,版權歸原作者所有,本文借用分析AI技法 

           

          第一步:先繪制出一個小房子形狀,使用傾斜工具做出透視效果。

          圖片

          第二步:打開效果——扭曲和變換——變換,調整數值。

          圖片

          到這里圖形就繪制完了,可以開始上色了。

          第三步:先把圖形取消編組,給圖形填充漸變色后調整透明度為 50%。將混合模式調整為正片疊底。(下圖展示的導出的漸變色圖片失真了,實際上是很絲滑的顏色)

          圖片

          第四步:因為紅色與藍色疊加的關系,導致圖形的中間有些暗,我們可以給圖形添加一個高光。繪制一個圓形執行高斯模糊,將混合模式改為濾色,調整透明度讓高光更通透。

          圖片

          最后,再加上排版就完成啦。

          圖片

          看到這里是不是就明白了夢幻色彩是怎么做出來的了。其實就是不同顏色的漸變色塊的混合疊加。再按照物體的身體結構疊加上高光和陰影就可以了。是不是很簡單。

           

           

           

          圖片

          圖片

          第一步:將圖形分成塊面。注意需要按照動物的生長結構去劃分 ,塊面的大小不要相差太大,不然會形成特別空的面。

          圖片

          第二步:將每個塊面填充漸變色,漸變色需要設置為混合模式。具體使用哪種混合模式需要按照混合模式的規律進行調整。塊面與塊面相交處還需要注意銜接自然,可以通過調整漸變的角度和透明度的方式進行過渡。

          圖片

          第三步:給色塊添加多彩漸變形成亮面和高光。如果一層不夠就多添加幾層,一直到色彩多變又整體協調。

          圖片

          第四步:給色塊添加陰影和暗面,讓圖形的色彩更通透。注意色彩混合模式需要調整,具體選擇哪個模式由底色和新色塊疊加后的效果決定。可以多個嘗試模式對比,最終選擇一個更合適的模式。

          圖片

          最后,把比較空的面填充一些細節,既填補了的空間又有一種動物毛發的感覺。再畫出眼睛就完成啦。

          圖片

          說起來不難,做的時候還是有點麻煩的,幾乎每個色塊都疊加了五六層漸變。最后看一下漸變疊加的動圖,可能會更直觀一些。

          圖片

           

           

          圖片

          有時候做完圖形卻覺得缺少細節,這時候可以通過漸變效果塑造出 LOGO 的層次感。通過漸變色彩明暗的變化和角度的調整,可以將圖形刻畫出立體感,也可以通過多層漸變疊加的方式,刻畫出圖形的高光和陰影。

           

           

          圖片

          圖片

          圖形來源于網絡,版權歸原作者所有,本文借用分析 AI 技法 

           

          接下來我們來解析一下這個 LOGO 是怎么做出來的。看上去是一靶心一樣,但是其實非常簡單,只需要將其中四分之一做出來旋轉復制一圈就可以了。

          圖片

          圖片

          首先繪制出四個圓形和十字交叉線,這樣就切出兩個圓形的基本形。但是觀察圖形是有尖角的。所以再延著豎線繪制出幾個圓形,特別需要注意的是線與線之間必須相切,這樣就可以切出尖角了。

          圖片

          最后再旋轉復制一圈就可以了。

          圖片

          接下來我們再看一下這個案例,相對于上面那個會更復雜一點,除了普通漸變還使用漸變刻畫出高光和陰影效果。

          圖片

          最后將背景改為黑色效果更突出,再加上排版就完成了。

           

           

           

          圖片

          圖片

          圖形來源于網絡,版權歸原作者所有,本文借用分析 AI 技法

          首先繪制一個三角形,拉出圓角。再畫一個圓形與三角形居中對齊。

          圖片

          打開(窗口—效果—變形—下孤形)這樣就得到了一個有弧度的邊。然后擴展圖形我們將上面半截裁掉,只保留下面的圖形。

          圖片

          以中間的圓形為軸心,將得到的圖形旋轉 120 度復制一圈。調整位置后合并圖形,這樣就得到了一個帶有弧度的三角形。

          圖片

          在得到的三角形上繪制一條曲線,分割出一個圖形,將得到的圖形旋轉 120 度復制三份。再使用形狀生成器進行剪切合并。這樣基礎圖形就完成了。

          [優化輸出圖像]

           

          接下來為三個圖形分別填充不同的漸變色。再繪制出陰影和高光增加層次感。

          圖片

           

          繪制陰影,將陰影填充黑色,調整透明度為 50%。繪制好一個之后旋轉復制 2 份就可以了。

          [優化輸出圖像]

           

          高光填充白色到透明的漸變,混合模式調整為疊加。同樣也只需繪制一份,之后復制即可。

          [優化輸出圖像]

          這樣就完成了,普通的圖形加上漸變色后變得更有層次感了。

          圖片

           

           

           

          圖片

          AI2022 對 3D 功能進行了升級,可以輕松地將 3D 效果(例如旋轉、繞轉、凸出、光照和陰影)應用到矢量圖稿 ,接下來我們就來解析如何使用 3D 效果設計出更有立體感的 LOGO。

           

          圖片

          圖片

          圖形來源于網絡,版權歸原作者所有,本文借用分析 AI 技法

          這個圖形雖然是噴泉的形態,但是撥開多余的線條我們可以清楚的看出基礎形其實是一個甜甜圈。甜甜圈的橫切面是一個圓形,由此可以得出第一步需要先畫一個圓形。再使用 3D 繞轉功能即可得到甜甜圈了。

          圖片

          執行 3D 繞轉后調整數值 ,注意調整位移的數值來調整厚度。當然位移的數值由基礎圖形的大小決定。

           

          圖片

          之后需要繪制出一排黑白相間的線條,并新建為符號。PS:把所有線條選中,直接拖入符號面板就可以新建符號了。新建為符號后就可以作為貼圖使用了。

          圖片

          繼續打開 3D 繞轉的面板,點擊貼圖按鈕,在符號處選擇剛才新建的符號,為每一個面貼圖,選完貼圖以后需要勾選(縮放以合適)和(三維模型不可見),這樣線條才能完全覆蓋圓環。

          圖片

           

           

          這樣 3D 繞轉加貼圖形就完了,然后再將圖形擴展。擴展后就可以隨意調整線條了。將線條延長并且調整長度,做出參差不齊的效果模仿水流的狀態,然后將延長的圖形拉出圓角就可以了。

          圖片

          最后調整一下細節,再給圖形加上排版就完成了

          圖片

          圖片

          上一個案例使用了 3D 繞轉功能,接下來這個案例就使用了 3D(經典)里面的另一個功能,3D——凸出和斜角。

          圖片

          圖片

          圖形來源于網絡,版權歸原作者所有,本文借用分析AI技法

          首先打出字母,當然做這種類型的 LOGO 時候對字母的選擇有一定的限制 。需要選擇兩個字母可以連接不突兀的才行。比如這兩個 E 就可以完全的鏈接在一起。打好字母后將 E 字母適當變形,再復制一組線條,作為中間的連接線。將三組圖形分別新建為符號(前面講解過怎么新建符號,這里就不重復了)。

          圖片

          接下來繪制路徑,作為橫切面。然后打開效果——3D(經典)——凸出和斜角。打開預覽,調整數值和角度。

          圖片

          圖片

          再打開貼圖,選擇剛才新建的符號,把圖形的每個面貼上對應的符號。可以先選擇縮放以適合,再根據實際預覽效果進行調整至最佳效果。

          圖片

          最后將得到的圖形進行擴展,取消編組后,為圖形填充不同顏色增強圖形的立體感。

          圖片

          兩個案例看下來,是不是已經掌握了 3D 工具的使用方法了。那么接下來我們舉一反三,使用 3D 功能來做一個立體感的 LOGO。

           

           

          圖片

          圖片

          第一步:肯定是先繪制出橫切面,用線條繪制出字母 B 的輪廓,注意線條不需要閉合。

          圖片

           

          第二步繪制黑白相間的條紋線條,拖入符號面板新建為符號備用。

           

          第三步選中 B 字母的橫切面,打開效果——3D(經典)——凸出和斜角。調整凸出厚度的數值還增加圖形的立體厚度。調整角度讓圖形的視角更舒適。

          圖片

          打開貼圖選擇剛才新建的條紋符號。在表面那里選擇不同的面,都貼上條紋,選擇縮放以適合。

          圖片

          最后再在相交處繪制陰影增強立體感。這樣就完成啦,新技能 get~

           

           

          圖片

          第一次見這樣的立體感 LOGO,還以為是 3D 軟件做出來的。后來發現 AI 一樣也可以完成。只需要用簡單的網格就可以繪制出立體的效果。

           

           

          圖片

          圖片

          圖形來源于網絡,版權歸原作者所有,本文借用分析 AI 技法

           

          第一步繪制出菱形網格。網格的繪制方法也非常簡單,可以用線條建立,先畫出一排豎線,然后旋轉 120 度并復制,再重復復制就可以了。也可以使用等邊三角形連續復制進行搭建。

          圖片

          第二步使用形狀生成器延著網格的方向合并圖形,形成立體感的造型。兩個格子組成一個正方形,再用一個一個的正方形組成想要的幾何圖形。

          源圖像

           

           

          第三步將生成的圖形提取出來。

          圖片

           

          第四步為圖形上色。上色的時候需要設定一個光源,根據光打過來的方向,設定每個面的顏色。通過每個方向的塊面的深淺變化,強化圖形的立體感。

          圖片

          最后再加上排版就完成了,是不是超級簡單。

          圖片

          那么舉一反三,我們也來嘗試用 2.5D 網格繪制做一個 LOGO,第一步還是按照上面的方法繪制出 2.5D 網格

           

          圖片

          圖片

           

          第二步延著網格的角度繪制出長方形,并拉出圓角。因為將字母幾何化后,字母的形態是有兩條豎邊的,所以繪制出四個長方形為一組,方便后面合并修剪出字母結構。

          Source image

           

           

          第三步,按照字母的結構,先繪制出分割線條,注意線條與線條之間需要相切。因為之后需要使用形狀生成器工具進行修剪。

          Source image

           

           

          第四步,使用形狀生成器工具合并和剪切出字母的結構出來。

          圖片

          第五步,將生成的字母,復制一份進行翻轉。然后調整色彩,將字母做出立體感。

          源圖像

           

          是不是很簡單。除了這個 LOGO,還有很多種類型的 LOGO,都可以借助這樣的菱形網格來完成??烊L試吧!

          圖片

          圖片

          AI2022 新增了一個重復功能。尤其是徑向重復,簡直太好用了。學會這個功能分分鐘做出一個 LOGO。接下來我們就嘗試使用重復工具做出下面這個 LOGO。

           

           

           

          圖片

          圖片

          圖形來源于網絡,版權歸原作者所有,本文借用分析 AI 技法

           

          先繪制一個圓形一半,將描邊模式改為尖角。復制出四個。

          圖片

          打開對象——重復——徑向。

          圖片

          拖動按鈕即可調整數量和距離。左邊的按鈕可以調整重復數量,中間的圓形按鈕可以調整元素的距離,中間的另一個按鈕可以調整重復的范圍。另外雙擊進入隔離模式可以調整單元素的方向和形態,其它的元素也會隨著單元素的變化產生實時變化。

          源圖像

           

           

           

          得到想要的圖形后,將其擴展,使用形狀生成器進行修剪。最后再給圖形填充顏色就完成了。

          [優化輸出圖像]

           

           

          最后配色再加上簡單的排版就可以了!

          圖片

           

           

          重復工具真的太好用了,尤其在做重復構成 LOGO 時會提供很大的便利。下面我們就嘗試用這種方法來設計一個 LOGO。單元元素圖形直接使用英文字母 O。

           

          首先打出一個字母 O,我們將其進行簡單變形。

          圖片

          圖片

          打開對象——重復——徑向,調整數量和單元素的角度,調整的過程中會得到很多意料之外的好看的重復圖形。

          圖片

          圖片

           

           

          最后再調整細節加上排版就是一個完整的 LOGO 了!

          圖片

          圖片

          是不是有很多同學好奇像這樣復雜又有規律的線條圖形是怎么做出來的,其實也是非常簡單。接下來我們就來分析一下如何簡單快速地做出復雜的線條漸變圖形。

           

          圖片

          圖片

          圖形來源于網絡,版權歸原作者所有,本文借用分析 AI 技法

          我們先看這個簡單一點的線條漸變圖形應該如何做。首先還是先分析解構圖形,將它旋轉 45 度后,將線條折分開,是由細、中、粗三種粗細不同的線條組合而成一個圓形。

          圖片

           

           

          那么我們就先畫出三種粗細不等的線條。

          圖片

          再畫出三個部分的外輪廓。

          圖片

          將三個部分分別與剛才繪制的條紋進行剪切。使用形狀生成器,按住 alt 健減掉不需要的部分即可。

          圖片

          將得到的三個圖形拼合在一起后,合并所有圖形,再在相交處拉出圓角,增加細節同時也讓圖形之間更有整體感。

          圖片

          最后將圖形傾斜 45 度讓圖形更有張力,再加上排版就完成了。

          圖片

           

          看完這個案例,是不是對線條在 LOGO 圖形中的應用有了一定的認識,我們再來學習下面這種更復雜一些的應該如何做。

           

          圖片

          圖片

          圖形來源于網絡,版權歸原作者所有,本文借用分析 AI 技法 

           

          首先將圖形進拆解,可以看出這個圖形看似復雜,其實是由兩個線條組成的圓形重復構成。重復構成的圖形我們只需要做出單元元素即可,那我們就先把單元元素提取出來。

          圖片

           

          從提取的單元元素可以看出圖形是由粗到細變化的線條組成的。從線條變化的角度是左右對稱的。所以我們先繪制出對稱變化的線條。

          圖片

           

          繪制兩個長條方形,將下面一根的一端轉為尖角。使用混合工具混合出 6 條漸變的線條。再將圖形整體復制一份進行垂直翻轉。

          圖片

           

          繪制一個圓形與剛才得到的圖形進行剪切。使用形狀生成器工具,按住 alt 鍵將不需要的部分修剪掉即可。

          圖片

           

          將線條的右側全部改為尖角,選中兩個點——右擊——平均——兩者兼有,就可以轉成尖角了。

          圖片

           

           

          繪制一個小圓形,居中對齊。將圖形與小圓形進行切割,將切割出的線條水平翻轉。

          圖片

           

          最后將得到的圖形旋轉 90 度,向下復制一份就完成了。

          圖片

           

          圖片

          AI 的混合工具可以將兩個形狀或者顏色創建平滑的過渡,步數越多過渡也就過平滑??旖萁∈?ctrl+alt+b。

           

          圖片

          圖片

          首先我們來分解一下這個 LOGO 的圖形,先拋開色彩,只看圖形。

          圖片

          我們可以看出這個圖形的基礎圖形其實由兩個三角形的混合而成。還需要注意的是,三角形的頂點需要設置為圓角。

          圖片

          接下來我們將兩個三角繪制出來,注意線條的粗細并且選擇圓角的形式。

          圖片

          將兩個圖形進行混合,注意按順時針方向進行混合,圖形會更飽滿些。

          是不是特別簡單,那么快去舉一反三,別光讓眼睛學會了,也照顧照顧“手”,讓它也學學。

          最后看一下今天的案例匯總!

          圖片

          好了,今天教程就到這里啦,我們下期見!

           

          原文地址:胡曉波工作室(公眾號)

          作者:yoyo

          轉載請注明:學UI網》8個AI技能給你的LOGO加BUFF

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

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

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

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

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


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

          lanlanwork


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

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

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

          圖片

          圖片

              

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

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

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

          圖片 
           

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

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

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

          圖片 
           
           

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

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

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

          圖片

          [優化輸出圖像]

           

           

          五、特色的簽到展示設計

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

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

          圖片 
           

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

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

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

          圖片 
           

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

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

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

          圖片 
           

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

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

          酷我音樂 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咨詢、用戶體驗公司、軟件界面設計公司


          如何正確使用字體的重要性

          lanlanwork


           

          圖片

           

           

          我們不妨換個手寫的文藝字體,通過對比,這時會發現適合的字體可以恰當表達出一張圖片的風格。

          源圖像源圖像

           

           

          再拍一張照片,夜晚寂靜的高架橋,符合氛圍的主題、加上好的排版方式本是一件非常浪漫的事情,但如果字體不在一個頻道里,就會破壞整個主題的氛圍。

           

          圖片

          我們不妨換個字體試試,通過對比,能看出字體在設計場景時的重要性。

          源圖像

           

           

           

           

          一串文字,為什么通過排版設計出來還是不好看了,因為字體是一個非常細致的感受,當改變了字體形態之后,那種暗戀的感覺好像又回到了當初在校園同桌的她。

          圖片

          圖片

           

          我們用英雄兩個字來示例如何分析字形判斷。

          1、字形內部的空間和邊緣體飾都偏版直方正,所以缺少個性,無法給人獨特性的氛圍表達,適合敘述性場景。

          圖片

           

          2、字形內部寬厚,邊緣體飾卻帶有微微尖角,上下故意的壓扁,使著字體底盤很穩,給人一種力量和渾厚的感受。

          圖片

           

          3、毛筆性字體,天生帶有自由和揮灑豪氣的特點,但是這類字體頓挫的邊緣好像在告訴我們,它在克制自己的張力,適合做為主標題使用。

          圖片

           

           

          4、同樣的毛筆性字體,跟上一種就截然相反,它將字體的豪邁豪不隱藏的表現出來,能體現出一種情緒的特征化。

          圖片

           

          在實際場景使用時,以下幾種字體的使用就更能表達出恰當的字體在設計場景時是多么重要。

          圖片

           

           

          最后再帶來一個字體的實際案例

          一個建筑放置于畫面中間,兩只手拖住物體,制造夸張對比的錯視感。

          圖片

           

           

          再將主題文案通過穿插的版式手法放置于物體周圍,最后添加一些敘述信息填補版式的空缺,看起來排版沒有太多問題,但仔細觀察主體和場景的氣質卻沒有被烘托起來。

          圖片

           

          當我們改變字體的使用后,整體的氣質立馬顯得莊嚴和宏偉,再通過對比我們發現,原來與好的設計之間,差距也只是一個字體的使用而已。

          源圖像

           

          圖片

           

          原文地址:修先森撩設計(公眾號)

          作者:修先森

          轉載請注明:學UI網》如何正確使用字體的重要性

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

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

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

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

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


          來了!解讀2022年10種UI/UX設計趨勢

          lanlanwork


          1.極簡主義

          越是領先的科技公司,你會發現,他們對簡單大氣、重點信息明確、精致的設計越有強烈的偏好。這種趨勢逐年增多,覆蓋范圍也越來越廣,品牌和各行各業的設計師也越來越多的偏好這種風格。

          例如:英國金融科技公司Revolut

          Meta(2021年10月28日,Facebook宣布,該平臺的品牌將部分更名為“Meta”。)

          Dribbble設計師:MoRas ? 的作品

          小結:從心理學角度上說,極簡主義也是在尋求一種安全感,紛雜的物品和內容生產者無時無刻都在綁架我們的眼睛,很容易讓人沉淪其中,不能自拔。當越來越多的人開始明確自己的定位,明確這些購物和社交軟件只是滿足自己需求的一種工具,而拒絕做工具的奴隸?!赣X醒」的人越多,極簡主義的運用就會越來越普遍。

           

          2.粗曠/粗野主義

          粗曠主義包含強烈的輪廓、鮮明的對比色、大膽的排版和真實的生活攝影相結合。

          去年我們還在說:“ 野蠻主義設計風格短期內應該不會深入到UI設計中去,更多的會在網站,或者雜志的設計運用此種設計思想?!?

          今年Spotify Wrapped(可以理解為國外的網易云年報)就給我們上了一課—野無止境。

          貪吃蛇一樣的形狀配合各種高飽和顏色,穿插于各種界面和海報中,形成了巨大的視覺沖擊,令人難以忘懷。

          讓我們來看看他們的設計:

           

          3. 重回90年代

          流行趨勢總是輪回又輪回,但原因可能不是現在的人忽然意識到以前的回憶有多美好,而是當年的90后小孩成了行業的領頭羊以后,將童年的美好回憶拿出來沉醉一番,找個機會釋放內心的那份童真。

          創意機構CPB London的設計總監June Frange將這波趨勢稱之為「年代懷舊」,短視頻平臺和明星效應的加持,以及使用者自發性的DIY內容,也使得它的影響力更加強大。

          今年《王者榮耀》推出了兩個新主題的游戲皮膚,其中一個以舊版西游記為原型打造的孫行者皮膚,一經上線在銷售量上就遠遠超過了同時出現的安琪拉新皮膚。而原因卻并不是皮膚的精美,因為從孫行者皮膚的精美程度而言,官方這一次就是出了一個“原皮”。

          這樣一個簡單的皮膚,卻讓無數玩家紛紛掏錢買賬,這就是懷舊的魅力。這種使用傳統神話故事元素結合官方的創新設計,讓無數玩家用一種全新的方式感受到了傳統文化的魅力所在。

          雖然我玩游戲不多,但是也半夜爬起來買了個孫猴子~

           

          4.排版變得更生動有趣

          10 年前,行業對排版比現在要嚴格得多,有明確的排版和字體使用規范。

          不過現在,設計師們可以對標題和段落做任何想做的事情——完全取決于想象力。將字體與形狀、照片和表情符號混合,在其上添加紋理,或者選擇一種形式非常復雜的字體做裝飾。

          這種設計會產生一種有趣、引人注目的效果,但它也必須要美觀和諧——我們仍需在設計時首先牢記:用戶的舒適度永遠是第一原則。

          字體設計在2022年仍將占有一席之地,設計排版中融入夸張的、富有個性的字體,比如:同時擁有流暢的線條與銳利的棱角。

          《魷魚游戲》的韓文片名標題,是由幾何圖形重新排列組合而成,挑戰了抽象形狀和文字之間的區別,借此突破字體必須易于閱讀的局限,創作出具有表現力的形式。

          Design Bridge London的高級設計師 Chris Algar認為:「  2022 年將是字體的重要一年」。

          他預測:“我們將看到排版風格融入真正夸張的個性字體,在流暢的線條和銳利的棱角形狀之間形成對比。”

          Chris 認為,顏色和活力也將在 2022 年的排版趨勢中發揮重要作用。

           

          5.Glassmorphism 和玻璃元素

          玻璃態已經無處不在——這是事實。有背景模糊、半透明物體,如卡片、水彩、玻璃球等等。從 Mac OS Big Sur 和 Windows 11 ,玻璃擬態已經存在了很長時間。

          在去年,Glassmorphism(玻璃擬態)經過一整年的風靡也算站穩了腳跟,并未像新擬態風(Neumorphism)一樣火速崛起又火速沉寂。越來越多的設計師將這種風格融入設計中去。

           

          6.極光背景

          不知大家是否可能還記得前一年的這個趨勢——「模糊的彩色背景」。

          它在2021變得非常流行,甚至有了一個專有名詞——極光背景。

          微妙、多彩、模糊的顏色看起來非常友好和有機——且更具視覺吸引力。這些飛濺和高斯模糊可以用作整個背景或置于一些重要的 UI 元素下。

           

          7.全息/霓虹燈

          這種網絡全息/霓虹燈效果很適合虛擬現實和全息界面的時代。虛擬世界提供的新可能性激發了設計師的靈感。充滿活力的、發光的顏色、抽象的圓形、全息圖紋理是這一趨勢的典型特征。

          它也被廣泛用于許多加密空間,以展示這些接口的未來性。

           

          8.環保風

          我們大多數人還是愿意選擇環保的生活方式的,投射到設計中——可以將「生態外觀」和感覺融入設計中。

          越來越多的品牌在追逐這種「紙質感」的趨勢——背景通常是灰色的,類似于可回收的紙板。排版風格極簡。對比度很高。顏色非??酥?,看起來稍顯「暗淡」,這種風格包含現實生活中的攝影、紋理、和涂鴉。

           

          9.粘土形態3D

          3D 作為一種藝術風格正在變成設計趨勢和大眾流行

          現在一種特殊的風格越來越受歡迎,3D最新的流行風格是粘土形態——類似于由粘土制成的對象(形狀簡單,由圓柱形/橢圓形組成,由內陰影和外陰影創造深度,但采用更「松軟」的 3D呈現方式,通常與其他極簡設計結合在一起。粘土3D有種可以按出一個坑的質感。

           

          10. Metaverse

          元宇宙(英語:Metaverse),又稱形上宇宙,此一科技詞匯由前綴“meta”(意思是超越)和詞干“verse”(通過逆向構詞法從“宇宙(universe)”得來)組成,可簡稱為MVS。這個詞通常用來描述未來互聯網虛擬環境的概念,于共享、持久的3D 虛擬空間組成一個可感知的虛擬宇宙,此合成環境包含對象、常駐用戶與其交互關系,并存在于虛擬定義的時間中。旨在提供連接用戶長時間登錄和交互。廣義上的元宇宙概念不僅指虛擬合成世界,還指整個互聯網,也包括增強現實的范圍。

          Metaverse描述的是一種趨勢:越來越多的技術和媒介,都在不停地縮短虛擬和現實的距離。

          人類的大量活動和時間在往數字世界進行遷移。我們的社交活動、經濟活動都是在數字世界(或者叫虛擬世界)里面,玩游戲也好,購物也好,社交也好,所以元宇宙(Metaverse)就是順應這樣的趨勢產生的,元宇宙就是個數字世界。

          感興趣的朋友可以自行搜集詳細資料。

          用戶體驗設計,設計師的出發點是人,讓人的使用體驗感加強,趣味性加強,使用更加方便。在此角度,設計師不僅應當對設計趨勢進行學習和分析,也要促成設計趨勢落地的執行。學習擁有國際化的全局視野,增強面對復雜的中國本土市場的應對能力和洞察力,把學習和研究成果轉化為產品設計的能力。

          文獻:Diana Malewicz (UX Collective)  素材來源dribbble,侵權刪。

           

          原文地址:站酷

          作者:一個辛普森

          轉載請注明:學UI網》來了!解讀2022年10種UI/UX設計趨勢

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

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

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

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

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



          工作經驗|如何編寫「設計規范」?這套思路一學就會!

          lanlanwork


          看上去復雜的規范,其實都可以抽離出同一套編寫思路,不管你寫的是哪一類規范(比如組件規范、動效規范、Banner 視覺規范等 )都可以嘗試分為以下幾個步驟:

          1. 定義通用原則

          2. 定義事件特點

          3. 定義特殊場景

          4. 其它內容補充

           

          一、定義通用原則

          通用原則會為你的使用者提供評價內容設計好壞、質量高低的衡量標準,定義整體設計的大方向,也會幫助使用者決策,判斷什么該做、什么不該做。

           

          案例:

          以編寫「Banner 的設計風格」規范為例,規范中的某兩條內容如下:

          – 契合語義:Banner 中的元素需要與文字語義契合,并對重點內容做強化和引導;

          – 樣式簡潔:以不過于吸引視線為標準,形狀不可過于復雜,面積不要過大,符合 XXXX 行業的風格特征。

           

          經驗:

          1. 通??偨Y出關鍵的 2-5 條即可,內容在精不在多;語言精練,易記、易理解很重要。

          2. 這些原則是最基礎、通用的判斷標準,在編寫的過程中要結合實際情況,使之具備真實有效的指導性。

          3. 形式要從簡。寫規范不是為了彰顯設計價值,而是為了統一和更正他人的設計行為,因此形式要追隨功能,侃侃而談和花里胡哨的排版都要慎用,切忌舍本逐末。

           

          二、定義事件特點

          接下來你需要對所要規范的事件本身進行描述,包括事件的特征、狀態、使用方式等細節。這就需要你對于事件本身進行有邏輯的拆解和分類,你可以按照設計流程或者組成事件的框架結構來進行描述。

           

          案例:

          以編寫「Banner 的設計風格」規范為例,你可以按照 Banner 的設計產出流程,從 Banner 的構成框架、圖案樣式、文案規范、色彩規范、輸出文件格式等方面,對其進行詳細描述,這些內容就是你對于設計產出的基礎要求和限制。

          經驗:

          1. 通常來說你不需要從 0-1 來定義這部分內容,而是可以借鑒現有行業中已被廣泛認可的設計原理和法則(比如視覺原則就有:視差規律、情感化設計、費茲定律等等),來為你的規范做理論背書,再結合實際產品 / 行業特點來編寫規范。

          2. 規范顆粒度沒有限制,描述越細致,規范就越嚴格。規范定義得太寬松會起不到效果,太嚴格則會產生限制、不宜遵守,因此要適度。

          3. 對于一些比較難理解的規范內容,可以給出一些正確 / 錯誤實例,也直接給出一些切實可用的實操模版,輔助使用者進行理解或操作。如下方 Material Design 在描述 icon 設計規范時給出的實例:

          圖片

           

          三、定義特殊場景

          以上的通用規范和定義可以涵蓋 80% 左右的設計情況。但在具體業務中難免會出現特殊或極端情況,預判并定義這些特殊場景的使用方式也很重要。你可以把特殊場景理解為「邊界場景」,相當于找到事件位于臨界點時的處理方法。

           

          案例:

          還是以編寫「Banner 的設計風格」規范為例,對于文案規范這部分內容,當業務一定要修改現在的文字排版和布局;或者給出的文字內容很長且無法縮減;再或者要翻譯成多國語言等,對這類情況提前做好預判,給出合理的解決方案。

           

          經驗:

          1. 對于特殊場景,你可以給你自己設定一條邏輯線,有順序地思考。

          2. 更可行的方法是收集實際工作中其他設計師在設計過程中遇到的各種特殊情況,進行匯總整理。

          3. 特殊場景的規范不需要一步到位,隨時發現,隨時補充。

           

          四、其他內容補充

          你還可以補充以下內容,讓你的規范更完整:

           應用此規范的最佳實踐案例;

           對于其他相關部門的同事,想要獲取相關知識,如何快速閱讀關鍵內容;

           設立簡易的反饋和答疑方式,收取使用者的反饋,以便優化規范;

           規范的更新時間和更新內容紀要,保留完整的記錄和歸檔。

          規范的編寫過程不會是一帆風順的,不要急于求成,可以步步為營,逐漸優化。

           

          另外,并不是說規范文檔編寫好就萬事俱備了,更重要的是要提供給規范使用者閱讀的便利性,包括:如何更快地閱讀文檔、在更新文檔之后如何同步等等。關于編寫好規范如何落地和推廣應用,你可以查看文章:如何讓「設計規范」被有效執行和落地? 。

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》工作經驗|如何編寫「設計規范」?這套思路一學就會!

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

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

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

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

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


          久等了,2022 IF設計大獎作品來襲!

          lanlanwork

          圖片

          圖片

          三星隱私視覺體驗視覺識別系統,該系統的標志以一致的方式應用于所有三星設備和服務,直觀地表明用戶的個人信息受到安全保護。

          圖片

          三星對隱私的關注以平易近人、外觀友好的圖形形式傳達給用戶。該可視化系統旨在幫助用戶安全、安心地訪問各種服務,并提醒所有相關人員注意保護個人信息的重要性。

          圖片

          圖片

          圖片

          圖片

          阿波羅智聯(北京)科技有限公司

          Roboride 是無人駕駛機器人出租車的完整解決方案。設計系統為用戶和其他交通參與者創造了一種安全感。外屏作為用戶的第一接觸點,為身份認證提供了精準的交互方式。

          圖片

          HMI屏幕還可以通過3D實時顯示路況、安全語音提示和定制場景讓用戶感受到更多的掌控感,增加用戶的信心和舒適度。

          圖片

          圖片

          圖片

          “FICTION PLAY”活動旨在通過添加“游戲”的概念來擺脫短篇小說的世俗體驗。NC 有七位作家和七篇短篇小說,提出了三種以各種方式和主題與人交流的方式。

          圖片

          從網絡小說、作者配音的有聲讀物、AR體驗到虛擬空間中尋找參與者的句子,打造全新的“PLAY”體驗。促銷活動、線下出版物和展覽空間為多種用戶體驗開放。

          圖片

          圖片

          圖片

          RTL United已經合并成為一個一致的品牌,全新外觀,色彩繽紛,超級動感。RTL 將成為多樣性、娛樂和靈感的宣言。目標:新的品牌價值,一種新的態度,一種新字體,可提供最大的易讀性并創建清晰和情感交流。

          圖片

          圖片

          圖片

          圖片

          圖片

          HarmonyOS建立在分布式操作系統架構之上,可以跨設備運行,是華為全場景戰略的一部分。這款新操作系統適用于移動辦公、健身、健康、社交、媒體娛樂等。

          圖片

          圖片

          圖片

          圖片

          慕尼黑國家社會主義歷史文獻中心專注于納粹獨裁的歷史——最重要的是它對現在和未來的意義。

          圖片

          圖片

          圖片

          圖片

          圖片

          OERA由全球最權威的化妝品與美容權威Dr.Sven和MOJO創意總監Alison Goudreault聯手打造,是時尚專業公司HANDSOME旗下的首個奢華護膚品牌。

          圖片

          OREA 提出了“達到絕對零狀態的每日旅程”的概念,Oera通過詳細的微交互、簡單時尚的布局和增強的 3D 來提供自己的奢侈品身份。Oera 將其自身的生物技術應用到 Orea 產品上,以友好的語氣提供內容,從而最大限度地發揮 Oera 品牌的聲望氛圍。

          圖片

          圖片

          圖片

          圖片

          Galaxy Watch4 配備了全新的統一平臺,因此用戶可以使用更多種類的應用程序,并且在與手機一起使用時,它提供了更好的可用性。

          圖片

          此外,針對圓形顯示進行了優化的精美屏幕營造出愉悅的用戶體驗。增加身體成分和睡眠分析功能,讓用戶更好地保持健康。手表經過重新設計,允許更自然的交互,從而創造更方便和愉快的用戶體驗。

          圖片

          圖片

          圖片

          圖片

          Minna Bank 是日本第一家為數字原生個人創建的數字銀行服務。利用設計的力量,將傳統銀行業務重新定義為對客戶生活至關重要的數字服務。

          圖片

          Minna Bank 提供一系列數字銀行服務,允許用戶通過智能手機控制他們的資金,包括虛擬借記卡、預算功能和透支保護。Minna Bank 設計友好簡約,時尚插畫營造出有趣活潑的氛圍,讓用戶擺脫傳統金融機構帶來的壓力。

          圖片

          圖片

          圖片

          圖片

          New Naturalist Landscape Design是歐洲領先的先進景觀理念和技術、科研景觀公司。

          新自然主義景觀設計側重于棲息地露營、可持續景觀和生物多樣性恢復和改善等領域。賦予新自然主義以陽光般的生機與活力,清新美麗的空氣,水土般的自由融合。

          植物群落不斷重組中的生態景觀呈現出新的生命形態,城市與自然在有限的空間中尋求無限平衡的感覺。

          圖片

          圖片

          圖片

          圖片

          圖片

          今年IF設計大獎還是有很多優秀的作品,我挑選了其中部分展示,大家感興趣可以去官網看看其他設計作品。

          從這些設計獲獎作品中,我們可以學習的他們設計理念,設計表達形式,以及如何進行視覺包裝,最終獲得IF設計大獎??赐旰罂梢远嗨伎?,他們為什么要這樣設計,我們能學習地方是哪里?

           

          作者:Tony

          轉載請注明:學UI網》久等了,2022 IF設計大獎作品來襲!

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

          魏華的微信.png

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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