首頁

UI設(shè)計師定制的UI設(shè)計配色技巧

seo達人


每當(dāng)我看到一個漂亮,優(yōu)雅并且簡潔美觀的界面,就會忍不住保存下來?,F(xiàn)在,我已經(jīng)收集了100多個美不勝收的UI 界面。在一次次觀摩,欣賞和學(xué)習(xí)后,我發(fā)現(xiàn)這些界面有很多共同點。可究竟是什么讓我對它們一見鐘情呢?現(xiàn)在我找到了答案,是色彩。

本文中,結(jié)合自身經(jīng)歷,我總結(jié)了一些UI 設(shè)計配色技巧。雖然它們不能像魔術(shù)一樣讓你搖身一變成為最優(yōu)秀的UI設(shè)計師,但是我保證,這些為你量身打造的UI 設(shè)計配色技巧,定會讓你受益匪淺。

1. 色彩的魔力

色彩是會說話的,甚至可以像語言一樣強大?;叵胍韵?,每當(dāng)你初見一個網(wǎng)站或產(chǎn)品,給你留下第一印象的是什么呢?是視覺外觀,而視覺外觀很大程度上是取決于色彩運用。

那么,在UI設(shè)計中,色彩究竟可以做些什么?

1)反映品牌的內(nèi)涵和品質(zhì)

顏色可以為品牌設(shè)定基調(diào)。 CCICOLOR的一項研究表明,用戶在評估一款在線商品時,只需花費短短90秒,而判斷的依據(jù)高達62%至90%將取決于配色方案。

2)實現(xiàn)更佳的用戶體驗

色彩的有效運用能提升整體美感,提供更優(yōu)的閱讀體驗,創(chuàng)造清晰和諧的風(fēng)格。

3)影響購買決策

根據(jù)Kissmetrics的說法,產(chǎn)品的視覺外觀是影響消費者購買決策的首要因素。此外,QuickSprout的研究也表明,90%的產(chǎn)品評估都與顏色有關(guān)。Neil Patel曾寫到,“顏色在你購買特定產(chǎn)品的原因中占據(jù)85%的分量”。正因如此,顏色已成為當(dāng)今重要的營銷手段之一。

2. 色彩的基本概念

色彩被長久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨特的語言和象征。解讀色彩的語言,請看下表:


大圖模式
點擊此處添加圖片說明文字

3. UI 設(shè)計配色技巧

1) 色彩使用也講究“天時地利人和”

存在即合理,沒有哪一個色彩本身就是丑陋和不具備美感的,只能說,如果我們錯誤的使用了色彩,那么它的美一旦被破壞,就只剩下丑陋和別扭了。

想象一下,如果麥當(dāng)勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色,你還對他們的炸雞充滿饑腸轆轆的感覺嗎?女人喜歡穿著黑色禮服搭配鮮艷口紅參加派對,為什么?因為這樣會讓她們看起來性感迷人。

不同的顏色傳達不同的含義和感覺。如何明智地進行選取和搭配呢?這里請注意5點:選取合適的顏色,運用于合適的設(shè)計場景,注意時間變化,關(guān)注目標用戶,明確想要達到的目的。

這里請認真查看上圖,明確顏色的意義。但如果你非要冒險追求獨一無二的設(shè)計,那么祝您好運。


大圖模式
點擊此處添加圖片說明文字

2)留心藍色

為什么專門談藍色?藍色不是海洋天空的專屬色,藍色也是UI 設(shè)計的青睞色。


看看你常用的一些比較有名的APP或者網(wǎng)站,比如Facebook,Safari以及辦公軟件等等。有什么發(fā)現(xiàn)呢?是的,它們的界面都是藍色,各種層次的藍色。

有研究表明,藍色是唯一一種讓女性和男性都鐘愛的顏色。藍色幾乎無處不在,大自然中,各網(wǎng)站的UI界面,服飾衣物等,藍色隨處可見。包括我此刻寫入文章的Microsoft Word,界面也是藍色的。

藍色無疑是一種安全的顏色,它能最大程度上獲得用戶的信任并被廣泛接受,藍色可以說是UI配色中的典型例子。如果你的UI界面沒有更好的選擇,請用藍色。


大圖模式
點擊此處添加圖片說明文字

3)背景色和元素之間的色彩變化技巧

看看以下的界面:


大圖模式

(來源)

這里暫且不談這又是關(guān)于藍色的UI界面,讓我們專注于它的色彩變化。主題顏色是藍色,其他元素是較暗的藍色和更明亮的藍色。整體看上去,各層次的顏色平衡和諧且又脈絡(luò)清晰。

怎么做到自然而又極具美感的色彩變化?

只是一個簡單的黃金法則:通過降低亮度和增加飽和度可以使色彩變得更深;通過增加亮度和降低飽和度來使色彩變得更淺。

4)色彩組合的黃金比例——(6:3:1)規(guī)則

在設(shè)計時,色彩組合必不可免。組合顏色很容易,但組合后如何避免色彩混亂和累贅?如何既能夠不顯得單調(diào)又展示設(shè)計感?

記住二個原則:

第一個:6:3:1規(guī)則

60%+ 30%+ 10%的比例是為了平衡顏色。這個公式能創(chuàng)造出一種平衡的感覺,并能提供更佳的用戶體驗,可以讓用戶的實現(xiàn)從一個點舒緩的移動到另一個點。

第二個:最多3個原色

這個規(guī)則與黃金(6:3:1)規(guī)則相匹配。這是避免混亂并保持平衡的最佳辦法。


大圖模式

5)顏色組合和互補

提供和諧的配色方案時,需要注意些什么?在這個過程中需要考慮以下方面:

第一, 色調(diào)

您可以在色環(huán)上生成單個“色度”的許多變體。通過添加白色,黑色和灰色來生成不同的色調(diào)。

實現(xiàn)平衡色調(diào),最簡單的方案是單色(單色)方案。

第二, 對比

