㈠ 如何在App設計中正確的配色
色彩的數目
在app的界面中,盡量不使用過多的顏色。誠然,簡單的顏色搭配很難第一眼就能吸引住用戶。但是你的app畢竟不是一錘子買賣,把用戶吸引來就完事了。特別現在很多app都是偏工具類的,用戶會經常使用app,那麼頁面中過多的顏色會讓用戶抓不到重點,影響用戶體驗。
多倫多大學曾經做過一項調查,發現大部分用戶都傾向於一個app頁面中只有2—3款顏色。
配色原則
好吧,我們已經知道了用戶只喜歡2到3款顏色。那麼我們怎麼才能正確的挑出那2到3款顏色呢?色輪可以幫助我們。
十二輻色輪對於我們建立一款app配色方案來說是一個重要的工具,特別是對於菜鳥級別設計師來說。
單色搭配( Monochromatic )
單色搭配就是單一色系的搭配,在顏色的深淺、明暗或飽和程度上有所調整來形成明暗的層次關系。
單色搭配在app UI設計中一直都是一個不錯的選擇,特別是藍色系和綠色系。
類比色搭配( Analogous )
類比色搭配是指選用一款顏色作為主色調,色輪中臨近的顏色作為輔色。因為在色輪中相互靠的很久,所以搭配起來不會有很突兀的感覺。
這種配色方案看起來很容易操作,但是實際上主色與輔色的挑選卻是很傷腦筋的。主色和輔色在色輪中的距離如果過遠,那麼整個頁面就會顯得用力過猛。當然挑選的好則另當別論。
Clear是一款管理行程的app,在這里設計師通過從橘黃色到紅色的一個漸變來給用戶實現不同任務視覺上的優先順序順序。
Clam是一款音樂播放軟體。該軟體專門播放一些讓人放鬆的音樂能讓你平靜,冥想、睡眠、放鬆、改善情緒!當你失眠時靜靜Calm能幫你很快的進入夢鄉。設計師主要採用了藍色和綠色來幫助用戶放鬆身心。
補色搭配( Complement )
在色輪上直線相對的兩種顏色稱為互補色。互補色因為互相處於對方的對立面,所以搭配起來會形成強烈的對比效果,進而吸引用戶的注意力。
比如,當我們的眼睛看到一大塊綠色區域時,一小塊紅色就會顯得特別突出。
自定義配色方案 ( Custom Color Scheme)
創建一套新的配色方案並不是想像之中那麼難的。最簡單的方法就是挑選一款明亮歡快的顏色(比如企業色)作為主色,然後挑選幾款中性色作為輔色。這樣一套配色方案就完成了,而且效果也相當不錯。
藍色、白色、深灰、淺灰和黑色就是Dropbox頁面里出現的所有顏色。就是這么簡單
配色神器——Adobe Color CC
Adobe Color CC是由Adobe公司開發的是一款動態的配色識別工具,通過攝像頭的實時拍攝,它會自動識別出當前圖像中幾個主要的配色組合。如果不想讓應用隨機挑選,便可以點擊屏幕鎖定,然後手動調節。
你也可以自己創建新的配色組合保存到library中。此外Adobe Color CC還提供了很多現成的配色方案。
對比度的應用
通常,頁面的元素都不是單獨出現的。比如你不可能看到一個頁面中只有一個按鈕,沒有任何文字,圖標。頁面面中的任何一個元素都是整個系統的一個部分,不同的元素共同構成了一個頁面。頁面中的元素有優先順序之分,有的元素更加重要,我們希望用戶看到或者誘導用戶進行操作。我們可以通過形狀,顏色來產生視覺上的一個對比。我們這里主要討論顏色使用帶來的對比。
設計師更傾向於採用低對比的配色方案。因為高對比度的配色可能因為過於顯眼而破壞整個頁面的風格。低對比度意味著低風險,低對比度配色會使頁面更加的好看與和諧。但是好看與和諧並不意味著高可讀性。最典型的例子就是當文本和背景色對比度較低的時候,文本就會很難閱讀。
特別是在手機端,用戶會經常處於戶外或者光線較為充足的地方,這時用戶會因為炫光根本看不到屏幕內容。
為了確保界面對比度處於一個合理的范圍內,我們引入一個新的概念—對比率 (Contrast ratios) 。對比率指的是一幅圖像中明暗區域最亮的白和最暗的黑之間不同亮度層級的測量,差異范圍越大代表對比越大,差異范圍越小代表對比越小。
一般來說較大文本(14pt 粗體/18pt 正常 以上)與背景的對比率最少要達到4.5:1。較小文本與背景的對比率要達到3:1以上。
至於對比率的計算,我有一個非常簡單的方法。只要進入 WebAIM』s Color Contrast Checker ,輸入色值就可以計算對比率。
不只是文本,圖標和其他一些重要的元素在配色的時候同樣可以採用上面的對比率作為參考。
視力障礙用戶群體
當你在設計一款app的時候,你有沒有考慮到視力障礙的用戶群體呢?
當我們談到色盲的時候,通常會想到紅綠色盲。其實色盲是指不能分辨自然光譜中的各種顏色或者某種顏色,紅綠色盲是最常見的一種。據統計,全世界范圍內,8%的男性和0.5%的女性都患有不同程度的色盲。
因為色盲對顏色的感知具有不確定性,有紅綠色盲,藍黃色盲更有單色色盲。這意味在設計中,我們無法完全規避色盲用戶。所以為了更多的考慮色盲用戶群體,我們在設計中應該降低顏色的依賴。我們可以使用圖案,文字,形狀這些元素來構建頁面。
Photoshop可以通過模擬色盲來幫助設計師看到在色盲用戶的眼中你的界面是什麼樣子的。
總結
提升自己色彩的使用技巧是一個需要不斷努力和積累的過程。你需要了解基礎的色彩理論,更需要大量的實踐,創新與用戶測試。
㈡ APP界面常用的五種顏色搭配
眾所周知,每一種顏色帶給用戶的視覺感受也是不同的。現在人們對手機的依賴程度,就能看到手機中APP的發展前景,那今天就跟大家聊聊如何通過顏色搭配的不同來進行移動端APP界面的布局和排版設計。
移動端UI界面中通常是需要選取 主色,標准色,點晴色 。它們各自代表的含義:
主色 雖然是決定了畫面風格的色彩但是往往不會被大面積的使用。通常在導航欄/部分按鈕/icon/特殊頁面等地方出現,會有點晴,定調的作用。統一的主色調也能讓用戶找到品牌感的歸屬,例如網易紅/騰訊藍/京東紅/阿里橙等等。
標准色 :指的是整套移動界面的色彩規范,確定文本/線段/圖標/背景等等的顏色。
點晴色: 通常會用在標題文本/按鈕/icon等地方,通常起強調和引導閱讀的作用。
常見的移動端UI界面的顏色搭配設計方案有:
1、鄰近色配色法則:(色相環上鄰近的顏色)
換句話說就是:選取色相環上鄰近的幾種顏色來搭配設計。
2、同色系配色法則
主要是指同色系配色(色相一致,飽和度不同)的配色方案:
主色和點晴色都在統一的色相上,給用戶一種一致化的感受。
追波網上最常見的一些APP界面設計作品:都是採用這樣的顏色搭配。
3、點亮色配色法則
主色用相對沉穩的顏色,點晴色採用一個 高亮 的顏色,起帶動頁面氣氛,強調重點的作用。
比如之前追波網設計漂亮的APP界面設計:
4、中性色配色法則
用一些中性的色彩為基調搭配,弱化干擾。這種方法在移動端是最常見的方法。
由黑色、白色及由黑白調和的各種深淺不同的灰色系列,稱為無彩色系,也稱為中性色。中性色不屬於冷色調也不屬於暖色調。黑白灰是常用到的三大中性色。
5、漸變色與純色配色法則
這種大膽的配色方案也是2017年值得關注的一個風向標。也是2017年移動端APP設計的一個趨勢。學會更大膽地使用色彩會是一個不錯的選擇。
以上就是五種移動端UI界面設計顏色搭配設計方案。
㈢ app設計中色彩的類型有哪些
我們在設計APP顏色主要還是屏幕端,那就是RGB
如果是在設計一款APP 如何考慮他的配色 我們可以有以下方法
分析人對顏色的普遍認知/感覺,再結合產品特色來進行色彩的選擇;抑或是從現有app採取的顏色來分析其視覺傳達和表現效果。
當我們實際要採用和確定一種顏色時,思考會涉及到方方面面,不是僅僅通過主觀感知就能確定的。因此我們需要一種方法,來正向的、科學的、盡量客觀去做出選擇。下面我就是來介紹這么一套方法論。
當然,此方法只適用於有精力、有意願花在色彩用戶研究上的團隊和公司,並不是每個公司都那麼適合用。
關於一個APP,或者是一個互聯網產品的視覺風格和主題顏色是怎麼確定其實是有一套系統的方法論的。這個方法論叫做:情緒板(Mood Board)。下面我貼一份網易UEDC的文章來解釋情緒板的運用方法。
什麼是情緒板?
視覺設計師可能會花很長時間產出了精緻的,高品質的設計,得到的卻是用戶或客戶的一句話:「這不是我想要的!」一般來說,在沒有實物前,人們並不清楚自己要的是什麼。但是在看到成品後,他們可以輕易地判斷是否符合自己的喜好或期望。因此,在為錯誤的設計方向投入過多前,了解用戶對風格的期望和需求,從而確定整個網站或產品的視覺風格是有必要的。
情緒板是一種啟發式和探索性的方法,可以對如下問題進行研究:圖像風格(photography style),色彩(color palettes),文字排版(typography),圖案(pattern)以及整體外觀以及感覺。視覺設計和人的情緒緊密相連,不同的設計總是會引發不同的情感。
此外,情緒板也可以作為可視化的溝通工具,快速地向他人傳達設計師想要表達的整體「感覺(feel)」。
如何創建情緒板?
首先,需要明確體驗關鍵詞,在一個設計項目中,通過進行涉眾訪談和用戶研究,研究,設計人員創建了產品的人物角色,基於人物角色,綜合用戶研究結果以及品牌/營銷文檔,可以得出體驗關鍵詞(Experience Keywords)。當人物角色和體驗關鍵詞都確定後,可以通過使用情緒板來探索網站或產品的視覺風格,並作為和內部人員進行早期溝通的基礎。
體驗關鍵詞(Experience Keywords)舉例
其次,應基於時間限制,個人工作習慣以及用戶的需求對情緒板的呈現方式進行選擇。一般來說,可以從實體/數碼,以及拼貼/精緻模板兩個維度來區分情緒板的呈現方式。
A. 拼貼畫
這是一種最簡單地創建情緒板的方式。使用這一模式,無需考慮諸如字體和特定顏色之類的細節問題。找到那些可以激發靈感的素材,其中可能包含那些傳達相似風格和情緒的網站的截圖。這種方式快速,有趣,但是,具有一定的含混性。
B.精緻化的模板
模板可用來展示不同的元素。如:
在這種形式的情緒板中,界定了配色,字體處理(如標題和副標題),按鈕風格甚至是圖片風格。標准模板可以讓人們聚焦於特徵化元素。
一般來說,情緒板可以以實體的方式呈現,也可以以數碼方式呈現的,考慮到成本,時間等因素,我們多選用數碼的方式,因為這種方式更為設計師提供了更靈活,多樣的選擇。
第三步是選擇素材創建情緒板,這是一個迭代的過程。
如何使用情緒板?
在使用情緒板過程中,體驗關鍵詞的作用相當重要。這里首先要說明下什麼是體驗關鍵詞,可以參考以下的幾張PPT截圖(此PPT為UCD CHINA2009年會上工作坊所用的PPT)。
用戶研究方法介紹——情緒板(Mood Board) image_20100205141819
獲得體驗關鍵詞是情緒板的第一項工作,一般從內部涉眾(相關的產品和設計人員)及外部用戶兩種渠道獲得。
自涉眾訪談和用戶研究中,可以收集大量的體驗詞樣本。在獲得這些樣本後,可以內部進行討論,通過歸納整理精簡為幾個關鍵詞。
體驗關鍵詞提取好之後,可以在內部使用情緒板(如果受限於資源或公司的保密政策),也可以招募用戶來完成。
在內部,由視覺設計師來完成,要注意以下幾點:
1.需要製作3套以上情緒板供評審。
2.製作的過程是個迭代的過程,需要內部團隊慎重討論決定。
3.情緒板的形式可以有多種,如拼貼畫或精緻化的模板(二者的區別在文檔中有)
如果招募外部用戶,則要注意以下幾點:
1.主持人需要不斷詢問被訪者,去探究選擇圖片背後的原因:「為什麼你會選擇這張圖片?能否和大家分享一下你的想法?」
2.注意差異的挖掘。注意挖掘被訪者之間的觀點差異,一百個人心中有一百個哈雷姆特,同一張圖片對於不同被訪者可能會有不同的解釋,如果好幾位被訪者同時選擇一張圖片代表他們各自對某個品牌的感覺,注意詢問他們選擇這張圖片的原因是否一樣。
可以呈現給用戶的圖片有限的,因此,在挑選圖片時,需要內部研究和設計人員協同,根據視覺設計所需要考慮的幾個維度結合已有的關鍵詞進行圖片的篩選。一般來說,在將圖片呈現給用戶之前,內部人員已經明確了每一張圖片所代表的意義,在用戶選擇和訪談結束後,兩方面的數據綜合分析才能獲得最終的結果。
以上是操作情緒板的一些技巧的總結。下面再share兩個情緒板中的用戶實例,以加深大家對情緒板的理解。從下面兩只PPT可以看出來,運用了情緒板方式之後,用戶明顯更有興致分享自己對產品的感受,而且敘述也更加有條理。有興趣的同學,可以下載相關的音頻文件做進一步了解。
最後,提供一些在線調色網站的資源給大家,可以幫助我們為情緒板挑選圖片及在圖片中提取色彩。
------end-------
本來我是想貼完上述結果就完了的,但是怕有人不理解所以做了以下這個示範。
需要說明的是,以下內容僅作參考,我沒精力也沒義務在1小時內完美的做完一套需要一周時間完成的准確無誤的調研分析報告,無論是取樣還是分析肯定都會有很多問題,所以請別扣我細節了。知道是怎麼用就OK。。。
OK,那麼現在我們已經知道了情緒板的運用方法,就來馬上動手試試。
首先,我給自己定義一個主題:外賣APP。
關鍵詞提取:美食 快速 送餐 打電話 (越多越好)
根據關鍵詞尋找的一些圖片(色系盡量豐富,風格盡量多樣):
現在我們基本可以控制可選擇的主題色了,如果人力足夠的話,建議多做幾個版本以查看具體使用效果。當然,也可能是老闆拍板來決定。
其他的視覺風格,如圖像風格、文字排版等也可以在這個調研基礎上進行確定。
㈣ 工商銀行app如何調整系統顏色
摘要 您好,調整設置方法如下:
㈤ 如何更改一個安卓軟體界面的顏色
通常來說,每個界面都對應一個activity。而在activity的View視圖中,可以在最外層容器去設置背景圖片或背景顏色。
在xml布局裡:
android:background="@drawable/img1"
或者
android:background="@color/white"
在java代碼里,也可以設置
1
2
3
layout.setBackgroundColor(R.color.white);
layout.setBackgroundDrawable(drawable);
layout.setBackgroundResource(R.drawable.img1);
再者,系統默認的背景色是能過theme來控制的,就是說創建一個activity的背景色,如果在
AndroidManifest.xml文件里有設置如下:
android:theme="@android:style/Theme"
這樣設置activity的主題樣式,"@android:style/Theme"一般是系統默認的。這個不單是背景色,還有其它的樣式,具體可以在網上查一下android:theme的用法。
而"@android:style/Theme"的背景色就是黑色。
㈥ 如何建立一款App的配色方案
win7更改配色方案的步驟:1、桌面空白處,滑鼠右鍵選擇個性化;2、可以選擇任一主題來更改原配色方案;也可以點底部的窗口顏色;3、點高級外觀設置;4、根據實際需要選擇項目,選擇顏色,更改完成後,點確定。
㈦ 特斯拉app怎麼換顏色
打開軟體,點擊進入我的車輛,
在我的車輛頁面中,點擊進入設置,
進入設置頁面後,點擊頁面上的顏色管理,
進入頁面後,點擊更改車身顏色即可
㈧ 移動app界面設計的技巧有哪些
1、移動app界面設計的技巧——重疊
重疊的字體、圖形和顏色不僅讓界面看起來更生動,還創造了空間感。這就是為什麼在不同的應用程序用戶界面設計中,設計者廣泛使用重疊元素的原因。
此外,在某些情況下,相同元素的重疊,加上陰影,可以使應用程序界面的整體設計更加令人興奮。
2、移動app界面設計的技巧——顏色漸變
在過去的幾年裡,許多設計師使用了移動應用程序界面設計的技術,顏色梯度,試圖設計標志,按鈕和應用程序界面的背景。如果你問為什麼,答案很簡單——即使你只選擇一種顏色,你也可以通過創建豐富的色彩梯度和不同的圖像層次來創建一個令人愉快的圖像。
3、移動app界面設計的技巧——不透明度
在調整或重置透明度後,相同的元素可以產生不同的效果。因此,在設計一個應用程序界面時,設置不同元素的不透明度是創建一個好的設計工作的好方法。
此外,不同的顏色或形狀的透明度設置也可以創建彩色玻璃紋理的效果。這就是為什麼設計師將這種方法應用到他們的標志設計中。
簡而言之,無論您如何將不透明度應用到您的應用程序的用戶界面設計中,設置不同元素的透明度將在您的設計中發揮重要作用。這招永遠不會過時。
4、移動app界面設計的技巧——簡單曲線和幾何
越來越多的移動應用界面設計技巧傾向於在應用界面中採用更簡單、更自然的設計風格,而不是復雜多變的用戶界面設計風格。例如,使用大量簡單曲線、幾何圖形和按鈕的用戶界面設計可能比包含各種顏色、圖形、按鈕、圖像、動畫和更復雜元素的應用程序界面更容易關注應用程序的基本和主要功能。
5、移動app界面設計的技巧——對比顏色或字體以提高可讀性
強烈的顏色或字體對比也可以幫助設計師創建一個吸引用戶注意力的良好用戶界面。例如,添加不同的樣式、類型和字體大小也可以傳達層次感和空間感。不同類型和風格的色彩搭配也會形成鮮明的對比,使整個設計更加豐富多彩,引人注目。
6、移動app界面設計的技巧——人格圖
個性化插圖在應用程序界面設計中也扮演著重要的角色。在app界面上有多種插畫風格,有手繪的,簡約的,剪紙的,還有著名的插畫。這些插圖樣式的使用不僅使應用程序更加有趣和不同,而且也賦予了應用程序個性。在無窮無盡的應用程序流中,用戶會更加印象深刻。
7、移動app界面設計的技巧——功能動畫與交互
在app的圖標、字體、照片和按鈕中,添加動畫或交互對用戶有積極的影響,因為它可以讓用戶體驗更加愉快。
手機應用程序界面設計的訣竅是在應用程序界面的細節上添加更多的交互設計,使用戶能夠輕松使用應用程序並快速獲得反饋。這絕對是一個好的設計趨勢。有抱負的設計師應該順應這一趨勢,在未來豐富自己的應用界面設計。
8、移動app界面設計的技巧——語音控制功能
應用程序的聲控界面簡化了用戶的操作。和Siri一樣,該應用程序可以通過語音命令啟動或登錄,而不需要點擊按鈕或輸入密碼。
當然,除了語音控制,指紋控制將繼續在未來的移動應用界面設計中發揮重要作用。
環球網校小編為大家整理的《有哪些移動app界面設計的技巧,可以令ui設計變得更加精彩?》到這里就結束了,如果你希望能將這篇文章靈活應用,還需多加練習,如果你還想學習更多有關UI設計的技巧或知識,可以點擊本文其他文章進行學習。
㈨ APP界面色彩運用原則與規范!(一)
色彩布局合理
合理的色彩布局是做好UI色彩設計的重要原則,那麼該怎樣做好布局呢?設計師可以通過區分內容的主次關系從而建立視覺層級關系。因為色彩在飽和度、對比度、明度等方面存在明顯差異對比,所以就會形成一個明顯的層級,這樣人們會不自覺先關注色彩鮮艷或者色彩偏重的事物。當然,色彩布局的合理性也會讓整個設計更有主次之分。
節奏有序變化
作為設計師,你需要有自己的設計節奏,而且這個節奏是有序變化的。秩序是色彩美構成的最基本的也是較重要的形式,那麼什麼叫秩序呢?客觀事物總是按照其自身的規律在有序狀態下,有條不紊的發展演變,這就是秩序。一般情況下,在色彩構成中我們可以採用色相、明度、純度級別差遞增、遞減的形式,這樣可使各色按照一定的秩序有規律的變化,從而具有秩序美感,這種秩序美感就會形成自己的設計節奏。
以上是環球青藤小編為考生整理的APP界面色彩運用原則與規范的相關內容,希望對大家有幫助!更多技能資訊的相關內容盡在本平台,快來看看吧!