最新大地资源网在线观看免费_免费大地资源中文第二页在线观看_大地 ,久久精品黄色网络_日韩黄色三级中文字幕_中文字幕免费乱伦视频_午夜小电影亚洲天

首頁

蘭亭妙微:設(shè)計(jì)在產(chǎn)品全生命周期的價(jià)值深耕

濤濤 設(shè)計(jì)管理與成長

在蘭亭妙微設(shè)計(jì)公司的服務(wù)體系中,我們常被客戶問及:設(shè)計(jì)的價(jià)值該如何落地?在產(chǎn)品從概念到落地、從迭代到增長的全流程里,專業(yè)設(shè)計(jì)團(tuán)隊(duì)究竟能為產(chǎn)品創(chuàng)造怎樣的核心價(jià)值?答案從來不是單一的界面產(chǎn)出或視覺美化,蘭亭妙微始終認(rèn)為,設(shè)計(jì)的價(jià)值體現(xiàn)在產(chǎn)品每一個(gè)發(fā)展階段的深度參與中 —— 以用戶為核心,用科學(xué)的設(shè)計(jì)方法銜接商業(yè)需求與用戶體驗(yàn),讓設(shè)計(jì)成為產(chǎn)品從 0 到 1、從 1 到 N 的核心驅(qū)動(dòng)力。

蘭亭妙微設(shè)計(jì)師們關(guān)注的設(shè)計(jì)界前沿動(dòng)態(tài):院校突破與創(chuàng)意實(shí)踐雙開花

濤濤 設(shè)計(jì)管理與成長

設(shè)計(jì)領(lǐng)域的發(fā)展始終在學(xué)術(shù)探索與商業(yè)實(shí)踐的雙向奔赴中穩(wěn)步前行,2025 年諸多前沿動(dòng)態(tài)為行業(yè)注入了全新活力。從頂尖藝術(shù)設(shè)計(jì)院校的國際排名突破,到充滿巧思的工業(yè)設(shè)計(jì)作品落地,再到大型建筑專案啟動(dòng)、國際藝術(shù)特展開幕與潮流 IP 跨界亮相,設(shè)計(jì)的邊界不斷被拓寬,融合性與創(chuàng)新性愈發(fā)凸顯,展現(xiàn)出多元且蓬勃的發(fā)展態(tài)勢。

移動(dòng)端 UI 設(shè)計(jì)欣賞:langvi 語言學(xué)習(xí) App

藍(lán)藍(lán)設(shè)計(jì)的小編 移動(dòng)端UI設(shè)計(jì)文章及欣賞

北京蘭亭妙微 UI 設(shè)計(jì)公司的設(shè)計(jì)師們很喜歡這一套可愛又充滿童趣的學(xué)習(xí)類 APP界面設(shè)計(jì),今天就和大家一起分析賞析,共同學(xué)習(xí)、共同成長~
 

 

一、核心視覺:卡通 IP 驅(qū)動(dòng)的情感化設(shè)計(jì)

這套設(shè)計(jì)以圓潤軟萌的小怪物 IP為核心視覺符號,構(gòu)建了高度統(tǒng)一的品牌識別系統(tǒng):
 
  • IP 形象體系:黃色主形象搭配紫、粉、藍(lán)等多色變體,對應(yīng)不同功能模塊與用戶角色,視覺層次清晰且記憶點(diǎn)極強(qiáng)。
  • 表情系統(tǒng):豐富的表情庫(戴眼鏡、微笑、害羞、犯困等)貫穿全界面,既用于個(gè)性化頭像設(shè)置,也作為學(xué)習(xí)日歷、進(jìn)度反饋的情緒載體,讓冰冷的數(shù)據(jù)變得生動(dòng)有溫度。
  • 動(dòng)作語言:攤手疑惑、點(diǎn)贊鼓勵(lì)、滿足休憩等動(dòng)態(tài)化形象,讓 App 的交互反饋更具人情味,有效降低學(xué)習(xí)壓力。
 

 

二、功能模塊:清晰直觀的學(xué)習(xí)體驗(yàn)設(shè)計(jì)

從用戶路徑出發(fā),設(shè)計(jì)將復(fù)雜的學(xué)習(xí)流程拆解為輕量化模塊,兼顧實(shí)用性與趣味性:
 
  • 個(gè)人主頁:直觀展示用戶名、學(xué)習(xí)進(jìn)度(聽 / 說 / 錯(cuò)誤率 / 語言等級)及任務(wù)入口,用柔和的進(jìn)度條可視化學(xué)習(xí)狀態(tài),降低信息認(rèn)知成本。
  • 學(xué)習(xí)日歷:以表情化小怪物標(biāo)記每日學(xué)習(xí)情況,下方統(tǒng)計(jì)月度學(xué)習(xí)天數(shù)、專注時(shí)長、專注分?jǐn)?shù)與精力值,讓用戶清晰感知學(xué)習(xí)成果,形成正向激勵(lì)。
  • 個(gè)性化頭像:提供多色、多表情的 IP 形象選擇,強(qiáng)化用戶歸屬感,讓產(chǎn)品更具 “專屬感”。
  • 學(xué)習(xí)交互頁:選擇題、填空題等題型設(shè)計(jì)簡潔,搭配 IP 形象的情緒反饋,完成學(xué)習(xí)后彈出鼓勵(lì)性提示(如 “You studied for 15 minutes!”),將學(xué)習(xí)行為轉(zhuǎn)化為正向情緒體驗(yàn)。
  • 登錄與課程頁:支持多渠道登錄(社交賬號 / 郵箱),針對不同年齡段(4-12 歲 / 12-18 歲)的課程定價(jià)模塊,用對應(yīng)顏色的 IP 形象區(qū)分,視覺引導(dǎo)清晰。
 

 

三、設(shè)計(jì)風(fēng)格:童趣與專業(yè)的平衡

 
設(shè)計(jì)精準(zhǔn)把握了 “活潑” 與 “專業(yè)” 的平衡:
 
  • 色彩系統(tǒng):以明亮黃、紫、粉為主色調(diào),搭配淺灰背景,既符合兒童與青少年審美,又避免視覺過載。
  • 排版與組件:采用圓潤無襯線字體,所有按鈕、卡片均做圓角處理,整體氛圍溫暖友好,契合目標(biāo)用戶的使用習(xí)慣。
  • 數(shù)據(jù)可視化:將抽象學(xué)習(xí)數(shù)據(jù)(天數(shù)、時(shí)長、分?jǐn)?shù))轉(zhuǎn)化為直觀數(shù)字與進(jìn)度條,讓用戶清晰感知進(jìn)步,同時(shí)保持界面輕盈不雜亂。


 

四、設(shè)計(jì)價(jià)值:讓學(xué)習(xí)成為愉悅的習(xí)慣

這套設(shè)計(jì)的核心價(jià)值在于,通過情感化視覺與輕量化功能,將 “語言學(xué)習(xí)” 從枯燥任務(wù)轉(zhuǎn)化為趣味體驗(yàn):
 
  • 用 IP 形象消解學(xué)習(xí)焦慮,讓用戶在輕松氛圍中持續(xù)學(xué)習(xí);
  • 清晰的進(jìn)度與數(shù)據(jù)反饋,幫助用戶建立學(xué)習(xí)成就感;

 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wnxcall.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

色彩在UI設(shè)計(jì)中的應(yīng)用

清陽 設(shè)計(jì)資源