顏色的不同對比可以喚起不同的情感反應(yīng)。色輪上相對的兩種顏色可以提供最高的對比度,比如黑色和白色。強烈的對比度可以讓人集中精力,并且產(chǎn)生緊張的心情; 柔和的對比度則適用于輕松、休閑的UI設(shè)計。


大圖模式

注意:對比的使用不要過火,這樣容易使用戶產(chǎn)生困擾。

6)黑白色搭配不過時

黑色是所有中性色中最強的,而白色是最常用的背景顏色。黑色是一個很好的選擇,有種高端和永恒的感覺,而白色可以帶給用戶自由,寬敞和透氣的感覺。如上所述,黑色和白色也是最大的對比色,如果合理的使用黑色配合白色,會營造出一種優(yōu)雅的氛圍。黑白色的搭配主要用于網(wǎng)站UI界面。


大圖模式

7)從自然和藝術(shù)中獲得靈感

自然與藝術(shù)是靈感的主要源泉。抬頭看看天空,你會發(fā)現(xiàn)藍色發(fā)揮到淋淋盡致的經(jīng)典模樣。從大自然中獲得的配色靈感可以使您的設(shè)計更加切合用戶的審美,非常自然,不帶刻意的痕跡。而藝術(shù)是對自然的直接反映,是非常寶貴的資源,值得好好利用。


大圖模式

8)顏色心理學(xué) – 避免性別誤區(qū)

或許天生如此,女人不喜歡灰色,橙色和棕色。她們鐘愛藍色,紫色和綠色。而男人不喜歡紫色,橙色和棕色。男人喜歡藍色,綠色和黑色。只要記住,當(dāng)你的產(chǎn)品目標用戶群是男性時,選擇能傳達男性氣概的色彩。如果你把運動類App的界面使用了女性色彩,結(jié)果可想而知。

還有一個誤區(qū),人們以為粉色是女性的喜愛,但結(jié)果也許會讓你大跌眼鏡。


大圖模式

4. 工具和模板

這里我總結(jié)了一些有助于UI配色的工具和模板,希望對您有所幫助:

1)Coolors.co

Coolors.co是挑選顏色的好工具。只需鎖定所選顏色并按空格即可生成調(diào)色板,還提供了鎖定部分色卡再次生成顏色的功能。包括HEX、HSB、RGB、CMYK等四種色彩模式。

2)Mockplus

Mockplus是一款非常方便的UI / UX設(shè)計工具,其啟動頁面加入了配色精美的示例項目和模板,可直接導(dǎo)入桌面客戶端。其編輯器中,可對組件進行多樣的色彩設(shè)置和編輯,內(nèi)部也包含完整的顏色選擇器,支持導(dǎo)入圖片和GIF,如果您是要在原型設(shè)計過程中產(chǎn)出精美的UI 界面,Mockplus能滿足您的需求。


大圖模式

3)Paletton

Paletton有點類似于Kuler,但又不僅限于5個色調(diào)。當(dāng)您已經(jīng)擁有原色并想要使用其他色調(diào)時,Paletton將會是您很好的選擇,它可以創(chuàng)建協(xié)同色彩組合工作,是強大的UI調(diào)色板。

4)Check my Color

Check my Color是一款可以用于檢查所有DOM元素的前景和背景顏色組合的工具,也是一款能夠檢查不同網(wǎng)頁自己的顏色亮度和對比度差異的工具。

5)Chinaz

該網(wǎng)站提供了豐富的配色資源,包括在線調(diào)色板,網(wǎng)頁常用色彩,web安全色以及網(wǎng)頁顏色選擇器,會使您UI 配色的一個很好的幫助。建議對色彩運用比較初級的設(shè)計師可以做一個參考。


注意:可用性是關(guān)鍵

創(chuàng)建華麗的UI界面永遠不是最終的目標。提供卓越的用戶體驗,為用戶的生活增添快樂和幸福才是我們設(shè)計的目的。因此,在UI 設(shè)計配色上,每位UI設(shè)計師應(yīng)該記住,界面應(yīng)該是符合高度實用和并且清晰明了的。

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

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(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è)計服務(wù)

超酷!數(shù)據(jù)可視化UI設(shè)計欣賞!

seo達人



為什么數(shù)據(jù)可視化ui設(shè)計非常重要?

數(shù)據(jù)可視化的目的是以一種用戶更容易理解的形式呈現(xiàn)復(fù)雜信息。

一個優(yōu)秀的數(shù)據(jù)可視化界面是什么樣子的?

今天小編就帶給大家一組超酷數(shù)據(jù)可視化UI設(shè)計,風(fēng)格多樣,供參考。

大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式
大圖模式

文章來源:快資訊 作者:ZAKER汽車


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

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(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è)計服務(wù)



UI設(shè)計的幾種技能提升技巧

seo達人


每天學(xué)習(xí)一點,你就進步一點,不斷向上成長,成功沒有偶然,也沒有理所當(dāng)然,能夠成為一名優(yōu)秀UI設(shè)計師的人不是因為他們有多幸運,也不是因為他們天賦有多高有多么強的悟性,而是因為他們一直在努力。

只不過一般人只看到別人的成功和輝煌,卻往往忽略了別人背后辛勤的努力和付出,所以,在不服氣或者眼紅之時,才會用偶然來加以解釋。只有不斷學(xué)習(xí)提升,才能讓自己變得更有價值!

以下是周老師給大家講解UI設(shè)計的幾種技能提升技巧。學(xué)會了可以讓你快速達到事半公倍的效果。

1. 注入生命

大圖模式

無論是登錄屏幕還是加載消息,用戶都可以從這些小細節(jié)中獲得樂趣。這就是為什么像Old Spice和Geico這樣的公司擁有如此知名品牌的原因。通過在他們的營銷中注入幽默感和個性化的設(shè)計,他們創(chuàng)造了更令人難忘的廣告和內(nèi)容。

MailChimp用戶體驗總監(jiān)Aarron Walter說:“我們已經(jīng)發(fā)現(xiàn)在副本中加入幽默、個性,以及許多塞進工作流的復(fù)活節(jié)彩蛋都可以把原本平凡的任務(wù)變成人們期待的體驗,有時甚至是錯過的體驗?!?

