
每當我看到一個漂亮,優雅并且簡潔美觀的界面,就會忍不住保存下來。現在,我已經收集了100多個美不勝收的UI 界面。在一次次觀摩,欣賞和學習后,我發現這些界面有很多共同點??删烤故鞘裁醋屛覍λ鼈円灰婄娗槟??現在我找到了答案,是色彩。
本文中,結合自身經歷,我總結了一些UI 設計配色技巧。雖然它們不能像魔術一樣讓你搖身一變成為最優秀的UI設計師,但是我保證,這些為你量身打造的UI 設計配色技巧,定會讓你受益匪淺。
1. 色彩的魔力
色彩是會說話的,甚至可以像語言一樣強大?;叵胍韵?,每當你初見一個網站或產品,給你留下第一印象的是什么呢?是視覺外觀,而視覺外觀很大程度上是取決于色彩運用。
那么,在UI設計中,色彩究竟可以做些什么?
1)反映品牌的內涵和品質
顏色可以為品牌設定基調。 CCICOLOR的一項研究表明,用戶在評估一款在線商品時,只需花費短短90秒,而判斷的依據高達62%至90%將取決于配色方案。
2)實現更佳的用戶體驗
色彩的有效運用能提升整體美感,提供更優的閱讀體驗,創造清晰和諧的風格。
3)影響購買決策
根據Kissmetrics的說法,產品的視覺外觀是影響消費者購買決策的首要因素。此外,QuickSprout的研究也表明,90%的產品評估都與顏色有關。Neil Patel曾寫到,“顏色在你購買特定產品的原因中占據85%的分量”。正因如此,顏色已成為當今重要的營銷手段之一。
2. 色彩的基本概念
色彩被長久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨特的語言和象征。解讀色彩的語言,請看下表:
3. UI 設計配色技巧
1) 色彩使用也講究“天時地利人和”
存在即合理,沒有哪一個色彩本身就是丑陋和不具備美感的,只能說,如果我們錯誤的使用了色彩,那么它的美一旦被破壞,就只剩下丑陋和別扭了。
想象一下,如果麥當勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色,你還對他們的炸雞充滿饑腸轆轆的感覺嗎?女人喜歡穿著黑色禮服搭配鮮艷口紅參加派對,為什么?因為這樣會讓她們看起來性感迷人。
不同的顏色傳達不同的含義和感覺。如何明智地進行選取和搭配呢?這里請注意5點:選取合適的顏色,運用于合適的設計場景,注意時間變化,關注目標用戶,明確想要達到的目的。
這里請認真查看上圖,明確顏色的意義。但如果你非要冒險追求獨一無二的設計,那么祝您好運。
2)留心藍色
為什么專門談藍色?藍色不是海洋天空的專屬色,藍色也是UI 設計的青睞色。
看看你常用的一些比較有名的APP或者網站,比如Facebook,Safari以及辦公軟件等等。有什么發現呢?是的,它們的界面都是藍色,各種層次的藍色。
有研究表明,藍色是唯一一種讓女性和男性都鐘愛的顏色。藍色幾乎無處不在,大自然中,各網站的UI界面,服飾衣物等,藍色隨處可見。包括我此刻寫入文章的Microsoft Word,界面也是藍色的。
藍色無疑是一種安全的顏色,它能最大程度上獲得用戶的信任并被廣泛接受,藍色可以說是UI配色中的典型例子。如果你的UI界面沒有更好的選擇,請用藍色。
3)背景色和元素之間的色彩變化技巧
看看以下的界面:
(來源)
這里暫且不談這又是關于藍色的UI界面,讓我們專注于它的色彩變化。主題顏色是藍色,其他元素是較暗的藍色和更明亮的藍色。整體看上去,各層次的顏色平衡和諧且又脈絡清晰。
怎么做到自然而又極具美感的色彩變化?
只是一個簡單的黃金法則:通過降低亮度和增加飽和度可以使色彩變得更深;通過增加亮度和降低飽和度來使色彩變得更淺。
4)色彩組合的黃金比例——(6:3:1)規則
在設計時,色彩組合必不可免。組合顏色很容易,但組合后如何避免色彩混亂和累贅?如何既能夠不顯得單調又展示設計感?
記住二個原則:
第一個:6:3:1規則
60%+ 30%+ 10%的比例是為了平衡顏色。這個公式能創造出一種平衡的感覺,并能提供更佳的用戶體驗,可以讓用戶的實現從一個點舒緩的移動到另一個點。
第二個:最多3個原色
這個規則與黃金(6:3:1)規則相匹配。這是避免混亂并保持平衡的最佳辦法。
5)顏色組合和互補
提供和諧的配色方案時,需要注意些什么?在這個過程中需要考慮以下方面:
第一, 色調
您可以在色環上生成單個“色度”的許多變體。通過添加白色,黑色和灰色來生成不同的色調。
實現平衡色調,最簡單的方案是單色(單色)方案。
第二, 對比
顏色的不同對比可以喚起不同的情感反應。色輪上相對的兩種顏色可以提供最高的對比度,比如黑色和白色。強烈的對比度可以讓人集中精力,并且產生緊張的心情; 柔和的對比度則適用于輕松、休閑的UI設計。
注意:對比的使用不要過火,這樣容易使用戶產生困擾。
6)黑白色搭配不過時
黑色是所有中性色中最強的,而白色是最常用的背景顏色。黑色是一個很好的選擇,有種高端和永恒的感覺,而白色可以帶給用戶自由,寬敞和透氣的感覺。如上所述,黑色和白色也是最大的對比色,如果合理的使用黑色配合白色,會營造出一種優雅的氛圍。黑白色的搭配主要用于網站UI界面。
7)從自然和藝術中獲得靈感
自然與藝術是靈感的主要源泉。抬頭看看天空,你會發現藍色發揮到淋淋盡致的經典模樣。從大自然中獲得的配色靈感可以使您的設計更加切合用戶的審美,非常自然,不帶刻意的痕跡。而藝術是對自然的直接反映,是非常寶貴的資源,值得好好利用。
8)顏色心理學 – 避免性別誤區
或許天生如此,女人不喜歡灰色,橙色和棕色。她們鐘愛藍色,紫色和綠色。而男人不喜歡紫色,橙色和棕色。男人喜歡藍色,綠色和黑色。只要記住,當你的產品目標用戶群是男性時,選擇能傳達男性氣概的色彩。如果你把運動類App的界面使用了女性色彩,結果可想而知。
還有一個誤區,人們以為粉色是女性的喜愛,但結果也許會讓你大跌眼鏡。
4. 工具和模板
這里我總結了一些有助于UI配色的工具和模板,希望對您有所幫助:
1)Coolors.co
Coolors.co是挑選顏色的好工具。只需鎖定所選顏色并按空格即可生成調色板,還提供了鎖定部分色卡再次生成顏色的功能。包括HEX、HSB、RGB、CMYK等四種色彩模式。
2)Mockplus
Mockplus是一款非常方便的UI / UX設計工具,其啟動頁面加入了配色精美的示例項目和模板,可直接導入桌面客戶端。其編輯器中,可對組件進行多樣的色彩設置和編輯,內部也包含完整的顏色選擇器,支持導入圖片和GIF,如果您是要在原型設計過程中產出精美的UI 界面,Mockplus能滿足您的需求。
3)Paletton
Paletton有點類似于Kuler,但又不僅限于5個色調。當您已經擁有原色并想要使用其他色調時,Paletton將會是您很好的選擇,它可以創建協同色彩組合工作,是強大的UI調色板。
4)Check my Color
Check my Color是一款可以用于檢查所有DOM元素的前景和背景顏色組合的工具,也是一款能夠檢查不同網頁自己的顏色亮度和對比度差異的工具。
5)Chinaz
該網站提供了豐富的配色資源,包括在線調色板,網頁常用色彩,web安全色以及網頁顏色選擇器,會使您UI 配色的一個很好的幫助。建議對色彩運用比較初級的設計師可以做一個參考。
注意:可用性是關鍵
創建華麗的UI界面永遠不是最終的目標。提供卓越的用戶體驗,為用戶的生活增添快樂和幸福才是我們設計的目的。因此,在UI 設計配色上,每位UI設計師應該記住,界面應該是符合高度實用和并且清晰明了的。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為什么數據可視化ui設計非常重要?
數據可視化的目的是以一種用戶更容易理解的形式呈現復雜信息。
一個優秀的數據可視化界面是什么樣子的?
今天小編就帶給大家一組超酷數據可視化UI設計,風格多樣,供參考。
文章來源:快資訊 作者:ZAKER汽車
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每天學習一點,你就進步一點,不斷向上成長,成功沒有偶然,也沒有理所當然,能夠成為一名優秀UI設計師的人不是因為他們有多幸運,也不是因為他們天賦有多高有多么強的悟性,而是因為他們一直在努力。
只不過一般人只看到別人的成功和輝煌,卻往往忽略了別人背后辛勤的努力和付出,所以,在不服氣或者眼紅之時,才會用偶然來加以解釋。只有不斷學習提升,才能讓自己變得更有價值!
以下是周老師給大家講解UI設計的幾種技能提升技巧。學會了可以讓你快速達到事半公倍的效果。
1. 注入生命
無論是登錄屏幕還是加載消息,用戶都可以從這些小細節中獲得樂趣。這就是為什么像Old Spice和Geico這樣的公司擁有如此知名品牌的原因。通過在他們的營銷中注入幽默感和個性化的設計,他們創造了更令人難忘的廣告和內容。
MailChimp用戶體驗總監Aarron Walter說:“我們已經發現在副本中加入幽默、個性,以及許多塞進工作流的復活節彩蛋都可以把原本平凡的任務變成人們期待的體驗,有時甚至是錯過的體驗?!?
將生命注入復制中,這與說“正在加載...”與“我們訓練有素的團隊正在努力做到的”是有區別的。這是出乎意料的,并為你的用戶提供了一點娛樂。
好的文案并不一定意味著它必須幽默。它只是意味著寫一篇引人入勝、值得一讀的文章。當然,在一些領域,如,醫院、政府等地的應用是不合適的。
Reddit的聯合創始人Alexis Ohanian在《Tools of Titans that I loved》中說了一些我非常喜歡的一句話:“花點時間使它更具人性化,或者(取決于你的品牌)更有趣、更不同、或者更多。這是值得的,這就是我的挑戰?!?
在你去設計你的下一個產品時,請考慮如何將體驗與引人入勝或有趣的副本結合在一起。
2. 放入一些圖標和表情符號
添加表情符號和圖標可以幫助快速描述元素的功能。就像是當用戶看到放大鏡圖標時,可以立即識別出他們可以通過單擊來搜索內容。
我喜歡Pieter Levels如何利用他的網站NomadList上的表情符號來使其更具吸引力和用戶友好性。這是使UI更具視覺吸引力的簡單但有效的方法。
除此之外,關于這一點沒有太多要說的了,不要過度使用它,也不要通過嘗試過度創意來重新發明輪子。用戶認識到某些元素具有全局意義。因此,請勿通過干擾用戶熟悉的內容來使用戶感到困惑,盡可能嘗試使用已有的約定。一個用戶圖標代表一個用戶配置文件,UI設計的幾種技能提升技巧https://www.aaa-cg.com.cn/ui/2998.html?seo1一個“+”圖標代表添加,一個購物車代表購物車,一個齒輪代表設置,等等。
下面是一些我最喜歡的地方,你可以在那里找到圖標和表情符號:
Emojione
Icons8
BoxIcons
Feather
Material
3. 通過插圖使你的產品更具人性化
插圖使你能夠以輕松愉快的方式傳達復雜的信息。
在我們還小的時候,我們就已經接受過將視覺與文字和思想相關聯的培訓。你見過沒有插圖的兒童讀物嗎?
添加插圖可以幫助緩解心情并平衡界面。插圖可以吸引用戶的注意力,并使應用程序的各個方面更易于理解。
但是,更重要的是,插圖要有目的性,并用作內容的補充,而不是替代。插圖應重點突出,并提供對UX的改進,而不是干擾操作。與插圖的顏色和樣式保持一致也很重要,這樣它們就不會顯得格格不入。
4. 添加一個黑暗模式選項
根據你正在開發的應用程序,添加深色主題選項可以為像我這樣生活在深色模式下的用戶提供安慰。黑暗模式對眼睛更友好。
在黑暗模式下進行設計與在明亮模式下進行設計沒有太大不同。它所需要的只是一個不同的調色板。我建議讓用戶決定在暗模式還是亮模式之間進行選擇-提供在兩種模式之間切換的能力將改善您的應用程序體驗,并允許用戶保持對其體驗的控制。
5. 使用高質量的圖像
應用程序中的圖像與其他任何視覺元素一樣重要。你選擇的圖像中的視覺效果可以使UI更加生動生動,從而增強你的UI。
有很多很棒的地方可以找到高質量的圖像。以下是一些我的最愛:
Unsplash
Pexels
Freepik
Adobe Stock
Pixabay
6. 設計有趣的404頁面
看到應用程序中的每個事件,即使不是那么令人興奮的事件,都可以提供令人難忘的體驗。
錯誤狀態通常是消極的經歷,但你可以通過提供一些個性或樂趣來將其轉變為積極的經歷。
我最喜歡的示例是Google Chrome瀏覽器的“沒有互聯網”錯誤屏幕。他們提供了所有必要的信息,以告知用戶如何修復它,而且還提供了T-Rex無盡的跑步游戲。
我最喜歡的另一個是Dribbble的404頁面。它之所以出色,是因為它可以使用戶參與其中,并且他們可以快速返回瀏覽涂料設計。
“人們仍然在推特上發布關于我們在Hipmunk上的錯誤推文,這是一條錯誤消息。他們為什么要這樣做?因為這樣做使他們在做一些原本希望很無聊的事情(例如尋找航班)時顯得舉足輕重。” -Hipmunk的創始人Alexis Ohanian說。
元素的高度可以幫助你在應用程序中創建信息的層次結構。用戶認為深度代表了重要性-因此,越靠近的元素優先級越高。
但是,僅僅因為陰影看起來不錯,并不意味著它們始終是不錯的設計選擇。在設計決策時要有目的性,并在添加陰影時要記住這些元素的重要性,這一點很重要。
在做出任何設計決策時,你應該始終這樣做以改善體驗,而不僅僅是美觀。我已經提到過幾次,因為我想開車回家。不要忘記,應用是為使用而設計的。不只是因為好看才被人看的。
文章來源:快資訊 作者:躺雞萌妹
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天給大家分享10個非常實用的UI設計小技巧,請一定要認真看,這能幫助你的設計功底,更上一層樓。
1、對按鈕進行排版,且風格一定要統一。
排版設計也是一門學問,不一樣的排版就會有不一樣的視覺結果。如果對設計的細節不重視,有可能讓我們原本完美的產品變的平庸,比如像按鈕、Tab這些簡單的界面元素也是需要排版的,因為用戶可能每天都會點擊N次。
另外,所有按鈕都需要盡可能的風格統一,這樣看起來才會更美觀。
2、設計的時候要學會留白。
留白的作用在于突顯我們設計的重要內容。
內容元素之間的空白不僅僅是用來分隔的,這也是設計中需要注意的問題之一,比如像按鈕、導航條、文章內容、標題等等元素之間的空白都有必要關注。有效地利用空白,我們可以明確的表現出頁面元素之間的關系。
3、顏色主題盡量素雅、簡單。
顏色主題可以說是用戶對你設計的第一印象,一旦使用的顏色過于豐富,甚至是艷俗,就會使得用戶分心。如果你不希望你的用戶在看到花里胡哨的、扎眼的 App 之后就把它刪掉,你就應當使用一種簡單的顏色主題,給用戶一個簡單大方的第 一印象。簡單的顏色主題順應扁平化設計的要求,這使得用戶在使用你的 App 時能夠有順滑的體驗。
4、只用一種字體。
減少屏幕上字體的數量才能真正發現排版的力量。設計師不需要使用多種字體,只用一種字體,配上斜體、加粗、改變字號等手段,也可以分辨不同區域的內容。
在App、移動端和PC端網站中使用單一字體有助于增強品牌的統一性,優化全平臺的體驗。此外,用戶也更喜歡單一字體所帶來的簡潔性。
5、鏈接體驗需改善。
鼠標移動到超鏈接圖片,文字上面時應該變成手型,暗示該地方是可以點擊的。網頁中文章里的關鍵字通常都標有下劃線,提示用戶這個文字是可以點擊的,但是可點擊區域不會超過字符的寬、高范圍。設計類似這種帶有超鏈接可點擊區域的時候,都可以通過一些小技巧來提高可用性,比如:增加間隔,有些情況下甚至可以把鏈接轉換為塊元素。
6、分層的界面。
以前,用戶界面都是擬物化的,從事物本身選取素材,比如電子日歷長得和紙質桌面日歷一樣,把app圖標設計成立的,按鍵音也模仿傳統電話。
現在,扁平化設計通過分層的方式來表現事物的深度和層次,創造一種更加“有形”的感覺。
這樣就更好的解決了如何做好UI設計的問題,我們的現實世界是3D的,以前人們習慣的界面也是擬物的,所以在進行扁平化設計時可能會出現的一個風險就是“過于扁平”,導致用戶的不適應,而分層設計就是解決這個問題的方法,把一個物件放在另一個物件的上方,充分利用縱向的層次,幫助用戶理清不同物件之間的關系,把注意力放在特定的位置。
7、更短的用戶操作流程。
以前,人們完成一次交易可能要跳轉好幾個頁面,而現在在一屏內就可以完成這些步驟,省時省力。比如用戶在完成某項任務后會高亮接下來所需要進行的操作或者自動打開新頁面。
現在人們的生活節奏較快,經常會在走路的時候用手機,因此簡單快捷的操作更受歡迎。
按照這種思路設計產品操作流程可以幫用戶省時省力,增加轉化率并提高用戶打開App的頻率。
8、利用原型不斷改進。
產品原型可以為功能的開發設計提供寶貴的指導。在產品設計的早期做出矯正,避免在產品基本成型時才修改,浪費時間和精力。
通過低成本的“實驗”,可以測試產品各個功能的需求,通過迭代改進產品,用更少的時間開發出更好的產品。
9、指出產品適用人群而不是做成全年齡。
你是想把產品做成大眾化的呢還是有精確的適用人群?在產品定位上你需要更精確些。通過不斷了解目標客戶的需求及標準,你能把產品做得更好得到更多與客戶交流的機會,并且讓客戶覺得你很專業,在這方面是獨家提供的優質服務。
把產品定位得精確的風險就是可能縮小了目標潛在客戶的范圍,也使自身變得不那么全能。但這種做得更專業的精神卻反過來會贏得信任,權威。
10、暴露選項而不要將操作隱藏。
你使用的任何一個下拉框都會對用戶造成信息的隱藏而需要額外的操作才能顯示。如果這些信息是貫穿整個操作所必需的,那你最好把它展示出來做得更顯而易見一點。下拉框最好用在選擇日期,省份等約定俗成的地方。對于程序中重要的選項最好還是不要做成下拉形式。
希望以上十條技巧對你有用。
文章來源:快資訊 作者:衍果設計
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
從事UI設計的工作人員通常會有一種自己在做時尚行業的錯覺,因為和時尚行業一樣,在設計的時候一定要有最新的元素,如果還在用老掉牙的設計元素,很容易就會被淘汰掉。所以這里給大家介紹兩種風格,幫助最近頭疼設計風格的朋友。
疊加風格
顧名思義,疊加風格就是通過不同元素疊加而成的,當然,不是說我們隨便一堆東西丟在一起就是疊加風格。疊加風格非常在意大膽排版以及排列有序,有層次感,而這其中層次感是疊加風格的核心。
不管是圖文疊加還是圖片之間的疊加,最終目的都是為了突出我們產品的重點,而通過我們疊加方式的不同,效果也是不一樣的。舉個簡單的例子,圖片和文字相互疊加,如果文字在上方,可以很直接展現文字并突出文字思想。而文字在下方,圖片對文字有部分遮擋的話,就會增加神秘感,讓人想要一探究竟。
輪廓化
輪廓化簡單來說就是把文字用輪廓勾勒出來,也可以理解為鏤空,通過描繪輪廓展現出來,這樣我們可以和實心的字體形成強烈的對比。
這種風格多半和實心字體一起出現,當然根據設計理念和表達方式不同,也會有單獨出現的情況,這種風格講究的是設計上的細節,讓人眼前一亮的小心機,同時在層次和情緒表達上會更加的豐富,一般都是用來做封面,給用戶的視覺形成強烈的沖擊效果。
文章來源:快資訊 作者:春風化娛娛
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章來源:快資訊 作者:曼巴怡君
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一款APP最先呈現在用戶眼前往往是從引導頁開始,在這個情況下,一個APP設計的好壞、使用否能吸引用戶可以在引導頁的設計上有第一感知。想讓APP設計更加有趣,引導頁設計需要遵循以下幾點。
②圖片信息的傳遞。AP引導頁設計的圖片信息,以全屏的人物圖片為主,在不同的圖片中,用戶對于人臉和具有動感的圖片比較容易關注,而且通過圖片可以通過對用戶視覺的刺激使其很快的產生聯想并產生行為,給予用戶很好的代入感。
色彩是讓用戶與界面生交互的關鍵性設計元素,用戶會對引導頁的界面色彩留下很久的印象,是因為色彩是視覺傳遞情感的最直觀因素,也是用戶視覺中最敏感的部分。其中“撞色”搭配就是一種極其吸引用戶眼球的色彩運用方案。
②對比色搭配的形式。對比色是人的視網膜對色彩平衡的作用,是人通過視覺感官而產生的一種基本的生理反應。對比色的搭配不同于完全對立的互補色,同時處于相對對立的區域中兩大類色彩之間的搭配。對比色搭配在24色相環上120度至180度之間的兩種顏色之間的搭配。
①規范式界面布局。規范式界面布局通常以大面積的留白為主,通過對界面的分割,讓信息元素成一種強烈的視覺聚焦,使用戶對界面產生參與感。
②自由式界面布局。自由式界面布局一般展示的內容比較多,在多個界面的APP引導頁中闡述同一個訴求,每個界面的關系通常是并列的關系,確定界面文字、圖形元素的最大值和最小值,讓視覺聚焦在一個體塊中,再從這個體塊中對信息進行排列組合,引導用戶的視覺流向。
③串聯式界面布局。串聯式界面布局要求引導頁展示的內容要簡明扼要,界面中所有的元素都要按照一定的順序有機的排列,并且頁面之間要有一定的邏輯關系。
文章來源:快資訊 作者:衍果設計
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在互聯網產品日趨成熟的今天,APP同質化越來越嚴重。
而一個設計精致APP不應漏過任何一個細節,美觀、可用和高效的界面設計都需要花費大量的時間從細節上去打磨,并從多方面鉆研并創造出打動人心的UI/UE設計。
在這里,小易為大家總結了10個簡單直觀的提升設計感的小細節,一起來看看吧~
1、文本顏色構建層次
文本單純使用字體大小對比,強調的感覺往往不夠濃烈,我們可以嘗試結合色彩來營造更好的對比效果。
通過使用顏色的深淺,為元素賦予不同的重要性,建立視覺上的層次結構。
甚至可以采用兩到三種顏色來獲得對比效果:
主要內容使用深灰色(諸如標題,但是不要用純黑);
次要內容使用灰色(比如商品介紹);
輔助性內容采用淺灰色(比如發布日期)
2、統一色調
設計時避免用過多的顏色,選擇一種基礎色,再調整色調和顏色深淺來增加均衡。
如果項目允許,必須使用固定的色板,那么可以通過調整基礎色的飽和度和明度,利用這種簡單的方式為設計增加一致性。
3、干凈的陰影
陰影可以增加元素的深度,引起用戶的注意力,同時也能增強畫面的視覺層次感。
相比于采用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,輕柔的陰影會讓畫面更精致。
如果陰影的范圍太小或顏色太深,位置也沒有偏移,而是聚集在元素的四周,就會讓畫面更加扁平,讓視覺變得厚重,從而使設計變得不精致。
4、個性的圖標設計
大多數App都是默認灰色,選中填充品牌色,這樣的設計太普通,太常見了。
要想讓標簽欄圖標設計精致和富有個性,可以豐富每一個選中態圖標的視覺表現,例如給圖標加上背景和表情,也會增加用戶的體驗感。
5、Tab的設計感
Tab是App設計中最常見的控件之一,它源自Material Design的設計規范。
Tab的設計較為簡單,通常是使用一組文字標簽,通過顏色或在標簽下加上小長條來區分兩者的狀態。
可正因為它簡單,卻越難設計出彩,要發揮極大的設計想象力,跳脫出設計規范的限制,才能找到完美的方案。
例如蝦米音樂的Tab選中態是一段音頻波線,再配合文字的大小對比,一個富有設計感又符合產品特征的Tabs就被創造出來了。
6、統一設計元素
在App中的每一個界面都有許多元素,那些同類的元素應保持統一的設計樣式。
通常個人中心的標簽欄圖標是一個人形剪影,它代表著用戶,因此可以在展示用戶頭像和用戶形象的界面中延續使用。
7、符合產品氣質的字體
選擇符合產品氣質的字體,可以與產品的定位相吻合,傳遞給用戶正確的情感意識。
雖然默認字體可以滿足大多數App 的設計需求,但系統字體并沒有什么特色,會喪失App的品類感。
例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺,換成系統字體后,整體感覺在氣勢上就變弱了很多。
8、第三方圖標風格統一
第三方圖標也是UI設計師最常忽略的內容,往往是直接將第三方圖標調整一致大小和擺放整齊位置,沒有針對它們再設計。
一個設計精致的App不應漏過任何的細節,我們可以以自家App的圖標風格為依據,對第三方圖標進行優化設計。
9、圖片中尋找色彩
App中優美的圖文設計非常重要,能帶給用戶極佳的視覺享受。
我們經??吹轿淖织B加在圖片背景上的設計樣式,為了減少圖片背景對文字的干擾,通常會疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這種設計過于俗套。
我們可以從圖片中提取主色調用于疊加背景的填充色,這樣就使文字、色塊和圖片融入到一起了,畫面變得高級和富有設計感。
10、卡片式設計
現在的UI界面設計中,卡片式設計已經是一種非常常見的設計形式。
它有利于信息分層和整合,劃分出更加清晰的組織結構,實現復雜內容的簡化處理,提高空間利用率。
文章來源:快資訊 作者:衍果設計
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
無論是設計網頁還是海報,背景圖片都是最常用、也最能體現當下設計趨勢的一種設計元素。在設計APP 的時候同樣是如此。過去的10年當中,用戶的品味發生了不小的變化,而現在,整個設計趨勢上,似乎正處在一個關鍵的轉折點上。
在我們所能觀察到的諸多設計當中,淺色的背景是當之無愧的主流。淺色背景本身就不太可能喧賓奪主,讓視覺主體更加突出。而如今,我們逐漸發現,背景還具備補充主體的功能,并且這種補充是潛移默化的。背景的功能性其實還可以強化,這種思路可以在如今的APP 界面設計當中應用,讓整體設計更加平衡。
如今的UI設計師大都明白在背景中融入元素來吸引用戶的眼球,提升產品調性,提高內容的可讀性。而這也促使圖片、插畫、色塊等元素在背景當中發揮了更大的作用。
分屏式設計并不新鮮,它是一個存在了很長時間的設計趨勢了。在桌面端的屏幕上,分屏式設計一直都很有效,寬廣的屏幕讓設計師有足夠的施展空間,但是在移動端上則是個挑戰。
在 UI 設計師們找到了解決方案,對比色是增加視覺吸引力的最佳方式。
在 Tubik Studio 的這個設計案例當中,設計師使用不均等分布的色塊來分割屏幕,同時使用白色背景區塊來承載主體內容,避免被背景色彩干擾。設計師充分利用了對比色的對抗性,以及和白色之間的對比度,功能完善,但是有趣又漂亮。
雖然在背景圖片中疊加各種圖形化的元素聽起來很奇怪,但是確實是逐漸流行起來的一種背景設計玩法。不過,這存在一種風險,就是如果疊加太多的圖形化元素,會讓整體看起來過于雜亂。盡量在豐富視覺和制造視覺污染之間找到平衡,最終的設計效果,能夠給你帶來意料之外的優質效果。
雖然手機越來越大,但是屏幕空間依然很寶貴。通過疊加一些特定的圖形元素來創造視覺深度,給用戶以空間感。
這種背景設計的另外一個好處在于,你可以讓整個UI顯得更加富有視覺吸引力。在設計的時候,需要注意的是,要保持元素之間的一致性,確保不同的元素在屏幕上呈現的時候,仍然保持協調。
使用整張圖片作為背景,一直被UI/UX領域的設計師所爭論。對,你沒看錯,這個事情一直存在爭議。有人非常喜歡使用圖片背景,有人則完全無法接受這種呈現方式。
但是撇開個人喜好,趨勢上,這種背景運用方式還是越來越流行了。在APP的UI界面中,如果你能靈活自由地使用全屏背景的化,對于接下來的設計肯定是有所助益的。
圖片所呈現的信息量當然是毋庸置疑的,更重要的是如何貼合品牌和氛圍,呈現出應有的氣場。
當然,最核心的技巧,是在于透明度的控制,和內容框的設計。為了避免信息和背景之間的對比度不足,合理的方法是使用內容框將前景的元素承載起來。而為了避免背景圖片喧賓奪主,還可以借助透明度的控制,來確保背景圖片更加平滑自然,不會影響到閱讀和使用。
漸變色在幾年前回歸之后,在設計當中的運用范圍越來越廣。漸變色不僅賦予設計更加強烈的個性,而且能夠和用戶之間產生足夠的情感共鳴。
你可以使用漸變色來營造調性,創造對比,甚至還可以借助漸變色才來作為視覺線索和引導。比如當你在背景中使用藍色的時候,可以通過深淺漸變來創造方向性,引導用戶向特定的地方瀏覽。
但是,漸變色背景流行起來最重要的原因還是它的情感共鳴的能力。許多 UI 設計師已經意識到心理因素在移動端設備中的巨大影響,能否喚醒用戶的情感是關鍵。
漸變色背景的設計玩法有很多,變化幅度的大小,方向,對比度和亮度的變化差異,都會帶來不同的影響。當然,漸變背景同樣必須遵循一個原則,那就不能喧賓奪主。在設計的時候,同樣可以借助透明度的調整,來降低它和CTA按鈕之間的對比度。
插畫師可以根據需求更加自由地繪制足以滿足不同需求的插畫,獨特,個性,定制化。不過,想要創建足以代表企業、團隊、產品或者用戶角色的插畫,并不能憑空創建,而是需要一個研究過程,通過調研和分析,才能提出需求,再做執行。它是一個機器人,還是一個更加擬真的角色?又或者使用動物擬人化的形象更合適?
許多設計師更加傾向于在APP中使用自定義插畫,因為這樣更加自由輕松地達成各種目標,從新用戶引導,到提供教程。
幾何圖形本身是非?;A的元素,它們的含義和感覺非?;A,也具有普世性。雖然它們很簡單,但是在UI 設計中非常強大。單一的幾何形狀是簡單的,但是結合不同的效果、不同的組合,即使使用簡單的幾何形狀,也能夠發揮出多樣的變化。
當然,具體怎么運用幾何圖形,還要看你的UI界面上,有哪些東西,作為背景的幾何圖形和 UI 中的主體元素之間,空間關系要怎么控制,怎樣保持優雅簡潔,確保品牌信息的傳達。
就像 UI 界面中其他的元素一樣,背景同樣值得關注和規劃。最重要的是,你想表達什么,傳達什么樣的信息,想借助整個UI 界面來實現什么樣的功能,規劃好了才能更好地呈現內容。
背景的選取之所以會成為UI設計趨勢的關注點,很大程度是因為UI 和UX 設計的關注點開始越來也深入到設計的方方面面,大家考慮問題也需要越來越細致。
文章來源:快資訊 作者:衍果設計
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多網站仍然在使用老舊的頁面設計,比如國內一些企業官網,萬年不變的相類似的模板,外國的則是hero頁面,帶CTA按鈕,三欄式的布局。這些設計不能說是不好的設計,很實用,用戶能夠預測展示的內容,也容易找到需要的內容。但是正因為可預測,用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規,也依然有良好用戶體驗的網頁設計。
藍藍設計(北京蘭亭妙微科技有限公司)是一家專注而深入的UI設計公司,公司對UI設計的追求一向很高,致力于為卓越的國內外企業提供卓越的手機app/安卓ui設計、軟件界面設計、網站設計,用戶研究、交互設計服務。
接下來是精彩的UI設計賞析
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
藍藍設計的小編 http://www.syprn.cn