我們經(jīng)常會(huì)使用到很多產(chǎn)品,一些產(chǎn)品里的色彩搭配也會(huì)給我們留下深刻的影響,比如你會(huì)記得淘寶的橙色、支付寶的藍(lán)色等等,色彩對于用戶的體驗(yàn)也很重要;蘭亭妙微ui設(shè)計(jì)公司分享了關(guān)于色彩在UI設(shè)計(jì)中的應(yīng)用,我們一起來看一下。

一、色彩的應(yīng)用

人腦對于色彩的記憶度要高于形態(tài),即一個(gè)App給用戶留下深刻印象的往往是界面的色彩;例如說到支付寶,我們可能想不起它的首頁長什么樣子,標(biāo)簽欄圖標(biāo)是那些,但能馬上記起它的界面主色是藍(lán)色;因此運(yùn)用好色彩對UI設(shè)計(jì)十分重要,它能直觀的呈現(xiàn)產(chǎn)品的氣質(zhì)和性格,能有效的幫助用戶組織和閱讀信息,與界面設(shè)計(jì)產(chǎn)生聯(lián)系和記憶。

好的配色往往依靠設(shè)計(jì)師審美、感覺搭配出來,但合理的顏色搭配必定存在合理的配色規(guī)律和配色方法論的支撐,下面結(jié)合相關(guān)案例為大家講解色彩運(yùn)用的幾個(gè)技巧。

1. 不得觸碰的禁區(qū)

分析研究了很多優(yōu)秀設(shè)計(jì)作品,發(fā)現(xiàn)他們在用色的時(shí)候有一部分區(qū)域是不會(huì)使用的,也就是我們常說的“配色禁區(qū)”;當(dāng)然,這里的“禁區(qū)”是帶雙引號帶的,并沒有什么絕對的禁區(qū),只是說這些顏色不易控制,在連基礎(chǔ)色都沒有駕馭好之前,盡量少碰。

配色禁區(qū)大概分為這三種:三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)(紅色為禁區(qū)),如下圖:

綜合看來,不管是那種禁區(qū),右下角區(qū)域的顏色是很少用的。畢竟他們又臟又深,當(dāng)然什么顏色都能駕馭的大師請略過。

知識點(diǎn):

在界面設(shè)計(jì)中,一般主色和輔助色都集中在右上角,次要的和不可點(diǎn)的顏色都集中在中中上方,而文字信息和背景色則集中在左側(cè),右下角禁區(qū)是我們要重點(diǎn)避開的對象。

2. 色調(diào)一致

在App設(shè)計(jì)之前應(yīng)先確定界面的主色調(diào),主色將占據(jù)界面中很大的比例,通常是品牌色,而輔助色、點(diǎn)綴色、背景色等都應(yīng)以主色調(diào)為基準(zhǔn)來搭配,這樣才能保證App整體色調(diào)的一致。

色調(diào)一致的界面,能帶給用戶始終如一的視覺體驗(yàn)。例如馬蜂窩將黃色(品牌色)作為主色,以及從主色搭配出的藍(lán)色(對比色)貫穿App始終。

3. 60-30-10原則

60% 30% 10%的原則,是達(dá)到色彩平衡的最佳比例。在60%的空間使用主色,可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中,使之成為整個(gè)App的視覺焦點(diǎn)和色彩關(guān)系;30%的空間使用輔助色,可以平衡過多的主色而造成的視覺疲勞;最后剩下10%的空間為點(diǎn)綴色,可以用在一些不太重要的元素又需要區(qū)分的時(shí)候。

6:3:1原則構(gòu)建了一種豐富的色彩層次,讓界面看上去和諧、平衡和不雜亂。

嗶哩嗶哩將粉色運(yùn)用到頁簽、標(biāo)簽欄、按鈕、入口圖標(biāo)等上,藍(lán)色的輔助色用在角標(biāo)、圖標(biāo)上,還有黃色、紅色用在一些小圖標(biāo)、小標(biāo)簽上,主次非常清晰明了。

4. 色不過三

經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色,其實(shí)就是「色不過三」原則,即在一個(gè)頁面中不要使用超過3種顏色搭配,這也和上面說的“60-30-10原則”類似,即一個(gè)主色、一個(gè)輔助色和一個(gè)點(diǎn)綴色。

但在實(shí)際UI設(shè)計(jì)中,迫于產(chǎn)品的需要可能會(huì)使用更多數(shù)量的色彩,但切記不可超過7種色相(注意不是7種色值),每個(gè)色相還可以運(yùn)用其飽和度、明度的變化分解出豐富的色彩搭配。

美團(tuán)外賣的首頁20個(gè)功能入口大圖標(biāo)的背景用了9種不同的色彩,每種色彩又包含一種低飽和度色彩進(jìn)行彩色漸變,但并沒有顯得雜亂,而是呈現(xiàn)一種年輕時(shí)尚的律動(dòng)感。

這是因?yàn)檫@里雖然使用了9種不同的色彩,但仔細(xì)觀察發(fā)現(xiàn)只使用了3種色彩,其他6種則是從前者鄰近色中提取出來的搭配,再將它們錯(cuò)落放置,呈現(xiàn)出豐富多彩的色彩搭配,整體和諧統(tǒng)一。

5. 遠(yuǎn)離純黑色和純灰色

黑色就像沒有生命力的深淵,使用戶陷入冷冷的負(fù)面情緒中。遠(yuǎn)離純黑色和純灰色,是因?yàn)樗鼈儾淮嬖谟诂F(xiàn)實(shí)世界里;嘗試在純黑和純灰中加入一些色調(diào),會(huì)讓界面看上去更柔和自然;另外,純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對比度,看久了會(huì)使人疲勞,讓用戶產(chǎn)生焦慮的情緒。

MONO的導(dǎo)航欄并不是深黑色,而是加入了藍(lán)色的低飽和度藍(lán)黑色,它的界面背景也是加入了藍(lán)色的的淺色,這樣就不會(huì)讓界面看上去死氣沉沉的。

6. 遵循色彩心理學(xué)

前文我們已經(jīng)了解過各種色彩的心理學(xué)知識,就是為了我們在進(jìn)行App設(shè)計(jì)時(shí)提供依據(jù);這些色彩都是源于人類對大自然最原始的感受,藍(lán)色的天空、綠色的草地、黃色的沙漠等等,自然的色彩,對于我們來說是司空見慣的,但其中卻蘊(yùn)含著豐富的美感,并達(dá)到了和諧統(tǒng)一。

網(wǎng)易云音樂使用紅色作為主色,這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質(zhì)。

7. 良好的可讀性

良好的可讀性在界面設(shè)計(jì)中能為用戶提供主次分明、層次清晰的閱讀體驗(yàn),而一個(gè)可讀性差的界面則會(huì)成為用戶瀏覽的障礙。

那如何確保界面具有良好的可讀性呢?

這就需要在界面設(shè)計(jì)中注意色彩搭配的對比,如在淺色背景上使用深色文字,在深色背景上使用淺色文字,使用高對比的度的亮色展示重要的元素,用低對比度的淺色來體現(xiàn)需要弱化和次要的內(nèi)容;例如蘋果Music的主要功能入口,標(biāo)簽欄圖標(biāo)、按鈕等都是用了高純度的紅色,與其他元素從形成鮮明對比,就連深灰色的輔助文字都有著清晰的可讀性。

8. 從大自然中獲得靈感

配色中盡量使用大眾熟悉的色彩,如自然界中人們常見的色彩等;從大自然中獲取的配色靈感可以使你的設(shè)計(jì)更加切合用戶的審美,非常自然;而藝術(shù)是對自然的直接反映,是非常寶貴的資源,值得好好利用。