將生命注入復(fù)制中,這與說“正在加載...”與“我們訓(xùn)練有素的團隊正在努力做到的”是有區(qū)別的。這是出乎意料的,并為你的用戶提供了一點娛樂。

好的文案并不一定意味著它必須幽默。它只是意味著寫一篇引人入勝、值得一讀的文章。當(dāng)然,在一些領(lǐng)域,如,醫(yī)院、政府等地的應(yīng)用是不合適的。

Reddit的聯(lián)合創(chuàng)始人Alexis Ohanian在《Tools of Titans that I loved》中說了一些我非常喜歡的一句話:“花點時間使它更具人性化,或者(取決于你的品牌)更有趣、更不同、或者更多。這是值得的,這就是我的挑戰(zhàn)?!?

在你去設(shè)計你的下一個產(chǎn)品時,請考慮如何將體驗與引人入勝或有趣的副本結(jié)合在一起。

2. 放入一些圖標和表情符號

大圖模式

添加表情符號和圖標可以幫助快速描述元素的功能。就像是當(dāng)用戶看到放大鏡圖標時,可以立即識別出他們可以通過單擊來搜索內(nèi)容。

我喜歡Pieter Levels如何利用他的網(wǎng)站NomadList上的表情符號來使其更具吸引力和用戶友好性。這是使UI更具視覺吸引力的簡單但有效的方法。

除此之外,關(guān)于這一點沒有太多要說的了,不要過度使用它,也不要通過嘗試過度創(chuàng)意來重新發(fā)明輪子。用戶認識到某些元素具有全局意義。因此,請勿通過干擾用戶熟悉的內(nèi)容來使用戶感到困惑,盡可能嘗試使用已有的約定。一個用戶圖標代表一個用戶配置文件,UI設(shè)計的幾種技能提升技巧https://www.aaa-cg.com.cn/ui/2998.html?seo1一個“+”圖標代表添加,一個購物車代表購物車,一個齒輪代表設(shè)置,等等。

下面是一些我最喜歡的地方,你可以在那里找到圖標和表情符號:

Emojione

Icons8

BoxIcons

Feather

Material

3. 通過插圖使你的產(chǎn)品更具人性化

大圖模式

插圖使你能夠以輕松愉快的方式傳達復(fù)雜的信息。

在我們還小的時候,我們就已經(jīng)接受過將視覺與文字和思想相關(guān)聯(lián)的培訓(xùn)。你見過沒有插圖的兒童讀物嗎?

添加插圖可以幫助緩解心情并平衡界面。插圖可以吸引用戶的注意力,并使應(yīng)用程序的各個方面更易于理解。

但是,更重要的是,插圖要有目的性,并用作內(nèi)容的補充,而不是替代。插圖應(yīng)重點突出,并提供對UX的改進,而不是干擾操作。與插圖的顏色和樣式保持一致也很重要,這樣它們就不會顯得格格不入。

4. 添加一個黑暗模式選項

大圖模式

根據(jù)你正在開發(fā)的應(yīng)用程序,添加深色主題選項可以為像我這樣生活在深色模式下的用戶提供安慰。黑暗模式對眼睛更友好。

在黑暗模式下進行設(shè)計與在明亮模式下進行設(shè)計沒有太大不同。它所需要的只是一個不同的調(diào)色板。我建議讓用戶決定在暗模式還是亮模式之間進行選擇-提供在兩種模式之間切換的能力將改善您的應(yīng)用程序體驗,并允許用戶保持對其體驗的控制。

5. 使用高質(zhì)量的圖像

大圖模式

應(yīng)用程序中的圖像與其他任何視覺元素一樣重要。你選擇的圖像中的視覺效果可以使UI更加生動生動,從而增強你的UI。

有很多很棒的地方可以找到高質(zhì)量的圖像。以下是一些我的最愛:

Unsplash

Pexels

Freepik

Adobe Stock

Pixabay

6. 設(shè)計有趣的404頁面

大圖模式

看到應(yīng)用程序中的每個事件,即使不是那么令人興奮的事件,都可以提供令人難忘的體驗。

錯誤狀態(tài)通常是消極的經(jīng)歷,但你可以通過提供一些個性或樂趣來將其轉(zhuǎn)變?yōu)榉e極的經(jīng)歷。

我最喜歡的示例是Google Chrome瀏覽器的“沒有互聯(lián)網(wǎng)”錯誤屏幕。他們提供了所有必要的信息,以告知用戶如何修復(fù)它,而且還提供了T-Rex無盡的跑步游戲。

我最喜歡的另一個是Dribbble的404頁面。它之所以出色,是因為它可以使用戶參與其中,并且他們可以快速返回瀏覽涂料設(shè)計。

“人們?nèi)匀辉谕铺厣习l(fā)布關(guān)于我們在Hipmunk上的錯誤推文,這是一條錯誤消息。他們?yōu)槭裁匆@樣做?因為這樣做使他們在做一些原本希望很無聊的事情(例如尋找航班)時顯得舉足輕重。” -Hipmunk的創(chuàng)始人Alexis Ohanian說。

元素的高度可以幫助你在應(yīng)用程序中創(chuàng)建信息的層次結(jié)構(gòu)。用戶認為深度代表了重要性-因此,越靠近的元素優(yōu)先級越高。

但是,僅僅因為陰影看起來不錯,并不意味著它們始終是不錯的設(shè)計選擇。在設(shè)計決策時要有目的性,并在添加陰影時要記住這些元素的重要性,這一點很重要。

在做出任何設(shè)計決策時,你應(yīng)該始終這樣做以改善體驗,而不僅僅是美觀。我已經(jīng)提到過幾次,因為我想開車回家。不要忘記,應(yīng)用是為使用而設(shè)計的。不只是因為好看才被人看的。

文章來源:快資訊  作者:躺雞萌妹

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

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(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è)計服務(wù)

