首頁

APP項目設(shè)計總結(jié)

seo達人



 

圖片

 

圖片

圖片

圖片

 

圖片

 

圖片

 

圖片

圖片

圖片

圖片

圖片

圖片

圖片

我們是有底線的~O(∩_∩)O~

 

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

作者:黑馬青年

轉(zhuǎn)載請注明:學UI網(wǎng)》尋工鳥招聘APP項目設(shè)計總結(jié)

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


彩鉛肌理扁平插畫教程(附筆刷)

seo達人



圖片
 
* 本篇教程的示范作品,由我的助理琳琳原創(chuàng)繪制,如需轉(zhuǎn)載教程請申請授權(quán),盜用作品或未授權(quán)轉(zhuǎn)載,侵權(quán)必究! 
 
圖片  
 
知識重點:彩鉛肌理刻畫技法
操作工具:數(shù)位板 |  Photoshop
操作難度:★★★☆☆   
 
在學習彩鉛肌理插畫之前,我們先來簡單了解一下什么是彩鉛。
彩鉛畫,是一種綜合了素描和色彩之間的繪畫形式。它的獨特性在于色彩豐富且細膩,線條感清晰,可以表現(xiàn)出較為輕盈、通透的質(zhì)感。
給大家介紹一位英國插畫師 Melissa Castrillón 。
Melissa Castrillón 她出生在英國的一個叫 Hitchin 的小鎮(zhèn),2014 年她在 Cambridge school 獲得了碩士學位,她繪畫的兒童書籍獲得了一等榮譽學位,現(xiàn)在她生活工作在劍橋,是一位自由插畫師。
她的插畫運用了彩鉛肌理與絲網(wǎng)印刷結(jié)合的技法,加上獨特的雙色調(diào)配色,讓她的畫面從插畫繪本里脫穎而出。  
 
圖片 
 
 
 
圖片 
 
圖片
 
 
 
圖片 
* 圖片來自英國插畫師:Melissa Castrillón,僅供賞析
*   
分析 Melissa Castrillón 的

畫風特點

//
1.與絲網(wǎng)印刷疊透效果相結(jié)合
圖片
* 圖片來自英國插畫師:Melissa Castrillón,僅供賞析 
 
2.雙色調(diào)配色
圖片
* 圖片來自英國插畫師:Melissa Castrillón,僅供賞析
 
3.使用大量的裝飾線條
圖片 
* 圖片來自英國插畫師:Melissa Castrillón,僅供賞析  
 
說了辣么多,想必對這次的彩鉛肌理插畫大家也有了一個大致的了解了。那讓我們馬上進入今天的主題吧~   
 
圖片 
 
生活不止眼前的電腦、手繪板,還有詩和遠方,你要是沒辦法去遠方,那可以上百度找找。  
我們通過搜索關(guān)鍵詞【奇花異草】就可以得到很多相關(guān)聯(lián)的圖片。 
圖片
TIPS:在選擇植物的時候選擇塊面清晰的植物。  
 
只畫一些植物似乎有些單調(diào)。為了讓畫面更有趣,可以加一個人物主角。我的想法是讓我的主角靠著樹看書,所以選擇了一個類似的人物動態(tài)照片作為參考。
圖片  
 
 
圖片 
 
照片降低透明度墊底,用火柴小人提取動態(tài)。
圖片 
對火柴小人的動態(tài)進行夸張?zhí)幚怼?/section>
圖片 
 
給火柴小人拾掇拾掇,加上五官,設(shè)計服裝。
圖片 
 
最后,給在衣服上設(shè)計一些裝飾花紋。
圖片
 
主角就畫好了,我們再來回顧一下步驟。
圖片  
 
接下來,我們來繪制植物。先對照片的輪廓進行概括,提取植物形態(tài)。
圖片  
 
接著進行二次變形,再次簡化造型。
圖片
圖片 
圖片 
 
最后,將植物圍繞主角擺放,組成完整的一個畫面,線稿就完成了。
圖片  
 
 
 
圖片 
 
接下來就到了萬眾矚目的配色環(huán)節(jié)。
圖片 
 
以藍綠色為底色,運用對比色與互補色,使畫面具有氛圍感的同時加強視覺沖擊力。
圖片 
圖片             
 
 
使用大面積的暖調(diào)橙和紅色,加上一些深藍色點綴,使畫面達到一種熱烈明媚的感覺。
圖片
圖片 
 
使用大面積的綠色背景,加上紫紅,橙色對比色搭配,使畫面富有活力氛圍。
圖片
圖片
TIPS:在配色的過程中,改變色相、飽和度和明度帶來的色彩冷暖感受也不一樣,那么冷暖也是需要對比才能感受到。  
 
  
 
圖片 
 
接下來,我們開始給畫面增加細節(jié)。本次用到的肌理筆刷有四個。
圖片 
 
第一步:背景刻畫。
使用「村口交錯肌理」給背景增加粗糙肌理。吸取比底色淺一些的顏色繪制肌理,再吸取比底色深一點的顏色疊加肌理。
圖片 
 
使用「村口彩鉛」吸取比底色亮的顏色,沿著植物的外輪廓繪制密集的虛線裝飾。
圖片
背景就搞定了。 
 
圖片 
 
第二步:植物刻畫。
 

·  葉子

使用「村口彩鉛」繪制粗細不同的線條給葉子增加脈絡。
圖片
圖片 
 
「村口彩鉛」在葉子邊緣繪制線條。
圖片 
 
圖片 
 
再使用「村口彩鉛」延著葉子經(jīng)脈繪制白色亮線肌理。
圖片
TIPS:在繪制線條時可密集一些,繪制長短不一的線條。 
 

·  蓮蓬

「村口彩鉛」繪制肌理,沿著邊緣繪制亮暗線條。
圖片 
 
圖片  
 
「村口彩鉛」沿著蓮子周圍由外向內(nèi)繪制明暗線條。
[優(yōu)化輸出圖像]
  
 
吸取比底色淺的顏色,用「村口彩鉛」沿繪制亮線,增加蓮蓬質(zhì)感。再吸取深一些的紅色繪制線條裝飾蓮蓬。 
[優(yōu)化輸出圖像]
圖片
 
 

· 花朵

吸取紫色用「村口硬邊圓」繪制花瓣內(nèi)壁。
圖片  
 
吸取深紫色使用「村口彩鉛」從里向外繪制暗部線條,線條要密集。再吸取花瓣外壁的顏色繼續(xù)繪制亮部線條。
圖片 
 
圖片  
 
吸取比花瓣底色深的紅色用「村口彩鉛」繪制花瓣暗部,吸取綠色繪制葉子經(jīng)脈。 
圖片 
 
最后在花瓣上繪制一些亮線,在葉子上使用綠色從里向外繪制暗部細節(jié)。
圖片 
 
第三步:人物刻畫
使用「村口彩鉛」繪制粗細不一的頭發(fā)線條,再使用飽和度低的棕色疊加頭發(fā)線條。
圖片 
 
使用淡黃色和藍綠色使用「村口速寫」給衣服繪制一些簡單的裝飾。
圖片  
 