我們可以搜集各種與自然風(fēng)光相關(guān)的圖片,從中提取色彩運(yùn)用到設(shè)計(jì)中,這些幾近完美的搭配呈現(xiàn)出來的和諧美感能瞬間打動(dòng)人心;天氣應(yīng)用Marline就是一個(gè)很好的例子,它的界面背景漸變就參考大自然的變化,隨著不同時(shí)間段呈現(xiàn)出清晨、日出、正午、日落、深夜、雨天等漸變色,打開應(yīng)用即喚起了用戶的快樂情緒。

9. 將UX顏色與品牌相匹配

品牌價(jià)值在創(chuàng)建調(diào)色板中發(fā)揮關(guān)鍵作用,但是它們不是唯一重要的因素,行業(yè)規(guī)范也是關(guān)鍵;使用與品牌主要競爭產(chǎn)品幾乎相同的配色方案不失一種好方法。

配色在品牌視覺中所發(fā)揮的作用是不言而喻的,但是,色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部;比如一個(gè)行業(yè)當(dāng)中,很多產(chǎn)品都使用了藍(lán)色,那么你的產(chǎn)品繼續(xù)使用藍(lán)色,可以讓用戶更快「識別出」你所屬的領(lǐng)域;但是本身也存在讓人混淆的風(fēng)險(xiǎn)。如果你想要在視覺上脫穎而出,可以試著使用不同的色彩。

中國區(qū)或美國區(qū),紅色和藍(lán)色都是最流行的顏色

在進(jìn)行品牌設(shè)計(jì)的時(shí)候,選擇配色的第一步,始終是了解各種顏色或者色相的氣質(zhì)和情感屬性;然后,在具體設(shè)計(jì)的時(shí)候,再進(jìn)一步根據(jù)品牌的氣質(zhì)和需求,再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。也可以打破常規(guī)創(chuàng)造出與眾不同的配色方案。

10. 從強(qiáng)調(diào)色入手

想要讓配色方案更加突出,在設(shè)計(jì)中添加強(qiáng)調(diào)色可能是最容易入手的地方;舉個(gè)例子,一個(gè)律師咨詢的App可能會(huì)使用傳統(tǒng)的藍(lán)色作為基礎(chǔ)配色,但是,如果能夠加入檸檬綠作為強(qiáng)調(diào)色,會(huì)顯得獨(dú)特很多。

11. 冷暖色對比搭配

冷暖對比色是自然平衡的規(guī)律,可以在設(shè)計(jì)中大量使用,這樣的配色會(huì)使作品非常的出彩,同時(shí)不顯單調(diào),讓用戶感覺舒服平和;而且這種搭配方法基本沒有啥缺點(diǎn),使用在設(shè)計(jì)中,技巧性比較多,對設(shè)計(jì)的細(xì)膩感受要求比較高,需要多練習(xí)。

12. 黑白色搭配不過時(shí)

黑色是所有中性色中最強(qiáng)的,而白色是最常用的背景顏色。

黑色是一個(gè)很好的選擇,有種高端和永恒的感覺,而白色可以帶給用戶自由,寬敞和透氣的感覺;如上所述,黑色和白色也是最大的對比色,如果合理的使用黑色配合白色,會(huì)營造出一種優(yōu)雅的氛圍。

12. 強(qiáng)交互色彩

交互色彩在執(zhí)行過程中必須清晰且在界面中保持一致。

號召性用語必須相對于背景具有足夠的對比度,并且相對于其他組件必須具有足夠的視覺權(quán)重,以便用戶可以輕松識別它們;Nike健身應(yīng)用中,「開始」按鈕以高飽和度的檸檬綠作為主色,從背景中脫引而出。

但是,交互色彩并不總是以最具飽和度或最亮為特征,而是通過色調(diào)、形狀、大小或?qū)Ρ榷龋瑥钠聊簧厦摲f而出;因此,交互色彩的有效性將基于用戶識別交互區(qū)域和執(zhí)行任務(wù)的速度來衡量。

同時(shí),次要功能權(quán)重要更輕,并在視覺上更接近信息元素。如上圖Nike Training界面中,“設(shè)置”和“聲音”按鈕只用簡單的白色,減輕對主按鈕的干擾,也避免了頁面中出現(xiàn)多個(gè)強(qiáng)交互按鈕。

13. 保證良好的可讀性

可讀性是任何設(shè)計(jì)中的重要因素。你的顏色應(yīng)該清晰易讀,尤其是在處理文字時(shí);因此對比度對視覺效果對影響就非常關(guān)鍵,對比度過小,就會(huì)使得界面出現(xiàn)灰蒙蒙對效果。

清晰的對比度,一般會(huì)采用色彩的兩極,黑紙白字或白紙黑字;而在彩色背景上要讓內(nèi)容清晰可見,就需要搭配純白或高明度的文字,避免灰色文字;也要注意避免彩色背景上搭配互補(bǔ)色和明度接近的文字,因?yàn)檫@兩種搭配會(huì)產(chǎn)生一種“震顫效應(yīng)”,發(fā)出光暈的視覺效果。

14. UI中的陰影

沒有完全純黑的陰影,陰影的顏色是會(huì)受到物體本身固有色的影響,一定要避免使用純黑色(#000000),使用不太深的灰色,效果會(huì)更好;對于有顏色的元素,好的做法是為陰影設(shè)定與元素相同的顏色,并使其更暗一些。

如果是有顏色的元素,并且它處在黑暗的背景下,一般情況下,是不建議使用陰影的;但是如果你一定要用,把陰影透明度調(diào)到小于10%及以下,并且顏色跟隨主色調(diào)來;比如按鈕為綠色,則可以為按鈕設(shè)定一個(gè)更深的綠色陰影,并加上小于10%的透明度數(shù)值。

如下圖,左側(cè)的按鈕陰影很自然,右側(cè)的則有一層模糊發(fā)光的效果,顯得不夠漂亮。

知識點(diǎn):

為什么「超鏈接文字」要用藍(lán)色?

簡單說,因?yàn)樵谧钤缙诘木W(wǎng)站頁面中,藍(lán)色能呈現(xiàn)最高的對比度。

Tim Berners-Lee——web 的主要開創(chuàng)者,被認(rèn)為是最早用藍(lán)色鏈接的人。

一個(gè)很早期的 web 瀏覽器 Mosaic,用的是深灰色背景和黑色文字;那時(shí)候,能用的非黑色、最深的文字顏色,就是藍(lán)色;所以,讓超鏈接文字突出顯示,同時(shí)保證可讀性,就選定了藍(lán)色,此后超鏈接文字都用藍(lán)色的傳統(tǒng)沿用至今。

二、app設(shè)計(jì)中的色彩搭配

App的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維;好的色彩搭配可以加深用戶對產(chǎn)品的印象;明確界面的視覺層次,讓用戶分清主次信息;同時(shí)還能給用戶賞心悅目的視覺享受。那么,在UI設(shè)計(jì)時(shí)該如何進(jìn)行色彩搭配呢?

我們可以從App中都包含了那些色彩開始,通常一個(gè)App中包含了主色、輔助色、點(diǎn)綴色、背景色這4類,下面就以微信讀書為例進(jìn)行詳細(xì)的講解(個(gè)人角度)。

1. 主色

主色是指在配色中處于主導(dǎo)地位的色彩,給用戶的第一眼印象,通常是產(chǎn)品的品牌色。