UI設(shè)計干貨 10個小技巧提升你的設(shè)計功底

seo達人


今天給大家分享10個非常實用的UI設(shè)計小技巧,請一定要認真看,這能幫助你的設(shè)計功底,更上一層樓。


1、對按鈕進行排版,且風(fēng)格一定要統(tǒng)一。

排版設(shè)計也是一門學(xué)問,不一樣的排版就會有不一樣的視覺結(jié)果。如果對設(shè)計的細節(jié)不重視,有可能讓我們原本完美的產(chǎn)品變的平庸,比如像按鈕、Tab這些簡單的界面元素也是需要排版的,因為用戶可能每天都會點擊N次。


另外,所有按鈕都需要盡可能的風(fēng)格統(tǒng)一,這樣看起來才會更美觀。

大圖模式


2、設(shè)計的時候要學(xué)會留白。

留白的作用在于突顯我們設(shè)計的重要內(nèi)容。

內(nèi)容元素之間的空白不僅僅是用來分隔的,這也是設(shè)計中需要注意的問題之一,比如像按鈕、導(dǎo)航條、文章內(nèi)容、標題等等元素之間的空白都有必要關(guān)注。有效地利用空白,我們可以明確的表現(xiàn)出頁面元素之間的關(guān)系。


3、顏色主題盡量素雅、簡單。

顏色主題可以說是用戶對你設(shè)計的第一印象,一旦使用的顏色過于豐富,甚至是艷俗,就會使得用戶分心。如果你不希望你的用戶在看到花里胡哨的、扎眼的 App 之后就把它刪掉,你就應(yīng)當(dāng)使用一種簡單的顏色主題,給用戶一個簡單大方的第 一印象。簡單的顏色主題順應(yīng)扁平化設(shè)計的要求,這使得用戶在使用你的 App 時能夠有順滑的體驗。

大圖模式


4、只用一種字體。

減少屏幕上字體的數(shù)量才能真正發(fā)現(xiàn)排版的力量。設(shè)計師不需要使用多種字體,只用一種字體,配上斜體、加粗、改變字號等手段,也可以分辨不同區(qū)域的內(nèi)容。


在App、移動端和PC端網(wǎng)站中使用單一字體有助于增強品牌的統(tǒng)一性,優(yōu)化全平臺的體驗。此外,用戶也更喜歡單一字體所帶來的簡潔性。


5、鏈接體驗需改善。

鼠標移動到超鏈接圖片,文字上面時應(yīng)該變成手型,暗示該地方是可以點擊的。網(wǎng)頁中文章里的關(guān)鍵字通常都標有下劃線,提示用戶這個文字是可以點擊的,但是可點擊區(qū)域不會超過字符的寬、高范圍。設(shè)計類似這種帶有超鏈接可點擊區(qū)域的時候,都可以通過一些小技巧來提高可用性,比如:增加間隔,有些情況下甚至可以把鏈接轉(zhuǎn)換為塊元素。


大圖模式


6、分層的界面。

以前,用戶界面都是擬物化的,從事物本身選取素材,比如電子日歷長得和紙質(zhì)桌面日歷一樣,把app圖標設(shè)計成立的,按鍵音也模仿傳統(tǒng)電話。


現(xiàn)在,扁平化設(shè)計通過分層的方式來表現(xiàn)事物的深度和層次,創(chuàng)造一種更加“有形”的感覺。


這樣就更好的解決了如何做好UI設(shè)計的問題,我們的現(xiàn)實世界是3D的,以前人們習(xí)慣的界面也是擬物的,所以在進行扁平化設(shè)計時可能會出現(xiàn)的一個風(fēng)險就是“過于扁平”,導(dǎo)致用戶的不適應(yīng),而分層設(shè)計就是解決這個問題的方法,把一個物件放在另一個物件的上方,充分利用縱向的層次,幫助用戶理清不同物件之間的關(guān)系,把注意力放在特定的位置。


7、更短的用戶操作流程。

以前,人們完成一次交易可能要跳轉(zhuǎn)好幾個頁面,而現(xiàn)在在一屏內(nèi)就可以完成這些步驟,省時省力。比如用戶在完成某項任務(wù)后會高亮接下來所需要進行的操作或者自動打開新頁面。


現(xiàn)在人們的生活節(jié)奏較快,經(jīng)常會在走路的時候用手機,因此簡單快捷的操作更受歡迎。

按照這種思路設(shè)計產(chǎn)品操作流程可以幫用戶省時省力,增加轉(zhuǎn)化率并提高用戶打開App的頻率。

大圖模式

8、利用原型不斷改進。

產(chǎn)品原型可以為功能的開發(fā)設(shè)計提供寶貴的指導(dǎo)。在產(chǎn)品設(shè)計的早期做出矯正,避免在產(chǎn)品基本成型時才修改,浪費時間和精力。


通過低成本的“實驗”,可以測試產(chǎn)品各個功能的需求,通過迭代改進產(chǎn)品,用更少的時間開發(fā)出更好的產(chǎn)品。


9、指出產(chǎn)品適用人群而不是做成全年齡。

你是想把產(chǎn)品做成大眾化的呢還是有精確的適用人群?在產(chǎn)品定位上你需要更精確些。通過不斷了解目標客戶的需求及標準,你能把產(chǎn)品做得更好得到更多與客戶交流的機會,并且讓客戶覺得你很專業(yè),在這方面是獨家提供的優(yōu)質(zhì)服務(wù)。


把產(chǎn)品定位得精確的風(fēng)險就是可能縮小了目標潛在客戶的范圍,也使自身變得不那么全能。但這種做得更專業(yè)的精神卻反過來會贏得信任,權(quán)威。


大圖模式


10、暴露選項而不要將操作隱藏。

你使用的任何一個下拉框都會對用戶造成信息的隱藏而需要額外的操作才能顯示。如果這些信息是貫穿整個操作所必需的,那你最好把它展示出來做得更顯而易見一點。下拉框最好用在選擇日期,省份等約定俗成的地方。對于程序中重要的選項最好還是不要做成下拉形式。