圖片 
 
使用「村口彩鉛」繪制褲子的紅黃藍的條紋裝飾。
圖片 
 
使用「村口速寫」在頭發(fā)與衣服重疊處,手臂與身體重疊處繪制投影。再使用「村口彩鉛」在暗面繪制深色暗部線條。
[優(yōu)化輸出圖像]
圖片 
 
使用「村口速寫」在手指尖尖,手臂兩側(cè)繪制暗線條,線條從指尖逐漸向手臂內(nèi)減少。在手臂中間繪制一些亮線,增加皮膚通透質(zhì)感。
[優(yōu)化輸出圖像]
 
圖片 
 
面部同理。在鼻尖,耳朵邊邊,腮紅邊繪制深色線條,再使用淺色在面部繪制一些亮線。
圖片 
 
最后,使用「村口速寫」繪制暗面,就完成了!
圖片 
 
圖片 
 
第四步:增加絲網(wǎng)印刷效果
復制花蕊,挪動錯位,并調(diào)整模式。我這里使用的是“線性加深”,大家可以多去嘗試其他的模式,不同顏色和不同模式之間會產(chǎn)生不同的效果。
關(guān)于絲網(wǎng)印刷具體內(nèi)容跳轉(zhuǎn)至《有趣又炫目!絲網(wǎng)印刷風格插畫教程(附專用筆刷)
圖片
圖片 
 
在這張插畫里,絲網(wǎng)印刷效果多用于投影。
[優(yōu)化輸出圖像] 
 
圖片 
 
圖片
 
咻咻咻的一頓操作以后,一張「彩鉛扁平」插畫就duangduang的完成了!
本次教程用到的筆刷包,文末可以獲取。 
圖片   
 
圖片 
圖片 
 
【彩鉛筆刷】鏈接:https://pan.baidu.com/s/1c8qol3_QaxANZCrxSGx4vQ 提取碼:2022  
 

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

作者:藍貴蓮

轉(zhuǎn)載請注明:學UI網(wǎng)》彩鉛肌理扁平插畫教程(附筆刷)

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



3種狀態(tài)+5種模式,從UX角度分析加載設(shè)計

seo達人



三種加載狀態(tài)

頁面加載進程會受多方面的影響,例如頁面里圖片、圖標的數(shù)量,頁面中是否有三維場景或模型,是列表式設(shè)計還是卡片式設(shè)計…

 

逐一加載

對于可以同時進行多個加載任務的產(chǎn)品,更適合應用逐一加載的形式,這樣做能減少用戶對于等待的感知程度。任務列表逐一加載的過程會給用戶帶來一種秩序感。

圖片

 

完全加載

進入一個網(wǎng)站或App,很多頁面都會一下就顯示出來所有內(nèi)容,這種頁面完全加載的形式對用戶來說更熟悉。

同樣,頁面完全加載的形式會讓用戶的操作和瀏覽過程更流暢。

圖片

 

延遲加載

延遲加載是用戶主動觸發(fā)的操作,根據(jù)操作系統(tǒng)反饋對應的結(jié)果。延遲加載包括三種形式:

  • 無限滾動當檢測到用戶快要到達列表或頁面的末尾的時候,通過無限滾動來作為觸發(fā)器,引導用戶獲取更多內(nèi)容。

  • 加載更多:通過點擊“加載更多”按鈕來獲取更多內(nèi)容,這個過程由用戶主導決定,是否選擇點擊。

圖片

  • 分頁加載:分頁是在不同頁面上進行的延遲加載。這個過程也是由用戶主動選擇,但和“加載更多”按鈕不同的地方在于,分頁是頁面間的切換,并且用戶能清楚地看到具體的頁面數(shù)量。
圖片

 

五種加載模式

加載模式需要依托場景去考慮。比如一個1秒就能加載的頁面和一個需要5秒才能加載出來的頁面,我們就需要考慮使用不同的加載模式設(shè)計,這樣才能做到差異化設(shè)計。

這里我做了一個表格,將頁面加載需要的時間以及對應的加載模式進行了整合。

圖片

 

0.1秒以內(nèi)

如果加載時長低于0.1秒,用戶不需要等待加載過程,內(nèi)容就能即時呈現(xiàn)出來,有一種“還沒開始就已經(jīng)結(jié)束”的感覺。

0.1秒以內(nèi)的加載不需要在頁面中添加任何加載狀態(tài),但要一個場景需要格外注意,如果用戶剛完成一系列復雜的操作,點擊提交之后,考慮為用戶提供撤消機制

圖片

用谷歌郵箱發(fā)送郵件時,發(fā)送成功之后會彈出一個撤銷提示,允許用戶在5s內(nèi)撤銷剛才發(fā)送成功的郵件。

 

0.1-1秒間

大多數(shù)產(chǎn)品的頁面加載速度都在這個區(qū)間,用戶幾乎不會注意到這種加載延遲。所以我們不需要增加額外的加載動效來填充這段加載時間,不然可能會起到畫蛇添足的反面效果。

試想一下,如果在每個頁面加載的過程中都加上加載動效,不僅會分散用戶的注意力,并且屏幕上總出現(xiàn)不斷跳動的內(nèi)容,會讓人感到很焦躁。

 

1-2秒間

如果加載時間超過1秒,用戶就會感知到這個加載過程,這個時候我們就可以考慮適當添加加載動畫,緩解用戶等待的焦急感。

  • 微加載1-2秒的加載時間對用戶來說,說長不長說短也不短,優(yōu)先推薦輕量級的動畫加載形式,為用戶提供一種進度感。
圖片

在下載內(nèi)容的過程中,使用這種輕量級的環(huán)形動畫來顯示加載進度,簡潔清晰,而且還能作為組件來復用,能夠極大提升工作效率。

 

  • 骨架屏用于整頁加載,這種加載形式在產(chǎn)品中的應用也越來越頻繁。骨架屏可以讓用戶在等待加載的過程中,先了解頁面的架構(gòu)。

圖片

在骨架屏基礎(chǔ)上,可以“選裝”一些好看的效果,增加頁面加載時的視覺體驗觀感:

  • 微光效果在骨架屏基礎(chǔ)上添加微光效果,光感的加入能將用戶的注意力從等待中轉(zhuǎn)移開,有效地減少等待感知。

圖片

  • 脈沖效果:效果和微光效果很像,差異的地方在于脈沖效果用于單個的任務或卡片列表。

圖片

 

2-10秒

這個加載時間對于用戶來說已經(jīng)很長了,對于設(shè)計師來說,需要對這段加載時間進行合理有效地設(shè)計,來提升用戶體驗。

  • 時間提示在開發(fā)中很難以分和秒為單位來精確地估計加載時間。

圖片

如果在加載的過程中,想給用戶一個期望的時間值,告訴用戶整個加載過程需要多長時間,我們可以用“這可能需要幾秒鐘”這種提示方法,既能展示加載需要的時間,又能給用戶一個時間預期。

  • 進度條:最常使用的加載形式,加載過程中使用緩入動畫會讓整個過程看起來更像在加速。