在App設(shè)計(jì)中,主色一般占有色相色彩的60%的比例;這里指的是60%的界面都使用到的主色比例,而不是使用面積(因?yàn)橥ǔR粋€(gè)界面中使用面積最大的是背景色);還有就是背景色多為淺灰色或白色,它們都屬于無色相色彩,因此不涉及到配色過程中。

我們看到微信讀書的第一印象,就可以判斷它的主色為藍(lán)色,這也是它的品牌色;在標(biāo)簽欄、按鈕、圖標(biāo)、注冊登陸全都使用了這種純凈的主色,使界面看上去非常和諧一致。

2. 輔助色

輔助色與主色相輔相成,輔助色的功能是幫助主色建立更完整的形象,使界面豐富精彩起來,避免畫面過于單一。

通常,主色的鄰近色、互補(bǔ)色、分散互補(bǔ)色和三角對立色都可以成為優(yōu)秀的輔助色,但注意輔助色不宜過多,否則就會(huì)使界面看上去花哨分散了主題;根據(jù)6:3:1原則,輔助色可以占有色相色彩的30%或更少為宜。

在微信讀書中,綠色、橙色、梅紅、藍(lán)紫色是除了主色以外使用最多的顏色,它們都是輔助色,主要用于功能圖標(biāo)和欄目分類上。

雖然輔助色看起來有點(diǎn)多,但其實(shí)都是從主色的鄰近色和對比色(及其鄰近色)中提取出來的搭配,而且只用在頁面中很少的地方,這種搭配技巧既可以豐富色彩的搭配,傳遞出年輕活躍的產(chǎn)品氣質(zhì),又保證了整體搭配的和諧統(tǒng)一。

3. 點(diǎn)綴色

點(diǎn)綴色是除了主色和輔助色以外的另一種色彩,通常體現(xiàn)在細(xì)節(jié)上。

其作用是,當(dāng)頁面中主色和輔助色不能滿足關(guān)鍵信息的提示時(shí),就需要點(diǎn)綴色來吸引用戶眼球,還有就是利用點(diǎn)綴色來平衡畫面的冷暖色調(diào)。

點(diǎn)綴色通常都是分散的,使用面積小,顏色非常顯眼,能與主色形成強(qiáng)烈的對比;一般點(diǎn)綴色是主色的互補(bǔ)色。在微信讀書中,使用了香檳金、梅紅和紅色作為點(diǎn)綴色;香檳金用在文章分享按鈕上,梅紅色用在點(diǎn)贊圖標(biāo)上,強(qiáng)調(diào)其特殊性,紅色用在通知及退出登錄提醒上,用于警示。

來康康這三種點(diǎn)綴色與主色之間存在什么樣的關(guān)系,在色相(H)上,3種點(diǎn)綴色為鄰近色,與主色為互補(bǔ)色;在明度(B)上,3種點(diǎn)綴色均為高明度色彩,起到強(qiáng)提醒的作用。這種強(qiáng)對比的互補(bǔ)色的點(diǎn)綴色可以快速引起用戶注意力。

4. 背景色

背景色就比較好理解了,通常為了襯托內(nèi)容,大多數(shù)App都是用淺灰色作為背景色,以白色作為背景色的對比色,來區(qū)分視覺層次;建議是可以根據(jù)前景色來提取背景色,將其調(diào)亮或變暗,這樣可以讓界面色調(diào)更加統(tǒng)一。

在微信讀書中背景色是偏藍(lán)色調(diào)的淺灰色,而不是純灰色,背景對比色是在白色里加入了藍(lán)色色相,而不是純白色,整體對比較柔和,給人清爽通透的感覺。

支付寶 Alipay Design 團(tuán)隊(duì)提出過一個(gè)配色原則:

以同色系配色為主導(dǎo),多色搭配為輔。

同色系為統(tǒng)一的色相,使用中可以加深品牌色的感知,可以讓界面更有層次,同時(shí)可以讓界面保持色彩上的一致性;由于業(yè)務(wù)的多樣化,我們需要多色搭配為輔;多色的輔助顏色,也可稱之為功能色,可設(shè)定不同的任務(wù)屬性和情感表達(dá);再搭配中性色黑白灰,賦予更多的變化和層次。

兩種配色通過主次、使用比例,可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場景中,具有非常好的延展性。

三、迷人的漸變色

不同于單一色彩,漸變色不屬于任何色彩,它營造出千變?nèi)f化的視覺效果,卻又不會(huì)增加視覺負(fù)擔(dān)。

相較于單一的色彩,漸變色的復(fù)合性質(zhì)讓它在界面設(shè)計(jì)中具有更強(qiáng)的視覺沖擊力,有助于快速搶占視線;如今,這種獨(dú)一無二的色彩正逐漸成為一種潮流,究其原因是目前大量的扁平風(fēng)格造成UI設(shè)計(jì)的嚴(yán)重同質(zhì)化,人們需要追求更加個(gè)性的視覺語言來滿足日益增長的設(shè)計(jì)需求。

下面我們來了解幾種常見的漸變的使用技巧:

1. 色相、飽和度、明度的漸變

色相(H)漸變是指由一種色彩向另一種色彩的過渡,這種漸變因跨度大產(chǎn)生的視覺效果非常明顯;飽和度(S)漸變是指同一種色彩不同純度的過度,其產(chǎn)生的視覺效果比較和諧單調(diào);明度(B)漸變是同一種色彩不同明暗的過度,這種漸變的視覺效果給人一種沉靜的氛圍。

2. 漸變的表現(xiàn)形式

在界面設(shè)計(jì)中經(jīng)常看多各種各樣的漸變表現(xiàn)方式,使用最多的有以下幾種:

水平漸變:

這個(gè)很好理解,是指角度為0的線性漸變,是最流行的漸變形式;界面設(shè)計(jì)中多用在導(dǎo)航欄、進(jìn)度條、按鈕等元素上,能讓畫面變得精致而通透;例如京東使用橙紅漸變的設(shè)計(jì)語言貫穿整個(gè)App,從應(yīng)用圖標(biāo)到導(dǎo)航欄、按鈕、標(biāo)簽,全部都運(yùn)用了這種由紅色到橙色的過渡;仔細(xì)觀察發(fā)現(xiàn)在很多小標(biāo)簽上都使用了水平漸變設(shè)計(jì)手法,使產(chǎn)品看起來更年輕化。

知識點(diǎn):

在水平漸變中,通常把輕(亮)的色彩放在左邊,重(暗)的色彩放在右邊,這樣由左向右的方向感剛好與人的瀏覽習(xí)慣保持一致;而反過來就會(huì)與人的瀏覽視線相悖,應(yīng)避免。

垂直漸變:

即角度為90°的線性漸變,它通常被用在正方形或豎條形的元素上,如注冊登陸頁,個(gè)人中心頭部等;垂直漸變中上下兩種色彩的深淺變化會(huì)產(chǎn)生截然不同的視覺效果,上淺下深會(huì)讓給人一種凸起的立體感,而上深下淺會(huì)給人一種凹陷下去的空間感。

例如「紀(jì)念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景,在讓整個(gè)畫面豐富的同時(shí)又不會(huì)太搶奪主體的色彩,使畫面顯得清新透氣而不沉悶。

角度漸變:

角度漸變通常有對角漸變和多角度漸變;有角度的漸變相比水平和垂直漸變,它的使用場景更廣,如圖標(biāo)背板、啟動(dòng)頁、注冊登錄頁、標(biāo)簽等;想讓界面更加絢麗、動(dòng)感和迷人,這時(shí)候我們可以考慮多組漸變搭配使用。

