A. 幾個思路教你如何設計出優秀的界面
1.注重人機交互
人在操作手機時,主要以人的意識為主體,手機起到輔助作用。設計師應考慮到人與手機的各自特點,使得兩者之間相互協調,從而使工作條件達到最優。在使用手機的過程中應盡量減少人的計算和記憶負擔,從而有效地提高對手機的使用效率。游啟
2.顏色搭配方案
色彩是APP界面設計中的重中之重,這關乎是否能夠正確表現出產品氣質和定位。主色決定了手機APP界面的整體設計風格,這個主色代表了產品的文化方向,同時也向用戶傳達了產品的情感。在設計線框圖之前,研發團隊的每個人就應明確產品的定位,提煉出最貼切產品的主色。
在設計手機APP時設計師可以使用互補色,在手機APP界面設計中互補色的對比效果是最為強烈的,給用戶帶來強烈的沖擊,情感豐富,給人留下深刻印象。但是這種視覺沖擊很強的互補色只能在小面積使用。。設計師還可以使用冷暖色對比,這樣的配色會使手機APP界面變得非常出彩,使得分類內容一目瞭然。
3.字體設計方案
設計文字時應保證文字辨識度高和信息傳達的准確性。相對於圖片文字擁有更加清晰准確的表達能力,使得用戶能更加清晰從APP中獲取信息信息,界面內容也更加直觀,用語要簡潔,使得用戶能夠迅速的理解其功能,文字布局上也應做到排版布局合理,結構層次清晰。在字體設計中不同春磨雹風格的字體會給人帶來不同的視覺體驗。
字體設計的節奏感體現在字型大小對比、重量對比、色彩對比上。當字型大小越大時,文字就會顯得越重要,字型大小的大小變化能讓版面展現出強弱變化;最引人注意的標題,在版面中會比其他字體更粗;重要的文字可以換作其他顏色加以區分,紅、扒帆黃、橙等暖色被稱為前進色,它們比藍、綠這些冷色更能起到吸引人眼球的作用。
優秀的APP不僅僅需要滿足用戶對功能的需求,還需要滿足用戶對視覺層面的需求。這些思路你們了解了嗎?
B. 如何提高UI設計的美感
1、多看。為了提高審美,你需要大量去看別人優秀的APP或網頁作品,在站酷、花瓣等設計網站可以很容易 找到大量優秀的作品,多看多想,熟能生巧,等堅持一段時間以後,你就會發現自己的審美提盯扮高了。
2、多做。如果只是看過很多優秀叢鏈的作品,可能還是不會設計,所以為了進一步提升審美能力,接下來就要不斷的練習,通過練習發現自己設計中的不足,形成自己的想法和理念。對於學習過程中遇到的問題,通過網路或滲則孫google及時解決。
3、多想。在學習UI的過程中,設計技法只是一小部分,更多的是要去理解設計背後的思路和原理。比如,為什麼整體色調是暖色系?為什麼要突出某些元素?頁面的結構和布局是怎麼確定出來的等等。不斷去思考,不停去問自己為什麼,只有這樣,才能加深自己對美的理解和認知,才能使設計有理有據,更好地解決問題。
C. 怎麼讓自己做的app界面設計看起來更精細一點
第一點:了解你的目標客戶群的心態
1、做微任務的目標客戶群(如隨時隨地看看新聞,聽聽歌,看看電影,聊聊八卦之類):
這類的解決方案是設計的app最好是小而准,不要大而全。越全的功能應用,只能代表著這個應用在各方面的都很平庸
2、喜歡當工具來使用的目標客戶群:比如找地圖,看天氣,查數據等。
這類的解決方案是 我們盡最大努力的去滿足用戶禪旅的情景需求。做到極致和簡單。
3、無聊的客戶群,用來打發消磨時間的:無需求,漫無目的的賀敏凳
這類的解決方案是盡可能展示用戶感興趣的東西,幫助客戶來打發消磨時光。
第二點:APP原型圖的製作和設計討論
這個環節是必不可少的。需要根據設計需求認認真真的來畫畫原型圖。
常用的APP原型圖工具:移動APP原型設計神器 POP 、axure、Foreui等
第三點:APP視覺設計與設計要點
(1)大概設計板塊有APP啟動頁面設計,APP界面設計的尺寸規范,app圖標設計等
一般來說,手機屏幕是從上往下布局的,重要的信息會放在上方。但是在操作上,大部分人都是單手拿手機,常用的操作,要放在界面的下方。
另外還有一個原則,最小的觸摸單位,一般是44個像素。如果再小,你的拇指難以觸碰,或者容易引發誤操作。同時,也不要讓界面太擁擠。
所以,設計師必須用減法設計,這個過程需要花時間思考、簡化元素。
你必須記住:(1)隱藏設計或者減法設計 (2)分區或分類 (3)幫用戶做決策 (4)提高交互創新設計 (5)讓人有爽快感和新奇感 (6)在設計中浸入情感,把握用戶的心理。(談談如何進行產品設計以及產品情感化設計)
一位大師這樣說過「真正的簡約設計是:作品必須不斷的被簡化,一改再改,直到設計最終成形。」
2014年 APP設計風格趨拿罩向扁平化和卡片化。卡片,扁平化都會是移動app設計的趨勢!認為卡片設計確實同時兼具了「擬物」和「極簡」2種優勢!
D. 對於App界面,怎樣的視覺設計才算優秀
雖然我並不是一個專業的app的設計師,但是看過這么多app的話,也是能夠總結出很多怎麼樣才能把app界面設計的很好的體驗的。
同時app界面的功能的放置的話,一定要能夠合理。
當我使用app的時候,有時候想知道app當中有什麼功能的時候,這個時候就會在當中到處的找。有些app他們設置的不太合理的時候,我就會很難找到它的使用的方法,我覺得這個是app界面設置當中的一個非常重要的一個方面。一定要能夠把你的界面清楚明了的展現給你用戶,否則的話,你會因為你的界面太亂,而失去很多的用戶的。
E. 如何做一個優秀的UI設計師呢
一、兩道思維
很多 UI 拿到一個頁面原型的時候,就立馬打開各大設計網站找參考,然後照著參考頁面上的效果,生搬硬套到原型上,這只是達到了單純美化頁面的效果。
那麼拿到原型後應該帶著怎樣的思維來進行思考呢?
第一道思維:交互思維
先了解頁面實現什麼功能,功能的交互操作流程是怎樣的,也就是說用戶操作這個頁面上的功能時,用戶的行為路徑是怎樣的。
第二道思維:視覺思維
了解完功能、交互後,提取原型中視覺組成元素,細分歸類,每一類應用統一性原則進行設計。
然後交互與視覺一同結合來設計界面。
二、思維應用
結合案例我們來看下兩道思維是如何進行的。
第一道談咐思維:交互思維
了解功能含洞純交互流程。
根據實例原型分析出用戶行為路徑:
用戶行為路徑:
注意點:
用戶行為路徑的獲取,一定要跟產品經理、交互設計師進行溝通確認清楚。
用戶行為路徑某些步驟中,也有先後之分,比如第1步中,用戶輸入了賬戶地址後,才會有賬戶的相關數據顯示。
用戶行為路徑可以支撐信息內容進行歸類分組。
第二道思維:視覺思維
提取視覺組成元素。
視覺元素:
注意點:
提取視覺組件元素盡量詳細歸類。
如有視覺規范,視覺組件元素風格應用請遵循視覺規范。
如無視覺規范,同類視覺組件元素應用統一性原則進行設計。
三、檢驗方案
我們帶著兩道思顫碧維來檢驗一下這位設計師輸出的方案:
問題1:交互層級
問題所在:
數據顯示在前,輸入在後,交互操作層級有點混亂。
問題截圖:
問題解決:
用戶行為路徑中,第1步有個先後順序,先輸入地址,後顯示數據,在進行信息內容布局設計的時候同樣需要有先後順序,所以交互操作層級一定程度上影響著布局排版。
問題2:步驟關聯
問題所在:
「批量轉賬」按鈕歸類到了第1步的信息模塊中,交互操作邏輯有點不通暢。
問題截圖:
解決方案:
用戶行為路徑中,用戶核心費用信息後,最有可能的行為就是點擊「批量轉賬」按鈕,所以「批量轉賬」按鈕與轉賬費用信息的操作關聯性比較大,應該在同一模塊里會更符合交互操作邏輯。
問題3:顏色應用
問題所在:
主色、點綴色、輔助色各自的應用范圍沒有規則,顏色應用混亂。
問題截圖:
問題解決:
一個頁面或者項目中,各種顏色的應用范圍需要有一定規范,文字使用什麼顏色、按鈕使用什麼顏色、輸入組件使用什麼顏色、背景使用什麼顏色都需要有對應的使用規則。
問題4:輸入控制項
問題所在:
輸入類組件樣式存在多樣性,同樣是輸入框,有多種樣式,會造成用戶交互操作上的認知有誤。
問題截圖:
問題解決:
一個頁面或者項目中,輸入類組件樣式應用統一性原則,保持視覺風格一致,從而減少用戶操作認知偏差。
問題5:按鈕樣式
問題所在:
按鈕樣式應用到不具備按鈕點擊屬性的對象上,用戶會認為也是可點擊,會造成用戶交互操作上的認知有誤。
問題截圖:
問題解決:
一個頁面或者項目中,不具備按鈕點擊屬性的元素盡量不要套用按鈕樣式,減少用戶操作認知偏差。
舉個例子:人形的稻草套上人的衣服,成功了欺騙了人們,造成了認知偏差。
問題6:信息展示
問題所在:
同類信息內容的展示存在多樣式,傳達過程中加重了用戶的認知負擔。
問題截圖:
問題解決:
一個頁面或者項目中,同類信息內容的展示應用相似性原則保持視覺風格一致,因為相似性的布局可以更加高效地傳達信息。
舉個例子:電商頁面,金額信息展示;理財頁面,收益信息的展示;都是應用相似性的布局,即統一又高效地傳達信息。
問題7:圖標風格
問題所在:
圖標風格不一致,圖形反白風格,立體風格,線性風格。
問題截圖:
問題解決:
根據產品的特性,建議統一的圖標風格,選擇線性、面性、漸變、立體等風格。
問題八:對齊間隔
問題所在:
頁面元素的對齊、間隔沒有規律,整體視覺顯得鬆散,不嚴謹。
問題截圖:
問題解決:
可以利用柵格系統,把頁面信息內容規整起來。
四、優化方案
根據發現的問題,我們來看一下優化後的設計方案:
優化1:交互路徑
根據用戶行為路徑,將相關聯的信息歸類到一個模塊,每個步驟劃分到一個模塊,相關聯的步驟合並到一個模塊,模塊內完成各自的操作展示任務,模塊之間信息內容互不幹擾,但從結構布局又能夠形成符合交互操作邏輯。
優化2:顏色規范
規范顏色,配色的方法在這里不做深入討論,這里方法的是基於品牌色通過飽和度、亮度、透明度的變化來得出文字各層級的顏色、邊框的顏色。
優化3:輸入控制項
對輸入類控制項的樣式進行了統一,讓用戶從視覺上就能夠清楚地分辨出哪些是可以進行輸入操作的,從而減少用戶對交互操作上的認知成本,提高信息輸入效率。
輸入控制項進行交互時,要有交互狀態反饋,默認狀態、選中狀態、錯誤狀態。視情況而定,可以增加滑鼠移上狀態和不可輸入狀態。
狀態變化時的顏色應用,可以通過變換色相的透明度來保持色彩的一致性。
優化4:按鈕規范
對按鈕進行了分類,分為常規按鈕、圖標按鈕、文字按鈕;對按鈕樣式用顏色進行了統一;按鈕要有交互狀態反饋,不可點擊狀態、可點擊狀態、滑鼠移上狀態、滑鼠按下。
狀態變化時的顏色應用,可以通過變換色相的飽和度、亮度、透明度來保持色彩的一致性。
優化5:信息展示
對信息內容應用相似性原則進行了排版的統一處理,每個小類信息的標題與內容採用統一排版格式,然後重復應用,有助於提高信息獲取效率。
優化6:圖標風格
這里的圖標應用於功能性圖標,統一採用線性圓角風格。功能性圖標需要注意圖標的形狀要能夠正確有效地傳達出功能的含義。
優化7:對齊間隔
應用柵格系統對視覺元素之間的對齊、間隔進行調整,使頁面視覺更加嚴謹,頁面信息更容易閱讀。
五、總結
交互思維
了解頁面中的功能交互流程,梳理用戶操作行為路徑,可以對行為步驟中的信息內容進行歸類分組提供依據,最終有助於頁面信息內容的排版布局。
視覺思維
提取視覺組成元素,對顏色、文字、控制項、圖標等每一類應用統一性原則進行規范設計,再通過視覺元素本身相互組合,最終應用回信息內容上,建立規范的視覺感。
設計一個頁面,交互思維和視覺思維是互相配合的,缺一不可,最終都是為了共同去構造符合交互操作邏輯、滿足視覺美感的界面。
F. 如何制定APP的風格
進行界面設計之前需要理清使用流程
在進行界面設計之前,必須先了解APP應用的使用和操作流程,並且清楚如何設計才能方便用戶操作。如果沒有理清APP應用的使用流程就開始設計,則容易讓整個APP應用的結構變得復雜,開發流程也會變得越來越混亂,從而導致用戶在使用過程中迷失方向,最終卸載這個APP應用。即使是設計功能非常簡單的APP應用,也應該理清該APP應用的界面結構,這樣才能設計出友好的頁面元素,例如導航條、按鈕、背景圖等交互元素。
界面設計時應該避免使用像素低的圖片
當下的移動設備種類繁多,且其屏幕尺寸大小不一,這樣就容易出現一些像素低的圖片在部分高解析度下的屏幕顯示模糊的問題,而模糊的圖片容易給用戶造成非常不好的體驗效果。所以在設計APP應用的界面時,應該從高像素的屏幕尺寸開始設計,然後再根據小尺寸屏幕逐一進行比例縮放,只有這樣才能向下兼容不同移動設備的屏幕。此外,還可以藉助點陣圖操作等方式來處理好高像素圖片縮放帶來的圖片像素不足的問題。
APP應用的界面觸摸點擊區要范圍合理
大部分人的食指的寬頻是在1.8厘米左右的范圍,而對應的像素值差不多在52px左右,所以APP應用界面的觸摸區域應該根據用戶的手指寬頻來設計,同時還要考慮用戶手指在屏幕觸摸滑動過程中可能會出現點位觸摸不準的問題,否則用戶在快速觸摸過程中容易帶來APP應用上的一些誤操作,所以這就要確保APP應用界面上的按鈕一定要足夠大,且觸摸響應延遲要盡可能減小,防止用戶多次重復觸摸帶來的APP應用響應異常。
控制APP應用打開瞬間的過渡動畫時間
很多APP應用都會選擇在用戶第一次打開的時候,設置一個動畫過渡效果,這是對用戶體驗是非常友好的,但是採用過渡動畫應該控制好載入時間。並且要注意的是,APP應用在載入動畫的過程中要做到過渡平滑自然,主要從圖片到動畫間的過渡,以及APP應用載入過程中因為程序異常或者網路原因帶來的白屏問題,當出現白屏的時候應該加入進度條以告知用戶當前的載入進度,而不是讓用戶盲目在界面過渡的載入中長時間等待。
APP應用界面設計要兼容不同系統平台
現在比較主流的手機操作升旦洞系統就是安卓和IOS兩大平台,這兩個手機平台都有各自的特點,不能說哪個好或者壞,所以一款APP應用要確保能夠同時兼容這兩個平台,這就需要APP應用設計師要認真掌握好每個手機操作系統的人機交互方式,設計出能夠適應各個平台的界面和視覺元素,不要讓用戶在不同的手機操作系統吵枯上感覺APP應用的操作和響應很不自然,同時與手機系統的按鈕等元素有種格格不入的感覺。
避免在APP應用界面上大量填充UI元素
APP應用界面並不是UI元素越豐富越好,而往往是越精簡遲基讓人看起來越舒服,因為畢竟手機的屏幕尺寸不可能容納太多東西。所以,當設計師在設計平板電腦上的APP應用界面時,一定要記得在手機上的界面不一定能夠放置像平板電腦那麼多的視覺元素,應該在實際的移動設備上預覽相關的效果再決定是否要放置這么多的UI元素。APP應用界面上填充太多UI元素容易導致頁面雜亂和重點不清,更影響到APP應用功能上的展示。
APP應用界面設計完成後的測試不可缺
不管是最終的APP應用產品還是UI界面,在完成其界面設計後,都應該盡可能多的進行測試工作。即便是設計師已經在不同設備上預覽過無數遍,畢竟APP應用界面在一些特定的情況下出現BUG等問題也是常見的事情,如果不經過測試的話,那麼這些BUG就很難被發現出現,沒有發現自然就不會修復,如果等到APP應用上線之後,在用戶使用時被發現,就會給用戶的瀏覽造成困擾。所以測試也是APP應用界面設計必不可少的工作。android中可以自定義主題和風格。風格,也就是style,我們可以將一些統一的屬性拿出來,比方說,長,寬,字體大小,字體顏色等等。可以在res/values目錄下新建一個styles.xml的文件,在這個文件裡面有resource根節點,在根節點裡面添加item項,item項的名字就是屬性的名字,item項的值就是屬性的值,
G. 怎樣提升手機App UI設計風格
根據你手機APP定義風格,就比如你是一個婚慶的軟體攜襪,如果你用黑棚隱世白色肯定不可以的,是根據產品定位,然後定義風格,進行設鏈肢計,這個沒有什麼限定標准。
H. UI設計的核心是 『美』,UI設計師應該如何提升審美能力
最能體現UI設計師的能力就是作品,想要做出好的作品,必須要有足夠的審美能力,想要有足夠的審美能力就必須在日常生活中日積月累
為什麼需要提高審美能力?
1、『美』是UI設計核心,有足夠高的審美能力,才能設計出來好的作品。
2、『美』能引起用戶悶此襲的共鳴,引導用戶的情感導向。
3、是一個人的核心競爭力,它關繫到一個人的外在形象、內在氣質,進而會影響生活方方面面。
審美能力是什麼?
美,是指能引起人們美感的客觀事物的一種共同的本質屬性。人類關於美的本質、定義、感覺、形態及審美等問題的認識、判斷、應用的過程是美學。
美就是我們在生活和藝術中發現的被人認同的地方,談論美,一定比談論生存,是一件更奢侈的事情,所以只有在自己的狀態比較好的時候才行。在心理學上,人的不同情緒會有不同的能量等級,像憤怒、焦慮、苛求,能量等級就很低;而勇氣、淡定、愉快,能量水平就比較高。能量水平高,才有足夠的時間與精力去欣賞美。所以說,真正重視美的人,其實重視的是內心的體驗,他們不關心是不是一定要有某種目的性,也不關心別人的評價,或者是否符合大眾主流標准。而從這一點延伸出來,缺乏審美力的人,一定是無趣的,也是缺乏儀式感的。
審美,也可以叫品味,它是一種感受力、鑒賞力、判斷力,是從萬千事物中獲得美感的能力,能解讀事物里所要傳遞的情感,主要由人後天培養而成。
美學家蔣勛說過一段話:「人審美水平的高低,決定了他的競爭力水平。因為審美不僅代表著整體思維,也代表著細節思維。給孩子最好的禮物,就是培養他的審美力。」
所以可以說,審美能力,其實就是一個人的核心競爭力,因為它關繫到一個人的外在形象、內在氣質,進而會影響方方面面。
對UI設計師而言,提高審美主要分為三個步驟、分別是 :用眼、用腦、用手
一、提高眼界(用眼)
生活中不缺失美,而是缺少發現美的眼睛。
從這句話,我們可以理解為,生活中不缺失美好事物,而是我們沒有去留意與發現生活之美。
所以提高審美,最基礎的就是提高設計師的眼界,而想要高眼界,就需要大規模看各種優秀作品。
優秀作品可以分為兩類,分別是: 設計作品、日常發現
設計作品
設計師應該多看不同類別的作品,包括但不限於平面、插畫、字體設計、網頁、VI、攝影、動效設計、3D設計等等。
每個設計師都應該早點找到自己的審美偏好,在這個審美偏好范圍內去找尋找最優秀的設計師與設計作品。以下是我推薦的一些設計網站,如:站酷、Dribbble、Behance、Yanko Design、花瓣、Pinterest 等等
日常發現
好的設計需要靈感,扒段而日常發現將會為我們提供豐富的靈感素材。
在街上、商場、公園、影視、旅行中看到的關於美的一切,就如你去逛街時,看到一個令你眼前一亮的一個品牌廣告,或者一個穿著時尚的靚女、一個樣式新奇的包裝盒。它就如日常吃飯一樣構成我們的日常練習,也是為提供主要靈感素材的途徑之一。
日常發現前期需要我們刻意去發現、去尋找。後期就可以被動的吸收,變成一件很自然、很平常的事情。
二、思考分析(用腦)
在擴寬眼界之後,需要去思考分析,不然僅僅是看,而不去吸收與分析,那對UI設計也是無用。
我們要針對性的去思考。比如一張平面,它為什麼用這個顏色?為什麼需要採用這樣的布局?這樣的布局有什麼好處?凸出了什麼信息,如果自己做,能否有更好的創意表現?畫面排版除了這樣的排版方式,能否有更好的版式去表現?
我們去看展,很多時候就是去拍個照。其實如果用點心,收獲會比你想像得更大。
看一個展覽,可以先要問自己幾個問題:這次展覽的內容是什麼?對我工作有沒有可參考性。
去到現場後,從到達現場就可以開始思考,螞兄展會視覺為什麼這么設計?展會門頭裝飾設計優缺點是什麼?是否還可以做的更好。進入展館後,除了多看,也要多摸,這是什麼材質做的,是否可以應用到平常的設計中。也可以看看每個展位的室內設計如何,平面物料如何在展位呈現。
就這樣帶著思考看問題,不停地分析,這樣你吸收更多的營養。
三、動手練習(用手)
有一句俗話「說的好不如做的好」。
具備一定的欣賞能力,就可以通過作品來表現美了。對於一個設計師根本能力,就是將自己心中的『美』表現出來。說的再好,卻不能將它實現出來,那也只是空中樓閣,無用之談。
如何用作品來變現『美』,別無他法,只有不斷的練習。首先最簡單的就是練習就是臨摹,在臨摹的時候需要去分析作品『美』在哪裡,它是如何實現的。即可鍛煉鑒賞能力,也能提高自己設計技巧。
一個好的作品需要不斷的打磨,由許多的細節方面構成,所以不論我們是在項目還是練習時,都不要急於求成,認真對待每一細節。比如採用什麼樣的色彩、圖標大小與類型、留白是多少、採用什麼樣的布局等。只有認真對待每一件事情,終將有所收獲。
另外在進行UI設計時,會涉及到各種「理論」與「規范」,將會在下一篇從界面布局進行詳細描述。
人們在對於美好的事情,保存高度的一致,但對『美』的認知會存在一些差異,這是由一個人的後天培養導致的。
UI設計師提高審美能力、希望能給大家有所幫助、具體如下:
1. 提高對美的認知、保持對生活的儀式感,豐富自己的精神之美
2. 提高自己的眼界、豐富自己的靈感素材,打破自己的設計局限性。
3. 提高自己的分析能力與動手能力,因為設計師是靠作品說話的,作品就是你實力的最好憑證。
I. 如何做出優秀的UI界面
今天簡單介紹兩個方法,可以供大家參考,也可以找一些UI設計資料,大綱如下:
1.品牌基因法
2.「抄櫻備譽」現實
3.多管齊下
1.品牌基因法
這個就不多說了,寫過很多篇了,沒看過的可以去看下:
《品牌基因法做圖標——實戰篇》
2.「抄」現實所有的圖形其實都是對現實物體的提煉與再加工,所以如果我們能夠很好的「抄」現實,那必將是一個很棒的設計技能。怎麼樣「抄」現實呢?舉個例子,現在來畫一個啤酒的易拉罐。首先我們要去找到一個真實的易拉罐:
UI設計
接下來開始「抄襲」它的造型,大家要善於提煉與概括一些形狀,例如看到這個這個易拉罐我們就能知道,它大體是由兩個矩形兩個梯形組成的:
UI設計
很多人說自己造型能力不行,那我們就多用規則的圖形去拼湊,還有現實的物體給你參考,你還有啥不行的,再不行,抽你信不信?有了大體框架,慢慢加一些細節,最後得到下面的線稿:
UI設計
線稿畫好之後,就加個顏色唄:
UI設計
為了增滾肢加質感,咱再加點高光、投影:
UI設計
這樣一個原創的「抄」現實作品不就出來了!我們再來個例子,還是畫一個酒瓶,:
UI設計
首先還是先畫造型,注意,有曲線的地方如果實在不會用布爾運算,就上鋼筆吧,但一定要過度平滑,不然看著就會不精緻。得到線稿如下:
UI設計
接著上顏色,加高光、陰影:
UI設計
「抄」現實是設計師必備的技能,非常鍛煉我們對事物的概括能力,掌握了這招,你就是最棒的!
怎麼練呢?
像我這樣,一段時間給自己一個主題,比如「酒瓶」,那我這一段時間就畫各類酒瓶,畫到自己滿意為止!菜寶寶最近在畫的主題是各地建築,:
UI設計
UI設計
最開始不要害怕和別人的風格太像,這都正常,每一個獨特的風格都是在大量練習與思考之後才能形成的,前期只要內容不同就ok,不要在乎有別人的影子,所以:去練吧,寶貝兒!
3.多管齊下UI設計
大體的輪廓可以參考左圖,但顏色和脊段細節參考第二個,最後得到自己的原創作品:
UI設計
如果你只盯著一個作品來借鑒,做著做著基本就一樣了,然後就沒有然後了,所以多找參考,取每個參考的精華之處,最後融合成自己的作品,這也是原創的另一個途徑。
總結
方法與思路雖然有很多,但還是推薦第一種和第二種,盡量讓設計的靈感、造型、顏色取自現實生活或品牌,這是提高原創度非常可取的方法。與大家共勉,加油!科科。
J. 如何做好APP界面設計
APP界面設計經驗總結
當我們打開一個APP時,從視覺層面分析,影響用戶對APP整體感官體驗的元素主要有:圖片、文字、色彩、圖標、留白等。
圖片的合理運用、清晰的信息層級、舒適的色彩搭配都將會提高整個APP的美感,從而為整個的產品體驗加分。
一個成功的產品,視覺層面只是其中的一部分,但是作為一個合格的UI設計師,我們要做的就是把這其中的一部分做到極致。
下面我們通過圖片、文字、色彩、圖標、留白這幾個維度來解剖APP設計,發現那些微妙的細節。只需要比別人多提高1px的細節,你的APP設計就會更精緻。
目錄
1、圖片,如同一個人的衣著品味;
2、文字,我只想知道重點在那裡;
3、色彩,如何成為「色」計師;
4、圖標,從會畫到畫好之間有多遠;
5、留白,我只想要足夠的空間。
正文
1、圖片,如同一個人的衣著品味
圖片在APP中是非常常見的,圖片的展現形式和圖片的質量都影響著用戶對產品的感官體驗。
圖片的定位就如同一個人的衣著品味,不同的穿衣風格會使別人對你作出不同的判斷,為你打上不同社會屬性的標簽。
下面我們一起來看看圖片在APP設計中需要注意的關鍵點,將會從圖片比例、一致性、圖片質量與真實性等方面進行分析。
1.1、圖片比例有什麼講究?
不同比例的圖片所傳達的信息主體不盡相同,根據產品屬性我們會選擇與之相符的圖片比例進行整體的框架布局。
通過體驗一些主流的APP,我們會發現一些比較常用的圖片比例,如 1:1、4:3、16:9、16:10等等;
也會發現一些打破常規比例的設計,我們需要分析它們的性格,結合自身產品的特點,才能在自己的APP設計中合理的加以運用。
1:1 強調主體的存在感
1:1的圖片比例是比較常見的一種設計比例,利用此長寬比更容易將構圖歸整得簡單,突出主體的存在感。
常用於產品展示、頭像、特寫展示等場景,在電商類APP中尤為常見。
4:3 圖像緊湊、更易構圖
4:3的圖片比例可以使圖像更緊湊,更易構圖,方便設計師發揮。由於手機屏幕容量較小,作為全屏展示時,該比例在App設計布局上面佔用空間較大。
16:9 電影場景般的效果
16:9的圖片比例可以呈現電影場景般的效果,多用於橫向構圖,是應用非常廣泛的尺寸比例之一,能給用戶一種視野開闊的體驗。
在很多影視娛樂類APP設計中運用廣泛,如騰訊視頻、網易雲音樂等。
16:10 擁抱黃金比例
黃金比例就像金字塔上的明珠,越接近她越有魅力,反之會魅力減弱,16:10的圖片比例最為接近。
設計沒有絕對的標准,我們可以遵循一些優秀的經驗規則,但是也要敢於突破規則,嘗試更多的可能性。
X:≤Y 瀑布流設計
X:≤Y代表寬度固定,高度在最大值之間自定義的瀑布流設計,在一些用於用戶沒有很明確的目的,只是喜歡獲取盡量多的信息的情況下採用這種設計方式。
X:≤Y的圖片比例要注意高度的控制,不要超出屏幕可顯示區域的范圍,如花瓣網在750x1334px的設計中高度最大值為:848 px。
以上列舉的僅為部分常用比例的分析與說明,還有更多的比例這里就不一一演示,分享的目的是讓大家養成分析的習慣,結合自身產品特點選擇適合的圖片比例。
圖片比例選擇方式:
a. 以商品展示效果為准,選擇能夠充分表現商品特點的圖片展示比例;
b. 以產品氣質為准,選擇符合產品內容氣質的圖片展示比例;
c. 結合產品特點選擇合適的常用比例;
d. 根據版面布局靈活的自定義特殊的比例值;
e. 分析→打破→創新,創造出符合某種規律或者美學概念的比例值。
1.2、圖片比例的一致性
當我們結合產品特點確定合適的圖片展示比例以後,需要針對整體的布局與圖片分布情況,規范出那些布局可以採用相同的圖片展示比例。
在保障視覺效果與交互形式的情況下,相同的主體,在不同的頁面中最好採用相同的比例呈現,這樣的好處不僅可以保持視覺表達的一致性,也能給後期運營維護帶來便利。
1.3、提高圖片的質量
越來越多的產品對圖片質量開始加以重視,比如網易嚴選對產品圖片的拍攝與處理都有嚴格的規范,目的就是為了提升產品氣質和在用戶心中的印象。
我們在設計的時候更要以最佳的圖片來烘托我們的設計稿,圖片的質量影響著整個界面的格調。
很多夥伴兒會覺得圖片都是後期運營上傳的,我設計稿做得再精美最終也是沒用的。對於這個問題我的觀點是這樣的:
a. 最佳的設計輸出是設計師專業的體現;
b. 把最好的效果呈現給決策者,增加他對你設計能力的印象;
c. 通過制定運營視覺規范來把控圖片質量,是可以嚴格把控你對圖片的視覺追求;
d. 你的態度會給你帶來好運。
1.4、圖片的真實還原
雖然前面提到圖片質量的重要性,但是我們不能為了視覺效果選擇一些與主題無關的配圖,這樣也會給決策者一種誤導。
我們可以提高配圖的質量,但是需要保證圖片的真實還原,這樣才能讓你的設計作品更加真實合理。
在一些本土的產品設計中,對於國外圖片素材的運用,需要謹慎對待。如案例中的模特形象,文案信息的傳達更加偏向於國內的場景,
如果運用一張國外的模特素材也許逼格更高,可是卻無法真實的還原產品場景,會給決策者傳達一種錯誤的認知。
2、文字,我只想知道重點在那裡
文字設計的層次感決定了信息的高效傳達,通過對文字信息的層次處理可以有效的幫助用戶獲取信息,提高用戶對產品的操作效率。
2.1、對文字信息進行層級區分
當我們拿到交互原型或者別的需求文檔時,我們需要對文字的信息層級進行有效的區分,這樣才能讓用戶快速的獲取和理解信息傳達的內容。
文字信息可以簡單劃分為重要信息、次要信息、輔助信息等。在進行文字排版時,需要明確的梳理好信息之間的層級關系,提高用戶對產品的整體體驗。
通過對字體大小、顏色、留白、層級劃分等處理,把相同屬性的信息歸類設計,讓整個信息排列主次分明,層級清晰。
設計師在對文字進行視覺表現時,為了達到整體界面的視覺平衡也需要減少對文字樣式的運用,不可為了突出文字信息而採用過多的表現樣式。
2.2、預估好信息呈現的最大值
當我們在進行界面設計時,初級設計師往往會忽略文字信息的最大值,只是按照自己的習慣進行完美的布局。
最終進入到測試環節時才發現為什麼比自己預期的字數多出這么多信息,此時就會出現返工的情況,給整體的產品開發進度帶來風險。
作為一名合格的UI設計師,我們需要預估好信息呈現的最大值,而不是取最小值或者隨意進行設計,這樣將會在執行的過程中遇到更多不可控的風險。
2.3、善於利用提示符進行設計
在一些會出現大篇幅文字信息的界面設計中,為了提高用戶對信息的獲取效率,我們會根據整體視覺效果選擇合適的提示符進行設計。
很多初級設計師會過於遵循交互原型,往往對大篇幅文字的處理過於隨意,只做著交互原型的美化,缺乏對用戶體驗的主動性。
在進行產品交互設計時,有時候產品或者交互無法站在視覺的角度進行信息的梳理和布局,我們需要利用自己的專業來優化你覺得可以更好的地方,也能為你在整個產品環節中樹立專業性。
關於提示符的設計表現形式主要有數字、字母、圖形、色塊等等,只要能有效的區分信息層級即可。
3、色彩,如何成為「色」計師
色彩給人的感受是最直觀的,不同性格的配色傳達不同的情感。關於配色有一些方法可尋,但是也存在一定的感性判斷。
作為視覺設計師,我們需要學習理性的方法技巧,也要不斷欣賞優秀的作品,提高自身的審美能力。
3.1、色彩基礎知識
色彩分為無彩色系和有彩色系,無彩色系是指白色、黑色、各種深淺不同的灰色;有彩色系是指紅、橙、黃、綠、青、藍、紫等顏色。
關於色彩的更多理論知識這里不做展開,大家自行腦補色相、純度、明度、對比、性格等等方面的理論知識。
3.2、建立色彩庫
作為初級設計師我們對配色的把控不是很穩定,為了提高工作效率,我們需要通過一些理性的方式建立大量的色彩庫,應對不同的需求。
下面列舉部分個人比較常用的方式供大家參考,色彩收集的方法有很多,我們只需要掌握幾個比較適合自己的即可,只要養成習慣並長期堅持,哪怕只運用一種方式,也是收獲頗豐的。
a. 通過各類APP採集色彩
體驗不同領域的APP,建立不同領域對APP色彩組合的選擇,為後期項目設計奠定基礎。根據主色進行分類,
如紅色系列:網易雲音樂、京東、網易嚴選、網易考拉等等;也可以根據產品氣質分類,如文藝、時尚、科技、可愛等等。
b. 通過Dribbble採集色彩
在Dribbble上面,每一幅作品右側都有該作品的配色文件,發現優秀的作品要養成這種採集配色文件的習慣。
c. 通過攝影作品採集色彩
通過優秀的攝影作品採集色彩也是常用的方法之一。
採集方式:
Photoshop打開圖片 → 存儲為Web所用格式→ 選擇GIF格式 → 顏色選擇 8 → 顏色表中雙擊色塊 → 拾色器
d. 通過馬賽克採集色彩
藉助Photoshop濾鏡將圖片進行馬賽克處理,可以得到優秀作品或者攝影圖片的配色組合,特別適合採集同色系的配色。
採集方式:
Photoshop打開圖片 → 濾鏡 → 像素化→ 馬賽克 → 設置單元格大小
e. 從電影中採集色彩
相信大家都喜歡看大片,這部片子之所以能得到大家的追捧,必定有太多值得大家學習的元素。
作為神經敏感的設計師群體,那些刺激到我們神經元的優秀影片場景總是不能錯過的。
3.3、提高審美,增強感性判斷力
配色能力雖然可以通過一些理性的方法提高,但是也存在一定的感性判斷。配色中細微的差異往往都是感性的判斷。
我們需要不斷的欣賞攝影、繪畫、設計作品等等,綜合的提高自身的審美,才能不斷增強感性的判斷力。
作為UI設計師,你不能只關注界面設計,你可以看平面作品、攝影繪畫、影視動效,體驗手工藝製作、運動娛樂、細心的體驗生活中的每一次變化。
3.4、養成分析的習慣
要想擁有良好的配色能力,積累的過程是很重要的。當我們看到優秀的作品,要分析配色之間的對比關系、顏色在色環上的位置關系、HSB數值的關系等等。
只有不斷的分析和總結才能逐步形式自己的思維方式,提高不同配色的把控能力。
分析的習慣不只是運用在色彩上面,對於版面布局、文字信息的處理、icon設計風格、間距留白等等方面都需要不斷的進行分析總結,掌握優秀作品的規則才能形成自我的標准習慣。
4、圖標,從會畫到畫好之間有多遠
圖標是APP設計中的點睛之筆,既能輔助文字信息的傳達,也能作為信息載體被高效的識別。圖標也有一定的界面裝飾作用,提高界面整體的美觀度。
很多初級設計師都會忽略圖標的重要性,也養成去素材網站下載復用的習慣,當這樣的習慣養成後便會逐步喪失自己動手的驅動力,什麼元素都希望能找到素材下載,工作數年之後很快就遇到了自己的瓶頸期。
設計師對圖標設計的態度與把控能力,將會是拉開你與其他設計師差距的因素之一。
圖標設計有下載復用 → 動手設計 → 規范設計 → 融入品牌基因等幾個階段,你現在屬於哪個階段呢?
4.1、下載復用
下載復用是很多初入行業的設計師習慣的工作方式之一,由於自身對軟體技法、設計技巧、創意能力等方面的不足,無法從創意到標准制圖完成一個合格的圖標設計。
缺點:圖標設計風格與細節處理都完全不統一,這樣的習慣一旦養成就會逐步喪失自己的動手能力。
4.2、動手設計
對於大部分有設計追求的設計師,都會意識到圖標設計的重要性,也會結合產品特點繪制統一風格的圖標。
注意事項:圖標設計風格有:線性圖標、填充圖標、面型圖標、扁平圖標、手繪風格圖標和擬物圖標等。
無論我們選擇何種表現形式,在進行設計的時候都要保持風格的統一性,由於圖標的體量不同,相同尺寸下不同體量的圖標視覺平衡不盡相同,例如相同尺寸的正方形會比圓形顯大。
因此,我們需要根據圖標的體量對其大小做出相應的調整。
4.3、規范設計
當設計師養成自己動手的習慣以後,恭喜你已經進步了,保持這樣的習慣。隨著軟體技法的成熟我們需要嚴格控制自己的隨性,運用標準的規范進行圖標設計。
在標准設計的基礎上面我們可以發揮自己的創意,也不一定要局限在標准裡面,但是總體的本質需要符合設計規范。
4.4、融入品牌基因
圖標設計的差異化逐漸變得模糊,隨著很多功能的相似性,圖標的造型設計也幾乎雷同,很多對設計比較講究的產品,也開始根據自身品牌基因,進行圖標定製化。
融入品牌基因的圖標設計具有很強的品牌識別性,不僅可以形成獨有的視覺差異化,也可以增強用戶對產品的記憶。
5、留白,我只想要足夠的空間
適當的留白可以讓你的界面更有靈性,給信息之間預留更多的空間,也能更好的表達信息之間的層次感,相比擁擠的信息布局更能給人舒適的體驗。
當設計師的留白意願被產品或運營以「希望放更多內容」拒絕時,作為設計師我們可以從不同的方向試著表達自己的觀點:
a. 設計出對比稿,把產品需要的方案和你覺得完美的方案進行對比;
b. 篩選出這樣處理的優秀案例,以成功的案例說服產品接受你的方案;
c. 進行用戶測試,選擇一些目標用戶進行體驗,從用戶心聲入手設計最佳的方案;
d. 更多溝通的方法有待你去挖掘,最終的目的都是希望做出更好的產品。
設計小結
1. 不同的圖片比例反應不同的特徵,根據產品特點合理的選擇;
2. 設計中保持相同的圖片比例,不僅使視覺表達一致,也能給後期運營維護帶來便利;
3. 通過提高圖片的質量來提高設計作品的美感度,但是也要保證圖片的真實還原;
4. 文字排版需要注意信息的層次、信息容量的最大值、巧妙的運用提示符等;
5. 養成不斷建立和豐富色彩庫的習慣;
6. 提高審美,增強感性判斷力,養成分析的習慣;
7. 圖標設計經歷的幾個環節:下載復用 → 動手設計 → 規范設計 → 融入品牌基因;
8. 適當的留白可以給人更加舒適的體驗。