希望以上十條技巧對你有用。

文章來源:快資訊  作者:衍果設(shè)計

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

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(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è)計服務(wù)

外網(wǎng)最火的2種UI設(shè)計風(fēng)格,你到現(xiàn)在還不會用?

seo達人


從事UI設(shè)計的工作人員通常會有一種自己在做時尚行業(yè)的錯覺,因為和時尚行業(yè)一樣,在設(shè)計的時候一定要有最新的元素,如果還在用老掉牙的設(shè)計元素,很容易就會被淘汰掉。所以這里給大家介紹兩種風(fēng)格,幫助最近頭疼設(shè)計風(fēng)格的朋友。

疊加風(fēng)格

顧名思義,疊加風(fēng)格就是通過不同元素疊加而成的,當(dāng)然,不是說我們隨便一堆東西丟在一起就是疊加風(fēng)格。疊加風(fēng)格非常在意大膽排版以及排列有序,有層次感,而這其中層次感是疊加風(fēng)格的核心。

不管是圖文疊加還是圖片之間的疊加,最終目的都是為了突出我們產(chǎn)品的重點,而通過我們疊加方式的不同,效果也是不一樣的。舉個簡單的例子,圖片和文字相互疊加,如果文字在上方,可以很直接展現(xiàn)文字并突出文字思想。而文字在下方,圖片對文字有部分遮擋的話,就會增加神秘感,讓人想要一探究竟。

輪廓化

輪廓化簡單來說就是把文字用輪廓勾勒出來,也可以理解為鏤空,通過描繪輪廓展現(xiàn)出來,這樣我們可以和實心的字體形成強烈的對比。

這種風(fēng)格多半和實心字體一起出現(xiàn),當(dāng)然根據(jù)設(shè)計理念和表達方式不同,也會有單獨出現(xiàn)的情況,這種風(fēng)格講究的是設(shè)計上的細節(jié),讓人眼前一亮的小心機,同時在層次和情緒表達上會更加的豐富,一般都是用來做封面,給用戶的視覺形成強烈的沖擊效果。

文章來源:快資訊   作者:春風(fēng)化娛娛

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

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(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è)計服務(wù)

UI設(shè)計工作的四大類型

seo達人


UI設(shè)計其實也就是用戶界面設(shè)計,很多人以為學(xué)完UI設(shè)計出來就是做淘寶美工了,其實不然,UI設(shè)計可以分為四大類型,可不是簡單的P圖而已。
移動端
我們現(xiàn)在最常用的電子設(shè)備毫無疑問就是手機了,我們?nèi)粘5纳缃?,工作對接,娛樂等都是通過手機完成。所以這也是現(xiàn)在UI設(shè)計中最常見的類型,例如我們手機的界面,APP的圖標,進入APP后的操作界面,都是我們所說的移動端UI設(shè)計。

PC端
電腦作為我們生活和辦公不可或缺的一部分,我們經(jīng)常會在工作中接觸到許多不同的軟件,而這些軟件的操作界面都是通過UI設(shè)計完成的。

游戲
其實游戲設(shè)計嚴格來說,它在應(yīng)用上可以屬于移動端和PC端,畢竟游戲載體還是非常豐富的。但現(xiàn)在游戲行業(yè)發(fā)展非常迅速,所以也逐步成為了UI設(shè)計的一個常見類型。不管是手游的王者榮耀,陰陽師,還是PC端的DOTA,PUBG,CSGO等,所有的登錄界面,商城界面,個人界面都是屬于UI設(shè)計當(dāng)中,而這也是為什么UI設(shè)計會這么受年輕人推崇的主要原因之一。

其它類型
如果硬要細分的話,UI設(shè)計可以分為非常多的類型,但因為這些類型運用程度并沒有特別廣泛而且常見,所以在這里統(tǒng)一歸為一個類型。例如像是VR,車載導(dǎo)航系統(tǒng),還有智能家居等都是逐步興起的產(chǎn)業(yè),而且未來發(fā)展前景非??捎^,而這些產(chǎn)品的界面都是離不開UI設(shè)計的,所以在未來,UI設(shè)計將會越來越重要,同時也會和其它產(chǎn)業(yè)一起快速發(fā)展。

文章來源:快資訊  作者:曼巴怡君

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

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(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è)計服務(wù)

APP引導(dǎo)頁表現(xiàn)技巧,那你UI設(shè)計更有趣

seo達人


一款A(yù)PP最先呈現(xiàn)在用戶眼前往往是從引導(dǎo)頁開始,在這個情況下,一個APP設(shè)計的好壞、使用否能吸引用戶可以在引導(dǎo)頁的設(shè)計上有第一感知。想讓APP設(shè)計更加有趣,引導(dǎo)頁設(shè)計需要遵循以下幾點。


信息傳遞表現(xiàn)技巧


①文字信息的傳遞。文字是手機APP引導(dǎo)頁表現(xiàn)形式中最基礎(chǔ)的信息傳遞載體,也是最難把控的設(shè)計元素。簡短的文字更易于引導(dǎo)頁的信息傳遞,以文字信息的傳遞的為主的APP引導(dǎo)頁設(shè)計表現(xiàn)形式,需要對引導(dǎo)頁界面的文字進行優(yōu)化,還可以通過文字字體的趣味形態(tài)和排列組合方式讓用戶眼前一亮。
大圖模式


②圖片信息的傳遞。AP引導(dǎo)頁設(shè)計的圖片信息,以全屏的人物圖片為主,在不同的圖片中,用戶對于人臉和具有動感的圖片比較容易關(guān)注,而且通過圖片可以通過對用戶視覺的刺激使其很快的產(chǎn)生聯(lián)想并產(chǎn)生行為,給予用戶很好的代入感。


大圖模式


撞色搭配表現(xiàn)技巧