圖片

  • 分步提示如果加載過程過長,可以將整個過程分為幾個不同的步驟,幫助用戶預估操作完成需要的時間。如果系統(tǒng)正在處理多個項目,分步提示的設(shè)計能讓用戶明確了解已完成的操作。

圖片

 

10秒以上

  • 百分比加載使用百分比加載雖然不能告訴用戶加載完成需要多長時間,但是能提供一種過程感,讓用戶自己來估計加載時間。圓形進度條+百分比是最常見的加載形式。需要注意的是,不要在加載到99%的時候讓進度條卡住不動,這樣會讓用戶感到焦急。

圖片

  • 后臺加載如果一項任務需要加載很長時間,我們不能讓用戶看著進度條干等,其他什么都做不了,這種情況我們可以考慮將任務放到后臺去加載。

圖片

在Google Drive中上傳較大的文件時,系統(tǒng)會立即給出反饋,將任務窗口縮放到屏幕的右下角,我們可以通過這個小窗口檢查上傳進度和上傳情況,而且還不耽誤使用頁面上的其他功能。

 

最后

把加載細分成這五種模式,可以覆蓋很多使用場景,這樣的對癥下藥既能保證用戶體驗,還能讓產(chǎn)品豐富化,起到錦上添花的作用。

在對的時間和對的場景下做對的事,這句話用在什么地方都不為過,設(shè)計也是一樣。

最后考慮到大家經(jīng)常使用卡片式UI排版,為大家整理了90+個iOS卡片模板,源文件已經(jīng)打包好,大家可后臺領(lǐng)取。

領(lǐng)取方式:關(guān)注公眾號,后臺回復【小組件】獲取源文件。

圖片

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

 

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

作者:Clippp

轉(zhuǎn)載請注明:學UI網(wǎng)》3種狀態(tài)+5種模式,從UX角度分析加載設(shè)計

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


不懂就問!為什么英文字體名字這么長?

seo達人


圖片

以這款Helvetica字體為例,我們可以把字體名稱分為5個部分。

 

圖片

我們先看第一部分,第一部分包括了兩個詞,前半部分是字體名字,而“Neue”可以理解為升級版。

“HelveticaNeue”是Linotype公司在1983年更新的新版字體。在原有的基礎(chǔ)上,對許多字符進行了精細的修改,還增加了更多不同的粗細與寬度的選擇。

圖片

2019年4月,Monotype公司正式發(fā)布了全新的字體“Helvetica Now”,共有三種形體,分別為:Micro、Display和Text。

圖片

Micro版本將專門為移動設(shè)備等小屏幕而設(shè)計,可以解決目前Helvetica字體在小屏幕中難以辨認等非常多的問題。

Display版主要針對較大的標題,如廣告和橫幅的字體使用。

Text版本則針對標準尺寸的書面文字所使用。

圖片

圖片

圖片

Helvetica Now更趨近完美,如需使用此Helvetica,可以優(yōu)先考慮這個版本。(文末有下載)

 

圖片

第二部分代表的是字體公司名稱,如此款字體“LT”則是“Linotype”萊諾字體公司的縮寫。

當然,不同公司出版字體,顯示的公司簡稱也不一樣。如著名的襯線體“Bodoni”則是由“MT-蒙納字體”公司出版。

圖片

比較常見的還有“MS-微軟字體”、“ITC-國際字體”等。

圖片

 

圖片

第三部分,“Std”是英文單詞“Standard”的縮寫,代表著這個字體只支持基礎(chǔ)的字符集。與其相對應的“Pro”是英文單詞“Professional”,代表具有更多的字符集。

圖片

圖片

 

圖片

第四部分為字重(線幅),是指字母筆畫的粗細級別,以:“Helvetica Now Display”為例,共有以下10種字重:

圖片

圖片

圖片

漢字因筆比較復雜,粗細變化比較少,遠不及英文字體豐富,以思源字體為例,共有以下7種字重:

圖片

 

圖片

第五部分為字體的格式,目前主流的格式為OTF和TTF。

那該選哪個格式呢?這主要取決于用戶的場景。

如果你需要使用MS Office進行大量工作,建議使用.ttf字體,因為它是由Apple和Microsoft所開發(fā),與Microsoft軟件兼容性更佳,例如:只能將.ttf字體嵌入到Word和PPt中,而不能嵌入.otf字體。

圖片

如果你是一名設(shè)計師,需要使用Adobe軟件進行大量的印刷設(shè)計工作,建議使用.otf字體。因為它是由Adobe和Microsoft所開發(fā)。OTF格式還提供了更多風格的替代方案和字距調(diào)整選項,對于設(shè)計師更實用。

圖片

 

通過本期講解,相信大家對于字體名字中的英文含義有了一定程度的了解,下一期我們繼續(xù)講解更多冷知識,下期見!

“Helvetica Now”全套字體 ,可以在公眾號對話框回復【HE】獲取。(如需商用請購買正版字體)

 

原文地址:藝海拾貝Design(公眾號)

作者:鄧海貝

轉(zhuǎn)載請注明:學UI網(wǎng)》不懂就問!為什么英文字體名字這么長?

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


這是一份匯集全球優(yōu)秀APP截圖的資源

seo達人


 
圖片 
 
看到這些界面很多小伙伴兒會忍不住問黑馬哥這都是什么產(chǎn)品,哪里可以下載。其實我也沒有下載~O(∩_∩)O哈哈~,這就是今天要給大家分享的一個好東西。
 
為了方便大家進行靈感采集,黑馬哥為大家發(fā)現(xiàn)了一個不錯的平臺。匯集了全球眾多的優(yōu)秀 APP 截圖,你再也無需一個一個去下載截圖了,而且也不需要受到注冊才能使用的煩惱,這里全部為你截圖好了。第一次訪問的時候,驚訝到我了,簡直是非常的人性化,這些優(yōu)秀的設(shè)計開啟了設(shè)計的靈感源泉。
打開網(wǎng)站映入眼眶的這個數(shù)字有沒有驚呆小伙伴兒,網(wǎng)站匯集了 50000 多個應用的屏幕截圖,大大的節(jié)省了設(shè)計師一個一個下載截圖的時間。 
 
圖片 
 
網(wǎng)站通過應用和屏幕截圖來進行分類展示,默認以應用名稱的形式展示,如果你想要直接查看屏幕截圖,點擊按鈕切換也是非常便利。
圖片 
 
同樣的應用還為大家區(qū)分了 iOS 和 Android 兩個不同的版本,是不是非常的人性化。
圖片 
 
點擊選中的產(chǎn)品會進入到該產(chǎn)品的屏幕截圖詳情界面,匯聚了這個產(chǎn)品的全部界面截圖。如果該產(chǎn)品上線了 iOS 和 Android 兩個不同的版本,詳情界面也會分別展示兩個不同版本的屏幕截圖。
圖片 
 
這是一個使用起來非常簡單的網(wǎng)站,海量的設(shè)計必將開啟你的靈感腦洞。話不多說,大家趕緊去體驗一下吧!把那些優(yōu)秀的設(shè)計作品都翻出來,提高我們的設(shè)計效率。 
 