色塊漸變:

漸變的顏色不只可以運(yùn)用在一個(gè)色塊上,還可以運(yùn)用在一組色塊上;設(shè)計(jì)師運(yùn)用一組近似性色彩,將每個(gè)菜單項(xiàng)清晰區(qū)分開,讓界面平衡在一個(gè)頻率上,這樣的畫面更有節(jié)奏感和舒適性。

不同于平滑的漸變,色塊漸變不再是單純的背景裝飾,在某些地方還具有一定的功能性,比如使用不同的色塊來分割的列表樣式;Clear Todos是一款日常任務(wù)清單的APP,它拋棄了傳統(tǒng)的列表樣式,使用了一系列色塊來作為列表的分割,非常漂亮和精致。

徑向漸變:

是指色彩以圓心向四周擴(kuò)散的漸變,是一種模擬光源照射的視覺效果,因此光源是整個(gè)畫面的視覺焦點(diǎn),將關(guān)鍵元素放在光源中心就會(huì)成為主角;通常被運(yùn)用到大背景上,如啟動(dòng)頁、引導(dǎo)頁等。

Solar天氣應(yīng)用的背景就是徑向漸變,光源擴(kuò)散的效果營造出一種夢幻般的美感。

3. 和諧的漸變色

漸變色是由一個(gè)色彩走向另一個(gè)色彩的過程,有著迷人的視覺效果;如果你仔細(xì)觀察兩種色彩的過渡關(guān)系,就會(huì)發(fā)現(xiàn)不是每次都會(huì)得到滿意的效果,例如紅綠漸變就很糟糕,因?yàn)樗鼈儍烧呤腔閷α⒌纳?,但是如果加入黃色的過渡色就會(huì)好很多;原因是當(dāng)兩種色彩之間超過90度就會(huì)導(dǎo)致其漸變色看上去不太和諧自然,只有控制在90度之內(nèi)才會(huì)產(chǎn)生美妙的變化。

如何改善超過90度的兩種色相的漸變呢?這時(shí)候可以在兩色之間加入過渡色進(jìn)行調(diào)和。例如當(dāng)從黃色到藍(lán)色漸變時(shí),就可以加入紫色作為過渡才能呈現(xiàn)完美的視覺效果。

知識點(diǎn):

在搭配漸變色時(shí),盡量只改變其色相(H)、飽和度(S)、明度(B)中的一項(xiàng),這樣才能創(chuàng)造出和諧的漸變色方案

轉(zhuǎn)載:人人都是產(chǎn)品經(jīng)理

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wnxcall.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

高手設(shè)計(jì)彈窗的12個(gè)切入點(diǎn)

清陽 系統(tǒng)UI設(shè)計(jì)文章及欣賞

在日常的數(shù)字產(chǎn)品設(shè)計(jì)中,彈窗雖小,卻往往承擔(dān)著轉(zhuǎn)化用戶、傳遞信息、引導(dǎo)行為的關(guān)鍵角色。一個(gè)恰到好處的彈窗,能讓用戶體驗(yàn)如絲般順滑;而一個(gè)設(shè)計(jì)粗糙的彈窗,則可能成為用戶流失的導(dǎo)火索。

基于上百個(gè)真實(shí)的實(shí)戰(zhàn)案例深度拆解,蘭亭妙微ui設(shè)計(jì)公司總結(jié)出 12 種超實(shí)用的彈窗設(shè)計(jì)切入點(diǎn)。每一種都附有真實(shí)案例與核心優(yōu)點(diǎn),既好上手又具備延展性。無論你是想介紹產(chǎn)品功能、推送運(yùn)營活動(dòng),還是引導(dǎo)用戶互動(dòng),都能在這里找到適配方案,助你快速擺脫靈感瓶頸,讓小小彈窗既好看又好用。

窗已是產(chǎn)品核心視覺焦點(diǎn)之一,產(chǎn)品整體功能定型后,彈窗會(huì)隨運(yùn)營活動(dòng)持續(xù)迭代創(chuàng)新。本文基于上百個(gè)實(shí)戰(zhàn)案例拆解,總結(jié)出 12 種易上手、延展性強(qiáng)的彈窗設(shè)計(jì)切入點(diǎn),每種均搭配真實(shí)應(yīng)用案例并提煉核心優(yōu)勢,適配產(chǎn)品功能介紹、運(yùn)營活動(dòng)推送、用戶互動(dòng)引導(dǎo)等多元場景,助力設(shè)計(jì)者突破靈感瓶頸,打造顏值與實(shí)用性兼具的彈窗設(shè)計(jì)。
 

01 卡片疊加式設(shè)計(jì)

image.png

小卡片錯(cuò)落超出大卡片的疊加形式,讓彈窗視覺上靈動(dòng)有層次,同時(shí)保證信息傳達(dá)清晰明了,避免因設(shè)計(jì)疊加導(dǎo)致的內(nèi)容混亂。
 

02 相冊式產(chǎn)品卡片設(shè)計(jì)

image.png

將產(chǎn)品卡片與相冊樣式的圖例相結(jié)合,視覺呈現(xiàn)貼合內(nèi)容展示邏輯,尤其適合用于介紹產(chǎn)品功能、展示產(chǎn)品效果的彈窗場景,直觀傳遞核心信息。
 

03 中間圖標(biāo) + 方形卡片設(shè)計(jì)

image.png

以方形卡片為基底,搭配居中核心圖標(biāo),是基礎(chǔ)且經(jīng)典的設(shè)計(jì)形式。操作簡單易上手,同時(shí)具備極強(qiáng)的延展性,可適配多種產(chǎn)品風(fēng)格與使用場景。
 

04 IP 形象 + 方形卡片設(shè)計(jì)

image.png

將產(chǎn)品專屬 IP 形象與方形卡片融合,是創(chuàng)意枯竭時(shí)的優(yōu)質(zhì)普適性方案。借助 IP 的視覺辨識度,讓彈窗兼具美觀度與趣味性,強(qiáng)化產(chǎn)品記憶點(diǎn)。
 

05 擬人化表情圖標(biāo) + 異形卡片設(shè)計(jì)

image.png

異形卡片打破傳統(tǒng)方形彈窗的刻板感,搭配擬人化表情圖標(biāo),為彈窗增添人情味與趣味性;再結(jié)合明快的陽光配色,進(jìn)一步提升頁面的歡樂氛圍,拉近與用戶的距離。
 

06 圖標(biāo) + 空氣彈框設(shè)計(jì)

image.png

摒棄傳統(tǒng)彈窗的底色與邊框,僅保留簡約圖標(biāo)與核心文案。無多余視覺元素干擾,讓關(guān)鍵信息在頁面中更突出、更矚目,極簡設(shè)計(jì)適配輕量化信息傳遞需求。
 

07 簡約插畫組合 + 方形彈框設(shè)計(jì)

image.png

在方形彈框上方搭配簡約插畫組合,下方對應(yīng)核心標(biāo)題文案,圖文結(jié)合讓彈窗內(nèi)容更豐富有層次。不僅提升視覺美感,更讓信息傳達(dá)更有力度,打造強(qiáng)記憶點(diǎn)。
 

08 信封式彈框設(shè)計(jì)

image.png

經(jīng)典的信封造型彈窗,是跨平臺、跨場景的普適性設(shè)計(jì)形式。雖無新穎創(chuàng)意,但因適配性強(qiáng)、用戶接受度高,至今仍被各大平臺廣泛應(yīng)用,適配各類基礎(chǔ)信息與活動(dòng)推送。
 