色彩是讓用戶與界面生交互的關(guān)鍵性設(shè)計元素,用戶會對引導(dǎo)頁的界面色彩留下很久的印象,是因為色彩是視覺傳遞情感的最直觀因素,也是用戶視覺中最敏感的部分。其中“撞色”搭配就是一種極其吸引用戶眼球的色彩運用方案。

大圖模式


①互補色搭配的形式。互補色搭配又稱強度對比色搭配,也是一種絕對的色彩搭配,例如:互補色搭配中紅與綠、紫與黃、藍與橙,對這種很強分離性的色彩進行搭配,很容易讓界面的色彩關(guān)系拉開距離,縮短用戶對APP引導(dǎo)頁視覺上選擇的時間,表現(xiàn)出一種獨特的視覺對比與平衡。
大圖模式


②對比色搭配的形式。對比色是人的視網(wǎng)膜對色彩平衡的作用,是人通過視覺感官而產(chǎn)生的一種基本的生理反應(yīng)。對比色的搭配不同于完全對立的互補色,同時處于相對對立的區(qū)域中兩大類色彩之間的搭配。對比色搭配在24色相環(huán)上120度至180度之間的兩種顏色之間的搭配。


大圖模式
界面構(gòu)成表現(xiàn)技巧

①規(guī)范式界面布局。規(guī)范式界面布局通常以大面積的留白為主,通過對界面的分割,讓信息元素成一種強烈的視覺聚焦,使用戶對界面產(chǎn)生參與感。


大圖模式


APP引導(dǎo)頁中的留白主要分為重度留白與輕度留白,重度留白傳遞的不是產(chǎn)品的基礎(chǔ)信息,而是概念、氣質(zhì)和態(tài)度;輕度留白傳遞的往往是直觀的傳達信息。
大圖模式


②自由式界面布局。自由式界面布局一般展示的內(nèi)容比較多,在多個界面的APP引導(dǎo)頁中闡述同一個訴求,每個界面的關(guān)系通常是并列的關(guān)系,確定界面文字、圖形元素的最大值和最小值,讓視覺聚焦在一個體塊中,再從這個體塊中對信息進行排列組合,引導(dǎo)用戶的視覺流向。

大圖模式


③串聯(lián)式界面布局。串聯(lián)式界面布局要求引導(dǎo)頁展示的內(nèi)容要簡明扼要,界面中所有的元素都要按照一定的順序有機的排列,并且頁面之間要有一定的邏輯關(guān)系。

大圖模式


混搭表現(xiàn)技巧


①文字與界面的混搭。手機APP引導(dǎo)頁不單單是一個界面的設(shè)計,還包含了用戶與界面的互動性體驗。APP引導(dǎo)頁的界面屬于一個平面的空間,將引導(dǎo)頁界面再放置到引導(dǎo)頁中,并配以精簡的文字說明,讓用戶與界面展示的內(nèi)容之間產(chǎn)生交互,這種交互更直觀。
大圖模式
②文字與插圖的混搭。文字為輔助元素,插圖為主要元素。插圖作為彰顯APP引導(dǎo)頁獨特的表現(xiàn)形式,在設(shè)計中插圖元素應(yīng)該盡量選取具體的、簡單易懂的,確保插圖元素傳遞給用戶的信息是明確并且易于識別的。運用插圖元素,配以精簡的文字,設(shè)置相應(yīng)的情景氛圍。可以讓用戶更直觀、更迅速了解APP產(chǎn)品。
大圖模式


③靜態(tài)界面與動態(tài)元素的混搭。用戶對于靜態(tài)界面的注意力是有限的,因此APP引導(dǎo)頁的設(shè)計中除了靜態(tài)的界面展示形式,還可以運用一些生動有趣的動態(tài)元素。
大圖模式


動態(tài)元素具備了動態(tài)的畫面和音效,可以讓用戶眼前一亮,在引導(dǎo)頁界面之間切換時產(chǎn)生視覺上的觸動、產(chǎn)生響應(yīng),為原本靜態(tài)的界面增添了動的點,減少了用戶對于初次使用引導(dǎo)頁的陌生感,這些動態(tài)的元素可以闡述一整個完整的信息,也可以并列的闡述一些信息。
大圖模式


但是界面中的動態(tài)元素不要加入太多,最好只有一處,過多的動態(tài)元素會影響用戶的視覺中心,讓用戶不知道看哪里好。靜態(tài)界面與動態(tài)元素的混搭可以讓用戶在接受靜態(tài)元素的同時,與界面產(chǎn)生互動享受不一樣的視覺和聽覺的體驗。 

文章來源:快資訊  作者:衍果設(shè)計

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

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(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è)計服務(wù)


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

seo達人


在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天,APP同質(zhì)化越來越嚴重。


而一個設(shè)計精致APP不應(yīng)漏過任何一個細節(jié),美觀、可用和高效的界面設(shè)計都需要花費大量的時間從細節(jié)上去打磨,并從多方面鉆研并創(chuàng)造出打動人心的UI/UE設(shè)計。


在這里,小易為大家總結(jié)了10個簡單直觀的提升設(shè)計感的小細節(jié),一起來看看吧~



1、文本顏色構(gòu)建層次


文本單純使用字體大小對比,強調(diào)的感覺往往不夠濃烈,我們可以嘗試結(jié)合色彩來營造更好的對比效果。


大圖模式


通過使用顏色的深淺,為元素賦予不同的重要性,建立視覺上的層次結(jié)構(gòu)。


大圖模式


甚至可以采用兩到三種顏色來獲得對比效果:


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

次要內(nèi)容使用灰色(比如商品介紹);

輔助性內(nèi)容采用淺灰色(比如發(fā)布日期)


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


設(shè)計時避免用過多的顏色,選擇一種基礎(chǔ)色,再調(diào)整色調(diào)和顏色深淺來增加均衡。


大圖模式


如果項目允許,必須使用固定的色板,那么可以通過調(diào)整基礎(chǔ)色的飽和度和明度,利用這種簡單的方式為設(shè)計增加一致性。


3、干凈的陰影


陰影可以增加元素的深度,引起用戶的注意力,同時也能增強畫面的視覺層次感。