APP 屏幕截圖匯總網(wǎng)站鏈接:
https://mobbin.design/備注:僅作為學習交流,請勿他用。  
 
 
原文地址:黑馬家族(公眾號) 
作者:黑馬青年

轉(zhuǎn)載請注明:學UI網(wǎng)》這是一份匯集全球優(yōu)秀APP截圖的資源

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



百度健康服務化體驗

seo達人


圖片

 

背景介紹

百度健康發(fā)揮搜索入口直達服務的優(yōu)勢,通過搜索快速連接人與信息、人與服務,形成了健康科普、在線咨詢服務、商城購藥服務、慢病管理服務以及互聯(lián)網(wǎng)醫(yī)院服務五大服務體系。同時,基于百度強大的AI和技術(shù)實力,在海量搜索數(shù)據(jù)中直接地獲取用戶真實意圖,智慧化連接服務。通過大數(shù)據(jù)對患者和醫(yī)生進行有價值的匹配引導,提供從健康科普到在線醫(yī)療的一站式服務中心,全面覆蓋用戶個人及家庭健康需求,形成完整服務鏈條。在設(shè)計理念上,我們致力于用智慧化方式給病患提供更加可及性和便捷性的互動體驗,并圍繞多端場景提供多元化體驗服務設(shè)計。

圖片

 

多場景滿足用戶需求

1.醫(yī)學可視化圖形,提升用戶閱讀體驗

用戶在閱讀醫(yī)療相關(guān)知識內(nèi)容時,內(nèi)容的表現(xiàn)形式較單一,文字的描述晦澀難懂,用戶很難真正的理解內(nèi)容。醫(yī)學可視化圖形,能夠明確有效的補充用戶對詞條的理解,形成對內(nèi)容的權(quán)威認知。

圖片

 

我們結(jié)合科學+美學雙線標準,從醫(yī)學、解刨、瀏覽舒適度等多維度視角繪制插圖,通過更直觀、舒適、生動形象的方式傳達內(nèi)容,解決了日常大眾對疾病知識感到晦澀難懂的痛點。這也成為了醫(yī)療搜索體驗中一個獨具匠心的創(chuàng)新,是百度健康打造產(chǎn)品醫(yī)療權(quán)威感知的重要基礎(chǔ)。截止目前已經(jīng)應用一千多幅插圖,覆蓋32科室共計3000個疾病詞條。

 

圖片

 

2.Ai交互+互動模板,高效在線問診

AI智能交互互動模板,實現(xiàn)智能診療對話模型,智能分析預診導診,通過AI學習構(gòu)建適合臨床輔助診斷的體驗流程,深度將篩查、自測、診斷等多環(huán)節(jié)嵌入到診療流程中,自然、及時、流暢的應答患者提問,極大的提升了診療效率。

疫情期間,百度健康和政府合作打造智能診療系統(tǒng)解決方案,幫助人們快速獲得智能化診斷、在線診療和心理疏導等幫助,幫助無癥狀用戶進行預防,高危患者及時獲得診療建議。

圖片

單新冠肺炎AI自測在疫情初期高發(fā)時段累計服務用戶超千萬人。其余自測分型也已覆蓋四百多種。

 

3、線下場景線上映射,模擬真實場景

1)「線上處方藥單」的設(shè)計樣式,模擬現(xiàn)實中去醫(yī)院開藥的「線下打印處方單」樣式,將無情感的界面轉(zhuǎn)化成用戶熟悉的可感知形態(tài),緩解在線的疏離感,充分體現(xiàn)情感化設(shè)計,使溝通更具沉浸感。最大程度的降低用戶的理解成本,加深用戶對產(chǎn)品的信賴感,使用戶有更真實的服務體驗。

圖片

疫情期間,線上購藥的需求猛增。線上開處方項目,實現(xiàn)了用戶可以足不出戶,從問診到開處方再到藥品到家一站式的服務體驗。

 

 

2)互聯(lián)網(wǎng)醫(yī)院一站式線上線下診療閉環(huán)

針對公立醫(yī)院百度健康搭建了全套互聯(lián)網(wǎng)醫(yī)院服務場景解決方案,提供一站式線上線下診療閉環(huán),診前、診中、診后建立整套服務體系,無縫銜接線上線下場景,立體式給用戶提供服務。通過對醫(yī)院線下就醫(yī)的全流程的觀察,將線下體驗流程還原至線上,從掛號、繳費、查詢到復診、復查再到診后慢病管理,打通‘醫(yī)-方-藥’閉環(huán),全面提交就診效率,形成患者、醫(yī)院、醫(yī)生完整的三端服務閉環(huán)。同時,成為國家分級診療工作的有利補充。

圖片

 

結(jié)語

百度健康做為全網(wǎng)領(lǐng)先的醫(yī)療科普服務平臺。為用戶打造無障礙智能化健康管理服務中心,做到靈活、共享、及時、關(guān)懷。未來還將不斷優(yōu)化深耕,推動健康產(chǎn)業(yè)建設(shè)智慧化進程,為全面構(gòu)筑以人為本的健康生態(tài)而努力,為早日實現(xiàn)“健康中國”的國家戰(zhàn)略助力,成為中國百姓首選的“健康管家”。

 

原文地址:百度MEUX(公眾號)

作者:做你健康管家的


轉(zhuǎn)載請注明:學UI網(wǎng)》百度健康服務化體驗

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


Figma的自動布局也太好用了吧!

seo達人


1. 自動布局快捷鍵

圖片

Mac OS 系統(tǒng)快捷鍵

  • 開啟自動布局:Shift + A
  • 關(guān)閉自動布局:Shift + Option + A(圖上漏掉了)
  • 關(guān)閉自動布局并刪除 Frame:Command + Shift + G
  • 重制(復制并粘貼,包含自動布局設(shè)置):Command + D

 

Windows 快捷鍵

  • 開啟自動布局:Shift + A
  • 關(guān)閉自動布局:Shift + Alt + A(圖上漏掉了)
  • 關(guān)閉自動布局并刪除 Frame:Ctrl + Shift + G
  • 重制(復制并粘貼,包含自動布局設(shè)置):Ctrl + D

 

2. 樣式復制粘貼

圖片

Mac OS 系統(tǒng)快捷鍵

  • 樣式復制:Option + Command + C
  • 樣式粘貼:Option + Command + V

 

Windows 快捷鍵

  • 樣式復制:Option + Ctrl + C
  • 樣式粘貼:Option + Ctrl + V

 

3. 調(diào)準順序

圖片

其實就算不用快捷鍵,也可以通過鼠標調(diào)準順序。

圖片

但是畢竟中心哪個圓圈面積太小不好找,數(shù)量不多的話,用快捷鍵會更快一些。

 

Mac OS 系統(tǒng)快捷鍵

  • 往左調(diào)整:Command + [
  • 往右調(diào)整:Command + ]

 

Windows 快捷鍵

  • 往左調(diào)整:Ctrl + [
  • 往右調(diào)整:Ctrl + ]

 

4. 調(diào)整間距

