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

          首頁

          搜集了50多款產品,發現啟動頁原來有這么多做法,遠比我想象中多呀!

          seo達人


          圖片

          后來自己做啟動頁的時候,也只放了一個圖標,客戶說看看能不能用別的方式,然后我就去研究了一下,看看到底啟動圖有多少種做法。

           

          1.圖標 

          第一種就是我們最常見的,也是啟動圖成本最小的一種方式,圖標直接往上面咔咔一放,就像下面這種:

          圖片

          但并不是所有的都是白色底哦,有一些會使用全屏色塊的形式,比如這些:

          圖片

          這樣的沖擊力會比較強,但也需要注意,顏色別整太刺眼了,那樣會看著很難受的。

           

          2.solan

          有一些平臺會宣傳自己的使命、價值等等,比如最常見:

          知乎: 有問題就會有答案

          貓眼: 娛樂看貓眼

          糗事百科:快樂你就不孤單

          效果圖如下:

          圖片

          這其中,有些修了字體,有些做了排版等等,當然他們并不是只放solan,頁面下方還是會放上圖標。

          這種突出價值、使命的方式也是非常不錯的,也是啟動圖常用的一種表現形式。

           

          3.插畫

          接下來的方式是突出插畫,用自己的形象延展一些好看的插畫,比如咸魚:

          圖片

          再比如躺平:

          圖片

          再比如唱吧:

          圖片

          等等,這種方式會讓品牌更加生動、豐富,一張好看的插圖會讓用戶印象深刻。

           

          4.圖形

          圖形是在app設計體系內非常重要的一個元素,比如我們圖標本身就是一個圖形,像qq這種,讓其圖形外輪廓與一些效果相互結合:

          圖片

          達到一種沖擊較強的效果,以此來凸顯圖形本身。

          再比如,我們還可以利用圖標來延展圖形,就像uc頭條鹿角延展出的圖形:

          圖片

          或者像moo music延展出兩個圓形,表達星球的含義:

          圖片

          用圖形延展做啟動圖,有一個很重要的優勢,那就是設計感很強,讓用戶感覺很高級很舒服!

           

           5.圖片 

          還有一種方式就是利用圖標來做啟動圖,一般會使用這種方式的,基本都是產品本身比較注重“圖片“這個元素,比如像健身啊、交友啊、設計類產品啊等等,希望通過圖片(比如異性圖片,高質量作品)來吸引用戶。

          比如ui中國的啟動圖:

          圖片

          再比如陌陌的啟動圖:

          圖片

          都是使用圖片作為主要元素制作的!

           

          6.3D

          現在3d這么火,3d的設計表現形式肯定是少不了的,比如下面這些:

          圖片

          都是用了3d的表現手法,而且我覺得以后可能會有越來越多的產品選擇這種形式,來增加沖擊力和獨特性!

           

          總結

          當然,不論啟動圖的側重點是什么形式,插畫也好、圖片也好,都還是會放上自己的品牌圖標,這是鐵律,剩下的都還是有一定的發揮空間。
          好了,以上就是看了很多產品之后,關于啟動圖表現形式的小總結,希望能給大家一點啟發和靈感,做出適合自己產品的啟動圖,么么扔!

           

          原文地址:心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》搜集了50多款產品,發現啟動頁原來有這么多做法,遠比我想象中多呀!

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

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

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

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


          高級設計師最關鍵的能力是什么?

          seo達人


           
             
           
          這張海報最終被棄用了,因為它連客戶最基本的顯性需求都沒有滿足。 
           
          二、客戶的隱性需求通常有下面這些:   
           
          1.好看。
          即要有吸引力,能夠吸引別人的注意,甚至是讓他對宣傳的內容感興趣,比如一張食品類的海報,首要的功能就是要讓看到他的人,產生想吃的欲望。這個需求客戶一般不會說出來,因為這是他們默認的,毋庸置疑的。所以無論你的設計多有創意、有多少細節,先捫心自問,它好看嗎?能讓你產生興趣嗎?

           

            
           
          有人可能又會說,好看和是否吸引人這個太主觀了吧,每個人的審美都不一樣,蘿卜白菜各有所愛。我覺得這句話適用于層級比較接近但是風格或表現手法不一樣的作品,相差很懸殊的作品不存在這個問題。 
           
           
          2.層級分明
          即畫面要有主次、要有對比、要有合理的閱讀邏輯,不能太亂、太擁擠。這算是比較專業一點的設計需求,很多客戶提不出來,但是當你把一件看起來很亂、沒有重點的設計給到他們時,他們也能感受到,因為他們其實看過很多同類型的作品,他們也能感受到視覺上的不舒適。

           

           

          3.時尚
          其實并不是非要與娛樂、服裝、運動、年輕人相關的設計才需要時尚,我們可以看到現在各行各業的設計都在變得越來越時尚,比如餐飲業、母嬰品牌、飲料品牌,甚至是醫藥和保健品牌。因為互聯網已經全民化,大家的生活方式和審美都發生了很大變化,而且幾乎各個行業都會有年輕人參與進去。

           

           

           

          所以如果做設計還只是停留在把必要的元素放上去,把重點信息清晰的展現出來,把版面排得干凈整潔,把顏色搭配得舒適這些層面,那么離成為一個高級設計師還有一些距離。 設計也需要與時俱進,要不斷嘗試新的構圖、新的字體、新的設計風格、新的排版方式、新的配色等等。

           

           

          4.精致的細節
          同樣,大多數客戶都不會明確提出這個需求,因為他們最看重的是大方向、大感覺,而且他們不知道細節應該怎么處理才是好的,但是如果你的作品細節很粗糙他們是能感覺到的,他們能看出你的設計品質感不夠,特別是在有對比的情況下時。

           

            
           
          所以,在字體選擇、字體設計、素材質感、文字行距、色彩搭配、圖形輪廓、背景的處理、排版的平衡性和靈活性等方面,我們都要盡量做好一點。
          下圖是開頭列舉的游戲海報設計方案二,這個方案增加了視覺圖形部分,從而加強了海報的游戲屬性和視覺沖擊力;內文部分進行了歸納整理,使之更清晰、更易閱讀,基本上完成了客戶的顯性需求,但是仍沒有得到客戶的認可,因為還有很多隱性的需求沒有表現出來。

           

           

          下圖是調整后的方案三:

           

          相比方案二,該方案的做了如下優化:  
           
          1、層級關系更加分明、視覺更聚焦。
          讓主視覺和主題占據更大的空間,以提升畫面的視覺沖擊力、加強主次對比,核心內容雖然也重要,但是并不能讓它成為視覺上的核心,保證他有足夠高的可讀性就好。

           

           

           

          方案二的主視覺部分,人物元素分布在左右兩側,標題在中間,視覺很分散,方案三則把人物移到了中間,標題放在人物下方,視覺變得更集中了。

           

           
           
          2、細節更加豐富、精致。
          比如主視覺部分元素做了精簡和美化,看起來比之前更干凈、更好看,“招募令”這幾個字重新做了設計,使之變得更突出、更有設計感。

           

            
           
          內文方面也重新調整了排版的方式,從上下結構變成了左右結構,使其顯得沒那么單薄,同時也增加了很多細節,使之看起來更美觀、邏輯更清晰、更靈活。

           

           

          另外,背景的處理也做了優化,重新找了素材使其變得比之前更豐富、更細膩。

           

           

           
          3?整體更美觀、更能打動人。
          因為主視覺部分更突出,讓人很快感受到游戲的氛圍、以及清楚具體上什么游戲,還增加了更多游戲元素,所以海報的代入感更強了。
          另外配色也變得更舒適、更時尚,再加上各種細節的增加、排版版更加有趣、整潔,所以海報也變得美觀了不少。
          在答謝禮部分還增加了圖片,不僅更有打動力,也比單純的文字更美觀、更豐富。

           

           

          – 結語 –  
           
          當然,不是所有客戶的顯性需求和隱性需求都是照我這么劃分的,這不重要,重要在是, 我們要知道,便不是客戶說啥就是啥,你一定要想得比客戶多,要走在客戶前面,挖掘出他們的隱性需求,你要知道優秀的設計該具備哪些特質。
           
          想成為一個高級設計師,你必須具備正確理解設計需求以及準確表現設計需求的能力。 
           
           
          原文鏈接:站酷
           
          作者:蔥爺  
           

          轉載請注明:學UI網》高級設計師最關鍵的能力是什么?

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

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

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

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




          儀表盤(Dashboard)設計的6個要點,都幫你總結好了!

          seo達人


          儀表盤的3種類型

          1、操作型Dashboard

          操作儀表盤用于顯示當前用戶在產品中的狀態,顯示與時間相關的關鍵信息。

          例如后臺數據分析中,操作儀表盤包含:網站的活躍用戶、熱門社交推薦和每分鐘瀏覽量等數據。

          圖片

          ▲ 在谷歌分析的實時儀表盤中,用戶能一目了然地查看所有用戶、新增用戶等一系列數據。操作型儀表盤中通常包含一些簡單的條形圖、折線圖等基本圖表。

           

          2、分析型Dashboard

          分析型儀表盤用于向用戶展示關鍵的數據信息,以數據為中心,并盡可能多地顯示相關聯的數據圖表。

          分析型儀表盤應該以關鍵的數據為中心,并盡量減少圖形元素。

          圖片

          ▲ 在Manson Yarnell的儀表盤中,更注重數據前后的對比和關聯性,并將這種關系通過圖表的形式展示出來,通過對比,我們能更容易看到產品的數據情況,比如瀏覽量是比上個月漲了還是降了、漲了多少。

           

          3、平臺型Dashboard

          平臺型儀表盤用于讓用戶訪問社交平臺上與帳戶相關的控件、工具和分析。

          圖片

          ▲ 在YouTube的后臺頁面中,通過簡單的初始視圖就能顯示用戶的最新視頻以及每個視頻的播放量等數據信息。

          在側邊欄,用戶還可以訪問大量的工具和帳戶控件,包括視頻管理器、頻道狀態等,YouTube讓操作變得簡單,用戶能完全控制。

           

          儀表盤的6個設計要點

          1、確定用戶需要什么

          首先要了解受眾。因為只有了解用戶,才能夠回答一個關鍵的問題:用戶希望從這個儀表盤中得到什么?

          要先明確用戶希望在儀表盤上想到看到的幾個要點,然后應用F型和Z型閱讀模式,構建相應的頁面。如果儀表盤上的信息太多,有可能會讓訪問后臺的用戶不知所措。

          通過將所有的信息和數據合理地組合到一個頁面上,再使用適當的留白來平衡畫面,為數據創造呼吸空間。

           

          2、在儀表盤中添加互動

          在儀表板上添加響應性互動,可以讓用戶自己決定去關注哪些數據。讓用戶能夠控制儀表盤,很大程度上更符合用戶差異化的需求。

          ▲ Cuberto將后臺儀表盤設計成可以左右滑動的樣式,這個設計有點像可以左右滑動的兩塊黑板,既可以看到兩部分不一樣的內容,也能通過滑動展開看到更多的細節內容。

           

          3、以關鍵數據作為先導

          有的儀表盤設計得很簡潔,用大尺寸且加粗的字體來展示數據,讓用戶更清晰地明確信息。

          圖片

          ▲ 這個Dashboard版式時尚,風格上很簡潔,有很多留白和加粗的數據。這樣呈現數據可以幫助用戶快速看到哪些內容是重要的,節省用戶時間。

           

          圖片

          ▲ 整個頁面通過清晰的圖表形式呈現信息,我們能明確看到數據的變化情況,雖然沒有使用太多的文字信息,但主次分明的數據做到了很好的透視。

           

          4、規劃儀表盤信息架構

          在設計儀表盤時,考慮信息架構和層級結構,來確定需要哪些內容卡片以及這些卡片要放在什么位置。

          圖片

          ▲ 深色背景的使用在組件之間形成很酷的對比,關鍵數據占據中心位置。左側導航欄和右側卡片式信息在設計上遵循了標準的格式塔原則。

           

          圖片

          ▲ 這個加密貨幣儀表盤以賬戶余額為線索,將最重要的信息放在用戶第一眼就能看到的地方,其他信息會根據內容重要程度,合理調整在頁面的位置。

           

          5、使用多樣的視圖樣式

          儀表盤設計也需要變化,通過使用不同的視圖布局來保持整體的簡潔。

          圖片

          ▲ 在這個儀表盤中,用戶可以按日期篩選數據、在餐廳之間切換,還能看到關于預訂、付款、員工輪班和外部供應商等很多種信息,同時整個頁面仍然能保持很干凈、簡潔。

           

          6、使用一致的設計方案

          通常儀表盤中包含各種數據圖表,設計樣式上很難做到統一,但這并不意味著儀表盤不需要考慮視覺美觀。

          圖片

          ▲ 協調的配色和多樣的圖表樣式讓整個頁面看起來很有設計感,環形圖、餅圖和地圖的搭配讓數據呈現更豐富。

           

          圖片

          ▲ 這個儀表盤通過明亮、統一的配色,讓數據圖表更加清晰、整潔,導航更加明確。

           


          圖片

          慢慢來比較快,希望對你有所幫助!

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》儀表盤(Dashboard)設計的6個要點,都幫你總結好了!

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

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

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

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



          這個簡單的界面我是這樣進行修改的

          seo達人


          圖片

          下面通過發現問題和案例修改來進行分析(案例來源于黑馬家族內部學員的初次作業)。

           

          發現問題

          好了,看完修改前后的對比之后,我們開始進一步分析,從上到下一起來看一下吧!

           

          頭部導航欄區域

          功能層面來說,發布既然運用高亮的處理,證明該功能是相對比較重要的,放在手勢盲區操作體驗不是很友好。

          圖片

          右側的兩個功能圖標距離太近,點擊過程中容易造成誤操作,兩個圖標的視覺不平衡,不能以高度來定標準,要看整體的面積占比。

          圖片

          最后,發布、搜索、功能圖標之間的間距沒有做規范設計,導致設計不夠嚴謹,視覺協調度和節奏感沒有呈現出來。

          圖片

           

          頂部分類導航區域

          這個部分問題不是很大,類別之間的間距可以適當增加,如果是可以左右滑動的,末尾最好再新增一個,把可滑動的樣式體現出來。

          圖片

           

          Banner 圖區域

          輪播 Banner 圖采用通欄的處理,會將整個界面一分為三(頭部區域、Banner 區域、作品區域),如果界面邊距較大的時候,這樣處理不是很理想,會使得整個界面不夠連貫。

          圖片

          輪播點的處理不建議使用灰色來表現,不僅區分不明顯,配色上面也顯得不夠干凈整潔。

          圖片

          Banner 圖本身的質量也是需要注意的,站在輸出作品的角度來說,圖片的質量會影響整個作品的氣質。而且這個圖沒有任何主題,設計的真實感無法得到體現。

          圖片

           

          作品(菜譜)區域

          整個界面篇幅較大的區域就是推薦的各類菜譜,第一眼看過去,是不是圖片顯得沒有食欲啦!針對美食類作品,只有食物本身的食欲感才能吸引用戶去點擊學習。

          圖片

          菜譜名稱、作者信息、收藏與收藏數的顯示親密關系處理不合適,關聯性被分斷了。

          圖片

          間距留白沒有掌握好數字關系,顯得比較擁擠。直角的封面圖顯得有些生硬,親和力不是很強。

          圖片

           

          底部標簽欄

          底部標簽欄最主要的就是圖標設計,圖標設計的規范性需要注重一下。比如針對線性圖標來說,描邊粗細的統一、圓角值的統一和風格的統一等需要重點對待。

          圖片

          其次就是點擊狀態和默認狀態的區分,圖標利用顏色深淺進行區分也是可以的,文字區域的區分也需要進行深淺的對比。

          圖片

          以上便是針對這個界面發現的一些在 UI 層面的問題,接下來我們一起針對這些問題進行修改。

           

          案例修改

          針對羅列出來的問題,下面進行一些修改,設計屬于主觀表達,僅代表黑馬哥自己的想法。不足的地方歡迎大家留言指正,互相進步。

           

          頭部導航欄區域

          為了方便用戶發布內容,我將發布按鈕移出導航欄,放置在底部標簽欄。將右側的兩個功能圖標拆分為左右兩側布局,優化了間距和布局細節。

          圖片

          功能圖標繪制上面三條橫線做了長短變化,顯得更靈動。整體圖標的高度要比通知圖標的小一點,以此來平衡它們之間的面積差異。

          圖片

           

          頂部分類導航區域

          這個部分優化了文字之間的間距,然后通過字體大小和顏色深淺來區分點擊和默認狀態的差別,將短線裝飾改為弧線,弧線作為符號基因運用到底部標簽欄的圖標設計中,這里是作為視覺符號的延續。

          圖片

           

          Banner 圖區域

          輪播 Banner 圖本身沒有做,本期案例只是 UI 層面的修改。優化了 Banner 圖的比例,采用 8:3 的比例進行計算,取 4 整除的高度數值。輪播點的設計通常有數字、小圓點、小短線、進度形式等,這里采用進度形式來表達。

          圖片

           

          作品(菜譜)區域

          這個部分調整比較大,從內容到布局結構都做了調整。首先將固定尺寸的封面圖改為寬度固定高度自定義的瀑布流設計,滿足用戶的不同拍攝需求,對圖片設置了圓角處理,增強親和力。

          圖片

          將標題、作者信息、收藏數據統計等信息進行整合,集中布局展示,增加內容之間的親密關系。新增了標簽,由于菜譜種類較多,通過標簽更容易搜索到同類菜譜。

          圖片

          收藏圖標加數字來體現之前的文字表達形式,用戶更容易理解,采用愛心圖標既能表示喜歡也能帶有收藏的作用,點擊欲更強。

          圖片

          單行標題適配為最多兩行顯示,方便用戶為自己的菜譜名稱增加修飾詞。這里需要考慮最大值的情況,設計的時候需要體現出超出最大值的設計樣式。

          圖片

          最后就是選擇了拍攝質量更好的圖片來填充,作為作品輸出來說,配圖的質量還是至關重要的。來看一下這個部分的最終效果,對比一下就可以感受出前后視覺感的差異。

          圖片

           

          底部標簽欄

          將發布按鈕布局在中間位置,做突出形式,吸引用戶發布內容,豐富平臺的作品量和提高用戶參與度??梢圆季衷跇藴实牡撞繕撕灆趦炔?,也可以做凸出顯示,這里嘗試了兩個版本。

          圖片

          優化了圖標設計,統一了描邊值和圓角值,用小弧線作為視覺符號進行點綴。點擊狀態換成面性圖標,區分更加明顯,顯得也更為成熟穩重。文字需要體現當前狀態和默認狀態的差異,這里使用品牌色來區分,也可以使用深淺不同的灰色來體現。

          圖片

           

          完成

          通過對發現的問題進行調整之后,完成了最終的設計案例優化。這個案例比較簡單,通過案例想要說明的點是:無論簡單還是復雜,都要考慮好每一個細節的深入,也要對每一個元素的設計有自己的設計想法。每一個界面都要體現出設計規范、設計質量和自己的設計態度,只有作品成熟才能說服別人,獲得認可。

          圖片

          本次案例修改的大體流程是:分析問題所在、組織優化思路、調整內容結構、設計高保真原型、填充內容完成最終 UI 稿。

          圖片

          最后,感謝大家的閱讀學習,希望對大家能有一定的幫助,后續將會繼續帶來更多案例的修改分析,我們互相進步。

           

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

          作者:黑馬青年

          轉載請注明:學UI網》這個簡單的界面我是這樣進行修改的

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

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

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

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



          配色 | 總監說顏色丑,我調了調確實好看多了?。?/a>

          seo達人


          圖片 
          我曾經也碰到過這個問題,在動手之前,或許腦海里會有個大致的色彩感覺。但實際上軟件一操作,發現怎么配都很難配出特滿意的色彩。
          其實這種屬于正?,F象,更多的是經驗層面的缺乏,只要多練習,慢慢的這種眼高手低的感覺就會越來越少。
          圖片 
          并且練的多了后,發現配色真的沒那么難,只要有一點積累,有一點審美,稍微掌握一點方法,就能讓自己在配色的能力上有個很大的改善。
          圖片 
          審美跟積累很早之前的文章里頭其實就說了,可以多建幾個畫板,把不同的色彩歸類收集起來,分析這些色彩的飽和度及明度,逐漸感受到色彩的張力。
           
          圖片
          圖片 
          人有著很強的適應環境及學習能力,比如你在一個地方呆長了,其實口音也會越來越接近當地。
          審美也是一樣,只要你不斷地去收集、積累那些真的很美的圖片,那么你的審美也會發生改變,自然也會越來越高。
          比如以前你認為這樣的配色就很美,視覺沖擊力強
          圖片 
          但后面慢慢發現,原來這種平淡的才是驚艷之作,非常的耐看。
          圖片 
          審美提升上來了,其實剩下的就是靠大量的練習以及方法的積累。練習也很簡單,無非是多做一些Redesgin,多做一些概念方案。
          Dribbble上也有非常多的案例可以參考,比如下面這種
          圖片
          提升審美需要依靠點滴積累。
          而方法的積累,其實真的就是三點。只要把這三點掌握好了,配出來的顏色都不會太low,顯得較為高級。 
           

          第一點:顏色不要花

          有些同學總是認為配色嘛,肯定要多配幾種顏色,才會美。
          但其實錯了,顏色配的越多,越顯得臟亂,并且對設計師的色彩能力也要求越高,ta必須要把所有的顏色選到一個最大的公約數,搭配起來才能非常時尚。
          圖片
          一般能像上面這樣的,能同時hold住三種顏色同時在一個畫面上的,大多數也都是王者段位了。
          如果自己作為青銅、白銀級選手,我建議還是首先要從控制顏色的數量還是入手。 
           
          控制的不好,就是下面這個例子:
          圖片 
          總結:控制色相數量,增加色彩明度梯制  
          先把顏色的明度系數理解到位了,再理解不同色相帶來的情緒。同一個畫面色彩越多,越難掌控,而且也會讓人視線越不知道放哪,產生一種煩躁焦慮感。
          比如看看這些作品,高級都是因為色彩被控制的很好
          圖片
          圖片
          圖片 
          再來幾組比較花的,是不是就要掉檔次的多?
          圖片
          圖片 
           

          第二點:不要臟。

          好看的顏色會讓人引起共鳴,不好看的顏色一眼都不想再看。臟臟的顏色會讓人覺得這個東西不高級,不夠養眼。
          那么什么顏色會顯得臟?帶大家看幾個辣眼睛的:
          1、飽和度中性的重色 ?
          圖片 
          2、飽和度過高的中性色 ?
          圖片 
          3、飽和度過低的淺性色 ?
          圖片 
          上面這幾種辣眼睛的情況,咱們要盡量避免。
           
          重色要么為偏灰色,要么帶強顏色屬性;中性色飽和度盡量需要往下收,收到直到比較溫和為止;淺色的色彩盡量明快飽和度高一點,不要過灰,不然也會顯得臟。
          比如下面這些改好了的。
          1、重色系 ?
          圖片 
          2、中性色 ?
          圖片 
          3、淺色系 ?
          圖片 
          再對比一下上面的幾個辣眼睛色塊,發現是不是差別還挺大。
           總結:根據顏色明度來控制顏色的飽和度  
          說到這兒,其實學過美術的同學應該都知道,這個跟畫色彩作品差不多,亮部盡量多給一些鮮艷的色彩,中間層盡量灰下去,暗部色彩可以稍微豐富一丟丟。
          圖片 

          第三點:顏色要有主次之分,什么是主色,什么是次色,要分清楚。

          在實際業務場景,非純工具型應用,很難只用到一種色彩,因為不同的功能需要使用不同的色彩來進行區分。
          因此大部分實際的界面設計需求當中,我們還是要用到兩種到三種的色彩。
          圖片 
          不過在搭配的時候,需要注意的是,顏色的主色跟次色一定要顯而易見可以區分得清楚。
          其中主色應該占據60%-70%及以上的面積,次色加在一起,不可超過主色的面積區域。
          圖片
          這樣做的原因,也是為了防止眼睛失焦,導致審美疲勞。色彩越多,主次越難分清楚,眼睛對于信息的視覺需要越耗精力,所以自然看著不舒服。
          總結:讓頁面的色彩主次顯而易見。 
           
          這一點在室內的裝潢上,也有講究。
          室內設計講究的主次色搭配,黃金配色比例70% : 25% : 5%;
          圖片 
          70%的基礎色,包括墻面、地板和天花板。一般情況下,同一空間的這三者顏色盡量控制在2種,最多不能超過3種(畢竟現在很多人喜歡涂一面有色的墻)
          圖片 
          比如你發現這些很好看的室內設計圖,都差不多是這樣。從室內設計的裝潢里找取配色靈感,也是不錯的一些選擇。
          圖片
          上面的這些,就是最重要的三個方法。把這三個方法掌握了,其實配色起來就容易多了,而且不容易犯錯誤。 
           
          另外,好的習慣也很重要
          另外方法很重要,但習慣也不可忽視,所以還是得養成一些比較好的配色習慣,這樣才能最快的成長,鞏固自己對于配色的認知以及理解。
          比如多收藏美圖,提升審美。這點雖然很不起眼,但對于培養自己的審美,是有著絕大的好處的。在收藏了100個不同色彩的圖板之后,相信你就能感受到其中的差距了。

          圖片

           

           

          另外在初期階段,哪怕按照上面的方法去調整了。還是感覺自己配出來的顏色總是缺了點什么。那么不妨去吸一吸別人的顏色,在別人的顏色上借鑒。

          圖片

          圖片

           

           

          顏色無非就那么幾種,多吸一吸也不是啥壞事。
          比如你現在要讓我設計一個綠色界面的UI,我肯定會先去吸一下微信的綠色,跟360的綠色,然后結合這兩個綠色,做一下微調,搭配出一個嶄新的綠色。
          圖片 
          畢竟是在巨人的肩膀上前行,自然也不會太差。 
           
          還有,理解色彩的情緒
          最后一個,就是配色前的思考與判斷也很重要,色彩的情緒需要與實際的場景想吻合。不要做出跟場景預期不符合的顏色,高端場景用大紫大綠不合適。

          圖片

           

          原文地址:UX小學(公眾號)

          作者:小學鴨

          轉載請注明:學UI網》配色 | 總監說顏色丑,我調了調確實好看多了??!

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

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

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

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



          五個案例教會你“西文中用”字體設計

          seo達人


          圖片 
           
          作品均來自互聯網,侵權刪。
          大家應該有所發現,有很多英文的影子存在,不管是添加局部的特征,還是直接用英文來拼成一個完整的字,這四組字體都有用到英文來做結合,同樣的我們也可以采用這種手法來進行設計,這種處理方式的好處就在于不用我們再去冥思苦想反復橫跳去尋找筆畫的特征了,英文字庫自帶的特征就足以,且英文字庫的數量和種類都非常龐大,各種姿勢應有盡有,就看你怎么去開發。 
           
             
          所以我們此次分享的方法就叫做“西文中用”。本文中的案例采用我前段時間的一篇站酷首頁作品來作為思路分享與講解,下面我們直接進入分享環節。 
          圖片 
           
          那么剛剛提到我們主要需要解決的就是結構和筆畫特征,結構我們可以采用墊底字的方法來快速解決,筆畫特征自然是通過英文字母來處理了,第一個案例我們先來做一個簡單一些的黑體類型的字,先放出最終稿看一下效果。 
          圖片 
           
          圖片
           
          首先,我們可以選擇一個思源黑體作為墊底字來解決結構部分的基礎問題,其次,我們需要對英文字庫大致的觀察分析一下,來提取我們所需要的基礎筆畫,以便于我們后續的拼字過程,那么最常用的就是橫、豎、撇、捺、點,以及橫豎轉折的處理了,其他的部分我們都可以基于這些筆畫來進行延展出來。  
           
          圖片 
           
          橫的筆畫不用想的太復雜,直接提取出它的粗細畫條直線即可。 
          圖片
          豎筆的部分可提取的處理就稍多了一些,這里我們先都列舉出來,至于最終會用到哪個還要等具體拼字的時候才會確定。 
           
          圖片 
           
          撇捺點的部分可選項不是很多,這里就放到一起來提取了,且這三個筆畫的處理都可以更加靈活一些。 
          圖片 
           
          轉折處的處理同樣需要進行嘗試后最終敲定,(這里捺的處理我們把撇筆畫直接鏡像即可)。 
           
          圖片  
          最后我們把筆畫匯總一下,形成自己的一個筆畫素材庫,就可以開始拼字了。 
           
          圖片 
           
          首先搭建基礎的結構,但結構可能離我們想要的效果還有些差距,所以下一步還需要對結構進行一輪微調優化。 
          圖片 
           
          微調結構,使整體的外部撐得更飽滿,接近標題字形的處理方式,該對齊的對齊。 
           
          圖片 
           
          進行一些不同筆畫處理的嘗試,這里就不一一去嘗試了,大家在做的時候可以先選擇一個字來進行嘗試不同的處理方式,這樣會節省很多試錯的時間。 
          圖片
          最后,選擇更為合適的一組,調整一下細節,對齊筆畫,統一粗細,統一處理方式等。
          圖片
          圖片
          圖片  
           
          雖說有了自帶特征的英文,我們可以不用過多去思考筆畫的造型,但還是要多去嘗試不同的造型和處理方式所帶來的整體感覺,下面我們繼續。  
           
          圖片 
           
          第二個案例我們再做一款黑體類型的字,相較上一款會稍微復雜一丟丟,但方法都是相通的,我們往下來看一下這組字。 
          圖片
          圖片 
          依然是尋找一個墊底字,以及分析英文的特點,這種方法一定要把英文自帶的最大或者最好看的特征給呈現出來,不然我們選擇西文中用就毫無意義了。
          這里依然可以選擇思源黑體作為墊底字的,根據英文的粗細程度,我們可以選擇粗一些的。且可以適當調整墊底字的高矮胖瘦來達到自己想要的效果,這里我稍微壓扁了一些。 
           
          圖片 
           
          提取出基本的筆畫特征,這里我就不再列舉提取來源了,直接以文字的形式描述吧,大家可以一一去對照著看一下。
          橫筆的部分除了常規的橫線,還可以提取出大寫字母E的特征,上下是有一個角度上的呼應的。此外就是蜜蜂二字的蟲字部分最下邊的連筆處理,選擇了數字7放倒的形式,算是做了一個特殊的處理。 
           
          豎筆的部分除了常規的豎線還可以選擇小寫字母t的形式,也算是與橫筆的特征做一個統一。
          撇捺點的形式依然比較靈活,數字7的豎筆,數字1的左上角部分都可以作為撇捺的處理形式。小寫字母i上方的點或是短豎線也都可作為點的處理。
          轉折處的處理會稍微靈活些,可以有一個比較多的嘗試。
          圖片
          下面,我們開始搭建基礎的結構以及嘗試筆畫的初步形態。 
          圖片 
           
          大體的感覺出來了,但個別部分的處理還是有些僵硬,如杜字的木字旁,捺的筆畫處理,鵑字右側鳥字右下的橫折鉤的筆畫,都比較呆板,所以針對這兩處進行優化。優化的大體思路可以考慮結合更多的英文特征進來。 
          圖片 
          下面我們還需要對結構進行一輪優化,使整體更加飽滿,整體的布白也可以進一步優化,說人話就是調整筆畫的位置以及粗細,來達到正負空間更均勻的狀態。
          圖片
          最后可以進行一些不同的細節小嘗試。
          圖片
          嘗試過后發現橫豎轉折處不適合做其他處理,所以還是回到初稿,鳥字上方的一瞥原本是豎線的處理改為圓點,與蜜字頂部的一點可以做一個區分,值得一提的是鵑字左上方的口字部分直接替換為數字2的處理解決掉了比較僵硬呆板的問題。 
          圖片 
          圖片 
          圖片 
           
          圖片  
           
          第三個案例我們來做一寬宋體類型的字,相較前面的兩款字會需要更多些思考與調整,照例先看最終稿。
          圖片 
          圖片 
          先來看一下這次選擇結合的英文字形以及墊底字的選擇,墊底字肯定是要選一款宋體了,這里我選擇的是一款日本的字體,英文選擇了一款特征非常強的字形,尤其是連筆的處理效果非常好,所以這也是我們這款字結合的重點,要想方設法的搞里頭,搞不里去就自己找原因。
          圖片 
          繼續拆解基礎筆畫,這部分不再多說了,相信大家對這一步已經輕車熟路了。 
          圖片 
           
          乍一看好像英文的最大特征并不能結合多少,這時候就要去思考問題了,像英文中的一些細線的變化非常像連筆的形式,所以我們可以在中文當中去尋找一些可以做連筆的位置,來借鑒英文的特征結合進去。可以結合墊底字大致畫一下草圖進行嘗試。
          圖片
          不需要畫的很細致,只需表達出筆畫的大致的走向,重點是連筆位置的造型要清晰出來,蟲字沒畫草圖這里先不講。 
           
           
          這組字可以做的瘦高一些會更能凸顯英文特征的氣質,所以我們可以適當調整一下,下面開始搭建基礎字形。
          圖片
          綠字左下的連筆不太合適,有點糊掉了,虎字的連筆有些問題,最左側的豎撇沒能體現出來,所以要重新考慮連筆的位置,甲字的造型也不是很美觀,蟲字的下邊在開始觀察英文的時候就發現了小寫字母g的下邊可以替換,所以草圖部分就不再做過多考慮了。 
           
          圖片 
           
          下面針對出現的問題我們逐一解決掉,綠字左下的連筆去掉,正常做,虎字的連筆可以考慮一個另類的位置,從最外側的豎撇最下端開始連,會很大程度上避免糊的問題,甲字上半部分的處理方式從字母P中提取到靈感,從而做出結合。
          圖片
          圖片 
           

          小結Tips:

          不難發現,這種方式其實并無太多難點,我們再來回顧一下重點。
          1.英文的選擇很重要,要具有鮮明的特征。
          2.與中文做結合時要把英文最強的特征結合進來。
          3.同一個筆畫可能有不同的處理,要多去嘗試,擇優選擇。
          4.當中文中無法直接結合英文時,要考慮適當變形中文筆畫,或是結合英文特征去進行處理筆畫。
          5.橫著看豎著看,鏡像看倒著看英文,會得到不一樣的結果。
          下面我們再快速的簡短的再分享兩個案例,因為方法都是類似的,磨嘰多了你不煩,我還煩呢。  
           
           
          圖片 
           
          第四個案例我們再來做個特別一點的字形,英文字形越復雜,我們結合起來的困難也就越大,當然困難點是各不相同的,照例看一下最終效果我們再來解析。
          圖片
          圖片 
          通過上面的最終效果大家應該看得出來了,這一組字主要難在曲線的調整上,我們來具體看一下所選的英文字形以及墊底字的選擇。
          圖片 
          可以觀察到這一組英文字的特征是極其強烈的,分析其主要特征,整體字形瘦高,非常多的位置都是類似S形的曲線,且帶有粗細變化,這是主要難點,也是需要結合的一大特征。墊底字依然選擇思源黑即可,YYDS。下面我們拆分筆畫,調整墊底字。 
          圖片 
           
          下面進入拼字環節,根據英文的特征,我們把中文的結構也設定為瘦高的,適當調整墊底字。
          圖片 
           
          這一組幾乎沒有什么嘗試的過程了,拆分出的筆畫拼出的基礎字形特征已經足夠強烈,說幾個需要注意的點,枯字右下的口字部分的處理,這里為了契合整體,選擇把正常的口字設定直接放倒并拉伸至合適的比例,隨即調整比例以及筆畫的粗細程度,以達到與整體協調的粗細。這里把原字庫的錨點情況給大家看一下,你們感受一下。 
           
          圖片 
           
          可以看到右側我是簡化了非常多的,否則無法進行下去…
          圖片 
           
          其余就沒有過多的一個調整了,都是類似的方法去簡化曲線,使其更好調整,橫筆的特征可根據整體的空間來調整大小,如果全是一樣大的,則非常難擺放。
          圖片
          圖片 
           
          最后一組案例我就不再講解了,因為都比較簡單,直接給大家看一下具體使用的哪些字母。 
           
          圖片 
           
          圖片
          圖片
          圖片 
           
          即使只是用了幾個基礎的筆畫來回使用,最終的效果也是很有特點的。 
           
           
          圖片 
           
          雖說看起來沒什么難度,因為操作上沒啥難點,主要還是在于多去發現,多去觀察字母與漢字筆畫的關系,甚至這個思路可以延伸至任何地方任何事物,都可以成為你處理筆畫的一個思路來源。 
           
          圖片 
           
          知道你們對素材感興趣,后臺回復666可獲取字庫安裝包,不止文中提到的這些,我又收集了一些適合西文中用的英文,都給你,你要的我都給你。
          好了,這次的分享就到這里了,如果大家感興趣,可以去我的站酷看更多案例,站酷id:猴子設計,老鐵們我們下次再見,告辭! 
           
           
          原文地址:胡曉波工作室(公眾號)
           
          作者: 猴子
           
           轉載請注明:學UI網》五個案例教會你“西文中用”字體設計

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

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

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

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


          這幾年,一直備受關注的8pt網格設計系統,究竟是怎樣的?

          seo達人


          圖片
          Photon Design System
          比較知名的 Audi Design system
          圖片
          Audi Design system
          當然還有一些公司,如airbnb,他們設計體系也是基于8網格為基礎來定義的。
          圖片
          Airbnb Design Language
          看到這,大家是不是很想了解8pt網格到底如何構建一套強大設計系統?底層邏輯是什么?為何諸多大廠都選擇這個數字?下面我們一起來揭曉。
          為什么是8pt網格系統?
          圖片
          首先這里給大家介紹下pt 這個單位,pt是“點”的意思,一倍圖情況下1pt=1dp=1px,所以8pt(8點)網格系統,我們一般默認情況都是基于1倍圖來進行設計的。
          圖片
          大多數屏幕寬高數值幾乎都能被8整除
          如果用數字8作為設計中最小原子單位,可以很方便的縮小畫布的設計尺寸,8/2=4、4/2=2、2/2=1。如果從10、5、6這樣的數值開始,你縮小到的網格單位可能存在小數點的像素,一般不推薦這樣的數值進行設計。
          下面大家看一個圖
          圖片
          來源網絡
          第一排使用基于8pt的網格系統,下面一排是基于 5 為單位的網格系統,當他們分別適配到對應的倍數時候(0.75、1、1.5倍),下面一排就會出現次像素。如果使用基于8pt的網格系統,幾乎很少遇到次像素的場景。
          如今,屏幕碎片化時代,多終端設計需求層出不窮,為了能確保多終端適配更靈活,基于8pt網格的設計系統已成為諸多設計師的共識。
          如何應用8pt網格?
          圖片
          如何將8pt網格貫穿整個設計系統里面?這里首先需要創建一個基于8pt的網格系統。有了這些數值,那么下面就可以根據定義出來的數值去創建分子組件甚至設計最終的頁面。
          圖片
          Google Materials Design 基于8pt網格布局設計,下面我們就基于8pt網格系統的規則,給大家演示如何構建基礎層設計框架,這部分也是最重要的。

           

          #1.排版

          圖片
          來源網絡
          如何將8pt網格應用在排版中?很簡單,只需要將字體行高統一定義基于8pt網格的增量,就是8的倍數,這樣文字排版就能對齊到基于8網格的畫布中。

           

          #2.圖標

          圖片
          圖標的大小尺寸定義,也是需要基于8網格來定義。就像右側基于8網格的圖標尺寸,在排版布局時候剛好能夠對應到網格上的。

           

          #3.陰影

          圖片
          如果需要定義陰影數值,那么陰影也是需要基于8網格系統來定義。

          #4.圓角

          圖片

          設計系統里面所有涉及到組件圓角值,都要基于8網格來定義。大圓角一般會用在頁面級別的組件設計,比如沉浸式浮層或者彈窗等。

           

          #5.柵格布局

          圖片

          包括整個系統頁面級別的布局,都需要基于8pt網格來建立規則。上圖是web端和移動端基于8pt的布局系統,需要確保水槽和邊距是遵循這個規則的。

          圖片
          最后,在項目開始的前期,一定要基于8網格系統設計,來將原子級和分子級的組件基礎打牢。因為后期開始大量頁面設計時,涉及到多人協作,甚至多團隊。

          以上就是一個8pt網格設計系統的大致思路框架,當然除了上面這些,一個設計系統里面需要涉及到8pt網格系統還有響應式布局等,大家先一步步深入了解學習,將這套理念應用在項目中,發揮最大價值。

          最后今天既然講到了設計系統,我正巧也找到了iOS15的figma格式的UIKT,是在線版本的,可直接打開。大家可提前研究下iOS 15的一些新的規則與變化。

          圖片

          圖片
          領取方式如下:公眾號后臺發送 iOS15 即可獲取當前地址

           

          原文地址: 功夫UX (公眾號)
          作者: 功夫UX
          轉載請注明:學UI網》這幾年,一直備受關注的8pt網格設計系統,究竟是怎樣的?

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

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

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

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


          完蛋了,這個需求的顏色沒選好,結果不能休息了!

          seo達人


          01 顏色容易用臟

          這是一位同學臨摹的練習:

          圖片

          整體一看還是比較ok的,不過仔細來看有一個問題,就是冰淇凌的臉有點臟了,我們對比下原作:

          圖片

          臉部我一般會用偏白一點的顏色,如果要白不白,要紫不紫,卡在中間就有點像中毒了一樣。
          其實很多人都容易把顏色弄臟,尤其是橙色、黃色,比如下面這個練習,顏色也稍微有點臟了:

          圖片

          我們拿出一個顏色來看下,這個漸變顏色的暗部有點靠右下了:

          圖片

          如果我們把暗部顏色往左上調整一下,就會好一點:

          圖片

          當然,我最常用的方式,還是去改變暗部顏色色相,把黃色色相往紅色靠,這樣顏色不需要加太多黑色,就會更純更干凈:

          圖片

          我們看下三個顏色的對比:

          圖片

          最后一個會通透很多。

           

          02 顏色色相選取問題

          最近在做標簽的時候,設計師選取的顏色不是特別好看,反復優化之后,發現還是走不出原本的感覺:

          圖片

          其實我們很多人都會有這樣問題,在選擇顏色時候從自己腦內存中調取,但是調取的大部分顏色都是比較正的色彩,正紅、正藍、正紫,最后的效果就會不太理想。
          其實我們平時也會接觸很多色卡,但很多人一到選色的時候,還是習慣自己想著做,其實隨便在網上找一些好看的顏色:

          圖片

          咔咔一吸,然后再根據自己的風格一微調,我覺得效果肯定能比普通的顏色好一些,我們看下對比:

          圖片

          所以,如果自己選不好色相,一定要多找參考,網上的色卡真的太多了,參考起來!

           

          03 顏色對比度問題

          還是最開始那組臨摹練習:

          圖片

          我們看下這兩個圖標,有沒有什么問題:
          會不會覺得第一個有點糊?其實就是因為第一個圖標兩個面對比不夠,而第二個鈴鐺,面與面的顏色對比很強,就會比較清晰。
          我當時在做的時候,這個圖標也調了很久,我們看下對比效果,原作的明暗對比會相對明顯一些:

          圖片

          明暗對比是非常重要的,還有在一些材質上的作用也很明顯,比如金屬,我們看下我這個火箭優化前后的效果:

          圖片

          之前就是明暗對比不夠,導致很糊很平,拉強對比后,立馬清晰立體很多!
          所以,顏色對比度,相當重要了。

           

          總結

          以上就是最近對顏色的一點小感悟,希望對大家有一點啟發和幫助,我們下期見啦!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》完蛋了,這個需求的顏色沒選好,結果不能休息了!

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

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

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

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


          B端設計指南 – 柵格的定義

          seo達人



          為何會有柵格?

          早在平面設計開始之初,就有對“柵格”的使用記錄。(不過那時不叫柵格,而叫網格)因為印刷機器以及切割工具的限制,導致在頁面的板式設計需要一定的出血線用于防止書籍內容的缺失,因此出現了當時非常火爆的《平面設計中的網格系統》一書。

          圖片

          雖然這是一本非常老的書,但是設計本身就是相通,將其核心思想用在圖標設計、網頁設計、B端設計當中都有著明確的指導意義。

          而在設計(網頁端、桌面端)產品時,對于空間上的理解,一直以來都是令人頭疼的問題。

          我們將屏幕當中的設計空間分為 橫向 與 縱向 兩個維度:

          圖片

          橫向:

          由于大多數顯示器都是寬屏的形式,導致我們大多數頁面內容都是通過橫向的方式進行列式排布,也就導致縱向導航、二三級內容分布較多;而市面上所要兼容的橫向尺寸較多,大致分為:1920、1440、1366、1280,而怎樣將如此多的尺寸,擺放不同的元素,這仿佛才是設計的難點。

          縱向:

          屏幕的縱向的空間同樣十分關鍵,當內容在橫向無法滿足時,則會增加屏幕縱向的內容量。但是我們可以通過瀏覽器的特性,縱向的內容通過滾動條進行收折,進而實現兼容。

           

          柵格的定義

          前面說了這么多,我們來聊聊柵格的定義。

          柵格:是對界面當中元素橫向排布的一種模式,主要用于大型區塊間距的排列,不適用于 圖標與文字 間隔的小型元素。

          圖片

          這里有兩個重要點:

          橫向排布:代表著柵格的用法,這也是為什么柵格都是一列一列的原因。

          用于大型區塊:不是任何內容都可以用柵格,比如在 卡片當中的圖標、文字,更多是要分析整個卡片,將其看作一個整體,如上圖。

           

          柵格的組成形式

          在一個常見的柵格當中,一般分為 頁邊距、水槽、柵格寬度:

          圖片

          頁邊距:是柵格與外層信息的保護區域

          因為在整個柵格系統當中,除了柵格之外,往往還會有其他的內容進行展示(如上上方圖,柵格日常的使用頁面),而我們正好可以通過頁邊距的方式,將其進行區分。我們以常見的B端界面為例,通過頁邊距可以將側邊導航與內容頁進行區分,保證頁面間的親密性,常見的頁邊距尺寸一般為 20px、24px。

           

          水槽:是確定柵格寬度間的固定間距,通常是幫助柵格內的元素進行更為合理的排布。

          水槽目的就是為了統一元素間的距離。比如現在頁面當中有兩個卡片的內容,而使用水槽,我就可以將這兩個卡片的內容,確定其間距(再次強調柵格用于確定橫向內容)方便柵格當中元素的信息排列。

           

          柵格寬度:是柵格當中內容所占的基本寬度,一個柵格寬度往往是通過 內容寬度、頁邊距、水槽 排除過后所剩的寬度平均得出,一般會分為 12欄、24欄 兩種方式。

          柵格寬度的確定,其實就是一個數學題,先給你一個公式(不建議使):

          (A×n) – i = W

          A:一個柵格單元的寬度;a:一個柵格的寬度;n:正整數;i:水槽寬度;W:頁面的寬度。

          雖然公式好像是萬能的,但我不喜歡死記硬背,來深入講一講這個公式背后的邏輯和使用方法。

           

          以1440的頁面為例,通常B端產品左側會有一個導航菜單,假設為 200px,因此整個柵格的內容頁則為1440 – 200=1240px。

          圖片

          然后設定頁邊距寬度為 24px,一個柵格會有兩條頁邊距,剩下寬度則為:1240 – (24*2)=1192px

          圖片

          接著設定整個柵格為12欄,水槽寬度為8px。因為水槽位于 柵格 的左右兩側,也就意味著水槽的數量會比柵格少一列(別問為什么,問就自己去下面圖片數一數)也就是1192 – (8*11)=1104px

          最后因為在水槽已經確定柵格為12欄,整個柵格的寬度則為:1104/12=92px

          圖片

          如果還不能理解,建議跳到開頭,再看一遍。

           

          這里有兩個關鍵點

          整個柵格的順序不能亂:頁面寬度→頁邊距→水槽→柵格寬度。因為我們的柵格一定是從大到小,從外到里,不然做出來的內容很容易無效。

          將元素擺放在柵格中,還需要注意起始位置與結束位置。這里教你們一個口訣:起始在左,結束在右;換句話說就是元素的起始位置必須放在柵格寬度的左側(也中的紅線);

          圖片

          結束位置必須放在柵格寬度的右側(圖中的藍線)

          圖片

          這樣的方式也是為了避免很多設計師知道畫柵格而不會用柵格,出現一些低級錯誤。

          圖片

          關于柵格的定義就先聊到這,下期來與大家講一講關于柵格應用當中的自適應布局、響應式布局,以及其中的斷點等內容,我們下期見~

           

          原文鏈接:CE青年(公眾號)

          作者:CE青年

          轉載請注明:學UI網》B端設計指南 – 柵格的定義

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

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

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

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



          如何構建設計語言系統?

          資深UI設計者

          什么是設計語言?

          設計語言是把設計作為一種“溝通的方式”,在特定的場景中進行內容與信息的傳達。設計是介于科學與美學之間的一種藝術,是需要理性的去解決感性的問題。它和藝術之間的差別就在于“解決問題”。

          設計語言有哪些?

          設計語言最底層是項目設計語言,具有典型特征和主題,比如醫療項目凸顯專業冷靜,節日項目凸顯熱鬧氛圍。往上一層是產品設計語言,強調個性品牌,比如小視頻的設計深色更沉浸,電商從結構到色彩都凸顯熱鬧。很多產品隨著發展,形成一些系列平臺服務,平臺設計語言確保服務“統一規范”。最頂層是生態設計語言,跨設備跨平臺和硬件呈現的設計語言。

          百度直播業務,從單一業務形成系列平臺服務,囊括的不只是 B 端和 C 端用戶產品,還有 8 大垂類蓬勃發展,以及跨業務多宿主的呈現。龐大的平臺業務,特別需要建設平臺設計語言。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          如何構建設計語言?

          所有的設計語言,都是服務于業務頂層戰略發展。制定設計策略前,需對業務所在的行業背景、品牌戰略、用戶群體、流行趨勢有充足的認知。當返工無數次還是沒方向時,說明以下前四點需要再深入明確。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          建立設計原則時(設計語言的標準),不妨嘗試把品牌戰略人格化,由所有人解決所有人問題的愿景,得出產品是一個解決問題的行業專家的身份,Ta 傳達的氣質是簡潔大方的儀表,親和有力的儀態,和專業權威的素養。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          設計語言以現代輕奢風格為基調,它大簡至美、配色和諧、材質考究,以獨具特色的現代格調,構筑起一個充滿質感又十分舒適的直播間,給用戶一致、友好、有品的體驗。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          設計動手前,按照風格基調具象化拆解分析必不可少,每一個元素的表達手法都要定位清晰。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          1. 至簡 光影藝術圖標體系

          在圖標的設計中,我們基于專業親和的品牌理念延展出 2 個不同的方向。方案一以直線折紙與光影為視覺元素,呈現一個用心專業的態度。方案二以曲線雕刻藝術展現專業親和的魅力。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          圖標體系化,多場景驗證一致性,發現方案一不夠極致,造型復雜;方案二具備良好的一致性,但破壞了物體固有的結構,影響識別度。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          在一致性的前提下,嘗試簡化、提高識別度。巧妙的將光影和結構交匯,極簡到 2 個圖層呈現主體;語義清晰識別度高;角度漸變光影帶來舒適親和感,15°x 角度的精準把控傳達專業的品牌特性。因此總結出圖標繪制要遵循的法則為識別性、品牌性、愉悅性、一致性。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          2. 和諧 家族感的色彩體系

          a)標準色

          初期直播品牌色繼承百度 App 品牌色,隨著業務逐漸中臺化,需要專屬直播色。運用色彩心理學傳遞給人不同的情緒及心理感受,尋找直播的專屬色相,而活力、溫暖的紅色色調,更能體現親和有力的產品氣質。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          紅色也有冷暖之分,此時提高色相、飽和度的顆粒度,H 色相以 350°為起點,以 2°遞增或遞減,S 飽和度以 5°為階梯,生成更多色階(保持相同 B 明度 100),在多界面和真機驗證,得出直播專屬紅(H350 S80 B100),冷暖適中符合平臺屬性。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          b)協調的輔助色

          同時,運用色環建立輔助色彩體系。H 色相以 350°為起點,以 15°遞增或遞減標準,創建 24 色相色板(保持相同 B 明度 100、S 飽和度 80);選取柔和與協調的類似色和鄰近色作為家族色彩主體,調和互補色與對比色,平衡整體色調。因為不同色相的感官明度并不相同,校正每一個輔助色的 HSB,達到色彩感官上一致。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          C)調色版

          一般會有 2 種方法,一種是使用明度差獲得統一性佳的調色板,優點是落地成本低,代碼可直接實現;另一種則是微調飽和度和色相,獲得鮮明的色板,可使用在插圖繪制上。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          3. 考究 新穎獨特材質

          亞克力,這種具有透明質感、光學品質的材質,在設計領域最早應用在家居設計上,被互聯網設計師熟知是在微軟的概念視頻里,隨之逐漸應用到 icon 繪制上,亞克力 1.0 版本背景和主體層次沒拉開,2.0 版本更趨向加大不透明度和模糊值,達到清晰舒適又兼具藝術美感。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          這種量身打造的稀缺材質運用在運營玩法上,如紅包雨玩法,既能凸顯平臺專業用心的態度,又能強化用戶消費行為轉化,助力變現增長。

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          用戶激勵體系,采用 3D 玉石潤澤質感+動態折射光影,體現有內涵不張揚的泛知識調性,凸顯用戶獨特身份感

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          如何構建設計語言系統?來看百度直播平臺的實戰案例!

          寫在最后

          在每一個小元素的創作中,我們都時刻謹記,無論是項目的主題語言、還是產品的設計語言、甚至是生態的,終點都是傳達企業文化以及價值觀。從戰略層重構業務的認知體系,再將品牌戰略人格化,才能夠在茫然期產生真正的篤定感,逐步拆解設計目標和構建符合業務氣質的設計語言,達到最愉悅的體驗。

          文章來源:優設 作者:百度MEUX

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          日歷

          鏈接

          個人資料

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

          存檔

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