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

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

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

          首頁

          UI設計思考總結丨設計需要思考什么?

          純純

          目錄:


          一、設計前的思考

          1、設計思維模式

          2、設計理念的確立

          3、案例分析(9點)


          二、設計時需注意

          案例分析(12點)




          一、設計前的思考


          首先需要思考的問題:設計思維模式、設計理念的確立



          1、設計思維模式:


          設計思維是一套在設計前需要思考的結構化的流程,用來解決以人為本的問題。其目的是把在設計前所遇到的與設計相關的問題結構化,化繁為簡,形成一套流程,從而進行有序的思考。

          設計思維是一種思維模式和認知方式,其最大的特點是已知需要解決問題的結果,如何在已知最終結果的情況下更好更高效的解決問題是其核心目標。

          思維方式的確立,可以有效的為設計做好前期準備,提高設計的效率,更準確的為“以人為本”出發而服務。





          作者 Timo Kuilder



          2、設計理念:


          設計理念是在設計構思前所確立的主導思想,它不僅是設計的精髓,也賦予作品文化內涵和風格特點。
          好的設計理念很重要,可以使你的設計擁有屬于自己的獨特風格。

          設計理念必須以人為本,針對用戶年齡、職業、愛好等特點,進行整合,根據用戶主觀方面的個人喜好,從而進行設計。

          作者 Timo Kuilder



          3、案例分析:


          1、專注:確定產品的主要功能,功能的明確可以幫助用戶最高效的完成任務


          案例1:百度網盤

          百度網盤是一款云存儲服務產品,用戶將可以輕松將自己的文件上傳到網盤上,并可跨終端隨時隨地查看和分享。


          案例2:有道云筆記

          有道云筆記是一款專注辦公提效的筆記軟件,支持多端同步,用戶可以隨時隨地對線上資料進行編輯、分享以及協同。




          2、特色:每款產品都有屬于自己的特色,區別于同行產品的不同之處,結合產品調性設計,不要盲目跟風;它可以是功能、體驗、或者是視覺


          案例:每日故宮

          每日故宮是一款以日歷的形式推出故宮藏品的應用,“每天一件故宮藏品”,“讓觀眾隨時隨地看到故宮藏品”。其主要特色功能就是以日歷的形式展示內容,在視覺和圖標上也有自己的特色。




          3、情感:在設計的過程中,可以加入情感化設計,使用戶將情感融入產品中,關系更緊密


          案例:淘票票

          有趣的文案結合IP可以快速的將用戶代入產品中,增強與用戶之間的親和力,有種身臨其境的感覺




          4、互動:動效的運用可以給用戶帶來不一樣的感官視覺,即使只是一個小小的按鈕


          案例:最右底部Tab欄切換狀態,其互動可以增強用戶與產品之間的互動




          5、調研:調研可以了解產品所在行業的情況、市場需求、競爭力、同類型產品的優劣勢等,從而更好的設計產品


          調研方法:按調研途徑分為文案調研、在線訪問、電話訪問和實地調研


          調研工具:問卷星、問卷網等


          分析工具:Origin是一款常用的數據分析軟件,操作簡單,可視化直觀;SPSS是一款專業分析工具,其功能包括數據管理、統計分析等


          6、用戶:研究用戶特征、細分用戶,站在用戶角度思考,了解用戶想要什么樣的產品


          用戶研究:

          是一種理解用戶,將他們的目標、需求與產品宗旨相匹配的理想方法,能夠幫助定義產品的目標用戶群

          用戶研究重點工作在于研究用戶的痛點,包括前期用戶調查、情景實驗等

          作者 Timo Kuilder



          7、場景:需要考慮用戶使用場景是怎么樣的,不同場景功能需求不同,可以用故事板的形式展示用戶場景


          使用場景:

          包括時間、空間、設備支持、社交及用戶情緒等,進行應用場景的判斷和描述的時候,需要考慮全面,不同的場景下存在著用戶不同的需求。


          故事板:

          故事板也叫分鏡腳本,雖然更多用在電影、動畫、電視劇、廣告等影像媒體的創作前期


          故事板工具:Boords

          Boords界面簡約美觀、操作簡單,滿足制作故事板的基本功能


          8、數據:以數據為依據從而進行設計,不做沒數據支撐且無意義的設計


          數據統計:百度統計、百度指數、阿里指數等


          百度統計:全球最大的中文網站流量分析平臺,幫助企業收集網站訪問數據


          百度指數:

          百度指數是以百度海量網民行為數據為基礎的數據分享平臺。在這里,你可以研究關鍵詞搜索趨勢、洞察網民興趣和需求、監測輿情動向、定位受眾特征


          阿里指數:

          是定位于“觀市場”的數據分析平臺,旨在為中小企業用戶、業界媒體、市場研究人員,了解市場行情、查看熱門行業、分析用戶群體、研究產業基地等


          作者 Timo Kuilder



          9、少即是多:突出用戶所需的主要功能即可,其他功能可弱化或者直接去掉


          少即是多:

          現代主義設計建筑大師——米斯·凡德羅提出


          在設計中:

          少即是多就是明確目標,專注地圍繞用戶目標進行設計,將產品打造得簡單易用,同時又能夠解決用戶的需求


          案例:留白

          留白是一款提供多種圖文排版樣式,可以將文字、署名和日期安置在圖片以外的留白區域,讓你記錄的每一個精彩畫面都變成有故事的留白卡片




          二、設計時需思考


          設計時需要思考的問題:



          1、簡約:簡潔的界面可以減少用戶發生錯誤操作,減少認知成本,便于用戶了解和使用


          案例:字里行間

          字里行間是一款文學性非常清新的文字閱讀與創作軟件,可以讓用戶靜下心來閱讀與創作,整體設計簡潔,界面結構清晰,減少了用戶的學習成本。




          2、易用:容易上手的產品才是成功的產品,從用戶思維入手,功能一目了然,操作更方便


          案例:句讀

          這是一款不錯的掌上語句社區,每天可以輕松的看到豐富的優質語句,解決了用戶想要一款可以體驗精彩文學內容產品的APP,功能按鈕明確,操作快捷,符合用戶需求。




          3、視覺:產品是否好用為第一重要性,視覺也不可缺少,強烈的視覺可以抓住用戶的眼球,給用戶留下印象,讓用戶記住你的產品


          案例1:CCtalk

          這是一款致力于為學習愛好者打造的在線互動學習平臺,疊加圖標的運用在界面上特別突出,整體視覺給人強烈的感覺。


          案例2:飛豬

          這是一款提供機票、酒店、旅游線路等商品的綜合性旅游出行網絡交易服務平臺,金剛區的圖標設計得很精致,給人印象深刻,吸引用戶點擊。




          4、色彩:品牌色和輔助色的確立,確定適合產品的品牌色,品牌色可以加強用戶對產品的認知


          品牌色:品牌色可以決定產品的基本調性,讓用戶在眾多產品中一眼就看到你的產品,容易被記住和識別。


          案例:網易云音樂、BOSS直聘

          網易云音樂、BOSS直聘的品牌配色都很簡單,BOSS直聘的配色只有綠色和白色,配色單一卻顯得突出。品牌色運用到界面可以加強用戶對產品的認知。




          5、規范:規范設計的統一,在視覺上起到整齊的效果,保證產品的統一性


          案例:QQ音樂圓角的設計,圓角的統一和運用使頁面看上去圓潤有親和力,適合聽歌的時候那種放松的心情




          6、習慣:遵循用戶的操作習慣,設計是為了讓用戶更好的體驗,而不是讓用戶用的不舒服


          案例1:淘寶

          案例2:京東


          搜索欄和分類:搜索欄和分類都是電商類平臺最重要功能,兩款產品都遵循用戶的操作習慣,放置了右上側,是因為用戶已經對這些功能的位置形成記憶




          7、安全:在設計中要考慮的重要因素就是安全性,以及操作和選擇都是可逆的,可以減少用戶的懷疑和心理疑惑


          案例1:微信聊天撤回和重新編輯功能

          案例2:智行火車票退票功能

          案例3:淘寶退款、退貨功能




          8、人性化:用戶可以根據自己的操作習慣、所需功能或者愛好制定界面


          案例1:UC頭條的頻道選擇、形象選擇

          案例2:酷狗新版選擇主題皮膚


          兩款產品都很人性化,用戶可以根據自己喜好選擇關注的內容和風格



          9、反饋:用戶操作出現異常的時候,及時給予用戶反饋信息,并出現正確引導


          案例1:QQ閱讀的書架還沒有任何書本的時候

          案例2:虎課網在沒有登錄賬戶的時候出現的反饋界面

          案例3:Soul網絡異常

          案例4:喜馬拉雅未成年模式




          10、警告框:在緊急中斷、需要確認和通知用戶的情況下使用,友好的文案,可減少用戶心理的不適


          案例1:微博在無WiFi網絡的情況下播放視頻

          案例2:騰訊課堂網絡異常




          11、加載:分為靜態和動態兩種形式,動態加載可以吸引用戶的注意力,減少用戶等待的焦慮和無聊


          案例1:嗶哩嗶哩首頁和頁面加載狀態,首頁加載是動態,而頁面加載的形式是靜態

          案例2:虎牙直播動態加載狀態




          12、引導:引導功能,便于用戶了解功能和操作界面,產品更新后也可以使用引導來告訴用戶


          案例1:芒果TV功能更新指引

          案例2:酷狗功能更新指引

          案例3:每日故宮功能解說和功能更新引導



          小結


          希望通過這次的UI設計思考總結,讓自己變得更好更優秀,總結是對自我的成長和監督,不僅可以提高工作的效率,還可以加強對產品的思考能力。結合UI設計思考過程,體驗不同的產品,感受不同的設計,注意細節、認真分析

          作者:黑澤雙熾    來源:站酷

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

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

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


          Neumorphism(新擬態

          純純

          Neumorphism / soft ui(新擬態也有人叫同化、軟UI)是什么?在前一段時間,大家即使沒有看過,但是應該也聽到過一些關于這種新風格的介紹,或者是在某某趨勢中有類似作品的出現,不太了解或者一看而過。簡單的介紹一下,標題并非判斷結果,而是希望同大家一起探尋一起交流,一起討論這種風格是否會是接下來的新趨勢...


          起因是源于2019年11月5日,來自烏克蘭的設計師 Alexander Plyuto 在追波和ins上發布了下圖的一張作品,作者說明信息:

          “讓我們想象一下,如果在移動界面設計中,投影的形式發展的更好的話,那將來的界面將會是什么樣的,這是我的愿景?!?/span>

          Dribbble-Alexander Plyuto的作品


          目前作品在追波平臺收獲贊量4000+,瀏覽量23W+,一路飆升至追波2019年pop排行第一熱門的作品,同時在ins上的傳播也是異常的火爆,獲得很多設計的喜歡,評論頓時炸開了鍋,其中有設計師稱呼這種風格為“Neumorphism 新擬態”或者“Soft UI 軟UI”,于是這種叫法慢慢傳開,可能并不準確。


          為什么這個風格會火?你怎么認為?

          先拋開作品發布的平臺帶來的熱度,很多設計師認為這本身也是一種潛在的趨勢,隨處可見的C4D的輕質感在不同領域和不同方向的使用,IOS13更新后的部分拋棄了純扁平,重拾了3D的感覺。它會火的主要還是在視覺上,這種風格剛一出現,它是非常新穎的,在長達半年的幾乎高度一致的風格下,它是新的嘗試,讓人憧憬的方向。


          能有不斷創新的設計師帶給我們不同的設計風格,首先需要感謝,其次再去以個人的視角看待它。那么多風格的作品,那么擬態就變成趨勢了?我們帶著這個問題,一起繼續探討(我們先把代碼實現等話題放在文章最后討論)。


          帶著疑問,仔細看一下上面的作品,第一眼看有點像早期的寫實風格(如下圖),接近真實感,有強烈的質感和空間感......但是不同的是也帶了一點當前依舊流行的多彩模糊陰影的感覺。我們試著去找一下這種風格的特點有哪些......


          IOS 13 圖片編輯界面


           by  Mike | Creative MintsMike


          通過觀察,我們不難發現這種風格的一些基本特點:

          • 元素并不浮動

          • 元素色彩相對單一,與背景高度統一

          • 左上角亮色投影,右下角深色投影

          • 多以卡片樣式出現

          • 更加適合大圓角圖形

          • ...

                

          克服恐懼最好的辦法就是 —— 臨摹它!

          這種表現方式,其實并不難,去閱讀了幾乎全部相關的資料,也去查閱了作者相關的介紹和說明,試著去了解一下這種風格。首先我們先以按鈕為例,請看下圖:


          這三個圖標,你更愿意點哪一個?

          這是我們比較常見的三種也是相對比較流行的表現方式,我們分別從常規的頂部視角和側面視角去觀察它們:


          • 扁平的:首先在層級上,扁平的通常給我們的感知就是與背景是同為一個平面,視覺層級也沒有特別強烈的前后關系(不考慮圖標本身),對背景沒有太大的依賴,如果本身背景與畫面整體背景有區分,色彩就劃分了層級。   


          • 投影的:帶投影的給我們的感知就是漂浮起來的,單獨看它,它漂浮在背景之上,與扁平并列看,它還要高于扁平的,通常大家為了突出某些內容,某個模塊會去使用這種樣式。投影的使用對背景的依賴幾乎可以忽略,因為投影除了形狀可以調整,包括色彩、大小等都可以調整,且它是無邊界的漂浮著,即你可以隨意定義它的高度。   


          • 新擬態:頂面看,它似乎是介于扁平與投影之間,側面看,同樣也是漂浮的,但是它有厚度卻又沒有離開平面,它的范圍相對于投影的無邊界,似乎還有一些模糊的界定。對背景的有一定的依賴,需要幾乎相同的色值去實現。


          回到上面的問題,這三個你會更傾向于點哪個?當然上面的案例沒有示意在不同色彩下的情況,也有認為拋開體感上,前面兩張白色背景的已經高于新擬態,因為它與背景的高度融合,在對比度上已經弱了很多。


          可能這時候有人會有疑惑,單獨看這一個按鈕不是很有對比性,尤其是在視覺上體現的也不明顯。所以我們簡單繪制了一些卡片試試在作為信息承載的時候,這種風格的效果如何,同時也去將不同的樣式融合,看看脫離背景的約束,局部是否可用與協調。



          我們可以從上圖看出,當這種風格用做內容承載時候,不管是文字圖片按鈕或者圖標,僅僅在用做卡片的時候,效果還是蠻好的,它同前面兩種風格一樣,仍然可以清晰的區別內容層次、間距等,但是親測如果大面積使用,頁面會變的更加復雜,整體的層級較難清晰劃分,那么局部使用效果如何?



          局部使用在某種特定的場景是可以用的,如下圖的計算器界面。在的卡片、按鈕、進度條等樣式下也能得以很好的展現。但是它比起投影卡片,除了視覺上,點擊感、移動效果......差了很多。



          看的這里,大家應該會有一個自我評定標準,這應該(目前)不會是一個大趨勢,至少明年不會,雖然這種風格很受人喜歡,但是這種風格還存在很多弊端:


          • 首先,除了卡片等樣式,它不能有效的提高信息的傳達,頁面內容密集,過多使用容易導致混亂,如果靠投影的大小或深淺來區分,即使達到效果,畫面會變得復雜沉重。

          • 按鈕的凸起和凹陷的狀態,絕大部分需要通過投影來識別,這是比較困難也是比較嚴重的問題,這樣是幾乎很難區分點擊的前后狀態的。

          • 背景色的依賴太大,色彩對比度較低,相對于白卡投影等形式的應用,目前的樣式不能讓內容與背景產生良好的對比,不利于信息傳遞。


          實現問題,其實現實難度到還真不難,話筒交給你們......


          所以這種風格就涼了嗎?

          這種風格其實在某些局部地方還是可以使用的,小面積的和其他風格進行混合使用。無數的可能性需要大家去做更多的嘗試和創新。通過對趨勢的了解,結合我們認知范圍內正確的組合和排列,說不定會創造一個意想不到的“船新版本”。


          我們只有在這樣的思考和創造的過程中,獲得更多的靈感。不能不考慮實現問題,但是我們更需要順應趨勢,不管這個趨勢能火多久,在將來能否得到應用,只有不斷的探索更多更新的東西,設計才會變得更加美好。動起手來吧~


          下面還是簡單的分享一下實現的方法,并分享一下相關的源文件與作者的源文件供大家學習交流哦!


          凸起部分:

          第一步:確定配色,最好是淺色或者是深色,選取高光色和投影色(非同色系的不同組合大家可以多去嘗試)

          第二部:創建對象,更加適合圓角的對象,可以是純色,或者輕微的漸變效果也更好

          第三部:添加投影,投最好是X和Y軸的位移是一致的,至于角度,大家自由發揮吧,這里建議亮色投影和深色投影分別復制一份制作,如果是在同一圖層上做,交界處效果不理想,更模糊。


          凹陷部分:

          步驟幾乎一致,投影換成內陰影做對角線的深淺添加可以。

          這里說一下,凹陷部分完全按照這種風格去實現,顯示效果其實不好,作者包括其他設計師都在這里做了優化,優化后的實現方式上已經不屬于這個風格了,因為最后的實現效果,側面觀察它已經是脫離背景的,如果融合背景也可以,只是邊界會更加模糊,所以仔細觀察作品,細心的同學應該已經發現是如何處理的:其實就是添加一個邊框,再讓投影充當淺色高光。


          作者:Frannnk   來源:站酷

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

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

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

          一些視覺知識點-各類對比

          純純

          通過用各類對比繼續為大家帶來視覺“熱”知識~目錄如下

          海報視覺如何做的有創意?有哪些方法呢?

          比如從構圖、擬物、光影、嫁接、對比、或者反差?等等等等

          每一種又都可以拆分成很多細類。

          比如對比在視覺海報中的運用,又有明暗對比、顏色對比、大小對比、虛實對比等等、太多了!

          首先我們來分析一下大小對比是如何應用的。

          1. 大小對比

          1.1 大小對比的作用

          我們先看下這張圖:



          兩個元素, 如果一樣大,平鋪在畫面中,就會顯得普普通通的,沒有任何亮點。

          如果我們把其中一個放大,另一個縮小,再來看:



          畫面是不是有特點了很多,并且有了節奏感, 就連文案排版也有更多的方式。

          所以對比就是讓畫面的兩個組成部分/元素,以夸張的手法,布局構圖,以讓畫面產生強烈的反差。以提升畫面沖擊力,畫面縱深,內容豐富層度。是非常有效提升畫面品質的方法之一。

          那大小對比如何玩的精通,玩得高級呢?

          我們一起來看一下:

          1.2 人物與人物

          1.2.1 全身與半身對比






          這種半身人物和小人物的對比,或者頭部表情眼神與小人物的對比主要可以展示人物細節,后面的人物放大表情傳遞情緒,前面的人物展示全身,傳遞狀態,可以很好地傳遞內容,常常用在各類視覺海報中。

          1.2.2 局部大特寫與小人物對比

          (下面右側的圖是江湖哥2017年做的圖,分析兩次了,哈哈,備注下):



          這種對比有強烈的大小反差,并且可以很大程度地拉伸畫面縱深,表現出很強的空間感!

          并且還有一個細節:這兩張都是三角形構圖,非常穩定。



          所以我們在設計的時候要也要注意畫面的構圖方式,夸張對比同時,要保證畫面的穩定和飽滿!



          1.2.3 全身與全身對比


          全身的人物對比很小的人物,讓畫面有更多的空間可以利用, 可以留白想象,也可以打造場景氛圍,展示更多場景氛圍。 

          1.3 人物與場景

          1.3.1 小場景與大人物


          夸張化的對比,讓本該小巧的人物矗立在場景里,很容易就營造除了一種巍峨磅礴的視覺感受。



          一般需要很高的設計成本,工時不小。簡單點的做法我們可以直接在人物下面拼接一些小場景,比如這樣:


          一些日常小需求中,沒有那么多的時間去打磨細節,就可以這樣做,既能保證按時完成需求,也能有一定的創意性。

          1.3.2 小人物與大場景對比

          這種方法也非常具有創意性,把一些很小的物體放大,人物縮小, 反差表現兩個主體的大小對比。往往也能有出人意料的效果,需要更多的靈感和想法。

          創意本身就是打破常規,把不可能變成可能,達到出人意料的效果就是創意。大小對比在畫面中的各種玩法就是可以很好達成這種目的的方法之一,大家可以多去嘗試,和練習,單這一種方法用好了就很牛逼了。

          2. 光影對比

          光影是在平面視覺里常用的一種技法方式,再說光影的創意之前,我們先說一下光影的作用。讓大家對光有所了解。

          2.1 光影的作用

          我們為了直觀一些,直接用幾個圖片說明。

          現在這張圖,這是一個瓶子的圖形:


          我們給瓶子加入光影:


          瓶子就變得立體了!

          我們給背景加入光影:


          空間變得有縱深了,畫面層次也豐富了起來!

          所以光在畫面中最基礎的有兩個作用:

          ⑴讓物體變得立體,更加真實!

          ⑵增加空間縱深,豐富畫面層次!

          那我們應該如何利用光影,去做更有創意性的設計呢?

          光影、光影,先有光后有影。那我們就先來說說主要表現光的幾個玩法:

          2.2 光

          2.2.1 逆光

          逆光就是主體在正前方,光源與主體重疊的一種使用方式,可以說是我們最常用的光影塑造方法之一了:


          它的特點是光源與主體重合,形成很強的對比,在畫面可以可以非常好地聚焦視線,強化主體。

          2.2.2 側光

          側光是光從主體側面打過來的光,一般不會太強:


          主要是起到一個豐富畫面層次,營造氛圍的作用。

          2.2.3 頂光

          從主體頂部打下來的光:


          這種光,可以有效引導視覺,把需要的部分亮起,不需要的部分暗下去,由上至下,吸引人的視線范圍和順序。

          2.2.4 聚光

          從前方照射過來的燈光:


          聚焦視線,不要的地方全部暗下去,是一種最能收攏視線的打光方式了。有些細節比較豐富的聚光畫面,暗部也會保留一定的細節,不會是一個純黑色。

          2.2.5 造型

          給光賦予一個造型,可以達到一種形式創意上的突破,

          比如這種:



          把光塑造成一個人物的造型,下面放置對應的人物錘喪的狀態,形成很強的人物情緒反差,可以說是非常有創意了。

          還可以把光塑造成物體,比如這種:


          把偷過來的光塑造成與主體相關的某個物品造型,中間放置一個小的人物,同樣也是一種很棒的創意方式。

          2.2.6 分割

          除了打光方向,造型之外,其實還可以用光來風格畫面,也可以起到一些非常亮眼的視覺效果,比如這樣:


          以上就是光的玩法了,可以看到,光的玩法多種多樣,利用好了可以讓畫面非常具有創意性。

          說完了光,我們來接著說說影子的玩法都有哪些呢?

          2.3 影

          2.3.1 投射

          投射相交來說是比較常規的一種處理方式了:


          用投影的方式加入到畫面中,可以增加畫面層次,渲染氛圍,讓畫面更有深度。

          2.3.2 造型

          影子也是可以改變造型的:


          本來是應該與人物動作一致的影子,被改變造型與人物產生互動或對比,映射出了非常強的故事性,和內容深度,非常具有創意性了。

          在一些插畫或者游戲視覺中同樣也可以應用起來:


          內容深度和想象空間直接拉滿!

          2.3.3 剪影

          配合逆光的形式,將主體以剪影的形式表現出來:


          剪影的表現形式,為了凸顯剪影,背景上都會有一個逆光源存在,并且輪廓要清晰,在素材上刻畫一些輪廓光源以讓人物變得立體,可以營造出很棒的神秘感,常常應用在神秘嘉賓、新品發售、新角色發布等活動中。

          應用在一些游戲中,強烈的明暗對比配合富有氣勢的人物造型,也可以打造出一些很有視覺沖擊力的海報視覺!


          光與影的玩法多種多樣,既可以讓畫面變得立體,又可以提高空間縱深。打光方式、造型、剪影、分割等等用法,可以讓我們的視覺變得不太平淡單調,讓畫面擁有無限想象力的創意方式。

          3. 其他對比

          3.1 陣營對比

          陣營對比的特點是5:5分畫面,以對比色鋪墊畫面,形成強烈的視覺對比,和陣營感。常用于表現兩個不同的陣營,或者正反派的視覺表現中。


          除了影視海報、游戲,競技類體育類也常常使用這種對比方法:

          主要表現:對抗、競爭、陣營

          3.2 狀態對比

          狀態對比常用于表現同一個人或主體物的多種狀態,比如人物的正常狀態和特殊狀態對比。通過一些技法讓兩種狀態和諧地拼接到一起,是讓單薄畫面豐富起層次和內容的一種有效方法。

          比如用畫面拼接的方式:

          或者是同一主體,把兩種狀態表現到一起的方式:


          主要表現:人或物的的兩種不同的狀態,冰對火、明對暗、正常對黑化等等。

          3.3 時空對比

          讓兩個不同的時空聯系到一起,形成時間地點上的反差對比。

          3.3.1 兩個不同空間的對比

          由同一個元素貫穿兩個不同空間,提供畫面的延續性,表現出打破/穿越空間的意境,非常具有沖擊力。


          3.3.2 兩個不同時段的對比

          同一人物不同時期通過倒影等巧妙的表現方式,與主體形成時間上的對比。具有延續時間長河的感覺,為觀者提供非常大的想象空間,是一種很有創意性的的方法。


          主要表現:空間穿越、時間變化的對比。

          3.4 情緒對比

          這種創意方式更多是傳遞人物的情緒,安靜的狀態

          對比憤怒的狀態,快樂的狀態對比悲傷的狀態,


          也可以表現人物的兩面性,正常狀態和陰暗面等等:


          會讓觀者感受到強烈的情緒傳遞,視覺表現上反而不會那么注重。

          主要表現:重視情緒的傳遞

          3.5 虛實對比

          此虛實非彼虛實。

          和我們常說的虛實對比不同,這里指的是虛幻和真實的對比,比如:

          用線條或者影子打造一些和實體區別開的虛構元素,和實體的元素形成對比,會有一種很虛幻浪漫文藝的感覺,可以用于表現一些幻想,不切實際的愛戀類似的主題中,能達到很少見的一些視覺效果。情感和創意都能得到很充分的傳遞。


          作者:菜心工作室 來源:站酷

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

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

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



          一些視覺知識點

          純純

          從視覺空間、字體性格、顏色情緒三個大方面來談一下我對視覺知識的部分理解!目錄如下


          1. 視覺空間

          1.1 什么是空間感

          空間感:空間感( sense of space)是指藝術形象通過一定手法引起的類似現實空間的審美感受。藝術家通過特定的瞬間造型和空間深度的追求,使人聯想到其活動、生活的環境空間。在繪畫、攝攝影藝術中,形象存在于二維平面中,但通過構圖、透視、線條走向、光影和色彩處理,使人感受到空間的整體性、立體性。

          而在我理解總結,空間感其實就是運用各種手法,打造出畫面的空間縱深感,讓二維的畫面變成三維,從而提升畫面的品質、細節、沖擊力。

          1.2 空間感的優點

          我們以人物海報為例對比幾張圖,直觀感受一下:

          無空間感:



          有空間感:

          我們直觀的可以看到,都是人物海報,下面的兩張明顯更有品質感。有空間感的圖,畫面會更高級。

          那是因為空間感會讓你的畫面更有層次,更靈動和富有場景感。這就是空間感的有點。

          1.3 如何打造空間感

          空間感,其實就是打造畫面縱深,讓元素之間形成前后關系,那有哪些方法來打造畫面縱深呢?我們總結了5個方法來分享給大家:

          1.3.1 構圖

          富有極強透視線的構圖能很直觀地表現出空間感。

          比如




          這類

          這類擁有很強透視的構圖,不用做別的,光構圖就能體現出很強的空間感了。

          實際運用中,我們還可以利用標題文案排列出這種透視構圖來打造空間感:


          1.3.2 虛實

          虛實分為:

          1.輪廓虛實

          2.顏色虛實

          輪廓虛實:兩個相同的元素,輪廓模糊的在空間上會感覺處于輪廓實的元素后方。



          這是兩個元素,放到一起就會感覺上是在同一個平面上的。沒有虛實關系。

          如果把其中一個圓的輪廓虛化:



          是不是就會感覺出右邊的會在左邊的前面,拉出了前后的空間感。這就是我們的輪廓虛實了。

          顏色虛實:越貼近背景色的顏色,在空間上會感覺處于后方。



          還是這兩個元素,如果把其中的一個顏色調成和背景貼近:



          兩相比較,顏色更實的飛碟,會處于顏色較淺的飛碟前面。

          1.3.3 大小

          越大元素會感覺越近,越小的元素感覺越遠。

          在實際操作中我們一般可以利用不同元素來制作這個效果。

          比如這是一堆元素,如果大小都差不多,就會感覺是平鋪在一起的,沒有空間關系。



          如果調整它們的大小, 重新擺放,通過近大遠小的原理,就可以很輕易地打造出元素之間的前后關系,從而營造出空間感了。



          大小對比空間再其他畫面中的應用:



          1.3.4 明暗對比

          除了虛實、大小之外,明暗也能對比出前后關系,從而營造空間感。



          通過紋理層次的明暗對比,一明一暗的對比,也能拉出前后關系。從而營造空間感。



          1.3.5 穿插

          利用元素相互穿插產生的前后關系,也能營造出空間感。

          這是1個元素和兩個圓的平鋪,沒有交集。



          如果我給他們穿插重疊在一起:



          那就能產生元素之后的疊壓前后關系,從而也能營造空間感。

          利用在海報中:



          以上這五種方式就是我們今天分享給大家的方法啦,

          在視覺海報的打造中,基本都不是只靠其中一種方法去打造空間感,而是3種,甚至5種一起運用,可以讓塑造的空間感的更有層次細節和沖擊力。

          比如:輪廓虛實+顏色虛實+大小,或者:穿插+大小+明暗。

          大家一定要靈活運用,自由組合,以畫面最優效果為目標去做,不要局限在某一個框架里。

          2. 字體性格

          2.1 什么是字體的性格

          字體也有字體的性格,不同的字體會呈現出不同的字體性格特征,比如高矮胖瘦、敏捷、邪惡、可愛、優雅文藝等等等等。通過精準地對字體的結構,筆畫粗細,細節調整,字體效果等的處理表現字體的差異化,使字體的性格調性,與畫面內容相匹配。

          2.2 性格有哪些

          2.2.1 力量感、沉穩

          特點:橫細豎粗/留白少/重心偏下/轉折筆直



          2.2.2 可愛

          特點:圓潤/不規則/擴張



          2.2.3 優雅

          弧度/纖細/重心偏高



          2.2.4 活力

          特點:傾斜/筆畫延伸/筆畫干脆,轉折彎曲很少


          2.3 字體設計實操

          字體還有各種各樣的性格,比如魔幻、哥特、血腥、恐怖等等。

          我們在做項目的時候,字體的感覺就一定要抓得準,符合整個畫面的調性:

          比如這種歐式哥特的畫風, 字體就可以加一下哥特元素,點綴點玫瑰、藤條。



          剛硬科技的畫風,字體筆畫就可以粗一些,添加點科技感和幾何圖形,營造超前科技的感覺:



          植物自然的風格筆畫就可以柔和一些,帶有弧度,把一些畫面元素圖形化點綴在上面:


          2.3.1 字型特點的提取

          具體實操怎么做的呢?我們今天就給大家分享一個案例,看看是怎么操作的:

          這是一張視覺,我們要給他做一個主標題,這個主標題的字型特點應該如何從圖里提取呢?


          我們要提煉出三個點出來才能知道如何去做:


          1.風格

          我們先分析這張圖,它的一個風格是有點魔幻+復古,神話傳說加西域古代的一種史詩感。

          我們可以找一些神話類史詩的類似的參考看看:



          特征:

          1.復古

          2.重心高.

          3.不用那么特別復古可用襯線體變形

          2.特征

          這個我們可以從人物身上去提取,人物有盔甲,我們可以把盔甲的特征提取出來:



          3.配色

          顏色也不是亂選的,一定要和圖能呼應關聯起來,那顏色怎么選呢?其實畫面里已經幫我們選好了配色。我們觀察一下畫面:



          整體偏冷調,墨綠色居多。,對比色有紅色和黃色。

          那我們為了突出字體,又能和畫面呼應,那黃色就是再好不過的選擇了。

          那到這我們的設計目標就比較明確了:


          2.3.2 字型設計

          1.基礎字型:

          雖然是往復古了去做,但也不是真做成甲骨文,還是結合一下使用場景,和識別度。參考中也有部分是使用宋體去變形的,所以我們可以先選一個宋體的字體出來當做基礎字型。


          為了保證識別度,我們可以只做部分復古。

          這里我挑靈下面“火”字,因為這個字處在中間,比較顯目。



          2.調整重心

          參考復古類型的字體重心都會往上偏移,讓字體稍顯長一些。



          3.加入特征

          (1)鋒銳:默認字體上有很多圓潤的地方,我們都改成尖銳的感覺。



          把每一個筆畫都改掉:



          (2)彎曲的尖角:

          圖形提煉:


          加入到字體當中:



          字型到這里就完成啦。

          (3)字體轉折的厚度:

          字型完成了,字體轉折的厚度我可以再字體效果上去做。在筆畫中間加一個層次,以明暗分隔開,以實現盔甲上這種轉折的厚度:



          全部加上,看下完成效果:



          結合到畫面中看下:


          效果還是很不錯的,整體風格也比較統一。

          這一塊就是關于字體性格的內容,我們繼續往下看!

          3. 顏色情緒

          接下來我們來說下關于顏色情緒的問題!

          配色感覺不對?顏色臟?配色不高級?

          這些問題一直困擾著我們。應該怎么配色呢?其實顏色也是有規律可循的,這篇文章就是帶給大家一些顏色方面的啟發,讓你了解配色的底層邏輯,從而更明確快捷地配出想要的顏色。


          3.1 飽和度到底在傳遞給我們一些什么

          認識色彩飽和度的情緒:

          因為不同的配色會帶給觀者不同的情緒感受,只有在先了解不同顏色特性的基礎上才能為我們的配色指明方向。我們做出的畫面想要傳遞什么感覺,這種感覺對應什么顏色?

          只有搞懂了邏輯,在之后的工作中,才能為我們的配色方案指明方向,而不會一開始就被難住。

          如果我想配一個積極熱鬧活潑的畫面,顏色怎么配呢? 如果想配一個溫柔恬靜小清新的畫面顏色又該如何選擇呢?他們都有什么特點,為什么會這樣?往下看

          3.1.1 積極活力

          我們先來看幾組圖片



          用吸管工具提取一下它們的顏色觀察

          我們可以看到這類海報視覺上都能給人一種熱鬧、動感、活力的feel。

          通過顏色提取,再觀察它們選色的位置,可以發現它們的的配色的純度和飽和度都非常高。

          這是為什么呢?接下來我們降低飽和度看看會發生什么:



          可以很明顯的感受到畫面中已經失去了那種動感、熱鬧和活力的感覺了,整體更趨于平穩和安靜。

          所以,高飽和度的配色會帶給觀者活力,動感,熱鬧的情緒。常常應用于一些電商、運動品牌的視覺項目中,用來渲染or打造年輕、活力、熱鬧、動感等氛圍。

          3.1.2 溫柔平靜

          我們再來看一組:


          這一類圖片就會給人一種文藝小清新的feel,這類配色和熱鬧、運動的感覺完全不同。

          都是低飽和度高明度的顏色。所以,低飽和度的顏色會給人傳達平和、放松、舒適的心情。

          3.1.3 輕松休閑


          這一類的圖片就給人以中正休閑的感覺。飽和度都趨于中性,不過高,也不會過低。

          其實原理就是在取色器里,



          我們看同一張圖片,給我們的感覺:


          高飽和度配色給人感覺沖擊力很強,具有活力,對比非常強烈。

          中飽和度畫面就弱了一級,視覺沖擊力沒那么強。畫面會放松一些,適合傳遞休閑的感覺。

          使用低飽和度的顏色時,我們看到畫面更冷靜了,有些高級灰的感覺。

          在以往的實際工作當中,我也是先用飽和度來定畫面的大情緒基調,只有大的感覺對了,后面才不會出大問題。比如像一些戰斗、pk、熱血類的banner,都用高飽和顏色:


          我們可以來吸取他們的顏色看看:



          基本都是靠右邊的顏色。

          而像我在做下面這種類型的banner時,就會使用到中飽和度的顏色,給人一種輕松休閑的感覺:



          我們再看下他們的色域:



          都是趨于中間的位置。

          最后一種低飽和的顏色,像下面這種作品,就有一種文藝、清新的感覺:


          再來看看他們的顏色色域



          都是比較靠左的顏色。

          用飽和度來定畫面的大基調,還是非常好用的,可以說是屢試不爽,大家可以好好理解并且用起來!

          總結:



          高純度,高飽和度的顏色,會讓人感覺激動、積極、動感、醒目、記憶深刻等特點感官,常常應用于一些電商、運動品牌的視覺項目中,用來襯托年輕、活力、熱鬧、動感等氛圍。



          中飽和度的顏色飽和度和純度都適中,顯得中正平和,又不會有低飽和度那樣的“平緩“,想要視覺年輕一些,但又不想飽和度那么的強烈,可以嘗試選擇中度的顏色。


          低飽和度的顏色,會給人平和,舒適的感受,常常會結合大量無彩色一起使用,讓畫面傳遞出簡約,自然,小清新文藝的感覺。

          3.2 你想給別人傳遞什么

          配色的方法有很多,搭配在一起千變萬化,但都離不開一個點。你想給別人傳遞什么感覺?是要年輕、活躍,還是安靜、唯美?只有明確方向,在想想這個方向上的顏色有什么規律可循?搞清楚目的,我們再去做配色是不是就會輕松很多?


          作者:菜心工作室 來源:站酷

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

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

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



          如何提升UI設計的高級感

          純純

          創建美觀、可用和高效的UI界面需要花費時間進行設計細節的打磨,本文從視覺和情感化設計兩個方面來說說如何提升UI設計的高級感。 


          1、視覺元素

          在互聯網產品日趨成熟的今天,你會發現所有的App越來越像,似乎是同一套模版設計出來的產品。而這種普適化的設計會導致同質化嚴重,使得設計不精致,產品沒有氣質和品牌感。一個App設計是否精致,是否富有設計感,在于它的細節,這就意味著我們在進行設計的時候,要從細微之處著手,從多方面去鉆研如何創造出打動人心的UI設計。本節總結了12個簡單直觀的提升設計感的小細節,一起來學習。


          1.1 使用顏色深淺構建層次結構

          在對UI 文本進行樣式控制的時候,最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比,所營造的對比并不夠,嘗試結合色彩和字重來營造更好的對比效果。


          每種顏色都有一個視覺權重,這有助于在內容中建立層次結構。通過使用顏色的深淺,為元素賦予不同的重要性。如果可以的話,你甚至可以采用兩到三種顏色:

          • 主要內容使用深灰色(諸如標題,但是不要用純黑)

          • 次要內容使用灰色(比如商品介紹)

          • 輔助性內容采用淺灰色(比如發布日期)

          類似的,在UI設計的時候,通常兩種不同的字重足以營造出優秀的層次感:

          • 大多數的文本采用正常的字重(400到500,具體取決于字體)

          • 對于需要強調的文字采用較重的字重(600到700,具體取決于字體)

          ▲主標題字重為600,其他標綠點的文字字重都為400



          應當盡量不要讓正文部分字重低于400,因為這一部分字體本身尺寸已經較小,低于400會使得可讀性不佳。如果你依然需要降低字重,那么不妨讓字體色彩更淺一點,或者替換成其他識別度較強、字重相對較小的字體。


          灰色文字在無彩/彩色背景下要分開處理

          不要在有色背景上使用灰色的文本,在白色背景下,將黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不錯的淡化其視覺效果的做法。

          但是在彩色背景下,想要降低和背景色之間的對比,通常有兩種方法:

          一是降低白色文本的不透明度;二是讓文本逐步接近背景色,而不是改為灰色。

          ▲左圖設計師職位信息為白色文字降低不透明度,右圖為和背景同色相高明度的顏色



          其次當涉及長篇內容時,大面積的深色粗體字會給人一種沉重感,而且很跳躍。通過選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個問題,使文字更容易被識別。


          1.2 統一色調

          選擇一種基礎色,再調整色調和顏色深淺來增加均衡。設計時避免用過多的顏色。如果項目允許,只需使用固定的色板,通過調整基礎色的飽和度和明度,利用這種簡單的方式為設計增加一致性。


          1.3 干凈的陰影

          陰影是UI設計中最常見的視覺表現手法,它可以增加元素的深度,使其從背景中脫穎而出,引起用戶的注意力,同時也能增強畫面的視覺層次感。相比于采用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了最常見的光源特征,光線從上往下照下來所營造的陰影效果。


          這種輕柔的陰影呈現出的干凈,增加了畫面的精致。如果陰影的范圍太小或顏色太深,位置也沒有偏移,而是聚集在元素的四周,就會讓畫面更加扁平,讓視覺變得厚重,呈現出不精致的畫面感。

          陰影不一定是黑色的,還有一種擴算陰影是模擬元素本身的顏色投射在背景上,由于陰影與元素的色調一致,因此呈現出十分融洽的畫面感。在UI設計中,這種手法不宜過多使用,否則呈現出的各種色彩搭配會讓人眼花繚亂。


          1.4 個性的圖標設計

          合格的設計師能夠繪制風格統一的圖標,而優秀的設計師能夠創造風格獨特的圖標。我們能否在追求大小一致,圓角一致,線寬一致和配色一致的同時,為它的視覺表現力加入更多的創意呢?例如下面這組圖標設計,無論是在圖形上的創新,還是顏色搭配上都呈現出無與倫比的創意。


          標簽欄作為一個App的全局導航起著至關重要的作用,它的設計影響著整個產品的視覺風格。通常,大多數App都是使用iOS規范的設計樣式(默認灰色,選中填充品牌色),這樣的設計太普通,太常見了。要想讓標簽欄圖標設計精致和富有個性,可以豐富每一個選中態圖標的視覺表現,例如給圖標加上背景和表情,即顯得生動有趣,又增加了用戶的好感,給人留下深刻的印象。

          3D立體圖標設計是近幾年來的流行趨勢,看上去十分精致、華麗,但是看久了會讓人產生輕微的視覺疲勞,同時因其復雜的結構會增加用戶的認知成本。一般在外賣美食類應用中比較常見。


          1.5 Tab的設計感

          Tab是App設計中最常見的控件之一,它源自Material Design的設計規范。現在很多iOS產品當中也開始使用這種導航欄樣式來進行設計,而原本屬于iOS規范當中的分段選擇器變得不那么常見了。

          在視覺表現形式上,Tab和標簽欄同樣也分為選中態和未選態,它的設計較為簡單,通常是使用一組文字標簽,通過顏色或在標簽下加上小長條來區分兩者的狀態。因為它簡單,卻越難設計出彩,要發揮極大的設計想象力,跳脫出設計規范的限制,才能找到完美的方案。例如蝦米音樂的Tab選中態是一段音頻波線,再配合文字的大小對比,一個富有設計感又符合產品特征的Tabs就被創造出來了。


          我們還可以從品牌基因中獲取靈感,品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中態的小長條,這樣就建立起視覺上的聯系,讓用戶產生由內而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上,既讓界面視覺獨一無二,又進一步強化了用戶對品牌形象的認知。


          1.6 無框設計 去繁從簡

          在UI設計中,有許多的裝飾元素,如卡片的邊框、列表的分割線等,雖然邊框,分割線是分隔兩個元素的好辦法,但是它不是唯一的方法,使用過多會讓整個布局的設計感降低,或多或少都會干擾用戶瀏覽的視線,讓信息內容失去注意力,因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次,讓畫面變得干凈,整齊:


          使用陰影

          陰影同樣可以營造出邊界感,而且相比邊框分割線更加微妙,并不會顯得突兀,不會分散用戶的注意力,讓內容更聚焦。


          使用不同的背景色來區分

          通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以,你所需要做的就是在不同的區塊采用不同的背景色,并且嘗試刪除分割線,因為你根本不需要它。


          增加額外的留白

          創建元素之間的分離效果,并不一定要通過線框來表現,只要增加留白,讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。


          1.7 統一設計元素

          在App中的每一個界面都有許多元素,那些同類的元素應保持統一的設計樣式。通常個人中心的標簽欄圖標是一個人形剪影,它代表著用戶,因此可以在展示用戶頭像和用戶形象的界面中延續使用。如果圖形擁有獨特的外觀,如橢圓矩形,也可以作為視覺符號的一種,延續到其他界面中,成為圖形或按鈕的外觀。這樣,整個界面就被統一的設計元素聯系起來了,給用戶始終如一的一致感。


          1.8 符合產品氣質的字體

          選擇符合產品氣質的字體,可以與產品的定位相吻合,傳遞給用戶正確的情感意識。雖然默認字體可以滿足大多數App 的設計需求。但會出現一個問題就是,系統字體的普適性并沒有什么特色,在一些特定的情境下就顯得收效甚微。例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺,換成系統字體后,整體感覺在氣勢上就變弱了很多。


          1.9 第三方圖標風格統一

          大多數App都支持三方登陸,他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標入口,這也是設計師最常忽略的內容,往往是直接將第三方圖標調整一致大小和擺放整齊位置,沒有針對它們再設計。一個設計精致的App不應漏過任何的細節,我們可以以自家App的圖標風格為依據,對第三方圖標進行優化設計。


          1.10 圖片中尋找色彩

          App中優美的圖文設計,能帶給用戶如沐春風的視覺享受,它非常重要。我們經??吹轿淖织B加在圖片背景上的設計樣式,為了減少復雜圖片背景對文字的干擾,通常的做法是疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這不是最優的辦法。我們可以從圖片中提取主色調用于疊加背景的填充色,這樣就使文字、色塊和圖片融入到一起了,畫面變得高級和富有設計感。


          1.11 提高圖片質量

          圖片的質量影響著整個App的格調和用戶的情緒,高品質的圖片給人愉悅的視覺享受,產生美好的聯想。而低品質的圖片會瞬間拉低App的質感。在App設計中,一張漂亮的圖片從收集到上線,需要經過裁剪,調色等過程才能被使用。即使是普通的商品圖片,我們將它摳圖后調整成統一大小,再加上干凈的背景,就能立刻提升商品的美感,界面視覺也會變得美觀、整潔。


          1.12 卡片式設計

          現在的UI界面設計中,卡片式設計已經是一種非常常見的設計形式,它有利于信息分層和整合,劃分出更加清晰的組織結構,實現復雜內容的簡化處理,提高空間利用率。同時卡片式設計通常很依賴視覺元素,很強的視覺元素正是卡片式設計的一種優勢,也是提升設計品質感的良方。



          2、情感化設計

          心理學認為,情感是人對客觀事物是否滿足自己的需求而產生的態度體驗。只有當產品觸及到用戶的內心時,使他產生情感的變化,那么產品便不再冷冰冰,他透過眼前的東西,看到的是設計師為了他的使用體驗,對每一個魔鬼細節的用心琢磨,人們會產生愉快、喜愛和幸福的情感。情感化設計并不是轟轟烈烈,有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心,使用戶獲得愉悅的使用體驗。讓設計變得高級不僅僅是視覺層面,這些簡單而美好的設計細節充滿了積極情緒,它是滿足產品的功能性和易用性之后,追求更高層次的目標。


          2.1 提示性文字

          語言是情感化設計最直接的利器,擬人化的對白相比冰冷的話語更能獲得用戶的好感,賦予產品的新的生命力。例如App那些push推送通知,因為用戶每天收到的PUSH實在是太多了,早已心如止水!這個時候,你就需要一條成本低、效率高的PUSH文案,去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣,讓人看到會心一笑。


          2.2 下拉刷新

          下拉刷新是用戶在App使用中經常進行的操作,常見的下拉刷新設計是圖標加文字的形式,這種設計簡單、直觀,但毫無設計感,不能引發用戶任何的情緒。


          下拉刷新是一種臨時狀態,豐富它的設計細節不會造成與產品界面的格格不入,相反,一個富有設計感的下拉刷新設計能讓產品獲得用戶的好感。例如uc頭條在下拉刷新時會蹦出一只奔跑的小鹿,暗示正在快馬加鞭的加載新內容,小鹿形象延續了品牌logo。作為資訊類產品,內容更新速度至關重要,奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產品產生好感,瞬間就讓下拉刷新變得生動有趣。


          2.3 頭像設計

          個人中心頁與用戶信息密切相關,用戶的虛擬形象在這里得以展現,常見的設計是一個用戶頭像加登陸文字的形式,這種默認的頭像設計無法得到用戶的認同感。

          現在很多的產品已經放棄了死板的默認頭像,給用戶更多的選擇。賦予產品一些人格魅力,可以讓產品富有生命力,消除人機界面的冰冷交互,幫助用戶和產品建立友好的聯系。例如美團外賣和躺平,它們各自的身份都代表了產品的氣質和用戶的屬性,讓用戶產生一種身份的認同感。


          2.4 缺省頁化解負面情緒

          通常狀態是,當前頁面沒有內容或無網絡狀態下出現的頁面。常見的設計是圖標加提示文字的形式,這種簡陋的設計會給用戶心理造成很大的落差,陷入負面情緒中。情感化設計在此時就可發揮巨大的作用,它通過設計手段來減輕用戶在看到一個毫無內容的界面時所產生的挫敗感。 設計師可發揮的空間很大,根據產品屬性和品牌延展圖形,結合動效或插畫等情感化設計,可以很好的豐富頁面內容。例如躺平的空白頁呈現出一種賤萌的場景,讓用戶會心一笑,使產品充滿了趣味性。


          2.5 標簽欄微動效

          情感化設計變得越來越豐富,圖標設計上升至可以展示動畫效果。通過動效的使用,標簽欄切換變得不再死板。用戶在頻繁切換頁面時,不再覺得單調。精心設計的動態效果,能夠緩解用戶等待時焦躁的心情,從心理上縮短用戶等待時長,讓品牌更加深入人心。


          2.6 模擬用戶行為

          如果一個產品可以模擬用戶的行為,將用戶代入真實的情境中,用戶就會對產品產生深刻的認同感。例如「潮汐」會根據時間場景和季節變化,播放不同的背景音樂來營造氛圍。雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。


          情感化設計可以拉近用戶與產品之間的距離,在更深的層面體現出對人性的關懷,為人們帶去情感上的愉悅和感動。洞悉用戶的行為,換位思考去滿足用戶的需求,情感交流就產生了。例如當你截屏了一張圖片,打開微信對話框時就會自動顯示這張圖片,提前預知了你發截圖的需求。

          再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣,因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。在「淘票票」上購買電影票時,你會發現影片詳情頁會有彩蛋提醒,告知你電影是否有彩蛋且彩蛋會出現在影片的什么位置。有了這個提示信息,就不必再為了不確定的彩蛋期待浪費時間啦。


          2.7 有趣的細節設計

          俗話說:有趣的靈魂萬里挑一,可見有趣是可以引發交流進而讓人們產生積極的情緒。 在UI設計中,有些有趣的設計是隱形的,需要用戶自己去發現,當用戶找到這顆彩蛋時,就會獲得一份喜悅和樂趣,增強用戶對產品的探知欲。例如在電腦端打開B站的鬼畜區長按這個返回圖標10秒左右,你會打開鬼畜區的新世界(⊙o⊙)(友情提示:記得戴上耳機或調小音量)其實長按「返回」10秒后網頁下方會出現一條黑框提示「嘗試輸入字母,發現鬼畜秘密」。按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕!


          有些有趣的設計又是顯性的,目的是讓用戶與產品引發交流從而產生積極的情緒。例如成為優酷視頻會員,不僅可以尊享豐富的影視資源,還能讓自己的ID在發彈幕時使用劇集相關角色的頭像。帶角色扮演頭像的彈幕,讓發言更有劇集代入感。這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性,一方面也豐富了彈幕區的多樣化,可謂一舉兩得了。


          總的來說:UI設計的“高級感”意味著在視覺層面要從細微之處著手,創造出精致富有設計感的畫面;另一方面要從情感化設計出發,使用戶與產品產生情感上的共鳴,獲得更高層次的使用體驗。


          作者:印跡_ 來源:站酷

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

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

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


          我拼命問清楚了這些問題,結果開發卻把我拉黑了!

          seo達人

          一、代碼更容易實現線性漸變、徑向漸變、角度漸變。網格漸變往往需要我們切圖

          設計中,我們通常用的漸變有:線性漸變、徑向漸變、角度漸變、網格漸變。

          圖片
          在這當中,代碼實現線性漸變、徑向漸變、角度漸變 相對來說要簡單一些,而網格漸變則需要消耗更多的開發精力。我們也不會在這上面去增加開發工作量。
          所以,在我們輸出設計稿給開發的時候,有網格漸變的部分直接切給開發。比如下面設計稿上的漸變背景色:

          圖片

           

          二、文字能不用透明度就不用透明度,直接給原始的16 進制色值

          16 進制色就是在開發中設定顏色的代碼,每個顏色都有對應的 16 進制色,如 #000000 是黑色,#FFFFFF 是白色。

          比如我在調這個文字顏色的時候可以用 #000000 40% 的透明度,也可以直接用 #999999 這個色,這兩個呈現的顏色沒有任何區別。

          圖片

          但是交給開發寫的話,第一種除了要寫 #000000 的黑色之外,還要寫一串 Alpha 透明值,這樣做會更消耗性能,且在不同屏幕分辨率、不同操作系統下,所實現的透明效果也會有偏差。

          所以,在這種非必要情況下,樣式可以用不帶透明度實現的話,就不要帶。

           

          三、切一整張大圖,可能會發生拉伸變形或是圖片被裁剪的問題

          如果是一整張的切下來,會導致不同尺寸的手機把切圖拉伸變形,或者會裁剪多出比例的部分。

          比如我們切的這張啟動頁大小為 375*812 的三倍圖,這張圖在 iphone13 mini(375*812px)和安卓(360*640px)上等比展示就會產生不同的效果——

          安卓屏就會被裁切掉一些(展示圖片來自網絡)。

          圖片

          如何保證在這種情形下,啟動頁的圖片可以適配不同尺寸的屏幕呢?

          我們可以將上下分開切,讓開發分別定上面插畫和logo的位置,以此保證他倆都能完整展示。

          將一張圖切成這兩張:

          圖片

          設定插畫距離頭部是 30px,底部 logo 距離底部是 30px

          圖片

          這樣在其他屏幕上,也是依照「插畫距離頭部30px,底部 logo 距離底部是 30px」這個規則來寫,就能保證這張圖上的所有內容不被裁切了!

          圖片

           

          四、不要將切片與 icon 貼在一起

          一些初次切 icon 的同學會這么做↓

          圖片

          這么做會導致以下幾點問題:

          · 如果 icon 有 0.5 像素點,那么貼邊切很可能會被裁掉一些;
          · icon 的高矮長寬不一,但開發會全按一個尺寸來寫,導致 icon 被拉伸或壓縮;
          · icon 設計規范不一致,出現各式各樣的尺寸。

          所以我們都會給一套的 icon 固定一個同樣大小、正方形的框,以此來規避掉以上出現的問題。

          圖片

           

          五、通知icon與帶數量的小紅點不用切在一起

          我們在做通知消息的時候右上角會有消息數量的標識:

          圖片

          當數字分別為個位數、十位數、99+ 時,紅色底板的寬度會根據數字長短發生變換:

          圖片

          我們不需要每種情況的小紅點都切一遍,只需要定好數字在紅底里的左右間距,讓開發根據數字長短做自適應即可。

          圖片

          所以我們提供切圖只需要切鈴鐺部分。

          圖片

           

          總結

          以上就是我在實際項目中遇到的切圖問題了,切圖是一項靠經驗積累的UI必修課,希望你在閱讀之后留個印象,以后遇到類似問題也有了解決之法。

          歡迎在評論區分享你與開發對接所遇到的那些事兒~

           

          作者:花菜

          轉載請注明:學UI網》我拼命問清楚了這些問題,結果開發卻把我拉黑了!

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


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


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


          職場中要學會拒絕

          seo達人

          一、拒絕拿來主義

          相信大家都遇到過同事或者朋友索要源文件的情況,面對這種拿來主義我們要學會拒絕。工作對接中非必要不提供源文件給無關聯的同事,團隊項目文件流傳出去也許就是這個因素。

          圖片

          要學會拒絕,源文件也是我們的勞動付出,不要把自己的勞動果實提供給別人,助長他誤導面試官等情況發生。工作中的對接需要驗證人員關聯性,團隊文件流傳出去要先向直屬領導匯報,源文件也是屬于團隊的資產。

          圖片

          拒絕拿來主義,不要被“不好意思”拒絕這種性格所束縛,勞動果實需要付出的關聯人員才能共享。

           

          二、拒絕不公平待遇

          在職場中我們都在不斷努力發揮自己的價值,希望以此獲得更好的晉升機會和待遇回報。如果只有付出沒有與之匹配的勞動回報,只會讓員工失去奮斗的意志,我們也是會拒絕不公平待遇的。

          圖片

          根據自己的專業能力和經驗值,我們要分析出自己的行業價值,無論是求職談薪還是在職漲薪,我們都要盡量追求接近公平。如果當時妥協了,就得確保自己不會有心理情緒,不然不僅工作不順心,也會影響自身專業的提升。

          拒絕不公平待遇需要有拒絕的勇氣和專業實力,專業能力的提升和作品的沉淀至關重要,只有這樣才能擁有更多的選擇權。

          圖片

           

          三、拒絕長期職責偏離

          在職場中偶爾配合完成非本職工作的內容實屬正常,但是僅限于偶爾配合。如果長期偏離自己的專業職責范圍,也是得不償失的,要根據自己的職場計劃學會拒絕。

          專業能力的提升離不開項目經驗的積累,如果長期處于偏離狀態,會影響我們的經驗沉淀,進而影響專業能力的晉升。如果在一個團隊長期干非專業范圍的工作,我們要學會拒絕,選擇更適合自己的團隊。不要受溫水煮青蛙式的工作環境而影響,最終使得自己雜而不精,想要跳槽到更好的團隊就會變得非常困難。

          圖片

           

          四、拒絕違規設計

          工作中的設計任務雖然我們無法改變,但是也要留意自己的設計底線,也是設計范圍的法律底線。不要稀里糊涂的干活兒,設計也是要有所為而有所不為,一旦觸碰底線設計師也是難逃追責。

          如果不幸遇到這樣的團隊,就要早點離職,不要被高待遇所誘惑。拒絕違規設計,做一名懂法的設計師。

          圖片

           

          五、拒絕同事的“任務”

          這個問題就是我們一個老學員咨詢我的問題,事情的大概意思就是領導分別給她和同事安排了工作,同事覺得她的內容部分不是很重要,讓她隨便做做就可以,剩余的時間來幫自己完成任務。遇到這個問題她很苦惱,自己的任務還有別的都還沒有完成,是否要答應同事的要求。

          遇到這個情況我們要第一時間拒絕,回復的話術是我得先完成自己的任務,如果到時候有時間再根據情況看。職場中沒有隨便做做這個說法,領導安排的任務就要發揮自己最佳的能力去做到極致,展示出自己在團隊里面存在的價值。如果本職工作都沒有做完,就不要去當職場“好人”,到時候成就了別人,結果自己的事情一塌糊涂。只有在完成自己職責內容之后,再詢問領導有沒有其他安排,如果沒有其他安排的情況下我們再考慮援助同事的任務。

          圖片

          職場中每個角色都有自己應該承擔的責任和輸出,所謂的能者多勞是在量力而行的基礎上,如果自己的職責都沒有做到極致,就應該優先保障自己的輸出質量。要學會拒絕同事的“任務”,除非這個任務是屬于共同的任務,再結合優先級去進行排序。

          圖片

           

          六、拒絕長期低質量輸出

          在職場中不只是為了獲得報酬,高質量的輸出不僅成就了項目,也是成就了自己的專業沉淀。如果是自己沒有擺正態度,就要及時調整心態,用最好的輸出不斷提高自己的職場價值。

          圖片

          如果是團隊現狀如此,整天干著沒有質量的輸出,久而久之就會讓自己失去專業優勢。到時候想要晉升或者跳槽的時候,就會發現自己的專業能力差距甚遠,還沒有一份像樣的作品集。

          職場中要理性的分析自己的現狀,拒絕長期低質量輸出,這樣只是在耗費自己的青春。想要不斷提升自己,就要不斷完成具備挑戰的任務,只有項目質量越高,我們才能學習并掌握更優秀的經驗。

          圖片

           

          七、拒絕長期無所事事

          養老式的職場生活估計大家很羨慕,但是真的置身于這樣的團隊中,估計距離淘汰也只是時間問題了。

          在團隊中如果長期無所事事,不僅會荒廢自己的設計執行能力,也會讓自己的心態變得消極。如果遇到高強度的工作出現,就會想要去逃避,這是一個非常危險的信號。我們不能長期沒有輸出,這樣的職場環境我們要及時拒絕,青春的我們不是為了享樂,現在不去磨練自己,未來就會被職場所拋棄。

          圖片

           

          八、拒絕“畫餅”式承諾

          還是職場小白的我,也經常被領導或者老板“畫餅”式承諾,只能說是踩坑也是一種修行。不過以過來人的經驗回顧時,希望大家不會再被“畫餅”,學會拒絕“畫餅”式的承諾。

          圖片

          職場黃金期是我們提升專業和積累行業經驗的關鍵時期,如果沒有發揮的舞臺就要及時做出改變,不能被不確定性的承諾而耽誤自己的計劃。只有在自己的底層能力達到峰值之后,才能具備更好的話語權,現在公司需要你不代表以后不需要更優秀的人,所以自身優秀才是最有保障的。如果是待遇層面的承諾也是無效的,當前公司的待遇條件一定程度上決定了跳槽的談薪起點,承諾待遇不代表實際待遇。

          圖片

          如果承諾的不能如期而至,我們就要多為自己打算,不能超過自己的忍耐期限還繼續拖沓。

           

          九、拒絕低能領導

          在職場初期進入大公司固然重要,但是跟對領導往往比公司本身更重要。領導的專業度決定了我們在團隊中成長的速度,如果遇到低能的領導,不僅容易原地踏步,很容易到達專業瓶頸期。

          圖片

          有的領導也許不是專業出身,但是管理方法和平時的指導性建議很好,我們也能找到更多沉淀經驗的思路和方向。如果領導專業能力不行,還過于武斷和眼界不足,項目只能是弄得一塌糊涂,這樣的領導是不可能給我們帶來成長的經驗的。

          進入團隊后通過一段時間的對接,我們要及時判斷出領導的能力,要學會拒絕低能的領導。只有跟對領導才能快速成長,從領導身上學到的做事方法、思考角度、項目經驗等,是我們快速從小白變得成熟的關鍵。

          圖片

           

          十、拒絕低要求團隊

          在項目設計中,不是一稿過就是我們追求的目標,如果團隊要求比較低,是很難突破自我的。只有一次又一次的挑戰新難度,才能從固化思維中擺脫出來,掌握新的思考技巧。所以,我們也要學會拒絕低要求的團隊,不能提前過著溫水煮青蛙式的工作狀態。

          圖片

          身邊都是優秀的設計師,你的能力也會逐漸受到影響,遇到問題才能獲得更多解決方案。有一個要求比較嚴格的領導,團隊也比較注重設計質量,你才能輸出更優秀的作品,沉淀更優秀的經驗。

           

          小結

          無論是在工作、學習還是生活中,我們都不能過度的順從和依賴,學會拒絕也是我們成長的關鍵。拒絕也是新的開始,也許能在新的過程中發現新的機遇,所以我們不要不敢拒絕。只要在拒絕之前做好冷靜的分析,排查出利弊關系即可,不能盲目辦事也不能委曲求全。

          圖片

          本文觀點僅代表個人的一些經驗反思,不足之處根據自己的實際情況判斷,我們互相進步。

           

          作者:黑馬青年

          轉載請注明:學UI網》職場中要學會拒絕

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


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


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


          按鈕位置如何合理設計?看這篇文章足夠了。

          seo達人


          一、按鈕的幾種布局

          按鈕的布局大致分為四種,分別為:導航欄布局、跟隨內容布局、偏向底部布局和底部懸浮布局。

          圖片圖片

           

          二、導航欄布局

          我們平時看到的導航欄布局有很多,如發朋友圈和發QQ動態。

          圖片

          為什么要將「發表」按鈕放在導航欄右側?

          以微信朋友圈舉例,在發送動態時,核心操作是為照片配文字或繼續添加照片。

          其他操作例如選擇所選位置、提醒誰看、誰可以看,同步到朋友圈,都是次要操作且不會調起鍵盤。

          用戶輸入文字之后,直接可以點擊附近的「發表」按鈕,快捷方便。

          能否將「發表」按鈕放在頁面中呢?答案是:不行!

          圖片

          將「發表」按鈕放在頁面,當輸入文字時,會導致鍵盤遮擋操作按鈕,無法快速點擊「發表」操作。

          除非是「發表」按鈕附近有很多需要鍵盤輸入的必填表單,不然不能這么做。目前來看,微信的「發表」按鈕的位置設計是最優解。

           

          三、跟隨內容布局

          常見于表單字段填寫時,如下圖所示。

          圖片

          那么能不能將操作按鈕放在導航欄右側呢?答案是不行!因為放在導航欄右側的話,操作路徑不順暢。

          放在表單下方是正常的從上往下操作流。

          有些設計覺得將按鈕底部區域,離大拇指更近,更方便操作,如下圖。圖片

          但是因為是表單填寫,會調起鍵盤,將提交按鈕給擋住,所以按鈕跟隨表單之后,更加科學。

           

          四、偏向底部布局

          偏向底部的操作按鈕通常是內容區域不需要調起鍵盤的使用場景。常見的如引導頁或結果頁。

          圖片

           

          五、底部懸浮布局

          底部懸浮布局,常用于非填寫內容超過一屏或審批等使用場景,特點是操作按鈕優先級高,方便用戶實時操作。

          如下圖電商購買按鈕。

          圖片

           

          六、布局總結:

          1、填寫內容為必填項、需要調起鍵盤且均集中在頁面頭部,則操作按鈕放在導航欄右側較合理。

          2、填寫內容在頭部,且調起鍵盤不會擋住操作按鈕,則按鈕緊隨內容較合理。

          3、不需要調起鍵盤來填寫內容,則按鈕放在偏向底部比較合理。

          4、按鈕非常重要,且非填寫內容超過一屏時,用底部懸浮布局比較合理。

           

          后記

          從這篇文章開始,我嘗試寫一些工作中很實用且基礎的文章。

          爭取每一篇文章都可以給大家一些收獲,這樣有助于在工作中使用。

          由于每個人的基礎不同,基礎類和進階類我盡量都覆蓋。


          作者:Echo

          轉載請注明:學UI網》按鈕位置如何合理設計?看這篇文章足夠了。

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


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


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



          LOGO排版,你還在瞎整么?

          seo達人


          圖片

          這個LOGO大家覺得怎么樣,很簡單吧!是不是有手就行?然后用你們經常用的排版排一下看看:

          圖片

          200塊錢,不能再多了…我們再看一下原作者的排版:

          圖片

          怎么說?2000塊錢怕是拿不下來這個LOGO吧?所以無論你的LOGO做的是簡單還是復雜,一個合適的排版都會為你的LOGO增加成倍的價值!

          OK,廢話不多說,讓我們開始吧~~!

           

          圖片

           

           

          圖片

          所謂謀定而后動,知止而有得。我們在做LOGO的時候,通常會先根據不同的行業和命題選擇相對合適的構成方式來表現。

          比如企業類的一般會用字母類、幾何重復、中英文這種簡約大氣的構成方式,你用一個擬人化卡通標志提交過去,客戶肯定會讓你滾犢子,而像餐飲、文娛這類命題就可以選擇更為親民,感染力更強的表現形式。

          圖片

          同樣的,LOGO的排版在選擇上也應遵循行業和圖形本身所體現的氣質來進行選擇。我們這里分三個點來看一下。

           

          圖片

          LOGO中的文字編排,通常都是為了更好的對品牌進行信息傳遞及整體美觀性而服務的,所以我們在字體的選擇上要考慮適不適合這個LOGO所體現的調性。

          圖片

          我們拿小米的LOGO來舉個例子,雖然200w的經費主要體現在LOGO里,但是在字體的設計上也是遵循了LOGO里MI的調性來匹配的,非常幾何化同時加入了小圓角。

          而當我們將字體換成一個文化氣質更加濃厚的襯線體時,你會發現這是啥玩意,200w瞬間變成20w。

          圖片

          那我們再換一個偏幾何一點,所謂“設計感更強”的字體,得,連20w都沒有了…

          圖片

          英文如此,中文同樣如此,比如下方的山島小食府案例,圖形LOGO本身是非常具有文化氣質的,而如果你選擇幾何化或者常規的黑體,則也是完全不匹配的。

          圖片

          上面的案例都是關于調性匹配的,還有一個點是圖形與文字的灰度匹配。

          如果圖形是比較厚重粗一點的時候,如果你的字體選擇的很細,也是非常不和諧的,有生活閱歷的朋友應該都知道尺寸合適的重要性…(如下圖)

          圖片

          那到底該如何知道到底咋樣才算不粗、不細呢,這個東西其實沒有一個評判標準,一般情況下會遵循以下規律:

          如果你是面構成的稍微厚重一點的圖形,則字體的粗度在Medium-bold左右差不多,可以拿字庫比對一下;如果你是線構成的字體,則字體的粗度差不多比你的線的描邊粗度粗一丟丟即可。

          圖片

           

          圖片

          大多數情況下,我們都是要給LOGO搭配標準中文和英文的。根據字體的特征點,我們大致可以將常用中英文字體分為以下幾類:

          圖片

          圖片

          圖片

          我們在進行字體搭配的時候,一般情況也是遵循這個規律來進行搭配即可。

          比如黑體配非襯線體、宋體配襯線體、圓體配圓體等,需要注意的是當中文以書法體為主的時候,英文通常都不會再選擇手寫的英文字體了,會比較混亂,一般會搭配同樣具有文化氣質的襯線體作為裝飾。

          圖片

          這幾種搭配的形式都是LOGO排版里比較基礎、常規且不容易犯錯的安全范圍,肯定也有黑體+襯線體這種不同搭配的形式存在,但是作為一個小白,還是先老老實實的按照常規操作來進行搭配!先保證不犯錯,再玩花活…

           

          圖片

          我們先看一些案例來找一找規律。

          圖片

          可以看到上面這些偏大型企業類一點的行業,一般選擇的排版都比較簡約,往往單個字母或者簡單中英文搭配即可,不會有過多的輔助元素出現,我們再看一些。

          圖片

          而上面這些LOGO,都有或多或少的輔助線或輔助文字元素來進行裝飾,因為與大型企業注重品牌傳播識別度不同,也有很多LOGO是需要一些裝飾來提升整體的美感和氣質。

          我們用兩個案例來實操一下看看。

          圖片

          左邊的LOGO是比較精致簡約的幾何化LOGO,所以我們用簡單的英文搭配就會非常高級;而右邊的LOGO,我們加入一些裝飾文字和裝飾線來排版。

          圖片

          我們違背這個規律,用相反的方式來做一下,可以看到所體現的氣質完全不一樣了,左邊的LOGO變得復雜,而右邊的LOGO則變得單調。

          圖片

           

           

          圖片

          說是危險區域,其實也可以算是新手禁忌區域,也就是絕不應該犯的一些排版問題!當然了,市面上肯定有一些LOGO是超脫區域之外的,所以給自己留了個臺階,哈哈哈,下面我們來看一下都有哪些需要注意的細節?

          首先我們先將LOGO劃分群組,可以分為圖形部分、文字部分、裝飾文字(宣傳語等)、裝飾圖形部分。其中裝飾部分都是可有可無的(根據前面所講的選擇性添加)。

          圖片

           

          圖片

          絕大多數情況下!文字與圖形之間的間距要保持一個合理的空間,不能太大,也不能太小,就像愛情一樣,太遠了不行,容易淡,太膩了也不行,容易煩。

          圖片

           

          圖片

          我們要知道文字、裝飾文字它們是一個組別的物件,所以在編排時也要將他們編排在一起,他們之間的間距不能超過與圖形之間的間距。

          圖片

           

          圖片

          無論是居中對齊,還是左對齊右對齊,最好都要貫徹到底,因為如果不對齊,就會產生額外的負空間,導致整體不美觀,不穩定。

          圖片

           

          圖片

          什么叫階梯狀呢?就是從圖形到文字按照從長到短,或者從短到長的順序進行排列,學過排版或者對排版有一定了解的同學應該都知道,這種排法往往不具備設計感和無法滿足視覺上的審美,如下圖:

          圖片

          其實就和我們的人生是一樣的,我們不會一直幸運的向上,這樣生活沒有挑戰,而且也不會一直向下,會徹底廢掉,有起有落,有長處有短處,才是最有意義的人生!

          通常我們都會選擇長短長、或者短長短這種有錯落感的排布方式。

          圖片

           

          圖片

          裝飾文字,一般是指我們放置的品牌slogan或是一些不那么重要的小文字。既然不那么重要,我們就不能對他過度的進行設計和強調,這里一般會出現兩種錯誤:

          圖片

          圖片

          一般情況下,裝飾文字都是文字組內最小的字號,如果是因為不放大而導致排列邏輯出了問題,則可以增加字間距來解決;且裝飾文字由于占地面積較小,所以一般會選擇閱讀性較好的普通黑體或宋體等,過多的設計感反而影響了主次關系。

           

          圖片

          裝飾圖形的存在,一般是為了彌補空間和強調某些品牌的調性,類似于補丁的作用,所以它也不應該太大太復雜,往往以LOGO中某個小元素演變而來,或者以印章的形式存在。

          圖片

          而很多同學為了裝飾而裝飾,直接將LOGO拿過來作為輔助圖形擺放…這完全就是畫龍點龍、畫蛇添蛇的做法- -!

          圖片

          還有一點是關于參考線的粗細問題,很多同學拿捏不準,一般情況下,參考線的粗細,會比你所以文字組中最細的筆畫再略粗一點點即可,大家平時一定要多觀察優秀LOGO的處理方式,多洗洗眼睛??!

          圖片

           

           

          圖片

          這里指的就是我們常說的標準字體的設計,因為客戶畢竟花錢了嘛,往往都希望得到一個專屬于自己品牌的字體,而不是常見的字庫字,所以一般會字體設計的同學做LOGO都比較容易做的出彩一些,關于標準字的設計,前些時間猴子哥哥已經寫了一篇詳細的教程,大家可以翻回去學習一下。



          可以看到,兩組的LOGO都很棒,強哥的二火如果單看LOGO的話妥妥是首頁級別的,但是就差在了字體設計和圖文編排上面,所以無論你的LOGO做的有多出彩,字體設計也是必不可少的環節!

          而字體設計就太深奧了,不可能用很短的篇幅來進行概括的,這里主要為不會字體設計的同學提供一種快速提升標準字設計感的思路及方法!

           

          圖片

          因為LOGO中的標準字更多的還是起到識別性閱讀性的作用,不需要很復雜的設計,所以我們可以將某些筆畫進行斷開,再不影響識別性的同時來提升設計感。

          圖片

          你看,簡簡單單,也就20秒的功夫,字體的設計感立馬提升了一個檔次,你說這需要字體設計基礎嗎?不需要吧,完全是用字庫改的…中文同樣如此!

          圖片

          斷筆的時候需要注意,選擇同樣的筆畫進行斷開,而不要這里斷一下,那里斷一下,很混亂無章法,且數量不要太多,會容易碎,適當來幾下就可以了。

           

          圖片

          省略某些不影響識別的筆畫,也是常用的一種設計方式。

          比如字母A,因為它特有的三角形結構,我們將內部的橫線直接省略掉,也是可以識別出字母A的。

          圖片

          再比如字母E,也可以簡化成三條直線,不過這個變化幅度就比較大了,一般情況下只能當做唯一一個變形使用。

          圖片

          還有小寫字母g,將右下角的連接處斷開,也是具備一個基本的識別性的。

          圖片

          像中文里的草字頭,將中間連接的地方省略,也完全OK。

          其他的類型就太多了,不一一展示了,有興趣的同學可以自己去嘗試一下,記住任何變化的前提都是保證最基本的識別性就好。

          圖片

           

          圖片

          還有一種操作是結構替換,這種通常都是將某個字母的負空間部分替換成和本行業相關的一個小元素,切記替換的元素不能太復雜,越簡單越好。

          最常見的就是字母O,因為其內部的空間較大,像咖啡品牌可以在內部填充一個簡約的咖啡豆的形態。

          圖片

          再比如字母i的上面的點,也是一個替換的不錯方向。

          圖片

          圖片

           

           

          圖片

          基本的排版知識已經講完了,下面來介紹一些常見的組合形式,這里主要分為了六個方向:

          1. 橫排;

          2. 豎排;

          3. 左右排;

          4. 斜排(特殊角度);

          5. 環繞排(徽章式);

          6. 嵌入排。

           

          圖片

          橫排是最基礎常見的排版形式,通常會將文字組排在LOGO的右側,也有的時候會排在左邊,根據LOGO的特征來決定,此類排版基本適用于任何行業的LOGO。

           

          圖片

          豎排和橫排一樣,也是最基礎的排版形式,通常都是可以互相相互轉換的,同時因為上下方的空間較大,會比橫排有更多創作的可能性。

           

          圖片

          左右排的形式相較上面的橫豎排不是很常見,它比較適合于偏向對稱形式LOGO,從而保持左右平衡,左右排的好處就是可以自行發揮的空間較大,可以作為橫豎排的一個拓展來進行嘗試。

           

          圖片

          斜排或者說特殊角度的排版,往往存在于一些偏藝術化、或者抽象化的LOGO中,它可以打破常規的排版方式,給人更耳目一新的感覺。當你的LOGO重心不是很穩定的時候,可以采用這種方式來填補不足的空間,達到整體平衡。

           

          圖片

          環繞式/徽章式的排版,一般常見在偏卡通或者偏藝術一些的LOGO中,它極大地增強了LOGO整體的趣味性,同時為我們增添一些輔助文字和圖形增加了想象的空間。一般餐飲行業以ip形象為主的LOGO都會增加一個環繞式排版的方向。

           

          圖片

          嵌入式的排版這個主要取決了LOGO本身的形態,如果LOGO中有很大的空間,則可以嘗試將文字組放入其內,這種方式一般更多的是卡通向的LOGO,比如球隊隊標等,或者LOGO本身不是很復雜的情況下,可以將文字放里面填補空間(類似文字構成的一種)。

          圖片

           

           

          圖片

          好了朋友們,前面了解了LOGO排版中需要注意的一些事項,叨逼叨了那么多,下面我們分別用不同行業的LOGO實操一下看看排版的可能性。

           

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          像這種企業類的LOGO,一般采用基礎的上下左右排即可,現實項目中,可以根據實際應用場景的尺寸,來制定不同的組合形式。

           

          圖片

          圖片

          像這類的命題我們可以增加一些裝飾英文和圖案來提升整個LOGO的調性,一些和前面重復的排版這里就不做演示了,我們嘗試一下其他更多的可能。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          好啦好啦朋友們,就到這里了,LOGO排版的樣式真的是太多了,沒辦法全部展示出來,但是無論怎么排,都離不開前面講的需要注意的點,最后再來復習一遍。

           

           

          總結:

          1. 抓準品牌的調性,選擇適合品牌的排版方式;

          2. 注意排版中常犯的細節錯誤,如間距、編組、對齊、錯落等;

          3. 選擇合適的字體進行搭配,適當設計,克制設計;

          4. 通過不同的組合方式進行嘗試,商業稿一般比較克制,根據實際應用的方向來進行編排,自己練習的時候,則可以嘗試變化不同的排版方式,讓你的logo更出彩。

          OK,那么今天的教程到這里也就結束了,照例,是很感謝今晚的相伴,如果你對本篇教程很滿意,請三連支持一下!朋友們!giao辭!


          作者:告白天

          轉載請注明:學UI網》LOGO排版,你還在瞎整么?

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


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


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


          你的設計太平了,2022開始流行用這種字體

          seo達人

          一、Morganite 

          圖片

          Morganite字體是我最喜歡的之一,非?,F代的一個字體,特別百搭,最重要的是免費無版權隨便使用,在很多大型設計里都能看見這個字體的身影。

          圖片

          電影海報設計就是運用了Morganite字體,調性很足,字體讓整個電影畫面充滿了好奇和神秘,大的數字字體恰到好處。如果你想做一些大型海報,糾結用什么字體,選擇這個準沒錯,平時做練習也可以。

          圖片

          如果你想做出輕奢大牌的感覺,也可以運用這套字體,比如上圖的雜志封面,以及耳機廣告,運用上去非?,F代時尚。

          圖片

          它的數字系列字體很好看,很窄很現代,適合于做大標題的核心視覺。

          圖片

          舞蹈海報設計,主視覺就是這個數字字體和人物的巧妙結合,現代和藝術的結合,讓畫面非常有藝術氣息。

          圖片

          印度海報也是類似的設計形式,將人物和畫面結合,形成這種現代文藝的感覺。同時這個字體搭配一些現代建筑,和建筑硬朗的氣質也相互呼應。

          圖片

          同樣這個字體也適合于體育產品,可以當背景,也可以當主體。比如上圖兩個設計,Morganite字體都承擔了視覺焦點。如果你的產品是體育運動,想做一些調性強,國際點的,直接大膽用這個字體。

           

          二、COLORTUBE 

          圖片

          看到上面這個字體,你是不是和我一樣感覺這是設計過的字體,其實不是。這個字體打出來就是專業,非常的現代。字體都是采用目前最主流的疊加效果,特別適合做一些海報或者單獨使用。

          圖片

          支持大小寫,筆畫非常簡約圓潤,適合年輕產品使用,并且配合很高級,看起來不違和,當然你可以自定義配色。

          圖片

          還可以直接拿這套字體做創意背景元素,用在背景上也非常好看,直接可以當背景使用。

          圖片

          這是我隨便P的一組,是不是也不錯,你可以大膽拿這些數字去做背景或者疊加效果。

          圖片

          當然這套字體也是免費,無版權支持商用,喜歡的話點贊收藏,文末都已經打包好,可直接領取。

           

          三、FREE FAT FONT 

          圖片

          我一直在尋找一款能做英文營銷設計,并且非常有力量,設計很特別的字體??上в⑽墓P畫都比較細很難找到那種像方正黑體充滿力量的字體,直到我遇見了這個字體FREE FAT FONT,像名字一樣非常的粗壯充滿力量感。

          圖片

          整個設計非常飽滿,特別適合用在包裝設計上,比如上圖冰淇淋設計就運用了這個效果。

          圖片

          FREE FAT FONT 也非常適合潮流產品設計,比如一些潮流酷炫的場景,運用這個字體能夠彰顯個性和年輕化。

          圖片

          同時這個字體也有點復古感,比如上圖我隨便拿了一個80年代磁帶搭配了一下,效果也非常不錯。如果你的產品想體現復古和潮流感,又希望有一個粗壯有力的字體,用這個準沒錯。無論做概念設計還是包裝作品集效果都不差。

           

          四、Kage Pro 

          圖片

          一款好的英文字體不僅僅能讓產品有自己獨一無二的氣質,同時在設計上也是錦上添花。襯線字體因為獨特的古典氣質,一直受設計師喜歡。比如Kage Pro這款,兼備古典美和現代氣息。

          圖片

          隨便找個人物照片,簡單地排版一下,效果就出來了,非常優雅簡約。

          圖片

          比如這個網頁,是一個輕奢設計,整體色調暖色和金色。金色其實稍微有點浮夸,需要一些視覺元素壓住,然后用上Kage Pro 字體后,瞬間效果上來一大截。

          圖片

          Kage Pro 字體的氣質非常優雅古典,如果你的畫面有些動感方向會更佳,如上圖人物是非常放松愜意的,這個字體運用上去和人物混為一體,讓讀者注意力不自覺地停留。

          圖片

          同樣這個字體在很多高端網站設計、移動端設計都大量運用。效果非常出挑,如果你在做一些海外設計或者概念設計,需要把你設計調性拉高,需要做出很貴很奢侈的感覺,直接用這套字體。

           

          五、Canava Grotesk 

          圖片

          我相信看到這里,很多同學會說蓋哥,有沒有一些適合用在UI的字體,當然了,我相信大家看到很多Behance一些APP設計,里面用的字體一定非常好奇,那么如果只讓我推薦一款,那肯定是Canava Grotesk了。

          圖片

          圖片

          UI的字體和平面不一樣,需要考慮識別度。比如上圖這個節目設計就是運用了Canava Grotesk字體,相對于蘋果原生英文字體會顯得更特別更有設計感,同時筆畫會更加時尚。

          圖片

          這個字體適用于電子產品,如上圖一個智能手環設計,就是采用的這種字體,清晰有力。設計師通過字重搭配讓整個畫面非常輕盈充滿科技感。字體也都已經打包好,大家直接文末領取。

           

          六、DST Helfita 

          圖片

          DST Helfita字體我第一次看見的時候,是上圖一個咖啡廣告,這個廣告除了運用咖啡豆子呼之欲出的感覺,最巧妙地把咖啡豆和字母結合。這個廣告就是運用的DST Helfita字體,非常廣告大牌,非常適合做廣告。如果你們的產品需要做廣告,需要醒目對比,可以試試這個字體。

          圖片

          用在這種AR/VR產品里面,一樣能有非常好的效果,一點不違和。而且這個字體的小寫字體很特別,相對很硬的科技字體,大小寫結合有一種說不出的特別感。

          圖片

          用在游戲畫面里面,是不是也非常有復古感,搭配簡單的背景顏色,以及游戲主元素,整個畫面簡約不簡單。

          圖片

          上圖是一個電影網站,整體畫面簡單,一個app界面一個DST字體,但是你不會感覺頁面很空,因為DST這個字體很多細節都充滿了設計感。

          圖片

          這個字體字重很多,你可以做大小對比,也可以做線框和圖形填充對比,效果很好。

          圖片

          具體效果多試試,上圖我找了個樣機,隨便貼上去這個字體,是不是像一個高級品牌。

           

          七、GEON 

          圖片

          相信大家是不是看見過上圖這樣的設計,不會以為設計師設計的圖形吧,其實是一個字體GEON,說實話我都有點舍不得分享給大家。這個字體非常個性化,適合用在一些潮流產品。

          圖片

          每個字母都是黃金比例,非常有現代感,哪怕筆畫識別度沒那么強,但是你一眼還是能知道是什么字母。

          圖片

          適合的場景比如游戲設計、個性化海報、潮流產品,字體充滿個性。同樣的這個字體也是無版權的,可以大膽使用。

           

          八、BD Megatoya 

          圖片

          如果你的產品是科技感非常強的,那我推薦這款BD Megatoya字體,同樣是無版權字體,如上圖,簡單的搭配一個效果就調性非常強,這款字體非常適合高科技產品。

          圖片

          上圖是一個可視化的產品,全部采用的這個字體,非常適合可視化。

          圖片

          電動汽車官網設計,這個字體搭配上去也毫不違和,簡約的字型和科技館汽車搭配的天衣無縫。

          圖片

          Apple Watch戶外廣告設計,也是運用的這個字體,它的字體字重能很好地把畫面對比拉起來。

          圖片

          圖片

          字體的設計,字距,對比,大小寫都設計地非常講究。

          圖片

          AR眼鏡發布會海報設計,就問你高級不高級。

          圖片

          運用在傳統雜志上,閱讀感也非常強,可以說是一款百搭的字體。大家快文末領取使用起來。

           

          九、Baunk 

          圖片

          這些年賽博朋克非常火,包括科幻電影。里面很多設計都非常特別,我之前也一直在尋找一款科技感很強的字體,后面被我找到了這款Baunk。

          圖片

          這款字體筆畫很特別,很飄逸,很有未來感,如果你的設計是科技感很強,可以試試這個字體。

          圖片

          外星人筆記本設計,復古的銀色外殼,搭配這個機械感很強的字體,非常貼合。

          圖片

          我簡單搭配了下,找了一個機器人的圖,搭配了這個字體,是不是瞬間感覺是未來世界的。

          圖片

          再找一個高科技的未來機器人看看效果,好像也還不錯。

          圖片

          怎么樣搭配都行,所以這個字體哪怕你現在用不上,未來也一定會用上,我之前找了很多科技感字體,目前就這款最具未來感。

           

          十、Kurye Light 

          圖片

          Kurye Light是一款非常現代的字體,如上圖大小寫運用,讓我想起sony的設計,很科技現代,還帶一點點小小的個性化。比如小寫字母的y非常有線條感。

          圖片

          這個字體也是我心頭最愛,識別性強適合大面積文字閱讀,同時很有科技感。特別適合簡約設計。上圖隨便搭配一個簡約畫面效果就非常出色。

          圖片

          公司官網介紹這個字體也非常合適,如果我以后做一個公司官網,一定會用這個字體。

          圖片

          字體細節也比較考究,特別注意看小寫字體非常清秀和干凈。

          圖片

          斜體也是簡約大氣上檔次,怎么搭配怎么好看,關鍵還是免費。

          圖片

          做品牌設計也合適,比如名片設計,簡單一個色彩搭配,效果就出來了。

          圖片

          電商頁面設計,作為主標題小標題都合適。


          作者:Sky

          轉載請注明:學習網》你的設計太平了,2022開始流行用這種字體

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


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


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



          日歷

          鏈接

          個人資料

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

          存檔

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