圖片

通過自動布局設(shè)置,可以讓元素的尺寸根據(jù)間距大小自動調(diào)整寬度。

利用這一點,可以用來做很多東西,例如滑動條。

 

5. 自動間距

圖片

把間距數(shù)值改成 auto, 會自動均分 Frame 內(nèi)元素的間距。

雖然右上角的布局圖標也能起到同樣的作用,但是那樣操作的步驟更多:需要先調(diào)整好兩邊的元素的位置,不能根據(jù)所在 Frame 自動調(diào)整。

 

6. 輸入 0.001 設(shè)置 0 高度

圖片

Figma 不允許輸入 0 高度,如果你嘗試這么做,按下回車后數(shù)值會變成 1。

但是有個小漏洞,那就是如果你輸入 0.001,按下回車后就會發(fā)現(xiàn)數(shù)值變成 0 了。

一定要小數(shù)點后三位,如果只輸入小數(shù)點后一位或兩位,就不會有這個效果。

 

7. 快速選擇內(nèi)部元素

圖片

如果分組或 Frame 層級過多,想要選擇下層的元素,通常是雙擊。

但是層次多了,也還是很麻煩。

還可以按下 Command 的同時用鼠標點擊,這樣可以直接選擇最里層的元素。

可是,如果想要選擇的不是最里層,而是倒數(shù)第 N 層呢?

這種情況,用快捷鍵會更方便一些:

  • 選擇下層:回車鍵
  • 選擇上層:Shift + 回車鍵
  • 選擇下一個:Tab
  • 取消選擇:Esc

 

8. 避免將元素放入自動布局

圖片

往自動布局里放東西,很容易打亂布局,一下子就變化很大。

如果想要避免這種“手誤”,可以在拖動元素的同時按下空格鍵,這樣元素就不會被放到任何自動布局里。

 

9. 利用透明度快速自動布局

圖片

上面卡片的自動布局,其實可以用 Space Between 一鍵設(shè)置出來。

圖片

其實中間的圖標和卡片同寬,只是背景透明所以看起來是居中對齊的。

標題其實不止左上角那一個,卡片左下方還有一個一模一樣的,只是可見度設(shè)置為 0%,所以看不出來。

圖片

 

10. 利用自動布局設(shè)置最小寬度

圖片

很多組件(如上圖文本框)有個最小寬度,如果簡單地使用自動布局是無法滿足的。

方法也不難,就是文本框的 Frame 里加一條不可見的線段,而這個線段的寬度就確定了文本框的最小寬度。

圖片

沒想到 Figma 的自動布局有這么多門道,使用起來多做些組件,肯定能大大提高設(shè)計效率~

 

原文地址:體驗進階(公眾號)

作者:設(shè)計師ZoeYZ

轉(zhuǎn)載請注明:學UI網(wǎng) ?Figma的自動布局也太好用了吧!

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



3個好用到尖叫的設(shè)計細節(jié),再不知道就晚了!

seo達人

莫b
圖片

大家看到這張圖的第一感受是什么?是不是覺得大氣,高級、簡約,而且不會覺得不精致。

圖片

再來看這張圖,是不是同樣的感受,給人高級感。那么有沒有想過是什么影響了這些高級感?是不是我們?nèi)庋勰芸吹降念伾?、留白、陰影、大小、圖片、排版、質(zhì)感等細節(jié)。就是這些元素的和諧處理,才使得整體看上去同一個世界,讓我們感官愉悅。

因此我們做設(shè)計時候,也需要和諧的處理這些元素關(guān)系。把這些關(guān)系處理好了,設(shè)計細節(jié)自然豐富,精致度自然也就上來了。

下面我們看看間距節(jié)奏、投影質(zhì)感、高級圖片等在設(shè)計中如何處理。

1.間距節(jié)奏

我們常說的間距節(jié)奏,其實就是留白或者負空間的應用。那么在UI版式中,這些負空間就是間距網(wǎng)格的應用,間距節(jié)奏的把控,下面看這張圖。

圖片

上圖,就是一張基礎(chǔ)的版式間距節(jié)奏。好的版式節(jié)奏,就像音樂一樣,它通過變化的節(jié)奏來表達動聽的音樂。

對于間距節(jié)奏,我們在設(shè)計中盡量體現(xiàn)倍數(shù)關(guān)系,這樣的節(jié)奏是最明顯的,而且設(shè)版式節(jié)奏感也會更強,比如看下面這個案例。

圖片
大標題和內(nèi)容之間的間距一定要區(qū)分開,而且是要成比例的關(guān)系,比如1:2這樣的思路,因為這節(jié)奏感會更強一些。
圖片
這樣的設(shè)計思路在整個UI版式系統(tǒng)中,都是同樣可以延續(xù)下來的。

 

2.投影質(zhì)感

在UI的設(shè)計語言中,投影是其中一個基礎(chǔ)層風格樣式,它處理好壞也會直接影響到界面品質(zhì)感。

圖片

Dribbble@Gleb Kuznetsov?

上圖是Gleb Kuznetsov的作品,雖然界面設(shè)計中沒有過多復雜的設(shè)計,但是整個界面品質(zhì)感和細節(jié)處理還是挺值得學習的。

我們可以注意以下幾個細節(jié),紅圈的地方。底部語音是輕擬態(tài)質(zhì)感,其他部分的卡片設(shè)計和按鈕均用了細膩的投影,而且按鈕的投影還有帶有色相。

圖片

所以對于投影的處理,我們可以看出可以存在兩種思路,按鈕的使用帶有色相的,卡片類的統(tǒng)一灰色投影。

圖片
投影的處理步驟

對于這種投影的處理思路,大家可以看上圖,以按鈕為例,首先將按鈕基本形態(tài)做好。其次復制一個上層按鈕,然后將其長度左右縮小一些,降低透明度50%,第三步就直接將這個按鈕模糊處理,模糊值大小可以調(diào)節(jié)到合適的范圍即可。

圖片

其實我們看一些優(yōu)秀的Web端設(shè)計,投影出現(xiàn)的概率也是比較大的。通過投影可以增加細節(jié),豐富質(zhì)感,而且還可以有多種顏色漸變模糊。

 

3.高級圖片

圖片在整個設(shè)計中可以說是重中之重,因為圖片占比也是非常大。特別是以圖片為主的產(chǎn)品,一定要注意圖片的品質(zhì)感。

圖片
29cm官網(wǎng)

29cm的官網(wǎng),整體版式質(zhì)感看著就會很高級。大家可以去看看蘋果官網(wǎng),圖片又高級,又大,產(chǎn)品質(zhì)感精致,對于用戶來說,只要進入官網(wǎng)就會有想購買的沖動。

圖片

29cm官網(wǎng)

選擇圖片時候需要注意幾個點,避開牛皮癬的圖,避免花哨圖片,一定要高清,這是最基本的要求。那么其他的比如角度,親和力,人像等也是需要注意選擇符合產(chǎn)品調(diào)性的圖。
圖片