相比于采用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,輕柔的陰影會讓畫面更精致。


大圖模式


如果陰影的范圍太小或顏色太深,位置也沒有偏移,而是聚集在元素的四周,就會讓畫面更加扁平,讓視覺變得厚重,從而使設(shè)計變得不精致。


4、個性的圖標設(shè)計


大多數(shù)App都是默認灰色,選中填充品牌色,這樣的設(shè)計太普通,太常見了。


大圖模式


要想讓標簽欄圖標設(shè)計精致和富有個性,可以豐富每一個選中態(tài)圖標的視覺表現(xiàn),例如給圖標加上背景和表情,也會增加用戶的體驗感。


大圖模式



5、Tab的設(shè)計感


Tab是App設(shè)計中最常見的控件之一,它源自Material Design的設(shè)計規(guī)范。


Tab的設(shè)計較為簡單,通常是使用一組文字標簽,通過顏色或在標簽下加上小長條來區(qū)分兩者的狀態(tài)。


可正因為它簡單,卻越難設(shè)計出彩,要發(fā)揮極大的設(shè)計想象力,跳脫出設(shè)計規(guī)范的限制,才能找到完美的方案。


大圖模式


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


6、統(tǒng)一設(shè)計元素


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


大圖模式


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


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


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


雖然默認字體可以滿足大多數(shù)App 的設(shè)計需求,但系統(tǒng)字體并沒有什么特色,會喪失App的品類感。


大圖模式


例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺,換成系統(tǒng)字體后,整體感覺在氣勢上就變?nèi)趿撕芏唷?


8、第三方圖標風(fēng)格統(tǒng)一


第三方圖標也是UI設(shè)計師最常忽略的內(nèi)容,往往是直接將第三方圖標調(diào)整一致大小和擺放整齊位置,沒有針對它們再設(shè)計。


大圖模式


一個設(shè)計精致的App不應(yīng)漏過任何的細節(jié),我們可以以自家App的圖標風(fēng)格為依據(jù),對第三方圖標進行優(yōu)化設(shè)計。


9、圖片中尋找色彩


App中優(yōu)美的圖文設(shè)計非常重要,能帶給用戶極佳的視覺享受。


我們經(jīng)??吹轿淖织B加在圖片背景上的設(shè)計樣式,為了減少圖片背景對文字的干擾,通常會疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這種設(shè)計過于俗套。


大圖模式


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


10、卡片式設(shè)計


現(xiàn)在的UI界面設(shè)計中,卡片式設(shè)計已經(jīng)是一種非常常見的設(shè)計形式。


大圖模式

它有利于信息分層和整合,劃分出更加清晰的組織結(jié)構(gòu),實現(xiàn)復(fù)雜內(nèi)容的簡化處理,提高空間利用率。

文章來源:快資訊  作者:衍果設(shè)計

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

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(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è)計服務(wù)

ui設(shè)計背景元素設(shè)計技巧,提升用戶停留率

seo達人


無論是設(shè)計網(wǎng)頁還是海報,背景圖片都是最常用、也最能體現(xiàn)當(dāng)下設(shè)計趨勢的一種設(shè)計元素。在設(shè)計APP 的時候同樣是如此。過去的10年當(dāng)中,用戶的品味發(fā)生了不小的變化,而現(xiàn)在,整個設(shè)計趨勢上,似乎正處在一個關(guān)鍵的轉(zhuǎn)折點上。


在我們所能觀察到的諸多設(shè)計當(dāng)中,淺色的背景是當(dāng)之無愧的主流。淺色背景本身就不太可能喧賓奪主,讓視覺主體更加突出。而如今,我們逐漸發(fā)現(xiàn),背景還具備補充主體的功能,并且這種補充是潛移默化的。背景的功能性其實還可以強化,這種思路可以在如今的APP 界面設(shè)計當(dāng)中應(yīng)用,讓整體設(shè)計更加平衡。


如今的UI設(shè)計師大都明白在背景中融入元素來吸引用戶的眼球,提升產(chǎn)品調(diào)性,提高內(nèi)容的可讀性。而這也促使圖片、插畫、色塊等元素在背景當(dāng)中發(fā)揮了更大的作用。



1、為創(chuàng)造戲劇感,使用色彩分割背景


分屏式設(shè)計并不新鮮,它是一個存在了很長時間的設(shè)計趨勢了。在桌面端的屏幕上,分屏式設(shè)計一直都很有效,寬廣的屏幕讓設(shè)計師有足夠的施展空間,但是在移動端上則是個挑戰(zhàn)。

大圖模式



在 UI 設(shè)計師們找到了解決方案,對比色是增加視覺吸引力的最佳方式。

在 Tubik Studio 的這個設(shè)計案例當(dāng)中,設(shè)計師使用不均等分布的色塊來分割屏幕,同時使用白色背景區(qū)塊來承載主體內(nèi)容,避免被背景色彩干擾。設(shè)計師充分利用了對比色的對抗性,以及和白色之間的對比度,功能完善,但是有趣又漂亮。



2、為營造氛圍,在背景上疊加輔助性圖形元素


雖然在背景圖片中疊加各種圖形化的元素聽起來很奇怪,但是確實是逐漸流行起來的一種背景設(shè)計玩法。不過,這存在一種風(fēng)險,就是如果疊加太多的圖形化元素,會讓整體看起來過于雜亂。盡量在豐富視覺和制造視覺污染之間找到平衡,最終的設(shè)計效果,能夠給你帶來意料之外的優(yōu)質(zhì)效果。


大圖模式


雖然手機越來越大,但是屏幕空間依然很寶貴。通過疊加一些特定的圖形元素來創(chuàng)造視覺深度,給用戶以空間感。


這種背景設(shè)計的另外一個好處在于,你可以讓整個UI顯得更加富有視覺吸引力。在設(shè)計的時候,需要注意的是,要保持元素之間的一致性,確保不同的元素在屏幕上呈現(xiàn)的時候,仍然保持協(xié)調(diào)。