09 IP 配標(biāo)題文字 + 空氣彈框設(shè)計(jì)

image.png

將俏皮的產(chǎn)品 IP 與簡潔的標(biāo)題文字結(jié)合,采用無底色的空氣彈框形式,兼顧趣味性與信息傳遞效率。視覺上輕盈吸睛,能快速讓用戶捕捉核心內(nèi)容,高效完成信息觸達(dá)。
 

10 無定式彈框設(shè)計(jì)

image.png

跳出異形、方形的傳統(tǒng)彈窗框架,以核心內(nèi)容(如優(yōu)惠券、福利券)的有序排列形成 “隱形彈窗”??此茻o固定形態(tài),實(shí)則內(nèi)容排布有章法,能最大程度突顯核心信息,徹底打破常規(guī)設(shè)計(jì)的思維束縛。
 
這一設(shè)計(jì)也帶來重要啟示:彈窗設(shè)計(jì)的核心是精準(zhǔn)表達(dá)需求,無需被固有樣式限制,讓設(shè)計(jì)為內(nèi)容與場景服務(wù)。
 

11 底部彈出式插畫彈窗

image.png

從頁面底部滑出的彈窗形式,視覺矚目性適中,不會(huì)過度干擾用戶對主頁面的瀏覽,底部頁面信息仍可清晰查看。搭配簡約插畫,既豐富視覺層次,又避免彈窗設(shè)計(jì)過于單調(diào)。
 

12 底部彈出式空氣插畫彈窗

image.png

融合底部彈出的輕干擾形式與空氣彈框的無框底特點(diǎn),搭配插畫設(shè)計(jì),擺脫傳統(tǒng)彈窗的樣式束縛。視覺上氛圍感與感染力拉滿,核心標(biāo)題更醒目,適配沉浸式體驗(yàn)的產(chǎn)品場景與氛圍感營銷活動(dòng)。

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wnxcall.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

以設(shè)計(jì)為橋,喚醒潮汕在地文化的鮮活生命力 ——G STAR 峰的潮汕文創(chuàng)設(shè)計(jì)探索

濤濤 平面設(shè)計(jì)

在地文化是一方土地的精神內(nèi)核,卻往往在時(shí)代發(fā)展中逐漸沉寂,而優(yōu)秀的設(shè)計(jì),正是喚醒這份沉睡文化的關(guān)鍵力量。潮流設(shè)計(jì)師 G STAR 峰深耕潮汕在地文化,以獨(dú)特的美學(xué)視角和深厚的文化情懷,從潮汕的民間信仰、非遺技藝、戲曲故事、日常民俗中萃取設(shè)計(jì)靈感,用現(xiàn)代潮流的設(shè)計(jì)語言重新演繹傳統(tǒng),讓潮汕文化走出地域邊界,成為能與當(dāng)代年輕人共鳴的活態(tài)文化符號。他的潮汕文創(chuàng)設(shè)計(jì),并非簡單的傳統(tǒng)復(fù)刻,而是在尊重文化本源的基礎(chǔ)上,搭建起傳統(tǒng)與現(xiàn)代、地域與大眾之間的橋梁,讓潮汕文化在潮流語境中持續(xù)生長、發(fā)聲。

語言媒介:解鎖新文創(chuàng)設(shè)計(jì)的靈感密碼

濤濤 設(shè)計(jì)思維

語言是人類文明的載體,是交流思想、傳遞情感的復(fù)雜系統(tǒng),其豐富的媒介形式為文創(chuàng)設(shè)計(jì)打開了全新的創(chuàng)作維度。從自然語言的口語、文字、手語,到人工語言的編程符號、數(shù)學(xué)公式,再到涵蓋聽覺、視覺、觸覺等的非語言形式,每一種語言媒介都蘊(yùn)含著獨(dú)特的文化內(nèi)涵與設(shè)計(jì)價(jià)值。當(dāng)語言媒介與新文創(chuàng)設(shè)計(jì)碰撞融合,不僅讓文化傳播有了更多元的表達(dá),更讓文創(chuàng)產(chǎn)品兼具實(shí)用性、藝術(shù)性與文化性,成為連接傳統(tǒng)與現(xiàn)代、文化與生活的橋梁。本文將從語言媒介的分類出發(fā),結(jié)合經(jīng)典設(shè)計(jì)案例,全面解析語言媒介如何成為新文創(chuàng)設(shè)計(jì)的靈感源泉。

從體驗(yàn)設(shè)計(jì)視角解析 B 端產(chǎn)品設(shè)計(jì)邏輯

濤濤 B端ui設(shè)計(jì)文章及欣賞

初入設(shè)計(jì)行業(yè)時(shí),B 端與 C 端產(chǎn)品的概念僅停留在字面,面對實(shí)際設(shè)計(jì)工作時(shí),常常不知該從何切入才能打造貼合需求的產(chǎn)品方案。經(jīng)過多年的實(shí)戰(zhàn)積累,對 B 端產(chǎn)品的體驗(yàn)設(shè)計(jì)有了更具象的理解,也逐漸梳理出一套適配其特性的設(shè)計(jì)思路,在此與行業(yè)同仁分享

如何提升UI設(shè)計(jì)的高級感

清陽 設(shè)計(jì)資源

我們平常會(huì)使用很多APP,久而久之我們會(huì)發(fā)現(xiàn)一些APP的設(shè)計(jì)非常的相似;一個(gè)有新意、精致的APP界面可以讓用戶產(chǎn)生很深的影響,對產(chǎn)品的形象也有一定的幫助;本文由蘭亭妙微UI設(shè)計(jì)公司分享了關(guān)于如何提升UI設(shè)計(jì)的高級感的方法,我們一起來看一下。

一個(gè)App設(shè)計(jì)是否精致,是否富有設(shè)計(jì)感,在于它的細(xì)節(jié),這就意味著我們在進(jìn)行設(shè)計(jì)的時(shí)候,要從細(xì)微之處著手,從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。

本文總結(jié)了12個(gè)簡單直觀的提升設(shè)計(jì)感的小細(xì)節(jié),一起來學(xué)習(xí)。

一、使用顏色深淺構(gòu)建層次結(jié)構(gòu)

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

每種顏色都有一個(gè)視覺權(quán)重,這有助于在內(nèi)容中建立層次結(jié)構(gòu);通過使用顏色的深淺,為元素賦予不同的重要性。

如果可以的話,你甚至可以采用兩到三種顏色:

  • 主要內(nèi)容使用深灰色(諸如標(biāo)題,但是不要用純黑);
  • 次要內(nèi)容使用灰色(比如商品介紹);
  • 輔助性內(nèi)容采用淺灰色(比如發(fā)布日期);

類似的,在UI設(shè)計(jì)的時(shí)候,通常兩種不同的字重足以營造出優(yōu)秀的層次感:

  • 大多數(shù)的文本采用正常的字重(400到500,具體取決于字體);
  • 對于需要強(qiáng)調(diào)的文字采用較重的字重(600到700,具體取決于字體);

▲主標(biāo)題字重為600,其他標(biāo)綠點(diǎn)的文字字重都為400

應(yīng)當(dāng)盡量不要讓正文部分字重低于400,因?yàn)檫@一部分字體本身尺寸已經(jīng)較小,低于400會(huì)使得可讀性不佳。

如果你依然需要降低字重,那么不妨讓字體色彩更淺一點(diǎn),或者替換成其他識別度較強(qiáng)、字重相對較小的字體。

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

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

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

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

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

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