選擇圖片需注意的陷阱,比如上圖,右側(cè)的圖其實作為生活中的照片是很溫馨的,也適合發(fā)朋友圈。但是如果在設(shè)計中,就會顯得元素多,而且不夠聚焦,左側(cè)的就會更聚焦有力量,有質(zhì)感。

好了,今天的內(nèi)容就先講到這里,我們下期見。

 

原文地址:功夫UX (公眾號)
作者: Tony

轉(zhuǎn)載請注明:學UI網(wǎng)》3個好用到尖叫的設(shè)計細節(jié),再不知道就晚了!

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


作為設(shè)計師,這幾個APP你居然不知道

seo達人


 

Behance

對于很多設(shè)計師來說,Behance 這款 APP 都非常熟悉,里面匯集了全球優(yōu)秀的設(shè)計師群體。會在上面發(fā)布個人或者團隊作品,質(zhì)量都是非常不錯的,有助于提高我們的設(shè)計眼界。 
圖片 
除了設(shè)計作品質(zhì)量較高以外,作品包裝的形式也是值得收藏,可以提高我們的作品包裝眼界。 
圖片 
 

iMuseum 每日環(huán)球展覽

iMuseum APP 是一款關(guān)于博物館展覽資訊的應用,專注于全球藝術(shù)展覽、博物館活動,讓你時刻了解身邊正在進行的展覽。這里會提供全球各個國家的展覽館信息,全球博物館的資訊內(nèi)容,資訊非常全面。 
圖片 
對于設(shè)計師來說,看展覽絕對是提升審美能力最好的方法之一。通過對藝術(shù)作品的欣賞熏陶自己的藝術(shù)細胞,提高對藝術(shù)的理解,感受藝術(shù)氛圍也是提升設(shè)計感知能力的關(guān)鍵。 
圖片 
 

開眼

開眼-帶你看更好的世界,這是一個全球精選短視頻平臺,匯集了創(chuàng)意、動畫、時尚、廣告、科技、旅行、影視等等領(lǐng)域的優(yōu)質(zhì)短視頻,還有這些領(lǐng)域的創(chuàng)意人群。
作為設(shè)計師眼界很重要,只有看過更優(yōu)質(zhì)的內(nèi)容才能提高我們的眼界,相信開眼絕對可以帶給你看世界的眼界,提高我們的感知能力。 
 
圖片 
 

instagram

 這是一款免費提供圖片或者視頻分享的社區(qū)應用軟件,這里匯集了各領(lǐng)域的人群,有明星達人、設(shè)計師、創(chuàng)意人群、普通人群等等。這就相當于一個龐大的朋友圈一樣,各領(lǐng)域的人群在自己的圈子分享自己的生活或者工作。 
 
圖片 
 
里面有很多優(yōu)秀的設(shè)計師和創(chuàng)意類人群在平臺發(fā)布自己的作品和經(jīng)驗,可以關(guān)注他們,獲得更多優(yōu)質(zhì)的動態(tài)。里面涉及的領(lǐng)域很多,設(shè)計、插畫、藝術(shù)、時尚、攝影、海報、雜志等等,可以去關(guān)注體驗一下。 
 
圖片 
 

Pantone Connect

 
每年的年度顏色相信對于設(shè)計師來說都很熟悉,這些年度流行色就來自 Pantone。而 Pantone Connect 蘋果版是一款設(shè)計師配色軟件,這個 APP 主要是幫助設(shè)計師簡化色彩的選擇,提高對于色彩的感知能力,進而提升我們的設(shè)計質(zhì)量和效率。 
圖片 
 
這是設(shè)計師與色彩專家必備的軟件之一,能夠精簡你的色彩靈感到設(shè)計的流程,讓你輕松捕捉色彩并運用到設(shè)計項目中。
圖片 
 

國家地理

提高審美最有效的方式就是多看、多分析、多總結(jié),而多看是比較關(guān)鍵的因素之一,看優(yōu)秀的設(shè)計作品和攝影作品等。《國家地理》雜志(中文版:華夏地理)是一個欣賞攝影作品非常不錯的應用,風光、人文、紀實類等攝影作品非常豐富,且攝影作品質(zhì)量較高。 
 
圖片 
 
APP 里面也提供了國家地理雜志的電子期刊,感興趣的同學可以訂閱閱讀??梢酝ㄟ^對攝影作品的構(gòu)圖、光影、色彩等分析學習,提高自己的審美能力。 
 
圖片 
 

ZCOOL 站酷

 
對于國內(nèi)設(shè)計師來說,站酷應該算是再熟悉不過的了。里面匯集了眾多設(shè)計師創(chuàng)作的作品和文章,也會舉辦一些設(shè)計相關(guān)的比賽,還有很多其他主題活動等。
圖片 
 
除了在上面獲取設(shè)計相關(guān)內(nèi)容以外,我們也可以在平臺上發(fā)布自己的作品和經(jīng)驗,不僅可以積累作品,也能獲得更多機遇,是打造個人 IP 較為理想的平臺之一。 
圖片 
 

花瓣

這是個人比較喜歡的一個 APP,可以幫助我們采集優(yōu)秀的設(shè)計作品和圖片素材等??梢栽谏厦姘l(fā)現(xiàn)你感興趣的內(nèi)容,采集你喜歡的作品,整理你的靈感資源庫,還能非常方便的分享你的采集。 
圖片 
 
花瓣里面的內(nèi)容都是各位設(shè)計師在其它平臺采集進去的,部分點擊可以進入原始出處,也是非常便利的。主要是手機和電腦都可以同步,不占自己的內(nèi)存,攜帶和管理都非常便利。 
 
圖片 
 

TOPYS

TOPYS 專注在全球創(chuàng)意、藝術(shù)、人文領(lǐng)域?qū)ふ易钣匈|(zhì)感的聲音,專訪了百余位全球頂級創(chuàng)意人,原創(chuàng)文章內(nèi)容超過 30000 篇。
圖片 
 
在 APP 里面包含了設(shè)計、創(chuàng)意、藝術(shù)、文化、名人訪談、靈感視頻等等內(nèi)容,通過這個應用可以方便我們了解各領(lǐng)域的最新動態(tài)。 
 
圖片 
 

VART

這是一個藝術(shù)類 APP,功能也比較強大,可以幫助設(shè)計師了解藝術(shù)展覽,根據(jù)你的定位查找周邊的展覽信息。不僅可以搜尋藝術(shù)展覽和實現(xiàn)展覽訂票等關(guān)聯(lián)操作以外,也能在應用里面聽展、全景觀展和了解一些藝術(shù)家信息等。
圖片 
 
當然展覽的海報設(shè)計也是不容錯過的作品欣賞,這絕對是提升海報設(shè)計能力的關(guān)鍵。通過觀看藝術(shù)展覽可以提高我們的藝術(shù)細胞,通過了解藝術(shù)家可以讓我們知道這些藝術(shù)作品背后的故事,這些都是提高我們設(shè)計感知能力的關(guān)鍵。 
圖片 
 

小結(jié)