3、為保持整體感,使用整圖作為背景


使用整張圖片作為背景,一直被UI/UX領(lǐng)域的設(shè)計師所爭論。對,你沒看錯,這個事情一直存在爭議。有人非常喜歡使用圖片背景,有人則完全無法接受這種呈現(xiàn)方式。


但是撇開個人喜好,趨勢上,這種背景運用方式還是越來越流行了。在APP的UI界面中,如果你能靈活自由地使用全屏背景的化,對于接下來的設(shè)計肯定是有所助益的。


大圖模式


圖片所呈現(xiàn)的信息量當(dāng)然是毋庸置疑的,更重要的是如何貼合品牌和氛圍,呈現(xiàn)出應(yīng)有的氣場。

當(dāng)然,最核心的技巧,是在于透明度的控制,和內(nèi)容框的設(shè)計。為了避免信息和背景之間的對比度不足,合理的方法是使用內(nèi)容框?qū)⑶熬暗脑爻休d起來。而為了避免背景圖片喧賓奪主,還可以借助透明度的控制,來確保背景圖片更加平滑自然,不會影響到閱讀和使用。



4、需要強化感受和情緒,使用漸變色背景


漸變色在幾年前回歸之后,在設(shè)計當(dāng)中的運用范圍越來越廣。漸變色不僅賦予設(shè)計更加強烈的個性,而且能夠和用戶之間產(chǎn)生足夠的情感共鳴。


你可以使用漸變色來營造調(diào)性,創(chuàng)造對比,甚至還可以借助漸變色才來作為視覺線索和引導(dǎo)。比如當(dāng)你在背景中使用藍色的時候,可以通過深淺漸變來創(chuàng)造方向性,引導(dǎo)用戶向特定的地方瀏覽。


大圖模式


但是,漸變色背景流行起來最重要的原因還是它的情感共鳴的能力。許多 UI 設(shè)計師已經(jīng)意識到心理因素在移動端設(shè)備中的巨大影響,能否喚醒用戶的情感是關(guān)鍵。


漸變色背景的設(shè)計玩法有很多,變化幅度的大小,方向,對比度和亮度的變化差異,都會帶來不同的影響。當(dāng)然,漸變背景同樣必須遵循一個原則,那就不能喧賓奪主。在設(shè)計的時候,同樣可以借助透明度的調(diào)整,來降低它和CTA按鈕之間的對比度。


5、為了強化故事性,使用插畫背景


插畫師可以根據(jù)需求更加自由地繪制足以滿足不同需求的插畫,獨特,個性,定制化。不過,想要創(chuàng)建足以代表企業(yè)、團隊、產(chǎn)品或者用戶角色的插畫,并不能憑空創(chuàng)建,而是需要一個研究過程,通過調(diào)研和分析,才能提出需求,再做執(zhí)行。它是一個機器人,還是一個更加擬真的角色?又或者使用動物擬人化的形象更合適?


大圖模式


許多設(shè)計師更加傾向于在APP中使用自定義插畫,因為這樣更加自由輕松地達成各種目標,從新用戶引導(dǎo),到提供教程。



6、基礎(chǔ)但通用,使用幾何圖形來構(gòu)建背景


幾何圖形本身是非?;A(chǔ)的元素,它們的含義和感覺非?;A(chǔ),也具有普世性。雖然它們很簡單,但是在UI 設(shè)計中非常強大。單一的幾何形狀是簡單的,但是結(jié)合不同的效果、不同的組合,即使使用簡單的幾何形狀,也能夠發(fā)揮出多樣的變化。


大圖模式


當(dāng)然,具體怎么運用幾何圖形,還要看你的UI界面上,有哪些東西,作為背景的幾何圖形和 UI 中的主體元素之間,空間關(guān)系要怎么控制,怎樣保持優(yōu)雅簡潔,確保品牌信息的傳達。


結(jié)語


就像 UI 界面中其他的元素一樣,背景同樣值得關(guān)注和規(guī)劃。最重要的是,你想表達什么,傳達什么樣的信息,想借助整個UI 界面來實現(xiàn)什么樣的功能,規(guī)劃好了才能更好地呈現(xiàn)內(nèi)容。


背景的選取之所以會成為UI設(shè)計趨勢的關(guān)注點,很大程度是因為UI 和UX 設(shè)計的關(guān)注點開始越來也深入到設(shè)計的方方面面,大家考慮問題也需要越來越細致。

文章來源:快資訊 作者:衍果設(shè)計

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

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(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è)計服務(wù)

優(yōu)秀網(wǎng)站設(shè)計賞析+美圖分享

前端達人

很多網(wǎng)站仍然在使用老舊的頁面設(shè)計,比如國內(nèi)一些企業(yè)官網(wǎng),萬年不變的相類似的模板,外國的則是hero頁面,帶CTA按鈕,三欄式的布局。這些設(shè)計不能說是不好的設(shè)計,很實用,用戶能夠預(yù)測展示的內(nèi)容,也容易找到需要的內(nèi)容。但是正因為可預(yù)測,用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規(guī),也依然有良好用戶體驗的網(wǎng)頁設(shè)計。

藍藍設(shè)計(北京蘭亭妙微科技有限公司)是一家專注而深入的UI設(shè)計公司,公司對UI設(shè)計的追求一向很高,致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機app/安卓ui設(shè)計、軟件界面設(shè)計、網(wǎng)站設(shè)計,用戶研究、交互設(shè)計服務(wù)。

接下來是精彩的UI設(shè)計賞析


WechatIMG1899.jpegWechatIMG1900.jpegWechatIMG1901.jpegWechatIMG1902.jpegWechatIMG1903.jpegWechatIMG1904.jpegWechatIMG1905.jpegWechatIMG1912.jpegWechatIMG1911.jpegWechatIMG1910.jpegWechatIMG1909.jpegWechatIMG1908.jpegWechatIMG1907.jpegWechatIMG1906.jpegWechatIMG1913.jpeg



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

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



日歷

鏈接

個人資料

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

存檔