二、統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色,再調(diào)整色調(diào)和顏色深淺來增加均衡;設(shè)計(jì)時(shí)避免用過多的顏色。如果項(xiàng)目允許,只需使用固定的色板,通過調(diào)整基礎(chǔ)色的飽和度和明度,利用這種簡單的方式為設(shè)計(jì)增加一致性。

三、干凈的陰影

陰影是UI設(shè)計(jì)中最常見的視覺表現(xiàn)手法,它可以增加元素的深度,使其從背景中脫穎而出,引起用戶的注意力,同時(shí)也能增強(qiáng)畫面的視覺層次感。

相比于采用大范圍的擴(kuò)散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了最常見的光源特征,光線從上往下照下來所營造的陰影效果。

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

陰影不一定是黑色的,還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上,由于陰影與元素的色調(diào)一致,因此呈現(xiàn)出十分融洽的畫面感。

在UI設(shè)計(jì)中,這種手法不宜過多使用,否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。

四、個(gè)性的圖標(biāo)設(shè)計(jì)

合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo),而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。

我們能否在追求大小一致,圓角一致,線寬一致和配色一致的同時(shí),為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢?例如下面這組圖標(biāo)設(shè)計(jì),無論是在圖形上的創(chuàng)新,還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。

標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用,它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺風(fēng)格。

通常,大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式(默認(rèn)灰色,選中填充品牌色),這樣的設(shè)計(jì)太普通,太常見了;要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性,可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺表現(xiàn),例如給圖標(biāo)加上背景和表情,即顯得生動(dòng)有趣,又增加了用戶的好感,給人留下深刻的印象。

3D立體圖標(biāo)設(shè)計(jì)是近幾年來的流行趨勢,看上去十分精致、華麗,但是看久了會(huì)讓人產(chǎn)生輕微的視覺疲勞,同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本,一般在外賣美食類應(yīng)用中比較常見。

五、Tab的設(shè)計(jì)感

Tab是App設(shè)計(jì)中最常見的控件之一,它源自Material Design的設(shè)計(jì)規(guī)范;現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開始使用這種導(dǎo)航欄樣式來進(jìn)行設(shè)計(jì),而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見了。

在視覺表現(xiàn)形式上,Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài),它的設(shè)計(jì)較為簡單,通常是使用一組文字標(biāo)簽,通過顏色或在標(biāo)簽下加上小長條來區(qū)分兩者的狀態(tài);因?yàn)樗唵?,卻越難設(shè)計(jì)出彩,要發(fā)揮極大的設(shè)計(jì)想象力,跳脫出設(shè)計(jì)規(guī)范的限制,才能找到完美的方案。

例如蝦米音樂的Tab選中態(tài)是一段音頻波線,再配合文字的大小對比,一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。

我們還可以從品牌基因中獲取靈感,品牌作為用戶熟知的形象是個(gè)絕佳的來源。

從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺富豪作為Tab選中態(tài)的小長條,這樣就建立起視覺上的聯(lián)系,讓用戶產(chǎn)生由內(nèi)而外的一致感受;例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上,既讓界面視覺獨(dú)一無二,又進(jìn)一步強(qiáng)化了用戶對品牌形象的認(rèn)知。

六、無框設(shè)計(jì) 去繁從簡

在UI設(shè)計(jì)中,有許多的裝飾元素,如卡片的邊框、列表的分割線等,雖然邊框,分割線是分隔兩個(gè)元素的好辦法,但是它不是唯一的方法;使用過多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低,或多或少都會(huì)干擾用戶瀏覽的視線,讓信息內(nèi)容失去注意力,因此可以減少不必要的裝飾元素。

我們可以通過以下幾個(gè)方法來劃分元素的視覺層次,讓畫面變得干凈,整齊:

1)使用陰影

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

2)使用不同的背景色來區(qū)分

通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進(jìn)行區(qū)分;所以,你所需要做的就是在不同的區(qū)塊采用不同的背景色,并且嘗試刪除分割線,因?yàn)槟愀静恍枰?/p>

3)增加額外的留白

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

七、統(tǒng)一設(shè)計(jì)元素

在App中的每一個(gè)界面都有許多元素,那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。

通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影,它代表著用戶,因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。

如果圖形擁有獨(dú)特的外觀,如橢圓矩形,也可以作為視覺符號的一種,延續(xù)到其他界面中,成為圖形或按鈕的外觀;這樣,整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來了,給用戶始終如一的一致感。

八、符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體,可以與產(chǎn)品的定位相吻合,傳遞給用戶正確的情感意識。

雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求,但會(huì)出現(xiàn)一個(gè)問題就是——系統(tǒng)字體的普適性并沒有什么特色,在一些特定的情境下就顯得收效甚微;例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺,換成系統(tǒng)字體后,整體感覺在氣勢上就變?nèi)趿撕芏唷?/p>

九、第三方圖標(biāo)風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸,他可以減輕用戶注冊的時(shí)間成本。

通常是在注冊登陸頁的底部展示第三方圖標(biāo)入口,這也是設(shè)計(jì)師最常忽略的內(nèi)容,往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置,沒有針對它們再設(shè)計(jì);一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(xì)節(jié),我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù),對第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。

十、圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計(jì),能帶給用戶如沐春風(fēng)的視覺享受,它非常重要。我們經(jīng)??吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式;為了減少復(fù)雜圖片背景對文字的干擾,通常的做法是疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這不是最優(yōu)的辦法。

我們可以從圖片中提取主色調(diào)用于疊加背景的填充色,這樣就使文字、色塊和圖片融入到一起了,畫面變得高級和富有設(shè)計(jì)感。

十一、提高圖片質(zhì)量

圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒,高品質(zhì)的圖片給人愉悅的視覺享受,產(chǎn)生美好的聯(lián)想;而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。

在App設(shè)計(jì)中,一張漂亮的圖片從收集到上線,需要經(jīng)過裁剪,調(diào)色等過程才能被使用;即使是普通的商品圖片,我們將它摳圖后調(diào)整成統(tǒng)一大小,再加上干凈的背景,就能立刻提升商品的美感,界面視覺也會(huì)變得美觀、整潔。

十二、卡片式設(shè)計(jì)

現(xiàn)在的UI界面設(shè)計(jì)中,卡片式設(shè)計(jì)已經(jīng)是一種非常常見的設(shè)計(jì)形式,它有利于信息分層和整合,劃分出更加清晰的組織結(jié)構(gòu),實(shí)現(xiàn)復(fù)雜內(nèi)容的簡化處理,提高空間利用率;同時(shí)卡片式設(shè)計(jì)通常很依賴視覺元素,很強(qiáng)的視覺元素正是卡片式設(shè)計(jì)的一種優(yōu)勢,也是提升設(shè)計(jì)品質(zhì)感的良方。

 轉(zhuǎn)載:人人都是產(chǎn)品經(jīng)理

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wnxcall.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

人人都可以是設(shè)計(jì)師:UI&UX 小技巧大全(二)

清陽 設(shè)計(jì)思維

讓用戶在使用產(chǎn)品時(shí)不產(chǎn)生混淆、可快速獲取所需信息,是產(chǎn)品設(shè)計(jì)時(shí)應(yīng)當(dāng)考慮的重要層面,而這需要團(tuán)隊(duì)在設(shè)計(jì)時(shí)預(yù)先做好方案,去掉無關(guān)事物,清晰地呈現(xiàn)信息,提升產(chǎn)品的易用性與用戶體驗(yàn)。蘭亭妙微 UI 設(shè)計(jì)公司始終以 “精簡信息、提升信噪比” 為設(shè)計(jì)核心,本篇文章里,作者結(jié)合實(shí)戰(zhàn)經(jīng)驗(yàn),介紹了提高信噪比的設(shè)計(jì)技巧,一起來看一下。