提高我們設(shè)計能力的途徑有很多,而這些與設(shè)計、藝術(shù)相關(guān)的 APP 也能對我們的提升起到至關(guān)重要的作用。今天先給大家分享這幾個常用的 APP 作為拋磚引玉,希望可以帶給你一些幫助!   
 
 
原文地址:黑馬家族(公眾號)
 
作者:黑馬青年
 
轉(zhuǎn)載請注明:學UI網(wǎng)》作為設(shè)計師,這幾個APP你居然不知道

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

五個案例教會你怎么做卡通 LOGO (二)

seo達人


在上周的卡通 LOGO 教程中(指路→ 五個案例教會你怎么做卡通 LOGO),我已經(jīng)講了一些我個人設(shè)計卡通標志的方法及需要注意到的點。那么這次我將會繼續(xù)帶來一些卡通 LOGO 設(shè)計的心得。  
 
圖片  
 
我真的很喜歡做猴兒,包括猴兒的親戚猩猩……
這個 LOGO 的設(shè)計也是巧合來的,偶然間在 PIN 上看到一張大猩猩的照片,這個姿勢非常有趣,仿佛在說:我 TM 真是個大帥比。這個心態(tài)我很喜歡,像極了我認識的一個叫猴子的老師…… 
圖片  
 
那么還是老辦法,我們先大致勾一下這個帥比的輪廓。 
圖片  
 
勾出大致輪廓后,觀察整體的輪廓形態(tài),還記得上次講過的嗎?卡通形象身體短一些,頭大且圓,可愛氣質(zhì)才能突顯。所以這里我們先復制一個輪廓出來,再壓扁(這樣做的目的是為了在精確繪制的時候能把控住頭與身體的比例關(guān)系)。 
圖片 
 
但是這個案例壓扁后,我發(fā)現(xiàn)頭部的比例其實也還可以,那么我就直接拿壓扁后的來墊底,開始繪制精致的外輪廓(注意,我們依然要尋找一個起始的錨點,使猩猩是一條完整的合并的形狀)。 
在一邊繪制的時候,一遍注意讓線條盡量順滑,呈現(xiàn)更幾何的狀態(tài),我這邊標注了下一些地方需要注意。 
圖片 
重新繪制后的效果,是不是比草圖上的比例更敦實更可愛一些。  
 
 

重點 01

卡通形象的身體比例,四肢稍微短胖點,可愛氣質(zhì)更突顯。
這個輪廓完成后,我們就可以開始先給它畫上五官。但是這個圖形,用什么表情來表現(xiàn)比較合適呢,看著我畫好的這個輪廓我突然腦子里……
圖片
對,思考者!  
 
然后我就打算讓這只猩猩帶著點帥氣與內(nèi)涵……
圖片 

重點 02

閉眼表情不僅可以代表睡覺,還可以表現(xiàn)思考、沉思等情緒。想了解更多的卡通表情的表達,可以上網(wǎng)搜索。盡量用最少的線面,表達出情緒。
加上閉眼的表情后,那味兒是不是已經(jīng)出來了,接下來我們再給它上個色,添加一些細節(jié)與陰影高光,再看下效果。 
 
 
圖片 
上完色后感覺還不錯,但是原圖的猩猩是坐在樹干上的,屁股那邊的弧度是一個坐在物體上的狀態(tài),所以我們也需要填補一些什么物體讓它能穩(wěn)穩(wěn)坐著,這里我們又需要展開聯(lián)想,整個圖形你希望呈現(xiàn)一種什么情緒。 
圖片 
如果實在不知道畫什么,用一個半圓,或者一個有弧度的形狀就可以撐住它了。其實到這一步,基本大致完成了,配上文字排版就算搞定了。但是這個圖形,因為猩猩的背部跟底部的半弧空出了一塊空間,那我們可以用一個背景色去填補它,同時上個顏色,讓這只猩猩是在月光下思考。 
圖片  
 
 
圖片
平時我都比較喜歡宇航員系列的一些小物件,每次看到都忍不住會買,所以一直想做一個宇航員的卡通 LOGO。
老規(guī)矩,我們還是先上網(wǎng)搜索一下宇航員大概是什么樣的。  
 

重點 03

搜索素材,提取關(guān)鍵特征,是辨識一個卡通圖形最好的點。
圖片  
看到這些宇航員的圖,試著去找出能表現(xiàn)出宇航員這個元素的特征(這里,我發(fā)現(xiàn)宇航員的元素是頭盔、宇航服),我們再根據(jù)這些特征去分析怎么繪制。

圖片

 

詳細分析過這些元素后,宇航員的配置現(xiàn)在已經(jīng)比較清楚了,那么現(xiàn)在怎么下手?當然,我們要先想,你想做一個什么姿勢/動作的形象?當你無從下手的時候,上網(wǎng)隨便看看,或許能找到你喜歡的姿勢呢
圖片
碰巧看到了這個小企鵝,形象可愛又動感,用到宇航員身上簡直太棒了! 
 

重點 04

當你為卡通形象的姿勢動作發(fā)愁時,試試「借位」的方式用別的物種的動作套到你自己的形象上,可能會有意想不到的收獲。
好,那我們現(xiàn)在把這兩張圖,放在一起,可以用鋼筆,也可以用畫筆先在電腦上潦草的畫一下。 
 
圖片  
 
手殘黨最后的倔強……
圖片  
 
畫下草圖,是為了看個大概……不要計較不要計較!
看過草圖之后,我覺得方案可行,那就開始我手繪之路,其實到了繪制這一步,真的沒有什么技巧可言了。鋼筆練好是關(guān)鍵!  
 
圖片  
 
精準繪制這一步根據(jù)大家的繪制能力,對比例的拿捏能力,繪制出大體的輪廓,繪制完后,給圖形上色,填充細節(jié)。但是這樣看起來,宇航員還是略顯單調(diào),我們可以根據(jù)繪制好的形象,給他增加一些點綴或者是合理的物體(這里主體形象是宇航員,那就可以增加與星空、宇宙的小物件),加個星星,既簡單又合理,畫面也飽滿了。
圖片
圖片 
 
 
圖片 
這一類的卡通 LOGO,我概括它為「擬人化且?guī)в行袠I(yè)屬性」的卡通標志設(shè)計。它不是純吉祥物形象去展示,它帶有人的動作特點,加上能代表行業(yè)特征的物體,能夠生動地傳達品牌行業(yè)屬性。
上面的案例,可以看出是一只烏龜,推著一輛栽著小樹苗的小車,不難看出這個 LOGO 應該是跟盆栽綠植有關(guān)。那它是怎么來的呢?平時的大量看圖,我的兩張庫存圖片就派上用場了。
一只推著盆栽的烏龜。 
圖片
看明白了吧?就是用了烏龜?shù)闹黧w,加上這個土撥鼠推車的動作。首先先粗略勾勒一下烏龜主體。這里的圖片參考,烏龜是騎著自行車的,所以我們先不管它的腳。
圖片
勾完這一步,我們暫時先不畫烏龜?shù)氖帜_,因為我們是要讓它推著車子的,所以我們先調(diào)整草圖的輪廓線條。這邊看草圖,我們有幾個需要優(yōu)化的點。
圖片 
 

重點 05