用戶對產(chǎn)品的體驗(yàn)往往源于直觀感受,因此 UI&UX 設(shè)計(jì)直接影響著產(chǎn)品的成敗 —— 即便產(chǎn)品功能再強(qiáng)大,糟糕的界面與交互體驗(yàn)也會(huì)讓其價(jià)值大打折扣。
 
但想要優(yōu)化 UI&UX 設(shè)計(jì),并非一定要掌握系統(tǒng)且全面的設(shè)計(jì)知識,有時(shí)只需一些細(xì)微的調(diào)整,就能讓設(shè)計(jì)效果實(shí)現(xiàn)質(zhì)的提升。Marc Andrew 總結(jié)了 36 個(gè)可落地的 UI&UX 優(yōu)化小技巧,分 6 篇系列文章呈現(xiàn),本文為第二篇,希望能為設(shè)計(jì)師們提供實(shí)操參考。(原文發(fā)表于 Medium,標(biāo)題為:UI & UX micro-tips: Volume two)

image.png

在打造高效、美觀的 UI 界面時(shí),那些看似不起眼的細(xì)節(jié)調(diào)整,往往能快速優(yōu)化設(shè)計(jì)效果與用戶體驗(yàn)。接下來,直接分享干貨技巧:
 

一、選用通用認(rèn)可圖標(biāo),規(guī)避用戶認(rèn)知混淆

 
在設(shè)計(jì)界面中添加圖標(biāo)時(shí),核心原則是選擇行業(yè)通用、用戶普遍認(rèn)可的樣式,確保圖標(biāo)能清晰傳遞操作意圖與功能含義。
 

image.png

對比兩種設(shè)計(jì)實(shí)例就能發(fā)現(xiàn),使用表意模糊的自定義圖標(biāo),會(huì)讓用戶產(chǎn)生操作困惑,形成認(rèn)知障礙;而選用標(biāo)準(zhǔn)化的通用圖標(biāo),能讓用戶無需思考即可理解操作指向。設(shè)計(jì)中切勿為了追求個(gè)性,使用過于小眾、叛逆的圖標(biāo)樣式,徒增用戶的理解成本。
 

二、巧用親密性原則,明確元素關(guān)聯(lián)關(guān)系

 
在對比、間隔、重復(fù)等經(jīng)典設(shè)計(jì)原則中,親密性原則是打造清晰界面的關(guān)鍵,能有效幫助用戶快速識別元素間的邏輯關(guān)系。

image.png

這一原則的落地方式十分簡單:將內(nèi)容相關(guān)、功能聯(lián)動(dòng)的設(shè)計(jì)元素就近排布,通過物理距離的遠(yuǎn)近,直觀體現(xiàn)元素間的關(guān)聯(lián)程度。反之,無關(guān)元素則保持合理間距。這樣的設(shè)計(jì)方式,能讓用戶在瀏覽網(wǎng)頁或 APP 時(shí),快速建立對界面內(nèi)容的認(rèn)知,提升信息獲取效率。
 
對比設(shè)計(jì)實(shí)例可見,元素排布松散的界面會(huì)讓用戶難以識別邏輯關(guān)聯(lián),而元素就近聚合的界面,能讓信息層級更清晰。
 

三、4px 基線網(wǎng)格 + 8px 網(wǎng)格,打造和諧垂直視覺節(jié)奏

image.png

網(wǎng)格系統(tǒng)是界面排版的基礎(chǔ),將4px 基線網(wǎng)格與通用的8px 網(wǎng)格搭配使用,能讓界面的垂直視覺節(jié)奏更和諧,尤其適用于字體排版環(huán)節(jié)。

 

具體實(shí)操方法為:讓字體對齊 4px 基線網(wǎng)格,同時(shí)將行高值設(shè)置為 4 的整數(shù)倍(如 16、20、24、28px 等)。之所以選擇 4px 作為基線網(wǎng)格單位,是因?yàn)閱渭円?8px 為倍數(shù)進(jìn)行伸縮,在處理部分文本尺寸時(shí),靈活性與適配性會(huì)有所不足,而 4px 基線網(wǎng)格能彌補(bǔ)這一問題,與 8px 網(wǎng)格形成互補(bǔ),讓整體排版更具秩序感。
 

四、降低標(biāo)題行高,提升視覺緊湊度與閱讀體驗(yàn)

image.png

標(biāo)題與長格式正文的排版需求截然不同:正文需要足夠的行高來保證閱讀舒適度,而標(biāo)題通常文字簡短,適當(dāng)縮小行高不僅不會(huì)影響閱讀,還能提升視覺緊湊度,讓標(biāo)題更具層次感。
 
設(shè)計(jì)中推薦將標(biāo)題行高設(shè)置為文字大小的 1-1.3 倍,且標(biāo)題文字越大,行高的倍數(shù)可適當(dāng)降低。對比行高過高與行高適中的設(shè)計(jì)實(shí)例能明顯發(fā)現(xiàn),行高合適的標(biāo)題視覺更聚焦,能讓用戶快速捕捉核心信息。
 

五、色輪類似配色,快速打造和諧配色方案

image.png

若在設(shè)計(jì)中陷入配色選擇的困境,色輪類似配色法會(huì)是高效的解決方案 —— 類似色(也叫鄰接色相 / 相鄰色相)是最易打造視覺和諧的配色方案之一。
 
類似色指色輪上相鄰的色相,由原色、間色與復(fù)色組合而成,基于這一原則選擇配色,能快速搭建出簡潔且無視覺違和感的色彩體系。借助色輪選擇相鄰色相進(jìn)行搭配,無需復(fù)雜的色彩調(diào)試,就能讓界面配色達(dá)到和諧統(tǒng)一的效果,大幅提升配色效率。
 

六、最大化設(shè)計(jì)信噪比,讓核心信息更突出

image.png

設(shè)計(jì)的清晰度與可用性,核心在于提升信噪比—— 這里的 “信號” 指產(chǎn)品想要傳遞的核心相關(guān)信息,“噪音” 則是無意義的干擾元素。通過讓信號最大化、噪音最小化,能讓用戶快速聚焦核心內(nèi)容,提升信息獲取效率。
 
實(shí)現(xiàn)這一目標(biāo)的關(guān)鍵方法為:一方面通過強(qiáng)化視覺層級,讓核心信息(信號)得到有效凸顯;另一方面堅(jiān)決剔除或弱化無關(guān)的文字、圖標(biāo)、裝飾等元素(噪音),避免分散用戶注意力。
 
對比兩種設(shè)計(jì)實(shí)例能看到,元素堆砌、信息雜亂的界面會(huì)讓用戶難以捕捉重點(diǎn),而剔除冗余元素、聚焦核心信息的界面,視覺更簡潔,用戶能快速獲取關(guān)鍵內(nèi)容。簡言之,剔除無關(guān)、簡化界面、突出核心,是提升設(shè)計(jì)信噪比的核心要義。
 
希望這些 UI&UX 微調(diào)技巧,能為大家的設(shè)計(jì)實(shí)踐提供新思路,讓每一處細(xì)節(jié)調(diào)整都能為產(chǎn)品體驗(yàn)賦能。

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wnxcall.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

日歷

鏈接

個(gè)人資料

存檔