在自己優(yōu)化線條時,盡量把形狀做的飽滿一些,卡通圖形會顯得更 Q 彈,可愛。
圖片
我們看下調(diào)整后的線條,是不是更飽滿了些?身體的形態(tài)可以了,現(xiàn)在我們來做一下四肢。這張圖雖然角度跟我們要繪制的不太一致,但是我們可以看下大概的位置關(guān)系。 
圖片
畫完四肢,我們再根據(jù)烏龜?shù)奶卣?,細?jié),再給自己畫好的輪廓加上,上個色再看看效果。 
圖片 
最后畫栽小樹苗的小推車,這邊的小推車,我們不做太復雜的處理,我們可以在網(wǎng)上搜一下小推車 icon,一般 icon 的繪制非常簡潔,做 UI 的同學應該都知道。
圖片
畫完小推車再一上色,這個案例就完成啦~
圖片 
 
 
圖片 
 
豬豬那么可愛,為什么要吃它 ?
為了致敬我天 geigei,我特意做了這個案例(別問為什么,我不會說的)。
不說廢話,直接進入正題!偶然在網(wǎng)上看到一張這樣的圖片,心里直呼也太 TM 可愛了!我想畫它!當然,在做這個 LOGO 之前,我的意愿是我要豬豬的……但是不妨礙,我們可以用這個姿勢,放在豬豬身上! 
 
圖片 
熟睡的小鹿,太美好了~
那么我們就先操作起來!先把小鹿,哦不,豬豬的身子給畫出來。還是老辦法,先大致繪制一下線條。
圖片
繪制后我們看看這個輪廓草圖的問題。
圖片
針對這些問題我們進行一下重新繪制并優(yōu)化。
圖片
到這一步,豬豬的身子差不多就 OK 了呢,接著我們就可以開始畫豬頭了!網(wǎng)上找一下豬豬的圖片,你可以找實物照片也可以找豬豬的卡通圖片。 
圖片 
我找了這兩張圖,還是前面說的,觀察特征,細節(jié)。角度不完全相同其實不要緊,只要我們能分析出它的特征即可。
這兩張圖我們可以發(fā)現(xiàn),豬豬的特征是兩頁大耳朵,至于是往上還是往下擺,這完全看你自己想怎么繪制。然后就是翹起來的豬鼻子,與額頭是有一個凹下去的弧度,如果角度不對不方便觀察,可以把圖片旋轉(zhuǎn)一下,可以更清楚分析出來。
圖片

重點 06

有時候參考圖片不一定有合適你繪制形象的角度,旋轉(zhuǎn)圖片或者鏡像,就能得到你想要的。
圖片
根據(jù)前面的分析特征,我這邊繪制了一個豬頭,發(fā)現(xiàn)細節(jié)了嗎?豬耳朵收筆的地方,線條變細了,并做了一個圓角。如果你很熟悉我的作品 ,你會發(fā)現(xiàn)我很多 LOGO 這類的地方都是這么處理,線條粗細不一也是一種繪制風格,收尾地方加圓角不會那么尖銳。
圖片
把兩個繪制好的部分合體了!
接下來就是我們的上色、添加高光陰影細節(jié)等流程……
圖片 
但是發(fā)現(xiàn),這樣看起來有點兒單調(diào),那我們還是老辦法,給豬豬加一個背景色塊吧~加完后明顯會好一些,但是現(xiàn)在看,有點頭重腳輕是不是,那就再給它加一個陰影。
圖片 

重點 07

當你的卡通形象顯得頭重腳輕時,給它加一個陰影/色塊或許能解決這個問題。
加個底色排個版,豬豬就很美很性感啊~~
圖片 
 
 
圖片 
這個案例其實看著很簡單。為什么我要拿這個 LOGO 來講解呢?這里面涉及到一些做好可愛卡通的點。
做過卡通標志的同學是不是會有一種感覺:自己做的卡通老感覺不夠可愛,或者是看著不夠高級。其實這里我想說的是,卡通 LOGO 做的好不好,技法跟審美缺一不可。我能分享的只能是一些關(guān)鍵點,還是要靠自己多看好的卡通作品,積累多了就能拿捏住卡通風格的 LOGO 了。 
 
圖片 
 
上面這些卡通標志,看著很簡單,但是都是非常優(yōu)秀的作品其實沒做太多的裝飾,只是一個主體繪制,就能生動地呈現(xiàn)出形象。這類的卡通非常簡潔,我個人也比較喜歡。
那我們就開始演示下這類卡通 LOGO 是如何做的,還有哪些需要注意的點。
首先,這類 LOGO 基本都是以動物為主體。我們先確定要做的是什么動物,案例上是一頭犀牛,那我們先度娘一下犀牛長啥樣!
圖片 
 
這里我們分析下犀牛的特征。
圖片 
 
如果你覺得用照片分析繪制的難度大,那你也可以搜一下 XX 簡筆畫,更方便你做成卡通風格。 
 
圖片 
分析完后,我們可以先草圖一下犀牛的整體輪廓,這里你可以找一些圖片去墊底,大致畫一下輪廓(方便演示,這里用一張簡筆畫來墊底繪制)。
圖片 
繪制完輪廓草圖,我們可以根據(jù)這個草圖進行繪制并優(yōu)化規(guī)整線條。 
圖片 
根據(jù)上述問題我們做一步步優(yōu)化。 
圖片 
 

重點 08

這類簡潔動物類的卡通 LOGO,關(guān)鍵是頭部飽滿,身子、四肢短。線條可以設(shè)置粗一些,不顯得 low。
整體輪廓我們算是做好了,接下來就是填補五官,上色,增加高光/陰影等細節(jié)部分。哦,差點忘了我們沒有畫尾巴。百度下犀牛,參考著畫條尾巴,應該不難吧。好了,我們看看成品~ 
圖片 

總結(jié) Tips:

1.卡通形象的身體比例,四肢稍微短胖點,可愛氣質(zhì)更突顯。
2.閉眼表情不僅可以代表睡覺,還可以表現(xiàn)思考、沉思等情緒。盡量用最少的線面,表達出情緒。
3.搜索素材,提取關(guān)鍵特征,是辨識一個卡通圖形最重要的點。
4.當你為卡通形象的姿勢動作發(fā)愁時,試試「借位」的方式,用別的物種的動作套到你自己的形象上,可能會有意想不到的收獲。
5.在自己優(yōu)化線條時,盡量把形狀做的飽滿一些,卡通圖形會顯得更 Q 彈,可愛。
6.有時候參考圖片不一定有合適你繪制形象的角度,旋轉(zhuǎn)圖片或者鏡像,就能得到你想要的。
7.當你的卡通形象顯得頭重腳輕時,給它加一個陰影/色塊或許能解決這個問題。
8.簡潔動物類的卡通 LOGO,關(guān)鍵是頭部飽滿,身子、四肢短。線條可以稍微設(shè)置粗一些,不顯得 low。

 

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

作者:小章魚

轉(zhuǎn)載請注明:學UI網(wǎng)》五個案例教會你怎么做卡通 LOGO (二)

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